/* Illetékkalkulátor */

/* ── page-local tokens ─────────────────────────────────────────────────────
   Same contract as tka.css: base.css names what the site shares, these are the
   values only this page needs, and the dark body is emitted twice because the
   media query ("follow the OS") and the attribute ("the reader chose dark") are
   different selectors of equal specificity — so the attribute block goes last.
   The names are duplicated in tka.css deliberately: the two stylesheets are
   loaded on different routes and never meet. */
:root {
  --calc-accent-line: rgba(168, 124, 63, 0.34); /* the sub-question rail   */
  --calc-manual-bg:   rgba(200, 154, 78, 0.12); /* "needs a human" notice  */
  --calc-manual-line: rgba(168, 124, 63, 0.28);
  --calc-wash:        rgba(255, 255, 255, 0.42);/* inset wash on the panel */
  --calc-box-bg:      rgba(255, 255, 255, 0.90);/* drawn checkbox face     */
  --calc-box-line:    rgba(20, 23, 26, 0.24);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --calc-accent-line: rgba(210, 165, 92, 0.42);
    --calc-manual-bg:   rgba(210, 165, 92, 0.14);
    --calc-manual-line: rgba(210, 165, 92, 0.34);
    --calc-wash:        rgba(255, 255, 255, 0.07);
    --calc-box-bg:      rgba(255, 255, 255, 0.11);
    --calc-box-line:    rgba(255, 255, 255, 0.46);
  }
}

/* Forced dark — keep in sync with the block above, and keep it below it. */
:root[data-theme='dark'] {
  --calc-accent-line: rgba(210, 165, 92, 0.42);
  --calc-manual-bg:   rgba(210, 165, 92, 0.14);
  --calc-manual-line: rgba(210, 165, 92, 0.34);
  --calc-wash:        rgba(255, 255, 255, 0.07);
  --calc-box-bg:      rgba(255, 255, 255, 0.11);
  --calc-box-line:    rgba(255, 255, 255, 0.46);
}

.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: start; }
@media (max-width: 940px) { .calc-grid { grid-template-columns: 1fr; } }

.calc-form { display: grid; gap: 16px; }
/* See tka.css: base.css sets .hint to --ink-4, which fails 4.5:1 in both
   modes. Lifted per page rather than editing base.css, which is not ours. */
.calc-form .hint { color: var(--ink-3); }
.calc-checks { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 11px; }
.calc-checks legend { padding: 0; }
.calc-sub {
  display: grid; gap: 12px;
  padding: 14px; margin-left: 27px;
  border-left: 2px solid var(--calc-accent-line);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--calc-wash);
}
.calc-inline { padding-left: 27px; }

/* Result panel sticks on desktop so the number stays visible while filling the form. */
.calc-result { padding: clamp(20px, 3vw, 28px); position: sticky; top: 92px; }
@media (max-width: 940px) { .calc-result { position: static; } }

.calc-amount-wrap { padding-bottom: 16px; border-bottom: 1px solid var(--hairline); }
.calc-amount {
  font-size: clamp(2.1rem, 5vw, 3.15rem);
  line-height: 1.02;
  margin-top: 6px;
  font-variation-settings: 'opsz' 90, 'SOFT' 8, 'WONK' 0;
  transition: color 0.4s var(--ease);
}
.calc-rate { font-size: 0.86rem; font-weight: 600; margin-top: 5px; }

.calc-result.exempt .calc-amount { color: var(--forest); }
.calc-result.manual .calc-amount { font-size: clamp(1.4rem, 3vw, 1.9rem); color: var(--brass); }

.calc-steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 2px; }
.calc-steps li {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 11px 12px; border-radius: var(--r-sm);
  background: var(--calc-wash);
}
.calc-step-l { display: grid; gap: 2px; min-width: 0; }
.calc-step-l > span { font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.calc-step-l > em { font-style: normal; font-size: 0.79rem; color: var(--ink-3); }
.calc-step-v { font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; font-size: 0.96rem; }
.calc-step-v .delta { display: block; font-size: 0.76rem; font-weight: 650; color: var(--forest); }

.calc-manual { display: block !important; background: var(--calc-manual-bg) !important; border: 1px solid var(--calc-manual-line); }
.calc-manual strong { color: var(--ink); display: block; margin-bottom: 4px; }
.calc-manual p { font-size: 0.89rem; color: var(--ink-2); line-height: 1.55; }

.calc-notes-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 9px; }
.calc-notes-list li {
  font-size: 0.83rem; line-height: 1.5; color: var(--ink-3);
  padding-left: 18px; position: relative;
}
.calc-notes-list li::before {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--brass); opacity: 0.7;
}

