/* Fort Point HenHouse floor login — minimalist retro-terminal on white.
   One monospace type system, square corners, hairline frames, a single salmon
   accent (focus / active / selection). Flat: no shadows, no gradients.
   Full-bleed layout: fills the whole ChromeOS sign-in frame with large touch
   targets. The CSS var *names* below are load-bearing (JS references --slate /
   --salmon-dark), so they're kept even though the palette is now ink + salmon. */
:root{
  --ink:#17181c;          /* body text / strong frames */
  --ink-2:#3b3f45;        /* secondary text, brand wordmark */
  --slate:#17181c;        /* headings, primary buttons, "ok"/neutral text (JS) */
  --slate-dark:#000000;   /* button :active */
  --salmon:#d8556e;       /* THE accent: focus, filled dots, hover borders */
  --salmon-dark:#c0392b;  /* error text (JS references this) */
  --salmon-soft:#fbeef1;  /* faint accent wash (key :active) */
  --ink-on:#ffffff;
  --muted:#8b9198;        /* dim / captions */
  --line:#e2e1db;         /* hairline dividers */
  --bg:#ffffff;
  --mono:ui-monospace,"SF Mono","SFMono-Regular",Menlo,"JetBrains Mono","Cascadia Mono",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}  /* keep the attribute authoritative over flex/grid rules */
html,body{height:100%;width:100%;max-width:100%;overflow-x:hidden}
body{
  margin:0;
  font-family:var(--mono);
  background:var(--bg);
  color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100%;   /* fill the CONTAINER Google gives us (html,body are height:100%),
                        not the device viewport — 100dvh doesn't track Google's resized
                        SAML login div, so the card wouldn't fill it in portrait. */
}
/* The surface now fills the whole frame; content lives in a centered column. */
.card{
  position:relative;
  width:100%;flex:1 1 auto;min-height:0;   /* fill body in any orientation, but never
                                              outgrow it — the roster grid scrolls instead */
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(24px,4vh,56px) clamp(20px,5vw,72px);
}
/* sections are the centered content column */
#roster-view,#pin-view{width:100%;max-width:980px}
#roster-view{display:flex;flex-direction:column;min-height:0;max-height:100%}

/* Text wordmark (replaces the old raster logo). Uniform weight, terminal caps. */
.brand{
  font-family:var(--mono);text-align:center;text-transform:uppercase;
  letter-spacing:.22em;font-weight:500;color:var(--ink-2);
  font-size:clamp(14px,2.1vh,19px);line-height:1.3;
  margin:0 auto clamp(18px,3vh,30px);
}
/* legacy hook — any remaining <img class="logo"> stays sized sanely */
.logo{display:block;height:clamp(44px,6vh,64px);margin:0 auto clamp(18px,3vh,30px);object-fit:contain}

h1{font-size:clamp(26px,3.4vh,38px);font-weight:600;letter-spacing:-.01em;text-align:center;margin:0 0 8px;color:var(--slate)}
.sub{text-align:center;color:var(--muted);margin:0 0 clamp(22px,4vh,38px);font-size:clamp(15px,2.1vh,19px)}
.empty{text-align:center;color:var(--muted);font-size:17px}

/* Roster grid — auto-fit square tiles, centered; scrolls when the crew outgrows the frame */
.roster{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,180px));
  gap:clamp(14px,2vw,22px);
  justify-content:center;
  align-content:safe center;
  min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:4px 8px 12px;
}
.roster::-webkit-scrollbar{width:10px}
.roster::-webkit-scrollbar-thumb{background:var(--line)}
.roster::-webkit-scrollbar-track{background:transparent}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:clamp(20px,3vh,30px) 12px;border:1px solid var(--line);border-radius:0;
  background:#fff;cursor:pointer;font:inherit;color:var(--ink);
  transition:border-color .12s ease,transform .06s ease;
}
.tile:hover{border-color:var(--salmon)}
.tile:active{transform:scale(.98)}
.tile .avatar{width:clamp(60px,8.4vh,78px);height:clamp(60px,8.4vh,78px);font-size:clamp(20px,3vh,26px)}
.tile .nm{font-weight:600;font-size:clamp(15px,2.1vh,19px);text-align:center;line-height:1.2;letter-spacing:.01em}

