/* Shared UI chrome for both the main configurator and the door-communication
   sub-configurator: full-screen canvas + floating panels, accordions/tiles,
   form basics, buttons, context menu. App-specific SVG content styling
   (module/locator colors etc.) stays in each app's own stylesheet. */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	font-family: system-ui, sans-serif;
	color: #1a1a1a;
	background: #e5e7ea;
}

h1 {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 1rem 0;
}

h3 {
	font-size: 0.9rem;
	font-weight: 600;
	color: #1a1a1a;
	margin: 1.1rem 0 0.6rem 0;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid #e5e5e5;
}
h3:first-of-type {
	margin-top: 0;
}

/* A panel's title acts as its collapse toggle: click it to hide everything
   else in that .tcs-floating box, leaving just the header bar. Used to keep
   the canvas reachable on narrow screens (see the max-width media query
   below), but works as a manual toggle at any width. */
.tcs-panel-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	cursor: pointer;
}
.tcs-panel-header::after {
	content: '▾';
	font-size: 0.7rem;
	color: #999;
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.tcs-floating.collapsed .tcs-panel-header::after {
	transform: rotate(-90deg);
}
.tcs-floating.collapsed > *:not(.tcs-panel-header):not(.tcs-back-link) {
	display: none !important;
}
.tcs-floating.collapsed h3.tcs-panel-header {
	border-bottom: none;
	margin-bottom: 0;
}

/* Konfigurationsnummer badge next to the panel title (see js/app.js's
   updateConfigNumberDisplay) — always visible, mirroring the same number
   set as the browser tab's document.title. */
.tcs-config-number {
	font-weight: 400;
	font-size: 0.8rem;
	color: #777;
}

/* Read-only configuration view (?nr=...&readonly=1, see js/app.js's
   initConfiguration) — hides every editing control so the link can be
   shared as a plain view of a finished/saved configuration. The canvas
   itself (pan/zoom) and the dimension/price display stay visible. */
body.tcs-readonly .tcs-floating-left,
body.tcs-readonly #tcs-inspector-panel,
body.tcs-readonly #tcs-context-menu,
body.tcs-readonly a.tcs-action,
body.tcs-readonly #tcs-undo {
	display: none !important;
}

/* Das Konfigurations-Panel selbst bleibt als Maße-/Preisanzeige sichtbar,
   aber seine Bedienelemente nicht (die tcs-action-Links oben; hier der
   Startecke-Auswahl) — samt der <br>-Abstandshalter dazwischen. */
body.tcs-readonly #tcs-config-panel label[for="tcs-start-edge"],
body.tcs-readonly #tcs-config-panel #tcs-start-edge,
body.tcs-readonly #tcs-config-panel br {
	display: none !important;
}

.tcs-back-link {
	display: inline-block;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
	color: #555;
	text-decoration: none;
}
.tcs-back-link:hover {
	color: #111;
	text-decoration: underline;
}

/* Sits at a fixed spot on the canvas itself (not inside a floating panel),
   centered above it so it's reachable regardless of which panel is
   relevant — pan/zoom never moves it. Introduced for the lbo-konfigurator's
   Startecke pill; also holds the ktu-konfigurator's Zurück-Link. */
