/* Liquid Glass(家のアプリ共通の見た目)を Web に移した物。ぼかすのは上下の帯だけ。カードは半透明の面+光沢。丸みは 10/14/18/24/30/pill、影は 4/6/10/14。
   配色は GlassTheme(紫 = 主役・青緑 = 済み・赤 = 困り)。構成: 上の帯(題名+件数+目次)/ 中身 / 下の帯(絞り込み)。 */
:root {
  --paper: #f6f5fa; --raised: #fcfbfe; --sunken: #efeaf7; --deep: #e6e1ef;
  --ink: #1d1a26; --muted: #625d6d; --hair: #e0dce8; --outline: #817a92;
  --violet: #5b45c8; --violet-soft: #e9e4ff; --violet-ink: #261b5e;
  --teal: #267a79; --teal-soft: #d9efed; --teal-ink: #103737;
  --err: #b3261e; --err-soft: #f9dedc;
  --glass: rgba(252, 251, 254, .58); --glass-solid: rgba(252, 251, 254, .9); --glass-edge: rgba(255, 255, 255, .85);
  --shadow: 20, 12, 60;
  --blob1: rgba(91, 69, 200, .22); --blob2: rgba(38, 122, 121, .18); --blob3: rgba(112, 88, 184, .16);
  --r-tile: 10px; --r-small: 14px; --r-card: 18px; --r-group: 24px; --r-bar: 30px;
  --gutter: 16px;
  --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12111a; --raised: #1b1924; --sunken: #262330; --deep: #302c3d;
    --ink: #f0edf7; --muted: #b1acbb; --hair: #3c3849; --outline: #8d879b;
    --violet: #c4b7ff; --violet-soft: #3b3068; --violet-ink: #e9e2ff;
    --teal: #87d2cc; --teal-soft: #164d4b; --teal-ink: #d1f4f1;
    --err: #f2b8b5; --err-soft: #4a2320;
    --glass: rgba(27, 25, 36, .55); --glass-solid: rgba(27, 25, 36, .92); --glass-edge: rgba(255, 255, 255, .16);
    --shadow: 0, 0, 0;
    --blob1: rgba(120, 100, 230, .28); --blob2: rgba(60, 170, 165, .18); --blob3: rgba(140, 110, 220, .2);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #12111a; --raised: #1b1924; --sunken: #262330; --deep: #302c3d;
  --ink: #f0edf7; --muted: #b1acbb; --hair: #3c3849; --outline: #8d879b;
  --violet: #c4b7ff; --violet-soft: #3b3068; --violet-ink: #e9e2ff;
  --teal: #87d2cc; --teal-soft: #164d4b; --teal-ink: #d1f4f1;
  --err: #f2b8b5; --err-soft: #4a2320;
  --glass: rgba(27, 25, 36, .55); --glass-solid: rgba(27, 25, 36, .92); --glass-edge: rgba(255, 255, 255, .16);
  --shadow: 0, 0, 0;
  --blob1: rgba(120, 100, 230, .28); --blob2: rgba(60, 170, 165, .18); --blob3: rgba(140, 110, 220, .2);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--paper); color: var(--ink); font-family: var(--f-body); line-height: 1.7; font-size: 15px; min-height: 100vh; }
/* ぼかす元の背景(glassBackdrop): ゆっくり色の違う光がにじむ */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 12% 8%, var(--blob1), transparent 70%), radial-gradient(55% 45% at 92% 30%, var(--blob2), transparent 70%), radial-gradient(60% 50% at 30% 95%, var(--blob3), transparent 70%); }
.page { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); padding-block: 8px 120px; }
h1, h2, h3 { margin: 0; line-height: 1.35; text-wrap: balance; font-weight: 700; }
h1 { font-size: 1.15rem; letter-spacing: .02em; }
h2 { font-size: 1.15rem; margin: 40px 2px 4px; }
h3 { font-size: .85rem; color: var(--muted); font-weight: 700; letter-spacing: .06em; margin: 22px 4px 8px; }
p { margin: .4em 0; }
.lead { color: var(--muted); font-size: .88rem; margin: 2px 4px 10px; }
code, .mono { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }
a { color: var(--violet); }

/* ぼかす帯(上・下)。ガラスが上に乗る所はここだけ */
.band { position: fixed; left: 0; right: 0; z-index: 10; backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7); background: var(--glass); }
.band.top { top: 0; padding: env(safe-area-inset-top, 0px) 0 0; border-bottom: 1px solid color-mix(in srgb, var(--hair) 80%, transparent); }
.band.bottom { bottom: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid color-mix(in srgb, var(--hair) 80%, transparent); }
.band .in { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }
.top .in { padding-block: 10px 8px; display: grid; gap: 6px; }
.top .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top .stamp { font-size: .72rem; color: var(--muted); font-family: var(--f-mono); }
.counts { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: .76rem; background: color-mix(in srgb, var(--raised) 70%, transparent); border: 1px solid var(--hair); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--outline); flex: none; }
.dot.ok { background: var(--teal); } .dot.run { background: var(--violet); } .dot.bad { background: var(--err); }
.toc { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.toc a { flex: none; text-decoration: none; color: var(--ink); font-size: .8rem; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--raised) 60%, transparent); }
.savemsg { margin: 0; font-size: .72rem; color: var(--muted); min-height: 1.1em; }
.spacer { height: 132px; }
@media (max-width: 560px) { .spacer { height: 158px; } }

