* { box-sizing: border-box; }
/* Native form controls do NOT inherit font-family — without this they'd keep the
   browser default while the rest of the UI uses the brand font. Inherit so buttons,
   inputs, selects and textareas all pick up --font-sans platform-wide. */
button, input, select, textarea, optgroup,
.dropdown-trigger, .dropdown-label, .dropdown-option { font-family: inherit; }
::placeholder { font-family: var(--font-sans); }
body {
    font-family: var(--font-sans);
    font-variation-settings: 'wght' var(--fw-400);
    background: var(--surface-sunken); 
    color: var(--text); 
    margin: 0; 
    display: flex;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    font-size: var(--fs-3);
    line-height: 1.6;
}

code, .mono { font-family: var(--font-mono); font-size: var(--fs-2); letter-spacing: 0.05em; }

.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
/* Icon size scale — fixed px (icons are chrome, not text). FOUR sizes, the
   class IS the size: xs dense, sm in-button/table (default), md emphasis, lg
   section/feature. The icon BUTTON box is .btn-icon (= --field-h). Don't add
   rem variants or t-shirt aliases. */
svg.icon-xs { width: 14px; height: 14px; }
svg.icon-sm { width: 18px; height: 18px; }
svg.icon-md { width: 24px; height: 24px; }
svg.icon-lg { width: 32px; height: 32px; }
/* Icon BOX — the container EVERY icon sits in. The box owns the footprint +
   centering; the glyph (icon-*) sits centered inside it. Spacing then belongs
   to the box's CONTAINER (cell padding, cluster gap) — never the bare glyph,
   which is what caused the clutter/overlaps. Box size matches what it aligns
   to: control-height for inputs/row-actions, sm (24) for dense rows/cells/
   inline-with-text. The interactive icon box is .btn-icon (same geometry). */
.icon-box    { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--field-h); height: var(--field-h); }
.icon-box-sm { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--sp-5); height: var(--sp-5); }

h1 { font-size: var(--fs-5); font-variation-settings: 'wght' var(--fw-600); margin: 0 0 var(--sp-4) 0; letter-spacing: -0.025em; color: var(--text); }
h2 { font-size: var(--fs-4); font-variation-settings: 'wght' var(--fw-600); margin: 0 0 var(--sp-4) 0; letter-spacing: -0.015em; color: var(--text); }
h3, h4, h5, h6 { color: var(--text); }
p { color: var(--text-muted); }

