/*
 * Nettlos — the visitor side.
 *
 * Deliberately kept apart from the admin stylesheet: visitors get a light,
 * quiet page built for scanning links, editors get the chart room. The pages
 * carry a title and a sentence for now; the catalogue is hung under them next.
 */

/* IBM Plex, vendored beside the two scripts rather than fetched from a font
   host: a start page is opened dozens of times a day and should owe nothing to
   a third party to draw itself, and the licence (SIL OFL, static/fonts/
   LICENSE.txt) is what makes carrying it here allowed. Only the latin subset
   is carried — Norwegian lives entirely inside it, æ ø å included — so nothing
   here pays for alphabets the catalogue never sets. One variable file covers
   every weight the site uses; the mono is two, and earns them on the domain
   after a link name. */
@font-face {
	font-family: "IBM Plex Sans";
	src: url("/static/fonts/plex-sans-var-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/static/fonts/plex-mono-400-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("/static/fonts/plex-mono-600-latin.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* The palette, the type and the shapes all come from the mock-up the design
   was drawn in. The visitor side is read by people who are not looking for a
   fight with a screen, so the sizes are generous, the things you press are
   large enough to hit, and the one blue is the only colour on the page that
   is not ink. */
:root {
	color-scheme: light dark;

	--flate: #eef2f6;
	--flate-opp: #ffffff;
	--tekst: #14202e;
	--tekst-sterk: #0c1723;
	--tekst-svak: #55637a;
	--kant: #d3dbe4;
	--kant-svak: #e2e8ee;

	--merke: #0b5fa5;
	--merke-sterk: #084a82;
	--merke-svak-flate: #e4edf6;
	--merke-svak-kant: #b9d0e6;

	/* The focus ring is deliberately not the accent — a ring in the same blue
	   as the links is a ring that has to be looked for. The mock drew it in
	   #e8930c, which reads 2.17:1 against the ground where a focus indicator
	   is asked for 3:1; this is the nearest orange to it that clears the bar
	   on the ground and on a card both. */
	--fokus: #bf7300;

	--bro-flate: #0c3d68;
	--bro-tekst: #e9f1f8;
	--bro-kant: #1e5183;

	/* Radii by role: what is pressed, what holds something, and what should
	   read as a pill. */
	--rundt-sm: 6px;
	--rundt: 10px;
	--rundt-lg: 16px;
	--rundt-pille: 999px;

	/* A card is held by a line rather than by a shadow, and the line is thick
	   enough to be seen by somebody who cannot see a hairline. */
	--kant-bredde: 1.5px;

	/* The space between the page's own blocks — the header and what follows
	   it, a lead sentence and the boxes under it, one section and the next.
	   One number, so the page keeps a rhythm instead of each part choosing its
	   own; the design it is drawn from sits between 24 and 32 points and this
	   is the bottom of that. */
	--luft: 1.5rem;

	/* The smallest a thing you press may be. Everything clickable on the
	   visitor side is at least this tall. */
	--mal: 44px;

	/* The two directions a box lays things out in, drawn only for an editor. */
	--rom-ned: #6f93ad;
	--rom-tvers: #91864f;

	--skrift: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--skrift-data: "IBM Plex Mono", ui-monospace, SFMono-Regular, "JetBrains Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

	/* Six sizes and two display steps, and every rule spends one of them. The
	   base is 1.125rem rather than 1rem: this is a page of link names read at
	   arm's length, not a form. */
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-md: 1rem;
	--fs-base: 1.125rem;
	--fs-lg: 1.25rem;
	--fs-display: clamp(1.6rem, 4vw, 2rem);
}

/* Four themes, and the reader picks between them from the strip at the top:
   auto follows the browser, and the other three are stamped on the document by
   the server as data-tema. Only the tokens change — never a second set of
   rules — so nothing can drift between one theme and another.

   The guard is what makes "auto" and "light" different: without it a reader
   who asked for light on a dark machine would still get dark. */
@media (prefers-color-scheme: dark) {
	:root:not([data-tema="light"]):not([data-tema="contrast"]) {
		--flate: #0d141c;
		--flate-opp: #16202b;
		--tekst: #e3e9ef;
		--tekst-sterk: #f2f6fa;
		--tekst-svak: #9aa9bd;
		--kant: #2a3846;
		--kant-svak: #22303c;

		--merke: #7cb8ec;
		--merke-sterk: #a6d0f7;
		--merke-svak-flate: #223a50;
		--merke-svak-kant: #274156;
		--fokus: #f0a63a;

		--bro-flate: #16202b;
		--bro-tekst: #e3e9ef;
		--bro-kant: #2a3846;

		--rom-ned: #7fa8c4;
		--rom-tvers: #b6a469;
	}
}

:root[data-tema="dark"] {
	--flate: #0d141c;
	--flate-opp: #16202b;
	--tekst: #e3e9ef;
	--tekst-sterk: #f2f6fa;
	--tekst-svak: #9aa9bd;
	--kant: #2a3846;
	--kant-svak: #22303c;

	--merke: #7cb8ec;
	--merke-sterk: #a6d0f7;
	--merke-svak-flate: #223a50;
	--merke-svak-kant: #274156;
	--fokus: #f0a63a;

	--bro-flate: #16202b;
	--bro-tekst: #e3e9ef;
	--bro-kant: #2a3846;

	--rom-ned: #7fa8c4;
	--rom-tvers: #b6a469;
}

/* Contrast is not "dark mode with more of it": it is black on white with every
   edge drawn, for a reader who needs the page to stop being subtle. The ground
   and the cards are the same white, so the borders are what separates them —
   which is why they are drawn in the ink. */
:root[data-tema="contrast"] {
	color-scheme: light;

	--flate: #ffffff;
	--flate-opp: #ffffff;
	--tekst: #000000;
	--tekst-sterk: #000000;
	--tekst-svak: #1c1c1c;
	--kant: #000000;
	--kant-svak: #000000;

	--merke: #0033a0;
	--merke-sterk: #001f66;
	--merke-svak-flate: #ffffff;
	--merke-svak-kant: #000000;
	--fokus: #b34700;

	--bro-flate: #000000;
	--bro-tekst: #ffffff;
	--bro-kant: #ffffff;

	--rom-ned: #000000;
	--rom-tvers: #000000;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* The text-size control sets this and nothing else: every size on the page is
   in rem, so one number moves all of them together and the layout follows. */
html {
	font-size: var(--skala, 100%);
}

:root[data-skala="115"] { --skala: 115%; }
:root[data-skala="130"] { --skala: 130%; }

body {
	margin: 0;
	background: var(--flate);
	color: var(--tekst);
	font-family: var(--skrift);
	font-size: var(--fs-base);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Every link is underlined, in a line lighter than the link itself so a page
   of them does not read as ruled, and the line comes up to the link's own
   colour under the pointer. */
/* A link is the accent's own blue and carries no line under it until the
   pointer is on it. The line is the thing that moves, so it says "this one"
   rather than "these are links" — which the colour and the company a link
   keeps already say on a page that is mostly links. */
a {
	color: var(--merke);
	text-decoration: none;
	text-underline-offset: 4px;
}

a:hover {
	color: var(--merke-sterk);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
}

/* What is recognised by where it sits rather than by what it looks like takes
   no line at all: a button, a pill, and a heading, which has its chevron. The
   breadcrumb is not among them — it is type, and its steps underline like any
   other link. */
.knapp:hover {
	text-decoration: none;
}

/* A link that is content takes the text's own colour rather than the accent.
   On a page that is almost entirely links, colouring every one of them spends
   the accent everywhere and leaves it marking nothing — and the sheet says it
   is spent on "you are here" and primary actions only. The underline below is
   what says a link is a link, which is what frees the colour to say instead
   which one the reader is on. A heading that leads somewhere inherits the
   heading's own colour, so it looks like the heading it is.

   A link that is content carries its underline at rest rather than only under
   the pointer. Colour alone cannot be asked to do the job here: the accent
   sits 2.37:1 from the text beside it in the light theme and 1.69:1 in the
   dark, where the standard asks 3:1 before colour may identify a link on its
   own — and an underline a reader has to go hunting for with the pointer is no
   use to one who cannot pick the colour out to begin with. Thin at rest so a
   column of them does not read as ruled lines, and solid under the pointer.
   What is left bare is what is recognised by where it sits rather than by what
   it looks like: the masthead, the trail, the editor's strip, and anything
   already drawn as a button. */
/* A heading that leads somewhere is marked with a chevron instead of an
   underline: it is a heading before it is a link, and a rule under it sat
   badly on top of the list it stands over. The chevron does what the underline
   did — a mark that is not colour, which colour cannot be trusted to do alone
   here — and says the one thing an underline never did, which is that there is
   more of this through there. It steps the way it points under the pointer.

   U+203A rather than an arrow: the vendored latin subset carries this one, and
   U+2192 is the glyph that range leaves out, so an arrow would be fetched from
   whatever font the browser found and would not match the text beside it. */
/* A heading keeps the ink whether or not it leads anywhere. In the design it
   is drawn from, only the links inside a card are blue — the headings over them
   are text, and a heading that turned blue because it happened to be a link
   would read as one more entry rather than as the thing naming them. What says
   it leads somewhere is the chevron, not the colour. */
.rom-tittel a,
.kort h3 a {
	color: inherit;
	text-decoration: none;
}

.rom-tittel a::after,
.kort h3 a::after {
	content: "›";
	display: inline-block;
	margin-left: 0.3em;
	color: var(--tekst-svak);
	transition: transform 120ms, color 120ms;
}

.rom-tittel a:hover,
.kort h3 a:hover {
	color: var(--merke);
	text-decoration: none;
}

.rom-tittel a:hover::after,
.kort h3 a:hover::after {
	color: var(--merke);
	transform: translateX(2px);
}

:focus-visible {
	outline: 3px solid var(--fokus);
	outline-offset: 2px;
	border-radius: var(--rundt-sm);
}

/* The deck a visitor page stands on: the masthead above and the page in the
   middle. A signed-in editor gets the bridge above the deck as well, which is
   its own element so the deck is laid out the same for everyone. */
/* Three rows: the header, the page, and the keel. The middle one takes what is
   left, so a page with two lines on it has the keel at the bottom of the window
   rather than tucked under the second line. */
.dekk {
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
	max-width: 70rem;
	margin: 0 auto;
	padding: 1.75rem 1.5rem 2rem;
}

/* The row above every page: the site name on the left where there is one, and
   the two view switches on the right. It is the reader's own row — the editor
   gets a separate band above it — so it is on every page a visitor meets. */
.topp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}

/* The way back, above the name of where the reader is. It is plain type in the
   muted colour rather than the small uppercase label the trail used to be: it
   is a sentence about where you are, and the page's own heading is what the eye
   should land on first. The separator is drawn by the stylesheet, so the markup
   is a list of links and nothing between them. */
.sti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	font-size: var(--fs-sm);
	color: var(--tekst-svak);
}

.sti a {
	color: var(--tekst-svak);
	text-decoration: none;
}

.sti a:hover {
	color: var(--merke);
	text-decoration: underline;
}

.sti ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The separator belongs to the step, not to the link inside it: drawn on the
   link it would be part of what the pointer is over, and would light up as
   though the slash led somewhere as well. */
.sti li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--kant);
}

