/* HumDocs UI layer (September 2026 redesign).
 *
 * Loaded after styles.css on every page. The goal is the extension popup's
 * look on the web: the same near-black surfaces and hairline borders, a plain
 * grotesk with a mono for labels and numbers, and green kept for the one
 * primary action and for live state, never as a glow.
 *
 * styles.css carries several older layers ("glass", sheens, glows). Rather
 * than untangle them, the rules here win on specificity (:root prefix) so the
 * whole site changes from one place. The footer keeps its original look on
 * purpose, so it gets its original fonts back below.
 */

:root {
  /* The site is dark only, so tell the browser: form fields, scroll bars
     and the date and colour pickers then draw dark to match. */
  color-scheme: dark;
  --bg: #0a0a0a;
  --s1: #111111;
  --s2: #1a1a1a;
  --s3: #222222;
  --b1: #282828;
  --b2: #363636;
  --text: #f2f2f2;
  --text2: #b8b8b8;
  --text3: #8e8e8e;
  --ok: #3ecf8e;
  --ok2: #6ee7b4;
  --ok-bg: rgba(62, 207, 142, 0.1);
  --ok-bd: rgba(62, 207, 142, 0.28);
  --err: #f87171;
  --err-bg: rgba(248, 113, 113, 0.08);
  --err-bd: rgba(248, 113, 113, 0.28);
  --warn: #e8b84b;
  --ui-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ui-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: var(--ui-sans);
  --display: var(--ui-sans);
  --mono: var(--ui-mono);
  --ui-r: 10px;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The footer is staying exactly as it was. */
footer {
  font-family: "Manrope", system-ui, sans-serif;
  letter-spacing: normal;
  --sans: "Manrope", system-ui, sans-serif;
  --display: "Fraunces", "Manrope", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

:root body {
  background: var(--bg);
  font-family: var(--ui-sans);
  font-feature-settings: "ss01" 0;
  letter-spacing: -0.005em;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
:root .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-family: var(--ui-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  filter: none;
  transform: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}
:root .btn::before,
:root .btn::after {
  content: none !important;
}
:root .btn:active {
  transform: scale(0.98);
}
:root .btn:focus-visible {
  outline: 2px solid var(--ok);
  outline-offset: 2px;
}
/* The same ring for links, FAQ questions and the menu, so keyboard focus
   looks one way across the site. */
/* Kept at the lowest weight (:where), so a component with its own focus
   style, such as the account menu, still wins. */
:where(a:not(.btn), summary):focus-visible {
  outline: 2px solid var(--ok);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Primary: a plain light button. Quieter than the green gradient it
   replaced, which competed with everything else on the page. Green is kept
   for live state and the extension's own controls. */
/* In the warm off-white of the homepage's Features panels, with the same
   soft light, instead of pure white (owner's ask, 5 Oct 2026). */
:root .btn.btn-primary {
  background: radial-gradient(80% 120% at 25% 0%, #f4f2ee, transparent 70%), #e8e5df;
  color: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
:root .btn.btn-primary:hover {
  background: radial-gradient(80% 120% at 25% 0%, #f8f6f2, transparent 70%), #eeebe5;
  filter: none;
  transform: none;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
:root .btn.btn-primary:active {
  transform: scale(0.98);
}

/* Secondary: an outline, no fill. */
:root .btn.btn-ghost{
  background: transparent;
  color: var(--text);
  border-color: var(--b1);
  box-shadow: none;
}
:root .btn.btn-ghost:hover{
  background: var(--s1);
  border-color: var(--b2);
  transform: none;
}

/* Destructive: the extension's Stop button. */
:root .btn.btn-danger {
  background: var(--s1);
  color: var(--err);
  border-color: var(--err-bd);
  box-shadow: none;
}
:root .btn.btn-danger:hover {
  background: var(--err-bg);
}

:root .btn.btn-lg {
  height: 44px;
  padding: 0 20px;
  font-size: 15px;
  border-radius: 10px;
}
:root .btn.btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}
:root .btn[aria-disabled="true"],
:root .btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Nav ──────────────────────────────────────────────────────────────── */
:root .nav {
  background: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
}
:root .nav.scrolled {
  border-bottom-color: var(--b1);
}

/* The logo alone: no chip, ring or shadow behind it. */
:root .brand-mark,
:root .brand-mark::before,
:root .brand-mark::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
:root .nav .brand-logo-img {
  width: 30px;
  height: 30px;
  filter: none;
  box-shadow: none;
  border-radius: 0;
}
:root .nav .brand {
  gap: 10px;
}
:root .nav .brand-text {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
}
:root .nav .brand-name {
  font-family: var(--ui-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
:root .nav .brand-tag {
  font-family: var(--ui-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text3);
}

:root .nav-links a:not(.btn) {
  font-family: var(--ui-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  transition: color 0.15s ease;
}
:root .nav-links a:not(.btn):hover {
  color: var(--text);
}

:root .nav-links .nav-cta.btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
}

/* Get Pro beside Add to Chrome: black with a hint of green, the white
   install button staying the brightest thing in the bar. */
:root .nav-links .btn.nav-buy {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  background: #0b0b0c;
  border: 1px solid var(--ok-bd);
  color: var(--ok);
  box-shadow: none;
}
:root .nav-links .btn.nav-buy:hover {
  background: var(--ok-bg);
  border-color: rgba(62, 207, 142, 0.5);
  color: #6ee7b4;
}

/* Sign in: a quiet secondary control. Signed in: the avatar. */
:root .nav-links .btn.nav-signin {
  height: 32px;
  padding: 0 6px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: var(--text2);
  box-shadow: none;
}
:root .nav-links .btn.nav-signin:hover {
  background: transparent;
  color: var(--text);
}
:root .nav-links .btn.nav-signin.nav-avatar {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--s2);
  border: 1px solid var(--b2);
  color: var(--text);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 600;
}
:root .nav-links .btn.nav-signin.nav-avatar:hover,
:root .nav-links .btn.nav-signin.nav-avatar[aria-expanded="true"] {
  border-color: var(--ok-bd);
  background: var(--s3);
}

:root .nav-menu summary {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--s1);
  border: 1px solid var(--b1);
  box-shadow: none;
  font-family: var(--ui-sans);
  font-size: 13px;
  font-weight: 600;
}
:root .nav-menu-panel {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── Account menu (signed in) ─────────────────────────────────────────── */
.acct-menu-wrap {
  position: relative;
  display: inline-flex;
}
.acct-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 260px;
  padding: 6px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--ui-sans);
  transform-origin: top right;
  animation: acctMenuIn 0.16s var(--ui-ease);
}
.acct-menu[hidden] {
  display: none;
}
@keyframes acctMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.acct-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--b1);
  margin-bottom: 6px;
}
.acct-menu-av {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--s2);
  border: 1px solid var(--b2);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.acct-menu-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.acct-menu-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-menu-email {
  font-family: var(--ui-mono);
  font-size: 11px;
  color: var(--text3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-menu a,
.acct-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text2);
  font: 500 13.5px/1.2 var(--ui-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.acct-menu a:hover,
.acct-menu button:hover,
.acct-menu a:focus-visible,
.acct-menu button:focus-visible {
  background: var(--s2);
  color: var(--text);
  outline: none;
}
.acct-menu svg {
  flex: 0 0 16px;
  color: var(--text3);
}
.acct-menu .acct-menu-sep {
  height: 1px;
  background: var(--b1);
  margin: 6px 4px;
}
.acct-menu .acct-menu-plan {
  margin-left: auto;
  font-family: var(--ui-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text3);
}
.acct-menu .acct-menu-plan.is-pro {
  color: var(--ok);
}

/* ── Scroll reveal ────────────────────────────────────────────────────── */
/* Content is visible by default. reveal.js turns this on only when motion is
   allowed: a short, quiet fade up as a block comes into view, and nothing
   as it leaves. With scroll-driven animations the fade follows the scroll
   bar; elsewhere an IntersectionObserver plays it once. */
@keyframes rvIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  html.rv-sda .reveal {
    animation: rvIn linear both;
    animation-timeline: view();
    /* A fixed distance: a tall block is fully in after 160px of scrolling,
       so a link that lands on a section never leaves it half faded. */
    animation-range: entry 0% entry 160px;
  }
}
html.rv-on .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ui-ease), transform 0.6s var(--ui-ease);
  transition-delay: var(--rv-delay, 0s);
}
html.rv-on .reveal.is-in {
  opacity: 1;
  transform: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Footer: Copy turns into "Copied" in place for a moment. Both labels share
   one grid cell, so the button never changes size and nothing below moves. */
:root .footer-copy-btn {
  display: inline-grid;
  place-items: center;
}
:root .footer-copy-btn > span {
  grid-area: 1 / 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
:root .footer-copy-btn .fc-done {
  opacity: 0;
  transform: translateY(3px);
  color: var(--ok);
}
:root .footer-copy-btn.is-copied {
  border-color: var(--ok-bd);
}
:root .footer-copy-btn.is-copied .fc-idle {
  opacity: 0;
  transform: translateY(-3px);
}
:root .footer-copy-btn.is-copied .fc-done {
  opacity: 1;
  transform: none;
}

/* ── Shared text styles ───────────────────────────────────────────────── */
.ui-label {
  font-family: var(--ui-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Legal and inner pages pick up the same type. */
:root .legal-page h1,
:root .legal-page h2,
:root .auth-card h1,
:root .redeem-page h1{
  font-family: var(--ui-sans);
  letter-spacing: -0.02em;
}

/* Sign-in: Continue with Google is the light button, so the email button
   is an outline and the two never look like the same thing. */
:root .auth-card:has(.btn-oauth) .btn.btn-primary {
  background: transparent;
  color: var(--text);
  border-color: var(--b2);
  box-shadow: none;
}
:root .auth-card:has(.btn-oauth) .btn.btn-primary:hover {
  background: var(--s1);
}

/* Stacked actions on the sign-in and checkout cards: flex:1 in a column
   collapsed the new fixed-height buttons to a sliver. */
:root .auth-actions--stack .btn {
  flex: none;
  width: 100%;
  height: 44px;
}
:root .auth-actions .btn {
  height: 44px;
}

/* Pricing: while checkout is closed the Pro button is a status, not a second
   copy of the Add to Chrome button beside it (sales.js swaps it to ghost and
   relabels it "Checkout opens soon"). */
:root .h-plan--pro .btn.btn-ghost,
:root .hm-plan--pro .btn.btn-ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--b2);
  color: var(--text3);
  font-family: var(--ui-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: default;
  pointer-events: none;
}
:root .h-plan--pro .btn.btn-ghost::before,
:root .hm-plan--pro .btn.btn-ghost::before {
  content: "" !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  position: static;
  inset: auto;
  display: inline-block;
}

/* ── Standalone pages ─────────────────────────────────────────────────── */
/* Sign-in, the two sign-in link pages, checkout and the 404 page share one
   layout: the brand, then one card, centred in the window, with the green
   hairline the timer and summary cards carry. Status pages (no form) centre
   their text and lead with an icon that says what happened. */
:root .auth-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 48px 20px 64px;
}
:root .auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(640px 420px at 50% 32%, rgba(62, 207, 142, 0.055), transparent 70%);
}
:root .auth-box {
  width: 100%;
  max-width: 400px;
}
@media (prefers-reduced-motion: no-preference) {
  :root .auth-box {
    animation: stIn 0.7s var(--ui-ease) both;
  }
}
@keyframes stIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* The brand reads as it does in the menu bar: HumDocs / TYPER. */
:root .auth-brand {
  gap: 10px;
  margin: 0 0 28px;
}
:root .auth-brand img {
  width: 28px;
  height: 28px;
}
:root .auth-brand .n {
  font: 600 16px/1 var(--ui-sans);
  letter-spacing: -0.02em;
  color: var(--text);
}
:root .auth-brand .k {
  font: 500 11px/1 var(--ui-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
}
:root .auth-brand .k::before {
  content: "/ ";
}

:root .auth-card {
  position: relative;
  overflow: hidden;
  padding: 36px 32px 32px;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 18px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root .auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(62, 207, 142, 0.35) 35%, rgba(110, 231, 180, 0.25) 50%, rgba(62, 207, 142, 0.35) 65%, transparent);
}
:root .auth-card h1 {
  margin: 0 0 10px;
  font: 600 22px/1.25 var(--ui-sans);
  letter-spacing: -0.025em;
  color: var(--text);
}
:root .auth-lede {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text2);
}
:root .auth-card h1,
:root .auth-card .auth-lede {
  text-align: center;
}
:root .auth-foot .auth-back {
  margin-top: 12px;
  text-decoration: none;
  color: var(--text3);
}
:root .auth-card.is-status {
  text-align: center;
  padding: 40px 32px 30px;
}
:root .auth-card.is-status .auth-lede {
  max-width: 32ch;
  text-wrap: balance;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 420px) {
  :root .auth-card,
  :root .auth-card.is-status {
    padding: 32px 22px 26px;
  }
}

/* What happened, at a glance. */
.st-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border-radius: 14px;
  border: 1px solid var(--b1);
  background: #141414;
  color: var(--text2);
}
.st-icon svg {
  display: block;
  width: 22px;
  height: 22px;
}
.st-icon--ok {
  color: var(--ok);
  border-color: var(--ok-bd);
  background: var(--ok-bg);
}
.st-icon--warn {
  color: var(--warn);
  border-color: rgba(232, 184, 75, 0.3);
  background: rgba(232, 184, 75, 0.08);
}
.st-icon--err {
  color: var(--err);
  border-color: var(--err-bd);
  background: var(--err-bg);
}
.st-icon--code {
  width: fit-content;
  min-width: 64px;
  padding: 0 14px;
  font: 600 15px/1 var(--ui-mono);
  letter-spacing: 0.08em;
  color: var(--ok);
  border-color: var(--ok-bd);
  background: var(--ok-bg);
}
.st-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--ok);
  animation: stSpin 0.8s linear infinite;
}
@keyframes stSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .st-spin { animation-duration: 2.4s; }
}

