/*
  The hidden attribute has to win. Components that set their own display, like
  .ap-info, otherwise override it, and an empty error box shows as a bar of colour.
*/
/*
  Component text rules below target spans, and icon tiles, avatar badges and
  status pills are spans too. Written as `.x span` those rules outranked the
  tile's own styles, so every icon slid into the corner of its tile and turned
  grey. Each is now `.x :where(span:not(.ap-tile, .ap-av, .ap-pill))`: it
  styles text only, and :where keeps its specificity where it was.
*/

[hidden] {
  display: none !important;
}

/*
  The app shell.

  Two product surfaces share everything in this file: the worker app and the
  operator console. They are not two design systems that resemble each other —
  they are one sidebar, one card, one table and one set of status pills,
  differing only in density and in which nav sits in the rail.

  Loaded after `quorum.css` and built entirely on its tokens, so the apps cannot
  drift away from the site: there is not a colour, radius or shadow defined here
  that the marketing pages do not already use.

  Built to the approved comps — 226px rail, pale blue ground, white panels at
  16px radius, a 38px rounded-square icon tile in accent wash, and an active nav
  row marked by a bar flush against the rail's own left edge. Three things in
  the comps are deliberately not reproduced, each for a reason stated at the
  rule that changes it: the accent never decorates a heading, the primary action
  is 56px rather than 44, and nothing celebrates a payment.
*/

/* Dark mode is defined in quorum.css, with the tokens, so every page shares one palette. */

/* ------------------------------------------------------------------ shell -- */

.ap {
  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--ground);
}

.ap-side {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 14px 18px;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.ap-side .brand {
  gap: 10px;
  padding-inline: 8px;
  margin-bottom: 26px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.ap-side .brand .mark {
  width: 28px;
  height: 28px;
  color: var(--accent);
}

/* The console labels its own rail, so an operator cannot confuse the two apps. */
.ap-side-label {
  margin: 0 0 10px;
  padding-inline: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.ap-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
  One nav row.

  The marker sits at -14px because in the comps it touches the left edge of the
  rail, not the edge of the row — it is offset by the rail's own padding. It is
  drawn as well as filled because "which page am I on" must never be a question
  answered by hue alone.
*/
.ap-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-3);
}

.ap-nav a svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.ap-nav a:hover {
  background: var(--ground);
  color: var(--ink-2);
}

.ap-nav a[aria-current] {
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
}

.ap-nav a[aria-current]::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.ap-side-foot {
  margin-top: auto;
  padding-top: 20px;
}

/* The reassurance card the comps park at the foot of the rail. */
.ap-note {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--accent-wash);
  color: var(--accent);
}

.ap-note svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 1px;
}

.ap-note b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.ap-note p {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.ap-note-good {
  background: var(--good-wash);
  color: var(--good);
}

.ap-theme {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink-3);
  cursor: pointer;
}

.ap-theme:hover {
  background: var(--ground);
  color: var(--ink-2);
}

.ap-theme svg:first-child {
  width: 18px;
  height: 18px;
  flex: none;
}

.ap-theme .caret {
  margin-left: auto;
  transform: rotate(-90deg);
}

/* The operator's own row, at the foot of the console rail. */
.ap-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 8px;
  padding: 8px;
  border-radius: var(--r-md);
}

.ap-who:hover {
  background: var(--ground);
}

.ap-who b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ap-who :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 11.5px;
  color: var(--ink-4);
}

.ap-who .caret {
  margin-left: auto;
  transform: rotate(-90deg);
  color: var(--ink-4);
}

/* ------------------------------------------------------------------- main -- */

.ap-main {
  min-width: 0;
  padding: 28px 40px 64px;
}

.ap-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.ap-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.ap-back svg {
  width: 16px;
  height: 16px;
}

.ap-back:hover {
  color: var(--accent);
}

.ap-hello {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}

.ap-hello svg {
  width: 16px;
  height: 16px;
  color: var(--ink-4);
}

.ap-top-end {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/*
  The bell.

  A dot when something is waiting and nothing when nothing is. There is no count
  that climbs and nothing here ever nags: a worker who puts the phone down is
  not behind on anything, and a console that cries for attention it does not
  need is a console an operator learns to ignore.
*/
.ap-bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}

