/* web/pages/auth/auth.css · [AUTH1 auth-extract-v1]
   The sign-in / sign-up gate's stylesheet. Lifted VERBATIM out of the
   inline <style> that used to sit inside #auth-gate in index.html
   (lines 121-354). Not one declaration changed.

   Cascade: the <link> that replaced it sits at the SAME document
   position, so load order is byte-for-byte what it was. Nothing else
   in the app styles .ag-* / #ag-* / #auth-gate (verified across all 11
   stylesheets), so there is no competing rule to lose a fight with.

   The MARKUP stays in index.html on purpose: boot/login.js binds
   #auth-gate, #ag-form, #ag-email ... by getElementById at parse time,
   and boot/nofill.js must see #auth-gate to skip it (autofill there is
   wanted). Fetching this markup async would break both. */
/* ======================================================================
   [AG2 auth-split] Auth gate (sign in / create account) - phase 1.

   Design intent:
   - Split shell: a cobalt->navy brand panel on the left (45%) and a flat
     form on the right. The card is gone on purpose - with no card the page
     itself is the surface, so the form reads as the page's one job instead
     of a dialog floating on an empty background.
   - What makes it distinctive: this panel is the only cobalt-filled
     surface in the whole product, and it carries three sentences that are
     literally true of this app (local data, logins kept in DreamR's own
     browser profile, plain-language work). The first screen says
     something instead of being a generic centred box.
   - Tokens used: --primary/--rail for the gradient, --white, --success for
     the checks, --font-brand for the wordmark (brand surface only, kit
     section 3), --font everywhere else, kit section 7 for the fields,
     section 6 "Large" for the button, --space-* for the rhythm.

   Tokens only: every colour, radius and font below is a var(). The gate
   paints before the app shell, but the stylesheets above are already
   linked and boot/theme.js (line 18) sets data-theme pre-paint, so this
   is correct in dark and light from the very first frame.

   Contrast, checked by hand against kit section 19 (4.5:1 text / 3:1
   non-text) - the brand panel is fixed cobalt->navy in BOTH themes, so
   these numbers do not change with the theme:
     --white on --primary #3563FF (the lightest end) ... 4.79:1  PASS
     --white on --rail    #0B1230 (the darkest end)  ... 17.6:1  PASS
     --success check on --primary (non-text, 3:1)    ... 3.70:1  PASS

   JS contract (boot/login.js) - do NOT change these hooks:
     #auth-gate.hidden   gate dismissed after auth
     .ag-field[hidden]   name row toggled for signup. The explicit rule is
                         REQUIRED: .ag-field sets display:flex, which would
                         otherwise beat the plain hidden attribute.
     #ag-err[hidden]     error line shown/cleared by showErr()
     #ag-title #ag-sub #ag-submit #ag-signup   text swapped by setMode()
   ====================================================================== */
#auth-gate{
  position:fixed;inset:0;z-index:9999;
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:14px;line-height:1.5;
}
#auth-gate.hidden{display:none}
/* [AG1] Set by the pre-paint script in <head> for an already-signed-in
   session, so the gate is never painted at all on reload. */
html.dr-authed #auth-gate{display:none}

/* ---- brand panel (left) --------------------------------------------
   Kit section 18: the sign-up brand panel is a cobalt gradient and keeps
   it in light theme too, so the product reads as one brand either way.
   --primary is identical in both themes and --rail stays navy in both,
   so this gradient is theme-independent by construction - no light-theme
   override is needed or wanted. Each column scrolls on its own; the gate
   holds no popover, so a local overflow here is safe (Patterns 3).
   -------------------------------------------------------------------- */
.ag-brand{
  display:grid;
  align-content:center;
  /* `safe` keeps the top reachable when the block is taller than the
     viewport — plain centring would push it off the top edge with no way
     to scroll back. Dropped whole by any engine that lacks it, which
     falls back to the line above. */
  align-content:safe center;
  min-width:0;min-height:0;overflow:auto;
  padding:var(--space-9);
  /* [AUTH2] halves swapped (Sarthak, 2026-10-12): the logo GIFs are opaque
     ink / white, so on cobalt they read as a pasted-on patch. This panel is
     now the logo's own colour (--brand-logo-tile: ink dark, white light,
     components/brand/brand.css) and the cobalt gradient moved to .ag-pane.
     Was: background:linear-gradient(158deg,var(--primary) 0%,var(--rail) 100%);
          color:var(--white); */
  background:var(--brand-logo-tile);
  color:var(--brand-fg);
}
.ag-brand-in{width:100%;max-width:420px;margin-inline:auto}