/* 下の帯: 絞り込み(下のタブと同じ、押し出しの粒が滑る) */
.seg { position: relative; display: flex; padding: 5px; border-radius: var(--r-bar); background: color-mix(in srgb, var(--raised) 75%, transparent); border: 1px solid var(--hair); box-shadow: 0 6px 16px rgba(var(--shadow), .08); max-width: 460px; margin-inline: auto; }
.seg .f { flex: 1; font: inherit; font-size: .84rem; font-weight: 500; padding: 7px 4px; border: 0; background: none; color: var(--muted); border-radius: 24px; cursor: pointer; position: relative; z-index: 1; transition: color .25s; min-height: 40px; }
.seg .f.on { color: var(--ink); font-weight: 700; }
.seg .knob { position: absolute; top: 5px; bottom: 5px; border-radius: 24px; background: var(--glass-solid); box-shadow: 0 4px 10px rgba(var(--shadow), .12), inset 0 1px 0 var(--glass-edge); transition: left .38s cubic-bezier(.34, 1.4, .64, 1), width .38s cubic-bezier(.34, 1.4, .64, 1); }

/* ガラスの面(ぼかさない。半透明+上の光+縁) */
.glass { position: relative; background: var(--glass); border: 1px solid color-mix(in srgb, var(--hair) 70%, transparent); border-radius: var(--r-group); box-shadow: 0 4px 14px rgba(var(--shadow), .07), inset 0 1px 0 var(--glass-edge); overflow: hidden; }
.glass::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; background: linear-gradient(to bottom, rgba(255, 255, 255, .28), transparent); pointer-events: none; }
:root[data-theme="dark"] .glass::before, :root:not([data-theme="light"]) .glass::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .07), transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .glass::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent); } }
:root[data-theme="light"] .glass::before { background: linear-gradient(to bottom, rgba(255, 255, 255, .5), transparent); }
.glass > * { position: relative; }
.glass.tone-err { border-left: 4px solid var(--err); padding: 10px 16px; margin-top: 10px; border-radius: var(--r-card); }
.glass.tone-err b { color: var(--err); }

.chip { display: inline-block; font-size: .68rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.chip.d { background: var(--teal-soft); color: var(--teal-ink); }
.chip.p { background: var(--violet-soft); color: var(--violet-ink); }
.chip.w { background: var(--err-soft); color: var(--err); }
.chip.a { background: var(--violet-soft); color: var(--violet-ink); }

.items { display: grid; gap: 10px; margin-top: 10px; }
.item { padding: 13px 16px 14px; display: grid; gap: 8px; border-radius: var(--r-card); }
.item[data-v="yes"] { box-shadow: 0 4px 14px rgba(var(--shadow), .07), inset 0 1px 0 var(--glass-edge), inset 4px 0 0 var(--teal); }
.item[data-v="unknown"] { box-shadow: 0 4px 14px rgba(var(--shadow), .07), inset 0 1px 0 var(--glass-edge), inset 4px 0 0 var(--outline); }
.item[data-v="no"] { box-shadow: 0 4px 14px rgba(var(--shadow), .07), inset 0 1px 0 var(--glass-edge), inset 4px 0 0 var(--err); }
.item .head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.item .ttl { font-weight: 700; font-size: .98rem; }
.item .body { font-size: .86rem; margin: 0; color: var(--ink); }
.item .src { font-family: var(--f-mono); font-size: .7rem; color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btns button { font: inherit; font-weight: 700; font-size: .86rem; min-width: 5.4em; min-height: 44px; padding: 6px 18px; border-radius: 999px; border: 1px solid var(--hair); background: color-mix(in srgb, var(--raised) 75%, transparent); color: var(--ink); cursor: pointer; box-shadow: 0 2px 6px rgba(var(--shadow), .06), inset 0 1px 0 var(--glass-edge); transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background .2s; }
.btns button:active { transform: scale(.95); }
.btns button.yes[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.btns button.unk[aria-pressed="true"] { background: var(--deep); border-color: var(--outline); color: var(--ink); }
.btns button.no[aria-pressed="true"] { background: var(--err); border-color: var(--err); color: var(--paper); }
.btns button:disabled, .note:disabled { opacity: .5; cursor: not-allowed; }
.note { font: inherit; font-size: .84rem; width: 100%; min-height: 40px; padding: 7px 14px; background: color-mix(in srgb, var(--sunken) 55%, transparent); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--r-small); }
.f:focus-visible, .btns button:focus-visible, .note:focus-visible, .toc a:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.grp { margin-top: 6px; }

/* 表(板の中の行) */
.scroll { overflow-x: auto; margin-top: 10px; }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .84rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
th { font-size: .74rem; color: var(--muted); font-weight: 700; letter-spacing: .05em; white-space: nowrap; background: color-mix(in srgb, var(--sunken) 50%, transparent); }
tr:last-child td { border-bottom: 0; }
td.k { font-weight: 700; white-space: nowrap; }
details { margin-top: 10px; padding: 0; }
summary { cursor: pointer; padding: 11px 16px; font-weight: 700; font-size: .9rem; }
details > div { padding: 0 16px 12px; }
.foot { margin: 40px 4px 0; color: var(--muted); font-size: .76rem; }
@media (prefers-reduced-motion: reduce) { .seg .knob, .btns button { transition: none; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }