@charset "UTF-8";
/* GENERERAD FIL. Ändra inte här, ändringen skrivs över.
   Redigera källorna i shared/ och admin/assets/admin.css i stället. */

/* ===== shared/fonts.css ===== */
/* ============================================================
   ACCOUNTO — TYPSNITT
   ------------------------------------------------------------
   GENERERAD FIL. Kör scripts/hamta-typsnitt.mjs för att
   uppdatera den.

   Sökvägarna är relativa till den byggda CSS-filen, alltså
   assets/build/site.css, och byggskriptet lägger filerna i
   assets/build/fonts/ bredvid.
   ============================================================ */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-2.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-500-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-2.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-600-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700-2.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700-3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-700-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-2.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-2.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-2.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-2.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-4.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-400-5.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-2.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-serif-400-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===== shared/tokens.css ===== */
/* ============================================================
   ACCOUNTO — TOKENS
   ------------------------------------------------------------
   Enda sanningen om färger, radier, typsnitt och rörelse.
   Läses av accounto.se, app.accounto.se och admin.accounto.se.

   Ändrar du en färg här ändras den på alla tre domänerna. Det är
   hela poängen med filen. Skriv aldrig en råfärg direkt i en
   komponent, läs den härifrån.
   
   Fyra idéer styr systemet:
   
   1. STORA RADIER. Allt som är en yta är en rundad platta.
      Skalan går 1 → 1.5 → 2 → 2.5 → 3.25rem.
   
   2. LEVANDE OMBRE. Bakgrunder är drivande gradienter i
      smörgult och blått ovanpå gräddvitt, med kornstruktur.
   
   3. REGISSERAD SCROLL. Text rullar, bilden står stilla.
      Samma ljusa grundton hela vägen ner.
   
   4. TVÅ TYPSNITT. IBM Plex Sans bär allt utom etiketter
      och siffror, som går i IBM Plex Mono.
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* --- Ytor --- */
  --paper:      #F6F4EC;   /* gräddvit grundton */
  --surface:    #FCFBF7;   /* kort på gräddvitt */
  --ink:        #11120F;   /* text */

  /* --- Identitet --- */
  --blue:       #2D5BFF;
  --blue-deep:  #123AA6;
  --blue-tint:  #E7EBF7;
  --butter:     #FFE7AA;   /* accent på mörka kort och i sidfoten */
  --butter-dim: #F5D68A;
  --green:      #0D8066;
  --red:        #C62A21;   /* enbart för sådant som kräver en åtgärd */

  /* --- Text --- */
  --muted:      #63665E;

  /* --- Linjer --- */
  --rule:       rgba(17, 18, 15, 0.10);
  --rule-2:     rgba(17, 18, 15, 0.18);

  /* --- Radier: generösa, i en tydlig skala --- */
  --r-xs:   0.75rem;
  --r-sm:   1rem;
  --r-md:   1.5rem;
  --r-lg:   2rem;
  --r-xl:   2.5rem;
  --r-pill: 999px;

  /* --- Djup --- */
  --sh-1: 0 1px 2px rgba(17,18,15,.04), 0 4px 10px rgba(17,18,15,.04);
  --sh-2: 0 4px 16px rgba(17,18,15,.05), 0 18px 40px rgba(17,18,15,.07);
  --sh-3: 0 10px 30px rgba(17,18,15,.06), 0 40px 80px rgba(17,18,15,.10);
  --sh-glow: 0 40px 80px -40px rgba(45,91,255,.35);

  /* --- Typsnitt --- */
  --font: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* --- Mått --- */
  --wrap: 80rem;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);
  --header-h: 4.5rem;

  /* --- Rörelse ---
     Skalan går från tryck till temaskifte. Skriv aldrig en egen
     millisekund i en komponent, hämta den härifrån, annars driver
     tiderna isär och gränssnittet slutar låta som en enda sak.

     --t-press är den viktigaste. Återkoppling på ett nedtryck ska
     ligga runt hundra millisekunder. Blir den längre hinner fingret
     släppa innan något syns, och trycket känns obesvarat. */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Spegelvänd --ease-out, för vägen tillbaka. En kurva som bromsar
     in på vägen ut ska accelerera på vägen hem, annars ser de två
     riktningarna ut att lyda olika fysik. Räknas fram som
     (1-x2, 1-y2, 1-x1, 1-y1) ur --ease-out. */
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --t-press:  100ms;   /* nedtryck: knappar, flikar, rader */
  --t-fast:   220ms;   /* hover, fokus, små tillståndsbyten */
  --t-slow:   800ms;   /* temaskifte över hela ytan */

  /* --- Genomskinligt chrome ---
     Topprader och den mobila bottenmenyn är samma material på alla
     tre domänerna. Ligger värdena här i stället för att skrivas av
     i app.css och admin.css kan de aldrig glida isär, och de kan
     bytas ut i ett svep när besökaren bett om mindre genomskinlighet
     eller högre kontrast. Se blocken längst ned i base.css. */
  --chrome-bg:        rgba(255, 255, 255, 0.72);
  --chrome-blur:      blur(20px) saturate(180%);

  /* --- Aktiva färgroller. Komponenter läser dessa, aldrig
         råfärgerna ovan. --- */
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-muted:  var(--muted);
  --card:      var(--surface);
  --line:      var(--rule);
  --attention: var(--red);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}


/* ===== shared/base.css ===== */
/* ============================================================
   ACCOUNTO — BAS
   ------------------------------------------------------------
   Komponenter som marknadssajten, tjänsten och adminvyn använder:
   typografi, knappar, formulär, etiketter och layoutbredder.

   Ligger något här måste det se likadant ut på alla tre domänerna.
   Är det bara till för en av dem hör det hemma i web/assets/site.css,
   app/assets/app.css eller admin/assets/admin.css i stället.
   ============================================================ */
/* ------------------------------------------------------------
   TYPOGRAFI
   Rubriker sitter tätt: radavstånd runt 1.0 och negativ
   spärr. Ingressen är stor. Brödtexten är lugn.

   Spärren är storleksberoende och aldrig ett enda värde för
   allt. Bokstäver ser ut att glida isär när graden växer, så
   stora rubriker behöver dras ihop, medan riktigt liten text
   behöver luftas för att gå att läsa. Ett fast letter-spacing
   är per definition fel i någon ände av skalan.

   IBM Plex ligger här som en statisk skärning per vikt, så det
   finns ingen opsz-axel för webbläsaren att justera. Spärrskalan
   nedan är handgjorda motsvarigheten. font-optical-sizing står
   med för den dag en variabel skärning byts in.
   ------------------------------------------------------------ */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.02;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 { font-size: clamp(2.75rem, 6.4vw, 6rem);   letter-spacing: -0.03em;  line-height: 0.96; }
h2 { font-size: clamp(2.125rem, 4.4vw, 3.75rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); letter-spacing: -0.015em; line-height: 1.08; }
h4 { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); letter-spacing: -0.005em; line-height: 1.2; font-weight: 600; }

/* Det betonade ordet i en rubrik. Bär betydelse, inte dekor. */
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--blue);
  transition: color var(--t-slow) var(--ease);
}

