:root {
	--bakgrund: #1b3150;
	--papper: #e7e1d5;
	--papper-ljust: #f3eee4;
	--text: #1a1f26;
	--text-dampad: #3f4a55;
	--text-svag: #57544b;
	--linje: #d3cbbb;
	--guld: #d4ad6a;
	--etikett: #6b5222;
	--ljus: #f7f4ee;
	--knapp-text: #fffdf9;
	--kant-svag: #bfb6a3;
	--gron: #2f5e3a;
	--display: Georgia, 'Times New Roman', serif;
	--brod: 'Segoe UI', system-ui, -apple-system, sans-serif;
	--etikett-typsnitt: Consolas, 'Courier New', monospace;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--brod);
	color: var(--text);
	background-color: var(--bakgrund);
	background-image:
		repeating-linear-gradient(135deg, rgba(255, 253, 249, 0.028) 0px, rgba(255, 253, 249, 0.028) 1px, transparent 1px, transparent 14px),
		linear-gradient(160deg, #132438 0%, #1f3a5f 58%, #2b4a6e 100%);
	background-attachment: fixed;
}
.topp {
	height: 64px;
	flex-shrink: 0;
	padding: 0 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(10, 20, 34, 0.35);
	border-bottom: 1px solid rgba(255, 253, 249, 0.08);
}
.topp-namn { display: flex; align-items: center; gap: 16px; }
.namn { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ljus); }
.delare { width: 1px; height: 18px; background: rgba(255, 253, 249, 0.2); }
.etikett {
	font-family: var(--etikett-typsnitt);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--guld);
}
.sprak { display: flex; gap: 8px; }
.sprak a {
	text-decoration: none;
	font-family: var(--etikett-typsnitt);
	font-size: 12px;
	color: #cfc6b4;
	padding: 6px 10px;
	border: 1px solid rgba(255, 253, 249, 0.14);
	border-radius: 3px;
}
.sprak a.sprak-vald { color: var(--ljus); border-color: rgba(212, 173, 106, 0.6); }
/*
 * NAVIGERINGEN I TOPPREMSAN (the-gate#23). Bara när sessionen är giltig;
 * klassen topp-nav sitter då på rubrikraden, så att sidorna utan navigering
 * har samma rad som förut, också i det smala fönstret.
 */
