/* millirec brand stylesheet — the SHIOH STYLE (Nov 1 2026, Rob: "make the
 * millirec site into the shioh style"): pastel cells floating over a dark
 * handwriting pattern, the brandbar turned into a sticky sidebar cell, one main
 * column, Montserrat headings on translucent bands, Open Sans text.
 *
 * Every class name the pages use is kept (.brandbar, .tile, .tile-head, .btn,
 * .bento, .head, .wrap, .foot …) so the ~40 pages restyle from here without
 * markup changes. Where a page's own <style> fights the look (a local body
 * background, square "well" tiles), the rule here is written one step more
 * specific (`html …`) instead of editing the page.
 *
 * NO DARK VARIANT, on purpose: the background is already dark and the cells
 * stay pastel in every OS mode. A page that switches ink colours on
 * prefers-color-scheme would put light ink on a pastel cell — those switches
 * were removed with this change.
 *
 * DRIFT NOTE: jatijm/src/brand.css used to be "the same skeleton"; it keeps
 * the old look. Rob asked for millirec only.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

/* ---------- tokens ---------- */
:root {
  /* brand — the two halves of the wordmark */
  --blue:       #1f4bb8;
  --red:        #c02a24;
  --accent:     var(--blue);
  --accent-2:   var(--red);
  --accent-ink: #ffffff;      /* text ON an accent fill */
  /* link TEXT on a cell: the wordmark blue reads 3.8-4.1:1 on three of the
   * pastels, so text links take a deeper blue (>= 5.1:1 on all five); the
   * wordmark blue stays for button fills (white on it: 7.6:1) */
  --link: #173a91;
  --accent-soft:  #dfe7fb;    /* accent at tint strength: chips, hovers */
  --accent-2-soft:#fbe3e1;

  /* the five CELL colours (Shioh "pastels", tuned to the wordmark's blue and
   * red; checked with check-contrast.mjs: ink 7.9-10.4:1, muted >= 4.9:1).
   * Cells rotate through them; a section owns one (see --section below). */
  --card-1: #a9bfe8;   /* sky — the blue half */
  --card-2: #e3a9a4;   /* rose — the red half */
  --card-3: #c2b3e6;   /* lilac */
  --card-4: #a7d6c3;   /* mint */
  --card-5: #e6cf98;   /* sand */
  --card:   var(--card-1);
  --section: var(--card-1);
  --bar:    rgb(255 255 255 / .25);   /* a cell's title band */
  --band-strong: rgb(255 255 255 / .55);

  /* surfaces INSIDE a cell. --bg stays light: pages use it for in-cell
   * backgrounds and for text on dark fills; the page itself is --page-bg. */
  --bg:      #f4f6fb;
  --panel:   #ffffff;
  --panel-2: #f8fafe;
  --edge:    rgb(20 28 48 / .22);
  --fg:      #222222;
  --dim:     #3d4352;

  /* the page behind the cells */
  --page-bg: #070a12;
  --pattern: url('/pattern.svg');
  --pattern-size: 240px 48px;
  --overlay: rgb(0 0 0 / .5);

  /* status */
  --ok:   #17643e;
  --warn: #8a5212;
  --bad:  var(--red);

  /* shape + type */
  --radius:    12px;
  --radius-sm: 6px;
  --gap:       12px;
  --sidebar:   240px;
  --shell-max: 1240px;
  --cell-border: 1px solid rgb(0 0 0 / .35);
  --shadow:      0 2px 12px rgb(0 0 0 / .28);
  --shadow-lift: 0 6px 20px rgb(0 0 0 / .32);
  --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-head: 'Montserrat', 'Open Sans', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* pages that once darkened their own "well" behind the tiles */
html:root { --well: transparent }

/* ---------- base ---------- */
* { box-sizing: border-box }
html body {
  margin: 0;
  color: var(--fg);
  font: 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  background-color: var(--page-bg);
  background-image: linear-gradient(var(--overlay), var(--overlay)), var(--pattern);
  background-size: auto, var(--pattern-size);
  background-attachment: fixed;
  min-height: 100vh;
}
html a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: 0 }
code, .mono { font-family: var(--mono) }

/* ---------- the shell: a fixed sidebar cell + one main column ----------
 * The pages are `<header class="brandbar">` + `<main>`/`.wrap` + footer, in
 * any number. A fixed sidebar (rather than a grid) keeps that markup as it
 * is: the body is padded clear of it, and the column is centred at
 * --shell-max. Below 860px everything stacks. */