/* [AG4] Kit section 3 allows no letter-spacing outside uppercase labels and
   large stat numbers, so the wordmark carries none. 40/700 over 28/600 with
   32px between them: the wordmark is the brand, the headline is the claim. */
/* [BRAND1] retired: the wordmark text became the AiSockt logo tile
   (.ag-logo in components/brand/brand.css). Restore with the markup line in index.html.
.ag-wordmark{
  margin:0 0 var(--space-8);
  font-family:var(--font-brand);
  font-size:40px;font-weight:700;line-height:1.15;
} */
.ag-brand-head{
  margin:0 0 var(--space-6);
  font-size:28px;font-weight:600;line-height:1.25;
}
.ag-points{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:var(--space-4);
}
/* [AG4] `margin:0` is load-bearing: renderer.css:45 ships a BARE
   `li { margin: 5px 0 }` into this document, which the flex `gap` then
   stacked on top of — 26px between bullets instead of 16. */
.ag-points li{margin:0;display:flex;align-items:flex-start;gap:var(--space-3)}
.ag-points span{min-width:0;font-size:14px;font-weight:400;line-height:1.5;
  color:color-mix(in srgb,var(--brand-fg) 80%,var(--brand-logo-tile))}
/* Kit section 15: line icons, 24-unit grid, 1.6-1.8 stroke, round caps,
   no fill, and aria-hidden because the sentence carries the meaning. */
.ag-chk{
  flex:none;width:16px;height:16px;margin-top:3px;
  fill:none;stroke:var(--brand-check);stroke-width:1.8;   /* [AUTH2] lime / lime-deep on white */
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- form column (right) --------------------------------------------
   Same centring context as the brand panel — identical display, identical
   align-content and identical vertical padding — so the two blocks resolve
   their centres against the same box and cannot drift apart. */
.ag-pane{
  display:grid;
  align-content:center;
  align-content:safe center;
  min-width:0;min-height:0;overflow:auto;
  padding:var(--space-9) var(--space-8);
  /* [AUTH2] below 1024px the brand panel is hidden and the small logo
     (.ag-logo-sm) sits on this pane, so the pane takes the logo's colour
     there; the cobalt version is the wide-screen block at the end. */
  background:var(--brand-logo-tile);
}
.ag-form-col{width:100%;max-width:400px;margin-inline:auto;text-align:left}

/* [AG4] border-bottom + padding-bottom are the FIX, not decoration:
   renderer.css:37-38 ships a BARE
     h2 { padding-bottom: 4px; border-bottom: 1px solid var(--dr-border) }
   into this document (index.html:13, no iframe — Patterns 18). #ag-title is
   an <h2>, so it inherited a hairline rule under "Sign in" / "Create your
   account" and 4px of phantom height. The old rule set font and margin but
   never border or padding, so both leaked through. */
#ag-title{
  margin:0 0 var(--space-2);
  padding-bottom:0;border-bottom:0;
  color:var(--text);font-size:24px;font-weight:700;line-height:1.2;
}
.ag-sub{margin:0 0 var(--space-8);color:var(--text-dim);font-size:14px}

/* [AG4] Explicit per-child margins instead of a blanket `gap`. With a gap,
   the always-reserved status line sat between the button and the link and
   collected a gap on BOTH sides — 54px of air under the button. Margins on
   the BOTTOM edge also behave correctly when a child is hidden: the name
   row (login) and the error line simply contribute nothing, whereas an
   adjacent-sibling or :first-of-type rule still matches a display:none
   element and would leave a stray 16px above the Email field. */
#ag-form{display:flex;flex-direction:column;gap:0}

.ag-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.ag-field[hidden]{display:none}
.ag-field label{color:var(--text);font-size:13px;font-weight:600;line-height:1.4}

/* Kit section 7: 40px, padding 0 12, radius 9, SURFACE fill, 1px border-2.
   The fill moved from --bg to --surface with the card: the form now sits
   directly on --bg, so an input filled with --bg would have no fill at
   all and only the border would separate it. */
.ag-field input{
  height:40px;padding:0 var(--space-3);
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--radius-input);
  color:var(--text);font-family:inherit;font-size:14px;
  transition:border-color 120ms ease-out;
}
.ag-field input::placeholder{color:var(--placeholder)}
.ag-field input:hover{border-color:var(--border-hover)}
.ag-field input:focus-visible{border-color:var(--selected-border)}

/* Kit section 6, size "Large": 44px, padding 0 20, 15px label, weight 600,
   full width on a form. */