.cite {
  display: inline-block; margin-top: 5px;
  font-size: 0.76rem; font-weight: 650; letter-spacing: 0.02em;
  color: var(--brass);
  font-variant-numeric: tabular-nums;
}

/* ── rules reference ───────────────────────────────────────────────────── */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.rule { padding: 18px 20px; }
.rule h3 { font-size: 1.02rem; margin-bottom: 7px; font-variation-settings: 'opsz' 22, 'SOFT' 12; }
.rule p { font-size: 0.875rem; line-height: 1.58; color: var(--ink-3); }
.rule strong { color: var(--ink-2); }
/* This footnote's colour is an inline style written into the translation
   strings (server/i18n/*.js: `color:var(--ink-4)`), so a stylesheet can only
   reach it with !important. --ink-4 is 2.3:1 light / 3.6:1 dark; --ink-3 keeps
   it quiet and reaches 4.5:1. Drop this rule once the i18n string stops
   hard-coding a colour. */
.rule p > span[style] { color: var(--ink-3) !important; }

/* Two markers were showing: the UA's own ::marker triangle AND our ＋ glyph.
   ::-webkit-details-marker only silences the legacy WebKit one; modern Chromium
   draws a real ::marker, which needs list-style. */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::marker { content: ''; }
details summary::before { content: '＋ '; color: var(--brass); font-weight: 700; }
details[open] summary::before { content: '－ '; }

/* ══ TOUCH ═════════════════════════════════════════════════════════════════
   Phone-only. The relief checkboxes are 17px boxes inside a .consent label
   (shared with the newsletter form, so the fix is scoped to this fieldset):
   the native box is replaced by a drawn one and the input is stretched
   invisibly across the whole row, making the entire line a 44px target. */
@media (max-width: 720px) {
  .calc-checks { gap: 2px; }
  .calc-checks .consent {
    position: relative;
    min-height: 44px; padding: 7px 0;
    align-items: center;
  }
  .calc-checks .consent input {
    position: absolute; inset: 0;
    width: 100%; height: 100%; margin: 0;
    opacity: 0; cursor: pointer;
  }
  .calc-checks .consent::before {
    content: ''; flex: 0 0 auto;
    width: 20px; height: 20px; border-radius: 7px;
    background: var(--calc-box-bg);
    box-shadow: inset 0 0 0 1.5px var(--calc-box-line), inset 0 1px 0 var(--spec-strong);
    transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .calc-checks .consent:has(input:checked)::before {
    background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.7 6.3 4.5 9 10.3 3.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
    box-shadow: inset 0 0 0 1.5px rgba(120,88,38,0.55);
  }
  .calc-checks .consent:has(input:focus-visible)::before {
    box-shadow: 0 0 0 3.5px var(--brass-glow), inset 0 0 0 1.5px var(--calc-box-line);
  }
  /* The conditional follow-ups hang off a checkbox that is now a full-row
     target — keep their own controls comfortable too. */
  .calc-inline .input, .calc-sub .input { min-height: 44px; }
}

/* ══ TABS ══════════════════════════════════════════════════════════════════ */
.calc-tabs { margin-top: clamp(20px, 3vw, 30px); }
@media (max-width: 560px) { .calc-tabs { display: flex; width: 100%; } }
#dutyPanels > [data-seg-panel] { margin-top: clamp(20px, 3vw, 30px); }

/* ══ INPUT WITH A CLEAR BUTTON ═════════════════════════════════════════════ */
.input-clear { position: relative; display: flex; }
.input-clear .input { flex: 1 1 auto; padding-right: 42px; }
.ic-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--ink-3); background: none;
  transition: color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.ic-x svg { width: 14px; height: 14px; }
.ic-x:hover { color: var(--ink); background: var(--surface-2); }
.ic-x[hidden] { display: none; }
@media (pointer: coarse) { .ic-x { width: 44px; height: 44px; } .input-clear .input { padding-right: 50px; } }

