/* Mobile-first base styles. Light and dark mode follow the user's system. */
:root {
  color-scheme: light dark;   /* follow the device by default */
  --max: 40rem;
  /* Three spacing steps, used everywhere instead of one-off numbers:
     small = inside tight groups, gap = the normal spacing, large = between sections. */
  --gap-sm: 0.5rem;
  --gap: 1rem;
  --gap-lg: 2.5rem;
  /* The top line of a page (nav icon - H1 - menu button; the home page header has the same row): the H1's line height and the round buttons that hang
     off it, vertically centred - change the H1 size or the buttons here and everything follows. */
  --h1-size: 1.625rem;
  --h1-line: calc(var(--h1-size) * 1.2);   /* the H1 has line-height 1.2 */
  --round-btn: 2.5rem;
  --module-line: calc(0.7rem * 1.75);   /* the line of module name above the H1 on sub pages (0.7rem text, the body's line-height 1.75) + its 0.15rem margin below: */
  --module-space: calc(var(--module-line) + 0.15rem);

  /* Colour palette. light-dark(light-value, dark-value) picks the right one based on
     color-scheme above, so it follows the device automatically and the manual
     light/dark override below just works too, with no extra rules needed.
     Background and text are a soft near-white/near-black, not pure white/black -
     easier on the eyes. One accent colour (blue), a bit darker in light mode and
     a bit lighter in dark mode, so it stays readable (WCAG AA) on both backgrounds.
     The page background is the darkest of the two surfaces in both themes, and
     panels (--panel-bg, used below) sit a step lighter on top of it - the usual
     "card raised above the page" look, the same way round in light and dark mode. */
  --bg:        light-dark(#f0f0f2, #121212);
  --panel-bg:  light-dark(#ffffff, #1d1d1d);   /* dark: a bit lighter (was #1a1a1a, Espen 2026-10-01) */
  --text:      light-dark(#171717, #f2f2f2);
  /* Light-mode blue nudged one step toward the dark-mode blue, so the two feel
     like the same colour rather than two unrelated shades. Still >5:1 contrast
     on white (WCAG AA needs 4.5:1). */
  --accent:    light-dark(#2563eb, #60a5fa);
  /* Weaker/muted grey, for text that should sit back rather than stand out
     (e.g. the organization name in the header). */
  --muted:     light-dark(#6b7280, #9ca3af);
  --danger:    light-dark(#c62828, #ef5350);   /* the one red for everything: delete buttons and icons, errors, invalid fields (Espen) */
}

/* Theme chosen on the profile page overrides the device setting */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 0.875rem/1.75 'Inter', sans-serif;   /* standard font: Inter (falls back to the device's sans-serif) - extra line-height for airier text */
  letter-spacing: 0.01em;   /* a touch of extra breathing room between letters, for a simpler/more modern feel */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
}

/* Ordinary links stay plain (same colour as the text, underlined by the browser default) -
   the accent colour is saved for the few things below that should stand out. */
a { color: inherit; }

/* Visible keyboard focus (WCAG 2.4.7 AA: visible, 3:1 contrast; no set thickness - 2px also meets the AAA focus-appearance size). Was 3px/2px until 2026-09-27 (Espen: thinner) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }   /* the site's standard blue */

/* Panels: stacked in one column on mobile; the gap replaces the panels' own bottom margin. */
.panels { display: grid; gap: var(--gap-lg); }
.panels .panel { margin-bottom: 0; }
/* A column of its own inside .panels (person.php, organization.php): on desktop panels stacked with the same gap, independent of the other column's heights;
   on phones and tablets it steps aside (display: contents) so panels from both columns can be reordered - see .mobile-order-1 / -2 below */
.panel-column { display: contents; }

/* Desktop layout for pages that set $wide = true (profile page so far): a wider frame -
   header, main and footer all widen together so they still line up - and the panels go
   into two columns: the info panel on the left, settings + password stacked on the right. */
@media (min-width: 64rem) {
  .wide { --max: 70rem; }
  .panel-column { display: grid; gap: var(--gap-lg); align-content: start; }
  .wide .panels { grid-template-columns: 1fr 1fr; align-items: start; }
  .wide .panels > .panel:first-child { grid-row: span 2; }   /* only a panel directly in .panels, not the first one in a .panel-column */
}

/* Skip link: hidden until focused */
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gap); top: var(--gap); }

/* Header and navigation: stacked on mobile, side by side on wider screens */
header, main, footer {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--gap);
}

header { display: flex; flex-direction: column; gap: var(--gap-sm); }
header a { text-decoration: none; }

/* Footer: centred text and (for logged-out visitors) a centred language switcher,
   same on every screen size. */
footer { text-align: center; }
footer .langs { justify-content: center; }
.logo { font-family: "Poppins", sans-serif; font-weight: 400; font-size: 1.5rem; color: var(--accent); }
nav { display: flex; flex-wrap: wrap; gap: var(--gap); }

/* Small icons in front of "my profile" / "log out" - sized and aligned to sit
   inline with the text next to them, with a little gap before the label.
   Coloured with the accent (they use fill="currentColor", so this "color"
   is what they pick up), same as the box icons below. */
.nav-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  margin-right: 0.3em;
  color: var(--accent);
}

/* Small icons in front of headings and field labels (see icon() in inc/icons.php).
   Sized in em, so they scale automatically with whatever heading/label they sit in. */
.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  margin-right: 0.35em;
  color: var(--accent);
}

main { flex: 1; }

/* Gate pages (login.php, and start.php where you choose an organization): the content sits in a box (same look as .panel, but its own class so the
   profile page's .panel-scoped label colours don't apply) centred both ways in the space
   between header and footer - auto margins in a column flexbox centre it horizontally and
   vertically, while any message bar above it stays at the top. Not full width. */
main:has(.gate-wrap) { display: flex; flex-direction: column; }
.gate-wrap { margin: auto; width: 100%; max-width: 26rem; }
.gate-wrap-top { margin-top: var(--gap); margin-bottom: auto; }   /* the login page (no footer any more): the box sits close under the logo instead of in the middle of the page (Espen, 2026-10-24); start.php keeps the centred box */
.gate-wrap .gate-box { margin-bottom: 0; }   /* more specific than the shared .panel rule further down, which would otherwise win */
.gate-box h1 { margin-top: 0; text-align: center; }

