/*! FocalShift Ai · Mission Control shell partials · MC-SHELL-DELIVERY-2 (ruling 454 phase 2, 11 Sep 2026).
    Generated by build/externalise.py from the partial's own inline block(s) — byte-for-byte the same
    rules/code, moved out of the document so the browser can cache them. The filename carries the
    content hash; a changed file is a new name, never an overwrite. */
/* ── from public_html/_dz_start_modal.php: <style id=dz-start-style> ── */
/* WO-DZ1 — scoped to #dz-start only. Tokens come from .fsm-scrim (engine), which
   defines a light set and a html.fs-dark set, so both themes are covered here. */

/* ---------------------------------------------------------------- WO-DZ6 (8/6)
   The brand sweep, declared once and reused by the graph paper AND the header glyph.
   Stops are taken VERBATIM from the platform's most-repeated three-stop
   purple→pink gradient (pulse-ai-studio.php:46, pulse-automations.php:79,
   cloud-wordpress-sites.php:440 — linear-gradient(118deg,#7c3aed,#a855f7 55%,#d946ef))
   and MIRRORED so it reads pinkish purple → pink → pinkish purple, as Hans asked.
   Note it deliberately does NOT spend #ff2e93: that pink stays closehex-reserved. */
#dz-start{--dzs-sweep:linear-gradient(118deg,#7c3aed 0%,#a855f7 26%,#d946ef 50%,#a855f7 74%,#7c3aed 100%);
  --dzs-cell:22px;--dzs-gridop:.30}
html.fs-dark #dz-start,.fs-dark #dz-start{--dzs-gridop:.20}

/* WO-DZ7 (8/6) — Hans: the graph paper belongs to the PAGE BEHIND the popup, not
   inside it, and it is RULED LINES, not dots. So the layer moves off the panel and
   onto this modal's own backdrop: open the pen and the whole page behind the popup
   is soft gradient graph paper, while the panel itself sits clean on top.
   Lines, not dots: two repeating-linear-gradients (horizontal + vertical 1px rules on
   a 22px cell) used as a two-layer MASK — mask layers composite as a union, so the two
   rule sets become one grid — with --dzs-sweep painted through it, so the ruling
   carries the gradient rather than a flat colour.
   position:fixed so the ruling never slides when the scrim scrolls; pointer-events
   stay off it entirely, so the scrim's own click-to-close is untouched.
   Guarded by @supports: without mask support the layer paints nothing at all rather
   than degrading into a solid wash over the page. */
