/* ── CallCrew console — components ───────────────────────────────────────────
 *
 * The recipes the console repeats, written once. Before this file the pill
 * recipe was retyped 243 times in the console document and the card 76 times,
 * which is why two pickers built a fortnight apart could differ by 2px and
 * nobody could tell which was right.
 *
 * Rules:
 *  - A class here is a recipe the design guide documents (see design.md and
 *    /admin/design/components). If it isn't documented, it isn't a component
 *    yet — leave it inline.
 *  - Inline styles still win over these, which is the point: a class carries
 *    the shared recipe and the element keeps whatever is local to it (a
 *    width, a flex, one colour).
 *  - Values come from tokens.css. No raw hex in this file.
 *
 * Loaded by the console document and by the design lab's Components page, so
 * the guide renders from the same CSS the product ships.
 */

/* ── Text ─────────────────────────────────────────────────────────────────── */

.cc-title {
  font-family: var(--cc-font);
  font-size: var(--cc-t-title);
  font-weight: 700;
  letter-spacing: var(--cc-track-title);
  color: var(--cc-ink);
}

.cc-title-sm {
  font-family: var(--cc-font);
  font-size: var(--cc-t-subtitle);
  font-weight: 700;
  color: var(--cc-ink);
}

.cc-body {
  font-size: var(--cc-t-control);
  line-height: 1.6;
  color: var(--cc-muted);
}

.cc-note {
  font-size: var(--cc-t-small);
  line-height: 1.5;
  color: var(--cc-muted);
}
/* A caption that is a state: the three state inks, and nothing else. */
.cc-note--bad { color: var(--cc-bad); }
.cc-note--live { color: var(--cc-live); }
.cc-note--warn { color: var(--cc-warn); }

/* The label above a group. It had drifted to eight different renderings
 * across the console (0.02em to 0.09em, weight 600 and 700, four different
 * greys); this is the one 26 of them agreed on. */
.cc-label {
  font-size: var(--cc-t-label);
  font-weight: 600;
  letter-spacing: var(--cc-track-label);
  text-transform: uppercase;
  color: var(--cc-muted);
}

/* ── Surfaces ─────────────────────────────────────────────────────────────── */

.cc-card {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-card);
  padding: 22px 24px;
}

/* The card that says there is nothing here yet: centred, with room. */
.cc-card--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 32px;
}

/* Same card, holding something that draws to its own edges (a list, a map, a
 * column that scrolls) — so it supplies no padding and clips instead. */
.cc-card--flush {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-card);
  overflow: hidden;
}


/* ── Buttons ──────────────────────────────────────────────────────────────
 * Four kinds and two sizes. Decided 11 Sep 2026: the console held 140 buttons
 * wearing 107 different shapes — six radii, five text sizes, seven fills.
 *
 * The corner is the pill, the same as every other rounded thing here, so
 * there is one radius to remember rather than a button radius AND a pill
 * radius AND a selector radius. Which KIND to reach for:
 *
 *   primary   the one thing this screen wants. One per screen.
 *   dark      a decision already taken, or a neutral "go here".
 *   outline   everything else.
 *   ghost     Cancel, Skip, Not now.
 *   danger    it destroys something. Never also the primary.
 *
 * disabled is a state, not a kind. */

.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--cc-r-pill);
  padding: 10px 18px;
  font-family: var(--cc-font);
  font-size: var(--cc-t-menu);
  font-weight: 600;
  color: var(--cc-ink);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cc-hover-in), border-color var(--cc-hover-in), color var(--cc-hover-in);
}

/* One per surface — a card, a dialog, a column. A second makes both ordinary.
 * There was a black fill beside this one (`--dark`) for "a decision already
 * taken"; nothing kept them apart, so Save was orange here and black there. */
.cc-btn--primary {
  background: var(--cc-orange-solid);
  color: var(--cc-white);
  box-shadow: var(--cc-shadow);
}
.cc-btn--primary:hover { background: var(--cc-orange-ink); }

.cc-btn--outline { background: var(--cc-white); border-color: var(--cc-line); }
.cc-btn--outline:hover { border-color: var(--cc-ink); }

.cc-btn--ghost { color: var(--cc-ink); }
.cc-btn--ghost:hover { background: var(--cc-line); }

