/* learnmingo.com - the account dialog and its entry points (account.js), on every page of the site AND on the web app under /app/
   (the extension's own pages, which bring their own theme.css instead of site.css). So this file stands on its own: its --ac-* tokens
   restate ChineseCard's glass-pass palette (site.css --w-*), and every control inside the dialog is fully declared (the app's theme.css
   styles bare <button>s; the site does not). Light and dark follow color-scheme, which each page sets its own way. The dialog is
   radialtimers.com's: one glass plate (DESIGN.md 1.4: the dialog fill, radius 20, blur 22, the top rim) over a dimmed page, a title,
   rows, the exits at the foot. No fades: it is there or it is not. Hover only for a real mouse; a press = one step deeper fill;
   the focus ring for the keyboard only. */

:root {
  --ac-ink: light-dark(#1a1c22, #ecedf0);
  --ac-ink-2: light-dark(#5a5f6b, #c2c6ce);
  --ac-rule: light-dark(rgba(0, 0, 0, .10), rgba(255, 255, 255, .12));
  --ac-current: light-dark(#3b6ea8, #8fb6ec);
  --ac-current-hov: light-dark(#34619a, #a6c5f0);
  --ac-on-current: light-dark(#ffffff, #1a1c22);
  --ac-seal: light-dark(#c62828, #ff7a70);
  --ac-in: light-dark(rgba(255, 255, 255, .55), rgba(255, 255, 255, .07));
  --ac-in-hov: light-dark(rgba(255, 255, 255, .92), rgba(255, 255, 255, .15));
  --ac-in-brd: light-dark(rgba(0, 0, 0, .10), rgba(255, 255, 255, .10));
  --ac-hi: inset 0 1px 0 light-dark(#fff, rgba(255, 255, 255, .10));
  --ac-press: color-mix(in srgb, var(--ac-ink) 8%, var(--ac-in-hov));
  --ac-dlg: light-dark(rgba(252, 249, 244, .86), rgba(30, 27, 36, .82));
  --ac-dlg-brd: light-dark(rgba(255, 255, 255, .62), rgba(255, 255, 255, .18));
  --ac-sheen: linear-gradient(180deg, light-dark(rgba(255, 255, 255, .30), rgba(255, 255, 255, .09)) 0%, rgba(255, 255, 255, 0) 55%);
  --ac-shadow: 0 28px 70px -14px light-dark(rgba(60, 40, 20, .38), rgba(0, 0, 0, .62)),
    inset 0 1px 0 light-dark(rgba(255, 255, 255, .85), rgba(255, 255, 255, .26)),
    inset 0 -1px 0 light-dark(rgba(255, 255, 255, .25), rgba(255, 255, 255, .05));
  --ac-blur: blur(22px) saturate(1.6);
  --ac-ring: 0 0 0 3px color-mix(in srgb, var(--ac-current) 28%, transparent);
  --ac-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ac-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --ac-dlg: light-dark(rgba(250, 247, 242, .96), rgba(30, 28, 38, .96)); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --ac-dlg: light-dark(rgba(250, 247, 242, .98), rgba(30, 28, 38, .98)); --ac-blur: none; }
}

/* ---------- the dialog ---------- */
.ac-dlg {
  width: min(430px, calc(100vw - 32px)); max-height: min(720px, 92vh); margin: auto; padding: 20px;
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--ac-dlg-brd); border-radius: 20px;
  background: var(--ac-sheen), var(--ac-dlg); box-shadow: var(--ac-shadow);
  -webkit-backdrop-filter: var(--ac-blur); backdrop-filter: var(--ac-blur);
  color: var(--ac-ink); font: 14px/1.5 var(--ac-font); -webkit-font-smoothing: antialiased;
}
.ac-dlg::backdrop { background: color-mix(in srgb, light-dark(#1a1c22, #000) 30%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ac-dlg:focus { outline: none; }
.ac-dlg h2 { margin: 0; font: 700 17px/1.3 var(--ac-font); letter-spacing: -0.01em; color: var(--ac-ink); }
.ac-dlg h3 { margin: 0 0 4px; font: 700 15px/1.3 var(--ac-font); letter-spacing: -0.01em; color: var(--ac-ink); }
.ac-dlg p { margin: 0; }
.ac-dlg [hidden] { display: none !important; }

/* signed out: one sentence, then Google's button */
.ac-out p { margin-top: 10px; max-width: 32em; }
.ac-gsi { display: flex; justify-content: flex-start; margin-top: 16px; min-height: 44px; }

/* signed in: the initial, the name and the email on one line (wrapping on a narrow plate) */
.ac-me { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 16px; }
.ac-disc {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ac-current); color: var(--ac-on-current); font: 600 14px/1 var(--ac-font); text-transform: uppercase;
}
img.ac-avatar { padding: 0; border: 0; object-fit: cover; background: var(--ac-in); }   /* the picture at the disc's size, round (the disc's own rules) */
.ac-name { font-weight: 600; }
.ac-email { color: var(--ac-ink-2); font-size: 13px; overflow-wrap: anywhere; }

/* a group: a hairline, its title, its rows */
.ac-sec { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ac-rule); }
.ac-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-top: 8px; }
.ac-label { font-size: 13px; color: var(--ac-ink); }

/* every control in the dialog: a 32px capsule of the painted glass (a control inside a panel never blurs) */
.ac-dlg button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 32px; min-width: 0; min-height: 0; padding: 0 14px; margin: 0;
  border: 1px solid var(--ac-in-brd); border-radius: 999px; background: var(--ac-in); box-shadow: var(--ac-hi);
  color: var(--ac-ink); font: 500 13px/1 var(--ac-font); white-space: nowrap; cursor: pointer; opacity: 1;
  -webkit-tap-highlight-color: transparent;   /* a press is the deeper fill below, never the browser's blue wash */
}
@media (hover: hover) and (pointer: fine) { .ac-dlg button:hover:not(:disabled) { background: var(--ac-in-hov); color: var(--ac-ink); border-color: var(--ac-in-brd); } }
.ac-dlg button:active:not(:disabled) { background: var(--ac-press); }
.ac-dlg button:disabled { cursor: default; color: var(--ac-ink-2); }
.ac-dlg button:focus-visible, .ac-dlg input:focus-visible { outline: none; box-shadow: var(--ac-ring); }
/* the one filled control: the confirm's Delete */
.ac-dlg button.ac-fill-danger { background: var(--ac-seal); border-color: var(--ac-seal); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); }
@media (hover: hover) and (pointer: fine) { .ac-dlg button.ac-fill-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--ac-seal) 88%, #000); border-color: transparent; color: #fff; } }
.ac-dlg button.ac-fill-danger:active:not(:disabled) { background: color-mix(in srgb, var(--ac-seal) 76%, #000); }
/* the rarest action wears the quietest control: a red link (radialtimers' danger-zone pattern) */
.ac-dlg button.ac-linkish {
  height: auto; padding: 0; border: 0; border-radius: 4px; background: none; box-shadow: none;
  color: var(--ac-seal); font-weight: 400; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) { .ac-dlg button.ac-linkish:hover:not(:disabled) { background: none; color: color-mix(in srgb, var(--ac-seal) 80%, var(--ac-ink)); } }
.ac-dlg button.ac-linkish:active:not(:disabled) { background: none; color: color-mix(in srgb, var(--ac-seal) 60%, var(--ac-ink)); }

/* the pairing code: a read-only field in the mono face, selected whole on focus, and Copy beside it */
.ac-code { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.ac-code input {
  flex: 1; min-width: 0; height: 36px; padding: 0 14px; margin: 0;
  border: 1px solid var(--ac-in-brd); border-radius: 999px; background: var(--ac-in-hov); box-shadow: none;
  color: var(--ac-ink); font: 500 13px/1 var(--ac-mono); letter-spacing: .02em;
}
.ac-how { margin-top: 8px; font-size: 13px; color: var(--ac-ink); }

/* connected devices: one row each, a hairline between */
.ac-devices { list-style: none; margin: 10px 0 0; padding: 0; }
.ac-devices li { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 4px 0; }
.ac-devices li + li { border-top: 1px solid var(--ac-rule); }
.ac-dev { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }   /* the date beside the name, under it when the row is narrow */
.ac-dev-name { overflow-wrap: anywhere; }
.ac-dev-when { font: 500 12.5px/1 var(--ac-mono); font-variant-numeric: tabular-nums; color: var(--ac-ink-2); white-space: nowrap; }

.ac-err { margin-top: 12px; font-size: 13px; color: var(--ac-seal); }
.ac-err:empty { display: none; }

/* the foot: the red link left, the exits right */
.ac-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-top: 20px; }
.ac-footr { display: flex; gap: 8px; margin-left: auto; }
/* the in-dialog confirm takes the foot's place */
.ac-confirm { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ac-rule); }
.ac-confirm p { max-width: 32em; }
.ac-confirm-acts { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- entry points ---------- */
/* the 22px initial in a header capsule (site pages: .hbtn.ac-btn in site.css; here only what is shared) */
.ac-btn .ac-disc { width: 22px; height: 22px; font-size: 11px; }
.ac-btn { gap: 8px; }

/* the web app's rail (/app/): one more item under Settings, in the rail's own form (app.css .ap-rail-item), as a button */
button.ac-rail, button.ac-nav, .ac-btn { -webkit-tap-highlight-color: transparent; }
button.ac-rail {
  display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%;
  min-height: 40px; height: auto; padding: 0 10px; margin: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm, 8px); background: transparent; box-shadow: none;
  color: var(--fg-2, var(--ac-ink-2)); font: 400 var(--text-base, 14px)/1.5 inherit; font-family: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { button.ac-rail:hover { background: var(--surface-2, var(--ac-in)); border-color: transparent; color: var(--fg, var(--ac-ink)); } }
button.ac-rail:active { background: var(--press-quiet, var(--ac-press)); }
.ac-rail-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ac-rail .ac-disc { width: 18px; height: 18px; font-size: 9px; }
.ac-rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the card page's nav (/app/card): a capsule like its Glossary · Progress · Settings links (newtab.css .nt-nav a) */
button.ac-nav {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; min-height: 0; padding: 0 12px; margin: 0;
  border: 1px solid var(--glass-edge, var(--ac-in-brd)); border-radius: 999px; background: var(--surface-2, var(--ac-in)); box-shadow: none;
  color: var(--fg-2, var(--ac-ink-2)); font: 400 var(--text-sm, 13px)/1 inherit; font-family: inherit; white-space: nowrap; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { button.ac-nav:hover { color: var(--fg, var(--ac-ink)); background: var(--surface-hover, var(--ac-in-hov)); } }
button.ac-nav:active { background: var(--press-fill, var(--ac-press)); }
.ac-nav .ac-disc { width: 20px; height: 20px; font-size: 10px; }

@media (pointer: coarse) {
  .ac-dlg button:not(.ac-linkish) { height: 36px; }
  .ac-dlg button.ac-linkish, button.ac-nav, button.ac-rail { position: relative; }
  .ac-dlg button.ac-linkish::after, button.ac-nav::after { content: ""; position: absolute; inset: -8px -4px; }
  .ac-code input { font-size: 16px; height: 44px; }
}