/* ── Tromsø Ultimate hub — shared stylesheet (Stack build, Pixel visual pass 2026-10-10) ─────────────
   Used by /ultimate (hub) and its holding pages (tournaments, glossary, trainings).
   The tournament SIGN-UP page (/ultimate/tournaments/signup) stays standalone with
   its own inline tokens; this file mirrors those tokens so the hub reads as the same
   family (soft-white canvas, Dusk accents, aurora primary CTA, system type).
   Pixel owns the visual pass. Class hooks are listed in the PIXEL HAND-OFF block
   at the bottom. MOBILE-FIRST; desktop is a light enhancement. */

:root {
  /* Neutral — warm stone (same values as the sign-up page) */
  --ink-900: #18160f;
  --ink-800: #28251d;
  --ink-700: #38342a;
  --ink-500: #6b6558;
  --ink-400: #8c867b;
  --ink-300: #aea89e;
  --ink-100: #e4e0d8;
  --ink-050: #f2efea;
  --bg:      #faf8f4;
  --card:    #ffffff;
  --card-border: #e8e1d4;

  /* Accent — Dusk */
  --accent:        #4f6699;
  --accent-strong: #3d5488;
  --accent-text:   #33456b;
  --accent-bg:     #eef1f6;
  --accent-border: #8aa0c4;
  --accent-ring:   rgba(79, 102, 153, 0.14);

  --radius-sm:   8px;
  --radius:      12px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(50, 42, 28, 0.04), 0 3px 10px rgba(50, 42, 28, 0.05);

  /* Spacing scale (8-based, with 4/12 half-steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Layout */
  --gutter:      16px;     /* page side gutter: 16 mobile → 24 tablet → 32 desktop */
  --measure:     640px;    /* sign-up page (standalone CSS) — hub sub-pages moved to 1080 on 2026-10-14 */
  --measure-hub: 1080px;   /* hub content width (Owner decision 2026-10-10) */
  --grid-gap:    24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
}
a { color: var(--accent-text); }

/* Every /ultimate page that loads this sheet uses the hub's 1080 content width (Owner, 2026-10-14).
   (The sign-up page and the rules tool have their own CSS and keep their own widths for now.) */
.uh-wrap {
  max-width: calc(var(--measure-hub) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 28px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* ── Header ── */
.uh-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -10px 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-500);
  text-decoration: none;
}
.uh-back::before { content: "\2190"; transition: transform 0.16s var(--ease-out); }
@media (hover: hover) {
  .uh-back:hover { color: var(--accent-text); }
  .uh-back:hover::before { transform: translateX(-2px); }
}

/* One focus treatment for every interactive element on the hub (Dusk ring,
   offset so it never sits on top of the aurora or a card border). */
.uh-back:focus-visible,
.uh-btn:focus-visible,
.uh-card:focus-visible,
.uh-contact-link:focus-visible,
.uh-social:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.uh-card:focus-visible { border-radius: var(--radius); }
.uh-social:focus-visible { border-radius: var(--radius-pill); }

.uh-title {
  font-size: 1.625rem;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 3px;
}
.uh-sub {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 22px;
}
/* Sub-pages have no .uh-sub line under the title (the back link names the club) */
.uh-back + .uh-title { margin-bottom: 22px; }
.uh-lead {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-700);
  max-width: 60ch;
}

/* ── Sections ── */
.uh-section { margin: 0 0 28px; }
.uh-section-title {
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 10px;
}

/* ── Resource cards (grid grows with the RESOURCES array) ── */
.uh-resources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.uh-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  min-height: 84px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.14s, box-shadow 0.14s;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .uh-card:hover { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-ring); }
}
.uh-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.uh-card-name { font-size: 1.0625rem; font-weight: 650; color: var(--ink-900); }
.uh-card-desc { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-500); }

/* Live vs soon — hierarchy, not labels. A LIVE card is the raised white surface
   with a Dusk chevron (the "you can go here" affordance). A SOON card sits flat
   on the canvas: no fill, no shadow, a softer name — it recedes, and the pill
   says why. Both stay links (soon cards open their holding page). */
.uh-card[data-status="live"] .uh-card-head::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.16s var(--ease-out);
}
@media (hover: hover) {
  .uh-card[data-status="live"]:hover .uh-card-head::after { transform: translateX(3px) rotate(45deg); }
}
.uh-card[data-status="soon"] {
  background: transparent;
  box-shadow: none;
}
.uh-card[data-status="soon"] .uh-card-name { color: var(--ink-700); font-weight: 600; }
@media (hover: hover) {
  .uh-card[data-status="soon"]:hover { background: var(--card); border-color: var(--ink-100); box-shadow: none; }
}

/* Status pill — shown only on not-yet-built resources */
.uh-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  color: var(--ink-500);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Buttons (aurora primary CTA mirrors the sign-up page) ── */
.uh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  font-size: 1.0625rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.uh-btn:active { transform: scale(0.98); }
.uh-btn-block { display: flex; width: 100%; }
.uh-btn-primary {
  background: linear-gradient(100deg,
    #0f5c53 0%, #12795f 15%, #178066 28%, #147d7a 42%,
    #155e8a 57%, #3a3f8f 72%, #5b3f8f 86%, #7a3f7d 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #fff;
  text-shadow: 0 1px 2px rgba(9, 24, 30, 0.28);
  box-shadow: 0 1px 2px rgba(15, 40, 45, 0.14), 0 4px 14px rgba(20, 90, 110, 0.20);
  transition: background-position 0.6s var(--ease-out), transform 0.06s, box-shadow 0.2s;
  animation: uh-aurora-drift 14s ease-in-out infinite alternate;
}
@media (hover: hover) {
  .uh-btn-primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 1px 2px rgba(15, 40, 45, 0.16), 0 6px 20px rgba(20, 90, 110, 0.28);
  }
}
@keyframes uh-aurora-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.uh-cta-row { margin: 0 0 28px; }

