:root {
  --ceres-control-min-block: 1.875rem;
  --ceres-control-inline-pad: 0.65rem;
  --ceres-control-icon-size: 1.2rem;
  --ceres-control-gap: 0.5rem;
  --ceres-control-font-size: 0.8rem;
  --ceres-control-min-inline: auto;
}

:is(.ceres-btn-group, .ceres-btn)[data-control-density="header"] {
  --ceres-control-min-block: 2.125rem;
  --ceres-control-inline-pad: 0.75rem;
  --ceres-control-icon-size: 1.2rem;
  --ceres-control-gap: 0.5rem;
  --ceres-control-font-size: 0.8rem;
}

:is(.ceres-btn-group, .ceres-btn)[data-control-density="compact"] {
  --ceres-control-min-block: 1.875rem;
  --ceres-control-inline-pad: 0.65rem;
  --ceres-control-icon-size: 1.2rem;
  --ceres-control-gap: 0.5rem;
  --ceres-control-font-size: 0.8rem;
}

:is(.ceres-btn-group, .ceres-btn)[data-control-density="dense"] {
  --ceres-control-min-block: 1.5rem;
  --ceres-control-inline-pad: 0.4rem;
  --ceres-control-icon-size: 1rem;
  --ceres-control-gap: 0.25rem;
  --ceres-control-font-size: 0.7rem;
}

:is(.ceres-btn-group, .ceres-btn, .ceres-wide-input)[data-control-density="comfortable"] {
  --ceres-control-min-block: 2.75rem;
  --ceres-control-inline-pad: 1rem;
  --ceres-control-icon-size: 1.2rem;
  --ceres-control-gap: 0.6rem;
  --ceres-control-font-size: 1rem;
}

:is(.ceres-btn-group, .ceres-btn)[data-control-density="touch"] {
  --ceres-control-min-block: max(44px, 2.75rem);
  --ceres-control-inline-pad: 0.85rem;
  --ceres-control-icon-size: 1.25rem;
  --ceres-control-gap: 0.5rem;
  --ceres-control-font-size: 0.9rem;
  --ceres-control-min-inline: max(44px, 2.75rem);
}

:is(.ceres-btn-group, .ceres-btn)[data-control-density="navigation"] {
  --ceres-control-min-block: max(56px, 3.5rem);
  --ceres-control-inline-pad: 0.5rem;
  --ceres-control-icon-size: 1.25rem;
  --ceres-control-gap: 0.5rem;
  --ceres-control-font-size: 0.75rem;
  --ceres-control-min-inline: max(56px, 3.5rem);
}

.ceres-btn-group {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--ceres-control-gap);
}

.ceres-btn-group[data-control-equal] > .ceres-btn {
  flex: 1 1 0;
}

.ceres-btn-group[data-control-density="navigation"] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ceres-btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-block-size: var(--ceres-control-min-block);
  min-inline-size: var(--ceres-control-min-inline);
  padding-block: 0;
  padding-inline: var(--ceres-control-inline-pad);
  border: 1px solid color-mix(in srgb, var(--heading) 70%, var(--bg3));
  border-radius: 8px;
  background: var(--bg3);
  color: var(--heading);
  box-shadow: inset 0 1px color-mix(in srgb, var(--hi) 6%, transparent);
  font-family: var(--font-body);
  font-size: var(--ceres-control-font-size);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}

.ceres-btn-group[data-control-density="compact"] .ceres-btn {
  white-space: nowrap;
}

.ceres-btn-group[data-control-wrap-labels] .ceres-btn {
  white-space: normal;
}

.ceres-btn[data-control-mode="icon"] {
  inline-size: var(--ceres-control-min-block);
  min-inline-size: var(--ceres-control-min-block);
  padding-inline: 0;
}

.ceres-btn-group[data-control-density="navigation"] .ceres-btn,
.ceres-btn[data-control-density="navigation"] {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  justify-items: center;
}

