/* maxq-md — Rev A theme layer, from board 3b/4a
   Load AFTER app.css. Source order matters: these rules win by coming last,
   including over app.css's prefers-color-scheme block.

   Two scopes:
   - tokens + typography are global, so Lift, Week, Trends and the sheets
     follow along instead of looking half-migrated
   - layout that goes full-bleed is scoped to body.p-today
*/

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Courier+Prime:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --display: "Fortuna", "Futura", "Futura PT", "Jost", "Century Gothic", sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --font: var(--mono);

  --paper: #1B1E22;
  --panel: #212529;
  --ink: #E6E0D0;
  --ink-2: #ACA69A;
  --ink-3: #74716A;
  --caution: #E3A23A;
  --warning: #D65A45;

  --rule: rgba(230, 224, 208, .24);
  --rule-soft: rgba(230, 224, 208, .11);

  /* app.css tokens retargeted */
  --bg: var(--paper);
  --card: var(--paper);
  --text: #BDBDBD;
  --muted: var(--ink-2);
  --line: var(--rule);
  --grid: var(--rule-soft);
  --accent: var(--ink);
  --ok: var(--ink);
  --warn: var(--caution);
  --bad: var(--warning);
  --band: rgba(230, 224, 208, .10);
  --nav-h: 62px;
}

html, body { background: var(--paper); color: var(--text); font-family: var(--mono); font-size: 12px; line-height: 1.5; }

/* photostat grain, from the Rev A reference. Delete this block to drop it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
main, .top, .card, .alert, .tile, .bar, .pill, .set, .chips a, button, input, select, .sheet-card, .tcard, .sugchip { border-radius: 0; }

/* ---- running head ---- */
.top { padding: calc(12px + env(safe-area-inset-top)) 16px 10px; border-bottom: 1px solid var(--rule); align-items: center; }
.brand { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.top-right { gap: 9px; }
.gear { color: var(--ink-2); padding: 2px; }
.gear .ico { width: 15px; height: 15px; }
.gear.on { color: var(--ink); }

/* ---- sections ---- */
.card { background: transparent; border: 0; padding: 0; margin: 30px 0 0; }
.card-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 0 0 8px; padding: 0 16px; }
h2 { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.card-head .muted, .card-head span { font-size: 10px; color: var(--ink-3); }
.card-head a.muted { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(230, 224, 208, .35); }

/* ---- readout groups: 3b treatment, group edges only ---- */
.tiles { gap: 0; border-top: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); }
.tile { background: transparent; padding: 19px 18px 21px; }
.tile .k { font-family: var(--mono); font-size: 10.5px; color: var(--ink-2); margin-bottom: 4px; }
.tile .v { font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.02; letter-spacing: 0; margin: 0; color: var(--text); }
.tile .v.small { font-size: 23px; line-height: 1.3; }
.tile .v.ok { color: var(--text); }
.tile .v.warn { color: var(--caution); }
.tile .v.bad { color: var(--warning); }
.tile .s { font-size: 10px; color: var(--ink-3); margin-top: 6px; line-height: 1.45; overflow: visible; text-overflow: clip; white-space: normal; }
.unit, .tile .v .delta { font-family: var(--display); font-size: 11px; font-weight: 400; color: var(--ink-2); margin-left: 4px; }

/* the second recovery row reads as secondary: panel ground, smaller numerals */
.tiles.compact { grid-template-columns: repeat(2, 1fr); background: var(--panel); border-top: 0; margin-top: 0 !important; }
.tiles.compact .tile { padding: 12px 18px 14px; }
.tiles.compact .tile .v { font-size: 20px; line-height: 1.1; }
.tiles.compact .tile .v.small { font-size: 17px; }

/* ---- zone 2 bar ---- */
.bar { height: 7px; background: transparent; border: 1px solid var(--ink-2); margin: 8px 0 5px; }
.bar > div { background: var(--ink); }

/* ---- session list ---- */
.list { margin: 0; }
.list li { border-top: 1px solid var(--rule-soft); }
.list li:first-child { border-top: 1px solid var(--ink-2); }
.list li:last-child { border-bottom: 1px solid var(--ink-2); }
.list li a { padding: 11px 16px; gap: 9px; font-size: 10.5px; }
.list .muted { color: var(--ink-3); }
/* Rev A has no sport colours: the sport reads as a Jost tag, not a filled pill.
   Delete these two rules to get the coloured pills back. */
.pill { background: transparent !important; color: var(--ink-2); font-family: var(--display); font-weight: 500;
  font-size: 10px; letter-spacing: .1em; padding: 0; }
.pill.run, .pill.ride, .pill.lift { background: transparent !important; }

/* ---- alerts: high is the Warning treatment, warn is Caution ---- */
.alerts { gap: 0; margin: 16px 0 0; }
.alert { border: 1px solid var(--rule); background: transparent; padding: 12px 13px; margin: 0 16px 8px; }
.alert .at { font-family: var(--display); font-weight: 500; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; gap: 7px; }
.alert .ab { font-size: 10.5px; color: var(--text); margin-top: 5px; line-height: 1.5; }
.alert.high { border-color: var(--warning);
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(214, 90, 69, .16) 4px 5px); }
.alert.high .at { color: var(--warning); }
.alert.warn { border-color: var(--caution); }
.alert.warn .at { color: var(--caution); }
.alert.info { border-color: var(--rule); }
.alert.info .at { color: var(--ink-2); }

