/* ═══════════════════════════════════════════════════════════════════════
   The Human Clause — demo styles
   Layout: split view (product window left, case-study rail right).
   Worlds: html[data-world="a"] status quo (cold slate) · b human clause (warm coral).
   Everything rides on smartwebUI tokens; only derived accent tokens are
   re-declared at .hc-app scope so per-world overrides recompute.
   ═══════════════════════════════════════════════════════════════════════ */

/* ——— Page tokens ——— */
.hc-body {
  --hc-human: light-dark(#c2512d, #ff8a63);
  --hc-human-strong: light-dark(#8f3717, #ffb398);
  --hc-machine: light-dark(#3b5bd6, #7d95ff);
  --hc-paper: light-dark(#f5f1e9, #16151b);
  --hc-paper-line: light-dark(#e6e0d2, #2a2930);
  --hc-ink-soft: light-dark(#6f6a5e, #a6a3ad);
  --hc-editorial: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --hc-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--hc-human) 7%, transparent), transparent 55%),
    var(--hc-paper);
  transition: background-color 0.4s ease;
}
html[data-world="a"] .hc-body {
  --hc-paper: light-dark(#edeef0, #111114);
  --hc-paper-line: light-dark(#dcdde1, #26262b);
  --hc-ink-soft: light-dark(#62666e, #9a9da6);
  background:
    radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, #5c6674 7%, transparent), transparent 55%),
    var(--hc-paper);
}

/* ——— Chrome ——— */
.hc-chrome {
  position: sticky;
  top: 0;
  z-index: var(--smart-z-sticky, 40);
  background: color-mix(in srgb, var(--hc-paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--hc-paper-line);
}
.hc-chrome__inner {
  width: min(100% - 2rem, 66rem);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1rem;
  padding-block: 0.7rem;
}
.hc-chrome__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--smart-text);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.hc-chrome__brand > svg { color: var(--hc-human); --smart-icon-size: 1.3rem; }
html[data-world="a"] .hc-chrome__brand > svg { color: var(--smart-text-tertiary); }
.hc-chrome__tag {
  font-size: 0.72rem;
  color: var(--hc-ink-soft);
  border-left: 1px solid var(--hc-paper-line);
  padding-inline-start: 0.7rem;
  display: none;
}
@media (min-width: 52rem) { .hc-chrome__tag { display: inline; } }
.hc-chrome__controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-inline-start: auto;
}
.hc-world span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.hc-world span > svg { --smart-icon-size: 0.95rem; }
.hc-rail-toggle { text-decoration: none; }
.hc-rail-toggle[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--smart-accent);
  color: var(--smart-accent-strong);
}

/* ——— Journey nav ——— */
.hc-journey { overflow-x: auto; scrollbar-width: thin; }
.hc-journey__list {
  list-style: none;
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0.45rem 1rem 0.6rem;
  width: min(100%, 66rem);
  margin-inline: auto;
}
.hc-journey__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.8rem;
  border-radius: var(--smart-radius-full);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--smart-text-secondary);
  font-size: 0.84rem;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.hc-journey__link:hover { background: var(--smart-surface-hover); color: var(--smart-text); }
.hc-journey__link.is-current {
  background: color-mix(in srgb, var(--hc-human) 12%, transparent);
  border-color: color-mix(in srgb, var(--hc-human) 32%, transparent);
  color: var(--hc-human-strong);
  font-weight: 600;
}
html[data-world="a"] .hc-journey__link.is-current {
  background: var(--smart-surface-active);
  border-color: var(--smart-border-strong);
  color: var(--smart-text);
}
.hc-journey__num { font-family: var(--hc-mono); font-size: 0.68rem; opacity: 0.65; }
.hc-journey__icon > svg { --smart-icon-size: 0.95rem; }
@media (max-width: 40rem) { .hc-journey__icon { display: none; } }

/* ——— Split layout ——— */
.hc-split {
  width: min(100% - 2.2rem, 66rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(19rem, 30%, 25rem);
  gap: 2rem;
  align-items: start;
  padding-block: 1.4rem 4rem;
}
.hc-body[data-hc-rail="off"] .hc-rail-col { display: none; }
.hc-body[data-hc-rail="off"] .hc-split { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 68.75rem) {
  .hc-split { grid-template-columns: minmax(0, 1fr); }
  .hc-rail-toggle { display: none; }
  .hc-rail-col { max-width: 42rem; }
}

/* ——— Stage column & product window ——— */
.hc-stage-counter {
  font-family: var(--hc-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hc-ink-soft);
  margin: 0 0 0.55rem 0.25rem;
}
.hc-window {
  border-radius: var(--smart-radius-lg);
  border: 1px solid var(--hc-paper-line);
  overflow: clip;
  background: var(--smart-canvas-raised, var(--smart-surface-solid));
  box-shadow:
    0 1px 2px color-mix(in srgb, black 6%, transparent),
    0 18px 50px -22px color-mix(in srgb, black 30%, transparent);
}
.hc-window__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 0.9rem;
  background: light-dark(#e9e5db, #232228);
  border-bottom: 1px solid var(--hc-paper-line);
}
html[data-world="a"] .hc-window__bar { background: light-dark(#e4e5e8, #1d1d21); }
.hc-window__dot { width: 0.68rem; height: 0.68rem; border-radius: 50%; background: light-dark(#cfc9bb, #3a3941); }
.hc-window__dot:nth-child(2) { background: light-dark(#c2bba9, #44434c); }
.hc-window__dot:nth-child(3) { background: light-dark(#b3ab97, #4e4d57); }
.hc-window__url {
  margin-inline: auto;
  font-family: var(--hc-mono);
  font-size: 0.7rem;
  color: var(--smart-text-tertiary);
  background: light-dark(rgba(255, 255, 255, 0.55), rgba(0, 0, 0, 0.28));
  padding: 0.22rem 0.85rem;
  border-radius: var(--smart-radius-full);
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hc-window__badge {
  font-family: var(--hc-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hc-ink-soft);
}

/* ——— App shell inside the window ——— */
.hc-app {
  --smart-accent: light-dark(#c2512d, #ff8a63);
  --smart-accent-hover: light-dark(#a9441f, #ff9d7c);
  --smart-accent-strong: light-dark(#8f3717, #ffb398);
  --smart-accent-soft: color-mix(in srgb, var(--smart-accent) 12%, transparent);
  --smart-accent-softer: color-mix(in srgb, var(--smart-accent) 7%, transparent);
  --smart-focus-color: color-mix(in srgb, var(--smart-accent) 72%, light-dark(white, black));
  --smart-selection: color-mix(in srgb, var(--smart-accent) 22%, transparent);
  background: var(--smart-canvas, var(--smart-surface-solid));
}
html[data-world="a"] .hc-app {
  --smart-accent: light-dark(#5c6674, #8b95a6);
  --smart-accent-hover: light-dark(#4b5462, #9aa3b2);
  --smart-accent-strong: light-dark(#3d4550, #b3bac6);
}
.hc-app__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--smart-divider, var(--smart-border));
}
.hc-app__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 0.92rem;
}
.hc-app__brand > svg { color: var(--smart-accent); --smart-icon-size: 1.1rem; }
.hc-app__bot-line {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--smart-text-tertiary);
}
.hc-app__bot-line > svg { --smart-icon-size: 0.9rem; }
@media (max-width: 34rem) { .hc-app__bot-line { display: none; } }

/* World switching — visibility only; layout comes from each element's own
   shell classes (.hca-world stays grid either way). Server default: b. */
html:not([data-world="a"]) .hc-a-only,
html[data-world="a"] .hc-b-only { display: none !important; }
.hc-app.hc-swap { animation: hc-stage-in 0.3s ease; }
@keyframes hc-stage-in {
  from { opacity: 0.35; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Stage content shells */
.hca-world, .hca-home {
  padding: clamp(1.1rem, 3vw, 2.2rem);
  display: grid;
  gap: var(--smart-space-5);
  align-content: start;
}

/* Scene-moment banner — pins the screen to one instant of the story */
.hca-moment {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--hc-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--smart-text-tertiary);
}
.hca-moment > svg { --smart-icon-size: 0.85rem; color: var(--smart-accent); flex: none; }

/* ——— Shared stage pieces ——— */
.hca-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.9rem 1.2rem;
  padding-bottom: var(--smart-space-5);
  border-bottom: 1px solid var(--smart-divider, var(--smart-border));
}
.hca-pagehead__title {
  margin: 0;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.hca-pagehead__sub { margin: 0.35rem 0 0; color: var(--smart-text-secondary); max-width: 54ch; font-size: 0.92rem; }
.hca-pagehead__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.hca-card { padding: var(--smart-space-6); display: grid; gap: var(--smart-space-4); align-content: start; }
.hca-card__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-size: 0.98rem;
}
.hca-card__title > svg { color: var(--smart-accent); --smart-icon-size: 1.15rem; }

.hca-loopchip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--smart-space-2) var(--smart-space-4);
  border: 1px dashed var(--smart-border-strong);
  border-radius: var(--smart-radius-control);
  color: var(--smart-text-secondary);
  font-size: 0.8rem;
  background: color-mix(in srgb, var(--smart-surface-muted) 55%, transparent);
  justify-self: start;
}
.hca-loopchip--in-card { justify-self: start; }
.hca-loopchip > svg { --smart-icon-size: 0.95rem; opacity: 0.8; }

.hca-form-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Library shims: alert icon/content written inline */
.smart-alert > svg.smart-icon {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.3rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--smart-surface-muted);
  color: var(--smart-text-secondary);
  margin-top: 0.05rem;
}
.smart-alert--danger > svg.smart-icon { background: var(--smart-danger-soft); color: var(--smart-danger); }
.smart-alert--success > svg.smart-icon { background: var(--smart-success-soft); color: var(--smart-success); }
.smart-alert--warning > svg.smart-icon { background: var(--smart-warning-soft); color: var(--smart-warning); }
.smart-alert > div { display: grid; gap: 0.18rem; min-width: 0; }
.smart-alert p { margin: 0; }
.smart-empty h2 { margin: 0; font-size: var(--smart-font-size-4, 1.25rem); }
.smart-icon--flip-x { scale: -1 1; }
.hc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ——— Home ——— */
.hca-home {
  padding: clamp(1.6rem, 4.5vw, 3.6rem);
  gap: 2.6rem;
  background:
    radial-gradient(90% 70% at 12% -8%, color-mix(in srgb, var(--smart-accent) 9%, transparent), transparent 60%),
    var(--smart-canvas, var(--smart-surface-solid));
}
.hca-home__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--hc-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--smart-accent-strong);
}
.hca-home__eyebrow > svg { --smart-icon-size: 1rem; }
.hca-home__title {
  margin: 0.9rem 0 1rem;
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.025em;
  font-weight: 700;
}
.hca-home__lede {
  margin: 0;
  max-width: 58ch;
  color: var(--smart-text-secondary);
  font-size: 1.02rem;
  line-height: 1.68;
}
.hca-home__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.hca-home__hint { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--smart-text-tertiary); }
.hca-home__section-title {
  margin: 0 0 1rem;
  font-family: var(--hc-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hc-ink-soft);
}
.hca-home__grid { gap: 0.9rem; }
.hca-principle-card { padding: var(--smart-space-5); display: grid; gap: var(--smart-space-1); align-content: start; }
.hca-principle-card__num { font-family: var(--hc-mono); font-size: 0.68rem; color: var(--smart-accent-strong); }
.hca-principle-card__title { font-size: 0.95rem; }
.hca-principle-card__line { margin: 0; color: var(--smart-text-secondary); font-size: 0.84rem; line-height: 1.55; }
.hca-principle-card--cta { text-align: start; text-decoration: none; color: var(--smart-accent-strong); gap: 0.55rem; }
.hca-principle-card--cta > svg { --smart-icon-size: 1.5rem; }
.hca-principle-card--cta .hca-principle-card__line { color: inherit; opacity: 0.85; }
/* Wrong UX: each clause reads as a right that was never granted */
html[data-world="a"] .hca-principle-card:not(.hca-principle-card--cta) .hca-principle-card__num { color: var(--smart-danger); }
html[data-world="a"] .hca-principle-card:not(.hca-principle-card--cta) .hca-principle-card__title {
  color: var(--smart-text-secondary);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--smart-danger) 60%, transparent);
  text-decoration-thickness: 2px;
}

/* ——— Notice (World A email) ——— */
.hca-email { display: grid; gap: 1rem; }
.hca-email__head {
  display: grid;
  gap: 0.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--smart-divider, var(--smart-border));
}
.hca-email__from { font-family: var(--hc-mono); font-size: 0.72rem; color: var(--smart-text-tertiary); }
.hca-email__subject { font-weight: 650; }
.hca-email__body p { margin: 0; color: var(--smart-text-secondary); max-width: 58ch; line-height: 1.6; }
.hca-email__meta { font-family: var(--hc-mono); font-size: 0.72rem; color: var(--smart-text-tertiary); }
.hca-email__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hca-deadend { animation: hc-rise 0.35s ease; }
@keyframes hc-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ——— Notice (World B) ——— */
/* Mini timeline: own grid — the shared base .hca-timeline__item rule
   (case-file rail layout) must not leak in. */
.hca-timeline--mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.hca-timeline--mini .hca-timeline__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "actor when"
    "what what";
  gap: var(--smart-space-1) var(--smart-space-4);
  padding: var(--smart-space-3) var(--smart-space-4);
  border-inline-start: 3px solid var(--hc-machine);
  border-radius: var(--smart-radius-sm);
  background: var(--smart-surface-muted);
}
.hca-timeline--mini .hca-timeline__item::before { display: none; }
.hca-timeline--mini .hca-timeline__item[data-actor]:last-child { border-inline-start-color: var(--smart-danger); }
.hca-timeline--mini .hca-timeline__actor {
  grid-area: actor;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
}
.hca-timeline--mini .hca-timeline__actor > svg { --smart-icon-size: 0.95rem; }
.hca-timeline--mini .hca-timeline__when { grid-area: when; align-self: center; margin-inline-start: 0; }
.hca-timeline--mini .hca-timeline__what { grid-area: what; margin: 0; max-width: 62ch; }

.hca-gauge { display: grid; gap: 0.85rem; margin-block: 0.4rem 0.2rem; }
.hca-gauge__bar { position: relative; height: 0.85rem; border-radius: var(--smart-radius-full); background: var(--smart-surface-muted); }
.hca-gauge__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--hc-fill, 71%);
  border-radius: var(--smart-radius-full);
  background: linear-gradient(90deg, color-mix(in srgb, var(--hc-machine) 45%, transparent), var(--hc-machine));
}
.hca-gauge__tick {
  position: absolute;
  inset-inline-start: var(--hc-mark, 70%);
  top: -0.4rem;
  bottom: -0.4rem;
  width: 2px;
  border-radius: 1px;
  transform: translateX(-50%);
}
.hca-gauge__tick[data-tone="danger"] { background: var(--smart-danger); }
.hca-gauge__tick[data-tone="success"] { background: var(--smart-success); }
.hca-gauge__legend {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-family: var(--hc-mono);
  font-size: 0.68rem;
}
.hca-gauge__key { display: inline-flex; align-items: center; gap: 0.45rem; }
.hca-gauge__key::before {
  content: "";
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 2px;
  background: var(--smart-surface-active);
}
.hca-gauge__key[data-tone="danger"] { color: var(--smart-danger); }
.hca-gauge__key[data-tone="danger"]::before { background: var(--smart-danger); }
.hca-gauge__key[data-tone="success"] { color: var(--smart-success); }
.hca-gauge__key[data-tone="success"]::before { background: var(--smart-success); }
.hca-gauge__read { margin: 0; font-size: 0.88rem; color: var(--smart-text-secondary); }
.hca-gauge__read strong { color: var(--smart-text); }

details.smart-alert { cursor: pointer; }
details.smart-alert summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  list-style-position: inside;
}
details.smart-alert summary > svg { color: var(--smart-accent); --smart-icon-size: 1.1rem; }
details.smart-alert[open] summary { margin-bottom: 0.7rem; }
.hca-policy__body {
  border-top: 1px dashed var(--smart-border);
  padding-top: 0.85rem;
  font-size: 0.89rem;
  color: var(--smart-text-secondary);
  line-height: 1.6;
}
.hca-policy__body blockquote {
  margin: 0 0 0.65rem;
  padding: 0.7rem 0.95rem;
  border-inline-start: 3px solid var(--smart-border-strong);
  border-radius: var(--smart-radius-sm);
  background: var(--smart-surface-muted);
  font-style: italic;
}

.hca-impact { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }
.hca-impact li { display: flex; gap: 0.9rem; align-items: flex-start; }
.hca-impact li > svg { color: var(--smart-accent); --smart-icon-size: 1.25rem; flex: none; margin-top: 0.15rem; }
.hca-impact strong { display: block; font-size: 0.94rem; }
.hca-impact li span { display: block; color: var(--smart-text-secondary); font-size: 0.85rem; line-height: 1.5; margin-top: 0.15rem; }

.hca-doors { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.hca-door { display: grid; gap: var(--smart-space-2); text-align: start; padding: var(--smart-space-5); text-decoration: none; }
.hca-door strong { font-size: 0.93rem; }
.hca-door span { color: var(--smart-text-secondary); font-size: 0.82rem; line-height: 1.5; }
.hca-promise {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding-top: 0.95rem;
  border-top: 1px dashed var(--smart-border);
  color: var(--smart-accent-strong);
  font-size: 0.88rem;
}
.hca-promise > svg { --smart-icon-size: 1.05rem; flex: none; }

/* ——— Case file ——— */
.hca-document { display: grid; gap: 1.7rem; }
.hca-document__stamp {
  margin: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--smart-border-strong);
  font-family: var(--hc-mono);
  font-size: 0.72rem;
  color: var(--smart-text-tertiary);
}
.hca-document__h {
  margin: 0 0 0.95rem;
  font-family: var(--hc-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--hc-ink-soft);
}
.hca-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hca-timeline__item { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.9rem; position: relative; padding-bottom: 1.35rem; }
.hca-timeline__item:last-child { padding-bottom: 0; }
.hca-timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.05rem;
  top: 2.3rem;
  bottom: -0.1rem;
  width: 2px;
  background: var(--smart-divider, var(--smart-border));
}
.hca-timeline__item:last-child::before { display: none; }
.hca-timeline__rail {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--smart-border);
  background: var(--smart-canvas-raised, var(--smart-surface-solid));
  z-index: 1;
}
.hca-timeline__rail > svg { --smart-icon-size: 1.05rem; }
.hca-timeline__item[data-actor="machine"] .hca-timeline__rail {
  color: var(--hc-machine);
  border-color: color-mix(in srgb, var(--hc-machine) 45%, transparent);
  background: color-mix(in srgb, var(--hc-machine) 10%, transparent);
}
.hca-timeline__item[data-actor="human"] .hca-timeline__rail {
  color: var(--hc-human);
  border-color: color-mix(in srgb, var(--hc-human) 45%, transparent);
  background: color-mix(in srgb, var(--hc-human) 10%, transparent);
}
.hca-timeline__item[data-actor="you"] .hca-timeline__rail {
  color: var(--smart-text-secondary);
}
.hca-timeline__body { min-width: 0; }
.hca-timeline__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.hca-timeline__actor { font-weight: 650; font-size: 0.92rem; }
.hca-badge-actor {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.6rem;
  border-radius: var(--smart-radius-full);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hca-badge-actor > svg { --smart-icon-size: 0.8rem; }
.hca-badge-actor[data-actor="machine"] {
  color: var(--hc-machine);
  background: color-mix(in srgb, var(--hc-machine) 12%, transparent);
}
.hca-badge-actor[data-actor="human"] {
  color: var(--hc-human-strong);
  background: color-mix(in srgb, var(--hc-human) 14%, transparent);
}
.hca-badge-actor[data-actor="you"] {
  color: var(--smart-text-secondary);
  background: var(--smart-surface-muted);
}
.hca-timeline__when {
  margin-inline-start: auto;
  font-family: var(--hc-mono);
  font-size: 0.7rem;
  color: var(--smart-text-tertiary);
}
.hca-timeline__what { margin: 0.4rem 0 0; font-size: 0.87rem; color: var(--smart-text-secondary); line-height: 1.55; max-width: 56ch; }

.hca-evidence { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hca-evidence__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-control);
  background: var(--smart-surface);
  font-family: var(--hc-mono);
  font-size: 0.76rem;
}
.hca-evidence__chip > svg { --smart-icon-size: 0.9rem; color: var(--smart-text-tertiary); }
.hca-evidence__chip--note { font-family: inherit; color: var(--smart-text-secondary); }

