/* CRM Robertson Digital — style.css
   Satinarkivet: kallvit arbetsyta, lågmäld aluminiumram och lugna
   papperskort. Se crm/DESIGN.md för material, kontrast och avvikelser. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Manrope-700-latin.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: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Manrope-700-latin-ext.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: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/Manrope-800-latin.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: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/static/fonts/Manrope-800-latin-ext.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: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/PublicSans-400-latin.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: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/PublicSans-400-latin-ext.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: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/PublicSans-600-latin.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: "Public Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/PublicSans-600-latin-ext.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: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/PublicSans-700-latin.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: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/PublicSans-700-latin-ext.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("/static/fonts/IBMPlexMono-500-latin.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: 500;
  font-display: swap;
  src: url("/static/fonts/IBMPlexMono-500-latin-ext.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;
}

:root {
  /* Neutraler (spec §4.1) */
  --bg: #eef1f5;
  --surface: #ffffff;
  --sidebar: #f7f9fc;
  --ink: #18202c;
  --ink-muted: #596474;
  --ink-faint: #9aa0b4;   /* ENDAST dekor: punkter, avskiljare. ALDRIG text. */
  --border: #cbd3dd;
  --border-soft: #e5e9ef;

  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --accent-tint: #eeedfd;
  /* Hover-tillstånd (granskningsfynd runda 2): en svag knapps TEXT byter
     till accent-hover på hover, inte bara bakgrunden till accent-tint-
     hover. Ren mörkning av bakgrunden inom accent-tint-hover kan aldrig nå
     4,5:1 mot den ljusare --accent-texten (accent har själv låg luminans,
     ~0,14 — även svart bakgrund ger bara ~3,8:1 mot den), så den mörkare
     TEXTEN är fixen, inte en mörkare bakgrund. Se DESIGN.md "Kontrast". */
  --accent-hover: #3730a3;
  --accent-tint-hover: #e0e3fb;

  --metal-hi: #fbfcfe;
  --metal: #d9dfe7;
  --metal-low: #b8c1cc;

  /* Stegfärger — mörkade från konceptets original inom SAMMA kulör tills
     varje par klarade 4.5:1 mot sin egen tint (uppmätt, se DESIGN.md
     "Kontrast"). Tinterna är orörda. */
  --blue: #2267de;      --blue-tint: #e8f0fe;
  --violet: #7a4aeb;    --violet-tint: #f1ebfd;
  --amber: #946407;     --amber-tint: #fbf0dc;
  --green: #147e4c;     --green-tint: #e3f6ec;
  --rose: #cb2d44;      --rose-tint: #fce9ec;
  --sky: #077792;       --sky-tint: #e1f3f6;
  --gray: #666d7a;      --gray-tint: #eef0f4;

  --shadow: 0 1px 2px rgba(31, 36, 48, 0.04), 0 6px 16px -10px rgba(31, 36, 48, 0.14);

  /* Typskala — konceptets faktiska grader i rem (spec §4.2). Basen förblir
     1rem = 16px; komponenterna skalas, inte <body>s font-size. */
  --fs-0: 0.78rem;
  --fs-1: 0.86rem;
  --fs-2: 1rem;
  --fs-3: 1.06rem;
  --fs-4: 1.21rem;
  --fs-5: 1.79rem;

  --rytm-1: 4px;
  --rytm-2: 8px;
  --rytm-3: 12px;
  --rytm-4: 16px;
  --rytm-5: 24px;
  --rytm-6: 32px;
  --rytm-7: 48px;
  --rytm-8: 64px;

  --radie-kort: 14px;
  --radie-liten: 10px;
  --radie-pill: 99px;

  --motion-fast: 120ms;
  --ease-standard: ease-out;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent-tint);
  color: var(--ink);
}

* {
  caret-color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  a,
  button,
  input,
  select,
  textarea {
    transition: border-color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard);
  }

  .flik > summary::before {
    transition: transform var(--motion-fast) var(--ease-standard);
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background-color: var(--border);
  border-radius: 6px;
  border: 3px solid var(--bg);
}
* {
  scrollbar-color: var(--border) var(--bg);
  scrollbar-width: thin;
}

a {
  color: var(--accent);
}

h1,
h2,
h3 {
  font-family: "Manrope", ui-sans-serif, sans-serif;
  font-weight: 800;
  text-wrap: balance;
  margin: 0 0 var(--rytm-3);
  color: var(--ink);
}

h1 {
  font-size: var(--fs-5);
}

h2 {
  font-size: var(--fs-4);
  font-weight: 700;
}

p {
  max-width: 66ch;
}

