/* Tercero prototype - sample dashboard (loaded after styles.css for tokens) */
/* ── TOOL-FIRST SHELL ─────────────────────────────────────────────────────
   No site nav. The page IS the tool: a tight heading, then the tool itself
   filling the frame. Designed to live inside a chrome-less ~1240x900 modal
   iframe AND standalone. Only the inner content region scrolls. */
html{box-sizing:border-box;}
html.dash-root,html.dash-root body{height:100%;}
*,*::before,*::after{box-sizing:inherit;}

/* ── LIGHT THEME TOKEN REMAP ───────────────────────────────────────────────
   The sample tools were originally dark. Rather than rewrite every rule, we
   remap the surface/text/hairline tokens to LIGHT values *scoped to the tool
   shell* (body.dash). Every rule below — and every inline style in the dash-*
   HTML that references --snow-soft / --rule-d / --deep / --teal — inherits
   these, so the whole tool reads clean white with dark ink and teal accents.
   Teal on white uses --teal-deep for AA contrast; --teal stays for fills. */
body.dash{
  /* surfaces: white canvas, paper cards, off for subtle wells */
  --deep:#ffffff;        /* page canvas            */
  --deep-2:#ffffff;      /* card surface           */
  --deep-3:#eef4f7;      /* recessed well          */
  /* text: dark ink, soft slate for secondary */
  --snow:#0d1b24;        /* primary text           */
  --snow-soft:#52656f;   /* secondary text         */
  /* hairlines: dark-on-light rule */
  --rule-d:rgba(14,26,36,.12);
  /* accent: remap --teal itself to the legible deep teal so EVERY usage —
     including inline style="color:var(--teal)" in the HTML — passes AA on
     white. --teal-bright keeps the mint available for chart fills/gradients. */
  --teal:#00866a;
  --teal-bright:#00b894;
  --accent:#00866a;
  /* status colours nudged for legibility on white */
  --warn:#b07d18;
  --crit:#c0392b;

  background:var(--deep);
  color:var(--snow);
  overflow-x:hidden;
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* The content shell — heading + tool, vertically filling the frame. */
.dashwrap{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;            /* allow inner scroll region to shrink */
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(16px,2.6vw,30px) clamp(16px,3.4vw,40px) clamp(14px,2.2vw,26px);
}

/* Heading row — tight, tool name + subtitle on the left, status + tour right. */
.dashhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem 1.4rem;
  flex-wrap:wrap;
  flex:none;
  padding-bottom:clamp(.9rem,1.8vw,1.4rem);
}
.dashhead h1{
  font-family:var(--exp);font-weight:800;
  font-size:clamp(1.45rem,1.1rem + 1.5vw,2.2rem);
  letter-spacing:-.02em;line-height:1.04;margin:0;
}
.dashhead .sub{font-family:var(--mono);font-size:clamp(.72rem,.7rem + .15vw,.82rem);color:var(--snow-soft);margin-top:.5rem;line-height:1.45;max-width:60ch;}
/* Sample-data caption — quiet, sits under the subtitle. */
.dashhead .samp{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--snow-soft);margin-top:.7rem;opacity:.78;}
.dashhead .samp::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.7;flex:none;}
/* Right cluster: live status + tour affordance stacked, right-aligned. */
.dashhead .meta{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;text-align:right;margin-left:auto;}
.dashhead .when{font-family:var(--mono);font-size:.74rem;color:var(--snow-soft);text-align:right;line-height:1.4;}
.dashhead .when b{color:var(--teal);font-weight:500;}

/* The tool surface — fills remaining height and owns the only scrollbar. */
.dashtool{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:4px;       /* breathing room beside the slim scrollbar */
  scrollbar-gutter:stable;
}

.dgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.span3{grid-column:span 3}.span4{grid-column:span 4}.span5{grid-column:span 5}.span6{grid-column:span 6}.span7{grid-column:span 7}.span8{grid-column:span 8}.span12{grid-column:span 12}

