/* Layout for the working app (index.html). Components come from components.css. */

/* M1: left Sheets panel (resizable, collapsible); right and bottom panels arrive in M2 and M5. */
.app.m1 {
  grid-template-columns: var(--left-w, 220px) 1fr var(--size-panel-right);
  grid-template-rows: var(--size-menubar) var(--size-toolbar) minmax(0, 1fr) var(--size-statusbar);
  grid-template-areas:
    "menu menu menu"
    "tools tools tools"
    "left canvas right"
    "status status status";
}
.app.m1.left-closed { grid-template-columns: 0 1fr var(--size-panel-right); }
.app.m1.right-closed { grid-template-columns: var(--left-w, 220px) 1fr 0; }
.app.m1.left-closed.right-closed { grid-template-columns: 0 1fr 0; }
.app.m1.left-closed .panel.left, .app.m1.right-closed .panel.right { display: none; }

/* Properties panel extras */
.panel.right .field { grid-template-columns: 72px minmax(0, 1fr); }
.panel.right .panel-body { overflow-x: hidden; }
.panel.right .swatches { grid-template-columns: repeat(7, 20px); gap: 4px; }
.panel.right .swatch { width: 20px; height: 20px; }
.panel.right .row input[type="number"] { width: 56px !important; flex: none; }
.panel.right .row input[type="range"] { min-width: 0; }
.swatch.none { background: linear-gradient(to top right, #fff calc(50% - 1px), #e02020 calc(50% - 1px), #e02020 calc(50% + 1px), #fff calc(50% + 1px)); }
.swatch.custom { padding: 0; border: 1px dashed var(--c-border-input); background: var(--c-bg); cursor: pointer; }
.swatch.custom::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch.custom::-webkit-color-swatch { border: 0; border-radius: 2px; }
.swatch.custom[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-text); }
.panel.right input[type="number"] { -moz-appearance: textfield; }
dialog.dialog { padding: 0; color: var(--c-text); }
dialog.dialog::backdrop { background: rgba(0,0,0,.35); }
.panel.left { position: relative; }
.resizer { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; }
.resizer:hover, .resizer.dragging { background: var(--c-accent); opacity: .6; }

/* Sheets list */
.sheet-list { flex: 1; overflow: auto; padding: var(--sp-3) var(--sp-3) var(--sp-7); display: grid; gap: var(--sp-3); align-content: start; }
.sheet-item { all: unset; display: grid; gap: 2px; padding: var(--sp-3); border-radius: var(--r-sm); cursor: default; }
.sheet-item:hover { background: var(--c-surface); }
.sheet-item:focus-visible { outline: 2px solid var(--c-focus); }
.thumb-box { display: block; width: 100%; background: var(--c-sheet); box-shadow: 0 1px 3px rgba(0,0,0,.25); outline: 2px solid transparent; outline-offset: 2px; }
.thumb-box canvas { display: block; width: 100%; height: 100%; }
.sheet-item.current .thumb-box { outline-color: var(--c-accent); }
.sheet-item.current { background: var(--c-surface); }
.sheet-meta { display: flex; align-items: baseline; gap: var(--sp-3); margin-top: 4px; }
.sheet-number { font-size: var(--fs-sm); }
.sheet-page { margin-left: auto; font-size: var(--fs-xs); color: var(--c-text-muted); }
.sheet-title { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-item.current .sheet-number { color: var(--c-accent-strong); }

/* The drawing area runs under both side panels and the status bar (they're glass over it, see apple.css); the
   viewer fits and centres in the part you can see (view.js setCoveredLeft / Right / Bottom). */
.stage { grid-row: canvas-start / status-end; grid-column: left-start / right-end; position: relative; overflow: hidden; background: var(--c-canvas); touch-action: none; user-select: none; }
.stage #sheet { position: absolute; background: var(--c-sheet); box-shadow: var(--shadow-sheet); }
.stage #preview { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage #sharp { position: absolute; }
.stage #overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.overlay-bar { display: flex; align-items: center; gap: var(--sp-3); height: 32px; padding: 0 4px 0 var(--sp-4); font-size: var(--fs-xs);
  background: var(--c-surface); white-space: nowrap; }
.overlay-bar[hidden] { display: none; }
.overlay-bar .ob-what { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.overlay-bar .ob-what.missing { color: var(--c-danger); }
.overlay-bar .ob-key { color: var(--c-text-muted); display: flex; align-items: center; gap: 4px; }
.overlay-bar .ob-key i { display: inline-block; width: 10px; height: 10px; margin-left: 6px; border: 1px solid var(--c-border); }
.overlay-bar .ob-old { background: #ff0000; }
.overlay-bar .ob-new { background: #00c000; }
.overlay-bar .ob-same { background: #000; }
.stage.drop { outline: 3px dashed var(--c-accent); outline-offset: -8px; }

/* The start screen is centred on the whole window (the drawing area spans it), even with the side panels open. */
/* Before a PDF is open (the start screen is showing), the Sheets panel is just empty surface (no heading, no ⋯
   menu, no resize handle) and the status bar has no tabs. They appear once a PDF is open. */
.app:has(#welcome:not([hidden])) .panel.left .panel-header,
.app:has(#welcome:not([hidden])) #leftResizer,
.app:has(#welcome:not([hidden])) .statusbar .sb-tab,
.app:has(#welcome:not([hidden])) .panel.right { display: none; } /* status tabs and the right panel too */
.welcome { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; text-align: center; color: var(--c-text-muted); }
.welcome .btn { justify-self: center; }
.welcome-mark { width: 64px; height: 64px; justify-self: center; }

.busy { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 5; }

.page-nav { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); }
.page-nav .input { width: 52px; text-align: center; }
.tabs .empty-tab { align-self: center; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Selection on the drawing: a thin dashed amber box and small handles, so the markup itself stays visible.
   (A darker amber than the UI accent, so it reads on the white sheet.) */
#overlay .sel-line { fill: none; stroke: #d97706; stroke-width: 1; stroke-dasharray: 4 3; }
#overlay .sel-line.locked { stroke: #8a8f98; }
/* Grips (resize and point handles): small sharp squares like CAD grips, solid amber with a thin white edge. */
#overlay .handle { fill: #d97706; stroke: #fff; stroke-width: 1; shape-rendering: crispEdges; }
/* Measurement points: a thin ring with a white halo (readable on any linework) and an exact centre dot. */
#overlay .handle-target { fill: none; stroke: #d97706; stroke-width: 1.25; paint-order: stroke; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }
#overlay .handle-dot { fill: #d97706; }
#overlay .snap-ring { fill: color-mix(in srgb, #f59e0b 25%, transparent); stroke: #d97706; stroke-width: 1.5; }
#overlay .select-box { fill: color-mix(in srgb, var(--c-accent) 12%, transparent); stroke: var(--c-accent); stroke-width: 1; stroke-dasharray: 4 3; }

/* Paste feedback: a ring that glows, grows slightly and fades */
.paste-flash {
  position: absolute; pointer-events: none; z-index: 4;
  border: 2px solid var(--c-accent); border-radius: 2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 35%, transparent), 0 0 18px color-mix(in srgb, var(--c-accent) 60%, transparent);
  animation: paste-flash 750ms ease-out forwards;
}
@keyframes paste-flash {
  0%   { opacity: 0; transform: scale(.96); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* Properties bar (top): empty until something is selected or a drawing tool is active */
.propbar { display: flex; align-items: center; height: 32px; padding: 0 var(--sp-3); font-size: var(--fs-sm);
  background: var(--c-bg); white-space: nowrap; overflow-x: auto; scrollbar-width: thin; }
.propbar[hidden] { display: none; }
.propbar.island { opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; }
.propbar.island.shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .propbar.island { transition: none; } }
.pb-content { display: flex; align-items: center; gap: var(--sp-4); }
.pb-label { min-width: 88px; font-weight: 600; }
.pb-label.is-tool { color: var(--c-accent-strong); }
.pb-group { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px 0 0;
  border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.pb-group-title { align-self: stretch; display: grid; place-items: center; padding: 0 7px; margin-right: 2px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted);
  border-right: 1px solid var(--c-border); background: var(--c-surface-2); }
.pb-icon { width: 13px; height: 13px; color: var(--c-text-muted); }
.pb-num.off { opacity: .4; }
.pb-color { position: relative; }
.pb-swatch-btn { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 4px; border: 1px solid var(--c-border-input);
  border-radius: var(--r-sm); background: var(--c-bg); color: var(--c-text-muted); }
.pb-swatch-btn:disabled { opacity: .45; }
.pb-chip { width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.35); }
.pb-chip.none, .pb-cell.none { background: linear-gradient(to top right, #fff calc(50% - 1px), #e02020 calc(50% - 1px), #e02020 calc(50% + 1px), #fff calc(50% + 1px)); }
.pb-chip.mixed { background: repeating-linear-gradient(45deg, #999 0 3px, #ddd 3px 6px); }
.pb-pop { position: fixed; z-index: 50; padding: 6px; background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.pb-grid { display: grid; grid-template-columns: repeat(6, 18px); gap: 3px; }
.pb-none { display: flex; align-items: center; gap: 6px; width: 100%; margin-bottom: 6px; padding: 3px 6px; font: inherit; font-size: var(--fs-sm);
  color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-sm); cursor: pointer; }
.pb-none:hover { border-color: var(--c-border-input); }
.pb-none[aria-pressed="true"] { border-color: var(--c-text); }
.pb-check { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; font-size: var(--fs-sm); cursor: pointer; }
.pb-check input { margin: 0; accent-color: var(--c-accent); }
.pb-check:has(input:disabled) { opacity: 0.45; cursor: default; }
.pb-group.pb-busy { opacity: 0.6; pointer-events: none; cursor: progress; } /* a Snapshot picture being made again */
.pb-cell { width: 18px; height: 18px; padding: 0; border: 1px solid rgba(0,0,0,.3); border-radius: 1px; }
.pb-cell[aria-pressed="true"] { outline: 2px solid var(--c-text); outline-offset: 1px; }
.pb-custom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--c-border); font-size: var(--fs-xs); color: var(--c-text-muted); }
.pb-hex { display: inline-flex; align-items: center; gap: 2px; }
.pb-hex .input { width: 62px; height: 20px; padding: 0 4px; font-size: var(--fs-sm); text-transform: uppercase; }
.pb-hex .input.bad { border-color: var(--c-danger); }
.pb-pick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pb-pick input { width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.pb-num { display: inline-flex; align-items: center; gap: 3px; }
.pb-num .input { width: 46px; height: 18px; padding: 0 3px; font-size: var(--fs-sm); }
.pb-unit { font-size: var(--fs-xs); color: var(--c-text-muted); }
.propbar .select { width: 78px; height: 18px; padding: 0 2px; font-size: var(--fs-sm); }

/* Typing on the drawing: a borderless text area over the markup's box */
.text-editor { position: absolute; z-index: 6; margin: 0; border: 0; outline: 1px dashed #d97706; outline-offset: 1px;
  background: transparent; resize: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; caret-color: currentColor; }
#overlay .mk-text { pointer-events: none; }

/* Live measurement while drawing */
.stage .readout { position: absolute; z-index: 5; transform: translate(14px, 14px); }
.stage .readout.flip-x { transform: translate(calc(-100% - 14px), 14px); }
.stage .readout.flip-y { transform: translate(14px, calc(-100% - 14px)); }
.stage .readout.flip-x.flip-y { transform: translate(calc(-100% - 14px), calc(-100% - 14px)); }
#scaleBtn.none { color: var(--c-text-muted); font-style: italic; }
.pb-measure { padding: 0 4px; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
/* Small square-ish chips after a measurement: rounding and scale (drafting look: 3 px corners, mono digits). */
.pb-tag { flex: none; padding: 1px 6px; border-radius: 3px; background: var(--c-surface-2); color: var(--c-text-muted);
  font: 500 var(--fs-xs)/var(--lh-xs) var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-tag[hidden] { display: none; }
#overlay .snap-mark { fill: none; stroke: #d97706; stroke-width: 2; }
#snapBtn:not(.on) { color: var(--c-text-muted); }

/* Markups List (the Markups tab of the right panel): filters on top, one card per markup, totals, actions */
.mk-filters { display: grid; gap: 6px; padding: 2px 10px 8px; }
.mk-filter-row { display: flex; gap: 6px; }
.mk-filter-row .select { flex: 1; min-width: 0; height: 24px; font-size: var(--fs-sm); }
.mk-search { height: 26px; font-size: var(--fs-sm); }
.mk-sort-dir { flex: none; width: 24px; height: 24px; }
.mk-sort-dir.reversed .icon { transform: scaleY(-1); }
.mk-list { flex: 1; min-height: 0; overflow: auto; display: grid; align-content: start; gap: 4px; padding: 0 8px 8px; }
/* Empty list: the message takes the list's place, a little above the middle. */
.mk-list:empty { display: none; }
.mk-empty { flex: 1; min-height: 0; display: grid; justify-items: center; align-content: center; gap: 4px; padding: 16px 16px 15%; text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }
.mk-empty b { font-size: var(--fs-lg); font-weight: 600; color: var(--c-text); }
.mk-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--c-surface-2); }
.mk-empty-icon .icon { width: 22px; height: 22px; stroke-width: 1.4; }
.mk-empty .mk-empty-btn { margin-top: 8px; color: var(--c-accent-strong); }
.mk-empty[hidden] { display: none; }
.mk-card { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: default; }
.mk-card .dot { margin-top: 3px; }
.mk-card:hover { background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.mk-card[aria-selected="true"] { background: var(--c-accent-soft); }
.mk-main { min-width: 0; display: grid; gap: 3px; }
.mk-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mk-title { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-label { font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-measure { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; }
.mk-comment { font-size: var(--fs-xs); color: var(--c-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-meta { font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-fields { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.mk-fields .assignee-input { flex: 1; min-width: 0; }
.mk-actions { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; }
.status-select { height: 18px; padding: 0 2px; font: inherit; font-size: var(--fs-xs); font-weight: 600; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: var(--c-bg); color: var(--c-text-muted); }
.status-select.colored { color: var(--st); border-color: transparent; background: color-mix(in srgb, var(--st) 15%, var(--c-bg)); }
.status-select[data-status="Cancelled"] { text-decoration: line-through; }
.list-totals { display: grid; gap: 2px; margin: 0 8px; padding: 6px 10px; font-size: var(--fs-xs); border-radius: 10px;
  background: color-mix(in srgb, var(--c-text) 5%, transparent); }
.list-totals[hidden] { display: none; }

/* Right panel tabs */
.panel.right .tab-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.panel.right .tab-pane[hidden] { display: none; }
.panel.right #markupsPane { overflow: hidden; } /* only the cards scroll; filters and buttons stay put */

/* Tool Chest */
.chest { padding: var(--sp-2) var(--sp-3) var(--sp-6); gap: var(--sp-3); }
.chest-set-head { display: flex; align-items: center; gap: 4px; height: 24px; }
.chest-toggle, .chest-more { all: unset; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-sm); color: var(--c-text-muted); cursor: pointer; }
.chest-toggle:hover, .chest-more:hover { background: var(--c-surface-2); color: var(--c-text); }
.chest-toggle svg { transition: transform var(--motion-fast); }
.chest-set-name { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.chest-count { font-size: var(--fs-xs); margin-right: auto; }
.chest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; padding: 2px 0 6px; }
.chest-tile { all: unset; display: grid; justify-items: center; gap: 2px; padding: 4px 2px; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer; }
.chest-tile:hover { background: var(--c-surface); border-color: var(--c-border); }
.chest-tile[aria-pressed="true"] { background: var(--c-surface-2); border-color: var(--c-accent); }
.chest-tile:focus-visible { outline: 2px solid var(--c-focus); }
.chest-preview { width: 52px; height: 36px; background: var(--c-sheet); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--c-border); }
.chest-name { max-width: 100%; font-size: var(--fs-xs); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chest-hint { grid-column: 1 / -1; padding: 6px 4px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.chest-rename { height: 18px; width: 100%; padding: 0 3px; font-size: var(--fs-xs); }
.chest-foot { display: flex; gap: 6px; padding-top: 4px; border-top: 1px solid var(--c-border); }
.context-menu { position: fixed; z-index: 60; }
.pb-icon-btn { all: unset; display: grid; place-items: center; width: 22px; height: 20px; border-radius: var(--r-sm); color: var(--c-text); cursor: pointer; }
.pb-icon-btn:hover { background: var(--c-surface-2); }
.pb-icon-btn:focus-visible { outline: 2px solid var(--c-focus); }
.pb-depth { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.pb-depth .input { width: 70px; height: 18px; padding: 0 4px; font-size: var(--fs-sm); }
.pb-depth .input.bad { border-color: var(--c-danger); }
#overlay .viewport-box { fill: color-mix(in srgb, #0050ff 5%, transparent); stroke: #0050ff; stroke-width: 1; stroke-dasharray: 6 3; }
#overlay .viewport-label { fill: #0050ff; font: 600 10px var(--font-sans); }
.vp-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--c-border); }
.vp-row { display: flex; align-items: center; gap: 8px; height: 24px; font-size: var(--fs-sm); }
.vp-row .vp-scale { margin-left: auto; font-size: var(--fs-xs); }

/* Flatten dialog: the Recoverable checkbox, lined up with the fields above it */
.check-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0 calc(76px + var(--sp-4)); font-size: var(--fs-sm); }

/* Statuses dialog: one row per status (color, name, move up, remove) */
.status-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-3); max-height: 320px; overflow: auto; }
.status-row { display: grid; grid-template-columns: 26px 1fr 22px 22px; gap: 4px; align-items: center; }
.status-row input[type="color"] { width: 26px; height: 22px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: none; }
.status-row .input { height: 22px; }
.status-row button { all: unset; width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-text-muted); }
.status-row button:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.status-row button:disabled { opacity: .3; }
.split-dialog { width: 440px; max-width: calc(100vw - 32px); }
.split-preview { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); overflow-wrap: anywhere; }
.split-preview.error { color: var(--c-danger); }
.combine-dialog { width: 480px; max-width: calc(100vw - 32px); }
.combine-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); max-height: 320px; overflow: auto; }
.combine-rows .status-row { grid-template-columns: 22px 1fr auto 22px 22px 22px; }
.combine-rows .num { color: var(--c-text-muted); font-size: var(--fs-xs); text-align: right; }
.combine-rows .name { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combine-rows .size { color: var(--c-text-muted); font-size: var(--fs-xs); }
.status-row .no-color { width: 26px; height: 22px; border: 1px dashed var(--c-border); border-radius: var(--r-sm); }

/* Markups List: "Assigned to" typed right in the row; looks like text until hovered or focused */
.assignee-input { width: 100%; min-width: 80px; height: 18px; padding: 0 4px; font: inherit; color: inherit; background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm); }
.assignee-input:hover { border-color: var(--c-border); }
.assignee-input:focus { outline: none; border-color: var(--c-accent); background: var(--c-bg); }
.assignee-input::placeholder { color: var(--c-text-muted); opacity: .5; }

/* FILL group: hatch pattern, then its color and size */
.pb-hatch, .pb-hatch-detail { display: inline-flex; align-items: center; gap: 6px; }
.pb-hatch[hidden], .pb-hatch-detail[hidden] { display: none; }
.pb-hatch .select { max-width: 112px; }

/* Hatch patterns dialog */
.dialog.hatch-dialog { width: 640px; max-width: calc(100vw - 32px); }
.hatch-body { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-5); }
.hatch-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.hatch-list { height: auto; padding: 2px; font-size: var(--fs-sm); }
.hatch-list optgroup { font-style: normal; color: var(--c-text-muted); }
.hatch-side-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.hatch-main { min-width: 0; }
.hatch-top { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-3); }
.hatch-preview { width: 96px; height: 96px; flex: none; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-sm); }
.hatch-top-fields { flex: 1; min-width: 0; }
.hatch-top-fields .field { grid-template-columns: 40px 1fr; }
.hatch-note { margin: 4px 0 0; font-size: var(--fs-xs); }
.hatch-rows { width: 100%; margin-bottom: var(--sp-2); }
.hatch-rows th { font-size: var(--fs-xs); text-align: left; cursor: help; }
.hatch-rows td { padding: 2px 2px; }
.hatch-rows .input { width: 100%; height: 22px; padding: 0 4px; box-sizing: border-box; font-family: var(--font-mono, monospace); font-size: var(--fs-xs); }
.hatch-rows td:nth-child(6) { width: 26%; }
.hatch-rows button { all: unset; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-text-muted); }
.hatch-rows button:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.hatch-help { font-size: var(--fs-xs); margin: var(--sp-3) 0 0; }

/* FILL group: the fill-layers button and its panel */
.pb-fill-simple { display: inline-flex; align-items: center; gap: 6px; }
.pb-fill-simple[hidden], .pb-layers[hidden] { display: none; }
.pb-layers-btn { all: unset; display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 4px; border-radius: var(--r-sm); cursor: default; font-size: var(--fs-sm); }
.pb-layers-btn:hover { background: var(--c-surface-2); }
.pb-layers-swatch { display: inline-flex; }
.pb-layers-text { min-width: 44px; }
.pb-layers-pop { width: 420px; }
.pl-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pl-title { flex: 1; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); }
.pl-list { display: flex; flex-direction: column; gap: 3px; }
.pl-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.pl-chip { all: unset; box-sizing: border-box; width: 24px; height: 20px; flex: none; border: 1px solid rgba(0,0,0,.35); border-radius: var(--r-sm); cursor: default; }
.pl-chip[aria-expanded="true"] { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.pl-palette { display: flex; align-items: center; gap: 10px; padding: 6px; margin: -2px 0 2px; border: 1px solid var(--c-border); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--c-bg); }
.pl-grid { grid-template-columns: repeat(12, 16px); gap: 3px; }
.pl-grid .pb-cell { width: 16px; height: 16px; }
.pl-kind { width: 150px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.pl-pattern { width: 96px; height: 20px; font-size: var(--fs-sm); }
.pl-scale { width: 44px !important; }
.pl-op { width: 70px; accent-color: var(--c-accent); }
.pl-op-val { width: 30px; text-align: right; font-size: var(--fs-xs); color: var(--c-text-muted); }
.pl-btn { all: unset; width: 18px; height: 18px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--c-text-muted); font-size: var(--fs-sm); }
.pl-btn:hover:not(:disabled) { background: var(--c-surface-2); color: var(--c-text); }
.pl-btn:disabled { opacity: .3; }
.pl-empty { padding: 8px 4px; font-size: var(--fs-sm); color: var(--c-text-muted); }
.pl-note { margin: 6px 2px 0; font-size: var(--fs-xs); color: var(--c-text-muted); }

/* Tool Chest > Recent: a ✕ on each tile (shown on hover) removes it */
.chest-recent .chest-tile { position: relative; }
.chest-remove { position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; display: grid; place-items: center;
  font-size: 9px; border-radius: var(--r-sm); color: var(--c-text-muted); background: var(--c-bg); border: 1px solid var(--c-border); opacity: 0; }
.chest-tile:hover .chest-remove, .chest-tile:focus-visible .chest-remove { opacity: 1; }
.chest-remove:hover { color: var(--c-text); background: var(--c-surface-2); }

/* Sheet names from a box (dialog) */
#sheetNamesDialog { width: 420px; }
.sn-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sn-read { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.sn-read.none { color: var(--c-text-muted); font-style: italic; }
.sheet-tools-btn { margin-left: auto; width: 22px; height: 22px; }

/* Sheets panel: page tools bar, picked sheets, dragging */
.sheet-picked { min-width: 0; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-xs); color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-list { position: relative; }
/* The floating scroll pill (panels/pill-scroll.js) instead of the browser's scrollbar */
.pill-scrolled { scrollbar-width: none; }
.pill-scrolled::-webkit-scrollbar { display: none; }
.scroll-pill { position: absolute; right: 4px; z-index: 3; width: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--c-text) 30%, transparent); transition: width .15s ease, right .15s ease, background-color .15s ease; }
.scroll-pill:hover, .scroll-pill.dragging { right: 3px; width: 8px; background: color-mix(in srgb, var(--c-text) 50%, transparent); }
.scroll-pill[hidden] { display: none; }
.sheet-item.picked { background: var(--c-accent-soft); }
.sheet-item.picked .thumb-box { outline-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
.sheet-item.current.picked .thumb-box { outline-color: var(--c-accent); }
.sheet-item.dragging { opacity: .4; }
.sheet-drop-line { position: absolute; left: var(--sp-3); right: var(--sp-3); height: 3px; border-radius: 2px; background: var(--c-accent); pointer-events: none; z-index: 2; box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.sheet-drop-line[hidden] { display: none; }
.sheet-drag-tag { position: fixed; top: -100px; left: -100px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--c-accent); color: #000; font-size: var(--fs-sm); font-weight: 600; }
body.dragging-sheets, body.dragging-sheets * { cursor: grabbing !important; user-select: none; }
.sheet-drag-tag { top: 0; left: 0; z-index: 100; pointer-events: none; box-shadow: var(--shadow-pop); }

/* After dropping a PDF: Add / Open in a new tab / Cancel, on one line */
#dropDialog { width: 460px; }
#dropDialog footer .btn { white-space: nowrap; }

/* Over the top of the drawing: the tab strip hanging from the toolbar, then a row of islands (Properties bar,
   overlay bar) side by side, wrapping if needed. Only the strip and the islands catch clicks; the rest lets them
   through to the drawing. */
.islands { --tab-h: 26px; --tab-t: 6px; --tab-r: calc(var(--tab-h) / 2); --tab-R: calc(var(--tab-r) + var(--tab-t)); /* see the tabs below */
  --tab-x: calc(2px + var(--tab-R)); /* where the first tab starts: the strip's 2px margin + its padding */
  grid-area: canvas; align-self: start; position: relative; z-index: 7; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; padding: 0 6px; pointer-events: none; }
.island-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; max-width: 100%; margin-top: 6px;
  padding-left: var(--tab-x); } /* the settings bar's left edge lines up with the first tab's */
/* The settings bar: centred at the bottom of the drawing (above the Markups List / status bar) */
.bottom-islands { grid-area: canvas; align-self: end; justify-self: center; position: relative; z-index: 10; min-width: 0; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px 14px; pointer-events: none; }
.bottom-islands .toast { pointer-events: auto; max-width: min(560px, 100%); }
.bottom-islands .toast[hidden] { display: none; }
.island { pointer-events: auto; max-width: 100%; min-width: 0; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-pop); }
.island[hidden] { display: none; }

/* Document tabs: one per open PDF (icon, name, unsaved dot, ×). No band behind them:
   - the selected tab IS part of the toolbar: same colour, hanging down from it (covering its bottom line), with
     curved corners where it meets the toolbar (::before / ::after). It's the only piece of toolbar over the drawing.
   - the other tabs are floating glass pills right over the drawing.
   Only the tabs catch clicks; the space between them lets clicks through to the drawing. */
/* Sizes follow the bending rule R = r + t, so the curves are concentric and every gap is equal:
     t = the gap: above each pill (to the toolbar), beside it (to the selected tab) and between pills;
     r = a pill's end radius (half its height);
     R = r + t = the flare where the selected tab meets the toolbar. A pill's rounded end sits inside the
         flare, sharing its centre, so the gap stays t all the way round. The selected tab reaches down to the
         pills' bottom edge (t + pill height) and its bottom corners are r. */
.tabstrip {
  position: relative; pointer-events: none; max-width: 100%; margin: -1px 0 -14px 2px; padding: 0 var(--tab-R) 14px;
  /* the 14px below (taken back by the negative margin) is room for the pills' shadows: the strip scrolls sideways
     when there are many tabs, which makes the browser clip anything sticking out of it */
  gap: var(--tab-t); align-items: flex-start; background: transparent; border: 0; overflow: visible; }
.tabstrip .tab { position: relative; pointer-events: auto; height: var(--tab-h); margin-top: var(--tab-t); padding: 0 5px 0 10px; gap: 6px;
  border: 0; border-radius: var(--tab-r); color: var(--c-text-muted);
  background: var(--mat-island, var(--c-bg)); box-shadow: var(--shadow-pill, var(--shadow-pop));
  -webkit-backdrop-filter: var(--mat-blur, none); backdrop-filter: var(--mat-blur, none);
  transition: background-color .15s ease, color .15s ease; }
.tabstrip .tab:hover { color: var(--c-text); }
.tabstrip .tab[aria-selected="true"] { height: calc(var(--tab-t) + var(--tab-h)); margin-top: 0; padding-top: var(--tab-t); color: var(--c-text);
  background: var(--c-chrome); border-radius: 0 0 var(--tab-r) var(--tab-r); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tabstrip .tab[aria-selected="true"]::before, .tabstrip .tab[aria-selected="true"]::after {
  content: ""; position: absolute; top: 0; width: var(--tab-R); height: var(--tab-R); pointer-events: none; }
.tabstrip .tab[aria-selected="true"]::before { left: calc(-1 * var(--tab-R));
  background: radial-gradient(circle at 0 100%, transparent calc(var(--tab-R) - .5px), var(--c-chrome) var(--tab-R)); }
.tabstrip .tab[aria-selected="true"]::after { right: calc(-1 * var(--tab-R));
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--tab-R) - .5px), var(--c-chrome) var(--tab-R)); }
.tabstrip .tab-icon { width: 13px; height: 13px; flex: none; opacity: .75; }
.tabstrip .tab-close { border-radius: 999px; margin-right: 0; }
.tabstrip .tab.dragging { box-shadow: var(--shadow-pop); }
.tabstrip:has(.empty-tab) { display: none; }
.tabstrip .tab-drop-marker { bottom: 14px; } /* only as tall as the tabs, not the shadow room below them */
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs .tab { flex: none; max-width: 240px; cursor: default; }
.tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .dirty[hidden] { display: none; }
.tab-close { width: 16px; height: 16px; margin-right: -6px; display: grid; place-items: center; border-radius: var(--r-sm); font-size: 13px; line-height: 1; color: var(--c-text-muted); opacity: .6; }
.tab:hover .tab-close, .tab[aria-selected="true"] .tab-close { opacity: 1; }
.tab-close:hover { background: var(--c-surface-2); color: var(--c-text); }
.tab.dragging { position: relative; z-index: 3; background: var(--c-bg); color: var(--c-text); border-color: var(--c-accent); box-shadow: var(--shadow-pop); }
.tab-drop-marker { position: absolute; top: 3px; bottom: 0; width: 3px; border-radius: 2px; background: var(--c-accent); pointer-events: none; }
.tabs { position: relative; }
body.dragging-tab, body.dragging-tab * { cursor: grabbing !important; user-select: none; }

/* Check set / Sort set (panels/setcheck-dialog.js) */
.setcheck-dialog { width: 460px; max-width: calc(100vw - 32px); }
.setcheck-dialog header { display: flex; align-items: baseline; gap: 10px; }
.sc-sum { font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-muted); }
.setcheck-dialog .body { display: grid; gap: 14px; max-height: min(64vh, 560px); overflow: auto; }
.sc-status { display: flex; gap: 9px; align-items: flex-start; padding: 8px 11px; border-radius: 8px; background: var(--c-surface); font-size: var(--fs-sm); line-height: 1.4; }
.sc-status.ok { background: color-mix(in srgb, #34c759 14%, transparent); }
.sc-status.warn { background: var(--c-accent-soft); }
.sc-status b { font-weight: 600; }
.sc-status { flex-wrap: wrap; }
.sc-status > span:nth-child(2) { flex: 1; }
.sc-sub { margin: -2px 0 6px; font-size: var(--fs-xs); color: var(--c-text-muted); }
.sc-indexinfo { margin: 0 0 8px; font-size: var(--fs-sm); line-height: 1.4; }
.sc-indexinfo b { font-weight: 600; }
.sc-link2 { margin-left: 10px; }
.sc-link + .sc-link2 { margin-left: 10px; }
.sc-sortby { display: flex; gap: 14px; align-items: center; font-size: var(--fs-sm); }
.sc-sortby > span { color: var(--c-text-muted); }
.sc-sortby label { display: flex; gap: 5px; align-items: center; }
.sc-sortby input:disabled + * , .sc-sortby label:has(input:disabled) { opacity: .5; }
.sc-sec[hidden] { display: none; }
.sc-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.sc-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sc-link { margin-left: auto; padding: 0 2px; border: 0; background: none; font: inherit; font-size: var(--fs-sm); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--c-accent-strong); cursor: pointer; }
.sc-order { display: grid; gap: 3px; touch-action: none; }
.sc-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; background: var(--c-surface); font-size: var(--fs-sm); cursor: grab; user-select: none; }
.sc-row.dragging { opacity: .45; cursor: grabbing; }
.sc-row.drop-before { box-shadow: inset 0 2px 0 var(--c-accent); }
.sc-row.drop-after { box-shadow: inset 0 -2px 0 var(--c-accent); }
.sc-grip { color: var(--c-text-muted); font-size: 10px; letter-spacing: -2px; }
.sc-k { width: 18px; text-align: center; padding: 1px 0; border-radius: 3px; background: var(--c-bg); box-shadow: 0 0 0 .5px var(--c-border); font: 600 var(--fs-xs) var(--font-mono); }
.sc-n { flex: 1; }
.sc-c { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.sc-issues { display: grid; gap: 2px; }
.sc-issue { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 6px; font-size: var(--fs-sm); line-height: 1.35; }
.sc-issue:hover { background: var(--c-surface); }
.sc-issue small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.sc-issue .sc-link { margin: 0; }
.sc-ico { width: 16px; text-align: center; }
.setcheck-dialog .mono { font-family: var(--font-mono); }
.sc-opt { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.35; }
.sc-opt input { margin-top: 2px; }
.sc-opt small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.sc-note { flex: 1; align-self: center; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* Discipline headings in the Sheets panel (thumbnails.js drawHeadings; on/off in Check set or the ⋯ menu) */
.sheet-group { display: flex; justify-content: space-between; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3) 0;
  border-top: .5px solid color-mix(in srgb, var(--c-text) 18%, transparent);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.sheet-group.first { margin-top: 0; border-top: 0; padding-top: 0; }
.sheet-group span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Sort preview (panels/sort-preview.js): Now | arrows | After sorting */
.sortprev-dialog { width: min(980px, calc(100vw - 32px)); }
.sp-body { max-height: min(72vh, 760px); overflow: auto; padding-top: 8px; }
.sp-heads, .sp-grid { display: grid; grid-template-columns: 1fr 96px 1fr; }
.sp-heads { position: sticky; top: -8px; z-index: 1; padding: 6px 0; background: var(--c-bg); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.sp-grid { position: relative; align-items: start; }
.sp-col { display: grid; gap: 8px; }
.sp-arrows { width: 100%; height: 100%; align-self: stretch; overflow: visible; }
.sp-arrow { fill: none; stroke: color-mix(in srgb, var(--c-text) 22%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.sp-arrow.moved { stroke: #d97706; stroke-width: 2; stroke-dasharray: none; }
.sp-block { padding: 7px 8px 8px; border-radius: 8px; background: var(--c-surface); box-shadow: inset 0 0 0 1px transparent; }
.sp-block.moved { box-shadow: inset 0 0 0 1.5px #d97706; background: color-mix(in srgb, #d97706 8%, var(--c-surface)); }
.sp-block:not(.moved) { opacity: .72; }
.sp-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: var(--fs-sm); }
.sp-label b { font-family: var(--font-mono); font-weight: 600; }
.sp-label span { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: nowrap; }
.sp-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px 5px; }
.sp-mini { display: grid; gap: 2px; justify-items: center; min-width: 0; }
.sp-mini canvas, .sp-mini i { width: 100%; aspect-ratio: 36 / 24; height: auto; background: #fff; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); }
.sp-mini canvas { aspect-ratio: auto; }
.sp-mini span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 9px/11px var(--font-mono); color: var(--c-text-muted); }
.sp-block.moved .sp-mini span { color: var(--c-text); }
.sp-key { display: inline-block; width: 16px; height: 0; margin: 0 4px 3px 0; border-top: 1px dashed color-mix(in srgb, var(--c-text) 35%, transparent); vertical-align: middle; }
.sp-key.moved { border-top: 2px solid #d97706; margin-left: 0; }
.sp-key + * { margin-right: 8px; }

/* Find (panels/find.js): a glass island over the drawing, and the highlights on the sheet */
.find-bar.island { background: var(--mat-island); display: flex; flex-direction: column; min-width: min(560px, 100%); }
.fb-row { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 10px; }
.fb-ico { width: 14px; height: 14px; color: var(--c-text-muted); flex: none; }
.fb-input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; font-size: var(--fs-base); color: var(--c-text); padding: 4px 4px; outline: none; }
.fb-input::placeholder { color: var(--c-text-muted); }
.fb-count { font-size: var(--fs-xs); color: var(--c-text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 0 4px; }
.fb-btn { flex: none; }
.fb-opt { display: flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 5px; font-size: var(--fs-xs); color: var(--c-text-muted); cursor: default; user-select: none; }
.fb-opt:has(input:checked) { color: var(--c-text); background: var(--mat-fill, var(--c-surface-2)); }
.fb-opt input { margin: 0; }
.fb-results { max-height: min(50vh, 420px); overflow: auto; padding: 2px 6px 8px; border-top: .5px solid color-mix(in srgb, var(--c-text) 15%, transparent); }
.fb-results[hidden] { display: none; }
.fr-sheet { display: flex; justify-content: space-between; padding: 8px 6px 3px; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text-muted); }
.fr-sheet span:first-child { font-family: var(--font-mono); }
.fr-hit { all: unset; display: block; box-sizing: border-box; width: 100%; padding: 3px 6px; border-radius: 5px; font-size: var(--fs-sm); color: var(--c-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.fr-hit b { color: var(--c-text); font-weight: 600; background: color-mix(in srgb, var(--c-accent) 30%, transparent); border-radius: 2px; }
.fr-hit:hover { background: var(--mat-fill, var(--c-surface-2)); }
.fr-hit.current { background: var(--c-accent-soft); color: var(--c-text); }
.fr-none { margin: 6px; font-size: var(--fs-xs); color: var(--c-text-muted); }
#overlay .find-hit { fill: rgba(245, 158, 11, .28); stroke: #d97706; stroke-width: 1; }
#overlay .find-hit.current { fill: rgba(245, 158, 11, .45); stroke-width: 2; }

/* Sheet links (panels/links.js): the hovered link and where it goes; the Back button */
#overlay .sheet-link { fill: rgba(245, 158, 11, .14); stroke: #d97706; stroke-width: 1.25; }
#overlay .sheet-link-tag { fill: rgba(29, 29, 31, .9); }
#overlay .sheet-link-label { fill: #fff; font: 600 11px var(--font-mono); }
.link-back.island { all: unset; pointer-events: auto; display: inline-flex; align-items: center; gap: 2px; padding: 6px 12px; border-radius: 999px;
  background: var(--mat-island); box-shadow: var(--shadow-island); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); cursor: default; }
.link-back.island:hover { background: color-mix(in srgb, var(--c-accent) 18%, var(--mat-island)); }
.link-back.island[hidden] { display: none; }
.link-back span { font-family: var(--font-mono); }

/* Reduce file size (panels/reduce-dialog.js) */
.reduce-dialog { width: 440px; max-width: calc(100vw - 32px); }
.rd-opt { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0; font-size: var(--fs-sm); line-height: 1.4; }
.rd-opt input[type="checkbox"] { margin-top: 2px; }
.rd-opt b { font-weight: 600; }
.rd-opt small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.rd-dpi { display: inline-block; width: auto; padding: 0 18px 0 6px; height: 20px; font-size: var(--fs-xs); vertical-align: baseline; }
.rd-result { min-height: 18px; margin: 12px 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.rd-result.done { padding: 9px 11px; border-radius: 8px; background: color-mix(in srgb, #34c759 14%, transparent); color: var(--c-text); }
.rd-result.done b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rd-result small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); margin-top: 2px; }

/* Image editor (panels/image-editor.js): over everything under the menu bar while it's open */
.imgedit { grid-row: 2 / -1; grid-column: 1 / -1; z-index: 9; display: flex; flex-direction: column; min-height: 0; background: var(--c-canvas); }
.imgedit[hidden] { display: none; }
.ie-bar { display: flex; align-items: center; gap: 2px; height: var(--size-toolbar); padding: 0 8px; background: var(--c-chrome, var(--c-surface)); border-bottom: 1px solid var(--c-border); flex: none; }
.ie-bar .sep { width: 1px; height: 16px; margin: 0 6px; background: var(--c-border); }
.ie-bar .spacer { flex: 1; }
.ie-bar .btn { margin-left: 6px; }
.ie-name { font-size: var(--fs-sm); font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ie-size { margin-left: 8px; font: 500 var(--fs-xs) var(--font-mono); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ie-main { flex: 1; min-height: 0; display: flex; }
.ie-view { position: relative; flex: 1; min-width: 0; overflow: auto; display: grid; }
.ie-wrap { position: relative; margin: auto; padding: 32px; box-sizing: content-box; }
.ie-canvas { display: block; box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
  background: repeating-conic-gradient(#d9d9de 0% 25%, #fff 0% 50%) 50% / 16px 16px; } /* checkerboard: see-through areas */
.ie-view.cropping .ie-canvas { cursor: crosshair; }
.ie-cropbox { position: absolute; border: 1.5px solid #fff; outline: 1px solid rgba(0, 0, 0, .55); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); cursor: move; pointer-events: none; }
.ie-cropbox::before, .ie-cropbox::after { content: ""; position: absolute; inset: 33.3% 0; border-top: 1px solid rgba(255, 255, 255, .5); border-bottom: 1px solid rgba(255, 255, 255, .5); }
.ie-cropbox::after { inset: 0 33.3%; border: 0; border-left: 1px solid rgba(255, 255, 255, .5); border-right: 1px solid rgba(255, 255, 255, .5); }
.ie-cropbar.island { position: sticky; bottom: 14px; justify-self: center; align-self: end; display: flex; gap: 6px; align-items: center; margin-top: -60px; padding: 6px 8px 6px 14px;
  background: var(--mat-island); font-size: var(--fs-sm); z-index: 2; }
.ie-panel { width: 250px; flex: none; padding: 12px 14px; overflow: auto; background: var(--c-surface); border-left: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 12px; }
.ie-panel[hidden] { display: none; }
.ie-h { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-text-muted); }
.ie-slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: var(--fs-sm); }
.ie-slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--c-accent); }
.ie-slider output { font: 500 var(--fs-xs) var(--font-mono); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.ie-check { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.ie-note { margin: auto 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); }
.ie-q { display: flex; gap: 8px; align-items: center; }
.ie-q input { flex: 1; accent-color: var(--c-accent); }
.ie-q output { font: 500 var(--fs-xs) var(--font-mono); min-width: 24px; }
.ie-bgbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.ie-bgbtns .btn[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent-strong); box-shadow: inset 0 0 0 1px var(--c-accent); }
.ie-tip { margin: -4px 0 0; font-size: var(--fs-xs); color: var(--c-text-muted); line-height: 1.4; }
.ie-view.alpha .ie-canvas { cursor: crosshair; }
.sc-issue.info { opacity: .72; }

/* Snapshot (panels/snapshot.js) */
#overlay .snap-box { fill: rgba(245, 158, 11, .06); stroke: #d97706; stroke-width: 1.5; stroke-dasharray: 6 4; }
.snap-bar.island { background: var(--mat-island); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; }
.snap-size { font: 600 var(--fs-sm) var(--font-mono); font-variant-numeric: tabular-nums; margin-right: 4px; }
.snap-opt { white-space: nowrap; }
.snap-dpi { width: auto; height: 24px; font-size: var(--fs-xs); }

/* "+ arrow" on a text box (js/panels/leader-hint.js): a small round glass button at the box's corner */
.leader-hint { position: absolute; z-index: 6; width: 24px; height: 24px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--c-border); border-radius: 50%; background: var(--mat-island, var(--c-bg)); color: #d97706;
  box-shadow: var(--shadow-pill, var(--shadow-pop)); -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur);
  cursor: pointer; animation: rr-pop-in .14s ease; }
.leader-hint[hidden] { display: none; }
.leader-hint:hover { background: #d97706; color: #fff; border-color: #d97706; }
.leader-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.stage.placing-leader, .stage.placing-leader * { cursor: crosshair !important; }

/* A peek at a sheet link's detail (js/panels/link-preview.js): a glass card beside the mouse */
.link-preview { position: absolute; z-index: 7; pointer-events: none; padding: 6px; border: 1px solid var(--c-border); border-radius: 10px;
  background: var(--mat-island, var(--c-bg)); box-shadow: var(--shadow-island, var(--shadow-pop));
  -webkit-backdrop-filter: var(--mat-blur); backdrop-filter: var(--mat-blur); animation: rr-pop-in .14s ease; max-width: 320px; }
.link-preview[hidden] { display: none; }
.link-preview canvas { display: block; margin: 0 auto; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.link-preview .lp-label { margin-top: 5px; padding: 0 2px; font-size: var(--fs-sm); color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Print (js/panels/print-dialog.js) */
.print-dialog { width: min(720px, calc(100vw - 32px)); }
.print-dialog .pr-quick { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--c-text) 8%, transparent); margin-bottom: 12px; }
.print-dialog .pr-quick button { flex: 1; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--c-text-muted); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
.print-dialog .pr-quick button[aria-pressed="true"] { color: var(--c-text); background: var(--seg-on, var(--c-bg)); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06); }
.print-dialog .pr-cols { display: grid; grid-template-columns: 1fr 336px; gap: 16px; align-items: start; }
@media (max-width: 640px) { .print-dialog .pr-cols { grid-template-columns: 1fr; } }
.print-dialog .pr-settings .field { margin-bottom: 8px; }
.print-dialog .pr-settings .field[hidden] { display: none; }
.print-dialog .pr-check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); margin: 6px 0; cursor: pointer; }
.print-dialog .pr-check input { margin: 0; accent-color: var(--c-accent); }
.print-dialog .pr-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border-radius: 10px; background: var(--c-canvas); }
.print-dialog .pr-nav { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--c-text-muted); min-height: 22px; }
.print-dialog .pr-nav .tool:disabled { opacity: .3; }
.print-dialog .pr-readout { align-self: stretch; font-size: var(--fs-sm); line-height: 1.4; }
.print-dialog .pr-readout p { margin: 4px 0; }
.print-dialog .pr-good { color: var(--c-text); }
.print-dialog .pr-good::before { content: "✓ "; color: #1e8e3e; font-weight: 700; }
.print-dialog .pr-warn::before { content: "! "; color: #d97706; font-weight: 700; }
.print-dialog .pr-bad { color: #d93025; }
.print-dialog .pr-muted { color: var(--c-text-muted); }
.print-dialog footer .spacer { flex: 1; }

/* Night mode for the drawings (#nightBtn in main.js, next to Appearance; the class is on .app): flip light and dark, then turn the colours back round so a
   red cloud stays red; .92 keeps the paper a soft dark grey and the lines a soft white, like CAD's dark background.
   Only the sheet and the markups drawn on it: islands, panels and prints are untouched. */
.app.night .stage #sheet, .app.night .stage #sharp, .app.night .stage #overlay,
.app.night #sheetList canvas, .app.night .link-preview canvas, .app.night .sp-mini canvas { filter: invert(.92) hue-rotate(180deg); }
.app.night .thumb-box { background: #141414; } /* a thumbnail still drawing: the dark paper already (white through the filter) */