/* ==========================================================================
   Plot Device — portfolio (reidpetro.com) visual language
   Chrome is dark and square. The drawing surface stays LIGHT and printable.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-latin-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #000000;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: #0a0a0a;
  --surface-3: #121212;
  --line: #2a2a2a;
  --line-soft: rgba(255, 255, 255, 0.07);

  --text: #f2f2f2;
  --text-bright: #ffffff;
  --muted: #b4b4b4;
  --faint: #8c8c8c;

  --accent: #7ecfdf;
  --accent-soft: rgba(126, 207, 223, 0.14);

  /* Drawing surface — light on purpose. Do not darken. */
  --paper: #f8f8f4;
  --grid-minor: #dfe1dd;
  --grid-major: #bfc3be;
  --accent-paper: #17697a;
  --wall: #4a4d4e;
  --window: #929696;
  --door: #b4937e;

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------- reset -- */
* { box-sizing: border-box; }
html, body {
  width: 100%; height: 100%; margin: 0; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-weight: 500;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .3; cursor: default; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.hidden { display: none !important; }

/* Scrollbars in the dark chrome */
.asset-grid, .inspector-form, .folder-pane, .project-pane {
  scrollbar-width: thin;
  scrollbar-color: #333333 transparent;
}
.asset-grid::-webkit-scrollbar,
.inspector-form::-webkit-scrollbar,
.folder-pane::-webkit-scrollbar,
.project-pane::-webkit-scrollbar { width: 10px; height: 10px; }
.asset-grid::-webkit-scrollbar-track,
.inspector-form::-webkit-scrollbar-track,
.folder-pane::-webkit-scrollbar-track,
.project-pane::-webkit-scrollbar-track { background: transparent; }
.asset-grid::-webkit-scrollbar-thumb,
.inspector-form::-webkit-scrollbar-thumb,
.folder-pane::-webkit-scrollbar-thumb,
.project-pane::-webkit-scrollbar-thumb {
  background: #2f2f2f; border: 3px solid transparent; background-clip: padding-box;
}
.asset-grid::-webkit-scrollbar-thumb:hover,
.inspector-form::-webkit-scrollbar-thumb:hover,
.folder-pane::-webkit-scrollbar-thumb:hover,
.project-pane::-webkit-scrollbar-thumb:hover { background: #4a4a4a; background-clip: padding-box; }

/* -------------------------------------------------------------- shell -- */
.app-shell { height: 100%; display: grid; grid-template-rows: 64px minmax(0, 1fr); }

.topbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 18px; padding: 0 18px;
  background: var(--bg); color: var(--text);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.project-name {
  width: min(240px, 24vw); padding: 7px 9px;
  border: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  transition: border-color 150ms ease, background 150ms ease;
}
.project-name:hover { border-color: var(--line); }
.project-name:focus { outline: none; border-color: #555555; background: var(--surface); color: var(--text-bright); }
.save-state {
  color: var(--faint); font-size: 10px; text-transform: uppercase;
  letter-spacing: .16em; white-space: nowrap;
}

/* Sits with the plot name now rather than in a column of its own, so it reads as
   a mark next to the name instead of a centred banner. */
.branding { display: grid; gap: 4px; padding-left: 12px; border-left: 1px solid var(--line); }
.site-title { font-size: 13px; font-weight: 700; letter-spacing: .18em; opacity: 1; }
.site-tagline { font-size: 10px; letter-spacing: .35em; opacity: 1; color: var(--muted); }
/* Sits on the title's baseline but reads as a footnote to it, so the wordmark
   keeps its weight and the version never competes with the plot name. */
.site-version { margin-left: 8px; font-size: 9px; font-weight: 600; letter-spacing: .12em; color: var(--faint); }

/* Production readout, at the right of the header against the panel toggles rather
   than floating over the drawing. Title over credits rather than side by side: the
   row is short on width and long on height, so stacking leaves the credit run the
   full width instead of whatever the title did not take. It is the only thing in
   the row that flexes, so it takes the slack and gives it back — the buttons never
   move as a crew list grows, and both lines ellipsize against them. */
.plot-meta-bar {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  text-align: right;
}
/* Beats the display:flex above — [hidden] alone would lose to it. */
.plot-meta-bar[hidden] { display: none; }
.plot-meta-bar .pm-title {
  max-width: 100%; color: var(--text); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plot-meta-bar .pm-line {
  max-width: 100%; color: var(--faint); font-family: var(--mono); font-size: 9px;
  letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topbar-actions { justify-self: stretch; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.toolbar-divider { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }

/* ------------------------------------------------------------ buttons -- */
.button {
  border-radius: 0; text-transform: uppercase; white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.button.primary {
  background: #ffffff; color: #0a0a0a; border: 1px solid #ffffff;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; padding: 12px 28px; line-height: 1;
}
.button.primary:hover:not(:disabled) { background: #cccccc; border-color: #cccccc; }
.button.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-size: 10px; font-weight: 600; letter-spacing: .1em; padding: 6px 14px; line-height: 1.6;
}
.button.ghost:hover:not(:disabled) { color: var(--text-bright); border-color: #555555; }
.button.danger {
  background: transparent; border: 1px solid #4a2521; color: #cf7b6c;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; padding: 6px 14px; line-height: 1.6;
}
.button.danger:hover:not(:disabled) { color: #ffffff; border-color: #8a3b31; background: rgba(154, 58, 46, .18); }

.icon-button {
  width: 32px; height: 32px; padding: 0; border-radius: 0;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
/* Some .icon-buttons hold an inline SVG (the two panel toggles), others a text
   glyph — the SVGs must not inherit a solid fill. */
.icon-button svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-button:hover:not(:disabled) { color: var(--text-bright); border-color: #555555; background: var(--surface); }
.icon-button.is-off { color: var(--muted); border-color: #1b1b1b; opacity: .75; }
.icon-button.is-off:hover:not(:disabled) { color: var(--muted); border-color: var(--line); opacity: 1; }

/* ----------------------------------------------------------- workspace -- */
.workspace {
  min-height: 0; display: grid;
  grid-template-columns: 76px 300px minmax(320px, 1fr) 280px;
}
.workspace.library-collapsed { grid-template-columns: 76px 0 minmax(320px, 1fr) 280px; }
.workspace.library-collapsed .asset-panel { visibility: hidden; overflow: hidden; }
.workspace.inspector-collapsed { grid-template-columns: 76px 300px minmax(320px, 1fr) 0; }
.workspace.inspector-collapsed .inspector-panel { visibility: hidden; overflow: hidden; }
.workspace.library-collapsed.inspector-collapsed { grid-template-columns: 76px 0 minmax(320px, 1fr) 0; }

/* ----------------------------------------------------------- tool rail -- */
.tool-rail {
  background: var(--surface-2); border-right: 1px solid var(--line);
  padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; z-index: 3;
}
.tool-button {
  position: relative; height: 58px;
  border: 1px solid transparent; border-radius: 0; background: transparent;
  color: var(--muted); display: grid; place-items: center; align-content: center; gap: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.tool-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool-button[data-tool="select"] svg { fill: currentColor; stroke: none; }
.tool-button:hover { color: var(--text); background: var(--surface); border-color: var(--line); }
.tool-button.active { color: var(--accent); background: var(--accent-soft); border-color: rgba(126, 207, 223, .34); }
.tool-button kbd {
  position: absolute; top: 4px; right: 5px;
  min-width: 0; padding: 1px 3px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--faint);
  font-family: var(--mono); font-size: 10px; line-height: 1.2;
}
.tool-button:hover kbd { color: var(--muted); }
.tool-button.active kbd { color: var(--accent); border-color: rgba(126, 207, 223, .3); }
.rail-divider { height: 1px; background: var(--line); margin: 8px 4px; }
.rail-spacer { flex: 1; }

/* -------------------------------------------------------------- panels -- */
.asset-panel, .inspector-panel { background: var(--bg); min-width: 0; min-height: 0; z-index: 2; display: flex; flex-direction: column; }
.asset-panel { border-right: 1px solid var(--line); }
.inspector-panel { border-left: 1px solid var(--line); }

.panel-heading {
  min-height: 64px; padding: 14px 16px 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--line);
}
.panel-heading h1, .panel-heading h2 {
  margin: 3px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .03em; color: var(--text);
}
.eyebrow {
  margin: 0; color: var(--muted);
  font-size: 10px; font-weight: 700; line-height: 1.4;
  text-transform: uppercase; letter-spacing: .22em;
}
.count-pill {
  padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font-family: var(--mono); font-size: 10px; line-height: 1.4;
}

/* -------------------------------------------------------------- search -- */
.search-box {
  margin: 12px 14px 8px; min-height: 38px;
  display: flex; align-items: center; gap: 9px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 0; background: var(--surface);
  transition: border-color 150ms ease;
}
.search-box:focus-within { border-color: #555555; }
.search-box svg, .search-icon {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: var(--muted); stroke-width: 1.7; stroke-linecap: round;
}
.search-box input {
  min-width: 0; flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--text); font-size: 11px; letter-spacing: .02em;
}
.search-box input::placeholder { color: var(--faint); }
.search-clear {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 0; background: transparent; color: var(--muted);
  font-size: 16px; line-height: 1; transition: color 150ms ease;
}
.search-clear:hover { color: var(--text-bright); }
.search-clear[hidden] { display: none; }

.search-scope {
  margin: 0 14px 8px; color: var(--accent);
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; line-height: 1.5;
}
.search-scope[hidden] { display: none; }

/* ------------------------------------------------------------ category -- */
/* Wraps into a fixed grid so every category is visible at once — no
   horizontal scrolling to hunt for one. */
.category-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 10px;
  transition: opacity 180ms ease;
}
.category-tabs.is-inert { opacity: .6; }
.category-tab {
  flex: 0 0 auto; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--muted); font-size: 10px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: .1em;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.category-tab:hover { color: var(--text-bright); border-color: #555555; }
.category-tab.active { background: var(--text); border-color: var(--text); color: #0a0a0a; }

/* -------------------------------------------------------- asset library -- */
.asset-grid {
  flex: 1; min-height: 0; overflow: auto; padding: 0 12px 14px;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 8px;
  align-content: start;
}
.asset-group-head {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 1;
  height: auto; margin: 10px 0 6px; padding: 7px 2px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .2em;
}
.asset-group-head:first-child { margin-top: 0; }
.asset-card {
  min-width: 0; height: 132px; padding: 6px;
  border: 1px solid var(--line); border-radius: 0; background: var(--surface-2);
  display: grid; grid-template-rows: 62px auto; gap: 4px;
  text-align: left; color: var(--text); cursor: grab;
  transition: border-color 150ms ease, background 150ms ease;
}
.asset-card:hover { border-color: #555555; background: #101010; }
.asset-card:active { cursor: grabbing; }
/* LIGHT on purpose — the asset PNGs are dark line art. Do not darken. */
.asset-thumb {
  min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 3px;
  background-color: #f7f7f4;
  background-image:
    linear-gradient(45deg, #eceeea 25%, transparent 25%),
    linear-gradient(-45deg, #eceeea 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eceeea 75%),
    linear-gradient(-45deg, transparent 75%, #eceeea 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.asset-thumb img { max-width: 96%; max-height: 56px; object-fit: contain; }
.asset-card-name {
  font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-clamp: 2; overflow: hidden;
}
.asset-card-cat {
  display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.library-tip {
  margin: 0; padding: 10px 14px; border-top: 1px solid var(--line);
  color: var(--faint); font-size: 10px; line-height: 1.5;
}
.no-results { grid-column: 1 / -1; padding: 40px 12px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }

/* -------------------------------------------------------- canvas stage -- */
.canvas-stage {
  position: relative; overflow: hidden; min-width: 0; min-height: 0;
  background: var(--surface-3); box-shadow: inset 0 0 70px rgba(0, 0, 0, .7);
}
#plot-canvas { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
#plot-canvas.tool-select { cursor: default; }
#plot-canvas.tool-pan { cursor: grab; }
#plot-canvas.tool-wall, #plot-canvas.tool-window, #plot-canvas.tool-door, #plot-canvas.tool-measure { cursor: crosshair; }
#plot-canvas.tool-annotate { cursor: text; }
/* The photo tool is armed only while it is holding a picked image, and the copy
   cursor is the one that says "this drops something here". */
#plot-canvas.tool-photo { cursor: copy; }
/* Held space and the middle button pan from any tool, so they take the hand over
   whatever the tool asked for. Both rules sit after the tool ones deliberately:
   same specificity, so source order is what lets them win. */
#plot-canvas.is-pan-ready { cursor: grab; }
#plot-canvas.is-panning { cursor: grabbing; }
#items-layer > g { cursor: pointer; }
#items-layer > g.selected { filter: url(#selection-shadow); }
#items-layer > g.layer-locked { cursor: not-allowed; }
/* The paper is the printable document — it stays light. */
#paper { fill: var(--paper); }

/* Bottom left, in the corner the coordinate readout used to hold — it pairs with
   the zoom cluster opposite it and leaves the top of the drawing clear. */
.canvas-toolbar {
  position: absolute; bottom: 13px; left: 13px; z-index: 2;
  display: flex; align-items: center; height: 31px; padding: 0 12px; gap: 10px;
  border: 1px solid var(--line); border-radius: 0;
  background: rgba(10, 10, 10, .68); backdrop-filter: blur(12px);
  color: var(--muted); font-size: 10px; letter-spacing: .06em;
}
.snap-control { display: flex; align-items: center; gap: 8px; cursor: pointer; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.snap-control input { position: absolute; opacity: 0; pointer-events: none; }
.snap-control span { width: 26px; height: 14px; border-radius: 999px; background: #2a2a2a; position: relative; transition: background 150ms ease; }
.snap-control span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: #666666; transition: transform 150ms ease, background 150ms ease;
}
.snap-control input:checked + span { background: var(--accent); }
.snap-control input:checked + span::after { background: #0a0a0a; transform: translateX(12px); }
.snap-control input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; }

.zoom-controls {
  position: absolute; right: 13px; bottom: 13px; z-index: 2;
  display: grid; grid-template-columns: 30px 54px 30px; height: 31px;
  border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  background: rgba(10, 10, 10, .78); backdrop-filter: blur(12px);
}
.zoom-controls button {
  border: 0; border-right: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 15px; transition: background 150ms ease, color 150ms ease;
}
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls button:hover { color: var(--text-bright); background: var(--surface); }
.zoom-controls .zoom-value { font-family: var(--mono); font-size: 10px; }


/* North arrow. Sits in the right-hand gutter of the canvas,
   stacked above the zoom cluster (31px tall at bottom 13px) rather than in the
   corner it already occupies, and sharing that cluster's 116px width so the
   gutter keeps one edge.

   The arms redraw the Misc/Compass.png library asset as strokes rather than
   using the PNG: its N/E/W/S are baked into the artwork and would tilt onto
   their corners at the diagonal headings. Only north is labelled here, and it
   orbits to the heading while staying upright — so it is live text the arms
   rotate underneath. */
.compass-overlay {
  position: absolute; right: 13px; bottom: 56px; z-index: 2;
  width: 116px; height: 116px; padding: 12px; pointer-events: none;
  border: 1px solid var(--line); border-radius: 0;
  background: rgba(10, 10, 10, .78); backdrop-filter: blur(12px);
}
.compass-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* No transition on either half: the arms turn by `transform`, which animates,
   while the label moves by its x/y attributes, which do not — so easing the arms
   alone left the N snapping ahead of them. Both jump together instead. */
.compass-arms {
  fill: none; stroke: var(--muted); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  transform-box: view-box; transform-origin: 50px 50px;
}
.compass-north {
  fill: var(--text-bright); font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-anchor: middle; dominant-baseline: middle;
}

/* The sun path, drawn over the drawing and out past the edge of the paper.
 *
 * Amber throughout, because nothing else on the plot is: walls are graphite,
 * measurements and badges are slate, the measure tool is teal. A gaffer glancing
 * at the sheet should never have to work out whether a line is a truss or the
 * sun. Everything is sized in world units so it scales with the paper, and the
 * whole layer is inert to the pointer — it is a reading, not an object.
 *
 * Since the dial circumscribes the paper, most of its furniture lands on the
 * dark workspace rather than the light sheet, and every colour here has to hold
 * up on both. Hence a mid-to-bright amber for the strokes, and lettering that
 * carries a dark halo instead of the paper-coloured one a wall's measurement
 * uses — bright ink with a dark outline reads on either surface, where dark ink
 * with a light outline only reads on one.
 *
 * These rules are class-based on purpose: the PDF export clones the layer into
 * the off-screen print sheet, where an #id-scoped rule would not reach it. */
#sun-layer, #sun-now { pointer-events: none; }
/* The one part of the sun path that takes a pointer. Everything else in the two
   layers stays inert so the equipment under the dial is still selectable — and
   the handle is the only piece styled from here, because it never reaches the
   PDF. It is also the only piece that does not have to survive svg2pdf.js. */
.sun-handle { pointer-events: auto; cursor: grab; }
.sun-handle circle { fill: rgba(245, 166, 35, .16); stroke: #f0a01a; stroke-width: 4; }
.sun-handle path { fill: none; stroke: #f0a01a; stroke-width: 4; stroke-linecap: round; }
.sun-handle:hover circle { fill: rgba(245, 166, 35, .3); }
/* The sun and its shadow are handles too, and each moves the same one thing: the
   time of day. They are invisible until pointed at — the markers themselves are
   already drawn, and a permanent ring around each would clutter the reading — so
   the hover ring is the whole of the affordance. It takes the colour of the mark
   it surrounds, amber for the sun and grey for the shadow, so it reads as that
   marker waking up rather than as a third thing arriving. */
.sun-time-handle { pointer-events: auto; cursor: grab; }
.sun-time-handle circle { fill: transparent; stroke: none; }
.sun-time-handle:hover circle { fill: rgba(245, 166, 35, .16); stroke: #f0a01a; stroke-width: 3; }
.sun-time-handle[data-sun-time-handle="shadow"]:hover circle { fill: rgba(141, 151, 166, .2); stroke: #8d97a6; }
#plot-canvas.is-sun-dragging, #plot-canvas.is-sun-dragging .sun-handle,
#plot-canvas.is-sun-dragging .sun-time-handle { cursor: grabbing; }
/* Colour, size and weight ride on the elements as attributes (see SUN_INK); the
   screen only borrows the app's own mono face over the attribute's fallback. */
.sun-label { font-family: var(--mono); }

/* Empty state sits ON the light paper — keep its ink dark. */
.empty-state {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 290px; text-align: center; pointer-events: none;
  color: #626967; transition: opacity 200ms ease;
}
.empty-icon {
  margin: 0 auto 14px; width: 55px; height: 55px; display: grid; place-items: center;
  border: 1px solid #c6c9c4; background: rgba(243, 243, 239, .79); transform: rotate(45deg);
}
.empty-icon svg { width: 34px; height: 34px; transform: rotate(-45deg); fill: none; stroke: #848b88; stroke-width: 1.2; }
.empty-state h2 { margin: 0 0 8px; color: #4e5553; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.empty-state p { margin: 0; font-size: 11px; line-height: 1.6; }

/* ------------------------------------------- drawn ON the light paper -- */
.selection-box { fill: none; stroke: var(--accent-paper); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.group-box { fill: none; stroke: var(--accent-paper); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.marquee-box { fill: rgba(23, 105, 122, .12); stroke: var(--accent-paper); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.canvas-selection-box { fill: none; stroke: var(--accent-paper); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.canvas-resize-hit { stroke: transparent; stroke-width: 18; vector-effect: non-scaling-stroke; pointer-events: stroke; }
.canvas-resize-grip { fill: #f8f8f4; stroke: var(--accent-paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.canvas-resize-e, .canvas-resize-w { cursor: ew-resize; }
.canvas-resize-n, .canvas-resize-s { cursor: ns-resize; }
.canvas-resize-nw, .canvas-resize-se { cursor: nwse-resize; }
.canvas-resize-ne, .canvas-resize-sw { cursor: nesw-resize; }
.canvas-size-label {
  fill: var(--accent-paper); font-family: var(--mono); font-weight: 700;
  paint-order: stroke; stroke: #f8f8f4; stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}
.rotation-stem { stroke: var(--accent-paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
/* Photo corner grips. Same look as the canvas's own, and the same two diagonal
   cursors — they ride the photo's rotation, so on a turned photo the arrow is
   only ever approximately the direction the corner travels. */
.item-resize-grip { fill: #f8f8f4; stroke: var(--accent-paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.item-resize-nw, .item-resize-se { cursor: nwse-resize; }
.item-resize-ne, .item-resize-sw { cursor: nesw-resize; }
.rotation-handle { fill: #f8f8f4; stroke: var(--accent-paper); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.rotation-handle:active { cursor: grabbing; }
.endpoint-handle { fill: #f8f8f4; stroke: var(--accent-paper); stroke-width: 2; vector-effect: non-scaling-stroke; cursor: crosshair; }
/* Hollow, so the curve handle reads as a different affordance to the endpoints. */
.curve-handle { fill: var(--accent-paper); stroke: #f8f8f4; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.curve-handle:active { cursor: grabbing; }
.snap-guide-ring { fill: rgba(248, 248, 244, .72); stroke: var(--accent-paper); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.snap-guide-cross { stroke: var(--accent-paper); stroke-width: 1.25; vector-effect: non-scaling-stroke; pointer-events: none; }
.measurement-label {
  fill: #4f5654; font: 700 10px var(--mono);
  paint-order: stroke; stroke: #f8f8f4; stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}

/* The measure tool's rubber-band line + readout — teal like the snap guide it
   shares a colour language with, so it reads as a transient aid and not a wall.
   Sized in screen pixels (non-scaling-stroke, radius/font set in JS by zoom)
   since it's a UI overlay, not a plan artifact that should scale with the paper. */
.measure-line { stroke: var(--accent-paper); stroke-width: 1.5; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; pointer-events: none; }
.measure-point { fill: var(--accent-paper); stroke: #f8f8f4; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.measure-label {
  fill: var(--accent-paper); font-weight: 700; font-family: var(--mono);
  paint-order: stroke; stroke: #f8f8f4; stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}

/* A camera's or light's badge on the plot — same ink and paper-colour halo as a
   wall's measurement. It orbits its object at a world angle, so unlike the icon it
   is never rotated and always reads upright. */
.shot-badge {
  fill: #4f5654; font-family: var(--mono); font-weight: 700;
  paint-order: stroke; stroke: #f8f8f4; stroke-width: 3px; stroke-linejoin: round;
  pointer-events: none;
}

/* Only the selected object's badge can be grabbed — every other label on the plot
   stays inert, so dragging near one still marquees or moves the object under it. */
#items-layer > g.selected .shot-badge { pointer-events: auto; cursor: grab; }
#items-layer > g.selected.layer-locked .shot-badge { pointer-events: none; cursor: default; }
#plot-canvas.is-orbiting .shot-badge { cursor: grabbing; }

/* The shot info under the name — same ink, lighter and smaller (sized per line in
   svgText) so the shot name stays the headline. */
.shot-badge-info {
  font-weight: 500; stroke-width: 2.5px;
}

/* Annotations — plot-scale ink on the light paper, with a paper-colour halo so
   they stay legible over walls and equipment. Sizing/weight/style are set as SVG
   attributes by app.js. */
.annotation-text {
  font-family: Arial, Helvetica, sans-serif;
  paint-order: stroke; stroke: #f8f8f4; stroke-width: 4px; stroke-linejoin: round;
}

/* Inline canvas text entry — a plain textarea parked over the annotation. */
.annotation-editor {
  position: absolute; z-index: 4; margin: 0; padding: 0;
  border: 1px solid var(--accent-paper); border-radius: 0; outline: none;
  background: rgba(248, 248, 244, .97); color: #1f2523;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.3; text-align: center; white-space: pre; overflow: hidden;
  resize: none; transform-origin: center;
}

/* Dynamic length input — pops up centred on a wall/window/door the instant it's
   drawn, so a known dimension can be typed straight in instead of dragged by eye
   and nudged in the inspector after. Accepts feet-inches (12'6", 12 6) or plain
   feet (12.5), the same two shapes the canvas measurement label itself implies. */
.dimension-editor {
  position: absolute; z-index: 6; transform: translate(-50%, -50%);
  width: 72px; height: 22px; padding: 0 4px; margin: 0;
  border: 1px solid var(--accent-paper); border-radius: 0; outline: none;
  background: rgba(248, 248, 244, .97); color: #1f2523;
  font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: center;
}
.dimension-editor[hidden] { display: none; }
.dimension-editor:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(126, 207, 223, .3); }

/* Floating size + style controls that track a selected annotation — dark chrome
   over the light paper, the same language as the canvas toolbar. Positioned in
   stage-relative pixels by app.js (positionAnnotationToolbar). */
.annotation-toolbar[hidden] { display: none; }
.annotation-toolbar {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--line);
  background: rgba(10, 10, 10, .84); backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  user-select: none; white-space: nowrap;
}
.annotation-toolbar::after {
  content: ""; position: absolute; left: 50%; margin-left: -5px;
  border: 5px solid transparent;
}
.annotation-toolbar:not(.is-below)::after { top: 100%; border-top-color: var(--line); }
.annotation-toolbar.is-below::after { bottom: 100%; border-bottom-color: var(--line); }
.anno-tb-btn {
  min-width: 24px; height: 24px; padding: 0 5px;
  display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.anno-tb-btn:hover { color: var(--text-bright); background: var(--surface); border-color: var(--line); }
.anno-tb-btn.is-active { color: var(--accent); background: var(--accent-soft); border-color: rgba(126, 207, 223, .34); }
.anno-tb-btn[data-anno-cmd="bold"] { font-weight: 800; }
.anno-tb-btn[data-anno-cmd="italic"] { font-family: Georgia, 'Times New Roman', serif; font-style: italic; }
.anno-tb-btn[data-anno-cmd="size-down"], .anno-tb-btn[data-anno-cmd="size-up"] { font-size: 15px; }
.anno-tb-divider { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--line); }
.anno-tb-size {
  min-width: 42px; padding: 0 4px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--text);
}

/* NOTE: wall / window / door strokes are painted as SVG presentation attributes
   by app.js (dark ink on the light paper). No CSS rule here on purpose — the
   --wall / --window / --door tokens above are the reference values. */

/* ------------------------------------------------------ radial context menu -- */
.radial-menu[hidden] { display: none; }
.radial-menu {
  position: absolute; z-index: 7; transform: translate(-50%, -50%);
  width: 0; height: 0; user-select: none;
}
.radial-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; }
/* The petals are all but identical dark; the ring's structure comes from the
   hairline spokes and rims drawn over them, and hover is signalled out on the
   track rather than by flooding a wedge with colour. */
.radial-wedge {
  fill: rgba(16, 16, 16, .92); stroke: none;
  transition: fill 120ms ease;
}
.radial-spoke, .radial-rim {
  stroke: var(--line); stroke-width: 1; fill: none; pointer-events: none;
}
.radial-petal text {
  fill: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .01em;
  pointer-events: none;
  transition: fill 120ms ease;
}
/* The hover accent. Hidden until active, then it draws the hovered petal's own
   span on the outer rim — the reference's strongest signal. */
.radial-track {
  fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round;
  pointer-events: none; transition: stroke 120ms ease;
}
.radial-petal.is-active .radial-wedge { fill: rgba(30, 30, 30, .96); }
.radial-petal.is-active .radial-track { stroke: var(--muted); }
.radial-petal.is-active text { fill: var(--text-bright); }
.radial-petal.is-disabled .radial-wedge { fill: rgba(12, 12, 12, .8); }
.radial-petal.is-disabled .radial-track { stroke: transparent; }
.radial-petal.is-disabled text { fill: var(--text); fill-opacity: .22; }

/* The hub reads as one solid disc punched through the ring, so the controls
   inside it sit on their own ground rather than on the petals. */
.radial-menu::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: rgba(10, 10, 10, .96);
  backdrop-filter: blur(12px); pointer-events: none;
}
.radial-search, .radial-back {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid transparent; background: transparent; color: var(--text);
}
.radial-search { width: 74px; height: 26px; padding: 0 8px; font-size: 11px; text-align: center; }
.radial-search:focus { outline: none; border-color: var(--line); }
.radial-back { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; font-size: 13px; }

.radial-results[hidden] { display: none; }
.radial-results {
  /* top must stay RING.track + LIST_GAP, and max-height LIST_MAX_HEIGHT, or
     placeCentre budgets the wrong space and the list clips at the stage edge. */
  position: absolute; left: 50%; top: 150px; transform: translateX(-50%);
  width: 232px; max-height: 168px; overflow-y: auto; margin: 0; padding: 3px;
  list-style: none; border: 1px solid var(--line);
  background: rgba(10, 10, 10, .92); backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}
.radial-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 4px 7px; font-size: 11px; color: var(--muted); cursor: pointer;
}
.radial-row.is-active { background: rgba(52, 52, 52, .96); color: var(--text-bright); }
.radial-row-meta { font-size: 10px; opacity: .6; white-space: nowrap; }
.radial-row-footer {
  padding: 6px 7px 4px; margin-top: 2px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 10px; text-align: center; cursor: default;
}

/* ----------------------------------------------------------- inspector -- */
.inspector-heading { align-items: flex-end; }
.inspector-heading h2 { font-size: 15px; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas-settings, .inspector-form { padding: 16px; overflow: auto; }
.inspector-multi { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.inspector-multi .multi-count { margin: 0; color: var(--text-bright); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.inspector-multi .multi-hint { margin: 0 0 4px; color: var(--faint); font-size: 10px; line-height: 1.5; letter-spacing: .04em; }
.canvas-settings { display: flex; flex-direction: column; gap: 22px; }
/* Sections keep their full height and the panel scrolls instead: left to shrink,
   a long layer list squeezes into whatever is left and its rows spill over the
   section below it. */
.canvas-settings > section { flex: 0 0 auto; }
.canvas-settings-section { display: grid; gap: 12px; }
.plot-meta-section .field { margin-bottom: 0; }
.inspector-section-heading {
  display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: 8px 16px;
  background: var(--surface); border: 0; border-bottom: 1px solid var(--line);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.inspector-section-heading > span {
  color: var(--text); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}
.section-chevron { flex: 0 0 auto; color: var(--faint); transition: transform .15s ease; }
.section-chevron::before { content: '\25be'; }
.canvas-settings-section.collapsed .section-chevron { transform: rotate(-90deg); }
.canvas-settings-section.collapsed > *:not(.inspector-section-heading) { display: none; }
.canvas-dimension { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 10px; }
.canvas-dimension > span { color: var(--muted); font-size: 10px; font-weight: 600; }
.dimension-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.unit-input.compact input {
  width: 100%; height: 34px; padding: 0 25px 0 8px;
  border: 1px solid var(--line); border-radius: 0; outline: 0;
  background: var(--surface); color: var(--text); font-size: 11px;
}
.unit-input.compact input:hover { border-color: #3d3d3d; }
.unit-input.compact input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(126, 207, 223, .22); }
.canvas-settings-note { margin: -2px 0 0; color: var(--faint); font-size: 9px; line-height: 1.5; }

/* Stepper for the north arrow, built like the canvas zoom cluster: nudge either
   way, click the readout to come back to north. */
.compass-control {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; height: 34px;
  border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  background: var(--surface);
}
.compass-control button {
  border: 0; border-right: 1px solid var(--line); background: transparent;
  color: var(--muted); font-size: 14px; cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.compass-control button:last-child { border-right: 0; }
.compass-control button:hover { color: var(--text-bright); background: rgba(255, 255, 255, .07); }
.compass-control .compass-value { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
/* Sun path panel. Amber picks up the dial on the paper, so the accent colour is
   the one thing tying the control to the thing it draws — everything else in the
   inspector stays on the teal. */
.sun-section { --sun: #e0a23c; }
.sun-section .field { margin-bottom: 0; }
.sun-toggle {
  display: flex; align-items: center; gap: 9px; min-height: 30px;
  color: var(--text); font-size: 10px; font-weight: 600; cursor: pointer;
}
.sun-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--sun); cursor: pointer; }
.sun-body[hidden] { display: none; }
.sun-body { display: grid; gap: 12px; }
.sun-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.sun-search input { width: 100%; }
.sun-search button {
  height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 0;
  background: var(--surface); color: var(--muted);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.sun-search button:hover:not(:disabled) { color: var(--sun); border-color: rgba(224, 162, 60, .5); background: rgba(224, 162, 60, .08); }
.sun-search button:disabled { opacity: .5; cursor: progress; }

/* Candidate places. Only ever shown when the lookup came back with more than one
   answer — a single match is applied outright rather than made into a choice. */
.sun-results { display: grid; gap: 2px; }
.sun-results[hidden] { display: none; }
.sun-result {
  display: grid; gap: 2px; padding: 8px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: var(--surface);
  transition: border-color 150ms ease, background 150ms ease;
}
.sun-result:hover { border-color: rgba(224, 162, 60, .5); background: rgba(224, 162, 60, .08); }
.sun-result > span { color: var(--text); font-size: 10px; font-weight: 600; }
.sun-result > small { color: var(--faint); font-family: var(--mono); font-size: 9px; }
.sun-hint { margin: 0; padding: 2px 0; color: var(--faint); font-size: 9px; line-height: 1.55; }

/* The three times, which are what most people open this panel for. */
.sun-readout { display: grid; gap: 2px; }
.sun-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft);
}
.sun-row:last-child { border-bottom-color: transparent; }
.sun-row > span { color: var(--muted); font-size: 10px; font-weight: 600; }
.sun-row > b { color: var(--text-bright); font-family: var(--mono); font-size: 12px; font-weight: 700; }
.sun-row > small { grid-column: 2; margin-top: 1px; color: var(--faint); font-family: var(--mono); font-size: 9px; text-align: right; }

.sun-scrub { display: grid; gap: 7px; }
.sun-scrub[hidden] { display: none; }
.sun-scrub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sun-scrub-head > span {
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.sun-scrub-head .link-button[hidden] { display: none; }
.sun-scrub input[type="range"] { width: 100%; margin: 0; accent-color: var(--sun); cursor: pointer; }
.sun-position { margin: 0; color: var(--faint); font-size: 9px; line-height: 1.6; }

.layer-list { display: grid; gap: 2px; }
.layer-row {
  min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 5px; padding: 5px 0 5px 10px;
  border: 1px solid transparent; border-bottom-color: var(--line-soft);
}
.layer-row:last-child { border-bottom-color: transparent; }
.layer-row.is-hidden .layer-name { color: var(--faint); text-decoration: line-through; }
.layer-row.is-locked { border-left-color: rgba(126, 207, 223, .45); }
.layer-meta { min-width: 0; }
.layer-name { display: block; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 10px; font-weight: 600; }
.layer-count { display: block; margin-top: 2px; color: var(--faint); font-family: var(--mono); font-size: 9px; }
.layer-toggle {
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--muted);
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}
.layer-toggle:hover { color: var(--text-bright); border-color: #555555; }
.layer-toggle svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.layer-toggle.is-off { color: var(--faint); opacity: .55; }
.layer-toggle.is-active { color: var(--accent); border-color: rgba(126, 207, 223, .45); background: var(--accent-soft); }
.inspector-form { padding: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { min-width: 0; display: block; margin-bottom: 12px; }
.field.full { grid-column: 1 / -1; }
.field > span {
  display: block; margin-bottom: 6px; color: var(--muted);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
}
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 0;
  background: var(--surface); color: var(--text); outline: none;
  font-size: 11px; letter-spacing: .02em;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input, .field select { height: 34px; padding: 0 9px; }
/* The popup is drawn by the OS and composites a translucent background over
   white, which made the options white-on-white. Both need OPAQUE colours. */
.field select {
  background-color: #151515;
  appearance: none; -webkit-appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-repeat: no-repeat;
}
.field select:hover { background-color: #1b1b1b; }
.field select option, .field select optgroup {
  background-color: #151515; color: #f2f2f2; font-weight: 600;
}
.field textarea { padding: 9px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #3d3d3d; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 1px rgba(126, 207, 223, .22);
}
.field input[readonly] { background: rgba(255, 255, 255, .02); color: var(--faint); cursor: not-allowed; }
.field input[readonly]:hover { border-color: var(--line); }
.field-note {
  display: block; margin: -6px 0 12px; color: var(--faint);
  font-size: 10px; line-height: 1.45; letter-spacing: .04em;
}
.field-row .field-note, .inspector-form > .field-note { grid-column: 1 / -1; }
.unit-input { position: relative; }
.unit-input input { padding-right: 28px; }
.unit-input b { position: absolute; right: 9px; top: 10px; color: var(--faint); font-family: var(--mono); font-size: 10px; font-weight: 700; }
/* Thickness reads out rather than edits on an opening set into a wall. */
.unit-input input:disabled { opacity: .45; cursor: default; }
/* Width, link, height on one row — the toggle sits between the two fields it
   binds together, aligned to the inputs rather than to their labels. */
.size-fields { grid-template-columns: 1fr auto 1fr; align-items: end; }
.size-link {
  position: relative; width: 28px; height: 34px; margin-bottom: 0; display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--faint);
  cursor: pointer; transition: color 120ms ease;
}
.size-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.size-link:hover { color: var(--muted); }
.size-link.is-active { color: var(--accent); }
/* Unlinked: a slash through the chain, so the state reads without colour alone. */
.size-link:not(.is-active) svg { opacity: .75; }
.size-link:not(.is-active)::after {
  content: ""; position: absolute; width: 17px; height: 1px;
  background: currentColor; transform: rotate(-45deg);
}
.link-button {
  padding: 0; border: 0; background: transparent; color: var(--muted);
  font: inherit; letter-spacing: inherit; text-decoration: underline; cursor: pointer;
}
.link-button:hover { color: var(--text-bright); }
.link-button:disabled { color: var(--faint); text-decoration: none; cursor: default; }
/* The shot attached to a camera. The box is sized by a fixed aspect rather than
   by the image, so a portrait grab and a 2.39:1 frame leave the panel the same
   height — and so an empty one is a target big enough to drop onto. */
.shot-thumb {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9;
  margin-bottom: 8px; padding: 0;
  border: 1px solid var(--line); color: var(--muted);
  cursor: zoom-in; transition: border-color 150ms ease, color 150ms ease;
  /* A graph-paper ground, faint enough to read as texture rather than as content.
     It shows through the letterbox bars of a contain-fitted shot too, which is
     what tells you where the frame ends and the box begins. */
  background-color: #0d0d0d;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 12px 12px, 12px 12px;
}
.shot-thumb:hover { border-color: #3d3d3d; }
.shot-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* [hidden] is display:none, which this rule's own specificity would otherwise beat
   — leaving an empty <img> to draw its broken-image icon over the placeholder. */
.shot-thumb img[hidden] { display: none; }
.shot-thumb.is-empty { border-style: dashed; cursor: copy; }
.shot-thumb.is-empty:hover { color: var(--text-bright); }
/* The drag is over the box and would land here — the same accent the canvas uses
   to say a drop has somewhere to go. */
.shot-thumb.is-over {
  border-style: solid; border-color: var(--accent);
  background-color: var(--accent-soft); color: var(--text-bright);
}
.shot-placeholder {
  display: grid; gap: 4px; justify-items: center;
  font-size: 11px; letter-spacing: .04em;
}
.shot-placeholder small { color: var(--faint); font-size: 10px; }
.shot-thumb:disabled { cursor: default; border-style: solid; }
.shot-thumb:disabled .shot-placeholder { opacity: .55; }
.shot-actions { display: flex; gap: 12px; margin-bottom: 8px; font-size: 10px; letter-spacing: .04em; }
/* With no shot there is nothing in this row, so it must not hold its gap open. */
.shot-actions:not(:has(> :not([hidden]))) { margin-bottom: 0; }
.shot-field .field-note { margin: 0 0 4px; }
.text-style-row { display: flex; gap: 6px; }
.text-style-toggle {
  flex: 1; height: 34px; border: 1px solid var(--line); border-radius: 0;
  background: var(--surface); color: var(--text); font-size: 14px; line-height: 1;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.text-style-toggle[data-style="bold"] { font-weight: 700; }
.text-style-toggle[data-style="italic"] { font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.text-style-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; display: block; }
.text-style-toggle:hover { border-color: #3d3d3d; }
.text-style-toggle.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.font-color-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.font-color-swatch {
  position: relative; height: 28px; min-width: 0; padding: 0;
  border: 1px solid #4a4a4a; background: var(--swatch-color);
  transition: border-color 120ms ease, background 120ms ease;
}
.font-color-swatch:hover { border-color: #b5b5b5; filter: brightness(1.12); }
.font-color-swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.font-color-swatch.is-active::after {
  content: ""; position: absolute; right: 2px; bottom: 2px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent);
}
#field-annotation-text { font-family: Arial, Helvetica, sans-serif; }
.inspector-actions { display: flex; gap: 8px; margin-top: 6px; }
.inspector-actions .button { flex: 1; padding: 9px 6px; text-align: center; }
.inspector-footer {
  margin-top: auto; display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.inspector-footer div { padding: 12px 14px; border-right: 1px solid var(--line); }
.inspector-footer div:last-child { border-right: 0; }
.inspector-footer span, .inspector-footer strong { display: block; }
.inspector-footer span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.inspector-footer strong { margin-top: 4px; color: var(--text); font-size: 10px; font-weight: 700; letter-spacing: .04em; }

/* ------------------------------------------------------------ dialogs -- */
.plots-dialog, .shortcuts-dialog, .pdf-export-dialog {
  padding: 0; border-radius: 0; color: var(--text);
  background: rgba(10, 10, 10, .45);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-style: solid;
  border-top: 1.5px solid rgba(255, 255, 255, .45);
  border-left: 1.5px solid rgba(255, 255, 255, .18);
  border-right: 1.5px solid rgba(255, 255, 255, .08);
  border-bottom: 1.5px solid rgba(0, 0, 0, .4);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}
.plots-dialog::backdrop, .shortcuts-dialog::backdrop, .pdf-export-dialog::backdrop {
  background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.plots-dialog { width: min(880px, calc(100vw - 48px)); height: min(620px, calc(100vh - 48px)); }

/* Ghost buttons need a touch more edge on the translucent glass than on #000. */
.plots-dialog .button.ghost, .shortcuts-dialog .button.ghost, .pdf-export-dialog .button.ghost {
  border-color: rgba(255, 255, 255, .2); color: #c4c4c4;
}
.plots-dialog .button.ghost:hover:not(:disabled),
.shortcuts-dialog .button.ghost:hover:not(:disabled),
.pdf-export-dialog .button.ghost:hover:not(:disabled) {
  color: var(--text-bright); border-color: rgba(255, 255, 255, .5);
}

.dialog-header {
  min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
  padding: 0 22px; border-bottom: 1px solid var(--line); background: transparent;
}
/* Works whether the eyebrow + h2 are wrapped in a div or are direct siblings
   of the close button. */
.dialog-header > .eyebrow { flex: 1 0 100%; margin-bottom: -2px; }
.dialog-header h2 { margin: 3px 0 0; font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--text); }
.dialog-header .dialog-close { margin-left: auto; }
.dialog-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 0; background: transparent;
  color: var(--muted); font-size: 20px; line-height: 1;
  transition: color 150ms ease, border-color 150ms ease;
}
.dialog-close:hover { color: var(--text-bright); border-color: #555555; }

.dialog-actions {
  height: 56px; padding: 10px 16px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.dialog-spacer { flex: 1; }

.file-browser { height: calc(100% - 168px); display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.plots-dialog:has(.folder-bar:not([hidden])) .file-browser { height: calc(100% - 216px); }
.folder-pane { padding: 10px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .02); overflow: auto; }
.folder-row {
  width: 100%; min-height: 34px; display: flex; align-items: center; gap: 9px;
  padding: 0 10px; border: 0; border-radius: 0; background: transparent;
  color: var(--muted); text-align: left; font-size: 11px;
  transition: background 150ms ease, color 150ms ease;
}
.folder-row:hover { background: var(--surface); color: var(--text); }
.folder-row.active { background: var(--accent-soft); color: var(--text-bright); }
.folder-row span { color: var(--accent); }
.folder-row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-label {
  min-width: 0; flex: 1; align-self: stretch; display: flex; align-items: center; gap: 9px;
  padding: 0; border: 0; background: transparent; color: inherit; text-align: left;
}
.folder-menu-button {
  width: 26px; height: 26px; flex: 0 0 auto; padding: 0; border: 1px solid transparent;
  background: transparent; color: var(--muted); opacity: 0;
  transition: opacity 150ms ease, color 150ms ease, border-color 150ms ease;
}
.folder-row:hover .folder-menu-button, .folder-row.menu-open .folder-menu-button, .folder-menu-button:focus-visible { opacity: 1; }
.folder-menu-button:hover { color: var(--text-bright); border-color: #555555; }

.project-pane { min-width: 0; overflow: auto; }
.project-list-head, .project-row { display: grid; grid-template-columns: 1fr 140px 80px; align-items: center; gap: 12px; }
.project-list-head {
  height: 34px; padding: 0 14px; color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
}
.project-row {
  min-height: 54px; padding: 8px 14px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 10px; transition: background 150ms ease;
}
.project-row:hover { background: var(--surface); }
.project-row.current { border-left: 2px solid var(--accent); padding-left: 12px; }
.project-cell-name { display: flex; align-items: center; min-width: 0; gap: 10px; }
.file-icon {
  width: 29px; height: 34px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 0; background: var(--surface-2);
  color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.file-meta { min-width: 0; }
.file-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 11px; font-weight: 600; }
.file-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.file-meta small.file-prod { color: var(--muted); font-size: 10px; }
.row-actions { display: flex; justify-content: flex-end; gap: 5px; }
.row-actions button {
  width: 28px; height: 26px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--muted);
  transition: color 150ms ease, border-color 150ms ease;
}
.row-actions button:hover { color: var(--text-bright); border-color: #555555; }
.dialog-footnote { height: 40px; padding: 13px 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 10px; letter-spacing: .06em; }
.empty-project-list { padding: 55px 20px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }

.folder-bar {
  height: 48px; display: flex; align-items: center; gap: 10px;
  padding: 0 22px; border-bottom: 1px solid var(--line);
  background: transparent; font-size: 12px; color: var(--muted);
}
.folder-bar .folder-bar-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-bar .folder-bar-path b { font-weight: 600; color: var(--ink, inherit); }
.library-disconnected { padding: 55px 20px; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.6; }
.library-disconnected p { margin: 0 0 10px; }
.conflict-dialog { max-width: 460px; }
.conflict-message { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.context-menu {
  position: absolute; z-index: 5; width: 190px; max-height: min(360px, calc(100% - 20px));
  overflow: auto; padding: 5px; border: 1px solid var(--line); border-radius: 0;
  background: var(--surface-2); box-shadow: 0 14px 36px rgba(0, 0, 0, .62);
}
.context-menu[hidden] { display: none; }
.context-menu-item {
  width: 100%; min-height: 31px; display: block; padding: 7px 9px;
  border: 0; border-radius: 0; background: transparent; color: var(--text);
  text-align: left; font-size: 11px;
  transition: background 150ms ease, color 150ms ease;
}
.context-menu-item:hover { background: var(--surface-3); color: var(--text-bright); }
.context-menu-item[aria-disabled="true"] { color: var(--faint); opacity: .55; cursor: default; }
.context-menu-item[aria-disabled="true"]:hover { background: transparent; color: var(--faint); }
.context-menu-item.danger { color: #cf7b6c; }
.context-menu-separator { height: 1px; margin: 5px 3px; background: var(--line); }
.context-menu-form { display: grid; gap: 10px; padding: 7px; }
.context-menu-form label { display: grid; gap: 6px; }
.context-menu-form label span {
  color: var(--muted); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.context-menu-form input {
  width: 100%; height: 34px; padding: 0 8px; border: 1px solid #555555; border-radius: 0;
  background: var(--surface-3); color: var(--text-bright); font-size: 11px; outline: none;
}
.context-menu-form input:focus { border-color: var(--accent); }
.context-menu-form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.context-menu-form-actions button {
  min-height: 29px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--muted); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.context-menu-form-actions button:hover { color: var(--text-bright); border-color: #555555; }
.context-menu-form-actions .context-menu-submit { background: var(--text-bright); border-color: var(--text-bright); color: #0a0a0a; }
.context-menu-form-actions .context-menu-submit:hover { background: #cccccc; border-color: #cccccc; color: #0a0a0a; }
.folder-row.drop-target, .project-row.drop-target {
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---------------------------------------------------------- shortcuts -- */
.shortcuts-dialog { width: min(600px, calc(100vw - 48px)); max-height: min(660px, calc(100vh - 48px)); }
.shortcuts-grid {
  padding: 18px 22px 24px; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
}
.shortcut { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font-size: 11px; }
.shortcut span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
kbd {
  flex: 0 0 auto; min-width: 22px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 0; background: var(--surface);
  color: var(--text); font-family: var(--mono); font-size: 10px; line-height: 1;
  text-align: center; letter-spacing: .04em;
}

/* ------------------------------------------------------------ pdf export -- */
.pdf-export-dialog { width: min(900px, calc(100vw - 48px)); height: min(640px, calc(100vh - 48px)); }
.pdf-export-body { height: calc(100% - 128px); display: grid; grid-template-columns: 220px 1fr; min-height: 0; }
.pdf-export-options {
  padding: 18px; border-right: 1px solid var(--line); overflow: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.pdf-export-option {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  color: var(--text); font-size: 12px; cursor: pointer;
}
.pdf-export-option input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.pdf-export-option:has(input:disabled) { color: var(--muted); cursor: default; }
.pdf-export-option input:disabled { cursor: default; }
.pdf-export-note { margin: 14px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.pdf-export-preview { position: relative; background: #6b6b6b; }
.pdf-export-preview iframe { width: 100%; height: 100%; border: 0; display: block; background: #ffffff; }
.pdf-preview-status {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 20, .55); color: var(--text-bright); font-size: 11px;
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase; pointer-events: none;
  transition: opacity 150ms ease;
}
.pdf-preview-status[hidden] { display: none; }

/* ------------------------------------------------------------- toasts -- */
/* ==========================================================================
   Start screen
   The front door. Sits over the whole shell rather than beside it, because the
   app is one page and this is a state of it, not a route.

   z-index 30 clears the toast region at 20: a toast fired by a reconnect that
   went wrong has to be readable over the screen that offered the button.
   ========================================================================== */
.start-screen {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  padding: 32px; background: var(--bg); overflow-y: auto;
}
.start-screen[hidden] { display: none; }
.start-inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
  width: 100%; max-width: 880px;
}

.start-pitch { display: grid; gap: 14px; }
.start-branding { display: grid; gap: 6px; margin-bottom: 8px; }
/* The wordmark, at the size it earns when it is the only thing on the page —
   the topbar's 13px is a badge, this is a title. Tracking matches. */
.start-title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: .18em; color: var(--text-bright); }
.start-tagline { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .35em; color: var(--muted); }
.start-lede { color: var(--text); font-size: 14px; line-height: 1.6; }
.start-pitch p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.start-version { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--faint); }

.start-actions { display: grid; gap: 14px; }
.start-heading {
  margin: 0; color: var(--faint); font-size: 9px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
}
.start-identity, .start-storage {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--faint); font-family: var(--mono); font-size: 9px;
}
.start-identity[hidden] { display: none; }
.start-identity b { color: var(--muted); font-weight: 600; }

.start-continue[hidden], .start-recent-block[hidden] { display: none; }
.start-recent-block { display: grid; gap: 6px; }
.start-recent { display: grid; gap: 2px; }

/* One row per plot, in the file browser's own idiom so the two read as the same
   library seen from two places. */
.start-plot {
  display: grid; gap: 1px; width: 100%; padding: 8px 10px; text-align: left;
  border: 1px solid transparent; background: var(--surface); color: var(--text);
  cursor: pointer;
}
.start-plot:hover { border-color: rgba(126, 207, 223, .5); background: var(--accent-soft); }
.start-plot > span { font-size: 11px; font-weight: 600; }
.start-plot > small { color: var(--faint); font-family: var(--mono); font-size: 9px; }
/* Continue is the same row, louder — it is the one thing most visits want. */
.start-continue .start-plot { border-color: var(--line); background: var(--surface-3); }
.start-continue .start-plot > span { color: var(--text-bright); font-size: 12px; }

.start-new { width: 100%; justify-content: center; }
.start-storage { flex-wrap: wrap; }
.start-storage .link-button { flex: none; }

/* Stacked on a phone, pitch first: the point of the screen is to say what this
   is before it offers to open anything. */
@media (max-width: 720px) {
  .start-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .start-title { font-size: 24px; }
}

.toast-region { position: fixed; z-index: 20; right: 18px; top: 78px; display: grid; gap: 8px; pointer-events: none; }
.toast {
  max-width: 320px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 0;
  background: rgba(10, 10, 10, .88);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
  font-size: 11px; line-height: 1.5; letter-spacing: .02em;
  animation: toast-in 180ms ease;
}
.toast.error { border-color: #7a3b31; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-5px); } }

/* --------------------------------------------------------- responsive -- */
@media (max-width: 1120px) {
  .workspace { grid-template-columns: 76px 268px minmax(320px, 1fr); }
  .workspace.inspector-collapsed { grid-template-columns: 76px 268px minmax(320px, 1fr); }
  .workspace.library-collapsed { grid-template-columns: 76px 0 minmax(320px, 1fr); }
  .workspace.library-collapsed.inspector-collapsed { grid-template-columns: 76px 0 minmax(320px, 1fr); }
  .inspector-panel { position: absolute; right: 0; top: 64px; bottom: 0; width: 268px; transform: translateX(100%); }
  .project-name { width: min(190px, 22vw); }
}

@media (max-width: 760px) {
  .workspace,
  .workspace.library-collapsed,
  .workspace.inspector-collapsed,
  .workspace.library-collapsed.inspector-collapsed { grid-template-columns: 60px minmax(250px, 1fr); }
  .asset-panel {
    position: absolute; left: 60px; top: 64px; bottom: 0; width: 280px;
    box-shadow: 10px 0 28px rgba(0, 0, 0, .6);
  }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; padding: 0 10px; }
  .branding, .save-state, .plot-meta-bar, .topbar-actions .toolbar-divider, #undo-btn, #redo-btn { display: none; }
  .project-name { width: 100%; }
  .button.primary { padding: 10px 18px; letter-spacing: .14em; }
  .shortcuts-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================ Plot sheet PDF staging =========================
   #print-sheet is an off-screen scratch element: exportPlotPdf()/exportFolderPdfs()
   (app.js) drop the drawing + compass into it just long enough for svg2pdf.js to
   read their real geometry, then empty it again. The legend and rotated title
   block are drawn straight onto the PDF from data instead, so there's no markup
   for them here — nothing renders this sheet visibly, ever.

   Widths here and SHEET_DRAWING in app.js describe the same sheet; change one
   and the exported scale label stops matching the drawing. */
.print-sheet { display: none; }

.print-sheet.pdf-render {
  display: grid; position: fixed; left: -20000px; top: 0; width: 16.3in; height: 10.3in;
}
.print-sheet.pdf-render .sheet-drawing {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  width: 12.44in; height: 10.3in;
}
.print-sheet.pdf-render .sheet-plot-frame { position: relative; }
.print-sheet.pdf-render .sheet-plot { display: block; }
.print-sheet.pdf-render .sheet-compass { position: absolute; right: 0.1in; bottom: 0.1in; width: 0.62in; height: 0.62in; }
.print-sheet.pdf-render .sheet-compass svg { display: block; width: 100%; height: 100%; overflow: visible; }
.print-sheet.pdf-render .sheet-compass .compass-arms { stroke: #2b2b2b; stroke-width: 3; }
.print-sheet.pdf-render .sheet-compass .compass-north { fill: #111111; font-size: 17px; }
/* The sun panel's own square, laid out beside the drawing rather than on it. Its
   size only has to be real enough for svg2pdf.js to read geometry off — the page
   coordinates it ends up at come from the reserved column in pdfSceneLayout.
   Absolutely positioned so it keeps a real 2in box instead of being dealt a
   second grid row it has no height for. */
.print-sheet.pdf-render .sheet-sun { position: absolute; left: 12.6in; top: 0; width: 2in; height: 2in; }
.print-sheet.pdf-render .sheet-sun svg { display: block; width: 100%; height: 100%; overflow: visible; }