/* Halvren Checklist Live — shared stylesheet.
 *
 * Loaded by /checklist/live/index.html (the standalone page) and by
 * /index.html (the homepage embed). The :root fallback block at the top
 * gives every page access to the canonical token aliases regardless of
 * whether it also loads page.css — important because the homepage is
 * self-contained inline.
 */

:root{
  /* canonical aliases — fall back through --color-* and then to literal hex */
  --bg:    var(--color-bg, #f7f6f2);
  --ink:   var(--color-text, #1a1a1a);
  --muted: var(--color-text-muted, #6b6b6b);
  --line:  var(--color-divider, #d9d6cf);
  --green: #2d5f3f;
  --red:   #8b2c2c;
  --gold:  var(--color-gold, #a87f3c);
  --font-h1h2: 'Cormorant Garamond', Georgia, serif;
  --text-meta: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-sub:  clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-h2:   clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"]{
  --green: #7fbf94;
  --red:   #d68b8b;
}

.live-wrap{max-width:760px;margin:0 auto;padding:6rem 1.5rem 4rem}
.live-eyebrow{font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-meta);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem;font-weight:500}
.live-hero-h{font-family:var(--font-h1h2);font-size:var(--text-h2);line-height:1.1;letter-spacing:-0.02em;color:var(--ink);font-style:italic;font-weight:500;margin-bottom:1.5rem;max-width:24ch}
.live-hero-h em{color:var(--gold);font-style:italic}
.live-lede{font-size:var(--text-body);color:var(--muted);line-height:1.65;max-width:60ch;margin-bottom:2.5rem}

.live-input-row{display:flex;gap:0.75rem;align-items:stretch;margin-bottom:0.75rem;transition:opacity 240ms var(--ease-soft),transform 240ms var(--ease-soft),max-height 320ms var(--ease-soft);max-height:160px;overflow:hidden}
.live-input-row[data-collapsed="true"]{opacity:0;transform:translateY(-12px);max-height:0;margin:0}
.live-input{flex:1;background:transparent;border:none;border-bottom:1px solid var(--line);padding:0.75rem 0;font-family:var(--font-h1h2);font-size:var(--text-sub);color:var(--ink);outline:none;letter-spacing:-0.01em;border-radius:0}
.live-input:focus{border-bottom-color:var(--ink)}
.live-input::placeholder{color:var(--muted);font-style:italic;font-family:var(--font-h1h2);letter-spacing:0;font-size:var(--text-body)}
.live-submit{font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-meta);letter-spacing:0.08em;text-transform:uppercase;padding:0.75rem 1.5rem;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;border-radius:0;transition:background 160ms var(--ease-soft),color 160ms var(--ease-soft);font-weight:500}
.live-submit:hover{background:var(--ink);color:var(--bg)}
.live-submit:disabled{opacity:0.5;cursor:not-allowed}
.live-helptext{font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-meta);color:var(--muted);letter-spacing:0.02em;line-height:1.6}
.live-helptext code{font-family:var(--font-mono, 'JetBrains Mono', monospace);color:var(--ink);background:transparent}
.live-helptext a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(168,127,60,0.4);padding-bottom:1px}

.live-error{display:none;padding:1.25rem;border:1px solid var(--line);border-radius:0.5rem;background:rgba(0,0,0,0.02);margin-top:1.5rem;font-family:var(--font-body, 'DM Sans', sans-serif)}
.live-error[data-visible="true"]{display:block}
.live-error h3{font-family:var(--font-h1h2);font-size:var(--text-sub);font-weight:500;letter-spacing:-0.01em;margin-bottom:0.5rem;color:var(--ink)}
.live-error p{font-size:var(--text-body);color:var(--muted);line-height:1.65}
.live-error a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(168,127,60,0.4)}

.live-meta-strip{display:none;margin-top:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);font-family:var(--font-body, 'DM Sans', sans-serif)}
.live-meta-strip[data-visible="true"]{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline}
.live-meta-strip .lm-ticker{font-family:var(--font-h1h2);font-size:var(--text-h2);font-weight:500;letter-spacing:-0.02em;color:var(--ink);font-style:italic}
.live-meta-strip .lm-name{font-size:var(--text-body);color:var(--ink);max-width:36ch}
.live-meta-strip .lm-sector{font-size:var(--text-meta);letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
.live-meta-strip .lm-cache{font-size:var(--text-meta);color:var(--muted);letter-spacing:0.02em;margin-left:auto}

.live-list{display:none;margin-top:2rem;list-style:none;padding:0;border-top:1px solid var(--line)}
.live-list[data-visible="true"]{display:block}
.live-row{display:grid;grid-template-columns:64px 1fr;gap:1.25rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start;opacity:0;transform:translateY(8px);transition:opacity 240ms var(--ease-soft),transform 240ms var(--ease-soft)}
.live-row[data-visible="true"]{opacity:1;transform:none}
.live-row .lr-num{font-family:var(--font-mono, 'JetBrains Mono', monospace);font-size:var(--text-body);color:var(--muted);letter-spacing:0;line-height:1.4;padding-top:6px;display:flex;align-items:flex-start;gap:0.75rem}
.live-row .lr-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:8px;background:transparent;border:1px dashed var(--muted);transition:background-color 200ms var(--ease-soft),border-color 200ms var(--ease-soft),border-style 200ms var(--ease-soft)}
.live-row[data-verdict="green"] .lr-dot{background:var(--green);border:none}
.live-row[data-verdict="amber"] .lr-dot{background:transparent;border:1.5px solid var(--gold)}
.live-row[data-verdict="red"] .lr-dot{background:var(--red);border:none}
.live-row .lr-q{font-family:var(--font-h1h2);font-style:italic;font-size:var(--text-sub);line-height:1.35;color:var(--ink);max-width:48ch;margin-bottom:0.75rem;font-weight:500}
.live-row .lr-q em{color:var(--gold);font-style:italic}
.live-row .lr-text{font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-body);color:var(--ink);line-height:1.65;max-width:62ch;font-variant-numeric:tabular-nums}
.live-row .lr-text.streaming::after{content:"";display:inline-block;width:6px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-0.15em;animation:lr-blink 900ms steps(2,start) infinite}
@keyframes lr-blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .live-row .lr-text.streaming::after{animation:none;opacity:0.6}
  .live-row{transition:none}
}