.synlig-for-skarmlasare {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.belopp {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- Skal: sidopanel + innehåll ---------- */

.skal {
  display: grid;
  grid-template-columns: 238px 1fr;
  min-height: 100vh;
}

.sidopanel {
  background: linear-gradient(115deg, var(--metal-hi) 0%, var(--sidebar) 48%, #e8edf3 100%);
  border-right: 1px solid var(--border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: var(--rytm-6);
  position: sticky;
  top: 0;
  height: 100vh;
}

.varumarke {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 8px;
}

.varumarke-marke {
  width: 30px;
  height: 30px;
  border-radius: var(--radie-liten);
  flex: none;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: var(--fs-2);
}

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

.varumarke-namn {
  font-family: "Manrope", sans-serif;
  font-size: var(--fs-3);
  font-weight: 700;
}

.varumarke-tagg {
  font-size: var(--fs-0);
  color: var(--ink-muted);
}

.sidopanel nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navval {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--rytm-2) var(--rytm-3);
  border-radius: var(--radie-liten);
  color: var(--ink-muted);
  font-size: var(--fs-1);
  font-weight: 600;
  text-decoration: none;
}

.navval:hover {
  background: var(--border-soft);
  color: var(--ink);
}

.navval--aktiv,
.navval--aktiv:hover {
  background: var(--accent-tint);
  color: var(--accent);
}

.navval-antal {
  margin-left: auto;
  font-size: var(--fs-0);
  color: var(--ink-muted);
}

.navval--aktiv .navval-antal {
  color: var(--accent);
}

.innehall {
  padding: 26px 32px 60px;
  min-width: 0;
}

@media (max-width: 760px) {
  .skal {
    grid-template-columns: 1fr;
  }
  .sidopanel {
    position: relative;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
    gap: 14px;
    overflow-x: auto;
  }
  .sidopanel nav {
    flex-direction: row;
  }
  .innehall {
    padding: 20px 18px 48px;
  }
}

/* ---------- Band: fel och varningar ---------- */

.band {
  border-radius: var(--radie-liten);
  padding: var(--rytm-3) var(--rytm-4);
  margin-bottom: var(--rytm-5);
  border: 1px solid var(--border);
  background: var(--surface);
}

.band.band-fel {
  border-color: var(--rose);
  background: var(--rose-tint);
  color: var(--rose);
}

.band.band-varning {
  border-color: var(--amber);
  background: var(--amber-tint);
  color: var(--amber);
}

.tom-lage {
  margin-top: var(--rytm-7);
  color: var(--ink-muted);
}

.tom-lage pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radie-liten);
  padding: var(--rytm-3);
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", monospace;
}

.tom-lage-text {
  color: var(--ink-muted);
}

/* ---------- Pill (stadium) och avatar — spec §4.4 ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-0);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radie-pill);
  white-space: nowrap;
}

.pill-punkt {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: var(--fs-0);
}

/* En sluten uppsättning stegfärger (spec §4.4) — bara stadium väljer
   färgen, aldrig fri text i en klass. */
.pill--blue, .avatar--blue { color: var(--blue); background: var(--blue-tint); }
.pill--violet, .avatar--violet { color: var(--violet); background: var(--violet-tint); }
.pill--amber, .avatar--amber { color: var(--amber); background: var(--amber-tint); }
.pill--green, .avatar--green { color: var(--green); background: var(--green-tint); }
.pill--rose, .avatar--rose { color: var(--rose); background: var(--rose-tint); }
.pill--sky, .avatar--sky { color: var(--sky); background: var(--sky-tint); }
.pill--gray, .avatar--gray { color: var(--gray); background: var(--gray-tint); }

.punkt--blue { background: var(--blue); }
.punkt--violet { background: var(--violet); }
.punkt--amber { background: var(--amber); }
.punkt--green { background: var(--green); }
.punkt--rose { background: var(--rose); }
.punkt--sky { background: var(--sky); }
.punkt--gray { background: var(--gray); }

/* ---------- Leadsidan (/) ---------- */

.olastbara-block {
  margin-bottom: var(--rytm-6);
}

.olastbara-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rytm-2);
}

.olastbara-lista li {
  background: var(--rose-tint);
  border: 1px solid var(--rose);
  border-radius: var(--radie-liten);
  padding: var(--rytm-3) var(--rytm-4);
}

.olastbara-lista a {
  font-weight: 700;
  color: var(--ink);
}

.rad-fel {
  margin: var(--rytm-1) 0 0;
  color: var(--rose);
  font-size: var(--fs-0);
}

.stegrad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rytm-3);
  margin-bottom: var(--rytm-6);
}

.steg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-muted);
}

.steg-chip-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.steg-chip-antal {
  color: var(--ink-muted);
}

.lead-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rytm-4);
}

.lead {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radie-kort);
  box-shadow: var(--shadow);
  padding: var(--rytm-4) var(--rytm-5);
}

.lead-topp {
  display: flex;
  align-items: flex-start;
  gap: var(--rytm-3);
}

.lead-namnrad {
  flex: 1;
  min-width: 0;
}

.lead-namn {
  display: block;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: var(--fs-3);
  color: var(--ink);
  text-decoration: none;
}

.lead-namn:hover {
  color: var(--accent);
}

.lead-kontakt {
  margin: 2px 0 0;
  font-size: var(--fs-0);
  color: var(--ink-muted);
}

.lead-nasta-steg {
  margin: var(--rytm-4) 0;
}

.etikett {
  display: block;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--rytm-1);
}

.lead-nasta-steg-text {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--ink);
}

.lead-nasta-steg-text--tom {
  color: var(--amber);
}

.lead-nasta-steg-datum {
  display: inline-block;
  margin-top: 2px;
  font-size: var(--fs-0);
}

.lead-nasta-steg-datum--rose { color: var(--rose); font-weight: 600; }
.lead-nasta-steg-datum--amber { color: var(--amber); font-weight: 600; }
.lead-nasta-steg-datum--muted { color: var(--ink-muted); }

