/* Dominion Forge Images: Codex design (F:\Codex Sandbox\dominion-forge-images-design) ported
   and then re-tuned for legibility (Fred, 2026-07-19). Scoped under #dfi-root so nothing leaks
   into the app shell. Brand rule: the engine reads DOMINION FORGE, never a model name.

   Legibility pass, four deliberate changes from the ported mockup:
   1. TYPE SCALE. The mockup drew labels at 7-9px, which reads on a designer's 27" panel and not
      on a phone. Everything is stepped up through the --t-* tokens below; nothing is smaller
      than 9.5px, and body-grade text (prompt, notes, card titles) is 12.5px and up.
   2. SPACING. Padding and gaps were sized for the smaller type. They scale with it, so the
      panels breathe instead of cramming.
   3. THE REFINE CONTROL. It used to float absolutely inside the prompt box, so it read as part
      of the text field. It is now a real toolbar on its own surface, below a divider.
   4. THE BACKGROUND. .scene used to paint a flat near-black of its own, unrelated to anything the
      chat shell sits on, so the slide read as a cut to a different page. It now paints the SAME
      neural-chassis artwork the chat side shows, at the same geometry, and counter-slides so it
      holds still while the panels travel over it. That is the glide.
      What the chat side actually has behind it: #rendered-scene (the chassis image) at z0 plus
      #bgglass at z1; #bgvideo exists but sits at opacity 0 in the current design. If any of those
      change, .scene has to change with them, or the two views drift apart. See the .scene block
      for why it repaints the artwork rather than showing through to it.
      Text contrast is the panels' job (.glass-panel / .command-rail), never that layer's. */

/* ---------- the slide ----------
   FOUR ELEMENTS MOVE ON THE SAME CLOCK: the app shell leaving right, #dfi-root arriving, .scene
   counter-sliding to stay pinned, and the door sheen. They previously carried four hand-copied
   copies of the same duration and easing, which is how they drift apart. They now read one pair
   of tokens. Change these and everything stays in register.

   860ms, not the original 450ms: a sheet of glass this size has mass, and the eye reads 450ms as
   a cut rather than a pane travelling. Codex's hybrid pass calls for 780-900ms. */
:root {
  --dfi-slide-dur: .86s;
  --dfi-slide-ease: cubic-bezier(.22, .72, .18, 1);
}
body:not(.dfi-anim) #dfi-root { display: none; }
body.dfi-anim #sidebar,
body.dfi-anim #commandbar,
body.dfi-anim #neural-glass,
body.dfi-anim #overlay {
  transition: transform var(--dfi-slide-dur) var(--dfi-slide-ease);
  will-change: transform;
}
body.dfi-open #sidebar,
body.dfi-open #commandbar,
body.dfi-open #neural-glass,
body.dfi-open #overlay {
  /* Carousel flip 2026-07-26: pressing right slides the view LEFT; the Foundry lives rightward. */
  transform: translateX(-108vw);
  pointer-events: none;
}

#dfi-root {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transform: translateX(104vw);
  transition: transform var(--dfi-slide-dur) var(--dfi-slide-ease);

  /* design tokens (the mockup's :root) */
  --void: #010504;
  --void-2: #06100d;
  --glass: rgba(5, 17, 15, .76);
  --glass-deep: rgba(2, 9, 8, .91);
  --lime: #79ff52;
  --lime-hot: #d4ffc4;
  --lime-soft: rgba(121, 255, 82, .22);
  --copper: #c77c42;
  --copper-hot: #f2ad6c;
  --ice: #dcebe7;
  --muted: #77918a;
  --line: rgba(151, 222, 202, .18);
  --line-hot: rgba(121, 255, 82, .52);
  --font-ui: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
  --font-mono: "Cascadia Mono", "Consolas", monospace;

  /* TYPE SCALE, one place to tune. --t-micro is the floor: nothing goes below it. */
  --t-micro: 9.5px;    /* eyebrow-grade mono labels */
  --t-label: 11px;     /* section labels, chips, button text */
  --t-value: 13px;     /* readouts, telemetry numbers */
  --t-body: 13.5px;    /* notes, card titles, list rows */
  --t-read: 15px;      /* the prompt and anything else genuinely read */

  /* SPACING SCALE */
  --pad-panel: 22px;
  --gap-section: 22px;

  /* the mockup's body rule, minus the opaque background (see header note 4) */
  color: var(--ice);
  background: transparent;
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
body.dfi-open #dfi-root { transform: none; }

/* ---------- the glass door (park + return) ----------
   A second, independent motion layered on the open/close slide above. Open/close moves #dfi-root;
   the door moves .app-shell INSIDE it, shoving the whole forge pane to the right and leaving the
   backdrop exposed. Two transforms on two elements compose without fighting each other.

   WHAT THE PARKED STATE REVEALS. Codex's prototype parks the pane over a mock "command surface".
   Here the surface behind the glass is .scene, the neural-chassis artwork that the chat side also
   paints. It is deliberately NOT transformed or scaled when the door opens: its geometry is matched
   pixel-for-pixel to #rendered-scene on the chat side (see the .scene block), and scaling it for a
   parallax flourish would break that alignment and put a seam in the crossing. The reveal is sold
   with light instead of movement, which costs nothing and cannot drift. */
#dfi-root .app-shell {
  transition: transform var(--dfi-slide-dur) var(--dfi-slide-ease);
}
body.dfi-door-moving #dfi-root .app-shell { will-change: transform; }
body.dfi-parked #dfi-root .app-shell { transform: translateX(calc(100vw - 62px)); }
/* the revealed backdrop lifts rather than moves */
body.dfi-parked #dfi-root .scene { filter: contrast(1.06) saturate(1.16) brightness(1.12); }

/* The handle lives in its own gutter (.app-shell padding-left below) so it never covers the
   control deck. It is inside #dfi-root, so it disappears with the panel and needs no separate
   show/hide logic.

   WHY IT IS A SIBLING OF .app-shell AND NOT A CHILD. A position:fixed element inside a
   transformed ancestor is contained by that ancestor, not the viewport. Parented to .app-shell it
   would ride the door for free, but it would also scroll away with the deck the moment the
   content grew past one screen, because top:50vh would resolve against the shell's box rather
   than the window. Kept outside, it stays pinned to the viewport at any scroll depth, and it
   rides the door via the explicit parked transform below. Both behaviours, no trade. */
#dfi-root .glass-door-handle {
  position: fixed; z-index: 90; left: 6px; top: 50vh; width: 48px; height: 96px; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  border: 1px solid rgba(244,142,65,.76); border-radius: 13px 5px 5px 13px; color: #ffd2a3;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 23%),
    linear-gradient(180deg, rgba(74,30,8,.74), rgba(9,12,9,.9) 38%, rgba(34,16,6,.82));
  box-shadow: 0 0 18px rgba(255,91,22,.24), inset 1px 0 rgba(255,225,186,.17), inset -4px 0 10px rgba(0,0,0,.45);
  transition: color .2s, box-shadow .25s, border-radius var(--dfi-slide-dur) var(--dfi-slide-ease),
              transform var(--dfi-slide-dur) var(--dfi-slide-ease);
  animation: dfi-handle-breathe 5.8s ease-in-out infinite;
}
#dfi-root .glass-door-handle::before, #dfi-root .glass-door-handle::after { content: ""; position: absolute; left: 5px; right: 5px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,191,119,.62), transparent); }
#dfi-root .glass-door-handle::before { top: 9px; }
#dfi-root .glass-door-handle::after { bottom: 9px; }
/* the halo stops competing during hover and during travel */
#dfi-root .glass-door-handle:hover { color: #fff1d8; animation-play-state: paused; box-shadow: 0 0 25px rgba(255,91,22,.38), 0 0 9px rgba(121,255,82,.14), inset 1px 0 rgba(255,239,216,.22); }
#dfi-root .glass-door-handle:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
#dfi-root .glass-door-handle svg { width: 22px; height: 22px; transition: transform var(--dfi-slide-dur) var(--dfi-slide-ease); }
#dfi-root .glass-door-handle small { color: #c99168; font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .16em; writing-mode: vertical-rl; }
#dfi-root .handle-light { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-hot); box-shadow: 0 0 5px var(--lime), 0 0 11px var(--lime); }
body.dfi-door-moving #dfi-root .glass-door-handle { animation-play-state: paused; }
/* rides the door: same distance, same clock, so the handle stays the pane's leading edge */
body.dfi-parked #dfi-root .glass-door-handle {
  transform: translateY(-50%) translateX(calc(100vw - 62px));
  border-radius: 5px 13px 13px 5px;
}
body.dfi-parked #dfi-root .glass-door-handle svg { transform: rotate(180deg); }

/* The travelling specular band. It reads as light raking across a moving pane, so it runs only
   while the door is actually in motion. */
#dfi-root .glass-door-sheen {
  position: fixed; z-index: 80; inset: -12% auto -12% -24%; width: 24%; pointer-events: none; opacity: 0;
  transform: skewX(-12deg); background: linear-gradient(90deg, transparent, rgba(236,255,250,.2), rgba(121,255,82,.07), transparent);
  filter: blur(2px); mix-blend-mode: screen;
}
body.dfi-door-moving #dfi-root .glass-door-sheen { animation: dfi-door-sheen var(--dfi-slide-dur) var(--dfi-slide-ease); }