.card{background:var(--deep-2);border:1px solid var(--rule-d);padding:1.25rem 1.35rem;min-width:0;box-shadow:0 1px 2px rgba(14,26,36,.04),0 8px 24px -16px rgba(14,26,36,.18);}
.card.glowy{box-shadow:inset 0 0 0 1px rgba(0,184,148,.28),0 8px 24px -16px rgba(14,26,36,.18);}
.card .lbl{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--snow-soft);}
.card .big{font-family:var(--exp);font-weight:800;font-size:clamp(1.5rem,1.1rem + 1vw,2.1rem);letter-spacing:-.02em;color:var(--snow);font-variant-numeric:tabular-nums;margin-top:.5rem;line-height:1;}
.card .delta{font-family:var(--mono);font-size:.74rem;margin-top:.55rem;}
.delta.up{color:var(--teal);} .delta.down{color:var(--crit);} .delta.flat{color:var(--snow-soft);}
.card .cardh{font-family:var(--exp);font-weight:700;font-size:1.02rem;color:var(--snow);margin-bottom:.9rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.card .cardh .tagm{font-family:var(--mono);font-size:.66rem;color:var(--snow-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:400;}

/* list rows */
.dlist{display:flex;flex-direction:column;}
.drow{display:flex;align-items:flex-start;gap:.8rem;padding:.75rem 0;border-top:1px solid var(--rule-d);}
.drow:first-child{border-top:0;}
.drow .ic{width:8px;height:8px;flex:none;margin-top:.45em;background:var(--teal);}
.drow .ic.warn{background:var(--warn);} .drow .ic.crit{background:var(--crit);}
.drow .tx{font-size:.93rem;color:var(--snow);line-height:1.45;}
.drow .tx .mut{color:var(--snow-soft);}
.drow .rt{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--snow-soft);white-space:nowrap;}
.drow .act{margin-left:auto;font-family:var(--mono);font-size:.7rem;color:var(--teal);border:1px solid var(--rule-d);padding:.25em .6em;white-space:nowrap;}

/* table */
.dtable{width:100%;border-collapse:collapse;font-size:.86rem;}
.dtable th{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--snow-soft);text-align:left;font-weight:500;padding:.5rem .6rem;border-bottom:1px solid var(--rule-d);}
.dtable td{padding:.6rem .6rem;border-bottom:1px solid var(--rule-d);color:var(--snow);font-variant-numeric:tabular-nums;vertical-align:middle;}
.dtable tr:last-child td{border-bottom:0;}
.dtable td.num{text-align:right;}
.flag{font-family:var(--mono);font-size:.66rem;padding:.2em .5em;border:1px solid var(--rule-d);color:var(--snow-soft);white-space:nowrap;}
.flag.ok{color:var(--teal);border-color:var(--teal);} .flag.warn{color:var(--warn);border-color:var(--warn);} .flag.crit{color:var(--crit);border-color:var(--crit);}

