/* =============================================================
   app.css — designspråket: tokens, bas, typografi och de element
   sensestock.com är byggd av (eyebrow, rail, NumberTile, siffra,
   knappar, rörelse).

   Källa: docs/design/forlaga/forlaga.css. Varje färg är märkt "webb"
   (sensestock.com:s levande CSS) eller "manual" (varumärkesriktlinjerna)
   — inget värde är påhittat här.

   Delarna (kort, rader, fält, flikar, märken) ligger i app-delar.css,
   skalet i skal.css och de självhostade typsnitten i
   vendor/fonts/fonts.css. Sidornas egen CSS använder de här tokens och
   definierar aldrig egna färger eller skuggor.

   Mobile first: varje @media är min-width. Ingen max-width någonstans.
   ============================================================= */

/* --- Tokens --------------------------------------------------- */
:root {
  /* Varumärke. Basen är sensestock.com:s levande CSS — värdena är
     hämtade därifrån, inte tolkade. Manualen fyller luckorna. */
  --navy: #0c1f33;       /* webb */
  --navy-2: #122c47;     /* webb */
  --blue: #2079b5;       /* webb · ≈ manualens Dark water #2178b5 */
  --blue-dark: #1a628f;  /* webb */
  --blue-deep: #334fb4;  /* webb */
  --blue-pale: #7fb7de;  /* webb · blå på navy (eyebrow i mörkt) */
  --ink: #121212;        /* webb */
  --ink-2: #46505c;      /* webb */
  --line: #e2e8f0;       /* webb */
  --bg: #f8fafc;         /* webb */
  --surface: #fff;       /* webb */
  --warm: #f5f3f3;       /* webb */
  --sand: #a08e75;       /* webb · sparsam accent */

  /* Härledda ytor */
  --line-soft: #eef2f7;
  --blue-soft: #2079b514;   /* webbens chip-bakgrund: blå 8 % */
  --navy-line: rgba(255, 255, 255, .12);

  /* Status. Ur brand manualen (varumarkesriktlinjer.md), inte uppfunnet:
     webbplatsen har ingen statuspalett, manualen har. Används sparsamt —
     en markering per rad, aldrig en färgad yta. */
  --ok: #3fa09b;         /* manual · Cooling water */
  --ok-ink: #2a6b68;     /* härledd · mörkad, för text (≥4.5:1) */
  --danger: #d70b5b;     /* manual · Red soil — förfallet, fel */
  --danger-ink: #a80847; /* härledd · mörkad, för text */
  --warn: #f15a22;       /* manual · Burned sand — pågår, varning */
  --warn-ink: #b03c12;   /* härledd · mörkad, för text */
  --rain: #00a7e1;       /* manual · Rain water */
  --purple: #a1869a;     /* manual · Purple rain — oanvänd */
  --ice: #d0d1d3;        /* manual · Ice grey — oanvänd */
  --sun: #ffdd00;        /* manual · Simply sun — oanvänd */

  /* Grått. gray-3 är den ljusaste som får bära text (≈4.6:1 mot vitt);
     gray-1 bär bara prickar och markörer. */
  --gray-1: #8b99a5;
  --gray-3: #6b7986;
  --num-ink: #6b7986;    /* siffergrått — samma krav, 4.6:1 */

  /* Typografi. Archivo är webbplatsens eget substitut för manualens
     Avenir (som saknar webblicens i repot). IBM Plex Mono bär allt som
     ska gå att jämföra kolumnvis: tider, id:n, räknare, cron. */
  --font-sans: "Archivo", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-2xs: 10px;
  --t-xs: 11px;
  --t-sm: 12px;
  --t-md: 13px;
  --t-base: 14px;
  --t-lg: 16px;
  --t-xl: 19px;
  --t-title: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);

  /* Mått. 4 px-rutnät. Tätt inuti listor, generöst mellan sektioner. */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --tap: 44px;          /* appens tapkontrakt — inte förlagans 40 */
  --gap: 12px;          /* inuti en sektion */
  --sect: 24px;         /* mellan sektioner (40 px på desktop) */
  --pad: 16px;
  --container: 1160px;  /* webbens innehållsbredd */
  --rail-w: 64px;       /* ikonrail, surfplatta */
  --side: 224px;        /* sidebar, desktop */
  --topbar-h: 52px;
  --tabbar-h: 56px;
  /* Safe-area: hörnradier, hack och hemindikator. Alla env()-värden nedan
     är noll om inte sidans viewport bär viewport-fit=cover — den taggen i
     layout.html (och i auth.go:s loginPage) är förutsättningen för att
     något av det här ska räknas alls. */
  --safe-top: env(safe-area-inset-top, 0px);
  /* Flikradens utfyllnad nertill är ett FAST mått, inte safe-arean.
     Mattias beslut 2026-09-19 efter mätning på riktig telefon: skalet når
     skärmens underkant (--app-h nedan), och då blev hemindikatorns 34 px
     bara luft under etiketterna. Sex pixlar, så raden andas mot kanten. */
  --tabbar-pad-b: 6px;
  /* Topbarens TOTALA höjd: raden plus remsan bakom statusfältet. Allt som
     placerar sig under topbaren — detaljarket, chattens höjdräkning — läser
     den här, aldrig --topbar-h, annars blir ytan för kort med inset. */
  --topbar-total-h: calc(var(--topbar-h) + var(--safe-top));
  /* Vad ett fast förankrat element längst ner måste hålla sig ovanför:
     flikradens VERKLIGA höjd — raden, utfyllnaden och överkantens linje.
     Bottenflikbaren finns bara under 1024 px; där ovanför tar :root i
     skal.css över med surfplattans egen safe-area. */
  --app-bottom-inset: calc(var(--tabbar-h) + var(--tabbar-pad-b) + 1px);

  /* Glappet mellan layoutvyn och den synliga ytan. En installerad
     iOS-PWA kan ha två vyhöjder samtidigt: mätt på Mattias iPhone
     2026-09-19 var 100% / documentElement.clientHeight (= det position:
     fixed fäster mot) 812 medan dvh, innerHeight, visualViewport och
     screen alla sa 874. Allt som är `fixed` hamnade därför 62 px för
     högt. Skalet självt har uttrycklig höjd (--app-h) och når kanten.

     skal.js mäter differensen och skriver in den här; 0 på allt annat.
     Fasta element drar bort den från sitt bottenvärde:
        bottom: calc(<sitt värde> - var(--vy-glapp, 0px))
     Noll glapp = exakt som förut, överallt. */
  --vy-glapp: 0px;

  /* Webbplatsens kortskugga. Kort bär skugga, inte ram. */
  --shadow-card: 0 18px 40px -22px #06121f73;
  --shadow-raise: 0 22px 48px -20px #06121f8c;
  --shadow-lg: 0 -14px 44px -12px #06121f73;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Tre kvarlevor från det gamla namnlagret. De står kvar för att deras
     enda användare ligger utanför den här omgången — tas bort i samma
     ändring som döper om dem på plats:
       --ss-red-soil, --ss-burned-sand  static/meeting-recorder.js (el.style.color)
       --tracking-tight                 static/voice.css */
  --ss-red-soil: var(--danger);
  --ss-burned-sand: var(--warn);
  --tracking-tight: -.02em;
}

/* --- Reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
/* Måste stå här: en klassregel med display: flex slår annars webbläsarens
   egen [hidden] { display: none } och båda flikpanelerna renderas samtidigt. */
[hidden] { display: none !important; }
a:hover { color: var(--blue-dark); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --- Typografi ------------------------------------------------ */
h1, h2, h3 { font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
h1 { font-size: var(--t-lg); }
h2 { font-size: var(--t-base); }
h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -.01em; }

/* En sidtitel per sida, stor och tung — sajtens rubrikvikt. */
.page-title h1 { font-size: var(--t-title); font-weight: 750; line-height: 1.05; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted, .text-muted { color: var(--gray-3); }
.small { font-size: var(--t-sm); }
.lead { font-size: var(--t-base); color: var(--ink-2); max-width: 62ch; }

/* --- Eyebrow: mono-etikett med streck före --------------------- */
/* `—— LEVERANTÖR`. Ersätter små grå h3:or: varje sektion får en sådan. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-dark);
}
.eyebrow::before { content: ""; flex: 0 0 auto; width: 28px; height: 2px; background: currentColor; }
.eyebrow--ink { color: var(--ink-2); }
.eyebrow--danger { color: var(--danger-ink); }
.eyebrow--tight::before { width: 20px; }
/* På navy: samma etikett, den ljusare blå i stället för ink. */
.eyebrow--pale { color: var(--blue-pale); }

/* --- Rail: mono vänster, mono höger, linje under --------------- */
/* `SÄLJ ———— 5 ÖPPNA`. Grupprubriken i hela appen. */
.rail {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
}
.rail-label, .rail-value {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rail-value { text-align: right; color: var(--gray-3); white-space: nowrap; }
.rail-line { grid-column: 1 / -1; height: 1px; background: var(--line); }
.rail--dark .rail-label, .rail--dark .rail-value { color: rgba(255, 255, 255, .6); }
.rail--dark .rail-line { background: var(--navy-line); }
.rail--flush { margin-bottom: 0; }
/* Rail med en knapp sist (bana på tavlan): tre kolumner, linjen under alla. */
.rail--act { grid-template-columns: 1fr auto auto; align-items: center; }

/* --- NumberTile: navy panel med stora mono-tal ----------------- */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--navy);
  color: #eef3f8;
}
.numbers > .rail { grid-column: 1 / -1; margin-bottom: 10px; }
.num-cell { min-width: 0; }
.num-cell .n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
}
.num-cell .rule { display: block; width: 28px; height: 2px; margin: 8px 0; background: var(--blue); }
.num-cell .foot {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.num-cell--alert .rule { background: var(--danger); }

/* --- Siffra som designelement i listor ------------------------- */
.idx {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--num-ink);
  letter-spacing: .02em;
}