.markor {
  display: inline-block;
  margin-top: var(--rytm-1);
  font-size: var(--fs-0);
  font-weight: 600;
}

.markor--amber {
  color: var(--amber);
}

.lead-tystnadsrad {
  display: flex;
  align-items: center;
  gap: var(--rytm-3);
  margin: var(--rytm-3) 0;
}

.tystnadslinje {
  height: 2px;
  border-radius: 1px;
  background: var(--border);
  flex: 0 0 auto;
}

/* STEG_MAX diskreta bredd-steg i stället för ett inline style="width: ...px".
   CSP:ns default-src 'self'-fallback saknar style-src, vilket blockerar
   inline style i en riktig webbläsare (granskningsfynd 2026-09-15). Ren
   extern CSS-klass kringgår det utan att CSP:n behöver försvagas.
   96 steg (Chris beslut, granskningsrunda 3): höjt från 20 eftersom
   Burlöv/Idrottsfabriken (8/9 dagars tystnad) kolliderade i samma steg —
   se app/sortering.py::STEG_MAX för uträkningen (minimum 91 för att
   skilja alla dagspar 0-30 åt). Bredderna är linjärt genererade 6-240px. */
.tystnadslinje--w1 { width: 6px; }
.tystnadslinje--w2 { width: 8px; }
.tystnadslinje--w3 { width: 11px; }
.tystnadslinje--w4 { width: 13px; }
.tystnadslinje--w5 { width: 16px; }
.tystnadslinje--w6 { width: 18px; }
.tystnadslinje--w7 { width: 21px; }
.tystnadslinje--w8 { width: 23px; }
.tystnadslinje--w9 { width: 26px; }
.tystnadslinje--w10 { width: 28px; }
.tystnadslinje--w11 { width: 31px; }
.tystnadslinje--w12 { width: 33px; }
.tystnadslinje--w13 { width: 36px; }
.tystnadslinje--w14 { width: 38px; }
.tystnadslinje--w15 { width: 40px; }
.tystnadslinje--w16 { width: 43px; }
.tystnadslinje--w17 { width: 45px; }
.tystnadslinje--w18 { width: 48px; }
.tystnadslinje--w19 { width: 50px; }
.tystnadslinje--w20 { width: 53px; }
.tystnadslinje--w21 { width: 55px; }
.tystnadslinje--w22 { width: 58px; }
.tystnadslinje--w23 { width: 60px; }
.tystnadslinje--w24 { width: 63px; }
.tystnadslinje--w25 { width: 65px; }
.tystnadslinje--w26 { width: 68px; }
.tystnadslinje--w27 { width: 70px; }
.tystnadslinje--w28 { width: 73px; }
.tystnadslinje--w29 { width: 75px; }
.tystnadslinje--w30 { width: 77px; }
.tystnadslinje--w31 { width: 80px; }
.tystnadslinje--w32 { width: 82px; }
.tystnadslinje--w33 { width: 85px; }
.tystnadslinje--w34 { width: 87px; }
.tystnadslinje--w35 { width: 90px; }
.tystnadslinje--w36 { width: 92px; }
.tystnadslinje--w37 { width: 95px; }
.tystnadslinje--w38 { width: 97px; }
.tystnadslinje--w39 { width: 100px; }
.tystnadslinje--w40 { width: 102px; }
.tystnadslinje--w41 { width: 105px; }
.tystnadslinje--w42 { width: 107px; }
.tystnadslinje--w43 { width: 109px; }
.tystnadslinje--w44 { width: 112px; }
.tystnadslinje--w45 { width: 114px; }
.tystnadslinje--w46 { width: 117px; }
.tystnadslinje--w47 { width: 119px; }
.tystnadslinje--w48 { width: 122px; }
.tystnadslinje--w49 { width: 124px; }
.tystnadslinje--w50 { width: 127px; }
.tystnadslinje--w51 { width: 129px; }
.tystnadslinje--w52 { width: 132px; }
.tystnadslinje--w53 { width: 134px; }
.tystnadslinje--w54 { width: 137px; }
.tystnadslinje--w55 { width: 139px; }
.tystnadslinje--w56 { width: 141px; }
.tystnadslinje--w57 { width: 144px; }
.tystnadslinje--w58 { width: 146px; }
.tystnadslinje--w59 { width: 149px; }
.tystnadslinje--w60 { width: 151px; }
.tystnadslinje--w61 { width: 154px; }
.tystnadslinje--w62 { width: 156px; }
.tystnadslinje--w63 { width: 159px; }
.tystnadslinje--w64 { width: 161px; }
.tystnadslinje--w65 { width: 164px; }
.tystnadslinje--w66 { width: 166px; }
.tystnadslinje--w67 { width: 169px; }
.tystnadslinje--w68 { width: 171px; }
.tystnadslinje--w69 { width: 173px; }
.tystnadslinje--w70 { width: 176px; }
.tystnadslinje--w71 { width: 178px; }
.tystnadslinje--w72 { width: 181px; }
.tystnadslinje--w73 { width: 183px; }
.tystnadslinje--w74 { width: 186px; }
.tystnadslinje--w75 { width: 188px; }
.tystnadslinje--w76 { width: 191px; }
.tystnadslinje--w77 { width: 193px; }
.tystnadslinje--w78 { width: 196px; }
.tystnadslinje--w79 { width: 198px; }
.tystnadslinje--w80 { width: 201px; }
.tystnadslinje--w81 { width: 203px; }
.tystnadslinje--w82 { width: 206px; }
.tystnadslinje--w83 { width: 208px; }
.tystnadslinje--w84 { width: 210px; }
.tystnadslinje--w85 { width: 213px; }
.tystnadslinje--w86 { width: 215px; }
.tystnadslinje--w87 { width: 218px; }
.tystnadslinje--w88 { width: 220px; }
.tystnadslinje--w89 { width: 223px; }
.tystnadslinje--w90 { width: 225px; }
.tystnadslinje--w91 { width: 228px; }
.tystnadslinje--w92 { width: 230px; }
.tystnadslinje--w93 { width: 233px; }
.tystnadslinje--w94 { width: 235px; }
.tystnadslinje--w95 { width: 238px; }
.tystnadslinje--w96 { width: 240px; }


