/* millirec brand stylesheet — rec.<domain>
 *
 * This file and jatijm/src/brand.css are the SAME skeleton: identical token
 * names, identical component classes, identical bento rules. Only the token
 * VALUES differ (millirec: red + blue; jatijm: pastels). That is what makes
 * two sites on two domains feel like one family — if you add a component here,
 * add it there too, or the family drifts.
 *
 * Pages that predate this file keep their own page-specific rules and just
 * drop their local :root block; the tokens below are what they inherit.
 */

/* ---------- 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 */
  --accent-soft:  #e6edfd;    /* accent at tint strength: chips, hovers */
  --accent-2-soft:#fce9e7;

  /* surface */
  --bg:      #f4f6fb;
  --panel:   #ffffff;
  --panel-2: #f8fafe;
  --edge:    #dbe2f0;
  --fg:      #131a2a;
  --dim:     #5b6479;

  /* cards — five pastels the tiles rotate through (Sep 17 2026); a card's
   * title bar is a translucent grey laid over its pastel */
  --card-1: #dff3e8;   /* mint */
  --card-2: #dde9fb;   /* sky */
  --card-3: #ebe4f8;   /* lilac */
  --card-4: #fbe7d9;   /* peach */
  --card-5: #f8f1d3;   /* lemon */
  --card:   var(--card-1);
  --bar:    rgb(20 28 48 / .08);

  /* status */
  --ok:   #17784a;
  --warn: #a6641b;
  --bad:  var(--red);

  /* shape + type */
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:      0 1px 2px rgb(19 26 42 / .05);
  --shadow-lift: 0 6px 20px rgb(19 26 42 / .10);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue: #7aa2ff;
    --red:  #ff6f63;
    --accent-ink:   #0b1020;
    --accent-soft:  #1b2545;
    --accent-2-soft:#3a1d1c;
    --bg:      #0c1020;
    --panel:   #141a2c;
    --panel-2: #101627;
    --edge:    #26304b;
    --fg:      #dfe5f2;
    --dim:     #8f99b0;
    --card-1: #16302a;
    --card-2: #172742;
    --card-3: #262040;
    --card-4: #3a2a22;
    --card-5: #34301b;
    --bar:    rgb(0 0 0 / .26);
    --ok:      #4ec98a;
    --warn:    #e0a24c;
    --shadow:      0 1px 2px rgb(0 0 0 / .4);
    --shadow-lift: 0 8px 26px rgb(0 0 0 / .5);
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }
h1, h2, h3 { letter-spacing: -.015em }
code, .mono { font-family: var(--mono) }

/* ---------- chrome ---------- */
.brandbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px 20px;
  border-bottom: 1px solid var(--edge);
  background: var(--panel);
}
.brandbar .logo { height: 30px; display: block }
/* The wordmark ships in its ink colours; on the dark theme they need lifting
 * off the near-black the same way jatijm's green does. */
@media (prefers-color-scheme: dark) {
  .brandbar .logo, .foot img { filter: brightness(1.45) saturate(.92) }
}
.brandbar nav {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-left: auto; font-size: .92rem;
}
.brandbar nav a { color: var(--dim) }
.brandbar nav a:hover { color: var(--fg); text-decoration: none }
.brandbar nav a[aria-current="page"] { color: var(--fg); font-weight: 600 }

/* ---------- components ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* A tile is a card on a light pastel: the five --card-N in rotation by position
 * among its siblings, or named outright with t1–t5. Its first heading is the
 * TITLE BAR — centred, on a translucent grey that darkens the pastel a step,
 * bleeding to the card's edges. (Rob, Sep 17 2026.) */
