/* TopBar v2 — built to reference image
   Whole bar is glass over forest backdrop.
   Layout: [donut zone ~140px] [4 stat cols] over Row A
                                [progress bar full right width] Row B
                                [scheduled / days left] Row C
*/

.topbar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  padding: 0;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  /* glass over forest — much lighter on the left (donut) side, .tb-right
     paints its own solid cream gradient over its zone. */
  background: linear-gradient(90deg,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 6%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 10%, transparent) 35%,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 18%, transparent) 60%,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 20%, transparent) 100%);
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
  border: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 72%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 5%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
    0 14px 28px rgba(0,0,0,0.20),
    0 24px 56px rgba(0,0,0,0.32);
}

/* 16 Sep 2026 — the glass reflection strip along the panel's upper edge. The ELEMENT
   lives here, with no paint of its own, because a skin may only repaint: positioning
   it from a preset block is what test/skinContract.test.js exists to catch. A skin
   gives it a background; every other skin shows nothing at all. */
.topbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2%;
  right: 2%;
  height: 1px;
  pointer-events: none;
  background: none;
}
/* gold-foil ring — bright on top-left, fades into transparency on bottom-right */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-3) 85%, transparent) 0%,
    color-mix(in srgb, var(--foil) 42%, transparent) 22%,
    color-mix(in srgb, var(--foil) 10%, transparent) 45%,
    transparent 65%,
    transparent 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.95;
  z-index: 4;
}

/* Separator: 3px beveled groove with feathered top/bottom ends.
   Implemented as ::after wrapper containing two stacked vertical lines via background. */
.topbar::after {
  content: "";
  position: absolute;
  left: var(--tb-square, 290px);
  top: 0;
  bottom: 0;
  width: 3px;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, color-mix(in srgb, var(--hi-3) 46%, var(--mix-light)) 45%, transparent) 14%,
      color-mix(in srgb, color-mix(in srgb, var(--hi-3) 46%, var(--mix-light)) 45%, transparent) 86%,
      transparent 100%) right / 1.5px 100% no-repeat,
    linear-gradient(to bottom,
      transparent 0%,
      color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 85%, transparent) 14%,
      color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 85%, transparent) 86%,
      transparent 100%) left / 1.5px 100% no-repeat;
  pointer-events: none;
  z-index: 3;
}

/* LEFT donut zone — solid on its LEFT edge, feathers on right/top/bottom
   (off-canvas ellipse origin at -30% pushes the solid zone fully to the left).
   A subtle warm glow sits behind the donut to lift the murky forest backdrop. */
.tb-left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: var(--tb-square, 290px);
  height: var(--tb-square, 290px);
  flex-shrink: 0;
  background: radial-gradient(ellipse 75% 75% at 35% 50%,
    color-mix(in srgb, var(--cream-6) 18%, transparent) 0%,
    color-mix(in srgb, var(--cream-6) 10%, transparent) 45%,
    transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 180% 110% at -20% 50%, black 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 180% 110% at -20% 50%, black 60%, transparent 100%);
}
.tb-donut-wrap {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.tb-donut, .tb-donut * { border: none !important; outline: none !important; box-shadow: none !important; }
.tb-donut-gutter { opacity: 0; pointer-events: none; }
.tb-donut {
  display: block; width: 100%; height: 100%; position: relative; z-index: 2; background: transparent;
  /* Stacked drop shadows + a sub-pixel blur to soften ring edges. The blur is
     small enough not to muddle the design but kills the stair-stepped pixels
     left over after SVG rasterization with masks + filters. */
  filter:
    drop-shadow(0 1px 2px color-mix(in srgb, var(--donut-shadow-color) 28%, transparent))
    drop-shadow(0 6px 18px color-mix(in srgb, var(--donut-shadow-color) 20%, transparent))
    blur(0.45px);
  transform: translateZ(0);
  will-change: transform;
}

/* Glassy disk inside the donut ring \u2014 slightly darker than the surrounding
   topbar glass, with NO blur of its own. Negative-blur trick: a transparent
   slot here would inherit the topbar's blur, so we add a small saturate-only
   filter that effectively passes through more cleanly than the parent's blur. */
.tb-donut-darken {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 226px;
  height: 226px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%,
    color-mix(in srgb, var(--shade-2) 42%, transparent) 0%,
    color-mix(in srgb, var(--shade-3) 48%, transparent) 55%,
    color-mix(in srgb, var(--shade-4) 55%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 32%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-3) 18%, transparent),
    inset 0 -6px 20px rgba(0, 0, 0, 0.20);
  backdrop-filter: saturate(1.10);
  -webkit-backdrop-filter: none;
  pointer-events: none;
  z-index: 1;
}
.tb-donut-darken::before,
.tb-donut-darken::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* The narrow channel's inner radius is 74% of the SVG's half-width. Keep
   geometry in the component stylesheet; skin families supply only material. */
