/* NITRATE - sign-in gate.
 * The one screen a stranger ever sees, so it carries the identity on its own:
 * the vault door rather than a form. Colours from tokens.css only.
 */

/* A column flex box that SCROLLS, with the card centred by auto block margins
 * rather than by align-items.  Main-axis auto margins absorb positive free
 * space and collapse to 0 when there is none, so on a short screen (a small
 * Android in landscape, or an iPhone once the URL bar and the keyboard are
 * up) the card starts at the top and scrolls — where `align-items:center`
 * would have centred it and clipped its head off with no way to scroll back.
 * The insets keep it clear of the notch and the home indicator.
 */
.lg-root{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--ground);
  /* the --safe-* tokens from mobile.css; identical computed values to the
     env() calls they replace, and 0 everywhere there is no notch */
  padding:calc(24px + var(--safe-t))
          calc(18px + var(--safe-r))
          calc(24px + var(--safe-b))
          calc(18px + var(--safe-l));
}

.lg-card{
  margin:auto 0;
  width:min(520px,100%);
  background:var(--panel); border:1px solid var(--rule); border-radius:3px;
  padding:34px 32px 26px; text-align:left;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.5);
  position:relative; overflow:hidden;
}
/* the film-strip edge, the same motif the masthead uses */
.lg-card::before{
  content:''; position:absolute; left:0; right:0; top:0; height:12px;
  background:repeating-linear-gradient(90deg,var(--panel-2) 0 8px,transparent 8px 20px);
}

.lg-mark{margin:6px 0 2px; font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1}
.lg-mark-a{color:var(--ink)}
.lg-mark-b{color:var(--accent)}

.lg-sub{
  margin:0 0 20px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

.lg-lede{margin:0 0 22px; font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:46ch}

.lg-btn{
  font:inherit; font-size:14px; font-weight:650; letter-spacing:.01em;
  background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:2px;
  padding:11px 22px; cursor:pointer; width:100%;
}
.lg-btn:hover:not(:disabled){filter:brightness(1.08)}
.lg-btn:disabled{opacity:.62; cursor:default}

.lg-msg{margin:12px 0 0; font-size:13px; color:var(--ink-2); min-height:1.2em}
.lg-msg.is-bad{color:var(--crit)}
.lg-msg.is-ok{color:var(--ok)}
.lg-hint{margin:6px 0 0; font-size:12px; color:var(--muted)}
.lg-link{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor}

.lg-foot{
  margin:22px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  font-size:11.5px; line-height:1.55; color:var(--muted); max-width:48ch;
}

/* DOORS_20260901 — the optional ways in, under the form */
.lg-doors-rule{
  margin:16px 0 12px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.lg-doors-rule::before,.lg-doors-rule::after{
  content:""; flex:1 1 auto; border-top:1px solid var(--rule);
}
.lg-doors{display:flex; flex-direction:column; gap:8px}
.lg-alt{
  display:flex; align-items:center; justify-content:center; min-height:42px;
  font:inherit; font-size:13px; color:var(--ink-2); background:none;
  border:1px solid var(--rule); cursor:pointer; text-decoration:none;
}
.lg-alt:hover{color:var(--ink); border-color:var(--ink-2)}
.lg-pk-toggle{
  display:block; margin:-6px 0 14px; padding:0; background:none; border:0;
  font:inherit; font-size:11.5px; color:var(--accent); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

/* the signed-in chip that sits in the masthead */
.lg-who{display:flex; align-items:center; gap:8px; position:relative}
/* MASTMENU_20260905 — THE PERSON AS ONE PILL, AND A MENU UNDER IT.
 * John, 2026-09-05: "i want avatar shown in top nav too, also polish more UI
 * and UX for the top nav (now kind of confusing)".  Measured before: four
 * look-alike hairline boxes on the right (ADMIN · VIEW AS READER · SIGN OUT ·
 * THE LIGHT TABLE), the owner's name wrapping the row to 65px at 1440, and on
 * a phone the tier word crushed to 1px under VIEW AS READER.
 * Now: face (24px), name, tier word, caret — one button, the door to a small
 * menu that holds what stood loose beside it (profile · view-as · theme · sign
 * out).  The familiar shape, and it gives the row back ~180px, which is what
 * ends the overlaps.  ⛔ Classes keep their names: .lg-who-btn is still what
 * the probes press, .lg-view / .lg-out / #themetoggle keep their identities.
 * The pill is 30px tall so a baseline-aligned desktop row stays one line. */
/* STREAMMARK_20260905 — position:relative so the live badge can hang off the
 * face without entering the row's layout at all.  See .lg-me-live below. */
.lg-who-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:8px; min-width:0;
  background:none; border:1px solid var(--rule); border-radius:999px;
  margin:0; padding:2px 10px 2px 2px;
  font:inherit; color:inherit; cursor:pointer;
}
.lg-who-btn:hover,
.lg-who-btn[aria-expanded="true"]{border-color:var(--ink-2)}
.lg-who-btn:hover .lg-who-role{color:var(--ink)}
.lg-me-face{
  width:24px; height:24px; flex:none; border-radius:50%; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--panel-2); color:var(--ink-2);
  font:600 11px/1 ui-monospace,Menlo,monospace;
}
.lg-me-face img{width:100%; height:100%; object-fit:cover; display:block}
/* STREAMMARK_20260905 — "is anyone watching right now", on the pill's face.
 * John: "i want indicator if anyone streaming in top nav of admin".
 * 🔴 ABSOLUTE ON PURPOSE: the masthead has ~10px of slack at 360 and this must
 * cost it none.  Anchored to the pill's vertical centre rather than its top so
 * it lands on the same corner of the 24px face in the desktop row (30px) and
 * on the phone tier (44px), where the pill grows but the face does not.
 * ⭐ Orange is attention, and somebody watching the house earns it; the muted
 * "?" is "could not be read", which is never drawn as a 0. */
.lg-me-live{
  position:absolute; left:15px; top:50%; transform:translateY(-14px);
  width:14px; height:14px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--ground);
  background:var(--accent); color:var(--accent-ink);
  font:600 9px/1 ui-monospace,Menlo,monospace; letter-spacing:0;
}
/* ⚠️ LOAD-BEARING.  An explicit `display` beats the browser's own [hidden]
 * rule, which is exactly how the ACCOUNTS tally once sat there reading 0 for
 * an empty queue.  Without this line the badge never goes away. */