.ceres-btn__icon,
.ceres-btn__check {
  display: inline-grid;
  flex: 0 0 var(--ceres-control-icon-size);
  inline-size: var(--ceres-control-icon-size);
  block-size: var(--ceres-control-icon-size);
  place-items: center;
}

.ceres-btn__icon :is(svg, img) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}



.ceres-btn--secondary,
.ceres-btn--choice {
  border-color: color-mix(in srgb, var(--heading) 70%, var(--bg3));
  background: var(--bg3);
  color: var(--heading);
}

.ceres-btn--primary {
  border-color: var(--primary);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 60%, var(--shadow)),
    color-mix(in srgb, var(--primary) 50%, var(--shadow))
  );
  color: var(--hi);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow) 35%, transparent), inset 0 1px color-mix(in srgb, var(--hi) 18%, transparent);
}

.ceres-btn--primary:not(:disabled):not([aria-disabled="true"]):hover {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 68%, var(--shadow)),
    color-mix(in srgb, var(--primary) 60%, var(--shadow))
  );
  box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 35%, transparent), inset 0 1px color-mix(in srgb, var(--hi) 18%, transparent);
  transform: translateY(-1px);
}

.ceres-btn--primary:not(:disabled):not([aria-disabled="true"]):active {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--primary) 50%, var(--shadow)),
    color-mix(in srgb, var(--primary) 42%, var(--shadow))
  );
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow) 35%, transparent);
  transform: translateY(1px);
}

.ceres-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover,
.ceres-btn--choice:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg3));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow) 20%, transparent);
  transform: translateY(-1px);
}

.ceres-btn--secondary:not(:disabled):not([aria-disabled="true"]):active,
.ceres-btn--choice:not(:disabled):not([aria-disabled="true"]):active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
  box-shadow: none;
  transform: translateY(1px);
}

.ceres-btn--choice:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], .is-active, .is-on),
.ceres-btn--choice:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
  color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--accent);
}


.ceres-btn--choice:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], .is-active, .is-on):not(:disabled):not([aria-disabled="true"]):hover,
.ceres-btn--choice:has(input:checked):not([aria-disabled="true"]):hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
}

.ceres-btn[data-control-case~="signal"] {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--bg3));
  color: var(--heading);
}

.ceres-btn--choice[data-control-case~="signal"]:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], .is-active, .is-on),
.ceres-btn--choice[data-control-case~="signal"]:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--bg3));
  box-shadow: inset 0 0 0 1px var(--primary);
}

.ceres-btn[data-control-case~="signal"]:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--bg3));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow) 20%, transparent);
  transform: translateY(-1px);
}

.ceres-btn[data-control-case~="signal"]:not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: none;
  transform: translateY(1px);
}

:is(.ceres-btn[data-control-case~="destructive"], .ceres-btn[data-slot-action="remove"], .ceres-btn[data-slot-action^="clear-"]) {
  border-color: var(--danger);
}

.ceres-btn--primary[data-control-case~="commit"] {
  color: var(--hi);
}

:is(.ceres-btn[data-control-case~="destructive"], .ceres-btn[data-slot-action="remove"], .ceres-btn[data-slot-action^="clear-"]):not(.ceres-btn--primary):not(:disabled):not([aria-disabled="true"]):hover {
  background: color-mix(in srgb, var(--danger) 10%, var(--bg3));
}

:is(.ceres-btn[data-control-case~="destructive"], .ceres-btn[data-slot-action="remove"], .ceres-btn[data-slot-action^="clear-"]):not(.ceres-btn--primary):not(:disabled):not([aria-disabled="true"]):is(:hover, :focus-visible) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg3));
  color: var(--danger);
}

:is(.ceres-btn[data-control-case~="destructive"], .ceres-btn[data-slot-action="remove"], .ceres-btn[data-slot-action^="clear-"]):not(.ceres-btn--primary):not(:disabled):not([aria-disabled="true"]):active {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, var(--bg3));
  color: var(--danger);
}

