/* ==========================================================================
   WAYA prototype — for Alongside Labs
   Mobile first. One stylesheet, no framework.

   Colour system, and the one decision worth knowing about:

   The Alongside mark is terracotta, which sits in the same hue family as a
   conventional "urgent" red. In a demo whose third moment is an escalation
   queue, that collision would cost real legibility. So:

     - terracotta  = BRAND. Logo, active tab, focus ring, participant bubbles.
     - near-black  = ACTION. Primary buttons, matching the wordmark.
     - crimson     = URGENT. Pushed to ~342deg hue, clearly off-brand-hue.
     - amber       = HIGH.  green = verified/real.  slate = routine.

   Terracotta therefore never signals a status, and no status ever borrows the
   brand colour.
   ========================================================================== */

:root {
  /* brand */
  --terracotta: #c25a45;
  --terracotta-deep: #a4462f;
  --terracotta-soft: #fbf0ed;
  --terracotta-line: #eecfc7;

  /* ink + surface (warm neutrals, to sit with terracotta) */
  --ink: #1b1d20;
  --ink-2: #4a5158;
  --ink-3: #7a828b;
  --ink-4: #a2a9b0;
  --line: #e8e7e4;
  --line-2: #d6d5d1;
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #fdfcfb;

  /* status — deliberately off the brand hue */
  --urgent: #b01b45;
  --urgent-soft: #fdeef2;
  --urgent-line: #f3ccd8;
  --high: #a06a00;
  --high-soft: #fdf5e6;
  --high-line: #eddcb4;
  --routine: #3a6b96;
  --routine-soft: #eef4f9;
  --routine-line: #cbdeed;
  --verified: #1e7a54;
  --verified-soft: #ebf6f1;
  --verified-line: #bfe0d0;
  --violet: #6d4a99;
  --violet-soft: #f4f0fa;
  --violet-line: #ddd0ee;

  --r-sm: 7px;
  --r: 11px;
  --r-lg: 16px;
  --r-xl: 22px;

  --sh-sm: 0 1px 2px rgba(27, 29, 32, .05);
  --sh: 0 1px 3px rgba(27, 29, 32, .05), 0 4px 14px rgba(27, 29, 32, .05);
  --sh-lg: 0 2px 6px rgba(27, 29, 32, .06), 0 12px 34px rgba(27, 29, 32, .09);

  --display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* The hidden attribute must beat any display rule further down this file.
   Without this, `.modal { display: grid }` silently defeats [hidden] — the
   framing panel renders on load and its close button appears to do nothing,
   because setting .hidden = true changes nothing the cascade respects. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0 0 .35em;
  line-height: 1.2;
  letter-spacing: -.015em;
}
h1 { font-size: 1.65rem; font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 650; }
h4 {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
}
p { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }
em { font-style: normal; font-weight: 600; color: var(--ink); }

.placeholder { color: var(--ink-4); font-size: .88rem; }
.muted { color: var(--ink-3); font-size: .88rem; }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

.eyebrow {
  display: inline-block;
  font-size: .68rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--terracotta);
  margin-bottom: .45rem;
}

/* ---------- the Alongside mark ----------
   Rebuilt in CSS rather than embedded as an image: it scales with font-size,
   stays crisp, and needs no asset. Swap in the real SVG before this goes to
   anyone outside the team — this is a faithful reconstruction, not the file. */
.alongside-mark {
  display: inline-flex;
  align-items: center;
  gap: .34em;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
}
.alongside-mark .dot {
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: var(--terracotta);
  flex: none;
}
.alongside-mark.small { font-size: .92rem; }
.alongside-mark.on-dark { color: #f7f5f3; }

/* ---------- access gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: var(--ink);
}
.gate-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 2rem 1.9rem 1.6rem;
  max-width: 27rem;
  width: 100%;
  box-shadow: var(--sh-lg);
}
.gate-brand { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1.2rem; }
.gate-product { font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: .01em; }
.gate-by {
  display: inline-flex;
  align-items: center;
  gap: .34em;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.03em;
  color: var(--ink-2);
}
.gate-by .dot { width: .6em; height: .6em; border-radius: 50%; background: var(--terracotta); }
.gate-card h1 { font-size: 1.25rem; margin-bottom: .5rem; }
.gate-card p { font-size: .89rem; color: var(--ink-2); margin-bottom: 1.1rem; }
.gate-label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  margin-bottom: .3rem;
}
.gate-card input {
  width: 100%;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .1em;
  padding: .6rem .75rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  margin-bottom: .7rem;
}
.gate-card input:focus { background: var(--surface); border-color: var(--ink-4); outline: none; }
.gate-card .btn-primary { width: 100%; }
.gate-foot {
  font-size: .76rem !important;
  color: var(--ink-4) !important;
  border-top: 1px solid var(--line);
  padding-top: .9rem;
  margin: 1.1rem 0 0 !important;
}

/* ---------- prototype strip ---------- */
.proto-strip {
  background: var(--ink);
  color: #d8d6d2;
  padding: .5rem .95rem;
  font-size: .78rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  position: sticky;
  top: 0;
  z-index: 60;
}
.proto-chip {
  background: var(--terracotta);
  color: #fff;
  padding: .12rem .5rem;
  border-radius: 100px;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  flex: none;
}
.proto-text { min-width: 0; }
.proto-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #f2f0ee;
  border-radius: 100px;
  padding: .18rem .65rem;
  font: inherit;
  font-size: .74rem;
  font-weight: 500;
  cursor: pointer;
  flex: none;
}
.proto-btn:hover { background: rgba(255, 255, 255, .16); }

