/*---------------------------------------------------------------------------------------------

Copyright (c) 2026 Ikeloa Technology Pvt. Ltd.
All rights reserved.

This code is proprietary and confidential.
Unauthorized copying, transfer, distribution, modification, public display,
or performance of this software, in source or binary forms, is strictly
prohibited without express written permission from Ikeloa Technology Pvt. Ltd.

The code is not allowed to be used in any way outside Ikeloa Technology Pvt. Ltd.
and the compiled software must be used with legal license from Ikeloa Technology Pvt. Ltd.
--------------------------------------------------------------------------------------------*/

/* scider.ai's type: DM Sans to read, Space Grotesk for headings, JetBrains Mono for the wordmark and the small labels.
   Served from out/fonts, where the build copies them (fonts/ beside this file; the Scider chat's JetBrains Mono). */
@font-face {
	font-family: 'DM Sans Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 1000;
	src: url('out/fonts/dm-sans-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'DM Sans Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 1000;
	src: url('out/fonts/dm-sans-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Space Grotesk Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url('out/fonts/space-grotesk-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Space Grotesk Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 300 700;
	src: url('out/fonts/space-grotesk-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'JetBrains Mono Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url('out/fonts/jetbrains-mono-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'JetBrains Mono Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url('out/fonts/jetbrains-mono-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens, in scider.ai's look: colour by role, its teal the one accent; corners by how far a surface floats; type by its
   rank, in two weights and three families. The drawing's own stage keeps the desktop viewer's two backgrounds, whatever
   the page's theme. */
:root {
	/* Corners, by elevation, as Scider's own tiers: a control; a container inside a surface; a surface floating over
	   another (a bar, a menu, a card, a tooltip); the two that lead their page (the drop zone, the bill). */
	--radius-xsmall: 2px;
	--radius-control: 8px;
	--radius-inner: 8px;
	--radius-outer: 12px;
	--radius-prominent: 14px;
	--radius-pill: 999px;
	/* Type, by rank: Scider's ramp, with the landing page's title and lede its only larger roles. */
	--fs-display: 32px;
	--fs-body-large: 15px;
	--fs-heading1: 26px;
	--fs-heading2: 18px;
	--fs-heading3: 13px;
	--fs-body1: 13px;
	--fs-label1: 12px;
	--fs-label2: 11px;
	--fs-label3: 10px;
	/* The small labels set in the mono, uppercase and spaced, as scider.ai's "PRIVATE BETA" is. */
	--fs-mono-label: 10.5px;
	--fw-regular: 400;
	--fw-semibold: 600;
	color-scheme: light dark;
	--bg: #fbfbfa;
	--surface: #ffffff;
	--surface-sunken: #f3f5f4;
	--text: #071026;
	--muted: #475569;
	--border: #e8e8e6;
	--border-strong: #d4d4d0;
	/* scider.ai's teal, where it is large or only colour: a headline, a glow, an edge, a soft fill. Behind or as small
	   text, the deeper --accent, for contrast (4.9:1 with white). */
	--brand: #0ca4b0;
	--brand-line: rgb(12 164 176 / 28%);
	--glow: rgb(12 164 176 / 13%);
	--accent: #087c85;
	--accent-hover: #066a72;
	--accent-text: #ffffff;
	--accent-soft: #e6f7f8;
	--danger: #b42318;
	--danger-soft: #fdeceb;
	--warning: #9a6700;
	--dwg: #3653c9;
	--dxf: #0b7a75;
	--overlay: rgb(251 251 250 / 72%);
	--masthead: rgb(251 251 250 / 78%);
	--shadow: 0 1px 2px rgb(7 16 38 / 4%), 0 6px 20px rgb(7 16 38 / 6%);
	--shadow-raised: 0 10px 30px rgb(7 16 38 / 14%);
	/* Under the one filled button: a soft teal, as scider.ai's. */
	--shadow-cta: 0 6px 18px rgb(12 164 176 / 22%);
	--tooltip-bg: #101012;
	--tooltip-text: #f2f4f7;
	--font: "DM Sans Variable", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--display: "Space Grotesk Variable", "Space Grotesk", "DM Sans Variable", system-ui, sans-serif;
	--mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
	/* The work screens' chrome: a stage the model sits on, hairlines rather than borders, fills for hover and pressed
	   rather than outlines, controls floating over the stage, and one control height for every bar. */
	--stage: #f6f8f8;
	--text-faint: #6b7280;
	--ok: #1a7f37;
	--hairline: rgb(7 16 38 / 9%);
	--hover: rgb(7 16 38 / 5%);
	--pressed: rgb(7 16 38 / 8%);
	--float: rgb(255 255 255 / 88%);
	--shadow-float: 0 1px 2px rgb(7 16 38 / 5%), 0 8px 24px rgb(7 16 38 / 8%);
	--control-height: 28px;
	--grid-line: rgb(7 16 38 / 5%);
	--structural-flag: #db2777;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0d0f11;
		--surface: #15181b;
		--surface-sunken: #1c2024;
		--text: #e8edf2;
		--muted: #a3adb9;
		--border: #262b31;
		--border-strong: #3a414a;
		--brand: #22c3cf;
		--brand-line: rgb(34 195 207 / 30%);
		--glow: rgb(34 195 207 / 10%);
		--accent: #22c3cf;
		--accent-hover: #4fd2db;
		--accent-text: #061317;
		--accent-soft: #0f2a2d;
		--danger: #ff8f85;
		--danger-soft: #3a1d1c;
		--warning: #e3b341;
		--dwg: #9cafff;
		--dxf: #56d0c4;
		--overlay: rgb(13 15 17 / 72%);
		--masthead: rgb(13 15 17 / 78%);
		--shadow: none;
		--shadow-cta: 0 6px 18px rgb(34 195 207 / 18%);
		--shadow-raised: 0 8px 28px rgb(0 0 0 / 50%);
		--tooltip-bg: #353c46;
		--tooltip-text: #f2f4f7;
		--stage: #111417;
		--text-faint: #7d8794;
		--ok: #3fb950;
		--hairline: rgb(255 255 255 / 9%);
		--hover: rgb(255 255 255 / 6%);
		--pressed: rgb(255 255 255 / 11%);
		--float: rgb(24 27 31 / 90%);
		--shadow-float: 0 4px 18px rgb(0 0 0 / 45%);
		--grid-line: rgb(255 255 255 / 5%);
		--structural-flag: #f472b6;
	}
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html,
body {
	margin: 0;
}

body {
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font: var(--fs-body1)/1.5 var(--font);
	-webkit-font-smoothing: antialiased;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.icon {
	display: block;
	width: 16px;
	height: 16px;
	flex: none;
}

/* -- Masthead: the page's top bar, on every screen but the model's, which has its own ---------------------------- */

.masthead {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 20px;
	border-bottom: 1px solid var(--hairline);
	background: var(--masthead);
	backdrop-filter: blur(12px);
}

/* Scider's mark in its two tones, as scider.ai shows it; the dark theme's on a dark page (the build puts both in out/). */
.brand-logo {
	display: block;
	width: 24px;
	height: 24px;
	flex: none;
}

/* "SCIDER", in the mono, spaced: scider.ai's wordmark. */
.wordmark {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.masthead-divider {
	width: 1px;
	height: 16px;
	flex: none;
	background: var(--border-strong);
}

.product {
	color: var(--muted);
	font-size: var(--fs-body-large);
	font-weight: 500;
}

.tag {
	padding: 2px 8px;
	border: 1px solid var(--brand-line);
	border-radius: var(--radius-pill);
	background: var(--accent-soft);
	color: var(--accent);
	font-family: var(--mono);
	font-size: var(--fs-label3);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -- The landing page: the drop zone, while no drawing is open ----------------------------------------------------- */

/* Centred on a drawing sheet's faint grid, which fades out towards the edges, a teal glow behind the title: scider.ai's
   hero. */
.intake {
	position: relative;
	display: grid;
	place-items: center;
	min-height: calc(100vh - 48px);
	padding: 48px 16px 64px;
	overflow: hidden;
	background: var(--bg);
}

.intake::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 42% 38% at 50% 30%, var(--glow), transparent 70%);
	pointer-events: none;
}

.intake::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-position: center;
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse 55% 60% at 50% 45%, #000 20%, transparent 100%);
	pointer-events: none;
}

.intake-inner {
	position: relative;
	z-index: 1;
	width: min(600px, 100%);
	text-align: center;
}

/* Over the title, in the mono, spaced: scider.ai's "PRIVATE BETA · LIMITED ACCESS". */
.eyebrow {
	margin: 0 0 14px;
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

h1 {
	margin: 0 0 14px;
	font-family: var(--display);
	font-size: clamp(32px, 4.2vw, 46px);
	font-weight: var(--fw-semibold);
	line-height: 1.08;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

/* The title's second line in the teal, as scider.ai's. */
.headline-accent {
	display: block;
	color: var(--brand);
}

.lede {
	max-width: 46ch;
	margin: 0 auto 32px;
	color: var(--muted);
	font-size: 17px;
	line-height: 1.55;
	text-wrap: balance;
}

/* The page's one card, its edge dashed as a place to drop on: the edge darker under the pointer, the card in the accent
   while files are dragged over the page. */
.dropzone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 24px 32px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-prominent);
	background: var(--surface);
	box-shadow: var(--shadow-float);
	cursor: pointer;
	transition: background-color 120ms, border-color 120ms;
}

.dropzone:hover {
	border-color: var(--brand);
}

body.dragging .dropzone {
	border-style: solid;
	border-color: var(--accent);
	background: var(--accent-soft);
}

/* An icon on a soft teal tile, as scider.ai's cards carry theirs. */
.dropzone-badge {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 16px;
	border: 1px solid var(--brand-line);
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--brand);
}

.dropzone-badge svg {
	width: 24px;
	height: 24px;
}

.dropzone-title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--fs-heading2);
	font-weight: var(--fw-semibold);
}

.dropzone-hint {
	margin: 4px 0 20px;
	color: var(--muted);
	font-size: var(--fs-body1);
}

.dropzone-meta {
	margin: 16px 0 0;
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-label1);
}

/* What follows the drop, in three steps: each an icon and a few words. */
.steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
}

.step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

/* A hairline from each step to the next, at the height of their icons. */
.step + .step::before {
	content: '';
	position: absolute;
	top: 16px;
	right: calc(50% + 28px);
	width: calc(100% - 44px);
	height: 1px;
	background: var(--brand-line);
}

.step-icon {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-bottom: 8px;
	border: 1px solid var(--brand-line);
	border-radius: var(--radius-inner);
	background: var(--accent-soft);
	color: var(--brand);
}

.step-title {
	font-size: var(--fs-heading3);
	font-weight: var(--fw-semibold);
}

.step-detail {
	color: var(--text-faint);
	font-size: var(--fs-label1);
}

/* -- Controls: one kit for the work screens (ui.ts) -------------------------------------------------------------- */

/* A button is a word or an icon on nothing: a fill on hover, a deeper one pressed. Only the one thing a screen is for
   is filled with the accent. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--control-height);
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text);
	font: var(--fw-regular) var(--fs-body1)/1 var(--font);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms, color 120ms, border-color 120ms;
}

.btn:hover:not(.disabled, :disabled) {
	background: var(--hover);
}

.btn:active:not(.disabled, :disabled),
.btn.open {
	background: var(--pressed);
}

.btn.icon-only {
	width: var(--control-height);
	padding: 0;
	color: var(--muted);
}

.btn.icon-only:hover:not(.disabled, :disabled),
.btn.icon-only.open {
	color: var(--text);
}

.btn.outline {
	border-color: var(--border);
	background: var(--surface);
}

.btn.outline:hover:not(.disabled, :disabled) {
	border-color: var(--border-strong);
	background: var(--surface);
}

.btn.primary {
	padding: 0 12px;
	font-weight: var(--fw-semibold);
	background: var(--accent);
	color: var(--accent-text);
	box-shadow: var(--shadow-cta);
}

.btn.primary:hover:not(.disabled, :disabled) {
	background: var(--accent-hover);
}

/* The one thing a page is for, where there is room for it. */
.btn.large {
	height: 44px;
	padding: 0 22px;
	border-radius: 10px;
	font-size: var(--fs-body-large);
	font-weight: var(--fw-semibold);
}

.btn.disabled,
.btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.btn .icon {
	width: 16px;
	height: 16px;
}

.btn.outline > .icon:last-child:not(:first-child) {
	width: 12px;
	height: 12px;
	margin-right: -2px;
	color: var(--muted);
}

/* A switch of a few: the choice made, filled. */
.seg {
	display: inline-flex;
	gap: 2px;
}

.seg-item {
	padding: 0 10px;
	color: var(--muted);
}

.seg-item:hover:not(.disabled, :disabled) {
	color: var(--text);
}

.seg-item.pressed,
.btn.pressed {
	background: var(--pressed);
	color: var(--text);
}

.bar-divider {
	width: 1px;
	height: 16px;
	flex: none;
	margin: 0 4px;
	background: var(--hairline);
}

.ctl-select {
	height: var(--control-height);
	padding: 0 28px 0 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%238a93a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center / 12px;
	color: var(--text);
	font: var(--fs-body1) var(--font);
	cursor: pointer;
	appearance: none;
	transition: background-color 120ms;
}

.float .ctl-select {
	max-width: 220px;
	border-color: transparent;
	background-color: transparent;
}

.float .ctl-select:hover {
	background-color: var(--hover);
}

.ctl-select option {
	background: var(--surface);
	color: var(--text);
}

.ctl-number {
	width: 64px;
	height: 24px;
	padding: 0 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--text);
	font: var(--fs-label1) var(--font);
	font-variant-numeric: tabular-nums;
}

