/* ==========================================================================
   Oxford Social — team app: HOME screen (css/app-home.css)
   Spec: DESIGN-STAFF-APP.md §3.3 (layout + card anatomy) and §3.4 (spans).
   Scope: body.team-app #panel-home / .home / .hc / .avatar only.
   Consumes the --app-* tokens defined in css/app.css; defines none. Every
   var() carries the §6.1 value as a fallback so the screen still reads
   correctly if app.css is late, never a redefinition.
   Loaded LAST after app.css and app-cards.css. Dark only, radius 0, Anton
   for titles and figures, Space Grotesk for everything else, nothing under
   13px, every target ≥44px, never colour alone for state.
   Card letters (data-card): A needs-you · B your shift · C this week ·
   D your hours · E leave · F bookings today · G messages · H on the clock ·
   I this week's rota · J next 7 days · K hours to sign off · L leave
   requests · M team · N documents · O money · P rota emails · Z shared PIN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The panel: fallback line, head row, the grid
   -------------------------------------------------------------------------- */

/* Static fallback — visible in the HTML, hidden by app-home.js on its first
   good render. [hidden] keeps winning (staff.css `.staff [hidden]`). */
body.team-app .home__fallback {
  margin: 0 0 var(--app-gap, 16px);
  padding: 12px 16px;
  border: 1px solid var(--line-c);
  border-left: 3px solid var(--accent-c);
  background: var(--panel-c);
  color: var(--text-c);
  font: var(--app-t-body, 400 15px/1.5 var(--font-body));
}

body.team-app .home__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "hello refresh" "status refresh";
  align-items: center;
  gap: 4px 16px;
  margin: 0 0 var(--app-gap, 16px);
}
/* The greeting is Space Grotesk, not Anton, which is why sentence case is
   allowed here ("Evening, Jules."). */
body.team-app .home__hello {
  grid-area: hello;
  margin: 0;
  color: var(--ink-c);
  font: 700 17px/1.3 var(--font-body);
  overflow-wrap: anywhere;
}
body.team-app .home__status {
  grid-area: status;
  margin: 0;
  color: var(--text-c);
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
}
body.team-app .home__head .btn--sm {
  grid-area: refresh;
  align-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* The grid: one column on phones, two on the tablet range, twelve on desktop.
   Cards are placed in DOM order (= the phone order in §3.4). */
body.team-app .home__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--app-gap, 16px);
  align-items: stretch;
}
@media (min-width: 761px) {
  body.team-app .home__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* dense: a one-column card (F) followed by a two-column card (J) would
       otherwise leave a hole beside F; DOM order is unchanged. */
    grid-auto-flow: row dense;
  }
  body.team-app .hc { grid-column: span 1; }
  body.team-app .hc[data-card="A"],
  body.team-app .hc[data-card="B"],
  body.team-app .hc[data-card="J"],
  body.team-app .hc[data-card="Z"] { grid-column: span 2; }
}
@media (min-width: 1200px) {
  body.team-app .home__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  /* §3.4 — floor:  [A 12] · [B 6][C 3][D 3] · [F 4][E 4][G 4]
            manager: [A 12] · [B 6][C 3][D 3] · [H 4][I 4][F 4] · [J 6][K 3][L 3]
                     · [M 4][N 4][G 4] · [E 4][P 4][O 4]                              */
  body.team-app .hc { grid-column: span 4; }
  body.team-app .hc[data-card="A"] { grid-column: span 12; }
  body.team-app .hc[data-card="B"],
  body.team-app .hc[data-card="J"],
  body.team-app .hc[data-card="Z"] { grid-column: span 6; }
  body.team-app .hc[data-card="C"],
  body.team-app .hc[data-card="D"],
  body.team-app .hc[data-card="K"],
  body.team-app .hc[data-card="L"] { grid-column: span 3; }
}

/* --------------------------------------------------------------------------
   2. The card
   -------------------------------------------------------------------------- */

