/* portal-polish.css — a purely additive visual layer.
   Loads AFTER portal.css and portal-utils.css, so it overrides them at equal
   specificity. Nothing here changes behaviour or layout logic: delete the one
   <link> in layout.php and the portal is exactly as it was.

   House rule unchanged: every rule is .pico-prefixed so it outranks Pico's
   own scoped selectors. No inline styles, no external fonts, no images —
   the CSP stays satisfied.

   Contents
     1. Palette          — accent with legible contrast, shared tints
     2. Page shell       — header bar (the nav ITEMS are left as they were)
     3. Headings         — section titles that read as titles
     4. Cards            — each section becomes a panel
     5. Tables           — quieter head, aligned numbers, row hover
     6. Chips & buttons  — the jump-nav and the action row
     7. Badges & notes   — small definition tweaks
     8. Empty states     — .empty
     8b. Lisainfo failid — the file list and its upload form
     9. Login            — the narrow ceremony pages
    10. Dark mode
    11. Anchor landing offset — hash jumps clear the sticky bar
*/

/* ── 1. Palette ─────────────────────────────────────────────────────────────
   #7290B2 is the parent site's blue (nali.css) and worth keeping as the
   family colour, but as TEXT it lands at 3.3:1 on white — under the 4.5:1
   that WCAG AA asks of body-size text, and it is what makes the portal read
   as faded. So: the deep tone below carries anything with text on it, and
   #7290B2 stays on as the decorative tint (rules, accent bars, hovers). */
.pico {
  --sk-accent:        #41678f;   /* 5.9:1 on white — links, buttons */
  --sk-accent-deep:   #31527d;   /* 8.2:1 — hover/active */
  --sk-accent-tint:   #7290B2;   /* the old blue, decorative only */
  --sk-accent-wash:   #eef3f8;   /* section head / hover fills */
  --sk-surface:       #ffffff;   /* card face */
  --sk-page:          #f6f8fa;   /* page behind the cards */
  --sk-line:          #dfe5ec;   /* hairlines */
  --sk-line-strong:   #c8d3e0;

  --sk-quiet:         #dbe6f2;   /* level-2 button fill */
  --sk-quiet-hover:   #c9dcee;
  --sk-quiet-border:  #bdd0e5;

  --pico-primary:                  var(--sk-accent);
  --pico-primary-hover:            var(--sk-accent-deep);
  --pico-primary-background:       var(--sk-accent);
  --pico-primary-border:           var(--sk-accent);
  --pico-primary-hover-background: var(--sk-accent-deep);
  --pico-primary-hover-border:     var(--sk-accent-deep);
  --pico-primary-focus:            rgba(65, 103, 143, 0.35);

  /* The three button levels the portal already uses, retoned but not
     renumbered — see the block above section 6.
       1  default        solid accent, white text          (Esita kinnitamiseks)
       2  .secondary     solid tint, accent text           (Salvesta mustandina)
       3  .secondary.outline  no fill, slate               (Tühista, Kustuta)
     Only level 2 moves: Pico's slate #525f7a is DARKER and heavier than the
     primary next to it, which inverts the hierarchy. A light tint of the same
     blue keeps it a filled button — so it stays clearly apart from level 3 —
     while reading as the quieter of the pair.
     Level 3 keeps Pico's neutral slate (--pico-secondary), untouched. */
  --pico-secondary-background:       var(--sk-quiet);
  --pico-secondary-border:           var(--sk-quiet-border);
  --pico-secondary-inverse:          var(--sk-accent-deep);
  --pico-secondary-hover-background: var(--sk-quiet-hover);
  --pico-secondary-hover-border:     var(--sk-accent-tint);

  --pico-border-radius: 0.5rem;
}

/* NB body itself carries class="pico", so this is `body.pico`, not `.pico body`. */
body.pico {
  background: var(--sk-page);
}

/* Links: underline only on hover keeps dense tables calm, but never for
   links inside running text, which need the underline to be findable. */
.pico a {
  transition: color .12s ease, background-color .12s ease;
}

/* ── 2. Page shell ──────────────────────────────────────────────────────────
   The nav is currently a bare row of links on the page background, so the
   portal opens with nothing that reads as a header. A surface, a hairline and
   sticky positioning cost nothing and give the page a top edge. */
