/*==================================================================
//
//  c2/c2.css
//
//  C2 – Fordonsappens utseende på webben: FORMEN. Färgerna ligger i
//  c2/light.css och c2/dark.css. Namnet är detsamma som appens
//  nuvarande design, C2, och det är samma design.
//
//  Laddas av layout/head.php på VARJE sida, efter mallens base.css.
//
//  HÄR FINNS INGA FÄRGER, precis som i base.css. Varenda färg
//  hämtas som var(--color-...) ur temat. Söker du på ”#” i den här
//  filen ska det inte ge en enda träff.
//
//
//  VARFÖR EGNA FILER OCH INTE ÄNDRINGAR I MALLENS
//
//  base.css och theme/*.css är MALLENS filer och uppdateras från
//  Webling. Allt som är Fordonsappens eget ligger därför här, och
//  skriver över mallen genom att laddas efter den - en
//  `git merge upstream` rör aldrig en fil vi skrivit i. Samma skäl
//  som att appen har sin egen Color.kt i stället för att peta i
//  Material-temat.
//
//
//  BREDDEN: SMAL SPALT ÖVERALLT UTOM I ADMINISTRATIONEN
//
//  Toppraden, innehållet och sidfoten följer mallens --width-page.
//  Administrationsdelen är bred (layout/admin-head.php). Startsidan
//  är 'wide' i routes.php bara för att banden ska kunna lägga sin
//  bakgrund kant i kant - toppraden, sidfoten och texten i banden
//  hålls i samma smala spalt som på alla andra sidor, se avsnitt 1.
//
//
//  STARTSIDAN BYGGER OM APPENS YTA
//
//  Fordonskortet med nedräkningsringen, statusraden,
//  besiktningsraden, bottenmenyns fyra flikar - i HTML och inte som
//  skärmbilder. Den som laddat ner appen ska känna igen sig på en
//  sekund, och den som inte gjort det ska få se vad hen får.
//
//  Ordning i filen:
//    1. Bredden, och ramen kring startsidans band
//    2. Hjältebandet och telefonen
//    3. Appkomponenterna (fordonskort, ring, status, skylt) och
//       statusfärgerna
//    4. Banden därunder
//    5. Tabeller och paneler
//    6. Katalogen
//    7. Felrapporterna
//    8. Formulären
//    9. Guiderna
//   10. Sidfoten
//   11. Mindre skärmar
//
==================================================================*/


/*------------------------------------------------------------------
//
//	1. Bredden, och ramen kring startsidans band
//
//  Startsidan är 'wide' i routes.php, alltså tar .site-main hela
//  fönstret. Varje BAND får då lägga sin egen botten kant i kant,
//  medan toppraden, sidfoten och varje bands INNEHÅLL hålls i
//  sajtens vanliga smala spalt - samma som på alla andra sidor.
//
------------------------------------------------------------------*/

/*  Den smala spalten, fångad på :root.

    Mallens --width-page är spaltens bredd, men en 'wide'-sida skriver
    över den med 100% på <body>. Variabeln här räknas ut på :root,
    innan den överskrivningen, och ärvs sedan ned som ett färdigt mått -
    så måttet står kvar på ETT ställe (base.css) även för de delar av
    en bred sida som ska vara smala.

    --c2-text är bredden på texten INNANFÖR spalten: spalten minus
    toppradens och innehållets sidopadding, så att en bands text
    linjerar med logotypen ovanför. */
:root {
    --c2-page: var(--width-page);
    --c2-inset: var(--space-5);
    --c2-text: calc(var(--c2-page) - 2 * var(--c2-inset));
}

.page--landing .site-header,
.page--landing .site-footer {
    max-width: var(--c2-page);
}

/*  ⚠ SIDOPADDINGEN TAS BORT, den räknas inte bort.

    Första försöket gav .lp en negativ marginal lika stor som
    .site-main:s padding. Det höll precis till första brytpunkten -
    base.css minskar paddingen till --space-4 på små skärmar, medan
    marginalen stod kvar på --space-5, och sidan blev 16 px bredare än
    fönstret med vågrät scroll och avhuggen rubrik som följd.

    Att nolla paddingen i stället är immunt mot vilka mått base.css än
    väljer vid vilken brytpunkt som helst. Regeln gäller BARA
    startsidan (.page--landing) - på alla andra sidor behåller
    .site-main mallens padding. Banden håller sitt eget innehåll
    indraget med .lp__band:s padding-inline. */
.page--landing .site-main {
    padding-inline: 0;
}

/*  Meddelandena (Flash) ritas av ramen, före banden, och står alltså
    direkt i .site-main - som på startsidan saknar sidopadding. Utan de
    två reglerna nedan går rutan kant i kant över hela fönstret och ser
    felplacerad ut. Den får samma indrag och bredd som ett bands
    innehåll, så att den linjerar med texten under. */
.page--landing .site-main > .flash-list {
    padding-inline: var(--c2-inset);
}

.page--landing .site-main > .flash-list > .flash {
    width: 100%;
    max-width: var(--c2-text);
    margin-inline: auto;
}

