/* Heiravelle, in the Toolsfully tool design.
 *
 * Loaded after ../style.css, so every colour, type size, radius and shadow
 * here is a site token and dark mode follows the site without a second
 * palette. The page chrome — header, hero, crumb, card, footer — is the
 * site's own markup and needs nothing from this file.
 *
 * What this file does is dress the markup app.js renders. Five of its class
 * names also exist in the site stylesheet (.card, .field, .hint, .row, .tag),
 * so each is restated in full under .hv or #modal rather than trusted to
 * inherit something sensible.
 */

/* ── panel head: local badge, progress file, stepper, flow ─────────────── */
.hv-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:14px}
.localbadge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--color-on-local);background:var(--color-local);border:var(--border);
  border-radius:var(--radius-round);padding:6px 14px;box-shadow:2px 2px 0 var(--color-ink)}
.hv .chip,#modal .chip{display:inline-flex;align-items:center;gap:6px}

/* The app renders <button data-step><span class="num">n</span>Title</button>.
   Steps before the current one take the lime square, as on the site stepper. */
#nav{display:flex;flex-wrap:wrap;gap:var(--space-1);border-bottom:var(--border-subtle)}
#nav button{display:inline-flex;align-items:center;gap:var(--space-2);background:none;border:0;
  border-bottom:2px solid transparent;border-radius:0;padding:var(--space-2) var(--space-3);margin-bottom:-1px;
  font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--color-muted);cursor:pointer;min-height:40px;
  transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
#nav button:hover{color:var(--color-ink)}
#nav .num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 auto;
  border:1px solid var(--color-faint);color:var(--color-muted);
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600}
#nav button:has(~ button.active) .num{background:var(--color-local);border-color:var(--color-ink);color:var(--color-on-local)}
#nav button.active{color:var(--color-ink);border-bottom-color:var(--color-ink)}
#nav button.active .num{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-canvas)}

.hv-flow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 0;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
.hv-flow b{color:var(--color-ink);font-weight:500}
.hv-flow span{opacity:.5}

/* ── each step ─────────────────────────────────────────────────────────── */
#screen>h1{font-size:24px;letter-spacing:-.03em;line-height:1.15;margin:var(--space-6) 0 var(--space-2)}
#screen>p.lead{font-size:var(--text-md);line-height:1.6;color:var(--color-ink);margin:0 0 20px;max-width:var(--measure)}
#screen .columns{display:block}
#screen .card{background:none;border:0;border-radius:0;box-shadow:none;padding:0}

.hv .section-heading,#modal .section-heading{font-size:var(--text-lg);font-weight:750;letter-spacing:-.02em;line-height:1.25;margin:0 0 var(--space-2)}
.hv .hint,#modal .hint{display:block;font-size:var(--text-sm);line-height:1.6;color:var(--color-muted);margin:0 0 var(--space-4)}
.hv .warn,#modal .warn{font-size:13.5px;line-height:1.55;color:var(--color-ink);background:var(--color-surface);
  border:var(--border);border-left:4px solid var(--color-attention);border-radius:var(--radius-control);
  padding:11px 14px;margin:0 0 20px}
.hv .error,#modal .error{color:var(--color-danger);font-size:var(--text-sm);font-weight:600}
.hv .text-button,#modal .text-button{background:none;border:0;padding:4px 0;font:inherit;font-size:var(--text-sm);
  font-weight:600;color:var(--color-brand);cursor:pointer}
.hv .text-button:hover,#modal .text-button:hover{text-decoration:underline}

/* buttons: primary is the site's .go, secondary its .chip */
.hv .primary,#modal .primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--color-brand);color:#fff;border:var(--border);border-radius:var(--radius-control);
  padding:var(--space-3) var(--space-6);min-height:44px;font:inherit;font-size:var(--text-md);font-weight:700;line-height:1.2;
  box-shadow:var(--shadow-offset-sm);cursor:pointer;
  transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}