@container style(--sk-donut-profile: gutter) {
  .topbar .tb-left .tb-donut-wrap .tb-donut-darken { width: 74%; height: 74%; }
}
.tb-donut-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}
.tb-donut-label > * { width: 100%; text-align: center; margin: 0; }

.tb-donut-eyebrow {
  font-size: var(--fs-9);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-cream-9) 78%, transparent);
  margin-bottom: 2px;
}
.tb-donut-percent {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: var(--fw-med);
  letter-spacing: -0.02em;
  color: var(--ink-cream-10);
  line-height: 1;
  font-feature-settings: var(--tnum);
}
.tb-pct-sign { font-size: var(--fs-32); font-weight: var(--fw-med); margin-left: 2px; opacity: 0.9; }
.tb-donut-sub {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-med);
  color: color-mix(in srgb, color-mix(in srgb, var(--foil) 78%, var(--mix-light)) 85%, transparent);
  margin-top: 4px;
  font-feature-settings: var(--tnum);
  letter-spacing: var(--track-04);
}

/* RIGHT content — translucent cream with a soft 3-stop radial mask that
   feathers the LEFT edge into the donut/glass zone. Cream is slightly see-through
   so the topbar's blurred forest backdrop reads subtly through it. */
.tb-right {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  background: radial-gradient(ellipse 130% 100% at 30% 30%,
    color-mix(in srgb, color-mix(in srgb, var(--cream-9) 88%, var(--mix-light)) 94%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 91%, var(--mix-dark)) 90%, transparent) 60%,
    color-mix(in srgb, color-mix(in srgb, var(--card-border) 64%, var(--mix-light)) 84%, transparent) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 24px 22px 24px;
  /* 3-stop mask: cream stays fully opaque for most of the panel, then softly
     ramps to translucent through a narrow zone, and finally to transparent
     right at the donut boundary. Smooth gradient instead of a hard cliff. */
  -webkit-mask-image: radial-gradient(ellipse 110% 135% at 100% 50%,
    black 72%,
    rgba(0, 0, 0, 0.55) 90%,
    transparent 100%);
  mask-image: radial-gradient(ellipse 110% 135% at 100% 50%,
    black 72%,
    rgba(0, 0, 0, 0.55) 90%,
    transparent 100%);
}
.tb-right-top-spacer { height: 28px; flex: 0 0 28px; }
/* Mode switcher pill bar — bottom-right of the topbar, alongside the
   "Scheduled" meta. 3 small tabs to swap between Pipeline / Status / Quality. */
