@import url("/ds/styles.css");

/* Console surfaces use :root, which is dark. Never set data-theme here. */
html,body{ min-height:100% }
body{ background:var(--surface-page); color:var(--text-body) }

/* FLG monogram. The wordmark's initials on flash red, per the brand marks. */
.flg-square{ display:inline-grid; place-items:center; width:42px; height:42px;
  background:var(--flash-500); flex:none }
.flg-square span{ font-family:var(--font-display); font-size:15px; line-height:1;
  letter-spacing:-.01em; color:#fff; text-transform:uppercase }

/* ---------- Auth screens ---------- */
.auth{ min-height:100vh; display:grid; place-items:center; padding:var(--space-7) var(--space-5) }
.auth-card{ width:100%; max-width:420px }
.auth-head{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-7) }
.auth-head .n{ font-family:var(--font-display); font-size:20px; line-height:.86;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--text-display) }
.auth-head .g{ font-weight:700; font-size:9px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--text-muted); margin-top:3px }
.auth-panel{ background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card); padding:var(--space-8) }
.auth-panel .sector{ height:2px; width:48px; background:var(--flash-500); margin-bottom:var(--space-5) }
.auth-panel h1{ font-family:var(--font-display); font-size:26px; line-height:.9;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--text-display);
  margin:0 0 var(--space-4) }
.auth-panel .sub{ font-size:var(--body-sm); color:var(--text-muted); margin:0 0 var(--space-7) }
.auth-panel label{ display:block; font-weight:600; font-size:var(--body-sm);
  color:var(--text-heading); margin-bottom:var(--space-2) }
.auth-panel .f{ margin-bottom:var(--space-5) }
.auth-panel input{ width:100%; font-family:var(--font-sans); font-size:var(--body-md);
  color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:12px 13px }
.auth-panel input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px;
  border-color:var(--line-strong) }
.auth-btn{ display:flex; width:100%; align-items:center; justify-content:center;
  font-family:var(--font-sans); font-weight:600; font-size:var(--body-lg); line-height:1.1;
  padding:14px 20px; border:0; border-radius:var(--radius-xs); cursor:pointer;
  background:var(--flash-500); color:#fff;
  transition:background var(--dur-fast) var(--ease-standard) }
.auth-btn:hover{ background:var(--flash-600) }
.auth-btn:active{ transform:scale(var(--press-scale)) }
.auth-btn[disabled]{ opacity:.4; cursor:not-allowed }
.auth-alt{ margin-top:var(--space-6); text-align:center; font-size:var(--body-sm) }
.auth-alt a{ color:var(--text-accent); text-decoration:none }
.auth-alt a:hover{ color:var(--text-heading) }
.auth-foot{ margin-top:var(--space-6); text-align:center; font-size:var(--body-xs);
  color:var(--text-muted) }
.msg{ margin-top:var(--space-5); font-size:var(--body-sm); display:none }
.msg.on{ display:block }
.msg.ok{ color:var(--text-positive) } .msg.bad{ color:var(--text-alert) }
.hint{ font-size:var(--body-xs); color:var(--text-muted); margin-top:var(--space-2) }

/* ---------- Dashboard shell ---------- */
.shell{ display:grid; grid-template-columns:72px 1fr; min-height:100vh }
.rail{ background:var(--surface-sunken); border-right:1px solid var(--line-hairline);
  display:flex; flex-direction:column; align-items:center; padding:15px 0; gap:var(--space-5) }
.rail .flg-square{ width:42px; height:42px }
.rail .spacer{ flex:1 }
.rail button{ width:42px; height:42px; display:grid; place-items:center; background:transparent;
  border:0; border-radius:var(--radius-xs); color:var(--text-muted); cursor:pointer }
.rail button:hover{ background:var(--surface-raised); color:var(--text-heading) }
.main{ display:flex; flex-direction:column; min-width:0 }
.masthead{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  padding:var(--space-5) var(--space-7); border-bottom:1px solid var(--line-hairline);
  background:var(--surface-card) }