/* ---------- header ---------- */
.site-head {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 32px;
  z-index: 50;
}
.head-top {
  padding: .8rem .95rem .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
}

.lockup { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.lockup-product { display: flex; flex-direction: column; line-height: 1.1; }
.product-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: .01em;
}
.product-tag {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ink-3);
  font-weight: 550;
}
.lockup-div { width: 1px; height: 1.9rem; background: var(--line-2); flex: none; }
.lockup-by { display: flex; flex-direction: column; line-height: 1.15; }
.by-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--ink-4);
  font-weight: 600;
  padding-left: .05rem;
}
.head-actions { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; }

/* ---------- view tabs ---------- */
.views {
  display: flex;
  gap: .2rem;
  padding: 0 .95rem;
  max-width: 1440px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.views::-webkit-scrollbar { display: none; }
.view-tab {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: .55rem .7rem .6rem;
  font: inherit;
  cursor: pointer;
  /* Third column is the badge. It used to be absolutely positioned, which sat
     it on top of a long label ("RAIN WORKER") and clipped the text. Giving it
     a real grid track means the tab widens to fit it instead. */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 .45rem;
  text-align: left;
  color: var(--ink-3);
  flex: none;
  align-items: center;
}
.view-tab:hover { color: var(--ink); }
.view-tab.is-active { border-bottom-color: var(--terracotta); color: var(--ink); }
.tab-num {
  grid-row: 1 / 3;
  align-self: center;
  background: var(--line);
  color: var(--ink-3);
  border-radius: 50%;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--display);
}
.view-tab.is-active .tab-num { background: var(--terracotta); color: #fff; }
.tab-label { font-size: .88rem; font-weight: 600; font-family: var(--display); }
.tab-sub { font-size: .66rem; color: var(--ink-4); letter-spacing: .02em; }
.view-tab.is-active .tab-sub { color: var(--terracotta); }
.badge {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  background: var(--urgent);
  color: #fff;
  border-radius: 100px;
  min-width: 1.15rem;
  padding: 0 .32rem;
  font-size: .66rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.15rem;
  margin-left: .1rem;
}

/* ---------- layout ---------- */
main { padding: 1.4rem .95rem 4rem; max-width: 1440px; margin: 0 auto; }
.view { display: none; }
.view.is-active { display: block; animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .view.is-active { animation: none; }
}

.view-intro { margin-bottom: 1.3rem; max-width: 64ch; }
.view-intro h1 { margin-bottom: .35rem; }
.view-intro p { color: var(--ink-2); font-size: .94rem; }

.split { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 1040px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .split-provider { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .split-worker { grid-template-columns: minmax(0, 390px) minmax(0, 1fr); }
}
.pane { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: var(--sh-sm);
  min-width: 0;
}
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}
.card-head h3 { margin: 0; display: flex; align-items: center; gap: .45rem; }
.card-note { font-size: .81rem; color: var(--ink-3); margin-bottom: .8rem; line-height: 1.5; }
.inline-actions { display: flex; gap: .4rem; align-items: center; }

.hdot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.hdot-brand { background: var(--terracotta); }
.hdot-amber { background: var(--high); }
.hdot-violet { background: var(--violet); }

.tag-real {
  font-size: .63rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--verified);
  background: var(--verified-soft);
  border: 1px solid var(--verified-line);
  border-radius: 100px;
  padding: .1rem .5rem;
  flex: none;
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 550;
  border-radius: var(--r-sm);
  padding: .48rem .85rem;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { background: var(--bg); border-color: var(--ink-4); }
.btn:active { transform: translateY(.5px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-sm { font-size: .8rem; padding: .36rem .68rem; }
.ico { width: .82em; height: .82em; flex: none; }

/* Action colour is the wordmark black, not the brand terracotta. */
.btn-primary { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #303338; border-color: #303338; }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink-2); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-danger { background: var(--urgent); border-color: var(--urgent); color: #fff; font-weight: 600; }
.btn-danger:hover { background: #97173b; border-color: #97173b; }
.btn-chip {
  border-radius: 100px;
  font-size: .78rem;
  padding: .3rem .68rem;
  background: var(--bg);
  border-color: var(--line);
  color: var(--ink-2);
}
.btn-chip:hover { background: var(--terracotta-soft); border-color: var(--terracotta-line); color: var(--terracotta-deep); }
.btn-send {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  padding: .48rem .7rem;
  flex: none;
}
.btn-send:hover { background: #303338; border-color: #303338; }

/* ---------- channel toggle ----------
   SMS and WhatsApp are not just skins. SMS is billed per 160-character
   segment, WhatsApp is not, so the constraint on a reply genuinely differs —
   which is why the note beside the toggle changes with it. */
.channel-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .7rem;
}
.chan-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .15rem;
  flex: none;
}
.chan-btn {
  font: inherit;
  font-size: .8rem;
  font-weight: 550;
  border: none;
  background: none;
  color: var(--ink-3);
  border-radius: 100px;
  padding: .28rem .8rem;
  cursor: pointer;
}
.chan-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.chan-btn[data-channel="whatsapp"].is-active { color: #0b7a5f; }
.chan-note { font-size: .72rem; color: var(--ink-4); font-family: var(--mono); margin-left: auto; }

/* ---------- enrolment ---------- */
.enrol {
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: .7rem .85rem;
  margin-bottom: .7rem;
}
.enrol-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .5rem; }
.enrol-head h4 { margin: 0; }
.enrol-row { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; }
.enrol-row label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.enrol-row select {
  width: auto;
  min-width: 7rem;
  font-size: .84rem;
  padding: .3rem .5rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.enrol-note { font-size: .72rem; color: var(--ink-4); flex: 1 1 14rem; }
.enrol-fact {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
}
.enrol-fact strong {
  font-family: var(--mono);
  font-size: .92rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
}
/* Enrolment prompts are scripted operational questions, not counselling.
   A dashed edge marks them as a different kind of message in the thread. */
.bubble-enrol { border: 1px dashed var(--line-2); }

/* ---------- WhatsApp skin ---------- */
.phone[data-active-channel="whatsapp"] .phone-head { background: #0b7a5f; }
.phone[data-active-channel="whatsapp"] .phone-dot { background: #7fe0b6; }
.phone[data-active-channel="whatsapp"] .thread { background: #ece5dd; }
.phone[data-active-channel="whatsapp"] .bubble-in { background: #d6f5c8; color: #10281c; }
.phone[data-active-channel="whatsapp"] .bubble-out { background: #ffffff; color: #10281c; }
.phone[data-active-channel="whatsapp"] .bubble-meta { color: #6d7a72; }
.phone[data-active-channel="whatsapp"] .thread-empty h3,
.phone[data-active-channel="whatsapp"] .thread-empty p { color: #3f4b44; }
.phone[data-active-channel="whatsapp"] .empty-art { color: #a9bfae; }
.phone[data-active-channel="whatsapp"] .suggestions button { background: #fff; border-color: #d8cfc6; }
.phone[data-active-channel="whatsapp"] .btn-send { background: #0b7a5f; border-color: #0b7a5f; }

/* ---------- callback bubble ----------
   Its own treatment because it is the one message carrying a phone number,
   and the number travels worker -> participant only. */
.bubble-callback {
  align-self: flex-start;
  background: var(--violet-soft);
  border: 1px solid var(--violet-line);
  color: #4d3370;
  border-bottom-left-radius: 5px;
}
.bubble-callnum {
  display: block;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .06em;
  margin: .3rem 0 .1rem;
}
.bubble-callused {
  align-self: flex-end;
  background: var(--surface-2);
  border: 1px dashed var(--line-2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: .8rem;
}
.call-action { align-self: flex-start; margin: .1rem 0 .3rem; }

/* ---------- phone ---------- */
.phone {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.phone-head {
  background: var(--ink);
  color: #fff;
  padding: .68rem .95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.phone-id { display: flex; align-items: center; gap: .45rem; }
.phone-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--terracotta); flex: none; }
.phone-title { font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-size: .92rem; }
.phone-meta { font-size: .68rem; color: #9ba1a8; font-family: var(--mono); }

.thread {
  padding: 1rem .9rem;
  min-height: 320px;
  max-height: 54vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--surface-2);
}

.thread-empty { text-align: center; padding: 1.2rem .5rem; }
.empty-art { color: var(--terracotta-line); width: 3rem; margin: 0 auto .6rem; }
.empty-art svg { width: 100%; height: auto; display: block; }
.thread-empty h3 { font-size: 1rem; margin-bottom: .3rem; }
.thread-empty p { font-size: .85rem; color: var(--ink-3); max-width: 34ch; margin: 0 auto .9rem; }

.suggestions { display: flex; flex-direction: column; gap: .4rem; text-align: left; }
.suggestions button {
  font: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: .5rem .7rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  transition: border-color .12s, background .12s;
}
.suggestions button:hover { border-color: var(--terracotta); background: var(--terracotta-soft); }
.sg-q { font-size: .84rem; font-weight: 550; color: var(--ink); }
.sg-why { font-size: .71rem; color: var(--ink-4); }
.suggestions button:hover .sg-why { color: var(--terracotta-deep); }

/* bubbles */
.bubble {
  max-width: 84%;
  padding: .52rem .78rem;
  border-radius: 15px;
  font-size: .89rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  animation: pop .2s ease both;
}
@keyframes pop { from { opacity: 0; transform: translateY(4px) scale(.99); } }
@media (prefers-reduced-motion: reduce) { .bubble { animation: none; } }

/* Participant messages carry the brand colour — the person is the point. */
.bubble-in {
  align-self: flex-end;
  background: var(--terracotta);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.bubble-out {
  align-self: flex-start;
  background: #eeecea;
  color: var(--ink);
  border-bottom-left-radius: 5px;
}
.bubble-referral {
  align-self: flex-start;
  background: var(--verified-soft);
  border: 1px solid var(--verified-line);
  color: #145c3d;
  font-family: var(--mono);
  font-size: .82rem;
  border-bottom-left-radius: 5px;
}
.bubble-handover {
  align-self: flex-start;
  background: var(--high-soft);
  border: 1px solid var(--high-line);
  color: #7a5000;
  border-bottom-left-radius: 5px;
}
.bubble-checkin {
  align-self: flex-start;
  background: var(--routine-soft);
  border: 1px solid var(--routine-line);
  color: #2b5273;
  border-bottom-left-radius: 5px;
}
.bubble-system {
  align-self: center;
  background: #f0efec;
  color: var(--ink-3);
  font-size: .79rem;
  text-align: center;
  border-radius: var(--r);
  max-width: 92%;
}
.bubble-meta {
  font-size: .65rem;
  color: var(--ink-4);
  padding: 0 .35rem;
  font-family: var(--mono);
}
.bubble-meta.right { align-self: flex-end; }
.bubble-meta.left { align-self: flex-start; }
.tag-initiated {
  display: inline-block;
  background: var(--routine);
  color: #fff;
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .08rem .35rem;
  border-radius: 100px;
  margin-right: .35rem;
  font-family: var(--sans);
  font-weight: 700;
  vertical-align: .05em;
}

/* ---------- quick question menu ---------- */
.quickbar {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: .6rem .7rem .1rem;
}
.quickbar-label {
  display: block;
  font-size: .62rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-4);
  margin-bottom: .4rem;
}
.quickbar-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.quick-chip {
  font: inherit;
  font-size: .78rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  border-radius: 100px;
  padding: .28rem .6rem .28rem .35rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.quick-chip:hover { border-color: var(--terracotta); background: var(--terracotta-soft); color: var(--terracotta-deep); }
.quick-num {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  width: 1.15rem;
  height: 1.15rem;
  display: grid;
  place-items: center;
  flex: none;
}
.quick-chip:hover .quick-num { border-color: var(--terracotta); color: var(--terracotta-deep); }
.phone[data-active-channel="whatsapp"] .quickbar { background: #f4f0ea; }

.composer { display: flex; gap: .45rem; padding: .65rem; border-top: 1px solid var(--line); background: var(--surface); }
.composer input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: .89rem;
  padding: .5rem .75rem;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: var(--bg);
}
.composer input:focus { background: var(--surface); border-color: var(--ink-4); outline: none; }
.composer-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  padding: 0 .9rem .6rem;
  font-size: .67rem;
  color: var(--ink-4);
  font-family: var(--mono);
  background: var(--surface);
}

.typing { color: var(--ink-3); font-size: .84rem; align-self: flex-start; padding: .35rem .55rem; display: flex; align-items: center; gap: .4rem; }
.spinner {
  display: inline-block;
  width: .82rem;
  height: .82rem;
  border: 2px solid var(--line-2);
  border-top-color: var(--terracotta);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- demo clock ----------
   Deliberately styled as scaffolding rather than as another card in the
   participant's column. It sits on that screen because that is where its effect
   shows up, but it is a control for whoever is running the demo — no
   participant and no RAIN WORKER has anything like it. A dashed border and a
   neutral ground say "this is not part of the product" without a paragraph. */
.card-clock {
  background: var(--surface-2);
  border-style: dashed;
  border-color: var(--line-2);
  box-shadow: none;
}
.clock-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.clock-head h3 { margin-bottom: 0; }
.clock-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.tag-scaffold {
  font-size: .62rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: 100px;
  padding: .1rem .5rem;
}
.clock-dial {
  flex: none;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: .4rem .7rem;
  min-width: 3.7rem;
}
.clock-dial strong { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--ink-2); }
.clock-dial span { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.time-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.due-list { margin-top: .7rem; }
.due-item {
  background: var(--routine-soft);
  border: 1px solid var(--routine-line);
  border-radius: var(--r-sm);
  padding: .35rem .6rem;
  margin-bottom: .35rem;
  color: #2b5273;
  font-size: .82rem;
  font-weight: 550;
}

/* ---------- grounding passages ---------- */
.passage {
  border: 1px solid var(--line);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--r-sm);
  padding: .6rem .75rem;
  margin-bottom: .5rem;
  background: var(--surface-2);
}
.passage-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; margin-bottom: .2rem; }
.passage-topic { font-weight: 600; font-size: .85rem; font-family: var(--display); }
.passage-score {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--terracotta-deep);
  background: var(--terracotta-soft);
  border-radius: 100px;
  padding: .05rem .4rem;
  flex: none;
}
.passage-src { font-size: .72rem; color: var(--ink-3); margin-bottom: .35rem; }
.passage-text { font-size: .82rem; color: var(--ink-2); line-height: 1.55; }
.passage-terms { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .25rem; }
.term {
  background: var(--terracotta-soft);
  color: var(--terracotta-deep);
  border: 1px solid var(--terracotta-line);
  border-radius: 100px;
  padding: .04rem .42rem;
  font-size: .67rem;
  font-family: var(--mono);
}
.flag-illustrative {
  display: inline-block;
  background: var(--high-soft);
  color: var(--high);
  border: 1px solid var(--high-line);
  font-size: .63rem;
  padding: .02rem .38rem;
  border-radius: 100px;
  margin-left: .35rem;
  font-weight: 600;
}
.boundary-banner {
  background: var(--high-soft);
  border: 1px solid var(--high-line);
  color: #7a5000;
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  font-size: .84rem;
  margin-bottom: .6rem;
  line-height: 1.5;
}

/* ---------- classifier layers ---------- */
.layer {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .6rem .75rem;
  margin-bottom: .5rem;
  background: var(--surface-2);
}
.layer-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.layer-name { font-weight: 600; font-size: .8rem; font-family: var(--display); }
.verdict-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .65rem; }

.pill {
  border-radius: 100px;
  padding: .14rem .6rem;
  font-size: .73rem;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
}
.pill-fired { background: var(--urgent-soft); border-color: var(--urgent-line); color: var(--urgent); }
.pill-clear { background: var(--verified-soft); border-color: var(--verified-line); color: var(--verified); }
.pill-urgent { background: var(--urgent-soft); border-color: var(--urgent-line); color: var(--urgent); }
.pill-high { background: var(--high-soft); border-color: var(--high-line); color: var(--high); }
.pill-routine { background: var(--routine-soft); border-color: var(--routine-line); color: var(--routine); }
.pill-neutral { background: var(--bg); border-color: var(--line-2); color: var(--ink-2); }
.pill-arm { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet); font-family: var(--mono); font-size: .71rem; }

.rationale { font-size: .82rem; color: var(--ink-2); font-style: italic; line-height: 1.5; }
.rule-note { font-size: .8rem; color: var(--urgent); font-weight: 500; }

/* ---------- assignment ---------- */
.assign-row {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.assign-row:last-child { border-bottom: none; }
.assign-time { font-family: var(--mono); font-size: .69rem; color: var(--ink-4); }
.order-proof {
  background: var(--verified-soft);
  border: 1px solid var(--verified-line);
  color: #145c3d;
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  font-size: .8rem;
  margin-top: .6rem;
  line-height: 1.5;
}

/* ---------- worker queue ---------- */
.case-item {
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  padding: .65rem .8rem;
  margin-bottom: .5rem;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .12s, background .12s;
}
.case-item:hover { border-color: var(--ink-4); }
.case-item.is-selected { background: var(--terracotta-soft); border-color: var(--terracotta); }
.case-item.p-urgent { border-left-color: var(--urgent); }
.case-item.p-high { border-left-color: var(--high); }
.case-item.p-routine { border-left-color: var(--routine); }
.case-top { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.case-id { font-family: var(--mono); font-size: .71rem; color: var(--ink-3); }
.case-excerpt { font-size: .85rem; color: var(--ink-2); line-height: 1.5; }
.case-reasons { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .4rem; }
.reason-tag {
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: .67rem;
  border-radius: 100px;
  padding: .04rem .42rem;
  font-family: var(--mono);
}
.callback-box {
  border: 1px dashed var(--violet-line);
  background: var(--violet-soft);
  border-radius: var(--r-sm);
  padding: .7rem .8rem;
  margin: .7rem 0;
}
.callback-box h4 { color: var(--violet); margin-bottom: .4rem; }
.callback-box .result-note { margin-top: .5rem; }

.conv-note {
  background: var(--routine-soft);
  border: 1px solid var(--routine-line);
  color: #2b5273;
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  font-size: .8rem;
  margin: .7rem 0;
  line-height: 1.5;
}

/* ---------- forms ---------- */
.stack { display: flex; flex-direction: column; gap: .7rem; }
.stack label {
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.stack input, .stack textarea, select {
  font-family: var(--sans);
  font-size: .89rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  padding: .5rem .7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
  background: var(--surface);
  width: 100%;
}
.stack input:focus, .stack textarea:focus, select:focus { border-color: var(--ink-4); outline: none; }
select { font-size: .82rem; padding: .36rem .6rem; width: auto; max-width: 15rem; }
[data-code-input] {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 1rem;
  font-weight: 500;
}

.outcome-options { display: grid; gap: .45rem; }
/* `label.outcome-opt`, not `.outcome-opt`: the generic `.stack label` rule that
   uppercases form labels scores 0,1,1, so a bare class here (0,1,0) loses to it
   and the six outcome names render in shouty capitals. */
label.outcome-opt {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color .12s, background .12s;
}
.outcome-opt:hover { border-color: var(--ink-4); }
.outcome-opt input { width: auto; margin-top: .22rem; flex: none; accent-color: var(--terracotta); }
.outcome-opt.is-picked { background: var(--terracotta-soft); border-color: var(--terracotta); }
.outcome-opt-label { font-weight: 600; display: block; font-family: var(--display); }
.outcome-opt-detail { font-size: .76rem; color: var(--ink-3); line-height: 1.45; }

/* ---------- the boundary ---------- */
.card-boundary { border-color: var(--verified-line); }
.boundary-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 660px) { .boundary-grid { grid-template-columns: 1fr 1fr; } }
.boundary-col { border-radius: var(--r); padding: .75rem .85rem; }
.boundary-col h4 { display: flex; align-items: center; gap: .4rem; margin-bottom: .55rem; }
.bico {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  flex: none;
}
.boundary-visible { background: var(--verified-soft); border: 1px solid var(--verified-line); }
.boundary-visible h4 { color: #145c3d; }
.boundary-visible .bico { background: var(--verified); }
.boundary-hidden { background: var(--urgent-soft); border: 1px solid var(--urgent-line); }
.boundary-hidden h4 { color: var(--urgent); }
.boundary-hidden .bico { background: var(--urgent); }

.kv { display: flex; flex-direction: column; gap: .45rem; }
.kv-row { display: flex; flex-direction: column; }
.kv-key { font-size: .63rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 600; }
.kv-val { font-family: var(--mono); font-size: .79rem; overflow-wrap: anywhere; }
.withheld-item { font-size: .82rem; margin-bottom: .55rem; }
.withheld-item:last-child { margin-bottom: 0; }
.withheld-field { font-weight: 650; display: block; font-family: var(--display); }
.withheld-why { color: var(--ink-2); font-size: .77rem; line-height: 1.45; }

.result-note {
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  font-size: .85rem;
  margin-top: .8rem;
  border: 1px solid;
  line-height: 1.5;
}
.result-ok { background: var(--verified-soft); border-color: var(--verified-line); color: #145c3d; }
.result-bad { background: var(--urgent-soft); border-color: var(--urgent-line); color: var(--urgent); }
.result-warn { background: var(--high-soft); border-color: var(--high-line); color: #7a5000; }

/* ---------- evidence ---------- */
.card-totals { background: linear-gradient(170deg, var(--surface-2), var(--surface)); }
.totals { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.total-item { display: flex; flex-direction: column; }
.total-num { font-family: var(--display); font-size: 1.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.total-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-3); font-weight: 600; }

.chain { display: flex; flex-direction: column; margin: .8rem 0 0; }
.chain-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.chain-link:last-child { border-bottom: none; }
.chain-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 700;
  font-family: var(--display);
  flex: none;
}
.chain-done { background: var(--verified); color: #fff; }
.chain-todo { background: var(--bg); color: var(--ink-4); border: 1.5px dashed var(--line-2); }
.chain-name { font-weight: 650; font-size: .93rem; font-family: var(--display); }
.chain-val { font-family: var(--mono); font-size: .81rem; color: var(--terracotta-deep); overflow-wrap: anywhere; }
.chain-detail { font-size: .8rem; color: var(--ink-3); margin-top: .18rem; line-height: 1.5; }

.ev-ordering {
  background: var(--verified-soft);
  border: 1px solid var(--verified-line);
  color: #145c3d;
  border-radius: var(--r);
  padding: .7rem .85rem;
  font-size: .84rem;
  margin: 1.1rem 0;
  line-height: 1.55;
}

.followup-row {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  align-items: center;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.followup-row:last-child { border-bottom: none; }
.status-tag {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 100px;
  padding: .1rem .45rem;
  font-weight: 700;
  flex: none;
}
.st-scheduled { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line-2); }
.st-sent { background: var(--routine-soft); color: var(--routine); border: 1px solid var(--routine-line); }
.st-answered { background: var(--verified-soft); color: var(--verified); border: 1px solid var(--verified-line); }

/* ---------- evidence tiers ----------
   Two bordered blocks, each with its own count, so they cannot read as one
   total. That separation is the "never substituted" rule made visual. */
.tiers { display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .tiers { grid-template-columns: 1fr 1fr; } }
.tier { border: 1px solid var(--line); border-radius: var(--r); padding: .8rem .85rem; }
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.tier-label { font-family: var(--display); font-weight: 650; font-size: .95rem; }
.tier-count {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.tier-source { display: block; font-size: .73rem; color: var(--ink-3); margin-bottom: .5rem; }
.tier-row {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border-top: 1px solid var(--line);
  padding: .5rem 0 .1rem;
}
.tier-main { font-weight: 600; font-size: .88rem; }
.tier-sub { font-size: .76rem; color: var(--ink-3); font-family: var(--mono); }
.tier-note { font-size: .8rem; color: var(--ink-2); font-style: italic; margin-top: .2rem; }
.tier-provider { background: var(--verified-soft); border-color: var(--verified-line); }
.tier-provider .tier-label, .tier-provider .tier-count { color: var(--verified); }
.tier-user { background: var(--routine-soft); border-color: var(--routine-line); }
.tier-user .tier-label, .tier-user .tier-count { color: var(--routine); }

.signal-chip {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: .68rem;
  background: var(--bg);
  border: 1px dashed var(--line-2);
  color: var(--ink-3);
  border-radius: 100px;
  padding: .05rem .45rem;
  margin-top: .25rem;
}
.card-signals { border-style: dashed; background: var(--surface-2); }
.tag-notevidence {
  font-size: .63rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: 100px;
  padding: .1rem .5rem;
  flex: none;
}
.signal-kinds { display: grid; gap: .5rem; }
.signal-kind { display: flex; flex-direction: column; }

.audit-list { max-height: 440px; overflow-y: auto; }
.audit-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .8rem;
}
.audit-row:last-child { border-bottom: none; }
.audit-time { font-family: var(--mono); font-size: .67rem; color: var(--ink-4); white-space: nowrap; padding-top: .1rem; }
.audit-event { font-weight: 650; font-family: var(--mono); font-size: .74rem; color: var(--terracotta-deep); }
.audit-actor { color: var(--ink-3); font-size: .71rem; }
.audit-detail {
  font-family: var(--mono);
  font-size: .69rem;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .35rem .5rem;
  margin-top: .3rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 9rem;
  overflow-y: auto;
}

.stack-cards { display: grid; gap: 1.1rem; }
@media (min-width: 1040px) { .stack-cards { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  padding: 1.3rem .95rem 2rem;
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}
.foot-lock { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--ink-3); font-size: .88rem; margin-bottom: .35rem; }
.foot-sep { color: var(--ink-4); }
.site-foot p { font-size: .77rem; color: var(--ink-4); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.modal-back { position: absolute; inset: 0; background: rgba(27, 29, 32, .5); backdrop-filter: blur(3px); }
.modal-body {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  max-width: 1100px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--sh-lg);
}
.modal-close {
  position: absolute;
  top: .85rem;
  right: .9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  cursor: pointer;
  padding: 0;
}
.modal-close:hover { background: var(--line); }
.modal-close svg { width: .8rem; height: .8rem; }
.modal-lede { color: var(--ink-2); max-width: 66ch; }

.framing-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 1.3rem 0; }
@media (min-width: 880px) { .framing-grid { grid-template-columns: repeat(3, 1fr); } }
.framing-col { border-radius: var(--r); padding: .9rem 1rem; border: 1px solid; }
.framing-col h3 { display: flex; align-items: center; gap: .45rem; font-size: .95rem; margin-bottom: .6rem; }
.fico {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  flex: none;
}
.framing-col ul { margin: 0; padding-left: 1.15rem; font-size: .83rem; }
.framing-col li { margin-bottom: .5rem; line-height: 1.5; }
.framing-real { background: var(--verified-soft); border-color: var(--verified-line); }
.framing-real h3 { color: #145c3d; }
.framing-real .fico { background: var(--verified); }
.framing-sim { background: var(--high-soft); border-color: var(--high-line); }
.framing-sim h3 { color: #7a5000; }
.framing-sim .fico { background: var(--high); }
.framing-absent { background: var(--bg); border-color: var(--line-2); }
.framing-absent h3 { color: var(--ink-2); }
.framing-absent .fico { background: var(--ink-3); }

.framing-foot { display: grid; gap: 1.1rem; grid-template-columns: 1fr; border-top: 1px solid var(--line); padding-top: 1.2rem; }
@media (min-width: 880px) { .framing-foot { grid-template-columns: 2fr 1fr; } }
.corpus-list { font-size: .82rem; }
.corpus-item { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.corpus-item:last-child { border-bottom: none; }
.corpus-title { font-weight: 650; font-family: var(--display); }
.corpus-prov { font-size: .74rem; color: var(--ink-3); line-height: 1.45; }
.danger-zone { background: var(--urgent-soft); border: 1px solid var(--urgent-line); border-radius: var(--r); padding: .8rem .9rem; }
.danger-zone p { font-size: .77rem; color: var(--ink-2); }

/* ---------- walkthrough ---------- */
.walkthrough {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  left: 1rem;
  max-width: 390px;
  margin-left: auto;
  background: var(--ink);
  color: #f2f0ee;
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  box-shadow: var(--sh-lg);
  z-index: 150;
}
.wt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .45rem; }
.wt-step { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #9ba1a8; font-weight: 600; }
.wt-step strong { color: var(--terracotta); }
.wt-close {
  background: rgba(255, 255, 255, .08);
  border: none;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  color: #c3c9d0;
  cursor: pointer;
  padding: 0;
}
.wt-close:hover { background: rgba(255, 255, 255, .18); }
.wt-close svg { width: .7rem; height: .7rem; }
.walkthrough h3 { color: #fff; font-size: 1rem; }
.walkthrough p { font-size: .85rem; color: #c3c9d0; line-height: 1.55; }
.wt-actions { display: flex; gap: .45rem; justify-content: flex-end; margin-top: .75rem; }
.wt-actions .btn-ghost { color: #c3c9d0; border-color: rgba(255, 255, 255, .2); background: transparent; }
.wt-actions .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.wt-actions .btn-primary { background: var(--terracotta); border-color: var(--terracotta); }
.wt-actions .btn-primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 500;
  z-index: 300;
  box-shadow: var(--sh-lg);
  max-width: 90vw;
  text-align: center;
}
.toast.is-error { background: var(--urgent); }

/* wide content scrolls inside its own container, never the page body */
.scroll-x { overflow-x: auto; }

@media (max-width: 520px) {
  .tab-sub { display: none; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; }
  h1 { font-size: 1.4rem; }
}