/* ─────────────────────────────────────────────────────────────────────────────
   Design-tools — platform shell
   ─────────────────────────────────────────────────────────────────────────────
   The parts every screen shares: the light/dark theme layer, the fixed 64px
   header, the tool menu, the theme switch, the breadcrumb, the step bar, and
   the handful of primitives (buttons, pills, cards, panels) the pages are
   built from.

       <link rel="stylesheet" href="/assets/dt-shell.css">
       <script src="/assets/dt-shell.js"></script>

   Raw values come from jv-tokens.css and are never written out here. What IS
   written here are the theme tokens — the pairs that resolve from one boolean,
   `dark`. Everything visible reads one of those, so a restyle is a change to
   the four token blocks below and nothing else.
   ───────────────────────────────────────────────────────────────────────── */

@import "jv-tokens.css";


/* ── Theme tokens ────────────────────────────────────────────────────────────
   Four blocks, in this order: light default, dark by system preference, then
   the two explicit [data-theme] roots so the header switch wins in both
   directions. Orange is never themed — it is the pointer in both modes.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --dt-page-bg:#ffffff;
  --dt-page-grid:rgba(39,44,205,.055);
  --dt-card:#ffffff;
  --dt-panel:#EEEEF1;
  --dt-track:#eeeef1;
  --dt-border:#B4B4BE;
  --dt-rule:#dcdce1;
  --dt-text:#333333;
  --dt-text-muted:#55555f;
  --dt-text-heading:#272ccd;
  --dt-blue:#272ccd;
  --dt-orange:#ff6237;
  --dt-idle:#8f8f9c;         /* placeholder grey — the same in both modes */
  --dt-off-line:#dcdce1;     /* border of anything not live */
  --dt-off-ink:#8f8f9c;      /* and its label */
  --dt-ok:#2e9e6b;

  --dt-hdr-bg:rgba(255,255,255,.85);
  --dt-hdr-border:#B4B4BE;
  --dt-hdr-label:#272ccd;
  --dt-hdr-muted:#8f8f9c;
  --dt-menu-bg:#ffffff;
  --dt-menu-foot:#EEEEF1;
  --dt-menu-num-idle:#dcdce1;
  --dt-menu-name-idle:#8f8f9c;
  --dt-switch-track:#dcdce1;
  --dt-switch-knob:#8f8f9c;
}

/* The dark values, written once and applied from two roots. Keeping them in
   sync by hand is how a theme drifts, so the block is duplicated verbatim
   rather than paraphrased. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --dt-page-bg:#1D212C;
    --dt-page-grid:rgba(146,150,255,.075);
    --dt-card:#3A4152;
    --dt-panel:#282D3C;
    --dt-track:#4A5265;
    --dt-border:#4A5265;
    --dt-rule:#3A4152;
    --dt-text:#ffffff;
    --dt-text-muted:#B4B4BE;
    --dt-text-heading:#ffffff;
    --dt-blue:#9296ff;
    --dt-off-line:#4A5265;
    --dt-off-ink:#B4B4BE;

    --dt-hdr-bg:rgba(29,33,44,.92);
    --dt-hdr-border:#3A4152;
    --dt-hdr-label:#ffffff;
    --dt-hdr-muted:#B4B4BE;
    --dt-menu-bg:#282D3C;
    --dt-menu-foot:#3A4152;
    --dt-menu-num-idle:#4A5265;
    --dt-menu-name-idle:#B4B4BE;
    --dt-switch-track:#ffffff;
    --dt-switch-knob:#ff6237;

    /* The design-system components read these directly. Overriding the
       variables re-skins every one of them at once — and `--jv-white` is
       deliberately NOT among them: the primary button's label reads from it
       and would go dark on orange. */
    --jv-blue:#9296ff;
    --jv-ghost-border:#4A5265;
    --jv-ink:#ffffff;
    --jv-border:#4A5265;
    --jv-border-color:#4A5265;
    --jv-divider-light:#3A4152;
    --jv-surface-grey:#282D3C;
    --jv-surface-page:#1D212C;
    --jv-surface-card:#3A4152;
    --jv-grid-line:rgba(146,150,255,.075);
  }
}
:root[data-theme="dark"]{
  --dt-page-bg:#1D212C;
  --dt-page-grid:rgba(146,150,255,.075);
  --dt-card:#3A4152;
  --dt-panel:#282D3C;
  --dt-track:#4A5265;
  --dt-border:#4A5265;
  --dt-rule:#3A4152;
  --dt-text:#ffffff;
  --dt-text-muted:#B4B4BE;
  --dt-text-heading:#ffffff;
  --dt-blue:#9296ff;
  --dt-off-line:#4A5265;
  --dt-off-ink:#B4B4BE;

  --dt-hdr-bg:rgba(29,33,44,.92);
  --dt-hdr-border:#3A4152;
  --dt-hdr-label:#ffffff;
  --dt-hdr-muted:#B4B4BE;
  --dt-menu-bg:#282D3C;
  --dt-menu-foot:#3A4152;
  --dt-menu-num-idle:#4A5265;
  --dt-menu-name-idle:#B4B4BE;
  --dt-switch-track:#ffffff;
  --dt-switch-knob:#ff6237;

  --jv-blue:#9296ff;
  --jv-ghost-border:#4A5265;
  --jv-ink:#ffffff;
  --jv-border:#4A5265;
  --jv-border-color:#4A5265;
  --jv-divider-light:#3A4152;
  --jv-surface-grey:#282D3C;
  --jv-surface-page:#1D212C;
  --jv-surface-card:#3A4152;
  --jv-grid-line:rgba(146,150,255,.075);
}