.lg-me-live[hidden]{display:none}
.lg-me-live.is-unknown{
  background:var(--panel-2); color:var(--ink-2); border-color:var(--rule);
}
/* the same fact in words, under "Your profile".  A line, not a menu item:
 * it is something to read, not something to press, so it never takes the
 * menu's opening focus. */
.lg-menu-live{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:6px 14px; min-height:34px;
  font-size:13px; color:var(--ink-2); white-space:nowrap;
}
.lg-me-caret{
  width:7px; height:7px; flex:none;
  border-right:1px solid var(--muted); border-bottom:1px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);
}
.lg-who-btn[aria-expanded="true"] .lg-me-caret{transform:translateY(2px) rotate(-135deg)}
.lg-who-name{
  font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--ink-2);
  white-space:nowrap;
}
.lg-who-role{
  font-family:ui-monospace,Menlo,monospace; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
/* VIP_20260905 — the vip word wears the admin dress: John, "just like admin" */
.lg-who-role.is-admin,
.lg-who-role.is-vip{color:var(--accent)}
/* VIEWAS_20260825 — while the owner is served as a reader the CHIP says so,
 * filled, because the switch itself now sits inside a closed menu and a quiet
 * indicator would let him read a redacted page as the truth. */
.lg-who-role.is-reading{
  background:var(--accent); color:var(--accent-ink); padding:2px 6px; border-radius:2px;
}
/* --- the menu --------------------------------------------------------- */
.lg-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:236px;
  background:var(--panel); border:1px solid var(--rule);
  box-shadow:0 10px 28px rgba(0,0,0,.14); padding:6px 0; z-index:60; text-align:left;
}
.lg-menu-h{
  padding:8px 14px 6px; font:10.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.lg-menu .lg-menu-i{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  width:100%; min-height:40px; padding:6px 14px; margin:0;
  background:none; border:0; border-radius:0; text-align:left;
  font:inherit; font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--ink); cursor:pointer; white-space:nowrap;
}
.lg-menu .lg-menu-i:hover,
.lg-menu .lg-menu-i:focus-visible{background:color-mix(in srgb,var(--accent) 9%,transparent); color:var(--ink); outline:0}
.lg-menu .lg-menu-i:disabled{color:var(--muted); cursor:default}
.lg-menu .lg-menu-l{flex:1 1 auto}
.lg-menu .lg-menu-s{
  font:10px/1 ui-monospace,Menlo,monospace; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.lg-menu .lg-menu-i.is-cut{color:var(--ink-2)}
.lg-menu .lg-view.is-reading .lg-menu-l{color:var(--accent)}
.lg-menu-rule{height:1px; background:var(--rule); margin:6px 0}
/* the theme switch keeps its element (#themetoggle, #themelabel: the theme JS
 * rewrites them) and is re-dressed as a menu item; the half-tone patch it
 * shows on phones becomes the item's glyph.  #themelabel stays for assistive
 * tech; the visible words are the DESTINATION, painted from its aria-label. */
.lg-menu #themetoggle{
  width:auto; height:auto; display:flex; align-items:center; justify-content:flex-start;
  gap:10px; padding:6px 14px; border:0;
  font:inherit; font-size:13px; letter-spacing:0; text-transform:none; color:var(--ink);
}
.lg-menu #themetoggle::before{
  content:''; width:12px; height:12px; flex:none;
  border:1px solid var(--ink-2);
  background:linear-gradient(90deg,var(--ink-2) 0 50%,transparent 50% 100%);
}
.lg-menu #themetoggle:hover{outline:0}
.lg-menu #themelabel{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}
.lg-out{
  font:inherit; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:1px solid var(--rule); border-radius:2px;
  color:var(--muted); padding:3px 8px; cursor:pointer;
}
.lg-out:hover{color:var(--ink)}