/* A button that ends a column or a card: the full width, its label centred.
 * This was four different inline styles saying the same thing. */
.cc-btn--block { display: flex; width: 100%; justify-content: center; }

/* Wears its colour on the edge, not the fill: a solid red button is the
 * loudest thing on a page, and Disconnect is rarely the point of one. */
.cc-btn--danger {
  background: var(--cc-white);
  border-color: var(--cc-bad-dot);
  color: var(--cc-bad);
}
.cc-btn--danger:hover { background: var(--cc-bad-bg); }

/* The second size, for inside a card or a row. There is no third. */
.cc-btn--sm {
  font-size: var(--cc-t-small);
  padding: 7px 13px;
  gap: 7px;
}

.cc-btn[disabled],
.cc-btn--disabled {
  background: var(--cc-line);
  border-color: transparent;
  color: var(--cc-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* ── Selectors ────────────────────────────────────────────────────────────
 * Two to five choices, exactly one of them lit. The main switcher
 * (Activity / Office / Inbox / Custom), Actions vs Settings, Standard company
 * hours vs Custom — all the same control at different sizes of stakes.
 *
 * ALWAYS a capsule, and the lit one is ALWAYS black. There were three
 * containers before this: the glass bar, this white capsule, and a square
 * r10 box with r8 children that broke the rule outright.
 *
 * Glass is a property of the HEADER, not of selectors: the header's bar
 * floats over the page, so it is see-through. A selector inside a card is
 * white. Same pills either way. */

.cc-seg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-pill);
  background: var(--cc-white);
}

/* The one that floats: the header's switcher. */
.cc-seg--glass {
  padding: 9px;
  gap: 6px;
  border-color: var(--cc-glass-line);
  background: var(--cc-glass-bg);
  backdrop-filter: var(--cc-glass-blur);
  -webkit-backdrop-filter: var(--cc-glass-blur);
  box-shadow: var(--cc-shadow);
}

/* ── Pills, tabs and chips ────────────────────────────────────────────────
 * A pill is somewhere to go, something to press, or a state you are in.
 *
 * ONE SIZE, everywhere, at every depth. It used to come in five, and a
 * selector in the header looked like a different control from the same
 * selector in a card. */

.cc-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--cc-r-pill);
  padding: 9px 16px;
  font-family: var(--cc-font);
  font-size: var(--cc-t-control);
  font-weight: 500;
  color: var(--cc-ink);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cc-hover-in), color var(--cc-hover-in);
}
.cc-pill:hover { background: var(--cc-line); color: var(--cc-ink); }

/* Lit: the class, or a tab primitive's own active state (the borrowed Tabs,
 * which Radix marks with data-state rather than a class). */
.cc-pill--on,
.cc-pill[data-state="active"] {
  background: var(--cc-ink);
  color: var(--cc-white);
  font-weight: 600;
}
.cc-pill--on:hover,
.cc-pill[data-state="active"]:hover { background: var(--cc-ink); color: var(--cc-white); }

/* ── Counts ───────────────────────────────────────────────────────────────
 * A count is orange — the brand colour, whether it is theirs to clear or
 * yours — and a plain grey number beside a word is a tally. Red is not a
 * count's colour: the only red is something that failed.
 *
 * The rules live here and nowhere else, because a count appearing is what
 * used to shove the header's switcher sideways:
 *
 *   nothing at zero          an empty badge is worse than no badge
 *   1 to 99 as a number      you can act on a number
 *   over 99, a bare dot      "112" is not more useful than "a lot", and two
 *                            extra digits change the size of the thing
 *   the corner badge floats  position:absolute, so the pill underneath keeps
 *                            its width whether or not a number is on it
 *
 * ccCount() in the console's logic is the one place that decides which.
 * A tally inside a pill is not this: that is .cc-tally. */

.cc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--cc-r-pill);
  background: var(--cc-orange-solid);
  color: var(--cc-white);
  font-size: var(--cc-t-label);
  font-weight: 700;
  line-height: 1;
}

/* A task waiting on you, riding the corner of the thing it belongs to — the
 * ring cuts it out of whatever it overlaps, and the pill underneath never
 * changes width when a number arrives. */
