:root{
	--bg:#10141a;
	--panel:#171d26;
	--panel2:#0c0f14;
	--line:#2a3442;
	--ink:#cfd8e3;
	--dim:#7d8b9d;
	--amber:#e8a33d;
	--trace:#6aa3d8;
	--ok:#7fbf7f;
	--warn:#e06c5a;
	--mono:ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace;
}

*{
	box-sizing:border-box
}

[hidden]{
	display:none !important
}

html,body{
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font:14px/1.45 var(--mono)
}

button,select,input{
	font:inherit;
	color:inherit
}

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

/* ---------------------------------------- Kopfzeile */
header{
	display:grid;
	gap:10px;
	padding:10px 16px;
	border-bottom:1px solid var(--line)
}

.hrow{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px 14px;
	min-width:0
}

.hsep{
	width:1px;
	height:22px;
	background:var(--line);
	flex:none
}

h1{
	margin:0;
	font-size:16px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	white-space:nowrap
}

h1 .code{
	color:var(--amber);
	letter-spacing:.05em;
	margin-left:8px;
	font-weight:400
}

.seg{
	display:flex;
	border:1px solid var(--line);
	border-radius:8px;
	overflow:hidden;
	flex:none
}

.seg button{
	display:inline-flex;
	align-items:center;
	gap:7px;
	background:none;
	border:0;
	padding:7px 14px;
	cursor:pointer;
	color:var(--dim);
	white-space:nowrap
}

.seg button+button{
	border-left:1px solid var(--line)
}

.seg button:hover{
	color:var(--ink)
}

.seg button[aria-pressed="true"]{
	background:var(--panel);
	color:var(--amber)
}

.seg button svg{
	width:15px;
	height:15px;
	flex:none;
	stroke:currentColor;
	stroke-width:1.6;
	stroke-linecap:round;
	stroke-linejoin:round;
	fill:none
}

.ctl{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	min-width:0
}

.btn{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:8px;
	padding:7px 14px;
	cursor:pointer
}

.btn:hover{
	border-color:var(--amber)
}

.btn:disabled{
	opacity:.4;
	cursor:not-allowed
}

.btn:disabled:hover{
	border-color:var(--line)
}

.btn.primary{
	color:var(--amber)
}

select{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:8px;
	padding:6px 8px;
	max-width:230px
}

.filemeta{
	color:var(--dim);
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}

.lamp{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:var(--dim)
}

.lamp i{
	width:9px;
	height:9px;
	border-radius:50%;
	background:var(--line);
	display:inline-block
}

.lamp.on i{
	background:var(--ok);
	box-shadow:0 0 6px var(--ok)
}

/* schmale Fenster: Ansichts-Buttons nur noch als Symbol */
@media(max-width:820px){
	#tabs .lbl{
		position:absolute;
		width:1px;
		height:1px;
		overflow:hidden;
		clip-path:inset(50%);
		white-space:nowrap
	}

	#tabs button{
		padding:7px 12px
	}
}

@media(max-width:560px){
	header{
		padding:9px 12px;
		gap:8px
	}

	h1{
		font-size:14px
	}

	h1 .code{
		display:none
	}

	.hrow{
		gap:8px 10px
	}

	.seg button{
		padding:6px 11px
	}

	.filemeta{
		flex-basis:100%;
		order:99
	}

	select{
		max-width:150px
	}
}

/* ---------------------------------------- Werkstatt */
main{
	padding:12px 16px;
	display:grid;
	gap:12px
}

@media(max-width:560px){
	main{
		padding:10px 12px
	}
}

#viewWork{
	display:grid;
	gap:12px
}

.panel{
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:10px;
	padding:10px 12px
}

.caption{
	font-size:11px;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--dim);
	margin:0 0 6px 2px;
	font-family:system-ui,sans-serif
}

#sliders{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
	gap:10px 18px
}

.slider .head{
	display:flex;
	justify-content:space-between;
	font-size:11px;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--dim);
	font-family:system-ui,sans-serif
}

.slider .val{
	color:var(--amber);
	font-family:var(--mono);
	font-size:13px;
	letter-spacing:0;
	text-transform:none
}

