/*
 * guides/_style.css — shared styling for the written pages.
 *
 * Why a separate stylesheet when index.html inlines everything:
 * index.html is one self-contained file on purpose (a calculator that must
 * work even if a second request fails). The guides are prose. They are cheap
 * to re-request, they all look the same, and duplicating 400 lines of CSS
 * into each one would guarantee they drift apart. One file, cached once,
 * shared by every guide.
 *
 * The variables and type scale are copied from index.html deliberately rather
 * than extracted into a shared file. index.html must stay dependency-free;
 * pulling its styling out into an import would break that guarantee for the
 * page that matters most.
 */
:root{
  --bg:#0d0f12; --bg2:#12151a;
  --panel:#15181e; --panel2:#1b1f26; --sunk:#0f1216;
  --line:#282d36; --line2:#353b46;
  --ink:#e9ecf2; --ink2:#c3cad6; --dim:#8b95a5;
  --accent:#f0a92b;
  --data:#63b3f2;
  --good:#49c39a; --warn:#e0b341; --bad:#e2705f;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --grid:rgba(255,255,255,.022);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); line-height:1.62;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px,24px 24px;
}
.wrap{max-width:820px;margin:0 auto;padding:0 20px 72px}

/* ---- masthead: same data-plate line as the calculator ---- */
header{padding:28px 0 8px}
.topbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.home{
  color:var(--accent);text-decoration:none;font-weight:600;font-size:.94rem;
  border:1px solid var(--line2);padding:5px 11px;border-radius:2px;
}
.home:hover{background:var(--panel2)}
.crumb{color:var(--dim);font-size:.86rem}
.crumb a{color:var(--ink2)}
.plate{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;
  color:var(--dim);margin:16px 0 6px;text-transform:uppercase;
}
.plate b{color:var(--line2);font-weight:400}

h1{font-size:1.72rem;line-height:1.25;margin:.2em 0 .5em;letter-spacing:-.01em}
.sub{color:var(--ink2);font-size:1.03rem;margin:0 0 4px}
.meta{color:var(--dim);font-size:.82rem;font-family:var(--mono);margin:10px 0 0}

/* ---- prose ---- */
main{padding-top:26px}
h2{
  font-size:1.24rem;margin:2.1em 0 .55em;padding-top:.5em;
  border-top:1px solid var(--line);letter-spacing:-.005em;
}
h3{font-size:1.04rem;margin:1.6em 0 .4em;color:var(--ink)}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em;padding-left:1.35em}
li{margin:.34em 0}
strong{color:#fff;font-weight:600}
code{
  font-family:var(--mono);font-size:.9em;background:var(--sunk);
  border:1px solid var(--line);padding:1px 5px;border-radius:2px;color:var(--data);
}
a{color:var(--data)}
a:hover{color:var(--accent)}

/* ---- tables: figures are the content, so they get the drawing treatment ---- */
.tw{overflow-x:auto;margin:0 0 1.3em;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--panel)}
caption{
  text-align:left;padding:9px 12px;background:var(--panel2);color:var(--dim);
  font-size:.8rem;font-family:var(--mono);letter-spacing:.04em;
  border-bottom:1px solid var(--line);text-transform:uppercase;
}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{background:var(--panel2);color:var(--ink2);font-weight:600;font-size:.86rem}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono);text-align:right;color:var(--data)}
tbody tr:hover td{background:var(--panel2)}

/* ---- callouts ---- */
.note{
  border:1px solid var(--line2);border-left:3px solid var(--accent);
  background:var(--panel);padding:13px 16px;margin:0 0 1.3em;
}
.note>p:last-child{margin-bottom:0}
.note b{display:block;color:var(--accent);font-size:.82rem;
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.note.warn{border-left-color:var(--bad)}
.note.warn b{color:var(--bad)}

/* ---- call to action back into the calculator ---- */
.cta{
  display:block;border:1px solid var(--line2);background:var(--panel2);
  padding:16px 18px;margin:2em 0 1.4em;text-decoration:none;color:var(--ink);
}
.cta:hover{border-color:var(--accent)}
.cta b{display:block;color:var(--accent);margin-bottom:3px}
.cta span{color:var(--ink2);font-size:.93rem}

/* ---- related links + footer ---- */
.rel{margin:2.4em 0 0;padding-top:1.1em;border-top:1px solid var(--line)}
.rel h2{border-top:0;padding-top:0;margin-top:0;font-size:1.05rem}
.rel ul{list-style:none;padding:0}
.rel li{margin:.5em 0}
footer{
  margin-top:2.6em;padding-top:1.1em;border-top:1px solid var(--line);
  color:var(--dim);font-size:.84rem;
}
footer a{color:var(--ink2)}

@media (max-width:520px){
  h1{font-size:1.42rem}
  .wrap{padding:0 15px 56px}
  th,td{padding:7px 9px}
}