/*
  Components. Each block styles the element built by the module of the same name in /js/components/.

  Tone: data-tone="accent|ok|warn|danger|info" or a domain code "id|ep|nw|cd|so|sv" (chips use
  data-domain) sets --tone on that element. Components reset --tone to a neutral default so it never
  leaks in from a toned ancestor; the mapping sits at the end of this file so it wins over the defaults.
  Colour carries status in a dot, stripe or icon; text stays --fg-0 or --fg-1, so it passes AA anywhere.
*/

/* Button */
.btn {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--fg-0);
  --btn-line: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-2);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    translate var(--t-fast) var(--ease);
}

.btn .icon {
  width: 18px;
  height: 18px;
  margin-left: calc(-1 * var(--s-1));
}

.btn:hover:not(:disabled) {
  --btn-bg: var(--bg-3);
}

.btn:active:not(:disabled) {
  translate: 0 1px;
}

.btn-primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-fg);
  --btn-line: transparent;
}

.btn-primary:hover:not(:disabled) {
  --btn-bg: color-mix(in srgb, var(--accent) 86%, var(--fg-0));
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg-1);
  --btn-line: transparent;
}

.btn-ghost:hover:not(:disabled) {
  --btn-bg: color-mix(in srgb, var(--fg-0) 8%, transparent);
  --btn-fg: var(--fg-0);
}

.btn-danger {
  --btn-bg: var(--danger);
  --btn-fg: var(--bg-1);
  --btn-line: transparent;
}

.btn-danger:hover:not(:disabled) {
  --btn-bg: color-mix(in srgb, var(--danger) 86%, var(--fg-0));
}

/* Disabled stays legible: --fg-2 on --bg-2 passes 4.5:1 in both themes. */
.btn:disabled {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--fg-2);
  --btn-line: var(--line);
}

/* Icon-only control used inside toasts and modals; it always carries an aria-label. */
.icon-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-2);
  background-color: transparent;
  color: var(--fg-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.icon-btn:hover {
  background-color: color-mix(in srgb, var(--fg-0) 8%, transparent);
  color: var(--fg-0);
}

.icon-btn .icon {
  width: 18px;
  height: 18px;
}

/* Card: a tone draws a 3px left edge with an inset shadow, so toned and plain cards align exactly. */
.card {
  --tone: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background-color: var(--bg-1);
  box-shadow: inset 3px 0 0 var(--tone), var(--shadow-1);
}

.card-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.card-eyebrow {
  color: var(--fg-2);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-title {
  font-size: var(--fs-2);
  letter-spacing: 0;
}

.card-body {
  min-width: 0;
  color: var(--fg-1);
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: auto;
}

/* Badge: short status words. */
.badge {
  --tone: var(--fg-2);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--tone) 12%, transparent);
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.badge::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--tone);
}

/* Chip: a domain tag. */
.chip {
  --tone: var(--fg-2);
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s-2);
  height: 24px;
  padding: 0 var(--s-2);
  border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line));
  border-radius: var(--r-1);
  background-color: color-mix(in srgb, var(--tone) 10%, transparent);
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.chip::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background-color: var(--tone);
}

/* Progress ring: --ring-size and --ring-pct are set by progressRing(). */
.ring {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  vertical-align: top;
}

.ring-dial {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ring-size, 64px);
  height: var(--ring-size, 64px);
}

.ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  rotate: -90deg;
}

.ring-track,
.ring-value {
  fill: none;
  stroke-width: 3;
}

.ring-track {
  stroke: var(--bg-3);
}

.ring-value {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: var(--ring-pct, 0) 100;
  transition: stroke-dasharray var(--t-med) var(--ease);
}

@starting-style {
  .ring-value {
    stroke-dasharray: 0 100;
  }
}

.ring-text {
  position: relative;
  color: var(--fg-0);
  font-size: max(13px, calc(var(--ring-size, 64px) * 0.22));
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.ring-label {
  max-width: 16ch;
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-weight: 500;
  text-align: center;
}

/* Tabs */
.tabs {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
}

.tab-list {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--line);
}

