/* =========================================================================
   A4 FRONT DESK — application styles
   Brand tokens come from assets/a4-colors_and_type.css (linked BEFORE this
   file). This sheet only consumes those tokens — no raw hexes are repeated.

   Contents:
     1. Reset & base
     2. Shared components (buttons, fields, chips)
     3. Kiosk screens (idle / form / waiver / confirm / signout)
     4. Admin view
     5. Print badge  (@media print)
     6. Reduced motion + orientation
   ========================================================================= */

/* ----------  1. RESET & BASE  ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg);
  font-size: 18px;                 /* kiosk baseline is generous */
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* Kiosk: no text selection / long-press callout (it's a public terminal). */
body.kiosk {
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }

h1, h2, h3 { margin: 0; }
.h-display {
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.h1 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
      line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.h2 { font-family: var(--font-display); font-weight: 800; line-height: var(--lh-snug); }
.eyebrow {
  font-family: var(--font-util); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--fg2);
}
/* News Cycle for ALL data: times, dates, phones, ids, counts, durations. */
.data, .num { font-family: var(--font-util); font-weight: 400; letter-spacing: .01em;
              font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------  2. SHARED COMPONENTS  ---------- */

/* Buttons — big by default for touch. Min height comfortably above 44px. */
.btn {
  appearance: none; border: var(--border-rule); background: var(--surface);
  color: var(--fg1); font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.125rem; line-height: 1;
  min-height: 64px; padding: 0 var(--space-6);
  border-radius: var(--radius-md); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }               /* tactile press, no layout shift */
.btn:focus-visible { outline: 4px solid var(--a4-yellow); outline-offset: 3px; }

.btn-primary { background: var(--a4-yellow); color: var(--fg-on-yellow); border-color: var(--a4-black); }
.btn-primary:active { background: var(--a4-yellow-press); }
.btn-dark { background: var(--a4-black); color: var(--fg-inverse); border-color: var(--a4-black); }
.btn-ghost { background: transparent; }
.btn-lg { min-height: 96px; font-size: 1.5rem; padding: 0 var(--space-8); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Icon glyph inside a button (inline SVG, currentColor). */
.btn svg { width: 1.4em; height: 1.4em; flex: 0 0 auto; }

/* Text fields — large, high contrast, clear labels. */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-family: var(--font-util); font-weight: 700; text-transform: uppercase;
               letter-spacing: var(--tracking-eyebrow); font-size: .8125rem; color: var(--fg2); }
.field .req { color: var(--a4-black); }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1.25rem; color: var(--fg1);
  background: var(--surface); border: var(--border-rule);
  border-radius: var(--radius-md); padding: var(--space-4);
  min-height: 64px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--a4-black);
  box-shadow: 0 0 0 4px var(--a4-yellow-wash);
}
.field textarea { min-height: 96px; resize: none; line-height: 1.4; }
.field.invalid input, .field.invalid textarea, .field.invalid select { box-shadow: 0 0 0 4px #ffd7d7; border-color:#b00020; }
.field .err { color:#b00020; font-family: var(--font-util); font-weight:700; font-size:.85rem; min-height: 1em; }

/* Header bar shared across screens. */
.topbar { display:flex; align-items:center; gap: var(--space-4);
          padding: var(--space-4) var(--space-6); border-bottom: var(--border-rule); }
.topbar .mark { height: 44px; width: auto; }
.topbar .loc { margin-left:auto; text-align:right; }
.topbar .loc .name { font-family: var(--font-display); font-weight:800; text-transform:uppercase; }
.topbar .loc .clock { font-family: var(--font-util); color: var(--fg2); }

/* Small status chip (offline / queued). */
.chip { font-family: var(--font-util); font-weight:700; text-transform:uppercase;
        font-size:.75rem; letter-spacing:.06em; padding: 4px 10px; border-radius: var(--radius-sm);
        border:2px solid var(--a4-black); display:inline-flex; align-items:center; gap:6px; }
.chip-warn { background: var(--a4-yellow); color: var(--a4-black); }
.chip-ok   { background: var(--a4-grey-100); color: var(--fg2); border-color: var(--a4-grey-300); }

/* ----------  3. KIOSK SCREENS  ---------- */
.app { min-height: 100%; display: flex; flex-direction: column; }
.screen { display: none; flex: 1 1 auto; min-height: 0; }
.screen.active { display: flex; flex-direction: column; }
.screen-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
               padding: var(--space-6); }
.screen-footer { padding: var(--space-4) var(--space-6);
                 border-top: var(--border-hairline); display:flex; gap: var(--space-4);
                 align-items:center; }
.screen-footer .spacer { margin-left:auto; }

/* IDLE / WELCOME */
#screen-idle .screen-body {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap: var(--space-6);
}
#screen-idle .badge-logo { width: min(38vw, 260px); aspect-ratio:1; }
#screen-idle .welcome-title { font-size: var(--fs-display); }
#screen-idle .welcome-sub { font-size: var(--fs-lead); color: var(--fg2); max-width: 40ch; }
#screen-idle .choices { display:flex; gap: var(--space-5); flex-wrap:wrap; justify-content:center; width:100%; max-width: 720px; }
#screen-idle .choices .btn { flex:1 1 260px; }

