/*
 * Shared styling for the guide pages.
 *
 * The same tokens as index.html and the app itself, so a reader who arrives
 * from a search and then opens the app never feels handed to a second product.
 * index.html keeps its own inline copy on purpose: it is the page Play and the
 * store listing point at, and it must render even if this file 404s.
 */
:root{
  color-scheme: light;
  --bg:#f6f7f9; --surface:#fff; --surface2:#f1f5f9;
  --border:#e2e8f0; --text:#0f172a; --muted:#475569; --faint:#94a3b8;
  --brand:#b45309; --brand-soft:#fef3c7; --pos:#15803d; --neg:#b91c1c;
  --radius:14px;
  --shadow:0 1px 2px rgb(15 23 42/.05), 0 1px 3px rgb(15 23 42/.06);
  --shadow-lg:0 18px 40px -18px rgb(15 23 42/.3);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme=light]){
    color-scheme: dark;
    --bg:#0b1120; --surface:#121a2b; --surface2:#1b2438;
    --border:#263349; --text:#e6edf7; --muted:#94a3b8; --faint:#64748b;
    --brand:#f59e0b; --brand-soft:#422006; --pos:#4ade80; --neg:#f87171;
    --shadow:0 1px 2px rgb(0 0 0/.4);
    --shadow-lg:0 18px 40px -18px rgb(0 0 0/.7);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.72 'Inter var','Inter',ui-sans-serif,system-ui,-apple-system,
       'Segoe UI',Roboto,'Noto Sans','Noto Sans Devanagari','Nirmala UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
a{color:var(--brand)}
.tnum{font-variant-numeric:tabular-nums}

header{
  position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border)
}
.bar{display:flex;align-items:center;gap:14px;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;text-decoration:none;color:var(--text)}
.logo img{width:34px;height:34px;flex:none}
.spacer{flex:1}

.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:10px;
  padding:11px 18px;font-weight:700;font-size:15px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface2)}
.btn-sm{padding:7px 12px;font-size:13px}

/* ---- the article itself ------------------------------------------------ */

/* A comfortable measure. These pages are read on a phone, often in sunlight,
   by someone standing up — long lines are the first thing to go. */
article{max-width:720px;margin:0 auto;padding:42px 20px 8px}
article h1{font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.25;margin:0 0 14px;letter-spacing:-.01em}
article h2{font-size:clamp(1.25rem,2.8vw,1.6rem);margin:44px 0 12px;letter-spacing:-.01em}
article h3{font-size:1.08rem;margin:26px 0 8px}
article p{margin:0 0 16px;color:var(--muted)}
article strong{color:var(--text);font-weight:650}
article ul,article ol{margin:0 0 18px;padding-left:22px;color:var(--muted)}
article li{margin-bottom:8px}
.stand{font-size:1.08rem;color:var(--text)}

.crumb{font-size:13.5px;color:var(--faint);margin-bottom:18px}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--muted)}

/* A worked example — the thing people actually copy. */
.ledger{
  width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden
}
.ledger th,.ledger td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border)}
.ledger th{background:var(--surface2);font-weight:700;font-size:13px;color:var(--muted)}
.ledger tr:last-child td{border-bottom:none}
.ledger td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.note{
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brand);
  border-radius:10px;padding:15px 17px;margin:0 0 20px
}
.note p{margin:0;color:var(--muted);font-size:15px}
.note strong{display:block;margin-bottom:5px;color:var(--text)}

details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:15px 18px;margin-bottom:10px}
details summary{cursor:pointer;font-weight:650;list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';float:right;color:var(--faint);font-weight:700}
details[open] summary::after{content:'−'}
details p{color:var(--muted);margin:11px 0 0;font-size:15px}

/* The offer at the end. Deliberately quiet and last: the page has to be worth
   reading even for someone who never installs anything. */
.cta-box{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin:44px 0 8px;box-shadow:var(--shadow)
}
.cta-box h2{margin:0 0 8px;font-size:1.2rem}
.cta-box p{margin:0 0 16px;font-size:15px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap}

.more{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:18px 0 0}
.more a{
  display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px;text-decoration:none;color:var(--text);font-weight:650;font-size:15px;line-height:1.5
}
.more a:hover{background:var(--surface2)}
.more span{display:block;margin-top:5px;color:var(--muted);font-weight:400;font-size:13.5px}

footer{border-top:1px solid var(--border);padding:34px 0;color:var(--faint);font-size:14px;margin-top:52px}
.frow{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}