p { margin: 0 0 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
img, svg { max-width: 100%; display: block; }
[id] { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* Ingen egen radie här. Konturen följer elementets form av sig
   själv, så en kapselknapp får en kapselformad ring. Raden satte
   tidigare border-radius på själva elementet, vilket kunde platta
   till formen på allt som inte råkade deklarera sin radie senare
   i kaskaden. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section-tight { padding-block: clamp(3.5rem, 7vh, 5.5rem); position: relative; }

/* ------------------------------------------------------------
   KORNSTRUKTUR
   En knappt synlig ojämnhet ovanpå gradienter. Utan den ser
   mjuka övergångar plastiga ut på stora skärmar.
   ------------------------------------------------------------ */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   KNAPPAR
   Etiketten rullar uppåt vid hover och en kopia kommer
   underifrån. Pilen sitter i en egen rund bricka.
   ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font);
  font-size: 1rem; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn:hover { transform: translateY(-2px); }

/* Nedtrycket, och det viktigaste tillståndet av de tre.
   Hover finns inte på en pekskärm, så utan den här raden får
   den som använder telefon ingen bekräftelse alls på att
   trycket gick fram. Knappen sjunker in under fingret, snabbt
   nog att hinna före släppet. Vägen tillbaka får gå i --t-fast,
   så att intrycket är kvickt och återgången lugn. */
.btn:active {
  transform: scale(0.97);
  transition-duration: var(--t-press);
}

/* Rullande etikett */
.btn-label { position: relative; display: grid; overflow: hidden; }
.btn-label > span {
  grid-area: 1 / 1;
  transition: transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.btn-label > span:last-child { transform: translateY(115%); opacity: 0; }
.btn:hover .btn-label > span { will-change: transform, opacity; }
.btn:hover .btn-label > span:first-child { transform: translateY(-115%); opacity: 0; }
.btn:hover .btn-label > span:last-child { transform: none; opacity: 1; }

/* Pilbricka */
.btn-arrow {
  flex: none;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.btn-arrow svg {
  width: 1.0625rem; height: 1.0625rem;
  transition: transform var(--t-fast) var(--ease-out);
}

/* Pilen knuffas åt det håll knappen leder, och stannar kvar.
   Tidigare sköts den 140% åt höger inuti en bricka med
   overflow: hidden, så brickan stod tom så länge pekaren låg
   still. Ingenting kom in i stället, för det finns bara en pil
   i markupen. En knuff säger samma sak och pekar dessutom mot
   utfallet i stället för bort från det. */
.btn:hover .btn-arrow svg { transform: translateX(4px); }

/* Varianter */
.btn-blue { --btn-bg: var(--blue); --btn-fg: #fff; }
.btn-blue:hover { --btn-bg: var(--blue-deep); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--rule-2);
}
.btn-ghost .btn-arrow { background: rgba(17, 18, 15, 0.07); }
.btn-ghost:hover { --btn-bg: rgba(17, 18, 15, 0.04); border-color: var(--fg); }

/* Textlänk med pil */
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;
  font-weight: 600; font-size: 0.9375rem;
  color: var(--blue);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
/* Samma utseende när pilen sitter på en knapp, som Skriv den första
   på fakturasidan. Annars får den webbläsarens ram och grå botten. */
button.cta { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }

.cta svg { width: 1.0625rem; height: 1.0625rem; transition: transform var(--t-fast) var(--ease); }
.cta:hover svg { transform: translateX(4px); }

/* En textlänk ska inte skalas som en knapp, den sitter mitt i
   brödtext och skulle knuffa raderna omkring sig. En kort dipp i
   opacitet säger samma sak utan att flytta något. */
.cta:active { opacity: 0.6; transition-duration: var(--t-press); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; }

/* ------------------------------------------------------------
   HJÄLPKLASSER

   Finns för att innehållspolicyn förbjuder style-attribut.
   Varje style="..." i HTML är en lucka som ett injicerat
   värde kan ta sig igenom, så vi tillåter inget alls och
   lägger småjusteringarna här i stället.

   Håll listan kort. Behöver du en femte marginal är det ett
   tecken på att avsnittet borde ha en egen klass.
   ------------------------------------------------------------ */
.t-center { text-align: center; }

.mt-1 { margin-top: 0.75rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.25rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 1.75rem; }
.mt-6 { margin-top: 2rem; }

/* ------------------------------------------------------------
   LOGOTYP
   ------------------------------------------------------------ */

.logo { display: inline-block; line-height: 0; }

.logo-mark { height: 1.5rem; width: auto; display: block; transition: transform var(--t-fast) var(--ease); }
.logo:hover .logo-mark { transform: scale(1.03); }

/* ============================================================
   FORMULÄR
   ============================================================ */
.form { display: grid; gap: 1.375rem; max-width: 38rem; }
.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.9375rem; font-weight: 600; }

.field input, .field select, .field textarea {
  font-family: var(--font); font-size: 1rem; color: var(--fg);
  background: var(--card);
  border: 1.5px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: 0.875rem 1.125rem; min-height: 3.25rem; width: 100%;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint);
}

.field .error { font-size: 0.875rem; font-weight: 600; color: #B3261E; margin: 0; }
.field [aria-invalid="true"] { border-color: #B3261E; }

.form-status { font-size: 1rem; border-radius: var(--r-sm); }
.form-status:not(:empty) { padding: 1.125rem 1.375rem; border: 1.5px solid var(--rule-2); background: var(--card); }
.form-status[data-state="ok"] { border-color: var(--green); background: #E4F3EE; color: var(--ink); }
.form-status[data-state="error"] { border-color: #B3261E; background: #FDF0EE; color: var(--ink); }

.form-note { font-size: 0.9375rem; color: var(--fg-muted); }

/* ============================================================
   JURIDISK TEXT
   ============================================================ */
.legal h2 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); margin: 3rem 0 1rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--fg-muted); }
.legal ul, .legal ol { padding-left: 1.25rem; margin: 0 0 1.25rem; }
.legal li { margin-bottom: 0.5rem; }
.legal .updated { font-family: var(--font-mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

/* ============================================================
   HOPPA TILL INNEHÅLL
   ============================================================ */
.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.875rem 1.375rem; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 600;
  /* Låg utanför bilden via top: -6rem tidigare, vilket betyder att
     webbläsaren räknar om layouten under hela infarten. transform
     gör samma resa på kompositorn, utan att röra flödet. */
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform var(--t-fast) var(--ease-out);
}

.skip:focus { transform: none; }

/* ------------------------------------------------------------
   SMÅ SKÄRMAR
   ------------------------------------------------------------ */

@media (max-width: 560px) {
  .btn { padding-left: 1.25rem; font-size: 0.9375rem; }
  .actions .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   TILLGÄNGLIGHET: TRE OBEROENDE ÖNSKEMÅL
   ------------------------------------------------------------
   Besökaren kan be om mindre rörelse, mindre genomskinlighet
   eller högre kontrast, var för sig. De tre blocken nedan svarar
   på var sitt, och de kan slå till samtidigt.
   ============================================================ */

/* ------------------------------------------------------------
   MINDRE RÖRELSE
   ------------------------------------------------------------
   Mindre rörelse betyder en mildare motsvarighet, inte utebliven
   återkoppling. Den gamla regeln nollade varenda övergång, även
   rena färgtoningar, och det gjorde gränssnittet stummare än
   nödvändigt: temaskiftet blev ett tvärt hopp i ljushet över hela
   skärmen, vilket är precis det man vill undvika för den som är
   känslig.

   Nu stryker vi det som rör sig i rummet, alltså transform och
   förflyttning, och låter opacitet och färg tona kvar. De säger
   fortfarande vad som hände, utan att något åker någonstans.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color,
                         outline-color, box-shadow, fill, stroke !important;
    transition-duration: 200ms !important;
  }

  /* Nedtrycket ska fortfarande synas. Knappen mörknar i stället
     för att sjunka in, så bekräftelsen finns kvar utan rörelse. */
  .btn:active { transform: none; filter: brightness(0.93); }
}

/* ------------------------------------------------------------
   MINDRE GENOMSKINLIGHET
   ------------------------------------------------------------
   Topprader och bottenmeny blir täckande i stället för frostade.
   Eftersom materialet bor i tokens räcker det att byta dem här.
   ------------------------------------------------------------ */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --chrome-bg:        #FFFFFF;
    --chrome-blur:      none;
  }

  dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ------------------------------------------------------------
   HÖGRE KONTRAST
   ------------------------------------------------------------
   Nästan täckande ytor med en linje som faktiskt syns, och en
   dämpad textfärg som slutar vara dämpad.
   ------------------------------------------------------------ */
@media (prefers-contrast: more) {
  :root {
    --chrome-bg:        #FFFFFF;
    --chrome-blur:      none;
    --line:             var(--rule-2);
    --fg-muted:         #43463F;
  }

  dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn-ghost { border-color: var(--fg); }
}

/* ------------------------------------------------------------
   SCROLLVAKT
   Ett osynligt märke högst upp i dokumentet. En IntersectionObserver
   tittar på det och vet därmed om sidan har lämnat toppen, utan att
   någon behöver lyssna på scroll-händelser. Används av sidhuvudet
   på marknadssajten och av toppraden i tjänsten.
   ------------------------------------------------------------ */
.scroll-vakt {
  position: absolute; top: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* Ett dolt element ska förbli dolt även när komponenten använder grid eller flex. */
[hidden]:not([hidden="until-found"]) { display: none !important; }


/* ===== shared/produkt.css ===== */
/* ============================================================
   ACCOUNTO — PRODUKTLAGRET
   ------------------------------------------------------------
   Läses bara av app.accounto.se och admin.accounto.se, aldrig av
   marknadssajten. Byggs in av build.mjs för de mål som har
   produkt: true.

   Varför lagret finns: en säljsida och ett arbetsredskap har
   olika jobb. Sajten ska övertyga någon som är där en gång, och
   då bär stora radier, luft och mjuka toner. Tjänsten ska bära
   siffror för någon som är där varje vecka, och då är samma
   former mest i vägen. Fortnox, Stripe och Linear ser inte ut som
   sina egna marknadssajter, av precis det skälet.

   Identiteten är oförändrad. Samma kungsblått, samma smörgult,
   samma två typsnitt. Det som ändras är formen, ytdjupet och
   typografins skala.
   ============================================================ */

:root {
  /* --- RADIER ------------------------------------------------
     Sajten går 12 till 52 px. Första försöket här gick till 2 till
     8 och blev kantigt: två pixlar läser inte som skarpt utan som
     att någon glömde sätta en radie, och det är den formen som gör
     att ett gränssnitt ser ut att vara ritat 2010.

     Bandet där skarpt och modernt möts ligger på 6 till 12 px. Det
     är där Linear, Stripes adminytor och Vercel ligger, och det är
     stort nog att kanten syns som ett val.

     Pillret finns kvar, men bara där det hör hemma: statusbrickor,
     formatchips och filterknappar. Aldrig på en knapp som utför
     något, den ska vara en rektangel med mjuk kant. ------- */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* --- YTOR I STEG -------------------------------------------
     Två ytor som betyder något, inte fyra som liknar varandra.
     Arbetsytan är varmt ljusgrå och korten är vita. Det är hela
     skillnaden, och den räcker: ett vitt kort på varm grå botten
     syns utan att behöva vare sig skugga eller kraftig ram.

     Steg noll finns kvar för det som ska läsas som en urholkning
     i stället för som ett kort, till exempel fält och tomrutor.
     -------------------------------------------------------- */
  --yta-0:  #EAE8E0;   /* urholkat: tomrutor, inramade ytor */
  --yta-1:  #F3F1EA;   /* arbetsytan */
  --yta-2:  #FFFFFF;   /* kort och rader */
  --yta-3:  #FFFFFF;   /* det som ligger överst: menyer, ark, fält */
  --yta-hov: #F7F6F1;  /* raden musen står på */

  --bg:     var(--yta-1);
  --card:   var(--yta-2);

  /* --- MÖRKBLÅTT ----------------------------------------------
     Navigeringens färg. Den är inte svart, för svart väger tyngre
     än innehållet, och den är inte kungsblå, för då konkurrerar
     vägen dit med den enda knapp som utför något. Samma kulör som
     kungsblått men nere i botten av skalan, så att pelaren och
     handlingsfärgen hör ihop utan att låta lika.
     -------------------------------------------------------- */
  --navy:       #131A2F;
  --navy-djup:  #0E1424;
  --pa-navy:       rgba(241, 243, 250, 0.68);  /* text som vilar */
  --pa-navy-stark: #FFFFFF;                     /* text som gäller */

  /* --- LINJER -------------------------------------------------
     Hårfina och återhållna. Med vita kort på varm grå botten bär
     ytskillnaden avgränsningen, och ramen behöver bara bekräfta
     den. ----------------------------------------------------- */
  --rule:   rgba(19, 26, 47, 0.09);
  --rule-2: rgba(19, 26, 47, 0.14);
  --line:   var(--rule);

  /* --- DJUP ---------------------------------------------------
     Nästan ingen. Ett arbetsredskap som lägger skugga under varje
     kort ser ut som en samling lappar på ett bord. Skuggan är
     kvar bara för det som verkligen svävar: menyer, ark och
     dialoger. ------------------------------------------------ */
  --sh-1: none;
  --sh-2: 0 1px 2px rgba(19,26,47,.05), 0 4px 10px -6px rgba(19,26,47,.12);
  --sh-3: 0 2px 6px rgba(19,26,47,.06), 0 18px 40px -18px rgba(19,26,47,.28);
  --sh-glow: 0 0 0 3px var(--blue-tint);

  /* --- DATASKALAN ---------------------------------------------
     Färg som bär betydelse i tabeller och listor. Fyra roller,
     inte fler, och var och en har både en yta och en textfärg
     som klarar 4,5:1 mot den ytan. Färgen står aldrig ensam:
     varje bricka har också ord, se regeln om att inget får
     bäras av färg allena. ---------------------------------- */
  --data-info:     #E4EAFB;  --data-info-fg:     #1B3E9B;  /* mottaget, aktivt */
  --data-klar:     #DCEFE7;  --data-klar-fg:     #08624E;  /* bokfört, klart */
  --data-vilar:    #F3EFE0;  --data-vilar-fg:    #6B5A16;  /* vilande, väntar */
  --data-neutral:  #ECEAE1;  --data-neutral-fg:  #4A4C46;  /* arkiv, utan status */

  /* --- TYPOGRAFI ----------------------------------------------
     En skala i stället för clamp() överallt. Ett arbetsredskap
     behöver inte skala rubriker med fönstret, det behöver samma
     storlek varje gång så att ögat hittar tillbaka. -------- */
  --t-11:  0.6875rem;
  --t-12:  0.75rem;
  --t-13:  0.8125rem;
  --t-14:  0.875rem;
  --t-15:  0.9375rem;
  --t-16:  1rem;
  --t-18:  1.125rem;
  --t-20:  1.25rem;
  --t-24:  1.5rem;
  --t-26:  1.625rem;

  /* --- SKALET -------------------------------------------------
     Toppraden är chrome och inte innehåll. Sajtens 72 px är rätt
     för en sidhuvudsplatta som ska synas, men i ett fönster man
     arbetar i ska den ta så lite plats som den kan och ändå bära
     logotyp och bolagsväljare. ----------------------------- */
  --header-h: 3.75rem;
}

/* ------------------------------------------------------------
   TYPOGRAFIN

   Sajtens rubriker är plakat: sex rem, spärr på minus fem
   procent. Här är de etiketter på innehåll. Fast storlek, lugnare
   spärr, och brödtexten går ner till 15 px eftersom raderna är
   korta och täta.
   ------------------------------------------------------------ */
body {
  font-size: var(--t-15);
  line-height: 1.55;
  background: var(--yta-1);
}

/* Spärren följer graden här också, men i mindre steg. Rubrikerna
   är etiketter på innehåll och inte plakat, så de ska dras ihop
   precis så mycket att de ser satta ut, inte mer. Raderna stod
   tidigare på noll rakt igenom, vilket kommentaren ovan redan
   kallade lugnare spärr utan att koden gjorde det. */
h1 { font-size: var(--t-26); letter-spacing: -0.021em; line-height: 1.15; font-weight: 600; }
h2 { font-size: var(--t-16); letter-spacing: -0.01em;  line-height: 1.3;  font-weight: 600; }
h3 { font-size: var(--t-15); letter-spacing: -0.005em; line-height: 1.3;  font-weight: 600; }
h4 { font-size: var(--t-14); letter-spacing: 0;        line-height: 1.35; font-weight: 600; }

/* Varje siffra i gränssnittet ska stå i samma kolumn oavsett
   vilken siffra det är. Utan det hoppar belopp och datum i en
   lista, och det är det tydligaste tecknet på att något inte är
   byggt för tal. */
.stat-value, .doc-meta, .year-meta, .kv-row dd, .admin-mono,
.dz-formats li, .source, .status, .admin-status, .admin-count,
.company-meta, .lookup-meta {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Etiketterna i monotypsnittet var spärrade som på en affisch.
   Här är de fältnamn, och då räcker halva spärren. */
.admin-count, .source, .admin-status {
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------
   KNAPPARNA

   Rektanglar, lägre höjd och ingen rullande etikett. Rullningen
   är en säljgest: den ber om uppmärksamhet varje gång musen
   passerar. I ett arbetsredskap trycker man på samma knapp
   femtio gånger i veckan och vill att den sitter still.

   Pilbrickan följer knappens form i stället för att vara en cirkel
   i en rektangel.
   ------------------------------------------------------------ */
.btn {
  min-height: 2.5rem;
  padding: 0.4375rem 0.4375rem 0.4375rem 0.875rem;
  border-radius: var(--r-sm);
  font-size: var(--t-14);
  font-weight: 600;
  letter-spacing: 0;
  gap: 0.5rem;
  box-shadow: var(--sh-1);
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:hover  { transform: none; box-shadow: var(--sh-2); }

/* Tjänstens knappar lyfter inte vid hover, de byter skugga. Då ska
   nedtrycket inte heller lyfta, utan trycka in: skuggan går bort
   och plattan sjunker en aning. Samma besked som på marknadssajten,
   översatt till det här lagrets språk.

   Raden lämnade tidigare transform: none, vilket betydde att ett
   tryck i tjänsten inte syntes alls. Det är den yta som används
   varje dag, och på telefon finns ingen hover att falla tillbaka på. */
.btn:active {
  transform: scale(0.97);
  box-shadow: none;
  transition-duration: var(--t-press);
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; filter: brightness(0.93); }
}

/* Etiketten står still. Den andra kopian i markeringen behövs
   fortfarande för att sajten delar samma HTML, så den göms. */
.btn-label > span:last-child { display: none; }
.btn:hover .btn-label > span:first-child { transform: none; opacity: 1; }

.btn-arrow {
  width: 1.625rem; height: 1.625rem;
  border-radius: var(--r-xs);
}
/* Brickan är en ljusning i knappens egen färg. På en vit knapp
   syns ingen ljusning, så där blir den en skuggning i stället. */
.btn-ghost .btn-arrow { background: rgba(19, 26, 47, 0.06); }

.btn-arrow svg { width: 0.9375rem; height: 0.9375rem; }
/* Tjänstens bricka är mindre än marknadssajtens, så knuffen är
   mindre. Stod tidigare på 120%, vilket sköt ut pilen ur en
   bricka med overflow: hidden och lämnade den tom. */
.btn:hover .btn-arrow svg { transform: translateX(3px); }

/* Sekundärknappen är vit med hårfin ram. Kungsblått är den enda
   fyllda knappen i tjänsten, och den finns en gång per vy. Allt
   annat som går att trycka på ska synas utan att ta plats. */
.btn-ghost {
  --btn-bg: var(--yta-2);
  --btn-fg: var(--fg);
  border-color: var(--rule-2);
}
.btn-ghost:hover { --btn-bg: var(--yta-hov); border-color: var(--rule-2); }

/* ------------------------------------------------------------
   FÄLTEN
   ------------------------------------------------------------ */
.field label { font-size: var(--t-14); }
.field input, .field select, .field textarea {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border-width: 1px;
  border-radius: var(--r-sm);
  background: var(--yta-3);
  font-size: var(--t-14);
}
.field input:focus, .field select:focus, .field textarea:focus {
  box-shadow: 0 0 0 3px var(--blue-tint);
}
.form-note { font-size: var(--t-13); }
.form-status { border-radius: var(--r-sm); }

/* ------------------------------------------------------------
   FOKUS

   Sajten ritar en tre pixlar tjock ring tre pixlar utanför
   elementet. På täta rader krockar den med grannen. Två pixlar
   tätt intill, plus en ljus linje under, syns lika bra utan att
   knuffa på layouten.
   ------------------------------------------------------------ */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* ------------------------------------------------------------
   AVSTÅND

   Sektionerna på sajten andas i nio rem. Här är det slöseri med
   skärm: allt hamnar under vecket och man rullar för att se det
   som borde ha stått bredvid.
   ------------------------------------------------------------ */
.section-tight { padding-block: 1.75rem; }

/* Ytorna fyller fönstret. Marknadssajtens åttiorems-tak finns för
   att en textrad inte ska bli oläsligt lång, men här är det
   tabeller, listor och kort som ska ha plats. De enskilda
   textblocken har egna ch-mått i stället, vilket är rätt ställe
   att sätta läsbredd på: på texten, inte på fönstret. */
.wrap { max-width: 84rem; padding-inline: 1.75rem; }

@media (max-width: 620px) {
  .wrap { padding-inline: 1rem; }
}

/* ------------------------------------------------------------
   PEKYTOR PÅ SMÅ SKÄRMAR

   Täta kontroller är rätt vid en mus och fel vid ett finger.
   Fyrtio pixlar går bra att träffa med en pekare men ligger under
   gränsen på fyrtiofyra som både Apple och Google sätter. Under
   sidomenyns brytpunkt växer därför allt som går att trycka på
   tillbaka till fyrtiofyra pixlar. Formen ändras inte, bara höjden.
   ------------------------------------------------------------ */
@media (max-width: 880px) {
  .btn { min-height: 2.75rem; }
  .field input, .field select, .field textarea { min-height: 2.75rem; }
  .filters button, .company-switch, .admin-ghost, .linkish { min-height: 2.75rem; }
}

/* Delade komponenter för app och admin. */
.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Remsan som säger vilken miljö man är i. Den var svart, i
   monoversaler med tio procents spärr, och tog därmed mer
   uppmärksamhet än allt annat på sidan. Den ska säga sitt och
   sedan hålla tyst: låg, i samma mörkblå som navigeringen, och
   med vanliga gemener. */
.protobar {
  position: relative; z-index: 60;
  padding: 0.4375rem 1.25rem;
  background: var(--navy-djup); color: var(--pa-navy);
  font-size: var(--t-12); font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}
.protobar b { color: var(--pa-navy-stark); font-weight: 500; }
/* Testmiljön, test.accounto.se och test-admin.accounto.se. Smörgul
   och tydligare än den lokala remsan, så att den aldrig förväxlas med
   tjänsten kunderna använder. Se dokumentation/testmiljo.md. */
.protobar.protobar-test {
  background: var(--butter); color: var(--ink);
  border-bottom: 1px solid var(--butter-dim);
  font-weight: 500;
}
.protobar.protobar-test b { color: var(--ink); font-weight: 600; }
/* Dold tills skriptet har sett att sidan körs lokalt eller som demo.
   På app.accounto.se och admin.accounto.se ska kunderna aldrig läsa
   att deras uppgifter är exempel eller försvinner. */
.protobar:not(.synlig) { display: none; }

.list-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}


/* ===== admin/assets/admin.css ===== */


/* ------------------------------------------------------------
   INTERN ADMINVY

   Medvetet ett annat gränssnitt än kundens: en tät tabell i
   stället för rundade kort, mörk topprad utan svävande platta.
   Samma tokens, samma typsnitt, men skild känsla, så att ingen
   av misstag tror att det är samma yta som kunden ser.

   Sidan länkas ingenstans ifrån i kundflödet och ligger på sin
   egen subdomän. Läs noten högst upp på sidan innan något av
   det här byggs på riktigt.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   RAMEN: SIDOMENY OCH ARBETSYTA

   Mörkblå meny till vänster, samma kulör som pelaren i kundens
   app, och en ljus arbetsyta med vita kort till höger. Menyn
   ligger kvar när ytan scrollar. Under 900 px blir den en rad
   överst, så att tabellerna får hela bredden.
   ------------------------------------------------------------ */
.adm-ram {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: 100vh;
}
.adm-meny {
  position: sticky; top: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  padding: 1.75rem 0 1.25rem;
  background: var(--navy); color: var(--pa-navy);
  /* Ingen egen scroll: då skulle snabbsökningens träfflista klippas
     vid menyns kant. Menyn är kort nog att alltid få plats. */
  z-index: 10;
}
.adm-marke {
  display: grid; justify-items: center; gap: 0.625rem;
  padding: 0 1.25rem 1.5rem;
  margin: 0 1rem 1rem;
  border-bottom: 1px solid rgba(241, 243, 250, 0.14);
  text-decoration: none;
}
.adm-marke-ord { width: 9.5rem; height: auto; }
.adm-marke-miljo {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pa-navy);
}
.adm-nav { display: grid; gap: 0.125rem; padding: 0 0.75rem; }
.adm-nav-lank {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-xs);
  color: var(--pa-navy); text-decoration: none;
  font-size: var(--t-15, 0.9375rem); font-weight: 500;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.adm-nav-lank:hover { background: rgba(241, 243, 250, 0.08); color: var(--pa-navy-stark); }
.adm-nav-lank[aria-current="page"] { background: rgba(241, 243, 250, 0.14); color: var(--pa-navy-stark); }
.adm-nav-lank:focus-visible { outline: 2px solid var(--pa-navy-stark); outline-offset: -2px; }
.adm-nav-rubrik {
  margin: 1.5rem 0.875rem 0.375rem;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(241, 243, 250, 0.45);
}
.adm-jag {
  margin-top: auto;
  padding: 1.25rem 1.75rem 0;
  border-top: 1px solid rgba(241, 243, 250, 0.14);
}
.adm-jag p { margin: 0; overflow-wrap: anywhere; }
.adm-jag-namn { color: var(--pa-navy-stark); font-size: var(--t-14); font-weight: 600; }
.adm-jag-roll { font-size: var(--t-13); }
.adm-jag-ut {
  display: inline-block; margin-top: 0.625rem;
  color: var(--pa-navy-stark); font-size: var(--t-13);
}

.adm-yta {
  min-width: 0;
  padding: 2rem clamp(1rem, 3vw, 2.5rem) 4rem;
}
.adm-vy { max-width: 90rem; }

@media (max-width: 900px) {
  .adm-ram { grid-template-columns: minmax(0, 1fr); }
  .adm-meny {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
    padding: 0.875rem 1rem;
  }
  .adm-marke { grid-auto-flow: column; align-items: center; padding: 0; margin: 0; border: 0; }
  .adm-marke-ord { width: 7rem; }
  .adm-nav { display: flex; flex-wrap: wrap; padding: 0; order: 3; width: 100%; }
  .adm-nav-lank { padding: 0.5rem 0.75rem; }
  .adm-nav-rubrik { display: none; }
  .adm-jag { margin: 0 0 0 auto; padding: 0; border: 0; text-align: right; }
  .adm-jag-roll { display: none; }
  .adm-jag-ut { margin-top: 0; }
  .adm-yta { padding: 1.25rem 1rem 3rem; }
}


/* ------------------------------------------------------------
   RUBRIKER, SÖKNING, KNAPPAR OCH KORT

   Som listorna i ett vanligt administrationsgränssnitt: rubrik
   med antal, en sökrad med fält och knapparna Sök och Rensa, och
   uppgifter i vita kort med etikett till vänster och värde till
   höger.
   ------------------------------------------------------------ */
.adm-huvud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.25rem;
}
.adm-huvud h1 { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.02em; }
.adm-huvud h1:focus { outline: none; }
.adm-huvud-knappar { align-items: flex-start; }
.adm-antal { color: var(--fg-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

.adm-sok {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--yta-2);
}
.adm-sok-etikett { align-self: center; font-weight: 700; font-size: var(--t-15, 0.9375rem); }
.adm-falt { display: grid; gap: 0.3125rem; min-width: min(14rem, 100%); flex: 1 1 14rem; }
.adm-falt span { font-size: var(--t-13); color: var(--fg-muted); }
.adm-falt input, .adm-falt select, .adm-falt textarea, .adm-rollval {
  width: 100%; min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-xs);
  background: var(--yta-3); color: var(--fg);
  font: inherit; font-size: var(--t-14);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.adm-falt textarea { min-height: 5rem; resize: vertical; line-height: 1.5; }
.adm-rollval { width: auto; min-height: 2.125rem; padding: 0.25rem 0.5rem; }
.adm-falt input:focus, .adm-falt select:focus, .adm-falt textarea:focus, .adm-rollval:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint);
}
.adm-falt-bred { flex-basis: 100%; }
.adm-sok .adm-knapp { min-height: 2.5rem; }

.adm-knapp {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.25rem; padding: 0.375rem 1.125rem;
  border: 0; border-radius: var(--r-xs);
  background: var(--blue); color: #fff;
  font: inherit; font-size: var(--t-14); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), scale var(--t-fast) var(--ease);
}
.adm-knapp:hover { background: var(--blue-deep); }
.adm-knapp:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.adm-knapp:disabled { opacity: 0.55; cursor: default; }
.adm-knapp-ljus { background: var(--yta-3); color: var(--fg); box-shadow: inset 0 0 0 1px var(--rule-2); }
.adm-knapp-ljus:hover { background: var(--yta-hov); }