/* ——— Appeal ——— */
.hca-flag-restated { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--smart-text); }
.hca-flag-hint { margin: 0; font-size: 0.82rem; color: var(--smart-text-tertiary); }
.hca-reviewlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; font-size: 0.9rem; }
.hca-reviewlist li { display: flex; gap: 0.6rem; align-items: baseline; }
.hca-reviewlist svg { color: var(--smart-accent); --smart-icon-size: 1rem; flex: none; }
.hca-sent__row { display: flex; flex-wrap: wrap; gap: var(--smart-space-5); align-items: center; }
.hca-sent__row > div:not(.hca-sla-ring) { flex: 1 1 18rem; min-width: 0; }
@media (max-width: 30rem) {
  .hca-sent__row > .hca-sla-ring { margin-inline: auto; }
}
.hca-sla-ring {
  --smart-progress-size: 6.8rem;
  --smart-progress-thickness: 0.55rem;
  flex: none;
}
.hca-sla-ring .smart-progress-ring__value { font-family: var(--hc-mono); font-size: 0.82rem; }
.hca-prev { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 0.85rem; color: var(--smart-text-secondary); }
.hca-prev li { padding: 0.6rem 0; border-bottom: 1px dashed var(--smart-border); }

/* ——— Status ——— */
.hca-pipeline__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
@media (max-width: 40rem) { .hca-pipeline__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hca-pipeline__list li {
  display: grid;
  gap: 0.3rem;
  justify-items: start;
  padding: var(--smart-space-3) var(--smart-space-4);
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-md);
  background: var(--smart-surface);
  font-size: 0.82rem;
  font-weight: 600;
}
.hca-pipeline__list li time { font-family: var(--hc-mono); font-size: 0.68rem; font-weight: 400; color: var(--smart-text-tertiary); }
.hca-pipeline__list li > svg { --smart-icon-size: 1.1rem; }
.hca-pipeline__list .is-done { border-color: color-mix(in srgb, var(--smart-success) 30%, transparent); color: var(--smart-success); background: color-mix(in srgb, var(--smart-success) 7%, transparent); }
.hca-pipeline__list .is-current {
  border-color: color-mix(in srgb, var(--smart-accent) 45%, transparent);
  color: var(--smart-accent-strong);
  background: var(--smart-accent-softer);
  animation: hc-breathe 2.6s ease-in-out infinite;
}
@keyframes hc-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--smart-accent) 22%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--smart-accent) 0%, transparent); }
}
.hca-pipeline__list .is-todo { border-style: dashed; color: var(--smart-text-tertiary); font-weight: 500; }
.hca-status-grid { gap: 0.9rem; margin-top: 0.2rem; }
.hca-queue__num { font-size: clamp(2.6rem, 5vw, 3.4rem) !important; color: var(--smart-accent-strong); }
.hca-sla__row { display: flex; gap: 1.1rem; align-items: center; }
.hca-sla__note { margin: 0; font-size: 0.84rem; color: var(--smart-text-secondary); line-height: 1.55; }
.hca-reviewer__unassigned { display: grid; gap: 0.7rem; }
.hca-reviewer__pending { margin: 0; font-size: 0.87rem; color: var(--smart-text-secondary); }
.hca-reviewer__card { display: flex; gap: 1rem; align-items: center; animation: hc-rise 0.5s ease; }
.hca-reviewer__name { display: block; font-size: 1.05rem; }
.hca-reviewer__role { display: block; color: var(--smart-text-secondary); font-size: 0.85rem; margin-top: 0.15rem; }
.hca-reviewer__meta { display: block; font-family: var(--hc-mono); font-size: 0.7rem; color: var(--smart-text-tertiary); margin-top: 0.35rem; }
.hca-next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; font-size: 0.87rem; color: var(--smart-text-secondary); }
.hca-next__list li { display: flex; gap: 0.6rem; align-items: baseline; }
.hca-next__list svg { color: var(--smart-accent); --smart-icon-size: 1rem; flex: none; }
.hca-a-metrics { gap: 0.9rem; margin-top: 0.2rem; }
.hca-a-futility { margin-top: 0.2rem; }
.hca-live-dot::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  margin-inline-start: 0.4rem;
  animation: hc-blink 1.6s ease-in-out infinite;
}
@keyframes hc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ——— Chat ——— */
.hca-chat { height: clamp(30rem, 64vh, 39rem); }
.hca-chat__chip { margin-inline-start: auto; }
.hca-chips { display: flex; flex-wrap: wrap; gap: var(--smart-space-2); padding: var(--smart-space-4) var(--smart-space-4) var(--smart-space-1); }
.hca-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-full);
  background: var(--smart-surface);
  color: var(--smart-text);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hca-chip:hover { border-color: var(--smart-accent); background: var(--smart-accent-softer); }
