/* STA102 probability simulations -- shared styles
   Colour tokens follow a validated categorical palette (light and dark stepped
   separately). Charts read these tokens; never hard-code colours in pages. */

:root {
  color-scheme: light;
  --page:      #f9f9f7;
  --surface:   #fcfcfb;
  --surface-2: #f3f2ee;
  --ink-1:     #0b0b0b;
  --ink-2:     #52514e;
  --ink-3:     #898781;
  --grid:      #e1e0d9;
  --axis:      #c3c2b7;
  --border:    rgba(11,11,11,0.10);
  --neutral:   #dcdbd4;           /* the "everything else" category in dot pictures */
  --s1: #2a78d6;  --s2: #eb6834;  --s3: #1baf7a;  --s4: #eda100;
  --s1-wash: rgba(42,120,214,0.10);
  --good:  #006300;  --bad: #b3261e;
  --accent: #2a78d6; --accent-ink: #ffffff;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:#0d0d0d; --surface:#1a1a19; --surface-2:#232321;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
    --neutral:#3a3a37;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s1-wash: rgba(57,135,229,0.14);
    --good:#0ca30c; --bad:#e66767;
    --accent:#3987e5; --accent-ink:#ffffff;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface:#1a1a19; --surface-2:#232321;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,0.10);
  --neutral:#3a3a37;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s1-wash: rgba(57,135,229,0.14);
  --good:#0ca30c; --bad:#e66767;
  --accent:#3987e5; --accent-ink:#ffffff;
  --shadow: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink-1); line-height: 1.55; font-size: 16px;
       -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 0.4em; }
h1 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; margin-top: 0.2em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 0.8em; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }

/* ---------- site chrome ---------- */
.site { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px;
        justify-content: space-between; padding: 10px 20px; background: var(--page);
        border-bottom: 1px solid var(--border); }
.site .home { font-weight: 650; color: var(--ink-1); text-decoration: none; }
.site .home span { color: var(--ink-3); font-weight: 500; }
.site nav { display: flex; gap: 14px; align-items: center; font-size: 0.92rem; }
.site nav a { color: var(--ink-2); text-decoration: none; }
.site nav a:hover { color: var(--ink-1); }
.theme-btn { font: inherit; font-size: 0.85rem; color: var(--ink-2); background: transparent;
             border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.theme-btn:hover { color: var(--ink-1); border-color: var(--ink-3); }

main.page { max-width: 1060px; margin: 0 auto; padding: 26px 20px 60px; }
.crumb { font-size: 0.9rem; margin-bottom: 14px; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--ink-1); }
.lede { font-size: 1.08rem; color: var(--ink-2); max-width: 70ch; }
.source { font-size: 0.88rem; color: var(--ink-3); }
.source b { color: var(--ink-2); font-weight: 600; }
footer.site-foot { max-width: 1060px; margin: 0 auto; padding: 20px; color: var(--ink-3);
                   font-size: 0.85rem; border-top: 1px solid var(--border); }
footer.site-foot a { color: var(--ink-2); }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
         box-shadow: var(--shadow); padding: 20px; margin: 18px 0; }
.panel > h2:first-child { margin-top: 0; }
.panel .intro { color: var(--ink-2); max-width: 72ch; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 820px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

.notes { max-width: 74ch; }
.notes ul { padding-left: 1.2em; }
.notes li { margin: 0.35em 0; }
.callout { border-left: 3px solid var(--accent); background: var(--s1-wash);
           padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0; color: var(--ink-1); }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 4px 0 14px; }
.controls .group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.controls .sep { width: 1px; align-self: stretch; background: var(--border); }
button.btn { font: inherit; font-size: 0.92rem; font-weight: 550; cursor: pointer; border-radius: 8px;
             padding: 7px 14px; border: 1px solid var(--accent); background: var(--accent);
             color: var(--accent-ink); transition: filter .12s; }
button.btn:hover { filter: brightness(1.08); }
button.btn.ghost { background: transparent; color: var(--ink-1); border-color: var(--border); }
button.btn.ghost:hover { border-color: var(--ink-3); }
button.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
button.btn:focus-visible, .seg button:focus-visible, input:focus-visible, select:focus-visible,
.pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

label.field { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; color: var(--ink-2); }
label.field output, label.field .val { color: var(--ink-1); font-weight: 600; min-width: 3.2em;
                                       font-variant-numeric: tabular-nums; }
input[type="range"] { accent-color: var(--accent); width: 150px; }
select { font: inherit; font-size: 0.92rem; color: var(--ink-1); background: var(--surface);
         border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.92rem; color: var(--ink-2); cursor: pointer; }
input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 2px; background: var(--surface-2); }
.seg button { white-space: nowrap; font: inherit; font-size: 0.9rem; border: 0; background: transparent; color: var(--ink-2);
              padding: 5px 12px; border-radius: 7px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink-1); font-weight: 600;
                                   box-shadow: 0 0 0 1px var(--border); }