.masthead .who .t{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted) }
.masthead .who .n{ font-size:var(--body-md); color:var(--text-heading); margin-top:2px }
.masthead .rec{ display:flex; align-items:center; gap:var(--space-3);
  font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted) }
.masthead .dot{ width:7px; height:7px; border-radius:var(--radius-pill); background:var(--flash-500) }
.linkbtn{ background:transparent; border:0; color:var(--text-accent); cursor:pointer;
  font-family:var(--font-sans); font-size:var(--body-sm); font-weight:600; padding:6px 2px }
.linkbtn:hover{ color:var(--text-heading) }
.content{ flex:1; padding:var(--space-9) var(--space-7) }
.blank{ max-width:var(--measure-narrow) }
.blank .eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--space-4) }
.blank h1{ font-family:var(--font-display); font-size:var(--display-3); line-height:.9;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--text-display); margin:0 }
.blank p{ margin-top:var(--space-5); color:var(--text-body) }
.callout{ border-left:3px solid var(--flash-500); background:var(--surface-accent-soft);
  padding:var(--space-6); border-radius:var(--radius-xs); margin-bottom:var(--space-8);
  max-width:var(--measure-narrow) }
.callout h2{ margin:0 0 var(--space-3); font-size:var(--body-lg); color:var(--text-heading) }
.callout p{ margin:0 0 var(--space-5); font-size:var(--body-sm) }
.callout form{ display:grid; gap:var(--space-4); max-width:360px }
.callout input{ width:100%; font-family:var(--font-sans); font-size:var(--body-md);
  color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:11px 12px }
.callout button{ justify-self:start; padding:11px 18px; border:0; border-radius:var(--radius-xs);
  background:var(--flash-500); color:#fff; font-family:var(--font-sans); font-weight:600;
  font-size:var(--body-md); cursor:pointer }
.callout button:hover{ background:var(--flash-600) }
@media (max-width:700px){ .shell{ grid-template-columns:56px 1fr } .content{ padding:var(--space-7) var(--space-5) } }

/* ===================== Call console ===================== */
.call{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:var(--space-7);
  align-items:start; padding:var(--space-7) }
@media (max-width:1180px){ .call{ grid-template-columns:minmax(0,1fr) } }

/* Stepper — the whole call at a glance, click to jump */
.stepper{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-6) }
.step{ flex:1 1 88px; min-width:78px; background:transparent; border:0; cursor:pointer;
  padding:var(--space-3) var(--space-3) var(--space-4); text-align:left;
  border-top:3px solid var(--line-rule); color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard) }
.step:hover{ color:var(--text-heading); border-top-color:var(--line-strong) }
.step .sn{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--data-sm);
  letter-spacing:var(--data-tracking); display:block }
.step .st{ font-size:var(--body-xs); font-weight:600; display:block; margin-top:3px; line-height:1.25 }
.step[aria-current="true"]{ border-top-color:var(--flash-500); color:var(--text-display) }
.step[data-done="1"]{ border-top-color:var(--jade-500); color:var(--text-body) }

/* Stage cards */
.stage{ background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-sm); margin-bottom:var(--space-4); overflow:hidden }
.stage[data-open="1"]{ box-shadow:var(--shadow-card); border-color:var(--line-strong) }
.stage-head{ display:flex; align-items:center; gap:var(--space-5); width:100%;
  background:transparent; border:0; cursor:pointer; padding:var(--space-5) var(--space-6);
  text-align:left; color:inherit }
.stage-head:hover{ background:var(--surface-raised) }
.stage-head .num{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:28px; line-height:.82; color:var(--flash-500); flex:none; width:42px }
.stage[data-open="1"] .stage-head{ border-bottom:1px solid var(--line-hairline) }
.stage-head .tt{ flex:1; min-width:0 }
.stage-head h2{ margin:0; font-family:var(--font-display); font-size:17px; line-height:1;
  letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display) }