.ap-bell:hover {
  background: var(--ground-2);
  color: var(--ink);
}

.ap-bell svg {
  width: 18px;
  height: 18px;
}

.ap-bell[data-dot]::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}

.ap-bell[data-dot='alert']::after {
  background: var(--bad);
}

.ap-clock {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ap-clock b {
  display: block;
  font-weight: 600;
  color: var(--ink-2);
}

/* ------------------------------------------------------------- typography -- */

.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/*
  Headings are ink, all of them, all the way through.

  The comps set the closing words of several headings in accent. One accent
  colour, used only for the primary action, is the whole design direction — a
  heading that borrows it competes with the one button on the page, and in two
  comps it made a full stop the same blue as the call to action. The break
  between lines is kept; only the colour moved.
*/
.ap-h1 {
  margin: 0 0 8px;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ink);
}

.ap-h1 em {
  display: block;
  font-style: normal;
  color: var(--ink);
}

.ap-h1-lg {
  font-size: 42px;
}

.ap-sub {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 46em;
}

.ap-h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.ap-h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.25;
  color: var(--ink);
}

/* ------------------------------------------------------------------ cards -- */

.ap-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 328px;
  align-items: start;
  gap: 24px;
}

.ap-cols-3 {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: 20px;
}

.ap-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ap-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.ap-pad {
  padding: 20px 22px;
}

.ap-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
}

/*
  A panel title, which may carry an icon tile.

  Flex, because a 30px inline-grid tile inside a plain heading sits on the text
  baseline rather than centring on it: the tile hangs below the words and reads
  as an icon that has come loose of its title. Centring them together is what
  the comps show.
*/
.ap-card-head .ap-h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
}

.ap-card-head + .ap-pad {
  padding-top: 0;
}

/* "View all →", the quiet link every panel header in the comps carries. */
.ap-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

.ap-more svg {
  width: 13px;
  height: 13px;
}

.ap-tile {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  background: var(--accent-wash);
  color: var(--accent);
}

.ap-tile svg {
  width: 19px;
  height: 19px;
}

.ap-tile-sm {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.ap-tile-sm svg {
  width: 15px;
  height: 15px;
}

.ap-tile-lg {
  width: 46px;
  height: 46px;
  border-radius: 14px;
}

.ap-tile-lg svg {
  width: 23px;
  height: 23px;
}

.ap-tile-good {
  background: var(--good-wash);
  color: var(--good);
}

.ap-tile-bad {
  background: var(--bad-wash);
  color: var(--bad);
}

.ap-tile-warn {
  background: var(--warn-wash);
  color: var(--warn);
}

.ap-tile-plain {
  background: var(--ground-2);
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ split -- */

/*
  The divided metric strip: two or three figures in one card, separated by
  hairlines rather than split into three cards. Stacks below 900px, where a
  vertical rule between wrapped cells means nothing.
*/
.ap-split {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 22px 0;
}

.ap-split > * {
  padding-inline: 24px;
  border-left: 1px solid var(--border);
}

.ap-split > *:first-child {
  border-left: 0;
}

.ap-metric {
  display: flex;
  gap: 13px;
  text-align: left;
}

.ap-metric > div {
  min-width: 0;
}

.ap-metric :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
}

.ap-metric b {
  display: block;
  margin: 3px 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ap-metric em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-4);
}

/* ------------------------------------------------------------------ stats -- */

.ap-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.ap-stat {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}

.ap-stat > div {
  min-width: 0;
}

.ap-stat :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
}

.ap-stat b {
  display: block;
  margin: 2px 0 3px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ap-stat em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-4);
}

/*
  A trend.

  It carries an arrow glyph as well as a colour, and the cell it sits in says
  what it is measured against. "↑ 12%" on its own decorates a console without
  informing anybody standing in front of it.
*/
.ap-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--good);
}

.ap-trend-down {
  color: var(--bad);
}

.ap-trend-flat {
  color: var(--ink-4);
}

/* ------------------------------------------------------------------- rows -- */

.ap-rows {
  display: flex;
  flex-direction: column;
}

.ap-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 56px;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  color: inherit;
}

.ap-rows > .ap-row:first-child {
  border-top: 0;
}