body.team-app .hc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: var(--app-card-pad, 24px 20px);
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-radius: 0;
  color: var(--text-c);
  /* Size queries below stack the figure pair when the card is narrow.
     Nothing position:fixed lives inside a card, so containment is harmless. */
  container-type: inline-size;
  container-name: hc;
  break-inside: avoid;
}
body.team-app .hc p,
body.team-app .hc ul,
body.team-app .hc ol,
body.team-app .hc h2,
body.team-app .hc h3 { margin: 0; }
body.team-app .hc ul,
body.team-app .hc ol { padding: 0; list-style: none; }
body.team-app .hc svg { flex: 0 0 auto; }
/* app-home.js renders every card's content into div.hc__body between the
   head and the foot; it stacks exactly like the card itself. */
body.team-app .hc__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
body.team-app .hc__body:empty { display: none; }

/* Head: Anton title, optional "when" meta on the right. */
body.team-app .hc__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  min-width: 0;
}
body.team-app .hc__title {
  min-width: 0;
  font: var(--app-t-card, 400 20px/1 var(--font-display));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-c);
  overflow-wrap: anywhere;
}
body.team-app .hc__when {
  margin-left: auto;
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
  color: var(--text-c);
  white-space: nowrap;
}
body.team-app .hc__head .hc__chip { margin-left: auto; }
body.team-app .hc__head .hc__when + .hc__chip { margin-left: 0; }