.topp-navn {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

/* What the page is about, under its name. It is the page's own sentence and
   sits with the title it belongs to, so the content can start directly under
   the header instead of a line and two gaps further down. */
/* A row of its own under the name and the switches both, so it is read across
   the header rather than in a column beside them. */
.undertittel {
	flex: 1 0 100%;
	margin: 0;
	max-width: 46rem;
	color: var(--tekst-svak);
	font-size: var(--fs-md);
	text-wrap: pretty;
}

.topp-valg {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin-left: auto;
}

/* The page's own name, which on the front page is the site's. */
.tittel {
	margin: 0;
	color: var(--tekst-sterk);
	font-size: var(--fs-display);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-wrap: balance;
}

/* Today, beside the switches. It answers a question a reader of a start page
   actually has, and it is the only thing on the page that is not the
   catalogue.

   It is also a link, and the one on the visitor side drawn as though it were
   not: no underline and none of the accent, because a date that announced
   itself as somewhere to go would read as the page asking to be clicked rather
   than as the page saying what day it is. It shows itself under the pointer,
   and the focus ring finds it as it finds anything else — quiet is not the
   same as unreachable. */
.dato {
	margin: 0;
	color: var(--tekst-svak);
	font-size: var(--fs-md);
	text-decoration: none;
}

.dato:hover {
	color: var(--merke);
	text-decoration: underline;
	text-decoration-color: currentColor;
}

/* The twin button: one shape, two buttons. The halves share an outline and are
   parted by a single line, so it reads as one control that does two things —
   which is what it is. */
.bryter {
	display: inline-flex;
	align-items: stretch;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt);
	background: var(--flate-opp);
	overflow: hidden;
}

