#screen-sizing,#screen-plan{max-width:1400px}.ps-toolbar{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.ps-toolbar .field{margin:0}.ps-toolbar select{width:auto;min-width:95px}.ps-toolbar input[type=number],.ps-dialog input[type=number]{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font:inherit;width:110px}.ps-toolbar .active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.ps-viewer{height:660px;overflow:auto;position:relative;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;margin-top:14px;touch-action:none}.ps-sheet{position:relative;transform-origin:0 0;background:white;box-shadow:var(--shadow)}.ps-sheet canvas{display:block;width:100%;height:100%}.ps-sheet svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.ps-empty{padding:100px 24px;text-align:center;color:var(--text-dim)}.ps-empty h2{color:var(--text);margin-bottom:8px}.ps-status{min-height:22px;color:var(--text-dim);font-size:12.5px;margin:12px 0}.ps-schedule{overflow-x:auto}.ps-schedule table{min-width:900px}.ps-schedule tr[aria-selected=true]{background:var(--accent-soft)}.ps-schedule td{font-size:12.5px}.ps-schedule button{white-space:nowrap}.ps-total{margin-top:20px}.ps-total .n{font-size:23px}.ps-dialog{border:1px solid var(--border);border-radius:16px;padding:24px;max-width:480px;width:calc(100% - 32px);max-height:90vh;overflow:auto;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.ps-dialog::backdrop{background:rgba(12,24,28,.55)}.ps-dialog h2{font-size:19px;margin-bottom:16px}.ps-dialog .ps-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.ps-dialog output{display:block;padding:14px;background:var(--accent-soft);border-radius:10px;margin:12px 0;color:var(--text)}.ps-check{display:flex;gap:8px;align-items:center;margin:14px 0}.ps-save{font-size:12px;color:var(--text-dim)}.ps-error{color:var(--danger)}@media(max-width:1050px){.ps-viewer{height:520px}.ps-total{grid-template-columns:repeat(2,1fr)}}
.ps-underlay{position:absolute;left:0;top:0;pointer-events:none;transform-origin:0 0;z-index:1}
.ps-sheet .ps-underlay canvas{display:block;width:auto;height:auto;position:static}
.ps-sheet svg{z-index:2}
.ps-floor-bar{margin-top:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px}
.ps-floor-bar input[type=range]{width:130px}
/* .ps-sheet-bar no longer gets its own boxed row - it lives inline in the main toolbar now (see the Compact rows section below), so it no longer needs a background/border/padding of its own. */
.ps-inline{margin:0;white-space:nowrap}
.ps-iq-bar[hidden],.ps-floor-bar[hidden],.ps-sheet-bar[hidden]{display:none}
.ps-iq-bar{margin-top:10px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;align-items:center}
.ps-iq-bar .hint{flex:1 1 320px;min-width:0;margin:0}

/* ---------------- Dropping a plan ---------------- */
/* Saving an attachment and finding it again in a file dialog is two minutes of nothing,
   several times a job. The whole viewer is the target, and it says so while you drag. */

.ps-viewer{position:relative}
.ps-drop{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  border:2px dashed var(--brand-primary,#0a5b69);border-radius:12px;
  background:color-mix(in srgb,var(--brand-primary,#0a5b69) 9%,transparent);
  backdrop-filter:blur(2px);pointer-events:none;
}
.ps-drop span{
  font-size:16px;font-weight:600;color:var(--brand-primary,#0a5b69);
  background:var(--surface,#fff);border:1px solid var(--line,#e4ddd2);
  border-radius:99px;padding:10px 20px;box-shadow:0 10px 26px -18px rgba(7,47,58,.7);
}
.ps-drop[hidden]{display:none}

/* ---------------- Getting to a page ---------------- */
/* Arrows carry the work; the dropdown is there for the jump. */

.ps-pager-row{display:flex;align-items:center;gap:4px}
.ps-pager-row select{min-width:104px}
.ps-page-step{padding:0 11px;min-width:34px;font-size:17px;line-height:1.5}
.ps-page-step[disabled]{opacity:.35;cursor:default}

/* ---------------- Greyscale plan ---------------- */
/* The builder's sheet is already coloured, and so are our markings. Draining the colour
   from the sheet leaves ours as the only colour on screen – which is what makes a
   colour-coded markup worth colour-coding. The filter is on the drawing, never the PDF. */

.ps-sheet canvas,
.ps-sheet .ps-underlay{transition:filter .15s ease}
.ps-sheet.ps-greyscale canvas,
.ps-sheet.ps-greyscale .ps-underlay{filter:grayscale(1) contrast(.94) brightness(1.03)}

/* ---------------- Full screen ---------------- */
/* "Pop out" the whole surface (toolbars, plan, room schedule editor) to fill the screen and
   give the plan itself more room. Works whether or not the browser actually granted real
   Fullscreen (native fullscreen just adds this class too, via the fullscreenchange listener
   in module.js), so the same layout applies to the CSS-only fallback when that API is
   missing or refused. The toolbars stay where they already are, above and below the plan -
   an earlier version of this also tried to push every toolbar below the plan by reordering
   the flex children, which did not read as "bigger" in practice, so that part was dropped:
   the plan viewer simply grows (flex:1) to fill whatever room the toolbars do not need. */

.ps-surface.ps-fullscreen{
  position:fixed;inset:0;z-index:80;margin:0;max-width:none;
  display:flex;flex-direction:column;overflow:auto;
  border-radius:0;background:var(--surface,#fff);
}
.ps-surface.ps-fullscreen .ps-viewer{flex:1 1 auto;height:auto;margin-top:8px}
.ps-surface.ps-fullscreen .ps-controls{flex:0 0 auto}

/* ---------------- Compact rows ---------------- */
/* Plan sheet crop moved onto the same row as the other plan controls - this keeps it a flex
   item of that row (rather than a row of its own) without giving up the ability to hide the
   whole group at once via `hidden` on #ps-sheet-bar; :not([hidden]) is what stops the
   `display:contents` below from fighting the browser's own hiding of the element. */
.ps-inline-group{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.ps-inline-group:not([hidden]){display:contents}

/* A long PDF filename (Henley plan sets run to thirty-odd pages, each with its own file
   name) used to stretch the Plan dropdown across most of the row, pushing zoom, page and
   the rest of the toolbar out to the right or onto their own line. */
.ps-plan-select{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The house type's standard plan over the client's (module.js, renderStandard/inkOnly).
   Already blue linework on transparent - so no blending, and the Greyscale setting must not
   touch it (hence the extra specificity over `.ps-sheet.ps-greyscale canvas`). */
.ps-standard{position:absolute;left:0;top:0;pointer-events:none;transform-origin:50% 50%;z-index:1}
.ps-sheet .ps-standard canvas,
.ps-sheet.ps-greyscale .ps-standard canvas{display:block;position:static;filter:none}

/* Saved markup per house type (26 Sep 2026). */
.ps-tpl-list{list-style:none;margin:8px 0;padding:0;max-height:320px;overflow:auto}
.ps-tpl-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
.ps-tpl-list li span:last-child{display:flex;gap:6px;flex:none}
.ps-import-bar{background:var(--accent-soft);border-radius:8px;padding:4px 8px}
.ps-import-bar[hidden]{display:none}