/* Version J (owner, 2026-10-19): the few rules the prototype markup needs as a real page. They change nothing the designs show:
   state wrappers, a visually hidden file input, the form's honeypot, error lines and the one-line confirmation. */
.when { display: contents; }
.when[hidden] { display: none; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* the request form: an error stands under its field, in the colour kept for a failed check */
.ferr { margin: 0; font-size: 13px; line-height: 20px; color: var(--bad); }
.ferr:empty, .ferr[hidden] { display: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--bad); }
form[data-request][hidden] { display: none !important; }   /* the form's inline grid would otherwise outrank [hidden] */
.sent { margin: 0; max-width: 540px; font-size: 17px; line-height: 27px; font-weight: 600; color: var(--ink); }
.sent:focus { outline: none; }

/* the header on narrow screens: the designs give it no rule, and its row is wider than a phone. At 860 px and below the page
   links move into a menu (assets/js/j-nav.js; without script they are in the footer). "Log in" follows them at 480 px, and the
   primary button at 420 px; both are in the menu too. */
@media (max-width: 860px) { header nav[aria-label="Primary"] { display: none !important; } }   /* the nav's own inline flex would win */
@media (max-width: 480px) { header > div > div > a.navlink[href="https://app.tallwright.com/sign-in"] { display: none !important; } }
@media (max-width: 420px) { header > div > div > .btn-primary { display: none !important; } }
.menu-btn { display: none; appearance: none; background: none; border: 0; padding: 0; font-family: var(--sans); cursor: pointer; }
@media (max-width: 860px) { .js .menu-btn { display: inline-flex; } }
.menu-panel { border-top: 1px solid var(--line); background: var(--paper); }
.menu-panel[hidden] { display: none; }
@media (min-width: 861px) { .menu-panel { display: none !important; } }
.menu-panel nav { max-width: 1200px; margin: 0 auto; padding: 4px 24px 20px; display: grid; }
.menu-link { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink-muted); text-decoration: none; }
.menu-link:hover, .menu-link-on { color: var(--ink); }
.menu-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.menu-cta { justify-self: start; margin-top: 16px; }

/* the verifier's drop zone is also the file picker */
.drop { cursor: pointer; }
.drop:focus-within { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.drop-over { border-color: var(--ink); color: var(--ink); }