.bryter-halv {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 0.1rem;
	min-height: var(--mal);
	padding: 0.4rem 1rem;
	border: 0;
	background: none;
	color: var(--tekst);
	font: inherit;
	font-size: var(--fs-md);
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.bryter-halv + .bryter-halv {
	border-left: var(--kant-bredde) solid var(--kant);
}

.bryter-halv:hover {
	background: var(--merke-svak-flate);
	color: var(--merke);
}

.bryter-navn {
	font-weight: 500;
	white-space: nowrap;
}

/* What the half currently stands at, so the round of sizes and the round of
   themes are something a reader can see rather than something they discover by
   pressing until it looks right. */
.bryter-verdi {
	font-size: var(--fs-sm);
	color: var(--tekst-svak);
	white-space: nowrap;
}

.bryter-halv:hover .bryter-verdi {
	color: inherit;
}

/* The site name, flown small above every page but the front one. */


.side {
	align-self: center;
}

/* Nothing stands between the header and the page: the header ends with the
   page's own sentence, and what follows is the page itself. The top margins
   further down are for standing clear of what came before, and at the top of
   the page nothing did. */
.side > *:first-child {
	margin-top: 0;
}

.side .ingress {
	margin: 0;
	max-width: 34rem;
	font-size: var(--fs-lg);
	color: var(--tekst-svak);
}

/* The boxes a page is organised in. A box lays out what stands in it one way,
   and the way alternates on the way down, so no two boxes inside each other
   ever pull the same direction. */
.rom {
	display: flex;
	gap: 1rem;
}

.side > .rom {
	margin-top: var(--luft);
}

.rom--ned {
	flex-direction: column;
}

/* Across, the box is a row of columns and what stands in it takes as many of
   them as it was given. The page is six columns wide, because a start page is
   a shelf of narrow columns before it is anything else: a link list wants a
   column, not a third of the page, and an editor who wants more says so on
   the item itself. A row deeper down has as many columns as the box around it
   is wide — a box three quarters of the page wide holds rows of three, so what
   is laid across in it is counted in thirds of that box and not in quarters of
   the page. */
.rom--tvers {
	display: grid;
	grid-template-columns: repeat(var(--kolonner, 4), 1fr);
	align-items: start;
}

/* How many columns one row is divided in. */
.kolonner--1 { --kolonner: 1; }
.kolonner--2 { --kolonner: 2; }
.kolonner--3 { --kolonner: 3; }
.kolonner--4 { --kolonner: 4; }

.rom--tvers > .rom,
.rom--tvers > .last {
	grid-column: span var(--bredde, 1);
	min-width: 0;
}

/* The heading stands over the box whichever way the box lays things out, so in
   a row it takes a row of its own — and so does the tooling under it. */
.rom--tvers > .rom-tittel,
.rom--tvers > .redskap {
	grid-column: 1 / -1;
}

/* How many columns one thing takes. The number is written as a custom property
   rather than as a span, so a narrow screen can lower it in one place. */
.bredde--1 { --bredde: 1; }
.bredde--2 { --bredde: 2; }
.bredde--3 { --bredde: 3; }
.bredde--4 { --bredde: 4; }

/* Halfway down, six columns are too many to read in: a row becomes three at
   most, and anything asking for more than three settles for the row. */
@media (max-width: 64rem) {
	.kolonner--4 {
		--kolonner: 3;
	}

	.bredde--4 {
		--bredde: 3;
	}

	.spalter--4 {
		--spalter: 3;
	}
}

/* On a narrow screen there is no width to share, so everything goes down. */
/* Narrowest, a row is two rather than one. A start page is a shelf, and a
   shelf of one is a list to scroll: two short columns of link names put more
   of the page within reach of a thumb than one long one does. It is the same
   capping as above rather than a collapse — the row keeps counting in columns,
   there are just two of them — so a box that was already one or two wide is
   left as it was built. What a block holds does still go to a single list: at
   this width a column is about a hundred points across, and splitting that
   again leaves no room for a name. */
@media (max-width: 40rem) {
	.kolonner--3,
	.kolonner--4 {
		--kolonner: 2;
	}

	.bredde--3,
	.bredde--4 {
		--bredde: 2;
	}

	.lenker-spalter {
		grid-template-columns: 1fr;
	}

	/* Two columns only fit if they are not mostly padding, so the deck, the
	   gaps and the cards all give some back. */
	.dekk {
		padding: 1.25rem 0.75rem;
		gap: 1.25rem;
	}

	.rom {
		gap: 0.75rem;
	}

	.topp .bryter {
		margin-left: 0;
	}

	.bryter-halv {
		padding: 0.4rem 0.7rem;
	}

	.last {
		padding: 0.75rem;
	}
}

/* A heading over a section of the page, wherever it stands: over a block on a
   page an editor built, and over the subcategories or the references on a
   browse page. They name the same kind of thing, so they are the same heading
   — the small uppercase label the browse pages used read as a filing tab
   rather than as a name. */
.rom-tittel,
.bolk h2 {
	margin: 0;
	color: var(--tekst-sterk);
	font-size: var(--fs-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.bolk h2 {
	margin-bottom: 0.75rem;
}


/* Building, the shape shows itself: a dotted line around every box and around
   every piece of content, with a little room inside, so what is filed where can
   be seen while the page is put together. Three colours and three things — a
   box that goes down, a box that goes across, and content — because a box now
   holds both, and the direction is the one thing about a box that is never
   written down anywhere else. A visitor is shown none of this: the boxes are
   how the page was built, not what it says. */
.dekk--redaktor .rom {
	padding: 0.4rem;
	border: 1px dotted var(--rom-ned);
	border-radius: var(--rundt-lg);
}

.dekk--redaktor .rom--tvers {
	border-color: var(--rom-tvers);
}


/* One piece of content: a list of what the catalogue holds, or a box to search
   in. */
.last {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 1rem 1.15rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt-lg);
	background: var(--flate-opp);
}


/* A block wider than one column does not stretch one list across the width it
   was given: it is split into as many lists as it is columns wide, side by
   side, so a wide block is a shelf of short lists and not a long one with
   room beside it. The lists follow the same columns the block spans, so each
   is one column of the row. */
.lenker-spalter {
	display: grid;
	grid-template-columns: repeat(var(--spalter, 1), 1fr);
	gap: 0.9rem 1.75rem;
	align-items: start;
}

.lenker-spalter > .lenker {
	min-width: 0;
}

.spalter--1 { --spalter: 1; }
.spalter--2 { --spalter: 2; }
.spalter--3 { --spalter: 3; }
.spalter--4 { --spalter: 4; }

/* A block laid across the box as pills. Each is a target big enough to hit
   without aiming, with the entry's badge at its head — a filled circle in the
   accent's own soft tint, which is the one place on the page the tint is
   spent. A pill is a place to go rather than a phrase to read, so it carries
   no underline. */
.last:has(> .piller) {
	padding: 0;
	border: 0;
	background: none;
}

.piller {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pille {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 3rem;
	padding: 0 1.1rem 0 0.5rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt-pille);
	background: var(--flate-opp);
	color: var(--tekst);
	font-weight: 500;
	text-decoration: none;
}

.pille:hover {
	border-color: var(--merke);
	color: var(--merke);
	text-decoration: none;
}

/* Contrast draws every edge in the ink and spends nothing on tint, so the
   badge has no colour left to be: a circle of the page's own white on a pill of
   the same white is a circle nobody can see. It goes, and the pill closes up
   the room it was keeping. */
:root[data-tema="contrast"] .pille-merke {
	display: none;
}

:root[data-tema="contrast"] .pille {
	padding: 0 1.1rem;
}

.pille-merke {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--merke-svak-flate);
	color: var(--merke);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* The tooling a signed-in editor gets on the page itself. It stays quiet: the
   page belongs to the visitor, and this is only the way into the forms. */
.redskap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.knapp--liten {
	padding: 0.2rem 0.7rem;
	font-size: var(--fs-xs);
	color: var(--tekst-svak);
}

/* The grip a block is dragged by. It sits with the tooling because that is what
   it is, and it is the only one there that is not a link: the rest open a form,
   this one moves the block itself. Dragging the block anywhere else would take
   the links in it along, so there is a place to take hold of instead. */
.grep {
	cursor: grab;
	padding: 0.2rem 0.4rem;
	font-size: var(--fs-xs);
	line-height: 1.2;
	color: var(--tekst-svak);
	border-radius: var(--rundt-sm);
	touch-action: none;
}

.grep:hover {
	color: var(--tekst);
	background: var(--flate-opp);
}

/* The block or the box being carried, and the gap it will drop into. The trace
   is the thing's own outline emptied out, so what is being moved and where it
   is going are the same shape. */
.flytt--tatt {
	cursor: grabbing;
}

.flytt--spor {
	opacity: 0.4;
}

.dekk--redaktor .flytt--spor {
	background: var(--flate-opp);
}

/* While something is carried, every box on the page is somewhere it could
   land, and the one under the pointer says so. The dotted lines firm up so the
   shape is easier to aim at, and an empty box keeps enough room to be hit. */
.dekk--drar .rom {
	border-style: dashed;
}

.dekk--drar .rom--mottar {
	background: color-mix(in srgb, var(--merke) 8%, transparent);
	border-style: solid;
	border-color: var(--merke);
}

/* An empty box says so while the page is built, so there is something to drag
   into and the editor is not left looking at a dotted line. It steps aside
   the moment the box holds anything — including what is being carried into
   it, so the drop lands on the words and not beside them. */
.rom-tom {
	margin: 0;
	padding: 0.6rem 0.75rem;
	font-size: var(--fs-sm);
	color: var(--tekst-svak);
	border: 1px dashed var(--kant);
	border-radius: var(--rundt);
}

.rom:has(> .last, > .rom) > .rom-tom {
	display: none;
}

.rom--tvers > .rom-tom {
	grid-column: 1 / -1;
}

/* Which way the box lays things out, said in a word on the tooling row: the
   one thing about a box that the dotted line only hints at. */
.rom-retning {
	margin-left: auto;
	font-family: var(--skrift-data);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-svak);
	align-self: center;
}

.rom--ned > .redskap > .rom-retning {
	color: var(--rom-ned);
}

.rom--tvers > .redskap > .rom-retning {
	color: var(--rom-tvers);
}

/* What is there for whoever is not looking at the screen. */
.skjermleser {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A dead end is the one page that is centred: there is nothing under the
   heading to read down through. */
.side--tom {
	text-align: center;
	display: grid;
	justify-items: center;
	gap: 0.5rem;
}

.side--tom .ingress {
	margin-top: 0;
}

.side--tom p {
	margin: 0;
}

/* The two ways out of a dead end, offered to the editor who met it. */
.valg {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	justify-items: center;
}

.valg li {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
}

.valg span {
	font-size: var(--fs-md);
	color: var(--tekst-svak);
}

.knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--mal);
	padding: 0 1.1rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt);
	background: var(--flate-opp);
	color: var(--tekst);
	font-size: var(--fs-md);
	text-decoration: none;
}