/* Tystnadslinjen ritas i relationens stadiumfärg (spec §3, "Signatur") —
   tystnad och steg läses i samma ögonkast. */
.tystnadslinje--blue { background: var(--blue); }
.tystnadslinje--violet { background: var(--violet); }
.tystnadslinje--amber { background: var(--amber); }
.tystnadslinje--green { background: var(--green); }
.tystnadslinje--rose { background: var(--rose); }
.tystnadslinje--sky { background: var(--sky); }
.tystnadslinje--gray { background: var(--gray); }

.lead-uppgiftsrad {
  margin: var(--rytm-3) 0 0;
}

.lead-uppgiftslank {
  display: inline-flex;
  align-items: center;
  gap: var(--rytm-2);
  min-height: 44px;
  padding: var(--rytm-2) var(--rytm-4);
  border-radius: var(--radie-pill);
  font-size: var(--fs-0);
  font-weight: 700;
  text-decoration: none;
  color: var(--accent);
  background: var(--accent-tint);
}

.lead-uppgiftslank:hover {
  color: var(--accent-hover);
  background: var(--accent-tint-hover);
}

.ovriga-relationer {
  margin-top: var(--rytm-6);
  color: var(--ink-muted);
  font-size: var(--fs-1);
}

/* ---------- Relationer (/kunder) ---------- */

.tabell-omslag {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radie-kort);
  background: var(--surface);
}

table.tabell {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.tabell th,
table.tabell td {
  text-align: left;
  padding: var(--rytm-3) var(--rytm-4);
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--fs-1);
  vertical-align: middle;
}

table.tabell tbody tr:last-child td {
  border-bottom: none;
}

table.tabell th {
  font-size: var(--fs-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 700;
}

table.tabell td.belopp,
table.tabell th.belopp {
  text-align: right;
}

.cell-dampad {
  color: var(--ink-muted);
}

.cell-nasta-steg {
  color: var(--ink);
  font-weight: 600;
}

/* Avslutade stadier (Förlorad/Pausad) dämpas via en ljus bakgrundston, inte
   via opacity — opacity skulle blekt VARJE textfärg proportionellt
   (länken, pillen, cell-dampad) under 4,5:1 mot vitt, uppmätt med axe-core
   i en riktig webbläsare (Pass 6). Varje textfärg i raden är redan dämpad
   i sig (--ink-muted, stegfärgens pill) — bakgrundstonen räcker för att
   ögat ska läsa raden som mindre viktig. */
tr.rad--dampad {
  background: var(--bg);
}

.status-forfallen {
  color: var(--rose);
  font-weight: 600;
}

/* ---------- Kundsidan ---------- */

.kund-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rytm-4);
  flex-wrap: wrap;
}

.kund-topp h1 {
  margin-bottom: var(--rytm-1);
}

.kund-typ {
  color: var(--ink-muted);
}

.formularrad--stadium {
  margin-top: var(--rytm-2);
}

.nasta-steg-block {
  margin: var(--rytm-5) 0 var(--rytm-6);
}

.nasta-steg-text {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--ink);
}

.nasta-steg-text--tom {
  color: var(--ink-muted);
  font-weight: 400;
}

.fran-projektet {
  margin: 0 0 var(--rytm-6);
  color: var(--ink-muted);
  font-size: var(--fs-1);
}

.kund-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--rytm-7);
  align-items: start;
}

@media (max-width: 720px) {
  .kund-layout {
    grid-template-columns: 1fr;
  }
}

.faktablock {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radie-kort);
  box-shadow: var(--shadow);
  padding: var(--rytm-4);
}

.faktablock dl {
  margin: 0;
}

.faktablock dt {
  font-size: var(--fs-0);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--rytm-3);
}

.faktablock dt:first-child {
  margin-top: 0;
}

.faktablock dd {
  margin: 0;
  color: var(--ink);
}

section.block {
  margin-bottom: var(--rytm-7);
}

section.block h2 {
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--rytm-2);
}

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

ul.uppgiftslista li {
  padding: var(--rytm-2) 0;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  gap: var(--rytm-3);
  align-items: baseline;
}

ul.uppgiftslista li.klar {
  color: var(--ink-muted);
  text-decoration: line-through;
}

