/* ============================================================
   La Gioia Group — Transformation Roadmap
   styles/main.css
   All design tokens, layout, and component styles.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:   #0b1520;
  --bg2:  #111d2c;
  --bg3:  #182538;
  --bgc:  #1b2a3d;
  /* Borders */
  --b1:   #1f3045;
  --b2:   #2a3f56;
  /* Brand gold */
  --gold:    #c9a84c;
  --gold-lt: #e2c878;
  --gold-d:  #8a6e2e;
  /* Text */
  --cr:  #ede7d4;
  --cr2: #b4aa94;
  --t1:  #e0d9c8;
  --t2:  #8a8272;
  --t3:  #4a4438;
  /* Owner colours */
  --typ: #5b9fd4;
  --mar: #c9a84c;
  --and: #78bc74;
  /* Spacing */
  --r:  6px;
  --r2: 12px;
  /* Gantt geometry — edit here to resize all Gantts simultaneously */
  --row:    30px;
  --hdr:    44px;
  --lbl:    230px;
  --px-day: 18px;  /* pixels per calendar day */
}

/* ── Reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--bg);
  color: var(--t1);
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .45;
}

/* ── Progress bar ──────────────────────────────────────────────────── */
#prog {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-d), var(--gold-lt));
  width: 0;
  z-index: 999;
  transition: width .08s linear;
}

/* ── Topbar ────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(11,21,32,.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--b1);
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 36px;
  gap: 10px;
}
.tb-hex {
  width: 22px; height: 22px;
  border: 1px solid var(--gold-d);
  clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display: flex; align-items: center; justify-content: center;
  background: rgba(201,168,76,.06);
  flex-shrink: 0;
}
.tb-hex svg { width: 10px; height: 10px; stroke: var(--gold); fill: none; stroke-width: 1.5; }
.tb-brand  { font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 400; color: var(--cr2); white-space: nowrap; flex-shrink: 0; }
.tb-sep    { width: 1px; height: 16px; background: var(--b1); flex-shrink: 0; }
.tb-nav    { display: flex; align-items: stretch; gap: 0; flex: 1; overflow: hidden; }
.tb-tab    {
  display: flex; align-items: center; gap: 6px;
  padding: 0 16px;
  font-size: 11.5px; letter-spacing: .04em; color: var(--t3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .16s;
  white-space: nowrap;
  user-select: none;
  height: 100%;
}
.tb-tab:hover          { color: var(--t2); }
.tb-tab.on             { color: var(--gold-lt); border-bottom-color: var(--gold); }
.tb-tab-n              { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--b2); line-height: 1; }
.tb-tab.on .tb-tab-n   { color: var(--gold-d); }
.tb-badge {
  margin-left: auto;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3);
  padding: 3px 10px;
  border: 1px solid var(--b1); border-radius: 20px;
  flex-shrink: 0;
}

/* ── Page / sub-page switching ─────────────────────────────────────── */
.page                  { display: none; }
.page.on               { display: block; }      /* default for task registry page */
#page-workflow.on      {                         /* workflow page needs a fixed height for Gantt */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 52px);                   /* 52px = topbar */
  overflow: clip;                               /* clip visually without intercepting scroll events */
}
.sub-page              { display: none; }
.sub-page.on           { display: flex; flex-direction: column; }
#workflow-shell        {                         /* fills the space below subnav */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* No overflow here — scroll is handled by .gantt-chart-wrap and .ph-drill-wrap */
}

/* Full-timeline sub-page must flex to fill remaining height */
#sub-full { flex: 1; overflow: clip; min-height: 0; }