/* Square monochrome initials badge (no per-user colour — JS no longer sets a bg). */
.avatar{
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ink);border-radius:0;background:transparent;
  color:var(--ink);font-weight:600;letter-spacing:.06em;flex:none;
}

/* PIN view */
.back{
  position:absolute;top:clamp(18px,3vh,34px);left:clamp(18px,3vw,40px);
  border:none;background:none;color:var(--muted);font:inherit;font-size:16px;letter-spacing:.04em;
  cursor:pointer;padding:8px 12px;
}
.back:active{background:#f2f1ec}
/* PIN view: identity+camera panel BESIDE the entry panel in landscape, STACKED in portrait. */
#pin-view{display:flex;align-items:center;justify-content:center;width:100%;max-width:none}
.pin-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(24px,5vw,80px);width:100%;max-width:1120px}
.pin-id{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.4vh,24px);flex:0 0 auto}
.pin-entry{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:100%;max-width:380px}
.who{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,12px)}
.who .avatar{width:clamp(58px,8.6vh,88px);height:clamp(58px,8.6vh,88px);font-size:clamp(22px,3.2vh,30px)}
#pin-view h1{font-size:clamp(23px,3.2vh,34px);margin:0;text-align:center}
#pin-view .sub{margin:0 0 clamp(6px,1.2vh,14px)}
@media (orientation:portrait){
  .pin-wrap{flex-direction:column;gap:clamp(10px,2vh,22px);max-width:560px}
  .pin-id{flex-direction:row;gap:clamp(16px,4vw,28px)}
}

.dots{display:flex;gap:clamp(14px,2vh,20px);justify-content:center;margin:clamp(10px,2vh,20px) 0 4px}
.dots span{
  width:clamp(15px,2vh,19px);height:clamp(15px,2vh,19px);border-radius:0;
  border:1px solid var(--ink);background:transparent;transition:all .12s ease;
}
.dots span.on{background:var(--salmon);border-color:var(--salmon)}
.dots.bad span{border-color:var(--salmon);background:var(--salmon)}
.dots.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.pin-error{min-height:20px;text-align:center;color:var(--salmon-dark);font-size:14px;font-weight:600;letter-spacing:.01em;margin:2px 0 clamp(8px,1.6vh,16px);max-width:320px}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vh,16px);width:100%;max-width:clamp(300px,40vh,400px)}
.key{
  height:clamp(56px,10vh,92px);border-radius:0;border:1px solid var(--ink);background:#fff;
  font:inherit;font-size:clamp(22px,3.2vh,30px);font-weight:600;color:var(--ink);cursor:pointer;
  transition:transform .05s ease,background .12s ease;
}
.key:active{transform:scale(.96);background:var(--salmon-soft)}
.key-ghost{border-color:var(--line);font-size:clamp(13px,2vh,16px);font-weight:600;color:var(--muted);text-transform:lowercase;letter-spacing:.05em}

