/* Shared shell for the tool pages: /can-i-run-a-geo-test and
 * /score-your-case-studies. Extracted from the geo page so the two tools
 * cannot drift apart. Everything here is page furniture: the ocean layer,
 * the nav, the tool head, the two-column split, the Carlos panel and the
 * verdict band. Stage internals stay with their own page.
 *
 * Loaded AFTER /notes/article.css and BEFORE each page's inline style, so
 * the cascade order the geo page had is preserved exactly.
 */


/* Ocean layer and page column, same values as index.html and /about. */
body{background:var(--navy-900);overflow-x:hidden}
.ocean-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 22px,transparent 22px 34px);
          mask-image:repeating-linear-gradient(90deg,#000 0 22px,transparent 22px 34px);
}
.ocean-layer .ocean{
  position:absolute;inset:-8% 0;
  background-image:url("/ocean-calm.jpg");background-size:cover;background-position:center;
  opacity:.85;filter:saturate(.62) brightness(.52) contrast(1.05);
}
.page{position:relative;z-index:1;width:80vw;max-width:1440px;margin:0 auto;
  background:var(--navy-800);box-shadow:0 0 100px rgba(0,0,0,.66)}
@media (max-width:1180px){ .page{width:100vw} }

/* Chart roles, all from the DWMS palette. Validated on --navy-700:
   sand vs ink is CVD dE 15.6 and normal-vision 16.1, both clear.
   mint is the target rule only, never a series: mint vs sand sits in the
   6-8 CVD band, which is legal for a labelled rule (secondary encoding by
   mark type) and would not be legal for two adjacent series. */
:root{
  /* The run control. Warm, adjacent to sand, and used nowhere else on the
     site so it can only ever mean "this is the action". White on it is 4.81:1,
     which clears AA for the button's own weight; the lighter hover is only
     ever a background under the same white at a larger effective size. */
  --go:#C44A2E; --go-lt:#D2593C;
  /* ONE height, for both panels and both modes. The result stage used to be
     taller than the input stage, so running the estimate made the whole page
     jump. The fix is not a transition, it is making the result fit: the cards
     carry a picture and a line, and Carlos carries the prose. */
  /* One height per width, never two per width. The pre-to-post jump is what the
     single value prevents; the breakpoints exist because the panel column is a
     fraction of the page and text wraps harder as it narrows, so the same card
     that fits at 1600 overflows at 1280. Values are measured, not guessed. */
  --stage-h:634px;   /* the tallest form card sets it, with margin, and 540 is also the
                        and it is within a hair of the 540 the Carlos panel
                        uses everywhere else on the site, so the component is
                        close to the size it was designed at rather than being
                        stretched to fit a result. */
  --null-mark:rgba(244,237,226,.20);
  /* Slack brand values, used only inside the Carlos panel. Same set and same
     scoping note as index.html; article.css does not carry them. */
  --slack-plum:#4A154B; --slack-deep:#3F0E40; --slack-purple:#611F69;
  --slack-green:#007A5A; --slack-sky:#36C5F0; --slack-teal:#2EB67D;
}

/* ── Cross navigation ────────────────────────────────────────────────────────
   Ported from index.html, and now at the same measurements rather than a
   slimmed copy. The slim version was 58px with a 28px mark and .81rem type,
   which is close enough to the homepage to read as the same bar and different
   enough to read as a worse one. Someone arriving here from search sees this
   header before anything else on the site, so it is the homepage's or it is
   wrong. Every value below is index.html's. */
header.nav{position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:80vw;max-width:1440px;z-index:100;
  background:rgba(1,24,51,0);border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
@media (max-width:1180px){ header.nav{width:100vw} }
@media (max-width:1620px){ :root{--stage-h:676px} }
@media (max-width:1480px){ :root{--stage-h:698px} }
@media (max-width:1340px){ :root{--stage-h:718px} }
/* The narrowest the column ever gets. Between 1180 and 1260 the page is 80vw,
   which is narrower than the 100vw it switches to below 1180. */
@media (max-width:1260px){ :root{--stage-h:744px} }
@media (max-width:1180px){ :root{--stage-h:700px} }
header.nav.stuck{background:rgba(1,15,34,.88);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--sand-line)}
/* The bar carries the wordmark and one button. Six links and a call to action
   made a busy header on a page whose whole job is one instrument, and this page
   is the widest mouth of the funnel: the person arriving is here for the tool,
   not to browse. Everything that was in the bar is in the drop-down, so nothing
   is lost. The wordmark sits a little inside the tool's own column rather than
   flush against it, which is what stops the bar reading as a stray line of
   text. */