.cc-count--task {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  background: var(--cc-orange-solid);
  font-size: 10.5px;
  box-shadow: 0 0 0 2px var(--cc-white);
}

/* Over 99. Same corner, no number — the ring still cuts it out of whatever
 * it overlaps, so it reads on a dark pill and a white one alike. */
.cc-count--dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  font-size: 0;
}

.cc-tally {
  color: var(--cc-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Menus ────────────────────────────────────────────────────────────────
 * One anatomy at different widths: a pill trigger naming what you are looking
 * at, then a fixed-width panel of rows in three columns. */

/* The panel's width comes from its longest row, between 200 and 320 — it was
 * hand-picked per menu before (200, 216, 262, 264, 320) with three different
 * radii and three paddings, so seven dropdowns were seven components. */
.cc-menu {
  position: absolute;
  z-index: 30;
  width: max-content;
  min-width: 200px;
  max-width: 320px;
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-menu);
  padding: 6px;
  box-shadow: var(--cc-shadow);
}

.cc-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--cc-r-button);
  font-size: var(--cc-t-menu);
  cursor: pointer;
  transition: background var(--cc-hover-in);
}
.cc-menu-row:hover { background: var(--cc-line); }
/* A row you can see but not pick — a channel that is coming. */
.cc-menu-row--off { cursor: default; }
.cc-menu-row--off:hover { background: transparent; }
.cc-menu-row--off .cc-menu-row__name { color: var(--cc-muted); }

.cc-menu-row__name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--cc-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Its own column, so the numbers line up instead of landing wherever each
 * name happened to end. */
.cc-menu-row__count {
  flex: 0 0 26px;
  text-align: right;
  color: var(--cc-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cc-menu-row__tick {
  flex: 0 0 13px;
  text-align: right;
  color: var(--cc-orange-solid);
}

/* The trigger: a pill that says what you are looking at and keeps its tally. */
.cc-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-pill);
  padding: 9px 13px;
  font-family: var(--cc-font);
  font-size: var(--cc-t-menu);
  font-weight: 600;
  color: var(--cc-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--cc-hover-in);
}
.cc-menu-trigger:hover { border-color: var(--cc-ink); }

/* The chevron every trigger wears: two borders and a rotation, so it inherits
 * the trigger's colour and needs no asset. */
.cc-chevron {
  width: 6px;
  height: 6px;
  display: block;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}

/* ── Rows ─────────────────────────────────────────────────────────────────
 * Most of the console is a list of things that happened. */

.cc-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 10px;
  border-radius: var(--cc-r-row);
  cursor: pointer;
  transition: background var(--cc-hover-in);
}
.cc-row:hover { background: var(--cc-line); }

/* Warm, not grey: grey reads as disabled. */
.cc-row--open { background: var(--cc-orange); }
.cc-row--open:hover { background: var(--cc-orange); }

/* ── Fields ───────────────────────────────────────────────────────────────
 * Quiet. A field is where you type, not a thing to look at. */

.cc-field {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-field);
  padding: 9px 11px;
  font-family: var(--cc-font);
  font-size: var(--cc-t-menu);
  color: var(--cc-ink);
  background: var(--cc-white);
  outline: none;
  transition: border-color var(--cc-hover-in), box-shadow var(--cc-hover-in);
}
/* Focus is visible, in the accent — see design.md: most of the console still
 * shows nothing, and anything new shows this. */
.cc-field:focus { border-color: var(--cc-orange-solid); box-shadow: 0 0 0 3px var(--cc-orange); }

/* A field for a paragraph. Taller, and it grows downwards only — a textarea
 * dragged wider breaks the card it sits in. */
textarea.cc-field { display: block; resize: vertical; line-height: 1.55; min-height: 84px; }

/* Sits ON the tint with no border of its own: a bordered field inside a white
 * card reads as two boxes. Always wears a .cc-mag-i — two of the five search
 * boxes had no mark at all and read as plain text fields.
 *
 * In the Inbox toolbar this sits directly beside a .cc-menu-trigger, so the
 * two have to line up, and they do by a pixel of arithmetic: 13px text either
 * way, 10px of padding here against the trigger's 9px plus its 1px border.
 * Change the padding on one and you have to change the other. */
