/* Document makers (lib/document-ui.js): an editor beside a live page preview. Pages are paper and keep their own
   colours in both themes; only the surrounding chrome follows the light/dark tokens. */
.doc{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;height:100%;gap:8px}
.doc-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.doc-bar>.btn,.doc-more>summary{min-height:44px;display:inline-flex;align-items:center;gap:6px}
.doc-switch{display:none;gap:6px}
.doc-switch .chip[aria-pressed="true"],.doc-chips .chip[aria-pressed="true"]{background:var(--accent-solid,var(--accent));border-color:transparent;color:var(--on-accent,#fff)}
.doc-more{position:relative}
.doc-more>summary{list-style:none;cursor:pointer}.doc-more>summary::-webkit-details-marker{display:none}
.doc-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:30;display:grid;gap:4px;width:min(250px,calc(100vw - 32px));padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.doc-menu .btn{justify-content:flex-start;width:100%;min-height:44px;cursor:pointer}
.doc-status{flex:1 1 12rem;margin:0;min-height:1.4em;color:var(--muted);font-size:14px}.doc-status.is-error{color:var(--danger)}
.doc-layout{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:12px;flex:1;min-height:0}
.doc-editor{min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:10px;padding:2px 4px 24px 2px}
.doc-group{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0 14px}
.doc-group>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.doc-group[open]>summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.doc-group[open]{padding-bottom:14px}
.doc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.doc-field.is-wide,.doc-fields>.doc-field:has(textarea){grid-column:1/-1}
.doc-field textarea{resize:vertical;line-height:1.45}
.doc-fields+.doc-fields,.doc-check,.doc-image,.doc-starter,.doc-copy{margin-top:12px}
.doc-label{margin:10px 0 6px;font-size:14px;font-weight:650}.doc-design .doc-label:first-child{margin-top:0}
.doc-chips,.doc-swatches{display:flex;flex-wrap:wrap;gap:8px}
.doc-swatch{width:40px;height:40px;border-radius:99px;border:2px solid var(--surface);background:var(--swatch);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer}
.doc-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px var(--text)}
.doc-swatch:focus-visible{outline:3px solid var(--focus,var(--accent-ring));outline-offset:3px}
.doc-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.doc-inline select{flex:1;min-width:10rem}
.doc-thumb{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.doc-check{display:flex;align-items:center;gap:10px;min-height:44px;font-size:15px}.doc-check input{width:20px;height:20px}
.doc-item{margin:0 0 12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,var(--surface));min-width:0}
.doc-item>legend{padding:0 6px;font-weight:650;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.doc-actions .btn{min-height:40px;min-width:40px;justify-content:center}
.doc-section-actions{border-top:1px dashed var(--line);padding-top:10px;margin-top:12px}
.doc-add{padding:14px}
.doc-preview{min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:14px;background:var(--surface-2,#e9ecef);padding:12px}
.doc-pageinfo{margin:0 0 10px;color:var(--muted);font-size:13px;text-align:center}
.doc-pages{display:grid;gap:16px;justify-items:center}
.doc-page{width:100%;max-width:760px;background:#fff;box-shadow:0 1px 3px #0000002e,0 8px 24px #0000001f;border-radius:2px;color-scheme:light}
.doc-page.is-landscape{max-width:980px}
.doc-page svg{display:block;width:100%;height:auto}
/* The flow controller owns disclosure; pointer identity and viewport breakpoints do not override it. */
.doc[data-flow-mobile=true] .doc-layout{grid-template-columns:minmax(0,1fr)}
.doc[data-flow-mobile=true]:not([data-view="preview"]) .doc-preview{display:none}
.doc[data-flow-mobile=true][data-view="preview"] .doc-editor{display:none}
.doc[data-flow-mobile=true] .doc-status{flex-basis:100%;order:3}
@media (max-width:520px){.doc-fields{grid-template-columns:minmax(0,1fr)}.doc-group{padding:0 10px}.doc-item{padding:10px}.doc-preview{padding:8px}}
.doc-starter+.doc-fields{margin-top:12px}
@media (max-width:520px){.doc-more>summary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.doc-more>summary{padding-inline:10px}.doc-menu{left:auto;right:0}}

 .doc[data-flow-mobile=true] .doc-switch{display:none}
 .doc[data-flow-mobile=true] .doc-bar{flex:none;gap:4px;justify-content:flex-end}
 .doc[data-flow-mobile=true] .doc-status:not(.is-error){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .doc[data-flow-mobile=true] .doc-layout{min-height:140px}
 .doc[data-flow-mobile=true] .doc-editor{overscroll-behavior:auto}
 .ui-keyboard-on .doc[data-flow-mobile=true] .doc-group{padding-inline:8px}
 .ui-keyboard-on .doc[data-flow-mobile=true] .doc-group>summary{min-height:36px}
 .ui-keyboard-on .doc[data-flow-mobile=true] .doc-group[open]>summary{margin-bottom:6px}
 .ui-keyboard-on .doc[data-flow-mobile=true] .doc-field textarea{max-height:clamp(140px,calc(var(--app-viewport,100dvh)*.32),280px)}

@media(pointer:coarse){.doc-swatch{width:44px;height:44px}.doc-actions .btn{min-width:44px;min-height:44px}}

 .workspace-shell:has(>.doc[data-flow-mobile=true]){height:auto;min-height:var(--workspace-height,80dvh)}
 .doc[data-flow-mobile=true]{height:auto}
 .doc[data-flow-mobile=true] .doc-editor,.doc[data-flow-mobile=true] .doc-preview{overflow:visible;overscroll-behavior:auto}