/* s4codes Core — frontend
   Tokens matcher den godkendte mockup. Aendres farver, aendres de her. */

.s4-codes,
.s4-cats,
.s4-console,
.s4-archive {
	--s4-ink: #15323D;
	--s4-muted: #5D7B86;
	--s4-line: #D6E6EB;
	--s4-green: #52B92B;
	--s4-green-dark: #3D8E1F;
	--s4-green-soft: #EAF7E2;
	--s4-cyan: #1FAFC8;
	--s4-cyan-soft: #E2F5F8;
	--s4-sun: #FFC53D;
	--s4-sun-soft: #FFF8E6;
	--s4-sun-ink: #A87400;
	--s4-console: #0C2530;
	--s4-console-line: #1E4351;
	--s4-code: #CFF3E0;
	--s4-panel: #FFFFFF;
	--s4-grey-soft: #F0F5F7;
	--s4-radius: 20px;
	--s4-shadow-sm: 0 2px 4px rgba(21, 50, 61, .04), 0 8px 20px rgba(21, 50, 61, .06);
	--s4-shadow-md: 0 4px 8px rgba(21, 50, 61, .05), 0 18px 40px rgba(21, 50, 61, .10);
	--s4-display: "Fredoka", "Trebuchet MS", sans-serif;
	--s4-body: "Figtree", "Segoe UI", system-ui, sans-serif;
	--s4-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	font-family: var(--s4-body);
	color: var(--s4-ink);
}

/* ---------------------------------------------------------- konsolfeltet */
.s4-console {
	max-width: 760px;
	margin: 0 auto;
	background: var(--s4-console);
	border-radius: 16px;
	padding: 6px;
	box-shadow: 0 6px 0 rgba(6, 20, 26, .35), 0 26px 50px rgba(12, 37, 48, .28);
}

.s4-console-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px 8px;
	border-bottom: 1px solid var(--s4-console-line);
}

.s4-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #2C5A6B;
	display: inline-block;
}

.s4-dot:first-child { background: var(--s4-green); }

