/* Colour comes from app.config.js: src/brand.js writes --brand-* onto at load. The fallbacks here are deliberately neutral greys, not anybody's brand, so that a missing config value degrades to plain rather than to somebody else's identity. */ :root { --brand-accent: #3a3a3a; --brand-accent-ink: white; --brand-ink: #16181d; --brand-paper: #f4f5f7; --line: #d9dce1; --rail-width: 172px; --radius: 10px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* `hidden` MEANS HIDDEN. The browser's own sheet says `[hidden] { display: none }`, but it says it at the same specificity as any class here — so `.editor { display: flex }` beat it, and the placement toolbar was on screen before a document was ever opened, as was the panel that is supposed to appear only with a selection. Worse than the look of it: those two are ABOVE the scrolling page, so every time one silently came and went the page moved under the reader's pointer, and something placed with care landed tens of points away from where it was put. This one line is load-bearing; the walk asserts the page does not move, and that assertion is what stands on it. */ [hidden] { display: none !important; } /* A line that reserves its space whether or not it has anything to say. Same reason. `.status`, `.selection` and `.progress` sit between the toolbar and the page: a render that finishes, a page that gets selected, a status that settles — each used to appear from nothing, shove the page down, and move the target out from under a hand that was already on its way. Reserving the line costs one blank row and buys a page that stays where it was put. */ .status:empty::before, .selection:empty::before, .progress:empty::before, .doc-name:empty::before, .editor-hint:empty::before { content: "\00a0"; } body { margin: 0; color: var(--brand-ink); background: var(--brand-paper); display: flex; flex-direction: column; min-height: 100vh; } body.is-dragging { outline: 3px dashed var(--brand-accent); outline-offset: -8px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); } .identity { display: flex; align-items: center; gap: 10px; } .brand-mark { display: inline-flex; width: 32px; height: 32px; } .brand-mark-svg, .brand-mark-image { width: 100%; height: 100%; border-radius: 8px; } .brand-text { display: flex; align-items: baseline; gap: 6px; } .brand-name { font-size: 1.05rem; letter-spacing: -0.01em; } .brand-product { font-size: 0.95rem; opacity: 0.6; } .actions { display: flex; gap: 8px; margin-left: auto; } .button { font: inherit; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; color: inherit; cursor: pointer; } .button:hover:not(:disabled) { border-color: var(--brand-accent); } .button:disabled { opacity: 0.45; cursor: default; } .button-primary { background: var(--brand-accent); color: var(--brand-accent-ink); border-color: transparent; } .doc-name { flex-basis: 100%; margin: 4px 0 0; font-size: 0.85rem; opacity: 0.65; } .status { margin: 0; padding: 8px 20px; font-size: 0.85rem; opacity: 0.75; } .selection { margin: 0; padding: 0 20px 6px; font-size: 0.8rem; opacity: 0.65; } .message { margin: 0 20px 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; border-left: 5px solid var(--brand-accent); } .message[data-tone="error"] { border-left-color: #b42318; } .message-headline { margin: 0 0 6px; font-size: 1.05rem; } .message-detail { margin: 0; line-height: 1.5; max-width: 62ch; } .password-form { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .password-form input { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; } .progress { margin: 0 20px 8px; font-size: 0.8rem; opacity: 0.6; min-height: 1em; } .workspace { display: flex; flex: 1; min-height: 0; gap: 0; } .rail { width: var(--rail-width); flex: 0 0 var(--rail-width); border-right: 1px solid var(--line); background: #fff; overflow-y: auto; padding: 12px 10px; } .rail-hint { margin: 0 0 10px; font-size: 0.72rem; opacity: 0.55; line-height: 1.4; } .thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 1px solid transparent; border-radius: var(--radius); background: none; cursor: grab; font: inherit; width: 100%; } .thumb:hover { background: var(--brand-paper); } .thumb.is-current { border-color: var(--brand-accent); background: var(--brand-paper); } .thumb.is-unrenderable { opacity: 0.5; } /* Selected is a filled state, not a border, so it reads differently from "you are here". */ .thumb.is-selected { background: var(--brand-accent); color: var(--brand-accent-ink); } .thumb.is-selected .thumb-label { opacity: 0.9; } .thumb.is-dragging { opacity: 0.4; cursor: grabbing; } /* Where the dragged page would land. */ .thumb.is-drop-target { box-shadow: 0 0 0 2px var(--brand-accent); } .thumb-canvas { width: 100%; height: auto; border: 1px solid var(--line); background: #fff; } .thumb-label { font-size: 0.75rem; opacity: 0.6; } .viewport { flex: 1; min-width: 0; overflow-y: auto; padding: 20px; } .empty { max-width: 46ch; margin: 12vh auto; text-align: center; } .empty-lead { font-size: 1.15rem; margin: 0 0 8px; } .empty-hint { margin: 0; opacity: 0.6; padding: 14px; border: 2px dashed var(--line); border-radius: var(--radius); } .empty-hint.is-active { border-color: var(--brand-accent); opacity: 1; } .pages { display: flex; flex-direction: column; align-items: center; gap: 20px; } .page { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0; } .page-canvas { display: block; max-width: 100%; height: auto; min-height: 120px; } .page-label { padding: 6px 8px; font-size: 0.75rem; opacity: 0.55; text-align: center; } .page-failure { margin: 0; padding: 14px; max-width: 46ch; line-height: 1.5; font-size: 0.9rem; } /* The overlay editor. The page figure becomes the positioning context and the overlay covers exactly the canvas, so a placed box's percentage-free pixel offsets mean the same thing the arithmetic in overlay-geometry.js means. `touch-action: none` is what lets a drag on a touch screen be a drag rather than a scroll. */ .page { position: relative; } /* Exactly over the canvas, and no further: the figcaption underneath is not part of the page and a click on it must not land on paper. Width comes from the figure and height from an aspect-ratio that overlay-view.js sets from the page's real proportions — the same pair of numbers the canvas is sized by, so the two boxes cannot drift apart. */ .page-overlay { position: absolute; left: 0; top: 0; width: 100%; touch-action: none; } .placed { position: absolute; box-sizing: border-box; border: 1px dashed transparent; cursor: move; touch-action: none; } .placed:hover { border-color: var(--brand-accent); } .placed.is-selected { border: 1px solid var(--brand-accent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08); } .placed-body { width: 100%; height: 100%; overflow: hidden; line-height: 1.2; white-space: pre-wrap; font-family: Helvetica, Arial, sans-serif; padding: 1px 2px; box-sizing: border-box; } .placed-field .placed-body { background: rgba(255, 255, 255, 0.9); border: 1px solid var(--line); color: rgba(0, 0, 0, 0.55); } .placed-image { width: 100%; height: 100%; object-fit: fill; display: block; } .placed-handle { position: absolute; width: 10px; height: 10px; background: var(--brand-accent); border-radius: 2px; display: none; } .placed.is-selected .placed-handle { display: block; } .placed-handle-nw { left: -5px; top: -5px; cursor: nwse-resize; } .placed-handle-ne { right: -5px; top: -5px; cursor: nesw-resize; } .placed-handle-sw { left: -5px; bottom: -5px; cursor: nesw-resize; } .placed-handle-se { right: -5px; bottom: -5px; cursor: nwse-resize; } .editor { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 10px 20px; border-bottom: 1px solid var(--line); background: #fff; } .tools { display: flex; gap: 8px; } .button-tool[aria-pressed="true"] { border-color: var(--brand-accent); color: var(--brand-accent); font-weight: 600; } /* The selected item's controls. They are ALWAYS laid out once a document is open — never shown and hidden — because this row sits above the page and coming and going would move the page. Nothing selected, or a control that does not apply to this kind of item, is said with `disabled`: same box, same height, and a reader can see the difference. */ .item-panel { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .item-panel.is-idle { opacity: 0.45; } .item-panel .field { display: flex; flex-direction: column; gap: 2px; font-size: 0.75rem; opacity: 0.8; } .item-panel .field input { padding: 5px 6px; border: 1px solid var(--line); border-radius: 4px; font: inherit; } .item-panel .field-narrow input { width: 72px; } .button-danger { border-color: var(--line); } .editor-hint { margin: 0; font-size: 0.8rem; opacity: 0.7; flex-basis: 100%; } .footer { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 0.8rem; opacity: 0.65; background: #fff; } @media (max-width: 700px) { .workspace { flex-direction: column; } .rail { width: auto; flex: none; border-right: none; border-bottom: 1px solid var(--line); } .thumbs { flex-direction: row; overflow-x: auto; } .thumb { width: 110px; flex: 0 0 110px; } }