/* PlotGenerator. Tokens follow the shared interface standard; brand layer = teal accent, serif headings, 8px radius. */
:root{
  --paper:#F7F7F5;--surface:#FFFFFF;--ink:#0A0A0A;--ink-2:#44443F;--mute:#6B6B66;--line:#E3E3DF;
  --accent:#0B6E69;--on-accent:#FFFFFF;--accent-soft:#E6F2F1;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --radius:8px;--btn:32px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#121211;--surface:#1A1A19;--ink:#ECECE8;--ink-2:#C2C2BC;--mute:#9A9A93;--line:#2C2C2A;
    --accent:#5CC8BE;--on-accent:#121211;--accent-soft:#16302E}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 14px/1.6 var(--sans);font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.prose{max-width:760px}

/* header and footer */
.top{border-bottom:1px solid var(--line);background:var(--paper)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;padding-top:12px;padding-bottom:12px}
.logo{font:600 16px/1.4 var(--serif);color:var(--ink)}
.logo:hover{text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:0 4px;min-width:0}
.top nav a{display:inline-flex;align-items:center;min-height:var(--btn);padding:0 8px;color:var(--ink-2);border-radius:var(--radius)}
.top nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.foot{margin-top:56px;border-top:1px solid var(--line);padding:24px 0 40px;color:var(--mute);font-size:12px;line-height:1.5}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px}
.foot a{color:var(--ink-2)}

/* type: the larger, the lighter */
h1{font:400 28px/1.2 var(--serif);margin:32px 0 8px}
h2{font:600 20px/1.3 var(--serif);margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--line)}
h3{font:600 16px/1.4 var(--sans);margin:20px 0 6px}
p,ul,ol,dl{margin:0 0 12px}
ul,ol{padding-left:20px}
li{margin:4px 0}
dt{font-weight:600}
dd{margin:0 0 10px;color:var(--ink-2)}
.lead{color:var(--ink-2);max-width:760px}
.meta,.note{color:var(--mute);font-size:12px;line-height:1.5}
.crumbs{margin:20px 0 0;font-size:12px;color:var(--mute)}
.crumbs a{color:var(--mute)}

/* the one card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;max-width:760px;margin:20px 0 12px}
.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;font-weight:500;color:var(--mute)}
select{font:400 16px/1.2 var(--sans);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  height:var(--btn);padding:0 8px;max-width:100%}

/* buttons: primary, secondary, icon */
.btn{display:inline-flex;align-items:center;gap:6px;height:var(--btn);padding:0 12px;border-radius:var(--radius);font:500 14px/1 var(--sans);
  cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:opacity .15s}
.btn:hover{opacity:.88}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn svg,.icon svg{flex:none}
.icon{display:inline-flex;align-items:center;justify-content:center;width:var(--btn);height:var(--btn);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);color:var(--mute);cursor:pointer;flex:none}
.icon .on{display:none}
.icon[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.icon[aria-pressed="true"] .on{display:block}
.icon[aria-pressed="true"] .off{display:none}

/* results */
.parts{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.parts li{display:grid;grid-template-columns:128px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
.parts .label{font-size:12px;font-weight:500;color:var(--mute)}
.parts .value{min-width:0;overflow-wrap:anywhere}
.summary{color:var(--ink);font:400 16px/1.5 var(--serif);margin:0 0 12px}
.list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line);margin:0;overflow-wrap:anywhere}
.list.titles li{font:400 16px/1.5 var(--serif)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.status{font-size:12px;color:var(--mute);min-height:18px}

/* price test */
.offer{max-width:760px;margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.offer p{margin:0}
.offer .panel{flex-basis:100%;color:var(--ink-2);font-size:12px;line-height:1.5}

.examples p{padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.examples p:first-child{border-top:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
.prose th,.prose td{text-align:left;padding:8px 8px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--ink-2);font-weight:600}
.related{list-style:none;padding:0;margin:0}
.related li{padding:8px 0;border-bottom:1px solid var(--line);margin:0}
details{border-bottom:1px solid var(--line);padding:10px 0}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;font-weight:600;min-height:var(--btn);display:flex;align-items:center}
details p{margin:6px 0 0;color:var(--ink-2)}

/* cookie notice: thin bar at the bottom, two equal buttons */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink-2);cursor:pointer}
.linkbtn:hover{text-decoration:underline}
.consent{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;
  padding:8px 16px;background:var(--surface);border-top:1px solid var(--line);font-size:12px;line-height:1.5;color:var(--ink-2)}
.consent[hidden]{display:none}
.consent p{margin:0}
.consent-actions{display:flex;gap:8px}
.consent-actions .btn{min-width:88px;justify-content:center}
.legal h2{font-size:18px}

@media (max-width:640px){
  :root{--btn:44px}
  .wrap{padding:0 16px}
  h1{margin-top:24px}
  .parts li{grid-template-columns:minmax(0,1fr) auto}
  .parts .label{grid-column:1 / -1}
  .controls .btn.primary{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}