.tb-mode-row {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent);
  flex: 0 0 auto;
  gap: 1px;
  align-self: flex-end;
}
.tb-mode-btn {
  background: transparent;
  border: none;
  padding: 5px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  color: var(--ink-muted);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.tb-mode-btn:hover { color: var(--ink); }
.tb-mode-btn.is-active {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 95%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
    0 0 0 var(--hairline-w) color-mix(in srgb, var(--card-border) 45%, transparent);
}
.tb-right-spacer { flex: 1 1 auto; min-height: 0; }
.tb-bottom-group { display: flex; flex-direction: column; gap: 14px; flex: 0 0 auto; }

/* Row A — 4 stat columns + 3 dividers */
.tb-stats-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  height: 150px;
  min-height: 150px;
  flex: 0 0 auto;
}
.tb-stats-row::before,
.tb-stats-row::after,
.tb-stats-row > .tb-col-sep {
  content: "";
  position: absolute;
  /* 16 Sep 2026 - Hugo: "The columns separators are great but they should be much taller,
     with the end of the faded part nearly touching the edges." They were inset 18% top and
     bottom, so the faded ends died well short of the panel. 5% leaves just enough room for
     the gradient's own fade to finish before the edge. */
  top: 5%;
  bottom: 5%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--card-border) 35%, transparent) 22%,
    color-mix(in srgb, var(--card-border) 35%, transparent) 78%,
    transparent 100%);
  pointer-events: none;
}
.tb-stats-row::before { left: 25%; }
.tb-stats-row::after  { left: 50%; }
.tb-stats-row > .tb-col-sep { left: 75%; }
.tb-stat {
  /* Hugo update v3 — fixed-width cluster centred in the column.
     Both icon and text-stack get fixed widths so the cluster is
     always the same total width (56 + 14 + 130 = 200px). The grid
     track is centred within .tb-stat via justify-content:center, so
     neither the cluster nor the chip ever moves when mode changes
     or when the text content varies. Separators (at column 25/50/75%
     boundaries) sit visually between equal-content columns. */
  display: grid;
  grid-template-columns: 56px 130px;
  column-gap: 14px;
  justify-content: center;
  align-items: center;
  padding: 22px 16px;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  background: transparent;
  border: none;
  border-radius: var(--r-card);
  cursor: pointer;
  font-family: var(--font-body);
  text-align: left;
  position: relative;
  transition: opacity 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.tb-stat > .tb-stack {
  /* Lock the text-stack width so a long sub-label ("176 incl. archive")
     doesn't push the cluster wider than narrow labels ("1%"). Overflow
     is left-aligned within the 130px slot. */
  width: 130px;
  min-width: 0;
}
.tb-stat:hover { background: color-mix(in srgb, var(--hi) 16%, transparent); }
/* Focused stage column — full-height frame with subtle cream/gold outer glow. */
.tb-stat.is-active {
  background: color-mix(in srgb, var(--hi) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 70%, transparent),
    0 0 0 1.25px color-mix(in srgb, var(--nav-active) 60%, transparent),
    0 0 32px color-mix(in srgb, color-mix(in srgb, var(--gold-13) 47%, var(--mix-light)) 40%, transparent),
    0 4px 14px color-mix(in srgb, var(--shadow-ink) 15%, transparent);
}
.tb-stat.is-dimmed { opacity: 0.42; }
.tb-chip {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  transform: translateY(-2px);
}
.tb-chip svg { width: 28px; height: 28px; }
/* Only replace the glyph INSIDE the original circular badge. Its gradient,
   rim, relief, shadows, size and interaction remain the family's own material. */
@container style(--sk-kpi-glyphs: on) {
  body[data-skin-family] .topbar .tb-stats-row .tb-stat .tb-chip {
    position: relative;
  }
  body[data-skin-family] .topbar .tb-stats-row .tb-stat .tb-chip::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    top: calc(50% - 14px);
    left: calc(50% - 14px);
    pointer-events: none;
    background-color: currentColor;
    -webkit-mask-image: var(--sk-kpi-glyph-image);
    mask-image: var(--sk-kpi-glyph-image);
    -webkit-mask-size: 200% 200%;
    mask-size: 200% 200%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--sk-light) 60%, transparent));
  }
  body[data-skin-family] .topbar .tb-stats-row .tb-stat:nth-child(2) .tb-chip::after { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  body[data-skin-family] .topbar .tb-stats-row .tb-stat:nth-child(3) .tb-chip::after { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  body[data-skin-family] .topbar .tb-stats-row .tb-stat:nth-child(4) .tb-chip::after { -webkit-mask-position: 100% 100%; mask-position: 100% 100%; }
  body[data-skin-family] .topbar .tb-stats-row .tb-stat .tb-chip svg { visibility: hidden; }
}
/* Stage chips — vivid tints matching each donut arc colour. */
.tb-chip--firstpass {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--gold-5) 64%, var(--mix-light)) 50%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--gold-9) 89%, var(--mix-light)) 55%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-umber-3) 93%, var(--mix-light));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hi) 60%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent);
}
.tb-chip--concept {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--gold-16) 89%, var(--mix-light)) 42%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--gold-16) 83%, var(--mix-dark)) 52%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-tan-deep) 74%, var(--mix-dark));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hi-3) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 89%, var(--mix-dark)) 10%, transparent);
}
.tb-chip--render {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--teal) 96%, var(--mix-light)) 42%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--teal) 77%, var(--mix-dark)) 52%, transparent) 100%);
  color: var(--teal-4-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--teal-4-hi) 60%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--teal-4-lo) 10%, transparent);
}
.tb-chip--completed {
  background: linear-gradient(140deg, color-mix(in srgb, var(--ok) 42%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 72%, var(--mix-dark)) 52%, transparent) 100%);
  color: var(--ink-forest-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 27%, var(--mix-light)) 65%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 30%, var(--mix-dark)) 10%, transparent);
}
.tb-chip--rejected {
  background: linear-gradient(140deg, color-mix(in srgb, var(--danger-soft-2) 42%, transparent) 0%, color-mix(in srgb, var(--danger-deep) 52%, transparent) 100%);
  color: var(--ink-deep);
  box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--gold-16) 32%, var(--mix-light)) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 78%, var(--mix-dark)) 10%, transparent);
}
/* Gold metallic — 4K upscale / delivered chip (Fix 3, t05b). Matches the
   STAGE_TINTS.UPSCALED tones used by the in-row status pill so the topbar
   chip and the row pill read as the same material. */
.tb-chip--upscale {
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold-2) 50%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--gold-8) 89%, var(--mix-dark)) 55%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-tan-deep) 64%, var(--mix-dark));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hi-3) 65%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 90%, var(--mix-dark)) 10%, transparent);
}
/* Summary-stat chips — calmer cream-toned variants for non-stage stats. */
/* Total Shots — cool teal-blue, the "informational" stat. */
.tb-chip--total {
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue-26) 40%, transparent) 0%, color-mix(in srgb, var(--blue-27) 50%, transparent) 100%);
  color: var(--badge-kickoff-ink);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--blue-28) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--blue-29) 10%, transparent);
}
/* Days Left — warm amber/honey, the "time" stat. */
.tb-chip--days {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--gold-3) 94%, var(--mix-dark)) 42%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--gold-8) 93%, var(--mix-dark)) 52%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-tan-deep) 66%, var(--mix-dark));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hi-2) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 92%, var(--mix-dark)) 10%, transparent);
}
/* v07zz249 — Hours Worked chip was washed-out (low gradient opacity) vs the
   saturated Completion/Health chips beside it. Bump to the same contrast family. */