.ceres-btn__danger {
  color: var(--danger);
}

[data-theme="alchemical"] .ceres-btn[data-control-case~="signal"] .ceres-btn__signal-arrow {
  color: var(--hi);
}

:root:not([data-theme]) .ceres-btn[data-control-case~="signal"] .ceres-btn__signal-arrow,
:is([data-theme="dark"], [data-theme="light"], [data-theme="wood"]) .ceres-btn[data-control-case~="signal"] .ceres-btn__signal-arrow {
  color: var(--gold);
}

.ceres-btn:is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
  border-color: var(--border-bright);
  background: var(--bg2);
  color: color-mix(in srgb, var(--heading) 70%, var(--bg2));
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: not-allowed;
}

.ceres-btn:focus-visible,
.ceres-btn:has(input:focus-visible) {
  outline: 2px solid var(--heading);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg3);
}

.ceres-btn[aria-busy="true"] .ceres-btn__icon > :not(.spinner) {
  visibility: hidden;
}

.ceres-btn[hidden],
.ceres-btn-group[hidden] {
  display: none;
}

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

  .ceres-btn:not(:disabled):not([aria-disabled="true"]):is(:hover, :active) {
    transform: none;
  }
}

@media (forced-colors: active) {
  .ceres-btn {
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  .ceres-btn--choice:is([aria-pressed="true"], [aria-selected="true"], [aria-expanded="true"], .is-active, .is-on),
  .ceres-btn--choice:has(input:checked) {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  .ceres-btn:is(:disabled, [aria-disabled="true"]) {
  opacity: 1;
    border-color: GrayText;
    color: GrayText;
  }

  .ceres-btn:focus-visible,
  .ceres-btn:has(input:focus-visible) {
    outline-color: Highlight;
  }
}


/* Context adapters keep component geometry out of the shared paint recipes. */
.board-header .ceres-btn { margin: 0; align-self: center; }
.board-header .checkout-btn.is-icon-only { inline-size: var(--ceres-control-min-block); padding-inline: 0; }
.board-header .ceres-btn > .hdr-ic,
.harvest-bar .ceres-btn > :is(svg, img) { inline-size: var(--ceres-control-icon-size); block-size: var(--ceres-control-icon-size); object-fit: contain; }
html.ceres-lw-le-1919.ceres-lw-le-1279 :is(.board-header, .harvest-bar) .ceres-btn {
  --ceres-control-min-block: max(44px, 2.75rem);
  --ceres-control-min-inline: max(44px, 2.75rem);
  --ceres-control-icon-size: 1.25rem;
}

.ceres-btn.csel-trigger { justify-content: center; text-align: center; padding-inline: var(--ceres-control-inline-pad); min-inline-size: max-content; inline-size: max-content; border-inline-start-width: 0.3rem; gap: 0.5rem; }
/* Region plaques are a separate button family: territory paint belongs to the control itself. */
:is(.ch-plot-badge, button.ceres-region-plaque) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-block-size: 1.875rem;
  max-inline-size: 100%;
  padding: 0.2em 0.5em;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
button.ceres-region-plaque:not(:disabled):hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px var(--border-bright);
}
button.ceres-region-plaque:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button.ceres-region-plaque:not(:disabled):active { filter: brightness(0.92); }
button.ceres-region-plaque:disabled { opacity: 0.5; cursor: not-allowed; }
html.ceres-lw-le-1279 :is(.ch-plot-badge, button.ceres-region-plaque) { min-block-size: 2rem; padding-block: .1em; }
@media (prefers-reduced-motion: reduce) {
  button.ceres-region-plaque { transition: none; }
}
.ceres-btn--choice > .ceres-btn__check { flex-basis: 1em; inline-size: 1em; block-size: 1em; }
.ceres-btn--choice > input[type="checkbox"] { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.ceres-btn--choice > span:not(.ceres-btn__check):not(.fill-action-icon) { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
html.ceres-lw-le-1919.ceres-lw-le-1279 :is(.mobile-plot-sheet, .harvest-overlay, .controls-row, .mobile-action-bar) .ceres-btn {
  --ceres-control-min-block: max(44px, 2.75rem);
  --ceres-control-min-inline: max(44px, 2.75rem);
}

html.ceres-lw-le-1919.ceres-lw-le-1279 .mobile-action-bar .ceres-btn { --ceres-control-min-block: max(56px, 3.5rem); --ceres-control-min-inline: 0; }

/* Crafted header artwork is shared by navigation and commit actions. */
.ceres-btn .hdr-ic { display: block; overflow: visible; }
.ceres-btn .hdr-ic .f, .harvest-bar-build-ic .hdr-ic .f { fill: color-mix(in srgb, var(--hi) 84%, var(--primary)); }
.ceres-btn .hdr-ic .l, .harvest-bar-build-ic .hdr-ic .l { fill: none; stroke: color-mix(in srgb, var(--hi) 84%, var(--primary)); stroke-width: 2.4; stroke-linecap: round; }
.ceres-btn .hdr-ic .d, .harvest-bar-build-ic .hdr-ic .d { fill: none; stroke: color-mix(in srgb, var(--primary) 62%, var(--shadow)); stroke-width: 1.6; stroke-linecap: round; }
.ceres-btn .hdr-ic .a, .harvest-bar-build-ic .hdr-ic .a { fill: var(--gold); stroke: color-mix(in srgb, var(--primary) 45%, var(--shadow)); stroke-width: 1; stroke-linejoin: round; paint-order: stroke; }
.ceres-btn .hdr-ic .a.h, .harvest-bar-build-ic .hdr-ic .a.h { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; }
html.ceres-lw-le-1919.ceres-lw-le-1279 :is(.controls-row, .mobile-plot-sheet, .harvest-overlay) .ceres-btn {
  --ceres-control-font-size: 0.9rem;
}

/* Destructive buttons carry no leading dot (owner, 2026-10-02); the red border and the red tint on hover are the recipe. */
.ceres-btn[data-control-density="navigation"] { position: relative; }
.ceres-btn[data-control-density="navigation"] > .ceres-btn__check {
  position: absolute; inset-block-start: 0.15rem; inset-inline-end: 0.15rem;
}

html.ceres-lw-le-1919.ceres-lw-le-1279 .hm-segs { inline-size: 100%; }
html.ceres-lw-le-1919.ceres-lw-le-1279 .hm-segs .ceres-btn { min-inline-size: 0; --ceres-control-inline-pad: 0.35rem; }

html.ceres-lw-le-1919.ceres-lw-le-1279 .mobile-action-bar { gap: .5rem; }
html.ceres-lw-le-1919.ceres-lw-le-1279 .mobile-action-bar .ceres-btn { --ceres-control-inline-pad: .15rem; }

:is(.controls-row .board-clear-filters, .picker-filters .picker-clear-filters) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 20%, var(--bg3));
  color: var(--heading);
}
:is(.controls-row .board-clear-filters, .picker-filters .picker-clear-filters):not(:disabled):hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 30%, var(--bg3));
}
:is(.controls-row .board-clear-filters, .picker-filters .picker-clear-filters):not(:disabled):active {
  background: color-mix(in srgb, var(--danger) 40%, var(--bg3));
}

