/* ── Band pills: one look for every pill on a black band ────────────────
 *
 * Jamie (beta notes 2026-10-16): "Why are some pills grey on black and some
 * white on sage? Need a consistent language." This file is that language,
 * for every pill, chip and pill-shaped button on the black header and filter
 * bands — the timer app's (Reports, Dashboard, Staff status, Settings, the
 * week bar) and every checklist-prototype page's.
 *
 *   on / selected  the active segment of a toggle, an active filter or tab,
 *                  edit switched on, an open "?"  → sage fill, white text.
 *   main action    the ONE next step on a band (.pill.main: "issue ›",
 *                  "accept → live project", "+ new invoice", "check now",
 *                  "↓ download PDF") → sage fill too, so it stands out
 *                  (Jamie 2026-10-16: sage means "on, or the next step").
 *   waiting        something needs a look (.pill.attn: "changes (3)") →
 *                  amber fill, white text.
 *   everything     other actions ("export", "cancel", "save draft", "edit"
 *   else           when off, a segment that isn't picked) → no fill, a 1px #777
 *                  outline, white text. Never grey text: grey reads as
 *                  switched off.
 *   disabled       the same look at 40% opacity.
 *   hover          a white outline and a faint white tint (a segment, which
 *                  has no outline of its own, gets the tint).
 *
 * One height, radius, font size and side padding everywhere. The side
 * padding is 10px because the Finances band is the fullest: it fits at 10px
 * and ran past the page edge at the old 14px.
 *
 * Classes, inside a band:
 *   .pill                a pill — add .on (or the timer app's .active) when it
 *                        is the selected one; .round for a 28px circle ("?",
 *                        ‹ ›), .round.word for a circle holding a word ("all")
 *   .seg-wrap > .seg     a segmented toggle — .on / .active on the picked one;
 *                        .seg-icon for an arrow segment
 *
 * A band is .title-strip or .filter-band (the checklist-prototype pages'
 * two bars) or anything marked .dark-band (the timer app's bars, and the
 * checklist bands React styles inline). Pills on white keep their own page
 * styles — this file never reaches them.
 *
 * Not pills: the round initials chips (week bar, Reports, Dashboard) stand
 * for people and keep each person's colour — filled when picked, always
 * with black initials (applyChipColour in app-main.js; Jamie 2026-10-17). Inputs and pickers
 * (search, dates, the project / stage / filter pickers) are not pills either.
 *
 * Loaded after the page's own styles: by index.html after styles.css, and
 * by every checklist-prototype page after its <style> block. Root-relative,
 * so it resolves inside the iframes too.
 */
:root {
  --band-pill-h: 28px;
  --band-pill-radius: 14px;
  --band-pill-px: 10px;
  --band-pill-gap: 5px;
  --band-pill-fs: 12px;
  --band-pill-fw: 700;
  --band-pill-ls: 0.01em;
  --band-pill-font: 'Forma', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --band-pill-line: #777;
  --band-pill-text: #fff;
  --band-pill-on: #9BA38E;
  --band-pill-on-text: #fff;
  --band-pill-attn: #B26B00;
  --band-pill-hover-line: #fff;
  --band-pill-hover-tint: rgba(255, 255, 255, 0.08);
  --band-pill-disabled: 0.4;
}

/* ── Pill ─────────────────────────────────────────────────────────── */
:is(.title-strip, .filter-band, .dark-band) .pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--band-pill-gap);
  height: var(--band-pill-h);
  margin: 0;
  padding: 0 var(--band-pill-px);
  border: 1px solid var(--band-pill-line);
  border-radius: var(--band-pill-radius);
  background: transparent;
  color: var(--band-pill-text);
  font-family: var(--band-pill-font);
  font-size: var(--band-pill-fs);
  font-weight: var(--band-pill-fw);
  letter-spacing: var(--band-pill-ls);
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
:is(.title-strip, .filter-band, .dark-band) .pill.round {
  width: var(--band-pill-h);
  padding: 0;
  font-size: 14px;
}
/* A round pill holding a short word (Reports' "all") keeps the pill type size. */
:is(.title-strip, .filter-band, .dark-band) .pill.round.word {
  font-size: var(--band-pill-fs);
}
:is(.title-strip, .filter-band, .dark-band) .pill:is(.on, .active, .main) {
  background: var(--band-pill-on);
  border-color: var(--band-pill-on);
  color: var(--band-pill-on-text);
}
:is(.title-strip, .filter-band, .dark-band) .pill.attn {
  background: var(--band-pill-attn);
  border-color: var(--band-pill-attn);
  color: var(--band-pill-on-text);
}
/* A filled main or waiting pill gets a white outline on hover, keeping its fill. */
:is(.title-strip, .filter-band, .dark-band) .pill:is(.main, .attn):hover:not(:disabled):not(.disabled) {
  border-color: var(--band-pill-hover-line);
}
:is(.title-strip, .filter-band, .dark-band) .pill:hover:not(.on):not(.active):not(.main):not(.attn):not(:disabled):not(.disabled) {
  border-color: var(--band-pill-hover-line);
  background: var(--band-pill-hover-tint);
}
:is(.title-strip, .filter-band, .dark-band) .pill:is(:disabled, .disabled) {
  opacity: var(--band-pill-disabled);
  cursor: not-allowed;
}
:is(.title-strip, .filter-band, .dark-band) .pill:focus-visible {
  outline: 2px solid var(--band-pill-on);
  outline-offset: 2px;
}

/* ── Segmented toggle ─────────────────────────────────────────────── */
:is(.title-strip, .filter-band, .dark-band) .seg-wrap {
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  height: var(--band-pill-h);
  border: 1px solid var(--band-pill-line);
  border-radius: var(--band-pill-radius);
  background: transparent;
  overflow: hidden;
  flex-shrink: 0;
}
:is(.title-strip, .filter-band, .dark-band) .seg {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 var(--band-pill-px);
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--band-pill-text);
  font-family: var(--band-pill-font);
  font-size: var(--band-pill-fs);
  font-weight: var(--band-pill-fw);
  letter-spacing: var(--band-pill-ls);
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
:is(.title-strip, .filter-band, .dark-band) .seg + .seg {
  border-left: 1px solid var(--band-pill-line);
}
:is(.title-strip, .filter-band, .dark-band) .seg.seg-icon {
  width: var(--band-pill-h);
  padding: 0;
}
:is(.title-strip, .filter-band, .dark-band) .seg:is(.on, .active) {
  background: var(--band-pill-on);
  color: var(--band-pill-on-text);
}
:is(.title-strip, .filter-band, .dark-band) .seg:hover:not(.on):not(.active):not(:disabled) {
  background: var(--band-pill-hover-tint);
}
:is(.title-strip, .filter-band, .dark-band) .seg:disabled {
  opacity: var(--band-pill-disabled);
  cursor: not-allowed;
}
/* Inside the track, so white: a sage ring would vanish on the picked (sage)
   segment — the one keyboard focus most often lands on. */
:is(.title-strip, .filter-band, .dark-band) .seg:focus-visible {
  outline: 2px solid var(--band-pill-hover-line);
  outline-offset: -2px;
}