/* Callaboo overview only, in the look of the friend's design: warm off-white page, deep navy text and buttons, light
   cards with soft borders, Inter for text and heavy headings, three gate states with line icons and the ghost logo.
   Accents only as the design has them: the soft yellow pill, the yellow hat band and cheeks, the thin yellow underline on text
   links, small green check marks and the soft red "Stoppat" pill. No other page loads this file. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/inter.woff2") format("woff2"); }

:root {
  --page: #f6f4ee;
  --card: #ffffff;
  --navy: #1b1f3b;
  --navy-2: #2b3157;
  --muted: #5d6175;
  --soft: #666a7b;   /* 4.9:1 on the page, 5.4:1 on white, 4.6:1 on the tile */
  --border: #e7e3d8;
  --tile: #f1eee6;
  --pill: #fbefbd;
  --pill-ink: #5b4a0b;
  --line-yellow: #f2cf3d;
  --check: #3d8b55;
  --red-bg: #fde7e4;
  --red-ink: #a8291c;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ov { margin: 0; background: var(--page); color: var(--navy); font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; }
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, select { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
a { color: var(--navy); }

.page { max-width: 30rem; overflow-wrap: anywhere; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* Header: the ghost and the word mark, the address with a padlock */
.head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.125rem 1.125rem .5rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.375rem; letter-spacing: -.035em; }
.dot { width: 1.5rem; height: auto; flex: none; }
.where { display: flex; align-items: center; gap: .3rem; padding: 0 1.125rem .25rem; font-size: .9375rem; color: var(--muted); font-weight: 500; }
.logout { min-height: 3rem; padding: 0 .25rem; border: 0; background: none; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lock { width: 1rem; height: 1rem; flex: none; }
.context { padding: 0 1.125rem; font-size: .9375rem; color: var(--muted); }

/* The four setup stops, only while the phone is not on yet */
.path { list-style: none; margin: .75rem 1.125rem 0; padding: 0; display: flex; gap: .375rem; }
.path li { flex: 1; font-size: .875rem; font-weight: 700; color: var(--soft); }
.path li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--border); margin-bottom: .4rem; }
.path a { color: inherit; display: block; min-height: 3rem; }
.step-1 li:nth-child(-n+1), .step-2 li:nth-child(-n+2), .step-3 li:nth-child(-n+3) { color: var(--navy); }
.step-1 li:nth-child(-n+1)::before, .step-2 li:nth-child(-n+2)::before, .step-3 li:nth-child(-n+3)::before { background: var(--navy); }
.path li[aria-current]::before { background: var(--line-yellow); }

main { flex: 1; padding: 1rem 1.125rem 1.5rem; }
main:focus { outline: none; }

/* Headings heavy and tight */
.eyebrow { font-size: 1.75rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; margin: .25rem 0 1rem; }
.block { margin-top: 1.75rem; }
.block > h3, .panel h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .625rem; }
.hint { color: var(--muted); font-size: 1.0625rem; margin-top: .5rem; }
.status { color: var(--navy); font-weight: 600; min-height: 1.5rem; margin-top: .75rem; }