@media (min-width: 40rem) {
  header { flex-direction: row; justify-content: space-between; align-items: center; }
  /* Panels (see below) get a border and rounded corners once there's room to spare */
  .panel, .gate-box { border: 1px solid light-dark(#e0e0e3, #2a2a2a); border-radius: 0.75rem; }
}
/* Groups a page section (heading + its content, e.g. the three parts of the profile page)
   into its own panel: --panel-bg, a step lighter than the page behind it in both themes.
   Square and borderless on narrow screens, so it doesn't cost any width there; the border
   and rounded corners are added above once the screen is wide enough to spare the room. */
.panel, .gate-box { background: var(--panel-bg); padding: var(--gap); margin-bottom: var(--gap-lg); }
/* A bit more room at the bottom of every panel than at the sides (Espen 2026-10-23) */
.panel { padding-bottom: calc(var(--gap) + 0.5rem); }
/* Panel h2: more room above (on top of the panel padding), a bit less below. The first
   label/fieldset after the heading drops its own top margin - otherwise it would collapse
   with the h2's bottom margin and the bigger of the two would win, hiding this setting. */
.panel h2 { margin: 0.75rem 0 1.35rem; }   /* mobile: a bit of room on top of the small panel padding (see the 40rem rule below for wider screens) */
.panel > label:first-child,   /* a panel without a heading (organization.php) */
.panel h2 + label,
.panel h2 + form > label:first-of-type,
.panel h2 + form > fieldset:first-of-type,
.panel h2 + form > h3:first-of-type { margin-top: 0; }
/* A label right under a sub-heading (organization.php addresses): less room than between two fields */
.panel h3 + label { margin-top: 0.75rem; }
/* More breathing room inside each profile section once there's room to spare (must
   come after the base rule above - equal specificity, later wins) */
@media (min-width: 40rem) {
  .panel, .gate-box { padding: var(--gap-lg); }
  /* Wider screens: less room above the panel heading - 1.5rem panel padding on top and no extra h2 margin (Espen 2026-09-28) */
  .panel { padding-top: 1.5rem; padding-bottom: calc(var(--gap-lg) + 0.5rem); }
  .panel h2 { margin-top: 0; }
}

/* Forms: one column, full width, large enough to tap */
label { display: block; margin-top: 1.5rem; margin-bottom: 0.4rem; font-weight: bold; }   /* small gap between a label and its field */
/* Change-password form: plain-weight labels instead of bold (see profile.php). Input
   width is the site-wide default (100% of the container) - narrower layouts are made
   with containers/columns, not by shrinking the fields (Espen, 2026-09-26). The submit
   button goes on its own line below the fields (display:block). */
.plain-labels label { font-weight: normal; }
.plain-labels button[type="submit"] { display: block; }
/* Password hint ("Minst 10 tegn"): always its own line below the field, on every screen size */
.plain-labels small { display: block; margin-top: var(--gap-sm); }

/* Phone number field: fixed "+47" text, a narrow input sized to just fit its
   grouped 8-digit value ("900 00 001"), and the save button right behind it on
   the same line - narrow enough to still fit that way on mobile screens. */
.phone-field { display: flex; align-items: center; gap: var(--gap-sm); }
.phone-field input.phone-number { width: 8.5em; }   /* was 6.5em: the last digit was cut off after the base font went down to 14px */
.phone-field button[type="submit"] { margin-top: 0; }
input, select, button { font: inherit; padding: 0.5rem; }
input, select {
  width: 100%;
  border: 1px solid light-dark(#ccc, #444);
  border-radius: 0.35rem;
  background: var(--bg);
  color: var(--text);
}
/* Disabled inputs (name/email on the profile page): still look like a normal
   field (same border/background), just with muted text and a "not-allowed"
   cursor to signal it can't be edited. */
input:disabled, select:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* Primary action button: filled with the accent colour. A bit more side padding
   than the 0.5rem inputs/buttons get by default, so it doesn't look as cramped. */
form button[type="submit"], .primary-button {
  margin-top: var(--gap);
  padding-left: 1rem;
  padding-right: 1rem;
  border: 0;
  border-radius: 0.35rem;
  background: var(--accent);
  color: light-dark(#fff, #0b1220);   /* stays readable against the accent fill in both themes */
  cursor: pointer;
}

/* Saved box (Espen 2026-10-23): the confirmation as a box below the save button - a green tint like the board check's blue one,
   green check mark and text. It does not fade: it stays until the next change (js/settings.js hides it when the person edits
   the form again; a new page load removes it). */
/* Light theme made stronger 2026-10-23 (Espen: too discreet): 14% tint (was 9%), a 1px green border, and a darker green #256a29 so the text keeps ~5.5:1 on the stronger tint. Dark theme unchanged (the border is transparent there). */
.saved-box { display: flex; align-items: center; gap: 0.6rem; margin: var(--gap) 0 0; padding: calc(0.75rem - 1px) calc(0.9rem - 1px); border: 1px solid; border-radius: 0.5rem;
  color: light-dark(#256a29, #6aab6d);
  border-color: light-dark(color-mix(in srgb, #2e7d32 45%, var(--panel-bg)), transparent);
  background: light-dark(color-mix(in srgb, #2e7d32 14%, var(--panel-bg)), color-mix(in srgb, #6aab6d 9%, var(--panel-bg))); }
/* A merged field in a message (name, position ...): a little bolder than the text around it (same weight as .position-name) */
.merged { font-weight: 600; }
/* Error box (Espen 2026-10-23): the same box as the green one, in red, with the exclamation icon, for field errors and error messages. Light text
   #b01e1e (~5.4:1 on the tint) and dark text #ff7b78 (~5.5:1) - a bit different from --danger, which is too weak as text on a tint. */
.error-box { display: flex; align-items: center; gap: 0.6rem; margin: var(--gap) 0; padding: calc(0.75rem - 1px) calc(0.9rem - 1px); border: 1px solid; border-radius: 0.5rem;
  color: light-dark(#b01e1e, #ff7b78);
  border-color: light-dark(color-mix(in srgb, #c62828 45%, var(--panel-bg)), transparent);
  background: light-dark(color-mix(in srgb, #c62828 14%, var(--panel-bg)), color-mix(in srgb, #ef5350 9%, var(--panel-bg))); }
.error-box .label-icon { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; color: inherit; }
/* Privacy page (privacy.php): label/value pairs and a plain bullet list */
.privacy-list { margin: 0; }
.privacy-list dd { margin: 0 0 var(--gap); }
.privacy-bullets { margin: 0 0 var(--gap); padding-left: 1.25rem; }

/* Warning box (Espen 2026-10-23): the same box in yellow, with the exclamation icon. Light text #7a5600 (~5.9:1 on the tint), dark text #dcbd58 (~7.5:1). */
.warning-box { display: flex; align-items: center; gap: 0.6rem; margin: var(--gap) 0; padding: calc(0.75rem - 1px) calc(0.9rem - 1px); border: 1px solid; border-radius: 0.5rem;
  color: light-dark(#7a5600, #dcbd58);
  border-color: light-dark(color-mix(in srgb, #d9a300 55%, var(--panel-bg)), transparent);
  background: light-dark(color-mix(in srgb, #d9a300 14%, var(--panel-bg)), color-mix(in srgb, #dcbd58 9%, var(--panel-bg))); }
.warning-box .label-icon { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; color: inherit; }   /* triangle_warning icon from Espen */
.saved-box-page { margin: var(--gap) 0; }   /* a success message at the top of the page (flash(), after a save that moves to another page) */
.saved-box[hidden] { display: none; }   /* display: flex above would otherwise win over the hidden attribute */
.saved-box .label-icon { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; color: inherit; }

/* The logout button in the menu looks like a link, not a filled button -
   this has to explicitly reset background/border/padding/colour, since it would
   otherwise win over the plain "nav button" rule (its [type="submit"] makes it more specific). */
nav form { margin: 0; }
nav form button[type="submit"] {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* Profile details */
dt { font-weight: bold; margin-top: var(--gap); }
dd { margin: 0; }

/* h3 (e.g. "Global rolle", "Dine organisasjoner") keeps the browser's default
   top margin raised to match labels, with only a small bottom margin - like the labels above the input
   fields, the heading should sit close on top of its content. */
h3 { margin-top: 1.5rem; margin-bottom: 0.4rem; }   /* same spacing as a label: a bit more room above, a small gap below */

/* Simple card list on the profile page: one card per item instead of a plain
   bullet list - used for both "Dine organisasjoner" and "Global rolle". Cards
   use the same "recessed" background as inputs and the segmented control
   (var(--bg)), for a consistent look - not the organization page's own .box
   tiles, since that page is styled separately on purpose (see the .box
   comment further down). Sits right below its h3 (see above), same as an
   input sits right below its label. */
.card-list { list-style: none; margin: 0; padding: 0; }
.card-list li { background: var(--bg); border-radius: 0.35rem; padding: 0.5rem 0.75rem; }
.card-list li + li { margin-top: var(--gap-sm); }
/* Cards in columns instead of one per line (persons.php): as many columns as fit at 18rem or more,
   one column on mobile. The grid gap replaces the margin between stacked cards. */
.card-list.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--gap-sm); }
.card-list.card-grid li + li { margin-top: 0; }
/* A person's name on a card (persons.php) in the accent colour; the position after it stays normal text */
.person-name { color: var(--accent); font-weight: 500; }   /* medium: a bit bolder than normal, not full bold */
/* The position after the name (no brackets - the colour/weight change already separates them) */
.person-position { margin-left: 0.4em; }

/* A card that is a link (start.php: choose organization): the link fills the whole card, so all of it
   is clickable, without an underline - same idea as .box a further down. */
.card-list li a { display: block; margin: -0.5rem -0.75rem; padding: 0.75rem 0.9rem; text-decoration: none; }
/* Icon in front of the name in a link card: bigger than the usual 1em label icon, with room around it */
.card-list li a .label-icon { width: 1.3em; height: 1.3em; vertical-align: -0.3em; margin: 0 0.7em 0 0.1em; }
/* Extra detail line inside a card (e.g. email and phone on the persons page) */
.card-list small { display: block; color: var(--muted); }

/* H1: light weight, sized up to still carry presence, with a touch of extra
   letter-spacing so it reads as spacious rather than just thin. A tad of grey
   in light theme softens it further (dark theme keeps the normal text colour). */
h1 { line-height: 1.2; font-weight: 300; font-size: var(--h1-size); letter-spacing: 0.02em; color: light-dark(#595959, #828282); }
/* H1: always centred, on every screen size (2026-09-26, Espen) */
h1 { text-align: center; }

/* Profile page headings and field labels: same grey as H1 (light theme only, dark
   theme keeps the normal text colour) - scoped to .panel, which right now is only
   used by the profile page's three sections. */
/* Only the phone field's label counts as a "field label" here - the language/theme
   radio options and the password field labels stay regular text colour (see below). */
.panel h3, .panel dt, .panel label[for="full_name"], .panel label[for="email"], .panel label[for="phone"], .panel.grey-labels label:not(.check), .panel.grey-labels .active-label, .panel legend { color: light-dark(#595959, #969696); }
/* Panel h2s: same grey in light theme, but a bit brighter in dark theme than the labels/h3s above (Espen, 2026-09-26) */
.panel h2 { color: light-dark(#595959, #b5b5b5); }

/* Section headings (e.g. the h2s on the profile page): more room above than below,
   so each section reads as its own group. */
h2 { margin: var(--gap-lg) 0 var(--gap-sm); font-size: 1.25rem; font-weight: 600; }   /* was the default 1.5em of the 14px body = 21px; 20px since 2026-10-24 (Espen) */

/* Language switcher and organization switcher: mark "you are here" with the accent colour */
[aria-current] { font-weight: bold; color: var(--accent); }

/* Settings (language/theme) on the profile page */
fieldset { border: 0; padding: 0; margin: 1.5rem 0 0; }   /* same room above as a label */
legend { font-weight: bold; padding: 0; }
input[type="radio"], input[type="checkbox"] { width: auto; }

/* Organization number: 9 digits grouped 3+3+3 ("997 996 712"), so the field only needs to be that wide. */
input.org-number { width: 8em; }
/* The number field with an icon-only button behind it on the same line: just the icon, no button styling. */
.number-row { display: flex; align-items: center; gap: var(--gap); }
.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem;
  border: 0; background: none; color: var(--accent); cursor: pointer; }
.icon-button .label-icon { width: 1.5em; height: 1.5em; margin: 0; vertical-align: 0; }
.icon-button:disabled { opacity: 0.45; cursor: not-allowed; }
.number-row .icon-button { padding: 0.5rem; margin: -0.25rem; }   /* more room around the icon so the hover tint spreads out; the negative margin keeps the row exactly as it was (Espen 2026-10-27) */
/* Confirmation dialog (native <dialog>): title, text, a divider, then plain text buttons on the right. */
dialog { max-width: 32rem; width: calc(100% - 2 * var(--gap)); padding: var(--gap-lg); border: 0; border-radius: 0.75rem;
  background: var(--panel-bg); color: var(--text); }
dialog::backdrop { background: rgb(0 0 0 / 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }   /* the page behind a warning / confirmation box is blurred (Espen, 2026-10-24) */
dialog h2 { margin: 0 0 var(--gap); }
dialog p { margin: 0; }
.dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--gap-lg); margin-top: var(--gap-lg); padding-top: var(--gap);
  border-top: 1px solid light-dark(#e0e0e3, #2a2a2a); }
.dialog-actions button,
:root dialog form .dialog-actions button[type="submit"] { margin: 0; padding: 0.25rem 0.5rem; border: 0; background: none; color: var(--accent); font-weight: bold; cursor: pointer; }   /* the long selector wins over the blue-button rules for form submit buttons */
/* The VAT checkbox belongs to the number above it: less room than between two fields. */
.number-row + .check, .error-box + .check, .warning-box + .check { margin-top: 0.6rem; }

/* Postcode + city on one line (organization.php): a narrow column for the 4-digit postcode, the city takes the rest. */
.postcode-city { display: grid; grid-template-columns: 6.5em 1fr; gap: 0 var(--gap-sm); }

/* A checkbox with its text (organization.php): one line, normal weight, accent-coloured tick. */
.check { display: flex; align-items: center; gap: 0.6rem; font-weight: normal; }
.check input { margin: 0; accent-color: var(--accent); }
/* A disabled checkbox reads as "inactive": muted text, like the disabled inputs. */
.check:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
/* The disabled checkbox is drawn by us: the browser's own greyed-out one has almost no contrast in the dark theme.
   Dark box with an input-like border; when checked, a tinted box with a blue tick. */
.check input:disabled { appearance: none; display: grid; place-content: center; flex: none; width: 1.15em; height: 1.15em;
  border: 1px solid light-dark(#ccc, #555); border-radius: 0.25rem; background: var(--bg); }
.check input:disabled:checked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 25%, var(--bg)); }
.check input:disabled:checked::before { content: ""; width: 0.7em; height: 0.7em; background: var(--accent);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }

/* Segmented control: replaces separate radio buttons + a "Lagre" button.
   Picking an option applies it immediately (see js/settings.js), so the
   selected segment itself is the only confirmation needed. A track
   (var(--bg), same tone as an input) with the picked option as a floating
   "pill" on top, same corner radius as the site's input fields. */
.segment-group {
  display: flex;
  margin-top: 0.4rem;   /* same small gap below its legend as a label has above its field */
  background: var(--bg);
  border-radius: 0.5rem;
  padding: 0.25rem;
  gap: 0.25rem;
}
/* .segment is a <label>, so it also needs to override the site-wide label
   rule (margin-top + bold) - the segment itself is unselected/normal weight
   by default, and shouldn't be pushed down inside the track. */
.segment { flex: 1; margin-top: 0; margin-bottom: 0; font-weight: normal; }
/* Hidden but still a real, focusable radio input - zeroed out completely so its
   native size/margin can't throw off the flex layout of the segment it's in. */
.segment input {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.segment span {
  display: block;
  text-align: center;
  padding: 0.45rem 0.5rem;
  border-radius: 0.35rem;   /* same radius as the site's input fields */
  cursor: pointer;
  font-weight: normal;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.segment input:checked + span {
  background: var(--accent);
  color: light-dark(#fff, #0b1220);
  font-weight: bold;
  box-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 20%), rgb(0 0 0 / 50%));   /* a bit of lift, like a floating pill */
}
.segment input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Theme selector segments hold only an icon: centred, no text margin */
.segment span .label-icon { width: 1.25em; height: 1.25em; margin: 0; vertical-align: -0.25em; }
/* The selected segment is filled with the accent, so its icon must not be accent too (invisible): use the pill's text colour */
.segment input:checked + span .label-icon { color: inherit; }
/* Text only for screen readers (names the icon-only theme radios) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Messages: a coloured bar plus a bold label, so colour is not the only signal.
   The bar colours have enough contrast on both the light and the dark background. */
input[aria-invalid="true"] { border: 2px solid var(--danger); }

/* Boxes on the organization page: two per row, one per row on narrow screens.
   The organization page is treated as its own separate thing, style-wise - .box is
   its own class, not a reuse of .panel, so changes made to .panel/profile styling
   elsewhere never accidentally affect these boxes (and vice versa). */
/* One column on phones; tablet and desktop layouts are in the media queries below (boxes keep their normal size
   whatever the count). */
.boxes { list-style: none; margin: var(--gap) 0 var(--gap-lg); padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.box { background: var(--panel-bg); padding: 2rem var(--gap); text-align: center; font-weight: bold; }
@media (min-width: 34rem) {
  /* Border and rounded corners from the two-column layout (34rem) up - same look .panel gets, defined separately here on purpose */
  .box { border: 1px solid light-dark(#e0e0e3, #2a2a2a); border-radius: 0.75rem; }
}

/* Phone (base, below 34rem): one column. (Before 2026-10-02 an auto-fill grid gave 2 columns on wide phones, 496-640px, without the border and radius - a third in-between layout, Espen.) */
/* Tablet (34rem to 64rem, Espen 2026-10-02): two boxes per row; with an odd count the single box on the last row is
   centred. A 4-column grid, a box spans 2 columns, the last odd box starts at column 2. */
@media (min-width: 34rem) {
  .boxes { grid-template-columns: repeat(4, 1fr); }
  .boxes > .box { grid-column: span 2; }
  .boxes > .box:last-child:nth-child(odd) { grid-column: 2 / span 2; }
}
/* Desktop layout of the boxes (Espen, 2026-10-02): at most 4 per row, all the same size (a quarter of the row, as the
   auto-fill grid gave before), an incomplete row centred, never one box alone on a row - 5 boxes give 3 + 2, 6 give
   3 + 3, 9 give 3 + 3 + 3; every other count is 4 per row (1-4 one row, 7 = 4 + 3, 8 = 4 + 4, 10 = 4 + 4 + 2).
   A 24-column grid: a box spans 6 columns (= a quarter), so a row of 3 starts at column 4, 2 at column 7, 1 at column 10.
   Below 64rem the tablet and phone rules above are used. */
@media (min-width: 64rem) {
  .boxes { grid-template-columns: repeat(24, 1fr); }
  .boxes > .box, .boxes > .box:last-child:nth-child(odd) { grid-column: span 6; }   /* also undoes the tablet centring */
  /* Rows of three: counts 3, 5, 6, 9 (and the last three of 7) */
  .boxes:is(:has(> :nth-child(3):last-child), :has(> :nth-child(5):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) > .box:nth-child(3n+1), .boxes:has(> :nth-child(7):last-child) > .box:nth-child(5) { grid-column: 4 / span 6; }
  .boxes:is(:has(> :nth-child(3):last-child), :has(> :nth-child(5):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) > .box:nth-child(3n+2), .boxes:has(> :nth-child(7):last-child) > .box:nth-child(6) { grid-column: 10 / span 6; }
  .boxes:is(:has(> :nth-child(3):last-child), :has(> :nth-child(5):last-child), :has(> :nth-child(6):last-child), :has(> :nth-child(9):last-child)) > .box:nth-child(3n), .boxes:has(> :nth-child(7):last-child) > .box:nth-child(7) { grid-column: 16 / span 6; }
  /* Rows of two: the last two of 5 and of 10, and 2 boxes alone; one box alone */
  .boxes.boxes:has(> :nth-child(5):last-child) > .box:nth-child(4), .boxes.boxes:has(> :nth-child(10):last-child) > .box:nth-child(9), .boxes.boxes:has(> :nth-child(2):last-child) > .box:nth-child(1) { grid-column: 7 / span 6; }
  .boxes.boxes:has(> :nth-child(5):last-child) > .box:nth-child(5), .boxes.boxes:has(> :nth-child(10):last-child) > .box:nth-child(10), .boxes.boxes:has(> :nth-child(2):last-child) > .box:nth-child(2) { grid-column: 13 / span 6; }
  .boxes.boxes:has(> :only-child) > .box { grid-column: 10 / span 6; }
}

/* Icon sitting above each box's label, centred, with a bit of space below it.
   Coloured with the accent (it uses fill="currentColor", so this "color" is
   what it picks up), same as the header icons above. */
.box-icon { display: block; width: 2rem; height: 2rem; margin: 0 auto var(--gap-sm); color: var(--accent); }

/* A box that links to its module: the link fills the whole box, so all of it is clickable. */
.box a { display: block; margin: -2rem calc(-1 * var(--gap)); padding: 2rem var(--gap); text-decoration: none; }

/* Red button (delete person): same size and font as the blue submit buttons, just red */
.danger-button { margin-top: var(--gap); padding: 0.5rem 1rem; border: 0; border-radius: 0.35rem; cursor: pointer;
  background: var(--danger); color: light-dark(#fff, #0b1220); }   /* dark text on the lighter dark-theme red (like the blue buttons) */
.danger-button:disabled { opacity: 0.45; cursor: not-allowed; }
h2.danger .label-icon { color: var(--danger); }   /* red icon on the delete-person heading */

.panel .card-list + h3 { margin-top: var(--gap); }

/* Small "i" (text symbol) behind a heading: click opens a short explanation floating on top (js/info.js closes it on outside click / Escape) */
.info { display: inline; position: relative; font-size: 0.875rem; font-weight: normal; }
.info summary { display: inline; list-style: none; cursor: pointer; color: var(--accent); font-size: 1.1em; margin-left: 0.2em; }
.info summary::-webkit-details-marker { display: none; }
.info summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.info-text { position: absolute; z-index: 10; left: 0; top: 100%; margin-top: 0.4rem; width: 16rem; max-width: 80vw; padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-bg)); color: var(--text); border: 1px solid light-dark(#ccc, #444); border-radius: 0.5rem;   /* a slight blue tint (12% accent) so the box stands out from the panel (Espen 2026-10-01) */
  box-shadow: 0 5px 15px light-dark(rgb(0 0 0 / 22%), rgb(0 0 0 / 63%)); font-size: 0.8125rem; line-height: 1.7; letter-spacing: normal; }
.info-text::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.25rem; pointer-events: none; }   /* invisible room below the box so its shadow (5px offset + 15px blur = 20px) is not cut off at the page end */

/* Cards only as wide as their content, flowing side by side and wrapping (positions on persons.php) */
.card-list.card-flow { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.card-list.card-flow li + li { margin-top: 0; }
.info-text a { text-decoration: underline; color: var(--accent); }   /* a link inside an explanation (e.g. to Brreg): accent blue, underlined */

/* Add-position form (persons.php): set apart from the lists above by space and a thin line; name, type and button on one line */
.panel form.position-add { margin-top: 2rem; padding-top: var(--gap); border-top: 1px solid light-dark(#e5e5e5, #333); }
.position-add-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--gap) var(--gap-sm); }   /* row gap = --gap, so the button is not tight against the field above when it wraps */
.position-add-fields > div { flex: 1 1 10rem; }
.position-add-fields label { margin-top: 0; }
.position-add-fields button[type="submit"] { margin-top: 0; border: 1px solid transparent; }   /* transparent border = same height as the bordered fields */
select { box-sizing: border-box; height: calc(1.75em + 18px); }   /* same height as an input (line 1.75em + 2 x 8px padding + 2 x 1px border); a select otherwise ends up lower */

/* min-width: 0 lets fieldsets and segments shrink instead of pushing the page wider (segmented controls on narrow screens) */
fieldset, .segment { min-width: 0; }
.card-list.card-flow li a { padding: 0.5rem 0.75rem; }   /* a link card the same size as the plain ones next to it */

/* A short explanatory note under a field or button: muted grey (AA contrast in both themes) */
.note { color: var(--muted); }
/* Edit pencil at the end of a card */
.card-list.card-flow li a .label-icon { width: 0.85em; height: 0.85em; margin: 0 0 0 0.6em; vertical-align: -0.05em; }

/* A row of page actions above the first section, aligned right - desktop only (64rem+); e.g. "Legg til ny person" on
   persons.php, where phones and tablets get the same button in a panel of its own (.add-person-panel) - Espen */
.page-actions { display: none; }
.page-actions .primary-button { margin-top: 0; }
@media (min-width: 64rem) {
  /* Zero-height wrapper right before the H1: the button hangs at its right edge, on the H1's line (same trick as .nav-icon-link) */
  .page-actions { display: block; position: relative; height: 0; margin: 0; }
  .page-actions .primary-button { position: absolute; right: 0.75rem; --btn-height: calc(0.8125rem * 1.75 + 0.8rem); top: calc((var(--h1-line) - var(--btn-height)) / 2); font-size: 0.8125rem; padding: 0.4rem 1rem; }
  .add-person-panel { display: none; }
}
.icon-text-button { display: inline-flex; align-items: center; gap: 0.5em; }
.icon-text-button .label-icon { color: inherit; margin: 0; }   /* the icon takes the button's text colour, not the accent (accent on accent is invisible) */
/* .primary-button used on a link (add person): looks like the blue submit buttons */
a.primary-button { display: inline-block; text-decoration: none; padding: 0.5rem 1rem; border-radius: 0.35rem; background: var(--accent); color: light-dark(#fff, #0b1220); }
a.primary-button.icon-text-button { display: inline-flex; }

/* Dark theme: dark text on the light blue buttons looks thin, so the blue buttons get a heavier font (600).
   font-weight can't use light-dark(), so this is repeated for "system says dark" and "site set to dark".
   Scoped to main so the logout button in the header (a link look) is unaffected. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) main form button[type="submit"],
  :root:not([data-theme="light"]) main .primary-button { font-weight: 600; }
}
:root[data-theme="dark"] main form button[type="submit"],
:root[data-theme="dark"] main .primary-button { font-weight: 600; }

/* Accordion (<details class="accordion">): a bordered row with the title and a chevron on the right; opening shows the
   .accordion-body below. js/accordion.js can load the body from data-src the first time it is opened. */
.accordion { margin-top: var(--gap); border: 1px solid light-dark(#e5e5e5, #333); border-radius: 0.5rem; }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: 0.6rem 0.75rem; cursor: pointer; list-style: none; border-radius: 0.5rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; flex: none; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.35s; }
.accordion summary:hover { background: var(--bg); }
.accordion summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.accordion-body { padding: 0 0.75rem 0.75rem; }
/* Open: a slightly different background (a touch lighter in dark theme, a touch darker in light theme); see below */
.accordion { transition: background-color 0.35s; }

/* The height animation is done by js/accordion.js (Web Animations API), because pure-CSS height animation of <details>
   (::details-content + interpolate-size) only works in Chrome - not in Firefox or Safari (iPhone). The script sets
   .js-accordion on the element and .is-open while it is open or opening, so the chevron and the background follow the
   animation instead of jumping when the [open] attribute changes. Without JS the plain [open] rules still work. */
.accordion { box-sizing: border-box; }   /* so its height can be animated including the border */
.accordion:not(.js-accordion)[open] summary::after, .accordion.is-open summary::after { transform: translateY(25%) rotate(-135deg); }
.accordion:not(.js-accordion)[open], .accordion.is-open { background: light-dark(color-mix(in srgb, var(--text) 2%, var(--panel-bg)), color-mix(in srgb, var(--text) 5%, var(--panel-bg))); }   /* light theme: only a whisper darker than the white panel; dark theme: a touch lighter */
@media (prefers-reduced-motion: reduce) {
  .accordion, .accordion summary::after { transition: none; }
}
.accordion-body h3 { margin-top: 0.5rem; }

/* The Brreg accordion wears Brreg's own colours (sampled from a Brreg screenshot, 2026-09-26): peach #FFEEDB was tried
   (solid, then 15%) and finally removed - no background at all (Espen); orange border #DB7C1F, brown text #633303. With no
   background the dark brown is not readable in dark theme, so there the text is a light peach instead. The cards inside
   are the normal recessed cards.
   (The two :not()s only raise the specificity above the open-state rule.) */
.accordion.brreg { background: light-dark(#ffeedb, transparent); border-color: #db7c1f; color: light-dark(#633303, #ffd9b3); }
.accordion.brreg summary:hover { background: light-dark(rgb(255 255 255 / 45%), rgb(255 255 255 / 8%)); }
.accordion.brreg summary:focus-visible { outline-color: #db7c1f; }
.accordion.brreg .person-name, .accordion.brreg h3, .accordion.brreg .note { color: light-dark(#633303, #ffd9b3); }
.accordion.brreg .note { opacity: 0.85; }

/* Brreg import (brreg_import.php): one card per Brreg person */
.import-list { margin-top: var(--gap); }
.import-list li { padding: 0.75rem; }
.import-list .check { margin: 0; }
.import-list input, .import-list select { background: var(--panel-bg); }   /* the card is already --bg */
.import-list .error-box, .import-list .warning-box { margin: 0.6rem 0 0; }
.import-list .error-box + .check, .import-list .warning-box + .check { margin-top: 0.6rem; }
.accordion-body > .primary-button { margin-top: var(--gap-sm); }

/* A person's positions with years (person.php): one line each, the years on the right; ended ones greyed */
.appointment-list li { display: flex; justify-content: space-between; gap: var(--gap); }
.appointment-list li small { color: var(--muted); white-space: nowrap; }
.appointment-list li.ended { color: var(--muted); }

/* A select whose empty first option works as a placeholder (e.g. the annual meeting month on organization.php):
   grey while nothing is chosen; the options in the open list keep the normal colour */
select.placeholder-select:has(option[value=""]:checked) { color: var(--muted); }
select.placeholder-select option { color: var(--text); }

/* Date fields (appointment.php): only as wide as a date */
input.date { width: 11em; }
/* iPhone Safari: an empty date field collapses (its value box has no height) - give the field the same height as the
   other inputs and selects, and the value box one line */
input[type="date"] { box-sizing: border-box; min-height: calc(1.75em + 18px); }
input[type="date"]::-webkit-date-and-time-value { min-height: 1.75em; text-align: left; }   /* Safari centres the date: left like the other fields */

/* appointment.php: on desktop the position and the two dates share one line - the dates on the right,
   the position select takes the rest of the width (stacked on mobile) */
@media (min-width: 64rem) {
  .appointment-fields { display: flex; gap: var(--gap); align-items: flex-start; }
  .appointment-fields > div { flex: none; }
  .appointment-fields > div:first-child { flex: 1; min-width: 0; }
}

/* A position name inside a message (e.g. "... har allereie vervet Styremedlem ..."): a bit bolder than the text */
.position-name { font-weight: 600; }

/* A thin separating line inside a panel (same line as above the "add position" form on persons.php) -
   e.g. between a person's active and ended positions on person.php */
hr.separator { border: 0; border-top: 1px solid light-dark(#e5e5e5, #333); margin: var(--gap) 0; }

/* person.php: name on the left; years, a pencil (edit) and a red trash can (delete) on the right - only the icons are links/buttons */
.appointment-list li { align-items: center; }
.appointment-end { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; margin-right: -0.5rem; }   /* pulls the last icon's empty space into the card's padding */
.appointment-end small { margin-right: 0.25rem; }
/* Big touch targets (44px, the usual minimum for fingers) around the small icons - also makes the card taller */
.appointment-list .icon-button { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 0.35rem; }
.appointment-list li a.icon-button { display: inline-flex; margin: 0; }   /* not the full-card link style of .card-list li a */
.appointment-list .icon-button:hover { background: var(--panel-bg); }
.appointment-list .icon-button .label-icon { width: 1.1em; height: 1.1em; margin: 0; vertical-align: 0; }
.icon-button.danger .label-icon { color: var(--danger); }   /* set on the icon itself (icons have the accent colour) */

/* Buttons side by side under a form (e.g. "Oppdater" + "Avbryt" on appointment.php) */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); margin-top: var(--gap); }
.form-actions button[type="submit"], .form-actions .primary-button { margin-top: 0; }   /* a link styled as a button (e.g. "Start import") gets no extra top margin either, so the buttons line up */
/* Secondary action (e.g. "Avbryt"): same size as the blue buttons, but only an outline - it doesn't save anything */
.secondary-button { display: inline-block; padding: calc(0.5rem - 1px) calc(1rem - 1px); border: 1px solid light-dark(#ccc, #444);
  border-radius: 0.35rem; color: var(--text); text-decoration: none; }
.secondary-button:hover { background: var(--bg); }

/* Brreg import: a name from Brreg in Brreg's own brown (the same as in the Brreg accordion on persons.php) */
.brreg-name { margin: 0; font-size: 1.15rem; font-weight: 500; color: light-dark(#633303, #ffd9b3); }


/* Brreg peach (#FFEEDB, from a Brreg screenshot) behind Brreg content - light theme only (Espen, 2026-09-27): the import cards */
.import-list li { background: light-dark(#ffeedb, var(--bg)); }
.accordion.brreg .card-list li { background: light-dark(#fff, var(--bg)); }   /* white name cards on the peach accordion, light theme only (Espen) */

/* Brreg import step 1: the card's colour shows the status (Espen) - green = no match, yellow = a similar name,
   red = the same name is registered. Light theme: a pale background; dark theme: the standard background; both with a
   1px border in the status colours */
.import-list li.card-ok   { background: light-dark(#e8f5e9, var(--bg)); border: 1px solid light-dark(#2e7d32, #6aab6d); }
.import-list li.card-warn { background: light-dark(#fff6d6, var(--bg)); border: 1px solid light-dark(#d9a300, #dcbd58); }
.import-list li.card-stop { background: light-dark(#fdeaea, var(--bg)); border: 1px solid light-dark(#c62828, #d45f5b); }
.import-plan label:not(.check) { margin-top: 0.75rem; font-weight: normal; }
.import-plan .import-action-text { margin: 0.5rem 0 0; }
.import-plan .import-role { margin-top: var(--gap); padding-top: 0.75rem; border-top: 1px solid light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 10%)); }
.import-dates { display: flex; flex-wrap: wrap; gap: 0 var(--gap); }
.import-dates[hidden] { display: none; }   /* display: flex above would otherwise beat the hidden attribute */

/* Brreg import: the button row - "Avbryt" on the left, the step's buttons on the right ("Tilbake" before "Neste"),
   on every screen size (Espen) */
.import-actions { justify-content: space-between; }
.import-actions > div { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }   /* 1rem between "Tilbake" and "Neste" (Espen) */
.import-list li + li { margin-top: 2rem; }   /* more room between the Brreg import person cards (Espen) */
.import-list + .import-actions { margin-top: 2rem; }   /* the same room between the last card and the buttons (Espen) */
.name-medium { font-weight: 500; }   /* a person's name inside a sentence, a bit bolder (e.g. the green cards in the Brreg import) */

/* Toggle switch: a normal checkbox (role="switch") drawn as a sliding switch - blue when on (e.g. step 1 of the Brreg
   import, Espen). Reusable: <label class="switch"><input type="checkbox" role="switch"> Text</label> */
label.switch { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-weight: normal; cursor: pointer; }
.switch input { appearance: none; flex: none; position: relative; width: 2.5rem; height: 1.4rem; margin: 0; border-radius: 999px;
  background: light-dark(#8e8e93, #6b6b6b); cursor: pointer; transition: background 0.2s; }
.switch input::before { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 30%); transition: transform 0.2s; }
.switch input:checked { background: var(--accent); }   /* blue when on (green was tried, Espen 2026-09-28) */
.switch input:checked::before { transform: translateX(1.1rem); }
@media (prefers-reduced-motion: reduce) { .switch input, .switch input::before { transition: none; } }

/* Place a panel in the right-hand column on desktop, in a given row (person_new.php: Verv above Systemtilgang).
   The first panel spans both rows. */
@media (min-width: 64rem) {
  .wide .panels > .col2-row1 { grid-column: 2; grid-row: 1; }
  .wide .panels > .col2-row2 { grid-column: 2; grid-row: 2; }
  .wide .panels:has(> .col2-row1) { grid-template-rows: auto 1fr; }   /* row 1 only as tall as its panel, so no gap opens between the two */
}

/* The end of a form below its panels (person_new.php) - the rule for any submit button outside a panel (Espen):
   the same gap above as between the panels, centred on the page, and a bit bigger than the buttons inside panels.
   A warning shown there is indented like the panels' padding, so it lines up with the content inside them. */
.form-end { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--gap); margin-top: var(--gap-lg); }
.form-end button[type="submit"], .form-end .primary-button { margin-top: 0; font-size: 1rem; padding: 0.7rem 1.5rem; }
.form-end .secondary-button { font-size: 1rem; padding: calc(0.7rem - 1px) calc(1.5rem - 1px); }   /* "Avbryt" the same size (minus its border) */
.form-end .error-box, .form-end .warning-box { flex-basis: 100%; margin-block: 0; margin-inline: var(--gap); }
@media (min-width: 40rem) { .form-end .error-box, .form-end .warning-box { margin-inline: calc(var(--gap-lg) + 1px); } }   /* + the panel's 1px border */

/* persons.php, phones and tablets: the add-person button fills its panel and is a bit bigger (Espen) */
/* A panel with only a blue button (no heading): persons.php 'add person' on phones/tablets and the privacy button on profile.php (Espen 2026-10-23) */
.button-panel .primary-button { display: flex; justify-content: center; text-align: center; width: 100%; box-sizing: border-box; margin-top: 0; font-size: 1rem; padding: 0.7rem 1.5rem; }
.button-panel { padding-bottom: var(--gap); }   /* the button-only panel keeps equal padding on all four sides (not the extra bottom room of other panels) */
@media (min-width: 40rem) { .button-panel { padding-top: var(--gap-lg); padding-bottom: var(--gap-lg); } }   /* the same padding on all four sides (panels otherwise have less on top from 40rem) */

/* Phones and tablets (one column): the .panel-column wrappers step aside (display: contents) so panels from both columns
   can be reordered with .mobile-order-1 / -2 (after the others, in that order). person.php: Kontaktinformasjon, Verv,
   Systemtilgang, Slett person (Espen 2026-09-28); desktop keeps the two columns as they are in the HTML. */
.mobile-order-1 { order: 1; }
.mobile-order-2 { order: 2; }
@media (min-width: 64rem) { .mobile-order-1, .mobile-order-2 { order: 0; } }

/* Brreg import: a Brreg position - the sentence, then a small Nei/Ja segmented control (the track in the panel colour,
   like the inputs on the cards); the dates only after "Ja" */
.import-role-text { margin: 0; }
.import-plan .import-give { max-width: 8rem; margin-top: 0.6rem; background: var(--panel-bg); }
.import-give .segment span, .import-include-group .segment span { padding-top: 0.2rem; padding-bottom: 0.2rem; font-size: 0.8125rem; }   /* smaller controls (Espen) */
/* Include the person: "Ikkje importer" / "Importer" under the status text (replaced a toggle switch, Espen 2026-09-28) */
.import-plan .import-include-group { max-width: 8rem; margin-top: 0.75rem; background: var(--panel-bg); }
.import-plan label.segment { margin-top: 0; font-weight: normal; }
/* Brreg import: the default "no" choice ("Ikkje importer", "Nei") is grey when chosen, only the "yes" choice is blue (Espen) */
.import-plan .segment input[value="0"]:checked + span { background: light-dark(#e5e7eb, #3a3f47); color: light-dark(#1f2937, #d1d5db); font-weight: normal; }   /* light theme: a light grey with dark text (white on a light grey would be too faint) */

/* DEV ONLY: the light/dark switch in the header (global admins) - just the sun/moon icon */
.dev-theme { display: inline-flex; align-items: center; padding: 0.6rem 0.5rem; }
.dev-theme .label-icon { margin: 0; width: 1.1em; height: 1.1em; }
.import-role-text .position-name { color: var(--accent); font-weight: normal; }   /* the position name from Brreg in blue, not bold (Espen 2026-09-28) */

/* Brreg import, yellow card: the merge text and its three radio choices - the chosen one in the normal text colour,
   the others grey (Espen 2026-09-28) */
.import-merge-text { margin: 0.75rem 0 0; }
.import-merge .check { margin-top: 0.4rem; align-items: flex-start; }
.import-merge .check input { margin-top: 0.35em; }
.import-merge label:has(input:not(:checked)) { color: light-dark(#646b78, var(--muted)); }   /* light theme a touch darker than --muted: ~5:1 on the pale yellow (WCAG AA 4.5) */
.import-merge label:has(input:checked) { font-weight: 500; }   /* the chosen one a bit stronger (Espen) */
.import-merge-text .name-medium { color: var(--accent); font-weight: normal; }   /* names in the yellow card's text: blue, not bold (Espen) */

.primary-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* Brreg import: the name that will be used (yellow card choices, step 2 summary) and the positions in the summary -
   blue, not bold (Espen 2026-09-28) */
.name-used, .import-summary .position-name { color: var(--accent); font-weight: normal; }
.import-merge label:has(input:not(:checked)) .name-used { color: inherit; }   /* not chosen: the name grey like the rest (Espen) */
.summary-dates { display: block; }
@media (min-width: 40rem) { .summary-dates { display: inline; } }   /* Brreg import step 2: a position's dates on their own line on phones (Espen) */
.import-summary .warning-box .position-name { color: inherit; }   /* in the step 2 warnings the dates are blue, not the positions (Espen) */

/* Brreg import: e-mail and phone for a new person - on one line on desktop; the e-mail field no wider than 24rem (Espen) */
.import-email input { max-width: 24rem; }
@media (min-width: 64rem) {
  .import-new-fields { display: flex; align-items: flex-start; gap: var(--gap); }
  .import-new-fields > .import-email { flex: 0 1 24rem; }
}
.last-import { margin: -0.5rem 0 0; font-style: italic; }   /* the last-import line sits close under the panel heading, in italics (Espen) */
.last-import .name-used { color: inherit; font-weight: 600; }   /* date and name: a little bold instead of blue (Espen) */

/* Setup wizard (setup.php): the last step, and a module name in running text (blue, like the menu links) */
.setup-done { text-align: center; }
.setup-done .label-icon { display: block; width: 6rem; height: 6rem; margin: 1rem auto; color: light-dark(#2e7d32, #6aab6d); }
.setup-done p { font-size: 1.5rem; font-weight: 600; line-height: 1.3; }
.module-name { color: var(--accent); font-weight: 500; }
.logo-centered { margin-inline: auto; }   /* the logo alone in the setup wizard header: in the middle, on desktop too */
.setup-manual { margin-top: 2.5rem; text-align: center; }   /* step 1: "not registered in Brreg" at the bottom, apart from the rest */
.gate-wrap .form-actions { margin-top: 2rem; }   /* the wizard: more room above the buttons at the bottom of a panel (Espen) */

/* Positions on persons.php: one card per position - the name on the left, the standard period (segmented control) on the
   same line at the right edge, on phones too (Espen 2026-09-30). No grid. The card is the usual .card-list li. */
.card-list.position-rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); min-height: 2.925rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.position-card { min-width: 0; }
.card-list .position-card a { display: block; margin: 0; padding: 0.25rem 0; text-decoration: none; color: var(--accent); }   /* an own position: its name in blue (no pencil icon) - opens the edit page */
.position-rows form.position-duration { flex: none; margin: 0; }
.position-rows .segment-group { margin: 0; }
.position-rows .segment span { padding: 0.25rem 0.5rem; font-size: 0.8125rem; white-space: nowrap; }
.position-rows .segment input:checked + span { font-weight: normal; }   /* no bold on the picked option: bold made the controls wider and uneven from row to row */

/* Positions on persons.php, desktop (64rem+): the three groups in two columns - formal and special on the left, other on the
   right (Espen 2026-09-30). Each group is its own container (.position-group); on phones they just stack. */
.position-group + .position-group { margin-top: 2rem; }
@media (min-width: 64rem) {
  .position-groups { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "board other" "exclusive other"; column-gap: 3rem; row-gap: 2rem; align-items: start; }
  .position-group + .position-group { margin-top: 0; }
  .position-group-board { grid-area: board; }
  .position-group-other { grid-area: other; }
  .position-group-exclusive { grid-area: exclusive; }
}

/* Archived position (persons.php settings panel): a small muted label instead of the duration control; the unfinished holders list in the archive dialog */
.position-archived { color: var(--muted); font-size: 0.8125rem; padding: 0 0.5rem; white-space: nowrap; }
.holder-list { margin: 0 0 0 1.25rem; padding: 0; }
.dialog-actions button { white-space: nowrap; }
.position-card.is-archived, .position-card.is-archived a { color: color-mix(in srgb, var(--accent) 50%, var(--muted)); }   /* an archived position: its name still blue, but a muted blue - the accent mixed half with the muted grey (Espen) */

/* appointment.php: the note under the dates with an info symbol - the explanation box is placed under the whole note (not at the
   symbol) and is wider than the usual 16rem, since the text is long */
.note-info { position: relative; margin: 1em 0; }
.note-info .info { position: static; }
.note-info .info-text { width: min(100%, 30rem); max-width: 100%; }

/* appointment.php: the person's active appointments under the name - a little room before the form */
.active-label { margin: 0 0 0.4rem; font-weight: bold; }   /* the same look as the other labels on the page (grey from the .grey-labels rule above) */
.active-appointments { margin-bottom: var(--gap); }
/* the active appointments: phones - plain rows with the dates right aligned; from 40rem the dates line up in a column close to the
   names (an invisible two-column grid), with more room than before (Espen 2026-10-01) */
.active-appointments li { background: none; padding: 0.15rem 0; font-size: 0.8125rem; }
@media (min-width: 40rem) {
  .card-list.active-appointments { display: grid; grid-template-columns: max-content max-content; justify-content: start; column-gap: 2.5rem; row-gap: 0.3rem; }
  .active-appointments li { display: contents; }
}
.active-appointments .appointment-end { margin-right: 0; }   /* line up with the right edge of the fields below */
.active-appointments small { font-size: inherit; }   /* the dates as big as the position name (the row is already small) */

/* appointment.php, desktop (64rem+): the add/edit position panel does not need the full page width - narrower and centred (Espen 2026-10-01) */
@media (min-width: 64rem) {
  .panel-narrow { max-width: 44rem; margin-inline: auto; }
}

/* Board composition (organization.php, settings panel): part one = an open box with the selected positions as small cards (one per
   seat, the cross removes it); part two = the available positions as small outlined buttons that add a seat */
.board-label { margin: 0.75rem 0 0.4rem; font-size: 0.8125rem; color: var(--muted); }   /* the instruction above part one and the "available positions" label - smaller (Espen 2026-10-02) */
.board-selected { display: flex; flex-wrap: wrap; gap: var(--gap-sm); min-height: 4rem; padding: 0.75rem; border: 1px solid light-dark(#ccc, #444); border-radius: 0.5rem; align-items: flex-start; align-content: flex-start; }
.board-card { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.4rem 0.35rem 0.75rem; background: var(--bg); border-radius: 0.35rem; }
.board-card button, .board-available button { margin: 0; font: inherit; cursor: pointer; }
.board-card button { padding: 0 0.4rem; border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.board-card button:hover { color: var(--danger); }
.board-available { display: flex; flex-wrap: wrap; gap: var(--gap-sm); margin-bottom: var(--gap-sm); }
.board-available button { padding: 0.35rem 0.75rem; border: 1px solid light-dark(#b5b5b5, #555); border-radius: 0.35rem; background: none; color: var(--accent); }
.board-available button:hover:not(:disabled) { background: var(--bg); }
.board-available button:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.6; }

/* The board form without its own heading (the setup wizard): no extra room above it - the text above already gives the distance (Espen 2026-10-02) */
.board-form fieldset.no-legend { margin-top: 0; }
.board-form fieldset.no-legend .board-label:first-of-type { margin-top: 0; }

/* The note on the last wizard step when the member import was cancelled: small, normal text under the big one */
.setup-done .setup-note { font-size: 1rem; font-weight: normal; line-height: 1.6; }
.board-label + .board-label { margin-top: 0.4rem; }   /* the two paragraphs under the heading sit as one block of small text */
.board-label.board-intro { margin: 1rem 0 0.75rem; }   /* more room around the first paragraph under the heading (Espen 2026-10-02) */
.board-intro + .board-label { margin-top: 0; margin-bottom: 0.9rem; }   /* the instruction text under it: a little more room above the box of selected positions */

/* persons.php, the board panel: the check of the formal board composition against the registered board - one sentence under the heading */
.board-check { margin: 0 0 var(--gap); padding: 0.75rem 0.9rem; font-size: 0.8125rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--accent) 9%, var(--panel-bg)); }   /* in a box with a slight blue tint (Espen 2026-10-02) */
.board-check a { color: var(--accent); }

/* Navigation icon on the H1's line (Espen, 2026-10-24): X on a module's top page = close the module, arrow on a sub page = back. The <p> sits right before the H1 and takes no space itself; the round link hangs at its left edge, vertically centred on the H1's first line. Always a round panel-colour circle, lighter on hover. */
.nav-icon-link { position: relative; height: 0; margin: 0; }
.nav-icon-link > a { position: absolute; left: 0; top: calc((var(--h1-line) - var(--round-btn)) / 2); display: inline-flex; align-items: center; justify-content: center; width: var(--round-btn); height: var(--round-btn); border-radius: 50%; background: var(--panel-bg); color: var(--accent); transition: background-color 0.15s; }
.nav-icon-link > a:hover { background: light-dark(#f7f7f9, #2a2a2a); }
.nav-icon-link > a:focus-visible { outline-offset: 2px; }
.nav-icon-link > a .label-icon { width: 1.35rem; height: 1.35rem; margin: 0; }
.nav-icon-link ~ h1 { margin-top: 0; padding-inline: 3.25rem; }   /* room for the icon on both sides, so the H1 stays centred and never runs under it */
/* Module name above the H1 on sub pages (Espen, 2026-10-24): small, muted, centred like the H1, tight against it. */
.page-module { font-weight: 300; margin: 0 0 0.15rem; text-align: center; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: light-dark(#6b7280, color-mix(in srgb, #9ca3af 78%, transparent)); }
.page-module + h1 { margin-top: 0; }
.page-module:empty { min-height: var(--module-line); }   /* the top page of a module: the same height as one line of module name (0.7rem text, the body's line-height 1.75), so the H1 does not move when a sub page opens */

/* ===== Menu, header and navigation (logged-in pages) =====
   Three screen classes: phones (< 40rem), tablets (40rem - 64rem) and desktop (64rem+). Phones and tablets share the same layout and have the
   links in a hamburger menu; desktop has the links in the header. All of it built in Espen's 2026-10-24 session - see "Styling" in CLAUDE.md. */

/* The menu (nav_menu() in inc/init.php, js/menu.js): a round button and a full-screen panel that slides down from the top. The button stays
   above the panel and its hamburger turns 90 degrees while the menu is open. Closed = the panel is moved above the screen and visibility hidden,
   so it can't be tabbed into. The button sits in two places: on the H1's line (module pages, absolute, like .nav-icon-link) and in the header
   (.nav-menu-header, a grid item - see below). */
.nav-menu { position: absolute; right: 0; top: calc((var(--h1-line) - var(--round-btn)) / 2); z-index: 100; }
.nav-menu-button { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--round-btn); height: var(--round-btn); padding: 0; margin: 0; border: 0; border-radius: 50%; background: var(--panel-bg); color: var(--accent); cursor: pointer; transition: background-color 0.15s; }
.nav-menu-button:hover, .nav-menu.is-open .nav-menu-button { background: light-dark(#f7f7f9, #2a2a2a); }
.nav-menu-button .label-icon { width: 1.15rem; height: 1.15rem; margin: 0; transition: transform 0.47s ease; }
.nav-menu.is-open .nav-menu-button .label-icon { transform: rotate(90deg); }
.nav-menu-panel { position: fixed; inset: 0; z-index: 1; overflow-y: auto; padding: 5rem var(--gap-lg) var(--gap-lg); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(-100%); visibility: hidden; transition: transform 0.47s ease, visibility 0s linear 0.47s; }
.nav-menu.is-open .nav-menu-panel { transform: none; visibility: visible; transition: transform 0.47s ease, visibility 0s; }
html.menu-open { overflow: hidden; }   /* the page behind the panel does not scroll */
.nav-menu-panel a, .nav-menu-panel button, .nav-menu-panel form button[type="submit"] { display: flex; align-items: center; width: 100%; margin: 0; padding: 1rem 0.75rem; border: 0; border-bottom: 1px solid light-dark(#e0e0e3, #2a2a2a); border-radius: 0; background: none; color: inherit; font: inherit; font-size: 1.05rem; font-weight: normal; text-align: left; text-decoration: none; cursor: pointer; }
:root:root:root .nav-menu-panel form button[type="submit"] { font-weight: normal; }   /* beats the dark-theme "blue buttons heavier" rules (they match anything inside main) */
.nav-menu-panel form { margin: 0; }
.nav-menu-panel .label-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-right: 0.75rem; }
.nav-menu-panel a:hover, .nav-menu-panel button:hover, .nav-menu-panel form button[type="submit"]:hover { background: light-dark(rgb(255 255 255 / 55%), color-mix(in srgb, var(--text) 5%, transparent)); }   /* dark: a faint tint; light: a white veil - brighter, not darker */
@media (prefers-reduced-motion: reduce) { .nav-menu-panel, .nav-menu-button .label-icon { transition: none; } }

/* "Byt organisasjon": the header button (desktop) - looks like the profile / log out links - and the dialog it opens (js/org_switch.js) */
button.org-name { padding: 0.6rem 0.75rem; border: 0; background: none; color: inherit; font: inherit; font-weight: normal; cursor: pointer; }
button.org-name .label-icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.45em; }   /* 0.15em more than the other links: this drawing fills its whole box */
.org-dialog ul { list-style: none; margin: 0; padding: 0; }
.org-dialog li a { display: block; padding: 0.7rem 0.75rem; border-radius: 0.5rem; text-decoration: none; }
.org-dialog li a:hover { background: light-dark(#f7f7f9, #2a2a2a); }
.org-dialog li a:not([aria-current]) { color: var(--text); }
.org-dialog [aria-current] { font-weight: normal; }   /* the current organization: accent colour only, not bold */
.org-dialog h2:focus { outline: none; }   /* the title takes the focus when the dialog opens (autofocus) - it is not interactive, so no ring */
.org-dialog li a { display: flex; align-items: center; }
.org-dialog li a .label-icon { flex: none; margin-right: 0.6em; }   /* the check mark before the current organization */
.org-dialog li a:not([aria-current]) { padding-left: calc(0.75rem + 1em + 0.6em); }   /* the other rows start where the current one's text starts */

/* The organization's name in the header (span.org-title): grey, light - after the logo behind a vertical line on desktop, below it on phones and tablets */
.org-title { color: var(--muted); font-weight: 300; }

/* The logged-in header is a grid in every size (areas per screen size below); the logged-out header keeps the plain flex <nav> */
nav:has(.account) { display: grid; width: 100%; gap: var(--gap-sm); }   /* width: the header is a row at 40rem+, without it the nav would shrink to its content */

/* --- Phones (the base rules) ---
   The logged-in header is one grid: a single row the height of an H1 line (--h1-line) with the avatar icon (home page), the logo and the menu
   button centred in it - the round buttons are taller than the row and hang out equally above and below, exactly like the nav icon and menu
   button hang off the H1 on module pages - so they sit at the same x and y on every page. Below the row: the organization's name. The
   profile / log out / organization links are in the menu. Module pages hide the whole header. Mobile first: these are the defaults; tablets
   add the inset below and desktop (64rem+) undoes what does not apply there. */
nav:has(.account) { margin-top: var(--module-space); grid-template-columns: 1fr auto 1fr; grid-template-rows: var(--h1-line) auto; grid-template-areas: "profile logo menu" ". title ."; align-items: center; }   /* margin-top: the same space as the module name line above the H1 on module pages, so the home page's icons are at the same height as theirs */
nav:has(.account) .logo { grid-area: logo; justify-self: center; line-height: 1.2; position: relative; z-index: 101; }
nav:has(.account) .account, nav:has(.account) .org-name { display: none; }
.nav-menu.nav-menu-header { position: relative; right: auto; top: auto; grid-area: menu; justify-self: end; }
.profile-icon { grid-area: profile; justify-self: start; display: flex; align-items: center; justify-content: center; width: var(--round-btn); height: var(--round-btn); border-radius: 50%; background: var(--panel-bg); color: var(--accent); transition: background-color 0.15s; position: relative; z-index: 101; }
.profile-icon:hover { background: light-dark(#f7f7f9, #2a2a2a); }
.profile-icon .label-icon { width: 1.15rem; height: 1.15rem; margin: 0; }
.org-title { grid-area: title; justify-self: center; margin: 0; font-size: 0.975rem; letter-spacing: 0.08em; }
body:has(.nav-icon-link) > header { display: none; }
/* While the menu is open the whole top line stays visible, lifted above the panel (.nav-menu is z-index 100). The H1 spans the line and sits above the buttons, so clicks must go through it. */
.nav-icon-link > a { z-index: 101; }
.nav-icon-link ~ h1 { position: relative; z-index: 101; pointer-events: none; }
html { scrollbar-gutter: stable; }   /* the scrollbar's space is always reserved: locking the scroll for the open menu no longer widens the page, so the top line does not jump sideways, and short and long pages have the same width (Espen, 2026-10-24) */

/* --- Tablets (40rem and up) ---
   The round buttons are inset by the panels' border radius (0.75rem), and the menu items' icons line up with the avatar icon's symbol:
   page frame edge + 0.75rem inset + (2.5rem circle - 1.15rem symbol) / 2 */
@media (min-width: 40rem) {
  .nav-icon-link > a { left: 0.75rem; }
  .nav-menu { right: 0.75rem; }
  .profile-icon { margin-left: 0.75rem; }
  .nav-menu.nav-menu-header { margin-right: 0.75rem; }
  .nav-menu-panel { padding-inline: calc(max(0px, (100vw - var(--max)) / 2) + var(--gap) + (var(--round-btn) - 1.15rem) / 2); }
}

/* --- Desktop (64rem+) --- one row: [logo | organization name] ... [Byt organisasjon] [Min profil] [Logg ut]. The logo lines up with the nav icon's symbol
   (0.75rem inset + (2.5rem circle - 1.35rem symbol) / 2); the links on the right are inset by the panels' border radius (0.75rem). The menu and the
   avatar icon are gone, and the phone rules above are undone (same selectors as there, so these win). */
@media (min-width: 64rem) {
  .nav-menu, .profile-icon { display: none; }
  /* no "scrollbar-gutter: auto" here: the gutter stays reserved on desktop too, so pages with and without a scrollbar have the same width and nothing shifts (Espen 2026-10-29) */
  body:has(.nav-icon-link) > header { display: flex; }
  .nav-icon-link > a { z-index: auto; }
  .nav-icon-link ~ h1 { position: static; z-index: auto; pointer-events: auto; }
  nav:has(.account) { margin-top: 0; grid-template-columns: auto auto 1fr auto auto; grid-template-rows: auto; grid-template-areas: "logo title . org account"; }
  nav:has(.account) .logo { grid-area: logo; justify-self: start; line-height: inherit; position: static; z-index: auto; margin-left: calc(0.75rem + (var(--round-btn) - 1.35rem) / 2); }
  .org-title { grid-area: title; justify-self: auto; margin-left: 0.75rem; font-size: 1.05rem; letter-spacing: 0.06em; }
  .org-title::before { content: "|"; margin-right: 0.75rem; }
  nav:has(.account) .org-name { grid-area: org; justify-self: end; display: revert; }
  nav:has(.account) .account { grid-area: account; justify-self: end; display: flex; gap: var(--gap); padding-inline: 0.75rem; }
  /* More padding around the links (bigger tap targets); the outer edges get a matching negative margin so the text still lines up. */
  .account a, .account form button[type="submit"] { padding: 0.6rem 0.75rem; }
  .account a { margin-left: -0.75rem; }
  .account form button[type="submit"] { margin-right: -0.75rem; }
}

/* Last login on the profile page: starts where the text inside the fields starts (field padding 0.5rem + 1px border), a bit greyer than other notes (Espen 2026-10-27) */
.login-info { padding-left: calc(0.5rem + 1px); color: light-dark(#6f7581, #8b919d); }

/* Hover on the module boxes (org.php), only the ones that link somewhere: a faint grey tint and a very soft lift, mouse devices only (Espen 2026-10-27) */
@media (hover: hover) {
  .box:has(> a) { transition: background 0.15s, box-shadow 0.15s; }
  .box:has(> a):hover { background: light-dark(#f7f7f9, #242424); box-shadow: 0 2px 6px light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 25%)); }
}

/* The log out confirmation is short: narrower than the 32rem of other dialogs (Espen 2026-10-27) */
#logout_dialog { max-width: 20rem; }
dialog h2:focus { outline: none; }   /* a dialog title takes the focus when the dialog opens (tabindex=-1 + autofocus), so iOS draws no ring on the first button; the title is not interactive (Espen 2026-10-27, first on the org dialog) */

/* Hover on all buttons (Espen 2026-10-27): very subtle, mouse devices only, never on disabled buttons. Blue / red filled buttons shift 10% (darker in the
   light theme, lighter in the dark one); text and icon buttons get the faint grey the header links use. The ones that already had a hover (secondary,
   menu, round header buttons, board seats, box tiles) are left alone. */
@media (hover: hover) {
  main form button[type="submit"]:not(.dialog-actions *), main .primary-button, .danger-button, .icon-button, .dialog-actions button,
  .account a, .account form button[type="submit"], button.org-name { transition: background 0.15s; }
  main form button[type="submit"]:not(.dialog-actions *):hover:not(:disabled), main .primary-button:hover:not(:disabled) { background: light-dark(color-mix(in srgb, var(--accent) 90%, #000), color-mix(in srgb, var(--accent) 90%, #fff)); }
  .danger-button:hover:not(:disabled) { background: light-dark(color-mix(in srgb, var(--danger) 90%, #000), color-mix(in srgb, var(--danger) 90%, #fff)); }
  .icon-button:hover:not(:disabled) { background: light-dark(#f7f7f9, #2a2a2a); border-radius: 0.35rem; }
  :root dialog form .dialog-actions button:hover:not(:disabled), .dialog-actions button:hover:not(:disabled) { background: light-dark(#f7f7f9, #2a2a2a); border-radius: 0.35rem; }
  .account a:hover, .account form button[type="submit"]:hover, button.org-name:hover { background: light-dark(#f7f7f9, #2a2a2a); border-radius: 0.5rem; }
}

/* Login page (decided 2026-10-27): without a box, straight on the profile blue. Backup of the boxed version: /var/www/vhosts/referat.no/bak_login_blue/.
   To go back: copy login.php and css/style.css from there (header.php was copied too but is unchanged). */
body:has(.login-flat) { --login-white: #e4e8f0; background: #1d4ed8; color: var(--login-white); }   /* the "white" of this page: a little grey, not bright white (Espen 2026-10-27) */
body:has(.login-flat) .logo { color: var(--login-white); }
.login-flat label { color: var(--login-white); font-weight: normal; }   /* regular, not bold (Espen 2026-10-27) */
.login-flat input[type="email"], .login-flat input[type="password"] { background: var(--login-white); color: #111827; border: 1px solid transparent; }
.login-flat input:focus-visible, .login-flat button:focus-visible { outline: 2px solid var(--login-white); outline-offset: 2px; }
.login-flat .check input { appearance: none; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 0.25rem; background: var(--login-white); border: 1px solid transparent; }   /* drawn by us: like the fields when off, like the button (light blue, blue tick) when on (Espen 2026-10-27) */
.login-flat .check input:checked { background: #8fb3ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23123e9e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
body:has(.login-flat) main form button[type="submit"] { display: block; margin: 1.875rem auto 0; min-width: 9.1rem; height: 3.095rem; padding: 0 1.5rem; font-size: 0.9375rem; letter-spacing: 0.04em; background: #8fb3ff; color: #0f3489; font-weight: 400; }   /* centred, light blue, clearly bluer than the white fields */
body:has(.login-flat) main form button[type="submit"]:hover:not(:disabled) { background: #7da5fb; }
.login-flat .label-icon { color: #8fb3ff; }   /* the same light blue as the button (Espen 2026-10-27) */
body:has(.login-flat) > header { display: none; }   /* the logo is inside the form wrapper instead */
body:has(.login-flat) .gate-wrap-top { position: relative; margin: auto; padding: 0 1rem; }   /* the form is centred on the screen; the logo hangs above it */
.login-logo { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 2.5rem; text-align: center; font-size: 2rem; line-height: 1.2; text-decoration: none; }
.login-flat label:first-of-type { margin-top: 0; }
.login-messages { position: absolute; top: 100%; left: 0; right: 0; margin-top: 1.75rem; }
.login-messages .error-box { margin: 0; }
body:has(.login-flat) .error-box { color: #6e1010; border-color: #c62828; background: color-mix(in srgb, #c62828 35%, #fff); }   /* redder than the standard box so it stands out on the blue page, same in both themes (Espen 2026-10-27) */

/* Dialog buttons: more room around the text so the hover tint spreads out; the negative margin keeps the text exactly where it was (Espen 2026-10-27) */
:root dialog .dialog-actions button, :root dialog form .dialog-actions button[type="submit"] { padding: 0.6rem 1rem; margin: -0.35rem -0.5rem; }

/* iOS Safari zooms into a field whose text is under 16px when it gets focus (also on autofocus when a page opens): on touch devices the text inside
   fields is 16px, the rest of the site stays 0.875rem (Espen 2026-10-27). Specific selectors so no later input rule wins. */
@media (pointer: coarse) {
  :root input:not([type="checkbox"]):not([type="radio"]), :root select, :root textarea { font-size: 1rem; }
}

/* Cancel in a confirmation dialog: normal text colour, not blue (Espen 2026-10-28) */
:root dialog .dialog-actions [data-close-dialog], :root dialog form .dialog-actions button[value="cancel"] { color: var(--text); font-weight: 600; }

/* Login page: a narrower form on tablets and desktop (Espen 2026-10-29) */
@media (min-width: 34rem) { body:has(.login-flat) .gate-wrap-top { max-width: 21rem; } }

/* Public landing page: the blue of the login page, the logo larger and centred with "coming soon" under it (Espen 2026-10-29) */
body:has(.landing-flat) { --login-white: #e4e8f0; background: #1d4ed8; color: var(--login-white); }
body:has(.landing-flat) > header { display: none; }
body:has(.landing-flat) .logo { color: var(--login-white); }
main:has(.landing-flat) { display: flex; flex-direction: column; }
.landing-flat { margin: auto; padding: 0 1rem 6rem; text-align: center; }
.landing-logo { display: block; font-size: 4rem; line-height: 1.2; }
.landing-flat h1 { margin: 9rem 0 0; font-size: 2rem; font-weight: 200; color: var(--login-white); }