#dz-start .fsm{position:relative;z-index:1}
#dz-start:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:none}
@supports ((-webkit-mask-image:repeating-linear-gradient(0deg,#000,#000)) or (mask-image:repeating-linear-gradient(0deg,#000,#000))){
  #dz-start:before{
    background:var(--dzs-sweep);opacity:var(--dzs-gridop);
    -webkit-mask-image:repeating-linear-gradient(0deg,#000 0,#000 1px,transparent 1px,transparent var(--dzs-cell)),
                       repeating-linear-gradient(90deg,#000 0,#000 1px,transparent 1px,transparent var(--dzs-cell));
            mask-image:repeating-linear-gradient(0deg,#000 0,#000 1px,transparent 1px,transparent var(--dzs-cell)),
                       repeating-linear-gradient(90deg,#000 0,#000 1px,transparent 1px,transparent var(--dzs-cell));
    -webkit-mask-repeat:repeat;mask-repeat:repeat;
    -webkit-mask-position:center;mask-position:center}
  /* dark: the sweep is dimmed in LUMINANCE, not just alpha, so the ruling sits into
     the darkened page instead of glowing off it */
  html.fs-dark #dz-start:before,.fs-dark #dz-start:before{filter:brightness(.72) saturate(.9)}
}

/* header glyph — WO-DZ6: no plate behind the pen, larger, painted with the same sweep.
   Technique: the lucide <svg> strokes are pointed at an SVG paint server (the
   <linearGradient id="dzs-sweep"> defined once below, userSpaceOnUse over the 24×24
   lucide viewBox so ONE sweep crosses the whole glyph rather than one per path).
   A solid fallback colour follows the url() so the glyph never vanishes. */
#dz-start .fsm-hicon{background:none;box-shadow:none;border-radius:0;width:36px;height:36px;flex:0 0 36px;margin-top:-1px}
#dz-start .fsm-hicon i,#dz-start .fsm-hicon svg{width:36px;height:36px}
#dz-start .fsm-hicon svg{stroke:url(#dzs-sweep) #7c3aed;stroke-width:1.5;color:#7c3aed;overflow:visible}
#dz-start .dzs-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

#dz-start .fsm-htx h2{font-family:'Sora','Inter',system-ui,-apple-system,sans-serif;font-weight:600;font-size:18.5px;letter-spacing:-.02em;line-height:1.32}
#dz-start .fsm-htx p{margin-top:5px;font-size:12.5px}
#dz-start .fsm-form{padding:20px 24px 24px}

/* the thread: a hexagon node per door — WO-DZ6 retired the vertical hairline (Hans:
   the line goes, the circles become hexagons). The 24px gutter is kept because the
   nodes live in it; each hex is centred in that gutter, (24-11)/2 = 6.5px in. */
/* WO-TPLSEQ (8/9) — TWO COLUMNS, SIDE BY SIDE. Same list, same rows: only the flow
   changes. grid-auto-flow:column with an explicit row count fills column-first, so the
   reading order stays top-to-bottom down column one and then down column two — a list
   broken in half, not a grid of tiles. The row count is printed by PHP as
   ceil(doors/2) so the split is always even and adding a door never needs a CSS edit.
   The 34px column gap is deliberate: each column keeps the original 24px node gutter,
   and column two's hexagons hang 17.5px into that gap with room to spare.
   align-items:stretch + height:100% on the row makes both columns' rows line up even
   when one description wraps to two lines. */
#dz-start .dzs-thread{list-style:none;margin:0;padding:0 0 0 24px;position:relative;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--dzs-rows,5),auto);
  column-gap:34px;row-gap:8px;align-items:stretch}
#dz-start .dzs-door{margin:0;display:flex}
#dz-start .dzs-door > .dzs-row{flex:1 1 auto}
#dz-start .dzs-row{display:flex;align-items:center;gap:13px;position:relative;text-decoration:none;color:inherit;
  background:var(--pnl);border:1px solid var(--ln);border-radius:10px;padding:13px 14px;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
#dz-start a.dzs-row:hover{border-color:#d7d7ea;box-shadow:0 13px 28px -22px rgba(70,68,120,.55);transform:translateY(-1px)}
html.fs-dark #dz-start a.dzs-row:hover,.fs-dark #dz-start a.dzs-row:hover{border-color:#3a3b56;box-shadow:0 13px 28px -22px rgba(0,0,0,.75)}
/* HEXAGON node (WO-DZ6). The platform hexagon is pointy-top — the same polygon the
   closehex ships (private_html/_fs_closehex.php: polygon(50% 0,100% 25%,100% 75%,
   50% 100%,0 75%,0 25%)), which is by far the most-used hex on the platform. clip-path
   eats borders, so the frame is drawn as a filled hex with an inset hex of panel colour
   on top — the hover then just recolours the frame, keeping the EXISTING hover colour
   (var(--acc)) and timing that Hans approved. */
#dz-start .dzs-node{position:absolute;left:-17.5px;top:50%;margin-top:-6px;width:11px;height:12px;
  background:var(--ln2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:background-color .16s ease}
#dz-start .dzs-node:after{content:"";position:absolute;inset:1.5px;background:var(--pnl);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
#dz-start a.dzs-row:hover .dzs-node{background:var(--acc)}

/* bare 20px glyph — no plate, no filled box (icon-box grids are banned platform-wide) */
#dz-start .dzs-g{flex:0 0 20px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--fsc-muted,#6a6a8b);transition:color .16s ease}
#dz-start .dzs-g i,#dz-start .dzs-g svg{width:20px;height:20px;stroke-width:1.5}
#dz-start a.dzs-row:hover .dzs-g{color:var(--acc2)}

#dz-start .dzs-tx{flex:1 1 auto;min-width:0}
#dz-start .dzs-tx b{display:block;font-family:'Sora','Inter',system-ui,-apple-system,sans-serif;font-size:14px;font-weight:600;
  letter-spacing:-.01em;line-height:1.32;color:var(--tx)}
#dz-start .dzs-tx span{display:block;margin-top:4px;font:500 12.5px/1.55 Inter,system-ui,sans-serif;color:var(--fsc-muted,#6a6a8b)}

#dz-start .dzs-go{flex:0 0 16px;width:16px;height:16px;color:var(--fnt);transition:color .16s ease,transform .16s ease}
#dz-start a.dzs-row:hover .dzs-go{color:var(--acc2);transform:translateX(2px)}

/* honest placeholder — designed, not broken: dashed hairline, no lift, no chevron */
#dz-start .dzs-row.soon{background:transparent;border-style:dashed;cursor:default}
#dz-start .dzs-row.soon .dzs-tx b{color:var(--fsc-muted,#6a6a8b)}
#dz-start .dzs-row.soon .dzs-g{color:var(--fnt)}
/* a hexagon cannot carry a dashed border, so the "not yet" node reads as a lighter
   frame instead — same shape, same place, quieter */
#dz-start .dzs-door .dzs-row.soon .dzs-node{background:var(--ln)}
#dz-start .dzs-chip{flex:0 0 auto;font:800 8.5px/1 Inter,system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fnt);border:1px solid var(--ln2);border-radius:99px;padding:5px 9px;white-space:nowrap}

/* WO-TPLSEQ (8/9) — below 760px two columns stop being readable, so the list folds back
   to the single column it shipped as. grid-template-rows must be reset to `none` as well
   as the flow, or the explicit five-row track would still cut the list in half. */
@media(max-width:760px){
  #dz-start .dzs-thread{grid-auto-flow:row;grid-template-rows:none;column-gap:0}
}
@media(max-width:520px){
  #dz-start .fsm-head{padding:16px 16px}
  #dz-start .fsm-form{padding:17px 16px 20px}
  #dz-start .fsm-foot{padding:14px 16px}
  #dz-start .fsm-htx h2{font-size:17px}
  #dz-start .dzs-thread{padding-left:0}
  #dz-start .dzs-node{display:none}
  #dz-start .fsm-hicon{width:32px;height:32px;flex:0 0 32px}
  #dz-start .fsm-hicon i,#dz-start .fsm-hicon svg{width:32px;height:32px}
  #dz-start .dzs-row{gap:11px;padding:12px 12px;align-items:flex-start}
  #dz-start .dzs-g{margin-top:1px}
  #dz-start .dzs-go{margin-top:2px}
  #dz-start .dzs-chip{margin-top:1px}
}