.cc-search {
  display: flex;
  align-items: center;
  gap: 9px;
  /* The ground, not the line: --cc-line is the borders' grey, and filling a
   * box you type into with it read as a disabled control. Every search box
   * sits on a white card or menu, where the ground still marks it out. */
  background: var(--cc-ground);
  border-radius: var(--cc-r-field);
  padding: 0 12px;
}
.cc-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--cc-font);
  font-size: var(--cc-t-menu);
  color: var(--cc-ink);
  padding: 10px 0;
}
/* type="search" makes Chrome and Safari draw a clear button of their own,
 * which sat beside ours: two crosses, neither centred. Ours is the one. */
.cc-search input::-webkit-search-cancel-button,
.cc-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
/* Clearing is a plain cross in the field's own grey — no circle, no border:
 * inside a box you type into, a bordered button reads as a second field. */
.cc-search__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-right: -4px;
  padding: 0;
  border: none;
  border-radius: var(--cc-r-pill);
  background: transparent;
  color: var(--cc-muted);
  cursor: pointer;
  transition: color var(--cc-hover-in);
}
.cc-search__clear:hover { color: var(--cc-ink); }

/* ── Status ───────────────────────────────────────────────────────────────
 * A tinted ground with its own hairline and ink — never a bare coloured bar,
 * and never colour as the only signal. */

.cc-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--cc-r-notice);
  padding: 13px 16px;
  font-size: var(--cc-t-small);
  line-height: 1.5;
}
.cc-notice--live,
.cc-notice--warn,
.cc-notice--bad { border: 1px solid var(--cc-line); }
.cc-notice--live { background: var(--cc-live-bg); color: var(--cc-live); border-color: transparent; }
.cc-notice--warn { background: var(--cc-warn-bg); color: var(--cc-warn); border-color: transparent; }
.cc-notice--bad { background: var(--cc-bad-bg); color: var(--cc-bad); border-color: transparent; }

.cc-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; display: inline-block; }
.cc-dot--live { background: var(--cc-live-dot); }
.cc-dot--warn { background: var(--cc-orange-solid); }
.cc-dot--bad { background: var(--cc-bad-dot); }

/* ── Marks ────────────────────────────────────────────────────────────────
 * A mask, not an image, so one flat SVG takes its channel's ink wherever it
 * is used — and the typographic dingbats these replaced rendered as a
 * different picture on every OS. */

