/* HIG controls (task 34): buttons and the decide keys, chips, segmented controls and filter capsules,
   and the disclosure row (text fields, the switch and the checkbox are in desk-forms.css). The markup is fixed (AC-19), so a
   button's role comes from its selector: gray by default, filled for a page's primary action, plain
   for a quiet one. Every control is at least --hit (44px) tall; a press darkens it, nothing moves. */

/* Buttons */
.btn {
  --btn-fill: var(--fill);
  --btn-ink: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--hit);
  min-height: var(--hit);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--btn-fill);
  color: var(--btn-ink);
  font: var(--type-callout);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
/* Primary: one or two per view, the action the page exists for (on an error page, its only one). */
.ask-submit,
[data-testid="claude-accept-button"],
[data-testid="login-google-button"],
[data-testid$="-mark-decided"],
[data-testid$="-mark-done"],
[data-testid="error-recovery-link"],
[data-testid="conflict-reload-link"] {
  --btn-fill: var(--accent-fill);
  --btn-ink: var(--on-accent);
}
/* Plain: no fill, the tint colour (Sign out, Discard, Reopen, Expand all, Reset view, Clear all). */
.btn-quiet {
  --btn-fill: transparent;
  --btn-ink: var(--accent);
}
@media (hover: hover) {
  .btn:hover {
    color: var(--btn-ink);
    filter: brightness(0.96);
  }
  .btn-quiet:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    filter: none;
  }
}
.btn:active {
  filter: brightness(0.9);
}

/* A POST on its way: desk.js marks the form is-sending and the pressed button is-pressed (and clears
   both on a back/forward restore). The pressed button reads "Saving…"; the others in that form dim, and no
   button or decide key takes a second click (a Hold pressed after Approve would otherwise post again). */
.is-sending .btn,
.is-sending .key {
  pointer-events: none;
}
.is-sending .btn:not(.is-pressed) {
  opacity: 0.5;
}
.is-sending .btn.is-pressed {
  color: transparent;
}
.is-sending .btn.is-pressed::after {
  content: "Saving…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-ink);
  font: inherit;
}

/* The decide keys: Approve is filled, Hold is gray, Reject is the destructive red. */
.key {
  --key: var(--fill);
  --key-ink: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--hit);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: var(--radius-m);
  background: var(--key);
  color: var(--key-ink);
  font: var(--type-headline);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
}
.key-good {
  --key: var(--key-good-fill);
  --key-ink: var(--key-good-ink);
}
.key-bad {
  --key: var(--key-bad-fill);
  --key-ink: var(--key-bad-ink);
}
@media (hover: hover) {
  .key:hover {
    filter: brightness(1.06);
  }
}
.key:active,
.key.is-pressed {
  filter: brightness(0.9);
}
.key:focus-visible {
  outline-offset: 3px;
}
.key-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0; /* the glyph is a mask icon (desk-icons.css); the word beside it is the label */
}
.is-sending .key:not(.is-pressed) {
  opacity: 0.45;
}
.is-sending .key.is-pressed::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent);
  border-top-color: currentColor;
  animation: spin 700ms linear infinite; /* the one repeating animation: activity inside the pressed key */
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Chips: a state in colour and always in words. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.7em 0.2em 0.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--surface-3);
  color: var(--ink-2);
  font: var(--type-caption-1);
  font-weight: 650;
  white-space: nowrap;
}
.chip::before {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.chip.unknown::before,
.chip.other::before {
  content: "·";
  width: auto;
  height: auto;
  background: none;
}
.chip.proposed,
.chip.provisional {
  background: var(--warn-bg);
  color: var(--warn);
}
.chip.approved,
.chip.applied,
.chip.holds {
  background: var(--good-bg);
  color: var(--good);
}
.chip.held,
.chip.running {
  background: var(--info-bg);
  color: var(--ink);
}
.chip.rejected,
.chip.wrong {
  background: var(--bad-bg);
  color: var(--bad);
}
.chip.judged,
.chip.refused {
  background: var(--surface-3);
  color: var(--ink-2);
}
.chip.other,
.chip.unknown {
  background: var(--surface-3);
  color: var(--ink-3);
}

/* Filter capsules: independent toggles that wrap. Selected is the strongest fill on the page. */
.filter-chips,
.chg-opts,
.range-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.filter-chip,
.range-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--hit);
  min-height: var(--hit);
  padding: 0 var(--space-4);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background: var(--fill) padding-box;
  color: var(--ink-2);
  font: var(--type-subheadline);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) {
  .filter-chip:hover,
  .range-link:hover {
    color: var(--ink);
  }
}
.filter-chip:active,
.range-link:active {
  filter: brightness(0.92);
}
.filter-chips > .filter-chip > span,
.chg-opt-n {
  flex: none; /* a count never splits between its digits (.chg-opt's overflow-wrap: anywhere is for the label) */
  overflow-wrap: normal;
  white-space: nowrap;
  min-width: 1.5em;
  padding: 0 0.45em;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font: var(--type-caption-1);
  font-weight: 650;
  text-align: center;
}
.filter-chip[aria-pressed="true"],
.chg-opt:has(input:checked),
.range-link.is-active {
  background-color: var(--ink);
  color: var(--bg);
}
.filter-chips > .filter-chip[aria-pressed="true"] > span,
.chg-opt:has(input:checked) .chg-opt-n {
  background: color-mix(in srgb, var(--bg) 22%, transparent);
  color: var(--bg);
}

