/* Atomi design system: shared portal components (ATOM-30). Colours only through tokens.css.
   Class names follow the approved mockup v0.2, so its markup ports 1:1. Page-specific parts (timeline,
   period picker, value panel, login brand side) live with their pages. Living reference: /atomi-design. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-body); font-variant-numeric: tabular-nums; }
body.locked { overflow: hidden; }
::selection { background: var(--highlight-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
button { font: inherit; color: inherit; }
a { color: var(--accent); text-underline-offset: 3px; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink-3); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.id { font-size: 0.74rem; font-weight: 650; letter-spacing: 0.02em; color: var(--ink-3); }
.val { color: var(--value); }

/* ---------- logo (Exar themes/exar v1.3.0): one source, colour by class ---------- */
.exar-logo { display: inline-block; flex: none; height: var(--logo-h, 40px); background-color: var(--logo-color, currentColor);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.exar-logo--horizontal { aspect-ratio: 4954 / 1633; -webkit-mask-image: url("../images/logo-exarlabs-horizontal-white.svg"); mask-image: url("../images/logo-exarlabs-horizontal-white.svg"); }
.exar-logo--mark { aspect-ratio: 1484 / 1968; -webkit-mask-image: url("../images/logo-exarlabs-white.svg"); mask-image: url("../images/logo-exarlabs-white.svg"); }
.on-dark { --logo-color: var(--logo-on-dark); }
.on-light { --logo-color: var(--logo-on-light); }

/* ---------- client header + user menu ---------- */
.client-head { background: var(--navy-900); color: var(--on-navy); }
.client-head .wrap { display: flex; align-items: center; gap: 20px; padding-top: 22px; padding-bottom: 22px; }
.client-mark {
  width: 56px; height: 56px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--on-navy); color: var(--navy-900); font: 700 1.3rem/1 var(--font-display); letter-spacing: -0.02em;
}
.client-id { min-width: 0; }
.client-id h1 { font: 650 1.65rem/1.15 var(--font-display); letter-spacing: -0.02em; }
.client-id p { color: var(--on-navy-muted); font-size: 0.9rem; margin-top: 4px; }
.head-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.provider { text-align: right; font-size: 0.78rem; color: var(--on-navy-muted); line-height: 1.35; }
.provider b { display: block; color: var(--on-navy); font: 650 0.9rem/1.3 var(--font-display); }
.view-toggle { display: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid oklch(1 0 0 / 0.18); background: transparent; color: var(--on-navy); font-size: 0.8rem; font-weight: 650; cursor: pointer; }
.view-toggle:hover { background: oklch(1 0 0 / 0.08); }
.view-toggle.on { display: inline-flex; background: var(--clay-500); border-color: var(--clay-500); color: var(--navy-900); }
/* page nav under the client header (ATOM-8): Áttekintés, Munkák */
.portal-nav { background: var(--navy-900); border-top: 1px solid oklch(1 0 0 / 0.1); }
.portal-nav .wrap { display: flex; gap: 26px; }
.portal-nav a { padding: 11px 0 9px; border-bottom: 3px solid transparent; color: var(--on-navy-muted); font-size: 0.9rem; font-weight: 650; text-decoration: none; }
.portal-nav a:hover { color: var(--on-navy); }
.portal-nav a[aria-current="page"] { color: var(--on-navy); border-bottom-color: var(--clay-500); }
.portal-nav a:focus-visible { outline: 2px solid var(--clay-500); outline-offset: 2px; }
.portal-nav .ic { display: none; }
.user-wrap { position: relative; }
.user {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 99px;
  background: oklch(1 0 0 / 0.07); border: 0; cursor: pointer; color: var(--on-navy);
}
.user:hover { background: oklch(1 0 0 / 0.12); }
.user span { font-size: 0.85rem; font-weight: 600; text-align: left; line-height: 1.2; }
.user small { display: block; font-weight: 500; color: var(--on-navy-muted); font-size: 0.74rem; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--clay-500); color: var(--navy-900); display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; flex: none; }
.avatar.us { background: var(--navy-700); color: var(--on-navy); }
.user-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px; padding: 6px; border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); }
.um-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.um-who b { display: block; font-size: 0.9rem; }
.um-who span { font-size: 0.8rem; color: var(--ink-3); overflow-wrap: anywhere; }
.um-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-decoration: none; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.um-item:hover { background: var(--hover); }

