/* ============================================================
   NAVAAL — shared styles for the free tools (loaded after
   /assets/tokens.css on every /tools page and /tools itself).
   Owns: the brand lockup rule that used to be pasted inline on
   every tool page, the reusable Bilby CTA card, the invoice
   workspace's mobile behaviour, and the print stylesheet.
   Vocabulary stays the site's own: .sheet .tile .t .st .btn .f .grid
   ============================================================ */

/* ---- brand lockup (was <style id="brand-lockup"> on each page) ---- */
.brand{gap:9px}.brand .mk{width:26px;height:26px;display:block}.brand .wm{height:22px;width:auto;display:block}.brand .mk-cream,.brand .wm-cream{display:none}.nav:not(.scrolled) .brand .mk-ink,.nav:not(.scrolled) .brand .wm-ink,[data-theme="dark"] .brand .mk-ink,[data-theme="dark"] .brand .wm-ink{display:none}.nav:not(.scrolled) .brand .mk-cream,.nav:not(.scrolled) .brand .wm-cream,[data-theme="dark"] .brand .mk-cream,[data-theme="dark"] .brand .wm-cream{display:block}.nav.scrolled .brand .mk-cream,.nav.scrolled .brand .wm-cream{display:none}.nav.scrolled .brand .mk-ink,.nav.scrolled .brand .wm-ink{display:block}[data-theme="dark"] .nav.scrolled .brand .mk-ink,[data-theme="dark"] .nav.scrolled .brand .wm-ink{display:none}[data-theme="dark"] .nav.scrolled .brand .mk-cream,[data-theme="dark"] .nav.scrolled .brand .wm-cream{display:block}.footer .brand .mk,.footer .brand .wm{display:block}.bilby-peek img{width:100%;height:100%;display:block}

/* ---- the Bilby CTA card: one per tool, placed where the user just got value ---- */
.nv-cta{display:flex;justify-content:space-between;align-items:center;gap:18px 24px;flex-wrap:wrap;margin-top:20px;padding:22px 24px;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-card);box-shadow:var(--sh-sm)}
.nv-cta-body{flex:1 1 380px;min-width:0}
.nv-cta-k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--label);margin:0 0 6px}
.nv-cta h3{font-family:var(--display);font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0}
.nv-cta p.nv-cta-d{font-size:15px;line-height:1.55;color:var(--ink-2);margin:6px 0 0;max-width:60ch}
.nv-cta-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;flex-shrink:0}
.nv-cta-act .nv-cta-sub{font-size:12.5px;color:var(--label);flex-basis:100%}
@media(max-width:600px){.nv-cta{padding:18px}.nv-cta-act{width:100%}.nv-cta-act .btn{flex:1 1 auto;justify-content:center}}