.tab {
  position: relative;
  padding: var(--s-2) var(--s-3) var(--s-3);
  border: 0;
  border-radius: var(--r-1) var(--r-1) 0 0;
  background-color: transparent;
  color: var(--fg-2);
  font-size: var(--fs-1);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.tab:hover,
.tab[aria-selected="true"] {
  color: var(--fg-0);
}

.tab::after {
  content: "";
  position: absolute;
  right: var(--s-3);
  bottom: -1px;
  left: var(--s-3);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background-color: var(--accent);
  scale: 0 1;
  transition: scale var(--t-med) var(--ease);
}

.tab[aria-selected="true"]::after {
  scale: 1 1;
}

.tab:focus-visible {
  outline-offset: -2px;
}

/* Data table; markdown tables inside .prose share the look. */
.table-wrap {
  min-width: 0;
  overflow-x: auto;
}

.table,
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-ui);
}

:is(.table, .prose table) th {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  color: var(--fg-2);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: bottom;
}

:is(.table, .prose table) td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--fg-1);
  vertical-align: middle;
}

:is(.table, .prose table) tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}

.table tbody tr:not(:has(.table-empty)):hover {
  background-color: color-mix(in srgb, var(--fg-0) 4%, transparent);
}

/* Identifiers such as CR-001 never break at their hyphen. */
.table code {
  white-space: nowrap;
}

.table .table-empty {
  padding: var(--s-6) var(--s-3);
  color: var(--fg-2);
  text-align: center;
}

/* An emptyState brings its own padding. */
.table .table-empty:has(> .empty) {
  padding: 0;
}

/* Empty state */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5);
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background-color: var(--bg-2);
  color: var(--fg-2);
}

.empty-icon .icon {
  width: 24px;
  height: 24px;
}

.empty-title {
  color: var(--fg-0);
  font-size: var(--fs-2);
  font-weight: 600;
}

.empty-hint {
  max-width: 48ch;
  color: var(--fg-2);
}

/* Stamp: the static CLOSED mark. Task 16 animates it onto the work-order header. */
.stamp {
  display: inline-block;
  flex: none;
  padding: var(--s-1) calc(var(--s-3) - 0.16em) var(--s-1) var(--s-3);
  border: 2px solid currentColor;
  border-radius: var(--r-1);
  outline: 1px solid currentColor;
  outline-offset: 2px;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
  text-transform: uppercase;
  rotate: -6deg;
  user-select: none;
}

/* Toasts: #toasts sits at the stage's bottom-right corner, clear of the operations column. */
#toasts {
  position: fixed;
  right: calc(var(--ops-w) + var(--s-5));
  bottom: var(--s-5);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  pointer-events: none;
}

.toast {
  --tone: var(--info);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3);
  width: 360px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-1);
  box-shadow: inset 3px 0 0 var(--tone), var(--shadow-2);
  color: var(--fg-0);
  pointer-events: auto;
  transition: opacity var(--t-med) var(--ease), translate var(--t-med) var(--ease);
}

@starting-style {
  .toast {
    opacity: 0;
    translate: 0 8px;
  }
}

.toast.is-leaving {
  opacity: 0;
  translate: 16px 0;
}

.toast-icon {
  margin-top: 6px;
  color: var(--tone);
}

.toast-msg {
  padding-top: 5px;
}

/* Modal on <dialog>. The dialog has no padding, so a click on the element itself is a backdrop click. */
.modal {
  width: min(560px, calc(100vw - 2 * var(--s-6)));
  max-height: calc(100dvh - 2 * var(--s-6));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-2);
  color: var(--fg-0);
  opacity: 0;
  translate: 0 8px;
  scale: 0.98;
  transition:
    opacity var(--t-med) var(--ease),
    translate var(--t-med) var(--ease),
    scale var(--t-med) var(--ease),
    overlay var(--t-med) allow-discrete,
    display var(--t-med) allow-discrete;
}

.modal[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

@starting-style {
  .modal[open] {
    opacity: 0;
    translate: 0 8px;
    scale: 0.98;
  }
}

.modal::backdrop {
  background-color: var(--overlay, rgb(3 7 15 / 0.68));
  opacity: 0;
  transition:
    opacity var(--t-med) var(--ease),
    overlay var(--t-med) allow-discrete,
    display var(--t-med) allow-discrete;
}

.modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .modal[open]::backdrop {
    opacity: 0;
  }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4) 0 var(--s-5);
}