/* What is so of what is shown, in a pill: its why is its tooltip. */
.chip {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	border-radius: var(--radius-pill);
	background: var(--pressed);
	color: var(--muted);
	font-size: var(--fs-label1);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
	cursor: default;
}

.chip.warning {
	background: color-mix(in srgb, var(--warning) 15%, transparent);
	color: var(--warning);
}

.spinner {
	width: 12px;
	height: 12px;
	flex: none;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 700ms linear infinite;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

/* Controls floating over a stage: a translucent bar, lifted a little. */
.float {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	max-width: 100%;
	padding: 4px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--float);
	box-shadow: var(--shadow-float);
	pointer-events: auto;
	backdrop-filter: blur(10px);
}

/* A menu, or a small panel, under the control that opened it. */
.menu {
	position: fixed;
	z-index: 900;
	min-width: 190px;
	padding: 4px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--surface);
	box-shadow: var(--shadow-raised);
	animation: menu-in 120ms ease-out;
}

@keyframes menu-in {
	from {
		opacity: 0;
		transform: translateY(-3px);
	}
}

.menu-heading {
	padding: 6px 8px 4px;
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-mono-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	height: 30px;
	padding: 0 8px;
	border: 0;
	border-radius: var(--radius-control);
	background: none;
	color: var(--text);
	font: var(--fs-body1) var(--font);
	text-align: left;
	cursor: pointer;
}

.menu-item:hover:not(:disabled),
.menu-item:focus-visible {
	background: var(--hover);
	outline: none;
}

.menu-item:disabled {
	opacity: 0.45;
	cursor: default;
}

.menu-item > .icon,
.menu-icon-space,
.menu-check {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--muted);
}

.menu-check .icon {
	width: 16px;
	height: 16px;
	color: var(--accent);
	visibility: hidden;
}

.menu-check.on .icon {
	visibility: visible;
}

.menu-label {
	flex: 1;
}

.menu-detail {
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-label2);
}

.menu-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px 4px 4px 32px;
	font-size: var(--fs-body1);
}