.lp {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.lp__band {
    padding-inline: var(--c2-inset);
}

.lp__band--paper {
    background-color: var(--color-hero-bg);
    padding-block: var(--space-8);
}

/*  Det mörka bandet.

    EGEN FÄRG och inte --color-accent, fast de är samma grafit i
    ljust tema. Accenten är ”tryck här” och vänds till ljus sand i
    mörkt läge; bandet är en YTA och ska vara mörk i båda temana.
    Delade de variabel blev integritetsavsnittet ett lysande ljust
    fält så fort någon slog om temat. */
.lp__band--ink {
    background-color: var(--color-band);
    padding-block: var(--space-8);
}

.lp__inner {
    width: 100%;
    max-width: var(--c2-text);
    margin-inline: auto;
}

/*  Rubrik + ingress överst i ett band. Ingressen kapas vid
    läsbredden även när bandet är brett - en rad som är en meter
    lång tappar ögat i vänstermarginalen. */
.lp__head {
    margin-bottom: var(--space-6);
}

.lp__kicker {
    margin: 0 0 var(--space-2) 0;

    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--color-brand-ink);
}

/*  Rubrikerna och ingresserna har mallens marginal, färg och radbredd
    (h1-h3 och p i base.css). Här står bara det som skiljer. */
.lp__heading {
    font-size: var(--text-2xl);
    line-height: 1.2;
}

.lp__lead {
    margin: 0;

    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.lp__band--ink .lp__heading {
    color: var(--color-on-band);
}

.lp__band--ink .lp__lead {
    color: var(--color-on-band);
    opacity: 0.82;
}

.lp__band--ink .lp__kicker {
    color: var(--color-brand);
}


/*------------------------------------------------------------------
//
//	2. Hjältebandet och telefonen
//
------------------------------------------------------------------*/

.lp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
}

.lp-hero__text {
    max-width: 34rem;
}

.lp-hero__heading {
    margin: 0 0 var(--space-4) 0;

    font-size: var(--text-3xl);
    line-height: 1.12;
}

.lp-hero__lead {
    margin: 0 0 var(--space-6) 0;

    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.lp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);

    margin-bottom: var(--space-5);
}

/*  Raden under knapparna: tre korta löften, inte en punktlista.
    Samma tre som appens skärm ”Använd offline” säger, i samma
    ordning - det är sidans enda plats där de får plats på en rad.

    Listorna här och längre ned har ingen egen nollställning: mallen
    tar redan bort marginal, indrag och punkter på varje ul. */
.lp-hero__promise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);

    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.lp-hero__promise li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.lp-hero__tick {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: var(--color-status-ok);
}

/*  TELEFONEN

    En ram, inte en bild: innehållet är riktiga HTML-komponenter,
    så skärmbilden kan aldrig bli inaktuell på det sätt en PNG
    blir. Den är också läsbar för en skärmläsare. */
.lp-phone {
    width: 300px;
    padding: 10px;

    /*  Telefonens innehåll är VÄNSTERSTÄLLT oavsett vad som händer
        runt omkring. På små skärmar centreras hjältebandets text, och
        utan den här raden ärvde ett fordonskort den centreringen -
        ett kort som inte ser ut så i appen är sämre än inget kort. */
    text-align: left;

    /*  Ramen är ett FÖREMÅL, som registreringsskylten: mörk grafit i
        båda temana. Här gällde samma fälla som för bandet ovan. */
    background-color: var(--color-device);
    border-radius: 38px;
    box-shadow: 0 24px 48px -24px var(--color-backdrop);
}

.lp-phone__screen {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    height: 620px;
    padding: var(--space-4) var(--space-3) 0 var(--space-3);

    background-color: var(--color-bg);
    border-radius: 28px;
    overflow: hidden;
}

.lp-phone__title {
    margin: 0;
    padding-inline: var(--space-2);

    font-size: var(--text-xl);
}

/*  Korten LIGGER KVAR högst upp när det blir plats över - det gör en
    flexkolumn av sig själv. Tomrummet under dem är inte slöseri - det
    är där plusknappen får ligga utan att täcka en textrad, precis som
    i appen där listan sällan fyller skärmen. */
.lp-phone__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    flex: 1 1 auto;
    min-height: 0;
}

/*  BOTTENMENYN

    Fyra flikar, samma fyra som appen: Fordon, Översikt, Historik,
    Konto. Den valda är den enda som har både ikonplatta och
    fylld text - i appen är det så man ser var man är.

    Den valda fliken är ORANGE sedan appens C2: blekt orange platta,
    ikon och etikett i märkesorangens textton. Om orange ska betyda
    "vald" i appen är en öppen fråga (TODO_LAYOUT punkt 106); ändras
    det där ändras det här, i de två reglerna nedan. */
.lp-phone__nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-1);

    margin-inline: calc(var(--space-3) * -1);
    padding: var(--space-2) var(--space-2) var(--space-3) var(--space-2);

    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border-soft);
}

.lp-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);

    font-size: 0.625rem;
    color: var(--color-text-muted);
}

.lp-tab__icon {
    display: grid;
    place-items: center;

    width: 3rem;
    height: 1.5rem;

    border-radius: var(--radius-pill);
}

