/* Shared styling for the guide pages.
 *
 * These are public-facing pages, not the engineering test page, so they
 * get a proper reading layout: one column, generous measure, and type
 * that is comfortable at phone width. The palette is the tools' own, so
 * somebody moving from a guide into a calculator does not feel handed
 * off to a different company.
 */
:root{
  --bg:#f6f6f4; --card:#fff; --fg:#1b1d1c; --muted:#5f6562; --line:#dcdedb;
  --accent:#1f5c4a; --accent-soft:#eff4f1; --warn:#8a5a10; --warnbg:#fbf1dd;
  --stop:#8d2b20; --stopbg:#fbe6e3;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15171a; --card:#1d2024; --fg:#e8eae9; --muted:#9aa3a0; --line:#2f343a;
    --accent:#5fb795; --accent-soft:#1b2a25; --warn:#d7a33f; --warnbg:#2a2316;
    --stop:#e08376; --stopbg:#2d1c19;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15171a; --card:#1d2024; --fg:#e8eae9; --muted:#9aa3a0; --line:#2f343a;
  --accent:#5fb795; --accent-soft:#1b2a25; --warn:#d7a33f; --warnbg:#2a2316;
  --stop:#e08376; --stopbg:#2d1c19;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:46rem; margin:0 auto; padding-block:0 56px; padding-left:16px; padding-right:16px}
img{max-width:100%}

/* masthead ---------------------------------------------------------- */
.top{border-bottom:1px solid var(--line); background:var(--card)}
.topin{max-width:46rem; margin:0 auto; padding:13px 16px; display:flex; gap:14px;
       align-items:baseline; flex-wrap:wrap}
.brand{font-weight:700; letter-spacing:-.01em; color:var(--fg); text-decoration:none}
.brand span{color:var(--accent)}
.topnav{margin-left:auto; display:flex; gap:14px; flex-wrap:wrap; min-width:0}
.topnav a{color:var(--muted); text-decoration:none; font-size:.88rem}
.topnav a:hover{color:var(--accent)}

/* type -------------------------------------------------------------- */
h1{font-size:2rem; line-height:1.18; margin:30px 0 10px; letter-spacing:-.02em; text-wrap:balance}
h2{font-size:1.3rem; margin:34px 0 10px; letter-spacing:-.01em; text-wrap:balance}
h3{font-size:1.04rem; margin:22px 0 6px}
p{margin:0 0 14px}
.lede{font-size:1.1rem; color:var(--muted); margin-bottom:22px}
a{color:var(--accent)}
ul,ol{padding-left:20px} li{margin:7px 0}
code,.code{font-family:var(--mono); font-size:.92em; background:var(--accent-soft);
           padding:1px 5px; border-radius:4px}
.sub{color:var(--muted); font-size:.9rem}

/* blocks ------------------------------------------------------------ */
.card{background:var(--card); border:1px solid var(--line); border-radius:10px;
      padding:16px 18px; margin:18px 0}
.note{border-left:3px solid var(--accent); background:var(--accent-soft);
      padding:12px 14px; border-radius:0 7px 7px 0; margin:18px 0}
.note.warn{border-left-color:var(--warn); background:var(--warnbg)}
.note.stop{border-left-color:var(--stop); background:var(--stopbg)}
.note p:last-child,.card p:last-child{margin-bottom:0}

table{width:100%; border-collapse:collapse; margin:16px 0; font-size:.93rem}
.scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
th,td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--line);
      vertical-align:top}
th{font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted);
   font-weight:600; white-space:nowrap}
td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

.btn{display:inline-block; padding:10px 16px; border-radius:8px; text-decoration:none;
     border:1px solid var(--accent); color:var(--accent); font-weight:600; font-size:.94rem}
.btn.primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btns{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0}

.cta{background:var(--card); border:1px solid var(--accent); border-radius:10px;
     padding:18px; margin:30px 0}
.cta h3{margin-top:0}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;
       margin:18px 0}
.cards .card{margin:0; min-width:0}
.cards h3{margin-top:0; font-size:1rem}
.cards a{text-decoration:none}

.live{font-size:.82rem; color:var(--muted); margin-top:6px}
.pill{display:inline-block; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
      padding:2px 8px; border-radius:99px; border:1px solid var(--line); color:var(--muted);
      white-space:nowrap}
.pill.on{border-color:var(--accent); color:var(--accent)}

footer{border-top:1px solid var(--line); margin-top:46px; padding-top:18px;
       color:var(--muted); font-size:.86rem}
.disclaim{font-size:.84rem; color:var(--muted); border-top:1px solid var(--line);
          margin-top:26px; padding-top:14px}