.tb-chip--hours {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--gold-6) 79%, var(--mix-light)) 44%, transparent) 0%, color-mix(in srgb, var(--amber-3) 54%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-tan-deep) 74%, var(--mix-dark));
  box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--hi-3) 82%, var(--mix-light)) 58%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 94%, var(--mix-dark)) 10%, transparent);
}
.tb-chip--status-ontrack {
  background: linear-gradient(140deg, color-mix(in srgb, var(--ok) 42%, transparent) 0%, color-mix(in srgb, var(--olive-2) 42%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-forest-2) 93%, var(--mix-light));
  box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 27%, var(--mix-light)) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 30%, var(--mix-dark)) 10%, transparent);
}
.tb-chip--status-ahead {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 84%, var(--mix-light)) 50%, transparent) 0%, color-mix(in srgb, var(--olive-6) 50%, transparent) 100%);
  color: var(--ink-forest-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 27%, var(--mix-light)) 65%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 30%, var(--mix-dark)) 10%, transparent);
}
.tb-chip--status-behind {
  background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--gold-16) 86%, var(--mix-dark)) 45%, transparent) 0%, color-mix(in srgb, var(--red-31) 45%, transparent) 100%);
  color: color-mix(in srgb, var(--ink-tan-deep) 66%, var(--mix-dark));
  box-shadow: inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--gold-16) 31%, var(--mix-light)) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 87%, var(--mix-dark)) 10%, transparent);
}

.tb-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
/* Centred column layout (Fix 2, t05b) — labels, values and sub-text all
   horizontally centred under the chip. Higher-specificity override of the
   default flex-start alignment without modifying the base rule. */
.tb-stat .tb-stack {
  align-items: center;
  text-align: center;
}
.tb-stat-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-08);
  color: color-mix(in srgb, var(--ink-taupe-4) 80%, var(--mix-dark));
  text-transform: uppercase;
  line-height: 1;
}
.tb-stat-num {
  font-family: var(--font-display);
  font-weight: var(--fw-med);
  color: var(--ink-bg);
  line-height: 1;
  letter-spacing: -0.01em;
  font-feature-settings: var(--tnum);
  /* v07zz276 — fixed value-line height (= the large 44px size) + bottom-align, so a
     shrunk word value ("On Track" at --md) occupies the SAME vertical space as a 44px
     number. Keeps every stat column's stack the same height (Health no longer reads
     shorter/misaligned) and avoids a height jump when the status word changes. */
  min-height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tb-stat-num--lg { font-size: var(--fs-44); }
/* Status text sits at a smaller display size so "On Track" fits without wrapping. */
.tb-stat-num--md {
  font-size: var(--fs-28);
  letter-spacing: 0;
  font-weight: var(--fw-med);
}
.tb-stat-sub {
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  color: var(--ink-taupe-4);
  letter-spacing: var(--track-02);
  font-feature-settings: var(--tnum);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Row B — progress bar.
   Empty track is a soft cream/tan; the FILLED portion is a vivid green→amber gradient
   that explicitly stops at the marker position. Looks like the bar is being filled
   up rather than just being a static rainbow gradient across the whole length. */
.tb-progress {
  position: relative;
  height: 12px;
  border-radius: var(--r-round);
  /* Empty track behind the fill */
  background: linear-gradient(180deg,
    color-mix(in srgb, color-mix(in srgb, var(--foil) 55%, var(--mix-light)) 75%, transparent) 0%,
    color-mix(in srgb, color-mix(in srgb, var(--ink-on-dark) 89%, var(--mix-dark)) 85%, transparent) 100%);
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  margin-left: 12px;
  width: calc(100% - 12px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink) 18%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}
/* Filled portion — width set inline via --tb-fill custom property */
.tb-progress-fill-bar {
  position: absolute;
  inset: 0;
  width: var(--tb-fill, 0%);
  border-radius: var(--r-round);
  background: linear-gradient(to right, var(--leaf-deep) 0%, var(--leaf) 55%, color-mix(in srgb, var(--nav-active) 86%, var(--mix-dark)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-deep) 43%, var(--mix-dark)) 22%, transparent);
}
/* Glass gloss on top of the filled portion */
.tb-progress-fill-bar::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  top: 1px;
  height: 4px;
  border-radius: var(--r-round);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--cream) 65%, transparent) 0%,
    color-mix(in srgb, var(--cream) 18%, transparent) 70%,
    transparent 100%);
  pointer-events: none;
}
.tb-progress-fill { display: none; }
.tb-progress-dim { display: none; }
/* Two stacked chevron arrows centered on the current progress position. */
.tb-progress-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 18px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: color-mix(in srgb, var(--archive) 65%, var(--mix-dark));
  z-index: 2;
}
.tb-progress-marker svg { display: block; }