.pico > nav {
  position: sticky;
  top: 0;
  z-index: 20;
  /* One ordinary block gap below the bar — the same --pico-spacing that sits
     between every other pair of blocks on the page, so the first element (the
     "Tagasi" link, or the deadline callout) is not pushed further from the bar
     than the callout is from the buttons under it. */
  margin-bottom: var(--pico-spacing);
  padding-block: 0.35rem;
  background: var(--sk-surface);
  border-bottom: 1px solid var(--sk-line);
  /* The bar spans the window; its CONTENTS still have to sit on the same column
     as everything else, so the padding below re-creates the centring that
     max-width was doing. */
  max-width: none;
  width: 100%;
  padding-inline: var(--pico-spacing);
}

/* Aligning the bar's contents with the content column.
   Above 576px Pico's .container drops its padding entirely and centres by
   max-width alone, so a full-bleed nav has NO inset left at all — which is why
   "Sportkoer portaal" ended up against the window edge. These mirror Pico's own
   container breakpoints (510 / 700 / 950 / 1200 / 1450) and put the wordmark
   exactly where the cards, the callout and the chips start. Update them only if
   you ever change Pico's container scale. */
@media (min-width:  576px) { .pico > nav { padding-inline: max(0px, calc((100% -  510px) / 2)); } }
@media (min-width:  768px) { .pico > nav { padding-inline: max(0px, calc((100% -  700px) / 2)); } }
@media (min-width: 1024px) { .pico > nav { padding-inline: max(0px, calc((100% -  950px) / 2)); } }
@media (min-width: 1280px) { .pico > nav { padding-inline: max(0px, calc((100% - 1200px) / 2)); } }
@media (min-width: 1536px) { .pico > nav { padding-inline: max(0px, calc((100% - 1450px) / 2)); } }

/* The same negative-margin trick that pushed the jump chips off the column is
   on the nav's own lists, plus a matching padding on each <li>. Both exist so a
   bare nav link's TEXT lands on the edge; here that leaves the wordmark 9.5px
   short on the left and the logout button 9.5px short on the right. Zeroed only
   at the two ends of each list, so the gaps between the links are untouched. */
.pico > nav > ul:first-of-type,
.pico > nav > ul:last-of-type { margin-inline: 0; }
.pico > nav > ul > li:first-child { padding-left: 0; }
.pico > nav > ul > li:last-child  { padding-right: 0; }

/* The nav ITEMS are deliberately left alone — Pico's links plus
   portal-utils.css's bold-and-underlined aria-current marker. An earlier draft
   turned them into rounded pills with a tinted current item, which is exactly
   what .section-chips looks like; two different components speaking the same
   visual language, stacked one above the other, made the header read as another
   row of chips. Only the bar around them is new.
   Nothing to add here: with the pill rules gone, the original styling applies
   again by itself. */

/* Bar height. Nothing here restyles a menu item — it removes three pieces of
   padding that only ever existed because the nav was a static block at the top
   of the page. Now that the bar is sticky it costs that height on every screen,
   forever: 112px of a laptop's 700-odd. This brings it to 68px on desktop and
   83px on a phone, where the 44x44 hamburger sets the floor and is left alone.

   1. The logout <form> carries Pico's form margin.
   2. The logout button carries a 19px bottom margin. Pico actually tries to
      remove this — `.pico nav li button {margin-bottom: 0}` — but the button is
      <button type="submit">, so `.pico [type=submit]` (an attribute selector,
      and therefore the more specific of the two) puts it back. Naming
      [type=submit] here is what beats it.
   3. Pico pads nav <li>s by --pico-nav-element-spacing-vertical (19px each
      side). A third of that is plenty once the bar has its own padding.

   Delete this block to get the original 112px header back. */
.pico > nav form {
  margin: 0;
}
.pico > nav button,
.pico > nav [type="submit"] {
  margin-bottom: 0;
}
.pico > nav > ul > li {
  padding-block: .35rem;
}
/* Phones had one more of these hiding in the hamburger: the <details> that
   holds the menu carries Pico's `details {margin-bottom: var(--spacing)}`, 16px
   of dead space under a 44x44 button that nothing sits below. It was the single
   tallest thing in the mobile bar. Removing it leaves the button itself as the
   floor — 44px is the smallest comfortable touch target, so the bar cannot get
   shorter than this without making the menu harder to hit. .actions and .faq
   keep their own details spacing; this is scoped to the nav. */
