/* =========================================================
   Scott Consulting — ported from the Claude Design concept
   (decision 0021). Layout/visual styles live inline in
   index.html (as authored in Design); this file holds the
   global base, interactive states, responsive visibility,
   details/summary chrome, animation hooks, and the
   placeholder-banner system.
   ========================================================= */

:root{
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-ink: #0F172A;
  --color-ink-soft: #334155;
  --color-muted: #64748B;
  --color-border: #E2E8F0;
  --color-cream: #FBF8F5;
  --color-cream-border: #F0E7DB;
  --color-clay: #C2703D;
  --color-clay-deep: #8F4E26;
  --color-clay-soft: #F3E4D8;
}

/* -------- base (from the design's helmet block) -------- */
html{ scroll-behavior:smooth; scroll-padding-top:92px; }
body{
  margin:0;
  font-family:Inter,system-ui,sans-serif;
  color:var(--color-ink);
  background:#fff;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:#1D4ED8; }
a:hover{ color:#1E40AF; }
button{ font:inherit; }
input,textarea{ font:inherit; }
::placeholder{ color:#94A3B8; opacity:1; }
:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; }
[data-ink] :focus-visible{ outline-color:var(--color-cream); }

/* -------- skip link -------- */
.skip-link{
  position:fixed; top:-90px; left:16px; z-index:100;
  background:var(--color-ink); color:#fff; padding:12px 18px; border-radius:8px;
  font-weight:600; font-size:14px; text-decoration:none; transition:top .2s;
}
.skip-link:focus{ top:16px; }

/* -------- hover states (compiled from style-hover) -------- */
.hv-ink:hover{ color:var(--color-ink); }
.hv-primary:hover{ background:var(--color-primary-dark); color:#fff; }
.hv-ghost:hover{ border-color:var(--color-ink); color:var(--color-ink); }
.hv-replay:hover{ border-color:#8296B0; color:#fff; }
.hv-inkghost:hover{ background:rgba(255,255,255,.08); color:#fff; }
.hv-clayborder:hover{ border-color:var(--color-clay); }

/* -------- header responsive visibility --------
   Replaces the design's isMobile/showAux JS state. */
.nav-desktop{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex:1 1 auto; min-width:0; }
.nav-mobile{ display:none; }
.site-header{ border-bottom:1px solid var(--color-border); }
.site-header[data-top="1"]{ border-bottom-color:rgba(226,232,240,0); }
@media (max-width:900px){
  .nav-desktop{ display:none; }
  .nav-mobile{ display:flex; align-items:center; gap:6px; margin-left:auto; }
}
@media (max-width:1180px){
  .header-aux{ display:none; }
}

/* -------- details/summary chrome -------- */
summary{ cursor:pointer; list-style:none; }
summary::-webkit-details-marker{ display:none; }
summary::marker{ content:""; }
.chev{ display:inline-flex; transition:transform .2s; }
details[open] > summary .chev{ transform:rotate(45deg); }

/* problem picker: closed = chip in the row; open = takes its own row */
.pain{ display:block; }
.pain > summary{ display:inline-flex; }
.pain[open]{ flex-basis:100%; }
.pain[open] > summary{
  background:var(--color-ink) !important;
  border-color:var(--color-ink) !important;
  color:#fff !important;
}
.pain[open] > summary .chev{ color:#fff; }

/* FAQ items */
.faq-item > summary{ width:100%; box-sizing:border-box; }

/* -------- mobile menu (details-based, JS-enhanced) -------- */
.mnav{ display:block; }
.mnav > summary{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:44px; height:44px; background:none;
  border:1px solid var(--color-border); border-radius:8px;
}
.mnav-bar{ display:block; width:18px; height:2px; background:var(--color-ink); border-radius:2px; }
.mnav-panel{
  position:fixed; inset:0; z-index:70; background:#fff; overflow:auto;
  display:flex; flex-direction:column; padding:12px 20px 40px;
}
body.menu-open{ overflow:hidden; }

/* -------- run log + before/after animation hooks --------
   Content is fully visible in static HTML. JS adds
   [data-animate] only when it is ready to run the reveal,
   so nothing can ever be stranded hidden.               */
.dr, .bar{ transition:opacity .45s ease, transform .45s ease; }
[data-animate] .dr, [data-animate] .bar{ opacity:0; transform:translateY(10px); }
[data-animate] .dr.in, [data-animate] .bar.in{ opacity:1; transform:none; }
#demo-replay[hidden]{ display:none; }

/* -------- placeholder system (carried over from v2) --------
   Anything with [data-placeholder] is counted by main.js into
   a dismissible banner + console warning so unfinished content
   can't ship silently. Visible dashed marks are inline.      */
.placeholder-banner{
  position:sticky; top:0; z-index:500;
  background:var(--color-clay); color:#fff;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:13px; font-weight:600; text-align:center; padding:10px 16px;
}
.placeholder-banner button{
  background:none; border:1px solid rgba(255,255,255,.6); color:#fff;
  border-radius:6px; padding:2px 10px; margin-left:12px;
  font-family:inherit; font-size:12px; cursor:pointer;
}

/* -------- reduced motion (global, from the design) -------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  [data-animate] .dr, [data-animate] .bar{ opacity:1; transform:none; }
}