/*==================================================================
//
//  base.css
//
//  All FORM: layout, typografi, mått, komponenter.
//
//  HÄR FINNS INGA FÄRGER. Varenda färg hämtas som en variabel,
//  t.ex. var(--color-surface), och variablerna definieras i
//  /assets/css/theme/<tema>.css - en fil per färgtema.
//
//  Vill man byta utseende ändrar man alltså i temafilen, och vill
//  man byta form ändrar man här. Ett nytt tema kräver inte en enda
//  ändring i den här filen.
//
//  Ordning i filen:
//    1. Grundinställningar och mått
//    2. Elementen
//    3. Ramverket (header, main, footer)
//    4. Komponenter
//    5. Mindre skärmar
//
==================================================================*/


/*------------------------------------------------------------------
//
//	1. Grundinställningar och mått
//
//  Allt som är ett mått, ett avstånd eller en storlek ligger som
//  variabel här, så att proportionerna går att ändra på ett ställe.
//
------------------------------------------------------------------*/

:root {

    /* Avstånd */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* Textstorlekar */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.75rem;

    /* Rundade hörn */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* Bredder */
    --width-page: 1180px;
    --width-text: 62ch;

    /* Typsnitt. Systemets egna, inga externa - det håller sidan
       snabb och slipper anrop till Google som CSP:n ändå stoppar. */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas,
                 "Liberation Mono", monospace;

    /* Rörelse */
    --transition: 160ms ease;
}


/*------------------------------------------------------------------
//
//	2. Elementen
//
------------------------------------------------------------------*/

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

html {
    /* Så att ankarlänkar inte hamnar under toppraden */
    scroll-padding-top: var(--space-7);
}

body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;

    color: var(--color-text);
    background-color: var(--color-bg);

    /* Bakgrunden ligger i ett eget lager, se .backdrop */
    position: relative;
    isolation: isolate;
}

h1, h2, h3 {
    margin: 0 0 var(--space-3) 0;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-heading);
}

p {
    margin: 0 0 var(--space-4) 0;
    max-width: var(--width-text);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

strong {
    font-weight: 600;
    color: var(--color-heading);
}

em {
    color: var(--color-text-muted);
    font-style: normal;
}

/* Tydlig markering för den som stegar med tangentbordet */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Respektera besökare som bett om mindre rörelse */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/*------------------------------------------------------------------
//
//	3. Ramverket
//
------------------------------------------------------------------*/

/*  Bakgrunden. Ligger bakom allt annat och skrollar inte med.
    Färgerna kommer från temat, formen härifrån. */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        var(--backdrop-glow-1),
        var(--backdrop-glow-2),
        var(--backdrop-base);
}

/*  Toppraden */
.site-header {
    width: 100%;
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-4) var(--space-5);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/*  Sidans innehåll */
.site-main {
    flex: 1 1 auto;
    width: 100%;
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-4) var(--space-5) var(--space-8) var(--space-5);
}

/*  Sidfoten */
.site-footer {
    width: 100%;
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-5);

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

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


/*------------------------------------------------------------------
//
//	4. Komponenter
//
------------------------------------------------------------------*/

/*  4.1 Logotyp
    --------------------------------------------------------------*/

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

.brand:hover {
    text-decoration: none;
    color: var(--color-heading);
}