.cc-ch {
  display: inline-block;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* ── Loading ──────────────────────────────────────────────────────────────
 * Say the shape of what is coming — never last month's figures under this
 * month's heading. */

@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.cc-skel {
  background: var(--cc-line);
  border-radius: 8px;
  animation: cc-pulse 1.5s ease-in-out infinite;
}

/* ── Helpers ──────────────────────────────────────────────────────────── */

/* The single most-repeated style string in the console (29 copies): a flex
 * child that takes the room left over and is allowed to shrink below its
 * content, which is what makes the ellipsis on a long name work. */
.cc-grow { flex: 1; min-width: 0; }

.cc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cc-skel { animation: none; }
  .cc-btn, .cc-pill, .cc-seg, .cc-row, .cc-menu-row, .cc-menu-trigger, .cc-field,
  .cc-nav__row, .cc-link { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Decided 11 Sep 2026 (/admin/design → the decisions page). Each of these
 * existed in several near-identical versions; the one kept is the one most
 * of the console already used, so the change is the smallest visible one.
 * ───────────────────────────────────────────────────────────────────────── */

/* A page's own heading, above any card. Some were 21px, which nobody can
 * see and nobody chose. */
.cc-page-title {
  font-family: var(--cc-font);
  font-size: var(--cc-t-page);
  font-weight: 700;
  letter-spacing: var(--cc-track-title);
  color: var(--cc-ink);
}

/* ── Badge — the label family ─────────────────────────────────────────────
 * The small word that names a state or a category: an agent's action in the
 * log, a channel, a department, a status. Not pressable — if it can be
 * clicked it is a pill or a button, not this.
 *
 * ONE SCALE. There were eight across 53 labels, which is more scales than the
 * console has kinds of label, and the same word rendered at four sizes on
 * four screens.
 *
 * AND NO BORDER. Twelve of the old ones set a border the same colour as their
 * own background — invisible, but 2px of height, which is exactly why one
 * "Booked" looked different from the next. The tint is the shape. */

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--cc-t-label);
  font-weight: 600;
  border-radius: var(--cc-r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

/* The three that mean something fixed. */
.cc-badge--warn { color: var(--cc-warn); background: var(--cc-warn-bg); }
.cc-badge--live { color: var(--cc-live); background: var(--cc-live-bg); }
.cc-badge--bad { color: var(--cc-bad); background: var(--cc-bad-bg); }

/* No judgement attached: this is one kind of thing and that is another. */
.cc-badge--plain { color: var(--cc-muted); background: var(--cc-line); }
.cc-badge--yellow { color: var(--cc-yellow-ink); background: var(--cc-yellow); }
.cc-badge--teal { color: var(--cc-teal-ink); background: var(--cc-teal); }
.cc-badge--indigo { color: var(--cc-indigo-ink); background: var(--cc-indigo); }
.cc-badge--violet { color: var(--cc-violet-ink); background: var(--cc-violet); }
.cc-badge--magenta { color: var(--cc-magenta-ink); background: var(--cc-magenta); }

/* The one badge that DOES carry an edge, because it carries no fill: for a
 * label that has to sit on a tint already. */
.cc-badge--outline { color: var(--cc-ink); background: var(--cc-white); border: 1px solid var(--cc-line); }

/* A badge you can take off: the cross inside it, in the badge's own ink. */
.cc-badge__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: -4px;
  padding: 0;
  border: 0;
  border-radius: var(--cc-r-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--cc-hover-in), background var(--cc-hover-in);
}
.cc-badge__x:hover { opacity: 1; }

/* ── Choice ───────────────────────────────────────────────────────────────
 * An option picked by pressing the whole of it. With a sentence under the
 * name it is a card; with a name alone, a chip. Chosen is the orange edge on
 * the orange tint with the orange tick — pick-one and pick-many look the same.
 * Green is only ever a switch that is on. */

.cc-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px 13px 16px;
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-field);
  color: var(--cc-ink);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--cc-hover-in), background var(--cc-hover-in);
}
.cc-choice:hover { border-color: var(--cc-ink); }
.cc-choice--chip { display: inline-flex; border-radius: var(--cc-r-pill); padding: 8px 9px 8px 16px; }
.cc-choice--on { border-color: var(--cc-orange-solid); background: var(--cc-orange); }
.cc-choice--on:hover { border-color: var(--cc-orange-ink); }
.cc-choice--off { cursor: default; }
.cc-choice--off:hover { border-color: var(--cc-line); }
.cc-choice--off .cc-choice__name { color: var(--cc-muted); }

.cc-choice__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cc-choice__name { font-size: var(--cc-t-control); font-weight: 600; }
.cc-choice--chip .cc-choice__name { font-size: var(--cc-t-menu); white-space: nowrap; }
.cc-choice__note { font-size: var(--cc-t-small); color: var(--cc-muted); line-height: 1.45; }

.cc-choice__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border-radius: var(--cc-r-pill);
  border: 1px solid var(--cc-line);
  background: var(--cc-white);
  color: var(--cc-white);
}
.cc-choice--on .cc-choice__tick { background: var(--cc-orange-solid); border-color: var(--cc-orange-solid); }

/* ── Check ────────────────────────────────────────────────────────────────
 * The tick on its own: the same 20px circle a Choice wears, orange when
 * ticked. Pick-one and pick-many look the same — there is no square box. */

.cc-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-pill);
  background: var(--cc-white);
  color: var(--cc-white);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--cc-hover-in), background var(--cc-hover-in);
}
.cc-check:hover { border-color: var(--cc-ink); }
.cc-check--on { background: var(--cc-orange-solid); border-color: var(--cc-orange-solid); }
/* Pick-one: the chosen one is already chosen, so it stops looking pressable. */
.cc-check--one.cc-check--on { cursor: default; }

/* ── Switch ───────────────────────────────────────────────────────────────
 * 46 × 26 with a 20px knob, and GREEN when on: green already means "live
 * and connected" everywhere else, while orange also means "press this". */