a.ap-row:hover,
button.ap-row:hover {
  background: var(--surface-2);
}

button.ap-row {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ap-row > div {
  min-width: 0;
  flex: 1;
}

.ap-row b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ap-row :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-4);
}

/*
  A numbered badge inside a row. `.ap-row span` above is more specific than
  `.ap-av`, so without this the badge became a small grey block with its digit
  in the corner.
*/
.ap-row .ap-av {
  display: grid;
  color: var(--accent-ink);
  font-size: 11px;
  line-height: 1;
}

.ap-row .caret {
  flex: none;
  transform: rotate(-90deg);
  color: var(--ink-4);
}

.ap-row-val {
  flex: none !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The one row in a rail card that carries the headline figure. */
.ap-row-lead {
  margin: 0 14px 6px;
  border-radius: var(--r-lg);
  border-top: 0;
  background: var(--accent-wash);
}

.ap-row-lead b {
  font-size: 22px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.ap-row-lead :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  font-size: 12px;
  color: var(--ink-3);
}

.ap-rows-inset > .ap-row {
  margin-inline: 14px;
  padding-inline: 6px;
}

/* ------------------------------------------------------------------ boxes -- */

.ap-info {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--accent-wash);
  color: var(--accent);
}

.ap-info svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
}

.ap-info > div {
  min-width: 0;
}

.ap-info b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ap-info p {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.ap-info-good {
  background: var(--good-wash);
  color: var(--good);
}

.ap-info-bad {
  background: var(--bad-wash);
  color: var(--bad);
}

.ap-info-warn {
  background: var(--warn-wash);
  color: var(--warn);
}

.ap-info-plain {
  background: var(--ground-2);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- actions -- */

/*
  The primary action.

  56px, not the comps' 44. This is the one measurement in them worth overruling:
  a worker taps it outdoors, one-handed, on a cracked phone, and 56px is the
  accessibility floor this surface is checked against.
*/
.ap-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding-inline: 24px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  box-shadow: var(--sh-sm);
}

.ap-primary:hover {
  background: var(--accent-2);
}

.ap-primary[disabled],
.ap-primary[aria-disabled='true'] {
  background: var(--accent-wash-2);
  color: var(--ink-5);
  cursor: default;
  box-shadow: none;
}

.ap-second {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.ap-second:hover {
  border-color: var(--ink-5);
  color: var(--ink);
}

.ap-second svg {
  width: 16px;
  height: 16px;
}

/*
  Skip.

  Free, quiet, and never confirmed. A worker trapped on a question they cannot
  answer will answer it badly, which costs everyone more than the skip does, so
  nothing here is styled to make leaving feel like a loss.
*/
.ap-skip {
  display: block;
  width: 100%;
  min-height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
}

.ap-skip:hover {
  background: var(--ground-2);
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- options -- */

.ap-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

/*
  One answer.

  Full width and 56px tall because answering is tapping, never typing. The radio
  is drawn rather than native so its ring stays legible at arm's length in
  daylight, and the selected state changes border, fill and dot together —
  three signals, not one hue.
*/
.ap-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  font: inherit;
  font-size: 14.5px;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.ap-opt:hover {
  border-color: var(--ink-5);
}

.ap-opt::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-2);
  border-radius: 50%;
  background: var(--surface);
}

.ap-opt[aria-checked='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.ap-opt[aria-checked='true']::before {
  border: 5px solid var(--accent);
  background: var(--surface);
}

/* ------------------------------------------------------------- confidence -- */

/*
  How sure the worker is.

  Counter-intuitive and load-bearing: hedging is rewarded, because an answer
  marked "not sure" buys a second opinion instead of being trusted, and the
  worker is paid either way. If this ever reads as a confidence test, workers
  will always claim certainty and the quality system underneath quietly stops
  working — which is why the reassurance sits inside the control and not in a
  tooltip.
*/
.ap-sure {
  margin: 0 0 20px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.ap-sure legend,
.ap-sure > b {
  display: block;
  padding: 0;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ap-sure > p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.ap-sure-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ap-sure-scale button {
  min-height: 48px;
  padding: 8px 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.ap-sure-scale button:hover {
  border-color: var(--ink-5);
}

.ap-sure-scale button[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* --------------------------------------------------------------- progress -- */

.ap-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 26px;
}

.ap-progress-track {
  flex: 1;
  height: 6px;
  border-radius: 100px;
  background: var(--ground-2);
  overflow: hidden;
}

.ap-progress-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--accent);
}

.ap-progress :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ meter -- */

/* A confidence bar, never shown without the number it is drawing. */
.ap-meter {
  height: 8px;
  border-radius: 100px;
  background: var(--ground-2);
  overflow: hidden;
}

.ap-meter > i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--good);
}