/* Row C — meta */
.tb-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-left: 12px;
  padding-right: 4px;
}
.tb-meta-block { display: flex; flex-direction: column; gap: 2px; }
.tb-meta-right { text-align: right; align-items: flex-end; }
.tb-meta-block { gap: 2px; }
.tb-meta-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-umber-3) 90%, var(--mix-light));
  margin-bottom: 2px;
  /* v04a — SCHEDULED + live dot + 1 ONLINE pill all share one row,
     baseline-aligned. inline-flex+align-items:center forces the dot
     and pill to sit on the SCHEDULED text midline. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tb-meta-value {
  font-size: var(--fs-15);
  font-weight: var(--fw-med);
  color: var(--ink-bg);
  font-feature-settings: var(--tnum);
  /* v04sl — never clip; let the date range + "X days remaining"
     wrap to a second line gracefully at narrow widths. */
  white-space: normal;
  overflow: visible;
  word-break: normal;
  line-height: 1.25;
}
/* v04sl — meta row sub-line ("X days remaining") may need to wrap;
   keep it on its own line so the date range stays clean. */
.tb-meta-sub {
  display: inline;
  white-space: normal;
}

/* ─── t05c (revised by t05g) — lock stat-column icon positions ────────
   The stats row is a 4-column CSS grid (`.tb-stats-row { grid-template-
   columns: repeat(4, 1fr) }`), so each column has a fixed equal width
   regardless of content. Icons stay pinned to the LEFT edge of every
   column via `justify-content: flex-start` — they never drift between
   mode switches even when label / value text length changes.

   t05g revert (chevron-marker era of layout): Hugo prefers the original
   horizontal arrangement (chip on the left, label/value/sub stack to
   its right) over the vertical column stack t05c first introduced. We
   keep the equal-width grid (which fixes icon drift) but restore the
   side-by-side flex direction so labels read alongside their icons. */
.tb-stats-row .tb-stat {
  flex-direction: row;
  justify-content: flex-start;     /* chip pins left — never drifts on text-length change */
  align-items: center;
  gap: 18px;
  padding: 22px 16px;
  text-align: left;
}
.tb-stats-row .tb-stat .tb-chip {
  width: var(--tb-chip-size);
  height: var(--tb-chip-size);
  aspect-ratio: 1 / 1;             /* belt + braces: stays a perfect circle even if a parent flexes */
  flex: 0 0 var(--tb-chip-size);
  align-self: center;
  transform: none;                  /* drop the legacy -2px nudge */
  margin: 0;
}
/* (18 Sep 2026) the 1.8 stroke keeps the bigger glyph monoline in every skin (it was the glass family's) */
.tb-stats-row .tb-stat .tb-chip svg { width: var(--tb-chip-glyph); height: var(--tb-chip-glyph); stroke-width: 1.8; }
/* Stack reverts to flex-start alignment + small vertical gap so label /
   value / sub stack the way they did before t05c. */
.tb-stats-row .tb-stat .tb-stack {
  align-items: flex-start;
  text-align: left;
  gap: 6px;
  margin-top: 0;
}

/* ─── t05d (revised by t05g) — timeline shell restored, gradient kept ──
   The original 12px glassy pill shell is restored (height, border,
   inset shadows, cream gradient track). Only the colour change from
   t05d is preserved: the filled portion paints with the
   green → amber → red gradient. The marker reverts to the original
   pair of stacked chevrons at the current-day position — the t05d
   white-dot pseudo-element is dropped. */
.tb-bottom-group .tb-progress {
  /* Hugo redesign — HOLLOW track: subtle cream backdrop + faint
     rainbow tint. SHARPER inner shadows (smaller blur) so the
     concave recessed feel reads crisply rather than soft.
     Hugo width match — bar thickness 16px to visually match the
     donut arc stroke (rendered at donut size ~180-200px with
     stroke width 11 in a 200-viewbox = ~10-11px). The thicker
     bar reads at the same visual weight as the donut. */
  height: 16px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--umber-4) 67%, var(--mix-dark)) 22%, transparent);
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--bar-lo) 18%, transparent) 0%,
      color-mix(in srgb, var(--bar-mid) 18%, transparent) 50%,
      color-mix(in srgb, var(--bar-hi) 18%, transparent) 100%),
    color-mix(in srgb, color-mix(in srgb, var(--cream-6) 97%, var(--mix-light)) 65%, transparent);
  box-shadow:
    inset 0 1.5px 1.5px color-mix(in srgb, var(--shadow-ink) 40%, transparent),
    inset 0 -0.5px 0.5px color-mix(in srgb, var(--shadow-ink) 25%, transparent);
  overflow: visible;
  position: relative;
}
.tb-bottom-group .tb-progress::before { display: none; }
/* VIBRANT fill — matches the topbar DONUT-arc style. Donut arcs use
   a vertical 3-stop gradient (dark top → bright mid → pale bottom)
   to give the stroke a 3D glassy tube look. Same recipe here,
   LAYERED over the horizontal rainbow so the time-elapsed colour
   progression (green→amber→red) is preserved underneath. */