#dfi-root * { box-sizing: border-box; }
#dfi-root button, #dfi-root textarea, #dfi-root input { font: inherit; }
#dfi-root button { color: inherit; }
#dfi-root svg { width: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- scene ----------
   THE SHARED BACKDROP. This paints the same neural-chassis artwork, at the same size, position
   and filter, that #rendered-scene paints behind the chat shell. Same geometry means the two
   line up exactly, so crossing from one view to the other shows no seam.

   Why repaint it instead of just going transparent and letting #rendered-scene show through:
   transparency only works if every shell element actually slides away, and #neural-glass does not
   reliably translate (its transform is overridden in some states). A transparent panel would let
   the chat window ghost through the gutters. Painting our own opaque copy is immune to that.

   THE COUNTER-SLIDE is what sells the glide. .scene is a child of the transformed #dfi-root, so
   by default it would slide in WITH the panels and the background would travel with the page,
   which reads as a cut. Translating it by the exact inverse of the parent pins it to the viewport:
   parent +104vw + child -104vw = a backdrop that never moves while the panels glide across it.
   Both use the same duration and easing, so they stay locked frame for frame. If you change
   #dfi-root's transform or transition, change this one to match or the background will drift. */
#dfi-root .scene {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  /* --veil reproduces whatever opacity #rendered-scene is running at, as a solid layer instead of
     element opacity (real opacity here would let the chat shell ghost through). The app runs the
     chassis at full strength on desktop and dims it to .82 below 900px, so the veil is 0 here and
     picks up .18 in that breakpoint. Keep the two in step or the slide gains a brightness step. */
  --veil: rgba(1, 4, 7, 0);
  background:
    /* forge accent, above the artwork */
    radial-gradient(circle at 50% 88%, rgba(69, 255, 31, .10), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(199, 124, 66, .06), transparent 26%),
    linear-gradient(var(--veil), var(--veil)),
    url("/assets/dominion-neural-chassis-desktop-4k-v3.webp") center / contain no-repeat,
    #010407;
  filter: contrast(1.04) saturate(1.08) brightness(1);
  transform: translateX(-104vw);
  transition: transform var(--dfi-slide-dur) var(--dfi-slide-ease), opacity .5s ease, filter .5s ease;
}
body.dfi-open #dfi-root .scene { transform: none; }
#dfi-root .scene::before { content: ""; position: absolute; inset: 0; opacity: .09; background-image:
  linear-gradient(90deg, transparent 49.8%, rgba(137,255,104,.32) 50%, transparent 50.2%),
  linear-gradient(transparent 49.8%, rgba(137,255,104,.18) 50%, transparent 50.2%); background-size: 94px 94px; mask-image: radial-gradient(circle at 50% 50%, #000, transparent 75%); }
#dfi-root .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.02) 30%, transparent 41%); transform: translateX(-70%); animation: dfi-scene-glare 9s ease-in-out infinite; }
#dfi-root .scene-grid { position: absolute; inset: -12%; opacity: .15; transform: perspective(800px) rotateX(58deg) translateY(43%); background:
  linear-gradient(90deg, transparent 0 12%, rgba(82,255,50,.19) 12.2% 12.4%, transparent 12.6% 48%, rgba(82,255,50,.13) 48.2% 48.4%, transparent 48.6%),
  repeating-linear-gradient(0deg, transparent 0 54px, rgba(119,255,82,.11) 55px, transparent 56px); }
#dfi-root .scene-reactor { position: absolute; left: 50%; bottom: -180px; width: 560px; height: 420px; transform: translateX(-50%); border-radius: 50%; border: 1px solid rgba(130,255,90,.18); box-shadow: 0 0 80px rgba(80,255,35,.11), inset 0 0 90px rgba(80,255,35,.06); }
#dfi-root .scene-reactor::before, #dfi-root .scene-reactor::after { content: ""; position: absolute; border-radius: 50%; inset: 48px; border: 1px dashed rgba(130,255,90,.16); animation: dfi-reactor-spin 24s linear infinite; }
#dfi-root .scene-reactor::after { inset: 112px; border-style: solid; animation-direction: reverse; animation-duration: 16s; }
#dfi-root .scene-sparks i { position: absolute; bottom: 2%; left: calc(12% + var(--x, 0%)); width: 2px; height: 2px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px 2px var(--lime); animation: dfi-spark-drift 7s linear infinite; opacity: 0; }
#dfi-root .scene-sparks i:nth-child(1) { --x: 6%; animation-delay: -1s; }
#dfi-root .scene-sparks i:nth-child(2) { --x: 22%; animation-delay: -4.5s; }
#dfi-root .scene-sparks i:nth-child(3) { --x: 43%; animation-delay: -2.3s; }
#dfi-root .scene-sparks i:nth-child(4) { --x: 59%; animation-delay: -6s; }
#dfi-root .scene-sparks i:nth-child(5) { --x: 71%; animation-delay: -.2s; }
#dfi-root .scene-sparks i:nth-child(6) { --x: 82%; animation-delay: -3.2s; }

/* ---------- shell + command rail ---------- */
/* padding-left is the door gutter: it reserves the strip the handle sits in so the handle never
   covers the control deck, and it frames the pane like a sheet of glass sitting in a channel. */
#dfi-root .app-shell { position: relative; min-height: 100vh; padding: 14px 14px 14px 62px; }
#dfi-root .command-rail {
  position: sticky; top: 8px; z-index: 20; min-height: 96px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; padding: 14px 20px;
  border: 1px solid rgba(166, 227, 210, .22); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 35%), linear-gradient(110deg, rgba(4,18,15,.92), rgba(1,8,7,.86) 55%, rgba(11,21,17,.9));
  box-shadow: 0 16px 48px rgba(0,0,0,.55), inset 0 1px rgba(240,255,250,.11), inset 0 -1px rgba(0,0,0,.8), 0 0 30px rgba(57,255,20,.04);
  backdrop-filter: blur(18px) saturate(1.3);
}
#dfi-root .command-rail::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--lime), transparent); opacity: .55; box-shadow: 0 0 12px var(--lime); }
#dfi-root .brand-lockup { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* The masthead. It was competing with the status readouts at 20px; it now leads the rail. */
#dfi-root .brand-lockup h1 { margin: 5px 0 0; font-size: clamp(27px, 3.1vw, 42px); line-height: 1; letter-spacing: .17em; font-weight: 650; text-shadow: 0 0 26px rgba(121,255,82,.14); }
#dfi-root .vault-header h2 { margin: 5px 0 0; font-size: clamp(23px, 2.5vw, 33px); line-height: 1; letter-spacing: .15em; font-weight: 650; }
#dfi-root .brand-lockup h1 span, #dfi-root .vault-header h2 span { color: var(--lime); text-shadow: 0 0 22px rgba(121,255,82,.5); }
#dfi-root .eyebrow { margin: 0; color: #9ab8ae; font: 700 var(--t-micro)/1.2 var(--font-mono); letter-spacing: .26em; }
#dfi-root .brand-reactor { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(121,255,82,.4); transform: rotate(45deg); background: rgba(2,12,9,.8); box-shadow: 0 0 18px rgba(121,255,82,.12), inset 0 0 15px rgba(121,255,82,.08); }
#dfi-root .brand-reactor::before, #dfi-root .brand-reactor::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(199,124,66,.55); }
#dfi-root .brand-reactor::after { inset: 13px; border-color: rgba(121,255,82,.6); animation: dfi-reactor-spin 8s linear infinite; }
#dfi-root .brand-reactor span { width: 11px; height: 11px; border-radius: 50%; background: var(--lime-hot); box-shadow: 0 0 8px var(--lime), 0 0 21px var(--lime); }
#dfi-root .brand-reactor i { position: absolute; inset: -5px; border: 1px solid rgba(151,222,202,.16); }
#dfi-root .rail-button { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(151,222,202,.2); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent), rgba(2,10,8,.75); cursor: pointer; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: border-color .18s, color .18s, box-shadow .18s; }
#dfi-root .rail-button:hover { color: var(--lime-hot); border-color: var(--line-hot); box-shadow: 0 0 18px rgba(121,255,82,.14), inset 0 0 12px rgba(121,255,82,.06); }
#dfi-root .rail-button svg { width: 23px; }
#dfi-root .close-button { justify-self: end; color: #9eb1ab; }
#dfi-root .rail-status { display: flex; min-width: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
#dfi-root .status-cell { min-width: 162px; padding: 10px 18px; display: grid; grid-template-columns: 14px 1fr; gap: 5px 10px; align-items: center; border-right: 1px solid var(--line); }
#dfi-root .status-cell:last-child { border: 0; }
#dfi-root .status-cell svg, #dfi-root .pulse-dot { grid-row: 1 / span 2; width: 12px; }
#dfi-root .status-cell small { color: #7e9990; font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .2em; }
#dfi-root .status-cell b { color: #c8ded7; font: 600 var(--t-value)/1.2 var(--font-mono); letter-spacing: .05em; }
#dfi-root .status-cell:first-child b { color: var(--lime); }
#dfi-root .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 7px var(--lime); animation: dfi-dot-breathe 2.2s ease-in-out infinite; }

