/* IntelBev — CLIENT app stylesheet (intelbev_client.css)
   Extracted VERBATIM from the LOCKED prototype
   docs/recovery/prototypes/auth_screens_v1.html  (M4 / P2.2-B4, 2026-07-08).
   The prototype-only .proto-note / .proto-grid / .proto-label scaffolding classes
   are intentionally NOT carried over (they only laid the six screens out for review).
   Brand tokens are copied to match intelbev_v2.css EXACTLY; client-only tokens added.
   Per ToR §2 two-stylesheet decision: the client app uses THIS sheet; the admin app
   keeps intelbev_v2.css. Do not edit token values here without matching intelbev_v2.css. */
:root{
  /* Brand tokens — copied to match intelbev_v2.css EXACTLY (shared across both apps) */
  --bottle:#123B63; --bottle-2:#1C567F;
  --canvas:#EEF2F6; --line:#D6DCE3;
  --brass:#C0913E;                 /* sole accent */
  --ok:#5E8C6A; --dir:#5B7A92; --watch:#A85A3C;   /* semantic status */
  --ok-bg:#E6EFE8; --dir-bg:#E5ECF1; --watch-bg:#F3E6DF; --brass-bg:#F4EAD6;
  --ink:#1A1E1B;
  /* Client-only design tokens (NOT in the admin app) */
  --line-strong:#C3CCD6;
  --surface:#FFFFFF; --surface-2:#F5F8FB;
  --ink-2:#4A5B6B; --ink-3:#7C8B99;
  --radius:12px; --radius-sm:8px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1{font-size:22px;font-weight:600;letter-spacing:-0.01em;}
h2{font-size:18px;font-weight:600;letter-spacing:-0.01em;}
a{color:var(--bottle-2);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ---- the real building blocks reproduced from the prototype ---- */
.authwrap{background:var(--canvas);border-radius:var(--radius);padding:2rem 1rem;}
.card{max-width:400px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2.5rem 2.25rem;}
.card.sm{padding:1.75rem 1.5rem;}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:1.75rem;}
.brand-mark{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--bottle);display:flex;align-items:center;justify-content:center;}
.brand-mark span{color:var(--brass);font-weight:600;font-size:17px;}
.brand-name{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-0.01em;}
.sub{font-size:14px;color:var(--ink-2);margin:4px 0 1.75rem;line-height:1.5;}
.field-label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}
.input{width:100%;height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font-size:14px;color:var(--ink);font-family:inherit;background:var(--surface);margin-bottom:1.1rem;}
.input::placeholder{color:var(--ink-3);}
.input:focus{outline:none;border-color:var(--bottle-2);box-shadow:0 0 0 3px rgba(28,86,127,0.12);}
.hint{font-size:12px;color:var(--ink-3);margin:-0.7rem 0 1.5rem;}
.row-between{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
.link-sm{font-size:12.5px;color:var(--bottle-2);}
.check{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);margin-bottom:1.5rem;cursor:pointer;}
.check input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.check .box{width:17px;height:17px;border:1px solid var(--bottle);border-radius:4px;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:12px;line-height:1;}
.check .box .glyph{visibility:hidden;}
.check input:checked + .box{background:var(--bottle);}
.check input:checked + .box .glyph{visibility:visible;}
.btn{width:100%;height:44px;background:var(--bottle);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;letter-spacing:0.01em;}
.btn:hover{background:#0d2f4f;}
.btn.sm{height:42px;font-size:14px;}
.foot{text-align:center;font-size:13.5px;color:var(--ink-2);margin-top:1.5rem;}
.foot.divide{border-top:1px solid var(--line);margin-top:1.5rem;padding-top:1.25rem;}
.notice-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.notice-icon.mail{background:var(--dir-bg);color:var(--bottle-2);}
.notice-icon.ok{background:var(--ok-bg);color:var(--ok);}
.center{text-align:center;}
.notice-body{font-size:13px;color:var(--ink-2);line-height:1.55;}
.notice-body strong{color:var(--ink);font-weight:600;}
/* Simple check/mail glyphs so the pages need no icon font */
.glyph{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;font-size:20px;font-weight:700;}