/* ============================================================================
   CONSOLE REPLICA — the product surface, rebuilt for the marketing page.

   Every measurement here is read from the shipped console, not invented:
     · header      48px, px-3, gap-1                  web/src/components/app-chrome.tsx
     · menu row    rounded-lg px-2.5 py-1 text-sm     web/src/components/surface-nav.tsx
     · dock        rounded-2xl p-1.5, items h-11      web/src/components/dock/{index,item}.tsx
     · content     max-w-6xl px-4 pt-15 pb-28         web/src/routes/_app.tsx
     · radius      0.5rem base → lg 8 / xl 12 / 2xl 16
   There is no sidebar and no left rail. DESIGN.md § Console is explicit about this;
   the mockups this file replaces had invented one.

   Presentation is the second half: .stage gives the window the dot grid, the warm
   glow. It is paper → surface2 → terracotta at low
   alpha — the joinvalley.co composition inside our own token set, never the
   iridescent pastel of the reference.
   ============================================================================ */

/* ---- the stage: dot grid and a warm glow --------------------------------- */

.stage{
  position:relative;
  padding:clamp(26px,4vw,56px) 0;
  isolation:isolate;
  /* The window is authored at 1180px and scaled to fit. --fit is set by mock.js
     from the measured container width so the type never reflows at small sizes —
     it shrinks as a picture would, which is what keeps it reading as a screenshot. */
  --fit:1;
}

/* The ground the panel floats over: an opaque paper band carrying the dot grid,
   faded in and out at the top and bottom edges.
   The band is not decoration — the page runs a full-bleed photograph behind
   everything (body::before), and a dot grid drawn straight onto it is invisible.
   Laying down paper first is what makes the whole treatment legible on both the
   photographic pages and the plain ones. */
.stage::before{
  content:"";position:absolute;inset:-1px 0;z-index:-2;
  background:
    radial-gradient(circle at 1px 1px,var(--faint) 1px,transparent 0) 0 0/22px 22px,
    var(--band);
  /* a short fade only: a long one lets the page's photograph bleed back through
     the top of the band and reads as a seam rather than a transition */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 3.5%,#000 96.5%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 3.5%,#000 96.5%,transparent);
}

/* the warm glow — surface2 into terracotta at 8%, never a hue outside the tokens */
.stage::after{
  content:"";position:absolute;inset:-6% -4%;z-index:-1;
  background:
    radial-gradient(58% 46% at 24% 30%,rgba(180,85,45,.10),transparent 70%),
    radial-gradient(64% 58% at 52% 48%,rgba(255,255,255,.72),transparent 74%),
    radial-gradient(46% 44% at 82% 66%,rgba(255,255,255,.5),transparent 72%);
  filter:blur(6px);
}

/* .bare — the window without its ground. For a mockup that already sits inside
   a frame of its own (the Learn/Ground/Do/Verify panel), where the dot band and
   the glow would be a second frame around the first. */
.stage.bare{padding:0}
.stage.bare::before,.stage.bare::after{display:none}

.stage-in{display:flex;justify-content:center}

/* straight on — used wherever the mockup is the argument and has to be read */
/* align-items and an explicit height are both load-bearing: .stage-in is a flex
   container, so without them .cons stretches to the line height instead of taking
   its authored 720px, and then gets scaled again — rendering the surface at
   fit-squared and clipping its content. Invisible at fit:1, which is every
   full-width stage; it only shows up where the window is scaled down. */
.stage-in{align-items:flex-start;height:calc(var(--consh,720px) * var(--fit))}
.stage .cons{height:var(--consh,720px);transform:scale(var(--fit));transform-origin:top center}

/* There is no tilted variant. The perspective yaw was borrowed from the Valley
   reference, but a product surface photographed at an angle is decoration —
   every number on it is foreshortened and the far edge is unreadable. Straight
   on, at full width, is the whole point: the mockup is the argument. */

.stage-note{
  max-width:760px;margin:14px auto 0;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--faint);text-align:center;
}

/* ---- the console window --------------------------------------------------- */

