/* ---------------------------------------------------------------------------
   Redline workspace design system.

   Everything is driven from the tokens below: two themes, one spacing scale,
   one type scale, three control heights and three elevations. Chrome is kept
   to three bars above the drawing and one below, because the drawing is the
   product and vertical space spent on chrome is taken directly from it.
--------------------------------------------------------------------------- */
@font-face{font-family:Redline;src:url('/demo/vendor/pdfjs/standard_fonts/LiberationSans-Regular.ttf');font-display:swap}
@font-face{font-family:Redline;src:url('/demo/vendor/pdfjs/standard_fonts/LiberationSans-Bold.ttf');font-weight:700;font-display:swap}
/* "Redline" above is Liberation Sans, kept for on-canvas text so the editing overlay matches the PDF
   appearance metrics exactly. The interface itself is set in Inter, like the rest of the product. */
@font-face{font-family:Inter;src:url('/demo/vendor/fonts/Inter-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/demo/vendor/fonts/Inter-latin-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}


:root{
  /* Surfaces, darkest to lightest. */
  --bg:#1c211b; --chrome:#20261f; --panel:#252d24; --raised:#2f382e; --input:#191e18;
  --canvas:#141813; --page:#fff;
  --line:#3a4438; --line-soft:#2c342b;
  /* Text, brightest to faintest. All three clear 4.5:1 on --bg, --chrome and --panel in both themes; in the light
     theme --muted and --dim do not on --raised or --canvas, so text on those is set in --text. */
  --text:#f4f2ec; --muted:#b9bdaf; --dim:#a3a898;
  /* Accent: --accent for marks, rules and icons; --accent-text for red words (4.5:1 on every bar);
     --accent-strong behind white text, the desk's red in both themes, and --accent-deep under the pointer, as on
     the desk. Red means the redline, the one primary action, the current-tool mark and real warnings. Selected
     and "on" are ink: --text behind --bg. */
  --accent:#ef6a55; --accent-text:#ef6a55; --accent-strong:#cc402b; --accent-deep:#ac3320; --active:rgba(239,106,85,.15);
  --select:rgba(244,242,236,.08); --focus:var(--accent);
  --ok:var(--muted);
  /* The desk's cards: the rule round a dialogue, menu or instrument bar (ink by day, the line colour at night), the
     faint rule round a quiet button, the red wash a menu row takes under the pointer, and flat offset shadows. */
  --rule:var(--line); --rule-soft:rgba(244,242,236,.18); --wash:rgba(239,106,85,.10);
  --shadow-card:8px 8px 0 rgba(0,0,0,.28); --shadow-menu:6px 6px 0 rgba(0,0,0,.22),0 14px 30px rgba(0,0,0,.34); --shadow-bar:6px 6px 0 rgba(0,0,0,.22);
  /* Spacing scale. */
  --s1:4px; --s2:6px; --s3:9px; --s4:13px; --s5:18px; --s6:26px;
  /* Control heights and bar heights. */
  --h-sm:24px; --h-md:28px; --h-lg:34px; --bar:34px; --bar-tall:46px;
  /* Radii. */
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  /* Type scale, in the desk's voice. Caps labels are --f-cap/700/.12em in --muted; controls 500, buttons and field
     labels 600, titles 700 with tight tracking, --f-display only for the empty workspace's heading. Numbers are set
     in tabular figures. No other sizes. */
  --f-cap:10.5px; --f-xs:11px; --f-sm:12px; --f-md:13px; --f-lg:15px; --f-xl:20px; --f-display:40px;
  /* Elevation. */
  --e1:0 1px 2px rgba(0,0,0,.28);
  --e2:0 6px 20px rgba(0,0,0,.36);
  --e3:0 20px 60px rgba(0,0,0,.50);
  --t:130ms cubic-bezier(.2,.7,.3,1);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:var(--f-md);color-scheme:dark;-webkit-font-smoothing:antialiased;
}
/* brand.css also defines light page tokens; the editor theme must remain authoritative. */
:root[data-theme=dark]{--muted:#b9bdaf;--line:#3a4438}
:root[data-theme=light]{
  /* The warm paper family of the site: chrome is near-white, panels are paper, the canvas a shade deeper. */
  --bg:#f4f2ec; --chrome:#fcfbf8; --panel:#f7f5ef; --raised:#ebe8df; --input:#fff;
  --canvas:#e6e3da; --page:#fff;
  --line:#d7dbce; --line-soft:#e6e5dc;
  --text:#272c24; --muted:#676f60; --dim:#676f60;
  --accent:#cc402b; --accent-text:#ac3320; --accent-strong:#cc402b; --accent-deep:#ac3320; --active:rgba(204,64,43,.10);
  --select:rgba(39,44,36,.07);
  --ok:var(--muted);
  --rule:#272c24; --rule-soft:rgba(39,44,36,.16); --wash:rgba(204,64,43,.07);
  --shadow-card:8px 8px 0 rgba(39,44,36,.12); --shadow-menu:6px 6px 0 rgba(39,44,36,.10),0 14px 30px rgba(39,44,36,.12); --shadow-bar:6px 6px 0 rgba(39,44,36,.08);
  --e1:0 1px 2px rgba(39,44,36,.10);
  --e2:0 6px 20px rgba(39,44,36,.14);
  --e3:0 20px 60px rgba(39,44,36,.22);
  color-scheme:light;
}

/* --- Reset and primitives ------------------------------------------------ */
*{box-sizing:border-box}
body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text);font-size:var(--f-md)}
[hidden]{display:none!important}
.grow{flex:1}
.muted{color:var(--muted)}
.divider{width:1px;height:16px;background:var(--line);flex-shrink:0;margin:0 var(--s2)}

button,input,select,textarea{font:inherit;color:inherit}
button,summary{cursor:pointer}
button{
  height:var(--h-md);flex-shrink:0;display:inline-flex;align-items:center;gap:var(--s2);
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:0 var(--s3);white-space:nowrap;font-size:var(--f-md);font-weight:500;
  transition:background var(--t),border-color var(--t),color var(--t);
}
button:hover:not(:disabled){background:var(--raised)}
button:active:not(:disabled){transform:translateY(.5px)}
button:disabled{opacity:.38;cursor:not-allowed}
button.icon{width:var(--h-md);padding:0;justify-content:center;font-size:var(--f-lg);line-height:1}
/* Icons: one sprite (src/icons.mjs) drawn with the desk's pen. 16px in menus, bars and tabs; 20px on the tools.
   The accent part is red only on the current tool and white on the red primary button; elsewhere it is the icon's
   own colour. .ic-a stays a bare class: a <use> clone sits in a shadow tree no descendant selector reaches, while
   the --ic-accent custom property is inherited into it. */
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;--ic-accent:currentColor;pointer-events:none}
.ic-a{stroke:var(--ic-accent)}
button.primary .ic{--ic-accent:#fff}
.toolbar button.active .ic{--ic-accent:var(--accent)}
.appbar>button>.ic{width:18px;height:18px}
.toolbar :is(.tool-group,.takeoff-controls) button .ic{width:20px;height:20px}
@media (max-width:1180px){.toolbar :is(.tool-group,.takeoff-controls) button .ic{width:18px;height:18px}}
/* The 20px glyph and its caption share the 36px tool button; the caption keeps clear of the current-tool mark. */
.toolbar :is(.tool-group,.takeoff-controls) button{gap:1px}
.toolbar :is(.tool-group,.takeoff-controls) button span{line-height:11px}
.toolbar .tool-sections button{flex-direction:row;gap:var(--s2)}
.ic-end{margin-left:auto}
button.primary{background:var(--accent-strong);color:#fff;border-color:transparent;font-weight:600}
button.primary:hover:not(:disabled){background:var(--accent-deep)}

:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-radius:var(--r-sm)}
button:focus-visible,summary:focus-visible{outline-offset:-2px}

input,select,textarea{
  min-width:0;border:1px solid var(--line);background:var(--input);border-radius:var(--r-sm);
  padding:0 var(--s2);height:var(--h-md);outline:none;font-size:var(--f-md);font-weight:400;
  transition:border-color var(--t),box-shadow var(--t);
}
input:hover,select:hover,textarea:hover{border-color:var(--dim)}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--active)}
textarea{resize:vertical;height:auto;padding:var(--s2)}
input[type=color]{padding:2px;width:100%;height:var(--h-md);cursor:pointer}
input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;height:auto}
fieldset{margin:0;padding:0;border:0}
fieldset:disabled{opacity:.5}
label{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--f-sm);font-weight:600;color:var(--muted)}
input[type=number]{font-variant-numeric:tabular-nums}
kbd{font:inherit;font-size:var(--f-xs);font-weight:400;color:var(--dim);letter-spacing:.02em}

/* Thin, themed scrollbars everywhere. */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box;border:3px solid transparent}





/* Drawing geometry, selections and panels appear immediately, without entrance effects. */


/* Handles and selection dots carry no animation. The scene is rebuilt on every redraw — including on hover,
   to move the snap mark — so an entrance animation here restarted every frame and read as a flicker. */
/* A toggle has to show its state at a glance, not only in its label. On is ink, like the desk's pressed segment;
   off is a plain outlined control at full strength. Focus view is on/off too and follows the same rule when on. */
.toggle[aria-pressed="false"]{background:transparent;border-color:var(--line);color:var(--muted)}
.toggle[aria-pressed="false"]:hover:not(:disabled){background:transparent;border-color:var(--text);color:var(--text)}
.toggle[aria-pressed="true"],.toolrow-end [data-action=focusView][aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg)}
.toggle[aria-pressed="true"]:hover:not(:disabled),.toolrow-end [data-action=focusView][aria-pressed="true"]:hover:not(:disabled){background:var(--text);color:var(--bg)}
/* Read by a screen reader, never shown: clip rather than display:none, which removes it from the tree. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* The comparison sits exactly over the page it is comparing. */
#pdf-canvas-diff{position:absolute;left:0;top:0;pointer-events:none}
#pdf-detail{position:absolute;left:0;top:0;pointer-events:none}
/* Bars that float over the drawing are centred on it and stand clear of the markups list and the status bar:
   --canvas-mid, --canvas-width and --canvas-bottom are kept by the drawing area's resize observer (app.mjs). */