.adm-kort {
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-sm);
  background: var(--yta-2);
}
.adm-kort-smal { max-width: 44rem; }
.adm-kort-rubrik { margin: 0 0 0.875rem; font-size: var(--t-17, 1.0625rem); letter-spacing: -0.01em; }
.adm-kort .admin-table-wrap { margin-top: 0; }
.adm-kolumner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr)); gap: 1.25rem; }
.adm-tabell-smal .admin-table { min-width: 0; }

/* Uppgifterna i ett kundkort. */
.adm-fakta { width: 100%; border-collapse: collapse; font-size: var(--t-14); }
.adm-fakta th, .adm-fakta td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.adm-fakta tr:last-child th, .adm-fakta tr:last-child td { border-bottom: 0; }
.adm-fakta th { width: 14rem; font-weight: 500; color: var(--fg-muted); background: var(--yta-hov); }
.adm-fakta td { overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .adm-fakta th { width: 40%; }
  .adm-fakta th, .adm-fakta td { padding: 0.625rem 0.75rem; }
}

/* Nyckeltalen på översikten. */
.adm-siffror { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.adm-siffra {
  display: block; padding: 1rem 1.25rem;
  border-radius: var(--r-sm); background: var(--yta-2);
  color: var(--fg); text-decoration: none;
  transition: background-color var(--t-fast) var(--ease);
}
a.adm-siffra:hover { background: var(--data-info); }
.adm-siffra p { margin: 0; }
.adm-siffra-varde { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.adm-siffra-etikett { font-size: var(--t-13); color: var(--fg-muted); }
.adm-siffra-viktig .adm-siffra-varde { color: var(--attention); }

/* Anteckningarna. */
.adm-anteckning-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.adm-anteckningslista { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.adm-anteckning { padding: 0.75rem 1rem; border-radius: var(--r-xs); background: var(--yta-hov); }
.adm-anteckning p { margin: 0; }
.adm-anteckning-meta { font-size: var(--t-13); color: var(--fg-muted); }
.adm-anteckning-text { margin-top: 0.25rem !important; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-14); }
.adm-tom-rad { margin: 1rem 0 0; font-size: var(--t-14); color: var(--fg-muted); }
.adm-fel { flex-basis: 100%; margin: 0; color: var(--attention); font-size: var(--t-14); }
.adm-fel:empty { display: none; }

.adm-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.adm-bolagslista { white-space: normal; }

.admin-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.3125rem;
  border-radius: var(--r-pill);
  background: var(--attention); color: #fff;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.admin-ghost {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  background: none; color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              scale var(--t-fast) var(--ease);
}
.admin-ghost:hover { color: var(--fg); border-color: var(--fg); }

.admin-head { margin-top: 2.5rem; align-items: center; }
.adm-vy > .admin-head:first-child { margin-top: 0; }
.admin-head h1 { font-size: var(--t-20); letter-spacing: -0.01em; }

.admin-count {
  margin: 0.875rem 0 0;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--fg-muted);
}