/* The help's keys and what they do. */
.shortcuts {
	display: grid;
	grid-template-columns: auto auto;
	gap: 8px 20px;
	margin: 0;
	padding: 4px 8px 8px;
	font-size: var(--fs-label1);
}

.shortcuts dt {
	color: var(--text);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

.shortcuts dd {
	margin: 0;
	color: var(--muted);
}

/* One tooltip for the page, beside the control the pointer rests on. */
.tooltip {
	position: fixed;
	z-index: 1000;
	max-width: 280px;
	white-space: pre-line;
	padding: 6px 8px;
	border-radius: var(--radius-outer);
	background: var(--tooltip-bg);
	color: var(--tooltip-text);
	font-size: var(--fs-label1);
	line-height: 1.4;
	pointer-events: none;
	box-shadow: var(--shadow-float);
	opacity: 0;
	transform: translateY(2px);
	transition: opacity 100ms, transform 100ms;
}

.tooltip.visible {
	opacity: 1;
	transform: none;
}

@media (prefers-color-scheme: dark) {
	.tooltip {
		background: #353c46;
		box-shadow: 0 4px 14px rgb(0 0 0 / 45%);
	}
}

/* -- Workspace: the drawings and panels beside the viewer -------------------------------------------------------- */

body.working {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	height: 100vh;
	overflow: hidden;
}

.workspace {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	min-height: 0;
}

.sidebar {
	overflow-y: auto;
	border-right: 1px solid var(--hairline);
	background: var(--surface);
}

.panel-section {
	padding: 16px;
	border-bottom: 1px solid var(--hairline);
}

.panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

.panel-title {
	margin: 0 0 8px;
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-mono-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.panel-heading .panel-title {
	margin: 0;
}

.panel-count {
	margin-left: 4px;
	font-weight: var(--fw-regular);
}

.panel-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.panel-empty {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-body1);
}

.panel-section > .btn {
	margin: 0 0 6px -6px;
}

.list-button {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text);
	font: inherit;
	font-size: var(--fs-body1);
	text-align: left;
	cursor: pointer;
}

.list-button:hover {
	background: var(--surface-sunken);
}

.list-button.selected {
	background: var(--accent-soft);
}

.list-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.list-detail {
	flex: none;
	color: var(--muted);
	font-size: var(--fs-label1);
}

/* The drawings open. */

.drawing-list {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawing {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	padding-right: 4px;
	border-radius: var(--radius-inner);
}

.drawing.selected {
	background: var(--accent-soft);
}

.drawing-open {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	padding: 8px;
	border: 0;
	border-radius: var(--radius-inner);
	background: transparent;
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.drawing:not(.selected) .drawing-open:hover {
	background: var(--surface-sunken);
}

.drawing-text {
	display: grid;
	min-width: 0;
}

.drawing-name {
	overflow: hidden;
	font-size: var(--fs-body1);
	font-weight: var(--fw-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drawing-detail {
	overflow: hidden;
	color: var(--muted);
	font-size: var(--fs-label1);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drawing.failed .drawing-detail {
	color: var(--danger);
}

.drawing-progress {
	position: absolute;
	right: 10px;
	bottom: 4px;
	left: 10px;
	height: 2px;
	overflow: hidden;
	border-radius: var(--radius-pill);
	background: var(--border);
	display: none;
}

.drawing.uploading .drawing-progress {
	display: block;
}

.drawing-progress > span {
	display: block;
	width: 0;
	height: 100%;
	background: var(--accent);
	transition: width 0.2s;
}

.badge {
	flex: none;
	min-width: 38px;
	padding: 6px 0;
	border-radius: var(--radius-control);
	background: var(--surface-sunken);
	color: var(--muted);
	font: var(--fw-semibold) var(--fs-label3)/1 var(--font);
	letter-spacing: 0.06em;
	text-align: center;
}

.badge.dwg {
	color: var(--dwg);
}

.badge.dxf {
	color: var(--dxf);
}

/* What was inspected. */

.facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 12px;
	margin: 0;
	font-size: var(--fs-body1);
}

.facts dt {
	color: var(--muted);
}

.facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* The plans the drawing holds. */

.plan-card {
	display: grid;
	gap: 2px;
	width: 100%;
	margin-bottom: 8px;
	padding: 6px 6px 8px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-inner);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.plan-card:hover {
	border-color: var(--border-strong);
	background: var(--hover);
}

.plan-card.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.plan-thumbnail {
	width: 100%;
	height: auto;
	margin-bottom: 4px;
	border-radius: var(--radius-control);
	aspect-ratio: 232 / 128;
}

.plan-name {
	font-size: var(--fs-heading3);
	font-weight: var(--fw-semibold);
}

.plan-detail {
	color: var(--muted);
	font-size: var(--fs-label1);
}

/* A plan marked by hand: Remove sits on its picture's corner, beside the card's own button rather than in it. */
.plan-entry {
	position: relative;
}

.plan-remove {
	position: absolute;
	top: 10px;
	right: 10px;
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--border);
}

.btn.plan-remove:hover:not(:disabled) {
	background: var(--surface);
	color: var(--danger);
}

/* Mark Plan: naming the rectangle dragged. */

.mark-fields {
	display: grid;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.mark-field {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	font-size: var(--fs-body1);
}

.mark-label {
	color: var(--muted);
}

.mark-actions {
	display: flex;
	gap: 8px;
}

/* Layers: a filter and the order, what is hidden, then a row each -- its visibility, colour, name and how much it
   draws; Show Only on the row under the pointer. A hidden layer's row greyed. */

.layer-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.layer-filter {
	flex: 1;
	min-width: 0;
	height: var(--control-height);
	padding: 0 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--text);
	font: var(--fs-body1) var(--font);
}

.layer-filter:focus {
	border-color: var(--brand);
	outline: none;
}

.layer-tools .seg {
	margin-left: auto;
}

.layer-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-bottom: 4px;
}

.layer-hidden {
	flex: 1;
	color: var(--text-faint);
	font-size: var(--fs-label1);
}

.layer-actions .btn {
	height: 24px;
	padding: 0 8px;
	color: var(--muted);
	font-size: var(--fs-label1);
}

.layer-actions .btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.layer {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 -6px;
	padding: 0 0 0 6px;
	border-radius: var(--radius-control);
}

.layer:hover {
	background: var(--hover);
}

.layer .list-detail {
	font-variant-numeric: tabular-nums;
}

.layer.off .layer-name,
.layer.off .list-detail {
	color: var(--text-faint);
}

.layer.off .swatch {
	opacity: 0.35;
}

.layer-isolate {
	opacity: 0;
	transition: opacity 120ms;
}

.layer:hover .layer-isolate,
.layer:focus-within .layer-isolate {
	opacity: 1;
}

/* A section folded away: its title alone, a chevron before it. */
.panel-fold {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
}

.panel-fold .icon {
	width: 12px;
	height: 12px;
}

.panel-section.folded > :not(.panel-title) {
	display: none;
}

.panel-section.folded > .panel-title {
	margin-bottom: 0;
}

.layer-label {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
	padding: 4px 0;
	font-size: var(--fs-body1);
	cursor: pointer;
}

.layer-label input {
	margin: 0;
	accent-color: var(--accent);
}

.swatch {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-xsmall);
	box-shadow: inset 0 0 0 1px rgb(127 127 127 / 45%);
}

.layer-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* -- The viewer -------------------------------------------------------------------------------------------------- */

.viewer {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	min-width: 0;
	min-height: 0;
}

.viewer-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	min-height: 44px;
	padding: 4px 8px;
	border-bottom: 1px solid var(--hairline);
	background: var(--surface);
}

.viewer-toolbar > .seg:not(:first-child)::before,
.viewer-toolbar > .find::before {
	content: "";
	align-self: center;
	width: 1px;
	height: 16px;
	margin: 0 6px 0 4px;
	background: var(--hairline);
}