.tcs-canvas-toolbar {
	position: fixed;
	top: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Shared pill chrome for every canvas-toolbar child — deliberately
   understated (small, muted, no border/shadow to match the floating
   panels' own weight) so it reads as a quiet, secondary control rather than
   a primary action. */
.tcs-canvas-pill {
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid #ddd;
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	font-size: 0.85rem;
	color: #555;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

a.tcs-canvas-pill {
	text-decoration: none;
}
a.tcs-canvas-pill:hover {
	background: #fff;
	color: #222;
}

/* The work surface fills the whole viewport; the palette and inspector are
   floating panels on top of it (like a design-tool canvas), not grid columns
   squeezing its size down. */
.tcs-canvas {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	background: #ffffff;
	touch-action: none;
}

.tcs-floating {
	background: white;
	border: 1px solid #ddd;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	padding: 1.1rem;
	overflow: hidden;
}

.tcs-floating-left {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: 280px;
	max-height: calc(100vh - 2rem);
	overflow-y: auto;
	z-index: 10;
	/* reserves the scrollbar's width even while it isn't needed yet, so
	   content doesn't reflow/rewrap the moment an accordion grows tall
	   enough to trigger one */
	scrollbar-gutter: stable;
}

/* Right side is a stack of independent boxes (e.g. module inspector, then an
   always-visible actions box below it) rather than one fixed panel, so a
   lower box moves up cleanly when the one above it is hidden. */
.tcs-right-stack {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 260px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	z-index: 10;
}

.tcs-palette-area {
	display: flex;
	flex-direction: column;
}

/* Below this width the two fixed-width side panels would overlap each
   other (and most of the canvas). Instead of floating side by side, they
   become full-width bars stacked top (config) and bottom (inspector/
   summary), both collapsed to just their header by default via
   wirePanelCollapse() — tap a header to expand it over the canvas. */
@media (max-width: 700px) {
	.tcs-floating-left {
		left: 1rem;
		right: 1rem;
		width: auto;
		max-height: 70vh;
	}

	.tcs-right-stack {
		left: 1rem;
		right: 1rem;
		top: auto;
		bottom: 1rem;
		width: auto;
	}
}

.tcs-accordion {
	border-bottom: 1px solid #e5e5e5;
}
.tcs-accordion:first-child {
	border-top: 1px solid #e5e5e5;
}

.tcs-accordion-header {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.6rem 0.1rem;
	cursor: pointer;
	font-size: 0.95rem;
}
.tcs-accordion-header:hover {
	background: #fafafa;
}
.tcs-accordion-subtitle {
	color: #888;
	font-size: 0.8rem;
}

.tcs-accordion-content {
	padding: 0 0.1rem 0.75rem 0.1rem;
}
.tcs-accordion.collapsed .tcs-accordion-content {
	display: none;
}

.tcs-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
	gap: 0.5rem;
}

.tcs-tile {
	border: 1px solid #ddd;
	padding: 0.4rem;
	text-align: center;
	cursor: pointer;
	min-width: 0;
}
.tcs-tile:hover {
	border-color: #999;
}
.tcs-tile.active {
	border-color: #111;
	border-width: 2px;
	padding: calc(0.4rem - 1px);
}
.tcs-tile img {
	width: 100%;
	height: 44px;
	object-fit: contain;
	display: block;
}
.tcs-tile-caption {
	font-size: 0.68rem;
	color: #555;
	margin-top: 0.3rem;
	line-height: 1.2;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}

.tcs-single-variant-link {
	display: inline-block;
	color: #1a1a1a;
	text-decoration: underline;
	font-size: 0.9rem;
}
.tcs-single-variant-link:hover {
	color: #555;
}

/* Two-tier material picker (js/shared/steel-pattern.js's buildMaterialPicker)
   — a segmented material-category row, plus (only for a category with more
   than one finish) a colour <select> with a live swatch beside it. Used by
   lbo-konfigurator's station-wide and per-module material fields, and the
   piktogramm-konfigurator's own Frontplatte-Material field. */
.tcs-material-segmented {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.tcs-material-segment {
	border: 1px solid #ddd;
	background: #fff;
	padding: 0.35rem 0.6rem;
	font-size: 0.82rem;
	cursor: pointer;
	color: #333;
}
.tcs-material-segment:hover {
	border-color: #999;
}
.tcs-material-segment.active {
	border-color: #111;
	border-width: 2px;
	padding: 0.3rem 0.55rem;
	font-weight: 600;
}
.tcs-material-color-row {
	margin-top: 0.5rem;
}
.tcs-material-color-row label {
	display: block;
	margin-bottom: 0.3rem;
}
.tcs-material-swatch-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.tcs-material-swatch {
	flex-shrink: 0;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid #bbb;
	background-size: cover;
	background-position: center;
}
.tcs-material-swatch-row select {
	flex: 1;
	min-width: 0;
}

.tcs-dimension-row {
	display: flex;
	gap: 0.5rem;
}
.tcs-dimension-row input {
	flex: 1;
	min-width: 0;
}

label {
	display: block;
	font-size: 0.85rem;
	margin-top: 0.5rem;
}

input, select, textarea {
	width: 100%;
	padding: 0.4rem;
	margin-top: 0.15rem;
	border: 1px solid #ccc;
	font-size: 0.9rem;
	background: white;
	color: #1a1a1a;
	font-family: inherit;
}
/* Vertical-only: the field already fills the inspector column's width
   (see the shared rule above), so letting the customer drag it wider too
   would just overflow the fixed-width panel. */
textarea {
	resize: vertical;
}

a.tcs-action {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.5rem 1rem;
	background: #111;
	color: white;
	text-decoration: none;
	font-size: 0.85rem;
}
a.tcs-action:hover {
	background: #333;
}
a.tcs-action.tcs-action-secondary {
	background: white;
	color: #111;
	border: 1px solid #111;
}
a.tcs-action.tcs-action-secondary:hover {
	background: #f0f0f0;
}
/* Export/save in progress (see js/app.js's wireFinishConfiguration/
   wireLoadConfig) — PNG rasterization or a server round-trip takes a
   moment, so this gives feedback rather than leaving the link looking
   clickable/idle while it's actually working. */
a.tcs-action.tcs-action-busy {
	opacity: 0.6;
	pointer-events: none;
}

.tcs-hint {
	font-size: 0.8rem;
	color: #999;
	margin-top: 0.75rem;
}

/* Compact alternative to .tcs-hint for a single field/control: a small "?"
   badge right next to the label, tooltip only on hover/focus — costs no
   permanent vertical space, unlike a hint paragraph sitting below the field
   at all times. The bubble itself (.tcs-info-hint-bubble below) is a
   separate element appended to <body> by common/js/shared/info-hint.js's
   wireInfoHints(), NOT a CSS `::after` on this badge — a `::after` gets
   clipped by any ancestor with `overflow: hidden`/`auto` (every
   .tcs-floating panel has one) or squeezed/pushed off-screen by the panel's
   own narrow width, which a fixed body-level element escapes. */
.tcs-info-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #bbb;
	color: #fff;
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 600;
	line-height: 1;
	cursor: help;
	flex: none;
}

/* The actual tooltip bubble — see .tcs-info-hint above for why this lives at
   the body level instead of nested in the badge. z-index clears both
   .tcs-floating-left/.tcs-right-stack (10) and .tcs-canvas-toolbar (20). */
.tcs-info-hint-bubble {
	position: fixed;
	background: #1a1a1a;
	color: #fff;
	padding: 0.4rem 0.6rem;
	border-radius: 4px;
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: pre-line;
	max-width: 220px;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	z-index: 1000;
}

#tcs-inspector-panel p {
	margin: 0.3rem 0;
	font-size: 0.9rem;
}
#tcs-inspector-module-type {
	font-weight: 600;
}