.s4-console-title {
	margin-left: 8px;
	font-family: var(--s4-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6E96A4;
}

.s4-console-field {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
}

.s4-prompt {
	font-family: var(--s4-mono);
	font-weight: 700;
	color: var(--s4-green);
	flex: none;
}

.s4-console-field .s4-q {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: 0;
	box-shadow: none;
	color: #EAFBF2;
	font-family: var(--s4-mono);
	font-size: 1rem;
	padding: 0;
	caret-color: var(--s4-green);
}

.s4-console-field .s4-q::placeholder { color: #5F8694; }

/* Hoej specificitet: temaets og Elementors knapregler skal ikke vinde her. */
.s4-console button.s4-go,
.s4-console button.s4-go:visited {
	flex: none;
	border: 0 none;
	outline: 0;
	cursor: pointer;
	padding: 9px 16px;
	margin: 0;
	border-radius: 10px;
	background-color: var(--s4-green);
	background-image: none;
	color: #fff;
	font-family: var(--s4-body);
	font-weight: 700;
	font-size: .9rem;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	box-shadow: 0 3px 0 var(--s4-green-dark);
	transition: transform .15s, background-color .15s;
	-webkit-appearance: none;
	appearance: none;
}

.s4-console button.s4-go:hover,
.s4-console button.s4-go:focus {
	background-color: #5CC932;
	color: #fff;
	border: 0 none;
	transform: translateY(-1px);
}

.s4-console button.s4-go:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 var(--s4-green-dark);
}

/* Samme beskyttelse af selve inputfeltet */
.s4-console .s4-console-field input.s4-q,
.s4-console .s4-console-field input.s4-q:focus {
	background: none;
	background-color: transparent;
	border: 0 none;
	outline: 0;
	box-shadow: none;
	border-radius: 0;
	color: #EAFBF2;
	height: auto;
	-webkit-appearance: none;
	appearance: none;
}

/* ---------------------------------------------------------- kategorifelter */
.s4-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.s4-cat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	background: var(--s4-panel);
	border: 1px solid var(--s4-line);
	border-radius: 16px;
	box-shadow: var(--s4-shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: transform .18s, border-color .18s, box-shadow .18s;
}

.s4-cat:hover {
	transform: translateY(-3px);
	border-color: var(--s4-green);
	box-shadow: var(--s4-shadow-md);
}

.s4-cat-ico {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 13px;
	background: var(--s4-cyan-soft);
	color: var(--s4-cyan);
}

.s4-cat:nth-child(4n+1) .s4-cat-ico { background: var(--s4-green-soft); color: var(--s4-green-dark); }
.s4-cat:nth-child(4n+3) .s4-cat-ico { background: #FFF4DA; color: #C68A00; }

.s4-cat-txt strong {
	display: block;
	font-family: var(--s4-display);
	font-weight: 600;
	font-size: 1.02rem;
}

.s4-cat-txt span { font-size: .82rem; color: var(--s4-muted); }

/* ---------------------------------------------------------- faner */
.s4-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

/* Fanerne skal se ud som piller, ikke som temaets knapper. Hoej
   specificitet, fordi temaets knapregler ellers vinder. */
.s4-codes button.s4-tab,
.s4-codes button.s4-tab:visited {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	margin: 0;
	border: 1px solid var(--s4-line);
	border-radius: 999px;
	background-color: #fff;
	background-image: none;
	box-shadow: none;
	font-family: var(--s4-body);
	font-weight: 600;
	font-size: .88rem;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--s4-muted);
	cursor: pointer;
	transition: background-color .16s, border-color .16s, color .16s;
	-webkit-appearance: none;
	appearance: none;
}

.s4-codes button.s4-tab:hover,
.s4-codes button.s4-tab:focus {
	border-color: var(--s4-green);
	background-color: var(--s4-green-soft);
	color: var(--s4-green-dark);
}

.s4-codes button.s4-tab.is-on {
	background-color: var(--s4-green);
	border-color: var(--s4-green);
	color: #fff;
	box-shadow: 0 3px 0 var(--s4-green-dark);
}

.s4-codes button.s4-tab.is-on:hover {
	background-color: #5CC932;
	border-color: #5CC932;
	color: #fff;
}

/* ---------------------------------------------------------- kodekort */
.s4-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 16px;
}

/* Uden min-width kan et gitterfelt ikke blive smallere end sit indhold,
   og en lang kodelinje skubber hele siden ud i bredden. */
.s4-grid > * { min-width: 0; }

.s4-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 12px;
	padding: 20px;
	background: var(--s4-panel);
	border: 1px solid var(--s4-line);
	border-radius: var(--s4-radius);
	box-shadow: var(--s4-shadow-sm);
	transition: transform .18s, box-shadow .18s, border-color .18s;
}

.s4-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--s4-shadow-md);
	border-color: #B9DCE5;
}

.s4-card-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin-bottom: -4px;
}

.s4-card-title {
	min-width: 0;
	/* Ombryd mellem ordene. Orddeling braekker korte ord som "niveau"
	   unoedigt, og titlerne er alligevel aldrig lange nok til at kraeve det. */
	overflow-wrap: break-word;
	hyphens: manual;
}

.s4-card-title {
	margin: 0;
	font-family: var(--s4-display);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.2;
}

.s4-card-desc {
	margin: 0;
	font-size: .92rem;
	color: var(--s4-muted);
	flex: 1;
}

.s4-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--s4-cyan-soft);
	color: #137A8C;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

/* Maerkatets farve foelger kategoriens ikonvalg */
.s4-pill--home,
.s4-pill--gauge { background: var(--s4-green-soft); color: var(--s4-green-dark); }