/* ---------- layout + panels ---------- */
#dfi-root .forge-layout { display: grid; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); gap: 14px; margin-top: 14px; min-height: calc(100vh - 132px); }
#dfi-root .glass-panel { position: relative; overflow: hidden; border: 1px solid rgba(150,216,198,.2); background:
  linear-gradient(135deg, rgba(255,255,255,.038), transparent 21%),
  linear-gradient(180deg, rgba(6,20,16,.82), rgba(2,9,7,.87));
  box-shadow: 0 26px 70px rgba(0,0,0,.55), inset 0 1px rgba(235,255,249,.09), inset 0 -1px rgba(0,0,0,.9);
  backdrop-filter: blur(20px) saturate(1.25);
}
#dfi-root .panel-specular { position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 0 7%, rgba(255,255,255,.04) 15%, transparent 23% 100%); }
#dfi-root .control-deck { padding: var(--pad-panel); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
#dfi-root .control-deck::after { content: ""; position: absolute; top: 14px; right: 0; bottom: 14px; width: 1px; background: linear-gradient(transparent, var(--lime), transparent); opacity: .35; }
#dfi-root .deck-section { position: relative; z-index: 1; padding: 0 0 var(--gap-section); margin-bottom: var(--gap-section); border-bottom: 1px solid rgba(151,222,202,.11); }
#dfi-root .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#dfi-root .section-heading > div { display: flex; align-items: baseline; gap: 10px; }
#dfi-root .section-heading span { color: var(--copper-hot); font: 700 var(--t-label)/1 var(--font-mono); }
#dfi-root .section-heading p { margin: 0; color: #c6dbd4; font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .19em; }
#dfi-root .section-heading small { color: #7b968c; font: 600 var(--t-micro)/1 var(--font-mono); letter-spacing: .14em; white-space: nowrap; }

/* REFINE lives in the section header now, not floating in the prompt toolbar (Fred, 2026-07-19).
   It reads as a link rather than a filled button so it does not compete with IGNITE THE FORGE,
   which is the one primary action on this deck. The padding is tap-target, not decoration: the
   label sits at --t-micro to match the character count beside it, which is well under 44px on its
   own. Negative margin keeps the larger hit box from pushing the heading around. */
#dfi-root .directive-section .section-heading { align-items: center; }
#dfi-root .section-heading-tools { display: flex; align-items: center; gap: 14px; flex: none; }
#dfi-root #dfi-refine {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 6px 8px; margin: -6px -8px;
  border: 0; background: transparent; cursor: pointer; color: var(--lime);
  font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(121,255,82,.22); transition: color .18s, text-shadow .18s, opacity .18s;
}
#dfi-root #dfi-refine svg { width: 14px; }
#dfi-root #dfi-refine:hover { color: var(--lime-hot); text-shadow: 0 0 12px rgba(121,255,82,.5); }
#dfi-root #dfi-refine:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
#dfi-root #dfi-refine:disabled { opacity: .45; cursor: default; color: #7b968c; text-shadow: none; }

/* The prompt. A text field the user actually reads back, so it gets --t-read and real padding.
   The tool row below it is a separate surface; see header note 3. */
#dfi-root .prompt-frame { position: relative; border: 1px solid rgba(121,255,82,.29); background: linear-gradient(180deg, rgba(121,255,82,.04), transparent 28%), rgba(0,7,5,.72); box-shadow: inset 0 0 22px rgba(0,0,0,.55), 0 0 18px rgba(121,255,82,.04); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
#dfi-root .prompt-frame::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
#dfi-root .prompt-frame:focus-within { border-color: rgba(121,255,82,.5); box-shadow: inset 0 0 22px rgba(0,0,0,.5), 0 0 24px rgba(121,255,82,.09); }
#dfi-root .prompt-frame textarea { width: 100%; min-height: 132px; resize: vertical; display: block; padding: 16px 16px 14px; border: 0; outline: 0; color: #dceee9; background: transparent; font: 400 var(--t-read)/1.62 "Segoe UI", sans-serif; }
#dfi-root .prompt-frame textarea::placeholder { color: #6d8880; }
#dfi-root .prompt-frame textarea::selection { background: rgba(121,255,82,.25); }
/* Was position:absolute over the textarea, which is exactly why Refine disappeared into the
   field. Now a static toolbar with its own divider and fill. Refine has since moved up to the
   section header, so CLEAR is the only occupant and the row right-aligns it. */
#dfi-root .prompt-tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 9px 11px; border-top: 1px solid rgba(151,222,202,.16); background: rgba(3,13,10,.62); }
#dfi-root .prompt-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 13px; cursor: pointer; border: 1px solid rgba(151,222,202,.2); color: #9db6ae; background: rgba(1,9,7,.6); font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; transition: color .18s, border-color .18s, background .18s, box-shadow .18s; }
#dfi-root .prompt-tools button:hover { color: var(--lime-hot); border-color: rgba(121,255,82,.45); background: rgba(121,255,82,.07); }
#dfi-root .prompt-tools svg { width: 16px; }
#dfi-root #dfi-clear { flex: none; }

#dfi-root .reference-well { margin-top: 12px; min-height: 64px; display: flex; align-items: center; gap: 13px; padding: 12px 14px; cursor: pointer; border: 1px dashed rgba(151,222,202,.19); background: rgba(5,16,13,.52); transition: border-color .2s, background .2s; }
#dfi-root .reference-well:hover, #dfi-root .reference-well:focus-visible { outline: 0; border-color: rgba(121,255,82,.46); background: rgba(121,255,82,.045); }
#dfi-root .reference-well svg { width: 26px; color: var(--copper-hot); }
#dfi-root .reference-well div { display: grid; gap: 6px; flex: 1; min-width: 0; }
#dfi-root .reference-well b { font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .15em; }
#dfi-root .reference-well small { color: #7b948c; font: 500 var(--t-micro)/1.45 var(--font-mono); }
#dfi-root .reference-well > span { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--lime); border: 1px solid rgba(121,255,82,.28); font-size: 19px; }
/* live addition: staged reference plates */
#dfi-root .reference-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#dfi-root .reference-tray figure { position: relative; margin: 0; width: 50px; height: 50px; border: 1px solid rgba(121,255,82,.35); }
#dfi-root .reference-tray img { width: 100%; height: 100%; object-fit: cover; display: block; }
#dfi-root .reference-tray button { position: absolute; top: -8px; right: -8px; width: 19px; height: 19px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #ffb49a; border: 1px solid rgba(199,124,66,.5); background: rgba(10,4,2,.92); font-size: 12px; line-height: 1; }

#dfi-root .segment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
#dfi-root .segment { position: relative; min-height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 11px 6px; cursor: pointer; border: 1px solid rgba(151,222,202,.14); color: #9ab2aa; background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 40%), rgba(1,9,7,.58); transition: transform .15s, border-color .2s, color .2s, box-shadow .2s, background .2s; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
#dfi-root .segment:hover { color: #dcebe7; border-color: rgba(151,222,202,.33); transform: translateY(-1px); }
#dfi-root .segment.selected { color: var(--lime-hot); border-color: rgba(121,255,82,.48); background: linear-gradient(180deg, rgba(121,255,82,.1), transparent 68%), rgba(3,15,10,.8); box-shadow: inset 0 0 15px rgba(121,255,82,.045), 0 0 15px rgba(121,255,82,.065); }
#dfi-root .segment.selected::after { content: ""; position: absolute; left: 17%; right: 17%; bottom: 0; height: 1px; background: var(--lime); box-shadow: 0 0 9px 1px var(--lime); }
#dfi-root .segment b { font: 700 12px/1 var(--font-mono); letter-spacing: .12em; }
#dfi-root .segment small { color: #7b918a; font: 500 var(--t-micro)/1.25 var(--font-mono); text-align: center; }
#dfi-root .segment.selected small { color: #a6c6b8; }
#dfi-root .quality-rune { color: var(--copper-hot); font: 600 16px/1 Georgia, serif; text-shadow: 0 0 9px rgba(242,173,108,.35); }
#dfi-root .shape { display: block; border: 1px solid currentColor; background: linear-gradient(135deg, rgba(121,255,82,.12), transparent); box-shadow: inset 0 0 7px rgba(121,255,82,.08); }
#dfi-root .shape.square { width: 22px; height: 22px; }
#dfi-root .shape.portrait { width: 17px; height: 24px; }
#dfi-root .shape.landscape { width: 28px; height: 19px; }

/* ---------- draft (ARSENAL Wave 3: free NVIDIA lane) ---------- */
#dfi-root .draft-module { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 15px; margin-bottom: 15px; border: 1px solid rgba(121,255,82,.28); background: linear-gradient(100deg, rgba(121,255,82,.07), rgba(2,11,8,.68) 62%); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: border-color .25s, box-shadow .25s, background .25s, opacity .25s; }
#dfi-root .draft-module.active { border-color: rgba(121,255,82,.55); background: linear-gradient(100deg, rgba(121,255,82,.12), rgba(2,11,8,.76) 62%); box-shadow: 0 0 22px rgba(121,255,82,.09); }
#dfi-root .draft-module.unavailable { opacity: .45; }
#dfi-root .draft-module.unavailable .power-toggle { cursor: not-allowed; }
#dfi-root .draft-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; }
#dfi-root .draft-icon i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 6px var(--lime); opacity: .35; }
#dfi-root .draft-icon i:nth-child(1) { left: 3px; top: 17px; }
#dfi-root .draft-icon i:nth-child(2) { left: 17px; top: 3px; }
#dfi-root .draft-icon i:nth-child(3) { left: 31px; top: 17px; }
#dfi-root .draft-module.active .draft-icon i { opacity: 1; }
#dfi-root .draft-module > div:nth-child(2) { display: grid; gap: 6px; min-width: 0; }
#dfi-root .draft-module span { color: #bacec8; font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .17em; }
#dfi-root .draft-module b { color: var(--lime); font: 700 var(--t-value)/1 var(--font-mono); letter-spacing: .08em; }
#dfi-root .draft-module small { color: #7d938c; font: 500 var(--t-micro)/1.5 var(--font-mono); }

