/* Dumb Phone Picker — "Plain Phone Manual" design.
   Ported from the dumbphones preview (pointswalkthrough, branch dumbphones-preview):
   cream paper, black ink, one red accent; Newsreader headings, IBM Plex Sans body,
   Courier Prime labels; double rules, numbered rows, square controls. Light only. */

:root {
  --bg:#F3EEE2; --surface:#FBF8F1; --fg:#151515; --muted:#55514A; --line:#CFC8B8; --soft:#ECE5D5;
  --ink:#151515; --ink-2:#2A2A2A; --accent:#B5161E; --accent-hover:#8F1118; --accent-ink:#9E1219;
  --on-ink:#FBF8F1; --on-ink-muted:#C9C3B6;
  --ok:#1E5B3A; --ok-bg:#E2EDE2; --warn:#7A4E00; --warn-bg:#F5E8C8; --bad:#9E1219; --bad-bg:#F5DEDA; --unk:#55514A; --unk-bg:#E6E1D5;
  --font-body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head:"Newsreader", Georgia, "Times New Roman", serif;
  --mono:"Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: light;
}
*,*:before,*:after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 var(--font-body); }
a { color:var(--accent-ink); text-underline-offset:3px; }
a:hover { color:var(--accent-hover); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button, input, select, textarea { font:inherit; color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 1.25rem; }
.skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--on-ink); padding:.5rem .8rem; font:700 .85rem var(--mono); z-index:50; }
.skip:focus { left:1rem; top:1rem; }

/* ---------- masthead ---------- */
.mast { border-top:6px double var(--fg); border-bottom:1px solid var(--fg); margin-top:1.5rem; }
.mast-top { display:flex; justify-content:space-between; gap:1rem; font:700 .78rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; padding:.55rem 0; border-bottom:1px solid var(--fg); }
.mast-top a { color:var(--fg); text-decoration:none; }
.mast-top a:hover { color:var(--accent); }
.mast h1, .page-h1 { font:700 clamp(2.2rem,5vw,3.6rem)/1.02 var(--font-head); letter-spacing:-.02em; margin:1.1rem 0 .4rem; max-width:18ch; }
.mast .lede { font-size:1.05rem; color:var(--muted); max-width:40rem; margin:0 0 1rem; }
.toc { display:flex; flex-wrap:wrap; gap:.2rem 1.6rem; font:400 .9rem var(--mono); padding:.6rem 0; border-top:1px solid var(--fg); }
.mast-top + .toc { border-top:0; }
.toc a { color:var(--fg); text-decoration:none; border-bottom:2px solid transparent; padding:.1rem 0; }
.toc a b { color:var(--accent); margin-right:.35rem; }
.toc a:hover { border-bottom-color:var(--line); }
.toc a[aria-current="page"] { border-bottom-color:var(--accent); font-weight:700; }

/* ---------- type ---------- */
main { padding:1.25rem 0 2rem; }
h1 { font:700 clamp(1.9rem,4vw,2.8rem)/1.08 var(--font-head); letter-spacing:-.02em; margin:.8rem 0 .5rem; }
h2 { font:700 1.5rem/1.2 var(--font-head); letter-spacing:-.01em; margin:2.2rem 0 .6rem; }
h3 { font:700 1.2rem/1.2 var(--font-head); margin:1.4rem 0 .4rem; }
.lede { font-size:1.08rem; color:var(--muted); max-width:42rem; margin:0 0 1rem; }
.small, .note { font-size:.86rem; color:var(--muted); }
.meta { font:400 .82rem var(--mono); color:var(--muted); margin:.1rem 0 .35rem; letter-spacing:.01em; }
.unknown { color:var(--muted); font-style:italic; }
.src { font:400 .72rem var(--mono); color:var(--muted); margin-left:.35rem; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.src:hover { color:var(--accent-ink); }
.eyebrow { font:700 .78rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:1.2rem 0 0; }
.prose { max-width:42rem; }
.prose h2 { font-size:1.45rem; }
.prose li { margin:.3rem 0; }
.prose blockquote { margin:1rem 0; padding:.2rem 1rem; border-left:3px solid var(--accent); color:var(--muted); }
ul.rules { padding-left:1.2rem; max-width:42rem; }
ul.rules li { margin:.4rem 0; }
ul.rules li::marker { color:var(--accent); }

/* ---------- controls ---------- */
.btn, .btn-ghost, button { display:inline-block; border-radius:0; font:700 .9rem var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:.6rem 1rem; cursor:pointer; text-decoration:none; line-height:1.2; }
.btn, button.primary { background:var(--accent); color:var(--on-ink); border:1.5px solid var(--accent); }
.btn:hover, button.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--on-ink); }
.btn-ghost, button { background:transparent; color:var(--fg); border:1.5px solid var(--fg); }
.btn-ghost:hover, button:hover { background:var(--soft); color:var(--fg); }
.actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.1rem 0 1rem; align-items:center; }
input, select, textarea { padding:.45rem .55rem; border:1.5px solid var(--fg); border-radius:0; background:var(--surface); color:var(--fg); max-width:100%; }
input[type=checkbox], input[type=radio] { accent-color:var(--accent); width:1rem; height:1rem; padding:0; }
input[type=number] { width:7rem; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* ---------- two-column layout with § index ---------- */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:2.25rem; align-items:start; }
.layout > * { min-width:0; }
.index { border-left:1.5px solid var(--fg); padding:0 0 0 1.25rem; counter-reset:sec; position:sticky; top:1rem; }
.fgroup { border-bottom:1px solid var(--line); padding:.8rem 0; counter-increment:sec; }
.fgroup:last-child { border-bottom:0; }
.fgroup h2, .fgroup .fh { font:700 .82rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg); margin:0 0 .5rem; display:block; }
.fgroup h2:before, .fgroup .fh:before { content:"§" counter(sec) "\00a0\00a0"; color:var(--accent); }
.fgroup select, .fgroup input[type=number] { width:100%; }
.fgroup p { margin:.2rem 0; font-size:.92rem; }
.check { display:flex; align-items:flex-start; gap:.45rem; font-size:.95rem; padding:.12rem 0; cursor:pointer; }
.check input { margin-top:.28rem; flex:none; }
.hint { font-size:.82rem; color:var(--muted); margin:.35rem 0 0; }