.hca-composer-wrap { padding: var(--smart-space-4) var(--smart-space-4) var(--smart-space-5); border-top: 1px solid var(--smart-divider, var(--smart-border)); }
.hca-composer-note {
  margin: 0.65rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--smart-text-tertiary);
}
.hca-brief {
  max-width: 34rem;
  border: 1px solid color-mix(in srgb, var(--smart-accent) 35%, transparent);
  border-radius: var(--smart-radius-md);
  overflow: clip;
  background: var(--smart-surface-solid, var(--smart-surface));
}
.hca-brief__head {
  display: flex;
  gap: var(--smart-space-3);
  align-items: center;
  padding: var(--smart-space-4);
  background: var(--smart-accent-softer);
  border-bottom: 1px solid color-mix(in srgb, var(--smart-accent) 25%, transparent);
}
.hca-brief__head > svg { color: var(--smart-accent-strong); --smart-icon-size: 1.3rem; flex: none; }
.hca-brief__head strong { display: block; font-size: 0.92rem; }
.hca-brief__head span { display: block; font-size: 0.72rem; color: var(--smart-text-secondary); margin-top: 0.15rem; }
.hca-brief__body { margin: 0.35rem 0; }
.hca-brief__body > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--smart-space-3);
  padding: var(--smart-space-2) var(--smart-space-4);
  font-size: 0.83rem;
}
.hca-brief__body > div + div { border-top: 1px dashed var(--smart-border); }
.hca-brief__body dt {
  font-family: var(--hc-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hc-ink-soft);
  padding-top: 0.2rem;
}
.hca-brief__body dd { margin: 0; line-height: 1.55; }
@media (max-width: 34rem) {
  .hca-brief__body > div { grid-template-columns: 1fr; gap: 0.25rem; }
}
.hca-msg-system {
  margin-inline: auto;
  padding: 0.35rem 0.9rem;
  border: 1px dashed var(--smart-border-strong);
  border-radius: var(--smart-radius-full);
  font-family: var(--hc-mono);
  font-size: 0.72rem;
  color: var(--smart-text-tertiary);
  background: var(--smart-surface-muted);
  text-align: center;
}