/* ── Base ────────────────────────────────────────────────────────────────── */

*{box-sizing:border-box}

/* Native controls — scrollbars, date pickers, form widgets — follow the theme
   only if the root says so. dt-shell.js marks the root it manages, so a tool
   that declares its own colour scheme keeps it. */
html.dt-managed{color-scheme:light}
html.dt-managed[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme:dark){html.dt-managed:not([data-theme="light"]){color-scheme:dark}}

/* Everything from here to the end of this block is the PAGE base, and it is
   scoped to pages that take the platform header. A full-viewport tool with its
   own top bar (`<body data-dt-header="off">`) links this file only for the
   header, menu and switch below, and keeps the page base it already had — so
   linking the shell can never move its body, its font or its scrolling. */
body:not([data-dt-header="off"]){
  margin:0;
  background:var(--dt-page-bg);
  color:var(--dt-text);
  font-family:var(--jv-font-body);
  font-size:var(--jv-size-quicklink);
  line-height:var(--jv-lh-body);
  -webkit-font-smoothing:antialiased;
}
/* The scope goes inside :where() so it adds no specificity of its own. A base
   rule has to lose to every component rule below it — without this, a scope as
   ordinary as `body a` outranks `.dt-crumbs a` and the breadcrumb comes out
   the wrong colour. */
:where(body:not([data-dt-header="off"])) a{color:var(--dt-blue);text-decoration:none;transition:color var(--jv-dur) var(--jv-ease)}
:where(body:not([data-dt-header="off"])) a:hover{color:var(--dt-orange)}
:where(body:not([data-dt-header="off"])) :is(button,input,textarea,select){font-family:inherit}
:where(body:not([data-dt-header="off"])) :is(input,textarea){background:transparent}
:where(body:not([data-dt-header="off"])) :is(input,textarea)::placeholder{color:var(--dt-idle)}
:where(body:not([data-dt-header="off"])) ::selection{background:var(--jv-tint-active)}

/* The one page background in the system: a flat colour plus a 56×56px grid. */
.dt-surface{
  background-color:var(--dt-page-bg);
  background-image:
    linear-gradient(var(--dt-page-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--dt-page-grid) 1px,transparent 1px);
  background-size:var(--jv-grid-size) var(--jv-grid-size);
  min-height:100vh;
}
/* A tool screen clears the header; home gets the taller hero measure. */
.dt-surface{padding:100px var(--jv-gutter) 0}
.dt-surface.home{padding-top:132px}
.dt-wrap{max-width:var(--jv-content-max);margin:0 auto}


/* ── Type ────────────────────────────────────────────────────────────────────
   Headlines are uppercase mono with negative tracking and end in an orange
   caret — blinking in a hero, static everywhere else. Labels are lowercase
   and snake_cased. Nothing above 24px is set at a fixed size.
   ────────────────────────────────────────────────────────────────────────── */