.admin-table-wrap {
  margin-top: 0.875rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
  overflow-x: auto;
}
.admin-table { width: 100%; min-width: 62rem; border-collapse: collapse; font-size: var(--t-13); }
/* Kolumnhuvudet är den mörkaste ytan i tabellen och sitter kvar
   när raderna rullar förbi. En tabell utan fast huvud tvingar
   läsaren att rulla tillbaka för att minnas vad en kolumn var. */
.admin-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 0.5625rem 0.75rem; text-align: left; white-space: nowrap;
  background: var(--yta-0);
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}
.admin-table td { padding: 0.5625rem 0.75rem; vertical-align: middle; white-space: nowrap; }
.admin-table tbody tr { background: var(--yta-2); transition: background-color var(--t-fast) var(--ease); }
/* Linje per rad och inte varannan rad ljusare. Zebran hjälper ögat
   över tolv kolumner, men den är också det mest daterade greppet
   som finns i en tabell. Linjen plus en tydlig hovring gör samma
   jobb. */
.admin-table tbody tr:hover { background: var(--data-info); }
.admin-table tbody tr + tr td { border-top: 1px solid var(--line); }

.admin-company { font-weight: 600; }
.admin-mono { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg-muted); }
.admin-num { text-align: right; font-variant-numeric: tabular-nums; }