/* ---------- sections, panels ---------- */
main.wrap { padding-top: 32px; padding-bottom: 72px; }
.sec { margin-top: 40px; }
.sec:first-child { margin-top: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-head h2 { font: 600 1.25rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.sec-head p { color: var(--ink-3); font-size: 0.88rem; margin-top: 3px; }
.panel { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); }
.empty { padding: 36px 24px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: 0.88rem; cursor: pointer; text-decoration: none;
  transition: background 150ms ease-out, border-color 150ms ease-out, transform 120ms ease-out;
}
.btn:hover { background: var(--hover); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--navy-700); border-color: var(--navy-700); color: var(--on-navy); }
.btn-primary:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn-block { width: 100%; min-height: 48px; font-size: 0.95rem; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"] span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; border-radius: 50%; border: 2px solid oklch(1 0 0 / 0.35); border-top-color: currentColor; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }

/* segmented control: <div class="seg" role="group"><button aria-pressed="true">…</button>… */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 11px; background: var(--bg-2); }
.seg button { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: background 150ms ease-out, color 150ms ease-out; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px oklch(0.15 0.01 256 / 0.12); }

/* ---------- stage chip and lifecycle steps (colour: class st-<key>) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 99px; font-size: 0.78rem; font-weight: 650; white-space: nowrap; background: var(--bg-2); color: var(--ink-2); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); }
.life { display: grid; grid-template-columns: 3fr 4fr 2fr; gap: 10px; }
.life-name { display: block; font-size: 0.68rem; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.life-steps { display: flex; gap: 3px; }
.life-step { flex: 1; min-width: 0; display: grid; gap: 5px; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.life-step i { height: 5px; border-radius: 99px; background: var(--line); }
.life-step.done i { background: var(--st); opacity: 0.55; }
.life-step.now i { background: var(--st); height: 7px; margin-top: -1px; }
.life-step.now { color: var(--ink); font-weight: 700; }
.life-step b { font-weight: inherit; white-space: nowrap; }
.life-step:not(.now) b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-size: 0.76rem; color: var(--ink-3); font-weight: 650; padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tbody tr { cursor: pointer; transition: background 140ms ease-out; }
.table tbody tr:hover { background: var(--hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table .t b { display: block; font-weight: 600; line-height: 1.3; }
.table .t span { font-size: 0.76rem; color: var(--ink-3); }
.date { white-space: nowrap; }
.date small { display: block; font-size: 0.72rem; color: var(--ink-3); }
.paid { display: grid; gap: 4px; min-width: 120px; }
.paid-bar { height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.paid-bar i { display: block; height: 100%; background: var(--k-paid); border-radius: 99px; }
.paid span { font-size: 0.78rem; color: var(--ink-3); }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card {
  display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 18px; border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); cursor: pointer;
  transition: transform 180ms var(--ease-out), box-shadow 180ms ease-out;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px oklch(0.15 0.01 256 / 0.06), 0 16px 32px oklch(0.15 0.01 256 / 0.1); }
.card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card h3 { font-size: 0.98rem; font-weight: 650; line-height: 1.3; }
.card p { font-size: 0.85rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--ink-3); }
.card .meta b { color: var(--ink); font-weight: 650; white-space: nowrap; }
.card.add { background: transparent; box-shadow: none; border: 1.5px dashed var(--line); align-items: flex-start; justify-content: center; color: var(--ink-2); }
.card.add:hover { border-color: var(--accent); color: var(--ink); transform: none; box-shadow: none; }
.card.add .plus { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }

/* ---------- drawer (detail panel) ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 220ms ease-out; z-index: 60; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 61;
  background: var(--bg); box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(104%); transition: transform 300ms var(--ease-out); visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }
.dr-head { padding: 20px 24px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dr-top { display: flex; align-items: center; gap: 10px; }
.dr-close { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--bg-2); display: grid; place-items: center; cursor: pointer; }
.dr-close:hover { background: var(--line); }
.dr-head h2 { margin-top: 12px; font: 650 1.35rem/1.2 var(--font-display); letter-spacing: -0.015em; }
.dr-head .lede { margin-top: 8px; color: var(--ink-2); font-size: 0.92rem; }
.dr-body { flex: 1; overflow-y: auto; padding: 20px 24px 28px; display: grid; gap: 22px; align-content: start; }
.dr-sec h3 { font-size: 0.78rem; font-weight: 700; color: var(--ink-3); margin-bottom: 10px; }
.dr-foot { padding: 14px 24px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* detail blocks */
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--line-soft); border-radius: var(--r-sm); overflow: hidden; }
.facts div { background: var(--surface); padding: 11px 14px; }
.facts dt { font-size: 0.75rem; color: var(--ink-3); font-weight: 600; }
.facts dd { margin: 3px 0 0; font-weight: 650; font-size: 0.92rem; }
.facts dd small { display: block; font-weight: 500; font-size: 0.75rem; color: var(--ink-3); }
.facts dd.warn { color: var(--highlight); }
.crit { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; counter-reset: c; }
.crit li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.crit li::before { content: counter(c); counter-increment: c; font-size: 0.75rem; font-weight: 700; color: var(--ink-3); padding-top: 2px; }
.note { padding: 12px 14px; border-radius: var(--r-sm); background: var(--highlight-soft); color: var(--ink); font-size: 0.88rem; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.person { display: flex; gap: 10px; align-items: center; background: var(--surface); border-radius: var(--r-sm); padding: 10px 12px; }
.person .avatar { width: 30px; height: 30px; font-size: 0.72rem; }
.person small { display: block; font-size: 0.72rem; color: var(--ink-3); }
.person b { font-size: 0.87rem; font-weight: 600; }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 0.85rem; font-weight: 650; color: var(--ink-2); }
.input { position: relative; display: flex; align-items: center; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color 150ms ease-out, background 150ms ease-out; }
.input > .ic { position: absolute; left: 14px; color: var(--ink-3); pointer-events: none; }
.input input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--ink); border-radius: 10px; }
.input > .ic ~ input { padding-left: 44px; }
.input input::placeholder { color: var(--ink-3); opacity: 0.8; }
.input input:focus { outline: none; }
.input:focus-within { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
.input.invalid { border-color: var(--highlight); }
.input.invalid > .ic { color: var(--highlight); }
.textarea { width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; resize: vertical; }
.textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.err { font-size: 0.82rem; font-weight: 600; color: var(--highlight); }
.hint { font-size: 0.8rem; color: var(--ink-3); }
.alert { padding: 12px 14px; border-radius: 10px; background: var(--highlight-soft); color: var(--ink); font-size: 0.88rem; }
.alert b { color: var(--highlight); }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 16px); opacity: 0; background: var(--navy-900); color: var(--on-navy); padding: 11px 16px; border-radius: var(--r-sm); font-size: 0.88rem; box-shadow: 0 8px 24px oklch(0 0 0 / 0.22); transition: opacity 200ms ease-out, transform 200ms ease-out; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
/* ---------- drawer content: value box, split bar, payments, measure (Áttekintés, Munkák) ---------- */
.v-split { display: flex; gap: 3px; height: 30px; margin-top: 18px; border-radius: 8px; overflow: hidden; }
.v-split i { display: flex; align-items: center; min-width: 0; padding: 0 12px; font-style: normal; }
.v-split .fee { background: var(--fee); color: var(--on-navy); }
.v-split .keep { background: var(--value); color: white; }
.v-split span { font-size: 0.78rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-split.sm { height: 10px; margin-top: 14px; border-radius: 99px; }
.vbox { background: var(--surface); border-radius: var(--r-sm); padding: 16px; }
.v-head { display: flex; justify-content: space-between; gap: 16px; }
.v-head small { display: block; font-size: 0.75rem; font-weight: 650; color: var(--ink-3); }
.v-head b { display: block; font: 650 1.5rem/1.15 var(--font-display); letter-spacing: -0.015em; margin-top: 2px; }
.v-head em { display: block; font-style: normal; font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; }
.v-fee { text-align: right; }
.v-fee b { color: var(--fee); font-size: 1.2rem; }
.v-leg { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.78rem; font-weight: 650; }
.v-leg .fee { color: var(--fee); }
.v-leg .keep { color: var(--value); }
.v-meas { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 0.86rem; color: var(--ink-2); }
.v-meas b { color: var(--value); }
.money-box { background: var(--surface); border-radius: var(--r-sm); padding: 14px 16px; }
.money-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.money-line b { font: 650 1.35rem/1.1 var(--font-display); }
.money-box .paid-bar { height: 8px; margin: 12px 0 10px; }
.pay-list { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; display: grid; gap: 6px; }
.pay-list li { display: flex; justify-content: space-between; color: var(--ink-2); }
.pay-list li.due { color: var(--ink-3); }
.measure { background: var(--surface); border-radius: var(--r-sm); padding: 14px 16px; font-size: 0.9rem; display: grid; gap: 6px; }
.measure span { color: var(--ink-3); }

/* ---------- drawer content: work detail (ATOM-9) ---------- */
.rich { background: var(--surface); border-radius: var(--r-sm); padding: 14px 16px; font-size: 0.9rem; color: var(--ink); overflow-wrap: anywhere; }
.rich > * + * { margin-top: 8px; }
.rich ul, .rich ol { padding-left: 20px; }
.rich a { color: var(--accent); }
.rich.scope { white-space: pre-line; color: var(--ink-2); }
.note.dropped { background: var(--surface); border-left: 4px solid var(--st-dropped); }
.note.dropped b { display: block; margin-bottom: 4px; }
.sched { list-style: none; margin: 0; padding: 14px 16px; background: var(--surface); border-radius: var(--r-sm); display: grid; }
.sched li { position: relative; display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: start; padding: 8px 0; font-size: 0.9rem; }
.sched li::before { content: ""; position: absolute; left: 6px; top: 22px; bottom: -8px; width: 2px; background: var(--line-soft); }
.sched li:last-child::before { display: none; }
.sched li > i { width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); position: relative; z-index: 1; }
.sched li.kesz > i { background: var(--accent); border-color: var(--accent); }
.sched li.kesz::before { background: var(--accent); opacity: 0.35; }
.sched li.kovetkezo > i { border-color: var(--highlight); box-shadow: 0 0 0 3px var(--highlight-soft); }
.sched b { font-weight: 650; }
.sched li.jovo b { font-weight: 600; color: var(--ink-2); }
.sched small { display: block; font-size: 0.75rem; color: var(--ink-3); margin-top: 1px; }
.sched time { text-align: right; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sched li.jovo time { color: var(--ink-2); font-weight: 600; }
.sched em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); }
.crit small.cst { display: table; margin-top: 4px; padding: 1px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 650; background: var(--bg-2); color: var(--ink-3); }
.crit small.cst.ok { background: var(--value-soft); color: var(--value); }
.crit small.cst.obj { background: var(--highlight-soft); color: var(--highlight); }
.crit li > div { min-width: 0; }

