/* HAL Website Operating Surface V2 — page-local S7 layer.
 * Global tokens/nav/footer remain Grok-owned in hal.css. These fallbacks map to
 * the agreed Forge aliases without creating another global design authority.
 */
:root {
  --wb-ink: var(--ui-ink, var(--g0, #090b0d));
  --wb-steel: var(--ui-steel-900, var(--g2, #17191d));
  --wb-steel-2: var(--ui-steel-700, var(--g4, #292c31));
  --wb-rubber: #0e1013;
  --wb-bone: var(--ui-bone, var(--tx-1, #ece7dc));
  --wb-bone-dim: var(--ui-bone-dim, var(--tx-2, #bdb7ac));
  --wb-paper: #e7dfcf;
  --wb-paper-ink: #17191c;
  --wb-orange: var(--ui-spray, var(--c-orange, #ff7139));
  --wb-signal: var(--ui-signal, var(--c-green, #39e884));
  --wb-alarm: var(--ui-alarm, var(--c-red, #ff4d4d));
  --wb-line: rgba(255, 255, 255, .14);
  --wb-z1: var(--z1, var(--e1, 0 6px 14px rgba(0, 0, 0, .4)));
  --wb-z2: var(--z2, var(--e2, 0 14px 30px rgba(0, 0, 0, .45)));
  --wb-z3: var(--z3, var(--e3, 0 30px 70px rgba(0, 0, 0, .55)));
}

/* The shared route renderer expands every S7 footer after load. Keep each
 * injected destination at the same real touch-target floor as the workbench. */
.site-foot .foot-links a,
.hs-drop a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ui-tap, 44px);
  box-sizing: border-box;
}

/* Four-door start path shared by the Tool Center and Agent Rooms. */
.hal-path-launcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  margin-top: 22px;
  border: 1px solid var(--wb-line);
  background: var(--wb-line);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
  text-align: left;
}
.hal-path-launcher a {
  position: relative;
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  min-height: 104px;
  padding: 15px 38px 15px 16px;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(18, 22, 24, .98), rgba(10, 12, 14, .98));
  color: var(--wb-bone);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
.hal-path-launcher a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--wb-orange);
}
.hal-path-launcher a::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  color: var(--wb-orange);
  font-size: 19px;
  transform: translateY(-50%);
}
.hal-path-launcher a[data-tone="signal"]::before { background: var(--wb-signal); }
.hal-path-launcher a[data-tone="signal"]::after { color: var(--wb-signal); }
.hal-path-launcher a:hover,
.hal-path-launcher a:focus-visible { background: linear-gradient(145deg, rgba(31, 37, 39, .99), rgba(13, 16, 17, .99)); transform: translateY(-3px); }
.hal-path-launcher a:focus-visible { z-index: 1; outline: 3px solid var(--wb-orange); outline-offset: -4px; }
.hal-path-launcher a[data-tone="signal"]:focus-visible { outline-color: var(--wb-signal); }
.hal-path-launcher span { color: var(--wb-orange); font: 900 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.hal-path-launcher a[data-tone="signal"] span { color: var(--wb-signal); }
.hal-path-launcher strong { color: #fff9ef; font-size: 17px; line-height: 1.05; }
.hal-path-launcher small { max-width: 24ch; color: var(--wb-bone-dim); font-size: 11px; line-height: 1.4; }

@media (max-width: 900px) {
  .hal-path-launcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hal-path-launcher {
    grid-template-columns: 1fr 1fr;
    margin-top: 16px;
  }
  .hal-path-launcher a { min-height: 96px; padding: 13px 30px 13px 12px; }
  .hal-path-launcher strong { font-size: 15px; }
  .hal-path-launcher small { font-size: 10px; }
}
@media (max-width: 380px) {
  .hal-path-launcher { grid-template-columns: 1fr; }
  .hal-path-launcher a { min-height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .hal-path-launcher a { transition: none; }
}
@media (forced-colors: active) {
  .hal-path-launcher,
  .hal-path-launcher a { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .hal-path-launcher a::before { background: Highlight; }
  .hal-path-launcher a::after,
  .hal-path-launcher span { color: LinkText; }
}

.hal-workbench-compact,
.hal-workbench-full {
  color: var(--wb-bone);
  isolation: isolate;
}

.hal-workbench-compact {
  position: relative;
  z-index: 4;
  margin-block: 1rem 0;
}

.wb-compact-frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 10px 8px 16px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 20%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, var(--wb-steel-2), var(--wb-rubber) 64%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--wb-z2);
}

.wb-compact-brand {
  display: grid;
  gap: 2px;
  min-width: 146px;
}

.wb-compact-brand strong,
.wb-kicker,
.wb-state,
.wb-card-state,
.wb-card-kind {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .13em;
}

.wb-compact-brand strong {
  color: var(--wb-orange);
  font-size: 12px;
}

.wb-compact-brand span {
  color: var(--wb-bone-dim);
  font-size: 12px;
}

.wb-compact-nav {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.wb-compact-nav a,
.wb-open-map,
.wb-goal-select,
.wb-card-link {
  min-height: 44px;
}

.wb-compact-nav a,
.wb-open-map {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 12px;
  color: var(--wb-bone-dim);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.1;
  text-decoration: none;
}

.wb-compact-nav a:hover,
.wb-compact-nav a:focus-visible,
.wb-compact-nav a[aria-current="page"] {
  border-color: rgba(255, 113, 57, .58);
  color: #fff7ec;
  background: linear-gradient(180deg, rgba(255, 113, 57, .2), rgba(255, 113, 57, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--wb-z1);
}

.wb-open-map {
  gap: 7px;
  border-color: rgba(57, 232, 132, .42);
  color: var(--wb-signal);
  background: #101613;
}

.wb-open-map::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 14px currentColor;
  content: "";
}

.hal-workbench-full {
  position: relative;
  scroll-margin-top: 96px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 113, 57, .23), transparent 24%),
    radial-gradient(circle at 12% 88%, rgba(57, 232, 132, .1), transparent 25%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .018) 18px 19px),
    var(--wb-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), var(--wb-z3);
}

.hal-workbench-full::before,
.hal-workbench-full::after {
  position: absolute;
  z-index: -1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #08090a;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), 0 1px 3px #000;
  content: "";
}

.hal-workbench-full::before { inset: 14px auto auto 14px; }
.hal-workbench-full::after { inset: auto 14px 14px auto; }

.wb-full-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 24px;
  padding: clamp(24px, 5vw, 54px);
  border-bottom: 1px solid var(--wb-line);
}

.wb-kicker {
  display: block;
  margin-bottom: 9px;
  color: var(--wb-orange);
  font-size: 11px;
  font-weight: 800;
}

.wb-full-head h2 {
  max-width: 760px;
  margin: 0;
  color: #fff9ee;
  font-size: clamp(34px, 5vw, 62px);
  line-height: .96;
  text-wrap: balance;
}

.wb-full-head h2 strong { color: var(--wb-orange); }

.wb-full-head p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--wb-bone-dim);
  font-size: 16px;
  line-height: 1.55;
}

.wb-truth-panel {
  align-self: start;
  padding: 18px;
  border: 1px solid rgba(23, 25, 28, .2);
  border-radius: 18px;
  color: var(--wb-paper-ink);
  background:
    radial-gradient(circle at 14px 14px, rgba(0, 0, 0, .11) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(150deg, #f1eadc, var(--wb-paper));
  box-shadow: inset 0 1px 0 #fff, var(--wb-z2);
  transform: rotate(.35deg);
}

.wb-truth-panel strong { display: block; font-size: 16px; }
.wb-truth-panel p { margin: 8px 0 0; color: #34373b; font-size: 13px; }

.wb-state-key {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.wb-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, .46);
  font-size: 9px;
  font-weight: 850;
}

.wb-state::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wb-orange);
  content: "";
}
.wb-state[data-tone="signal"]::before { background: #177841; }
.wb-state[data-tone="muted"]::before { background: #6a6d72; }

.wb-goal-deck {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
  gap: 20px;
  padding: clamp(20px, 4vw, 42px);
}

.wb-goal-control {
  align-self: start;
  padding: 18px;
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--wb-steel-2), var(--wb-rubber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--wb-z1);
}

.wb-goal-control label {
  display: block;
  margin-bottom: 9px;
  color: var(--wb-bone);
  font-weight: 800;
}

.wb-goal-select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  padding: 10px 38px 10px 12px;
  color: #fff;
  background: #0b0d10;
  font: inherit;
}

.wb-goal-status {
  min-height: 3.3em;
  margin: 12px 0 0;
  color: var(--wb-bone-dim);
  font-size: 13px;
  line-height: 1.5;
}

.wb-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.wb-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 23%),
    linear-gradient(145deg, var(--wb-steel-2), #111317 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--wb-z1);
}

.wb-card::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--wb-orange);
  content: "";
}
.wb-card[data-accent="signal"]::after { background: var(--wb-signal); }

.wb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.wb-card-state,
.wb-card-kind {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--wb-bone-dim);
  font-size: 9px;
  font-weight: 800;
}
.wb-card-state { color: var(--wb-signal); }

.wb-card h3 { margin: 0; color: #fff9ef; font-size: 20px; }
.wb-card > p { margin: 9px 0 14px; color: var(--wb-bone-dim); font-size: 14px; line-height: 1.5; }

.wb-card-boundary {
  margin: 0 0 14px;
  padding: 9px 10px;
  border-left: 3px solid var(--wb-orange);
  color: #d9d2c6;
  background: rgba(0, 0, 0, .22);
  font-size: 12px;
  line-height: 1.45;
}

.wb-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  align-self: end;
  border-radius: 12px;
  padding: 10px 12px;
  color: #16181b;
  background: var(--wb-paper);
  font-weight: 850;
  text-decoration: none;
}
.wb-card-link::after { content: "→"; }
.wb-card-link:hover,
.wb-card-link:focus-visible { background: #fff6e5; box-shadow: var(--wb-z1); }

.wb-footnote {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--wb-bone-dim);
  font-size: 12px;
}

/* Tool Center S7 activation layer. The global shell and token authority remain
 * in hal.css; these selectors are local to tools.html. */
.tool-links {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

#downloads { scroll-margin-top: 84px; }

.tool-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 9px 12px;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.tool-links a:hover,
.tool-links a:focus-visible {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
}

.tool-topbar-actions,
.diagnostics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.audience-tabs button[aria-pressed="true"],
.use-case-row button[aria-pressed="true"] {
  border-color: var(--wb-orange);
  color: #fff9ef;
  background: rgba(255, 113, 57, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.audience-tabs button,
.use-case-row button {
  min-width: 44px;
  min-height: 44px;
}

.diagnostics-view > h3 {
  max-width: 760px;
  margin: 5px 0 8px;
  color: #fff9ef;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.04;
}

.diagnostics-lede {
  max-width: 880px;
  margin: 0 0 18px;
  color: var(--wb-bone-dim);
  line-height: 1.55;
}

.diagnostics-lede strong { color: var(--wb-bone); }

.diagnostics-actions { margin-bottom: 14px; }

.diagnostics-summary,
.diagnostics-boundary {
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--wb-bone-dim);
  background: rgba(0, 0, 0, .2);
  font-size: 13px;
  line-height: 1.45;
}

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

.diagnostic-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 26%),
    linear-gradient(145deg, var(--wb-steel-2), var(--wb-rubber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--wb-z1);
}

.diagnostic-card > div {
  display: flex;
  gap: 9px;
  align-items: center;
}

.diagnostic-card h4 { margin: 0; color: #fff9ef; font-size: 17px; }

.diagnostic-light {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #6a6d72;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .05);
}

.diagnostic-card > strong {
  margin-top: 12px;
  color: var(--wb-bone);
  font: 800 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.diagnostic-card > p {
  margin: 8px 0 14px;
  color: var(--wb-bone-dim);
  font-size: 13px;
  line-height: 1.5;
}

.diagnostic-card > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--wb-bone);
  font-weight: 800;
}

.diagnostic-card[data-state="ready"] .diagnostic-light {
  background: var(--wb-signal);
  box-shadow: 0 0 14px rgba(57, 232, 132, .6);
}

.diagnostic-card[data-state="action"] .diagnostic-light,
.diagnostic-card[data-state="manual"] .diagnostic-light {
  background: var(--wb-orange);
  box-shadow: 0 0 14px rgba(255, 113, 57, .5);
}

.diagnostic-card[data-state="unavailable"] .diagnostic-light {
  background: var(--wb-alarm);
  box-shadow: 0 0 14px rgba(255, 77, 77, .5);
}

.diagnostic-card[data-state="checking"] .diagnostic-light {
  background: var(--wb-paper);
}

.diagnostics-boundary {
  border-left: 4px solid var(--wb-orange);
}

/* Feature Atlas: a dense public product audit, never a runtime-health surface. */
.feature-atlas-head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  gap: 18px;
  align-items: start;
}

.feature-atlas-head h3 {
  max-width: 720px;
  margin: 5px 0 8px;
  color: #fff9ef;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.02;
  text-wrap: balance;
}

.feature-atlas-head p {
  max-width: 760px;
  margin: 0;
  color: var(--wb-bone-dim);
  line-height: 1.55;
}

.feature-atlas-scope {
  display: grid;
  gap: 7px;
  padding: 15px;
  border: 1px solid rgba(23, 25, 28, .2);
  border-radius: 18px;
  color: var(--wb-paper-ink);
  background:
    radial-gradient(circle at 12px 12px, rgba(0, 0, 0, .1) 0 1px, transparent 1.5px) 0 0 / 5px 5px,
    linear-gradient(150deg, #f1eadc, var(--wb-paper));
  box-shadow: inset 0 1px 0 #fff, var(--wb-z1);
}

.feature-atlas-scope strong { font-size: 15px; }
.feature-atlas-scope span { color: #3d4045; font-size: 12px; line-height: 1.45; }

.feature-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.feature-kpi {
  position: relative;
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 42%),
    linear-gradient(145deg, var(--wb-steel-2), var(--wb-rubber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), var(--wb-z1);
}

.feature-kpi::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--wb-bone-dim);
  content: "";
}

.feature-kpi[data-tone="signal"]::before { background: var(--wb-signal); }
.feature-kpi[data-tone="orange"]::before { background: var(--wb-orange); }
.feature-kpi[data-tone="neutral"]::before { background: #777b82; }
.feature-kpi strong { color: #fff9ef; font-size: clamp(25px, 3vw, 36px); line-height: 1; }
.feature-kpi span { color: var(--wb-bone); font-size: 12px; font-weight: 800; }
.feature-kpi small { color: var(--wb-bone-dim); font-size: 10px; line-height: 1.35; }

.feature-atlas-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.feature-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.feature-filter button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--wb-line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--wb-bone-dim);
  background: rgba(0, 0, 0, .22);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.feature-filter button:hover,
.feature-filter button:focus-visible,
.feature-filter button[aria-pressed="true"] {
  border-color: var(--wb-orange);
  color: #fff9ef;
  background: rgba(255, 113, 57, .14);
}

.feature-status {
  flex: 1 1 260px;
  margin: 0;
  color: var(--wb-bone-dim);
  font-size: 12px;
  line-height: 1.4;
  text-align: right;
}

.feature-atlas-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, .62fr);
  gap: 14px;
  align-items: start;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 10px;
  min-width: 0;
}

.feature-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .075), transparent 26%),
    linear-gradient(145deg, var(--wb-steel-2), var(--wb-rubber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--wb-z1);
}