/* Full-screen cover shown while "Konfiguration fertigstellen" is working
   (js/app.js's wireFinishConfiguration) — the flat-PNG capture and the 3D
   perspective screenshot both briefly touch the visible page (see
   js/shared/export-package.js, js/shared/capture3d.js), which flickers if
   left uncovered. Sits above every floating panel/context menu. */
.tcs-finish-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 1rem;
	background: #ffffff;
}
.tcs-finish-overlay.tcs-visible {
	display: flex;
}
.tcs-finish-overlay-spinner {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid #ddd;
	border-top-color: #111;
	border-radius: 50%;
	animation: tcs-spin 0.8s linear infinite;
}
.tcs-finish-overlay p {
	font-size: 0.95rem;
	color: #555;
}
@keyframes tcs-spin {
	to { transform: rotate(360deg); }
}

.tcs-context-menu {
	position: fixed;
	z-index: 1000;
	background: white;
	border: 1px solid #ccc;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	min-width: 120px;
}
.tcs-context-menu a {
	display: block;
	padding: 0.5rem 0.9rem;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 0.9rem;
}
.tcs-context-menu a:hover {
	background: #f4f4f4;
}
/* Only "Löschen" is destructive — the Rückwand actions stay neutral so
   they don't read as a warning. */
.tcs-context-menu #tcs-context-delete {
	color: #c0392b;
}

