/* ============================================================
   BIX THEME — gemensam tokengrund för hela webben.
   Källa: docs/handover/BIX-DESIGN-SYSTEM-v1.0.md + chef-beslut 2026-07-02
   (varm canvas + tre-kanvas-rytm).

   En sanning: alla sidor länkar denna fil FÖRE sina egna stylesheets.
   Inga :root-paletter någon annanstans. /inbjudan/business/ får
   behålla sina medvetet varmare undantag som page-scoped overrides.

   Ytorna är varm mörker på riktigt: R > G > B i varje steg.
   Bix är ett bebott rum, inte ett datorgränssnitt.
   ============================================================ */

/* ── hidden-attributet MÅSTE vinna ─────────────────────────────────────────────
   Webbläsarens regel för [hidden] är bara `display:none` i standardarket, och den
   förlorar mot VARJE klassregel som sätter display. `<button class="kal-btn" hidden>`
   med `.kal-btn{display:flex}` är alltså SYNLIG, och felet är tyst: DOM:en säger
   hidden=true medan getComputedStyle säger display:flex.

   Det har bitit oss om och om igen. Vid räkningen 2026-08-27 fanns FJORTON
   handskrivna lokala lappar för exakt det här (`hitta` 6, `panel.css` 6,
   `knock-svar` 1, `landing.css` 1), var och en skriven efter att någon upptäckt buggen
   på nytt. Senaste fallet samma dag, hittat av tillväxtkoordinatorn: kalenderknappen
   på /d/ hade ALDRIG gått att dölja, så en passerad tid erbjöd kunden att lägga en tid
   som varit i sin kalender, och en bokning utan start/slut visade en död knapp.

   En global regel i stället för en femtonde lapp. `!important` behövs: hela poängen är
   att slå klassregler, och utan det förlorar den mot precis det den ska vinna mot.

   KONTROLLERAT före införandet: varje befintlig [hidden]-regel i repot DÖLJER, ingen
   visar, så den här kan bara förstärka det som redan gäller. Inget element bär både
   hidden och en visande style.display (#review-send använder inline display:none,
   aldrig attributet). theme.css laddas FÖRE varje sidas egna ark och täcker 38 av 43
   sidor; knock-svar, en av de fem övriga, har redan sin egen lapp.
   ──────────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

:root {
  /* ── SURFACES — varm mörker (R > G > B), exakt enligt docs/handover/BIX-DESIGN-SYSTEM-v1.0.md §2.1.
     background/surface/elevated/border är dokumentets egna hex; surface-card/surface-raised är
     web-egna mellansteg interpolerade efter samma R-G/G-B-progression (dokumentet definierar bara 4 nivåer). */
  --bg:               #141414;   /* BixColor.background */
  --surface:          #161616;   /* BixColor.surface — cards, inputs, sheets */
  --surface-card:     #1A1A1A;   /* BixColor.surfaceCard */
  --surface-elevated: #1F1F1F;   /* BixColor.surfaceElevated — modaler, popovers, sheets */
  --surface-raised:   #282828;   /* BixColor.surfaceRaised — date pills, raised chips */
  --border:           #2E2E2E;   /* BixColor.border */

  /* ── TEXT — ivory palette ── */
  --text-primary:     #F0EDE8;   /* BixColor.textPrimary */
  --text-secondary:   #9A9790;   /* BixColor.textSecondary */
  --text-tertiary:    #928F8A;   /* BixColor.textTertiary — appens eyebrow-färg (126 av 165 fall) */
  /* iOS har ingen fjärde textnivå. Där en yta behöver något svagare än tertiary använder
     appen textPrimary.opacity(0.45), vilket över #141414 ger exakt detta värde. Alltså
     ett iOS-värde, inte ett påhittat mellansteg. */
  --text-faint:       #777673;

  /* ── ACCENT — primary CTA = ivory fill, mörk text. En sanning. ── */
  --accent:           #F0EDE8;
  --accent-text:      #0A0A0A;
  --accent-brand-subtle: rgba(240, 237, 232, 0.08);

  /* ── SAGE — heligt försvarad, max en användning per skärm ── */
  --sage:             #7BAF96;   /* BixColor.sage */
  --sage-light:       #C8EBD9;   /* BixColor.sageLight — saknades helt på webben */
  --sage-subtle:      rgba(123, 175, 150, 0.15);
  --sage-glow:        rgba(123, 175, 150, 0.08);

  /* ── SEMANTIK ── */
  --error:            #C45C5C;
  --error-subtle:     rgba(196, 92, 92, 0.15);
  --warning:          #C4995C;
  --warning-subtle:   rgba(196, 153, 92, 0.15);

  /* ── FAMILY PALETTE ── */
  /* BixColor.familyPalette — jordskala, INTE en regnbåge. Webbens gamla palett hade dessutom
     sage som family-0, alltså den färg som får förekomma max en gång per skärm; en familj med
     sex medlemmar sprängde regeln på egen hand. */
  --family-0: #A89D8A;   /* själv (taupe) */
  --family-1: #9A8C76;   /* sand */
  --family-2: #827267;   /* taupe */
  --family-3: #766859;   /* ek */
  --family-4: #5E544A;   /* mull */
  --family-5: #4A413A;   /* dim */

  --overlay:          rgba(10, 10, 10, 0.6);   /* BixColor.overlay */

  /* ── ALIASER — signup-flödets kortnamn (styles.css m.fl.) ── */
  --text:     var(--text-primary);
  --sub:      var(--text-secondary);
  --dim:      var(--text-tertiary);
  --dimmer:   var(--text-faint);
  --ivory:    var(--accent);
  --elevated: var(--surface-elevated);

  /* ============================================================
     TYPOGRAPHY — Inter Tight. 6 storlekar, fasta.
     ============================================================ */
  --font-sans:    'Inter Tight', system-ui, sans-serif;
  --font-serif:   'EB Garamond', Georgia, serif;

  --display-size:    56px;  --display-weight: 600;  --display-track: -0.02em;   --display-lh: 1.05;
  --title-size:      28px;  --title-weight:   600;  --title-track:   -0.015em;  --title-lh:   1.10;
  --heading-size:    20px;  --heading-weight: 500;  --heading-track: -0.01em;   --heading-lh: 1.20;
  --body-size:       16px;  --body-weight:    400;  --body-track:    -0.005em;  --body-lh:    1.40;
  --caption-size:    13px;  --caption-weight: 400;  --caption-track: 0;         --caption-lh: 1.35;
  --micro-size:      11px;  --micro-weight:   500;  --micro-track:   0.01em;    --micro-lh:   1.20;
  /* BixType.eyebrow — 11pt SemiBold, +0.22em, lh 1.20, VERSALER. Webben hade fem olika
     letter-spacings (.06/.12/.14/.16/.18em) på fyra ytor och två storlekar; iOS har en. */
  --eyebrow-size:    11px;  --eyebrow-weight: 600;  --eyebrow-track: 0.22em;    --eyebrow-lh: 1.20;

  /* Reserved — endast för BIX. ordmärket. */
  --wordmark-weight: 700;
  --wordmark-tracking: -0.04em;

  /* ============================================================
     SPACING — 4px grid
     ============================================================ */
  --space-4xs: 2px;  --space-3xs: 4px;  --space-2xs: 8px;  --space-xs: 12px;
  --space-sm: 16px;  --space-md: 20px;  --space-lg: 24px;  --space-xl: 32px;  --space-2xl: 48px;

  --screen-margin: 20px;  --card-padding: 16px;  --between-cards: 12px;
  --between-sections: 24px;  --bottom-cta-padding: 32px;
  --touch-min: 44px;  --touch-recommended: 48px;

  /* ============================================================
     RADIUS — 14px är Bix-radien
     ============================================================ */
  --radius-sm: 8px;  --radius-md: 10px;  --radius-lg: 14px;
  --radius-xl: 20px; --radius-xxl: 24px; --radius-full: 999px;
  --radius-card: 14px;  --radius-button: 14px;  --radius-input: 10px;  --radius-sheet: 20px;

  /* ============================================================
     MOTION — BixCurve. Inga linear.
     ============================================================ */
  --curve-ambient:      cubic-bezier(0.4, 0.0, 0.6, 1.0);
  --curve-growth:       cubic-bezier(0.2, 0.8, 0.4, 1.0);
  --curve-materialize:  cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --curve-settle:       cubic-bezier(0.4, 0.0, 0.0, 1.0);
  --curve-text-fade:    cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --curve-cross-fade:   cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --curve-card-enter:   cubic-bezier(0.0, 0.0, 0.2, 1.0);   /* kort/rad glider in — 0.32s (iOS cardEnter) */
  --curve-confirm-lock: cubic-bezier(0.34, 1.4, 0.5, 1.0);  /* bekräfta-lås overshoot — 0.5s (iOS momentConfirmLock) */
  --press-spring:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease:               var(--press-spring); /* legacy-alias (signup-flödet) */

  /* ------------------------------------------------------------
     TID — kurvorna var redan namngivna, tiderna var det inte.
     Följden: sex olika UI-tider levde som literaler över filerna
     (0.15 / 0.18 / 0.2 / 0.25 / 0.3 / 0.4s), där 0.18 och 0.2 är
     perceptuellt omöjliga att skilja åt. Det är inte fyra tempon,
     det är ETT tempo som drivit isär. Tokens gör tempot till ett
     beslut i stället för till en slump per fil.

     De två långa stegen är inte påhittade: kommentarerna på
     --curve-card-enter och --curve-confirm-lock nedan har redan
     dokumenterat 0.32s respektive 0.5s som iOS-kanon i åratal,
     utan att någon token bar värdet.

     Ambient-rörelse (heroCardFloat 7s, bk-gather-spin 9s, en 18s
     transform-drift) hör INTE hit och rörs inte — det är atmosfär,
     inte gränssnittsrespons, och ska inte dela tempo med en knapp.
     ------------------------------------------------------------ */
  --dur-state:   .15s;  /* hover, fokus — snabbaste synliga tillståndsbytet */
  --dur-control:  .2s;  /* knappar, chips, fält — dominerande tempot */
  --dur-panel:   .32s;  /* kort och rader glider in (iOS cardEnter) */
  --dur-moment:   .5s;  /* bekräfta-låset (iOS momentConfirmLock) */
  /* .12s är INTE "exit" i den här koden — det är vad ~11 :active-regler redan
     använder för press-återkoppling (transform .12s var(--press-spring)).
     Jag införde först --dur-exit på det värdet, vilket hade fått nästa
     migrering att döpa om press till exit. Namnet följer nu användningen. */
  --dur-press:   .12s;

  /* ============================================================
     SHADOWS — sparsamt. Mörker hanteras med surface-nivåer.
     ============================================================ */
  --shadow-glow-accent:  0 0 24px rgba(240, 237, 232, 0.04);
  --shadow-glow-sage:    0 0 16px rgba(123, 175, 150, 0.15);
  --shadow-card-hover:   0 0 12px rgba(240, 237, 232, 0.04);

  /* ------------------------------------------------------------
     ELEVATION — mjuk skugga, alfa sjunker när blurren växer.
     Ovanstående glow-tokens är dekor (pulserande ljus), inte höjd.

     Första versionen bar också en 1px-ring, efter Airbnbs och Linears
     produktionsmönster. Det var fel läst av mig: de ritar ringen I STÄLLET
     FÖR en border, på en kantlös yta. Varje kandidatelement här har redan
     en `border:`, så ringen hamnade utanför den mot sidbakgrunden och mätte
     1.12:1 (mörkt) respektive 1.04:1 (ivory) — under vad ett 1px-streck
     behöver för att synas, och svagare än den border den skulle ankra.

     Kvar är det som faktiskt bär mönstret: stor mjuk skugga får LÄGRE
     opacitet än liten hård, annars läser den som smuts. Tailwinds default
     (konstant 10% på alla nivåer) är precis signaturen vi undviker.
     Två ramper, för en svart skugga är osynlig mot vår mörka grundyta.
     ------------------------------------------------------------ */
  /* RINGEN ÄR BORTTAGEN, och det var min egen tabbe. Airbnb/Linear ritar ringen
     I STÄLLET FÖR en border, på en kantlös yta. Varje kandidat här har redan en
     `border:`, så ringen hamnade UTANFÖR den, mot sidbakgrunden — uppmätt 1.12:1
     (mörkt) och 1.04:1 (ivory), alltså under vad ett 1px-streck behöver för att
     synas, och svagare än den border den skulle ankra. Ett osynligt lager som
     kostar en extra skuggpassage är sämre än inget lager.
     Kvar är det som faktiskt bär mönstret: alfa SJUNKER när blurren växer. */
  --elev-1: 0 1px  2px rgba(0, 0, 0, 0.45);
  --elev-2: 0 3px  8px rgba(0, 0, 0, 0.38);
  --elev-3: 0 10px 28px rgba(0, 0, 0, 0.30);

  /* Rad-hover + emfascell — skopas om av .canvas-ivory. RGB matchar --surface/--surface-elevated. */
  --row-hover:      rgba(22, 22, 22, 0.5);    /* RGB = --surface */
  --cell-emphasis:  rgba(31, 31, 31, 0.45);   /* RGB = --surface-elevated */
}