/* ——— Resolution ——— */
.hca-decision { border-color: color-mix(in srgb, var(--smart-success) 30%, transparent); padding-bottom: 1.7rem; }
.hca-decision__head {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--smart-border);
}
.hca-decision__name { display: block; font-size: 1.12rem; }
.hca-decision__role { display: block; color: var(--smart-text-secondary); font-size: 0.84rem; margin-top: 0.2rem; }
.hca-decision__body { padding-top: 1.05rem; display: grid; gap: 0.85rem; max-width: 62ch; font-size: 0.94rem; line-height: 1.68; }
.hca-decision__body p { margin: 0; color: var(--smart-text); }
.hca-decision__verdict { display: flex; align-items: center; gap: 0.5rem; color: var(--smart-success); font-weight: 600; }
.hca-decision__verdict > svg { --smart-icon-size: 1.15rem; }
.hca-decision__reply {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--smart-text-secondary);
  border-top: 1px dashed var(--smart-border);
  padding-top: 0.9rem;
  margin-top: 0.2rem;
}
.hca-decision__reply > svg { --smart-icon-size: 1rem; }
.hca-restore { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.hca-restore li {
  display: flex;
  gap: var(--smart-space-3);
  align-items: center;
  padding: var(--smart-space-4) var(--smart-space-5);
  border: 1px solid var(--smart-border);
  border-radius: var(--smart-radius-md);
  background: var(--smart-surface);
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.hca-restore li.is-shown { opacity: 1; transform: none; }
.hca-restore li > svg:first-child { color: var(--smart-accent); --smart-icon-size: 1.2rem; flex: none; }
.hca-restore li > div { flex: 1; min-width: 0; }
.hca-restore strong { display: block; font-size: 0.92rem; }
.hca-restore li span:not(.hca-restore__check) { display: block; font-size: 0.8rem; color: var(--smart-text-secondary); margin-top: 0.15rem; }
.hca-restore__check { color: var(--smart-success); opacity: 0.2; transition: opacity 0.45s ease 0.15s; display: inline-flex; }
.hca-restore__check > svg { --smart-icon-size: 1.35rem; }
.hca-restore li.is-shown .hca-restore__check { opacity: 1; }
.hca-scoreboard tbody td:last-child strong { color: var(--smart-success); }
.hca-scoreboard th[scope="row"] { font-weight: 500; }

/* ——— Pager & footer ——— */
.hc-stage-pager { display: flex; justify-content: space-between; gap: 0.8rem; margin-top: 1.1rem; }
.hc-pager__link { text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
@media (max-width: 40rem) {
  .hc-stage-pager { flex-direction: column-reverse; }
  .hc-stage-pager .hc-pager__link { justify-content: center; }
}
.hc-footer {
  margin-top: auto;
  border-top: 1px solid var(--hc-paper-line);
  padding: 2.3rem 1.25rem 2.9rem;
  text-align: center;
  display: grid;
  gap: 0.8rem;
}
.hc-footer__line {
  margin: 0;
  font-family: var(--hc-editorial);
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  color: var(--smart-text);
}
.hc-footer__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  color: var(--hc-ink-soft);
  font-size: 0.74rem;
}

/* ——— Rail (case study) ——— */
.hc-rail {
  position: sticky;
  top: 7.4rem;
  display: grid;
  gap: 1.35rem;
  padding: var(--smart-space-6) var(--smart-space-6) var(--smart-space-5);
  border: 1px solid var(--hc-paper-line);
  border-radius: var(--smart-radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, light-dark(#fffdf8, #201f26) 65%, transparent), transparent 42%),
    light-dark(#faf7f0, #1a191f);
  box-shadow: 0 14px 40px -26px color-mix(in srgb, black 35%, transparent);
  max-height: calc(100dvh - 8.9rem);
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (max-width: 68.75rem) {
  .hc-rail { position: static; max-height: none; overflow: visible; }
}
.hc-rail__kicker {
  margin: 0;
  font-family: var(--hc-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--hc-human-strong);
}
html[data-world="a"] .hc-rail__kicker { color: var(--smart-text-secondary); }
.hc-rail__title {
  margin: 0.5rem 0 0;
  font-family: var(--hc-editorial);
  font-size: clamp(1.5rem, 2.2vw, 1.8rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.hc-rail__intro { padding-bottom: 1.2rem; border-bottom: 1px solid var(--hc-paper-line); }
.hc-rail__intro p { margin: 0.6rem 0 0; font-size: 0.92rem; line-height: 1.68; color: var(--smart-text-secondary); }
.hc-rail__intro p:first-child { margin-top: 0; }
.hc-rail__intro em { font-family: var(--hc-editorial); }
.hc-rail__block { display: grid; gap: 0.55rem; }
.hc-rail__block-label {
  margin: 0;
  font-family: var(--hc-mono);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--hc-ink-soft);
}
.hc-rail__block-body p { margin: 0; font-size: 0.9rem; line-height: 1.68; color: var(--smart-text-secondary); }
.hc-rail__block-body p + p { margin-top: 0.55rem; }
.hc-rail__block-body strong { color: var(--smart-text); }
.hc-rail__block--details { padding-top: 1.1rem; border-top: 1px solid var(--hc-paper-line); }
.hc-rail__block--details ul { margin: 0; padding-inline-start: 1rem; display: grid; gap: 0.5rem; }
.hc-rail__block--details li { font-size: 0.84rem; line-height: 1.6; color: var(--smart-text-secondary); }
.hc-rail__block--details li::marker { color: var(--hc-human); }
.hc-rail__principle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  padding: 1rem 1.05rem;
  border-radius: var(--smart-radius-md);
  background: color-mix(in srgb, var(--hc-human) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--hc-human) 22%, transparent);
}
.hc-rail__principle-num {
  font-family: var(--hc-editorial);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--hc-human);
  line-height: 1;
}
.hc-rail__principle strong { font-size: 0.94rem; }
.hc-rail__principle p { margin: 0.3rem 0 0; font-size: 0.83rem; line-height: 1.6; color: var(--smart-text-secondary); }
.hc-rail__foot { margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--hc-paper-line); font-size: 0.76rem; line-height: 1.6; color: var(--hc-ink-soft); font-style: italic; font-family: var(--hc-editorial); }

/* ——— Motion & print ——— */
@media (prefers-reduced-motion: reduce) {
  .hc-body, .hc-app, .hca-deadend, .hca-reviewer__card, .hca-restore li, .hca-pipeline__list .is-current, .hca-live-dot::after {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .hc-chrome, .hc-journey, .hc-rail-col, .hc-footer, .hc-window__bar, .hc-app__bar,
  .hc-stage-pager, .hc-stage-counter, .hc-no-print, .hca-pagehead { display: none !important; }
  .hc-body { background: #fff; }
  .hc-split { display: block; width: auto; padding: 0; }
  .hc-window { border: 0; box-shadow: none; border-radius: 0; }
  body * { visibility: hidden; }
  .hca-document, .hca-document * { visibility: visible; }
  .hca-document { position: absolute; inset: 0; padding: 0; border: 0; background: #fff; }
  .hca-document__stamp { color: #555; }
}