/* 履歴・保存・共有・設定の記憶（src/shared/state.js）。build が /assets/state.css に写し、history か saves のとき計算の画面と共有のページ（/s/）だけが読む。
   ★色と字はサイトの値（style.css の var(--fg) var(--muted) var(--line) var(--accent) var(--tint) …）をそのまま使う。
   ★窓は style.css の dialog.sheet（下からの窓＝.sheet-box・.sheet-top・.sheet-main・.sheet-close）と同じ形＝ここは中身だけ */

/* ── 帯の 🕘（☆ と同じ形・同じ並び。☆ があれば その左、無ければ右の端） ── */
.gm-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  margin: 0 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gm-btn:last-child { margin-right: -6px; }
.app-bar-title .gm-btn + .fav-btn { margin-left: 0; }
.gm-btn:active { transform: scale(0.94); }
.gm-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
@media (hover: hover) { .gm-btn:hover { background: rgba(255, 255, 255, 0.14); } }

/* ── 窓の中身 ── */
.gm-sheet .sheet-main { gap: 12px; }
.gm-tabs {
  flex: none;
  display: flex;
  gap: 4px;
  margin: 12px 18px 0;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--fg) 7%, var(--surface));
}
.gm-tab {
  flex: 1 1 0;
  min-height: 44px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.gm-tab[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.gm-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* 履歴の並び（1行＋時刻・押すと戻る・右に ×） */
.gm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.gm-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.gm-item {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 4px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.gm-line { font-size: 15px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.gm-time { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.gm-del {
  flex: none;
  width: 44px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) {
  .gm-item:hover { background: var(--accent-soft); }
  .gm-del:hover { color: var(--fg); }
}

.gm-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.gm-note { font-size: 13px; line-height: 1.7; color: var(--muted); }
.gm-note a { color: var(--accent); font-weight: 700; margin-left: 6px; }
.gm-reason { font-size: 13px; line-height: 1.6; color: var(--muted); }
.gm-reason:empty { display: none; }
.gm-ask { font-weight: 700; line-height: 1.6; }
.gm-foot { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gm-btns { display: flex; flex-wrap: wrap; gap: 10px; align-self: stretch; }
.gm-btns > button { flex: 1 1 120px; }
.gm-msg { padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; line-height: 1.6; }
.gm-msg.ok { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); }
.gm-msg:empty { display: none; }

/* ボタン（主＝道具の色の面・副＝線・字だけ） */
.gm-primary, .gm-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.gm-primary { border: 0; background: var(--tint, var(--accent)); color: var(--gm-on-primary, #FFFFFF); }
.gm-primary.gm-danger { background: var(--ng, var(--mark)); }
/* 暗い表示: 道具の色の無いページ（設定・道具が分からない共有のページ）の accent と、消すの朱は明るい色＝字は地の色
   （白だと「消す」が 2.45:1 だった＝2026-10-20 デザインシステムを作り直す時に見つけた。数え方は tools/contrast.mjs） */
@media (prefers-color-scheme: dark) {
  body:not(.is-app) .gm-primary, .gm-primary.gm-danger { --gm-on-primary: var(--bg); }
  .gm-share-card.has-tint .gm-primary:not(.gm-danger) { --gm-on-primary: #FFFFFF; }
}
.gm-primary:disabled { background: color-mix(in srgb, var(--fg) 8%, var(--surface)); color: var(--muted); cursor: not-allowed; }
.gm-secondary { border: 1px solid var(--accent); background: transparent; color: var(--accent); }
.gm-secondary:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
.gm-text {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.gm-primary[aria-busy="true"], .gm-secondary[aria-busy="true"], .gm-act[aria-busy="true"] { opacity: 0.7; }

/* 保存: 今の入力を保存（名前の欄＋保存する） */
.gm-new { display: flex; flex-direction: column; gap: 8px; }
.gm-label { font-size: 14px; font-weight: 700; }
.gm-new-row { display: flex; gap: 8px; align-items: stretch; }
.gm-new-row > input { flex: 1 1 auto; min-width: 0; min-height: 46px; }
.gm-new-row > button { flex: none; }
.gm-sub { margin-top: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.gm-saves { display: flex; flex-direction: column; gap: 8px; }
.gm-save-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gm-save { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.gm-save-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gm-save-name { font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.gm-save .gm-line { font-weight: 400; font-size: 14px; color: var(--fg); }
.gm-badge { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; line-height: 1.7; }
.gm-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-act {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.gm-act.gm-act-main { border-color: var(--accent); color: var(--accent); }
.gm-more { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.gm-more > input { min-height: 46px; }
.gm-more > .gm-text { align-self: flex-start; }
/* ★字は 16px のまま（style.css の決まり＝iPhone の Safari は 16px より小さい欄に触ると画面を拡大する・コピーの予備で欄に触る） */
.gm-url { font-family: var(--mono); }
.gm-login { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 4px 0; }
.gm-login-lead { font-size: 16px; font-weight: 700; }
.gm-login .gm-msg { align-self: stretch; }
@media (hover: hover) {
  .gm-act:hover { background: var(--accent-soft); }
  .gm-secondary:hover:not(:disabled) { background: var(--accent-soft); }
}

/* ── 「詳しい設定」の窓の終わりの「次もこの設定で開く」（ログインした人だけ） ── */
.gm-remember { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.gm-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 700; cursor: pointer; }
.gm-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* ── 小さな知らせ（窓を閉じたあと・ページの下） ── */
.gm-toast {
  position: fixed;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 76px);
  z-index: 60;
  width: max-content;
  max-width: min(92vw, 440px);
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 12px;
  background: #1C232B;
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
@media (prefers-color-scheme: dark) {
  .gm-toast { background: #E4E9EE; color: #12161A; }
}

/* ── 共有のページ（/s/?t=…） ── */
.gm-share-head { gap: 8px; padding-top: 6px; }
.gm-share-head h1 { margin: 0; }
.gm-share { gap: 12px; }
/* 道具の色が分かれば、カードの中の線のボタン・リンクもその色（暗いときは白を混ぜて読める明るさに＝道具のページの --accent と同じ） */
.gm-share-card.has-tint { --accent: var(--tint); }
@media (prefers-color-scheme: dark) {
  .gm-share-card.has-tint { --accent: color-mix(in srgb, var(--tint) 50%, #FFFFFF); }
}
.gm-share-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.gm-share-tool { display: flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; }
.gm-share-tool img, .gm-share-tool .glyph-icon { flex: none; border-radius: 14px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.gm-share-tool-text { display: flex; flex-direction: column; min-width: 0; }
.gm-share-tool-text b { font-size: 17px; line-height: 1.4; }
.gm-share-tool-text small { font-size: 13px; line-height: 1.5; color: var(--muted); }
.gm-share-name { margin: 4px 0 0; padding: 0; border: 0; font-size: 21px; line-height: 1.4; overflow-wrap: anywhere; }
.gm-share-summary { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.gm-share-date { font-size: 13px; color: var(--muted); }
.gm-share-open { align-self: stretch; margin-top: 4px; }
.gm-share-copy { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
.gm-share-copy:empty { display: none; }
.gm-share-error-text { font-weight: 700; line-height: 1.7; }