/* ==========================================================================
   CDSU Digital Platform — project status page
   TREEZ AFRICA SYSTEMS. System fonts only, no external requests.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* brand */
  --ink: #10302d;          /* dark band */
  --teal: #00b9aa;         /* Signal Teal: accents, fills, focus */
  --teal-ink: #00756c;     /* teal that passes AA as text on white */
  --lime: #c7c005;         /* Spark Lime: today marker, highlights only */
  --green: #59bc5f;        /* Canopy Green: done */
  --amber: #b7791f;        /* at risk */
  --red: #c0392b;          /* blocked */

  /* neutrals, tinted faintly toward teal */
  --bg: #f4f8f7;
  --surface: #ffffff;
  --surface-2: #eef4f3;
  --surface-3: #e4eeec;
  --border: #d3e2e0;
  --border-strong: #b9cecb;
  --text: #16302d;
  --muted: #4f6462;
  --on-dark: #eef6f4;
  --on-dark-muted: #b2cfca;
  --on-teal-ink: #ffffff;   /* text on a --teal-ink background */

  /* status: surfaces and text that pass AA on each other */
  --s-upcoming-bg: #edf3f2;
  --s-upcoming-fg: #465956;
  --s-upcoming-bd: #c3d4d1;
  --s-progress-bg: #d7f4f0;
  --s-progress-fg: #00635c;
  --s-progress-bd: #00a195;
  --s-done-bg: #ddf2de;
  --s-done-fg: #216b26;
  --s-done-bd: #4aa750;
  --s-blocked-bg: #fbe9e7;
  --s-blocked-fg: #a22c1f;
  --s-blocked-bd: #c0392b;
  --s-warn-bg: #fcf2df;
  --s-warn-fg: #7f550d;
  --s-warn-bd: #b7791f;
  --s-deferred-fg: #4f6462;

  /* timeline bar fills; all carry --ink as their own text colour */
  --bar-upcoming: #d7e5e3;
  --bar-progress: var(--teal);
  --bar-done: var(--green);
  --bar-blocked: #e8a79f;
  --bar-soft: #cfe0dd;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(16, 48, 45, .06), 0 1px 10px rgba(16, 48, 45, .04);
  --gap: 1rem;
  --wrap: 72rem;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #06110f;
    --surface: #0d201e;
    --surface-2: #122a28;
    --surface-3: #17332f;
    --border: #244540;
    --border-strong: #35605a;
    --text: #e7f1ef;
    --muted: #a3bcb8;
    --teal-ink: #4bd8ca;
    --on-teal-ink: #10302d;
    --on-dark: #eef6f4;
    --on-dark-muted: #a9c8c3;

    --s-upcoming-bg: #172f2d;
    --s-upcoming-fg: #a9c0bd;
    --s-upcoming-bd: #35534f;
    --s-progress-bg: #0a3b38;
    --s-progress-fg: #6fe5d8;
    --s-progress-bd: #00b9aa;
    --s-done-bg: #143a1d;
    --s-done-fg: #8fe294;
    --s-done-bd: #59bc5f;
    --s-blocked-bg: #3d1712;
    --s-blocked-fg: #f3a79c;
    --s-blocked-bd: #c0392b;
    --s-warn-bg: #3a2a0c;
    --s-warn-fg: #f0c674;
    --s-warn-bd: #b7791f;
    --s-deferred-fg: #a3bcb8;

    --bar-upcoming: #27403d;
    --bar-blocked: #8d3528;
    --bar-soft: #22403c;
    --shadow: none;
  }
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; }
h1 { font-size: clamp(1.3rem, 1.05rem + 1.3vw, 1.85rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); color: var(--teal-ink); }
h3 { font-size: .98rem; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

a { color: var(--teal-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}
.band :focus-visible { outline-color: var(--lime); }

.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* `hidden` must win over the layout rules below it. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: .5rem; top: -4rem;
  z-index: 10;
  padding: .6rem .9rem;
  background: var(--lime);
  color: var(--ink);
  font-weight: 650;
  border-radius: var(--radius-sm);
  transition: top .15s ease;
}
.skip:focus { top: .5rem; }

.small { font-size: .85rem; color: var(--muted); }

/* ---------------------------------------------------------------- bands */
.band {
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 3px solid var(--teal);
}

.band-in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.15rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.1rem;
}

.logo { width: 88px; height: 88px; object-fit: contain; flex: none; }

.band-text { flex: 1 1 16rem; min-width: 0; }
.band-sub { color: var(--on-dark); font-size: .95rem; margin-top: .15rem; }
.band-dot { color: var(--teal); padding-inline: .15rem; }
.band-tag { color: var(--on-dark-muted); font-size: .82rem; margin-top: .1rem; }

.band-updated {
  flex: 0 1 auto;
  font-size: .88rem;
  color: var(--on-dark-muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .3rem .75rem;
}
.band-updated time { color: var(--on-dark); font-weight: 600; }

.band-foot { border-bottom: 0; border-top: 3px solid var(--teal); margin-top: 2.5rem; }
.band-foot .band-in { display: block; padding-block: 1.4rem 1.8rem; }
.ft-brand { font-weight: 650; letter-spacing: .02em; }
.ft-links { margin-top: .2rem; font-size: .95rem; }
.ft-links a { color: #7ee6db; }
.ft-sep { color: var(--on-dark-muted); padding-inline: .4rem; }
.ft-note { margin-top: .5rem; font-size: .82rem; color: var(--on-dark-muted); }

/* ------------------------------------------------------ preview / errors */
.preview, .noscript, .load-error {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .7rem 1rem;
  font-size: .92rem;
}
.preview {
  background: var(--s-warn-bg);
  color: var(--s-warn-fg);
  border-bottom: 1px solid var(--s-warn-bd);
  max-width: none;
}
.preview .icon { margin-top: .18rem; }
.preview a { color: inherit; }

.noscript, .load-error {
  margin: 1.25rem auto;
  background: var(--s-warn-bg);
  color: var(--s-warn-fg);
  border: 1px solid var(--s-warn-bd);
  border-radius: var(--radius);
  padding: 1rem;
  width: calc(100% - 2rem);
}
.noscript h2, .load-error h2 { color: inherit; font-size: 1.05rem; margin-bottom: .3rem; }
.noscript a, .load-error a { color: inherit; }
.noscript code { font-size: .9em; }
.load-error .small { color: inherit; opacity: .85; }

/* -------------------------------------------------------------- sections */
#main {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.25rem 1rem 0;
}

.sec { margin-bottom: 2rem; }
.sec-head { margin-bottom: .85rem; }
.sec-note { color: var(--muted); font-size: .92rem; margin-top: .25rem; max-width: 60ch; }

.btn {
  margin-top: .7rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--teal-ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: .4rem .9rem;
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); border-color: var(--teal); }

/* --------------------------------------------------------- status tokens */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  padding: .2rem .55rem .2rem .45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tag.st-not_started { background: var(--s-upcoming-bg); color: var(--s-upcoming-fg); border-color: var(--s-upcoming-bd); }
.tag.st-in_progress { background: var(--s-progress-bg); color: var(--s-progress-fg); border-color: var(--s-progress-bd); }
.tag.st-done        { background: var(--s-done-bg);     color: var(--s-done-fg);     border-color: var(--s-done-bd); }
.tag.st-blocked     { background: var(--s-blocked-bg);  color: var(--s-blocked-fg);  border-color: var(--s-blocked-bd); }
.tag.st-deferred    { background: transparent;          color: var(--s-deferred-fg); border: 1px dashed var(--border-strong); }
.tag.st-warn        { background: var(--s-warn-bg);     color: var(--s-warn-fg);     border-color: var(--s-warn-bd); }

.pill {
  display: inline-block;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .01em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--border);
}
.pill-now { background: var(--lime); color: var(--ink); border-color: #a9a404; }
.pill-launch { background: var(--s-progress-bg); color: var(--s-progress-fg); border-color: var(--s-progress-bd); }
.pill-done { background: var(--s-done-bg); color: var(--s-done-fg); border-color: var(--s-done-bd); }
.pill-muted { background: transparent; border-style: dashed; }

.note {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  font-size: .88rem;
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  margin-top: .6rem;
}
.note .icon { margin-top: .15rem; }
.note-warn { background: var(--s-warn-bg); color: var(--s-warn-fg); border: 1px solid var(--s-warn-bd); }

/* -------------------------------------------------------------- summary */
.summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: grid;
  gap: 1.1rem;
}

.facts { display: grid; gap: .8rem 1.5rem; }
.fact dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 650;
}
.fact dd { font-size: 1.02rem; font-weight: 600; margin-top: .1rem; }
.fact-note { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); }

.meters { display: grid; gap: .9rem; }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.meter-label { font-size: .85rem; font-weight: 650; }
.meter-value { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--teal-ink); }
.meter-track {
  height: .6rem;
  margin-top: .3rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: var(--pct, 0%);
  background: var(--teal);
  border-radius: 999px;
}
.meters .meter:nth-child(2) .meter-fill { background: var(--green); }
.meter-detail { font-size: .82rem; color: var(--muted); margin-top: .3rem; }

.healthbox {
  border-top: 1px solid var(--border);
  padding-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .95rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid;
}
.chip .icon { width: 1.15em; height: 1.15em; }
.ch-on_track        { background: var(--s-done-bg);     color: var(--s-done-fg);     border-color: var(--s-done-bd); }
.ch-complete        { background: var(--s-progress-bg); color: var(--s-progress-fg); border-color: var(--s-progress-bd); }
.ch-slightly_behind { background: var(--s-warn-bg);     color: var(--s-warn-fg);     border-color: var(--s-warn-bd); }
.ch-behind          { background: var(--s-blocked-bg);  color: var(--s-blocked-fg);  border-color: var(--s-blocked-bd); }
.ch-not_started     { background: var(--s-upcoming-bg); color: var(--s-upcoming-fg); border-color: var(--s-upcoming-bd); }
.chip-note { font-size: .88rem; color: var(--muted); flex: 1 1 18rem; }

/* ------------------------------------------------------------- timeline */
.tl {
  --days: 77;
  --row-gap: .5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem;
}

.tl-head { display: none; }

.tl-rows { display: grid; gap: var(--row-gap); }

.tl-row {
  display: grid;
  gap: .35rem;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.tl-row.is-current { border-color: var(--teal); background: var(--surface); }

.tl-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .5rem; }
.tl-week { font-weight: 700; font-size: .95rem; }
.tl-dates { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-now {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--lime);
  color: var(--ink);
  border-radius: 999px;
  padding: .05rem .45rem;
}

.tl-track {
  display: grid;
  grid-template-columns: repeat(var(--days), 1fr);
  align-items: center;
  min-height: 1.6rem;
}

.tl-bar {
  grid-column: 1 / -1;        /* stacked list on narrow screens */
  grid-row: 1;
  min-height: 1.6rem;
  display: flex;
  align-items: center;
  padding: .25rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--bar-upcoming);
  color: var(--ink);
  font-size: .85rem;
  overflow: hidden;
}
.tl-bar.st-in_progress { background: var(--bar-progress); }
.tl-bar.st-done { background: var(--bar-done); }
.tl-bar.st-blocked { background: var(--bar-blocked); }
.tl-bar.is-behind { outline: 2px solid var(--amber); outline-offset: -2px; }
.tl-bar-soft { background: var(--bar-soft); border: 1px dashed var(--border-strong); }
.tl-bar-title { overflow-wrap: anywhere; }

.tl-ms, .tl-dayline { display: none; }

.tl-state { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.tl-count { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.tl-key {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
  font-size: .8rem;
  color: var(--muted);
}
.tl-key-item { display: inline-flex; align-items: center; gap: .35rem; }
.tl-key-wide { display: none; }
.swatch {
  width: 1.1rem;
  height: .65rem;
  border-radius: 3px;
  background: var(--bar-upcoming);
  border: 1px solid var(--border-strong);
}
.swatch.st-in_progress { background: var(--bar-progress); border-color: var(--teal-ink); }
.swatch.st-done { background: var(--bar-done); border-color: #3f9b45; }
.swatch.sw-today { width: .3rem; height: .95rem; background: var(--lime); border-color: #a9a404; border-radius: 2px; }
.swatch.sw-ms {
  width: .8rem; height: .8rem;
  background: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  rotate: 45deg;
}

@media (prefers-color-scheme: dark) {
  .swatch.sw-ms { background: var(--on-dark); }

  /* Dark bar fills are dark, so only the bright status fills keep ink text. */
  .tl-bar { color: var(--text); }
  .tl-bar.st-in_progress, .tl-bar.st-done { color: var(--ink); }
  .tl-bar.st-blocked { color: #fff; }

}

/* the Gantt view */
@media (min-width: 46rem) {
  .tl-head {
    display: grid;
    grid-template-columns: 9rem 1fr 10.5rem;
    gap: .75rem;
    align-items: end;
    margin-bottom: .35rem;
  }
  .tl-months { min-height: 1.2rem; }
  .tl-month {
    grid-row: 1;
    grid-column: var(--c1) / span var(--span);
    font-size: .76rem;
    font-weight: 650;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-left: 1px solid var(--border);
    padding-left: .35rem;
    overflow: hidden;
    white-space: nowrap;
  }

  .tl-row {
    grid-template-columns: 9rem 1fr 10.5rem;
    gap: .75rem;
    align-items: center;
    padding: .45rem .6rem;
  }
  .tl-label { display: block; }
  .tl-dates { display: block; }

  .tl-track {
    position: relative;
    background-image: linear-gradient(to right, var(--border) 0 1px, transparent 1px);
    background-size: calc(100% / var(--days) * 7) 100%;
    background-position: 0 0;
  }

  .tl-bar {
    grid-column: var(--c1) / span var(--span);
    min-height: 1.35rem;
    padding-inline: .25rem;
  }
  .tl-bar-title {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tl-ms {
    display: block;
    grid-row: 1;
    grid-column: var(--c);
    justify-self: center;
    width: .66rem;
    height: .66rem;
    rotate: 45deg;
    background: var(--surface);
    border: 2px solid var(--ink);
    z-index: 2;
  }
  .tl-ms.is-done { background: var(--green); border-color: #2f7a33; }

  .tl-dayline {
    display: block;
    grid-row: 1;
    grid-column: var(--c);
    justify-self: center;
    width: 2px;
    background: var(--lime);
    align-self: stretch;
    height: calc(100% + var(--row-gap));
    z-index: 1;
  }
  .tl-state { justify-content: flex-end; text-align: right; }
  .tl-key-wide { display: inline-flex; }
}

@media (prefers-color-scheme: dark) and (min-width: 46rem) {
  .tl-ms { border-color: var(--on-dark); }
}

/* ------------------------------------------------------------ week cards */
.weeks { display: grid; gap: .7rem; }

.wk {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-margin-top: 1rem;
}
.wk.st-in_progress { border-left-color: var(--teal); }
.wk.st-done { border-left-color: var(--green); }
.wk.st-blocked { border-left-color: var(--red); }
.wk.is-current { border-color: var(--teal); }

.wk > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.wk > summary::-webkit-details-marker { display: none; }
.wk > summary:hover { background: var(--surface-2); }

.wk-sum { display: grid; gap: .35rem; min-width: 0; }
.wk-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.wk-label { font-weight: 700; font-size: 1rem; }
.wk-dates { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wk-title { font-weight: 600; color: var(--teal-ink); }
.wk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.wk-count { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.wk-chevron {
  width: 1.4rem; height: 1.4rem;
  flex: none;
  color: var(--muted);
  margin-top: .15rem;
  transition: rotate .15s ease;
}
.wk[open] > summary .wk-chevron { rotate: 180deg; }

.wk-body {
  display: grid;
  gap: 1rem;
  padding: 0 .85rem .95rem;
  border-top: 1px solid var(--border);
  padding-top: .85rem;
  margin-inline: .85rem;
  padding-inline: 0;
  margin-bottom: .1rem;
}
.wk-h {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .4rem;
}

.tasks { display: grid; gap: .4rem; }
.task { display: flex; align-items: flex-start; gap: .5rem; font-size: .95rem; }
.task .tag { margin-top: .05rem; }
.task.st-done .task-title { color: var(--muted); }
.task.st-deferred .task-title { color: var(--muted); font-style: italic; }

.bullets { display: grid; gap: .3rem; font-size: .92rem; }
.bullets li { padding-left: 1rem; position: relative; }
.bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .4rem; height: .4rem;
  border-radius: 2px;
  background: var(--teal);
}

.gate {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  margin-top: .8rem;
  font-size: .9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
}
.gate .icon { color: var(--teal-ink); margin-top: .15rem; }

@media (min-width: 46rem) {
  .wk-body { grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
}

/* --------------------------------------------------------------- modules */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.filter {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.filter:hover { border-color: var(--teal); color: var(--teal-ink); }
.filter[aria-pressed="true"] {
  background: var(--teal-ink);
  border-color: var(--teal-ink);
  color: var(--on-teal-ink);
}
.filter-status { font-size: .82rem; color: var(--muted); margin-top: .45rem; }

.mods { display: grid; gap: .7rem; }
@media (min-width: 40rem) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .mods { grid-template-columns: repeat(3, 1fr); } }

.mod {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem;
  display: grid;
  gap: .4rem;
  align-content: start;
}
.mod[hidden] { display: none; }
.mod-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.mod-name { font-size: 1rem; }
.mod-note { font-size: .88rem; color: var(--muted); }
.mod-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; font-size: .85rem; }
.mod-week { font-weight: 600; }
.mod-week.is-none { color: var(--muted); font-weight: 500; }

.mod.is-phase2 {
  background: var(--surface-2);
  border-style: dashed;
  box-shadow: none;
}
.mod.is-phase2 .mod-name { color: var(--muted); }

/* ------------------------------------------------------------- key dates */
.dates { display: grid; gap: .5rem; }
@media (min-width: 52rem) { .dates { grid-template-columns: repeat(2, 1fr); } }

.date {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7rem .8rem;
}
.date-icon { color: var(--teal-ink); display: flex; margin-top: .15rem; }
.date-icon .icon { width: 1.2rem; height: 1.2rem; }
.date.is-done .date-icon { color: var(--s-done-fg); }
.date.is-passed .date-icon, .date.is-passed .date-when { color: var(--muted); }
.date.is-due { border-color: var(--lime); border-width: 2px; }
.date.is-done { background: var(--s-done-bg); border-color: var(--s-done-bd); }
.date-body { display: grid; gap: .2rem; min-width: 0; }
.date-when { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.date-title { font-weight: 600; }
.date-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .85rem; }

/* --------------------------------------------------------- client inputs */
.inputs { display: grid; gap: .5rem; }
.input {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7rem .8rem;
}
.input.is-overdue, .input.is-due_soon { border-color: var(--s-warn-bd); background: var(--s-warn-bg); }
.input.is-overdue .input-title, .input.is-due_soon .input-title { color: var(--s-warn-fg); }
.input-body { display: grid; gap: .25rem; min-width: 0; }
.input-title { font-weight: 600; }
.input-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-size: .85rem; color: var(--muted); }
.input-meta time { font-variant-numeric: tabular-nums; }
.input.is-overdue .input-meta, .input.is-due_soon .input-meta { color: var(--s-warn-fg); }

/* ----------------------------------------------------------------- log */
.log { display: grid; gap: .5rem; }
.log-item {
  display: grid;
  gap: .15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: .6rem .8rem;
}
.log-date { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.log-text { font-size: .95rem; }
.log-empty { color: var(--muted); font-size: .92rem; }

@media (min-width: 52rem) {
  .log-item { grid-template-columns: 9rem 1fr; gap: .9rem; align-items: baseline; }
}

/* --------------------------------------------------------------- layout */
@media (min-width: 34rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
}

@media (min-width: 60rem) {
  .band-in { padding-block: 1.35rem; }
  .logo { width: 112px; height: 112px; }
  #main { padding-top: 1.75rem; }
  .summary { padding: 1.25rem 1.4rem; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------- motion / print */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --surface-3: #fff;
    --border: #999;
    --border-strong: #666;
    --text: #000;
    --muted: #333;
    --shadow: none;
  }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .band { background: #fff !important; color: #000; border-bottom: 2pt solid #000; }
  .band-updated, .band-updated time { background: none; border-color: #666; color: #000; }
  .band-tag, .band-sub, .ft-note, .ft-links a { color: #000; }
  .logo { filter: invert(1) grayscale(1) contrast(1.2); }
  .skip, .filters, .filter-status, #weeks-toggle, .wk-chevron, .tl-key { display: none !important; }
  /* Sections are too tall to keep whole; the cards inside them are not. */
  .sec-head, .tl, .summary { break-inside: avoid; }
  .sec h2 { break-after: avoid; }
  .wk, .mod, .date, .input, .log-item, .tl-row { break-inside: avoid; border-color: #999; }
  .wk > summary { background: none !important; }
  .mod[hidden] { display: grid !important; }
  .tl-bar { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .chip, .tag, .pill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { text-decoration: none; color: #000; }
  .ft-links a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}