/* ATOM-10: acceptance window in the drawer (Átadás) */
.acc { padding: 16px; border-radius: var(--r-sm); background: var(--surface); border-left: 4px solid var(--st-accept); display: grid; gap: 14px; }
.acc.obj { border-left-color: var(--highlight); }
.acc-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.acc-head b { font-weight: 650; }
.acc-head p { margin-top: 2px; font-size: 0.86rem; color: var(--ink-2); }
.acc-count { display: grid; place-items: center; min-width: 64px; padding: 8px 6px; border-radius: 12px; background: var(--bg-2); line-height: 1; }
.acc-count b { font: 650 1.7rem/1 var(--font-display); color: var(--st-accept); font-variant-numeric: tabular-nums; }
.acc-count small { margin-top: 4px; font-size: 0.68rem; font-weight: 650; color: var(--ink-3); }
.acc-badge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--highlight-soft); color: var(--highlight); }
.acc:not(.obj) .acc-badge { background: var(--value-soft); color: var(--value); }
.acc-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-step { display: grid; gap: 12px; font-size: 0.88rem; }
.acc-step[hidden] { display: none; }
.acc-crit { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.acc-crit legend { font-size: 0.85rem; font-weight: 650; color: var(--ink-2); margin-bottom: 6px; }
.acc-opt { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.acc-opt:hover { background: var(--hover); }
.acc-opt:has(input:checked) { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
.acc-opt input { margin: 3px 0 0; accent-color: var(--accent); }
.acc-quote { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); font-size: 0.88rem; }
.acc-quote small { display: block; font-weight: 650; color: var(--ink-2); }
.acc-quote p { margin-top: 6px; white-space: pre-line; }
.acc-quote footer { margin-top: 6px; font-size: 0.78rem; color: var(--ink-3); }

/* ---------- drawer content: the offer in Ajánlat (ATOM-11) ---------- */
.acc.offer { border-left-color: var(--st-offer); }
.acc.offer.done { border-left-color: var(--st-ordered); }
.offer-head small { display: block; font-size: 0.75rem; font-weight: 650; color: var(--ink-3); }
.offer-head b { display: block; font: 650 1.5rem/1.15 var(--font-display); letter-spacing: -0.015em; margin-top: 2px; color: var(--fee); }
.offer-head em { display: block; font-style: normal; font-size: 0.74rem; color: var(--ink-3); margin-top: 2px; }
.acc.offer .facts div { background: var(--bg-2); }
.acc.offer .pay-list { padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ---------- drawer content: warranty bug reports in Garancia (ATOM-13) ---------- */
.acc.warr { border-left-color: var(--st-warranty); }
.acc.warr .acc-badge { background: var(--value-soft); color: var(--value); }
.field .opt { font-weight: 500; color: var(--ink-3); }
.file-in { font: inherit; font-size: 0.85rem; color: var(--ink-2); max-width: 100%; }
.file-in::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.file-in::file-selector-button:hover { background: var(--hover); }
.input input[type="datetime-local"] { min-height: 46px; }
.claims { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acc.warr .claims { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.claim { display: grid; gap: 6px; padding: 12px 14px; border-radius: 10px; background: var(--bg-2); font-size: 0.88rem; min-width: 0; }
.claim-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.claim-top .id { font-size: 0.75rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.claim .cst { padding: 1px 8px; border-radius: 99px; font-size: 0.72rem; font-weight: 650; background: var(--surface); color: var(--ink-2); white-space: nowrap; }
.claim .cst.ok { background: var(--value-soft); color: var(--value); }
.claim .cst.obj { background: var(--highlight-soft); color: var(--highlight); }
.claim .cst.new { background: var(--accent-soft); color: var(--accent); }
.claim .cst.done { background: var(--line-soft); color: var(--ink-3); }
.claim-desc { white-space: pre-line; overflow-wrap: anywhere; }
.claim-meta, .claim-files { font-size: 0.76rem; color: var(--ink-3); }
.claim-files { display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.claim-files .ic { width: 14px; height: 14px; flex: none; }
.claim-why { font-size: 0.82rem; color: var(--ink-2); }
.claim .acc-quote { background: var(--surface); }


@media (max-width: 1080px) {
  :root { --label-w: 230px; }
  .provider { display: none; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 16px; }
  .client-head .wrap { gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  .client-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 1.05rem; }
  .client-id h1 { font-size: 1.2rem; }
  .client-id p { font-size: 0.8rem; }
  .user span:not(.avatar) { display: none; }
  .view-toggle { display: inline-flex; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .view-toggle span { display: none; }
  .user { padding: 6px; }
  .life { grid-template-columns: 1fr; gap: 8px; }
  .drawer { width: 100vw; }
  .dr-head, .dr-body, .dr-foot { padding-left: 16px; padding-right: 16px; }
  .acc-btns .btn { flex: 1 1 100%; min-height: 48px; }
  .hide-m { display: none; }

  /* ATOM-14: touch targets at least 44 px on phones */
  .btn, .um-item, .seg button { min-height: 44px; }
  .dr-close { width: 44px; height: 44px; }
  .file-in { min-height: 44px; }
  .file-in::file-selector-button { min-height: 44px; }

  /* ATOM-14: the page nav is a bottom tab bar on phones (thumb reach); the drawer and scrim cover it */
  .portal-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid oklch(1 0 0 / 0.12); box-shadow: 0 -6px 20px oklch(0.15 0.01 256 / 0.18); }
  .portal-nav .wrap { gap: 0; padding: 0 max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right)); }
  .portal-nav a { flex: 1 1 0; min-width: 0; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; border-bottom: 0; border-top: 3px solid transparent; font-size: 0.74rem; -webkit-tap-highlight-color: transparent; }
  .portal-nav a[aria-current="page"] { border-top-color: var(--clay-500); }
  .portal-nav a[aria-current="page"] .ic { color: var(--clay-500); }
  .portal-nav .ic { display: block; width: 22px; height: 22px; }
  .portal-nav a:focus-visible { outline-offset: -4px; }
  body:has(.portal-nav) { padding-bottom: calc(61px + env(safe-area-inset-bottom)); }
  body:has(.portal-nav) .toast { bottom: calc(77px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}