/* account.css
 * ------------------------------------------------------------
 * Shared stylesheet for every page under web/account/ (login, dashboard,
 * subscription, data, profile, receipts, opgrader, kvittering — see
 * docs/web_user_portal_skeleton.md's sitemap). This is the DEDUPED union of
 * the inline <style> blocks from the owner-approved mockups in
 * docs/mockups/portal-account/*.html (approved 2026-07-21) — every mockup
 * used the exact same design tokens (:root vars), header/footer chrome,
 * button variants and card shell, so consolidating them here avoids eight
 * copies of the same CSS drifting apart over time.
 *
 * Loaded via <link rel="stylesheet" href="/account/css/account.css"> (or a
 * relative path in dev) on every page in this folder. Page-specific rules
 * (e.g. .code-row for the OTP boxes, .stack for the data-usage bar) live
 * here too, namespaced by the section comments below — nothing is
 * duplicated per-page anymore.
 *
 * KNOWN COLLISION NOTE (flagged in the build brief): the storage usage bar
 * uses the class `.meter` (NOT `.bar` — `.bar` is already used by
 * `header.site .bar` for the header row layout in this same file).
 * ------------------------------------------------------------ */

/* ===== Design tokens (sage-green palette, mirrors lib/core/constants/app_colors.dart) ===== */
@font-face{
  font-family:'Nunito';font-weight:800;font-style:normal;
  src:url('/static/fonts/nunito-800.woff2') format('woff2');
  font-display:swap;
}
:root{
  --accent:#5D7E6E;--accent-dark:#45604F;--accent-soft:#E8EFEA;--sage:#8CA893;--sage-2:#B9CBBF;
  --text:#2B302C;--text-2:#65706A;
  --bg:#F3EFE8;--card:#FFFFFF;--border:#E4E6EA;
  --trust-bg:#45604F;--trust-stroke:#C4D2C9;--trust-text:#D6E1DA;
  --warm-a:#DDC795;--warm-b:#CFA87F;
  --danger:#BC5B50;--danger-soft:#F3E1DE;
  --green:#4C9A6A;
  --btn-radius:14px;--card-radius:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.55;
}
a{color:var(--accent-dark);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
input,select,button{font-family:inherit}

/* ===== Header (both the public /login variant and the logged-in variant) ===== */
header.site{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--border)}
header.site .bar{max-width:920px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:12px 24px}
header.site .bar.centered{justify-content:center}
.brand{display:flex;align-items:flex-end;gap:11px}
.brand img{width:auto;height:40px;margin-bottom:-3px}
.brand .name{display:block;font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--text);line-height:1.1}
.brand .tagline{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin-top:3px;line-height:1.15}
.head-right{display:flex;align-items:center;gap:12px}
.who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--text)}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--sage);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;overflow:hidden}
/* Profile photo (issue #146 item 8) — fills the same circle the
   initials fallback uses; app.js's renderAvatarPhoto() swaps this in only
   on success, so the initials text remains the safe default otherwise. */
.who .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
a.logout{font-size:13px;font-weight:700;color:var(--text-2);border:1px solid var(--border);padding:8px 13px;border-radius:11px;background:var(--card)}
a.logout:hover{color:var(--text)}

/* ===== Buttons ===== */
/* white-space:normal + max-width:100% (issue #146 item 11) — buttons
   with a variable-length price suffix (e.g. "Opgradér nu — betal 437,95
   kr") must never clip; let the label wrap onto a second line at narrow
   widths instead of an overflow/ellipsis cut. */