/* Big figure + its label. */
body.team-app .hc__big {
  font: var(--app-t-kpi, 400 44px/1 var(--font-display));
  letter-spacing: 0;
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.team-app .hc__label {
  font: var(--app-t-label, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
body.team-app .hc__big + .hc__label { margin-top: -8px; } /* 14px gap → 6px */
body.team-app .hc__label-sub,
body.team-app .hc__note {
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
  color: var(--text-c);
}
body.team-app .hc__label + .hc__label-sub { margin-top: -10px; }

/* Two figures side by side: hairline grid, each cell on the page black. */
body.team-app .hc__figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-c);
  border: 1px solid var(--line-c);
}
body.team-app .hc__figs > * {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
  background: var(--bg-c);
}
/* A paired figure is one step under the 44px hero figure: 36px, or 32px when
   the card is under 340px wide (a phone, or a span-4 card at 1440 with the
   sidebar open), which is what "120h 45m" needs to stay on one line in a
   half-width cell. Measured in Anton: "120h 45m" = 137px at 36, 122px at 32. */
body.team-app .hc__figs .hc__big { font-size: 36px; }
body.team-app .hc__figs .hc__big + .hc__label { margin-top: 0; }
@container hc (max-width: 339px) {
  body.team-app .hc__figs .hc__big { font-size: 32px; }
}
/* A narrow card (span 3 at 1200–1500, span 4 at 1200) cannot hold two figures
   side by side at all: stack them, each at 36px on the full card width. */
@container hc (max-width: 299px) {
  body.team-app .hc__figs { grid-template-columns: minmax(0, 1fr); }
  body.team-app .hc__figs .hc__big { font-size: 36px; }
}

/* Plain copy inside a card (card O, card Z): a note that opens the body is
   the card's content, so it reads at 15px; a note after figures or rows is
   a 13px footnote ("Hours only — no rates and no totals in pounds."). */
body.team-app .hc__copy,
body.team-app .hc__body > .hc__note:first-child,
body.team-app .hc > p:not([class]) {
  font: var(--app-t-body, 400 15px/1.5 var(--font-body));
  color: var(--text-c);
}

/* Sub-list heading inside a card ("On the clock" / "Off today"). */
body.team-app .hc__sublabel {
  font: var(--app-t-label, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
body.team-app .hc__rows + .hc__sublabel { margin-top: 6px; }

/* --------------------------------------------------------------------------
   3. Rows: text left, kicker right, chips and avatars in between
   -------------------------------------------------------------------------- */

body.team-app .hc__rows { display: flex; flex-direction: column; }
body.team-app .hc__rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 48px;
  padding: 6px 0;
}
body.team-app .hc__rows > li + li { border-top: 1px solid var(--line-c); }
body.team-app .hc__text {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--app-t-body, 400 15px/1.5 var(--font-body));
  line-height: 1.4;
  color: var(--ink-c);
  overflow-wrap: anywhere;
}
body.team-app .hc__kicker {
  margin-left: auto;
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
  color: var(--text-c);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
/* Two-line clamp for a message preview (card G). */
body.team-app .hc__clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* A stacked row: chip on the first line, text under, kicker last (card G). */
body.team-app .hc__rows > li.hc__stack,
body.team-app .hc__rows > li.hc__msg {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 10px 0;
}
body.team-app .hc__rows > li.hc__stack .hc__kicker,
body.team-app .hc__rows > li.hc__msg .hc__kicker { margin-left: 0; }
/* A row that is only chips (card B: Off rota · 9 min late · Photo needed). */
body.team-app .hc__rows > li.hc__row--chips { gap: 6px 8px; }

/* A whole row as a button (card A: icon · text · count · chevron). The same
   layout on span.hc__alert-btn--flat, which is a row nothing can open. */
body.team-app .hc__rows > li > button,
body.team-app .hc__alert-btn {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: -6px 0;
  padding: 6px 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
body.team-app .hc__alert-btn--flat { cursor: default; }
body.team-app .hc__rows > li > button .hc__text { text-decoration: underline transparent; text-underline-offset: 3px; }
body.team-app .hc__rows > li > button:hover .hc__text { color: var(--accent-c); text-decoration-color: currentColor; }
body.team-app .hc__rows > li > button:hover .hc__chev { transform: translateX(2px); }
body.team-app .hc__rows > li > button:focus-visible { outline: 2px solid var(--accent-c); outline-offset: -2px; }
body.team-app .hc__ico { width: 22px; height: 22px; color: var(--text-c); }
/* The dot stands in for a screen icon when the row opens nothing. */
body.team-app .hc__ico--dot { display: inline-grid; place-items: center; flex: 0 0 22px; }
body.team-app .hc__ico--dot::before { content: ""; width: 6px; height: 6px; background: currentColor; }
/* The chevron is an svg or the text "›"; either way a 16px box. */
body.team-app .hc__chev {
  display: inline-grid;
  place-items: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--text-c);
  font: 400 22px/1 var(--font-body);
  transition: transform var(--app-dur-1, 120ms) var(--app-ease, ease);
}
body.team-app .hc__rows > li > button .hc__count,
body.team-app .hc__alert-btn .hc__count,
body.team-app .hc__rows > li > button .hc__chip { margin-left: auto; }
body.team-app .hc__rows > li > button .hc__count + .hc__chev,
body.team-app .hc__rows > li > button .hc__chip + .hc__chev { margin-left: 0; }

/* Count square — the one place a 2px radius is allowed (count badges). */
body.team-app .hc__count {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  background: var(--accent-c);
  color: var(--on-accent-c);
  font: 700 13px/20px var(--font-body);
  font-variant-numeric: tabular-nums;
  border-radius: 2px;
}

/* Chip — always a word (On break · Draft · Not sent · Locked · Absent · Seated). */
body.team-app .hc__chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  color: var(--text-c);
  font: 700 13px/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.team-app .hc__chip--accent { border-color: var(--accent-c); color: var(--accent-c); }
body.team-app .hc__chip--bad { border-color: var(--bad); color: var(--ink-c); }
body.team-app .hc__chip--ok { border-color: var(--ok); color: var(--ink-c); }

/* Glyph square — Anton "✓" / "!" in a 20px square (empty states, card P). */
body.team-app .hc__glyph {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--line-2-c);
  color: var(--ink-c);
  font: 400 15px/20px var(--font-display);
  text-align: center;
}
body.team-app .hc__glyph--ok { background: var(--ok); color: var(--on-accent-c); }
body.team-app .hc__glyph--warn { background: var(--accent-c); color: var(--on-accent-c); }
body.team-app .hc__glyph--bad { background: var(--bad); color: var(--on-accent-c); }

/* --------------------------------------------------------------------------
   4. Progress rows — the fraction is printed BEFORE the bar
   -------------------------------------------------------------------------- */

body.team-app .hc__rows > li.hc__prog { padding: 10px 0; gap: 6px 12px; }
body.team-app .hc__frac {
  margin-left: auto;
  font: 700 15px/1.3 var(--font-body);
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.team-app .hc__prog .hc__frac + .hc__chip { margin-left: 0; }
body.team-app .hc__track {
  flex: 1 0 100%;
  width: 100%;
  height: 8px;
  background: var(--line-c);
  overflow: hidden;
}
body.team-app .hc__fill {
  width: 0;
  height: 100%;
  background: var(--accent-c);
}

/* --------------------------------------------------------------------------
   5. Checklist (card B) — 44px tickable boxes
   -------------------------------------------------------------------------- */

body.team-app .hc__tasks { display: flex; flex-direction: column; }
body.team-app .hc__task {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 2px 0;
}
body.team-app .hc__task + .hc__task { border-top: 1px solid var(--line-c); }
body.team-app .hc__task-box {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-left: -10px; /* the 24px square inside sits flush with the card text */
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--ink-c);
  cursor: pointer;
}
/* The 24px square is span.hc__task-sq (app-home.js puts the tick svg inside
   it when done); an empty button draws the square itself. */
body.team-app .hc__task-sq,
body.team-app .hc__task-box:empty::before {
  content: "";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid var(--line-2-c);
  background: transparent;
  color: var(--ink-c);
  transition: background var(--app-dur-1, 120ms) var(--app-ease, ease), border-color var(--app-dur-1, 120ms) var(--app-ease, ease);
}
body.team-app .hc__task-box:hover .hc__task-sq,
body.team-app .hc__task-box:empty:hover::before { border-color: var(--ink-c); }
body.team-app .hc__task-box[aria-pressed="true"] .hc__task-sq,
body.team-app .hc__task-box[aria-pressed="true"]:empty::before { background: var(--ok); border-color: var(--ok); }
body.team-app .hc__task-sq > svg { width: 16px; height: 16px; }
body.team-app .hc__task-box:focus-visible { outline: 2px solid var(--accent-c); outline-offset: -4px; }
body.team-app .hc__task-text {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--app-t-body, 400 15px/1.5 var(--font-body));
  line-height: 1.4;
  color: var(--ink-c);
  overflow-wrap: anywhere;
}
body.team-app .hc__task-box[aria-pressed="true"] ~ .hc__task-text,
body.team-app .hc__task.is-done .hc__task-text { color: var(--text-c); }
body.team-app .hc__task time,
body.team-app .hc__task-when {
  margin-left: auto;
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
  color: var(--text-c);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Avatars — 36px squares with Anton initials; the state is also a word
   -------------------------------------------------------------------------- */

body.team-app .hc .avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--line-2-c);
  background: var(--line-2-c);
  color: var(--ink-c);
  font: 400 15px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