.card { background: var(--surface); border-radius: var(--radius-control); border: 1px solid var(--border); transition: var(--transition); overflow: hidden; }
.card-header { box-sizing: border-box; min-height: var(--header-h); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
/* Header-only card (e.g. Date Format — header row + control, no body): the
   separator border-bottom has nothing to separate, so drop it. */
.card > .card-header:only-child { border-bottom: none; }
.card-body { padding: var(--sp-3); }

.breadcrumbs { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); font-size: var(--fs-2); font-weight: var(--fw-500); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; transition: var(--transition); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs .sep { color: var(--n-200); }
.breadcrumbs span:last-child { color: var(--text); font-weight: var(--fw-600); }

/* Responsive sidebar/main behaviour lives solely in comp_styles_layout.html
   (rail tier 641–1100px, off-canvas ≤640px). The old duplicate @media here
   forced the sidebar off-canvas at ≤1024px while the toggle only appeared
   ≤900px — that 900–1024px dead band is why the nav "disappeared with no way
   back". Removed. */

/* --- Global Utility Helper Classes --- */

/* Inline Helper Classes */
.display-none {
    display: none !important;
}
.display-inline {
    display: inline !important;
}

/* Global Layout & Typography Utilities */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.p-5 { padding: var(--sp-5); }
.p-4 { padding: var(--sp-4); }
.pl-4 { padding-left: var(--sp-4); }
.pr-4 { padding-right: var(--sp-4); }
.ml-4 { margin-left: var(--sp-4); }
/* Consistent vertical scale: xs=4 · sm=12 · md=16 · lg=24 (top == bottom). */
.mt-1 { margin-top: var(--sp-1); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-1 { margin-bottom: var(--sp-1); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.w-full { width: 100%; }
.w-100 { width: 100px; }
.h-120 { height: 120px; }
.max-w-500 { max-width: 500px; }
.flex-wrap-xs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.flex-shrink-0 { flex-shrink: 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.border-none { border: none; }
.shadow-none { box-shadow: none; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.cursor-pointer { cursor: pointer; }
/* Screen-reader-only: removes content from the visual layout while keeping it in
   the accessibility tree (column <th> labels on compact tables, action-cell names).
   The clip+1px box is the standard, robust pattern (display:none would hide it from
   AT too). */
/* Native <button> used as a custom control (a11y: real button over role=button).
   Strips UA chrome so the element's own classes fully own its look. Loaded early so
   feature classes (.badge, .brand, .nav-section-header, …) override where they set. */
button.unbutton { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; line-height: inherit; cursor: pointer; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.text-xs { font-size: var(--fs-1); }
.text-sm { font-size: var(--fs-2); }
.font-semibold { font-weight: var(--fw-600); }
.font-bold { font-weight: var(--fw-600); }
.text-main { color: var(--text); }
.text-muted { color: var(--text-muted); }
.text-capitalize { text-transform: capitalize; }
.card-title { margin: 0; }

/* Custom global utility helper classes for page alignment */
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.display-block { display: block !important; }
.js-hidden { display: none; }
.pe-none { pointer-events: none !important; }
.text-micro { font-size: var(--fs-0); }
.text-sub { font-size: var(--fs-2); }
.text-accent { color: var(--accent); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bg-alt { background: var(--surface-raised); }
.bg-success { background: var(--success); }
.bg-warning { background: var(--warning); }
.bg-danger { background: var(--danger); }
.bg-accent { background: var(--accent); }
.pad-sm { padding: var(--sp-4); }
.rounded { border-radius: var(--radius-control); }
.no-transition { transition: none; animation: none; }
.text-lg { font-size: var(--fs-4); }
.text-xl { font-size: var(--fs-4); }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-danger { color: var(--danger-text); }
.min-w-0 { min-width: 0; }
.min-w-200 { min-width: 200px; }
.w-150 { width: 150px; }
.bg-card { background: var(--surface); }
.h-180 { height: 180px; }
.border-bottom { border-bottom: 1px solid var(--border); }
.border-top { border-top: 1px solid var(--border); }
.border-all { border: 1px solid var(--border); }
.-md { padding: var(--sp-4) var(--sp-4); }
.p-4-lg { padding: var(--sp-4) var(--sp-5); }
.p-5-md { padding: var(--sp-5) var(--sp-4); }
.p-2 { padding: var(--sp-2); }
.rounded-circle { border-radius: 50%; }
.avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-1);
    font-weight: var(--fw-700);
}
.overflow-hidden { overflow: hidden !important; }
.ellipsis {
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.overflow-y-auto { overflow-y: auto !important; }
.mx-auto { margin-left: auto; margin-right: auto; }
.transition-var { transition: var(--transition); }
.border-2-solid { border: 2px solid var(--border); }
.border-2-dashed { border: 2px dashed var(--border); }
.align-start { align-items: flex-start; }
.align-baseline { align-items: baseline; }
.pb-2 { padding-bottom: var(--sp-2); }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.tracking-wider { letter-spacing: 0.05em; }
.max-w-1200 { max-width: 1200px; }
.max-w-800 { max-width: 800px; }
.max-w-600 { max-width: 600px; }
.h-800 { height: 800px; }
.h-400 { height: 400px; }
.bg-white { background: var(--surface); }
.z-100 { z-index: 100 !important; }
.justify-center { justify-content: center; }
.pre-wrap { white-space: pre-wrap; }
.tracking-tight { letter-spacing: -0.02em; }
.tracking-widest { letter-spacing: 0.1em; }
.lh-base { line-height: 1.5; }
.pt-4 { padding-top: var(--sp-4); }
.align-top { vertical-align: top; }
.col-shrink { width: 1%; white-space: nowrap; }
/* Watermark editor row: [label] [colour+opacity] [text]; token badges sit directly
   under the text field, and the label is vertically centred with the controls row. */
.wm-grid { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--sp-2) var(--sp-3); }
.wm-grid > .wm-label  { grid-column: 1; grid-row: 1; }
.wm-grid > .wm-ctl    { grid-column: 2; grid-row: 1; }
.wm-grid > .wm-text   { grid-column: 3; grid-row: 1; }
.wm-grid > .wm-badges { grid-column: 3; grid-row: 2; }
.mt-auto { margin-top: auto; }
.text-2xl { font-size: var(--fs-5); }
.op-2 { opacity: 0.2; }
.op-3 { opacity: 0.3; }
.font-normal { font-weight: var(--fw-400); }
.premium-warning-icon {
    width: 64px;
    height: 64px;
    background: var(--surface-raised);
    color: var(--warning-text);
    border-radius: var(--radius-card);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--sp-4) auto;
}
.border-1-solid {
    border: 1px solid var(--border);
}
.pdf-preview-container {
    position: relative !important;
    width: 100%;
    min-height: 420px;
    max-height: 500px;
    overflow-y: auto !important;
    background: var(--surface);
    border-radius: var(--radius-control);
    box-shadow: var(--sh-1);
    padding: var(--sp-5);
}
.pdf-content-render {
    color: var(--text-muted);
    font-size: var(--fs-2);
    line-height: 1.6;
    white-space: pre-wrap;
}
.draggable-signature {
    position: absolute;
    left: 100px;
    top: 150px;
    width: 150px;
    height: 50px;
    background: var(--accent-surface);
    border: 2px dashed var(--accent);
    color: var(--accent);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    cursor: move;
    user-select: none !important;
    box-shadow: var(--sh-2);
}
.signature-resize-handle {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 12px;
    height: 12px;
    cursor: se-resize;
    background: var(--accent);
    border-radius: 2px 0 0 0;
}
.nda-page-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    line-height: 0;
}
.nda-page-canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-control);
    box-shadow: var(--sh-2);
}
/* WYSIWYG NDA document editor: a single framed page the admin types directly on,
   styled like the rendered agreement (one frame, two layers — editable text +
   document look). The canonical PDF is generated from this exact page on save. */
.nda-doc-frame {
    background: var(--surface-sunken);
    border-radius: var(--radius-control);
    padding: var(--sp-5);
    max-height: 560px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;   /* stacks a single text page OR multiple pdf pages */
    align-items: center;
    gap: var(--sp-3);
}
.nda-doc-page {
    position: relative;            /* positioning context for the signature field */
    width: 100%;
    max-width: 612px;             /* US Letter width in points, 1:1 */
    min-height: 792px;            /* US Letter height — looks like a full page */
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--sh-2);
    border-radius: var(--radius-control);
    padding: calc(var(--sp-5) * 2) calc(var(--sp-5) * 1.75);
    box-sizing: border-box;
    font-family: var(--font-sans);
}
.nda-doc-pageheader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--paper-line);
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.nda-doc-title {
    font-size: var(--fs-3);
    font-weight: var(--fw-700);
    letter-spacing: 0.04em;
    color: var(--ink);
}
.nda-doc-date {
    font-size: var(--fs-0);
    color: var(--ink-muted);
}
.nda-doc-body {
    font-size: var(--fs-2);
    line-height: 1.55;
    color: var(--ink);
    white-space: pre-wrap;
    outline: none;
    min-height: 600px;
}
.nda-doc-body:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-muted);
}
/* Live pagination seams on the single editable sheet — prominent page breaks so
   the contiguous surface reads as distinct pages without splitting the editable
   text. Non-interactive; only the signature field captures pointer events. */
