/* 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{
  --ink:#0f172a;          /* navy ink */
  --ink-2:#334155;
  --muted:#64748b;
  --line:#e2e8f0;
  --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)}
.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]{
  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;
}
input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(14,159,110,.15); background:#fff;}
input::placeholder{color:#9aa7b8}

/* 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)} .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;
}
.tip-row .tip-lbl{font-size:.9rem; font-weight:600; color:var(--ink-2);}
.tip-row .tip-ctl{display:flex; align-items:center; gap:8px; position:relative;}
/* 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:.95rem;
  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;}
.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:.95rem; background:transparent; border-color:transparent; font-weight:500;}
.row .who input:focus{background:#fff; border-color:var(--green);}
.row .who input::placeholder{color:#a8b3c2; 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{opacity:.62}
.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;}
.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;}

/* ── 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 canvas,.qr img{border-radius:12px; background:#fff; padding:10px; border:1px solid var(--line);}
.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:.82rem; 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}
.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;}
.consent-btns{display:flex; gap:8px}
.consent .btn{width:auto; padding:9px 14px; font-size:.86rem}
.consent .btn.subtle{background:transparent; border:1.5px solid #475569; color:#cbd5e1}
.installbtn{position:fixed; left:14px; right:auto; bottom:14px; z-index:50; display:inline-flex; align-items:center; gap:7px;
  background:var(--ink); color:#fff; border:none; border-radius:999px; padding:11px 16px; font-weight:600; font-size:.88rem;
  box-shadow:var(--shadow); cursor:pointer;}

.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);}
.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}
@media (min-width:560px){ .modal-bg{align-items:center} .modal{border-radius:20px; margin:0 16px} }

/* ── 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 1.1fr auto; align-items:center; gap:8px;}
.exp-row input{font-family:var(--body); font-size:.95rem; 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(--green);}
.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:.95rem; 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);}
/* "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;}
.exp-amt input:focus{border:0;}
.exp-amt .kr{color:var(--muted); font-size:.82rem; font-family:var(--mono);}
.exp-swish{font-family:var(--mono); font-size:.88rem !important;}
.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;}
@media (max-width:460px){
  .exp-row{grid-template-columns:1fr auto; grid-template-areas:"name del" "amt swish"; gap:7px 8px;}
  .exp-name{grid-area:name;}
  .exp-del{grid-area:del;}
  .exp-amt{grid-area:amt;}
  .exp-swish{grid-area:swish;}
}

.settle{margin-top:16px; padding-top:15px; border-top:1.5px dashed var(--line);}
.settle-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.settle-row{display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f8fafc; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px;}
.settle-txt{font-size:.95rem; line-height:1.4; min-width:0;}
.settle-txt b{font-weight:700;}
.settle-amt{font-family:var(--mono); color:var(--green-d);}
.settle-row .swish-link{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);}