/* ── Contact block ── */
.uh-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.uh-contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--ink-050);
}
.uh-contact-row:first-child { border-top: none; }
.uh-contact-name { font-size: 1rem; font-weight: 600; color: var(--ink-900); }
.uh-contact-role { margin-left: 3px; font-size: 0.875rem; font-weight: 500; color: var(--ink-500); }
.uh-contact-link {
  font-size: 1rem;
  font-weight: 550;
  color: var(--accent-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  /* Grow the hit area to 44px+ tall without moving the text */
  display: inline-block;
  max-width: 100%;
  padding: 13px 0;
  margin: -13px 0;
}
@media (hover: hover) { .uh-contact-link:hover { text-decoration: underline; } }

/* ── Socials ── */
.uh-socials { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uh-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.uh-social svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.uh-social { transition: border-color 0.14s, color 0.14s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .uh-social:hover { border-color: var(--accent-border); color: var(--accent-text); } }

/* ── Placeholder / coming-soon blocks ── */
.uh-soon {
  padding: 22px 16px;
  /* Flat on the canvas, like a soon card — placeholders recede; only live things are raised */
  background: transparent;
  border: 1px dashed var(--ink-100);
  border-radius: var(--radius);
  text-align: center;
}
.uh-soon .uh-pill { margin-bottom: 8px; }
.uh-soon-text { margin: 0 auto; max-width: 44ch; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-500); }
/* Holding pages: the soon block is the page — give it room (a calm placeholder band at 1080) */
.uh-wrap > .uh-soon { padding: 36px 20px; }
@media (min-width: 768px) {
  .uh-wrap > .uh-soon { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  /* A block button across 1080px reads as a banner, not a button: natural width from tablet up */
  .uh-wrap > .uh-cta-row .uh-btn-block { display: inline-flex; width: auto; min-width: 320px; }
}
.uh-cta-row + .uh-soon { margin-top: -6px; }

/* ── HUB LAYOUT (Pixel, from the Owner's sketches 2026-10-10/11) ──────────────────
   DOM order = the Owner's MOBILE sketch: header → intro → reel → cards → calendar → pills.
   <768  centred stack (his mobile frame): 144 logo over centred title; 2×2 cards; pills last, one row.
   ≥768  header lockup left + pills stacked top-right (his desktop frame);
         intro + card panel left, square reel right; calendar full width.
   Holding pages keep the 640 column (.uh-wrap without --hub). */
.uh-wrap--hub {
  max-width: calc(var(--measure-hub) + 2 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "header" "main" "calendar" "socials";
}
.uh-hub-header   { grid-area: header; margin: 0 0 var(--space-6); }
.uh-hub-main     { grid-area: main; }
.uh-hub-calendar { grid-area: calendar; }
.uh-wrap--hub > .uh-socials { grid-area: socials; }

/* Header lockup — logo + title + subtitle read as one mark */
.uh-hub-titles { --logo: 144px; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; min-width: 0; }
.uh-hub-titletext { min-width: 0; }
.uh-wrap--hub .uh-title { font-size: clamp(2rem, 9vw, 2.25rem); margin: 0 0 var(--space-1); }
/* Subtitle is a sentence now (Owner copy) — sentence case, quieter weight, not tracked caps */
.uh-wrap--hub .uh-sub { font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.35; color: var(--ink-500); margin: 0; }

/* Logo slot — one square box for square, round or odd-shaped logos (object-fit: contain) */
.uh-logo { flex: none; width: var(--logo); height: var(--logo); }
.uh-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Filled: the asset is a pre-cut white disc; the radius + white keep it circular even if a square
   file is swapped in, and a hairline ring separates white-on-soft-white */
.uh-logo:not(.is-empty) img { border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--card-border); }
/* Empty: a quiet disc-in-a-tile mark — reads as "logo goes here", not as a broken image */
.uh-logo.is-empty {
  display: grid; place-items: center;
  border-radius: 28%;
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
}
.uh-logo.is-empty::after {
  content: "";
  width: 44%; height: 44%;
  border-radius: 50%;
  border: 3px solid var(--ink-300);
}

/* Main block: intro → reel → cards on phones */
.uh-hub-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "about" "reel" "links";
  gap: var(--space-5);
  margin: 0 0 var(--space-7);
}
.uh-about { grid-area: about; min-width: 0; display: flex; flex-direction: column; }
.uh-reel  { grid-area: reel; min-width: 0; }
.uh-links { grid-area: links; min-width: 0; }

.uh-about p { margin: 0 0 0.75em; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-700); max-width: 60ch; }
.uh-about p:last-child { margin-bottom: 0; }

/* Placeholders (intro, reel) share the flat dashed "soon" surface */
.uh-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.uh-about .uh-placeholder { flex: 1 1 auto; min-height: 112px; }
.uh-reel.is-empty .uh-placeholder { aspect-ratio: 1 / 1; }

/* Photo reel — native sideways scroll with snap, no autoplay; square frames (his sketch) */
.uh-reel-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius);
}
.uh-reel-track::-webkit-scrollbar { display: none; }
.uh-reel-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.uh-reel-item { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--ink-050); }
.uh-reel-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Card group — a soft Dusk-tinted panel sets the four "places to go" apart from the
   neutral intro / reel / calendar around them. Tint (not a rule or a heading) because the
   cards are self-evident links; the panel only has to say "these belong together". */
.uh-links {
  padding: var(--space-3);
  background: var(--accent-bg);
  border-radius: calc(var(--radius) + 4px);
}
.uh-links .uh-resources { gap: var(--space-3); }
.uh-links .uh-card[data-status="soon"] { border-color: rgba(79, 102, 153, 0.20); }
@media (hover: hover) {
  .uh-links .uh-card[data-status="soon"]:hover { border-color: var(--accent-border); background: rgba(255, 255, 255, 0.6); }
}

/* Equal cards: identical columns + identical rows (grid-auto-rows: 1fr → every row as tall as
   the tallest card). Same rhythm in every card: name and description top-aligned at identical
   offsets; the "Coming soon" pill drops to the bottom edge, so live and soon cards line up. */
.uh-wrap--hub .uh-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.uh-wrap--hub .uh-card { position: relative; justify-content: flex-start; min-height: 0; padding: var(--space-4) var(--space-4) var(--space-4); }
.uh-wrap--hub .uh-card-head { display: contents; }
.uh-wrap--hub .uh-card-name { padding-right: 22px; }
.uh-wrap--hub .uh-card-desc { order: 1; }
.uh-wrap--hub .uh-card .uh-pill { order: 2; align-self: flex-start; margin-top: auto; }
.uh-wrap--hub .uh-card[data-status="soon"] .uh-card-desc { margin-bottom: var(--space-3); }
.uh-links .uh-card .uh-pill { background: var(--card); }
.uh-wrap--hub .uh-card-name { font-size: 1rem; }
.uh-wrap--hub .uh-card-desc { font-size: 0.875rem; }
/* Live chevron pinned top-right so it never shifts the name/description rhythm */
.uh-wrap--hub .uh-card[data-status="live"] .uh-card-head::after { position: absolute; top: 22px; right: 18px; margin: 0; }