:is(.controls-row, .picker-filters, .picker-sort-chips) .ceres-btn:not(.badge-filled):is([data-filter-active="true"], .is-active, :has(input:checked)) {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 20%, var(--bg3));
  color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--ok);
}
:is(.controls-row, .picker-filters, .picker-sort-chips) .ceres-btn:not(.badge-filled):is([data-filter-active="true"], .is-active, :has(input:checked)):not(:disabled):is(:hover, :active) {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 28%, var(--bg3));
  box-shadow: inset 0 0 0 1px var(--ok);
}
:is(.controls-row, .picker-filters) .csel-option.is-selected:not([data-value=""]):not([class*="badge-option-group-"]) {
  background: color-mix(in srgb, var(--ok) 20%, var(--bg3));
  color: var(--heading);
}
html.ceres-lw-le-1919.ceres-lw-le-1279 .picker-filters .csel-trigger.ceres-btn {
  justify-content: center;
  text-align: center;
  padding-inline: var(--ceres-control-inline-pad);
}
html.ceres-lw-le-1279 :is(.controls-row, .picker-filters, .picker-sort-chips) .ceres-btn--choice {
  position: relative;
  justify-content: center;
  padding-inline: var(--ceres-control-inline-pad);
}
html.ceres-lw-le-1279 :is(.controls-row, .picker-filters, .picker-sort-chips) .ceres-btn--choice > .ceres-btn__check {
  position: absolute;
  inset-inline-start: 0.35rem;
}

