caracms 0.0.0-stage → 0.2.0

package/src/editor/styles/levels/collections.css

@@ -0,0 +1,99 @@
+/* ══ A flat collection as a table over the stage (pre-M7 polish; collections/CollectionTable.tsx) ══
+   In the editor's own language: the sidebar's rows (wash on hover, the open one a wash with a ring,
+   no side rails), its find box and inputs, its chips; light, over the stage, full width. */
+.stage-table{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;min-height:0;background:var(--surface);color:var(--text)}
+.stage.is-table .stage-table{display:flex;animation:fade-in var(--dur-base) var(--ease-out)}
+.stage.is-table .frame{visibility:hidden}
+.ctable{display:flex;flex-direction:column;flex:1;min-height:0}
+.ct-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6) var(--space-3);border-bottom:1px solid var(--border)}
+.ct-head>.ct-title{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}
+.ct-head>.ct-title>.i{align-self:center;color:var(--icon)}
+.ct-head>.ct-title h2{margin:0;font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);white-space:nowrap}
+.ct-head>.ct-title .n-chip{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-subtle);white-space:nowrap}
+.ct-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs);color:var(--text-subtle)}
+.ct-tools{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
+.ct-tools .find{width:240px;margin:0}
+.ct-filter{width:auto;max-width:200px;height:var(--control-h-sm);padding-top:0;padding-bottom:0;font-size:var(--text-sm)}
+.ct-filter.is-set{border-color:var(--select);background-color:var(--select-wash)}
+.ct-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--space-2) var(--space-4) var(--space-6);scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent}
+.ct{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--text-base);font-variant-numeric:tabular-nums}
+.ct thead th{position:sticky;top:calc(-1 * var(--space-2));z-index:1;padding:0;background:var(--surface);border-bottom:1px solid var(--border);text-align:left;font-weight:var(--weight-medium)}
+.ct-sort{display:inline-flex;align-items:center;gap:var(--space-1);height:32px;padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);background:none;color:var(--text-subtle);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;white-space:nowrap}
+.ct-sort:hover{color:var(--text)}
+.ct-sort .i{opacity:0;transition:opacity var(--dur-fast)}
+.ct-sort:hover .i,.ct-sort.on .i{opacity:1}
+.ct-sort.on{color:var(--text)}
+.ct tbody tr{cursor:pointer}
+.ct tbody th,.ct tbody td{height:var(--row-h);padding:var(--space-1-5) var(--space-2);border-bottom:1px solid var(--border);text-align:left;font-weight:var(--weight-regular);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
+.ct tbody th:first-child,.ct tbody td:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}
+.ct tbody th:last-child,.ct tbody td:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}
+.ct tbody tr:hover>*{background:var(--surface-hover)}
+.ct tbody tr.is-current>*{background:var(--select-wash);color:var(--select-strong);border-bottom-color:transparent;box-shadow:inset 0 1px 0 var(--select),inset 0 -1px 0 var(--select)}
+.ct tbody tr.is-current>:first-child{box-shadow:inset 1px 0 0 var(--select),inset 0 1px 0 var(--select),inset 0 -1px 0 var(--select)}
+.ct tbody tr.is-current>:last-child{box-shadow:inset -1px 0 0 var(--select),inset 0 1px 0 var(--select),inset 0 -1px 0 var(--select)}
+.ct-title-cell{max-width:none!important;width:34%}
+.ct-title-cell>*{vertical-align:middle}
+.ct-open{display:inline;max-width:100%;padding:0;border:0;background:none;color:var(--text);font-weight:var(--weight-medium);text-align:left;overflow:hidden;text-overflow:ellipsis}
+.ct-open:focus-visible{outline:2px solid var(--select);outline-offset:2px;border-radius:var(--radius-xs)}
+.ct-title-cell .meta{display:inline-flex;align-items:center;gap:var(--space-1);margin-left:var(--space-1-5)}
+.ct-title-cell .meta:empty{display:none}
+.ct-extra{margin-left:var(--space-2);font-size:var(--text-xs);color:var(--text-subtle)}
+.ct tr.is-warned .ct-open{color:var(--text-muted)}
+.ct tr.is-current .ct-open{color:var(--select-strong);font-weight:var(--weight-semibold)}
+.ct-address{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
+.ct-edited{color:var(--text-muted)}
+.ct-number{text-align:right!important}
+.ct-toggle .i{color:var(--select)}
+.ct-nil{color:var(--border-hover)}
+.ct-none{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-2)}
+.ct-empty{margin:var(--space-8) auto;max-width:360px}
+@container app (max-width:1100px){.ct-tools .find{width:180px}.ct-sub{display:none}}
+
+/* ══ M6c (G5) · the List / Grid switch: the editor's mini segmented control, at the end of the tools row ══ */
+.ct-view{margin:0 0 0 auto;flex:none}
+.ct-view button{flex:none;padding:0 var(--space-2-5)}
+/* In Grid there are no column headers to sort by, so the order is a select beside the filters (the same view's sort) */
+.ct-order{max-width:240px}
+
+/* ══ M6c (G5) · the grid (collections/CollectionGrid.tsx): cards, as many as the stage fits. A card is the sidebar's
+   row grown up: a wash on hover, the open one a wash with a full ring (never a side rail) ══ */
+.cgrid{--card-ratio:4/3;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));gap:var(--card-gap-y) var(--card-gap-x);padding:var(--space-2) 0 0}
+.card{position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-width:0;padding:var(--card-pad) var(--card-pad) var(--space-2);border:1px solid transparent;border-radius:var(--radius-lg);background:none;color:var(--text);text-align:left;font:inherit;cursor:pointer;transition:background var(--dur-fast),border-color var(--dur-fast)}
+.card:hover{background:var(--surface-hover)}
+.card:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
+.card.is-current{background:var(--select-wash);border-color:var(--select)}
+.card-pic{position:relative;display:block}
+.card .ph{display:block;width:100%;aspect-ratio:var(--card-ratio);border-radius:var(--radius-md);background:var(--card-loading-bg)}
+/* A hairline inside every picture, so a pale one still has an edge */
+.card .ph::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 9%,transparent);pointer-events:none}
+/* The picture lands already cropped (cards.ts); it fades in once it has loaded, and is simply there when it already had */
+.card-img{opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
+.card-img.in{opacity:1}
+.card-img.now{transition:none}
+.card-txt{display:flex;flex-direction:column;gap:1px;min-width:0;padding:0 var(--space-0-5)}
+.card-t{display:flex;align-items:center;gap:var(--space-1-5);min-width:0;font-size:var(--text-base);font-weight:var(--weight-medium);line-height:1.35}
+.card-t .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.card-t .meta{display:inline-flex;align-items:center;gap:var(--space-1);flex:none}
+.card-t .meta:empty{display:none}
+.card.is-current .card-t{color:var(--select-strong);font-weight:var(--weight-semibold)}
+.card.is-warned .card-t .nm{color:var(--text-muted)}
+.card-cs{display:flex;flex-direction:column;gap:1px;min-width:0}
+.card-c{font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
+.card-c.mono{font-family:var(--font-mono);font-size:var(--text-2xs)}
+.card.is-current .card-c{color:color-mix(in srgb,var(--select-strong) 70%,var(--text-subtle))}
+/* Someone's lock, said on the picture's top right (clear of a text card's title and a clip's badge): the lock chip,
+   raised so it reads on any picture */
+.card-lock{position:absolute;right:var(--space-1-5);top:var(--space-1-5);z-index:3;display:inline-flex;align-items:center;gap:var(--space-1);height:22px;padding:0 var(--space-2) 0 2px;box-shadow:inset 0 0 0 1px var(--status-locked-border),var(--shadow-raised)}
+/* A clip's poster: the library's duration badge, with a play mark */
+.card .pbadge{right:var(--space-1-5);bottom:var(--space-1-5);z-index:3;height:18px;padding:0 5px 0 4px}
+.card .pbadge .i{width:9px;height:9px;fill:currentColor;stroke:none}
+/* The text card: no image, so the title is set in the picture's place, on paper, like a plain book cover.
+   It's never empty-looking: a type size of its own, the collection's icon, and the same hairline as a picture */
+.card .ph.tcard{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-2);padding:var(--space-3);background:var(--card-text-bg);container-type:normal}
+.tcard>.i{color:var(--icon);opacity:.8}
+.tcard .tc-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:1.18;color:var(--text);text-wrap:balance}
+.card.is-current .tcard{background:color-mix(in srgb,var(--select) 9%,var(--surface))}
+/* Posts and tags (Decision 13): a reference that's gone, and a list of references' header, which doesn't sort. */
+.ct-missing{color:var(--status-warning-strong);font-weight:var(--weight-medium)}
+.ct-label{cursor:default}
+.ct-label:hover{color:var(--text-subtle)}