/* --- Tagg: mono-text, inte bubbla ------------------------------ */
.tag { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gray-3); white-space: nowrap; }
.tag--ink { color: var(--ink-2); }
.tag--danger { color: var(--danger-ink); font-weight: 500; }
/* Statusmarkering: prick + mono-text. Ersätter färgade bubblor. */
.stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

/* --- Knappar --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tap);
  padding: 10px 18px;
  border: 1px solid var(--ink-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-md);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.btn svg { width: 15px; height: 15px; }
.btn:hover { background: rgba(18, 18, 18, .05); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: #fff; }
.btn--dark { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--dark:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn--danger { border-color: #e6b7c9; color: var(--danger-ink); }
.btn--danger:hover { background: #fdeaf1; color: var(--danger-ink); }
/* Tertiär: text i blått. Ingen ram, ingen yta. */
.btn--text { border-color: transparent; padding: 8px 2px; color: var(--blue); font-weight: 600; }
.btn--text:hover { background: transparent; color: var(--blue-dark); }
.btn--sm { min-height: 36px; padding: 7px 13px; font-size: var(--t-sm); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Ikonknapp. Visuellt liten, tapyta full — pseudo-elementet växer utanför. */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.icon-btn::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--tap);
  height: var(--tap);
  transform: translate(-50%, -50%);
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn--mini { width: 24px; height: 24px; color: var(--gray-3); }
.icon-btn--mini svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--line-soft); color: var(--ink); }
.icon-btn--done:hover { background: #e9f4f3; color: var(--ok-ink); }

/* --- Rörelse --------------------------------------------------- */
/* Sektioner tonar in tio pixlar nerifrån, precis som på webbplatsen.
   Bara när JS finns (html.js sätts av skal.js) — utan JS står allt
   kvar synligt, sidan får aldrig stå tom.

   Notera att det som göms är `.rise-init`, inte `.rise`. Markören sätts
   av skal.js på de sektioner som fanns när sidan laddades, och bara då.
   Intoningen hör till första sidladdningen; innehåll som kommer in
   senare — ett HTMX-byte av #cockpit vid varje klar-knapp eller
   delmomentsklick, en SSE-uppdatering i mötesvyn — bär aldrig markören
   och kan därför inte målas med opacity 0 ens i ett enda frame.
   Att i stället ta bort en klass vid htmx:afterSwap hade varit en kapp-
   löpning mot måleriet, och att lita på htmx-händelser alls hade lämnat
   SSE-vägen ogömd. Det här kan inte blinka: markören finns inte. */
@media (prefers-reduced-motion: no-preference) {
  html.js .rise-init { opacity: 0; }
  html.js .rise-init.in-view { animation: tile-rise .4s ease-out both; }
}
@keyframes tile-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Luft och bredd -------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: var(--gap); }
.row-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.push { margin-left: auto; }

@media (min-width: 1024px) {
  :root { --sect: 40px; --gap: 14px; }
}