.pico > nav .nav-menu {
  margin-bottom: 0;
}
/* The <summary> carries a bottom margin of its own, and it does two bad things.
   Closed, it collapses out of the <details> and pads the bar; OPEN, it stops
   collapsing, so the whole header jumps 16px taller the moment you tap the
   hamburger. It also pushed the dropdown 20px below the button instead of the
   4px portal-utils.css asks for. */
.pico > nav .nav-menu summary {
  margin-bottom: 0;
}
/* And the panel itself was hanging 8px past the button. portal-utils.css sets
   `margin: .25rem 0 0` on it, but this <ul> is both the first AND the last list
   inside the <details>, so Pico's `nav :where(ol,ul):first-of-type` and
   `:last-of-type` rules both match it and both outrank that margin — the same
   negative-margin trick as the jump chips, one level deeper. */
.pico > nav .nav-menu > ul {
  margin-inline: 0;
}

/* And the logout button itself: portal.css gives every desktop button
   min-width: 10rem, which makes this one 190x59. Sized to its label it is 41px
   and stops dominating the bar. */
.pico nav ul.desktop-only form button {
  min-width: 0;
  padding: .35rem .9rem;
  font-size: .9rem;
}

.pico main.container {
  padding-top: 0;
  padding-bottom: 4rem;
}

/* ── 3. Headings ────────────────────────────────────────────────────────────
   Section titles currently sit at Pico's h2 with a plain <p> under them. The
   accent tick and the tightened subtitle make the pair read as one unit. */
.pico main hgroup {
  margin-bottom: 1rem;
}
/* No accent bar here. The portal already uses a left accent edge for callouts,
   the three feedback notes, the open FAQ item and the revealed action forms —
   putting one on section headings too would make the device meaningless. Size,
   weight and the card edge separate the sections instead. */
.pico main section > hgroup > h2 {
  margin-bottom: .25rem;
  font-size: 1.2rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pico main section > hgroup > p {
  margin: 0;
  color: var(--pico-muted-color);
  font-size: .9rem;
}

/* The page's own name — visible on phones only (portal.css hides it above
   768px). Give it the weight of a real page title while it is on screen. */
.pico .page-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ── 4. Cards ───────────────────────────────────────────────────────────────
   Every top-level section becomes a panel. On the dashboard this turns five
   run-together lists into five things; on the detail pages it does the same
   for "Katse andmed", "Tegevused", "Ajalugu". */
.pico main > section {
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--pico-border-radius);
}
.pico main > section + section {
  margin-top: 1.25rem;             /* was 2.5rem — the card edge does the work */
}
.pico main > section > *:last-child {
  margin-bottom: 0;
}
/* Pico wraps tables in <figure> for horizontal scroll; zero its stray margin
   so the table sits flush with the card's own padding. */
.pico main > section > figure {
  margin: 0;
}

/* ── 5. Tables ──────────────────────────────────────────────────────────────
   Column headers currently look like body text in bold. Made small, spaced
   and muted they recede, which is what a header row should do — the rows are
   the content. Numerals are aligned so date columns line up. */
/* A real bug, not a polish item: Pico v1 gave <figure> `overflow-x: auto`,
   v2 does not (`figure{display:block;margin:0;padding:0}` is the whole rule).
   So on a phone every wide table pushes the PAGE sideways instead of scrolling
   inside its own box — the dashboard is ~130px wider than a 390px screen, and
   the Staatus badges sit off the edge. This is the fix. */