/* ============================================================
   IVORY-KANVAS — tre-kanvas-rytmens mittband.
   Samma bläck, inverterat papper. Sektionens befintliga regler
   fortsätter fungera eftersom de läser tokens.
   ============================================================ */
.canvas-ivory {
  --bg:               #F0EDE8;
  --surface:          #E9E5DE;
  --surface-card:     #EDE9E2;
  --surface-elevated: #E4DFD7;
  --surface-raised:   #DDD7CE;
  --border:           rgba(23, 19, 14, 0.14);

  --text-primary:     #17140F;
  --text-secondary:   #5E594F;
  --text-tertiary:    #6F6959;   /* 4.5:1 mot ivory — WCAG AA för liten text */
  --text-faint:       #948C7C;

  /* Mörkaste pixeln är CTA:n på papper */
  --accent:           #17140F;
  --accent-text:      #F0EDE8;
  --accent-brand-subtle: rgba(23, 19, 14, 0.08);

  --overlay:          rgba(23, 19, 14, 0.35);

  --shadow-glow-accent: 0 12px 32px rgba(23, 19, 14, 0.08);
  --shadow-card-hover:  0 12px 32px rgba(23, 19, 14, 0.10);

  /* Ljust papper: svagare skuggor räcker. Ringen borttagen av samma skäl som ovan. */
  --elev-1: 0 1px  2px rgba(23, 19, 14, 0.10);
  --elev-2: 0 3px  8px rgba(23, 19, 14, 0.08);
  --elev-3: 0 10px 28px rgba(23, 19, 14, 0.06);

  --row-hover:      rgba(23, 19, 14, 0.05);
  --cell-emphasis:  rgba(23, 19, 14, 0.07);

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

/* ============================================================
   NATIVE-FEEL — gör webben app-lik i TWA (Android WebView) + iOS-PWA.
   Tar bort webbläsar-tells som avslöjar "sajt i ett skal": tap-blink,
   långtrycks-kontextmeny, gummiband/pull-to-refresh, dubbeltap-zoom,
   iOS text-inflation. Formfält behåller markering + callout.
   ============================================================ */
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;   /* iOS blåser inte upp text */
  -webkit-tap-highlight-color: transparent;                  /* ingen grå blink vid tryck */
}
body {
  -webkit-touch-callout: none;                               /* inget långtrycks-kontextmeny på länkar/bilder */
  touch-action: manipulation;                                /* ingen dubbeltap-zoom / 300ms tap-delay */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* Formfält + medvetet kopierbart innehåll (.selectable) får markering + callout tillbaka */
input, textarea, select, [contenteditable], .selectable {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}

/* App-lika sidövergångar: cross-document View Transitions gör /hitta→/b→/boka→/konto
   till en mjuk crossfade i st.f. vit sidladdnings-blink (Android WebView/Chrome 126+).
   Degraderar tyst till instant nav i browsers utan stöd. Rör ej SPA-stegen i /boka
   (de är innerHTML-swappar, inte dokument-nav). Reduced-motion respekteras nedan. */
/* ============================================================
   BIX.-ORDMÄRKETS PUNKT = RUND CIRKEL (låst lockup-spec 2026-07-05, amendment
   till DEL 1.1). Aldrig fontens punktglyf. Ø 0,087em, gap 0,0298em efter X,
   currentColor. text-indent+overflow döljer "."-glyfen utan markup-ändring.
   OBS SCOPE: gäller ENDAST varumärket (.wordmark/.nav-logo/.qr-wm). Titel-
   signaturens kursiva punkt (.bk-dot, .pl-h1 .d, .pl-soon-t .d) berörs ALDRIG. */
.wordmark .d, .nav-logo .dot, .footer-logo .dot, .f-logo .dot, .qr-wm > span {
  display: inline-block; width: .087em; height: .087em; border-radius: 50%;
  background: currentColor; margin-left: .0298em; vertical-align: baseline;
  overflow: hidden; text-indent: 100%; white-space: nowrap;
}

/* BOSSE-versalregeln (docs/marketing/bosse-versalregel.md, 2026-09-13): namnet
   står med gemener i DOM:en och blir versalt visuellt, så skärmläsare säger
   "Bosse" i stället för att bokstavera en versal sträng. */
.bosse-versal { text-transform: uppercase; }

/* ============================================================
   FILM-GRAIN — 2,8 % fast textur. Flyttad hit av samma skäl som paletten:
   "En sanning", raden överst i den här filen.

   Regeln levde i FEM kopior (home.css, styles.css, integritetspolicy,
   anvandarvillkor, inbjudan/index) med två olika filter-id ('n' respektive
   'noise'), och konsekvensen var inte dubbelritning utan ett HÅL: booking.css
   och panel.css hade ingen, så /hitta, /konto, /b, /boka och hela panelen
   saknade texturen helt medan marknadssidorna och juridiksidorna hade den.
   Bokningsflödet — den mest använda ytan vi har — var alltså den enda utan.
   Varje sida länkar theme.css först, så en regel här täcker allt.

   pointer-events: none är inte kosmetik: utan den hade ett fast lager på
   z-index 9999 slukat varje klick på hela sajten.
   ============================================================ */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
/* Utskrift: grain på papper blir smuts, inte film. */
@media print { body::after { display: none; } }

/* Tangentbords-fokus (skrivbord): en enda ring i textPrimary (= appens accent,
   DEL 2.1 — ingen egen fokus-färg). Bara :focus-visible, inte :focus, så ringen
   syns för tangentbordsnavigering men inte vid musklick (Vercel/Linear-mönster).
   OBS: home.css:615 har en äldre sage-ring (6:e sage-platsen utöver DEL 2.4:s
   5 sanktionerade) — inte replikerad hit, flaggad separat. */
/* `html` framför väljaren är inte kosmetik, det är hela poängen. Regeln ovan var
   (0,1,0) i specificitet — exakt samma som en klass. theme.css laddas FÖRST på
   varje sida, så varenda senare `.bk-input { outline: none }` vann på källordning
   och släckte ringen. Uppmätt: 15 fältklasser i booking.css, styles.css,
   panel.css, /konto, /hitta och /b hade ingen synlig tangentbordsfokus alls,
   och de som hade en ersättare bar `box-shadow ... var(--accent-brand-subtle)`
   — samma 1.22:1-ring som home.css:389 redan dömt ut som "gjorde inget jobb".
   `html :focus-visible` är (0,1,1) och vinner utan att någon fil behöver ändras.
   Fortfarande bara :focus-visible, alltså osynlig vid musklick precis som förut. */
html :focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }

@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 0.28s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}/* ------------------------------------------------------------
   TOUCH-BETEENDEN, och BARA på touch.
   overscroll-behavior:none och user-select:none låg förut ovillkorligt på
   html+body. Båda löser touch-problem — pull-to-refresh, gummiband, att ett
   tryck markerar text — och båda gör skada med mus:

   1. SCROLL-KEDJAN. .hero är `height:100svh; overflow:hidden`, alltså en
      scroll-container som täcker hela första skärmen utan att kunna scrolla.
      Ett hjulsteg där försöker kedja uppåt, men body bar overscroll-behavior:
      none och stoppade kedjan. Följden: musen scrollade ingenting så länge
      pekaren stod över heron. Rapporterat två gånger av chefen; jag avfärdade
      det båda gångerna eftersom scrollTo() går FÖRBI kedjan och därför alltid
      såg grönt ut. Programmatisk scroll bevisar inte att hjulet fungerar.
   2. user-select:none gör att man inte kan markera en adress eller ett pris
      för att kopiera det. På en telefon är det app-likt, på en dator fientligt.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  html, body { overscroll-behavior: none; }
  body { -webkit-user-select: none; user-select: none; }
}