/* Training's look, "HillerFit Black" (SPEC 72 section 4s, training_look.py): the owner's pick of 2026-10-29 ("A: HillerFit
   Black") from three mockups. His gym before sunrise: near-black, his crimson (#CC0022) and red (#E11B22), headings in
   Barlow Condensed's italic in capitals like his wordmark, Inter for reading. A black band behind each page's head (his
   crimson glow at its top right, a crimson line under it), light and dark: on the light theme the band stays black and the
   page is a light grey with white cards.

   Loaded after the page's own styles on Training's member pages only (base.html, training_look.look()), and everything
   here is under [data-look="hillerfit"], so the rest of the site never sees it. The site's top bar, left column and
   phone bar are the site's and stay as they are: the look's colours are set on <main> (and Training's dialogs, the TV
   view's page) rather than the whole page. Every text colour here is checked at 4.5:1 or more on what's behind it (3:1
   for large text and for controls' edges), in both themes; focus rings stay the site's blue; nothing moves with reduced
   motion; Windows' high contrast gets the system's colours and no band. */

/* ---------------------------------------------------------------- the fonts and colours
   Two layers: the page's palette (--hf-p-*, dark by default, light with the light theme), set on <main>, Training's
   dialogs and the TV view's page; and the tokens the site's styles read (--bg, --surface, --text...), which point at the
   palette. The band and the black cards set those tokens to dark values whatever the theme, and anything inside them that
   should look like the page again (a drop-down menu, the dashboard's cards) points them back at the palette (.hf-page's
   rule), which nothing inside the band changes. */