.nda-page-seps { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 3; }
.nda-page-sep { position: absolute; left: -16px; right: -16px; border-top: 2px solid var(--border); box-shadow: 0 7px 9px -7px color-mix(in srgb, var(--n-950) 30%, transparent); }
.nda-page-sep-label { position: absolute; right: 18px; top: -10px; background: var(--ink); color: var(--paper); font-size: var(--fs-0); font-weight: var(--fw-600); line-height: 1; padding: var(--sp-1) var(--sp-2); border-radius: 999px; box-shadow: var(--sh-1); }
/* The signature field overlays the whole sheet and is freely draggable across pages. */
#nda-doc-page .draggable-signature { z-index: 4; }
.gap-1 { gap: var(--sp-1); }
.flex-1 { flex: 1; }
.flex-grow-1 { flex-grow: 1; }
/* (Inline confirm is the canonical .actions-wrapper/.confirm-mode in comp_styles_tables.html.) */
.nda-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nda-status-icon svg { width: 72px; height: 72px; }
.nda-status-icon.active { color: var(--success-text); }
.nda-status-icon.inactive { color: var(--danger); }


/* Visitor Profile Component Styles */
.visitor-profile-card {
    padding: var(--sp-5);
    border-top: 4px solid var(--accent);
}
.visitor-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-5);
    font-weight: var(--fw-700);
    color: var(--accent);
    border: 1px solid var(--border);
}
.visitor-meta-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.visitor-meta-label {
    font-weight: var(--fw-700);
    font-size: var(--fs-4);
    color: var(--text);
}
.visitor-meta-sub {
    font-size: var(--fs-2);
    color: var(--text-muted);
    font-weight: var(--fw-500);
}
.visitor-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.visitor-info-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-2);
}
.visitor-info-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-2);
    color: var(--accent);
    text-decoration: none;
}
.visitor-bio {
    font-size: var(--fs-2);
    color: var(--text-muted);
    line-height: 1.5;
    padding: var(--sp-4);
    background: var(--surface-raised);
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
}
.visitor-fingerprint {
    margin-top: var(--sp-5);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-4);
}
.fingerprint-section-title {
    font-size: var(--fs-1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: var(--fw-600);
    margin-bottom: var(--sp-4);
}
.fingerprint-text {
    font-size: var(--fs-1);
    color: var(--text);
    font-weight: var(--fw-500);
}
.device-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}
.device-item {
    font-size: var(--fs-1);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--text);
}
.visitor-forward-alert {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--surface-raised);
    border-radius: var(--radius-control);
    border: none;
    box-shadow: var(--sh-warning-card);
}
.visitor-forward-title {
    font-size: var(--fs-1);
    font-weight: var(--fw-700);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
.visitor-forward-sub {
    font-size: var(--fs-0);
    color: var(--text-muted);
    margin-top: var(--sp-1);
}

/* Timeline Component Styles */
.timeline {
    position: relative;
    padding-left: var(--sp-5);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
    opacity: 0.5;
}
.timeline-item {
    position: relative;
    margin-bottom: var(--sp-5);
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-marker {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--border);
    border: 3px solid var(--surface);
    z-index: 1;
}
.timeline-marker.high-scrutiny {
    background: var(--accent);
}
.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--sp-1);
}
.timeline-time {
    font-size: var(--fs-1);
    color: var(--text-muted);
    font-weight: var(--fw-600);
}
.timeline-duration {
    font-size: var(--fs-1);
    font-weight: var(--fw-700);
    color: var(--text);
}
.timeline-content {
    background: var(--surface-sunken);
    padding: var(--sp-4);
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
}
.timeline-body {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}
.timeline-title {
    font-size: var(--fs-2);
    font-weight: var(--fw-600);
    color: var(--text);
}