/* Finding text: a pill, the field filled until it is typed in. */
.find {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: var(--control-height);
	padding: 0 12px 0 0;
	color: var(--text-faint);
}

.find > .icon {
	width: 16px;
	height: 16px;
	margin-left: 10px;
	margin-right: -29px;
	pointer-events: none;
}

.find-input {
	width: 170px;
	height: var(--control-height);
	padding: 0 12px 0 32px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	outline: 0;
	background: var(--hover);
	color: var(--text);
	font: var(--fs-body1) var(--font);
	transition: background-color 120ms, border-color 120ms;
}

.find-input:hover:not(:disabled) {
	background: var(--pressed);
}

.find-input:focus {
	border-color: var(--accent);
	background: var(--surface);
}

.find-input:disabled {
	cursor: default;
	opacity: 0.6;
}

.viewer-stage {
	position: relative;
	min-height: 0;
	overflow: hidden;
	outline: none;
	touch-action: none;
}

.viewer-stage:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.viewer-canvas,
.viewer-overlay {
	position: absolute;
	inset: 0;
	display: block;
}

.viewer-stage[data-tool="distance"] .viewer-overlay,
.viewer-stage[data-tool="area"] .viewer-overlay,
.viewer-stage[data-tool="angle"] .viewer-overlay,
.viewer-stage[data-tool="zoomWindow"] .viewer-overlay,
.viewer-stage[data-tool="mark"] .viewer-overlay {
	cursor: crosshair;
}

.viewer-message {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	color: #59616d;
	font-size: var(--fs-body1);
	line-height: 1.7;
	text-align: center;
	white-space: pre-line;
	pointer-events: none;
}

.viewer-stage.dark .viewer-message {
	color: #b8c0cc;
}

.viewer-message.error,
.viewer-stage.dark .viewer-message.error {
	color: #d14343;
}

/* Over a drawing being read again: a chip in the corner, the drawing still there. */
.viewer-message.over {
	inset: 12px 12px auto auto;
	padding: 6px 12px;
	border-radius: var(--radius-outer);
	background: rgb(20 24 30 / 82%);
	color: #ffffff;
	font-size: var(--fs-body1);
}

.viewer-status {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 28px;
	padding: 0 12px;
	overflow: hidden;
	border-top: 1px solid var(--hairline);
	background: var(--surface);
	color: var(--muted);
	font-size: var(--fs-label1);
	white-space: nowrap;
}

.status-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.status-cursor {
	min-width: 24ch;
	font-variant-numeric: tabular-nums;
}