.stage-head .why{ margin:5px 0 0; font-size:var(--body-xs); color:var(--text-muted) }
.stage-head .chev{ flex:none; color:var(--text-muted); transition:transform var(--dur-fast) var(--ease-standard) }
.stage[data-open="1"] .stage-head .chev{ transform:rotate(180deg) }
/* Accordion: one stage open at a time. Without this the bodies all stack. */
.stage:not([data-open="1"]) .stage-body{ display:none }
.stage-body{ padding:var(--space-6) }
.stage-body > :first-child{ margin-top:0 }

/* "Say this" — the words that come out of your mouth */
.say{ border-left:3px solid var(--flash-500); background:var(--surface-raised);
  padding:var(--space-5) var(--space-6); margin:0 0 var(--space-5); border-radius:var(--radius-xs) }
.say p{ margin:0; font-size:var(--body-lg); line-height:1.5; color:var(--text-display) }
.say p + p{ margin-top:var(--space-3) }
.say .beat{ display:inline-block; font-weight:700; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--flash-400);
  margin-top:var(--space-3) }

h3.sec{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted); margin:var(--space-7) 0 var(--space-4) }

/* Branch tables */
table.branch{ width:100%; border-collapse:collapse; font-size:var(--body-sm) }
table.branch th{ text-align:left; font-weight:700; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted);
  padding:0 var(--space-4) var(--space-3) 0; border-bottom:1px solid var(--line-rule) }
table.branch td{ padding:var(--space-4) var(--space-4) var(--space-4) 0; vertical-align:top;
  border-bottom:1px solid var(--line-hairline); color:var(--text-body) }
table.branch td:first-child{ color:var(--text-heading); font-weight:600; width:34% }

/* Checklists you tick during the call */
ul.ticks{ list-style:none; margin:0; padding:0 }
ul.ticks li{ border-bottom:1px solid var(--line-hairline) }
ul.ticks label{ display:flex; gap:var(--space-4); align-items:flex-start; cursor:pointer;
  padding:var(--space-4) 0; font-size:var(--body-md); color:var(--text-body) }
ul.ticks input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--flash-500) }
ul.ticks input:checked + span{ color:var(--text-muted); text-decoration:line-through }
ul.ticks .note{ display:block; font-size:var(--body-xs); color:var(--text-muted);
  margin-top:3px; text-decoration:none !important }

.warn{ border-left:3px solid var(--amber-400); background:rgba(240,169,59,.09);
  padding:var(--space-5); border-radius:var(--radius-xs); margin:var(--space-5) 0;
  font-size:var(--body-sm); color:var(--text-caution) }
.warn strong{ color:var(--amber-400) }

.stage-foot{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--line-hairline) }
.nextbtn{ background:var(--flash-500); color:#fff; border:0; border-radius:var(--radius-xs);
  padding:11px 18px; font-family:var(--font-sans); font-weight:600; font-size:var(--body-md); cursor:pointer }
.nextbtn:hover{ background:var(--flash-600) }

/* ---- Right rail widgets ---- */
.tools{ position:sticky; top:var(--space-5); display:grid; gap:var(--space-4) }
@media (max-width:1180px){ .tools{ position:static } }
.tool{ background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-sm) }
.tool > summary{ list-style:none; cursor:pointer; display:flex; align-items:center;
  gap:var(--space-4); padding:var(--space-5) var(--space-6) }
.tool > summary::-webkit-details-marker{ display:none }
.tool > summary:hover{ background:var(--surface-raised) }
.tool[open] > summary{ border-bottom:1px solid var(--line-hairline) }
.tool[open]{ box-shadow:var(--shadow-card); border-color:var(--line-strong) }
.tool summary h3{ flex:1; min-width:0; margin:0 }
/* The answer stays visible after you collapse the panel. */
.tool .tool-val{ font-family:var(--font-data); font-variant-numeric:tabular-nums;
  font-size:var(--body-sm); font-weight:600; color:var(--flash-400); white-space:nowrap }