.live-scorecard{display:none;margin-top:3rem;padding:2rem;border:1px solid var(--ink);border-radius:0.5rem;background:rgba(0,0,0,0.02);opacity:0;transform:translateY(16px);transition:opacity 320ms var(--ease-soft),transform 320ms var(--ease-soft)}
.live-scorecard[data-visible="true"]{display:block;opacity:1;transform:none}
.live-scorecard-eyebrow{font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-meta);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold);margin-bottom:0.75rem;font-weight:500}
.live-scorecard h2,.live-scorecard h3{font-family:var(--font-h1h2);font-size:var(--text-h2);line-height:1.15;letter-spacing:-0.02em;color:var(--ink);font-weight:500;margin-bottom:1.25rem;max-width:36ch}
.live-scorecard h2 em,.live-scorecard h3 em{color:var(--gold);font-style:italic}
.live-scorecard-text{font-family:var(--font-h1h2);font-style:italic;font-size:var(--text-sub);line-height:1.45;color:var(--ink);max-width:64ch;margin-bottom:1.5rem}
.live-scorecard-chips{display:flex;gap:6px;margin-bottom:1.5rem;flex-wrap:wrap}
.live-scorecard-chip{width:16px;height:16px;border-radius:4px;display:inline-block}
.live-scorecard-chip[data-verdict="green"]{background:var(--green)}
.live-scorecard-chip[data-verdict="amber"]{background:transparent;border:1.5px solid var(--gold);width:14px;height:14px}
.live-scorecard-chip[data-verdict="red"]{background:var(--red)}
.live-scorecard-cta{display:flex;gap:1rem;align-items:center;padding-top:1.25rem;border-top:1px solid var(--line);flex-wrap:wrap;font-family:var(--font-body, 'DM Sans', sans-serif)}
.live-scorecard-cta p{font-size:var(--text-body);color:var(--muted);line-height:1.6;max-width:48ch;margin:0}
.live-scorecard-cta a{font-size:var(--text-meta);letter-spacing:0.08em;text-transform:uppercase;color:var(--bg);background:var(--ink);padding:0.75rem 1.25rem;text-decoration:none;border-radius:0;font-weight:500;border:none}
.live-scorecard-cta a:hover{background:var(--gold)}

.live-trust{display:none;margin-top:2rem;padding:1.25rem;border:1px dashed var(--line);font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-meta);color:var(--muted);line-height:1.65;letter-spacing:0.02em;max-width:60ch}
.live-trust[data-visible="true"]{display:block}

.live-share{display:none;margin-top:1.25rem;font-family:var(--font-body, 'DM Sans', sans-serif);font-size:var(--text-meta);color:var(--muted);flex-wrap:wrap;align-items:center;gap:0.75rem}
.live-share[data-visible="true"]{display:flex}
.live-share code{font-family:var(--font-mono, 'JetBrains Mono', monospace);color:var(--ink);background:transparent;font-size:var(--text-meta)}
.live-share button{font-family:inherit;font-size:inherit;background:transparent;border:1px solid var(--line);color:var(--muted);padding:0.5rem 0.75rem;cursor:pointer;letter-spacing:0.06em;text-transform:uppercase;border-radius:0}
.live-share button:hover{color:var(--ink);border-color:var(--ink)}

@media(max-width:600px){
  .live-wrap{padding:5rem 1.25rem 3rem}
  .live-input-row{flex-direction:column}
  .live-submit{width:100%;padding:0.875rem 1.5rem}
  .live-row{grid-template-columns:40px 1fr;gap:0.75rem}
  .live-meta-strip .lm-cache{margin-left:0}
  /* prevent iOS Safari zoom-on-focus: inputs must be >= 16px */
  .live-input{font-size:16px !important}
  .live-input::placeholder{font-size:14px}
  /* tap targets */
  .live-share button{min-height:44px;padding:0.625rem 0.875rem}
  .live-scorecard-cta a{min-height:44px;display:inline-flex;align-items:center}
}

/* Sprint 8: bulletproof hidden + 16px inputs, mobile audit */
[hidden]{display:none !important}
@media(max-width:768px){
  input[type="text"]{font-size:16px !important}
  .live-submit{min-height:48px}
  .live-row{grid-template-columns:1fr;gap:8px}
  .live-row .lr-num{padding-top:0;align-items:center}
  .live-row .lr-dot{margin-top:0}
  .live-row .lr-q{font-size:var(--text-base);line-height:1.5}
}
