/* ============================================================================
   Arete Care — New Employee Onboarding (letterhead HTML forms)
   Screen: a soft workspace with the documents rendered as Arete letterhead
   "sheets". Print: those same sheets become the downloaded PDF (banner +
   watermark repeat on every page), one file for all documents.
   ============================================================================ */
:root{
    --purple:#8b7ff0;          /* banner wave */
    --purple-deep:#5b4b9e;     /* headings */
    --purple-ink:#3d3a7a;
    --teal:#3fb7ad;
    --teal-deep:#2c8f87;
    --ink:#2b2a44;
    --muted:#6f6b86;
    --line:#e5e3ef;
    --field:#eef1fb;           /* fill-in tint */
    --field-focus:#e3e8ff;
    /* "you must type here" affordance — screen only, never printed */
    --fill:rgba(58,156,163,.15);
    --fill-line:rgba(44,143,135,.45);
    --fill-hover:rgba(58,156,163,.26);
    --fill-focus:rgba(58,156,163,.34);
    --page:#eceaf4;
    --sheet-w:794px;           /* A4 width @96dpi (210mm) */
    --mgn:72px;                /* side margin */
    --band:108px;              /* space reserved for the banner */
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
    font-family:"Segoe UI", system-ui, Arial, sans-serif;
    color:var(--ink);
    background:
        radial-gradient(1100px 500px at 100% -10%, #efe9fb, transparent 60%),
        radial-gradient(900px 460px at -5% 5%, #e3f6f4, transparent 60%),
        var(--page);
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
}

/* ===================== SEND TO HR ===================== */
.btn-send{
    padding:11px 20px; font-size:14px; font-weight:800; color:#fff;
    background:linear-gradient(120deg, var(--teal), var(--teal-deep));
    box-shadow:0 6px 16px rgba(63,183,173,.32);
}
.btn-send:hover{ filter:brightness(1.05); }
.btn-send:disabled{ background:#bcd8d5; box-shadow:none; cursor:not-allowed; }
.send-status{ width:100%; margin:8px 0 0; font-size:13px; font-weight:700; color:var(--muted); }
.send-status--ok{ color:var(--teal-deep); }
.send-status--err{ color:var(--danger); }

/* ---- Export mode: the clone html2canvas rasterises for the emailed PDF.
        Strip the on-screen affordances so it matches the printed look. ---- */
.exporting .sheet{ box-shadow:none !important; }
.exporting .f, .exporting .ta, .exporting .ato-f, .exporting .ato-comb-input,
.exporting .ato-tick, .exporting .sig-slot{ background:transparent !important; box-shadow:none !important; }
.exporting .ato-comb-cells span.caret{ background:transparent !important; box-shadow:none !important; }
.exporting .sig-slot:not(.filled){ color:transparent !important; }
.exporting .export-text{ color:#000; }

/* ===================== PRIVACY NOTICE GATE (screen only) ===================== */
.privacy-gate{
    position:fixed; inset:0; z-index:1000;
    display:flex; align-items:center; justify-content:center; padding:20px;
    background:rgba(43,42,68,.6); backdrop-filter:blur(4px);
}
.privacy-gate.hidden{ display:none; }
body.gated{ overflow:hidden; }
.privacy-card{
    background:#fff; width:100%; max-width:640px; max-height:92vh; overflow-y:auto;
    border-radius:18px; box-shadow:0 30px 90px rgba(43,42,68,.45);
    padding:30px 34px 26px;
}
.privacy-logo{ height:48px; display:block; margin:0 auto 10px; }
#privacyTitle{ text-align:center; color:var(--purple-deep); font-size:23px; font-weight:800; margin:0; }
.privacy-sub{ text-align:center; color:var(--muted); font-size:13px; margin:4px 0 16px; }
.privacy-body{ font-size:13.4px; line-height:1.55; color:#34314f; }
.privacy-body h3{ font-size:13.5px; color:var(--purple-ink); margin:16px 0 6px; }
.privacy-body ul{ margin:6px 0 12px; padding-left:20px; }
.privacy-body li{ margin-bottom:7px; }
.privacy-consent-note{ margin-top:14px; padding:12px 14px; border-radius:10px;
    background:var(--fill); box-shadow:inset 0 0 0 1px var(--fill-line); font-size:13px; }
.privacy-card .btn-primary{ display:block; width:100%; margin-top:18px; padding:14px; font-size:15px; }

/* ===================== TOP TOOLBAR (screen only) ===================== */
.toolbar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    padding:12px 22px;
    background:rgba(255,255,255,.86); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.tb-brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.tb-brand img{ height:40px; }
.tb-brand strong{ font-size:16px; color:var(--purple-deep); display:block; line-height:1.1; }
.tb-brand span{ font-size:12px; color:var(--muted); }

.tb-field{ display:flex; flex-direction:column; gap:3px; }
.tb-field label{ font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--purple-deep); }
.tb-field input{
    min-width:190px; padding:8px 11px; font:inherit;
    border:1.5px solid #d5d2e6; border-radius:9px; background:#fff; color:var(--ink);
}
.tb-field input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,127,240,.2); }

.tb-sign{ display:flex; flex-direction:column; gap:3px; }
.tb-sign label{ font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--purple-deep); }
.tb-sign-row{ display:flex; align-items:stretch; gap:8px; }
#sigPad{ width:210px; height:60px; border:1.5px solid #d5d2e6; border-radius:9px; background:#fff; touch-action:none; }
.tb-sign-btns{ display:flex; flex-direction:column; gap:5px; }

button{ font:inherit; cursor:pointer; border:0; border-radius:9px; font-weight:700; }
.btn-sm{ padding:6px 10px; font-size:12px; background:#eef0f7; color:#54506e; }
.btn-sm:hover{ background:#e4e7f2; }
.btn-primary{
    padding:11px 20px; font-size:14px; font-weight:800; color:#fff;
    background:linear-gradient(120deg, var(--purple), #7a6fe0);
    box-shadow:0 6px 16px rgba(123,111,224,.32);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:disabled{ background:#c8c4dc; box-shadow:none; cursor:not-allowed; }

/* document quick-nav */
.docnav{ display:flex; gap:8px; padding:10px 22px 0; flex-wrap:wrap; }
.docnav a{
    text-decoration:none; font-size:13px; font-weight:700; color:var(--purple-deep);
    padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--line);
}
.docnav a:hover{ background:var(--field); }

/* ===================== SHEETS (screen) ===================== */
.sheets{ padding:22px 16px 60px; display:flex; flex-direction:column; align-items:center; gap:26px; }

.sheet{
    position:relative; width:var(--sheet-w); min-height:1123px;   /* A4 height @96dpi (297mm) */
    background:#fff; border-radius:5px; overflow:hidden;
    box-shadow:0 18px 46px rgba(60,48,110,.18);
}
.doc{ width:100%; border-collapse:collapse; }
.banner-cell{ padding:0; }
.sheet-banner{ width:100%; display:block; }
.doc-cell{ padding:14px var(--mgn) 64px; vertical-align:top; }
.sheet-mark{
    position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
    width:58%; opacity:.06; pointer-events:none; user-select:none; z-index:0;
}
.sheet-body{ position:relative; z-index:1; }

/* ===================== DOCUMENT TYPOGRAPHY ===================== */
.doc-title{
    font-size:25px; color:var(--purple-deep); font-weight:800; letter-spacing:.2px;
    margin:0 0 16px; padding-bottom:10px; border-bottom:2px solid #ece8f8; position:relative;
}
.doc-title::after{ content:""; position:absolute; left:0; bottom:-2px; width:66px; height:2px; background:linear-gradient(90deg,var(--purple),var(--teal)); }
.doc-h2{
    font-size:15px; font-weight:800; color:var(--purple-ink); line-height:1.25;
    margin:24px 0 10px; padding-left:11px; border-left:3px solid var(--teal);
}
.sheet-body p{ font-size:13px; line-height:1.55; margin:0 0 11px; color:#34314f; }
.sheet-body ol.legal{ margin:0 0 12px; padding-left:26px; }
.sheet-body ol.legal li{ font-size:13.2px; line-height:1.5; margin-bottom:8px; }
.sheet-body ul.bullets{ margin:0 0 12px; padding-left:22px; }
.sheet-body ul.bullets li{ font-size:12.8px; line-height:1.45; margin-bottom:5px; }
.signblock{ margin-top:26px; }
.signblock p{ font-size:13.5px; }
.small{ font-size:12px; color:var(--muted); }

/* fill-in inputs (inline) */
.f{
    font-family:inherit; font-size:13.2px; color:var(--purple-ink); font-weight:600;
    border:0; background:var(--fill); box-shadow:inset 0 0 0 1px var(--fill-line);
    border-radius:3px; padding:2px 8px; min-width:120px;
}
.f:hover{ background:var(--fill-hover); }
.f:focus{ outline:none; background:var(--fill-focus); box-shadow:inset 0 0 0 1.5px var(--teal-deep); }
.f.grow{ width:100%; }
.f.mid{ width:260px; }
.f.name-inline{ width:340px; }
/* free-text fields are auto-growing textareas so long content WRAPS instead of clipping */
textarea.f{
    display:block; width:100%; min-width:0; resize:none; overflow:hidden;
    white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
    line-height:1.4; height:25px; min-height:25px; vertical-align:top;
}

/* two-column label/field rows (e.g. Employee Name / Signature / Date) */
.rowgrid{ display:grid; grid-template-columns:170px 1fr; gap:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:8px 0 4px; }
.rowgrid .cell-l{ background:#f6f5fc; font-weight:700; font-size:13px; color:var(--purple-ink); padding:11px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.rowgrid .cell-r{ padding:8px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; }
.rowgrid .cell-l:last-of-type, .rowgrid .cell-r:last-child{ border-bottom:0; }
.rowgrid .f{ width:100%; }

/* acknowledgement checkbox line — custom control (real elements, prints reliably) */
.ack{ display:flex; align-items:flex-start; gap:12px; margin:14px 0; cursor:pointer; }
.ack input{ position:absolute; width:0; height:0; opacity:0; }
.ack .cbox{
    flex:none; width:22px; height:22px; margin-top:1px;
    border:1.8px solid var(--purple); border-radius:6px; background:#fff;
    display:inline-flex; align-items:center; justify-content:center;
}
.ack .cbox::after{
    content:""; width:6px; height:11px; margin-top:-2px;
    border:solid var(--teal-deep); border-width:0 2.6px 2.6px 0;
    transform:rotate(45deg); opacity:0;
}
.ack input:checked + .cbox{ border-color:var(--teal-deep); background:#e9faf7; }
.ack input:checked + .cbox::after{ opacity:1; }
.ack input:focus-visible + .cbox{ box-shadow:0 0 0 3px rgba(139,127,240,.32); }
.ack .cbtxt{ font-size:13.2px; line-height:1.5; }

/* signature slot */
.sig-slot{
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; height:56px; background:var(--fill); box-shadow:inset 0 0 0 1px var(--fill-line);
    border-radius:3px; color:var(--teal-deep); font-size:12px; font-style:italic;
}
.sig-slot:not(.filled):hover{ background:var(--fill-hover); }
.sig-slot img{ max-width:100%; max-height:52px; }
.sig-slot.filled{ background:transparent; box-shadow:none; }

/* section note (Arete-completed, not the employee's to fill) */
.arete-note{ font-size:11.5px; color:var(--muted); font-style:italic; margin:2px 0 8px; }

/* ---------- Details-form components ---------- */
.fsec{ border:1px solid var(--line); border-radius:11px; overflow:hidden; margin:12px 0 20px; }
.fsec-head{ background:linear-gradient(120deg,#efeafb,#e6f5f3); color:var(--purple-deep); font-weight:800; font-size:13.5px; letter-spacing:.2px; padding:10px 15px; border-bottom:1px solid var(--line); border-left:4px solid var(--purple); }
.fgrid{ display:grid; grid-template-columns:170px 1fr; }
.fgrid.two{ grid-template-columns:150px 1fr 140px 1fr; }
.fgrid .fk{ padding:7px 14px; font-size:12.6px; font-weight:700; color:var(--purple-ink); background:#faf9fe; border-top:1px solid var(--line); display:flex; align-items:center; }
.fgrid .fv{ padding:4px 12px; border-top:1px solid var(--line); display:flex; align-items:center; }
.fgrid > .fk:first-child, .fgrid > .fk:first-child ~ .fv:nth-child(2), .fgrid.two > *:nth-child(-n+4){ border-top:0; }
.fgrid .f{ width:100%; }
.fnote{ font-size:11px; color:var(--muted); }

/* Yes/No (and choice) question rows */
.qrow{ display:flex; align-items:flex-start; gap:14px; padding:7px 2px; border-bottom:1px dashed var(--line); }
.qrow:last-child{ border-bottom:0; }
.qrow .q{ flex:1; font-size:12.8px; line-height:1.35; }
.opts{ display:flex; gap:14px; flex:none; }
.opt{ display:inline-flex; align-items:center; gap:6px; font-size:12.6px; font-weight:700; color:var(--purple-ink); white-space:nowrap; cursor:pointer; }
/* custom radio (background-drawn, prints reliably) */
.opt input[type=radio]{
    appearance:none; -webkit-appearance:none; margin:0;
    width:16px; height:16px; flex:none; border:1.7px solid var(--purple);
    border-radius:50%; background:#fff;
}
.opt input[type=radio]:checked{
    border-color:var(--teal-deep);
    background:radial-gradient(circle at center, var(--teal-deep) 0 42%, #fff 47%);
}
.opt input[type=radio]:focus-visible{ box-shadow:0 0 0 3px rgba(139,127,240,.32); }

/* free-text areas */
.ta{ width:100%; min-height:50px; font-family:inherit; font-size:12.8px; color:var(--purple-ink); border:1px solid var(--fill-line); border-radius:8px; background:var(--fill); padding:7px 10px; resize:none; overflow:hidden; }
.ta:hover{ background:var(--fill-hover); }
.ta:focus{ outline:none; border-color:var(--teal-deep); background:var(--fill-focus); }
.ta::placeholder{ color:var(--muted); font-style:italic; }
.qhead{ font-size:12.8px; font-weight:700; color:var(--purple-ink); margin:14px 0 5px; }

/* grid tables (availability, referees, employment dates) */
table.grid{ width:100%; border-collapse:collapse; margin:6px 0 16px; break-inside:avoid; }
table.grid th{ background:#efeafb; color:var(--purple-deep); font-size:11.5px; font-weight:800; padding:7px 9px; border:1px solid var(--line); text-align:left; }
table.grid td{ border:1px solid var(--line); padding:3px 7px; vertical-align:middle; }
table.grid td.lbl{ background:#faf9fe; font-weight:700; font-size:12.4px; color:var(--purple-ink); white-space:nowrap; }
table.grid .f{ width:100%; }

/* employment history block */
.job{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:0 0 14px; break-inside:avoid; }
.job h4{ margin:0 0 8px; font-size:13px; color:var(--purple-deep); }
.daterow{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.6px; }
.daterow .f{ width:120px; }

/* ---------- Official ATO form pages (real PDF rendered + field overlays) ---------- */
.sheet--pdf{ padding:0; overflow:hidden; display:flex; align-items:flex-start; justify-content:center; }
.pdfpage{ position:relative; width:100%; line-height:0; }
.pdfpage canvas{ width:100%; height:auto; display:block; }

/* fill-in field on an ATO form */
.ato-f{
    position:absolute; box-sizing:border-box; margin:0;
    border:0; border-radius:2px; background:var(--fill);
    box-shadow:inset 0 0 0 1px var(--fill-line);
    color:#11253f; font-family:inherit; font-weight:600;
    font-size:clamp(7px, 1.35vw, 12px); line-height:1; padding:0 3px;
}
.ato-f:hover{ background:var(--fill-hover); }
.ato-f:focus{ outline:none; background:var(--fill-focus); box-shadow:inset 0 0 0 1.5px var(--teal-deep); }

/* comb field: one character per box the form draws.
   The transparent input takes the typing; the cells render the characters. */
.ato-comb{ position:absolute; }
.ato-comb-input{
    position:absolute; inset:0; width:100%; height:100%;
    margin:0; padding:0; border:0; border-radius:2px;
    background:var(--fill); box-shadow:inset 0 0 0 1px var(--fill-line);
    color:transparent; caret-color:transparent;
    font: inherit; letter-spacing:0;
}
/* the box you're typing into */
.ato-comb-cells span.caret{ background:rgba(58,156,163,.42); border-radius:2px; box-shadow:inset 0 0 0 1.4px var(--teal-deep); }
.ato-comb-input:hover{ background:var(--fill-hover); }
.ato-comb-input:focus{ outline:none; background:var(--fill-focus); box-shadow:inset 0 0 0 1.5px var(--teal-deep); }
.ato-comb-cells{ position:absolute; inset:0; pointer-events:none; }
.ato-comb-cells span{
    position:absolute; top:0; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-family:"Courier New", monospace; font-weight:600; color:#11253f; line-height:1;
}

/* clickable tick sitting on the form's own box: invisible until ticked */
.ato-tick{
    position:absolute; padding:0; min-height:0; display:grid; place-items:center;
    border:0; border-radius:2px; background:var(--fill);
    box-shadow:inset 0 0 0 1px var(--fill-line); cursor:pointer;
    line-height:0; transition:background .12s;
}
.ato-tick::before{ content:"\2713"; font-weight:900; color:transparent; font-size:clamp(8px, 1.5vw, 14px); }
.ato-tick:hover{ background:var(--fill-hover); }
.ato-tick.checked{ background:transparent; box-shadow:none; }
.ato-tick.checked::before{ color:#0f2d3a; }

/* signature drop area on an ATO form */
.ato-sig{ position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.ato-sig img{ max-width:100%; max-height:100%; object-fit:contain; }
.ato-sig.hidden{ display:none; }

/* ===================== PRINT: the downloaded PDF ===================== */
#print-frame{ display:none; }

@media print{
    /* Small page margins; the banner sits in each document's <thead>, which the
       browser repeats at the top of every printed page, reserving its own space. */
    /* No page margins: the letterhead banner bleeds to the page edge (as in the
       source template) and the ATO form pages can occupy the full A4 sheet.
       Arete side/bottom margins are handled by .doc-cell padding below. */
    @page{ size:A4; margin:0; }

    body{ background:#fff; }
    .toolbar, .docnav, .no-print, .privacy-gate{ display:none !important; }

    .sheets{ padding:0; gap:0; }
    .sheet{
        width:auto; box-shadow:none; border-radius:0;
        overflow:visible; break-before:page;
    }
    .sheet:first-of-type{ break-before:auto; }
    /* each Arete sheet is exactly one page, so keep it near page height so the
       watermark sits mid-page (must stay under the printable area to avoid spill) */
    .sheet:not(.sheet--pdf){ min-height:980px; }
    .sheet-mark{ display:block; }                /* per-sheet watermark (Arete pages only) */
    .doc{ width:100%; }
    thead{ display:table-header-group; }         /* repeat the banner on every page */
    .doc-cell{ padding:10px 62px 46px; }         /* side + bottom margins for Arete pages */

    /* the Arete watermark must never appear on an official ATO form */
    #print-frame{ display:none !important; }

    /* ATO pages: the real form, sized to fill one A4 page exactly.
       Height-driven (slightly under A4) so rounding can never spill to page 2;
       .pdfpage shrink-wraps the canvas so the % overlays stay aligned. */
    .sheet--pdf{ break-before:page; padding:0; min-height:auto; overflow:hidden;
                 display:flex; justify-content:center; align-items:flex-start; }
    .sheet--pdf .pdfpage{ width:auto; height:1120px; }
    .sheet--pdf .pdfpage canvas{ width:auto; height:100%; }
    .ato-f, .ato-tick, .ato-comb-input{ background:transparent !important; box-shadow:none !important; }
    .ato-f{ color:#000; }
    .ato-f::placeholder{ color:transparent !important; }
    .ato-comb-cells span{ color:#000; }
    .ato-comb-cells span.caret{ background:transparent !important; box-shadow:none !important; }

    /* keep grouped blocks intact across page breaks */
    .rowgrid, .signblock, .ack, .doc-title{ break-inside:avoid; }
    .doc-h2{ break-after:avoid; }
    ol.legal li, ul.bullets li{ break-inside:avoid; }

    /* fills render as clean text, no boxes */
    .f, .sig-slot{ background:transparent !important; box-shadow:none !important; border-bottom:1px solid #999; border-radius:0; }
    .f{ color:#000; }
    .rowgrid .f, .fgrid .f, table.grid .f{ border-bottom:0 !important; }
    .ta{ background:transparent !important; border:1px solid #bbb; color:#000; }
    .f::placeholder, .ta::placeholder{ color:transparent !important; }  /* empty fields print blank */
    table.grid, .job, .qrow, .fgrid .fk, .fgrid .fv, .fsec-head{ break-inside:avoid; }
    .fsec-head{ break-after:avoid; }

    /* custom checkbox/radio are real elements + backgrounds, so they print as-is */
    .ack .cbox, .opt input[type=radio]{ box-shadow:none !important; }
}

/* ============================================================================
   SIDEBAR LAYOUT + RESPONSIVE
   The identity controls (name, date, signature) and the actions live in a
   right-hand sidebar; the header keeps the branding and document nav. Below
   1160px the page stacks, and the A4 sheets scale to fit rather than reflow.
   ============================================================================ */
/* ============================================================================
   Mobile-first. Small screens stack; from 1160px up the page becomes a real
   two-column grid, so the sidebar occupies its own track and never sits on
   top of the documents.
   ============================================================================ */

/* ---------- top header: brand + document nav ---------- */
.topbar{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    padding:11px 22px;
    background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.tb-brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.tb-brand img{ height:38px; }
.tb-brand strong{ font-size:16px; color:var(--purple-deep); display:block; line-height:1.1; }
.tb-brand span{ font-size:12px; color:var(--muted); }
.topbar .docnav{ padding:0; }

/* ---------- sidebar ---------- */
.sidebar{
    display:flex; flex-direction:column;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--line);
}

/* stacked layout: name and date sit side by side while there is room */
.sb-scroll{
    padding:14px 18px 16px;
    display:grid; grid-template-columns:1fr 1fr; gap:0 14px; align-items:start;
}
.sb-h, .sb-hint, .sb-sign, .sb-clearall{ grid-column:1 / -1; }

/* Type scale: field labels are sentence case at a readable size. Uppercase
   micro-type looks sharp in a mockup and is tiring for the people who actually
   fill this in. Only the one section heading keeps the uppercase treatment. */
.sb-h{ font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
       color:var(--purple-deep); margin:0 0 4px; }
.sb-hint{ font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 16px; }

.sb-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:15px; }
.sb-field label, .sb-label{
    font-size:13px; font-weight:700; letter-spacing:0; text-transform:none;
    color:var(--purple-ink);
}
.sb-field input{
    width:100%; padding:10px 11px; font:inherit; font-size:14.5px;
    border:1.5px solid #d5d2e6; border-radius:9px; background:#fff; color:var(--ink);
}
.sb-field input:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(139,127,240,.2); }

/* ---------- signature pad: make it look signable ---------- */
.sb-padwrap{
    position:relative; border:1.5px solid #d5d2e6; border-radius:9px;
    background:#fff; overflow:hidden;
}
/* the "sign here" baseline */
.sb-padwrap::before{
    content:""; position:absolute; left:14px; right:14px; bottom:26px; height:0;
    border-top:1.5px dashed #d9d5ec; pointer-events:none;
}
.sb-padhint{
    position:absolute; left:14px; bottom:8px; pointer-events:none;
    font-size:12px; font-weight:700; color:#b4afd0; transition:opacity .15s ease;
}
.sb-padok{
    position:absolute; right:10px; top:8px; pointer-events:none; opacity:0;
    font-size:11.5px; font-weight:800; color:var(--teal-deep);
    background:rgba(63,183,173,.14); border-radius:999px; padding:2px 8px;
    transition:opacity .15s ease;
}
.sb-padwrap.has-ink .sb-padhint{ opacity:0; }
.sb-padwrap.is-signed{ border-color:var(--teal); box-shadow:0 0 0 3px rgba(63,183,173,.16); }
.sb-padwrap.is-signed .sb-padok{ opacity:1; }
#sigPad{ width:100%; height:110px; background:transparent; border:0;
         touch-action:none; display:block; position:relative; z-index:1; }
.sb-sign-btns{ display:flex; gap:6px; margin-top:2px; }
.sb-sign-btns .btn-sm{ flex:1 1 0; padding:8px 10px; }
.btn-apply{ background:#e7e3fb; color:var(--purple-deep); }
.btn-apply:hover{ background:#dcd6f8; }
.sb-clearall{ width:100%; margin-top:4px; padding:8px 10px; }

/* small screens: primary action pinned to the viewport, always reachable */
.sb-actions{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px;
    padding:12px 18px;
    background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(43,42,68,.12);
}
.sb-actions .btn-primary, .sb-actions .btn-send{ flex:1 1 160px; }
.sb-actions .send-status{ flex:1 1 100%; margin:0; }
body{ padding-bottom:86px; }

/* ---------- one clear primary action ----------
   Send to HR is what actually finishes the task, so it leads. Download drops to
   a quiet outline — but only when Send is available, since with no backend
   configured Download is the only way to finish and must stay primary. */
body.has-send .sb-actions .btn-send{ order:-1; }
body.has-send .sb-actions .btn-primary{
    background:transparent; color:var(--purple-deep); box-shadow:inset 0 0 0 1.5px #cfc9ee;
}
body.has-send .sb-actions .btn-primary:hover{ background:#f3f1fd; filter:none; }

/* ---------- date / time fields: separators shown on the field ----------
   The overlay sits on top of the input and repeats what has been typed
   invisibly, so the remaining template lines up with the caret exactly. */
.mf{ position:relative; display:inline-block; min-width:120px; }   /* mirrors .f */
.mf.is-block{ display:block; width:100%; min-width:0; }
/* :not(.mf-native) matters — the satellite picker input below is also a direct
   input child, and must keep its own absolute positioning or it takes up a
   full field's height in the layout. */
.mf > input:not(.mf-native), .mf > textarea{ position:relative; z-index:1; background-clip:padding-box; }
.mf-ghost{
    position:absolute; inset:0; z-index:2;
    pointer-events:none; user-select:none;
    color:#a7a2c4; overflow:hidden;
}
.mf-typed{ visibility:hidden; }

/* No icon: clicking the field opens the picker. The satellite input is kept in
   the layout (not display:none, which makes showPicker() refuse to open) and
   sized to the field so the picker drops down anchored under it. */
.mf > input.mf-native{
    position:absolute; inset:0; width:100%; height:100%;
    opacity:0; border:0; padding:0; margin:0; pointer-events:none;
    min-width:0; box-shadow:none; background:transparent;
}

/* the template and picker are screen affordances only — they must never reach
   paper or the emailed copy, both of which render from the field's real value */
.exporting .mf-ghost, .exporting .mf-native{ display:none !important; }

/* ---------- ATO comb fields: tint the printed boxes, not the whole field ----------
   The tint came from .ato-comb-input, which is inset:0 across the field's entire
   rect — so it also covered the gaps between boxes, plus any slack between the
   rect and the boxes themselves. On the TFN date of birth the rect runs
   454.6->483.2 while its boxes run 455.2->481.6, so the tint overhung both sides.
   The cells ARE the boxes the form draws, so tinting those matches the paper. */
.ato-comb-input,
.ato-comb-input:hover,
.ato-comb-input:focus{ background:transparent; box-shadow:none; }

.ato-comb-cells span{
    background:var(--fill);
    box-shadow:inset 0 0 0 1px var(--fill-line);
    border-radius:2px;
}
.ato-comb-input:hover ~ .ato-comb-cells span{ background:var(--fill-hover); }
.ato-comb-input:focus ~ .ato-comb-cells span{
    background:var(--fill-focus);
    box-shadow:inset 0 0 0 1.3px var(--teal-deep);
}
/* the box being typed into must still win over the focus rule above — hence the
   second selector, which would otherwise lose on specificity */
.ato-comb-cells span.caret,
.ato-comb-input:focus ~ .ato-comb-cells span.caret{
    background:rgba(58,156,163,.42);
    box-shadow:inset 0 0 0 1.4px var(--teal-deep);
}
/* affordance only: never on paper, never in the emailed copy */
.exporting .ato-comb-cells span{ background:transparent !important; box-shadow:none !important; }

/* ---------- TFN: mark boxes with X, as the form itself instructs ----------
   NAT 3092 page 2: "Print X in the appropriate box". Scoped by data-fid so it
   applies only to the TFN declaration — the Arete Yes/No boxes keep their tick,
   and the super form is left alone (it carries no such instruction). */
.ato-tick[data-fid^="tfn:"]::before{
    content:"X";
    font-weight:600;                      /* 900 read as a blob at this size */
    font-size:clamp(7px, 1.15vw, 12px);
    /* .ato-tick sets line-height:0, which collapses this box to zero height —
       place-items:center then centres nothing and drops the baseline on the
       middle, pushing the X's ink above it. A real line box fixes that. */
    line-height:1;
    /* optical centring: with line-height:1 the baseline sits ~0.8em down and the
       cap is ~0.72em tall, so the ink's centre lands ~0.06em above the box's */
    transform:translateY(0.06em);
}

.docnav a{ display:inline-flex; align-items:center; }
.docnav a.is-current{ background:var(--purple-deep); border-color:var(--purple-deep); color:#fff; }

/* ---------- mobile collapse ---------- */
.sb-summary-row{ display:none; }
.sb-chev{ transition:transform .18s ease; color:var(--muted); }

/* ---------- mobile: fit the A4 page to the screen ----------
   The sheets are NOT reflowed. They keep their exact A4 layout and are scaled
   down to fit, so a phone shows the whole width instead of panning sideways for
   every line. --fit is measured in preview.js and is 1 on anything wide enough.

   zoom (not transform) because it participates in layout, so there is no
   leftover empty space under each scaled page. */
.sheets{ overflow-x:auto; align-items:center; padding-left:14px; padding-right:14px; }
.sheet{ flex:0 0 auto; zoom:var(--fit, 1); }

/* Whenever the page is being rasterised for the emailed PDF, or printed, the
   sheets snap back to full size — html2canvas measures these live nodes, so
   without this HR would receive a scaled-down document. */
.pv-export .sheet{ zoom:1 !important; }

/* below the desktop grid the panel collapses behind a summary row, so the
   document is on screen immediately instead of under a wall of controls */
@media (max-width:1159px){
    .sb-summary-row{
        display:flex; width:100%; align-items:center; justify-content:space-between; gap:10px;
        padding:12px 18px; border:0; border-radius:0; background:transparent;
        font:inherit; font-size:13.5px; font-weight:700; color:var(--purple-deep);
        text-align:left; cursor:pointer;
    }
    .sb-summary{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sb-scroll{ display:none; }
    body.sb-open .sb-scroll{ display:grid; }
    body.sb-open .sb-summary-row{ border-bottom:1px solid var(--line); }
    body.sb-open .sb-chev{ transform:rotate(180deg); }
}

@media (max-width:640px){
    .sb-scroll{ grid-template-columns:1fr; padding:12px 14px 14px; }
    .topbar{ padding:9px 14px; gap:10px; }
    .tb-brand img{ height:32px; }
    .tb-brand span{ display:none; }          /* strapline is noise on a phone */
    #sigPad{ height:130px; }                 /* finger signing needs room */
    .sb-actions{ padding:10px 14px; }
    /* the document nav is dropped entirely on a phone — it cost a whole row of
       the header and the pills were too cramped to read */
    .topbar .docnav{ display:none; }
    body{ padding-bottom:78px; }
}

/* ---------- desktop: real two-column grid, nothing overlaps ---------- */
@media (min-width:1160px){
    body{
        --topbar-h:62px;                     /* header is locked to this height */
        display:grid;
        grid-template-columns:minmax(0,1fr) 300px;
        grid-template-areas:"head head"      /* header spans the full width */
                            "main side";
        padding-bottom:0;
    }
    /* one row, never wrapping, so --topbar-h stays true */
    .topbar{
        grid-area:head; height:var(--topbar-h);
        flex-wrap:nowrap; z-index:60;
    }
    .topbar .docnav{ margin-left:auto; flex-wrap:nowrap; overflow-x:auto; min-width:0; }

    /* own track and starts below the header, so it overlaps nothing */
    .sidebar{
        grid-area:side; align-self:start;
        position:sticky; top:var(--topbar-h);
        height:calc(100vh - var(--topbar-h));
        border-bottom:0; border-left:1px solid var(--line);
    }
    .sb-scroll{ display:block; flex:1 1 auto; overflow-y:auto; padding:18px; }
    .sb-actions{
        position:static; flex-direction:column; align-items:stretch;
        padding:14px 18px; box-shadow:none; backdrop-filter:none;
    }
    .sb-actions .btn-primary, .sb-actions .btn-send{ flex:0 0 auto; width:100%; }

    .sheets{ grid-area:main; overflow-x:visible; align-items:center; padding:22px 16px 60px; }
}

/* ---------- print: none of the chrome may reach the PDF ---------- */
@media print{
    .sheet{ zoom:1 !important; }          /* paper is A4 regardless of screen */
    .mf-ghost, .mf-native{ display:none !important; }
    /* the per-box tint is a screen affordance — strip it from the printed form */
    .ato-comb-cells span{ background:transparent !important; box-shadow:none !important; }
    .sidebar, .topbar{ display:none !important; }
    body{ display:block !important; padding-bottom:0 !important; }
    .sheets{ overflow:visible !important; }
}