ul.uppgiftslista .uppgift-datum {
  color: var(--ink-muted);
  white-space: nowrap;
}

form.statusrad {
  display: flex;
  align-items: center;
  gap: var(--rytm-2);
}

form.statusrad select {
  padding: var(--rytm-1) var(--rytm-2);
}

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

ul.historik li {
  padding: var(--rytm-3) 0;
  border-bottom: 1px solid var(--border-soft);
}

ul.historik .historik-datum {
  display: block;
  font-weight: 600;
  margin-bottom: var(--rytm-1);
}

.anteckningar {
  max-width: 66ch;
  white-space: pre-wrap;
}

.ovriga-falt {
  margin-top: var(--rytm-5);
  font-size: var(--fs-1);
  color: var(--ink-muted);
}

/* ---------- Ekonomisidan: ett enda tal ---------- */

.stor-siffra {
  font-family: "Manrope", sans-serif;
  font-size: clamp(var(--fs-5), 8vw, 2.6rem);
  font-weight: 800;
  margin: var(--rytm-5) 0 var(--rytm-2);
}

.stor-siffra-etikett {
  font-size: var(--fs-0);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.delsummor {
  display: flex;
  gap: var(--rytm-6);
  flex-wrap: wrap;
  margin: var(--rytm-6) 0 var(--rytm-7);
  padding-top: var(--rytm-4);
  border-top: 1px solid var(--border);
}

.delsumma dt {
  font-size: var(--fs-0);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.delsumma dd {
  margin: var(--rytm-1) 0 0;
  font-size: var(--fs-3);
  font-weight: 700;
}

.delsumma.forfallet dd {
  color: var(--rose);
}

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

label {
  display: block;
  font-size: var(--fs-0);
  color: var(--ink-muted);
  margin-bottom: var(--rytm-1);
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radie-liten);
  padding: var(--rytm-2) var(--rytm-3);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  border-color: var(--accent);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button,
.knapp,
.knapp-svag {
  /* Granskningsfynd runda 1: .knapp-svag hade bara sina EGNA color/
     background/box-shadow-rader (nedan) och ärvde ALDRIG basformen —
     `<a class="knapp-svag">` (sidopanelens "+ Ny relation") blev 24px
     hög, 0 padding, 0 radie, vikt 400: den enda ostylade ytan i hela
     sidopanelen. `.knapp-svag`s egna färgregler nedan har samma
     specificitet och matchas senare i filen, så de vinner fortfarande
     över den fyllda bakgrunden/texten här — bara box-modellen delas. */
  font-family: inherit;
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--radie-liten);
  padding: var(--rytm-2) var(--rytm-4);
  cursor: pointer;
  box-shadow: var(--shadow);
}

/* En <a> är i formen efter samma .knapp/.knapp-svag-klasser som en
   <button> (spec crm-ny-relation §5, tomma lägets knapp + sidopanelens
   "+ Ny relation") — bara layoutegenskaper som en <button> redan har
   gratis via sitt element, inga nya färger eller radier. */
a.knapp,
a.knapp-svag {
  display: inline-block;
  text-decoration: none;
}

button:hover:not(:disabled),
a.knapp:hover {
  background: var(--accent-hover);
}

.knapp-svag {
  color: var(--accent);
  background: var(--accent-tint);
  box-shadow: none;
}

.knapp-svag:hover:not(:disabled) {
  /* Granskningsfynd runda 2: accent (#5850EC) på accent-tint-hover mätte
     4,29:1, under 4,5:1 — accents egen luminans är för låg för att någon
     mörkning av bakgrunden ensam kan rädda paret (se :root-kommentaren).
     Texten byter till accent-hover här, samma mörkare indigo som redan
     används för primärknappens hover-bakgrund — samma kulör, bara mörkare.
     `:not(:disabled)` är en no-op på en <a> (disabled finns inte där) —
     ofarligt, hover gäller ändå. */
  color: var(--accent-hover);
  background: var(--accent-tint-hover);
}

.knapp-liten {
  padding: var(--rytm-1) var(--rytm-3);
  font-size: var(--fs-0);
  white-space: nowrap;
}

.sidopanel-ny {
  /* Granskningsfynd runda 1: träffytan var 24px hög (under 44px-kravet i
     _system/UI_KONVENTIONER_2026.md §1/§6) innan basformen ovan
     applicerades. `var(--rytm-4)` (16px) på båda sidor i stället för
     basens `var(--rytm-2)` (8px) — samma spacing-skala, ingen ny token —
     ger tillräcklig höjd. `display: inline-block` (från `a.knapp-svag`
     ovan, högre specificitet än den här klassen) respekterar vertikal
     padding för klickytans höjd precis som `block` hade gjort. */
  text-align: center;
  padding-top: var(--rytm-4);
  padding-bottom: var(--rytm-4);
}

.faltrad {
  margin-bottom: var(--rytm-3);
}

.formularrad {
  display: flex;
  gap: var(--rytm-3);
  align-items: end;
  flex-wrap: wrap;
}

/* ---------- /ny: "Lägg till ny relation" (spec crm-ny-relation §5) ---------- */

.ny-relation {
  max-width: 480px;
  padding: var(--rytm-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radie-kort);
  box-shadow: var(--shadow);
}

.ny-relation-huvud {
  max-width: 480px;
  margin-bottom: var(--rytm-5);
}

.ny-relation-huvud h1 {
  margin-bottom: var(--rytm-1);
}

.ny-relation-huvud p {
  margin: 0;
  color: var(--ink-muted);
}

.faltgrupp {
  margin-top: var(--rytm-5);
  padding-top: var(--rytm-4);
  border-top: 1px solid var(--border);
}

.faltgrupp-rubrik {
  /* Medvetet UTAN versaler (spec §5): "Kan fyllas i senare" är en dämpad
     hänvisning, inte en sektionsetikett som .etikett (som ÄR versal). */
  font-size: var(--fs-0);
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 0 var(--rytm-3);
}

.falt-hjalp {
  font-size: var(--fs-0);
  color: var(--ink-muted);
  margin: calc(var(--rytm-1) * -1) 0 var(--rytm-3);
}

/* ---------- Flik: <details>/<summary> (spec crm-lugnare-vy §5) ---------- */

.flik {
  border: 1px solid var(--border);
  border-radius: var(--radie-liten);
  background: var(--surface);
  margin-bottom: var(--rytm-3);
}

.flik > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--rytm-2);
  min-height: 44px;
  padding: var(--rytm-2) var(--rytm-4);
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radie-liten);
}