[data-look="hillerfit"] {
  --hf-red: #E11B22;            /* his red */
  --hf-crimson: #CC0022;        /* his crimson: fills (white on it 5.85:1), the band's line, the leaderboard's outline */
  --hf-band: #000;              /* the band and the black cards: the same in both themes */
  --hf-page: #0D0D0D;
  --hf-glow: #5E0714;           /* the crimson glow at the band's top right */
}
[data-look="hillerfit"] body { background: var(--hf-page); }
[data-look="hillerfit"] :is(main, body > dialog, .tv-body) {
  --hf-p-bg: #0D0D0D;
  --hf-p-surface: #171717;
  --hf-p-surface-2: #222222;
  --hf-p-hover: #2B2B2B;
  --hf-p-line: #2C2C2C;
  --hf-p-text: #F5F5F5;
  --hf-p-text-2: #B5B5B5;       /* 9.5:1 on --bg, 7.8:1 on --surface-2 */
  --hf-p-text-3: #959595;       /* 5.3:1 on --surface-2, 4.7:1 on --hover */
  --hf-p-accent-hover: #E11B22;
  --hf-p-accent-soft: rgba(225, 27, 34, 0.17);
  --hf-p-accent-text: #FF5C66;  /* red as text: 6.5:1 on --bg, 5.3:1 on --surface-2 */
  --hf-p-focus: #60a5fa;
  --hf-p-chart-1: #6F6F6F;      /* (Days you trained: grey weeks, this week crimson) */
  --hf-p-chart-axis: #3A3A3A;
  --hf-p-card-shadow: 0 0 0 1px #2C2C2C;
  --hf-p-scheme: dark;
  --radius: 8px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed HF", "Arial Narrow", var(--font);
  font-family: var(--font);
}
@media (prefers-color-scheme: light) {
  [data-look="hillerfit"]:not([data-theme="dark"]) { --hf-page: #F2F2F2; }
  [data-look="hillerfit"]:not([data-theme="dark"]) :is(main, body > dialog) {
    --hf-p-bg: #F2F2F2; --hf-p-surface: #FFFFFF; --hf-p-surface-2: #EDEDED; --hf-p-hover: #E3E3E3; --hf-p-line: #DEDEDE;
    --hf-p-text: #0D0D0D; --hf-p-text-2: #4A4A4A; --hf-p-text-3: #5E5E5E; --hf-p-accent-hover: #A8001C;
    --hf-p-accent-soft: rgba(204, 0, 34, 0.08);
    --hf-p-accent-text: #C2001F;   /* red as text: 6.3:1 on white, 5.4:1 on --surface-2 */
    --hf-p-focus: #2563eb; --hf-p-chart-1: #8C8C8C; --hf-p-chart-axis: #CFCFCF;
    --hf-p-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06); --hf-p-scheme: light;
  }
}
[data-look="hillerfit"][data-theme="light"] { --hf-page: #F2F2F2; }
[data-look="hillerfit"][data-theme="light"] :is(main, body > dialog) {
  --hf-p-bg: #F2F2F2; --hf-p-surface: #FFFFFF; --hf-p-surface-2: #EDEDED; --hf-p-hover: #E3E3E3; --hf-p-line: #DEDEDE;
  --hf-p-text: #0D0D0D; --hf-p-text-2: #4A4A4A; --hf-p-text-3: #5E5E5E; --hf-p-accent-hover: #A8001C;
  --hf-p-accent-soft: rgba(204, 0, 34, 0.08); --hf-p-accent-text: #C2001F; --hf-p-focus: #2563eb; --hf-p-chart-1: #8C8C8C;
  --hf-p-chart-axis: #CFCFCF; --hf-p-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.06);
  --hf-p-scheme: light;
}
/* the site's tokens, from the page's palette (and back to it inside the band: a menu, the dashboard's cards) */
[data-look="hillerfit"] :is(main, body > dialog, .tv-body, .hf-page, .tr-head .trm-menu-pop, .trd-head .trm-menu-pop) {
  --bg: var(--hf-p-bg); --surface: var(--hf-p-surface); --surface-2: var(--hf-p-surface-2); --hover: var(--hf-p-hover);
  --line: var(--hf-p-line); --text: var(--hf-p-text); --text-2: var(--hf-p-text-2); --text-3: var(--hf-p-text-3);
  --accent: var(--hf-crimson); --accent-hover: var(--hf-p-accent-hover); --accent-soft: var(--hf-p-accent-soft);
  --accent-text: var(--hf-p-accent-text); --focus: var(--hf-p-focus); --chart-1: var(--hf-p-chart-1);
  --chart-axis: var(--hf-p-chart-axis); --hf-card-shadow: var(--hf-p-card-shadow);
  color-scheme: var(--hf-p-scheme);
  color: var(--text);
}
/* inside the band and the black cards: the dark colours whatever the theme */
[data-look="hillerfit"] :is(.hf-dark, .tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head,
                                                    .trm-month-head, .tr-week, :has(~ .tr-week), :has(~ .trm-month-head)),
                             .trr-try > .trr-try-head, main > .trn-live, .trd-head, .tr-panel.trr-head) {
  --bg: #000; --surface: #1A1A1A; --surface-2: rgba(255, 255, 255, 0.10); --hover: rgba(255, 255, 255, 0.16);
  --line: rgba(255, 255, 255, 0.18); --text: #F5F5F5; --text-2: #BDBDBD; --text-3: #A3A3A3; --accent-text: #FF5C66;
  --accent-soft: rgba(225, 27, 34, 0.28); --focus: #60a5fa;
  color-scheme: dark;
  color: var(--text);
}
/* (and back to the page inside them) */
[data-look="hillerfit"] :is(.tr-head .trm-menu-pop, .trd-head .trm-menu-pop) { color-scheme: var(--hf-p-scheme); }

/* ---------------------------------------------------------------- type */
[data-look="hillerfit"] main { letter-spacing: -0.003em; }
[data-look="hillerfit"] :is(main, .tv-body) :is(.page-title, .tr-part-title, .tr-day-head h2, .tr-h2, .trd-panel-title, .trd-date,
  .trr-title, .trr-group-name, .trr-bar-name, .tr-wb-tab, .trd-wb-tab, .trd-next-title, .tr-streak-panel h2, .trx-rest-title,
  .trpv-title, .trpv-piece-title, .trm-item-title, .tr-join-name, .tv-title, .tv-what) {
  font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em;
}
[data-look="hillerfit"] main .page-title { font-size: clamp(34px, 9.5vw, 46px); line-height: .92; overflow-wrap: anywhere; }
[data-look="hillerfit"] main .tr-h2 { font-size: 21px; line-height: 1.05; }
[data-look="hillerfit"] main .tr-h2 :is(.tr-count, .trx-range, small) { font-family: var(--font); font-style: normal; text-transform: none;
  letter-spacing: 0; }