/* Engraved/applied module content (Hausnummer, Straßenname, Vektorgrafik,
   Grafikfolie — see js/shared/engraving.js) shared by both the main
   configurator and the ENY sub-configurator. */
#tcs-inspector-content label:first-child {
	margin-top: 0.75rem;
}
#tcs-inspector-content input[type="file"] {
	padding: 0.3rem;
}
.tcs-content-remove {
	display: inline-block;
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #c0392b;
	text-decoration: underline;
}
.tcs-content-remove:hover {
	color: #8e2c1f;
}
/* Manufacturability error line for an uploaded Vektorgrafik (see
   js/shared/vector-manufacturability.js) — same destructive red as
   .tcs-content-remove above, empty (and so invisible) whenever the current
   upload/material combination is fine. */
.tcs-content-error {
	margin-top: 0.35rem;
	font-size: 0.8rem;
	color: #c0392b;
}

.tcs-engrave-text {
	text-anchor: middle;
	dominant-baseline: central;
	pointer-events: none;
	user-select: none;
}
/* Durchgangsgravur: letters cut fully through the panel — rendered light,
   as if daylight/backlight were showing through the cut. */
.tcs-engrave-durchgang {
	fill: #f2f2f2;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
}
/* Ausgelegte Gravur: engraved and filled with a contrasting (typically
   black) resin inlay — solid fill, no glow. */
.tcs-engrave-ausgelegt {
	fill: #111111;
}
/* Hinterleuchtete Gravur: illuminated from behind — white fill plus a white
   glow halo (not a warm/yellow one). */
.tcs-engrave-hinterleuchtet {
	fill: #ffffff;
	filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px rgba(255, 255, 255, 0.85));
}
/* Day and Night Glas: solid black by day like Ausgelegte Gravur, but has its
   own backlight that switches on at night (see the tcs-night-active rule
   below), unlike Ausgelegte Gravur which stays plain black around the clock. */
.tcs-engrave-day-night-glas {
	fill: #111111;
}

.tcs-engrave-graphic {
	pointer-events: none;
}
.tcs-engrave-graphic.tcs-engrave-durchgang {
	filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, 0.65));
}
.tcs-engrave-graphic.tcs-engrave-ausgelegt {
	filter: brightness(0);
}
.tcs-engrave-graphic.tcs-engrave-hinterleuchtet {
	filter: brightness(0) invert(1) drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 7px rgba(255, 255, 255, 0.85));
}
.tcs-engrave-graphic.tcs-engrave-day-night-glas {
	filter: brightness(0);
}

.tcs-foil-graphic {
	pointer-events: none;
}

/* Piktogrammplatte (EPK) symbol picker — buildPictogramPicker() in
   js/shared/engraving.js, used both by the main configurator's inline
   inspector and the standalone piktogramm-konfigurator. Mirrors
   .tcs-tile-grid/.tcs-tile's look (see above) rather than inventing a new
   tile style, since it's the same "pick one from a small illustrated grid"
   interaction. */