.cons{
  /* THE LIGHT ISLAND — the page may invert; the product does not.
     Custom properties inherit, so re-declaring the light ramp here insulates
     every rule below it and every inline var() that mock.js emits, whatever
     :root or an enclosing .dark section says. Without it the console goes dark
     inside any ink section, which is what the comment at the foot of this file
     used to claim was already handled and was not.
     These values are the site's light :root verbatim — under a light theme this
     block is a no-op, which is what makes `node scripts/shoot.mjs` a regression
     test for it. */
  --paper:#FBF9F5; --band:#EBE5DB; --panel:#FBF9F5; --white:#FFFFFF;
  --surface:#F4F0E9; --surface2:#EBE5DB;
  --ink:#171310; --ink2:#4C443C; --mut:#7E7469; --faint:#A9A093;
  --line:#E5DED3; --accent:#B4552D; --accent-soft:rgba(180,85,45,.09);
  color-scheme:light;

  width:1180px;flex:none;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  font-family:var(--sans);font-size:16px;line-height:1.5;
  text-align:left;

  position:relative;
}

/* header — 48px of translucent paper over a blur, exactly as shipped */
.cons-hd{
  height:48px;display:flex;align-items:center;gap:4px;padding:0 12px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.75);backdrop-filter:saturate(1.4) blur(16px);
  position:relative;z-index:3;
}
.cons-mark{display:grid;place-items:center;padding:6px;border-radius:8px;color:var(--ink)}
.cons-mark svg{width:20px;height:20px}
.cons-ws{
  display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;
}
.cons-ws svg{width:14px;height:14px;color:var(--mut)}
.cons-div{width:1px;height:20px;background:var(--line);margin:0 6px;flex:none}

/* the menu row — a surface's parts, or nothing at all */
.cons-nav{display:flex;align-items:center;gap:2px;min-width:0;flex:1;overflow:hidden}
.cons-nav>a,.cons-nav>span{
  display:flex;align-items:center;gap:6px;flex:none;
  padding:4px 10px;border-radius:8px;font-size:14px;white-space:nowrap;color:var(--mut);
}
.cons-nav .on{background:var(--surface2);color:var(--ink);font-weight:500}
/* the Agent page's steps carry a tick when done */
.cons-step{display:grid;place-items:center;width:14px;height:14px;border-radius:999px;
  border:1px solid rgba(126,116,105,.4);flex:none}
.cons-step.done{background:var(--ink);border-color:transparent;color:var(--paper)}
.cons-step svg{width:10px;height:10px;stroke-width:3}

.cons-right{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.cons-search{
  display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:12px;color:var(--mut);
}
.cons-search kbd{font-family:var(--mono);font-size:10px;opacity:.7}
.cons-avatar{width:26px;height:26px;border-radius:999px;background:var(--surface2);
  display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink2)}

/* content column — the header overlays it, so it starts under the glass */
.cons-body{height:calc(var(--consh,720px) - 48px);overflow:hidden;padding:0 16px 0}
.cons-col{max-width:1152px;margin:0 auto;padding:28px 0}

/* ---- console primitives (mirrors of the shipped components) --------------- */

.cons h1{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.01em;
  line-height:1.2;color:var(--ink)}
.cons .c-mut{color:var(--mut)}
.cons .c-sm{font-size:14px}
.cons .c-xs{font-size:12px}
.cons .c-num{font-variant-numeric:tabular-nums}

.cons-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
  border-radius:8px;padding:7px 13px;font-size:14px;font-weight:500}
.cons-btn.out{background:transparent;color:var(--ink);border:1px solid var(--line)}
.cons-btn svg{width:16px;height:16px}