/* ── Sub-nav ───────────────────────────────────────────────────────── */
.subnav {
  display: flex; align-items: stretch; gap: 0;
  padding: 0 36px;
  border-bottom: 1px solid var(--b1);
  overflow-x: auto;
  position: sticky; top: 52px; z-index: 200;
  background: rgba(17,29,44,.96);
  backdrop-filter: blur(12px);
}
.sn-tab {
  display: flex; align-items: center;
  padding: 0 14px; height: 40px;
  font-size: 11px; letter-spacing: .04em; color: var(--t3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap; transition: all .14s; user-select: none; gap: 5px;
}
.sn-tab:hover { color: var(--t2); }
.sn-tab.on    { color: var(--gold-lt); border-bottom-color: var(--gold); }
.sn-dot       { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ── Gantt toolbar ─────────────────────────────────────────────────── */
.gantt-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--b1);
  background: var(--bg2);
  flex-shrink: 0; flex-wrap: wrap;
}
.gt-title   { font-family: 'Cormorant Garamond', serif; font-size: 14px; color: var(--cr2); white-space: nowrap; }
.gt-legend  { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gt-leg     { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t2); }
.gt-swatch  { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.gt-right   { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gt-btn {
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; border: 1px solid var(--b1); color: var(--t2);
  background: transparent; cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; transition: all .13s; white-space: nowrap;
}
.gt-btn:hover { color: var(--t1); border-color: var(--b2); }
.gt-btn.on    { background: rgba(201,168,76,.12); border-color: var(--gold-d); color: var(--gold-lt); }

/* ── Gantt layout
     KEY: label-wrap and chart-wrap are siblings.
     Both rendered from the same data → same row heights → perfect alignment.
   ─────────────────────────────────────────────────────────────────── */
.gantt-outer       { flex: 1; overflow: clip; display: flex; flex-direction: column; min-height: 0; }
.gantt-body        { flex: 1; display: flex; min-height: 0; overflow: clip; }
.gantt-lbl-wrap    { width: var(--lbl); flex-shrink: 0; overflow: hidden; border-right: 2px solid var(--b2); background: var(--bg2); }
.gantt-lbl-wrap svg { display: block; overflow: visible; }
.gantt-chart-wrap  { flex: 1; overflow-x: auto; overflow-y: auto; }
.gantt-chart-wrap::-webkit-scrollbar        { height: 6px; width: 6px; }
.gantt-chart-wrap::-webkit-scrollbar-thumb  { background: var(--b2); border-radius: 3px; }
.gantt-chart-wrap svg { display: block; }

/* ── Phase drilldown ───────────────────────────────────────────────── */
.ph-drill-wrap {
  flex: 1; overflow-y: auto;
  padding: 28px 40px 60px;
  max-width: 1400px; margin: 0 auto;
}
.ph-drill-wrap::-webkit-scrollbar       { width: 5px; }
.ph-drill-wrap::-webkit-scrollbar-thumb { background: var(--b2); }

.pd-header  { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--b1); flex-wrap: wrap; }
.pd-num     { font-family: 'Cormorant Garamond', serif; font-size: 52px; font-weight: 300; color: var(--b2); line-height: 1; flex-shrink: 0; }
.pd-info    { flex: 1; }
.pd-label   { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 4px; }
.pd-name    { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 400; color: var(--cr); line-height: 1.2; }
.pd-dates   { font-size: 12px; color: var(--t3); margin-top: 4px; }
.pd-counts  { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.pdc-item   { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pdc-v      { font-family: 'Cormorant Garamond', serif; font-size: 24px; line-height: 1; color: var(--t1); }
.pdc-l      { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }

.pd-section-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--b1); }

.gate-cards { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.gate-card  { display: flex; gap: 13px; padding: 13px 16px; background: rgba(212,129,90,.07); border: 1px solid rgba(212,129,90,.22); border-radius: var(--r2); align-items: flex-start; }
.gc-ico     { font-size: 18px; color: #d4815a; flex-shrink: 0; margin-top: 1px; }
.gc-id      { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #d4815a; margin-bottom: 3px; }
.gc-title   { font-size: 13px; font-weight: 400; color: var(--t1); margin-bottom: 5px; line-height: 1.4; }
.gc-output  { font-size: 12px; color: var(--t2); line-height: 1.6; margin-bottom: 4px; }
.gc-out-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--t3); }
.gc-dates   { font-size: 11px; color: var(--t3); }

.deliv-wrap  { overflow-x: auto; border: 1px solid var(--b1); border-radius: var(--r2); overflow: hidden; margin-bottom: 4px; }
.deliv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.deliv-table th { background: var(--bg3); padding: 9px 12px; text-align: left; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--t2); font-weight: 400; border-bottom: 1px solid var(--b1); white-space: nowrap; }
.deliv-table td { padding: 10px 12px; border-bottom: 1px solid rgba(31,48,69,.5); color: var(--t2); vertical-align: middle; }
.deliv-table tr:last-child td  { border-bottom: none; }
.deliv-table tr:hover td       { background: rgba(255,255,255,.02); }
.del-id, .del-type, .del-owner, .del-dates, .del-deps { font-size: 10px; white-space: nowrap; letter-spacing: .04em; }
.del-name  { color: var(--t1); line-height: 1.4; }
.del-gate  { color: #d4815a; font-size: 14px; text-align: center; }
.del-deps  { color: rgba(212,129,90,.7); }

/* ── Mini Gantt (phase pages) ──────────────────────────────────────── */
.mini-gantt-wrap  { border: 1px solid var(--b1); border-radius: var(--r2); overflow: hidden; display: flex; margin-bottom: 4px; }
.mini-lbl-wrap    { width: 180px; flex-shrink: 0; border-right: 1px solid var(--b1); background: var(--bg2); overflow: hidden; }
.mini-chart-wrap  { flex: 1; overflow-x: auto; overflow-y: hidden; }
.mini-chart-wrap::-webkit-scrollbar       { height: 5px; }
.mini-chart-wrap::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }
.mini-lbl-wrap svg,
.mini-chart-wrap svg { display: block; }

/* ── Systems Timeline ──────────────────────────────────────────────── */
.sys-page   { flex: 1; overflow-y: auto; padding: 24px 40px 60px; max-width: 1400px; margin: 0 auto; }
.sys-page::-webkit-scrollbar       { width: 5px; }
.sys-page::-webkit-scrollbar-thumb { background: var(--b2); }
.sys-title  { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 300; color: var(--cr); margin-bottom: 6px; }
.sys-sub    { font-size: 13px; color: var(--t2); line-height: 1.7; max-width: 600px; margin-bottom: 18px; }
.sys-controls { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 12px 0 16px; border-bottom: 1px solid var(--b1); margin-bottom: 18px; }
.sc-group   { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.sc-lbl     { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-right: 3px; white-space: nowrap; }
.sys-chip {
  padding: 3px 10px; border-radius: 20px; font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--cc) 28%, transparent);
  color: color-mix(in srgb, var(--cc) 72%, var(--t3));
  background: color-mix(in srgb, var(--cc) 7%, transparent);
  cursor: pointer; transition: all .13s;
  font-family: 'Instrument Sans', sans-serif; white-space: nowrap;
}
.sys-chip:hover { background: color-mix(in srgb, var(--cc) 14%, transparent); color: var(--cc); }
.sys-chip.on    { background: color-mix(in srgb, var(--cc) 20%, transparent); border-color: var(--cc); color: var(--cc); }
.sys-reset { padding: 3px 10px; border-radius: 20px; font-size: 11px; border: 1px solid var(--b1); color: var(--t3); background: transparent; cursor: pointer; font-family: 'Instrument Sans', sans-serif; transition: all .13s; }
.sys-sort  { padding: 3px 10px; border-radius: 20px; font-size: 11px; border: 1px solid var(--b1); color: var(--t2); background: var(--bg2); cursor: pointer; font-family: 'Instrument Sans', sans-serif; outline: none; }
.sys-reset:hover { color: var(--t2); border-color: var(--b2); }
.sys-gantt-wrap  { border: 1px solid var(--b1); border-radius: var(--r2); overflow: hidden; display: flex; }
.sys-lbl-wrap    { width: 180px; flex-shrink: 0; border-right: 1px solid var(--b1); background: var(--bg2); overflow: hidden; }
.sys-chart-wrap  { flex: 1; overflow: auto; }
.sys-chart-wrap::-webkit-scrollbar        { height: 6px; width: 5px; }
.sys-chart-wrap::-webkit-scrollbar-thumb  { background: var(--b2); border-radius: 3px; }
.sys-lbl-wrap svg,
.sys-chart-wrap svg { display: block; }

