/* ======================================================
   skin.css — applies the RC AV Team Dashboard look
   to the Install Plan team pages.
   Loaded AFTER style.css to override key elements.
   ====================================================== */

@font-face {
  font-family: 'DIN Condensed Bold';
  src: url('/fonts/din-condensed-subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --hazard-yellow: #FFC220;
  --bg-tertiary: #F0F5FB;
  /* Default page accent — overridden per body class below */
  --team-accent: #FFC220;
}

/* Per-team accent colours (match the bars on the install master plan timeline) */
body.team-i1         { --team-accent: #1170CC; } /* sapphire blue */
body.team-i2         { --team-accent: #E96320; } /* cinnabar */
body.team-i3         { --team-accent: #169B5E; } /* forest green */
body.team-i4         { --team-accent: #D33D7A; } /* magenta */
body.team-i5         { --team-accent: #7458C9; } /* violet */
body.team-cabling    { --team-accent: #006DAA; } /* cornflower */
body.team-electrical { --team-accent: #4A8DD4; } /* lighter blue (electrical bar is dark prussian, brightened for accent visibility) */
body.team-qa         { --team-accent: #C45313; } /* burnt orange */
body.team-safety     { --team-accent: #C00000; } /* critical red */
body.team-commission { --team-accent: #0F7A4D; } /* deep green */

html, body { overflow-x: clip; }

body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  background: var(--body-bg);
}

h1, h2, h3, h4, h5, h6,
.role-h, .sub-h {
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
  letter-spacing: 0.03em;
}

/* PAGE CARD */
.page {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 48px 48px 56px !important;
  background: var(--bg) !important;
  border: 1px solid var(--text) !important;
  position: relative;
  overflow: visible !important;
}

/* Hide the original crumbs (we add a back-link in the dark header instead) */
.page > nav.crumbs { display: none !important; }

/* TITLE BAR — full-viewport dark Prussian-blue (matches master plan exactly) */
header.title-bar,
header.title-bar.team-sub {
  background: var(--text) !important;
  border-bottom: none !important;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: -48px !important;
  margin-bottom: 0 !important;
  padding: 48px 108px 30px 48px !important;
  position: relative;
  z-index: 2;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  text-align: center !important;
  gap: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
header.title-bar h1,
header.title-bar.team-sub h1 {
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 64px !important;
  font-weight: 700 !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-align: center !important;
  line-height: 1.0 !important;
  border: none !important;
  max-width: none !important;
}
header.title-bar .meta,
header.title-bar.team-sub .meta {
  color: var(--team-accent) !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* BACK LINK — circular icon mirroring the profile icon on the right */
.back-link {
  position: absolute;
  top: 48px;
  left: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 3px solid var(--hazard-yellow);
  color: var(--hazard-yellow);
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.back-link:hover {
  background: var(--hazard-yellow);
  border-color: var(--hazard-yellow);
  color: var(--text);
  transform: scale(1.05);
}

/* PROFILE ICON */
.profile-icon {
  position: absolute;
  top: 48px;
  right: 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  z-index: 5;
  cursor: pointer;
  border: 2px solid var(--text);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35);
  text-decoration: none;
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  transition: background 0.12s;
}
.profile-icon:hover { background: var(--team-accent); }
.profile-icon .ring {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #16A34A;
  border: 2px solid var(--text);
}

/* TEAM MENU — Departures Board
   Matches master plan: dark band full viewport, cells capped at 1520px
   The horizontal padding scales with viewport so cells align with master plan. */
nav.team-menu {
  display: grid !important;
  grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
  gap: 0 !important;
  background: var(--text) !important;
  margin: 0 calc(50% - 50vw) 32px !important;
  padding: 4px max(20px, calc(50vw - 756px)) 26px !important;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  position: relative;
  z-index: 9;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  counter-reset: tab-num 0;
  max-width: none !important;
}
nav.team-menu a {
  flex: none !important;
  text-decoration: none !important;
  background: var(--text) !important;
  padding: 14px 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  min-height: 78px !important;
  position: relative !important;
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  transition: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  isolation: isolate !important;
  will-change: auto !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  contain: layout paint !important;
  z-index: 1 !important;
  border-right-width: 0 !important;
  box-shadow: 1px 0 0 0 rgba(255,255,255,0.08) !important;
}
nav.team-menu a:last-child { box-shadow: none !important; }
nav.team-menu a:focus,
nav.team-menu a:focus-visible,
nav.team-menu a:active,
nav.team-menu a:visited {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: 1px 0 0 0 rgba(255,255,255,0.08) !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
}
nav.team-menu a:last-child:focus,
nav.team-menu a:last-child:focus-visible,
nav.team-menu a:last-child:active {
  box-shadow: none !important;
}
nav.team-menu a:focus,
nav.team-menu a:focus-visible,
nav.team-menu a:active {
  outline: none !important;
  box-shadow: none !important;
  background: var(--text) !important;
}
nav.team-menu a.active:focus,
nav.team-menu a.active:focus-visible,
nav.team-menu a.active:active {
  background: var(--team-accent) !important;
}
nav.team-menu a:last-child { border-right: none !important; }
nav.team-menu a:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #FFFFFF !important;
}
nav.team-menu a.active {
  background: var(--team-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 1px 0 0 0 rgba(255,255,255,0.08) !important;
}
nav.team-menu a.active::before { color: #FFFFFF !important; }
nav.team-menu a.active::after  { color: rgba(255,255,255,0.85) !important; }
nav.team-menu a::before {
  content: counter(tab-num, decimal-leading-zero);
  counter-increment: tab-num;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10.5px !important;
  color: var(--team-accent) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.5 !important;
  margin-bottom: 6px !important;
  display: block !important;
  text-transform: none !important;
}
nav.team-menu a::before { content: '▸ ' counter(tab-num, decimal-leading-zero); }
nav.team-menu a.active::before { color: #FFFFFF !important; }

/* Captain initials below each tab name (matches master plan tabs) */
nav.team-menu a::after {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 9.5px !important;
  color: rgba(255,255,255,0.78) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.5 !important;
  margin-top: 6px !important;
  display: block !important;
  text-transform: none !important;
  content: '\00A0';
}
nav.team-menu a.active::after { color: rgba(255,255,255,0.85) !important; }
nav.team-menu a[href*="team-install-1.html"]::after  { content: 'D. OXTON'; }
nav.team-menu a[href*="team-install-2.html"]::after  { content: 'M. KIMBER'; }
nav.team-menu a[href*="team-install-3.html"]::after  { content: 'L. RUSSELL'; }
nav.team-menu a[href*="team-install-4.html"]::after  { content: 'L. CAROSI'; }
nav.team-menu a[href*="team-install-5.html"]::after  { content: 'L. MIDDLETON'; }
nav.team-menu a[href*="team-cabling.html"]::after    { content: 'D. HICKERY'; }
nav.team-menu a[href*="team-electrical.html"]::after { content: 'J. DUTTON'; }
nav.team-menu a[href*="team-qa-and-packing.html"]::after { content: 'M. MERRITT'; }
nav.team-menu a[href*="team-safety.html"]::after     { content: 'N. MANGA'; }
nav.team-menu a[href*="team-commissioning.html"]::after { content: 'D. BAGGS'; }

@media (max-width: 1100px) {
  nav.team-menu { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 600px) {
  nav.team-menu { grid-template-columns: repeat(2, 1fr) !important; }
}

/* SECTION H2 */
section h2 {
  font-family: 'DIN Condensed Bold', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--text) !important;
  border-bottom: 2px solid var(--text) !important;
  padding: 0 0 6px !important;
  margin: 0 0 12px !important;
  display: inline-block !important;
  line-height: 1.0 !important;
}
section p.lede {
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}

/* FACTS / OVERVIEW STATS */
.fact {
  background: var(--bg-alt) !important;
  border: 0.5px solid var(--text) !important;
  border-left: 4px solid var(--team-accent) !important;
  padding: 8px 12px !important;
}
.fact .label, .fact p.label {
  font-family: 'DIN Condensed Bold', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  margin: 0 0 4px !important;
}
.fact .value, .fact p.value {
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0;
  text-transform: uppercase;
}
/* Lock all .fact boxes to the same height (Install 1 sets the standard).
   The Team Members box auto-shrinks text and switches to 3 columns when
   the team is bigger, so it never stretches the row. */
.facts .fact {
  min-height: 110px !important;
  max-height: 110px !important;
  overflow: hidden !important;
}

/* Team members fact (third in the row after reorder) — default to 2 columns. */
.facts > .fact:nth-child(3) .value {
  column-count: 2;
  column-gap: 14px;
  column-rule: 0.5px solid var(--border);
  column-fill: balance;
  font-size: 13px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
  word-break: keep-all;
  hyphens: none;
  height: 100%;
}
/* Larger teams (8+ members) — switch to 3 columns and shrink text so the
   box stays locked at 110px. */
body.team-cabling .facts > .fact:nth-child(3) .value,
body.team-qa .facts > .fact:nth-child(3) .value {
  column-count: 3;
  column-gap: 12px;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
@media (max-width: 700px) {
  .facts > .fact:nth-child(3) .value { column-count: 1; }
  body.team-cabling .facts > .fact:nth-child(3) .value,
  body.team-qa .facts > .fact:nth-child(3) .value { column-count: 2; }
}

/* Half-width fact (% Complete, JHA download) */
.facts .fact.half {
  flex: 0.5 1 100px !important;
  min-width: 100px !important;
}

/* % Complete card — live progress for the team */
.facts .fact.pct-complete-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
  border-left: 4px solid var(--team-accent) !important;
}
.facts .fact.pct-complete-card .label {
  margin: 0 0 4px !important;
  font-family: 'DIN Condensed Bold', sans-serif !important;
  font-size: 12.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}
.facts .fact.pct-complete-card .value {
  display: flex !important;
  align-items: baseline !important;
  gap: 2px !important;
  font-family: 'DIN Condensed Bold', sans-serif !important;
  color: var(--text) !important;
  margin: 0 !important;
  line-height: 1.0 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.facts .fact.pct-complete-card .pct-num {
  font-size: 38px !important;
  font-weight: 700 !important;
  color: var(--team-accent) !important;
}
.facts .fact.pct-complete-card .pct-unit {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--team-accent) !important;
  margin-left: 1px !important;
}
.facts .fact.pct-complete-card .pct-meta {
  margin: 4px 0 0 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
}
.facts .fact.pct-complete-card.is-complete .pct-num,
.facts .fact.pct-complete-card.is-complete .pct-unit {
  color: var(--crew-install, #169B5E) !important;
}

/* JHA download button — hazard-stripe hatch in the team accent colour */
.facts .fact.jha-download {
  text-decoration: none !important;
  cursor: pointer !important;
  background: repeating-linear-gradient(
    45deg,
    var(--team-accent) 0,
    var(--team-accent) 10px,
    var(--text) 10px,
    var(--text) 20px
  ) !important;
  border: 0.5px solid var(--text) !important;
  border-left: 4px solid var(--team-accent) !important;
  transition: background 0.15s, filter 0.12s, transform 0.12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}
.facts .fact.jha-download .label {
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5) !important;
  background: transparent !important;
  padding: 0 !important;
}
.facts .fact.jha-download .jha-sub {
  display: block !important;
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  margin-top: 1px !important;
  font-weight: 700 !important;
}
.facts .fact.jha-download .value {
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
}
.facts .fact.jha-download .jha-icon {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.facts .fact.jha-download:hover {
  background: var(--text) !important;
  border-color: var(--text) !important;
  border-left: 4px solid var(--team-accent) !important;
  transform: translateY(-1px) !important;
}
.facts .fact.jha-download:hover .label,
.facts .fact.jha-download:hover .value {
  background: transparent !important;
}
.facts .fact.jha-download:hover .label,
.facts .fact.jha-download:hover .jha-icon {
  color: #FFFFFF !important;
}

/* T05 incident report button — twin to DC-85 in red hazard stripes.
   Same visual weight, same layout — sits beside DC-85 as an equally important reference. */
.facts .fact.t05-incident {
  text-decoration: none !important;
  cursor: pointer !important;
  background: repeating-linear-gradient(
    45deg,
    #C0392B 0,
    #C0392B 10px,
    #5A1414 10px,
    #5A1414 20px
  ) !important;
  border: 0.5px solid #5A1414 !important;
  border-left: 4px solid #C0392B !important;
  transition: filter 0.15s, transform 0.12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}
.facts .fact.t05-incident .label {
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5) !important;
  background: transparent !important;
  padding: 0 !important;
}
.facts .fact.t05-incident .value {
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
}
.facts .fact.t05-incident .t05-sub {
  display: block !important;
  font-size: 16px !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  margin-top: 1px !important;
  font-weight: 700 !important;
}
.facts .fact.t05-incident .jha-icon {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.facts .fact.t05-incident:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

/* Equipment Manager action card (RCAV-016) — same treatment as the T05 card,
   themed teal so it reads as a styled action/tool distinct from the red
   incident button and the green observation button. Links to qa-checkin.html. */
.facts .fact.equipment-manager {
  text-decoration: none !important;
  cursor: pointer !important;
  background: repeating-linear-gradient(
    45deg,
    #138086 0,
    #138086 10px,
    #0B3D40 10px,
    #0B3D40 20px
  ) !important;
  border: 0.5px solid #0B3D40 !important;
  border-left: 4px solid #138086 !important;
  transition: filter 0.15s, transform 0.12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}
.facts .fact.equipment-manager .label {
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5) !important;
  background: transparent !important;
  padding: 0 !important;
}
.facts .fact.equipment-manager .value {
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
}
.facts .fact.equipment-manager .jha-icon {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.facts .fact.equipment-manager:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

/* Safety Observation action card — same treatment as the T05 card, themed
   green (the observation feature's colour) so it reads as a styled action but
   isn't mistaken for the red incident button. */
.facts .fact.obs-log {
  text-decoration: none !important;
  cursor: pointer !important;
  background: repeating-linear-gradient(
    45deg,
    #2E5E3A 0,
    #2E5E3A 10px,
    #163A20 10px,
    #163A20 20px
  ) !important;
  border: 0.5px solid #163A20 !important;
  border-left: 4px solid #2E5E3A !important;
  transition: filter 0.15s, transform 0.12s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}
.facts .fact.obs-log .label {
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 2px rgba(0,0,0,0.5) !important;
  background: transparent !important;
  padding: 0 !important;
}
.facts .fact.obs-log .value {
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-transform: uppercase !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
  position: absolute !important;
  bottom: 8px !important;
  right: 12px !important;
}
.facts .fact.obs-log .jha-icon {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}
.facts .fact.obs-log:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

/* T05 severity badges — used in the per-team Incident Reports collapsible. */
.t05-sev-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: 'DIN Condensed Bold', sans-serif;
}
.t05-sev-minor        { background: #F4F4F0; color: #555; }
.t05-sev-serious      { background: #FDF2E2; color: #C77F1F; border: 1px solid #C77F1F; }
.t05-sev-catastrophic { background: #C0392B; color: #fff; }

/* Subtitle inside .fact .value — sits below the name on its own line.
   .long / .x-long modifiers are applied automatically by inline JS based on
   text length, so long descriptions don't dominate the card. */
.fact-sub {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: capitalize !important;
  color: var(--text-muted) !important;
  line-height: 1.4;
}
.fact-sub.long {
  font-size: 11.5px !important;
  line-height: 1.35;
}
.fact-sub.x-long {
  font-size: 10.5px !important;
  line-height: 1.3;
  letter-spacing: 0.015em !important;
}

/* Team Members facts card pills. These classes are styled in dashboard.css, which the
   install pages do NOT load, so the names ran together here — define them locally. */
.role-line {
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); margin: 12px 0 5px;
}
.role-line:first-child { margin-top: 0; }
.name-list { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.name-pill {
  font-size: 13px; color: var(--text);
  padding: 4px 10px;
  background: var(--bg-tertiary, #F0F5FB);
  border: 0.5px solid var(--border, rgba(6,26,64,0.18));
  border-radius: 2px; font-weight: 500; letter-spacing: 0.01em;
}
.name-pill.lead {
  background: #061A40; color: #FFFFFF; border-color: #061A40;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px;
}

/* Steps table headers */
.steps thead th, table.steps thead th {
  background: var(--text) !important;
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  padding: 12px 16px !important;
}

/* Hide theme toggle for simplicity on team pages */
.theme-toggle { display: none !important; }

/* Step rows — hover and completed states tint the team accent over a theme-aware
   base (--row-tint-base: white in light mode, deep blue in dark mode) so the row
   hints at the team identity in both themes without ever washing the text out. */
table.steps tbody tr:hover {
  background: color-mix(in srgb, var(--team-accent) 14%, var(--row-tint-base)) !important;
}
table.steps tbody tr.completed td {
  background: color-mix(in srgb, var(--team-accent) 12%, var(--row-tint-base)) !important;
}

/* CR-WEB-060: a tick that hasn't reached the database yet (no signal). It is
   safe in the on-device queue and will save itself when the WiFi comes back —
   the amber bar and the "WAITING TO SAVE" flag make that visible, so nobody
   re-ticks it and nobody assumes it's saved when it isn't. */
table.steps tbody tr.tick-pending td {
  background: color-mix(in srgb, #E8A33D 16%, var(--row-tint-base)) !important;
}
table.steps tbody tr.tick-pending td.step-num {
  box-shadow: inset 3px 0 0 #E8A33D;
}
/* A tick the DATABASE refused. It is not saved and it never will be without
   someone doing something. Loud on purpose: silence here is how work gets
   skipped. */
table.steps tbody tr.tick-failed td {
  background: color-mix(in srgb, #C1272D 12%, var(--row-tint-base)) !important;
}
table.steps tbody tr.tick-failed td.step-num {
  box-shadow: inset 3px 0 0 #C1272D;
}
table.steps tbody tr.tick-failed td.step-check::after {
  content: "NOT SAVED";
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #C1272D;
  font-weight: 700;
  white-space: nowrap;
}
table.steps tbody tr.tick-pending td.step-check::after {
  content: "WAITING TO SAVE";
  display: block;
  margin-top: 3px;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  line-height: 1.1;
  color: #8A5A12;
  white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  table.steps tbody tr.tick-pending td.step-check::after { color: #E8A33D; }
}

/* Collapsible section summaries (Task Timeline, Team Coordination, Detailed Task List)
   Default = dark Prussian blue. Expanded = team accent colour. Both with white text. */
details.collapsible > summary {
  background: var(--text) !important;
  color: #FFFFFF !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 17px 16px 13px !important;
  border: none !important;
  border-radius: 2px !important;
  transition: background 0.15s ease !important;
}
details.collapsible > summary::before {
  border-top-color: #FFFFFF !important;
  position: relative !important;
  top: -3px !important;
}
details.collapsible[open] > summary {
  background: var(--team-accent) !important;
  border-radius: 2px 2px 0 0 !important;
}
details.collapsible > summary:hover {
  background: var(--team-accent) !important;
  color: #FFFFFF !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
details.collapsible[open] > summary:hover {
  filter: brightness(1.1) !important;
}
details.collapsible > summary:hover::before {
  border-top-color: #FFFFFF !important;
}


/* ===== RCAV home-style header + light menu + white page (18 Jun 2026, v2) ===== */
body { background: #FFFFFF !important; }
.page { border: none !important; }

header.title-bar.rcav-hdr3 {
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0 !important;
  min-height: 116px !important;
  gap: 0 !important;
  text-align: left !important;
}
.rcav-hdr3 .hdr3-left { display: flex !important; align-items: center; gap: 24px; min-width: 0; }
.rcav-hdr3 .hdr3-emblem { align-self: stretch; width: 128px; flex: none; background: var(--hazard-yellow); display: flex; align-items: center; justify-content: center; }
.rcav-hdr3 .hdr3-emblem svg { display: block; width: 66px; height: 66px; }
.rcav-hdr3 .hdr3-text { display: flex; flex-flow: row wrap; align-items: baseline; column-gap: 18px; min-width: 0; }
.rcav-hdr3 .hdr3-eyebrow { flex: 0 0 100%; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--hazard-yellow); font-weight: 700; margin-bottom: 6px; }
header.title-bar.rcav-hdr3 h1 { font-size: 46px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; line-height: .92 !important; color: #FFFFFF !important; border: none !important; text-transform: uppercase !important; }
.rcav-hdr3 .hdr3-text .meta { color: rgba(255,255,255,0.72) !important; text-align: left !important; font-size: 15px !important; line-height: 1.35 !important; margin: 4px 0 0 !important; text-transform: uppercase !important; font-weight: 600 !important; letter-spacing: 0.03em !important; flex: 0 0 100% !important; max-width: none !important; }
.rcav-hdr3 .hdr3-right { display: flex !important; align-items: center; gap: 18px; padding-right: 32px; }
header.title-bar.rcav-hdr3 .back-link { position: static !important; top: auto !important; left: auto !important; margin: 0 !important; width: auto !important; min-width: 48px !important; max-width: 48px !important; height: 48px !important; border-radius: 24px !important; overflow: hidden !important; white-space: nowrap !important; gap: 0 !important; padding: 0 !important; justify-content: center !important; transition: max-width .25s ease, gap .2s ease, padding .2s ease, background .12s, border-color .12s, color .12s !important; }
header.title-bar.rcav-hdr3 .back-link .back-label { max-width: 0 !important; opacity: 0 !important; overflow: hidden !important; position: relative !important; top: 2px !important; font-family: 'DIN Condensed Bold','Bebas Neue',sans-serif !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .05em !important; text-transform: uppercase !important; line-height: 1 !important; transition: max-width .25s ease, opacity .2s ease !important; }
header.title-bar.rcav-hdr3 .back-link:hover, header.title-bar.rcav-hdr3 .back-link:focus-visible { max-width: 260px !important; gap: 8px !important; padding: 0 18px !important; background: var(--hazard-yellow) !important; border-color: var(--hazard-yellow) !important; color: var(--text) !important; }
header.title-bar.rcav-hdr3 .back-link:hover .back-label, header.title-bar.rcav-hdr3 .back-link:focus-visible .back-label { max-width: 220px !important; opacity: 1 !important; }
/* One-time attention "peek" on load (added by profile-menu.js), reusing the hover look. */
header.title-bar.rcav-hdr3 .back-link.peek { max-width: 260px !important; gap: 8px !important; padding: 0 18px !important; background: var(--hazard-yellow) !important; border-color: var(--hazard-yellow) !important; color: var(--text) !important; }
header.title-bar.rcav-hdr3 .back-link.peek .back-label { max-width: 220px !important; opacity: 1 !important; }
header.title-bar.rcav-hdr3 .profile-icon { position: static !important; top: auto !important; right: auto !important; margin: 0 !important; }

nav.team-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 2px !important;
  background: #FFFFFF !important;
  margin: 0 calc(50% - 50vw) 18px !important;
  padding: 14px 20px 6px !important;
  border: none !important;
  max-width: none !important;
}
nav.team-menu a {
  flex: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-right: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  padding: 11px 14px 9px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: #5F708F !important;
  font-size: 18px !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
  overflow: visible !important;
  contain: none !important;
  transition: color .12s, border-color .12s !important;
}
nav.team-menu a::before { display: none !important; }
nav.team-menu a::after { color: #9DB0CC !important; font-size: 9px !important; margin-top: 3px !important; margin-bottom: 0 !important; }
nav.team-menu a:hover { background: transparent !important; color: var(--text) !important; border-bottom-color: #C9D6E8 !important; box-shadow: none !important; }
nav.team-menu a.active { background: transparent !important; color: var(--team-accent, #FFC220) !important; border-bottom: 3px solid var(--team-accent, #FFC220) !important; box-shadow: none !important; }
nav.team-menu a.active::after { color: var(--team-accent, #5F708F) !important; opacity: 0.85 !important; }
nav.team-menu a:focus, nav.team-menu a:focus-visible, nav.team-menu a:active { background: transparent !important; box-shadow: none !important; outline: none !important; border-bottom-color: var(--team-accent, #FFC220) !important; }
nav.team-menu a.active:focus, nav.team-menu a.active:focus-visible, nav.team-menu a.active:active { background: transparent !important; border-bottom: 3px solid var(--team-accent, #FFC220) !important; }
nav.team-menu a:last-child { box-shadow: none !important; border-right: none !important; }

/* per-team hover accents on the team menu */
nav.team-menu a[href*="team-install-1.html"]:hover, nav.team-menu a[href*="team-install-1.html"]:focus-visible { border-bottom-color: #1170CC !important; }
nav.team-menu a[href*="team-install-2.html"]:hover, nav.team-menu a[href*="team-install-2.html"]:focus-visible { border-bottom-color: #E96320 !important; }
nav.team-menu a[href*="team-install-3.html"]:hover, nav.team-menu a[href*="team-install-3.html"]:focus-visible { border-bottom-color: #169B5E !important; }
nav.team-menu a[href*="team-install-4.html"]:hover, nav.team-menu a[href*="team-install-4.html"]:focus-visible { border-bottom-color: #D33D7A !important; }
nav.team-menu a[href*="team-install-5.html"]:hover, nav.team-menu a[href*="team-install-5.html"]:focus-visible { border-bottom-color: #7458C9 !important; }
nav.team-menu a[href*="team-cabling.html"]:hover, nav.team-menu a[href*="team-cabling.html"]:focus-visible { border-bottom-color: #006DAA !important; }
nav.team-menu a[href*="team-electrical.html"]:hover, nav.team-menu a[href*="team-electrical.html"]:focus-visible { border-bottom-color: #061A40 !important; }
nav.team-menu a[href*="team-qa-and-packing.html"]:hover, nav.team-menu a[href*="team-qa-and-packing.html"]:focus-visible { border-bottom-color: #C45313 !important; }
nav.team-menu a[href*="team-safety.html"]:hover, nav.team-menu a[href*="team-safety.html"]:focus-visible { border-bottom-color: #C00000 !important; }
nav.team-menu a[href*="team-commissioning.html"]:hover, nav.team-menu a[href*="team-commissioning.html"]:focus-visible { border-bottom-color: #0F7A4D !important; }
nav.team-menu a[href*="install/index.html"]:hover, nav.team-menu a[href*="install/index.html"]:focus-visible { border-bottom-color: #FFC220 !important; }

/* ============================================================
   RCAV-007 — Mobile friendliness (added June 2026)
   Shared by the install pages, sign-in, profile and admin pages
   (all link skin.css last, so these win on equal specificity).
   Tightens phone gutters, touch targets and the iOS input-zoom
   guard. Modal inputs are raised to 16px inside their own JS
   modules, which carry higher specificity than these rules.
   ============================================================ */
@media (max-width: 768px) {
  /* Inputs at 16px stop iOS Safari zooming the page on focus */
  input, select, textarea { font-size: 16px; }
  /* Comfortable tap targets for the main navigation and header controls */
  nav.team-menu a { min-height: 44px; }
  .action-btn, .theme-toggle, .back-link { min-height: 44px; }
}
@media (max-width: 600px) {
  /* Reclaim the fixed side gutters on phones */
  .page { padding: 20px 14px !important; }
}

/* ============================================================
   CR-WEB-055 — PHONE-ONLY STACKED TASK TIMELINE (July 2026)
   The generated per-team Gantt (.gantt-table.detail, built by
   install/install-team.js) forced a ~1100px horizontal scroll on
   phones. Below 700px each row linearises instead: step label on
   top, then a full-width proportional bar strip. The bars, the
   gridlines and the deadline line are all percentage-positioned
   (inline styles from the generator), so they scale with the
   strip — nothing here repositions them. Scoped to
   .gantt-table.detail only: the master plan Day Timeline on
   install/index.html is a separate curated table WITHOUT the
   .detail class (and with its own inline CSS), so it is
   deliberately untouched. Desktop and iPad (>700px) match no
   rule in this block; "screen and" keeps print/PDF export on
   the original table layout.
   ============================================================ */

/* The time-window text emitted into each Gantt row label by
   install-team.js. Hidden everywhere by default — only the phone
   block below reveals it — so desktop/iPad render pixel-identically
   with or without the span. */
.gantt-when { display: none; }

@media screen and (max-width: 700px) {
  /* Linearise the generated table: every structural box becomes a block. */
  table.gantt-table.detail { display: block; min-width: 0; width: 100%; }
  .gantt-table.detail thead,
  .gantt-table.detail tbody,
  .gantt-table.detail tr,
  .gantt-table.detail th,
  .gantt-table.detail td { display: block; width: 100%; box-sizing: border-box; }

  /* Print-pagination artefact — meaningless once stacked. */
  .gantt-table.detail tfoot { display: none; }

  /* Axis: drop the label-column spacer so the hour rail runs full width
     (its ticks are %-positioned and scale). Right-anchor the deadline
     label so "13:00 ◄" cannot clip at the right-hand edge. */
  .gantt-table.detail th.axis-spacer { display: none; }
  .gantt-table.detail .tick.deadline { transform: translateX(-100%); }

  /* Phase heading full width; its decorative gridline spacer strip goes.
     The 2px .phase-divider row already renders as a full-width rule
     between phases, keeping the phase grouping visible. */
  .gantt-table.detail tr.phase-row td.row-cells.section-spacer { display: none; }

  /* Step label sits above its bar. Let the people list wrap (it is
     nowrap in the desktop column layout). */
  .gantt-table.detail td.row-label { padding: 10px 0 6px; }
  .gantt-table.detail .step-people { white-space: normal; }

  /* Show the time window in the label (hidden on desktop, see above) —
     short bars are too narrow for their in-bar time text on a phone. */
  .gantt-table.detail .gantt-when {
    display: inline-block;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 10px;
    color: var(--text-muted);
    margin-right: 6px;
    white-space: nowrap;
  }

  /* Bar strip: full width directly under its label (the label's own top
     border separates the steps, so the strip drops its divider). Slightly
     taller strip for touch, and a floor on bar width so very short steps
     stay visible and tappable. left/width keep the generator's inline
     percentages — position and length stay proportional to the time grid,
     and the per-step status colour (inline background) is untouched. */
  .gantt-table.detail td.row-cells { border-top: none; }
  .gantt-table.detail .row-cells .row-cells-inner { height: 34px; }
  .gantt-table.detail .bar { min-width: 24px; }

  /* Each stacked strip keeps its own now-marker inside its bounds instead
     of the ±100px bleed that lines rows up in the desktop table layout. */
  .gantt-table.detail .row-cells-inner .now-line { top: 0; bottom: 0; }
}

/* ---- MOBILE (Joel's choice, overnight): SIDE-SCROLL the Gantt + the Detailed
   Task List instead of stacking. The .gantt container already scrolls
   (overflow-x:auto + min-width:1000px), so we just revert the CR-WEB-055
   linearisation above so the table stays a real table. On the DETAIL Gantt the
   row-label is display:flex on desktop (style.css), so restore that, not
   table-cell. The 7-column Detailed Task List (.steps in #pdf-detail) gets a
   min-width and its .body scrolls; every collapsible body scrolls wide tables. */
@media screen and (max-width: 700px) {
  table.gantt-table.detail { display: table !important; min-width: 1000px !important; width: 100% !important; }
  .gantt-table.detail thead { display: table-header-group !important; }
  .gantt-table.detail tbody { display: table-row-group !important; }
  .gantt-table.detail tfoot { display: table-footer-group !important; }
  .gantt-table.detail tr { display: table-row !important; width: auto !important; }
  .gantt-table.detail th { display: table-cell !important; width: auto !important; }
  .gantt-table.detail td { display: table-cell !important; width: auto !important; }
  .gantt-table.detail td.row-label { display: flex !important; }
  .gantt-table.detail .gantt-when { display: none !important; }
  .gantt-table.detail th.axis-spacer { display: table-cell !important; }
  .gantt-table.detail tr.phase-row td.row-cells.section-spacer { display: table-cell !important; }
}
@media (max-width: 700px) {
  .collapsible > .body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* The Detailed Task List no longer side-scrolls on phones — it linearises into
     a card per step (block below). Drop the 640px min-width that forced the
     horizontal table, and stop its body clipping the cards. Docs / Incident
     tables and the Task Timeline keep the generic side-scroll above. */
  #pdf-detail > .body { overflow-x: visible; }
}

/* ============================================================
   PHONE-ONLY: DETAILED TASK LIST → VERTICAL STEP CARDS (11 Jul 2026)
   Joel asked for a more visible, vertical-scroll format for the
   Detailed Task List on phones. It was a 7-column table squeezed to
   640px that you had to drag sideways to read. Below 700px each step
   row becomes a self-contained card that reads top to bottom: a
   header strip (step-number badge + time window + a big tick), the
   full procedure text, then labelled EQUIPMENT and CO-160A lines.
   The status ("manual") pill and any empty meta line are dropped to
   declutter. Field labels come from the data-label attributes
   install-team.js writes onto the cells.

   Scoped to #pdf-detail only: the Task Timeline (.gantt-table.detail),
   the Documents and the Incident tables are untouched. "screen and"
   keeps print + PDF export on the original table layout, and every
   rule is inside the phone breakpoint, so desktop and iPad (>700px)
   render exactly as before. Colours use the theme vars, so dark mode
   still works.
   ============================================================ */
@media screen and (max-width: 700px) {
  /* Linearise the table: every structural box becomes a block. */
  #pdf-detail table.steps,
  #pdf-detail table.steps tbody { display: block; width: 100%; min-width: 0; border: none; }
  #pdf-detail table.steps thead { display: none; }   /* column heads are meaningless once stacked */

  /* Each step row = a card. */
  #pdf-detail table.steps tbody tr {
    display: block;
    position: relative;
    background: var(--bg-alt);
    border: 0.5px solid var(--border);
    border-left: 3px solid var(--team-accent, var(--border-strong));
    border-radius: 2px;
    padding: 12px 52px 13px 14px;   /* right pad reserves room for the tick */
    margin: 0 0 10px;
  }
  #pdf-detail table.steps tbody td {
    display: block;
    padding: 0;
    border-bottom: none;
  }

  /* Header strip: step-number badge + time window on one line. */
  #pdf-detail table.steps td.step-num {
    display: inline-block;
    vertical-align: middle;
    background: var(--text);
    color: #FFFFFF;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    margin: 0 8px 9px 0;
    white-space: nowrap;
  }
  #pdf-detail table.steps td.step-window {
    display: inline-block;
    vertical-align: middle;
    width: auto;                     /* undo the desktop td:nth-child(3) width:1% */
    margin: 0 0 9px;
  }
  #pdf-detail table.steps td.step-window br { display: none; }   /* chip + duration on one line */
  #pdf-detail table.steps td.step-window .time { margin-left: 8px; }

  /* Procedure = the hero text: full width, full length, no truncation. */
  #pdf-detail table.steps td.step-proc {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
  }

  /* Labelled meta lines (label from data-label via ::before). */
  #pdf-detail table.steps td.equipment,
  #pdf-detail table.steps td.ref {
    margin-top: 11px;
    font-size: 13px;
    line-height: 1.45;
  }
  #pdf-detail table.steps td.equipment::before,
  #pdf-detail table.steps td.ref::before {
    content: attr(data-label);
    display: block;
    font-family: 'DIN Condensed Bold', 'Bebas Neue', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--team-accent, var(--text));
    margin-bottom: 2px;
  }
  #pdf-detail table.steps td.ref { color: var(--text-muted); }
  /* Empty meta (no equipment / no reference) and the status pill are dropped. */
  #pdf-detail table.steps td.is-empty,
  #pdf-detail table.steps td.step-status { display: none; }

  /* The tick: a big, comfortable tap target pinned top-right. The label fills
     the hit area so the whole 42px square toggles, not just the box. */
  #pdf-detail table.steps td.step-check {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
  }
  #pdf-detail table.steps td.step-check .step-check-lbl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  #pdf-detail table.steps td.step-check input[type="checkbox"] {
    width: 26px;
    height: 26px;
  }

  /* Completed card: accent tint + filled step badge. Unlike the desktop table
     it does NOT strike through or fade the text — a ticked step stays fully
     readable on a phone. Overrides the desktop completed rules in this range. */
  #pdf-detail table.steps tbody tr.completed {
    background: color-mix(in srgb, var(--team-accent) 10%, var(--row-tint-base, #FFFFFF)) !important;
  }
  #pdf-detail table.steps tbody tr.completed td {
    opacity: 1;
    text-decoration: none;
    color: var(--text);
    background: transparent !important;
  }
  #pdf-detail table.steps tbody tr.completed td.ref { color: var(--text-muted); }
  #pdf-detail table.steps tbody tr.completed td.step-num { background: var(--team-accent); }

  /* Dark mode — reachable because team pages hide the theme toggle and fall back
     to the phone's prefers-color-scheme. Navy var(--text) is invisible on the
     dark card, so invert the step-number badge to the same pale accent chip the
     time-chip already uses (dark block further down). Scoped inside this phone
     block, so the desktop dark cell is untouched. */
  html[data-theme="dark"] #pdf-detail table.steps td.step-num {
    background: var(--accent);
    color: var(--accent-ink);
  }
  /* Lift the EQUIPMENT / CO-160A labels off the fixed team accent, which is too
     dark on the navy card for some teams (safety red, violet), to readable ink. */
  html[data-theme="dark"] #pdf-detail table.steps td.equipment::before,
  html[data-theme="dark"] #pdf-detail table.steps td.ref::before {
    color: var(--text);
  }
}

/* ============================================================
   BODY TYPE SCALE + STEP-ROW LAYOUT (3 Jul 2026)
   Source Sans 3 rollout: reading sizes agreed on mockup v11
   (RCAV-Source-Sans-3-Rollout-v1.md). Chips, pills, thead
   labels and DIN Condensed headings intentionally untouched.
   ============================================================ */
:root { --rowpad-l: 12px; --rowpad-r: 12px; --gantt-gutter: 3px; }
.gantt { padding-left: var(--gantt-gutter); padding-right: var(--gantt-gutter); }
.gantt-table.detail .row-label { font-size: 14px; padding-left: var(--rowpad-l); padding-right: var(--rowpad-r); }
.gantt-table.detail .row-label.section-header { font-size: 14px; }
.gantt-table.detail .step-num { font-size: 12px; }
.gantt-table.detail .step-people { font-size: 12.5px; margin-left: 0; }
table.steps { font-size: 14.5px; }
table.steps .equipment { font-size: 13px; }
section p.lede { font-size: 17px; }
.card .body, .card a { font-size: 14.5px; }
ul.overview-bullets li { font-size: 16px; }
.coord-handoff p { font-size: 15px; }
.roster-row { font-size: 15px; }
.roster-row .role-list { font-size: 14px; }

/* Step rows: header line + clamped description + SHOW MORE */
.gantt-table.detail .step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.gantt-table.detail .step-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gantt-table.detail tr.step-row-expanded .step-desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.gantt-table.detail .show-more-btn {
  display: inline-block;
  margin-top: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.gantt-table.detail .show-more-btn:hover { text-decoration: underline; }
.gantt-table.detail .show-more-btn[hidden] { display: none; }

/* ============================================================
   DARK MODE — INSTALL TEAM PAGES (3 Jul 2026)
   The team pages auto-adopt dark when a volunteer's device is set
   to dark mode: install-team.js reads prefers-color-scheme and sets
   [data-theme="dark"], and style.css flips its --bg / --text
   variables. Most surfaces theme themselves off those variables, but
   several bands and chips were built with `background: var(--text)`
   (or a forced white), which turns near-white in dark and hides the
   light text sitting on them. Those bands are all #061A40 in light
   mode, so re-pinning them to #061A40 keeps them identical while the
   page around them goes dark.
   Scoped to [data-theme="dark"] body[class*="team-"] so it only
   touches the team + QA install pages (which share this shell), never
   the sign-in, profile, admin or master-plan pages. Light mode is
   left exactly as it was.
   ============================================================ */

/* ROOT CAUSE. skin.css's own :root (top of this file) re-declares
   --bg-tertiary: #F0F5FB. Because skin.css loads after style.css, that
   equal-specificity :root beat style.css's [data-theme="dark"] value, so
   --bg-tertiary never went dark: it drove the pale coordination time
   chips, the step-row hover tint and the "not in CO-160a" pill. Re-assert
   the dark value after skin.css's :root (mirrors style.css line 29, so it
   is correct on every page that runs in dark). */
[data-theme="dark"] { --bg-tertiary: #0D3258; }

/* Page frame: dark body behind the card; the card keeps the panel navy. */
html[data-theme="dark"] body[class*="team-"] { background: var(--body-bg) !important; }
html[data-theme="dark"] body[class*="team-"] .page { background: var(--bg) !important; }

/* Header band: was var(--text) (near-white in dark) so the white title vanished. */
html[data-theme="dark"] body[class*="team-"] header.title-bar { background: #061A40 !important; }

/* Team tab strip: was a forced white strip; darken it and lift the ink. */
html[data-theme="dark"] body[class*="team-"] nav.team-menu { background: var(--bg-alt) !important; }
html[data-theme="dark"] body[class*="team-"] nav.team-menu a { color: #A9BEDC !important; }
html[data-theme="dark"] body[class*="team-"] nav.team-menu a::after { color: #8EA3C4 !important; }

/* Collapsible section-header bars (Task Timeline, Team Coordination,
   Detailed Task List, Documents, Incident Reports). Only the CLOSED
   state was the near-white bug: the open and hover states already use
   the fixed team accent (readable on dark), so :not([open]) leaves the
   expand cue exactly as it is in light mode. */
html[data-theme="dark"] body[class*="team-"] details.collapsible:not([open]) > summary { background: #061A40 !important; }

/* Table header rows across every .steps table (steps, docs, incidents). */
html[data-theme="dark"] body[class*="team-"] table.steps thead th,
html[data-theme="dark"] body[class*="team-"] .steps thead th { background: #061A40 !important; }

/* Roster header band, where a page uses one. */
html[data-theme="dark"] body[class*="team-"] .roster-head { background: #061A40 !important; }

/* Inline chips that were navy-on-white in light mode: invert to a pale
   accent chip with dark ink so they read on the dark rows. */
html[data-theme="dark"] body[class*="team-"] table.steps .time-chip,
html[data-theme="dark"] body[class*="team-"] table.steps .pill.manual {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}

/* Status pills carried by the current static pages: keep their tinted
   backgrounds but lift the ink off the dark tints so the label reads.
   (The data-driven pages emit only the manual pill, handled above.) */
html[data-theme="dark"] body[class*="team-"] table.steps .pill.confirmed { color: #86D8A0 !important; }
html[data-theme="dark"] body[class*="team-"] table.steps .pill.derived_from_co160a { color: #E6BE93 !important; }
html[data-theme="dark"] body[class*="team-"] table.steps .pill.discrepancy { color: #FFB3A6 !important; }

/* Export / retry button (var(--text) fill in light) → dark button, light ink. */
html[data-theme="dark"] body[class*="team-"] .action-btn { background: var(--bg-alt) !important; color: var(--text) !important; }

/* Profile initials disc: a white disc would swallow the light initials. */
html[data-theme="dark"] body[class*="team-"] .profile-icon { background: rgba(255,255,255,0.12) !important; }

/* ============================================================
   iOS-STYLE RESTYLE — install team pages. Scoped to body[data-team]
   so only the 10 team pages are affected (the overview, register and
   QA check-in pages don't carry data-team). Matches the Install
   Overview restyle. install-team.js hooks and the JHA / TO-5 /
   Equipment Manager button styles are left untouched. Preview on dev.
   ============================================================ */
/* Info facts (people + % complete) become white iOS tiles with a
   team-accent top edge. The styled action buttons are excluded so
   their striped look is preserved. */
body[data-team] .fact:not(.jha-download):not(.t05-incident):not(.equipment-manager):not(.box-label-guide-trigger):not(.obs-log):not(.handover) {
  background: #FFFFFF !important;
  border: 0.5px solid var(--border-strong);
  border-top: 3px solid var(--team-accent);
}
body[data-team] .fact:not(.jha-download):not(.t05-incident):not(.equipment-manager):not(.box-label-guide-trigger):not(.obs-log):not(.handover) .label {
  font-family: 'DIN Condensed Bold', 'Oswald', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.07em;
}
/* Keep dark mode consistent: the tiles read on the dark field too. */
html[data-theme="dark"] body[data-team] .fact:not(.jha-download):not(.t05-incident):not(.equipment-manager):not(.box-label-guide-trigger):not(.obs-log):not(.handover) {
  background: var(--bg-alt) !important;
}
/* Remove the redundant horizontal team menu on team pages — the sidebar covers
   navigation (the app-shell hide rule stopped matching once content moved into
   the shell-body wrapper). */
body[data-team] nav.team-menu { display: none !important; }

/* --- iOS ACCORDION SECTION CARDS ---------------------------------------
   Replace the solid navy summary bars with white rounded cards: a
   team-accent left edge, a right-hand chevron that rotates open/closed,
   and the section body as a white card flush beneath. Matches the app. */
body[data-team] details.collapsible { margin-bottom: 12px; }
body[data-team] details.collapsible > summary {
  background: #FFFFFF !important;
  color: var(--text) !important;
  border: 0.5px solid var(--border-strong) !important;
  border-left: 5px solid var(--team-accent) !important;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(6,26,64,.07);
  display: flex !important;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 17px 46px 13px 18px !important;
  margin: 0 !important;
  font-family: 'DIN Condensed Bold', 'Oswald', sans-serif !important;
  font-size: 22px;
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}
body[data-team] details.collapsible > summary:hover {
  background: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(6,26,64,.12);
  filter: none !important;
}
/* CSS-triangle marker becomes a right-hand chevron (down = closed). */
body[data-team] details.collapsible > summary::before {
  content: '' !important;
  position: absolute !important;
  right: 18px !important; left: auto !important; top: calc(50% - 6px) !important;
  width: 9px !important; height: 9px !important;
  background: none !important;
  border: none !important;
  border-right: 2.5px solid var(--dim) !important;
  border-bottom: 2.5px solid var(--dim) !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
  transition: transform .15s ease !important;
}
body[data-team] details.collapsible[open] > summary::before {
  transform: rotate(-135deg) !important;
  top: calc(50% - 2px) !important;
}
/* Open card joins its body (drop the bottom radius). */
body[data-team] details.collapsible[open] > summary {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* Section body as a white card flush under the summary. */
body[data-team] details.collapsible > .body {
  background: #FFFFFF;
  border: 0.5px solid var(--border-strong) !important;
  border-top: none !important;
  border-left: 5px solid var(--team-accent) !important;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  padding: 16px 18px;
  margin: 0;
}
/* Any count/note in the summary (e.g. the incident count) reads on white. */
body[data-team] details.collapsible > summary .note { color: var(--text-muted) !important; }
/* Dark mode: keep the accordion cards readable on the dark field. */
html[data-theme="dark"] body[data-team] details.collapsible > summary,
html[data-theme="dark"] body[data-team] details.collapsible > .body {
  background: var(--bg-alt) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] body[data-team] details.collapsible[open] > summary { background: var(--bg-alt) !important; }

/* Captain / Assistant subtitle line above the progress card (iOS layout). */
body[data-team] .team-leads {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 14px;
  font-size: 14.5px; color: var(--text);
}
body[data-team] .team-leads .tl-item { font-weight: 600; }
body[data-team] .team-leads .tl-role {
  font-family: 'DIN Condensed Bold', 'Oswald', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--team-accent);
  font-size: 13px; margin-right: 6px;
}

/* Top-row tile split to match the app: a wide progress / % Complete card with
   narrow JHA + TO-5 tiles (~64 / 18 / 18). */
body[data-team] .facts { align-items: stretch; flex-wrap: nowrap; }
body[data-team] .facts .fact.pct-complete-card {
  flex: 1 1 auto !important; width: auto !important;
}
body[data-team] .facts .fact.jha-download,
body[data-team] .facts .fact.t05-incident {
  flex: 0 0 18% !important; width: 18% !important;
}
/* Safety has three action buttons after the progress card (DC-85 / Safety
   Observation / TO-5) — give the observation button the same narrow basis so
   the three read as an even set. QA's JHA lives inside .fact-stack, so this
   only affects the standalone safety buttons. */
body.team-safety .facts .fact.obs-log {
  flex: 0 0 18% !important; width: 18% !important;
}

/* Incident Reports keeps a red accent (matches the TO-5 button), not the team colour. */
body[data-team] details#pdf-incidents > summary,
body[data-team] details#pdf-incidents > .body {
  border-left-color: #C00000 !important;
}

/* ============================================================
   PROGRESS CARD + RECOLOURED ACTION BUTTONS (iOS app parity)
   Rebuilds the top facts row on the Safety and QA & Packing team
   pages to match the mobile app: a white PROGRESS card (donut ring +
   title/steps/people, plus a CRITICAL PATH flag on Safety) in place
   of the old "% Complete" tile, a blue DC-85 JHA button and a green
   SAFETY OBSERVATION button. Scoped to the two pages so the other
   install teams' JHA buttons keep the team-accent stripe.
   The card carries BOTH .progress-card and .pct-complete-card so
   install-team.js keeps filling .pct-num / .pct-done / .pct-total and
   its is-complete toggle still lands.
   ============================================================ */

/* --- PROGRESS CARD -------------------------------------------------- */
/* White rounded card, full row height, laid out as ring | body | flag. */
.facts .fact.progress-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  text-align: left !important;
  padding: 10px 16px !important;
  background: #FFFFFF !important;
  border: 0.5px solid var(--border-strong) !important;
  border-left: 4px solid var(--team-accent) !important;
  overflow: hidden !important;
}
/* Give the card ~2x a single button's basis so it reads as the wide tile. */
body[data-team] .facts .fact.progress-card {
  flex: 1 1 auto !important;
  width: auto !important;
}

/* Donut progress ring — conic-gradient arc driven by --pct (0-100), with a
   white inner disc punched out by ::before to leave the ring. At 0% the whole
   ring reads as the light-grey track. */
.facts .fact.progress-card .progress-ring {
  --pct: 0;
  position: relative;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--team-accent) 0,
      var(--team-accent) calc(var(--pct) * 1%),
      #D9E2EC calc(var(--pct) * 1%),
      #D9E2EC 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
}
.facts .fact.progress-card .progress-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #FFFFFF;
}
.facts .fact.progress-card .progress-ring .pct-num,
.facts .fact.progress-card .progress-ring .pct-unit {
  position: relative;
  z-index: 1;
  top: 3px !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}
.facts .fact.progress-card .progress-ring .pct-num { font-size: 26px !important; }
.facts .fact.progress-card .progress-ring .pct-unit { font-size: 16px !important; margin-left: 1px; }
.facts .fact.progress-card.is-complete .progress-ring {
  background:
    conic-gradient(var(--crew-install, #169B5E) 0, var(--crew-install, #169B5E) 100%);
}

/* Middle text column: PROGRESS title, "0/24 steps", "N PEOPLE". */
.facts .fact.progress-card .progress-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}
.facts .fact.progress-card .progress-title {
  margin: 0 !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--team-accent) !important;
  line-height: 1.05 !important;
}
.facts .fact.progress-card .progress-steps {
  margin: 1px 0 0 !important;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--text-muted) !important;
  text-transform: none !important;
  line-height: 1.2 !important;
}
.facts .fact.progress-card .progress-people {
  margin: 2px 0 0 !important;
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  line-height: 1.1 !important;
}

/* Critical-path flag — Safety only (the QA card omits the element entirely). */
.facts .fact.progress-card .critical-path-flag {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 14px;
  margin-left: auto;
  border-left: 0.5px solid var(--border);
  color: #C00000;
}
.facts .fact.progress-card .critical-path-flag .cp-glyph {
  font-size: 20px;
  line-height: 1;
}
.facts .fact.progress-card .critical-path-flag .cp-text {
  font-family: 'DIN Condensed Bold', 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.0;
}

/* Dark mode: keep the card readable on the dark field (matches the other
   white iOS tiles, which flip to --bg-alt in dark). The ring hole and track
   stay light so the donut still reads. */
html[data-theme="dark"] .facts .fact.progress-card { background: var(--bg-alt) !important; }
html[data-theme="dark"] .facts .fact.progress-card .progress-ring::before { background: var(--bg-alt); }
html[data-theme="dark"] .facts .fact.progress-card .progress-ring .pct-num,
html[data-theme="dark"] .facts .fact.progress-card .progress-ring .pct-unit { color: var(--text) !important; }

/* --- DC-85 JHA button → BLUE stripes (Safety + QA only) --------------
   Reuses the box-label-guide 45deg stripe pattern in blue (#2F5FD0 over
   #1d2330). Overrides the team-accent stripe from the shared .jha-download
   rule above. */
body.team-safety .facts .fact.jha-download,
body.team-qa .facts .fact.jha-download {
  background: repeating-linear-gradient(
    45deg,
    #2F5FD0 0,
    #2F5FD0 10px,
    #1d2330 10px,
    #1d2330 20px
  ) !important;
  border: 0.5px solid #1d2330 !important;
  border-left: 4px solid #2F5FD0 !important;
}
body.team-safety .facts .fact.jha-download:hover,
body.team-qa .facts .fact.jha-download:hover {
  background: #1d2330 !important;
  border-color: #1d2330 !important;
  border-left: 4px solid #2F5FD0 !important;
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}
/* Safety JHA now uses the base "JHA / (DC-85)" styling (52px) like the other
   install pages (matches Install 2) — no size override needed. */

/* --- SAFETY OBSERVATION button → GREEN stripes -----------------------
   Recolours the observation button to the requested green (#2F7D4F over
   #1d2330), matching the striped template, and sizes the two-line label. */
body.team-safety .facts .fact.obs-log {
  background: repeating-linear-gradient(
    45deg,
    #2F7D4F 0,
    #2F7D4F 10px,
    #1d2330 10px,
    #1d2330 20px
  ) !important;
  border: 0.5px solid #1d2330 !important;
  border-left: 4px solid #2F7D4F !important;
}
body.team-safety .facts .fact.obs-log .label {
  font-size: 35px !important;
  line-height: 1.0 !important;
}
body.team-safety .facts .fact.obs-log .obs-sub {
  display: block !important;
  font-size: 22px !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  font-weight: 700 !important;
}

/* On phones the progress card can wrap its flag under the text — let the row
   grow rather than clip. */
@media (max-width: 700px) {
  .facts .fact.progress-card { min-height: 110px !important; max-height: none !important; }
}

/* --- QA facts row: force clean, equal-height proportions -------------
   The accumulated flex rules left the progress card too wide and the stacked
   JHA / Box-Label buttons collapsing and overflowing. Pin an even row: every
   box is the same fixed height; the progress card spans 2 units and each action
   box 1 unit; the stack is 1 unit split into two equal halves. */
body.team-qa .facts { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 12px !important; }
body.team-qa .facts > .fact,
body.team-qa .facts > .fact-stack { flex: 2 1 0 !important; min-width: 0 !important; height: 108px !important; }
body.team-qa .facts > .fact.progress-card { flex: 9 1 0 !important; }   /* 9 : (2+2+2) = 60% / 40% */
body.team-qa .facts > .fact-stack { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.team-qa .facts .fact-stack > .fact { flex: 1 1 0 !important; width: 100% !important; align-self: stretch !important; height: auto !important; min-height: 0 !important; }
body.team-qa .facts .fact-stack > .fact .label { font-size: 18px !important; line-height: 1 !important; }
/* Force the three 40%-area boxes (stack, TO-5, Equipment Manager) to exactly
   equal width — the base t05/equipment rules carry a fixed % basis that outranks
   the generic .fact flex above, so pin them at the same 2-unit flex. */
body.team-qa .facts > .fact.t05-incident,
body.team-qa .facts > .fact.equipment-manager { flex: 2 1 0 !important; }

/* --- SAFETY facts row: same 60/40 layout as QA -----------------------
   Progress card 60% (with the Critical Path flag); the three action boxes
   (DC-85 JHA, Safety Observation, TO-5) share the remaining 40% equally. */
body.team-safety .facts { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 12px !important; }
body.team-safety .facts > .fact { flex: 2 1 0 !important; min-width: 0 !important; height: 108px !important; }
body.team-safety .facts > .fact.progress-card { flex: 9 1 0 !important; }
body.team-safety .facts > .fact.jha-download,
body.team-safety .facts > .fact.obs-log,
body.team-safety .facts > .fact.t05-incident { flex: 2 1 0 !important; }

/* --- Other install team pages (Install 1-5, Cabling, Electrical, Commissioning):
   same progress box + 60/40 row as QA/Safety. Progress card fixed at 60%; the
   remaining action boxes share the other 40% equally, whatever their count. */
body[data-team]:not(.team-qa):not(.team-safety) .facts { display: flex !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 12px !important; }
body[data-team]:not(.team-qa):not(.team-safety) .facts > .fact { flex: 1 1 0 !important; min-width: 0 !important; height: 108px !important; }
body[data-team]:not(.team-qa):not(.team-safety) .facts > .fact.progress-card { flex: 0 0 60% !important; height: 108px !important; }

/* iOS-style 2px corner softening. The fact-row boxes (progress card + striped
   action buttons) and the Install Site Register tiles/cards were built square;
   every other box in the app uses a 2px radius, so bring them in line. */
.facts .fact { border-radius: 2px !important; }
.att-tile, .att-card { border-radius: 2px !important; }

/* ---- MOBILE: compact install facts row ------------------------------------
   The desktop row pins a 60/40, 108px, no-wrap layout that overflows on a
   phone. On <=600px the progress card goes full-width on top and each action
   becomes a small tile in a wrapping row (Joel's "compact icon buttons").
   The per-team rules (QA / Safety / everything-else via :not():not()) carry
   high specificity + !important, so EACH family's selector is matched here to
   win by later source order — a plain body[data-team] rule loses to the
   :not(.team-qa):not(.team-safety) rule on the ordinary install-team pages,
   which is why only QA + Safety restacked before this fix. */
@media (max-width: 600px) {
  body[data-team]:not(.team-qa):not(.team-safety) .facts,
  body.team-qa .facts,
  body.team-safety .facts { flex-wrap: wrap !important; align-items: stretch !important; gap: 8px !important; }

  body[data-team]:not(.team-qa):not(.team-safety) .facts > .fact.progress-card,
  body.team-qa .facts > .fact.progress-card,
  body.team-safety .facts > .fact.progress-card { flex: 0 0 100% !important; width: 100% !important; height: auto !important; min-height: 92px !important; max-height: none !important; order: -1; }

  body[data-team]:not(.team-qa):not(.team-safety) .facts > .fact,
  body.team-qa .facts > .fact,
  body.team-qa .facts > .fact-stack,
  body.team-safety .facts > .fact { flex: 1 1 0 !important; min-width: 64px !important; height: 66px !important; min-height: 66px !important; }

  /* Keep every action tile the same width (base rules pin some at flex:2). */
  body.team-qa .facts > .fact.t05-incident,
  body.team-qa .facts > .fact.equipment-manager,
  body.team-safety .facts > .fact.jha-download,
  body.team-safety .facts > .fact.obs-log,
  body.team-safety .facts > .fact.t05-incident { flex: 1 1 0 !important; }

  /* Compact tile content: icon + short label, centred; drop the sub-labels. */
  body[data-team] .facts > .fact:not(.progress-card) {
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 3px !important; padding: 6px 4px !important; text-align: center !important;
  }
  body[data-team] .facts > .fact:not(.progress-card) .label { font-size: 14px !important; margin: 0 !important; line-height: 1 !important; letter-spacing: 0.02em !important; }
  body[data-team] .facts > .fact:not(.progress-card) .value { margin: 0 !important; }
  body[data-team] .facts .jha-sub,
  body[data-team] .facts .t05-sub { display: none !important; }
  body[data-team] .facts .jha-icon { font-size: 15px !important; }

  /* QA's stacked pair (JHA + Box Label) sits as two tiles side by side. */
  body.team-qa .facts > .fact-stack { flex: 2 1 0 !important; flex-direction: row !important; gap: 8px !important; height: 66px !important; padding: 0 !important; background: transparent !important; border: 0 !important; }
  body.team-qa .facts .fact-stack > .fact { height: 66px !important; min-height: 66px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; }
  body.team-qa .facts .fact-stack > .fact .label { font-size: 13px !important; line-height: 1 !important; }
}