/* 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; }
/* The free-launch-period notice is good news, not a warning: accent tint, no ⚠ glyph. */
.banner.free-period { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); margin-bottom: 10px; }
.banner.free-period::before { content: none; }
/* 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; } }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.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: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 260px; max-width: min(260px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 10px 12px; font-size: 0.8rem; font-weight: 400; color: var(--ink); line-height: 1.5; text-align: left; }
/* On touch (hover: none) the popover is controlled solely by the JS `.open`
   toggle, which measures and shifts it to stay on screen. Auto-showing it on
   :focus-within there would keep it visible after a second tap removed `.open`
   and its shift, re-appearing unshifted and off the right edge. So gate the
   hover/keyboard auto-show to devices that actually hover. */
.help-wrap.open .help-pop { display: block; }
@media (hover: hover) {
  .help-wrap:hover .help-pop, .help-wrap:focus-within .help-pop { display: block; }
}

/* 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-sum { font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.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; }

/* Product carousel: horizontal scroll-snap. The next card always peeks in at
   the edge, an edge fade + arrows + dots reinforce "there's more" on both
   touch (swipe) and mouse/trackpad input, so a lone visible card never reads
   as the whole set. Bleeds past .app's side padding, then re-adds it as
   .plist padding so the first/last card still lines up with other cards. */
.carousel { position: relative; margin: 0 -14px; }
.plist { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding: 2px 14px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.plist::-webkit-scrollbar { display: none; }
/* Same proportion at every width: one dominant card plus a clear peek, never a
   full grid of same-size cards — a wide screen just means a wider (capped) card. */
.pcard { scroll-snap-align: start; flex: 0 0 87%; max-width: 380px; }

.carousel::before, .carousel::after { content: ""; position: absolute; top: 0; bottom: 6px; width: 30px; pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.15s ease; }
.carousel::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); opacity: 0; }
.carousel::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.carousel.at-start::before { opacity: 0; }
.carousel:not(.at-start)::before { opacity: 1; }
.carousel.at-end::after { opacity: 0; }

.pnav { position: absolute; top: 58px; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--accent-2); font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.pnav.prev { left: 2px; }
.pnav.next { right: 2px; }
.carousel.at-start .pnav.prev, .carousel.at-end .pnav.next { display: none; }
/* Desktop has the room to keep the arrows off the card entirely, centred on
   its height instead of pinned to the price row. */
@media (min-width: 720px) {
  .plist { padding-inline: 44px; scroll-padding-inline: 44px; }
  .pnav { top: 50%; }
  /* .app caps at 720px with 14px side padding, so other sections are always
     692px wide here; 80% of that is a card that reads as dominant, not tiled. */
  .pcard { flex-basis: 554px; max-width: 554px; }
}

.pdots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 2px; }
.pdot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: var(--line-strong); cursor: pointer; }
.pdot.active { background: var(--pc, var(--accent)); width: 20px; border-radius: 4px; }
.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,
.chan-price-row.reject .chan-price-in, .chan-price-row.reject .unit,
.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; }
input.chan-price-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: right; color: var(--ink); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
input.chan-price-in:focus { outline: none; border-bottom-color: var(--accent); }
.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: none; border-radius: 14px; padding: 20px; max-width: 360px; width: calc(100% - 32px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); 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-links { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.auth-error { min-height: 1.2em; }
.auth-error.warn { color: var(--c-cost); }
.auth-google:empty { display: none; }
.auth-google { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.auth-form .btn.google { width: 100%; min-height: 44px; border: 1px solid var(--line, #d9d9e3); border-radius: 10px; background: var(--bg, #fff); color: inherit; font-size: 1rem; font-weight: 640; cursor: pointer; }
.auth-or { text-transform: uppercase; letter-spacing: 0.05em; }
.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; }
.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); }
.checkout-consent .btn.primary { width: 100%; margin-top: 6px; }
.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; }

/* 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 .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; }

@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 {
  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 restyle (2026-07 milestone: bring the tool toward the
   landing). Direction B ("Ružová"), the deployed default: Manrope, a warm
   neutral ramp, the landing's pink as a flat masthead and structural accent,
   tighter corners. Scoped to body.calc so the landing and legal pages keep
   their own tokens. Purple stays the action colour and the data colours
   (cost-composition bar and the tržby/náklady/zisk trio) keep their meaning.
   The pink masthead and Manrope hold in both themes (like the landing hero);
   the warm neutral ramp applies in the light theme, dark mode keeps the cool
   token defaults. Direction C is kept as a not-deployed backup skin in
   docs/sketches/calc-variant-c.css. ---- */
body.calc { font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --radius: 6px; --radius-sm: 4px; }
@media (prefers-color-scheme: light) {
  body.calc {
    --card-2: #fdf6f4;
    --tile: #f9ece8;
    --ink: #241f22;
    --muted: #6c6360;
    --line: #f0e2dd;
    --line-strong: #e1cec8;
    --shadow: 0 1px 2px rgba(60, 30, 30, 0.05), 0 8px 22px -18px rgba(120, 60, 60, 0.16);
    /* Deepen the money cost/net tones a touch so their values clear 4.5:1 on
       the warm tiles (the default shades land ~4.49). Still orange and green;
       the composition bar (k-*) is untouched. Light theme only — dark mode
       keeps its own money tokens. */
    --c-cost: #a8380b;
    --c-net: #0f6f33;
  }
}
/* Pink masthead in both themes (a brand constant, like the landing hero). */
body.calc .masthead { background: #ec9ca0; color: #241f22; box-shadow: none; }
body.calc .masthead h1 { color: #241f22; }
/* On the flat pink the text must be solid and dark to clear 4.5:1 (a
   semi-transparent dark on light pink does not — axe color-contrast). The
   hierarchy comes from size and weight, not opacity. */
body.calc .mast-author { margin: 2px 0 0; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.02em; color: #2b2420; }
body.calc .masthead .tagline { color: #2b2420; }
body.calc .lang-switch { background: rgba(36, 31, 34, 0.14); }
body.calc .lang-btn { color: #241f22; }
body.calc .lang-btn.active { background: #fff; color: var(--accent-2); }
body.calc .mast-auth, body.calc .wiz-help { border-color: rgba(36, 31, 34, 0.4); background: rgba(255, 255, 255, 0.45); color: #241f22; }
body.calc .mast-auth:hover, body.calc .wiz-help:hover { background: rgba(255, 255, 255, 0.7); }
body.calc .wiz-help-q { background: rgba(36, 31, 34, 0.16); }
/* The save chip sits on the pink masthead: dark text on a light chip so it
   clears contrast (its white-on-purple default fails on pink). The warn state
   keeps its amber tokens (re-asserted so this base rule does not win it). */
body.calc .save-chip { border-color: rgba(36, 31, 34, 0.35); background: rgba(255, 255, 255, 0.55); color: #241f22; }
body.calc .save-chip.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
/* Pink as the structural accent (kept off the interactive purple). */
body.calc .card.highlight { border-left-color: #dd8a8b; }