/*  Märket är ritat i CSS, ingen bildfil behövs */
.brand__mark {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: var(--radius-sm);
    background: var(--gradient-accent);

    /* Snedställd fyrkant som antyder ett fraktskepp */
    transform: rotate(45deg) scale(0.82);
    box-shadow: var(--shadow-accent);
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.brand__name {
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.brand__tagline {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}


/*  4.2 Meny
    --------------------------------------------------------------*/

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.site-nav__link {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);

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

.site-nav__link:hover {
    text-decoration: none;
    color: var(--color-heading);
    background: var(--color-surface-hover);
}

.site-nav__link.is-current {
    color: var(--color-heading);
    background: var(--color-surface);
}

.site-nav__form {
    margin: 0;
}


/*  4.3 Knappar
    --------------------------------------------------------------*/

.button {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);

    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;

    color: var(--color-heading);
    background: var(--color-surface);

    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.button:hover {
    text-decoration: none;
    color: var(--color-heading);
    background: var(--color-surface-hover);
    border-color: var(--color-border-strong);
}

/*  Diskret variant, t.ex. utloggningsknappen i menyn */
.button--quiet {
    padding: var(--space-2) var(--space-4);
    border-color: var(--color-border-soft);
    background: none;
    color: var(--color-text-muted);
}

.button--quiet:hover {
    color: var(--color-heading);
    background: var(--color-surface-hover);
}


/*  4.4 Meddelanderutor
    --------------------------------------------------------------*/

.flash-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.flash {
    margin: 0;
    max-width: none;
    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--color-border-soft);
    border-left-width: 3px;
    border-radius: var(--radius-md);

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

.flash--info    { border-left-color: var(--color-info);    }
.flash--success { border-left-color: var(--color-success); }
.flash--warning { border-left-color: var(--color-warning); }
.flash--error   { border-left-color: var(--color-danger);  }


/*  4.5 Startsidans hjärta
    --------------------------------------------------------------*/

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    gap: var(--space-7);
    align-items: start;
    padding-top: var(--space-6);
}

.hero__heading {
    font-size: var(--text-3xl);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

/*  Rubriken tonas i temats accentfärger.
    Ligger i ett @supports så att rubriken inte blir osynlig i en
    webbläsare som saknar background-clip: text - då blir den bara
    enfärgad istället. */
@supports (background-clip: text) or (-webkit-background-clip: text) {

    .hero__heading {
        background: var(--gradient-heading);
        -webkit-background-clip: text;
        background-clip: text;
        color: var(--color-heading-transparent);
    }
}

.hero__lead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}


/*  4.6 Punktlistan på startsidan
    --------------------------------------------------------------*/

.feature-list {
    display: grid;
    gap: var(--space-4);
}

.feature {
    padding-left: var(--space-5);
    border-left: 2px solid var(--color-border);
}

.feature__head {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.feature__text {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/*  4.7 Inloggningsrutan
    --------------------------------------------------------------*/

.sso-card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);

    background: var(--color-surface);
    box-shadow: var(--shadow-card);

    /* Fastnar när man skrollar på stora skärmar */
    position: sticky;
    top: var(--space-5);
}

.sso-card__heading {
    font-size: var(--text-xl);
    margin-bottom: var(--space-5);
}

.sso-card__button {
    display: inline-block;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.sso-card__button:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}

.sso-card__note {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.sso-card__note--muted {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    margin-bottom: 0;
}


/*  4.8 Paneler (används på sidorna efter inloggning)
    --------------------------------------------------------------*/

.panel {
    padding: var(--space-6);
    margin-bottom: var(--space-5);

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

    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.panel:last-child {
    margin-bottom: 0;
}

.panel--quiet {
    background: none;
    box-shadow: none;
    border-style: dashed;
}

.panel--centered {
    text-align: center;
}

.panel--centered p {
    margin-left: auto;
    margin-right: auto;
}

.panel__heading {
    font-size: var(--text-xl);
    margin-bottom: var(--space-4);
}

/*  Rubrik för en avdelning inne i en panel */
.panel__subheading {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin: var(--space-6) 0 var(--space-3) 0;
}

/*  Inledande text under en rubrik */
.panel__lead {
    color: var(--color-text-muted);
    margin-bottom: var(--space-5);
}

/*  Liten förklarande text längst ned i en panel */
.panel__note {
    margin-top: var(--space-4);
    margin-bottom: 0;
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}


/*  4.9 Den inloggade karaktären
    --------------------------------------------------------------*/

.identity {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.identity__portrait {
    width: 96px;
    height: 96px;
    flex: 0 0 96px;

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

.identity__heading {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.identity__lead {
    margin: 0;
    color: var(--color-text-muted);
}


/*  4.10 Uppgiftslista
    --------------------------------------------------------------*/

.data-list {
    display: grid;
    grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
    gap: var(--space-3) var(--space-5);
    margin: 0;
}

.data-list dt {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

.data-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.data-list__code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/*  Siffror som byts ut medan sidan står still (saldo, antal).
    tabular-nums ger alla siffror samma bredd, så att raden inte
    hoppar i sidled när värdet ändras. */
.data-list__number {
    font-variant-numeric: tabular-nums;
}

/*  Lista med namn till vänster och antal till höger. Ritas av
    JavaScript ur den avkodade datan, se assets/js/data.js */
.stack-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.stack {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.stack:last-child {
    border-bottom: none;
}

.stack__name {
    overflow-wrap: anywhere;
}

.stack__quantity {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/*  Träff i sökrutan på /prices/. En knapp och inte en länk - den
    väljer ett värde på sidan, den leder inte någon annanstans - men
    den ska se ut som raden den ligger i och inte som en knapp. */
.stack__name--choice {
    padding: 0;
    border: none;
    background: none;

    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.stack__name--choice:hover {
    color: var(--color-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*  Antal enheter bakom ett pris. Mindre och tystare än priset:
    volymen är sammanhanget, inte svaret. */
.price__volume {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-faint);
    white-space: nowrap;
}

.scope-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}


/*  4.11 Val i sidfoten (språk och tema)
    --------------------------------------------------------------*/

.site-footer__choices {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

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

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

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

.choice__option.is-current {
    color: var(--color-heading);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/*  4.12 Kontots karaktärer
    --------------------------------------------------------------*/

.character-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.character {
    display: flex;
    align-items: center;
    gap: var(--space-4);

    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-md);
}

/*  Den karaktär man arbetar som just nu */
.character--active {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
}

.character__portrait {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: var(--radius-sm);
}

/*  Tar upp utrymmet så att knappen hamnar längst till höger */
.character__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.character__name {
    font-weight: 600;
    color: var(--color-heading);
}

.character__meta {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}

.character__badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);

    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: var(--color-heading);
    background: var(--color-surface-hover);
}

.character-list__add {
    margin-top: var(--space-5);
    margin-bottom: 0;
}


/*  4.13 Formulär
    --------------------------------------------------------------*/

.form {
    margin-top: var(--space-5);
    max-width: var(--width-text);
}

/*  Ett fält = etikett, ruta och eventuell förklaring */
.field {
    margin-bottom: var(--space-4);
}

.field__label {
    display: block;
    margin-bottom: var(--space-2);

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

.field__input {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);

    font-family: inherit;
    font-size: var(--text-base);

    color: var(--color-heading);
    background: var(--color-input);

    transition: border-color var(--transition);
}

.field__input:hover {
    border-color: var(--color-border-strong);
}

/*  Ingen egen fokusmarkering - :focus-visible i avsnitt 2 gäller */
.field__input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/*  Fält som innehåller en nyckel och inte en mening */
.field__input--key {
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.field__note {
    margin: var(--space-2) 0 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}

.form__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-5) 0 0 0;
}

/*  Statusraden under ett formulär. Höjden är låst så att sidan
    inte hoppar när en text dyker upp eller försvinner. */
.form__status {
    min-height: 1.5rem;
    margin: var(--space-3) 0 0 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.form__status--working { color: var(--color-text-muted); }
.form__status--ok      { color: var(--color-success);    }
.form__status--error   { color: var(--color-danger);     }

/*  Knappen för det som är sidans egentliga syfte */
.button--strong {
    border-color: transparent;
    background: var(--gradient-accent);
    color: var(--color-on-accent);
}

.button--strong:hover {
    border-color: transparent;
    background: var(--gradient-accent);
    color: var(--color-on-accent);
    box-shadow: var(--shadow-accent);
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);

    margin-top: var(--space-5);
    font-size: var(--text-sm);
    cursor: pointer;
}

.checkbox input {
    /* Flyttar ned rutan så den står i linje med textens första rad */
    margin-top: 0.3em;
    flex: 0 0 auto;
}


/*  4.14 Kryptering
    --------------------------------------------------------------*/

/*  Återställningsnyckeln. Visas EN gång och ska gå att skriva av
    utan att läsaren tappar bort sig - därför monospace, luft mellan
    tecknen och stor text. */
.recovery-key {
    margin: var(--space-5) 0 0 0;
    padding: var(--space-5);
    max-width: none;

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-input);

    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.8;
    letter-spacing: 0.08em;
    text-align: center;
    overflow-wrap: anywhere;

    /* Ett klick markerar hela nyckeln */
    user-select: all;
}

/*  Text som inte får läsas förbi. Samma form som panel__note men
    med en tydlig kant, eftersom innehållet handlar om att förlora
    sin data för gott. */
.panel__warning {
    margin-top: var(--space-5);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--color-border-soft);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);

    font-size: var(--text-sm);
    max-width: none;
}


/*  4.15 Rättigheter mot CCP
    --------------------------------------------------------------*/

.permission-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.permission {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);

    padding: var(--space-4);
    border: 1px solid var(--color-border-soft);
    border-left-width: 3px;
    border-left-color: var(--color-border-soft);
    border-radius: var(--radius-md);
}

/*  Det som redan är tillåtet markeras i kanten, så att listan går
    att skumma utan att läsa varje rad */
.permission--granted {
    border-left-color: var(--color-success);
    background: var(--color-surface-hover);
}

/*  Genvägen längst ned. Den räknar inte upp ännu en funktion utan
    svarar ja på hela listan ovanför, och skiljs därför från raderna
    både med luft och med en tydligare kant. */
.permission--all {
    margin-top: var(--space-2);
    border-color: var(--color-border);
    border-left-color: var(--color-border-strong);
}

/*  Tar upp utrymmet så att knappen hamnar längst till höger */
.permission__text {
    flex: 1 1 auto;
    min-width: 0;
}

.permission__name {
    display: block;
    font-weight: 600;
    color: var(--color-heading);
}

.permission__why {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/*  De råa scope-namnen. Medvetet nedtonade men fullt läsbara -
    de är sanningen om vad som skickas till CCP. */
.permission .scope-list {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}

.permission__badge {
    flex: 0 0 auto;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);

    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: var(--color-heading);
    background: var(--color-surface-hover);
}


/*  4.16 Juridisk text
    --------------------------------------------------------------*/

.legal__summary {
    cursor: pointer;
    color: var(--color-text-faint);
    font-size: var(--text-xs);
}

.legal__text {
    margin-top: var(--space-3);
    max-width: none;
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-faint);
}


/*  4.17 Fältrader och hopfällbara avsnitt
    --------------------------------------------------------------*/

/*  Ett formulär som inte är en spalt text utan en rad inställningar.
    62ch räcker gott för ett fält i taget - inte för tre bredvid
    varandra. */
.form--wide {
    max-width: none;
}

/*  Flera fält bredvid varandra. flex-wrap gör att de lägger sig
    under varandra på en smal skärm, utan en egen mediefråga. */
.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.field-row > .field {
    /* Växer, krymper, men bryter hellre raden än blir smalare */
    flex: 1 1 11rem;
    min-width: 0;
}

/*  Hopfällt avsnitt: det som har vettiga standardvärden och därför
    inte behöver ta plats förrän någon vill ändra det. */
.details {
    margin: var(--space-5) 0 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-soft);
}

.details__summary {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
}

.details__summary:hover {
    color: var(--color-heading);
}

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


/*  4.18 Kalkylens svar
    --------------------------------------------------------------*/

/*  Motorns notiser: ett pris saknades, ett tak nåddes, en ritning
    pekar på sig själv. De ligger FÖRE siffrorna och inte i en fotnot
    - en summa som ser färdig ut men bygger på en lucka ska inte
    hinna bli trodd. */
.note-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
}

.note-list__item {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-sm);

    font-size: var(--text-sm);
    background: var(--color-surface-hover);
}