.hv .primary:hover,#modal .primary:hover{background:var(--color-brand-strong)}
.hv .primary:active,#modal .primary:active{transform:translate(2px,2px);box-shadow:none}
.hv .secondary,#modal .secondary,
.hv .actions>.text-button,#modal .actions>.text-button,
.hv .row .text-button{display:inline-flex;align-items:center;gap:6px;background:var(--color-surface);
  border:var(--border-subtle);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);min-height:40px;
  font:inherit;font-size:var(--text-sm);font-weight:600;color:var(--color-muted);cursor:pointer;text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
.hv .secondary:hover,#modal .secondary:hover,
.hv .actions>.text-button:hover,#modal .actions>.text-button:hover,
.hv .row .text-button:hover{color:var(--color-ink);border-color:var(--color-ink);text-decoration:none}

.hv .actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:var(--border-subtle)}
.hv .actions-start{justify-content:flex-start}
.hv .actions .time{margin-left:auto;font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-muted)}

/* ── step 1: the questionnaire entry, the document tiles, the state ────── */
/* the questionnaire is the easiest way in, so it carries the logo's colours */
.guide-entry{display:flex;gap:14px;align-items:flex-start;padding:18px;margin:0 0 20px;
  border:2px solid var(--color-logo);border-radius:var(--radius-control);
  background:color-mix(in srgb,var(--color-logo) 8%,var(--color-surface));box-shadow:var(--shadow-offset-sm)}
.guide-symbol{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border:0;border-radius:var(--radius-control);background:linear-gradient(135deg,var(--color-logo),var(--color-logo-2));color:var(--color-on-logo)}
.guide-entry h3{font-size:var(--text-md);font-weight:700;letter-spacing:-.01em;line-height:1.35;margin:0}
.guide-entry p{font-size:var(--text-sm);line-height:1.6;color:var(--color-ink);margin:4px 0 12px}
.hv .guide-entry .secondary{background:linear-gradient(135deg,var(--color-logo),var(--color-logo-2));color:var(--color-on-logo);
  border:var(--border);padding:var(--space-3) var(--space-6);min-height:44px;font-size:var(--text-md);font-weight:700;
  box-shadow:var(--shadow-offset-sm);transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),filter var(--duration-fast) var(--ease-out)}
.hv .guide-entry .secondary:hover{color:var(--color-on-logo);border-color:var(--color-ink);filter:saturate(1.15) brightness(1.04)}
.hv .guide-entry .secondary:active{transform:translate(2px,2px);box-shadow:none}

.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.choice{display:grid;grid-template-columns:18px 18px minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:center;
  background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-control);
  padding:12px 16px;min-height:44px;cursor:pointer;
  transition:border-color var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}
.choice:hover{border-color:var(--color-muted)}
.choice:has(input:checked){border-color:var(--color-ink);background:var(--color-raised)}
.choice input{grid-column:1;grid-row:1;width:18px;height:18px;margin:0;accent-color:var(--color-brand)}
.choice-icon{grid-column:2;grid-row:1;display:grid;place-items:center;width:18px;height:18px;color:var(--color-ink)}
.choice strong{grid-column:3;grid-row:1;font-size:var(--text-sm);font-weight:700;line-height:1.35}
.choice p{grid-column:2 / -1;grid-row:2;margin:0;font-size:var(--text-xs);line-height:1.5;color:var(--color-muted)}
.choices+.text-button{display:inline-block;margin-top:14px}

.state-row{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-6);align-items:end;
  border-top:var(--border-subtle);margin-top:var(--space-6);padding-top:20px}
.state-row .section-heading{font-size:var(--text-md);font-weight:700;letter-spacing:-.01em}

/* ── fields ────────────────────────────────────────────────────────────── */
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.full{grid-column:1 / -1}
.hv label.field,#modal label.field{display:grid;gap:4px;flex:none;min-width:0;
  font-size:var(--text-sm);font-weight:600;line-height:1.6}