/* Section title used on form/waiver/signout */
.section-head { margin-bottom: var(--space-5); }
.section-head h1 { font-size: var(--fs-h1); }
.section-head p { color: var(--fg2); margin: var(--space-2) 0 0; }

/* Sign-in form grid — 2-up on wide, 1-up on narrow */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
             max-width: 900px; }
.form-grid .col-full { grid-column: 1 / -1; }

/* WAIVER panel */
.waiver-panel {
  border: var(--border-rule); border-radius: var(--radius-md);
  background: var(--a4-grey-50); padding: var(--space-5);
  max-height: 42vh; overflow-y:auto; -webkit-overflow-scrolling: touch;
  max-width: 860px;
}
.waiver-panel h4 { font-family: var(--font-display); font-weight:800; margin: var(--space-4) 0 var(--space-2); }
.waiver-panel p, .waiver-panel li { font-family: var(--font-util); font-size: 1.05rem; line-height:1.5; color: var(--fg1); }
.waiver-panel ol { padding-left: 1.4em; }
.waiver-panel li { margin-bottom: var(--space-3); }
.waiver-flag { background: var(--a4-yellow-wash); border-left: var(--border-accent);
               padding: var(--space-3); }
.waiver-scrollnote { font-family: var(--font-util); color: var(--fg3); font-size:.85rem; margin-top: var(--space-2); }

/* agree row */
.agree-row { display:flex; align-items:flex-start; gap: var(--space-3); margin-top: var(--space-5); max-width: 860px; }
.agree-row input[type=checkbox]{ width:36px; height:36px; flex:0 0 auto; accent-color: var(--a4-black); margin-top:2px; }
.agree-row label { font-family: var(--font-util); font-weight:700; font-size:1.1rem; }

/* signature pad */
.sig-block { margin-top: var(--space-5); max-width: 860px; }
.sig-frame { position:relative; border: var(--border-rule); border-radius: var(--radius-md);
             background: var(--surface); }
.sig-frame canvas { display:block; width:100%; height:220px; border-radius: var(--radius-md); touch-action:none; }
.sig-frame .baseline { position:absolute; left: var(--space-4); right: var(--space-4); bottom: 44px;
                       border-bottom: 2px dashed var(--a4-grey-400); pointer-events:none; }
.sig-frame .hint { position:absolute; left: var(--space-4); bottom: 16px;
                   font-family: var(--font-util); color: var(--fg3); font-size:.85rem; pointer-events:none; }
.sig-actions { display:flex; align-items:center; gap: var(--space-4); margin-top: var(--space-3); }
.sig-actions .status { font-family: var(--font-util); color: var(--fg2); }

