/* =========================================================
   Quzer QMS - styles
   Part 1: Quzer design tokens (from the Quzer design system)
   Part 2: Quzer components (from the Quzer design system)
   Part 3: Page layout for the sign-in and signed-in screens
   ========================================================= */

/* ---------- Part 1: tokens ---------- */
:root {
  --navy: #182433;
  --teal: #0f9d78;
  --teal-dark: #0b7f61;
  --text-heading: var(--navy);
  --text-label: #3d4854;
  --text-check: #5b6672;
  --text-body: #6a7480;
  --text-eyebrow: #98a1a9;
  --surface-card: #ffffff;
  --surface-tint: #fafbfa;
  --surface-page: #f4f6f5;
  --border-control: #dfe3e2;
  --border-divider: #eceeed;
  --border-rule: #e6e9e8;
  --on-navy-body: rgba(255,255,255,0.72);
  --on-navy-eyebrow: rgba(255,255,255,0.40);
  --on-navy-footer: rgba(255,255,255,0.34);
  --ring-outline: rgba(255,255,255,0.08);
  --ring-teal: rgba(15,157,120,0.22);
  --focus-glow: rgba(15,157,120,0.14);
  --shadow-card: 0 30px 80px -30px rgba(0,0,0,0.55);
  --shadow-focus: 0 0 0 3px rgba(15,157,120,0.14);
  --shadow-lift: 0 6px 16px -8px rgba(24,36,51,0.35);

  --gap-group-sm: 9px;
  --gap-group: 12px;
  --gap-section-sm: 16px;
  --gap-section: 26px;
  --radius-card: 16px;
  --radius-panel: 14px;
  --radius-control: 9px;
  --control-h: 44px;
  --control-h-mobile: 48px;
  --fade: 180ms;
  --stagger: 65ms;
  --lift-button: 2px;
  --lift-card: 3px;
  --font-sans: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Used only for error messages */
  --error-bg: #fdf1f0;
  --error-text: #8a1f17;

  /* TEST strip (test address only). Red = "not production".
     White text on this red is 5.9:1. */
  --env-bar-h: 48px;
  --env-tag-bg: #c0291e;
}

/* ---------- Part 2: components ---------- */
.qz-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--control-h);padding:0 18px;border-radius:var(--radius-control);
  border:1px solid transparent;font:600 13.5px/1 var(--font-sans);cursor:pointer;
  background:var(--navy);color:#fff;text-decoration:none;
  transition:background var(--fade) ease,color var(--fade) ease,border-color var(--fade) ease,transform var(--fade) ease,box-shadow var(--fade) ease;
}
.qz-btn:hover{background:var(--teal-dark);transform:translateY(calc(-1 * var(--lift-button)));box-shadow:var(--shadow-lift)}
.qz-btn:active{transform:none;box-shadow:none}
.qz-btn:focus-visible{outline:none;border-color:var(--teal);box-shadow:var(--shadow-focus)}
.qz-btn:disabled{opacity:.6;cursor:wait;transform:none;box-shadow:none}
.qz-btn--outline{background:var(--surface-card);color:var(--text-heading);border-color:var(--border-control)}
.qz-btn--outline:hover{background:var(--surface-card);color:var(--teal-dark);border-color:var(--teal)}
.qz-eyebrow{margin:0;font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-eyebrow)}
.qz-card{
  background:var(--surface-card);border-radius:var(--radius-card);padding:26px;
  box-shadow:var(--shadow-card);color:var(--text-body);
}
.qz-panel{
  background:var(--navy);border-radius:var(--radius-panel);padding:26px;
  box-shadow:0 0 0 1px var(--ring-outline);color:var(--on-navy-body);
  font:400 15px/1.5 var(--font-sans);
}
.qz-panel .qz-eyebrow{color:var(--on-navy-eyebrow);margin-bottom:var(--gap-group)}
.qz-panel__footer{margin:var(--gap-section) 0 0;font:400 10.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-navy-footer)}
.qz-info{background:var(--surface-page);border-radius:var(--radius-panel);padding:16px 18px;font:400 14px/1.5 var(--font-sans);color:var(--text-label)}
.qz-info--error{background:var(--error-bg);color:var(--error-text)}
.qz-info--error strong{display:block;margin-bottom:4px}
.qz-info--error code{font:400 12.5px/1.4 var(--font-mono);word-break:break-all}