.picker-bar .terrain-affinity-badge.is-selected { box-shadow: 0 0 0 2px var(--gold-dim), 0 0 0 4px color-mix(in srgb, var(--gold-dim) 25%, transparent); }

/* The editor's affinity row renders interactive terrain badges as native buttons; keep their UA chrome in the shared button tier. */
.editor-band .editor-splinter-affinity .terrain-affinity-badge { padding: 0; border: 0; font: inherit; appearance: none; }

.ceres-btn .ceres-btn__check { display: none; }

.ceres-btn.slot-remove {
  display: grid;
  place-items: center;
  --ceres-control-min-block: 1.75rem;
  --ceres-control-min-inline: 1.75rem;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--bg3));
  color: var(--danger);
  box-shadow: none;
  line-height: 1;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.slot-tile:is(:hover, :focus-within) .ceres-btn.slot-remove { opacity: 1; pointer-events: auto; }
.ceres-btn.slot-remove > svg { display: block; inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.ceres-btn.slot-remove[data-slot-action="remove"]:not(.ceres-btn--primary):not(:disabled):not([aria-disabled="true"]):is(:hover, :active) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 18%, var(--bg3));
  color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ceres-btn.slot-remove { transition: none; }
}

.ceres-btn.csel-trigger::after { content: none; }
.csel-value { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap; font-size: var(--ceres-control-font-size); font-weight: 600; letter-spacing: normal; text-transform: none; }
.csel-value > :not(.csel-value-text) { flex: none; margin: 0; }
.csel-list { border-inline-start-width: 0.3rem; }

.controls-row .csel-trigger.ceres-btn {
  --csel-leading-border: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--ceres-control-gap);
  border-inline-start-width: var(--csel-leading-border);
  padding-inline-start: var(--ceres-control-inline-pad);
  padding-inline-end: calc(var(--ceres-control-inline-pad) + var(--csel-leading-border) - 1px);
}
.controls-row .csel-trigger > .csel-value { display: inline-flex; }
.controls-row .csel-trigger .csel-value-text { line-height: 1.25; text-align: center; }
.controls-row .csel-trigger .csel-value > :not(.csel-value-text) { flex: none; }
.controls-row .csel-trigger .csel-arrow { flex: none; }
.controls-row .csel-value > img { display: block; inline-size: var(--ceres-control-icon-size); block-size: var(--ceres-control-icon-size); object-fit: contain; margin: 0; }

html.ceres-lw-le-1919.ceres-lw-le-1279 .mobile-action-bar .ceres-btn {
  grid-auto-rows: max-content;
  align-content: center;
  row-gap: .2rem;
}
.mobile-action-symbol { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }

/* S-12090: one geometry for disclosure controls, including native details. */
:root {
  --ceres-chevron-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ceres-chevron, details > summary::before {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  flex: 0 0 1em;
  align-self: center;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--ceres-chevron-art) center / contain no-repeat;
  mask: var(--ceres-chevron-art) center / contain no-repeat;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .18s ease, color .18s ease;
  pointer-events: none;
}
.csel-arrow.ceres-chevron { color: inherit; }
[aria-expanded="true"] > .ceres-chevron,
details[open] > summary > .ceres-chevron,
details[open] > summary::before { transform: rotate(180deg); }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { content: ""; }
details > summary::before { content: ""; margin-inline-end: .45em; }
details > summary:has(> .ceres-chevron)::before { content: none; }
details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: .25rem; border-radius: .25rem; }
@media (prefers-reduced-motion: reduce) {
  .ceres-chevron, details > summary::before { transition: none; }
}

/* IR-8604: full-width actions below the intact card face, or in list actions. */
.candidate-grid-tools > button.candidate-upgrade.ceres-btn,
.candidate-actions > button.candidate-upgrade.ceres-btn { width: 100%; min-inline-size: 0; box-sizing: border-box; }
.candidate-grid-tools > button.candidate-upgrade.ceres-btn { flex: 0 0 100%; }

/* IR-9253 (owner: "make all menu buttons glass"), IR-9260 D-2 (owner: "Tint + light edge, no blur"): the glass variant. Every
   header button is glass (the context below) and `.ceres-btn--glass` names the same recipe for anything else. A translucent
   --bg2 tint with a faint light sheen over the page artwork, a light inset top edge and a heading-tinted edge; no
   backdrop-filter (M-4, Q-11). The header is sticky chrome, so only `transform` moves (M-4). The Changes ready alert and the
   signed-in account border keep their own state paint. */
:is(.ceres-btn--glass, header.board-header .ceres-btn):not(.is-ready-alert) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--hi) 9%, transparent), color-mix(in srgb, var(--hi) 2%, transparent)), color-mix(in srgb, var(--bg2) 80%, transparent);
  color: var(--heading);
  box-shadow: inset 0 1px color-mix(in srgb, var(--hi) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--shadow) 25%, transparent);
  transition: transform 100ms ease;
}
:is(.ceres-btn--glass, header.board-header .ceres-btn):not(.is-ready-alert):not(.is-signed-in) {
  border-color: color-mix(in srgb, var(--heading) 38%, transparent);
}
:is(.ceres-btn--glass, header.board-header .ceres-btn):not(.is-ready-alert):not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--accent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)), color-mix(in srgb, var(--bg2) 80%, transparent);
  transform: translateY(-1px);
}
:is(.ceres-btn--glass, header.board-header .ceres-btn):not(.is-ready-alert):not(:disabled):not([aria-disabled="true"]):active {
  border-color: var(--accent);
  background: linear-gradient(color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)), color-mix(in srgb, var(--bg2) 84%, transparent);
  box-shadow: inset 0 1px color-mix(in srgb, var(--hi) 10%, transparent);
  transform: translateY(1px);
}
/* Pressed (My cards / Market) and the switcher's current page: the theme accent (IR-9260 D-3, not gold). */
:is(.ceres-btn--glass, header.board-header .ceres-btn):is([aria-pressed="true"], [aria-current="page"]):not(.is-ready-alert),
:is(.ceres-btn--glass, header.board-header .ceres-btn):is([aria-pressed="true"], [aria-current="page"]):not(.is-ready-alert):not(:disabled):not([aria-disabled="true"]):is(:hover, :active) {
  border-color: var(--accent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)), color-mix(in srgb, var(--bg2) 84%, transparent);
  color: var(--heading);
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 1px color-mix(in srgb, var(--hi) 16%, transparent);
  transform: none;
}
:is(.ceres-btn--glass, header.board-header .ceres-btn):is(:disabled, [aria-disabled="true"]) {
  border-color: var(--border-bright);
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  color: color-mix(in srgb, var(--heading) 70%, var(--bg2));
  box-shadow: none;
  transform: none;
}
/* The crafted two-tone icons on glass: the body in the text colour, the details in the glass tint, the gold accent. */
:is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .f { fill: currentColor; }
:is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .l { stroke: currentColor; }
:is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .d { stroke: color-mix(in srgb, var(--bg2) 72%, var(--primary)); }
:is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .a { fill: var(--gold); stroke: color-mix(in srgb, var(--bg2) 60%, var(--shadow)); }
:is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .a.h { fill: none; stroke: var(--gold); }
:root:not([data-theme]) :is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .a,
[data-theme="alchemical"] :is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .a { fill: var(--hi); }
:root:not([data-theme]) :is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .a.h,
[data-theme="alchemical"] :is(.ceres-btn--glass, header.board-header .ceres-btn) .hdr-ic .a.h { fill: none; stroke: var(--hi); }
:is(.ceres-btn--glass, header.board-header .ceres-btn):not(.is-ready-alert) .checkout-count { color: var(--heading); }

