/* Realms of Elynia — hahmolakana, Training grounds ja julkinen profiili
   kolmelletoista attribuutille (doc 58 F4-05, doc 60 PR 7), referenssi v2.0
   (Scutum).

   SIIRRETTY LUKITUSTA REFERENSSISTÄ: Facelift/Character/REFERENCE.html v2.0
   (SHA-256 8a385156…dd273, lukittu 24.10.2026). Säännöt ovat referenssin
   .fl-cs-osion säännöt, jokainen .fl-cs-juuren alla (sopimus 7: mikään sääntö
   ei ulotu juuren ulkopuolelle). Tuotannon erot referenssiin:
   - referenssin kehyksen --gf-bottom on tässä --cs-bottom, pelin oikean
     alapalkin korkeus puhelimella. Sen mittaa views/attrSheet.js pelin omasta
     .nav-palkista (merkit ja safe area muuttavat sitä); alla oleva arvo on
     vain vara ennen ensimmäistä mittausta;
   - Equipment on pelin oma Aedicula-kortti (sopimus 3.13: sisältö ja rakenne
     kuten rakennettu). Säännöt lopussa vain sijoittavat sen ruudukkoon ja
     antavat sen jakaa ylimääräisen korkeuden osioilleen. Jalusta ja lompakko
     muuttuvat aedicula.js:ssä ja aedTreasuryssä omilla säännöillään
     (styles.css), eivät tämän juuren kautta;
   - Skills-rivit ovat linkkejä ammattisivulle kuten tänään, joten rivi on
     vähintään 44 px korkea (Brand 6.6);
   - referenssin merkinnät (.cs-note, .cs-rest, .cs-pane-note) ja Equipment-
     piirros (.cs-eq-*, .cs-slot, .cs-por, .cs-plinth, .cs-purse) jäävät pois.
   Muutos tähän tiedostoon on muutos lukittuun ulkoasuun: se tarvitsee uuden
   referenssiversion. Ladataan kuoren mukana (assetVersion.js
   SHELL_STYLESHEETS); seitsemällä attribuutilla mikään näkymä ei käytä
   .fl-cs-juurta, joten tiedosto ei muuta mitään. */