package/src/editor/styles/levels/document-level.css

@@ -0,0 +1,10 @@
+/* The document level: the block list, the add-block picker, the empty page (Phase 4), beyond ../editor.css.
+   Tokens only (M2 Decision 7); no side rails (M2 Decision 10). */
+
+.ptype:focus-visible{border-color:var(--select)}
+
+/* An unknown block's "What's kept" (Decision 21): each top-level key with a short preview. */
+.panel .kept{display:grid;gap:var(--space-1);margin:var(--space-2) 0 0;font-size:var(--text-sm)}
+.panel .kept>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--space-2)}
+.panel .kept dt{color:var(--text);font-weight:var(--weight-medium)}
+.panel .kept dd{margin:0;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

package/src/editor/styles/levels/documents.css

@@ -0,0 +1,9 @@
+/* The documents level and a collection's level (Phase 4), beyond the mockup's CSS in ../editor.css.
+   Tokens only (M2 Decision 7); no side rails (M2 Decision 10): a warned row is an icon, not a stripe. */
+
+/* A file that can't be opened (Decisions 8–9): listed, muted, with its warning mark; clicking says why. */
+.drow.is-warned{cursor:default}
+.drow.is-warned .nm{color:var(--text-muted)}
+.drow.is-warned:hover{background:var(--surface-hover)}
+.doc-why{margin:var(--space-1) 0 var(--space-2)}
+.doc-why p{overflow-wrap:anywhere}

package/src/editor/styles/levels/fields.css

@@ -0,0 +1,171 @@
+/* M5a's fields (Phase 4): rich text, link, buttons, toggle, number, date, list and reference, in the field
+   frame. Lifted as is from the mockup's revision (notes/mockups/m2-editor.html, its M5a field CSS), then the
+   few rules the real components need beyond it, at the end. Tokens only (M2 Decision 7); no side rails
+   (M2 Decision 10): a warned row or link is a wash and a full border. The date is the browser's own input
+   (M5a Decision 2), so the mockup's calendar isn't here. */
+
+/* Rich text, the one `richText` field (M5a): paragraphs, bold, italic, links, lists, line breaks; H2/H3 only when
+   the block's author switched headings on. Never an H1, no slash menu. Enter: new paragraph (in a list, a new item);
+   Shift+Enter: a line break inside the paragraph, heading or item. */
+.prose-wrap{position:relative;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
+.prose-wrap:focus-within{border-color:var(--select);box-shadow:0 0 0 3px var(--select-halo)}
+.tb{position:relative;display:flex;align-items:center;gap:2px;padding:3px;border-bottom:1px solid var(--border)}
+.tb>button{display:inline-grid;place-items:center;width:26px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text-muted);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
+.tb>button:hover:not(:disabled){background:var(--surface-hover);color:var(--text)}
+.tb>button[aria-pressed="true"],.tb>button[aria-expanded="true"]{background:var(--surface-pressed);color:var(--text)}
+.tb>.tb-style{display:inline-flex;gap:var(--space-1);width:auto;padding:0 var(--space-1-5) 0 var(--space-2);color:var(--text);font-weight:var(--weight-medium)}
+.tb .sep{width:1px;height:16px;margin:0 var(--space-1);background:var(--border)}
+.tb .menu{left:2px;top:calc(100% + 2px);min-width:180px}
+.tb .menu .st-p{font-size:var(--text-base)}
+.tb .menu .st-h2{font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
+.tb .menu .st-h3{font-size:var(--text-md);font-weight:var(--weight-semibold)}
+.tb .menu button[aria-checked="true"]{background:var(--select-wash);color:var(--select-strong)}
+.prose{min-height:70px;padding:8px 10px;outline:0;line-height:var(--leading-loose)}
+.prose p+p{margin-top:8px}
+.rt{min-height:120px}
+.rt>*+*{margin-top:var(--space-2)}
+.rt h2,.rt h3{margin:var(--space-3) 0 0;font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
+.rt>h2:first-child,.rt>h3:first-child{margin-top:0}
+.rt h2{font-size:var(--text-lg)}
+.rt h3{font-size:var(--text-md)}
+.rt ul,.rt ol{margin-bottom:0;padding-left:var(--space-5)}
+.rt li+li{margin-top:var(--space-0-5)}
+.rt a{color:var(--select-strong);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:2px}
+.rt .rt-sel{background:var(--select-halo);border-radius:2px;box-shadow:0 0 0 1px var(--select-halo)}
+.rt .is-caret{background:var(--surface-sunken);border-radius:var(--radius-xs);box-shadow:0 0 0 4px var(--surface-sunken)}
+/* Field messages that never block anything (amber), beside .field-err, which is for what does (red, Decision 12) */
+.field-warn{display:flex;align-items:flex-start;gap:var(--space-1-5);margin-top:var(--space-1-5);font-size:var(--text-sm);color:var(--status-warning);font-weight:var(--weight-medium)}
+.field-warn .i{margin-top:2px;color:var(--status-warning-dot)}
+.field-warn.quiet{font-weight:var(--weight-regular);color:var(--text-muted)}
+/* Repeatable list (M5a): repeatable groups of fields. A collapsed item shows a one-line summary; one opens at a time.
+   Add, remove (with Undo), reorder by drag and ⌥↑/⌥↓, as blocks are. No lists inside lists. */
+.items{display:flex;flex-direction:column;gap:var(--space-1)}
+.item{position:relative;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
+.item:hover{border-color:var(--border-hover)}
+.item.is-open{border-color:var(--border-strong);box-shadow:var(--shadow-control)}
+.item.is-warn{background:var(--status-warning-wash);border-color:var(--status-warning-border)}
+.item-h{display:flex;align-items:center;gap:var(--space-0-5);min-height:32px;padding:0 var(--space-0-5) 0 var(--space-1)}
+.item-h .grip{display:inline-flex;opacity:1}
+.item-sum{flex:1;min-width:0;display:flex;align-items:center;gap:var(--space-1-5);height:30px;padding:0 var(--space-1);border:0;border-radius:var(--radius-sm);background:none;text-align:left;font-size:var(--text-base);white-space:nowrap}
+.item-sum:focus-visible{outline-offset:-2px}
+.item-sum .s{min-width:0;overflow:hidden;text-overflow:ellipsis}
+.item-sum .s span{color:var(--text-muted)}
+.item-sum .s em{font-style:normal;color:var(--text-subtle)}
+.item-sum .wmark{flex:none}
+.item-sum>.i:last-child{margin-left:auto;color:var(--icon);transition:rotate var(--dur-fast) var(--ease-out)}
+.item.is-open .item-sum>.i:last-child{rotate:90deg}
+.item .ib{width:26px;height:26px}
+/* An open row's fields take its full width, the same inset each side: no indent under the drag handle, as its image never had one */
+.item-b{padding:0 var(--space-2-5) var(--space-2-5)}
+.item-b .sub-label:first-child{margin-top:var(--space-0-5)}
+.item .menu{right:2px;top:30px}
+.list-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-2)}
+.list-empty{padding:var(--space-2-5) var(--space-3);border:1px dashed var(--border-strong);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-muted)}
+/* M7: a list inside a list, one level (Decisions 14–15). The inner list sits inside its open outer row, on a sunken wash
+   with its own label, count, Add and drag hint. Its rows are the same rows. Nesting reads from the inset and the wash,
+   never a side rail. */
+.sublist{margin-top:var(--space-2-5);padding:var(--space-2) var(--space-2) var(--space-1-5);border-radius:var(--radius-md);background:var(--surface-sunken)}
+.sublist-h{display:flex;align-items:baseline;gap:var(--space-2);margin:0 var(--space-0-5) var(--space-1-5)}
+.sublist-h .sub-label{margin:0}
+.sublist-h .field-meta{margin-left:auto}
+.sublist>.field-help{margin:0 var(--space-0-5) var(--space-1-5)}
+.sublist .list-foot{margin-top:var(--space-1-5);padding:0 var(--space-0-5)}
+.sublist .list-empty{background:var(--surface);padding:var(--space-2) var(--space-2-5)}
+/* Reference (M5a): picks a document from another collection. A list of them reorders like any list. */
+.refs{display:flex;flex-direction:column;gap:var(--space-1)}
+.ref{position:relative;display:flex;align-items:center;gap:var(--space-2);min-height:42px;padding:var(--space-1) var(--space-0-5) var(--space-1) var(--space-1);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
+.ref:hover{border-color:var(--border-hover)}
+.ref .grip{display:inline-flex;opacity:1}
+.ref>.i{color:var(--icon)}
+.ref .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
+.ref .t b{font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ref .t small{font:var(--text-xs)/1.35 var(--font-mono);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.ref .yr{font-size:var(--text-xs);color:var(--text-subtle);font-variant-numeric:tabular-nums}
+.ref .ib{width:26px;height:26px}
+.ref.is-missing{background:var(--status-warning-wash);border-color:var(--status-warning-border)}
+.ref.is-missing>.i{color:var(--status-warning-dot)}
+.ref.is-missing .t b{color:var(--status-warning-strong)}
+.ref.is-missing .t small{color:var(--status-warning)}
+/* Pickers that drop from a field: documents for a link or a reference */
+.lpop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:6;padding:var(--space-1);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);animation:pop-in var(--dur-base) var(--ease-out)}
+.lpop .find{margin:0 0 var(--space-1)}
+.lpop .find .input{min-height:30px}
+.lpop .sw-h{padding:var(--space-1-5) var(--space-2) var(--space-1)}
+.lpop .drow{min-height:32px}
+.lpop .drow .meta .mono{font-size:var(--text-2xs)}
+.lpop .drow.is-active{background:var(--surface-hover)}
+.lpop .drow:disabled{cursor:default;background:none;color:var(--text-subtle)}
+.lpop .drow:disabled .i{color:var(--border-hover)}
+.lpop-foot{margin-top:var(--space-1);padding:var(--space-2) var(--space-2) var(--space-1);border-top:1px solid var(--border);font-size:var(--text-xs);color:var(--text-subtle);line-height:1.5}
+/* Link (M5a): a label and where it goes — a document picked from the site, or a typed /path, https://, mailto:, tel: or #anchor */
+.lnk{position:relative}
+.lnk-box{display:flex;align-items:center;gap:var(--space-1-5);min-height:var(--control-h);padding:0 var(--space-0-5) 0 var(--space-2-5);border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
+.lnk-box:hover{border-color:var(--border-hover)}
+.lnk-box:focus-within{border-color:var(--select);box-shadow:0 0 0 3px var(--select-halo)}
+.lnk-box>.i,.lnk-glyph{flex:none;color:var(--icon)}
+.lnk-glyph{width:16px;text-align:center;font:var(--weight-semibold) var(--text-sm)/1 var(--font-mono)}
+.lnk-box input{flex:1;min-width:0;height:30px;padding:0;border:0;outline:0;background:none}
+.lnk-box input::placeholder{color:var(--text-subtle)}
+.lnk-box .ib{width:26px;height:26px}
+.lnk-doc{flex:1;min-width:0;display:flex;align-items:baseline;gap:var(--space-1-5);white-space:nowrap;overflow:hidden}
+.lnk-doc b{font-weight:var(--weight-medium)}
+.lnk-doc .mono{font-size:var(--text-xs);color:var(--text-subtle);overflow:hidden;text-overflow:ellipsis}
+.lnk.is-missing .lnk-box{background:var(--status-warning-wash);border-color:var(--status-warning-border)}
+.lnk.is-missing .lnk-box>.i{color:var(--status-warning-dot)}
+.lnk.is-missing .lnk-doc b{color:var(--status-warning-strong)}
+.lnk.is-missing .lnk-doc span{color:var(--status-warning)}
+.lnk.is-bad .lnk-box{border-color:var(--status-warning-dot)}
+/* Buttons (M5a): up to two, each a label, a link and one of the site's styles */
+.btnf{padding:var(--space-2) var(--space-2-5) var(--space-2-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-sunken)}
+.btnf+.btnf{margin-top:var(--space-1-5)}
+.btnf.is-half{border-color:var(--status-warning-border)}
+.btnf-h{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-1-5)}
+.btnf-h .t{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted)}
+.btnf-h .ib{width:24px;height:24px;margin-left:auto}
+.btnf .mini-seg{margin:0 0 var(--space-1-5)}
+.btnf .mini-seg button{height:24px;padding:0 var(--space-2);font-size:var(--text-xs);white-space:nowrap}
+.btnf>.input{margin-bottom:var(--space-1-5)}
+/* Number: an optional min and max */
+.numf{display:flex;align-items:center;gap:var(--space-2)}
+.numf .input{width:96px}
+.numf .rng{font-size:var(--text-xs);color:var(--text-subtle)}
+.numf .input[aria-invalid="true"]{border-color:var(--status-warning-dot);box-shadow:0 0 0 3px var(--status-warning-wash)}
+.datef{position:relative}
+.datef .lnk-box{padding-left:var(--space-2-5)}
+
+/* ── Beyond the mockup ── */
+/* Tiptap mounts the editable element itself inside this wrapper; ProseMirror needs whitespace kept. */
+.rt-mount{display:block}
+.prose.rt{white-space:pre-wrap;word-wrap:break-word;font-variant-ligatures:none}
+.prose.rt[contenteditable="false"]{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
+.tb-i{font-family:Georgia,serif}
+.tb>button:disabled{opacity:.5;cursor:not-allowed}
+.lpop .field-warn{margin:var(--space-1) var(--space-2) var(--space-1-5)}
+/* The date: typed in the link box, or picked from the mockup's calendar (react-day-picker's table, drawn as .cal's grid) */
+.datef .lnk-box:has(input[aria-invalid="true"]){border-color:var(--status-warning-dot);box-shadow:0 0 0 3px var(--status-warning-wash)}
+.cal{position:absolute;left:0;top:calc(100% + 4px);z-index:6;width:252px;padding:var(--space-3);background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);animation:pop-in var(--dur-base) var(--ease-out)}
+.cal-m{display:grid;grid-template-columns:auto 1fr auto;align-items:center;row-gap:var(--space-1)}
+.cal-cap{text-align:center;font-weight:var(--weight-semibold)}
+.cal .cal-nav{width:26px;height:26px}
+.cal-nav[aria-disabled="true"]{color:var(--border-hover);cursor:not-allowed;background:none}
+.cal-g{grid-column:1 / -1;width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed;margin:-2px 0}
+.cal-g .wd{padding:var(--space-1) 0;font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-subtle)}
+.cal-d{padding:0;text-align:center}
+.cal-db{width:100%;height:30px;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;transition:background var(--dur-fast)}
+.cal-db:hover{background:var(--surface-hover)}
+.cal-db:focus-visible{outline:2px solid var(--select);outline-offset:1px}
+.cal-d.out .cal-db{color:var(--text-subtle)}
+.cal-d.is-today .cal-db{box-shadow:inset 0 0 0 1px var(--border-hover)}
+.cal-d.is-sel .cal-db{background:var(--select);color:var(--on-fill);font-weight:var(--weight-semibold);box-shadow:none}
+.cal-f{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-2);padding-top:var(--space-2);border-top:1px solid var(--border)}
+/* Reordering list rows and references: the block list's ghost and full-width drop line */
+.item,.refs>[data-row]{position:relative}
+.refs>[data-row]{border-radius:var(--radius-md)}
+.refs>[data-row]:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
+.item.is-ghost,.refs>.ref.is-ghost{background:none;border:1px dashed var(--border-strong);box-shadow:none}
+.item.is-ghost>*,.refs>.ref.is-ghost>*{visibility:hidden}
+.item.drop-before::before,.item.drop-after::after,.refs>.drop-before::before,.refs>.drop-after::after{content:"";position:absolute;left:6px;right:6px;height:2px;border-radius:2px;background:var(--select);box-shadow:0 0 0 2px var(--surface)}
+.item.drop-before::before,.refs>.drop-before::before{top:-4px}
+.item.drop-after::after,.refs>.drop-after::after{bottom:-4px}
+/* M6c (G8): a block's help, at the top of its level (a field's sits under its label, .field-help) */
+.field-help.block-help{margin:0 0 var(--space-4)}

