/*
 * Dominion AI — Forge dial + universal text editor.
 *
 * Two machined controls, one material language (see docs/DOMINION-VISUAL-NORTH-STAR.md):
 *   .dfe-*  — the half-screen text editor that replaces every native prompt() typing box.
 *   .dial-* — the Ember/Flame/Furnace rotary, revealed on demand from the composer.
 *
 * Fire lives in copper/amber/white so it stays distinct from the green ENERGY system; green is
 * reserved for state and activity per the north star. Everything is dimensional: bevels, recessed
 * cavities, specular catches, deep shadow. No flat rectangles, no generic gradients.
 */

/* ============================ universal text editor ============================ */

.dfe-scrim {
  position: fixed; inset: 0; z-index: 1400;
  display: grid; place-items: center; padding: 20px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(4, 12, 18, .62), rgba(1, 3, 6, .84));
  backdrop-filter: blur(9px) saturate(1.1);
  opacity: 0; transition: opacity .18s ease;
}
.dfe-scrim.in { opacity: 1; }

.dfe-panel {
  width: min(660px, 95vw);
  display: flex; flex-direction: column;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 30, 38, .96), rgba(6, 12, 17, .98)),
    radial-gradient(140% 120% at 50% -10%, rgba(255, 193, 138, .10), transparent 60%);
  border: 1px solid rgba(141, 204, 239, .16);
  box-shadow:
    0 42px 90px rgba(0, 0, 0, .66),
    0 2px 0 rgba(255, 255, 255, .05) inset,
    0 -24px 60px rgba(1, 4, 7, .7) inset,
    0 0 0 1px rgba(0, 0, 0, .5);
  transform: translateY(10px) scale(.985); opacity: 0;
  transition: transform .2s cubic-bezier(.2, .8, .25, 1), opacity .2s ease;
}
.dfe-scrim.in .dfe-panel { transform: none; opacity: 1; }