[data-look="hillerfit"] main .tr-text { font-size: 16px; line-height: 1.55; }
[data-look="hillerfit"] main .tr-text .tr-lead { text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- the band: black, edge to edge, behind each page's head
   Each part of the head draws its piece of the band behind it: a ::before under everything else on the page (z-index -1),
   reaching up over the gap above it and out to the screen's edges (its box to the page's padding, then a black shadow as
   wide as the screen, cut to its own height: a shadow is never scrolled to). So the band follows the head whatever it
   holds. The day page's whole head is the band (everything above the week, and the week); elsewhere the way back and the
   title. The last part draws the crimson line under it (its ::after). The track chips wrap instead of scrolling sideways
   (a part that scrolls would carry its band with it). */
[data-look="hillerfit"] { --hf-up: 24px; --hf-side: 24px; --hf-foot: 22px; }
@media (max-width: 720px) { [data-look="hillerfit"] { --hf-up: 16px; --hf-side: 16px; } }
[data-look="hillerfit"] :is(.tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head, .trm-month-head,
                                          .tr-week, :has(~ .tr-week), :has(~ .trm-month-head)), .trr-try > .trr-try-head, main > .trn-live) {
  position: relative;
}
[data-look="hillerfit"] :is(.tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head, .trm-month-head,
                                          .tr-week, :has(~ .tr-week), :has(~ .trm-month-head)), .trr-try > .trr-try-head, main > .trn-live)::before {
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--hf-up)) calc(-1 * var(--hf-side)) 0; pointer-events: none;
  background: var(--hf-band); box-shadow: 0 0 0 100vmax var(--hf-band); clip-path: inset(0 -100vmax);
}
[data-look="hillerfit"] .tr-page > .tr-tracks:is(:has(~ .tr-week), :has(~ .trm-month-head)) { flex-wrap: wrap; overflow: visible; }
/* (the chips' row reaches 4 px past the page on each side, for their focus rings: its band reaches 4 px less) */
[data-look="hillerfit"] .tr-page > nav.tr-tracks::before { left: calc(4px - var(--hf-side)); right: calc(4px - var(--hf-side)); }
/* his crimson glow at the band's top right, where the head starts the band (Training's home, the join page: as in the
   mockup; a page whose band starts with the way back keeps it plain black). The screen's corner on a phone (the band's
   own box reaches it there); on a wider screen inside the band's box, fading out before its edge (the black shadow
   beyond it carries no glow) */
[data-look="hillerfit"] main:not(:has(> .trn-live)) > .tr-page > :is(header.tr-head, header.tr-join-hero):not(.tr-crumbs ~ *)::before {
  background: radial-gradient(520px 190px at 100% 0, var(--hf-glow), rgba(94, 7, 20, 0) 100%), var(--hf-band);
}
@media (min-width: 721px) {
  [data-look="hillerfit"] main:not(:has(> .trn-live)) > .tr-page > :is(header.tr-head, header.tr-join-hero):not(.tr-crumbs ~ *)::before {
    background: radial-gradient(300px 170px at calc(100% - 300px) 0, var(--hf-glow), rgba(94, 7, 20, 0) 100%), var(--hf-band);
  }
}
/* the band's foot: the crimson line under its last part, then room before the page */
[data-look="hillerfit"] :is(.tr-page > :is(.tr-week, .trm-month-head), .trr-try > .trr-try-head,
    .tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head):not(:has(~ :is(.tr-crumbs, .tr-head,
      h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head, .tr-week, .trm-month-head)))) {
  margin-bottom: calc(var(--hf-foot) + 2px);
}
[data-look="hillerfit"] :is(.tr-page > :is(.tr-week, .trm-month-head), .trr-try > .trr-try-head,
    .tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head):not(:has(~ :is(.tr-crumbs, .tr-head,
      h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head, .tr-week, .trm-month-head))))::before {
  bottom: calc(-1 * var(--hf-foot));
}
[data-look="hillerfit"] :is(.tr-page > :is(.tr-week, .trm-month-head), .trr-try > .trr-try-head,
    .tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head):not(:has(~ :is(.tr-crumbs, .tr-head,
      h1.page-title, .tr-join-hero, .trc-convo-head, .trx-profile-head, .tr-week, .trm-month-head))))::after {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--hf-side)); right: calc(-1 * var(--hf-side));
  bottom: calc(-1 * var(--hf-foot)); height: 4px; pointer-events: none;
  background: var(--hf-crimson); box-shadow: 0 0 0 100vmax var(--hf-crimson); clip-path: inset(0 -100vmax);
}
[data-look="hillerfit"] main > .trn-live { margin-bottom: 16px; }
[data-look="hillerfit"] main:not(:has(> .tr-page > :is(.tr-crumbs, .tr-head, h1.page-title, .tr-join-hero, .tr-week))) > .trn-live::before {
  content: none; }