package/src/editor/styles/levels/files.css

@@ -0,0 +1,95 @@
+/* M6c G4: files in the library and in links (notes/mockups/m6c-downloads-grid.html → #library-files,
+   #file, #link-pdf, #link-docx, #rt-link-file, #link-missing, #replace…). No side rails: the file in this
+   link is a wash with a full ring, as every picked row. */
+:root {
+	--ftype-w: 28px;
+	--ftype-h: 34px;
+	--ftype-fold: 8px;
+	--file-row-h: 48px;
+}
+
+/* The type tile: a page with its corner folded and three ruled lines. Neutral for every type (red, green and blue
+   are status colours here); the type's label is text beside it. The large tile carries the label itself. */
+.ftype{position:relative;display:grid;place-items:end center;width:var(--ftype-w);height:var(--ftype-h);flex:none;padding-bottom:5px;border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface);color:var(--text-muted);font:var(--weight-semibold) 8.5px/1 var(--font-mono);letter-spacing:.02em;clip-path:polygon(0 0,calc(100% - var(--ftype-fold)) 0,100% var(--ftype-fold),100% 100%,0 100%)}
+.ftype:not(.lg){background:linear-gradient(var(--border-strong),var(--border-strong)) 6px 11px/calc(100% - 12px) 1px no-repeat,linear-gradient(var(--border-strong),var(--border-strong)) 6px 15px/calc(100% - 12px) 1px no-repeat,linear-gradient(var(--border-strong),var(--border-strong)) 6px 19px/calc(100% - 16px) 1px no-repeat,var(--surface)}
+.ftype.sm{background:linear-gradient(var(--border-strong),var(--border-strong)) 4px 8px/calc(100% - 8px) 1px no-repeat,linear-gradient(var(--border-strong),var(--border-strong)) 4px 11px/calc(100% - 8px) 1px no-repeat,var(--surface)}
+.ftype::before{content:"";position:absolute;right:-1px;top:-1px;width:var(--ftype-fold);height:var(--ftype-fold);background:var(--surface-pressed);border-bottom-left-radius:2px;box-shadow:-1px 1px 0 var(--border-strong)}
+.ftype.sm{--ftype-w:18px;--ftype-h:22px;--ftype-fold:6px;padding-bottom:3px;font-size:6.5px}
+.ftype.lg{--ftype-w:104px;--ftype-h:130px;--ftype-fold:24px;padding-bottom:18px;font:var(--weight-semibold) var(--text-md)/1 var(--font-ui);letter-spacing:0;border-radius:var(--radius-sm)}
+
+/* A file row: the tile, the name, then type · size · date · use */
+.flist{display:flex;flex-direction:column;gap:2px}
+.frow{display:flex;align-items:center;gap:var(--space-2-5);width:100%;min-height:var(--file-row-h);padding:var(--space-1-5) var(--space-2);border:1px solid transparent;border-radius:var(--radius-md);background:none;color:var(--text);text-align:left;font:inherit;transition:background var(--dur-fast)}
+button.frow{cursor:pointer}
+.frow:hover{background:var(--surface-hover)}
+div.frow{cursor:default}
+div.frow:hover{background:none}
+.frow.is-current{background:var(--select-wash);border-color:var(--select)}
+.frow.is-current .ft b{color:var(--select-strong)}
+.frow .ft{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.35}
+.frow .ft b{font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.frow .ft small{font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
+.frow .ft small .ty{color:var(--text-muted);font-weight:var(--weight-semibold)}
+.frow .ft small .new{color:var(--status-live);font-weight:var(--weight-semibold)}
+.frow .ft .mbar{position:relative;inset:auto;margin-top:5px}
+.frow .pcheck{position:static;display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:var(--select);color:var(--on-fill)}
+.frow.mfailed .ft small{color:var(--status-danger);white-space:normal}
+
+/* A file's own level */
+.kv .addr{display:flex;align-items:flex-start;gap:var(--space-1)}
+.kv .addr .ib{width:22px;height:22px;margin-top:-3px;flex:none}
+.uses .drow .meta{max-width:52%;overflow:hidden;text-overflow:ellipsis}
+.file-acts{display:flex;gap:var(--space-2);margin-top:var(--space-4)}
+.stage-lb .ftype{margin-bottom:var(--space-3);border-color:var(--bar-border-hover)}
+.stage-lb h2{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--bar-text);overflow-wrap:anywhere;text-align:center}
+.stage-lb .fine{color:var(--bar-muted);font-size:var(--text-xs)}
+.stage-lb .btn{margin-top:var(--space-3);background:var(--bar-control);border-color:var(--bar-control);color:var(--bar-control-text)}
+
+/* A file in a link: what was picked, then how it opens. A PDF gets the toggle; anything else says it downloads */
+.lnk-row{display:flex;gap:var(--space-1-5);align-items:flex-start}
+.lnk-row>.lnk{flex:1;min-width:0}
+.lnk-file{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0;padding:var(--space-1-5) 0}
+.lnk-doc.two{flex-direction:column;align-items:flex-start;gap:0;line-height:1.35;padding:var(--space-1) 0}
+.lnk-doc.two b{max-width:100%;overflow:hidden;text-overflow:ellipsis}
+.opens{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2)}
+.opens .lbl{flex:none;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--text-muted)}
+.opens .mini-seg{flex:1;margin:0}
+.opens .mini-seg .i{width:13px;height:13px}
+.dl-note{display:flex;align-items:center;gap:var(--space-1-5);margin-top:var(--space-2);padding:var(--space-1-5) var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--text-xs);color:var(--text-muted)}
+.dl-note .i{color:var(--icon);flex:none}
+.dl-note b{color:var(--text);font-weight:var(--weight-semibold)}
+
+/* Rich text's popover with a file picked */
+.lpop .top{display:flex;gap:var(--space-1);margin-bottom:var(--space-1)}
+.lpop .top .find{flex:1;margin:0}
+.lpop .picked{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-1) var(--space-1-5) var(--space-2);border-radius:var(--radius-md);background:var(--surface-sunken)}
+.lpop .picked .ft{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
+.lpop .picked b{font-weight:var(--weight-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.lpop .picked small{font-size:var(--text-xs);color:var(--text-subtle)}
+.lpop .opens{padding:0 var(--space-1)}
+.lpop .picked + .opens + .lpop-foot,.lpop .picked + .lpop-foot{margin-top:var(--space-2)}
+
+/* Replace: the old file → the new one, then what it changes */
+.swap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-1);margin-top:var(--space-4)}
+.swap .frow{min-height:44px;border-color:var(--border);background:var(--surface)}
+.swap .frow.old .ft b{color:var(--text-muted)}
+.swap .frow.new{border-color:var(--border-strong)}
+.swap .arrow{display:flex;align-items:center;gap:var(--space-1-5);padding:0 var(--space-3);font-size:var(--text-xs);color:var(--text-subtle)}
+.swap .mdrop{cursor:pointer;font:inherit;font-size:var(--text-sm)}
+.swap .mdrop:hover,.swap .mdrop.is-over{border-color:var(--border-hover)}
+.affects{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-sunken)}
+.affects>b{display:block;font-weight:var(--weight-semibold)}
+.affects>p{margin-top:2px;font-size:var(--text-sm);color:var(--text-muted)}
+.affects ul{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
+.affects li{display:flex;align-items:center;gap:var(--space-2);min-height:28px;padding:0 var(--space-2);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-sm)}
+.affects li .i{color:var(--icon)}
+.affects li .nm{font-weight:var(--weight-medium)}
+.affects li .meta{margin-left:auto;font-size:var(--text-xs);color:var(--text-subtle);white-space:nowrap}
+.affects li .dot{width:7px;height:7px;flex:none;border-radius:50%;background:var(--status-waiting)}
+.keeps{display:flex;gap:var(--space-2);margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}
+.keeps .i{margin-top:2px;color:var(--icon);flex:none}
+
+/* Three tabs (Images, Clips, Files) leave the sidebar too narrow for Show unused beside them: it goes under, whole */
+.lib-bar{flex-wrap:wrap;row-gap:var(--space-2)}
+.lib-bar>.switch{white-space:nowrap}
+a.btn{text-decoration:none}