.knapp:hover {
	border-color: var(--merke);
	color: var(--merke);
}

.knapp--hoved {
	border-color: var(--merke);
	background: var(--merke);
	color: var(--flate-opp);
}

.knapp--hoved:hover {
	border-color: var(--merke-sterk);
	background: var(--merke-sterk);
	color: var(--flate-opp);
}

/* The pier: only a signed-in editor stands here, so it stays out of the way of
   everything a visitor sees. */
/* The bridge: the strip along the top only a signed-in editor sees. It is the
   one thing on a visitor page that is not the page, so it is drawn as the
   administration's and not as the page's — a raised band with the accent along
   its top edge, in the small data face, that says who is looking and offers
   the ways in. It stands above the deck, not on it. */
.bro {
	background: var(--bro-flate);
	color: var(--bro-tekst);
	font-family: var(--skrift-data);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
}

.bro-rad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	max-width: 70rem;
	margin: 0 auto;
	padding: 0.85rem 1.5rem 0.6rem;
}

.bro a {
	color: var(--bro-tekst);
	text-decoration: none;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

.bro a:hover {
	color: var(--bro-tekst);
	text-decoration: underline;
}

.bro-navn {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
}

.bro-merke {
	padding: 0.15rem 0.6rem;
	border: 1px solid var(--bro-kant);
	border-radius: var(--rundt-pille);
}

/* The tools sit at the far end of the strip, away from the name. */
.bro-verktoy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

/* The switch between building the page and reading it. It is a form, so the
   button is dressed down to the rest of the strip — and lit when it is on. */
.bro-bytt {
	display: contents;
}

/* Drawn out of the band's own light rather than in the accent, which on a
   deep blue band is a button hiding in it. */
.bro-knapp {
	padding: 0.15rem 0.6rem;
	border: 1px solid color-mix(in srgb, var(--bro-tekst) 35%, transparent);
	border-radius: var(--rundt-pille);
	background: color-mix(in srgb, var(--bro-tekst) 14%, transparent);
	color: var(--bro-tekst);
	font: inherit;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	cursor: pointer;
}

.bro-knapp:hover,
.bro:has(+ .dekk--redaktor) .bro-knapp {
	background: color-mix(in srgb, var(--bro-tekst) 24%, transparent);
	border-color: color-mix(in srgb, var(--bro-tekst) 55%, transparent);
}

/* A page that lists rather than states starts at the top: there is a lot to
   read down through, so nothing is centred in the deck. */
.side--liste {
	align-self: start;
}

/* The search box. Where the visitor stands decides what is in the picker, but
   the catalogue is always the first thing it looks in. */
/* The search box: the field and its button on one line, and under them the
   places to search as a row of pills, one of which is on. Nothing is drawn
   around the whole of it — the field and the pills carry their own edges, so
   the box sits on the page rather than on a panel of its own, and the three
   rows read as one thing because they are close, not because a line says so. */
.sok {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.5rem 0.6rem;
}

/* The box carries no margin of its own: what it needs above it depends on what
   it is standing under, and only the page it stands on knows that. Filed on a
   page as a block it takes the same gap from its neighbours as every other
   block; standing on a browse or search page, under a heading, it takes the
   step below. Baked into the component the two could not both be right, and a
   search block ended up further from everything than any other block by an
   amount that changed with whether it had a heading. */
.side > .sok {
	margin-top: var(--luft);
	padding: 1rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt-lg);
	background: var(--flate-opp);
}