:root{--nav-indent:clamp(14px,1.8vw,30px)}
.nav-in{display:flex;align-items:center;gap:24px;height:74px;
  max-width:1440px;margin:0 auto;padding:0 calc(var(--gutter) + var(--nav-indent))}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}

.brand .mark{width:32px;height:32px;flex:none;border-radius:50%}
.brand .name{font-family:var(--serif);font-size:1.04rem;letter-spacing:-.01em;white-space:nowrap;
  color:var(--ink)}
.brand .name span{color:var(--sand)}
.navlinks{display:none;list-style:none;margin:0;padding:0}
.navlinks.open{display:flex;position:absolute;top:74px;left:0;right:0;
  flex-direction:column;align-items:stretch;gap:0;background:rgba(1,15,34,.97);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--sand-line);padding:6px 0}
.navlinks.open a{display:block;text-decoration:none;font-size:.9rem;font-weight:500;
  color:var(--ink-70);padding:10px calc(var(--gutter) + var(--nav-indent));
  transition:color .2s ease,background .2s ease}
.navlinks.open a:hover{color:var(--ink);background:rgba(225,198,153,.06)}
.navlinks.open li.cta{margin-top:6px;border-top:1px solid var(--sand-line)}
.navlinks.open li.cta a{color:var(--sand-lt);font-weight:600}
.burger{display:inline-flex;align-items:center;gap:9px;margin-left:auto;background:none;
  border:1px solid var(--sand-line);border-radius:4px;color:var(--sand-lt);
  padding:9px 15px;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:background .2s ease,border-color .2s ease}
.burger:hover{background:var(--sand-glow);border-color:var(--sand)}
.burger svg{flex:none}
/* Header type runs 25% larger on desktop, scaled rather than stepped: the full
   size lands at 1600px and up and eases back below that. index.html has had
   this since the header was built and this page never got it, which is the
   whole of why the two bars looked like different bars. Verbatim from there,
   same breakpoint, so a change to one is a visible mismatch rather than a
   silent drift. */
@media (min-width:961px){
  .brand .name{font-size:clamp(1.04rem,.5rem + .8vw,1.3rem)}
  .burger{font-size:clamp(.86rem,.3rem + .73vw,1.025rem);padding:10px clamp(14px,1.2vw,22px)}
}


/* The tool owns the first screen. Without this the FAQ's top edge crept above
   the fold on a short viewport and the page read as two things competing for
   the same screen rather than an instrument with reading underneath it. */
.tool{max-width:1440px;margin:0 auto;box-sizing:border-box;min-height:100vh;position:relative;
  padding:calc(74px + clamp(10px,1vw,14px)) var(--gutter) clamp(42px,4vw,62px)}

/* Pushing the questions off the screen entirely hides the half of this page
   that earns the visit, so there is one quiet way in at the bottom edge. */
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(16px,2vw,26px);
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  color:var(--ink-45);transition:color .2s}
.scroll-cue:hover{color:var(--sand)}
.scroll-cue svg{opacity:.7;animation:nudge 2.6s ease-in-out infinite}
.scroll-cue:hover svg{opacity:1}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* The same eyebrow component index.html uses, scoped to the page head so it
   cannot reach the one inside the stage, which is a different, quieter thing. */
.tool-head .eyebrow{font-family:var(--sans);font-size:.71rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  display:flex;align-items:center;gap:12px;margin:0 0 10px}
.tool-head .eyebrow::before{content:"";width:26px;height:1px;background:var(--sand);
  opacity:.65;flex:none}
.tool-head{max-width:820px;margin-bottom:clamp(11px,1.2vw,15px)}
.tool-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.55rem);line-height:1.06;margin:0 0 7px}
.tool-head p{color:var(--ink-70);margin:0;font-size:clamp(.96rem,1.2vw,1.06rem);line-height:1.5}

/* The panel is a fixed component, not a fluid one. index.html gives it roughly
   486x540 inside .carlos-grid, so the column is sized to that rather than the
   panel being stretched to fill half. Stretching it is what made it look
   inflated. The stage takes the remaining width and matches its height. */