.s4-pill--camera,
.s4-pill--sparkle { background: #FFF4DA; color: #B07C00; }

.s4-pill--keyboard { background: var(--s4-grey-soft); color: #4E6B77; }

.s4-pill--coins,
.s4-pill--briefcase,
.s4-pill--heart,
.s4-pill--sim,
.s4-pill--chart { background: var(--s4-cyan-soft); color: #137A8C; }

.s4-note {
	font-size: .8rem;
	color: #B07C00;
	background: var(--s4-sun-soft);
	border-radius: 9px;
	padding: 7px 10px;
}

/* Hoej specificitet: kodebjaelken er en <button>, og temaets knapregler
   maa ikke overtage baggrund, ramme eller farve. */
.s4-card button.s4-codebar,
.s4-card button.s4-codebar:visited {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	border: 0 none;
	outline: 0;
	margin: 0;
	cursor: pointer;
	background-color: var(--s4-console);
	background-image: none;
	color: var(--s4-code);
	border-radius: 12px;
	padding: 12px 12px 12px 14px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color .15s;
	-webkit-appearance: none;
	appearance: none;
}

.s4-card button.s4-codebar:hover,
.s4-card button.s4-codebar:focus {
	background-color: #123241;
	color: var(--s4-code);
	border: 0 none;
}

.s4-card button.s4-codebar .s4-prompt {
	color: var(--s4-green);
	font-size: .9rem;
}

.s4-card button.s4-codebar code {
	color: var(--s4-code);
	background: none;
	background-color: transparent;
}

.s4-codebar code {
	flex: 1;
	min-width: 0;
	background: none;
	padding: 0;
	font-family: var(--s4-mono);
	font-size: .83rem;
	color: var(--s4-code);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.s4-copy {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .09);
	color: #9FC7D4;
	transition: .15s;
}

.s4-codebar:hover .s4-copy { background: var(--s4-green); color: #fff; }
.s4-codebar.is-copied .s4-copy { background: var(--s4-green); color: #fff; }

/* ---------------------------------------------------------- testmaerkning */
.s4-verified {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .76rem;
	color: var(--s4-muted);
	padding-top: 12px;
	border-top: 1px solid var(--s4-line);
	margin-top: auto;
}

.s4-verified i {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--s4-green);
	box-shadow: 0 0 0 3px var(--s4-green-soft);
}

.s4-verified b { font-family: var(--s4-mono); font-weight: 700; font-size: .74rem; }
.s4-verified.is-stale { color: var(--s4-sun-ink); }
.s4-verified.is-stale i { background: var(--s4-sun); box-shadow: 0 0 0 3px #FFF4DA; }

/* ---------------------------------------------------------- tom soegning */
.s4-empty {
	padding: 40px;
	text-align: center;
	background: #fff;
	border: 1px dashed var(--s4-line);
	border-radius: var(--s4-radius);
	color: var(--s4-muted);
}

.s4-empty[hidden] { display: none; }

/* ---------------------------------------------------------- kvittering */
.s4-toast {
	position: fixed;
	top: 18px;
	left: 18px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 12px;
	background: #0C2530;
	color: #EAFBF2;
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 4px 0 rgba(6, 20, 26, .4), 0 20px 40px rgba(12, 37, 48, .3);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: .82rem;
	transform: translateY(-140%);
	opacity: 0;
	transition: transform .34s cubic-bezier(.2, .9, .3, 1.2), opacity .2s;
	pointer-events: none;
}

.s4-toast.is-visible { transform: translateY(0); opacity: 1; }

.s4-toast .s4-tick {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #52B92B;
	color: #fff;
	flex: none;
}

.s4-toast em {
	font-style: normal;
	color: #7FA3AF;
	display: block;
	font-size: .74rem;
	margin-top: 2px;
}

/* ---------------------------------------------------------- arkiv */
.s4-archive {
	width: min(1180px, calc(100% - 40px));
	margin: 48px auto;
}

.s4-archive-head { margin-bottom: 32px; }

.s4-archive-head h1 {
	font-family: var(--s4-display);
	font-weight: 600;
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	margin: 0 0 10px;
}

.s4-archive-intro { color: var(--s4-muted); margin-bottom: 22px; }
.s4-pagination { margin-top: 34px; display: flex; justify-content: center; gap: 8px; }
.s4-pagination .page-numbers {
	padding: 8px 14px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--s4-line);
	text-decoration: none;
	color: var(--s4-muted);
	font-weight: 600;
}
.s4-pagination .page-numbers.current { background: var(--s4-ink); color: #fff; border-color: var(--s4-ink); }

/* ---------------------------------------------------------- responsivt */
@media (max-width: 980px) {
	.s4-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.s4-grid { grid-template-columns: 1fr; }
	.s4-cats { grid-template-columns: 1fr; }
	.s4-console-field { padding: 12px 10px; }
	.s4-go { padding: 9px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.s4-card, .s4-cat, .s4-go, .s4-toast, .s4-codebar { transition: none; }
	.s4-card:hover, .s4-cat:hover, .s4-go:hover { transform: none; }
	.s4-toast { transform: translateY(0); }
}

.s4-archive-none {
	padding: 40px;
	text-align: center;
	background: #fff;
	border: 1px dashed var(--s4-line);
	border-radius: var(--s4-radius);
	color: var(--s4-muted);
}

/* ============================================================== hybridmatrix */
.s4-matrix-wrap {
	--s4-ink: #15323D;
	--s4-muted: #5D7B86;
	--s4-line: #D6E6EB;
	--s4-green: #52B92B;
	--s4-green-dark: #3D8E1F;
	--s4-green-soft: #EAF7E2;
	--s4-sun: #FFC53D;
	--s4-sun-soft: #FFF6E0;
	--s4-sun-ink: #A87400;
	--s4-red: #D8474B;
	--s4-red-soft: #FCE9E9;
	--s4-grey: #9FB5BE;
	--s4-grey-soft: #F0F5F7;
	--s4-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	--s4-display: "Fredoka", "Trebuchet MS", sans-serif;
	--s4-body: "Figtree", "Segoe UI", system-ui, sans-serif;
	font-family: var(--s4-body);
	color: var(--s4-ink);
}

.s4-matrix-count {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	margin: 0 0 18px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--s4-line);
	font-size: .83rem;
	font-weight: 600;
	color: var(--s4-muted);
}

.s4-matrix-scroll {
	background: #fff;
	border: 1px solid var(--s4-line);
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(21, 50, 61, .04), 0 8px 20px rgba(21, 50, 61, .06);
	padding: 8px;
	overflow-x: auto;
}

table.s4-matrix {
	border-collapse: separate;
	border-spacing: 4px;
	table-layout: fixed;
	width: 100%;
	min-width: 620px;
	margin: 0;
}

table.s4-matrix th.s4-corner { width: 110px; }

table.s4-matrix th,
table.s4-matrix td {
	padding: 0;
	border: 0;
	background: none;
}

table.s4-matrix th.s4-col {
	font-size: .74rem;
	font-weight: 600;
	color: var(--s4-muted);
	text-align: center;
	padding: 8px 2px;
	vertical-align: bottom;
	line-height: 1.2;
}

table.s4-matrix th.s4-row {
	font-size: .85rem;
	font-weight: 600;
	text-align: left;
	padding-right: 12px;
	white-space: nowrap;
	width: 1%;
}

.s4-matrix-wrap button.s4-cell {
	width: 100%;
	height: 46px;
	font-family: var(--s4-body);
	font-weight: 700;
	text-shadow: none;
	border: 1px solid transparent;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-size: .9rem;
	cursor: pointer;
	padding: 0;
	background-image: none;
	box-shadow: none;
	transition: transform .14s;
	-webkit-appearance: none;
	appearance: none;
}

.s4-matrix-wrap button.s4-cell:hover { transform: scale(1.09); }
.s4-matrix-wrap button.s4-cell.is-selected {
	outline: 3px solid var(--s4-ink);
	outline-offset: 1px;
	z-index: 2;
	position: relative;
}

/* Statusfarverne er data, ikke pynt. Temaets knap- og accentfarver har
   overskrevet dem tre gange, saa de laases her. */
.s4-matrix-wrap .s4-c-ok,
.s4-matrix-wrap button.s4-cell.s4-c-ok {
	background-color: #C9EBB4 !important;
	background-image: none !important;
	color: #2E7A14 !important;
	border-color: #8FCF6B !important;
}

.s4-matrix-wrap .s4-c-part,
.s4-matrix-wrap button.s4-cell.s4-c-part {
	background-color: #FBE3A8 !important;
	background-image: none !important;
	color: #8A5E00 !important;
	border-color: #E0BC5C !important;
}

.s4-matrix-wrap .s4-c-no,
.s4-matrix-wrap button.s4-cell.s4-c-no {
	background-color: #F8CBCD !important;
	background-image: none !important;
	color: #A82F33 !important;
	border-color: #E79598 !important;
}

.s4-matrix-wrap .s4-c-todo,
.s4-matrix-wrap button.s4-cell.s4-c-todo {
	background-color: #DDE8ED !important;
	background-image: none !important;
	color: #7C95A1 !important;
	border-color: #C3D6DE !important;
}

.s4-self {
	width: 100%;
	height: 46px;
	border-radius: 10px;
	background: repeating-linear-gradient(45deg, #F0F5F7, #F0F5F7 4px, #E5EDF0 4px, #E5EDF0 8px);
}

.s4-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 18px;
	font-size: .85rem;
	color: var(--s4-muted);
}

.s4-legend span { display: flex; align-items: center; gap: 8px; }
.s4-dotk {
	width: 15px;
	height: 15px;
	border-radius: 5px;
	display: inline-block;
	border-width: 1px;
	border-style: solid;
	flex: none;
}

.s4-matrix-detail {
	margin-top: 18px;
	background: #fff;
	border: 1px solid var(--s4-line);
	border-radius: 20px;
	box-shadow: 0 2px 4px rgba(21, 50, 61, .04), 0 8px 20px rgba(21, 50, 61, .06);
	padding: 26px;
}

.s4-detail-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.s4-detail-top h3 {
	margin: 0;
	font-family: var(--s4-display);
	font-weight: 600;
	font-size: 1.35rem;
}

.s4-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .83rem;
	font-weight: 700;
}

.s4-b-ok { background: var(--s4-green-soft); color: var(--s4-green-dark); }
.s4-b-part { background: var(--s4-sun-soft); color: var(--s4-sun-ink); }
.s4-b-no { background: var(--s4-red-soft); color: var(--s4-red); }
.s4-b-todo { background: var(--s4-grey-soft); color: #6E8792; }

.s4-detail-sum { margin: 0 0 18px; color: var(--s4-muted); }

.s4-checks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.s4-checks li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
	padding: 10px 14px;
	background: var(--s4-grey-soft);
	border-radius: 11px;
	margin: 0;
}

.s4-checks li.is-un { color: var(--s4-muted); }

.s4-mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: .7rem;
	font-weight: 700;
	color: #fff;
}

.s4-m-yes { background: var(--s4-green); }
.s4-m-no { background: var(--s4-red); }
.s4-m-un { background: var(--s4-grey); }

.s4-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 18px;
	border-top: 1px solid var(--s4-line);
}

.s4-detail-meta span,
.s4-detail-meta a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--s4-grey-soft);
	font-size: .83rem;
	font-weight: 600;
	color: var(--s4-muted);
	text-decoration: none;
}