/* ---------- list bar + numbered rows ---------- */
.bar { display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; border-bottom:3px solid var(--fg); padding-bottom:.5rem; margin:1rem 0 .25rem; }
.bar strong, .bar h2 { font:700 1.5rem/1.2 var(--font-head); margin:0; }
.bar .right { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; font-size:.92rem; }
ol.rows { list-style:none; margin:0; padding:0; counter-reset:row; }
li.row { counter-increment:row; border-bottom:1px solid var(--fg); padding:1rem 0; display:grid; grid-template-columns:3.4rem minmax(0,1fr) auto; gap:.2rem .9rem; }
li.row:before { content:counter(row, decimal-leading-zero); font:700 1.7rem/1 var(--mono); color:var(--accent); grid-row:1 / span 3; grid-column:1; }
li.row > * { min-width:0; grid-column:2; }
li.row > .side { grid-column:3; grid-row:1 / span 3; }
li.row h3 { font:700 1.35rem/1.15 var(--font-head); margin:0; }
li.row h3 a { color:var(--fg); text-decoration:none; }
li.row h3 a:hover { color:var(--accent-ink); text-decoration:underline; }
li.row p { margin:.2rem 0; }
li.row > details { grid-column:2 / 4; }
.side { text-align:right; min-width:9rem; }
.big { font:700 1.5rem/1.1 var(--font-head); display:block; }
.side small { color:var(--muted); font-size:.8rem; display:block; line-height:1.3; }
.cmp-label { display:inline-flex; gap:.35rem; align-items:center; font-size:.88rem; margin-top:.4rem; cursor:pointer; }
.tags { display:flex; flex-wrap:wrap; gap:.3rem; margin:.25rem 0 .35rem; }
.tag { font:400 .72rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--fg); color:var(--fg); background:transparent; padding:0 .4rem; white-space:nowrap; }
.tag.warn { border-color:#E3C78F; color:var(--warn); background:var(--warn-bg); }
.verdicts { display:flex; flex-wrap:wrap; gap:.3rem; margin:.2rem 0; }
.verdict { display:inline-block; font:700 .75rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.04em; padding:0 .45rem; border:1px solid currentColor; white-space:nowrap; }
.v-yes { background:var(--ok-bg); color:var(--ok); }
.v-partial { background:var(--warn-bg); color:var(--warn); }
.v-no { background:var(--bad-bg); color:var(--bad); }
.v-unknown { background:var(--unk-bg); color:var(--unk); font-weight:400; }
details summary { cursor:pointer; font:700 .85rem var(--mono); color:var(--accent-ink); margin:.35rem 0; }
details[open] > summary { margin-bottom:.5rem; }
.empty { padding:2rem 0; color:var(--muted); }

/* ---------- tables ---------- */
.tscroll { overflow-x:auto; border:1.5px solid var(--fg); background:var(--surface); }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th, td { text-align:left; vertical-align:top; padding:.55rem .6rem; border-bottom:1px solid var(--line); }
thead th { background:var(--ink); color:var(--on-ink); font:700 .78rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
thead th a { color:var(--on-ink); }
tbody th { font:700 .8rem var(--mono); color:var(--muted); background:var(--soft); text-transform:uppercase; letter-spacing:.03em; width:13rem; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom:0; }
td.num { white-space:nowrap; font-family:var(--mono); }
.specs { margin-bottom:.5rem; }
table.why { font-size:.88rem; }
table.why th { width:auto; }

/* ---------- quiz ---------- */
.quiz { counter-reset:q; }
.quiz fieldset { border:0; border-top:1px solid var(--fg); margin:0; padding:1.2rem 0 1.1rem; counter-increment:q; }
.quiz fieldset:first-of-type { border-top:3px solid var(--fg); }
.quiz legend { float:left; width:100%; padding:0; margin:0 0 .7rem; font:700 1.3rem/1.2 var(--font-head); display:grid; grid-template-columns:3.4rem 1fr; }
.quiz legend:before { content:counter(q, decimal-leading-zero); font:700 1.5rem/1 var(--mono); color:var(--accent); }
.quiz legend .qnum { display:none; }
.quiz .opts { clear:both; display:grid; gap:.4rem; margin-left:3.4rem; }
.option { display:flex; gap:.6rem; align-items:center; border:1.5px solid var(--line); background:var(--surface); padding:.55rem .75rem; cursor:pointer; }
.option:hover { border-color:var(--fg); }
.option:has(input:checked) { border-color:var(--fg); background:var(--soft); }
.option input { flex:none; margin:0; }
.quiz-foot { border-top:6px double var(--fg); padding-top:1rem; margin-top:.5rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }

/* ---------- forms (submit) ---------- */
.stack { display:flex; flex-direction:column; gap:1rem; max-width:40rem; }
.stack label { display:flex; flex-direction:column; gap:.35rem; font:700 .8rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.stack label input, .stack label select, .stack label textarea { font:400 1rem var(--font-body); letter-spacing:0; text-transform:none; }
.stack .primary { align-self:flex-start; }

/* ---------- phone detail ---------- */
.detail-head { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:2rem; align-items:end; border-bottom:3px solid var(--fg); padding-bottom:1rem; }
.pricebox { border:1.5px solid var(--fg); background:var(--surface); padding:.9rem 1rem; }
.pricebox .lbl { font:700 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.pricebox .big { font-size:2rem; margin:.15rem 0 .3rem; }
.pricebox p { margin:.3rem 0; font-size:.88rem; }
.pricebox .btn { margin-top:.5rem; width:100%; text-align:center; }

/* ---------- newsletter + footer ---------- */
.signup { border-top:6px double var(--fg); margin-top:3rem; padding-top:1.1rem; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem 2rem; align-items:end; }
.signup h2 { margin:0 0 .3rem; font-size:1.35rem; }
.signup p { margin:0; color:var(--muted); font-size:.95rem; }
.signup .frow { display:flex; gap:.5rem; }
.signup input[type=email] { flex:1; min-width:0; }
footer.foot { border-top:1px solid var(--fg); margin-top:2rem; padding:1.1rem 0 3rem; color:var(--muted); font-size:.88rem; }
footer.foot p { margin:.3rem 0; max-width:60rem; }
footer.foot .colophon { font:400 .78rem var(--mono); letter-spacing:.08em; text-transform:uppercase; margin-top:.8rem; }

/* ---------- responsive ---------- */
@media (max-width:900px) {
  .layout, .detail-head, .signup { grid-template-columns:1fr; }
  .index { position:static; order:-1; border-left:0; border-top:1.5px solid var(--fg); padding:0; }
  .index.after { order:2; }
  li.row { grid-template-columns:2.6rem minmax(0,1fr); }
  li.row:before { font-size:1.3rem; grid-row:1 / span 2; }
  li.row > .side { grid-column:2; grid-row:auto; text-align:left; display:flex; gap:.5rem 1rem; align-items:baseline; flex-wrap:wrap; min-width:0; }
  li.row > .side .big, li.row > .side small { display:inline; }
  li.row > details { grid-column:1 / 3; }
  .cmp-label { margin-top:0; }
  .mast-top span:last-child { display:none; }
  .quiz legend { grid-template-columns:2.6rem 1fr; font-size:1.15rem; }
  .quiz .opts { margin-left:0; }
  tbody th { width:auto; }
}
@media (max-width:560px) {
  .toc { gap:.2rem 1rem; font-size:.85rem; }
  .signup .frow { flex-direction:column; }
}
.small a, .share a { overflow-wrap:anywhere; }
.cmp-pick select { flex:1 1 14rem; max-width:20rem; }

/* ---------- v2: carrier checker, apps, details, tray, forthcoming ---------- */
.carrier-line { font-size:.92rem; margin:.5rem 0 .3rem; }
.vline { margin:.25rem 0; font-size:.9rem; }
.vnote { overflow-wrap:anywhere; }
.v-likely { background:var(--ok-bg); color:var(--ok); font-weight:400; }
.v-caveat { background:var(--warn-bg); color:var(--warn); }
.apps { display:flex; flex-wrap:wrap; gap:.15rem .8rem; font-size:.86rem; margin:.25rem 0; }
.apps span { white-space:nowrap; }
.m-yes:before { content:"✓ "; color:var(--ok); font-weight:700; }
.m-workaround:before { content:"~ "; color:var(--warn); font-weight:700; }
.m-no { color:var(--muted); text-decoration:line-through; }
.m-unknown { color:var(--muted); }
.m-unknown:before { content:"? "; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:0 .5rem; }
details.more { grid-column:2 / 4; font-size:.92rem; }
.more-body { border-top:1.5px solid var(--fg); background:var(--surface); padding:.75rem .9rem; margin-top:.45rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1.5rem; }
.more-body h4 { margin:0 0 .25rem; font:700 .78rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.more-body ul { margin:0; padding-left:1.1rem; }
.more-body li { margin:.15rem 0; }
.more-body p { margin:.2rem 0; }
ul.srcs { padding-left:1.1rem; overflow-wrap:anywhere; }
section.soon { margin-top:2.5rem; }
.index { max-height:calc(100vh - 2rem); overflow:auto; }
.tray { position:fixed; left:0; right:0; bottom:0; background:var(--ink); color:var(--on-ink); border-top:4px solid var(--accent); z-index:20; }
.tray[hidden] { display:none; }
.tray .wrap { display:flex; align-items:center; gap:.6rem; padding-top:.6rem; padding-bottom:.6rem; flex-wrap:wrap; }
.tray .count { font:400 .85rem var(--mono); color:var(--on-ink-muted); margin-right:auto; }
.tray-slots { display:flex; gap:.4rem; flex-wrap:wrap; }
.tray .slot { border:1px solid var(--on-ink-muted); padding:.15rem .3rem .15rem .55rem; font-size:.88rem; display:flex; align-items:center; gap:.3rem; }
.tray .slot button { background:none; border:0; color:var(--on-ink-muted); padding:0 .25rem; font-size:1rem; line-height:1; text-transform:none; }
.tray .btn-ghost { color:var(--on-ink); border-color:var(--on-ink-muted); }
.tray .btn-ghost:hover { background:var(--ink-2); }
.tray .btn:disabled { opacity:.5; cursor:not-allowed; }
.toast { position:fixed; top:1rem; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--on-ink); padding:.5rem 1rem; font:700 .85rem var(--mono); z-index:40; display:none; }
.toast.show { display:block; }
.checks td, .checks th { font-size:.88rem; }
@media (max-width:900px) {
  details.more { grid-column:1 / 3; }
  .more-body { grid-template-columns:1fr; }
  .index { max-height:none; overflow:visible; }
/* ---------- design pass 2026-10-24 ---------- */
/* results: compact share row instead of a raw 4-line URL */
.share { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; margin:0 0 1.6rem; }
.share .copied { color:var(--ok); font-weight:600; }
/* phones: filters live in a disclosure; open beside the list on desktop, folded on phones */
details.filters > summary { list-style:none; font:700 .82rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg); margin:0 0 .3rem; }
details.filters > summary::-webkit-details-marker { display:none; }
details.filters > summary:before { content:"\25BE\00a0"; color:var(--accent); }
details.filters:not([open]) > summary:before { content:"\25B8\00a0"; }
/* touch: give small links and toggles a 44px-tall hit area without changing the look */
@media (pointer:coarse), (max-width:900px) {
  .toc a { display:inline-flex; align-items:center; min-height:44px; padding:0 .1rem; }
  .toc { padding:.1rem 0; gap:0 1.1rem; }
  .mast-top a { display:inline-flex; align-items:center; min-height:32px; margin:-.5rem 0; }
  details summary { padding:.7rem 0; margin:0; }
  details[open] > summary { margin-bottom:.2rem; }
  .src { display:inline-block; padding:.35rem 0; }
  .cmp-label { min-height:44px; padding:0 .25rem; }
  li.row h3 a { display:inline-block; padding:.25rem 0; }
  footer.foot a, .small a { display:inline-block; padding:.3rem 0; }
  details.filters > summary { display:flex; align-items:center; min-height:44px; padding:0 .9rem; border:1.5px solid var(--fg); background:var(--surface); margin:.6rem 0 .4rem; }
  details.filters[open] > summary { margin-bottom:.4rem; }
  .index:has(> details.filters) { border-top:0; }
}