.lp-tab__icon svg {
    width: 1.125rem;
    height: 1.125rem;
}

.lp-tab--active {
    color: var(--color-brand-ink);
    font-weight: 700;
}

.lp-tab--active .lp-tab__icon {
    background-color: var(--color-nav-indicator);
    color: var(--color-brand-ink);
}

/*  Plusknappen. Den enda orange HANDLINGEN i telefonen, precis som
    i appen - orange betyder ”det här är handlingen”, och två sådana
    på samma skärm betyder ingenting alls. (Den valda fliken ovan är
    också orange, men den är ett läge och ingen handling.) */
.lp-phone__fab {
    position: absolute;
    right: var(--space-4);
    bottom: 6rem;

    display: grid;
    place-items: center;

    width: 3.5rem;
    height: 3.5rem;

    background-color: var(--color-brand);
    color: var(--color-on-accent);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 16px -8px var(--color-backdrop);
}

.lp-phone__fab svg {
    width: 1.5rem;
    height: 1.5rem;
}

.lp-phone__frame {
    position: relative;
}


/*------------------------------------------------------------------
//
//	3. Appkomponenterna
//
//  Fordonskortet, nedräkningsringen, statusraden, besiktnings-
//  raden och registreringsskylten. De ritas likadant var de än
//  står på sidan - i telefonen, i ett band, i en förklaring - av
//  samma skäl som appen har en ActionButtons och inte tjugo
//  knappar: samma sak ska se likadan ut överallt.
//
------------------------------------------------------------------*/

.vcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);

    padding: var(--space-3);

    /*  Tunn kant i knappramens ton, som appens kort - se
        --color-card-border i temat. Ska korten bli kantlösa igen är
        det en ändring där, inte här. */
    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
}

.vcard__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.vcard__id {
    min-width: 0;
    flex: 1 1 auto;
}

.vcard__name {
    margin: 0;

    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-heading);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*  Modellraden: ”V70 · 2008”. HOPPAS ÖVER HELT när varken modell
    eller årsmodell finns - en tom rad ser ut som ett fel. Samma
    regel som i appen, där raden inte ritas alls. */
.vcard__model {
    margin: 2px 0 0 0;

    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/*  Registreringsnumret får en EGEN RAD under modellraden, som i
    appen - inte en plats bredvid namnet. Skälet är detsamma där som
    här: namnet är fritext och kan vara hur långt som helst, och en
    skylt bredvid det knuffar undan namnet i stället för sig själv.
    Raden hoppas över helt när regnummer saknas (motorsågar har inga). */
.vcard__plate {
    margin-top: var(--space-2);
}

/*  NEDRÄKNINGSRINGEN

    conic-gradient och inte en bild: ringens andel är ett tal, och
    ska kunna komma ur data. Andelen är --ring (0-100) och färgen
    --tone, se STATUSFÄRGERNA i slutet av avsnittet.

    ⚠ ALDRIG SOM style="" I HTML. Sajtens CSP (style-src 'self', se
    __config/_headers.php) blockerar style-attribut, och ringen blir då
    tom utan att något säger till. I markeringen sätts de därför med
    klasserna nedan (.ring--soon, .ring--fill-70). När riktiga data
    ritas (TODO_WEB punkt 114) sätter skriptet --ring med
    element.style.setProperty(), som CSP:n tillåter.

    Ringen räknar ner EN sak i taget - den servicepunkt som är
    närmast - och inte ett medelvärde av allt. Ett medelvärde döljer
    just det man ville få veta. */
.ring {
    position: relative;

    flex: 0 0 auto;
    display: grid;
    place-items: center;

    width: 3.5rem;
    height: 3.5rem;

    /*  Tom och neutral tills en klass säger något annat */
    --ring: 0;
    --tone: var(--color-status-unknown);

    border-radius: 50%;
    background: conic-gradient(var(--tone) calc(var(--ring) * 1%),
                               var(--color-surface-strong) 0);
}

/*  Andelen, i steg om tio - fint nog för en markering som skrivs för
    hand. Exakta värden sätts av skript, se rutan ovan. */
.ring--fill-0  { --ring: 0; }
.ring--fill-10  { --ring: 10; }
.ring--fill-20  { --ring: 20; }
.ring--fill-30  { --ring: 30; }
.ring--fill-40  { --ring: 40; }
.ring--fill-50  { --ring: 50; }
.ring--fill-60  { --ring: 60; }
.ring--fill-70  { --ring: 70; }
.ring--fill-80  { --ring: 80; }
.ring--fill-90  { --ring: 90; }
.ring--fill-100 { --ring: 100; }

.ring::after {
    content: "";

    position: absolute;
    inset: 5px;

    border-radius: 50%;
    background-color: var(--color-surface);
}

.ring__value {
    position: relative;
    z-index: 1;

    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    color: var(--color-heading);
}

.ring__unit {
    position: relative;
    z-index: 1;

    font-size: 0.5625rem;
    line-height: 1;
    color: var(--color-text-muted);
}

.ring--lg {
    width: 5rem;
    height: 5rem;
}

.ring--lg::after {
    inset: 7px;
}

/*  STATUSRADEN

    Ett tal per status, i brådskeordning. Formen är appens status-
    piller sedan C2: en NEUTRAL kortyta med kant, och bara pricken
    och talet bär statusfärgen. Pillren ligger på det ljusa
    fordonskortet, så de ritas som kort i kort - med kant, annars
    försvinner de. En tredjedel var (flex: 1), så att de står på
    samma plats på vartenda kort och går att jämföra.

    --tone ritar pricken och --tone-ink talet, se STATUSFÄRGERNA i
    slutet av avsnittet. */
.statusrow {
    display: flex;
    gap: var(--space-2);
}

.statusrow__cell {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 3px var(--space-2);

    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border-nested);
    border-radius: var(--radius-pill);

    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--tone-ink);
}