/* Page Specific, Layout & Card Utilities */
.d-flex { display: flex !important; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.align-stretch { align-items: stretch; }
.align-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.w-80px { width: 80px; }

/* Narrow number input (spinner dropped — value is keyed in). Height is the ONE
   control height (--field-h) like every other field; only its WIDTH is compact. */
.input-num-sm {
    width: 72px;
    height: var(--field-h);
    box-sizing: border-box;
    text-align: center;
    padding: 0 var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    font-size: var(--fs-2);
    -moz-appearance: textfield;
    appearance: textfield;
}
.input-num-sm::-webkit-outer-spin-button,
.input-num-sm::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pl-5 { padding-left: var(--sp-5); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }

.font-bold-700 { font-weight: var(--fw-700); }
.text-xs-small { font-size: var(--fs-0); }
.op-5 { opacity: 0.5; }
.op-7 { opacity: 0.7; }

/* ── The ONE small-label / eyebrow token ────────────────────────────────────
   Every uppercase mini-label reads the same: 12px, semibold, uppercase, muted,
   0.05em tracking. Put .eyebrow on new labels. The named label classes below are
   the SAME token — they add only layout (display:block + a bottom margin) — so the
   type treatment lives in one place, not a dozen. */
.eyebrow,
.filter-label,
.detail-label,
.label-uppercase-xs {
    font-size: var(--fs-1);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.filter-label, .detail-label, .label-uppercase-xs { display: block; margin-bottom: var(--sp-1); }
.code-pill {
    background: var(--surface-sunken);
    padding: var(--sp-1) var(--sp-1);
    border-radius: var(--radius-control);
}
.code-block-container {
    padding: var(--sp-4);
    background: var(--surface-sunken);
    border-radius: var(--radius-control);
    font-size: var(--fs-2);
    font-family: var(--font-mono);
    color: var(--text-muted);
    overflow-x: auto;
}
.mono-hash-box {
    display: block;
    font-size: var(--fs-1);
    overflow-wrap: break-word;
    background: var(--surface-sunken);
    padding: var(--sp-2);
    border-radius: var(--radius-control);
}
.link-accent {
    color: var(--accent);
    text-decoration: none;
    font-weight: var(--fw-600);
}
.link-accent:hover {
    text-decoration: underline;
}
.card-accent {
    border-left: 4px solid var(--accent);
}
.card-danger {
    border-left: 4px solid var(--danger);
}
.card-success {
    border-left: 4px solid var(--success);
}
.card-warning {
    border-left: 4px solid var(--warning);
}
.grid-2fr-1fr {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-5);
}
@media (max-width: 768px) {
    .grid-2fr-1fr {
        grid-template-columns: 1fr;
    }
}
.vault-split-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--sp-5);
    align-items: start;
}
@media (max-width: 1024px) {
    .vault-split-layout {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}
.grid-1fr-1fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
}
@media (max-width: 600px) {
    .grid-1fr-1fr {
        grid-template-columns: 1fr;
    }
}
.grid-span-2 {
    grid-column: span 2;
}