.slider input[type=range]{
	width:100%;
	accent-color:var(--amber);
	margin:6px 0 0
}

.slider.off{
	opacity:.42
}

.inline{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:12px;
	color:var(--dim)
}

.inline input{
	accent-color:var(--amber)
}

.inline .sub{
	color:var(--line);
	font-size:11px
}

.inline.off{
	opacity:.42
}

.switches{
	display:flex;
	flex-wrap:wrap;
	gap:8px 26px;
	margin-top:10px
}

.slider input[type=range]:disabled{
	cursor:not-allowed
}

/* Zeichen, deren Längen schlecht ins Dit-Raster passen */
#tape .low{
	opacity:.5;
	text-decoration:underline dotted;
	text-underline-offset:4px;
	text-decoration-color:var(--warn)
}

#tape .prov{
	opacity:.62
}

#tape .low.prov{
	opacity:.36
}

#status{
	color:var(--dim);
	white-space:pre-wrap;
	word-break:break-word
}

#status.bad{
	color:var(--warn)
}

/* ---------------------------------------- Wartemarke */
/* Beide Animationen fassen ausschließlich transform bzw. opacity an. Nur solche
   laufen auf dem Compositor weiter, wenn der Hauptfaden doch einmal blockiert —
   also im Rückfallpfad ohne Worker. */
#viewWork{
	position:relative
}

#busy{
	position:absolute;
	inset:0;
	z-index:20;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding-top:80px;
	background:rgba(16,20,26,.72);
	border-radius:10px;
	cursor:progress
}

.busybox{
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 20px;
	background:var(--panel);
	border:1px solid var(--line);
	border-radius:10px;
	box-shadow:0 18px 50px rgba(0,0,0,.55)
}

.spin{
	width:16px;
	height:16px;
	flex:none;
	border:2px solid var(--line);
	border-top-color:var(--amber);
	border-radius:50%;
	animation:spin .9s linear infinite
}

@keyframes spin{
	to{
		transform:rotate(1turn)
	}
}

.busysec{
	color:var(--dim);
	min-width:4.5em
}

/* Nachrechnen nach einem Reglerzug: keine Sperre, nur eine Marke */
#status.calc::after{
	content:"";
	display:inline-block;
	width:8px;
	height:8px;
	margin-left:10px;
	border-radius:50%;
	background:var(--amber);
	vertical-align:middle;
	animation:pulse 1s ease-in-out infinite
}

@media(prefers-reduced-motion:reduce){
	.spin{
		border-top-color:var(--line);
		background:var(--amber);
		animation:pulse 1.4s ease-in-out infinite
	}

	#status.calc::after{
		animation:none
	}
}

#plots{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px
}

@media(max-width:920px){
	#plots{
		grid-template-columns:1fr
	}
}

canvas{
	display:block;
	width:100%;
	height:230px;
	background:var(--panel2);
	border-radius:6px;
	touch-action:none
}

#cEnv{
	cursor:crosshair
}
#cEnv.pan{
	cursor:grabbing
}

.hint{
	font-size:11px;
	color:var(--dim);
	margin:4px 2px 0;
	font-family:system-ui,sans-serif
}

#tapewrap{
	background:var(--panel2);
	border:1px solid var(--line);
	border-radius:10px;
	padding:14px 16px;
	position:relative
}

#tape{
	min-height:56px;
	font-size:21px;
	letter-spacing:.08em;
	color:var(--amber);
	word-break:break-word
}

#tape .pending{
	color:var(--dim)
}

#tape .cursor{
	display:inline-block;
	width:.55em;
	height:1.05em;
	background:var(--amber);
	vertical-align:text-bottom;
	margin-left:2px;
	animation:blink 1.1s steps(1) infinite
}

@media(prefers-reduced-motion:reduce){
	#tape .cursor{
		animation:none
	}
}

@keyframes blink{
	50%{
		opacity:0
	}
}

#copy{
	position:absolute;
	top:10px;
	right:10px
}

#msg{
	color:var(--warn)
}