/* IR-9253 / IR-9260: the Plots | Cards switcher -- two joined glass halves, the page's own half pressed in the accent; the
   last header control on both pages (index.html, cards.html). */
.ceres-btn-group.ceres-page-switch { flex: none; flex-wrap: nowrap; align-items: center; gap: 0; }
.ceres-page-switch > .ceres-btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.ceres-page-switch > .ceres-btn:last-child { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; }
.ceres-page-switch > .ceres-btn[aria-current="page"] { position: relative; z-index: 1; cursor: default; }
/* IR-9253 ("replace with them the current text"): the header Changes button is its icon and count; the word lives in the
   tooltip and the accessible name (checkout.js), as the Cart (IR-9236). */
header.board-header #checkout-btn #checkout-label { display: none; }
/* The Changes ready alert keeps its green state paint in the header; its icon and text take the heading colour like the glass
   buttons beside it, so the icon reads on the light themes' green tint too. */
header.board-header .ceres-btn.is-ready-alert { color: var(--heading); }
/* IR-9325 (C-8): the whole Changes button carries its state, not only the count -- green while a change can be signed now,
   orange while every change still waits. Beats the header glass paint above; the ready pulse (.is-ready-alert) stays. */
:is(.ceres-btn--glass, header.board-header .ceres-btn, .ceres-btn).is-changes-ready { --changes-tone: var(--ready-alert, var(--ok)); }
:is(.ceres-btn--glass, header.board-header .ceres-btn, .ceres-btn).is-changes-waiting { --changes-tone: var(--warn); }
:is(.ceres-btn--glass, header.board-header .ceres-btn, .ceres-btn):is(.is-changes-ready, .is-changes-waiting) {
  border-color: var(--changes-tone);
  background: linear-gradient(160deg, color-mix(in srgb, var(--changes-tone) 34%, transparent), color-mix(in srgb, var(--changes-tone) 22%, transparent)), color-mix(in srgb, var(--bg2) 84%, transparent);
  box-shadow: inset 0 0 0 1px var(--changes-tone);
  color: var(--heading);
}
:is(.ceres-btn--glass, header.board-header .ceres-btn, .ceres-btn):is(.is-changes-ready, .is-changes-waiting) :is(.checkout-count, #mobile-changes-count) { background: var(--changes-tone); color: var(--bg); }
/* IR-8368 (owner: "fix the changes button with the number background"): a filled count is a round pill like the phone
   count (ceres.css #mobile-changes-count), not a fill hugging the digits. */
.ceres-btn:is(.is-changes-ready, .is-changes-waiting, .is-ready-alert) .checkout-count:not([hidden]) {
  display: inline-grid; place-items: center; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: 0.3rem;
  border-radius: 999px; line-height: 1;
}