package/src/editor/styles/levels/live.css

@@ -0,0 +1,10 @@
+/*
+ * Live mode's pieces (M4 Phase 4) beyond the mockup's CSS (all in ../editor.css):
+ * a mark's wrapper that lays out as its children, and the read-only fields' fieldset,
+ * which disables every control in it and takes no room of its own. Tokens only.
+ */
+.mk{display:contents}
+fieldset.ro-fields{display:contents;margin:0;padding:0;border:0;min-width:0}
+.note .acts .why{flex-basis:100%;margin:0;font-size:var(--text-xs);color:var(--text-subtle)}
+/* Failed with no Railway token (a state M4 adds): Publish is off, so it takes the off ink, not the failure's red (1.9:1 on the off fill). */
+.pub.fail .pb.off{color:var(--bar-off-text)}

package/src/editor/styles/levels/m5a-documents.css

@@ -0,0 +1,51 @@
+/* M5a Phase 5's screens, lifted as is from the mockup (notes/mockups/m2-editor.html): the
+   shared-block panel's list, New shared block's type grid, the in-use dialog's list, Site
+   Settings' form, and the stage's dimmed aside while a document with no page of its own
+   (Site Settings) is open. Tokens only (M2 Decision 7). */
+.used{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2)}
+.used-in{margin-top:2px}
+.used-in .linkbtn{color:var(--select-strong)}
+/* A block type picked in a dialog (New shared block) */
+.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1-5)}
+.ptype.sm{flex-direction:row;align-items:center;gap:var(--space-2);padding:var(--space-1-5) var(--space-2)}
+.ptype.sm .i{color:var(--icon)}
+.ptype[aria-checked="true"]{border-color:var(--select);background:var(--select-wash)}
+.ptype[aria-checked="true"] b,.ptype[aria-checked="true"] .i{color:var(--select-strong)}
+.dlg-list{display:flex;flex-direction:column;gap:2px;margin-top:var(--space-3);padding:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-md)}
+/* Site Settings (M5a): a fixed form with no page of its own */
+.set-sec{margin:0 calc(-1 * var(--space-4));padding:var(--space-4) var(--space-4) var(--space-1);border-top:1px solid var(--border)}
+.set-sec:first-child{padding-top:var(--space-1);border-top:0}
+.set-sec h3{margin:0 0 var(--space-1);font-size:var(--text-md);font-weight:var(--weight-semibold)}
+.set-sec .lead{margin-bottom:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}
+.eds{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
+.ed{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-1-5) var(--space-1) var(--space-1-5) var(--space-2)}
+.ed+.ed{border-top:1px solid var(--border)}
+.ed .tile{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--icon);font:var(--weight-semibold) var(--text-sm)/1 var(--font-mono)}
+.ed .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
+.ed .t b{font:var(--weight-medium) var(--text-sm)/1.35 var(--font-mono);overflow-wrap:anywhere}
+.ed .t small{font-size:var(--text-xs);color:var(--text-subtle)}
+.ed .ib{width:26px;height:26px}
+.ed.is-confirm{background:var(--status-warning-wash)}
+.ed-q{flex-basis:100%;padding:0 var(--space-1) var(--space-1) 32px;font-size:var(--text-sm);color:var(--status-warning-strong)}
+.ed-q .acts{display:flex;flex-wrap:wrap;gap:var(--space-1-5);margin-top:var(--space-2)}
+.ed-add{display:flex;gap:var(--space-1-5);margin-top:var(--space-2)}
+.ed-add .input{flex:1;min-width:0}
+.ed-add .input[aria-invalid="true"]{border-color:var(--status-danger);box-shadow:0 0 0 3px var(--status-danger-halo)}
+.fixed-line{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--text-sm);color:var(--text-muted)}
+.fixed-line .i{margin-top:2px;color:var(--icon)}
+.swatch-in{display:flex;align-items:center;gap:var(--space-2)}
+.swatch-in .input{width:120px;font-family:var(--font-mono);text-transform:uppercase}
+.swatch{position:relative;width:var(--control-h);height:var(--control-h);flex:none;border:1px solid var(--accent-edge);border-radius:var(--radius-md);background:var(--accent);box-shadow:inset 0 0 0 2px var(--surface)}
+.swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
+.swatch:focus-within{outline:2px solid var(--focus);outline-offset:2px}
+.accent-try{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-md);background:var(--bar-bg);color:var(--bar-muted);font-size:var(--text-xs)}
+.accent-try .pub{pointer-events:none;margin-left:auto}
+/* A document with no page of its own (Site Settings): the last page stays, dimmed, with a way back (M5a) */
+.stage-aside{position:absolute;inset:0;z-index:3;display:none;place-items:center;padding:var(--space-6);background:var(--stage-dim);color:var(--bar-text);text-align:center}
+.stage.is-aside .stage-aside{display:grid;animation:fade-in var(--dur-base) var(--ease-out)}
+.stage-aside .in{max-width:340px}
+.stage-aside .in>.i{width:22px;height:22px;margin-bottom:var(--space-3);color:var(--bar-muted)}
+.stage-aside h2{margin:0 0 var(--space-1-5);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight)}
+.stage-aside p{color:var(--bar-muted);font-size:var(--text-sm)}
+.stage-aside .btn{margin-top:var(--space-4);background:var(--bar-control);border-color:var(--bar-control);color:var(--bar-control-text)}
+.stage-aside :focus-visible{outline-color:var(--focus-on-dark)}