.sok-felt {
	display: block;
	min-width: 0;
}

/* The engines, as radios dressed as pills. The radio itself stays for the
   keyboard and the screen reader; the pill beside it is what is seen, and it
   takes the accent when its radio is on. */
/* The engines are pills again, and the one that is on is filled. Each is at
   least as tall as anything else on this page that is pressed. */
.sok-motorer {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sok-merke {
	color: var(--tekst-svak);
	font-size: var(--fs-md);
	margin-right: 0.15rem;
}

.sok-motor {
	position: relative;
}

.sok-motor input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.sok-motor span {
	display: inline-flex;
	align-items: center;
	min-height: var(--mal);
	padding: 0 1rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt-pille);
	background: var(--flate-opp);
	color: var(--tekst);
	font-size: var(--fs-md);
	line-height: 1.3;
	cursor: pointer;
	user-select: none;
	transition: color 120ms, border-color 120ms, background 120ms;
}

.sok-motor:hover span {
	border-color: var(--merke);
	color: var(--merke);
}

.sok-motor input:checked + span {
	background: var(--merke);
	border-color: var(--merke);
	color: var(--flate-opp);
	font-weight: 600;
}

.sok-motor input:focus-visible + span {
	outline: 2px solid var(--merke);
	outline-offset: 2px;
}