.s4-detail-meta a { color: var(--s4-green-dark); }
.s4-detail-meta b { font-family: var(--s4-mono); font-weight: 700; font-size: .8rem; color: var(--s4-ink); }
.s4-detail-meta .is-stale { background: var(--s4-sun-soft); color: var(--s4-sun-ink); }

@media (max-width: 700px) {
	.s4-checks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.s4-matrix-wrap button.s4-cell { transition: none; }
	.s4-matrix-wrap button.s4-cell:hover { transform: none; }
}

/* enkeltstaaende kodelinje i guider */
.s4-codeline { max-width: 560px; margin: 4px 0 8px; }
.s4-codeline .s4-codebar { border: 0 none; }
.s4-codeline button.s4-codebar {
	background-color: var(--s4-console);
	border-radius: 12px;
	padding: 12px 12px 12px 14px;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.s4-codeline button.s4-codebar:hover { background-color: #123241; }
.s4-codeline button.s4-codebar code {
	color: var(--s4-code);
	background: none;
	font-family: var(--s4-mono);
	font-size: .88rem;
	flex: 1;
	text-align: left;
}
.s4-codeline button.s4-codebar .s4-prompt { color: var(--s4-green); }

/* ================================================================ formular */
.s4-form,
.s4-form-done {
	--s4-ink: #15323D;
	--s4-muted: #5D7B86;
	--s4-line: #D6E6EB;
	--s4-green: #52B92B;
	--s4-green-dark: #3D8E1F;
	--s4-green-soft: #EAF7E2;
	--s4-body: "Figtree", "Segoe UI", system-ui, sans-serif;
	--s4-mono: "JetBrains Mono", ui-monospace, monospace;
	font-family: var(--s4-body);
	color: var(--s4-ink);
	max-width: 680px;
}

.s4-form-done {
	background: var(--s4-green-soft);
	border: 1px solid #C4E8B2;
	border-left: 5px solid var(--s4-green);
	border-radius: 16px;
	padding: 18px 22px;
	margin-bottom: 26px;
}

.s4-form-done strong { display: block; color: var(--s4-green-dark); margin-bottom: 4px; }
.s4-form-done span { font-size: .94rem; color: #3F6B2C; }

.s4-field { margin: 0 0 18px; }
.s4-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.s4-field label {
	display: block;
	font-weight: 600;
	font-size: .92rem;
	margin-bottom: 6px;
	color: var(--s4-ink);
}

.s4-form input[type="text"],
.s4-form input[type="email"],
.s4-form select,
.s4-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--s4-line);
	border-radius: 12px;
	background-color: #fff;
	color: var(--s4-ink);
	font-family: var(--s4-body);
	font-size: .95rem;
	line-height: 1.5;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.s4-form input[type="text"]#s4k_code,
.s4-form input[type="text"]#s4k_version { font-family: var(--s4-mono); font-size: .88rem; }

.s4-form select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235D7B86' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px;
}

.s4-form input:focus,
.s4-form select:focus,
.s4-form textarea:focus {
	outline: 0;
	border-color: var(--s4-green);
	box-shadow: 0 0 0 3px var(--s4-green-soft);
}

.s4-form textarea { resize: vertical; min-height: 130px; }
.s4-hint { display: block; font-size: .8rem; color: var(--s4-muted); margin-top: 5px; }

/* honningkrukken skal vaere usynlig for mennesker, men laesbar for hjaelpeteknologi */
.s4-website {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.s4-form button.s4-form-send {
	border: 0 none;
	cursor: pointer;
	padding: 13px 26px;
	border-radius: 12px;
	background-color: var(--s4-green);
	background-image: none;
	color: #fff;
	font-family: var(--s4-body);
	font-weight: 700;
	font-size: .95rem;
	box-shadow: 0 3px 0 var(--s4-green-dark);
	-webkit-appearance: none;
	appearance: none;
	transition: transform .15s, background-color .15s;
}

.s4-form button.s4-form-send:hover { background-color: #5CC932; transform: translateY(-1px); color: #fff; }
.s4-form button.s4-form-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--s4-green-dark); }

@media (max-width: 600px) {
	.s4-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* tastaturgenveje: knapper i stedet for kodebjaelke */
.s4-keys {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px 0 2px;
	min-width: 0;
}

.s4-card .s4-key {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--s4-line);
	border-bottom-width: 3px;
	border-radius: 8px;
	font-family: var(--s4-mono);
	font-size: .85rem;
	font-weight: 700;
	color: var(--s4-ink);
	box-shadow: var(--s4-shadow-sm);
}

.s4-card .s4-key-plus {
	font-weight: 700;
	font-size: .85rem;
	color: var(--s4-muted);
}

/* tre grader af sikkerhed */
.s4-verified.is-tested i { background: var(--s4-green); box-shadow: 0 0 0 3px var(--s4-green-soft); }
.s4-verified.is-stale { color: var(--s4-sun-ink); }
.s4-verified.is-stale i { background: var(--s4-sun); box-shadow: 0 0 0 3px #FFF4DA; }
/* Kildeangivelse: diskret, ikke et advarselsskilt */
.s4-verified.is-documented { color: var(--s4-muted); }
.s4-verified.is-documented i { background: #B9CFD8; box-shadow: 0 0 0 3px var(--s4-grey-soft); }
.s4-verified.is-unknown { color: var(--s4-muted); }
.s4-verified.is-unknown i { background: #9FB5BE; box-shadow: 0 0 0 3px var(--s4-grey-soft); }

/* modsætning og beslægtede koder */
.s4-card button.s4-codebar--opposite {
	background-color: #16394A;
	padding: 9px 10px 9px 12px;
	gap: 8px;
}

.s4-card button.s4-codebar--opposite:hover { background-color: #1B4759; }

.s4-opposite-label {
	flex: none;
	font-family: var(--s4-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #7FA9B8;
}

.s4-card button.s4-codebar--opposite code { font-size: .78rem; }

.s4-related {
	font-size: .8rem;
	color: var(--s4-muted);
	line-height: 1.5;
}

.s4-related span { font-weight: 600; }
.s4-related a { color: var(--s4-green-dark); text-decoration: none; }
.s4-related a:hover { text-decoration: underline; }



/* genvej vist inde i brødtekst */
.s4-inline-keys {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	vertical-align: middle;
}

.s4-inline-keys .s4-key {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #D6E6EB;
	border-bottom-width: 3px;
	border-radius: 7px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: .8rem;
	font-weight: 700;
	color: #15323D;
}

/* antal i fanen og tæller under den */
.s4-tab-n {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--s4-grey-soft);
	font-size: .74rem;
	font-weight: 700;
	color: var(--s4-muted);
}

.s4-codes button.s4-tab.is-on .s4-tab-n { background: rgba(255, 255, 255, .22); color: #fff; }

.s4-count {
	margin: 0 0 18px;
	font-size: .85rem;
	color: var(--s4-muted);
}

/* vis flere: bladring der respekterer filteret */
.s4-more {
	margin-top: 26px;
	text-align: center;
}

.s4-codes button.s4-more-btn {
	border: 1px solid var(--s4-line);
	background-color: #fff;
	color: var(--s4-ink);
	font-family: var(--s4-body);
	font-weight: 700;
	font-size: .92rem;
	padding: 13px 26px;
	border-radius: 12px;
	cursor: pointer;
	box-shadow: var(--s4-shadow-sm);
	-webkit-appearance: none;
	appearance: none;
}

.s4-codes button.s4-more-btn:hover {
	border-color: var(--s4-green);
	color: var(--s4-green-dark);
	background-color: var(--s4-green-soft);
}

.s4-more[hidden] { display: none; }

/* Ankerlinks skal ikke lande under den klæbende header.
   Højden er headerens 70 px plus lidt luft. */
html {
	scroll-padding-top: 96px;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* byggetricks: kompakt visning af tastaturgenveje */
.s4-tricks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.s4-tricks > * { min-width: 0; }

.s4-trick {
	background: var(--s4-panel);
	border: 1px solid var(--s4-line);
	border-radius: 16px;
	padding: 20px;
}

.s4-trick .s4-keys { padding: 0 0 12px; }

.s4-trick .s4-key {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--s4-line);
	border-bottom-width: 3px;
	border-radius: 8px;
	font-family: var(--s4-mono);
	font-size: .85rem;
	font-weight: 700;
	color: var(--s4-ink);
	box-shadow: var(--s4-shadow-sm);
}

.s4-trick-title {
	margin: 0 0 6px;
	font-family: var(--s4-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--s4-ink);
}

.s4-trick-desc {
	margin: 0;
	font-size: .92rem;
	color: var(--s4-muted);
}