/*  Kostnad, intäkt och resultat bredvid varandra på en bred skärm
    och under varandra på en smal. auto-fit sköter det utan en
    mediefråga. */
.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-5);
    margin-top: var(--space-5);
}

.result-block__heading {
    margin: 0 0 var(--space-4) 0;

    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-faint);
}

/*  Etikett till vänster, tal till höger - som på ett kvitto. Den
    vanliga .data-list är byggd för breda värden och blir för trång
    i en av tre spalter. */
.result-block .data-list {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
}

.result-block .data-list dd {
    text-align: right;
}

/*  Talet man faktiskt letade efter */
.data-list__number--strong {
    font-weight: 600;
    color: var(--color-heading);
}


/*  4.19 Materialträdet
    --------------------------------------------------------------*/

.tree {
    display: flex;
    flex-direction: column;
    margin: var(--space-4) 0 0 0;
    padding: 0;
    list-style: none;
}

/*  Undernivåerna dras in och får en linje, så att det syns var en
    gren börjar och slutar utan att varje rad behöver en ram. */
.tree--nested {
    margin: 0 0 var(--space-3) var(--space-2);
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
}

.tree__item {
    margin: 0;
}

/*  display: block tar bort webbläsarens egen triangel. Vi ritar en
    egen på .tree__name nedan, av två skäl: den ska ligga i linje med
    namnet och inte med hela raden, och den ska följa textfärgen i
    varje tema utan att temafilerna behöver veta att den finns. */