.flik > summary::-webkit-details-marker {
  display: none;
}

.flik > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}

.flik[open] > summary::before {
  transform: rotate(45deg);
}

.flik > summary:hover {
  background: var(--border-soft);
}

.flik-rubrik {
  margin: 0;
  border: none;
  padding: 0;
  font-size: var(--fs-1);
  font-weight: 700;
}

.flik-antal,
.block-antal {
  font-family: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs-1);
  font-weight: 400;
  color: var(--ink-muted);
}

.flik-innehall {
  padding: 0 var(--rytm-4) var(--rytm-4);
}

.flik-innehall > .formularrad,
.flik-innehall > .tabell-omslag + .formularrad {
  margin-top: var(--rytm-4);
}

.faktablock > .flik {
  margin-top: var(--rytm-5);
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .knapp-liten {
    min-height: 44px;
    min-width: 44px;
  }

  .ny-relation {
    padding: var(--rytm-4);
  }
}

/* ---------- Inloggning (ticket 03) — egen minimal layout, ingen
   sidopanel: _inlogg_bas.html ärver INTE base.html. Basstilarna (margin,
   bakgrund, textfärg, typsnitt) kommer redan från den generella `body`-
   regeln ovan — ingen egen klassad body-regel för inloggningen behövs
   (åtgärdsrunda ticket 11, punkt 8: en tidigare sådan regel dubblerade
   den byte för byte). ---------- */

/* Åtgärdsrunda ticket 11, punkt 1: kortet ska INTE flyta centrerat i
   viewporten med en svävande skugga — det ska ligga uppe till vänster i
   samma rytm som `.innehall` (samma padding-skala), utan sidopanel att
   dela grid med (ingen finns före inloggning). Ingen `box-shadow`, en
   `border` i samma metallgrå ton som pipelinets delade ram
   (`--metal-low`, se `.pipeline`) i stället för den vanliga kort-ramen. */
.inlogg-skal {
  min-height: 100vh;
  padding: 26px 32px 60px;
}

@media (max-width: 760px) {
  .inlogg-skal {
    padding: 20px 18px 48px;
  }
}

.inlogg-kort {
  width: 100%;
  max-width: 360px;
  padding: var(--rytm-6);
  background: var(--surface);
  border: 1px solid var(--metal-low);
  border-radius: var(--radie-kort);
}

.inlogg-titel {
  margin: var(--rytm-5) 0 var(--rytm-4);
}

.inlogg-falt {
  margin-bottom: var(--rytm-4);
}

/* Åtgärdsrunda ticket 11, punkt 5: steg två visar kodfältet ensamt på
   sidan med användarnamnet som en liten överrad direkt ovanför fältet,
   inte som ett eget etiketterat formulärfält. */
.inlogg-anvandarnamn-rad {
  margin: 0 0 var(--rytm-2);
  font-size: var(--fs-0);
  color: var(--ink-muted);
}

.inlogg-falt input {
  width: 100%;
  min-height: 44px;
}

.inlogg-fel {
  margin: 0 0 var(--rytm-4);
  padding: var(--rytm-3) var(--rytm-4);
  border-radius: var(--radie-liten);
  border: 1px solid var(--rose);
  background: var(--rose-tint);
  color: var(--rose);
  font-size: var(--fs-1);
}

/* Ticket 06: besked om VARFÖR en session gick ut (`?skal=...`) — samma form
   som .inlogg-fel men amber i stället för rose, eftersom det inte är ett
   fel Chris gjorde, bara ett förklarat utloggat läge. */
.inlogg-besked {
  margin: 0 0 var(--rytm-4);
  padding: var(--rytm-3) var(--rytm-4);
  border-radius: var(--radie-liten);
  border: 1px solid var(--amber);
  background: var(--amber-tint);
  color: var(--amber);
  font-size: var(--fs-1);
}

.inlogg-knapp {
  width: 100%;
  min-height: 44px;
}

/* ---------- Sidopanelens kontoblock (ticket 03) ---------- */

.sidopanel-konto {
  padding-top: var(--rytm-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--rytm-2);
}