/* the way back, in the band */
[data-look="hillerfit"] .tr-page > .tr-crumbs { color: var(--text-2); }
[data-look="hillerfit"] .tr-page > .tr-crumbs .link { color: var(--accent-text); }
[data-look="hillerfit"] .tr-page > .tr-crumbs .muted { color: var(--text-2); }

/* ---------------------------------------------------------------- the day page's head (the phone's) */
[data-look="hillerfit"] .tr-page > .tr-head .page-title { font-size: 46px; color: #fff; }
[data-look="hillerfit"] .tr-join-hero .tr-locked-icon { background: rgba(225, 27, 34, 0.26); color: #FF5C66; }
[data-look="hillerfit"] .tr-join-hero .page-title { color: #fff; }
[data-look="hillerfit"] .tr-head .btn, [data-look="hillerfit"] .tr-head .trm-menu > summary { border-radius: 6px; }
[data-look="hillerfit"] .tr-streak { border-radius: 6px; }
[data-look="hillerfit"] .tr-streak.is-on { background: var(--hf-crimson); color: #fff; }
[data-look="hillerfit"] .tr-board-line { border-radius: 6px; background: rgba(225, 27, 34, 0.26); }
[data-look="hillerfit"] .tr-board-line:hover { background: rgba(225, 27, 34, 0.38); }
[data-look="hillerfit"] .tr-page > :is(.tr-head, .tr-board-line, .tr-tracks, .tr-week) .tr-board-line .icon,
[data-look="hillerfit"] .tr-board-line .icon:first-child { color: #FF5C66; }
[data-look="hillerfit"] .tr-tracks .chip { border-radius: 6px; font-weight: 700; }
[data-look="hillerfit"] .tr-page > .tr-tracks:is(:has(~ .tr-week), :has(~ .trm-month-head)) .chip { background: rgba(255, 255, 255, 0.10); color: #F5F5F5; }
[data-look="hillerfit"] .tr-page > .tr-tracks:is(:has(~ .tr-week), :has(~ .trm-month-head)) .chip:hover { background: rgba(255, 255, 255, 0.16); }
[data-look="hillerfit"] .tr-page > .tr-tracks:is(:has(~ .tr-week), :has(~ .trm-month-head)) .chip[aria-current="page"] { background: #fff; color: #000; }
[data-look="hillerfit"] .tr-page > .tr-tracks:is(:has(~ .tr-week), :has(~ .trm-month-head)) .chip:focus-visible { outline-color: #60a5fa; }
[data-look="hillerfit"] .tr-about { color: var(--text-2); }

/* the week: italic numbers, the day shown on a crimson slant */
[data-look="hillerfit"] .tr-strip-day { position: relative; isolation: isolate; border-radius: 4px; }
[data-look="hillerfit"] .tr-strip-num { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 25px; line-height: 1.05; }
[data-look="hillerfit"] .tr-strip-wd { font-weight: 700; letter-spacing: 0.08em; }
[data-look="hillerfit"] .tr-strip-day[aria-current="date"] { background: none; color: #fff; }
[data-look="hillerfit"] .tr-strip-day[aria-current="date"] .tr-strip-num { color: #fff; }
[data-look="hillerfit"] .tr-strip-day[aria-current="date"]::before {
  content: ""; position: absolute; inset: 0 3px; z-index: -1; border-radius: 4px; background: var(--hf-crimson); transform: skewX(-9deg);
}
[data-look="hillerfit"] .tr-strip-day[aria-current="date"].has-parts .tr-strip-dot { background: #fff; }
[data-look="hillerfit"] .tr-strip-day.has-parts .tr-strip-dot { background: var(--hf-red); }
[data-look="hillerfit"] .tr-strip-day.is-today:not([aria-current]) .tr-strip-num { color: #FF5C66; }
@media (max-width: 380px) { [data-look="hillerfit"] .tr-strip-num { font-size: 21px; } }

/* ---------------------------------------------------------------- the day and its pieces */
[data-look="hillerfit"] .tr-day-head h2 { font-size: 30px; line-height: 1; }
[data-look="hillerfit"] .tr-day-head h2 .tr-day-sub { font-family: var(--font); font-style: normal; font-weight: 600; text-transform: none;
  font-size: 16px; letter-spacing: 0; }
[data-look="hillerfit"] :is(.tr-part, .tr-panel, .tr-empty, .trr-group, .trn-card, .trx-recap, .tr-announce, .tr-join-card, .tr-join-hf) {
  border-radius: var(--radius);
}
[data-look="hillerfit"] :is(.tr-part, .tr-panel, .tr-empty, .trr-group) { background: var(--surface); box-shadow: var(--hf-card-shadow); }
[data-look="hillerfit"] .tr-part-title { font-size: 29px; line-height: 1; }
[data-look="hillerfit"] .tr-prefix { font-family: var(--font); font-style: normal; font-weight: 800; }
/* a piece on the leaderboard: the crimson outline, a crimson edge down its left like a jersey stripe, the slanted tag */
[data-look="hillerfit"] .tr-part.is-board { box-shadow: inset 0 0 0 2px var(--hf-crimson), var(--hf-card-shadow); }
[data-look="hillerfit"] .tr-part.is-board::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--hf-crimson); pointer-events: none;
}
[data-look="hillerfit"] .tr-part.is-board { position: relative; }
/* (a piece changed for their equipment keeps its purple box over the crimson, as before: its tag stays) */
[data-look="hillerfit"] .tr-part.is-modified { box-shadow: inset 0 0 0 2px var(--tre), var(--hf-card-shadow); }
[data-look="hillerfit"] .tr-part.is-modified::before { content: none; }
[data-look="hillerfit"] .tr-board-mark {
  border-radius: 0; padding: 3px 12px 3px 10px; background: var(--hf-crimson); color: #fff;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
[data-look="hillerfit"] .tr-chip { border-radius: 4px; font-weight: 700; }
[data-look="hillerfit"] .tr-more > summary { font-size: 14.5px; }
[data-look="hillerfit"] .tr-more > summary .icon { color: var(--accent-text); }
[data-look="hillerfit"] .tr-mine-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
[data-look="hillerfit"] .tr-mine-score { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 32px; line-height: 1; }
[data-look="hillerfit"] :is(.tr-div, .tr-count, .tr-pr) { border-radius: 4px; }
[data-look="hillerfit"] .tr-count { font-family: var(--font); font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0;
  text-transform: none; }
[data-look="hillerfit"] :is(main, body > dialog) :is(.btn, .chip) { border-radius: 6px; }
[data-look="hillerfit"] :is(main, body > dialog) .btn-primary,
[data-look="hillerfit"] main .tr-log > summary.btn {
  font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase;
}
[data-look="hillerfit"] main .tr-result .btn:not(.btn-primary) { font-size: 15px; }
[data-look="hillerfit"] main .tr-wb > summary { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 21px;
  text-transform: uppercase; letter-spacing: 0.02em; }
[data-look="hillerfit"] main :is(.choice-chip-face, .chip-period) { border-radius: 6px; }

/* ---------------------------------------------------------------- the whiteboard */
[data-look="hillerfit"] .tr-wb-filters .chip { border-radius: 4px; }
[data-look="hillerfit"] .tr-wb-tab { font-size: 18px; letter-spacing: 0.03em; }
[data-look="hillerfit"] .tr-wb-tab .tr-count { font-size: 12px; }
[data-look="hillerfit"] .tr-wb-tab[aria-selected="true"] { border-bottom-width: 3px; border-bottom-color: var(--hf-crimson); }
[data-look="hillerfit"] .tr-rank { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 24px; color: var(--text-3); }
[data-look="hillerfit"] .tr-wb-row:first-child .tr-rank { color: var(--accent-text); }
[data-look="hillerfit"] .tr-wb-row { border-radius: 4px; }
[data-look="hillerfit"] .tr-wb-row.is-me { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--hf-crimson); }
[data-look="hillerfit"] .tr-wb-name { font-weight: 700; }
[data-look="hillerfit"] .tr-wb-score { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 24px;
  font-variant-numeric: tabular-nums; }
[data-look="hillerfit"] .tr-like[aria-pressed="true"] { color: var(--accent-text); }
/* (a phone: the bigger score keeps a name on one line with a little less room around it) */
@media (max-width: 480px) {
  [data-look="hillerfit"] .tr-wb-score { font-size: 21px; }
  [data-look="hillerfit"] .tr-wb-name { font-weight: 650; }
  [data-look="hillerfit"] .tr-rank { font-size: 22px; }
}
@media (min-width: 381px) and (max-width: 480px) { [data-look="hillerfit"] .tr-wb-line { column-gap: 8px; } }
@media (max-width: 380px) {   /* (the smallest phones keep training.css's tighter row: a score no wider than before) */
  [data-look="hillerfit"] .tr-wb-score { font-size: 18px; }
  [data-look="hillerfit"] .tr-rank { font-size: 19px; }
}

/* ---------------------------------------------------------------- My PRs: the Athlete Rating, a black card */
[data-look="hillerfit"] .tr-panel.trr-head { background: radial-gradient(120% 160% at 100% 0%, rgba(204, 0, 34, 0.42), rgba(204, 0, 34, 0) 58%), var(--hf-band);
  border-radius: 10px; box-shadow: inset 0 -4px 0 var(--hf-crimson); }
[data-look="hillerfit"] .trr-title { font-size: 34px; color: #fff; }
[data-look="hillerfit"] .trr-honesty { border-left-color: var(--hf-crimson); border-radius: 0 6px 6px 0; background: rgba(255, 255, 255, 0.07); color: #E2E2E2; }
[data-look="hillerfit"] .trr-head .trr-overall-label { color: #C9C9C9; letter-spacing: 0.1em; }
[data-look="hillerfit"] .trr-overall { font-family: var(--font-display); font-style: italic; font-size: 92px; line-height: .85; color: var(--accent-text); }
[data-look="hillerfit"] .trr-head .trr-overall { color: #fff; text-shadow: 4px 4px 0 var(--hf-crimson); }
[data-look="hillerfit"] .trr-band { font-size: 17px; }
[data-look="hillerfit"] .trr-bar-name { font-size: 19px; letter-spacing: 0.02em; }
[data-look="hillerfit"] .trr-bar-value { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 22px; }
[data-look="hillerfit"] .trr-bar-track { height: 10px; border-radius: 2px; }
[data-look="hillerfit"] .trr-head .trr-bar-track { background: rgba(255, 255, 255, 0.14); }
[data-look="hillerfit"] .trr-bar-fill { border-radius: 2px; background: linear-gradient(90deg, #CC0022, #FF2D3B); }
[data-look="hillerfit"] .trr-group-name { font-size: 26px; }
[data-look="hillerfit"] .trr-group-score { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 26px; }
[data-look="hillerfit"] .trr-tier { border-radius: 4px; }

/* ---------------------------------------------------------------- the sign-up series: its titles, its picks in crimson
   (the bar's bumper plates keep their colours) */
[data-look="hillerfit"] .trs-title { font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.005em; }
[data-look="hillerfit"] :is(.trs-card-face, .trs-group, .trs-remind-row) { border-radius: var(--radius); }
[data-look="hillerfit"] .trs-cta, [data-look="hillerfit"] .trs-skip { border-radius: 8px; }
[data-look="hillerfit"] .trs-card input:checked + .trs-card-face { border-color: var(--hf-crimson); background: var(--accent-soft); }
[data-look="hillerfit"] .trs-card input:checked + .trs-card-face .trs-plate-mark,
[data-look="hillerfit"] .trs-toggle input:checked + .trs-toggle-track,
[data-look="hillerfit"] .trs-remind-on:checked + .trs-remind-row .trs-toggle-track { background: var(--hf-crimson); }
[data-look="hillerfit"] .trs-remind-on:checked + .trs-remind-row { border-color: var(--hf-crimson); }
[data-look="hillerfit"] .trs-of { color: var(--accent-text); }

/* ---------------------------------------------------------------- the TV view (always dark: its own page) */
[data-look="hillerfit"] .tv-body { background: #000; }
[data-look="hillerfit"] .tv-bar { border-bottom: 3px solid var(--hf-crimson); }
[data-look="hillerfit"] .tv-track { color: #FF5C66; }
[data-look="hillerfit"] .tv-piece { border-radius: clamp(8px, .7vw, 14px); background: #121212; }
[data-look="hillerfit"] .tv-piece.is-board { border-left-color: var(--hf-crimson); }
[data-look="hillerfit"] .tv-level, [data-look="hillerfit"] .tv-tool, [data-look="hillerfit"] .tv-levels { border-radius: 6px; }

/* ---------------------------------------------------------------- the desktop dashboard (training_desk.MEDIA) */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine),
       (min-width: 744px) and (min-height: 600px) and (pointer: coarse),
       (min-width: 744px) and (max-width: 1099.98px) and (min-height: 600px) and (any-pointer: coarse) {
  /* (the phone's head gives way to the dashboard's own: no band there, a black card instead) */
  [data-look="hillerfit"] .tr-page.trd > :is(.tr-head, :has(~ .tr-week), .tr-week) { position: static; margin-bottom: 0; }
  [data-look="hillerfit"] .tr-page.trd > :is(.tr-head, :has(~ .tr-week), .tr-week)::before,
  [data-look="hillerfit"] .tr-page.trd > :is(.tr-head, :has(~ .tr-week), .tr-week)::after { content: none; }
  [data-look="hillerfit"] .tr-page.trd > :has(~ .tr-week):not(.trd-head) {
    --bg: var(--hf-p-bg); --surface: var(--hf-p-surface); --surface-2: var(--hf-p-surface-2); --hover: var(--hf-p-hover);
    --line: var(--hf-p-line); --text: var(--hf-p-text); --text-2: var(--hf-p-text-2); --text-3: var(--hf-p-text-3);
    --accent-soft: var(--hf-p-accent-soft); --accent-text: var(--hf-p-accent-text); --focus: var(--hf-p-focus);
    color-scheme: var(--hf-p-scheme); color: var(--text);
  }
  [data-look="hillerfit"] .tr-page.trd { --trd-panel: var(--surface); }
  [data-look="hillerfit"] .trd-head {
    padding: 20px 24px 16px; border-radius: 10px; background: radial-gradient(120% 160% at 100% 0%, rgba(204, 0, 34, 0.42), rgba(204, 0, 34, 0) 58%), var(--hf-band);
    box-shadow: inset 0 -4px 0 var(--hf-crimson);
  }
  [data-look="hillerfit"] .trd-title { font-size: 50px; line-height: .9; color: #fff; }
  /* (an iPad upright: the links go to a line of their own) */
  @media (max-width: 1099.98px) {
    [data-look="hillerfit"] .trd-links { order: 2; }
  }
  [data-look="hillerfit"] .trd-head .btn, [data-look="hillerfit"] .trd-tracks .chip { border-radius: 6px; }
  [data-look="hillerfit"] .trd-tracks .chip[aria-current="page"] { background: #fff; color: #000; }
  [data-look="hillerfit"] .trd-day { position: relative; isolation: isolate; border-radius: 4px; }
  /* (the bigger italic numbers and tab names keep their boxes' heights: the dashboard's rows fit as before) */
  [data-look="hillerfit"] .trd-day-num { font-family: var(--font-display); font-style: italic; font-weight: 800; font-size: 21px;
    line-height: 18px; }
  [data-look="hillerfit"] .trd-day[aria-current="date"] { background: none; color: #fff; }
  [data-look="hillerfit"] .trd-day[aria-current="date"] .trd-day-num { color: #fff; }
  [data-look="hillerfit"] .trd-day[aria-current="date"]::before {
    content: ""; position: absolute; inset: 0 2px; z-index: -1; border-radius: 4px; background: var(--hf-crimson); transform: skewX(-9deg);
  }
  [data-look="hillerfit"] .trd-day[aria-current="date"].has-parts::after { background: #fff; }
  [data-look="hillerfit"] .trd-day.is-today:not([aria-current]) .trd-day-num { color: #FF5C66; }
  [data-look="hillerfit"] .trd-date { font-size: 24px; letter-spacing: 0.01em; }
  [data-look="hillerfit"] .trm-desk-search input { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; }
  [data-look="hillerfit"] .trm-desk-search input::placeholder { color: #ABABAB; }

  [data-look="hillerfit"] .trd-tile { border-radius: var(--radius); border-color: transparent; box-shadow: var(--hf-card-shadow); }
  [data-look="hillerfit"] .trd-tile-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
  [data-look="hillerfit"] .trd-big { font-family: var(--font-display); font-style: italic; font-size: 52px; line-height: .9; }
  [data-look="hillerfit"] .trd-mid { font-family: var(--font-display); font-style: italic; }
  [data-look="hillerfit"] .trd-tile-board .trd-big { color: var(--accent-text); }
  [data-look="hillerfit"] .trd-sq { border-radius: 3px; }
  [data-look="hillerfit"] .trd-sq.is-done { background: var(--hf-crimson); border-color: var(--hf-crimson); }
  [data-look="hillerfit"] .trd-ring-fill { stroke: var(--hf-crimson); stroke-linecap: butt; }

  [data-look="hillerfit"] .trd > .tr-day { border-radius: 10px; border-color: transparent; box-shadow: var(--hf-card-shadow); }
  [data-look="hillerfit"] .trd .tr-day-head h2 { font-size: 34px; }
  [data-look="hillerfit"] .trd .tr-part { border-radius: 8px; padding: 18px 20px 16px; }
  [data-look="hillerfit"] .trd .tr-part:not(.is-board):not(.is-modified) { box-shadow: inset 0 0 0 1px var(--line); }
  [data-look="hillerfit"] .trd .tr-part.is-board:not(.is-modified) { box-shadow: inset 0 0 0 2px var(--hf-crimson); }
  [data-look="hillerfit"] .trd .tr-part.is-modified { box-shadow: inset 0 0 0 2px var(--tre); }
  [data-look="hillerfit"] .trd .tr-part-title { font-size: 28px; }
  [data-look="hillerfit"] .trd[data-trd-js] .trd-levels { border-radius: 6px; padding: 3px; }
  [data-look="hillerfit"] .trd-level { border-radius: 4px; font-weight: 700; }
  [data-look="hillerfit"] .trd-level[aria-pressed="true"] { background: var(--hf-crimson); color: #fff; }
  [data-look="hillerfit"] .trd-log { border-radius: 6px; background: var(--surface); }
  [data-look="hillerfit"] .trd-log-score { font-family: var(--font-display); font-style: italic; font-size: 20px; }
  [data-look="hillerfit"] .trd-toggle { border-radius: 6px; }

  [data-look="hillerfit"] .trd-panel { border-radius: 10px; border-color: transparent; box-shadow: var(--hf-card-shadow); }
  [data-look="hillerfit"] .trd-panel-title { font-size: 30px; }
  [data-look="hillerfit"] .trd-wb-tab { font-size: 17px; line-height: 19.6px; letter-spacing: 0.03em; }
  [data-look="hillerfit"] .trd-wb-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--hf-crimson); }
  [data-look="hillerfit"] .trd-wb-board .tr-wb-score { font-size: 22px; }
  [data-look="hillerfit"] .trd-wb-board .tr-wb-tabs.is-many .tr-wb-tab { font-size: 16px; padding: 8px 6px; }
  [data-look="hillerfit"] .trd-wb-board .tr-rank { font-size: 21px; }
  [data-look="hillerfit"] .trd-next-item.is-board { border-left-color: var(--hf-crimson); }
  [data-look="hillerfit"] .trd-next-title { font-size: 19px; letter-spacing: 0.01em; }
  [data-look="hillerfit"] .trd-col.is-now .trd-col-bar { background: var(--hf-crimson); }
  [data-look="hillerfit"] .trd-col-bar { border-radius: 2px 2px 0 0; }
}

/* ---------------------------------------------------------------- Windows' high contrast (the look adds no motion of its own) */
@media (forced-colors: active) {
  [data-look="hillerfit"] :is(.tr-page > .tr-crumbs, .tr-page > .tr-head, .tr-page > h1.page-title, .tr-page > :has(~ .tr-week),
                              .tr-page > .tr-week, main > .trn-live)::before,
  [data-look="hillerfit"] :is(.tr-page > .tr-crumbs, .tr-page > .tr-head, .tr-page > h1.page-title, .tr-page > :has(~ .tr-week),
                              .tr-page > .tr-week, main > .trn-live)::after { content: none; }
  [data-look="hillerfit"] :is(.tr-strip-day, .trd-day)[aria-current="date"]::before, [data-look="hillerfit"] .tr-part.is-board::before { display: none; }
  [data-look="hillerfit"] :is(.tr-strip-day, .trd-day)[aria-current="date"] { outline: 2px solid CanvasText; }
  [data-look="hillerfit"] .tr-board-mark { clip-path: none; border: 1px solid CanvasText; }
}