#ag-submit{
  margin-top:var(--space-1);
  height:44px;padding:0 var(--space-5);
  background:var(--primary);border:0;
  border-radius:var(--radius-btn);
  color:var(--white);font-family:inherit;font-size:15px;font-weight:600;
  line-height:1;cursor:pointer;
  transition:background-color 120ms ease-out;
}
#ag-submit:hover{background:var(--primary-hover)}
#ag-submit:active{background:var(--primary-pressed)}
#ag-submit:disabled{opacity:.45;cursor:not-allowed}

/* Kit section 6 "Link" variant: accent text, 500, underline on hover.
   [AG4] margin-top:0 — the 18px of the reserved status line above it IS
   the gap from the button, and that is the whole distance now. */
.ag-alt{
  align-self:flex-start;
  margin-top:0;
  padding:var(--space-1) 0;border:0;border-radius:4px;background:transparent;
  color:var(--accent-text);font-family:inherit;font-size:14px;font-weight:500;
  cursor:pointer;text-align:left;
}
.ag-alt:hover{color:var(--accent-hover);text-decoration:underline}

.ag-err{margin:0 0 var(--space-3);color:var(--danger);font-size:13px;line-height:1.4}
/* The status line keeps its height even when empty, so "Signing in…"
   appearing does not shove the link underneath it down the page.
   [AG4] 1.4em == exactly one rendered line at this font-size, so the
   reserved box and the filled box are the same height to the pixel. */
.ag-note{margin:0;min-height:1.4em;color:var(--text-muted);font-size:13px;line-height:1.4}

/* Focus ring, kit section 6: 2px selected-border with a 2px gap.
   Keyboard only - :focus-visible. No transition on the ring. */
#auth-gate :is(button,input,a):focus-visible{
  outline:2px solid var(--selected-border);
  outline-offset:2px;
}

/* Below the kit's 1024px band (section 4.4) the brand panel goes and the
   form owns the full width - a 45% panel at tablet width would squeeze
   the form to about 380px of usable space with padding. */
@media (max-width:1023px){
  #auth-gate{grid-template-columns:minmax(0,1fr)}
  .ag-brand{display:none}
}
@media (max-width:480px){
  .ag-pane{padding:var(--space-6) var(--space-5)}
  #ag-title{font-size:21px}
}

/* ---- [AUTH2] the form on cobalt (wide screens, where the panel shows) ---
   The gradient the brand panel used to carry. Everything on it is restated
   for a saturated blue background in BOTH themes:
     text            white; secondary lines white at 80% / 75%
     inputs          solid white with ink text - legible, and Chrome's
                     autofill tint stays readable on it
     Sign in         lime with ink text: the AiSockt primary button, and a
                     blue button on a blue pane would disappear
     error           a red-tinted box with white text (plain red text on
                     cobalt fails contrast)
     focus ring      white
   Contrast: white on --primary 4.79:1 (lightest end), on --rail 17.6:1;
   ink on lime 12.3:1 (brand pack). */
@media (min-width:1024px){
  .ag-pane{
    background:linear-gradient(158deg,var(--primary) 0%,var(--rail) 100%);
    color:var(--white);
  }
  .ag-pane #ag-title,
  .ag-pane .ag-field label{color:var(--white)}
  .ag-pane .ag-sub{color:color-mix(in srgb,var(--white) 80%,transparent)}
  .ag-pane .ag-note{color:color-mix(in srgb,var(--white) 75%,transparent)}
  .ag-pane .ag-field input{
    background:var(--white);
    border-color:transparent;
    color:var(--brand-ink);
  }
  .ag-pane .ag-field input::placeholder{color:color-mix(in srgb,var(--brand-ink) 45%,var(--white))}
  .ag-pane .ag-field input:hover{border-color:color-mix(in srgb,var(--white) 60%,transparent)}
  .ag-pane .ag-field input:focus-visible{border-color:var(--white)}
  .ag-pane #ag-submit{background:var(--success);color:var(--brand-ink)}
  .ag-pane #ag-submit:hover{background:color-mix(in srgb,var(--success) 85%,var(--white))}
  .ag-pane #ag-submit:active{background:color-mix(in srgb,var(--success) 85%,var(--brand-ink))}
  .ag-pane .ag-alt,
  .ag-pane .ag-alt:hover{color:var(--white)}
  .ag-pane .ag-err{
    padding:var(--space-2) var(--space-3);
    border-radius:var(--radius-input);
    background:color-mix(in srgb,var(--danger) 38%,transparent);
    color:var(--white);
  }
  /* #auth-gate-qualified: the base ring rule is #auth-gate :is(...):focus-visible
     (1,1,1); without the id this (0,2,1) override would lose */
  #auth-gate .ag-pane :is(button,input,a):focus-visible{outline-color:var(--white)}
}

