/* pwa/style.css — 読みやすさだけ。演出なし（お客に渡す雛形）。 */
:root{--ink:#1B2430;--mid:#556070;--faint:#8B95A5;--line:#E3E7EE;--bg:#F7F8FA;--card:#FFFFFF;--acc:#2F5BEA;--warn-bg:#FFF4E5;--warn:#8A5A00;--err-bg:#FDECEC;--err:#9B2226}
*{box-sizing:border-box}
[hidden]{display:none!important} /* #list の display:grid に負けないように */
html{color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
header{position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--line);padding:env(safe-area-inset-top) 0 0}
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px 8px;max-width:720px;margin:0 auto}
.bar h2{margin:0;font-size:17px;font-weight:700;letter-spacing:.01em}
.bar small{color:var(--faint);font-size:12px}
#tabs{display:flex;gap:4px;padding:0 12px 0;max-width:720px;margin:0 auto}
.tab{position:relative;flex:1;appearance:none;background:none;border:0;border-bottom:2px solid transparent;padding:10px 6px 12px;font:inherit;font-size:15px;color:var(--mid);cursor:pointer}
.tab.is-on{color:var(--ink);border-bottom-color:var(--acc);font-weight:700}
.dot{position:absolute;top:8px;margin-left:4px;width:8px;height:8px;border-radius:50%;background:var(--acc)}
#status{margin:0;padding:10px 18px;font-size:13px;text-align:center;color:var(--mid);background:var(--card);border-bottom:1px solid var(--line)}
#status[data-state="stale"]{background:var(--warn-bg);color:var(--warn);font-weight:700}
#status[data-state="error"]{background:var(--err-bg);color:var(--err)}
#status a{color:inherit}
.push{display:block;width:100%;appearance:none;border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--acc);font:inherit;font-size:13px;padding:9px 18px;cursor:pointer;text-align:center}
.push.is-on{color:var(--mid)}
.push.hint{color:var(--mid);cursor:default}
.push:disabled{opacity:.7}
main{max-width:720px;margin:0 auto;padding:12px 12px calc(40px + env(safe-area-inset-bottom))}
#list{display:grid;gap:10px}
.item{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:2px 12px;text-align:left;appearance:none;width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;color:var(--ink);cursor:pointer}
.item:active{background:var(--bg)}
.item .date{grid-row:1/3;align-self:start;font-variant-numeric:tabular-nums;color:var(--mid);font-size:13px;padding-top:3px}
.item .title{font-weight:700;line-height:1.5}
.item.is-unread .title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:2px}
.item .meta{color:var(--faint);font-size:12px}
.empty{color:var(--mid);text-align:center;padding:40px 12px}
.back{appearance:none;background:none;border:0;padding:6px 0;font:inherit;font-size:15px;color:var(--acc);cursor:pointer}
.reader-meta{margin:10px 0 4px;color:var(--faint);font-size:13px}
#reader h1{font-size:22px;line-height:1.4;margin:0 0 18px}
.body{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 18px 14px}
.body h2{font-size:16px;margin:22px 0 6px;padding-top:14px;border-top:1px solid var(--line)}
.body h2:first-child{border-top:0;padding-top:6px;margin-top:6px}
.body h3{font-size:15px;margin:16px 0 4px}
.body p{margin:8px 0}
.body ul,.body ol{padding-left:22px;margin:8px 0}
.body li{margin:4px 0}
.body code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--bg);padding:1px 5px;border-radius:4px}
.body a{color:var(--acc)}
@media (prefers-color-scheme: dark){:root{--ink:#E8ECF2;--mid:#A9B3C1;--faint:#7C8798;--line:#2A3340;--bg:#111720;--card:#1A2230;--acc:#7EA0FF;--warn-bg:#3A2B0A;--warn:#F4C560;--err-bg:#3C1616;--err:#F2A0A0}html{color-scheme:dark}}