.sidopanel-namn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.sidopanel-namn:hover,
.sidopanel-namn:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.sidopanel-utlogg {
  margin: 0;
}

.sidopanel-utlogg .knapp-svag {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 760px) {
  /* Åtgärdsrunda ticket 11, punkt 2: kontoblocket satt i SAMMA rad som
     märket + navigeringen + "+ Ny relation", en rad med `overflow-x: auto`
     — på 390px sköts namnet och "Logga ut" utanför skärmen, synliga bara
     efter horisontell scroll. `flex-basis: 100%` (kombinerat med
     `flex-wrap: wrap` på `.sidopanel` ovan) tvingar kontoblocket till en
     EGEN rad under den scrollbara navigeringsraden i stället — synligt
     utan scroll. */
  .sidopanel-konto {
    flex-basis: 100%;
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .sidopanel-utlogg .knapp-svag {
    width: auto;
  }
}

/* ---------- Kontosidan (ticket 06) ---------- */

.konto-uppgifter {
  margin: 0;
}

.konto-uppgifter dt {
  font-size: var(--fs-0);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: var(--rytm-3);
}

/* Varje dt ligger i en egen <div> (konto.html) — dt är därför ALLTID
   :first-child i sin egen div, oavsett rad. Måste skopas till den FÖRSTA
   div:en, inte till dt:ns egen position (granskningsfynd m3, ticket 06
   åtgärdsrunda). */
.konto-uppgifter > div:first-child dt {
  margin-top: 0;
}

.konto-uppgifter dd {
  margin: 0;
  color: var(--ink);
}

ul.konto-lista {
  list-style: none;
  margin: 0 0 var(--rytm-5);
  padding: 0;
}

.konto-rad {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--rytm-3);
  padding: var(--rytm-3) 0;
  border-bottom: 1px solid var(--border-soft);
}

.konto-enhet {
  color: var(--ink);
  font-weight: 600;
}

.konto-tid {
  color: var(--ink-muted);
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
}

/* Reservkoder kvar (ticket 08) — samma lugna ton som .konto-tid, ingen röd
   varning (DESIGN.md: Operate, inte Persuade). */
.konto-reservkoder {
  margin: 0 0 var(--rytm-4);
  font-variant-numeric: tabular-nums;
}

.konto-reservkoder .konto-reservkoder-lugn {
  color: var(--ink-muted);
  font-size: var(--fs-0);
}

/* Åtgärdsrunda ticket 11, punkt 3: "Logga ut överallt" ärvde bara
   .knapp-svags basform (padding var(--rytm-2), ~33px hög) — under
   44×44px-träffytan (_system/UI_KONVENTIONER_2026.md §1/§6). Skopat till
   den här formen, samma mönster som `.sidopanel-utlogg .knapp-svag`
   ovan, så att inga andra `.knapp-svag`-förekomster (kund.html,
   _komponenter.html) påverkas. */
.konto-utlogg .knapp-svag {
  min-height: 44px;
  min-width: 44px;
}

/* ---------- Affärspipeline: satinmetall + papperskort ---------- */

.pipeline-verktygsrad {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rytm-5);
  margin-bottom: var(--rytm-5);
}

.pipeline-verktygsrad h1 {
  margin-bottom: var(--rytm-1);
}

.pipeline-verktygsrad p,
.pipeline-intro,
.ovriga-relationer {
  margin: 0;
  color: var(--ink-muted);
}

.pipeline-status {
  min-height: 1.5em;
  margin: 0 0 var(--rytm-2);
  color: var(--ink-muted);
  font-size: var(--fs-1);
}

.pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(256px, 1fr);
  gap: 1px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  max-width: 100%;
  min-height: 590px;
  background: var(--metal-low);
  border: 1px solid var(--metal-low);
  border-radius: var(--radie-kort);
  box-shadow: 0 1px 2px rgba(24, 32, 44, 0.08), 0 18px 36px -30px rgba(24, 32, 44, 0.58);
}

.pipeline-kolumn {
  --stadium: var(--gray);
  --stadium-tint: var(--gray-tint);
  scroll-snap-align: start;
  min-width: 0;
  padding: 0 var(--rytm-3) var(--rytm-4);
  background: linear-gradient(180deg, var(--metal-hi) 0, #f2f5f8 118px, #edf1f5 100%);
  border-top: 4px solid var(--stadium);
}

.pipeline-kolumn:first-child {
  border-radius: calc(var(--radie-kort) - 1px) 0 0 calc(var(--radie-kort) - 1px);
}

.pipeline-kolumn:last-child {
  border-radius: 0 calc(var(--radie-kort) - 1px) calc(var(--radie-kort) - 1px) 0;
}

.pipeline-kolumn--blue { --stadium: var(--blue); --stadium-tint: var(--blue-tint); }
.pipeline-kolumn--violet { --stadium: var(--violet); --stadium-tint: var(--violet-tint); }
.pipeline-kolumn--amber { --stadium: var(--amber); --stadium-tint: var(--amber-tint); }
.pipeline-kolumn--green { --stadium: var(--green); --stadium-tint: var(--green-tint); }
.pipeline-kolumn--rose { --stadium: var(--rose); --stadium-tint: var(--rose-tint); }
.pipeline-kolumn--sky { --stadium: var(--sky); --stadium-tint: var(--sky-tint); }
.pipeline-kolumn--gray { --stadium: var(--gray); --stadium-tint: var(--gray-tint); }

.pipeline-kolumn-huvud {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 104px;
  margin: 0 calc(var(--rytm-3) * -1) var(--rytm-3);
  padding: var(--rytm-4) var(--rytm-3) var(--rytm-3);
  background: var(--metal-hi);
  border-bottom: 1px solid var(--border);
}

.pipeline-kolumn-titelrad {
  display: flex;
  align-items: flex-start;
  gap: var(--rytm-2);
}

.pipeline-kolumn-titelrad h2 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-2);
  line-height: 1.3;
}

