/* ============================================================================
 * Variation Fee Calculator — WordPress plugin styles.
 * Everything is scoped under .vclcalc-app so it can never leak into the theme,
 * and the theme's CSS can never reach in and override it (no bare `body`,
 * `*`, or unscoped class selectors). Do not add rules outside .vclcalc-app.
 * ============================================================================ */

.vclcalc-app{
  /* Warm neutrals (were cool navy/slate/blue-grey) so body text, role lines and
     meta read in the calculator's warm gold scheme instead of a bluish cast. */
  --ink:#29221a;
  --ink-soft:#5f5140;
  --ink-faint:#968a73;
  --paper:#fbfaf8;
  --panel:#ffffff;
  --line:#e2e5ea;
  --line-strong:#c7cdd6;
  /* Gold identity to match the Fee Calculator's nav hero and view heading when
     embedded in the Variation Toolbox (was teal in the standalone build). */
  --accent:#8f6e2e;
  --accent-soft:#f5eedd;
  --accent-deep:#5f4a1e;
  --amber:#a8651a;
  --amber-soft:#fbf0e2;
  --mono: "IBM Plex Mono","SF Mono",Consolas,monospace;
  --serif: "Source Serif 4","Georgia",serif;
  --sans: "Inter","Helvetica Neue",Arial,sans-serif;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(20,30,40,0.06), 0 4px 16px rgba(20,30,40,0.04);

  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  max-width:880px;
  margin:0 auto;
  /* Embedded inside the Variation Toolbox's detail column: the guide renders the
     view heading (title / reference / last-updated / divider) above this block,
     so the calculator itself only needs a little top breathing room. */
  padding:6px 4px 40px;
}
.vclcalc-app, .vclcalc-app *{ box-sizing:border-box; }

/* Header */
.vclcalc-app .app-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 16px;
  margin-bottom:6px;
  border-bottom:2px solid var(--ink);
  padding-bottom:14px;
}
.vclcalc-app .app-head h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:22px;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
.vclcalc-app .app-head .tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.vclcalc-app .copyright{
  font-size:11.5px;
  color:var(--ink-faint);
  margin:8px 0 0;
}
.vclcalc-app .subhead{
  font-size:13.5px;
  color:var(--ink-soft);
  margin:10px 0 28px;
}

/* Step rail */
.vclcalc-app .rail{
  display:flex;
  gap:0;
  margin-bottom:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--panel);
}
.vclcalc-app .rail-step{
  flex:1;
  padding:10px 12px;
  font-size:11.5px;
  font-family:var(--mono);
  letter-spacing:0.02em;
  color:var(--ink-faint);
  border-right:1px solid var(--line);
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
}
.vclcalc-app .rail-step:last-child{border-right:none;}
.vclcalc-app .rail-step .n{
  width:18px;height:18px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;
  flex-shrink:0;
  color:var(--ink-faint);
}
.vclcalc-app .rail-step.active{ color:var(--accent-deep); background:var(--accent-soft); }
.vclcalc-app .rail-step.active .n{ background:var(--accent); border-color:var(--accent); color:#fff; }
.vclcalc-app .rail-step.clickable{
  cursor:pointer;
  transition:background .12s ease;
}
.vclcalc-app .rail-step.clickable:hover{ background:var(--accent-soft); }
/* Rail steps rendered as <button> need reset */
.vclcalc-app button.rail-step{
  background:var(--panel);
  border:none;
  font-family:var(--mono);
  text-align:left;
  width:100%;
  padding:10px 12px;
}
.vclcalc-app button.rail-step.done{ background:var(--paper); }
.vclcalc-app button.rail-step.done:hover{ background:var(--accent-soft); }
.vclcalc-app .rail-step.done .n{ background:#4a3717; border-color:#4a3717; color:#fff; }
.vclcalc-app .rail-step.done{ color:var(--ink-soft); }
.vclcalc-app .rail-step .label{display:none;}
@media (min-width:560px){
  .vclcalc-app .rail-step .label{display:inline;}
}

/* Panels */
.vclcalc-app .panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:18px;
}
.vclcalc-app .panel h2{
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  margin:0 0 4px;
  color:var(--ink);
}
.vclcalc-app .panel .hint{
  font-size:12.5px;
  color:var(--ink-faint);
  margin:0 0 16px;
}

/* Country grid */
.vclcalc-app .country-search{
  width:100%;
  padding:10px 12px;
  font-size:14px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  margin-bottom:14px;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
}
.vclcalc-app .country-search:focus{ outline:none; border-color:var(--accent); }
.vclcalc-app .country-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:8px;
}
.vclcalc-app .country-tile{
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:var(--radius);
  padding:10px 10px;
  cursor:pointer;
  text-align:left;
  font-family:var(--sans);
  transition:border-color .12s ease, background .12s ease;
}
.vclcalc-app .country-tile:hover{ border-color:var(--accent); background:var(--accent-soft); }
.vclcalc-app .country-tile.selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent); }
.vclcalc-app .country-tile .cc{
  font-family:var(--mono);
  font-size:11px;
  color:var(--accent-deep);
  letter-spacing:0.04em;
  display:block;
}
.vclcalc-app .country-tile .cn{
  font-size:13px;
  color:var(--ink);
  display:block;
  margin-top:2px;
}