.sok-felt input {
	width: 100%;
	min-height: 3.1rem;
	padding: 0 1rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt);
	background: var(--flate-opp);
	color: var(--tekst);
	font: inherit;
	font-size: var(--fs-lg);
}

.sok-felt input:hover {
	border-color: var(--merke);
}

/* The field is the taller of the two, so it sets the row and the button fills
   it — rather than both being sized by hand and landing two pixels apart, with
   the step showing at the top because they were aligned at the bottom. */
.sok .knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	font-weight: 600;
	border: 0;
	/* The field's radius, not the pill the other buttons wear: the two sit on
	   one line and read as one control. */
	border-radius: var(--rundt);
	cursor: pointer;
	font: inherit;
	font-size: var(--fs-base);
	padding: 0 1.6rem;
	background: var(--merke);
	color: var(--flate-opp);
}

.sok .knapp:hover {
	background: var(--merke-sterk);
}

/* A section under the heading: subcategories, links, the ones to see as well. */
.bolk {
	margin-top: var(--luft);
}



/* The chart: the categories laid out as cards, each naming what is under it. */
.kart {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}

.kort {
	padding: 1.15rem 1.35rem;
	border: var(--kant-bredde) solid var(--kant);
	border-radius: var(--rundt-lg);
	background: var(--flate-opp);
}