.status-hint {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.status-hint.measurement {
	color: var(--text);
	font-weight: var(--fw-semibold);
}

.status-notes {
	margin-left: auto;
	text-decoration: underline dotted;
	cursor: help;
}

.units-select {
	height: 22px;
	padding: 0 4px;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	background: transparent;
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.units-select:hover {
	background: var(--hover);
}

.status-why {
	cursor: help;
}

.toolbar-end {
	margin-left: auto;
}

/* -- The import, in the viewer's place --------------------------------------------------------------------------- */

.importer {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "header" "body" "footer";
	min-width: 0;
	min-height: 0;
	background: var(--stage);
}

/* The import takes the whole page: the masthead and the drawings' list make way for it, under a slim top bar of its own
   and over a status bar. */
body.working:has(.importer:not([hidden])) {
	grid-template-rows: minmax(0, 1fr);
}

body.working:has(.importer:not([hidden])) > .masthead,
.workspace:has(> .importer:not([hidden])) > .sidebar {
	display: none;
}

.workspace:has(> .importer:not([hidden])) {
	grid-template-columns: minmax(0, 1fr);
}

.importer.review {
	grid-template-areas: "header" "model" "footer";
	background: var(--surface);
}

.importer-model {
	grid-area: model;
	min-width: 0;
	min-height: 0;
}

.importer-header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 48px;
	padding: 0 8px;
	border-bottom: 1px solid var(--hairline);
	background: var(--surface);
}

.topbar-start,
.topbar-end,
.topbar-close {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.topbar-start {
	flex: 1;
	margin-right: 6px;
}

.topbar-close {
	flex: none;
}

.topbar-file {
	min-width: 0;
	margin: 0 4px 0 2px;
	overflow: hidden;
	font-size: var(--fs-heading3);
	font-weight: var(--fw-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The steps that made the model, to go back to: quiet, the one here in the text's colour. */
.crumbs {
	display: flex;
	align-items: center;
	gap: 2px;
	color: var(--text-faint);
}

.crumbs > .icon {
	width: 12px;
	height: 12px;
}

.crumb {
	padding: 0 6px;
	color: var(--muted);
	font-size: var(--fs-body1);
	font-weight: var(--fw-regular);
}

.crumb.current {
	color: var(--text);
}

.crumb.later {
	color: var(--text-faint);
}

.importer-footer {
	grid-area: footer;
	/* Never wider than the page: the counts give way, ellipsed, before the state. */
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 28px;
	padding: 0 12px;
	border-top: 1px solid var(--hairline);
	background: var(--surface);
	color: var(--muted);
	font-size: var(--fs-label1);
}

.status-counts {
	min-width: 0;
	overflow: hidden;
	font-variant-numeric: tabular-nums;
	color: var(--text-faint);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.status-state {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 70%;
	white-space: nowrap;
}

.status-text {
	flex: none;
}

.status-detail {
	overflow: hidden;
	color: var(--text-faint);
	text-overflow: ellipsis;
}

.status-dot {
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: var(--text-faint);
}

.status-state.ok .status-dot {
	background: var(--ok);
}

.status-state.warning .status-dot {
	background: var(--warning);
}

.status-state.warning .status-text {
	color: var(--warning);
}

.status-state.busy .status-dot {
	background: var(--accent);
	animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
	50% {
		opacity: 0.35;
	}
}

/* A page of the import: its column, its heading and a line on what to do. */
.importer-body {
	grid-area: body;
	min-height: 0;
	overflow-y: auto;
	padding: 28px 32px 48px;
}

.importer-body > * {
	max-width: 1180px;
	margin-right: auto;
	margin-left: auto;
}

.page-head {
	margin-bottom: 20px;
}

.page-title {
	margin: 0;
	font-family: var(--display);
	font-size: var(--fs-heading2);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
}

.page-hint {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: var(--fs-body1);
}

.page-note {
	width: fit-content;
	margin: 10px 0 0;
	color: var(--text-faint);
	font-size: var(--fs-label1);
}

.page-note.warning {
	color: var(--warning);
}

.page-footnote {
	margin-top: 24px;
	color: var(--text-faint);
	font-size: var(--fs-label1);
}

.import-waiting {
	display: grid;
	place-items: center;
	align-content: center;
	gap: 12px;
	min-height: 50vh;
	color: var(--muted);
}

.import-waiting > .spinner {
	width: 22px;
	height: 22px;
	color: var(--accent);
}

.import-error {
	margin: 0 0 12px;
	padding: 12px 16px;
	border-radius: var(--radius-inner);
	background: var(--danger-soft);
	color: var(--danger);
	font-size: var(--fs-body1);
	overflow-wrap: anywhere;
}

.select,
.number,
.text {
	min-height: var(--control-height);
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: var(--fs-body1);
}

.select:disabled,
.number:disabled,
.text:disabled {
	opacity: 0.5;
}

.mark-field .select,
.mark-field .text {
	width: 100%;
	min-width: 0;
}



/* The plan picker's cards, and the schemes'. */

.choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.choice-card {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 12px 12px 16px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--surface);
	box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
	transition: border-color 120ms, box-shadow 120ms;
}

.choice-card:hover {
	border-color: var(--border);
}


.choice-card.rejected {
	opacity: 0.55;
}

.choice-thumbnail {
	width: 100%;
	height: auto;
	border-radius: var(--radius-inner);
	background: var(--surface-sunken);
	aspect-ratio: 260 / 160;
}

.choice-title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 22px;
}

.choice-name {
	flex: 1;
	min-width: 0;
	font-size: var(--fs-heading3);
	font-weight: var(--fw-semibold);
	overflow-wrap: anywhere;
}

.choice-detail {
	margin: -4px 0 0;
	color: var(--muted);
	font-size: var(--fs-label1);
	line-height: 1.5;
}

.choice-detail.clamp {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.choice-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.choice-controls .ctl-select {
	flex: 1;
	min-width: 0;
}

.choice-controls .check {
	margin-left: auto;
}

.check {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--muted);
	font-size: var(--fs-body1);
	cursor: pointer;
}

.check input {
	margin: 0;
	accent-color: var(--accent);
}

/* The levels a drawing is used on, as pills: a level taken is filled. */
.choice-levels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
}

.choice-levels legend {
	float: left;
	width: 100%;
	margin-bottom: 6px;
	padding: 0;
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-mono-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.choice-levels .check {
	position: relative;
	height: 26px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--muted);
	font-size: var(--fs-label1);
	font-weight: var(--fw-regular);
	transition: background-color 120ms, border-color 120ms, color 120ms;
}

.choice-levels .check input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.choice-levels .check:hover {
	border-color: var(--border-strong);
	color: var(--text);
}

.choice-levels .check:has(input:checked) {
	border-color: transparent;
	background: var(--accent-soft);
	color: var(--accent);
}

.choice-levels .check:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.choice-levels:disabled {
	opacity: 0.5;
}

.choice-levels:disabled .check {
	cursor: default;
}

/* The schemes compared: wider cards, side by side while there is room; what each costs first. */
.scheme-grid {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.scheme-picture {
	aspect-ratio: 380 / 240;
}

.scheme-letter {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex: none;
	border-radius: var(--radius-control);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: var(--fs-label1);
	font-weight: var(--fw-semibold);
}

.scheme-cost {
	display: flex;
	align-items: center;
	gap: 8px;
}

.scheme-cost-value {
	font-family: var(--display);
	font-size: var(--fs-heading2);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.scheme-asks {
	margin: -4px 0 0;
	padding-left: 20px;
	color: var(--muted);
	font-size: var(--fs-label1);
	line-height: 1.5;
}

.scheme-card > .scheme-pick {
	justify-self: start;
	margin-top: 2px;
}

.scheme-ruled-out {
	margin-top: 28px;
}

.ruled-list {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.ruled-item {
	display: grid;
	grid-template-columns: 22px 170px minmax(0, 1fr);
	align-items: baseline;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--hairline);
	font-size: var(--fs-body1);
}

.ruled-item .scheme-letter {
	background: var(--pressed);
	color: var(--muted);
}

.ruled-name {
	font-weight: var(--fw-semibold);
}

.ruled-why {
	color: var(--muted);
}

/* -- The stick model --------------------------------------------------------------------------------------------- */

/*
 * The member colours carry meaning (a column is not a beam), so they are the desktop's own small palette, declared as
 * it declares them (sciderStructural.css) and lifted for a dark background. The viewport reads them back from here.
 */
.model-view {
	--structural-column: #2563eb;
	--structural-beam: #16a34a;
	--structural-brace: #9333ea;
	--structural-shell: #94a3b8;
	--structural-node: #334155;
	--structural-support: #dc2626;
	--structural-load-dead: #2563eb;
	--structural-load-live: #16a34a;
	--structural-load-lateral: #ea580c;
	--structural-grid: #cbd5e1;
	--structural-text: #64748b;
	--structural-selection: #f59e0b;
	--structural-hover: #fbbf24;
	/* The stage, painted behind a value label so a number over a member stays readable. As rgb(): the viewport reads
	   the digits of it to know a dark stage, for the contours' ramp. */
	--structural-canvas: rgb(242 243 245);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "stage inspector";
	background: var(--stage);
}

@media (prefers-color-scheme: dark) {
	.model-view {
		--structural-column: #60a5fa;
		--structural-beam: #4ade80;
		--structural-brace: #c084fc;
		--structural-shell: #64748b;
		--structural-node: #e2e8f0;
		--structural-support: #f87171;
		--structural-load-dead: #60a5fa;
		--structural-load-live: #4ade80;
		--structural-load-lateral: #fb923c;
		--structural-grid: #2f3846;
		--structural-text: #94a3b8;
		--structural-selection: #fbbf24;
		--structural-hover: #fcd34d;
		--structural-canvas: rgb(18 21 25);
	}
}

/* The building has nothing to select, and no model has nothing to inspect: the stage takes the whole width. */
.model-view.building,
.model-view.empty {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "stage";
}

.model-view.building .model-inspector,
.model-view.empty .model-inspector {
	display: none;
}

.model-stage,
.building-stage,
.model-empty,
.stage-top {
	grid-area: stage;
	min-width: 0;
	min-height: 0;
}

.model-stage,
.building-stage {
	position: relative;
	overflow: hidden;
}

/* The 3D building view: SciViz's viewer, in a frame of its own, filling the stage. */
.building-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* The desktop viewport's canvas, by the class it gives it. */
.scider-structural-canvas {
	display: block;
	cursor: crosshair;
	touch-action: none;
	outline: none;
}

.scider-structural-canvas:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.model-empty {
	place-self: center;
	max-width: 40ch;
	margin: 0;
	padding: 16px;
	color: var(--muted);
	font-size: var(--fs-body1);
	text-align: center;
}

/* The controls floating over the stage, in rows over its top, letting the model take the pointer between them. Its
   foot's corners are left to the viewers' axes. */
.stage-top {
	z-index: 2;
	align-self: start;
	display: grid;
	gap: 8px;
	padding: 12px;
	pointer-events: none;
}

.stage-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.stage-key {
	display: flex;
	margin-left: auto;
}

.stage-key > .chip {
	pointer-events: auto;
}

/* The members' colours. */
.legend {
	gap: 16px;
	padding: 6px 12px;
	color: var(--muted);
	font-size: var(--fs-label1);
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.legend-swatch {
	width: 14px;
	height: 3px;
	border-radius: var(--radius-xsmall);
}

.legend-swatch.column {
	background: var(--structural-column);
}

.legend-swatch.beam {
	background: var(--structural-beam);
}

.legend-swatch.brace {
	background: var(--structural-brace);
}

.legend-swatch.support {
	width: 8px;
	height: 8px;
	border-radius: var(--radius-xsmall);
	background: var(--structural-support);
}

/* How far the deflected shape is exaggerated, the true peak beside it. */
.scale-field {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 6px 0 8px;
	color: var(--muted);
	font-size: var(--fs-label1);
}

.scale-peak {
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label2);
	white-space: nowrap;
}

/* A colour key, in a card over the stage's foot: a list of swatches, or a result's ramp numbered at its ends. */
.float.key-card {
	display: block;
	width: 224px;
	padding: 10px 12px;
}

.key-title {
	font-size: var(--fs-label1);
	font-weight: var(--fw-semibold);
}

.key-card.warning .key-title {
	color: var(--warning);
}

.key-meta {
	margin-top: 1px;
	overflow: hidden;
	color: var(--text-faint);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.key-title ~ .key-list,
.key-title ~ .key-ramp {
	margin-top: 8px;
}

.key-note {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: var(--fs-label2);
	line-height: 1.5;
}

.key-note.clamp {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.key-list {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-label1);
}

.key-item {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.key-swatch {
	width: 12px;
	height: 12px;
	border-radius: var(--radius-xsmall);
}

.key-count {
	color: var(--text-faint);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label2);
}

.key-ramp {
	display: flex;
	overflow: hidden;
	height: 10px;
	border-radius: var(--radius-xsmall);
}

.key-ramp-step {
	flex: 1;
}

.key-ramp-ends {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label2);
}

/* -- The inspector: what is selected, as rows of facts ----------------------------------------------------------- */

.model-inspector {
	grid-area: inspector;
	min-height: 0;
	overflow-y: auto;
	padding: 16px 16px 24px;
	border-left: 1px solid var(--hairline);
	background: var(--surface);
}

.insp-head {
	margin-bottom: 8px;
}

.insp-kind,
.insp-section-title {
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-mono-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.insp-name {
	margin: 2px 0 0;
	font-family: var(--display);
	font-size: var(--fs-heading2);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
}

.insp-section {
	margin-top: 20px;
}

.insp-section-title {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 4px;
}

.insp-meta {
	overflow: hidden;
	max-width: 60%;
	font-variant-numeric: tabular-nums;
	font-weight: var(--fw-regular);
	letter-spacing: 0;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.insp-rows {
	margin: 0;
}

.insp-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--hairline);
	font-size: var(--fs-body1);
}

.insp-row dt {
	color: var(--muted);
	white-space: nowrap;
}

.insp-row dd {
	margin: 0;
	font-variant-numeric: tabular-nums;
	text-align: right;
	overflow-wrap: anywhere;
}

.insp-hint {
	margin: 16px 0 0;
	color: var(--text-faint);
	font-size: var(--fs-label1);
}

.model-inspector .chip {
	margin-top: 12px;
}

/* Too narrow for the inspector beside the model: it goes under it. */
@media (max-width: 900px) {
	.model-view {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		grid-template-areas: "stage" "inspector";
	}

	.model-inspector {
		max-height: 180px;
		padding-bottom: 12px;
		border-top: 1px solid var(--hairline);
		border-left: 0;
	}
}

/* Where the viewport tells a screen reader what was selected: off the page, but read. */
.monaco-aria-container {
	position: absolute;
	left: -999em;
}

/* -- The sheets over the model: the bill a card over it, the rest floating at its left ---------------------------- */

.model-sheet {
	--sheet-background: var(--surface);
	display: flex;
	flex-direction: column;
	grid-area: sheet;
	min-width: 0;
	min-height: 0;
	background: var(--sheet-background);
}

.model-sheet[hidden] {
	display: none;
}

/* The Building card, the checks, the design and the footings: a card floating over the model's left, under its
   controls, as tall as it needs and scrolled past the view; the model whole beside it, and its inspector in sight, to
   show what a sheet names. */
.model-sheet.floating {
	z-index: 6;
	grid-area: model;
	align-self: start;
	justify-self: start;
	width: min(360px, calc(100% - 24px));
	max-height: calc(100% - 200px);
	margin: 112px 0 0 12px;
	overflow: hidden;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	--sheet-background: var(--float);
	box-shadow: var(--shadow-float);
	backdrop-filter: blur(10px);
	animation: floating-in 160ms ease-out;
}

.model-sheet.floating .sheet-head {
	height: 44px;
	padding: 0 8px 0 16px;
}

.model-sheet.floating .sheet-body {
	padding: 16px 16px 0;
}

.model-sheet.floating .check-item {
	background: var(--surface);
}

@keyframes floating-in {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
}

/* The bill: a card over the building, the model behind it dimmed. */
.model-backdrop {
	z-index: 6;
	grid-area: model;
	background: rgb(15 18 22 / 30%);
	backdrop-filter: blur(2px);
	animation: backdrop-in 160ms ease-out;
}

.model-backdrop[hidden] {
	display: none;
}

.model-sheet.overlay {
	z-index: 7;
	grid-area: model;
	place-self: center;
	width: min(640px, calc(100% - 48px));
	max-height: calc(100% - 48px);
	overflow: hidden;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-prominent);
	box-shadow: var(--shadow-raised);
	animation: overlay-in 180ms ease-out;
}

.model-sheet.overlay .sheet-head {
	height: 52px;
	padding: 0 12px 0 20px;
}

.model-sheet.overlay .sheet-body {
	padding: 20px 20px 0;
}

@keyframes backdrop-in {
	from {
		opacity: 0;
	}
}

@keyframes overlay-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
}

.sheet-head {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
	height: 48px;
	padding: 0 8px 0 16px;
	border-bottom: 1px solid var(--hairline);
}

.sheet-title {
	flex: 1;
	margin: 0;
	font-family: var(--display);
	font-size: var(--fs-body-large);
	font-weight: var(--fw-semibold);
}

.sheet-body {
	display: grid;
	align-content: start;
	gap: 16px;
	min-height: 0;
	padding: 16px 16px 0;
	overflow-y: auto;
}

/* The sheet's foot: what runs on past it fades out under it, so there is more to see below rather than a line cut
   through; at the end of the scroll, the fade is the foot's own margin, over nothing. */
.sheet-body::after {
	content: '';
	position: sticky;
	bottom: 0;
	height: 24px;
	margin-top: -16px;
	background: linear-gradient(transparent, var(--sheet-background));
	pointer-events: none;
}

/* What it costs, large; each material under it. */
.sheet-total {
	display: grid;
	gap: 2px;
}

.sheet-total-value {
	font-family: var(--display);
	font-size: var(--fs-heading1);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

.sheet-total-label,
.sheet-stat-label {
	color: var(--text-faint);
	font-family: var(--mono);
	font-size: var(--fs-mono-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sheet-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 8px;
}

.sheet-stat {
	display: grid;
	gap: 2px;
	padding: 10px 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-inner);
}

.sheet-stat-value {
	font-size: var(--fs-body1);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

.sheet-stat-quantity {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label2);
}

.sheet-body > .seg {
	justify-self: start;
}

.sheet-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-label1);
	font-variant-numeric: tabular-nums;
}

.sheet-table th {
	padding: 0 0 6px 8px;
	color: var(--text-faint);
	font-size: var(--fs-label2);
	font-weight: var(--fw-semibold);
	text-align: right;
}

.sheet-table th:first-child {
	padding-left: 0;
	text-align: left;
}

.sheet-table td {
	padding: 6px 0 6px 8px;
	border-top: 1px solid var(--hairline);
	text-align: right;
	white-space: nowrap;
}

.sheet-table td.sheet-name {
	max-width: 120px;
	padding-left: 0;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
}

.sheet-table td.sheet-cost {
	font-weight: var(--fw-regular);
}

.sheet-table tfoot td {
	border-top: 1px solid var(--border-strong);
	font-weight: var(--fw-semibold);
}

.sheet-notes {
	display: grid;
	gap: 6px;
}

.sheet-note {
	margin: 0;
	color: var(--text-faint);
	font-size: var(--fs-label1);
	line-height: 1.5;
}

.sheet-details summary {
	color: var(--muted);
	font-size: var(--fs-label1);
	cursor: pointer;
}

.sheet-list {
	margin: 6px 0 0;
	padding-left: 20px;
	color: var(--text-faint);
	font-size: var(--fs-label1);
	line-height: 1.5;
}

/* The Building card and the bill's rates: a label, its field, its unit, a row each. */
.form-section {
	display: grid;
	gap: 2px;
}

.form-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 44px;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	border-bottom: 1px solid var(--hairline);
	font-size: var(--fs-body1);
}