.admin-status {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.1875rem 0.5625rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; white-space: nowrap;
}
.admin-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.admin-status[data-s="aktivt"]  { background: var(--data-klar); color: var(--data-klar-fg); }
.admin-status[data-s="vilande"] { background: var(--data-vilar); color: var(--data-vilar-fg); }

.admin-empty { padding: 3rem 1.5rem; text-align: center; color: var(--fg-muted); }

@media (max-width: 620px) {
  .admin-head { flex-direction: column; align-items: flex-start; }
  .admin-search-wrap { width: 100%; }
}

/* ------------------------------------------------------------
   KONTAKTFORMULÄRETS ÄRENDEN

   Samma täta känsla som kundtabellen, men rader som går att
   fälla ut. Ett nytt ärende bär en röd prick och fetare namn,
   och prickens färg är samma variabel som siffran i fliken.
   ------------------------------------------------------------ */
.admin-filter { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 1rem; }
.admin-filter-knapp {
  display: inline-flex; align-items: center; gap: 0.4375rem;
  min-height: 2.25rem; padding: 0.375rem 0.875rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  background: var(--yta-3); color: var(--fg-muted);
  font: inherit; font-size: 0.8125rem; font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease),
              scale var(--t-fast) var(--ease);
}
.admin-filter-knapp:hover { color: var(--fg); border-color: var(--fg); }
.admin-filter-knapp[aria-pressed="true"] { background: var(--data-info); border-color: var(--data-info); color: var(--data-info-fg); }
.admin-filter-knapp:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.admin-filter-antal { font-family: var(--font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }

.admin-ghost:disabled { opacity: 0.5; cursor: default; }
a.admin-ghost { display: inline-flex; align-items: center; text-decoration: none; }

.ticket-list {
  margin: 0.875rem 0 0; padding: 0; list-style: none;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
  overflow: hidden;
}
.ticket + .ticket { border-top: 1px solid var(--line); }

.ticket-h { margin: 0; font: inherit; }

.ticket-head {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto 5.5rem;
  align-items: center; gap: 1rem;
  width: 100%; padding: 0.8125rem 1rem;
  border: 0; background: none; color: inherit;
  font: inherit; font-size: 0.875rem; text-align: left;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              scale var(--t-fast) var(--ease);
}
.ticket-head:hover { background: var(--yta-3); }
.ticket-head:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ticket-head .admin-status { justify-self: start; }

.ticket-nr {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.ticket-nr::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: transparent; flex: none; }
.ticket[data-status="ny"] .ticket-nr::before { background: var(--attention); }

.ticket-who { display: grid; min-width: 0; }
.ticket-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket[data-status="ny"] .ticket-name { font-weight: 700; }
.ticket-company { font-size: 0.8125rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ticket-when { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; }

.admin-status[data-s="ny"]    { background: var(--data-info);  color: var(--data-info-fg); }
.admin-status[data-s="pagar"] { background: var(--data-vilar); color: var(--data-vilar-fg); }
.admin-status[data-s="klar"]  { background: var(--data-klar);  color: var(--data-klar-fg); }

.ticket-body { padding: 0.25rem 1rem 1.25rem 7rem; max-width: 76ch; }

.ticket-fakta { display: grid; gap: 0.375rem; margin: 0 0 1.125rem; }
.ticket-fakta div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; }
.ticket-fakta dt,
.ticket-rubrik {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}
.ticket-fakta dt { padding-top: 0.1875rem; }
.ticket-fakta dd { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.ticket-fakta a { color: var(--blue-deep); }

.ticket-rubrik { margin: 0 0 0.375rem; }
.ticket-text { margin: 0 0 1.125rem; font-size: 0.9375rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-text.is-tom { color: var(--fg-muted); }

.ticket-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 720px) {
  .ticket-head { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.375rem; }
  .ticket-nr { grid-column: 1; grid-row: 1; }
  .ticket-head .admin-status { grid-column: 2; grid-row: 1; justify-self: end; }
  .ticket-who { grid-column: 1 / -1; grid-row: 2; }
  .ticket-when { grid-column: 1 / -1; grid-row: 3; }
  .ticket-body { padding-left: 1rem; }
  .ticket-fakta div { grid-template-columns: 1fr; gap: 0.125rem; }
}


/* ============================================================
   NEDTRYCK
   Se motsvarande avsnitt i app.css. Adminvyn öppnas från telefon
   lika ofta som från dator när ett ärende kommer in, så knapparna
   och ärenderaderna behöver svara på ett tryck.
   ============================================================ */
.adm-knapp:active,
.admin-ghost:active,
.admin-filter-knapp:active {
  scale: 0.97;
  transition-duration: var(--t-press);
}

.ticket-head:active {
  scale: 0.99;
  transition-duration: var(--t-press);
}

@media (prefers-reduced-motion: reduce) {
  .adm-knapp:active,
  .admin-ghost:active,
  .admin-filter-knapp:active,
  .ticket-head:active { scale: none; filter: brightness(0.95); }
}

/* ------------------------------------------------------------
   KUNDERNA

   En kund öppnas i samma panel som listan. Flikarna under namnet
   är mindre än sidans egna, så att det syns att de hör till
   kunden och inte till adminvyn. Allt är tabeller och kort i
   samma material som listan, inga nya färger.
   ------------------------------------------------------------ */
.admin-lank { color: var(--blue-deep); text-decoration: none; overflow-wrap: anywhere; }
.admin-lank:hover, .admin-lank:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.admin-table .admin-lank { white-space: nowrap; }
.admin-viktig { color: var(--attention); font-weight: 700; }
.admin-ghost[href] { display: inline-flex; align-items: center; text-decoration: none; }

.admin-tillbaka { margin-top: 2rem; }
.admin-knapprad { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kund-huvud { margin-top: 1rem; }
.kund-huvud h1:focus { outline: none; }
.kund-huvud .admin-mono { margin: 0.25rem 0 0; }

.kund-flikar {
  display: flex; flex-wrap: wrap; gap: 0.125rem;
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--rule-2);
}
.kund-flik {
  margin-bottom: -1px;
  padding: 0.5625rem 0.875rem;
  border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--fg-muted);
  font: inherit; font-size: var(--t-13); font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.kund-flik:hover { color: var(--fg); }
.kund-flik[aria-selected="true"] { color: var(--blue-deep); border-bottom-color: var(--blue); }
.kund-flik:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-xs); }