.kort h3 {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: 600;
}


.kort p {
	margin: 0.35rem 0 0;
	font-size: var(--fs-md);
	color: var(--tekst-svak);
}

/* The entries themselves: where they lead, and what an editor wrote about
   them. */
.lenker {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.1rem;
}

/* The same list on a page: names and nothing else, standing in a column a quarter
   of the page wide, so it is set closer together than the catalogue's own
   listing, where every entry carries a sentence under it. What an editor wrote
   about an entry is on the name, for whoever holds the pointer over it. */
.lenker--blokk {
	gap: 0.4rem;
}

.lenker--blokk .lenke > a {
	font-size: var(--fs-base);
	font-weight: 500;
}

.lenke > a {
	font-size: var(--fs-base);
	font-weight: 600;
}

.lenke p {
	margin: 0.2rem 0 0;
	color: var(--tekst-svak);
}

.lenke-domene {
	margin-left: 0.5rem;
	font-family: var(--skrift-data);
	font-size: var(--fs-xs);
	color: var(--tekst-svak);
}

.merkelapper {
	list-style: none;
	margin: 0.45rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.merkelapper li {
	padding: 0.1rem 0.55rem;
	border: 1px solid var(--kant);
	border-radius: 999px;
	font-size: var(--fs-xs);
	color: var(--tekst-svak);
}


/* What only the editor sees, marked so they know the visitor does not. */
.skjult {
	margin-left: 0.5rem;
	padding: 0.05rem 0.5rem;
	border: 1px solid var(--kant);
	border-radius: 999px;
	font-family: var(--skrift-data);
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tekst-svak);
}