/* Calendar — centred heading on phones (his mobile frame) */
.uh-hub-calendar { margin-bottom: var(--space-7); }
.uh-hub-calendar .uh-section-title { text-align: center; }
.uh-hub-calendar .uh-soon { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Pills — three equal buttons in one row at the bottom (phones) */
.uh-wrap--hub > .uh-socials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.uh-wrap--hub .uh-social { justify-content: center; gap: 6px; padding: 0 var(--space-2); font-size: 0.875rem; width: 100%; }
@media (max-width: 359px) {
  /* Very narrow phones: icon-only pills (name stays as the accessible label) */
  .uh-wrap--hub .uh-card { padding: var(--space-3); }
  .uh-wrap--hub .uh-card .uh-pill { padding: 3px 7px; letter-spacing: 0.03em; }
  .uh-wrap--hub .uh-social-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Tablet + desktop — the sketch's desktop composition */
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .uh-wrap--hub {
    padding-top: var(--space-7);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "header socials" "main main" "calendar calendar";
    column-gap: var(--space-5);
  }
  .uh-hub-header { margin-bottom: var(--space-7); align-self: center; }
  .uh-hub-titles { --logo: 144px; flex-direction: row; text-align: left; gap: var(--space-5); }
  .uh-wrap--hub .uh-title { font-size: 2.75rem; letter-spacing: -0.025em; }
  .uh-wrap--hub .uh-sub { font-size: 1.125rem; }

  /* Pills stacked, equal width (his 104×32 trio), top-right */
  .uh-wrap--hub > .uh-socials { grid-template-columns: max-content; grid-auto-rows: auto; align-self: start; justify-self: end; }
  .uh-wrap--hub .uh-social { justify-content: flex-start; padding: 0 var(--space-4); font-size: 0.9375rem; gap: 8px; }

  .uh-hub-calendar .uh-section-title { text-align: left; }

  /* 12-col: intro over card panel in 1–7, square reel in 8–12; intro takes the slack so the
     panel's bottom edge meets the reel's bottom edge */
  .uh-hub-main {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    grid-template-areas:
      "about about about about about about about reel reel reel reel reel"
      "links links links links links links links reel reel reel reel reel";
    column-gap: var(--grid-gap);
    row-gap: var(--space-5);
  }
  .uh-reel { align-self: start; }
}
@media (min-width: 960px) {
  .uh-wrap--hub { padding-top: var(--space-8); }
  .uh-hub-titles { --logo: 192px; gap: var(--space-6); }
  .uh-wrap--hub .uh-title { font-size: 4rem; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: var(--space-2); }
  .uh-wrap--hub .uh-sub { font-size: 1.375rem; }
  .uh-hub-header { margin-bottom: var(--space-8); }

  .uh-hub-main { margin-bottom: var(--space-8); }
  /* Empty intro goes compact (pill + line side by side) and yields its slack, so the card
     panel's bottom meets the reel's bottom. Real intro text replaces it entirely. */
  .uh-about .uh-placeholder { min-height: 64px; flex-direction: row; gap: var(--space-3); padding: var(--space-4); }
  .uh-about .uh-placeholder .uh-pill { margin-bottom: 0; }
  .uh-hub-calendar { margin-bottom: 0; }
  .uh-hub-calendar .uh-soon { min-height: 400px; }
}

/* ── Desktop enhancement ── */
@media (min-width: 600px) {
  .uh-wrap { padding-top: 44px; }
  .uh-title { font-size: 2rem; }
  .uh-resources { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  /* Sub-pages scale with the wider page (the hub's own header is set in the HUB LAYOUT block) */
  .uh-wrap:not(.uh-wrap--hub) { padding-top: var(--space-7); }
  .uh-title { font-size: 2.5rem; letter-spacing: -0.025em; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .uh-btn:active { transform: none; }
  .uh-btn-primary { animation: none; background-position: 30% 50%; }
  .uh-card[data-status="live"] .uh-card-head::after { transform: rotate(45deg) !important; }
}

/* ── Reel playback (Stack, 2026-10-11) — functional layer; Pixel owns the visual review ──
   Everything here is overlaid INSIDE .uh-reel (absolute), so the square reel's size and the
   page layout are unchanged. .uh-reel-intro = the one-time video (or poster under reduced
   motion) over the photo track; .is-leaving crossfades it away. .is-wrapping = soft fade when
   the photo loop wraps back to the first photo. Prev/next show on hover/focus (pointer devices);
   touch uses swipe. .uh-reel-progress = thin position bar, hidden while the intro shows. */
.uh-reel { position: relative; }
.uh-reel-track { transition: opacity 0.35s var(--ease-out); }
.uh-reel-track.is-wrapping { opacity: 0; }
.uh-reel-intro {
  position: absolute; inset: 0; z-index: 2;
  border-radius: var(--radius); overflow: hidden;
  background: var(--ink-050) center / cover no-repeat;
  pointer-events: none;            /* swipes/taps reach the track underneath → hand-off */
  transition: opacity 0.8s ease-in-out;   /* Pixel: symmetric ease reads calmer for a crossfade (duration = JS leaveMs) */
}
.uh-reel-intro.is-leaving { opacity: 0; }
.uh-reel-intro video, .uh-reel-intro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uh-reel-nav {
  position: absolute; top: 50%; z-index: 3;
  width: 44px; height: 44px; margin-top: -22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.82); color: var(--ink-800);
  box-shadow: 0 1px 2px rgba(20, 18, 12, 0.10), 0 4px 14px rgba(20, 18, 12, 0.14);
  cursor: pointer; opacity: 0; transition: opacity 0.3s var(--ease-out), background-color 0.15s;
}
.uh-reel-nav svg { width: 18px; height: 18px; }
.uh-reel-prev { left: 12px; }
.uh-reel-next { right: 12px; }
@media (hover: hover) {
  .uh-reel:hover .uh-reel-nav { opacity: 1; }
  .uh-reel-nav:hover { background: #fff; }
}
.uh-reel:focus-within .uh-reel-nav { opacity: 1; }
.uh-reel-nav:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: none) { .uh-reel-nav { display: none; } }
.uh-reel-progress {
  /* Dark translucent track + white fill: legible on snow and sky as well as on grass */
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 3; height: 3px;
  border-radius: 2px; overflow: hidden; background: rgba(12, 16, 20, 0.28);
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  pointer-events: none; transition: opacity 0.4s var(--ease-out);
}
.uh-reel-progress span { display: block; height: 100%; width: 0; background: rgba(255, 255, 255, 0.95); border-radius: inherit; transition: width 0.6s var(--ease-out); }
.uh-reel.has-intro .uh-reel-progress { opacity: 0; }

/* ── Club calendar (Stack, 2026-10-11) — functional layer; Pixel owns the visual review ──
   Month grid Mon→Sun. Day cells with entries are one button (whole cell = tap target) that
   opens .uh-cal-pop. Chips: data-kind="training|event|tournament"; tournaments also carry
   data-status="attending|maybe|tbd". .is-tourney = a tournament day (stand-out tint).
   Phones show short labels only (time / name / status hidden); the popover has the details. */
.uh-cal {
  --cal-train: #33456b;  --cal-train-bg: #eef1f6;
  --cal-event: #6b3f7d;  --cal-event-bg: #f3ebf4;
  --cal-tour: #0f6a5f;   --cal-tour-bg: #d3ebe5;  --cal-tour-day: #e6f4ef;  --cal-tour-line: #8ccabd;
  position: relative;
}
.uh-cal-bar { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); flex-wrap: wrap; }
.uh-cal-nav {
  width: 44px; height: 44px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-700); cursor: pointer;
}
.uh-cal-nav svg { width: 18px; height: 18px; }
.uh-cal-nav:disabled { opacity: 0.35; cursor: default; }
.uh-cal-month {
  /* appearance:none so WebKit honours the 44px height (native selects ignore min-height there) */
  -webkit-appearance: none; appearance: none;
  height: 44px; padding: 0 36px 0 var(--space-3); flex: 0 1 auto; min-width: 0;
  border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%236b6558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center / 16px no-repeat;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink-900); cursor: pointer;
}
.uh-cal-sub {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-2);
  font-size: 0.875rem; font-weight: 600; color: var(--ink-500); text-decoration: none;
}
.uh-cal-sub svg { width: 18px; height: 18px; }
@media (hover: hover) { .uh-cal-sub:hover, .uh-cal-nav:not(:disabled):hover { color: var(--accent-text); } }
.uh-cal-nav:focus-visible, .uh-cal-month:focus-visible, .uh-cal-sub:focus-visible, .uh-cal-day:focus-visible, .uh-cal-pop-close:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.uh-cal-dow, .uh-cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.uh-cal-dow span { padding: 0 0 6px; text-align: center; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-400); }
.uh-cal-grid { border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.uh-cal-week + .uh-cal-week { border-top: 1px solid var(--ink-050); }
.uh-cal-cell { position: relative; min-width: 0; min-height: 60px; border-left: 1px solid var(--ink-050); }
.uh-cal-cell:first-child { border-left: 0; }
.uh-cal-cell.is-out { background: #fcfbf9; }
.uh-cal-cell.is-out .uh-cal-num { color: var(--ink-300); }
.uh-cal-cell.is-tourney { background: var(--cal-tour-day); }
.uh-cal-num { display: block; padding: 6px 6px 2px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-700); font-variant-numeric: tabular-nums; }
.uh-cal-cell.is-today .uh-cal-num { color: var(--accent-strong); }
.uh-cal-cell.is-today .uh-cal-num::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.uh-cal-day {
  /* flex column + top alignment: buttons centre their content vertically by default */
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
  width: 100%; height: 100%; min-height: 60px; padding: 0 0 4px; margin: 0;
  border: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .uh-cal-day:hover { background: rgba(79, 102, 153, 0.05); } }
.uh-cal-day[aria-expanded="true"] { background: rgba(79, 102, 153, 0.08); }
.uh-cal-entries { display: flex; flex-direction: column; gap: 2px; padding: 0 3px; }
.uh-cal-chip {
  display: flex; align-items: baseline; gap: 4px; min-width: 0; overflow: hidden;
  padding: 2px 4px; border-radius: 4px; font-size: 0.625rem; font-weight: 600; line-height: 1.25; white-space: nowrap;
  background: var(--cal-train-bg); color: var(--cal-train);
}
.uh-cal-chip > span { overflow: hidden; text-overflow: ellipsis; }
.uh-cal-chip[data-kind="event"] { background: var(--cal-event-bg); color: var(--cal-event); }
.uh-cal-chip[data-kind="tournament"] { background: var(--cal-tour-bg); color: var(--cal-tour); border: 1px solid transparent; }
.uh-cal-chip[data-kind="tournament"][data-status="attending"] { background: var(--cal-tour); color: #fff; }
.uh-cal-chip[data-kind="tournament"][data-status="maybe"] { border: 1px dashed var(--cal-tour); }
.uh-cal-chip[data-kind="tournament"][data-status="tbd"] { background: #fff; border: 1px dotted var(--cal-tour); color: var(--cal-tour); }
.uh-cal-tag { flex: none; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.uh-cal-tag-short { display: none; }
.uh-cal-chip-time, .uh-cal-chip-status, .uh-cal-chip[data-kind="tournament"] .uh-cal-chip-name { display: none; }
.uh-cal-chip-time { font-variant-numeric: tabular-nums; opacity: 0.85; }
.uh-cal-more { font-size: 0.625rem; color: var(--ink-500); padding: 0 4px; }

/* ── Tournament bars (Pixel, 2026-10-11) ────────────────────────────────────────
   One bar per tournament per week, spanning its days (always Sat+Sun in practice), as ONE
   button that opens the popover. Positioned over the week row: --c = start column (0–6),
   --s = days spanned, --lane = stack index when two tournaments share a weekend.
   The button is a 44px-tall hit area; the visible bar (.uh-cal-tbar-fill) sits at its top.
   STATUS (one stand-out family — the hub's aurora teal, deliberately separate from the
   sign-up page's court-type colours, so colour never means two things):
     attending = solid static aurora fill, white text → "confirmed" at a glance
     maybe     = pale teal tint + dashed teal edge → softer
     tbd       = white + dotted teal edge → softest
   Bars clipped by the month edge drop their rounded end and show a ‹ / › continuation cue. */
.uh-cal { --tbar-top: 24px; --tbar-slot: 44px; --tbar-h: 22px; }
.uh-cal-week { position: relative; }
.uh-cal-week.has-tbar .uh-cal-cell { min-height: calc(var(--tbar-top) + var(--lanes) * var(--tbar-slot)); }
.uh-cal-week.has-tbar .uh-cal-cell.is-tourney .uh-cal-entries { margin-top: calc(var(--lanes) * var(--tbar-slot)); }
.uh-cal-day.uh-cal-tbar {
  position: absolute; z-index: 1;
  top: calc(var(--tbar-top) + var(--lane) * var(--tbar-slot));
  left: calc(var(--c) * 100% / 7);
  width: calc(var(--s) * 100% / 7);
  height: var(--tbar-slot); min-height: 0;
  padding: 0 3px; flex-direction: row; align-items: flex-start;
  background: transparent;
}
.uh-cal-day.uh-cal-tbar:hover, .uh-cal-day.uh-cal-tbar[aria-expanded="true"] { background: transparent; }
.uh-cal-day.uh-cal-tbar:focus-visible { outline: none; }
.uh-cal-day.uh-cal-tbar:focus-visible .uh-cal-tbar-fill { outline: 2px solid var(--accent); outline-offset: 2px; }
.uh-cal-tbar[data-cont~="r"], .uh-cal-tbar[data-cont="lr"] { padding-right: 0; }
.uh-cal-tbar[data-cont="l"], .uh-cal-tbar[data-cont="lr"] { padding-left: 0; }

.uh-cal-tbar-fill {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: var(--tbar-h); min-width: 0; padding: 0 6px;
  border: 1px solid transparent; border-radius: 6px;
  font-size: 0.625rem; font-weight: 650; line-height: 1; white-space: nowrap; overflow: hidden;
  color: var(--cal-tour);
  transition: box-shadow 0.15s var(--ease-out);
}
.uh-cal-tbar-fill[data-status="attending"] {
  background: linear-gradient(100deg, #0f5c53 0%, #12795f 30%, #147d7a 55%, #155e8a 80%, #3a3f8f 100%);
  color: #fff; text-shadow: 0 1px 1px rgba(9, 24, 30, 0.25);
}
.uh-cal-tbar-fill[data-status="maybe"] { background: var(--cal-tour-bg); border: 1px dashed #2f8a7c; color: #0d5a50; }
.uh-cal-tbar-fill[data-status="tbd"]   { background: #fff; border: 1px dotted #5fa596; color: #3f6b64; }
@media (hover: hover) { .uh-cal-tbar:hover .uh-cal-tbar-fill { box-shadow: 0 0 0 3px rgba(15, 106, 95, 0.16); } }
.uh-cal-tbar[aria-expanded="true"] .uh-cal-tbar-fill { box-shadow: 0 0 0 3px rgba(15, 106, 95, 0.24); }
.uh-cal-tbar-tag { flex: none; }
.uh-cal-tbar-name, .uh-cal-tbar-status { display: none; }
.uh-cal-tbar-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Month-edge continuation: squared end + chevron */
.uh-cal-tbar[data-cont~="r"] .uh-cal-tbar-fill, .uh-cal-tbar[data-cont="lr"] .uh-cal-tbar-fill { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.uh-cal-tbar[data-cont="l"] .uh-cal-tbar-fill, .uh-cal-tbar[data-cont="lr"] .uh-cal-tbar-fill { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.uh-cal-tbar[data-cont="r"] .uh-cal-tbar-fill::after, .uh-cal-tbar[data-cont="lr"] .uh-cal-tbar-fill::after { content: "\203A"; margin-left: auto; font-size: 0.875rem; opacity: 0.8; }
.uh-cal-tbar[data-cont="l"] .uh-cal-tbar-fill::before, .uh-cal-tbar[data-cont="lr"] .uh-cal-tbar-fill::before { content: "\2039"; margin-right: auto; font-size: 0.875rem; opacity: 0.8; }
/* A one-day segment on a phone (~41–51px): "Tournament" can't fit, so the bar keeps its
   colour + cue and the word moves to the popover / aria-label */
@media (max-width: 599px) {
  .uh-cal-tbar[style*="--s:1;"] .uh-cal-tbar-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.uh-cal-legend .uh-cal-tbar-fill { display: inline-flex; width: auto; height: auto; padding: 4px 8px; font-size: 0.6875rem; font-weight: 600; }
.uh-cal-status { margin: var(--space-2) 0 0; font-size: 0.8125rem; color: var(--ink-500); min-height: 1em; }
.uh-cal-status:empty { display: none; }
.uh-cal-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.uh-cal-legend .uh-cal-chip { font-size: 0.6875rem; padding: 3px 8px; }
.uh-cal-legend-label { align-self: center; margin-left: var(--space-2); font-size: 0.6875rem; font-weight: 650; color: var(--ink-500); }

/* Popover — anchored under the day on wider screens; bottom sheet on phones */
.uh-cal-pop {
  position: absolute; z-index: 20; width: min(320px, 100%);
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(50, 42, 28, 0.16), 0 2px 6px rgba(50, 42, 28, 0.08);
  padding: var(--space-3) var(--space-4) var(--space-4);
}
.uh-cal-pop[hidden] { display: none; }
.uh-cal-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.uh-cal-pop-date { margin: 0; font-size: 0.875rem; font-weight: 650; color: var(--ink-900); }
.uh-cal-pop-close {
  width: 44px; height: 44px; margin: -8px -12px -8px 0; flex: none; border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1; color: var(--ink-500); cursor: pointer; border-radius: var(--radius-sm);
}
.uh-cal-pop-item + .uh-cal-pop-item { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--ink-050); }
.uh-cal-pop-tags { display: flex; align-items: center; gap: 6px; }
.uh-cal-pop-item .uh-cal-tag { padding: 2px 6px; border-radius: 4px; background: var(--cal-train-bg); color: var(--cal-train); }
.uh-cal-pop-item[data-kind="event"] .uh-cal-tag { background: var(--cal-event-bg); color: var(--cal-event); }
.uh-cal-pop-item[data-kind="tournament"] .uh-cal-tag { background: var(--cal-tour); color: #fff; }
.uh-cal-pop-status { font-size: 0.75rem; font-weight: 700; color: var(--cal-tour); padding: 1px 7px; border-radius: 999px; border: 1px solid var(--cal-tour); }
.uh-cal-pop-status[data-status="attending"] { background: var(--cal-tour); border-color: var(--cal-tour); color: #fff; }
.uh-cal-pop-status[data-status="maybe"] { border-style: dashed; }
.uh-cal-pop-status[data-status="tbd"] { border-style: dotted; }
.uh-cal-pop-title { margin: 6px 0 4px; font-size: 1rem; font-weight: 650; color: var(--ink-900); }
.uh-cal-pop-meta { list-style: none; margin: 0; padding: 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-700); }
.uh-cal-pop-note { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--ink-700); white-space: pre-line; }
@media (max-width: 599px) {
  .uh-cal-pop { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
                width: auto; max-height: 60vh; overflow-y: auto; }
  .uh-cal-bar .uh-cal-month { flex: 1 1 auto; }
  .uh-cal-sub span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .uh-cal-sub { margin-left: 0; width: 44px; justify-content: center; padding: 0; }
  /* Phone cells are ~50px wide: 9px labels. Tournaments are spanning bars (see above). */
  .uh-cal-entries { padding: 0 2px; }
  .uh-cal-chip { padding: 2px 3px; font-size: 0.5625rem; letter-spacing: -0.01em; }
  .uh-cal-chip .uh-cal-tag { font-size: inherit; font-weight: 600; letter-spacing: inherit; text-transform: none; }
  .uh-cal-entries .uh-cal-tag-long { display: none; }
  .uh-cal-entries .uh-cal-tag-short { display: inline; }
}
/* Wider screens: room for times, tournament names and status in the cell */
@media (min-width: 768px) {
  .uh-cal-cell, .uh-cal-day { min-height: 92px; }
  .uh-cal-entries { gap: 3px; padding: 0 5px; }
  .uh-cal-chip { font-size: 0.75rem; padding: 3px 6px; }
  .uh-cal-chip-time { display: inline; }
  .uh-cal-chip[data-kind="tournament"] { flex-wrap: wrap; white-space: normal; row-gap: 1px; }
  .uh-cal-chip[data-kind="tournament"] .uh-cal-chip-name { display: block; flex: 1 1 100%; white-space: nowrap; }
  .uh-cal-chip[data-kind="tournament"] .uh-cal-chip-status { display: inline; font-weight: 500; opacity: 0.9; }
  .uh-cal-chip[data-kind="tournament"] .uh-cal-chip-status { order: 1; }
  .uh-cal-chip[data-kind="tournament"] .uh-cal-chip-name { order: 2; }

  .uh-cal { --tbar-top: 28px; --tbar-h: 26px; }
  .uh-cal-tbar-fill { justify-content: flex-start; padding: 0 10px; gap: 8px; font-size: 0.75rem; }
  .uh-cal-tbar-tag { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
  .uh-cal-tbar-name { display: block; font-weight: 650; }
  .uh-cal-tbar-status { display: block; flex: none; margin-left: auto; font-weight: 500; opacity: 0.92; }
  .uh-cal-tbar[data-cont~="r"] .uh-cal-tbar-status, .uh-cal-tbar[data-cont="lr"] .uh-cal-tbar-status { margin-left: 0; }
  /* One-day segment (month-edge clip): room for the name only — the cue + colour say "tournament" */
  .uh-cal-tbar[style*="--s:1;"] .uh-cal-tbar-tag, .uh-cal-tbar[style*="--s:1;"] .uh-cal-tbar-status { display: none; }
}

/* ── PIXEL HAND-OFF — class hooks ───────────────────────────────────────────────
   .uh-wrap                        page column
   .uh-back                        "← Tromsø Ultimate" link on sub-pages
   .uh-title / .uh-sub / .uh-lead  header block
   .uh-section / .uh-section-title section wrapper + small caps heading
   .uh-resources > li > a.uh-card  resource grid; card has data-status="live|soon"
                                   live = raised white + Dusk chevron; soon = flat, recedes
                                   odd last card spans both columns on desktop
   .uh-card-head / .uh-card-name / .uh-card-desc
   .uh-pill                        "Coming soon" pill (soon cards + holding pages)
   .uh-btn.uh-btn-primary          aurora CTA (sign-up link)
   .uh-contact > .uh-contact-row   club email + coach rows (.uh-contact-name/-role/-link)
   .uh-socials > li > a.uh-social  social pills, data-network="facebook|instagram"
   .uh-soon / .uh-soon-text        dashed "coming soon" block (calendar, holding pages)
   HUB LAYOUT (index only): .uh-wrap--hub grid areas header/main/calendar/socials.
   .uh-hub-header > .uh-hub-titles (.uh-logo[.is-empty] + .uh-hub-titletext);
   .uh-hub-main > .uh-about, .uh-reel, nav.uh-links (tinted card panel) > .uh-resources;
   .uh-hub-calendar; .uh-socials (last in DOM; top-right ≥768). Email pill = data-network="email".
   .uh-placeholder = empty intro/reel. Cards are equal-size (grid-auto-rows: 1fr).
   CALENDAR (Stack): .uh-cal > .uh-cal-bar (.uh-cal-nav, .uh-cal-month, .uh-cal-sub), .uh-cal-dow, .uh-cal-grid >
   .uh-cal-week > .uh-cal-cell[.is-out|.is-today|.is-tourney] > button.uh-cal-day > .uh-cal-num + .uh-cal-entries >
   .uh-cal-chip[data-kind][data-status] (.uh-cal-tag, .uh-cal-chip-time/-name/-status); .uh-cal-legend; .uh-cal-pop (popover).
   REEL PLAYBACK (Stack): .uh-reel.has-intro, .uh-reel-intro[.is-leaving] (video/poster),
   .uh-reel-track.is-wrapping, .uh-reel-nav.uh-reel-prev/.uh-reel-next, .uh-reel-progress > span.
*/

/* ── Trainings page (Stack build 2026-10-14; Pixel rebuild from the Owner's layout-editor export, 2026-10-14) ──
   /ultimate/trainings at the hub's 1080 width, on the hub's 12-col / 24px grid. Everything renders from
   PAGE in the page's <script>; #uh-tr is display:contents, so its blocks are items of this page grid.
   DOM (= phone reading order): back · logo + title · coaches pill · when (times, place, what to bring) · map ·
   line + "Join a training" · photo · What is Ultimate? · Ready to join the team? · TSI card · Kraft card.
   ≥768 (6 | 6 on every band, so all three bands share one centre line — Owner's editor export):
     when + line + button        │ map (fills the band)
     photo (fills the band)      │ What is Ultimate? / Ready to join the team?
     TSI card                    │ Kraft card            (equal height, link pinned to the bottom)
   PIXEL DECISIONS:
   - ≥960 the band-1 text hangs under the title TEXT, not the logo (Owner moved it there in the editor):
     its left margin = logo + title gap, so the two left edges match exactly. Below 960 it sits on the grid edge.
   - Logo: decorative inline mark left of the <h1> text (alt=""); 40 / 48 / 72px. Title 3.5rem ≥960 (Owner).
   - Coaches link = a utility, not an action. ≥600: title row, top-right. <600 the logo + title leave no
     room, so it moves up to the back-link row, right (phone nav-bar pattern). <375: under the title.
   - Membership cards = the hub's raised white card family; partner logos sit in a fixed-height slot so both
     titles start on the same line; the one link per card is pinned to the bottom.
   - OSM credit (REQUIRED by the ODbL licence — keep it visible and linked) sits tight under the map's
     bottom-right corner; its 44px hit area hangs into the space below, never over the map. */

/* ── Page grid ── */
.uh-wrap--trainings {
  --tr-logo: 40px;        /* inline logo next to the title */
  --tr-title-gap: var(--space-3);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: start;
}
.uh-wrap--trainings > *,
.uh-wrap--trainings > #uh-tr > * { grid-column: 1 / -1; min-width: 0; }
.uh-wrap--trainings > #uh-tr { display: contents; }
.uh-wrap--trainings > .uh-back { grid-row: 1; justify-self: start; }
/* Title and pill share row 2; equal bottom margins keep them centred on each other */
.uh-wrap--trainings > .uh-title { grid-row: 2; grid-column: 1; align-self: center; margin-bottom: var(--space-6); }
.uh-wrap--trainings > #uh-tr > .uh-tr-coaches { grid-row: 2; grid-column: 2; align-self: center; justify-self: end; margin: 0 0 var(--space-6); }
/* Logo + title on one line */
.uh-tr-title { display: flex; align-items: center; gap: var(--tr-title-gap); }
.uh-tr-logo {
  flex: none; display: block; width: var(--tr-logo); height: var(--tr-logo);
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--card-border);
}
@media (max-width: 599px) {
  /* Phones: logo + title fill the row → the pill moves up beside the back link (nav-bar pattern) */
  .uh-wrap--trainings > .uh-title { grid-column: 1 / -1; }
  .uh-wrap--trainings > #uh-tr > .uh-tr-coaches { grid-row: 1; margin: -10px 0 6px; }
  .uh-tr-coaches .uh-btn-secondary { padding: 0 12px; font-size: 0.8125rem; }
}
@media (max-width: 374px) {
  .uh-wrap--trainings > .uh-title { margin-bottom: var(--space-3); }
  .uh-wrap--trainings > #uh-tr > .uh-tr-coaches { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin: 0 0 var(--space-6); }
}
@media (min-width: 600px) { .uh-wrap--trainings { --tr-logo: 48px; } }
@media (min-width: 960px) {
  .uh-wrap--trainings { --tr-logo: 72px; --tr-title-gap: var(--space-4); }
  /* Owner (editor export): a bigger title on desktop — 56px, between the sub-pages' 40 and the hub's 64 */
  .uh-wrap--trainings > .uh-title { font-size: 3.5rem; line-height: 1.1; letter-spacing: -0.03em; }
}

/* ── Coaches pill (hub utility-pill family) ── */
.uh-btn svg { width: 16px; height: 16px; flex: none; }
.uh-btn-secondary {
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--card);
  color: var(--ink-700);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: border-color 0.14s, color 0.14s;
}
.uh-btn-secondary svg { color: var(--ink-500); transition: color 0.14s; }
@media (hover: hover) {
  .uh-btn-secondary:hover { border-color: var(--accent-border); color: var(--accent-text); }
  .uh-btn-secondary:hover svg { color: currentColor; }
}
.uh-btn-secondary:focus-visible { border-radius: var(--radius-pill); }

/* ── Sections + type. Phones: 40 between blocks; heading → body 12. ── */
.uh-tr-section { margin-bottom: calc(var(--space-6) + var(--space-2)); }
.uh-tr-section .uh-section-title {
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
}
.uh-tr-text { margin: 0 0 var(--space-3); font-size: 1rem; line-height: 1.6; color: var(--ink-700); max-width: 62ch; }
.uh-tr-text:last-child { margin-bottom: 0; }
.uh-tr-list { margin: 0 0 var(--space-3); padding-left: 1.25em; font-size: 1rem; line-height: 1.6; color: var(--ink-700); }
.uh-tr-list li { padding-left: 2px; }
.uh-tr-list li + li { margin-top: 6px; }
.uh-tr-list li::marker { color: var(--ink-300); }
.uh-tr-list:last-child { margin-bottom: 0; }
.uh-tr-list strong, .uh-tr-text strong { font-weight: 650; color: var(--ink-900); }

/* Links: 44px tall hit area without changing the text size */
.uh-tr-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: var(--accent-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  transition: text-decoration-color 0.14s;
}
@media (hover: hover) { .uh-tr-link:hover { text-decoration-color: currentColor; } }
.uh-tr-ext { font-size: 0.85em; text-decoration: none; }
.uh-tr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uh-tr-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

/* ── When & where: compact fact lines with quiet icons, not a card ── */
.uh-wrap--trainings .uh-tr-section[data-block="when"] { margin-bottom: var(--space-4); }
.uh-tr-when { list-style: none; margin: 0; padding: 0; }
.uh-tr-fact { display: flex; align-items: flex-start; gap: 10px; }
.uh-tr-fact + .uh-tr-fact { margin-top: var(--space-2); }
.uh-tr-fact-icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--ink-400); }
.uh-tr-fact-text { min-width: 0; text-wrap: pretty; }
.uh-tr-days, .uh-tr-time { white-space: nowrap; }   /* never break inside "Mondays & Thursdays" or 19:00–20:30 */
.uh-tr-fact--time .uh-tr-fact-text { font-size: 1.125rem; line-height: 1.35; font-weight: 650; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.uh-tr-place .uh-tr-fact-text,
.uh-tr-bring .uh-tr-fact-text { font-size: 1rem; line-height: 1.45; color: var(--ink-700); padding-top: 1px; }
.uh-tr-note { margin: var(--space-1) 0 0 30px; font-size: 0.9375rem; }   /* optional calendar link (PAGE.calendarLink) */

/* ── Map: static OSM image in a link to Google Maps directions ── */
.uh-tr-map-fig { margin: 0 0 var(--space-5); }
.uh-tr-map {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--ink-050);
  box-shadow: var(--shadow-card);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.uh-tr-map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uh-tr-map-pin { position: absolute; left: 50%; top: 50%; width: 28px; height: 37px; transform: translate(-50%, -100%); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }
.uh-tr-map-pin svg { display: block; width: 100%; height: 100%; }
/* Directions chip: white pill at rest (map-app convention); Dusk fill on hover / keyboard focus */
.uh-tr-map-cta {
  position: absolute; right: var(--space-3); bottom: var(--space-3);
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 var(--space-3);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-pill);
  background: var(--card); color: var(--accent-text);
  font-size: 0.8125rem; font-weight: 650; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(50, 42, 28, 0.12), 0 4px 12px rgba(50, 42, 28, 0.14);
  transition: background-color 0.14s, border-color 0.14s, color 0.14s;
}
@media (hover: hover) {
  .uh-tr-map:hover { border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-ring); }
  .uh-tr-map:hover .uh-tr-map-cta { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
}
.uh-tr-map:focus-visible .uh-tr-map-cta { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
/* OSM credit (licence requirement — must stay visible + linked). 28px caption box; the link's 44px hit
   area hangs 16px into the space below, never over the map. */
.uh-tr-credit { display: flex; justify-content: flex-end; height: 28px; flex: none; }
.uh-tr-credit-link {
  display: inline-flex; align-items: flex-start;
  min-height: 44px; margin-bottom: -16px; padding: 7px 2px 0;
  font-size: 0.75rem; line-height: 1.2; color: var(--ink-500);
  text-decoration: underline; text-decoration-color: var(--ink-100); text-underline-offset: 2px;
  transition: text-decoration-color 0.14s;
}
@media (hover: hover) { .uh-tr-credit-link:hover { text-decoration-color: currentColor; } }

/* ── Join a training: one short line, then the page's one button ── */
.uh-tr-cta { margin-bottom: calc(var(--space-6) + var(--space-2)); }
.uh-tr-cta .uh-tr-text { margin-bottom: var(--space-4); }

/* ── Photo (beside What is Ultimate? + Ready to join) — 4:3 on phones, fills its band ≥768 ── */
.uh-tr-photo {
  position: relative;
  margin: 0 0 var(--space-5);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-050);
}
.uh-tr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

/* ── Membership cards: TSI + Kraft (side by side ≥768, stacked on phones) ── */
.uh-tr-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.uh-tr-card {
  --tr-card-logo: 56px;
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5) var(--space-3);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
/* Fixed-height logo slot: a round badge and a wide wordmark both sit on its centre line, so the two
   card titles start at the same height. Logos are transparent PNG / SVG — no boxes behind them. */
.uh-tr-card-logo { display: flex; align-items: center; height: var(--tr-card-logo); margin-bottom: var(--space-4); }
.uh-tr-card-logo-img { display: block; height: 100%; width: auto; max-width: 100%; }
.uh-tr-card-logo-img[data-logo="tsi"]   { width: var(--tr-card-logo); }
.uh-tr-card-logo-img[data-logo="kraft"] { height: 68%; aspect-ratio: 221 / 67.4; }   /* wordmark: optically matches the badge */
.uh-tr-step-title { margin: 0 0 var(--space-2); font-size: 1.125rem; line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; color: var(--ink-900); }
.uh-tr-card .uh-tr-text, .uh-tr-card .uh-tr-list { margin-bottom: var(--space-2); }
/* The card's one link sits at the bottom, so both cards end on the same line */
.uh-tr-card .uh-tr-links { margin-top: auto; }

.uh-tr-link:focus-visible, .uh-tr-map:focus-visible, .uh-tr-credit-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.uh-tr-map:focus-visible { border-radius: var(--radius); }

/* ── ≥768: the 12-col bands, 6 | 6 ── */
@media (min-width: 768px) {
  .uh-wrap--trainings {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    /* rows: back · title · when · line + button (takes any slack beside the map) · what · join · cards */
    grid-template-rows: auto auto auto 1fr;
  }
  .uh-wrap--trainings > .uh-title { grid-column: 1 / 9; }
  .uh-wrap--trainings > #uh-tr > .uh-tr-coaches { grid-column: 9 / -1; }
  .uh-tr-section { margin-bottom: var(--space-7); }
  .uh-tr-section .uh-section-title { font-size: 1.25rem; }

  /* Band 1: facts → line → button in 1–6; the map fills 7–12 to the same height. The map image's bottom
     meets the button's bottom; its credit line hangs into the 48px band gap. */
  .uh-wrap--trainings > #uh-tr > [data-block="when"] { grid-column: 1 / 7; grid-row: 3; margin-bottom: var(--space-5); }
  .uh-wrap--trainings > #uh-tr > .uh-tr-cta          { grid-column: 1 / 7; grid-row: 4; margin-bottom: var(--space-7); }
  .uh-wrap--trainings > #uh-tr > .uh-tr-map-fig      { grid-column: 7 / -1; grid-row: 3 / 5; align-self: stretch;
                                                       display: flex; flex-direction: column; margin-bottom: calc(var(--space-7) - 28px); }
  .uh-tr-map-fig .uh-tr-map { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
  .uh-tr-map img { position: absolute; inset: 0; }
  .uh-tr-cta .uh-tr-text { margin-bottom: var(--space-5); }
  .uh-tr-cta .uh-tr-try { display: inline-flex; width: auto; padding: 0 var(--space-6); }

  /* Band 2: photo 1–6 fills the height of the two text blocks in 7–12 (top and bottom edges meet) */
  .uh-wrap--trainings > #uh-tr > .uh-tr-photo         { grid-column: 1 / 7; grid-row: 5 / 7; align-self: stretch;
                                                        aspect-ratio: auto; min-height: 280px; margin-bottom: var(--space-7); }
  .uh-tr-photo img { position: absolute; inset: 0; }
  .uh-wrap--trainings > #uh-tr > [data-block="what"]  { grid-column: 7 / -1; grid-row: 5; margin-bottom: var(--space-6); }
  .uh-wrap--trainings > #uh-tr > [data-block="join"]  { grid-column: 7 / -1; grid-row: 6; }

  /* Band 3: the two membership cards on the same 6 | 6 line, equal height */
  .uh-wrap--trainings > #uh-tr > .uh-tr-cards { grid-row: 7; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .uh-tr-card { --tr-card-logo: 64px; }
}
@media (min-width: 960px) {
  .uh-wrap--trainings > .uh-title { margin-bottom: var(--space-7); }
  .uh-wrap--trainings > #uh-tr > .uh-tr-coaches { margin-bottom: var(--space-7); }
  /* Band-1 text hangs under the title text (Owner's editor layout): indent = logo + title gap */
  .uh-wrap--trainings > #uh-tr > [data-block="when"],
  .uh-wrap--trainings > #uh-tr > .uh-tr-cta { margin-left: calc(var(--tr-logo) + var(--tr-title-gap)); }
  .uh-tr-card { padding: var(--space-6) var(--space-6) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .uh-btn-secondary:active { transform: none; } }

/* ── Tournaments page (Stack first version 2026-10-15; compact table 2026-10-18) — /ultimate/tournaments at the hub's
   1080 width, one column. DOM: back · logo + title · [intro, off] · "Sign up or change your picks" ·
   This season's tournaments (live table) · How tournaments work (placeholder).
   Reuses the Trainings type hooks: .uh-tr-title / .uh-tr-logo (logo inline left of the title, same sizes),
   .uh-tr-section + .uh-section-title (sentence-case headings), .uh-tr-text (body), .uh-tr-sr (screen-reader text).
   TABLE: div.uh-tn-list (white frame) > table.uh-tn-table > thead.uh-tn-head th.uh-tn-th[data-col][scope=col] +
   tbody > tr.uh-tn-row[data-status][data-undated] > .uh-tn-cell[data-col="date|name|status|city|court|deadline"].
   The name cell is th[scope=row]. Each cell = optional span.uh-tn-lbl (phone label, aria-hidden) + the value span
   .uh-tn-date (> .uh-tn-days + .uh-tn-my when dated; ≥768 the days are right-aligned in a fixed slot so the months
   line up) / .uh-tn-name / .uh-tn-city / .uh-tn-court / .uh-tn-deadline (data-blank="1" = quiet dash) /
   .uh-tn-status[data-status="attending|maybe|tbd|not_attending"] > .uh-tn-dot + the word.
   ≥768: a real table, fixed column widths (every row lines up). <768: one card per tournament — name + status on
   top, then "Date … City … Type … Register by …" with visible labels (PAGE.list.phoneLabels); the header row is kept for
   screen readers only (the markup carries explicit ARIA roles because display:flex drops table semantics).
   STATUS TRAFFIC LIGHT (Owner 2026-10-18): attending = green, maybe = yellow, not_attending = red, tbd = grey
   (undecided, no traffic-light colour). Colours = the sign-up page's yes / maybe / no tokens (--done / --maybe / --no
   in ultimate/tournaments/signup/index.html). Measured: every dot ≥3:1 against its chip tint, every word ≥5:1.
   The hub calendar's tournament bars keep their own aurora-teal scheme (not changed here). */
.uh-wrap--tournaments {
  --tr-logo: 40px; --tr-title-gap: var(--space-3);
  --tn-yes: #4f8f56;   --tn-yes-bg: #eaf2eb;   --tn-yes-text: #2a5c30;     /* dot 3.41:1 on tint (one step darker than --done #5a9960, which is 2.99) */
  --tn-maybe: #d99e1f; --tn-maybe-ring: #9a6a07; --tn-maybe-bg: #f7edd0; --tn-maybe-text: #755008;   /* bright fill reads yellow; its ring carries the contrast (4.05:1) */
  --tn-no: #c0392b;    --tn-no-bg: #f6e6e3;    --tn-no-text: #8f2418;      /* dot 4.49:1 */
  --tn-tbd: var(--ink-400); --tn-tbd-bg: var(--ink-050); --tn-tbd-text: var(--ink-500);   /* hollow ring 3.15:1 */
}
.uh-wrap--tournaments > .uh-title { margin-bottom: var(--space-5); }
.uh-tn-intro { margin-bottom: var(--space-5); }
.uh-tn-cta { margin-bottom: calc(var(--space-6) + var(--space-2)); }
.uh-tn-msg { margin: 0; padding: var(--space-4); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-500);
  border: 1px dashed var(--ink-100); border-radius: var(--radius); }
.uh-tn-msg[data-state="error"] { color: var(--ink-700); }

/* Frame = the white card (a border-collapse table can't round its own corners) */
.uh-tn-list { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.uh-tn-table { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 0.875rem; line-height: 1.35; color: var(--ink-700); }
.uh-tn-cell { text-align: left; font-weight: 400; }
.uh-tn-name { font-weight: 650; color: var(--ink-900); overflow-wrap: break-word; }
.uh-tn-date, .uh-tn-deadline { font-variant-numeric: tabular-nums; }
.uh-tn-court { color: var(--ink-500); }
.uh-tn-table [data-blank="1"] { color: var(--ink-400); }

/* Status chip: tint + dot (colour) + word (meaning) */
.uh-tn-status {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: var(--radius-pill);
  font-size: 0.75rem; font-weight: 650; line-height: 1.35; white-space: nowrap;
  background: var(--tn-tbd-bg); color: var(--tn-tbd-text);
}
.uh-tn-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box; background: transparent; box-shadow: inset 0 0 0 1.5px var(--tn-tbd); }
.uh-tn-status[data-status="attending"]     { background: var(--tn-yes-bg); color: var(--tn-yes-text); }
.uh-tn-status[data-status="attending"] .uh-tn-dot     { background: var(--tn-yes); box-shadow: none; }
.uh-tn-status[data-status="maybe"]         { background: var(--tn-maybe-bg); color: var(--tn-maybe-text); }
.uh-tn-status[data-status="maybe"] .uh-tn-dot         { background: var(--tn-maybe); box-shadow: inset 0 0 0 1.5px var(--tn-maybe-ring); }
.uh-tn-status[data-status="not_attending"] { background: var(--tn-no-bg); color: var(--tn-no-text); }
.uh-tn-status[data-status="not_attending"] .uh-tn-dot { background: var(--tn-no); box-shadow: none; }
.uh-tn-soon { padding: var(--space-6) var(--space-5); }

/* Phones + small tablets (<768): one compact card per tournament */
@media (max-width: 767.98px) {
  .uh-tn-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .uh-tn-table, .uh-tn-table > tbody { display: block; }
  .uh-tn-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-3); row-gap: 1px;
    padding: 8px var(--space-4) 9px; border-top: 1px solid var(--ink-050); }
  .uh-tn-row:first-child { border-top: 0; }
  .uh-tn-row::after { content: ""; order: -1; flex-basis: 100%; height: 0; }   /* line break after name + status */
  .uh-tn-cell { display: block; padding: 0; min-width: 0; font-size: 0.8125rem; line-height: 1.35; color: var(--ink-900); }
  .uh-tn-court { color: var(--ink-900); }
  .uh-tn-cell[data-col="name"] { order: -3; flex: 1 1 0; font-size: 0.9375rem; line-height: 1.3; }
  .uh-tn-cell[data-col="status"] { order: -2; flex: none; align-self: center; }
  .uh-tn-lbl { margin-right: 4px; color: var(--ink-500); }
}

@media (min-width: 600px) { .uh-wrap--tournaments { --tr-logo: 48px; } }
@media (min-width: 768px) {
  .uh-tn-table { table-layout: fixed; font-size: 0.8125rem; }   /* fixed outer columns: every row lines up */
  .uh-tn-lbl { display: none; }
  .uh-tn-th, .uh-tn-cell { padding: 6px 8px; vertical-align: middle; }
  .uh-tn-th { font-size: 0.75rem; font-weight: 650; line-height: 1.25; color: var(--ink-500); text-align: left; vertical-align: bottom;
    background: var(--bg); border-bottom: 1px solid var(--card-border); }
  .uh-tn-row + .uh-tn-row > .uh-tn-cell { border-top: 1px solid var(--ink-050); }
  .uh-tn-th:first-child, .uh-tn-cell:first-child { padding-left: var(--space-4); }
  .uh-tn-th:last-child, .uh-tn-cell:last-child { padding-right: var(--space-4); }
  /* Days right-aligned in a "24–25"-wide slot so the months line up; a long month/year wraps inside its own slot. */
  .uh-tn-date { display: flex; align-items: baseline; column-gap: 0.3em; }
  .uh-tn-days { flex: none; min-width: 3.1em; text-align: right; }
  .uh-tn-th[data-col="date"]     { width: 8.25rem; }
  .uh-tn-th[data-col="city"]     { width: 5.75rem; }
  .uh-tn-th[data-col="court"]    { width: 6.5rem; }
  .uh-tn-th[data-col="deadline"] { width: 6.25rem; }
  .uh-tn-th[data-col="status"]   { width: 8.25rem; }
  .uh-tn-cta { margin-bottom: var(--space-7); }
  .uh-tn-cta .uh-btn-block { display: inline-flex; width: auto; min-width: 320px; padding: 0 var(--space-6); }
}
@media (min-width: 960px) {
  .uh-wrap--tournaments { --tr-logo: 72px; --tr-title-gap: var(--space-4); }
  .uh-wrap--tournaments > .uh-title { font-size: 3.5rem; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: var(--space-6); }
  .uh-tn-table { font-size: 0.875rem; }
  .uh-tn-th, .uh-tn-cell { padding: 7px 10px; }
  .uh-tn-th[data-col="date"]     { width: 11rem; }
  .uh-tn-th[data-col="city"]     { width: 8rem; }
  .uh-tn-th[data-col="court"]    { width: 8rem; }
  .uh-tn-th[data-col="deadline"] { width: 10.5rem; }
  .uh-tn-th[data-col="status"]   { width: 8.75rem; }
}