#diff-legend{position:absolute;left:var(--canvas-mid,50%);transform:translateX(-50%);bottom:calc(var(--canvas-bottom,30px) + var(--s4));z-index:60;display:flex;align-items:center;gap:var(--s2);
  background:var(--chrome);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:var(--f-xs);box-shadow:var(--shadow-bar)}
.diff-key{width:11px;height:11px;border-radius:2px;display:inline-block}
.diff-added{background:#1f8a4c}.diff-removed{background:#cc402b}.diff-same{background:#d7dbce}
#diff-alignment{color:var(--dim);border-left:1px solid var(--line);padding-left:var(--s3);margin-left:var(--s1)}
/* The picking bar stands where the legend stands, because only one of the two is ever shown. */
#align-bar{position:absolute;left:var(--canvas-mid,50%);transform:translateX(-50%);bottom:calc(var(--canvas-bottom,30px) + var(--s4));z-index:60;display:flex;align-items:center;gap:var(--s3);
  width:max-content;max-width:min(1040px,94vw);background:var(--chrome);border:1px solid var(--accent-strong);border-radius:var(--r-sm);
  padding:var(--s2) var(--s3);font-size:var(--f-xs);box-shadow:var(--shadow-bar)}
#align-bar strong{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;color:var(--accent-text);white-space:nowrap}
#align-step{color:var(--text)}
#align-readout{color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
/* A shape drawn click by click on a touch screen: Finish, Undo point and Cancel in reach at the top of the live readout's
   column, in the drawing area's top-right corner, and moving aside with the readout when Properties opens; the readout
   steps down beneath it while it shows. On a phone it stands just above the docked readout strip. Drawn as the align bar
   is, the caps name in red, quiet text actions and the red primary last; every target is 44 px. It stands over the
   export suggestion that shares the corner, and under the menus. */
#chain-bar{position:fixed;right:14px;top:calc(var(--canvas-top,100px) + 12px);z-index:62;display:flex;align-items:center;gap:var(--s1);
  width:max-content;max-width:calc(100vw - 16px);background:var(--chrome);border:1px solid var(--accent-strong);border-radius:var(--r-sm);
  padding:4px 4px 4px var(--s3);font-size:var(--f-xs);box-shadow:var(--shadow-bar)}
#chain-bar[hidden]{display:none}
#chain-bar strong{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
#chain-bar-count{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;margin-right:var(--s1)}
#chain-bar button{height:44px;min-width:44px;padding:0 var(--s3);font-size:var(--f-md)}
#chain-bar .link{color:var(--muted)}
#chain-bar .link:hover:not(:disabled){color:var(--text)}
#chain-bar .primary{margin-left:var(--s1);padding:0 18px}
@media (min-width:901px){body.properties-visible #chain-bar{right:calc(var(--properties-width,244px) + 24px)}}
@media (min-width:701px){body.chain-drafting .readout{top:max(38%,calc(var(--canvas-top,100px) + 78px))}}
@media (max-width:700px){#chain-bar{top:auto;right:8px;bottom:calc(44px + 8px)}body.chain-drafting:has(#readout:not([hidden])) #chain-bar{bottom:calc(44px + 65px + 8px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* --- Bar 1: application bar ---------------------------------------------- */
.appbar{
  height:44px;flex-shrink:0;display:flex;align-items:center;gap:var(--s4);
  padding:0 var(--s4);background:var(--chrome);border-bottom:1px solid var(--line);
  position:relative;z-index:80;
}
.wordmark{display:flex;align-items:center;gap:var(--s3);font-size:var(--f-md);font-weight:700;letter-spacing:2.2px;padding:0;height:var(--h-lg)}
.brandmark{display:grid;place-content:center;background:var(--accent-strong);color:#fff;font-size:var(--f-lg);font-weight:700;width:24px;height:24px;border-radius:var(--r-sm);letter-spacing:0}
.menus{display:flex;gap:1px;align-items:center;height:100%}
.menus details{position:relative;display:flex;align-items:center}
.menus summary{list-style:none;font-size:var(--f-md);padding:0 var(--s3);height:var(--h-lg);display:flex;align-items:center;border-radius:var(--r-sm);transition:background var(--t),color var(--t)}
.menus summary::-webkit-details-marker{display:none}
.menus summary:hover{background:var(--raised)}
.menus details[open] summary{background:var(--raised);color:var(--text)}
/* Menus hang from the bar as the desk's account menu does: a card with the card rule, 4px corners and a flat offset
   shadow. Rows run edge to edge in groups under hairline rules: an icon column, the label, a shortcut chip on the
   right. A row takes the red wash under the pointer and a red edge under the keyboard; Delete is set in red. */
.menu{
  position:absolute;left:0;top:calc(100% + 5px);min-width:260px;max-height:calc(100dvh - 70px);overflow-y:auto;
  padding:var(--s1) 0;background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r-sm);
  z-index:90;box-shadow:var(--shadow-menu);
}
.menu button,.context button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:32px;padding:0 12px;border:0;border-radius:0;text-align:left;font-size:var(--f-md);font-weight:500;color:var(--text)}
.menu button:hover:not(:disabled),.context button:hover:not(:disabled){background:var(--wash)}
.menu button:focus-visible,.context button:focus-visible{outline:none;background:var(--wash);box-shadow:inset 3px 0 0 var(--accent)}
.menu button:not(:has(>.ic:not(.ic-end))),.context button:not(:has(>.ic:not(.ic-end))){padding-left:38px}
.menu hr,.context hr{height:0;margin:var(--s1) 0;border:0;border-top:1px solid var(--line)}
.menu kbd,.context kbd,#palette-list kbd{margin-left:auto;padding:1px 5px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--muted);font-size:var(--f-xs);font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}
.menu .danger,.context .danger{color:var(--accent-text)}
/* A row that switches something on shows a check while it is on. */
.menu .ic-check{visibility:hidden}
.menu [aria-pressed=true] .ic-check{visibility:visible}
.menus details:last-child .menu{left:auto;right:0}
.local-badge{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;color:var(--muted);white-space:nowrap;display:flex;align-items:center}
.dot,.local-badge i{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--ok);margin-right:var(--s2)}
/* While the empty workspace shows its own Open, the bar's Open steps back: one red button on the page. */
body:has(#dashboard:not([hidden])) .appbar>button.primary[data-action=open]{background:transparent;color:var(--text);font-weight:500}
body:has(#dashboard:not([hidden])) .appbar>button.primary[data-action=open]:hover:not(:disabled){background:var(--raised);filter:none}

/* --- Bar 2: document tabs and document actions --------------------------- */
.tabbar{height:var(--bar);flex-shrink:0;display:flex;align-items:stretch;gap:var(--s1);padding-right:var(--s3);background:var(--bg);border-bottom:1px solid var(--line)}
.tabbar>.icon,.tabbar>.divider{align-self:center}
.document-tabs{flex:1;min-width:0;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none}
.document-tabs::-webkit-scrollbar{height:0}
.doc-tab{
  display:flex;align-items:center;gap:var(--s1);padding-left:var(--s3);min-width:132px;max-width:250px;
  font-size:var(--f-sm);border-right:1px solid var(--line-soft);position:relative;transition:background var(--t);
}
.doc-tab:hover{background:var(--panel)}
.doc-tab.active{background:var(--panel)}
.doc-tab.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.doc-tab button:first-child{overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left;min-width:0;height:100%;display:block;line-height:var(--bar);padding:0}
.doc-tab button:last-child{width:20px;padding:0;justify-content:center;font-size:var(--f-lg);color:var(--dim);height:20px}
.doc-tab button:last-child:hover{color:var(--text)}
.doc-tab button:last-child .ic,.capture button .ic{width:14px;height:14px}
.empty-tab{padding:0 var(--s4);font-size:var(--f-sm);color:var(--dim);display:flex;align-items:center}
#save-state{font-size:var(--f-xs);color:var(--dim);white-space:nowrap;display:flex;align-items:center;padding:0 var(--s2)}

/* --- Error banner -------------------------------------------------------- */
#error{background:#ac3320;color:#fff;padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s3);font-size:var(--f-md);}
:root[data-theme=light] #error{background:#ac3320}
#error-text{flex:1}
#error button{border-color:rgba(255,255,255,.35)}
#error button:hover{background:rgba(255,255,255,.14)}

/* --- Layout -------------------------------------------------------------- */
main{display:flex;flex:1;min-height:0}
.left,.properties{position:relative;background:var(--panel);flex-shrink:0;display:flex;flex-direction:column}
.left{width:var(--left-width,214px);border-right:1px solid var(--line)}
.properties{width:var(--properties-width,244px);border-left:1px solid var(--line);overflow:auto;display:none}
body.properties-visible .properties{display:block;}

/* Tool buttons settle into their active state rather than flicking. */
.toolbar button{transition:background var(--t),color var(--t)}

.toolbar button svg{transition:none}

.thumb{transition:border-color var(--t),background var(--t)}

.doc-tab,.recent-row,tbody tr{transition:background var(--t)}
.center{flex:1;min-width:0;display:flex;flex-direction:column}

.panel-title{
  font-size:var(--f-cap);letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:var(--muted);
  padding:var(--s4) var(--s4) var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  border-bottom:1px solid var(--line-soft);flex-shrink:0;
}
.panel-title span{font-weight:400;color:var(--dim);letter-spacing:0;font-variant-numeric:tabular-nums}
.properties .panel-title{padding:var(--s2) var(--s3) var(--s2) var(--s4)}
.properties .panel-title button{font-size:var(--f-xl);color:var(--dim);width:var(--h-md);justify-content:center;padding:0}
.properties>.panel-title{position:sticky;top:0;z-index:5;background:var(--panel)}
#selection-count{margin-right:auto;padding:1px 6px;border:1px solid var(--line);border-radius:3px;font-size:var(--f-cap);font-weight:700;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
#selection-count:empty{display:none}

.side-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line-soft);flex-shrink:0}
.side-tabs button{height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:0;font-size:var(--f-xs);color:var(--muted);padding:0 2px;overflow:hidden;min-width:0}
.side-tabs span{font-size:var(--f-xs);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The open panel reads like the desk's current page: ink, with the 2px red mark under it (desk.css .desk-nav). */
.side-tabs [aria-selected=true]{background:var(--chrome);box-shadow:inset 0 -2px 0 var(--accent);color:var(--text)}
.side-tabs [aria-selected=true] span{font-weight:600}
#side-content{flex:1;min-height:0;overflow:auto;padding:var(--s4)}
.side-bottom{font-size:var(--f-xs);line-height:1.65;padding:var(--s3) var(--s4);border-top:1px solid var(--line-soft);color:var(--muted);flex-shrink:0}
.side-bottom .muted{color:var(--dim)}
.side-caption{color:var(--dim);font-size:var(--f-sm);line-height:1.55;margin:0 0 var(--s4)}
.page-nav-row{display:flex;gap:var(--s1);align-items:center;margin-bottom:var(--s3)}
.page-nav-row span{flex:1;text-align:center;font-size:var(--f-sm);color:var(--dim);font-variant-numeric:tabular-nums}
.page-nav-row button{width:var(--h-sm);height:var(--h-sm);padding:0;justify-content:center}
.page-nav-row button:not(:disabled){border-color:var(--line);background:var(--input)}

.thumb{
  width:100%;height:auto;padding:var(--s3);margin-bottom:var(--s3);display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  border:1px solid var(--line);background:var(--chrome);border-radius:var(--r-md);transition:border-color var(--t),background var(--t);
}
.thumb:hover:not(:disabled){border-color:var(--dim);background:var(--chrome)}
/* The current page: a 2px ink border and no wash; the padding gives back the extra pixel so nothing moves. */
.thumb.active,.thumb.active:hover:not(:disabled){border:2px solid var(--text);background:transparent;padding:calc(var(--s3) - 1px)}
.thumb canvas{max-width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:var(--e1)}
.thumb span{display:flex;justify-content:space-between;width:100%;font-size:var(--f-sm);color:var(--muted)}
.thumb.active span{color:var(--text);font-weight:600}

.thumb{position:relative}
.thumb.dragging{opacity:.4}
.thumb.drop-before::before,.thumb.drop-after::after{content:'';position:absolute;left:6px;right:6px;height:2px;background:var(--text);border-radius:2px}
.thumb.drop-before::before{top:-5px}
.thumb.drop-after::after{bottom:-5px}
.panel-actions{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line-soft)}
.panel-actions.row{flex-direction:row;gap:var(--s2)}
.panel-actions.row button{justify-content:center}
.panel-actions button{width:100%;justify-content:flex-start;border-color:var(--line);font-size:var(--f-sm);font-weight:600;color:var(--muted)}
.panel-actions button:hover:not(:disabled){color:var(--text)}
.layer-row{padding:var(--s3) 0;border-bottom:1px solid var(--line-soft)}
.layer-row label{flex-direction:row;align-items:center;gap:var(--s2);font-size:var(--f-md);font-weight:500;color:var(--text)}
.layer-actions{display:flex;justify-content:flex-end;gap:var(--s1);margin-top:var(--s1)}
.layer-actions button{height:var(--h-sm);padding:0 var(--s2);font-size:var(--f-xs);color:var(--muted)}
.tool-preset{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;border-bottom:1px solid var(--line-soft)}
.tool-preset button:first-child{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;display:block;line-height:var(--h-md)}
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:var(--s2);flex-shrink:0}
.file-row{width:100%;height:auto;padding:var(--s3) var(--s2);white-space:normal;text-align:left;line-height:1.5;display:block;border-bottom:1px solid var(--line-soft);border-radius:0}
.file-row small{display:block;color:var(--dim);font-size:var(--f-xs);margin-top:2px}