/* Nothing here moves far, but a reader who has asked for less of it gets
   none: the chevron and the tabs settle into place rather than sliding. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* The keel: who provides the thing, and the offer to be somebody's start page.
   It is quiet on purpose — a start page is opened to be looked past, and the
   line along the bottom is the last thing that should ask for attention. */
.kjol {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-top: 3rem;
	padding-top: 1rem;
	border-top: 1px solid var(--kant-svak);
	font-size: var(--fs-sm);
	color: var(--tekst-svak);
}

.kjol-eier {
	margin: 0;
}

/* An offer rather than a button: it opens a page of help, and the only thing
   that happens is that something is explained. So it is drawn as the links
   around it are, with the line under it kept for the pointer. */
.kjol-lenke {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--merke);
	cursor: pointer;
}

.kjol-lenke:hover {
	text-decoration: underline;
}

/* The dialog is the browser's own. What is ours is the box it draws, which is
   the page's own surface rather than the browser's default white. */
.modal {
	max-width: 32rem;
	width: calc(100% - 2rem);
	padding: 0;
	border: 1px solid var(--kant);
	border-radius: var(--rundt-lg);
	background: var(--flate-opp);
	color: var(--tekst);
}

.modal::backdrop {
	background: rgb(0 0 0 / 0.45);
}

.modal-innhold {
	padding: 1.5rem;
}

.modal-innhold h2 {
	margin: 0 0 0.5rem;
	font-size: var(--fs-lg);
}

.modal-ingress {
	margin: 0 0 0.35rem;
	color: var(--tekst-svak);
}

/* The address is meant to be selected and copied, so it is drawn as the thing
   it is and allowed to break where it has to. */
.modal-adresse {
	display: block;
	padding: 0.5rem 0.65rem;
	border: 1px solid var(--kant-svak);
	border-radius: var(--rundt);
	background: var(--flate);
	font-family: var(--skrift-data);
	font-size: var(--fs-sm);
	overflow-wrap: anywhere;
	user-select: all;
}

/* The address and the button that copies it, on one line. The button is a
   button of the page's own, sized down: .knapp--liten is declared above .knapp
   and loses to it, and this is not the place to reorder that. */
.modal-kopier {
	flex-shrink: 0;
	min-height: 0;
	padding: 0.4rem 0.8rem;
	font: inherit;
	font-size: var(--fs-sm);
	cursor: pointer;
}

/* The address and the button that copies it, on one line. */
.modal-adresse-rad {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.modal-adresse-rad .modal-adresse {
	flex: 1;
	min-width: 0;
}

.modal-liste {
	margin: 1.25rem 0 0;
}

.modal-nettleser + .modal-nettleser {
	margin-top: 0.75rem;
}

/* The reader's own browser, lifted to the top of the list and said so. */
.modal-nettleser--din {
	padding: 0.5rem 0.65rem;
	margin: -0.5rem -0.65rem 0.25rem;
	border-radius: var(--rundt);
	background: var(--merke-svak-flate);
}

.modal-liste dt {
	font-weight: 600;
}

.modal-din {
	margin-left: 0.4rem;
	padding: 0.1rem 0.4rem;
	border-radius: var(--rundt);
	background: var(--merke);
	color: var(--flate-opp);
	font-size: var(--fs-xs);
	font-weight: 500;
	vertical-align: 0.1em;
}

.modal-liste dd {
	margin: 0.15rem 0 0;
	color: var(--tekst-svak);
}

.modal-bunn {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.5rem;
}