.dfe-head {
  padding: 16px 18px 10px;
  border-bottom: 1px solid rgba(141, 204, 239, .1);
  background: linear-gradient(180deg, rgba(255, 193, 138, .05), transparent);
}
.dfe-kicker {
  color: #d59b6e; font-size: 9px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.dfe-title {
  margin: 5px 0 0; color: #eff6fb; font-size: 17px; line-height: 1.18; font-weight: 700; letter-spacing: .02em;
}
.dfe-hint { margin: 6px 0 0; color: #7f95a6; font-size: 11px; line-height: 1.4; }

.dfe-body { padding: 14px 18px; }
.dfe-field {
  width: 100%; box-sizing: border-box;
  font: 400 11pt/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #e9f4fc;
  background:
    linear-gradient(180deg, rgba(2, 6, 10, .92), rgba(3, 9, 13, .8));
  border: 1px solid rgba(141, 204, 239, .2);
  border-radius: 11px;
  padding: 13px 14px;
  resize: vertical;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5) inset, 0 0 0 1px rgba(0, 0, 0, .4);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dfe-field::placeholder { color: #566b7c; }
.dfe-field:focus {
  border-color: rgba(118, 255, 104, .45);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5) inset, 0 0 0 1px rgba(118, 255, 104, .18), 0 0 22px rgba(118, 255, 104, .1);
}
.dfe-field.multi { min-height: 46vh; }
.dfe-field.single { min-height: 0; }

.dfe-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px 16px;
}
.dfe-count { color: #5f7484; font-size: 10px; letter-spacing: .04em; margin-right: auto; font-variant-numeric: tabular-nums; }
.dfe-btn {
  font: 600 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .05em;
  padding: 11px 18px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  transition: transform .1s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.dfe-btn:active { transform: translateY(1px); }
.dfe-cancel {
  color: #a7b9c6; background: rgba(1, 9, 15, .6); border-color: rgba(141, 204, 239, .18);
}
.dfe-cancel:hover { color: #d9e7f0; border-color: rgba(141, 204, 239, .3); }
.dfe-save {
  color: #06210b; font-weight: 800;
  background: linear-gradient(180deg, #a6ff96, #5fe06a);
  border-color: rgba(118, 255, 104, .5);
  box-shadow: 0 4px 16px rgba(95, 224, 106, .28), 0 1px 0 rgba(255, 255, 255, .4) inset;
}
.dfe-save:hover { box-shadow: 0 6px 22px rgba(95, 224, 106, .42), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.dfe-kbd { color: #6a8090; font-size: 9px; letter-spacing: .04em; margin-left: 2px; }

/* ============================ forge reveal trigger ============================ */

.forge-trigger {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 11px; cursor: pointer;
  background: linear-gradient(180deg, rgba(26, 20, 16, .9), rgba(10, 7, 5, .95));
  border: 1px solid rgba(255, 160, 90, .22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 200, 150, .08) inset;
  transition: border-color .18s ease, box-shadow .25s ease, transform .1s ease;
}
.forge-trigger:active { transform: translateY(1px); }
.forge-trigger svg { width: 20px; height: 22px; display: block; position: relative; z-index: 2; }
/* the trigger's own glow reflects the CURRENT tier at a glance, without opening the dial */
.forge-trigger[data-tier="ember"]   { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px rgba(255,138,74,.16), 0 1px 0 rgba(255,200,150,.08) inset; border-color: rgba(255,150,90,.28); }
.forge-trigger[data-tier="flame"]   { box-shadow: 0 2px 10px rgba(0,0,0,.5), 0 0 16px rgba(255,150,60,.4),  0 1px 0 rgba(255,210,160,.12) inset; border-color: rgba(255,170,80,.5); }
.forge-trigger[data-tier="furnace"] { box-shadow: 0 2px 12px rgba(0,0,0,.5), 0 0 26px rgba(255,180,90,.6),  0 0 46px rgba(255,120,50,.3), 0 1px 0 rgba(255,230,190,.2) inset; border-color: rgba(255,200,120,.7); }

/* ============================ the dial popover ============================ */

.dial-scrim {
  position: fixed; inset: 0; z-index: 1380;
  display: grid; place-items: end center; padding: 0 0 96px;
  background: radial-gradient(90% 60% at 50% 100%, rgba(6, 10, 14, .5), rgba(1, 3, 6, .78));
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.dial-scrim.in { opacity: 1; }
@media (max-width: 640px) { .dial-scrim { place-items: center; padding: 20px; } }

.dial-card {
  width: min(340px, 92vw);
  padding: 22px 22px 18px;
  border-radius: 20px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(40, 26, 18, .5), transparent 55%),
    linear-gradient(180deg, rgba(22, 26, 30, .97), rgba(7, 10, 14, .98));
  border: 1px solid rgba(255, 170, 100, .18);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .7),
    0 1px 0 rgba(255, 220, 180, .08) inset,
    0 -30px 70px rgba(2, 4, 7, .8) inset;
  transform: translateY(16px) scale(.97); opacity: 0;
  transition: transform .24s cubic-bezier(.2, .85, .25, 1), opacity .22s ease;
  text-align: center;
}
.dial-scrim.in .dial-card { transform: none; opacity: 1; }

.dial-kicker { color: #d59b6e; font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.dial-title { margin: 4px 0 18px; color: #f2ede8; font-size: 15px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }

/* --- the knob assembly --- */
.dial-stage {
  position: relative; width: 210px; height: 210px; margin: 0 auto;
  touch-action: none; user-select: none;
}
/* backlight: the radiant heat behind the knob. Intensity + hue ramp per tier via data-tier. */
.dial-glow {
  position: absolute; inset: -14px; border-radius: 50%;
  pointer-events: none; filter: blur(6px);
  transition: opacity .4s ease, background .4s ease;
}
.dial-bezel {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(255,255,255,.05), rgba(0,0,0,.35), rgba(255,255,255,.05), rgba(0,0,0,.35), rgba(255,255,255,.05)),
    radial-gradient(circle at 50% 38%, #3a3027, #1a1512 60%, #0c0908 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .6),
    0 2px 2px rgba(255, 220, 180, .12) inset,
    0 -14px 28px rgba(0, 0, 0, .7) inset,
    0 0 0 1px rgba(0, 0, 0, .6);
}
/* tick ring */
.dial-ticks { position: absolute; inset: 12px; border-radius: 50%; pointer-events: none; }
.dial-ticks::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from -90deg, rgba(255, 200, 150, .22) 0 1deg, transparent 1deg 10deg);
  -webkit-mask: radial-gradient(circle, transparent 84px, #000 85px, #000 92px, transparent 93px);
          mask: radial-gradient(circle, transparent 84px, #000 85px, #000 92px, transparent 93px);
}
/* the rotating knob */
.dial-knob {
  position: absolute; inset: 26px; border-radius: 50%; cursor: grab;
  background:
    radial-gradient(circle at 50% 30%, #6a5847, #3d3227 42%, #221b15 78%, #140f0c 100%),
    conic-gradient(from 0deg, rgba(255,255,255,.12), rgba(0,0,0,.28) 25%, rgba(255,255,255,.1) 50%, rgba(0,0,0,.28) 75%, rgba(255,255,255,.12));
  background-blend-mode: overlay, normal;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, .6),
    0 2px 1px rgba(255, 225, 190, .25) inset,
    0 -10px 22px rgba(0, 0, 0, .6) inset;
  transition: transform .32s cubic-bezier(.18, .9, .2, 1.08);
}
.dial-knob:active { cursor: grabbing; }
.dial-stage.dial-adjusting .dial-knob { transition: filter .18s ease; }
/* the pointer notch machined into the knob rim */
.dial-knob::after {
  content: ""; position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  width: 5px; height: 24px; border-radius: 3px;
  background: linear-gradient(180deg, #ffd9a8, #ff8a4a);
  box-shadow: 0 0 10px rgba(255, 150, 70, .8), 0 0 20px rgba(255, 120, 50, .5);
}

/* --- the flame core, animated per tier --- */
.dial-core {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.dial-flame {
  width: 58px; height: 72px; transform-origin: 50% 90%;
  filter: drop-shadow(0 0 8px rgba(255, 140, 60, .7));
  transition: transform .4s ease, filter .4s ease, opacity .4s ease;
}
.dial-flame .f-outer { fill: url(#fg-outer); }
.dial-flame .f-inner { fill: url(#fg-inner); }
.dial-flame .f-core  { fill: #fff6e8; }

/* ember particles (furnace only) */
.dial-spark {
  position: absolute; bottom: 84px; left: 50%; width: 3px; height: 3px; border-radius: 50%;
  background: #ffcf8f; box-shadow: 0 0 6px rgba(255, 180, 90, .9);
  opacity: 0; pointer-events: none;
}

/* ---- per-tier state ---- */
.dial-stage[data-tier="ember"]   .dial-glow { background: radial-gradient(circle, rgba(255,120,50,.28), transparent 62%); opacity: .5; }
.dial-stage[data-tier="flame"]   .dial-glow { background: radial-gradient(circle, rgba(255,150,55,.55), rgba(255,90,40,.2) 55%, transparent 70%); opacity: .85; }
.dial-stage[data-tier="furnace"] .dial-glow { background: radial-gradient(circle, rgba(255,235,190,.7), rgba(255,140,50,.5) 45%, rgba(255,70,30,.25) 68%, transparent 80%); opacity: 1; }

.dial-stage[data-tier="ember"]   .dial-flame { transform: scale(.62); opacity: .78; filter: drop-shadow(0 0 5px rgba(255,120,50,.5)); animation: flame-smolder 3.4s ease-in-out infinite; }
.dial-stage[data-tier="flame"]   .dial-flame { transform: scale(.92); opacity: .95; filter: drop-shadow(0 0 10px rgba(255,150,60,.75)); animation: flame-flicker 1.5s ease-in-out infinite; }
.dial-stage[data-tier="furnace"] .dial-flame { transform: scale(1.18); opacity: 1; filter: drop-shadow(0 0 16px rgba(255,180,90,.95)) drop-shadow(0 0 30px rgba(255,110,50,.6)); animation: flame-roar .5s ease-in-out infinite; }

.dial-stage[data-tier="furnace"] .dial-spark { animation: spark-rise 1.1s ease-out infinite; }
.dial-stage[data-tier="furnace"] .dial-spark.s2 { animation-delay: .35s; left: 44%; }
.dial-stage[data-tier="furnace"] .dial-spark.s3 { animation-delay: .7s;  left: 56%; }

@keyframes flame-smolder { 0%,100% { transform: scale(.62) translateY(0); } 50% { transform: scale(.66) translateY(-1px); } }
@keyframes flame-flicker {
  0%,100% { transform: scale(.92) skewX(0deg); }
  30% { transform: scale(.96) skewX(-2.5deg); }
  60% { transform: scale(.89) skewX(2deg); }
}
@keyframes flame-roar {
  0%,100% { transform: scale(1.18) skewX(0deg) translateY(0); }
  25% { transform: scale(1.24) skewX(-3deg) translateY(-2px); }
  55% { transform: scale(1.12) skewX(3deg) translateY(1px); }
  80% { transform: scale(1.2) skewX(-1.5deg); }
}
@keyframes spark-rise {
  0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-70px) translateX(var(--drift, 6px)) scale(.4); }
}

/* --- the tier readout + labels --- */
.dial-readout { margin: 16px 0 2px; min-height: 40px; }
.dial-tier-name {
  font-size: 20px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transition: color .3s ease, text-shadow .3s ease;
}
.dial-stage[data-tier] ~ .dial-readout .dial-tier-name { color: #ffb877; }
.dial-card[data-tier="ember"]   .dial-tier-name { color: #ff9a5c; text-shadow: 0 0 12px rgba(255,120,50,.4); }
.dial-card[data-tier="flame"]   .dial-tier-name { color: #ffb063; text-shadow: 0 0 16px rgba(255,150,60,.6); }
.dial-card[data-tier="furnace"] .dial-tier-name { color: #ffe0b0; text-shadow: 0 0 20px rgba(255,180,90,.85); }
.dial-tier-desc { margin: 5px 0 0; color: #8a9aa8; font-size: 11px; line-height: 1.45; padding: 0 6px; }
.dial-cost { display: inline-block; margin-top: 7px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #c98f63; font-weight: 700; }

.dial-scale { display: flex; justify-content: space-between; gap: 6px; margin: 16px 4px 4px; }
.dial-step {
  flex: 1; padding: 7px 0; border-radius: 8px; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #6f8391; background: rgba(2, 8, 12, .6); border: 1px solid rgba(141, 204, 239, .1);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.dial-step[aria-current="true"] {
  color: #ffdcb0; border-color: rgba(255, 170, 90, .5);
  background: linear-gradient(180deg, rgba(255, 140, 60, .16), rgba(255, 90, 40, .05));
  box-shadow: 0 0 14px rgba(255, 130, 55, .25) inset;
}
.dial-done {
  margin-top: 16px; width: 100%;
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em;
  padding: 12px; border-radius: 11px; cursor: pointer;
  color: #1a0f07; background: linear-gradient(180deg, #ffc98a, #ff9247);
  border: 1px solid rgba(255, 180, 110, .6);
  box-shadow: 0 4px 16px rgba(255, 130, 60, .3), 0 1px 0 rgba(255, 230, 200, .5) inset;
  transition: transform .1s ease, box-shadow .18s ease;
}
.dial-done:active { transform: translateY(1px); }

/* reduced motion: keep the light, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .dial-flame { animation: none !important; }
  .dial-spark { display: none; }
  .dfe-scrim, .dfe-panel, .dial-scrim, .dial-card { transition: opacity .12s ease; transform: none; }
}

/* ============================ Forge artifact v2 ============================
   The rendered masters supply the material depth. Live HTML supplies exact labels, accessible
   hit targets, a true rotating pointer, and the independent Forge Mode switch. */

.dial-scrim {
  place-items: center;
  padding: 8px;
  overflow: auto;
  background:
    radial-gradient(ellipse 58% 62% at 50% 47%, rgba(111, 38, 12, .24), transparent 64%),
    radial-gradient(ellipse at 50% 50%, rgba(3, 8, 13, .7), rgba(0, 2, 5, .94));
  backdrop-filter: blur(12px) saturate(1.18);
}

.dial-card {
  position: relative;
  width: min(460px, 97vw);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 12px 12px;
  border-radius: 27px;
  border: 1px solid rgba(227, 155, 101, .3);
  background:
    linear-gradient(180deg, rgba(255, 235, 208, .055), transparent 9%),
    radial-gradient(ellipse at 50% 18%, rgba(116, 47, 18, .22), transparent 52%),
    linear-gradient(145deg, rgba(12, 18, 24, .98), rgba(1, 5, 9, .99));
  box-shadow:
    0 48px 120px rgba(0, 0, 0, .88),
    0 0 0 3px rgba(0, 3, 6, .8),
    0 0 0 4px rgba(130, 76, 45, .24),
    inset 0 1px 0 rgba(255, 232, 202, .16),
    inset 0 -24px 58px rgba(0, 0, 0, .64);
  scrollbar-width: none;
}
.dial-card::-webkit-scrollbar { display: none; }
.dial-card[data-tier="flame"] { border-color: rgba(255, 151, 74, .46); box-shadow: 0 48px 120px rgba(0,0,0,.88), 0 0 0 3px rgba(0,3,6,.8), 0 0 0 4px rgba(173,88,38,.34), 0 0 44px rgba(255,91,24,.12), inset 0 1px 0 rgba(255,236,210,.19); }
.dial-card[data-tier="furnace"] { border-color: rgba(255, 213, 151, .64); box-shadow: 0 48px 120px rgba(0,0,0,.9), 0 0 0 3px rgba(0,3,6,.82), 0 0 0 4px rgba(226,137,64,.42), 0 0 62px rgba(255,108,28,.22), inset 0 1px 0 rgba(255,248,232,.28); }

.dial-kicker {
  color: #d79a68;
  font: 800 8px/1 "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: .24em;
}
.dial-title {
  margin: 3px 0 7px;
  color: #f5e8db;
  font: 750 14px/1 "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: .2em;
  text-shadow: 0 0 18px rgba(255, 138, 67, .22);
}

.dial-stage {
  position: relative;
  width: min(420px, max(250px, calc(66.667dvh - 120px)), calc(96vw - 24px));
  height: auto;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  touch-action: none;
  user-select: none;
  outline: none;
  background: #02070c;
  box-shadow: 0 24px 58px rgba(0,0,0,.64), inset 0 0 0 1px rgba(255,216,178,.1);
}
.dial-stage:focus-visible { box-shadow: 0 24px 58px rgba(0,0,0,.64), 0 0 0 2px rgba(255, 188, 116, .7), 0 0 32px rgba(255, 112, 42, .22); }

.dial-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.006);
  transition: opacity .42s ease, filter .42s ease;
}
.dial-stage[data-tier="ember"] .dial-art-ember,
.dial-stage[data-tier="flame"] .dial-art-flame,
.dial-stage[data-tier="furnace"] .dial-art-furnace { opacity: 1; }
.dial-stage[data-tier="ember"] .dial-art-ember { filter: contrast(1.04) saturate(1.05); }
.dial-stage[data-tier="flame"] .dial-art-flame { filter: contrast(1.04) saturate(1.08); }
.dial-stage[data-tier="furnace"] .dial-art-furnace { filter: contrast(1.03) saturate(1.09); }

/* Exact live labels sit in the blank engraved plaques rendered into the artifact. */
.dial-station {
  position: absolute;
  z-index: 8;
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 4px;
  background: rgba(1, 4, 7, .16);
  color: #c5a788;
  font: 800 clamp(7px, 2.35vw, 12px)/1 "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000, 0 0 6px #000;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.dial-station:hover { color: #ffe0b9; background: rgba(73, 32, 13, .38); }
.dial-station:active { transform: translateY(1px); }
.dial-station[aria-current="true"] {
  color: #fff4dc;
  background: radial-gradient(ellipse, rgba(255, 128, 42, .34), rgba(64, 20, 7, .34) 72%);
  box-shadow: inset 0 0 14px rgba(255, 133, 42, .32), 0 0 13px rgba(255, 104, 24, .22);
  text-shadow: 0 1px 2px #000, 0 0 8px #ff8f38, 0 0 15px rgba(255, 83, 20, .7);
}
.dial-station-ember { left: 9.4%; top: 27.1%; width: 15.8%; height: 5.4%; }
.dial-station-flame { left: 39.4%; top: 8.8%; width: 21.2%; height: 5.1%; }
.dial-station-furnace { left: 76.5%; top: 27.1%; width: 15.8%; height: 5.4%; }

/* A radioactive-tube pointer with a white-hot core; geometry stays live and genuinely rotates. */
.dial-knob {
  position: absolute;
  z-index: 6;
  inset: auto;
  left: 48%;
  top: 30.8%;
  width: 4%;
  height: 27.2%;
  border: 0;
  border-radius: 999px;
  background: none;
  box-shadow: none;
  transform-origin: 50% 92.5%;
  cursor: grab;
  transition: transform .42s cubic-bezier(.2, .85, .2, 1), filter .35s ease;
}
.dial-knob:active { cursor: grabbing; }
.dial-rod {
  position: absolute;
  left: 22%; top: 4%; bottom: 7%; width: 56%;
  border: 1px solid rgba(255, 238, 204, .9);
  border-radius: 999px;
  background: linear-gradient(90deg, #7b1b09 0, #ff6a1c 18%, #fff8d9 48%, #ffd36f 63%, #e43a0c 100%);
  box-shadow: 0 0 3px #fff, 0 0 8px #ffbe65, 0 0 17px #ff5d1b, 0 0 30px rgba(255,52,7,.62), inset 0 0 3px #fff;
}
.dial-tip {
  position: absolute;
  left: 50%; top: -1%; width: 160%; aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #fff5d6;
  background: radial-gradient(circle at 34% 30%, #fff, #ffe89b 21%, #ff8f2d 48%, #8f1b08 78%);
  box-shadow: 0 0 5px #fff, 0 0 14px #ff8c2e, 0 0 25px rgba(255,65,14,.7);
}
.dial-hub {
  position: absolute;
  left: 50%; top: 92.5%; width: 290%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 218, 175, .8);
  background:
    radial-gradient(circle at 36% 29%, #fff6d2 0 5%, #ffad4e 9%, #67230f 18%, #17100d 37%, #9c5329 41%, #21150f 56%, #050505 72%),
    conic-gradient(#ffe0ad, #6d3015, #e89951, #31160d, #ffe0ad);
  box-shadow: 0 0 7px #ffb75f, 0 0 17px rgba(255,83,20,.62), 0 7px 13px rgba(0,0,0,.75), inset 0 1px 1px rgba(255,255,255,.64);
}
.dial-stage[data-tier="ember"] .dial-knob { filter: brightness(.8) saturate(.8); }
.dial-stage[data-tier="furnace"] .dial-knob { filter: brightness(1.2) saturate(1.14) drop-shadow(0 0 10px rgba(255,164,64,.72)); }

/* Reflection is above the live pointer, making the rod read as sealed beneath the convex dome. */
.dial-glass-live {
  position: absolute;
  z-index: 7;
  left: 7.5%; right: 7.5%; top: 16.8%; height: 58.5%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 37% 18% at 37% 18%, rgba(255,255,255,.18), transparent 72%),
    linear-gradient(116deg, transparent 0 29%, rgba(235,249,255,.05) 36%, rgba(255,255,255,.15) 40%, transparent 47% 100%);
  mix-blend-mode: screen;
  filter: blur(.25px);
  opacity: .68;
}

.dial-forge-mode {
  position: absolute;
  z-index: 10;
  left: 70.3%; top: 79.3%; width: 21.8%; height: 11.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(207, 142, 89, .22);
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 20%, rgba(121,59,25,.16), rgba(1,5,8,.48));
  color: #d2b28e;
  font: 900 clamp(7px, 2.1vw, 11px)/1 "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .1s ease;
}
.dial-forge-mode small { color: #776352; font-size: .68em; letter-spacing: .15em; transition: color .2s ease; }
.dial-forge-mode:hover { color: #ffe4bd; border-color: rgba(255,184,105,.44); }
.dial-forge-mode:active { transform: translateY(1px) scale(.985); }
.dial-card[data-forge="on"] .dial-forge-mode {
  color: #fff9e7;
  border-color: rgba(255, 225, 168, .86);
  background: radial-gradient(ellipse at 50% 28%, rgba(255,232,173,.38), rgba(255,120,32,.3) 37%, rgba(76,21,6,.74) 76%);
  box-shadow: inset 0 0 16px rgba(255,191,91,.48), 0 0 5px #fff2c9, 0 0 17px #ff9a3d, 0 0 34px rgba(255,67,14,.66);
  text-shadow: 0 0 6px #fff, 0 0 13px #ff8f32;
}
.dial-card[data-forge="on"] .dial-forge-mode small { color: #fff0c9; }
.dial-card[data-forge="on"]::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 22px;
  pointer-events: none;
  box-shadow: inset 0 0 36px rgba(255, 95, 18, .13);
}

.dial-readout { margin: 7px 2px 0; min-height: 48px; }
.dial-tier-name { font-size: 18px; }
.dial-tier-desc { margin-top: 3px; font-size: 10.5px; }
.dial-cost { margin-top: 4px; font-size: 8.5px; }
.dial-scale { display: none; }
.dial-done {
  margin-top: 7px;
  padding: 10px;
  border-radius: 10px;
  color: #241006;
  background: linear-gradient(180deg, #ffe2b0, #ef9b50 54%, #b95724);
  border-color: rgba(255, 213, 157, .72);
  box-shadow: 0 4px 17px rgba(255,105,30,.24), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 7px rgba(75,20,5,.3);
}

.dial-spark { z-index: 5; left: 49%; top: 59%; width: 3px; height: 3px; }
.dial-card[data-tier="ember"] .dial-spark { display: none; }
.dial-card[data-tier="flame"] .dial-spark { animation-duration: 1.7s; }
.dial-card.forge-pulse { animation: forge-artifact-pulse .58s ease-out; }
@keyframes forge-artifact-pulse {
  0% { filter: brightness(1); }
  34% { filter: brightness(1.28) saturate(1.16); }
  100% { filter: brightness(1); }
}

.forge-trigger[data-forge="on"]::after {
  content: "";
  position: absolute;
  right: 3px; top: 3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fff3c4;
  box-shadow: 0 0 4px #fff, 0 0 10px #ff9f42, 0 0 18px #ff4d14;
}

@media (max-width: 520px) {
  .dial-card { padding: 8px 9px 9px; border-radius: 22px; }
  .dial-kicker { font-size: 7px; }
  .dial-title { margin-bottom: 5px; font-size: 12px; }
  .dial-readout { min-height: 43px; }
  .dial-tier-name { font-size: 16px; }
  .dial-tier-desc { font-size: 9.5px; line-height: 1.3; }
  .dial-done { margin-top: 5px; padding: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .dial-art, .dial-knob, .dial-forge-mode { transition: none !important; }
  .dial-card.forge-pulse { animation: none !important; }
}

/* ============================ full-screen dial reveal ============================
   The interface slides off to the LEFT (mirror of the Forge Images slide-right) and the dial
   owns the screen; the arrow on the left edge brings the interface back. Transform contexts
   exist only while body.dfd-anim is on, so app position:fixed behaves normally otherwise. */
body.dfd-anim #sidebar,
body.dfd-anim #commandbar,
body.dfd-anim #neural-glass,
body.dfd-anim #overlay {
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0.28, 1);
  will-change: transform;
}
body.dfd-open #sidebar,
body.dfd-open #commandbar,
body.dfd-open #neural-glass,
body.dfd-open #overlay {
  /* Carousel flip 2026-07-26: pressing left slides the view RIGHT; the Forge Dial lives leftward. */
  transform: translateX(108vw);
  pointer-events: none;
}

#dfd-root {
  position: fixed;
  inset: 0;
  z-index: 70;
  transform: translateX(-104vw);
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0.28, 1);
}
body.dfd-open #dfd-root { transform: none; }

.dfd-back {
  position: fixed;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 44px;
  height: 84px;
  border-radius: 14px;
  border: 1px solid rgba(255, 154, 58, 0.9);
  background: rgba(14, 8, 4, 0.55);
  box-shadow: 0 0 14px rgba(255, 122, 30, 0.3);
  color: #ffd9ad;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1400;
}
.dfd-back svg { width: 22px; height: 22px; }
.dfd-back:active { transform: translateY(-50%) scale(0.96); }
@media (max-width: 560px) { .dfd-back { width: 38px; height: 72px; left: 3px; } }

@media (prefers-reduced-motion: reduce) {
  body.dfd-anim #sidebar, body.dfd-anim #commandbar, body.dfd-anim #neural-glass, body.dfd-anim #overlay, #dfd-root { transition: none; }
}

/* ============================ WILDFIRE + FIRE ALARM (2026-07-19) ============================
 * Wildfire is the owner's broad-authority arming switch. It sits opposite Forge Mode on the dial
 * and reads deliberately hotter: Forge Mode is reach, Wildfire is reach WITHOUT the confirmation
 * gates, across both machines. The visual weight should match the actual weight.
 */
.dial-wildfire {
  position: absolute;
  z-index: 10;
  left: 7.9%; top: 79.3%; width: 21.8%; height: 11.1%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(207, 108, 66, .24);
  border-radius: 8px;
  background: radial-gradient(ellipse at 50% 20%, rgba(121,38,16,.18), rgba(1,5,8,.48));
  color: #d2a08e;
  font: 900 clamp(7px, 2.1vw, 11px)/1 "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px #000;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .1s ease;
}
.dial-wildfire small { color: #7d5a4c; font-size: .62em; letter-spacing: .12em; line-height: 1.15; text-align: center; transition: color .2s ease; }
.dial-wildfire:hover { color: #ffd7bd; border-color: rgba(255,138,79,.46); }
.dial-wildfire:active { transform: translateY(1px) scale(.985); }

/* Armed. Hotter and whiter at the core than Forge Mode, with a slow breath so it never reads as
 * a static decoration you can stop noticing. */
.dial-card[data-wildfire="on"] .dial-wildfire {
  color: #fffaf2;
  border-color: rgba(255, 196, 150, .9);
  background: radial-gradient(ellipse at 50% 26%, rgba(255,255,246,.46), rgba(255,86,24,.36) 34%, rgba(92,14,4,.8) 78%);
  box-shadow: inset 0 0 18px rgba(255,140,70,.55), 0 0 6px #fff6e8, 0 0 20px #ff6a20, 0 0 42px rgba(255,40,8,.7);
  text-shadow: 0 0 7px #fff, 0 0 15px #ff6a20;
  animation: wildfire-breathe 2.6s ease-in-out infinite;
}
.dial-card[data-wildfire="on"] .dial-wildfire small { color: #ffe2c8; }
@keyframes wildfire-breathe {
  0%, 100% { box-shadow: inset 0 0 18px rgba(255,140,70,.55), 0 0 6px #fff6e8, 0 0 20px #ff6a20, 0 0 42px rgba(255,40,8,.7); }
  50%      { box-shadow: inset 0 0 22px rgba(255,170,100,.66), 0 0 9px #fff, 0 0 28px #ff8038, 0 0 56px rgba(255,60,14,.82); }
}

/* Armed on a model that is not on the roster. Amber, not red: the server will refuse it, so this
 * is a "you are about to be told no" state rather than a danger state. */
.dial-wildfire.dial-wildfire-mismatch {
  border-color: rgba(255, 196, 74, .8);
  background: radial-gradient(ellipse at 50% 26%, rgba(255,226,150,.28), rgba(70,48,6,.72) 74%);
  box-shadow: inset 0 0 12px rgba(255,196,74,.4), 0 0 12px rgba(255,180,60,.5);
  animation: none;
}
.dial-wildfire.dial-wildfire-mismatch small { color: #ffdf9c; }

/* The composer trigger carries a hairline ember while Wildfire is armed, so you can see it is on
 * without opening the dial. */
body.wildfire-armed .forge-trigger {
  filter: drop-shadow(0 0 4px #ff7a2a) drop-shadow(0 0 10px rgba(255,60,14,.55));
}

/* Fire Alarm button styles removed with the button (Fred, 2026-07-30). */

/* ------------------------- in-conversation notices ------------------------- */
.ctx.wildfire-note, .ctx.tools-capped, .ctx.tools-unavailable {
  border-left: 2px solid rgba(255,138,60,.6);
  padding-left: 8px;
  margin: 6px 0;
  line-height: 1.4;
}
.ctx.wildfire-nudge   { color: #ffbe86; border-left-color: #ff8a3c; }
.ctx.wildfire-blocked { color: #ffcf87; border-left-color: #ffb43c; }
.ctx.wildfire-denied  { color: #ff9d8a; border-left-color: #ff5a3c; }
/* The two that used to fail silently. Amber, and never quiet. */
.ctx.tools-capped      { color: #ffd79a; border-left-color: #ffb43c; }
.ctx.tools-unavailable { color: #ffb0a0; border-left-color: #ff5a3c; font-weight: 600; }