/* --- Bar 3: markup tools ------------------------------------------------- */
.toolrow{flex-shrink:0;display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s1) var(--s3);background:var(--panel);border-bottom:1px solid var(--line)}
.toolbar{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;container-type:inline-size}
/* Below ~980px of strip width the labels go and the icons speak (tooltips keep the names); wider, labels return. */
@container (max-width:980px){.toolrow .toolbar button span{display:none}.toolrow .toolbar button{min-width:30px;height:30px;padding:0 5px}}
/* Tools wrap onto more lines when the window is narrow; nothing is ever clipped or hidden. */
.toolbar-line{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.toolbar-line::-webkit-scrollbar{height:0}
.toolrow-end{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);flex-shrink:0;margin-left:var(--s2);padding-left:var(--s3);border-left:1px solid var(--line-soft)}
/* The category tabs and the page utilities (Focus view, Properties, the scale chip) share one line. */
.toolrow-head{display:flex;align-items:center;min-width:0}
.toolrow-head .tool-sections{flex:1;min-width:0}
.toolbar button{
  height:34px;min-width:38px;display:flex;flex-direction:column;gap:2px;justify-content:center;align-items:center;
  padding:0 var(--s2);border-radius:var(--r-sm);color:var(--muted);
}
.toolbar button:hover:not(:disabled){color:var(--text)}
/* The current tool: an ink label on a paper cell with the desk-nav's 2px red mark under it; only the glyph's
   accent stroke is red. No red wash. */
.toolbar button.active,.toolbar button.active:hover:not(:disabled){color:var(--text);background:var(--chrome);border-color:var(--line);box-shadow:inset 0 -2px 0 var(--accent)}
.tool-group{position:relative;display:flex;align-items:stretch;gap:1px}
.tool-group+.tool-group{margin-left:var(--s2);padding-left:var(--s2);border-left:1px solid var(--line-soft)}
/* Options for the tool you are about to use, shown only when that tool has any. */
.tool-options{display:flex;align-items:center;gap:var(--s3);flex-shrink:0;height:32px;padding:0 var(--s3);
  background:var(--chrome);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.tool-options::-webkit-scrollbar{height:0}
.tool-options-name{font-size:var(--f-cap);letter-spacing:.12em;font-weight:700;text-transform:uppercase;color:var(--accent-text);white-space:nowrap}
.tool-options label{flex-direction:row;align-items:center;gap:var(--s2);font-size:var(--f-xs);white-space:nowrap}
.tool-options input,.tool-options select{height:22px;font-size:var(--f-xs)}
.tool-options input{width:66px}
/* A caption in the bar sits on the buttons' centre line; the panel caption's bottom margin would lift it. */
.tool-options .side-caption{margin:0;line-height:1.3;white-space:nowrap}
#param-fields label{margin-bottom:var(--s3)}
.tool-caret{width:16px;min-width:16px;padding:0;font-size:var(--f-cap);color:var(--dim);height:38px;justify-content:center;border-radius:var(--r-sm)}
.tool-caret:hover:not(:disabled){color:var(--text)}
.tool-caret[aria-expanded=true]{background:var(--raised);color:var(--text)}
.tool-flyout{
  position:fixed;z-index:95;min-width:200px;padding:var(--s1) 0;
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-menu);
}
.tool-flyout button{flex-direction:row;align-items:center;gap:10px;width:100%;height:32px;min-width:0;padding:0 12px;border:0;border-radius:0;text-align:left;font-size:var(--f-md);color:var(--text)}
.tool-flyout button:hover:not(:disabled){background:var(--wash)}
.tool-flyout button:focus-visible{outline:none;background:var(--wash);box-shadow:inset 3px 0 0 var(--accent)}
.tool-flyout button svg{width:16px;height:16px;flex-shrink:0}
.tool-flyout button span{flex:1;font-size:var(--f-md);letter-spacing:0}
.tool-flyout button.active{color:var(--text);background:var(--select);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
/* The scale chip: a dashed red warning while an open drawing has no scale, a quiet ink value once it has one. */
#scale-badge{flex-direction:row;gap:var(--s1);height:var(--h-sm);padding:0 var(--s2);border:1px solid var(--line);border-radius:3px;background:transparent;color:var(--muted);font-size:var(--f-xs);font-weight:600;font-variant-numeric:tabular-nums}
#scale-badge[data-state=set]{color:var(--text)}
#scale-badge[data-state=set]:hover:not(:disabled){background:transparent;border-color:var(--text)}
#scale-badge[data-state=unset]{border:1px dashed var(--accent);color:var(--accent-text)}
#scale-badge[data-state=unset]:hover:not(:disabled){background:transparent;border-style:solid}
#scale-badge .ic{width:14px;height:14px;stroke:var(--accent)}
.toolrow .toolrow-end button{flex-direction:row;gap:var(--s1);height:var(--h-sm);min-width:0;padding:0 var(--s3);font-size:var(--f-sm)}
.toolrow-end [data-action=properties]{height:var(--h-sm);font-size:var(--f-sm);color:var(--muted)}
.toolrow-end [data-action=properties][aria-expanded=true]{background:var(--raised);color:var(--text)}

/* --- Drawing surface ----------------------------------------------------- */
.canvas-wrap{flex:1;min-height:120px;position:relative;overflow:auto;background:var(--canvas);padding:var(--s6);outline:none;overscroll-behavior:contain}
.canvas-wrap.dragover{box-shadow:inset 0 0 0 2px var(--accent)}
.canvas-wrap.pan{cursor:grab}
.canvas-wrap.panning{cursor:grabbing}
#page-host,#page-host-b{position:relative;background:var(--page);box-shadow:var(--e2);line-height:0;width:max-content}
#page-host{margin:auto}
#pdf-canvas,#pdf-canvas-b{display:block}
#overlay,#overlay-b{position:absolute;inset:0;overflow:hidden}
#overlay{touch-action:none;cursor:crosshair}
#overlay.select{cursor:default}
#overlay.pan{cursor:grab}
#overlay.busy{pointer-events:none}
#overlay-b{pointer-events:none}
/* While two revisions are being registered, both sheets take clicks and both say so. */
#overlay.aligning,#overlay-b.aligning{cursor:crosshair}
#overlay-b.aligning{pointer-events:auto}
.annotation{cursor:inherit}
#overlay.select .annotation{cursor:move}
.selection{pointer-events:none}
.handle{cursor:crosshair}
/* Two-pane comparison view. */
#canvas-wrap[data-panes="2"]{display:flex;justify-content:center;align-items:flex-start;gap:var(--s5);padding-top:38px}
/* Neither page may shrink: when the pair is wider than the workspace the view scrolls instead of squashing a drawing. */
#canvas-wrap[data-panes="2"] #page-host{margin:0;flex-shrink:0}
#page-host-b{flex-shrink:0}
.pane-tag{position:absolute;top:-20px;left:0;font-size:var(--f-xs);font-weight:600;color:var(--dim);white-space:nowrap;line-height:1}
#loading{
  position:absolute;top:var(--s6);left:50%;transform:translateX(-50%);padding:var(--s2) var(--s5);
  background:var(--chrome);border:1px solid var(--line);border-radius:100px;z-index:30;color:var(--text);
  font-size:var(--f-sm);box-shadow:var(--e2);
}

