/**
 * Teoriportal — stilarket for elev- og lærerportalen.
 *
 * Hvit merking i CSS: alt fargespill går gjennom --tp-primar og --tp-bakgrunn,
 * som portal-layouten overstyrer fra skolens profil. Standardverdiene under er
 * nøytrale nok til at en skole uten profil fortsatt ser ferdig ut.
 *
 * Mobil først, systemfonter, ingen eksterne ressurser — portalen skal laste
 * raskt på en elevtelefon med dårlig dekning, og aldri lekke oppslag til
 * tredjeparts fonttjenester.
 */

:root {
	--tp-primar: #1d4ed8;
	--tp-bakgrunn: #f4f6f8;
	--tp-flate: #ffffff;
	--tp-tekst: #1c2430;
	--tp-demp: #5b6572;
	--tp-kant: #d7dde3;
	--tp-gronn: #1c7c3f;
	--tp-gronn-lys: #e3f3e8;
	--tp-gul: #8a6d00;
	--tp-gul-lys: #fdf3d0;
	--tp-blaa: #1d5fa8;
	--tp-blaa-lys: #e3eefb;
	--tp-graa: #57606a;
	--tp-graa-lys: #eceff2;
	--tp-rod: #b3261e;
	--tp-rod-lys: #fbe7e6;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body.tp-kropp {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tp-tekst);
	background: var(--tp-bakgrunn);
}

h1 { font-size: 1.5rem; margin: 0 0 0.75rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.6rem; }
p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--tp-primar); }
img { max-width: 100%; height: auto; }

/* ---- Topp og bunn ---------------------------------------------------- */

.tp-topp { background: var(--tp-flate); border-bottom: 3px solid var(--tp-primar); }

.tp-topp-indre {
	max-width: 960px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.tp-merkenavn {
	font-size: 1.15rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--tp-tekst);
	display: inline-flex;
	align-items: center;
}

.tp-logo { max-height: 40px; width: auto; display: block; }

.tp-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-left: auto; }
.tp-nav a { text-decoration: none; font-weight: 600; color: var(--tp-demp); padding: 0.25rem 0; }
.tp-nav a:hover { color: var(--tp-primar); }
/* Utlogging er et POST-skjema i menyen — knappen skal se ut som nabolenkene. */
.tp-loggut { display: inline; margin: 0; }
.tp-lenkeknapp { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; color: var(--tp-demp); padding: 0.25rem 0; }
.tp-lenkeknapp:hover { color: var(--tp-primar); }

.tp-hoved { max-width: 960px; margin: 0 auto; padding: 1rem; }

.tp-bunn {
	max-width: 960px;
	margin: 2rem auto 0;
	padding: 1rem 1rem 2rem;
	color: var(--tp-demp);
	font-size: 0.85rem;
	text-align: center;
}
.tp-bunn p { margin: 0; }
.tp-bunn-drives { opacity: 0.8; }
/* Personvernlenken i footeren: dempet som resten av bunnen — den skal
   finnes på hver side, ikke rope på noen. */
.tp-bunn-lenker a { color: var(--tp-demp); }
.tp-bunn-lenker a:hover { color: var(--tp-primar); }

/* ---- Kort, knapper, skjema ------------------------------------------- */

.tp-kort {
	background: var(--tp-flate);
	border: 1px solid var(--tp-kant);
	border-radius: 8px;
	padding: 1.25rem;
	margin: 0 0 1rem;
}
.tp-smal { max-width: 480px; }

.tp-knapp {
	display: inline-block;
	background: var(--tp-primar);
	color: #fff;
	border: 1px solid var(--tp-primar);
	border-radius: 6px;
	padding: 0.6rem 1.2rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.tp-knapp:hover { filter: brightness(1.1); }
.tp-knapp-sekundaer { background: var(--tp-flate); color: var(--tp-primar); }
.tp-knapp-fare { background: var(--tp-flate); color: var(--tp-rod); border-color: var(--tp-rod); }
.tp-knapp-liten { padding: 0.25rem 0.6rem; font-size: 0.85rem; }
.tp-radskjema { display: inline; margin: 0; }

.tp-felt label { display: block; font-weight: 600; margin-bottom: 0.25rem; }

.tp-felt input,
.tp-felt select {
	width: 100%;
	padding: 0.55rem 0.7rem;
	font-size: 1rem;
	border: 1px solid var(--tp-kant);
	border-radius: 6px;
	background: var(--tp-flate);
	color: var(--tp-tekst);
}
.tp-felt input[type="color"] { width: 4rem; height: 2.5rem; padding: 0.15rem; }
.tp-felt input:focus,
.tp-felt select:focus { outline: 2px solid var(--tp-primar); outline-offset: 1px; }

.tp-hjelp { color: var(--tp-demp); font-size: 0.9rem; }

.tp-feil,
.tp-ok,
.tp-info { border-radius: 6px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.tp-feil { background: var(--tp-rod-lys); color: var(--tp-rod); }
.tp-ok { background: var(--tp-gronn-lys); color: var(--tp-gronn); }
.tp-info { background: var(--tp-blaa-lys); color: var(--tp-blaa); }

/* ---- Tabeller --------------------------------------------------------- */

.tp-tabell-rull { overflow-x: auto; }
.tp-tabell { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

.tp-tabell th,
.tp-tabell td {
	text-align: left;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--tp-kant);
	white-space: nowrap;
}
.tp-tabell th { color: var(--tp-demp); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- Merker (klar-indikatoren m.m.) ----------------------------------- */

.tp-merke {
	display: inline-block;
	border-radius: 999px;
	padding: 0.1rem 0.65rem;
	font-size: 0.8rem;
	font-weight: 700;
	white-space: nowrap;
}
.tp-merke-klar { background: var(--tp-gronn-lys); color: var(--tp-gronn); }
.tp-merke-nesten { background: var(--tp-gul-lys); color: var(--tp-gul); }
.tp-merke-i-gang { background: var(--tp-blaa-lys); color: var(--tp-blaa); }
.tp-merke-ny { background: var(--tp-graa-lys); color: var(--tp-graa); }
.tp-merke-fare { background: var(--tp-rod-lys); color: var(--tp-rod); }
.tp-klarlinje { font-size: 1.05rem; }

/* ---- Dashbordets handlingskort ---------------------------------------- */

.tp-handlinger { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1rem; }

.tp-handling {
	display: block;
	background: var(--tp-flate);
	border: 1px solid var(--tp-kant);
	border-left: 4px solid var(--tp-primar);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	text-decoration: none;
	color: var(--tp-tekst);
}
.tp-handling:hover { border-color: var(--tp-primar); }
.tp-handling h2 { color: var(--tp-primar); margin-bottom: 0.25rem; }
.tp-handling p { margin: 0; color: var(--tp-demp); font-size: 0.9rem; }

/* ---- Temavelgeren ------------------------------------------------------ */

.tp-temavelger { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }

.tp-tema {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	background: var(--tp-flate);
	border: 1px solid var(--tp-kant);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: var(--tp-tekst);
}
a.tp-tema:hover { border-color: var(--tp-primar); }
.tp-tema-navn { font-weight: 600; }
.tp-tema-antall { color: var(--tp-demp); font-size: 0.85rem; white-space: nowrap; }
.tp-tema-tom { opacity: 0.55; }

/* ---- Spørsmål, øving og tentamen --------------------------------------- */

.tp-framdrift { color: var(--tp-demp); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.tp-sporsmal-tekst { font-size: 1.15rem; font-weight: 600; }
.tp-sporsmal-bilde { display: block; border-radius: 6px; border: 1px solid var(--tp-kant); margin: 0 0 1rem; }

.tp-alternativer { display: grid; gap: 0.5rem; margin: 0 0 1rem; }

.tp-alt {
	display: block;
	border: 1px solid var(--tp-kant);
	border-radius: 6px;
	padding: 0.6rem 0.8rem;
	cursor: pointer;
	background: var(--tp-flate);
}
.tp-alt:hover { border-color: var(--tp-primar); }
.tp-alt input { margin-right: 0.5rem; }
.tp-alt-riktig { border-color: var(--tp-gronn); background: var(--tp-gronn-lys); }
.tp-alt-feil { border-color: var(--tp-rod); background: var(--tp-rod-lys); }

.tp-fasit-banner { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.tp-fasit-riktig { color: var(--tp-gronn); }
.tp-fasit-feil { color: var(--tp-rod); }

.tp-forklaring { background: var(--tp-blaa-lys); border-radius: 6px; padding: 0.75rem 1rem; margin: 0 0 1rem; }

.tp-regler { margin: 0 0 1rem; padding-left: 1.25rem; }
.tp-regler li { margin-bottom: 0.35rem; }

.tp-tentamen-rutenett { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 1rem; }

.tp-nedtelling {
	position: sticky;
	top: 0.5rem;
	z-index: 10;
	background: var(--tp-flate);
	border: 2px solid var(--tp-primar);
	border-radius: 8px;
	padding: 0.5rem 1rem;
	margin: 0 0 1rem;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tp-lever { text-align: center; }

/* ---- Resultat og statistikk -------------------------------------------- */

.tp-resultat { text-align: center; }
.tp-resultat-tall { font-size: 1.25rem; font-weight: 700; }
.tp-resultat-bestatt { border-top: 6px solid var(--tp-gronn); }
.tp-resultat-bestatt h1 { color: var(--tp-gronn); }
.tp-resultat-strok { border-top: 6px solid var(--tp-rod); }
.tp-resultat-strok h1 { color: var(--tp-rod); }

.tp-gjennomgang { border-top: 1px solid var(--tp-kant); padding-top: 1rem; margin-top: 1rem; }
.tp-gjennomgang:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.tp-svarlinje { margin: 0 0 0.25rem; font-weight: 600; }
.tp-svarlinje-feil { color: var(--tp-rod); }
.tp-svarlinje-riktig { color: var(--tp-gronn); }

.tp-soyle {
	display: inline-block;
	vertical-align: middle;
	width: 7rem;
	height: 0.6rem;
	border-radius: 999px;
	background: var(--tp-graa-lys);
	overflow: hidden;
	margin-right: 0.5rem;
}
.tp-soyle-fyll { height: 100%; background: var(--tp-primar); border-radius: 999px; }
.tp-soyle-tall { font-size: 0.85rem; color: var(--tp-demp); }

/* ---- «Meld feil i spørsmålet» ------------------------------------------ */

/*
 * Diskret med vilje: en dempet, lenkeaktig summary — ikke en knapp.
 * Meldemuligheten skal finnes når noe skurrer, aldri konkurrere med «Neste
 * spørsmål» eller gjennomgangen den står i.
 */
.tp-feilmelding { margin: 0.75rem 0 0; font-size: 0.9rem; }
.tp-feilmelding summary {
	color: var(--tp-demp);
	font-weight: 600;
	cursor: pointer;
	width: -moz-fit-content;
	width: fit-content;
}
.tp-feilmelding summary:hover { color: var(--tp-primar); }
.tp-feilmelding[open] {
	background: var(--tp-graa-lys);
	border-radius: 6px;
	padding: 0.6rem 0.8rem 0.8rem;
}
.tp-feilmelding-skjema { margin-top: 0.5rem; }
/* Kommentarfeltet: samme form som .tp-felt input, pluss resize kun i høyden —
   sidelengs resize sprenger kortet på mobil. */
.tp-feilmelding textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	font: inherit;
	font-size: 0.95rem;
	border: 1px solid var(--tp-kant);
	border-radius: 6px;
	background: var(--tp-flate);
	color: var(--tp-tekst);
	resize: vertical;
}
.tp-feilmelding textarea:focus { outline: 2px solid var(--tp-primar); outline-offset: 1px; }

/* ---- Personvernsiden ---------------------------------------------------- */

/* Erklæringen kommer ferdig bygget fra personvern-modulen (h2/h3/ul) — siden
   her gir den bare dokumentrytme: luft over mellomtitlene, lesbare lister. */
.tp-personvernside { max-width: 720px; }
.tp-personvern h2 { margin-top: 0; }
.tp-personvern h3 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.tp-personvern ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.tp-personvern li { margin-bottom: 0.3rem; }

/* ---- Lærersidene -------------------------------------------------------- */

.tp-kodetekst {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: var(--tp-graa-lys);
	border-radius: 6px;
	padding: 0.5rem 1rem;
	display: inline-block;
}

/* ---- Større skjermer ----------------------------------------------------- */

@media (min-width: 640px) {
	body.tp-kropp { font-size: 17px; }
	h1 { font-size: 1.75rem; }
	.tp-handlinger { grid-template-columns: repeat(3, 1fr); }
	.tp-temavelger { grid-template-columns: repeat(2, 1fr); }
	.tp-nedtelling { max-width: 220px; margin-left: auto; }
}