.form-row > .seg {
	grid-column: 2 / 4;
	justify-self: end;
}

.form-label {
	color: var(--muted);
}

.form-unit {
	color: var(--text-faint);
	font-size: var(--fs-label2);
}

.form-row .ctl-number {
	width: 84px;
	height: var(--control-height);
	text-align: right;
}

.form-row .ctl-select {
	height: var(--control-height);
	max-width: 160px;
}

.form-row.given .form-label {
	color: var(--text);
	font-weight: var(--fw-semibold);
}

.rate-fields {
	display: grid;
	gap: 0;
	padding: 4px 12px 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-inner);
	background: var(--surface-sunken);
}

.btn.rates-reset {
	justify-self: start;
	margin-top: 8px;
	padding: 0;
	height: auto;
	color: var(--accent);
	font-size: var(--fs-label1);
}

.btn.rates-reset:hover:not(.disabled, :disabled) {
	background: none;
	text-decoration: underline;
}

/* The checks: how it stands, then each finding with whom it names; the one shown in the model in the flag colour. */
.check-key {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: -4px 0 0;
	color: var(--muted);
	font-size: var(--fs-label1);
}

.check-swatch {
	width: 16px;
	height: 3px;
	flex: none;
	border-radius: var(--radius-xsmall);
	background: var(--structural-flag);
}