/* In-place text editing. The letters on the sheet stay the markup's own outlines while they are typed; this box
   lies exactly over them with clear letters and gives the caret, the selection and the keyboard, so nothing moves
   when the edit is finished. Its frame is the text's box: a faint ink line, the same one a selected text shows on
   the sheet, with a handle on the middle of each side and on every corner. All six set the width the words wrap
   to; the bar beside it stays upright when the text is turned. Ink and paper only: the sheet is white in both
   themes, and the one red on it is the redline being typed. */
#text-editor{position:absolute;left:0;top:0;z-index:40;line-height:normal}
#text-editor-frame{position:absolute;left:0;top:0;transform-origin:0 0;outline:calc(1px*var(--text-k,1)) solid rgba(39,44,36,.55);outline-offset:calc(-.5px*var(--text-k,1))}
#text-editor-input{
  display:block;width:100%;height:100%;min-width:0;min-height:0;margin:0;padding:4px;box-sizing:border-box;resize:none;overflow:hidden;
  border:0;border-radius:0;outline:0;box-shadow:none;background:transparent;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:#272c24;
  font-family:Redline,Arial,sans-serif;font-weight:400;font-style:normal;line-height:1.25;letter-spacing:0;white-space:pre;
  font-kerning:normal;text-rendering:geometricPrecision;-webkit-user-select:text;user-select:text;transition:none;
}
#text-editor-input:hover,#text-editor-input:focus{border:0;outline:0;box-shadow:none}
#text-editor-input::selection{background:rgba(39,44,36,.2);color:transparent;-webkit-text-fill-color:transparent}
.text-grip{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;box-sizing:border-box;background:#faf9f6;border:1.25px solid #272c24;cursor:var(--grip-cursor,ew-resize);touch-action:none}
.text-grip[data-box=left]{left:0}
.text-grip[data-box=right]{left:100%}
.text-grip[data-at=top]{top:0}
.text-grip[data-at=mid]{top:50%}
.text-grip[data-at=foot]{top:100%}
/* On a touch screen the frame is laid out larger and scaled down (app.mjs); its line and its handles keep their size. */
.text-grip{transform:scale(var(--text-k,1))}
/* What is pressed is larger than what is drawn, and reaches out from the box rather than into it: the first and
   last letters of a line stay there for the caret. */
.text-grip::after{content:"";position:absolute;inset:-4px}
.text-grip[data-box=left]::after{left:-8px;right:-1px}
.text-grip[data-box=right]::after{left:-1px;right:-8px}
#text-bar{
  position:absolute;display:flex;align-items:center;gap:var(--s1);width:max-content;white-space:nowrap;
  background:var(--chrome);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:3px;font-size:var(--f-xs);box-shadow:var(--shadow-bar);
}
#text-bar button{height:24px;min-width:28px;padding:0 var(--s2);font-size:var(--f-xs)}
#text-bar .link{color:var(--muted)}
#text-bar .link:hover:not(:disabled){color:var(--text)}
#text-bar .primary{padding:0 var(--s3)}
#text-editor-size{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}
#text-colour{width:24px;height:24px;padding:0;margin:0 var(--s1);border:1px solid var(--line);border-radius:var(--r-sm);background:none;cursor:pointer}
/* Room under the sheet for it to scroll up clear of an on-screen keyboard; zero until a text near the foot of
   the page is being typed (app.mjs sets the height). */
#keyboard-room{height:0;flex:none;pointer-events:none}
@media (pointer:coarse){
  #text-bar button,#text-colour{min-width:44px;min-height:44px}
  .text-grip::after{inset:-19px}
  .text-grip[data-box=left]::after{left:-33px;right:-5px}
  .text-grip[data-box=right]::after{left:-5px;right:-33px}
}
/* A markup's comment. It is written in one small card, opened from the mark on the sheet, the context menu or
   the markups list; the mark itself is drawn with the handles (app.mjs), in ink on paper. */
