/* The sign-in look, shared by the portal login (index.html) and the outside
   inspection surface (pages/inspect.html).
   Lifted out of index.html rather than copied, so the two cannot drift — a
   second sign-in screen that looks nearly the same is worse than one that
   looks different, because people read the difference as a fake. */
    /* ── Sign-in ──────────────────────────────────────────────────────────
       Split: brand on the left, form on the right. Airo Mobile's sign-in is
       the same design stacked, so the two stop looking like two products —
       they had different backgrounds, different logo treatments and different
       button colours, and the first thing anyone saw of either was the one
       screen where they disagreed most. */
    body { min-height: 100vh; background: var(--bg-deep); }

    .signin { display: grid; grid-template-columns: minmax(0, 52%) 1fr; min-height: 100vh; }
    /* Under ~860px there is no room for two columns, so the brand becomes a
       band across the top — which is exactly what the phone does. */
    @media (max-width: 860px) { .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } }

    /* Brand side. Always dark: it is a brand surface, not a themed one, and it
       is the only part of either app that never follows the theme toggle. */
    .signin-brand {
      position: relative; overflow: hidden;
      background: radial-gradient(120% 100% at 0% 0%, #1b2540, #0d1526 62%);
      display: flex; flex-direction: column; justify-content: space-between;
      padding: clamp(40px, 4.2vw, 84px);
    }
    /* The mark, animated. Alphas are baked into the drawing rather than set
       here — an opacity on the element would stack on top of them and put the
       whole thing under the floor. */
    .signin-brand-watermark {
      position: absolute; right: -170px; bottom: -180px; pointer-events: none;
      width: clamp(420px, 46vw, 860px); height: clamp(420px, 46vw, 860px);
    }
    /* The logo is centred across the panel; the headline stays against the
       left edge where it reads as a statement rather than a caption. */
    .signin-logo { position: relative; display: block; margin: 0 auto;
      width: clamp(260px, 26vw, 520px); max-width: 100%; height: auto; }
    /* Over the form, not on the brand panel — so the product name sits with
       the thing you are signing in to rather than with the company mark. */
    .signin-airo {
      font-size: clamp(34px, 2.7vw, 50px); font-weight: 800; letter-spacing: .15em;
      line-height: 1; margin-bottom: clamp(18px, 1.6vw, 26px);
      background: linear-gradient(100deg, #b98947, #dbc078 45%, #faf0a1);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .signin-copy { position: relative; }
    .signin-copy h2 {
      font-size: clamp(21px, 2vw, 34px); font-weight: 400;
      color: rgba(234, 240, 250, .82);
      line-height: 1.35; letter-spacing: 0; margin: 0;
    }
    /* What the product does, in four words. No separators between them — the
       spacing does that job. */
    .signin-verbs {
      display: flex; flex-wrap: wrap; align-items: center;
      gap: clamp(10px, 1.1vw, 20px);
      margin-top: clamp(20px, 2vw, 30px);
      font-size: clamp(11px, 0.85vw, 14px); font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase; color: #dbc078;
    }
    .signin-verbs i { font-style: normal; opacity: .5; letter-spacing: 0; }

    /* Form side. This one does follow the theme. */
    .signin-form {
      display: flex; align-items: center; justify-content: center;
      background: #ffffff; padding: 40px clamp(24px, 4.2vw, 84px);
      color: #0f1b2d;
    }

    /* A dark card on the white, which is what lets AIRO be real gold — the
       word cannot be gold on white at 2:1, but on navy it is the brand colour
       doing exactly what it is for.
       The card carries the DARK tokens explicitly rather than relying on the
       page theme: app.js re-applies whichever theme the account chose, so a
       light-mode account would otherwise render light controls inside it. */
    .signin-card {
      border-radius: 18px;
      padding: clamp(26px, 2.2vw, 38px);
      background: linear-gradient(160deg, #16203a, #0d1526 70%);
      border: 1px solid rgba(159,178,208,.14);
      box-shadow: 0 2px 6px rgba(15,27,45,.10), 0 22px 60px rgba(15,27,45,.22);

      --bg-card: #141c2e;
      --bg-surface: rgba(255,255,255,.05);
      --text-primary: #eaf0fa;
      --text-secondary: #9fb2d0;
      --text-muted: #8fa3c0;
      --border: rgba(159,178,208,.16);
      --border-mid: rgba(159,178,208,.22);
      --gold: #dbc078;
      --gold-dim: #b98947;
      --red: #f87171;
      --red-bg: rgba(248,113,113,.10);
      color: var(--text-primary);
    }
    /* Three classes deep on purpose. app.css writes its light-mode controls as
       `html[data-theme="light"] .form-input`, which carries an element selector
       and so out-specifies a two-class rule — a light-mode account was getting
       a white input inside this dark card, with light text on it. */
    .signin-form .signin-card .form-input {
      background: rgba(255,255,255,.05); color: var(--text-primary);
      border-color: rgba(159,178,208,.22);
    }
    .signin-form .signin-card .form-input::placeholder { color: #7c8fac; }
    .signin-form .signin-card .form-input:focus { border-color: #dbc078; }
    .signin-form .signin-card .btn-primary {
      background: linear-gradient(100deg, #b98947, #dbc078 45%, #faf0a1);
      border-color: #dbc078; color: #20180a;
    }
    .signin-form .signin-card .btn-primary:hover {
      background: #e8d08a; border-color: #e8d08a; color: #20180a;
    }
    .signin-form .signin-card .back-link:hover { color: var(--text-primary); }
    .signin-form-inner { width: 100%; max-width: clamp(340px, 27vw, 440px); }

    .login-title { font-size: clamp(22px, 1.6vw, 30px); font-weight: 700; margin-bottom: 4px; }
    /* Step one no longer has a sub-line under the heading, so the heading
       carries the gap itself. The 2FA step still has one and keeps the pair. */
    #step-password .login-title { margin-bottom: 24px; }
    .login-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 26px; }
    .login-footer {
      display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
      margin-top: 20px; font-size: 12px; color: var(--text-muted);
    }
    .login-footer a { color: var(--text-muted); text-decoration: none; }
    .login-footer a:hover { color: var(--text-secondary); text-decoration: underline; }

    .error-msg {
      background: var(--red-bg);
      border: 1px solid rgba(248,113,113,0.3);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      font-size: 13px;
      color: var(--red);
      margin-bottom: 1rem;
      display: none;
    }

    .input-icon-wrap { position: relative; }
    .input-icon-wrap i {
      position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
      color: var(--text-muted); font-size: 16px; pointer-events: none;
    }
    .input-icon-wrap .form-input { padding-left: 42px; height: clamp(50px, 3.4vw, 58px); font-size: 15px; }

    .totp-input {
      text-align: center; font-size: 24px; letter-spacing: 0.4em;
      font-family: var(--font-mono); height: 56px;
    }

    .step { display: none; }
    .step.active { display: block; }

    .back-link {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 12px; color: var(--text-muted); cursor: pointer; margin-bottom: 1rem;
    }
    .back-link:hover { color: var(--text-secondary); }

    .remember-row {
      display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
      margin-top: 2px; font-size: 13.5px; color: var(--text-secondary);
    }
    .remember-row input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--gold); }
    .remember-row small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

    /* ── Stacked ─────────────────────────────────────────────────────────
       Last on purpose: these override base rules of equal specificity, and a
       media query carries no extra weight of its own. */
    @media (max-width: 860px) {
      .signin-brand {
        padding: 28px 26px 30px;
        align-items: stretch;
        justify-content: flex-start;
        gap: 16px;
      }
      .signin-copy h2 { font-size: 19px; }
      .signin-form { justify-content: center; padding: 34px 26px 40px; }
      .signin-form-inner { max-width: 420px; }
      .signin-airo { font-size: 32px; margin-bottom: 18px; }
      .signin-verbs { gap: 9px; margin-top: 18px; font-size: 11px; }
      .signin-logo { width: min(300px, 74%); }
      .signin-brand-watermark { width: 420px; height: 420px; right: -130px; top: -110px; bottom: auto; }
      .signin-card { padding: 22px; }
    }