.btn{font-size:14.5px;font-weight:700;padding:12px 20px;border-radius:var(--btn-radius);display:inline-block;text-align:center;cursor:pointer;border:none;white-space:normal;max-width:100%;line-height:1.35}
.btn-primary{color:#fff;background:var(--accent);box-shadow:0 14px 26px -12px rgba(93,126,110,.75)}
.btn-primary:hover{color:#fff;background:var(--accent-dark)}
.btn-ghost{color:var(--text);background:var(--card);border:1.5px solid var(--border)}
.btn-ghost:hover{color:var(--text)}
.btn-warm{color:#3A2C1E;background:linear-gradient(100deg,var(--warm-a),var(--warm-b));box-shadow:0 16px 30px -14px rgba(207,168,127,.75)}
.btn-danger{color:var(--danger);background:var(--card);border:1.5px solid var(--danger-soft)}
.btn-danger:hover{color:var(--danger);background:#FBF1EF}
.btn-linkdanger{color:var(--danger);background:none;border:none;font-weight:700;font-size:13.5px;cursor:pointer;padding:0}
.btn-block{display:block;width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;pointer-events:none}
.pdf-btn{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--accent-dark);background:var(--card);border:1.5px solid var(--border);padding:9px 14px;border-radius:11px;cursor:pointer;white-space:nowrap}
.pdf-btn:hover{border-color:var(--sage);color:var(--accent-dark)}

/* ===== Page shell (logged-in pages: dashboard/subscription/data/profile/receipts) ===== */
.page{max-width:920px;margin:0 auto;padding:32px 24px 72px;position:relative}
.page.narrow{max-width:720px}
.page::before{content:"";position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  width:min(620px,100vw);height:340px;
  background:radial-gradient(closest-side,rgba(216,179,107,.13),rgba(243,239,232,0) 72%);
  pointer-events:none;z-index:0}
.page>*{position:relative;z-index:1}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--text-2);margin-bottom:16px}
.back-link:hover{color:var(--text)}
h1.ph{font-size:30px;font-weight:800;letter-spacing:-.02em}
.psub{font-size:15.5px;color:var(--text-2);margin-top:6px}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--card-radius);padding:26px}
.card + .card{margin-top:22px}
.card h2{font-size:17px;font-weight:800}
.card .hint{font-size:13px;color:var(--text-2);margin-top:4px}

.section-label{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--text-2);margin:34px 0 14px;text-transform:uppercase}

/* Generic loading / error line used while a page awaits its API call */
.state-line{font-size:14px;color:var(--text-2);padding:24px 0;text-align:center}
.state-line.error{color:var(--danger)}
.card-loading{padding:40px 0;text-align:center;color:var(--text-2);font-size:14px}

/* ===== Auth / login panel (/login) ===== */
.auth{max-width:460px;margin:0 auto;padding:56px 24px 72px;position:relative}
.auth::before{content:"";position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:min(560px,100vw);height:420px;
  background:radial-gradient(closest-side,rgba(216,179,107,.18),rgba(243,239,232,0) 72%);
  pointer-events:none;z-index:0}
.auth-card{position:relative;z-index:1;background:var(--card);border:1px solid var(--border);border-radius:var(--card-radius);padding:36px 34px;box-shadow:0 30px 60px -34px rgba(43,48,44,.32)}
.mark{width:auto;height:40px;margin:0 auto 20px}
h1.auth-h1{font-size:26px;font-weight:800;letter-spacing:-.02em;text-align:center}
.sub{font-size:15px;color:var(--text-2);text-align:center;margin-top:8px}
.field{margin-top:22px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:7px}
.field .opt{font-weight:600;color:var(--text-2);opacity:.8}
.field input,.field select,.field textarea{width:100%;font-size:16px;padding:14px 15px;border:1.5px solid var(--border);border-radius:14px;background:#fff;color:var(--text);font-family:inherit;line-height:1.55;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field .help{font-size:12.5px;color:var(--text-2);margin-top:6px}
/* Inline field-validation state (issue #146 item 7) — red border +
   per-field message, shown by app.js's setFieldError()/clearFieldError(). */
.field.invalid input,.field.invalid select{border-color:var(--danger)}
.field.invalid input:focus,.field.invalid select:focus{outline:none;border-color:var(--danger)}
.field-error{display:none;font-size:12.5px;color:var(--danger);margin-top:6px;font-weight:600}
.form{margin-top:8px}
.trust{display:flex;gap:9px;align-items:flex-start;margin-top:22px;font-size:13px;color:var(--text-2);line-height:1.5}
.trust svg{flex-shrink:0;margin-top:1px}

/* Terms-acceptance checkbox row (signup.html) — mirrors .trust's layout
   (icon/control + text side by side) but with a real <input type=checkbox>
   as the leading element instead of an SVG icon. */
.chk-row{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13.5px;color:var(--text-2);line-height:1.5;cursor:pointer}
.chk-row input{flex-shrink:0;width:18px;height:18px;margin-top:1px;accent-color:var(--accent)}
.chk-row a{color:var(--accent-dark);font-weight:700;text-decoration:underline}

.code-row{display:flex;gap:9px;justify-content:space-between;margin-top:8px}
.code-row input{width:100%;text-align:center;font-size:24px;font-weight:800;padding:14px 0;border:1.5px solid var(--border);border-radius:12px;background:#fff;color:var(--text)}
.code-row input:focus{outline:none;border-color:var(--accent)}
.code-meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13.5px;color:var(--text-2)}
.code-meta a{font-weight:700;cursor:pointer}
.back-toggle{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--text-2);margin-top:22px;cursor:pointer}
.to-mail{font-weight:700;color:var(--text)}
.foot-note{text-align:center;font-size:13px;color:var(--text-2);margin-top:26px}
.form-error{font-size:13.5px;color:var(--danger);margin-top:14px;text-align:center}