.drop{
	outline:2px dashed var(--amber);
	outline-offset:-8px
}

#bRec.on{
	color:var(--warn);
	border-color:var(--warn);
	animation:pulse 1.2s ease-in-out infinite
}

@keyframes pulse{
	50%{
		opacity:.45
	}
}

@media(prefers-reduced-motion:reduce){
	#bRec.on{
		animation:none
	}
}

#recList{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:6px
}

#recList li{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	padding:6px 8px;
	background:var(--panel2);
	border:1px solid var(--line);
	border-radius:8px
}

#recList .nm{
	color:var(--amber)
}

#recList .sz{
	color:var(--dim);
	font-size:12px
}

#recList audio{
	height:30px;
	max-width:240px
}

#recList .sp{
	margin-left:auto
}

#recList .btn{
	display:inline-flex;
	align-items:center;
	gap:6px;
	text-decoration:none;
	color:var(--ink);
	line-height:1
}

#recList .btn svg{
	width:14px;
	height:14px;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	fill:none
}

#recList a.btn:hover,
#recList a.btn:visited{
	color:var(--ink)
}

/* ---------------------------------------- Modal für Signalweg und Doku */
dialog.modal{
	width:min(1340px,94vw);
	max-width:none;
	max-height:90vh;
	margin:auto;
	padding:0;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--panel);
	color:var(--ink);
	box-shadow:0 24px 70px rgba(0,0,0,.62);
	overflow:hidden
}

dialog.modal[open]{
	display:flex;
	flex-direction:column
}

dialog.modal::backdrop{
	background:rgba(8,11,16,.74)
}

.modal-head{
	display:flex;
	align-items:center;
	gap:12px;
	flex:none;
	padding:11px 14px;
	border-bottom:1px solid var(--line)
}

.modal-title{
	margin:0;
	font:600 12px/1 var(--mono);
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--amber)
}

.modal-close{
	margin-left:auto;
	display:inline-flex;
	padding:6px 10px;
	line-height:1
}

.modal-close svg{
	width:14px;
	height:14px;
	stroke:currentColor;
	stroke-width:1.8;
	stroke-linecap:round;
	fill:none
}

.modal-body{
	flex:1 1 auto;
	min-height:0;
	overflow:auto;
	padding:14px 18px 22px
}

.modal-body>#doc{
	margin:0 auto
}

@media(max-width:560px){
	dialog.modal{
		width:100vw;
		max-height:100dvh;
		height:100dvh;
		border:0;
		border-radius:0
	}

	.modal-body{
		padding:12px 13px 20px
	}
}

@media(prefers-reduced-motion:no-preference){
	dialog.modal[open]{
		animation:mIn .16s ease-out
	}

	dialog.modal[open]::backdrop{
		animation:bIn .16s ease-out
	}
}

@keyframes mIn{
	from{
		opacity:0;
		transform:translateY(8px)
	}
}

@keyframes bIn{
	from{
		opacity:0
	}
}

/* ---------------------------------------- Fragezeichen-Hilfe an den Reglern */
.slider .head span:first-child{
	display:inline-flex;
	align-items:center;
	gap:5px;
	min-width:0
}

.help{
	flex:none;
	width:14px;
	height:14px;
	border-radius:50%;
	border:1px solid var(--line);
	background:none;
	color:var(--dim);
	font:600 10px/1 system-ui,sans-serif;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:help;
	padding:0
}

.help:hover,
.help[aria-expanded="true"]{
	border-color:var(--amber);
	color:var(--amber)
}

.tip{
	position:fixed;
	z-index:50;
	max-width:290px;
	background:var(--panel2);
	border:1px solid var(--amber);
	border-radius:8px;
	padding:8px 10px;
	font:12px/1.5 system-ui,sans-serif;
	color:var(--ink);
	box-shadow:0 8px 24px rgba(0,0,0,.55);
	text-transform:none;
	letter-spacing:0
}

.tip b{
	color:var(--amber);
	display:block;
	margin-bottom:3px
}

/* ---------------------------------------- Doku */
#doc{
	max-width:1280px;
	font-family:system-ui,sans-serif;
	line-height:1.62
}

