/* ==========================================================================
   editorial.css — Editorial appearance layer (Task 3).

   Every rule here is scoped under ``html.tt-appearance-editorial`` so it only
   takes effect when the visitor picks the Editorial appearance. The Legacy
   appearance keeps using ``app.css`` unchanged in look and geometry.

   This layer defines:
     • the Editorial font stack (self-hosted fonts already declared in app.css)
       and a tighter corner-radius scale;
     • the Editorial Light and Dark token sets (canvas / pane / ink / accent /
       win …) that override the Legacy ``:root`` palette.

   It deliberately does NOT redeclare Legacy rules, restyle the marketing /
   Vereinsheft pages, or reintroduce decorative effects (no transforms, no
   SVG filters).
   ========================================================================== */

/* ---- Editorial base: type + radius (shared by both color modes) ---- */
html.tt-appearance-editorial {
	--font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
	--font-ui: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-data: "IBM Plex Mono", ui-monospace, monospace;
	--r8: 4px;
	--r12: 6px;
}

/* ---- Editorial Light token set ---- */
html.tt-appearance-editorial.tt-color-light {
	--canvas: #faf3e3;
	--pane: #fffdf7;
	--pane-2: #f3ead2;
	--border: #d9cba6;
	--border-strong: #a99c7c;
	--ink: #2e2519;
	--muted: #5c4f3c;
	--faint: #7b6e58;
	--accent: #c2410c;
	--accent-soft: #fff0dd;
	--accent-ink: #9a3412;
	--win: #1d6b45;
	--win-soft: #e5f1e9;
	--win-ink: #14502f;
}

/* ---- Editorial Dark token set ----
   The public Live canvas stays near-black while panels carry a restrained
   green tint. Contrast pairs verified in tests/test_contrast.py (≥ 4.5:1 for
   text, ≥ 3:1 for the accent focus ring). Every value below is the tested
   value — none had to be relaxed from the spec. */
html.tt-appearance-editorial.tt-color-dark {
	--canvas: #151a16;
	--pane: #1c241e;
	--pane-2: #212b23;
	--border: #3d4a40;
	--border-strong: #5d6a60;
	--ink: #f7f0df;
	--muted: #c6baa2;
	--faint: #9b917d;
	--accent: #f26b1d;
	--accent-soft: #3d2415;
	--accent-ink: #ffb17a;
	--win: #4fb37b;
	--win-soft: #173625;
	--win-ink: #86d6a7;
}

/* ---- Editorial theme-menu typography (Step 5) ----
   The structural menu rules live in app.css and already theme through the
   surface tokens. Editorial only swaps the typeface to the UI font so the
   picker matches the rest of the Editorial chrome. */
html.tt-appearance-editorial .theme-menu,
html.tt-appearance-editorial .theme-choice,
html.tt-appearance-editorial .theme-menu legend {
	font-family: var(--font-ui);
}

/* ==========================================================================
   Task 4 — authenticated shell & core workflow treatment.

   All rules stay scoped under ``html.tt-appearance-editorial`` and only touch
   branding, typography, colour roles, separators and depth. Geometry (display,
   grid tracks, fixed nav dimensions, breakpoints, content max widths) and the
   semantic class meanings are inherited unchanged from app.css.

   Colour roles follow the Editorial design spec:
     • green  = active destination, current tournament context, progress, success
     • orange = primary actions and focused emphasis
     • red    = destructive (unchanged danger semantics)

   The matrix/`.matrix-card` rules are nested under ``.shell`` so the public
   Live dashboard matrix (``body.live-page``) keeps its own treatment.
   ========================================================================== */