.statusrow__cell::before {
    content: "";

    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;

    border-radius: 50%;
    background-color: var(--tone);
}

/*  BESIKTNINGSRADEN

    Kortets nedre rad, avskild med en linje. Besiktningen hör till
    FORDONET och inte till en servicepunkt, och får därför en egen
    rad i stället för en andra ring. */
.vcard__inspection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);

    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border-soft);

    font-size: var(--text-xs);
}

.vcard__inspection-label {
    color: var(--color-text-muted);
}

.vcard__inspection-value {
    font-weight: 700;
    color: var(--tone-ink);
}

/*  REGISTRERINGSSKYLTEN

    Ett FÖREMÅL och inte en gränssnittsyta: den är vit med blått
    EU-band i båda temana, för så ser den ut på bilen. */
.plate {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);

    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.plate__band {
    display: flex;
    align-items: center;

    padding-inline: 4px;

    background-color: var(--color-plate-band);
    color: var(--color-plate-band-ink);

    font-size: 0.5rem;
    font-weight: 700;
}

.plate__text {
    padding: 1px var(--space-2);

    background-color: var(--color-plate);
    color: var(--color-plate-ink);

    font-weight: 700;
    letter-spacing: 0.12em;
}

/*  STATUSFÄRGERNA - EN gång för alla komponenter ovan och för
    statusförklaringen i avsnitt 4.

    Varje status sätter två variabler: --tone är GRAFIKENS färg (ringen,
    pricken - appens exakta ton) och --tone-ink TEXTENS (talet i
    pillret, besiktningsdatumet - måste klara kontrastkravet). För alla
    utom "snart" är de samma, se --color-status-soon-ink i temat om
    varför. Komponenterna läser bara --tone och --tone-ink; vilken färg
    en status har står här och ingen annanstans.

    OKÄNT och BEHOVSSTYRT ritas UTANFÖR skalan, och det är ett beslut
    och inte en slump: en punkt utan historik är inte en femte
    allvarlighetsgrad, och en punkt utan intervall (”byt när den är
    sliten”) kan inte räknas ner alls. Grå, aldrig röd.

    ⚠ STÅR EFTER .ring MED FLIT. .ring sätter --tone till okänt som
    utgångsläge, och med samma vikt vinner den regel som står sist. */
.ring--ok,
.statusrow__cell--ok,
.lp-legend__dot--ok,
.vcard__inspection-value--ok {
    --tone: var(--color-status-ok);
    --tone-ink: var(--color-status-ok);
}

.ring--soon,
.statusrow__cell--soon,
.lp-legend__dot--soon,
.vcard__inspection-value--soon {
    --tone: var(--color-status-soon);
    --tone-ink: var(--color-status-soon-ink);
}

.ring--urgent,
.statusrow__cell--urgent,
.lp-legend__dot--urgent {
    --tone: var(--color-status-urgent);
    --tone-ink: var(--color-status-urgent);
}

.ring--late,
.statusrow__cell--late,
.lp-legend__dot--late {
    --tone: var(--color-status-late);
    --tone-ink: var(--color-status-late);
}

.statusrow__cell--unknown,
.lp-legend__dot--unknown {
    --tone: var(--color-status-unknown);
    --tone-ink: var(--color-status-unknown);
}


/*------------------------------------------------------------------
//
//	4. Banden därunder
//
------------------------------------------------------------------*/

/*  Rutnät som blir en spalt på små skärmar. auto-fit + minmax gör
    brytpunkten till ett MÅTT i stället för en media query: rutorna
    lägger om sig när de blir för smala, oavsett var det händer. */
.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
}

.lp-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.lp-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);

    padding: var(--space-5);

    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
}

.lp-tile__icon {
    display: grid;
    place-items: center;

    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-2);

    background-color: var(--color-surface-strong);
    color: var(--color-heading);
    border-radius: var(--radius-md);
}

.lp-tile__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.lp-tile__heading {
    margin: 0;

    font-size: var(--text-base);
}

.lp-tile__text {
    margin: 0;

    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/*  På det mörka bandet byter rutorna botten i stället för att
    ligga som vita fläckar. */
.lp__band--ink .lp-tile {
    background-color: transparent;
    border-color: var(--color-border-strong);
}

.lp__band--ink .lp-tile__heading {
    color: var(--color-on-band);
}

.lp__band--ink .lp-tile__text {
    color: var(--color-on-band);
    opacity: 0.78;
}

.lp__band--ink .lp-tile__icon {
    background-color: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-brand);
}