/* Form fields */
.vclcalc-app .field-group{ margin-bottom:18px; }
.vclcalc-app .field-group:last-child{ margin-bottom:0; }
.vclcalc-app .field-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
}
.vclcalc-app .field-label .opt{
  font-weight:400;
  color:var(--ink-faint);
  font-size:11.5px;
}
.vclcalc-app .pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.vclcalc-app .pill{
  border:1px solid var(--line-strong);
  background:var(--paper);
  border-radius:20px;
  padding:7px 14px;
  font-size:13px;
  cursor:pointer;
  color:var(--ink-soft);
  font-family:var(--sans);
  transition:all .12s ease;
}
.vclcalc-app .pill:hover{ border-color:var(--accent); color:var(--accent-deep); }
.vclcalc-app .pill.selected{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.vclcalc-app .pill[disabled]{
  opacity:0.35;
  cursor:not-allowed;
}
.vclcalc-app .pill[disabled]:hover{ border-color:var(--line-strong); color:var(--ink-soft); }

.vclcalc-app select.field-select{
  width:100%;
  padding:10px 12px;
  font-size:13.5px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
}
.vclcalc-app select.field-select:focus{ outline:none; border-color:var(--accent); }

.vclcalc-app .num-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.vclcalc-app .num-stepper{
  display:flex;
  align-items:center;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  overflow:hidden;
  width:fit-content;
}
.vclcalc-app .num-stepper button{
  width:34px;height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  line-height:1;
  border:none;
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  cursor:pointer;
  font-family:var(--sans);
}
.vclcalc-app .num-stepper button:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.vclcalc-app .num-stepper input{
  width:48px;
  text-align:center;
  border:none;
  border-left:1px solid var(--line-strong);
  border-right:1px solid var(--line-strong);
  height:34px;
  font-size:14px;
  font-family:var(--mono);
  color:var(--ink);
}
.vclcalc-app .num-stepper input:focus{ outline:none; }

.vclcalc-app .note-box{
  background:var(--amber-soft);
  border:1px solid #e8cfa8;
  border-radius:var(--radius);
  padding:10px 12px;
  font-size:12.5px;
  color:#6b4517;
  margin-top:14px;
  line-height:1.5;
}
.vclcalc-app .note-box strong{ color:#5a3811; }

/* Nav buttons */
.vclcalc-app .nav-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
}
/* The "N countries selected" line. .hint is only sized inside .panel, and this one sits in the
   nav row instead -- so it was inheriting the base body size and shouting next to the button
   it only annotates. */
.vclcalc-app .nav-row .hint{
  font-size:12.5px;
  color:var(--ink-faint);
}

/* Hand-off note from the Guide's summary (see window.VCLCALC.setGlobalCounts). */
.vclcalc-app .prefill-note{
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:8px;
  padding:9px 12px;
  margin:0 0 14px;
  font-size:12.5px;
  color:var(--accent-deep);
  line-height:1.5;
}
.vclcalc-app .btn{
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:600;
  padding:10px 20px;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  transition:all .12s ease;
}
.vclcalc-app .btn:hover{ border-color:var(--ink); }
.vclcalc-app .btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.vclcalc-app .btn.primary:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.vclcalc-app .btn:disabled{ opacity:0.4; cursor:not-allowed; }
.vclcalc-app .btn:disabled:hover{ border-color:var(--line-strong); background:var(--paper); }
.vclcalc-app .btn.ghost{
  border-color:transparent;
  color:var(--ink-soft);
}
.vclcalc-app .btn.ghost:hover{ color:var(--ink); border-color:var(--line); }

/* Variation rows (step 2: pick fee rows for the chosen country) */
.vclcalc-app .row-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.vclcalc-app .row-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:0;
  background:var(--paper);
}
.vclcalc-app .row-card.active{ border-color:var(--accent); background:var(--accent-soft); }
.vclcalc-app .row-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  cursor:default;
}
.vclcalc-app .row-card-title{ display:flex; flex-direction:column; gap:2px; }
.vclcalc-app .row-card-title .t1{ font-size:13.5px; font-weight:600; color:var(--ink); }
.vclcalc-app .row-card-title .t2{ font-size:12px; color:var(--ink-faint); }
.vclcalc-app .row-card input[type=checkbox]{
  width:18px;height:18px;
  accent-color:var(--accent);
  margin-top:1px;
  flex-shrink:0;
}
.vclcalc-app .row-card-body{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media print {
  /* Isolate the calculator on the printed page — without this, printing
     from inside a WordPress page also prints the theme's header, nav,
     sidebar and footer, since window.print() prints the whole page by
     default. Hide everything, then re-show only .vclcalc-app and pull it out
     of the (still layout-occupying, just invisible) page flow so it starts
     at the top instead of leaving a blank gap where the theme chrome was. */
  body * { visibility: hidden !important; }
  .vclcalc-app, .vclcalc-app * { visibility: visible !important; }
  .vclcalc-app { position: absolute !important; left: 0; top: 0; width: 100% !important; }

  .vclcalc-app{ background:#fff; }
  .vclcalc-app .app-head .tag, .vclcalc-app .subhead, .vclcalc-app .rail, .vclcalc-app .nav-row, .vclcalc-app .export-buttons,
  .vclcalc-app .src, .vclcalc-app button, .vclcalc-app .btn, .vclcalc-app #vclcalc-changelogPanel, .vclcalc-app #vclcalc-toggleChangelog { display:none !important; }
  .vclcalc-app{ max-width:100%; padding:0; }
  .vclcalc-app .result-panel{ background:#1a3a37 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .vclcalc-app .panel{ border:1px solid #ccc; box-shadow:none; }
  .vclcalc-app .breakdown{ border:1px solid #ccc; }
  @page { margin: 1.5cm; }
}

/* Results */
.vclcalc-app .result-panel{
  background:#f4ebd5;
  border:1px solid #d4bd85;
  color:#5a4519;
  border-radius:var(--radius);
  padding:26px 24px;
  margin-bottom:18px;
}
.vclcalc-app .result-panel .rp-top-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 16px;
  margin-bottom:8px;
}
.vclcalc-app .result-panel .rp-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#8c6e30;
  margin-bottom:0;
}
.vclcalc-app .result-panel .rp-updated{
  font-family:var(--mono);
  font-size:11px;
  color:#ad9256;
  white-space:nowrap;
}
.vclcalc-app .result-panel .rp-total{
  font-family:var(--serif);
  font-size:40px;
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1;
}
.vclcalc-app .result-panel .rp-total .cur{ font-size:22px; font-weight:500; margin-right:6px; color:#9a7c3c; }
.vclcalc-app .result-panel .rp-sub{
  margin-top:10px;
  font-size:12.5px;
  color:#7c6636;
}

.vclcalc-app .fee-note{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding:6px 10px;
  border-radius:var(--radius);
  font-size:11.5px;
  line-height:1.45;
  width:100%;
  box-sizing:border-box;
}
.vclcalc-app .fee-note--cap{
  background:#fef9ec;
  border:1px solid #e8d89a;
  color:#7a5c00;
}
.vclcalc-app .fee-note--group{
  background:#f4efe4;
  border:1px solid #d9ccac;
  color:#6b5a2e;
}
.vclcalc-app .fee-note b{ font-weight:600; }
.vclcalc-app .fee-note .fn-label{ flex:1; }
.vclcalc-app .fee-note .fn-amount{
  font-family:var(--mono);
  font-weight:700;
  white-space:nowrap;
  flex-shrink:0;
}
.vclcalc-app .local-currency-row{
  margin-top:10px;
  padding:10px 12px;
  background:var(--accent-soft);
  border-radius:var(--radius);
  border:1px solid var(--line);
  width:100%;
  box-sizing:border-box;
}
.vclcalc-app .local-currency-row .lc-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.vclcalc-app .local-currency-row .lc-title{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--ink-soft);
}
.vclcalc-app .local-currency-row .lc-rate{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  white-space:nowrap;
}
.vclcalc-app .local-currency-row .lc-items{
  margin-bottom:6px;
}
.vclcalc-app .local-currency-row .lc-items .bd-meta{
  color:var(--ink-soft);
}
.vclcalc-app .local-currency-row .lc-total{
  display:flex;
  justify-content:flex-end;
  align-items:baseline;
  gap:10px;
  padding-top:6px;
  border-top:1px solid var(--line);
}
.vclcalc-app .local-currency-row .lc-total-label{
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
}
.vclcalc-app .local-currency-row .lc-amount{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--accent-deep);
  white-space:nowrap;
}
.vclcalc-app .breakdown{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:18px;
}
.vclcalc-app .breakdown-row{
  display:flex;
  flex-direction:column;
  padding:14px 16px;
  background:var(--panel);
}
.vclcalc-app .breakdown-row .bd-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  width:100%;
}
.vclcalc-app .breakdown-divider{
  height:1px;
  background:var(--line);
  margin:0 16px;
}
.vclcalc-app .breakdown-row .bd-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vclcalc-app .breakdown-row .bd-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.vclcalc-app .breakdown-row .bd-meta{ font-size:11.5px; color:var(--ink-faint); font-family:var(--mono); }
.vclcalc-app .breakdown-row .bd-meta b{ color:var(--ink-soft); font-weight:700; }
.vclcalc-app .breakdown-row .bd-items{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.vclcalc-app .bd-item-line{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}
.vclcalc-app .bd-item-line .bd-item-amount{
  white-space:nowrap;
  text-align:right;
  flex-shrink:0;
}
.vclcalc-app .breakdown-row .bd-amount-col{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
.vclcalc-app .breakdown-row .bd-amount{
  font-family:var(--mono);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
/* Grand total row */
.vclcalc-app .breakdown-row.total-row{
  border-top:2px solid var(--line-strong);
}
.vclcalc-app .breakdown-row.total-row .bd-top{ align-items:center; }
.vclcalc-app .breakdown-row.total-row .bd-name{
  font-size:17px;
  font-weight:700;
  color:var(--accent-deep);
  font-family:var(--mono);
}
.vclcalc-app .breakdown-row.total-row .bd-amount{
  font-size:17px;
  color:var(--accent-deep);
}
.vclcalc-app .breakdown-row.subtotal{ background:var(--accent-soft); }
.vclcalc-app .breakdown-row.subtotal .bd-amount{ color:var(--accent-deep); }

.vclcalc-app .export-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.vclcalc-app .btn-export{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:var(--panel);
  font-size:12px;
  font-family:var(--mono);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .12s, border-color .12s;
}
.vclcalc-app .btn-export:hover{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
.vclcalc-app .btn-export svg{ flex-shrink:0; }

.vclcalc-app .src{
  margin-top:30px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11.5px;
  color:var(--ink-faint);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vclcalc-app .src a{ color:var(--ink-faint); }
.vclcalc-app .src .fx-status-row{
  display:flex;
  justify-content:flex-end;
}

.vclcalc-app .badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  padding:2px 6px;
  border-radius:3px;
  background:var(--accent-soft);
  color:var(--accent-deep);
  letter-spacing:0.03em;
}

/* Coloured IA/IB/II type pills -- same look as the Toolbox-wide .badge.type-ia/-ib/-ii
   (vcl-style.css); own classes + fallback colors so the calculator also renders them
   standalone, without colliding with the calculator's own gold .badge above. */
.vclcalc-app .type-pill{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  padding:2px 8px;
  border-radius:999px;
  letter-spacing:0.02em;
}
.vclcalc-app .type-pill--ia{ background:var(--ia-bg,#E8F1F0); color:var(--ia,#1F5F5B); }
.vclcalc-app .type-pill--ib{ background:var(--ib-bg,#FBF0E2); color:var(--ib,#A8651A); }
.vclcalc-app .type-pill--ii{ background:var(--ii-bg,#FBEAE7); color:var(--ii,#B23A2E); }

/* Special-cases country cards: one card per country, one row per type with a real
   choice, hint buttons (exm-toggle) once per country at the card's foot. */
.vclcalc-app .sp-card{
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--paper);
  padding:12px 16px 14px;
  margin-bottom:12px;
}
.vclcalc-app .sp-card:last-child{ margin-bottom:0; }
.vclcalc-app .sp-card__head{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  padding-bottom:8px;
  border-bottom:0.5px solid var(--line);
  margin-bottom:4px;
}
.vclcalc-app .sp-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
}
.vclcalc-app .sp-hint{ padding:2px 0 6px; }
.vclcalc-app .sp-card .exm-list{ margin-top:8px; background:var(--panel); }

.vclcalc-app ::selection{ background:var(--accent-soft); }

/* =============================================================================
 * Guided Workflow visual style (2026-07)
 * Restyles the four steps + the step rail to match the Toolbox's Guided Workflow
 * tool, in the calculator's gold instead of green. Appended so these rules win
 * over the base rules above at equal specificity, while the base rules stay
 * intact for contexts this doesn't touch (the changelog / HA-website lists reuse
 * .breakdown-row outside the results .breakdown container). No markup logic
 * changes: the fee engine, grouping/cap notes and local-currency block are all
 * untouched — only their presentation.
 * ========================================================================== */

/* ---- Step rail -> Guided-Workflow dots (Countries · Details · Variations · Result) ---- */
.vclcalc-app .rail{ display:flex; gap:6px; margin-bottom:20px; border:none; background:none; border-radius:0; overflow:visible; }
.vclcalc-app .rail-step{ flex:1; flex-direction:column; align-items:center; gap:5px; border-right:none; padding:0; text-align:center; }
.vclcalc-app button.rail-step{ background:none; padding:0; width:100%; }
.vclcalc-app .rail-step .n{ width:30px; height:30px; border:1.5px solid var(--line-strong); font-size:13px; color:var(--ink-faint); background:var(--panel); }
.vclcalc-app .rail-step .label{ display:inline; font-family:var(--sans); font-size:11px; line-height:1.25; color:var(--ink-faint); }
.vclcalc-app .rail-step.active{ background:none; color:var(--accent-deep); }
.vclcalc-app .rail-step.active .n{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
.vclcalc-app .rail-step.active .label{ color:var(--accent-deep); font-weight:600; }
.vclcalc-app .rail-step.done .n{ background:var(--accent); border-color:var(--accent); color:#fff; }
.vclcalc-app button.rail-step.done{ background:none; }
.vclcalc-app button.rail-step.done:hover{ background:none; }
.vclcalc-app button.rail-step.done:hover .n{ box-shadow:0 0 0 3px var(--accent-soft); }
.vclcalc-app button.rail-step.done:hover .label{ color:var(--ink-soft); }

/* ---- Cards & panels: softer Guided-Workflow radius ---- */
.vclcalc-app .panel{ border-radius:12px; padding:18px 20px; }
.vclcalc-app .panel h2{ font-family:var(--sans); font-size:16px; }
.vclcalc-app .panel .hint{ font-size:12px; }
.vclcalc-app .field-label{ font-size:12px; }

/* ---- Step 1: country chips ---- */
.vclcalc-app .country-search{ border-radius:8px; }
.vclcalc-app .country-grid{ grid-template-columns:repeat(auto-fill, minmax(112px,1fr)); gap:6px; }
.vclcalc-app .country-tile{ border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px; background:var(--panel); }
.vclcalc-app .country-tile:hover{ border-color:var(--accent); background:var(--panel); }
.vclcalc-app .country-tile.selected{ border-color:var(--accent); background:var(--accent-soft); box-shadow:none; }
.vclcalc-app .country-tile .cc{ color:var(--ink-faint); }
.vclcalc-app .country-tile.selected .cc{ color:var(--accent); }
.vclcalc-app .country-tile.selected .cn{ color:var(--accent-deep); font-weight:600; }

/* ---- Step 2: per-country detail cards ---- */
.vclcalc-app .row-card{ border-radius:10px; background:var(--paper); }
.vclcalc-app .row-card.active{ border-color:var(--line); background:var(--paper); }
.vclcalc-app .row-card-title .t1{ font-size:14px; }
.vclcalc-app .row-card-body{ grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:16px; }

/* ---- Shared controls: select + stepper ---- */
.vclcalc-app select.field-select{ border-radius:8px; padding:8px 10px; font-size:13px; background:var(--panel); }
.vclcalc-app .num-stepper{ border-radius:8px; }
.vclcalc-app .num-stepper button{ color:var(--accent-deep); background:var(--panel); }
.vclcalc-app .num-stepper button:hover{ background:var(--accent-soft); color:var(--accent-deep); }
.vclcalc-app .num-stepper input{ background:var(--panel); }

/* ---- Step 3: special-cases panel (tinted like a Guided-Workflow builder) ---- */
.vclcalc-app .special-panel{ border:1px dashed var(--line-strong); background:var(--accent-soft); }

/* ---- Nav buttons ---- */
.vclcalc-app .btn{ border-radius:8px; }
.vclcalc-app .btn.primary{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-deep); }
.vclcalc-app .btn.primary:hover{ background:var(--accent-soft); border-color:var(--accent-deep); color:var(--accent-deep); }
.vclcalc-app .btn.ghost{ border-color:var(--line-strong); color:var(--ink-soft); background:var(--panel); }
.vclcalc-app .btn.ghost:hover{ border-color:var(--accent); color:var(--ink); }

/* ---- Step 4: result — hero + country cards (Option 1) ---- */
.vclcalc-app .result-panel{ background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--accent-deep); border-radius:12px; padding:16px 18px; }
.vclcalc-app .result-panel .rp-label{ color:var(--accent-deep); }
.vclcalc-app .result-panel .rp-updated{ color:var(--accent); }
.vclcalc-app .result-panel .rp-total{ font-size:34px; color:var(--accent-deep); }
.vclcalc-app .result-panel .rp-total .cur{ font-family:var(--mono); font-size:16px; color:var(--accent); }
.vclcalc-app .result-panel .rp-sub{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); }

/* Fees-by-country: bare heading + cards on the page ground (no enclosing box) */
/* The white .panel box around Fees-by-country stays (2026-07-23c): the cream country
   cards inside it read exactly like the Country-details and Special-cases cards. */
.vclcalc-app .bd-heading{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--ink); }
.vclcalc-app .breakdown{ border:none; border-radius:0; overflow:visible; background:none; display:flex; flex-direction:column; gap:10px; }
.vclcalc-app .breakdown .breakdown-divider{ display:none; }
.vclcalc-app .breakdown .breakdown-row{ border:1px solid var(--line); border-radius:12px; padding:13px 16px; }
.vclcalc-app .breakdown .breakdown-row .bd-name{ font-size:15px; }
.vclcalc-app .breakdown .breakdown-row .bd-items{ margin-top:10px; padding-top:9px; border-top:1px solid var(--line); gap:4px; }
.vclcalc-app .breakdown .breakdown-row .bd-item-line{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); }
.vclcalc-app .breakdown .breakdown-row .bd-item-line .bd-item-amount{ font-family:var(--mono); }
.vclcalc-app .breakdown .breakdown-row .bd-amount{ font-size:17px; }
/* grand-total row -> accent card */
.vclcalc-app .breakdown .breakdown-row.total-row{ border:1.5px solid var(--accent); border-radius:12px; background:var(--accent-soft); }
.vclcalc-app .breakdown .breakdown-row.total-row .bd-name{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--accent-deep); }
.vclcalc-app .breakdown .breakdown-row.total-row .bd-amount{ font-size:18px; color:var(--accent-deep); }

/* cap / grouping notes -> soft pills */
.vclcalc-app .fee-note{ border-radius:8px; padding:7px 10px; font-size:12px; margin-top:9px; }
/* Both notes in the toggle chips' gold, so the opened box matches its chip (2026-07-23c). */
.vclcalc-app .fee-note--cap{ background:var(--accent-soft); border:none; color:var(--accent-deep); }
.vclcalc-app .fee-note--group{ background:var(--accent-soft); border:none; color:var(--accent-deep); }

/* local-currency block -> dashed, subtle ground */
.vclcalc-app .local-currency-row{ background:var(--paper); border:1px dashed var(--line-strong); border-radius:8px; }

/* export buttons */
.vclcalc-app .btn-export{ border-radius:8px; font-family:var(--sans); font-size:13px; padding:8px 14px; }

/* ---- Follow-up refinements (2026-07-20) ---- */
/* Fill the whole detail column, like the Guided Workflow (drop the 880px centring cap). */
.vclcalc-app{ max-width:none; margin:0; }
/* Per-country total in the calculator's dark brown, not near-black. */
.vclcalc-app .breakdown .breakdown-row .bd-amount{ color:var(--accent-deep); }
/* Changelog / HA-website toggles: drop the inner box (base ghost gained a border in the
   restyle above) — keep the outer .panel box, show them as plain links again. */
.vclcalc-app #vclcalc-toggleChangelog,
.vclcalc-app #vclcalc-toggleHaWebsites{ border:none; background:none; }
.vclcalc-app #vclcalc-toggleChangelog:hover,
.vclcalc-app #vclcalc-toggleHaWebsites:hover{ border:none; background:none; color:var(--accent-deep); }

/* --- Classification-exception hints in the special-cases panel (pilot: FR) --- */
.vclcalc-app .exm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #8f6e2e);
  background: #fff;
  border: 1px solid var(--accent, #8f6e2e);
  border-radius: 7px;
  padding: 4px 11px;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}
.vclcalc-app .exm-toggle:hover { background: rgba(143, 110, 46, 0.06); }
.vclcalc-app .exm-toggle__car { font-size: 9px; }
.vclcalc-app .exm-list {
  border: 1px solid var(--border, #e2ddd2);
  border-radius: 9px;
  background: #fff;
  padding: 4px 14px;
}
.vclcalc-app .exm-list__head {
  font-size: 11.5px;
  color: var(--ink-soft, #555);
  padding: 8px 0 6px;
  border-bottom: 0.5px solid var(--border, #eee);
}
.vclcalc-app .exm-row {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 0.5px solid #f0efe9;
  font-size: 12px;
}
.vclcalc-app .exm-row:first-of-type { border-top: none; }
.vclcalc-app .exm-code {
  font-family: var(--mono, Consolas, monospace);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent, #8f6e2e);
  white-space: nowrap;
}
.vclcalc-app .exm-desc { color: var(--ink-soft, #444); line-height: 1.45; }
.vclcalc-app .exm-var { color: var(--ink-faint, #8a8a83); }
.vclcalc-app .exm-miss {
  font-size: 10.5px;
  color: #A6790A;
  background: #FBF0E2;
  border-radius: 4px;
  padding: 0 5px;
  white-space: nowrap;
}
/* Optional authority note (e.g. HPRA's C.6.a caveat) above the source line. */
.vclcalc-app .exm-note {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-soft, #5f5140);
  padding: 8px 0 2px;
  border-top: 0.5px solid var(--border, #eee);
}
.vclcalc-app .exm-foot {
  font-size: 11px;
  color: var(--ink-faint, #8a8a83);
  padding: 8px 0;
  border-top: 0.5px solid var(--border, #eee);
}
.vclcalc-app .exm-foot a { color: var(--accent, #8f6e2e); }

/* --- Result cards in the special-cases card look + status chips (2026-07-23) ---
   Country cards on the paper ground with the sp-card radius; coloured type pills
   in the fee lines; cap / grouping / local-currency become small gold toggle
   chips at the card's foot (.rchip) that reveal the unchanged detail blocks
   (.rdetail wrappers). Print always shows the details and hides the chips. */
.vclcalc-app .breakdown .breakdown-row{ background:var(--paper); border-radius:6px; }
.vclcalc-app .breakdown .breakdown-row .bd-item-line{ gap:10px; align-items:baseline; }
.vclcalc-app .bd-item-line .type-pill{ flex-shrink:0; transform:translateY(-1px); }
.vclcalc-app .bd-item-line .bd-item-label{ flex:1; }
.vclcalc-app .result-chiprow{ display:flex; gap:6px; flex-wrap:wrap; margin-top:9px; }
.vclcalc-app .rchip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
  background:var(--accent-soft);
  color:var(--accent-deep);
  border:none;
  cursor:pointer;
  transition:filter .12s ease;
}
.vclcalc-app .rchip:hover{ filter:brightness(0.96); }
.vclcalc-app .rchip .rchip__car{ font-size:8px; }
.vclcalc-app .rdetail{ display:none; }
.vclcalc-app .rdetail.open{ display:block; }
@media print{
  .vclcalc-app .result-chiprow{ display:none; }
  .vclcalc-app .rdetail{ display:block !important; }
}

/* ============================================================================
 * Result step v2 (2026-07-25): per-type breakdown table (expandable to the
 * individual variations), per-strength columns, EUR/local-currency toggle,
 * subtle cap/grouping markers. New .vres-* classes (later rules win) so the
 * older .breakdown-* rules -- reused by the changelog / HA-website lists --
 * stay untouched. Table borders are forced horizontal-only so a host theme's
 * table styling can't add vertical column lines.
 * ========================================================================== */
.vclcalc-app .vres-panelhead{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.vclcalc-app .vres-curtoggle{ display:inline-flex; border:1.5px solid var(--accent); border-radius:999px; overflow:hidden; }
.vclcalc-app .vres-curtoggle .vres-ct{ font-family:var(--sans); font-size:11.5px; font-weight:600; padding:5px 14px; border:none; background:#fff; color:var(--accent-deep); cursor:pointer; }
.vclcalc-app .vres-curtoggle .vres-ct.on{ background:var(--accent); color:#fff; }

.vclcalc-app .vres-cty{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:12px; background:#fff; }
.vclcalc-app .vres-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 15px; background:var(--paper); border-bottom:1px solid var(--line); }
.vclcalc-app .vres-name{ font-size:14.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vclcalc-app .vres-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-faint); margin-top:2px; }
.vclcalc-app .vres-meta b{ color:var(--ink-soft); font-weight:700; }
.vclcalc-app .vres-total{ text-align:right; flex-shrink:0; }
.vclcalc-app .vres-eq{ display:block; font-family:var(--mono); font-size:10px; color:var(--ink-faint); }
.vclcalc-app .vres-amt{ font-family:var(--serif); font-size:18px; font-weight:600; color:var(--accent-deep); }

.vclcalc-app .vres-mtag{ display:inline-block; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.03em; padding:2px 6px; border-radius:5px; border:1px solid; }
.vclcalc-app .vres-mtag--grp{ background:var(--accent-soft); color:var(--accent-deep); border-color:#e7d9b6; }
.vclcalc-app .vres-mtag--cap{ background:var(--amber-soft); color:var(--amber); border-color:#f0dcc4; }

.vclcalc-app .vres-tbl{ width:100%; border-collapse:collapse; font-size:12px; }
.vclcalc-app .vres-tbl th, .vclcalc-app .vres-tbl td{ border-left:0; border-right:0; }
.vclcalc-app .vres-tbl thead th{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); text-align:right; padding:7px 15px; border-top:0; }
.vclcalc-app .vres-tbl thead th:first-child{ text-align:left; }
.vclcalc-app .vres-tbl tbody td{ padding:8px 15px; border-bottom:1px solid #f0ece3; border-top:0; color:var(--ink-soft); text-align:right; vertical-align:top; }
.vclcalc-app .vres-tbl tbody td:first-child{ text-align:left; color:var(--ink); }
/* Numeric columns get a fixed width so the first (Variation) column keeps the rest --
   enough room for "Type IB … · included in grouped fee" to stay on one line. */
.vclcalc-app .vres-tbl th:not(:first-child), .vclcalc-app .vres-tbl td:not(:first-child){ width:150px; white-space:nowrap; }
.vclcalc-app .vres-num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
/* When a grouping or cap fee applies, the per-variation amounts are only indicative --
   the binding number is the country subtotal below -- so grey them out. */
.vclcalc-app .vres-tbl--indicative tbody td.vres-num{ color:var(--ink-faint); }
.vclcalc-app .vres-var{ display:flex; align-items:center; gap:7px; flex-wrap:nowrap; white-space:nowrap; }
.vclcalc-app .vres-cnt{ font-family:var(--mono); font-weight:600; color:var(--ink-soft); }
.vclcalc-app .vres-var small{ color:var(--ink-faint); font-size:11px; }
.vclcalc-app .vres-vno{ display:inline-block; min-width:46px; color:var(--ink-soft); }
.vclcalc-app .vres-subnote{ color:var(--ink-faint); font-size:10.5px; font-family:var(--mono); }

/* expand caret (bigger, easy to hit) + expandable/detail rows */
.vclcalc-app .vres-caret{ display:inline-block; width:16px; text-align:center; font-size:13px; line-height:1; color:var(--accent); flex-shrink:0; }
.vclcalc-app .vres-caret--none{ color:transparent; }
.vclcalc-app .vres-exp{ cursor:pointer; }
.vclcalc-app .vres-exp:hover td{ background:#fbf7ee; }
.vclcalc-app .vres-subrow td{ background:#fcfaf5; border-bottom:1px dashed #eee4cf; color:var(--ink-faint); }
.vclcalc-app .vres-subrow.vres-hidden{ display:none; }

.vclcalc-app .vres-tbl tfoot td{ padding:9px 15px; font-weight:600; color:var(--ink); border-top:1px solid var(--line-strong); text-align:right; background:#fff; }
.vclcalc-app .vres-tbl tfoot td:first-child{ text-align:left; }
.vclcalc-app .vres-fnote{ font-weight:400; font-family:var(--mono); font-size:10.5px; }
.vclcalc-app .vres-fnote--grp{ color:var(--accent-deep); }
.vclcalc-app .vres-fnote--cap{ color:var(--amber); }
/* Cap footer: raw sum struck through, stacked above the capped total so it stays
   right-aligned inside the column and never overflows past the table edge. */
.vclcalc-app .vres-capraw{ display:block; text-align:right; text-decoration:line-through; color:var(--ink-faint); font-weight:400; font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:11px; margin-bottom:1px; }

.vclcalc-app .vres-grand{ display:flex; justify-content:space-between; align-items:center; border:1.5px solid var(--accent); background:var(--accent-soft); border-radius:12px; padding:13px 16px; }
.vclcalc-app .vres-grand-l{ font-size:15px; font-weight:600; color:var(--accent-deep); }
.vclcalc-app .vres-grand-r{ font-family:var(--serif); font-size:19px; font-weight:600; color:var(--accent-deep); font-variant-numeric:tabular-nums; }

@media print{
  .vclcalc-app .vres-curtoggle{ display:none; }
  .vclcalc-app .vres-subrow.vres-hidden{ display:table-row !important; }
}