/* ==========================================================================
   mode-chips.css — the primary-domain (Mode) chip row
   --------------------------------------------------------------------------
   Source of truth: Figma rMEk1pvm3hlrn2JuW5Sw34, UI kit §7 "Mode Chips"
   (158:1035). Three state frames, one component:

     Normal    166:4198 → row 166:4200, chip 166:4201
     Hover     166:4104 → row 166:4106, chip 166:4107
     Focused   166:4230 → row 166:4232, chip 166:4233

   The four chips are Research / Design / Architecture / Code (166:4201, 4205,
   4214, 4223), which is exactly the product's MODES list in exactly that
   order — the kit is drawing this row, not a lookalike.

   ONE IMPLEMENTATION. Before this file the same row had two, and which one a
   reader got depended on where the row was mounted:

     A  workspace-home.css  `.ws-empty__center .ws-primary-domain`
        35 tall, radius 10.143 — close to the kit's box, sourced from 81:1008,
        but with an INVENTED selected state (a flat #397acd fill and a
        brightness/invert filter on the glyph). Its own comment said so:
        "81:1008 draws all four at rest, so it states no selected treatment;
        this keeps the workspace's own established one".
     B  workspace-home-figma.css  `.ws-primary-domain` — UNSCOPED
        32 tall, radius 999 (a pill), 0/15 padding, 13px Medium, a 1px border,
        plus three narrow-viewport rules that re-proportioned the chip.

   B lost every box property to A's higher specificity on Home, so it was dead
   where it was visible and live everywhere else — a generic, unscoped selector
   waiting to repaint any `.ws-primary-domain` mounted outside
   `.ws-empty__center`. Both are deleted. This file is the only owner, and it
   is keyed on the component's own classes rather than on an ancestor, so the
   row draws the same in the Home column and in the composer dock.

   §7 SUPERSEDES THE INVENTED SELECTED STATE. The kit does define the third
   state; A only lacked it because 81:1008 was the wrong frame to look at.

   WHAT THE KIT'S THREE STATES MAP ONTO. Normal and Hover are literal. The
   third, "Focused", is a persistent gradient fill — a treatment for the chip
   that is CHOSEN, not for a transient keyboard ring, and single-select is this
   row's real behaviour (index.html syncPrimaryDomainRow → aria-pressed). So
   Focused is the selected state. §7 draws no separate keyboard-focus state, so
   keyboard focus keeps the product's real focus ring over the hover fill —
   that is accessibility behaviour, which survives the visual replacement.

   ICONS. assets/icons/home/mode-{research,design,architecture,code}.svg were
   diffed path-for-path against §7's own exports (166:4202/4206/4215/4224) and
   are IDENTICAL — same 18 box, same #4B88E9. They are the kit's assets
   already, so nothing is re-exported and nothing is approximated.

   DISABLED is not a §7 state; it is real product behaviour (the row locks
   while a turn is submitting or orchestrating), so it keeps the product's
   existing treatment rather than gaining an invented drawing.
   ========================================================================== */

.ws-primary-domains {
  /* 166:4201 — the chip's fill, hairline and inks. Declared on the row so the
     four chips share one set and nothing reaches into the global token layer
     for a single component. */
  --oc-mode-fill: #fdfbfa;                      /* 166:4201 */
  --oc-mode-edge: #e2e3e1;                      /* 0.5px, all three states */
  --oc-mode-ink: #02193e;                       /* 166:4204 */
  --oc-mode-hover: rgba(95, 156, 238, 0.32);    /* 166:4107 */
  /* 166:4233 — the chosen chip: a warm-to-blue sweep under a white top fade.
     (Design and Architecture add a third flat #5f9cee layer beneath the same
     two; layer 2 is opaque, so it never shows. The two-layer stack is the
     state.) */
  --oc-mode-chosen:
    linear-gradient(180deg, #fff9f9 0%, rgba(255, 255, 255, 0.1) 100%),
    linear-gradient(90deg, #ffc368 0%, #5f9cee 100%);

  /* 166:4200 — wrap, 12 apart. The kit lays the row out from the left; the
     product centres it under the composer, which is the host's composition and
     not a property of the chip. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* 166:4201 — 35 tall, min 54.0956, 4 / 10.143 of padding, 3.381 between mark
   and label, radius 10.143, a 0.5px #e2e3e1 edge and a 35.5 backdrop blur. */
.ws-primary-domain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.381px;
  min-width: 54.0956px;
  height: 35px;
  padding: 4px 10.143px;
  box-sizing: border-box;
  overflow: clip;
  /* A real 0.5px border, as the node draws it: at this size the box is stated
     as 35 INCLUDING the stroke, and border-box keeps that true. */
  border: 0.5px solid var(--oc-mode-edge);
  border-radius: 10.143px;
  background: var(--oc-mode-fill);
  -webkit-backdrop-filter: blur(35.5px);
  backdrop-filter: blur(35.5px);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-normal);       /* 166:4204 — Regular, not Medium */
  font-size: var(--text-sm);                    /* 14 */
  line-height: 1.35;
  color: var(--oc-mode-ink);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

/* 166:4202 — the 18 mark, in every state. */
.ws-primary-domain__icon {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* 166:4203 — the label's own 3.381 side padding. */
.ws-primary-domain__label { padding: 0 3.381px; }

/* ---- Hover ---------------------------------------------------- 166:4107 --
   Fill only; the edge, the box and the ink are unchanged. */
.ws-primary-domain:hover:not(:disabled):not([aria-pressed="true"]) {
  background: var(--oc-mode-hover);
}

/* ---- Focused / chosen ----------------------------------------- 166:4233 --
   The chip that is the primary domain for this request. The glyph keeps its
   own #4B88E9 — §7 leaves it untouched under the gradient, and the filter that
   used to whiten it belonged to the flat blue fill this replaces. */
.ws-primary-domain[aria-pressed="true"] {
  background: var(--oc-mode-chosen);
}

/* ---- Keyboard focus ------------------------------------------------------
   Not a §7 state. The ring is the product's existing accessibility behaviour
   and is kept; the fill underneath is the kit's hover, so focus never invents
   a fourth appearance. */
.ws-primary-domain:focus-visible {
  outline: 2px solid rgba(95, 156, 238, 0.55);
  outline-offset: 2px;
}
.ws-primary-domain:focus-visible:not([aria-pressed="true"]) {
  background: var(--oc-mode-hover);
}

/* ---- Disabled ------------------------------------------------------------
   Real behaviour, not a drawn state: the row locks while a turn is submitting
   or orchestrating (index.html syncPrimaryDomainRow). Kept as it was. */
.ws-primary-domain:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

/* The row's live region — announces the chosen mode. Behaviour, not a drawing;
   moved here from workspace-home-figma.css with the rest of the component. */
.ws-primary-domains__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* §7 states one row and no narrow variant. The chips wrap (166:4200 is a
   wrapping row), which is what carries a narrow column — so nothing here
   re-proportions the chip the way the two replaced copies did. */

@media (prefers-reduced-motion: reduce) {
  .ws-primary-domain { transition: none; }
}