/*  STATUSFÖRKLARINGEN

    En rad per status: färgprick, namn, och vad den betyder. Formen
    bär skillnaden tillsammans med färgen, inte färgen ensam - den
    som inte skiljer rött från grönt ska ändå kunna läsa tabellen. */
.lp-legend {
    display: grid;
    gap: var(--space-2);
}

.lp-legend__row {
    display: grid;
    grid-template-columns: auto 7rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);

    padding: var(--space-3);

    background-color: var(--color-surface);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-md);
}

.lp-legend__dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;

    /*  Färgen per läge med en klass och inte style="" - se .ring och
        STATUSFÄRGERNA i avsnitt 3. */
    background-color: var(--tone);
}

.lp-legend__name {
    font-weight: 700;
    color: var(--color-heading);
}

.lp-legend__what {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/*  SLUTBANDET med hjältebilden - samma bild som möter en när appen
    öppnas första gången. Skenet bakom den är en radial-gradient och
    inte en skugga i filen, så bilden kan bytas utan att skenet
    följer med. */
.lp-cta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-7);
}

.lp-cta__art {
    display: grid;
    place-items: center;

    width: 16rem;
    height: 16rem;

    background: radial-gradient(circle at 50% 45%,
                                var(--color-hero-glow) 0%,
                                transparent 68%);
}

.lp-cta__art img {
    width: 100%;
    height: auto;
}

.lp-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);

    margin-top: var(--space-5);
}

/*  ”Snart i Google Play”. En PLATTA och inte en knapp, med flit:
    appen är inte släppt, och en knapp som ser tryckbar ut men inte
    leder någonstans är ett löfte sidan inte kan hålla. */
.lp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

    padding: var(--space-2) var(--space-4);

    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);

    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.lp-badge svg {
    width: 1.125rem;
    height: 1.125rem;
}

.lp__band--ink .lp-badge {
    color: var(--color-on-band);
    opacity: 0.85;
}

/*  Sidfotens länkrad på startsidan: sidorna som måste finnas före
    lansering. De som inte är byggda ännu är märkta i texten och
    inte länkade - en död länk är värre än ett ärligt ”kommer”. */
.lp-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);

    font-size: var(--text-sm);
}

.lp-links__soon {
    color: var(--color-text-faint);
}

/*  Varningen om att uppsättningsguiden ligger kvar. Den står
    ÖVERST och inte i en panel längre ner: så länge /install/ svarar
    är sajten öppen för vem som helst att ta över, och det är inte
    en detalj man ska behöva scrolla till. */
.lp-install {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);

    margin-inline: var(--space-5);
    padding: var(--space-4);

    background-color: var(--color-status-late-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md);

    color: var(--color-status-late);
}


/*------------------------------------------------------------------
//
//	5. Tabeller och paneler
//
//  Kontosidorna och administrationen. Det som gäller en enda del av
//  administrationen står i dess eget avsnitt nedan.
//
------------------------------------------------------------------*/

/*  En knapp i en tabellrad, t.ex. "Logga ut" i listan över
    sessioner. Mallens .form--inline har luft ovanför, avsedd för
    formulär under en text. I en cell sköt den ned knappen under
    radens text. Cellerna centreras på höjden, så att knappen, pillret
    och texten hamnar på samma linje. */
.table td {
    vertical-align: middle;
}

.table td > .form--inline {
    margin-top: 0;
}

/*  Kort och tabell i samma panel, t.ex. katalogens adminsida. Mallen
    ger ingen av dem luft mot den andra, och utan den läses kortet och
    tabellens rubrikrad som en enda klump. */
.card-grid + .table-frame,
.table-frame + .card-grid {
    margin-top: var(--space-4);
}

/*  En tabell och ett formulär under den i samma panel, t.ex. listan på
    organisationssidan. Där står tabellen i ett eget formulär (knapparna
    på raderna), därav :has(). Utan luften satt fältets rubrik tätt mot
    tabellens sista rad. */
.table-frame + .form,
form:has(> .table-frame) + .form {
    margin-top: var(--space-4);
}

/*  Uppgifter och ett formulär under dem i samma panel, t.ex. utkastet på
    katalogens adminsida. Utan luften satt kryssrutans ram tätt mot
    listans sista rad. */
.data-list + .form,
.data-list + .panel__warning {
    margin-top: var(--space-4);
}

/*  En fotnot som INTE står sist i panelen. Mallens .panel__note har
    marginal 0 nedåt, eftersom den är tänkt som panelens sista rad. Mitt i
    en panel satt det som följer - en rubrik, en tabell, menyknapparna på
    katalogens adminsida - tätt mot texten (Krille 2026-09-27). Luften är
    ett vanligt styckes.

    :has() och inte :not(:last-child): det som står efter kan vara ett
    skripts värden eller något dolt, och då är fotnoten ändå sist på
    skärmen och ska inte få luft mot panelens nederkant. */
.panel__note:has(~ :not(script, template, [hidden])) {
    margin-bottom: var(--space-4);
}


/*------------------------------------------------------------------
//
//	6. Katalogen
//
------------------------------------------------------------------*/