:root { --shell-l: max(var(--gap), calc((100vw - var(--shell-max)) / 2 + var(--gap))) }
@media (min-width: 861px) {
  html body:has(> .brandbar) {
    padding: var(--gap) var(--shell-l) var(--gap) calc(var(--shell-l) + var(--sidebar) + var(--gap));
  }
  body > .brandbar {
    position: fixed; top: var(--gap); left: var(--shell-l); width: var(--sidebar);
    max-height: calc(100vh - 2 * var(--gap)); overflow: auto;
  }
}
@media (max-width: 860px) {
  html body:has(> .brandbar) { padding: 8px }
  body > .brandbar { margin-bottom: var(--gap) }
}

/* the sidebar cell: the logo on a band, the nav as rows */
.brandbar {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card-1); color: var(--fg);
  border: var(--cell-border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 0 10px 12px;
}
.brandbar > a:first-child {
  display: block; margin: 0 -10px 6px; padding: 14px 16px 12px;
  background: var(--band-strong); border-radius: var(--radius) var(--radius) 0 0; text-align: center;
}
.brandbar .logo { height: 34px; display: inline-block; vertical-align: middle }
html .brandbar nav { display: flex; flex-direction: column; gap: 1px; margin: 0; font-size: .93rem }
.brandbar nav a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--fg) }
.brandbar nav a:hover { background: rgb(255 255 255 / .3); text-decoration: none }
/* the current section: pages mark it inline (style="color:var(--fg)") or with aria-current */
.brandbar nav a[aria-current="page"], .brandbar nav a[style*="--fg"] { background: rgb(255 255 255 / .65); font-weight: 600 }
.brandbar nav a[href="/terms.html"] { margin-top: 6px; border-top: 1px solid rgb(34 34 34 / .2); border-radius: 0 0 6px 6px }
@media (max-width: 860px) {
  .brandbar > a:first-child { padding: 10px }
  html .brandbar nav { flex-direction: row; flex-wrap: wrap; gap: 2px; font-size: .88rem }
  .brandbar nav a { padding: 4px 8px }
  .brandbar .logo { height: 28px }
  .brandbar nav a[href="/terms.html"] { margin-top: 0; border-top: 0; border-radius: 6px }
}

/* each section owns a cell colour; pages say which section they are in through
 * the nav's current link, so no page needs a class */
body:has(.brandbar a[href="/widget.html"][style*="--fg"])  { --section: var(--card-2) }
body:has(.brandbar a[href="/builder/"][style*="--fg"])     { --section: var(--card-3) }
body:has(.brandbar a[href="/overlap.html"][style*="--fg"]) { --section: var(--card-5) }
body:has(.brandbar a[href="/examples.html"][style*="--fg"]) { --section: var(--card-4) }
body:has(.brandbar a[href="/help.html"][style*="--fg"])    { --section: var(--card-3) }

/* reading pages (help, handwriting input, terms, privacy): the column is ONE cell */
html body > .wrap {
  max-width: none; margin: 0; padding: 4px 26px 26px;
  background: var(--section); border: var(--cell-border); border-radius: var(--radius); box-shadow: var(--shadow);
}
body > .wrap > h1:first-child, body > .wrap > h1:first-of-type {
  margin: -4px -26px 18px; padding: 14px 26px; background: var(--bar);
  border-radius: var(--radius) var(--radius) 0 0; text-align: center;
}
body > .wrap h2 { padding: 6px 12px; background: var(--bar); border: 0; border-radius: 6px }
body > .wrap code, body > .wrap pre { border-color: rgb(34 34 34 / .2) }