/* ===== Plan-status card (dashboard) ===== */
.plan-card{margin-top:26px}
.plan-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.04em;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark)}
.badge.badge-muted{background:#F0ECE4;color:var(--text-2)}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.badge.badge-muted .dot{background:var(--sage)}
/* "Gratis {tier}" complimentary-grant badge (issue #146 item 13) — warm
   accent (same family as .btn-warm's gradient) so a free gift reads
   visually distinct from the normal sage "Aktivt abonnement" badge. */
.badge.badge-gift{background:#F5EBDA;color:#7A5A2E}
.badge.badge-gift .dot{background:var(--warm-b)}
.plan-name{font-size:27px;font-weight:800;margin-top:14px;letter-spacing:-.02em}
.plan-meta{font-size:14.5px;color:var(--text-2);margin-top:5px}

/* Storage usage bar. NOTE: class is `.meter`, not `.bar` (that name is
   already taken by header.site .bar) — see file header note. */
.usage{margin-top:24px}
.usage-top{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:9px}
.usage-top b{font-size:15px}
.usage-top .muted{color:var(--text-2)}
.meter{height:12px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
.meter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sage),var(--accent))}
.usage-note{font-size:13px;color:var(--text-2);margin-top:9px}

.divider{height:1px;background:#EFEBE3;margin:24px 0}
.addon-line{display:flex;align-items:center;gap:11px;font-size:14.5px}
.addon-line svg{flex-shrink:0}
.addon-line .k{color:var(--text-2)}

/* Dashboard quick-nav grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.nav-card{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:20px;cursor:pointer;transition:border-color .15s}
.nav-card:hover{border-color:var(--sage)}
.nav-card .ic{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-card h3{font-size:16px;font-weight:800}
.nav-card p{font-size:13px;color:var(--text-2);margin-top:3px;line-height:1.45}
.nav-card .chev{margin-left:auto;color:var(--sage);flex-shrink:0;align-self:center}

/* ===== Subscription page ===== */
.banner{display:flex;gap:13px;align-items:flex-start;background:#fff;border:1px solid var(--border);border-left:4px solid var(--sage);border-radius:14px;padding:16px 18px;margin-top:22px}
.banner .ic{flex-shrink:0;margin-top:1px}
.banner .txt{font-size:14px;line-height:1.5}
.banner .txt b{font-weight:800}
.banner .txt a{font-weight:700;margin-left:2px;cursor:pointer}

.cur{margin-top:22px}
.cur .top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}

.act{border:1px solid var(--border);border-radius:18px;padding:22px;background:var(--card);margin-bottom:14px}
.act .head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.act h3{font-size:17px;font-weight:800}
.act p{font-size:13.5px;color:var(--text-2);margin-top:5px;max-width:520px}
.act .actions{flex-shrink:0}

.incl{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:16px}
.incl li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px}
.incl li svg{flex-shrink:0;margin-top:1px}
.incl li b{font-weight:800}

