/* forge.css — THE WORDFORGE drawer (public/forge-ui.js; docs/ai-forge.md). Mounted inside .bld (zoomed by --ui-scale with it).
   Every rule is scoped to .wfg / .wfg-* (test/cssscope.test.mjs): nothing here can reach another screen.
   Look: the builder's dark stone + gold, with the forge's own heat (ember orange) for its flame, its heat gauge and Forge it.
   LAYOUT (verdict 1, fix 5): the drawer is its own COLUMN, never an overlay. forge-ui.js puts .wfg-on on the .bld while the drawer is
   open; the builder's main area and footer then keep --wfg-w clear on the right (the columns inside reflow into what is left), and
   the drawer fills exactly that strip. tools/forgeshots.mjs fails any builder control or the boss canvas that sits under it. */
.bld.wfg-on { --wfg-w: clamp(300px, 29%, 372px); }
.bld.wfg-on > .bld-main, .bld.wfg-on > .bld-bot { margin-right: var(--wfg-w); }
.bld.wfg-on[data-mode=stats] .bld-main, .bld.wfg-on[data-mode=identity] .bld-main, .bld.wfg-on[data-mode=fx] .bld-main { grid-template-columns: 300px minmax(0, 1fr) 240px; }
.bld.wfg-on .bld-main > .bld-spore .sp { grid-template-columns: 250px minmax(0, 1fr) 224px; }
.bld.wfg-on .bld-spore .sp-bar { flex-wrap: wrap; row-gap: 3px; }
.bld.wfg-on.bw-on .bw-root .bw-top { flex-wrap: wrap; row-gap: 4px; gap: 6px 12px; }
.bld.wfg-on.bw-on .bw-root .bw-top .htitle small { display: none; }
.bld.wfg-on.bw-on .bw-root .bcols { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); gap: 10px; }
/* the Powers step beside the drawer (verdict 1: perk names were cut: "Regeneratio", "Overcloc"): the right column is ~40% of a
   narrower area, so each perk card stacks its icon over its text (the name gets the whole card width, and wraps as a last
   resort), and the four wand bodies sit two by two (four tall slivers ate the wand list's room) */