.modal-title {
  padding-top: 3px;
  font-size: var(--fs-3);
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-4) var(--s-5) var(--s-5);
  overflow-y: auto;
  color: var(--fg-1);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  background-color: var(--bg-0);
}

/*
  Simulator console, built by renderConsole() in /js/sim/render.js: a vendor console in a window.
  Chrome on --bg-2, navigation on --bg-0, the screen on --bg-1; 13px text and 32px controls. The
  window has a fixed height (set --sim-height to change it); its navigation and its screen scroll on
  their own, so the screen's title, actions and alerts stay in view. Narrower than 560px, the
  navigation sits above the screen and labels above their controls.
*/
.sim-window {
  --sim-nav-w: clamp(176px, 24%, 248px);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: var(--sim-height, clamp(420px, 78vh, 880px));
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-1);
  color: var(--fg-1);
  font-size: var(--fs-0);
  line-height: var(--lh-ui);
}

.sim-chrome {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  background-color: var(--bg-2);
}

.sim-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-1);
  background-color: var(--bg-3);
  color: var(--fg-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.sim-app {
  display: flex;
  flex: 1 1 16ch;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-2);
  min-width: 0;
}

.sim-product {
  color: var(--fg-0);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.sim-version {
  min-width: 0;
  color: var(--fg-2);
  line-height: var(--lh-tight);
}

/* --accent text fails on --bg-2 in the light theme, so the link stays --fg-0 and keeps its underline. */
.sim-doc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--fg-0);
  font-weight: 600;
  white-space: nowrap;
}

.sim-doc-link .icon {
  width: 16px;
  height: 16px;
}

.sim-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: var(--sim-nav-w) minmax(0, 1fr);
  min-height: 0;
}

.sim-body-solo {
  grid-template-columns: minmax(0, 1fr);
}

.sim-nav,
.sim-main {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--fg-2) 50%, transparent) transparent;
}

.sim-nav {
  padding: var(--s-2) 0;
  border-right: 1px solid var(--line);
  background-color: var(--bg-0);
}

/* --sim-head-h is the sticky head's height, kept current by the renderer. */
.sim-main {
  scroll-padding-top: calc(var(--sim-head-h, 96px) + var(--s-2));
}

.sim-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sim-nav-row {
  position: relative;
  display: flex;
}

.sim-nav-row:has(> [aria-current="page"]) {
  background-color: color-mix(in srgb, var(--accent) 14%, transparent);
}

.sim-nav-row:has(> [aria-current="page"])::before {
  content: "";
  position: absolute;
  top: var(--s-1);
  bottom: var(--s-1);
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background-color: var(--accent);
}

/* --depth (0, 1, 2) is set by the renderer and indents each level by 16px. */
.sim-nav-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  padding: var(--s-1) var(--s-2) var(--s-1) calc(var(--s-3) + var(--depth, 0) * var(--s-4));
  border: 0;
  background-color: transparent;
  color: var(--fg-1);
  font-weight: 500;
  line-height: var(--lh-tight);
  text-align: left;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.sim-nav-link[data-trail],
.sim-nav-link[aria-current="page"] {
  color: var(--fg-0);
}

.sim-nav-link[aria-current="page"] {
  font-weight: 600;
}

.sim-nav-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--fg-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.sim-nav-toggle .icon {
  width: 16px;
  height: 16px;
  transition: rotate var(--t-fast) var(--ease);
}

.sim-nav-toggle[aria-expanded="true"] .icon {
  rotate: 90deg;
}

.sim-nav-link:hover,
.sim-nav-toggle:hover {
  background-color: color-mix(in srgb, var(--fg-0) 8%, transparent);
  color: var(--fg-0);
}

/* An outline drawn outside would be clipped by the scrolling navigation. */
.sim-nav :focus-visible {
  outline-offset: -2px;
}

.sim-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  background-color: var(--bg-1);
}

.sim-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--fg-2);
}

.sim-crumbs li + li::before {
  content: "\203A" / "";
  margin-right: var(--s-1);
}

.sim-crumbs [aria-current="page"] {
  color: var(--fg-1);
}

.sim-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

.sim-title {
  font-size: var(--fs-2);
}