#comment-pop{
  position:fixed;z-index:90;display:flex;flex-direction:column;gap:var(--s2);width:min(300px,calc(100vw - 16px));
  background:var(--chrome);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);box-shadow:var(--shadow-menu);
}
#comment-pop[hidden]{display:none}
#comment-pop-title{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;color:var(--accent-text)}
#comment-pop-subject{margin-top:calc(-1*var(--s1));font-size:var(--f-xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#comment-pop-input{width:100%;min-height:64px;max-height:40vh;line-height:1.45;font-size:var(--f-sm)}
/* Selected words are washed in the card's own ink, as on the sheet: never the browser's blue. */
#comment-pop-input::selection{background:color-mix(in srgb,var(--text) 22%,transparent);color:var(--text)}
.comment-pop-actions{display:flex;align-items:center;gap:var(--s1)}
.comment-pop-actions .link{color:var(--muted)}
.comment-pop-actions .link:hover:not(:disabled){color:var(--text)}
.comment-pop-actions .primary{padding:0 var(--s4)}
#overlay .comment-mark{cursor:pointer}
/* The list's label column: the words on the markup, its comment beside them in the quieter ink, and the way in. */
.markup-note{display:flex;align-items:center;gap:var(--s2);max-width:340px}
.markup-note-text{overflow:hidden;text-overflow:ellipsis}
.markup-note-comment{overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
/* A full-size target (24 px, 44 on a touch screen) that reaches a little over the row's own padding, so the rows
   of the list stay as tall as they were. */
.markup-note button{flex:none;height:24px;width:24px;margin-block:-2px;padding:0;justify-content:center;color:var(--dim)}
.markup-note button.has-comment,tbody tr:hover .markup-note button,.markup-note button:focus-visible{color:var(--text)}
@media (pointer:coarse){#comment-pop button{min-height:44px}.markup-note button{height:44px;width:44px;margin-block:-4px}}

/* --- Welcome / dashboard ------------------------------------------------- */
/* The empty workspace is the bare table: paper, not the deeper canvas a sheet is laid on. */
.canvas-wrap:has(>#dashboard:not([hidden])){background:var(--bg)}
#dashboard{max-width:660px;margin:0 auto;padding:var(--s6) var(--s5)}
.welcome-eyebrow{font-size:var(--f-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
/* The one display heading, set like the desk's: heavy, tight, with a red full stop. */
h1{font-size:var(--f-display);line-height:.98;letter-spacing:-.045em;margin:var(--s5) 0 var(--s4);font-weight:850}
h1 .full-stop{color:var(--accent)}
#dashboard p{font-size:var(--f-lg);color:var(--muted);line-height:1.6;margin:0}
.welcome-actions{display:flex;gap:var(--s2);margin-top:var(--s6);flex-wrap:wrap}
.welcome-actions button{height:var(--h-lg);padding:0 var(--s5);font-weight:600}
.welcome-actions button:not(.primary){border-color:var(--line)}
.drop-hint{font-size:var(--f-sm);color:var(--dim);margin-top:var(--s4)}
.recent-heading{
  font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;margin:var(--s6) 0 0;padding-bottom:var(--s2);
}
.recent-heading button{font-size:var(--f-xs);color:var(--dim);height:var(--h-sm)}
.recent-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s2);border-bottom:1px solid var(--line-soft);border-radius:var(--r-sm);transition:background var(--t)}
.recent-row:hover{background:var(--panel)}
.recent-row>.ic{color:var(--dim)}
.recent-row button{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0;padding:0;font-size:var(--f-md)}
.recent-row span{font-size:var(--f-xs);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
#recent p{font-size:var(--f-sm);color:var(--dim)}

/* --- Properties panel ---------------------------------------------------- */
.property-intro{padding:var(--s4);background:var(--chrome);border-bottom:1px solid var(--line-soft)}
.property-intro>span{font-size:var(--f-lg);font-weight:700;letter-spacing:-.01em}
.property-intro p{color:var(--dim);font-size:var(--f-sm);line-height:1.55;margin:var(--s2) 0 0}
#properties{padding:var(--s4)}
#properties label{margin-bottom:var(--s4);gap:var(--s1)}
#properties textarea{line-height:1.45}
#properties .section-label{display:flex;align-items:center;gap:var(--s2)}
#properties .section-label::after{content:'';height:1px;flex:1;background:var(--line-soft)}
#properties fieldset>button{border-color:var(--line);margin-bottom:var(--s2);font-weight:600}
.field-row{display:flex;gap:var(--s3)}
.field-row label{flex:1;min-width:0}
.field-row input,.field-row select{width:100%}
/* Layout figures: two by two, each field carrying its own X / Y / W / H inside it, figures in tabular digits. */
#layout-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:var(--s4)}
#layout-fields .layout-field{position:relative;margin:0}
#layout-fields .layout-field[data-key=length]{grid-column:1/-1}
#layout-fields .layout-field span{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:var(--f-xs);font-weight:600;color:var(--muted);pointer-events:none}
#layout-fields input{height:30px;padding-left:26px;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}
#layout-fields [data-key=length] input{padding-left:58px}
#layout-fields input::-webkit-inner-spin-button,#layout-fields input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.section-label{font-size:var(--f-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:var(--s5) 0 var(--s3)}
.lock-row{flex-direction:row;align-items:center;gap:var(--s2);margin:0 var(--s4) var(--s4);font-size:var(--f-sm);font-weight:500}
.measurement-card{border-top:1px solid var(--line-soft);padding:0 var(--s4) var(--s5);margin-top:var(--s2)}
.measurement-card strong{font-size:var(--f-lg);font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;display:block;margin-bottom:var(--s1)}
.measurement-card p{color:var(--dim);font-size:var(--f-sm);line-height:1.55;margin:0 0 var(--s3)}
.measurement-card button{width:100%;justify-content:flex-start;border-color:var(--line);font-size:var(--f-sm);font-weight:600;margin-bottom:var(--s2)}
#properties button[data-action=saveTool]{width:100%;justify-content:center;border-color:var(--line)}

/* --- Markups list -------------------------------------------------------- */
.markups{height:var(--markups-height,152px);flex-shrink:0;background:var(--panel);border-top:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:none}
/* Dragging the divider must track the pointer exactly, so the easing is dropped while resizing. */
body.resizing-v .markups,body.resizing .left,body.resizing .properties{transition:none}
.markups.collapsed{height:var(--bar)}
.markups.collapsed .table-wrap,.markups.collapsed #list-footer,.markups.collapsed .resizer{display:none}
.listbar{height:var(--bar);padding:0 var(--s3);display:flex;gap:var(--s2);align-items:center;flex-shrink:0;min-width:0;overflow-x:auto;border-bottom:1px solid var(--line-soft)}
.list-title{font-size:var(--f-cap);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 var(--s1);font-weight:700}
/* The count is a number, not an alert. */
#markup-count{color:var(--muted);margin-left:var(--s1);font-variant-numeric:tabular-nums}
.listbar input{height:var(--h-sm);font-size:var(--f-sm);flex:1;max-width:320px;min-width:90px}
.listbar select{height:var(--h-sm);font-size:var(--f-xs);max-width:120px;flex-shrink:0}
.listbar button{height:var(--h-sm);font-size:var(--f-xs);color:var(--muted)}
.table-wrap{overflow:auto;flex:1;min-height:0;scrollbar-gutter:stable}
table{width:100%;border-collapse:collapse;font-size:var(--f-sm);white-space:nowrap}
thead{position:sticky;top:0;background:var(--chrome);z-index:2;box-shadow:0 1px 0 var(--line)}
th{text-align:left;color:var(--muted);font-size:var(--f-xs);font-weight:600;height:var(--h-md);padding:0 var(--s4)}
th button{font-size:var(--f-xs);font-weight:600;height:var(--h-sm);padding:0;color:var(--muted)}
th button:hover{color:var(--text);background:transparent}
td{padding:var(--s2) var(--s4);border-bottom:1px solid var(--line-soft);max-width:240px;overflow:hidden;text-overflow:ellipsis}
tbody tr{cursor:pointer;transition:background var(--t)}
.markups tbody tr:nth-child(even):not(.selected){background:color-mix(in srgb,var(--chrome) 35%,var(--panel))}
tbody tr:hover{background:var(--raised)}
.markups tbody tr:not(.selected):hover{background:var(--raised)}
tbody tr.selected{background:var(--select);box-shadow:inset 2px 0 var(--accent)}
.markups tbody tr:focus-visible{outline-offset:-2px}
.markups td:nth-child(2),.markups td:nth-child(7),.markups td:nth-child(8),.markups td:nth-child(11){font-variant-numeric:tabular-nums}
.status-pill{font-size:var(--f-xs);padding:2px var(--s2);border:1px solid var(--line);border-radius:100px;color:var(--muted)}
#list-footer{height:var(--h-sm);display:flex;gap:var(--s2);align-items:center;padding:0 var(--s4);font-size:var(--f-xs);font-variant-numeric:tabular-nums;color:var(--dim);border-top:1px solid var(--line-soft);flex-shrink:0;background:var(--chrome);white-space:nowrap;overflow-x:auto}
#list-footer button{height:20px;padding:0 var(--s2)}

/* --- Status bar: where you are in the drawing ---------------------------- */
.statusbar{height:30px;flex-shrink:0;display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3) 0 var(--s4);background:var(--chrome);border-top:1px solid var(--line);font-size:var(--f-xs);font-variant-numeric:tabular-nums;color:var(--dim)}
#tool-hint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#render-status{white-space:nowrap;color:var(--accent-text)}
#coordinates{font-variant-numeric:tabular-nums;white-space:nowrap}
.view-controls{display:flex;align-items:center;gap:1px;flex-shrink:0}
.view-controls button{height:22px;font-size:var(--f-xs);padding:0 var(--s2);color:var(--muted)}
.view-controls button.icon{width:22px;font-size:var(--f-md)}
.view-controls select{height:22px;font-size:var(--f-xs);padding:0 var(--s1);background:transparent;border-color:transparent}
.view-controls select:hover{border-color:var(--line)}
.page-field{flex-direction:row;align-items:center;gap:var(--s1);font-size:var(--f-xs);color:var(--dim)}
.page-field input{width:40px;height:22px;font-size:var(--f-xs);text-align:center;background:transparent;border-color:transparent}
.page-field input:hover{border-color:var(--line)}
#page-total{color:var(--dim);white-space:nowrap}

/* --- Panel resizing ------------------------------------------------------ */
.resizer{position:absolute;z-index:6;transition:background var(--t)}
.left .resizer,.properties .resizer{top:0;width:6px;height:100%;cursor:col-resize}
.left .resizer{right:-3px}
.properties .resizer{left:-3px}
.resizer.horizontal{top:-3px;left:0;width:100%;height:6px;cursor:row-resize}
.resizer::after{content:'';position:absolute;left:2px;top:calc(50% - 14px);height:28px;width:2px;border-radius:2px;background:var(--dim);opacity:.45;pointer-events:none}
.resizer.horizontal::after{left:calc(50% - 14px);top:2px;width:28px;height:2px}
.resizer:hover,.resizer.dragging{background:var(--accent);opacity:.6}
body.resizing{cursor:col-resize;user-select:none}
body.resizing-v{cursor:row-resize;user-select:none}

/* --- Dialogs, menus, toast, palette -------------------------------------- */
/* Every dialogue is a card on the desk, as the account's profile dialogue is: paper, the card rule, 4px corners and a
   flat offset shadow over a green-black wash. A 20px/700 title with a square close, a muted lede, the body, then a
   footer under its own rule: the quiet actions first, the one red action last. */
dialog{
  background:var(--chrome);color:var(--text);border:1px solid var(--rule);border-radius:var(--r-sm);
  width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:var(--s6);box-shadow:var(--shadow-card);
}
dialog::backdrop{background:rgba(37,45,36,.45)}
#dialog,.signature-dialog,.product-help{padding:0}
.dialog-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);padding:20px 24px 0}
/* Every dialogue title is a desk title: 700, tight. */
dialog h2{font-size:var(--f-xl);font-weight:700;letter-spacing:-.01em;line-height:1.3}
dialog h3{font-size:var(--f-lg);font-weight:700;letter-spacing:-.01em}
.dialog-heading h2{margin:0}
.dialog-heading button{width:32px;height:32px;justify-content:center;padding:0;margin:-3px -8px 0 0;color:var(--muted)}
.dialog-heading button:hover:not(:disabled){color:var(--text)}
#dialog-description,.dialog-lede{color:var(--muted);font-size:var(--f-md);line-height:1.55;margin:var(--s2) 0 0}
#dialog-description{white-space:pre-line;padding:0 24px}
#dialog-description:empty{display:none}
#dialog-more{margin:var(--s2) 24px 0;color:var(--muted);font-size:var(--f-md);line-height:1.55}
#dialog-more summary{width:max-content;font-size:var(--f-sm);font-weight:600;color:var(--text);cursor:pointer}
#dialog-more p{margin:var(--s2) 0 0;white-space:pre-line}
#dialog-fields{padding:0 24px 20px}
#dialog-fields label{margin:var(--s4) 0 0;gap:6px}
#dialog-fields input,#dialog-fields select,#dialog-fields textarea{width:100%}
#dialog-fields input:not([type=checkbox]):not([type=radio]):not([type=color]),#dialog-fields select{height:36px}
.dialog-actions{position:sticky;bottom:0;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;padding:14px 24px;border-top:1px solid var(--line);background:var(--chrome)}
.dialog-actions button,.takeoff-footer button{height:36px;padding:0 16px;font-weight:600;border-color:var(--rule-soft)}
.dialog-actions button:not(.primary):hover:not(:disabled),.takeoff-footer button:not(.primary):hover:not(:disabled){background:transparent;border-color:var(--text)}
.dialog-actions button.primary,.takeoff-footer button.primary{border-color:transparent}
.dialog-actions .split-after,.takeoff-footer .split-after{margin-right:auto}
/* Feedback and what's new: the same card, the form carrying the padding so the footer can run edge to edge. */
.product-help form{padding:20px 24px 0}
.product-help h2{margin:0 0 var(--s3)}
.product-help .dialog-actions{margin:20px -24px 0}
/* A dialogue in parts: each part under its own rule, and a note that says what applying will change. */
#dialog-fields .dialog-section{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-soft)}
#dialog-fields .dialog-section:first-child{margin-top:var(--s5);padding-top:0;border-top:0}
.dialog-hint{margin:0;color:var(--muted);font-size:var(--f-sm);line-height:1.5}
.dialog-note{margin:var(--s3) 0 0;color:var(--accent-text);font-size:var(--f-sm);line-height:1.5}
.dialog-note:empty{display:none}

.context{
  position:fixed;z-index:100;display:flex;flex-direction:column;padding:var(--s1) 0;min-width:260px;max-height:calc(100dvh - 16px);overflow-y:auto;
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-menu);
}
.style-control{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--f-xs);color:var(--muted);white-space:nowrap}
.style-control input[type=color]{width:26px;height:22px;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:none}
.style-control input[type=number]{width:58px}
.style-control select{min-width:74px}
.canvas-wrap.paint,.canvas-wrap.paint *{cursor:copy!important}
/* Dynamic fill is an instrument over the drawing, drawn as a title block: a row of cells under hairline rules, each
   a caps caption over its control, the mode's name in red over what it has found, the red Apply last. */