/* form-kit Section: a card with a header and hairline-divided rows */
.cons-sec{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cons-sec>.hd{padding:14px 16px;border-bottom:1px solid var(--line)}
.cons-sec>.hd b{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.cons-sec>.hd span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.cons-row{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cons-row:last-child{border-bottom:none}
.cons-row .l{min-width:0;flex:1}
.cons-row .l b{display:block;font-size:14px;font-weight:500;color:var(--ink)}
.cons-row .l span{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.cons-row .l code,.cons-row .l span code{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.cons-row .r{flex:none;display:flex;align-items:center;gap:8px}

.cons-badge{border-radius:6px;padding:2px 7px;font-size:12px;background:var(--surface);color:var(--ink2)}
.cons-badge.ink{background:var(--ink);color:var(--paper)}
.cons-badge.alert{background:rgba(180,85,45,.1);color:var(--accent)}
.cons-badge.off{background:var(--surface2);color:var(--mut)}
.cons-mono{font-family:var(--mono);font-size:12px;color:var(--ink)}

/* the switch primitive */
.cons-sw{width:34px;height:20px;border-radius:999px;background:var(--surface2);position:relative;flex:none}
.cons-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;
  background:var(--white);}
.cons-sw.on{background:var(--ink)}
.cons-sw.on::after{left:auto;right:2px}

.cons-tbl{width:100%;border-collapse:collapse;font-size:14px}
.cons-tbl th{text-align:left;font-weight:400;font-size:12px;color:var(--mut);padding-bottom:8px;
  border-bottom:1px solid var(--line)}
.cons-tbl td{padding:10px 16px 10px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.cons-tbl tr:last-child td{border-bottom:none}
.cons-tbl td.num{text-align:right;padding-right:0;color:var(--mut);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.cons-h4{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--ink);
  margin-bottom:10px;display:flex;align-items:center;gap:6px}
.cons-h4 svg{width:13px;height:13px;color:var(--faint)}

/* ---- the dock ------------------------------------------------------------- */

.cons-dock{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;z-index:4}
.cons-dock nav{
  display:flex;gap:4px;padding:6px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.75);backdrop-filter:saturate(1.4) blur(16px);

}
.cons-dock a{
  display:flex;align-items:center;gap:8px;height:44px;width:44px;justify-content:center;
  border-radius:12px;color:var(--mut);position:relative;
}
.cons-dock a svg{width:20px;height:20px;flex:none}
.cons-dock a.on{background:var(--surface2);color:var(--ink);width:auto;padding:0 14px 0 12px}
.cons-dock a.on span{font-size:14px;font-weight:500;white-space:nowrap}
.cons-dock .badge{
  position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:999px;background:var(--accent);color:#fff;font-size:10px;line-height:16px;
  font-weight:500;text-align:center;
}

/* the content column has to clear the dock, same as the real app */
.cons-body::after{content:"";display:block;height:96px}

/* ---- Playground: the app under test, plus its own URL bar ----------------- */

.cons-urlbar{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.75)}
.cons-urlbar .u{flex:1;border:1px solid var(--line);border-radius:8px;padding:5px 10px;
  font-family:var(--mono);font-size:11px;color:var(--mut);background:var(--white)}
.cons-split{display:grid;grid-template-columns:1fr 340px;height:calc(var(--consh,720px) - 48px - 41px)}
.cons-pane{background:var(--surface);border-right:1px solid var(--line);padding:26px;overflow:hidden}
.cons-aside{padding:20px 18px;overflow:hidden;background:var(--paper)}

/* THE CUSTOMER'S APP — a plausible product, never a real brand or a screenshot.
   This used to be a wireframe of grey bars. The loudest claim on the site is
   "it works inside the app you already built", and a placeholder skeleton under
   that claim reads as vapour. It has to look like software; it must not look
   like anyone's software, so: fictional brand, obviously invented numbers, and
   the "illustration" caption stays under every stage. */
.appwf{background:var(--white);border:1px solid var(--line);border-radius:10px;height:100%;
  overflow:hidden;display:flex;flex-direction:column}
.appwf .ahd{display:flex;align-items:center;gap:16px;padding:0 18px;height:44px;flex:none;
  border-bottom:1px solid var(--line);background:var(--paper)}
.appwf .ahd .brand{font-family:var(--serif);font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.appwf .ahd nav{display:flex;align-items:center;gap:16px;margin-left:auto;font-size:12px;color:var(--mut)}
.appwf .ahd nav b{font-weight:400;color:var(--ink)}
.appwf .ahd .av{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--surface2);font-size:10px;color:var(--ink2)}
.appwf .abody{padding:20px}
.appwf .crumb{font-size:11px;color:var(--faint);margin-bottom:10px}
.appwf .atitle{display:flex;align-items:center;gap:10px}
.appwf .atitle h2{font-family:var(--serif);font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.appwf .apill{border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:11px;
  color:var(--ink2);background:var(--surface)}
.appwf .ameta{margin-top:6px;font-size:12px;color:var(--mut)}
.appwf .alines{width:100%;margin-top:18px;border-top:1px solid var(--line);
  border-collapse:collapse;font-size:13px}
.appwf .alines td{padding:9px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.appwf .alines td:last-child{text-align:right;font-family:var(--mono);font-size:12px;color:var(--ink)}
.appwf .alines td span{color:var(--faint)}
.appwf .atot{display:flex;justify-content:space-between;padding-top:11px;font-size:13px;color:var(--mut)}
.appwf .atot b{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink)}
.appwf .btns{display:flex;gap:10px;margin-top:20px}
.appwf .btns i{font-style:normal;display:grid;place-items:center;height:32px;padding:0 14px;
  border-radius:8px;border:1px solid var(--line);background:var(--paper);font-size:13px;color:var(--ink2)}
.appwf .btns i.hit{background:var(--ink);color:var(--paper);border-color:var(--ink);position:relative}
.appwf .btns i.hit::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--accent);border-radius:12px}
.appwf .tagline{position:relative;margin-top:14px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.appwf .note{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.7;color:var(--faint)}

/* the login wall — what it meets at minute zero, before anything is wired */
.appwf .login{margin:auto;width:280px}
.appwf .login h3{font-family:var(--serif);font-size:19px;letter-spacing:-.02em;color:var(--ink);margin-bottom:4px}
.appwf .login>p{font-size:12px;color:var(--mut);margin-bottom:18px}
.appwf .fld{margin-bottom:11px}
.appwf .fld label{display:block;font-size:11px;color:var(--ink2);margin-bottom:5px}
.appwf .fld span{display:block;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-size:12px;color:var(--faint);background:var(--paper)}
.appwf .login .btns{margin-top:16px}
.appwf .login .btns i{width:100%}

/* ---- the embedded assistant, inside the customer's own app ---------------- */

.cons-embed{display:grid;grid-template-columns:1fr 380px;height:calc(var(--consh,720px) - 41px)}
.cons-embed .host{background:var(--surface);padding:26px;border-right:1px solid var(--line);overflow:hidden}
.cons-widget{background:var(--white);padding:18px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.cons-widget .wh{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cons-widget .wh svg{width:18px;height:18px;color:var(--ink)}
.cons-widget .wh b{font-size:14px;font-weight:500}
.cons-bub{max-width:88%;padding:9px 13px;border-radius:12px;font-size:14px;line-height:1.5}
.cons-bub.us{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.cons-bub.them{align-self:flex-start;background:var(--surface);color:var(--ink2);border-bottom-left-radius:4px}

/* the write-action gate, amber exactly as web/src/components/confirm-card.tsx ships it */
.cons-gate{border:1px solid rgba(245,158,11,.4);background:rgba(245,158,11,.05);border-radius:12px;padding:12px}
.cons-gate .gh{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:#b45309;margin-bottom:8px}
.cons-gate .gh svg{width:16px;height:16px}
.cons-gate .call{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:10px}
.cons-gate .call code{font-family:var(--mono);font-size:13px;color:var(--ink)}
.cons-gate .call .w{background:rgba(245,158,11,.15);color:#b45309;border-radius:4px;padding:0 4px;
  font-size:10px;font-weight:500;text-transform:uppercase;margin-left:6px}
.cons-gate pre{margin-top:6px;background:rgba(244,240,233,.6);border-radius:6px;padding:8px;
  font-family:var(--mono);font-size:11px;color:var(--mut);line-height:1.5;overflow:hidden}
.cons-gate .go{display:flex;gap:8px;margin-top:12px}

/* ---- the resolution chart (ink ramp, fade to transparent) ----------------- */

.cons-chart{height:118px;width:100%;display:block}
.cons-chart .ln{fill:none;stroke:var(--ink);stroke-width:1.6}
.cons-chart .ar{fill:url(#consFade)}
.cons-chart .gr{stroke:var(--line);stroke-width:1}

/* ---- dark sections invert the frame, not the console --------------------- */
.dark .stage::before{opacity:.25}
.dark .stage::after{background:
  radial-gradient(58% 46% at 24% 30%,rgba(180,85,45,.16),transparent 70%),
  radial-gradient(60% 55% at 62% 55%,rgba(255,255,255,.1),transparent 72%)}
.dark .stage-note{color:rgba(255,255,255,.42)}