.tb-bottom-group .tb-progress-fill-bar {
  background:
    /* Top: donut-style vertical 3D shading (dark→light→lighter) */
    linear-gradient(to bottom,
      color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 15%, var(--mix-dark)) 45%, transparent) 0%,
      color-mix(in srgb, var(--mix-light) 12%, transparent) 55%,
      color-mix(in srgb, var(--mix-light) 45%, transparent) 100%),
    /* Base: horizontal rainbow, stretched so right edge matches the
       faded track's colour at the elapsed position. */
    linear-gradient(to right, var(--bar-lo) 0%, var(--bar-mid) 50%, var(--bar-hi) 100%);
  background-size:
    100% 100%,
    calc(100% * 100 / var(--tb-fill-pct, 100)) 100%;
  background-position: left center, left center;
  background-repeat: no-repeat, no-repeat;
  border-radius: var(--r-round);
  opacity: 1;
  /* No drop shadow — kept just a subtle inset bottom edge for depth. */
  box-shadow: inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-deep) 43%, var(--mix-dark)) 30%, transparent);
  z-index: 1;
}
/* SHARP white glass gloss — restored to the original near-top
   position (1px from top edge) per Hugo. The bottom reflection
   (::after) complements it for the donut-arc curved-tube look. */
.tb-bottom-group .tb-progress-fill-bar::before {
  display: block;
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 2px;
  height: 4px;
  border-radius: var(--r-round);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--mix-light) 95%, transparent) 0%,
    color-mix(in srgb, var(--mix-light) 55%, transparent) 45%,
    color-mix(in srgb, var(--mix-light) 0%, transparent) 100%);
  pointer-events: none;
}
/* Soft bottom reflection — paired with the top gloss to mimic the
   donut arc's curved-tube feel (top sheen + bottom glow). Scaled
   for the thicker 16px bar. */
.tb-bottom-group .tb-progress-fill-bar::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 1.5px;
  height: 3px;
  border-radius: var(--r-round);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--mix-light) 45%, transparent) 0%,
    color-mix(in srgb, var(--mix-light) 12%, transparent) 60%,
    color-mix(in srgb, var(--mix-light) 0%, transparent) 100%);
  pointer-events: none;
}
/* Marker — chevrons just outside the bar, NOT touching. Bar now
   16px, marker bumped to 26px so the same ~5px above/below gap is
   preserved: top chevron 0..4 (5px above bar's top edge at 5),
   bottom chevron 22..26 (5px below bar's bottom edge at 21).
   Width 8px unchanged. */
.tb-bottom-group .tb-progress-marker > svg { display: block; }
.tb-bottom-group .tb-progress-marker::before { display: none; }
.tb-bottom-group .tb-progress-marker {
  height: 26px;
}

/* Days-remaining suffix sits inline after the date range, smaller +
   italic + muted. No layout change to .tb-meta-value itself. */
.tb-meta-sub {
  font-size: 0.75em;
  font-style: italic;
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: var(--track-01);
}

/* t17 — live SSE indicator inline in the Scheduled label. Pulsing
   green dot when connected; amber while connecting; muted red when
   disconnected. */
.tb-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  vertical-align: middle;
}
.tb-live-dot {
  /* v07zz14 — Bumped from 7px to 10px so the dot reads at roughly
     the same optical weight as the bold LIVE / FOLDER SYNC label
     beside it. Parent .tb-live uses inline-flex with align-items:
     center, so removing the inline-block hack lets the dot sit on
     the same baseline as the text without any baseline drift. */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tb-live-label {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  /* v05m — Reserve enough width to fit the longest label ("FOLDER SYNC"
     ~80px), so the label switching between SYNC OFF / FOLDER SYNC /
     LIVE / CONNECTING doesn't push the N-Online pill sideways during
     the brief moment between mount and probe-completion (or before
     window.__folderConfigured is cached on first ever load). */
  display: inline-block;
  min-width: 80px;
}
.tb-live--live .tb-live-dot {
  background: color-mix(in srgb, var(--olive-4) 92%, var(--mix-light));
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, color-mix(in srgb, var(--olive-4) 92%, var(--mix-light)) 20%, transparent), 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--olive-4) 92%, var(--mix-light)) 55%, transparent);
  animation: tb-live-pulse 1.8s ease-in-out infinite;
}
.tb-live--live .tb-live-label { color: var(--ink-forest-5); }
.tb-live--connecting .tb-live-dot {
  background: var(--gold-6);
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--gold-6) 20%, transparent);
  animation: tb-live-blink 1s ease-in-out infinite;
}
.tb-live--connecting .tb-live-label { color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); }
.tb-live--lost .tb-live-dot {
  background: var(--danger-soft-2);
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--danger-soft-2) 20%, transparent);
}
.tb-live--lost .tb-live-label { color: var(--danger-ink); }
@keyframes tb-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}
@keyframes tb-live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.40; }
}

