/* Shared by /login and /account. Same tokens as the homepage (which are the
   same tokens as budget/web/styles.css on the M4, the house UI reference).
   Buttons follow that file too: filled ink pill is the default, .ghost is
   the quiet one, .danger is filled red — never an outline in a row of
   filled pills. --link is spent on "this leaves"; nothing here uses it as
   a generic accent. */
:root {
  --bg:      #f2f2f7;
  --panel:   #ffffff;
  --panel-2: #f6f6f9;
  --line:    rgba(60, 60, 67, .16);
  --ink:     #000000;
  --ink-2:   #3c3c43;
  --dim:     #8a8a8e;
  --dim-2:   #b0b0b6;
  --pill:    #efeff0;
  --good:    #1a9e4b;
  --warn:    #b8730a;
  --bad:     #e5322b;
  --link:    #007aff;
  --shadow:  0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
  --r-card: 20px;
  --r-mid:  13px;
  --r-tile: 10px;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
  --font-round: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e;
    --line: rgba(84, 84, 88, .48);
    --ink: #ffffff; --ink-2: #d7d7db; --dim: #98989f; --dim-2: #6c6c70;
    --pill: #2c2c2e; --good: #30d158; --warn: #ffd60a; --bad: #ff453a;
    --link: #0a84ff; --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e;
  --line: rgba(84, 84, 88, .48);
  --ink: #ffffff; --ink-2: #d7d7db; --dim: #98989f; --dim-2: #6c6c70;
  --pill: #2c2c2e; --good: #30d158; --warn: #ffd60a; --bad: #ff453a;
  --link: #0a84ff; --shadow: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* so el.hidden beats any display: flex below */
html, body { height: 100%; }
body {
  margin: 0; min-height: 100dvh;
  background: var(--bg); color: var(--ink); font-family: var(--font);
  display: flex; justify-content: center;
  padding: 8vh 20px 40px;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
input, button { font-family: var(--font); }
button, a, label, input { touch-action: manipulation; }

.page { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; }
.page.wide { max-width: 560px; }

.wordmark {
  font-family: var(--font-round); font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.5rem); letter-spacing: -0.01em;
  margin: 0 0 22px; color: var(--ink); text-decoration: none;
}
.wordmark .dim-ca { color: var(--dim); }
/* When a game sent the visitor (login/index.php), its icon and title head the
   card and the wordmark is a line above, not the headline. */
.wordmark.small { font-size: 17px; margin-bottom: 14px; color: var(--dim); }
.wordmark.small .dim-ca { color: var(--dim-2); }
.game-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.game-lockup h1 { margin: 0; font-size: 22px; }
.game-icon { width: 56px; height: 56px; border-radius: 13px; flex: none; display: block; }

.card {
  width: 100%; background: var(--panel); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 24px; margin-bottom: 16px;
}
.card h1, .card h2 { font-size: 20px; margin: 0 0 6px; letter-spacing: -0.01em; }
.card h2 { font-size: 15px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.card p { margin: 0 0 16px; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.card p.meta { color: var(--dim); font-size: 13px; margin: 0; }

/* buttons — from budget/web/styles.css */
button {
  font: inherit; font-size: 15px; background: var(--ink); color: var(--panel);
  border: 0; border-radius: 999px; padding: 12px 18px; font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: .45; cursor: default; }
button.ghost { background: var(--pill); color: var(--ink); }
button.tiny  { padding: 7px 13px; font-size: 13px; }
button.danger { background: var(--bad); color: #fff; }
button.block { width: 100%; }
button .spinner { display: none; }
button.busy .spinner { display: inline-block; }
button.busy .label { opacity: .6; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; margin-right: 8px;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
a.btn {
  display: inline-block; text-decoration: none; font-size: 13px; font-weight: 600;
  border-radius: 999px; padding: 7px 13px; background: var(--pill); color: var(--ink);
}
a.btn.block { display: block; width: 100%; text-align: center; padding: 12px 18px; font-size: 15px; }

/* Provider sign-in. A .ghost pill with the provider's mark on the left —
   quiet on purpose: the passkey is the house's own front door and stays the
   one filled button on the page (AUTH.md "Passkey first"). Google's brand
   rules want their wordmark unaltered beside their G, which is what this is:
   their mark, our pill, their name in our type. */
/* `a.btn.block` above is two classes deep, so a bare `.provider` would lose
   to its `display: block` and the mark would not sit beside the label. Both
   selectors carry the same weight on purpose. */
button.provider, a.btn.provider {
  width: 100%; background: var(--pill); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; font-size: 15px;
}
.provider svg { width: 18px; height: 18px; flex: none; }
.provider .spinner { margin-right: 0; }

/* The cached profile picture (src/oauth.php). Square, rounded, never
   stretched — a provider hands over whatever aspect it likes. */
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--pill); border: 1px solid var(--line);
}
.avatar.small { width: 30px; height: 30px; }
.identity-row { display: flex; gap: 14px; align-items: center; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }

.divider {
  display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px;
  margin: 18px 0 14px; text-transform: uppercase; letter-spacing: .06em;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.notice {
  border-radius: var(--r-mid); padding: 12px 14px; font-size: 14px; line-height: 1.4;
  margin: 0 0 14px; display: none;
}
.notice.show { display: block; }
.notice.bad  { background: color-mix(in srgb, var(--bad) 10%, var(--panel)); color: var(--bad); }
.notice.good { background: color-mix(in srgb, var(--good) 10%, var(--panel)); color: var(--good); }
.notice.warn { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); color: var(--warn); }

label { display: block; font-size: 12px; color: var(--dim); margin: 0 0 5px; }
input[type=text], input[type=email] {
  width: 100%; height: 40px; border: 1px solid var(--line); border-radius: var(--r-tile);
  background: var(--panel-2); color: var(--ink); font-size: 16px; padding: 0 12px;
}
input[type=text]:focus, input[type=email]:focus { outline: none; box-shadow: 0 0 0 2px var(--ink); }
input.code { letter-spacing: .25em; font-size: 22px; text-align: center; font-variant-numeric: tabular-nums; }

/* modal dialog — same shape as the homepage's add-shortcut dialog */
.backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.32);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 10;
}
.backdrop.open { display: flex; }
.dialog {
  width: 100%; max-width: 360px; background: var(--panel); border-radius: var(--r-mid);
  box-shadow: var(--shadow); padding: 20px;
}
.dialog h2 { font-size: 16px; margin: 0 0 14px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.dialog label { margin-top: 2px; }
.dialog input { margin-bottom: 14px; }
.dialog .notice { margin-bottom: 12px; }
.dialog .row.end { margin-top: 4px; }

/* rows in a list: passkeys, sessions */
.list { display: flex; flex-direction: column; }
.item {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--line);
}
.item:first-child { border-top: 0; }
.item .glyph {
  width: 38px; height: 38px; flex: none; border-radius: var(--r-tile);
  background: var(--panel-2); display: grid; place-items: center; font-size: 18px;
}
/* A glyph cell is usually one emoji; the provider rows put an inline SVG
   mark there instead, which needs a size or it fills the grid cell. */
.item .glyph svg { width: 18px; height: 18px; display: block; }
.item .body { flex: 1; min-width: 0; }
.item .title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .sub { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.item .acts { display: flex; gap: 6px; flex: none; }
.chip {
  display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px;
  padding: 2px 8px; background: var(--pill); color: var(--ink-2); margin-left: 6px; vertical-align: 1px;
}
.chip.good { background: color-mix(in srgb, var(--good) 14%, var(--panel)); color: var(--good); }

.foot { margin-top: 8px; font-size: 13px; color: var(--dim); text-align: center; line-height: 1.5; }
.foot a { color: var(--dim); }
.foot:has(+ .foot.legal) { margin-bottom: 0; }   /* the legal line tucks under the note above it: one block of fine print */
.foot + .foot.legal { margin-top: 2px; }

/* inline editing — never a native prompt()/confirm(); those don't match.
   An editable thing swaps to an input + Save/Cancel in place; a
   destructive button arms itself ("Remove?") for a few seconds instead
   of asking in a browser dialog. */
.inline-edit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inline-edit input[type=text] { flex: 1; min-width: 160px; height: 36px; }
h1 .inline-edit input[type=text] { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; height: 40px; }
.item .title .inline-edit input[type=text] { font-size: 15px; font-weight: 600; }
button.armed { background: var(--bad); color: #fff; }

/* the level meter on /account */
/* Two tiles on purpose: level 3 (paid) exists in the DB for entitlements
   but is never shown — nobody should read this page as "payment coming". */
.levels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0 4px; }
.level {
  border-radius: var(--r-tile); padding: 10px 12px; background: var(--panel-2);
  font-size: 12.5px; color: var(--dim); line-height: 1.35;
}
.level b { display: block; color: var(--ink-2); font-size: 13px; margin-bottom: 2px; }
.level.on { background: color-mix(in srgb, var(--good) 12%, var(--panel)); }
.level.on b { color: var(--good); }
@media (max-width: 420px) {
  .levels { grid-template-columns: 1fr; }
  .card { padding: 20px 18px; }
  .item .acts { flex-direction: column; }
}

/* WHO IS HERE (login/who.js): the account's picture or initial in a circle
   at the top right of the page, where a launcher keeps it — the name is its
   label, not text. Absolute, so it scrolls away with the page (never fixed:
   IOS.md §15). Signed in only; a stranger sees nothing there. */
.who {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  display: block; background: var(--panel); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink-2);
}
.who .pic {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  object-fit: cover; font: 600 15px var(--font-round);
}
.who:hover, .who:focus-visible { box-shadow: 0 0 0 2px var(--link), var(--shadow); outline: none; }

/* A fold of the quiet kind, for what is worth reading but not first. */
details.more { margin-top: 12px; }
details.more summary { font-size: 13px; color: var(--dim); cursor: pointer; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "› "; }
details.more[open] summary::before { content: "⌄ "; }
details.more .list { margin-top: 6px; }
details.more p.meta { margin-top: 10px; }
/* an account with no picture yet: its initial in the same circle */
.avatar.initial { display: grid; place-items: center; font: 600 22px var(--font-round); color: var(--ink-2); }