.hv .field :is(input,select,textarea),#modal .field :is(input,select,textarea){font-weight:450}
.hv .field textarea,#modal .field textarea{min-height:120px}
.hv .field small,#modal .field small{font-size:12px;font-weight:450;line-height:1.5;color:var(--color-muted)}

/* ── lists: beneficiaries, assets, packet documents ────────────────────── */
.hv #screen .row,#modal .row{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-3);
  flex-wrap:nowrap;margin:0;padding:12px 4px;border-bottom:var(--border-subtle)}
.hv #screen .row>div:first-child,#modal .row>div:first-child{flex:1 1 auto;min-width:0;font-size:var(--text-sm);font-weight:600}
.hv #screen .row>div:last-child:not(:first-child){display:flex;align-items:center;justify-content:flex-end;gap:8px;
  flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--text-sm)}
.hv .row small,#modal .row small{display:block;margin-top:2px;font-size:11.5px;font-weight:450;line-height:1.5;color:var(--color-muted)}
.hv .row strong{font-weight:600}
/* the site's indexed-row device: a lime square carrying the item number */
#beneficiaries,#screen .card{counter-reset:hvrow}
#beneficiaries>.row::before,#screen .card>.row::before{counter-increment:hvrow;content:counter(hvrow,decimal-leading-zero);
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border:var(--border);
  background:var(--color-local);color:var(--color-on-local);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600}
#beneficiaries,#screen .card>.row:not(.row+.row){border-top:var(--border-subtle)}
#add-beneficiary{margin-top:12px}

/* summaries: the asset total reads as an instrument, open items as a panel */
.hv .summary,#modal .summary{background:var(--color-raised);border:var(--border-subtle);border-radius:var(--radius-control);
  padding:16px 18px;margin:0 0 20px}
.summary>span.hint:first-child{display:block;margin:0;font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.13em}
.summary>span.hint:first-child+br{display:none}
.summary>br+strong{display:block;margin:6px 0 2px;font-family:var(--font-mono);font-weight:500;font-size:32px;letter-spacing:-.035em;line-height:1.1}
.hv .summary:has(>ul){background:var(--color-surface);border:var(--border);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-offset);padding:20px 22px;margin:18px 0 16px}
.summary>strong:first-child{display:block;font-weight:750;letter-spacing:-.03em;line-height:1.2}
.summary ul{margin:10px 0 0;padding-left:20px}

.hv .tag,#modal .tag{display:inline-block;position:static;background:none;
  font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-attention-text);border:1px solid var(--color-attention);border-radius:4px;padding:0 6px;line-height:18px}

.hv details.guide-summary{margin:12px 0;border:var(--border-subtle);border-radius:var(--radius-panel);
  background:var(--color-surface);padding:10px 14px}
.guide-summary summary,.guide-sources summary{cursor:pointer;font-size:var(--text-sm);font-weight:700}
.guide-summary[open]>summary{margin-bottom:10px}
.trust-section{margin-top:28px;padding-top:24px;border-top:var(--border-subtle)}
.trust-section>.fields{margin-top:18px}

/* ── dialogs ───────────────────────────────────────────────────────────── */
#modal{width:min(680px,calc(100vw - 32px));max-width:680px;max-height:90vh;overflow-y:auto;
  background:var(--color-surface);color:var(--color-ink);border:var(--border);border-radius:var(--radius-panel);
  box-shadow:var(--shadow-offset);padding:24px 26px}
#modal::backdrop{background:rgba(24,26,23,.48)}
#modal .close{float:right;display:grid;place-items:center;width:34px;height:34px;margin:-4px -6px 0 12px;
  background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-control);
  color:var(--color-muted);font:inherit;font-size:20px;line-height:1;cursor:pointer}
#modal .close:hover{color:var(--color-ink);border-color:var(--color-ink)}
#modal h2{font-size:28px;letter-spacing:-.04em;line-height:1.1;margin:10px 0 8px}
#modal h3{font-size:var(--text-lg);margin:22px 0 6px}
#modal p,#modal li{font-size:var(--text-sm);line-height:1.6}
#modal .eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--color-muted);margin:0}
#modal .actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin:22px 0 0}
#modal .actions:not(:has(>.text-button)){justify-content:flex-start}
#modal .document{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:16px;padding:20px 22px;
  font-family:var(--font-mono);font-size:13px;line-height:1.7;
  background:var(--color-raised);border:var(--border-subtle);border-radius:var(--radius-control)}
