/* --- Fidelity pass: the scarf is now drawn by the shared renderer (print.js scarfSvg via motif-art.js) on every surface.
   This file keeps the illustrated fallbacks visible only until the renderer paints, hides the legacy glyph layers,
   and carries the state-driven UI additions on top of styles.css. Colours reference tokens from styles.css. --- */
.hero-art .scarf-fold:not(.has-bk-scarf){background-image:url('assets/scarf-art.svg');background-size:cover;background-position:center}
.hero-art .fold-pattern,.hero-art .fold-bloom,.hero-art .halo,.hero-art .spark{display:none}
.story-stage blockquote{padding:16px 20px;background:rgba(16,19,58,.84);border-left:2px solid var(--cotton);border-radius:0}
.scarf-canvas,.reveal-scarf,.mini-scarf{background-image:none;border:0;box-shadow:none}
.scarf-canvas .scarf-border,.scarf-canvas .corner,.scarf-canvas .star-field,.scarf-canvas .motif-object,.reveal-scarf .reveal-bloom,.reveal-scarf .reveal-leaf{display:none}
.has-bk-scarf .generated-layer,.spotlight-scarf.has-bk-scarf .spotlight-glyph{display:none}
.spotlight-scarf.has-bk-scarf{background-image:none!important;border:0!important;box-shadow:none!important}
.mini-scarf.has-bk-scarf,.scarf-fold.has-bk-scarf{background-image:none;background-color:transparent}
.motif-card .motif-visual{background:none;border-radius:0}
.motif-card .lock{display:none}
.motif-card.locked h3,.motif-card.locked p{color:var(--cotton-muted)!important;opacity:1!important}
.story-signature-word:before{content:none!important}
@media(max-width:820px){.hero-art .scarf-fold{left:10%;right:10%}}

/* --- Functional production pass --- */
.save-status{font-size:12px;letter-spacing:.04em;color:#8fbf9f;border-left:1px solid var(--kaima-rule);padding-left:12px;white-space:nowrap}
.final-meta{margin-top:12px;color:var(--cotton-muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.motif-card.selected{border-color:var(--cotton);outline:1px solid var(--kaima-rule);outline-offset:3px}
.motif-card.selected:before{content:"IN MY SCARF";position:absolute;left:14px;bottom:12px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--cotton-muted)}
.builder-motif{position:relative;text-align:left}
.builder-motif .remove-mark{position:absolute;right:8px;top:7px;color:var(--cotton-muted);font-size:16px;line-height:1}
.generated-layer{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.generated-motif{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--s)) rotate(var(--r));transform-origin:center;color:var(--c);opacity:var(--o);font-size:0;line-height:1}
.scarf-canvas.drape-preview{border-radius:0;rotate:0deg}
.final-actions button:disabled{opacity:.55;cursor:progress}
.order-dialog{width:min(680px,calc(100vw - 32px));border:1px solid var(--kaima-rule);border-radius:0;padding:0;background:transparent;color:var(--cotton)}
.order-dialog::backdrop{background:rgba(16,19,58,.82)}
.order-card{padding:30px;background:var(--field-deep);border-radius:0;margin:0}
.order-card h3{font-size:clamp(30px,3.4vw,44px);color:var(--cotton);margin:12px 0}.order-card p{max-width:58ch}.order-details{margin:24px 0;border-top:1px solid var(--kaima-rule)}
.order-details>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--kaima-rule)}
.order-details dt{font-size:12px;letter-spacing:.08em;color:var(--cotton-muted);text-transform:uppercase;font-weight:600}.order-details dd{margin:0;color:var(--cotton);font-size:14px;line-height:1.5}.order-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
@media(max-width:820px){.save-status{display:none}}

