/* Shared styling for the Topic 4 lesson pages.
 *
 * One file rather than four copies: these pages will be edited often, and a
 * palette that drifts apart across pages is the fastest way to make a set of
 * resources look like it was assembled rather than designed.
 */

:root { --ink:#10302a; --paper:#f7f5f0; --card:#fffdf7; --mint:#1d6b57;
        --mint-bright:#6fd3bb; --soft:#5d6f68; --line:#d3cfc0; --warm:#b8763f;
        --good:#1d7a5f; --bad:#c8102e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0b2520; --ink:#e8ece9; --card:#16413a; --line:#27564c;
    --soft:#9bb3ab; --mint:#6fd3bb; --warm:#e0a876; --good:#5fc9a6; --bad:#ff8b7a;
  }
}
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--paper); }
body { font-family:"Archivo",system-ui,sans-serif; color:var(--ink);
       font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; }
.wrap { max-width:720px; margin:0 auto; padding:0 20px 90px; }
header.top { background:var(--ink); color:#f4efe4; padding:30px 20px 34px; margin-bottom:30px; }
header.top .wrap { padding-bottom:0; }
.tabs { display:flex; gap:6px; margin:0 0 18px; flex-wrap:wrap; }
.tabs a { font-size:14px; font-weight:600; text-decoration:none; padding:6px 15px;
          border-radius:999px; color:#b9cfc7; border:1px solid rgba(244,239,228,.22); }
.tabs a.on { background:#f4efe4; color:#10302a; border-color:#f4efe4; }
.kicker { font-size:12.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
          color:var(--mint-bright); margin-bottom:10px; }
h1 { font-family:"Literata",Georgia,serif; font-weight:700; font-size:clamp(27px,5.6vw,40px);
     line-height:1.1; letter-spacing:-.025em; margin:0 0 10px; }
header.top p { color:#b9cfc7; margin:0; max-width:560px; }
h2 { font-family:"Literata",Georgia,serif; font-size:23px; letter-spacing:-.02em; margin:38px 0 10px; }
h3 { font-size:17px; margin:24px 0 6px; }
p { margin:0 0 15px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:18px 20px; margin:0 0 16px; }
.key  { border-left:4px solid var(--mint); border-radius:0 12px 12px 0; }
.warn { border-left:4px solid var(--warm); border-radius:0 12px 12px 0; }
.marks { border-left:4px solid var(--bad); border-radius:0 12px 12px 0; }
.marks strong.h { display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
                  color:var(--bad); margin-bottom:6px; }
ul { margin:0 0 14px; padding-left:22px; } li { margin-bottom:7px; }

/* aligned working: one step per row, equals signs in a column, fractions real */
.work { display:grid; grid-template-columns:auto auto 1fr; gap:3px 10px;
        font-size:17px; margin:14px 0 16px; align-items:baseline; }
.work .lhs { text-align:right; } .work .eq { text-align:center; color:var(--soft); }
.work .note { color:var(--soft); font-size:14.5px; }
.frac { display:inline-grid; vertical-align:middle; text-align:center; margin:0 2px; }
.frac > span:first-child { border-bottom:1.5px solid currentColor; padding:0 5px 1px; }
.frac > span:last-child { padding:1px 5px 0; }

/* interactives */
svg.fig { width:100%; background:var(--card); border:1px solid var(--line);
          border-radius:10px; display:block; }
.ctl { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:12px 0 4px; }
.ctl input[type=range] { flex:1; min-width:170px; accent-color:var(--mint); }
.ctl output { font-family:"Literata",Georgia,serif; font-size:19px; min-width:4.2em; }
.stats { display:flex; gap:26px; flex-wrap:wrap; font-size:16px; margin-top:6px; }
.stats b { font-family:"Literata",Georgia,serif; font-size:21px; display:block; }
.seg { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.seg button { font-size:14.5px; font-weight:600; padding:7px 14px; border-radius:999px;
              border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--mint); color:#06211b; border-color:var(--mint); }

/* questions */
input.ans { width:100%; max-width:260px; padding:9px 12px; font-size:16.5px; border:1px solid var(--line);
            border-radius:8px; background:var(--paper); color:var(--ink); font-family:inherit; }
.choices label { display:block; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
                 margin-bottom:7px; cursor:pointer; background:var(--paper); }
.choices input { margin-right:9px; }
button.check { margin-top:10px; padding:9px 18px; font-size:16px; font-weight:600; border:none;
               border-radius:8px; background:var(--mint); color:#06211b; cursor:pointer; }
.fb { margin-top:10px; font-size:15.5px; padding:10px 12px; border-radius:8px; display:none; }
.fb.show { display:block; }
.fb.good { background:rgba(29,122,95,.12); border:1px solid var(--good); }
.fb.bad  { background:rgba(200,16,46,.09); border:1px solid var(--bad); }
.hint { font-size:14.5px; color:var(--soft); }

/* tables scroll rather than the page: a 6 column table cannot fit 375px */
.scroller { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0; }
table.data { width:100%; min-width:330px; border-collapse:collapse; font-size:16px; }
table.data th, table.data td { border:1px solid var(--line); padding:7px 9px; text-align:center; }
table.data th { background:rgba(29,107,87,.1); font-weight:600; }

footer.foot { border-top:1px solid var(--line); margin-top:38px; padding-top:16px;
              font-size:14.5px; color:var(--soft); }
nav.more { font-size:15px; margin-top:26px; }