.kund-panel { padding-top: 1.25rem; }
.kund-panel:focus { outline: none; }
.kund-rubrik { margin: 1.5rem 0 0.625rem; font-size: var(--t-15); letter-spacing: 0; }
.kund-kort > .kund-rubrik:first-child { margin-top: 0; }
.kund-ingress { margin: 0 0 1rem; max-width: 70ch; font-size: var(--t-13); color: var(--fg-muted); }
.kund-mellanrum { margin-top: 1rem; }

.kund-siffror {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
}
.kund-siffra { padding: 0.75rem 1rem; }
.kund-siffra + .kund-siffra { border-left: 1px solid var(--line); }
.kund-siffra-varde { margin: 0; font-size: var(--t-20); font-weight: 600; font-variant-numeric: tabular-nums; }
.kund-siffra-etikett {
  margin: 0.125rem 0 0;
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}

.kund-kolumner { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 900px) { .kund-kolumner { grid-template-columns: 1fr 1fr; } }

.kund-kort {
  margin-top: 1rem; padding: 1rem 1.125rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
}
.kund-kolumner > .kund-kort { margin-top: 0; }
.kund-kort .admin-table-wrap { margin-top: 0.875rem; }
.kund-kort > .admin-ghost { margin-top: 0.875rem; }
.kund-kort > .admin-knapprad { margin-top: 0.875rem; }
.kund-kort > .kund-avvikelse { margin-top: 0.5rem; }
.kund-kort-huvud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; font-weight: 600; }

.kund-fakta { display: grid; gap: 0.375rem; margin: 0; }
.kund-fakta + .kund-fakta { margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--line); }
.kund-fakta div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.75rem; }
.kund-fakta dt {
  padding-top: 0.1875rem;
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}
.kund-fakta dd { margin: 0; font-size: var(--t-14); overflow-wrap: anywhere; }