#fill-bar{position:absolute;left:var(--canvas-mid,50%);transform:translateX(-50%);bottom:calc(var(--canvas-bottom,30px) + var(--s4));z-index:60;
  display:flex;align-items:stretch;flex-wrap:wrap;width:max-content;max-width:min(calc(100vw - 32px),calc(var(--canvas-width,100vw) - 24px));
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-bar);font-size:var(--f-xs)}
#fill-bar[hidden]{display:none}
#fill-bar .bar-cell{display:flex;flex-direction:column;justify-content:center;gap:4px;margin:0;padding:7px 12px;border-left:1px solid var(--line);font-size:var(--f-xs);font-weight:500;color:var(--text)}
#fill-bar .bar-cell:first-child{border-left:0}
#fill-bar .cell-label,#fill-bar strong{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
#fill-bar strong{color:var(--accent-text)}
#fill-bar .cell-row,#fill-bar .bar-actions{display:flex;flex-direction:row;align-items:center;gap:var(--s1)}
#fill-bar .bar-actions{margin-left:auto}
#fill-bar button,#fill-bar select,#fill-bar input{height:26px;font-size:var(--f-sm)}
#fill-bar input[type=number]{width:56px}
#fill-bar .link{color:var(--muted)}
#fill-bar .link:hover:not(:disabled){color:var(--text)}
#fill-bar .primary{height:30px;padding:0 16px;margin-left:var(--s1)}
#fill-bar #fill-readout{font-size:var(--f-md);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.capture-list{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s1)}
.capture{position:relative;margin:0;width:64px;height:64px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--bg,#111)}
.capture img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.capture.expanded{width:100%;height:auto}
.capture.expanded img{object-fit:contain;cursor:zoom-out;max-height:60vh}
.capture button{position:absolute;top:2px;right:2px;width:20px;height:20px;min-width:0;padding:0;line-height:1;font-size:var(--f-sm);opacity:.85}
.reply-list{list-style:none;margin:0 0 var(--s1);padding:0;max-height:200px;overflow:auto}
.reply-list li{padding:6px 0;border-top:1px solid var(--line);font-size:var(--f-sm);white-space:pre-wrap;word-break:break-word}
.reply-list .reply-meta{color:var(--muted);font-size:var(--f-xs);font-variant-numeric:tabular-nums;margin-bottom:2px}
/* The live readout is a title-block card: the tool's name, then one cell per figure under hairline rules, a caps
   caption over the value. Figures you can type (length, segment, angle) keep a field; the others are plain text. */
.readout{position:fixed;right:14px;top:38%;z-index:60;width:220px;background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-bar);font-size:var(--f-xs)}
.readout-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);height:30px;padding:0 var(--s1) 0 10px;border-bottom:1px solid var(--line);font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.readout-head .icon{width:22px;height:22px;min-width:0;color:var(--muted)}
.readout-field{display:flex;flex-direction:column;gap:3px;margin:0;padding:7px 10px 8px}
.readout-field+.readout-field,.readout-note+.readout-field{border-top:1px solid var(--line)}
.readout-field span{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.readout-field output{display:block;font-size:var(--f-lg);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--text)}
.readout-field input{width:100%;height:28px;padding:0 6px;border-radius:3px;font-size:var(--f-lg);font-weight:600;font-variant-numeric:tabular-nums;color:var(--text)}
/* Nothing measured yet: the values step back, the labels stay legible. */
.readout[data-empty] .readout-field :is(input,output){color:var(--muted)}
/* Idle, with nothing being drawn, the card steps back; it comes forward again once it is used. */
.readout{transition:opacity var(--t)}
.readout[data-empty]:not(:focus-within):not(:hover){opacity:.72}
/* No scale on the page: one line that says so, with the way to set one, instead of "no scale" in every cell. */
.readout-note{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:7px var(--s1) 7px 10px;font-size:var(--f-sm);color:var(--muted);white-space:nowrap}
.readout-note button{height:24px;padding:0 var(--s2);color:var(--accent-text);font-size:var(--f-sm);font-weight:600}
/* Keep the live readout clear of the properties panel when it is open. */
@media (min-width:901px){body.properties-visible .readout{right:calc(var(--properties-width,244px) + 24px)}}
.tool-options-total{margin-left:auto;padding-left:var(--s2);font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;white-space:nowrap}
.context-sub{display:flex;flex-direction:column}
.context-submenu{display:none;flex-direction:column;margin:0 0 var(--s1) 38px;border-left:1px solid var(--line)}
.context-sub.open .context-submenu{display:flex}
.context .context-submenu>button:not(:has(>.ic:not(.ic-end))){height:28px;padding-left:12px;font-size:var(--f-sm)}

#toast{
  position:fixed;bottom:52px;left:50%;transform:translateX(-50%);max-width:76vw;
  padding:var(--s3) var(--s5);background:var(--text);color:var(--bg);border-radius:100px;
  z-index:110;font-size:var(--f-md);box-shadow:var(--e2);
}

/* The command palette is the same card: tools first, then commands, each under a caps heading, every row with its
   icon column; the row Enter will run carries the menu's red edge. */