.cc-switch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 46px;
  width: 46px;
  height: 26px;
  padding: 0 3px;
  border-radius: var(--cc-r-pill);
  background: var(--cc-line);
  cursor: pointer;
  transition: background var(--cc-hover-in);
}
.cc-switch--on { justify-content: flex-end; background: var(--cc-live-dot); }
.cc-switch--off { justify-content: flex-start; background: var(--cc-line); }
.cc-switch__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--cc-white);
  display: block;
}

/* A switch that says what it is set to, the word part of the target: "On",
 * "Yes". The word takes the state's colour; the track is the switch above.
 * In a page header it wears the pill shell, the bordered capsule beside the
 * view selector. */
.cc-switch-word {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--cc-font);
  font-size: var(--cc-t-menu);
  font-weight: 600;
  color: var(--cc-muted);
  cursor: pointer;
  user-select: none;
}
.cc-switch-word--on { color: var(--cc-live); }
/* The track inside is not a control of its own: it takes the button's cursor. */
.cc-switch-word > .cc-switch { cursor: inherit; }
.cc-switch-word--pill {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-pill);
  padding: 8px 9px 8px 16px;
  transition: border-color var(--cc-hover-in);
}
.cc-switch-word--pill:hover { border-color: var(--cc-ink); }
.cc-switch-word[disabled] { cursor: default; }
.cc-switch-word[disabled]:hover { border-color: var(--cc-line); }
/* Locked: the state still shows, in the palette's quieter steps — never a
   faded green, which is a shade the palette doesn't have. */
.cc-switch-word[disabled] > .cc-switch--on { background: var(--cc-green); }
.cc-switch-word[disabled] > .cc-switch > .cc-switch__knob { box-shadow: 0 0 0 1px var(--cc-line); }
.cc-switch-word[disabled] > .cc-switch-word__text { color: var(--cc-muted); }

/* ── Icon button ──────────────────────────────────────────────────────────
 * One symbol, no words. Round and 30px, matching the pill shape the rest of
 * the console is made of. */

.cc-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: var(--cc-r-pill);
  border: 1px solid var(--cc-line);
  background: var(--cc-white);
  color: var(--cc-muted);
  font-size: 14px;
  cursor: pointer;
  transition: border-color var(--cc-hover-in), color var(--cc-hover-in);
}
.cc-icon-btn:hover { border-color: var(--cc-ink); color: var(--cc-ink); }

/* The one action of a composer or a player — Send, Play. The same circle,
 * filled in ink; it lifts to the muted grey rather than taking the line
 * colour, which would erase the fill that identifies it. (Never a brightness
 * filter: that mixes a shade the palette doesn't have.) */
.cc-icon-btn--solid { background: var(--cc-ink); border-color: var(--cc-ink); color: var(--cc-white); transition: background var(--cc-hover-in), border-color var(--cc-hover-in); }
.cc-icon-btn--solid:hover { background: var(--cc-muted); border-color: var(--cc-muted); color: var(--cc-white); }

/* In a table header it sits on the column title's line, a size down so the
 * header stays one line of type and not a row of controls. */
th > .cc-icon-btn {
  display: inline-flex;
  vertical-align: middle;
  flex-basis: 24px;
  width: 24px;
  height: 24px;
}

/* A chevron alone in the round button is centred on it. Its own nudge is for
 * sitting beside words; here it would push the mark off to one side. The
 * visible V is the lower half of the turned square, so it is lifted by that. */
.cc-icon-btn > .cc-chevron { transform: rotate(45deg) translate(-1.5px, -1.5px); }

/* ── Card footer ──────────────────────────────────────────────────────────
 * Where a card's actions live, under the soft line. */

.cc-card__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  border-top: 1px solid var(--cc-line);
}

/* ── Range ────────────────────────────────────────────────────────────────
 * A slider, for a level rather than a choice (a volume). The track is the
 * hairline, the part up to the knob is the brand orange (its width is the
 * input's --fill, set where it is drawn), and the knob is a white disc — the
 * browser's own track went near-black beside an orange accent. */