.dt-eyebrow{
  font-family:var(--jv-font-mono);font-size:var(--jv-size-eyebrow);
  letter-spacing:var(--jv-ls-label);color:var(--dt-blue);margin:0 0 18px;
}
.dt-h1{
  font-family:var(--jv-font-mono);font-weight:700;text-transform:uppercase;
  font-size:var(--jv-size-h1);line-height:var(--jv-lh-h1);letter-spacing:var(--jv-ls-h1);
  color:var(--dt-text);margin:0;
}
.dt-h1.page{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-1.5px;margin:0 0 10px}
.dt-caret{color:var(--dt-orange)}
.dt-caret.blink{animation:jv-caret 1.1s step-end infinite}
.dt-sub{
  font-family:var(--jv-font-display);font-weight:300;font-size:var(--jv-size-sub);
  line-height:var(--jv-lh-sub);color:var(--dt-text-muted);max-width:640px;
  margin:22px 0 0;text-wrap:pretty;
}
.dt-h1.page + .dt-sub{font-size:20px;margin:0 0 44px;max-width:620px}
.dt-label{
  font-family:var(--jv-font-mono);font-size:var(--jv-size-label);
  letter-spacing:var(--jv-ls-label);color:var(--dt-text-muted);
}
.dt-meta{
  font-family:var(--jv-font-mono);font-size:var(--jv-size-eyebrow);
  letter-spacing:var(--jv-ls-ui);color:var(--dt-text-muted);
}
.dt-aside{color:var(--dt-blue)}   /* the parenthetical, always blue, always last */

/* Section rule: a snake_cased label on the left, a count on the right, a
   hairline under both. */
.dt-sectionhead{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:64px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--dt-rule);
}
.dt-sectionhead + .dt-sectionhead,.dt-sectionhead.tight{margin-top:56px}


/* ── Header ──────────────────────────────────────────────────────────────────
   One fixed 64px bar on every screen: the tool button and its label on the
   left, the theme switch on the right. Rendered by dt-shell.js.
   ────────────────────────────────────────────────────────────────────────── */

.dt-header{
  position:fixed;top:0;left:0;right:0;height:var(--jv-nav-height);z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--jv-gutter);
  background:var(--dt-hdr-bg);border-bottom:1px solid var(--dt-hdr-border);
  backdrop-filter:blur(12px);
}
.dt-header-left{position:relative}
.dt-header-id{display:flex;align-items:center;gap:12px}

/* The tool button: the tools mark in the 20px slot, inside a 34px square that
   takes the orange border on hover. The mark is inline SVG filled with
   currentColor, so the button's own colour themes it. */
.dt-toolbtn{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;
  background:transparent;border:1px solid var(--dt-hdr-border);border-radius:var(--jv-radius);
  color:var(--dt-hdr-label);
  cursor:pointer;transition:border-color var(--jv-dur) var(--jv-ease);
}
.dt-toolbtn:hover,.dt-toolbtn[aria-expanded="true"]{border-color:var(--dt-orange)}
.dt-toolbtn svg{display:block;width:20px;height:20px}
.dt-toolname{
  font-family:var(--jv-font-mono);font-weight:700;font-size:var(--jv-size-ui);
  letter-spacing:-.3px;color:var(--dt-hdr-label);
}

/* Dropdown */
.dt-menu{
  position:absolute;top:44px;left:0;min-width:264px;
  background:var(--dt-menu-bg);border:1px solid var(--dt-hdr-border);
  border-radius:var(--jv-radius);overflow:hidden;
}
.dt-menu[hidden]{display:none}
.dt-menu-head{
  font-family:var(--jv-font-mono);font-size:var(--jv-size-label);
  letter-spacing:var(--jv-ls-label);color:var(--dt-hdr-muted);padding:12px 14px 8px;
}
/* A menu row is a row, not a link in prose: no underline, whatever the page
   around it does to anchors. */
.dt-menu a,.dt-menu a:hover{
  display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;
  border-top:1px solid var(--dt-hdr-border);transition:background var(--jv-dur) var(--jv-ease);
}
.dt-menu a:hover{background:var(--jv-tint-active)}
/* The index is derived from array position in dt-shell.js — never written into
   content, so inserting a tool renumbers the rest for free. */
.dt-menu .n{
  font-family:var(--jv-font-mono);font-weight:600;font-size:var(--jv-size-index-sm);
  letter-spacing:var(--jv-ls-index);color:var(--dt-menu-num-idle);
}
.dt-menu .name{
  font-family:var(--jv-font-display);font-weight:500;font-size:var(--jv-size-item);
  color:var(--dt-menu-name-idle);
}
.dt-menu a.current .n{color:var(--dt-orange)}
.dt-menu a.current .name{color:var(--dt-hdr-label)}
.dt-menu a:hover .name{color:var(--dt-hdr-label)}
.dt-menu .home{
  justify-content:space-between;background:var(--dt-menu-foot);padding:12px 14px;
  font-family:var(--jv-font-mono);font-size:var(--jv-size-eyebrow);
  letter-spacing:var(--jv-ls-ui);color:var(--dt-hdr-label);
}
.dt-menu .home .back{color:var(--dt-orange)}