.tree__summary {
    display: block;
    cursor: pointer;
}

.tree__summary::-webkit-details-marker {
    display: none;
}

.tree__summary .tree__name::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: var(--space-2);

    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;

    vertical-align: middle;
    transition: transform var(--transition);
}

.tree__node[open] > .tree__summary .tree__name::before {
    transform: rotate(90deg);
}

.tree__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);

    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.tree__name {
    flex: 1 1 12rem;
    overflow-wrap: anywhere;
}

/*  En rad som inte går att fälla ut har ingen triangel. Den får
    samma indrag ändå, annars ligger namnen i sicksack. */
.tree__item > .tree__row .tree__name {
    padding-left: calc(5px + var(--space-2));
}

.tree__quantity {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.tree__badge {
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);

    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: var(--color-text-muted);
    background: var(--color-surface-hover);
}

.tree__cost {
    min-width: 8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--color-heading);
}

/*  Vad det andra valet hade kostat, och vad som blir över. Egen rad
    (flex-basis 100%) därför att det är sammanhanget och inte svaret. */
.tree__extras {
    flex: 1 0 100%;

    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-4);
}

.tree__note {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}


/*  4.20 Byggboken
    --------------------------------------------------------------*/

/*  Listan är bred med flit - den är ett kalkylark - och får därför
    scrollas i sidled i sin egen behållare. Sidan i övrigt ska ALDRIG
    scrolla i sidled; det är skillnaden mellan en bred tabell och en
    trasig layout.

    tabindex på behållaren i HTML:en gör att den går att scrolla med
    tangentbordet. Utan det är innehållet till höger onåbart för den
    som inte använder mus. */