.ap-meter-short > i {
  background: var(--warn);
}

/* ------------------------------------------------------------------- mark -- */

/*
  The success mark: a rounded badge inside a pale halo, ringed with small dots.

  The dots are drawn and they do not move. In the comps this reads as a burst,
  and a burst when somebody is paid two cents is a celebration where a receipt
  was wanted. Under `prefers-reduced-motion` there is nothing to disable,
  because there was never anything to reduce.
*/
.ap-ok {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 8px auto 26px;
  border-radius: 50%;
  background: var(--good-wash);
}

.ap-ok-badge {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: var(--good);
  color: #fff;
}

.ap-ok-badge svg {
  width: 30px;
  height: 30px;
  stroke-width: 2.4;
}

.ap-ok i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--good);
  opacity: 0.5;
}

.ap-ok-bad {
  background: var(--warn-wash);
}

.ap-ok-bad .ap-ok-badge {
  background: var(--warn);
}

.ap-ok-bad i {
  background: var(--warn);
}

/* -------------------------------------------------------------- the pulse -- */

/*
  Waiting for work.

  The default state, and the one a worker sits in for minutes at a time, so it
  must not look broken. Three still rings and a glyph; the animation is a slow
  breath that stops entirely under reduced motion, leaving a legible static
  mark rather than a blank space.
*/
.ap-wait {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  margin: 4px auto 8px;
}

.ap-wait i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent-wash-2);
}

.ap-wait i:nth-child(1) {
  inset: 0;
}

.ap-wait i:nth-child(2) {
  inset: 26px;
  background: var(--accent-wash);
  border-color: transparent;
}

.ap-wait i:nth-child(3) {
  inset: 52px;
  background: var(--surface);
  border-color: var(--border);
  animation: ap-breathe 3.4s ease-in-out infinite;
}

.ap-wait svg {
  position: relative;
  width: 34px;
  height: 34px;
  color: var(--accent);
}

@keyframes ap-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ap-wait i:nth-child(3) {
    animation: none;
  }
}

/* ------------------------------------------------------------------ input -- */

.ap-field {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-4);
}

.ap-field svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.ap-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.ap-field input::placeholder {
  color: var(--ink-4);
}

.ap-field:focus-within {
  border-color: var(--accent);
}

.ap-field-lg {
  min-height: 56px;
}

.ap-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  background: var(--surface);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
}

.ap-select .caret {
  margin-left: auto;
  color: var(--ink-4);
}

.ap-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.ap-bar .ap-field {
  flex: 1;
  min-width: 200px;
  min-height: 42px;
}

/*
  A switch.

  Its state is a word for a screen reader and position plus fill for everyone
  else. A pair of pills distinguished only by being blue or grey is unreadable
  to a good share of this audience.
*/
.ap-toggle {
  flex: none;
  position: relative;
  width: 40px;
  height: 23px;
  border: 0;
  border-radius: 100px;
  background: var(--border-2);
  cursor: pointer;
}

.ap-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-sm);
  transition: left 0.12s ease;
}

.ap-toggle[aria-checked='true'] {
  background: var(--accent);
}

.ap-toggle[aria-checked='true']::after {
  left: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .ap-toggle::after {
    transition: none;
  }
}

/* ------------------------------------------------------------------- tabs -- */

.ap-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 0;
  border-bottom: 1px solid var(--border);
}

.ap-tabs button,
.ap-tabs a {
  padding: 12px 14px 13px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-4);
  cursor: pointer;
}

.ap-tabs [aria-selected='true'],
.ap-tabs [aria-current] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ap-tabs-end {
  margin-left: auto;
  padding-bottom: 6px;
}