/* ---- styled file input + logo row (all invoice tools) ---- */
.file-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.file-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px dashed var(--border);border-radius:10px;background:var(--wash);font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;max-width:100%}
.file-btn:hover{border-color:var(--accent-fill);color:var(--accent-fill)}
.file-btn:focus-within{outline:3px solid var(--product-ring,rgba(79,93,255,.4));outline-offset:2px}
.file-btn input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.file-btn .fn{font-weight:500;color:var(--label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.logo-rm{display:none;background:none;border:none;color:var(--label);font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:2px;min-height:32px}
.logo-rm.on{display:inline-block}.logo-rm:hover{color:var(--fail)}
.f-hint{font-size:12px;color:var(--label);margin-top:4px}

/* "(optional)" lives in the label, never only in the placeholder — a placeholder vanishes the moment someone
   types (Baymard; GOV.UK text-input). Written by scripts/form-ux-lint.cjs --fix, 8 Sep 2026. */
.f-label .f-opt{font-weight:400;color:var(--label)}
.f-err{color:var(--fail);font-size:12.5px;line-height:1.4;margin-top:5px}
.f-input[aria-invalid="true"]{border-color:var(--fail);box-shadow:0 0 0 3px var(--fail-bg)}
/* ---- due-date chips + optional-field rows ---- */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{min-height:30px;padding:0 10px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.chip:hover{border-color:var(--accent-fill);color:var(--accent-fill)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper,#fff)}
.item-grid.has-unit{grid-template-columns:1fr 74px 84px 110px}
#a4 .parties{display:flex;gap:14mm;flex-wrap:wrap}
#a4 .parties .billto{flex:1 1 55mm}

/* ---- quota / save messages ---- */
.draft-note.warn{background:#FFFAEB;border-color:rgba(180,83,9,.35)}

/* ---- mobile workspace (<=768px): Edit / Preview toggle + sticky bar ---- */
.mbar{display:none}
@media(max-width:768px){
  .ws{display:block}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);box-shadow:0 -6px 20px rgb(28 25 23/.08)}
  .mbar .seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;flex:1 1 auto}
  .mbar .seg button{flex:1;min-height:44px;padding:0 12px;background:var(--card);border:none;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
  .mbar .seg button+button{border-left:1px solid var(--border)}
  .mbar .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper,#fff)}
  .mbar .btn{min-height:44px;flex:0 0 auto}
  body.has-mbar{padding-bottom:76px}
  body[data-mview="edit"] .prevwrap{display:none}
  body[data-mview="preview"] .formcol{display:none}
  body[data-mview="preview"] .comp{display:none}
  /* readable preview: the sheet reflows to the phone instead of shrinking to 42% */
  body[data-mview="preview"] .prev-scroll{padding:8px}
  body[data-mview="preview"] #a4{zoom:1!important;width:auto;min-height:0;padding:18px 16px;font-size:10.5pt}
  body[data-mview="preview"] #a4 .inv-head{flex-wrap:wrap;gap:4mm}
  body[data-mview="preview"] #a4 .metagrid{gap:5mm 8mm}
  body[data-mview="preview"] #a4 table.items{font-size:10pt}
  body[data-mview="preview"] #a4 table.items th,body[data-mview="preview"] #a4 table.items td{padding:2mm 1.2mm}
  body[data-mview="preview"] #a4 .totals{width:100%}
  body[data-mview="preview"] .prev-cap{display:block;font-size:12px;color:var(--label);margin:8px 2px 0}
  /* items editor as cards */
  .item-row{padding:14px;border-radius:12px;background:var(--card)}
  .item-grid,.item-grid.has-unit{grid-template-columns:1fr 1fr}
  .item-grid>div:first-child{grid-column:1/-1}
  .item-foot{justify-content:space-between}
  .actions .btn{flex:1 1 calc(50% - 10px);justify-content:center}
}
.prev-cap{display:none}

/* ---- print: the sheet flows normally, app chrome hidden by class ---- */
@media print{
  header,.nav,.mpanel,.skip,.footer,.thero,.comp,.formcol,.actions,.mbar,.draft-note,.nv-cta,.tsec,.cta-row,.faq,.tsec-grid,.prev-cap,#bulk,.priv-line,.sec-head,.hero-mesh,.hero-grid{display:none!important}
  body{background:#fff!important;margin:0;padding:0;color:#1C1917}
  main,section,.wrap,.ws,.prevwrap,.prev-scroll{display:block!important;position:static!important;padding:0!important;margin:0!important;max-width:none!important;border:0!important;box-shadow:none!important;background:#fff!important;overflow:visible!important}
  #a4{zoom:1!important;width:auto!important;min-height:0!important;margin:0!important;padding:0!important;box-shadow:none!important;border:0!important}
  #a4 .inv-rule{background:none!important;border-bottom:1.5px solid #1C1917;height:0!important;margin:4mm 0 6mm}
  #a4 table.items{page-break-inside:auto}
  #a4 table.items thead{display:table-header-group}
  #a4 table.items tr{break-inside:avoid;page-break-inside:avoid}
  #a4 .totals,#a4 .payblock{break-inside:avoid;page-break-inside:avoid}
  @page{margin:16mm 15mm 18mm}
  @page{@bottom-right{content:"Page " counter(page) " of " counter(pages);font-family:Inter,Helvetica,Arial,sans-serif;font-size:8pt;color:#6E675F}}
}

/* ---- action-row notes ---- */
.act-note.warn{color:var(--amber,#B45309)}
@media(max-width:768px){
  .mbar .btn.is-off{opacity:.55}
  /* wide item tables (EU/UK/CA have 5-6 columns) scroll inside the sheet instead of clipping */
  body[data-mview="preview"] #a4 table.items{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  body[data-mview="preview"] #a4 table.items td:first-child{min-width:34vw}
}