/* ---- buttons ---- */
button { font-family: var(--display); font-weight: 500; font-size: 12px; letter-spacing: .04em;
  padding: 8px 16px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--ink-2); padding: 2px 7px;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.bad-btn, .linkish.bad, .finish-btn { background: transparent; color: var(--warning); border-color: var(--warning); }

/* ---- provenance footer ---- */
.foot { text-align: left; padding: 0 16px; font-size: 10px; color: var(--ink-3); margin: 26px 0 0; line-height: 1.5; }

/* ---- tab bar: glyph over label, active is an inverted chip ---- */
.tabs { background: var(--paper); border-top: 1px solid var(--ink-2); backdrop-filter: none; }
.tabs a { gap: 3px; font-family: var(--display); font-weight: 500; font-size: 8px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); }
.tabs a.on { background: var(--ink); color: var(--paper); }
.tabs .ico { width: 14px; height: 14px; }

/* ---- Today layout: rules go edge to edge ---- */
body.p-today main { padding-left: 0; padding-right: 0; }
body.p-today .flash, body.p-today .notice { margin: 8px 16px; border-radius: 0; }

/* ==========================================================================
   Colour pass — added after the handoff, not part of the original export.
   Re-exporting rev-a-theme.css from the design tool will drop this block.

   The board says no decorative colour, and the theme honours that: the sport
   pill is a tag, not a filled lozenge. But the charts, the strain donut and
   the effort dial use hue to carry data, not to decorate, so they keep it -
   pulled down into the Rev A range instead of left in the Bevel palette.
   Everything here is low saturation and mid value, so it reads as coloured
   ink on the paper rather than as UI.
   ========================================================================== */

:root {
  /* sport: warm / cool / mauve, so a stacked load bar stays legible small */
  --run: #C98B5E;
  --ride: #7E9AA6;
  --lift: #A88FA8;
  --other: #8A867E;

  /* the eight muscle groups of the donut, wheel, body map and chips */
  --m-chest: #C0705E;
  --m-back: #7E9AA6;
  --m-shoulders: #D4A05C;
  --m-arms: #A88FA8;
  --m-legs: #8CA37E;
  --m-glutes: #C08BA0;
  --m-core: #7FA8A0;
  --m-other: #8A867E;

  /* 80/20 intensity: sage, then the board's own caution and warning */
  --easy: #8CA37E;
  --moderate: #E3A23A;
  --hard: #D65A45;

  /* effort dial, 1-10. Sage through caution to warning. */
  --rpe-1:  #8CA37E;
  --rpe-2:  #9BAC83;
  --rpe-3:  #AEB486;
  --rpe-4:  #C4B87E;
  --rpe-5:  #DAB66C;
  --rpe-6:  #E3A23A;
  --rpe-7:  #DE9144;
  --rpe-8:  #D97C48;
  --rpe-9:  #D65A45;
  --rpe-10: #C2443A;
}

/* chips are light muted grounds now, so the label sits in paper, not white */
.mchip.p { color: var(--paper); font-weight: 500; }
.mchip { border-radius: 0; }
.mchip.p.m-other { background: var(--m-other); }

/* app.css pairs #fff with an accent ground in four places. That read fine when
   the accent was green; the Rev A accent is cream, so white on it measures 0.12
   luminance apart - invisible. Ink grounds take paper-coloured labels, the way
   the active tab already does. Two of these are the keypad's enter key and the
   completed-set tick, which is the gym path, so they matter more than they look. */
.chips a.on,
.pad-grid .pad-go,
.wo-actions .go,
.settable tr.done .tick { color: var(--paper); }

/* not broken, but these sit on mid-value grounds and read better in paper */
.split span,
.rpe-chip { color: var(--paper); }
.rpe-handle { fill: var(--ink); }

/* ---- Start workout: the one green thing in the app ----
   Phosphor green off a mission-control console. It is the only button that
   starts something rather than saving or navigating, so it gets the only hue
   that is not in the ink set. Flat, no glow: the board still says no shadows. */
:root { --go: #40D964; }
.wo-actions .go { background: var(--go); border-color: var(--go); color: var(--paper); }

/* ---- square corners through the workout section ----
   The killer near the top of this file uses bare element selectors, so the app's
   own class rules (.cell, .pad-grid button, .wo-actions a) outrank it and kept
   their radius. These match on specificity and win on source order. */
.wo-bar, .wo-actions a, .cell, .tick, .pad-grid button, .plate i, .lastchip,
.odo span, .muscle-list span, .ownform .preview, .mbar, .rpe-chip,
.picker-list .info, .exhead .info, .mlegend i, .dot { border-radius: 0; }

/* Form controls fall into the same specificity trap: app.css styles them as
   input[type=number] etc, which outranks a bare `input`. input[type] matches
   that weight and covers every type, including ones not written yet. */
input, input[type], textarea, select { border-radius: 0; }
::file-selector-button, ::-webkit-file-upload-button { border-radius: 0; }