/*  Katalogens servicepunkter (/admin/catalog/?view=items, TODO_WEB 141 b).
    Formuläret för en punkt: en ruta per fordonstyp, och valet "samma för
    alla / olika per typ". Markeringen står i layout/va-catalog-item-detail.php. */

/*  Listans celler med korta uppräkningar (namnet, typerna,
    kategorierna). De bryts som .is-text men får krympa till 8 rem i
    stället för 16: med tre sådana kolumner blev tabellen annars
    1 200 px bred i en ram på 850, och Nivå och Intervall hamnade
    utanför. */
.table .catalog-cell {
    white-space: normal;
    min-width: 8rem;
}

/*  UTFÄLLNINGEN ÄR RAMENS BREDD, INTE TABELLENS. På en telefon är
    tabellen bredare än skärmen och rullar i sin ram, och utfällningen
    - ett helt formulär - följde med: halva fälten låg utanför och fick
    rullas fram i sidled. Ramen blir en container, slitsen lika bred
    som den (100cqw) och står still när tabellen rullas. På en dator,
    där tabellen ryms, ändrar det ingenting. */
.table-frame:has(> [data-catalog-items]),
.table-frame:has(> [data-catalog-vocabulary-table]),
.table-frame:has(> [data-reports]) {
    container-type: inline-size;
}

[data-catalog-items] .row-detail__slot,
[data-catalog-vocabulary-table] .row-detail__slot,
[data-reports] .row-detail__slot {
    position: sticky;
    left: 0;
    width: 100cqw;
    box-sizing: border-box;
}

/*  Kryssrutor i tätare rutnät. Mallens 16 rem passar behörigheternas
    beskrivningar, inte kategorinamn på ett ord. */
.check-list--compact {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}

.catalog-muted {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--color-text-muted);
}

/*  Adressen och kontots id under ett kontos namn i en tabell (bildsidan,
    organisationssidan). Långa adresser bryts hellre än att tabellen blir
    bredare. */
.account-meta {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/*  Beskedet efter en sparning med AJAX. Tomt tills skriptet skriver i det. */
.catalog-item__status {
    font-weight: 600;
    color: var(--color-heading);
}

.catalog-item__status:empty {
    display: none;
}

.catalog-item__modes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-2);
}

.catalog-item__mode {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.catalog-item__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.catalog-item__row > .field {
    flex: 1 1 11rem;
    min-width: 0;
}

.catalog-item__type {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/*  display: grid ovan väger tyngre än webbläsarens egen regel för
    hidden, och skriptet döljer en typ som inte är ikryssad. */
.catalog-item__type[hidden] {
    display: none;
}

/*  Förhandsgranskningens knapp "Visa": skriptet ritar om telefonen när
    ett val ändras och döljer knappen, men .form__actions har display: flex. */
.catalog-phone-submit[hidden] {
    display: none;
}

.catalog-item__type-head {
    margin: 0;
    font-size: var(--text-base);
}

.catalog-item__remove {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}

/*  "Ny servicepunkt", "+ Placering" och de andra knapparna som skapar
    en ny rad: en utfällning med knappen som sammanfattning. Mallens
    .reveal--panel nollar avstånden (den är tänkt som en hel panel), så
    knappen satt tätt mot texten ovanför, tabellen under och
    webbläsarens pil (Krille 2026-09-27). Luften ovanför kommer från
    texten ovanför, se .panel__note:has(…) ovan. */
.catalog-create {
    margin-bottom: var(--space-5);
}

.catalog-create > .reveal__summary .button {
    margin-left: var(--space-2);
}

/*  Katalogens ordförråd (?view=types, categories, positions, levels,
    TODO_WEB 141 d). Markeringen står i layout/va-catalog-vocabulary*.php. */

/*  Blocken (typer och drivlinor, placeringar och uppsättningar) står
    efter varandra i samma panel */
.catalog-vocabulary + .catalog-vocabulary {
    margin-top: var(--space-7);
}

/*  Upp och ned: två små knappar bredvid varandra i sista kolumnen. En
    avstängd knapp (första radens upp, sista radens ned) syns svagt men
    tar sin plats, så att pilarna står rakt under varandra. */
.catalog-move {
    display: inline-flex;
    gap: var(--space-1);
    white-space: nowrap;
}

/*  position: relative håller knappens dolda skärmläsartext (en
    .visually-hidden, absolut positionerad) inne i tabellens ram. Utan
    den räknades texten från sidans kant, låg utanför ramens klippning
    i sista kolumnen och gjorde sidan 788 px bred på en telefon. */
.catalog-move .button {
    position: relative;
    min-width: 2.25rem;
    padding: var(--space-1) var(--space-2);
}

.catalog-move .button:disabled {
    opacity: 0.35;
    cursor: default;
}

/*  Katalogens förhandsgranskning (?view=preview, TODO_WEB 141 c).
    Markeringen står i layout/va-catalog-preview.php. */

/*  Den råa skillnaden i filen, som git diff. Raderna färgas med temats
    lyckat- och fel-färger, så att den följer ljust och mörkt läge. */
.catalog-diff {
    margin: 0;
    padding: var(--space-3);
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--color-surface-strong);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
}

.catalog-diff__add {
    color: var(--color-success);
    font-weight: 600;
}

.catalog-diff__del {
    color: var(--color-danger);
    text-decoration: line-through;
}

.catalog-diff__ctx,
.catalog-diff__gap {
    color: var(--color-text-muted);
}

.catalog-diff-reveal {
    margin-top: var(--space-4);
}

/*  Telefonen: det ett nytt fordon får föreslaget, grupperat efter
    kategori som i appens Service-flik. Ingen avbild av appen - bara
    samma ordning och samma urval. */
.catalog-phone {
    max-width: 24rem;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
}

.catalog-phone__title {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    color: var(--color-heading);
}

.catalog-phone__category {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.catalog-phone__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.catalog-phone__item.is-new {
    outline: 2px solid var(--color-success);
}

.catalog-phone__item.is-changed {
    outline: 2px solid var(--color-warning);
}


/*------------------------------------------------------------------
//
//	7. Felrapporterna
//
//  /admin/reports/, TODO_APP 67. Markeringen står i
//  layout/va-report-detail.php. Utfällningens bredd i tabellen delas
//  med katalogen, se avsnitt 6.
//
------------------------------------------------------------------*/

/*  Rapportens text och vår anteckning: radbrytningarna är avsändarens
    och ska stå kvar. overflow-wrap därför att texten kommer från ett
    publikt formulär - en rad utan ett enda blanksteg får inte spränga
    tabellens ram. */
.report-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*  En rubrik som INTE står först i sin del: Historik under uppgifterna,
    Länkade ärenden under formuläret. Mallens .detail__heading har ingen
    luft uppåt, eftersom den är tänkt som delens första rad, och rubriken
    satt tätt mot knappen ovanför. */
.report-detail .detail__part > * + .detail__heading {
    margin-top: var(--space-5);
}

/*  Ett länkat ärende: numret, läget och början av texten till vänster,
    knappen som tar bort länken till höger. Bryts till två rader när
    det blir trångt. */
.report-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-3);
}