.split50{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(20px,2.4vw,32px);align-items:start}
@media (max-width:980px){ .split50{grid-template-columns:1fr} .split50 .stage{order:1} .split50 .cp{order:2} }

.panel{background:var(--navy-700);border:1px solid var(--sand-line);border-radius:6px}
.panel h2{font-family:var(--serif);font-weight:400;font-size:1.22rem;margin:0 0 12px}

/* ── Left: Carlos ─────────────────────────────────────────────────────────
   Verbatim from index.html and p/_template.html. Deliberately not the page
   palette: the panel borrows Slack's aubergine so it reads on sight as a place
   you type rather than another block you read. The only change is the height,
   which tracks the stage on the right instead of the fixed 540px it uses when
   it sits alone in a section. */
.cp{
  display:flex;flex-direction:column;height:var(--stage-h);background:var(--navy-900);
  border:1px solid rgba(97,31,105,.55);border-radius:14px;overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(97,31,105,.35),
    0 0 44px -14px rgba(97,31,105,.65),
    0 26px 60px -30px rgba(0,0,0,.8);
}
.cp-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--slack-plum);
  border-bottom:1px solid rgba(255,255,255,.12);flex:none}
/* index.html gives the header a 42px avatar and a 1.3125rem name because the
   panel stands alone in its own section there and has to announce itself. Here
   it sits beside a working instrument, so it is scaled back to the in-thread
   proportions. Same component, quieter register. */
.cp-head{padding:10px 14px;gap:10px}
.cp-head .cp-av{width:32px;height:32px}
.cp-head .cp-id h3{font-size:.9375rem}
.cp-head .cp-id p{font-size:.5875rem}
.cp-av{width:28px;height:28px;border-radius:50%;flex:none;border:1px solid var(--sand-line);object-fit:cover;display:grid;place-items:center}
.cp-av.lg{width:48px;height:48px;margin-bottom:10px}
.cp-av.me{background:rgba(255,255,255,.05);color:var(--ink-45)}
.cp-id{min-width:0;flex:1}
.cp-id h3{font-family:var(--sans);font-size:.875rem;font-weight:600;line-height:1.2;letter-spacing:0;margin:0}
.cp-id p{font-size:.625rem;color:var(--ink-45);margin:2px 0 0;letter-spacing:.04em}
.cp-btn{width:28px;height:28px;border-radius:50%;border:0;background:none;color:var(--ink-45);
  display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s;flex:none}
.cp-btn:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.cp-btn[hidden]{display:none}