.note-inline{display:flex;gap:9px;align-items:flex-start;background:var(--accent-soft);border-radius:12px;padding:12px 14px;margin-top:14px;font-size:13px;color:var(--accent-dark);line-height:1.5}
.note-inline svg{flex-shrink:0;margin-top:1px}

.loss-lbl{font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--text-2);text-transform:uppercase;margin-top:16px}
.loss{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:9px}
.loss li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-2)}
.loss li .m{color:var(--sage);flex-shrink:0;font-weight:800;line-height:1.3}

.proration{background:var(--accent-soft);border-radius:14px;padding:16px 18px;margin-top:18px;font-size:14px}
.proration .r{display:flex;justify-content:space-between;padding:5px 0;color:var(--text-2)}
.proration .r span:last-child{font-weight:700;color:var(--text)}
.proration .r.total{border-top:1px solid #D5E0D8;margin-top:8px;padding-top:11px;font-size:15px}
.proration .r.total span{font-weight:800;color:var(--text)}
.proration .foot{font-size:12.5px;color:var(--text-2);margin-top:10px}

.cancel-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px;border:1px solid var(--border);border-radius:18px;background:var(--card)}
.cancel-row h3{font-size:16px;font-weight:800}
.cancel-row p{font-size:13.5px;color:var(--text-2);margin-top:4px;max-width:520px}

/* ===== Data / storage add-on page ===== */
.usage-stack-top{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin:18px 0 9px}
.usage-stack-top b{font-size:20px;font-weight:800}
.usage-stack-top .muted{color:var(--text-2);font-weight:600;font-size:14px}
.stack{height:14px;border-radius:999px;background:var(--accent-soft);overflow:hidden;display:flex}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}
.legend .it{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2)}
.legend .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.legend b{color:var(--text);font-weight:700}

/* "Efter type" mini-table — mirrors lib/features/auth/presentation/widgets/
   storage_details.dart's second table (Billeder/Video), shown as plain rows
   under the area legend rather than a second bar. */
/* Shared 3-column usage layout — description | count | used space — reused by
   BOTH the "Efter område" drill-down AND the "Efter type" table so every
   number lines up in the same vertical columns with air between them. The
   narrow 4th column holds the expand chevron on area rows and is left empty on
   the header / item / type rows, so the count + size columns align across all
   of them. Fixed count/size column widths (not `auto`) are what keep the
   columns aligned even though each row is its own grid container. */
/* Column widths are deliberately tight: the description column is the only
   flexible one, so every pixel spent on the count/size columns is a pixel
   taken from the group/event NAME (owner report 2026-08-16: on a phone the
   names were cut to "Ped..."). 82px fits the widest realistic size string
   ("1.234,5 MB") at this font size, and 44px fits a four-digit file count —
   anything wider is padding paid for by the names. */
.usage-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 82px 16px;column-gap:12px;align-items:baseline}
/* nowrap on the numbers: the columns are sized to the widest realistic value,
   so a wrap here would mean a number broken across two lines ("1.234,5" over
   "MB") rather than a wider column — always the worse outcome. */
.usage-row .c-count{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2);white-space:nowrap}
.usage-row .c-size{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);white-space:nowrap}
.usage-head{font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:0 2px 7px;border-bottom:1px solid #EFEBE3}
.usage-head .c-desc,.usage-head .c-count,.usage-head .c-size{color:var(--text-2);font-weight:700;white-space:nowrap}

.area-heading{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--text-2);text-transform:uppercase;margin:18px 0 8px}
/* The "your share, not the group's total" note. Sits between the section
   heading and the column header, so it is read before the numbers rather
   than as a footnote to them. Slightly tighter than a normal .hint because
   it separates two elements that belong together. */