/* Restrained, warm panel shadows (override the Legacy --shadow token) */
html.tt-appearance-editorial.tt-color-light {
	--shadow: 0 1px 2px rgba(46, 37, 25, 0.06), 0 1px 3px rgba(46, 37, 25, 0.04);
}
html.tt-appearance-editorial.tt-color-dark {
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Interface typography: Karla is the default body/UI face; buttons, inputs
   and labels inherit it. */
html.tt-appearance-editorial body,
html.tt-appearance-editorial button,
html.tt-appearance-editorial input,
html.tt-appearance-editorial select,
html.tt-appearance-editorial textarea {
	font-family: var(--font-ui);
}

/* Zilla Slab is reserved for page titles, section titles and card headings. */
html.tt-appearance-editorial .topbar h1 {
	font-family: var(--font-display);
	letter-spacing: 0;
}
html.tt-appearance-editorial .matrix-head h2,
html.tt-appearance-editorial .modal-title {
	font-family: var(--font-display);
}

/* ---- Shell ---- warm canvas fills the app viewport behind the rail/columns. */
html.tt-appearance-editorial .shell {
	background: var(--canvas);
}

/* ---- Desktop rail ---- warm pane, firmer border, UI label type. */
html.tt-appearance-editorial .apprail {
	background: var(--pane);
	border-right-color: var(--border);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .apprail-btn .rl {
	font-variant-numeric: tabular-nums;
}
/* Green active destination (green = active location, per Editorial spec). */
html.tt-appearance-editorial .apprail-btn.active {
	background: var(--win-soft);
	color: var(--win-ink);
}
html.tt-appearance-editorial .apprail-btn.active::before {
	background: var(--win);
}

/* ---- Context strip ---- warm pane, mono metadata, green progress. */
html.tt-appearance-editorial .strip {
	background: var(--pane);
	border-bottom-color: var(--border);
}
html.tt-appearance-editorial .ctx-meta {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
html.tt-appearance-editorial .strip-progress {
	background: var(--win);
}

/* ---- Mobile tab bar + bottom sheet ---- */
html.tt-appearance-editorial .tabbar {
	background: var(--pane);
	border-top-color: var(--border);
}
html.tt-appearance-editorial .tabbar-btn.active {
	color: var(--win-ink);
}
html.tt-appearance-editorial .menu-sheet .sheet {
	background: var(--pane);
	border-top-color: var(--border);
	border-radius: 8px 8px 0 0;
}

/* ---- Command palette ---- warm panel, restrained depth. */
html.tt-appearance-editorial .cmdk .panel {
	background: var(--pane);
	border-color: var(--border);
	box-shadow: var(--shadow);
}
html.tt-appearance-editorial .cmdk input {
	font-family: var(--font-ui);
}

/* ---- Buttons ---- primary action keeps the accessible burnt-orange committed
   in app.css (verified in test_contrast.py); Editorial only assigns UI type
   and the firmer radius. Orange stays reserved for actions + focus. */
html.tt-appearance-editorial .btn {
	font-family: var(--font-ui);
	border-radius: var(--r8);
}
html.tt-appearance-editorial .btn.primary {
	font-family: var(--font-ui);
}

/* ---- Forms ---- UI type for labels; tabular numerals for aligned entry. */
html.tt-appearance-editorial .form-control label {
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .form-control input {
	font-variant-numeric: tabular-nums;
}

/* ---- Modal ---- warm panel, restrained depth, slab title (see above). */
html.tt-appearance-editorial .modal-box {
	background: var(--pane);
	border-color: var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
}

/* ---- Status pills ---- compact mono labels with tabular numerals. */
html.tt-appearance-editorial .spill {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
html.tt-appearance-editorial .spill.win {
	background: var(--win-soft);
	color: var(--win-ink);
}

/* ---- Round navigation (Begegnungen master-detail) ----
   The selected round is current progress, so it carries the green role. */
html.tt-appearance-editorial .md-list {
	background: var(--pane);
	border-color: var(--border);
}
html.tt-appearance-editorial .md-row {
	border-bottom-color: var(--border);
}
html.tt-appearance-editorial .md-row.sel {
	background: var(--win-soft);
	box-shadow: inset 3px 0 0 var(--win);
}
html.tt-appearance-editorial .md-row .md-names {
	font-family: var(--font-data);
}

/* ---- Matrix (authenticated shell only) ----
   Scoped under ``.shell`` so the public Live dashboard matrix keeps its own
   treatment. Warm surfaces, firm borders, restrained depth, mono data with
   tabular numerals. Semantic state cells (win/loss/open/bye) keep their
   shared status tokens untouched. */
html.tt-appearance-editorial .shell .matrix-card {
	background: var(--pane);
	border-color: var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
}
html.tt-appearance-editorial .shell .matrix-head {
	border-bottom-color: var(--border);
}
html.tt-appearance-editorial .shell .matrix th,
html.tt-appearance-editorial .shell .matrix td {
	border-color: var(--border);
}
html.tt-appearance-editorial .shell .matrix thead th {
	background: var(--pane-2);
	color: var(--muted);
}
html.tt-appearance-editorial .shell .matrix th.s,
html.tt-appearance-editorial .shell .matrix td.s {
	background: var(--pane-2);
}
html.tt-appearance-editorial .shell .matrix td.s {
	background: var(--pane);
}
html.tt-appearance-editorial .shell .matrix tbody tr:hover td {
	background: var(--canvas);
}
html.tt-appearance-editorial .shell .matrix tbody tr:hover td.s {
	background: var(--canvas);
}
/* Current round header → green (active progress). */
html.tt-appearance-editorial .shell .matrix th.rhead.now {
	color: var(--win-ink);
}
/* Numeric / data columns → IBM Plex Mono with tabular numerals. */
html.tt-appearance-editorial .shell .matrix td.num,
html.tt-appearance-editorial .shell .matrix th.num,
html.tt-appearance-editorial .shell .matrix td.ttr,
html.tt-appearance-editorial .shell .matrix th.col-ttr,
html.tt-appearance-editorial .shell .matrix td.rank,
html.tt-appearance-editorial .shell .matrix th.rhead {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Fix round 1 (Task 4) — empty-state, alert and quick-score controls.

   The original Task 4 block shipped without treatment for these three
   primitives. The base ``.empty-state`` rule draws its surface, border and text
   from the Legacy ``--lt-*`` light-surface tokens (cool white in Light, cool
   near-black in Dark), so it never joined the warm Editorial palette. The base
   ``.alert`` already themes through ``--pane``/``--border``/``--ink``; Editorial
   only assigns the UI typeface and firmer radius. The selected quick-score
   carries the orange action role, but Editorial-dark ``--accent`` (#f26b1d)
   cannot carry white text at 4.5:1 (≈3.05:1), so the selected state is remapped
   to ``--accent-soft`` / ``--accent-ink`` — a soft orange fill with accessible
   ink text — preserving the orange role while meeting WCAG AA in both modes.

   Semantic alert status colours (info / success / warning / error) and Legacy
   appearance are untouched.
   ========================================================================== */

/* ---- Quick-score controls ----
   Unselected control themes through the pane/ink tokens inherited from
   app.css; Editorial only adds the firmer radius. The selected control is
   remapped to the soft-orange accessible pair (verified in test_contrast.py). */
html.tt-appearance-editorial .qs-btn {
	border-radius: var(--r8);
}
html.tt-appearance-editorial .qs-btn.sel {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* ---- Empty state ----
   Remap the Legacy ``--lt-*`` surface/border/text onto the warm Editorial
   pane/border-strong/muted/ink tokens so the empty panel belongs to the
   palette in both Light and Dark. Geometry (padding, layout) is inherited. */
html.tt-appearance-editorial .empty-state {
	background: var(--pane);
	border-color: var(--border-strong);
	border-radius: var(--r12);
	color: var(--muted);
}
html.tt-appearance-editorial .empty-state .empty-title {
	color: var(--ink);
}

/* ---- Alerts ----
   The base alert already themes through the Editorial pane/border/ink tokens;
   Editorial only assigns the UI typeface and the firmer radius. The semantic
   status colours (info / success / warning / error left-border + soft fills)
   are inherited unchanged from app.css so their meaning is preserved. */
html.tt-appearance-editorial .alert {
	font-family: var(--font-ui);
	border-radius: var(--r8);
}

/* ==========================================================================
   Task 5 — owner console, authentication, public Live and player surfaces.

   This block extends the shared Editorial treatment to every remaining
   non-marketing application surface. The surfaces already theme through the
   warm ``--canvas`` / ``--pane`` / ``--border`` / ``--ink`` tokens, so the
   Editorial palette cascades automatically; what Editorial adds here is the
   three font roles (Zilla Slab for titles, Karla for interface copy, IBM Plex
   Mono for scores / ranks / compact metadata), the firmer radius scale and the
   semantic green active-destination role on owner navigation.

   Geometry (grid tracks, fixed nav dimensions, content max widths, mobile
   breakpoints), the checkbox-based scoreboard/table view switch, all Datastar
   replacement boundaries, touch-target sizing (≥ 44×44 CSS px), result
   submission, routes and navigation destinations are inherited unchanged from
   app.css. Public Live stays dark by default; the player cockpit stays light
   by default and mobile-first. No paper texture or decorative print effects.
   ========================================================================== */

/* ---- Owner console (admin shell) ----
   The admin shell shares the player shell's warm tokens. Editorial assigns the
   UI face to the chrome, the display face to the console title, the data face
   to the compact strip metadata, and the green active role to the current
   owner destination (green = active location, per the Editorial spec). Admin
   density, the fixed mobile tabbar and the rail/workspace/tabbar DOM order are
   inherited unchanged from app.css. */
html.tt-appearance-editorial .admin-shell {
	background: var(--canvas);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .admin-strip {
	background: var(--pane);
	border-bottom-color: var(--border);
}
html.tt-appearance-editorial .admin-strip strong {
	font-family: var(--font-display);
}
/* Compact eyebrow + scope tag → data face with tabular numerals. */
html.tt-appearance-editorial .admin-strip .eyebrow,
html.tt-appearance-editorial .admin-strip .owner-scope {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
html.tt-appearance-editorial .admin-main {
	font-family: var(--font-ui);
}
/* Owner rail + mobile tabbar reuse the same green active-destination role as
   the player app rail. */
html.tt-appearance-editorial .admin-rail {
	background: var(--pane);
	border-right-color: var(--border);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .admin-rail-link.active {
	background: var(--win-soft);
	color: var(--win-ink);
}
html.tt-appearance-editorial .admin-tabbar {
	background: var(--pane);
	border-top-color: var(--border);
}
html.tt-appearance-editorial .admin-tabbar-link.active {
	background: var(--win-soft);
	color: var(--win-ink);
}

/* ---- Auth / legal pages ----
   The auth card and plain topbar theme through the warm pane/border tokens.
   Editorial assigns the display face to the card heading and topbar brand,
   and the UI face to the rest of the chrome. Auth content stays centered and
   lower density than tournament screens (geometry inherited from app.css). */
html.tt-appearance-editorial .plain-topbar {
	background: var(--pane);
	border-bottom-color: var(--border);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .plain-topbar .brand {
	font-family: var(--font-display);
}
html.tt-appearance-editorial .auth-card {
	background: var(--pane);
	border-color: var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .auth-card h1 {
	font-family: var(--font-display);
}

/* ---- Public Live (dark event mode) ----
   The public Live dashboard defaults to Editorial Dark. Scores, active tables,
   recent results and the live status are the strongest elements: the data face
   (IBM Plex Mono, tabular numerals) carries scores and compact metadata, the
   display face carries section titles. No paper texture or decorative print
   effects. The Light choice stays usable because every role themes through the
   same tokens. The checkbox-based scoreboard/table view switch and all Datastar
   replacement boundaries are inherited unchanged from app.css. */
html.tt-appearance-editorial .live-body {
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .live-page .topbar {
	border-bottom-color: var(--border);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .live-page .topbar .brand {
	font-family: var(--font-display);
}
/* Live status pill → data face (the strongest live-status element). */
html.tt-appearance-editorial .live-page .spill {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* Hero meta (round progress + "aktualisiert" relative time) → data face. */
html.tt-appearance-editorial .live-page .hero-meta {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* Active-table score cards (the brief's ``.score-card`` role) → warm pane,
   firmer radius, restrained depth; the table number and score use the data
   face. */
html.tt-appearance-editorial .live-page .bigcard {
	background: var(--pane);
	border-color: var(--border);
	border-radius: var(--r12);
	box-shadow: var(--shadow);
}
html.tt-appearance-editorial .live-page .bigcard .b-head .tisch,
html.tt-appearance-editorial .live-page .bigcard .score {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* Recent-result rows → data face for the set chip and relative time. */
html.tt-appearance-editorial .live-page .chip,
html.tt-appearance-editorial .live-page .ago {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* Panel section titles (Kreuztabelle, Neueste Ergebnisse) → display face. */
html.tt-appearance-editorial .live-page .panel-head h2 {
	font-family: var(--font-display);
}
/* Public Live matrix (deliberately separate from the ``.shell`` matrix scoped
   in Task 4): warm surfaces, firm borders, data face for ranks/scores.
   Semantic state cells (win/loss/open/bye) keep their shared status tokens
   untouched. */
html.tt-appearance-editorial .live-page .matrix-scroll {
	background: var(--pane);
}
html.tt-appearance-editorial .live-page .matrix {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
html.tt-appearance-editorial .live-page .matrix th,
html.tt-appearance-editorial .live-page .matrix td {
	border-color: var(--border);
}
html.tt-appearance-editorial .live-page .matrix thead th {
	background: var(--pane-2);
	color: var(--muted);
}

/* ---- Player QR cockpit (light, mobile-first) ----
   The player cockpit defaults to Editorial Light. Editorial assigns the UI
   face to the chrome, the display face to the tournament name and section
   titles, and the data face to scores, ranks and compact metadata. Touch
   targets (≥ 44×44 CSS px), the quick-score grid, set entry, result
   submission and the neighborhood ranking hierarchy are inherited unchanged
   from app.css. The optional Dark choice themes through the same tokens. */
html.tt-appearance-editorial .player-body {
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .player-body .phead {
	border-bottom-color: var(--border);
	font-family: var(--font-ui);
}
html.tt-appearance-editorial .player-body .phead .brand .tname {
	font-family: var(--font-display);
}
html.tt-appearance-editorial .player-body .phead .spill {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* "Dein Spiel" hero card (the brief's ``.pcard`` role) → warm pane-2, firmer
   radius, data face for the table number and QTTR metadata. */
html.tt-appearance-editorial .player-body .hero-card {
	background: var(--pane-2);
	border-color: var(--border-strong);
	border-radius: var(--r12);
}
html.tt-appearance-editorial .player-body .hero-card .hc-top .tbl,
html.tt-appearance-editorial .player-body .hero-card .micro,
html.tt-appearance-editorial .player-body .hero-card .q {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* Player greet pills (rank, live TTR delta) → data face. */
html.tt-appearance-editorial .player-body .meta-pill {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
/* Player section titles (Dein Spiel, Deine Ergebnisse, …) → display face. */
html.tt-appearance-editorial .player-body .panel-head h2 {
	font-family: var(--font-display);
}

/* ==========================================================================
   Fix round 1 (Task 5) — player control contrast, green progress role and
   recent-result data typography.

   Three review findings from the Task 5 QA pass:

   1. Player ``.pq.sel`` (selected quick-score) and ``.psubmit`` (result
      submit) carry the orange action role: their base rules paint
      ``background: var(--accent)`` with ``color: var(--p-on-accent)`` (= #fff).
      Editorial-dark ``--accent`` (#f26b1d) cannot carry white text at 4.5:1
      (≈3.05:1), so both controls are remapped to the ``--accent-soft`` /
      ``--accent-ink`` accessible pair — the same treatment already shipped for
      the matrix ``.qs-btn.sel`` in the Task 4 fix. The destructive
      ``.psubmit.danger`` (``--loss-*``) is more specific and stays untouched.

   2. Green was not consistently the active/progress role. The mobile admin
      active tab kept the inherited orange ``--accent-soft`` background (only
      its text turned green), and the public-Live ``.meta-pill.hot`` ("Runde …
      läuft") and player ``.meta-pill.hot`` ("Nächstes Spiel") progress pills
      stayed on the orange action role. All three are now remapped to the
      green ``--win-soft`` / ``--win-ink`` pair. Warning (``--amber-*``) and
      danger (``--loss-*``) pill semantics are untouched.

   3. The public Live recent-result score (``.r-score``) remained on the
      Legacy ``--mono`` token; it and the compact round badge (``.rnd``) are
      numeric data and now carry ``--font-data`` with tabular numerals.
   ========================================================================== */

/* ---- Player result-entry controls (finding 1) ----
   The selected quick-score and the result submit are remapped to the
   soft-orange accessible pair. Specificity note: ``html… .psubmit`` (0,2,1)
   overrides the base ``.player-body .psubmit`` (0,2,0) but yields to the more
   specific ``.player-body .psubmit.danger`` (0,3,0), so the destructive
   variant keeps its ``--loss-*`` treatment. */
html.tt-appearance-editorial .quick .pq.sel {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-ink);
}
html.tt-appearance-editorial .psubmit {
	background: var(--accent-soft);
	color: var(--accent-ink);
}

/* ---- Active/progress pills + mobile admin tab (finding 2) ----
   These are active-state / progress surfaces, not primary actions, so they
   take the green role. The base ``.meta-pill.hot`` sets ``border-color:
   transparent`` which is inherited (the green soft fill needs no border). */
html.tt-appearance-editorial .live-page .meta-pill.hot {
	background: var(--win-soft);
	color: var(--win-ink);
}
html.tt-appearance-editorial .player-body .meta-pill.hot {
	background: var(--win-soft);
	color: var(--win-ink);
}

/* ---- Recent-result score + round badge (finding 3) ----
   The score ("3:1") and the round badge ("R3") are numeric data; they move
   off the Legacy ``--mono`` token onto ``--font-data`` with tabular numerals,
   joining the other compact score metadata already styled in the Live block. */
html.tt-appearance-editorial .live-page .rcard .r-score,
html.tt-appearance-editorial .live-page .rcard .r-top .rnd {
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}