.feature-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 4px;
  background: var(--wb-orange);
  content: "";
}

.feature-card[data-tone="signal"]::before { background: var(--wb-signal); }
.feature-card:has(.feature-card-select[aria-pressed="true"]) { border-color: rgba(255, 113, 57, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--wb-z2); }

.feature-card-select {
  display: grid;
  gap: 9px;
  width: 100%;
  min-height: 44px;
  border: 0;
  padding: 15px 15px 12px 17px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.feature-card-select:focus-visible { outline: 3px solid var(--wb-orange); outline-offset: -4px; }

.feature-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.feature-card-meta span {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 4px 6px;
  color: var(--wb-bone-dim);
  font: 800 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.feature-card-select > strong { color: #fff9ef; font-size: 17px; line-height: 1.15; }
.feature-card-summary { color: var(--wb-bone-dim); font-size: 12px; line-height: 1.45; }
.feature-card-select > small { color: var(--wb-orange); font: 800 9px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .11em; text-transform: uppercase; }

.feature-card-open,
.feature-inspector-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  color: var(--wb-bone);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.feature-card-open {
  border-top: 1px solid var(--wb-line);
  padding: 9px 14px 9px 17px;
  background: rgba(0, 0, 0, .2);
}

.feature-card-open::after,
.feature-inspector-link::after { content: "→"; }
.feature-card-open:hover,
.feature-card-open:focus-visible,
.feature-inspector-link:hover,
.feature-inspector-link:focus-visible { color: #fff; background: rgba(255, 113, 57, .12); }

.feature-inspector {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--wb-line);
  border-radius: 18px;
  padding: 17px;
  background:
    linear-gradient(180deg, rgba(255, 113, 57, .12), transparent 34%),
    linear-gradient(145deg, #1e2024, var(--wb-rubber));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--wb-z2);
}

.feature-inspector h4 { margin: 0; color: #fff9ef; font-size: 23px; line-height: 1.05; }
.feature-inspector > p { margin: 0; color: var(--wb-bone-dim); font-size: 12px; line-height: 1.5; }
.feature-inspector dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.feature-inspector dl div { min-width: 0; border: 1px solid var(--wb-line); border-radius: 8px; padding: 8px; background: rgba(0, 0, 0, .2); }
.feature-inspector dt { color: var(--wb-bone-dim); font: 800 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.feature-inspector dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--wb-bone); font-size: 10px; line-height: 1.25; }

.feature-inspector-callout {
  display: grid;
  gap: 5px;
  border-left: 3px solid var(--wb-signal);
  padding: 9px 10px;
  background: rgba(57, 232, 132, .07);
}

.feature-inspector-callout[data-tone="boundary"] { border-color: var(--wb-orange); background: rgba(255, 113, 57, .07); }
.feature-inspector-callout strong { color: var(--wb-bone); font-size: 11px; }
.feature-inspector-callout span { color: var(--wb-bone-dim); font-size: 11px; line-height: 1.4; }

.feature-inspector-link {
  border: 1px solid rgba(255, 113, 57, .55);
  border-radius: 12px;
  padding: 9px 11px;
}

.feature-atlas-boundary,
.feature-empty,
.feature-loading {
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  color: var(--wb-bone-dim);
  background: rgba(0, 0, 0, .2);
  font-size: 12px;
  line-height: 1.45;
}

.feature-atlas-boundary { margin: 14px 0 0; border-left: 4px solid var(--wb-orange); padding: 11px 13px; }
.feature-empty { grid-column: 1 / -1; margin: 0; padding: 16px; }
.feature-loading { display: grid; gap: 5px; padding: 18px; }
.feature-loading strong { color: var(--wb-bone); }

.wb-compact-nav a:focus-visible,
.wb-open-map:focus-visible,
.wb-goal-select:focus-visible,
.wb-card-link:focus-visible {
  outline: 3px solid var(--wb-orange);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .wb-compact-frame { grid-template-columns: 1fr auto; }
  .wb-compact-nav { grid-column: 1 / -1; grid-row: 2; }
  .wb-full-head,
  .wb-goal-deck { grid-template-columns: 1fr; }
  .wb-truth-panel { transform: none; }
  .tool-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-atlas-head,
  .feature-atlas-layout { grid-template-columns: 1fr; }
  .feature-inspector { position: static; order: -1; scroll-margin-top: 72px; }
}

@media (max-width: 720px) {
  .hal-workbench-compact { margin-top: 10px; }
  .wb-compact-frame { padding: 9px; border-radius: 12px; }
  .wb-compact-brand { min-width: 0; }
  .wb-compact-brand span { display: none; }
  .wb-open-map { padding-inline: 10px; font-size: 12px; }
  .wb-compact-nav { margin-inline: -2px; padding: 2px; }
  .wb-compact-nav a { padding-inline: 10px; }
  .hal-workbench-full { border-radius: 18px; }
  .wb-full-head { gap: 18px; padding: 28px 20px; }
  .wb-full-head h2 { font-size: clamp(34px, 12vw, 48px); }
  .wb-goal-deck { padding: 18px; }
  .wb-results { grid-template-columns: 1fr; }
  .wb-card { padding: 16px; }
  .diagnostics-grid { grid-template-columns: 1fr; }
  .feature-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-status { text-align: left; }
  .tool-topbar-actions .button,
  .diagnostics-actions .button { flex: 1 1 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .wb-compact-nav a,
  .wb-open-map,
  .wb-card-link { scroll-behavior: auto; transition: none; }
}

@media (forced-colors: active) {
  .wb-compact-frame,
  .hal-workbench-full,
  .wb-goal-control,
  .wb-card,
  .wb-truth-panel { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .wb-card::after,
  .wb-open-map::before,
  .wb-state::before { background: Highlight; }
  .wb-card-link { border: 1px solid LinkText; background: Canvas; color: LinkText; }
  .diagnostic-card,
  .diagnostics-summary,
  .diagnostics-boundary,
  .feature-atlas-scope,
  .feature-kpi,
  .feature-card,
  .feature-inspector,
  .feature-atlas-boundary,
  .feature-empty,
  .feature-loading { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .diagnostic-light { forced-color-adjust: none; background: ButtonText; box-shadow: none; }
  .feature-card::before,
  .feature-kpi::before { background: Highlight; }
}