/* CONFIRM */
#screen-confirm .screen-body, #screen-signout-done .screen-body {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap: var(--space-5);
}
.confirm-check { width: 120px; height:120px; border-radius: var(--radius-pill);
                 background: var(--a4-yellow); display:flex; align-items:center; justify-content:center; }
.confirm-check svg { width: 64px; height:64px; color: var(--a4-black); }
.confirm-title { font-size: var(--fs-h1); }
.confirm-sub { color: var(--fg2); font-size: var(--fs-lead); }
.confirm-meta { font-family: var(--font-util); color: var(--fg2); }

/* SIGN-OUT search list */
.search-box { max-width: 860px; }
.onsite-list { list-style:none; margin: var(--space-4) 0 0; padding:0; max-width: 860px;
               display:flex; flex-direction:column; gap: var(--space-3); }
.onsite-list li { border: var(--border-rule); border-radius: var(--radius-md);
                  display:flex; align-items:center; gap: var(--space-4); padding: var(--space-4); }
.onsite-list .who { display:flex; flex-direction:column; }
.onsite-list .who .nm { font-family: var(--font-display); font-weight:800; font-size:1.25rem; text-transform:uppercase; }
.onsite-list .who .meta { font-family: var(--font-util); color: var(--fg2); }
.onsite-list .btn { margin-left:auto; }
.empty-note { font-family: var(--font-util); color: var(--fg3); padding: var(--space-5) 0; }

/* Optional visitor photo capture */
.photo-block { max-width: 860px; }
.photo-stage { position: relative; width: 320px; max-width: 100%; aspect-ratio: 4 / 3;
               border: var(--border-rule); border-radius: var(--radius-md); overflow: hidden;
               background: var(--a4-grey-100); }
.photo-stage video, .photo-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.photo-actions .status { font-family: var(--font-util); color: var(--fg2); }

/* Photo on the on-screen badge preview + print badge */
.badge-photo { width: 30mm; height: 30mm; object-fit: cover; margin: 0 auto 3mm;
               border: 1px solid #000; }

/* Hidden admin door (long-press corner on the idle screen). */
.admin-corner { position: fixed; top:0; right:0; width: 72px; height:72px; z-index: 5;
                background: transparent; border: none; cursor: default; }

/* ----------  4. ADMIN VIEW  ---------- */
body.admin { background: var(--bg-alt); font-size: 16px; user-select: text; }
.admin-wrap { max-width: 1200px; margin: 0 auto; padding: var(--space-5); }
.admin-lock { min-height: 100vh; display:flex; align-items:center; justify-content:center; }
.admin-lock .card { background: var(--surface); border: var(--border-rule); border-radius: var(--radius-md);
                    padding: var(--space-7); width: min(420px, 92vw); text-align:center; }
.admin-lock .badge-logo { width: 96px; margin: 0 auto var(--space-5); }
.admin-lock input { text-align:center; letter-spacing: .5em; font-family: var(--font-util); }

.admin-header { display:flex; align-items:center; gap: var(--space-4); margin-bottom: var(--space-5); }
.admin-header .mark { height: 40px; }
.admin-header h1 { font-size: var(--fs-h3); }
.admin-header .right { margin-left:auto; display:flex; gap: var(--space-3); align-items:center; }

.filters { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-4);
           background: var(--surface); border: var(--border-hairline); border-radius: var(--radius-md);
           padding: var(--space-5); margin-bottom: var(--space-5); }
.filters .field input, .filters .field select { min-height: 48px; font-size: 1rem; }
.filters .actions { grid-column: 1 / -1; display:flex; gap: var(--space-3); flex-wrap:wrap; }

.stat-row { display:flex; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap:wrap; }
.stat { background: var(--surface); border: var(--border-hairline); border-left: var(--border-accent);
        border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); min-width: 160px; }
.stat .k { font-family: var(--font-util); text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color: var(--fg2); }
.stat .v { font-family: var(--font-util); font-weight:700; font-size: 2rem; font-variant-numeric: tabular-nums; }
.stat.on .v { color: var(--a4-black); }

.table-wrap { background: var(--surface); border: var(--border-hairline); border-radius: var(--radius-md);
              overflow-x: auto; }
