/* 届いたフィードバック（常に最新のページ）の見た目。
   上半分＝旧 quality/scripts/feedback-page.py（コミット 22edb765 の時点）の CSS をそのまま（2026-10-10 本人が選んだ形＝値を変えない。今はデータ出力だけの feedback-live-data.py）。
   下の「ここから下」の節だけが新しく足した物（値は仮置き）。外から何も読まない（CSP の style-src 'self'）。 */
/* 並べ方: 1列のリスト（溜まった物を振り返る）。左に写しの縮小・右にひとことを見出しの大きさで。上に状態で絞る切り替え */
:root{
  --bg:#F2F2F7; --surface:#FFFFFF; --fg:#1C1C1E; --sub:#6C6C70; --faint:#8E8E93; --sep:#E5E5EA;
  --run:#C93400; --run-soft:rgba(255,149,0,.14);
  --blue:#0062CC; --blue-soft:rgba(0,122,255,.11);
  --stall:#D70015; --stall-soft:rgba(255,59,48,.10);
  --chip:#E9E9EE; --seg:#E3E3E8; --seg-on:#FFFFFF; --scrim:rgba(0,0,0,.72); --on-scrim:#FFFFFF;
  --on-scrim-sub:rgba(255,255,255,.7); --scrim-btn:rgba(255,255,255,.16); --scrim-btn-hover:rgba(255,255,255,.26);
  --sys:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --thumb:120px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --surface:#1C1C1E; --fg:#F2F2F7; --sub:#98989F; --faint:#7C7C82; --sep:#38383A;
    --run:#FF9F0A; --run-soft:rgba(255,159,10,.16);
    --blue:#409CFF; --blue-soft:rgba(10,132,255,.18);
    --stall:#FF453A; --stall-soft:rgba(255,69,58,.14);
    --chip:#2C2C2E; --seg:#2C2C2E; --seg-on:#636366; --scrim:rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --surface:#1C1C1E; --fg:#F2F2F7; --sub:#98989F; --faint:#7C7C82; --sep:#38383A;
  --run:#FF9F0A; --run-soft:rgba(255,159,10,.16);
  --blue:#409CFF; --blue-soft:rgba(10,132,255,.18);
  --stall:#FF453A; --stall-soft:rgba(255,69,58,.14);
  --chip:#2C2C2E; --seg:#2C2C2E; --seg-on:#636366; --scrim:rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
body{background:var(--bg);color:var(--fg);font-family:var(--sys);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.page{max-width:880px;margin:0 auto;padding-inline:16px;padding-block:14px 48px;display:flex;flex-direction:column;gap:16px}
.bigtitle{font-size:29.5px;font-weight:700;letter-spacing:.01em;line-height:1.15;text-wrap:balance}
.bigsub{font-size:12px;color:var(--sub);margin-top:2px}
.seg{display:flex;background:var(--seg);border-radius:9px;padding:2px;gap:2px}
.seg button{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:13px;font-weight:500;
  padding:6px 4px;border-radius:7px;cursor:pointer;display:flex;justify-content:center;gap:5px;align-items:baseline;white-space:nowrap}
.seg button .n{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.seg button[aria-pressed="true"]{background:var(--seg-on);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.list{display:flex;flex-direction:column;background:var(--surface);border-radius:14px;overflow:hidden}
.item{display:grid;grid-template-columns:var(--thumb) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;
  padding:14px 16px;border-top:1px solid var(--sep)}
.item.first{border-top:0}
.thumb{grid-row:1 / span 2;align-self:start;width:var(--thumb);aspect-ratio:369/800;max-width:100%;border:1px solid var(--sep);
  border-radius:10px;overflow:hidden;padding:0;background:var(--chip);cursor:zoom-in;display:block}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.thumb.noshot{display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-size:11px;
  color:var(--faint);cursor:default;overflow-wrap:anywhere}
.main{min-width:0;display:flex;flex-direction:column;gap:6px}
.note{font-size:17px;font-weight:600;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.note.empty{color:var(--faint);font-weight:400}
.meta{display:flex;flex-wrap:wrap;gap:2px 0;font-size:12.5px;color:var(--sub)}
.meta span+span::before{content:"・";color:var(--faint)}
.meta .scr{color:var(--fg);font-weight:600}
.status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
.pill{font-size:11.5px;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap}
.pill.new{color:var(--run);background:var(--run-soft)}
.pill.open{color:var(--blue);background:var(--blue-soft)}
.pill.done,.pill.none{color:var(--sub);background:var(--chip)}
.board{order:9;flex-basis:100%;font-size:12px;color:var(--sub);min-width:0;overflow-wrap:anywhere}
.board b{font-weight:600;color:var(--fg)}
.board.id{order:0;flex-basis:auto;color:var(--faint);font-variant-numeric:tabular-nums}
.sig{font-size:11.5px;border-radius:6px;padding:1px 7px;background:var(--chip);color:var(--sub);white-space:nowrap}
.sig.bad{background:var(--stall-soft);color:var(--stall);font-weight:600}
.more{grid-column:2;grid-row:2;align-self:start;margin-top:8px;min-width:0}
.more>summary{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--blue);cursor:pointer;list-style:none;padding:2px 0}
.more>summary::-webkit-details-marker{display:none}
.more>summary svg{transition:transform .2s}
.more[open]>summary svg{transform:rotate(90deg)}
.more>summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.more-body{margin-top:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px 20px}
.sec{min-width:0}
.sec h3{font-size:11.5px;font-weight:600;color:var(--sub);display:flex;gap:6px;align-items:baseline;margin-bottom:3px}
.sec .cnt{font-variant-numeric:tabular-nums;color:var(--faint);font-weight:500}
.sec .cnt.bad{color:var(--stall)}
.lines{list-style:none;display:flex;flex-direction:column;gap:2px}
.lines li{font-size:12.5px;display:flex;flex-wrap:wrap;gap:0 8px;overflow-wrap:anywhere;min-width:0}
.lines .w{min-width:0}
.lines .w.raw{color:var(--sub);font-family:var(--mono);font-size:11.5px}
.lines .t{color:var(--faint);font-size:11.5px;font-variant-numeric:tabular-nums}
.none{font-size:12.5px;color:var(--faint)}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:2px 10px;font-size:12.5px}
.facts dt{color:var(--sub)}
.facts dd{overflow-wrap:anywhere;min-width:0}
.empty-state{padding:28px 16px;text-align:center;color:var(--sub);font-size:13px}
.foot{font-size:11px;color:var(--faint);text-align:center;overflow-wrap:anywhere}
dialog.viewer{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--on-scrim)}
dialog.viewer::backdrop{background:var(--scrim)}
.viewer .stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:24px;padding:24px 16px}
.viewer img{max-height:calc(100vh - 48px);max-width:min(100%,520px);border-radius:12px;display:block;object-fit:contain}
.viewer .side{max-width:300px;display:flex;flex-direction:column;gap:8px;min-width:0}
.viewer .vnote{font-size:18px;font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}
.viewer .vscr{font-size:13px;color:var(--on-scrim-sub)}
.viewer .vpos{font-size:12px;color:var(--on-scrim-sub);font-variant-numeric:tabular-nums}
.viewer .nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.viewer button{border:0;border-radius:999px;background:var(--scrim-btn);color:var(--on-scrim);font:inherit;font-size:13px;padding:6px 14px;cursor:pointer}
.viewer button:hover{background:var(--scrim-btn-hover)}
.viewer button:focus-visible{outline:2px solid var(--on-scrim);outline-offset:2px}
.viewer button:disabled{opacity:.35;cursor:default}
@media (prefers-reduced-motion:reduce){.more>summary svg{transition:none}}
@media (max-width:600px){
  :root{--thumb:84px}
  .bigtitle{font-size:26px}
  .note{font-size:16px}
  .item{column-gap:12px;padding:12px;grid-template-rows:auto}
  .thumb{grid-row:1}
  .more{grid-column:1 / -1;grid-row:auto}
  .viewer .stage{flex-direction:column;gap:12px}
  .viewer img{max-height:calc(100vh - 200px)}
  .viewer .side{max-width:100%;width:100%}
}
/* ── ここから下＝常に最新のページで足した物（2026-10-10 段2）。値は仮置き＝本人が実機で決める（字の段と色は上の値を借りた）── */
/* 右上の「更新」「ログアウト」・一覧の下の「さらに読む」（文字だけのボタン＝対応中の青） */
.acts{display:flex;justify-content:flex-end;gap:4px;margin-bottom:2px}
.act{border:0;background:transparent;color:var(--blue);font:inherit;font-size:13px;font-weight:500;padding:6px 10px;border-radius:7px;
  cursor:pointer;white-space:nowrap}
.act:hover{background:var(--blue-soft)}
.act:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.act:disabled{opacity:.35;cursor:default;background:transparent}
/* 状態の絞りと「状態は M/D H:MM の黒板から」 */
.filter{display:flex;flex-direction:column;gap:6px}
.src{font-size:12px;color:var(--sub)}
/* 読み直しの失敗（一覧は前のまま残す） */
.notice{font-size:12.5px;color:var(--stall);background:var(--stall-soft);border-radius:10px;padding:8px 12px;overflow-wrap:anywhere}
.more-rows{display:flex;justify-content:center}
/* 写しを落としている間（src がまだ無い）は壊れた画像の印を出さない＝灰色の箱のまま */
.thumb img:not([src]),.viewer img:not([src]){visibility:hidden}
/* 読み込み中・空・エラー・資格なし（.empty-state の箱に1〜2行） */
.msg .kind{margin-top:4px;font-size:12px;color:var(--faint);overflow-wrap:anywhere}
.msg .act{margin-top:12px}
/* ログインの画面 */
.list.narrow{max-width:440px}
.login{display:flex;flex-direction:column;gap:12px;padding:16px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld span{font-size:12.5px;color:var(--sub)}
.fld input{font:inherit;font-size:17px;color:var(--fg);background:var(--bg);border:1px solid var(--sep);border-radius:10px;
  padding:10px 12px;width:100%;min-width:0}
.fld input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.login-err{font-size:13px;color:var(--stall);overflow-wrap:anywhere}
.login-btn{border:0;border-radius:10px;background:var(--blue-soft);color:var(--blue);font:inherit;font-size:17px;font-weight:600;
  padding:10px 16px;cursor:pointer}
.login-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.login-btn:disabled{opacity:.35;cursor:default}