/* ---------- stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.tile { border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; background: var(--surface); }
.tile-label { font-size: 0.8rem; color: var(--ink-2); }
.tile-value { font-size: 1.45rem; font-weight: 650; line-height: 1.2; margin-top: 2px; }
.tile-sub { font-size: 0.8rem; color: var(--ink-3); margin-top: 2px; }
.tile.key { border-color: var(--accent); }
.tile .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; }
.chart .plot { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.85rem; color: var(--ink-2); margin: 0 0 6px 2px; }
.chart .legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart .legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid currentColor; }
.chart .legend i.box { width: 11px; height: 11px; border: 0; border-radius: 3px; }
.chart .legend i.dash { border-top-style: dashed; }
.chart .legend i.dot { width: 9px; height: 9px; border: 0; border-radius: 50%; }
.chart .title { font-size: 0.92rem; font-weight: 600; color: var(--ink-1); margin: 0 0 4px 2px; }
.chart text { font-family: inherit; }
.tick { font-size: 11px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.axis-title { font-size: 11.5px; fill: var(--ink-2); }
.ref-label { font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.tooltip { position: absolute; pointer-events: none; z-index: 10; background: var(--surface);
           border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-radius: 8px;
           padding: 7px 10px; font-size: 0.82rem; color: var(--ink-1); white-space: nowrap; display: none;
           font-variant-numeric: tabular-nums; }
.tooltip .tt-h { color: var(--ink-2); margin-bottom: 3px; }
.tooltip .tt-row { display: flex; align-items: center; gap: 7px; }
.tooltip .tt-row i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tooltip .tt-row b { margin-left: auto; padding-left: 12px; font-weight: 600; }
details.table-view { margin-top: 8px; font-size: 0.88rem; }
details.table-view summary { cursor: pointer; color: var(--ink-2); }
table.data { border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; font-size: 0.88rem; }
table.data th, table.data td { padding: 4px 12px; border-bottom: 1px solid var(--grid); text-align: right; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th { color: var(--ink-2); font-weight: 600; }
table.data tr.hl td { font-weight: 650; }
.table-wrap { overflow-x: auto; }

canvas.viz { display: block; width: 100%; border-radius: 8px; background: var(--surface); }
.viz-frame { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.caption { font-size: 0.84rem; color: var(--ink-3); margin-top: 6px; }

/* ---------- index ---------- */
.deck { margin: 30px 0 8px; }
.deck h2 { margin-bottom: 2px; }
.deck .deck-sub { color: var(--ink-3); font-size: 0.92rem; margin-bottom: 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
a.card { display: block; text-decoration: none; color: var(--ink-1); background: var(--surface);
         border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
         transition: border-color .12s, transform .12s; }
a.card:hover { border-color: var(--accent); transform: translateY(-1px); }
a.card h3 { margin: 0 0 4px; }
a.card p { margin: 0; color: var(--ink-2); font-size: 0.9rem; }
a.card .tag { display: inline-block; font-size: 0.75rem; color: var(--ink-3); margin-top: 8px; }

/* ---------- small pieces used by several pages ---------- */
.dice-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.die { width: 34px; height: 34px; flex: none; }
.die rect { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.5; }
.die circle { fill: var(--ink-1); }
.die.hit rect { stroke: var(--s2); stroke-width: 3; }
.pill { display: inline-block; font-size: 0.8rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); }
.pill.yes { color: var(--good); border-color: var(--good); }
.pill.no { color: var(--bad); border-color: var(--bad); }
.log { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem;
       display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; min-height: 1.6em; }
.log span { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); }
.log span.kept { color: var(--ink-1); }
.log span.kept.fav { border-color: var(--s1); box-shadow: inset 0 0 0 1px var(--s1); }
.log span.drop { color: var(--ink-3); text-decoration: line-through; }
.playing-card { display: inline-flex; flex-direction: column; justify-content: space-between; width: 42px; height: 58px;
                border-radius: 5px; background: #ffffff; border: 1px solid #c9c8c2; color: #111; padding: 3px 4px;
                font-weight: 700; font-size: 0.85rem; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.playing-card.red { color: #c0262d; }
.playing-card .suit { align-self: flex-end; font-size: 1.15rem; }
.playing-card.back { background: repeating-linear-gradient(45deg, #2a5fb0, #2a5fb0 4px, #3a72c9 4px, #3a72c9 8px); border-color: #1d4a8f; }
.playing-card.mark { outline: 3px solid var(--s2); outline-offset: 1px; }
.hand { display: flex; flex-wrap: wrap; gap: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
  .site .home span { display: none; }
  .site { flex-wrap: wrap; row-gap: 6px; padding: 10px 16px; }
  .site nav { gap: 6px 12px; flex-wrap: wrap; }
  .site nav a { white-space: nowrap; }
  .theme-btn { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }