/* css/spaces-phase-bar.css: the phase bar, Concept · Shape · Fill (js/spaces/phase-bar.js, window.SpacesPhaseBar). sppb- ONLY.
 *
 * The spec is the approved board, PhaseBar.dc.html (wide) and Phone.dc.html (the compact bar at 390px), value for
 * value. The Programs screens have no stylesheet of their own (they are drawn on the Clips studio, whose sheet is
 * shared with Clips and no other sheet may name its classes: tests/clips-studio-css-namespace.test.js), so the bar
 * has this small one. Its colours are the studio's: inside a `.clstudio` it reads the studio's own --cst-* tokens,
 * and anywhere else the same values stand in, so the bar looks the same wherever a screen puts it.
 *
 * Compact: below 761px (the studio's own phone breakpoint) the same markup shows its phone form; `.sppb-compact`
 * forces it at every width. No dark rules: the app's tokens (design-tokens.css) and the studio around the bar have
 * no dark theme, so a dark bar would sit on a light screen.
 */

.sppb {
  --sppb-ind: var(--cst-ind, #4338CA); --sppb-ind-soft: var(--cst-ind-soft, #EEEDFD); --sppb-ind-ring: var(--cst-ind-ring, #E4E3FB);
  --sppb-ink: var(--cst-ink, #1e1b2e); --sppb-ink-2: var(--cst-ink-2, #5d5566); --sppb-ink-3: var(--cst-ink-3, #6b6475); --sppb-ink-4: var(--cst-ink-4, #a39eab);
  --sppb-line: var(--cst-line, #e3ded4); --sppb-line-2: var(--cst-line-2, #ece7dd); --sppb-ground: var(--cst-ground, #F5F4F0);
  --sppb-good: var(--cst-good, #1c6b43); --sppb-good-bg: var(--cst-good-bg, #EEF7F1);
  --sppb-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  display: block; box-sizing: border-box; max-width: 1100px; margin: 0 auto; padding: 16px 0;
  font-family: "Bricolage Grotesque", system-ui, sans-serif; color: var(--sppb-ink);
}
.sppb *, .sppb *::before, .sppb *::after { box-sizing: border-box; }

/* ── wide: three segments, a chevron after each, then the flag ── */
.sppb-wide { display: flex; align-items: stretch; gap: 10px; }
.sppb-segs { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sppb-seg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; }
.sppb-box { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #ffffff; border: 2px solid var(--sppb-line-2); }
.sppb-seg.is-done .sppb-box { border-color: #d9d6f5; }
.sppb-seg.is-now .sppb-box { background: var(--sppb-ind-soft); border-color: var(--sppb-ind); }
.sppb-dot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 500 14px var(--sppb-mono); background: var(--sppb-ground); color: var(--sppb-ink-2); border: 2px solid var(--sppb-line); }
.sppb-seg.is-done .sppb-dot, .sppb-seg.is-now .sppb-dot { background: var(--sppb-ind); border-color: var(--sppb-ind); color: #ffffff; }
.sppb-seg.is-now .sppb-dot { box-shadow: 0 0 0 5px var(--sppb-ind-ring); }
.sppb-tick { display: block; }
.sppb-tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sppb-k { font-family: var(--sppb-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sppb-ink-3); }
.sppb-seg.is-now .sppb-k { color: var(--sppb-ind); }
.sppb-seg.is-done .sppb-k { color: var(--sppb-good); }
.sppb-n { font-size: 19px; font-weight: 700; line-height: 1.2; }
.sppb-d { font-size: 13.5px; line-height: 1.35; color: var(--sppb-ink-3); }
.sppb-seg.is-now .sppb-d { color: #3d3650; }
.sppb-chev { flex: none; color: var(--sppb-ink-4); }

.sppb-flag { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #ffffff; border: 2px dashed var(--sppb-line); }
.sppb-flag-i { flex: none; color: var(--sppb-ink-3); }
.sppb-flag.is-open { background: var(--sppb-good-bg); border: 2px solid var(--sppb-good); }
.sppb-flag.is-open .sppb-flag-i { color: var(--sppb-good); }
.sppb-ft { font-size: 16px; font-weight: 700; }
.sppb-fs { font-size: 13px; color: var(--sppb-ink-2); }

/* ── compact: where she is, the name and its line, three bars (Phone.dc.html) ── */
.sppb-short { display: none; flex-direction: column; gap: 8px; }
.sppb-short-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sppb-short .sppb-k { color: var(--sppb-ind); }
.sppb-after { font-size: 13px; color: var(--sppb-ink-2); }
.sppb-short-n { font-size: 18px; font-weight: 700; line-height: 1.3; }
.sppb-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sppb-bar { display: block; height: 8px; border-radius: 4px; background: var(--sppb-line); }
.sppb-bar.is-done, .sppb-bar.is-now { background: var(--sppb-ind); }
.sppb-bar.is-now { box-shadow: 0 0 0 3px var(--sppb-ind-ring); }
/* Passed but not finished (opts.done, walk 4, W7): the segment keeps its number and a plain kicker, its box the passed
   border; its bar is the light shade, so the phone's three bars never say a phase is finished when it is not. */
.sppb-seg.is-past .sppb-box { border-color: #d9d6f5; }
.sppb-bar.is-past { background: var(--sppb-ind-ring); }

/* NARROWER THAN THE BOARD. The board is drawn at 1100px; in the app the bar sits in whatever column the page gives it
   (about 900px at 1440 with both menus open, less on a laptop, more with them folded), and a kicker that wraps reads
   as "PHASE 1 · / DONE" (dev8 walk, 29 Oct 2026). So the bar answers to its OWN width, not the window's: as it
   narrows, first the flag drops its second line (before publishing only) and the chevrons close up, then the kicker is set tighter and the
   circle smaller, then the circle steps aside (the kicker already says "Phase N"), and last the flag's icon. Every
   word stays, and each kicker stays on one line down to the narrowest wide bar (about 700px). */
/* `width: 100%` because a size container no longer takes its width from what it holds: in a parent that centres its
   children instead of stretching them it would fold to nothing. */
.sppb { container: sppb / inline-size; width: 100%; }
@container sppb (max-width: 1080px) {
  .sppb-wide, .sppb-segs { gap: 6px; }
  .sppb-seg { gap: 6px; }
  .sppb-chev { width: 14px; height: 14px; }
  .sppb-flag { padding: 12px; }
  /* Only "And tell people it's open" goes: once published the second line IS the meaning ("Published / From here it's
     called Manage", board PhaseBar.dc.html; second walk 29 Oct, H), so it stays and wraps onto two lines instead. */
  .sppb-flag:not(.is-open) .sppb-fs { display: none; }
  .sppb-flag.is-open { flex: 0 1 auto; max-width: 168px; }
  .sppb-flag.is-open .sppb-fs { font-size: 12.5px; line-height: 1.3; }
  .sppb-wide .sppb-k { letter-spacing: .06em; }
}
@container sppb (max-width: 960px) {
  .sppb-box { padding: 12px; gap: 10px; }
  .sppb-dot { width: 28px; height: 28px; font-size: 12px; }
  .sppb-wide .sppb-k { font-size: 10.5px; letter-spacing: .04em; }
}
@container sppb (max-width: 860px) {
  .sppb-dot { display: none; }
  .sppb-ft { white-space: nowrap; }
}
@container sppb (max-width: 780px) {
  .sppb-flag-i { display: none; }
  .sppb-wide .sppb-k { font-size: 10px; letter-spacing: .02em; }
}

.sppb.sppb-compact .sppb-wide { display: none; }
.sppb.sppb-compact .sppb-short { display: flex; }
@media (max-width: 760px) {
  .sppb .sppb-wide { display: none; }
  .sppb .sppb-short { display: flex; }
}
/* THE HAMBURGER'S CORNER. Up to 1100px the app's only menu is a fixed button in the top-right corner (.hamburger-btn,
   app-styles-v2.css: top 12px, right 12px, about 44 by 40). On a phone the page's head steps aside on these screens, so
   the compact bar is the first thing on the page and its top two lines ran under the button ("Then p…", dev8 walk, 29
   Oct 2026). They keep the same 56px clear that every page head and Clips' own bar keep there; the three bars below
   them are lower than the button and keep the full width. Where the button is not shown (wider than 1100px, or
   during onboarding) nothing moves. */
@media (max-width: 1100px) {
  body:not(.onboarding-active) .sppb-short-top, body:not(.onboarding-active) .sppb-short-n { padding-right: 56px; }
}