/* CSS @layer restructuring, 2026-08-18 (Basecamp "Fra Fizzy-gjennomgang:
   CSS-arkitektur"). A layer's priority is fixed by wherever its name is
   FIRST seen in the whole page's cascade — not by sand_ui/__sand_ui.css's
   own @layer statement, even though that reads as "the" declaration,
   because application.css (this file) loads before it and, without this
   line, its own @layer overrides {} block below would be the first
   mention of "overrides" — registering it dead LAST-declared-loses,
   i.e. lower priority than reset/base/etc, the opposite of intended.
   Declaring the full order here, first, is what actually makes it stick;
   sand_ui/__sand_ui.css's own copy of this line is now a harmless no-op
   repeat, kept there so its file still fully documents the order it
   uses. */
@layer reset, base, components, utilities, platform, theme, native, overrides;
@layer overrides {
/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

turbo-frame#modal .hide\@modal {
    display: none !important;
}

/* .stomn-brandmark and its children's sizing/color rules live in
   theme.css instead of here — see the comment there for why
   (a sand_ui default needs a specific selector shape + load order to
   actually be overridden, not just placed in this file). */

.header-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0.15rem;
}

/* KONTRAST (#10371227376, 05.10.2026). Brødsmulene lå på --text-500, som
   gir 2,36:1 i lyst og 2,98:1 i mørkt tema mot toppens egen bakgrunn.
   Kravet for 12,5px tekst er 4,5:1, så de var under i begge.

   MÅLT PÅ SELVE ELEMENTET, ikke mot sidebakgrunnen — toppen har sin egen:

                 lyst    mørkt
     --text-500  2,36    2,98   ← var her
     --text-600  3,56    5,40   ← holder bare i mørkt
     --text-700  6,26    8,93   ← holder i begge

   --text-600 ser ut som det minste inngrepet og er det ikke: det fikser
   mørk modus og lar lyst stå under kravet. Et halvt fiks på en kontrast
   er verre enn ingen, fordi tallet ser ut som om noen har sett på det. */
.header-breadcrumb {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
    font-size: 0.78rem;
    color: var(--text-700, #444);
}

/* KLIKKFLATE (#10371227376, 05.10.2026). Smulene var 18,7 px høye.
   WCAG 2.2 (2.5.8) krever 24 × 24 for et pekermål, og unntaket for en
   lenke «i en setning» gjelder dem ikke: de står i sin egen rad med et
   skilletegn mellom, ikke inne i brødtekst. Jeg skrev først i
   gjennomgangen at de falt under unntaket — det var feil.

   min-height og ikke padding: raden er flex med baseline-justering, og
   padding ville flyttet skriftlinja i forhold til skilletegnet. Teksten
   står der den sto; det er boksen rundt som vokser. */
.header-breadcrumb a.header-breadcrumb__crumb {
    color: var(--text-700, #444);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.header-breadcrumb a.header-breadcrumb__crumb:hover {
    color: var(--text-900, #111);
    text-decoration: underline;
}

/* GJELDENDE SIDE ETT TRINN MØRKERE ENN LENKENE. Den sto på --text-700 og
   skilte seg med både farge og vekt; nå som lenkene er der, ville den
   bare hatt vekten igjen. «Du er her» er hele poenget med en brødsmule,
   og den skal ikke måtte leses ut av en halv bokstavvekt. */
.header-breadcrumb__crumb--current {
    color: var(--text-900, #111);
    font-weight: 600;
}

/* Skilletegnet følger med nedover. Det sto på --text-400, som er nesten
   usynlig — og mellom brødsmuler som nå er mørke, ville ordene sett ut
   som om de løp sammen. Det skal fortsatt være underordnet, derfor ett
   trinn lysere enn smulene selv. */
.header-breadcrumb__sep {
    color: var(--text-600, #888);
}

@media (max-width: 700px) {
    .header-nav { gap: 1rem; }
}

} /* @layer overrides */

/* Torleiv, 2026-08-18 ("Mentions i vanlig tekstfarge og uten
   understrekning" — #10213415884): deliberately OUTSIDE any @layer.
   theme/10_style_guide_and_modals.css already sets
   `.person-mention { color: inherit; text-decoration: none; }` — a pill
   chip, not a blue link, per its own comment — but that rule lives
   inside @layer overrides like everything else in this app's own CSS.
   The lexxy gem's lexxy-content.css ships its own `a { color:
   var(--lexxy-color-link); text-decoration: underline; }` for rich-text
   bodies, and that file has no @layer of its own anywhere — CSS layer
   rules put ANY unlayered style ahead of EVERY named layer regardless of
   specificity or source order, so lexxy's plain `a` rule (lower
   specificity, 0-0-1) was still beating .person-mention's `.class` rule
   (0-1-0) inside every document body. Confirmed live: a real mention
   rendered with the underlined link color despite the "layered" rule
   above explicitly saying otherwise. An unlayered rule is the only way
   to actually outrank another unlayered rule — matching it here rather
   than moving .person-mention itself, since this is the one place in the
   whole file that specifically needs to fight lexxy's own CSS, not the
   rest of the app's cascade. */
.person-mention {
    color: inherit;
    text-decoration: none;
}