package/src/editor/styles/levels/m6.css

@@ -0,0 +1,82 @@
+/* M6: the inbox (Site-wide → Submissions, a submission on a sheet over the dimmed page), Search and sharing, and
+   Site Settings' publish-time fields (notes/mockups/m2-editor.html, lifted from its M6 CSS as is). */
+/* ── M6: Submissions. A level of its own under Site-wide; a submission opens in the stage, on a sheet over the dimmed
+   page. Unread is a dot and a heavier name; the open one is the selection's wash and ring. Never a side rail. ── */
+.drow .ucnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--select-wash);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--select) 40%,transparent);color:var(--select-strong);font-size:var(--text-2xs);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
+.srows{display:flex;flex-direction:column;gap:2px;margin:0 calc(-1 * var(--space-1))}
+.srow{display:grid;grid-template-columns:8px minmax(0,1fr);gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-1-5);border:1px solid transparent;border-radius:var(--radius-md);background:none;color:var(--text);text-align:left;transition:background var(--dur-fast)}
+.srow:hover{background:var(--surface-hover)}
+.srow .ud{width:7px;height:7px;margin-top:6px;border-radius:50%}
+.srow.is-unread .ud{background:var(--unread)}
+.srow.is-current{background:var(--select-wash);border-color:var(--select)}
+.srow .l1{display:flex;align-items:baseline;gap:var(--space-2);min-width:0}
+.srow .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--weight-medium)}
+.srow.is-unread .who{font-weight:var(--weight-semibold)}
+.srow .tm{flex:none;font-size:var(--text-xs);color:var(--text-subtle);font-variant-numeric:tabular-nums}
+.srow.is-unread .tm{color:var(--select-strong);font-weight:var(--weight-medium)}
+.srow .sn{display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);color:var(--text-muted)}
+.srow .l3{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);margin-top:var(--space-1);font-size:var(--text-xs);color:var(--text-subtle)}
+.srow .l3 .i{width:12px;height:12px}
+.srow .l3 span{display:inline-flex;align-items:center;gap:3px}
+.srow .chip{height:18px;font-size:var(--text-2xs)}
+.subs-foot{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1-5);margin-top:var(--space-3)}
+.subs-foot .kb-hint{margin:0;text-align:center}
+.note.warn .mono,.note .mono{font-size:.95em}
+/* The sheet: a light page on the dimmed stage. It resets what .stage-aside sets for the dark */
+.stage-aside .sub-sheet{display:flex;flex-direction:column;width:min(var(--sub-sheet-w),100%);max-height:calc(100cqh - 2 * var(--space-6));overflow:hidden;border-radius:var(--radius-xl);background:var(--surface);color:var(--text);text-align:left;box-shadow:var(--shadow-frame);animation:pop-in var(--dur-base) var(--ease-out)}
+.stage-aside .sub-sheet :focus-visible{outline-color:var(--focus)}
+.stage-aside .sub-sheet p{color:inherit;font-size:inherit}
+.stage-aside .sub-sheet .btn{margin-top:0;background:var(--surface);border-color:var(--border-strong);color:var(--text)}
+.stage-aside .sub-sheet .btn:hover{background:var(--surface-hover);border-color:var(--border-hover)}
+.stage-aside .sub-sheet .btn.ink{background:var(--text);border-color:var(--text);color:var(--surface)}
+.stage-aside .sub-sheet .btn.ink:hover{background:var(--ink-hover);border-color:var(--ink-hover)}
+.stage-aside .sub-sheet .btn.quiet-danger{border-color:transparent;background:none;color:var(--status-danger)}
+.stage-aside .sub-sheet .btn.quiet-danger:hover{background:var(--status-danger-wash);border-color:var(--status-danger-border)}
+.sub-head{padding:var(--space-5) var(--space-6) var(--space-4);border-bottom:1px solid var(--border)}
+.sub-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5) var(--space-2);font-size:var(--text-sm);color:var(--text-muted)}
+.sub-meta .chip{height:20px}
+.stage-aside .sub-head h2{margin:var(--space-2) 0 0;font-size:var(--text-2xl);line-height:1.2;color:var(--text);overflow-wrap:anywhere}
+.sub-head .from{margin-top:2px;font:var(--text-sm)/1.4 var(--font-mono);color:var(--text-muted);overflow-wrap:anywhere}
+.sub-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-4)}
+.sub-acts .end{margin-left:auto}
+.sub-acts a.btn{text-decoration:none}
+.sub-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--space-4) var(--space-6) var(--space-6)}
+.sub-mail{display:flex;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
+.sub-mail .i{margin-top:1px}
+.sub-mail.sent .i{color:var(--status-live)}
+.sub-mail .mono{color:var(--text)}
+.sub-body .note{margin-bottom:var(--space-4)}
+.sub-body .note q{display:block;margin-top:var(--space-1-5);padding:var(--space-1-5) var(--space-2);border-radius:var(--radius-sm);background:var(--surface);font:var(--text-xs)/1.5 var(--font-mono);color:var(--status-danger-strong);quotes:none;overflow-wrap:anywhere}
+.sub-fields{display:grid;grid-template-columns:var(--sub-label-w) minmax(0,1fr);gap:var(--space-3) var(--space-4);margin:0}
+.sub-fields dt{padding-top:2px;font-size:var(--text-sm);color:var(--text-muted)}
+.sub-fields dd{margin:0;min-width:0;font-size:var(--text-md);line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
+.sub-fields dd.none{color:var(--text-subtle);font-size:var(--text-sm)}
+.sub-fields+.sub-fields{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}
+.sub-files{display:flex;flex-direction:column;gap:var(--space-1-5);white-space:normal}
+.frow{display:flex;align-items:center;gap:var(--space-2-5);min-height:44px;padding:var(--space-1-5) var(--space-2-5) var(--space-1-5) var(--space-1-5);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--text);text-decoration:none;transition:background var(--dur-fast),border-color var(--dur-fast)}
+.frow:hover{background:var(--surface-hover);border-color:var(--border-hover)}
+.frow .ext{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:var(--radius-sm);background:var(--surface-sunken);font:var(--weight-semibold) 9.5px/1 var(--font-mono);color:var(--text-muted);text-transform:uppercase}
+.frow .t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
+.frow .t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base);font-weight:var(--weight-medium)}
+.frow .t small{font-size:var(--text-xs);color:var(--text-subtle)}
+.frow>.i{color:var(--icon)}
+.frow:hover>.i{color:var(--text)}
+@container (max-width:600px){.sub-fields{grid-template-columns:1fr;gap:var(--space-0-5) 0}.sub-fields dd{margin-bottom:var(--space-2-5)}.sub-head,.sub-body{padding-left:var(--space-4);padding-right:var(--space-4)}}
+
+/* ── M6: Search and sharing, and Site Settings' publish-time fields. A soft limit is amber and blocks nothing ── */
+.field-meta.soft-over{color:var(--status-warning);font-weight:var(--weight-semibold)}
+.field-ok{display:flex;align-items:center;gap:var(--space-1);margin-top:var(--space-1-5);font-size:var(--text-xs);color:var(--text-muted)}
+.field-ok .i{color:var(--status-live)}
+.input.mono{font-family:var(--font-mono);font-size:var(--text-sm)}
+.gtag .input[aria-invalid="true"]{border-color:var(--status-warning-dot);box-shadow:0 0 0 3px var(--status-warning-wash)}
+.gtag .field-warn .linkbtn{margin-top:var(--space-1);font-family:var(--font-mono)}
+.gtag .field-warn>span{display:flex;flex-direction:column;align-items:flex-start}
+.rcpt .ed.is-confirm .tile{background:var(--surface);color:var(--status-warning-dot)}
+details.fgroup.seo{margin-top:var(--space-5)}
+/* M6c (G2): a section builder's page fields, above Search and sharing */
+details.fgroup.page-fields{margin-top:var(--space-5)}
+details.fgroup.page-fields+details.fgroup.seo{margin-top:0}
+details.fgroup.seo>.in{padding-top:var(--space-1)}
+details.fgroup.seo>summary{white-space:nowrap}
+details.fgroup.seo>summary .s{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
+