table.log { width:100%; border-collapse: collapse; min-width: 860px; }
table.log th, table.log td { text-align:left; padding: var(--space-3) var(--space-4);
                             border-bottom: var(--border-hairline); vertical-align: middle; }
table.log th { font-family: var(--font-util); text-transform:uppercase; letter-spacing:.06em;
               font-size:.75rem; color: var(--fg2); position: sticky; top:0; background: var(--surface); }
table.log td { font-size:.95rem; }
table.log td.data { font-family: var(--font-util); font-variant-numeric: tabular-nums; }
table.log tr[data-status=in] td:first-child { box-shadow: inset 4px 0 0 var(--a4-yellow); }
.status-pill { font-family: var(--font-util); font-weight:700; text-transform:uppercase; font-size:.7rem;
               padding: 3px 8px; border-radius: var(--radius-pill); }
.status-pill.in { background: var(--a4-yellow); color: var(--a4-black); }
.status-pill.out { background: var(--a4-grey-200); color: var(--fg2); }
.link-btn { background:none; border:none; color: var(--a4-black); font-family: var(--font-util); font-weight:700;
            text-decoration: underline; cursor:pointer; padding: 6px; min-height: 40px; }

/* Modal for viewing a stored signed form. */
.modal-scrim { position:fixed; inset:0; background: rgba(0,0,0,.55); display:none;
               align-items:center; justify-content:center; padding: var(--space-5); z-index: 50; }
.modal-scrim.open { display:flex; }
.modal { background: var(--surface); border-radius: var(--radius-md); max-width: 760px; width:100%;
         max-height: 90vh; overflow-y:auto; }