/* ---------- batch + telemetry + ignite ---------- */
#dfi-root .batch-module { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 15px; margin-bottom: 15px; border: 1px solid rgba(199,124,66,.28); background: linear-gradient(100deg, rgba(199,124,66,.08), rgba(2,11,8,.68) 62%); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: border-color .25s, box-shadow .25s, background .25s; }
#dfi-root .batch-module.active { border-color: rgba(121,255,82,.42); background: linear-gradient(100deg, rgba(121,255,82,.09), rgba(2,11,8,.74) 62%); box-shadow: 0 0 22px rgba(121,255,82,.06); }
#dfi-root .batch-icon { position: relative; width: 40px; height: 40px; }
#dfi-root .batch-icon i { position: absolute; width: 24px; height: 24px; border: 1px solid rgba(242,173,108,.42); background: rgba(7,11,8,.9); }
#dfi-root .batch-icon i:nth-child(1) { left: 1px; top: 1px; }
#dfi-root .batch-icon i:nth-child(2) { left: 8px; top: 8px; }
#dfi-root .batch-icon i:nth-child(3) { left: 15px; top: 15px; border-color: var(--copper-hot); box-shadow: 0 0 10px rgba(242,173,108,.17); }
#dfi-root .batch-module.active .batch-icon i { border-color: rgba(121,255,82,.55); box-shadow: 0 0 10px rgba(121,255,82,.1); }
#dfi-root .batch-module > div:nth-child(2) { display: grid; gap: 6px; min-width: 0; }
#dfi-root .batch-module span { color: #bacec8; font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .17em; }
#dfi-root .batch-module b { color: var(--copper-hot); font: 700 var(--t-value)/1 var(--font-mono); letter-spacing: .08em; }
#dfi-root .batch-module.active b { color: var(--lime); }
#dfi-root .batch-module small { color: #7d938c; font: 500 var(--t-micro)/1.5 var(--font-mono); }
#dfi-root .power-toggle { position: relative; flex: none; width: 48px; height: 26px; padding: 0; cursor: pointer; border: 1px solid rgba(151,222,202,.22); border-radius: 20px; background: rgba(0,6,4,.8); }
#dfi-root .power-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #56665f; box-shadow: 0 0 0 1px #1f2e29; transition: transform .22s ease, background .22s, box-shadow .22s; }
#dfi-root .power-toggle[aria-checked="true"] { border-color: rgba(121,255,82,.55); }
#dfi-root .power-toggle[aria-checked="true"] i { transform: translateX(22px); background: var(--lime-hot); box-shadow: 0 0 5px var(--lime), 0 0 13px var(--lime); }

#dfi-root .telemetry-module { position: relative; z-index: 1; margin-bottom: 15px; padding: 14px 15px 12px; border: 1px solid rgba(151,222,202,.13); background: rgba(0,7,5,.58); }
#dfi-root .telemetry-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; }
#dfi-root .telemetry-line span { color: #7c948c; font: 600 var(--t-micro)/1 var(--font-mono); letter-spacing: .15em; }
#dfi-root .telemetry-line b { color: #c6dad4; font: 700 var(--t-value)/1 var(--font-mono); }
#dfi-root .telemetry-line:nth-child(2) b { color: var(--copper-hot); }
#dfi-root .telemetry-line:nth-child(3) b { color: var(--lime); }
#dfi-root .energy-meter { display: flex; gap: 3px; height: 6px; margin: 11px 0 9px; }
#dfi-root .energy-meter i { flex: 1; background: rgba(121,255,82,.09); border: 1px solid rgba(121,255,82,.08); }
#dfi-root .energy-meter i.lit { background: rgba(121,255,82,.65); border-color: rgba(160,255,133,.6); box-shadow: 0 0 5px rgba(121,255,82,.35); }
/* #82998f, not the mockup's dimmer grey: at --t-micro this is small text, so it has to clear the
   4.5:1 AA floor against the panel glass even where the chassis backdrop is at its brightest. */
#dfi-root .telemetry-module p { margin: 0; color: #82998f; font: 500 var(--t-micro)/1.45 var(--font-mono); }

/* The forge button now sits directly under the prompt (Fred, 2026-07-23: a casual user should
   type and forge, with every setting optional below). Give it clear breathing room in its new
   mid-panel home. */
#dfi-root .directive-section .forge-button { margin-top: 14px; }
#dfi-root .forge-optional-note { margin: 8px 2px 4px; font-size: 11px; line-height: 1.4; color: var(--muted, #8ba0ae); }

/* ---- the working state, and the arrow that points at the gallery ---------------------------
 * Both live directly under the forge button, because on a phone the vault (and the old progress
 * strip inside it) is an entire screen further down. That distance is the whole reason the app
 * looked frozen while it was busy: the only feedback was somewhere the user could not see. */