body.team-app .hc .avatar--on,
body.team-app .hc .avatar[data-state="on"] { background: var(--accent-c); border-color: var(--accent-c); color: var(--on-accent-c); }
body.team-app .hc .avatar--off,
body.team-app .hc .avatar[data-state="off"] { background: transparent; border-color: var(--line-2-c); color: var(--text-c); }

/* --------------------------------------------------------------------------
   7. Empty, error, foot
   -------------------------------------------------------------------------- */

body.team-app .hc__empty {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: var(--app-t-body, 400 15px/1.5 var(--font-body));
  color: var(--text-c); /* content, not meta — never muted */
}
body.team-app .hc__err {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--bad);
  background: var(--app-bad-tint, rgba(201, 107, 90, 0.08));
  color: var(--ink-c);
  font: var(--app-t-body, 400 15px/1.5 var(--font-body));
}
body.team-app .hc__err::before {
  content: "!";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: var(--bad);
  color: var(--on-accent-c);
  font: 400 15px/20px var(--font-display);
  text-align: center;
}
/* (#panel-home in the selector so this beats app-cards.css's inline
   "p .linkish:not(.ms-quiet)" rule, which is (0,5,1)) */
body.team-app #panel-home .hc__err .linkish,
body.team-app #panel-home .hc__empty .linkish {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: -12px 0;
  padding: 0;
  color: var(--ink-c);
  font: 700 15px/1 var(--font-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.team-app #panel-home .hc__err .linkish:hover { color: var(--accent-c); }

body.team-app .hc__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: auto; /* foots line up across a row */
  padding-top: 2px;
}
body.team-app .hc .hc__go {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--accent-c);
  font: 700 15px/1 var(--font-body);
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.team-app .hc .hc__go:hover { color: var(--accent-hover-c); text-decoration-color: currentColor; }
body.team-app .hc .hc__go:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }

/* Card O's ghost buttons (one per visible money tab). */
body.team-app .hc__actions,
body.team-app .hc__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.team-app .hc .btn--sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
body.team-app .hc .btn .tab__lock {
  display: inline-block;
  width: 11px;
  height: 13px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--lock-mask) center / contain no-repeat;
  mask: var(--lock-mask) center / contain no-repeat;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   8. Card J — seven columns of covers, the number always printed as text
   -------------------------------------------------------------------------- */

body.team-app .hc__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
body.team-app .hc__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* app-home.js: .hc__day > .hc__bar > .hc__bar-fill (inline height %), then
   .hc__day-n (the number) and .hc__day-l (the day); today is .is-today. */
body.team-app .hc__day-label,
body.team-app .hc__day-l {
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
  line-height: 1.2;
  color: var(--text-c);
  text-align: center;
}
body.team-app .hc__day-track,
body.team-app .hc__bar {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 96px;
  background: var(--bg-c);
  border-bottom: 1px solid var(--line-2-c);
}
body.team-app .hc__day-bar,
body.team-app .hc__bar-fill {
  width: 100%;
  height: 0;
  background: var(--accent-c);
}
body.team-app .hc__day-num,
body.team-app .hc__day-n {
  font: 700 15px/1 var(--font-body);
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
}
body.team-app :is(.hc__day--today, .hc__day.is-today) :is(.hc__day-label, .hc__day-l) { color: var(--ink-c); font-weight: 700; }
body.team-app :is(.hc__day--today, .hc__day.is-today) :is(.hc__day-track, .hc__bar) { border-bottom: 2px solid var(--ink-c); }
body.team-app :is(.hc__day--today, .hc__day.is-today) :is(.hc__day-bar, .hc__bar-fill) { box-shadow: inset 0 0 0 1px var(--ink-c); }
@media (max-width: 760px) {
  body.team-app .hc__days { gap: 4px; }
  /* Seven columns in ~42px each: every label breaks the same way ("Sat" / "19"). */
  body.team-app .hc__day-label,
  body.team-app .hc__day-l { width: min-content; }
}

/* --------------------------------------------------------------------------
   9. Skeleton while a card loads (existing shimmer: styles.css .skel)
   -------------------------------------------------------------------------- */

body.team-app .hc .skel-block {
  width: 55%;
  min-height: 18px;
  margin: 0;
  border-radius: 0;
}
body.team-app .hc .skel-block + .skel-block { width: 40%; min-height: 44px; }
body.team-app .hc .skel-block + .skel-block + .skel-block { width: 75%; min-height: 18px; }

/* --------------------------------------------------------------------------
   10. Breakpoint colour: meta is --muted-c only on desktop (§0.1)
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  body.team-app .hc__when,
  body.team-app .hc__kicker,
  body.team-app .hc__label-sub { color: var(--muted-c); }
}

/* --------------------------------------------------------------------------
   11. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  body.team-app .hc *,
  body.team-app .hc *::before { transition-duration: 0ms !important; }
}
@media print {
  body.team-app .home__head .btn--sm,
  body.team-app .hc__foot,
  body.team-app .hc__actions,
  body.team-app .hc__btns { display: none; }
  body.team-app .home__grid { display: block; }
  body.team-app .hc { margin-bottom: 12px; }
}