.sim-commands {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* Dense buttons. Real consoles have long action labels, so these wrap rather than overflow. */
.sim-window .btn {
  min-height: 32px;
  max-width: 100%;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-1);
  font-size: var(--fs-0);
  text-align: left;
  white-space: normal;
}

.sim-alerts:empty {
  display: none;
}

.sim-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-1) var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: var(--bg-1);
  box-shadow: inset 3px 0 0 var(--danger);
  color: var(--fg-0);
}

.sim-alert-icon {
  color: var(--danger);
}

.sim-alert-title {
  font-weight: 600;
}

.sim-alert-detail {
  color: var(--fg-1);
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.sim-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-2) var(--s-5) var(--s-5);
}

.sim-form {
  display: flex;
  flex-direction: column;
  max-width: 960px;
}

/* Rows align to the top: a label lines up with its control, not the middle of the help text. */
.sim-row {
  display: grid;
  grid-template-columns: clamp(120px, 34%, 280px) minmax(0, 1fr);
  align-items: start;
  gap: var(--s-1) var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}

.sim-label {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--fg-1);
  font-weight: 500;
  line-height: var(--lh-tight);
}

.sim-row[data-inactive] .sim-label {
  color: var(--fg-2);
}

.sim-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-1);
  min-width: 0;
}

/* Two classes, to outrank the input defaults in base.css. */
.sim-window :is(.sim-input, .sim-select) {
  width: 100%;
  max-width: 360px;
  min-height: 32px;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-1);
  font-size: var(--fs-0);
}

.sim-window .sim-input[inputmode="decimal"] {
  max-width: 160px;
}

.sim-value {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--fg-0);
  overflow-wrap: anywhere;
}

.sim-value-list {
  padding-block: var(--s-1);
}

.sim-help {
  max-width: 72ch;
  color: var(--fg-2);
}

.sim-hint,
.sim-error {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.sim-hint {
  color: var(--fg-2);
}

.sim-error {
  color: var(--fg-0);
}

.sim-hint .icon,
.sim-error .icon {
  width: 14px;
  height: 14px;
}

.sim-error .icon {
  color: var(--danger);
}

/* Switch: a 36 by 20 track whose 14px thumb slides 16px. Its On or Off text is for sighted users;
   aria-checked carries the state. */
.sim-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-1) 0 0;
  border: 0;
  border-radius: var(--r-1);
  background-color: transparent;
  color: var(--fg-1);
  font-weight: 600;
}

.sim-switch-track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background-color: var(--bg-3);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.sim-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--fg-1);
  box-shadow: var(--shadow-1);
  transition: translate var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.sim-switch:hover:not(:disabled) .sim-switch-track {
  border-color: var(--fg-2);
}

.sim-switch[aria-checked="true"] .sim-switch-track {
  border-color: var(--accent);
  background-color: var(--accent);
}

.sim-switch[aria-checked="true"] .sim-switch-thumb {
  background-color: var(--accent-fg);
  translate: 16px 0;
}

.sim-switch:disabled {
  color: var(--fg-2);
}

.sim-switch:disabled .sim-switch-track {
  border-color: var(--line);
  background-color: var(--bg-2);
}

.sim-switch:disabled .sim-switch-thumb {
  background-color: var(--line-strong);
  box-shadow: none;
}

.sim-table-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.sim-table-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.sim-table-title {
  font-size: var(--fs-1);
}

.sim-table-block[data-inactive] .sim-table-title {
  color: var(--fg-2);
}

.sim-count {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.sim-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  scrollbar-width: thin;
}

.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sim-table th {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  background-color: var(--bg-2);
  color: var(--fg-1);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.sim-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  color: var(--fg-1);
  vertical-align: top;
}

/* A short value (an address, a name like BAL-GW-01) stays on one line; long text wraps. */
.sim-table .sim-cell-short {
  white-space: nowrap;
}

.sim-table tbody tr:last-child td {
  border-bottom: 0;
}

.sim-table tbody tr:not(:has(.sim-table-empty)):hover {
  background-color: color-mix(in srgb, var(--fg-0) 4%, transparent);
}

.sim-table .sim-table-empty {
  padding: var(--s-4) var(--s-3);
  color: var(--fg-2);
  text-align: center;
}