#dfi-root .forge-point { display: grid; place-items: center; height: 34px; margin: 2px 0 0; }
#dfi-root .forge-point[hidden] { display: none; }
#dfi-root .forge-point svg {
  width: 30px; height: 30px; fill: none;
  stroke: var(--lime-hot, #b9ff9d); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(121, 255, 82, .55));
  animation: dfi-point-blink 900ms ease-in-out infinite;
}
@keyframes dfi-point-blink {
  0%, 100% { opacity: .15; transform: translateY(-3px); }
  50%      { opacity: 1;   transform: translateY(3px); }
}
/* On a wide screen the gallery is BESIDE the deck, so a downward arrow would point at nothing. */
@media (min-width: 621px) { #dfi-root .forge-point { display: none !important; } }
@media (prefers-reduced-motion: reduce) { #dfi-root .forge-point svg { animation: none; opacity: .9; } }

#dfi-root .forge-working {
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 11px;
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid rgba(121, 255, 82, .42);
  background: linear-gradient(90deg, rgba(20, 72, 29, .32), rgba(2, 15, 9, .9));
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
#dfi-root .forge-working[hidden] { display: none; }
#dfi-root .forge-working b { display: block; color: var(--lime-hot); font: 700 var(--t-label)/1.1 var(--font-mono); letter-spacing: .12em; }
#dfi-root .forge-working small { display: block; margin-top: 4px; color: #9ab5a9; font-size: 11px; line-height: 1.4; }
#dfi-root .forge-working #dfi-working-secs { color: var(--lime); font-weight: 700; }
#dfi-root .fw-spin { position: relative; width: 26px; height: 26px; }
#dfi-root .fw-spin i { position: absolute; inset: 0; border: 2px solid transparent; border-top-color: var(--lime); border-radius: 50%; animation: dfi-fw-spin 1.1s linear infinite; }
#dfi-root .fw-spin i:nth-child(2) { inset: 6px; border-top-color: rgba(121, 255, 82, .5); animation-duration: 1.7s; animation-direction: reverse; }
@keyframes dfi-fw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #dfi-root .fw-spin i { animation-duration: 3s; } }

#dfi-root .forge-deck-note { margin: 9px 2px 0; font-size: 11.5px; line-height: 1.45; color: #a8c9b4; }
#dfi-root .forge-deck-note[hidden] { display: none; }
#dfi-root .forge-deck-note.is-fault { color: #ffb49a; }
#dfi-root .forge-button { position: relative; z-index: 1; width: 100%; min-height: 76px; display: grid; grid-template-columns: 44px 1fr 26px; align-items: center; gap: 14px; padding: 12px 18px; cursor: pointer; overflow: hidden; border: 1px solid rgba(121,255,82,.61); color: var(--lime-hot); text-align: left; background:
  linear-gradient(180deg, rgba(185,255,157,.14), transparent 46%),
  linear-gradient(90deg, rgba(20,70,31,.92), rgba(4,24,13,.95) 55%, rgba(18,58,25,.88));
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: inset 0 1px rgba(224,255,211,.21), inset 0 -9px 19px rgba(0,0,0,.32), 0 0 23px rgba(121,255,82,.13);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
#dfi-root .forge-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.16) 48%, transparent 70%); transform: translateX(-120%); transition: transform .65s ease; }
#dfi-root .forge-button:hover { filter: brightness(1.12); box-shadow: inset 0 1px rgba(224,255,211,.26), inset 0 -9px 19px rgba(0,0,0,.28), 0 0 34px rgba(121,255,82,.25); }
#dfi-root .forge-button:hover::before { transform: translateX(120%); }
#dfi-root .forge-button:active { transform: translateY(1px) scale(.997); }
#dfi-root .forge-button:disabled { cursor: default; filter: saturate(.55) brightness(.85); }
#dfi-root .forge-button small { display: block; margin-bottom: 6px; color: #a3d497; font: 600 var(--t-micro)/1 var(--font-mono); letter-spacing: .16em; }
#dfi-root .forge-button b { display: block; font: 700 17px/1 var(--font-ui); letter-spacing: .13em; }
#dfi-root .forge-button > svg { justify-self: end; width: 23px; }
#dfi-root .forge-core { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(184,255,159,.5); transform: rotate(45deg); background: rgba(2,10,5,.64); box-shadow: inset 0 0 10px rgba(121,255,82,.1), 0 0 12px rgba(121,255,82,.1); }
#dfi-root .forge-core::before, #dfi-root .forge-core::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(121,255,82,.4); }
#dfi-root .forge-core::after { inset: 10px; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
#dfi-root .forge-core i { position: absolute; inset: -4px; border: 1px solid rgba(121,255,82,.12); animation: dfi-reactor-spin 9s linear infinite; }
#dfi-root .forge-button.igniting .forge-core { animation: dfi-core-ignite .65s ease-in-out infinite alternate; }

/* live addition: the foundry queue tray (batch directives awaiting submission) */
#dfi-root .foundry-tray { position: relative; z-index: 1; margin-top: 15px; padding: 13px 15px; border: 1px solid rgba(199,124,66,.4); background: linear-gradient(100deg, rgba(199,124,66,.09), rgba(2,11,8,.8) 62%); }
#dfi-root .foundry-tray[hidden] { display: none; }
#dfi-root .foundry-tray header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
#dfi-root .foundry-tray header b { color: var(--copper-hot); font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .15em; }
#dfi-root .foundry-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(151,222,202,.08); }
#dfi-root .foundry-row span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #c2d6d0; font-size: var(--t-body); }
#dfi-root .foundry-row small { color: #7b948c; font: 500 var(--t-micro)/1 var(--font-mono); white-space: nowrap; }
#dfi-root .foundry-row button, #dfi-root .foundry-tray header button { border: 0; background: transparent; color: #ff9c8b; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
#dfi-root .foundry-submit { width: 100%; margin-top: 11px; min-height: 42px; cursor: pointer; color: var(--lime-hot); border: 1px solid rgba(121,255,82,.5); background: rgba(121,255,82,.08); font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .14em; }
#dfi-root .foundry-submit:hover { box-shadow: 0 0 14px rgba(121,255,82,.15); }
#dfi-root .foundry-submit:disabled { opacity: .5; cursor: default; }

/* ---------- vault ---------- */
#dfi-root .vault { display: flex; flex-direction: column; min-width: 0; clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px), 0 14px); }
#dfi-root .vault-header { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 26px 26px 22px; border-bottom: 1px solid rgba(151,222,202,.12); background: linear-gradient(90deg, rgba(121,255,82,.03), transparent 44%); }
#dfi-root .vault-header .eyebrow { display: flex; align-items: center; gap: 9px; }
#dfi-root .vault-header .pulse-dot { grid-row: auto; }
#dfi-root .vault-note { margin: 10px 0 0; color: #85a096; font-size: var(--t-body); line-height: 1.5; }
#dfi-root .vault-actions { display: flex; align-items: center; gap: 9px; }
#dfi-root .search-control { width: min(270px, 22vw); height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid rgba(151,222,202,.15); background: rgba(0,7,5,.55); }
#dfi-root .search-control:focus-within { border-color: rgba(121,255,82,.4); }
#dfi-root .search-control svg { flex: none; width: 16px; color: #7c938c; }
#dfi-root .search-control input { min-width: 0; width: 100%; border: 0; outline: 0; color: #cfe0db; background: transparent; font-size: var(--t-body); }
#dfi-root .search-control input::placeholder { color: #66807a; }
#dfi-root .filter-button { height: 42px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; cursor: pointer; border: 1px solid rgba(151,222,202,.14); color: #8ba49b; background: rgba(0,7,5,.52); font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .13em; }
#dfi-root .filter-button svg { width: 16px; }
#dfi-root .filter-button span { color: #6b8078; }
#dfi-root .filter-button:hover, #dfi-root .filter-button.active { color: var(--lime-hot); border-color: rgba(121,255,82,.4); background: rgba(121,255,82,.06); box-shadow: inset 0 -1px var(--lime); }

#dfi-root .generation-strip { position: relative; z-index: 2; display: grid; grid-template-columns: 44px minmax(180px, .8fr) minmax(160px, 1fr) 48px; align-items: center; gap: 14px; margin: 14px 18px 0; padding: 13px 16px; border: 1px solid rgba(121,255,82,.37); background: linear-gradient(90deg, rgba(20,72,29,.28), rgba(2,15,9,.92)); box-shadow: 0 0 24px rgba(121,255,82,.08), inset 0 1px rgba(214,255,198,.08); }
#dfi-root .generation-strip[hidden] { display: none; }
#dfi-root .generation-strip.fault { border-color: rgba(255,124,90,.55); }
#dfi-root .generation-strip.fault b { color: #ffb49a; }
#dfi-root .forge-spinner { position: relative; width: 34px; height: 34px; border: 1px solid rgba(121,255,82,.22); transform: rotate(45deg); }
#dfi-root .forge-spinner i { position: absolute; inset: 4px; border: 1px solid rgba(121,255,82,.45); animation: dfi-reactor-spin 2s linear infinite; }
#dfi-root .forge-spinner i:nth-child(2) { inset: 8px; animation-direction: reverse; }
#dfi-root .forge-spinner i:nth-child(3) { inset: 12px; background: var(--lime); box-shadow: 0 0 7px var(--lime); border: 0; }
#dfi-root .generation-strip > div:nth-child(2) { display: grid; gap: 7px; min-width: 0; }
#dfi-root .generation-strip b { color: var(--lime-hot); font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .14em; }
#dfi-root .generation-strip span { color: #8ba49b; font-size: var(--t-body); }
#dfi-root .progress-track { height: 5px; overflow: hidden; background: rgba(121,255,82,.08); }
#dfi-root .progress-track i { display: block; width: 8%; height: 100%; background: linear-gradient(90deg, #429a33, var(--lime-hot)); box-shadow: 0 0 9px var(--lime); transition: width .2s linear; }
/* Indeterminate while a picture is being made. The old bar crept toward 92% on a timer with no
   knowledge of the request, so it claimed a completeness it could not know and always finished
   late; this one only claims to be moving. */
#dfi-root .progress-track.indeterminate i {
  width: 34%; transition: none;
  animation: dfi-track-sweep 1.5s ease-in-out infinite;
}
@keyframes dfi-track-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}
@media (prefers-reduced-motion: reduce) {
  #dfi-root .progress-track.indeterminate i { animation-duration: 3.4s; }
}
#dfi-root .generation-strip strong { color: var(--lime); font: 700 15px/1 var(--font-mono); text-align: right; }