.ledger {
    overflow-x: auto;
    margin-top: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ledger__table {
    border-collapse: collapse;
    width: 100%;

    font-size: var(--text-sm);
    /* Siffror i samma kolumn ska stå under varandra */
    font-variant-numeric: tabular-nums;
}

/*  Kolumngrupperna: forskning, tillverkning, försäljning ... Samma
    indelning som i arket, och den är hela skälet till att en rad med
    tjugofem kolumner går att läsa. */
.ledger__group {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);

    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    white-space: nowrap;

    color: var(--color-text-faint);
    background: var(--color-surface-hover);
}

.ledger__head {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border);

    font-size: var(--text-xs);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;

    color: var(--color-text-muted);
    background: var(--color-surface-hover);
}

/*  Rubriken till en kolumn man själv fyller i. Markeringen sitter i
    kanten och inte i färgen på texten, så att den syns även för den
    som inte skiljer färger åt. */
.ledger__head--input {
    border-top: 2px solid var(--color-border-strong);
}

/*  Första kolumnen står stilla när listan scrollas i sidled. Utan
    den vet man inte vilken rad man läser när man kommit ut till
    vinstmarginalen.

    Bakgrunden MÅSTE vara ogenomskinlig - annars syns raden som
    passerar bakom. Därför --color-surface-solid och inte --color-surface. */
.ledger__sticky {
    position: sticky;
    left: 0;
    z-index: 1;

    text-align: left;
    background: var(--color-surface-solid);
    border-right: 1px solid var(--color-border);
}

/*  Gruppens avgränsare: användarens egen rubrik över de rader som
    hör ihop ("Siege Modules"). Den spänner över hela bredden och
    följer därför inte med i sidledsscrollen - det är meningen, den
    ska synas var man än befinner sig i listan. */
.ledger__group-row th {
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);

    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;

    color: var(--color-heading);
    background: var(--color-surface-hover);
}

.ledger__row:hover .ledger__cell {
    background: var(--color-surface-hover);
}