/* A check is chosen by its card: the one chosen in the flag colour, its members all the model shows. */
.check-item.choosable {
	cursor: pointer;
	transition: border-color 120ms, background-color 120ms;
}

.check-item.choosable:hover {
	border-color: var(--border-strong);
	background: var(--hover);
}

.check-item.choosable:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.check-item.shown,
.check-item.shown:hover {
	border-color: var(--structural-flag);
	background: color-mix(in srgb, var(--structural-flag) 6%, var(--surface));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--structural-flag) 16%, transparent);
}

.check-top .chip {
	margin-right: auto;
}

.sheet-verdict {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--display);
	font-size: var(--fs-heading2);
	font-weight: var(--fw-semibold);
}

.sheet-verdict .status-dot {
	width: 10px;
	height: 10px;
}

.sheet-verdict.ok .status-dot {
	background: var(--ok);
}

.sheet-verdict.warning .status-dot {
	background: var(--warning);
}

.check-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.check-item {
	display: grid;
	gap: 6px;
	padding: 10px 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-inner);
}


.check-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.check-count {
	color: var(--text-faint);
	font-size: var(--fs-label1);
}

.check-detail {
	margin: 0;
	font-size: var(--fs-body1);
	line-height: 1.5;
}

.check-where {
	margin: 0;
	color: var(--muted);
	font-size: var(--fs-label1);
	line-height: 1.6;
}

.btn.check-subject {
	height: auto;
	padding: 0;
	color: var(--accent);
	font-size: var(--fs-label1);
	white-space: normal;
	text-align: left;
}

.btn.check-subject:hover:not(.disabled, :disabled) {
	background: none;
	text-decoration: underline;
}

.check-more {
	cursor: default;
}

/* A count on a button: how many want a look. */
.btn-count {
	display: inline-grid;
	place-items: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--warning) 18%, transparent);
	color: var(--warning);
	font-size: var(--fs-label2);
	font-weight: var(--fw-semibold);
}

/* -- Notices ----------------------------------------------------------------------------------------------------- */

.notices {
	position: fixed;
	right: 16px;
	bottom: 40px;
	z-index: 20;
	display: grid;
	gap: 8px;
	width: min(420px, calc(100vw - 32px));
}

.notice {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 8px 8px 8px 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--surface);
	box-shadow: var(--shadow-raised);
	font-size: var(--fs-body1);
	animation: notice-in 160ms ease-out;
}

/* What kind of notice, by a dot beside its first line. */
.notice::before {
	content: '';
	width: 8px;
	height: 8px;
	flex: none;
	margin-top: 10px;
	border-radius: 50%;
	background: var(--notice-tone, var(--accent));
}

.notice.error {
	--notice-tone: var(--danger);
}

.notice-text {
	flex: 1;
	margin: 4px 0 0;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

@keyframes notice-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* -- Dragging over the page -------------------------------------------------------------------------------------- */

.drop-overlay {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: none;
	place-items: center;
	padding: 12px;
	background: var(--overlay);
	pointer-events: none;   /* the drop lands on the page beneath, which the window's handler takes */
	backdrop-filter: blur(3px);
}

.drop-overlay p {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 1.5px dashed var(--accent);
	border-radius: var(--radius-prominent);
}

.drop-label {
	padding: 10px 20px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: var(--shadow-raised);
	color: var(--accent);
	font-size: var(--fs-body-large);
	font-weight: var(--fw-semibold);
}

body.dragging .drop-overlay {
	display: grid;
}

/* -- Narrow screens ---------------------------------------------------------------------------------------------- */

/* -- The schemes in 3D: the one looked at beside its card, the cards in a column of their own ----------------------- */

.importer[data-page="compare"] {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 34%);
	grid-template-areas: "header header" "scheme body" "footer footer";
}

.importer-scheme {
	grid-area: scheme;
	min-width: 0;
	min-height: 0;
	border-right: 1px solid var(--hairline);
}

.importer[data-page="compare"] .importer-body {
	padding: 20px 20px 40px;
}

.importer[data-page="compare"] .scheme-grid {
	grid-template-columns: minmax(0, 1fr);
}

/* The scheme's inspector floats over its model, and only while something is selected: the model keeps the room. */
.importer-scheme.model-view {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	grid-template-areas: "stage";
}

.importer-scheme .model-inspector {
	z-index: 3;
	grid-area: stage;
	align-self: end;
	justify-self: end;
	width: min(260px, calc(100% - 24px));
	max-height: 55%;
	margin: 0 12px 12px 0;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--float);
	box-shadow: var(--shadow-float);
	backdrop-filter: blur(10px);
}

.importer-scheme.unselected .model-inspector {
	display: none;
}

/* Which scheme the 3D view shows, at its foot. */
.scheme-caption {
	z-index: 2;
	grid-area: stage;
	align-self: end;
	justify-self: center;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 200px);
	margin-bottom: 16px;
	padding: 6px 12px 6px 6px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--float);
	box-shadow: var(--shadow-float);
	backdrop-filter: blur(10px);
	font-size: var(--fs-body1);
}

.scheme-caption[hidden] {
	display: none;
}

.scheme-caption-name {
	overflow: hidden;
	font-weight: var(--fw-semibold);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.scheme-caption-meta {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.scheme-caption-meta.warning {
	color: var(--warning);
}

.topbar-label {
	color: var(--muted);
	font-size: var(--fs-label1);
	white-space: nowrap;
}

/* The scheme in 3D: its card ringed in the accent, as a plan chosen is; the one modelled says so by its chip. */
.choice-card.viewing {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.choice-title > .scheme-view {
	margin-left: auto;
}

.scheme-picture-button {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius-inner);
	background: none;
	cursor: pointer;
}

.scheme-picture-button:hover .scheme-picture {
	outline: 1px solid var(--border-strong);
}

.scheme-picture-button:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.importer[data-page="compare"] .ruled-item {
	grid-template-columns: 22px minmax(0, 1fr) auto;
}

.importer[data-page="compare"] .ruled-why {
	grid-column: 2;
	grid-row: 2;
}

.ruled-view {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
}

.ruled-item.viewing .scheme-letter {
	background: var(--accent-soft);
	color: var(--accent);
}

/* -- Changing a member, in the inspector -------------------------------------------------------------------------- */

.insp-edit-size {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
}

.insp-edit-size .ctl-number {
	width: 72px;
}

.insp-edit-times {
	color: var(--muted);
}

.insp-edit-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.btn.danger {
	color: var(--danger);
}

.btn.outline.danger:hover:not(.disabled, :disabled) {
	border-color: var(--danger);
	background: var(--danger-soft);
}

/* -- The members changed, on the Building card -------------------------------------------------------------------- */

.edit-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.edit-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--hairline);
	font-size: var(--fs-body1);
}

.edit-text {
	flex: 1;
	min-width: 0;
}

.edit-undo {
	flex: none;
}

/* -- The design: wider than the checks, for its table; a group chosen by its row ------------------------------------ */

.model-sheet.floating[data-kind="design"] {
	width: min(460px, calc(100% - 24px));
}

.sheet-verdict.busy .spinner {
	flex: none;
}

.sheet-verdict-meta {
	margin-left: auto;
	color: var(--muted);
	font-size: var(--fs-label1);
	font-weight: var(--fw-regular);
}

.design-table td {
	vertical-align: middle;
}

.design-table td.design-state {
	padding-right: 2px;
}

.design-table .chip {
	margin: 0;
}

.design-row.choosable {
	cursor: pointer;
}

.design-row.choosable:hover td {
	background: var(--hover);
}