/* t22 → t05h — vibrant "X ONLINE" pill next to the LIVE indicator.
   Bright green fill + white text + a tiny pulsing dot inside the icon
   so the indicator reads as "live presence" at a glance. */
.tb-online {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--surface-forest-5) 89%, var(--mix-light));
  background: linear-gradient(180deg, var(--olive-6) 0%, color-mix(in srgb, var(--olive-6) 89%, var(--mix-dark)) 100%);
  color: var(--white);
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  vertical-align: middle;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 1px 2px color-mix(in srgb, color-mix(in srgb, var(--surface-forest-5) 82%, var(--mix-dark)) 18%, transparent);
  position: relative;
}
.tb-online svg { stroke: currentColor; }
/* Pulsing live dot rendered as a tiny ::before — sits inside the pill
   left-of-icon, gently pulses to signal "live". */
.tb-online::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mix-light);
  box-shadow: 0 0 0 var(--ring-w) rgba(255, 255, 255, 0.30), 0 0 6px rgba(255, 255, 255, 0.55);
  animation: tb-online-pulse var(--dur-pulse) ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tb-online-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.80); }
}

/* ─── v01c — Center stat-column content ─────────────────────────────
   The t05g-era rule pins the chip to the LEFT of each column
   (justify-content: flex-start) so chips don't drift between modes.
   v01c prefers visual balance over zero-drift: center the chip+stack
   pair within each column and center the text inside the stack. New
   rules below cascade-win by source order without modifying the
   existing t05g rules. */
.tb-stats-row .tb-stat {
  justify-content: center;
}
.tb-stats-row .tb-stat .tb-stack {
  align-items: center;
  text-align: center;
}


/* Hugo update — GLASS pill in the donut's leaf-green hue (var(--ok) — success/online, not the accent).
   Translucent background + soft inset highlight read as frosted
   glass rather than a flat solid pill. */
.tb-online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px 3px 9px;
  border-radius: var(--r-round);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ok) 28%, transparent);
  backdrop-filter: blur(6px) saturate(1.2);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid color-mix(in srgb, var(--ok) 65%, transparent);
  color: color-mix(in srgb, var(--ink-forest-2) 81%, var(--mix-dark));
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--surface-forest-2) 52%, var(--mix-dark)) 18%, transparent),
    0 0 8px color-mix(in srgb, var(--ok) 25%, transparent);
  vertical-align: middle;
  cursor: default;
  position: relative;
}
/* Pulsing white dot — replaces the old people-icon. */
.tb-online .tb-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mix-light);
  box-shadow:
    0 0 0 var(--ring-w) rgba(255, 255, 255, 0.35),
    0 0 6px rgba(255, 255, 255, 0.65);
  animation: tb-online-pulse var(--dur-pulse) ease-in-out infinite;
  flex-shrink: 0;
}
/* v07zz14 — One-shot pop+flash whenever someone new comes online.
   The TopBar adds .tb-online--pop to the pill for ~700 ms when
   the online count increases. The pill scales out briefly and
   the background flashes brighter, drawing the eye. */
.tb-online--pop {
  animation: tb-online-pop 720ms cubic-bezier(0.34, 1.56, 0.64, 1) 1;
}
@keyframes tb-online-pop {
  0%   { transform: scale(1);    background: color-mix(in srgb, var(--ok) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--surface-forest-2) 52%, var(--mix-dark)) 18%, transparent), 0 0 8px color-mix(in srgb, var(--ok) 25%, transparent); }
  35%  { transform: scale(1.18); background: color-mix(in srgb, var(--ok) 65%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--surface-forest-2) 52%, var(--mix-dark)) 25%, transparent), 0 0 20px color-mix(in srgb, var(--ok) 85%, transparent), 0 0 36px color-mix(in srgb, var(--ok) 45%, transparent); }
  100% { transform: scale(1);    background: color-mix(in srgb, var(--ok) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--surface-forest-2) 52%, var(--mix-dark)) 18%, transparent), 0 0 8px color-mix(in srgb, var(--ok) 25%, transparent); }
}
/* Disable the legacy ::before pulse so we don't double-dot. */
.tb-online::before { content: none; }
.tb-online svg { display: none; }

/* Hugo update — round avatars slide out from behind the pill to the
   right on hover. Pill stays in place. Each avatar overlaps the next
   (-8px margin-left). Initial state: tucked under the pill via
   translateX(-12px) + opacity 0, with avatars stacked on top of each
   other. On hover the group expands and each avatar slides into its
   final position with a brief stagger. */