/* Busy overlay */
.busy{position:fixed;inset:0;background:rgba(255,255,255,.72);display:flex;align-items:center;justify-content:center}
.spinner{width:44px;height:44px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--salmon);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* In-flow footer: sits below the card in the body's flex column, never overlaps. */
.foot{flex:none;width:100%;text-align:center;color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:14px 0 16px}
/* device-attestation diagnostic bar */
.diag{position:fixed;top:0;left:0;right:0;z-index:50;padding:6px 12px;font-size:12px;
  font-family:var(--mono);text-align:center;background:#17181c;color:#cfe;letter-spacing:.2px}

/* primary button — filled ink block, terminal caps, square, flat */
.btn{
  display:block;width:max-content;margin:8px auto 0;padding:15px 30px;border:1px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--ink-on);text-decoration:none;font-family:var(--mono);
  font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
}
.btn:active{background:var(--slate-dark);border-color:var(--slate-dark)}
.btn:disabled{opacity:.45}
button.btn{cursor:pointer;font:inherit;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.note{text-align:center;color:var(--muted);font-size:13px;margin-top:18px}

/* ---- Password view (non-managed): familiar email -> password sign-in ---- */
#pw-view,#recovery-view,#reset-view{width:100%;max-width:430px;margin:0 auto;text-align:left}
#pw-view h1,#recovery-view h1,#reset-view h1{text-align:left;font-size:clamp(23px,3vh,29px);margin:0 0 6px}
#pw-view .sub,#recovery-view .sub,#reset-view .sub{text-align:left;margin:0 0 clamp(18px,2.6vh,26px)}
/* floating-label outlined field, square + hairline */
.ifield{position:relative;margin:0 0 16px}
.ifield input{
  width:100%;padding:16px 14px;border:1px solid var(--ink);border-radius:0;
  font:inherit;font-size:17px;background:#fff;color:var(--ink);
}
.ifield input:focus{outline:2px solid var(--salmon);outline-offset:-2px}
.ifield label{
  position:absolute;left:12px;top:16px;padding:0 6px;color:var(--muted);background:#fff;
  font-size:17px;pointer-events:none;transition:all .12s ease;
}
.ifield input:focus + label,
.ifield input:not(:placeholder-shown) + label{
  top:-8px;font-size:12px;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;
}
.pw-show{display:inline-flex;align-items:center;gap:9px;margin:14px 0 0;color:var(--ink-2);font-size:14px;cursor:pointer}
.pw-show input{width:16px;height:16px;accent-color:var(--salmon)}
.pw-error{height:20px;color:var(--salmon-dark);font-size:13px;font-weight:600;margin:8px 0 0}
.pw-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(24px,4vh,40px)}
.pw-actions .btn{margin:0;padding:13px 26px;font-size:13px}
.linkbtn{border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--ink-2);cursor:pointer;padding:8px 4px}
.linkbtn:hover{color:var(--salmon);text-decoration:underline;text-underline-offset:3px}
.linkbtn:active{color:var(--salmon)}
.pin-links{display:flex;gap:clamp(10px,2vw,22px);justify-content:center;flex-wrap:wrap;margin-top:clamp(8px,1.6vh,14px)}
/* live login-camera preview (mirrored). Square, hairline; salmon border when the shutter is closed. */
.cam{display:block;width:clamp(200px,30vh,320px);aspect-ratio:4/3;object-fit:cover;border-radius:0;
  border:1px solid var(--line);background:#000;transform:scaleX(-1)}
.cam.cam-blocked{border-color:var(--salmon);border-width:2px}
.cam.shake{animation:shake .4s}
@media (orientation:portrait){ .cam{width:clamp(120px,16vh,190px)} }

/* form fields (account / set-PIN) */
#form,#signedout,#loading{width:100%;max-width:460px;margin:0 auto}
.field{margin:0 0 18px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;margin:0 0 6px}
.field input{
  width:100%;padding:15px 14px;border:1px solid var(--ink);border-radius:0;
  font:inherit;font-size:19px;letter-spacing:.12em;background:#fff;color:var(--ink);
}
.field input:focus{outline:2px solid var(--salmon);outline-offset:-2px}

/* NetSuite hosted picker (/netsuite/) — square, left-aligned account rows */
.ns-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(12px,1.8vw,18px);width:100%;max-width:640px;margin:0 auto}
.ns-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  padding:clamp(15px,2.2vh,22px) 16px;border:1px solid var(--ink);border-radius:0;
  background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color .12s ease,transform .06s ease}
.ns-btn .ns-label{font:600 clamp(15px,2.1vh,18px) var(--mono);letter-spacing:.01em}
.ns-btn .ns-last{font:500 12px var(--mono);color:var(--muted);min-height:15px;line-height:1.3}
.ns-btn:hover{border-color:var(--salmon)}
.ns-btn:active{transform:scale(.98)}
.ns-btn:disabled{opacity:.5;cursor:default}
#picker-view{width:100%;max-width:720px}
.ns-note{text-align:center;color:var(--muted);font-size:13px;margin:clamp(16px,3vh,26px) auto 0;max-width:56ch;line-height:1.6}