.tcs-pictogram-category {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #777;
	margin: 0.6rem 0 0.35rem 0;
}
.tcs-pictogram-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 0.4rem;
}
.tcs-pictogram-tile {
	border: 1px solid #ddd;
	background: #fff;
	padding: 0.35rem;
	text-align: center;
	cursor: pointer;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.tcs-pictogram-tile:hover:not(:disabled) {
	border-color: #999;
}
.tcs-pictogram-tile.selected {
	border-color: #111;
	border-width: 2px;
	padding: calc(0.35rem - 1px);
}
.tcs-pictogram-tile:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.tcs-pictogram-tile-svg {
	width: 100%;
	height: 34px;
	fill: #333;
}
.tcs-pictogram-tile span {
	font-size: 0.65rem;
	color: #555;
	line-height: 1.15;
}

/* Nacht-Ansicht (see tcs-night-toggle in both apps): dims the visible
   material so the backlit/through engraving styles' glow reads clearly by
   contrast, same idea as dimming a room to see a lit sign. Drawn ON TOP of
   the material but BELOW any module content, so it darkens only the bare
   surface — never the engraved text/graphics drawn after it. pointer-events
   is off so clicks still reach whatever's underneath (the module rect). */
.tcs-night-overlay {
	fill: #04060a;
	fill-opacity: 0.72;
	pointer-events: none;
}
/* Boosted while night mode is active (see the tcs-night-active class toggled
   on <body>) — but ONLY hinterleuchtete Gravur, since it has its own light
   source behind it. */
body.tcs-night-active .tcs-engrave-hinterleuchtet {
	filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
body.tcs-night-active .tcs-engrave-graphic.tcs-engrave-hinterleuchtet {
	filter: brightness(0) invert(1) drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
/* Day and Night Glas switches on the same backlight as Hinterleuchtete
   Gravur once night falls, instead of just staying black like Ausgelegte
   Gravur does (see body.tcs-night-active .tcs-engrave-durchgang below). */
body.tcs-night-active .tcs-engrave-day-night-glas {
	fill: #ffffff;
	filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
body.tcs-night-active .tcs-engrave-graphic.tcs-engrave-day-night-glas {
	filter: brightness(0) invert(1) drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}
/* Durchgangsgravur has no light source of its own — at night, with nothing
   shining through it, it must go DARKER than its daylight look, not stay at
   the same brightness (which would read as lit by contrast with the dimmed
   material around it). Overrides the daylight drop-shadow entirely instead
   of stacking onto it. */
body.tcs-night-active .tcs-engrave-durchgang {
	fill: #2a2a2a;
	filter: none;
}
body.tcs-night-active .tcs-engrave-graphic.tcs-engrave-durchgang {
	filter: brightness(0.12);
}
/* Plain product photos (button/nameplate faces, module front plates) have no
   light source either — dim them at night the same way the bare material
   already is, so they don't sit at full brightness against a dark station
   and read as illuminated when they aren't. */
body.tcs-night-active .tcs-eny-preview-image,
body.tcs-night-active .tcs-module-icon {
	filter: brightness(0.35);
}

/* Tag/Nacht toggle badge drawn on the canvas next to the station (see
   js/shared/engraving.js's appendNightToggle) — small and quiet by design,
   not a UI chrome element. */
.tcs-night-toggle {
	cursor: pointer;
}
.tcs-night-toggle-hit {
	fill: transparent;
}
.tcs-night-toggle-body {
	fill: #ffd54f;
	stroke: #e0a800;
	stroke-width: 1;
	transition: stroke-width 0.15s ease;
}
.tcs-night-toggle.night .tcs-night-toggle-body {
	fill: #2b3a55;
	stroke: #1a2438;
}
.tcs-night-toggle:hover .tcs-night-toggle-body {
	stroke-width: 2;
}
.tcs-night-toggle-rays line {
	stroke: #ffd54f;
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.85;
}
.tcs-night-toggle-crescent {
	fill: #ffffff;
}

/* Rückwand-Overlay Sichtbarkeits-Toggle (see js/shared/engraving.js's
   appendBackWallToggle) — same on-canvas badge pattern as the Tag/Nacht
   toggle. Off (grey) by default; blue/active once toggled on, matching the
   overlay's own .tcs-backwall accent color in css/style.css. */
.tcs-backwall-toggle {
	cursor: pointer;
}
.tcs-backwall-toggle-hit {
	fill: transparent;
}
.tcs-backwall-toggle-body {
	fill: #e8ecf5;
	stroke: #aab4c8;
	stroke-width: 1;
	transition: stroke-width 0.15s ease;
}
.tcs-backwall-toggle:hover .tcs-backwall-toggle-body {
	stroke-width: 2;
}
.tcs-backwall-toggle-icon rect {
	fill: #aab4c8;
}
.tcs-backwall-toggle.active .tcs-backwall-toggle-body {
	fill: #2f6fed;
	stroke: #1d4fb8;
}
.tcs-backwall-toggle.active .tcs-backwall-toggle-icon rect {
	fill: #ffffff;
}

/* Rückwand-Schraubenmodus-Toggle (see js/shared/engraving.js's
   appendScrewModeToggle) — same on-canvas badge pattern again; active (red,
   matching .tcs-backwall-screw's marker color) means "alle Schrauben". */
.tcs-screwmode-toggle {
	cursor: pointer;
}
.tcs-screwmode-toggle-hit {
	fill: transparent;
}
.tcs-screwmode-toggle-body {
	fill: #e8ecf5;
	stroke: #aab4c8;
	stroke-width: 1;
	transition: stroke-width 0.15s ease;
}
.tcs-screwmode-toggle:hover .tcs-screwmode-toggle-body {
	stroke-width: 2;
}
.tcs-screwmode-toggle-icon circle {
	fill: #aab4c8;
}
.tcs-screwmode-toggle.active .tcs-screwmode-toggle-body {
	fill: #d4351c;
	stroke: #a32913;
}
.tcs-screwmode-toggle.active .tcs-screwmode-toggle-icon circle {
	fill: #ffffff;
}

/* Architectural-style dimension lines (see js/shared/dimension.js) — thin,
   neutral, and clearly secondary to the station drawing itself.
   tcs-height-marker-* is the "is this height within its recommended range"
   family shared by the camera, mailbox-flap and station-bottom-edge markers
   (see js/render.js's appendCameraDimensions/appendMailboxFlapDimension/
   appendStationBottomDimension and ktu-konfigurator/js/app.js's
   appendCameraHeightAnnotation) — one visual language for all of them. */
.tcs-dim-line,
.tcs-dim-tick,
.tcs-station-dim-line,
.tcs-station-dim-tick,
.tcs-height-marker-line,
.tcs-height-marker-tick {
	stroke: #888;
	stroke-width: 1;
	pointer-events: none;
}
.tcs-dim-label,
.tcs-station-dim-label,
.tcs-height-marker-label {
	font-size: 11px;
	fill: #666;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	user-select: none;
}

/* A height marker within its recommended range (see each call site's own
   target/tolerance or min/max constants) reads green instead of grey. */
.tcs-height-marker--ok .tcs-height-marker-line,
.tcs-height-marker--ok .tcs-height-marker-tick {
	stroke: #2e8b3d;
}
.tcs-height-marker--ok .tcs-height-marker-label {
	fill: #217a30;
	font-weight: 600;
}

/* Warning triangle (see appendDimensionLine's `warning` option) drawn before
   a height marker's label when it's OUTSIDE the recommended range — always
   yellow/black regardless of the --ok modifier, since a marker carrying this
   icon is by definition never --ok. */
.tcs-height-marker-warning-triangle {
	fill: #f5c518;
	stroke: #8a6d00;
	stroke-width: 0.75;
	pointer-events: none;
}
.tcs-height-marker-warning-mark {
	font-size: 8px;
	font-weight: 700;
	fill: #1a1a1a;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
	user-select: none;
}

/* Invisible hover target for a marker's <title> tooltip (see
   appendDimensionLine's `tooltip` option) — the visible line/tick/label
   stay click-through (pointer-events: none above) so this is the only
   thing actually catching the hover. */
.tcs-height-marker-hit {
	pointer-events: auto;
	cursor: help;
}