.cc-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: var(--cc-r-pill);
  background: linear-gradient(to right, var(--cc-orange-solid) var(--fill, 0%), var(--cc-line) var(--fill, 0%));
  outline: none;
  cursor: pointer;
}
.cc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
}
.cc-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
}
.cc-range:focus-visible { outline: 2px solid var(--cc-ink); outline-offset: 4px; }

/* ── Save ─────────────────────────────────────────────────────────────────
 * Where a save lives, everywhere: the bottom-right of what it saves, under a
 * hairline, with its state on the left. Inside a padded card it sits in the
 * card's own padding; sticky, it is its own floating strip at the bottom of
 * the page, for a form longer than the screen. */
.cc-savefoot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cc-line);
}
.cc-savefoot__note {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--cc-t-small);
  color: var(--cc-muted);
}
.cc-savefoot--sticky {
  position: sticky;
  /* Clear of the corner's floating button, which owns the bottom-right. */
  bottom: 84px;
  z-index: 5;
  padding: 12px 16px 12px 22px;
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-pill);
  box-shadow: var(--cc-shadow);
}

/* ── Divider ──────────────────────────────────────────────────────────────
 * Between two groups inside a card. Same line every time, same air. */

.cc-divider {
  border-top: 1px solid var(--cc-line);
  margin-top: 18px;
  padding-top: 18px;
}

/* ── Status line ──────────────────────────────────────────────────────────
 * A dot and a word: this is live. 12.5px is the console's usual small size,
 * and at 600 it reads as a fact rather than an alarm. */

.cc-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cc-t-small);
  font-weight: 600;
  color: var(--cc-live);
}
.cc-status .cc-dot { width: 7px; height: 7px; flex: 0 0 7px; }
.cc-status--warn { color: var(--cc-warn); }
.cc-status--bad { color: var(--cc-bad); }

/* ─────────────────────────────────────────────────────────────────────────
 * Decided 11 Sep 2026 (the widget inventory). Nine families were measured
 * across the console and one specimen chosen for each; these are the four
 * that needed a component built rather than an existing one narrowed.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Side menu ────────────────────────────────────────────────────────────
 * The column down the left of the Office and Settings pages. Both already
 * agreed on the card, the caption and the capsule rows; they disagreed only
 * about depth, where Office made its children a size smaller.
 *
 * ONE SIZE AT EVERY DEPTH. The indent already says "child" — shrinking the
 * text says it twice, and makes a flat menu look like a different component
 * from a nested one.
 *
 * A row's parts: a mark, the name (which truncates), and at most one thing on
 * the right — a running dot, a chevron, or a count. Never two. */

.cc-nav {
  background: var(--cc-white);
  border: 1px solid var(--cc-line);
  border-radius: var(--cc-r-notice);
  padding: 8px;
}

.cc-nav__cap {
  font-size: var(--cc-t-label);
  font-weight: 600;
  letter-spacing: var(--cc-track-label);
  text-transform: uppercase;
  color: var(--cc-muted);
  padding: 8px 16px 10px;
}

.cc-nav__row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--cc-r-pill);
  font-size: var(--cc-t-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--cc-ink);
  cursor: pointer;
  transition: background var(--cc-hover-in), color var(--cc-hover-in);
}
.cc-nav__row:hover { background: var(--cc-line); }

/* Exactly one lit row in the whole column, black, the same as a lit pill. */
.cc-nav__row--on { background: var(--cc-ink); color: var(--cc-white); }
.cc-nav__row--on:hover { background: var(--cc-ink); color: var(--cc-white); }

/* A row that is only a heading over its children — never lit, never the
 * chosen thing, so it is quieter than a row you can land on. */
.cc-nav__row--branch { color: var(--cc-ink); }

/* An idle row you could go to. Muted until you hover it or it is lit. */
.cc-nav__row--idle { color: var(--cc-muted); font-weight: 500; }
.cc-nav__row--idle:hover { color: var(--cc-ink); }

/* The fold. 16px in, so a child's mark sits under its parent's name. */
.cc-nav__kids {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 2px 16px;
}