.pipeline-antal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: var(--radie-pill);
  color: var(--stadium);
  background: var(--stadium-tint);
  font-size: var(--fs-0);
  font-weight: 700;
}

.pipeline-summa,
.pipeline-okant {
  margin: var(--rytm-2) 0 0;
  color: var(--ink-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: var(--fs-0);
  font-variant-numeric: tabular-nums;
}

.pipeline-okant {
  color: var(--rose);
  font-family: inherit;
  font-weight: 700;
}

.pipeline-kortlista {
  display: flex;
  flex-direction: column;
  gap: var(--rytm-3);
  min-height: 450px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pipeline-kort {
  position: relative;
  padding: var(--rytm-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radie-liten);
  box-shadow: 0 1px 2px rgba(24, 32, 44, 0.08), 0 9px 18px -16px rgba(24, 32, 44, 0.6);
  cursor: grab;
}

.pipeline-kort:hover {
  border-color: var(--metal-low);
  box-shadow: 0 2px 4px rgba(24, 32, 44, 0.1), 0 14px 24px -18px rgba(24, 32, 44, 0.58);
}

.pipeline-kort:active {
  cursor: grabbing;
}

.pipeline-kort.dras {
  opacity: 0.62;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -12px rgba(24, 32, 44, 0.72);
}

.pipeline-kort[aria-busy="true"] {
  pointer-events: none;
  opacity: 0.68;
}

.pipeline-kolumn.är-mål {
  background: var(--stadium-tint);
  box-shadow: inset 0 0 0 2px var(--stadium);
}

.pipeline-kort-huvud {
  display: flex;
  align-items: flex-start;
  gap: var(--rytm-2);
}

.pipeline-kort-namn {
  flex: 1;
  min-width: 0;
  color: var(--ink);
  font-family: "Manrope", ui-sans-serif, sans-serif;
  font-size: var(--fs-3);
  font-weight: 800;
  line-height: 1.3;
  text-decoration: none;
}

.pipeline-kort-namn:hover {
  color: var(--accent-hover);
}

.pipeline-draghandtag {
  flex: none;
  color: var(--ink-muted);
}

.pipeline-draghandtag circle {
  fill: currentColor;
}

.pipeline-kontakt {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: var(--fs-0);
}

.pipeline-nasta {
  margin: var(--rytm-4) 0;
  padding-top: var(--rytm-3);
  border-top: 1px solid var(--border-soft);
}

.pipeline-nasta-text {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: 600;
}

.pipeline-nasta-text--tom,
.pipeline-datum--forfallet {
  color: var(--amber);
}

.pipeline-datum {
  display: inline-block;
  margin-top: var(--rytm-1);
  color: var(--ink-muted);
  font-size: var(--fs-0);
}

.pipeline-datum--forfallet {
  font-weight: 700;
}

.pipeline-kort-fakta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rytm-3);
  color: var(--ink-muted);
  font-size: var(--fs-0);
}

.pipeline-varde {
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.pipeline-uppgifter {
  color: var(--accent-hover);
  font-weight: 600;
}

.pipeline-uppgifter--tom {
  color: var(--ink-muted);
  font-weight: 400;
}

.pipeline-flytta {
  margin-top: var(--rytm-4);
  padding-top: var(--rytm-3);
  border-top: 1px solid var(--border-soft);
}

.pipeline-flytta-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--rytm-2);
}

.pipeline-flytta select,
.pipeline-flytta button {
  min-height: 44px;
}

.pipeline-flytta select {
  min-width: 0;
  width: 100%;
  font-size: var(--fs-0);
}

.pipeline-tom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: var(--rytm-4);
  color: var(--ink-muted);
  border: 1px dashed var(--metal-low);
  border-radius: var(--radie-liten);
  font-size: var(--fs-0);
  text-align: center;
}

.pipeline-tom[hidden] {
  display: none;
}

.ovriga-relationer {
  margin-top: var(--rytm-5);
  font-size: var(--fs-1);
}

@media (prefers-reduced-motion: no-preference) {
  .pipeline-kort {
    transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard), opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
  }
}

@media (max-width: 760px) {
  .pipeline-verktygsrad {
    align-items: flex-start;
  }

  .pipeline {
    grid-auto-columns: min(84vw, 300px);
    min-height: 560px;
    scroll-snap-type: x mandatory;
  }

  .pipeline-kortlista {
    min-height: 420px;
  }
}

@media (max-width: 430px) {
  .pipeline-verktygsrad {
    flex-direction: column;
  }

  .pipeline-verktygsrad .knapp {
    min-height: 44px;
  }
}