/* The quiet way back, under the main action. */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font: 500 14px/1 var(--ui-sans);
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.auth-back:hover {
  color: var(--text);
}
.auth-back span {
  transition: transform 0.2s var(--ui-ease);
}
.auth-back:hover span {
  transform: translateX(-3px);
}

/* A row of useful links (404). */
.st-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #1c1c1c;
  list-style: none;
}
.st-links a {
  font-size: 13.5px;
  color: var(--text3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.st-links a:hover {
  color: var(--text);
}

:root .auth-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text3);
}
:root .auth-foot a {
  color: var(--text2);
  text-decoration: underline;
  text-decoration-color: var(--b2);
  text-underline-offset: 3px;
}
:root .auth-foot a:hover {
  color: var(--text);
}
/* .auth-actions sets display: flex, which beats the browser's own rule for
   the hidden attribute. Without this, a card showed its "Get a new link"
   button beside the normal one before anything had gone wrong. */
:root .auth-card [hidden] {
  display: none !important;
}

/* The same card inside a normal page (redeem): the menu bar and footer stay,
   and the card sits centred in the space between them. */
:root .auth-shell--page {
  min-height: calc(100vh - 72px);
  min-height: calc(100dvh - 72px);
  padding: 56px 20px 80px;
}

/* Redeem: one key field, typed in the extension's mono. */
:root .redeem-card .redeem-input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--b1);
  background: #0a0a0a;
  color: var(--text);
  font: 500 17px/1 var(--ui-mono);
  letter-spacing: 0.08em;
  text-align: center;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:root .redeem-card .redeem-input::placeholder {
  color: #4a4a4a;
}
:root .redeem-card .redeem-input:focus {
  border-color: var(--ok-bd);
  box-shadow: 0 0 0 3px rgba(62, 207, 142, 0.12);
}
:root .redeem-card .redeem-input.redeem-input--error {
  border-color: var(--err-bd);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}