@font-face { font-family: 'Cinzel RoE'; src: url('/assets/fonts/cinzel.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Inter RoE'; src: url('/assets/fonts/inter-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@media (max-width: 899px) { .fl-cs { --cs-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* ═══ THE REFERENCE (.fl-cs) ══════════════════════════════════════════════ */
.fl-cs {
  --cs-night: #100c09; --cs-panel: rgba(18, 13, 9, .94); --cs-raise: #1b140e; --cs-well: rgba(6, 5, 4, .55);
  --cs-ivory: #eee2ca; --cs-text2: #cbbd9f; --cs-muted: #a8987b;
  --cs-gold: #c99744; --cs-gold-hi: #e5c278; --cs-gold-dim: #8c6a32;
  --cs-line: rgba(201, 151, 68, .32); --cs-line-soft: rgba(201, 151, 68, .16);
  --cs-laurel: #a8c77c; --cs-crimson: #e08a7c; --cs-note: #8fb6e0;
  --cs-r-rare: #6f93d8; --cs-r-epic: #a678d6; --cs-r-leg: #e39a45;
  color: var(--cs-ivory);
  font: 400 16px/1.45 'Inter RoE', 'Segoe UI', system-ui, sans-serif;
}
/* The reference's global helpers, scoped: a closed tile detail stays closed. */
.fl-cs [hidden] { display: none !important; }
.fl-cs .nw { white-space: nowrap; }
.fl-cs .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Resets carry no specificity (:where), so every component rule below wins. */
:where(.fl-cs) :where(h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.fl-cs) :where(ul, ol) { list-style: none; }
:where(.fl-cs) a { color: var(--cs-gold-hi); text-underline-offset: 3px; }
:where(.fl-cs) button { font: inherit; color: inherit; cursor: pointer; }
:where(.fl-cs) img { display: block; }
.fl-cs :focus-visible { outline: 2px solid var(--cs-gold-hi); outline-offset: 2px; }

.fl-cs.cs-root { container: cs / inline-size; width: 100%; }
.fl-cs .cs { display: grid; gap: 16px; padding: 16px 20px 28px; width: 100%; max-width: 1640px; margin-inline: auto; }
@container cs (width < 560px) { .fl-cs .cs { padding: 12px 16px 24px; gap: 12px; } }

.fl-cs .cs-card { position: relative; min-width: 0; padding: 16px 18px 18px; background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 4px; box-shadow: 0 16px 36px rgba(0, 0, 0, .4); }
@container cs (width < 560px) { .fl-cs .cs-card { padding: 14px 14px 16px; } }
.fl-cs .cs-h { font: 700 18px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .06em; color: var(--cs-gold-hi); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.fl-cs .cs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--cs-line); border-radius: 3px; background: rgba(201, 151, 68, .08); color: var(--cs-ivory); font: 600 15px/1.15 'Inter RoE', sans-serif; text-decoration: none; text-align: center; }
.fl-cs .cs-btn:hover { border-color: var(--cs-gold-hi); }
.fl-cs .cs-btn-primary { background: linear-gradient(180deg, #e9c983, #b8862f); border-color: #f0d08a; color: #1c1309; font-weight: 700; }
.fl-cs .cs-btn-quiet { background: transparent; color: var(--cs-text2); }
.fl-cs .cs-btn[disabled] { opacity: .5; cursor: not-allowed; }
.fl-cs .cs-btn[aria-busy="true"] { opacity: .8; cursor: progress; }
/* The tile stepper: every button is at least 44 by 44 and says what it moves. */
.fl-cs .cs-stepbtn { min-width: 44px; height: 44px; padding: 0 5px; border: 1px solid var(--cs-gold-dim); border-radius: 3px; background: linear-gradient(180deg, #33260f, #1d150c); color: var(--cs-gold-hi); font: 700 16px/1 'Inter RoE', sans-serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-stepbtn:hover:not([disabled]) { border-color: var(--cs-gold-hi); background: linear-gradient(180deg, #4a3716, #2a1e0f); }
.fl-cs .cs-stepbtn[disabled] { opacity: .38; cursor: not-allowed; }
.fl-cs .cs-stepbtn.is-minus { color: var(--cs-text2); }

/* ── Notices: route banner, obstacle, alert, warning (Brand 6.11) ─────── */
/* Release reset line (contract 3.6): one line under the Attributes head in
   place of the banner (owner, 25.10.2026). */
.fl-cs .cs-reset-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 4px 6px 4px 12px; border: 1px solid rgba(229, 194, 120, .35); border-left: 3px solid var(--cs-gold-hi); border-radius: 3px; background: rgba(120, 90, 30, .18); }
.fl-cs .cs-reset-line p { margin: 0; flex: 1 1 260px; min-width: 0; font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-reset-line b { font-weight: 700; color: var(--cs-gold-hi); }
.fl-cs .cs-reset-more { flex: none; padding: 0 12px; }
/* Obstacle: a server-stated reason the action cannot run (working, nothing to reset). */
.fl-cs .cs-block { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(238, 226, 202, .35); border-left: 3px solid var(--cs-gold); border-radius: 3px; background: var(--cs-well); font: 400 15px/1.4 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-block b { color: var(--cs-gold-hi); font-weight: 700; }
.fl-cs .cs-block img { display: inline-block; width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
/* Alert: something needs the player (failed, out of date). Never fades on its own. */
.fl-cs .cs-alert { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid rgba(224, 138, 124, .6); border-left: 3px solid var(--cs-crimson); border-radius: 3px; background: rgba(120, 40, 30, .22); font: 400 15px/1.4 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-alert b { color: #f2b2a6; font-weight: 700; }
.fl-cs .cs-alert.is-stale { border-color: rgba(229, 194, 120, .6); border-left-color: var(--cs-gold-hi); background: rgba(120, 90, 30, .22); }
.fl-cs .cs-alert.is-stale b { color: var(--cs-gold-hi); }
.fl-cs .cs-alert .cs-btn { justify-self: start; margin-top: 4px; }
.fl-cs .cs-ref { font: 400 12px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); font-variant-numeric: tabular-nums; }

/* ── Sheet layout (container cs) ─────────────────────────────────────────
   Below 560: one column. 560 to 960: Equipment beside Skills, the board and
   the Combat card full width under them. 960 to 1300: Equipment and Combat
   on the left, the board on the right, Skills under both. From 1300: Skills
   is a third column. Cards that share a row stretch to one height and hand the
   spare height to their own rows, so no column ends before the others. */
.fl-cs .cs-hero { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eq" "board" "cb" "skills"; align-items: start; }
.fl-cs .cs-hero > .cs-slot-eq { grid-area: eq; }
.fl-cs .cs-hero > .cs-board { grid-area: board; }
.fl-cs .cs-hero > .cs-combat { grid-area: cb; }
.fl-cs .cs-hero > .cs-skillcard { grid-area: skills; }
/* When the board is the tallest, its extra height is shared by the two cards
   beside it (auto rows), so neither Equipment nor Combat turns into a hollow card. */
@container cs (width >= 560px) {
  .fl-cs .cs-hero { grid-template-columns: minmax(300px, 1.1fr) minmax(0, 1fr); grid-template-areas: "eq skills" "board board" "cb cb"; align-items: stretch; }
}
@container cs (width >= 960px) { .fl-cs .cs-hero { grid-template-columns: clamp(320px, 31%, 360px) minmax(0, 1fr); grid-template-areas: "eq board" "cb board" "skills skills"; grid-template-rows: auto auto auto; } }
@container cs (width >= 1300px) { .fl-cs .cs-hero { grid-template-columns: 360px minmax(0, 1fr) 280px; grid-template-areas: "eq board skills" "cb board skills"; grid-template-rows: auto auto; } }
@container cs (width < 560px) { .fl-cs .cs-hero { gap: 12px; } }
/* "All numbers" makes the Combat card about 1 000 px taller. Stretching its row
   would hand that height to the board and to Skills as gaps between their rows
   (owner, V80 staging 24.10.2026), so while it is open every card keeps its own
   height (deviation all-numbers-no-stretch). Below 960 the Combat card has a row
   of its own, so nothing else stretches with it. */
@container cs (width >= 960px) { .fl-cs .cs-hero:has(#cb-more:not([hidden])) { align-items: start; } }

/* ── Combat card: the headline numbers beside the board ─────────────────── */
.fl-cs .cs-combat { container: cb / inline-size; display: flex; flex-direction: column; gap: 8px; }
.fl-cs .cs-combat-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; }
.fl-cs .cs-combat-h span { grid-column: 1 / -1; margin-top: -6px; font: 400 13px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-combat-h .cs-btn { padding: 0 12px; }
/* Six numbers in two columns (three when the card is wide); the rows share any
   spare height, so the last row sits on the card's bottom edge. */
.fl-cs .cs-stats { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; column-gap: 18px; }
@container cb (width >= 520px) { .fl-cs .cs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fl-cs .cs-stats > div { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 6px 0; border-bottom: 1px solid var(--cs-line-soft); }
.fl-cs .cs-stats dt { font: 400 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-stats dd { font: 600 17px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-stats dd em { font-style: normal; color: var(--cs-gold-hi); }
/* "All numbers": today's Combat tab content, its layout unchanged (sopimus 9).
   The pane reads its dark-surface colours from an .imm-card ancestor
   (styles.css); the Combat card is not one, so the same few rules apply here. */
.fl-cs .cs-combat-more { padding-top: 10px; border-top: 1px solid var(--cs-line-soft); }
.fl-cs .cs-combat-more .ctab { color: var(--night-text); opacity: .7; border-color: var(--night-line); }
.fl-cs .cs-combat-more .ctab:hover { opacity: 1; }
.fl-cs .cs-combat-more .ctab.active { color: var(--gold); opacity: 1; border-color: var(--gold); }
.fl-cs .cs-combat-more .cstat-label, .fl-cs .cs-combat-more .cstat-val, .fl-cs .cs-combat-more .at-cap, .fl-cs .cs-combat-more .at-floor { color: var(--night-text); }
.fl-cs .cs-combat-more .cstat-note { color: var(--night-text); opacity: .7; }
.fl-cs .cs-combat-more .cgroup-title { font-size: 11.5px; letter-spacing: .12em; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 162, 75, .22); }
.fl-cs .cs-combat-more .cstat-val { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 14px; }

/* ── The board (Scutum) ────────────────────────────────────────────────── */
.fl-cs .cs-board { container: board / inline-size; display: flex; flex-direction: column; padding: 0; }
.fl-cs .cs-board-in { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; }
@container cs (width < 560px) { .fl-cs .cs-board-in { padding: 14px 12px 16px; gap: 12px; } }
.fl-cs .cs-attr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.fl-cs .cs-attr-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.fl-cs .cs-sum { font: 500 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-sum b { color: var(--cs-ivory); font-weight: 700; }
.fl-cs .cs-nothing { flex: 1 1 100%; }

/* Spend box: one band across the board */
.fl-cs .cs-spend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; border: 1px solid rgba(229, 194, 120, .5); border-radius: 3px; background: linear-gradient(180deg, rgba(201, 151, 68, .16), rgba(201, 151, 68, .04)); }
.fl-cs .cs-spend-pts { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.fl-cs .cs-spend-pts b { font: 700 34px/1 'Cinzel RoE', Georgia, serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; }
.fl-cs .cs-spend-pts > span { font: 600 16px/1.2 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-spend-of { font: 500 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; }
.fl-cs .cs-spend-how { font: 400 14px/1.4 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-spend .cs-spend-how { flex: 1 1 220px; }
.fl-cs .cs-step-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fl-cs .cs-step-row > span { font: 500 14px/1.2 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-step { display: inline-flex; border: 1px solid var(--cs-line); border-radius: 3px; overflow: hidden; background: var(--cs-well); }
.fl-cs .cs-step button { min-width: 50px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--cs-text2); font: 700 16px/1 'Cinzel RoE', Georgia, serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-step button + button { border-left: 1px solid var(--cs-line); }
.fl-cs .cs-step button[aria-pressed="true"] { background: linear-gradient(180deg, #5a4420, #33260f); color: var(--cs-gold-hi); box-shadow: inset 0 -2px 0 var(--cs-gold); }
.fl-cs .cs-step button[disabled] { opacity: .5; cursor: not-allowed; }
.fl-cs .cs-status { font: 500 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-laurel); }

/* Panels: a face with its two groups beside it. Offense holds Power and
   Precision, Defense and support holds Resilience and Support (answer 2). */
.fl-cs .cs-panel { display: grid; gap: 8px; }
.fl-cs .cs-panel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-bottom: 5px; border-bottom: 1px solid var(--cs-line); }
.fl-cs .cs-panel-h h3 { font: 700 18px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cs-gold-hi); }
.fl-cs .cs-panel-h span { font: 400 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-panel-body { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "face" "c1" "c2"; }
/* 520 to 600: the face above, its two groups side by side under it. From 600
   the face sits between them and gives way to the tiles (34 % of the board,
   180 to 232 px), so a tile is never too narrow for its name. */
@container board (width >= 520px) { .fl-cs .cs-panel-body { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "face face" "c1 c2"; align-items: start; } }
@container board (width >= 600px) { .fl-cs .cs-panel-body { grid-template-columns: minmax(0, 1fr) clamp(180px, 34cqi, 232px) minmax(0, 1fr); grid-template-areas: "c1 face c2"; } }
.fl-cs .cs-panel-c1 { grid-area: c1; min-width: 0; }
.fl-cs .cs-panel-c2 { grid-area: c2; min-width: 0; }
.fl-cs .cs-panel-face { grid-area: face; display: grid; justify-items: center; align-self: center; min-width: 0; }
.fl-cs .cs-panel-face .cs-face { width: 100%; max-width: 232px; }
.fl-cs .cs-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fl-cs .cs-colh h4 { font: 700 13px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-colh p { margin-top: 2px; font: 400 14px/1.25 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-tiles { display: grid; gap: 8px; }

/* Tile: medallion, name, trained value with plan and gear, plus on the right.
   While planned, minus takes the medallion's place on the left, so the plus
   never moves and the tile keeps its height. */
.fl-cs .cs-tile { container: tile / inline-size; position: relative; border: 1px solid #4e3f28; border-radius: 4px; background: linear-gradient(180deg, #261c11, #1b140d); transition: border-color .12s ease; }
.fl-cs .cs-tile.has-plan { border-color: rgba(255, 243, 208, .55); }
.fl-cs .cs-tile.is-hot { border-color: rgba(229, 194, 120, .75); }
.fl-cs .cs-tile.is-sel { border-color: var(--cs-gold-hi); box-shadow: 0 0 0 1px rgba(229, 194, 120, .35); }
.fl-cs .cs-tile-in { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "code main plus" "price price price"; gap: 2px 8px; align-items: center; padding: 9px 10px 7px; }
.fl-cs .cs-code { grid-area: code; justify-self: center; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 700 12px/1 'Inter RoE', sans-serif; letter-spacing: .04em; color: var(--cs-gold-hi);
  background: radial-gradient(circle, #1d150c 58%, transparent 60%), conic-gradient(var(--cs-gold) calc(var(--p, 0) * 1%), rgba(238, 226, 202, .12) 0); }
.fl-cs .cs-tile-minus { grid-area: code; align-self: center; }
.fl-cs .cs-tile-plus { grid-area: plus; align-self: center; }
/* Name and value are one button (at least 44 px tall) that selects the tile. */
.fl-cs .cs-tile-main { grid-area: main; display: grid; gap: 2px; align-content: center; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.fl-cs .cs-tile-name { min-width: 0; font: 600 16px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-tile-main:hover .cs-tile-name { text-decoration: underline; text-decoration-color: var(--cs-gold); text-underline-offset: 4px; }
.fl-cs .cs-tile-val { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-cs .cs-num { font: 700 22px/1 'Cinzel RoE', Georgia, serif; color: var(--cs-ivory); }
.fl-cs .cs-plan { font: 700 15px/1 'Inter RoE', sans-serif; color: var(--cs-gold-hi); }
.fl-cs .cs-plan::before { content: "\2192\00a0"; }
.fl-cs .cs-gear { font: 600 14px/1 'Inter RoE', sans-serif; color: var(--cs-laurel); }
.fl-cs .cs-tile-price { grid-area: price; margin-top: 4px; font: 500 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-tile-price b { color: var(--cs-ivory); font-weight: 600; }
.fl-cs .cs-tile-price.is-short b { color: var(--cs-crimson); }
.fl-cs .cs-tile-price.is-plan { color: var(--cs-gold-hi); font-weight: 600; }
.fl-cs .cs-ribbon { position: absolute; z-index: 1; top: -10px; right: 60px; display: flex; gap: 4px; }
.fl-cs .cs-tag { padding: 1px 7px; border: 1px solid rgba(229, 194, 120, .55); border-radius: 999px; background: #3a2b14; color: var(--cs-gold-hi); font: 600 12px/1.2 'Inter RoE', sans-serif; white-space: nowrap; }
.fl-cs .cs-tag.is-cap { background: #1b140d; border-color: rgba(238, 226, 202, .5); color: var(--cs-ivory); }
.fl-cs .cs-bar { display: flex; height: 4px; margin: 0 10px 8px; background: rgba(238, 226, 202, .1); overflow: hidden; }
.fl-cs .cs-bar i { display: block; height: 100%; }
.fl-cs .cs-bar .b-tr { background: #a97e34; }
.fl-cs .cs-bar .b-plan { background: repeating-linear-gradient(135deg, #fff3d0 0 3px, #c99744 3px 6px); }
.fl-cs .cs-bar .b-gear { background: var(--cs-laurel); }
.fl-cs .cs-tile.is-max .cs-bar .b-tr { background: linear-gradient(90deg, #b8862f, #f0d08a); }
.fl-cs .cs-tile-det { margin: 0 8px 8px; padding: 8px 10px 10px; border-top: 1px solid var(--cs-line-soft); background: var(--cs-well); }
/* Narrow tile: no medallion (the code is on the face); minus goes under plus,
   so the plus still keeps its place. */
@container tile (width < 210px) {
  .fl-cs .cs-tile-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main plus" "price price"; row-gap: 4px; }
  .fl-cs .cs-tile.has-plan .cs-tile-in { grid-template-areas: "main plus" "main minus" "price price"; }
  .fl-cs .cs-tile-in > .cs-code { display: none; }
  .fl-cs .cs-tile-plus { align-self: start; }
  .fl-cs .cs-tile-main { align-self: start; }
  .fl-cs .cs-tile-minus { grid-area: minus; }
}

/* Description band: the selected attribute, between the two panels. Every
   attribute's text is drawn in the same cell and only the selected one is
   visible, so the band is always as tall as the longest text and choosing
   another attribute moves nothing on the board (owner, V80 staging 24.10.2026:
   "tekstit liikkuvat ikävästi"). On a phone the same text opens under the
   tapped tile instead. */
.fl-cs .cs-board-in > .cs-band { flex: none; }
.fl-cs .cs-band-pane { grid-area: 1 / 1; align-self: start; display: grid; align-content: start; gap: 8px; min-width: 0; visibility: hidden; }
.fl-cs .cs-band-pane.is-on { visibility: visible; }
.fl-cs .cs-tile-det > * + * { margin-top: 8px; }
.fl-cs .cs-band { display: grid; min-height: 120px; padding: 12px 16px 12px 14px; border: 1px solid var(--cs-line-soft); border-left: 3px solid var(--cs-gold); border-radius: 3px; background: var(--cs-well); }
/* Head: the same code medallion as the tile, the name and its group, so the
   selected attribute reads at a glance (owner, 25.10.2026). The opened tile on a
   phone carries its own name, so it shows the text without the head. */
.fl-cs .cs-band-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fl-cs .cs-band-code { flex: none; width: 40px; height: 40px; font-size: 13px; }
.fl-cs .cs-band-title { display: grid; gap: 2px; min-width: 0; }
.fl-cs .cs-band-name { margin: 0; font: 700 19px/1.15 'Cinzel RoE', Georgia, serif; letter-spacing: .05em; color: var(--cs-gold-hi); }
.fl-cs .cs-band-grp { margin: 0; font: 600 12px/1.3 'Inter RoE', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.fl-cs .cs-tile-det .cs-band-head { display: none; }
.fl-cs .cs-band-desc { margin: 0; font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-ivory); }
/* The numbers in labelled columns: Now, Plan, Trained, Gear. */
.fl-cs .cs-band-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 20px; margin: 0; padding: 8px 0; border-block: 1px solid var(--cs-line-soft); font-variant-numeric: tabular-nums; }
.fl-cs .cs-band-facts > div { display: grid; align-content: start; gap: 2px; min-width: 0; }
.fl-cs .cs-band-facts dt { font: 600 12px/1.3 'Inter RoE', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.fl-cs .cs-band-facts dd { margin: 0; font: 400 14px/1.4 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-band-facts dd b { font-weight: 600; color: var(--cs-ivory); }
.fl-cs .cs-band-facts dd small { display: block; font-size: 13px; color: var(--cs-muted); }
.fl-cs .cs-band-facts .is-now dd b { color: var(--cs-gold-hi); }
.fl-cs .cs-band-facts .is-plan dd, .fl-cs .cs-band-facts .is-plan dd b { color: var(--cs-gold-hi); }
.fl-cs .cs-band-facts .is-gear dd, .fl-cs .cs-band-facts .is-gear dd b, .fl-cs .cs-band-facts .is-gear dd small { color: var(--cs-laurel); }
.fl-cs .cs-band-more, .fl-cs .cs-band-cap { margin: 0; font: 400 14px/1.45 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-band-fx { font-weight: 600; color: var(--cs-gold-hi); }
.fl-cs .cs-band-cap { color: var(--cs-gold); }
.fl-cs .cs-band-ladder-h { color: var(--cs-muted); }
.fl-cs .cs-ladder { display: flex; flex-wrap: wrap; gap: 4px 6px; font: 500 14px/1.35 'Inter RoE', sans-serif; font-variant-numeric: tabular-nums; }
.fl-cs .cs-ladder li { padding: 1px 6px; border: 1px solid var(--cs-line-soft); border-radius: 2px; color: var(--cs-ivory); }
@container board (width < 520px) { .fl-cs .cs-board-in > .cs-band { display: none; } }
/* Where the band shows, the tile does not open as well: one copy of the text,
   and the tiles below it stay where they are (deviation band-is-the-only-detail). */
@container board (width >= 520px) { .fl-cs .cs-tile-det { display: none; } }

/* Shield face, read only. The stage keeps a gutter for the codes; the plot is
   the square the drawing and the code positions share, so they cannot drift
   apart at any width. */
.fl-cs .cs-face { display: grid; gap: 2px; justify-items: center; align-content: start; min-width: 0; width: 100%; }
.fl-cs .cs-face-stage { width: 100%; padding: 19px 34px; }
.fl-cs .cs-face-plot { position: relative; width: 100%; aspect-ratio: 1; }
.fl-cs .cs-face-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fl-cs .cs-face-plot .ax-sel { stroke: var(--cs-gold-hi); stroke-width: 1.6; }
.fl-cs .cs-face-lbl { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); font: 700 12px/1 'Inter RoE', sans-serif; letter-spacing: .05em; color: var(--cs-text2); white-space: nowrap; }
.fl-cs .cs-face-lbl.a-t { transform: translate(-50%, calc(-100% - 5px)); }
.fl-cs .cs-face-lbl.a-b { transform: translate(-50%, 5px); }
.fl-cs .cs-face-lbl.a-r { transform: translate(5px, -50%); }
.fl-cs .cs-face-lbl.a-l { transform: translate(calc(-100% - 5px), -50%); }
.fl-cs .cs-face-lbl.is-hot { color: var(--cs-gold-hi); }
.fl-cs .cs-face-lbl.is-sel { padding: 2px 4px; border-radius: 2px; background: var(--cs-gold-hi); color: #1c1309; }
.fl-cs .cs-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font: 400 12px/1.4 'Inter RoE', sans-serif; color: var(--cs-muted); }
.fl-cs .cs-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fl-cs .cs-legend i { display: inline-block; width: 16px; height: 9px; border-radius: 2px; }
.fl-cs .cs-legend .l-tr { background: rgba(169, 126, 52, .55); border: 1px solid #b08a3c; }
.fl-cs .cs-legend .l-gear { height: 0; border-top: 2px solid var(--cs-gold-hi); border-radius: 0; }
.fl-cs .cs-legend .l-plan { height: 0; border-top: 2px dashed #fff3d0; border-radius: 0; }
.fl-cs .cs-legend .l-cap { border: 1.5px solid rgba(238, 226, 202, .45); }

/* Confirm bar: the one primary action of the board. It sticks to the bottom of
   the visible part of the card, above the phone's bottom navigation. */
.fl-cs .cs-confirm { position: sticky; bottom: var(--cs-bottom, 0px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 18px; border-top: 1px solid rgba(229, 194, 120, .5); border-radius: 0 0 4px 4px; background: #1a130b; box-shadow: 0 -10px 24px rgba(0, 0, 0, .45); }
.fl-cs .cs-confirm > .cs-alert { flex: 1 1 100%; }
.fl-cs .cs-confirm-txt { flex: 1 1 300px; min-width: 0; display: grid; gap: 2px; }
.fl-cs .cs-confirm-txt b { font: 700 16px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-confirm-txt span, .fl-cs .cs-plan-sum p { font: 400 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-confirm-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Phone: the stuck bar keeps only the count, the price and the two buttons, so
   it never covers more than a quarter of a 320 by 568 screen. The list of
   changes and the full message sit in the plan summary just above the bar's
   resting place; the bar carries the message's first line. */
.fl-cs .cs-plan-sum, .fl-cs .cs-alert-short { display: none; }
@container cs (width < 560px) {
  .fl-cs .cs-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "alert alert" "txt clear" "go go"; gap: 8px 10px; padding: 10px 14px; }
  .fl-cs .cs-confirm > .cs-alert, .fl-cs .cs-confirm-txt > span { display: none; }
  .fl-cs .cs-alert-short { display: block; grid-area: alert; margin: 0; padding: 6px 10px; border-left: 3px solid var(--cs-crimson); background: rgba(120, 40, 30, .3); font: 600 14px/1.3 'Inter RoE', sans-serif; color: #f2b2a6; }
  .fl-cs .cs-alert-short.is-stale { border-left-color: var(--cs-gold-hi); background: rgba(120, 90, 30, .3); color: var(--cs-gold-hi); }
  .fl-cs .cs-confirm-txt { grid-area: txt; align-self: center; }
  .fl-cs .cs-head-sum { display: block; color: var(--cs-gold-hi); }
  .fl-cs .cs-dot { display: none; }
  .fl-cs .cs-confirm-acts { display: contents; }
  .fl-cs .cs-confirm [data-clear] { grid-area: clear; padding: 0 12px; }
  .fl-cs .cs-confirm [data-primary-action] { grid-area: go; width: 100%; }
  .fl-cs .cs-plan-sum { display: grid; gap: 8px; margin: 0 14px 14px; padding: 10px 12px; border: 1px solid var(--cs-line); border-radius: 3px; background: var(--cs-well); }
  .fl-cs .cs-plan-sum .cs-sub { margin-bottom: -4px; }
}

/* ── Skills: three groups ──────────────────────────────────────────────── */
.fl-cs .cs-skillcard { container: skills / inline-size; display: flex; flex-direction: column; gap: 12px; }
.fl-cs .cs-sk-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.fl-cs .cs-sk-h span, .fl-cs .cs-sk-gh span { font: 500 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); font-variant-numeric: tabular-nums; }
.fl-cs .cs-sk-h b, .fl-cs .cs-sk-gh b { color: var(--cs-ivory); }
/* A column of groups when the card is narrow or stretched beside another card:
   the rows share the spare height (--n = the group's rows), so the last skill
   sits on the card's bottom edge. Three groups side by side when it is wide. */
.fl-cs .cs-sk-groups { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
@container skills (width >= 700px) { .fl-cs .cs-sk-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; align-items: start; } }
.fl-cs .cs-sk-g { container: skg / inline-size; flex: var(--n) 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-cs .cs-sk-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 5px; border-bottom: 1px solid var(--cs-line-soft); }
.fl-cs .cs-sk-gh h3 { font: 700 13px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-sk-list { flex: 1 1 auto; display: grid; grid-auto-rows: 1fr; gap: 4px 12px; }
@container skg (width >= 420px) { .fl-cs .cs-sk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fl-cs .cs-sk-list > li { display: grid; }
/* A skill opens its profession, as today's card did: the row is the link. */
.fl-cs .cs-sk-i { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "ic nm lv" "ic bar bar"; gap: 1px 8px; align-items: center; min-height: 44px; padding: 5px 0; color: inherit; text-decoration: none; }
.fl-cs .cs-sk-i img { grid-area: ic; width: 28px; height: 28px; }
.fl-cs .cs-sk-n { grid-area: nm; min-width: 0; font: 600 14px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-sk-i:hover .cs-sk-n { text-decoration: underline; text-decoration-color: var(--cs-gold); text-underline-offset: 3px; }
.fl-cs .cs-sk-l { grid-area: lv; font: 500 13px/1.25 'Inter RoE', sans-serif; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.fl-cs .cs-sk-l b { color: var(--cs-gold-hi); font-weight: 700; }
.fl-cs .cs-sk-bar { grid-area: bar; display: block; height: 3px; background: rgba(238, 226, 202, .1); }
.fl-cs .cs-sk-bar i { display: block; height: 100%; background: #a97e34; }

/* ── Training grounds (decision 9) ─────────────────────────────────────── */
.fl-cs .cs-route { position: relative; display: grid; align-content: end; gap: 6px; min-height: 150px; padding: 18px 20px; border: 1px solid var(--cs-line); border-radius: 4px; overflow: hidden; background: #1a130b; }
.fl-cs .cs-route > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.fl-cs .cs-route::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 7, 5, .92) 0%, rgba(10, 7, 5, .72) 55%, rgba(10, 7, 5, .35) 100%); }
.fl-cs .cs-route > * { position: relative; z-index: 1; }
.fl-cs .cs-route h1 { margin: 0; font: 700 28px/1.1 'Cinzel RoE', Georgia, serif; letter-spacing: .05em; color: var(--cs-gold-hi); }
.fl-cs .cs-route p { margin: 0; max-width: 60ch; color: var(--cs-ivory); }
.fl-cs .cs-wallet { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 4px; padding: 6px 12px; border: 1px solid var(--cs-line); border-radius: 999px; background: rgba(6, 5, 4, .7); font: 600 15px/1.2 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; }
.fl-cs .cs-wallet img { width: 20px; height: 20px; }
.fl-cs .cs-wallet b { font-weight: 700; color: var(--cs-gold-hi); }
@container cs (width < 560px) { .fl-cs .cs-route { min-height: 120px; padding: 14px; } .fl-cs .cs-route h1 { font-size: 23px; } .fl-cs .cs-route::after { background: rgba(10, 7, 5, .78); } }
.fl-cs .cs-tg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@container cs (width >= 900px) { .fl-cs .cs-tg { grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); } }
.fl-cs .cs-tg > .cs-board { order: 1; }
.fl-cs .cs-receipt { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid rgba(168, 199, 124, .5); border-left: 3px solid var(--cs-laurel); border-radius: 3px; background: rgba(120, 150, 80, .1); }
.fl-cs .cs-receipt h3 { font: 700 17px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .04em; color: var(--cs-laurel); }
.fl-cs .cs-receipt-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }

/* ═══ Layers above the page: respec review (Brand 6.5 to 6.7) ═════════════ */
.fl-cs.cs-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 3, .72); overflow: auto; }
.fl-cs .cs-dialog { width: 100%; max-width: 520px; display: grid; gap: 14px; padding: 20px 20px 18px; background: #16100a; border: 1px solid rgba(229, 194, 120, .55); border-radius: 4px; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
.fl-cs .cs-dialog h2 { font: 700 22px/1.2 'Cinzel RoE', Georgia, serif; letter-spacing: .03em; color: var(--cs-gold-hi); }
.fl-cs .cs-dialog p { color: var(--cs-ivory); }
.fl-cs .cs-dl { display: grid; border: 1px solid var(--cs-line); border-radius: 3px; background: var(--cs-well); }
.fl-cs .cs-dl > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 9px 12px; }
.fl-cs .cs-dl > div + div { border-top: 1px solid var(--cs-line-soft); }
.fl-cs .cs-dl dt { font: 500 15px/1.3 'Inter RoE', sans-serif; color: var(--cs-text2); }
.fl-cs .cs-dl dd { display: inline-flex; align-items: center; gap: 6px; font: 700 17px/1.2 'Inter RoE', sans-serif; color: var(--cs-ivory); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-cs .cs-dl dd img { width: 20px; height: 20px; }
.fl-cs .cs-dl dd.cs-dl-note { flex: 1 1 100%; display: block; font: 400 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-muted); white-space: normal; }
.fl-cs .cs-dl dd.cs-dl-list { font-size: 15px; font-weight: 600; display: block; flex: 1 1 auto; min-width: 0; white-space: normal; text-align: right; }
.fl-cs .cs-dl dd .arr { color: var(--cs-muted); font-weight: 500; }
.fl-cs .cs-sub { font: 600 12px/1.2 'Inter RoE', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--cs-gold); }
.fl-cs .cs-pay { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.fl-cs .cs-pay legend { padding: 0; margin-bottom: 8px; }
.fl-cs .cs-pay label { display: grid; grid-template-columns: 22px 22px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--cs-line); border-radius: 3px; background: var(--cs-well); cursor: pointer; }
.fl-cs .cs-pay label:has(input:checked) { border-color: var(--cs-gold-hi); background: rgba(201, 151, 68, .14); }
.fl-cs .cs-pay label.is-off { cursor: not-allowed; border-style: dashed; }
.fl-cs .cs-pay label.is-off .p-name, .fl-cs .cs-pay label.is-off .p-price { opacity: .6; }
.fl-cs .cs-pay input { width: 20px; height: 20px; margin: 0; accent-color: #e5c278; }
.fl-cs .cs-pay img { width: 22px; height: 22px; }
.fl-cs .cs-pay .p-name { font: 600 16px/1.25 'Inter RoE', sans-serif; color: var(--cs-ivory); }
.fl-cs .cs-pay .p-have { display: block; font: 400 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-muted); font-variant-numeric: tabular-nums; }
.fl-cs .cs-pay .p-miss { display: block; font: 600 14px/1.3 'Inter RoE', sans-serif; color: var(--cs-crimson); font-variant-numeric: tabular-nums; }
.fl-cs .cs-pay .p-price { font: 700 18px/1.2 'Inter RoE', sans-serif; color: var(--cs-gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The two buttons stay in reach when the review is taller than a small phone.
   bottom = minus the layer's padding, so the stuck bar is flush with the screen
   edge and nothing of the scrolling body shows underneath it. */
.fl-cs .cs-dialog-acts { position: sticky; bottom: -16px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin: 0 -20px -18px; padding: 10px 20px 18px; background: #16100a; border-top: 1px solid var(--cs-line-soft); border-radius: 0 0 4px 4px; }
.fl-cs .cs-dialog-acts .cs-why { flex: 1 1 100%; font: 400 14px/1.35 'Inter RoE', sans-serif; color: var(--cs-text2); text-align: right; }
.fl-cs .cs-free { padding: 10px 12px; border: 1px solid rgba(168, 199, 124, .45); border-radius: 3px; background: rgba(120, 150, 80, .12); color: var(--cs-ivory); }
.fl-cs .cs-free b { color: var(--cs-laurel); }
@media (max-width: 480px) { .fl-cs .cs-dialog { padding: 16px 14px 14px; } .fl-cs .cs-dialog-acts { margin: 0 -14px -14px; padding: 10px 14px 14px; } .fl-cs .cs-dialog-acts .cs-btn { flex: 1 1 0; } .fl-cs .cs-dialog-acts .cs-btn-primary { flex: 1 1 100%; } .fl-cs .cs-dialog-acts .cs-why { text-align: left; } .fl-cs .cs-pay label { grid-template-columns: 22px 22px minmax(0, 1fr); } .fl-cs .cs-pay .p-price { grid-column: 3; } }

@media (prefers-reduced-motion: no-preference) {
  .fl-cs .cs-stepbtn, .fl-cs .cs-btn { transition: border-color .12s ease, background-color .12s ease; }
}
@media (prefers-reduced-motion: reduce) { .fl-cs .cs-tile { transition: none; } }

/* ═══ Tuotannon paikat referenssin piirroksille ══════════════════════════════
   Referenssi piirtää Equipment-kortin kuvituksena ("Plinth and wallet changed;
   the rest as today"). Tuotannossa paikalla on pelin oma Aedicula-kortti
   sellaisenaan (sopimus 3.13): nämä säännöt sijoittavat sen ruudukkoon, venyttävät
   sen rivin korkuiseksi ja antavat lisäkorkeuden sen osioiden väliin, jotta
   sarakkeet päättyvät samaan kohtaan (sopimus 3.1). */
.fl-cs .cs-hero > .cs-slot-eq { min-width: 0; display: flex; flex-direction: column; }
.fl-cs .cs-slot-eq > .aed-card { container: aed / inline-size; flex: 1 1 auto; display: flex; flex-direction: column; overflow: visible; }
.fl-cs .cs-slot-eq .aed-figure { flex: 1 1 auto; justify-content: space-between; border-radius: 9px; }
/* Aediculan oma porrastus on ikkunan leveydestä (styles.css: alle 640 ja
   1200–1519 px), koska se tehtiin seitsemän attribuutin kolmisarakkeiselle
   riville. Kolmentoista ruudukossa sarakkeen leveys ei seuraa ikkunaa
   (360 px leveällä, 300–360 px kapealla työpöydällä), joten kortti porrastaa
   oman leveytensä mukaan: sokettisarakkeet syvennyksen molemmin puolin kun
   kortti on vähintään 300 px, pylväät vasta 460 px:stä, ja kapeammalla
   syvennys ylös ja soketit sen alle kuten puhelimella tänään. */
@container aed (width < 300px) {
  .fl-cs .aed-body { grid-template-columns: 1fr 1fr; grid-template-areas: 'hero hero' 'left right'; }
  .fl-cs .aed-center { grid-area: hero; }
  .fl-cs .aed-col:first-child { grid-area: left; justify-self: end; }
  .fl-cs .aed-col:last-child { grid-area: right; justify-self: start; }
  .fl-cs .aed-pillar { display: none; }
}
@container aed (width >= 300px) {
  .fl-cs .aed-body { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: none; gap: 8px; padding: 16px 12px 6px; align-items: center; }
  .fl-cs .aed-body > * { grid-area: auto; justify-self: center; }
  .fl-cs .aed-pillar { display: none; }
}
@container aed (width >= 460px) {
  .fl-cs .aed-body { grid-template-columns: auto 12px minmax(0, 1fr) 12px auto; padding: 18px 14px 6px; }
  .fl-cs .aed-pillar { display: block; justify-self: stretch; }
}
/* Cursus Honorum -palsta pysyy nykyisellään (sopimus 3.11): paikka referenssin
   .cs-cursus-sarakkeessa, sisältö pelin omat .cursus-säännöt. */
.fl-cs .cs-tg > .cs-cursus-slot { order: 2; min-width: 0; display: grid; gap: 8px; background: var(--cs-panel); border: 1px solid var(--cs-line); border-radius: 4px; padding: 8px; }
@container cs (width < 900px) { .fl-cs .cs-tg > .cs-cursus-slot { order: 0; } }