/* ------------------------------------------------------------------ table -- */

.ap-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ap-tbl th {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-4);
  text-align: left;
  white-space: nowrap;
}

.ap-tbl td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: middle;
}

.ap-tbl tr:last-child td {
  border-bottom: 0;
}

.ap-tbl tbody tr:hover {
  background: var(--surface-2);
}

.ap-tbl b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ap-tbl small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-4);
}

/* Money and counts line up, or a column of them is not worth printing. */
.ap-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ap-mono {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--ink-3);
}

.ap-cell {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ap-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--ink-4);
}

.ap-pager nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.ap-pager button {
  min-width: 30px;
  height: 30px;
  padding-inline: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-3);
  cursor: pointer;
}

.ap-pager button[aria-current] {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.ap-pager button:not([aria-current]):hover {
  border-color: var(--border-2);
  color: var(--ink);
}

/* ------------------------------------------------------------------ pills -- */

/*
  A status.

  Every one carries a shape and a word, never a colour alone. This is the column
  that tells a worker whether they have their money, and red/green colour
  blindness is common enough that a green dot and a red dot are the same dot.
*/
.ap-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--ground-2);
  color: var(--ink-3);
}

.ap-pill svg {
  width: 12px;
  height: 12px;
  flex: none;
}

.ap-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.ap-pill-icon::before {
  display: none;
}

.ap-pill-good {
  background: var(--good-wash);
  color: var(--good);
}

.ap-pill-warn {
  background: var(--warn-wash);
  color: var(--warn);
}

.ap-pill-bad {
  background: var(--bad-wash);
  color: var(--bad);
}

.ap-pill-accent {
  background: var(--accent-wash);
  color: var(--accent);
}

.ap-pill-lg {
  padding: 6px 13px;
  font-size: 12.5px;
}

/* ---------------------------------------------------------------- avatars -- */

.ap-av {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ap-av-lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.ap-av-sm {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

/* ------------------------------------------------------------------- feed -- */

.ap-feed {
  display: flex;
  flex-direction: column;
}

.ap-feed-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.ap-feed > .ap-feed-row:first-child {
  border-top: 0;
}

.ap-feed-at {
  flex: none;
  width: 58px;
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

.ap-feed-row > div {
  flex: 1;
  min-width: 0;
}

.ap-feed-row b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ap-feed-row :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 11.5px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------- timeline -- */

/*
  The audit trail.

  The screen the whole quality claim rests on, so it reads as a log: each step,
  in order, with the time it happened. The rule is drawn behind the dots rather
  than between them, so a step can be any height without the line breaking.
*/
.ap-time {
  position: relative;
  margin: 0;
  padding: 4px 0 0 26px;
  list-style: none;
}

.ap-time::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--border-2);
}

.ap-time li {
  position: relative;
  padding: 0 70px 20px 0;
}

.ap-time li:last-child {
  padding-bottom: 0;
}

.ap-time li::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2.5px solid var(--accent);
}

.ap-time li[data-state='done']::before {
  background: var(--accent);
}

.ap-time li[data-state='open']::before {
  border-color: var(--ink-5);
}

.ap-time li[data-state='bad']::before {
  border-color: var(--bad);
  background: var(--bad);
}

.ap-time b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.ap-time :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-4);
}

.ap-time time {
  position: absolute;
  right: 0;
  top: 1px;
  font-size: 11.5px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- misc -- */

.ap-legend {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}

.ap-legend i {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.ap-legend b {
  margin-left: auto;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ap-legend em {
  font-style: normal;
  color: var(--ink-4);
  font-size: 12px;
}

.ap-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ap-quick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}

.ap-quick:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ap-kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 18px 22px;
  border-top: 1px solid var(--border);
}

.ap-kv > div {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.ap-kv :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  display: block;
  font-size: 11.5px;
  color: var(--ink-4);
}

.ap-kv b {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  word-break: break-word;
}

.ap-kv svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 2px;
  color: var(--ink-4);
}

.ap-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.ap-hcard {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-sm);
}

.ap-hcard:hover {
  border-color: var(--accent);
}

.ap-hcard > div {
  flex: 1;
  min-width: 0;
}