/* bar chart */
.bars{display:flex;align-items:flex-end;gap:8px;height:140px;margin-top:.4rem;position:relative;overflow:visible;}
.bars .bar{flex:1;background:linear-gradient(180deg,var(--teal-bright,#00b894),rgba(0,134,106,.35));position:relative;min-width:0;}
.bars .bar span{position:absolute;bottom:-1.5rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.62rem;color:var(--snow-soft);}
.barscap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.66rem;color:var(--snow-soft);margin-top:1.8rem;}

/* mini distribution */
.dist{display:flex;flex-direction:column;gap:.7rem;margin-top:.3rem;}
.dist .r{display:grid;grid-template-columns:30px 1fr 40px;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.72rem;color:var(--snow-soft);}
.dist .track{height:8px;background:var(--off);}
.dist .fill{height:8px;background:var(--teal);}
.dist .fill.warn{background:var(--warn);} .dist .fill.crit{background:var(--crit);}

/* ── CHAT TOOL (dash-ask) ─────────────────────────────────────────────────
   The chat is the star: a single bordered surface that fills the frame,
   messages scroll inside it, the ask bar is pinned at the bottom. */
.chatcard{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  background:var(--cloud);
  border:1px solid var(--rule-d);
  box-shadow:0 1px 2px rgba(14,26,36,.04), 0 24px 60px -44px rgba(14,26,36,.30);
  overflow:hidden;
}
.chatscroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:clamp(1rem,2vw,1.6rem) clamp(1rem,2vw,1.6rem) .4rem;
}
.chat{display:flex;flex-direction:column;gap:1rem;}
.msg{max-width:78%;padding:.85rem 1.05rem;font-size:.95rem;line-height:1.5;border-radius:2px;}
.msg.me{align-self:flex-end;background:var(--teal);color:#fff;font-weight:500;}
.msg.bot{align-self:flex-start;background:var(--paper);border:1px solid var(--rule-d);color:var(--snow);}
.msg.bot .src{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem;}
.msg.bot .src .s{font-family:var(--mono);font-size:.66rem;color:var(--teal);border:1px solid var(--rule-d);padding:.2em .5em;}
/* "Generating" typing indicator (shown by dashboard.js while the bot answers) */
.msg.typing{align-self:flex-start;background:var(--paper);border:1px solid var(--rule-d);border-radius:2px;display:inline-flex;align-items:center;gap:.45em;padding:.85rem 1.05rem;}
.msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;opacity:.4;animation:trc-dot 1.1s infinite ease-in-out;}
.msg.typing i:nth-child(2){animation-delay:.18s;}
.msg.typing i:nth-child(3){animation-delay:.36s;}
@keyframes trc-dot{0%,60%,100%{opacity:.25;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}}
.askbar{display:flex;gap:.6rem;flex:none;border-top:1px solid var(--rule-d);background:var(--paper);padding:.7rem .7rem .7rem 1.1rem;align-items:center;}
.askbar input{flex:1;background:none;border:0;color:var(--snow);font-family:var(--sans);font-size:.95rem;outline:none;min-width:0;}
.askbar input::placeholder{color:var(--snow-soft);}
.askbar .send{background:var(--teal);color:#fff;border:0;font-weight:600;padding:.6em 1.25em;font-family:var(--sans);font-size:.9rem;cursor:pointer;flex:none;border-radius:2px;}
.dnote{font-family:var(--mono);font-size:.72rem;color:var(--snow-soft);margin-top:1.2rem;text-align:center;}
.dnote a{color:var(--teal);}

/* ── IN-ANSWER DATA CHARTS (dash-ask) ──────────────────────────────────────
   Injected by dashboard.js into each .msg.bot that carries a data-chart spec.
   Rendered as inline SVG — teal series on a white card, JBM number labels,
   axis titles. Reads as part of the generated answer. */
.ans-chart{
  margin-top:.85rem;
  background:var(--cloud);
  border:1px solid var(--rule-d);
  border-radius:2px;
  padding:.85rem 1rem .8rem;
  max-width:430px;            /* contained + consistent — no more full-width giants */
}
.ans-chart .ans-chart-h{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--snow-soft);
  display:flex;align-items:center;gap:.5em;
  margin-bottom:.6rem;
}
.ans-chart .ans-chart-h::before{
  content:"";width:6px;height:6px;flex:none;background:var(--teal);
}
.ans-chart svg{display:block;width:100%;height:auto;overflow:visible;}
.ans-chart .ac-grid{stroke:var(--rule-d);stroke-width:1;}
.ans-chart .ac-axis{stroke:rgba(14,26,36,.28);stroke-width:1;}
.ans-chart .ac-bar{fill:var(--teal);}
.ans-chart .ac-bar.warn{fill:var(--warn);}
.ans-chart .ac-bar.crit{fill:var(--crit);}
.ans-chart .ac-val{font-family:var(--mono);font-size:9px;fill:var(--ink);font-weight:600;}
.ans-chart .ac-cat{font-family:var(--mono);font-size:8.5px;fill:var(--ink-soft);}
.ans-chart .ac-tick{font-family:var(--mono);font-size:8px;fill:var(--ink-soft);}
.ans-chart .ac-node{fill:var(--cloud);stroke:var(--teal);stroke-width:2;}
.ans-chart .ac-node.warn{stroke:var(--warn);}
.ans-chart .ac-node.crit{stroke:var(--crit);}
.ans-chart .ac-line{stroke:var(--teal);stroke-width:2;fill:none;}
/* line/area */
.ans-chart .ac-area{fill:var(--teal);opacity:.10;}
/* donut */
.ans-chart .ac-arc{stroke:var(--teal);}
.ans-chart .ac-arc.ac-d1{stroke:var(--teal);}
.ans-chart .ac-arc.ac-d2{stroke:var(--teal-deep,#00866a);}
.ans-chart .ac-arc.ac-d3{stroke:#7fccb9;}
.ans-chart .ac-arc.ac-d4{stroke:var(--warn);}
.ans-chart .ac-arc.ac-d5{stroke:rgba(14,26,36,.22);}
.ans-chart .ac-leg.ac-d1{fill:var(--teal);}.ans-chart .ac-leg.ac-d2{fill:var(--teal-deep,#00866a);}
.ans-chart .ac-leg.ac-d3{fill:#7fccb9;}.ans-chart .ac-leg.ac-d4{fill:var(--warn);}.ans-chart .ac-leg.ac-d5{fill:rgba(14,26,36,.22);}
.ans-chart .ac-leg-t{font-family:var(--mono);font-size:9px;fill:var(--ink-soft);}
.ans-chart .ac-donut-c{font-family:var(--exp);font-weight:800;font-size:18px;fill:var(--ink);}
.ans-chart .ac-donut-s{font-family:var(--mono);font-size:7.5px;fill:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;}
/* gauge */
.ans-chart .ac-gauge-bg{stroke:rgba(14,26,36,.12);}
.ans-chart .ac-gauge-fg{stroke:var(--teal);}
.ans-chart .ac-gauge-fg.warn{stroke:var(--warn);}
.ans-chart .ac-gauge-fg.crit{stroke:var(--crit);}
.ans-chart .ac-gauge-v{font-family:var(--exp);font-weight:800;font-size:24px;fill:var(--ink);}
.ans-chart .ac-gauge-l{font-family:var(--mono);font-size:8px;fill:var(--ink-soft);letter-spacing:.1em;text-transform:uppercase;}

/* ── tool-window bar: makes a demo read as an actual app window ─────────── */
.toolbar{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.1rem;background:var(--deep-3);
  border-bottom:1px solid var(--rule-d);position:sticky;top:0;z-index:20;}
.toolbar .tw-dots{display:flex;gap:6px;margin-right:.3rem;}
.toolbar .tw-dots i{width:10px;height:10px;border-radius:50%;background:rgba(14,26,36,.16);display:block;}
.toolbar .tw-mark{display:flex;align-items:center;gap:.5em;font-family:var(--exp);font-weight:700;font-size:.92rem;color:var(--snow);}
.toolbar .tw-mark svg{width:18px;height:18px;}
.toolbar .tw-name{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--snow-soft);}
.toolbar .tw-spacer{flex:1;}
.toolbar .tw-chip{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-deep,#00866a);border:1px solid var(--rule-d);border-radius:999px;padding:.3em .7em;}
.toolbar .tw-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);}
.ans-chart .ac-note{
  font-family:var(--mono);font-size:.64rem;color:var(--snow-soft);
  margin-top:.55rem;line-height:1.4;
}
/* gentle reveal in step with the answer */
.ans-chart{opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;}
.ans-chart.ac-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .ans-chart{transition:none;opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
  .msg.typing i{animation:none;opacity:.6;}
}

/* ── SLIM BRANDED SCROLLBARS ───────────────────────────────────────────────
   No default grey OS scrollbar anywhere — charcoal track, teal thumb. */
html.dash-root{scrollbar-width:thin;scrollbar-color:var(--teal-deep) var(--deep);}
body.dash,
.dashtool,
.chatscroll,
.card{
  scrollbar-width:thin;
  scrollbar-color:var(--teal-deep) transparent;
}
body.dash::-webkit-scrollbar,
.dashtool::-webkit-scrollbar,
.chatscroll::-webkit-scrollbar,
.card::-webkit-scrollbar{width:9px;height:9px;}
body.dash::-webkit-scrollbar-track,
.dashtool::-webkit-scrollbar-track,
.chatscroll::-webkit-scrollbar-track,
.card::-webkit-scrollbar-track{background:rgba(14,26,36,.04);}
body.dash::-webkit-scrollbar-thumb,
.dashtool::-webkit-scrollbar-thumb,
.chatscroll::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb{
  background:var(--teal-deep);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
body.dash::-webkit-scrollbar-thumb:hover,
.dashtool::-webkit-scrollbar-thumb:hover,
.chatscroll::-webkit-scrollbar-thumb:hover,
.card::-webkit-scrollbar-thumb:hover{background:var(--teal);background-clip:content-box;}
body.dash::-webkit-scrollbar-corner,
.dashtool::-webkit-scrollbar-corner{background:transparent;}

/* ── RESPONSIVE BREAKPOINTS ─────────────────────────────────────────────── */

/* Tablet / narrow modal: 1 wide → 2-column layout */
@media (max-width:820px){
  .dgrid{grid-template-columns:repeat(6,1fr);}
  /* 3-col cards → half width */
  .span3{grid-column:span 3;}
  /* larger spans → full width */
  .span4,.span5,.span6,.span7,.span8,.span12{grid-column:span 6;}
  .msg{max-width:92%;}
}

/* Mid: stack the heading meta below the title so it never crowds. */
@media (max-width:640px){
  .dashhead{flex-direction:column;align-items:flex-start;}
  .dashhead .meta{align-items:flex-start;text-align:left;margin-left:0;flex-direction:row;flex-wrap:wrap;gap:.5rem 1.1rem;}
  .dashhead .when{text-align:left;}
}

/* Narrow / mobile: fully single-column */
@media (max-width:520px){
  .dgrid{grid-template-columns:1fr;}
  .span3,.span4,.span5,.span6,.span7,.span8,.span12{grid-column:span 1;}
  /* Table scroll container on very small screens */
  .card{overflow-x:auto;}
  .dtable{min-width:420px;}
  /* Bar chart — allow overflow */
  .bars{overflow:visible;}
  /* Ask bar wraps on tiny screens */
  .askbar{flex-wrap:wrap;}
  .askbar input{min-width:0;width:100%;}
  .askbar .send{width:100%;text-align:center;}
  .msg{max-width:100%;}
}

/* Row actions: allow wrapping on narrow frames so .act label doesn't clip */
@media (max-width:600px){
  .drow{flex-wrap:wrap;}
  .drow .rt,.drow .act{margin-left:0;margin-top:.35rem;}
}

/* ── JS-ENHANCED STYLES (activated when dashboard.js loads) ─────────────── */

/* 1. Row hover — soft teal highlight + left hairline */
body.js-hover .drow{
  transition:background .15s ease, border-left .15s ease;
  border-left:2px solid transparent;
  padding-left:calc(.75rem - 2px); /* compensate for border so text doesn't shift */
  cursor:default;
}
body.js-hover .drow:hover{
  background:rgba(0,184,148,.05);
  border-left-color:var(--teal);
}
body.js-hover .dtable tbody tr{
  transition:background .15s ease;
  cursor:default;
}
body.js-hover .dtable tbody tr:hover td{
  background:rgba(0,184,148,.05);
}
/* Hairline accent on hovered table row — via first-cell left border */
body.js-hover .dtable tbody tr:hover td:first-child{
  box-shadow:inset 2px 0 0 var(--teal);
}

/* 2. Typewriter / chat message transitions */
.chat .msg{
  transition:opacity .3s ease, transform .3s ease;
}
@media (prefers-reduced-motion:reduce){
  .chat .msg{transition:none;}
}

/* 3. Action toast */
.dash-toast{
  position:absolute;
  z-index:9000;
  background:var(--cloud);
  border:1px solid var(--teal);
  box-shadow:0 8px 28px -12px rgba(14,26,36,.35);
  color:var(--teal);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  padding:.45em .9em;
  white-space:nowrap;
  pointer-events:none;
  width:280px;
  text-align:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease;
}
.dash-toast--in{
  opacity:1;
  transform:translateY(0);
}
.dash-toast--out{
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .3s ease .1s, transform .3s ease .1s;
}

/* 4. Count-up — no layout shift; .big already has fixed font-size */

/* 5. Bar chart y-axis labels */
/* .bars--has-yaxis class added by JS only when labels are rendered */
.bars--has-yaxis{
  position:relative;
  overflow:visible;
  margin-left:2.8rem; /* room for y-axis labels */
}
.bar-ylabel{
  position:absolute;
  left:-2.8rem;
  width:2.4rem;
  text-align:right;
  font-family:var(--mono);
  font-size:.58rem;
  color:var(--snow-soft);
  line-height:1;
  pointer-events:none;
  white-space:nowrap;
}
.bar-ylabel::after{
  content:"";
  display:inline-block;
  width:4px;
  height:1px;
  background:rgba(14,26,36,.25);
  vertical-align:middle;
  margin-left:3px;
}

/* 6. Burn direction — .delta.down already has color:var(--crit);
   no extra rules needed — semantics fixed via JS class manipulation */

/* Live date placeholder — prevent flash of raw placeholder text */
[data-live-date]{
  display:inline;
}

@media (prefers-reduced-motion:reduce){
  .dash-toast, .dash-toast--in, .dash-toast--out{transition:none;}
}

/* ── GUIDED TOUR ─────────────────────────────────────────────────────────── */

/* Subtle ghost "Take the tour" affordance in the heading — no heavy chrome. */
.trc-tour-trigger{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.06em;
  color:var(--snow-soft);
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  padding:.15em 0 .2em;
  cursor:pointer;
  white-space:nowrap;
  flex:none;
  transition:color .15s ease, border-color .15s ease;
}
.trc-tour-trigger::before{
  content:"";
  width:7px;height:7px;
  border:1.5px solid var(--teal);
  border-radius:50%;
  flex:none;
}
.trc-tour-trigger:hover{
  color:var(--snow);
  border-bottom-color:var(--teal);
}

/* Full-page overlay (fixed, sits above everything).
   IMPORTANT: this layer is now FULLY TRANSPARENT. It exists only to
   (a) catch backdrop clicks and (b) host the callout + spotlight.
   The dimming is done ENTIRELY by the spotlight's box-shadow below, which
   leaves a genuine transparent hole over the target — so nothing tints or
   blurs the highlighted element. No backdrop-filter here (it would blur the
   target too). */
#trc-tour-overlay{
  position:fixed;
  inset:0;
  z-index:9900;
  background:transparent;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s ease;
}
#trc-tour-overlay.trc-tour-active{
  opacity:1;
  pointer-events:auto;
}

/* Teal spotlight ring around the target element.
   The huge box-shadow IS the dim layer: everything OUTSIDE this rect is
   darkened, the rect itself stays a clear transparent hole. The target sits
   under this hole (and is additionally z-lifted by JS via .trc-tour-lift),
   so its content reads at full clarity — brighter than the dimmed surround. */
#trc-tour-spotlight{
  position:fixed;
  z-index:9901;
  border:2px solid var(--teal);
  border-radius:3px;
  background:transparent;
  box-shadow:0 0 0 9999px rgba(8,15,22,.74), 0 0 22px rgba(0,184,148,.35);
  pointer-events:none;
  /* Smooth morph between steps — slowed meaningfully so the spotlight travel
     is easy to follow (~0.8s gentle ease). */
  transition:top .8s var(--e-out), left .8s var(--e-out),
             width .8s var(--e-out), height .8s var(--e-out),
             box-shadow .8s var(--e-out),
             opacity .45s ease;
}

/* The element being highlighted is lifted above the dim hole so it renders
   crisp and fully legible. JS adds/removes this class on the current target. */
.trc-tour-lift{
  position:relative;
  z-index:9902 !important;
}

/* Callout card */
#trc-tour-callout{
  position:fixed;
  width:320px;
  max-width:calc(100vw - 20px);
  background:var(--cloud);
  border:1px solid var(--teal);
  box-shadow:0 18px 50px -20px rgba(14,26,36,.55);
  padding:1.1rem 1.25rem 1rem;
  outline:none;
  z-index:9903;
  /* Position morphs in step with the spotlight; opacity is driven by the JS
     cross-fade. Slowed to match the spotlight travel so movement is calm and
     easy to follow. */
  transition:top .8s var(--e-out), left .8s var(--e-out), opacity .32s ease;
}
.trc-tour-counter{
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:.55rem;
}
.trc-tour-title{
  font-family:var(--exp);
  font-weight:700;
  font-size:.95rem;
  color:var(--snow);
  line-height:1.2;
  margin-bottom:.5rem;
}
.trc-tour-body{
  font-family:var(--sans);
  font-size:.88rem;
  color:var(--snow-soft);
  line-height:1.55;
  margin-bottom:.9rem;
}
.trc-tour-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
}
.trc-tour-nav{
  display:flex;
  gap:.4rem;
}
.trc-tour-btn{
  font-family:var(--mono);
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--rule-d);
  color:var(--snow-soft);
  padding:.35em .7em;
  cursor:pointer;
  white-space:nowrap;
  transition:border-color .12s ease, color .12s ease;
}
.trc-tour-btn:hover{
  border-color:var(--snow-soft);
  color:var(--snow);
}
.trc-tour-btn.trc-tour-next{
  background:var(--teal);
  border-color:var(--teal);
  color:var(--deep);
  font-weight:600;
  padding:.42em .95em;
  box-shadow:0 5px 16px -5px rgba(0,184,148,.6);
}
.trc-tour-btn.trc-tour-next:hover{
  filter:brightness(1.08);
  box-shadow:0 7px 20px -5px rgba(0,184,148,.7);
}
.trc-tour-btn.trc-tour-done-btn{
  background:var(--teal);
  color:var(--deep);
  border-color:var(--teal);
}
.trc-tour-btn.trc-tour-done-btn:hover{
  background:rgba(0,184,148,.85);
}

@media (prefers-reduced-motion:reduce){
  #trc-tour-spotlight,
  #trc-tour-callout,
  #trc-tour-overlay{
    transition:none !important;
  }
}