/* ==========================================================================
   Luna case study: components only this page uses
   The alert colors and arm colors below belong to the Luna console itself,
   not to the site palette.
   ========================================================================== */

:root {
  --sev-running: #2e9e5b;
  --sev-warning: #e0a93b;
  --sev-error: #d93a2b;
  --sev-inactive: #8a8a86;
  --arm-1: #ff6b1a;
  --arm-2: #7cc4f2;
  --arm-3: #2b4c9b;
  --arm-4: #d6329e;
  --console: #282828;
  --console-ink: #fcfcfc;
  --console-text: #b9b9b9;
}

.table .is-accent {
  color: var(--accent-text);
}

.pieces {
  --grid-gap: 8px;
}

/* Users and environment: room diagram and role tabs ------------------------ */
.roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.room {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--r-sm);
  background: var(--console);
}
.room .figure__tag {
  align-self: flex-end;
  color: var(--console-text);
}
.room svg {
  width: 100%;
  height: auto;
}
.room__areas rect {
  fill: rgba(255, 255, 255, 0.03);
  stroke: rgba(255, 255, 255, 0.3);
}
.room__labels text {
  fill: var(--console-ink);
  font-family: var(--body-font);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-anchor: middle;
}
.person {
  fill: #8a8a86;
  transition: fill 0.3s, r 0.3s;
}
.room[data-selected="0"] .person[data-role="0"],
.room[data-selected="1"] .person[data-role="1"],
.room[data-selected="2"] .person[data-role="2"],
.room[data-selected="3"] .person[data-role="3"] {
  fill: var(--accent);
  r: 12px;
  stroke: color-mix(in srgb, var(--accent) 35%, transparent);
  stroke-width: 10px;
}
.role {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.role h4 {
  font-size: var(--fs-h3);
}
.role dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.role dt {
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text);
}
.role dd {
  margin-top: 6px;
  max-width: 26em;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
}
@media (max-width: 860px) {
  .roles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sketches: three drawings in a row ---------------------------------------- */
.sketches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 16px;
}
.sketches figcaption b {
  font-weight: 600;
  color: var(--ink);
}
@media (max-width: 860px) {
  .sketches {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Design stage: project switcher -------------------------------------------
   Big, plain cards in a grid (no sideways scrolling), one per project. The
   selected card is filled with the accent colour AND shows a check mark, so
   the choice does not depend on colour alone. The section heading above
   follows the selected card (luna.js). */
.project-switch {
  scroll-margin-top: calc(var(--header-h) + var(--header-top) + 16px);
}
.project-switch__choose {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-switch__hint {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.project-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.project-tabs [role="tab"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: 4px 12px;
  min-height: 96px;
  padding: 16px 16px 18px;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: none;
  color: var(--ink);
  text-align: left;
}
.project-tabs [role="tab"]:hover {
  border-color: var(--accent);
  translate: 0 -2px;
}
.project-tabs [role="tab"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.project-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.ptab__kicker {
  grid-column: 1;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.ptab__name {
  grid-column: 1;
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.3;
}
[aria-selected="true"] > .ptab__kicker {
  color: inherit;
}
/* the round marker: an empty ring, or a filled ring with a check mark */
.project-tabs [role="tab"]::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-radius: 50%;
}
.project-tabs [role="tab"][aria-selected="true"]::after {
  border-color: currentColor;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask-mode: luminance;
}
@media (max-width: 1100px) {
  .project-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .project-tabs {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-tabs [role="tab"] {
    min-height: 0;
  }
}

/* A panel's first block continues the switcher section: no heading of its
   own and no second band */
.block--continued {
  padding-top: 0;
}
.block--continued > .block__body {
  margin-top: 0;
  padding-top: 24px;
  border-image: none;
}

/* Component rules: a row of text tabs with an underline under the selected
   one (unlike the project cards above), previous and next beside the intro
   line, and the selected rule below. Grid and flex only. */
.rules {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.rules__nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.rules__nav .lead {
  grid-column: 1;
  grid-row: 1;
}
.rules__list {
  grid-column: 1 / -1;
  grid-row: 2;
}
.rules__list {
  flex-wrap: wrap;
  gap: 4px 28px;
}
.rules__list [role="tab"] {
  min-height: 48px;
  margin-bottom: -1px;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--text);
  /* same weight selected or not, so the row never shifts when you switch */
  font-weight: 600;
}
.rules__list [role="tab"]:hover {
  border-bottom-color: var(--line);
  color: var(--ink);
  translate: none;
}
.rules__list [role="tab"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.rules__list [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--accent);
  background: none;
  color: var(--ink);
}
.rules__controls {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rules__count {
  min-width: 3em;
  text-align: center;
  color: var(--text);
}
.round-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.round-button svg {
  width: 18px;
  height: 18px;
}
.rule {
  gap: 14px;
}
/* the tab row's line already separates the rule from the tabs */
.rules .rule.card {
  padding-top: 0;
  border-top: 0;
}
.rule:not(.card) {
  display: flex;
  flex-direction: column;
}
.rule .subhead {
  margin-top: 0;
}
@media (max-width: 640px) {
  .rules__nav {
    grid-template-columns: minmax(0, 1fr);
  }
  .rules__controls {
    grid-column: 1;
    grid-row: 3;
    padding-bottom: 12px;
  }
}

/* severity scale */
.severity {
  display: flex;
  flex-direction: column;
}
.severity li {
  display: grid;
  grid-template-columns: 20px 64px 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  color: var(--text);
}
.severity b {
  color: var(--ink);
}
.sev {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sev-running);
}
.sev--warning {
  background: var(--sev-warning);
}
.sev--error {
  background: var(--sev-error);
}
.sev--inactive {
  background: var(--sev-inactive);
}

/* arm panels: arm color as a bar on top, state as a dot and a word */
.arms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.arm {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 14px 16px;
  border-top: 8px solid var(--arm, var(--arm-1));
  border-radius: 6px;
  background: var(--console);
  color: var(--console-ink);
}
.arm--1 {
  --arm: var(--arm-1);
}
.arm--2 {
  --arm: var(--arm-2);
}
.arm--3 {
  --arm: var(--arm-3);
}
.arm--4 {
  --arm: var(--arm-4);
}
.arm span {
  color: var(--console-text);
}
.arm .arm__state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--console-ink);
}
.arm .sev {
  width: 10px;
  height: 10px;
}
.arm__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.arm__lines::before,
.arm__lines::after {
  content: "";
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.arm__lines::after {
  width: 60%;
}
.arms--compact .arm {
  padding-block: 14px 12px;
}
.arm-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  color: var(--text);
}
.arm-key span {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arm-key__bar {
  width: 18px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.arm-key__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 860px) {
  .arms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gallery and video editor: screenshots next to the decision rows -------- */
.gallery-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 32px 48px;
  align-items: start;
}
@media (max-width: 1100px) {
  .gallery-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Screen regions: the editor's layout as a grid of named regions ---------- */
.regions {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.regions__map {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px clamp(16px, 2.4vw, 32px);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.regions__map .figure__tag {
  align-self: flex-end;
  color: var(--text);
}
.regions__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.regions__hint svg {
  width: 20px;
  height: 20px;
  color: var(--accent-text);
}
.regions__screen {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  grid-template-rows: auto minmax(120px, 1fr) auto auto;
  grid-template-areas:
    "header header"
    "feed nav"
    "footer footer"
    "ribbon tray";
  gap: 10px;
  aspect-ratio: 16 / 9;
  padding: 10px;
  border-radius: 6px;
  background: var(--bg);
}
.region {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-weight: 500;
  color: var(--text);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.region b {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 0.8125rem;
  line-height: 1;
}
.region--header {
  grid-area: header;
}
.region--feed {
  grid-area: feed;
}
.region--nav {
  grid-area: nav;
}
.region--footer {
  grid-area: footer;
}
.region--ribbon {
  grid-area: ribbon;
}
.region--tray {
  grid-area: tray;
}
.regions[data-tier="primary"] .region[data-tier="primary"],
.regions[data-tier="secondary"] .region[data-tier="secondary"],
.regions[data-tier="tertiary"] .region[data-tier="tertiary"] {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--ink);
}
.regions__legend {
  display: flex;
  flex-direction: column;
}
.regions__legend button {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  padding: 20px 0 20px 24px;
  border: 0;
  border-top: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: none;
  text-align: left;
  cursor: pointer;
}
.regions__legend button b {
  font-family: var(--heading-font);
  font-size: var(--fs-h3);
}
.regions__legend button span:nth-of-type(1) {
  color: var(--text);
}
.regions__legend button span:nth-of-type(2) {
  grid-column: 1 / -1;
  color: var(--text);
  line-height: 1.5;
}
.regions__legend button[aria-pressed="true"] {
  border-left-color: var(--accent);
}
.regions__legend button[aria-pressed="true"] span:nth-of-type(2) {
  color: var(--ink);
}
@media (max-width: 1100px) {
  .regions {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .regions__screen {
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "header" "feed" "nav" "footer" "ribbon" "tray";
  }
}

/* Live annotation: dashed marks drawn over the dashboard ------------------ */
.dashboard {
  display: grid;
}
.dashboard > img,
.dashboard__marks {
  grid-area: 1 / 1;
}
.dashboard__marks {
  display: grid;
  grid-template-columns: 47% 7% 37.3% 1fr;
  grid-template-rows: 86.7% 3.5% 7% 1fr;
}
.dashboard__main {
  grid-column: 1 / 4;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px dashed var(--accent);
  border-radius: 6px;
  color: #e1e1e1;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.dashboard__main small {
  font-size: var(--fs-small);
  font-weight: 400;
}
.dashboard__edit {
  grid-column: 2;
  grid-row: 3;
  border: 2px dashed var(--accent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Fidelity: wireframe, greyscale and prototype stacked in one frame ------- */
.fidelity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.fidelity__tabs {
  justify-content: center;
}
.fidelity__stage {
  display: grid;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--frame);
  box-shadow: 0 40px 80px -40px rgba(36, 36, 36, 0.35);
}
.fidelity__layer {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fidelity__layer--grey {
  filter: grayscale(1);
}
.fidelity__stage[data-level="0"] .fidelity__layer:nth-child(1),
.fidelity__stage[data-level="1"] .fidelity__layer:nth-child(2),
.fidelity__stage[data-level="2"] .fidelity__layer:nth-child(3) {
  opacity: 1;
}

/* Heuristic review: bar of results, filter and two-column list ------------ */
.heuristics {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.heuristics__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.heuristics__bar {
  display: flex;
  gap: 6px;
  width: min(360px, 100%);
}
.heuristics__bar i {
  flex: 1;
  height: 8px;
  border: 1.5px solid var(--sev-warning);
  border-radius: 4px;
}
.heuristics__bar i.ok {
  border-color: var(--sev-running);
  background: var(--sev-running);
}
.heuristics__filter button {
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-weight: 500;
  cursor: pointer;
}
.heuristics__filter button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.heuristics__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
}
.heuristics__list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.heuristics__list li > span {
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--ok-text);
}
.heuristics__list li[data-status="open"] > span {
  color: var(--warn-text);
}
.heuristics__list h4 {
  font-family: var(--body-font);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.heuristics__list p {
  line-height: 1.5;
  color: var(--text);
}
.heuristics[data-filter="ok"] li[data-status="open"],
.heuristics[data-filter="open"] li[data-status="ok"] {
  display: none;
}
@media (max-width: 860px) {
  .heuristics__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

:root {
  --ok-text: #0d5228;
  --warn-text: #5e3f00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ok-text: #5dd68a;
    --warn-text: #e0a93b;
  }
}
:root[data-theme="dark"] {
  --ok-text: #5dd68a;
  --warn-text: #e0a93b;
}

/* Arm panel sandbox: Luna's own pieces ---------------------------------------
   The frame, panel and tabs are in sandbox.css. Here: the arm colors for the
   frame, the console with its four arm panels drawn five ways (data-design:
   before = numbers only, a = warning on the picture, b = arm color as a
   fill, c = bar, dot and word, final = a and c together, as shipped), the
   state controls, the one-second glance
   test and the "across the room" view. The console is always dark, like the
   real one. */
.sandbox-wrap--luna {
  --sb-ring: #ff6b1a, #7cc4f2, #2b4c9b, #d6329e, #ff6b1a;
  --sb-wash:
    radial-gradient(circle at 0% 0%, rgb(255 107 26 / 0.18), transparent 40%),
    radial-gradient(circle at 100% 0%, rgb(124 196 242 / 0.24), transparent 40%),
    radial-gradient(circle at 100% 100%, rgb(214 50 158 / 0.14), transparent 42%);
  --sb-shadow: rgb(43 76 155 / 0.4);
  --sb-glow: #7cc4f2;
}
.sandbox__btn--go {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent-text);
}
.arm-chip {
  background: #3a3a3a;
  color: #fff;
}
.arm-chip--pic {
  background: #20262a;
  color: var(--sev-error);
}
.arm-chip--fill {
  background: var(--arm-4);
}
.arm-chip--bar {
  position: relative;
  background: #3a3a3a;
}
.arm-chip--bar i {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  border-radius: 5px 5px 0 0;
  background: var(--arm-4);
}
.arm-chip--final {
  display: grid;
  place-items: center;
  padding-top: 4px;
  color: var(--sev-error);
}
/* the verdict beside each design: kept, dropped, shipped */
.arm-tag {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}
.arm-tag--kept {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--text);
}
.arm-tag--dropped {
  background: color-mix(in srgb, var(--bad-text, #a1121c) 12%, transparent);
  color: var(--bad-text, #a1121c);
}
.arm-tag--shipped {
  background: color-mix(in srgb, var(--ok-text, #0d5228) 14%, transparent);
  color: var(--ok-text, #0d5228);
}

/* the console */
.console {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  padding: 12px;
  border-radius: 12px;
  background: #1a1d1f;
  color: var(--console-ink);
  box-shadow: 0 14px 34px -16px rgb(0 0 0 / 0.5);
  transition: scale 0.35s ease, filter 0.35s ease;
}
.sandbox__canvas.is-far .console {
  scale: 0.55;
  filter: blur(1.1px);
}
.console__video {
  position: relative;
  height: 96px;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 120%, #4a2a2a, #121516 70%);
}
.console__tool {
  position: absolute;
  bottom: -10px;
  width: 10px;
  height: 80px;
  border-radius: 5px;
  background: linear-gradient(#9aa3a8, #5b656a);
}
.console__tool--l {
  left: 34%;
  rotate: 28deg;
}
.console__tool--r {
  right: 34%;
  rotate: -28deg;
}
/* design A: a label with L or R next to the instrument, on the picture */
.console__flag {
  position: absolute;
  top: 16px;
  display: none;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--sev-error);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}
.console__flag.is-warning {
  background: var(--sev-warning);
  color: #1a1a1a;
}
.console__flag--l {
  left: 18%;
}
.console__flag--r {
  right: 18%;
}
.console:is([data-design="a"], [data-design="final"]) .console__flag.is-on {
  display: block;
}
.console__arms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.carm {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 10px 10px;
  border-top: 6px solid transparent;
  border-radius: 6px;
  background: var(--console);
  font-size: 0.8125rem;
}
.carm__name {
  font-size: 0.875rem;
}
.carm__color {
  color: var(--console-text);
}
.carm__state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.carm__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sev, var(--sev-running));
}
.carm__word {
  font-style: normal;
}
.carm__lines {
  display: block;
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.14);
}
.carm[data-state="Running"] { --sev: var(--sev-running); }
.carm[data-state="Warning"] { --sev: var(--sev-warning); }
.carm[data-state="Error"] { --sev: var(--sev-error); }
.carm[data-state="Inactive"] { --sev: var(--sev-inactive); }
/* C and the final design: the arm color as a bar on top, the state as a
   dot and a word */
.console:is([data-design="c"], [data-design="final"]) .carm {
  border-top-color: var(--arm);
}
/* B: the whole panel takes the arm color; the state is only a word */
.console[data-design="b"] .carm {
  border-top-color: var(--arm);
  background: var(--arm);
  color: #111;
}
.console[data-design="b"] .carm[data-arm="3"] {
  color: #fff;
}
.console[data-design="b"] .carm__color {
  color: inherit;
  opacity: 0.8;
}
.console[data-design="b"] .carm__dot,
.console[data-design="b"] .carm__lines {
  display: none;
}
/* before and A: no arm colors, the arm is only a number */
.console:is([data-design="before"], [data-design="a"]) .carm__color {
  visibility: hidden;
}
.console[data-design="before"] .carm__state,
.console[data-design="a"] .carm__state {
  display: none;
}
.console__list {
  display: none;
  padding: 8px 10px;
  border-radius: 6px;
  background: #24282b;
  color: var(--console-text);
  font-size: 0.8125rem;
}
.console[data-design="before"] .console__list {
  display: block;
}
.console__list b {
  color: var(--console-ink);
}

/* the glance test: after one second the console is covered by the question */
.console__quiz {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: rgb(18 21 22 / 0.97);
  text-align: center;
}
.console__quiz[hidden] {
  display: none;
}
.console__ask {
  font-size: 1.0625rem;
  font-weight: 600;
}
.console__picks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.console__pick,
.console__again {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 8px;
  background: #2a2f32;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.console__pick:hover,
.console__again:hover {
  border-color: #fff;
}
.console__pick:focus-visible,
.console__again:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.console__pick.is-right {
  border-color: var(--sev-running);
  background: color-mix(in srgb, var(--sev-running) 35%, #2a2f32);
}
.console__pick.is-wrong {
  border-color: var(--sev-error);
  background: color-mix(in srgb, var(--sev-error) 35%, #2a2f32);
}
.console__result {
  min-height: 1.4em;
  font-size: 0.9375rem;
}
.console__after {
  display: flex;
  gap: 8px;
}
.console__after[hidden] {
  display: none;
}
.console__again--ghost {
  background: transparent;
}

/* controls: one row per arm, its four states as a segmented control */
[data-arms] .sandbox__label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6px;
  align-items: center;
}
[data-arms] .sandbox__label .play__picked {
  grid-column: 1 / -1;
}
.arm-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--arm);
  vertical-align: -1px;
}
.arm-states {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.arm-state {
  position: relative;
  cursor: pointer;
}
.arm-state input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.arm-state span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}
.arm-state input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.arm-state input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.glance__intro,
.arm-notes__text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
}
.arm-notes__title {
  margin-bottom: 6px;
  font-size: 0.875rem;
  font-weight: 700;
}
.glance__scores {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}
.glance__scores li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.8125rem;
  color: var(--text);
}
.glance__scores b {
  color: var(--ink);
}
.glance__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.glance__num {
  flex: none;
}
@media (max-width: 860px) {
  .console__arms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
  .console {
    transition: none;
  }
}