/* account.css — the account chip and its sheet (account/ui.js), for any page.

   Every page links site.css first, and this draws with its glass tokens. The
   palette (--ink, --gold, --muted, --accent, --mono) is written as
   var(--x, literal), because the hubs and privacy.html do not define it
   (site.css explains), and a chip has to look the same wherever it is put.

   The games' two rules hold here too: nothing a thumb is about to hit moves
   when an answer lands (the chip is one size whatever it says, and every
   answer in the sheet has a line that holds its height empty or full), and
   nothing moves for prefers-reduced-motion beyond a fade. */

/* ---------- the chip ----------
   One fixed box, signed in or out: a handle of twenty characters is cut short
   with an ellipsis rather than growing it. A page can set the width with
   --ac-chip-w where it has more or less room. The ✓ keeps its place hidden
   when signed out, so the words sit where they will sit signed in. */
.ac-chip {
  position: relative; box-sizing: border-box; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  width: var(--ac-chip-w, 10.5em); height: 38px; margin: 0; padding: 0 12px;
  border-radius: 999px; font: inherit; font-size: .86rem; font-weight: 700; line-height: 1;
  color: var(--ink, #e8edf2); background: var(--g-well, rgba(0, 0, 0, .28));
  border: 1px solid var(--g-line, rgba(255, 255, 255, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ac-chip:hover { border-color: var(--g-line-strong, rgba(255, 255, 255, .2)); }
.ac-chip:focus-visible { outline: 2px solid var(--accent, #4aa8ff); outline-offset: 2px; }
.ac-chip .ac-ico { flex: 0 0 auto; font-size: .95em; }
.ac-chip .ac-who { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ac-chip .ac-ok { flex: 0 0 auto; font-weight: 800; color: var(--accent, #4aa8ff); visibility: hidden; }
.ac-chip.in { border-color: rgba(74, 168, 255, .5); }
.ac-chip.in .ac-ok { visibility: visible; }
/* a dot: a code waiting to be kept, or a sign-out the player did not ask for */
.ac-chip.attn::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold, #f0c419); box-shadow: 0 0 0 2px var(--g-bg, #0a0d13);
}

/* ---------- the sheet ----------
   Over the foot of the screen on a phone, edge to edge, where the thumb
   already is; in the middle of a wide one, as a panel. It scrolls inside
   itself when the keyboard is up, and never wider than the window. */
.ac-sheet {
  box-sizing: border-box; position: fixed; inset: auto 0 0 0; margin: 0; padding: 0;
  width: 100%; max-width: 100%; max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain;
  color: var(--ink, #e8edf2); font-size: 1rem; line-height: 1.45;
  background: var(--g-sheen, linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02))), rgba(15, 19, 27, .96);
  border: 1px solid var(--g-line-strong, rgba(255, 255, 255, .2)); border-bottom: none; border-radius: 18px 18px 0 0;
  box-shadow: var(--g-hi, inset 0 1px 0 rgba(255, 255, 255, .18)), 0 -16px 48px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: var(--g-blur, blur(24px)); backdrop-filter: var(--g-blur, blur(24px));
}
.ac-sheet[open] { animation: ac-up .24s cubic-bezier(.2, .8, .3, 1); }
.ac-sheet::backdrop { background: rgba(5, 8, 12, .55); }
@keyframes ac-up { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ac-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 700px) {
  .ac-sheet {
    inset: 0; margin: auto; width: min(460px, calc(100% - 32px)); height: fit-content; max-height: min(88vh, 760px);
    border-bottom: 1px solid var(--g-line-strong, rgba(255, 255, 255, .2)); border-radius: 18px;
    box-shadow: var(--g-hi, inset 0 1px 0 rgba(255, 255, 255, .18)), var(--g-lo, inset 0 -1px 0 rgba(0, 0, 0, .22)), 0 24px 70px rgba(0, 0, 0, .6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ac-sheet[open] { animation: ac-fade .16s ease; }
}

.ac-in { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.ac-head { display: flex; align-items: center; gap: 10px; }
.ac-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.06rem; color: var(--gold, #f0c419); }
.ac-x {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; font: inherit; font-size: 1rem; line-height: 1;
  color: #c3cdd8; background: var(--g-in-fill, rgba(255, 255, 255, .055)); border: 1px solid var(--g-line, rgba(255, 255, 255, .12)); cursor: pointer;
}
.ac-x:hover { background: var(--g-in-fill-hover, rgba(255, 255, 255, .1)); }
/* locked while a new code waits to be kept: there, but plainly not the way out */
.ac-x[aria-disabled="true"] { opacity: .4; cursor: default; }
.ac-notice {
  margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: .86rem; line-height: 1.4;
  background: rgba(74, 168, 255, .1); border: 1px solid rgba(74, 168, 255, .35);
}
.ac-notice[hidden], .ac-view[hidden], .ac-confirm[hidden] { display: none; }
.ac-lede { margin: 10px 0 2px; font-size: .88rem; color: #c3cdd8; }
.ac-lede b { color: var(--ink, #e8edf2); }
.ac-as { font-size: .95rem; }
.ac-okb { font-weight: 800; color: var(--accent, #4aa8ff); }
.ac-since { color: var(--muted, #93a1b0); font-size: .84rem; }
.ac-form { margin: 14px 0 0; }
.ac-lbl { display: block; margin: 0 0 5px; font-size: .8rem; font-weight: 650; color: var(--muted, #93a1b0); }
.ac-row { display: flex; align-items: center; gap: 8px; }
.ac-input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 0 12px; border-radius: 12px;
  font: inherit; font-size: 1rem; color: var(--ink, #e8edf2); background: var(--g-well, rgba(0, 0, 0, .28));
  border: 1px solid var(--g-line, rgba(255, 255, 255, .12));
}
/* the code field stays at 16 px, since iOS zooms the page into any field
   smaller when it is focused; its hint is short enough to fit beside Sign in
   on a phone, and a whole code scrolls inside it */
.ac-input.mono { font-family: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); }
.ac-input:focus-visible { outline: 2px solid var(--accent, #4aa8ff); outline-offset: 1px; }
.ac-btn {
  flex: 0 0 auto; box-sizing: border-box; min-height: 44px; min-width: 5.4em; padding: 0 14px; border-radius: 12px;
  font: inherit; font-size: .9rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  color: var(--ink, #e8edf2); background: var(--g-in-fill, rgba(255, 255, 255, .055)); border: 1px solid var(--g-line, rgba(255, 255, 255, .12));
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ac-btn:hover { background: var(--g-in-fill-hover, rgba(255, 255, 255, .1)); }
.ac-btn:focus-visible { outline: 2px solid var(--accent, #4aa8ff); outline-offset: 2px; }
.ac-btn:disabled { opacity: .4; cursor: default; }
.ac-btn.go {
  color: #241c02; background: linear-gradient(180deg, #ffd955, var(--gold, #f0c419)); border-color: rgba(255, 230, 140, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ac-btn.danger { color: #ffb4a6; border-color: rgba(255, 120, 100, .45); }
/* the first of two taps: armed, the colour of something about to happen */
.ac-btn.armed { color: #fff; background: linear-gradient(180deg, #e9783f, #c9521f); border-color: rgba(255, 190, 150, .8); }
.ac-btn.busy { opacity: .6; cursor: progress; }
/* the answer to the form above it: two lines held, so it never pushes */
.ac-say { margin: 5px 0 0; min-height: 2.6em; font-size: .8rem; line-height: 1.3; color: var(--gold, #f0c419); }
.ac-row .ac-say { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; }
.ac-tall { min-height: 3.9em; }
.ac-fine { margin: 10px 0 0; font-size: .76rem; line-height: 1.4; color: var(--muted, #93a1b0); }
.ac-fine a { color: inherit; }

/* the code itself: big, one tap selects all of it, never wider than the sheet */
.ac-code {
  margin: 12px 0 10px; padding: 12px; border-radius: 12px; text-align: center;
  font: 750 1.1rem/1.35 var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace); letter-spacing: .04em;
  color: var(--ink, #e8edf2); background: var(--g-well, rgba(0, 0, 0, .28)); border: 1px dashed rgba(240, 196, 25, .55);
  user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}
.ac-code:focus-visible { outline: 2px solid var(--accent, #4aa8ff); outline-offset: 2px; }
.ac-code.small { margin: 0 0 8px; padding: 10px; font-size: .92rem; border-style: solid; border-color: var(--g-line, rgba(255, 255, 255, .12)); }
.ac-tick { display: flex; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: .92rem; font-weight: 650; cursor: pointer; }
.ac-tick input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--gold, #f0c419); }
.ac-done { width: 100%; }

/* the three hard-to-undo buttons share a grid, so an armed one's new words
   move neither of the others */
.ac-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.ac-acts .ac-btn { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; }
.ac-confirm {
  margin-top: 2px; padding: 10px 12px; border-radius: 12px; font-size: .86rem; line-height: 1.4;
  background: rgba(201, 82, 31, .1); border: 1px solid rgba(255, 120, 100, .4);
}
.ac-confirm p { margin: 0 0 10px; }
.ac-confirm .ac-btn { flex: 1 1 0; }

/* ---------- Sign in with Google (account/engine/google.js) ----------
   Drawn only while it is on. The button is Google's own, in Google's iframe,
   with Google's words and colours (its rules for the button, not ours). The
   slot it goes in holds the button's height before it comes, while it loads,
   and when it never does (offline, or an extension that blocks Google), so its
   arrival moves nothing; signed in, the slot and "Connected" take turns in one
   box of the same height. */
.ac-gslot {
  box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  height: 44px; border-radius: 999px; font-size: .8rem; color: var(--muted, #93a1b0);
}
.ac-gslot.wait { border: 1px dashed var(--g-line, rgba(255, 255, 255, .12)); }
.ac-gslot.busy { opacity: .6; cursor: progress; }
.ac-g-in { height: 44px; }
.ac-gslot[hidden], .ac-gon[hidden] { display: none; }
.ac-gon { height: 44px; }
.ac-gok {
  flex: 1 1 auto; min-width: 0; margin: 0; font-size: .92rem; font-weight: 700; color: var(--accent, #4aa8ff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* its own width, so "Confirm" in its place moves nothing */
.ac-gon .ac-btn { width: 8em; }