/* Profile menu — fixed bottom-left inside rail column, ALWAYS visible */
#ag-profile-wrap{position:fixed;left:0;bottom:0;z-index:55;width:var(--rail-w);background:transparent;border:none}
#ag-profile{display:flex;align-items:center;justify-content:center;padding:10px 0 16px;cursor:pointer}
#ag-profile:hover{background:transparent}
/* [PF2 avatar-shape] The profile avatar was a full circle (border-radius:50%),
   the only circular *surface* in the shell — every other container (rail
   buttons, menu items, cards, inputs) is a rounded rectangle on the kit's
   radius scale, so it read as a foreign shape. var(--radius-btn) is 10px on
   this 36px square, which is the same corner the rail buttons and menu items
   use. The status dots (.devchip-dot, #gwdot) stay 50% — those are dots, not
   surfaces. Restore: put back border-radius:50%. */
#ag-profile .ag-av{width:36px;height:36px;border-radius:var(--radius-btn);background:var(--avatar);color:var(--white);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;transition:transform .15s}
#ag-profile:hover .ag-av{transform:scale(1.06)}
#ag-profile .ag-nm, #ag-profile .ag-chev{display:none}
body.takeover #ag-profile-wrap, body.convcollapsed #ag-profile-wrap{width:var(--rail-w)}
body.takeover #ag-profile-wrap .ag-nm, body.convcollapsed #ag-profile-wrap .ag-nm,
body.takeover #ag-profile-wrap .ag-chev, body.convcollapsed #ag-profile-wrap .ag-chev{display:none}
body.takeover #ag-profile, body.convcollapsed #ag-profile{justify-content:center;padding:10px 0 16px}
/* Popup opens above the profile avatar */
/* ---- [PF1 profile-menu-trim] (Sarthak, 2026-10-10) -----------------------
   The profile menu and the navbar's three-dots menu are the same kind of
   object — an app-level popup menu — so they now share one scale instead of
   drifting apart. Every value below is taken from .more-pop / .more-item /
   .more-sep (brandkit.css:1318-1386), which is the brand kit's menu:

     type      15px        -> 13.5px / 500     (kit body scale is 13-15)
     padding   11px 12px   -> 8px 12px
     gap       11px        -> 10px
     radius    9px         -> var(--radius-btn)
     surface   --panel     -> --surface
     popup     radius-card -> radius-pop, min-width 212 -> 180
     separator --border    -> --border-2, margin 4px 6px
     icon      17px        -> 16px, to sit with 13.5px text

   If brandkit.css:1318-1386 changes, change this with it. */
#ag-profile-pop{position:absolute;bottom:calc(100% + 8px);left:10px;min-width:180px;max-width:260px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-pop);box-shadow:var(--shadow-pop);padding:6px;z-index:60;display:flex;flex-direction:column;gap:2px}
#ag-profile-pop.hidden{display:none}
#ag-profile-pop button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;color:var(--text);font-family:var(--font);font-size:13.5px;font-weight:500;line-height:1.3;text-align:left;padding:8px 12px;border-radius:var(--radius-btn);cursor:pointer;transition:background 120ms ease}
#ag-profile-pop button:hover{background:var(--surface-2)}
#ag-profile-pop button.danger{color:var(--danger)}
#ag-profile-pop button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#ag-profile-pop .ag-sep{height:1px;background:var(--border-2);margin:4px 6px}
#ag-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  left: auto;
  bottom: auto;
  transform: translateY(-12px) scale(0.95);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 12px;
  z-index: 99999;
  font-size: 13.5px;
  font-weight: 500;
  max-width: min(440px, calc(100vw - 32px));
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
  background: color-mix(in srgb, #84cc16 13%, #14171f);
  border: 1px solid color-mix(in srgb, #84cc16 38%, transparent);
  color: #d9f99d;
}
#ag-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
:root[data-theme="light"] #ag-toast {
  background: color-mix(in srgb, #2563eb 8%, #ffffff);
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  box-shadow: 0 12px 28px -4px rgba(37, 99, 235, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05);
}
#ag-toast .ag-toast-ico {
  width: 18px;
  height: 18px;
  flex: none;
  color: #a3e635;
}
:root[data-theme="light"] #ag-toast .ag-toast-ico {
  color: #2563eb;
}