/* ============================================================
   D89 TRAINING MANAGER — front-end platform (v1.12.0)
   The signed-out screens (sign in, forgotten password, new password) and the page that
   holds the app full screen. Standalone pages: no theme styles are loaded, so plain
   selectors are safe here. Colours and type are the app's (approved mockup); the one
   decorative element is the certificate's cyan / gold / red stripe.
   ============================================================ */
:root{
  --navy:#16223A; --navy-2:#1F2E4D; --red:#E5424F; --cyan:#22A9D6; --gold:#D9A21B;
  --bg:#F1F3F6; --panel:#FFFFFF; --ink:#1C2433; --ink-2:#4B5563; --ink-3:#6B7482;
  --line:#CBD2DB; --ok:#1F7A45; --ok-bg:#E3F4E9; --bad:#B42B25; --bad-bg:#FBE4E2;
  --font:"Segoe UI",Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}

/* ---------- App page ---------- */
body.d89tm-site-app{min-height:100vh}
body.d89tm-site-app .d89tm-host{min-height:100vh}

/* ---------- Signed-out screens ---------- */
.gate{display:grid;grid-template-columns:minmax(340px,5fr) 7fr;min-height:100vh}
.gate-brand{position:relative;background:var(--navy);color:#fff;padding:56px 48px 72px;display:flex;flex-direction:column;justify-content:center}
.gate-logo{background:#fff;border-radius:6px;padding:14px 18px;width:max-content;max-width:100%}
.gate-logo img{display:block;height:64px;width:auto;max-width:100%}
.gate-org{margin:36px 0 0;font-size:28px;line-height:1.2;font-weight:600;max-width:18ch}
.gate-line{margin:12px 0 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.72);max-width:32ch}
.gate-stripe{position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--cyan) 0 50%,var(--gold) 50% 66%,var(--red) 66% 100%)}

.gate-form{display:flex;flex-direction:column;justify-content:center;padding:56px 48px;max-width:520px;width:100%;margin:0 auto}
.gate-form h1{margin:0;font-size:30px;line-height:1.2;font-weight:700;color:var(--navy)}
.gate-lead{margin:10px 0 24px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.gate-form form{display:flex;flex-direction:column}
.gate-form label{font-size:14px;font-weight:600;margin:14px 0 6px;color:var(--ink)}
.gate-form input[type=email],.gate-form input[type=password],.gate-form input[type=text]{height:46px;padding:0 14px;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px}
.gate-form input:focus-visible{outline:3px solid rgba(34,169,214,.45);outline-offset:1px;border-color:var(--navy)}
.gate-form .gate-check{display:flex;align-items:center;gap:10px;font-weight:400;margin:18px 0 4px;color:var(--ink-2)}
.gate-check input{width:18px;height:18px;margin:0;accent-color:var(--navy)}
.gate-form button,.gate-button{margin-top:22px;height:48px;border:0;border-radius:6px;background:var(--navy);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;text-decoration:none}
.gate-form button:hover,.gate-button:hover{background:var(--navy-2)}
.gate-form button:focus-visible,.gate-button:focus-visible,.gate-alt a:focus-visible{outline:3px solid rgba(34,169,214,.6);outline-offset:2px}
.gate-alt{margin:22px 0 0;font-size:15px}
.gate-alt a:not(.gate-button){color:var(--navy);font-weight:600;text-underline-offset:3px}
.gate-note{margin:0 0 8px;padding:12px 14px;border-radius:6px;font-size:14px;line-height:1.5}
.gate-note.error{background:var(--bad-bg);color:var(--bad)}
.gate-note.ok{background:var(--ok-bg);color:var(--ok)}

@media (max-width:820px){
  .gate{grid-template-columns:1fr;min-height:0}
  .gate-brand{padding:24px 24px 32px;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
  .gate-logo{padding:8px 12px}
  .gate-logo img{height:40px}
  .gate-org{margin:0;font-size:18px;max-width:none}
  .gate-line{display:none}
  .gate-stripe{height:6px}
  .gate-form{padding:32px 24px 48px}
  .gate-form h1{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}