/* Cards */
.card { margin: 0 0 2rem; }
.status-card, .panel, .row, .receipt { background: var(--card); border: 1px solid var(--border); border-radius: 18px; }
.status-card { padding: 1rem 1.125rem .5rem; }
.status-row { display: flex; align-items: center; gap: .875rem; }
.status-icon { width: 3rem; height: 3rem; flex: none; padding: .55rem; border-radius: 14px; background: var(--tile); color: var(--navy); }
.big-status { font-size: 2.25rem; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.long-status { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.sub { color: var(--muted); font-size: 1.0625rem; margin-top: .2rem; }
details.tests { margin-top: .625rem; border-top: 1px solid var(--border); }
details.tests p { color: var(--muted); margin: 0 0 .5rem; }
.panel { padding: 1rem 1.125rem; }
.panel p + p { margin-top: .5rem; }

/* Summary rows of folded parts: 48 px targets */
summary { list-style: none; min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "Visa"; font-weight: 600; font-size: .9375rem; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
details[open] > summary::after { content: "Dölj"; }
.fold { margin-top: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 0 1.125rem; }
.fold > summary { font-size: 1.125rem; }
.fold-body { padding: 0 0 1rem; }
.fold-body h2 { font-size: 1.125rem; font-weight: 800; margin: .25rem 0; }
.fold.log { background: transparent; }
.bottom { margin-top: 1.75rem; }

/* Buttons: dark navy primary, light secondary, every target at least 48 px */
.btn { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 3.25rem; padding: .75rem 1rem; margin-top: .75rem; border-radius: 12px; border: 1.5px solid var(--navy); background: var(--navy); color: #fff; font-weight: 700; font-size: 1.0625rem; text-decoration: none; }
.btn:hover { background: var(--navy-2); }
.btn.second { background: var(--tile); border-color: var(--tile); color: var(--navy); }
.btn.second:hover { background: #e9e5db; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.pair { display: flex; gap: .625rem; }
.pair .btn { flex: 1; }
.link, .quiet { display: inline-flex; align-items: center; min-height: 3rem; padding: 0; border: 0; background: none; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.quiet { margin-top: 1.25rem; }

/* Pills */
.pill { display: inline-block; font-size: .875rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; background: var(--pill); color: var(--pill-ink); }
.pill.red { background: var(--red-bg); color: var(--red-ink); margin-right: .4rem; }

/* Behöver dig */
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }

/* Senaste 7 dagarna: three counts like the design's phone, then seven bars */
.counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.count { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: .625rem .75rem; }
.count strong { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.count span { color: var(--muted); font-size: 1rem; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; margin-top: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: .5rem .375rem .25rem; }
.bar { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-height: 3rem; padding: .25rem 0; border: 0; border-radius: 10px; background: none; }
.bar:disabled { cursor: default; }
.bar .n { font-size: .875rem; font-weight: 700; min-height: 1.25rem; }
.bar .track { display: flex; align-items: flex-end; width: 1.25rem; height: 4.5rem; border-radius: 6px; background: var(--tile); overflow: hidden; }
.bar .fill { display: block; width: 100%; background: var(--navy); border-radius: 6px; }
.bar .d { font-size: .875rem; color: var(--muted); }
.bar.today .d { color: var(--navy); font-weight: 700; }
.bar[aria-pressed="true"] { background: var(--tile); }
.bar[aria-pressed="true"] .d { text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; color: var(--navy); }
.h0 { height: 0; } .h1 { height: 10%; } .h2 { height: 20%; } .h3 { height: 30%; } .h4 { height: 40%; } .h5 { height: 50%; }
.h6 { height: 60%; } .h7 { height: 70%; } .h8 { height: 80%; } .h9 { height: 90%; } .h10 { height: 100%; }
.day-note { display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: var(--muted); }

/* Rows: Att ringa tillbaka, Värt att se, Bara loggen */
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.row { overflow: hidden; }
.callback { padding: .875rem 1rem 1rem; }
.row-open { display: flex; gap: .75rem; width: 100%; min-height: 3rem; padding: .875rem 1rem; border: 0; background: none; text-align: left; }
.tile { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--tile); display: grid; place-items: center; }
.gate-icon { width: 1.6rem; height: 1.6rem; color: var(--navy); }
.row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .1rem; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.who { font-weight: 800; font-size: 1.125rem; letter-spacing: -.01em; }
.when { color: var(--soft); font-size: .9375rem; white-space: nowrap; }
.number { color: var(--muted); font-size: .9375rem; }
.line { color: var(--navy); font-size: 1.0625rem; }
.clamp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outcome { color: var(--muted); font-size: 1rem; margin-top: .15rem; }
.row.open .clamp { display: none; }
.detail { padding: 0 1rem 1rem 4.25rem; }
.detail .summary { font-size: 1.0625rem; margin: .5rem 0; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; min-width: 0; }

/* Off codes */
.receipt { margin: .75rem 0; padding: .75rem; }
.r-head { font-weight: 700; }
.codebox { font: 700 1.25rem/1.35 ui-monospace, "SF Mono", Menlo, monospace; background: var(--tile); border-radius: 8px; padding: .75rem; margin-top: .5rem; overflow-wrap: anywhere; user-select: all; }

/* Notices and errors */
.notice { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: .875rem 1rem; margin: 0 0 1rem; }
.error { color: var(--red-ink); background: var(--red-bg); border-radius: 10px; font-weight: 600; padding: .625rem .75rem; margin-top: .75rem; }
.error:empty { padding: 0; margin: 0; }

/* Forms (feedback and next phone) */
label { display: block; font-weight: 700; margin: 1rem 0 .375rem; }
input, select, textarea { width: 100%; min-height: 3.25rem; border: 1.5px solid #cfcabd; border-radius: 12px; background: #fff; padding: .7rem .8rem; }
textarea { min-height: 7rem; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--navy); outline-offset: 1px; }
.next { margin-top: 1.5rem; }

/* Footer: who we are and what we never ask for */
.foot { padding: 1.25rem 1.125rem 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .9375rem; }
.foot p + p { margin-top: .5rem; }
.foot .never { display: flex; align-items: center; gap: .4rem; color: var(--navy); font-weight: 700; }
.foot .never::before { content: "\2713"; content: "\2713" / ""; color: var(--check); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .detail:not([hidden]) { animation: open .14s ease-out; } @keyframes open { from { opacity: .4; } to { opacity: 1; } } }

.block-box { margin-top: .5rem; }
.confirm { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: .875rem 1rem; margin-top: .75rem; }
.confirm p { margin: 0; }

/* Hela samtalet and Var det rätt? in a call's detail (issue 159), the person's own line only */
.detail h4 { margin: 1.25rem 0 .25rem; font-size: 1.0625rem; }
.transcript { list-style: none; margin: 0; padding: 0; }
.said { padding: .5rem 0; border-top: 1px solid var(--border); }
.said-who { display: block; font-size: .875rem; font-weight: 700; color: var(--muted); }
.said-text { overflow-wrap: anywhere; }
.said-system .said-text { color: var(--muted); font-style: italic; }
.call-feedback textarea { display: block; width: 100%; min-height: 4.5rem; margin-top: .75rem; padding: .625rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-sizing: border-box; }

.boo-contact { margin-top: 1.75rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.125rem; }
.boo-contact h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .625rem; }
.boo-contact p + p { margin-top: .5rem; }
.boo-number { font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums; user-select: all; }