/* Segmented control: one rounded track, equal segments, the chosen one an opaque capsule. From 640px,
   for the metrics range, a proposals filter of six buttons or fewer, and the single-choice Where facet
   (the When presets share their row with the custom date range, so they stay capsules). */
@media (min-width: 640px) {
  .range-switch,
  .filter-chips:not(:has(> :nth-child(7))),
  .chg-opts:has(> .chg-opt input[type="radio"]):not(:has(.chg-custom)) {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-self: start; /* in a grid or flex parent it is blockified; it must still hug its segments */
    gap: 0;
    width: fit-content;
    max-width: 100%;
    border-radius: var(--radius-full);
    background: var(--fill);
  }
  /* The Where labels run from "All" to "Feeds the ad account": its segments take their content's width
     (UIKit's apportionsSegmentWidthsByContent), so the long ones don't wrap where equal thirds would. */
  .chg-opts:has(> .chg-opt input[type="radio"]):not(:has(.chg-custom)) {
    grid-auto-columns: auto;
  }
  .range-switch > .range-link,
  .filter-chips:not(:has(> :nth-child(7))) > .filter-chip,
  .chg-opts:has(> .chg-opt input[type="radio"]):not(:has(.chg-custom)) > .chg-opt {
    background-color: transparent;
    color: var(--ink-2);
  }
  .range-switch > .range-link.is-active,
  .filter-chips:not(:has(> :nth-child(7))) > .filter-chip[aria-pressed="true"],
  .chg-opts:has(> .chg-opt input[type="radio"]):not(:has(.chg-custom)) > .chg-opt:has(input:checked) {
    background-color: var(--surface);
    color: var(--accent);
  }
  .filter-chips:not(:has(> :nth-child(7))) > .filter-chip[aria-pressed="true"] > span,
  .chg-opts:has(> .chg-opt input[type="radio"]):not(:has(.chg-custom)) > .chg-opt:has(input:checked) .chg-opt-n {
    background: var(--accent-soft);
    color: var(--accent);
  }
}

/* Forced colours drop every fill, so a chosen capsule, segment or range would look like the others; the
   system selection colours mark it instead (its check icon follows in desk-icons.css). !important: the
   reader's forced colours must beat every chosen-state rule, the segmented control's more specific ones too. */
@media (forced-colors: active) {
  .filter-chip[aria-pressed="true"],
  .chg-opt:has(input:checked),
  .range-link.is-active {
    forced-color-adjust: none;
    border-color: Highlight !important;
    background-color: Highlight !important;
    color: HighlightText !important;
  }
  .filter-chip[aria-pressed="true"] > span,
  .chg-opt:has(input:checked) .chg-opt-n {
    background: transparent !important;
    color: inherit !important;
  }
}

/* Disclosure: every summary is a 44px row with no native marker; the chevrons are in desk-icons.css. */
summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  min-height: var(--hit);
  list-style: none;
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none;
}
details > summary {
  color: var(--accent);
  font-weight: 600;
}