.ap-hcard b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.ap-hcard p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.ap-hcard .caret {
  flex: none;
  align-self: center;
  transform: rotate(-90deg);
  color: var(--ink-4);
}

.ap-centre {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}

.ap-copy {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-4);
  cursor: pointer;
}

.ap-copy:hover {
  background: var(--ground-2);
  color: var(--ink);
}

.ap-copy svg {
  width: 15px;
  height: 15px;
}

.ap-divide {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

/*
  Empty.

  Says what is not there and what happens next, never "no data". Most of these
  screens are empty on a quiet network, which is a fact about the hour rather
  than a fault, and the copy has to make that difference obvious.
*/
.ap-empty {
  padding: 44px 24px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13.5px;
  line-height: 1.6;
}

.ap-evidence {
  display: block;
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--ground-2);
  object-fit: cover;
}

/* ----------------------------------------------------------------- charts -- */

/*
  The earnings line.

  Drawn from the real series or not drawn at all. A chart shaped like a
  plausible week, rendered on a screen that has no week behind it, is the
  easiest way there is to put a false number in front of somebody.
*/
.ap-chart {
  display: block;
  width: 100%;
  height: 170px;
  overflow: visible;
}

.ap-chart .line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ap-chart .area {
  fill: var(--accent-wash);
  stroke: none;
}

.ap-chart .dot {
  fill: var(--accent);
}

.ap-chart .grid {
  stroke: var(--border);
  stroke-width: 1;
}

.ap-chart .tick {
  fill: var(--ink-4);
  font-size: 10.5px;
  font-family: var(--sans);
}

/* ------------------------------------------------------------------ donut -- */

.ap-donut {
  display: grid;
  place-items: center;
  position: relative;
  width: 132px;
  height: 132px;
  margin-inline: auto;
}

.ap-donut svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.ap-donut div {
  text-align: center;
  line-height: 1.2;
}