.ledger__cell {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-soft);

    text-align: left;
    white-space: nowrap;
}

/*  Talen högerställs, texten inte. VILKA kolumner som är tal avgörs av
    Builds::isNumeric() - inga kolumnnamn och ingen formatlista i den
    här filen. Klassen sitter på både rubriken och cellen under den,
    och därför ligger regeln EFTER .ledger__sticky: en förstakolumn som
    någon gång blir ett tal ska högerställas den också. */
.ledger__number {
    text-align: right;
}

/*  Vad du har skrivit, och vad motorn kom fram till. Skillnaden är
    värd att synas: det ena kan du rätta, det andra är ett svar. */
.ledger__cell--derived {
    color: var(--color-text-muted);
}

.ledger__cell--input {
    color: var(--color-text);
}

/*  Underrader dras in i första kolumnen. Att de är delkomponenter
    till raden ovanför är hela poängen med dem - se etapp 16. */
.ledger__cell--depth-1 { padding-left: var(--space-5); }
.ledger__cell--depth-2 { padding-left: var(--space-6); }
.ledger__cell--depth-3 { padding-left: var(--space-7); }
.ledger__cell--depth-4 { padding-left: var(--space-8); }

/*  Karaktären som bygger: porträtt och namn bredvid varandra */
.ledger__character {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ledger__portrait {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
}

/*  Cellen man kan skriva i är en KNAPP och inte ett klickbart <td>.
    Den ser ut som text men går att nå med tangentbordet och säger
    själv vad den gör - ett td med en klickhanterare är osynligt för
    den som inte använder mus.

    Markeringen är streckad understrykning och inte en färg: en cell
    som "går att ändra" ska synas även för den som inte skiljer
    färger åt, och en ram runt varje ruta skulle göra en tabell med
    tjugofem kolumner till ett rutnät man inte kan läsa. */
.ledger__edit {
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    color: inherit;
    text-align: inherit;

    cursor: pointer;
    border-bottom: 1px dashed var(--color-border-strong);
}

.ledger__edit:hover {
    color: var(--color-heading);
    border-bottom-style: solid;
}

/*  Rutan som ersätter cellens text medan man skriver. Bredden är
    liten med flit: en ruta som är bredare än sin kolumn skulle putta
    hela listan i sidled varje gång någon öppnade en. */
.ledger__input {
    width: 100%;
    min-width: 7rem;
    padding: var(--space-1) var(--space-2);

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

    font-family: inherit;
    font-size: var(--text-sm);

    color: var(--color-heading);
    background: var(--color-input);
}

.ledger__input--number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/*  Radens verktyg: hur det gick med sparandet, och papperskorgen.
    De ligger i den stilla första cellen därför att det är den enda
    som syns var man än befinner sig i sidledsscrollen. */
.ledger__tools {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);

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

/*  Höjden är låst så att raden inte hoppar när ett "sparat" dyker
    upp och försvinner igen. */
.ledger__save {
    flex: 1 1 auto;
    min-height: 1rem;
    font-weight: 600;
}

.ledger__save--working { color: var(--color-text-faint);  }
.ledger__save--ok      { color: var(--color-success);      }
.ledger__save--error   { color: var(--color-danger);       }

.ledger__remove {
    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    color: var(--color-text-faint);

    cursor: pointer;
    text-decoration: underline;
}

.ledger__remove:hover {
    color: var(--color-danger);
}

/*  Andra trycket raderar. Att den byter både text och färg är
    meningen - det finns ingen ångra-knapp när servern inte kan läsa
    det den raderar. */
.ledger__remove--armed {
    color: var(--color-danger);
    font-weight: 600;
}

/*  Räkna om raden, och motorns notiser om den. Samma form som
    papperskorgen - de tre är radens verktyg och ska se ut som en
    grupp, inte som tre olika sorters knappar. */
.ledger__recalc,
.ledger__parts-open,
.ledger__flag {
    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    color: var(--color-text-faint);

    cursor: pointer;
    text-decoration: underline;
}

.ledger__recalc:hover,
.ledger__parts-open:hover,
.ledger__flag:hover {
    color: var(--color-link);
}

/*  En knapp som är avstängd medan omräkningen pågår ska SE avstängd
    ut. Utan det ser en död knapp ut som en trasig knapp. */
.ledger__recalc[disabled] {
    cursor: default;
    text-decoration: none;
    opacity: 0.5;
}

/*  Notisen säger att svaret på raden inte är helt - ett saknat pris
    gör summan till en undre gräns. Färgen är varningens. */
.ledger__flag {
    color: var(--color-warning);
    font-weight: 600;
}

/*  Notiserna ligger i en egen rad UNDER raden de gäller, i en cell som
    spänner över alla kolumner. */
.ledger__note-cell {
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-solid);
    border-bottom: 1px solid var(--color-border);
}

