/* DM Sans 400 normal latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-400-normal-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;
}
/* DM Sans 400 normal latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-400-normal-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;
}
/* DM Sans 500 normal latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-500-normal-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;
}
/* DM Sans 500 normal latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-500-normal-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;
}
/* DM Sans 600 normal latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-600-normal-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;
}
/* DM Sans 600 normal latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/dm-sans-600-normal-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;
}
/* DM Serif Display 400 normal latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-serif-display-400-normal-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;
}
/* DM Serif Display 400 normal latin */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-serif-display-400-normal-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;
}
/* Fraunces 300-600 italic latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-300-600-italic-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;
}
/* Fraunces 300-600 italic latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-300-600-italic-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;
}
/* Fraunces 300-700 normal latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-300-700-normal-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;
}
/* Fraunces 300-700 normal latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fraunces-300-700-normal-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;
}
/* JetBrains Mono 400 normal latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-400-normal-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;
}
/* JetBrains Mono 400 normal latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-400-normal-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;
}
/* JetBrains Mono 500 normal latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-500-normal-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;
}
/* JetBrains Mono 500 normal latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/jetbrains-mono-500-normal-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;
}
/* Schibsted Grotesk 400-900 italic latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-400-900-italic-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;
}
/* Schibsted Grotesk 400-900 italic latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-400-900-italic-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;
}
/* Schibsted Grotesk 400-900 normal latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-400-900-normal-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;
}
/* Schibsted Grotesk 400-900 normal latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-400-900-normal-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;
}

/* ── css/tokens.css ── */
:root {
  /* Bakgrund */
  --bg:           #F2F8F9;
  --surface:      #FFFFFF;
  --border:       #D4E6E8;

  /* Accent */
  --accent:       #1F5E66;
  --accent-mid:   #2E7A82;
  --accent-light: #3D9AA4;
  --accent-2:     #2E6644;
  --accent-subtle:#E8F4F5;

  /* Text */
  --text-1:       #122628;
  --text-2:       #506A70;

  /* Semantisk */
  --gain:         #22C55E;
  --loss:         #EF4444;
  --neutral:      #6B7280;
  --warning:      #F59E0B;

  /* Typografi */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-ui:      'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radier */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Skugga */
  --shadow-sm: 0 1px 3px rgba(18,38,40,.06), 0 1px 2px rgba(18,38,40,.04);
  --shadow-md: 0 4px 12px rgba(18,38,40,.08), 0 2px 4px rgba(18,38,40,.04);

  /* ─── Extended typography ───────────────────────────────────── */
  --font-mono:   'JetBrains Mono', 'Menlo', monospace;
  --text-2xl:    24px;

  /* ─── Animation durations ───────────────────────────────────── */
  --dur-fast:    120ms;
  --dur-normal:  220ms;
  --dur-slow:    350ms;
  --dur-xslow:   500ms;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:    cubic-bezier(0.0, 0, 0.2, 1);

  /* ─── Z-index scale ─────────────────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  100;
  --z-modal:     200;
  --z-toast:     300;
  --z-tooltip:   400;

  /* ─── Overlay & focus ───────────────────────────────────────── */
  --overlay-bg:  rgba(18, 38, 40, 0.6);
  --focus-ring:  0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ─── Extended shadows ──────────────────────────────────────── */
  --shadow-lg:   0 12px 40px rgba(18, 38, 40, 0.14), 0 4px 12px rgba(18, 38, 40, 0.08);

  /* ─── Extended surfaces ─────────────────────────────────────── */
  --surface-3:   #E4F1F3;

  /* ─── Semantic subtle fills ─────────────────────────────────── */
  --gain-subtle:    rgba(34, 197, 94, 0.12);
  --loss-subtle:    rgba(239, 68, 68, 0.12);
  --warning-subtle: rgba(245, 158, 11, 0.12);
  --accent-subtle-2: rgba(31, 94, 102, 0.08);

  /* Typografiskala */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-3xl: 28px;

  /* Semantiska alias */
  --positive:       var(--gain);
  --negative:       var(--loss);
  --primary:        var(--accent);
  --primary-light:  #3D9AA4;
  --surface-elevated: #EEF8FA;
  --surface-2:      var(--surface-elevated);

  /* Radier alias */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);

  /* Nav */
  --nav-height: 64px;

  /* ─── Layout ──────────────────────────────────────────── */
  --container:   min(1100px, 100% - 2 * clamp(16px, 4vw, 40px));
  --section-pad: clamp(48px, 8vw, 96px);

  /* ─── Monokrom teal-skala (landing-redesign) ────────────────
     EN kulör. Variation bara i luminans — aldrig hue.
     Används av landing-sidans mörka band & fade-övergångar.
     Befintliga --accent* lämnas orörda (app-sidorna använder dem). */
  --teal-900:   #0C2C31;
  --teal-800:   #0F3B41;   /* mörka band: hero / cta */
  --teal-700:   #134349;
  --teal-500:   #2E7A82;
  --teal-300:   #7FB3B8;   /* ljus accent på mörkt */
  --teal-150:   #C9E0E2;   /* subtila linjer */
  --mist:       #EEF5F6;   /* ljus sektionsyta */
  --mist-2:     #F5FAFB;

  /* Cashflow */
  --cashflow-income:        #2E7A82;
  --cashflow-income-fill:   rgba(46, 122, 130, 0.15);
  --cashflow-expense:       #EF4444;
  --cashflow-expense-fill:  rgba(239, 68, 68, 0.12);
  --cashflow-savings-pos:   rgba(16, 185, 129, 0.18);
  --cashflow-savings-neg:   rgba(239, 68, 68, 0.25);

  /* Kategorifärger */
  --cat-mat:               #F59E0B;
  --cat-transport:         #3B82F6;
  --cat-boende:            #8B5CF6;
  --cat-handel:            #EC4899;
  --cat-noje:              #06B6D4;
  --cat-halsa:             #EF4444;
  --cat-sparande:          #10B981;
  --cat-prenumerationer:   #6366F1;
  --cat-swish:             #8B97A6;
  --cat-ovrigt:            #8B97A6;

  /* ─── Landing dark theme ────────────────────────────────── */
  --landing-bg-base:   #0A1F22;
  --landing-bg-100:    #0F2A2E;
  --landing-bg-200:    #142F34;
  --landing-bg-300:    #1A3840;

  --glass-bg:          rgba(20, 47, 52, 0.6);
  --glass-blur:        12px;
  --glass-border:      rgba(61, 154, 164, 0.18);

  --glow-teal:         0 0 24px rgba(61, 154, 164, 0.35);
  --glow-strong:       0 0 48px rgba(61, 154, 164, 0.5);
  --glow-text:         drop-shadow(0 0 8px rgba(61, 154, 164, 0.6));

  --landing-text-1:    #E8F4F5;
  --landing-text-2:    #8AAFB5;
  --landing-text-3:    #3D9AA4;

  /* ─── UI-uppgradering 2026: sektor/asset-class-skala ─────────────
     Desaturerad, harmoniserad runt brand-teal (Wealthfront-register).
     Funktionell färg: avatar-fill, tunn kant-accent, kategori-prick.
     Skild från --cat-* (utgiftskategorier) och --teal-* (landing).
     Härled tonade ytor med color-mix(), t.ex.:
       background: color-mix(in srgb, var(--sector-tech) 10%, var(--surface)); */
  --sector-industri:   #3D7A82;   /* brand-teal */
  --sector-tech:       #5B7FA6;   /* dämpad blå */
  --sector-finans:     #4E7D5E;   /* dämpad grön */
  --sector-bank:       #3E6B86;   /* dämpad skiffer-blå */
  --sector-konsument:  #B06A60;   /* dämpad terrakotta */
  --sector-halsa:      #5A9183;   /* dämpad havsgrön */
  --sector-energi:     #C18A4E;   /* dämpad ockra */
  --sector-fastighet:  #7E72A6;   /* dämpad lavendel */
  --sector-gaming:     #8A6B94;   /* dämpad plommon */
  --sector-default:    #6E8389;   /* dämpad grå-teal */

  /* ─── Tonade status-ytor (kort-bakgrund) ─────────────────────────
     Mjukare än --*-subtle (12%). Alpha-baserade → temaagnostiska. */
  --gain-wash:     rgba(34, 197, 94, 0.07);
  --loss-wash:     rgba(239, 68, 68, 0.06);
  --warning-wash:  rgba(245, 158, 11, 0.07);
  --accent-wash:   rgba(31, 94, 102, 0.05);

  /* Tunna status-kanter (tonad kort-ram) */
  --gain-line:     rgba(34, 197, 94, 0.22);
  --loss-line:     rgba(239, 68, 68, 0.20);
  --warning-line:  rgba(245, 158, 11, 0.22);
  --accent-line:   rgba(31, 94, 102, 0.18);

  /* ─── Eyebrow (overline-etikett ovanför rubriker) ────────────────
     Signatur-lockup: eyebrow (sans) + serif-titel. */
  --eyebrow-size:     11px;
  --eyebrow-weight:   600;
  --eyebrow-tracking: 0.08em;

  /* Hover-elevation för klickbara kort */
  --shadow-hover:  0 8px 24px rgba(18, 38, 40, 0.10), 0 3px 8px rgba(18, 38, 40, 0.06);

  /* ═══════════════════════════════════════════════════════════════
     DS: "Sapiax Wealth Intelligence" — tonal djup, tonade skuggor,
     editorial typ. Allt additivt; inga shipped-värden ändras.
     Källa: docs/DESIGN-SYSTEM.md + docs/redesign-stitch/TOKEN-MAPPING-SPEC.md
     ═══════════════════════════════════════════════════════════════ */

  /* ─── Tonal teal-ytstege (M3 container-ladder) ──────────────────
     EN kulör, bara luminans-steg. lowest = vit yta på canvas,
     highest = mest tonad viloyta. Ger djup utan grå linjer. */
  --surface-container-lowest:  #FFFFFF;
  --surface-container-low:     #E2F8FA;
  --surface-container:         #DCF2F4;
  --surface-container-high:    #D6ECEF;
  --surface-container-highest: #D1E7E9;
  --surface-dim:               #C8DEE0;
  --surface-bright:            #E9FDFF;

  /* Inverse-yta (mörk chip/snackbar på ljust) */
  --inverse-surface:           #203436;
  --inverse-on-surface:        #DFF5F7;

  /* ─── Sekundär/tertiär teal-accenter ────────────────────────────
     --accent (#1F5E66) förblir brand. Dessa utökar familjen.
     -deep = DS primary (mörkaste action/kritisk data). */
  --accent-deep:                   #00464D;
  --on-accent:                     #FFFFFF;
  --on-accent-container:           #9AD5DE;
  --accent-secondary:              #146870;
  --accent-secondary-container:    #A6EFF7;
  --on-accent-secondary-container: #1E6E76;
  --accent-tertiary:               #00464C;
  --accent-tertiary-container:     #005F67;
  --on-accent-tertiary-container:  #80D8E3;
  --accent-tint:                   #2A676F;

  /* Outline (sällan — DS föredrar tonal layering framför linjer) */
  --outline:                   #70797A;
  --outline-variant:           #BFC8CA;

  /* ─── 3-nivå tonad elevation ────────────────────────────────────
     "tonal layering + tinted shadows". elev-2 bär teal-tint
     (interaktivitet); elev-3 = overlays. */
  --elev-1: 0 1px 2px rgba(18,38,40,.04), 0 2px 6px rgba(18,38,40,.06);
  --elev-2: 0 2px 5px -1px rgba(31,94,102,.12), 0 6px 16px -2px rgba(18,38,40,.10);
  --elev-3: 0 12px 32px -4px rgba(18,38,40,.18), 0 4px 12px rgba(18,38,40,.10);

  /* Back-compat: peka gamla skugg-namn på de tonade elevationerna.
     Befintliga callers får automatiskt den rikare skuggan. */
  --shadow-hover:  var(--elev-2);
  --shadow-lg:     var(--elev-3);

  /* ─── Motion ─────────────────────────────────────────────────────
     --ease-spring finns redan (samma kurva DS anger). Semantiskt
     alias + två namngivna durations + stagger-steg. */
  --ease-standard: var(--ease-spring);
  --dur-tab:       var(--dur-normal);   /* glidande tab-underline */
  --stagger-list:  60ms;                /* lista fade+rise per item */

  /* ─── Editorial typ-roller (6-stegs hierarki) ───────────────────
     Speglar DS-roller; återanvänder --font-display/--font-ui.
     body-md/body-sm finns redan som --text-base/--text-sm. */
  --headline-xl:   39px;   --headline-xl-lh:   48px;
  --headline-lg:   31px;   --headline-lg-lh:   40px;
  --headline-lg-m: 31px;   --headline-lg-m-lh: 38px;
  --headline-md:   25px;   --headline-md-lh:   32px;
  --display-number: 31px;  --display-number-lh: 40px;
  --display-number-tracking: -0.02em;
  --body-lg:       20px;   --body-lg-lh:       28px;
  --label-md:      13px;   --label-md-lh:      16px;
  --label-md-tracking: 0.05em;

  /* ─── Delight-interaktioner (subtila, editiorial) ─────────────────
     Mjukt teal-tintat card-glow — stort blur, negativ spread = diffus
     atmosfär, inte "neon". Hover lyfter alpha ett snäpp. Ripple-färg
     tonad mot accent för ljusa ytor + ljus variant för knappar på teal. */
  --glow-card:        0 12px 40px -8px rgba(31, 94, 102, 0.16);
  --glow-card-hover:  0 16px 48px -8px rgba(31, 94, 102, 0.22);
  --ripple-color:           rgba(31, 94, 102, 0.18);
  --ripple-color-on-accent: rgba(255, 255, 255, 0.42);

  --dur-ripple: 600ms;
  --ease-ripple: cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Färgexpansion 2026 (pit-inspirerad): korall / ink / sand ───
     Korall = varm 10%-accent, ENDAST publika sajten och ALDRIG i
     statuskontext (hue-nära --loss). Ink = djup bläcknavy för mörka
     bokstöd-sektioner (CTA/footer). Sand = varm ljus sektionsyta
     (rytmens ljusa pol). Kontraster AA-verifierade — se
     docs/superpowers/plans/fargexpansion-sapiax.md §3. */
  --coral:        #C0503C;   /* oklch(0.55 0.14 30) ca — stor text/UI på ljust, brödtext på vit */
  --coral-deep:   #9E3527;   /* brödtext-säker på alla ljusa ytor */
  --coral-bright: #F09A82;   /* accent på mörka ytor */
  --coral-soft:   #F6BCA9;   /* fyllnad/pill på mörkt, mörk text ovanpå */
  --coral-subtle: #FBEAE4;   /* tintad badge-yta på ljust */
  --coral-wash:   rgba(192, 80, 60, 0.07);
  --coral-line:   rgba(192, 80, 60, 0.22);

  --ink-900:      #0C1524;   /* oklch(0.19 0.03 260) ca — mörk bokstöd-sektion */
  --ink-800:      #12203A;   /* paneler/kort på ink-900 */
  --indigo-300:   #93A7E8;   /* accent på mörka ytor + aurorans blå pol */
  --indigo-200:   #B4C2F0;   /* hover/ljusare accent på mörkt */
  --ink-wash:     rgba(18, 32, 58, 0.06);

  --sand:         #F6F1E7;   /* oklch(0.96 0.015 85) ca — ljus publik sektionsyta */
  --sand-2:       #FBF8F2;   /* ljusare zebra-pol / kort på sand */

  /* Aurora multi-hue (konsumeras av public-delight.css) */
  --aurora-indigo: color-mix(in srgb, var(--indigo-300) 24%, transparent);
  --aurora-coral:  color-mix(in srgb, var(--coral-bright) 14%, transparent);

  /* ── Evergreen & Ivory (landing-rebrand, fas 1 — blir sajtens default i senare fas) ── */
  --ev-ink:        #0B231B;
  --ev-ink-2:      #16362A;
  --ev-ink-3:      #24493A;
  --ev-ink-deep:   #081A14;   /* mörk sektion-bg */
  --ev-paper:      #FAF8F2;
  --ev-paper-2:    #F1EEE4;
  --ev-mint:       #2EBD85;
  --ev-mint-soft:  #DDF0E2;
  --ev-mint-deep:  #17604A;
  --ev-gold:       #C9A24B;
  --ev-gold-tint:  #FFFDF6;
  --ev-gold-soft:  #F3EAD5;
  --ev-gold-text:  #8A6A24;
  --ev-loss:       #E2574B;
  --ev-loss-soft:  #F8E3E0;
  --ev-loss-text:  #B03D33;
  --ev-line:       #E4E0D2;
  --ev-line-dark:  rgba(255, 255, 255, 0.09);
  --ev-txt-2:      #5C6B60;
  --ev-txt-dark-2: #93A89B;
  --ev-font-display: 'Fraunces', Georgia, serif;
  --ev-font-ui:      'Schibsted Grotesk', 'DM Sans', sans-serif;
}

[data-theme="dark"] {
  --bg:              #0D1E21;
  --surface:         #142A2E;
  --border:          #243F45;
  --accent:          #2E7A82;
  --accent-2:        #4A7A5A;
  --accent-subtle:   #1A3538;
  --text-1:          #E4EEEF;
  --text-2:          #7A9EA5;
  --surface-elevated:#1C3538;
  --primary-light:   #4AADB8;
  --surface-3:    #0A191C;
  --shadow-lg:    0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --focus-ring:   0 0 0 2px var(--bg), 0 0 0 4px var(--accent-light);
  --overlay-bg:   rgba(0, 0, 0, 0.7);

  /* ─── DS dark-overrides ──────────────────────────────────────────
     Ytstege inverteras: lowest = mörkast panel, highest = lyft. */
  --surface-container-lowest:  #0F2629;
  --surface-container-low:     #142E32;
  --surface-container:         #18353A;
  --surface-container-high:    #1E3D42;
  --surface-container-highest: #244349;
  --surface-dim:               #0A191C;
  --surface-bright:            #1C3538;

  --inverse-surface:           #DFF5F7;
  --inverse-on-surface:        #203436;

  /* Accenter ljusas upp för kontrast på mörka ytor */
  --accent-deep:                  #4AADB8;
  --on-accent:                    #00272B;
  --on-accent-container:          #9AD5DE;
  --accent-secondary:             #6FCBD4;
  --accent-tertiary:              #5BC2CE;
  --accent-tint:                  #4AADB8;

  --outline:                   #5A6A6D;
  --outline-variant:           #2E454A;

  /* Tonad elevation → släpp teal-tint, fördjupa svärtan */
  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.35);
  --elev-2: 0 2px 5px -1px rgba(0,0,0,.40), 0 6px 16px -2px rgba(0,0,0,.45);
  --elev-3: 0 12px 32px -4px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.40);

  /* ─── Delight-interaktioner (dark) ───────────────────────────────
     Djupare svart-tintad glow; ripple ljusare för synlighet på mörka ytor. */
  --glow-card:        0 12px 40px -8px rgba(0, 0, 0, 0.45);
  --glow-card-hover:  0 16px 48px -8px rgba(0, 0, 0, 0.58);
  --ripple-color:           rgba(74, 173, 184, 0.22);
  --ripple-color-on-accent: rgba(255, 255, 255, 0.40);

  /* ─── Färgexpansion 2026 (dark) ──────────────────────────────────
     Korall ljusas upp för mörka ytor; sand mappas till befintliga
     mörka ytor (alias-strategi). Ink-900/800 är temaneutrala. */
  --coral:        #F09A82;
  --coral-deep:   #F6BCA9;
  --coral-subtle: rgba(240, 154, 130, 0.12);
  --coral-wash:   rgba(240, 154, 130, 0.08);
  --coral-line:   rgba(240, 154, 130, 0.24);
  --indigo-300:   #B4C2F0;
  --sand:         #142A2E;
  --sand-2:       #1C3538;
}

/* ── css/base.css ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-ui);
  /* Tonal canvas: mjuk teal-ljusgloria upptill ovanpå basytan.
     "paper, not plastic" — djup utan att lämna paletten. */
  background:
    radial-gradient(135% 75% at 50% -12%,
      color-mix(in srgb, var(--accent) 7%, transparent) 0%,
      transparent 58%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text-1);
  min-height: 100vh;
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: var(--nav-height);
  overscroll-behavior-y: none;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

/* Desktop: sidebar-layout aktiveras via JS på body */
@media (min-width: 1024px) {
  body.analyst-desktop #app {
    max-width: none;
    margin-left: 240px;
    padding-bottom: 0;
  }
}

.page { padding: var(--s-5) var(--s-4); }
.page-title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: var(--s-6);
}
/* Tier 2 standard kort-primitiv: tonal lagrad elevation (--elev-1) som
   avgränsare; hairline-bordern nedtonad till en knappt synlig kant.
   Inset top-highlight ger en lit-edge på tonade ytor. */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--elev-1);
  border: 1px solid color-mix(in srgb, var(--border) 38%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard);
}

/* Klickbara kort: tonad teal-skugga (elev-2) + subtilt lyft på hover. */
.card--interactive { cursor: pointer; }
.card--interactive:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--elev-2);
  transform: translateY(-2px);
}
.card--interactive:active { transform: translateY(-1px) scale(0.997); }
.label-sm {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.neutral { color: var(--neutral); }

/* ─── Eyebrow-etikett (signatur-lockup ovanför rubriker) ───────────── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--accent-mid);
}

/* Tabular numerals — för siffror som animeras/uppdateras (count-up) */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.form-input {
  display: block;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--bg);
  color: var(--text-1);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus { border-color: var(--accent); }

.startup-fallback {
  min-height: calc(100vh - var(--nav-height));
  padding: var(--s-8) var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  color: var(--text-1);
}

.startup-fallback__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.startup-fallback__mark {
  width: 56px;
  height: 56px;
  display: block;
}

.startup-fallback h1 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
}

.startup-fallback p {
  max-width: 32ch;
  color: var(--text-2);
  line-height: 1.5;
}

.startup-fallback__button {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-4);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

/* ─── Knapp-system ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--s-5);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.btn:active:not(:disabled) { transform: scale(0.98); }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
}

.btn--primary:hover:not(:disabled) { opacity: 0.88; }

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--border);
}

.btn--ghost:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

/* ─── Auth-sidor: bryt ut ur app-bredden ─────────────────────────── */
/* Landing, login, signup och onboarding ska vara fullbredd och utan
   nav-padding. Klassen sätts av app.js via updateShell(). */
body.is-auth-page #app {
  max-width: none;
  padding-bottom: 0;
}

/* ─── Accessibility utilities ───────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Stagger list entry animation ──────────────────────────────── */
.stagger-list > * {
  animation: aicfo-fade-up var(--dur-normal) var(--ease-spring) both;
  animation-delay: calc(var(--stagger-i, 0) * 40ms);
}

/* ─── Skeleton loaders ───────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--border) 25%,
    var(--surface-elevated) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: aicfo-shimmer 1.5s infinite linear;
  border-radius: var(--r-sm);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton--text   { height: 14px; }
.skeleton--title  { height: 20px; }
.skeleton--card   { height: 80px; border-radius: var(--r-lg); }
.skeleton--wide   { width: 90%; }
.skeleton--medium { width: 65%; }
.skeleton--short  { width: 40%; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ── Sapiax wordmark (brand logo) ─────────────────────────── */
.brand-wordmark {
  display: block;
  height: 26px;
  width: auto;
}
.brand-wordmark--sm { height: 22px; }
.brand-wordmark--lg { height: 34px; }

/* ─── Reduced motion: respektera systeminställning ──────────────────
   Stänger av transform-lyft, stagger och shimmer för känsliga användare. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card--interactive:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Delight-interaktioner — ripple, tilt, knapp-mikrointeraktioner
   Subtilt editorialt lager; aldrig högljutt. Se js/lib/interactions.js.
   ═══════════════════════════════════════════════════════════════════ */

/* Positioneringskontext + klippning för vågen. JS (attachRipple) sätter
   data-ripple-bound="1" på exakt de element den binder — både [data-ripple]
   och .btn. Selector träffar alltså bara element som faktiskt får ripple,
   och bara efter att JS kört. Om JS inte kört (reduced-motion/fel) påverkas
   inga befintliga knappar — .btn återges orörd.
   overflow:hidden klipper vågen till knappens rounded rect. */
[data-ripple-bound="1"] {
  position: relative;
  overflow: hidden;
}

.ripple__wave {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: var(--ripple-color);
  transform: scale(0);
  opacity: 0.35;
  animation: ripple var(--dur-ripple) var(--ease-ripple);
}
.ripple__wave--on-accent { background: var(--ripple-color-on-accent); }

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ─── Tilt — transition ger mjukheten, JS sätter transform ─────── */
[data-tilt] {
  transition: transform var(--dur-normal) var(--ease-spring);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ─── Knapp-mikrointeraktioner (smakfulla, ingen restyling) ──────
   Pilar får en translateX-nudge; ikoner i knappar subtil scale.
   Opt-in via .btn--arrow (pil) och [data-icon] inuti .btn. */
.btn--arrow .btn__arrow {
  display: inline-block;
  transition: transform var(--dur-normal) var(--ease-spring);
}
.btn--arrow:hover:not(:disabled) .btn__arrow { transform: translateX(3px); }

.btn [data-icon] {
  transition: transform var(--dur-normal) var(--ease-spring);
}
.btn:hover:not(:disabled) [data-icon] { transform: scale(1.08); }

/* ═══════════════════════════════════════════════════════════════════
   App scroll-reveal — opt-in via .app-reveal på wrapper + data-animate
   på barn. Speglar .pub-page--anim / .landing-page men med DS-tokens.
   Använd: lägg class "app-reveal" på container + data-animate på barn,
   anropa sedan initScrollAnimations(wrapper) från public-animations.js.
   ═══════════════════════════════════════════════════════════════════ */
.app-reveal [data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity var(--dur-xslow) var(--ease-out),
    transform var(--dur-xslow) var(--ease-out);
}
.app-reveal [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.app-reveal [data-animate][data-slide-x] { transform: translateX(-20px); }
.app-reveal [data-animate][data-slide-x].is-visible { transform: translateX(0); }

/* data-delay-stagger sköts av initScrollAnimations (setTimeout per element),
   samma mönster som .pub-page--anim — ingen CSS-delay behövs. */

@media (prefers-reduced-motion: reduce) {
  .app-reveal [data-animate],
  .app-reveal [data-animate].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-tilt] { transition: none !important; }
  .ripple__wave { display: none !important; }
}

/* ── Touch: osynligt utökad träffyta till minst 44×44 ──────────
   Endast pekskärmar (pointer: coarse) — desktop-mus opåverkad.
   Kräver position på elementet; ::after fångar tap utanför
   den visuella ytan utan att ändra layout. */
@media (pointer: coarse) {
  .tap-target { position: relative; }
  .tap-target::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* ── iOS: förhindra fokus-zoom — fält måste vara ≥16px på mobil ── */
@media (max-width: 430px) {
  .form-input { font-size: 16px; }
}

/* ── css/app-evergreen.css ── */
body.app-ev {
  /* Yta & bakgrund */
  --bg: var(--ev-paper);
  --surface: #ffffff;
  --border: var(--ev-line);

  /* Accent (teal → evergreen) */
  --accent: var(--ev-mint-deep);
  --accent-mid: #1F8A63;
  --accent-light: var(--ev-mint);
  --accent-subtle: var(--ev-mint-soft);
  --primary: var(--ev-mint-deep);
  --primary-light: var(--ev-mint);

  /* Text */
  --text-1: var(--ev-ink);
  --text-2: var(--ev-txt-2);

  /* Semantiska */
  --gain: var(--ev-mint);
  --loss: var(--ev-loss);
  --warning: var(--ev-gold);

  /* Typografi */
  --font-display: var(--ev-font-display);
  --font-ui: var(--ev-font-ui);

  /* Delight-lager */
  --ripple-color: rgba(46, 189, 133, 0.18);
  --glow-card: 0 1px 2px rgba(11, 35, 27, 0.05), 0 12px 32px -12px rgba(11, 35, 27, 0.14);

  /* Radier (prototypens rundare skala) */
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Nav — ljus frostad bar (Etapp 9, Task 2): prototypens --nav-h */
  --nav-height: 76px;

  /* Etapp 9: prototypens accentgrön — app-scopad. Landningssidorna
     (utan body.app-ev) behåller globala --ev-mint-deep #17604A. */
  --ev-mint-deep: #1E9A6B;

  /* Sektorfärger per prototypens allokeringsbar (proto rad 1658–1667) */
  --sector-finans:    #1F5E66;
  --sector-tech:      #2EBD85;
  --sector-konsument: #C9A24B;
  --sector-kassa:     #D8D2C2;

  /* Prototypens skuggor & hårlinjer (proto rad 43–58) */
  --ev-shadow-card: 0 10px 30px -14px rgba(11, 35, 27, 0.18);
  --ev-shadow-ink:  0 24px 48px -20px rgba(11, 35, 27, 0.45);
  --ev-hairline:        rgba(11, 35, 27, 0.09);
  --ev-hairline-strong: rgba(11, 35, 27, 0.16);
  --ev-ink-40: rgba(11, 35, 27, 0.40);
  --ev-ink-62: rgba(11, 35, 27, 0.62);
  --ev-gold-wash: rgba(201, 162, 75, 0.14);
  --ev-mint-wash: rgba(46, 189, 133, 0.12);
}

/* ── css/nav.css ── */
#nav-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-bottom {
  display: flex;
  height: var(--nav-height);
  align-items: center;
  justify-content: space-around;
  padding: 0 var(--s-2);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text-2);
  font-size: 11px;
  font-weight: 500;
  min-width: 48px;
  min-height: 48px;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.15s, background 0.15s, transform 0.1s, opacity 0.1s;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-item svg { width: 22px; height: 22px; }

.nav-item.active {
  color: var(--accent);
  background: var(--accent-subtle);
}

.nav-item:hover { color: var(--accent); }

.nav-item:active {
  opacity: 0.65;
  transform: scale(0.92);
}

/* Badge för notiser */
.nav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: var(--loss);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

/* ============================================================
   App Evergreen — prototypens ljusa frostade bar (Etapp 9).
   Ersätter den mörka flytande pillen från Etapp 2. Allt nedan scopat
   under body.app-ev; ostyrd = dagens fallback (flagga av).
   ============================================================ */
body.app-ev #nav-bar {
  background: transparent;
  border-top: none;
  padding: 0;               /* full bredd — ingen pill-luft */
  pointer-events: none; /* baren själv — barnen återaktiverar */
}

body.app-ev #nav-bar::before {
  /* Fade-mask ovanför baren (prototypens .phone-screen::after) */
  content: '';
  position: absolute;
  inset: -28px 0 100% 0;
  background: linear-gradient(to top, rgba(250, 248, 242, 0.9), transparent);
  pointer-events: none;
}

body.app-ev .nav-bottom {
  pointer-events: auto;
  height: var(--nav-height);
  border-radius: 0;
  background: rgba(250, 248, 242, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -1px 0 rgba(11, 35, 27, 0.06), 0 -12px 32px -18px rgba(11, 35, 27, 0.25);
  padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  align-items: stretch;
}

body.app-ev .nav-item {
  color: var(--ev-ink-40);
  font-weight: 700;
  letter-spacing: 0.04em;
  gap: 4px;
  border-radius: 16px;
  transition: color 0.15s, transform 0.15s;
}

body.app-ev .nav-item .nav-label {
  font-size: 10px;
}

body.app-ev .nav-item:active { transform: scale(0.9); }

body.app-ev .nav-item.active {
  background: none;
  color: var(--ev-ink);
}

body.app-ev .nav-item svg { transition: transform 0.3s var(--ease-spring); }
body.app-ev .nav-item.active svg { transform: translateY(-1px); }

body.app-ev .nav-item:hover {
  color: var(--ev-ink);
}

body.app-ev .nav-ind {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ev-mint);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s, transform 0.3s var(--ease-spring);
}

body.app-ev .nav-item.active .nav-ind { opacity: 1; transform: scale(1); }

body.app-ev .nav-orb {
  position: relative;
  width: 64px;
  margin-top: -26px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Orben: mörk ink i vila, mint-ikon, 6px pappersring (proto rad 1382–1405) */
body.app-ev .nav-orb__core {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 32% 28%, #2A5648, var(--ev-ink) 70%);
  color: var(--ev-mint);
  box-shadow:
    0 12px 28px -8px rgba(11, 35, 27, 0.55),
    0 0 0 6px var(--ev-paper);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s;
}

body.app-ev .nav-orb__core svg {
  width: 24px;
  height: 24px;
}

body.app-ev .nav-orb.is-active .nav-orb__core {
  background: radial-gradient(circle at 32% 28%, #4FDCA5, var(--ev-mint) 50%, #157A55);
  color: var(--ev-ink);
  box-shadow:
    0 14px 32px -8px rgba(46, 189, 133, 0.6),
    0 0 0 6px var(--ev-paper);
}

body.app-ev .nav-orb:active .nav-orb__core {
  transform: scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
  body.app-ev .nav-item,
  body.app-ev .nav-ind,
  body.app-ev .nav-orb__core {
    transition: none !important;
  }

  body.app-ev .nav-orb:active .nav-orb__core {
    transform: none;
  }
}

/* Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px.
   Prototypens .nav-label är 10px (proto rad 1352) — golvet vinner. */
@media (max-width: 430px) {
  body.app-ev .nav-item .nav-label { font-size: 11px; }
}


/* ── css/components/top-bar.css ── */
#top-bar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.top-bar__inner {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-4);
}

.top-bar__brand {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: var(--s-1) var(--s-2);
  margin-left: calc(-1 * var(--s-2));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.top-bar__brand .brand-wordmark {
  height: 24px;
}

.top-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Bell-slot: notification-bell renderar in en .monitor-bell här.
   Ge den header-anpassad placering (komponentens egna stilar styr utseendet). */
.top-bar__bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.top-bar__bell .monitor-bell {
  position: static;
}
/* .tap-target vill ha position: relative för sin ::after-träffyta,
   men regeln ovan (högre specificitet) tvingar static och skulle
   flytta ankaret till en förälder — då missar touch-tapet knappen
   helt. Återställ relative bara på tap-target-varianten — och
   nollställ monitor.css top/right-offsets (42px / --s-5, avsedda
   för absolute-läget på wealth-card) som annars vaknar som
   relative-förskjutning och flyttar klockan ur sin slot på touch. */
@media (pointer: coarse) {
  .top-bar__bell .monitor-bell.tap-target {
    position: relative;
    top: auto;
    right: auto;
  }
}

.top-bar__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-subtle);
  color: var(--accent);
  border: none;
  cursor: pointer;
  font-size: 20px;
  transition: background var(--dur-fast), transform var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.top-bar__avatar:hover { background: var(--surface-3); }
.top-bar__avatar:active { transform: scale(0.94); }

/* Auth-/publika sidor: ingen header */
body.is-auth-page #top-bar { display: none; }

/* ── css/components/page-header.css ── */
.page-header {
  position: sticky;
  top: 0;
  z-index: var(--z-dropdown);
  margin: calc(var(--s-5) * -1) 0 var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-4);
  /* Tonad yta: subtil teal-wash som skiljer header-zonen från sidan.
     Washen (rgba med 5% alpha) ligger som eget lager OVANPÅ en solid
     surface-bas — annars lyser scrollande innehåll igenom den sticky
     headerns övre del. */
  background:
    linear-gradient(180deg, var(--accent-wash) 0%, transparent 100%),
    var(--surface);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition:
    padding var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-out),
    background var(--dur-normal) var(--ease-out);
}

/* Sentinel — osynlig markör i normalt flöde; IntersectionObserver lyssnar
   på när den lämnar viewporten för att toggla condensed. */
.page-header__sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.page-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.page-header__lockup {
  min-width: 0;
}

.page-header__eyebrow {
  display: block;
  margin-bottom: var(--s-1);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.page-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 31px;
  line-height: 1.08;
  color: var(--text-1);
  letter-spacing: -0.01em;
  transition: font-size var(--dur-normal) var(--ease-spring);
}

.page-header__sub {
  margin-top: var(--s-2);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--text-2);
  max-width: 42ch;
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Höger-zon: stödmetric + åtgärder (header-as-toolbar) */
.page-header__aside {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.page-header__metric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: var(--text-1);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ─── Condensed sticky-state ──────────────────────────────────────────
   När sidan scrollats förbi sentineln krymper headern till en kompakt
   bar: mindre titel, eyebrow + sub fade:as ut, tätare padding. */
.page-header.is-condensed {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  box-shadow: var(--shadow-md);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent));
  backdrop-filter: saturate(1.1) blur(6px);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
}

.page-header.is-condensed .page-header__title {
  font-size: 19px;
  line-height: 1.2;
}

.page-header.is-condensed .page-header__eyebrow,
.page-header.is-condensed .page-header__sub {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* prefers-reduced-motion: ingen storleksanimering, instant toggle */
@media (prefers-reduced-motion: reduce) {
  .page-header,
  .page-header__title,
  .page-header__eyebrow,
  .page-header__sub {
    transition: none;
  }
}
.page-header--no-motion,
.page-header--no-motion .page-header__title,
.page-header--no-motion .page-header__eyebrow,
.page-header--no-motion .page-header__sub {
  transition: none;
}

/* ── css/components/cards.css ── */
/* ── Tre-nivå kort-hierarki ──────────────────────────────────────
   Tier 1 — flat tonad container: tonad bg, INGEN skugga (.tonal-card)
   Tier 2 — standard kort: --shadow-sm, hover-lyft (nudge-card)
   Tier 3 — hero/elevated: --shadow-md + subtil --accent-wash-tint (wealth-card)
   Djup via elevation, inte ramar — --border lämnas som hårline endast
   där den fortsatt behövs. */

/* --- Tier 1: flat tonad container (tonad bg, ingen skugga) --- */
.tonal-card {
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: none;
}

/* --- Tier 3: Wealth Card (hero/elevated) --- */
.wealth-card {
  /* subtil accent-wash-tint ovanpå vit yta signalerar "hero" */
  background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--s-5);
}

.wealth-card__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--s-2);
}

.wealth-card__value {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--text-1);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.wealth-card__sentiment {
  font-size: 15px;
  color: var(--text-2);
  margin-top: var(--s-2);
}

/* Insight: daglig förändring */
.wealth-card__change {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: 15px;
  font-weight: 500;
}

/* --- Nudge-kort --- */
.nudge-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.nudge-card {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  /* Tier 2: elevation som default-avgränsare; tunn hairline kvar för kant-skärpa,
     vänsterkant bär status/prioritet via tonad linje */
  border: 1px solid transparent;
  border-left: 3px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  cursor: pointer;
  transition: box-shadow var(--dur-normal) var(--ease-spring),
              border-color var(--dur-normal) var(--ease-spring),
              transform var(--dur-fast) var(--ease-spring);
}

/* Klickbart kort: hover lyfter, press trycker ned.
   Signatur-glow från --glow-card-hover komponeras ovanpå elev-2. */
.nudge-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-hover), var(--glow-card-hover);
}
.nudge-card:active { transform: scale(0.98); }

.nudge-card[data-priority="opportunity"] {
  border-left-color: var(--primary);
}

.nudge-card[data-priority="signal"] {
  border-left-color: var(--accent);
}

.nudge-card__title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}

.nudge-card__body {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
}

.nudge-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.nudge-card__text {
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.4;
}

.nudge-card__arrow {
  margin-left: auto;
  color: var(--text-2);
  font-size: 18px;
  flex-shrink: 0;
}

/* ─── Signatur-glow på interaktiva kort ──────────────────────────
   Tunnskiktad teal-glow från --glow-card-hover. Lägg composition ovanpå
   befintlig elev-2 + inset-highlight så kortet "tänds" mjukt på hover —
   atmosfär, inte neon. Stort blur + negativ spread = diffus ljuscirkel.
   (Override av base.css hover-regel; cards.css laddas senare → vinner.) */
.card--interactive:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              var(--elev-2),
              var(--glow-card-hover);
}
.card--interactive:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5),
              var(--elev-1),
              var(--glow-card);
}

/* Opt-in viloglow för hero/featured-kort. Subtil --glow-card i vila,
   lyfts till --glow-card-hover på hover. Använd sparsamt — ett hero-kort
   per vy. Komponerar ovanpå befintlig kort-elevation om .card--interactive
   också sätts; annars själv tillräckligt på statiska hero-kort. */
.card--glow {
  box-shadow: var(--shadow-sm), var(--glow-card);
  transition: box-shadow var(--dur-normal) var(--ease-spring);
}
.card--glow:hover {
  box-shadow: var(--shadow-sm), var(--glow-card-hover);
}

/* ─── Reduced motion: ingen press-transform ──────────────────────
   Glow (box-shadow) är inte motion → lämnas aktiv även här.
   Befintligt globalt block (base.css) nullar transforms. */
@media (prefers-reduced-motion: reduce) {
  .nudge-card { transition: box-shadow var(--dur-fast) linear, border-color var(--dur-fast) linear; }
  .nudge-card:active { transform: none; }
}

/* ── css/components/signal-card.css ── */
.sig-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4) var(--s-3);
  box-shadow: var(--glow-card, 0 1px 2px rgba(0,0,0,0.04));
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, border-color 0.2s;
}
.sig-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--sec, var(--border)); opacity: 0.85;
}
.sig-card:hover { transform: translateY(-2px); border-color: var(--accent-light); }
.sig-card:active { transform: scale(0.985); }
.sig-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sig-card__head { display: flex; align-items: center; gap: var(--s-3); }
.sig-card__avatar {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px; color: #fff;
  background: var(--sec, var(--text-2));
}
.sig-card__id { min-width: 0; flex: 1; }
.sig-card__ticker { font-weight: 800; font-size: 15px; color: var(--text-1); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sig-card__name { font-size: 11.5px; color: var(--text-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-card__overlap { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 2px; }

.sig-status { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; padding: 3px 8px; border-radius: 999px; flex: none; }
.sig-status--kopzon { background: var(--accent-subtle); color: var(--accent); }
.sig-status--bevaka { background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning); }

/* Konfidensring */
.sig-conf { position: relative; width: 42px; height: 42px; flex: none; }
.sig-conf svg { width: 42px; height: 42px; transform: rotate(-90deg); }
.sig-conf circle { fill: none; stroke-width: 3.4; }
.sig-conf .track { stroke: color-mix(in srgb, var(--text-2) 14%, transparent); }
.sig-conf .bar {
  stroke: var(--conf-c, var(--gain)); stroke-linecap: round;
  stroke-dasharray: 107; stroke-dashoffset: 107;
  animation: sig-conf-fill 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
@keyframes sig-conf-fill { to { stroke-dashoffset: var(--conf-off); } }
.sig-conf b {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}

.sig-card__signal { display: flex; gap: 7px; align-items: baseline; margin: var(--s-3) 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-1); }
.sig-card__bolt { color: var(--warning); flex: none; transform: translateY(1px); }

/* Köpzonband (delas med dossiern) */
.sig-zone { margin-top: var(--s-3); }
.sig-zone__meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 5px; }
.sig-zone__state--in { color: var(--gain); }
.sig-zone__state--out { color: var(--warning); }
.sig-zone__track { position: relative; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--text-2) 12%, transparent); }
.sig-zone__band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--gain) 45%, transparent), var(--gain)); }
.sig-zone__price { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--surface); border: 3px solid var(--text-1); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
.sig-zone__labels { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-2); margin-top: 4px; font-variant-numeric: tabular-nums; }

/* Nyckeltal + stjärna */
.sig-card__stats { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text-2); }
.sig-card__stats b { color: var(--text-1); font-weight: 800; font-variant-numeric: tabular-nums; }
.sig-card__stats .up { color: var(--gain); }
.sig-fdots { display: flex; gap: 4px; }
.sig-fdots i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.sig-fdots i.bull { background: var(--gain); }
.sig-fdots i.bear { background: var(--loss); }
.sig-fdots i.neut { background: var(--border); }
.sig-card__star {
  margin-left: auto; margin-right: -8px; margin-bottom: -6px;
  background: none; border: none; color: var(--text-2);
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  transition: color 0.15s, transform 0.15s;
}
.sig-card__star:active { transform: scale(1.2); }
.sig-card__star.is-on { color: var(--warning); }

/* ── css/components/signal-dossier.css ── */
.sig-dossier-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11, 35, 27, 0.45);
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.sig-dossier-backdrop.is-open { opacity: 1; pointer-events: auto; }

.sig-dossier {
  position: fixed; z-index: 91; left: 0; right: 0; bottom: 0;
  max-height: 86dvh;
  background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -20px 60px -18px rgba(11, 35, 27, 0.5);
  transform: translateY(105%);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
.sig-dossier.is-open { transform: translateY(0); }
.sig-dossier.is-dragging { transition: none; }

@media (min-width: 641px) {
  .sig-dossier {
    left: auto; top: 0; bottom: 0; width: 440px; max-height: none;
    border-radius: 0;
    transform: translateX(105%);
  }
  .sig-dossier.is-open { transform: translateX(0); }
  .sig-dossier__grab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sig-dossier, .sig-dossier-backdrop { transition: none; }
}

.sig-dossier__scroll { overflow-y: auto; overscroll-behavior: contain; }

.sig-dossier__head { position: relative; background: var(--text-1); color: var(--bg); padding: 10px var(--s-5) var(--s-4); flex: none; touch-action: none; cursor: grab; }
.sig-dossier__grab { width: 42px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, 0.32); margin: 0 auto 14px; }
.sig-dossier__close {
  position: absolute; top: 18px; right: 14px;
  background: rgba(255, 255, 255, 0.12); border: none; color: inherit;
  width: 40px; height: 40px; border-radius: 50%; font-size: 14px; cursor: pointer;
}
.sig-dossier__idrow { display: flex; align-items: center; gap: var(--s-3); padding-right: 44px; }
.sig-dossier__avatar { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--sec, var(--text-2)); flex: none; }
.sig-dossier__ticker { font-family: var(--font-display); font-size: 22px; line-height: 1.15; }
.sig-dossier__name { font-size: 12px; opacity: 0.65; }
.sig-dossier__overlap { font-size: 11px; font-weight: 700; color: var(--accent-light); margin-top: 2px; }
.sig-dossier__conf { margin-left: auto; text-align: right; flex: none; }
.sig-dossier__conf b { font-family: var(--font-display); font-size: 27px; color: var(--accent-light); font-variant-numeric: tabular-nums; }
.sig-dossier__conf span { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.55; }
.sig-dossier__signal { margin-top: var(--s-3); font-size: 12.5px; line-height: 1.5; opacity: 0.9; padding: 10px 12px; background: rgba(255, 255, 255, 0.08); border-radius: var(--r-sm); border-left: 3px solid var(--accent-light); }

.sig-dossier__body { padding: var(--s-5) var(--s-5) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s-6); }
.sig-dossier__sec-title { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin-bottom: 9px; }

.sig-dossier__meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.sig-dossier__meta > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.sig-dossier__meta span { display: block; font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-2); }
.sig-dossier__meta b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-1); }

.sig-tug__bar { display: flex; height: 11px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text-2) 12%, transparent); }
.sig-tug__bar i { display: block; height: 100%; }
.sig-tug__bar .b { background: var(--gain); }
.sig-tug__bar .n { background: var(--border); }
.sig-tug__bar .r { background: var(--loss); }
.sig-tug__legend { display: flex; justify-content: space-between; font-size: 10.5px; font-weight: 700; color: var(--text-2); margin-top: 6px; }
.sig-tug__legend .b { color: var(--gain); }
.sig-tug__legend .r { color: var(--loss); }

.sig-facts { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); }
.sig-fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }
.sig-fact__row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-1); }
.sig-fact__dir { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-weight: 900; font-size: 12px; flex: none; }
.sig-fact__dir.bull { background: var(--accent-subtle); color: var(--gain); }
.sig-fact__dir.bear { background: color-mix(in srgb, var(--loss) 10%, transparent); color: var(--loss); }
.sig-fact__dir.neut { background: color-mix(in srgb, var(--text-2) 10%, transparent); color: var(--text-2); }
.sig-fact__w { margin-left: auto; font-size: 10.5px; font-weight: 800; color: var(--text-2); }
.sig-fact__explanation { font-size: 11.5px; line-height: 1.5; color: var(--text-2); margin-top: 6px; padding-left: 32px; }

.sig-scen { display: flex; flex-direction: column; gap: 7px; }
.sig-scen__row { display: grid; grid-template-columns: 38px 1fr 48px; align-items: center; gap: 9px; font-size: 11.5px; }
.sig-scen__lbl { font-weight: 800; color: var(--text-2); }
.sig-scen__track { position: relative; height: 9px; background: color-mix(in srgb, var(--text-2) 12%, transparent); border-radius: 99px; }
.sig-scen__track::before { content: ''; position: absolute; left: var(--zero); top: -3px; bottom: -3px; width: 1px; background: var(--border); }
.sig-scen__fill { position: absolute; top: 0; bottom: 0; border-radius: 99px; }
.sig-scen__fill.pos { background: var(--gain); }
.sig-scen__fill.neg { background: var(--loss); }
.sig-scen__val { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.sig-scen__val.pos { color: var(--gain); }
.sig-scen__val.neg { color: var(--loss); }

.sig-dossier__cta { display: flex; gap: 9px; }
.sig-dossier__ask {
  flex: 1; min-height: 52px; border: none; border-radius: var(--r-md);
  background: var(--text-1); color: var(--bg);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
  transition: transform 0.15s;
}
.sig-dossier__ask:active { transform: scale(0.97); }
.sig-dossier__watch {
  flex: 0 0 auto; min-height: 52px; padding: 0 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); color: var(--text-1);
  font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.sig-dossier__watch.is-on { background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: var(--warning); color: var(--warning); }

/* ── css/components/goal-sheet.css ── */
body.app-ev .goal-sheet__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(8, 26, 20, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
body.app-ev .goal-sheet__backdrop.is-open { opacity: 1; pointer-events: auto; }

body.app-ev .goal-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-modal) + 1);
  max-height: 88%;
  background: var(--ev-paper);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--ev-shadow-ink);
  transform: translateY(105%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
body.app-ev .goal-sheet.is-open { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  body.app-ev .goal-sheet,
  body.app-ev .goal-sheet__backdrop {
    transition: none;
  }
}

body.app-ev .goal-sheet__grip {
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: var(--ev-hairline-strong);
  margin: 10px auto 0;
  flex-shrink: 0;
  cursor: pointer;
}

body.app-ev .goal-sheet__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 12px;
  border: none;
  background: var(--ev-paper-2);
  color: var(--ev-ink-62);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
}

body.app-ev .goal-sheet__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 14px 20px 26px;
}
body.app-ev .goal-sheet__scroll::-webkit-scrollbar { display: none; }

body.app-ev .goal-sheet__footer {
  display: flex;
  gap: 10px;
  flex: none;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ev-hairline);
  background: var(--ev-paper);
}

/* ── css/components/chat.css ── */
.chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--nav-height) - 60px);
  height: calc(100dvh - var(--nav-height) - 60px);
}

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-4);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.chat-bubble {
  max-width: 85%;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-lg);
  font-size: 14px; line-height: 1.5;
}

.chat-message {
  display: flex;
  flex-direction: column;
}

.chat-message--ai { align-items: flex-start; }
.chat-message--user { align-items: flex-end; }

.chat-bubble--ai {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.chat-bubble--user {
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-bubble--loading { opacity: 0.6; }

.chat-bubble {
  animation: aicfo-fade-up 280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-ai-label {
  font-size: 11px; font-weight: 600; color: var(--accent);
  margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.05em;
}

.chat-input-area {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-suggestions {
  display: flex; gap: var(--s-2); overflow-x: auto;
  padding-bottom: var(--s-2); margin-bottom: var(--s-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chat-suggestions::-webkit-scrollbar { display: none; }

.chat-suggestion {
  flex-shrink: 0;
  padding: var(--s-2) var(--s-3);
  min-height: 36px;
  border-radius: 20px;
  font-size: 12px; font-weight: 500;
  background: var(--accent-subtle);
  color: var(--accent);
  border: none; cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: opacity 0.1s;
}
.chat-suggestion:active { opacity: 0.6; }

.chat-input-row {
  display: flex; gap: var(--s-2); align-items: flex-end;
}

.chat-input {
  flex: 1;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  font-family: var(--font-ui); font-size: 14px;
  background: var(--bg); color: var(--text-1);
  resize: none; min-height: 44px; max-height: 120px;
  outline: none;
}

.chat-input:focus { border-color: var(--accent); }

.chat-send {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--accent); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: opacity 0.1s, transform 0.1s;
}
.chat-send:active:not(:disabled) {
  opacity: 0.7;
  transform: scale(0.93);
}

.chat-send:disabled { opacity: 0.4; cursor: not-allowed; }

.provider-toggle {
  display: flex; gap: 4px;
  background: var(--accent-subtle);
  padding: 2px; border-radius: var(--r-sm);
  flex-shrink: 0;
}

.provider-btn {
  padding: 4px 12px;
  border-radius: var(--r-sm);
  border: none;
  font-size: 11px; font-weight: 600;
  font-family: var(--font-ui);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 150ms;
}

.provider-btn.active {
  background: var(--accent);
  color: #fff;
}

/* ── css/components/pulse.css ── */
.pulse-container {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  margin-bottom: var(--s-5);
}

.pulse-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 96px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--text-1);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.pulse-tooltip__title {
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s-1);
}

.pulse-tooltip__row {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  white-space: nowrap;
}

.pulse-tooltip__row b { margin-left: auto; font-weight: 600; }

.pulse-tooltip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pulse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}

.pulse-legend {
  display: flex;
  gap: var(--s-4);
}

.pulse-legend__item {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}

.pulse-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pulse-svg { width: 100%; overflow: visible; }

.pulse-fallback {
  min-height: 80px;
  display: flex;
  align-items: center;
  color: var(--text-2);
  font-size: 13px;
}

/* ── css/components/health-score.css ── */
.hs-gauge-wrap { display: flex; align-items: center; gap: var(--s-3); }
.hs-gauge-wrap svg { flex-shrink: 0; }
.hs-info__score { font-family: var(--font-display); font-size: 28px; line-height: 1; }
.hs-info__label { font-size: 12px; color: var(--text-2); margin-top: 2px; }

/* ── css/components/unlock-banner.css ── */
.unlock-banner {
  position: fixed;
  bottom: calc(var(--nav-height) + 12px);
  left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 398px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
  box-shadow: 0 8px 24px rgba(31,94,102,.35);
  z-index: 90;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);   opacity: 1; }
}

.unlock-banner__text { flex: 1; font-size: 14px; font-weight: 500; }
.unlock-banner__close {
  background: none; border: none; color: rgba(255,255,255,.7);
  font-size: 20px; cursor: pointer; padding: 0; line-height: 1;
}

.unlock-banner__btn {
  background: #fff; color: var(--accent);
  border: none; border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}

/* ── css/components/mode-switch.css ── */
#mode-switch-slot {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
}

#mode-switch-slot:empty { display: none; }

body.is-auth-page #mode-switch-slot {
  display: none;
}

@media (max-width: 430px) {
  #mode-switch-slot {
    top: 8px;
    right: 8px;
  }
}

.mode-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 10px 5px 8px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  user-select: none;
  white-space: nowrap;
  transition: border-color 0.15s;
}

.mode-pill:hover { border-color: var(--accent); }

.mode-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.mode-pill__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  min-width: 160px;
  overflow: hidden;
}

.mode-pill__menu.hidden { display: none; }

.mode-opt {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  gap: 1px;
  transition: background 0.1s;
}

.mode-opt:last-child { border-bottom: none; }
.mode-opt:hover,
.mode-opt--active { background: var(--accent-subtle); }

.mode-opt__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  display: block;
}

.mode-opt--active .mode-opt__label { color: var(--accent); }

.mode-opt__desc {
  font-size: 11px;
  color: var(--text-2);
  display: block;
}

/* ── css/components/wealth-breakdown.css ── */
/* ── Kontoscroll ── */
.account-scroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 var(--s-2);
}
.account-scroll::-webkit-scrollbar { display: none; }

.account-card {
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  min-width: 108px;
  position: relative;
  overflow: hidden;
  cursor: default;
}

.account-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--account-color, var(--accent));
}

.account-card__logo {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  height: 18px;
}

.account-card__logo svg {
  display: block;
}

.account-card__logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-sm);
  background: var(--account-color, var(--accent));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.account-card__institution {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.account-card__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-card__value {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  color: var(--text-1);
  white-space: nowrap;
}

/* ── Asset Bar ── */
.asset-bar-wrap { margin: var(--s-2) 0 var(--s-3); }

.asset-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  gap: 1px;
  background: var(--border);
}

.asset-bar__segment {
  height: 100%;
  transition: opacity 0.15s;
  min-width: 4px;
}

.asset-bar__segment:hover { opacity: 0.8; }

/* ── Asset Legend ── */
.asset-legend {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.asset-legend__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
}

.asset-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.asset-legend__label {
  flex: 1;
  color: var(--text-2);
}

.asset-legend__value {
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.asset-legend__pct {
  font-size: 11px;
  color: var(--text-2);
  min-width: 32px;
  text-align: right;
}

.asset-legend__divider {
  height: 1px;
  background: var(--border);
  margin: var(--s-2) 0;
}

.asset-legend__item--loan .asset-legend__label { color: var(--text-2); }
.asset-legend__item--loan .asset-legend__value { color: var(--loss); font-weight: 600; }

.asset-legend__item--total {
  padding-top: var(--s-1);
}
.asset-legend__label--total {
  color: var(--text-1);
  font-weight: 600;
}
.asset-legend__value--total {
  color: var(--text-1);
  font-weight: 700;
  font-size: 14px;
}

/* ── css/components/advice-grid.css ── */
/* ── Sub-tabs ── */
.advice-subtabs-wrap {
  position: relative;
  overflow: hidden;
}

.advice-subtabs-wrap::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg));
  pointer-events: none;
}

.advice-subtabs {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.advice-subtabs::-webkit-scrollbar { display: none; }

.advice-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: var(--s-1) var(--s-4) 0;
  position: relative;
  padding-right: 80px;
  scroll-padding-right: 80px;
}

.advice-tabs::-webkit-scrollbar {
  display: none;
}

.advice-cat-bar {
  background: var(--surface);
  padding: var(--s-3) var(--s-4) 0;
}

.advice-seg-ctrl {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 100%;
}

.advice-seg-item {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--s-2) var(--s-4);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: color var(--dur-normal) var(--ease-spring),
              background var(--dur-normal) var(--ease-spring),
              box-shadow var(--dur-normal) var(--ease-spring);
  user-select: none;
  white-space: nowrap;
}

.advice-seg-item:hover:not(.active) {
  color: var(--text-1);
  background: var(--accent-subtle-2);
}

.advice-seg-item:active:not(:disabled) {
  transform: scale(0.94);
  transition-duration: 50ms;
}

.advice-seg-item:disabled,
.advice-tab:disabled {
  cursor: default;
  opacity: 0.72;
}

.advice-seg-item.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.advice-seg-item:focus-visible,
.advice-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.advice-tab {
  flex-shrink: 0;
  padding: var(--s-2) var(--s-3);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-ui);
  color: var(--text-2);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color 200ms ease;
  margin-bottom: -1px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  white-space: nowrap;
}

.advice-tab:hover:not(.active) {
  color: var(--text-1);
}

.advice-tab.active {
  color: var(--text-1);
  font-weight: 600;
}

/* Sliding indicator — replaces active border-bottom */
.advice-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  width: 0;
  transform: translateX(0);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              width 280ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* ── Tab content animations ── */
.tab-content-exit {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
  transition: opacity 65ms ease-in, transform 65ms ease-in;
  pointer-events: none;
}

@keyframes advice-tab-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tab-content-enter > * {
  opacity: 0;
  animation: advice-tab-in 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.tab-content-enter > *:nth-child(1) { animation-delay: 0ms; }
.tab-content-enter > *:nth-child(2) { animation-delay: 40ms; }
.tab-content-enter > *:nth-child(3) { animation-delay: 80ms; }
.tab-content-enter > *:nth-child(4) { animation-delay: 120ms; }

/* ── Hälsning + stat-block (Stitch-landning) ── */
.advice-greeting {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-4) var(--s-3);
  background: var(--bg);
}

.advice-greeting__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.1;
  color: var(--accent);
  margin: 0;
}

.advice-greeting__sub {
  font-size: var(--text-md);
  color: var(--text-2);
  margin: 4px 0 0;
}

.advice-statblock {
  background: linear-gradient(135deg, var(--surface), var(--surface-elevated));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

.advice-statblock__label {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.advice-statblock__value {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  line-height: 1.1;
  color: var(--accent);
  margin-top: var(--s-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.advice-statblock__health {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.advice-statblock__health-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

.advice-health-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.advice-health-bar__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 600ms var(--ease-spring);
}

.advice-statblock__health-score {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── Rådgivningskort-grid (Stitch) ── */
.advice-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
}

.advice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  width: 100%;
  text-align: left;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-normal) var(--ease-spring),
              box-shadow var(--dur-normal) var(--ease-spring),
              transform var(--dur-normal) var(--ease-spring);
  opacity: 0;
  transform: translateY(10px);
  animation: advice-card-in 0.5s var(--ease-spring) forwards;
  animation-delay: var(--advice-card-delay, 0ms);
}

@keyframes advice-card-in {
  to { opacity: 1; transform: translateY(0); }
}

.advice-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.advice-card:active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.advice-card--featured::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent);
}

.advice-card__icon-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--r-lg);
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-normal) var(--ease-spring);
}

.advice-card:hover .advice-card__icon-wrap {
  transform: scale(1.08);
}

.advice-card__icon {
  font-size: 24px;
  color: var(--accent);
}

.advice-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.advice-card__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--accent);
}

.advice-card__desc {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.45;
}

/* ── Spec-formulär (Stitch) ── */
.advice-spec {
  padding: var(--s-4);
}

.advice-spec__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--text-sm);
  color: var(--text-2);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--s-4);
  font-family: var(--font-ui);
  transition: color 150ms ease, transform var(--dur-normal) var(--ease-spring);
}

.advice-spec__back:hover {
  color: var(--accent);
  transform: translateX(-2px);
}

.advice-spec__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.advice-spec__icon-wrap {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}

.advice-spec__icon {
  font-size: 24px;
  color: var(--accent);
}

.advice-spec__title {
  font-size: var(--text-xl);
  color: var(--accent);
  font-family: var(--font-display);
  line-height: 1.15;
}

/* AI-info-banner */
.advice-spec__ai-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-subtle-2);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}

.advice-spec__ai-icon {
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.advice-spec__ai-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--accent);
}

/* Formulärkort */
.advice-spec__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

.advice-spec__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-3);
  display: block;
}

.advice-spec__label--sm {
  margin-top: var(--s-4);
}

.advice-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.advice-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font-ui);
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease,
              box-shadow 150ms ease, transform var(--dur-normal) var(--ease-spring);
}

.advice-chip__check {
  display: none;
  font-size: 16px;
  margin-left: -2px;
}

.advice-chip:hover:not(.selected) {
  background: var(--surface-3);
}

.advice-chip.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--shadow-sm), 0 0 0 3px var(--accent-subtle-2);
}

.advice-chip.selected .advice-chip__check {
  display: inline-block;
}

.advice-spec__textarea {
  width: 100%;
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  background: var(--surface-elevated);
  color: var(--text-1);
  resize: none;
  min-height: 84px;
  outline: none;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 150ms ease, border-color 150ms ease;
}

.advice-spec__textarea::placeholder {
  color: var(--text-2);
}

.advice-spec__textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-subtle-2);
}

/* Risknivå-slider */
.advice-risk {
  margin-top: var(--s-5);
}

.advice-risk__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.advice-risk__top .advice-spec__label {
  margin: 0;
}

.advice-risk__value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
}

.advice-risk__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: var(--s-3) 0 var(--s-2);
  border-radius: 999px;
  background: var(--surface-3);
  outline: none;
  cursor: pointer;
}

.advice-risk__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 120ms var(--ease-spring);
}

.advice-risk__slider::-webkit-slider-thumb:active {
  transform: scale(1.1);
}

.advice-risk__slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.advice-risk__slider:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-subtle-2);
}

.advice-risk__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Actions */
.advice-spec__actions {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-5);
}

.advice-spec__hint {
  margin: var(--s-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-2);
}

.advice-spec__submit {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: opacity 150ms ease, transform 150ms var(--ease-spring), box-shadow 150ms ease;
}

.advice-spec__submit i { font-size: 18px; }

.advice-spec__submit:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.advice-spec__submit:not(:disabled):active {
  transform: scale(0.98);
  transition-duration: 80ms;
}

.advice-spec__submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.advice-spec__skip {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-ui);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  transition: color 150ms ease, background 150ms ease;
}

.advice-spec__skip:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.advice-spec__hint {
  margin-top: var(--s-2);
  font-size: var(--text-xs);
  color: var(--text-2);
}

.advice-spec__hint[hidden] { display: none; }

/* ── AI response renderer ── */
.ai-response {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.ai-response__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.ai-response__rec {
  font-size: var(--text-md);
  color: var(--text-1);
  line-height: 1.65;
  margin: 0;
}

.ai-response__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ai-response__chip {
  display: inline-block;
  padding: 3px var(--s-3);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-ui);
}

.ai-response__chip--positive {
  background: rgba(34, 197, 94, 0.12);
  color: var(--gain);
}

.ai-response__chip--negative {
  background: rgba(239, 68, 68, 0.12);
  color: var(--loss);
}

.ai-response__chip--neutral {
  background: var(--accent-subtle);
  color: var(--accent);
}

.ai-response__steps {
  margin: 0;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.ai-response__steps li {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.5;
}

.ai-response__caveat {
  font-size: var(--text-xs);
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--warning);
  line-height: 1.5;
}

.ai-response--text {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.65;
}

/* ── Karriär placeholder (Stitch) ── */
.advice-career-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-10) var(--s-5);
  text-align: center;
}

.advice-career-placeholder__icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: var(--surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-5);
}

.advice-career-placeholder__icon {
  font-size: 44px;
  color: var(--accent);
}

.advice-career-placeholder__badge {
  padding: var(--s-1) var(--s-3);
  background: var(--surface-3);
  color: var(--accent);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-4);
}

.advice-career-placeholder__title {
  font-size: var(--text-3xl);
  color: var(--accent);
  margin: 0 0 var(--s-3);
  font-family: var(--font-display);
  line-height: 1.1;
}

.advice-career-placeholder__desc {
  font-size: var(--text-md);
  color: var(--text-2);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 0 var(--s-5);
}

.advice-career-placeholder__eta {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Watchlist button */
.intel-watchlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-2);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.intel-watchlist-btn:hover,
.intel-watchlist-btn.is-watchlisted {
  color: var(--accent);
  border-color: var(--accent);
}

/* Trigger badge */
.watchlist-trigger-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
}

/* ── iOS: förhindra fokus-zoom — fält måste vara ≥16px på mobil ── */
@media (max-width: 430px) {
  .advice-spec__textarea { font-size: 16px; }
}

/* Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px */
@media (max-width: 430px) {
  .intel-watchlist-btn { font-size: 12px; }
  .advice-statblock__health-label { font-size: 12px; }
}

/* ── css/components/advice-result.css ── */
.advice-result {
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-4) var(--s-6);
}

/* ── Brödsmula (tillbaka) ─────────────────────────────────── */
.advice-result__breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: fit-content;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--s-4);
  transition: color var(--dur-normal) var(--ease-spring);
}
.advice-result__breadcrumb:hover { color: var(--accent); }
.advice-result__breadcrumb i { font-size: 16px; }

/* ── Varnings-/caveat-banner överst ───────────────────────── */
.gate3-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--warning-subtle);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.gate3-warning__icon {
  color: var(--warning);
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.4;
}
.gate3-warning__text {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.5;
}

/* ── Rubrik-sektion ───────────────────────────────────────── */
.advice-result__category {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-2);
}

.advice-result__title {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.15;
  margin-bottom: var(--s-2);
}

.advice-result__context {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: var(--s-5);
}

/* ── Rekommendationskort ──────────────────────────────────── */
.advice-result__rec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-md);
}
.advice-result__rec-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.advice-result__rec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}
.advice-result__rec-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.advice-result__rec-name {
  font-family: var(--font-ui);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
  margin-bottom: var(--s-3);
}
.advice-result__rec-text {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Nyckeltal-grid (bento) ───────────────────────────────── */
.advice-result__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
@media (min-width: 600px) {
  .advice-result__metrics { grid-template-columns: repeat(4, 1fr); }
}

.advice-result__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-3);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-normal) var(--ease-spring),
              background var(--dur-normal) var(--ease-spring),
              transform var(--dur-normal) var(--ease-spring);
}
.advice-result__metric:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.advice-result__metric--positive:hover { background: var(--gain-subtle); }
.advice-result__metric--negative:hover { background: var(--loss-subtle); }

.advice-result__metric-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: block;
}
.advice-result__metric-value.positive { color: var(--gain); }
.advice-result__metric-value.negative { color: var(--loss); }
.advice-result__metric-value.neutral  { color: var(--text-1); }

.advice-result__metric-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--text-2);
  display: block;
}

/* ── Motivering / tes ─────────────────────────────────────── */
.advice-result__reasoning {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.advice-result__reasoning-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}
.advice-result__reasoning-text {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: 1.65;
}

/* ── Nästa steg / risker ──────────────────────────────────── */
.advice-result__steps,
.advice-result__risks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.advice-result__steps-label,
.advice-result__risks-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--s-3);
}
.advice-result__steps-list,
.advice-result__risks-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding-left: var(--s-5);
}
.advice-result__steps-list li,
.advice-result__risks-list li {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: 1.6;
}
.advice-result__steps-list {
  list-style: decimal;
}
.advice-result__steps-list li::marker {
  color: var(--accent);
  font-weight: 600;
}
.advice-result__risks-list {
  list-style: disc;
}
.advice-result__risks-list li::marker {
  color: var(--warning);
}

/* ── Progressive disclosure: motivering + risker ──────────── */
.advice-result__disclosure-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  margin-bottom: var(--s-5);
}
.advice-result__disclosure {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--text-2);
  transition: color var(--dur-normal) var(--ease-spring);
}
.advice-result__disclosure::-webkit-details-marker { display: none; }
.advice-result__disclosure:hover { color: var(--accent); }
.advice-result__disclosure-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.advice-result__disclosure-caret {
  font-size: 16px;
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-spring);
}
.advice-result__disclosure-wrap[open] .advice-result__disclosure-caret { transform: rotate(180deg); }
.advice-result__disclosure-wrap[open] .advice-result__disclosure { margin-bottom: var(--s-4); }
.advice-result__disclosure-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.advice-result__disclosure-wrap[open] .advice-result__disclosure-body {
  animation: advice-result-reveal var(--dur-normal) var(--ease-spring);
}
@keyframes advice-result-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Caveat-box ───────────────────────────────────────────── */
.advice-result__caveat {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.advice-result__caveat i {
  color: var(--text-2);
  flex-shrink: 0;
  font-size: 18px;
  margin-top: 1px;
}
.advice-result__caveat span {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
}

/* ── Actions ──────────────────────────────────────────────── */
.advice-result__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
@media (min-width: 600px) {
  .advice-result__actions { flex-direction: row; }
}

.advice-result__action-primary,
.advice-result__action-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  flex: 1;
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-normal) var(--ease-spring),
              box-shadow var(--dur-normal) var(--ease-spring),
              color var(--dur-normal) var(--ease-spring);
}

.advice-result__action-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.advice-result__action-primary:hover {
  background: var(--accent-mid);
  box-shadow: var(--shadow-md);
}
.advice-result__action-primary i { font-size: 16px; }

.advice-result__action-secondary {
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
}
.advice-result__action-secondary:hover {
  background: var(--surface-elevated);
}

/* ── Fallback: råtext ─────────────────────────────────────── */
.advice-result__raw {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.7;
  white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
}

/* ── Laddningsindikator ───────────────────────────────────── */
.advice-result__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-10) var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-2);
}
.advice-result__loading i {
  font-size: 32px;
  color: var(--accent);
  animation: advice-result-spin 1.2s linear infinite;
}

@keyframes advice-result-spin {
  to { transform: rotate(360deg); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .advice-result *,
  .advice-result__loading i {
    animation: none !important;
    transition: none !important;
  }
  .advice-result__metric:hover { transform: none; }
}

/* ── css/components/ai-response.css ── */
.ai-response {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  font-family: var(--font-ui);
  color: var(--text-1);
  animation: ai-response-in var(--dur-normal, 220ms) var(--ease-spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@keyframes ai-response-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Head: titel + confidence-badge ──────────────────────────────────────── */
.ai-response__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.ai-response__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

.ai-response__confidence {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.ai-response__confidence--positive { color: var(--gain); background: var(--gain-subtle, color-mix(in srgb, var(--gain) 12%, transparent)); }
.ai-response__confidence--neutral  { color: var(--text-2); background: color-mix(in srgb, var(--text-2) 12%, transparent); }
.ai-response__confidence--negative { color: var(--loss); background: var(--loss-subtle, color-mix(in srgb, var(--loss) 12%, transparent)); }

/* ── Rekommendation (dominerar visuellt — answer-first) ──────────────────── */
.ai-response__rec {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-1);
  margin: calc(var(--s-6) * -1 + var(--s-3)) 0 0;
}
.ai-response__head + .ai-response__rec { margin-top: 0; }
.ai-response__rec strong { font-weight: 600; color: var(--accent); }

/* ── Metrik-grid ─────────────────────────────────────────────────────────── */
.ai-response__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-3);
}

/* Dämpad vikt: tonad viloyta i stället för kort med kant + hover-lyft.
   Metrics stödjer svaret, konkurrerar inte med rekommendationen. */
.ai-response__metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface-container-low);
  border-radius: var(--r-sm);
  border-left: 2px solid var(--outline-variant);
}
.ai-response__metric--positive { border-left-color: var(--gain); }
.ai-response__metric--negative { border-left-color: var(--loss); }
.ai-response__metric--neutral  { border-left-color: var(--outline-variant); }

.ai-response__metric-value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.1;
  color: var(--text-1);
}
.ai-response__metric--positive .ai-response__metric-value { color: var(--gain); }
.ai-response__metric--negative .ai-response__metric-value { color: var(--loss); }

.ai-response__metric-label {
  font-size: 0.75rem;
  color: var(--text-2);
}

/* ── Sektioner: resonemang / steg / risker ───────────────────────────────── */
.ai-response__section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}

.ai-response__reasoning-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
}
.ai-response__reasoning-text strong { color: var(--text-1); font-weight: 600; }

/* ── Progressive disclosure: resonemang + risker ─────────────────────────── */
.ai-response__details {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}
.ai-response__disclosure {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: var(--text-2);
  transition: color var(--dur-fast, 120ms) ease;
}
.ai-response__disclosure::-webkit-details-marker { display: none; }
.ai-response__disclosure:hover { color: var(--accent); }
.ai-response__disclosure-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ai-response__disclosure-caret {
  font-size: 0.875rem;
  transition: transform var(--dur-fast, 120ms) var(--ease-out, ease);
}
.ai-response__details[open] .ai-response__disclosure-caret { transform: rotate(180deg); }
/* Innehållet under summary får luft + samma stapelrytm */
.ai-response__details[open] .ai-response__reasoning-text,
.ai-response__details[open] .ai-response__risks {
  margin-top: var(--s-4);
  animation: ai-response-in var(--dur-fast, 120ms) var(--ease-out, ease);
}

.ai-response__steps {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: ai-step;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.ai-response__steps li {
  counter-increment: ai-step;
  position: relative;
  padding-left: calc(var(--s-6) + 4px);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-1);
}
.ai-response__steps li::before {
  content: counter(ai-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: 50%;
}

.ai-response__risks-list {
  margin: 0;
  padding-left: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.ai-response__risks-list li {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Caveat ──────────────────────────────────────────────────────────────── */
.ai-response__caveat {
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
  padding: var(--s-3) var(--s-4);
  background: var(--warning-subtle, color-mix(in srgb, var(--warning) 10%, transparent));
  border-radius: var(--r-md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-1);
}
.ai-response__caveat-icon { color: var(--warning); margin-top: 2px; flex-shrink: 0; }

/* ── Råtext-fallback ─────────────────────────────────────────────────────── */
.ai-response--text .ai-response__para {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-1);
}
.ai-response__para strong { font-weight: 600; color: var(--accent); }
.ai-response code,
.ai-response__para code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: var(--accent-subtle);
  padding: 1px 5px;
  border-radius: var(--r-sm);
}

/* ── Skeleton ────────────────────────────────────────────────────────────── */
.ai-skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text-2) 8%, transparent) 25%,
    color-mix(in srgb, var(--text-2) 14%, transparent) 37%,
    color-mix(in srgb, var(--text-2) 8%, transparent) 63%);
  background-size: 400% 100%;
  animation: ai-shimmer 1.4s ease infinite;
}
.ai-skeleton--title { height: 22px; width: 55%; }
.ai-skeleton--line  { height: 14px; width: 100%; }
.ai-skeleton--line:nth-of-type(3) { width: 80%; }
.ai-skeleton--metric { height: 56px; }

@keyframes ai-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.ai-response__skeleton-status {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 0.875rem;
  color: var(--text-2);
}
.ai-spin { animation: ai-spin 1.2s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* ── Felstate ────────────────────────────────────────────────────────────── */
.ai-response--error {
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-6);
}
.ai-response__error-icon { font-size: 2rem; color: var(--warning); }
.ai-response__error-text { margin: 0; color: var(--text-2); font-size: 0.9375rem; }
.ai-response__retry {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--surface);
  background: var(--accent);
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-5);
  cursor: pointer;
  transition: background var(--dur-fast, 120ms) ease;
}
.ai-response__retry:hover { background: var(--accent-mid); }

@media (prefers-reduced-motion: reduce) {
  .ai-response,
  .ai-skeleton,
  .ai-spin { animation: none; }
}

/* ── css/components/monitor.css ── */
/* ── Bell ─────────────────────────────────────────── */
.monitor-bell {
  position: absolute;
  top: 42px;
  right: var(--s-5);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 220;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.monitor-bell:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: scale(1.06);
}

.monitor-bell__icon {
  display: block;
  width: 16px;
  height: 16px;
}

.monitor-bell__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  background: var(--loss);
  border-radius: 50%;
  border: 2px solid var(--surface);
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  50%       { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* ── Panel backdrop ───────────────────────────────── */
.monitor-panel-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.monitor-panel-backdrop.visible { opacity: 1; }

/* ── Panel — bottom sheet ─────────────────────────── */
.monitor-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: min(520px, 100vw);
  max-height: 78vh;
  background: var(--bg);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -6px 40px rgba(10,20,22,.14), 0 -2px 8px rgba(10,20,22,.06);
  z-index: calc(var(--z-modal) + 1);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.monitor-panel.visible { transform: translateX(-50%) translateY(0); }

/* Drag handle */
.monitor-panel__handle {
  flex-shrink: 0;
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: var(--s-3) auto var(--s-2);
}

/* Panel header — ren, ingen solid teal */
.monitor-panel__header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-1) var(--s-4) var(--s-3);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.monitor-panel__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-1);
}

.monitor-panel__title-icon {
  color: var(--accent);
  width: 18px;
  height: 18px;
}

.monitor-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.monitor-panel__close:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

.monitor-panel__close-icon {
  width: 14px;
  height: 14px;
}

.monitor-panel__subtitle {
  flex-shrink: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: var(--s-3) var(--s-4) 0;
}

.monitor-panel__list {
  overflow-y: auto;
  flex: 1;
  padding: var(--s-2) var(--s-3) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* ── Finding card ─────────────────────────────────── */
.monitor-finding-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  animation: finding-in 0.28s ease backwards;
}

.monitor-finding-card:nth-child(1) { animation-delay: 50ms; }
.monitor-finding-card:nth-child(2) { animation-delay: 100ms; }
.monitor-finding-card:nth-child(3) { animation-delay: 150ms; }

@keyframes finding-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.monitor-finding-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(31,94,102,.28);
}

.monitor-finding-card__top {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.monitor-finding-card__urgency { display: none; }

/* Ikoncirkel — urgency via bakgrundsfärg */
.monitor-finding-card__icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Hög urgency — röd tint */
.monitor-finding-card:nth-child(1) .monitor-finding-card__icon {
  background: rgba(239,68,68,.1);
  color: #DC2626;
}

/* Medel urgency — gul tint */
.monitor-finding-card:nth-child(2) .monitor-finding-card__icon {
  background: rgba(245,158,11,.1);
  color: #D97706;
}

.monitor-finding-card__icon-mark {
  width: 16px;
  height: 16px;
}

.monitor-finding-card__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 3px;
  line-height: 1.3;
}

.monitor-finding-card__summary {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: 1.45;
}

/* Saving badge — urgency-anpassad färg */
.monitor-finding-card__saving {
  display: inline-flex;
  align-items: center;
  margin-top: var(--s-2);
  background: rgba(34,197,94,.13);
  color: #15803D;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.monitor-finding-card:nth-child(1) .monitor-finding-card__saving {
  background: rgba(239,68,68,.1);
  color: #B91C1C;
}

.monitor-finding-card:nth-child(2) .monitor-finding-card__saving {
  background: rgba(245,158,11,.12);
  color: #92400E;
}

/* ── Detail page ──────────────────────────────────── */
.monitor-detail {
  padding: var(--s-5) var(--s-4);
  max-width: 480px;
  margin: 0 auto;
}

/* Tillbaka */
.monitor-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: var(--s-5);
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s ease;
}

.monitor-detail__back:hover { color: var(--text-1); }

/* Hero — ljust kort med teal-accent */
.monitor-detail__header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  box-shadow: 0 4px 24px rgba(18,38,40,.07);
  position: relative;
  overflow: hidden;
}

/* Dekorativ teal-cirkel i övre hörn */
.monitor-detail__header::before {
  content: '';
  position: absolute;
  top: -44px;
  right: -36px;
  width: 140px;
  height: 140px;
  background: var(--accent-subtle);
  border-radius: 50%;
  pointer-events: none;
}

.monitor-detail__category {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
  position: relative;
}

.monitor-detail__title {
  font-family: var(--font-ui);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: var(--s-3);
  line-height: 1.25;
  position: relative;
}

.monitor-detail__saving {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--accent);
  letter-spacing: -0.015em;
  line-height: 1;
  margin-bottom: 5px;
  position: relative;
}

.monitor-detail__saving-label {
  font-size: var(--text-xs);
  color: var(--text-2);
  position: relative;
}

/* ── Jämförelse ───────────────────────────────────── */
.monitor-detail__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.monitor-detail__compare-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-3) var(--s-3);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.monitor-detail__compare-box:has(.monitor-detail__compare-value--current) {
  background: rgba(239,68,68,.03);
  border-color: rgba(239,68,68,.18);
}

.monitor-detail__compare-box:has(.monitor-detail__compare-value--possible) {
  background: rgba(31,94,102,.04);
  border-color: rgba(31,94,102,.2);
}

.monitor-detail__compare-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.monitor-detail__compare-value {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 4px;
}

/* Teal för möjlig (inte krockar-grön), mjukare röd för nuvarande */
.monitor-detail__compare-value--current  { color: #D44040; }
.monitor-detail__compare-value--possible { color: var(--accent); }

.monitor-detail__compare-sub {
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* ── AI-analys — riktig kortbakgrund ─────────────── */
.monitor-detail__ai {
  background: var(--accent-subtle);
  border: 1px solid rgba(31,94,102,.18);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

.monitor-detail__ai-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.monitor-detail__ai-text {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.65;
}

/* ── Nästa steg ───────────────────────────────────── */
.monitor-detail__steps {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-sm);
}

.monitor-detail__steps-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--s-3);
}

.monitor-detail__steps ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  counter-reset: step;
}

.monitor-detail__steps li {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.45;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  counter-increment: step;
}

.monitor-detail__steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── CTA — pill-stil ──────────────────────────────── */
.monitor-detail__action {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.monitor-detail__action:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ── Loading ──────────────────────────────────────── */
.monitor-detail__loading {
  text-align: center;
  color: var(--text-2);
  font-size: var(--text-sm);
  padding: var(--s-8) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}

.monitor-detail__loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: spin 0.75s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Error ────────────────────────────────────────── */
.monitor-detail__error {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--loss);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

/* ── css/components/public-nav.css ── */
.pub-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

/* Sticky-låset ligger på slot-diven som renderPublicNav får — sticky på
   .pub-nav själv kunde aldrig verka: wrappern är exakt lika hög som naven,
   så elementet hade noll utrymme att "fastna" i och scrollade bort. */
.pub-nav-slot {
  position: sticky;
  top: 0;
  z-index: 100;
}

.pub-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--s-6);
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  position: relative;
}

.pub-nav__logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex: 1;
}

.pub-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  flex: none;
}

.pub-nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  text-decoration: none;
  transition: color 0.15s;
}

.pub-nav__link:hover { color: var(--text-1); }

.pub-nav__link--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.pub-nav__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  flex: 1;
}

.pub-nav__hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-1);
  padding: var(--s-2);
  margin-left: auto;
}

/* Mobil-CTA i hamburger-menyn — dold på desktop (actions visas där) */
.pub-nav__mobile-cta { display: none; }

@media (max-width: 768px) {
  .pub-nav__hamburger { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .pub-nav__links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--s-3) var(--s-4);
    gap: var(--s-1);
    z-index: 99;
    box-shadow: var(--shadow-md);
  }
  .pub-nav__links--open { display: flex; }
  .pub-nav__link { width: 100%; padding: var(--s-3) var(--s-3); min-height: 44px; display: flex; align-items: center; }
  .pub-nav__actions { display: none; }
  .pub-nav__mobile-cta {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    width: 100%;
    margin-top: var(--s-2);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
  }
  .pub-nav__mobile-cta .btn { width: 100%; }
}

@media (max-width: 480px) {
  .pub-nav { padding: 0 var(--s-4); }
  .pub-nav {
    padding-left: max(var(--s-4), env(safe-area-inset-left));
    padding-right: max(var(--s-4), env(safe-area-inset-right));
  }
}

@media (max-width: 375px) {
  .pub-nav { padding: 0 var(--s-3); }
}

/* ─── Frosted glass on scroll (landing only) ───────────────────
   Publika sidor har nu ljusa sand-mittsektioner — glass-bg:ns låga
   alpha (0.6) släpper igenom för mycket ljus yta och gör den ljusa
   nav-texten oläslig. Höjd opacitet via color-mix på befintlig token
   så naven förblir en mörk kapsel oavsett underlag. */
.pub-nav--dark.pub-nav--scrolled {
  background: color-mix(in srgb, var(--landing-bg-100) 88%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
}
.pub-nav--dark {
  transition: background 0.3s ease;
}

/* ─── Dark variant (landningssida) ──────────────────────────── */
.pub-nav--dark {
  background: var(--teal-800);
  border-bottom-color: rgba(255,255,255,0.08);
}
.pub-nav--dark .brand-wordmark {
  filter: brightness(0) invert(1);
}
.pub-nav--dark .pub-nav__link {
  color: rgba(255,255,255,0.72);
}
.pub-nav--dark .pub-nav__link:hover { color: white; }
.pub-nav--dark .pub-nav__link--active {
  color: var(--teal-300);
  border-bottom-color: var(--teal-300);
}
.pub-nav--dark .pub-nav__hamburger { color: white; }
.pub-nav--dark .pub-nav__links {
  background: var(--teal-800);
  border-bottom-color: rgba(255,255,255,0.08);
}
.pub-nav--dark .btn--ghost {
  color: white;
  border-color: rgba(255,255,255,0.35);
}
.pub-nav--dark .btn--ghost:hover { background: rgba(255,255,255,0.1); }
/* Primär-CTA (väntelistan) — sajtens korall-ögonblick i naven.
   Fylld --coral-soft med --text-1 (AA 9.51:1). Endast denna knapp. */
.pub-nav--dark .btn--primary {
  background: var(--coral-soft);
  color: var(--text-1);
  border-color: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.pub-nav--dark .btn--primary:hover:not(:disabled) {
  background: var(--coral-bright);
  box-shadow: 0 0 18px color-mix(in srgb, var(--coral-bright) 40%, transparent);
}

/* ─── Section pattern ──────────────────────────────────────── */
.pub-section {
  width: 100%;
  padding: var(--section-pad) 0;
}
.pub-section--bg      { background: var(--bg); }
.pub-section--surface { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pub-section--subtle  { background: var(--accent-subtle); }
.pub-section--accent  { background: var(--accent); }

/* ─── CTA-band (används i pub-section--accent och --subtle) ─── */
.pub-cta-band { text-align: center; }

/* Dubbel-CTA i band: primär (väntelista) + sekundär sida vid sida */
.pub-cta-band__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.pub-cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.5vw, 36px);
  line-height: 1.15;
  margin-bottom: var(--s-3);
}

.pub-cta-band__sub {
  font-size: var(--text-md);
  margin-bottom: var(--s-8);
}

.pub-section--accent .pub-cta-band__title,
.pub-section--accent .pub-cta-band__sub { color: white; }
.pub-section--accent .pub-cta-band__sub { opacity: 0.85; }
.pub-section--accent .btn--primary { background: white; color: var(--accent); }

.pub-section--subtle .pub-cta-band__title { color: var(--text-1); }
.pub-section--subtle .pub-cta-band__sub   { color: var(--text-2); }

@media (max-width: 480px) {
  .pub-section--accent .btn,
  .pub-section--subtle .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   Publik mörk hero + sektioner (hybrid-sidor: hur-det-fungerar/pris/om/kontakt)
   Ger landing-känsla (mörk teal + glow + fade) med bevarad ljus läsyta.
   Tokens: --landing-bg-base, --teal-*, --glass-*, --landing-text-* (se tokens.css).
   ════════════════════════════════════════════════════════════════ */

/* ─── Mörk hero ─────────────────────────────────────────────── */
.pub-hero {
  position: relative;
  width: 100%;
  background:
    radial-gradient(ellipse 720px 520px at 50% 30%, rgba(30, 90, 100, 0.42) 0%, transparent 68%),
    radial-gradient(at 16% 88%, rgba(15, 59, 65, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, var(--landing-bg-base) 0%, var(--landing-bg-base) 66%, var(--mist) 100%);
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--landing-text-1);
  padding: clamp(120px, 18vh, 180px) 0 clamp(56px, 9vw, 104px);
  overflow: hidden;
}
.pub-hero .container { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }

.pub-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--landing-text-3);
  margin-bottom: var(--s-4);
}
.pub-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.1;
  color: var(--landing-text-1);
  letter-spacing: -0.5px;
  margin-bottom: var(--s-4);
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.pub-hero__sub {
  font-size: var(--text-md);
  color: var(--landing-text-2);
  line-height: 1.65;
  max-width: 54ch;
  margin: 0 auto;
}
/* .hero-cursor-glow + .hero-scroll-indicator återanvänds oförändrade från landing.css */

/* ─── Mörk sektion (CTA-band etc) ────────────────────────────── */
.pub-section--teal {
  background:
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(30, 95, 110, 0.40) 0%, transparent 70%),
    var(--landing-bg-base);
  color: var(--landing-text-1);
}
.pub-section--teal .pub-cta-band__title {
  color: var(--landing-text-1);
  filter: var(--glow-text);
}
.pub-section--teal .pub-cta-band__sub { color: var(--landing-text-2); }
.pub-section--teal .btn--primary {
  background: white;
  color: var(--accent);
  transition: box-shadow 0.2s ease;
}
.pub-section--teal .btn--primary:hover:not(:disabled) { box-shadow: var(--glow-strong); }

/* ─── Fade-sektioner: mjuk övergång mörk ↔ ljus ─────────────── */
.pub-fade--to-light {
  background: linear-gradient(180deg, var(--landing-bg-base) 0%, var(--landing-bg-base) 12%, var(--mist) 100%);
}
.pub-fade--to-dark {
  background: linear-gradient(180deg, var(--mist) 0%, var(--landing-bg-base) 88%, var(--landing-bg-base) 100%);
}

/* ─── Scroll-reveal (opt-in via .pub-page--anim på root) ──────
   Opt-in så bara sidor som anropar initScrollAnimations får elementen dolda.
   Annars riskerar innehåll att bli osynligt. Landing har sin egen (.landing-page). */
.pub-page--anim [data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.pub-page--anim [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pub-page--anim [data-animate][data-slide-x] { transform: translateX(-20px); }
.pub-page--anim [data-animate][data-slide-x].is-visible { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .pub-page--anim [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Fullmörkt läge för publika sidor — opt-in via .pub-page--dark
   Remappar ljusa tokens → mörka så att pub-section--bg/surface/subtle
   och kort (background: var(--surface)) blir mörka/glass automatiskt.
   Landing opåverkad (använder --landing-* direkt, ej --bg/--surface).
   ════════════════════════════════════════════════════════════════ */
.pub-page--dark {
  --bg:              var(--landing-bg-base);
  --surface:         var(--glass-bg);
  --surface-elevated: var(--teal-800);
  --surface-2:       var(--teal-800);
  --surface-3:       var(--teal-900);
  --border:          var(--glass-border);
  --accent-subtle:   rgba(46, 122, 130, 0.18);
  --text-1:          var(--landing-text-1);
  --text-2:          var(--landing-text-2);
  --mist:            var(--landing-bg-base);
}

/* Body-canvas mörk under publika routes.
   Vid varje tabbbyte tonar routern (js/router.js) ut nuvarande sida
   (page-exit, 200 ms) och tömmer #content innan nästa sida ritas — under
   den fasen syns <body>:s bakgrund. Standard-/--bg/ är ljus (#F2F8F9), så
   det blinkade vitt. .pub-dark-route sätts av app.js (updateShell) på
   <body> för mörka publika routes, och målar här med samma basfärg som
   sidorna använder (--landing-bg-base) så övergången blir sömlös.
   Scopat till publika routes → appens ljusa clarity-läge lämnas orört. */
body.pub-dark-route {
  background: var(--landing-bg-base);
  color: var(--landing-text-1);
}

/* Evergreen-rebrandade publika sidor — ivory-bakgrund så router-fade inte blinkar fel färg */
body.ev-pub-route {
  background: var(--ev-paper);
}

.pub-page--dark .btn--ghost {
  color: rgba(255, 255, 255, 0.80);
  border-color: rgba(255, 255, 255, 0.22);
}
.pub-page--dark .btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--accent-light);
  color: #fff;
}

/* ── Evergreen-variant (landing-rebrand) ──
   Wordmark-PNG:n är redan mörk teal (avg RGB ~30,101,111 — samma familj som
   --accent) och renderas ofiltrerad på ljusa app-ytor (top-bar.css, base.css).
   Den läses fint mot --ev-paper utan filter — inget invert behövs här,
   till skillnad från .pub-nav--dark som vitinverterar för sin mörka bakgrund. */
.pub-nav--ev {
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
/* Förbi toppen: tonad frosted glass — halvtransparent ivory + blur + hårlinje.
   I toppläget är naven helt transparent och smälter in i sidans yta. */
.pub-nav--ev.pub-nav--scrolled {
  background: color-mix(in srgb, var(--ev-paper) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--ev-line);
}
.pub-nav--ev .pub-nav__link {
  color: var(--ev-ink); opacity: .72; font-family: var(--ev-font-ui); font-weight: 600;
  border-radius: 999px;
  transition: color .15s, background-color .15s, opacity .15s;
}
.pub-nav--ev .pub-nav__link:hover { opacity: 1; }
/* Aktiv flik: mint-pill i samma färgpar som .btn--mint/.sec-badge — ersätter
   basens teal border-bottom, som krökte sig fult längs länkens border-radius. */
.pub-nav--ev .pub-nav__link--active {
  opacity: 1;
  color: var(--ev-mint-deep);
  background: var(--ev-mint-soft);
  border-bottom-color: transparent;
}
.pub-nav--ev .btn--primary {
  background: var(--ev-ink); color: var(--ev-paper); border-radius: 999px;
}
.pub-nav--ev .btn--primary:hover { background: var(--ev-ink-2); }
.pub-nav--ev .btn--ghost { color: var(--ev-ink); }
.pub-nav--ev .pub-nav__hamburger { color: var(--ev-ink); }

/* ── Evergreen-navens mobilmeny (spegel av .pub-nav--dark-blocket) ── */
@media (max-width: 768px) {
  .pub-nav--ev .pub-nav__links { background: var(--ev-paper); border-bottom: 1px solid var(--ev-line); }
  .pub-nav--ev .pub-nav__links .pub-nav__link { color: var(--ev-ink); }
  .pub-nav--ev .pub-nav__links .pub-nav__link--active { color: var(--ev-mint-deep); }
  .pub-nav--ev .pub-nav__mobile-cta { border-top: 1px solid var(--ev-line); }
}

/* ── css/components/public-footer.css ── */
.pub-footer {
  background: var(--ink-900);
  border-top: 1px solid color-mix(in srgb, var(--landing-text-2) 22%, var(--ink-800));
  margin-top: auto;
}

/* Wordmark/symbol syns oavsett ursprungsfärg (görs vit) */
.pub-footer img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.pub-footer__inner {
  display: flex;
  gap: var(--s-10);
  padding: var(--s-10) 0;
  width: var(--container);
  margin-inline: auto;
}

.pub-footer__brand { flex: 2; }

.pub-footer__tagline {
  color: var(--landing-text-2);
  font-size: var(--text-sm);
  margin-top: var(--s-3);
  line-height: 1.55;
}

.pub-footer__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pub-footer__col-title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--landing-text-1);
  margin-bottom: var(--s-1);
}

.pub-footer__link,
.pub-footer__legal {
  font-size: var(--text-sm);
  color: var(--landing-text-2);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}

.pub-footer__link:hover,
.pub-footer__legal:hover { color: var(--indigo-200); }

/* ─── Trust-rad (samma badges som landing-heron) ─────────────── */
.pub-footer__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  width: var(--container);
  margin-inline: auto;
  padding: var(--s-5) 0;
  border-top: 1px solid color-mix(in srgb, var(--landing-text-2) 22%, var(--ink-800));
}

.pub-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--landing-text-2);
}

/* Indigo-detaljen — trust-ikonerna (10 %-regeln: liten detalj, inget mer) */
.pub-footer__badge i {
  color: var(--indigo-300);
  font-size: 14px;
}

.pub-footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--landing-text-2) 22%, var(--ink-800));
  padding: var(--s-4) 0;
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--landing-text-2) 70%, transparent);
}

.pub-footer__made { color: color-mix(in srgb, var(--landing-text-2) 85%, transparent); }

.pub-footer__top {
  font-size: var(--text-xs);
  color: var(--landing-text-2);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.pub-footer__top:hover { color: var(--indigo-200); }

@media (max-width: 768px) {
  .pub-footer__inner {
    flex-direction: column;
    gap: var(--s-6);
    padding: var(--s-8) var(--s-4);
  }
  .pub-footer__link,
  .pub-footer__legal,
  .pub-footer__top { display: inline-block; padding: 12px 0; }
}

@media (max-width: 480px) {
  .pub-footer__inner {
    padding: var(--s-6) var(--s-3);
    gap: var(--s-5);
    /* Produkt | Företag i två spalter — länkarna är korta nog.
       Brand spänner hela raden, kolumnerna radar sig under den. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-6);
  }
  .pub-footer__brand { grid-column: 1 / -1; }
  .pub-footer__link {
    padding-block: var(--s-3);
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .pub-footer__trust { gap: var(--s-2) var(--s-4); padding: var(--s-4) var(--s-3); }
  .pub-footer__bottom {
    padding: var(--s-3) var(--s-3);
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  /* Mikrotext: 11px → 12px, bättre läsbarhet på liten skärm */
  .pub-footer__badge,
  .pub-footer__copy,
  .pub-footer__made,
  .pub-footer__top { font-size: 12px; }
}

/* Rådgivningsdisclaimer — juridisk friskrivning på alla publika sidor */
.pub-footer__disclaimer { font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--landing-text-2) 70%, transparent); max-width: 720px; margin: 0 auto var(--s-4); padding: 0 var(--s-6); text-align: center; }

/* ── css/components/public-delight.css ── */
/* ─── Aurora-bakgrund ─────────────────────────────────────────
   Absolut lager med mjuka blobbar i tre hues bakom hero-innehåll:
   två teal (dominant), en indigo (sval pol, nere höger) och en
   mindre korall (varm glimt, nere vänster) — placerade åt motsatta
   håll så lagret läses som levande djup, inte regnbåge.
   Föräldern förutsätts ha position: relative + overflow: hidden;
   innehållet ovanpå behöver position: relative + z-index: 1
   (mönstret .pub-hero .container har redan detta). */
.pub-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 36% at 22% 30%, color-mix(in srgb, var(--accent-light) 26%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 46% 40% at 76% 22%, color-mix(in srgb, var(--teal-500) 32%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 44% 38% at 80% 78%, var(--aurora-indigo) 0%, transparent 72%),
    radial-gradient(ellipse 26% 20% at 16% 74%, var(--aurora-coral) 0%, transparent 70%);
  animation: aicfo-aurora-hue 22s ease-in-out infinite;
  will-change: transform, filter;
}

/* ─── Shimmer-text ────────────────────────────────────────────
   Gradient-clipped text i ljusa teal-toner med en smal korall-glint
   direkt efter teal-toppen — designad för mörk bakgrund
   (--landing-bg-base). Läggs på det roterande hero-ordet. */
.pub-shimmer {
  background: linear-gradient(
    110deg,
    var(--landing-text-1) 0%,
    var(--landing-text-1) 38%,
    var(--teal-300) 50%,
    var(--coral-soft) 54%,
    var(--landing-text-1) 62%,
    var(--landing-text-1) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: aicfo-hero-shimmer 3.5s linear infinite;
}

/* ─── Logo-marquee ────────────────────────────────────────────
   Kräver duplicerat innehåll: rendera item-listan TVÅ gånger i
   __track så att translateX(-50%) loopar sömlöst. Avstånd via
   padding på __item (inte gap på track) — annars stämmer inte -50%. */
.pub-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.pub-marquee__track {
  display: flex;
  width: max-content;
  animation: aicfo-marquee 28s linear infinite;
  will-change: transform;
}
.pub-marquee:hover .pub-marquee__track {
  animation-play-state: paused;
}
.pub-marquee__item {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 clamp(var(--s-6), 4vw, var(--s-12));
}

/* ─── Magnetisk knapp-hover (CSS-only) ────────────────────────
   Lyft + skala + teal-tintad glow på hover; aktiv-state trycker ner. */
.btn-magnetic {
  transition:
    transform var(--dur-normal) var(--ease-spring),
    box-shadow var(--dur-normal) var(--ease-spring);
  will-change: transform;
}
.btn-magnetic:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--glow-card-hover);
}
.btn-magnetic:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--glow-card);
  transition-duration: var(--dur-fast);
}

/* ─── Publik typografi ────────────────────────────────────────
   Tight tracking + balanserade radbrytningar på publika rubriker. */
.pub-page h1,
.pub-page h2 {
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ─── Reducerad rörelse ───────────────────────────────────────
   Globala regeln i css/animations/tokens.css kortar durations till
   0.01ms, men marquee/aurora/shimmer är oändliga loopar där även en
   snäpp-frame stör — stäng av helt och lämna statiskt läge. */
@media (prefers-reduced-motion: reduce) {
  .pub-aurora,
  .pub-shimmer,
  .pub-marquee__track {
    animation: none !important;
  }
  .pub-marquee__track { transform: none; }
}

/* ── css/components/public-evergreen.css ── */
/* ==========================================================================
   1. LOKALA TOKENS
   ========================================================================== */
.pub-page--ev {
  --r-pill: 999px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ev-ink) 5%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--ev-ink) 14%, transparent);
  --shadow-phone: 0 24px 60px -18px color-mix(in srgb, var(--ev-ink) 38%, transparent);
}

/* ==========================================================================
   2. KNAPPAR
   ========================================================================== */
.pub-page--ev .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ev-font-ui); font-weight: 700; font-size: 15px;
  border-radius: var(--r-pill); border: none; cursor: pointer;
  padding: 13px 26px; text-decoration: none;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s, color .2s;
}
.pub-page--ev .btn:active { transform: scale(.97); }
.pub-page--ev .btn--dark { background: var(--ev-ink); color: var(--ev-paper); }
.pub-page--ev .btn--dark:hover { background: var(--ev-ink-2); transform: translateY(-1px); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--ev-ink) 45%, transparent); }
.pub-page--ev .btn--mint { background: var(--ev-mint-soft); color: var(--ev-mint-deep); }
.pub-page--ev .btn--mint:hover { background: color-mix(in srgb, var(--ev-mint-soft) 91%, var(--ev-mint) 9%); transform: translateY(-1px); }
.pub-page--ev .btn--light { background: var(--ev-paper); color: var(--ev-ink); }
.pub-page--ev .btn--light:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0,0,0,.3); }
.pub-page--ev .btn--ghost-dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.pub-page--ev .btn--ghost-dark:hover { background: rgba(255,255,255,.14); }

/* ==========================================================================
   3. SEKTIONSPRIMITIVER
   ========================================================================== */
.pub-page--ev .sec-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 18px; position: relative; }
.pub-page--ev .sec-badge--dark { color: var(--ev-txt-dark-2); }
.pub-page--ev .sec-badge--light { color: var(--ev-mint-deep); }
.pub-page--ev .sec-badge .dot { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.pub-page--ev .sec-badge--dark .dot { background: color-mix(in srgb, var(--ev-mint) 16%, transparent); color: var(--ev-mint); }
.pub-page--ev .sec-badge--light .dot { background: var(--ev-mint-soft); color: var(--ev-mint-deep); }
.pub-page--ev .sec-badge .dot svg { width: 13px; height: 13px; }
.pub-page--ev .sec-h2 { font-family: var(--ev-font-display); font-weight: 500; font-size: clamp(34px,4.6vw,56px); letter-spacing: -.02em; line-height: 1.05; position: relative; }
.pub-page--ev .sec-sub { max-width: 520px; margin: 16px auto 0; font-size: 17px; line-height: 1.55; position: relative; }
.pub-page--ev .ev-panel--dark .sec-sub,
.pub-page--ev .ev-dark .sec-sub { color: var(--ev-txt-dark-2); }
.pub-page--ev .sec-sub--ink { color: var(--ev-txt-2); }
.pub-page--ev .sec-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 28px; position: relative; flex-wrap: wrap; }

/* ==========================================================================
   4. FAQ
   ========================================================================== */
.pub-page--ev .ev-faq { padding: 80px 0; }
.pub-page--ev .faq__inner { max-width: 720px; margin: 0 auto; }
.pub-page--ev .ev-faq h2 { font-family: var(--ev-font-display); font-weight: 500; font-size: clamp(30px,4vw,42px); letter-spacing: -.02em; margin-bottom: 34px; }
.pub-page--ev .faq-item { border-bottom: 1px solid var(--ev-line); }
.pub-page--ev .faq-item button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--ev-font-ui); font-weight: 700; font-size: 16.5px; color: var(--ev-ink);
  padding: 22px 4px;
}
.pub-page--ev .faq-item button .faq-x { font-size: 22px; font-weight: 400; color: var(--ev-txt-2); transition: transform .3s; flex: none; }
.pub-page--ev .faq-item.is-open .faq-x { transform: rotate(45deg); }
.pub-page--ev .faq-item__a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.22,.61,.36,1); }
.pub-page--ev .faq-item__a p { padding: 0 4px 22px; font-size: 15px; line-height: 1.6; color: var(--ev-txt-2); max-width: 600px; }

/* ==========================================================================
   5. VÄNTELISTA-BAR
   ========================================================================== */
/* Två spalter: budskap + bevis till vänster, formulär + integritetsrad till höger.
   Tidigare låg alla fyra barnen i samma flex-rad med space-between — när
   integritetsraden tillkom trängdes formen ihop, knappen krympte till en cirkel
   och köräknaren blev hängande på egen rad. Grid håller isär de två spalterna. */
.pub-page--ev .ev-wait { max-width: 1160px; margin: 0 auto 32px; padding: 0 28px; }
.pub-page--ev .wait__inner {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--ev-ink-deep) 0%, var(--ev-ink) 55%, var(--ev-ink-2) 100%);
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 52px 48px 46px;
  box-shadow: 0 24px 64px -24px color-mix(in srgb, var(--ev-ink-deep) 45%, transparent);
}
/* Atmosfär: mint-glow uppe höger + svag guld-pol nere vänster, kornighet ovanpå */
.pub-page--ev .wait__inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46% 80% at 84% 30%, color-mix(in srgb, var(--ev-mint) 17%, transparent), transparent 70%),
    radial-gradient(38% 70% at 8% 95%, color-mix(in srgb, var(--ev-gold) 8%, transparent), transparent 70%);
}
.pub-page--ev .wait__inner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.pub-page--ev .wait__inner > * { position: relative; z-index: 1; }

.pub-page--ev .wait__eyebrow {
  margin: 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ev-mint);
}
.pub-page--ev .wait__title {
  font-family: var(--ev-font-display); font-weight: 500;
  font-size: clamp(27px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -.015em;
  color: var(--ev-paper);
  margin: 14px auto 10px; max-width: 680px;
}
.pub-page--ev .wait__title em { font-style: italic; color: var(--ev-mint); }
.pub-page--ev .wait__offer {
  margin: 0; font-size: 15px; line-height: 1.55;
  color: color-mix(in srgb, var(--ev-paper) 76%, transparent);
}
.pub-page--ev .wait__offer b { color: var(--ev-paper); font-weight: 600; }

/* Formulär: knappen bor i fältet — en yta, ett beslut */
.pub-page--ev .wait__form { max-width: 500px; margin: 24px auto 0; }
.pub-page--ev .wait__field {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 22px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.pub-page--ev .wait__field:focus-within {
  border-color: var(--ev-mint);
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ev-mint) 18%, transparent);
}
.pub-page--ev .wait__input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--ev-paper); font-family: var(--ev-font-ui); font-size: 15.5px; padding: 11px 0;
}
.pub-page--ev .wait__input::placeholder { color: rgba(255,255,255,.38); }
.pub-page--ev .wait__go {
  flex: 0 0 auto; border: 0; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--r-pill); padding: 12px 24px;
  background: var(--ev-paper); color: var(--ev-ink);
  font-family: var(--ev-font-ui); font-size: 14.5px; font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pub-page--ev .wait__go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); }
.pub-page--ev .wait__go:active { transform: translateY(0); }
.pub-page--ev .wait__go svg { transition: transform .18s ease; }
.pub-page--ev .wait__go:hover svg { transform: translateX(3px); }

/* Felläge: ljusare loss-ton (mixad mot paper) så den bär på mörk yta */
.pub-page--ev .wait__field--err {
  border-color: color-mix(in srgb, var(--ev-loss) 65%, var(--ev-paper));
  animation: wait-shake .35s ease;
}
@keyframes wait-shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.pub-page--ev .wait__msg {
  min-height: 20px; margin: 10px 0 0;
  font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--ev-loss) 65%, var(--ev-paper));
}

.pub-page--ev .wait__privacy { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ev-txt-dark-2); }
.pub-page--ev .wait__privacy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pub-page--ev .wait__privacy a:hover { color: var(--ev-paper); }

/* Trust-raden: räknare + riskreducering i en tyst småcaps-rad */
.pub-page--ev .wait__footline {
  margin: 24px 0 0;
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ev-txt-dark-2);
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
}
.pub-page--ev .wait__count { color: color-mix(in srgb, var(--ev-paper) 82%, transparent); font-weight: 700; }
.pub-page--ev .wait__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ev-txt-dark-2); }

@media (max-width: 900px) {
  .pub-page--ev .wait__inner { padding: 44px 28px 40px; }
}
/* Mobil: fältet ryms inte på en rad — input och knapp staplas i full bredd */
@media (max-width: 560px) {
  .pub-page--ev .wait__inner { padding: 36px 20px 32px; }
  .pub-page--ev .wait__field { flex-wrap: wrap; padding: 6px; }
  .pub-page--ev .wait__input { padding: 11px 16px; flex: 1 1 100%; }
  .pub-page--ev .wait__go { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pub-page--ev .wait__field--err { animation: none; }
  .pub-page--ev .wait__go, .pub-page--ev .wait__go svg { transition: none; }
}

/* ==========================================================================
   6. FOOTER — delad komponent (public-footer.js/.css), lokal Evergreen-omfärgning.
   Layout/spacing orörda — endast färg-/font-deklarationer skrivs över.
   ========================================================================== */
.pub-page--ev .pub-footer {
  background: var(--ev-paper);
  border-top: 1px solid var(--ev-line);
  font-family: var(--ev-font-ui);
}
.pub-page--ev .pub-footer img { filter: none; }
.pub-page--ev .pub-footer__tagline { color: var(--ev-txt-2); }
.pub-page--ev .pub-footer__col-title { color: var(--ev-ink); }
.pub-page--ev .pub-footer__link,
.pub-page--ev .pub-footer__legal { color: var(--ev-txt-2); }
.pub-page--ev .pub-footer__link:hover,
.pub-page--ev .pub-footer__legal:hover { color: var(--ev-mint-deep); }
.pub-page--ev .pub-footer__trust { border-top: 1px solid var(--ev-line); }
.pub-page--ev .pub-footer__badge { color: var(--ev-txt-2); }
.pub-page--ev .pub-footer__badge i { color: var(--ev-mint-deep); }
.pub-page--ev .pub-footer__bottom {
  border-top: 1px solid var(--ev-line);
  color: color-mix(in srgb, var(--ev-txt-2) 70%, transparent);
}
.pub-page--ev .pub-footer__disclaimer { color: color-mix(in srgb, var(--ev-txt-2) 70%, transparent); }
.pub-page--ev .pub-footer__made { color: color-mix(in srgb, var(--ev-txt-2) 85%, transparent); }
.pub-page--ev .pub-footer__top { color: var(--ev-txt-2); }
.pub-page--ev .pub-footer__top:hover { color: var(--ev-mint-deep); }

/* ==========================================================================
   7. SCROLL-INDIKATOR
   ========================================================================== */
.pub-page--ev .hero-scroll-indicator {
  /* reset mot legacy-stylesheetens unscopade globala regel (position:absolute + bottom/left/transform)
     som annars läcker in här eftersom båda CSS-filerna alltid laddas samtidigt. */
  position: static; bottom: auto; left: auto; transform: none;
  margin: 26px auto 0; font-size: 22px; color: var(--ev-txt-2);
  animation: ev-bob 2.2s ease-in-out infinite; transition: opacity .3s;
}
@keyframes ev-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .pub-page--ev .hero-scroll-indicator { animation: none; } }

/* ==========================================================================
   8. SHIMMER-OVERRIDE
   ========================================================================== */
/* pub-shimmer är designad för mörk bakgrund (ljus gradient) — override:a
   gradienten så det roterande ordet läses mot ivory (mint-deep → mint). */
.pub-page--ev .pub-shimmer {
  background: linear-gradient(
    110deg,
    var(--ev-mint-deep) 0%,
    var(--ev-mint-deep) 38%,
    var(--ev-mint) 50%,
    var(--ev-mint-deep) 62%,
    var(--ev-mint-deep) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   NYA PRIMITIVER (Fas 2, task 3–8)
   ========================================================================== */

/* ── Undersido-hero: ivory, kompakt (ingen telefon-stage) ── */
.pub-page--ev .ev-subhero {
  padding: 72px 28px 8px; text-align: center;
  max-width: 860px; margin: 0 auto;
}
.pub-page--ev .ev-subhero h1 {
  font-family: var(--ev-font-display); font-weight: 500;
  font-size: clamp(40px, 6vw, 68px);
  letter-spacing: -.025em; line-height: 1.05; color: var(--ev-ink);
}
.pub-page--ev .ev-subhero__sub {
  max-width: 560px; margin: 18px auto 0;
  font-size: 17px; line-height: 1.55; color: var(--ev-txt-2);
}

/* ── Sektionspanel: samma skal som landings .ev-how/.ev-dark ── */
.pub-page--ev .ev-panel {
  margin: 56px auto 0; max-width: 1240px;
  border-radius: var(--r-xl);
  padding: 80px 28px 72px; text-align: center;
  position: relative; overflow: hidden;
}
.pub-page--ev .ev-panel--light { background: linear-gradient(180deg, #EFF6EA 0%, #DCEEDD 100%); }
.pub-page--ev .ev-panel--dark {
  background: var(--ev-ink-deep); color: #F3F7F1;
}
.pub-page--ev .ev-panel--dark::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--ev-mint) 13%, transparent), transparent 70%),
    radial-gradient(35% 30% at 85% 80%, color-mix(in srgb, var(--ev-gold) 8%, transparent), transparent 70%);
  pointer-events: none;
}

/* ── Nummererat stegkort (landings howSection + how-it-works stepsSection) ── */
.pub-page--ev .ev-step { background: rgba(255,255,255,.75); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.9); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-card); transition: transform .25s; }
.pub-page--ev .ev-step:hover { transform: translateY(-4px); }
.pub-page--ev .step__num { width: 34px; height: 34px; border-radius: 50%; background: var(--ev-ink); color: var(--ev-paper); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.pub-page--ev .step__title { font-weight: 800; font-size: 17px; margin-top: 16px; }
.pub-page--ev .step__text { font-size: 14px; line-height: 1.55; color: var(--ev-txt-2); margin-top: 8px; }

/* ── Vitt kort på ivory (basen för plan-/form-/story-kort) ── */
.pub-page--ev .ev-card {
  background: #fff; border: 1px solid var(--ev-line); border-radius: 18px;
  padding: 26px; text-align: left;
  box-shadow: var(--shadow-card);
  transition: transform .25s;
}
.pub-page--ev .ev-card:hover { transform: translateY(-3px); }

/* ── Formulärfält på ljus yta (contact + waitlist) ── */
.pub-page--ev .ev-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.pub-page--ev .ev-field label { font-family: var(--ev-font-ui); font-weight: 700; font-size: 13.5px; color: var(--ev-ink); }
.pub-page--ev .ev-input {
  border: 1px solid var(--ev-line); background: var(--ev-paper);
  border-radius: 12px; padding: 13px 16px;
  font-family: var(--ev-font-ui); font-size: 15px; color: var(--ev-ink);
  outline: none; transition: border-color .2s;
  width: 100%;
}
.pub-page--ev .ev-input:focus { border-color: var(--ev-mint-deep); }
.pub-page--ev textarea.ev-input { min-height: 120px; resize: vertical; }

/* iOS Safari zoomar in på fält < 16px — mobil får exakt 16px, desktop behåller 15px */
@media (max-width: 768px) {
  .pub-page--ev .ev-input { font-size: 16px; }
  .pub-page--ev .wait__input { font-size: 16px; }
  .pricing-page .ev-faq { padding: 80px 28px; }
}

/* Task A3 — sektionsgap-pass: subhero tar för mycket luft innan innehåll
   på alla undersidor (pricing/hiw/om-oss/kontakt) @375. padding-block −25%. */
@media (max-width: 480px) {
  .pub-page--ev .ev-subhero { padding-top: 54px; padding-bottom: 6px; }
}


/* ── css/toast.css ── */
.toast-container {
  position: fixed;
  bottom: calc(var(--nav-height) + var(--s-4));
  right: var(--s-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
  max-width: min(320px, calc(100vw - var(--s-8)));
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--s-4);
  pointer-events: auto;
  border-left: 3px solid var(--accent);
  animation: aicfo-fade-up var(--dur-normal) var(--ease-spring) both;
}

.toast--success { border-left-color: var(--gain); }
.toast--error   { border-left-color: var(--loss); }
.toast--warning { border-left-color: var(--warning); }
.toast--info    { border-left-color: var(--accent); }

.toast__icon {
  font-size: 16px;
  flex-shrink: 0;
}
.toast--success .toast__icon { color: var(--gain); }
.toast--error   .toast__icon { color: var(--loss); }
.toast--warning .toast__icon { color: var(--warning); }
.toast--info    .toast__icon { color: var(--accent); }

.toast__message {
  font-size: var(--text-sm);
  font-family: var(--font-ui);
  color: var(--text-1);
  font-weight: 500;
  flex: 1;
}

.toast.is-exiting {
  animation: aicfo-fade-down var(--dur-fast) var(--ease-out) both;
}

/* ── css/components/action-sheet.css ── */
.action-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 26, 20, 0.45);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.action-sheet-backdrop.is-open {
  opacity: 1;
}

.action-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 430px;
  transform: translate(-50%, 100%);
  background: var(--surface);
  border-radius: 28px 28px 0 0;
  z-index: calc(var(--z-modal) + 1);
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px -12px rgba(11, 35, 27, 0.25);
  transition: transform 0.32s cubic-bezier(.22, .61, .36, 1);
}

.action-sheet.is-open {
  transform: translate(-50%, 0);
}

.action-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--ev-line);
  margin: 6px auto 14px;
}

.action-sheet__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.action-sheet__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 10px;
  border: none;
  border-radius: 16px;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.15s ease;
  transition-delay: calc(var(--i) * 40ms);
}

.action-sheet.is-open .action-sheet__item {
  opacity: 1;
  transform: none;
}

.action-sheet__item:hover,
.action-sheet__item:focus-visible {
  background: var(--ev-paper-2);
}

.action-sheet__item:active {
  transform: scale(0.98);
}

.action-sheet__item:disabled {
  opacity: 0.55;
  cursor: default;
}

.action-sheet__item:disabled:hover {
  background: none;
}

.action-sheet__ico {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
}

.action-sheet__ico svg {
  width: 22px;
  height: 22px;
}

.action-sheet__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.action-sheet__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-1);
}

.action-sheet__sub {
  font-size: 12px;
  color: var(--text-2);
}

.action-sheet__soon {
  flex: none;
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--ev-gold-soft);
  color: var(--ev-gold-text);
  border-radius: 999px;
  padding: 3px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .action-sheet-backdrop,
  .action-sheet,
  .action-sheet__item {
    transition: none !important;
  }

  .action-sheet__item {
    opacity: 1;
    transform: none;
  }
}

/* Etapp 7: valmarkering för custom items (t.ex. Portföljens sortering) */
.action-sheet__check {
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 20px;
  color: var(--accent);
}
.action-sheet__check svg { width: 100%; height: 100%; display: block; }
.action-sheet__item.is-selected .action-sheet__title { color: var(--accent); }

/* ── css/components/demo-sheet.css ── */
.demo-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ev-ink) 45%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.demo-sheet-backdrop.is-open { opacity: 1; }

.demo-sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: min(880px, 92vw);
  max-height: min(860px, 90vh);
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background: var(--ev-paper);
  border-radius: 28px;
  box-shadow: 0 24px 80px -24px color-mix(in srgb, var(--ev-ink) 45%, transparent);
  z-index: calc(var(--z-modal) + 1);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow: hidden;
}
.demo-sheet.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.demo-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--ev-line);
  flex-shrink: 0;
}
.demo-sheet__progress { display: flex; align-items: center; gap: 12px; }
.demo-progress__label { font: 700 13px/1 var(--ev-font-ui); color: var(--ev-txt-2); }
.demo-progress__dots { display: flex; gap: 5px; }
.demo-progress__dot {
  width: 22px; height: 5px; border-radius: 999px;
  background: var(--ev-line);
  transition: background 0.25s ease;
}
.demo-progress__dot.is-done { background: var(--ev-mint-deep); }
.demo-sheet__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: none; border-radius: 12px;
  background: transparent; color: var(--ev-txt-2);
  cursor: pointer;
}
.demo-sheet__close:hover { background: var(--ev-mint-soft); color: var(--ev-ink); }
.demo-sheet__close svg { width: 20px; height: 20px; }

.demo-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 40px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.demo-sheet__body > * { width: 100%; max-width: 600px; }

.demo-sheet__h {
  font: 500 clamp(28px, 4vw, 36px)/1.1 var(--ev-font-display);
  color: var(--ev-ink);
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 0 8px;
}
.demo-sheet__sub {
  font: 400 15.5px/1.5 var(--ev-font-ui);
  color: var(--ev-txt-2);
  text-align: center;
  margin: 0 0 32px;
}

/* ── Steg 1: preset-kort (ev-card-mönstret) ── */
.demo-preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.demo-preset-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ev-ink) 5%, transparent);
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.demo-preset-card:hover {
  border-color: var(--ev-mint);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--ev-ink) 14%, transparent);
}
.demo-preset-card.is-selected { border-color: var(--ev-mint-deep); background: var(--ev-mint-soft); }
.demo-preset-card__ikon {
  width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ev-mint-soft); color: var(--ev-mint-deep);
  margin-bottom: 6px;
}
.demo-preset-card.is-selected .demo-preset-card__ikon { background: #fff; }
.demo-preset-card__ikon svg { width: 16px; height: 16px; }
.demo-preset-card__titel { font: 700 16.5px/1.2 var(--ev-font-ui); color: var(--ev-ink); }
.demo-preset-card__sub { font: 400 13.5px/1.45 var(--ev-font-ui); color: var(--ev-txt-2); }

/* ── Steg 2/3: fält, chips, slider ── */
.demo-falt { margin-bottom: 24px; }
.demo-falt__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 700 14px/1.3 var(--ev-font-ui);
  color: var(--ev-ink);
  margin-bottom: 12px;
}
.demo-falt__varde {
  font: 700 15px/1 var(--ev-font-ui);
  color: var(--ev-ink);
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 12px;
  padding: 8px 12px;
  width: 130px;
  text-align: right;
  transition: border-color 0.2s;
}
.demo-falt__varde:focus { outline: none; border-color: var(--ev-mint-deep); }
.demo-slider {
  width: 100%;
  accent-color: var(--ev-mint-deep);
  cursor: pointer;
}
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-chip {
  padding: 10px 16px;
  font: 500 13.5px/1 var(--ev-font-ui);
  color: var(--ev-ink);
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.demo-chip:hover { border-color: var(--ev-mint); }
.demo-chip.is-selected {
  border-color: var(--ev-ink);
  background: var(--ev-ink);
  color: var(--ev-paper);
  font-weight: 700;
}
.demo-stepper { display: inline-flex; align-items: center; gap: 12px; }
.demo-stepper__btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font: 600 18px/1 var(--ev-font-ui);
  color: var(--ev-ink);
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.demo-stepper__btn:hover { border-color: var(--ev-mint-deep); background: var(--ev-mint-soft); }
.demo-stepper__varde { font: 700 15px/1 var(--ev-font-ui); color: var(--ev-ink); min-width: 52px; text-align: center; }

/* ── Live-insikt (steg 2) ── */
.demo-live {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: var(--ev-mint-soft);
  border-radius: 14px;
  font: 400 13px/1.3 var(--ev-font-ui);
  color: var(--ev-txt-2);
}
.demo-live__puls {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ev-mint);
  animation: demo-live-puls 1.8s ease-in-out infinite;
}
@keyframes demo-live-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.demo-live__stat strong { color: var(--ev-ink); font-weight: 700; }
.demo-live__hint { margin-left: auto; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .demo-live__puls { animation: none; } }

/* ── Footer-knappar (.btn--dark-mönstret från public-evergreen.css) ── */
.demo-sheet__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}
.demo-btn-primar {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  min-height: 48px;
  font: 700 15px/1 var(--ev-font-ui);
  color: var(--ev-paper);
  background: var(--ev-ink);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s, background 0.2s;
}
.demo-btn-primar:hover {
  background: var(--ev-ink-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--ev-ink) 45%, transparent);
}
.demo-btn-primar:active { transform: scale(0.97); }
.demo-btn-tillbaka {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  font: 500 14px/1 var(--ev-font-ui);
  color: var(--ev-txt-2);
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}
.demo-btn-tillbaka:hover { color: var(--ev-ink); background: var(--ev-mint-soft); }

/* ── Analys-sekvensen ── */
.demo-analys {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  text-align: center;
}
.demo-puls { position: relative; width: 96px; height: 96px; }
.demo-puls__ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--ev-mint);
  border-radius: 50%;
  opacity: 0.9;
  animation: demo-puls 1.6s ease-out infinite;
}
.demo-puls__ring:nth-child(2) { animation-delay: 0.55s; }
.demo-puls__kärna { position: absolute; inset: 30px; background: var(--ev-ink); border-radius: 50%; }
@keyframes demo-puls {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}
.demo-analys__meddelande {
  font: 500 clamp(18px, 2.4vw, 22px)/1.35 var(--ev-font-display);
  color: var(--ev-ink);
  transition: opacity 0.3s ease;
}
.demo-analys__steg { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.demo-analys__stegrad {
  display: flex; align-items: center; gap: 10px;
  font: 400 14px/1.4 var(--ev-font-ui);
  color: var(--ev-txt-2);
  opacity: 0.55;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.demo-analys__stegrad-ikon {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ev-line);
  background: #fff;
  color: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  flex-shrink: 0;
}
.demo-analys__stegrad-ikon svg { width: 12px; height: 12px; }
.demo-analys__stegrad.is-active { opacity: 1; color: var(--ev-ink); }
.demo-analys__stegrad.is-done { opacity: 1; color: var(--ev-ink); }
.demo-analys__stegrad.is-done .demo-analys__stegrad-ikon {
  background: var(--ev-mint-deep);
  border-color: var(--ev-mint-deep);
  color: #fff;
}

/* ── Resultatvyn ── */
.demo-result { display: flex; flex-direction: column; gap: 22px; }

.demo-hero { text-align: center; padding: 8px 0 4px; }
.demo-hero__eyebrow {
  display: block;
  font: 700 12px/1 var(--ev-font-ui);
  color: var(--ev-mint-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.demo-hero__belopp {
  display: block;
  font: 500 clamp(40px, 6vw, 54px)/1.05 var(--ev-font-display);
  color: var(--ev-ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.demo-hero__sub {
  display: block;
  font: 400 14px/1.5 var(--ev-font-ui);
  color: var(--ev-txt-2);
  max-width: 420px;
  margin: 10px auto 0;
}

.demo-result__ai {
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 18px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ev-ink) 5%, transparent);
  font: 400 15.5px/1.6 var(--ev-font-ui);
  color: var(--ev-ink);
}
.demo-result__ai-avsandare {
  display: block;
  font: 700 12px/1 var(--ev-font-ui);
  color: var(--ev-mint-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.demo-result__graf { padding: 4px 0; }
.demo-proj { width: 100%; height: auto; }
.demo-proj__area { fill: color-mix(in srgb, var(--ev-mint) 16%, transparent); }
.demo-proj__bas { stroke: var(--ev-txt-2); stroke-width: 2; stroke-dasharray: 5 5; }
.demo-proj__opt { stroke: var(--ev-mint-deep); stroke-width: 2.5; }
.demo-proj__punkt { fill: var(--ev-mint-deep); }
.demo-proj__label { font: 400 11px var(--ev-font-ui); fill: var(--ev-txt-2); }
.demo-proj__legend {
  display: flex; justify-content: center; gap: 20px;
  font: 400 12.5px/1 var(--ev-font-ui); color: var(--ev-txt-2);
  margin-top: 6px;
}
.demo-proj__legend span { display: inline-flex; align-items: center; gap: 6px; }
.demo-proj__dot { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.demo-proj__dot--bas { background: var(--ev-txt-2); }
.demo-proj__dot--opt { background: var(--ev-mint-deep); }

.demo-result__jamforelse { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-jamforelse-kort {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 18px;
  text-align: center;
}
.demo-jamforelse-kort--opt { background: var(--ev-ink); border-color: var(--ev-ink); }
.demo-jamforelse-kort__label { font: 500 13px/1.3 var(--ev-font-ui); color: var(--ev-txt-2); margin-bottom: 8px; }
.demo-jamforelse-kort--opt .demo-jamforelse-kort__label { color: var(--ev-txt-dark-2); }
.demo-jamforelse-kort__varde { font: 500 27px/1.1 var(--ev-font-display); color: var(--ev-ink); }
.demo-jamforelse-kort--opt .demo-jamforelse-kort__varde { color: var(--ev-mint); }
.demo-jamforelse-kort__kr { font: 400 12.5px/1.3 var(--ev-font-ui); color: var(--ev-txt-2); margin-top: 6px; }
.demo-jamforelse-kort--opt .demo-jamforelse-kort__kr { color: var(--ev-txt-dark-2); }
.demo-jamforelse__vinst {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 8px 16px;
  background: var(--ev-gold-soft);
  color: var(--ev-gold-text);
  border-radius: 999px;
  font: 700 13.5px/1.3 var(--ev-font-ui);
}

.demo-gauge {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 8px 0;
}
.demo-gauge svg { width: 84px; height: 84px; }
.demo-gauge__spar { fill: none; stroke: var(--ev-line); stroke-width: 7; }
.demo-gauge__varde { fill: none; stroke-width: 7; stroke-linecap: round; }
.demo-gauge--hog .demo-gauge__varde { stroke: var(--ev-mint); }
.demo-gauge--mellan .demo-gauge__varde { stroke: var(--ev-gold); }
.demo-gauge--lag .demo-gauge__varde { stroke: var(--ev-loss); }
.demo-gauge__tal { font: 500 24px var(--ev-font-display); fill: var(--ev-ink); }
.demo-gauge__text { display: flex; flex-direction: column; gap: 3px; }
.demo-gauge__rubrik { font: 700 12px/1 var(--ev-font-ui); color: var(--ev-txt-2); text-transform: uppercase; letter-spacing: 0.06em; }
.demo-gauge__label { font: 500 15px/1.2 var(--ev-font-ui); color: var(--ev-ink); }

.demo-result__rad-rubrik {
  font: 500 20px/1.2 var(--ev-font-display);
  color: var(--ev-ink);
  text-align: center;
  margin-top: 4px;
}
.demo-rad-kort {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--ev-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ev-ink) 5%, transparent);
}
.demo-rad-kort__num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font: 800 13px/1 var(--ev-font-ui);
  color: var(--ev-paper);
  background: var(--ev-ink);
  border-radius: 50%;
}
.demo-rad-kort__inre { flex: 1; }
.demo-rad-kort__rubrik { font: 700 15px/1.3 var(--ev-font-ui); color: var(--ev-ink); margin: 0 0 4px; }
.demo-rad-kort__text { font: 400 14px/1.55 var(--ev-font-ui); color: var(--ev-txt-2); margin: 0; }
.demo-rad-kort__kr {
  flex-shrink: 0;
  align-self: center;
  padding: 6px 12px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  border-radius: 999px;
  font: 700 13px/1 var(--ev-font-ui);
  white-space: nowrap;
}

.demo-result__cta {
  padding: 32px 28px;
  background: var(--ev-ink-deep);
  border-radius: 18px;
  text-align: center;
  color: #F3F7F1;
  position: relative;
  overflow: hidden;
}
.demo-result__cta::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(50% 90% at 85% 50%, color-mix(in srgb, var(--ev-mint) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.demo-result__cta h3 { font: 500 24px/1.2 var(--ev-font-display); margin: 0 0 8px; position: relative; }
.demo-result__cta p { font: 400 14px/1.5 var(--ev-font-ui); color: var(--ev-txt-dark-2); margin: 0 0 20px; position: relative; }
.demo-btn-ljus {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px;
  font: 700 15px/1 var(--ev-font-ui);
  color: var(--ev-ink);
  background: var(--ev-paper);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
}
.demo-btn-ljus:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3); }

.demo-result__disclaimer {
  font: 400 12px/1.5 var(--ev-font-ui);
  color: var(--ev-txt-2);
  text-align: center;
}
.demo-result__omigen {
  font: 500 13.5px/1 var(--ev-font-ui);
  color: var(--ev-txt-2);
  background: none; border: none;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
}
.demo-result__omigen:hover { color: var(--ev-ink); }

/* ── Knappen på sidorna ── */
.demo-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-4);
}
.demo-cta__hint { font: 400 13px/1 var(--ev-font-ui); color: var(--ev-txt-2); }

/* ── Mobil: fullskärms-bottom-sheet ── */
@media (max-width: 720px) {
  .demo-sheet {
    left: 0; top: auto; bottom: 0;
    transform: translateY(100%);
    width: 100%;
    height: 100dvh;
    border-radius: 28px 28px 0 0;
  }
  .demo-sheet.is-open { transform: translateY(0); }
  .demo-sheet__body { padding: var(--s-6) var(--s-5) var(--s-5); }
  .demo-preset-grid { grid-template-columns: 1fr; }
  .demo-result__jamforelse { grid-template-columns: 1fr; }
  .demo-gauge { flex-direction: column; gap: 8px; text-align: center; }
  .demo-rad-kort { flex-wrap: wrap; }
  .demo-rad-kort__kr { align-self: flex-start; }
  .demo-sheet__footer {
    position: sticky;
    bottom: 0;
    background: var(--ev-paper);
    padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  }
  .demo-btn-primar { flex: 1; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .demo-sheet-backdrop, .demo-sheet, .demo-preset-card, .demo-progress__dot { transition: none; }
  .demo-puls__ring { animation: none; opacity: 0.4; }
}

/* ── css/components/waitlist-popup.css ── */
.wl-popup-backdrop {
  position: fixed; inset: 0; background: var(--overlay-bg);
  z-index: var(--z-modal); opacity: 0; transition: opacity .25s ease;
}
.wl-popup-backdrop.is-open { opacity: 1; }

.wl-popup {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -46%); opacity: 0;
  width: min(440px, calc(100vw - 48px));
  background: var(--ev-paper); border: 1px solid var(--ev-line);
  border-radius: var(--r-xl); box-shadow: var(--elev-3);
  padding: 32px; z-index: calc(var(--z-modal) + 1);
  transition: opacity .25s ease, transform .25s ease;
  font-family: var(--ev-font-ui);
}
.wl-popup.is-open { opacity: 1; transform: translate(-50%, -50%); }

.wl-popup__close {
  position: absolute; top: 14px; right: 14px;
  border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--ev-txt-2); cursor: pointer; padding: 6px;
}
.wl-popup__badge {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--ev-mint-deep); background: var(--ev-mint-soft);
  border-radius: var(--r-pill, 999px); padding: 4px 12px; margin-bottom: 14px;
}
.wl-popup__title {
  font-family: var(--ev-font-display); font-weight: 500; font-size: 26px;
  letter-spacing: -.01em; color: var(--ev-ink); margin: 0 0 10px;
}
.wl-popup__text { font-size: 15px; line-height: 1.55; color: var(--ev-txt-2); margin: 0 0 20px; }
.wl-popup__form { display: flex; gap: 10px; flex-wrap: wrap; }
.wl-popup__input {
  flex: 1; min-width: 180px; border: 1px solid var(--ev-line); background: var(--surface);
  border-radius: var(--r-pill, 999px); padding: 12px 18px; font-size: 15px;
  font-family: var(--ev-font-ui); color: var(--ev-ink); outline: none; transition: border-color .2s;
}
.wl-popup__input:focus { border-color: var(--ev-mint); }
.wl-popup__input--error { border-color: var(--loss); }
.wl-popup__hint { font-size: 12px; color: var(--ev-txt-2); margin: 12px 0 0; }

/* Mobil: bottom-sheet, kompakt så totalhöjden håller sig kring 30 % av viewporten. */
@media (max-width: 768px) {
  .wl-popup {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    transform: translateY(12%); border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: var(--s-4) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
    max-height: 30vh; overflow-y: auto;
  }
  .wl-popup.is-open { transform: translateY(0); }
  .wl-popup__badge, .wl-popup__hint { display: none; }
  .wl-popup__close {
    width: 44px; height: 44px; display: grid; place-items: center;
    top: 8px; right: 8px;
  }
  .wl-popup__title { font-size: 18px; }
  .wl-popup__text { font-size: 13px; margin-block: var(--s-2) var(--s-3); }
  .wl-popup__input { font-size: 16px; } /* iOS-zoomgard — Safari zoomar in på fokus om <16px */

  /* Submit-knappen som primär mörk CTA, fullbredd — samma stil som .btn--dark
     (popupen är body-portalerad utanför .pub-page--ev så klassen ärvs inte). */
  .wl-popup__form .btn--mint {
    width: 100%;
    background: var(--ev-ink); color: var(--ev-paper);
  }
  .wl-popup__form .btn--mint:hover { background: var(--ev-ink-2); }
}

@media (prefers-reduced-motion: reduce) {
  .wl-popup-backdrop, .wl-popup { transition: none; }
}

/* ── css/pages/hem.css ── */
/* Clarity layout */
.hem-page { padding: var(--s-6) var(--s-4) var(--s-4); }

/* ═══════════════════════════════════════════════════════════════
   INSIGHT — Stitch-redesign
   ═══════════════════════════════════════════════════════════════ */
.hem-page.hem-insight {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-4);
}

/* ── Hero: total förmögenhet ─────────────────────────────── */
/* Hero + Råd-CTA stannar vita/teal och "poppar" mot de tonade korten. */
.hem-hero {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-5) 0;
  box-shadow: var(--elev-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.hem-hero__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hem-hero__value {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.1;
  color: var(--accent);
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
}
.hem-hero__delta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--text-sm);
}
.hem-hero__delta-pct { color: var(--text-2); }
.hem-hero__spark { height: 56px; margin: var(--s-4) calc(-1 * var(--s-5)) 0; }
.hem-hero__spark svg { width: 100%; height: 100%; display: block; }

.hem-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s-2);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-xs);
}
.hem-pill.is-gain { background: var(--gain-subtle); color: var(--gain); }
.hem-pill.is-loss { background: var(--loss-subtle); color: var(--loss); }

/* ── KPI-grid ────────────────────────────────────────────── */
.hem-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.hem-kpi {
  background: var(--surface-container-low);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--elev-1);
  border: none;
}
.hem-kpi__label { font-size: var(--text-xs); color: var(--text-2); font-weight: 500; }
.hem-kpi__value {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--accent);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.hem-kpi__spark { height: 28px; margin-top: var(--s-2); }
.hem-kpi__spark svg { width: 100%; height: 100%; display: block; }

/* ── Likvida medel ───────────────────────────────────────── */
.hem-likvida {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-container-low);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--elev-1);
  border: none;
}
.hem-likvida__label { font-size: var(--text-xs); color: var(--text-2); font-weight: 500; }
.hem-likvida__value {
  font-weight: 600;
  color: var(--accent);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.hem-likvida__spark { width: 64px; height: 24px; flex-shrink: 0; }

/* ── Portföljhälsa ───────────────────────────────────────── */
/* Portföljhälsa → accent-wash: kopplar färgtonen till betydelse (hälsa/accent). */
.hem-health {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--accent-wash);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--elev-1);
  border: 1px solid var(--accent-line);
}
.hem-health__gauge {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.hem-health__gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hem-health__track { stroke: var(--border); }
.hem-health__fill  { stroke: var(--accent-mid); transition: stroke-dasharray var(--dur-xslow) var(--ease-out); }
.hem-health__score {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
}
.hem-health__text h3 { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
.hem-health__text p  { font-size: var(--text-sm); color: var(--text-2); line-height: 1.45; margin-top: 2px; }

/* ── Block-rubrik (Rekommendationer) ─────────────────────── */
.hem-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
.hem-block__title { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); }
.hem-block__link {
  background: none;
  border: none;
  color: var(--accent-mid);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}
.hem-block__link:hover { color: var(--accent); }

/* ── Rekommendations-karusell ────────────────────────────── */
.hem-rec-scroll {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--s-4));
  padding: 0 var(--s-4) var(--s-2);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hem-rec-scroll::-webkit-scrollbar { display: none; }
.hem-rec {
  flex: 0 0 252px;
  scroll-snap-align: start;
  background: var(--surface-container-low);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--elev-1);
  border: none;
  cursor: pointer;
  transition: box-shadow var(--dur-normal) var(--ease-standard), transform var(--dur-fast);
}
.hem-rec:hover { box-shadow: var(--elev-2); }
.hem-rec:active { transform: scale(0.985); }

/* Köpzon-kort: svag gain-ton + gain-linje — signalerar möjlighet, inte dekor.
   Kortet saknar status-klass i JS; härleds ur badge-modifieraren via :has(). */
.hem-rec:has(.hem-rec__badge--pos) {
  background: var(--gain-wash);
  border-left: 3px solid var(--gain-line);
}
.hem-rec__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.hem-rec__id { display: flex; align-items: center; gap: var(--s-2); }
.hem-rec__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.hem-rec__ticker { font-weight: 600; font-size: var(--text-sm); color: var(--text-1); }
.hem-rec__name { font-size: var(--text-xs); color: var(--text-2); }
.hem-rec__badge {
  padding: 3px var(--s-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.hem-rec__badge--pos { background: var(--gain-subtle); color: var(--gain); }
.hem-rec__badge--neu { background: var(--surface-3); color: var(--text-2); }
.hem-rec__signal {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.45;
  margin: var(--s-3) 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}
.hem-rec__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: var(--s-3);
  font-size: var(--text-xs);
  color: var(--text-2);
}
.hem-rec__dots { display: inline-flex; gap: 4px; }
.hem-rec__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.hem-rec__dot.is-on { background: var(--accent-mid); }

/* ── Marknadssignaler ────────────────────────────────────── */
.hem-signals {
  background: var(--surface-container-low);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--elev-1);
  border: none;
}
.hem-signals__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.hem-signals__head h3 { font-size: var(--text-base); font-weight: 600; color: var(--text-1); }
.hem-signals__strength { font-size: var(--text-sm); color: var(--text-2); }
.hem-signals__strength strong { color: var(--accent); font-weight: 600; }
.hem-signals__bars { display: flex; flex-direction: column; gap: var(--s-3); }
.hem-signal-row { display: flex; align-items: center; gap: var(--s-3); }
.hem-signal-row__label { width: 76px; font-size: var(--text-xs); color: var(--text-2); flex-shrink: 0; }
.hem-signal-row__track {
  flex: 1;
  height: 8px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.hem-signal-row__fill { height: 100%; border-radius: 999px; transition: width var(--dur-xslow) var(--ease-out); }
/* Teal→ljusare-teal gradient ger barerna djup utan att lämna varumärket. */
.hem-signal-row__fill--accent  { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%); }
.hem-signal-row__fill--warning { background: var(--warning); }

/* ── Råd-CTA ─────────────────────────────────────────────── */
.hem-advice-cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  box-shadow: var(--elev-2);
  transition: opacity var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-normal) var(--ease-standard);
}
.hem-advice-cta:hover { box-shadow: var(--elev-3); }
.hem-advice-cta:hover { opacity: 0.94; }
.hem-advice-cta:active { transform: scale(0.99); }
.hem-advice-cta__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hem-advice-cta__text { flex: 1; display: flex; flex-direction: column; }
.hem-advice-cta__text strong { font-size: var(--text-base); font-weight: 600; }
.hem-advice-cta__text em { font-style: normal; font-size: var(--text-xs); opacity: 0.85; margin-top: 2px; }
.hem-advice-cta__arrow { font-size: 18px; opacity: 0.9; }

.hem-daily-slot { margin-top: var(--s-1); }

/* Insight bento-grid */
.bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.bento-cell { background: var(--surface); border-radius: var(--r-md); padding: var(--s-4); border: 1px solid var(--border); }
.bento-cell--wide { grid-column: 1 / -1; }

/* Health Score i bento */
.health-score-mini {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.health-score-circle {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.health-score-info__number {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
}

.health-score-info__label {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 2px;
}

.nudge-card__icon {
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
}
.nudge-card__arrow {
  font-size: 16px;
  color: var(--text-2);
  flex-shrink: 0;
}

/* ── Daily Analysis Widget ─────────────────────────────── */
.daily-analysis-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}

.daily-analysis-widget__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
}

.daily-analysis-widget span {
  display: block;
  color: var(--text-2);
  font: 700 11px var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.daily-analysis-widget strong {
  display: block;
  margin-top: var(--s-1);
  color: var(--text-1);
  font: 700 17px var(--font-display);
}

.daily-analysis-widget em {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  font: 500 12px var(--font-ui);
  font-style: normal;
}

.daily-analysis-widget__verdict {
  border-radius: 999px;
  padding: var(--s-1) var(--s-3);
  background: var(--accent-subtle);
  color: var(--accent);
  font: 700 12px var(--font-ui);
  white-space: nowrap;
}

.daily-analysis-widget__verdict--kopzon {
  background: rgba(34, 197, 94, .12);
  color: var(--gain);
}

.daily-analysis-widget__verdict--undvik,
.daily-analysis-widget__verdict--minska-salj {
  background: rgba(239, 68, 68, .12);
  color: var(--loss);
}

.daily-analysis-widget p {
  margin: var(--s-3) 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.daily-analysis-widget button {
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  color: var(--accent);
  font: 700 13px var(--font-ui);
  padding: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Etapp 3 (Hem)
   Nytt block, scopat under body.app-ev. Rör INTE ovanstående regler —
   flaggan APP_EVERGREEN_ENABLED=false lämnar dagens Hem pixel-identiskt.
   ═══════════════════════════════════════════════════════════════ */

/* ── Greet ───────────────────────────────────────────────────── */
body.app-ev .hem-ev-greet__date {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-2);
}
body.app-ev .hem-ev-greet h2 {
  margin-top: var(--s-1);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 440;
  color: var(--text-1);
}
body.app-ev .hem-ev-greet h2 em {
  font-style: italic;
  color: var(--ev-mint-deep);
  font-weight: 480;
}
body.app-ev .hem-ev-greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
body.app-ev .hem-ev-greet__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-shrink: 0;
}
/* Bell-slot: renderNotificationBell() renderar in en .monitor-bell här.
   Samma fix som css/components/top-bar.css .top-bar__bell — monitor.css
   ger klockan position: absolute; top: 42px; right: var(--s-5) (avsedd
   för wealth-card-läget). Utan reset hamnar klockan ~42px under sloten
   och den tomma spannen kollapsar till 0x0 i flex-raden. */
body.app-ev .hem-ev-greet__bell {
  display: inline-flex;
  align-items: center;
  position: relative;
}
body.app-ev .hem-ev-greet__bell .monitor-bell {
  position: static;
}
@media (pointer: coarse) {
  body.app-ev .hem-ev-greet__bell .monitor-bell.tap-target {
    position: relative;
    top: auto;
    right: auto;
  }
}
body.app-ev .hem-ev-greet__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--ev-ink);
  color: var(--ev-paper);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform var(--dur-fast);
}
body.app-ev .hem-ev-greet__avatar:active { transform: scale(0.92); }

/* ── Ink-hero ────────────────────────────────────────────────── */
/* Ink-hero — prototypens tre bakgrundslager + korn + skugga (proto 315–334).
   ::before-radialen (etapp 3) togs bort: den dubblade den gröna radialen som
   nu ingår direkt i background-stacken nedan. */
body.app-ev .hem-ev-hero {
  position: relative;
  background:
    radial-gradient(140% 120% at 85% -20%, rgba(46, 189, 133, 0.22), transparent 55%),
    radial-gradient(120% 100% at -10% 110%, rgba(201, 162, 75, 0.14), transparent 50%),
    linear-gradient(160deg, #102E24, var(--ev-ink) 70%);
  border-radius: 28px;
  padding: 26px 24px 20px;
  box-shadow: var(--ev-shadow-ink);
  overflow: hidden;
}
body.app-ev .hem-ev-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}
body.app-ev .hem-ev-hero > * { position: relative; }
body.app-ev .hem-ev-hero__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, 0.55);
}
body.app-ev .hem-ev-hero .hem-hero__value {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #fff;
  margin-top: var(--s-1);
  font-variant-numeric: tabular-nums;
}
body.app-ev .hem-ev-hero .hem-hero__value .kr {
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: rgba(250, 248, 242, 0.6);
  margin-left: 2px;
}
body.app-ev .hem-ev-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  background: rgba(46, 189, 133, 0.16);
  color: var(--ev-mint);
}
body.app-ev .hem-ev-pill.is-loss {
  background: rgba(226, 87, 75, 0.16);
  color: var(--ev-loss);
}
body.app-ev .hem-ev-pill__icon { flex-shrink: 0; display: block; }
body.app-ev .hem-ev-pill .muted {
  color: rgba(250, 248, 242, 0.5);
  font-weight: 500;
}
body.app-ev .hem-ev-hero__spark { height: 64px; margin: 14px -4px 0; }
body.app-ev .hem-ev-hero__spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
body.app-ev .hem-ev-spark-line {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 0.5s var(--ease-spring);
}
body.app-ev .hem-ev-spark-area { opacity: 0.9; transition: d 0.5s var(--ease-spring); }
body.app-ev .hem-ev-spark-dot { fill: var(--ev-mint); }
body.app-ev .hem-ev-spark-dot-halo {
  fill: var(--ev-mint);
  opacity: 0.25;
  animation: hem-ev-spark-halo 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes hem-ev-spark-halo {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(2.1); opacity: 0.06; }
}
body.app-ev .hem-ev-seg {
  display: flex;
  gap: 4px;
  margin-top: var(--s-4);
  padding: 4px;
  background: rgba(250, 248, 242, 0.08);
  border-radius: 999px;
}
body.app-ev .hem-ev-seg__btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--ev-txt-dark-2);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-normal), color var(--dur-normal);
}
body.app-ev .hem-ev-seg__btn.active {
  background: var(--ev-paper);
  color: var(--ev-ink);
}
body.app-ev .hem-hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: var(--s-4);
  padding: var(--s-3) 0 var(--s-1);
  border-top: 1px solid var(--ev-line-dark);
}
body.app-ev .hem-hero__split .split-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 var(--s-3);
  text-align: left;
}
body.app-ev .hem-hero__split .split-cell:first-child { padding-left: 0; }
body.app-ev .hem-hero__split .split-cell + .split-cell {
  border-left: 1px solid var(--ev-line-dark);
}
body.app-ev .hem-hero__split .sc-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ev-txt-dark-2);
}
body.app-ev .hem-hero__split .sc-val {
  font-family: var(--font-display);
  font-size: 16.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Duo-grid: hälsa + "Sapiax föreslår" ─────────────────────── */
body.app-ev .hem-ev-duo {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 12px;
}
body.app-ev .hem-ev-health {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
body.app-ev .hem-ev-health h3 { font-size: 13px; font-weight: 700; color: var(--text-1); }
body.app-ev .hem-ev-health .health-ring-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
}
body.app-ev .hem-ev-health .health-ring { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
body.app-ev .hem-ev-health .health-ring svg { transform: rotate(-90deg); }
body.app-ev .hem-ev-health .hr-track { fill: none; stroke: var(--ev-paper-2); stroke-width: 6; }
body.app-ev .hem-ev-health .hr-fill {
  fill: none;
  stroke: var(--ev-mint);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 195.4;
  transition: stroke-dashoffset 1.1s var(--ease-spring);
}
body.app-ev .hem-ev-health .hr-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-1);
}
body.app-ev .hem-ev-health p { font-size: 12px; color: var(--text-2); line-height: 1.45; margin-top: 10px; }
body.app-ev .hem-ev-ai {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: linear-gradient(150deg, #FFFDF6, #FBF6E9);
  border: 1px solid rgba(201, 162, 75, 0.35);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  cursor: pointer;
  transition: transform var(--dur-fast);
}
body.app-ev .hem-ev-ai:active { transform: scale(0.98); }
body.app-ev .hem-ev-ai__who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ev-gold);
}
body.app-ev .hem-ev-ai p {
  font-size: 13px;
  color: var(--ev-ink);
  line-height: 1.5;
  flex: 1;
}
body.app-ev .hem-ev-ai p strong { font-weight: 700; }
body.app-ev .hem-ev-ai__ask {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #1F5E66;
}

/* ── Rec-kort (EV-variant) ────────────────────────────────────── */
body.app-ev .hem-rec--ev {
  flex: 0 0 246px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--ev-shadow-card);
}
body.app-ev .hem-rec__avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ev-paper);
}
body.app-ev .hem-rec__avatar--azn   { background: #6E4B9E; }
body.app-ev .hem-rec__avatar--msft  { background: #1F5E66; }
body.app-ev .hem-rec__avatar--volvb { background: #2E6644; }
body.app-ev .hem-rec__avatar--ericb { background: #8A6D3B; }
body.app-ev .hem-rec__badge--buy { background: var(--ev-mint-wash); color: var(--ev-mint-deep); }
body.app-ev .hem-rec__badge--watch { background: var(--ev-gold-wash); color: #9A7A2E; }
body.app-ev .hem-rec--ev .conf { display: flex; align-items: baseline; gap: 6px; }
body.app-ev .hem-rec--ev .conf-num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
body.app-ev .hem-rec--ev .conf-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
body.app-ev .hem-rec--ev .conf-bar {
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--ev-paper-2);
  overflow: hidden;
}
body.app-ev .hem-rec--ev .conf-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ev-mint); }
body.app-ev .hem-rec--ev .conf-bar.watch i { background: var(--ev-gold); }

/* ── Marknadsrad ─────────────────────────────────────────────── */
body.app-ev .hem-ev-mkt__row {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  margin: var(--s-3) -20px 0;
  padding: 0 20px 2px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body.app-ev .hem-ev-mkt__row::-webkit-scrollbar { display: none; }
body.app-ev .hem-ev-mkt-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
body.app-ev .hem-ev-mkt-pill .name { color: var(--ev-ink); }
body.app-ev .hem-ev-mkt-pill .up { color: var(--ev-mint-deep); }
body.app-ev .hem-ev-mkt-pill .down { color: var(--ev-loss); }
body.app-ev .hem-ev-mkt-pill .flat { color: var(--ev-ink-40); font-weight: 700; }

/* ── Delad label-stil (Rekommendationer / Marknaden nu) ──────── */
body.app-ev .hem-ev-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
body.app-ev .hem-ev-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-3);
}
body.app-ev .hem-ev-block__link {
  background: none;
  border: none;
  color: var(--ev-mint-deep);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
body.app-ev .hem-ev-mkt .hem-ev-label { display: block; }

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration 0.01ms på *) — inget filspecifikt guard-block behövs här. */

/* ── Mobil: marknadsraden får inte spilla utanför dokumentet ────
   Desktop (viewport > 430px) opåverkad — #app-kolumnen är 430px
   men dokumentet är bredare, så läckan syns bara på riktiga mobiler. */
@media (max-width: 430px) {
  body.app-ev .hem-ev-mkt__row {
    margin-left: calc(-1 * var(--s-4));
    margin-right: calc(-1 * var(--s-4));
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }
}

/* ── Smala telefoner: hero-splitens tre celler får radbrytas ──── */
@media (max-width: 360px) {
  body.app-ev .hem-hero__split {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--s-3);
  }
  body.app-ev .hem-hero__split .split-cell:nth-child(3) {
    border-left: none;
    padding-left: 0;
  }
}

/* Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px */
@media (max-width: 430px) {
  .hem-rec__name { font-size: 12px; }
  .hem-rec__badge { font-size: 11px; }
  body.app-ev .hem-ev-greet__date { font-size: 12px; }
  body.app-ev .hem-ev-hero__label { font-size: 12px; }
  body.app-ev .hem-hero__split .sc-label { font-size: 12px; }
  body.app-ev .hem-rec--ev .conf-label { font-size: 11px; }
}

/* Task C2 — tap-ytor: synlig höjd + centrering, endast under 430px.
   .hem-ev-ai__cta togs bort i Etapp 9 Task 4 (hela .hem-ev-ai-kortet är nu
   klickbart, se hem.js) — ingen ersättningsregel behövs. */
@media (max-width: 430px) {
  body.app-ev .hem-ev-block__link {
    padding-block: var(--s-2);
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── css/pages/portfolio.css ── */
.portfolio-page { padding: var(--s-6) var(--s-4) var(--s-4); }

/* ═══════════════════════════════════════════════════════════════
   Insight-redesign (editorial) — scoped .pf-*
   ═══════════════════════════════════════════════════════════════ */

/* ── Header: eyebrow + serif-titel ── */
.pf-header { margin-bottom: var(--s-4); }
.pf-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-1);
}
.pf-title {
  font-family: var(--font-display);
  font-size: var(--headline-lg);
  line-height: var(--headline-lg-lh);
  color: var(--text-1);
  margin: 0;
  font-weight: 400;
}

/* ── Hero-kort ── */
.pf-hero {
  position: relative;
  background: linear-gradient(150deg, var(--surface) 0%, var(--accent-subtle) 140%);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--elev-2);
  padding: var(--s-5) var(--s-5) 0;
  margin-bottom: var(--s-4);
  overflow: hidden;
}
.pf-hero__label {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-bottom: var(--s-2);
}
.pf-hero__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.pf-hero__value {
  font-family: var(--font-display);
  font-size: var(--headline-xl);
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pf-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pf-hero__pill.is-gain { color: var(--gain); background: var(--gain-wash); }
.pf-hero__pill.is-loss { color: var(--loss); background: var(--loss-wash); }
.pf-hero__spark {
  margin: var(--s-4) calc(-1 * var(--s-5)) 0;
  height: 56px;
}
.pf-hero__spark svg { width: 100%; height: 100%; display: block; }

/* ── KPI-rad ── */
.pf-kpi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.pf-kpi__card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--s-4);
  overflow: hidden;
}
.pf-kpi__card--neutral { background: var(--surface-container-low); }
.pf-kpi__card--loss    { background: var(--loss-wash); }
.pf-kpi__card--gain    { background: var(--gain-wash); }
.pf-kpi__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}
.pf-kpi__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.pf-kpi__value.gain { color: var(--gain); }
.pf-kpi__value.loss { color: var(--loss); }

/* ── Sektionsrubrik (delas av allokering/innehav) ── */
.pf-section-title {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--s-3);
}

/* ── Allokering ── */
.pf-alloc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.pf-alloc__bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  margin-bottom: var(--s-3);
}
.pf-alloc__seg { height: 100%; }
.pf-alloc__legend {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pf-alloc__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
}
.pf-alloc__dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pf-alloc__name { color: var(--text-2); flex: 1; }
.pf-alloc__pct {
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* ── Dina innehav ── */
.pf-holdings { margin-bottom: var(--s-4); }
.pf-holding-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.pf-holding {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--s-4) var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pf-holding:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: var(--elev-2);
  transform: translateY(-1px);
}
.pf-holding__info { flex: 1; min-width: 0; }
.pf-holding__name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text-1);
  line-height: 1.2;
}
.pf-holding__meta {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 2px;
}
.pf-holding__bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: var(--s-2);
  overflow: hidden;
}
.pf-holding__bar-fill {
  height: 100%;
  border-radius: 2px;
}
.pf-holding__value {
  min-width: 96px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.pf-holding__amount {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.pf-holding__change {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pf-holding__change.gain { color: var(--gain); }
.pf-holding__change.loss { color: var(--loss); }

/* ── Konton (sist) ── */
.pf-accounts { margin-bottom: var(--s-2); }
.pf-accounts__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

@media (max-width: 560px) {
  .pf-kpi { grid-template-columns: 1fr; }
  .pf-hero__value { font-size: var(--headline-lg); }
}

.holding-list { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-6); }

/* ── Delta indicator ── */
.holding-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  align-self: flex-end;
}
.holding-delta.is-gain {
  color: var(--gain);
  background: color-mix(in srgb, var(--gain) 10%, transparent);
}
.holding-delta.is-loss {
  color: var(--loss);
  background: color-mix(in srgb, var(--loss) 10%, transparent);
}

.holding-item {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.holding-item:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: var(--shadow-sm);
}

.holding-logo {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}

.holding-info { flex: 1; }
.holding-name { font-weight: 600; font-size: 14px; }
.holding-ticker { font-size: 12px; color: var(--text-2); }

.holding-value {
  min-width: 92px;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.holding-value__amount {
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.holding-value__change {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.holding-signal {
  --signal-bg: rgba(107, 114, 128, 0.1);
  --signal-border: rgba(107, 114, 128, 0.3);
  --signal-color: var(--neutral);
  appearance: none;
  border: 1px solid var(--signal-border);
  background: var(--signal-bg);
  color: var(--signal-color);
  border-radius: 999px;
  min-height: 24px;
  padding: 3px 8px 3px 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 34%, transparent);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.holding-signal i {
  font-size: 12px;
  line-height: 1;
}

.holding-signal:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 45%, transparent), 0 4px 10px rgba(18, 38, 40, 0.08);
}

.holding-signal:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--signal-color) 68%, transparent);
  outline-offset: 2px;
}

.holding-signal--buy {
  --signal-bg: rgba(34, 197, 94, 0.13);
  --signal-border: rgba(34, 197, 94, 0.38);
  --signal-color: #13733B;
}

.holding-signal--hold {
  --signal-bg: rgba(245, 158, 11, 0.14);
  --signal-border: rgba(245, 158, 11, 0.44);
  --signal-color: #8A5A00;
}

.holding-signal--reduce {
  --signal-bg: rgba(245, 158, 11, 0.2);
  --signal-border: rgba(217, 119, 6, 0.5);
  --signal-color: #A24E08;
}

.holding-signal--sell {
  --signal-bg: rgba(239, 68, 68, 0.12);
  --signal-border: rgba(239, 68, 68, 0.42);
  --signal-color: #B42318;
}

[data-theme="dark"] .holding-signal {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .holding-signal--buy {
  --signal-bg: rgba(34, 197, 94, 0.16);
  --signal-border: rgba(34, 197, 94, 0.42);
  --signal-color: #6EE7A0;
}

[data-theme="dark"] .holding-signal--hold {
  --signal-bg: rgba(245, 158, 11, 0.16);
  --signal-border: rgba(245, 158, 11, 0.45);
  --signal-color: #FBBF24;
}

[data-theme="dark"] .holding-signal--reduce {
  --signal-bg: rgba(245, 158, 11, 0.18);
  --signal-border: rgba(245, 158, 11, 0.48);
  --signal-color: #FDBA74;
}

[data-theme="dark"] .holding-signal--sell {
  --signal-bg: rgba(239, 68, 68, 0.16);
  --signal-border: rgba(239, 68, 68, 0.46);
  --signal-color: #FCA5A5;
}

/* Bar-stil för Clarity */
.holding-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.holding-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}

.holding-logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.holding-logo-mark--image {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  padding: 3px;
  overflow: hidden;
}

.holding-logo-mark--full {
  padding: 0;
}

.holding-logo-mark--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.holding-logo-mark--icon {
  font-size: 18px;
}

.portfolio-data-status {
  width: fit-content;
  margin: calc(-1 * var(--s-3)) 0 var(--s-4);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}

.portfolio-data-status--demo {
  color: var(--warning);
  background: rgba(245, 158, 11, 0.1);
}

.portfolio-data-status--live {
  color: var(--gain);
  background: rgba(34, 197, 94, 0.1);
}

/* ── Portfolio Analytics Panel ──────────────────────────── */
.portfolio-analytics-section { margin-top: var(--s-6); }

.pa-panel { display: flex; flex-direction: column; gap: var(--s-4); }

.pa-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

@media (max-width: 600px) {
  .pa-section-grid { grid-template-columns: 1fr; }
}

.pa-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}

.pa-card--center { text-align: center; }

.pa-card-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin: 0 0 var(--s-3);
}

/* Exposure bars */
.pa-bar-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

.pa-bar-label {
  width: 96px;
  font-size: var(--text-sm);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pa-bar-track {
  flex: 1;
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
}

.pa-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.pa-bar-value {
  width: 40px;
  text-align: right;
  font-size: var(--text-sm);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* Diversity gauge */
.pa-gauge-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.pa-gauge-svg { width: 100px; height: 54px; }

.pa-gauge-center {
  margin-top: -8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pa-gauge-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-1);
  line-height: 1;
}

.pa-gauge-label { font-size: var(--text-xs); color: var(--text-2); }

/* Risk metrics */
.pa-metric-list { display: flex; flex-direction: column; gap: var(--s-2); }

.pa-metric { display: flex; justify-content: space-between; align-items: center; }
.pa-metric-label { font-size: var(--text-sm); color: var(--text-2); }
.pa-metric-value { font-size: var(--text-sm); color: var(--text-1); font-variant-numeric: tabular-nums; }
.pa-metric-sub   { font-size: var(--text-xs); color: var(--text-2); margin-left: 4px; }
.pa-negative     { color: var(--negative); }

/* Valuation section */
.pa-valuation-section { margin-top: var(--s-4); }

.pa-valuation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.pa-valuation-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
}

.pa-val-holding-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--s-2);
}

.pa-valuation-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pa-valuation-na {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-style: italic;
}

.pa-val-row { display: flex; justify-content: space-between; align-items: center; }
.pa-val-label { font-size: var(--text-xs); color: var(--text-2); }
.pa-val-value { font-size: var(--text-sm); color: var(--text-1); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Etapp 5 Task 5.1 (Portfölj: donut + rader)
   Nytt block, scopat under body.app-ev. Flaggan APP_EVERGREEN_ENABLED=false
   lämnar dagens .pf-alloc/.pf-holding pixel-identiska (portfolio.js renderar
   den gamla markupen oförändrad när flaggan är av).
   ═══════════════════════════════════════════════════════════════ */

/* ── Donut + allokeringslista (ersätter .pf-alloc-stapeln) ────────── */
body.app-ev .pf-ev-donut-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-1);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
body.app-ev .pf-ev-donut-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
body.app-ev .pf-ev-donut {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  flex-shrink: 0;
}
body.app-ev .pf-ev-donut::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--surface);
}
body.app-ev .pf-ev-donut__center {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  text-align: center;
}
body.app-ev .pf-ev-donut__center b {
  font-family: var(--font-display);
  font-weight: 440;
  font-size: 13px;
  line-height: 1.15;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.app-ev .pf-ev-donut__center span {
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-txt-2);
}
body.app-ev .pf-ev-alloc-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
body.app-ev .pf-ev-alloc-list__row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 12.5px;
  font-weight: 600;
}
body.app-ev .pf-ev-alloc-list__dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
body.app-ev .pf-ev-alloc-list__name {
  flex: 1;
  min-width: 0;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.app-ev .pf-ev-alloc-list__pct {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  body.app-ev .pf-ev-donut-row { gap: var(--s-4); }
}

/* ── Innehavsrader (Dina innehav): vit yta + 40×40 logo-chip ───────── */
body.app-ev .pf-holding {
  background: #fff;
  border-radius: var(--r-md);
}
body.app-ev .pf-holding .holding-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
}
body.app-ev .holding-logo-mark--fallback {
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
}

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration 0.01ms på *) — inget filspecifikt guard-block behövs här. */

/* ═══════════════════════════════════════════════════════════════════
   EVERGREEN & IVORY — Etapp 7: Portfölj-uplift (bakom APP_EVERGREEN_ENABLED)
   Ink-hero med KPI-split (speglar .hem-ev-hero, css/pages/hem.css) + EV-rader.
   ═══════════════════════════════════════════════════════════════════ */
body.app-ev .pf-ev-hero {
  position: relative;
  background: var(--ev-ink);
  border-radius: var(--r-xl);
  padding: 24px 22px 18px;
  overflow: hidden;
}
body.app-ev .pf-ev-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 15%, rgba(46, 189, 133, 0.22), transparent 55%);
  pointer-events: none;
}
body.app-ev .pf-ev-hero > * { position: relative; }
body.app-ev .pf-ev-hero__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-txt-dark-2);
}
body.app-ev .pf-ev-hero__value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 380;
  line-height: 1.1;
  color: #fff;
  margin-top: var(--s-1);
}
body.app-ev .pf-ev-hero__delta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
body.app-ev .pf-ev-hero__delta-pct { font-size: 12.5px; color: var(--ev-txt-dark-2); }
body.app-ev .pf-ev-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.app-ev .pf-ev-pill.is-gain { background: rgba(46, 189, 133, 0.18); color: var(--ev-mint); }
body.app-ev .pf-ev-pill.is-loss { background: rgba(226, 87, 75, 0.16); color: var(--ev-loss); }
body.app-ev .pf-ev-pill__icon { flex-shrink: 0; }
body.app-ev .pf-ev-hero__spark { height: 52px; margin: var(--s-4) 0 0; }
body.app-ev .pf-ev-hero__spark svg { width: 100%; height: 100%; display: block; }
body.app-ev .pf-ev-hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: var(--s-4);
  padding: var(--s-3) 0 var(--s-1);
  border-top: 1px solid var(--ev-line-dark);
}
body.app-ev .pf-ev-hero__split > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 var(--s-3);
}
body.app-ev .pf-ev-hero__split > div:first-child { padding-left: 0; }
body.app-ev .pf-ev-hero__split > div:nth-child(2),
body.app-ev .pf-ev-hero__split > div:nth-child(3) { border-left: 1px solid var(--ev-line-dark); }
body.app-ev .pf-ev-hero__split .k {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ev-txt-dark-2);
}
body.app-ev .pf-ev-hero__split .v {
  font-family: var(--font-display);
  font-size: 16.5px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
body.app-ev .pf-ev-hero__split .v.gain { color: var(--ev-mint); }
body.app-ev .pf-ev-hero__split .v.loss { color: var(--ev-loss); }

/* EV-rad: block-layout med flex i __top (legacy-flexen på .pf-holding gäller ej) */
body.app-ev .pf-holding--ev { display: block; }
body.app-ev .pf-holding__top { display: flex; align-items: center; gap: var(--s-3); }
body.app-ev .pf-holding--ev .pf-holding__info { flex: 1; min-width: 0; }
body.app-ev .pf-holding--ev .pf-holding__value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}
body.app-ev .pf-holding--ev .pf-holding__amount {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
}
body.app-ev .pf-holding--ev .pf-holding__change { font-size: 11.5px; font-weight: 700; }

/* Expanderbara rader (Etapp 7 Task 7.3) — max-height-mönstret från bevakning */
body.app-ev .pf-holding--ev:not(.pf-holding--static) { cursor: pointer; }
body.app-ev .pf-holding__chevron {
  flex: none;
  color: var(--text-2);
  transition: transform 0.25s ease;
}
body.app-ev .pf-holding--ev.is-open .pf-holding__chevron { transform: rotate(180deg); }
body.app-ev .pf-holding__detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
body.app-ev .pf-holding--ev.is-open .pf-holding__detail { max-height: 360px; }
body.app-ev .pf-holding__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-top: var(--s-3);
}
body.app-ev .pf-holding__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ev-paper-2);
  border-radius: var(--r-sm);
  padding: 8px 10px;
}
body.app-ev .pf-holding__stat .k {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
body.app-ev .pf-holding__stat .v {
  font-family: var(--font-display);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
body.app-ev .pf-holding__stat .v.gain { color: var(--ev-mint-deep); }
body.app-ev .pf-holding__stat .v.loss { color: var(--ev-loss); }
body.app-ev .pf-holding__facts { margin-top: var(--s-3); font-size: 12px; color: var(--text-2); }
body.app-ev .pf-holding__weight {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
body.app-ev .pf-holding__weight .pf-holding__bar { flex: 1; }
body.app-ev .pf-holding__weight span { font-size: 11px; color: var(--text-2); white-space: nowrap; }
body.app-ev .pf-holding__actions {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-3) 0 var(--s-1);
}
body.app-ev .pf-holding__action {
  flex: 1;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-1);
  cursor: pointer;
}
body.app-ev .pf-holding__action--primary {
  background: var(--ev-mint-deep);
  border-color: var(--ev-mint-deep);
  color: var(--on-accent);
}

@media (prefers-reduced-motion: reduce) {
  body.app-ev .pf-holding__chevron,
  body.app-ev .pf-holding__detail {
    transition: none !important;
  }
}

/* Sortering (Etapp 7 Task 7.4) */
body.app-ev .pf-ev-holdings__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
body.app-ev .pf-ev-sort {
  border: 0;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
body.app-ev .pf-ev-sort b { color: var(--accent); }

/* ── css/pages/intelligence.css ── */
.intelligence-page { padding: var(--s-5) var(--s-4) var(--s-6); max-width: 720px; margin: 0 auto; }

/* Statband */
.intel-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--glow-card, none);
  overflow: hidden; margin-bottom: var(--s-4);
}
.intel-stats__cell { padding: 12px 6px 10px; text-align: center; }
.intel-stats__cell + .intel-stats__cell { border-left: 1px solid var(--border); }
.intel-stats__cell b { font-family: var(--font-display); font-size: 22px; font-weight: 500; display: block; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--text-1); }
.intel-stats__cell b.is-gain { color: var(--gain); }
.intel-stats__cell b.is-warn { color: var(--warning); }
.intel-stats__cell span { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
@media (max-width: 400px) {
  .intel-stats { grid-template-columns: repeat(2, 1fr); }
  .intel-stats__cell:nth-child(odd) { border-left: none; }
  .intel-stats__cell:nth-child(n+3) { border-top: 1px solid var(--border); }
}

/* Fokus-block (intel-focus-kontraktet) */
.intel-focus { margin-bottom: var(--s-4); padding: var(--s-4); background: var(--accent-subtle); border: 1px solid var(--accent); border-radius: var(--r-md); }
.intel-focus__label { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); }
.intel-focus__empty { font-size: 13px; color: var(--text-2); margin: 0; }
.intel-focus .sig-card { margin: 0; }

/* Sticky filterräls — top-baren är sticky 56px hög (css/components/top-bar.css) */
.intel-rail {
  position: sticky; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 30;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: var(--s-2) 0; margin: 0 calc(-1 * var(--s-4));
  box-shadow: 0 1px 0 var(--border);
}
.intel-rail__row { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); }
.intel-rail__row + .intel-rail__row { margin-top: var(--s-2); }
.intel-rail__scroll { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1; min-width: 0; }
.intel-rail__scroll::-webkit-scrollbar { display: none; }

.intel-seg {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 8px 14px; min-height: 40px;
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  white-space: nowrap; flex: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.intel-seg .n { font-size: 10.5px; font-weight: 800; margin-left: 4px; opacity: 0.55; font-variant-numeric: tabular-nums; }
.intel-seg[aria-pressed="true"] { background: var(--text-1); border-color: var(--text-1); color: var(--bg); }
.intel-seg[aria-pressed="true"] .n { color: var(--accent-light); opacity: 1; }

.intel-chip {
  border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 6px 12px; min-height: 40px;
  font-size: 11.5px; font-weight: 700; color: var(--text-2);
  white-space: nowrap; flex: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.intel-chip[aria-pressed="true"] { background: var(--text-1); border-color: var(--text-1); color: var(--bg); }

.intel-viewtog { flex: none; display: flex; background: color-mix(in srgb, var(--text-2) 8%, transparent); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.intel-viewtog button { border: none; background: none; border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; color: var(--text-2); cursor: pointer; transition: background 0.2s, color 0.2s; }
.intel-viewtog button[aria-pressed="true"] { background: var(--surface); color: var(--text-1); box-shadow: var(--glow-card, 0 1px 2px rgba(0,0,0,0.06)); }

.intel-sort { flex: none; position: relative; display: flex; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; min-height: 40px; padding: 0 10px; }
.intel-sort select { appearance: none; -webkit-appearance: none; border: none; background: none; font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--text-1); padding-right: 14px; cursor: pointer; max-width: 96px; }
.intel-sort::after { content: ''; position: absolute; right: 10px; width: 6px; height: 6px; border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg) translateY(-2px); pointer-events: none; }

/* Vyer */
.intel-signals { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-4); }
@media (min-width: 720px) { .intel-signals { display: grid; grid-template-columns: 1fr 1fr; align-items: start; } }
.intel-radar-view { padding-top: var(--s-4); }

.intel-empty { grid-column: 1 / -1; text-align: center; padding: var(--s-8) var(--s-4); color: var(--text-2); font-size: 13.5px; }
.intel-empty__reset { margin-top: var(--s-3); border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 12.5px; color: var(--text-1); cursor: pointer; min-height: 40px; }

/* Radarvyn */
.sig-radar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-4) var(--s-3) var(--s-2); }
.sig-radar__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; padding: 0 6px 8px; }
.sig-radar__title { font-family: var(--font-display); font-size: 16px; color: var(--text-1); }
.sig-radar__legend { display: flex; gap: 12px; font-size: 10.5px; font-weight: 700; color: var(--text-2); flex-wrap: wrap; }
.sig-radar__legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.sig-radar__svg { width: 100%; height: auto; display: block; }
.sig-radar__grid { stroke: color-mix(in srgb, var(--text-2) 10%, transparent); stroke-width: 1; }
.sig-radar__axis { font-size: 9.5px; fill: var(--text-2); font-family: var(--font-ui); font-weight: 700; }
.sig-radar__dot { cursor: pointer; }
.sig-radar__dot circle:last-of-type { stroke: var(--surface); stroke-width: 2; }
.sig-radar__dot text { font-size: 9.5px; font-weight: 800; fill: var(--text-1); text-anchor: middle; pointer-events: none; font-family: var(--font-ui); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.sig-radar__hint { text-align: center; font-size: 11px; color: var(--text-2); padding: 8px 0 4px; }

/* Bottom-nav-frigång (bevarad från tidigare version, Task C5): den flytande
   nav-baren tar upp --nav-height + safe-area i botten — lyft sidans
   bottenpadding så sista signalkortet aldrig hamnar under den. */
@media (max-width: 430px) {
  .intelligence-page {
    padding-bottom: calc(var(--nav-height) + var(--s-4) + env(safe-area-inset-bottom));
  }
}

/* ── css/pages/goals.css ── */
/* ─── Page + hero ─────────────────────────────────────────────── */
.goals-page { padding: var(--s-5) var(--s-4) var(--s-4); }

.goals-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.goals-hero__title {
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.1;
  color: var(--text-1);
  letter-spacing: -0.01em;
}

/* Primary "Nytt mål" button (teal, rounded) */
.goals-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.goals-add-btn:hover { background: var(--accent-mid); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.goals-add-btn:active { transform: translateY(0); }
.goals-add-btn i { font-size: 17px; }

/* ─── Goal card ───────────────────────────────────────────────── */
.goal-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--s-4);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.goal-card:hover { box-shadow: var(--shadow-md); }

/* Subtle success hue for completed goals */
.goal-card.goal-completed { border-color: rgba(34, 197, 94, 0.28); }
.goal-card.goal-completed::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(34, 197, 94, 0.07), transparent 55%);
  pointer-events: none;
}
.goal-card > * { position: relative; z-index: 1; }

/* ─── Header ──────────────────────────────────────────────────── */
.goal-card__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  cursor: pointer;
}

/* Icon circle */
.goal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.goal-completed .goal-icon {
  background: var(--gain);
  color: #fff;
}

.goal-card__meta { flex: 1; min-width: 0; }
.goal-card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--text-1);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.goal-card__deadline {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* "Uppnått" badge for completed */
.goal-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gain);
  margin-top: 3px;
}

/* Expand chevron (keep — indicates detail panel) */
.goal-card__chevron {
  color: var(--text-2);
  font-size: 17px;
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-spring);
}
.goal-card.is-expanded .goal-card__chevron { transform: rotate(180deg); }

/* ─── Kebab menu ──────────────────────────────────────────────── */
.goal-card__menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  padding: var(--s-1);
  border-radius: var(--r-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.goal-card__menu-btn:hover { color: var(--text-1); background: var(--surface-3); }
.goal-card__menu-btn.is-open { color: var(--text-1); background: var(--surface-3); }

.goal-card__menu {
  position: absolute;
  top: calc(var(--s-5) + 30px);
  right: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 168px;
  z-index: var(--z-dropdown);
  padding: var(--s-1);
  animation: aicfo-menu-in var(--dur-fast) var(--ease-out) both;
}
@keyframes aicfo-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.goal-card__menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-1);
  transition: background var(--dur-fast);
}
.goal-card__menu-item:hover { background: var(--surface-elevated); }
.goal-card__menu-item--danger { color: var(--loss); }
.goal-card__menu-item--danger:hover { background: rgba(239, 68, 68, 0.08); }
.goal-card__menu-item i { font-size: 16px; }

/* ─── Balance row (Stitch hierarchy) ──────────────────────────── */
.goal-card__balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.goal-card__current {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.goal-completed .goal-card__current { color: var(--text-1); }
.goal-card__target {
  font-size: 12px;
  color: var(--text-2);
  text-align: right;
  white-space: nowrap;
}
.goal-card__target strong { color: var(--text-1); font-weight: 600; }

/* ─── Progress bar ────────────────────────────────────────────── */
.goal-progress-track {
  height: 8px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.goal-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 0.6s var(--ease-out);
}
.goal-completed .goal-progress-fill { background: var(--gain); }

/* ─── Progress meta row (Stitch: ↑ +X kr/mån · %) ─────────────── */
.goal-card__progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.goal-card__contrib {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--accent);
  font-weight: 600;
}
.goal-card__contrib i { font-size: 13px; }
.goal-card__pct { color: var(--text-2); font-weight: 600; }
.goal-completed .goal-card__contrib { color: var(--gain); }

/* ─── Takt status / warning banner ────────────────────────────── */
.goal-card__takt {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font-size: 12px;
  margin-top: var(--s-3);
}
.goal-card__takt--ok { color: var(--gain); }

/* Prominent amber banner when behind schedule (Stitch warning box) */
.goal-card__takt--behind {
  align-items: flex-start;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  color: #8a5210;
  line-height: 1.45;
}
.goal-card__takt--behind i {
  color: var(--warning);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 16px;
}

/* ─── Smooth expand / collapse ─────────────────────────────────── */
.goal-detail-anim {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-spring);
}
.goal-detail-anim > .goal-detail { overflow: hidden; min-height: 0; }
.goal-card.is-expanded .goal-detail-anim { grid-template-rows: 1fr; }

/* ─── Detail panel ─────────────────────────────────────────────── */
.goal-detail {
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.goal-detail__projection-text {
  font-size: 14px;
  color: var(--text-1);
  line-height: 1.55;
}
.goal-detail__projection-hint {
  font-size: 13px;
  color: var(--text-2);
  font-style: italic;
}
.goal-detail__calc-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: var(--s-1);
}
.goal-detail__calc-row { display: flex; align-items: center; gap: var(--s-2); }
.goal-detail__calc-input {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-ui);
  font-size: 14px;
  width: 130px;
}
.goal-detail__calc-input:focus { outline: none; border-color: var(--accent); }
.goal-detail__calc-unit { font-size: 13px; color: var(--text-2); }

/* ─── History bars (Stitch sparkline, senaste 6 mån) ──────────── */
.goal-detail__history { display: flex; flex-direction: column; gap: var(--s-2); }
.goal-detail__history-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.goal-detail__history-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  height: 56px;
}
.goal-detail__history-bar {
  flex: 1;
  min-height: 6px;
  background: var(--accent-light);
  opacity: 0.45;
  border-radius: 3px 3px 0 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.goal-detail__history-bar--current { background: var(--accent); opacity: 1; }
.goal-completed .goal-detail__history-bar { background: var(--gain); }

.goal-detail__milestone-wrap { position: relative; }
.goal-detail__milestone-track {
  position: relative;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: visible;
}
.goal-detail__milestone-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.goal-completed .goal-detail__milestone-fill { background: var(--gain); }
.goal-detail__milestone-tick {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 16px;
  background: var(--surface);
  transform: translateX(-50%);
  border-radius: 1px;
}
.goal-detail__milestone-tick--passed { background: var(--accent); opacity: 0.6; }
.goal-detail__milestone-labels { position: relative; height: 20px; margin-top: var(--s-1); }
.goal-detail__milestone-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-2);
  white-space: nowrap;
}
.goal-detail__actions { display: flex; flex-direction: column; gap: var(--s-2); }

/* ─── Inspiration / suggested goals (Stitch list cards) ───────── */
.goals-inspiration { margin-top: var(--s-6); }
.goals-inspiration__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 var(--s-3);
}
.goals-inspiration__list { display: flex; flex-direction: column; gap: var(--s-2); }
.goals-inspiration__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-ui);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.goals-inspiration__item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.goals-inspiration__icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.goals-inspiration__item:hover .goals-inspiration__icon-circle {
  background: var(--accent);
  color: #fff;
}
.goals-inspiration__text { flex: 1; min-width: 0; }
.goals-inspiration__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
}
.goals-inspiration__sub { font-size: 12px; color: var(--text-2); }
.goals-inspiration__arrow {
  color: var(--text-2);
  font-size: 18px;
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.goals-inspiration__item:hover .goals-inspiration__arrow {
  color: var(--accent);
  transform: translateX(3px);
}

/* ─── Template picker overlay ─────────────────────────────────── */
.goal-template-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.goal-template-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  width: min(480px, 92vw);
  box-shadow: var(--shadow-lg);
  animation: aicfo-scale-in var(--dur-normal) var(--ease-spring) both;
}
.goal-template-box__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-5);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.goal-template-box__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  padding: var(--s-1);
  border-radius: var(--r-sm);
}
.goal-template-box__close:hover { color: var(--text-1); }
.goal-template-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.goal-template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4) var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  background: none;
  font-family: var(--font-ui);
  transition: border-color 0.15s, background 0.15s;
}
.goal-template-card:hover { border-color: var(--accent); background: var(--accent-subtle); }
.goal-template-card__icon { font-size: 26px; color: var(--accent); }
.goal-template-card__label { font-size: 13px; font-weight: 500; color: var(--text-1); }
.goal-template-card__amount { font-size: 11px; color: var(--text-2); }

/* ─── Edit / add goal form ────────────────────────────────────── */
.goal-form { display: flex; flex-direction: column; gap: var(--s-2); }
.goal-form__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
.goal-form__input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-ui);
  font-size: 14px;
}
.goal-form__input:focus { outline: none; border-color: var(--accent); }
.goal-form__row { display: flex; gap: var(--s-2); }

/* ─── AI analysis card ────────────────────────────────────────── */
.goals-ai-section { margin-top: var(--s-6); }
.goals-ai-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}
.goals-ai-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-1);
  margin-bottom: var(--s-3);
}
.goals-ai-header i { color: var(--accent); font-size: 20px; }
.goals-ai-text { font-size: 14px; color: var(--text-1); line-height: 1.55; margin: 0 0 var(--s-3); }
.goals-ai-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.goals-ai-row {
  display: flex;
  gap: var(--s-3);
  font-size: 13px;
  line-height: 1.5;
}
.goals-ai-label {
  flex-shrink: 0;
  width: 80px;
  font-weight: 600;
  color: var(--text-2);
}
.goals-ai-row > span:last-child { color: var(--text-1); }
.goals-ai-action {
  background: var(--accent-subtle);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-1);
}
.goals-ai-action .goals-ai-label { color: var(--accent); }
.goals-ai-card--error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: 14px;
  padding: var(--s-4);
}
.goals-ai-card--error i { color: var(--loss); font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Etapp 9 Task 7 (Mål)
   Prototypens målkort (proto rad 1206–1324): procent-header, guldbar för
   avklarade mål, dashed nytt-mål-ruta och inspirationslista. Ersätter
   Etapp 4 Task 4.2:s goals-sum/goal-card__pct/goal-progress-*-komposition
   (retirerad i EV-grenen, se js/pages/goals.js renderEvergreenGoals).
   Nytt block, scopat under body.app-ev. Legacy-reglerna ovan är ORÖRDA.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kortyta (vit, hårlinje, mjuk skugga) — kort-radius 20px matchar
   proto --r-card; body.app-ev sätter om --r-xl till 28px (se
   css/app-evergreen.css) så tokenen kan inte återanvändas här. ────── */
body.app-ev .goal-card {
  background: #fff;
  border: 1px solid var(--ev-hairline);
  border-radius: 20px;
  padding: 19px;
  box-shadow: var(--ev-shadow-card);
  /* Task 6: hela kortet är klickbart (öppnar detalj-sheeten) — ersätter
     den retirerade kebab-menyn/inline-expansionen. */
  cursor: pointer;
}
/* Fokusstil för tangentbord — samma mönster som EV:s andra klickbara
   kort (body.app-ev .bevakning-holding--ev:focus-visible, se
   css/pages/bevakning.css). */
body.app-ev .goal-card:focus-visible {
  outline: 2px solid var(--ev-mint-deep);
  outline-offset: -2px;
}
/* Legacy-läckan: .goal-card.goal-completed::before (grön diagonal wash,
   rad 62) + border-tinten är oscopade — prototypens avklarade kort har
   ingen overlay. Klassen .goal-completed behålls (detaljpanelens
   completed-färger hänger på den), bara ytan neutraliseras. */
body.app-ev .goal-card.goal-completed { border-color: var(--ev-hairline); }
body.app-ev .goal-card.goal-completed::before { display: none; }

/* ── Head: ikon-chip + namn/undertext + procent ────────────────── */
body.app-ev .goal-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: 0; /* nollställer legacy .goal-card__header:s margin-bottom (delad klass) */
}
body.app-ev .goal-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--ev-mint-wash);
  color: var(--ev-mint-deep);
  font-size: 20px;
}
body.app-ev .goal-icon.done { background: var(--ev-ink); color: var(--ev-mint); }
body.app-ev .goal-id .g-name { font-size: 15px; font-weight: 700; color: var(--text-1); }
body.app-ev .goal-id .g-sub { font-size: 11.5px; color: var(--ev-ink-40); margin-top: 2px; }
body.app-ev .goal-pct {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
body.app-ev .goal-pct .pctsign { font-size: 13px; font-style: italic; color: var(--ev-ink-40); }

/* ── Progressbar (mint → guld för avklarade mål) ───────────────── */
body.app-ev .goal-track {
  position: relative;
  height: 8px;
  border-radius: 8px;
  background: var(--ev-paper-2);
  margin-top: 15px;
  overflow: hidden;
}
body.app-ev .goal-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--ev-mint-deep), var(--ev-mint));
  transform-origin: left center;
  animation: goals-track-reveal 1s var(--ease-out) 0.25s both;
}
body.app-ev .goal-track.done i { background: linear-gradient(90deg, var(--ev-gold), #E0C070); }
@keyframes goals-track-reveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Sparat/mål-rad ─────────────────────────────────────────────── */
body.app-ev .goal-nums {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ev-ink-40);
  font-variant-numeric: tabular-nums;
}
body.app-ev .goal-nums b { color: var(--text-1); font-weight: 800; }

/* ── Pulsrad: kortets mikroinsikt (.goal-pulse, prototyp rad 171-181/
   661-674) — ersätter ETA-raden/.goal-monthly (Task 6, evGoalPulse i
   js/pages/goals.js). warn = efter plan (guld), good = uppnått/i takt
   (mint); ingen klass = neutral (inget månadssparande satt). Chevronen
   signalerar att hela kortet är klickbart (öppnar detalj-sheeten). ── */
body.app-ev .goal-pulse {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--ev-hairline);
  font-size: 12px;
  color: var(--ev-ink-62);
}
body.app-ev .goal-pulse b { font-weight: 800; }
body.app-ev .goal-pulse.warn b { color: var(--ev-gold-text); }
body.app-ev .goal-pulse.good b { color: var(--ev-mint-deep); }
body.app-ev .goal-pulse .chev { margin-left: auto; color: var(--ev-ink-40); flex-shrink: 0; }

/* ── ETA-rad (.goal-eta/.goal-eta--gold): Task 6 tog bort evEtaHTML ur
   EV-kortet (pulsraden ovan ersätter den) — dessa regler blir därmed
   onåbara under body.app-ev (goalEtaHTML anropas bara av legacy-
   grenen, som aldrig renderar samtidigt som body.app-ev sätts). Lämnas
   orörda: utanför den här taskens scope att sanera, se rapporten. */
body.app-ev .goal-eta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--ev-mint-deep);
}
body.app-ev .goal-eta__icon { flex-shrink: 0; }
body.app-ev .goal-eta--gold {
  color: var(--ev-gold-text);
  background: var(--ev-gold-soft);
  padding: 6px var(--s-3);
  border-radius: var(--r-sm);
  margin-top: var(--s-2);
}

/* ── Dashed "Skapa ett nytt mål" ────────────────────────────────── */
body.app-ev .new-goal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 17px;
  border: 1.5px dashed var(--ev-hairline-strong);
  border-radius: 20px;
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
body.app-ev .new-goal:hover { border-color: var(--ev-mint); background: var(--ev-mint-wash); }
body.app-ev .new-goal .plus {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ev-paper-2);
  color: var(--text-1);
  flex-shrink: 0;
}

/* ── Inspirationslista ("Kom igång med") ───────────────────────── */
/* Vertikal rytm mellan dashed-rutan och "Kom igång med" (prototypens .section-gap). */
body.app-ev .section-gap { margin-top: 26px; }

body.app-ev .inspo-list { margin-top: 4px; }
body.app-ev .inspo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ev-hairline);
  cursor: pointer;
  transition: opacity 0.15s;
}
body.app-ev .inspo:last-child { border-bottom: 0; }
body.app-ev .inspo:active { opacity: 0.6; }
body.app-ev .inspo .i-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--ev-paper-2);
  color: var(--text-2);
  flex-shrink: 0;
}
body.app-ev .inspo .i-name { font-size: 13.5px; font-weight: 700; color: var(--text-1); }
body.app-ev .inspo .i-sub { font-size: 11.5px; color: var(--ev-ink-40); margin-top: 1px; }
body.app-ev .inspo .i-arrow { margin-left: auto; color: var(--ev-ink-40); }

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration -> 0.01ms för allt) — inget extra guard-block behövs här. */

/* ── Smala telefoner: mallgridet i 1 kolumn (delad regel, ej flagg-scopad
   — legacy-mallmodalen återanvänds oförändrad av båda grenarna). ──── */
@media (max-width: 360px) {
  .goal-template-grid { grid-template-columns: 1fr; }
}

/* ── iOS: förhindra fokus-zoom — fält måste vara ≥16px på mobil (delad
   detaljpanel, båda grenarna). ──────────────────────────────────── */
@media (max-width: 430px) {
  .goal-detail__calc-input { font-size: 16px; }
}

/* Mobil typografigolv (juli 2026): ingen synlig text <11px.
   Alla nya Task 7-selektorer ovan (.g-sub, .goal-nums, .goal-monthly,
   .i-sub m.fl.) ligger redan på 11.5px+ — inget nytt override krävs.
   Kvarvarande rader gäller legacy (oförändrade, ej app-ev-scopade). */
@media (max-width: 430px) {
  .goals-inspiration__title { font-size: 12px; }
  /* .eyebrow är global (base.css, --eyebrow-size: 11px, delad av 11 filer) —
     scopas här till Mål-sidan så ingen annan sida påverkas. Renderas bara
     av legacy-grenen sedan Task 7 (EV har ingen eyebrow-header). */
  .goals-page .eyebrow { font-size: 12px; }
  /* Fynd utanför tabellen: milstolpe-etiketterna ("25%", "Halvvägs") var 10px. */
  .goal-detail__milestone-labels span { font-size: 11px; }
}

/* Task C2 — tap-yta: "Nytt mål" ≥36px synlig höjd (legacy-pillen, ej
   app-ev-scopad — EV:s "Nytt mål" är en 40px ev-icon-btn, se ev-chrome.css). */
@media (max-width: 430px) {
  .goals-add-btn { min-height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════
   DETALJ-SHEET — Mål interaktiv djupdykning, Task 2 (openGoalDetail,
   js/pages/goals.js). Portalad till document.body av goal-sheet.js
   (Task 1, css/components/goal-sheet.css äger backdrop/grip/scroll-ram) —
   reglerna nedan stylar bara INNEHÅLLET i .goal-sheet__scroll. Porterar
   docs/prototypes/mal-interaktiva.html rad 235-419 (.d-* → .gd-*) med
   EV-tokens. Scopat under body.app-ev — legacy-grenen är orörd.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero (aktivt mål) ──────────────────────────────────────────── */
body.app-ev .gd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
body.app-ev .gd-head .goal-icon { width: 46px; height: 46px; }
body.app-ev .gd-name {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; color: var(--text-1);
}
body.app-ev .gd-sub { font-size: 12px; color: var(--ev-ink-40); margin-top: 2px; }

body.app-ev .gd-amount { margin-top: 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.app-ev .gd-amount .big {
  font-family: var(--font-display); font-size: 34px; font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
body.app-ev .gd-amount .of { font-size: 12.5px; color: var(--ev-ink-40); font-weight: 600; }

/* ── Milstolpebana: bar med noder ───────────────────────────────── */
body.app-ev .gd-miles { margin-top: 16px; }
body.app-ev .gd-miles-track { position: relative; height: 8px; border-radius: 8px; background: var(--ev-paper-2); }
body.app-ev .gd-miles-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 8px;
  background: linear-gradient(90deg, var(--ev-mint-deep), var(--ev-mint));
  width: 0; transition: width 1s var(--ease-spring) 0.2s;
}
body.app-ev .gd-miles-fill.done { background: linear-gradient(90deg, var(--ev-gold), #E0C070); }
body.app-ev .gd-miles-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ev-hairline-strong); z-index: 1;
}
body.app-ev .gd-miles-node.passed { background: var(--ev-mint-deep); border-color: var(--ev-mint-deep); }
body.app-ev .gd-miles-node.passed::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: #fff;
  transform: scale(0); transition: transform 0.3s var(--ease-spring) 0.9s;
}
body.app-ev .gd-miles-labels { position: relative; height: 16px; margin-top: 7px; }
body.app-ev .gd-miles-labels span {
  position: absolute; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; color: var(--ev-ink-40);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
body.app-ev .gd-miles-labels span.passed { color: var(--ev-mint-deep); }

/* ── "Din bana" (SVG-graf, Task 3: goalChartSVG) ────────────────── */
body.app-ev .gd-chart-wrap { margin-top: 20px; }
body.app-ev .gd-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
body.app-ev .gd-chart-title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ev-ink-40);
}
body.app-ev .gd-chart-legend { display: flex; gap: 12px; font-size: 10.5px; font-weight: 600; color: var(--ev-ink-40); }
body.app-ev .gd-chart-legend i {
  display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--ev-mint-deep);
  vertical-align: middle; margin-right: 4px;
}
body.app-ev .gd-chart-legend .proj i { border-top-style: dashed; border-top-color: var(--ev-ink-40); }
body.app-ev .gd-chart-wrap .goal-path {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid var(--ev-hairline); border-radius: 20px;
}

/* ── What-if-panelen (markup, Task 2 — wiring i Task 4) ─────────── */
body.app-ev .gd-whatif {
  margin-top: 14px; background: #fff; border: 1px solid var(--ev-hairline);
  border-radius: 20px; padding: 16px 17px 18px; box-shadow: var(--ev-shadow-card);
}
body.app-ev .gd-whatif-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ev-ink-40);
}
body.app-ev .gd-whatif-value {
  font-family: var(--font-display); font-size: 27px; font-weight: 500;
  font-variant-numeric: tabular-nums; margin-top: 6px; color: var(--text-1);
}
body.app-ev .gd-whatif-value small {
  font-size: 13px; font-style: italic; color: var(--ev-ink-40); font-family: var(--font-ui); font-weight: 600;
}
body.app-ev .gd-whatif input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; margin-top: 8px; cursor: pointer;
}
body.app-ev .gd-whatif input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, var(--ev-mint-deep) var(--fill, 30%), var(--ev-paper-2) var(--fill, 30%));
}
body.app-ev .gd-whatif input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%; margin-top: -8px;
  background: #fff; border: 2.5px solid var(--ev-mint-deep); box-shadow: 0 3px 10px -2px rgba(11,35,27,0.35);
}
body.app-ev .gd-whatif input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(90deg, var(--ev-mint-deep) var(--fill, 30%), var(--ev-paper-2) var(--fill, 30%));
}
body.app-ev .gd-whatif input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--ev-mint-deep); box-shadow: 0 3px 10px -2px rgba(11,35,27,0.35);
}

/* Verdikt-slot (data-gd-verdict) bär klassen .gd-verdict direkt — Task 4
   fyller innehåll och togglar --good/--warn. Tom slot döljs (annars skulle
   margin/padding rendera en tom pill innan Task 4 landat). */
body.app-ev .gd-verdict:empty { display: none; }
body.app-ev .gd-verdict {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 12px; padding: 10px 12px; border-radius: 14px;
  font-size: 12.5px; line-height: 1.5; font-weight: 600;
}
body.app-ev .gd-verdict svg { flex-shrink: 0; margin-top: 1px; }
body.app-ev .gd-verdict--good { background: var(--ev-mint-wash); color: var(--ev-mint-deep); }
body.app-ev .gd-verdict--warn { background: var(--ev-gold-wash); color: var(--ev-gold-text); }
body.app-ev .gd-verdict b { font-weight: 800; }

/* ── "Vad Sapiax ser" — insikter ─────────────────────────────────── */
body.app-ev .gd-insights { margin-top: 20px; }
body.app-ev .gd-sect-title {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ev-ink-40); margin-bottom: 10px;
}
body.app-ev .gd-insight {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ev-hairline);
}
body.app-ev .gd-insight:last-child { border-bottom: 0; }
body.app-ev .gd-insight-icon {
  width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ev-paper-2); color: var(--ev-ink-62); flex-shrink: 0;
}
body.app-ev .gd-insight-text { font-size: 12.5px; line-height: 1.55; color: var(--ev-ink-62); }
body.app-ev .gd-insight-text b { color: var(--text-1); font-weight: 800; }

/* ── "Sapiax föreslår" (guld-nudge) ──────────────────────────────── */
body.app-ev .gd-rec {
  position: relative;
  background: linear-gradient(150deg, #FFFDF6, #FBF4E4);
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 20px; padding: 17px; margin-top: 18px; overflow: hidden;
}
body.app-ev .gd-rec-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ev-gold);
}
body.app-ev .gd-rec-title {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  margin-top: 8px; letter-spacing: -0.01em; color: var(--text-1);
}
body.app-ev .gd-rec-text { font-size: 12.5px; line-height: 1.55; color: var(--ev-ink-62); margin-top: 6px; }
body.app-ev .gd-rec-text b { color: var(--text-1); font-weight: 800; }
body.app-ev .gd-rec-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.app-ev .gd-rec-opt {
  border: 1px solid rgba(201, 162, 75, 0.5); background: rgba(255,255,255,0.6);
  border-radius: 999px; padding: 7px 13px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--ev-gold-text);
  cursor: pointer; transition: background 0.2s, transform 0.2s var(--ease-spring);
}
body.app-ev .gd-rec-opt:active { transform: scale(0.95); }
body.app-ev .gd-rec-opt:hover { background: var(--ev-gold-wash); }
body.app-ev .gd-rec-opt.applied { background: var(--ev-ink); border-color: var(--ev-ink); color: #fff; }

/* ── Åtgärder (Redigera / Fråga Sapiax / Ta bort) ────────────────── */
body.app-ev .gd-actions { display: flex; gap: 10px; margin-top: 22px; }
body.app-ev .gd-actions button {
  flex: 1; border: none; border-radius: 16px; padding: 15px 16px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.2s var(--ease-spring), opacity 0.2s;
}
body.app-ev .gd-actions button:active { transform: scale(0.97); }
body.app-ev .gd-actions .btn-ink { background: var(--ev-ink); color: #fff; }
body.app-ev .gd-actions .btn-ghost { background: transparent; border: 1px solid var(--ev-hairline-strong); color: var(--text-1); }

body.app-ev .gd-delete {
  display: block; width: 100%; background: none; border: none;
  margin-top: 14px; padding: 8px; font-family: var(--font-ui);
  font-size: 12.5px; font-weight: 700; color: var(--loss); cursor: pointer;
}

/* ── Uppnått mål: firande-hero ───────────────────────────────────── */
body.app-ev .gd-done-hero { text-align: center; padding: 8px 0 4px; }
body.app-ev .gd-done-hero .medal {
  width: 74px; height: 74px; margin: 0 auto; border-radius: 50%;
  background: var(--ev-ink); color: var(--ev-mint);
  display: grid; place-items: center;
  box-shadow: 0 0 0 8px var(--ev-gold-wash), 0 0 0 16px rgba(201,162,75,0.06);
  animation: gd-medal-pop 0.7s var(--ease-spring) 0.25s both;
}
@keyframes gd-medal-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
body.app-ev .gd-done-hero h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin-top: 14px; color: var(--text-1); }
body.app-ev .gd-done-hero p { font-size: 12.5px; color: var(--ev-ink-62); margin-top: 5px; }

/* ═══════════════════════════════════════════════════════════════
   REDIGERA-SHEET — Mål interaktiv djupdykning, Task 5 (openGoalEdit,
   js/pages/goals.js). Design-facit: docs/prototypes/mal-interaktiva.html
   rad 421-507 (.e-* → .ge-*). --paper-raise/--paper-dim finns inte i
   appens tokenset — samma substitution som detalj-sheeten ovan (#fff/
   --ev-paper-2/--ev-hairline-strong, se t.ex. .gd-whatif). Scopat under
   body.app-ev — legacy-grenen (showEditForm) är helt orörd.
   ═══════════════════════════════════════════════════════════════ */

/* Live-förhandsvisning — minikort som återanvänder kortets egna klasser
   (.goal-head/.goal-icon/.goal-pct/.goal-track ovan), bara nedskalade. */
body.app-ev .ge-preview {
  background: #fff;
  border: 1px solid var(--ev-hairline);
  border-radius: 20px;
  padding: 15px 16px;
  box-shadow: var(--ev-shadow-card);
  margin-bottom: 18px;
}
body.app-ev .ge-preview .goal-head .goal-icon { width: 38px; height: 38px; border-radius: 12px; }
body.app-ev .ge-preview .goal-pct { font-size: 20px; }
body.app-ev .ge-preview .goal-track { margin-top: 12px; }
/* Kortets scaleX-inreveal (goals-track-reveal) passar inte en live-uppdaterad
   bredd — ersätts av en ren width-transition (proto: .e-preview .goal-track i). */
body.app-ev .ge-preview .goal-track i { animation: none; transition: width 0.35s var(--ease-spring); }

body.app-ev .ge-consequence {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 11px; font-size: 12px; line-height: 1.5; font-weight: 600;
}
body.app-ev .ge-consequence svg { flex-shrink: 0; margin-top: 1px; }
body.app-ev .ge-consequence.good { color: var(--ev-mint-deep); }
body.app-ev .ge-consequence.warn { color: var(--ev-gold-text); }
body.app-ev .ge-consequence b { font-weight: 800; }

body.app-ev .ge-field { margin-bottom: 16px; }
body.app-ev .ge-label {
  display: block; font-size: 11px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ev-ink-40);
  margin-bottom: 7px;
}
body.app-ev .ge-input-row { display: flex; align-items: center; gap: 8px; }
body.app-ev .ge-input {
  width: 100%; border: 1px solid var(--ev-hairline-strong); border-radius: 14px;
  background: #fff; padding: 13px 14px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text-1);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, box-shadow 0.2s;
}
body.app-ev .ge-input:focus { outline: none; border-color: var(--ev-mint-deep); box-shadow: 0 0 0 3px var(--ev-mint-wash); }
body.app-ev .ge-unit { font-size: 12.5px; font-weight: 700; color: var(--ev-ink-40); flex-shrink: 0; }

/* ── Ikonväljare ─────────────────────────────────────────────────── */
body.app-ev .ge-icons { display: flex; gap: 8px; flex-wrap: wrap; }
body.app-ev .ge-icon-opt {
  width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--ev-hairline-strong);
  background: #fff; color: var(--text-2);
  display: grid; place-items: center; cursor: pointer;
  transition: all 0.2s var(--ease-spring);
}
body.app-ev .ge-icon-opt.sel { background: var(--ev-ink); border-color: var(--ev-ink); color: var(--ev-mint); transform: scale(1.06); }

/* ── Stegknappar (+/− på målbeloppet) ────────────────────────────── */
body.app-ev .ge-step {
  width: 42px; height: 46px; border-radius: 14px; flex-shrink: 0;
  border: 1px solid var(--ev-hairline-strong); background: #fff;
  font-size: 17px; font-weight: 800; color: var(--text-2); cursor: pointer;
  transition: background 0.15s;
}
body.app-ev .ge-step:active { background: var(--ev-paper-2); }

/* ── Snabbchips (deadline) ───────────────────────────────────────── */
body.app-ev .ge-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
body.app-ev .ge-chip {
  border: 1px solid var(--ev-hairline-strong); background: #fff;
  border-radius: 999px; padding: 7px 13px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--text-2);
  cursor: pointer; transition: all 0.2s;
}
body.app-ev .ge-chip.sel { background: var(--ev-mint-wash); border-color: var(--ev-mint-deep); color: var(--ev-mint-deep); }

/* ── Månadssparande-slidern (0-20 000, egen klass eftersom den ligger
   direkt i ett .ge-field och inte i en .gd-whatif-kortyta) ─────────── */
body.app-ev .ge-slider-value {
  font-family: var(--font-display); font-size: 25px; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--text-1);
}
body.app-ev .ge-slider-value small { font-size: 12.5px; font-style: italic; color: var(--ev-ink-40); font-family: var(--font-ui); font-weight: 600; }
body.app-ev .ge-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; margin-top: 8px; cursor: pointer;
}
body.app-ev .ge-field input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px; background: var(--ev-paper-2);
}
body.app-ev .ge-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%; margin-top: -8px;
  background: #fff; border: 2.5px solid var(--ev-mint-deep); box-shadow: 0 3px 10px -2px rgba(11,35,27,0.35);
}
body.app-ev .ge-field input[type="range"]::-moz-range-track {
  height: 8px; border-radius: 8px; background: var(--ev-paper-2);
}
body.app-ev .ge-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--ev-mint-deep); box-shadow: 0 3px 10px -2px rgba(11,35,27,0.35);
}

/* ── Footer-knapparna (data-ge-cancel/data-ge-save) — samma basstil som
   .gd-actions button, men scopade under .goal-sheet__footer eftersom
   footern är en syskon-nod till .goal-sheet__scroll (se goal-sheet.js). ── */
body.app-ev .goal-sheet__footer button {
  flex: 1; border: none; border-radius: 16px; padding: 15px 16px;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.2s var(--ease-spring), opacity 0.2s;
}
body.app-ev .goal-sheet__footer button:active { transform: scale(0.97); }
body.app-ev .goal-sheet__footer .btn-ink { background: var(--ev-ink); color: #fff; }
body.app-ev .goal-sheet__footer .btn-ghost { background: transparent; border: 1px solid var(--ev-hairline-strong); color: var(--text-1); }
body.app-ev .gd-done-hero p b { color: var(--ev-gold-text); font-weight: 800; }

/* ── css/pages/resa.css ── */
.resa-page { max-width: 480px; margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }

.resa-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.resa-back { width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--ev-line); background: #fff; display: grid; place-items: center; color: var(--ev-ink); font-size: 17px; }
.resa-title { font-family: var(--ev-font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; color: var(--ev-ink); }
.resa-sub { font-size: 11.5px; color: var(--ev-txt-2); margin-top: 1px; }

.resa-card { background: #fff; border: 1px solid var(--ev-line); border-radius: var(--r-xl); padding: 18px; box-shadow: var(--ev-shadow-card, 0 10px 30px -14px rgba(11,35,27,0.12)); }
.resa-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-txt-2); margin-bottom: 10px; }

.resa-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--ev-line); border-radius: 14px; background: var(--ev-paper); padding: 11px 14px; margin-bottom: 10px; }
.resa-field input { border: 0; background: transparent; font: 600 15px var(--ev-font-ui); color: var(--ev-ink); width: 100%; outline: none; }
.resa-suffix { font-size: 12.5px; color: var(--ev-txt-2); font-weight: 600; }

.resa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.resa-chip { border: 1px solid var(--ev-line); background: var(--ev-paper); border-radius: 999px; padding: 7px 13px; font: 600 12.5px var(--ev-font-ui); color: var(--ev-ink-2); cursor: pointer; }
.resa-chip.on { background: var(--ev-ink); color: var(--ev-paper); border-color: var(--ev-ink); }

.resa-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resa-step-btn { width: 40px; height: 40px; border-radius: 13px; border: 1px solid var(--ev-line); background: var(--ev-paper); font-size: 19px; font-weight: 600; color: var(--ev-ink-2); cursor: pointer; }
.resa-step-mid { text-align: center; }
.resa-step-mo { font-family: var(--ev-font-display); font-size: 20px; font-weight: 500; color: var(--ev-ink); }
.resa-step-in { font-size: 11.5px; color: var(--ev-txt-2); margin-top: 1px; }

.resa-calc { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; }
.resa-calc-num { font-family: var(--ev-font-display); font-size: 38px; font-weight: 500; letter-spacing: -0.02em; color: var(--ev-ink); }
.resa-calc-unit { font-size: 13px; color: var(--ev-txt-2); font-weight: 600; }
.resa-meter { height: 8px; border-radius: 8px; background: var(--ev-paper-2); overflow: hidden; margin-bottom: 8px; }
.resa-meter i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ev-mint), var(--ev-mint-deep)); transition: width .3s ease; }
.resa-meter.warn i { background: linear-gradient(90deg, var(--ev-gold), var(--ev-gold-text)); }
.resa-meter.over i { background: linear-gradient(90deg, var(--ev-loss), var(--ev-loss-text)); }
.resa-meter-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.resa-meter-txt { font-size: 12px; color: var(--ev-txt-2); }
.resa-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.resa-pill.ok { background: var(--ev-mint-soft); color: var(--ev-mint-deep); }
.resa-pill.warn { background: var(--ev-gold-soft); color: var(--ev-gold-text); }
.resa-pill.over { background: var(--ev-loss-soft); color: var(--ev-loss-text); }
.resa-fixes { display: none; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.resa-fixes.show { display: flex; }
.resa-fix-chip { border: 1px dashed var(--ev-line); background: var(--ev-gold-tint); border-radius: 999px; padding: 7px 13px; font: 600 12px var(--ev-font-ui); color: var(--ev-gold-text); cursor: pointer; }

.resa-bpass { background: #fff; border: 1px solid var(--ev-line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--ev-shadow-card, 0 10px 30px -14px rgba(11,35,27,0.12)); }
.resa-bp-top { padding: 14px 18px 16px; }
.resa-bp-brand { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ev-gold-text); padding-bottom: 10px; border-bottom: 1px solid var(--ev-gold-soft); margin-bottom: 14px; }
.resa-bp-route { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.resa-bp-dest { text-align: right; }
.resa-bp-code { font-family: var(--ev-font-display); font-size: 34px; font-weight: 500; color: var(--ev-ink); }
.resa-bp-city { font-size: 10.5px; color: var(--ev-txt-2); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.resa-bp-path { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--ev-txt-2); padding: 0 4px; }
.resa-bp-path span { flex: 1; border-top: 2px dotted var(--ev-line); }
.resa-bp-perf { position: relative; border-top: 2px dashed var(--ev-line); }
.resa-bp-perf::before, .resa-bp-perf::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--ev-paper); border: 1px solid var(--ev-line); }
.resa-bp-perf::before { left: -11px; }
.resa-bp-perf::after { right: -11px; }
.resa-bp-bottom { padding: 14px 18px 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.resa-bp-f .k { font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-txt-2); margin-bottom: 3px; }
.resa-bp-f .v { font-size: 14.5px; font-weight: 700; color: var(--ev-ink); white-space: nowrap; }
.resa-bp-f .v.mint { color: var(--ev-mint-deep); }
.resa-bp-bar { height: 30px; width: 56px; flex-shrink: 0; opacity: .85; background: repeating-linear-gradient(90deg, var(--ev-ink) 0 2px, transparent 2px 4px, var(--ev-ink) 4px 5px, transparent 5px 9px, var(--ev-ink) 9px 12px, transparent 12px 14px); }

.resa-cta { width: 100%; border: 0; border-radius: 16px; background: var(--ev-ink); color: var(--ev-paper); font: 700 15px var(--ev-font-ui); padding: 15px; cursor: pointer; }
.resa-cta:disabled { opacity: 0.35; cursor: default; }

/* ── css/pages/ekonomiskt-fri.css ── */
.fri-page { max-width: 480px; margin: 0 auto; padding: var(--s-4) var(--s-5) var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }

.fri-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.fri-back { width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--ev-line); background: #fff; display: grid; place-items: center; color: var(--ev-ink); font-size: 17px; }
.fri-title { font-family: var(--ev-font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; color: var(--ev-ink); }
.fri-sub { font-size: 11.5px; color: var(--ev-txt-2); margin-top: 1px; }

.fri-hero { background: linear-gradient(160deg, var(--ev-ink-2), var(--ev-ink-deep)); border-radius: var(--r-xl); padding: 22px 20px; color: var(--ev-paper); position: relative; overflow: hidden; }
.fri-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 220px at 85% -20%, rgba(46,189,133,0.22), transparent 65%); }
.fri-hero-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,248,242,0.55); }
.fri-grad-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.fri-grad { font-family: var(--ev-font-display); font-size: 52px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.fri-grad-of { font-size: 12.5px; color: rgba(250,248,242,0.6); font-weight: 600; }
.fri-track { height: 7px; border-radius: 7px; background: rgba(250,248,242,0.14); overflow: hidden; margin-top: 14px; }
.fri-track i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--ev-mint), #63D6A8); transition: width .3s ease; }
.fri-hero-sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; font-size: 12px; color: rgba(250,248,242,0.72); }
.fri-hero-sub b { color: var(--ev-paper); }
.fri-hero-months { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(250,248,242,0.12); font-size: 12.5px; color: rgba(250,248,242,0.72); line-height: 1.5; }
.fri-hero-months b { color: #63D6A8; }

.fri-card { background: #fff; border: 1px solid var(--ev-line); border-radius: var(--r-xl); padding: 18px; box-shadow: var(--ev-shadow-card, 0 10px 30px -14px rgba(11,35,27,0.12)); }
.fri-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ev-txt-2); margin-bottom: 10px; }

#f-chart svg { display: block; width: 100%; height: auto; }
.fri-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: var(--ev-txt-2); font-weight: 600; }
.fri-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fri-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

.fri-ctl { padding: 11px 0; border-bottom: 1px solid var(--ev-line); }
.fri-ctl:last-child { border-bottom: 0; padding-bottom: 2px; }
.fri-ctl-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.fri-ctl-row .k { font-size: 13px; font-weight: 600; color: var(--ev-ink-2); }
.fri-ctl-row .v { font-size: 13.5px; font-weight: 700; color: var(--ev-ink); }
.fri-ctl input[type="range"] { width: 100%; accent-color: var(--ev-mint-deep); height: 22px; }
.fri-rate-chips { display: flex; gap: 8px; margin-top: 2px; }
.fri-chip { flex: 1; text-align: center; border: 1px solid var(--ev-line); background: var(--ev-paper); border-radius: 999px; padding: 8px 4px; font: 600 12px var(--ev-font-ui); color: var(--ev-ink-2); cursor: pointer; }
.fri-chip.on { background: var(--ev-ink); color: var(--ev-paper); border-color: var(--ev-ink); }
.fri-tgl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fri-tgl-row .k { font-size: 13px; font-weight: 600; color: var(--ev-ink-2); }
.fri-tgl-row .s { font-size: 11.5px; color: var(--ev-txt-2); margin-top: 2px; }
.fri-tgl { position: relative; width: 46px; height: 27px; flex-shrink: 0; }
.fri-tgl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fri-tgl-track { position: absolute; inset: 0; border-radius: 999px; background: var(--ev-paper-2); border: 1px solid var(--ev-line); pointer-events: none; transition: background .2s, border-color .2s; }
.fri-tgl-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(11,35,27,0.25); transition: transform .2s ease; }
.fri-tgl input:checked + .fri-tgl-track { background: var(--ev-mint-deep); border-color: var(--ev-mint-deep); }
.fri-tgl input:checked + .fri-tgl-track::after { transform: translateX(19px); }

.fri-miles { display: flex; flex-direction: column; }
.fri-mile { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ev-line); }
.fri-mile:last-child { border-bottom: 0; }
.fri-mile .dot { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--ev-line); color: var(--ev-txt-2); background: var(--ev-paper); }
.fri-mile.done .dot { background: var(--ev-mint-soft); border-color: var(--ev-mint); color: var(--ev-mint-deep); }
.fri-mile.next .dot { border-color: var(--ev-gold); color: var(--ev-gold-text); }
.fri-mile .nm { font-size: 13px; font-weight: 600; flex: 1; color: var(--ev-ink); }
.fri-mile.done .nm { color: var(--ev-txt-2); }
.fri-mile .amt { font-size: 11.5px; color: var(--ev-txt-2); }
.fri-mile .prg { font-size: 11.5px; font-weight: 700; color: var(--ev-gold-text); }

.fri-ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fri-ins { background: #fff; border: 1px solid var(--ev-line); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--ev-shadow-card, 0 10px 30px -14px rgba(11,35,27,0.12)); }
.fri-ins .big { font-family: var(--ev-font-display); font-size: 21px; font-weight: 500; }
.fri-ins .big em { font-style: normal; color: var(--ev-mint-deep); }
.fri-ins .txt { font-size: 11.5px; color: var(--ev-txt-2); line-height: 1.45; margin-top: 5px; }

.fri-cta { width: 100%; border: 0; border-radius: 16px; background: var(--ev-ink); color: var(--ev-paper); font: 700 15px var(--ev-font-ui); padding: 15px; cursor: pointer; }
.fri-cta.done { background: var(--ev-mint-deep); }
.fri-goal-link { display: block; text-align: center; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ev-mint-deep); }

/* ── css/pages/advice.css ── */
.advice-page { padding: 0; }

/* Header-unifiering 2026-07-19: .advice-page är full-bleed (padding 0, kategori-
   bandet ligger kant-i-kant) — ev-screen-head bär därför sidans standardindrag
   själv (samma padding som .eko-ev-page/.intelligence-page). */
body.app-ev .advice-page .ev-screen-head { padding: var(--s-5) var(--s-4) 0; }

/* ── Fråga-tabben ──────────────────────────────────────────── */

/* Light-theme overrides (base rules i daily-analysis.css) */
.conv-msg-avatar {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(31, 94, 102, .25);
}

.conv-msg-bubble {
  background: var(--surface);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text-1);
}

.conv-msg--user .conv-msg-bubble {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  box-shadow: 0 2px 8px rgba(31, 94, 102, .25);
}

.conv-msg--assistant .conv-msg-bubble {
  border-radius: var(--r-sm) var(--r-lg) var(--r-lg) var(--r-lg);
}

.conv-input-row {
  border-top-color: var(--border);
}

.conv-input {
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text-1);
  border-radius: var(--r-lg);
}

.conv-input:focus {
  border-color: var(--accent);
}

.conv-input::placeholder {
  color: var(--text-2);
}

/* Meddelandets inre layout */
.conv-msg-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.conv-msg-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--accent-mid);
  padding-left: var(--s-1);
}

/* Thinking-state */
.conv-thinking-text {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.conv-thinking-text::after {
  content: '';
  animation: conv-dots 1.4s steps(4, end) infinite;
}

@keyframes conv-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}

/* Inträdesanimation på varje meddelande */
.conv-msg {
  animation: conv-msg-in .22s ease;
}

@keyframes conv-msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty state v2 */
.conv-empty-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  height: 100%;
  padding: var(--s-5) 0;
  text-align: center;
}

.conv-empty-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--accent);
}

.conv-empty-tagline h3 {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--s-1);
}

.conv-empty-tagline p {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.4;
}

.conv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: center;
}

.conv-pill {
  background: var(--accent-subtle);
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}

.conv-pill:hover {
  background: #D0ECF0;
  border-color: #B0D8DC;
}

.conv-pills-hint {
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .advice-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .advice-card:hover { transform: none; }
  .advice-health-bar__fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Etapp 5 Task 5.2 (Fråga-tabben: bubblor + orb)
   Nytt block, scopat under body.app-ev. Flaggan APP_EVERGREEN_ENABLED=false
   lämnar dagens .conv-*-markup pixel-identisk (advice.js renderar samma
   struktur; enda JS-skillnaderna är avatar-/tomtillstånd-SVG:n istället för
   ✦ och app-reveal/data-animate — allt annat nedan är ren CSS-omfärgning).
   Generiska tokens (--surface/--border/--text-1/--text-2/--accent m.fl.)
   remappas redan till Evergreen-paletten globalt (css/app-evergreen.css),
   så bara avvikelser från den remappningen skrivs ut explicit här.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bubblor ─────────────────────────────────────────────── */
body.app-ev .conv-msg--user .conv-msg-bubble {
  background: var(--ev-ink);
  color: #fff;
  border-color: var(--ev-ink);
  border-radius: 18px 18px 4px 18px;
}
body.app-ev .conv-msg--assistant .conv-msg-bubble {
  background: #fff;
  border-color: var(--border);
  border-radius: 18px 18px 18px 4px;
  font-size: 13.8px;
  line-height: 1.55;
}
body.app-ev .conv-msg-avatar {
  background: radial-gradient(circle at 30% 25%, var(--ev-mint), var(--ev-mint-deep) 70%);
  box-shadow: 0 4px 10px -2px rgba(46, 189, 133, .45);
}
body.app-ev .conv-msg-avatar svg { width: 15px; height: 15px; }

/* ── Förslagschips ───────────────────────────────────────── */
body.app-ev .conv-pill {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .15s var(--ease-spring), border-color .15s;
}
body.app-ev .conv-pill:hover {
  background: #fff;
  border-color: var(--ev-mint-deep);
}
body.app-ev .conv-pill:active { transform: scale(.95); }

/* ── Input-pill + send-knapp ──────────────────────────────── */
body.app-ev .conv-input-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
}
body.app-ev .conv-input {
  background: transparent;
  border: none;
  border-radius: 0;
}
body.app-ev .conv-input:focus { border-color: transparent; }
body.app-ev .conv-send-btn {
  width: 36px;
  height: 36px;
  background: var(--ev-mint-deep);
}

/* ── Tomtillstånd / agent-orb-header ───────────────────────── */
body.app-ev .conv-empty-tagline h3 {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: 20px;
}
body.app-ev .conv-ev-orb {
  position: relative;
  width: 48px;
  height: 48px;
  background: radial-gradient(circle at 30% 25%, var(--ev-mint), var(--ev-mint-deep) 70%);
  box-shadow: 0 10px 24px -6px rgba(46, 189, 133, .55), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff;
}
body.app-ev .conv-ev-orb svg { width: 20px; height: 20px; }
body.app-ev .conv-ev-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(46, 189, 133, .35);
  animation: advice-orb-pulse 2.6s infinite;
}
@keyframes advice-orb-pulse {
  0%   { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.18); opacity: 0; }
}
body.app-ev .conv-ev-orb__halo {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 189, 133, 0.35);
  animation: conv-halo-spin 9s linear infinite;
  pointer-events: none;
}
body.app-ev .conv-ev-orb__halo::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ev-gold);
}
@keyframes conv-halo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.app-ev .conv-ev-orb__halo { animation: none; }
}

/* ── Thinking-indikator ────────────────────────────────────── */
body.app-ev .conv-thinking-text { color: var(--ev-mint-deep); }

/* ── Fix-runda 1 (F1): input-raden gömdes bakom den flytande EV-naven ──
   Grundorsak (uppmätt m. Playwright, 390×844): .conv-wrap (delad regel,
   css/pages/daily-analysis.css) sätter en fast höjd via
   `calc(100dvh - var(--nav-height) - 108px)`. "108px" antar legacy-navets
   och legacy-headerns geometri och stämmer inte i EV-läget av två skäl:
   1) EVs topbar + .advice-cat-bar + .advice-subtabs-wrap tar tillsammans
      ~149px (uppmätt), inte 108px — EV-headern är helt enkelt högre.
   2) Formeln subtraherar bara var(--nav-height) (78px i EV), men EVs
      flytande #nav-bar lägger på EN EGEN bottom-padding (14px +
      env(safe-area-inset-bottom)) UTÖVER --nav-height (se css/nav.css
      "body.app-ev #nav-bar"-blocket) — legacy-navet saknar den extra
      paddingen, så var(--nav-height) räckte där.
   Tillsammans lämnade det input-raden ~55px under nav-ytan. Fixen skriver
   om båda termerna explicit för EV (aldrig ett hårdkodat 78/92-tal för
   navet — samma var(--nav-height)-uttryck som #nav-bar självt använder)
   plus en liten luft-gap. Kopplingen till EVs topbar/cat-bar/subtabs-höjd
   (149px) är samma typ av byggd-in koppling som legacy-konstanten 108px
   redan hade — måste justeras om de höjderna ändras.
*/
body.app-ev .conv-wrap {
  height: calc(100dvh - 150px - var(--nav-height) - 14px - env(safe-area-inset-bottom) - var(--s-3));
}

/* prefers-reduced-motion hanteras globalt i base.css (animation-duration
   0.01ms + animation-iteration-count 1 på *) — inget filspecifikt
   guard-block behövs för pulse-ringen ovan. */

/* ── css/pages/landing.css ── */
.landing-page {
  font-family: var(--ev-font-ui);
  background: var(--ev-paper);
  color: var(--ev-ink);
  -webkit-font-smoothing: antialiased;
  /* clip, inte hidden — hidden gör sidan till scroll-container och dödar navens sticky */
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.landing-page main { flex: 1; }
.landing-page .container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
.landing-page ::selection { background: var(--ev-mint-soft); color: var(--ev-ink); }

/* ==========================================================================
   HERO
   ========================================================================== */
.landing-page .ev-hero { padding: 8px 0 0; text-align: center; }
.landing-page .ev-hero__badge { display: inline-flex; margin-bottom: 14px; }
.landing-page .ev-badge-mark { width: 44px; height: 44px; display: block; border-radius: 12px; }
.landing-page .ev-hero__h1 {
  font-family: var(--ev-font-display);
  font-size: clamp(44px, 7.4vw, 88px);
  font-weight: 500; line-height: 1.02; letter-spacing: -.025em;
  max-width: 820px; margin: 0 auto;
}

/* — roterande hero-ord (ersätter mockupens statiska <em>) —
   Det aktiva ordet ligger i flödet och sätter rotatorns bredd automatiskt;
   inaktiva ord är absolut positionerade ovanpå. Så centrerar "med X" alltid
   korrekt — även före fontladdning och utan JS-mätning (som var racig vid
   första målningen och lämnade AI i en "total kontroll"-bred box). */
.landing-page .ev-hero__rotator {
  display: inline-block; position: relative; text-align: left;
}
.landing-page .ev-hero__word {
  position: absolute; left: 0; top: 0;
  white-space: nowrap;
  font-style: italic; color: var(--ev-mint-deep);
  /* pub-shimmer målar bara gradienten inom boxen (background-clip: text) —
     paddingen ger luft åt italic-överhäng och nedstaplar så glyferna inte
     klipps; negativa vertikala marginaler håller radhöjden oförändrad */
  padding: .06em .16em .14em .02em;
  margin: -.06em 0 -.14em 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}
.landing-page .ev-hero__word.is-active {
  position: static; display: inline-block;
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .ev-hero__word { transition: none; }
}
.landing-page .ev-hero__sub {
  margin: 16px auto 0; max-width: 480px;
  font-size: 18px; line-height: 1.55; color: var(--ev-txt-2);
}
.landing-page .ev-hero__ctas { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* — gradient-panel med telefoner — */
.landing-page .ev-hero__stage {
  position: relative; margin: 32px auto 0; max-width: 1240px;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, #F5F9EF 0%, #DFEFDD 42%, #BFE3CC 100%);
  overflow: hidden;
  /* isolate: telefonens float-animation ger den ett eget compositing-lager —
     utan egen stacking context släpper iOS Safari lagret ur overflow-klippet */
  isolation: isolate;
  /* Måste rymma huvudtelefonen: 620px hög, ankrad bottom -64px → under 640px
     klipps telefonens ovankant vid panelens överkant (mobil-buggen juli 2026) */
  min-height: 640px;
}
.landing-page .ev-hero__stage::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(42% 34% at 22% 18%, color-mix(in srgb, var(--ev-gold) 14%, transparent), transparent 70%),
    radial-gradient(50% 40% at 80% 12%, color-mix(in srgb, var(--ev-mint) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.landing-page .ev-hero__phones {
  position: absolute; left: 50%; bottom: -64px; transform: translateX(-50%);
  display: flex; align-items: flex-end; justify-content: center;
}

/* ==========================================================================
   TELEFONRAM + APP-UI
   ========================================================================== */
.landing-page .phone {
  width: 300px; flex: none;
  background: #1A1A1C; border-radius: 46px; padding: 10px;
  box-shadow: var(--shadow-phone);
  position: relative;
}
.landing-page .phone__screen { border-radius: 37px; overflow: hidden; background: var(--ev-paper); height: 600px; position: relative; }
/* Ön centreras vertikalt mot appens topbar-rad, som agerar statusrad
   (Sapiax-wordmark vänster, klocka/avatar höger — se phoneShot i
   landing-phones.js). Radens center: (8px safe-area + 28px halva
   topbaren) × skärmskala. Notchen ligger i .phone__screen →
   koordinater = skärmens. */
.landing-page .phone__notch {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
  width: 88px; height: 26px; background: #1A1A1C; border-radius: 99px; z-index: 6;
}
.landing-page .phone__shot {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block;
}
.landing-page .phone--side { width: 272px; z-index: 1; }
.landing-page .phone--side .phone__screen { height: 540px; }
.landing-page .phone--side .phone__notch { width: 79px; height: 23px; top: 12px; }
.landing-page .phone--main { z-index: 2; margin: 0 -24px; animation: evFloatMain 7s ease-in-out infinite; }
.landing-page .phone--left  { --rot: -3deg; transform: translateY(46px) rotate(-3deg); animation: evFloatSide 8s .6s ease-in-out infinite; }
.landing-page .phone--right { --rot: 3deg;  transform: translateY(46px) rotate(3deg);  animation: evFloatSide 9s 1.1s ease-in-out infinite; }
@keyframes evFloatMain { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
@keyframes evFloatSide {
  0%,100%{ transform: translateY(46px) rotate(var(--rot,-3deg)); }
  50%{ transform: translateY(38px) rotate(var(--rot,-3deg)); }
}
@media (max-width: 900px) {
  .landing-page .phone--side { display: none; }
}

/* kvar trots att telefon-app-UI:t ovan är borta — används av desk-sektionen (landing-desk.js) */
.landing-page .ev-badge-buy { background: color-mix(in srgb, var(--ev-mint) 16%, transparent); color: #5FE0AC; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; }
.landing-page .ev-badge-watch { background: rgba(255,255,255,.09); color: var(--ev-txt-dark-2); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 9px; border-radius: 99px; }
.landing-page .ev-conf-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); margin-top: 6px; overflow: hidden; }
.landing-page .ev-conf-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ev-mint-deep), var(--ev-mint)); }

/* ==========================================================================
   KUND-STRIP (trusted-by) — statisk rad, marquee-redo vid 5+ kunder
   ========================================================================== */
/* Ligger inne i heron, under CTA-knapparna — ren centrerad rad utan ram */
.landing-page .ev-customers { margin-top: 30px; text-align: center; }
.landing-page .ev-customers__label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-mint-deep); margin-bottom: 10px; }
.landing-page .ev-customers__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(28px, 5vw, 56px); }
.landing-page .ev-customer-logo { height: 20px; width: auto; opacity: .75; transition: opacity .2s; }
/* Kort wordmark i light-snitt läser optiskt mindre bredvid de breda — kompensera höjden (samma mönster som seb/coinbase i bankremsan) */
.landing-page .ev-customer-logo[src*="rivtor"] { height: 23px; }
.landing-page .ev-customer-logo:hover { opacity: 1; }
@media (max-width: 760px) {
  .landing-page .ev-customers { margin-top: 24px; }
  .landing-page .ev-customer-logo { height: 17px; }
  .landing-page .ev-customer-logo[src*="rivtor"] { height: 20px; }
  /* tightare kolumn-gap → PULS MEDICUM + Glow ryms på rad 1, Rivtor centrerad på rad 2 */
  .landing-page .ev-customers__row { column-gap: 24px; }
}

/* ==========================================================================
   BANK-MARQUEE (loop via .pub-marquee i public-delight.css)
   ========================================================================== */
/* Toppluften kommer från heroens scroll-indikator (~56px i flödet) — därför ingen egen padding-top */
.landing-page .ev-banks { padding: 0 0 22px; text-align: center; }
.landing-page .ev-banks__label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ev-txt-2); margin-bottom: 22px; }
.landing-page .ev-bank-logo { height: 26px; width: auto; opacity: .55; filter: grayscale(1); transition: opacity .2s, filter .2s; }
/* Kvadratiska ikon-loggor (150×150 viewBox) blir 26×26 bredvid breda ordmärken — kompensera höjden */
.landing-page .ev-bank-logo[src*="seb"],
.landing-page .ev-bank-logo[src*="coinbase"] { height: 38px; }
.landing-page .ev-bank-logo:hover { opacity: 1; filter: none; }

/* ==========================================================================
   MÖRK SEKTION — Intelligence
   ========================================================================== */
.landing-page .ev-dark {
  margin: 24px auto 0; max-width: 1240px;
  background: var(--ev-ink-deep);
  border-radius: var(--r-xl);
  padding: 88px 0 72px;
  color: #F3F7F1; text-align: center;
  position: relative; overflow: hidden;
}
.landing-page .ev-dark::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--ev-mint) 13%, transparent), transparent 70%),
    radial-gradient(35% 30% at 85% 80%, color-mix(in srgb, var(--ev-gold) 8%, transparent), transparent 70%);
  pointer-events: none;
}
/* — desktop-appfönster — */
.landing-page .ev-desk {
  margin: 56px auto 0; width: min(980px, calc(100% - 56px));
  background: #0F2820; border: 1px solid var(--ev-line-dark); border-radius: 18px;
  overflow: hidden; text-align: left; font-size: 13px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
  position: relative;
}
.landing-page .desk__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--ev-line-dark); }
.landing-page .desk__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.14); }
.landing-page .desk__url { margin-left: 12px; font-size: 11.5px; color: var(--ev-txt-dark-2); background: rgba(255,255,255,.05); border-radius: 8px; padding: 4px 12px; }
.landing-page .desk__body { display: flex; min-height: 380px; }
.landing-page .desk__side { width: 190px; flex: none; border-right: 1px solid var(--ev-line-dark); padding: 18px 12px; }
.landing-page .desk__nav-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 10px; color: var(--ev-txt-dark-2); font-weight: 600; font-size: 12.5px; margin-bottom: 2px; background: none; border: 0; width: 100%; text-align: left; font-family: inherit; cursor: pointer; transition: background .15s ease, color .15s ease; }
.landing-page .desk__nav-item:hover { background: rgba(255,255,255,.05); color: #E8F2EC; }
.landing-page .desk__nav-item:focus-visible { outline: 2px solid var(--ev-mint); outline-offset: 2px; }
.landing-page .desk__nav-item.is-active { background: color-mix(in srgb, var(--ev-mint) 13%, transparent); color: #BFE9D6; }
.landing-page .desk__nav-item svg { width: 15px; height: 15px; }
.landing-page .desk__main { flex: 1; padding: 22px 26px; min-width: 0; }
.landing-page .desk__h { font-weight: 800; font-size: 16px; }
.landing-page .desk__meta { font-size: 11.5px; color: var(--ev-txt-dark-2); margin-top: 3px; }
.landing-page .ev-desk table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.landing-page .ev-desk th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ev-txt-dark-2); padding: 8px 10px; border-bottom: 1px solid var(--ev-line-dark); }
.landing-page .ev-desk td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.05); font-weight: 600; }
.landing-page .desk__tick { display: flex; align-items: center; gap: 10px; }
.landing-page .desk__logo { width: 28px; height: 28px; border-radius: 8px; background: #F7F5EE; display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; transition: transform .18s ease; }
.landing-page .desk__logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.landing-page .desk__logo--fallback { font-weight: 800; font-size: 10px; background: color-mix(in srgb, var(--ev-mint) 14%, transparent); color: var(--ev-mint); }
.landing-page .desk__row:hover .desk__logo { transform: translateY(-1px) scale(1.06); }
.landing-page .desk__name { display: flex; flex-direction: column; line-height: 1.25; }
.landing-page .desk__name b { font-size: 13px; font-weight: 700; color: #E8F2EC; }
.landing-page .desk__name small { font-size: 10px; color: var(--ev-txt-dark-2); font-weight: 600; letter-spacing: .04em; }
.landing-page .desk__sig { color: #CFE0D4; font-weight: 500; font-size: 12.5px; }
.landing-page .desk__conf { display: flex; align-items: center; gap: 9px; min-width: 120px; }
.landing-page .desk__conf b { font-size: 13px; width: 22px; }
.landing-page .desk__conf .ev-conf-bar { flex: 1; margin: 0; }
@media (max-width: 760px) {
  .landing-page .desk__body { flex-direction: column; }
  .landing-page .desk__side { width: auto; display: flex; flex-direction: row; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-right: 0; border-bottom: 1px solid var(--ev-line-dark); padding: 10px 12px; scrollbar-width: none; }
  .landing-page .desk__side::-webkit-scrollbar { display: none; }
  .landing-page .desk__nav-item { width: auto; flex: none; margin-bottom: 0; border: 1px solid var(--ev-line-dark); border-radius: 999px; padding: 7px 16px; min-height: 44px; align-items: center; font-size: 12px; white-space: nowrap; }
  .landing-page .desk__nav-item.is-active { border-color: color-mix(in srgb, var(--ev-mint) 35%, transparent); }
  .landing-page .desk__sig { display: none; }
  /* signal-kolumnens th döljs ihop med cellerna — annars förskjuts tabellhuvudet */
  .landing-page .ev-desk thead th:nth-child(2) { display: none; }
  /* .desk__bar-prefix krävs: hint-basregeln (inline-flex) står senare i filen och vinner annars på källordning */
  .landing-page .desk__bar .desk__hint { display: none; }
  /* trängre yta: mindre luft så tabellen ryms utan att badges klipps */
  .landing-page .desk__main { padding: 16px 14px; }
  .landing-page .ev-desk td, .landing-page .ev-desk th { padding-left: 6px; padding-right: 6px; }
  .landing-page .desk__conf { min-width: 90px; }
  /* .desk__main-prefix krävs: basreglernas gap (32px) står senare i filen och vinner annars på källordning */
  .landing-page .desk__main .desk-hem, .landing-page .desk__main .desk-eko { flex-direction: column; gap: 20px; }
  /* fade-kant = scroll-affordance; is-at-end (JS) släcker den vid listans slut */
  .landing-page .desk__side:not(.is-at-end) {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent);
  }
}
/* Läsbarhet under 480px (Task B4): mockupens minsta texter ett snäpp större,
   och flik-raden döljs — vid 375px är den bara 317/544px synlig (mätt), dvs.
   enbart nåbar via h-scroll. Mockupen ska ge ett intryck, inte läsas i sin
   helhet, så bordertabellen och panelen (default: Signaler) får all bredd. */
@media (max-width: 480px) {
  .landing-page .desk__meta,
  .landing-page .desk__url { font-size: 12.5px; }
  .landing-page .ev-desk th { font-size: 11.5px; }
  .landing-page .desk__name small { font-size: 11px; }
  .landing-page aside.desk__side { display: none; }
}

/* ── Interaktiv demo-desk: hint, paneler, vyer ── */
.landing-page .desk__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: #BFE9D6; background: color-mix(in srgb, var(--ev-mint) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ev-mint) 25%, transparent); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.landing-page .desk__hint::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ev-mint); animation: desk-hint-pulse 2s ease-in-out infinite; }
@keyframes desk-hint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.landing-page .desk__panel[hidden] { display: none; }
.landing-page .desk__panel.is-active { animation: desk-panel-in .28s ease; }
.landing-page .desk__panel:focus-visible { outline: none; }
@keyframes desk-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.landing-page .desk-kicker { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ev-txt-dark-2); }

/* Hem-vyn */
.landing-page .desk-hem { display: flex; gap: 32px; margin-top: 18px; align-items: flex-start; }
.landing-page .desk-hem__main { flex: 1.2; min-width: 0; }
.landing-page .desk-hem__value { font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.landing-page .desk-hem__delta { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.landing-page .ev-pill-gain { display: inline-flex; align-items: center; gap: 4px; background: var(--ev-mint-soft); color: var(--ev-mint-deep); font-weight: 700; font-size: 12px; padding: 4px 10px; border-radius: 99px; }
.landing-page .desk-hem__pct { font-size: 12px; color: var(--ev-txt-dark-2); }
.landing-page .desk-hem__spark { margin-top: 16px; }
.landing-page .desk-hem__spark svg { width: 100%; height: 64px; display: block; }
.landing-page .desk-hem__side { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.landing-page .desk-health { display: flex; align-items: center; gap: 12px; }
.landing-page .desk-health__gauge { position: relative; width: 56px; height: 56px; flex: none; }
.landing-page .desk-health__gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.landing-page .desk-health__gauge span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.landing-page .desk-health__t { font-weight: 700; font-size: 13px; }
.landing-page .desk-health__d { font-size: 11.5px; color: var(--ev-txt-dark-2); }
.landing-page .desk-kpis { display: flex; gap: 10px; }
.landing-page .desk-kpi { flex: 1; background: rgba(255,255,255,.04); border: 1px solid var(--ev-line-dark); border-radius: 10px; padding: 10px 12px; }
.landing-page .desk-kpi span { display: block; font-size: 10.5px; color: var(--ev-txt-dark-2); }
.landing-page .desk-kpi b { font-size: 13.5px; }

/* Ekonomi-vyn */
.landing-page .desk-eko { display: flex; gap: 32px; margin-top: 18px; }
.landing-page .desk-eko__col { flex: 1; min-width: 0; }
.landing-page .desk-assets { margin-top: 10px; }
.landing-page .desk-asset { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12.5px; }
.landing-page .desk-asset:last-child { border-bottom: 0; }
.landing-page .desk-asset__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.landing-page .desk-asset__label { color: #CFE0D4; flex: 1; }
.landing-page .desk-cash { display: flex; gap: 18px; align-items: flex-end; height: 96px; margin-top: 12px; }
.landing-page .desk-cash__month { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.landing-page .desk-cash__bars { flex: 1; width: 100%; display: flex; gap: 5px; align-items: flex-end; justify-content: center; }
.landing-page .desk-cash__bars i { width: 14px; border-radius: 4px 4px 0 0; }
.landing-page .desk-cash__bars .is-income, .landing-page .desk-cash__legend .is-income { background: var(--ev-mint); }
.landing-page .desk-cash__bars .is-expense, .landing-page .desk-cash__legend .is-expense { background: rgba(255,255,255,.16); }
.landing-page .desk-cash__month span { font-size: 10.5px; color: var(--ev-txt-dark-2); }
.landing-page .desk-cash__legend { display: flex; gap: 14px; margin-top: 10px; font-size: 10.5px; color: var(--ev-txt-dark-2); }
.landing-page .desk-cash__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* Bevaknings-vyn */
.landing-page .desk-feed { margin-top: 14px; }
.landing-page .desk-event { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.landing-page .desk-event:last-child { border-bottom: 0; }
.landing-page .desk-event__avatar { width: 28px; height: 28px; border-radius: 8px; font-style: normal; font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ev-mint) 14%, transparent); color: var(--ev-mint); flex: none; overflow: hidden; }
.landing-page .desk-event__avatar--logo { background: #F7F5EE; }
.landing-page .desk-event__avatar--logo img { width: 20px; height: 20px; object-fit: contain; display: block; }
.landing-page .desk-event__body { flex: 1; min-width: 0; }
.landing-page .desk-event__head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.landing-page .desk-event__type { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; background: rgba(255,255,255,.07); color: #CFE0D4; }
.landing-page .desk-event__type.is-gain { background: color-mix(in srgb, var(--ev-mint) 14%, transparent); color: #BFE9D6; }
.landing-page .desk-event__type.is-warning { background: rgba(245,158,11,.14); color: #F5C36B; }
.landing-page .desk-event__type.is-loss { background: rgba(239,68,68,.14); color: #F3A0A0; }
.landing-page .desk-event__time { margin-left: auto; font-size: 10.5px; color: var(--ev-txt-dark-2); }
.landing-page .desk-event__text { margin: 4px 0 0; font-size: 12px; color: #CFE0D4; line-height: 1.5; }

/* Råd-vyn */
.landing-page .desk-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.landing-page .desk-chat__bubble { padding: 10px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.55; }
.landing-page .desk-chat__bubble--user { align-self: flex-end; background: color-mix(in srgb, var(--ev-mint) 16%, transparent); color: #E8F2EC; border-bottom-right-radius: 4px; }
.landing-page .desk-chat__bubble--ai { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid var(--ev-line-dark); color: #CFE0D4; border-bottom-left-radius: 4px; }
.landing-page .desk-chat__note { font-size: 10.5px; color: var(--ev-txt-dark-2); }

@media (prefers-reduced-motion: reduce) {
  .landing-page .desk__panel.is-active { animation: none; }
  .landing-page .desk__hint::before { animation: none; }
}

/* — produktkort under desktop-fönstret — */
.landing-page .dark-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; width: min(980px, calc(100% - 56px)); margin: 44px auto 0; text-align: left; position: relative; }
.landing-page .ev-dark-card { background: rgba(255,255,255,.045); border: 1px solid var(--ev-line-dark); border-radius: 18px; padding: 24px; transition: transform .25s, background .25s; }
.landing-page .ev-dark-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.landing-page .dark-card__tag { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ev-mint); }
.landing-page .dark-card__title { font-weight: 800; font-size: 17px; margin-top: 10px; }
.landing-page .dark-card__text { font-size: 13.5px; line-height: 1.55; color: var(--ev-txt-dark-2); margin-top: 8px; }
@media (max-width: 760px) { .landing-page .dark-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   LJUS MINT-SEKTION — Så fungerar det + statkort
   ========================================================================== */
.landing-page .ev-how {
  margin: 24px auto 0; max-width: 1240px;
  background: linear-gradient(180deg, #EFF6EA 0%, #DCEEDD 100%);
  border-radius: var(--r-xl);
  padding: 88px 0 80px; text-align: center;
  position: relative; overflow: hidden;
}
.landing-page .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; width: min(980px, calc(100% - 56px)); margin: 52px auto 0; text-align: left; }
@media (max-width: 760px) { .landing-page .steps { grid-template-columns: 1fr; } }

/* — "Så blir ett råd till" (rec-story) — statkortens ersättare.
   CSS-default = SLUTLÄGE (allt tänt, rena siffror): prerender/no-JS/SEO ser
   alltid färdigt innehåll. wireStory lägger .is-armed synkront före första
   paint (endast när rörelse tillåts) vilket nollställer till startläge;
   faserna .is-p1–.is-p4 spelar sedan upp berättelsen. */
.landing-page .rec-story {
  width: min(980px, calc(100% - 56px)); margin: 44px auto 0; text-align: left;
  background: #fff; border: 1px solid var(--ev-line); border-radius: 24px;
  box-shadow: var(--shadow-card); padding: 26px 30px 24px; position: relative; overflow: hidden;
}
.landing-page .rs-head { display: flex; align-items: center; gap: 14px; }
.landing-page .rs-title { font-family: var(--ev-font-display); font-weight: 500; font-size: 20px; letter-spacing: -.015em; }
.landing-page .rs-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ev-mint-deep); }
.landing-page .rs-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ev-mint); animation: rs-blip 1.8s infinite; }
@keyframes rs-blip { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.landing-page .rs-replay {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--ev-line); background: #fff; border-radius: 999px; padding: 7px 15px;
  font-size: 12.5px; font-weight: 800; cursor: pointer; transition: background .2s, border-color .2s;
}
.landing-page .rs-replay:hover { background: var(--ev-mint-soft); border-color: color-mix(in srgb, var(--ev-mint) 40%, transparent); }
.landing-page .rs-replay:focus-visible { outline: 2px solid var(--ev-mint-deep); outline-offset: 3px; }
.landing-page .rs-replay svg { width: 13px; height: 13px; }

/* banan */
.landing-page .rs-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 26px; }
.landing-page .rs-line { position: absolute; left: 6%; right: 6%; top: 56px; height: 2px; border-radius: 99px; background: var(--ev-paper-2); overflow: hidden; }
.landing-page .rs-line i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ev-mint), var(--ev-mint-deep)); transform-origin: left; transform: scaleX(1); transition: transform 1s cubic-bezier(.22,.9,.3,1); }
.landing-page .rec-story.is-armed .rs-line i { transform: scaleX(0); }
.landing-page .rec-story.is-p2 .rs-line i { transform: scaleX(.37); }
.landing-page .rec-story.is-p3 .rs-line i { transform: scaleX(.7); }
.landing-page .rec-story.is-p4 .rs-line i { transform: scaleX(1); }

/* stationer */
.landing-page .rs-st { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 12px; }
.landing-page .rs-stage { height: 112px; display: flex; align-items: center; justify-content: center; width: 100%; position: relative; }
.landing-page .rs-num { font-family: var(--ev-font-display); font-weight: 560; font-size: 40px; letter-spacing: -.03em; line-height: 1; color: var(--ev-ink); margin-top: 6px; }
.landing-page .rs-label { font-weight: 800; font-size: 14px; margin-top: 5px; }
.landing-page .rs-cap { font-size: 12px; color: var(--ev-txt-2); margin-top: 2px; line-height: 1.4; max-width: 190px; }

/* rullande siffror — remsan byggs av wireStory endast i kapabla webbläsare.
   .rs-roll ÄR remsan: en kolumn av siffer-spans i ett 1em-högt fönster,
   .go rullar den till slutsiffran (translateY i em → fontstorleksoberoende).
   OBS: overflow:hidden klipper i fönstret men .rs-num är 1em-hög text —
   remsan lever inuti .rs-num vars line-height:1 ger exakt fönsterhöjd. */
.landing-page .rs-roll {
  display: inline-flex; flex-direction: column; height: 1em; overflow: hidden;
  line-height: 1; vertical-align: baseline;
}
.landing-page .rs-roll span { height: 1em; display: block; transform: translateY(0); transition: transform 1.15s cubic-bezier(.22,.9,.28,1); }
.landing-page .rs-roll.go span { transform: translateY(calc(var(--n) * -1em)); }

/* station 1 — källringen */
.landing-page .rs-src { position: relative; width: 96px; height: 96px; }
.landing-page .rs-src span {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ev-mint); border: 2px solid var(--ev-mint);
  left: 50%; top: 50%; margin: -6px 0 0 -6px;
  transform: rotate(var(--a)) translateY(-38px);
  transition: background .35s, border-color .35s; transition-delay: calc(var(--i) * 80ms);
}
.landing-page .rec-story.is-armed:not(.is-p1) .rs-src span { background: #fff; border-color: var(--ev-line); transition-delay: 0ms; }
.landing-page .rs-src b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ev-txt-2); }

/* station 2 — grindarna + de utslagna kandidaterna */
.landing-page .rs-gates { display: flex; gap: 9px; align-items: flex-end; height: 64px; }
.landing-page .rs-gates span { width: 11px; border-radius: 99px; background: var(--ev-mint); height: 100%; transition: background .35s; transition-delay: calc(var(--i) * 140ms + 250ms); }
.landing-page .rs-gates span:nth-child(even) { height: 78%; }
.landing-page .rec-story.is-armed:not(.is-p2) .rs-gates span { background: var(--ev-paper-2); transition-delay: 0ms; }
.landing-page .rs-ghost { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ev-ink) 18%, var(--ev-paper)); top: 50px; opacity: 0; z-index: 2; }
.landing-page .rs-ghost--1 { left: 32%; }
.landing-page .rs-ghost--2 { left: 60%; }
.landing-page .rec-story.is-armed.is-p2 .rs-ghost { animation: rs-gfall 1s ease-in forwards; }
.landing-page .rec-story.is-armed.is-p2 .rs-ghost--2 { animation-delay: .35s; }
@keyframes rs-gfall { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(34px); } }
.landing-page .rs-stop { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 800; color: var(--ev-txt-2); }
.landing-page .rec-story.is-armed:not(.is-p2) .rs-stop { opacity: 0; }
.landing-page .rec-story.is-armed.is-p2 .rs-stop { opacity: 1; transition: opacity .4s .9s; }

/* station 3 — vyn */
.landing-page .rs-view { width: 120px; border: 1px solid var(--ev-line); border-radius: 12px; background: #fff; padding: 8px; box-shadow: var(--shadow-card); }
.landing-page .rs-view i { display: block; height: 9px; border-radius: 99px; margin-top: 6px; transition: background .35s; }
.landing-page .rs-view i:nth-child(1) { margin-top: 0; height: 12px; background: var(--ev-mint-soft); transition-delay: 350ms; }
.landing-page .rs-view i:nth-child(2) { width: 82%; background: var(--ev-mint); transition-delay: 460ms; }
.landing-page .rs-view i:nth-child(3) { width: 64%; background: var(--ev-gold); transition-delay: 570ms; }
.landing-page .rs-view i:nth-child(4) { width: 74%; background: var(--ev-mint-deep); transition-delay: 680ms; }
.landing-page .rec-story.is-armed:not(.is-p3) .rs-view i { background: var(--ev-paper-2); transition-delay: 0ms; }

/* station 4 — låset */
.landing-page .rs-lock { position: relative; width: 54px; height: 54px; border-radius: 16px; background: var(--ev-mint-soft); display: flex; align-items: center; justify-content: center; color: var(--ev-mint-deep); }
.landing-page .rs-lock svg { width: 24px; height: 24px; }
.landing-page .rec-story.is-armed.is-p4 .rs-lock { animation: rs-lockpulse 1s ease-out 1; }
@keyframes rs-lockpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ev-mint) 45%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } }
.landing-page .rs-badge { position: absolute; top: -8px; right: -34px; background: var(--ev-ink); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 3px 8px; }
.landing-page .rec-story.is-armed:not(.is-p4) .rs-badge { opacity: 0; transform: translateY(4px); }
.landing-page .rec-story.is-armed.is-p4 .rs-badge { opacity: 1; transform: none; transition: opacity .35s .4s, transform .35s .4s; }

.landing-page .rs-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--ev-line); font-size: 12.5px; color: var(--ev-txt-2); }
.landing-page .rs-foot b { color: var(--ev-ink); }

@media (prefers-reduced-motion: reduce) {
  .landing-page .rs-live i { animation: none; }
}
@media (max-width: 760px) {
  .landing-page .rs-track { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .landing-page .rs-line { display: none; }
  .landing-page .rec-story { padding: 22px 20px 20px; }
  .landing-page .rs-head { flex-wrap: wrap; }
}
@media (max-width: 480px) { .landing-page .rs-track { grid-template-columns: 1fr; } }

/* ==========================================================================
   SÄKERT SOM STANDARD
   ========================================================================== */
.landing-page .ev-trust { padding: 110px 0 40px; text-align: center; }

/* Garantipanel — live-verifiering (ersätter det gamla 3×2-rutnätet).
   CSS-default = bockarna ritade; .is-armed (satt av wireTrust) startar dem oritade,
   .is-verified per rad ritar in dem. Ingen räknare. */
.landing-page .guarantee { width: min(940px, 100%); margin: 52px auto 0; text-align: left; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--ev-line); border-radius: 24px; box-shadow: var(--shadow-card); padding: 0 40px 14px; }
.landing-page .guarantee__glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(240px circle at var(--mx,50%) var(--my,120%), color-mix(in srgb, var(--ev-mint) 12%, transparent), transparent 62%); opacity: 0; transition: opacity .35s; }
.landing-page .guarantee:hover .guarantee__glow { opacity: 1; }
.landing-page .ghead { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 2px 18px; border-bottom: 1px solid var(--ev-line); }
.landing-page .ghead__left { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; letter-spacing: .01em; }
.landing-page .ghead__left .sh { width: 26px; height: 26px; border-radius: 8px; background: var(--ev-mint-soft); color: var(--ev-mint-deep); display: inline-flex; align-items: center; justify-content: center; }
.landing-page .ghead__left .sh svg { width: 15px; height: 15px; }
.landing-page .glist { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; list-style: none; margin: 0; padding: 0; }
.landing-page .glist::before { content: ''; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 1px; background: var(--ev-line); }
.landing-page .gitem { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 22px 16px; border-radius: 14px; border-top: 1px solid var(--ev-line); transition: background .28s; }
.landing-page .gitem:nth-child(1), .landing-page .gitem:nth-child(2) { border-top: 0; }
.landing-page .gitem::before { content: ''; position: absolute; left: 2px; top: 16px; bottom: 16px; width: 3px; border-radius: 3px; background: var(--ev-mint); transform: scaleY(0); transform-origin: center; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.landing-page .gitem:hover { background: color-mix(in srgb, var(--ev-mint-soft) 50%, transparent); }
.landing-page .gitem:hover::before { transform: scaleY(1); }
.landing-page .gcheck { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ev-mint-soft); color: var(--ev-mint-deep); transition: box-shadow .25s; }
.landing-page .gcheck svg { width: 20px; height: 20px; overflow: visible; }
.landing-page .gitem:hover .gcheck { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ev-mint) 16%, transparent); }
.landing-page .gc-ring, .landing-page .gc-tick { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; }
.landing-page .gc-ring { transition: stroke-dashoffset .55s ease; }
.landing-page .gc-tick { transition: stroke-dashoffset .4s ease .32s; }
.landing-page .gtitle { font-weight: 800; font-size: 16px; letter-spacing: -.01em; line-height: 1.3; }
.landing-page .gcap { font-size: 13.5px; color: var(--ev-txt-2); margin-top: 5px; line-height: 1.5; }
/* animationstillstånd — endast när wireTrust armar panelen (rörelse tillåts) */
.landing-page .guarantee.is-armed .gc-ring, .landing-page .guarantee.is-armed .gc-tick { stroke-dashoffset: 100; }
.landing-page .gitem.is-verified .gc-ring, .landing-page .gitem.is-verified .gc-tick { stroke-dashoffset: 0; }
.landing-page .gitem.is-verified .gcheck { animation: gpop .45s ease; }
@keyframes gpop { 0% { transform: scale(.55); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .landing-page .guarantee.is-armed .gc-ring, .landing-page .guarantee.is-armed .gc-tick { stroke-dashoffset: 0; }
  .landing-page .gitem.is-verified .gcheck { animation: none; }
  .landing-page .gitem::before, .landing-page .gcheck { transition: none; }
}
@media (max-width: 680px) {
  .landing-page .guarantee { padding: 0 24px 10px; }
  .landing-page .glist { grid-template-columns: 1fr; column-gap: 0; }
  .landing-page .glist::before { display: none; }
  .landing-page .gitem:nth-child(2) { border-top: 1px solid var(--ev-line); }
  .landing-page .ghead { flex-wrap: wrap; }
}
/* Garantipanel — kompakt radlayout under 480px (Task B1). .gitem är flex,
   inte grid: ikonen krymps via flex-basis istället för grid-template-columns. */
@media (max-width: 480px) {
  .landing-page .guarantee { padding: 0 var(--s-4) var(--s-2); }
  .landing-page .gitem { gap: var(--s-3); padding: var(--s-3) var(--s-2); }
  .landing-page .gcheck { width: 40px; height: 40px; flex: 0 0 40px; }
  .landing-page .gcheck svg { width: 22px; height: 22px; }
  .landing-page .gtitle { font-size: 16px; }
  .landing-page .gcap { font-size: 13.5px; line-height: 1.5; }
}

/* ==========================================================================
   DELIGHT-LAGER (ripple/tilt delas via interactions.js + public-delight.css;
   glow är en Evergreen-variant, mint istället för teal; scroll-indikatorn
   och shimmer-overriden är flyttade till public-evergreen.css)
   ========================================================================== */
.landing-page .hero-cursor-glow {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ev-mint) 14%, transparent) 0%, transparent 65%);
  pointer-events: none; will-change: transform;
}

/* ==========================================================================
   FÖRDJUPNING: EXPANDERBARA SIGNALRADER
   ========================================================================== */
.landing-page .desk__row { cursor: pointer; transition: background .15s ease; }
.landing-page .desk__row:hover { background: rgba(255,255,255,.03); }
.landing-page .desk__row:focus-visible { outline: 2px solid var(--ev-mint); outline-offset: -2px; }
.landing-page .desk__status-cell { white-space: nowrap; }
.landing-page .desk__chev { width: 14px; height: 14px; margin-left: 8px; vertical-align: middle; color: var(--ev-txt-dark-2); transition: transform .2s ease; }
.landing-page .desk__row.is-open .desk__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .landing-page .desk__panel.is-active { animation: deskPanelIn .28s ease both; }
  .landing-page .ev-desk .ev-conf-bar i { transform-origin: left; animation: deskBarFill .7s cubic-bezier(.2,.7,.3,1) both .1s; }
  .landing-page .desk__detail:not([hidden]) .desk-factor { animation: deskFadeUp .32s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .landing-page .desk__detail:not([hidden]) .desk-read { animation: deskFadeUp .32s ease both .18s; }
  .landing-page .desk__detail:not([hidden]) .desk-range__base { animation: deskPopIn .34s cubic-bezier(.34,1.56,.64,1) both .25s; }
}
@keyframes deskPanelIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes deskBarFill { from { transform: scaleX(0); } }
@keyframes deskFadeUp { from { opacity: 0; transform: translateY(4px); } }
@keyframes deskPopIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0); } }
.landing-page .desk__detail td { padding: 8px 10px 16px; border-bottom: 1px solid rgba(255,255,255,.05); }
.landing-page .desk__detail-inner { background: rgba(255,255,255,.03); border: 1px solid var(--ev-line-dark); border-radius: 12px; padding: 18px 20px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px 0; align-items: start; }
.landing-page .desk-detail__col--scen { border-left: 1px solid var(--ev-line-dark); padding-left: 26px; margin-left: 26px; }
.landing-page .desk-detail__col .desk-kicker { margin-bottom: 10px; }
.landing-page .desk-factors { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 8px 20px; }
.landing-page .desk-factor { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #CFE0D4; position: relative; border-radius: 6px; }
.landing-page .desk-factor[data-tip] { cursor: help; }
.landing-page .desk-factor[data-tip]:focus-visible { outline: 2px solid var(--ev-mint); outline-offset: 2px; }
.landing-page .desk-factor[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px);
  background: #0B1F19; color: #DFEDE4; border: 1px solid var(--ev-line-dark);
  padding: 7px 10px; border-radius: 8px; font-size: 11px; font-weight: 500; line-height: 1.45;
  width: max-content; max-width: 250px; opacity: 0; pointer-events: none;
  transform: translateY(3px); transition: opacity .16s ease, transform .16s ease;
  z-index: 5; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5);
}
.landing-page .desk-factor[data-tip]:hover::after,
.landing-page .desk-factor[data-tip]:focus-visible::after { opacity: 1; transform: translateY(0); }
/* Touch: tap-toggle via is-tip-open (sätts i landing-desk.js när hover saknas) */
.landing-page .desk-factor.is-tip-open::after { opacity: 1; transform: translateY(0); }
.landing-page .desk-factor__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.landing-page .desk-factor__dot.is-bullish { background: var(--ev-mint); }
.landing-page .desk-factor__dot.is-bearish { background: #F3A0A0; }
.landing-page .desk-factor__dot.is-neutral { background: rgba(255,255,255,.28); }
.landing-page .desk-factor b { margin-left: auto; font-size: 11px; color: var(--ev-txt-dark-2); font-weight: 700; }
.landing-page .desk-scen { display: flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 600; }
.landing-page .desk-scen .is-neg { color: #F3A0A0; }
.landing-page .desk-scen .is-base { color: #E8F2EC; }
.landing-page .desk-scen .is-pos { color: #BFE9D6; }
.landing-page .desk-range { position: relative; height: 6px; border-radius: 99px; margin-top: 10px; }
.landing-page .desk-range__zero { position: absolute; top: -3px; width: 1px; height: 12px; background: rgba(255,255,255,.25); }
.landing-page .desk-range__base { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--ev-mint); border: 2px solid #0F2820; transform: translate(-50%, -50%); }
.landing-page .desk-read { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: #CFE0D4; font-weight: 500; }
.landing-page .desk-read b { color: #BFE9D6; font-weight: 700; }
@media (max-width: 760px) {
  .landing-page .desk__detail-inner { grid-template-columns: 1fr; }
  .landing-page .desk-detail__col--scen { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--ev-line-dark); padding-top: 14px; }
  .landing-page .desk-factors { grid-template-columns: 1fr; }
  .landing-page .desk-factor[data-tip]::after { max-width: 200px; }
  .landing-page .desk-factor { padding: 9px 0; }
}

/* ==========================================================================
   RESPONSIV
   ========================================================================== */
@media (max-width: 640px) {
  .landing-page .ev-hero { padding: 8px 0 0; }
  /* Basens clamp bottnar på 44px — för stort för "med total kontroll" (nowrap)
     på smala skärmar; 10vw ger 39px@390 / 32px@320 så längsta ordet ryms */
  .landing-page .ev-hero__h1 { font-size: clamp(28px, 10vw, 40px); }
  /* Roterande ordet på egen rad → radantalet blir ord-oberoende och rubriken
     slutar hoppa när "med [långt ord]" annars bryts till en andra rad (händer
     på riktiga enheter, t.ex. iOS Safari som renderar Fraunces-italic bredare;
     marginalen i clampen ovan är i praktiken noll). Konsekvent radhöjd oavsett
     vilket ord som visas, oberoende av renderingsmotor. */
  .landing-page .ev-hero__rotator { display: block; text-align: center; }
}

/* Juridisk not under intelligence-korten */
.landing-page .ev-dark__note { position: relative; text-align: center; font-size: 12.5px; color: var(--ev-txt-dark-2); max-width: 560px; margin: var(--s-8) auto 0; padding: 0 var(--s-6); }


/* ── css/pages/landing-legacy.css ── */
.landing-legacy-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Hero ──────────────────────────────────────────────────── */
.landing-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 800px 600px at 50% 40%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 70%),
    radial-gradient(at 18% 80%, color-mix(in srgb, var(--teal-800) 50%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, var(--landing-bg-base) 0%, var(--landing-bg-base) 100%);
  display: flex;
  align-items: flex-start;
  padding: clamp(96px, 16vh, 200px) 0 6vh;
  text-align: center;
  color: var(--landing-text-1);
  overflow: hidden;
}

.landing-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-cursor-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-light) 8%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  top: 0;
  left: 0;
  transition: transform 0.05s linear;
  will-change: transform;
}

.landing-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--landing-text-1);
  margin-bottom: var(--s-4);
  letter-spacing: -0.5px;
  max-width: 14ch;
}

/* ─── Roterande hero-ord ─────────────────────────────────────── */
.landing-hero__rotator {
  display: block;
  position: relative;
  height: 1.15em;
  margin-top: var(--s-1);
  overflow: hidden;
}

.landing-hero__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--landing-text-3);
  opacity: 0;
  transform: translateY(110%);
  transition:
    transform var(--dur-xslow) var(--ease-spring),
    opacity var(--dur-xslow) var(--ease-out);
  will-change: transform, opacity;
}

/* Shimmer (pub-shimmer) klipper gradienten mot texten — säkerställ
   att ordets grundfärg inte vinner över gradient-clippen oavsett
   laddningsordning mellan landing.css och public-delight.css. */
.landing-hero__word.pub-shimmer {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.landing-hero__word.is-active {
  opacity: 1;
  transform: translateY(0);
  filter: var(--glow-text);
}
.landing-hero__word.is-past   { opacity: 0; transform: translateY(-110%); }
.landing-hero__word.is-future { opacity: 0; transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .landing-hero__word,
  .landing-hero__word.is-past,
  .landing-hero__word.is-future {
    transition: none;
    transform: translateY(0);
  }
  .landing-hero__word:not(.is-active) { display: none; }
}

.landing-hero__sub {
  font-size: var(--text-md);
  color: var(--landing-text-2);
  line-height: 1.65;
  margin-bottom: var(--s-6);
  max-width: 44ch;
}

/* Trust-badges — före CTA-knapparna (pit-mönster #1) */
.landing-hero__trust {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--landing-text-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 6px 14px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.trust-badge i {
  color: var(--landing-text-3);
  font-size: 14px;
}

.landing-hero__ctas {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
  justify-content: center;
}

.landing-hero .btn--primary {
  background: white;
  color: var(--accent);
  box-shadow: none;
}
.landing-hero .btn--primary:hover:not(:disabled) {
  box-shadow: var(--glow-teal);
  opacity: 1;
}

.landing-hero .btn--ghost {
  border-color: var(--glass-border);
  color: var(--landing-text-1);
}

.landing-hero .btn--ghost:hover:not(:disabled) {
  background: var(--glass-bg);
  border-color: var(--landing-text-3);
}

.landing-hero__demo { margin-top: var(--s-2); }

.btn--demo {
  background: transparent;
  border: none;
  color: var(--landing-text-2);
  font-size: var(--text-sm);
  font-family: var(--font-ui);
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
}

.btn--demo:hover {
  color: var(--landing-text-1);
  text-decoration-color: var(--landing-text-2);
  background: var(--glass-bg);
}

/* ─── Scroll indicator ───────────────────────────────────────── */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  transform: translateX(-50%);
  color: var(--landing-text-2);
  font-size: 22px;
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  animation: scroll-bounce 1.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-indicator { animation: none; }
}

/* ─── Bank-marquee ──────────────────────────────────────────── */
.landing-marquee {
  width: 100%;
  background: var(--landing-bg-100);
  padding: var(--s-10) 0 var(--s-12);
}

.landing-marquee__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--landing-text-3);
  text-align: center;
  margin-bottom: var(--s-6);
}

.landing-marquee__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--landing-text-2);
  opacity: 0.75;
  white-space: nowrap;
  user-select: none;
}

/* ─── Interaktiv produktdemo ────────────────────────────────── */
.landing-demo {
  width: 100%;
  background: var(--landing-bg-base);
  padding: var(--section-pad) 0;
  scroll-margin-top: var(--s-8);
}

.landing-demo__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--landing-text-3);
  text-align: center;
  margin-bottom: var(--s-4);
}

.landing-demo__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 40px);
  color: var(--landing-text-1);
  text-align: center;
  margin-bottom: var(--s-10);
  line-height: 1.2;
}

.landing-demo__shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-6);
  align-items: start;
  background: var(--landing-bg-100);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
}

.landing-demo__stepper {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.landing-demo__step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--landing-text-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.landing-demo__step:hover {
  color: var(--landing-text-3);
  background: var(--glass-bg);
}
.landing-demo__step.is-active {
  color: var(--landing-text-1);
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-left: 3px solid var(--accent-light);
}

.landing-demo__step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--landing-text-3);
  font-size: var(--text-xs);
  font-weight: 700;
}
.landing-demo__step.is-active .landing-demo__step-num {
  background: linear-gradient(155deg, var(--teal-500) 0%, var(--teal-800) 100%);
  border-color: transparent;
  color: #fff;
}

.landing-demo__panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s-8);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  min-height: 320px;
}

.demo-content__product {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--landing-text-3);
  margin-bottom: var(--s-3);
}

.demo-content__title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--landing-text-1);
  margin-bottom: var(--s-3);
  line-height: 1.2;
}

.demo-content__desc {
  font-size: var(--text-sm);
  color: var(--landing-text-2);
  line-height: 1.65;
  margin-bottom: var(--s-6);
  max-width: 52ch;
}

/* Mockade mini-app-vyer i demopanelen */
.demo-view {
  background: var(--landing-bg-200);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.demo-bank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: var(--text-sm);
}
.demo-bank:last-of-type { border-bottom: none; }
.demo-bank__name { color: var(--landing-text-1); font-weight: 600; }
.demo-bank__status {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gain);
  font-size: var(--text-xs);
}
.demo-bank__status i { font-size: 15px; }

.demo-view__foot {
  margin-top: var(--s-4);
  font-size: var(--text-xs);
  color: var(--landing-text-2);
  text-align: center;
}

.demo-wealth__total {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--landing-text-1);
}
.demo-wealth__label {
  font-size: var(--text-xs);
  color: var(--landing-text-2);
  margin-top: var(--s-1);
  margin-bottom: var(--s-4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.demo-signal {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--landing-text-2);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--glass-border);
}
.demo-signal:last-of-type { border-bottom: none; }
.demo-signal__score--high { color: var(--gain); font-weight: 600; }
.demo-signal__score--mid  { color: var(--landing-text-3); font-weight: 600; }

.demo-agent__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--landing-text-3);
  margin-bottom: var(--s-2);
}
.demo-agent__text {
  font-size: var(--text-sm);
  color: var(--landing-text-1);
  line-height: 1.65;
  margin-bottom: var(--s-4);
}
.demo-agent__action {
  border-color: var(--glass-border);
  color: var(--landing-text-1);
}
.demo-agent__action:hover:not(:disabled) {
  background: var(--glass-bg);
  border-color: var(--landing-text-3);
}

/* ─── Testimonials (ljus sand-sektion — bokstödsrytmens brott) ── */
.landing-testimonials {
  width: 100%;
  background: var(--sand);
  padding: var(--section-pad) 0;
}

.landing-testimonials__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-align: center;
  margin-bottom: var(--s-4);
}

.landing-testimonials__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--text-1);
  text-align: center;
  margin-bottom: var(--s-10);
}

.landing-testimonials__grid { display: flex; gap: var(--s-6); }

.landing-testimonial {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.landing-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.landing-testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-1);
  line-height: 1.35;
  margin-bottom: var(--s-3);
}

.landing-testimonial__body {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: var(--s-5);
  flex: 1;
}

.landing-testimonial__footer {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.landing-testimonial__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--teal-500) 0%, var(--teal-800) 100%);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}

.landing-testimonial__who {
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* ─── Vad gör Sapiax annorlunda? (ljus sand-2 — zebra mot testimonials) ── */
.landing-diff {
  width: 100%;
  background: var(--sand-2);
  padding: var(--section-pad) 0;
}

.landing-diff__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--text-1);
  text-align: center;
  margin-bottom: var(--s-10);
}

.landing-diff__grid { display: flex; gap: var(--s-6); }

.landing-diff__card {
  flex: 1;
  text-align: center;
  padding: var(--s-8) var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.landing-diff__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.landing-diff__icon {
  font-size: 36px;
  color: var(--accent);
  margin-bottom: var(--s-4);
  display: block;
}

.landing-diff__card-title {
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text-1);
  margin-bottom: var(--s-2);
}

.landing-diff__text {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.65;
}

/* ─── FAQ (ljus sand-sektion) ───────────────────────────────── */
.landing-faq {
  width: 100%;
  background: var(--sand);
  padding: var(--section-pad) 0;
}

.landing-faq__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  color: var(--text-1);
  text-align: center;
  margin-bottom: var(--s-10);
}

.landing-faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.landing-faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--s-5);
  box-shadow: var(--shadow-sm);
}

.landing-faq__q {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-1);
  padding: var(--s-4) 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: var(--s-8);
}
.landing-faq__q::-webkit-details-marker { display: none; }
.landing-faq__q::after {
  content: '+';
  position: absolute;
  right: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: var(--text-lg);
  transition: transform 0.2s ease;
}
.landing-faq__item[open] .landing-faq__q::after {
  content: '−';
}

.landing-faq__a {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.65;
  padding: 0 0 var(--s-4);
}
.landing-faq__a em {
  color: var(--text-1);
  font-style: normal;
  font-weight: 600;
}

.landing-faq__more {
  display: block;
  margin: var(--s-6) auto 0;
  border-color: var(--border);
  color: var(--text-1);
}
.landing-faq__more:hover:not(:disabled) {
  background: var(--sand-2);
  border-color: var(--accent);
}

/* ─── Stats-bälte (mörkt ink-bokstöd — temperaturskifte) ────── */
.landing-stats {
  width: 100%;
  background: var(--ink-900);
  padding: var(--s-12) 0;
  border-top: 1px solid color-mix(in srgb, var(--indigo-300) 20%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--indigo-300) 20%, transparent);
}

.landing-stats__grid {
  display: flex;
  gap: var(--s-6);
  justify-content: center;
}

.landing-stat {
  flex: 1;
  max-width: 280px;
  text-align: center;
}

/* Korallmoment 1 (av max 2 på landing): highlight-siffrorna på ink.
   AA-verifierat: --coral-bright 8.40:1 på --ink-900. Teal-glowen tas
   bort — den hör till teal-ytorna. */
.landing-stat__value {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 44px);
  color: var(--coral-bright);
  line-height: 1.1;
  margin-bottom: var(--s-2);
}

.landing-stat__label {
  font-size: var(--text-sm);
  color: var(--landing-text-2);
  line-height: 1.5;
}

/* ─── Slut-CTA (ink-bokstöd — footern smälter ihop nedanför) ── */
.landing-cta {
  position: relative;
  width: 100%;
  padding: clamp(96px, 16vw, 180px) 0 var(--section-pad);
  text-align: center;
  background:
    radial-gradient(ellipse 600px 400px at 50% 50%, color-mix(in srgb, var(--indigo-300) 24%, transparent) 0%, transparent 70%),
    var(--ink-900);
  overflow: hidden;
}

.landing-cta .container { position: relative; z-index: 1; }

.landing-cta__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 40px);
  color: var(--landing-text-1);
  margin-bottom: var(--s-3);
  line-height: 1.15;
  filter: var(--glow-text);
}

.landing-cta__sub {
  font-size: var(--text-md);
  color: var(--landing-text-2);
  margin-bottom: var(--s-8);
}

.landing-cta__form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.landing-cta__input {
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: var(--ink-800);
  border: 1px solid color-mix(in srgb, var(--indigo-300) 25%, transparent);
  border-radius: var(--r-md);
  color: var(--landing-text-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: vertical;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: border-color 0.2s ease;
}
.landing-cta__input::placeholder { color: var(--landing-text-2); opacity: 0.7; }
.landing-cta__input:focus {
  outline: none;
  border-color: var(--indigo-300);
}

.landing-cta .btn--primary {
  background: white;
  color: var(--accent);
  padding: var(--s-4) var(--s-10);
}
.landing-cta .btn--primary:hover:not(:disabled) {
  box-shadow: var(--glow-strong);
}
.landing-cta .btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Particles (indigo på ink-ytan — aurorans blå pol) */
.cta-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--indigo-300);
  opacity: 0.4;
  pointer-events: none;
  animation: cta-float var(--dur, 24s) ease-in-out infinite;
}
@keyframes cta-float {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.4; }
  33%       { transform: translateY(-30px) translateX(12px); opacity: 0.6; }
  66%       { transform: translateY(-15px) translateX(-10px); opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-particle { animation: none; }
  .landing-testimonial:hover,
  .landing-diff__card:hover { transform: none; }
}

/* ─── Scroll animations ─────────────────────────────────────── */
.landing-legacy-page [data-animate] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.landing-legacy-page [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
.landing-legacy-page [data-animate][data-slide-x] {
  transform: translateX(-20px);
}
.landing-legacy-page [data-animate][data-slide-x].is-visible {
  transform: translateX(0);
}
.section-title-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--accent-light);
  margin: var(--s-3) auto 0;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 600ms ease-out 200ms;
}
.landing-legacy-page [data-animate].is-visible .section-title-line {
  transform: scaleX(1);
}
/* På ljusa sand-sektioner: linjen i fullmättad accent (accent-light är
   avstämd mot mörk yta) */
.landing-testimonials .section-title-line,
.landing-diff .section-title-line,
.landing-faq .section-title-line {
  background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .landing-legacy-page [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─── Breakpoints ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .landing-demo__shell { grid-template-columns: 1fr; }
  .landing-demo__stepper {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--s-2);
    padding-bottom: var(--s-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .landing-demo__stepper::-webkit-scrollbar { display: none; }
  .landing-demo__step { white-space: nowrap; flex-shrink: 0; width: auto; }
  .landing-demo__step.is-active {
    border-left: 1px solid var(--glass-border);
    border-bottom: 3px solid var(--accent-light);
  }
}

@media (max-width: 768px) {
  .landing-testimonials__grid,
  .landing-diff__grid { flex-direction: column; gap: var(--s-5); }
  .landing-stats__grid { flex-direction: column; align-items: center; gap: var(--s-8); }
  .landing-stat { max-width: none; }
}

@media (max-width: 600px) {
  .landing-demo__panel { padding: var(--s-5); }
  .landing-demo__shell { padding: var(--s-4); }
}

@media (max-width: 480px) {
  .landing-hero__ctas { flex-direction: column; width: 100%; }
  .landing-hero__ctas .btn { width: 100%; }
  .landing-cta .btn--primary { width: 100%; }
  .landing-hero__trust { gap: var(--s-2); }
}

@media (max-width: 375px) {
  .landing-hero__h1 { font-size: 28px; }
  .demo-content__title { font-size: 18px; }
}

/* ── css/pages/pricing.css ── */
.pricing-page .ev-plans {
  max-width: 1080px; margin: 24px auto 0; padding: 0 28px 96px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch;
}

.pricing-page .ev-plan { display: flex; flex-direction: column; position: relative; }

.pricing-page .ev-plan__name {
  font-family: var(--ev-font-ui); font-weight: 800; font-size: 15px; color: var(--ev-ink);
}

.pricing-page .ev-plan__price {
  font-family: var(--ev-font-display); font-weight: 500; font-size: 44px; color: var(--ev-ink);
  margin: 10px 0 2px;
}
.pricing-page .ev-plan__price small {
  font-family: var(--ev-font-ui); font-size: 14px; color: var(--ev-txt-2); font-weight: 600;
}

.pricing-page .ev-plan__desc {
  font-size: 14px; line-height: 1.5; color: var(--ev-txt-2); margin-bottom: 18px;
}

.pricing-page .ev-plan ul {
  list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; flex: 1;
  align-content: start;
}
.pricing-page .ev-plan li {
  font-size: 14px; color: var(--ev-ink); display: flex; gap: 9px; align-items: flex-start;
}
.pricing-page .ev-plan li svg { width: 14px; height: 14px; flex: none; color: var(--ev-mint-deep); margin-top: 3px; }
.pricing-page .ev-plan li.is-off { color: color-mix(in srgb, var(--ev-txt-2) 65%, transparent); }
.pricing-page .ev-plan li.is-off svg { color: color-mix(in srgb, var(--ev-txt-2) 55%, transparent); }

/* Feature med undertext: fet label + förklarande rad under */
.pricing-page .ev-plan__feat { display: grid; gap: 2px; }
.pricing-page .ev-plan__feat b { font-weight: 700; line-height: 1.35; }
.pricing-page .ev-plan__feat-sub { font-size: 12.5px; line-height: 1.45; color: var(--ev-txt-2); }

.pricing-page .ev-plan .btn { width: 100%; margin-top: auto; }

/* ── Featured (Plus) — mörkt ink-kort ── */
.pricing-page .ev-plan--featured {
  background: var(--ev-ink-deep); border-color: transparent; color: #F3F7F1;
}
.pricing-page .ev-plan--featured .ev-plan__name,
.pricing-page .ev-plan--featured .ev-plan__price,
.pricing-page .ev-plan--featured li { color: #F3F7F1; }
.pricing-page .ev-plan--featured .ev-plan__price small { color: var(--ev-txt-dark-2); }
.pricing-page .ev-plan--featured .ev-plan__desc { color: var(--ev-txt-dark-2); }
.pricing-page .ev-plan--featured li svg { color: var(--ev-mint); }
.pricing-page .ev-plan--featured .ev-plan__feat-sub { color: var(--ev-txt-dark-2); }
.pricing-page .ev-plan--featured li.is-off { color: color-mix(in srgb, var(--ev-txt-dark-2) 70%, transparent); }
.pricing-page .ev-plan--featured li.is-off svg { color: color-mix(in srgb, var(--ev-txt-dark-2) 55%, transparent); }

.pricing-page .ev-plan__badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--ev-mint-soft); color: var(--ev-mint-deep);
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
  padding: 5px 14px; border-radius: var(--r-pill);
}

@media (max-width: 860px) {
  .pricing-page .ev-plans { grid-template-columns: 1fr; max-width: 480px; }
  .pricing-page .ev-plan__price { font-size: 38px; }
}

/* Task A3 — sektionsgap-pass: plan-kort→disclaimer→FAQ var 112+80=192px dött
   @375 (96px ev-plans padding-bottom + 16px note-marginal + 80px ev-faq padding-top).
   ev-faq-override här (laddas efter public-evergreen.css) vinner över baspaddingen. */
@media (max-width: 480px) {
  .pricing-page .ev-plans { margin-top: 20px; padding: 0 20px 28px; gap: 10px; }
  .pricing-page .ev-plan { padding: 20px; }
  .pricing-page .ev-plan ul { gap: 9px; margin-bottom: 16px; }
  .pricing-page .pricing__note { margin-top: var(--s-3); }
  .pricing-page .ev-faq { padding: 32px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-page .ev-card { transition: none !important; }
}

/* Juridisk not under plankorten */
.pricing__note { text-align: center; font-size: 12.5px; color: var(--ev-txt-2, var(--text-2)); max-width: 560px; margin: var(--s-4) auto 0; padding: 0 var(--s-6); }

/* ══════════════════════ ÅRSBETALNING — billing-toggle ══════════════════════ */
.pricing-page .billing-toggle {
  display: flex; width: fit-content; margin: 28px auto 0; padding: 4px; gap: 4px;
  background: var(--ev-mint-soft); border-radius: var(--r-pill);
}
.pricing-page .billing-toggle__opt {
  font-family: var(--ev-font-ui); font-weight: 700; font-size: 13.5px;
  color: var(--ev-txt-2); background: transparent; border: 0; cursor: pointer;
  padding: 9px 18px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .24s cubic-bezier(.2, .7, .3, 1), color .24s ease;
}
.pricing-page .billing-toggle__opt.is-active { background: var(--ev-ink); color: #F3F7F1; }
.pricing-page .billing-toggle__opt:focus-visible { outline: 2px solid var(--ev-mint-deep); outline-offset: 2px; }
.pricing-page .billing-toggle__save {
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  background: var(--ev-mint); color: var(--ev-ink);
  padding: 2px 8px; border-radius: var(--r-pill);
}

/* Prisvariant-växling (CSS-driven via data-billing på .ev-plans) — mjuk cross-fade
   + lätt vertikal drift. Båda varianterna staplas i samma grid-cell så korthöjden
   är stabil; inaktiv variant döljs för skärmläsare via visibility (efter uttoningen). */
.pricing-page .ev-plan__price:has(.ev-plan__price-month) { display: grid; align-items: start; }
.pricing-page .ev-plan__price-month,
.pricing-page .ev-plan__price-year {
  grid-area: 1 / 1;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1), visibility 0s;
}
.pricing-page .ev-plans[data-billing="month"] .ev-plan__price-year,
.pricing-page .ev-plans[data-billing="year"]  .ev-plan__price-month {
  opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s .3s;
}

/* Finstil under priset: årsbelopp + besparing. min-height reserverar höjd
   så korten inte hoppar (reflow) när man togglar mellan lägena. */
.pricing-page .ev-plan__price-sub {
  font-size: 12.5px; line-height: 1.4; color: var(--ev-txt-2);
  margin: 2px 0 16px; min-height: 18px;
  transition: opacity .3s ease, visibility 0s;
}
.pricing-page .ev-plan__price-sub b { color: var(--ev-mint-deep); font-weight: 800; }
.pricing-page .ev-plans[data-billing="month"] .ev-plan__price-sub {
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}

/* Featured (mörkt Plus-kort): läsbar finstil på ink-deep */
.pricing-page .ev-plan--featured .ev-plan__price-sub { color: var(--ev-txt-dark-2); }
.pricing-page .ev-plan--featured .ev-plan__price-sub b { color: var(--ev-mint); }

@media (prefers-reduced-motion: reduce) {
  .pricing-page .billing-toggle__opt,
  .pricing-page .ev-plan__price-month,
  .pricing-page .ev-plan__price-year,
  .pricing-page .ev-plan__price-sub { transition: none; }
  .pricing-page .ev-plans[data-billing="month"] .ev-plan__price-year,
  .pricing-page .ev-plans[data-billing="year"]  .ev-plan__price-month { transform: none; }
}
@media (max-width: 480px) {
  .pricing-page .billing-toggle { margin-top: 18px; }
  .pricing-page .ev-plan__price-sub { min-height: 16px; margin-bottom: 12px; }
}

/* ── css/pages/how-it-works.css ── */
.hiw-main { flex: 1; }

/* ─── Steg ──────────────────────────────────────────────────── */
.hiw-page .hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
  text-align: left;
}

/* ─── Så fungerar kopplingen (AISP/PISP) ───────────────────── */
.hiw-page .hiw-connect-section { padding: 88px 0; }

.hiw-page .hiw-connect-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

.hiw-page .hiw-connect-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.hiw-page .hiw-connect-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}

.hiw-page .hiw-connect-card__title {
  font-family: var(--ev-font-ui);
  font-weight: 800;
  font-size: 16px;
  color: var(--ev-ink);
  margin-bottom: 8px;
}

.hiw-page .hiw-connect-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ev-txt-2);
  margin: 0;
}

/* AISP vs PISP — två sida-vid-sida-kort */
.hiw-page .hiw-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.hiw-page .hiw-compare-card--aisp {
  border-color: var(--ev-mint);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ev-mint) 30%, transparent);
}

.hiw-page .hiw-compare-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.hiw-page .hiw-compare-card__tag {
  font-family: var(--ev-font-display);
  font-size: 20px;
  color: var(--ev-ink);
  letter-spacing: 0.3px;
}

.hiw-page .hiw-compare-card--aisp .hiw-compare-card__tag { color: var(--ev-mint-deep); }

.hiw-page .hiw-compare-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ev-txt-2);
  background: color-mix(in srgb, var(--ev-ink) 8%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
}

.hiw-page .hiw-compare-card__badge--active {
  color: var(--ev-mint-deep);
  background: var(--ev-mint-soft);
}

.hiw-page .hiw-compare-card__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ev-ink);
  margin-bottom: 8px;
}

.hiw-page .hiw-compare-card__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ev-txt-2);
  margin: 0;
}

/* Mörk PISP-omfärgning — samma behandling som pricingens featured-kort */
.hiw-page .ev-compare--dark {
  background: var(--ev-ink-deep);
  border-color: transparent;
  color: #F3F7F1;
}
.hiw-page .ev-compare--dark .hiw-compare-card__tag,
.hiw-page .ev-compare--dark .hiw-compare-card__name { color: #F3F7F1; }
.hiw-page .ev-compare--dark .hiw-compare-card__desc { color: var(--ev-txt-dark-2); }
.hiw-page .ev-compare--dark .hiw-compare-card__badge {
  color: var(--ev-txt-dark-2);
  background: rgba(255, 255, 255, 0.08);
}

/* ─── Stats-raden (ivory) ───────────────────────────────────── */
.hiw-page .hiw-stats { padding: 64px 0; }

.hiw-page .hiw-stats__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}

.hiw-page .hiw-stat__value {
  font-family: var(--ev-font-display);
  font-size: clamp(40px, 5vw, 56px);
  color: var(--ev-mint-deep);
  line-height: 1;
  margin-bottom: 10px;
}

.hiw-page .hiw-stat__label {
  font-size: 13px;
  color: var(--ev-txt-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ─── Användarröster ────────────────────────────────────────── */
.hiw-page .hiw-stories-section { padding: 72px 0 96px; }

.hiw-page .hiw-stories-title {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 640px;
}

.hiw-page .hiw-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hiw-page .hiw-story {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hiw-page .hiw-story__quote {
  font-style: italic;
  color: var(--ev-mint-deep);
  font-size: 15px;
  line-height: 1.5;
}
.hiw-page .hiw-story__quote::before { content: '“'; }
.hiw-page .hiw-story__quote::after  { content: '”'; }

.hiw-page .hiw-story__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ev-txt-2);
  flex: 1;
}

.hiw-page .hiw-story__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ev-line);
  font-size: 12px;
  color: var(--ev-txt-2);
}

.hiw-page .hiw-story__stars {
  color: var(--ev-mint);
  letter-spacing: 1px;
}

.hiw-page .hiw-story__person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hiw-page .hiw-story__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ev-ink);
  color: var(--ev-paper);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hiw-page .hiw-story__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hiw-page .hiw-story__name {
  font-weight: 700;
  color: var(--ev-ink);
  font-size: 13px;
}

.hiw-page .hiw-story__role {
  font-size: 11.5px;
  color: var(--ev-txt-2);
}

/* ─── Breakpoints ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .hiw-page .hiw-steps,
  .hiw-page .hiw-connect-cards,
  .hiw-page .hiw-compare,
  .hiw-page .hiw-stats__inner,
  .hiw-page .hiw-stories { grid-template-columns: 1fr; gap: 12px; }

  /* Task A3 — sektionsgap-pass: stats→stories var 136px dött (64px padding-bottom
     + 72px padding-top), scopat till hiw så ev-panel/-faq på andra sidor opåverkade. */
  .hiw-page .ev-panel { padding: 32px 20px 24px; }
  .hiw-page .hiw-steps { margin-top: 24px; }
  .hiw-page .hiw-connect-section { padding: 28px 0; }
  .hiw-page .hiw-connect-head { margin-bottom: 24px; }
  .hiw-page .hiw-connect-cards { margin-bottom: 24px; }
  .hiw-page .hiw-stats { padding: 24px 0; }
  .hiw-page .hiw-stories-section { padding: 28px 0 40px; }
  .hiw-page .hiw-stories-title { margin: 0 auto 24px; }

  /* Task B2 — AISP/PISP-badge: egen rad ovanför serif-rubriken (var trängd bredvid
     den på mobil). __head är redan flex-wrap men DOM-ordningen (tag, badge) skulle
     lagt badge UNDER rubriken vid wrap — order:-1 + flex-basis:100% tvingar badgen
     till en egen rad överst oavsett bredd. */
  .hiw-page .hiw-compare-card__head { flex-wrap: wrap; row-gap: var(--s-2); }
  .hiw-page .hiw-compare-card__badge {
    order: -1;
    flex-basis: 100%;
    font-size: 12px;
    margin-bottom: var(--s-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-page .ev-card,
  .hiw-page .ev-step { transition: none !important; }
}

/* ── css/pages/about.css ── */
.about-page .about-main { flex: 1; }

/* ─── Vision (ivory-panel, två ev-card sida vid sida) ──────── */
.about-page .about-vision-section .container { max-width: 980px; margin: 0 auto; }

.about-page .about-vision {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.about-page .about-vision-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
}

.about-page .about-vision-col li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ev-txt-2);
  line-height: 1.55;
}

.about-page .about-vision-check {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--ev-mint-deep);
}
.about-page .about-vision-check svg { width: 14px; height: 14px; }

/* ─── Värderingar (ivory, 3 ev-card) ────────────────────────── */
.about-page .about-values-section { padding: 88px 0 40px; }

.about-page .about-values-title { text-align: center; margin: 0 auto 40px; max-width: 640px; }

.about-page .about-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}

.about-page .about-value { text-align: center; }

.about-page .about-value__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin: 0 auto 14px;
}

.about-page .about-value__name {
  font-family: var(--ev-font-ui);
  font-weight: 800;
  font-size: 16px;
  color: var(--ev-ink);
  margin-bottom: 8px;
}

.about-page .about-value__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ev-txt-2);
  margin: 0;
}

/* ─── Breakpoints ──────────────────────────────────────────── */
@media (max-width: 760px) {
  .about-page .about-vision,
  .about-page .about-values { grid-template-columns: 1fr; }
}

/* Task B3 — värderingskorten som kompakta rader under 480px:
   ikon vänster (40px), rubrik + text staplat i höger kolumn
   istället för tre ~440px centrerade kort. */
@media (max-width: 480px) {
  .about-page .about-values-section { padding: var(--s-8) 0 var(--s-6); }
  .about-page .about-values-title { margin-bottom: var(--s-5); }
  .about-page .about-values { gap: var(--s-3); }

  .about-page .about-values-section .about-value {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: var(--s-3);
    text-align: left;
    padding: var(--s-4);
  }
  .about-page .about-values-section .about-value__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    margin: 0;
    font-size: 18px;
  }
  .about-page .about-values-section .about-value__name {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 4px;
  }
  .about-page .about-values-section .about-value__desc {
    grid-column: 2;
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .ev-card { transition: none !important; }
}

/* ── css/pages/contact.css ── */
.contact-page .contact-main { flex: 1; }

/* ─── Formulärsektion (ivory) ────────────────────────────────── */
.contact-page .contact-form-section { padding: 56px 28px 96px; }
.contact-page .contact-form-section .container { max-width: 1080px; margin: 0 auto; }

.contact-page .contact-body {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* ─── Formulär (vänster, ev-card) ────────────────────────────── */
.contact-page .contact-form-wrap { flex: 3; min-width: 0; }

.contact-page .contact-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-page .contact-label__hint {
  font-weight: 400;
  color: var(--ev-txt-2);
}

.contact-page .contact-submit {
  align-self: flex-start;
  margin-top: 10px;
  min-height: 48px;
  padding-left: 32px;
  padding-right: 32px;
}

.contact-page .contact-form__error {
  margin: 6px 0 0;
  font-family: var(--ev-font-ui);
  font-size: 14px;
  color: var(--ev-loss);
  line-height: 1.5;
}

/* ─── Confirm-vy (ersätter formuläret vid submit) ────────────── */
.contact-page .contact-confirm { text-align: center; padding: 20px 8px; }

.contact-page .contact-confirm__icon {
  font-size: 44px;
  color: var(--ev-mint-deep);
  margin-bottom: 14px;
}

.contact-page .contact-confirm__title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ev-ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.contact-page .contact-confirm__sub {
  font-size: 15px;
  color: var(--ev-txt-2);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 auto;
}

/* ─── Info-panel (höger) ─────────────────────────────────────── */
.contact-page .contact-info {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 6px;
}

.contact-page .contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ev-line);
}
.contact-page .contact-info-item:last-of-type { border-bottom: none; }

.contact-page .contact-info-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background .2s, color .2s;
}

.contact-page .contact-info-item:hover .contact-info-item__icon {
  background: var(--ev-mint-deep);
  color: #fff;
}

.contact-page .contact-info-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-page .contact-info-item__label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ev-txt-2);
}

.contact-page .contact-info-item__value {
  font-size: 15px;
  color: var(--ev-ink);
  font-weight: 500;
  word-break: break-word;
}

.contact-page a.contact-info-item__value {
  text-decoration: none;
  color: var(--ev-mint-deep);
  transition: color .2s;
}
.contact-page a.contact-info-item__value:hover { text-decoration: underline; }

.contact-page .contact-info-note {
  font-size: 13.5px;
  color: var(--ev-txt-2);
  line-height: 1.65;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--ev-line);
}

/* ─── Breakpoints ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .contact-page .contact-body { flex-direction: column; gap: 32px; }
  .contact-page .contact-info { padding-top: 0; }
}

@media (max-width: 600px) {
  .contact-page .contact-submit { width: 100%; justify-content: center; }
  .contact-page a.contact-info-item__value { display: inline-block; padding: 10px 0; }
}

/* ─── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-info-item,
  .contact-page .contact-info-item__icon,
  .contact-page a.contact-info-item__value {
    transition: none !important;
  }
  .contact-page .contact-info-item:hover .contact-info-item__icon {
    background: var(--ev-mint-soft);
    color: var(--ev-mint-deep);
  }
}

/* Art. 13-info vid insamlingstillfället */
.contact-form__privacy { font-size: 13px; color: var(--text-2); margin: var(--s-2) 0 var(--s-3); }
.contact-form__privacy a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── css/pages/waitlist.css ── */
.waitlist-page .waitlist-main { flex: 1; }

/* ─── Formulärsektion ──────────────────────────────────────────── */
.waitlist-page .waitlist-form-section { padding: 48px 28px 96px; }
.waitlist-page .waitlist-form-section .container { max-width: 1080px; margin: 0 auto; }

.waitlist-page .waitlist-form-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 40px);
}

/* ─── Kort-huvud: socialt bevis vid beslutspunkten ─────────────── */
.waitlist-page .waitlist-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ev-line);
  margin-bottom: 20px;
}

.waitlist-page .waitlist-avatars { display: flex; padding-left: 8px; }
.waitlist-page .waitlist-avatars span {
  width: 34px; height: 34px; border-radius: 50%; margin-left: -8px;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ev-font-ui); font-size: 11.5px; font-weight: 800;
}
.waitlist-page .waitlist-avatars span:nth-child(1) { background: var(--ev-mint-soft); color: var(--ev-mint-deep); }
.waitlist-page .waitlist-avatars span:nth-child(2) { background: var(--ev-gold-soft); color: var(--ev-gold-text); }
.waitlist-page .waitlist-avatars span:nth-child(3) { background: #E4E9E4; color: var(--ev-ink); }

.waitlist-page .waitlist-card-head p {
  margin: 0; font-family: var(--ev-font-ui);
  font-size: 14px; color: var(--ev-txt-2); line-height: 1.4;
}
.waitlist-page .waitlist-card-head p strong { display: block; font-size: 15px; color: var(--ev-ink); }

/* Köstatus-spanen: ostylad på desktop (renderar som tidigare textnod) —
   mobilstylas i 600px-blocket. Pricken finns i markupen men tänds bara där. */
.waitlist-page .waitlist-card-head__next .ndot { display: none; }

/* ─── Fältrad: namn + e-post sida vid sida ─────────────────────── */
.waitlist-page .waitlist-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.waitlist-page .waitlist-form__row .ev-field { min-width: 0; }

/* ─── Val-chips (ersätter textarean) ───────────────────────────── */
.waitlist-page .waitlist-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.waitlist-page .waitlist-chip {
  border: 1px solid var(--ev-line); background: var(--ev-paper);
  border-radius: var(--r-pill); padding: 8px 15px;
  font-family: var(--ev-font-ui); font-size: 14px; font-weight: 600; color: var(--ev-ink-3);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.waitlist-page .waitlist-chip:hover { border-color: var(--ev-mint); color: var(--ev-mint-deep); }
.waitlist-page .waitlist-chip[aria-pressed="true"] {
  background: var(--ev-mint-soft); border-color: var(--ev-mint-deep); color: var(--ev-mint-deep);
}
.waitlist-page .waitlist-chip[aria-pressed="true"]::before { content: '✓'; margin-right: 6px; font-weight: 800; }
.waitlist-page .waitlist-annat { display: none; margin-top: 10px; }
.waitlist-page .waitlist-annat.show { display: block; }

/* Chips-etiketten är ett span (ingen kontroll att koppla via for) — speglar ev-field label-typografin */
.waitlist-page .waitlist-chips__label {
  display: block;
  font-family: var(--ev-font-ui);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ev-ink);
}

/* ─── Fältnära fel + mikrocopy ─────────────────────────────────── */
.waitlist-page .waitlist-field__error {
  margin: 6px 0 0; font-family: var(--ev-font-ui);
  font-size: 13px; color: var(--ev-loss-text);
}
.waitlist-page .ev-field--error .ev-input { border-color: var(--ev-loss); }
.waitlist-page .waitlist-consent__error {
  margin: -10px 0 14px; font-family: var(--ev-font-ui);
  font-size: 13px; color: var(--ev-loss-text);
}
.waitlist-page .waitlist-form__micro {
  margin: 11px 0 0; text-align: center;
  font-family: var(--ev-font-ui); font-size: 13px; color: var(--ev-txt-2);
}

.waitlist-page .waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.waitlist-page .waitlist-label__hint {
  font-weight: 400;
  color: var(--ev-txt-2);
}

/* Samtyckesraden (ej ett ev-field — egen layout med kryssruta + text). */
.waitlist-page .waitlist-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 16px;
  cursor: pointer;
}

.waitlist-page .waitlist-consent__box {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 1.5px solid #C9C4B2;
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.waitlist-page .waitlist-consent__box::before {
  content: '';
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform .12s;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 84% 2%, 38% 68%);
  background: #fff;
}
.waitlist-page .waitlist-consent__box:checked { background: var(--ev-mint-deep); border-color: var(--ev-mint-deep); }
.waitlist-page .waitlist-consent__box:checked::before { transform: scale(1); }

/* Windows High Contrast stryker custom bakgrund/clip-path — rita native checkbox där i stället */
@media (forced-colors: active) {
  .waitlist-page .waitlist-consent__box { appearance: auto; -webkit-appearance: auto; }
  .waitlist-page .waitlist-consent__box::before { display: none; }
}

.waitlist-page .waitlist-consent__text {
  font-family: var(--ev-font-ui);
  font-size: 14px;
  color: var(--ev-txt-2);
  line-height: 1.5;
}

/* Felmeddelande (inline-validering) */
.waitlist-page .waitlist-form__error {
  margin: 0 0 12px;
  font-family: var(--ev-font-ui);
  font-size: 14px;
  color: var(--ev-loss);
  line-height: 1.5;
}

.waitlist-page .waitlist-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  min-height: 50px;
}

/* ─── Confirm-vy (ersätter formuläret vid submit) ──────────────── */
.waitlist-page .waitlist-confirm { text-align: center; padding: 20px 8px; }

.waitlist-page .waitlist-confirm__icon {
  font-size: 44px;
  color: var(--ev-mint-deep);
  margin-bottom: 14px;
}

.waitlist-page .waitlist-confirm__title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ev-ink);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.waitlist-page .waitlist-confirm__position {
  font-weight: 500;
  color: var(--ev-mint-deep);
}

.waitlist-page .waitlist-confirm__sub {
  font-size: 15px;
  color: var(--ev-txt-2);
  line-height: 1.6;
  max-width: 42ch;
  margin: 0 auto 20px;
}

.waitlist-page .waitlist-confirm__demo {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--ev-font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--ev-mint-deep);
  cursor: pointer;
  transition: color .2s ease;
}
.waitlist-page .waitlist-confirm__demo:hover { color: var(--ev-ink); text-decoration: underline; }

/* ─── "Vad du får som tidig användare" (ivory, 3 ev-card) ──────── */
.waitlist-page .waitlist-perks-section { padding: 8px 28px 96px; }
.waitlist-page .waitlist-perks-section .container { max-width: 1080px; margin: 0 auto; }

.waitlist-page .waitlist-perks__title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.5vw, 34px);
  color: var(--ev-ink);
  text-align: center;
  margin: 0 0 clamp(32px, 5vw, 48px);
}

.waitlist-page .waitlist-terms {
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}

.waitlist-page .waitlist-terms__cell { padding: 30px 28px; position: relative; }
.waitlist-page .waitlist-terms__cell + .waitlist-terms__cell::before {
  content: '';
  position: absolute;
  left: 0; top: 28px; bottom: 28px; width: 1px;
  background: var(--ev-line);
}

.waitlist-page .waitlist-terms__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  font-size: 18px;
  margin-bottom: 15px;
}
.waitlist-page .waitlist-terms__ic--mint { background: var(--ev-mint-soft); color: var(--ev-mint-deep); }
.waitlist-page .waitlist-terms__ic--gold { background: var(--ev-gold-soft); color: var(--ev-gold-text); }
.waitlist-page .waitlist-terms__ic--ink  { background: #E4E9E4; color: var(--ev-ink); }

.waitlist-page .waitlist-terms__title {
  font-family: var(--ev-font-ui);
  font-size: 15.5px; font-weight: 800; color: var(--ev-ink);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.waitlist-page .waitlist-terms__pill {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  border-radius: 6px; padding: 2px 7px;
  background: var(--ev-gold-soft); color: var(--ev-gold-text);
}
.waitlist-page .waitlist-terms__body {
  font-size: 13.5px; color: var(--ev-txt-2); line-height: 1.55;
  margin: 7px 0 0;
}

@media (max-width: 760px) {
  .waitlist-page .waitlist-terms { grid-template-columns: 1fr; }
  .waitlist-page .waitlist-terms__cell + .waitlist-terms__cell::before {
    top: 0; bottom: auto; left: 28px; right: 28px; width: auto; height: 1px;
  }
}

/* ─── Breakpoints ──────────────────────────────────────────────── */

@media (max-width: 600px) {
  /* ── Hero: kompaktare — kortet tittar upp ovanför vecket ─────── */
  .waitlist-page .waitlist-hero { padding: 30px 24px 0; }
  .waitlist-page .waitlist-hero h1 { font-size: 34px; }
  .waitlist-page .waitlist-hero .ev-subhero__sub { font-size: 15.5px; margin-top: 12px; }
  .waitlist-page .waitlist-hero .hero-scroll-indicator { display: none; }

  /* ── Bredare kort: sektionen släpper sidopaddingen, .container
        (var(--container): 16px-inset @390) tar över → kort 358px ── */
  .waitlist-page .waitlist-form-section { padding: 28px 0 72px; }
  .waitlist-page .waitlist-form-wrap { padding: 22px 20px 24px; }
  .waitlist-page .waitlist-consent { padding: 8px 0; }
  .waitlist-page .waitlist-form__row { grid-template-columns: 1fr; gap: 0; }

  /* ── Köstatus i två rena rader — inga radbrytningar ──────────── */
  .waitlist-page .waitlist-card-head { gap: 12px; padding-bottom: 16px; margin-bottom: 18px; }
  .waitlist-page .waitlist-card-head p strong { white-space: nowrap; }
  .waitlist-page .waitlist-card-head__next {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 3px;
    font-size: 13px; font-weight: 700; color: var(--ev-mint-deep); white-space: nowrap;
  }
  .waitlist-page .waitlist-card-head__next .ndot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ev-mint);
  }

  /* ── Chips: tätare — tre rader. Vertikal padding behålls (8px) så
        tap-höjden är oförändrad — ingen ny mobile-audit-offender. ── */
  .waitlist-page .waitlist-chips { gap: 7px; }
  .waitlist-page .waitlist-chip { font-size: 13px; padding: 8px 12px; }

  /* ── Perks: ikonrader — ikon vänster, text höger ─────────────── */
  .waitlist-page .waitlist-perks-section { padding: 0 0 72px; }
  .waitlist-page .waitlist-perks__title { font-size: 22px; margin-bottom: 22px; }
  .waitlist-page .waitlist-terms__cell {
    display: grid; grid-template-columns: 38px 1fr; gap: 4px 14px; padding: 20px;
  }
  .waitlist-page .waitlist-terms__cell + .waitlist-terms__cell::before { left: 20px; right: 20px; }
  .waitlist-page .waitlist-terms__ic { margin-bottom: 0; grid-row: 1 / span 2; }
  .waitlist-page .waitlist-terms__title { font-size: 14.5px; align-self: center; }
  .waitlist-page .waitlist-terms__body { grid-column: 2; font-size: 13px; margin: 2px 0 0; }

  /* ── Bekräftelsen: länken trunkeras snyggt, knappar 50/50 ────── */
  .waitlist-page .waitlist-share__link {
    flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .waitlist-page .waitlist-share__row .btn { flex: 1 1 calc(50% - 4px); }
}

/* Under 375px räcker inte bredden för nowrap-raderna i kortets huvud —
   texten spiller över kortkanten (mätt: 6px @360, 46px @320). Där släpper
   vi nowrap igen; 375px och uppåt behåller de rena tvåradiga köstatusen. */
@media (max-width: 374px) {
  .waitlist-page .waitlist-card-head p strong,
  .waitlist-page .waitlist-card-head__next { white-space: normal; }
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .waitlist-page .waitlist-confirm__icon,
  .waitlist-page .waitlist-confirm__demo {
    transition: none !important;
  }
}

/* Delningsblock (referral) i bekräftelse-/återbesöksvyn */
.waitlist-share { margin: 20px 0 8px; text-align: left; }
.waitlist-share__text { font-size: 14px; line-height: 1.55; color: var(--ev-txt-2); margin: 0 0 10px; }
.waitlist-share__row { display: flex; gap: 8px; flex-wrap: wrap; }
.waitlist-share__link {
  flex: 1; min-width: 200px; border: 1px solid var(--ev-line); background: var(--ev-paper-2);
  border-radius: var(--r-pill); padding: 10px 16px; font-size: 13px;
  font-family: var(--ev-font-ui); color: var(--ev-txt-2); outline: none;
}

/* Policy-länk i samtyckesraden (Art. 13-info vid insamlingstillfället) */
.waitlist-consent__link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── css/pages/legal.css ── */
.legal-page .legal-body { max-width: 720px; margin: 40px auto 80px; padding: 0 28px; }
.legal-page .legal-section { margin-bottom: 36px; }
.legal-page .legal-section h2 {
  font-family: var(--ev-font-display); font-weight: 500; font-size: 24px;
  color: var(--ev-ink); margin-bottom: 10px; letter-spacing: -.01em;
}
.legal-page .legal-section p, .legal-page .legal-section li {
  font-size: 15px; line-height: 1.65; color: var(--ev-txt-2);
}
.legal-page .legal-section ul { padding-left: 20px; margin-top: 8px; }
.legal-page .legal-section a { color: var(--ev-mint-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; }
.legal-page .legal-section a:hover { color: var(--ev-ink); }
.legal-page .legal-updated { font-size: 13px; color: color-mix(in srgb, var(--ev-txt-2) 70%, transparent); border-top: 1px solid var(--ev-line); padding-top: 18px; }

/* ── css/pages/auth.css ── */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ev-paper);
  color: var(--ev-ink);
  font-family: var(--ev-font-ui);
  -webkit-font-smoothing: antialiased;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
}

/* ─── Split-layout: brandpanel + formulärsida ─────────────────────── */
.auth-page .auth-split {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: stretch;
}

/* ─── Brandpanel (ink-deep, mint-glow) ────────────────────────────── */
.auth-page .auth-brand {
  background: var(--ev-ink-deep);
  color: #F3F7F1;
  border-radius: 28px;
  padding: clamp(32px, 3.5vw, 44px);
  min-height: 620px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: auth-fade .5s ease both;
}

.auth-page .auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--ev-mint) 14%, transparent), transparent 70%),
    radial-gradient(38% 32% at 88% 85%, color-mix(in srgb, var(--ev-gold) 8%, transparent), transparent 70%);
  pointer-events: none;
}

.auth-page .auth-brand > * { position: relative; }

/* Symbolen är evergreen-mörk — chip med mint-soft bakom så den syns mot ink-deep
   (samma anatomi som kortets .auth-card__mark). */
.auth-page .auth-brand__mark {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--ev-mint-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}

.auth-page .auth-brand__mark img { height: 26px; width: auto; }

.auth-page .auth-brand__body { margin: auto 0; padding: 32px 0; }

.auth-page .auth-brand__title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--ev-paper);
}

.auth-page .auth-brand__sub {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ev-txt-dark-2);
  max-width: 34ch;
}

.auth-page .auth-brand__trust {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-page .auth-brand__trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #DCE7DF;
}

.auth-page .auth-brand__trust i {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--ev-mint) 15%, transparent);
  color: var(--ev-mint);
  font-size: 15px;
}

.auth-page .auth-brand__foot {
  border-top: 1px solid var(--ev-line-dark);
  padding-top: 18px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ev-txt-dark-2);
}

/* ─── Formulärsidan ───────────────────────────────────────────────── */
.auth-page .auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 12px 0;
}

.auth-page .auth-main__logo { cursor: pointer; line-height: 0; }
.auth-page .auth-main__logo img { height: 26px; width: auto; }

/* ─── Kortet ──────────────────────────────────────────────────────── */
.auth-page .auth-card {
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 40px);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-card);
  animation: auth-rise .5s .08s cubic-bezier(.22,.61,.36,1) both;
}

.auth-page .auth-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.auth-page .auth-card__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ev-mint);
  animation: auth-pulse 2.4s ease-in-out infinite;
}

.auth-page .auth-card__mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--ev-mint-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.auth-page .auth-card__mark img { height: 30px; width: auto; }

.auth-page .auth-card__title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 30px);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ev-ink);
  margin-top: 18px;
}

.auth-page .auth-card__sub {
  margin-top: 10px;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ev-txt-2);
}

/* ─── Felmeddelande ───────────────────────────────────────────────── */
.auth-page .auth-error {
  display: none;
  background: color-mix(in srgb, var(--ev-loss) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--ev-loss) 30%, transparent);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--ev-loss);
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 16px;
}

.auth-page .auth-error.visible { display: block; }

/* ─── Stegen på signup (stängd beta) ──────────────────────────────── */
.auth-page .auth-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-page .auth-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ev-ink);
}

.auth-page .auth-steps__num {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ev-ink);
  color: var(--ev-paper);
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ─── Knappar + footer ────────────────────────────────────────────── */
.auth-page .auth-card__submit {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
}

.auth-page .auth-card__secondary {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
}

.auth-page .auth-card__footer {
  text-align: center;
  font-size: 14px;
  color: var(--ev-txt-2);
  margin-top: 20px;
  line-height: 1.5;
}

.auth-page .auth-card__footer a {
  color: var(--ev-mint-deep);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.auth-page .auth-card__footer a:hover { text-decoration: underline; }

/* ─── Trust-rad under kortet ──────────────────────────────────────── */
.auth-page .auth-main__trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ev-txt-2);
}

.auth-page .auth-main__trust i { color: var(--ev-mint-deep); font-size: 15px; }

/* ─── Rörelse ─────────────────────────────────────────────────────── */
@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes auth-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .auth-page .auth-brand,
  .auth-page .auth-card { animation: none; }
  .auth-page .auth-card__badge::before { animation: none; }
}

/* ─── Breakpoints ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .auth-page { align-items: flex-start; padding-top: clamp(32px, 8vw, 64px); }
  .auth-page .auth-split { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
  .auth-page .auth-brand { display: none; }
}

@media (max-width: 480px) {
  .auth-page .auth-card { padding: 24px 20px; border-radius: 20px; }
  /* Större träffyta på footer-länkarna på touch */
  .auth-page .auth-card__footer a { display: inline-block; padding: 10px 6px; margin: -10px -6px; }
}

/* ── css/pages/onboarding.css ── */
/* ─── Sida + header + progress ────────────────────────────────────── */
.onboarding-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ev-paper);
  color: var(--ev-ink);
  font-family: var(--ev-font-ui);
  -webkit-font-smoothing: antialiased;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px) 48px;
  display: flex;
  flex-direction: column;
}

.onboarding-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 0 14px;
}

.onboarding-header__back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ev-txt-2);
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}

.onboarding-header__back:hover {
  color: var(--ev-ink);
  background: var(--ev-paper-2);
}

.onboarding-header__logo { justify-self: center; line-height: 0; }
.onboarding-header__logo .brand-wordmark { height: 22px; width: auto; }

.onboarding-header__secure {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}

/* Räknad progress: "Steg N av 6" + tidsestimat + segmentspår. Ersätter de
   gamla aria-hidden-prickarna som inte gav någon information till någon. */
.onboarding-progress {
  padding: 2px 0 18px;
}

.onboarding-progress__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}

.onboarding-progress__step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ev-mint-deep);
}

.onboarding-progress__time {
  font-size: 11px;
  font-weight: 600;
  color: var(--ev-txt-2);
}

.onboarding-progress__track {
  display: flex;
  gap: 4px;
}

.onboarding-progress__seg {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--ev-line);
  transition: background .25s ease;
}

.onboarding-progress__seg.is-done { background: var(--ev-mint-deep); }

/* ─── Typografi-hjälpare ──────────────────────────────────────────── */
.ob-body {
  display: flex;
  flex-direction: column;
  animation: ob-rise .4s cubic-bezier(.22,.61,.36,1) both;
}

.ob-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ev-mint-deep);
  margin: 0 0 10px;
}

.ob-title {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: clamp(26px, 6vw, 32px);
  letter-spacing: -.02em;
  line-height: 1.12;
  color: var(--ev-ink);
  margin: 0;
}

.ob-title--lg { font-size: clamp(30px, 7vw, 38px); }

.ob-title em {
  font-style: italic;
  color: var(--ev-mint-deep);
}

.ob-sub {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ev-txt-2);
  max-width: 44ch;
}

.ob-footnote {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ev-txt-2);
}

.ob-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-ink);
  margin: 0 0 10px;
}

.ob-label__hint { font-weight: 500; color: var(--ev-txt-2); }

.ob-section { margin-top: 24px; }

/* ─── CTA + skip ──────────────────────────────────────────────────── */
.ob-cta {
  width: 100%;
  min-height: 50px;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ob-cta:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ob-skip {
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ev-txt-2);
  padding: 12px 16px;
  margin-top: 6px;
  border-radius: 999px;
  transition: color .15s ease;
}

.ob-skip:hover { color: var(--ev-ink); }

/* ─── Skärm 1: Hub-intro ──────────────────────────────────────────── */
.ob-hub-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  animation: ob-rise .4s cubic-bezier(.22,.61,.36,1) both;
}

.ob-hub-section .ob-eyebrow,
.ob-hub-section .ob-title,
.ob-hub-section .ob-sub { text-align: center; align-self: center; }

.ob-hub-section .ob-eyebrow { margin: 16px 0 7px; }
.ob-hub-section .ob-title--lg { font-size: clamp(27px, 6.4vw, 34px); }
.ob-hub-section .ob-sub { margin-top: 8px; max-width: 32ch; }

.ob-hero {
  background: var(--ev-ink-deep);
  border-radius: 24px;
  padding: 12px 14px 10px;
  position: relative;
  overflow: hidden;
}

.ob-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 46% at 50% 4%, color-mix(in srgb, var(--ev-mint) 18%, transparent), transparent 70%),
    radial-gradient(40% 34% at 90% 92%, color-mix(in srgb, var(--ev-gold) 9%, transparent), transparent 70%);
  pointer-events: none;
}

/* Siffrorna i hjulet är illustrativa — märk dem, påstå inget om användarens
   riktiga pengar innan ett enda konto är kopplat. */
.ob-hero__tagwrap {
  position: relative;
  display: flex;
  justify-content: center;
}

.ob-hero__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--ev-line-dark);
  color: var(--ev-txt-dark-2);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
}

.ob-hero__tag b {
  color: var(--ev-mint);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ob-hub-wrap {
  position: relative;
  width: min(214px, 70%);
  aspect-ratio: 1;
  margin: 2px auto 0;
}

.ob-orbit-rings { position: absolute; inset: 0; }

.ob-orbit-rings i {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--ev-mint) 16%, transparent);
  border-radius: 50%;
  animation: ob-orbit-pulse 4.5s ease-in-out infinite;
}

.ob-orbit-rings i:nth-child(1) { inset: 22%; animation-delay: 0s;   }
.ob-orbit-rings i:nth-child(2) { inset: 10%; animation-delay: .9s;  border-color: color-mix(in srgb, var(--ev-mint) 11%, transparent); }
.ob-orbit-rings i:nth-child(3) { inset: 0;   animation-delay: 1.8s; border-color: color-mix(in srgb, var(--ev-mint) 7%, transparent);  }

/* viewBox 0 0 100 100 = samma procentskala som nodernas left/top, vilket är
   hela poängen: geometrin kommer ur en enda loop i onboarding.js. */
.ob-spoke-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ob-spoke {
  stroke: color-mix(in srgb, var(--ev-mint) 42%, transparent);
  stroke-width: .7;
  stroke-linecap: round;
  stroke-dasharray: 1.6 2.6;
  stroke-dashoffset: 26;
  opacity: 0;
  transition: opacity .45s ease;
}

.ob-spoke.visible {
  opacity: 1;
  animation: ob-spoke-flow 1.6s linear infinite;
}

.ob-pulse { fill: var(--ev-mint); opacity: 0; }

.ob-pulse.visible {
  opacity: .9;
  animation: ob-pulse-travel 2.6s cubic-bezier(.22,.61,.36,1) infinite;
}

.ob-hub-node {
  position: absolute;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(8, 26, 20, .42);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.55);
  transition: opacity .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1);
}

.ob-hub-node.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.ob-hub-node__img { width: 100%; height: 100%; object-fit: contain; }

.ob-hub-node__abbr {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.ob-hub-node__tick {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--ev-mint);
  color: var(--ev-ink-deep);
  border: 2px solid var(--ev-ink-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
}

.ob-hub-node__tick svg { width: 9px; height: 9px; }

.ob-hub-node.visible .ob-hub-node__tick { opacity: 1; transform: scale(1); }

/* Navet är Sapiax-märket — ren illustration. Den gamla låsknappen var en
   osynlig andra primärhandling som gjorde exakt samma sak som CTA:n. */
.ob-hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #3ED39B, var(--ev-mint) 55%, var(--ev-mint-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ev-mint) 16%, transparent), 0 10px 28px rgba(8, 26, 20, .5);
}

.ob-hub-center img { width: 38px; height: 38px; object-fit: contain; }

.ob-hub-center::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ev-mint) 35%, transparent);
  animation: ob-halo 3s ease-out infinite;
}

.ob-total {
  position: relative;
  text-align: center;
  margin-top: 8px;
}

.ob-total__label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ev-txt-dark-2);
  margin: 0 0 2px;
}

.ob-total__value {
  font-family: var(--ev-font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ev-paper);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ob-total__kr {
  font-size: 16px;
  color: var(--ev-txt-dark-2);
  margin-left: 2px;
}

.ob-total__meta {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ev-mint);
  margin: 4px 0 0;
  min-height: 15px;
}

.ob-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 11px;
}

.ob-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ev-ink);
}

.ob-pill svg { color: var(--ev-mint-deep); flex: none; }

.ob-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ev-mint);
}

/* Sticky fot: hero + rubrik gjorde att CTA:n hamnade under vecket på en
   iPhone. Primärhandlingen ska aldrig behöva scrollas fram. */
.ob-hub-foot {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 12px 0 10px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--ev-paper) 0%, transparent) 0%, var(--ev-paper) 26%);
}

.ob-hub-foot .ob-cta { margin-top: 0; }

.ob-hub-foot .ob-skip {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 7px;
  font-size: 13px;
}

.ob-hub-note {
  margin: 7px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--ev-txt-2);
}

/* ─── Skärm 2: Bankval ────────────────────────────────────────────── */
.ob-search-wrap { position: relative; margin-top: 20px; }

.ob-search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--ev-txt-2);
  pointer-events: none;
}

.ob-search {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border: 1px solid var(--ev-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ev-ink);
  outline: none;
  transition: border-color .15s ease;
}

.ob-search::placeholder { color: var(--ev-txt-2); }
.ob-search:focus { border-color: var(--ev-mint-deep); }

.ob-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ob-filter-chip {
  border: 1px solid var(--ev-line);
  background: #fff;
  color: var(--ev-ink);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ob-filter-chip.is-active {
  background: var(--ev-ink);
  border-color: var(--ev-ink);
  color: var(--ev-paper);
}

.bank-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.bank-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  position: relative;
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.bank-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.bank-card:focus-visible {
  outline: none;
  border-color: var(--ev-mint-deep);
  box-shadow: 0 0 0 3px var(--ev-mint-soft);
}

.bank-card.selected {
  border-color: var(--ev-mint-deep);
  box-shadow: 0 0 0 3px var(--ev-mint-soft);
}

.bank-card__info { min-width: 0; }

.bank-card__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-card__type {
  font-size: 12px;
  color: var(--ev-txt-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bank-card__check {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--ev-mint-deep);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .2s cubic-bezier(.34,1.56,.64,1), transform .2s cubic-bezier(.34,1.56,.64,1);
}

.bank-card.selected .bank-card__check { opacity: 1; transform: scale(1); }

/* ─── Skärm 3: Ansluter ───────────────────────────────────────────── */
.ob-connect-body { align-items: center; text-align: center; }

.ob-connect-visual {
  position: relative;
  margin: 24px 0 20px;
}

.ob-connect-ring-wrap {
  position: relative;
  width: 108px;
  height: 108px;
}

.ob-ring-svg { width: 100%; height: 100%; }

.ob-ring-track {
  fill: none;
  stroke: var(--ev-line);
  stroke-width: 3;
}

.ob-ring-arc {
  fill: none;
  stroke: var(--ev-mint);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 80 200;
  transform-origin: center;
  animation: ob-arc-spin 1.1s linear infinite;
}

.ob-connect-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ob-connect-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ev-mint) 40%, transparent);
  transform: translate(-50%, -50%);
  animation: ob-grow-fade 2.2s ease-out infinite;
  pointer-events: none;
}

.ob-connect-pulse--2 { animation-delay: 1.1s; }

.ob-connect-title { margin-bottom: var(--s-1); }

.ob-connect-sub { margin-bottom: var(--s-1); }

.ob-connect-bank-name { color: var(--ev-mint-deep); }

.ob-steps {
  width: 100%;
  margin-top: 26px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 16px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.ob-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 12px;
  transition: background .2s ease;
}

.ob-step--active { background: var(--ev-paper-2); }

.ob-step__icon-wrap {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ev-paper-2);
  color: var(--ev-txt-2);
  transition: background .2s ease, color .2s ease;
}

.ob-step--active .ob-step__icon-wrap,
.ob-step--done .ob-step__icon-wrap {
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
}

.ob-step__icon-inner { display: inline-flex; line-height: 0; }

.ob-step__content { flex: 1; min-width: 0; }

.ob-step__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-ink);
}

.ob-step--pending .ob-step__label { color: var(--ev-txt-2); }

.ob-step__detail {
  font-size: 12px;
  color: var(--ev-txt-2);
}

.ob-step__badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ev-txt-2);
  background: var(--ev-paper-2);
  border-radius: 999px;
  padding: 4px 10px;
}

.ob-step__badge--active { background: var(--ev-gold-soft); color: var(--ev-gold-text); }
.ob-step__badge--done   { background: var(--ev-mint-soft); color: var(--ev-mint-deep); }

.ob-spin-icon { animation: ob-icon-spin 1s linear infinite; }
.ob-check-pop { animation: ob-check-pop .3s cubic-bezier(.34,1.56,.64,1) both; }

/* ─── Skärm 4 + 7: Förmögenhet / Klart ────────────────────────────── */
.ob-success-body,
.ob-done-body { align-items: center; text-align: center; }

.ob-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ev-mint-soft);
  color: var(--ev-mint-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 16px 0 18px;
  animation: ob-check-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}

.ob-success-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 22px;
}

.ob-success-total__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ev-txt-2);
}

.ob-success-total__value {
  font-family: var(--ev-font-display);
  font-weight: 500;
  font-size: clamp(34px, 8vw, 42px);
  letter-spacing: -.02em;
  color: var(--ev-ink);
}

.ob-success-list {
  width: 100%;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-success-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 16px;
  padding: 12px 14px;
  text-align: left;
  animation: ob-slide-up .4s cubic-bezier(.22,.61,.36,1) both;
}

.ob-success-row__info { flex: 1; min-width: 0; }

.ob-success-row__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ob-success-row__type { font-size: 12px; color: var(--ev-txt-2); }

.ob-success-row__right { text-align: right; }

.ob-success-row__balance {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ev-ink);
}

.ob-success-row__balance.is-negative { color: var(--ev-loss); }

.ob-success-row__badge {
  display: inline-block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ev-txt-2);
  background: var(--ev-paper-2);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ─── Skärm 5 + 6: Profil (options, chips, input) ─────────────────── */
.ob-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-options--row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ob-option { display: block; cursor: pointer; }

.ob-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ob-option__inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--ev-line);
  border-radius: 14px;
  padding: 13px 14px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.ob-option:hover .ob-option__inner { border-color: var(--ev-mint-deep); }

.ob-option input:checked + .ob-option__inner {
  border-color: var(--ev-mint-deep);
  background: var(--ev-mint-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ev-mint) 14%, transparent);
}

.ob-option input:focus-visible + .ob-option__inner {
  border-color: var(--ev-mint-deep);
  box-shadow: 0 0 0 3px var(--ev-mint-soft);
}

.ob-option__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ev-ink);
}

.ob-option__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ev-txt-2);
}

.ob-option--compact .ob-option__inner {
  align-items: center;
  text-align: center;
  padding: 12px 8px;
}

.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ob-chips--presets { margin-top: 10px; }

.ob-chip {
  border: 1px solid var(--ev-line);
  background: #fff;
  color: var(--ev-ink);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.ob-chip:hover { border-color: var(--ev-mint-deep); }

.ob-chip.is-selected {
  background: var(--ev-ink);
  border-color: var(--ev-ink);
  color: var(--ev-paper);
}

.ob-chip--sm { padding: 6px 12px; font-size: 12px; }

.ob-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ev-line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--ev-ink);
  outline: none;
  transition: border-color .15s ease;
}

.ob-input::placeholder { color: var(--ev-txt-2); }
.ob-input:focus { border-color: var(--ev-mint-deep); }

/* ─── Skärm 7: AI-summering + målseed ─────────────────────────────── */
.ob-ai-card {
  width: 100%;
  background: var(--ev-mint-soft);
  border: 1px solid color-mix(in srgb, var(--ev-mint-deep) 12%, transparent);
  border-radius: 16px;
  padding: 16px;
  margin-top: 22px;
  text-align: left;
}

.ob-ai-card__who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ev-mint-deep);
  margin: 0 0 8px;
}

.ob-ai-card__who::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ev-mint);
}

.ob-ai-card__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ev-ink);
  margin: 0;
}

.ob-ai-card__level {
  display: inline-block;
  margin-top: 12px;
  background: #fff;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ev-mint-deep);
}

.ob-goal-seed { width: 100%; text-align: left; }
.ob-goal-seed .ob-chips { justify-content: flex-start; }

/* ─── Keyframes ───────────────────────────────────────────────────── */
@keyframes ob-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ob-orbit-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.018); }
}

@keyframes ob-spoke-flow {
  to { stroke-dashoffset: 0; }
}

@keyframes ob-pulse-travel {
  0%   { opacity: 0; }
  12%  { opacity: .9; }
  80%  { opacity: .9; }
  100% { opacity: 0; }
}

@keyframes ob-halo {
  from { transform: scale(1);   opacity: .7; }
  to   { transform: scale(1.5); opacity: 0;  }
}

@keyframes ob-arc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ob-grow-fade {
  from { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0;  transform: translate(-50%, -50%) scale(1.7); }
}

@keyframes ob-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes ob-check-pop {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ob-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ─── Responsivt ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ob-options--row { grid-template-columns: 1fr; }
  .ob-option--compact .ob-option__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    text-align: left;
    gap: 10px;
  }
  /* iOS-zoom-guard: inputs under 16px zoomar in sidan */
  .ob-search, .ob-input { font-size: 16px; }
}

@media (max-width: 375px) {
  .bank-grid { grid-template-columns: 1fr; }
}

/* ─── Reducerad rörelse ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ob-body,
  .ob-hub-section,
  .ob-orbit-rings i,
  .ob-hub-center::after,
  .ob-connect-pulse,
  .ob-success-icon,
  .ob-success-row { animation: none; }
  .ob-hub-node {
    transition: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .ob-hub-node__tick { transition: none; opacity: 1; transform: scale(1); }
  .ob-spoke { transition: none; opacity: 1; animation: none; }
  .ob-pulse { animation: none; }
  .onboarding-progress__seg { transition: none; }
}

/* ── css/pages/settings.css ── */
.settings-page {
  min-height: 100%;
  background: var(--bg);
  padding-bottom: calc(var(--nav-height) + var(--s-8));
  font-family: var(--font-ui);
}

/* ── Profile card ────────────────────────────────────────── */
.settings-profile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) var(--s-4) var(--s-4);
  animation: settings-fade-in 0.25s ease both;
}

@keyframes settings-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.settings-avatar {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  user-select: none;
}

.settings-profile__info {
  flex: 1;
  min-width: 0;
}

.settings-profile__name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-profile__email {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Body ────────────────────────────────────────────────── */
.settings-body {
  padding: 0 var(--s-4);
}

/* ── Sections ────────────────────────────────────────────── */
.settings-section {
  margin-bottom: var(--s-6);
}

.settings-section__header {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.settings-soon-badge {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--warning);
  color: #fff;
  font-weight: 500;
}

/* ── Card ────────────────────────────────────────────────── */
.settings-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* ── Row ─────────────────────────────────────────────────── */
.settings-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-4);
  min-height: 52px;
}

.settings-row--interactive {
  cursor: pointer;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.settings-row--interactive:hover {
  background: var(--accent-subtle);
}

.settings-row--interactive:active {
  background: var(--accent-subtle);
  opacity: 0.8;
}

.settings-row--destructive .settings-row__label,
.settings-row--destructive .settings-row__icon,
.settings-row--destructive .settings-row__chevron {
  color: var(--loss);
}

.settings-row__icon {
  color: var(--text-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 20px;
}

.settings-row__label {
  flex: 1;
  font-size: var(--text-md);
  color: var(--text-1);
}

.settings-row__value {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.settings-row__chevron {
  color: var(--text-2);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.6;
}

.settings-row-divider {
  height: 1px;
  background: var(--border);
  margin: 0 var(--s-4);
}

/* ── Mode steps ──────────────────────────────────────────── */
.settings-mode-steps {
  display: flex;
  align-items: flex-start;
  padding: var(--s-4) var(--s-4) var(--s-3);
}

.settings-mode-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  flex: 1;
}

.settings-mode-step[role="button"] {
  cursor: pointer;
}

.settings-mode-step[role="button"]:hover .settings-mode-step__dot {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.settings-mode-step__dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: border-color 0.18s, background 0.18s;
}

.settings-mode-step--active .settings-mode-step__dot {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.settings-mode-step--locked {
  opacity: 0.45;
}

.settings-mode-step__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.02em;
}

.settings-mode-step--active .settings-mode-step__label {
  color: var(--accent);
  font-weight: 600;
}

.settings-mode-connector {
  height: 2px;
  flex: 1;
  background: var(--border);
  margin-top: 14px;
}

/* ── Toggle switch ───────────────────────────────────────── */
.settings-toggle {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}

.settings-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.settings-toggle__track {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--border);
  transition: background 0.2s;
  position: relative;
}

.settings-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.settings-toggle input:checked + .settings-toggle__track {
  background: var(--accent);
}

.settings-toggle input:checked + .settings-toggle__track::after {
  transform: translateX(20px);
}

.settings-toggle--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Rensa inline confirmation ───────────────────────────── */
.settings-rensa-actions {
  display: flex;
  gap: var(--s-2);
  margin-left: auto;
}

.settings-rensa-cancel {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: var(--border);
  color: var(--text-1);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
}

.settings-rensa-cancel:hover { opacity: 0.8; }

.settings-rensa-confirm {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(239,68,68,0.1);
  color: var(--loss);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid rgba(239,68,68,0.3);
  cursor: pointer;
  font-family: var(--font-ui);
}

.settings-rensa-confirm:hover { background: rgba(239,68,68,0.18); }

/* ── Logout button ───────────────────────────────────────── */
.settings-logout-wrap {
  padding: var(--s-2) 0 var(--s-8);
}

.settings-logout-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--r-lg);
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.22);
  color: var(--loss);
  font-size: var(--text-md);
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.01em;
}

.settings-logout-btn:hover {
  background: rgba(239,68,68,0.13);
}

.settings-logout-btn:active {
  background: rgba(239,68,68,0.18);
}

/* Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px */
@media (max-width: 430px) {
  .settings-section__header { font-size: 12px; }
  .settings-soon-badge { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Inställningar som "kontrollrum"
   Nytt block, scopat under body.app-ev. Legacy-reglerna ovan (.settings-*,
   rad 1–351) rörs INTE — flaggan APP_EVERGREEN_ENABLED=false lämnar dagens
   Inställningar pixel-identiskt. Porterar docs/prototypes/installningar-
   redesign.html (klassnamn → settings-ev-*) med EV-tokens.
   Mörk profilpanel återanvänder css/pages/hem.css .hem-ev-hero-receptet
   (rad 525–542) EXAKT: samma radialer + linear-gradient(160deg, #102E24,
   var(--ev-ink) 70%) + korn-::after. Avatarens radial-gradient(circle at
   32% 28%, #2A5648, var(--ev-ink) …) är samma recept som .nav-orb__core
   (css/nav.css). Riskprofil-sheetets SKAL ägs av css/components/
   goal-sheet.css (backdrop/grip/scroll/footer) — reglerna under "Sheet-
   innehåll" nedan stylar bara .settings-ev-opt m.fl., samma mönster som
   goals.css .gd-* för mål-detaljsheeten.
   Se docs/superpowers/plans/2026-07-19-installningar-kontrollrum.md.

   OBS klasser utöver det låsta DOM-kontraktet (låg risk, samma __-prefix-
   konvention, namnavstämda mot settings.js i integrationssteget):
   .settings-ev-pulse, .settings-ev-profile__top/__id/__badges,
   .settings-ev-ring__wrap/__value/__sign/__label, .settings-ev-
   sec__meta(--mint), .settings-ev-rensa-actions/-cancel/-confirm,
   .settings-ev-opt__radio/__main/__name/__you/__desc/__dots,
   .settings-ev-sheet-note.
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidhuvud ────────────────────────────────────────────────── */
body.app-ev .settings-ev-page {
  padding: 0 20px calc(var(--nav-height) + 24px);
  font-family: var(--font-ui);
}
body.app-ev .settings-ev-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  margin-bottom: 4px;
}
body.app-ev .settings-ev-back {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--ev-hairline);
  background: var(--surface);
  color: var(--text-1);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-spring);
}
body.app-ev .settings-ev-back:active { transform: scale(0.9); }
body.app-ev .settings-ev-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
body.app-ev .settings-ev-title em {
  font-style: italic;
  color: #1F5E66; /* samma teal-literal som .hem-ev-ai__ask (hem.css) */
}

/* ── Subline (pulsdot) ───────────────────────────────────────── */
body.app-ev .settings-ev-subline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 12.5px;
  margin: 6px 0 16px;
}
body.app-ev .settings-ev-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ev-mint);
  position: relative;
  flex-shrink: 0;
}
body.app-ev .settings-ev-pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--ev-mint);
  opacity: 0.5;
  animation: settings-ev-pulsegrow 2.2s ease-out infinite;
}
@keyframes settings-ev-pulsegrow {
  0%   { transform: scale(0.4); opacity: 0.7; }
  80%  { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}

/* ── Profilpanel (signatur) — hem-ev-hero-receptet, EXAKT ─────── */
body.app-ev .settings-ev-profile {
  position: relative;
  color: var(--ev-paper);
  border-radius: 24px;
  padding: 18px 18px 6px;
  box-shadow: var(--ev-shadow-ink);
  overflow: hidden;
  margin-bottom: 22px;
  background:
    radial-gradient(140% 120% at 85% -20%, rgba(46, 189, 133, 0.22), transparent 55%),
    radial-gradient(120% 100% at -10% 110%, rgba(201, 162, 75, 0.14), transparent 50%),
    linear-gradient(160deg, #102E24, var(--ev-ink) 70%);
}
body.app-ev .settings-ev-profile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  mix-blend-mode: overlay;
}
body.app-ev .settings-ev-profile > * { position: relative; }

body.app-ev .settings-ev-profile__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.app-ev .settings-ev-profile__avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 28%, #2A5648, var(--ev-ink) 75%);
  box-shadow: 0 0 0 2px var(--ev-ink), 0 0 0 3.5px rgba(46, 189, 133, 0.6);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ev-paper);
}
body.app-ev .settings-ev-profile__id { flex: 1; min-width: 0; }
body.app-ev .settings-ev-profile__name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-ev .settings-ev-profile__mail {
  font-size: 11.5px;
  color: rgba(250, 248, 242, 0.55);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-ev .settings-ev-profile__badges {
  display: flex;
  flex-wrap: wrap; /* trångt läge: pillen radbryts istället för att glida in under ringen */
  gap: 6px;
  margin-top: 8px;
}
body.app-ev .settings-ev-pill {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
body.app-ev .settings-ev-pill--plan {
  background: rgba(46, 189, 133, 0.16);
  color: var(--ev-mint);
  border: 1px solid rgba(46, 189, 133, 0.35);
}
body.app-ev .settings-ev-pill--since {
  background: rgba(250, 248, 242, 0.08);
  color: rgba(250, 248, 242, 0.6);
}

/* ── Ring (r=26 → omkrets 163.4; JS beräknar stroke-dashoffset) ── */
body.app-ev .settings-ev-ring {
  flex-shrink: 0;
  text-align: center;
}
body.app-ev .settings-ev-ring__wrap {
  position: relative;
  width: 62px;
  height: 62px;
}
body.app-ev .settings-ev-ring svg {
  width: 62px;
  height: 62px;
  transform: rotate(-90deg);
  display: block;
}
body.app-ev .settings-ev-ring circle { fill: none; stroke-width: 4.5; }
body.app-ev .settings-ev-ring__track { stroke: rgba(250, 248, 242, 0.13); }
body.app-ev .settings-ev-ring__bar {
  stroke: var(--ev-mint);
  stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: 163.4;
  transition: stroke-dashoffset 0.9s var(--ease-spring), stroke 0.4s;
}
body.app-ev .settings-ev-ring.is-full .settings-ev-ring__bar {
  stroke: var(--ev-mint);
  filter: drop-shadow(0 0 6px rgba(46, 189, 133, 0.65));
}
body.app-ev .settings-ev-ring__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.app-ev .settings-ev-ring__pct { font-variant-numeric: tabular-nums; }
body.app-ev .settings-ev-ring__sign {
  font-style: normal;
  font-size: 9px;
  margin-left: 1px;
  opacity: 0.7;
}
body.app-ev .settings-ev-ring__label {
  display: block;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, 0.45);
  margin-top: 3px;
}

/* ── Hint ("Nästa steg …") ───────────────────────────────────── */
body.app-ev .settings-ev-hint {
  position: relative;
  margin-top: 14px;
  border-top: 1px solid rgba(250, 248, 242, 0.1);
  width: 100%;
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  color: rgba(250, 248, 242, 0.85);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  text-align: left;
  transition: opacity 0.15s;
}
body.app-ev .settings-ev-hint:active { opacity: 0.7; }
body.app-ev .settings-ev-hint__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ev-gold);
  flex-shrink: 0;
}
body.app-ev .settings-ev-hint.is-done .settings-ev-hint__dot { background: var(--ev-mint); }
body.app-ev .settings-ev-hint__cnt {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 800;
  color: rgba(250, 248, 242, 0.5);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
body.app-ev .settings-ev-hint__chev {
  color: rgba(250, 248, 242, 0.4);
  flex-shrink: 0;
  display: flex;
}

/* ── Sektioner ───────────────────────────────────────────────── */
body.app-ev .settings-ev-sec { margin-bottom: 22px; }
body.app-ev .settings-ev-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}
body.app-ev .settings-ev-sec__head h2 {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-ink-40);
}
body.app-ev .settings-ev-sec__meta {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ev-ink-40);
  font-variant-numeric: tabular-nums;
}
body.app-ev .settings-ev-sec__meta--mint { color: var(--ev-mint-deep); }

body.app-ev .settings-ev-card {
  background: var(--surface);
  border: 1px solid var(--ev-hairline);
  border-radius: 20px;
  box-shadow: var(--ev-shadow-card);
  overflow: hidden;
}

/* ── Rader ───────────────────────────────────────────────────── */
body.app-ev .settings-ev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 9px 14px;
  background: transparent;
  transition: background 0.15s;
  width: 100%;
  border: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
body.app-ev .settings-ev-row + .settings-ev-row { border-top: 1px solid var(--ev-hairline); }
body.app-ev .settings-ev-row--tap {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.app-ev .settings-ev-row--tap:active { background: var(--ev-paper-2); }

body.app-ev .settings-ev-row__ic {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--ev-paper-2);
  color: var(--text-2);
}
body.app-ev .settings-ev-row__ic--mint { background: var(--ev-mint-wash); color: var(--ev-mint-deep); }
body.app-ev .settings-ev-row__ic--gold { background: var(--ev-gold-wash); color: var(--ev-gold-text); }
body.app-ev .settings-ev-row__ic--loss { background: rgba(226, 87, 75, 0.10); color: var(--ev-loss); }

body.app-ev .settings-ev-row__main { flex: 1; min-width: 0; }
body.app-ev .settings-ev-row__lbl {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.25;
}
body.app-ev .settings-ev-row__sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
body.app-ev .settings-ev-row__sub .settings-ev-pulse { width: 6px; height: 6px; }
body.app-ev .settings-ev-row__val {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
body.app-ev .settings-ev-row__chev {
  color: var(--ev-ink-40);
  flex-shrink: 0;
  display: flex;
  opacity: 0.7;
}

body.app-ev .settings-ev-row--destr .settings-ev-row__lbl { color: var(--loss); }
body.app-ev .settings-ev-row--destr .settings-ev-row__chev { color: var(--loss); opacity: 0.5; }

@keyframes settings-ev-rowflash {
  0%, 100%  { background: transparent; }
  25%, 60%  { background: var(--ev-mint-wash); }
}
body.app-ev .settings-ev-flash { animation: settings-ev-rowflash 1.6s ease; }

/* ── Toggle ──────────────────────────────────────────────────── */
body.app-ev .settings-ev-tgl {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}
body.app-ev .settings-ev-tgl input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
body.app-ev .settings-ev-tgl__track {
  width: 46px;
  height: 27px;
  border-radius: 999px;
  background: var(--ev-paper-2);
  border: 1px solid var(--ev-hairline-strong);
  position: relative;
  transition: background 0.25s, border-color 0.25s;
}
body.app-ev .settings-ev-tgl__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(11, 35, 27, 0.3);
  transition: transform 0.25s var(--ease-spring);
}
body.app-ev .settings-ev-tgl input:checked + .settings-ev-tgl__track {
  background: var(--ev-mint);
  border-color: var(--ev-mint);
}
body.app-ev .settings-ev-tgl input:checked + .settings-ev-tgl__track::after {
  transform: translateX(19px);
}
/* Kommer snart-läge (beslut A): disabled input → sänkt opacity + ingen pointer */
body.app-ev .settings-ev-tgl.is-soon,
body.app-ev .settings-ev-tgl:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

body.app-ev .settings-ev-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: 999px;
  background: var(--ev-gold-wash);
  color: var(--ev-gold-text);
  white-space: nowrap;
}

/* ── Mini-seg (rådgivarens ton) ──────────────────────────────── */
body.app-ev .settings-ev-seg {
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  background: var(--ev-paper-2);
  border: 1px solid var(--ev-hairline);
  border-radius: 11px;
  padding: 2px;
}
body.app-ev .settings-ev-seg button {
  border: none;
  background: none;
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-2);
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
body.app-ev .settings-ev-seg button[aria-pressed="true"] {
  background: var(--ev-ink);
  color: var(--ev-paper);
}
/* Kommer snart-läge (beslut A): tonsegmentet är visuellt men overksamt */
body.app-ev .settings-ev-seg.is-soon {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Rensa-bekräftelse (inline, .js-rensa-cancel/.js-rensa-confirm) ── */
body.app-ev .settings-ev-rensa-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
body.app-ev .settings-ev-rensa-actions button {
  border: none;
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 12px;
  font-weight: 700;
  min-height: 36px;
  font-family: inherit;
  transition: transform 0.15s var(--ease-spring);
}
body.app-ev .settings-ev-rensa-actions button:active { transform: scale(0.95); }
body.app-ev .settings-ev-rensa-cancel { background: var(--ev-paper-2); color: var(--ev-ink); }
body.app-ev .settings-ev-rensa-confirm {
  background: rgba(226, 87, 75, 0.10);
  color: var(--ev-loss);
  border: 1px solid rgba(226, 87, 75, 0.35);
}

/* ── Logga ut + version ──────────────────────────────────────── */
body.app-ev .settings-ev-logout {
  width: 100%;
  min-height: 52px;
  border-radius: 16px;
  background: rgba(226, 87, 75, 0.10);
  border: 1px solid rgba(226, 87, 75, 0.25);
  color: var(--ev-loss);
  font-size: 13.5px;
  font-weight: 800;
  font-family: inherit;
  transition: transform 0.15s var(--ease-spring), background 0.15s;
}
body.app-ev .settings-ev-logout:active { transform: scale(0.98); }
body.app-ev .settings-ev-version {
  text-align: center;
  font-size: 10.5px;
  color: var(--ev-ink-40);
  margin-top: 14px;
}

/* ── Sheet-innehåll (riskprofil) — skalet ägs av goal-sheet.css ──
   .goal-sheet__footer button/.btn-ink är redan stylad där; "Spara
   profil" behöver ingen ny regel här. ── */
body.app-ev .settings-ev-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--ev-hairline);
  border-radius: 16px;
  padding: 13px 14px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.2s, background 0.2s, transform 0.15s var(--ease-spring);
}
body.app-ev .settings-ev-opt:active { transform: scale(0.985); }
body.app-ev .settings-ev-opt[aria-checked="true"] {
  border-color: var(--ev-ink);
  background: var(--ev-mint-wash);
}
body.app-ev .settings-ev-opt__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--ev-hairline-strong);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background 0.2s, border-color 0.2s;
}
body.app-ev .settings-ev-opt[aria-checked="true"] .settings-ev-opt__radio {
  background: var(--ev-mint-deep);
  border-color: var(--ev-mint-deep);
}
body.app-ev .settings-ev-opt__main { flex: 1; min-width: 0; }
body.app-ev .settings-ev-opt__name {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-1);
}
body.app-ev .settings-ev-opt__you {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--ev-mint-wash);
  color: var(--ev-mint-deep);
  padding: 2.5px 7px;
  border-radius: 999px;
}
body.app-ev .settings-ev-opt__desc {
  font-size: 11.5px;
  color: var(--text-2);
  line-height: 1.5;
  margin-top: 3px;
}
body.app-ev .settings-ev-opt__dots {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  align-items: center;
}
body.app-ev .settings-ev-opt__dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ev-paper-2);
  border: 1px solid var(--ev-hairline-strong);
  font-style: normal;
}
body.app-ev .settings-ev-opt__dots i.on { background: var(--ev-gold); border-color: var(--ev-gold); }
body.app-ev .settings-ev-opt__dots span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ev-ink-40);
  margin-left: 4px;
}
body.app-ev .settings-ev-sheet-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--ev-paper-2);
  border-radius: 12px;
  margin-top: 4px;
}
body.app-ev .settings-ev-sheet-note svg { flex-shrink: 0; margin-top: 1px; color: var(--ev-ink-40); }

body.app-ev .settings-ev-sheet-head { margin: 2px 0 12px; }
body.app-ev .settings-ev-sheet-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--text-1);
}
body.app-ev .settings-ev-sheet-sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}

/* ── Mobilbrytpunkt (samma golv som legacy-blocket ovan) ─────────
   Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px */
@media (max-width: 430px) {
  body.app-ev .settings-ev-sec__head h2 { font-size: 12px; }
  body.app-ev .settings-ev-sec__meta { font-size: 12px; }
  body.app-ev .settings-ev-badge { font-size: 11px; }
  body.app-ev .settings-ev-pill { font-size: 11px; }
  body.app-ev .settings-ev-ring__label { font-size: 11px; }
  body.app-ev .settings-ev-ring__sign { font-size: 11px; }
  body.app-ev .settings-ev-hint__cnt { font-size: 12px; }
  body.app-ev .settings-ev-row__sub { font-size: 12px; }
  body.app-ev .settings-ev-opt__you { font-size: 11px; }
  body.app-ev .settings-ev-opt__dots span { font-size: 11px; }
  body.app-ev .settings-ev-version { font-size: 12px; }
}

/* ── prefers-reduced-motion: nolla flash/ring/puls-animationer ───
   (app-reveal-mekaniken själv nollas redan globalt i base.css). */
@media (prefers-reduced-motion: reduce) {
  body.app-ev .settings-ev-flash { animation: none; }
  body.app-ev .settings-ev-ring__bar { transition: none; }
  body.app-ev .settings-ev-pulse::after { animation: none; }
  body.app-ev .settings-ev-back,
  body.app-ev .settings-ev-hint,
  body.app-ev .settings-ev-tgl__track,
  body.app-ev .settings-ev-tgl__track::after,
  body.app-ev .settings-ev-opt,
  body.app-ev .settings-ev-rensa-actions button,
  body.app-ev .settings-ev-logout {
    transition: none;
  }
}

/* ── css/pages/pension.css ── */
.pension-page, .pension-intro {
  --pension-ly-staten: #17604A;
  --pension-ly-jobbet: var(--ev-mint, #2EBD85);
  --pension-ly-du: var(--ev-gold, #C9A24B);
}

.pension-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-5) var(--s-4) var(--s-6);
}

/* ── Undersidehuvud (samma mönster som .resa-head i resa.css) ──
   Ligger utanför .pension-page (överlever dashboardens rerender)
   och bär därför sidans horisontella padding själv. */
.pension-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-4) 0; }
.pension-back { width: 38px; height: 38px; border-radius: var(--r-md); border: 1px solid var(--ev-line); background: #fff; display: grid; place-items: center; color: var(--ev-ink); font-size: 17px; }
.pension-title { font-family: var(--ev-font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; color: var(--ev-ink); }
.pension-head-sub { font-size: 11.5px; color: var(--ev-txt-2); margin-top: 1px; }

/* ── Sektionsramverk ─────────────────────────────────────── */
.pension-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ── Gemensamt kort ──────────────────────────────────────── */
.pension-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.pension-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pension-hero__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pension-hero__amount {
  font-family: var(--font-display);
  font-size: 39px;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   KAPITALUTVECKLING (cone)
   ═══════════════════════════════════════════════════════════ */
.pension-cone__caption {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════
   SAPIAX-ANALYS (signaturgrepp — behållen gradient)
   ═══════════════════════════════════════════════════════════ */
.pension-ai {
  background: linear-gradient(135deg, var(--surface-elevated), var(--surface), var(--accent-subtle));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--s-6);
}

.pension-ai__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* AI-rekommendationsblock (renderAIContent-utdata stylas konsekvent) */
.pension-ai__body h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: var(--s-1);
}

.pension-ai__body p {
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.7;
}

.pension-ai__body ul,
.pension-ai__body ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pension-ai__body li {
  position: relative;
  padding-left: var(--s-6);
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: 1.6;
}

.pension-ai__body li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-subtle);
  background-image: radial-gradient(circle at center, var(--accent) 0 4px, transparent 5px);
}

.pension-ai__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

.pension-ai__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.pension-ai__cta:hover {
  background: var(--accent-mid);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.pension-ai__cta:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* ── Guidad minPension-import ─────────────────────────────── */
.pension-import {
  gap: var(--s-4);
}

.pension-import__intro {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.pension-import__step {
  display: flex;
  gap: var(--s-3);
}

.pension-import__step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pension-import__step-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.pension-import__open {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}

.pension-import__open:hover {
  background: var(--accent-subtle-2);
  border-color: var(--accent);
}

.pension-import__open:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* ── Responsivt ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .pension-hero__amount { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .pension-page *,
  .pension-page *::before,
  .pension-page *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ═══ Pensionsbygget: stapelkomponenten (redesign 2026-07) ═══ */
.pension-stack-wrap { position: relative; flex-shrink: 0; }
.pension-stack { display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; }
.pension-stack__ly {
  border-radius: 7px; min-height: 0;
  transition: height var(--dur-slow) var(--ease-spring), opacity var(--dur-normal);
}
.pension-stack__ly--staten { background: var(--pension-ly-staten, #17604A); }
.pension-stack__ly--jobbet { background: var(--pension-ly-jobbet, #2EBD85); }
.pension-stack__ly--du     { background: var(--pension-ly-du, #C9A24B); }
.pension-stack__ly--ghost {
  background: transparent; border: 1.5px dashed var(--border); opacity: 0.6;
}
.pension-stack__target {
  position: absolute; left: -6px; right: -6px; height: 0;
  border-top: 2px dashed var(--text-1); opacity: 0.8;
  transition: bottom var(--dur-slow) var(--ease-spring);
}
.pension-stack__target::after {
  content: 'mål'; position: absolute; right: -4px; top: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-1);
}
@media (prefers-reduced-motion: reduce) {
  .pension-stack__ly, .pension-stack__target { transition: none; }
}

/* ═══ SVG-konen (redesign) ═══ */
.pension-cone__wrap { position: relative; }
.pension-cone__wrap svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.pension-cone__axis {
  font-family: var(--font-ui); font-size: 9.5px; fill: var(--text-2);
}
.pension-cone__axis--gold { font-weight: 700; fill: var(--pension-ly-du, #C9A24B); }
.pension-cone__tip {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--text-1); color: var(--surface);
  border-radius: 10px; padding: 7px 11px; font-size: 11px; line-height: 1.5;
  pointer-events: none; opacity: 0; transition: opacity var(--dur-fast); white-space: nowrap; z-index: 5;
}
.pension-cone__tip b { font-size: 12px; }
.pension-cone__tip-span { opacity: 0.7; }

/* ═══ Wizard v2: Pensionsbygget ═══ */
.pension-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ev-gold-text, #8A6A24); display: inline-flex; align-items: center; gap: 7px;
}
.pension-wizard-v2 .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pension-wizard-v2 .dot--staten { background: var(--pension-ly-staten); }
.pension-wizard-v2 .dot--jobbet { background: var(--pension-ly-jobbet); }
.pension-wizard-v2 .dot--du     { background: var(--pension-ly-du); }

.pension-intro__title { font-family: var(--ev-font-display, var(--font-display)); font-size: 30px; font-weight: 500; line-height: 1.12; margin: 8px 0 0; }
.pension-intro__sub { font-size: 14.5px; line-height: 1.55; color: var(--text-2); margin-top: 12px; max-width: 46ch; }
.pension-intro__fig { display: flex; align-items: center; gap: 24px; padding: 24px 0; }
.pension-intro__col { width: 92px; }
.pension-intro__col .pension-stack__ly { height: 0 !important; }
.pension-intro.play .pension-intro__col .pension-stack__ly--staten { height: 44% !important; }
.pension-intro.play .pension-intro__col .pension-stack__ly--jobbet { height: 25% !important; }
.pension-intro.play .pension-intro__col .pension-stack__ly--du     { height: 27% !important; }
.pension-intro__legend { display: flex; flex-direction: column-reverse; gap: 22px; }
.pension-intro__name { font-family: var(--ev-font-display, var(--font-display)); font-size: 18px; margin-top: 3px; }
.pension-intro__desc { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.pension-intro__note { text-align: center; font-size: 11.5px; color: var(--text-2); margin-top: 12px; }

/* Wizard-rot: flex-kolonn där .pension-wz__body ensam scrollar och
   .pension-wz__bottom (tray + knapp) blir kvar i botten av den synliga
   ytan. Mönster hämtat från prototypens .wz-body/.wz-bottom
   (docs/prototypes/pension-redesign.html) — där sitter samma vy i en fast
   812px telefonram, här räknar vi i stället bort chromet ovanför
   .pension-wz på riktiga sidan: #top-bar (~57px), .pension-head (~60px)
   och .pension-page:s toppadding (var(--s-5)), samma
   calc(100dvh - var(--nav-height) - Npx)-mönster som redan används i
   .conv-wrap (css/pages/daily-analysis.css, css/pages/advice.css). */
.pension-wz {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-height) - 137px);
}
.pension-wz.hidden { display: none; }
.pension-wz__body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 6px 0 10px;
}
.pension-wz__body::-webkit-scrollbar { display: none; }
.pension-wz__bottom { padding-top: 10px; }
.pension-wz__top { display: flex; align-items: center; gap: 12px; padding: 6px 0 8px; }
.pension-wz__back {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--text-1);
}
.pension-progress { display: flex; gap: 5px; flex: 1; }
.pension-progress i { height: 4px; flex: 1; border-radius: 999px; background: var(--border); transition: background var(--dur-normal); }
.pension-progress i.done { background: var(--pension-ly-jobbet); }
.pension-wz__steplabel { font-size: 11px; font-weight: 700; color: var(--text-2); letter-spacing: 0.06em; }

.pension-step { display: none; }
.pension-step.active { display: block; animation: pension-step-in 0.4s var(--ease-spring); }
@keyframes pension-step-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.pension-step h2 { font-family: var(--ev-font-display, var(--font-display)); font-size: 26px; font-weight: 500; line-height: 1.15; margin: 4px 0; }
.pension-step__sub { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin-bottom: 12px; }
.pension-field { margin-bottom: 14px; }
.pension-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.pension-hint { font-size: 12px; color: var(--text-2); margin-top: 6px; }

.pension-bignum { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pension-bignum b { font-family: var(--ev-font-display, var(--font-display)); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; }
.pension-bignum small { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pension-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ev-mint-soft, var(--accent-subtle)); color: var(--ev-mint-deep, var(--accent));
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; margin-top: 6px;
}
.pension-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pension-chip {
  font-size: 14px; font-weight: 700; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-1); border-radius: 999px; padding: 9px 16px; cursor: pointer;
  transition: all var(--dur-normal) var(--ease-spring);
}
.pension-chip.sel { background: var(--text-1); color: var(--surface); border-color: var(--text-1); }
.pension-chip__sub { display: block; font-size: 10px; font-weight: 600; opacity: 0.55; }

.pension-numfield { position: relative; }
.pension-numfield input {
  width: 100%; font-size: 20px; font-weight: 700; color: var(--text-1);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 72px 14px 16px; font-family: inherit;
}
.pension-numfield__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: var(--text-2); pointer-events: none; }
.pension-warn {
  display: none; gap: 8px; align-items: flex-start;
  background: var(--warning-subtle); border: 1px solid var(--warning-line);
  border-radius: 12px; padding: 10px 12px; margin-top: 10px;
  font-size: 12.5px; line-height: 1.45; color: var(--ev-gold-text, #8A6A24);
}
.pension-warn.show { display: flex; }

.pension-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); background: none; border: none; cursor: pointer; padding: 6px 0; }
.pension-toggle__tick { width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--surface); display: grid; place-items: center; color: transparent; transition: all var(--dur-fast); }
.pension-toggle.on .pension-toggle__tick { background: var(--text-1); border-color: var(--text-1); color: var(--surface); }

.pension-sliderval { text-align: right; font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.pension-sliderval b { font-family: var(--ev-font-display, var(--font-display)); font-size: 20px; color: var(--text-1); font-weight: 500; }
.pension-derived {
  display: flex; align-items: center; gap: 10px;
  background: var(--ev-gold-soft, var(--warning-subtle)); border: 1px solid var(--warning-line);
  border-radius: 14px; padding: 12px 14px; font-size: 13.5px; color: var(--ev-gold-text, #8A6A24);
}
.pension-derived b { font-family: var(--ev-font-display, var(--font-display)); font-size: 18px; }

.pension-wz__status { display: flex; gap: 9px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; margin-top: 16px; font-size: 13.5px; line-height: 1.5; }
.pension-wz__status--good { background: var(--ev-mint-soft, var(--gain-subtle)); color: var(--ev-mint-deep, var(--gain)); }
.pension-wz__status--mid  { background: var(--ev-gold-soft, var(--warning-subtle)); color: var(--ev-gold-text, #8A6A24); }
.pension-wz__status--low  { background: var(--ev-loss-soft, var(--loss-subtle)); color: var(--ev-loss-text, var(--loss)); }

.pension-wz__next {
  width: 100%; font-size: 15px; font-weight: 700; border: none; border-radius: 16px;
  padding: 15px 20px; cursor: pointer; background: var(--text-1); color: var(--surface);
  transition: transform var(--dur-normal) var(--ease-spring);
}
.pension-wz__next:active { transform: scale(0.97); }

.pension-tray {
  position: sticky; bottom: 0; margin-top: 10px;
  background: var(--ev-paper-2, var(--surface-elevated));
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0; padding: 11px 16px 16px;
}
.pension-tray__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pension-tray__title { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.pension-tray__total { font-size: 12px; color: var(--text-2); }
.pension-tray__total b { font-family: var(--ev-font-display, var(--font-display)); font-size: 19px; color: var(--text-1); font-weight: 500; }
.pension-tray__flex { display: flex; gap: 16px; align-items: stretch; }
.pension-tray__col { width: 64px; height: 78px; }
.pension-tray__rows { flex: 1; display: flex; flex-direction: column-reverse; justify-content: space-between; gap: 4px; }
.pension-tray__row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.pension-tray__row .dot { opacity: 0.35; }
.pension-tray__row.on { color: var(--text-1); }
.pension-tray__row.on .dot { opacity: 1; }
.pension-tray__row b { font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }

/* Range-reglage (delas av wizard + dashboard) */
.pension-page input[type="range"], .pension-wizard-v2 input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--pension-ly-jobbet) var(--fill, 50%), var(--border) var(--fill, 50%));
  cursor: pointer;
}
.pension-page input[type="range"]::-webkit-slider-thumb, .pension-wizard-v2 input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--text-1); border: 3px solid var(--surface);
  box-shadow: 0 3px 10px rgba(11,35,27,0.35);
}
.pension-page input[type="range"]::-moz-range-thumb, .pension-wizard-v2 input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-1); border: 3px solid var(--surface);
}

/* ═══ Dashboard v2: hero + källor ═══ */
.pension-import-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 14px; }
.pension-import-row__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pension-ly-jobbet); }
.pension-import-row button { font-size: 12px; font-weight: 700; color: var(--ev-mint-deep, var(--accent)); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; }

.pension-hero {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-md);
}
.pension-hero__edit {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--text-1);
}
.pension-hero__flex { display: flex; gap: 20px; align-items: stretch; }
.pension-hero__col { width: 84px; min-height: 150px; }
.pension-hero__main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.pension-hero__label { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: normal; }
.pension-hero__amount {
  font-family: var(--ev-font-display, var(--font-display)); font-size: 42px; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05; margin: 4px 0 2px; font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.pension-hero__unit { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pension-hero__cov { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; border-radius: 999px; padding: 6px 12px; margin-top: 12px; font-size: 12.5px; font-weight: 700; }
.pension-hero__cov-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pension-hero__cov--high { background: var(--gain-subtle); color: var(--ev-mint-deep, var(--gain)); }
.pension-hero__cov--mid  { background: var(--warning-subtle); color: var(--ev-gold-text, #8A6A24); }
.pension-hero__cov--low  { background: var(--loss-subtle); color: var(--loss); }

.pension-ageblock { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pension-ageblock__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.pension-ageblock__val { font-weight: 400; font-size: 13px; color: var(--text-2); }
.pension-ageblock__val b { font-family: var(--ev-font-display, var(--font-display)); font-size: 20px; color: var(--text-1); font-weight: 500; }
.pension-ageblock__ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-2); margin-top: 7px; padding: 0 4px; }

.pension-legend { padding: 6px 18px; margin-top: 14px; }
.pension-legend__row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.pension-legend__row + .pension-legend__row { border-top: 1px solid var(--border); }
.pension-legend__row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pension-legend__row .dot--staten { background: var(--pension-ly-staten); }
.pension-legend__row .dot--jobbet { background: var(--pension-ly-jobbet); }
.pension-legend__row .dot--du     { background: var(--pension-ly-du); }
.pension-legend__info { flex: 1; min-width: 0; }
.pension-legend__name { font-size: 14px; font-weight: 700; }
.pension-legend__src { font-size: 11.5px; color: var(--text-2); margin-top: 1px; }
.pension-legend__val { text-align: right; }
.pension-legend__val b { font-family: var(--ev-font-display, var(--font-display)); font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pension-legend__val small { display: block; font-size: 10.5px; color: var(--text-2); }

.pension-footer { text-align: center; font-size: 11px; color: var(--text-2); line-height: 1.6; margin-top: 26px; }

/* ═══ Dashboard v2: sektioner ═══ */
.pension-sect-title { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-2); margin: 22px 4px 10px; }
.pension-cone__caption { font-size: 12px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--text-2); line-height: 1.5; margin-bottom: 10px; }
.pension-cone__note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; margin-top: 12px; }
.pension-cone__note--warn { color: var(--ev-gold-text, #8A6A24); }
.pension-cone__note--ok { color: var(--ev-mint-deep, var(--gain)); }
.pension-whatif__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.pension-whatif__verdict { display: flex; gap: 9px; align-items: flex-start; border-radius: 12px; padding: 11px 13px; margin-top: 14px; font-size: 13px; line-height: 1.5; }
.pension-whatif__verdict--high { background: var(--gain-subtle); color: var(--ev-mint-deep, var(--gain)); }
.pension-whatif__verdict--mid  { background: var(--warning-subtle); color: var(--ev-gold-text, #8A6A24); }
.pension-whatif__verdict--low  { background: var(--loss-subtle); color: var(--loss); }
.pension-retchips { display: flex; gap: 8px; margin-bottom: 4px; }
.pension-retchips .pension-chip { flex: 1; text-align: center; padding: 10px 6px; }
.pension-assump { margin-top: 14px; }
.pension-assump summary { font-size: 13px; font-weight: 700; color: var(--text-2); cursor: pointer; list-style: none; display: flex; align-items: center; gap: 7px; }
.pension-assump summary::-webkit-details-marker { display: none; }
.pension-assump summary i { transition: transform var(--dur-normal) var(--ease-spring); }
.pension-assump[open] summary i { transform: rotate(90deg); }
.pension-assump ul { margin: 10px 0 0 4px; list-style: none; padding: 0; }
.pension-assump li { font-size: 12.5px; line-height: 1.55; color: var(--text-2); padding-left: 16px; position: relative; margin-bottom: 7px; }
.pension-assump li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 2px; background: var(--pension-ly-jobbet); }

/* ═══ Dashboard v2: insikter + rekommendation ═══ */
.pension-insight { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.pension-insight + .pension-insight { border-top: 1px solid var(--border); }
.pension-insight b { color: var(--text-1); }
.pension-insight__ic { width: 30px; height: 30px; border-radius: 10px; flex-shrink: 0; background: var(--ev-mint-soft, var(--accent-subtle)); color: var(--ev-mint-deep, var(--accent)); display: grid; place-items: center; }
.pension-rec { background: linear-gradient(135deg, rgba(23,96,74,0.05), rgba(201,162,75,0.07)); border: 1px solid var(--border); border-radius: 16px; padding: 15px; margin-top: 12px; }
.pension-rec__tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ev-gold-text, #8A6A24); }
.pension-rec__title { font-family: var(--ev-font-display, var(--font-display)); font-size: 17px; margin: 7px 0 5px; }
.pension-rec__text { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.pension-rec__opts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pension-rec__opt { font-size: 12.5px; font-weight: 700; background: var(--surface); color: var(--text-1); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; cursor: pointer; }

/* ═══ Dashboard v2: "Boka rådgivningsmöte" — Kommer snart (Task 8, Leo-beslut) ═══
   Pension-scopad badge, matchar .settings-soon-badge (css/pages/settings.css)
   visuellt utan att återanvända den klassen tvärs sidor. */
.pension-soon-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--warning);
  color: #fff;
  white-space: nowrap;
}
.pension-ai__cta:disabled {
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--border);
  box-shadow: none;
  cursor: not-allowed;
}
.pension-ai__cta:disabled:hover,
.pension-ai__cta:disabled:active {
  background: var(--surface);
  color: var(--text-2);
  transform: none;
  box-shadow: none;
}

/* ── css/pages/loan.css ── */
.loan-page {
  padding: var(--s-5) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Stagger fade-up */
@keyframes loan-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Section heading (DM Serif) ─────────────────────────────── */
.loan-section-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--text-1);
  margin: var(--s-2) 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — total skuld + metrik-kort (ingen blur-blob)
   ═══════════════════════════════════════════════════════════════ */
.loan-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  animation: loan-fade-up var(--dur-normal) var(--ease-spring) both;
  animation-delay: var(--stagger, 0ms);
}

.loan-hero__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}

.loan-hero__total-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.loan-hero__total {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.loan-hero__unit {
  font-size: var(--text-lg);
  color: var(--text-2);
}

.loan-hero__free-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-4);
  padding: var(--s-1) var(--s-3);
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  width: max-content;
}

.loan-hero__free-badge i { font-size: 16px; }

.loan-hero__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
}

@media (min-width: 720px) {
  .loan-hero {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  .loan-hero__lead { flex-shrink: 0; }
  .loan-hero__metrics {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    flex: 1;
    max-width: 560px;
  }
}

.loan-hero__metric-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: box-shadow var(--dur-normal) ease, transform var(--dur-normal) var(--ease-spring);
}

.loan-hero__metric-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.loan-hero__metric-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.loan-hero__metric-value {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.loan-hero__metric-value--gain { color: var(--gain); }
.loan-hero__debtfree { color: var(--text-1); }

.loan-hero__metric-unit {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-2);
}

.loan-hero__metric-foot {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   LÅNELISTA — desktop grid / mobil staplad
   ═══════════════════════════════════════════════════════════════ */
.loan-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-2) var(--s-5);
}

.loan-list__header {
  display: none;
}

.loan-list__col {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.loan-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-md);
  border-bottom: 1px solid var(--border);
  margin: 0 calc(-1 * var(--s-3));
  transition: background var(--dur-normal) ease;
  animation: loan-fade-up var(--dur-normal) var(--ease-spring) both;
  animation-delay: var(--stagger, 0ms);
}

.loan-item:last-child { border-bottom: none; }
.loan-item:hover { background: var(--surface-elevated); }

.loan-item__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.loan-item__cell-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.loan-item__cell--name { justify-content: flex-start; }

.loan-item__rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  font-variant-numeric: tabular-nums;
}

.loan-item__rank-badge--high { background: var(--loss); }
.loan-item__rank-badge--mid  { background: var(--warning); }
.loan-item__rank-badge--low  { background: var(--accent-mid); }

.loan-item__type-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.loan-item__info { min-width: 0; }

.loan-item__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loan-item__sub {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 1px;
}

.loan-item__rate {
  font-size: var(--text-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

.loan-item__rate--high { color: var(--loss); }
.loan-item__rate--mid  { color: var(--warning); }

.loan-item__balance-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  min-width: 0;
}

.loan-item__balance {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.loan-item__bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.loan-item__bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 700ms var(--ease-spring);
}

.loan-item__bar-fill--high { background: var(--loss); }
.loan-item__bar-fill--mid  { background: var(--warning); }
.loan-item__bar-fill--low  { background: var(--accent-mid); }

.loan-item__pay {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* Desktop grid */
@media (min-width: 720px) {
  .loan-list__header {
    display: grid;
    grid-template-columns: 0.8fr 2.4fr 1.2fr 2fr 1.4fr;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--border);
  }
  .loan-list__col--rate,
  .loan-list__col--balance,
  .loan-list__col--pay { text-align: right; }

  .loan-item {
    grid-template-columns: 0.8fr 2.4fr 1.2fr 2fr 1.4fr;
    gap: var(--s-4);
    align-items: center;
  }
  .loan-item__cell { justify-content: flex-end; }
  .loan-item__cell--rank { justify-content: flex-start; }
  .loan-item__cell--name { justify-content: flex-start; gap: var(--s-3); }
  .loan-item__cell-label { display: none; }
  .loan-item__balance-wrap { align-items: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════
   STRATEGI — segment-toggle + slider
   ═══════════════════════════════════════════════════════════════ */
.loan-strategy {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.loan-strategy__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-1);
}

.loan-strategy__hint {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: 2px;
}

.loan-strategy-toggle {
  position: relative;
  display: flex;
  background: var(--surface-elevated);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}

.loan-strategy-toggle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--accent);
  border-radius: 999px;
  transition: transform 260ms var(--ease-spring);
  box-shadow: var(--shadow-sm);
}

.loan-strategy-toggle[data-active="snowball"]::before { transform: translateX(100%); }

.loan-strategy-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--s-2) var(--s-3);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-family: var(--font-ui);
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 999px;
  transition: color 220ms ease;
}

.loan-strategy-btn__name {
  font-size: var(--text-sm);
  font-weight: 600;
}

.loan-strategy-btn__tag {
  font-size: 11px;
  opacity: 0.85;
}

.loan-strategy-btn.active { color: #fff; }

/* Slider */
.loan-slider-row {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.loan-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-sm);
  color: var(--text-2);
}

.loan-slider-value {
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.loan-slider-impact {
  font-size: var(--text-sm);
  color: var(--gain);
}

input[type="range"].loan-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  outline: none;
  cursor: pointer;
}

input[type="range"].loan-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

input[type="range"].loan-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* ── Chart card ───────────────────────────────────────────── */
.loan-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.loan-chart-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-1);
}

.loan-chart-wrap {
  min-height: 240px;
}

/* ═══════════════════════════════════════════════════════════════
   JÄMFÖRELSEKORT
   ═══════════════════════════════════════════════════════════════ */
.loan-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.loan-compare-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-4) var(--s-5);
}

.loan-compare-card--winner {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.loan-compare-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-3);
}

.loan-compare-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-1);
}

.loan-compare-card__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 3px var(--s-2);
  border-radius: 999px;
  white-space: nowrap;
}

.loan-compare-card__row + .loan-compare-card__row { margin-top: var(--s-3); }

.loan-compare-card__metric {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.loan-compare-card__metric--sm { font-size: var(--text-sm); }

.loan-compare-card__sub {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   INVESTERA VS AMORTERA (analyst)
   ═══════════════════════════════════════════════════════════════ */
.loan-invest-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.loan-invest-section__lead {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.loan-invest-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.loan-invest-option {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.loan-invest-option__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}

.loan-invest-option__return {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

.loan-invest-option__desc {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: var(--s-2);
  line-height: 1.5;
}

.loan-invest-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--text-xs);
  color: var(--text-1);
  line-height: 1.5;
  padding: var(--s-3);
  background: var(--warning-subtle);
  border-radius: var(--r-md);
}

.loan-invest-warning i {
  color: var(--warning);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.loan-invest-verdict {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.loan-invest-verdict--gain { color: var(--gain); }

/* ═══════════════════════════════════════════════════════════════
   AI-ANALYSKORT — signaturgradient
   ═══════════════════════════════════════════════════════════════ */
.loan-ai-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface-elevated), var(--surface), var(--accent-subtle));
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.loan-ai-card__deco {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  font-size: 48px;
  color: var(--accent-light);
  opacity: 0.35;
  pointer-events: none;
}

.loan-ai-card__header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.loan-ai-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.loan-ai-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--accent);
}

.loan-ai-card__pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gain);
  animation: loan-ai-pulse 2s ease-in-out infinite;
}

@keyframes loan-ai-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.loan-ai-card__body {
  max-width: 64ch;
}

.loan-ai-loading {
  color: var(--text-2);
  font-size: var(--text-sm);
}

.loan-ai-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

.loan-ai-card__conf {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.loan-ai-card__conf-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.loan-ai-card__dots {
  display: inline-flex;
  gap: 4px;
}

.loan-ai-card__dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
}

.loan-ai-card__dots span.is-on { background: var(--gain); }

.loan-ai-card__conf-word {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gain);
}

.loan-ai-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms var(--ease-spring), box-shadow 150ms ease, background 150ms ease;
}

.loan-ai-card__cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--accent-mid);
}

.loan-ai-card__cta:active { transform: scale(0.97); }
.loan-ai-card__cta i { font-size: 16px; }

/* AI response text styles */
.ai-response--text .ai-response__para {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.65;
  margin: 0 0 var(--s-2);
}

.ai-response--text .ai-response__para:last-child { margin-bottom: 0; }

.ai-response--text .ai-response__item {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
}

.ai-response--text .ai-response__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ai-response__item-num {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ai-response__item-body {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.65;
  flex: 1;
}

.ai-response__inline-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  margin: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING-WIZARD
   ═══════════════════════════════════════════════════════════════ */
.loan-wizard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  max-width: 460px;
  margin: var(--s-4) auto;
  box-shadow: var(--shadow-md);
}

.loan-wizard__header {
  text-align: center;
  margin-bottom: var(--s-5);
}

.loan-wizard__header-icon {
  width: 52px;
  height: 52px;
  background: var(--accent-subtle);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-3);
  font-size: 24px;
  color: var(--accent);
}

.loan-wizard__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-1);
  margin-bottom: var(--s-1);
}

.loan-wizard__sub {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.loan-wizard__type-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}

.loan-wizard__type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.loan-type-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-2);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.loan-type-tile i { font-size: 20px; }

.loan-type-tile:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}

.loan-type-tile.active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 700;
}

.loan-wizard__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.loan-wizard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}

.loan-wizard__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.loan-wizard__field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}

.loan-wizard__field input {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  color: var(--text-1);
  font-size: var(--text-md);
  font-family: var(--font-ui);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  width: 100%;
  box-sizing: border-box;
}

.loan-wizard__field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle-2);
}

.loan-wizard__actions { margin-top: var(--s-2); }

.loan-wizard__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 150ms var(--ease-spring), box-shadow 150ms ease, background 150ms ease;
}

.loan-wizard__btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: var(--accent-mid);
}

.loan-wizard__btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Responsiv finputs */
@media (max-width: 480px) {
  .loan-compare,
  .loan-invest-row { grid-template-columns: 1fr; }
  .loan-hero { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .loan-hero,
  .loan-item,
  .loan-item__bar-fill,
  .loan-ai-card__pulse,
  .loan-strategy-toggle::before { animation: none !important; transition: none !important; }
}

/* ── css/pages/ekonomi.css ── */
.ekonomi-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Header-bandet ärver full sidbredd (ekonomi-wrappern saknar h-padding,
   till skillnad från t.ex. .hem-page). Inset:a det till samma 16px-kolumn
   som korten nedanför så lockup-texten linjerar med kortinnehållet. */
.ekonomi-page .page-header {
  margin-inline: var(--s-4);
}

/* ═══════════════════════════════════════════════════════════════
   STITCH-ÖVERSIKT (överst)
   ═══════════════════════════════════════════════════════════════ */
.ekonomi-overview {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-4);
}
/* Hero-only wrapper: heron ligger överst; detaljvyn följer direkt.
   Släpp bottenpaddingen så pill-raden hamnar nära heron. */
.ekonomi-overview--hero { padding-bottom: var(--s-2); }

/* ── Sidhuvud ─────────────────────────────────────────────── */
.ekonomi-head__title {
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.15;
  color: var(--text-1);
}
.ekonomi-head__sub {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: var(--s-1);
  line-height: 1.5;
}

/* ── Gemensamt kort ───────────────────────────────────────── */
/* Sekundärkort på tonad viloyta + elev-1. Heron (nedan) stannar vit
   med elev-2 så den poppar mot dessa. */
.ekonomi-card {
  background: var(--surface-container-low);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--elev-1);
  border: none;
}
.ekonomi-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}
.ekonomi-card__title {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.ekonomi-card__meta {
  font-size: var(--text-xs);
  color: var(--text-2);
  font-weight: 500;
}

/* ── Hero: total förmögenhet ──────────────────────────────── */
.ekonomi-hero {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-5) 0;
  box-shadow: var(--elev-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.ekonomi-hero__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.ekonomi-hero__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-1);
}
.ekonomi-hero__value {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.ekonomi-hero__spark { height: 56px; margin: var(--s-4) calc(-1 * var(--s-5)) 0; }
.ekonomi-hero__spark svg { width: 100%; height: 100%; display: block; }

.ekonomi-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s-2);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-xs);
}
.ekonomi-pill.is-gain { background: var(--gain-subtle); color: var(--gain); }
.ekonomi-pill.is-loss { background: var(--loss-subtle); color: var(--loss); }

/* ── Kassaflöde ───────────────────────────────────────────── */
.ekonomi-flow__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.ekonomi-flow__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.ekonomi-flow__row--total { border-bottom: none; padding-bottom: 0; }
.ekonomi-flow__label { font-size: var(--text-sm); color: var(--text-2); }
.ekonomi-flow__label.is-strong { color: var(--text-1); font-weight: 600; }
.ekonomi-flow__val {
  font-size: 18px;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.ekonomi-flow__val.is-income { color: var(--accent-mid); }
.ekonomi-flow__val.is-savings {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gain);
}
.ekonomi-flow__bar {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: var(--s-4);
  background: var(--border);
}
.ekonomi-flow__bar-seg { height: 100%; }
.ekonomi-flow__bar-seg.is-expenses { background: var(--accent-mid); }
.ekonomi-flow__bar-seg.is-savings { background: var(--gain); }
.ekonomi-flow__bar-legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: var(--s-2);
}

/* ── Tillgångsfördelning ──────────────────────────────────── */
.ekonomi-stack {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}
.ekonomi-stack__seg { height: 100%; }
.ekonomi-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
}
.ekonomi-legend__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.ekonomi-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ekonomi-legend__label {
  font-size: var(--text-sm);
  color: var(--text-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ekonomi-legend__pct {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}

/* ── Bankkonton & kort ────────────────────────────────────── */
.ekonomi-account-list {
  display: flex;
  flex-direction: column;
}
.ekonomi-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.ekonomi-account:last-child { border-bottom: none; }
.ekonomi-account__lead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.ekonomi-account__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ekonomi-account__icon--loan {
  background: var(--loss-subtle);
  color: var(--loss);
}
.ekonomi-account__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ekonomi-account__name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ekonomi-account__sub {
  font-size: var(--text-sm);
  color: var(--text-2);
}
.ekonomi-account__value {
  font-size: var(--text-base);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ekonomi-account__value--neg { color: var(--loss); }

/* ═══════════════════════════════════════════════════════════════
   DETALJVY — bevarad Portfölj + Cashflow
   ═══════════════════════════════════════════════════════════════ */
.ekonomi-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* Sektionsavdelare — mjuk övergång från översikten ner till detaljvyn.
   Hårlinje + centrerad etikett med nedåtpil som antyder "scrolla för mer". */
.ekonomi-section-break {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) var(--s-4) var(--s-5);
}
.ekonomi-section-break__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--_dir, right),
    transparent, var(--border) 40%, var(--border));
}
.ekonomi-section-break__rule:last-child { --_dir: left; }
.ekonomi-section-break__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.ekonomi-section-break__label i {
  font-size: 15px;
  color: var(--accent);
  animation: ekonomi-break-nudge 2.4s ease-in-out infinite;
}
@keyframes ekonomi-break-nudge {
  0%, 70%, 100% { transform: translateY(0); }
  82% { transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .ekonomi-section-break__label i { animation: none; }
}

/* Sub-tab navigation — större, mer inbjudande pill-rad.
   Prominens höjd (Portfölj/Cashflow ska kännas som ett tydligt val),
   inte en diskret underline-flik. */
.ekonomi-tabs {
  display: flex;
  gap: var(--s-2);
  margin: 0 var(--s-4) var(--s-4);
  padding: var(--s-1);
  background: var(--surface-container-low);
  border-radius: 999px;
  width: fit-content;
}

.ekonomi-tab {
  background: none;
  border: none;
  border-radius: 999px;
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur-normal) var(--ease-standard),
              background var(--dur-normal) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
}

.ekonomi-tab:hover:not(.active) {
  color: var(--text-1);
  background: var(--surface-container);
}

/* Aktiv = teal-fylld pill med vit text — otvetydigt vald. */
.ekonomi-tab.active {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--elev-1);
}

/* Sub-tab content area */
.ekonomi-content {
  flex: 1;
}

/* Cashflow placeholder */
.cashflow-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 1rem;
}

.cashflow-placeholder__icon {
  color: var(--primary);
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.cashflow-placeholder__title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
}

.cashflow-placeholder__desc {
  font-size: 0.9rem;
  color: var(--text-2);
  max-width: 320px;
  line-height: 1.7;
  margin: 0;
}

.cashflow-placeholder__badge {
  display: inline-block;
  background: rgba(46, 122, 130, 0.15);
  border: 1px solid rgba(46, 122, 130, 0.3);
  color: var(--primary-light);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  margin-top: 0.5rem;
}

/* ── Innehavsrader → Signaler (klickbar affordance) ─────────
   Raderna renderas av portfolio.js inne i Ekonomi-tabben;
   Ekonomi lägger på länk-dekorationen (klass + chevron). */
.ekonomi-page .ekonomi-holding-link { cursor: pointer; }
.ekonomi-holding-link__chevron {
  font-size: 14px;
  color: var(--text-2);
  opacity: 0.45;
  margin-left: var(--s-2);
  flex-shrink: 0;
  transition: opacity var(--dur-normal) var(--ease-standard),
              color var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard);
}
.ekonomi-holding-link:hover .ekonomi-holding-link__chevron,
.ekonomi-holding-link:focus-visible .ekonomi-holding-link__chevron {
  opacity: 1;
  color: var(--accent);
  transform: translateX(2px);
}
.ekonomi-page .ekonomi-holding-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .ekonomi-holding-link__chevron { transition: none; }
}

/* ── Primär CTA — Fråga Sapiax om min fördelning ────────────
   Matchar "Fråga Sapiax"-kortet på Hem (hem-advice-cta). */
.ekonomi-ask__cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  text-align: left;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--r-xl);
  padding: var(--s-4) var(--s-5);
  font-family: var(--font-ui);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--dur-normal) var(--ease-standard),
              opacity var(--dur-normal) var(--ease-standard),
              transform var(--dur-normal) var(--ease-standard);
}
.ekonomi-ask__cta:hover { box-shadow: var(--elev-3); opacity: 0.94; }
.ekonomi-ask__cta:active { transform: scale(0.99); }
.ekonomi-ask__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.ekonomi-ask__text { flex: 1; display: flex; flex-direction: column; }
.ekonomi-ask__text strong { font-size: var(--text-base); font-weight: 600; }
.ekonomi-ask__text em { font-style: normal; font-size: var(--text-xs); opacity: 0.85; margin-top: 2px; }
.ekonomi-ask__arrow { font-size: 18px; opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Ekonomi prototyplayout (Kassaflöde)
   Scopat under body.app-ev. Flaggan APP_EVERGREEN_ENABLED=false → legacy-
   vyn ovan (hero + översikt + detaljflik med Portfölj/Cashflow), pixel-
   identisk. JS-grenen renderEvergreenEkonomi() bygger .eko-ev-page och
   renderar kassaflödespanelen direkt (Portfölj är sedan Etapp 8 Task 3
   egen nav-flik, #bevakning — se Etapp 8 beslut A).
   ═══════════════════════════════════════════════════════════════ */
body.app-ev .eko-ev-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--s-5) var(--s-4) var(--s-8);
}

/* Kort — vit yta, mjuk kant, prototypens radie/luft. */
body.app-ev .eko-ev-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
}

/* Månadskortet (.eko-flow-card) — Inkomster/Utgifter/Sparande + split-bar +
   sparkvots-not (proto rad 1891–1915, Etapp 9 Task 6). */
body.app-ev .eko-flow-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--ev-shadow-card);
}
body.app-ev .eko-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.app-ev .eko-fh-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-ink-40);
}
body.app-ev .eko-fh-month {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--ev-gold);
}
body.app-ev .eko-flow-rows { margin-top: 4px; }
body.app-ev .eko-flow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
}
body.app-ev .eko-flow-row + .eko-flow-row { border-top: 1px solid var(--ev-hairline); }
body.app-ev .eko-flow-row .fr-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
}
body.app-ev .fr-dot { width: 8px; height: 8px; border-radius: 3px; }
body.app-ev .fr-dot--in   { background: var(--sector-finans); }
body.app-ev .fr-dot--out  { background: var(--sector-kassa); }
body.app-ev .fr-dot--save { background: var(--ev-mint); }
body.app-ev .eko-flow-row .fr-val {
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.app-ev .fr-val.save { color: var(--ev-mint-deep); }
body.app-ev .eko-flow-bar {
  display: flex;
  height: 10px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 14px;
  gap: 2px;
}
body.app-ev .eko-flow-bar i { border-radius: 3px; }
body.app-ev .eko-flow-bar .fb-exp { background: var(--sector-kassa); }
body.app-ev .eko-flow-bar .fb-save { background: var(--ev-mint); }
body.app-ev .eko-flow-note {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 12px;
  line-height: 1.5;
}
body.app-ev .eko-flow-note b { color: var(--ev-mint-deep); font-weight: 800; }

/* Konton & kort (.eko-acct) — proto rad 1917–1948. */
body.app-ev .eko-acct-list { margin-top: 4px; }
body.app-ev .eko-acct {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-bottom: 1px solid var(--ev-hairline);
}
body.app-ev .eko-acct:last-child { border-bottom: none; }
body.app-ev .eko-acct-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--ev-paper-2);
  color: var(--ev-ink-2);
}
body.app-ev .eko-acct-icon.loan { background: rgba(226, 87, 75, 0.10); color: var(--ev-loss); }
body.app-ev .eko-acct-id { min-width: 0; flex: 1; }
body.app-ev .eko-acct-id .a-name { font-size: 14px; font-weight: 700; color: var(--text-1); }
body.app-ev .eko-acct-id .a-inst { font-size: 11.5px; color: var(--ev-ink-40); margin-top: 1px; }
body.app-ev .acct-val {
  margin-left: auto;
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  flex-shrink: 0;
}
body.app-ev .acct-val.neg { color: var(--ev-loss); }

/* Vertikal rytm mellan sektionerna (matchar prototypens .section-gap). */
body.app-ev .eko-acct-section,
body.app-ev .eko-cf-section { margin-top: 26px; }

/* Månadsstaplar (inkomster vs utgifter). */
body.app-ev .eko-ev-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
  padding: 6px 6px 0;
}
body.app-ev .eko-ev-bar-g {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
}
body.app-ev .eko-ev-stack {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
}
body.app-ev .eko-ev-bar {
  width: 12px;
  border-radius: 6px 6px 3px 3px;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
body.app-ev .eko-ev-bars.is-shown .eko-ev-bar { transform: scaleY(1); }
/* Etapp 9 Task 6: staplarna visar Utgifter/Sparande (ersätter Inkomster/
   Utgifter) — .is-in döps om till .is-save, .is-out byter till beige
   (ersätter mörkgröna --ev-ink-3-varianten). .is-dim tonar ner alla
   sparande-staplar utom den senaste månaden (proto rad 2288). */
body.app-ev .eko-ev-bar.is-out { background: var(--sector-kassa); }
body.app-ev .eko-ev-bar.is-save { background: var(--ev-mint); }
body.app-ev .eko-ev-bar.is-save.is-dim { opacity: 0.55; }
body.app-ev .eko-ev-bar-m {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ev-txt-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.app-ev .eko-ev-bars-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 12px 0 2px;
  font-size: 11.5px;
  color: var(--ev-txt-2);
  font-weight: 600;
}
body.app-ev .eko-ev-bars-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 5px;
}
body.app-ev .eko-ev-bars-legend i.is-out { background: var(--sector-kassa); }
body.app-ev .eko-ev-bars-legend i.is-save { background: var(--ev-mint); }

/* Sektionsetikett ("Kommande utgifter"). */
body.app-ev .eko-ev-seclabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-txt-2);
  margin: var(--s-5) var(--s-1) var(--s-3);
}

/* Kommande utgifter-rader (ikon · namn · förfallodag · belopp). */
body.app-ev .eko-ev-rows { padding: var(--s-1) var(--s-4); }
body.app-ev .eko-ev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
}
body.app-ev .eko-ev-row + .eko-ev-row { border-top: 1px solid var(--border); }
body.app-ev .eko-ev-row__ico {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  flex: none;
  background: var(--ev-paper-2);
  color: var(--ev-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
body.app-ev .eko-ev-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body.app-ev .eko-ev-row__t {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
body.app-ev .eko-ev-row__s {
  font-size: 12px;
  color: var(--ev-txt-2);
  margin-top: 1px;
}
body.app-ev .eko-ev-row__val {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration 0.01ms på *) — inget filspecifikt guard-block behövs här. */

/* ── Etapp 8 Task 5: guld-nudge "Sapiax har hittat" ─────────── */
body.app-ev .eko-ev-nudge {
  background: linear-gradient(150deg, var(--ev-gold-tint), #FBF4E4);
  border: 1px solid rgba(201, 162, 75, 0.4);
  border-radius: 20px;
  padding: 17px;
  margin-top: var(--s-3);
  cursor: pointer;
  transition: transform var(--dur-fast);
}
body.app-ev .eko-ev-nudge:active { transform: scale(0.98); }
body.app-ev .eko-ev-nudge__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ev-gold-text);
}
body.app-ev .eko-ev-nudge__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-top: var(--s-2);
}
body.app-ev .eko-ev-nudge__text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
  margin-top: 6px;
}
body.app-ev .eko-ev-nudge__save {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--ev-mint-deep);
  margin-top: var(--s-3);
}

/* Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px */
@media (max-width: 430px) {
  body.app-ev .eko-ev-bar-m { font-size: 12px; }
  body.app-ev .eko-ev-seclabel { font-size: 12px; }
  /* Etapp 8-fynd (guld-nudge, ej i ursprungstabellen): 10,5px under golvet. */
  body.app-ev .eko-ev-nudge__tag { font-size: 11px; }
}

/* ── css/pages/bevakning.css ── */
.bevakning-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-4) calc(var(--s-8) + var(--s-4));
}

/* ── Hero ─────────────────────────────────────────────────── */
.bevakning-hero { margin-bottom: var(--s-1); }
.bevakning-hero__title {
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.1;
  color: var(--text-1);
}
.bevakning-hero__sub {
  margin-top: var(--s-1);
  color: var(--text-2);
  font-size: var(--text-base);
}

/* ── Sektion ──────────────────────────────────────────────── */
.bevakning-section { display: flex; flex-direction: column; gap: var(--s-3); }
.bevakning-section__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* ── Filter-pills (händelser) ─────────────────────────────── */
.bevakning-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.bevakning-filter-pill {
  position: relative;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.bevakning-filter-pill:hover {
  color: var(--accent-mid);
  border-color: var(--accent-light);
}
.bevakning-filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* Task C2 — ripplen flyttad till ett inre span (.pill-ripple) som bär
   overflow: hidden, så det yttre .bevakning-filter-pill (tap-target)
   kan lämna sin .tap-target::after-träffyta oklippt. Span bär exakt
   samma padding som knappen tidigare hade → identisk box på desktop. */
.bevakning-filter-pill .pill-ripple {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  padding: 6px var(--s-3);
  border-radius: inherit;
}

/* ── Bevakade innehav ─────────────────────────────────────── */
.bevakning-holdings {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  overflow: hidden;
}
.bevakning-holding {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.bevakning-holding:hover { background: var(--accent-subtle); }
.bevakning-holding:active { background: var(--surface-3); }
.bevakning-holding__divider { height: 1px; background: var(--border); margin: 0 var(--s-4); }

.bevakning-holding__id {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
}
.bevakning-holding__avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--accent-subtle);
  color: var(--accent-mid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: 700;
  flex-shrink: 0;
}
.bevakning-holding__ticker { font-weight: 600; font-size: var(--text-sm); color: var(--text-1); }
.bevakning-holding__name {
  font-size: var(--text-xs);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bevakning-holding__price {
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.bevakning-holding__value { font-size: var(--text-sm); font-weight: 600; color: var(--text-1); }
.bevakning-holding__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 1px;
}
.bevakning-holding__delta.is-gain { color: var(--gain); }
.bevakning-holding__delta.is-loss { color: var(--loss); }
.bevakning-holding__spark {
  width: 64px;
  height: 24px;
  flex-shrink: 0;
}

/* ── Aktuella händelser ───────────────────────────────────── */
.bevakning-events { display: flex; flex-direction: column; gap: var(--s-3); }
.bevakning-event {
  display: flex;
  gap: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  transition: box-shadow var(--dur-normal), border-color var(--dur-fast);
}
.bevakning-event:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-subtle);
}
.bevakning-event--link { cursor: pointer; }
.bevakning-event__chevron {
  align-self: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--text-2);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.bevakning-event--link:hover .bevakning-event__chevron {
  color: var(--accent-mid);
  transform: translateX(2px);
}
.bevakning-event__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.bevakning-event__icon--accent  { background: var(--accent-subtle); color: var(--accent-mid); }
.bevakning-event__icon--warning { background: var(--warning-subtle); color: var(--warning); }
.bevakning-event__icon--gain    { background: var(--gain-subtle); color: var(--gain); }
.bevakning-event__icon--loss    { background: var(--loss-subtle); color: var(--loss); }
.bevakning-event__body { flex: 1; min-width: 0; }
.bevakning-event__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.bevakning-event__tag {
  padding: 3px var(--s-2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.bevakning-event__tag--accent  { background: var(--accent-subtle); color: var(--accent-mid); }
.bevakning-event__tag--warning { background: var(--warning-subtle); color: var(--warning); }
.bevakning-event__tag--gain    { background: var(--gain-subtle); color: var(--gain); }
.bevakning-event__tag--loss    { background: var(--loss-subtle); color: var(--loss); }
.bevakning-event__time { font-size: 12px; color: var(--text-2); flex-shrink: 0; }
.bevakning-event__text {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.45;
}

/* ── Empty state (tom filterkategori) ─────────────────────── */
.bevakning-empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-2);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

/* ── Primär CTA (Fråga Sapiax) ────────────────────────────── */
.bevakning-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-4);
  border: none;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur-fast), box-shadow var(--dur-normal), transform var(--dur-fast);
}
.bevakning-cta:hover {
  background: var(--accent-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.bevakning-cta:active { transform: translateY(0); }
.bevakning-cta i { font-size: 20px; }

/* ═══════════════════════════════════════════════════════════════
   APP EVERGREEN & IVORY — Etapp 9 Task 5 (Portfölj)
   Nytt block, scopat under body.app-ev. Rör INTE reglerna ovan —
   flaggan APP_EVERGREEN_ENABLED=false lämnar dagens Bevakning pixel-identisk.
   Ersätter Etapp 4/6/8:s score-chip/7-signalpanel/live-badge-CSS (retirerad
   markup, se js/pages/bevakning.js) med prototypens hårlinjelista +
   hd-grid-expander (docs/prototypes/app-redesign-mobil.html rad 672–843).
   ═══════════════════════════════════════════════════════════════ */

/* ── Logo-chip (innehav 42×42/radius 14, proto rad 731–733) ──── */
body.app-ev .bevakning-logo {
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
body.app-ev .bevakning-logo img { width: 26px; height: 26px; object-fit: contain; }
body.app-ev .bevakning-logo--fallback {
  background: var(--ev-mint-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 560;
  font-size: 17px;
  color: var(--ev-mint-deep);
}

/* ── Innehavslista: hårlinjelista (kort-wrappern borttagen) ───── */
body.app-ev .bevakning-holdings {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
body.app-ev .bevakning-holding--ev {
  display: block;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px solid var(--ev-hairline);
}
body.app-ev .bevakning-holding--ev:hover,
body.app-ev .bevakning-holding--ev:active {
  background: none;
}
body.app-ev .bevakning-holding--ev:focus-visible {
  outline: 2px solid var(--ev-mint-deep);
  outline-offset: -2px;
}
body.app-ev .bevakning-holding--ev .bevakning-holding__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  transition: background var(--dur-fast);
}
/* Subtil hover/is-open-markering på enbart headern — aldrig en heltäckande
   fyllning över hela (nu eventuellt expanderade) raden). */
body.app-ev .bevakning-holding--ev:hover .bevakning-holding__top,
body.app-ev .bevakning-holding--ev.is-open .bevakning-holding__top {
  background: var(--ev-paper-2);
}
body.app-ev .bevakning-holding--ev .bevakning-holding__id {
  flex: 1;
  min-width: 0;
}
body.app-ev .h-id { min-width: 0; }
body.app-ev .h-ticker { font-size: 14.5px; font-weight: 800; color: var(--text-1); }
body.app-ev .h-name {
  font-size: 11.5px;
  color: var(--ev-ink-40);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.app-ev .h-num { text-align: right; flex-shrink: 0; }
body.app-ev .h-val {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
body.app-ev .h-delta {
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}
body.app-ev .h-delta.up   { color: var(--ev-mint-deep); }
body.app-ev .h-delta.down { color: var(--ev-loss); }
body.app-ev .h-delta.flat { color: var(--ev-ink-40); }
body.app-ev .bevakning-holding__chevron {
  flex-shrink: 0;
  color: var(--ev-ink-40);
  transition: transform var(--dur-normal);
}
body.app-ev .bevakning-holding--ev.is-open .bevakning-holding__chevron { transform: rotate(90deg); }

/* ── Expanderbar hd-grid (ersätter 7-signalpanelen) ───────────── */
body.app-ev .holding-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}
/* 220px (proto: 180px) — vår version lägger till "Öppna i signalvyn"-länken
   som inte finns i den statiska prototypen, så expandern behöver lite mer rum. */
body.app-ev .bevakning-holding--ev.is-open .holding-detail { max-height: 220px; }
body.app-ev .hd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 2px 0 16px;
}
body.app-ev .hd-cell {
  background: var(--ev-paper-2);
  border-radius: 12px;
  padding: 9px 10px;
  text-align: center;
}
body.app-ev .hd-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ev-ink-40);
}
body.app-ev .hd-v {
  font-size: 13px;
  font-weight: 800;
  margin-top: 3px;
  color: var(--text-1);
}
body.app-ev .hd-v.up   { color: var(--ev-mint-deep); }
body.app-ev .hd-v.down { color: var(--ev-loss); }
body.app-ev .hd-signal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  padding: 10px var(--s-3);
  border: none;
  border-radius: var(--r-md);
  background: var(--ev-paper-2);
  color: var(--ev-mint-deep);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast);
  appearance: none;
}
body.app-ev .hd-signal-link:active { transform: scale(0.98); }

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration 0.01ms på *) — inget filspecifikt guard-block behövs här. */

/* ── Summeringshuvud (Portfölj) ───────────────────────────────── */
body.app-ev .bevakning-sum { margin-bottom: var(--s-5); }
body.app-ev .bevakning-sum__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
}
body.app-ev .bevakning-sum__row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-top: var(--s-1);
}
body.app-ev .bevakning-sum__value {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 450;
  letter-spacing: -0.02em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
body.app-ev .bevakning-sum__delta { font-size: 14px; font-weight: 700; }
body.app-ev .bevakning-sum__delta.is-gain { color: var(--ev-mint-deep); }
body.app-ev .bevakning-sum__delta.is-loss { color: var(--ev-loss-text); }
body.app-ev .bevakning-sum__bar {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
  margin-top: var(--s-4);
}
body.app-ev .bevakning-sum__bar i { display: block; height: 100%; border-radius: 2px; }
body.app-ev .bevakning-sum__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
}
body.app-ev .bevakning-sum__legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
body.app-ev .bevakning-sum__legend b { color: var(--text-1); font-weight: 800; }
body.app-ev .bevakning-sum__swatch {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  display: inline-block;
}

/* ── Innehavsrubrik ("Innehav · 7" + Sortera) ─────────────────── */
body.app-ev .ev-h-section { margin-bottom: var(--s-2); }

/* ── Händelser: platta rader (kortwrappern borttagen) ─────────── */
body.app-ev .bevakning-events { display: flex; flex-direction: column; gap: 0; }
body.app-ev .bevakning-event {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 14px 0;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ev-hairline);
  border-radius: 0;
  box-shadow: none;
  transition: background var(--dur-fast);
}
body.app-ev .bevakning-event:last-child { border-bottom: none; }
body.app-ev .bevakning-event:hover { box-shadow: none; border-color: transparent; }
body.app-ev .bevakning-event--link:hover { background: var(--ev-paper-2); }
body.app-ev .bevakning-event__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}
body.app-ev .bevakning-event__icon--insider { background: var(--ev-gold-wash); color: #9A7A2E; }
body.app-ev .bevakning-event__icon--news    { background: var(--ev-mint-wash); color: var(--ev-mint-deep); }
body.app-ev .bevakning-event__icon--signal  { background: rgba(31, 94, 102, 0.10); color: #1F5E66; }
body.app-ev .bevakning-event__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0;
}
body.app-ev .e-type--insider { color: #9A7A2E; }
body.app-ev .e-type--news    { color: var(--ev-mint-deep); }
body.app-ev .e-type--signal  { color: #1F5E66; }
body.app-ev .e-time {
  color: var(--ev-ink-40);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}
body.app-ev .bevakning-event__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 4px;
}
body.app-ev .bevakning-event__text b { color: var(--text-1); font-weight: 700; }

/* Mobil typografigolv (juli 2026): ingen synlig text <11px, metadata 12px */
@media (max-width: 430px) {
  .bevakning-section__label { font-size: 12px; }
  .bevakning-holding__name { font-size: 12px; }
  .bevakning-filter-pill { font-size: 12px; }
  .bevakning-event__tag { font-size: 11px; }
  /* Etapp 8-fynd (summeringshuvud, ej i ursprungstabellen): samma
     eyebrow/metadata-mönster som redan höjts i övriga filer. */
  body.app-ev .bevakning-sum__eyebrow { font-size: 12px; }
  /* Etapp 9 Task 5: hd-k under golvet i prototypen (9.5px) — höjs till 11px. */
  body.app-ev .hd-k { font-size: 11px; }
  /* Etapp 9 Task 5 (review-fix): händelse-metan (e-type/e-time) är 10.5px i
     prototypen — under golvet; höjs till 11px på mobil, desktop behåller proto. */
  body.app-ev .bevakning-event__meta { font-size: 11px; }
}

/* Task C2 — tap-yta: filterpiller ≥36px synlig höjd (audit-gränsen), bredare
   horisontell padding på touch-bredd. */
@media (max-width: 430px) {
  .bevakning-filter-pill .pill-ripple { min-height: 36px; padding-inline: var(--s-4); }
}

/* Task C4 — "+0 , 4 %"-mellanrummen (legacy-raden, .bevakning-holding__price):
   textContent är korrekt (verifierat i test — inga narrow-no-break-spaces,
   ingen bruten strängbyggnad). Roten är font-variant-numeric: tabular-nums,
   som i den här typsnittsstacken ger decimalkommat samma fasta siffer-bredd
   som en hel siffra — kommat "flyter" i en för bred glyfruta och ser ut som
   mellanslag på båda sidor vid 12px. Nollställs bara under 430px. Etapp 9
   Task 5: EV-radens motsvarande klass (.bevakning-holding__meta) är
   retirerad — se js/pages/bevakning.js — så den halvan av fixen är borttagen
   härifrån; legacy-halvan (.bevakning-holding__price) rör vi INTE. */
@media (max-width: 430px) {
  .bevakning-holding__price {
    font-variant-numeric: normal;
  }
}

/* ── css/pages/cashflow.css ── */
.cashflow-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-bottom: 2rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.cashflow-hero {
  background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(46,122,130,0.08) 100%);
  border: 1px solid rgba(46,122,130,0.18);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0.5rem 1.25rem 0;
}

/* ── Månadsnavigator ─────────────────────────────────────────────────── */
.cashflow-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.cashflow-month-nav__btn {
  background: none;
  border: 1px solid rgba(46,122,130,0.2);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.9rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.cashflow-month-nav__btn:hover:not(:disabled) {
  border-color: rgba(46,122,130,0.5);
  color: var(--primary-light);
}

.cashflow-month-nav__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.cashflow-month-nav__btn svg {
  display: block;
  pointer-events: none;
}

.cashflow-month-nav__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.03em;
  flex: 1;
  text-align: center;
}

.cashflow-hero__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 0.35rem;
}

.cashflow-hero__amount {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 0.25rem;
  color: var(--text-1);
}

.cashflow-hero__amount.is-positive { color: #10B981; }
.cashflow-hero__amount.is-negative { color: #EF4444; }

.cashflow-hero__period {
  font-size: 0.8rem;
  color: var(--text-2);
  margin: 0;
}

/* Sparkvots-bar */
.cashflow-hero__rate-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.cashflow-hero__bar {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  position: relative;
}

.cashflow-hero__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
}

.cashflow-hero__fill.is-good    { background: #10B981; }
.cashflow-hero__fill.is-ok      { background: var(--accent); }
.cashflow-hero__fill.is-low     { background: #EF4444; }

/* Benchmark-linje vid 20% */
.cashflow-hero__benchmark {
  position: absolute;
  left: 20%;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(0,0,0,0.18);
  border-radius: 1px;
}

.cashflow-hero__rate-label {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-2);
}
.cashflow-hero__rate-label.is-good { color: #10B981; }
.cashflow-hero__rate-label.is-ok   { color: var(--accent); }
.cashflow-hero__rate-label.is-low  { color: #EF4444; }

.cashflow-hero__meta {
  display: flex;
  gap: 1.5rem;
}

.cashflow-hero__meta span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.cashflow-hero__meta .meta-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
}

.cashflow-hero__meta .meta-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.cashflow-section {
  padding: 0 1.25rem;
}

.cashflow-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}

.cashflow-section__title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.875rem;
}

.cashflow-section__title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}

.cashflow-section__total {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
}

.cashflow-section__subtitle {
  font-size: 0.75rem;
  color: var(--text-2);
  font-weight: 400;
}

.cashflow-section--pulse .pulse-container {
  background: transparent;
  padding: 0;
}

/* ── Category grid ─────────────────────────────────────────────────────── */
.cashflow-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.cashflow-cat-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cat-color, var(--primary-light));
  border-radius: 10px;
  padding: 0.875rem 0.875rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  overflow: hidden;
}

.cashflow-cat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.cashflow-cat-card.is-anomaly {
  border-left-color: var(--warning);
}

.cashflow-cat-card__top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cashflow-cat-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cashflow-cat-card__name {
  font-size: 0.75rem;
  color: var(--text-2);
  flex: 1;
}

.cashflow-cat-card__pct {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-2);
  margin-left: auto;
}

.cashflow-cat-card__amount {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}

.cashflow-cat-card__chip {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent);
  align-self: flex-start;
}

.cashflow-cat-card__chip.is-positive {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

.cashflow-cat-fill-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.25rem;
}

.cashflow-cat-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--cat-color, var(--primary-light));
  width: 0%;
  transition: width 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── AI Insight cards ──────────────────────────────────────────────────── */
.cashflow-insights {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cashflow-insight-card {
  background: rgba(46,122,130,0.06);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-light);
  border-radius: 10px;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cashflow-insight-card.severity-warning  {
  background: rgba(245,158,11,0.08);
  border-left-color: var(--accent);
}
.cashflow-insight-card.severity-urgent,
.cashflow-insight-card.severity-negative {
  background: rgba(239,68,68,0.08);
  border-left-color: var(--loss);
}
.cashflow-insight-card.severity-positive {
  background: rgba(16,185,129,0.08);
  border-left-color: var(--gain);
}

.cashflow-insight-card__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}

.cashflow-insight-card__body {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

.cashflow-insight-card__body strong {
  color: var(--text-1);
}

.cashflow-insight-card__cta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary-light);
  background: rgba(46,122,130,0.12);
  border: 1px solid rgba(46,122,130,0.25);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s;
}

.cashflow-insight-card__cta:hover {
  background: rgba(46,122,130,0.2);
}

/* Skeleton */
.cashflow-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cashflow-skeleton__card {
  background: var(--surface-elevated);
  border-radius: 10px;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cashflow-skeleton__line {
  height: 10px;
  background: var(--border);
  border-radius: 5px;
  animation: shimmer 1.5s ease-in-out infinite;
}

.cashflow-skeleton__line.w-60 { width: 60%; }
.cashflow-skeleton__line.w-80 { width: 80%; }
.cashflow-skeleton__line.w-40 { width: 40%; }

@keyframes shimmer {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.8; }
}

/* ── Subscriptions ─────────────────────────────────────────────────────── */
.cashflow-subs {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--shadow-sm);
}

.cashflow-subs__callout {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-2);
  font-size: var(--text-xs);
  color: var(--text-2);
  flex-wrap: wrap;
}

.cashflow-subs__callout-sep {
  color: var(--border);
}

.cashflow-subs__callout-yearly {
  font-weight: 600;
  color: var(--text-1);
}

.cashflow-sub-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  gap: 0.75rem;
}

.cashflow-sub-item:last-child { border-bottom: none; }

.cashflow-sub-item__dot { display: none; }

.cashflow-sub-item__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(99,102,241,0.15);
  color: var(--cat-prenumerationer);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cashflow-sub-item__avatar.is-forgotten {
  background: rgba(245,158,11,0.15);
  color: var(--warning);
}

.cashflow-sub-item__name {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-1);
}

.cashflow-sub-item__monthly {
  font-size: 0.8rem;
  color: var(--text-2);
}

.cashflow-sub-item__yearly {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-1);
}

.cashflow-subs__forgotten-header {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning);
  padding: var(--s-3) var(--s-4) var(--s-2);
  margin-top: var(--s-2);
  margin-left: calc(-1 * var(--s-4));
  margin-right: calc(-1 * var(--s-4));
  border-top: 1px solid rgba(245,158,11,0.15);
  background: rgba(245,158,11,0.05);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ── css/pages/daily-analysis.css ── */
.daily-analysis-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-4) var(--s-4);
}

/* Stagger fade-up på sektioner */
.daily-analysis-page > * {
  opacity: 0;
  transform: translateY(10px);
  animation: dailyFadeUp var(--dur-normal) var(--ease-spring) forwards;
}
.daily-analysis-page > *:nth-child(1) { animation-delay: 0ms; }
.daily-analysis-page > *:nth-child(2) { animation-delay: 60ms; }
.daily-analysis-page > *:nth-child(3) { animation-delay: 120ms; }
.daily-analysis-page > *:nth-child(4) { animation-delay: 160ms; }
.daily-analysis-page > *:nth-child(5) { animation-delay: 200ms; }
.daily-analysis-page > *:nth-child(n+6) { animation-delay: 240ms; }

@keyframes dailyFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Sidhuvud ─────────────────────────────────────────────── */
.daily-analysis-header,
.daily-analysis-section-header {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: flex-start;
}

.daily-analysis-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 31px;
  line-height: 1.15;
  color: var(--text-1);
}

.daily-analysis-header p {
  margin: var(--s-1) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* ── Knappar ──────────────────────────────────────────────── */
.daily-analysis-button {
  border: 0;
  border-radius: var(--r-md);
  background: var(--accent);
  color: #fff;
  font: 600 13px var(--font-ui);
  padding: var(--s-3) var(--s-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.daily-analysis-button:hover { opacity: 0.94; }
.daily-analysis-button:active { transform: scale(0.985); }
.daily-analysis-button i { font-size: 18px; }

.daily-analysis-button--secondary {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ── Inline rekommendations-badge ─────────────────────────── */
.daily-analysis-reco { display: flex; }
.daily-analysis-reco__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--accent-subtle-2);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
}
.daily-analysis-reco__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: dailyPulse 2s var(--ease-out) infinite;
}
@keyframes dailyPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.78); }
}
.daily-analysis-reco__label {
  font: 600 11px var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.daily-analysis-reco__divider {
  width: 1px;
  height: 16px;
  background: var(--accent);
  opacity: 0.3;
}
.daily-analysis-reco__verdict {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--accent);
}

/* ── Gemensamt kort ───────────────────────────────────────── */
.daily-analysis-section,
.daily-analysis-history {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow-sm);
}

/* ── Beslutskort (hero) ───────────────────────────────────── */
.daily-analysis-decision {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  box-shadow: var(--shadow-md);
}

.daily-analysis-decision__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: flex-start;
}

.daily-analysis-decision__eyebrow,
.daily-analysis-section h3,
.daily-analysis-history h3 {
  margin: 0 0 var(--s-2);
  color: var(--text-2);
  font: 600 11px var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.daily-analysis-section h3,
.daily-analysis-history h3 { margin-bottom: var(--s-4); }

.daily-analysis-decision__company {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.2;
  color: var(--text-1);
}

.daily-analysis-decision__company span {
  margin-left: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  font: 600 12px var(--font-ui);
  vertical-align: middle;
}

.daily-analysis-decision__meta {
  margin-top: var(--s-1);
  color: var(--text-2);
  font: 500 12px var(--font-ui);
}

.daily-analysis-decision__divider {
  height: 1px;
  background: var(--border);
  margin: var(--s-5) 0;
}

/* ── Verdict-badge ────────────────────────────────────────── */
.daily-analysis-verdict {
  border-radius: 999px;
  padding: var(--s-1) var(--s-3);
  background: var(--accent-subtle);
  color: var(--accent);
  font: 700 12px var(--font-ui);
  white-space: nowrap;
}

.daily-analysis-verdict--undvik,
.daily-analysis-verdict--minska-salj {
  background: var(--loss-subtle);
  color: var(--loss);
}

.daily-analysis-verdict--kopzon {
  background: var(--gain-subtle);
  color: var(--gain);
}

/* ── Metrik-grid ──────────────────────────────────────────── */
.daily-analysis-decision__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.daily-metric {
  background: var(--surface-elevated);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}
.daily-metric__label {
  display: block;
  color: var(--text-2);
  font: 500 11px var(--font-ui);
  letter-spacing: 0.04em;
}
.daily-metric__value {
  display: block;
  margin-top: var(--s-1);
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.daily-metric__value--dots {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-base);
}

/* ── Konfidens/risk-prickar ───────────────────────────────── */
.daily-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.daily-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.daily-dots--accent  .daily-dot.is-on { background: var(--accent-mid); }
.daily-dots--gain    .daily-dot.is-on { background: var(--gain); }
.daily-dots--warning .daily-dot.is-on { background: var(--warning); }
.daily-dots--loss    .daily-dot.is-on { background: var(--loss); }

/* ── Coach-text ───────────────────────────────────────────── */
.daily-analysis-decision__coach {
  margin: var(--s-5) 0 0;
  color: var(--text-1);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.daily-analysis-section p {
  color: var(--text-1);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.daily-analysis-section p + p { margin-top: var(--s-2); }

/* ── Punktlistor (check_circle-stil) ──────────────────────── */
.daily-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.daily-bullets__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  opacity: 0;
  transform: translateY(6px);
  animation: dailyFadeUp var(--dur-normal) var(--ease-spring) forwards;
}
.daily-bullets__item:nth-child(1) { animation-delay: 60ms; }
.daily-bullets__item:nth-child(2) { animation-delay: 120ms; }
.daily-bullets__item:nth-child(3) { animation-delay: 180ms; }
.daily-bullets__item:nth-child(4) { animation-delay: 240ms; }
.daily-bullets__item:nth-child(n+5) { animation-delay: 300ms; }
.daily-bullets__item i {
  color: var(--accent);
  font-size: 20px;
  line-height: 1.4;
  flex-shrink: 0;
}
.daily-bullets__item span {
  color: var(--text-1);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ── Scenarier ────────────────────────────────────────────── */
.daily-analysis-scenarios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.daily-scenario {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}
.daily-scenario__name {
  display: block;
  color: var(--text-2);
  font: 600 11px var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.daily-scenario__value {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-display);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
}
.daily-scenario--pos .daily-scenario__value { color: var(--gain); }
.daily-scenario--neg .daily-scenario__value { color: var(--loss); }
.daily-scenario__note {
  margin-top: var(--s-2);
  color: var(--text-2);
  font-size: var(--text-xs);
  line-height: 1.5;
}

/* ── Score-tabell + historik ──────────────────────────────── */
.daily-analysis-score-table,
.daily-analysis-history__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.daily-analysis-score-row,
.daily-analysis-history__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-3);
}

.daily-analysis-score-row:last-child,
.daily-analysis-history__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.daily-analysis-score-row span {
  color: var(--text-2);
  font-size: var(--text-sm);
}
.daily-analysis-score-row strong {
  color: var(--text-1);
  font: 600 var(--text-base) var(--font-ui);
  font-variant-numeric: tabular-nums;
}

.daily-analysis-history__count {
  color: var(--text-2);
  font: 500 12px var(--font-ui);
}
.daily-analysis-history__lead { display: flex; flex-direction: column; gap: 2px; }
.daily-analysis-history__lead strong {
  color: var(--text-1);
  font: 600 var(--text-base) var(--font-ui);
}
.daily-analysis-history__lead span {
  color: var(--text-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}
.daily-analysis-history__item em { font-style: normal; }

/* ── Actions-rad ──────────────────────────────────────────── */
.daily-analysis-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: center;
  flex-wrap: wrap;
}

.daily-analysis-actions span {
  color: var(--text-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ── Tomt läge ────────────────────────────────────────────── */
.daily-analysis-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-5);
  box-shadow: var(--shadow-sm);
}
.daily-analysis-empty i {
  font-size: 40px;
  color: var(--accent);
  opacity: 0.6;
}
.daily-analysis-empty h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-1);
}

/* ── Desktop: 4-kol metrik-grid ───────────────────────────── */
@media (min-width: 720px) {
  .daily-analysis-decision__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .daily-analysis-scenarios {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .daily-analysis-header,
  .daily-analysis-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .daily-analysis-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .daily-analysis-page > *,
  .daily-bullets__item {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .daily-analysis-reco__dot { animation: none; }
}

/* Goals AI card */
.goals-ai-section { margin-top: var(--s-6); }

.goals-ai-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}

.goals-ai-card--loading {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: var(--text-sm);
}

.goals-ai-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface);
  border-top-color: var(--primary-light);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.goals-ai-header {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin-bottom: var(--s-3);
}

.goals-ai-text {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.6;
  margin: 0 0 var(--s-3);
}

.goals-ai-rows { display: flex; flex-direction: column; gap: var(--s-2); }

.goals-ai-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-3);
  font-size: var(--text-sm);
}

.goals-ai-label {
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.goals-ai-action { color: var(--primary-light); }

.goals-ai-card--error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-style: italic;
}

.gate3-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--r-md);
  padding: var(--s-3);
  font-size: var(--text-sm);
  color: var(--warning);
  margin-bottom: var(--s-4);
  line-height: 1.5;
}

/* ── Conversation tab ───────────────────────────────────── */
.conv-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--nav-height) - 108px);
  min-height: 340px;
  gap: var(--s-3);
}

.conv-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
}

.conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 100%;
  color: var(--text-2);
  font-size: var(--text-sm);
  text-align: center;
}

.conv-empty i {
  font-size: 2rem;
  opacity: 0.4;
}

.conv-msg {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  max-width: 85%;
}

.conv-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.conv-msg--assistant {
  align-self: flex-start;
}

.conv-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-elevated, #1A2332);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-2);
  flex-shrink: 0;
}

.conv-msg-bubble {
  background: var(--surface-elevated, #1A2332);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-1);
  word-break: break-word;
}

.conv-msg--user .conv-msg-bubble {
  background: var(--primary, #2E7A82);
  color: #fff;
  border-bottom-right-radius: var(--r-sm);
}

.conv-msg--assistant .conv-msg-bubble {
  border-bottom-left-radius: var(--r-sm);
}

.conv-msg-bubble--thinking {
  opacity: 0.5;
  font-style: italic;
}

.conv-input-row {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.conv-input {
  flex: 1;
  background: var(--surface-elevated, #1A2332);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  font: 14px var(--font-ui);
  color: var(--text-1);
  outline: none;
}

.conv-input:focus {
  border-color: var(--primary, #2E7A82);
}

.conv-input::placeholder {
  color: var(--text-2);
}

.conv-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--primary, #2E7A82);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 150ms;
}

.conv-send-btn:hover {
  background: var(--primary-light, #3D9AA4);
}

.conv-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Proactive banner */
.proactive-banner {
  margin-bottom: var(--s-4);
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.proactive-banner-inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: linear-gradient(135deg, rgba(46, 122, 130, 0.15), rgba(31, 94, 102, 0.1));
  border: 1px solid var(--primary-dark);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.5;
}

.proactive-banner-inner i:first-child {
  color: var(--primary-light);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.proactive-banner-inner span { flex: 1; }

.proactive-dismiss {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  opacity: 0.7;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.proactive-dismiss:hover { opacity: 1; }


/* ── css/pages/market-pulse.css ── */
/* Marknadsläge (#marknadslage) — Etapp 6 Task 6.2. Sidan finns endast i
   EV-världen (nås via nav-orbens action-sheet), men stylas ändå under
   body.app-ev för konsekvens med resten av App Evergreen-CSS:et
   (se css/pages/bevakning.css för samma mönster). */

body.app-ev .market-pulse-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-4) calc(var(--s-8) + var(--s-4));
}

body.app-ev .mp-section { display: flex; flex-direction: column; gap: var(--s-3); }

/* ── Regim-kort ───────────────────────────────────────────── */
body.app-ev .mp-regime-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

body.app-ev .mp-regime-label {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 440;
  line-height: 1.15;
  color: var(--text-1);
}

body.app-ev .mp-regime-note {
  margin-top: var(--s-1);
  color: var(--text-2);
  font-size: var(--text-sm);
}

body.app-ev .mp-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

body.app-ev .mp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

body.app-ev .mp-row__label {
  font-size: var(--text-sm);
  color: var(--text-2);
  font-weight: 600;
}

body.app-ev .mp-row__value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.app-ev .mp-row__value.is-gain { color: var(--gain); }
body.app-ev .mp-row__value.is-loss { color: var(--loss); }
body.app-ev .mp-row__value--muted { color: var(--text-2); font-weight: 600; }

/* ── Sapiax-rådgivning (ai-card-stil, mint-soft) ─────────────── */
body.app-ev .mp-advice {
  background: var(--ev-mint-soft);
  border: 1px solid rgba(23, 96, 74, 0.12);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}

body.app-ev .mp-advice__who {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ev-mint-deep);
  margin-bottom: var(--s-2);
}

body.app-ev .mp-advice__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ev-mint-deep);
  flex-shrink: 0;
}

body.app-ev .mp-advice__text {
  font-size: var(--text-sm);
  color: var(--text-1);
  line-height: 1.55;
}

/* ── Felläge ──────────────────────────────────────────────── */
body.app-ev .mp-error {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
body.app-ev .mp-error__text { color: var(--text-2); font-size: var(--text-sm); }
body.app-ev .mp-error__retry {
  padding: 8px var(--s-4);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-mid);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
body.app-ev .mp-error__retry:hover {
  border-color: var(--accent-light);
  background: var(--accent-subtle);
}

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration 0.01ms på *) — inget filspecifikt guard-block behövs här. */

/* ── css/pages/screener.css ── */
/* Signalsvep (#signalsvep) — Etapp 6 Task 6.2. Sidan finns endast i
   EV-världen (nås via nav-orbens action-sheet), men stylas ändå under
   body.app-ev för konsekvens med resten av App Evergreen-CSS:et
   (se css/pages/bevakning.css för samma mönster). */

body.app-ev .screener-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-5) var(--s-4) calc(var(--s-8) + var(--s-4));
}

body.app-ev .scr-section { display: flex; flex-direction: column; gap: var(--s-3); }

/* ── Screen-pills ─────────────────────────────────────────── */
body.app-ev .scr-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
body.app-ev .scr-pill {
  position: relative;
  overflow: hidden;
  padding: 6px var(--s-3);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
body.app-ev .scr-pill:hover { color: var(--accent-mid); border-color: var(--accent-light); }
body.app-ev .scr-pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Kandidatkort ─────────────────────────────────────────── */
body.app-ev .scr-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

body.app-ev .scr-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
}

body.app-ev .scr-logo {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
body.app-ev .scr-logo img { width: 26px; height: 26px; object-fit: contain; }
body.app-ev .scr-logo--fallback {
  background: var(--ev-mint-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 560;
  font-size: 17px;
  color: var(--ev-mint-deep);
}

body.app-ev .scr-card__body { flex: 1; min-width: 0; }
body.app-ev .scr-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
body.app-ev .scr-card__name { font-weight: 700; font-size: var(--text-sm); color: var(--text-1); }
body.app-ev .scr-card__ticker { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
body.app-ev .scr-card__reason {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.4;
}
body.app-ev .scr-card__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 440;
  color: var(--ev-mint-deep);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
body.app-ev .scr-card__score-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── Tomt-/felläge (samma visuella språk som bevakning-empty) ─── */
body.app-ev .scr-empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  color: var(--text-2);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

body.app-ev .scr-error {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
body.app-ev .scr-error__text { color: var(--text-2); font-size: var(--text-sm); }
body.app-ev .scr-error__retry {
  padding: 8px var(--s-4);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent-mid);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
body.app-ev .scr-error__retry:hover {
  border-color: var(--accent-light);
  background: var(--accent-subtle);
}

/* prefers-reduced-motion hanteras globalt i base.css (transition/animation-
   duration 0.01ms på *) — inget filspecifikt guard-block behövs här. */

/* ── css/pages/sapiax.css ── */
/* Sapiax-helskärmen (Etapp 9 Task 3). Kopierat och prefixat från
   docs/prototypes/app-redesign-mobil.html rad 847–1063 (#scr-sapiax-blocket).
   Allt scopat under body.app-ev — sidan renderas endast bakom
   APP_EVERGREEN_ENABLED (se js/app.js SHOW_CHROME/register('#sapiax', ...)). */

body.app-ev .sapiax-page {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--nav-height) - 12px);
  background:
    radial-gradient(500px 400px at 50% -8%, rgba(46, 189, 133, 0.10), transparent 65%),
    var(--ev-paper);
}

body.app-ev .sapiax-scroll {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}
body.app-ev .sapiax-scroll::-webkit-scrollbar { display: none; }

/* ── Orb-hero ──────────────────────────────────────────────── */
body.app-ev .sapiax-orb-hero {
  text-align: center;
  padding: 26px 0 6px;
}
body.app-ev .sapiax-orb {
  position: relative;
  width: 84px; height: 84px;
  margin: 0 auto;
}
body.app-ev .sapiax-orb .sapiax-orb__core {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #4FDCA5, var(--ev-mint) 45%, #157A55 100%);
  box-shadow:
    0 18px 40px -12px rgba(46, 189, 133, 0.55),
    inset 0 -8px 20px rgba(11, 35, 27, 0.25);
  animation: sapiax-breathe 4.5s ease-in-out infinite;
}
body.app-ev .sapiax-orb .sapiax-orb__halo {
  position: absolute; inset: -14px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 189, 133, 0.35);
  animation: sapiax-halo-spin 9s linear infinite;
}
body.app-ev .sapiax-orb .sapiax-orb__halo::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ev-gold);
}
@keyframes sapiax-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
@keyframes sapiax-halo-spin { to { transform: rotate(360deg); } }

body.app-ev .sapiax-title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 480;
  letter-spacing: -0.015em;
  margin-top: 20px;
  color: var(--ev-ink);
}
body.app-ev .sapiax-title em { font-style: italic; color: var(--ev-mint-deep); }
body.app-ev .sapiax-sub {
  font-size: 13px;
  color: var(--ev-ink-62);
  margin-top: 7px;
  line-height: 1.5;
}

/* ── Chips ─────────────────────────────────────────────────── */
body.app-ev .sapiax-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 20px 26px 4px;
}
body.app-ev .sapiax-chip {
  border: 1px solid var(--ev-hairline-strong);
  background: #ffffff;
  border-radius: 999px;
  padding: 9px 15px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ev-ink);
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), background 0.2s, border-color 0.2s;
}
body.app-ev .sapiax-chip:active { transform: scale(0.94); }
body.app-ev .sapiax-chip:hover { border-color: var(--ev-mint); background: var(--ev-mint-wash); }

/* ── Insiktskort ───────────────────────────────────────────── */
body.app-ev .sapiax-found {
  margin-top: 26px;
  padding-left: 22px;
  padding-right: 22px;
}
body.app-ev .sapiax-found .ev-h-section { margin-bottom: 12px; }
body.app-ev .sapiax-insight {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--ev-hairline);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--ev-shadow-card);
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring);
}
body.app-ev .sapiax-insight:active { transform: scale(0.98); }
body.app-ev .sapiax-insight + .sapiax-insight { margin-top: 10px; }
body.app-ev .sapiax-insight__icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
body.app-ev .sapiax-insight__icon.gold { background: var(--ev-gold-wash); color: #9A7A2E; }
body.app-ev .sapiax-insight__icon.mint { background: var(--ev-mint-wash); color: var(--ev-mint-deep); }
body.app-ev .sapiax-insight__title { font-size: 13.5px; font-weight: 700; color: var(--ev-ink); }
body.app-ev .sapiax-insight__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ev-ink-62);
  margin-top: 3px;
}
body.app-ev .sapiax-insight__save {
  display: inline-block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--ev-mint-deep);
  background: var(--ev-mint-wash);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ── Chatt ─────────────────────────────────────────────────── */
body.app-ev .sapiax-log { padding: 6px 22px 10px; }
body.app-ev .sapiax-bubble {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 10px;
  animation: sapiax-bubble-in 0.4s var(--ease-spring);
}
@keyframes sapiax-bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
body.app-ev .sapiax-bubble--user {
  margin-left: auto;
  background: var(--ev-ink);
  color: var(--ev-paper);
  border-bottom-right-radius: 6px;
}
body.app-ev .sapiax-bubble--ai {
  margin-right: auto;
  background: #ffffff;
  border: 1px solid var(--ev-hairline);
  border-bottom-left-radius: 6px;
  box-shadow: var(--ev-shadow-card);
  color: var(--ev-ink);
}
body.app-ev .sapiax-bubble--ai strong { color: var(--ev-mint-deep); }
body.app-ev .sapiax-bubble.is-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
}
body.app-ev .sapiax-bubble.is-typing i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ev-ink-40);
  animation: sapiax-typing-dot 1.2s ease-in-out infinite;
}
body.app-ev .sapiax-bubble.is-typing i:nth-child(2) { animation-delay: 0.15s; }
body.app-ev .sapiax-bubble.is-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sapiax-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ── Ask-bar (pinnad i botten) ─────────────────────────────── */
body.app-ev .sapiax-ask-bar {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 8px 18px 10px;
  padding: 8px 8px 8px 18px;
  background: #ffffff;
  border: 1px solid var(--ev-hairline-strong);
  border-radius: 999px;
  box-shadow: var(--ev-shadow-card);
}
body.app-ev .sapiax-ask-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ev-ink);
  min-width: 0;
}
body.app-ev .sapiax-ask-input::placeholder { color: var(--ev-ink-40); }
body.app-ev .sapiax-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--ev-ink);
  color: var(--ev-paper);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-spring), background 0.2s;
}
body.app-ev .sapiax-send:active { transform: scale(0.88); }

/* ── css/animations/tokens.css ── */
@keyframes aicfo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes aicfo-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aicfo-fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aicfo-slide-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes aicfo-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes aicfo-pulse-click {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@keyframes aicfo-border-slide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes aicfo-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes aicfo-slide-up {
  from { transform: translateY(12px); }
  to   { transform: translateY(0); }
}

@keyframes aicfo-count-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aicfo-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 122, 130, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(46, 122, 130, 0.12); }
}

/* ─── Publika sajten (pit-rebrand) ─────────────────────────────
   Konsumeras av css/components/public-delight.css. */

/* Aurora-bakgrund: långsam drift + subtil hue-skiftning (±14° räcker —
   lagret bär numera tre hues: teal/indigo/korall, se public-delight.css) */
@keyframes aicfo-aurora-hue {
  0%   { filter: hue-rotate(0deg) blur(60px); transform: translate3d(0, 0, 0) scale(1); }
  50%  { filter: hue-rotate(-14deg) blur(60px); transform: translate3d(3%, -4%, 0) scale(1.08); }
  100% { filter: hue-rotate(0deg) blur(60px); transform: translate3d(0, 0, 0) scale(1); }
}

/* Glidande gradient genom gradient-clipped text (hero-rubriker) */
@keyframes aicfo-hero-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Oändlig logo-marquee — förutsätter duplicerat track-innehåll (2 kopior) */
@keyframes aicfo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Sidbyte — View Transitions ───────────────────────────────
   js/router.js kör sidbytet genom document.startViewTransition när
   webbläsaren stöder det: gamla sidan fadar ut medan den nya fadar in
   ovanpå — inget tomt mellanrum där body-bakgrunden hinner synas.
   Rörelsen (slide-up + stagger) kommer från .page-enter som lever
   vidare inuti new-snapshoten; lagren här sköter bara crossfaden. */

@keyframes aicfo-vt-out {
  to { opacity: 0; }
}

@keyframes aicfo-vt-in {
  from { opacity: 0; }
}

::view-transition-old(root) {
  animation: aicfo-vt-out 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

::view-transition-new(root) {
  animation: aicfo-vt-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Beständig chrome paras ihop mellan gamla och nya sidan och står
   stilla under bytet istället för att crossfada med resten av roten
   (samma view-transition-name på båda sidor => egen snapshot-grupp). */
.pub-nav { view-transition-name: pub-nav; }
#top-bar { view-transition-name: app-top-bar; }
#nav-bar { view-transition-name: app-nav-bar; }

/* Respekterar systempreferens för reducerad rörelse */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* *-selektorn ovan når inte view-transition-pseudona; routern skippar
     redan View Transitions vid reduced motion — det här är hängslen. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ── css/animations/clarity.css ── */
/* === SIDBYTE === */

/* page-enter container keeps opacity:1 so dark-page backgrounds are visible immediately */

body[data-mode="clarity"] .page-exit {
  animation: aicfo-fade-in 200ms ease-in reverse forwards;
  pointer-events: none;
}

/* === STAGGER — Barn-element fade-up i sekvens === */

body[data-mode="clarity"] .page-enter > * {
  opacity: 0;
  animation: aicfo-fade-up 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body[data-mode="clarity"] .page-enter > *:nth-child(1) { animation-delay: 60ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(2) { animation-delay: 150ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(3) { animation-delay: 240ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(4) { animation-delay: 330ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(5) { animation-delay: 420ms; }
body[data-mode="clarity"] .page-enter > *:nth-child(6) { animation-delay: 510ms; }

/* === NAV-KLICK — subtil pulse === */

body[data-mode="clarity"] .nav-item.nav-clicked {
  animation: aicfo-pulse-click 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* === KNAPP-KLICK === */

body[data-mode="clarity"] .btn:active {
  animation: aicfo-pulse-click 200ms ease;
}

/* === KORT — subtle lift på hover === */

body[data-mode="clarity"] .card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-mode="clarity"] .card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* === GOAL PROGRESS — mjukare easing === */

body[data-mode="clarity"] .goal-progress-fill {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── css/animations/insight.css ── */
/* === SIDBYTE — slide-up / slide-down === */

body[data-mode="insight"] .page-enter {
  animation: aicfo-slide-up 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body[data-mode="insight"] .page-exit {
  animation: aicfo-fade-down 180ms ease-in reverse forwards;
  pointer-events: none;
}

/* === STAGGER — slide från höger, snabbare sekvens === */

body[data-mode="insight"] .page-enter > * {
  opacity: 0;
  animation: aicfo-slide-right 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body[data-mode="insight"] .page-enter > *:nth-child(1) { animation-delay: 40ms; }
body[data-mode="insight"] .page-enter > *:nth-child(2) { animation-delay: 100ms; }
body[data-mode="insight"] .page-enter > *:nth-child(3) { animation-delay: 160ms; }
body[data-mode="insight"] .page-enter > *:nth-child(4) { animation-delay: 220ms; }
body[data-mode="insight"] .page-enter > *:nth-child(5) { animation-delay: 280ms; }
body[data-mode="insight"] .page-enter > *:nth-child(6) { animation-delay: 340ms; }

/* === NAV-KLICK — bakgrundsmorph === */

body[data-mode="insight"] .nav-item.nav-clicked {
  background: var(--accent-subtle);
  transition: background 0.2s ease;
}

body[data-mode="insight"] .nav-item.nav-clicked svg {
  animation: aicfo-pulse-click 300ms ease;
}

/* === KNAPP-KLICK === */

body[data-mode="insight"] .btn:active {
  transform: scale(0.96);
  transition: transform 0.1s ease;
}

/* === INSIGHT-SEJER — mjukare avslöjande === */

body[data-mode="insight"] .insight-section {
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === SIGNAL-LISTA — sekventiellt avslöjande av dot + bar === */

body[data-mode="insight"] .page-enter .insight-signal-item {
  opacity: 0;
  animation: aicfo-slide-right 280ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body[data-mode="insight"] .page-enter .insight-signal-item:nth-child(1) { animation-delay: 60ms; }
body[data-mode="insight"] .page-enter .insight-signal-item:nth-child(2) { animation-delay: 140ms; }
body[data-mode="insight"] .page-enter .insight-signal-item:nth-child(3) { animation-delay: 220ms; }

/* === CONFIDENCE BAR — animera fill === */

body[data-mode="insight"] .insight-conf-bar__fill {
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === METRIC-BLOCK — hover-lyft === */

body[data-mode="insight"] .insight-metric-block {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-mode="insight"] .insight-metric-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* === HOLDING-ITEM — hover === */

body[data-mode="insight"] .holding-item {
  transition: background 0.2s ease;
}

body[data-mode="insight"] .holding-item:hover {
  background: var(--accent-subtle);
  border-radius: var(--r-sm);
}

/* === GOAL PROGRESS === */

body[data-mode="insight"] .goal-progress-fill {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── css/animations/analyst.css ── */
/* === SIDBYTE — snabb crossfade, ingen exit === */

/* page-enter container keeps opacity:1 so dark-page backgrounds are visible immediately */

body[data-mode="analyst"] .page-exit {
  opacity: 0;
  transition: opacity 100ms ease;
  pointer-events: none;
}

/* === INGEN STAGGER — direkt rendering === */

body[data-mode="analyst"] .page-enter > * {
  animation: aicfo-fade-in 120ms ease forwards;
}

/* === NAV-TOP — border-slide under aktiv tab === */

body[data-mode="analyst"] .nav-top__item {
  position: relative;
}

body[data-mode="analyst"] .nav-top__item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--s-4);
  right: var(--s-4);
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.15s ease;
}

body[data-mode="analyst"] .nav-top__item.active::after {
  transform: scaleX(1);
}

body[data-mode="analyst"] .nav-top__item.nav-clicked::after {
  transform: scaleX(1);
  transition: transform 0.12s ease;
}

/* === TICKER-BAR — scroller === */

body[data-mode="analyst"] .ticker-bar {
  animation: aicfo-fade-down 250ms ease forwards;
}

/* === PANEL-GRID — snabbt grid-reveal === */

body[data-mode="analyst"] .analyst-panel-grid {
  animation: aicfo-fade-in 150ms ease forwards;
}

body[data-mode="analyst"] .page-enter .analyst-panel {
  opacity: 0;
  animation: aicfo-fade-in 180ms ease forwards;
}

body[data-mode="analyst"] .page-enter .analyst-panel:nth-child(1) { animation-delay: 0ms; }
body[data-mode="analyst"] .page-enter .analyst-panel:nth-child(2) { animation-delay: 50ms; }
body[data-mode="analyst"] .page-enter .analyst-panel:nth-child(3) { animation-delay: 100ms; }

/* === HEALTH HEATMAP — celler poppar in sekventiellt === */

body[data-mode="analyst"] .page-enter .analyst-health-cell {
  opacity: 0;
  animation: aicfo-scale-in 150ms ease forwards;
}

body[data-mode="analyst"] .page-enter .analyst-health-cell:nth-child(1) { animation-delay: 80ms; }
body[data-mode="analyst"] .page-enter .analyst-health-cell:nth-child(2) { animation-delay: 120ms; }
body[data-mode="analyst"] .page-enter .analyst-health-cell:nth-child(3) { animation-delay: 160ms; }
body[data-mode="analyst"] .page-enter .analyst-health-cell:nth-child(4) { animation-delay: 200ms; }
body[data-mode="analyst"] .page-enter .analyst-health-cell:nth-child(5) { animation-delay: 240ms; }
body[data-mode="analyst"] .page-enter .analyst-health-cell:nth-child(6) { animation-delay: 280ms; }

/* === DATA-TABELL — rader fade-in sekventiellt === */

body[data-mode="analyst"] .page-enter .analyst-table tbody tr {
  opacity: 0;
  animation: aicfo-fade-in 120ms ease forwards;
}

body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(1)  { animation-delay: 0ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(2)  { animation-delay: 40ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(3)  { animation-delay: 80ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(4)  { animation-delay: 120ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(5)  { animation-delay: 160ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(6)  { animation-delay: 200ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(7)  { animation-delay: 240ms; }
body[data-mode="analyst"] .page-enter .analyst-table tbody tr:nth-child(8)  { animation-delay: 280ms; }

/* === SIGNAL-ROW hover === */

body[data-mode="analyst"] .analyst-signal-row {
  transition: background 0.12s ease;
}

body[data-mode="analyst"] .analyst-signal-row:hover {
  background: rgba(46, 122, 130, 0.05);
}

/* === KNAPP-KLICK — snabb opacity-flimmer === */

body[data-mode="analyst"] .btn:active {
  opacity: 0.7;
  transition: opacity 0.05s ease;
}

/* === FILTER CHIP click === */

body[data-mode="analyst"] .intel-filter__chip:active {
  transform: scale(0.96);
  transition: transform 0.08s ease;
}

/* ── css/components/ev-chrome.css ── */
body.app-ev .ev-screen-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

body.app-ev .ev-h-screen {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-1);
}

body.app-ev .ev-head-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

body.app-ev .ev-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ev-hairline-strong);
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  color: var(--ev-ink);
  transition: transform 0.2s var(--ease-spring), background 0.2s;
}
body.app-ev .ev-icon-btn:active {
  transform: scale(0.92);
  background: rgba(11, 35, 27, 0.05);
}

body.app-ev .ev-h-section {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ev-ink-40);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.app-ev .ev-h-section .ev-see-all {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ev-mint-deep);
  cursor: pointer;
}

/* Prototypens snabbare reveal-stagger (proto rad 203–219):
   0.55s spring med 50ms-steg — ersätter 420ms/90ms-steget under EV. */
body.app-ev .page-enter > * { animation-duration: 0.55s; }
body.app-ev .page-enter > *:nth-child(1) { animation-delay: 0.02s; }
body.app-ev .page-enter > *:nth-child(2) { animation-delay: 0.07s; }
body.app-ev .page-enter > *:nth-child(3) { animation-delay: 0.12s; }
body.app-ev .page-enter > *:nth-child(4) { animation-delay: 0.17s; }
body.app-ev .page-enter > *:nth-child(5) { animation-delay: 0.22s; }
body.app-ev .page-enter > *:nth-child(6) { animation-delay: 0.27s; }
body.app-ev .page-enter > *:nth-child(7) { animation-delay: 0.32s; }

@media (max-width: 430px) {
  body.app-ev .ev-h-section { font-size: 12px; } /* redan över golvet */
}

/* ── css/modes/insight.css ── */
/* Base layout — alla modes */
.insight-section {
  margin-bottom: var(--s-5);
}

.insight-section__label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  padding: 0 0 var(--s-2) 0;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
  display: block;
}

/* Metric-rad med 3 block */
body[data-mode="insight"] .insight-metric-row {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

body[data-mode="insight"] .insight-metric-block {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
}

body[data-mode="insight"] .insight-metric-block__label {
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: var(--s-1);
}

body[data-mode="insight"] .insight-metric-block__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
}

/* Signal-lista — luftiga kort i Clarity-stil */
body[data-mode="insight"] .insight-signal-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

body[data-mode="insight"] .insight-signal-item {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

body[data-mode="insight"] .insight-signal-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

body[data-mode="insight"] .insight-signal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

body[data-mode="insight"] .insight-signal-dot--high   { background: var(--gain); }
body[data-mode="insight"] .insight-signal-dot--medium { background: var(--warning); }
body[data-mode="insight"] .insight-signal-dot--low    { background: var(--neutral); }

body[data-mode="insight"] .insight-signal-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-1);
}

body[data-mode="insight"] .insight-signal-sub {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
}

body[data-mode="insight"] .insight-conf-bar {
  margin-left: auto;
  width: 48px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

body[data-mode="insight"] .insight-conf-bar__fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

/* ── css/modes/analyst.css ── */
/* Nav: flytta från botten till toppen */
body[data-mode="analyst"] #nav-bar {
  position: fixed;
  top: 0;
  bottom: auto;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 100;
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
}

body[data-mode="analyst"] #app {
  padding-bottom: var(--s-8);
}

/* nav-top 44px + ticker-bar 28px = 72px */
body[data-mode="analyst"] #page-content {
  padding-bottom: var(--s-8);
  padding-top: 72px;
}

/* Mode-switch i analyst: placera inuti nav-baren till höger */
body[data-mode="analyst"] #mode-switch-slot {
  top: 4px;
  right: 6px;
  z-index: 200;
}

/* Topbar — navigationslänkar */
.nav-top {
  display: flex;
  align-items: stretch;
  height: 44px;
  padding: 0 var(--s-3) 0 var(--s-3);
  padding-right: 90px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nav-top::-webkit-scrollbar { display: none; }

.nav-top__item {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 var(--s-3);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 40px;
  transition: color 0.15s, border-color 0.15s;
}

.nav-top__item:hover { color: var(--text-1); }
.nav-top__item.active { color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* Ticker-remsa */
.ticker-bar {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 28px;
  padding: 0 var(--s-4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.ticker-bar::-webkit-scrollbar { display: none; }

.ticker-item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  flex-shrink: 0;
}

.ticker-item__name {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-1);
}

.ticker-item__val {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
}

.ticker-item__val.gain { color: var(--gain); }
.ticker-item__val.loss { color: var(--loss); }
.ticker-item__val.neutral { color: var(--text-2); }

/* Panel-grid — 3 kolumner */
.analyst-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

@media (max-width: 640px) {
  .analyst-panel-grid { grid-template-columns: 1fr; }
}

.analyst-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

.analyst-panel__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}

.analyst-panel__value {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--text-1);
  line-height: 1.1;
}

.analyst-panel__sub {
  font-size: 12px;
  color: var(--text-2);
  margin-top: var(--s-1);
}

/* Kompaktare sidpadding i analyst — sparar vertikalt utrymme */
body[data-mode="analyst"] .hem-page,
body[data-mode="analyst"] .portfolio-page,
body[data-mode="analyst"] .intelligence-page {
  padding: var(--s-4);
}

/* Datatabeller med mono-siffror */
body[data-mode="analyst"] .analyst-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(-1 * var(--s-4));
  padding: 0 var(--s-4);
}

body[data-mode="analyst"] .analyst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 500px;
}

body[data-mode="analyst"] .analyst-table th {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-2);
  padding: var(--s-2) var(--s-2) var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.analyst-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-base);
  border-bottom: 2px solid var(--border);
}

body[data-mode="analyst"] .analyst-table td {
  padding: var(--s-3) var(--s-2) var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
}

body[data-mode="analyst"] .analyst-table td.num {
  font-family: var(--font-mono);
  font-size: 12px;
}

.analyst-table td.numeric {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-align: right;
}

body[data-mode="analyst"] .analyst-table td.gain { color: var(--gain); }
body[data-mode="analyst"] .analyst-table td.loss { color: var(--loss); }

/* Hälsoscore heatmap */
.analyst-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: var(--s-3);
}

.analyst-health-cell {
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Signal-rad i Analyst-panel */
.analyst-signal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.analyst-signal-row:last-child { border-bottom: none; }

.analyst-conf-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px var(--s-2);
  border-radius: 4px;
  background: rgba(46, 122, 130, 0.15);
  color: var(--accent);
}

@media (max-width: 360px) {
  body[data-mode="analyst"] #mode-switch-slot {
    top: 0;
    right: 0;
  }
  body[data-mode="analyst"] #mode-switch-slot .mode-pill {
    border-radius: 0;
    border: none;
    border-left: 1px solid var(--border);
    box-shadow: none;
    padding: 4px 8px 4px 6px;
    font-size: 11px;
    height: 44px;
  }
  .nav-top { padding-right: 80px; }
  .nav-top__item { font-size: 11px; padding: 0 var(--s-2); }
  .ticker-bar { height: 24px; }
  .ticker-item__name,
  .ticker-item__val { font-size: 9px; }
  body[data-mode="analyst"] #page-content { padding-top: 68px; }
}