:root .redeem-card .redeem-msg {
  min-height: 0;
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--err);
}
:root .redeem-card .redeem-msg:empty {
  display: none;
}
:root .redeem-card .redeem-msg.redeem-msg--ok {
  color: var(--ok);
}
:root .redeem-card .auth-actions {
  margin-top: 14px;
}
:root .redeem-card .redeem-hint {
  margin: 14px auto 0;
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text3);
  text-wrap: balance;
}

/* While checkout is closed, a "Checkout opens soon" button is a status, not
   something to press: the same dashed look as on the pricing card. */
:root a.btn.btn-ghost[href="purchase.html"],
:root a.btn.btn-ghost[href="/purchase.html"] {
  background: transparent;
  border-style: dashed;
  border-color: var(--b2);
  color: var(--text3);
  font-family: var(--ui-mono);
  font-size: 12.5px;
  font-weight: 500;
  pointer-events: none;
  gap: 8px;
}
:root a.btn.btn-ghost[href="purchase.html"]::before,
:root a.btn.btn-ghost[href="/purchase.html"]::before {
  content: "" !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
}
:root .redeem-card .redeem-msg {
  font-family: var(--ui-sans);
}
/* The success state is the card's own content, not a box inside it. */
:root .redeem-card .redeem-success {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: center;
}
:root .redeem-card:has(#redeem-success:not([hidden])) .auth-back {
  display: none;
}