/* ── Tooltip ───────────────────────────────────────────────────────── */
.g-tooltip {
  position: fixed; z-index: 500;
  background: var(--bg3); border: 1px solid var(--b2);
  border-radius: var(--r2); padding: 12px 14px;
  max-width: 320px; pointer-events: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  display: none; font-size: 12px; line-height: 1.6;
}
.tt-id     { font-size: 9px; letter-spacing: .12em; color: var(--t3); margin-bottom: 2px; }
.tt-brand  { font-size: 11px; font-weight: 500; margin-bottom: 4px; }
.tt-title  { font-size: 13px; color: var(--t1); margin-bottom: 5px; line-height: 1.4; }
.tt-type   { font-size: 10px; padding: 1px 7px; border-radius: 20px; border: 1px solid; display: inline-block; margin-bottom: 5px; }
.tt-dates  { font-size: 11px; color: var(--t2); margin-bottom: 4px; }
.tt-desc   { font-size: 11px; color: var(--t2); line-height: 1.6; margin-bottom: 5px; }
.tt-output { font-size: 10px; color: var(--t3); border-top: 1px solid var(--b1); padding-top: 5px; line-height: 1.5; }
.tt-hrs    { display: flex; gap: 10px; margin-top: 5px; border-top: 1px solid var(--b1); padding-top: 5px; }
.tt-h      { display: flex; flex-direction: column; gap: 1px; }
.tt-hv     { font-family: 'Cormorant Garamond', serif; font-size: 16px; line-height: 1; }
.tt-hl     { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }

/* ── Task Registry ─────────────────────────────────────────────────── */
.reg-header { padding: 36px 48px 24px; border-bottom: 1px solid var(--b1); position: relative; overflow: hidden; }
.reg-header::after { content: ''; position: absolute; top: -80px; right: -60px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(201,168,76,.05) 0%, transparent 65%); pointer-events: none; }
.rh-ey    { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 12px; }
.rh-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(28px,4vw,46px); font-weight: 300; color: var(--cr); line-height: 1.1; margin-bottom: 10px; }
.rh-title em { font-style: italic; color: var(--gold-lt); }
.rh-sub   { font-size: 13px; color: var(--t2); max-width: 580px; line-height: 1.8; }

.summary-band { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--b1); border: 1px solid var(--b1); border-radius: var(--r2); overflow: hidden; margin: 20px 48px 0; }
.sb-cell  { background: var(--bgc); padding: 18px 22px; }
.sb-who   { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 8px; }
.sb-val   { font-family: 'Cormorant Garamond', serif; font-size: 36px; line-height: 1; margin-bottom: 3px; }
.sb-desc  { font-size: 11px; color: var(--t3); line-height: 1.5; }

.stats-row  { display: flex; gap: 28px; padding: 18px 48px; border-bottom: 1px solid var(--b1); flex-wrap: wrap; }
.sr-item    { display: flex; flex-direction: column; gap: 2px; }
.sr-v       { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--cr); line-height: 1; }
.sr-l       { font-size: 11px; color: var(--t3); }

.fbar {
  padding: 10px 48px;
  border-bottom: 1px solid var(--b1);
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
  position: sticky; top: 52px; z-index: 100;
  background: rgba(11,21,32,.94); backdrop-filter: blur(14px);
}
.fgroup { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.flbl   { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); white-space: nowrap; margin-right: 2px; }
.chip {
  padding: 3px 10px; border-radius: 20px; font-size: 11px;
  border: 1px solid color-mix(in srgb, var(--cc) 26%, transparent);
  color: color-mix(in srgb, var(--cc) 70%, var(--t3));
  background: color-mix(in srgb, var(--cc) 7%, transparent);
  cursor: pointer; transition: all .13s;
  font-family: 'Instrument Sans', sans-serif; font-weight: 300;
}
.chip:hover { background: color-mix(in srgb, var(--cc) 14%, transparent); color: var(--cc); }
.chip.on    { background: color-mix(in srgb, var(--cc) 20%, transparent); border-color: var(--cc); color: var(--cc); }
.f-reset    { padding: 3px 10px; border-radius: 20px; font-size: 11px; border: 1px solid var(--b1); color: var(--t3); background: transparent; cursor: pointer; font-family: 'Instrument Sans', sans-serif; transition: all .13s; }
.f-reset:hover { color: var(--t2); border-color: var(--b2); }
#fcount { font-size: 11px; color: var(--t3); margin-left: auto; align-self: center; }

.main       { padding: 0 48px 80px; max-width: 1440px; margin: 0 auto; }
.card-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 11px; }

/* ── Task card ─────────────────────────────────────────────────────── */
.tc {
  background: var(--bgc); border: 1px solid var(--b1);
  border-radius: var(--r2); display: flex; flex-direction: column;
  transition: all .15s; overflow: hidden;
}
.tc:hover { border-color: var(--b2); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.tc.fhide { display: none; }
.tc-stripe  { height: 3px; flex-shrink: 0; }
.tc-head    { display: flex; justify-content: space-between; align-items: flex-start; gap: 7px; padding: 11px 13px 0; }
.tc-head-left { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.tc-id        { font-size: 9px; letter-spacing: .1em; color: var(--t3); }
.tc-type-tag  { font-size: 9px; letter-spacing: .07em; text-transform: uppercase; padding: 1px 6px; border-radius: 20px; border: 1px solid; }
.gate-pip     { font-size: 9px; color: #d4815a; padding: 1px 6px; border: 1px solid rgba(212,129,90,.28); border-radius: 20px; background: rgba(212,129,90,.07); }
.tc-owner-tag { display: flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.tc-own-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tc-dates     { font-size: 11px; color: var(--t3); padding: 4px 13px 0; display: flex; gap: 7px; align-items: center; }
.date-s       { color: #78bc74; letter-spacing: .02em; }
.date-arr     { color: var(--t3); }
.date-e       { color: var(--t2); letter-spacing: .02em; }
.tc-title     { font-size: 13px; font-weight: 400; color: var(--t1); line-height: 1.4; padding: 6px 13px 0; }
.tc-brand-prefix { font-size: 11px; font-weight: 500; margin-right: 4px; opacity: .9; }
.tc-desc      { font-size: 11.5px; color: var(--t2); line-height: 1.6; padding: 5px 13px 0; }
.tc-output    { font-size: 11px; color: var(--t3); padding: 6px 13px 0; display: flex; gap: 5px; line-height: 1.5; }
.out-lbl      { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); flex-shrink: 0; margin-top: 2px; }
.tc-deps      { padding: 5px 13px 0; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.dep-lbl      { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); }
.dep-tag      { font-size: 9px; padding: 1px 6px; border-radius: 20px; border: 1px solid rgba(212,129,90,.25); color: #d4815a; background: rgba(212,129,90,.06); }
.tc-footer    { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--b1); margin-top: 8px; }
.tc-hrs       { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hp           { display: flex; align-items: center; gap: 7px; }
.hp-nil .hp-l { color: var(--t3); }
.hp-l         { font-size: 10px; color: var(--t2); width: 48px; flex-shrink: 0; }
.hp-track     { position: relative; height: 3px; background: var(--b1); border-radius: 2px; width: 100px; flex-shrink: 0; }
.hp-fill      { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; }
.hp-dot       { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 5px; height: 5px; border-radius: 50%; }
.hp-v         { font-size: 10px; width: 26px; text-align: right; flex-shrink: 0; }
.tc-total-wrap { text-align: right; flex-shrink: 0; }
.tc-total-v   { font-family: 'Cormorant Garamond', serif; font-size: 24px; color: var(--t2); line-height: 1; }
.tc-total-l   { font-size: 9px; color: var(--t3); letter-spacing: .07em; }
.tc-who       { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 13px 11px; }
.who-tag      { font-size: 9px; padding: 1px 6px; border-radius: 20px; border: 1px solid; }

/* ── Registry phase headers ────────────────────────────────────────── */
.phase-sec-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--b1); margin-bottom: 16px; margin-top: 40px; flex-wrap: wrap; }
.phase-sec-left  { display: flex; align-items: center; gap: 14px; }
.phase-sec-num   { font-family: 'Cormorant Garamond', serif; font-size: 46px; font-weight: 300; color: var(--b2); line-height: 1; flex-shrink: 0; }
.phase-sec-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-d); margin-bottom: 3px; }
.phase-sec-name  { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; color: var(--cr); line-height: 1.2; }
.phase-sec-dates { font-size: 11px; color: var(--t3); margin-top: 3px; }
.phase-sec-hrs   { display: flex; gap: 14px; align-items: center; }
.phr             { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.phr-v           { font-family: 'Cormorant Garamond', serif; font-size: 17px; line-height: 1; }
.phr-l           { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.phr-tot .phr-v  { color: var(--t2); }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--b1); padding: 18px 48px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.foot-l { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--t3); }
.foot-l strong { color: var(--gold-d); font-weight: 400; }
.foot-r { font-size: 10px; color: var(--t3); letter-spacing: .04em; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar, .reg-header, .summary-band, .stats-row,
  .fbar, .main, .footer, .ph-drill-wrap, .sys-page {
    padding-left: 16px;
    padding-right: 16px;
  }
  .summary-band { margin: 16px 16px 0; }
  .card-grid    { grid-template-columns: 1fr; }
  .subnav       { padding: 0 16px; }
  .gantt-lbl-wrap,
  .sys-lbl-wrap,
  .mini-lbl-wrap { display: none; }
}