/* Self-hostade fonter — laddas fran egen server, aldrig fran Google.
   Inget anrop lamnar besokarens IP till tredje part fore samtycke.
   Subset: latin + latin-ext (sv a/a/o + europeisk sakerhetsmarginal).
   Kallfiler och licenser: fonts/LICENSE.md */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/inter-400-600-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/inter-400-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(fonts/jetbrains-mono-500-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(fonts/jetbrains-mono-500-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/space-grotesk-400-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/space-grotesk-400-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dela notan — ren, förtroendeingivande identitet. Ink-navy + kvitto-vitt + Swish-grön.
   Signatur: kvitto-kort med tandad kant + belopp i tabulär monospace. Mobil-först. */
:root{
  --jsel-accent:var(--green-d);
  /* Ljus palett (--bg/--paper) utan mörk motsvarighet — inget prefers-color-scheme i filen.
     light håller webbläsarens egna kontroller — sifferfältens spinners, rullgardiner,
     scrollbars, autofyllda belopps- och telefonfält — ljusa även vid mörkt systemtema. */
  color-scheme:light;
  --ink:#0f172a;          /* navy ink */
  --ink-2:#334155;
  --muted:#606F86;
  --line:#888B90;
  --paper:#ffffff;
  --bg:#eef1f6;           /* cool page */
  --green:#0e9f6e;        /* betalning/Swish-grön */
  --green-d:#0b7d57;
  --coral:#f0623d;        /* varm accent */
  --coral-d:#d94f2c;
  --amber:#f5b301;
  --radius:16px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 30px rgba(15,23,42,.08);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:radial-gradient(circle at 20% -10%, #f7f9fc 0%, transparent 45%);
}
button{font-family:inherit}
a{color:inherit}

.wrap{max-width:560px; margin:0 auto; padding:36px 16px 96px;}

/* ── Header ── */
.top{display:flex; align-items:center; gap:10px; padding:6px 2px 22px;}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); margin:2px 0 22px;}
.logo svg{display:block}
.logo b{font-family:var(--disp); font-weight:700; font-size:1.12rem; letter-spacing:-.02em;}
.logo .g{color:var(--green-d)}
.logo .lwrap{display:flex; flex-direction:column; line-height:1.08}
.logo .lsub{font-size:.6rem; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:lowercase; margin-top:1px}

/* ── Card / receipt ── */
.card{
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px; margin:0 0 16px;
}
.card h1{font-family:var(--disp); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; margin:2px 0 6px;}
.card .lead{color:var(--muted); margin:0 0 20px; font-size:.96rem;}

/* receipt = tandad övre/undre kant */
.card.receipt{border-radius:0;}   /* raka kanter → tandade "papperskänslan" syns */
.receipt{position:relative; background:var(--paper);}
.receipt::before,.receipt::after{
  content:""; position:absolute; left:0; right:0; height:8px;
  background:
    radial-gradient(circle at 6px 8px, transparent 6px, var(--paper) 6px) repeat-x;
  background-size:16px 16px;
}
.receipt::before{top:-8px; transform:rotate(180deg);}
.receipt::after{bottom:-8px;}

label{display:block; font-weight:600; font-size:.82rem; letter-spacing:.01em; color:var(--ink-2); margin:0 0 7px;}
.hint{font-size:.8rem; color:var(--muted); margin:6px 0 0;}

.field{margin:0 0 18px;}
input[type=text],input[type=tel],input[type=number],input[type=email]{
  width:100%; border:1.5px solid var(--line); border-radius:11px; padding:13px 14px;
  font-size:1rem; font-family:var(--body); color:var(--ink); background:#fbfcfe;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;
}
/* iOS Safari auto-zoomar vid fokus om font-size < 16px → minst 16px på ALLA fokuserbara fält */
input, select, textarea{font-size:16px;}
input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(14,159,110,.15); background:#fff;}
input::placeholder{color:#6E7783}

/* stort belopp-fält */
.amount-in{position:relative;}
.amount-in input{font-family:var(--mono); font-weight:700; font-size:1.7rem; padding-right:52px; text-align:left;}
.amount-in .cur{position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600; font-size:1.05rem;}

/* stepper */
.stepper{display:flex; align-items:stretch; border:1.5px solid var(--line); border-radius:11px; overflow:hidden; background:#fbfcfe;}
.stepper button{flex:0 0 54px; border:none; background:transparent; font-size:1.5rem; color:var(--ink-2); cursor:pointer; transition:background .12s;}
.stepper button:active{background:#eef2f7}
.stepper input{border:none; border-radius:0; text-align:center; background:transparent; font-family:var(--mono); font-weight:700; font-size:1.25rem;}
.stepper input:focus{box-shadow:none}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:14px 18px; font-size:1rem; font-weight:600;
  cursor:pointer; background:var(--ink); color:#fff; transition:transform .06s, background .15s, opacity .15s; width:100%;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5; cursor:default}
.btn.green{background:var(--green);text-shadow:0 1px 1.5px rgba(0,0,0,.3)} .btn.green:active{background:var(--green-d)}
.btn.coral{background:var(--coral)} .btn.coral:active{background:var(--coral-d)}
.btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.btn.sm{padding:10px 14px; font-size:.9rem; width:auto}
.btn svg{display:block}

/* ── Split rows ── */
.total-strip{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  padding:2px 2px 4px; margin-bottom:0;
}
.total-strip .k{font-size:.82rem; color:var(--muted); font-weight:600; white-space:nowrap;}
.total-strip .v{font-family:var(--mono); font-weight:700; font-size:1.35rem;}
/* titel + penna + etikett-rad */
.total-strip .title-col{display:flex; flex-direction:column; gap:3px; min-width:0;}
.total-strip .titleline{display:inline-flex; align-items:center; gap:6px;}
.total-strip .label-edit{
  border:none; background:transparent; cursor:pointer; color:var(--muted);
  padding:2px; border-radius:6px; display:inline-flex; align-items:center; line-height:0;
  transition:color .12s, background .12s;
}
.total-strip .label-edit:hover{color:var(--green-d); background:#f1f5f9;}
.total-strip .label-edit svg{width:14px; height:14px; display:block;}
.total-strip .label-line{font-size:.92rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere;}
/* diskret penn-signal framför redigerbara belopp (total, delbelopp, dricks) */
.edit-pen{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:var(--muted); cursor:pointer; line-height:0; vertical-align:middle;
}
.edit-pen svg{width:12px; height:12px; display:block;}

/* totalen = [penna][siffra][kr] tätt ihop, rent tal utan ram/understrykning/bg */
.total-strip .total-edit{
  border:none; background:transparent; cursor:pointer; color:var(--ink);
  font-family:var(--mono); font-weight:700; font-size:1.35rem; line-height:inherit;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.total-strip .total-edit .edit-pen svg{width:13px; height:13px;}
.total-strip .total-kr{color:var(--muted); font-weight:600; font-size:.9rem;}
/* siffran: samma look som text (vilo) och input (edit) → auto-bredd, inget hoppar */
.total-strip .total-num{
  text-align:right; font-family:var(--mono); font-weight:700; font-size:1.35rem; color:var(--ink);
  padding:0; margin:0; border:none; border-radius:0; background:transparent; line-height:inherit;
  min-width:1ch; -webkit-appearance:none; appearance:none; -moz-appearance:textfield;
}
.total-strip .total-num:focus{outline:none; box-shadow:none; border:none; background:transparent;}

/* dricks-rad (kvitto-stil, i receipt-kortet) */
.tip-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:13px 2px 3px; border-top:1px dashed var(--line); margin-top:6px;
}
/* rubrik + toggle inline (toggeln DIREKT efter "Dricks till appen", ligger stilla vid på/av) */
.tip-row .tip-head{display:inline-flex; align-items:center; gap:10px; min-width:0;}
.tip-row .tip-lbl{font-size:.9rem; font-weight:600; color:var(--ink-2);}
/* STABIL höjd av/på: .tip-ctl reserverar alltid på-lägets höjd (belopps-fältet, ~35px) även när tom
   (av-läge) → raden hoppar aldrig vertikalt när man togglar. min-height matchar .tip-in-input-höjden. */
.tip-row .tip-ctl{display:flex; align-items:center; gap:8px; position:relative; min-height:35px;}
/* round-up på/av-toggle (switch) */
.tip-row .tip-toggle{
  flex:0 0 auto; width:38px; height:22px; border-radius:999px; border:none; cursor:pointer;
  background:#cbd5e1; padding:0; position:relative; transition:background .15s;
}
.tip-row .tip-toggle .knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.25); transition:left .15s;
}
.tip-row .tip-toggle.on{background:var(--green);}
.tip-row .tip-toggle.on .knob{left:18px;}
/* av-läge: dricks-beloppet dämpat/inaktivt */
.tip-row .tip-in.is-off{opacity:.4;}
.tip-row .tip-in.is-off input{cursor:default;}
/* [penna][siffra][kr] tätt ihop */
.tip-row .tip-in{display:inline-flex; align-items:center; gap:3px;}
/* dricks-kr = rent tal som del-/totalbeloppen: ingen border/box/bg, auto-bredd, markeras vid fokus */
.tip-row .tip-in input{
  text-align:right; font-family:var(--mono); font-weight:700; font-size:16px;
  padding:7px 0; border:none; border-radius:0; background:transparent; color:var(--ink);
  min-width:1ch; -webkit-appearance:none; appearance:none; -moz-appearance:textfield;
}
.tip-row .tip-in input:focus,
.tip-row .tip-in:focus-within input{background:transparent; border:none; box-shadow:none; outline:none;}
.tip-row .tip-in .pc{color:var(--muted); font-size:.8rem; font-weight:600; pointer-events:none;}
/* Dricks AV: diskret klickbar support-text (slår på 1 %-läget) */
.tip-off-cta{width:100%; text-align:left; background:transparent; border:none; padding:4px 2px; cursor:pointer;
  font-size:.84rem; color:var(--muted); text-decoration:underline; text-underline-offset:2px;}
.tip-off-cta:hover{color:var(--green-d);}
/* "Avrunda"-pill: liten på/av-pill bredvid dricks-toggeln */
.tip-round-pill{flex:0 0 auto; border:1.5px solid var(--line); background:#fff; color:var(--muted);
  border-radius:999px; padding:4px 11px; font-size:.78rem; font-weight:700; cursor:pointer; transition:all .12s;}
.tip-round-pill.on{background:#eafaf3; border-color:var(--green); color:var(--green-d);}
/* round-läget: dricks-beloppet visas som text (ej editerbart) */
.tip-row .tip-in .tip-ro-amt{font-family:var(--mono); font-weight:700; font-size:16px; color:var(--ink);}
.tip-devbtn{display:flex; width:100%; justify-content:center; margin-top:11px; padding:10px 13px;}

.rows{list-style:none; margin:0; padding:0;}
.row{
  display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:center;
  padding:14px 2px; border-bottom:1px dashed var(--line);
}
.row .who{grid-column:1; min-width:0;}
.row .who input{padding:9px 11px; font-size:16px; background:transparent; border-color:transparent; font-weight:500;}
.row .who input:focus{background:#fff; border-color:var(--green);}
.row .who input::placeholder{color:#707781; font-weight:400}
/* [penna][siffra][kr] tätt ihop, högerställt i kolumnen */
.row .amt{grid-column:2; display:flex; align-items:center; gap:4px; justify-content:flex-end; position:relative;}
.row .amt input{
  text-align:right; font-family:var(--mono); font-weight:700; font-size:1.05rem;
  padding:9px 2px; background:transparent; border:none; min-width:1ch;
  -webkit-appearance:none; appearance:none; -moz-appearance:textfield;
}
/* belopp-fält: "osynligt tills man rör det" — ingen bg/border/box vid fokus (texten select-all:as istället) */
.row .amt input:focus,
.row .amt:focus-within input{background:transparent; border:none; box-shadow:none; outline:none;}
.row .amt .kr{color:var(--muted); font-size:.85rem; font-weight:600;}
.row.is-custom .amt input{color:var(--coral-d)}
.row.is-paid .who input{text-decoration:line-through; text-decoration-color:var(--green);}

.row-actions{grid-column:1 / -1; display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:2px;}

/* paid pill */
.pill{
  display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--line);
  background:#fff; color:var(--muted); border-radius:999px; padding:6px 12px;
  font-size:.82rem; font-weight:600; cursor:pointer; transition:all .14s;
}
.pill svg{width:14px;height:14px}
.pill.on{background:var(--green); border-color:var(--green); color:#fff; text-shadow:0 1px 1.5px rgba(0,0,0,.3);}
.pill.reset{color:var(--coral-d); border-color:#fbd9cf; background:#fff7f4}
/* reset som ren ikon-knapp — kompakt, bryter aldrig raden */
.pill.icon-only{padding:6px; width:32px; height:32px; justify-content:center; gap:0; flex:0 0 auto;}
.pill.reset.icon-only svg{width:15px; height:15px;}
.pill.reset.icon-only:hover{background:#fdeee9; border-color:var(--coral-d);}
/* reset sist i raden: plats alltid reserverad → toggla synlighet, inget hoppar */
.pill.reset.icon-only.is-hidden{visibility:hidden; pointer-events:none;}

.swish-link{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1.5px solid var(--green); color:var(--green-d); background:#eafaf3;
  border-radius:999px; padding:6px 13px; font-size:.82rem; font-weight:700; cursor:pointer;
}
.swish-link svg{width:15px;height:15px}
.swish-link.is-disabled{
  border-color:var(--line); color:var(--muted); background:#f1f5f9; cursor:not-allowed; opacity:.75;
}
.payee-hint{color:var(--coral-d); margin:6px 0 0;}

/* sum control */
.sumctl{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:16px; padding:13px 15px; border-radius:12px; background:#f1f5f9;
  font-size:.9rem;
}
.sumctl.ok{background:#eafaf3; color:var(--green-d)}
.sumctl.bad{background:#fdeee9; color:var(--coral-d)}
.sumctl .n{font-family:var(--mono); font-weight:700; white-space:nowrap;}

/* ── Sections ── */
.sec{margin-top:16px}
.sec-h{font-family:var(--disp); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; margin:0 0 4px; display:flex; align-items:center; gap:8px;}
.sec-h .dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
/* tillståndsstyrd payee-punkt: röd tills giltigt Swish-nr fyllts i */
.sec-h .dot.bad{background:var(--coral-d)}
.sec-sub{color:var(--muted); font-size:.86rem; margin:0 0 14px;}

/* tip note (visas när dricks > 0) — tunn muted-text, ingen ruta */
.tip-note{margin-top:8px;}
.tip-note b{font-family:var(--mono); font-weight:600;}

/* qr block */
.qr{display:flex; flex-direction:column; align-items:center; gap:10px; padding:6px 0 2px;}
/* QR ritas i full upplösning men skalar ner på smått (min(168px,45vw)) så den + knappar ryms. */
.qr canvas,.qr img{border-radius:12px; background:#fff; padding:10px; border:1px solid var(--line);
  width:min(190px, 56vw); height:auto; box-sizing:border-box;}
.qr .cap{font-size:.82rem; color:var(--muted); text-align:center;}
.qr .cap b{color:var(--ink); font-family:var(--mono)}

/* share box */
.share-box{display:flex; gap:8px; margin:0 0 6px;}
.share-box input{flex:1; font-family:var(--mono); font-size:16px; font-weight:500; padding:11px 12px;}

.divider{height:1px; background:var(--line); margin:20px 0}

/* footer */
.foot{text-align:center; color:var(--muted); font-size:.8rem; padding:24px 0 0; line-height:1.7}
#appfoot{padding:8px 16px 40px;}
.foot a{color:var(--ink-2)}

/* consent + install (från övriga tjänster men egen skinn) */
.consent{position:fixed; left:12px; right:12px; bottom:12px; max-width:560px; margin:0 auto;
  background:var(--ink); color:#fff; border-radius:14px; padding:14px 16px; display:flex;
  align-items:center; justify-content:space-between; gap:12px; box-shadow:0 10px 40px rgba(0,0,0,.3); z-index:60; flex-wrap:wrap;}
.consent-lead{font-size:.86rem; flex:1 1 200px;}
/* Support-widgeten (support.jalma.dev/widget.js) är fixed 56x56 @ right:20px, z-index
   2147483000 -> den äger viewportens högra 76px. Reservera plats så consent-knapparna
   aldrig hamnar under den (högra halvan av "Acceptera" träffade widgeten, inte knappen).
   max(12px, 50vw - 280px) = barens avstånd från högerkanten: 12px när baren ligger dikt
   an (right:12px), mer så fort max-width:560px börjar centrera den -> marginalen
   självslocknar (0px) från ca 696px och uppåt, så breda skärmar rör sig inte ur läget.
   84px = 76px widgetzon + 8px luft, minus barens egen padding-right 16px = 68px.
   Ligger på .consent-btns och INTE på .consent: när baren wrappar (mobil) är knappraden
   ensam på sin rad och vänsterställd, så marginalen äter tom yta i stället för att kapa
   ledtextens bredd -> mobil-layouten blir exakt oförändrad. */
.consent-btns{display:flex; gap:8px; margin-right:max(0px, calc(68px - max(12px, 50vw - 280px)));}
/* Traffyta pa cookiebarens knappar (#240). Titti matte 36-37px pa akta 390px-viewport
   i tre tjanster — under WCAG 2.5.5:s 44px, och det ar det FORSTA en besokare maste
   traffa. Bara vid grov pekare, sa desktop-tatheten ar oforandrad. Samma monster som
   narpassar (#81 A) och sharedweeks tom-vy (#352) — ingen ny regel per tjanst. */
@media(pointer:coarse){.consent-btns .btn{min-height:44px}}
.consent .btn{width:auto; padding:9px 14px; font-size:.86rem}
.consent .btn.subtle{background:transparent; border:1.5px solid #475569; color:#cbd5e1}
/* Diskret avvisbar install-pill. Vänsterställd + auto-bredd → krockar inte med support-bubblan
   (nere till höger). Sitter över consent-baren (env safe-area + marginal) så den aldrig skyms.
   Avvisas via ×; gömmer sig i 7 dagar (dn_install_dismissed). */
.installbtn{position:fixed; left:14px; right:auto; bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:55; display:inline-flex; align-items:center; gap:2px; padding:0;
  background:var(--ink); color:#fff; border:none; border-radius:999px; font-weight:600; font-size:.82rem;
  box-shadow:var(--shadow); cursor:pointer; opacity:.92; max-width:calc(100vw - 90px);}
.installbtn .ib-main{display:inline-flex; align-items:center; gap:6px; padding:8px 6px 8px 14px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.installbtn .ib-x{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:26px; height:30px; margin-right:4px; border-radius:999px; font-size:1.15rem; line-height:1;
  color:#cbd5e1; opacity:.85;}
.installbtn .ib-x:hover{opacity:1; background:rgba(255,255,255,.12);}
/* När consent-baren visas: lyft install-pillen över den. --consent-h = barens uppmätta höjd (sätts av app.js); 84px = fallback om JS inte kört. Ingen env() här — --consent-h mäts från viewportens underkant och rymmer redan safe-area. */
body:has(.consent) .installbtn{bottom:calc(var(--consent-h, 84px) + 10px);}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:11px 18px; border-radius:999px; font-size:.9rem; font-weight:500;
  opacity:0; pointer-events:none; transition:all .25s; z-index:80; box-shadow:var(--shadow);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.spinner{width:22px;height:22px;border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important; transition-duration:.001ms !important}}
:focus-visible{outline:2px solid var(--green); outline-offset:2px}

/* modal (swisha en rad) */
.modal-bg{position:fixed; inset:0; background:rgba(15,23,42,.55); display:flex; align-items:flex-end; justify-content:center; z-index:70; padding:0;}
.modal{background:#fff; border-radius:20px 20px 0 0; width:100%; max-width:560px; padding:22px 20px 30px; box-shadow:0 -10px 40px rgba(0,0,0,.2);
  box-sizing:border-box; max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;}
/* Bottom-sheet swipe-ner-stäng: släpp under tröskel → fjädra tillbaka via transition. */
.modal.mdrag{transition:transform .28s cubic-bezier(.22,.61,.36,1);}
/* Litet grab-handle högst upp — signalerar att arket går att dra ner. Bara på touch/mobil-läge. */
.modal .mhandle{display:none;}
@media (max-width:559px){
  .modal .mhandle{display:block; width:38px; height:4px; border-radius:999px; background:var(--line);
    margin:-8px auto 12px; touch-action:none;}
}
.modal h3{font-family:var(--disp); font-weight:700; margin:0 0 4px; font-size:1.2rem;}
.modal .mnote{color:var(--muted); font-size:.88rem; margin:0 0 16px;}
.modal .mrow{display:flex; justify-content:space-between; font-size:.9rem; padding:7px 0; border-bottom:1px dashed var(--line);}
.modal .mrow b{font-family:var(--mono)}
.modal-close{position:absolute}
/* Smala telefoner (iPhone SE 320px m.fl.): krymp padding så inget spräcker viewporten. */
@media (max-width:359px){ .modal{padding:18px 14px 22px;} }
@media (min-width:560px){ .modal-bg{align-items:center} .modal{border-radius:20px; margin:0 16px; max-height:88vh; max-height:88dvh;} }

/* "+ Lägg till person" — ghost-knapp full bredd under namn/personlistan (samma stil som Lägg till utgift). */
#addpersonwrap:not(:empty){margin:10px 0 4px;}
.add-person{width:100%; justify-content:center; gap:8px;}

/* ── Utlägg (flera betalare) + uppgörelse ───────────────────── */
.add-exp{width:100%; justify-content:center; gap:8px;}
.add-exp svg{width:18px;height:18px;flex:0 0 auto;}
.add-exp-wrap{margin-top:6px;}
.add-exp-wrap.solo{margin-top:2px; display:flex; flex-direction:column; gap:8px;}
.add-exp-hint{color:var(--muted); font-size:.82rem; line-height:1.45; text-align:center;}

.exp-sec{margin-top:2px;}
.exp-list{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:8px;}
.exp-row{display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px;}
.exp-row input{font-family:var(--body); font-size:16px; padding:9px 11px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); min-width:0; box-sizing:border-box; width:100%;}
.exp-row input:focus{outline:none; border-color:var(--line); box-shadow:none;}
.exp-name{font-weight:600;}
/* betalar-väljare (select) — matchar utläggs-radens input-look */
.exp-row select.exp-payer{
  font-family:var(--body); font-size:16px; font-weight:600; padding:9px 30px 9px 11px;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  min-width:0; box-sizing:border-box; width:100%; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px;
}
.exp-row select.exp-payer:focus{outline:none; border-color:var(--green);}
/* jselect: betalar-väljaren ritas som knapp (tools/jselect) — samma look som select ovan */
.exp-row .jsel-btn.exp-payer{
  font-family:var(--body); font-size:16px; font-weight:600; padding:9px 30px 9px 11px;
  border:1.5px solid var(--line); border-radius:10px; background-color:#fff; color:var(--ink);
  min-width:0; box-sizing:border-box; width:100%; min-height:44px; background-position:right 9px center; background-size:15px;
}
.exp-row .jsel-btn.exp-payer[aria-expanded="true"]{border-color:var(--green);}

/* "lade ut X" på betalar-delraden (istället för Swisha-knapp) */
.payer-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:.82rem; font-weight:700;
  color:var(--green-d); background:#eafaf3; border:1.5px solid var(--green); border-radius:999px; padding:6px 12px;
}
.row.is-payer .who input{color:var(--green-d);}
.exp-amt{display:inline-flex; align-items:center; gap:3px; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding-right:9px;}
.exp-amt input{border:0; text-align:right; width:74px; font-family:var(--mono); font-weight:700; padding-right:2px;}
/* Ingen grön fokus-ram/box på utläggs-fältet (som övriga belopps-fält) — bara select-all/redigering. */
.exp-amt input:focus{border:0; box-shadow:none; background:transparent;}
.exp-amt .kr{color:var(--muted); font-size:.82rem; font-family:var(--mono);}
.exp-del{flex:0 0 auto; width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--muted); border-radius:9px; cursor:pointer;}
.exp-del:hover{background:#fee2e2; color:var(--coral-d);}
.exp-del svg{width:17px;height:17px;}
/* per-utlägg-exkludering: chips över deltagarna (2+-läge) */
.exp-incl{grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin-top:2px;}
.exp-incl-lbl{font-size:.8rem; color:var(--muted); font-weight:600;}
.exp-chips{display:flex; flex-wrap:wrap; gap:6px;}
.exp-chip{
  border:1.5px solid var(--line); background:#fff; color:var(--muted); border-radius:999px;
  padding:4px 11px; font-size:.82rem; font-weight:600; cursor:pointer; transition:all .12s;
}
.exp-chip.on{background:#eafaf3; border-color:var(--green); color:var(--green-d);}
.exp-chip:not(.on){text-decoration:line-through;}
/* härlett (ej editerbart) delbelopp i 2+-läge */
.row .amt .amt-ro{font-family:var(--mono); font-weight:700; font-size:1.05rem; color:var(--ink); padding:9px 2px;}
.total-strip .total-ro{font-family:var(--mono); font-weight:700; font-size:1.35rem; color:var(--ink); display:inline-flex; align-items:baseline; gap:5px;}
.total-strip .total-ro .total-kr{color:var(--muted); font-weight:600; font-size:.9rem;}
/* betalarens Swish-nr på delraden (per person, vid explicita utlägg) */
.payer-swish{display:inline-flex; min-width:0;}
.payer-swish input{
  font-family:var(--mono); font-size:16px; font-weight:600; padding:6px 10px; width:150px; max-width:44vw;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); box-sizing:border-box;
}
.payer-swish input:focus{outline:none; border-color:var(--green);}
/* Utläggsrad: [betalare(1fr)][belopp][ta bort] på rad 1; Swish-nr, "Delas på"-chips och ev. varning
   spänner full bredd på egna rader (grid-column:1/-1) → inget klipps, ordnat på smal mobil. */
.exp-swish, .exp-incl, .exp-swish-warn{grid-column:1 / -1;}
@media (max-width:460px){
  .exp-row{grid-template-columns:minmax(0,1fr) auto auto; gap:7px 8px;}
  .exp-amt{justify-self:end;}
}

/* ── Skiss B: "Så gör ni upp" som EGET kort under nota-kortet (mobil-först full bredd) ── */
/* Uppgörelsen ligger i eget .settle-card → ingen egen top-border/margin behövs (kortet separerar). */
.settle-card{margin-top:16px;}
.settle{margin-top:0; padding-top:0; border-top:none;}
.settle-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:10px;}
/* full-bredds-rad: text överst, knapp-rad UNDER (spricker aldrig på smal mobil) */
.settle-row{display:flex; flex-direction:column; gap:9px; background:#f8fafc; border:1.5px solid var(--line);
  border-radius:12px; padding:12px 13px;}
.settle-row.err{border-color:#dc2626; background:#fef2f2;}
.settle-row.is-done{opacity:.62;}
.settle-txt{font-size:.95rem; line-height:1.45; min-width:0;}
.settle-txt b{font-weight:700;}
.settle-amt{font-family:var(--mono); color:var(--green-d);}
.settle-warn{color:#dc2626; font-size:.78rem; font-weight:600;}
/* knapp-rad: Swisha + Markera betald bredvid varandra, wrap:ar vid behov, klipps aldrig */
.settle-btns{display:flex; flex-wrap:wrap; gap:8px;}
.settle-btns .swish-link{flex:0 0 auto;}
.pill.settle-paid{flex:0 0 auto;}
.settle-even{font-family:var(--disp); font-weight:600; color:var(--green-d); margin:12px 0 0;}
.hint.warn{color:var(--coral-d);}
/* nivå 1 (en betalare): kort mening, ingen tung uppgörelse */
.solo-note{margin-top:12px; font-size:.9rem; color:var(--ink-2);}
.solo-note b{color:var(--green-d);}

/* ── Komplext läge: kompakt person-lista (namn + badge, inga knappar bredvid) ── */
.row.row-compact{grid-template-columns:1fr auto; align-items:center; padding:11px 2px;}
.ppl-badge-col{grid-column:2; display:flex; justify-content:flex-end;}
.ppl-badge{display:inline-flex; align-items:center; font-family:var(--mono); font-size:.76rem; font-weight:700;
  padding:4px 10px; border-radius:999px; white-space:nowrap;}
.ppl-badge.paid-out{background:#eafaf3; color:var(--green-d); border:1.5px solid var(--green);}
.ppl-badge.owes{background:#f1f5f9; color:var(--ink-2); border:1.5px solid var(--line);}

/* ── Uniforma utlägg: Swish-nr per utlägg + bas-radens fasta betalare + varning ── */
.exp-swish{grid-column:1 / -1; display:flex; min-width:0;}
.exp-swish input{font-family:var(--mono); font-size:16px; font-weight:600; padding:8px 11px; width:100%;
  border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); box-sizing:border-box;}
/* Ingen grön fokus-ram/box på utläggets Swish-fält — ren neutral ram som övriga fält. */
.exp-swish input:focus{outline:none; border-color:var(--line); box-shadow:none; background:#fff;}
.exp-swish.err input{border-color:#dc2626; background:#fef2f2;}
.exp-swish.err input:focus{border-color:#dc2626; background:#fef2f2;}
.exp-swish-warn{grid-column:1 / -1; color:#dc2626; font-size:.78rem; font-weight:600; margin-top:2px;}
/* bas-radens betalare är låst (rad 1) → visas som text i väljar-formatet, ej klickbar */
.exp-payer-fixed{display:inline-flex; align-items:center; font-weight:600; font-size:16px; padding:9px 11px;
  border:1.5px solid var(--line); border-radius:10px; background:#f8fafc; color:var(--ink-2); box-sizing:border-box; min-width:0;}
.exp-del-ph{width:34px; height:34px; flex:0 0 auto;}
.exp-row.exp-base{background:#fbfcfe; border-radius:10px;}

/* ── Behörighet: publik LÄS-ONLY-vy + admin-vy ─────────────────────────────── */
/* Payee-nummer som read-only text (publik vy) */
.payee-ro{font-family:var(--mono); font-weight:600; font-size:16px; margin:4px 0 0;}
.payee-ro .muted{color:var(--muted); font-weight:500; font-family:var(--body);}
.payee-ro .payee-ro-name{font-family:var(--body); font-weight:700;}
/* Betalarens Swish-nr som text (enkelt läge, publik) */
.payer-swish-ro{font-family:var(--mono); font-weight:600; font-size:.9rem; color:var(--ink-2);}
/* Dricks som statisk text (publik) */
.tip-ro{font-family:var(--mono); font-weight:700; color:var(--green-d);}
/* Read-only utläggslista (publik, komplext läge): betalare + belopp, ingen edit */
.exp-list-ro{list-style:none; margin:0 0 6px; padding:0; display:flex; flex-direction:column; gap:6px;}
.exp-row-ro{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 2px; border-bottom:1px dashed var(--line);}
.exp-ro-who{font-weight:600; min-width:0;}
.exp-ro-sw{font-family:var(--mono); font-weight:500; font-size:.82rem; color:var(--muted);}
.exp-ro-amt{font-family:var(--mono); font-weight:700; white-space:nowrap;}
/* Diskret läs-only-notis (publik vy, nedre kort) */
.card.ro-note{background:#f8fafc;}
.card.ro-note .sec-sub{line-height:1.5;}

/* ── "Dina notor"-lista på startsidan (localStorage, per webbläsare) ────────── */
.card.mynotas{margin-top:16px;}
.card.mynotas .sec-sub{margin-bottom:10px;}
.mynota-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mynota-row{display:flex; align-items:center; gap:8px; border-top:1px dashed var(--line);}
.mynota-row:first-child{border-top:none;}
.mynota-link{flex:1; min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:11px 2px; text-decoration:none; color:var(--ink);}
.mynota-link:hover .mynota-name{color:var(--green-d);}
.mynota-name{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mynota-meta{font-family:var(--mono); font-size:.8rem; color:var(--muted); white-space:nowrap; flex:0 0 auto;}
.mynota-del{flex:0 0 auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--muted); border-radius:8px; cursor:pointer;}
.mynota-del:hover{background:#fee2e2; color:var(--coral-d);}
.mynota-del svg{width:16px; height:16px;}

/* ── "Klar – dags att göra upp"-lås: sektion mellan nota-kortet och uppgörelsen ── */
.lock-section{margin:16px 0;}
.lock-banner{display:flex; align-items:center; gap:10px; background:#fff7ed; border:1.5px solid #f5b301;
  color:#92400e; border-radius:12px; padding:12px 14px; margin:0 0 12px; font-size:.9rem; line-height:1.4; font-weight:500;}
.lock-section .lock-banner:last-child{margin-bottom:0;}
.lock-banner svg{width:20px; height:20px; flex:0 0 auto; color:#b45309;}

/* ── SEO-mer (crawlbart innehåll, dolt bakom collapsible längst ner) ── */
.seo-more{max-width:560px; margin:0 auto 22px; padding:2px 20px; color:var(--muted);
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.seo-more>summary{cursor:pointer; list-style:none; font-family:var(--disp); font-size:.95rem; font-weight:600; color:var(--ink);
  padding:15px 2px; display:flex; align-items:center; gap:7px; user-select:none;}
.seo-more>summary::-webkit-details-marker{display:none}
.seo-more>summary::after{content:"›"; display:inline-block; transition:transform .15s; font-size:1.2rem; line-height:1; color:var(--muted); margin-left:auto;}
.seo-more[open]>summary{border-bottom:1px dashed var(--line);}
.seo-more[open]>summary::after{transform:rotate(90deg);}
.seo-more>summary:hover{color:var(--ink);}
.seo-more-body{font-size:.9rem; line-height:1.6; color:var(--ink-2); padding:12px 2px 14px;}
.seo-more-body h1{font-size:1.15rem; margin:8px 0 6px; color:var(--ink);}
.seo-more-body h2{font-size:1rem; margin:18px 0 6px; color:var(--ink);}
.seo-more-body h3{font-size:.92rem; margin:14px 0 3px; color:var(--ink);}
.seo-more-body p,.seo-more-body ul,.seo-more-body ol{margin:0 0 12px;}
.seo-more-body ul,.seo-more-body ol{padding-left:20px;}

/* ── Statistik-vy (operatör, /stats?key=) ── */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-top:6px;}
.stat{background:#fbfcfe; border:1.5px solid var(--line); border-radius:12px; padding:15px 16px;}
.stat-v{font-family:var(--disp); font-weight:700; font-size:1.9rem; line-height:1.1; color:var(--ink); letter-spacing:-.02em;}
.stat-l{margin-top:4px; font-size:.8rem; color:var(--muted); font-weight:600;}
.stats-err{color:var(--coral-d); font-weight:600; margin:4px 0 0;}
.stats-gen{margin-top:16px; font-size:.82rem; color:var(--muted);}
.muted-txt{color:var(--muted);}

/* Sektionsrubrik + underrubrik i stats-vyn */
.stats-h{font-family:var(--disp); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink); margin:30px 0 10px;}
.stats-sub{font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; margin:4px 0 10px;}

/* Tabell (senaste notor) */
.stats-t{width:100%; border-collapse:collapse; font-size:.9rem; margin-top:4px;}
.stats-t th{text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; white-space:nowrap;}
.stats-t td{padding:8px 10px; border-bottom:1px solid var(--line); color:var(--ink); vertical-align:top;}
.stats-t td.muted-txt{color:var(--muted);}
.stats-t th.num,.stats-t td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono);}
.stats-t tbody tr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent);}

/* Flagg-pill per nota (mejl-lead / uppgjord) */
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:.68rem; font-weight:700; white-space:nowrap; border:1px solid var(--line); margin-right:5px;}
.pill-email{background:color-mix(in srgb,var(--amber) 22%,transparent); color:var(--ink);}
.pill-settled{background:color-mix(in srgb,var(--green) 16%,transparent); color:var(--green-d);}

/* 14-dagars stapeldiagram — ren CSS, proportionella höjder */
.daybars{display:flex; align-items:flex-end; gap:6px; height:150px; padding:8px 4px 0; border:1.5px solid var(--line); border-radius:12px; background:#fbfcfe; overflow-x:auto;}
.daycol{flex:1 1 0; min-width:16px; display:flex; flex-direction:column; align-items:center; height:100%;}
.daycol-bars{flex:1; display:flex; align-items:flex-end; justify-content:center; width:100%; min-height:0;}
.db{width:52%; max-width:16px; border-radius:3px 3px 0 0; background:var(--green); transition:height .2s;}
.daycol-x{margin-top:5px; font-size:.64rem; color:var(--muted); white-space:nowrap;}

/* Reseläge */
.trip-card .trip-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.trip-card .trip-actions .btn{flex:1 1 140px;text-align:center;text-decoration:none}
.summary .sum-list{list-style:none;margin:0;padding:0}
.summary .sum-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px dashed var(--line);font-size:16px}
.summary .sum-row.done span{text-decoration:line-through;opacity:.6}
.summary .sum-paid{color:var(--green);font-size:13px}
.sum-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.sum-actions .btn{flex:1 1 140px;text-align:center;text-decoration:none}
@media print{
  body{background:#fff}
  .top,.sum-actions,#appfoot,.support-widget,#cookiebar,.cookie-banner{display:none!important}
  .summary{box-shadow:none;border:0}
}

/* Språk: tom valutasymbol (icke-sv) ska inte ta plats; språkväljare i sidfoten (EN-värdar) */
.cur:empty,.total-kr:empty,.pc:empty,.kr:empty{display:none}
.langpick select,.langpick .jsel-btn{font:inherit;color:inherit;background:transparent;border:1px solid var(--line,#ddd);border-radius:6px;padding:2px 4px;max-width:9em}
.langpick .jsel-btn{display:inline-flex;width:auto;min-height:36px;padding:4px 30px 4px 10px;font-size:.9rem;background-color:transparent;background-position:right 9px center}