.cp-thread{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:#3A3B42 transparent}
/* The default bar is a mid-grey slab on a near-black panel, which is the one
   piece of chrome on this surface we did not choose. A charcoal pill on the
   panel's own background reads as part of the component. */
.cp-thread::-webkit-scrollbar{width:8px}
.cp-thread::-webkit-scrollbar-track{background:transparent}
.cp-thread::-webkit-scrollbar-thumb{background:#3A3B42;border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
.cp-thread::-webkit-scrollbar-thumb:hover{background:#4E4F58;border:2px solid transparent;
  background-clip:padding-box}
.cp-empty{display:flex;flex-direction:column;align-items:center;margin:auto 0;padding:0 12px;text-align:center}
.cp-status{display:flex;align-items:center;gap:6px;font-size:.625rem;color:var(--slack-teal);margin-bottom:12px}
.cp-ask{font-size:.8125rem;color:var(--ink-70);line-height:1.55;margin:0 0 14px}
.cp-picks{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;max-width:330px}
.cp-pick{padding:8px 10px;border-radius:99px;background:rgba(255,255,255,.03);border:1px solid var(--sand-line);
  color:var(--ink-70);font:inherit;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .18s ease;text-align:center}
.cp-pick:hover{border-color:var(--slack-purple);background:rgba(97,31,105,.22);color:var(--ink)}

.cp-row{display:flex;align-items:flex-end;gap:8px}
.cp-row.me{flex-direction:row-reverse}
.cp-col{max-width:80%;min-width:0}
.cp-bub{border-radius:16px;padding:10px 14px;font-size:.8125rem;line-height:1.62}
.cp-bub p{margin:0 0 .72em}
.cp-bub p:last-child{margin-bottom:0}
.cp-bub strong{font-weight:600}
.cp-row:not(.me) .cp-bub strong{color:#fff}
.cp-row:not(.me) .cp-bub{background:#2C2D33;border:1px solid rgba(255,255,255,.10);color:#F3F3F4;border-bottom-left-radius:5px}
.cp-row.me .cp-bub{background:var(--slack-purple);color:#fff;font-weight:500;border-bottom-right-radius:5px}
.cp-dots{display:flex;align-items:center;gap:5px;padding:3px 0}
.cp-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);animation:bob 1.2s infinite}
.cp-dots i:nth-child(2){animation-delay:.15s}.cp-dots i:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}

.cp-foot{padding:10px 12px 8px;background:var(--slack-deep);border-top:1px solid rgba(255,255,255,.12);flex:none}
.cp-typing{display:flex;align-items:center;gap:5px;height:16px;margin:5px 0 0 4px;
  font-size:.6875rem;color:rgba(255,255,255,.62);opacity:0;transition:opacity .18s ease}
.cp-typing.on{opacity:1}
.cp-typing i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.62);animation:bob 1.2s infinite}
.cp-typing i:nth-child(3){animation-delay:.15s}
.cp-typing i:nth-child(4){animation-delay:.3s}
.cp-form{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:11px;padding:7px 8px 7px 12px;transition:border-color .2s}
.cp-form:focus-within{border-color:var(--slack-sky)}
.cp-form input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:inherit;font-size:.8125rem}
.cp-form input::placeholder{color:var(--ink-45)}
.cp-send{width:28px;height:28px;border-radius:50%;border:0;flex:none;background:var(--slack-green);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .2s}
.cp-send:hover{background:#148567}
.cp-send:disabled{background:rgba(255,255,255,.06);color:var(--ink-45);cursor:default}
@media (max-width:640px){ .cp-picks{grid-template-columns:1fr} }

/* ── Right: the stationary stage ──────────────────────────────────────────── */

.verdict-band{background:var(--sand);color:var(--navy-700);border-radius:5px;
  padding:9px 18px;margin:0 0 clamp(9px,1vw,12px);
  display:flex;align-items:center;gap:18px}
.verdict-band[hidden]{display:none}
.verdict-band .vb-k{font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(1,34,67,.62);
  flex:none;padding-right:18px;border-right:1px solid rgba(1,34,67,.26);
  align-self:stretch;display:flex;align-items:center}
.verdict-band .vb-v{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.1rem,1.6vw,1.32rem);line-height:1.24;letter-spacing:-.01em;
  margin:0;min-width:0}

/* ── What a result card is now ───────────────────────────────────────────────
   A picture and one line. Everything that used to be printed here is either on
   a hover or said by Carlos, who can say it conversationally and only to the
   person who wants it. The card is the evidence; he is the explanation. */

.faq{border-top:1px solid var(--sand-line);background:rgba(1,15,34,.34)}
.faq-in{max-width:1440px;margin:0 auto;padding:clamp(38px,5vw,66px) var(--gutter)}
.faq-in > .eyebrow{font-family:var(--sans);font-size:.71rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sand);
  display:flex;align-items:center;gap:12px;margin:0 0 14px}
.faq-in > .eyebrow::before{content:"";width:26px;height:1px;background:var(--sand);
  opacity:.65;flex:none}
.faq-in h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.2rem);
  line-height:1.1;margin:0 0 clamp(20px,2.4vw,30px);max-width:760px}
.faq-i{border-top:1px solid var(--sand-line);padding:0}
.faq-i:last-of-type{border-bottom:1px solid var(--sand-line)}
.faq-i summary{list-style:none;cursor:pointer;padding:15px 34px 15px 0;position:relative}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary::after{content:"+";position:absolute;right:6px;top:14px;
  color:var(--ink-45);font-size:1.05rem;line-height:1.2;transition:color .15s}
.faq-i[open] summary::after{content:"\2013";color:var(--sand)}
.faq-i summary:hover h3{color:var(--sand)}
.faq-i h3{display:inline;font-family:var(--sans);font-size:1rem;font-weight:600;
  line-height:1.4;margin:0;color:var(--ink);transition:color .15s}
.faq-i p{margin:0 0 17px;padding-right:34px;max-width:70ch;
  font-size:.92rem;line-height:1.66;color:var(--ink-70)}
.faq-more{margin:clamp(20px,2.4vw,30px) 0 0;font-size:.88rem;color:var(--ink-45)}
.faq-more a{color:var(--sand);text-decoration:none;border-bottom:1px solid var(--sand-line)}
.faq-more a:hover{border-bottom-color:var(--sand)}