/*
 * The `hidden` attribute must actually hide things.
 *
 * The browser's own rule is `[hidden] { display: none }` — an attribute
 * selector, specificity (0,1,0). `.center` and `.app` below are class
 * selectors, the SAME specificity, and an author stylesheet always beats the
 * user-agent one. So `display: grid` won and `hidden` did nothing at all.
 *
 * `show()` sets `node.hidden`, which is correct HTML and was silently inert.
 * Every screen — sign-in, choose-an-address, the mailbox — rendered stacked on
 * top of each other, and the sign-in card comes first in the document. So a
 * signed-in person looked at a sign-in card, clicked it, completed the whole
 * OAuth round trip, came back, and saw the same card again. It read exactly
 * like an inescapable redirect loop, while the server logs showed a successful
 * sign-in every time, because there was one.
 *
 * `!important` is deliberate rather than lazy: this has to outrank any future
 * layout rule that sets a display on an element that also carries `hidden`,
 * which is precisely how it broke the first time.
 */
[hidden] { display: none !important; }

html{-webkit-text-size-adjust:100%}

body{
  margin:0;min-height:100dvh;background:var(--ink);color:var(--mid);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Tabular figures everywhere by default. A list of timestamps in
     proportional digits jitters as it updates, and the whole column looks
     misaligned even though nothing is. */
  font-variant-numeric:tabular-nums;
}

a{color:var(--pink);text-underline-offset:2px}
a:hover{color:var(--pink-300)}

button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}

/*
 * One focus ring for the whole application.
 *
 * `:focus-visible`, not `:focus` — the old rule put a two-pixel outline on
 * every button the moment it was clicked with a mouse, which is why interfaces
 * end up with `outline:none` and no keyboard story at all.
 */
:focus-visible{outline:2px solid var(--pink-400);outline-offset:2px;border-radius:var(--r-sm)}
:focus:not(:focus-visible){outline:none}

.pad{padding:1rem}

/* ------------------------------ the cards -------------------------------- */

/*
 * Sign-in, choose-an-address and the blocked screens. All three are one card on
 * an empty page, which makes them the first impression of the product — so the
 * page behind gets a wash of colour rather than being flat black, and the card
 * itself is lit from above.
 */
.center{
  min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(60rem 40rem at 50% -20%, rgba(255,46,136,.10), transparent 70%),
    radial-gradient(40rem 30rem at 100% 110%, rgba(120,60,255,.07), transparent 70%),
    var(--ink);
}

.card{
  width:100%;max-width:430px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;
  box-shadow:var(--shadow-lg);
}
.card h1{color:var(--hi);font-size:1.6rem;line-height:1.2;margin:0 0 8px;letter-spacing:-.02em}
.sub{color:var(--lo);margin:0 0 22px}
.hint{color:var(--lo);font-size:.82rem;margin:10px 0 0;line-height:1.5}
.msg{margin:10px 0 0;font-size:.88rem}
.msg.err{color:var(--danger)}

.sitefoot{display:flex;gap:16px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.82rem}
.sitefoot a{color:var(--lo);text-decoration:none}
.sitefoot a:hover{color:var(--mid)}

/* ------------------------------- controls -------------------------------- */

/*
 * The default button is the ACCENT one, which was a mistake worth undoing: it
 * made "Sign out", "Download my mail" and "Delete this mailbox" all look like
 * the primary action on their screen. Now `button` is quiet and `.btn`,
 * `.compose` and a bare submit inside a card are loud.
 */
button{
  background:var(--raise-2);color:var(--hi);border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 14px;font-weight:550;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
button:hover{background:#262631;border-color:rgba(255,255,255,.22)}
/* A press that moves is a press you can feel on a touchscreen, where there is
   no cursor to tell you anything landed. */
button:active{transform:translateY(1px)}
button[disabled]{opacity:.5;cursor:not-allowed;transform:none}

.btn,
.card button[type="submit"],
button.primary{
  background:linear-gradient(180deg,var(--pink),var(--pink-600));
  color:#fff;border:0;border-radius:var(--r-sm);padding:12px 18px;font-weight:650;
  text-decoration:none;display:inline-block;text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px -6px rgba(255,46,136,.6);
}
.btn:hover,
.card button[type="submit"]:hover,
button.primary:hover{background:linear-gradient(180deg,var(--pink-400),var(--pink));border:0}

input,textarea{
  width:100%;padding:11px 13px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.035);border:1px solid var(--line-strong);
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--lo)}
input:hover,textarea:hover{background:rgba(255,255,255,.055)}
input:focus,textarea:focus{
  outline:none;border-color:var(--pink);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px var(--pink-tint);
}

/* Scrollbars, so a scrolling pane does not paint a bright system bar across a
   dark interface. Firefox takes the first pair; WebKit takes the rest. */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box}