/* Google's own sign-in button draws itself in an iframe at the width we
   give it; this keeps it centred and the height steady while it loads. */
.auth-gsi {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-bottom: 4px;
  color-scheme: light;
}

/* Narrow phones: Get Pro, Add to Chrome, Menu and Sign in all fit beside the
   logo (at 360px Get Pro used to run into it). */
@media (max-width: 400px) {
  :root .nav-links .btn.nav-buy,
  :root .nav-links .nav-cta.btn {
    padding: 0 9px;
    font-size: 12.5px;
  }
  :root .nav-links .btn.nav-signin {
    padding: 0 2px;
  }
}

/* The bar: the logo, then Get Pro, Add to Chrome and, hard right, Sign in:
   the place the account circle takes once signed in, so it never changes
   sides (owner, 5 Oct 2026). The section links are one scroll away on the
   page; on phones they, and Sign in, sit behind the menu icon. */
:root .nav-links .nav-signin-item {
  order: 99;
  margin-left: 2px;
}
@media (max-width: 899px) {
  :root .nav-links .nav-signin-item {
    display: none;
  }
}
:root .nav-menu summary {
  width: 34px;
  padding: 0;
  justify-content: center;
  color: var(--text2);
}
:root .nav-menu summary:hover,
:root .nav-menu[open] summary {
  color: var(--text);
}
:root .nav-menu summary svg {
  display: block;
}

/* Signed in: the account circle sits hard right, after the two buttons, on
   every width (signed out, Sign in takes the same place on wide screens, and
   is in the menu on phones). */
:root .nav-links .nav-signin-item:has(.nav-avatar) {
  order: 99;
  display: block;
  margin-left: 2px;
}
/* Someone who owns Pro is not offered it (humdocs-auth.js checks). */
:root.hd-has-pro .nav-links li:has(> .nav-buy) {
  display: none;
}