:where(.lg-root) :focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lg-card{box-shadow:none}}

/* ================================================================= THE PHONE
 * MOBILE tier, ≤760px.  ⭐ 2026-08-11: this file used to break at 560 and 720,
 * two of the 24 invented breakpoints MOBILE_SPEC.md exists to kill.  Both are
 * folded here; the one rule that genuinely still needs a smaller screen went
 * to the NARROW tier at the bottom.  Nothing above 760 changed.
 *
 * The gate is the first thing a phone visitor sees, and the ONLY thing a
 * stranger ever sees, so it is the one screen that has to be right before
 * anything else is.  Measured at 390x844: it was already legible and its one
 * button was 300x44.3, so this is tuning rather than a rebuild.
 */
@media (max-width:760px){
  .lg-card{padding:26px 20px 22px}
  .lg-mark{font-size:30px}
  .lg-sub{margin-bottom:18px; letter-spacing:.13em}
  .lg-lede{font-size:13.5px; line-height:1.55; margin-bottom:20px}
  /* 16px, not 15: it is the primary control on the one screen that has only
   * one control, and 48 > --tap with the text still centred in it */
  .lg-btn{min-height:48px; font-size:16px}

  /* --- NO JUMP WHILE IT POLLS ------------------------------------------
   * The flow writes two paragraphs the instant the button is pressed: a
   * status line ("Waiting for you to approve NITRATE in the Plex tab…") and
   * a hint ("Approve it in the Plex window, then come back here.").  Both
   * wrap to two lines in a 314px card, so the card grew ~73px AND — being
   * centred by auto block margins — slid up by half of that, moving the
   * button out from under the thumb that had just pressed it.
   * Reserving the tallest state up front costs a band of quiet space under
   * the button and buys a card that never moves.  The hint reserves a full
   * --tap because its popup-blocked variant is a 44px link, not a line of
   * text. */
  .lg-msg{min-height:2.9em}
  .lg-hint{margin-top:10px; min-height:var(--tap)}
  /* the popup-blocked fallback: a line of underlined text is not a tap target */
  .lg-hint .lg-link{
    display:inline-flex; align-items:center; min-height:var(--tap); padding:0 2px;
    font-size:13.5px; border-bottom-width:0; text-decoration:underline;
    text-underline-offset:3px;
  }
  .lg-foot{margin-top:20px; font-size:11.5px}

  /* --- the masthead identity chip --------------------------------------
   * At the mobile tier the masthead is a single 48px row: wordmark, then this
   * chip, then the theme patch.  SIGN OUT becomes a real --tap target (it was
   * 74x23.2).
   */
  .lg-who{gap:6px; min-width:0}
  .lg-who-name{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    flex:0 1 auto; max-width:14ch;
  }
  .lg-who-role,
  .lg-who-role.is-admin,
  .lg-who-role.is-vip{flex:none}
  /* the pill is the thumb's target on this row: height, never width — width
   * is the scarce thing.  The menu's items are thumb-sized too. */
  .lg-who-btn{min-height:var(--tap); padding-right:8px}
  .lg-menu{right:-4px; min-width:250px}
  .lg-menu .lg-menu-i,
  .lg-menu #themetoggle{min-height:var(--tap); padding-top:8px; padding-bottom:8px; font-size:14px}
}