#modal details{margin-top:14px}
#modal details textarea{margin-top:8px;padding:12px;border:var(--border-subtle);border-radius:var(--radius-control);
  background:var(--color-raised);color:var(--color-ink);font-family:var(--font-mono);font-size:13px}

.guide-fields{display:grid;gap:18px;margin:16px 0}
.guide-explanation{font-size:13.5px;line-height:1.55;background:var(--color-surface);border:var(--border);
  border-left:4px solid var(--color-brand);border-radius:var(--radius-control);padding:11px 14px}
.guide-documents{display:flex;flex-direction:column;gap:var(--space-2)}
.guide-document{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;cursor:pointer;
  background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-control)}
.guide-document:has(input:checked){border-color:var(--color-ink);background:var(--color-raised)}
.guide-document input{width:18px;height:18px;margin:2px 0 0;flex:0 0 auto;accent-color:var(--color-brand)}
.guide-document strong{display:block;font-size:var(--text-sm);font-weight:700}
.guide-document small{display:block;margin-top:2px;font-size:13px;line-height:1.55;color:var(--color-muted)}
.guide-tasks{list-style:none;padding:0;margin:8px 0 0;border-top:var(--border-subtle)}
.guide-tasks li{padding:12px 0;border-bottom:var(--border-subtle)}
.guide-tasks strong{font-size:var(--text-sm);font-weight:700}
.guide-tasks .tag{margin-left:8px}
.guide-tasks p{margin:4px 0 0;font-size:13px;color:var(--color-muted)}
.guide-sources{margin:16px 0;font-size:13px;color:var(--color-muted)}
.guide-dialog [tabindex="-1"]:focus{outline:none}

.trust-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:18px 0}
.trust-options section{padding:14px 16px;background:var(--color-surface);border:var(--border-subtle);border-radius:var(--radius-control)}
.trust-options h3{font-size:15px;margin:0 0 6px}
.trust-options p{margin:0;color:var(--color-muted)}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;display:none;
  background:var(--color-ink);color:var(--color-canvas);border-radius:var(--radius-control);
  padding:10px 16px;font-size:var(--text-sm);font-weight:600;max-width:calc(100vw - 32px)}

/* ── privacy panel under the plan ─────────────────────────────────────── */
.hv-privacy{margin:16px 0;padding:15px 17px;background:var(--color-surface);border:var(--border);
  border-radius:var(--radius-panel);box-shadow:var(--shadow-offset)}
.hv-runs{display:flex;gap:9px;align-items:flex-start;margin:0 0 11px;font-size:13px;line-height:1.55}
.hv-runs svg{flex:none;margin-top:3px;color:var(--color-brand)}
.hv-savebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:11px;border-top:var(--border-subtle)}
.hv-fine{flex:1 1 260px;margin:0;font-size:11.5px;line-height:1.5;color:var(--color-muted)}

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width:900px){.choices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  #nav button{font-size:var(--text-xs);padding:var(--space-2)}
  .choices,.fields,.trust-options{grid-template-columns:minmax(0,1fr)}
  .state-row{grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
  .guide-symbol{display:none}
  .hv .actions-start .primary{width:100%}
  .hv .actions .time{margin-left:0}
  .hv #screen .row{flex-wrap:wrap}
  .hv-privacy{box-shadow:var(--shadow-offset-sm)}
  #modal{padding:18px}
}

/* ── print: only the plan ─────────────────────────────────────────────── */
@media print{
  header,footer,.hero,.crumb,.hv-top,#nav,.hv-flow,.hv-privacy,.actions,.no-print{display:none!important}
  body{background:#fff}
  .hv-panel{border:0;box-shadow:none;padding:0;background:none}
}