/* Required shell layout and inherited control defaults. No review UI. */
* { box-sizing:border-box; }
:root { font:14px/1.45 system-ui,sans-serif; color:#f7f0e7; background:#201b26; color-scheme:dark; }
body { margin:0; }
button,input,select { font:inherit; border:1px solid #a499ad; border-radius:5px; padding:8px; background:#332c3b; color:#fff; }
button { cursor:pointer; min-height:44px; }
button:disabled { opacity:.45; cursor:default; }
:focus-visible { outline:3px solid #ffd177; outline-offset:2px; }
a { color:#ffd177; }
[hidden] { display:none !important; }
h1 { font-size:24px; margin:0 0 8px; }
p { margin:8px 0; }
body.shell-stage { height:100dvh; overflow:hidden; }
#shell { position:relative; width:100%; height:100dvh; overflow:hidden; }
.region { position:absolute; overflow:hidden; }
#notebook { display:flex; flex-direction:column; }
#spread { overflow-y:auto; overflow-x:hidden; }
#cloth { width:100%; position:relative; margin:auto; }
#spread.fitting { display:flex; align-items:safe center; }
#rail { overflow:auto; }
#closed { overflow:auto; }
#flow { position:absolute; overflow-y:auto; overflow-x:hidden; }
#flow-content { position:relative; width:100%; }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }
#connected-notebook { display:block; width:100%; height:100%; border:0; flex:1; min-height:0; }

/* Shared values; design decisions are documented in README.md. */
:root {
  --color-plum: #493047;
  --color-leather: #30212e;
  --color-navy-surface: #13132e;
  --color-gold: #f1b956;
  --color-gold-antique: #b79a63;
  --color-parchment-text: #372438;
  --color-dark-surface-text: #f3ead8;
  --color-parchment-border: #bc985d;
  --color-menu-hover: #4930470d;
  --color-menu-border: #a48651;
  --dark-menu-border: 3px double var(--color-gold-antique);
  --dark-menu-shadow: 0 8px 20px #10091066;
  --card-large-width: 120px;
  --card-large-height: 208px;
  --card-large-aspect-ratio: 120 / 208;
  /* Medium and small are reserved; do not use until dimensions are agreed. */
  --font-body: Georgia, serif;
  --font-heading: "Snell Roundhand", cursive;
  --text-body-size: 14px;
  --text-body-line-height: 16px;
  --text-h1-size: 32px;
  --text-h1-line-height: 40px;
  --text-h2-size: 28px;
  --text-h2-line-height: 32px;
}

/* Sibling controls keep card actions independent of the card's main button. */
.card-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.card-actions[hidden] { display: none; }
.card-actions button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; pointer-events: none; }
.card-actions img { display: block; width: 44px; height: 44px; }
.spread-card:hover .card-actions, .spread-card:focus-within .card-actions,
.expanded-card-entry:hover .card-actions, .expanded-card-entry:focus-within .card-actions,
.notebook-card:hover .card-actions,
.notebook-card:has(.card-actions button:focus-visible) .card-actions { opacity: 1; }
.spread-card:hover .card-actions button, .spread-card:focus-within .card-actions button,
.expanded-card-entry:hover .card-actions button, .expanded-card-entry:focus-within .card-actions button,
.notebook-card:hover .card-actions button,
.notebook-card:has(.card-actions button:focus-visible) .card-actions button { pointer-events: auto; }
.card-actions button:hover { background: transparent; }
.card-actions button:focus-visible { outline: 2px solid var(--color-plum); outline-offset: 2px; }
@media (hover: none) {
  .notebook-card:not(.touch-actions-visible) .card-actions { opacity: 0; }
  .notebook-card:not(.touch-actions-visible) .card-actions button { pointer-events: none; }
  .notebook-card.touch-actions-visible .card-actions,
  .expanded-card-entry.selected .card-actions { opacity: 1; }
  .notebook-card.touch-actions-visible .card-actions button,
  .expanded-card-entry.selected .card-actions button { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) { .card-actions { transition: none; } }

/* Connected component appearance; base.css owns allocation and scrolling. */
@font-face { font-family:'Snell Roundhand';src:url("../../assets/fonts/Snell Roundhand Regular.woff2") format("woff2");font-display:block; }
.connected-workspace { font:14px/16px Georgia,serif; }
.connected-workspace button { font:inherit; border-radius:0; }
.connected-workspace #title { display:block; padding:0; color:var(--color-gold); background:var(--color-navy-surface); border:0; z-index:20; }
.connected-workspace #title h1 { margin:0; height:100%; font:32px/40px 'Snell Roundhand',cursive; }
.connected-workspace #responsive-spread-trigger { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0 48px; border:0; background:transparent; color:inherit; font:inherit; }
.connected-workspace #responsive-spread-trigger img { position:absolute; right:8px; width:24px; height:24px; }
.connected-workspace #responsive-position-picker { position:absolute; left:0; top:4px; z-index:1; display:grid; place-items:center; width:44px; height:44px; border:0; padding:0; background:transparent; }
.connected-workspace #responsive-position-picker img { width:24px; height:24px; }
.connected-workspace:is([data-composition=single],[data-composition=compact],[data-composition=double]) #responsive-position-picker { top:auto; bottom:4px; }
/* The title, arrow and fan stay one component. Vertical text rotates, its controls do not. */
.connected-workspace:is([data-composition=single],[data-composition=compact],[data-composition=double]) #title h1 { position:static;top:50%;left:50%;width:100%;transform:none; }
.connected-workspace:is([data-composition=single],[data-composition=compact],[data-composition=double]) #responsive-spread-trigger { position:absolute;inset:0;padding:0;display:block; }
.connected-workspace:is([data-composition=single],[data-composition=compact],[data-composition=double]) #responsive-spread-trigger span { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap; }
.connected-workspace:is([data-composition=single],[data-composition=compact],[data-composition=double]) #responsive-spread-trigger img { top:8px;left:50%;right:auto;transform:translateX(-50%) rotate(-90deg); }

/* Navigation overlays cover the title; only the spread picker raises its trigger. */
#overlay-host { position:absolute;inset:0;pointer-events:none;z-index:60; }
#overlay-host > :not([hidden]) { pointer-events:auto; }
#overlay-host #announcement { pointer-events:none; }
.connected-workspace[data-overlay=spread-picker] #title { z-index:65; }
.connected-workspace #spread-picker[data-direction=down] #spread-close img { transform:rotate(180deg); }
.connected-workspace #responsive-spread-trigger[aria-expanded=true] img { transform:rotate(180deg); }
.connected-workspace:is([data-composition=single],[data-composition=compact],[data-composition=double]) #responsive-spread-trigger[aria-expanded=true] img { transform:translateX(-50%) rotate(90deg); }
.connected-workspace #spread { border:0; }
.connected-workspace #cloth { display:block; flex:none; padding:0; border:0; background:var(--color-navy-surface) url("../../assets/textures/reading-cloth-v4.webp") center/100% 100% no-repeat; }
.connected-workspace .positions { position:absolute; inset:0; width:100%; height:100%; }
.connected-workspace .legend { display:none; }
.connected-workspace .spread-card { position:absolute; }
.connected-workspace .card-slot { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; min-height:0; padding:0; border:1px solid #d8b369; border-radius:6px; background:#11112677; color:#f1b956; }
.connected-workspace .card-slot img { display:block; width:100%; height:100%; object-fit:contain; }
.connected-workspace .reversed { transform:rotate(180deg); }
.connected-workspace .card-slot[aria-pressed=true] { outline:2px solid #f1b956; outline-offset:3px; }
/* Rail variants retain their own sizing, labels and internal overflow. */
.connected-workspace #rail { padding:0; border:0; background:var(--color-navy-surface) url("../../assets/textures/purple-gold-star-background.webp") center top / 680px 680px repeat; color:#d8b369; }
.connected-workspace .expanded-card-list { display:flex; gap:18px; min-width:100%; width:max-content; height:100%; padding:11px 20px; align-items:center; }
.connected-workspace .expanded-card-entry { position:relative; flex:none; width:var(--rail-card-width); }
.connected-workspace .expanded-card-item { display:grid; grid-template-rows:var(--rail-card-height) minmax(16px,auto); justify-items:center; gap:14px; position:relative; width:100%; padding:0; border:0; background:transparent; color:inherit; }
.connected-workspace .expanded-card-art,.connected-workspace .expanded-card-empty { display:block; width:100%; height:var(--rail-card-height); aspect-ratio:120/208; object-fit:contain; }
.connected-workspace .expanded-card-empty { border:1px solid #d8b369; border-radius:5px; }
.connected-workspace .expanded-card-number { position:absolute; top:calc(var(--rail-card-height) / 2); transform:translateY(-50%); }
.connected-workspace .expanded-card-item:has(img) .expanded-card-number { display:none; }
.connected-workspace .expanded-card-label { display:block; width:max-content; max-width:120px; text-align:center; }
.connected-workspace .expanded-card-entry.selected .expanded-card-art,
.connected-workspace .expanded-card-entry.selected .expanded-card-empty { outline:2px solid #f1b956; outline-offset:3px; }
.connected-workspace .expanded-card-entry .card-actions { bottom:auto; height:var(--rail-card-height); }
.connected-workspace .expanded-card-entry:has(.expanded-card-empty) .card-actions { display:none; }
.connected-workspace #rail[data-orientation=vertical] { overflow-y:auto; overflow-x:hidden; }
.connected-workspace #rail[data-orientation=vertical] .expanded-card-list { flex-direction:column; width:100%; min-height:100%; height:max-content; padding:12px 6px; gap:12px; }
.connected-workspace #rail[data-orientation=vertical] .expanded-card-entry { width:78%; margin-block:auto; }
.connected-workspace #rail[data-orientation=vertical] .expanded-card-item { gap:4px; grid-template-rows:var(--rail-card-height) minmax(32px,auto); }
.connected-workspace #rail[data-orientation=vertical] .expanded-card-label { width:100%; max-width:none; white-space:normal; overflow-wrap:anywhere; }
.connected-workspace #rail[data-orientation=horizontal] { overflow-x:auto; overflow-y:hidden; }
.connected-workspace #rail[data-orientation=horizontal] .expanded-card-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.connected-workspace[data-composition=portrait] .expanded-card-list { padding:12px 16px; }
/* Dialog structure is shared; each dialog opts into its parchment or dark surface. */
.connected-workspace dialog { width:190px; max-width:calc(100vw - 32px); max-height:min(600px,calc(100dvh - 32px)); overflow:auto; padding:10px 12px 12px; }
.connected-workspace .dialog-surface-parchment { color:var(--color-parchment-text); color-scheme:light; background:radial-gradient(ellipse at 50% 35%,#faf1dd,#e6d4b2); border:1px solid var(--color-parchment-border); border-radius:10px; box-shadow:0 16px 60px #09081299,inset 0 0 0 5px #f4e7cd,inset 0 0 0 6px #bc985d66; }
.connected-workspace .dialog-surface-dark { color:var(--color-dark-surface-text); background:var(--color-leather) url("../../assets/textures/spine-leather.svg"); border:var(--dark-menu-border); border-radius:0; box-shadow:var(--dark-menu-shadow); }
.connected-workspace dialog::backdrop { background:#0c09184d; }
.connected-workspace dialog h2 { font:28px/32px 'Snell Roundhand',cursive; margin:8px 0; text-align:center; }
.connected-workspace .picker-top { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:6px; }
.connected-workspace .picker-top button { display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0; border:0; background:transparent; }
.connected-workspace .picker-top img { width:24px; height:24px; }
.connected-workspace .picker-top #back { grid-column:1; }
.connected-workspace .picker-top #position-label { grid-column:2; text-align:center; }
.connected-workspace .picker-top #close { grid-column:3; }
.connected-workspace #back img { transform:rotate(90deg); }
.connected-workspace .menu-list { display:grid; gap:1px; }
.connected-workspace .menu-row { display:flex; align-items:center; justify-content:space-between; gap:4px; width:100%; min-height:44px; padding:5px 6px; text-align:left; border:1px solid transparent; border-radius:4px; color:inherit; background:transparent; }
.connected-workspace .menu-row img { width:20px; height:20px; transform:rotate(-90deg); }
.connected-workspace .menu-row:hover,.connected-workspace .menu-row:focus-visible { background:#6f456b14; border-color:#b69a68; }
.connected-workspace .menu-row.unavailable-card:disabled { opacity:1; }
.connected-workspace .menu-row.unavailable-card:disabled img { filter:grayscale(1);opacity:.4; }
.connected-workspace .orientation-art { display:block; width:74px; height:128px; object-fit:contain; margin:2px auto 8px; }
.connected-workspace #spread-picker { position:fixed; max-width:none; padding:10px; }
.connected-workspace #spread-picker h2 { margin:0 44px 10px 0; text-align:left; color:#d8b369; }
.connected-workspace #spread-close { position:absolute; right:0; top:0; }
.connected-workspace #spread-picker[data-direction=right] #spread-close img { transform:rotate(90deg); }
.connected-workspace .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (hover:none) {
  .connected-workspace .spread-card .card-actions { display:none; }
}

/* Closed Notebook uses the existing resolved allocation in either orientation. */
.connected-workspace #closed { display:block;padding:0;border:0;overflow:hidden;color:#d8b369;background:var(--color-leather) url("../../assets/textures/spine-leather.svg");box-shadow:inset 3px 0 6px #10091080,-4px 0 14px #10091040; }
.connected-workspace #closed::before,.connected-workspace #closed::after { content:"";position:absolute;pointer-events:none;border:1px solid #b79a63;inset:6px; }
.connected-workspace #closed::after { inset:10px;border-color:#b79a6380; }
.notebook-spine-controls { position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);display:grid;gap:4px; }
.connected-workspace #closed button { display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;border-radius:0;background:transparent;color:inherit; }
.connected-workspace #closed button img { width:24px;height:24px; }
.connected-workspace #closed button:hover,.connected-workspace #closed button:focus-visible { outline:1px solid #b79a63;outline-offset:-2px;background:#d8b36912; }
.notebook-spine-title { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;white-space:nowrap;font:28px/32px 'Snell Roundhand',cursive;pointer-events:none; }
.connected-workspace[data-composition=portrait] #closed { box-shadow:inset 0 3px 6px #10091080,0 -4px 14px #10091040; }
.connected-workspace[data-composition=portrait] .notebook-spine-controls { top:50%;left:12px;transform:translateY(-50%);display:flex; }
.connected-workspace[data-composition=portrait] .notebook-spine-title { writing-mode:horizontal-tb; }

/* Native scrollbars retain their geometry and scroll over transparent tracks. */
.connected-workspace { --scrollbar-thumb:rgb(241 185 86 / 55%); }
.connected-workspace .dialog-surface-parchment { --scrollbar-thumb:rgb(183 154 99 / 55%); }
.connected-workspace, .connected-workspace * { scrollbar-color:var(--scrollbar-thumb) transparent; }

/* Resolved shell state renders navigation; no viewport breakpoint chooses a spine. */
.connected-workspace #spine { display:block; padding:0; border:0; background:var(--color-leather); z-index:50; }
.journal-spine { width:100%;height:100%;display:flex;flex-direction:column;gap:4px;padding:4px;background:var(--color-leather) url("../../assets/textures/spine-leather.svg");color:var(--color-gold); }
.spine-compartment { position:relative;min-width:0;min-height:0;padding:8px; }
.spine-frame { position:absolute;inset:0;width:100%;height:100%;pointer-events:none; }
.spine-brand { flex:0 0 18%;display:grid;place-items:center;container-type:inline-size; }
.journal-spine button { color:inherit;background:transparent;border:0; }
.journal-spine .spine-brand-trigger { position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0;font:32px/40px 'Snell Roundhand',cursive; }
.spine-brand-full { white-space:nowrap; }
.spine-brand-star { font:normal 14px Georgia,serif; }
.spine-brand-j { margin-left:-4px; }
.spine-brand-compact,.spine-brand-halo { display:none; }
.spine-actions { flex:0 0 202px;display:flex;flex-direction:column;justify-content:center;align-items:stretch; }
.spine-actions .compact-spine-action { display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 8px;text-align:left; }
.spine-actions svg:not(.spine-frame),.spine-actions img { width:24px;height:24px;flex:0 0 24px;object-fit:contain; }
.spine-readings { flex:1; container-type:size; }
.compact-spine-open { display:flex;align-items:center;justify-content:center;position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);padding:0; }
.compact-reading-icon { display:none;width:24px;height:24px; }
.compact-spine-open span { writing-mode:vertical-rl;transform:rotate(180deg);font:28px/32px 'Snell Roundhand',cursive;position:absolute;bottom:16px; }
.connected-workspace[data-spine=compact] .spine-brand-full,.connected-workspace[data-spine=extra-compact] .spine-brand-full { display:none; }
.connected-workspace[data-spine=compact] .spine-brand-compact,.connected-workspace[data-spine=extra-compact] .spine-brand-compact { display:block;position:relative;width:42px;height:62px;transform:translateX(-5px); }
.spine-brand-compact i { position:absolute;font-style:normal; }
.spine-brand-compact i:first-child { top:0;left:0; }
.spine-brand-compact i:last-child { bottom:0;right:4px; }
.spine-brand-compact b { position:absolute;top:26px;left:18px;font:12px Georgia,serif; }
.connected-workspace[data-spine=extra-compact] .journal-spine .spine-brand-trigger { font-size:28px; }
.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-actions { padding:8px 0;flex-basis:calc(4 * var(--action-target) + 26px);max-height:202px; }
.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-actions .compact-spine-action { justify-content:center;min-height:var(--action-target);height:var(--action-target);padding:0; }
.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-actions span { display:none; }
.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-actions img,.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-actions svg:not(.spine-frame) { width:20px;height:20px; }
@container (max-height:140px) { .compact-spine-open span { display:none; }.compact-reading-icon { display:block; } }
.connected-workspace[data-spine=horizontal] .journal-spine { display:grid;grid-template-columns:var(--brand-width) 192px minmax(0,1fr);align-items:stretch; }
.connected-workspace[data-spine=horizontal] .spine-compartment { height:50px;padding:6px; }
.connected-workspace[data-spine=horizontal] .spine-actions { flex-direction:row;align-items:center;justify-content:center; }
.connected-workspace[data-spine=horizontal] .spine-actions .compact-spine-action { width:44px;height:44px;padding:0;justify-content:center; }
.connected-workspace[data-spine=horizontal] .spine-actions span { display:none; }
.connected-workspace[data-spine=horizontal] .compact-spine-open span { writing-mode:horizontal-tb;transform:none;position:static;white-space:nowrap; }
.connected-workspace[data-spine=horizontal] .spine-brand-compact { position:static;transform:none;height:auto;width:auto;white-space:nowrap; }
.connected-workspace[data-spine=horizontal] .spine-brand-compact i,.connected-workspace[data-spine=horizontal] .spine-brand-compact b { position:static; }
@container (max-width:220px) { .connected-workspace[data-spine=horizontal] .spine-brand-full { display:none; }.connected-workspace[data-spine=horizontal] .spine-brand-compact { display:block; } }
@container (max-width:50px) { .connected-workspace[data-spine=horizontal] .spine-brand-compact { display:none; }.connected-workspace[data-spine=horizontal] .spine-brand-halo { display:block;width:28px;height:28px; } }
@container (max-width:120px) { .connected-workspace[data-spine=horizontal] .compact-spine-open span { display:none; }.connected-workspace[data-spine=horizontal] .compact-reading-icon { display:block; } }
/* Menu allocation is supplied by navigation.js; CSS owns surfaces and internal scroll. */
.navigation-readings { position:absolute;display:flex;flex-direction:column;padding:12px;color:var(--color-dark-surface-text);background:var(--color-leather) url("../../assets/textures/spine-leather.svg");border:var(--dark-menu-border);overflow:hidden; }
.navigation-readings[data-full=true] { padding:0;border:0;background:transparent; }
.spine-list-heading { display:flex;align-items:center;gap:8px;flex:none;min-width:0; }
.spine-list-heading h2 { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:28px/32px 'Snell Roundhand',cursive;color:#f1b956; margin:4px 0 10px; }
/* Readings and dialog close controls share geometry, but retain separate placement. */
.compact-spine-close,
.spine-dialog-close {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:transparent;
}
.compact-spine-close { flex:none; }
.compact-spine-close img,
.spine-dialog-close img { width:24px;height:24px; }
[data-direction=left] .compact-spine-close img,[data-direction=left] .spine-dialog-close img { transform:rotate(90deg); }
[data-direction=up] .compact-spine-close img,[data-direction=up] .spine-dialog-close img { transform:rotate(180deg); }
#spine-list { flex:1;min-height:0;overflow-y:auto;overflow-x:hidden; }
.reading-row { display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start; }
.reading-row > button { display:flex;align-items:center;gap:6px;min-width:0;min-height:52px;padding:6px 4px;color:#f3ead8;background:transparent;border:0;text-align:left; }
.reading-row > button > img { width:20px;height:20px;flex:none; }
.reading-row > button span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.reading-row > button.selected { color:#f1b956; }
.reading-row > .reading-more { width:44px;height:52px;justify-content:center; }
.touch-reading-actions { grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-around;padding-bottom:8px; }
.touch-reading-action { display:flex;align-items:center;gap:4px;min-height:44px;padding:4px;color:#f1b956;background:transparent;border:0; }
.touch-reading-action img { width:20px;height:20px; }
.touch-reading-action.needs-save { opacity:.5; }
.connected-workspace .navigation-overlay-menu { position:absolute;max-width:none; }
.spine-dialog-top { position:relative;min-height:44px;padding-right:44px; }
.connected-workspace .spine-dialog-top h2 { text-align:left;margin:0 0 10px;overflow-wrap:anywhere; }
.connected-workspace .navigation-overlay-menu .spine-dialog-top h2 { color:var(--color-gold); }
.spine-dialog-close { position:absolute;right:0;top:0; }
.spine-dialog-action { display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:44px;width:100%;padding:6px;background:transparent;color:inherit;border:1px solid transparent;text-align:left; }
.spine-dialog-action img,.spine-dialog-action svg { width:20px;height:20px;flex:none; }
.spine-dialog-action span { flex:1; }
.spine-dialog-action:hover,.spine-dialog-action:focus-visible,.journal-spine button:hover { background:#d8b36918; }
.collection-row { display:flex; }
.collection-row > .spine-dialog-action { flex:1;min-width:0; }
.collection-remove { width:44px;flex:none;padding:8px;border:0;background:transparent; }
.collection-remove img { width:24px;height:24px; }
.new-collection-form { display:flex;flex-wrap:wrap;align-items:center;gap:4px; }
.new-collection-form input { width:calc(100% - 48px);min-width:0;background:transparent;color:#493047;border:1px solid #bc985d; }
.icon-submit { width:44px;height:44px;min-width:44px;padding:8px;color:#493047;background:transparent;border:0; }
.icon-submit svg { width:24px;height:24px; }
.connected-workspace .spine-dialog:not(.navigation-overlay-menu) { width:max(240px,var(--spine-menu-width,240px)); }
.reading-files { position:fixed;bottom:8px;left:8px;z-index:100;max-width:min(440px,calc(100vw - 16px)); }
#file-status:empty { display:none; }
#file-status:not(:empty) { max-height:130px;overflow:auto;padding:8px;background:#eee1c6;color:#493047;border:1px solid #bc985d; }



.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-brand { flex:0 1 clamp(78px,18%,104px);padding:4px;container-name:landscape-brand;container-type:size; }
.connected-workspace[data-spine=extra-compact] .spine-brand-compact i:last-child { right:13px;bottom:1px; }
.connected-workspace[data-spine=compact] .spine-brand-compact { width:46px;height:70px; }
@container landscape-brand (max-height:44px) { .connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-brand-compact { display:none; }.spine-brand-halo { display:block;width:32px;height:32px; } }

/* Keep an icon-sized readings compartment before reducing action spacing. */
.connected-workspace:is([data-spine=compact],[data-spine=extra-compact]) .spine-readings { min-height:44px; }
.collections-menu .new-collection-action svg { color:var(--color-gold); }