/* WOVENRAG pricing calculator — multi-product UI. Mobile-first. All colour,
   type, spacing, radius and shadow values come from the design tokens in
   tokens.css (loaded before this sheet); nothing here hardcodes a themed colour. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.app { max-width: 720px; margin: 0 auto; padding: 0 14px calc(44px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
h1, h2, h3 { text-wrap: balance; }

/* Inline icons — Remix Icon masks from tokens.css, painted with the element's
   currentColor so a button's colour flows into its glyph. Sized in em so each
   icon tracks the surrounding font-size; the two tap-target overrides below give
   the round nav and icon buttons a fixed, comfortable glyph. */
.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -0.2em; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-delete { --i: var(--ico-delete); }
.ico-camera { --i: var(--ico-camera); }
.ico-copy { --i: var(--ico-copy); }
.ico-close { --i: var(--ico-close); }
.ico-prev { --i: var(--ico-prev); }
.ico-next { --i: var(--ico-next); }
.ico-help { --i: var(--ico-help); }
.ico-craft-sewing { --i: var(--ico-craft-sewing); }
.ico-craft-jewelry { --i: var(--ico-craft-jewelry); }
.ico-craft-soap { --i: var(--ico-craft-soap); }
.ico-craft-generic { --i: var(--ico-craft-generic); }
.icon-btn .ico { width: 20px; height: 20px; }
.pnav .ico { width: 24px; height: 24px; }

/* Masthead */
.masthead { background: var(--grad); color: #fff; border-radius: 0 0 var(--radius) var(--radius); padding: 16px 20px 20px; margin: 0 -14px; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; }
.masthead h1 { margin: 6px 0 6px; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; color: #fff; }
.tagline { margin: 0; color: rgba(255, 255, 255, 0.88); max-width: 52ch; }
/* Utility top bar: tour pill on the left, account + language on the right, all in
   normal flow so nothing overlaps the heading. Wraps on very narrow screens. */
.mast-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mast-bar-l, .mast-bar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mast-bar-r { justify-content: flex-end; margin-left: auto; }
.lang-switch { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 3px; }
.lang-btn { min-height: 30px; padding: 3px 12px; border: none; background: transparent; color: rgba(255, 255, 255, 0.85); border-radius: 999px; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.lang-btn.active { background: #fff; color: var(--accent-2); }
.mast-auth { min-height: 30px; padding: 3px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.16); color: #fff; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.mast-auth:hover { background: rgba(255,255,255,0.3); }
.wiz-help { min-height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.16); color: #fff; font-weight: 700; font-size: 0.8rem; cursor: pointer; }
.wiz-help:hover { background: rgba(255,255,255,0.3); }
.wiz-help-q { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,0.3); font-weight: 800; font-size: 0.78rem; }

.banner { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-sm); padding: 9px 13px; font-size: 0.86rem; }
/* Read-only account: a subtle cue that editing is off, plus a clear disabled state on
   every control the lock disables. Navigation, help and the resubscribe CTA stay live. */
.readonly-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.app.readonly :disabled { opacity: 0.55; cursor: not-allowed; }

/* Cards — distinct blocks, denser inside */
.card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 14px; }
.card.highlight { border-left: 3px solid var(--accent); }
.card h2 { font-size: 1.06rem; margin: 0; font-weight: 720; }
/* Numbered step badge so each main section announces where the maker is in the
   flow (issue #14). Tinted accent pill, legible in light and dark. */
.step-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding: 0 0.35em; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 0.82em; font-weight: 800; font-variant-numeric: tabular-nums; }
.head-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.head-row h2 { display: inline-flex; align-items: center; gap: 6px; }
.sub { font-size: 0.82rem; color: var(--muted); margin: 10px 0 5px; display: flex; align-items: center; gap: 6px; }
.sub.label-lg { font-size: 0.88rem; font-weight: 700; color: var(--ink); margin-top: 16px; }
.muted { color: var(--muted); font-size: 0.85rem; margin: 0 0 8px; }
.muted.small { font-size: 0.78rem; margin: 0; }
.muted.neg { color: var(--c-cost); font-weight: 700; }
.small { font-size: 0.78rem; }

/* Craft picker */
.picker h2 { margin-bottom: 4px; }
.pick.craft { min-height: 64px; }
.pick-ico { font-size: 1.5rem; line-height: 1; color: var(--accent); }
.pick.craft { position: relative; padding-left: 56px; }
.pick.craft .pick-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); }
.pick.craft.sm { padding-left: 48px; }
.pick.craft.sm .pick-ico { left: 10px; font-size: 1.2rem; }

/* Sticky header: three compact money tiles + product chips. Hides itself once
   the full monthly section at the end of the page scrolls into view. */