#dfi-root .gallery { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(260px, 1fr); gap: 14px; padding: 16px 18px; }
#dfi-root .gallery-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: #7b948c; font: 500 var(--t-body)/1.75 var(--font-mono); padding: 48px 24px; }
#dfi-root .creation-card { position: relative; min-height: 270px; overflow: hidden; cursor: pointer; border: 1px solid rgba(151,222,202,.17); background: #020806; clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); transition: transform .2s ease, border-color .25s, box-shadow .25s; }
#dfi-root .creation-card:hover { transform: translateY(-2px); border-color: rgba(121,255,82,.43); box-shadow: 0 13px 28px rgba(0,0,0,.42), 0 0 20px rgba(121,255,82,.07); }
#dfi-root .creation-card.hidden-card { display: none; }
#dfi-root .creation-art { position: absolute; inset: 0; overflow: hidden; background: #03100c; }
#dfi-root .creation-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.03), transparent 45%, rgba(0,6,4,.72)); z-index: 5; }
#dfi-root .creation-art::after { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(circle, rgba(215,255,199,.7) 0 1px, transparent 1.5px); background-size: 37px 43px; mask-image: linear-gradient(transparent, #000 25%, transparent 80%); animation: dfi-dust-drift 14s linear infinite; }
#dfi-root .creation-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* pending batch job card art: the foundry rings from the mockup */
#dfi-root .art-forge { background:
  radial-gradient(circle at 51% 50%, #fff1ca 0 1%, #ff9c48 2%, rgba(213,79,14,.6) 7%, transparent 18%),
  conic-gradient(from 10deg at 50% 50%, transparent, rgba(255,111,34,.2), transparent 13%, rgba(121,255,82,.1), transparent 31%, rgba(255,111,34,.24), transparent 48%, rgba(121,255,82,.11), transparent 72%),
  radial-gradient(circle at 50% 50%, #291006, #08120d 56%, #020604); }
#dfi-root .art-forge i { position: absolute; inset: calc(12% + var(--i, 0%)); border: 1px solid rgba(226,130,63,.38); border-radius: 50%; box-shadow: inset 0 0 17px rgba(255,117,34,.08); }
#dfi-root .art-forge i:nth-child(1) { --i: 0%; }
#dfi-root .art-forge i:nth-child(2) { --i: 8%; border-style: dashed; animation: dfi-reactor-spin 19s linear infinite; }
#dfi-root .art-forge i:nth-child(3) { --i: 18%; border-color: rgba(121,255,82,.25); }
#dfi-root .card-chrome { position: absolute; z-index: 7; top: 11px; left: 11px; right: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#dfi-root .card-chrome > span { padding: 6px 10px; border: 1px solid rgba(151,222,202,.17); color: #a3bab2; background: rgba(0,7,5,.74); backdrop-filter: blur(8px); font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .14em; }
#dfi-root .favorite { flex: none; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(151,222,202,.18); color: #8aa198; background: rgba(0,7,5,.72); font-size: 16px; }
#dfi-root .favorite.active { color: var(--lime-hot); border-color: rgba(121,255,82,.4); text-shadow: 0 0 8px var(--lime); }
#dfi-root .creation-meta { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 15px 14px; background: linear-gradient(180deg, rgba(2,8,6,.1), rgba(1,7,5,.94) 25%); border-top: 1px solid rgba(151,222,202,.11); }
#dfi-root .creation-meta > div { display: grid; gap: 7px; min-width: 0; }
#dfi-root .creation-meta b { overflow: hidden; color: #dceee9; font: 700 var(--t-value)/1.15 var(--font-ui); letter-spacing: .1em; white-space: nowrap; text-overflow: ellipsis; }
#dfi-root .creation-meta small { color: #82998f; font: 500 var(--t-micro)/1 var(--font-mono); }
#dfi-root .card-action { flex: none; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--copper-hot); border: 1px solid rgba(199,124,66,.32); background: rgba(17,9,4,.65); }
#dfi-root .card-action:hover { color: #ffd0a0; border-color: rgba(242,173,108,.6); box-shadow: 0 0 13px rgba(242,173,108,.13); }
#dfi-root .card-action svg { width: 17px; }
#dfi-root .card-action.collect { color: var(--lime); border-color: rgba(121,255,82,.4); background: rgba(4,17,7,.7); font: 700 var(--t-micro)/1 var(--font-mono); letter-spacing: .08em; width: auto; padding: 0 12px; }
/* ---------- device folder bar ----------
   Sits above the vault footer and carries the one honest sentence about what THIS device can do
   with the images. Copper while unlinked (an invitation), lime once it is live (a working path
   off the device), amber when it needs the one permission click a browser restart costs. */
#dfi-root .folder-bar {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 13px 20px;
  border-top: 1px solid rgba(151, 222, 202, .12);
  background: linear-gradient(100deg, rgba(199, 124, 66, .08), rgba(2, 11, 8, .62) 62%);
}
#dfi-root .folder-bar[data-state="linked"] { background: linear-gradient(100deg, rgba(121, 255, 82, .09), rgba(2, 11, 8, .7) 62%); }
#dfi-root .folder-bar[data-state="needs-permission"] { background: linear-gradient(100deg, rgba(255, 190, 80, .10), rgba(2, 11, 8, .7) 62%); }
#dfi-root .folder-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(199, 124, 66, .42); color: var(--copper-hot); background: rgba(7, 11, 8, .9); }
#dfi-root .folder-bar[data-state="linked"] .folder-icon { border-color: rgba(121, 255, 82, .5); color: var(--lime); box-shadow: 0 0 12px rgba(121, 255, 82, .12); }
#dfi-root .folder-icon svg { width: 21px; }
#dfi-root .folder-copy { display: grid; gap: 5px; min-width: 0; }
#dfi-root .folder-copy span { color: #bacec8; font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .17em; }
#dfi-root .folder-copy b { color: var(--copper-hot); font: 700 var(--t-value)/1 var(--font-mono); letter-spacing: .08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#dfi-root .folder-bar[data-state="linked"] .folder-copy b { color: var(--lime); }
#dfi-root .folder-copy small { color: #7d938c; font: 500 var(--t-micro)/1.5 var(--font-mono); }
#dfi-root .folder-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 790px) {
  #dfi-root .folder-bar { grid-template-columns: 34px minmax(0, 1fr); padding: 12px 15px; }
  #dfi-root .folder-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

#dfi-root .vault-footer { position: relative; z-index: 1; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 20px; border-top: 1px solid rgba(151,222,202,.12); background: rgba(0,7,5,.58); }
#dfi-root .vault-footer > div { display: grid; grid-template-columns: 10px auto; gap: 5px 9px; align-items: center; }
#dfi-root .storage-light { grid-row: 1 / span 2; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 7px var(--lime); }
#dfi-root .vault-footer b { color: #aec6bd; font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .13em; }
#dfi-root .vault-footer small { color: #82998f; font: 500 var(--t-micro)/1 var(--font-mono); }
/* min-height, not just line-height: as a borderless text button this was a 19px tap target. */
#dfi-root .vault-footer button { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 6px; border: 0; color: #85a29a; background: transparent; cursor: pointer; font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .12em; }
#dfi-root .vault-footer button:hover { color: var(--lime); }
#dfi-root .vault-footer svg { width: 17px; }

/* ---------- viewer (live addition, design vocabulary) ---------- */
#dfi-root .dfi-viewer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(0, 4, 3, .82); backdrop-filter: blur(6px); }
#dfi-root .dfi-viewer-card { max-width: min(94vw, 760px); max-height: 94vh; overflow-y: auto; border: 1px solid rgba(121,255,82,.4); background: linear-gradient(180deg, rgba(6,20,16,.96), rgba(2,9,7,.97)); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 34px rgba(121,255,82,.1); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
#dfi-root .dfi-viewer-card img { width: 100%; display: block; }
#dfi-root .dfi-viewer-meta { padding: 17px 19px 19px; }
#dfi-root .dfi-viewer-meta p { margin: 0 0 9px; color: #dceee9; font-size: 14.5px; line-height: 1.6; }
#dfi-root .dfi-viewer-meta small { display: block; margin-bottom: 14px; color: #82998f; font: 500 var(--t-micro)/1 var(--font-mono); letter-spacing: .09em; }
#dfi-root .dfi-viewer-actions { display: flex; gap: 9px; flex-wrap: wrap; }
#dfi-root .dfi-viewer-actions a, #dfi-root .dfi-viewer-actions button { height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; cursor: pointer; text-decoration: none; border: 1px solid rgba(151,222,202,.2); color: #c2d6d0; background: rgba(0,7,5,.6); font: 700 var(--t-label)/1 var(--font-mono); letter-spacing: .12em; }
#dfi-root .dfi-viewer-actions .primary { color: var(--lime-hot); border-color: rgba(121,255,82,.5); background: rgba(121,255,82,.08); }
#dfi-root .dfi-viewer-actions .danger { color: #ffb49a; border-color: rgba(199,90,60,.45); }

/* ---- the tile that holds the picture's place while it is being made ------------------------- */
#dfi-root .pending-card { border-color: rgba(121, 255, 82, .45); }
#dfi-root .pending-card .card-chrome span { color: var(--lime-hot); }
#dfi-root .pending-card .creation-meta small { color: #9ab5a9; }

/* ---- keep-your-pictures notice: shown once, the first time a picture actually lands ---------- */
#dfi-root .dfi-keep-card { max-width: min(94vw, 540px); }
#dfi-root .dfi-keep-body { padding: 20px 22px 22px; }
#dfi-root .dfi-keep-body h3 {
  margin: 0 0 12px; color: var(--lime-hot);
  font: 700 15px/1.2 var(--font-mono); letter-spacing: .14em;
}
#dfi-root .dfi-keep-body p { margin: 0 0 11px; color: #d5e7e1; font-size: 13.5px; line-height: 1.6; }
#dfi-root .dfi-keep-body p b { color: #fff0c9; }
#dfi-root .dfi-keep-body .dfi-viewer-actions { margin-top: 16px; }

/* ---------- composer trigger (lives in the app shell, not the panel) ---------- */
.dfi-trigger {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(57, 255, 20, 0.55);
  background: rgba(0, 0, 0, 0.25);
  color: #9fe8ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dfi-trigger svg { width: 19px; height: 19px; }

/* ---------- keyframes (dfi- prefixed to stay clear of app animations) ---------- */
@keyframes dfi-scene-glare { 0%, 22% { transform: translateX(-75%); } 55%, 100% { transform: translateX(80%); } }
@keyframes dfi-reactor-spin { to { transform: rotate(360deg); } }
@keyframes dfi-dot-breathe { 0%,100% { opacity: .55; box-shadow: 0 0 5px var(--lime); } 50% { opacity: 1; box-shadow: 0 0 10px 2px var(--lime); } }
@keyframes dfi-spark-drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .8; } 80% { opacity: .15; } 100% { transform: translateY(-82vh) translateX(38px); opacity: 0; } }
@keyframes dfi-dust-drift { to { transform: translateY(-43px); } }
@keyframes dfi-core-ignite { from { filter: brightness(1); } to { filter: brightness(1.75); box-shadow: 0 0 25px rgba(121,255,82,.55); } }

/* ---------- responsive ----------
   The old breakpoints SHRANK type on small screens (h1 to 18px, eyebrow to 6.5px), which is
   backwards: a phone is held further from the eye relative to its pixel density, not closer.
   Small screens now drop columns and chrome instead, and hold the type scale. */
@media (min-width: 1500px) {
  #dfi-root .forge-layout { grid-template-columns: 440px minmax(0, 1fr); }
  #dfi-root .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dfi-root .hero-card { grid-column: span 2; }
}

@media (max-width: 1180px) {
  #dfi-root .rail-status .status-cell:nth-child(3) { display: none; }
  #dfi-root .forge-layout { grid-template-columns: 370px minmax(0, 1fr); }
  #dfi-root .vault-header { align-items: flex-start; }
  #dfi-root .vault-actions { flex-wrap: wrap; justify-content: flex-end; }
  #dfi-root .search-control { width: 230px; }
  #dfi-root .gallery { grid-template-columns: 1fr; }
  #dfi-root .creation-card { min-height: 320px; }
}

/* Backdrop art direction, mirrored from #rendered-scene so the two views stay identical at every
   size. Portrait phones get the dedicated tall master, not a crop of the landscape one.
   The layer COUNT must stay at four here: background-size / position / repeat are inherited from
   the base shorthand as per-layer lists, and a different count would slide them out of register. */