.design-row.choosable:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: -2px;
}

.design-row.shown td {
	background: color-mix(in srgb, var(--structural-flag) 10%, transparent);
}

/* -- The Building card: wider than the checks, for a label, a field and a unit a row ------------------------------- */

.model-sheet.floating[data-kind="building"] {
	width: min(400px, calc(100% - 24px));
}

/* -- The footings: the site asked first, each answer said to be given, read, or assumed ------------------------------ */

.model-sheet.floating[data-kind="footings"] {
	width: min(460px, calc(100% - 24px));
}

.form-source {
	display: block;
	color: var(--text-faint);
	font-size: var(--fs-label2);
	font-weight: var(--fw-regular);
}

.form-source.assumed {
	color: var(--warning);
}

.footing-table td:last-child {
	white-space: normal;
}

.footing-warnings li {
	color: var(--muted);
}

/* Matching the model's plinth to the footings: under what to act on, its own width. */
.btn.footing-match {
	justify-self: start;
	margin-top: 8px;
}

.badge.smdl {
	color: var(--accent);
}

@media (max-width: 760px) {
	body.working {
		display: block;
		height: auto;
		overflow: visible;
	}

	.workspace {
		grid-template-columns: minmax(0, 1fr);
	}

	.viewer {
		order: -1;
		height: 70vh;
	}

	.importer {
		order: -1;
	}

	/* The page grows with its content here: the model is given the viewer's height at least, and the rest of the screen
	   while nothing is under it, so the status bar stays at the foot. */
	.importer.review {
		min-height: 100dvh;
		grid-template-rows: auto minmax(70vh, 1fr) auto;
	}

	/* The top bar in two rows: the file, its steps and Close; the page's actions under them, at the right. */
	.importer-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "start close" "end end";
		row-gap: 4px;
		height: auto;
		padding: 6px 8px;
	}

	.topbar-start {
		grid-area: start;
		margin-right: 0;
	}

	.topbar-close {
		grid-area: close;
	}

	.topbar-close > .bar-divider {
		display: none;
	}

	/* The sheets' buttons and Save by their icons alone. Should the actions still not fit, they wrap rather than run off
	   the page. */
	.topbar-end {
		grid-area: end;
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 6px;
	}

	.topbar-end:empty,
	.topbar-end > .bar-divider {
		display: none;
	}

	.topbar-end [data-key^="sheet-"] .btn-label,
	.topbar-end [data-key="save"] .btn-label {
		display: none;
	}

	.topbar-end [data-key^="sheet-"],
	.topbar-end [data-key="save"] {
		padding: 0 6px;
	}

	/* A sheet under the model, the page growing with it. */
	.importer.review:has(> .model-sheet:not([hidden]):not(.overlay)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(70vh, 1fr) auto auto;
		grid-template-areas: "header" "model" "sheet" "footer";
	}

	.model-sheet:not(.overlay) {
		border-top: 1px solid var(--hairline);
	}

	.model-sheet:not(.overlay) .sheet-body {
		overflow: visible;
		padding-bottom: 24px;
	}

	/* Not scrolled in itself here, but with the page: no foot to fade under. */
	.model-sheet:not(.overlay) .sheet-body::after {
		display: none;
	}

	.model-sheet.overlay {
		width: calc(100% - 16px);
		max-height: calc(100% - 16px);
	}

	/* The floating sheets under the model here, the page's width: no room to float. (By their kind, to outweigh each
	   kind's own width.) */
	.model-sheet.floating[data-kind] {
		grid-area: sheet;
		align-self: stretch;
		justify-self: stretch;
		width: auto;
		max-height: none;
		margin: 0;
		border-width: 1px 0 0;
		border-radius: 0;
		--sheet-background: var(--surface);
		box-shadow: none;
		backdrop-filter: none;
	}

	.importer-body {
		overflow: visible;
		padding: 20px 16px 32px;
	}

	/* The scheme in 3D over its cards here. */
	.importer[data-page="compare"] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 60vh auto auto;
		grid-template-areas: "header" "scheme" "body" "footer";
	}

	.importer-scheme {
		border-right: 0;
		border-bottom: 1px solid var(--hairline);
	}

	.importer[data-page="compare"] .importer-body {
		padding: 20px 16px 32px;
	}

	.ruled-item {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.ruled-why {
		grid-column: 2;
	}

	.sidebar {
		border-top: 1px solid var(--border);
		border-right: 0;
	}

	.find-input {
		width: 110px;
	}
}

@media (max-width: 540px) {
	.intake {
		place-items: start center;
		padding-top: 32px;
	}

	h1 {
		font-size: var(--fs-heading1);
	}

	.dropzone {
		padding: 32px 16px 24px;
	}

	.step + .step::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* -- Feedback ------------------------------------------------------------------------------------------------------ */

/* "Is this the right model?": the question, what is wrong, a note, the drawing sent if ticked; then the reference. */
.feedback {
	display: grid;
	gap: 12px;
	padding-bottom: 16px !important;
}

.feedback-lead {
	margin: 0;
	font-family: var(--display);
	font-size: var(--fs-body-large);
	font-weight: var(--fw-semibold);
}

.feedback-label {
	color: var(--muted);
	font-size: var(--fs-label1);
}

.feedback-issues {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px 12px;
	margin: 0;
	padding: 0;
	border: 0;
}

.feedback-issues legend {
	grid-column: 1 / -1;
	margin-bottom: 6px;
	padding: 0;
}

.feedback-issues .check,
.feedback-send {
	color: var(--text);
}

.feedback-note {
	display: grid;
	gap: 6px;
}

.feedback-text,
.feedback-code-input {
	border: 1px solid var(--border);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--text);
	font: var(--fs-body1) var(--font);
}

.feedback-text {
	min-height: 64px;
	padding: 6px 8px;
	resize: vertical;
}

.feedback-text:focus,
.feedback-code-input:focus {
	border-color: var(--accent);
	outline: none;
}

.feedback-send {
	align-items: flex-start;
}

.feedback-send input {
	margin-top: 2px;
}

/* The warning under the send checkbox, in line with its words. */
.feedback-warning {
	margin: -8px 0 0 19px;
}

.feedback-actions {
	display: flex;
	gap: 8px;
}

.feedback-reference {
	display: flex;
	align-items: center;
	gap: 8px;
}

.feedback-code {
	padding: 2px 8px;
	border-radius: var(--radius-control);
	background: var(--surface-sunken);
	font: var(--fw-semibold) var(--fs-body-large) var(--mono);
	letter-spacing: 0.04em;
	user-select: all;
}

.feedback-error {
	margin: 0;
}

.feedback-by-code {
	display: grid;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--hairline);
}

.feedback-by-code > .btn {
	justify-self: start;
	margin-left: -10px;
	color: var(--muted);
}

.feedback-code-row {
	display: flex;
	gap: 8px;
}

.feedback-code-input {
	flex: 1;
	min-width: 0;
	height: var(--control-height);
	padding: 0 8px;
	font-family: var(--mono);
	text-transform: uppercase;
}

.feedback-code-input::placeholder {
	font-family: var(--font);
	text-transform: none;
}

/* Over the model, once it is first solved: the question, its three answers, and Not Now. */
.feedback-prompt {
	z-index: 7;
	grid-area: model;
	align-self: end;
	justify-self: center;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 300px 16px 0;
	padding: 6px 6px 6px 14px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-outer);
	background: var(--float);
	box-shadow: var(--shadow-float);
	backdrop-filter: blur(10px);
	font-size: var(--fs-body1);
	animation: floating-in 160ms ease-out;
}

.feedback-prompt[hidden] {
	display: none;
}

.feedback-prompt-text {
	margin-right: 4px;
	font-weight: var(--fw-semibold);
}

@media (max-width: 900px) {
	.feedback-prompt {
		margin-right: 0;
	}
}

@media (max-width: 540px) {
	.feedback-prompt {
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 12px 12px;
	}
}