.pico figure {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pico table {
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.pico table thead th {
  padding-block: .5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  border-bottom: 1px solid var(--sk-line-strong);
  white-space: nowrap;
}
.pico table tbody td {
  padding-block: .6rem;
  border-bottom: 1px solid var(--sk-line);
}
/* The first data cell of a list row is a date on every list in the portal;
   keeping it on one line stops "12.09.2026" breaking after the first dot.
   Only td — the .kv detail tables use th[scope=row] there and are untouched. */
@media (min-width: 768px) {
  .pico table tbody td:first-child { white-space: nowrap; }
}
/* Row-header cells (.kv detail tables use th[scope=row] for the label column)
   get their rule from Pico, not from the td rule above — so clearing the last
   row on td alone left a half-width line under the final row, spanning the
   label column only. Both cell types, one rule, same colour. */
.pico table tbody th[scope="row"] {
  border-bottom: 1px solid var(--sk-line);
}
.pico table tbody tr:last-child td,
.pico table tbody tr:last-child th {
  border-bottom: 0;
}
/* Pico's .striped zebra plus a hover row: the hover is what actually helps
   when a row is read across six columns. */
.pico table.striped tbody tr:hover > * {
  background: var(--sk-accent-wash);
}
/* The trial name is the row's link and its subject — let it carry the weight. */
.pico table tbody td a {
  font-weight: 500;
  text-decoration: none;
}
.pico table tbody td a:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ── 6. Chips & buttons ─────────────────────────────────────────────────────
   The jump-nav chips are the first thing under the page title; giving them
   the accent makes them read as controls rather than as a sentence. */
/* Alignment, not taste: Pico pulls the first <ul> in a <nav> and its links left
   by --pico-nav-element-spacing-horizontal (~9.5px each, ~19px in total) so that
   a plain nav link's TEXT lines up with the content edge. .section-chips is not
   plain links though — each one is a bordered pill, and for a box it is the
   BORDER that should sit on the column edge, not the label inside it. The
   result today is that the first chip hangs 19px further left than the callout,
   the buttons, the tables and every section above and below it.
   portal-utils.css already tries to zero this, but Pico's selector carries
   :first-of-type and so outranks it; nav.section-chips ties on specificity and
   wins by loading later. */
.pico nav.section-chips > ul {
  margin-left: 0;
}
.pico .section-chips > ul > li > a {
  margin-left: 0;
}

.pico .section-chips a {
  padding: .35rem .85rem;
  font-size: .875rem;
  color: var(--sk-accent-deep);
  border-color: var(--sk-line-strong);
  transition: background-color .12s ease, border-color .12s ease;
}
.pico .section-chips a:hover,
.pico .section-chips a:focus-visible {
  background: var(--sk-accent-wash);
  border-color: var(--sk-accent-tint);
}

/* NB no font-weight here on purpose. A heavier button label costs a few pixels
   of text width, which is enough to break "Uus võistlusetaotlus" mid-word in a
   half-width button on a phone. Estonian compounds leave no slack — Pico's
   default weight stays. */
.pico button,
.pico [type="submit"],
.pico [role="button"] {
  transition: background-color .12s ease, border-color .12s ease,
              box-shadow .12s ease;
}
@media (min-width: 768px) {
  /* portal.css sets 10rem; a little narrower stops "Loo kutse" from looking
     like a banner while still reading as a proper button. */
  .pico button:not([role="group"] *, main.narrow *),
  .pico [type="submit"]:not([role="group"] *, main.narrow *),
  .pico [role="button"]:not([role="group"] *, main.narrow *) {
    min-width: 8.5rem;
  }
}
/* The pair of "new application" buttons on the dashboard sits above the jump
   chips, so it needs a little air under it. */
.pico .button-row {
  margin-bottom: 1.25rem;
}
/* Phones: the pair shares the width, so each label gets about 143px. That is
   under "Uus võistlusetaotlus" at Pico's default size, and the fallback is an
   ugly mid-word break. Slightly smaller text and tighter side padding buy the
   ~35px that keeps every label whole. */
@media (max-width: 767px) {
  .pico .button-row > [role="button"] {
    padding-inline: .55rem;
    font-size: .95rem;
  }
}

/* Level 2 needs no rule of its own — the five --pico-secondary-* tokens in
   section 1 retone it everywhere at once: Salvesta mustandina (apply, change,
   emv), Uus võistlusetaotlus (dashboard), Saada muutmisele (review). Level 3
   (.secondary.outline: Tühista, Lükka tagasi, Kustuta, Logi välja) reads from
   --pico-secondary, which is deliberately left alone. */

/* ── 7. Badges & notes ──────────────────────────────────────────────────────
   The status pills are already good. A hairline derived from their own text
   colour gives each one an edge, which matters most for the pale ones on the
   white card. */
.pico .badge {
  padding: .2rem .6rem;
  line-height: 1.35;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* .callout gets the same card face as everything else, and a radius on the
   three sides that are not the accent bar. */
.pico .callout,
.pico .error,
.pico .warning,
.pico .success {
  border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0;
}
.pico .callout {
  background: var(--sk-accent-wash);
  border-left-color: var(--sk-accent-tint);
}

/* Links that leave the portal: .ext (the trial's page on the public site,
   set in trial_display.php's public_trial_link()). The arrow is drawn here
   rather than typed into the markup, so the visible label can stay two words
   and every outbound link is marked the same way.

   A step below its surroundings on purpose. It sits in a heading line beside
   the portal's own links, and it is the one link on the page that takes the
   reader OUT of the portal — the least likely thing they came to click. The
   size drop says "aside" without touching the colour, so it still reads as a
   link and keeps its contrast.

   nowrap keeps the arrow from ending up alone on the next line; inline-block
   plus text-decoration:none keeps the glyph out of the underline — the label
   is the link, the arrow is a mark on it. */
.pico a.ext {
  font-size: .875em;
  white-space: nowrap;
}
.pico a.ext::after {
  content: "\2197";
  display: inline-block;
  margin-left: .2em;
  font-size: .9em;
  line-height: 1;
  text-decoration: none;
}

/* Lisainfo failid (trial_files.php's render_trial_files). A list of files,
   not a table: each row is a name, a size and — for the club's own view — a
   delete button, and a table would give three columns to two of them.

   The delete button is a form of its own per row (one POST, one file), so the
   row is a flex line and the form inside it must not add a block of its own. */
/* A rule above the heading: this block is a different subject from the form
   (or the data table) that ends right above it, and without a divider the
   heading read as one more row of that form. */
.pico .files-title {
  margin: 1.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sk-line);
  font-size: 1rem;
  font-weight: 650;
}
/* The line under the heading: what these files are for. Pulled up close to
   the heading (which carries .75rem of its own bottom margin) so the two read
   as one unit — heading plus its subtitle — rather than as a heading and a
   stray sentence above the list. */
.pico .files-hint {
  margin: -.5rem 0 .75rem;
  font-size: .8rem;
}
.pico ul.filelist {
  margin: 0 0 .75rem;
  padding: 0;
  list-style: none;
}
.pico ul.filelist > li {
  /* list-style on the <li>, not only the <ul>: portal.css marks list items in
     main with a square, and that wins over a list-style on the parent. */
  list-style: none;
  padding: .5rem 0;
  border-bottom: 1px solid var(--sk-line);
}
.pico ul.filelist > li:last-child {
  border-bottom: 0;
}
/* Line 1: the name, then its delete button directly after it. Pinned to the
   right edge the button floated free of the file it belongs to — on a wide
   screen with a short name there were 700px of nothing between them, and the
   eye had to travel back to check which file it would delete. Next to the
   name it reads as that file's button.
   min-width:0 plus anywhere: a long name wraps INSIDE its own column rather
   than pushing the button out of the card; wrap lets the button drop to its
   own line when even that is not enough. */
.pico ul.filelist .file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
}
.pico ul.filelist .file-row > a {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Line 2: the details, quiet and out of the way. */
.pico ul.filelist .file-meta {
  margin: .1rem 0 0;
  font-size: .8rem;
}
/* The row's own delete form: no margins, and the button shrunk to the row. */
.pico ul.filelist form {
  margin: 0;
  flex: 0 0 auto;
}
/* Sized to its label. The desktop rule in section 6 gives every button a
   min-width of 8.5rem so the page's real actions read as buttons; a per-row
   Kustuta is not one of those, and at 8.5rem it outweighed the file name
   beside it. The upload button keeps the house width — it IS an action, just
   a level-2 one.
   The selector reaches through .file-row on purpose: section 6 matches this
   button as `.pico [type="submit"]:not(…)`, and an attribute selector counts
   as a class, so `.pico ul.filelist form button` LOSES to it. Three classes
   beat three classes plus fewer elements. */
.pico ul.filelist .file-row form button {
  margin: 0;
  padding: .15rem .6rem;
  min-width: 0;
  width: auto;
  font-size: .8rem;
}
/* The upload form sits under the list: one row (choose, then upload) and two
   quiet lines under it. */
.pico form.fileform {
  margin: 0;
}
/* The row. min-width:0 on the input is what stops a long file name from
   pushing the button off the edge — a flex item's default min-width is its
   content, and file names in this portal are things like
   "EKL-koerte-koolitusalade-eksamite-ja-voistluste-eeskiri.pdf". It wraps to
   its own line below ~34rem instead of squeezing. */
.pico form.fileform .fileform-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
/* Content width, NOT grow: the input filling the row pushed the button to the
   far edge, which is exactly what it does to the delete buttons above. The
   pair reads as one action when it stays together. max-width keeps a long
   chosen file name from stretching the row past the card on a narrow screen;
   the row wraps instead. */
/* The input itself is out of sight but NOT out of the tab order: same clip
   technique portal.css uses for .page-title on desktop. display:none would
   take it off the keyboard and out of the accessibility tree, and the label
   would have nothing to operate. */
.pico form.fileform .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The label IS the button now — the same level-2 tokens as "Laadi üles"
   beside it, so the pair matches by construction rather than by my copying
   pixels off the native control. */
.pico form.fileform .file-choose {
  flex: 0 0 auto;
  margin: 0;
  padding: .75rem 1rem;
  border: 1px solid var(--sk-quiet-border);
  border-radius: var(--pico-border-radius);
  background: var(--sk-quiet);
  color: var(--sk-accent-deep);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
  user-select: none;
}
.pico form.fileform .file-choose:hover {
  background: var(--sk-quiet-hover);
  border-color: var(--sk-accent-tint);
}
/* Keyboard: the focus ring belongs on the label, since the input it lives on
   is the invisible one. */
.pico form.fileform .file-input:focus-visible + .file-choose {
  box-shadow: 0 0 0 3px var(--pico-primary-focus);
}
/* The chosen file's name (or "Faili pole valitud") — a status, not a label,
   so a step down like the hint under it. */
.pico form.fileform .file-chosen {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--pico-muted-color);
  font-size: .875rem;
}
/* Sized to its label, not to the house min-width of 8.5rem. The control to
   its left is the browser's own "Vali fail", which is sized to ITS label and
   cannot be restyled; a 153px button beside a 90px one looked like two
   different kinds of thing. Same reach-through-a-class trick as the delete
   button above — section 6 matches these as [type="submit"]. */
.pico form.fileform .fileform-row button {
  width: auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}
.pico form.fileform .file-hint {
  margin: .4rem 0 0;
  font-size: .8rem;
}

/* ── 8. Empty states ────────────────────────────────────────────────────────
   Add class="empty" alongside class="muted" on the "nothing here" lines
   (dashboard.php's trial_section(), authority.php, …). A bordered plate reads
   as "this list is empty" instead of as a stray sentence.

   Outline only, deliberately NO fill. Filling it with --sk-page put the same
   grey inside the card as the page shows between the cards, so a column of
   empty sections (authority.php and calendarproject.php can be all-empty) read
   as stripes: page, card, plate, card, page. The dashed edge alone still says
   "a list would be here", which is the whole job, and the card stays one
   surface. Half the height too, which counts when four of them stack.
     Quieter still: drop the border and the padding to `.35rem 0`.
     Or, to keep an empty section the same silhouette as a full one, swap the
     border for `border-top: 1px solid var(--sk-line)` and left-align it. */
.pico .empty {
  margin: 0;
  padding: .7rem 1rem;
  text-align: center;
  font-size: .875rem;
  color: var(--pico-muted-color);
  background: transparent;
  border: 1px dashed var(--sk-line);
  border-radius: var(--pico-border-radius);
}

/* ── 9. Login and the other narrow pages ────────────────────────────────────
   main.narrow currently opens with an h1 and a form on the page background.
   A framed card, a mark and a line of purpose make it look like a front door. */
.pico main.narrow {
  padding-top: 6vh;
}
.pico main.narrow .brand {
  margin-bottom: 1.25rem;
}
.pico main.narrow .brand h1 {
  margin-bottom: .25rem;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.pico main.narrow .brand p {
  font-size: .9rem;
}
.pico main.narrow > article {
  margin: 0;
  padding: 1.75rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--pico-border-radius);
  box-shadow: 0 1px 2px rgba(16, 32, 52, .04),
              0 8px 24px -12px rgba(16, 32, 52, .18);
}
.pico main.narrow label {
  font-size: .9rem;
  font-weight: 500;
}
.pico main.narrow form > p {
  margin-top: 1rem;
  margin-bottom: 0;
  text-align: center;
}

/* ── 10. Dark mode ──────────────────────────────────────────────────────────
   Same structure, re-toned. The accent lightens (a deep blue on a dark page
   is unreadable) and the surfaces separate by lightness rather than by line. */
@media (prefers-color-scheme: dark) {
  .pico {
    --sk-accent:      #9fbbd9;     /* 9:1 on Pico's dark page */
    --sk-accent-deep: #bcd2e9;
    --sk-accent-tint: #7290B2;
    --sk-accent-wash: #1e2836;
    --sk-surface:     #191e27;
    --sk-page:        #11151c;
    --sk-line:        #2a323e;
    --sk-line-strong: #3a4453;

    --sk-quiet:        #243244;
    --sk-quiet-hover:  #2c3d52;
    --sk-quiet-border: #33455c;

    --pico-primary-background:       #41678f;
    --pico-primary-border:           #41678f;
    --pico-primary-hover-background: #517aa5;
    --pico-primary-hover-border:     #517aa5;
    --pico-primary-focus:            rgba(159, 187, 217, .35);
  }
  .pico main.narrow > article {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3),
                0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

/* ── Phones ─────────────────────────────────────────────────────────────────
   Cards keep their face but lose most of their inset, so a six-column table
   is not squeezed into a 1.25rem-narrower box on a 360px screen. */
@media (max-width: 767px) {
  .pico main > section {
    padding: 1rem .85rem .9rem;
  }
  .pico main > section + section {
    margin-top: 1rem;
  }

  /* Every pixel of cell padding is a pixel the Staatus column loses to the
     horizontal scroll. Tighter gutters, and the outer cells sit flush with the
     card's own padding, which is enough to bring a three- or four-column list
     back inside a 390px screen. */
  .pico table th,
  .pico table td {
    padding-inline: .4rem;
  }
  .pico table tr > :first-child { padding-left: 0; }
  .pico table tr > :last-child  { padding-right: 0; }
}

/* ── 11. Anchor landing offset ──────────────────────────────────────────────
   Companion to the sticky bar in section 2, and a bug that arrived WITH it.
   The jump chips on the dashboards (.section-chips -> #tulevased, #toimunud,
   ...) and the in-page links on faq.php / apply.php target a <section> or a
   heading. A hash jump aligns that target with the TOP OF THE VIEWPORT — which
   is exactly where the sticky header now sits, so the bar covers the first
   ~68px of the card you jumped to: its top border, and usually the <h2> too.
   Before section 2 the nav scrolled away and the same jump landed cleanly.

   scroll-padding-top on the scroll container is the whole fix. It is not a
   nudge applied per link: the browser treats the top of the scrollport as
   starting that far down for EVERY scroll-into-view in the document, so the
   chips, faq.php's cross-references, browser find-in-page and the "jump to the
   first invalid field" scroll on a failed form submit are all corrected at
   once — no per-target scroll-margin-top to remember on the next new anchor.

   <html> is the scroll container, so this one rule cannot carry the file's
   .pico prefix. Safe: Pico sets no scroll-padding, so nothing is being
   out-ranked here.

   Sizing it. There is a WINDOW here, not a single right answer, and the first
   pass overshot the top of it — the offset was large enough that the BOTTOM
   EDGE of the card above cleared the bar and peeked in over the one you jumped
   to, most visibly on a phone.
     floor    the bar's height        — below it the bar clips the card
     ceiling  bar height + card gap   — above it the previous card shows
   The gap is section 4's `main > section + section` margin: 20px desktop,
   16px phone. So aim a few px above the floor, never near the ceiling.

   The bar measures ~58px on desktop and ~67px on a phone — added up from
   section 2 rather than guessed: nav padding-block .35rem x2, li padding-block
   .35rem x2, and the tallest child, which is the 34.8px logout button on
   desktop and the 44px hamburger on the phone, plus the 1px bottom border. NB
   the phone bar is the TALLER of the two, so the phone value is the larger one;
   section 2's prose still quotes 112 -> 68/83, which was measured before the
   button and <summary> margins came off and now reads high.

   Breakpoint matches .desktop-only/.mobile-only. Re-derive both numbers if the
   bar's padding or its tallest child ever changes; a 0.25rem nudge is 4px. */
html {
  scroll-padding-top: 4rem;        /* 64px = ~58 bar + 6, ceiling 78 */
}
@media (max-width: 767px) {
  html {
    scroll-padding-top: 4.5rem;    /* 72px = ~67 bar + 5, ceiling 83 */
  }
}