@media (max-width: 900px) { #dfi-root .scene { --veil: rgba(1, 4, 7, .18); } }
@media (max-width: 900px) and (orientation: portrait) {
  #dfi-root .scene { background-image:
    radial-gradient(circle at 50% 88%, rgba(69, 255, 31, .10), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(199, 124, 66, .06), transparent 26%),
    linear-gradient(var(--veil), var(--veil)),
    url("/assets/dominion-neural-chassis-mobile-4k-v3.webp"); }
}
@media (max-width: 620px) {
  #dfi-root .scene { filter: contrast(1.03) saturate(1.07) brightness(.94); }
}

@media (max-width: 900px) {
  #dfi-root .app-shell { padding: 9px; }
  #dfi-root .command-rail { position: relative; top: 0; grid-template-columns: 1fr auto; min-height: 0; gap: 12px; padding: 13px 14px; }
  #dfi-root .brand-lockup .back-button { display: none; }
  #dfi-root .rail-status { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  #dfi-root .status-cell { min-width: 0; flex: 1; padding: 9px 12px; }
  #dfi-root .close-button { grid-column: 2; grid-row: 1; }
  #dfi-root .forge-layout { grid-template-columns: 1fr; min-height: 0; }
  #dfi-root .control-deck { padding: 18px; }
  #dfi-root .vault-header { flex-direction: column; padding: 22px 18px 18px; }
  #dfi-root .vault-actions { width: 100%; justify-content: flex-start; }
  #dfi-root .search-control { flex: 1; width: auto; }
  #dfi-root .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 280px; padding: 12px; }
  #dfi-root .generation-strip { grid-template-columns: 38px 1fr 44px; }
  #dfi-root .progress-track { grid-column: 2 / -1; }
}

@media (max-width: 560px) {
  #dfi-root .app-shell { padding: 0; }
  #dfi-root .command-rail, #dfi-root .control-deck, #dfi-root .vault { clip-path: none; border-left: 0; border-right: 0; }
  #dfi-root .command-rail { padding: 13px 13px 0; gap: 10px; }
  #dfi-root .brand-lockup h1 { font-size: 27px; letter-spacing: .13em; }
  #dfi-root .brand-reactor { width: 44px; height: 44px; }
  #dfi-root .rail-status { overflow-x: auto; margin-top: 4px; }
  #dfi-root .status-cell { min-width: 150px; }
  #dfi-root .forge-layout { margin-top: 8px; gap: 8px; }
  #dfi-root .control-deck { padding: 17px 15px; }
  /* 16px is the iOS threshold: anything smaller makes Safari zoom the page on focus. */
  #dfi-root .prompt-frame textarea { min-height: 124px; font-size: 16px; padding: 15px 14px 13px; }
  #dfi-root .prompt-tools button { flex: 1; }
  #dfi-root #dfi-clear { flex: none; }
  #dfi-root .segment { min-height: 76px; padding: 10px 4px; }
  #dfi-root .segment b { font-size: 11.5px; letter-spacing: .08em; }
  #dfi-root .batch-module, #dfi-root .draft-module { grid-template-columns: 1fr auto; gap: 12px; }
  #dfi-root .batch-icon, #dfi-root .draft-icon { display: none; }
  /* thumb-sized switch on touch: 26px tall is a miss target on a phone */
  #dfi-root .power-toggle { width: 56px; height: 32px; }
  #dfi-root .power-toggle i { width: 22px; height: 22px; }
  #dfi-root .power-toggle[aria-checked="true"] i { transform: translateX(24px); }
  #dfi-root .vault-header h2 { font-size: 24px; letter-spacing: .12em; }
  #dfi-root .vault-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
  #dfi-root .search-control { width: 100%; grid-column: 1 / -1; }
  #dfi-root .gallery { grid-template-columns: 1fr; grid-auto-rows: 300px; padding: 12px 10px; }
  #dfi-root .generation-strip { margin: 10px 10px 0; padding: 12px; }
  #dfi-root .creation-card { min-height: 300px; }
  #dfi-root .vault-footer { flex-wrap: wrap; gap: 10px; padding: 12px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  #dfi-root *, #dfi-root *::before, #dfi-root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  body.dfi-anim #sidebar, body.dfi-anim #commandbar, body.dfi-anim #neural-glass, body.dfi-anim #overlay, #dfi-root { transition: none; }
  #dfi-root .app-shell, #dfi-root .scene { transition-duration: .01ms !important; }
  #dfi-root .glass-door-sheen { display: none; }
}

/* =============================================================================================
   HYBRID FOUNDRY GLASS
   Ported from Codex's hybrid pass (F:\Codex Sandbox\dominion-forge-images-design), 2026-07-19.
   Heat, copper and smoke from the effort dial bleed into the image bay's structure, and the
   glass gains optics that respond to pointer and scroll (driven from dominion-images.js).

   THREE DELIBERATE DEPARTURES FROM THE MOCKUP. Each one exists because the mockup was drawn
   against a flat near-black page and this panel is not:

   1. .scene KEEPS ITS ARTWORK. The mockup replaces the backdrop with gradients. Here .scene is
      pinned pixel-for-pixel to #rendered-scene on the chat side so the crossing shows no seam
      (see the .scene block up top). Fire and smoke are added as SEPARATE layers over it rather
      than as a replacement background.
   2. PANEL OPACITY IS UNCHANGED. The mockup drops .glass-panel to .42-.56 alpha, which is
      legible over its own flat black and not over the chassis artwork's bright regions. The
      2026-07-19 legibility pass set these values on purpose; text contrast is the panel's job.
      What is added here is edge light, refraction and specular, none of which cost contrast.
   3. NO NEW backdrop-filter SURFACES. The mockup's stacking warning is real, but it applied to
      its own hybrid, which put blur on a dozen elements. This panel has exactly two (.glass-panel
      and .command-rail) and they stay. Nothing else gains one, so there is nothing to stabilise.
   ============================================================================================= */
#dfi-root {
  --ember: #ff5d1f;
  --ember-hot: #ffba65;
  --deep-red: #4d0d06;
  /* driven from JS; the defaults are a sensible resting light position */
  --pointer-x: 72%;
  --pointer-y: 18%;
  --scroll-glare: 0px;
}

/* ---------- environment: heat at the edges, smoke behind ----------
   Both sit at the outer margins on purpose. The moment fire crosses into the middle of the
   viewport the form controls stop being readable, so it stays in the gutters. */
#dfi-root .scene-furnace-edge {
  position: absolute; z-index: 1; bottom: -4%; width: clamp(70px, 9vw, 140px); height: 76%;
  opacity: .48; pointer-events: none;
  background:
    radial-gradient(ellipse at 8% 86%, rgba(255,182,77,.5), rgba(255,55,10,.22) 20%, transparent 58%),
    radial-gradient(ellipse at 2% 54%, rgba(255,75,15,.22), transparent 42%),
    repeating-radial-gradient(circle at 7px 92%, rgba(255,208,111,.62) 0 1px, rgba(255,76,13,.32) 2px, transparent 4px 18px);
  animation: dfi-furnace-breathe 4.2s ease-in-out infinite;
}
#dfi-root .scene-furnace-edge.furnace-left { left: -18px; }
#dfi-root .scene-furnace-edge.furnace-right { right: -18px; transform: scaleX(-1); }
#dfi-root .scene-smoke { position: absolute; z-index: 0; inset: 0; overflow: hidden; opacity: .3; pointer-events: none; }
#dfi-root .scene-smoke i {
  position: absolute; left: var(--smoke-x, 4%); bottom: -12%; width: var(--smoke-w, 230px); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(92,112,105,.18), rgba(28,39,34,.1) 42%, transparent 69%);
  animation: dfi-smoke-rise 18s linear infinite;
}
#dfi-root .scene-smoke i:nth-child(2) { --smoke-x: 73%; --smoke-w: 290px; animation-delay: -8s; animation-duration: 18s; }
#dfi-root .scene-smoke i:nth-child(3) { --smoke-x: 22%; --smoke-w: 170px; animation-delay: -4s; animation-duration: 12s; }

/* ---------- structure: copper and ember at the seams ---------- */
#dfi-root .command-rail { border-color: rgba(219,151,91,.27); }
#dfi-root .command-rail::before { content: ""; position: absolute; top: 0; left: 7%; width: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--ember-hot), transparent); box-shadow: 0 0 10px rgba(255,93,31,.6); }
#dfi-root .brand-reactor { border-color: rgba(242,173,108,.48); box-shadow: 0 0 18px rgba(255,93,31,.15), inset 0 0 16px rgba(121,255,82,.08); }
#dfi-root .brand-reactor::before { border-color: rgba(255,116,47,.74); box-shadow: 0 0 9px rgba(255,93,31,.26); }

/* Edge light and refraction on top of the existing panel fill. Additive only: the base
   background from the legibility pass is untouched (see departure 2). */
#dfi-root .glass-panel {
  border-color: rgba(204,224,216,.22);
  box-shadow:
    0 28px 80px rgba(0,0,0,.5),
    inset 0 1px rgba(244,255,251,.17),
    inset 1px 0 rgba(210,242,232,.08),
    inset 0 -1px rgba(255,111,35,.16),
    0 0 28px rgba(121,255,82,.035);
}
/* the specular band drifts against the scroll, which is what makes the surface read as a solid
   sheet rather than a painted rectangle */