/* A1 §8 #9 — the Meaning helpers (meaning-tools.js, design-story.js) were written for a cream panel; re-token them to the dark editor. */
#meaning .meaning-inspiration-toggle{background:var(--field-deep);border:1px solid var(--kaima-rule);border-radius:0}
#meaning .meaning-inspiration-toggle span b{color:var(--cotton);font-size:12px}
#meaning .meaning-inspiration-toggle span small{color:var(--cotton-muted);font-size:12px}
#meaning .meaning-inspiration-toggle button{background:transparent;color:var(--cotton);border:1px solid var(--kaima-rule);border-radius:2px;font-size:12px;min-height:44px}
#meaning .meaning-inspiration-toggle button:hover,#meaning .meaning-inspiration-toggle button:focus-visible{border-color:var(--cotton);color:var(--cotton)}
#meaning .meaning-inspiration-toggle button[aria-expanded="true"]{background:var(--cotton);color:var(--field);border-color:var(--cotton)}
#meaning .meaning-inspiration-note{color:var(--cotton-muted);font-size:12px}
#meaning .design-story-bridge{background:var(--field-deep);border:1px solid var(--kaima-rule);border-radius:0;color:var(--cotton)}
#meaning .design-story-top b,#meaning .design-story-top small{color:var(--cotton-muted);font-size:12px}
#meaning .design-story-fact{background:var(--field-raised);border:1px solid var(--kaima-rule);border-radius:2px;color:var(--cotton-muted);font-size:12px;min-height:28px}
#meaning .design-story-fact strong{color:var(--cotton)}
#meaning .design-story-prompt{color:var(--cotton);font-size:13px}
#meaning .design-story-start{background:var(--field-raised);border:1px solid var(--kaima-rule);border-radius:2px;color:var(--cotton);font-size:13px;min-height:44px}
#meaning .design-story-start:hover,#meaning .design-story-start:focus-visible{border-color:var(--cotton);background:var(--field-raised);color:var(--cotton)}
#meaning .design-story-note{color:var(--cotton-muted);font-size:12px}
#meaning .design-story-toast{color:var(--rose-ink);font-size:12px}

/* Compatibility layer for the richer state-driven DOM on top of the base CSS. */
.panel-title{display:flex;justify-content:space-between;gap:10px;align-items:center}
.panel-title span{color:var(--cotton-muted);font-weight:500}
.motif-card{border-radius:0;background:var(--field-raised);overflow:hidden}
.motif-card .motif-visual{height:104px;display:grid;place-items:center;color:var(--cotton);font-size:0}
.motif-card .tag{position:absolute;right:12px;top:12px;font-size:12px;letter-spacing:.06em;font-weight:600;color:var(--cotton-muted)}
.builder-motifs{display:grid;grid-template-columns:1fr;gap:9px;margin-top:16px}
.builder-motif{aspect-ratio:auto;display:flex;align-items:center;gap:10px;padding:10px 30px 10px 10px;border-radius:0;background:var(--field-deep);border:1px solid var(--kaima-rule);width:100%;min-height:56px;color:var(--cotton)}
.builder-motif .icon{font-size:0;width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px}.builder-motif b{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:18px;line-height:1.1}.builder-motif small{display:block;color:var(--cotton-muted);font-size:12px;line-height:1.35}
.meaning-chip{display:flex;align-items:center;gap:10px}.meaning-chip>span{font-size:0;width:36px;height:36px;display:grid;place-items:center;flex:0 0 36px}.meaning-chip b{display:block;font-family:"Cormorant Garamond",serif;font-weight:500;font-size:19px;line-height:1.1}.meaning-chip small{display:block;color:var(--cotton-muted);font-size:12px;font-family:Manrope,system-ui,sans-serif}
.story-editor input,.story-editor textarea{border-radius:2px;outline:none}.story-editor input:focus-visible,.story-editor textarea:focus-visible{outline:2px solid var(--cotton);outline-offset:3px}.word-picks button{cursor:pointer}
.final-actions{align-items:stretch}.final-actions button{min-height:48px;border-radius:2px}
@media(max-width:820px){.builder-motifs{grid-template-columns:repeat(2,minmax(0,1fr))}.motif-card .motif-visual{height:84px}}
@media(max-width:540px){.builder-motifs{grid-template-columns:1fr}.motif-card .motif-visual{height:76px}}
/* 15.09 content: the source line under a codex plate, and quiet empty title/story states */
.codex-plate cite{display:block;margin-top:6px;font:500 12px/1.45 Manrope,system-ui,sans-serif;font-style:normal;color:var(--cotton-muted)}
#finalName.is-untitled,#previewName.is-untitled,#finalStory.is-empty{color:var(--cotton-muted)}
.story-preview-card #previewName.is-untitled{color:var(--ink-muted-light)}