.modal-head { display:flex; align-items:center; padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline); }
.modal-head h3 { font-size: var(--fs-h4); }
.modal-head .btn { margin-left:auto; min-height:44px; }
.modal-body { padding: var(--space-5); }
.modal-body .sig-view { border: var(--border-hairline); border-radius: var(--radius-md); background:#fff; margin-top: var(--space-4); }
.kv { display:grid; grid-template-columns: 160px 1fr; gap: var(--space-2) var(--space-4); }
.kv dt { font-family: var(--font-util); text-transform:uppercase; letter-spacing:.06em; font-size:.75rem; color: var(--fg2); }
.kv dd { margin:0; font-family: var(--font-util); }

/* ----------  5. PRINT BADGE  ----------
   The badge lives in #badge (populated by app.js) and is the ONLY thing that
   prints. LABEL_SIZE lives in config.js; if you change it there, change the
   @page size on the next line to match (this is the one place @page can't read
   a JS value). Default: Brother QL-820NWB 62 x 100 mm die-cut. */
#badge { display: none; }

@media print {
  @page { size: 62mm 100mm; margin: 0; }

  /* Hide the whole app; show only the badge. Scoped to the KIOSK page so the
     admin "Print report" (body.admin) is unaffected. */
  body.kiosk * { visibility: hidden !important; }
  body.kiosk #badge, body.kiosk #badge * { visibility: visible !important; }
  body.kiosk #badge {
    display: block !important; position: fixed; left:0; top:0;
    width: 62mm; height: 100mm; margin:0; padding: 5mm 4mm;
    color: #000; background:#fff;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .badge-inner { height: 100%; display:flex; flex-direction:column; }
  .badge-logo-print { width: 22mm; height: 22mm; margin: 0 auto 3mm; }
  .badge-visitor-kicker {
    font-family: "Raleway", sans-serif; font-weight: 900; text-transform: uppercase;
    text-align:center; letter-spacing: .18em; font-size: 11pt;
    background:#000; color:#fff !important; padding: 1.5mm 0; margin-bottom: 3mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .badge-name {
    font-family: "Raleway", sans-serif; font-weight: 900; text-transform: uppercase;
    text-align:center; line-height: 1.02; font-size: 22pt; margin-bottom: 2mm; word-break: break-word;
  }
  .badge-company { font-family: "News Cycle", sans-serif; text-align:center; font-size: 12pt; margin-bottom: 4mm; }
  .badge-rows { font-family: "News Cycle", sans-serif; font-size: 10.5pt; margin-top:auto; }
  .badge-rows .r { display:flex; justify-content:space-between; gap: 2mm; padding: 1mm 0; border-top: .3mm solid #000; }
  .badge-rows .r .k { text-transform:uppercase; letter-spacing:.05em; }
  .badge-rows .r .v { font-weight: 700; text-align:right; }
  .badge-foot { text-align:center; font-family:"News Cycle", sans-serif; font-size: 8pt; margin-top: 2mm; }

  /* keep an on-screen "printing…" note from bleeding onto the label */
  .no-print { display:none !important; }
}

/* On-screen badge preview (so testers can see it without a printer). */
.badge-preview { border: var(--border-rule); border-radius: var(--radius-md); background:#fff;
                 width: 62mm; min-height: 100mm; padding: 5mm 4mm; color:#000; margin: var(--space-4) auto; }
.badge-preview .badge-inner { height:100%; display:flex; flex-direction:column; }
.badge-preview .badge-logo-print { width:22mm; height:22mm; margin:0 auto 3mm; }
.badge-preview .badge-visitor-kicker { font-family: var(--font-display); font-weight:900; text-transform:uppercase;
   text-align:center; letter-spacing:.18em; font-size:13px; background:#000; color:#fff; padding:4px 0; margin-bottom:8px; }
.badge-preview .badge-name { font-family: var(--font-display); font-weight:900; text-transform:uppercase;
   text-align:center; line-height:1.02; font-size:26px; margin-bottom:4px; word-break:break-word; }
.badge-preview .badge-company { font-family: var(--font-util); text-align:center; font-size:14px; margin-bottom:12px; }
.badge-preview .badge-rows { font-family: var(--font-util); font-size:13px; margin-top:auto; }
.badge-preview .badge-rows .r { display:flex; justify-content:space-between; gap:6px; padding:3px 0; border-top:1px solid #000; }
.badge-preview .badge-rows .r .k { text-transform:uppercase; letter-spacing:.05em; color:#333; }
.badge-preview .badge-rows .r .v { font-weight:700; text-align:right; }
.badge-preview .badge-foot { text-align:center; font-family: var(--font-util); font-size:10px; margin-top:8px; color:#333; }

/* ----------  6. REDUCED MOTION + ORIENTATION  ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Narrow / portrait: collapse the 2-up form to a single column. */
@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr; }
  #screen-idle .welcome-title { font-size: var(--fs-h1); }
  .btn-lg { min-height: 80px; font-size: 1.25rem; }
}

/* ----------  ADMIN PRINT REPORT  ----------
   A clean, letter-size print of the filtered log. Uses standard page margins
   (NOT the 62x100 label @page — that only applies on body.kiosk). */
.print-only { display: none; }
#reportHead h2 { font-family: var(--font-display); font-weight:900; text-transform:uppercase; }
#reportHead .data { color: var(--fg2); }

@media print {
  body.admin { background:#fff; }
  body.admin .no-print { display: none !important; }
  body.admin .admin-wrap { max-width: none; padding: 0; }
  body.admin .table-wrap { border: none; overflow: visible; }
  body.admin .print-only { display: block !important; margin-bottom: 8mm; }
  body.admin table.log { min-width: 0; width: 100%; font-size: 9pt; }
  body.admin table.log th { position: static; color:#000; border-bottom: 1px solid #000; }
  body.admin table.log td, body.admin table.log th { padding: 4px 6px; }
  body.admin table.log tr[data-status=in] td:first-child { box-shadow: none; }
  body.admin .status-pill { border: 1px solid #000; }
}

/* Build-version marker (kiosk footer + admin header). Unobtrusive; hidden in
   print. Uses News Cycle utility face via the .data class in markup. */
.version-tag {
  color: var(--fg3);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  white-space: nowrap;
}
@media print { .version-tag { display: none !important; } }