.ap-donut b {
  display: block;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ap-donut :where(span:not(.ap-tile, .ap-av, .ap-pill)) {
  font-size: 11.5px;
  color: var(--ink-4);
}

/* ------------------------------------------------------------ the swoosh -- */

/* The handwritten aside from the comps. Decorative, so it is not announced. */
.ap-script {
  margin: 26px 0 0;
  font-family: 'Caveat', var(--sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  text-align: right;
}

/* The swoosh takes currentColor, so it follows the text rather than staying blue. */
.ap-script svg {
  display: block;
  width: 118px;
  margin: 2px 0 0 auto;
  color: var(--ink);
}

/* ------------------------------------------------------------ responsive -- */

/*
  The worker app's real device is a five-inch phone, so every layout here has to
  survive collapsing to one column — the rail included. It becomes a scrollable
  strip along the top rather than hiding behind a menu button a worker has to
  find, because the nav is how they reach their earnings.
*/
@media (max-width: 1180px) {
  .ap-cols,
  .ap-cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .ap {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-side {
    position: static;
    height: auto;
    padding: 14px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .ap-side .brand {
    margin-bottom: 14px;
  }

  .ap-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;
  }

  .ap-nav::-webkit-scrollbar {
    display: none;
  }

  .ap-nav a {
    white-space: nowrap;
  }

  .ap-nav a[aria-current]::before {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: -10px;
    width: auto;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }

  .ap-side-foot {
    display: none;
  }

  .ap-main {
    padding: 22px 18px 56px;
  }

  .ap-split {
    grid-auto-flow: row;
    gap: 20px;
    padding-inline: 4px;
  }

  .ap-split > * {
    border-left: 0;
    padding-inline: 20px;
  }

  .ap-h1 {
    font-size: 27px;
  }

  .ap-h1-lg {
    font-size: 31px;
  }

  .ap-tbl-wrap {
    overflow-x: auto;
  }
}

/* The layout must survive a doubled system font without clipping or overlap. */
@media (max-width: 460px) {
  .ap-main {
    padding-inline: 14px;
  }

  .ap-opt,
  .ap-primary {
    font-size: 15px;
  }

  .ap-top {
    flex-wrap: wrap;
  }

  .ap-sure-scale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ap-time li {
    padding-right: 0;
  }

  .ap-time time {
    position: static;
    display: block;
    margin-top: 3px;
  }
}

/*
  The worker app on a phone.

  It is used wherever somebody has a spare minute, so the phone is the main
  screen, not a narrow desktop. The rail becomes two things a thumb can reach:
  a slim header with the brand and the theme switch, and a tab bar along the
  bottom with the five places a worker actually goes. Help and Settings stay a
  tap away inside Home and Profile. The operator console is desktop only by
  design and keeps its own treatment above.
*/
@media (max-width: 900px) {
  .ap {
    align-content: start;
  }

  .ap-side-worker {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-direction: row;
    height: auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px;
    background: var(--surface);
  }

  .ap-side-worker .brand {
    margin: 0;
  }

  .ap-side-worker .ap-side-foot {
    display: block;
    margin: 0;
  }

  .ap-side-worker .ap-side-foot .ap-note,
  .ap-side-worker .ap-theme [data-theme-label],
  .ap-side-worker .ap-theme .caret {
    display: none;
  }

  .ap-side-worker .ap-theme {
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    justify-content: center;
  }

  .ap-side-worker .ap-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 2px;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    overflow: visible;
    border-top: 1px solid var(--border);
    background: var(--surface);
    view-transition-name: app-tabs;
  }

  .ap-side-worker .ap-nav a {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 54px;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .ap-side-worker .ap-nav a svg {
    width: 21px;
    height: 21px;
  }

  .ap-side-worker .ap-nav a[aria-current]::before {
    top: -7px;
    right: 28%;
    bottom: auto;
    left: 28%;
    width: auto;
    height: 3px;
    border-radius: 0 0 3px 3px;
  }

  .ap-side-worker .ap-nav a[href='app-help'],
  .ap-side-worker .ap-nav a[href='app-settings'] {
    display: none;
  }

  .ap-side-worker + .ap-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/*
  The rail, collapsed to icons.

  A button beside the brand folds the navigation down to its icons and back.
  Each link keeps its label as a tooltip, and the choice is remembered and set
  before first paint (see app-shell), so every page opens at the width it was
  left. Phones use the tab bar instead, so none of this applies there.
*/
.ap-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 26px;
}

.ap-side-head .brand {
  margin-bottom: 0;
}

.ap-rail-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink-4);
  cursor: pointer;
}

.ap-rail-toggle:hover {
  background: var(--ground);
  color: var(--ink);
}

.ap-rail-toggle svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 901px) {
  .ap {
    transition: grid-template-columns 0.18s ease;
  }

  [data-rail='collapsed'] .ap {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  [data-rail='collapsed'] .ap-side {
    padding-inline: 12px;
  }

  [data-rail='collapsed'] .ap-side-head {
    flex-direction: column;
    gap: 14px;
  }

  [data-rail='collapsed'] .ap-side-head .brand {
    padding-inline: 0;
    font-size: 0;
    gap: 0;
  }

  [data-rail='collapsed'] .ap-nav a,
  [data-rail='collapsed'] .ap-theme {
    justify-content: center;
    padding-inline: 0;
    gap: 0;
    font-size: 0;
  }

  [data-rail='collapsed'] .ap-theme .caret,
  [data-rail='collapsed'] .ap-side-foot .ap-note,
  [data-rail='collapsed'] .ap-side-label,
  [data-rail='collapsed'] .ap-who {
    display: none;
  }

  [data-rail='collapsed'] .ap-rail-toggle svg {
    transform: scaleX(-1);
  }
}

@media (max-width: 900px) {
  .ap-rail-toggle {
    display: none;
  }

  .ap-side-head {
    margin-bottom: 0;
  }
}

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

/* The console shows nothing, not even its layout, until the operator token checks out. */
.ap:has(.ap-side-label) {
  visibility: hidden;
}

[data-operator='ok'] .ap:has(.ap-side-label) {
  visibility: visible;
}

/* Send questions: small field labels and the skill toggles. */
.ap-label-sm {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.ap-label-sm .ap-field {
  margin-top: 6px;
}

.ap-chip-btn {
  padding: 7px 12px;
  border: 1px solid var(--border-2, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.ap-chip-btn[aria-pressed='true'] {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent);
}

.ap-details > summary {
  list-style: none;
}

.ap-details > summary::-webkit-details-marker {
  display: none;
}