.bld.wfg-on.bw-on .bw-root .bw-perks .perk { grid-template-columns: minmax(0, 1fr); }
.bld.wfg-on.bw-on .bw-root .bw-perks .perk img { grid-row: auto; margin: 0 0 2px; }
.bld.wfg-on.bw-on .bw-root .bw-perks .perk b { overflow-wrap: anywhere; }
.bld.wfg-on.bw-on .bw-root .bleft .bodies.bw-bodies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the Personality step's five motion cards are ~65 px wide beside the drawer: "SLITHER" ran over the card edges */
.bld.wfg-on .bm-card { padding: 4px 3px; }
.bld.wfg-on .bm-card canvas { width: min(72px, 100%); height: auto; aspect-ratio: 1; }
.bld.wfg-on .bm-card b { font-size: 11px; letter-spacing: 0; white-space: nowrap; }
.wfg { position: absolute; right: 0; bottom: 0; top: 44px; width: var(--wfg-w, 340px); max-width: 100%; z-index: 20; display: flex; flex-direction: column;
  font-family: var(--font); color: var(--text); font-size: 13px; user-select: text;
  background: radial-gradient(ellipse at 50% 108%, rgba(232, 100, 30, 0.2) 0%, rgba(232, 100, 30, 0) 58%), #141012;
  border-left: 2px solid #7b5a30; box-shadow: -8px 0 22px rgba(0, 0, 0, 0.6), inset 2px 0 0 #1f1812; }
.wfg.hidden { display: none; }
.wfg button { font-size: 12px; padding: 5px 9px; letter-spacing: 0.5px; }
.wfg button.small { font-size: 11px; padding: 4px 8px; }
.wfg kbd { font-family: var(--title); font-size: 10px; background: #1a1614; border: 1px solid var(--edge); padding: 0 4px; color: #fff; }

/* ---- head */
.wfg-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; background: linear-gradient(#2a1d14, #1c1410); border-bottom: 2px solid #5a4126; }
.wfg-flame { flex: none; position: relative; width: 14px; height: 18px; display: block; }
.wfg-flame::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent; animation: wfg-flick 0.9s steps(2, end) infinite;
  box-shadow: 6px 0 #e8641e, 4px 2px #e8641e, 6px 2px #e8641e, 4px 4px #e8641e, 6px 4px #e8641e, 8px 4px #e8641e, 2px 6px #e8641e, 4px 6px #e8641e, 6px 6px #e8641e, 8px 6px #e8641e, 10px 6px #e8641e, 2px 8px #e8641e, 4px 8px #e8641e, 6px 8px #ffd84a, 8px 8px #e8641e, 10px 8px #e8641e, 0 10px #e8641e, 2px 10px #e8641e, 4px 10px #e8641e, 6px 10px #ffd84a, 8px 10px #ffd84a, 10px 10px #e8641e, 12px 10px #e8641e, 0 12px #e8641e, 2px 12px #e8641e, 4px 12px #ffd84a, 6px 12px #ffd84a, 8px 12px #ffd84a, 10px 12px #e8641e, 12px 12px #e8641e, 2px 14px #e8641e, 4px 14px #ffd84a, 6px 14px #ffd84a, 8px 14px #ffd84a, 10px 14px #e8641e, 4px 16px #e8641e, 6px 16px #e8641e, 8px 16px #e8641e; }
.wfg-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.wfg-ttl b { font-family: var(--title); font-weight: 400; font-size: 16px; letter-spacing: 1.5px; color: var(--gold); text-transform: uppercase; text-shadow: 0 2px 0 #000; }
.wfg-ttl small { color: var(--dim); font-size: 11px; margin-top: 1px; }
.wfg .wfg-x { flex: none; min-width: 28px; padding: 3px 7px; font-size: 13px; }

/* ---- the body: a notice, then ONE section (form / forging / result); each = a scrolling main + a docked footer that stays in reach */
.wfg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wfg-form, .wfg-fire, .wfg-result { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wfg-form.hidden, .wfg-fire.hidden, .wfg-result.hidden, .wfg-notice.hidden { display: none; }
.wfg-main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #4a3f36 transparent; }
.wfg-dock { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; background: #17110e; border-top: 2px solid #3a2c1c; }
.wfg-lab { font-size: 12px; line-height: 1.35; color: #ecd9b4; }
.wfg-tips { margin-top: 2px; }

/* ---- the text boxes */
.wfg-field { position: relative; border: 2px solid #4a3a2a; background: #0d0a0c; box-shadow: inset 0 0 0 1px #000; }
.wfg-field:focus-within, .wfg-field.padon { border-color: var(--gold); box-shadow: inset 0 0 0 1px #000, 0 0 10px rgba(242, 193, 78, 0.28); }
.wfg textarea { display: block; width: 100%; box-sizing: border-box; resize: none; border: none; outline: none; background: transparent; color: #f2e6cc; caret-color: var(--gold);
  font-family: var(--font); font-size: 14px; line-height: 1.35; padding: 7px 9px 18px; text-transform: none; min-height: 84px; user-select: text; }
.wfg textarea.wfg-rv { min-height: 50px; padding-bottom: 7px; }
.wfg textarea::placeholder { color: #6f6556; }
.wfg textarea:disabled { opacity: 0.5; }
.wfg-count { position: absolute; right: 7px; bottom: 3px; font-size: 11px; color: var(--dimmer); pointer-events: none; }
.wfg-count[data-tone=warn] { color: #ffb347; }
.wfg-count[data-tone=full] { color: #ff6a5a; }

/* ---- example chips + the go row */
.wfg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wfg .wfg-chip { text-transform: none; letter-spacing: 0; font-family: var(--font); font-size: 12px; padding: 4px 8px; border-radius: 0; }
.wfg-acts { display: flex; align-items: center; gap: 10px; }
.wfg .wfg-go, .wfg .wfg-rgo { flex: none; font-size: 14px; padding: 8px 16px; color: #fff1d0; border-color: #e8902e; background: linear-gradient(#a8481a, #6e2a10); }
.wfg .wfg-go:hover:not(:disabled), .wfg .wfg-rgo:hover:not(:disabled), .wfg .wfg-go.padon, .wfg .wfg-rgo.padon { border-color: #ffd84a; background: linear-gradient(#c85a20, #84330f); }
.wfg .wfg-go:disabled, .wfg .wfg-rgo:disabled { background: linear-gradient(#3a2e28, #2a221c); border-color: var(--edge2); color: var(--dim); }
.wfg-keys { color: var(--dimmer); font-size: 11px; }
.wfg-quiet { margin: 0; color: var(--dimmer); font-size: 11px; line-height: 1.35; }

/* ---- the notice (errors, off, guest) */
.wfg-notice { flex: none; margin: 10px 12px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 7px 10px; border: 2px solid #7a3a2a; background: #2a1411; line-height: 1.35; }
.wfg-notice b { flex: 1 0 100%; font-family: var(--title); font-weight: 400; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #ff9a7a; }
.wfg-notice span { flex: 1 1 140px; min-width: 0; color: #f2dccb; }
.wfg-notice button { flex: none; }
.wfg-notice[data-tone=off] { border-color: #5a4a2a; background: #231b10; }
.wfg-notice[data-tone=off] b { color: var(--gold); }
.wfg-notice[data-tone=warn] { border-color: #8a6a24; background: #2a2010; }
.wfg-notice[data-tone=warn] b { color: #ffd070; }

/* ---- forging: the crucible */
.wfg-crucible { position: relative; height: 74px; border: 2px solid #4a3a2a; background: linear-gradient(#0d0a0c, #1f130c); overflow: hidden; }
.wfg-cells { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 14px; display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; }
.wfg-cells i { display: block; background: #2a1a14; box-shadow: inset 0 0 0 1px #000; }
.wfg-cells i.on { background: linear-gradient(#ffb347, #e8641e); box-shadow: inset 0 0 0 1px #5a2208, 0 0 6px rgba(232, 100, 30, 0.55); }
.wfg-cells i.edge { background: #8a3a14; animation: wfg-edge 0.5s steps(2, end) infinite; }
.wfg-sparks { position: absolute; inset: 0; }
.wfg-sparks i { position: absolute; bottom: 26px; width: 4px; height: 4px; background: #ffd84a; opacity: 0; animation: wfg-rise 1.8s steps(9, end) infinite; box-shadow: 0 0 6px rgba(255, 180, 60, 0.8); }
.wfg-sparks i:nth-child(1) { left: 14%; animation-delay: 0s; }
.wfg-sparks i:nth-child(2) { left: 32%; animation-delay: 0.7s; background: #ff9a3a; }
.wfg-sparks i:nth-child(3) { left: 51%; animation-delay: 0.3s; }
.wfg-sparks i:nth-child(4) { left: 70%; animation-delay: 1.1s; background: #ff9a3a; }
.wfg-sparks i:nth-child(5) { left: 86%; animation-delay: 0.5s; }
.wfg-flav { min-height: 18px; font-family: var(--title); font-size: 12px; letter-spacing: 1px; color: #ffd9a0; text-transform: uppercase; }
.wfg-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wfg-secs { font-size: 13px; color: var(--gold); }

/* ---- the pitch card */
.wfg-card { border: 2px solid #5a4630; background: linear-gradient(#211913, #17120f); padding: 10px 11px 9px; box-shadow: inset 0 0 0 1px #000; }
.wfg-name { margin: 0; font-family: var(--title); font-weight: 400; font-size: 19px; line-height: 1.1; letter-spacing: 1.5px; color: var(--gold); text-shadow: 0 2px 0 #000; overflow-wrap: anywhere; }
.wfg-taunt { margin: 3px 0 0; font-size: 12px; font-style: italic; color: #cdb890; overflow-wrap: anywhere; }
.wfg-pitch { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #f0e4cc; overflow-wrap: anywhere; user-select: text; }
.wfg-facts { margin: 9px 0 0; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 6px 8px; align-items: baseline; }
.wfg-facts dt { margin: 0; font-family: var(--title); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.wfg-facts dd { margin: 0; min-width: 0; font-size: 12px; line-height: 1.35; }
.wfg-facts dd small { display: block; font-size: 11px; color: var(--dim); }
.wfg-wand { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.wfg-wand:last-child { margin-bottom: 0; }
.wfg-wand b { font-weight: 400; color: #ecd9b4; }
.wfg-spells, .wfg-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.wfg-spell, .wfg-tag { display: inline-block; font-size: 11px; line-height: 1.2; padding: 2px 5px; background: #0f0b0d; color: #eadfc8; border: 1px solid var(--tc, #5a4630); border-left-width: 4px; }
.wfg-tag { --tc: #7b6650; border-left-width: 1px; }
.wfg-spell em, .wfg-tag em { font-style: normal; color: var(--gold); margin-left: 3px; }
.wfg-rep { margin-top: 9px; font-size: 12px; color: var(--dim); }
.wfg-rep summary { cursor: pointer; color: #cdb890; }
.wfg-rep summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wfg-rep ul { margin: 5px 0 0; padding-left: 16px; line-height: 1.4; }
.wfg-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wfg-row2 .wfg-keys { margin-left: auto; }
.wfg-revrow { display: flex; gap: 8px; align-items: stretch; }
.wfg-revrow .wfg-field { flex: 1; min-width: 0; }
.wfg-revrow .wfg-rgo { align-self: stretch; padding: 6px 12px; }
.wfg-left { text-align: left; margin-top: 8px; }
.wfg-dock .wfg-quiet:empty { display: none; }

@keyframes wfg-flick { 0% { transform: translateY(0); } 50% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes wfg-edge { 0% { opacity: 1; } 100% { opacity: 0.4; } }
@keyframes wfg-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-36px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wfg-flame::after, .wfg-cells i.edge, .wfg-sparks i { animation: none; } .wfg-sparks i { opacity: 0.8; } }

/* ---- the entry points (outside the drawer): the builder's header button, the New Automaton picker, the Workshop */
.bld .wfg-hdr { flex: none; white-space: nowrap; border-color: #e8902e; color: #ffe2b0; background: linear-gradient(#7a3a16, #4a2410); }
.bld .wfg-hdr:hover, .bld .wfg-hdr.padon, .bld .wfg-hdr.on { border-color: #ffd84a; color: #fff; background: linear-gradient(#a8481a, #6e2a10); }
.bld .wfg-tpl { border-color: #e8902e; color: #ffe2b0; background: linear-gradient(#a8481a, #6e2a10); }
.bld .wfg-tpl:hover, .bld .wfg-tpl.padon { border-color: #ffd84a; color: #fff; }
.wsnew .wfg-lib { color: #ffe2b0; border-color: #e8902e; background: linear-gradient(#a8481a, #6e2a10); }
.wsnew .wfg-lib:hover, .wsnew .wfg-lib.padon { border-color: #ffd84a; color: #fff; background: linear-gradient(#c85a20, #84330f); }

/* ---- a landscape phone (body.phone, public/phone-ui.js): the drawer's rows are tightened so the Forge it / Revise row stays
   on screen with the keyboard-less layout; every control keeps the builder's 44 px touch target */
body.phone .bld.wfg-on { --wfg-w: min(320px, 40vw); }
body.phone .bld.wfg-wide { --wfg-w: min(372px, 54vw); }
/* the phone's builder gives its preview column to the drawer (the big stage in the middle is the boss) and keeps parts + stage */
body.phone .bld.wfg-on .bld-name { max-width: 60px; }   /* (Personality is the longest step label: the header must still end on screen) */
body.phone .bld.wfg-on[data-studio=simple] .bld-main { grid-template-columns: clamp(150px, 22vw, 200px) minmax(0, 1fr); }
body.phone .bld.wfg-on[data-studio=simple] .bld-main > .bld-right { display: none; }
body.phone .bld.wfg-on[data-studio=adv] .bld-main { grid-template-columns: 170px minmax(0, 1fr) 0; }
body.phone .bld.wfg-on[data-studio=adv] .bld-main > .bld-right { display: none; }
body.phone .bld.wfg-on.bw-on .bw-root .bcols { grid-template-columns: minmax(0, 1fr) clamp(170px, 26vw, 220px); gap: 6px; }
body.phone .bld.wfg-on .bld-main > .bld-spore .sp { grid-template-columns: 170px minmax(0, 1fr) 150px; }
/* after a forge the phone shows a compact pitch strip: name + a three-line pitch + the revise row; the facts open on demand */
.wfg-more { margin-top: 2px; }
.wfg .wfg-moretog { display: none; margin-top: 6px; }
body.phone .wfg .wfg-moretog { display: inline-block; }
body.phone .wfg[data-compact] .wfg-more { display: none; }
body.phone .wfg[data-compact] .wfg-pitch { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 12px; line-height: 1.3; }
body.phone .wfg[data-compact] .wfg-taunt { display: none; }
body.phone .wfg[data-compact] .wfg-left { margin-top: 4px; }
body.phone .wfg-head { padding: 2px 4px 2px 10px; gap: 8px; }
body.phone .wfg-ttl b { font-size: 13px; letter-spacing: 1px; }
body.phone .wfg-ttl small { display: none; }
body.phone .wfg-main { padding: 6px 10px; gap: 6px; }
body.phone .wfg-dock { padding: 5px 10px 6px; gap: 4px; }
body.phone .wfg-notice { margin: 6px 10px 0; padding: 4px 8px; }
body.phone .wfg-lab { font-size: 12px; }
body.phone .wfg textarea { min-height: 52px; padding: 5px 8px 16px; }
body.phone .wfg textarea.wfg-rv { min-height: 40px; padding-bottom: 5px; }
body.phone .wfg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px; padding: 0 10px; }
body.phone .wfg .wfg-chip { flex: none; padding: 2px 8px; }
body.phone .wfg-tips, body.phone .wfg-keys { display: none; }
body.phone .wfg-dock .wfg-lab { display: none; }
body.phone .wfg-facts dt { font-size: 11px; }
body.phone .wfg-name { font-size: 16px; }
body.phone .wfg-card { padding: 7px 9px; }
body.phone .wfg .wfg-go, body.phone .wfg .wfg-rgo { font-size: 13px; padding: 4px 12px; }
body.phone .wfg-crucible { height: 56px; }
@media (max-width: 1100px) { .bld .wfg-hdr { padding: 5px 6px; letter-spacing: 0; font-size: 11px; } }

/* header room (deploy gate fc570b1): the Advanced studio header and narrower desktops show the Describe button as its
   icon only, so '◂ Simple' and the boss name keep their space; on phones the header has no room at all, so the
   Wordforge is reached from the Workshop's "Forge a boss from words" entry instead */
.bld[data-studio=adv] .wfg-hdr .wfg-lbl { display: none; }
.bld[data-studio=adv] .wfg-hdr { padding-left: 9px; padding-right: 9px; }
@media (max-width: 1400px) { .bld .wfg-hdr .wfg-lbl { display: none; } .bld .wfg-hdr { padding-left: 9px; padding-right: 9px; } }
body.phone .bld .wfg-hdr { display: none; }