/* ── Link ─────────────────────────────────────────────────────────────────
 * UNDERLINE MEANS CLICKABLE. Ink text, orange underline — the underline
 * carries the accent so a paragraph of links doesn't turn orange.
 *
 * The corollary matters more than the rule: orange text WITHOUT an underline
 * is emphasis, not a link. Forty-three places used it either way, so nothing
 * could be trusted. If it clicks, underline it. */

.cc-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--cc-orange-solid);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: text-decoration-color var(--cc-hover-in);
}
.cc-link:hover { text-decoration-color: var(--cc-orange-solid); }

/* ── Magnifier ────────────────────────────────────────────────────────────
 * The search mark, as a mask so it takes the field's own colour. It was drawn
 * four different sizes, and one search box wore the typographic dingbat ⌕
 * instead — which renders as a different picture on every OS. */
.cc-mag-i {
  --i: url(/foundations/marks/search.svg);
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--cc-muted);
}

/* ── Hover, for screens that are React ────────────────────────────────────
 * The console document expresses hover with a `style-hover` attribute its own
 * renderer understands. React has no equivalent, so the two hovers the
 * template used become a class: a fill in the line colour, and text going to
 * ink. Reach for this on anything clickable that is not already a .cc-btn,
 * .cc-pill or .cc-nav__row — those carry their own. */
.cc-hover-fill { transition: background var(--cc-hover-in), color var(--cc-hover-in); }
.cc-hover-fill:hover { background: var(--cc-line); color: var(--cc-ink); }

/* A control that already carries its own fill — a dark Send, a green play
 * circle — cannot use .cc-hover-fill: painting the line colour over it would
 * erase the thing that identifies it. It takes a line-coloured ring instead.
 * (Never a brightness filter: that mixes a shade the palette doesn't have.) */
.cc-hover-bright { outline: 2px solid transparent; outline-offset: 1px; transition: outline-color var(--cc-hover-in); }
.cc-hover-bright:hover { outline-color: var(--cc-line); }

/* A control whose whole shape is a BORDER — a dashed "+ Add tag", an org
 * avatar in a ring — answers by darkening the edge and the text to ink. It
 * cannot take .cc-hover-fill (there is no fill to change) and brightening a
 * white ground does nothing you can see.
 *
 * The effect is not new: .cc-icon-btn already decided it,
 * each writing it out again. Naming it is what lets a one-off control reach
 * for the decision instead of inventing a thirty-fourth hover of its own —
 * which is how three controls ended up answering the mouse with nothing at
 * all, a failure that renders identically and reports nowhere. */
.cc-hover-edge { transition: border-color var(--cc-hover-in), color var(--cc-hover-in); }
.cc-hover-edge:hover { border-color: var(--cc-ink); color: var(--cc-ink); }

/* ── Focus ────────────────────────────────────────────────────────────────
 * ONE focus treatment, on everything you can operate.
 *
 * The console had none: six screens, zero focus handling, and nine places
 * that removed the outline outright. A keyboard user could not see where they
 * were. WCAG 2.2 asks for an indicator at least a 2px perimeter at 3:1 against
 * its surroundings; ink on any of our surfaces is about 14:1.
 *
 * The 2px OFFSET is what makes one rule work everywhere: on a dark pill the
 * ring sits just outside it, on the light surface behind — so the same ink
 * ring reads on the black selected tab and on a white card.
 *
 * :focus-visible, not :focus, so a mouse press does not draw it. */
.cc-focus:focus-visible,
.cc-btn:focus-visible,
.cc-pill:focus-visible,
.cc-nav__row:focus-visible,
.cc-menu-row:focus-visible,
.cc-menu-trigger:focus-visible,
.cc-icon-btn:focus-visible,
.cc-badge__x:focus-visible,
.cc-search__clear:focus-visible,
.cc-choice:focus-visible,
.cc-check:focus-visible,
.cc-link:focus-visible,
.cc-switch:focus-visible,
.cc-switch-word:focus-visible,
.cc-field:focus-visible,
.cc-search:focus-within {
  outline: 2px solid var(--cc-ink);
  outline-offset: 2px;
}

/* A field's own focus still tints its border — that is the "you are typing
 * here" signal, and it shows for a mouse user too. The ring above is the
 * keyboard one, and they stack without fighting. */
.cc-search:focus-within { outline-offset: 1px; }