.area-share-note{margin:-2px 0 10px}
.area-list{margin-top:0}
.area-details{border-top:1px solid #EFEBE3}
.area-details:last-child{border-bottom:1px solid #EFEBE3}
.area-details summary{padding:10px 2px;font-size:13.5px;color:var(--text-2);cursor:pointer;list-style:none}
.area-details summary::-webkit-details-marker{display:none}
.area-details summary .c-desc{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;color:var(--text)}
.area-details summary .sw{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.area-details summary .chev{transition:transform .15s ease;color:var(--text-2)}
.area-details[open] summary .chev{transform:rotate(90deg)}
.area-items{padding:0 2px 8px}
.area-item-row{font-size:13px;color:var(--text-2);padding:5px 0}
.area-item-row .c-desc{padding-left:19px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.area-empty{font-size:13px;color:var(--text-2);padding:5px 0 5px 19px;font-style:italic}

/* Third drill-down level (issue #476): a group/event expands into what
   inside it fills the space — Gallerier / Opslag / Chat / Forsidebillede.
   The item row keeps its own look and only gains a chevron, so the visual
   hierarchy is depth-by-indentation, not three competing row styles. */
.item-details summary{cursor:pointer;list-style:none}
.item-details summary::-webkit-details-marker{display:none}
.item-details summary .chev{transition:transform .15s ease;color:var(--text-2)}
.item-details[open] summary .chev{transform:rotate(90deg)}
.source-list{padding-bottom:4px}
.source-row{font-size:12.5px;color:var(--text-2);padding:3px 0}
.source-row .c-desc{padding-left:34px}
.source-row .c-size{font-weight:600;color:var(--text-2)}

.type-list{margin-top:16px;padding-top:16px;border-top:1px solid #EFEBE3}
.type-list .type-label{font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--text-2);text-transform:uppercase;margin-bottom:8px}
.type-row{font-size:13.5px;padding:4px 0;color:var(--text-2)}
.type-row .c-desc{color:var(--text)}

.addon{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #EFEBE3}
.addon:last-of-type{border-bottom:none}
.addon .l{display:flex;gap:13px;align-items:flex-start}
.addon .ic{width:38px;height:38px;border-radius:11px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.addon .l h3{font-size:15px;font-weight:800}
.addon .l p{font-size:13px;color:var(--text-2);margin-top:2px}
.buy-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid #EFEBE3}
.buy-row .t{font-size:14px;color:var(--text-2);max-width:440px}
.buy-row .t b{color:var(--text)}

.explain{display:flex;gap:14px;align-items:flex-start;background:var(--accent-soft);border-radius:16px;padding:20px 22px;margin-top:22px}
.explain .ic{flex-shrink:0;margin-top:1px}
.explain h3{font-size:15px;font-weight:800}
.explain p{font-size:13.5px;color:var(--accent-dark);margin-top:5px;line-height:1.55}

/* ===== Profile page ===== */
.row2{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.with-action{display:flex;gap:10px;align-items:center}
.with-action input{flex:1}
.with-action a{font-size:13.5px;font-weight:700;white-space:nowrap;cursor:pointer}
.save-row{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:22px}
.save-msg{font-size:13px;color:var(--accent-dark);font-weight:700}

.danger{margin-top:34px;border:1px solid var(--danger-soft);border-radius:var(--card-radius);padding:24px 28px;background:#FCF7F5}
.danger h2{font-size:16px;font-weight:800;color:var(--text)}
.danger p{font-size:13.5px;color:var(--text-2);margin-top:6px;max-width:440px}
.danger .in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.danger ul{margin:10px 0 0 18px;font-size:13.5px;color:var(--text-2)}

/* ===== Receipts page (invoice table) ===== */
.table{background:var(--card);border:1px solid var(--border);border-radius:var(--card-radius);overflow:hidden;margin-top:24px}
.thead,.trow{display:grid;grid-template-columns:96px 128px 1fr 150px 140px;align-items:center;gap:12px}
.thead{background:var(--bg);border-bottom:1px solid var(--border);padding:14px 24px;font-size:12px;font-weight:800;letter-spacing:.04em;color:var(--text-2);text-transform:uppercase}
.thead .r,.trow .r{text-align:right}
.trow{padding:18px 24px;border-bottom:1px solid #EFEBE3;font-size:14px}
.trow:last-child{border-bottom:none}
.trow .num{font-weight:800;font-variant-numeric:tabular-nums}
.trow .date{color:var(--text-2)}
.trow .desc{font-weight:600}
.trow .amt{text-align:right}
.trow .amt b{font-weight:800;font-variant-numeric:tabular-nums}
.trow .amt .vat{display:block;font-size:12px;color:var(--text-2);margin-top:2px}
.trow .act{text-align:right}

.foot-line{font-size:13px;color:var(--text-2);margin-top:16px}

.empty{background:var(--card);border:1px solid var(--border);border-radius:var(--card-radius);padding:56px 32px;text-align:center;margin-top:24px}
.empty .ic{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.empty h3{font-size:18px;font-weight:800}
.empty p{font-size:14px;color:var(--text-2);margin:8px auto 0;max-width:400px}

/* ===== Opgrader / kvittering (checkout — no session, no header nav) ===== */
.checkout-header .bar{max-width:560px;justify-content:center;padding:14px 24px}
.checkout-header .brand img{height:38px}
.checkout-header .brand .name{font-size:20px}

.checkout-page{max-width:560px;margin:0 auto;padding:40px 24px 64px;position:relative}
.checkout-page::before{content:"";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  width:min(560px,100vw);height:360px;
  background:radial-gradient(closest-side,rgba(216,179,107,.16),rgba(243,239,232,0) 72%);
  pointer-events:none;z-index:0}
.checkout-page>*{position:relative;z-index:1}
h1.checkout-h1{font-size:26px;font-weight:800;letter-spacing:-.02em;text-align:center}
.checkout-sub{font-size:15px;color:var(--text-2);margin-top:7px;text-align:center}

.sum .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sum h2{font-size:22px;font-weight:800;margin-top:12px;letter-spacing:-.02em}
.sum .meta{font-size:14px;color:var(--text-2);margin-top:4px}
.sum .lines{margin-top:18px;padding-top:16px;border-top:1px solid #EFEBE3;font-size:14px}
.sum .r{display:flex;justify-content:space-between;padding:5px 0;color:var(--text-2)}
.sum .r span:last-child{color:var(--text);font-weight:600}
.sum .r.total{border-top:1px solid #EFEBE3;margin-top:8px;padding-top:12px;font-size:17px}
.sum .r.total span{font-weight:800;color:var(--text)}

.card h3.sec{font-size:16px;font-weight:800}

/* Collapsed "Faktura med navn og adresse" disclosure on the checkout pages
   (ADR-019). A private buyer never has to open it — they get a simplified
   invoice — so it must read as a quiet, optional extra, not as a form the
   visitor is expected to fill in. Hence: no heading weight, muted colour,
   and a chevron that turns when it opens (same idiom as .area-details). */
.billing-summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:700;color:var(--text)}
.billing-summary::-webkit-details-marker{display:none}
.billing-summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);transition:transform .15s ease;flex-shrink:0;margin-left:2px}
details[open] > .billing-summary::before{transform:rotate(45deg)}
.billing-summary .opt{font-weight:600;color:var(--text-2);opacity:.8;font-size:13px}
details.card > .hint{margin-top:10px}
details.card > .field:first-of-type{margin-top:14px}

.billing-done{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:var(--accent-soft);border-radius:14px;padding:15px 17px}
.billing-done .l{font-size:13.5px;line-height:1.5}
.billing-done .l .k{font-weight:800;display:block;margin-bottom:3px}
.billing-done a{font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}

/* Quiet "Annullér" link on /opgrader (issue #146 item 9) — same calm
   checkout tone as the rest of the page, centered like .checkout-sub. */
.cancel-link{display:block;text-align:center;font-size:13.5px;font-weight:700;color:var(--text-2);margin-top:14px;cursor:pointer}
.cancel-link:hover{color:var(--text)}
.pay-methods{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.pm{font-size:12px;font-weight:700;color:var(--text-2);border:1px solid var(--border);background:var(--card);padding:6px 11px;border-radius:8px}

.trust-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;font-size:12.5px;color:var(--text-2);text-align:center;line-height:1.5}
.trust-foot svg{flex-shrink:0}

/* kvittering success/pending state */
.receipt-card{background:var(--card);border:1px solid var(--border);border-radius:var(--card-radius);padding:40px 32px;text-align:center;box-shadow:0 30px 60px -34px rgba(43,48,44,.3)}
.check{width:76px;height:76px;border-radius:50%;background:#E7F1EA;display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.receipt-card h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.receipt-card .sub{font-size:15px;color:var(--text-2);margin-top:8px;line-height:1.55;text-align:center}
.receipt{margin-top:24px;padding:16px 18px;background:var(--bg);border-radius:14px;font-size:14px;text-align:left}
.receipt .r{display:flex;justify-content:space-between;padding:4px 0;color:var(--text-2)}
.receipt .r span:last-child{color:var(--text);font-weight:700}
.actions{margin-top:26px}
/* Calm, quiet note pointing at Kvitteringer post-login (issue #146 item
   3) — replaces the old .invoice-link "Se din faktura" button, which
   dead-ended for anonymous/in-app-browser visitors on this session-less
   page (see kvittering.html's comment). */
.invoice-note{font-size:13px;color:var(--text-2);margin-top:18px;line-height:1.5}
.spinner{width:56px;height:56px;margin:0 auto 22px;border:5px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.refresh-note{display:flex;align-items:flex-start;gap:9px;justify-content:center;font-size:12.5px;color:var(--text-2);margin-top:22px;line-height:1.5;text-align:left}
.refresh-note svg{flex-shrink:0;margin-top:1px}

/* ===== Footer ===== */
footer.site{background:var(--bg);border-top:1px solid var(--border)}
footer.site .in{max-width:920px;margin:0 auto;padding:28px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13.5px;color:var(--text-2)}
footer .legal{display:flex;gap:20px}

/* ===== Responsive ===== */
@media (max-width:720px){
  .thead{display:none}
  .trow{grid-template-columns:1fr auto;gap:6px 12px;padding:18px}
  .trow .num{grid-column:1;grid-row:1}
  .trow .date{grid-column:1;grid-row:2;font-size:13px}
  .trow .desc{grid-column:1;grid-row:3;margin-top:4px}
  .trow .amt{grid-column:2;grid-row:1/3;text-align:right;align-self:start}
  .trow .act{grid-column:2;grid-row:3;text-align:right}
}
@media (max-width:640px){
  .brand .tagline{display:none}
  .who .name-txt{display:none}
  .grid{grid-template-columns:1fr}
  h1.ph{font-size:25px}
  .act .actions,.act .actions .btn{width:100%}
  .cancel-row .btn{width:100%}
  .buy-row .btn{width:100%}
}
@media (max-width:600px){
  .row2{grid-template-columns:1fr}
  .save-row .btn{width:100%}
  .danger .btn{width:100%}
}
@media (max-width:560px){
  .auth-card{padding:30px 22px}
  .code-row input{font-size:20px}
  /* Storage breakdown on a phone: the names are the point of the table, and
     everything else is competing with them for a ~275px content width. So the
     usage card gives back its side padding, the numeric columns shrink to
     their real content width, and the drill-down indents halve — together
     roughly +90px for the description column (owner report 2026-08-16). */
  .usage-card{padding:22px 14px}
  .usage-row{grid-template-columns:minmax(0,1fr) 30px 80px 14px;column-gap:8px}
  /* The column headers ("FORBRUGT PLADS") are wider than the numbers they
     label, so at this width they wrap onto two lines instead of forcing the
     whole column to stay as wide as the heading. */
  .usage-head .c-count,.usage-head .c-size{white-space:normal}
  .area-item-row .c-desc{padding-left:13px}
  .area-empty{padding-left:13px}
  .source-row .c-desc{padding-left:24px}
}
@media (max-width:480px){
  .row2{grid-template-columns:1fr}
}