.sticky-head { position: sticky; top: 6px; z-index: 6; padding: 8px 10px; background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.sticky-head.hidden { display: none; }
.ptiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ptile { background: var(--tile); border: 1px solid var(--line); border-radius: 8px; padding: 5px 5px; text-align: center; min-width: 0; }
.ptile-l { font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; }
.ptile-v { font-size: 0.9rem; font-weight: 720; margin-top: 1px; font-variant-numeric: tabular-nums; }
.ptile.rev .ptile-v { color: var(--c-rev); }
.ptile.cost .ptile-v { color: var(--c-cost); }
.ptile.net .ptile-v { color: var(--c-net); }
.ptile.net .ptile-v.neg { color: var(--c-cost); }
/* Wrapping row of short product chips, so all products stay visible */
.chips-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ptile.clickable { cursor: pointer; }
.ptile.clickable:hover { border-color: var(--accent); }
/* Scrolled-to targets clear the sticky header. --sticky-h tracks the header's
   real (variable) height via ResizeObserver in app.ts; 96px is a first-paint
   fallback before that measurement lands. */
.card, .pcard, .products { scroll-margin-top: var(--sticky-h, 96px); }
.chip { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-left: 3px solid var(--pc, var(--accent)); border-radius: 7px; padding: 3px 9px 4px; background: var(--card-2); flex: 1 1 104px; min-width: 0; max-width: 240px; cursor: pointer; }
.chip:hover { border-color: var(--accent); }
/* Name + price share one line, so the chip (and the sticky header holding it)
   stays short on phones instead of stacking to two lines. */
.chip-line { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.chip-n { font-weight: 400; font-size: 0.72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.chip-p { color: var(--ink); font-weight: 720; font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto; }
/* The mini composition bar is desktop-only — on phones the chip is name + price */
.chip .cbar.mini { display: none; }
/* Desktop has the width to give the name its own line above the price (the two-row
   chip of the earlier design), so long names read in full instead of truncating to
   "Koš…"; the mini composition bar shows too. Phones keep name + price on one line. */
@media (min-width: 640px) {
  .chip .cbar.mini { display: flex; width: 100%; height: 5px; margin-top: 4px; }
  .chip-line { flex-direction: column; align-items: stretch; gap: 0; }
}

/* Fields */
.field { display: flex; flex-direction: column; gap: 5px; }
.field.dim { opacity: 0.5; }
.field-label { font-size: 0.82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 460px) { .grid2 { grid-template-columns: 1fr 1fr; } }
.adv-grid { margin-top: 2px; }
.adv-grid .field-label { font-size: 0.76rem; }
/* The three columns have labels of different lengths (one line vs two), so their
   inputs would sit at different heights. The grid stretches every field to the
   tallest, then each field pushes its input to the bottom, lining the three input
   boxes up on one baseline regardless of how the label above wrapped. */
.adv-grid .field { justify-content: space-between; }

/* Material consumption calculator */
.mat-cost { font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; flex: 0 0 auto; }
.mat-calc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mat-calc .in-wrap { flex: 1 1 60px; min-width: 56px; }
.mat-calc .mat-lbl { font-size: 0.76rem; color: var(--muted); }
.mat-unit { flex: 0 0 52px; min-width: 44px; text-align: center; padding: 8px 4px; }
.capacity-hint { line-height: 1.4; }
.capacity-hint:empty { display: none; }
.extra-adds { display: flex; gap: 8px; flex-wrap: wrap; }
.extra-adds .add-line { flex: 1 1 auto; }

/* Skill-tier presets for the maker's rate */
.tier-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 4px; }
.tier { border: 1px solid var(--line-strong); background: var(--card-2); border-radius: 999px; padding: 5px 11px; font-size: 0.76rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.tier:hover { border-color: var(--accent); }
.tier.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.w-item { display: flex; flex-direction: column; }
select, input[type="text"] { min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: 1rem; width: 100%; }
/* One visible focus ring for every keyboard-reachable control (K-16): inputs,
   buttons, links, disclosure summaries and the role=button chips alike. */
input:focus, select:focus, button:focus-visible, a:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 34px; cursor: pointer; }
.in-wrap { display: flex; align-items: center; gap: 6px; }
.in-wrap .in-num { width: 100%; text-align: right; }
.in-wrap .unit { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.in-wrap.in-pct { flex: 0 0 84px; }
.in-num { font-variant-numeric: tabular-nums; }
.in-sel { width: auto; min-width: 0; flex: 1; }
.range-field { gap: 2px; }
/* The header line of a range field: the label (with its help "?" sitting right
   beside it) on the left, the live value on the right. Only this wrapper spreads
   apart — the label keeps its "?" adjacent, not flung to the far edge. */
.range-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.range-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Help "?" */
.help-wrap { position: relative; display: inline-flex; margin-left: 1px; }
.help { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.help:hover, .help:focus { border-color: var(--accent); color: var(--accent); }
.help-pop { display: none; position: fixed; inset: auto; margin: 0; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px 12px; font-size: 0.8rem; font-weight: 400; color: var(--ink); line-height: 1.5; text-align: left; }
.help-pop:popover-open { display: block; }
.help-pop::backdrop { pointer-events: none; }

/* Selectable cards (legal form, craft, split method) */
.picks { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 520px) { .picks { grid-template-columns: 1fr 1fr; } }
.picks.compact { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.pick { text-align: left; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card-2); padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.pick:hover { border-color: var(--accent); }
.pick.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); box-shadow: inset 0 0 0 1px var(--accent); }
.pick-t { font-weight: 700; font-size: 0.9rem; }
.pick-d { font-size: 0.76rem; color: var(--muted); }
.pick-v { font-size: 0.78rem; color: var(--accent-2); font-weight: 640; font-variant-numeric: tabular-nums; }
.pick.sm { padding: 8px 10px; }
.pick.sm .pick-t { font-size: 0.82rem; }

.switch { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; margin: 10px 0; }
.vat-note:empty { display: none; }
.vat-note { margin: -2px 0 8px; }
.switch input { width: 20px; height: 20px; min-height: 20px; accent-color: var(--accent); }
.chan-list { display: flex; flex-direction: column; gap: 6px; }
.chan-row { display: flex; align-items: center; gap: 8px; }
.chan-row .chan-name { flex: 1; font-size: 0.9rem; min-width: 0; }
.chan-row .chan-feelbl { white-space: nowrap; }

/* Roster + shared + line rows */
.roster, .shared-list, .line-list { display: flex; flex-direction: column; gap: 8px; }
.line-item { display: flex; flex-direction: column; gap: 3px; }
.w-row, .s-row { display: flex; align-items: center; gap: 8px; }
.w-name, .s-name { flex: 1 1 120px; min-width: 0; }
.w-me { font-weight: 700; padding: 8px 2px; }
.w-row .in-wrap, .s-row .in-wrap { flex: 0 0 116px; }
.sub-note { font-size: 0.74rem; color: var(--muted); line-height: 1.4; padding-left: 2px; }
.icon-btn { flex: 0 0 auto; width: 44px; min-height: 44px; border: 1px solid var(--line-strong); background: var(--card); border-radius: var(--radius-sm); font-size: 0.95rem; cursor: pointer; }
.icon-btn:hover { border-color: var(--c-cost); }
.add-line { min-height: 44px; border: 1px dashed var(--line-strong); background: transparent; color: var(--accent); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.86rem; font-weight: 600; }
.add-line.sm { min-height: 44px; font-size: 0.8rem; }
.add-line:hover { border-color: var(--accent); }
.line-list { gap: 6px; margin-top: 2px; }
.ll-h { font-size: 0.78rem; font-weight: 700; color: var(--muted); }

.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kv.total-row { padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--line-strong); font-size: 0.92rem; font-weight: 600; }
.kv .kv-v { font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink); }

/* One disclosure style + chevron for every expandable */
.disc { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card-2); }
.disc > summary { cursor: pointer; padding: 11px 13px; min-height: 44px; display: flex; align-items: center; gap: 10px; font-weight: 640; font-size: 0.88rem; list-style: none; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.disc > summary:hover { border-color: var(--accent); }
.disc[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.disc > summary::-webkit-details-marker { display: none; }
.disc > summary::after { content: ""; margin-left: auto; width: 1.15em; height: 1.15em; flex: 0 0 auto; background-color: var(--muted); -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; transition: transform 0.15s ease; }
.disc[open] > summary::after { transform: rotate(180deg); }
.disc > summary .disc-t { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.disc-body { padding: 2px 13px 13px; display: flex; flex-direction: column; gap: 10px; }
/* The who-section disclosure uses the default boxed style (like "Podrobný
   rozpis"); its body just stacks the sub-sections. */
.who-body { display: flex; flex-direction: column; gap: 4px; }
.disc.chan { background: transparent; border: none; }
.disc.chan > summary { padding: 6px 2px; min-height: 34px; color: var(--accent-2); }
.disc.chan .disc-body { padding: 2px 2px 6px; }

/* Split (de-emphasised): small, collapsed by default */
.split-body { display: flex; flex-direction: column; gap: 10px; }
.chart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; }
.chart.small { padding: 8px 8px 4px; }
.chart-svg svg { width: 100%; height: auto; display: block; max-height: 150px; }
.chart-svg .axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-svg .capline { stroke: #b34; stroke-width: 1.3; stroke-dasharray: 5 4; opacity: 0.8; }
.chart-svg .caplab { font-size: 10px; fill: #b34; font-weight: 700; }
.chart-svg .pline { fill: none; stroke: var(--muted); stroke-width: 2; }
.chart-svg .pval { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.leg-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--ink); }
.leg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.leg-v { color: var(--muted); font-variant-numeric: tabular-nums; }

.note { border-radius: var(--radius-sm); padding: 9px 12px; font-size: 0.85rem; }
/* Status icons on notes, banners and chips — the same masked Remix glyph as
   .ico but on a ::before, so the copy itself stays plain text. */
.note.warn::before, .note.ok::before, .banner::before,
.save-chip.warn::before, .save-chip.ok::before,
.storage-note.warn::before, .storage-note.muted::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: 0.4em;
  vertical-align: -0.2em; flex: 0 0 auto; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.note.warn::before, .banner::before, .save-chip.warn::before,
.storage-note.warn::before { --i: var(--ico-alert); }
.note.ok::before, .save-chip.ok::before, .storage-note.muted::before { --i: var(--ico-check); }
/* The text is the money-green pulled toward ink so it clears 4.5:1 on its own
   12% tint in both themes (axe color-contrast, K-16). */
.note.ok { background: color-mix(in srgb, var(--c-net) 12%, transparent); color: color-mix(in srgb, var(--c-net) 72%, var(--ink)); }
.note.warn { background: var(--warn-bg); color: var(--warn-ink); }
.note.small { padding: 7px 10px; font-size: 0.78rem; margin-top: 6px; }

/* Products */
.products { display: flex; flex-direction: column; gap: 10px; }
.products > .head-row { margin-bottom: 0; }

.pcard { background: var(--card); border: 1px solid var(--line-strong); border-left: 4px solid var(--pc, var(--accent)); border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 14px; display: flex; flex-direction: column; gap: 10px; }
.pc-head { display: flex; align-items: center; gap: 8px; }
/* Optional product thumbnail: a 44px square in the card header. Empty state shows a
   camera glyph on a dashed frame; once set it shows the photo, with a small remove
   affordance. The whole thing is a 44px touch target. */
.pphoto-wrap { flex: 0 0 auto; position: relative; }
.pphoto { width: 44px; height: 44px; padding: 0; border-radius: 9px; border: 1.5px dashed var(--line-strong); background: var(--bg-soft, rgba(0,0,0,0.03)); cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pphoto.has { border-style: solid; border-color: var(--line-strong); }
.pphoto:hover { border-color: var(--accent); }
.pphoto-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pphoto-plus { font-size: 1.05rem; line-height: 1; color: var(--muted); }
.pphoto-file { display: none; }
.pphoto-rm { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: none; background: var(--c-cost); color: #fff; font-size: 0.85rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
/* Name reads as editable text, not a form box (input.pname beats the generic
   input[type="text"] rule that would otherwise draw a bordered field). Matches the
   editable price: dashed underline as the affordance, accent underline on focus. */
input.pname { flex: 1; min-width: 0; font-size: 1.02rem; font-weight: 700; border: none; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); padding: 4px 2px; min-height: 40px; }
input.pname:focus { outline: none; border-bottom: 2px solid var(--accent); }
/* Per-product actions (duplicate, delete), addressed by id. A tight cluster of
   compact icon buttons; the name (flex:1, min-width:0) shrinks to absorb it, so the
   cluster never pushes the row past the card edge on a narrow phone. Only delete reads
   as destructive on hover — the duplicate button uses the neutral accent, not the
   delete-red the global .icon-btn:hover would otherwise give them. */
.pc-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.pc-actions .icon-btn { width: 44px; min-height: 44px; font-size: 0.9rem; padding: 0; }
.pc-actions .icon-btn:hover { border-color: var(--accent); }
.pc-actions .pc-rm:hover { border-color: var(--c-cost); color: var(--c-cost); }
/* Price sits to the left of its line, the channel toggle to the right, so a long
   price never overlaps the toggle on a narrow phone (issue #29). */
.pc-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; min-height: 40px; }
.pprice-col { text-align: left; min-width: 0; }
/* Editable headline price: reads as text, not a form field. A faint dashed underline
   hints it is editable (like the product-name field); accent underline on focus. The
   € is a static suffix, so the input value stays a bare number. */
.pprice-wrap { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; }
.pprice-cur { font-size: 1.45rem; font-weight: 750; color: var(--ink); }
input.pprice-in { min-height: 0; width: auto; padding: 1px 2px; border: none; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: transparent; text-align: center; font-size: 2rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
input.pprice-in:focus { outline: none; border-bottom: 2px solid var(--accent); }
.pprice-wrap.reject input.pprice-in, .pprice-wrap.reject .pprice-cur,
.seg-in-wrap.reject .seg-in, .seg-in-wrap.reject .seg-in-cur,
.margin-pct-wrap.reject .margin-val, .margin-pct-wrap.reject .unit { color: var(--c-cost); border-bottom-color: var(--c-cost); }
/* Shared flash-and-shake for every rejected inline edit (price, channel price,
   margin € and margin %) — same "invalid, reverting" feedback everywhere. */
.pprice-wrap.reject, .chan-price-row.reject, .seg-in-wrap.reject, .margin-pct-wrap.reject { animation: price-reject 0.32s ease; }
@keyframes price-reject { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .pprice-wrap.reject, .chan-price-row.reject, .seg-in-wrap.reject, .margin-pct-wrap.reject { animation: none; } }
.gross { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.gross:empty { display: none; }
.chan-btn { flex: 0 0 auto; background: none; border: none; color: var(--accent-2); font-size: 0.74rem; font-weight: 640; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; max-width: 44%; text-align: right; line-height: 1.2; }
.chan-btn::after { content: ""; width: 1.2em; height: 1.2em; flex: 0 0 auto; background-color: currentColor; -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; transition: transform 0.15s ease; }
.chan-btn.open::after { transform: rotate(180deg); }
.chan-panel { display: none; }
.chan-panel.open { display: block; padding: 2px 0 4px; }

/* Composition bar with € inside; category colours */
.comp { display: flex; flex-direction: column; gap: 6px; }
.cbar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.cbar.mini { height: 6px; border-radius: 3px; }
.cbar .seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.72rem; font-weight: 700; min-width: 0; overflow: hidden; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,0.28); }
/* Thin white separators between adjacent segments, on the main bar and the mini
   chip bars alike, so each field of the composition reads as its own block. */
.cbar .seg + .seg { border-left: 1.5px solid rgba(255, 255, 255, 0.92); }
.cbar.mini .seg + .seg { border-left-width: 1px; }
.seg.k-material, .k.k-material { background: var(--k-material); }
.seg.k-labour, .k.k-labour { background: var(--k-labour); }
.seg.k-shared, .k.k-shared { background: var(--k-shared); }
.seg.k-state, .k.k-state { background: var(--k-state); }
.seg.k-margin, .k.k-margin { background: var(--k-margin); }
/* Editable margin € inside the green "Marža" segment — reads like plain text
   (the segment's own dark shadow gives it contrast), dashed underline on focus
   hints it's editable, same affordance as the headline price. */
.seg-in-wrap { display: inline-flex; align-items: baseline; gap: 2px; min-width: 0; }
input.seg-in { min-height: 0; width: 3em; padding: 0; border: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.65); border-radius: 0; background: transparent; text-align: center; color: #fff; font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
input.seg-in:focus { outline: none; border-bottom-color: #fff; }
.seg-in-cur { color: #fff; font-size: 0.72rem; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28); }
.cleg { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.lchip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.73rem; color: var(--muted); }
.lchip .k { width: auto; height: auto; border-radius: 0; background: none; display: inline-block; font-size: 0.7rem; line-height: 1; }
/* Category legend swatches — a masked shape tinted the category colour. Distinct
   SHAPES (triangle/circle/square/rhombus/star) so colour is never the only signal (K-16). */
.k.k-material::before, .k.k-labour::before, .k.k-shared::before, .k.k-state::before, .k.k-margin::before {
  content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em;
  background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.k.k-material::before { --i: var(--ico-material); color: var(--k-material); }
.k.k-labour::before { --i: var(--ico-labour); color: var(--k-labour); }
.k.k-shared::before { --i: var(--ico-shared); color: var(--k-shared); }
.k.k-state::before { --i: var(--ico-state); color: var(--k-state); }
.k.k-margin::before { --i: var(--ico-margin); color: var(--k-margin); }
/* Category icons on breakdown/monthly rows: same shape + colour code everywhere. */
.brow.cat-material > .lbl::before, .mo-row.cat-material > .mo-l::before,
.brow.cat-labour > .lbl::before, .mo-row.cat-labour > .mo-l::before,
.brow.cat-shared > .lbl::before, .mo-row.cat-shared > .mo-l::before,
.brow.cat-state > .lbl::before, .mo-row.cat-state > .mo-l::before {
  content: ""; display: inline-block; width: 0.72em; height: 0.72em; margin-right: 0.35em;
  vertical-align: baseline; background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.brow.cat-material > .lbl::before, .mo-row.cat-material > .mo-l::before { --i: var(--ico-material); color: var(--k-material); }
.brow.cat-labour > .lbl::before, .mo-row.cat-labour > .mo-l::before { --i: var(--ico-labour); color: var(--k-labour); }
.brow.cat-shared > .lbl::before, .mo-row.cat-shared > .mo-l::before { --i: var(--ico-shared); color: var(--k-shared); }
.brow.cat-state > .lbl::before, .mo-row.cat-state > .mo-l::before { --i: var(--ico-state); color: var(--k-state); }

/* Margin — the one flexible lever, loud, matching the margin segment exactly;
   label, slider and value all on one line to keep the card compact */
.margin-row { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--k-margin) 8%, var(--card-2)); border: 1px solid color-mix(in srgb, var(--k-margin) 30%, var(--line)); }
.margin-row > .field-label { flex: 0 0 auto; }
/* Higher specificity than the generic input[type="range"] rule so the thumb and
   track take the margin colour, matching the "Marža" bar segment and slider. */
input[type="range"].margin-range { flex: 1 1 auto; min-width: 0; accent-color: var(--k-margin); }
/* Editable margin percentage: reads like the plain text it replaced, dashed
   underline is the only hint it's a field (matches the headline price). */
.margin-pct-wrap { flex: 0 0 auto; }
.margin-pct-wrap .unit { color: var(--k-margin); font-weight: 700; }
input.margin-val { min-height: 0; width: 3.4em; padding: 0; border: none; border-bottom: 1px dashed color-mix(in srgb, var(--k-margin) 50%, transparent); border-radius: 0; background: transparent; text-align: right; font-weight: 800; color: var(--k-margin); font-variant-numeric: tabular-nums; font-size: 1em; }
input.margin-val:focus { outline: none; border-bottom-color: var(--k-margin); }

/* Earnings as one sentence: "Zarobíte 75,02 € / kus, čo je 25,01 € / hod" */
.earn-row { font-size: 0.92rem; line-height: 1.5; background: var(--card-2); border-radius: var(--radius-sm); padding: 8px 12px; }
.earn-row .takev { font-weight: 800; font-size: 1.1rem; }
.earn-lbl { font-weight: 600; }
.takev { font-weight: 720; color: var(--c-net); font-variant-numeric: tabular-nums; }
.takev.neg { color: var(--c-cost); }
.perhour { color: var(--ink); font-weight: 750; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.perhour.neg { color: var(--c-cost); font-weight: 700; }
.cumulative { line-height: 1.5; margin-top: -2px; }
.cumulative:empty { display: none; }
.wage-line { display: flex; flex-direction: column; gap: 4px; }
.wage-line:empty { display: none; }
.chan-prices { display: flex; flex-direction: column; gap: 4px; }

.brow { display: flex; justify-content: space-between; font-size: 0.82rem; font-variant-numeric: tabular-nums; padding: 1px 0; }
.brow .lbl { color: var(--muted); }
/* Editable per-channel price rows — same dashed-underline affordance as the
   headline price, at row scale. */
.chan-price-row { align-items: center; }
.chan-net { font-weight: 700; color: var(--c-net); white-space: nowrap; }
.chan-onePrice { margin-bottom: 2px; }
.yearly-note { margin-top: 4px; }
.yearly-goal { margin-top: 8px; font-size: 0.82rem; }
.brow.net { font-weight: 720; color: var(--c-net); border-top: 1px solid var(--line-strong); padding-top: 6px; margin-top: 4px; }
.brow.net.neg { color: var(--c-cost); }
.brow.subtle { font-size: 0.78rem; color: var(--muted); }
.brow.subtle .lbl { padding-left: 8px; }
.brk-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }

.reality-mini { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.reality-out:empty { display: none; }
.reality-out { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.reality-now { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 0.95rem; }
.reality-now-v { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--c-net); }
.reality-now-v.neg { color: var(--c-cost); }
.reality-lever { color: var(--muted); line-height: 1.5; }
.card.reality { border-left-width: 4px; }
.unit-toggle { border: 1px solid var(--line-strong); background: var(--card-2); border-radius: 8px; min-height: 44px; padding: 0 10px; color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.unit-toggle:hover { border-color: var(--accent); color: var(--accent); }

.add-btn { min-height: 44px; border: 1px dashed var(--line-strong); background: transparent; color: var(--accent); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.92rem; font-weight: 640; }
.add-btn:hover { border-color: var(--accent); }

/* Monthly overview */
.mo-rows { display: flex; flex-direction: column; }
.mo-row { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: baseline; padding: 5px 2px; font-size: 0.88rem; }
.mo-l { color: var(--ink); }
.mo-v { text-align: right; font-variant-numeric: tabular-nums; min-width: 5.5em; }
.mo-p { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4em; }
.mo-row.income { font-weight: 700; border-bottom: 1px solid var(--line-strong); }
.mo-row.income .mo-v { color: var(--c-rev); }
.mo-row.cost .mo-l { padding-left: 12px; color: var(--muted); }
.mo-row.cost.sub .mo-l { padding-left: 24px; font-size: 0.82rem; }
.mo-row.cost.sub { padding: 2px 2px; }
.mo-row.total { font-weight: 700; border-top: 1px solid var(--line-strong); }
.mo-row.total .mo-v { color: var(--c-cost); }
.mo-row.net { font-weight: 800; border-top: 1px solid var(--line-strong); padding-top: 7px; }
.mo-row.net .mo-v { color: var(--c-net); }
.mo-row.net.neg .mo-v { color: var(--c-cost); }
.mo-row.subtle { font-size: 0.8rem; color: var(--muted); padding: 2px 2px; }
.mo-row.subtle .mo-l { padding-left: 12px; }
.mo-compare { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mo-hours { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; font-weight: 600; padding: 6px 2px; border-top: 1px solid var(--line-strong); }
.mo-hours-v { font-variant-numeric: tabular-nums; color: var(--c-net); }
.mo-hours.over .mo-hours-v { color: var(--c-cost); }

/* "Koľko si odložiť": a prominent reddish reserve callout so the state's monthly
   cut is set aside, not spent (issue #31). Uses the state category colour. */
.setaside { margin: 12px 0 4px; border: 1.5px solid var(--k-state); border-left-width: 4px; background: color-mix(in srgb, var(--k-state) 9%, var(--card)); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.setaside .sa-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.setaside .sa-l { font-weight: 720; display: inline-flex; align-items: center; gap: 6px; }
.setaside .sa-v { font-weight: 800; font-size: 1.2rem; color: var(--k-state); font-variant-numeric: tabular-nums; white-space: nowrap; }
.setaside .sa-break { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.setaside .sa-note { font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

.app-footer { color: var(--muted); font-size: 0.8rem; text-align: center; padding: 6px 4px; display: flex; flex-direction: column; gap: 8px; }
.foot-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 16px; }
/* 44px touch target (K-16 / mobile-first rule) without inflating the visual text. */
.link-btn { background: none; border: none; color: var(--accent); font-size: 0.85rem; font-weight: 640; cursor: pointer; padding: 6px 2px; min-height: 44px; display: inline-flex; align-items: center; }
.link-btn.danger { color: var(--muted); }
.link-btn:hover { text-decoration: underline; }
.storage-note { text-align: center; }
/* Legal links + the mandatory operator block (K-15). */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; }
.foot-operator { line-height: 1.6; }
.storage-note.warn { color: var(--c-cost); font-weight: 640; }
.auth-control { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.auth-control .warn { color: var(--c-cost); }

/* Account dialog (K-03). Mobile-first: full-width fields, 44px controls. */
.auth-dialog { border: 1px solid var(--line); border-radius: var(--radius, 8px); padding: 24px; max-width: 400px; width: calc(100% - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; overflow-y: auto; box-shadow: 0 16px 56px rgba(0, 0, 0, 0.18); color: inherit; background: var(--card, #fff); }
.auth-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.auth-dialog h2 { margin: 0 0 14px; font-size: 1.15rem; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line, #d9d9e3); border-radius: 10px; font-size: 1rem; box-sizing: border-box; background: var(--bg, #fff); color: inherit; }
.auth-form .btn.primary { min-height: 44px; border: none; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 680; cursor: pointer; }
.auth-form .btn.primary:disabled { opacity: 0.6; cursor: default; }
.auth-error { min-height: 1.2em; }
.auth-error.warn { color: var(--c-cost); }
.auth-sent { display: flex; flex-direction: column; gap: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-sent p { margin: 0; }
.auth-sent > .link-btn { align-self: flex-start; min-height: 44px; }
.auth-verification { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; }
.auth-verification summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; font-size: 13px; color: var(--muted); }
.auth-verification p { margin: 8px 0; }
/* A secondary comparison for links opened on another device; never an input. */
.auth-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: .06em; user-select: all; }
.claim-toast { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); max-width: min(92vw, 440px); background: var(--card, #fff); color: inherit; border: 1px solid var(--line, #d9d9e3); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); padding: 12px 14px; display: flex; align-items: center; gap: 12px; z-index: 50; font-size: 0.9rem; }
.auth-foot { margin-top: 12px; text-align: right; }

/* Free-limit paywall (K-07). Reuses the account dialog shell. */
.limit-hint { margin-top: 6px; text-align: center; }
.add-btn.capped { border-style: solid; }
.paywall-dialog .paywall-body { display: flex; flex-direction: column; gap: 8px; }
.paywall-dialog .guarantee { border-left: 2px solid var(--accent); padding-left: 10px; }
.paywall-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.paywall-actions .btn.primary { min-height: 44px; padding: 0 18px; border: none; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 680; cursor: pointer; }


/* Pricing page (K-11): a full-screen, directly-linkable overlay. Mobile-first: the
   two tiers stack on a phone and sit side by side from 600px up. */
.pricing-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.45); overflow-y: auto; padding: 20px 12px; display: flex; justify-content: center; align-items: flex-start; }
.pricing-inner { width: min(760px, 100%); background: var(--card, #fff); color: inherit; }
.pricing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pricing-head h2 { margin: 0; }
.ptiers { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0; }
@media (min-width: 600px) { .ptiers { grid-template-columns: 1fr 1fr; } }
.ptier { border: 1px solid var(--line, #d9d9e3); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.ptier.featured { border-color: var(--accent); border-width: 2px; }
.ptier h3 { margin: 0; font-size: 1.05rem; }
.ptier-price { font-size: 1.5rem; font-weight: 720; }
.ptier-permonth { margin-top: -4px; }
.ptier-features { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 6px; }
.ptier-features li { padding-left: 20px; position: relative; }
.ptier-features li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 1em; height: 1em; background-color: var(--accent); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.ptier .btn.primary { min-height: 44px; margin-top: auto; border: none; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 1rem; font-weight: 680; cursor: pointer; }
.ptier .btn.primary:disabled, .ptier .link-btn:disabled { opacity: 0.55; cursor: default; }
.pmonthly { text-align: center; margin-top: 6px; }
.need-account { border-top: 1px solid var(--line, #d9d9e3); padding-top: 8px; }
.pfaq { border-radius: 10px; background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 12px 14px; }
.pfaq-q { font-weight: 640; margin-bottom: 4px; }

/* Subscription line + past-due banner (K-11). */
.sub-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.banner.past-due { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }

/* Cookie consent (K-14): a light brand bar pinned to the bottom. Refusing is one
   click and visually equal to accepting; the settings link is the quiet third. */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--card); border-top: 2px solid var(--accent); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; }
.cookie-bar-text { margin: 0; font-size: 0.85rem; color: var(--ink); max-width: 720px; }
.cookie-bar-text a { color: var(--accent); }
.cookie-bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cookie-bar .btn, .consent-actions .btn { min-height: 44px; padding: 0 16px; border-radius: 10px; font-size: 0.95rem; font-weight: 680; cursor: pointer; border: 1.5px solid var(--accent); background: var(--card); color: var(--accent); }
.cookie-bar .btn.primary, .consent-actions .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (min-width: 640px) {
  .cookie-bar { flex-direction: row; align-items: center; justify-content: center; gap: 18px; }
}
.consent-form { display: flex; flex-direction: column; gap: 12px; }
/* Checkout consent checkboxes (K-13): both unchecked by design; the checkbox and
   its sentence align to the first text line. */
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-size: 0.85rem; line-height: 1.5; cursor: pointer; }
.consent-check input { width: 20px; height: 20px; min-height: 20px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); }
.consent-check a { color: var(--accent); }
.reg-consent { margin: 0; }
.reg-consent a { color: var(--accent); }
.consent-row .switch { margin: 0; font-weight: 640; }
.consent-desc { margin: 2px 0 0 28px; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.consent-status { min-height: 1.2em; }

/* Account self-service (K-14). The destructive action is quiet until its own dialog. */
.account-profile { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.account-profile .auth-input { min-height: 40px; }
.account-profile .btn.primary { min-height: 40px; border: none; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 0.9rem; font-weight: 680; cursor: pointer; }
.account-profile .btn.primary:disabled { opacity: 0.6; cursor: default; }
.account-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.btn.account-action { min-height: 44px; border: 1.5px solid var(--line, #d9d9e3); border-radius: 10px; background: var(--bg, #fff); color: inherit; font-size: 0.9rem; font-weight: 640; cursor: pointer; }
.btn.account-action:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }
.account-danger { border-top: 1px solid var(--line-strong); margin-top: 10px; padding-top: 8px; text-align: left; }
.account-danger .link-btn.danger { color: var(--c-cost); }
.auth-form .btn.danger { min-height: 44px; border: none; border-radius: 10px; background: var(--c-cost); color: var(--on-accent); font-size: 1rem; font-weight: 680; cursor: pointer; }
.auth-form .btn.danger:disabled { opacity: 0.6; cursor: default; }
.product-delete-dialog h2 { overflow-wrap: anywhere; }
.product-delete-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.auth-form .product-delete-actions .btn { min-height: 44px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.product-delete-actions .btn:not(.danger) { border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); }
.product-delete-actions .btn:not(.danger):hover { background: var(--card-2); }

/* Static document pages (model.html + the legal pages, K-13/K-14/K-15): the shared
   .doc layout, moved here from model.html's inline block so every page uses one
   stylesheet and none needs an inline <style> (CSP without 'unsafe-inline', K-17). */
.doc { max-width: 760px; margin: 0 auto; padding: 0 16px calc(56px + env(safe-area-inset-bottom)); }
.doc-head { background: var(--grad); color: #fff; border-radius: 0 0 var(--radius) var(--radius); padding: 24px 20px 20px; margin: 0 -16px 20px; box-shadow: var(--shadow); }
.doc-head h1 { color: #fff; margin: 4px 0 6px; font-size: 1.5rem; font-weight: 750; letter-spacing: -0.02em; }
header.doc-head p { margin: 0; color: rgba(255, 255, 255, 0.92); max-width: 60ch; }
.doc-head a { color: #fff; font-weight: 640; font-size: 0.85rem; text-decoration: none; opacity: 0.9; }
.doc-head a:hover { text-decoration: underline; }
.doc h2 { font-size: 1.2rem; font-weight: 720; margin: 30px 0 8px; border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; }
.doc h3 { font-size: 1rem; font-weight: 700; margin: 20px 0 4px; }
.doc p, .doc li { color: var(--ink); line-height: 1.6; }
.doc .muted { color: var(--muted); }
.doc code { background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
/* pre-wrap instead of a scroll region: formulas wrap on phones and no keyboard-
   unreachable scrollable is created (axe scrollable-region-focusable, K-16). */
.doc pre { background: var(--card-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; white-space: pre-wrap; overflow-wrap: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; line-height: 1.55; }
.doc pre code { background: none; border: none; padding: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.9rem; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--muted); font-weight: 700; font-size: 0.82rem; }
.doc td:last-child, .doc th:last-child { font-variant-numeric: tabular-nums; }
.doc .banner { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.9rem; margin: 8px 0 4px; }
.doc .tag { display: inline-block; background: var(--card-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.doc footer { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line-strong); color: var(--muted); font-size: 0.82rem; }
.doc a { color: var(--accent); }
.doc .btn-hero { color: var(--on-accent); }
.doc .doc-head a { color: #fff; }
/* The effective-date line legal documents carry in their header (K-13/K-14). */
.doc .effective { font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); margin-top: 8px; }

/* !important: must beat every element's own transition declaration (any specificity)
   to honour the OS reduced-motion preference. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Onboarding tour (K-20): a bottom sheet + a loud spotlight ring that dims the rest
   of the page and pulses on the step's target. The ring is a viewport-fixed box
   re-tracked to the target every frame (JS), so it follows scroll and re-renders. */
.wizard { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 81; background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; max-width: 480px; margin: 0 auto; }
.wizard-text { margin: 0 0 10px; font-size: 0.98rem; line-height: 1.5; }
.wizard-foot { display: flex; align-items: center; gap: 10px; }
.wizard-dots { flex: 1; font-variant-numeric: tabular-nums; }
.wizard-back { color: var(--muted); }
.wizard .btn.primary { min-height: 44px; padding: 0 18px; border-radius: 10px; border: none; background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
/* The spotlight: a bright, thick ring plus a huge translucent box-shadow that darkens
   everything outside it. pointer-events:none so the highlighted control stays usable. */
.wiz-ring { position: fixed; z-index: 80; display: none; border-radius: 10px; pointer-events: none;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px #fff, 0 0 0 9999px rgba(15, 10, 40, 0.62), 0 0 22px 6px var(--accent);
  animation: wiz-pulse 1.1s ease-in-out infinite; }
@keyframes wiz-pulse {
  0%, 100% { box-shadow: 0 0 0 4px #fff, 0 0 0 9999px rgba(15, 10, 40, 0.62), 0 0 10px 2px var(--accent); }
  50% { box-shadow: 0 0 0 4px #fff, 0 0 0 9999px rgba(15, 10, 40, 0.62), 0 0 30px 10px var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .wiz-ring { animation: none; } }

/* Empty states (K-20): what belongs in an empty section, with a craft example. */
.empty-note { border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; }

/* The fixed cookie bar must never cover reachable content (K-20/K-14). */
body.has-cookie-bar { padding-bottom: 190px; }

/* The wage microcopy's biggest-cost action reads as a link inside the note. */
.wage-kind .wage-biggest { display: inline; padding: 0; border: none; background: none; color: inherit; text-decoration: underline; font-weight: 700; cursor: pointer; font-size: inherit; }

/* Save indicator (K-22): a small chip in the masthead. */
.save-chip { position: absolute; right: 16px; bottom: 12px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.14); color: #fff; border-radius: 999px; padding: 4px 12px; min-height: 30px; font-size: 0.74rem; font-weight: 650; cursor: pointer; }
.save-chip.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
@media (max-width: 639px) { .save-chip { position: static; align-self: flex-end; margin-top: 8px; } }

/* Undo toast (K-22): the standard toast plus a prominent undo button. */
.undo-toast .undo-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--accent); background: var(--card); color: var(--accent); font-weight: 700; cursor: pointer; }

/* Quantity steppers (K-22): 44px touch targets around the number. */
.stepper { display: flex; align-items: stretch; gap: 6px; }
.stepper .in-num { text-align: center; }
.step-btn { flex: 0 0 44px; min-height: 44px; border: 1px solid var(--line-strong); background: var(--card-2); border-radius: var(--radius-sm); font-size: 1.1rem; font-weight: 700; color: var(--accent-2); cursor: pointer; }
.step-btn:hover { border-color: var(--accent); }

/* ---- Price-defense card (K-21): on-screen overlay + A4 print ---- */
.tool-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 6px; }
.tool-btn { min-height: 44px; display: inline-flex; align-items: center; }
.disc.explain > summary { color: var(--accent-2); }
.explain-body p { margin: 0 0 8px; font-size: 0.88rem; }
.explain-body .explain-lead { font-weight: 640; color: var(--ink); }

.card-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(15, 23, 42, 0.55); overflow: auto; padding: 20px 12px; }
.card-overlay-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border-radius: var(--radius-sm); padding: 10px 14px; }
.card-actions .btn.primary { min-height: 44px; padding: 0 18px; border-radius: 10px; border: none; background: var(--accent); color: var(--on-accent); font-weight: 700; cursor: pointer; }
.preview-note { flex: 1 1 100%; }

.price-card { position: relative; background: #fff; color: #111827; border-radius: 6px; padding: 28px 30px; box-shadow: var(--shadow); font-size: 0.95rem; }
.card-brand { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid #111827; padding-bottom: 8px; margin-bottom: 18px; }
.card-logo { font-weight: 850; letter-spacing: 0.12em; font-size: 1rem; }
.card-date { font-size: 0.8rem; color: #4b5563; }
.card-main { display: flex; gap: 18px; margin-bottom: 18px; }
.card-photo { flex: 0 0 128px; height: 128px; border: 1.5px dashed #9ca3af; border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; color: #6b7280; font-size: 0.7rem; padding: 8px; overflow: hidden; }
.card-photo.has { border-style: solid; padding: 0; }
.card-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-title-block { min-width: 0; }
.card-name { margin: 0 0 6px; font-size: 1.4rem; font-weight: 800; color: #111827; }
.card-price { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-vat { font-size: 0.8rem; font-weight: 500; color: #4b5563; }
.card-net { font-size: 0.85rem; color: #4b5563; }
.card-h2 { margin: 0 0 8px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; color: #111827; }
.card-rows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.card-row { display: grid; grid-template-columns: 14px 1fr 64px 96px; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #e5e7eb; font-variant-numeric: tabular-nums; }
.card-dot { width: 14px; text-align: center; font-size: 0.8rem; line-height: 1; }
.card-dot.k-material::before, .card-dot.k-labour::before, .card-dot.k-shared::before, .card-dot.k-state::before, .card-dot.k-margin::before {
  content: ""; display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.05em;
  background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.card-dot.k-material::before { --i: var(--ico-material); color: var(--k-material); }
.card-dot.k-labour::before { --i: var(--ico-labour); color: var(--k-labour); }
.card-dot.k-shared::before { --i: var(--ico-shared); color: var(--k-shared); }
.card-dot.k-state::before { --i: var(--ico-state); color: var(--k-state); }
.card-dot.k-margin::before { --i: var(--ico-margin); color: var(--k-margin); }
.card-row-p, .card-row-v { text-align: right; }
.card-row-v { font-weight: 700; }
.card-wage { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #f3f4f6; border-radius: 6px; margin-bottom: 14px; }
.card-note { font-size: 0.8rem; color: #374151; line-height: 1.5; margin: 0 0 16px; }
.card-foot { border-top: 1px solid #d1d5db; padding-top: 8px; font-size: 0.72rem; color: #6b7280; }
.card-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; font-weight: 900; letter-spacing: 0.2em; color: rgba(17, 24, 39, 0.14); transform: rotate(-24deg); pointer-events: none; user-select: none; }

/* Print: only the card, on A4, black-and-white friendly (dots keep their hue but
   the layout carries the meaning without colour). */
@media print {
  /* !important: overrides each top-level element's own display value so the print
     view shows only the price card, whatever those elements set themselves. */
  body.print-card-mode > :not(.card-overlay) { display: none !important; }
  body.print-card-mode .card-overlay { position: static; background: none; padding: 0; overflow: visible; }
  body.print-card-mode .card-actions { display: none; }
  body.print-card-mode .card-overlay-inner { max-width: none; }
  body.print-card-mode .price-card { box-shadow: none; border-radius: 0; padding: 10mm 12mm; }
  @page { size: A4; margin: 14mm; }
}

/* Live-recompute feedback: outputs that changed flash softly (K-23). */
@keyframes num-flash { 0% { background: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background: transparent; } }
.num-flash { animation: num-flash 0.7s ease-out; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .num-flash { animation: none; } }

/* ---- Landing page (K-24; 2026-07 redesign, PR #144): static, LCP-first.
   Full-bleed hero photo (pink set), Manrope, calculator purple as the one
   highlight, dark-blue closing band. The hero's colours are constants taken
   from the photo itself, so they ignore prefers-color-scheme; every section
   below the hero uses the shared tokens and follows light/dark. ---- */
@font-face {
  font-family: 'Manrope';
  src: url('./manrope.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
body.landing { display: flex; flex-direction: column; min-height: 100vh; font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; }

/* Hero: the photo covers the whole area; on phones the person runs to the
   bottom edge, so a scrim fades into a tone sampled from the photo and the
   text sits on that strip. Desktop text sits on the photo's clean left zone. */
.landing-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100svh; padding: 0 20px; background: #e59396; }
.landing-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.landing-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(221, 138, 139, 0) 30%, rgba(221, 138, 139, 0.85) 54%, #dd8a8b 74%); }
.landing-top { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; width: 100%; max-width: 1100px; margin: 0 auto; padding-top: 14px; }
.landing-lang { display: flex; gap: 16px; }
/* Mobile: the photo's face sits high in the frame (unlike the desktop crop's
   clean left zone), so the 5-link menu collapses behind a toggle instead of
   wrapping over the photo and colliding with it. */
.landing-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 4px; border: none; background: none; font-size: 1.1rem; color: rgba(22, 40, 58, 0.72); cursor: pointer; }
.landing-menu-toggle:hover { color: #16283a; }
.landing-menu { display: none; position: absolute; top: 100%; right: 0; z-index: 1; flex-direction: column; gap: 0; min-width: 220px; margin-top: 6px; padding: 6px 0; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 6px; box-shadow: 0 16px 32px rgba(22, 40, 58, 0.22); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
/* Frosted glass needs the blur to work; without it, a near-invisible panel
   over the photo is unreadable, so fall back to a solid matte tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .landing-menu { background: #fbe6e2; }
}
.landing-menu.is-open { display: flex; }
.landing-menu a { padding: 0 20px; }
.landing-menu a, .landing-lang a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: rgba(22, 40, 58, 0.72); }
.landing-menu a:hover, .landing-lang a:hover { color: #16283a; }
.landing-lang a[aria-current] { color: #16283a; box-shadow: inset 0 -1px #16283a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.landing-hero-text { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 40px; }
.landing-brand { margin: 0 0 14px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(22, 40, 58, 0.72); }
.landing-hero h1 { margin: 0 0 28px; font-size: clamp(1.9rem, 7.2vw, 2.5rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: #1d2733; text-wrap: balance; }
.landing-cta-row { margin: 0; }
.landing-hero .btn-hero { width: 100%; }
.landing-market { margin: 16px 0 0; font-size: 0.8rem; color: rgba(22, 40, 58, 0.62); }
.btn-hero { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; min-height: 56px; padding: 16px 40px; border-radius: 2px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.02rem; text-decoration: none; }
.btn-hero:hover { background: var(--accent-2); }
@media (min-width: 821px) {
  .landing-hero { min-height: 92svh; }
  .landing-hero-img { object-position: 72% 15%; }
  .landing-scrim { display: none; }
  .landing-top { align-items: baseline; padding-top: 18px; }
  .landing-menu-toggle { display: none; }
  .landing-menu { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 0 22px; min-width: 0; margin-top: 0; padding: 0; background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .landing-menu a { padding: 0; }
  .landing-hero-text { justify-content: center; padding-bottom: 56px; }
  /* Capped to the photo's clean left zone so the headline never reaches the
     figure (the person starts at ~55% of the frame per the photo template). */
  .landing-hero h1 { max-width: 620px; font-size: clamp(2.5rem, 5vw, 4.2rem); }
  .landing-hero .btn-hero { width: auto; }
}

/* Sections: tokens only, so light/dark keep working. */
.landing-main { width: 100%; max-width: 1100px; margin: 0 auto; padding: 10px 20px 40px; box-sizing: border-box; }
.landing-sec { padding: 40px 0; }
.landing-sec h2 { margin: 0 0 26px; font-size: clamp(1.35rem, 3vw, 1.9rem); font-weight: 350; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
.landing-sec > p { max-width: 62ch; }

.landing-steps { list-style: none; counter-reset: krok; margin: 0; padding: 0; display: grid; gap: 24px; }
.landing-steps li { counter-increment: krok; border-top: 1px solid var(--line); padding-top: 16px; }
.landing-steps li::before { content: counter(krok); display: block; font-size: 2rem; font-weight: 200; line-height: 1.1; color: var(--ink); margin-bottom: 10px; }
.landing-steps strong { color: var(--ink); }
@media (min-width: 761px) { .landing-steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }

.landing-demo { background: var(--card); border: 1px solid var(--line); padding: 24px 26px; max-width: 420px; margin: 0 0 16px; }
.landing-demo-price { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.landing-demo-earn { margin-top: 6px; }
.landing-demo-earn strong { color: var(--ink); }
.landing-demo-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }
.landing-aha { background: var(--tile); padding: 40px clamp(20px, 4vw, 44px); }
@media (min-width: 861px) {
  .landing-aha { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 16px 56px; align-items: center; }
  .landing-aha h2 { grid-column: 2; margin: 0; }
  .landing-aha .landing-demo { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .landing-aha > p { grid-column: 2; margin: 0; }
}

.landing-hub-grid { display: grid; gap: 24px; }
.landing-post { display: grid; gap: 14px; max-width: 860px; text-decoration: none; color: var(--ink); }
.landing-post img { width: 100%; height: auto; display: block; }
.landing-post-title { font-weight: 600; font-size: 1.15rem; line-height: 1.45; }
.landing-post:hover .landing-post-title { text-decoration: underline; }
@media (min-width: 761px) { .landing-post { grid-template-columns: minmax(220px, 380px) 1fr; align-items: center; gap: 32px; } }

.landing-faq { border-top: 1px solid var(--line); }
.landing-faq:last-of-type { border-bottom: 1px solid var(--line); }
.landing-faq > summary { cursor: pointer; padding: 12px 2px; min-height: 44px; box-sizing: border-box; font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; }
.landing-faq > summary::-webkit-details-marker { display: none; }
.landing-faq > summary::after { content: ""; margin-left: auto; width: 1.15em; height: 1.15em; flex: 0 0 auto; background-color: var(--muted); -webkit-mask: var(--ico-chevron) center / contain no-repeat; mask: var(--ico-chevron) center / contain no-repeat; transition: transform 0.15s ease; }
.landing-faq[open] > summary::after { transform: rotate(180deg); }
.landing-faq > p { margin: 0; padding: 0 2px 18px; max-width: 68ch; font-size: 0.92rem; line-height: 1.6; }

/* Closing band: the dark blue from the photo backdrop bookends the hero. */
.landing-final { background: linear-gradient(165deg, #16283a 0%, #0d1d28 100%); text-align: center; padding: 60px 20px; }
.landing-trust { margin: 16px 0 0; font-size: 0.85rem; color: rgba(255, 249, 240, 0.65); }
.landing-trust a { color: inherit; }

.landing-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 16px; text-align: center; font-size: 0.78rem; color: var(--muted); }
.landing-foot a { color: var(--accent-2); }
.landing-operator { margin: 6px 0 0; }

/* Calculator workspace: product comparison and one selected editor. */
body.calc { font-family: 'Manrope', system-ui, sans-serif; background: var(--calc-canvas); }
body.calc button, body.calc input, body.calc select { font-family: inherit; }
body.calc .app { max-width: 1120px; padding: 0 28px 32px; gap: 0; }
body.calc .site-header { background: var(--card); border-bottom: 1px solid var(--line); }
body.calc .masthead { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; max-width: 1120px; min-height: 92px; padding: 20px 28px; margin: 0 auto; background: transparent; color: var(--ink); border-radius: 0; box-shadow: none; }
body.calc .mast-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
body.calc .mast-brand img { border-radius: 4px; flex: 0 0 auto; }
body.calc .mast-brand strong { display: block; font-size: 14px; font-weight: 650; letter-spacing: 1.4px; }
body.calc .mast-author { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 400; }
body.calc .mast-site-nav { display: flex; gap: 24px; align-items: center; }
body.calc .mast-site-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; font-size: 12px; }
body.calc .mast-site-nav a[aria-current] { color: var(--ink); font-weight: 600; }
body.calc .mast-site-nav a:hover { color: var(--accent); }
body.calc .mast-bar { justify-self: end; flex-wrap: nowrap; margin: 0; gap: 12px; align-items: center; }
body.calc .lang-switch { border: 1px solid var(--line); background: var(--card); border-radius: 5px; }
body.calc .lang-btn { border-radius: 3px; color: var(--muted); font-weight: 500; font-size: 11px; padding: 3px 8px; }
body.calc .lang-btn.active { background: var(--card-2); color: var(--ink); }
body.calc .mast-auth, body.calc .wiz-help { background: transparent; color: var(--muted); border: 0; border-radius: 4px; font-size: 12px; font-weight: 400; padding: 5px; min-height: 44px; }
body.calc .mast-auth:hover, body.calc .wiz-help:hover { background: var(--card-2); }
body.calc .wiz-help-q { background: transparent; }
body.calc .save-chip { position: static; margin: 0; background: transparent; color: var(--muted); border: 0; font-size: 11px; padding: 0; min-height: 44px; }
body.calc .save-chip.warn { color: var(--warn-ink); }
body.calc .workspace-navigation { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
body.calc .workspace-tabs { display: flex; gap: 28px; }
body.calc .workspace-status { display: flex; gap: 14px; align-items: center; }
body.calc .workspace-navigation [data-workspace-tab] { color: var(--muted); font: inherit; font-size: 12px; min-height: 60px; background: none; border: 0; padding: 16px 0; border-bottom: 2px solid transparent; cursor: pointer; }
body.calc .workspace-navigation [aria-current=page] { color: var(--ink); border-bottom-color: var(--ink); }
body.calc .workspace-pane { display: flex; flex-direction: column; gap: 22px; }
body.calc .workspace-pane[hidden] { display: none; }
body.calc .banner { margin: 14px 0 0; }
body.calc .collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
body.calc .collection-heading h1 { font-size: 27px; line-height: 1.2; letter-spacing: -1px; font-weight: 600; margin: 0 0 7px; }
body.calc .collection-heading p { font-size: 11px; }
body.calc .add-btn { width: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; min-height: 44px; padding: 8px 14px; font-size: 12px; font-weight: 500; box-shadow: var(--shadow); margin: 0; }
body.calc .product-comparison { width: 100%; table-layout: fixed; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; font-variant-numeric: tabular-nums; }
body.calc .comparison-col-0 { width: 27%; }
body.calc .comparison-col-1 { width: 13%; }
body.calc .comparison-col-2 { width: 14%; }
body.calc .comparison-col-3 { width: 13%; }
body.calc .comparison-col-4 { width: 15%; }
body.calc .comparison-col-5 { width: 18%; }
body.calc .product-comparison th, body.calc .product-comparison td { padding: 0 18px; text-align: right; vertical-align: middle; }
body.calc .product-comparison th:first-child { text-align: left; }
body.calc .product-comparison thead th { font-size: 11px; font-weight: 400; color: var(--muted); height: 44px; background: var(--tile); border-bottom: 1px solid var(--line); }
body.calc .product-comparison tbody th, body.calc .product-comparison tbody td { height: 64px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; white-space: nowrap; }
body.calc .product-comparison tbody tr { cursor: pointer; }
body.calc .product-comparison tbody tr:not(.selected):hover { background: var(--tile); }
body.calc .product-comparison tbody tr:last-child th, body.calc .product-comparison tbody tr:last-child td { border-bottom: 0; }
body.calc .product-comparison .selected { background: var(--calc-selected); }
body.calc .product-comparison .selected th { box-shadow: inset 2px 0 0 var(--accent); }
body.calc .comparison-select { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0; width: 100%; background: transparent; border: 0; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
body.calc .comparison-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.calc .selected .comparison-name { font-weight: 650; }
body.calc .comparison-photo { width: 36px; height: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; background: var(--card-2); border-radius: 3px; overflow: hidden; color: var(--muted); }
body.calc .comparison-photo img { width: 100%; height: 100%; object-fit: cover; }
body.calc .product-comparison tfoot th, body.calc .product-comparison tfoot td { border-top: 1px solid var(--line); height: 46px; background: var(--tile); font-size: 12px; font-weight: 500; white-space: nowrap; }
body.calc .collection-hint { margin: 12px 0 28px; font-size: 11px; }
body.calc .product-collection, body.calc .comparison-scroll { min-width: 0; }
body.calc .limit-hint { margin-bottom: 15px; }
body.calc .pcard { width: 100%; max-width: none; padding: 0; gap: 0; border: 1px solid var(--line); border-radius: 6px; overflow: clip; box-shadow: var(--shadow); }
body.calc .pc-head { min-height: 100px; padding: 18px 24px; gap: 15px; margin: 0; border-bottom: 1px solid var(--line); }
body.calc .product-identity { flex: 1; min-width: 0; }
body.calc .pname { font-size: 23px; font-weight: 600; letter-spacing: -.7px; line-height: 1.4; padding: 0; min-height: 34px; border: 0; background: transparent; }
body.calc .product-craft { display: block; font-size: 11px; }
body.calc .photo-edit { font-size: 11px; color: var(--muted); padding: 2px 0; min-height: 24px; }
body.calc .pphoto { width: 66px; height: 66px; border-radius: 4px; }
body.calc .pphoto-wrap { flex-basis: 66px; }
body.calc .editing-label { font-size: 11px; color: var(--muted); }
body.calc .pc-actions { margin-left: 0; }
body.calc .pc-actions .icon-btn { border: 0; background: transparent; color: var(--muted); }
body.calc .product-detail-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
body.calc .product-editor, body.calc .product-result { padding: 24px; min-width: 0; }
body.calc .product-result { border-left: 1px solid var(--line); background: var(--calc-result); container-type: inline-size; }
body.calc .product-result-primary { container-type: inline-size; }
body.calc .product-section-heading, body.calc .product-result-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 24px; margin-bottom: 17px; }
body.calc .product-section-heading h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.4px; }
body.calc .product-section-heading > span, body.calc .product-result-heading { font-size: 11px; color: var(--muted); }
body.calc .calculation-live { white-space: nowrap; }
body.calc .calculation-live::before { content: ''; display: inline-block; width: 5px; height: 5px; background: var(--c-net); border-radius: 50%; margin-right: 5px; vertical-align: 2px; }
body.calc .product-core { gap: 16px; margin-bottom: 18px; }
body.calc .product-core .field-label { min-height: 24px; font-size: 12px; }
body.calc .product-core .in-wrap { border: 1px solid var(--line); border-radius: 5px; padding-right: 10px; }
body.calc .product-core .in-num { border: 0; text-align: left; }
body.calc .product-core .stepper { display: flex; gap: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }
body.calc .product-core .step-btn { width: 36px; min-width: 36px; border: 0; background: transparent; }
body.calc .product-core .stepper input { text-align: center; flex: 1; min-width: 0; }
body.calc .product-core .unit { font-size: 11px; }
body.calc .product-editor .disc, body.calc .product-result .disc { border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; }
body.calc .product-editor .disc > summary, body.calc .product-result .disc > summary { border: 0; border-radius: 0; background: transparent; padding: 14px 0; min-height: 48px; font-size: 12px; font-weight: 500; }
body.calc .product-editor .disc > summary { min-height: 76px; }
body.calc .product-editor .disc-body, body.calc .product-result .disc-body { padding: 0 0 16px; }
body.calc .product-editor .disc-t { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; }
body.calc .product-editor .brk .disc-t { display: block; }
body.calc .product-editor .k { background: transparent; }
body.calc .cost-summary-name { font-size: 13px; }
body.calc .cost-summary-value { font-weight: 600; font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.calc .product-context { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--card-2); padding: 13px; border-radius: 5px; margin-top: 16px; }
body.calc .product-context strong, body.calc .product-context span { display: block; font-size: 11px; font-weight: 400; }
body.calc .product-context span { color: var(--muted); margin-top: 4px; }
body.calc .product-context button { font-size: 11px; min-height: 44px; }
body.calc .product-input-note { margin: 15px 0 27px; font-size: 11px; }
body.calc .product-month-summary { border-top: 1px solid var(--line); padding-top: 22px; margin-bottom: 18px; container-type: inline-size; }
body.calc .product-month-summary h3 { font-weight: 400; font-size: 11px; color: var(--muted); margin: 0 0 15px; }
body.calc .product-month-summary .ptiles { gap: 16px; }
body.calc .product-month-summary .ptile { border: 0; background: transparent; text-align: left; padding: 0; }
body.calc .product-month-summary .ptile-l { font-size: 11px; text-transform: none; letter-spacing: 0; }
body.calc .product-month-summary .ptile-v { color: var(--ink); font-size: clamp(13px, 6cqw, 23px); font-weight: 550; }
body.calc .pc-price { margin: 0; min-height: 70px; }
body.calc .pprice-col { min-width: 0; width: 100%; }
body.calc .pprice-wrap { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; min-width: 0; }
body.calc input.pprice-in { width: var(--price-width,3ch); font-size: clamp(24px, calc(110cqw / var(--price-digits,6)), 59px); font-weight: 550; letter-spacing: -2.5px; min-width: 0; max-width: 100%; flex: 0 1 auto; border: 0; text-align: left; line-height: 1.4; }
body.calc .pprice-cur { flex: 0 0 auto; font-size: 26px; font-weight: 500; color: var(--muted); }
@supports (field-sizing: content) {
  body.calc input.pprice-in { field-sizing: content; width: auto; }
}
body.calc .vat-controls { border-top: 1px solid var(--line); margin-top: 12px; }
body.calc .consent-form a { color: var(--accent); text-underline-offset: 3px; }
body.calc .price-hint { margin: 4px 0 21px; font-size: 11px; }
body.calc .margin-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 0; background: transparent; border: 0; margin-bottom: 15px; }
body.calc .margin-range { grid-column: 1 / -1; grid-row: 2; margin: 0; accent-color: var(--accent); }
body.calc .margin-pct-wrap { grid-column: 2; grid-row: 1; }
body.calc .margin-val, body.calc .margin-pct-wrap .unit { color: var(--ink); font-size: 12px; font-weight: 500; }
body.calc .margin-val { border: 0; min-height: 44px; }
body.calc .earn-row { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 17px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
body.calc .earn-lbl { font-size: 12px; align-self: center; }
body.calc .earn-row .perhour { color: var(--ink); font-size: 25px; font-weight: 550; margin: 0; }
body.calc .earn-row .takev { grid-column: 1 / -1; color: var(--muted); font-size: 11px; font-weight: 400; }
body.calc .earn-row .neg { color: var(--c-cost); }
body.calc .product-result .composition { border-top: 0; margin-top: 14px; }
body.calc .cbar { height: 7px; border: 0; gap: 2px; border-radius: 2px; }
body.calc .cbar .seg + .seg { border: 0; }
body.calc .composition-rows { display: grid; gap: 7px; margin-top: 10px; }
body.calc .composition-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
body.calc .composition-row .lchip { font-size: 11px; }
body.calc .composition-row input.seg-in, body.calc .composition-row .seg-in-cur { color: var(--ink); font-size: 12px; text-shadow: none; font-weight: 400; }
body.calc .composition-row input.seg-in { text-align: right; border-bottom-color: var(--line-strong); min-height: 28px; }
body.calc .composition-row input.seg-in:focus { outline: 2px solid var(--accent); }
body.calc .tool-row { margin-top: 12px; }
body.calc .tool-btn { width: 100%; border-radius: 5px; min-height: 44px; background: var(--calc-button); color: var(--on-accent); border: 0; box-shadow: var(--calc-button-shadow); font-size: 12px; font-weight: 500; }
body.calc .product-disclaimer { font-size: 11px; text-align: center; margin-top: 14px; }
body.calc .app-footer { --footer-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr); max-width: 1120px; margin: 0 auto; padding: 32px 28px 24px; gap: 28px; text-align: left; font-size: 12px; }
body.calc .footer-main { display: grid; grid-template-columns: var(--footer-columns); gap: 28px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
body.calc .footer-main > * { min-width: 0; }
body.calc .footer-brand { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 650; letter-spacing: 1.4px; }
body.calc .footer-intro p { max-width: 28ch; line-height: 1.8; margin: 12px 0 0; font-size: 12px; }
body.calc .footer-group { display: flex; flex-direction: column; align-items: flex-start; }
body.calc .footer-group h2 { color: var(--ink); font-size: 12px; line-height: 32px; margin: 0 0 8px; font-weight: 600; letter-spacing: 0; text-wrap: initial; }
body.calc .footer-group .link-btn { color: var(--muted); font-size: 12px; font-weight: 400; min-height: 32px; padding: 6px 0; text-align: left; text-decoration: none; overflow-wrap: anywhere; }
body.calc .footer-group .link-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
body.calc .footer-bottom { display: grid; grid-template-columns: var(--footer-columns); align-items: end; gap: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
body.calc .foot-operator { display: contents; font-size: 10px; line-height: 1.8; }
body.calc .foot-operator > div { display: flex; flex-direction: column; gap: 3px; }
body.calc .foot-operator > div:last-child { grid-column: 2 / 4; }
body.calc .foot-operator strong { color: var(--ink); font-size: 11px; font-weight: 500; }
body.calc .footer-label { font-size: 10px; }
body.calc .cpr { font-size: 10px; white-space: nowrap; justify-self: end; }
body.calc .settings-sidebar { display: grid; gap: 22px; }
body.calc .workspace-account h2 { margin: 0 0 16px; }
body.calc .workspace-account .auth-control { flex-direction: column; align-items: flex-start; gap: 8px; }
body.calc .workspace-account .auth-control > span { overflow-wrap: anywhere; }
body.calc .workspace-account .link-btn { font-size: 12px; font-weight: 500; color: var(--ink); padding-left: 0; }
body.calc .workspace-account .auth-control .link-btn { padding: 8px 14px; border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
body.calc .workspace-account .storage-note { text-align: left; font-size: 11px; line-height: 1.7; margin: 12px 0 0; }
body.calc .workspace-account .sub-control:empty { display: none; }
body.calc .workspace-account .sub-control:not(:empty) { margin-top: 16px; }
body.calc .workspace-reset { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
body.calc .workspace-reset p { margin: 0; }
body.calc .workspace-reset .danger { color: var(--c-cost); }
body.calc .storage-warning[hidden] { display: none; }
body.calc .product-result .disc.explain > summary, body.calc .product-context .link-btn { color: var(--ink); }
body.calc .product-editor .disc > summary:hover, body.calc .product-result .disc > summary:hover { color: var(--accent-2); }
body.calc .product-comparison tbody tr:hover .comparison-name { text-decoration: underline; text-underline-offset: 3px; }
body.calc .pc-actions .icon-btn:hover { background: var(--card-2); }
body.calc .card h2 { font-weight: 600; }
body.calc .card-step .step-num { display: none; }
body.calc .card { border-color: var(--line); padding: 24px; }
body.calc .pane-heading h1 { margin: 0 0 7px; font-size: 27px; line-height: 1.2; letter-spacing: -1px; font-weight: 600; }
body.calc .pane-heading p { margin: 0; color: var(--muted); font-size: 12px; }
body.calc .month-layout, body.calc .settings-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 22px; align-items: start; }
body.calc .month-layout > *, body.calc .settings-layout > * { min-width: 0; }
body.calc .month-layout .card h2, body.calc .settings-layout .card h2 { font-size: 16px; font-weight: 600; letter-spacing: -.4px; }
body.calc .month-layout .head-row, body.calc .settings-layout .head-row { margin-bottom: 24px; }
body.calc .month-overview > .ptiles { gap: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; margin-bottom: 20px; }
body.calc .month-overview .ptile { padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; container-type: inline-size; }
body.calc .month-overview .ptile-l { text-transform: none; letter-spacing: 0; font-size: 11px; }
body.calc .month-overview .ptile-v { font-size: clamp(17px,14cqw,30px); color: var(--ink); font-weight: 550; margin-top: 8px; overflow-wrap: anywhere; }
body.calc .month-overview .ptile-v.neg { color: var(--c-cost); }
body.calc .month-overview .chips-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin: 0 0 20px; }
body.calc .month-overview .chip { border: 1px solid var(--line); border-radius: 4px; max-width: none; background: var(--tile); padding: 10px; min-height: 48px; }
body.calc .month-overview .chip-line { flex-direction: row; }
body.calc .month-overview .chip-n { font-size: 11px; }
body.calc .month-overview .chip-p { font-size: 12px; font-weight: 550; }
body.calc .month-overview .chip .cbar { display: none; }
body.calc .month-overview .mo-row { padding: 10px 0; gap: 6px 14px; font-size: 12px; border-bottom: 1px solid var(--line); }
body.calc .month-overview .mo-row.cost.sub, body.calc .month-overview .mo-row.subtle { padding: 7px 0; font-size: 11px; }
body.calc .month-overview .mo-row.cost.sub .mo-l { font-size: inherit; }
body.calc .month-overview .mo-row .mo-v { color: var(--ink); font-weight: 500; }
body.calc .month-overview .mo-row.net { padding-top: 16px; font-size: 15px; }
body.calc .month-overview .mo-row.net .mo-v { font-weight: 650; }
body.calc .month-overview .mo-row.net.neg .mo-v { color: var(--c-cost); }
body.calc .month-overview .disclaimer { font-size: 11px; line-height: 1.6; margin: 20px 0; }
body.calc .month-overview .setaside { border: 1px solid var(--line); border-left: 3px solid var(--k-state); background: var(--tile); padding: 16px; margin: 20px 0; }
body.calc .month-overview .sa-l { font-size: 12px; font-weight: 500; }
body.calc .month-overview .sa-v { font-size: 22px; font-weight: 550; color: var(--ink); }
body.calc .month-overview .sa-break { font-size: 11px; margin-top: 5px; }
body.calc .month-overview .sa-note { font-size: 11px; line-height: 1.6; }
body.calc .month-overview .mo-hours { font-size: 12px; font-weight: 500; padding: 12px 0; }
body.calc .month-overview .mo-compare .small { font-size: 11px; }
body.calc .month-layout .reality { border-left-width: 1px; background: var(--calc-result); }
body.calc .month-layout .reality > .muted { font-size: 12px; margin-bottom: 20px; line-height: 1.6; }
body.calc .reality .field-label { font-size: 12px; }
body.calc .reality .in-wrap { border: 1px solid var(--line); border-radius: 5px; padding-right: 12px; background: var(--card); }
body.calc .reality .in-num { border: 0; text-align: left; font-size: 20px; }
body.calc .reality .reality-out { margin-top: 20px; }
body.calc .reality .reality-lever, body.calc .reality .reality-now { font-size: 12px; }
body.calc .settings-profile > .sub { font-size: 12px; margin-bottom: 12px; }
body.calc .settings-profile > .picks { gap: 12px; margin-bottom: 20px; }
body.calc [data-workspace-pane="settings"] .pick { background: var(--card); border: 1px solid var(--line); padding: 16px; gap: 7px; border-radius: 5px; }
body.calc [data-workspace-pane="settings"] .pick:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
body.calc [data-workspace-pane="settings"] .pick.active { background: var(--calc-selected); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
body.calc [data-workspace-pane="settings"] .pick-t { font-size: 12px; font-weight: 550; }
body.calc [data-workspace-pane="settings"] .pick-d { font-size: 11px; line-height: 1.6; }
body.calc [data-workspace-pane="settings"] .pick-v { font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 500; }
body.calc .month-layout .disc, body.calc .settings-layout .disc { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; margin-top: 16px; }
body.calc .month-layout .disc > summary, body.calc .settings-layout .disc > summary { border: 0; border-radius: 0; padding: 18px 0; font-size: 12px; font-weight: 500; background: transparent; min-height: 56px; }
body.calc .month-layout .disc-body, body.calc .settings-layout .disc-body { padding: 0 0 12px; }
body.calc .settings-layout .sub { font-size: 12px; font-weight: 500; margin: 16px 0 10px; }
body.calc .settings-layout .field-label, body.calc .settings-layout .switch { font-size: 12px; }
body.calc .settings-layout .switch { min-height: 44px; margin: 12px 0; gap: 10px; }
body.calc .settings-layout .in-num, body.calc .settings-layout .s-name, body.calc .settings-layout .w-name, body.calc .settings-layout .in-sel { font-size: 13px; border-color: var(--line); }
body.calc .settings-layout .w-me { font-size: 13px; font-weight: 550; }
body.calc .settings-layout .tier-row { margin: 12px 0 20px; gap: 8px; }
body.calc .settings-layout .tier { min-height: 44px; border-radius: 5px; font-size: 11px; background: var(--card); border-color: var(--line); font-weight: 500; }
body.calc .settings-layout .tier.active { background: var(--calc-selected); border-color: var(--accent); color: var(--ink); }
body.calc .settings-layout .line-item { border-bottom: 1px solid var(--line); padding: 12px 0; }
body.calc .settings-layout .sub-note { font-size: 11px; margin-top: 5px; }
body.calc .settings-layout .chan-row { border-bottom: 1px solid var(--line); padding: 12px 0; }
body.calc .settings-layout .chan-name { font-size: 12px; }
body.calc .settings-layout .add-line { border-style: solid; border-color: var(--line); background: var(--card); color: var(--muted); font-size: 12px; font-weight: 500; }
body.calc .settings-layout .icon-btn { border: 0; color: var(--muted); }
body.calc .settings-layout .split-body { gap: 16px; }
body.calc .settings-layout .chart { border: 0; background: var(--tile); padding: 12px; }
body.calc .month-layout .note, body.calc .settings-layout .note { font-size: 11px; line-height: 1.6; font-weight: 400; }
body.calc .month-layout .note.ok, body.calc .settings-layout .note.ok { background: var(--tile); color: var(--muted); }
body.calc .picker { margin-top: 28px; }
body.calc .picker .picks { gap: 12px; margin-top: 24px; }
body.calc .picker .pick.craft { min-height: 116px; background: var(--card); box-shadow: var(--shadow); }
/* Desktop work area uses the browser viewport; expanded details scroll locally. */
@media (min-width: 1100px) and (min-height: 660px) {
  body.calc .app, body.calc .masthead { max-width: 1480px; }
  body.calc .masthead { min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
  body.calc .workspace-navigation { margin-bottom: 16px; }
  body.calc .workspace-navigation [data-workspace-tab] { min-height: 52px; padding-top: 12px; padding-bottom: 12px; }
  body.calc .app:has([data-workspace-pane="products"]:not([hidden])) { height: calc(100dvh - 73px); padding-bottom: 24px; position: relative; }
  body.calc .app:has([data-workspace-pane="products"]:not([hidden])) > .workspace-navigation, body.calc .app > .banner { flex: 0 0 auto; }
  body.calc [data-workspace-pane="products"] { flex: 1; min-height: 0; }
  body.calc .products { display: grid; grid-template-columns: minmax(250px,.7fr) minmax(0,2fr); grid-template-rows: 52px minmax(0,1fr); gap: 12px 20px; height: 100%; min-height: 0; }
  body.calc .collection-heading { grid-column: 1; margin: 0; gap: 8px; }
  body.calc .collection-heading h1 { font-size: 22px; margin-bottom: 3px; }
  body.calc .collection-heading .add-btn { padding: 8px 10px; font-size: 11px; }
  body.calc .product-collection { display: flex; flex-direction: column; min-height: 0; }
  body.calc .comparison-scroll { overflow-y: auto; min-height: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--card); box-shadow: var(--shadow); }
  /* Local cover layers reveal edge shadows only while more content can scroll. */
  body.calc .comparison-scroll, body.calc .product-editor, body.calc .result-secondary, body.calc .product-result-primary {
    background-image: linear-gradient(var(--card) 30%,transparent), linear-gradient(transparent,var(--card) 70%), radial-gradient(farthest-side at 50% 0,color-mix(in srgb,var(--ink) 16%,transparent),transparent), radial-gradient(farthest-side at 50% 100%,color-mix(in srgb,var(--ink) 16%,transparent),transparent);
    background-position: center top, center bottom, center top, center bottom;
    background-size: 100% 28px, 100% 28px, 100% 8px, 100% 8px;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  body.calc .product-comparison { display: block; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  body.calc .product-comparison colgroup { display: none; }
  body.calc .product-comparison thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  body.calc .product-comparison tbody, body.calc .product-comparison tfoot { display: block; }
  body.calc .product-comparison tbody tr { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 3px 12px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
  body.calc .product-comparison tbody tr:last-child { border-bottom: 0; }
  body.calc .product-comparison tbody th, body.calc .product-comparison tbody td { height: auto; border: 0; padding: 0; white-space: normal; font-size: 12px; }
  body.calc .product-comparison tbody th { grid-column: 1; box-shadow: none; }
  body.calc .product-comparison .selected { box-shadow: inset 2px 0 0 var(--accent); }
  body.calc .product-comparison .selected th { box-shadow: none; }
  body.calc .comparison-select { min-height: 44px; gap: 8px; }
  body.calc .comparison-photo { width: 32px; height: 32px; flex-basis: 32px; }
  body.calc .comparison-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.5; }
  body.calc .comparison-value-0 { grid-column: 2; grid-row: 1; align-self: center; font-size: 16px; }
  body.calc .comparison-value-1 { grid-column: 1; grid-row: 2; }
  body.calc .comparison-value-2 { grid-column: 2; grid-row: 2; }
  body.calc .comparison-value-3 { grid-column: 1; grid-row: 3; }
  body.calc .product-comparison .comparison-value-1, body.calc .product-comparison .comparison-value-3 { text-align: left; }
  body.calc .comparison-value-4 { grid-column: 2; grid-row: 3; }
  body.calc .comparison-value::before, body.calc .product-comparison tfoot td::before { content: attr(data-label); display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-bottom: 2px; line-height: 1.3; }
  body.calc .comparison-value-0::before { display: none; }
  body.calc .product-comparison tfoot { position: sticky; bottom: 0; background: var(--tile); border-top: 1px solid var(--line); }
  body.calc .product-comparison tfoot tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 10px 14px; }
  body.calc .product-comparison tfoot th { grid-column: 1 / -1; }
  body.calc .product-comparison tfoot th, body.calc .product-comparison tfoot td { height: auto; padding: 0; border: 0; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
  body.calc .product-comparison tfoot td:first-of-type { text-align: left; }
  body.calc .collection-hint { margin: 10px 0 0; }
  body.calc .limit-hint { margin: 6px 0 0; }
  body.calc .pcard { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: 76px minmax(0,1fr); min-height: 0; }
  body.calc .pc-head { min-height: 0; padding: 12px 20px; gap: 12px; }
  body.calc .pphoto { width: 48px; height: 48px; }
  body.calc .pphoto-wrap { flex-basis: 48px; }
  body.calc .pname { font-size: 21px; min-height: 30px; }
  body.calc .photo-edit { min-height: 20px; }
  body.calc .product-detail-grid { min-height: 0; }
  body.calc .product-editor, body.calc .product-result { padding: 16px 20px; min-height: 0; }
  body.calc .product-editor { overflow-y: auto; scrollbar-gutter: stable; }
  body.calc .product-section-heading, body.calc .product-result-heading { margin-bottom: 10px; }
  body.calc .product-core { margin-bottom: 12px; }
  body.calc .product-editor .disc > summary { min-height: 52px; padding: 12px 0; }
  body.calc .product-context { padding: 8px 10px; margin-top: 12px; }
  body.calc .product-input-note { margin: 12px 0; }
  body.calc .product-month-summary { display: none; }
  body.calc .product-result { display: flex; flex-direction: column; overflow: hidden; }
  body.calc .product-result-primary { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  body.calc .product-result-tools { flex: 0 0 auto; }
  body.calc .result-secondary { flex: 1; min-height: 96px; overflow-y: auto; scrollbar-gutter: stable; margin: 4px 0; }
  body.calc .product-result-heading { min-height: 20px; margin-bottom: 8px; }
  body.calc input.pprice-in { font-size: clamp(24px, calc(110cqw / var(--price-digits,6)), 52px); line-height: 1.25; }
  body.calc .pc-price { min-height: 64px; }
  /* Whole-pixel line heights let Chromium reach the results panel's scroll boundary. */
  body.calc .price-hint { margin: 2px 0 8px; line-height: 16px; }
  body.calc .margin-row { margin-bottom: 8px; }
  body.calc .margin-val, body.calc input[type="range"].margin-range { min-height: 28px; }
  body.calc input[type="range"].margin-range { height: 28px; }
  body.calc .earn-row { padding: 10px 0; }
  body.calc .earn-row .perhour { font-size: 23px; line-height: 34px; }
  body.calc .earn-row .takev { line-height: 16px; }
  body.calc .product-result .composition { margin-top: 0; }
  body.calc .composition-rows { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; }
  body.calc .composition-row { gap: 6px; font-size: 11px; }
  body.calc .composition-row:last-child { grid-column: 1 / -1; }
  body.calc .composition-row input.seg-in { min-height: 28px; }
  body.calc .product-result .disc > summary { min-height: 44px; padding: 10px 0; }
  body.calc .product-result-tools .tool-row { margin: 0; }
  body.calc .product-disclaimer { margin-top: 8px; font-size: 10px; }
  body.calc .app-footer { max-width: 1480px; }
}
@media (max-width: 900px) {
  body.calc .masthead { grid-template-columns: 1fr auto; gap: 8px 24px; }
  body.calc .mast-site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  body.calc .month-layout, body.calc .settings-layout { grid-template-columns: minmax(0,1fr); }
  body.calc .product-comparison th, body.calc .product-comparison td { padding-left: 12px; padding-right: 12px; }
  body.calc .product-comparison tbody th, body.calc .product-comparison tbody td { font-size: 12px; }
  body.calc .editing-label { display: none; }
  body.calc .footer-main { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 40px; }
  body.calc .footer-intro p { max-width: 34ch; }
  body.calc .footer-bottom { grid-template-columns: minmax(0,1fr); gap: 16px; }
  body.calc .foot-operator { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 28px; }
  body.calc .foot-operator > div:last-child { grid-column: auto; }
  body.calc .cpr { justify-self: start; }
  body.calc .footer-group .link-btn { min-height: 44px; }
  body.calc .footer-brand { min-height: 44px; }
}
@media (max-width: 720px) {
  body.calc .app { padding: 0 20px 28px; }
  body.calc .mast-bar { gap: 8px; }
  body.calc .mast-auth { font-size: 11px; }
  body.calc .wiz-help { font-size: 11px; }
  body.calc .wiz-help .ico { font-size: 13px; }
  body.calc .lang-btn { padding: 3px 6px; }
  body.calc .masthead { padding: 16px 20px; gap: 8px; }
  body.calc .workspace-navigation { flex-wrap: wrap; gap: 0; }
  body.calc .workspace-tabs { width: 100%; gap: 24px; }
  body.calc .workspace-status { width: 100%; justify-content: space-between; }
  body.calc .pane-heading h1 { font-size: 25px; }
  body.calc .collection-heading h1 { font-size: 25px; }
  body.calc .product-detail-grid { grid-template-columns: minmax(0,1fr); }
  body.calc .product-result { display: contents; border: 0; padding: 0; }
  body.calc .product-result-primary { grid-row: 1; padding: 20px; background: var(--calc-result); border-bottom: 1px solid var(--line); }
  body.calc .result-secondary { grid-row: 3; padding: 20px; border-top: 1px solid var(--line); }
  body.calc .product-result-tools { grid-row: 4; padding: 0 20px 20px; background: var(--calc-result); }
  body.calc .product-editor { grid-row: 2; }
  body.calc .product-editor, body.calc .product-result, body.calc .pc-head { padding: 20px; }
  body.calc .pname { font-size: 21px; }
  body.calc .pphoto { width: 58px; height: 58px; }
  body.calc .pphoto-wrap { flex-basis: 58px; }
  body.calc .pc-actions { gap: 0; }
  body.calc .pc-actions .icon-btn { width: 36px; }
  body.calc .product-core { grid-template-columns: 1fr 1fr; }
  body.calc .card { padding: 20px; }
  body.calc .settings-layout .in-num, body.calc .settings-layout .s-name, body.calc .settings-layout .w-name, body.calc .settings-layout .in-sel { font-size: 16px; }
  body.calc .app-footer { padding: 12px 20px 24px; gap: 24px; }
}
@media (max-width: 580px) {
  body.calc .footer-main { gap: 24px 20px; padding-top: 24px; }
  body.calc .footer-intro, body.calc .footer-contact { grid-column: 1 / -1; }
  body.calc .footer-intro p { margin-top: 8px; max-width: 40ch; }
  body.calc .foot-operator { grid-template-columns: minmax(0,1fr); gap: 12px; }
  body.calc .product-comparison { display: block; }
  body.calc .product-comparison colgroup { display: none; }
  body.calc .product-comparison thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  body.calc .product-comparison tbody, body.calc .product-comparison tfoot { display: block; width: 100%; }
  body.calc .product-comparison tbody tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 10px 14px 13px; gap: 8px 10px; border-bottom: 1px solid var(--line); }
  body.calc .product-comparison tbody tr:last-child { border-bottom: 0; }
  body.calc .product-comparison .selected { box-shadow: inset 2px 0 0 var(--accent); }
  body.calc .product-comparison tbody th, body.calc .product-comparison tbody td { height: auto; border: 0; padding: 0; white-space: normal; }
  body.calc .product-comparison tbody th { grid-column: 1 / 3; box-shadow: none; }
  body.calc .product-comparison .selected th { box-shadow: none; }
  body.calc .comparison-select { min-height: 44px; font-size: 13px; }
  body.calc .comparison-name { overflow: visible; overflow-wrap: anywhere; line-height: 1.4; }
  body.calc .comparison-value-0 { grid-column: 3; grid-row: 1; align-self: center; font-size: 15px; }
  body.calc .comparison-value-1 { display: none; }
  body.calc .comparison-value-2 { grid-column: 1; grid-row: 2; text-align: left; }
  body.calc .comparison-value-3 { grid-column: 2; grid-row: 2; text-align: center; }
  body.calc .comparison-value-4 { grid-column: 3; grid-row: 2; text-align: right; }
  body.calc .comparison-value:not(.comparison-value-0)::before, body.calc .product-comparison tfoot td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; font-weight: 400; line-height: 1.3; min-height: 2.6em; }
  body.calc .product-comparison tfoot tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px 10px; padding: 13px 14px; border-top: 1px solid var(--line); background: var(--tile); }
  body.calc .product-comparison tfoot th { grid-column: 1 / -1; }
  body.calc .product-comparison tfoot th, body.calc .product-comparison tfoot td { height: auto; padding: 0; border: 0; }
  body.calc .product-comparison tbody td, body.calc .product-comparison tfoot td { overflow-wrap: anywhere; }
  body.calc .product-comparison tfoot td:first-of-type { text-align: left; }
  body.calc .product-comparison tfoot td:nth-of-type(2) { text-align: center; }
  body.calc .pc-head { flex-wrap: wrap; gap: 10px; }
  body.calc .pc-actions { margin-left: auto; }
  body.calc .product-identity { flex-basis: calc(100% - 78px); }
  body.calc .pc-head .pc-actions { width: 100%; justify-content: flex-end; }
  body.calc .collection-heading .add-btn { max-width: 126px; font-size: 11px; padding: 8px 10px; }
  body.calc .composition-row { min-height: 32px; }
  body.calc .composition-row input.seg-in { min-height: 44px; }
  body.calc [data-workspace-pane="month"] .ptiles { grid-template-columns: minmax(0,1fr); }
  body.calc [data-workspace-pane="month"] .ptile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; text-align: left; container-type: normal; }
  body.calc [data-workspace-pane="month"] .ptile-v { font-size: 24px; margin: 0; overflow-wrap: anywhere; }
  body.calc .setaside .sa-top { flex-wrap: wrap; }
  body.calc .mo-row { grid-template-columns: minmax(0,1fr) auto; }
  body.calc .mo-row .mo-l { grid-column: 1 / -1; }
  body.calc .mo-row .mo-v { text-align: left; min-width: 0; overflow-wrap: anywhere; }
  body.calc .mast-brand { gap: 8px; }
  body.calc .mast-brand img { width: 32px; height: 32px; }
  body.calc .mast-brand strong { font-size: 12px; letter-spacing: 1px; }
  body.calc .mast-author { font-size: 10px; }
  body.calc .mast-site-nav { gap: 24px; }
  body.calc .lang-switch { display: flex; }
}
@media (max-width: 360px) {
  body.calc .app { padding-left: 14px; padding-right: 14px; }
  body.calc .masthead { padding-left: 14px; padding-right: 14px; }
  body.calc .product-editor, body.calc .product-result-primary, body.calc .result-secondary, body.calc .pc-head { padding-left: 16px; padding-right: 16px; }
  body.calc .product-core { grid-template-columns: 1fr; }
  body.calc .comparison-select { gap: 7px; font-size: 12px; }
  body.calc .comparison-photo { width: 30px; height: 30px; flex-basis: 30px; }
  body.calc .product-comparison tbody tr, body.calc .product-comparison tfoot tr { gap: 8px 5px; }
  body.calc .product-comparison tbody td { font-size: 11px; }
  body.calc .earn-row { display: block; }
  body.calc .earn-row .perhour { display: block; margin: 5px 0; }
  body.calc .cost-summary-name, body.calc .cost-summary-value { font-size: 12px; }
}

/* Supporting documents share the calculator's light type, surfaces and site chrome. */
body.document-page { min-height: 100dvh; display: flex; flex-direction: column; }
body.document-page .masthead, body.document-page .app-footer { max-width: 1120px; }
body.document-page .doc { flex: 1; width: 100%; max-width: 840px; padding: 44px 28px 64px; font-size: 14px; }
body.document-page .doc-head { background: transparent; color: var(--ink); border-radius: 0; margin: 0 0 28px; padding: 0 0 28px; border-bottom: 1px solid var(--line); box-shadow: none; }
body.document-page .doc-head h1 { color: var(--ink); font-size: clamp(28px,3.5vw,40px); font-weight: 600; letter-spacing: -1.1px; line-height: 1.2; margin: 8px 0 16px; text-align: left; }
body.document-page .doc-head > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 12px; font-weight: 400; opacity: 1; }
body.document-page .doc-head p { color: var(--muted); font-size: 14px; line-height: 1.75; max-width: 68ch; }
body.document-page .doc-head .effective { font-size: 12px; margin-top: 12px; }
body.document-page .doc h2 { margin: 36px 0 12px; padding: 0; border: 0; font-size: 19px; font-weight: 600; letter-spacing: -.4px; line-height: 1.45; text-align: left; }
body.document-page .doc h3 { font-size: 15px; font-weight: 600; margin: 28px 0 8px; }
body.document-page .doc p, body.document-page .doc li { line-height: 1.8; }
body.document-page .doc p { margin: 12px 0; }
body.document-page .doc ul, body.document-page .doc ol { padding-left: 22px; }
body.document-page .doc li + li { margin-top: 8px; }
body.document-page .doc a { text-underline-offset: 3px; overflow-wrap: anywhere; }
body.document-page .doc strong { font-weight: 600; }
body.document-page .doc .banner { border: 1px solid var(--line); background: var(--card-2); color: var(--ink); padding: 16px 18px; border-radius: var(--radius); font-size: 13px; line-height: 1.8; }
body.document-page .doc table { display: table; width: 100%; font-size: 12px; line-height: 1.7; table-layout: fixed; overflow-wrap: anywhere; }
body.document-page .doc th, body.document-page .doc td { padding: 12px 10px; }
body.document-page .doc th { font-weight: 600; font-size: 12px; color: var(--ink); background: var(--card-2); }
body.document-page .doc pre { padding: 16px 18px; font-size: 12px; }
body.document-page .doc .tag { border-radius: var(--radius-sm); font-weight: 500; }
body.document-page .doc .btn-hero { color: var(--on-accent); background: var(--calc-button); border-radius: var(--radius-sm); box-shadow: var(--calc-button-shadow); min-height: 44px; padding: 12px 20px; font-size: 13px; font-weight: 500; }
body.document-page .document-languages a { display: inline-flex; align-items: center; min-height: 36px; min-width: 32px; justify-content: center; text-decoration: none; }
body.document-page .document-disclaimer { font-size: 11px; line-height: 1.75; margin: 0; color: var(--muted); }
body.document-page .document-disclaimer a { color: var(--muted); text-underline-offset: 3px; }
body.document-page .document-footer-fallback { max-width: 1120px; margin: 0 auto; padding: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.8; overflow-wrap: anywhere; }
body.document-page .document-footer-fallback a { color: var(--muted); text-underline-offset: 3px; }
body.document-page .contact-doc { max-width: 1120px; }
body.document-page .contact-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.2fr); gap: 28px; align-items: start; }
body.document-page .contact-support, body.document-page .contact-company { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: var(--card); box-shadow: var(--shadow); min-width: 0; }
body.document-page .contact-support { background: var(--calc-result); }
body.document-page .contact-layout h2 { margin: 0 0 16px; font-size: 18px; }
body.document-page .contact-support .contact-email { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(15px,1.5vw,20px); font-weight: 550; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; }
body.document-page .contact-support p { font-size: 13px; color: var(--muted); }
body.document-page .contact-company table { margin: 0; table-layout: auto; }
body.document-page .contact-company th { width: 100px; background: transparent; color: var(--muted); font-weight: 400; }
body.document-page .contact-company th, body.document-page .contact-company td { padding: 10px 0; border-bottom: 1px solid var(--line); }
body.document-page .contact-company td { padding-left: 16px; }
body.document-page .contact-company tr:last-child th, body.document-page .contact-company tr:last-child td { border-bottom: 0; }
body.document-page .contact-reference { margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 24px; background: var(--card); }
body.document-page .document-disclosure + .document-disclosure { border-top: 1px solid var(--line); }
body.document-page .document-disclosure > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-size: 15px; font-weight: 550; list-style: none; }
body.document-page .document-disclosure > summary::-webkit-details-marker { display: none; }
body.document-page .document-disclosure > summary::after { content: '+'; color: var(--muted); font-size: 20px; font-weight: 400; }
body.document-page .document-disclosure[open] > summary::after { content: '−'; }
body.document-page .document-disclosure > div { max-width: 78ch; padding-bottom: 16px; font-size: 13px; }
@media (max-width: 720px) {
  body.document-page .doc { padding: 28px 20px 40px; font-size: 13px; }
  body.document-page .doc-head { padding-bottom: 20px; margin-bottom: 24px; }
  body.document-page .doc-head p { font-size: 13px; }
  body.document-page .doc h2 { font-size: 17px; margin-top: 28px; }
  body.document-page .doc th, body.document-page .doc td { padding: 8px 6px; font-size: 11px; }
  body.document-page .contact-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  body.document-page .contact-support, body.document-page .contact-company { padding: 20px; }
  body.document-page .contact-layout h2 { margin-top: 0; }
  body.document-page .contact-company th, body.document-page .contact-company td { padding: 10px 0; }
  body.document-page .contact-company td { padding-left: 12px; }
  body.document-page .contact-company th { width: 72px; }
  body.document-page .contact-reference { padding: 0 20px; margin-top: 20px; }
  body.document-page .document-footer-fallback { padding: 24px 20px; }
  body.document-page .document-languages a { min-height: 44px; }
}
@media (max-width: 580px) {
  body.document-page .document-data-table, body.document-page .document-data-table tbody { display: block; }
  body.document-page .document-table-heading { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  body.document-page .document-data-table tr:not(.document-table-heading) { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  body.document-page .document-data-table td { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 12px; padding: 8px 0; border: 0; font-size: 12px; }
  body.document-page .document-data-table td::before { content: attr(data-label); color: var(--muted); font-weight: 500; }
}

/* Operator dashboard shares the calculator's light surfaces and site chrome. */
body.admin-page { min-height: 100dvh; display: flex; flex-direction: column; }
body.admin-page .masthead, body.admin-page .app-footer { max-width: 1480px; }
body.admin-page .admin-wide { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 40px 28px 64px; }
body.admin-page .admin-heading { margin-bottom: 28px; }
body.admin-page .admin-eyebrow { color: var(--muted); font-size: 11px; margin: 0 0 10px; }
body.admin-page .admin-heading h1 { font-size: clamp(28px,3vw,38px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.2; margin: 0 0 12px; text-align: left; }
body.admin-page .admin-heading > p:last-child { margin: 0; font-size: 13px; color: var(--muted); }
body.admin-page .admin-context { font-size: 11px; color: var(--muted); border-left: 1px solid var(--line); padding-left: 14px; }
body.admin-page .admin-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
body.admin-page .admin-btn { min-height: 44px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 500; line-height: 1.5; cursor: pointer; box-shadow: var(--shadow); }
body.admin-page .admin-btn:hover { border-color: var(--line-strong); background: var(--tile); }
body.admin-page .admin-btn:disabled { opacity: .55; cursor: default; }
body.admin-page .admin-primary, body.admin-page .admin-login button[type=submit], body.admin-page .admin-login-confirm { background: var(--calc-button); color: var(--on-accent); border-color: var(--ink); box-shadow: var(--calc-button-shadow); }
body.admin-page .admin-primary:hover, body.admin-page .admin-login button[type=submit]:hover, body.admin-page .admin-login-confirm:hover { background: var(--calc-button); border-color: var(--ink); filter: brightness(1.08); }
body.admin-page .admin-meta { font-size: 11px; color: var(--muted); }
body.admin-page .admin-session { margin-left: auto; display: flex; align-items: center; gap: 14px; min-width: 0; }
body.admin-page .admin-session > span { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
body.admin-page .admin-session .admin-btn { flex-shrink: 0; }
body.admin-page .admin-msg { max-width: 520px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin: 24px 0; box-shadow: var(--shadow); }
body.admin-page .admin-msg h2 { margin: 0 0 12px; font-size: 21px; font-weight: 600; letter-spacing: -.5px; }
body.admin-page .admin-msg p { margin: 0; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
body.admin-page .admin-msg .admin-login-back { margin-top: 18px; }
body.admin-page .admin-login-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-underline-offset: 3px; }
body.admin-page .admin-login form { display: grid; gap: 10px; margin-top: 24px; }
body.admin-page .admin-login label { font-size: 12px; font-weight: 500; }
body.admin-page .admin-login .auth-input { min-height: 48px; font-size: 16px; margin: 0; }
body.admin-page .admin-login button { margin-top: 6px; justify-self: start; }
body.admin-page .admin-login-confirm { margin-top: 18px; }
body.admin-page .admin-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
body.admin-page .admin-section-heading > span, body.admin-page .admin-description { color: var(--muted); font-size: 12px; }
body.admin-page .admin-description { margin: 8px 0 20px; }
body.admin-page .admin-h2 { font-size: 20px; font-weight: 600; letter-spacing: -.5px; margin: 0; }
body.admin-page .admin-cards { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; margin: 20px 0; }
body.admin-page .admin-card { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
body.admin-page .admin-card .k { font-size: 11px; font-weight: 400; color: var(--muted); margin: 0 0 12px; }
body.admin-page .admin-card .v { font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1.25; overflow-wrap: anywhere; }
body.admin-page .admin-card .v.split { font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.8; }
body.admin-page .admin-card .sub { font-size: 10px; color: var(--muted); margin: 8px 0 0; }
body.admin-page .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
body.admin-page table.admin { width: 100%; border-collapse: collapse; font-size: 12px; }
body.admin-page table.admin th, body.admin-page table.admin td { text-align: left; padding: 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
body.admin-page table.admin th { background: var(--tile); font-weight: 500; color: var(--muted); font-size: 11px; white-space: nowrap; }
body.admin-page table.admin tbody tr:hover { background: var(--tile); }
body.admin-page table.admin tbody tr:last-child td { border-bottom: 0; }
body.admin-page table.admin td.email, body.admin-page table.admin td.code { font-weight: 600; overflow-wrap: anywhere; }
body.admin-page table.admin .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.admin-page table.admin td { overflow-wrap: anywhere; }
body.admin-page table.admin .admin-empty { text-align: center; color: var(--muted); padding: 28px; }
body.admin-page .admin-trunc { margin-top: 16px; }
body.admin-page .pill { border-radius: 3px; font-weight: 500; font-size: 10px; padding: 3px 7px; border: 0; }
body.admin-page .pill.ok { color: var(--c-net); background: color-mix(in srgb,var(--c-net) 8%,var(--card)); }
body.admin-page .pill.warn { color: var(--warn-ink); background: var(--warn-bg); }
body.admin-page .pill.mute { color: var(--muted); background: var(--card-2); }
body.admin-page .pill.info { color: var(--accent); background: color-mix(in srgb,var(--accent) 7%,var(--card)); }
body.admin-page .admin-disclosure { border-top: 1px solid var(--line); margin-top: 16px; }
body.admin-page .admin-disclosure > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; min-height: 48px; padding: 12px 0; font-size: 12px; font-weight: 500; }
body.admin-page .admin-disclosure > summary::-webkit-details-marker { display: none; }
body.admin-page .admin-disclosure > summary::after { content: ''; width: 14px; height: 14px; flex: 0 0 14px; margin-left: auto; background: var(--muted); mask: var(--ico-chevron) center / contain no-repeat; }
body.admin-page .admin-disclosure[open] > summary::after { transform: rotate(180deg); }
body.admin-page .admin-disclosure > p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0 0 16px; max-width: 85ch; }
body.admin-page .admin-create { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; box-shadow: var(--shadow); }
body.admin-page .disc-form { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; margin: 8px 0 20px; }
body.admin-page .disc-form label, body.admin-page .webinar-payment label { display: grid; gap: 8px; font-size: 12px; font-weight: 500; min-width: 0; }
body.admin-page .disc-form label > span { font-size: 11px; font-weight: 400; color: var(--muted); }
body.admin-page .disc-form input, body.admin-page .disc-form select, body.admin-page .webinar-payment input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); font-size: 14px; }
body.admin-page .disc-form button { justify-self: start; }
body.admin-page .disc-msg { font-size: 12px; margin: 12px 0; }
body.admin-page .disc-msg:empty { display: none; }
body.admin-page .disc-msg.ok { color: var(--c-net); }
body.admin-page .disc-msg.err { color: var(--c-cost); }
body.admin-page .admin-analytics, body.admin-page .admin-discounts { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
body.admin-page .admin-analytics:empty, body.admin-page .admin-discounts:empty { display: none; }
body.admin-page .admin-analytics .admin-cards { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 460px; }
body.admin-page .an-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
body.admin-page .an-chart { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
body.admin-page .an-h3 { font-size: 12px; font-weight: 500; margin: 0 0 24px; }
body.admin-page .an-bars { display: flex; align-items: flex-end; gap: 4px; height: 128px; padding-top: 12px; border-bottom: 1px solid var(--line); }
body.admin-page .an-col { flex: 1 1 0; min-width: 0; }
body.admin-page .an-bar { width: 100%; background: color-mix(in srgb,var(--accent) 65%,var(--line)); border-radius: 2px 2px 0 0; }
body.admin-page .an-range { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; margin-top: 10px; }
body.admin-page .an-values { margin-top: 12px; }
body.admin-page .an-values > summary { color: var(--muted); font-size: 11px; }
body.admin-page .an-values dl { margin: 0 0 8px; font-size: 12px; }
body.admin-page .an-values dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
body.admin-page .an-values dd { margin: 0; font-variant-numeric: tabular-nums; }
body.admin-page table.an-countries td { padding: 10px 0; }
body.admin-page .an-c-name { white-space: nowrap; }
body.admin-page .an-c-share { width: 35%; padding-left: 16px; }
body.admin-page .an-c-share span { display: block; height: 5px; border-radius: 2px; background: var(--line-strong); }
body.admin-page .webinar-sessions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
body.admin-page .webinar-status { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); grid-template-columns: minmax(0,1fr) auto; align-items: center; }
body.admin-page .webinar-status label { grid-column: 1 / -1; }
body.admin-page .webinar-remaining { font-size: 12px; color: var(--muted); }
body.admin-page .webinar-status button { justify-self: end; }
body.admin-page .admin-registration { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; background: var(--card); margin-top: 12px; }
body.admin-page .admin-registration > summary { min-height: 64px; flex-wrap: wrap; }
body.admin-page .registration-name { flex: 1; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
body.admin-page .registration-session { color: var(--muted); font-size: 11px; }
body.admin-page .admin-registration > p { overflow-wrap: anywhere; }
body.admin-page .webinar-payment { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
body.admin-page .webinar-payment button { grid-column: 1 / -1; justify-self: start; }
body.admin-page .webinar-release { margin-bottom: 20px; }
body.admin-page .admin-maintenance { margin-top: 24px; }
@media (max-width: 1100px) {
  body.admin-page .admin-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.admin-page .an-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.admin-page .an-chart:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body.admin-page .admin-wide { padding: 28px 20px 40px; }
  body.admin-page .admin-actions { gap: 10px; }
  body.admin-page .admin-meta { flex: 1; }
  body.admin-page .admin-session { width: 100%; justify-content: space-between; margin: 0; }
  body.admin-page .admin-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.admin-page .admin-card { padding: 16px; }
  body.admin-page .admin-section-heading { display: block; }
  body.admin-page .admin-section-heading > span { display: block; margin-top: 8px; }
  body.admin-page .an-grid, body.admin-page .disc-form, body.admin-page .webinar-sessions, body.admin-page .webinar-payment { grid-template-columns: minmax(0,1fr); }
  body.admin-page .webinar-status { grid-template-columns: minmax(0,1fr) auto; }
  body.admin-page .disc-form input, body.admin-page .disc-form select, body.admin-page .webinar-payment input { font-size: 16px; }
  body.admin-page .admin-registration > summary { gap: 8px; }
  body.admin-page .registration-name { flex-basis: 100%; }
  body.admin-page table.admin-records { display: block; }
  body.admin-page table.admin-records thead { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
  body.admin-page table.admin-records tbody { display: block; }
  body.admin-page table.admin-records tr { display: block; padding: 16px; border-bottom: 1px solid var(--line); }
  body.admin-page table.admin-records tr:last-child { border-bottom: 0; }
  body.admin-page table.admin-records td { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 16px; padding: 7px 0; border: 0; font-size: 12px; text-align: right; white-space: normal; }
  body.admin-page table.admin-records td::before { content: attr(data-label); font-size: 11px; font-weight: 400; color: var(--muted); text-align: left; }
  body.admin-page table.admin-records .pill, body.admin-page table.admin-records button { justify-self: end; align-self: start; white-space: normal; }
  body.admin-page table.admin-records td.admin-empty { display: block; text-align: center; }
  body.admin-page table.admin-records td.admin-empty::before { content: none; }
  body.admin-page .admin-registration > summary::after { margin-left: 0; }
}
@media (max-width: 380px) {
  body.admin-page .admin-wide { padding-left: 14px; padding-right: 14px; }
  body.admin-page .admin-msg, body.admin-page .an-chart { padding: 20px; }
  body.admin-page .admin-card { padding: 14px; }
  body.admin-page .admin-card .v { font-size: 26px; }
  body.admin-page .admin-card .v.split { font-size: 12px; }
}

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 660; white-space: nowrap; border: 1px solid transparent; }
.pill.ok { background: color-mix(in srgb, #22c55e 18%, var(--card)); color: color-mix(in srgb, #16a34a 72%, var(--ink)); border-color: color-mix(in srgb, #22c55e 42%, transparent); }
.pill.warn { background: color-mix(in srgb, #f59e0b 20%, var(--card)); color: color-mix(in srgb, #b45309 72%, var(--ink)); border-color: color-mix(in srgb, #f59e0b 46%, transparent); }
.pill.mute { background: color-mix(in srgb, var(--muted) 16%, var(--card)); color: var(--muted); border-color: color-mix(in srgb, var(--muted) 34%, transparent); }
.pill.info { background: color-mix(in srgb, var(--accent) 15%, var(--card)); color: color-mix(in srgb, var(--accent) 82%, var(--ink)); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }

/* Webinar uses the existing navigation, document, button and form components. */
.webinar-header { padding: 0 20px 20px; }
.webinar-facts { list-style: none; padding: 0; }
.webinar-facts li { margin: 8px 0; }
.webinar-date { padding: 20px 0; border-bottom: 1px solid var(--line); }
.webinar-date > .btn-hero { white-space: normal; text-align: left; }
.webinar-form { display: grid; gap: 16px; max-width: 560px; }
.webinar-form > label { display: grid; gap: 6px; }
.webinar-form > .webinar-consent { display: flex; align-items: flex-start; gap: 10px; }
.webinar-consent input { flex: 0 0 auto; margin-top: 5px; }

.webinar .btn-hero { border: 0; cursor: pointer; }
.webinar .btn-hero:disabled { opacity: 0.6; cursor: default; }