.kund-arlista { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--yta-2); }
.kund-arlista li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5625rem 0.875rem; }
.kund-arlista li + li { border-top: 1px solid var(--line); }
.kund-arlista-ar { min-width: 6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kund-arlista .admin-ghost { margin-left: auto; }

.kund-status { display: flex; align-items: center; gap: 0.5rem; }
.kund-bred { white-space: normal; min-width: 16rem; }
.kund-filcell .admin-lank { white-space: normal; }
.kund-anteckning { margin: 0.25rem 0 0; font-size: var(--t-12); color: var(--fg-muted); white-space: pre-wrap; }

/* ------------------------------------------------------------
   UTKORGEN
   ------------------------------------------------------------ */
.utkorg-knappar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.utkorg-ingress { margin-top: 0.75rem; }
.utkorg-lista {
  margin: 0.875rem 0 0; padding: 0; list-style: none;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
  overflow: hidden;
}
.utkorg-mejl + .utkorg-mejl { border-top: 1px solid var(--line); }
.utkorg-mejl > details > summary {
  display: grid; align-items: center;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto 5.5rem;
  gap: 0.75rem 1rem;
  padding: 0.6875rem 1rem;
  font-size: 0.875rem;
  cursor: pointer; list-style: none;
}
.utkorg-mejl > details > summary::-webkit-details-marker { display: none; }
.utkorg-mejl > details > summary:hover { background: var(--yta-3); }
.utkorg-mejl > details > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.utkorg-nar, .utkorg-status { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); white-space: nowrap; }
.utkorg-vem { display: grid; min-width: 0; }
.utkorg-amne { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utkorg-till { font-size: 0.8125rem; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utkorg-kropp { padding: 0.25rem 1rem 1.125rem; }
.utkorg-bolag { margin: 0 0 0.625rem; font-size: var(--t-13); }
.utkorg-text {
  margin: 0; max-width: 76ch; padding: 0.875rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--yta-3);
  font-family: var(--font-mono); font-size: var(--t-12); line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.mall-amne { margin: 0 0 0.625rem; font-size: var(--t-13); font-weight: 600; }
.utkorg-bilagor { margin: 0.625rem 0 0; padding: 0; list-style: none; font-size: var(--t-13); }
.utkorg-bilagor li + li { margin-top: 0.25rem; }
.utkorg-storlek { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-muted); }
@media (max-width: 720px) {
  .utkorg-mejl > details > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .utkorg-mejl > details > summary .utkorg-vem { grid-column: 1 / -1; grid-row: 2; }
  .utkorg-status { grid-column: 1 / -1; }
}

.kund-ar {
  margin-top: 0.625rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
}
.kund-ar > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem;
  padding: 0.6875rem 0.875rem;
  cursor: pointer; list-style: none;
}
.kund-ar > summary::-webkit-details-marker { display: none; }
.kund-ar > summary:hover { background: var(--yta-3); }
.kund-ar-titel { min-width: 6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kund-ar-kropp { padding: 0 0.875rem 0.875rem; }
.kund-ar-kropp .admin-table-wrap { margin-top: 0.75rem; }
.kund-flaggor { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; margin-left: auto; }

.kund-kontroller { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.kund-kontroller li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; font-size: var(--t-14); }
.kund-kontroller .admin-status { min-width: 3.25rem; justify-content: center; }
.kund-avvikelse { flex: 1 0 100%; margin: 0; font-size: var(--t-12); color: #B3261E; }
.kund-underlag .kund-avvikelse { flex: none; }

.kund-ver-huvud { margin-top: 1.75rem; }
.kund-ver-huvud .kund-rubrik { margin: 0; }
.kund-ver-lista { list-style: none; margin: 0.875rem 0 0; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--yta-2); }
.kund-ver + .kund-ver { border-top: 1px solid var(--line); }
.kund-ver > details > summary {
  display: grid; align-items: center;
  grid-template-columns: 6.5rem 4rem minmax(0, 1fr) 8rem auto;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  font-size: var(--t-13);
  cursor: pointer; list-style: none;
}
.kund-ver > details > summary::-webkit-details-marker { display: none; }
.kund-ver > details > summary:hover { background: var(--yta-3); }
.kund-ver-nr { color: var(--fg); font-weight: 600; }
.kund-ver-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kund-ver .kund-flaggor { margin-left: 0; justify-content: flex-end; min-width: 6rem; }
.kund-ver-kropp { padding: 0 0.875rem 0.875rem; }
.kund-ver-kropp .admin-table { min-width: 36rem; }
.kund-underlag { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.375rem; font-size: var(--t-13); }

@media (max-width: 720px) {
  .kund-fakta div { grid-template-columns: 1fr; gap: 0.125rem; }
  .kund-siffra + .kund-siffra { border-left: 0; }
  .kund-ver > details > summary { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
  .kund-ver > details > summary .kund-ver-text { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .kund-ver > details > summary .kund-flaggor { grid-column: 1 / -1; justify-content: flex-start; }
}

.kund-flik:active { scale: 0.97; transition-duration: var(--t-press); }
@media (prefers-reduced-motion: reduce) {
  .kund-flik:active { scale: none; filter: brightness(0.95); }
}

/* Frågor, granskningar och betalningar till kunden. */
.kund-formular {
  margin-bottom: 0.75rem;
  border: 1px dashed var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
}
.kund-formular > summary {
  padding: 0.625rem 0.875rem;
  font-weight: 600; font-size: var(--t-13); color: var(--blue-deep);
  cursor: pointer; list-style: none;
}
.kund-formular > summary::-webkit-details-marker { display: none; }
.kund-formular > summary::before { content: "+ "; }
.kund-formular[open] > summary::before { content: "− "; }
.kund-formular-kropp {
  display: grid; gap: 0.75rem;
  padding: 0 0.875rem 0.875rem;
}
@media (min-width: 900px) { .kund-formular-kropp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kund-falt { display: grid; gap: 0.25rem; align-content: start; }
.kund-falt-bred { grid-column: 1 / -1; }
.kund-falt label { font-size: var(--t-12); font-weight: 600; color: var(--fg-muted); }
.kund-falt input, .kund-falt select, .kund-falt textarea, .kund-val, .admin-input-kort,
.admin-falt input, .admin-falt select, .admin-falt textarea, .admin-rad input {
  min-height: 2.25rem; padding: 0.375rem 0.625rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-xs);
  background: var(--yta-3); color: var(--fg);
  font: inherit; font-size: var(--t-14);
}
.kund-falt input[type="file"] { padding: 0.25rem; }
.kund-falt textarea { resize: vertical; }
.admin-input-kort { width: 12rem; max-width: 100%; }
.kund-underrubrik { margin: 1.5rem 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--fg); }

/* Formulären i fliken Egen bokföring: etiketten över fältet, och
   verifikatets rader som konto, debet och kredit i bredd. */
.admin-form { display: grid; gap: 0.75rem; max-width: 44rem; margin: 1.25rem 0; }
.admin-form > button { justify-self: start; }
.admin-falt { display: grid; gap: 0.25rem; font-size: var(--t-14); color: var(--fg); }
.admin-falt textarea { resize: vertical; }
.admin-rader { display: grid; gap: 0.5rem; }
.admin-rad { display: grid; grid-template-columns: 6rem 1fr 1fr 10rem; gap: 0.5rem; }
.admin-rad select { min-width: 0; }
.admin-rad input { min-width: 0; }
.admin-table tbody tr.admin-summarad td { font-weight: 600; border-top: 1px solid var(--rule-2); }
.kund-formular-kropp .kund-avvikelse { grid-column: 1 / -1; }
.kund-formular-kropp .kund-avvikelse:empty { display: none; }
.kund-formular-kropp > .admin-ghost { justify-self: start; grid-column: 1 / -1; }

.kund-arenden { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.kund-arende {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  background: var(--yta-2);
}
.kund-arende-huvud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.kund-arende-rubrik { font-weight: 600; }
.kund-arende-meta { margin: 0.25rem 0 0; }
.kund-arende-text { margin: 0.5rem 0 0; font-size: var(--t-14); white-space: pre-wrap; overflow-wrap: anywhere; }
.kund-kryss { width: 1.25rem; height: 1.25rem; cursor: pointer; }
.kund-arende-svar { margin-top: 0.625rem; padding: 0.5rem 0.75rem; border-left: 2px solid var(--blue); background: var(--yta-3); }
.kund-arende-svar p { margin: 0; font-size: var(--t-14); }
.kund-arende-svar .ticket-rubrik { margin-bottom: 0.25rem; }
.kund-arende-dokument { margin: 0.5rem 0 0; font-size: var(--t-13); }
.kund-arende-knappar { margin-top: 0.625rem; }
.kund-arende-knappar:empty { display: none; }

/* ------------------------------------------------------------
   KUNDENS FAKTUROR

   Utgående fakturor som underlag, med färdigräknade förslag till
   verifikat. Konsulten läser och bokför, kunden skriver.
   ------------------------------------------------------------ */
.faktura-kort + .faktura-kort { margin-top: 0.875rem; }
.faktura-huvud {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}
.faktura-nummer {
  font-family: var(--font-mono); font-weight: 700;
  margin-right: 0.625rem;
}
.faktura-mottagare { font-weight: 600; }

.faktura-forslag {
  margin-top: 0.875rem; padding-top: 0.875rem;
  border-top: 1px solid var(--line);
}
.faktura-forslag h4 { margin: 0 0 0.5rem; }
.faktura-forslag .admin-tabell { width: 100%; border-collapse: collapse; }
.faktura-forslag .admin-tabell td {
  padding: 0.3125rem 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-13);
}
.admin-tal { text-align: right; white-space: nowrap; }

.faktura-knappar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin-top: 0.75rem;
}
.faktura-besked { font-size: var(--t-13); color: var(--fg-muted); }


/* ------------------------------------------------------------
   KONTAKT, UPPSTART OCH FÖRFRÅGNINGAR

   Det supporten, säljaren och konsulten använder för att svara en
   kund: stegen i uppstarten, mejlen från tjänsten, inloggningarna
   och anteckningarna på förfrågningarna.
   ------------------------------------------------------------ */
.adm-sektionsrubrik {
  margin: 2rem 0 0.875rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted);
}
.adm-kort-ingress { margin: -0.375rem 0 0.875rem; font-size: var(--t-14); color: var(--fg-muted); }
.adm-underrubrik { margin: 1rem 0 0.5rem; font-size: var(--t-14); font-weight: 600; }
.adm-radbryt { white-space: normal; overflow-wrap: anywhere; }
.admin-table td.adm-radbryt { white-space: normal; min-width: 14rem; }

.adm-lasbehorighet {
  margin: 0 0 1rem; padding: 0.75rem 1rem;
  border-radius: var(--r-xs);
  background: var(--data-info); color: var(--data-info-fg);
  font-size: var(--t-14);
}
/* Supporten läser men ändrar inte, så formulären för ändringar syns
   inte. Servern spärrar ändå, se SUPPORTENS_ANDRINGAR. */
body[data-roll="support"] #kund-vy .kund-formular { display: none; }

.adm-steg { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; }
.adm-steg-rad {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem; border-radius: var(--r-xs); background: var(--yta-hov);
  font-size: var(--t-14);
}
.adm-steg-markering {
  font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
}
.adm-steg-rad.is-klar .adm-steg-markering { color: var(--data-klar-fg); }
.adm-steg-rad.is-avbojt .adm-steg-markering { color: var(--attention); }
.adm-steg-rad:not(.is-klar):not(.is-avbojt) { background: var(--yta-2); box-shadow: inset 0 0 0 1px var(--line); }
.adm-steg-datum { font-size: var(--t-13); color: var(--fg-muted); white-space: nowrap; }
@media (max-width: 620px) {
  .adm-steg-rad { grid-template-columns: 4rem minmax(0, 1fr); }
  .adm-steg-datum { grid-column: 2; }
}