/* Theme switch — global, persisted, and the only control on the right. */
.dt-switch{
  display:flex;align-items:center;gap:8px;height:30px;padding:0;
  background:transparent;border:none;cursor:pointer;
}
.dt-switch .lbl{
  font-family:var(--jv-font-mono);font-size:var(--jv-size-label);
  letter-spacing:var(--jv-ls-ui);color:var(--dt-hdr-muted);
}
.dt-switch .track{
  display:flex;align-items:center;width:34px;height:18px;padding:2px;
  border-radius:var(--jv-radius);background:var(--dt-switch-track);
  justify-content:flex-start;transition:background var(--jv-dur) var(--jv-ease);
}
.dt-switch .knob{width:14px;height:14px;border-radius:2px;background:var(--dt-switch-knob)}
html[data-theme="dark"] .dt-switch .track{justify-content:flex-end}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .dt-switch .track{justify-content:flex-end}
}


/* ── Secondary navigation ────────────────────────────────────────────────────
   Inside a tool: a breadcrumb under the header, and — for multi-step tools —
   a fixed bottom bar carrying the step index, the progress ticks and the
   back / next pair.
   ────────────────────────────────────────────────────────────────────────── */

.dt-crumbs{
  display:flex;align-items:center;gap:10px;margin-bottom:26px;
  font-family:var(--jv-font-mono);font-size:var(--jv-size-eyebrow);letter-spacing:var(--jv-ls-ui);
}
.dt-crumbs a{color:var(--dt-text-muted)}
.dt-crumbs a:hover{color:var(--dt-orange)}
.dt-crumbs .sep{color:var(--dt-rule)}
.dt-crumbs .here{color:var(--dt-blue)}

.dt-stepbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--dt-hdr-bg);backdrop-filter:blur(12px);
  border-top:1px solid var(--dt-border);
}
.dt-stepbar .inner{
  max-width:var(--jv-content-max);margin:0 auto;min-height:44px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--jv-gutter);
}
.dt-stepbar .where{display:flex;align-items:center;gap:22px}
.dt-stepbar .idx{
  font-family:var(--jv-font-mono);font-weight:600;font-size:var(--jv-size-index-sm);
  letter-spacing:var(--jv-ls-index);color:var(--dt-orange);
}
.dt-stepbar .ticks{display:flex;gap:6px}
.dt-stepbar .tick{width:34px;height:3px;border-radius:var(--jv-radius);background:var(--dt-rule)}
.dt-stepbar .tick.done{background:var(--dt-orange)}
.dt-stepbar .acts{display:flex;align-items:center;gap:14px}


/* ── Buttons ─────────────────────────────────────────────────────────────────
   One size, 46px. Primary is the orange fill that lifts 2px; ghost is a
   bordered blue that goes orange. There are no press states, and the only
   disabled treatment is `.off`.
   ────────────────────────────────────────────────────────────────────────── */

.dt-btn{
  display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 20px;
  border:1px solid transparent;border-radius:var(--jv-radius);background:none;cursor:pointer;
  font-family:var(--jv-font-mono);font-size:var(--jv-size-ui);letter-spacing:var(--jv-ls-ui);
  white-space:nowrap;text-decoration:none;
}
.dt-btn.primary{
  background:var(--dt-orange);color:var(--jv-white);
  transition:transform var(--jv-dur-lift) var(--jv-ease);
}
.dt-btn.primary:hover{transform:translateY(-2px);color:var(--jv-white)}
.dt-btn.ghost{
  border-color:var(--jv-ghost-border);color:var(--dt-blue);
  transition:border-color var(--jv-dur) var(--jv-ease),color var(--jv-dur) var(--jv-ease);
}
.dt-btn.ghost:hover{border-color:var(--dt-orange);color:var(--dt-orange)}
.dt-btn.off,.dt-btn:disabled{
  background:var(--dt-rule);border-color:var(--dt-rule);color:var(--dt-idle);
  cursor:not-allowed;transform:none;
}
.dt-btn.small{height:34px;padding:0 14px;font-size:var(--jv-size-eyebrow)}


/* ── Cards, panels, pills ────────────────────────────────────────────────── */