/*  Synkfelet (TODO_APP 183): en rad i taget, uppifrån och ner. Sorten,
    id:t, versionen och skälet på en rad, och andra rapporter om samma
    rad under. Inte .check-list - dess rutnät lade raderna bredvid
    varandra, och id:t bröts i smala spalter. */
.report-sync {
    display: grid;
    gap: var(--space-3);
}

.report-sync > li {
    display: grid;
    gap: var(--space-1);
}


/*------------------------------------------------------------------
//
//	8. Formulären
//
------------------------------------------------------------------*/

/*  Rutan med den nya återställningsnyckeln (layout/va-recovery-panel.php)
    står i en div inne i formuläret, och formulärets gap når därför inte
    in. Utan luften här satt kryssrutans ram tätt mot knappen under.
    Nyckelns fält på en smal skärm står i avsnitt 11. */
.recovery-panel .check-list {
    margin-bottom: var(--space-4);
}

/*  Raderna under ett nytt lösenord: räknaren när kravet är uppfyllt,
    och om det upprepade stämmer. Mallens .field__help har bara den
    dämpade färgen. */
.field__help--ok {
    color: var(--color-success);
}

.field__help--bad {
    color: var(--color-danger);
}

/*  En rad text under ett märke, t.ex. under "Raderas" på adminsidans
    kontokort. Luft mot märket ovanför, samma storlek som en hjälptext. */
.state-note {
    margin: var(--space-2) 0 0;
    max-width: none;
    font-size: var(--text-xs);
    color: var(--color-danger);
}

/*  Webbläsarens autofyll trycker ingen tangent. Den korta animationen
    ger fältet ett animationstart, som räknaren i va-forms.js lyssnar
    på. Två regler, eftersom en webbläsare som inte känner igen den ena
    väljaren annars kastar båda. */
@keyframes va-autofill {
    from { opacity: 1; }
    to   { opacity: 1; }
}

.input:-webkit-autofill {
    animation: va-autofill 1ms;
}

.input:autofill {
    animation: va-autofill 1ms;
}


/*------------------------------------------------------------------
//
//	9. Guiderna
//
//  /admin/handbook/, TODO_WEB 171. HTML:en kommer ur
//  class/VaMarkdown.php och har inga klasser utom tabellernas och
//  kodblockens, alltså sätts allt här på elementen inne i .guide.
//
------------------------------------------------------------------*/

.guide h2 {
    margin-top: var(--space-6);
}

.guide h3 {
    margin-top: var(--space-5);
}

/*  En länk i innehållsförteckningen hoppar till rubriken. Luft ovanför,
    så att rubriken inte hamnar kant i kant med fönstrets överkant. */
.guide [id] {
    scroll-margin-top: var(--space-4);
}

/*  Listorna får tillbaka sina punkter och nummer, som mallen tar bort
    överallt: i en text är numret en del av innehållet ("gör det i den
    här ordningen"). */
.guide ul,
.guide ol {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-5);
}

.guide ul {
    list-style: disc;
}

.guide ol {
    list-style: decimal;
}

.guide li {
    margin-bottom: var(--space-1);
}

.guide li > ul,
.guide li > ol {
    margin: var(--space-1) 0 0 0;
}