/* ══ FRACTION FIELD ════════════════════════════════════════════════════════
   A tulajdoni lap states the share as a fraction, so the field is a fraction.
   Two narrow boxes with a slash between them read as one value; a single
   decimal box would be asking the reader to convert 37/1000 in their head. */
.frac { display: flex; align-items: center; gap: 8px; }
.frac .input { width: 84px; flex: 0 0 auto; text-align: center; }
.frac-slash { font-size: 1.2rem; color: var(--ink-3); font-weight: 300; }

/* ══ INSTALMENT SLIDER ═════════════════════════════════════════════════════ */
.calc-instal label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.calc-instal-v { font-size: 0.84rem; font-weight: 650; color: var(--brass-ink); }
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: none; cursor: pointer; margin: 0;
}
.range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px;
  background: linear-gradient(to right, var(--brass) 0 var(--fill, 0%), var(--surface-2) var(--fill, 0%) 100%);
  box-shadow: inset 0 1px 2px rgba(var(--shadow-rgb), 0.10);
}
.range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--surface-2); }
.range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brass); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  border-radius: 999px; background: var(--surface-solid);
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.24), inset 0 0 0 1px var(--hairline);
  transition: transform var(--t-fast) var(--ease-out);
}
.range::-moz-range-thumb {
  width: 22px; height: 22px; border: 0;
  border-radius: 999px; background: var(--surface-solid);
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.24), inset 0 0 0 1px var(--hairline);
}
.range:active::-webkit-slider-thumb { transform: scale(1.14); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brass-glow), 0 1px 3px rgba(var(--shadow-rgb), 0.24); }

/* The instalment read-out. Deliberately quieter than the duty itself: it is a
   division of that number, not a reduction of it. */
.calc-instal-out {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--calc-wash);
}
.calc-instal-out[hidden] { display: none; }
.calc-instal-k { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); flex: 1 0 100%; }
.calc-instal-n { font-family: var(--display); font-size: 1.45rem; font-weight: 620; color: var(--ink); letter-spacing: -0.02em; }
.calc-instal-s { font-size: 0.82rem; color: var(--ink-3); }

/* ══ RADIO CARDS ═══════════════════════════════════════════════════════════ */
.calc-opts { border: 0; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.calc-opts legend { padding: 0; }
.calc-opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--calc-wash); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hairline-2);
  transition: background-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.calc-opt:hover { background: var(--surface-2); }
.calc-opt.on { box-shadow: inset 0 0 0 2px var(--brass); background: var(--surface-2); }
.calc-opt input { margin-top: 3px; accent-color: var(--brass); flex: 0 0 auto; }
.calc-opt-t { display: block; font-weight: 620; color: var(--ink); font-size: 0.95rem; }
.calc-opt-d { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.45; color: var(--ink-3); }
@media (pointer: coarse) { .calc-opt { min-height: 56px; align-items: center; } }

/* ══ REFERENCE PANELS ══════════════════════════════════════════════════════ */
.calc-bands { margin-top: 14px; padding: 16px 20px; }
.calc-bands summary { cursor: pointer; font-weight: 650; color: var(--ink); font-size: 0.94rem; }
.calc-bands-body { margin-top: 12px; font-size: 0.86rem; line-height: 1.6; color: var(--ink-3); }
.calc-bands-body strong { color: var(--ink-2); }
.calc-bands-body ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.calc-bands-body ul li { padding-left: 16px; position: relative; }
.calc-bands-body ul li::before {
  content: ''; position: absolute; left: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--brass); opacity: 0.7;
}
.calc-bandtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.calc-bandtable td { padding: 7px 0; border-bottom: 1px solid var(--hairline-2); vertical-align: top; }
.calc-bandtable td:first-child { white-space: nowrap; padding-right: 14px; color: var(--ink-2); font-weight: 600; }
.calc-bandtable tr:last-child td { border-bottom: 0; }

.calc-caveats { margin-top: 14px; padding: 18px 20px; }
.calc-caveats ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.calc-caveats li { font-size: 0.84rem; line-height: 1.55; color: var(--ink-3); }
.calc-caveats .cite { display: block; margin-top: 3px; }

@media (max-width: 620px) {
  .calc-bandtable { font-size: 0.8rem; }
  .calc-bandtable td:first-child { padding-right: 10px; }
}