/* Monolith Studio CORE - shared chrome CSS (editor + builder).
   Extracted from studio.html (ARCHITECTURE_PLAN Phase 3 / decomposition step: chrome CSS).
   The UI components both apps share. Linked after types.css. This module accumulates the shared
   chrome (dialogs first; bars/tiles/journey follow as they're carved) so the builder renders the
   exact same chrome as the editor. Pairs with the eventual core/chrome.js (component behavior).

   Reusable confirm/share/QR dialog: shared frosted card, one filled-primary action,
      ghost cancel, danger=red rest-tint. */
:root{ --z-dropdown:70; --z-sticky:80; --z-modal-backdrop:1000; --z-modal:1010; --z-toast:1100; --z-tooltip:1200; }
.dlgback{ position:fixed; inset:0; z-index:var(--z-modal-backdrop); display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(5,5,7,.66); opacity:0; transition:opacity 160ms cubic-bezier(.22,1,.36,1); }
.dlgback.show, .dlgback[data-visible="1"]{ opacity:1; }
.dlg{ position:relative; z-index:var(--z-modal); width:min(420px,100%); max-height:calc(100dvh - 40px); display:flex; flex-direction:column; overflow:hidden; box-sizing:border-box; background:#1b1b1b; border:1px solid rgba(255,255,255,.14); border-radius:8px; box-shadow:0 8px 8px rgba(0,0,0,.34); padding:0; transform:translateY(6px) scale(.99); transition:transform 160ms cubic-bezier(.22,1,.36,1); }
.dlg:focus{ outline:none; }
.dlgback.show .dlg, .dlgback[data-visible="1"] .dlg{ transform:none; }
.dialog-head{ flex:0 0 auto; min-height:58px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; box-sizing:border-box; padding:15px 16px 13px 18px; border-bottom:1px solid var(--line); background:#1e1e1e; }
.dialog-heading{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.dlg .dtitle{ margin:0; color:var(--txt); font-size:15px; line-height:1.25; font-weight:650; letter-spacing:0; text-wrap:balance; }
.dlg .dsubtitle{ margin:0; color:var(--muted); font-size:11px; line-height:1.35; text-wrap:pretty; }
.dialog-close{ appearance:none; flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:4px; background:transparent; color:var(--muted); padding:0; font:20px/1 Roboto,system-ui,sans-serif; cursor:pointer; }
.dialog-close:hover{ background:rgba(255,255,255,.06); color:var(--txt); }
.dialog-close:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.dialog-body{ min-height:0; overflow:auto; padding:16px 18px; color:var(--txt); }
.dialog-body{ scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:rgba(176,176,184,.46) transparent; }
.dialog-body::-webkit-scrollbar{ width:7px; height:7px; }
.dialog-body::-webkit-scrollbar-track{ background:transparent; }
.dialog-body::-webkit-scrollbar-thumb{ background:rgba(176,176,184,.38); border:2px solid transparent; border-radius:8px; background-clip:content-box; }
.dialog-body::-webkit-scrollbar-thumb:hover{ background:rgba(188,188,196,.54); background-clip:content-box; }
.dialog-body::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.dialog-foot{ flex:0 0 auto; padding:11px 14px; border-top:1px solid var(--line); background:#181818; }
.dlg .dmsg{ max-width:68ch; font-size:13px; color:var(--muted); line-height:1.5; }
.dlg .dacts{ min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0; }
.dacts-start, .dacts-end{ display:flex; align-items:center; gap:8px; }
.dacts-end{ margin-left:auto; }
.dbtn{ min-height:32px; font:600 12px/1.2 Roboto,system-ui,sans-serif; padding:7px 13px; border-radius:4px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--txt); transition:background 140ms ease,border-color 140ms ease,color 140ms ease,opacity 140ms ease; }
.dbtn:disabled{ pointer-events:none; }
.dcancel:hover, .dneutral:hover, .dextra:hover{ background:rgba(255,255,255,.05); }
.dbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.dok:hover{ background:var(--primary-hi); border-color:var(--primary-hi); }
.dok.danger{ background:var(--bad); color:#fff; border-color:var(--bad); }
.dok.danger:hover{ background:var(--bad-rest); border-color:var(--bad-rest); color:#fff; }
.dthird:hover{ background:rgba(255,255,255,.05); }
.dlg .dbtn{ min-height:32px; font:600 12px/1.2 Roboto,system-ui,sans-serif; padding:7px 13px; border-radius:4px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--txt); transition:background 140ms ease,border-color 140ms ease,color 140ms ease; }
.dlg .dcancel:hover, .dlg .dneutral:hover, .dlg .dextra:hover{ background:rgba(255,255,255,.05); }
.dlg .dok:hover{ background:var(--primary-hi); border-color:var(--primary-hi); }
.dlg .dok.danger{ background:var(--bad); color:#fff; border-color:var(--bad); }
.dlg .dok.danger:hover{ background:var(--bad-rest); border-color:var(--bad-rest); color:#fff; }
.dlg .dialog-save.is-dirty:hover{ background:var(--primary-hi); border-color:var(--primary-hi); color:#fff; }
.dlg .dthird:hover{ background:rgba(255,255,255,.05); }   /* the middle (3-way) button - neutral ghost like cancel */
.qrdlg{ width:min(460px,100%); }
.qrcard{ width:266px; height:266px; margin:14px auto 2px; padding:16px; background:#fff; border-radius:8px; display:flex; align-items:center; justify-content:center; }   /* white card so the QR is dark-on-light = reliably scannable, even inside the dark dialog */
.qrcard svg{ width:100%; height:100%; display:block; }
.copydlg{ width:min(560px,100%); }
.copyctx{ display:flex; align-items:center; gap:9px; margin-top:10px; color:var(--muted); font-size:12px; }
.copyctx span{ color:var(--low); text-transform:uppercase; letter-spacing:.05em; font-size:10px; font-weight:600; min-width:78px; }
.copyctx code{ font:11px/1.3 var(--mono); color:var(--link); overflow-wrap:anywhere; }
.copyctx b{ font:600 11px/1.3 var(--mono); color:var(--txt); border:1px solid var(--line); border-radius:4px; padding:2px 6px; background:rgba(255,255,255,.025); }
.bcfield{ display:block; margin-top:11px; }
.bcfield span{ display:block; margin-bottom:5px; color:var(--low); text-transform:uppercase; letter-spacing:.05em; font-size:10px; font-weight:600; }
.bcfield input, .bcfield textarea{ width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:4px; background:#1C1C1C; color:var(--txt); font:13px/1.45 Roboto,system-ui,sans-serif; padding:8px 9px; outline:none; }
.bcfield textarea{ min-height:76px; resize:vertical; }
.bcfield input:focus, .bcfield textarea:focus{ border-color:rgba(169,133,221,.45); box-shadow:0 0 0 1px rgba(169,133,221,.16); }
@media(max-width:620px){
  .dlgback{ align-items:center; padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }   /* CENTRED, not bottom-anchored: this is a modal, and flex-end made it read as a bottom sheet
     while nothing implements the grab handle or drag a sheet promises. The safe-area padding stays on the BACKDROP, not the sheet,
     so .dlg's max-height:calc(100dvh - 24px) still measures correctly. */
  .dlg{ width:100%; max-height:calc(100dvh - 24px); }
  .dialog-body{ padding:14px; }
  .dialog-foot{ padding:10px 12px; }
}
@media(prefers-reduced-motion:reduce){
  .dlgback, .dlg{ transition:none; }
}

/* ── build journey stepper ── one six-phase progress row across the 3 entry points;
   the markup is built by core/primitives.js journeyHTML()/setJourney() (the shared brick). */
.bartop .journey{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px; pointer-events:none; }
.floatbar:not(.builder-page-top) .journey{ left:calc(50% - 198px); }   /* legacy Studio preview only; shared Builder headers stay at true screen center */
.jstep{ display:flex; align-items:center; gap:6px; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:12px; color:var(--low); white-space:nowrap; }
.jstep .jn{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; padding-top:1px; line-height:1; text-align:center; font-size:10px; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.jstep.done{ color:var(--muted); } .jstep.done .jn{ background:var(--wash); border-color:rgba(169,133,221,.5); color:var(--accent); }
.jstep.active{ color:var(--txt); } .jstep.active .jn{ background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.jsep{ width:18px; height:1px; background:var(--line); }
@media(max-width:1018px){
  .bartop .jstep:not(.active) .jlbl{ display:none; }   /* the active phase keeps its name; the others are numerals */
}
@media(max-width:760px){ .bartop .journey{ display:none; } }

/* ── breadcrumb trail ── Projects > project > stage; sits in the header content band of
   non-3D pages (Assemble/Configure), filled by setCrumbs(). Shared so both apps route alike. */
.crumbs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:9px; }   /* type = .t-meta */
.crumbs .clink{ color:var(--txt); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; transition:color 140ms ease; }   /* the LINK is the loud one: the crumb is a back affordance, and the current page is already named by the eyebrow + lead beneath it */
.crumbs .clink:hover{ color:var(--link); }
.crumbs .ccur{ color:var(--muted); font-size:12px; }
.crumbs .csep{ color:var(--low); font-size:11px; }

/* ── question/choice chrome ── shared form primitives for guided setup and future
   builder-facing intake surfaces. These own the panel, rows, checkmark, suffix input,
   and action bar so form pages do not drift into local one-off UI. */
.chrome-flow{ display:flex; flex-direction:column; width:100%; gap:12px; }
.chrome-question{ width:100%; margin:0; box-shadow:var(--elev); padding:20px; box-sizing:border-box; display:flex; flex-direction:column; min-height:0; }
.chrome-question-head{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--line); }
.chrome-question-head h3{ margin:0; color:var(--txt); font-size:17px; line-height:1.25; font-weight:700; letter-spacing:0; }
.chrome-question-head p{ margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.45; }
.chrome-question-body{ display:flex; flex-direction:column; min-width:0; }
.chrome-choice-group{ display:flex; flex-direction:column; gap:8px; width:100%; }
.chrome-choice{ width:100%; min-height:64px; box-sizing:border-box; padding:13px 14px; background:var(--panel2); border:1px solid var(--line); border-radius:8px; color:var(--txt); cursor:pointer; font:inherit; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; text-align:left; transition:background 140ms ease,border-color 140ms ease,color 140ms ease,box-shadow 140ms ease; }
.chrome-choice.marked{ grid-template-columns:14px minmax(0,1fr) auto; }
.chrome-choice:hover{ border-color:rgba(169,133,221,.42); background:var(--wash); }
.chrome-choice.on{ border-color:rgba(169,133,221,.62); background:rgba(116,80,182,.16); box-shadow:0 0 0 1px rgba(169,133,221,.10); }
.chrome-choice-mark{ width:13px; height:13px; border:1px solid rgba(255,255,255,.34); border-radius:3px; position:relative; background:#181818; }
.chrome-choice.mode-single .chrome-choice-mark{ border-radius:50%; }
.chrome-choice.on .chrome-choice-mark{ border-color:var(--accent); background:var(--primary); box-shadow:0 0 0 3px rgba(116,80,182,.16); }
.chrome-choice.mode-multi.on .chrome-choice-mark::after{ content:""; position:absolute; left:3px; top:1px; width:5px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(40deg); }
.chrome-choice.mode-single.on .chrome-choice-mark::after{ content:""; position:absolute; left:3px; top:3px; width:5px; height:5px; border-radius:50%; background:#fff; }
.chrome-choice-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.chrome-choice b{ color:var(--txt); font-size:13px; line-height:1.2; font-weight:700; }
.chrome-choice small{ color:var(--muted); font-size:11.5px; line-height:1.35; }
.chrome-choice small span{ color:var(--accent); font:700 9px/1 var(--mono); text-transform:uppercase; letter-spacing:.06em; margin-right:7px; }
.chrome-choice-detail{ margin-top:4px; padding-left:9px; border-left:2px solid rgba(169,133,221,.42); color:rgba(229,225,236,.82); font-style:normal; font-size:11.5px; line-height:1.35; }
.guide-native-choices{ min-width:0; margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:8px; }
.guide-native-choices>legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* .guide-native-choice is gone: it was a SECOND choice-row system sitting in the same form as .chrome-choice
   with a different selected state. The native radio stays for a11y, visually hidden behind the custom mark. */
.chrome-choice:focus-within{ outline:2px solid var(--accent); outline-offset:2px; }
.chrome-choice-native{ position:absolute; width:1px; height:1px; margin:0; opacity:0; pointer-events:none; }
/* .guide-single-copy is gone with the row system it belonged to - .chrome-choice-copy owns this now. */
.chrome-choice-nest{ overflow:hidden; }
.chrome-choice-nest > .chrome-choice{ border:0; border-radius:0; border-bottom:1px solid rgba(255,255,255,.08); background:transparent; }
.chrome-choice-nest > .chrome-choice:hover{ background:var(--wash); }
.chrome-choice-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.chrome-choice-grid.compact{ padding:10px; }
.chrome-choice-grid .chrome-choice{ min-height:64px; }
/* A `text` question is a row of fields on its own step. It is deliberately NOT a control
   inside a choice row - that nesting is what the three flat question types replaced. */
.guide-text-fields{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; }
.guide-text-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.guide-text-field > label{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.guide-text-fields .chrome-input-suffix{ width:104px; justify-self:start; }
.guide-text-fields .chrome-input-suffix input{ padding:9px 10px; text-align:center; }
.guide-text-fields > em{ font-style:normal; color:var(--low); font-size:11px; line-height:34px; }   /* sits on the input baseline, not the label's */
.chrome-input-suffix{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px; justify-self:end; width:136px; }
.chrome-input-suffix input{ width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,.16); border-radius:4px; background:#141414; color:var(--txt); padding:7px 8px; font:700 12px/1 var(--mono); text-align:right; outline:0; }
.chrome-input-suffix input::-webkit-outer-spin-button, .chrome-input-suffix input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.chrome-input-suffix input[type=number]{ appearance:textfield; -moz-appearance:textfield; }
.chrome-input-suffix input:focus{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(116,80,182,.18); }
.chrome-input-suffix em{ font-style:normal; color:var(--low); font-size:11px; }
.chrome-actions{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.chrome-actions .dbtn{ min-width:96px; display:inline-flex; align-items:center; justify-content:center; }
@media(max-width:760px){
  .chrome-question{ padding:16px; }
  .chrome-choice{ min-height:60px; }
  .chrome-choice-grid{ grid-template-columns:1fr; }
  .chrome-input-suffix input{ min-height:44px; }   /* .dev-touch raised BUTTONS to 44px and never touched inputs */
  .guide-text-fields{ gap:10px; }
  .guide-text-fields .chrome-input-suffix{ width:96px; }
  .guide-text-fields > em{ line-height:44px; }
}