#doc h2{
	font:600 15px/1.3 var(--mono);
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--amber);
	margin:30px 0 10px;
	padding-bottom:6px;
	border-bottom:1px solid var(--line)
}

#doc h2:first-child{
	margin-top:4px
}

#doc h3{
	font:600 13px/1.3 var(--mono);
	color:var(--ink);
	margin:20px 0 6px
}

#doc p,
#doc li{
	color:var(--ink)
}

#doc ul,
#doc ol{
	margin:6px 0 6px 4px;
	padding-left:20px
}

#doc li{
	margin:3px 0
}

#doc code{
	font-family:var(--mono);
	font-size:12.5px;
	color:var(--amber);
	background:var(--panel2);
	border:1px solid var(--line);
	border-radius:4px;
	padding:1px 5px
}

#doc pre{
	background:var(--panel2);
	border:1px solid var(--line);
	border-radius:8px;
	padding:10px 12px;
	overflow-x:auto
}

#doc pre code{
	border:0;
	padding:0;
	background:none;
	color:var(--ink)
}

#doc table{
	border-collapse:collapse;
	width:100%;
	margin:8px 0;
	font-size:13px
}

#doc th,
#doc td{
	border:1px solid var(--line);
	padding:6px 9px;
	text-align:left;
	vertical-align:top
}

#doc th{
	color:var(--dim);
	font-weight:600;
	background:var(--panel2)
}

#doc td:first-child{
	color:var(--amber);
	font-family:var(--mono);
	white-space:nowrap
}

#doc .note{
	border-left:3px solid var(--amber);
	background:var(--panel2);
	border-radius:0 8px 8px 0;
	padding:9px 12px;
	margin:12px 0
}

#doc .toc{
	columns:2;
	column-gap:26px;
	list-style:none;
	padding:0;
	margin:8px 0
}

@media(max-width:620px){
	#doc .toc{
		columns:1
	}
}

#doc .toc a{
	color:var(--trace);
	text-decoration:none
}

#doc .toc a:hover{
	color:var(--amber);
	text-decoration:underline
}

/* ---------------------------------------- Blockschaltbild */
#viewSig{
	overflow-x:auto
}

#sig{
	min-width:860px;
	max-width:1280px;
	width:100%;
	height:auto;
	display:block;
	margin:0 auto
}

#sig text{
	font-family:var(--mono);
	fill:var(--ink)
}

#sig .blk{
	fill:var(--panel2);
	stroke:var(--line);
	stroke-width:1.5;
	rx:8
}

#sig .blk.live{
	stroke:var(--trace);
	stroke-dasharray:5 3
}

#sig .num{
	fill:var(--amber);
	font-size:11px;
	font-weight:600
}

#sig .name{
	font-size:13px;
	font-weight:600
}

#sig .sub{
	fill:var(--dim);
	font-size:10.5px
}

#sig .par{
	fill:var(--amber);
	font-size:10px
}

#sig .wire{
	stroke:var(--trace);
	stroke-width:2;
	fill:none;
	marker-end:url(#arw)
}

#sig .wire.fb{
	stroke:var(--amber);
	stroke-dasharray:4 3;
	marker-end:url(#arwA)
}

#sig .lbl{
	fill:var(--dim);
	font-size:10px;
	font-family:system-ui,sans-serif
}

#sig .grp{
	fill:none;
	stroke:var(--line);
	stroke-dasharray:3 4;
	rx:10
}

#sig .grplbl{
	fill:var(--dim);
	font-size:10px;
	letter-spacing:.12em;
	font-family:system-ui,sans-serif
}

#sigLegend{
	display:flex;
	flex-wrap:wrap;
	gap:18px;
	margin-top:12px;
	font:12px/1.5 system-ui,sans-serif;
	color:var(--dim)
}

#sigLegend span{
	display:inline-flex;
	align-items:center;
	gap:7px
}

#sigLegend i{
	width:22px;
	height:0;
	border-top-width:2px;
	border-top-style:solid;
	display:inline-block
}