.tile {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, var(--card));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.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: 1rem; margin: 0 0 8px }
.tile > h2:first-child, .tile > h3:first-child, .tile > .tile-head {
  margin: -16px -18px 12px; padding: 9px 18px;
  background: var(--bar); text-align: center;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tile > .tile-head h2, .tile > .tile-head h3 { margin: 0; text-align: center }
/* 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: .92rem }
.tile .chip { --chip-bg: color-mix(in srgb, var(--fg) 8%, var(--card)) }

.btn {
  display: inline-block; font: inherit; font-size: .92rem; font-weight: 600;
  padding: 9px 18px; border-radius: var(--radius-sm);
  border: 1px solid var(--edge); background: var(--panel); color: var(--fg);
  cursor: pointer;
}
.btn:hover { text-decoration: none; border-color: var(--accent) }
.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:disabled { opacity: .45; cursor: not-allowed }

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

.note {
  border: 1px solid var(--edge); border-left: 4px solid var(--accent);
  background: var(--panel); 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(--accent); font-weight: 600 }

/* ---------- bento ---------- */
/* Under 1024px this is an ordinary stacked column that scrolls the page. From
 * 1024px up the shell is pinned to the viewport and the ONLY things that
 * scroll are the tiles themselves — which is the whole point: the layout
 * stays put while you read one box.
 *
 * `min-height:0` on the grid and on every tile is load-bearing. A grid item
 * defaults to min-height:auto, so a tall tile pushes the row taller than its
 * track instead of scrolling inside it, and the page grows a scrollbar again.
 */
/* THE LOCK IS CONDITIONAL, and that is the whole reason for the :has(). A
 * shell that pinned itself to 100dvh unconditionally would CLIP every ordinary
 * long page sharing this layout — the editor, the help page — because their
 * overflow has nowhere to go once the body stops scrolling. So the shell only
 * locks when the page actually put a .bento inside it; everything else keeps
 * the ordinary centred, page-scrolling column. */
.bento-shell { display: flex; flex-direction: column; min-height: 100dvh }
.bento-shell > main { flex: 1; min-height: 0; padding: 16px 20px }
.bento-shell > main:not(:has(> .bento)) {
  width: 100%; max-width: 64rem; margin-inline: auto; padding: 28px 16px;
}

.bento { display: grid; gap: 14px }

/* The shell locks from TABLET PORTRAIT up (768px), not just on desktop — an
 * iPad held upright is one of the screens this layout is for. It gets the same
 * 12-column track so nothing has to be re-spanned, but every tile is remapped
 * to a half or a full width, which turns the desktop bento into a 2-across one
 * instead of squeezing three narrow columns onto an 820px page. */
@media (min-width: 768px) {
  .bento-shell:has(.bento) { height: 100dvh; overflow: hidden }
  .bento {
    height: 100%;
    min-height: 0;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }
  .bento > * { min-height: 0; overflow: auto; overscroll-behavior: contain }

  /* A scrolling tile with no scrollbar looks like a tile that is simply cut
   * off. The `local` gradient rides the content and covers the `scroll` one
   * when you reach the bottom, so the shadow means "there is more" and
   * nothing else. Top edge is left alone — .tile-head already covers it. */
  .bento > .tile {
    background:
      linear-gradient(transparent, var(--card) 70%) bottom / 100% 22px no-repeat local,
      radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .13), transparent) bottom / 100% 9px no-repeat scroll,
      var(--card);
  }
}

/* Tablet portrait: halves and full widths only. */
@media (min-width: 768px) and (max-width: 1023px) {
  .c3, .c4, .c5 { grid-column: span 6 }
  .c6, .c7, .c8, .c9, .c12 { grid-column: span 12 }
  .r2, .r3, .r4 { grid-row: span 1 }
}

@media (min-width: 1024px) {
  /* column spans */
  .c3 { grid-column: span 3 } .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 }
  /* row spans */
  .r2 { grid-row: span 2 } .r3 { grid-row: span 3 } .r4 { grid-row: span 4 }
}

/* A tile that scrolls needs its heading to stay put, or you lose your place.
 * Sticky, so it paints an opaque card colour under its grey. */
.tile > .tile-head {
  position: sticky; top: -16px; z-index: 1;
  background: linear-gradient(var(--bar), var(--bar)), var(--card);
}

.foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; color: var(--dim); font-size: .85rem;
  border-top: 1px solid var(--edge);
}
.foot img { height: 20px; opacity: .85 }