/* Presentation only. Authentication, availability and approval remain runtime-owned. */
:root {
  --gate-radius: 16px;
  --gate-shadow: 0 2px 4px oklch(25% .035 255 / .025), 0 16px 48px oklch(25% .035 255 / .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: oklch(18% .018 245); --paper: oklch(23% .018 245);
    --ink: oklch(95% .012 245); --muted: oklch(74% .012 245);
    --line: oklch(38% .015 245); --accent: oklch(77% .12 245);
    --accent-bg: oklch(28% .045 245); --inverse: oklch(18% .01 245);
    color-scheme: dark;
  }
}
.topbar { max-width: 1200px; border-bottom: 0; padding-block: var(--s5); }
.brand { border-radius: 8px; }
.brand img { width: 166px; }
#gate-main { max-width: 880px; min-height: 0; padding-top: var(--s8); padding-bottom: var(--s6); }
#gate-main .page-head { max-width: 720px; margin: 0 auto var(--s8); }
#gate-main .page-head .eyebrow { font-size: var(--text-xs); color: var(--accent); letter-spacing: .12em; }
#gate-main .page-head h1 { max-width: 23ch; font-size: clamp(1.85rem, 1.3rem + 1.4vw, 2.65rem); line-height: 1.17; letter-spacing: -.045em; margin-top: var(--s4); }
#gate-status { font-size: var(--text-sm); line-height: 1.8; max-width: 62ch; }
#gate-view { margin-top: 0; margin-bottom: 0; border-radius: var(--gate-radius); padding: clamp(var(--s5), 4vw, var(--s10)); box-shadow: var(--gate-shadow); overflow-wrap: anywhere; }
#gate-view > .eyebrow { margin-bottom: var(--s3); font-size: var(--text-xs); }
#gate-view h2 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: -.035em; margin-bottom: var(--s5); }
#gate-view > p { line-height: 1.8; color: var(--muted); }
#gate-view > p:not(.fineprint, .gate-signature) { font-size: var(--text-base); }
#gate-view > label { margin-top: var(--s6); }
#gate-view > button { margin-top: var(--s5); }
#gate-view > .camera-box { margin-top: var(--s6); border-radius: 12px; }
#selfie-off { color: #e4e6df; }
#selfie-off{position:relative;z-index:1}
#gate-view > .secondary { margin-top: var(--s5); }
.gate-form { display: grid; gap: var(--s5); margin-top: var(--s6); }
.gate-form label { margin: 0; font-weight: 700; line-height: 1.65; }
.gate-form label > input:not([type=checkbox]),
#gate-view > label > input:not([type=checkbox]) { margin-top: var(--s2); }
#gate-view input:not([type=checkbox], [type=range]) {
  min-height: 52px; padding: var(--s3) var(--s4); border-radius: 9px;
  background: var(--bg); font-size: 1rem; line-height: 1.5;
}
#gate-view input:not([type=checkbox], [type=range]):hover { border-color: color-mix(in srgb, var(--muted) 65%, var(--line)); }
#gate-view input[type=checkbox] { accent-color: var(--accent); margin-top: var(--s1); }
#gate-view input[type=file] { padding: var(--s3); font-size: var(--text-sm); }
#gate-view input::file-selector-button {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: var(--s2) var(--s3); margin-right: var(--s3); font: inherit; cursor: pointer;
}
#gate-view input[type=range] { accent-color: var(--accent); }
.gate-form .check { margin: 0; }
#gate-view .check { padding: var(--s4); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: var(--text-sm); font-weight: 500; line-height: 1.8; }
.gate-form button { justify-self: stretch; }
.primary, .secondary { min-height: 50px; border-radius: 9px; padding: var(--s3) var(--s5); line-height: 1.5; }
.primary:not(:disabled):hover { filter: brightness(.95); }
.secondary:not(:disabled):hover { border-color: var(--accent); background: var(--accent-bg); }
.text-button { min-height: 44px; padding: var(--s2) var(--s3); line-height: 1.5; }
button:disabled { opacity: .5; cursor: not-allowed; }
button:not(:disabled):active, a.primary:active, a.secondary:active { transform: translateY(1px); }
.gate-error {
  color: var(--ink); background: var(--accent-bg); padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; overflow-wrap: anywhere; line-height: 1.8;
}
.gate-tabs { display: flex; gap: var(--s3); margin: var(--s6) 0; flex-wrap: wrap; }
.gate-qr {
  background: white; color: black; padding: var(--s5); max-width: 290px; margin: var(--s8) auto;
  border: 1px solid var(--line); border-radius: 12px;
}
.gate-qr svg { display: block; width: 100%; height: auto; }
#handoff-state { padding: var(--s4); background: var(--bg); border-radius: 8px; font-size: var(--text-sm); text-align: center; }
.gate-steps {
  font-size: var(--text-xs); font-weight: 800; line-height: 1.7; letter-spacing: .09em;
  color: var(--accent); padding-bottom: var(--s4); margin-bottom: var(--s6); border-bottom: 1px solid var(--line);
}
.gate-portrait { display: block; width: 160px; height: 160px; object-fit: cover; border-radius: 12px; margin-block: var(--s5); border: 1px solid var(--line); }
.gate-text {
  white-space: pre-wrap; max-height: 38vh; overflow: auto; overscroll-behavior: contain;
  padding: var(--s5); border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.9;
  scrollbar-color: var(--line) var(--bg);
}
.gate-secret { overflow-wrap: anywhere; padding: var(--s5); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; margin-block: var(--s5); }
.gate-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin: var(--s6) 0; }
.gate-actions a { min-height: 44px; }
.gate-actions > * { max-width: 100%; }
.gate-actions:empty { display: none; }
.gate-signature { font-size: var(--text-xs); overflow-wrap: anywhere; line-height: 1.8; color: var(--muted); }
body > section.narrow.panel {
  width: calc(100% - 5rem); max-width: 720px; margin: 0 auto var(--s12); padding: var(--s5) var(--s6);
  border-radius: 12px; background: transparent; box-shadow: none;
}
#gate-report { padding-inline: 0; text-align: left; }
#gate-report-preview { padding: var(--s4); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
body > section.narrow.panel .fineprint { margin-top: var(--s2); line-height: 1.75; }
.gate-brand-name { text-transform: none; }
footer { max-width: 1200px; padding-block: var(--s8); color: var(--muted); }
.gate-print { display: none; }
@media (max-width: 560px) {
  .topbar { padding: var(--s4) var(--s5); }
  .topbar > .eyebrow { max-width: 8em; text-align: right; font-size: var(--text-xs); }
  .brand img { width: 140px !important; }
  #gate-main { padding: var(--s6) var(--s5); }
  #gate-main .page-head { margin-bottom: var(--s6); }
  #gate-main .page-head h1 { font-size: clamp(1.85rem, 6.6vw, 2.25rem); }
  #gate-view { padding: var(--s5); border-radius: 12px; }
  .gate-form { gap: var(--s5); }
  .gate-actions { gap: var(--s3); }
  .gate-actions .primary, .gate-actions .secondary { flex: 1 1 100%; }
  .gate-actions .text-button { padding-left: 0; text-align: left; }
  .gate-form button { width: 100%; }
  #gate-view > .primary { width: 100%; }
  .gate-text { padding: var(--s4); font-size: 1rem; line-height: 1.8; }
  body > section.narrow.panel { width: calc(100% - 2.5rem); padding: var(--s4) var(--s5); margin-bottom: var(--s8); }
  footer { padding-block: var(--s6); }
}
@media (prefers-reduced-motion: no-preference) {
  button, input, .primary, .secondary { transition: border-color .18s ease, background .18s ease, transform .18s ease; }
}
@media print {
  body > *:not(.gate-print) { display: none !important; }
  .gate-print { display: block; color: #111; background: white; font-family: Georgia, 'Times New Roman', serif; font-size: 11pt; line-height: 1.55; }
  .gate-print-head { display: flex; align-items: center; gap: 14pt; padding-bottom: 10pt; margin-bottom: 14pt; border-bottom: 1.5pt solid #111; }
  .gate-print-head img { width: 84pt; height: 84pt; object-fit: cover; border-radius: 6pt; border: 1pt solid #bbb; }
  .gate-print-head small { display: block; font: 8pt system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #555; }
  .gate-print-head b { font-size: 14pt; }
  .gate-print h3 { font-size: 15pt; margin: 0 0 10pt; letter-spacing: 0; }
  .gate-print p { margin: 0 0 8pt; }
  .gate-print-sign { margin-top: 18pt !important; padding-top: 8pt; border-top: 1pt solid #111; }
  .gate-print-note { font: 8pt ui-monospace, monospace; color: #555; overflow-wrap: anywhere; }
}

/* Agreement shown as a printed document: headshot in the header, readable body, signature block */
.gate-paper{margin-block:var(--s5);padding:var(--s6);background:#fbfaf7;color:#16181d;border:1px solid #d9d6cf;border-radius:6px;box-shadow:0 10px 28px #0005;font-family:Georgia,'Times New Roman',serif}
.gate-paper-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);padding-bottom:var(--s4);margin-bottom:var(--s5);border-bottom:2px solid #16181d}
.gate-paper-photo{flex:none;width:96px;height:96px;border-radius:8px;border:1px dashed #9a968d;background:#efede8;display:flex;align-items:center;justify-content:center;overflow:hidden;font:600 var(--text-xs)/1.2 var(--font-body);color:#6b675f}
.gate-paper-photo .gate-portrait{width:96px;height:96px;margin:0;border:0;border-radius:0}
.gate-paper-photo:has(img),.gate-paper-photo:has(canvas:not([hidden])){border:1px solid #b9b5ac;background:#fff}
.gate-paper-who{min-width:0;flex:1 1 160px;display:grid;gap:var(--s1)}
.gate-paper,.gate-paper b,.gate-paper h3,.gate-paper p{color:#16181d}
.gate-paper-who b{font-size:var(--text-lg);overflow-wrap:anywhere}
.gate-paper-label{font:700 var(--text-xs)/1.3 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:#5d5a53}
#gate-view .gate-paper label{color:#16181d;font-family:var(--font-body)}
#gate-view .gate-paper input:not([type=range]){background:#fff;color:#16181d;border-color:#b9b5ac}
#gate-view .gate-paper .text-button{color:#1f4fa8;min-height:36px;padding-inline:0 var(--s4)}
#gate-view .gate-paper .gate-actions{margin:0}
.gate-photo-pick{margin:var(--s2) 0 0;justify-self:start;cursor:pointer}
#gate-view .gate-paper .gate-photo-pick{color:#16181d;background:#fff;border-color:#b9b5ac}
.gate-paper-title{font-size:var(--text-lg);letter-spacing:-.01em;margin-bottom:var(--s4)}
.gate-paper-body p{font-size:var(--text-sm);line-height:1.75;margin:0 0 var(--s4)}
.gate-paper-sign{display:grid;gap:var(--s1);margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid #16181d;font-size:var(--text-sm)}
.gate-paper-sign b{font-size:var(--text-lg);font-style:italic}
.gate-paper-sign span:last-child{font-family:var(--font-body);font-size:var(--text-xs);color:#5d5a53}
.gate-next{margin:var(--s4) 0;padding-left:1.3em;display:grid;gap:var(--s3);font-size:var(--text-sm);line-height:1.55}
@media (max-width:560px){.gate-paper{padding:var(--s5) var(--s4)}.gate-paper-photo,.gate-paper-photo .gate-portrait{width:80px;height:80px}}

/* Self-check page: long fingerprints and codes wrap on phones */
#nda-meta,#self-meta,#overall,#checks li{overflow-wrap:anywhere;word-break:break-word}

/* Owner desk: invite QR card and revoke control */
.gate-invite-qr-card{border:2px solid currentColor;border-radius:12px;padding:16px;margin:12px 0}
#invite-list p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.gate-revoke{min-height:44px;padding:8px 16px;border-color:#d05a5a;color:#d05a5a}

/* Password field with Show/Hide */
.gate-password-row{display:flex;gap:8px;align-items:stretch}
#gate-main .gate-password-row input{flex:1 1 auto;width:auto;min-width:0}
#gate-main .gate-password-row .gate-reveal{flex:0 0 auto;width:auto;min-width:76px;min-height:48px;margin:0;padding:0 var(--s4)}

/* iOS Safari zooms into inputs under 16px; keep form text at 16px or larger on phones */
#gate-main input,#gate-main select,#gate-main textarea{font-size:max(16px,1em)}
#password-live{margin-top:var(--s2)}
#recovery-once{user-select:all;-webkit-user-select:all}
/* Fewer words: empty status lines take no space; compact action rows */
#gate-status:empty{display:none}
.gate-tight{margin-top:var(--s2)}
.gate-report-wrap{margin-top:var(--s6);text-align:center}
#gate-main .page-head h1{margin-top:0}
#gate-view .gate-actions{flex-wrap:wrap}
#gate-view .gate-actions>*{max-width:100%}
#gate-view,#gate-view .gate-form,#gate-view label,#gate-view .gate-password-row{min-width:0;max-width:100%;box-sizing:border-box}
#gate-view input{box-sizing:border-box;max-width:100%}
#gate-main .page-head,#gate-main .page-head>div{min-width:0;max-width:100%}
#gate-main .page-head h1{overflow-wrap:anywhere}
#gate-view.gate-auth .gate-form{gap:var(--s3);margin-top:0}
#gate-view.gate-auth .gate-form p:empty{display:none}
#gate-view.gate-auth .gate-form .check{padding:var(--s2) 0;background:none;border:0}
#gate-view.gate-auth .gate-actions{margin-block:var(--s3)}
.gate-document-person{display:flex;align-items:center;gap:var(--s4)}
.gate-document-person .gate-portrait{width:88px;height:88px;flex:none}
#gate-view #approval-form{margin-top:var(--s4);gap:var(--s3)}
.gate-center{justify-content:center}
#gate-view .gate-shutter{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--paper)}
#gate-view .gate-shutter.pika-shutter{width:96px;height:100px;background:transparent;border:0;box-shadow:none}
#gate-view .gate-shutter.pika-shutter img{width:86px;height:88px}
.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}
.gate-security-card{width:min(420px,calc(100% - 2rem));max-height:calc(100dvh - 2rem);overflow:auto;margin:auto;padding:var(--s5);border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:var(--gate-shadow)}
.gate-security-card::backdrop{background:#08233ed9}
.gate-security-head{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s4)}
.gate-security-head img{flex:none;object-fit:contain}
#gate-view .gate-security-card h2{font-size:var(--text-xl);margin:0}
.gate-security-card p{font-size:var(--text-sm);line-height:1.6}
.gate-security-card .fineprint{font-size:var(--text-sm)}
.gate-security-card .gate-actions{margin:var(--s5) 0 0}
#gate-view .gate-security-card .gate-actions .primary{flex:1}
#gate-view .gate-security-card .gate-actions .text-button{flex:0 0 auto;padding-inline:var(--s4)}
.gate-welcome-card { text-align:center; background:#eef8ff; color:#132742; border:2px solid #77c7f5; border-radius:24px; max-height:calc(100dvh - 32px); overflow:auto; box-shadow:0 18px 60px #06294a55; }
.gate-welcome-card::backdrop { background:#071b3b99; backdrop-filter:blur(3px); }
.gate-welcome-pika { display:block; margin:0 auto 16px; padding:10px; box-sizing:content-box; border-radius:24px; background:#fff4c9; }
.gate-welcome-card h2 { color:#075eca; margin:0 0 12px; }
.gate-welcome-card p { color:#263f5b; line-height:1.55; }
.gate-welcome-card .primary { width:100%; margin-top:12px; background:#076bd9; color:white; border-color:#076bd9; }
.gate-topbar { position:sticky; top:0; z-index:20; flex-wrap:wrap; background:var(--paper); }
.gate-topbar #logout { flex-shrink:0; min-height:44px; white-space:nowrap; }
/* Selfie preview: aspect-ratio plus min-height pushed the box past 320px screens in WebKit */
#gate-view .camera-box{min-height:0;width:100%;max-width:100%}
.gate-links{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.gate-links h2{font-size:var(--text-lg);margin-bottom:var(--s3)}
.gate-links ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.gate-links li{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);font-size:var(--text-sm)}
/* Seal a document (Founder, 2026-10-04) */
.seal-page .gate-actions{display:grid;gap:12px}
.seal-pick{display:flex;justify-content:center;align-items:center;min-height:56px;padding:12px 18px;border-radius:12px;background:var(--accent);color:var(--inverse);font-weight:800;font-size:18px;cursor:pointer}
.seal-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seal-choice{display:grid;gap:4px;width:100%;padding:16px;border:2px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);text-align:left;font:inherit;font-size:17px}
.seal-choice b{font-size:19px}.seal-choice span{color:var(--muted);font-size:15px}
.seal-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin:14px 0;padding:0;list-style:none}
.seal-pages img{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);border-radius:8px;background:#fff}
.seal-pages li{position:relative}.seal-pages small{position:absolute;left:6px;top:4px;padding:1px 6px;border-radius:6px;background:#000a;color:#fff;font-weight:800}
.seal-doc{padding:14px;border:1px solid var(--line);border-radius:12px;font-size:17px;overflow-wrap:anywhere}
.seal-form label{display:grid;gap:6px;font-weight:700;font-size:17px}
.seal-form input[type=text],.seal-form input[type=email],.seal-form input[type=tel],.seal-form input:not([type]){font-size:18px;min-height:50px}
.seal-agree{display:flex!important;grid-template-columns:none;gap:10px!important;align-items:flex-start;font-weight:600!important}
.seal-agree input{width:24px;height:24px;flex:0 0 auto;margin-top:2px}
.seal-camera{position:relative;width:100%;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:#000}
.seal-camera video,.seal-camera img{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.seal-headshot{width:180px;height:180px;border-radius:12px;object-fit:cover;border:2px solid var(--line)}
.seal-done{padding:16px;border:2px solid var(--line);border-radius:14px;font-size:17px}
.seal-done h2{margin-top:0}
.seal-page .fineprint{font-size:15px}
.seal-soon-list{display:grid;gap:6px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.seal-soon-list .text-button{text-align:left;font-size:16px}
.seal-soon-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--accent-bg,#e8f1fb);color:var(--ink);font-size:13px;font-weight:800;vertical-align:middle}
.seal-soon p{font-size:17px;line-height:1.45}
.seal-trail{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px}
.seal-trail h2{margin:0 0 6px;font-size:18px}.seal-trail ol{margin:0;padding-left:22px;font-size:16px;line-height:1.5}
.gate-computer-door{margin-top:18px}.gate-computer-door a{display:inline-block;text-decoration:none}
.gate-team .team-state{font-weight:700}.gate-team .team-state.on{display:inline-block;background:#b3261e;color:#fff;padding:6px 10px;border-radius:8px}
.team-grid{list-style:none;margin:16px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.team-grid li{border:1px solid var(--line);border-radius:12px;padding:8px;min-width:0}.team-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}
.team-grid p{margin:8px 0 4px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
body[data-owner] .topbar{flex-wrap:wrap}

/* Live selfie coaching (guided-capture.js) */
#gate-view .guide-coach{margin:var(--s3) 0 0;min-height:1.5em;text-align:center;font-weight:700}
#gate-view .guide-bar{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s2)}
#gate-view .guide-pill{padding:2px 12px;border:1px solid var(--line);border-radius:999px;font-size:var(--text-xs);color:var(--muted)}
#gate-view .guide-pill.ok{border-color:var(--accent);color:var(--accent)}