/*
  A table that selects its rows (selects in the console definition) has a last column of buttons, one
  per row, and marks the selected row aria-selected="true". The mark is the navigation's current-entry
  treatment: a tint and a bar in --accent. The tint is faint enough that --fg-1 text keeps 4.5:1 on it
  in both themes.
*/
.sim-table th.sim-cell-action,
.sim-table td.sim-cell-action {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.sim-table .sim-cell-action .btn {
  min-height: 28px;
  padding-block: 0;
  white-space: nowrap;
}

.sim-table tbody tr[aria-selected="true"],
.sim-table tbody tr[aria-selected="true"]:hover {
  background-color: color-mix(in srgb, var(--accent) 14%, transparent);
}

.sim-table tbody tr[aria-selected="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

@container (max-width: 560px) {
  .sim-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }

  .sim-nav {
    max-height: 168px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sim-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sim-label {
    min-height: 0;
  }
}

/* Timeline (timeline()): a day's schedule on one track of half-hour columns. --columns, --from and
   --span are set by the component; a slot's domain colours its top edge. */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.timeline-track {
  display: grid;
  grid-template-columns: repeat(var(--columns, 18), minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline-slot {
  --tone: var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-column: var(--from) / span var(--span);
  min-width: 0;
  padding: var(--s-2);
  border-top: 3px solid var(--tone);
  border-radius: 0 0 var(--r-1) var(--r-1);
  background-color: var(--bg-2);
}

.timeline-slot[data-kind="break"] {
  border-top-style: dashed;
  background-color: transparent;
}

/* The slot under way. */
.timeline-slot[aria-current="time"] {
  background-color: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  box-shadow: inset 0 0 0 1px var(--accent);
}

.timeline-time,
.timeline-detail,
.timeline-end {
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.timeline-label {
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-weight: 600;
  line-height: 1.25;
}

.timeline-label,
.timeline-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-end {
  align-self: flex-end;
}

/* Competency grid (grid()): a 6×6 heatmap of buttons. --fill (0 to 100, per cell) mixes the cell's
   domain colour into --bg-1 up to --tint-max, which keeps --fg-0 text at 4.5:1 or better. Hover and
   pressed change the border, never the fill. */
.cgrid {
  min-width: 0;
}

.cgrid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}

.cgrid-corner,
.cgrid-domain {
  width: 34px;
}

.cgrid-domain,
.cgrid-discipline {
  --tone: transparent;
  padding: 0;
  color: var(--fg-1);
  font-size: var(--fs-0);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}

.cgrid-domain {
  padding-left: var(--s-2);
  box-shadow: inset 3px 0 0 var(--tone);
  text-align: left;
}

/* Only height: 1px lets a full grid's cards fill their row. */
.cgrid-cell {
  height: 1px;
  padding: 0;
}

.cgrid-btn {
  --tone: var(--fg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  min-height: 40px;
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background-color: color-mix(in srgb, var(--tone) calc(var(--fill, 0) * var(--tint-max) / 100), var(--bg-1));
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.2;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.cgrid-btn:hover {
  border-color: var(--line-strong);
}

.cgrid-btn[aria-pressed="true"] {
  border-color: var(--fg-0);
  box-shadow: inset 0 0 0 1px var(--fg-0);
}

.cgrid-btn:focus-visible {
  outline-offset: 1px;
}

/* Full: names in the headers, and each cell a small card whose tinted band holds its code and
   percentage, with the statement and its blocks below on the plain surface. */
.cgrid[data-size="full"] .cgrid-corner,
.cgrid[data-size="full"] .cgrid-domain {
  width: 11rem;
}

.cgrid[data-size="full"] .cgrid-discipline {
  padding-bottom: var(--s-1);
}

.cgrid[data-size="full"] .cgrid-code {
  display: block;
  color: var(--fg-2);
  letter-spacing: 0.06em;
}

.cgrid-name {
  display: block;
  color: var(--fg-0);
  font-size: var(--fs-1);
}

.cgrid-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-1);
  transition: border-color var(--t-fast) var(--ease);
}

.cgrid-card:has(.cgrid-btn[aria-pressed="true"]) {
  border-color: var(--fg-0);
  box-shadow: 0 0 0 1px var(--fg-0);
}

.cgrid-card .cgrid-btn {
  flex: none;
  flex-direction: row;
  justify-content: space-between;
  height: auto;
  min-height: 0;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--r-2) - 1px) calc(var(--r-2) - 1px) 0 0;
  box-shadow: none;
  font-size: var(--fs-1);
}

.cgrid-card .cgrid-btn:focus-visible {
  outline-offset: -3px;
}

.cgrid-statement {
  padding: var(--s-2) var(--s-3) 0;
  color: var(--fg-1);
  font-size: var(--fs-0);
  line-height: var(--lh-ui);
}

.cgrid-blocks {
  margin-top: auto;
  padding: var(--s-2) var(--s-3);
  color: var(--fg-2);
  font-size: var(--fs-0);
}

/* Day card (dayCard()): the clock-in card and its two work orders. */
.day-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background-color: var(--bg-1);
  box-shadow: var(--shadow-1);
}

.day-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
}