#palette{
  position:fixed;top:12vh;left:50%;transform:translateX(-50%);width:min(580px,92vw);z-index:120;
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r-sm);
  box-shadow:var(--shadow-card);overflow:hidden;
}
#palette-input{width:100%;height:auto;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:var(--s4) var(--s5);font-size:var(--f-lg)}
#palette-input:focus{box-shadow:none;border-color:var(--line)}
#palette-input:focus-visible{outline:none}
#palette-list{max-height:48vh;overflow:auto;padding:0 0 var(--s1)}
.palette-heading{padding:var(--s3) 12px var(--s1);font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
#palette-list button{display:flex;align-items:center;gap:10px;width:100%;height:32px;padding:0 12px;border:0;border-radius:0;text-align:left;color:var(--text)}
#palette-list button:hover:not(:disabled){background:var(--wash)}
#palette-list .palette-ic{width:20px;display:inline-grid;place-items:center;flex:none}
#palette-list button[aria-selected=true]{background:var(--wash);box-shadow:inset 3px 0 0 var(--accent)}
#palette-list .palette-empty{padding:var(--s4);color:var(--dim);font-size:var(--f-md)}
#palette-foot{padding:var(--s2) var(--s5);border-top:1px solid var(--line-soft);font-size:var(--f-xs);color:var(--dim)}

/* --- Responsive ---------------------------------------------------------- */
@media(max-width:1180px){
  .left{width:var(--left-width,182px)}
  .properties{width:var(--properties-width,220px)}
  .menus summary{padding:0 var(--s2)}
  .toolbar button{min-width:38px;padding:0 var(--s1)}
}
@media(max-width:900px){
  .left{width:158px}
  .appbar{gap:var(--s2)}
  .appbar>[data-action="signatures"]{display:none}
  .local-badge{display:none}
  #coordinates{display:none}
  .canvas-wrap{padding:var(--s4)}
  .markups{height:var(--markups-height,168px)}
  body.properties-visible .properties{position:fixed;right:0;top:78px;bottom:30px;width:min(290px,90vw);z-index:70;box-shadow:var(--e3)}
}
@media(max-width:600px){
  .left{display:none}
  .wordmark{font-size:0;gap:0}
  /* The bar cannot grow, so the menu strip scrolls rather than pushing the file actions off the edge. */
  .appbar{gap:var(--s1);overflow:hidden}
  .menus{flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .menus::-webkit-scrollbar{height:0}
  .menus summary{font-size:var(--f-xs);padding:0 var(--s1)}
  .menu{position:fixed;top:48px;left:8px!important;right:8px!important;min-width:0}
  .view-controls [data-action=width],.view-controls [data-action=rotate]{display:none}
  .listbar #page-filter{display:none}
  .listbar input{max-width:150px}
  #dashboard{padding:var(--s5) var(--s4)}
  .canvas-wrap{padding:var(--s3)}
}

/* The options bar takes room only when the tool in hand has options. It used to be held open and empty so the
   drawing never shifted between tools; a permanent empty band above every drawing costs more than that shift. */
.toolbar-line{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.toolbar-line::-webkit-scrollbar{height:4px}
.toolbar-line::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
/* Tool captions: 11px/500, never smaller; the current tool's is 600. */
.toolbar button span{font-size:var(--f-xs);font-weight:500}
.toolbar button.active span{font-weight:600}
@media(max-width:600px){
 .toolrow{flex-wrap:wrap;gap:4px}
 .toolbar{flex-basis:100%;width:100%}
 .toolbar button{min-width:48px}
 .toolrow-end{width:100%;flex-direction:row;align-items:center;justify-content:flex-end}
 .tool-options{height:36px;min-height:36px}
 .tool-options label,.tool-options input,.tool-options select{font-size:var(--f-sm)}
}

@media(max-width:900px){body.properties-visible .properties{top:auto;bottom:30px;height:50vh;max-height:calc(100vh - 230px);width:min(340px,100vw)}}

/* Feedback changes color only; no movement or layout animation during editing. */
html{scroll-behavior:auto}
button,input,select,textarea,.menus summary,.doc-tab,.recent-row,.thumb,tbody tr{transition-duration:100ms}
#scene,#scene *,.handle,.tool-options,.markups,.properties{animation:none;transition:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The drawing's own layers sit above the review layers, set apart by a rule and a lighter weight. */
.layer-row.pdf-layer label{font-weight:400}
.layer-row.pdf-layer{padding-block:2px}
.panel-rule{border:0;border-top:1px solid var(--line);margin:14px 0 4px}
.layer-all{width:100%;margin-top:8px;font-size:var(--f-sm)}
#toast .toast-action{margin-left:var(--s3);height:var(--h-sm);padding:0 var(--s3);border-radius:var(--r-sm);background:var(--accent-strong);color:#fff;font-weight:600}
#toast{display:inline-flex;align-items:center;gap:var(--s2)}

/* Bulk markup selection stays compact and separate from row navigation. */
.markup-check-cell{width:38px;text-align:center;padding:4px 8px}
.markup-check-cell input[type=checkbox]{width:16px;height:16px;min-width:16px;margin:0;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
.markup-check-cell input:disabled{cursor:default;opacity:.45}
#markup-selected-count{white-space:nowrap;color:var(--text)}
#delete-selected-markups{white-space:nowrap}

.product-help{width:min(560px,calc(100vw - 32px));max-height:85vh;overflow:auto}.product-help label{display:grid;gap:6px;margin:14px 0}.product-help textarea{min-height:110px;resize:vertical}.product-help p,.product-help li{line-height:1.55}.product-help li{margin:10px 0}.product-help select,.product-help input,.product-help textarea{width:100%;box-sizing:border-box}

.tool-sections{display:flex;gap:4px;flex-wrap:wrap;padding:3px 0}.toolrow .tool-sections button{height:30px;min-width:auto;padding:0 10px;font-size:var(--f-sm)}.toolrow .toolbar .tool-group button span{display:block}.toolrow .toolbar .tool-group button{height:42px;min-width:48px}.focus-view main>.left,.focus-view main>.properties,.focus-view #markups{display:none!important}

#quick-start-guide{position:fixed;bottom:50px;left:24px;width:min(360px,calc(100vw - 48px));z-index:90;background:var(--panel);border:1px solid var(--line);box-shadow:var(--e3);padding:18px;border-radius:10px}#quick-start-guide p{line-height:1.5}#quick-start-guide button{margin:4px}

/* A quantity workflow, using the same controls as Measure and Markup. */
.takeoff-ribbon{display:flex;gap:8px;padding:5px 0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.takeoff-group{display:flex;flex:none;flex-direction:column;gap:5px;border-right:1px solid var(--line-soft);padding-right:8px}.takeoff-group:last-child{border:0}.takeoff-controls{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,44px);gap:2px}.takeoff-group>small{font-size:var(--f-cap);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}.toolrow .toolbar .takeoff-controls button{height:44px;min-width:44px;padding:3px 4px}.toolrow .toolbar .takeoff-controls button span{display:block;font-size:var(--f-xs)}

.cloud-edit-controls{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.cloud-edit-controls button{border:1px solid var(--line);border-radius:4px;padding:6px 8px;background:var(--chrome);font-size:var(--f-xs)}.cloud-edit-controls p{flex-basis:100%;margin:2px 0;font-size:var(--f-xs)}

/* Compact ribbon: category and utility controls above one scrolling tool strip. */
.toolrow{display:block;padding:3px 10px}.tool-sections{align-items:center;gap:2px;flex-wrap:nowrap;overflow-x:auto}.tool-sections .toolbar-collapse{margin-left:auto;white-space:nowrap}.toolrow .toolrow-end{display:flex;flex-direction:row;width:auto;align-items:center;gap:3px;margin:0 0 0 6px;padding:0 0 0 6px;border-left:1px solid var(--line-soft)}.toolrow-end button{white-space:nowrap}.toolbar-content{display:flex;overflow-x:auto;gap:5px;padding:3px 0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.toolbar-content[hidden]{display:none}.toolbar-content .toolbar-line{display:contents}.toolbar-content .tool-group{flex:none}.toolbar-content .takeoff-ribbon{padding:0;gap:6px;overflow:visible}.takeoff-controls{display:flex;gap:1px}.takeoff-group{gap:2px;padding-right:6px}.toolrow .toolbar .tool-group button,.toolrow .toolbar .takeoff-controls button{height:36px;min-width:42px;padding:2px 5px}.takeoff-group>small{line-height:12px}.toolbar-collapsed+.tool-options{display:none!important}.toolbar-collapse:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* The collapse toggle's words are set like the button's own; below 1180px it is the chevron alone, named by its
   aria-label, so the categories and the page utilities keep the line uncut. */
.toolbar .toolbar-collapse .toolbar-collapse-label{display:inline;font-size:inherit;font-weight:inherit;line-height:inherit}
@media (max-width:1180px){.toolbar .toolbar-collapse .toolbar-collapse-label{display:none}.toolbar .tool-sections .toolbar-collapse{min-width:30px;padding:0 var(--s2)}}
@media(max-width:700px){.tool-sections{flex-wrap:wrap}.toolrow .toolrow-end{margin-left:auto}.tool-sections button{padding:0 6px!important}.toolrow{padding:2px 5px}}

.toolbar-scroll-shell{display:flex;align-items:stretch;min-width:0}.toolbar-scroll-shell[hidden]{display:none}.toolbar-scroll-shell .toolbar-content{flex:1;min-width:0}.toolbar .toolbar-scroll{min-width:22px;width:22px;height:auto;flex:none;padding:0;background:var(--chrome)}.toolbar-scroll[hidden]{display:none}

.takeoff-dialog{width:min(1050px,94vw);max-width:94vw;max-height:90vh;overflow:auto;padding:20px 24px 0}.takeoff-dialog h2{margin:0}.takeoff-dialog p{line-height:1.5}.takeoff-dialog h2+p{margin:var(--s2) 0 var(--s4);max-width:78ch;color:var(--muted);font-size:var(--f-md);line-height:1.55}.takeoff-dialog label{display:inline-flex;gap:6px;align-items:flex-start;margin:0 16px 14px 0}.takeoff-dialog input{width:110px}.takeoff-dialog table{width:100%;border-collapse:collapse}.takeoff-dialog td,.takeoff-dialog th{padding:10px 6px;text-align:left;border-bottom:1px solid var(--line)}.takeoff-dialog td input{width:90px;max-width:100%}.takeoff-footer{position:sticky;bottom:0;z-index:1;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin:20px -24px 0;padding:14px 24px;border-top:1px solid var(--line);background:var(--chrome)}.takeoff-dialog td{font-variant-numeric:tabular-nums}.estimate-total{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s4) 0 0;font-variant-numeric:tabular-nums}.estimate-total strong{font-size:var(--f-xl);font-weight:700;letter-spacing:-.01em}.estimate-total span{color:var(--muted);font-size:var(--f-md)}.symbol-preview{display:block;max-width:100%;height:auto;max-height:42vh;object-fit:contain;touch-action:none;cursor:crosshair;border:1px solid #bbb}.takeoff-dialog:has(table)>div:first-of-type{overflow-x:auto}

.symbol-results{display:flex;flex-wrap:wrap;gap:4px 14px;max-height:90px;overflow:auto;margin:12px 0}.symbol-results label{margin:0}.symbol-results input{width:auto}

.symbol-results label{display:flex;flex-direction:row;align-items:center;gap:5px;font-size:var(--f-xs);font-weight:500}.symbol-results{padding:5px}

.symbol-preview-wrap{overflow:auto;max-height:42vh;background:var(--raised,#eee);border-radius:4px}.symbol-preview{margin:auto}.symbol-preview.zoomed{max-height:none;max-width:none;margin:0}

.material-list{max-height:32vh;overflow:auto}.material-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.material-row span{flex:1}.takeoff-dialog td select{display:block;max-width:210px;margin-top:6px}.snapshot-preview{max-height:55vh;overflow:auto;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0/18px 18px}.snapshot-preview canvas{display:block;max-width:100%;max-height:55vh;height:auto;touch-action:none;cursor:crosshair;margin:auto}.takeoff-dialog input[type=checkbox]{width:auto}

.takeoff-dialog .snapshot-control{display:flex;flex-direction:row;justify-content:flex-start;gap:8px}
/* The material form is one row of fields; its buttons stand on the inputs' baseline, Save material last. */
.takeoff-dialog .material-form{display:flex;flex-wrap:wrap;align-items:flex-end}
.takeoff-dialog .material-form input[name=unit]{width:160px}
.takeoff-dialog .material-form button{margin:0 8px 14px 0}
/* Signatures: the dialogue card with the saved signatures as rows, then a caps-labelled part to create one. */
.signature-dialog{width:640px}
.signature-dialog .dialog-lede{padding:0 24px}
.signature-body{padding:0 24px 20px}
.signature-body .section-label{margin:var(--s5) 0 var(--s2)}
.signature-body .dialog-hint{margin:0 0 var(--s2)}
.signature-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
.signature-row strong{font-size:var(--f-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.signature-row button{height:30px;border-color:var(--rule-soft);font-weight:600}
.signature-row button:hover:not(:disabled){background:transparent;border-color:var(--text)}
.signature-row .danger{border-color:transparent;color:var(--accent-text)}
.signature-preview{width:150px;height:50px;background:#fff;border:1px solid var(--line);border-radius:3px}
.signature-empty{margin:0;padding:var(--s2) 0;color:var(--muted);font-size:var(--f-sm)}
.signature-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
/* The pad, the typed-name field and the status line are named by the dialogue's own module, so they are reached here
   by their place in it. The pad is paper in both themes: the signature is drawn in ink. */
.signature-fields input,.signature-fields select,.signature-body>label input{width:100%;height:36px}
.signature-body>label{margin-top:var(--s3)}
.signature-body>canvas{display:block;width:100%;height:auto;margin:var(--s3) 0 0;background:#fff;border:1px solid var(--line);border-radius:3px;touch-action:none}
.signature-body>[role=status]{margin:var(--s3) 0 0;color:var(--muted);font-size:var(--f-sm);line-height:1.5}
.signature-body>[role=status]:empty{display:none}
@media (max-width:600px){.signature-fields{grid-template-columns:1fr}.signature-row{grid-template-columns:minmax(0,1fr) auto}.signature-preview{grid-column:1/-1;order:3}}.material-form input[name=name]{width:200px}.material-form label{align-items:flex-start}
/* Phones and touch screens. The drawing gets the screen: the top bar keeps the menus (Export PDF, Signature and the
   theme are also in the File, Markup and View menus), the toolbar is two swipeable strips, the markups list and the
   properties open as sheets from the bottom, and everything tapped is at least 44 px. Two fingers zoom and pan
   the drawing; the touch handling is in app.mjs. The desktop layout is untouched. */
.status-markups{display:none}
@media (pointer:coarse){.canvas-wrap:has(#page-host:not([hidden])){touch-action:none}
  /* Safari reads this from the page, not from the box that scrolls, and would otherwise pan the view mid-stroke. */
  #page-host{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}}
/* Touch screens of every width: each tool, category and tool option a finger reaches for is at least 44 px, and the
   tool strip is swiped rather than stepped with its small arrows. The handles on the drawing get their 44 px targets
   in app.mjs. A mouse keeps the compact desktop rows. */
@media (pointer:coarse){
  .toolrow .toolbar :is(.tool-group,.takeoff-controls) button,.toolrow .toolbar .tool-sections button,.toolrow .toolrow-end button,.toolrow-end #scale-badge{min-width:44px;min-height:44px}
  .toolrow .toolbar .toolbar-scroll{display:none!important}
  .tool-options{height:auto;min-height:52px}
  .tool-options :is(input,select,button),.tool-options label>input[type=color]{min-height:44px}
  .tool-options input[type=color]{min-width:44px}
}
@media (max-width:700px){
  .appbar{height:48px;min-height:48px;gap:2px;padding:0 4px 0 8px}
  .appbar>[data-action="export"],.appbar>[data-action="signatures"],.appbar>[data-action="theme"],.appbar>[data-action="open"]{display:none}
  .appbar .wordmark{font-size:19px;height:44px}
  /* Do not mask the menu ancestor: Safari/Chromium clip its fixed dropdowns too. */
  .menus{flex:1 1 0;min-width:0;-webkit-mask-image:none;mask-image:none}
  .appbar>.grow{display:none}
  .appbar .plan-chip{position:relative;font-size:var(--f-sm)!important;margin-left:4px!important;letter-spacing:.06em!important}
  .appbar .plan-chip::after{content:'';position:absolute;inset:-10px -4px}
  #toast{width:max-content;max-width:calc(100vw - 24px);border-radius:16px;text-align:center;line-height:1.35}
  .toolrow .toolbar-scroll{display:none!important}
  .menus summary{height:44px;display:flex;align-items:center;padding:0 10px!important;font-size:var(--f-lg)!important}
  .appbar>[data-action="open"]{min-height:40px}
  .menu{position:fixed;top:50px;left:8px!important;right:8px!important;min-width:0;max-height:calc(100dvh - 64px);overflow-y:auto}
  .menu button{min-height:44px}
  .menu kbd{display:none}
  .tabbar{height:44px}
  .tabbar .icon{width:44px;height:44px}
  #save-state{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .toolrow{padding:0 4px;gap:0}
  .tool-sections{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding:2px 0}
  .tool-sections::-webkit-scrollbar{height:0}
  .tool-sections button{height:44px!important;flex:none}
  .toolrow-end{width:auto!important;flex:none;flex-direction:row!important;margin-left:4px;padding-left:4px}
  /* The categories and the page utilities scroll together as one strip, as they did when they shared a box. */
  .toolrow-head{overflow-x:auto;scrollbar-width:none}
  .toolrow-head::-webkit-scrollbar{height:0}
  .toolrow-head .tool-sections{flex:none;overflow:visible}
  .toolrow .toolrow-end button,.toolrow-end #scale-badge{min-height:44px}
  .toolbar-scroll{display:none}
  .toolbar-content{scrollbar-width:none}
  .toolbar-content::-webkit-scrollbar{height:0}
  .toolbar-line{flex-wrap:nowrap}
  .toolbar-line button{min-width:48px;height:48px}
  .canvas-wrap{padding:8px}
  .markups.collapsed{display:none}
  .markups:not(.collapsed){position:fixed;left:0;right:0;bottom:44px;height:min(60dvh,420px)!important;z-index:65;border-radius:14px 14px 0 0;box-shadow:0 -12px 30px rgba(0,0,0,.18)}
  .markups .resizer{display:none}
  .listbar{height:auto;min-height:48px;flex-wrap:wrap;padding:4px 8px;gap:6px}
  .listbar button,.listbar select,.listbar input{min-height:44px}
  .statusbar{height:44px;padding:0 4px;gap:2px}
  .status-markups{display:inline-flex;align-items:center;min-height:44px;padding:0 10px}
  /* The one Snap toggle stays in reach on a phone as a 44px glyph; its name is in its label. */
  .statusbar #snap-toggle{font-size:0;gap:0;min-width:44px;min-height:44px;padding:0;justify-content:center}
  #tool-hint,#coordinates,#readout-toggle,.statusbar .divider,.view-controls [data-action=width],.view-controls [data-action=rotate],.view-controls [data-action=zoomIn],.view-controls [data-action=zoomOut]{display:none}
  .page-field{font-size:0}
  .page-field input{font-size:var(--f-lg);min-height:44px;min-width:44px}
  .view-controls .icon{min-width:44px;height:44px}
  .view-controls [data-action=fit]{min-height:44px}
  /* On the narrowest phones the zoom readout gives way to the Snap glyph; pinch and Fit page still zoom. */
  @media (max-width:430px){#zoom{display:none}}
  #zoom{min-height:44px}
  .doc-tab button{min-height:44px}
  .doc-tab button+button{min-width:44px}
  body.properties-visible .properties{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto!important;height:min(62dvh,520px);max-height:none;border-left:0;border-radius:14px 14px 0 0;z-index:70;box-shadow:0 -12px 30px rgba(0,0,0,.2)}
  /* The live readout floats over the middle of the drawing on a desktop, which on a phone is exactly where the next
     point is tapped. Here it is a strip docked above the status bar, its fields side by side. */
  .readout{left:0;right:0!important;top:auto;bottom:44px;width:auto;display:flex;align-items:flex-end;gap:6px;padding:6px 4px 6px 8px;border-radius:12px 12px 0 0;border-bottom:0;font-size:var(--f-sm)}
  .readout-head{order:2;margin:0;flex:none;height:auto;padding:0;border:0}
  #readout-title{display:none}
  .readout-head .icon{width:44px;height:44px}
  #readout-fields{display:flex;gap:6px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
  .readout-field{margin:0;flex:none;min-width:88px;padding:0}
  .readout-field+.readout-field,.readout-note+.readout-field{border-top:0}
  .readout-field input,.readout-field output{min-height:36px}
}

/* Keep page controls outside the scrolling previews and let long labels wrap. */
#side-content.pages-panel{display:flex;flex-direction:column;overflow:hidden;padding:0}
.pages-heading{flex:none;padding:var(--s3);max-height:52%;overflow:auto;border-bottom:1px solid var(--line-soft)}
.pages-heading .side-caption{overflow-wrap:anywhere;margin-bottom:var(--s2)}
.pages-heading .panel-actions{margin-top:var(--s2);padding-top:var(--s2)}
.pages-heading .panel-actions button{height:auto;min-height:30px;padding:6px;white-space:normal;overflow-wrap:anywhere;text-align:left;line-height:1.4;min-width:0}
.pages-list{flex:1;min-height:100px;overflow:auto;padding:var(--s3);scrollbar-gutter:stable}
.pages-list .thumb{white-space:normal;flex-shrink:0;overflow:hidden}
.pages-list .thumb canvas{flex:none;object-fit:contain}
.pages-list .thumb span{flex:none;line-height:1.4;overflow-wrap:anywhere;text-align:left}
.pages-heading .panel-actions.row button{flex:1;width:0}

/* Find a sheet without losing the surrounding page previews. */
.page-navigation{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.page-search{width:100%;height:30px;font-size:var(--f-sm)}
.page-navigation-status{font-size:var(--f-xs);line-height:1.4;color:var(--muted)}
.page-bookmarks{border-top:1px solid var(--line-soft);padding-top:var(--s2)}
.page-bookmarks summary{padding:var(--s1) 0;font-size:var(--f-sm);font-weight:600;color:var(--text)}
.page-bookmarks[open] summary{margin-bottom:var(--s1)}
.page-bookmark{display:block;width:100%;height:auto;min-height:28px;text-align:left;white-space:normal;overflow-wrap:anywhere;padding:var(--s2) var(--s2) var(--s2) calc(var(--s2) + min(var(--bookmark-depth,0),4)*10px);font-size:var(--f-sm);line-height:1.4;color:var(--muted)}
.page-bookmark:hover:not(:disabled){color:var(--text)}
.page-bookmark[aria-current=page]{background:var(--select);color:var(--text);font-weight:600}
.pages-list .thumb .page-thumbnail-label{display:block;font-size:var(--f-xs);color:var(--muted);line-height:1.4;overflow-wrap:anywhere}
.pages-list .thumb.active .page-thumbnail-label{color:var(--text);font-weight:600}

/* Keep the selected category distinct from the tool selected beneath it. */
/* The categories are the desk's segmented control (desk.css .view-toggle): a hairline box of plain segments, the
   selected one ink. The page utilities share the line (.toolrow-head), outside the category group. */
.section-seg{display:inline-flex;flex:none;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.toolrow .tool-sections .section-seg button{height:var(--h-md);padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--muted);font-weight:600}
.toolrow .tool-sections .section-seg button:hover:not(:disabled){background:var(--raised);color:var(--text)}
.toolrow .tool-sections .section-seg button[aria-pressed=true],.toolrow .tool-sections .section-seg button[aria-pressed=true]:hover:not(:disabled){background:var(--text);color:var(--bg)}
.toolbar-content .tool-group button.active,.toolbar-content .takeoff-controls button.active{box-shadow:inset 0 -2px 0 var(--accent)}
@media (max-width:700px){
  .listbar{overflow:visible}
  .page-bookmark{min-height:44px}
  .toolrow .toolbar .tool-group button,.toolrow .toolbar .takeoff-controls button{min-height:44px}
}

.page-management{margin-top:var(--s3);border-top:1px solid var(--line-soft);padding-top:var(--s2)}
.page-management summary{font-size:var(--f-sm);font-weight:600;padding:var(--s1) 0;color:var(--muted)}
.page-management[open] summary{color:var(--text)}
/* The export suggestion: a small card under the top bar, never over the drawing's working area on a phone. */
/* A card on the desk (the card rule, 4px corners, the flat offset shadow), hung in the drawing area's top-right
   corner below the tool row, clear of the page utilities; its action is quiet beside the bar's red Export PDF.
   On a short window it may meet the live readout, so it stands above it (and still below the menus). */
.export-cue{position:fixed;top:calc(var(--canvas-top,100px) + 12px);right:calc(var(--canvas-right,0px) + 16px);z-index:61;width:min(340px,calc(100vw - 32px));display:grid;gap:8px;padding:14px 16px 12px;background:var(--chrome);color:var(--text);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-card)}
.export-cue-actions button{border:1px solid var(--rule-soft)}
.export-cue-actions button:hover:not(:disabled){background:transparent;border-color:var(--text)}
.export-cue strong{font-size:var(--f-lg);font-weight:700;letter-spacing:-.01em}
.export-cue p{margin:0;color:var(--muted);line-height:1.45}
.export-cue-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
@media (prefers-reduced-motion:no-preference){.export-cue{animation:export-cue-in .22s ease-out}}
@keyframes export-cue-in{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:700px){.export-cue{top:auto;bottom:76px;left:16px;right:16px;width:auto}}