.dt-card{
  background:var(--dt-card);border:1px solid var(--dt-border);border-radius:var(--jv-radius);
  transition:border-color var(--jv-dur) var(--jv-ease);
}
a.dt-card:hover{border-color:var(--dt-orange)}
.dt-card .head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 26px;background:var(--dt-panel);border-bottom:1px solid var(--dt-rule);
}
.dt-card .body{padding:28px 26px 34px}

/* An empty slot — the one place a dashed border appears outside a monogram. */
.dt-slot{
  display:flex;flex-direction:column;justify-content:center;gap:10px;padding:26px;
  border:1px dashed var(--dt-border);border-radius:var(--jv-radius);min-height:200px;
}

.dt-index{
  font-family:var(--jv-font-mono);font-weight:600;font-size:var(--jv-size-index);
  line-height:1;letter-spacing:var(--jv-ls-index);color:var(--dt-orange);
}
.dt-cardtitle{
  font-family:var(--jv-font-display);font-weight:700;font-size:19px;
  letter-spacing:-.3px;color:var(--dt-text-heading);
}
.dt-blurb{
  font-family:var(--jv-font-body);font-size:var(--jv-size-quicklink);
  line-height:var(--jv-lh-body);color:var(--dt-text);margin:0;text-wrap:pretty;
}

/* Tool pill — the tool's own mark, plus its name. */
.dt-pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 8px;
  border:1px solid var(--dt-border);border-radius:var(--jv-radius);background:var(--dt-card);
}
/* The real logo, at the same 26px the monogram occupied. No border and no
   ground of its own: these marks arrive as finished tiles with transparent
   corners, and a box drawn round them would be a second, competing frame. */
.dt-pill .logo{
  width:26px;height:26px;flex:0 0 auto;display:block;object-fit:contain;
  border-radius:var(--jv-radius);
}
/* A mark that is a single colour on transparency — Notion's is — would sink
   into a dark card. Being monochrome is exactly what lets it be flipped, so it
   is; a mark carrying its own colours is left alone. */
:root[data-theme="dark"] .dt-pill .logo.mono-mark{filter:invert(1)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .dt-pill .logo.mono-mark{filter:invert(1)}
}
/* The fallback, for a tool whose artwork has not arrived: a dashed square with
   two letters in it, which is what the whole system used before any of these
   logos existed. */
.dt-pill .mono{
  display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px dashed var(--dt-border);border-radius:var(--jv-radius);background:var(--dt-panel);
  font-family:var(--jv-font-mono);font-weight:700;font-size:10px;letter-spacing:.5px;
  color:var(--dt-idle);
}
.dt-pill .name{
  font-family:var(--jv-font-display);font-weight:500;font-size:var(--jv-size-item);
  color:var(--dt-text);
}

/* Modality tag — a bordered mono label. Vision is orange, everything else
   takes the arriving blue. */
.dt-tag{
  padding:3px 8px;border:1px solid currentColor;border-radius:var(--jv-radius);
  font-family:var(--jv-font-mono);font-size:var(--jv-size-label);
  letter-spacing:var(--jv-ls-ui);color:var(--dt-blue);
}
.dt-tag.vision{color:var(--dt-orange)}
.dt-tag.idle{color:var(--dt-off-ink);border-color:var(--dt-off-line)}

/* Status dot and quota bar, used by the provider chain. */
.dt-dot{width:7px;height:7px;border-radius:50%;background:var(--dt-off-line);flex:0 0 auto}
.dt-dot.live{background:var(--dt-ok)}
.dt-bar{height:4px;border-radius:var(--jv-radius);background:var(--dt-track);overflow:hidden}
.dt-bar i{display:block;height:100%;background:var(--dt-ok)}
.dt-bar i.vision{background:var(--dt-orange)}


/* ── Fields ──────────────────────────────────────────────────────────────── */

.dt-field{display:flex;flex-direction:column;gap:10px}
.dt-input,.dt-textarea{
  padding:14px;border:1px solid var(--dt-border);border-radius:var(--jv-radius);
  font-family:var(--jv-font-body);font-size:var(--jv-size-quicklink);
  line-height:var(--jv-lh-body);color:var(--dt-text);background:transparent;
}
.dt-textarea{min-height:170px;resize:vertical}
.dt-input:focus,.dt-textarea:focus{outline:none;border-color:var(--dt-blue)}


/* ── Responsive ──────────────────────────────────────────────────────────────
   Two breakpoints, inherited from the design system. The header keeps its
   layout at every width.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width:1200px){
  .dt-card .body{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .dt-card .body{grid-template-columns:1fr}
  .dt-stepbar .inner{flex-wrap:wrap;gap:12px}
}