.topp-hoger { display: flex; align-items: center; gap: 28px; }
.meny { display: flex; align-items: center; gap: 20px; }
.meny a { text-decoration: none; font-size: 14px; color: #cfc6b4; }
.meny a:hover, .meny a:focus-visible { color: var(--ljus); text-decoration: underline; }
/*
 * INLOGGNINGENS KORT CENTRERAS, DE LÅNGA SIDORNA GÖR DET INTE.
 *
 * Vertikal centrering är rätt för ett litet kort mitt på skärmen, men fel
 * för en lista som är högre än fönstret: den trycker ned kortet och lämnar
 * ett tomrum överst. Administrationen ärvde den och hamnade mitt i
 * ingenstans (VG2ZDX).
 *
 * Klassen sida-lang på main byter till toppställning med samma yttermått
 * som verktygens startsida (app-tools site.css: 1040 px, 48 px luft).
 * Formen är densamma; bara ankaret flyttas.
 *
 * INGA BAKÅTCITAT I DENNA KOMMENTAR: den står inuti en mallsträng, och ett
 * citattecken här avslutar strängen mitt i CSS:en. Framkallat 2026-09-24 —
 * modulen slutade läsa med "Unexpected identifier".
 */
main { flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
main.sida-lang {
	align-items: flex-start;
	padding: 48px 24px 64px;
}
/*
 * BREDDEN LIGGER PÅ MAIN, INTE PÅ KORTET.
 *
 * Kortet har width 100 procent, och den mäts mot sin behållare. Låg taket
 * på kortet vann en senare regel i ADMIN_CSS, och i ett smalt fönster blev
 * kortet 1040 px brett och stack ut åt höger — framkallat i en bild på
 * 420 px 2026-09-24. Taket sitter därför här, där ingen annan regel rör
 * det, och box-sizing gör att luften räknas in.
 */
main.sida-lang > * {
	width: 100%;
	max-width: 1040px;
	box-sizing: border-box;
	/*
	 * min-width 0 BRYTER FLEXBOXENS FÖRVAL. Ett flexbarn vägrar krympa
	 * under sitt innehålls minsta bredd, så en tabell med obrytbara
	 * kolumner sköt ut kortet ur fönstret trots taket ovan — mätt i en
	 * bild på 420 px. Med denna rad krymper kortet och svepet inuti
	 * scrollar i stället.
	 */
	min-width: 0;
}
/*
 * Kortets tak (the-gate#23): ett kort utan storleksklass sträckte sig över
 * hela skärmen, som 403-sidans. Taket är de långa sidornas; de små korten
 * har sina egna klasser nedan.
 */
.kort {
	width: 100%;
	max-width: 1040px;
	background: var(--papper);
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(6, 13, 23, 0.25);
	padding: 44px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.kort-440 { max-width: 440px; }
.kort-480 { max-width: 480px; gap: 22px; }
.etikett-kort {
	font-family: var(--etikett-typsnitt);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--etikett);
}
h1 { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 500; line-height: 1.15; }
.brod { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-dampad); }
.smatext { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-svag); }
.fel { margin: 0; font-size: 15px; color: #8a2f2f; background: #f7e4e4; padding: 12px 14px; border-radius: 8px; }
.linje { height: 1px; background: var(--linje); }
.knapp {
	height: 48px;
	border-radius: 8px;
	font-family: var(--brod);
	font-size: 16px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
	width: 100%;
	text-decoration: none;
}
.knapp-primar { border: none; background: #1f3a5f; color: var(--knapp-text); }
.knapp-andra { border: 1px solid var(--kant-svag); background: var(--papper-ljust); color: var(--text); font-weight: 500; }
.knapp-lank { box-sizing: border-box; }
.knappar { display: flex; gap: 12px; margin: 0; }
.knapp-bred { flex-grow: 1; }
.knappar .knapp-andra { width: 140px; }
.domanblock { display: flex; flex-direction: column; gap: 8px; }
.doman {
	font-family: var(--etikett-typsnitt);
	font-size: 30px;
	font-weight: 500;
	color: var(--text);
	padding: 12px 16px;
	background: var(--papper-ljust);
	border-radius: 8px;
	align-self: flex-start;
	word-break: break-all;
}
.scopes { display: flex; flex-direction: column; gap: 10px; }
.scopes-rubrik { font-size: 14px; font-weight: 600; color: var(--text); }
.scope { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); }
.rader { display: flex; flex-direction: column; gap: 8px; }
.rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border: 1px solid var(--linje);
	border-radius: 8px;
	background: var(--papper-ljust);
	font-size: 15px;
}
.rad-varning { border: 1px dashed #cfc6b4; background: #f6ecd6; color: #7e612a; justify-content: flex-start; gap: 10px; }
.rad-klar { gap: 10px; justify-content: flex-start; }
.rad-titel { font-size: 15px; font-weight: 600; }
.rad-under { font-size: 13px; color: var(--text-svag); }
.bock-rund {
	width: 44px;
	height: 44px;
	border-radius: 22px;
	background: #e1efe2;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 520px) {
	.topp { padding: 0 16px; }
	.kort { padding: 28px; }
	.knappar { flex-direction: column; }
	.knappar .knapp-andra { width: 100%; }
}
/* Toppremsan med navigering bryts i två rader: namnet, sedan länkarna och språket. */
@media (max-width: 640px) {
	.topp-nav { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 10px; padding: 12px 16px; }
	.topp-nav .topp-hoger { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; }
	.topp-nav .meny { gap: 16px; white-space: nowrap; }
}

/*
 * ADMINISTRATIONENS FORM ÄR INLOGGNINGENS (VG2ZDX).
 *
 * Läst före ändringen: portens DESIGN.md 15 (ytans form är canvasen
 * "Porten — sidorna i bygge 1", raden Administration v1), inloggningens
 * egen form i GATE_CSS ovan, och verktygens startsida (app-tools
 * DESIGN.md 7 med site/assets/site.css), som beställaren godkänt. Alla
 * tre är SAMMA canvas — marinblå rad, dämpat papper, tre typsnittsroller
 * — så formen här är husets, inte en ny.
 *
 * Inga bakåtcitat: denna kommentar står inuti en mallsträng och hamnar i
 * den CSS webbläsaren läser.
 *
 * Det som skilde administrationen från inloggningen var inte färgen utan
 * formatet: ett brett kort utan rubrik ovanför, tabeller som svämmade ut
 * ur kortet i ett smalt fönster, och knappar i främmande höjd.
 */

/* ── RUBRIKEN OVANFÖR KORTET, SOM PÅ VERKTYGENS STARTSIDA ──────────── */
.sidhuvud { width: 100%; margin: 0 0 28px; display: flex; flex-direction: column; gap: 6px; }
.sidhuvud h1 { color: var(--ljus); margin: 0; }
.sidhuvud .smatext { color: rgba(247, 244, 238, 0.66); }
.sidhuvud .etikett-kort { color: var(--guld); }
.sidhuvud a, .sidhuvud a:visited { color: rgba(247, 244, 238, 0.78); }
.sidhuvud a:hover, .sidhuvud a:focus-visible { color: var(--ljus); }

/* Sidor med rubrik utanför kortet staplar rubrik och kort. */
main.sida-lang { flex-direction: column; align-items: center; }

/* ── KORTEN ─────────────────────────────────────────────────────────── */
.kort-bred { gap: 28px; }
.kort-bred h2 {
	margin: 0;
	font-family: var(--display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--mitten-fg, #1f3a5f);
}
.avsnitt { display: flex; flex-direction: column; gap: 14px; }
.avsnitt + .avsnitt { padding-top: 28px; border-top: 1px solid var(--linje); }

/* ── TABELLEN, OCH DEN SMALA VYN ────────────────────────────────────── */
/*
 * Tabellen svämmade ut ur kortet under 640 px: fyra av sex kolumner syntes
 * och knappen kapades. Svepet ligger på en egen behållare, så att kortets
 * rundade hörn och skugga står kvar.
 */
.tabellsvep { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.tabell { width: 100%; border-collapse: collapse; }
.tabell th, .tabell td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--linje);
	white-space: nowrap;
}
.tabell th {
	font-family: var(--etikett-typsnitt);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-svag);
	font-weight: 400;
}
.tabell tbody tr:last-child td { border-bottom: none; }
.tabell td.varning { color: var(--etikett); font-weight: 600; background: #f6ecd6; }
.tabell a { color: var(--mitten-fg, #1f3a5f); }

/* ── SÖKRADEN ───────────────────────────────────────────────────────── */
.sokrad { display: flex; gap: 12px; }
.sidfotsknappar { display: flex; gap: 12px; flex-wrap: wrap; }
.sidfotsknappar .knapp { width: auto; min-width: 200px; padding: 0 24px; }

/* Loggens filterrad: två fält och en knapp, i linje vid sina underkanter. */
.filterrad { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filterrad .falt { flex: 1; min-width: 180px; }
.filterrad .knapp { width: auto; min-width: 140px; padding: 0 24px; flex-shrink: 0; }
.falt select {
	height: 48px;
	box-sizing: border-box;
	padding: 0 12px;
	border: 1px solid var(--kant-svag);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	background: var(--papper-ljust);
	color: var(--text);
}
.sokrad input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 48px;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--kant-svag);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	background: var(--papper-ljust);
	color: var(--text);
}
.sokrad .knapp { width: auto; min-width: 120px; padding: 0 24px; flex-shrink: 0; }

/* ── KLIENTBLOCKEN ──────────────────────────────────────────────────── */
.klientblock {
	border: 1px solid var(--linje);
	border-radius: 8px;
	padding: 20px 22px;
	background: var(--papper-ljust);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.klientblock h3 {
	margin: 0;
	font-family: var(--display);
	font-size: 17px;
	font-weight: 500;
	color: var(--mitten-fg, #1f3a5f);
}
.scope-rad {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--etikett-typsnitt);
	font-size: 13px;
}
.klientblock .knapp { align-self: flex-start; width: auto; min-width: 220px; padding: 0 24px; }

/* ── FÄLT ───────────────────────────────────────────────────────────── */
.falt { display: flex; flex-direction: column; gap: 6px; }
.falt span {
	font-family: var(--etikett-typsnitt);
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-svag);
}
.falt input {
	height: 48px;
	box-sizing: border-box;
	padding: 0 14px;
	border: 1px solid var(--kant-svag);
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	background: var(--papper-ljust);
	color: var(--text);
}

/* ── DE FARLIGA HANDLINGARNA ────────────────────────────────────────── */
.farligt { display: inline-flex; margin: 0; }
.farligt .knapp { width: auto; min-width: 240px; padding: 0 24px; }
.farliga-knappar { display: flex; flex-wrap: wrap; gap: 12px; }
.inline { display: inline; }

.lank-ruta {
	background: var(--papper-ljust);
	border: 1px solid var(--kant-svag);
	border-radius: 8px;
	padding: 14px;
	margin: 0;
	overflow-wrap: anywhere;
	font-family: var(--etikett-typsnitt);
	font-size: 13px;
	line-height: 1.5;
}
.klar { margin: 0; font-size: 15px; color: var(--gron); background: #e1efe2; padding: 12px 14px; border-radius: 8px; }
.etikett-kort { font-family: var(--etikett-typsnitt); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--etikett); }

/* ── LISTRADERNA (passkeys, medgivanden) ────────────────────────────── */
.konto-rad {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--linje);
}
.konto-rad:last-child { border-bottom: none; }
.konto-rad .smatext { display: block; margin-top: 2px; }
.konto-rad .knapp { width: auto; min-width: 120px; padding: 0 20px; flex-shrink: 0; }

/* ── SMALT FÖNSTER ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
	main.sida-lang { padding: 28px 16px 40px; }
	.sidhuvud { margin-bottom: 20px; }
	.sidhuvud h1 { font-size: 26px; }
	.kort-bred { padding: 24px 20px; gap: 22px; }
	.sokrad { flex-direction: column; }
	.sokrad .knapp { width: 100%; }
	.klientblock .knapp, .farligt .knapp, .farligt { width: 100%; min-width: 0; }
	.farliga-knappar { flex-direction: column; }
	.konto-rad { flex-direction: column; align-items: stretch; gap: 10px; }
	.konto-rad .knapp { width: 100%; }
	.tabell th, .tabell td { padding: 10px 12px; }
}

/* ── NAMNBYTET (the-gate#18 del D) ──────────────────────────────────── */
/* Fält och knapp på en rad under passkeyns namn, så att raden inte växer
   till ett eget formulär för varje passkey. */
.passkey-namn { display: flex; align-items: flex-end; gap: 8px; margin: 10px 0 0; }
.passkey-namn .falt input { height: 40px; }
.konto-rad .passkey-namn .knapp { height: 40px; min-width: 0; }

/* ── KNAPPARNA PÅ RADERNA (the-gate#23) ─────────────────────────────── */
/* Byt namn, Ta bort och Återkalla bar webbläsarens knapp: dess kant och
   bakgrund, och en större form än fältet bredvid. De följer nu temat
   (knapp-andra: portens kant och papper) och har fältets höjd. Ta bort står
   i linje med namnbytets rad, inte centrerad mot hela passkeyns rad. */
.knapp-rad { appearance: none; box-shadow: none; height: 40px; font-size: 14px; }
.konto-rad .knapp-rad { min-width: 0; padding: 0 16px; }
.passkey-bort { align-self: flex-end; }
@media (max-width: 640px) {
	/* Fältet krymper, knappen behåller sin bredd: förut sköt Byt namn ut ur
	   kortet, och sidan blev bredare än fönstret. */
	.passkey-namn .falt { flex: 1; min-width: 0; }
	.konto-rad .passkey-namn .knapp { width: auto; flex-shrink: 0; }
	.passkey-bort { align-self: stretch; }
}