#dfi-root .panel-specular {
  opacity: .9;
  background: linear-gradient(112deg, transparent 0 6%, rgba(255,255,255,.095) 11%, rgba(177,255,155,.025) 14%, transparent 22% 72%, rgba(255,153,76,.025) 83%, transparent);
  transform: translateY(calc(var(--scroll-glare) * -.08));
}
#dfi-root .control-deck::after { background: linear-gradient(transparent, var(--lime) 18%, var(--copper-hot) 73%, var(--ember) 92%, transparent); opacity: .68; box-shadow: 0 0 9px rgba(121,255,82,.19); }
#dfi-root .furnace-seam { position: absolute; z-index: 0; left: -4px; bottom: 4%; width: 13px; height: 52%; opacity: .62; pointer-events: none; background: linear-gradient(transparent, rgba(255,55,9,.18), rgba(255,127,38,.48), transparent); filter: blur(.3px); }
#dfi-root .furnace-seam i { position: absolute; left: 2px; bottom: var(--seam-y, 9%); width: 6px; height: 19%; background: linear-gradient(transparent, var(--ember), var(--ember-hot), transparent); filter: blur(1px); animation: dfi-seam-pulse 3s ease-in-out infinite; }
#dfi-root .furnace-seam i:nth-child(2) { --seam-y: 38%; animation-delay: -1.1s; height: 13%; }
#dfi-root .furnace-seam i:nth-child(3) { --seam-y: 68%; animation-delay: -2.1s; height: 10%; }
#dfi-root .deck-section { border-bottom-color: rgba(224,155,99,.15); }
#dfi-root .section-heading span, #dfi-root .quality-rune { color: var(--ember-hot); text-shadow: 0 0 10px rgba(255,83,20,.31); }
#dfi-root .prompt-frame::before { background: linear-gradient(90deg, var(--ember-hot), var(--lime)); box-shadow: 0 0 10px var(--ember), 11px 0 11px rgba(121,255,82,.4); }
#dfi-root .batch-module { border-color: rgba(242,137,62,.35); }
#dfi-root .forge-button {
  border-color: rgba(255,137,61,.63);
  background:
    linear-gradient(180deg, rgba(255,236,196,.13), transparent 34%),
    linear-gradient(98deg, rgba(100,29,6,.94), rgba(19,46,20,.94) 39%, rgba(4,28,13,.94) 66%, rgba(81,24,4,.9));
  box-shadow: inset 0 1px rgba(255,238,212,.21), inset 0 -9px 19px rgba(0,0,0,.34), 0 0 19px rgba(255,83,20,.16), 0 0 26px rgba(121,255,82,.07);
}
#dfi-root .forge-button:hover { box-shadow: inset 0 1px rgba(255,245,224,.28), inset 0 -9px 19px rgba(0,0,0,.28), 0 0 29px rgba(255,83,20,.28), 0 0 38px rgba(121,255,82,.14); }
#dfi-root .forge-core { border-color: rgba(255,157,84,.74); box-shadow: inset 0 0 10px rgba(121,255,82,.12), 0 0 13px rgba(255,78,18,.25); }

/* ---------- the vault: a lit volume, not a flat box ----------
   isolation:isolate keeps the caustic's blending inside the vault instead of leaking onto the
   panels beside it. */
#dfi-root .vault { isolation: isolate; }
#dfi-root .vault::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; border: 1px solid rgba(255,255,255,.035); box-shadow: inset 0 1px rgba(245,255,252,.15), inset 1px 0 rgba(213,241,231,.07), inset -1px 0 rgba(255,128,51,.07); }
#dfi-root .vault-caustic {
  position: absolute; z-index: 0; inset: -30%; pointer-events: none; opacity: .8;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(229,255,221,.11), rgba(121,255,82,.025) 8%, transparent 19%),
    linear-gradient(108deg, transparent 38%, rgba(255,255,255,.045) 46%, transparent 54%);
  transform: translateY(calc(var(--scroll-glare) * -.11));
}
#dfi-root .vault-header::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--lime), transparent 35%, transparent 70%, var(--ember)); opacity: .44; box-shadow: 0 0 7px rgba(121,255,82,.22); }
#dfi-root .gallery {
  background:
    linear-gradient(90deg, rgba(121,255,82,.025), transparent 22% 78%, rgba(255,75,16,.025)),
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(121,255,82,.025) 91px, transparent 92px);
}

/* ---------- the cards: layered glass over the artwork ----------
   Each card carries its own reflection, moved independently by scroll from JS. Bright top/left
   highlight, dark edge absorption, ember reflection along the bottom edge, green side light. */
#dfi-root .creation-card {
  --card-glare-x: 0px;
  --card-glare-y: 0px;
  isolation: isolate; border-color: rgba(210,237,228,.27);
  box-shadow:
    0 18px 38px rgba(0,0,0,.31),
    inset 0 1px rgba(247,255,253,.23),
    inset 1px 0 rgba(219,244,237,.12),
    inset 0 -1px rgba(255,128,51,.2),
    inset -1px 0 rgba(121,255,82,.08),
    0 0 17px rgba(121,255,82,.035);
}
/* the travelling white specular streak */
#dfi-root .creation-card::before {
  content: ""; position: absolute; z-index: 8; pointer-events: none; left: -28%; top: -42%; width: 35%; height: 190%; opacity: .62;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.02) 22%, rgba(244,255,252,.21) 49%, rgba(178,255,154,.055) 61%, transparent);
  filter: blur(1px); transform: translate3d(var(--card-glare-x), var(--card-glare-y), 0) rotate(12deg); transition: opacity .2s;
}
/* the lit edges of the pane itself */
#dfi-root .creation-card::after {
  content: ""; position: absolute; z-index: 9; pointer-events: none; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 2px),
    linear-gradient(90deg, rgba(221,255,210,.08), transparent 2px),
    linear-gradient(0deg, rgba(255,100,31,.14), transparent 2px);
}
#dfi-root .creation-card:hover { border-color: rgba(121,255,82,.48); box-shadow: 0 18px 42px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.27), inset 0 -1px rgba(255,112,35,.26), 0 0 24px rgba(121,255,82,.09); }
#dfi-root .creation-art { z-index: 1; filter: saturate(1.06) contrast(1.04); }
#dfi-root .card-chrome > span, #dfi-root .favorite { border-color: rgba(218,239,232,.22); box-shadow: inset 0 1px rgba(255,255,255,.07); }
#dfi-root .creation-meta { border-top-color: rgba(231,247,242,.16); box-shadow: inset 0 1px rgba(255,255,255,.045); }
#dfi-root .vault-footer { border-top-color: rgba(235,247,243,.14); }

@keyframes dfi-furnace-breathe { 0%,100% { opacity: .31; background-position: 0 0, 0 0, 0 0; } 50% { opacity: .58; background-position: 0 -8px, 0 -13px, 0 -24px; } }
@keyframes dfi-smoke-rise { 0% { transform: translate3d(0,0,0) scale(.7); opacity: 0; } 14% { opacity: .55; } 72% { opacity: .18; } 100% { transform: translate3d(55px,-112vh,0) scale(1.55); opacity: 0; } }
@keyframes dfi-seam-pulse { 0%,100% { opacity: .25; transform: scaleY(.7); } 48% { opacity: 1; transform: scaleY(1.08); } }
@keyframes dfi-door-sheen { 0% { left: -24%; opacity: 0; } 16% { opacity: .68; } 72% { opacity: .4; } 100% { left: 112%; opacity: 0; } }
@keyframes dfi-handle-breathe {
  0%, 100% { border-color: rgba(244,142,65,.64); box-shadow: 0 0 12px rgba(255,91,22,.16), inset 1px 0 rgba(255,225,186,.14), inset -4px 0 10px rgba(0,0,0,.45); }
  50%      { border-color: rgba(255,163,88,.86); box-shadow: 0 0 21px rgba(255,91,22,.32), 0 0 34px rgba(255,73,13,.08), inset 1px 0 rgba(255,232,201,.2), inset -4px 0 10px rgba(0,0,0,.42); }
}

@media (max-width: 900px) {
  #dfi-root .glass-door-handle { top: 54vh; width: 44px; height: 86px; left: 4px; }
  #dfi-root .app-shell { padding-left: 56px; }
  body.dfi-parked #dfi-root .app-shell { transform: translateX(calc(100vw - 54px)); }
  body.dfi-parked #dfi-root .glass-door-handle { transform: translateY(-50%) translateX(calc(100vw - 54px)); }
  #dfi-root .scene-furnace-edge { opacity: .4; width: 72px; }
}
@media (max-width: 560px) {
  /* the 560px block above zeroes .app-shell padding for edge-to-edge panels; the door still
     needs its channel, so the gutter is the one piece of padding that comes back */
  #dfi-root .app-shell { padding: 0 0 0 46px; }
  #dfi-root .glass-door-handle { width: 38px; height: 76px; left: 3px; border-radius: 10px 4px 4px 10px; }
  #dfi-root .glass-door-handle small { display: none; }
  body.dfi-parked #dfi-root .app-shell { transform: translateX(calc(100vw - 44px)); }
  body.dfi-parked #dfi-root .glass-door-handle { transform: translateY(-50%) translateX(calc(100vw - 44px)); }
  #dfi-root .scene-furnace-edge { opacity: .32; }
  #dfi-root .scene-smoke { opacity: .2; }
}