.guide blockquote {
    margin: 0 0 var(--space-4) 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-border-strong);
    background: var(--color-surface-strong);
}

.guide hr {
    margin: var(--space-6) 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/*  Kod i löptexten - ett kommando, en sökväg, en rad ur en felrapport
    - har inga mellanslag att bryta vid och knuffade ut sidan i sidled
    på en telefon. Den bryts nu vid kanten, och bara där: får den plats
    står den kvar på en rad. Brytningen syns bara på skärmen, så ett
    kopierat kommando är fortfarande en rad.

    Kodblocken (```) bryts inte. Där är radernas form en del av
    innehållet, och .code-block rullar inom sin egen ram.

    Inte heller koden i tabellerna. Där är den ett kort namn som
    does_not_open, som annars delas mitt i ett ord fast tabellen redan
    rullar i sin egen ram, se .table-frame nedan. */
.guide :not(pre) > code {
    overflow-wrap: anywhere;
}

.guide .table code {
    overflow-wrap: normal;
}

/*  Tabellramen är platsen för det dolda i tabellen. En kolumnrubrik
    med .visually-hidden är absolut placerad, och utan en placerad
    förälder räknas den mot hela sidan: i en tabell som är bredare än
    skärmen hamnar den långt till höger och ger sidan en vågrät
    rullning, fast ramen själv rullar. Sågs på 380 px på
    /admin/organisations/ (TODO_APP 191 n). Gäller alla tabeller, så
    raden står här och inte i mallens base.css. */
.table-frame {
    position: relative;
}

/*  Tabellerna är text och inte data: cellerna bryts, som .is-text i
    mallen, och ramen rullar först när en cell inte kan krympa mer. */
.guide .table-frame {
    margin-bottom: var(--space-4);
}

.guide .table th,
.guide .table td {
    white-space: normal;
    min-width: 8rem;
    vertical-align: top;
}

/*  Ett flödesschema: bilden som rita_scheman.php ritat, i sin egen
    storlek, där texten i den är lika stor som sidans.

    RULLAR I SIDLED I STÄLLET FÖR ATT KRYMPA, som .table-frame. Ett
    brett schema som krymps till en telefons bredd har text ingen kan
    läsa. */
.guide-diagram {
    max-width: none;
    margin: var(--space-4) 0;
    overflow-x: auto;
}

.guide-diagram img {
    max-width: none;
    height: auto;
}


/*------------------------------------------------------------------
//
//	10. Sidfoten
//
------------------------------------------------------------------*/

/*  LÄNKEN TILL INTEGRITETSPOLICYN I SIDFOTEN. Står på samma rad som
    årtalet, och behöver luft för att inte läsas som en del av det. */
.site-footer__link {
    margin-left: var(--space-3);
}


/*------------------------------------------------------------------
//
//	11. Mindre skärmar
//
//  En brytpunkt, inte fem. Det som faktiskt behöver den är de två
//  tvåspaltiga banden - resten lägger redan om sig själva genom
//  auto-fit ovan.
//
------------------------------------------------------------------*/

@media (max-width: 62rem) {

    /*  ⚠ INGEN justify-items: center här. Den ger varje griditem
        justify-self: center, och ett centrerat griditem mäts som
        MAX-CONTENT i stället för att fylla spalten - rubriken lade sig
        på en rad, blev bredare än skärmen och sköt ut sidan i sidled.
        Texten centreras med text-align, och det som faktiskt ska
        centreras som BLOCK (telefonen, bilden) får margin-inline: auto
        var för sig nedan. */
    .lp-hero,
    .lp-cta {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .lp-phone,
    .lp-cta__art {
        margin-inline: auto;
    }

    .lp-hero__text {
        max-width: none;
    }

    .lp-hero__actions,
    .lp-hero__promise,
    .lp-cta__actions {
        justify-content: center;
    }

    .lp__lead {
        margin-inline: auto;
    }

    /*  Telefonen först på liten skärm: den SÄGER vad appen är,
        medan rubriken bara påstår det. */
    .lp-hero__art {
        order: -1;
    }
}

/*  Mallens topprad och innehåll går ned till --space-4 i sidopadding
    under 40rem (base.css). Banden följer med, annars står texten i dem
    8 px längre in än logotypen ovanför. */
@media (max-width: 40rem) {

    :root {
        --c2-inset: var(--space-4);
    }
}

@media (max-width: 36rem) {

    .lp-hero__heading {
        font-size: var(--text-2xl);
    }

    .lp-legend__row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .lp-legend__what {
        grid-column: 2;
    }

    .lp-phone {
        width: 100%;
        max-width: 300px;
    }

    /*  ÅTERSTÄLLNINGSNYCKELN. .input--code (base.css) är gjord för sex
        siffror: stor stil och 0,4 em mellan tecknen. Nyckeln är 32
        tecken med bindestrecken och fick inte plats på en telefon -
        början försvann ut till vänster medan man skrev. Samma fält på
        återställningssidan och i kontrollen under Inställningar. */
    .input--code[data-va-input="recovery"] {
        font-size: var(--text-sm);
        letter-spacing: 0;
    }
}