.tb-online-group {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.tb-online-group .tb-online {
  position: relative;
  z-index: 2;
  margin-left: 8px;
}
.tb-online-avatars {
  display: inline-flex;
  align-items: center;
  gap: 4px;                      /* visible space between avatars */
  margin-left: 6px;              /* small breathing room after the pill */
  /* Collapsed width = 0 so the row doesn't reserve space for hidden
     avatars. On hover the container expands to fit the stack with
     generous headroom — no cramping. */
  max-width: 0;
  overflow: visible;
  transition: max-width 380ms var(--ease-pop);
  z-index: 1;
  pointer-events: none;
}
.tb-online-group:hover .tb-online-avatars,
.tb-online-group:focus-within .tb-online-avatars {
  /* Plenty of room — fits up to ~10 avatars without crowding. */
  max-width: 600px;
  pointer-events: auto;
}
.tb-online-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, color-mix(in srgb, var(--olive-6) 95%, var(--mix-light)) 0%, color-mix(in srgb, var(--olive-4) 89%, var(--mix-dark)) 100%);
  background-position: center;
  background-size: cover;
  color: var(--ink-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-10);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-02);
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  border: 2px solid var(--cream);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shade-15) 35%, transparent);
  margin-left: 0;                /* gap is supplied by parent flex gap */
  flex-shrink: 0;
  /* Initial state: deeper tuck (slide travels further) + invisible. */
  transform: translateX(calc(var(--ai, 0) * -16px - 28px));
  opacity: 0;
  transition:
    transform 420ms var(--ease-pop),
    opacity   var(--dur-5) ease;
  transition-delay: 0ms;
}
/* Each avatar has its own --ai index so we can stagger reveals. */
.tb-online-group:hover .tb-online-avatar,
.tb-online-group:focus-within .tb-online-avatar {
  transform: translateX(0);
  opacity: 1;
  transition-delay: calc(var(--ai, 0) * 70ms);
}
.tb-online-avatar--me {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold-13) 74%, var(--mix-light)) 0%, var(--gold-6) 100%);
  color: color-mix(in srgb, var(--ink-deep) 92%, var(--mix-dark));
  text-shadow: none;
}

/* ─── v01e — Mode-tab icon layout ────────────────────────────────────
   The tabs gained inline SVG icons in v01e. The base .tb-mode-btn
   rule (above) has no flex layout, so we add a higher-specificity
   rule that lays out the icon + label side-by-side without modifying
   the original. */
.tb-mode-row .tb-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tb-mode-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: currentColor;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.tb-mode-ico svg { width: 16px; height: 16px; }
.tb-mode-btn.is-active .tb-mode-ico { opacity: 1; }
.tb-mode-label { display: inline-block; }

/* ─── Mode switcher gained Shots + Asset tabs (6 total) ──────────────────
   Tighten the per-tab horizontal padding + letter-spacing slightly so the
   six tabs occupy roughly the same total width the original four did, and
   stop the switcher from being able to wrap (a wrapped pill row would look
   broken). The pill never wraps regardless of which tab is active, so this
   doesn't introduce any toggle-time layout shift. */
.tb-mode-row { flex-wrap: nowrap; }
.tb-mode-row .tb-mode-btn { padding: 5px 11px; letter-spacing: var(--track-04); white-space: nowrap; }

/* v1080 — the hover zone in the middle of the Overall Progress circle carries the
   Frames / Video / Upscale tooltip. v1081 — the weights are edited in Settings, not on the
   circle, so the gear and its box are gone. Absolute: the circle never moves (#20). */
.tb-donut-hover { position: absolute; inset: 24%; border-radius: 50%; z-index: 2; cursor: help; }

/* The donut-to-stats divider. Its GEOMETRY lives here, with no paint of its own, because a
   skin may only repaint - positioning it from a preset block is what test/skinContract.test.js
   exists to catch. It replaces the `.topbar::after` groove at line 76, which can never render:
   that selector is declared twice in this file, so it inherits height:1px from the first block
   and computes to a 3x1px speck. The old block is left alone because a skin still paints it.
   Absolutely positioned, so it occupies no grid track and moves nothing. */
.tb-donut-sep {
  position: absolute;
  left: var(--tb-square, 290px);
  top: 0;
  bottom: 0;
  width: 6px;
  pointer-events: none;
  z-index: 3;
  background: none;
}

/* (18 Sep 2026) The band's ORNAMENT slots: the donut cell's own (.tb-left::before - first in the cell,
   so it paints under the ring and its disc) and the band's two ends (.tb-left::after on the left,
   .tb-right::before on the right). The ELEMENTS live here with no paint of their own, like the divider
   above: the paper family paints them through a mask (styles/skin-paper.css, --sk-orn-*) only when a
   skin gives an ornament its colour and its image, so every other skin shows nothing. Each box is its
   whole cell (the shape's size and place are the mask's), absolutely positioned inside a positioned
   cell: it occupies no track and moves nothing; the box exists only while the skin paints it (the family
   gives it its content), so in every other skin there is no box at all. The phone's band has no
   .tb-left / .tb-right. */
.tb-left::before,
.tb-left::after,
.tb-right::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}