/* a game's or page's heading block is a cell too: text never sits on the pattern */
main > .head, main > section > .head {
  background: var(--section); border: var(--cell-border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 20px; margin: 0 0 var(--gap);
}
main > .head h1, main > section > .head h1 { margin-top: 0 }
main > .head p, main > section > .head p { color: var(--dim) }
/* a game's option bar sits between cells: on a light strip, so its labels
 * never sit on the pattern */
main > .bar {
  background: #eef1f7; border: var(--cell-border); border-radius: var(--radius);
  padding: 8px 12px;
}

/* ---------- components ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* A tile is a CELL: one of the five colours in rotation by position among its
 * siblings (or named with t1–t5), a 1px dark border, a soft shadow. Its first
 * heading is the TITLE BAND: centred Montserrat on translucent white, flush
 * with the cell's top edge. */
html .tile {
  background: var(--card);
  color: var(--fg);
  border: var(--cell-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px 20px;
}
.tile:nth-child(5n+1) { --card: var(--card-1) }
.tile:nth-child(5n+2) { --card: var(--card-2) }
.tile:nth-child(5n+3) { --card: var(--card-3) }
.tile:nth-child(5n+4) { --card: var(--card-4) }
.tile:nth-child(5n+5) { --card: var(--card-5) }
.tile.t1 { --card: var(--card-1) } .tile.t2 { --card: var(--card-2) } .tile.t3 { --card: var(--card-3) }
.tile.t4 { --card: var(--card-4) } .tile.t5 { --card: var(--card-5) }
.tile > :first-child { margin-top: 0 }
.tile > :last-child { margin-bottom: 0 }
.tile h2, .tile h3 { font-size: 1.05rem; margin: 0 0 8px }
html .tile > h2:first-child, html .tile > h3:first-child, html .tile > .tile-head {
  margin: -16px -20px 14px; padding: 10px 20px;
  background: var(--bar); text-align: center; font-size: 1.15rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tile > .tile-head h2, .tile > .tile-head h3 { margin: 0; text-align: center; font-size: 1.15rem }
/* a title carries no chip — "live", "new", "play" and the like are gone */
.tile > h2 .chip, .tile > h3 .chip, .tile > .tile-head .chip { display: none }
.tile p { color: var(--dim); font-size: .94rem }
.tile .chip { --chip-bg: rgb(255 255 255 / .65) }

.btn {
  display: inline-block; font: inherit; font-size: .92rem; font-weight: 600;
  padding: 8px 16px; border-radius: var(--radius-sm);
  border: 1px solid #222; background: #fff; color: var(--fg);
  cursor: pointer;
}
.btn:hover { text-decoration: none; background: #f3f1f7 }
.btn.primary   { background: var(--accent);   border-color: var(--accent);   color: var(--accent-ink) }
.btn.secondary { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink) }
.btn.primary:hover, .btn.secondary:hover { opacity: .9 }
.btn:disabled { opacity: .45; cursor: not-allowed }
:where(input, select, textarea, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }

.chip {
  display: inline-block; font-size: .74rem; font-weight: 600;
  padding: .1rem .6rem; border-radius: 999px;
  background: rgb(255 255 255 / .65); color: var(--link);
}
.chip.r { color: var(--accent-2) }

.note {
  border: 1px solid var(--edge); border-left: 4px solid var(--accent);
  background: rgb(255 255 255 / .55); border-radius: var(--radius-sm);
  padding: 12px 16px; font-size: .93rem;
}
.note.warn { border-left-color: var(--warn) }
.note.bad  { border-left-color: var(--bad) }

.dim { color: var(--dim) }
.num { font-family: var(--mono); color: var(--link); font-weight: 600 }

/* ---------- bento ----------
 * The home page's grid of cells. It used to lock to the viewport with tiles
 * scrolling inside; in the Shioh column the PAGE scrolls and every cell shows
 * all of itself. The 12-column spans are kept. */
html .bento-shell { display: block; min-height: 0; height: auto; overflow: visible }
html .bento-shell > main { padding: 0; background: none; max-width: none; margin: 0 }
.bento { display: grid; gap: var(--gap) }
html .bento > .tile, html .bento .tile > .tile-head { border-radius: var(--radius) }
html .bento .tile > .tile-head { border-radius: var(--radius) var(--radius) 0 0; position: static }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: auto }
  .bento > * { min-width: 0 }
  .c3, .c4 { grid-column: span 4 } .c5 { grid-column: span 5 } .c6 { grid-column: span 6 }
  .c7 { grid-column: span 7 } .c8 { grid-column: span 8 } .c9 { grid-column: span 9 } .c12 { grid-column: span 12 }
}

/* the footer: a light label, never text on the pattern */
html .foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: var(--gap); padding: 10px 16px; color: var(--fg); font-size: .85rem;
  background: #eef1f7; border: var(--cell-border); border-radius: var(--radius);
}
.foot img { height: 20px }
.foot:empty { display: none }