.adm-mejllista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.adm-mejl details { border-radius: var(--r-xs); background: var(--yta-hov); }
.adm-mejl-huvud {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.25rem 0.75rem;
  padding: 0.625rem 0.875rem; cursor: pointer; font-size: var(--t-14);
}
.adm-mejl-amne { font-weight: 500; overflow-wrap: anywhere; }
.adm-mejl-meta { grid-column: 2; font-size: var(--t-13); color: var(--fg-muted); overflow-wrap: anywhere; }
.adm-mejl-kropp { padding: 0 0.875rem 0.875rem; }
.adm-mejl-text {
  margin: 0.75rem 0 0; padding: 0.75rem 0.875rem;
  border-radius: var(--r-xs); background: var(--yta-2);
  font-family: var(--font); font-size: var(--t-14); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.ticket-when { display: grid; gap: 0.125rem; justify-items: start; }
.ticket-ansvarig { font-family: var(--font); color: var(--fg); }
.ticket-folj { color: var(--fg-muted); }
.ticket-folj.is-idag { color: var(--attention); font-weight: 700; }
.ticket-folj-form, .ticket-anteckning-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1rem 0 0; }
.ticket-folj-form label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--t-14); }
.ticket-folj-form input, .ticket-anteckning-form textarea {
  padding: 0.375rem 0.625rem; border: 1px solid var(--rule-2); border-radius: var(--r-xs);
  background: var(--yta-3); color: var(--fg); font: inherit; font-size: var(--t-14);
}
.ticket-anteckning-form textarea { flex: 1 1 18rem; min-height: 3.5rem; resize: vertical; }
.ticket-folj-form input:focus, .ticket-anteckning-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.ticket-anteckningar { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ticket-anteckningar > li:not(.is-tom) { padding: 0.5rem 0.75rem; border-radius: var(--r-xs); background: var(--yta-hov); }
.ticket-anteckningar .ticket-text { margin: 0; }
.ticket-anteckning-meta { margin: 0; font-size: var(--t-13); color: var(--fg-muted); }


/* ------------------------------------------------------------
   UPPGIFTER, SNABBSÖKNING, MALLAR OCH TIDSLINJE
   ------------------------------------------------------------ */
.adm-sok-snabb { position: relative; padding: 0 0.75rem 1rem; }
.adm-sok-snabb input {
  width: 100%; min-height: 2.25rem; padding: 0.375rem 0.75rem;
  border: 1px solid rgba(241, 243, 250, 0.2); border-radius: var(--r-xs);
  background: rgba(241, 243, 250, 0.08); color: var(--pa-navy-stark);
  font: inherit; font-size: var(--t-14);
}
.adm-sok-snabb input::placeholder { color: rgba(241, 243, 250, 0.55); }
.adm-sok-snabb input:focus { outline: none; border-color: var(--pa-navy-stark); background: rgba(241, 243, 250, 0.14); }
.adm-sok-traffar {
  position: absolute; z-index: 200; left: 0.75rem; top: 2.5rem;
  width: min(30rem, calc(100vw - 2rem)); max-height: 24rem; overflow-y: auto;
  margin: 0; padding: 0.375rem; list-style: none;
  border-radius: var(--r-sm); background: var(--yta-3); color: var(--fg);
  box-shadow: 0 12px 32px rgba(14, 20, 36, 0.24);
}
.adm-sok-traff {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.625rem; border-radius: var(--r-xs); cursor: pointer;
}
.adm-sok-traff[aria-selected="true"], .adm-sok-traff:hover { background: var(--data-info); }
.adm-sok-typ { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.adm-sok-text { display: grid; min-width: 0; }
.adm-sok-titel { font-size: var(--t-14); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sok-under { font-size: var(--t-13); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-sok-tom { padding: 0.625rem; font-size: var(--t-14); color: var(--fg-muted); }
@media (max-width: 900px) {
  .adm-sok-snabb { order: 2; flex: 1 1 12rem; padding: 0; }
  .adm-sok-traffar { left: 0; }
}

.adm-kort-idag { box-shadow: inset 4px 0 0 var(--blue); }

.adm-uppgifter { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.adm-uppgift {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.75rem; border-radius: var(--r-xs); background: var(--yta-hov);
}
.adm-uppgift.is-sen .adm-uppgift-nar { color: var(--attention); font-weight: 700; }
.adm-uppgift.is-klar .adm-uppgift-text { text-decoration: line-through; color: var(--fg-muted); }
.adm-uppgift-klar {
  min-width: 4.25rem; padding: 0.3125rem 0.625rem;
  border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  background: var(--yta-3); color: var(--fg); font: inherit; font-size: var(--t-13); font-weight: 600; cursor: pointer;
}
.adm-uppgift-klar:hover { border-color: var(--data-klar-fg); color: var(--data-klar-fg); }
.adm-uppgift-klar:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.adm-uppgift-kropp p { margin: 0; }
.adm-uppgift-text { font-size: var(--t-14); font-weight: 500; overflow-wrap: anywhere; }
.adm-uppgift-meta { font-size: var(--t-13); color: var(--fg-muted); overflow-wrap: anywhere; }
.adm-uppgift-datum {
  padding: 0.25rem 0.5rem; border: 1px solid var(--rule-2); border-radius: var(--r-xs);
  background: var(--yta-3); color: var(--fg); font: inherit; font-size: var(--t-13);
}
.adm-uppgift-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin-top: 1rem; }
@media (max-width: 620px) {
  .adm-uppgift { grid-template-columns: auto minmax(0, 1fr); }
  .adm-uppgift-datum { grid-column: 2; justify-self: start; }
}

/* Tiden, se TIDEN i panel.js. */
.adm-falt-kort { flex: 0 1 10rem; min-width: 8rem; }
.adm-kryss { display: flex; align-items: center; gap: 0.5rem; flex-basis: 100%; font-size: var(--t-14); cursor: pointer; }
.adm-kryss input { width: 1.0625rem; height: 1.0625rem; margin: 0; accent-color: var(--blue); }
.adm-falt[hidden] { display: none; }
.adm-tid-summa { margin: -0.25rem 0 0.75rem; font-size: var(--t-14); font-weight: 600; }
.adm-tid-summa:empty { display: none; }
.adm-tid-inom { color: var(--fg-muted); }
.adm-tid-saknas { display: block; color: var(--attention); font-size: var(--t-13); }
.adm-tid-godkant { display: block; color: var(--fg-muted); font-size: var(--t-13); }
.adm-tid-rubrik { margin: 2rem 0 0.5rem; font-size: var(--t-20, 1.25rem); }
.adm-tid-knappar { margin-top: 0.875rem; justify-content: flex-end; }
.adm-tid-filter { align-items: flex-end; }
.admin-filter .adm-tid-manad { flex: 0 1 11rem; margin-left: auto; }
@media (max-width: 620px) {
  .admin-filter .adm-tid-manad { margin-left: 0; flex-basis: 100%; }
  .adm-tid-knappar { justify-content: stretch; }
}

.adm-mallval { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.625rem; }
.adm-mallval select {
  min-height: 2.25rem; padding: 0.25rem 0.625rem; border: 1px solid var(--rule-2); border-radius: var(--r-xs);
  background: var(--yta-3); color: var(--fg); font: inherit; font-size: var(--t-14); max-width: 100%;
}
.adm-mallval-till { font-size: var(--t-13); color: var(--fg-muted); overflow-wrap: anywhere; }
.ticket-body .adm-mallval { margin-top: 1rem; }

.adm-tidslinje { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.25rem; }
.adm-tid-rad {
  display: grid; grid-template-columns: 9.5rem 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline;
  padding: 0.4375rem 0.625rem; border-radius: var(--r-xs); font-size: var(--t-14);
}
.adm-tid-rad:nth-child(odd) { background: var(--yta-hov); }
.adm-tid-nar { font-size: var(--t-13); color: var(--fg-muted); white-space: nowrap; }
.adm-tid-typ { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
.adm-tid-rad[data-typ="mejl"] .adm-tid-typ { color: var(--data-info-fg); }
.adm-tid-rad[data-typ="anteckning"] .adm-tid-typ, .adm-tid-rad[data-typ="uppgift"] .adm-tid-typ { color: var(--blue-deep); }
.adm-tid-rad[data-typ="steg"] .adm-tid-typ { color: var(--data-klar-fg); }
.adm-tid-text { overflow-wrap: anywhere; }
@media (max-width: 620px) {
  .adm-tid-rad { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
}

.adm-kopierbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.adm-kopiera {
  padding: 0.125rem 0.5rem; border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  background: none; color: var(--fg-muted); font: inherit; font-size: 0.75rem; cursor: pointer;
}
.adm-kopiera:hover { color: var(--fg); border-color: var(--fg); }