/* TEST tag: mono capitals, white on red.
   Only shown on the test address; app.js removes "hidden". */
.qz-env-bar{display:flex;align-items:center;height:var(--env-bar-h);padding:0 16px}
.qz-env-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--radius-control);background:var(--env-tag-bg);color:#fff;
  font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* ---------- Part 3: page layout ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{
  min-height:100vh;background:var(--surface-page);color:var(--text-body);
  font:400 15px/1.4 var(--font-sans);-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

/* Loading */
.loading{min-height:100vh;display:grid;place-items:center}

/* Sign-in screen: navy panel on the left, white card on the right */
.signin{
  min-height:100vh;max-width:1040px;margin:0 auto;padding:40px 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-section);align-items:stretch;
}
.signin__panel{display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.signin__logo{width:148px;height:auto}
.signin__panel-body{margin:64px 0}
.signin__panel-title{margin:0 0 var(--gap-group);font:600 26px/1.3 var(--font-sans);letter-spacing:-.01em;color:#fff}
.signin__panel-body p:last-child{margin:0}

.signin__card{display:flex;flex-direction:column;justify-content:center;gap:var(--gap-group);padding:40px}
.signin__card-logo{display:none;width:132px;height:auto;margin-bottom:var(--gap-section-sm)}
.signin__title{margin:0;font:600 26px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text-heading)}
.signin__lead{margin:0 0 var(--gap-group);color:var(--text-body)}
.signin__button{width:100%;margin-bottom:var(--gap-group)}
.ms-logo{width:16px;height:16px;flex:none}

/* On the test address, make room for the TEST strip so the page still fits the screen */
.is-test .loading,
.is-test .signin{min-height:calc(100vh - var(--env-bar-h))}
.is-test .signin{padding-top:8px}

/* Signed-in screen */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1040px;margin:0 auto;padding:24px;
}
.topbar__logo{width:120px;height:auto}
.home__main{max-width:1040px;margin:0 auto;padding:16px 24px 48px}
.home__card{max-width:640px}
.home__card .qz-eyebrow{margin-bottom:var(--gap-group)}
.home__title{margin:0 0 var(--gap-group);font:600 26px/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--text-heading)}
.home__summary{margin:0 0 var(--gap-section);color:var(--text-label)}
.home__summary strong{color:var(--text-heading);font-weight:600}

.details{margin:0 0 var(--gap-section-sm);border-top:1px solid var(--border-divider)}
.details__row{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-divider)}
.details dt{font:500 12.5px/1.6 var(--font-sans);color:var(--text-label)}
.details dd{margin:0;color:var(--text-heading);word-break:break-word}
.mono{font-family:var(--font-mono);font-size:13px}

/* Cards fade up on load */
@keyframes qz-fade-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.signin__panel,.signin__card,.home__card{animation:qz-fade-up 420ms ease both}
.signin__card{animation-delay:var(--stagger)}

/* Mobile: stack, hide the panel, show the logo on the card */
@media (max-width:760px){
  .signin{grid-template-columns:1fr;padding:16px;align-items:center}
  .signin__panel{display:none}
  .signin__card{padding:28px 20px}
  .signin__card-logo{display:block}
  .qz-btn{height:var(--control-h-mobile)}
  .topbar{padding:16px}
  .home__main{padding:8px 16px 32px}
  .home__card{padding:22px 18px}
  .details__row{grid-template-columns:1fr;gap:2px}
}

/* Less motion when the user asks for it, and clean printing */
@media (prefers-reduced-motion:reduce){
  .qz-btn{transition:none}
  .qz-btn:hover{transform:none}
  .signin__panel,.signin__card,.home__card{animation:none;opacity:1;transform:none}
}
@media print{
  .signin__panel,.signin__card,.home__card,.qz-btn{animation:none;opacity:1 !important;transform:none !important;box-shadow:none !important}
}