/* ================================================================ THE NARROW
 * NARROW tier, ≤430px — an iPhone 16 Pro Max is 430, so this is "a phone",
 * not "a small phone".  Exactly one rule earns it.
 *
 * The account NAME is the widest thing in the chip and the least load-bearing:
 * the role beside it is what explains why the Screener is or is not in the bar
 * at the bottom.  Measured, the four things in that row (wordmark 93.8, chip,
 * theme patch 44, padding) come to ~413px, so the name survives down to 431
 * and only has to go below it.  It was hidden from 560 down before, which cost
 * 130px of screens their owner's name for nothing.
 */
@media (max-width:430px){
  .lg-who-name{display:none}
}

/* while the gate is up nothing behind it should be reachable or readable */
body.is-gated > *:not(#gate){ filter:blur(3px); pointer-events:none; user-select:none }
body.is-gated{ overflow:hidden }

/* ------------------------------------------------------------------------
   LOCALAUTH_20260825 — the reader's door.
   The card was one button; it is now a form, and the shape has to survive that
   without becoming a web-app sign-up page. Same hairline vocabulary as the rest
   of the house: a rule, not a box; the accent only on the thing you press.
   ⚠️ .lg-msg / .lg-hint keep their reserved min-height at ≤760px (further down
   this file) so the card never jumps under a thumb that just tapped it.
   ------------------------------------------------------------------------ */
.lg-form { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 0; }

.lg-field { display: flex; flex-direction: column; gap: 5px; text-align: left; }

.lg-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The rule, stated before the reader submits rather than after they trip on it.
   Sits under its input inside .lg-field's column, so it needs no layout of its
   own - only a quieter voice than the value above it. */
.lg-note {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.lg-input {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 10px 11px;
  width: 100%;
  min-height: 42px;
  -webkit-appearance: none;
  appearance: none;
}
.lg-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

/* A second action must not look like the first one. The swap is a rule-underline
   link, not a button, because "create an account" is a change of mind rather
   than a decision. */
.lg-swap {
  background: none;
  border: 0;
  padding: 6px 2px;
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  align-self: center;
  cursor: pointer;
}
.lg-swap:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* "waiting to be let in" is neither good news nor a fault, so it gets the warn
   colour rather than the crit one — the person has done nothing wrong. */
.lg-msg.is-wait { color: var(--warn); }

/* The owner's door sits below a rule, deliberately quiet: on a public site it is
   one person's entrance and everybody else should read past it. */
.lg-owner {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
}
.lg-owner-btn {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.lg-owner-btn:hover { color: var(--ink); border-color: var(--ink-2); }
.lg-owner-btn:disabled { opacity: .55; cursor: default; }

/* VIEWAS_20260825 — the owner being served as a reader.
   ⭐ Loud on purpose. An owner who forgets which view he is in misreads the
   whole site, and this house has already shipped a block that printed a
   believable "0 DRIVES" to every reader while the one admin saw the truth. */
.lg-view {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  color: var(--muted);
  background: none;
  cursor: pointer;
  white-space: nowrap;
}
.lg-view:hover { color: var(--ink); border-color: var(--ink-2); }
.lg-view.is-reading {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

@media (max-width: 760px) {
  .lg-input { font-size: 16px; min-height: var(--tap); }  /* 16px: iOS will not
      zoom the page on focus below this, and a zoomed gate is a broken gate */
  .lg-owner-btn { min-height: var(--tap); }
  .lg-view { min-height: 26px; }
}
@media (max-width: 430px) {
  .lg-view { letter-spacing: .06em; padding: 3px 5px; }
}