.day-card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

.day-card-eyebrow,
.work-order-session {
  color: var(--fg-2);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.day-card-title {
  font-size: var(--fs-4);
}

.day-card-lede {
  max-width: var(--measure);
  color: var(--fg-1);
}

.day-card-orders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--s-4);
}

.day-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.work-order {
  --tone: transparent;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background-color: var(--bg-0);
  box-shadow: inset 3px 0 0 var(--tone);
}

.work-order-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.work-order-ticket {
  margin-left: auto;
  white-space: nowrap;
}

.work-order-title {
  font-size: var(--fs-2);
}

.work-order-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

/* The requester's initials; the name beside them is what assistive technology reads. */
.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--accent) 16%, var(--bg-2));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--fg-0);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.work-order-person {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.work-order-name {
  color: var(--fg-0);
  font-weight: 600;
}

.work-order-role {
  color: var(--fg-2);
  font-size: var(--fs-0);
}

.work-order-channel {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: auto;
  color: var(--fg-1);
  font-size: var(--fs-0);
}

.work-order-channel .icon {
  width: 18px;
  height: 18px;
}

.work-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  font-size: var(--fs-0);
}

.work-order-meta > div {
  display: flex;
  gap: var(--s-2);
}

.work-order-meta dt {
  color: var(--fg-2);
}

.work-order-meta dd {
  margin: 0;
  color: var(--fg-0);
}

.work-order-tags,
.work-order-blocks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* What a session needs of the lab environment: dashed, to read apart from the cell chips. */
.need {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--s-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-1);
  color: var(--fg-1);
  font-size: var(--fs-0);
  line-height: 1;
  white-space: nowrap;
}

.work-order-blocks {
  gap: var(--s-1) var(--s-4);
  color: var(--fg-1);
  font-size: var(--fs-0);
}

.work-order-block {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.work-order-block .icon {
  width: 16px;
  height: 16px;
}

.work-order-block:is([data-state="complete"], [data-state="in_progress"]) {
  color: var(--fg-0);
}

.work-order-block[data-state="complete"] .icon {
  color: var(--ok);
}

.work-order-block[data-state="in_progress"] .icon {
  color: var(--info);
}

.work-order-dot {
  width: 10px;
  height: 10px;
  margin: 0 3px;
  border: 1.5px solid var(--fg-2);
  border-radius: 50%;
}

.work-order-block[data-state="available"] .work-order-dot {
  border-color: var(--accent);
}

/* Tone mapping: last, so it overrides each component's default --tone. */
[data-tone="accent"] { --tone: var(--accent); }
[data-tone="ok"] { --tone: var(--ok); }
[data-tone="warn"] { --tone: var(--warn); }
[data-tone="danger"] { --tone: var(--danger); }
[data-tone="info"] { --tone: var(--info); }
[data-tone="id"], [data-domain="id"] { --tone: var(--d-id); }
[data-tone="ep"], [data-domain="ep"] { --tone: var(--d-ep); }
[data-tone="nw"], [data-domain="nw"] { --tone: var(--d-nw); }
[data-tone="cd"], [data-domain="cd"] { --tone: var(--d-cd); }
[data-tone="so"], [data-domain="so"] { --tone: var(--d-so); }
[data-tone="sv"], [data-domain="sv"] { --tone: var(--d-sv); }