.tool .tool-val:empty{ display:none }
.tool .chev{ flex:none; color:var(--text-muted); font-size:11px;
  transition:transform var(--dur-fast) var(--ease-standard) }
.tool[open] .chev{ transform:rotate(180deg) }
.tool-body{ padding:var(--space-6) }
.tool h3{ margin:0 0 var(--space-2); font-weight:700; font-size:var(--eyebrow);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) }
.tool .lede{ margin:0 0 var(--space-5); font-size:var(--body-xs); color:var(--text-muted) }
.tool label{ display:block; font-size:var(--body-xs); font-weight:600;
  color:var(--text-heading); margin:0 0 var(--space-2) }
.tool input,.tool select{ width:100%; font-family:var(--font-sans); font-size:var(--body-md);
  color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:10px 12px }
.tool .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) }
.tool .out:first-child{ margin-top:0; padding-top:0; border-top:0 }
.out{ margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line-hairline) }
.out .big{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  font-size:30px; line-height:.9; color:var(--text-display) }
.out .big.flash{ color:var(--flash-500) }
.out .cap{ font-size:var(--body-xs); color:var(--text-muted); margin-top:var(--space-3) }
.out .cap b{ color:var(--text-heading) }

/* Toggle pills */
.pills{ display:flex; gap:var(--space-2); margin-bottom:var(--space-4) }
.pill{ flex:1; background:var(--surface-raised); border:1px solid var(--line-rule); color:var(--text-muted);
  border-radius:var(--radius-xs); padding:8px 6px; font-family:var(--font-sans); font-weight:600;
  font-size:var(--body-xs); cursor:pointer }
.pill[aria-pressed="true"]{ background:var(--flash-500); border-color:var(--flash-500); color:#fff }

.ladder{ width:100%; border-collapse:collapse; font-size:var(--body-sm) }
.ladder td{ padding:var(--space-3) 0; border-bottom:1px solid var(--line-hairline) }
.ladder td:last-child{ text-align:right; font-family:var(--font-data);
  font-variant-numeric:tabular-nums; color:var(--text-display) }

/* Knockouts */
.ko{ display:flex; flex-wrap:wrap; gap:var(--space-2) }
.ko button{ background:var(--surface-raised); border:1px solid var(--line-rule); color:var(--text-body);
  border-radius:var(--radius-xs); padding:7px 10px; font-family:var(--font-sans);
  font-size:var(--body-xs); font-weight:600; cursor:pointer; text-align:left }
.ko button[aria-pressed="true"]{ background:var(--flash-500); border-color:var(--flash-500); color:#fff }
.verdict{ margin-top:var(--space-5); padding:var(--space-5); border-radius:var(--radius-xs);
  border-left:3px solid var(--jade-500); background:var(--surface-jade-soft);
  font-size:var(--body-sm); color:var(--text-positive) }
.verdict[data-ko="1"]{ border-left-color:var(--flash-500);
  background:var(--surface-accent-soft); color:var(--text-alert) }

/* Objections */
.obj details{ border-bottom:1px solid var(--line-hairline) }
.obj summary{ cursor:pointer; list-style:none; padding:var(--space-4) 0;
  font-size:var(--body-sm); font-weight:600; color:var(--text-heading) }
.obj summary:hover{ color:var(--text-accent) }
.obj details[open] summary{ color:var(--flash-400) }
.obj p{ margin:0 0 var(--space-4); font-size:var(--body-sm); color:var(--text-body) }

.pii{ border-left:3px solid var(--flash-500); background:var(--surface-accent-soft);
  padding:var(--space-4) var(--space-5); border-radius:var(--radius-xs);
  font-size:var(--body-xs); color:var(--text-body); margin-bottom:var(--space-6) }
.pii strong{ color:var(--text-alert) }

/* iOS Safari zooms the viewport when a focused control is under 16px.
   Bump every control to 16px on small screens so tapping a field does not
   jump the page. */
@media (max-width:860px){
  input[type=text],input[type=email],input[type=tel],input[type=password],
  input[type=number],select,textarea{ font-size:16px }
}