/*  Cellen ovan är alltså lika bred som hela listan - tjugofem
    kolumner - och en text som lades rakt in i den hade fortsatt långt
    ut till höger om skärmkanten.

    Behållaren STÅR DÄRFÖR STILLA vid vänsterkanten, precis som
    listans första kolumn gör. Skälet är detsamma: en notis som bara
    syns om man scrollat tillbaka hela vägen är ingen notis. */
.ledger__notes {
    position: sticky;
    left: 0;

    max-width: 70ch;
    white-space: normal;
}

/*  Tidpunkten svaret räknades. Ett gammalt svar bär sin ålder i
    TEXTEN och inte bara i färgen - annars säger märkningen ingenting
    till den som inte skiljer färger åt. */
.ledger__stamp--old {
    color: var(--color-warning);
}

/*  ATT FÄLLA IHOP UNDERRADERNA

    Knappen sitter först i radens verktyg och bär antalet i TEXTEN -
    en pil som bara pekar åt ett håll säger ingenting om hur mycket
    som göms. Den är bredare än de andra knapparna för att den ska gå
    att träffa utan att sikta. */
.ledger__fold {
    flex: 0 0 auto;

    padding: 0 var(--space-2);
    border: 0;
    background: none;

    font: inherit;
    color: var(--color-text-muted);

    cursor: pointer;
}

.ledger__fold:hover {
    color: var(--color-link);
}

/*  RADENS EGNA MATERIAL, i samma sorts rad som notiserna och därför
    med samma stillastående behållare (.ledger__notes). */
.ledger__parts-head {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    color: var(--color-heading);
}

.ledger__parts {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*  En rad per material: vad det är, hur mycket, vad det kostar och
    knappen som lyfter ut det. Talen står i egna kolumner med fast
    bredd så att listan går att läsa nedåt och inte bara framåt. */
.ledger__part {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);

    padding: var(--space-1) 0;
    border-bottom: 1px solid var(--color-border-soft);
}

.ledger__part-name {
    flex: 1 1 auto;
    min-width: 12ch;
}

.ledger__part-quantity {
    flex: 0 0 auto;
    color: var(--color-text-muted);
}

.ledger__part-cost {
    flex: 0 0 auto;
    min-width: 12ch;

    text-align: right;
    font-variant-numeric: tabular-nums;
}

/*  Redan utlyft. Står som text och inte som en avstängd knapp: en
    knapp som inte går att trycka på ser trasig ut, en mening
    förklarar. */
.ledger__part-done {
    flex: 0 0 auto;
    color: var(--color-text-faint);
}

.ledger__lift {
    flex: 0 0 auto;

    padding: 0;
    border: 0;
    background: none;

    font: inherit;
    color: var(--color-link);

    cursor: pointer;
    text-decoration: underline;
}

.ledger__lift[disabled] {
    cursor: default;
    text-decoration: none;
    opacity: 0.5;
}

.ledger__parts-note {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
}


/*------------------------------------------------------------------
//
//	5. Mindre skärmar
//
------------------------------------------------------------------*/

@media (max-width: 900px) {

    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        padding-top: var(--space-4);
    }

    .sso-card {
        position: static;
        /* Inloggningen ska ligga överst på en telefon */
        order: -1;
    }

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

@media (max-width: 600px) {

    /*  Knappen får inte tryckas ihop mot texten */
    .permission {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .site-header,
    .site-main,
    .site-footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .panel,
    .sso-card {
        padding: var(--space-5);
    }

    .data-list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1) 0;
    }

    .data-list dd {
        margin-bottom: var(--space-3);
    }

    .brand__tagline {
        display: none;
    }
}