/*
 * The hidden attribute must always win.
 *
 * Component rules such as `.btn { display: inline-flex }` and
 * `.profile-actions { display: flex }` are author rules, so they outrank the
 * user-agent `[hidden] { display: none }`. Without this, a control hidden by the
 * server or by script still renders — which is how the onboarding "Start reading"
 * button and an inapplicable "Connect this browser" action both appeared.
 */
[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wordy-content {
  flex: 1 0 auto;
}

/* Site shell -------------------------------------------------------------- */

.wordy-site-header {
  position: sticky;
  z-index: 50;
  top: 0;
}

.wordy-navbar {
  background: color-mix(in oklch, var(--bg) 96%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.wordy-navbar__inner {
  display: grid;
  width: min(100%, var(--content-width));
  min-height: 3.25rem;
  margin-inline: auto;
  padding: 0 var(--page-gutter);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem 1.6rem;
}

.wordy-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.wordy-brand:hover {
  color: var(--ink);
  text-decoration: none;
}

.wordy-brand__mark {
  display: block;
  width: 0.5625rem;
  height: 0.5625rem;
  overflow: hidden;
  background: var(--accent);
  color: transparent;
  font-size: 0;
}

.wordy-navbar__links {
  display: flex;
  min-width: 0;
  margin-right: auto;
  align-items: center;
  gap: 0.125rem;
}

.wordy-nav-link {
  display: inline-flex;
  min-height: var(--control-height-sm);
  padding: 0 0.7rem;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--dim);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.wordy-nav-link:hover {
  background: var(--panel2);
  color: var(--ink);
  text-decoration: none;
}

.wordy-nav-link.active {
  background: var(--panel2);
  color: var(--ink);
  font-weight: 600;
}

.wordy-navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wordy-icon-action {
  position: relative;
  display: inline-grid;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  flex: 0 0 var(--control-height-sm);
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--dim);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
}

.wordy-icon-action:hover,
.wordy-icon-action.active {
  border-color: var(--ink);
  background: var(--panel2);
  color: var(--ink);
  text-decoration: none;
}

/* Signing in is the primary action for a logged-out visitor, so it is a
   labelled button rather than one more icon next to the theme toggle. */
.wordy-signin {
  gap: 0.4rem;
  min-height: var(--control-height-sm);
  padding-inline: 0.7rem;
  border-color: var(--accent);
  background: var(--accent);
  color: oklch(0.18 0.01 80);
  font-weight: 600;
}

.wordy-signin:hover,
.wordy-signin:focus-visible {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 90%, white);
  color: oklch(0.18 0.01 80);
  text-decoration: none;
}

.wordy-icon-action__badge {
  position: absolute;
  top: -0.28rem;
  right: -0.28rem;
  min-width: 1.1rem;
  padding: 0.14rem 0.25rem;
  border: 1px solid var(--bg);
  border-radius: var(--radius-xs);
  background: var(--danger);
  color: white;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1;
  text-align: center;
}

.footer {
  flex-shrink: 0;
}

.site-footer {
  padding: 1rem max(1rem, env(safe-area-inset-right))
    calc(1rem + env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: var(--bg);
  color: var(--dim);
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  display: flex;
  width: min(100%, var(--content-width));
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.65625rem;
  letter-spacing: 0.03em;
}

.site-footer a {
  color: var(--dim);
}

/* Landing page ------------------------------------------------------------ */

.landing-hero {
  display: grid;
  justify-items: center;
  padding: 0 0 clamp(2.5rem, 5vw, 3.5rem);
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.landing-hero__copy {
  max-width: 46rem;
}

.landing-hero__title {
  margin: 0.35rem 0 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.9vw, 3.4rem);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.05;
  text-wrap: balance;
}

.landing-hero__lead {
  max-width: 40rem;
  margin: 1.15rem auto 0;
  color: var(--dim);
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.62;
  text-wrap: pretty;
}

.landing-hero__actions {
  display: flex;
  margin-top: 1.35rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}

/* Install-first hero -------------------------------------------------------
 *
 * The head script puts one of ws-store-{chrome,firefox,both,none} on <html>.
 * Everything below is display and emphasis off that class, so the markup can
 * carry both stores for crawlers and degrade to "offer both" with no script.
 *
 * Base state == no script == ws-store-both: both stores big, no "also for",
 * no desktop-only note. Each state below narrows that down.
 */

/* Installing is the conversion, so this is the one loud thing in the hero and
   the only element still wearing the accent. */
/* Two classes deep on purpose: components.css loads after this file, so a
   single .landing-install__store would lose to .btn-lg on source order. */
.landing-install .landing-install__store {
  min-height: 3.25rem;
  padding-inline: 1.75rem;
  gap: 0.5rem;
  font-size: 1.0625rem;
}

.landing-install__alt,
.landing-install__signin {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.9rem;
  color: var(--dim);
  font-size: 0.8125rem;
}

.landing-install__alt {
  margin: 0.85rem 0 0;
}

.landing-install__signin {
  margin: 0.4rem 0 0;
  align-items: baseline;
}

/* Everything under the button is an alternative, not a second call to action:
   underlined dim text, so the accent is not competing with itself. */
.landing-install__alt a,
.landing-install__signin a {
  color: var(--dim);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.landing-install__alt a:hover,
.landing-install__signin a:hover {
  color: var(--accent);
}

.landing-install__other,
.landing-install__desktop-only,
.landing-install__signin-label--create {
  display: none;
}

/* One store is the reader's: the other steps down to a plain link. */
.ws-store-chrome .landing-install__store--firefox,
.ws-store-firefox .landing-install__store--chrome {
  display: none;
}

.ws-store-chrome .landing-install__other--firefox,
.ws-store-firefox .landing-install__other--chrome {
  display: inline;
}

/* No extension support on this device: Chrome on Android, anything on iOS. A
   store button here is a dead end, so creating the account becomes the action,
   the reason is stated plainly, and "already have an account?" would be the
   wrong prompt for what is now the primary path. */
/* .landing-hero__actions is also the final CTA's button row in index.mustache,
   so this has to name the install block or that section loses its buttons. */
.ws-store-none .landing-install,
.ws-store-none .landing-install__signin-prefix {
  display: none;
}

.ws-store-none .landing-install__desktop-only {
  display: inline;
}

/* Promoted here with no "already have an account?" ahead of it, so it has to
   offer to make one rather than to sign in to one the reader may not have. */
.ws-store-none .landing-install__signin-label--create {
  display: inline;
}

.ws-store-none .landing-install__signin-label--return {
  display: none;
}

.ws-store-none .landing-install__alt {
  margin-top: 1.35rem;
}

/* Stacked, so the promoted button is never a run-in inside a sentence. */
.ws-store-none .landing-install__signin {
  flex-direction: column;
  margin-top: 1.1rem;
  align-items: center;
  gap: 0.7rem;
}

.ws-store-none .landing-hero__signin {
  display: inline-flex;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  align-items: center;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: oklch(0.18 0.01 80);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.ws-store-none .landing-hero__signin:hover {
  background: color-mix(in oklch, var(--accent) 90%, white);
  color: oklch(0.18 0.01 80);
}

.landing-hero__meta {
  display: flex;
  margin: 1.1rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.35rem;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  list-style: none;
  text-transform: uppercase;
}

.landing-hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.landing-hero__meta li::before {
  width: 4px;
  height: 4px;
  background: currentColor;
  content: "";
}

.landing-steps,
.landing-split,
.landing-quiet,
.landing-pace,
.landing-account,
.landing-word-list,
.landing-collections {
  padding-block: clamp(3rem, 7vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}

/* The signup section is centred like the hero, so it reads as a moment to act
   on rather than one more row of content. */
.landing-account {
  display: grid;
  justify-items: center;
  text-align: center;
}

.landing-account .landing-section-heading {
  max-width: 42rem;
  margin-bottom: 1.75rem;
}

.landing-account__actions {
  display: flex;
  margin-top: 1.75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.landing-account__note {
  color: var(--dim);
  font-size: 0.8125rem;
}

.landing-steps {
  padding-block: clamp(2rem, 4vw, 2.5rem);
}

.landing-steps__list {
  display: grid;
  margin: 0;
  padding: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  list-style: none;
}

.landing-step {
  padding: 1.5rem 1.4rem;
  background: var(--panel);
}

.landing-step__num {
  display: block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* A phone cannot install today, so step 01 says where it happens instead of the
   list reordering. CSS order would move the cards visually but not in the DOM,
   leaving assistive technology to read the numerals and headings in opposite
   orders -- and rendering a second account-first sequence would mean two copies
   of every step's wording to keep in agreement. */
.landing-step__desktop-note {
  display: none;
}

.ws-store-none .landing-step__desktop-note {
  display: inline;
}

.landing-step h3 {
  margin: 0.75rem 0 0;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.landing-step p {
  margin: 0.5rem 0 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.6;
}

.landing-cta {
  display: grid;
  justify-items: center;
  padding-block: clamp(3rem, 7vw, 4rem);
  text-align: center;
}

.landing-cta h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.landing-cta p {
  max-width: 40rem;
  margin: 0.9rem 0 0;
  color: var(--dim);
  font-size: 0.9375rem;
  line-height: 1.62;
}

/* Sits after the buttons: an answer to "who is behind this?", asked only once
   the pitch has landed. */
.landing-cta .landing-cta__note {
  max-width: 34rem;
  margin: 1.35rem 0 0;
  color: var(--dim);
  font-size: 0.8125rem;
}

.landing-section-heading {
  max-width: 45rem;
  margin-bottom: 1.5rem;
}

.landing-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.landing-section-heading > p:last-child {
  margin: 0.5rem 0 0;
  color: var(--dim);
  font-size: 0.875rem;
}

.landing-capability__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  color: var(--accent);
  font-size: 1.05rem;
}

.word-scroller {
  padding: 1rem;
  overflow-x: auto;
}

.word-scroller-header {
  display: flex;
  margin-bottom: 1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.word-scroller-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0.35rem;
  color: var(--ink);
  font-size: 0.875rem;
}

.word-scroller-table td {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: transparent;
  overflow-wrap: anywhere;
}

.word-scroller-count-badge {
  display: inline-flex;
  padding: 0.3rem 0.55rem;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--known);
  border-radius: var(--radius-xs);
  color: var(--known);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.landing-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

.landing-split__copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.landing-split__lead {
  margin: 0.9rem 0 0;
  color: var(--dim);
  font-size: 0.9375rem;
  line-height: 1.62;
}

.landing-split__media {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.landing-chips {
  display: flex;
  margin: 1.35rem 0 0;
  padding: 0;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
}

.landing-chips li {
  padding: 0.35rem 0.7rem;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.8125rem;
}

/* Signed-out nudge and signed-in next step ------------------------------- */

.signup-nudge,
.home-next-step {
  display: flex;
  margin-bottom: 1.5rem;
  padding: 1.15rem 1.35rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}

.signup-nudge__copy,
.home-next-step__copy {
  min-width: min(100%, 18rem);
  flex: 1;
}

.signup-nudge h2,
.home-next-step h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

.signup-nudge p,
.home-next-step p {
  margin: 0.35rem 0 0;
  color: var(--dim);
  font-size: 0.875rem;
  line-height: 1.55;
}

.signup-nudge__actions,
.home-next-step__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

.signup-nudge__note {
  color: var(--dim);
  font-size: 0.75rem;
}

.home-next-step {
  position: relative;
  padding-right: 3rem;
}

.home-next-step__icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 1.05rem;
}

.extension-connection-header {
  background: var(--panel2);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.google-icon-enabled {
  color: var(--known);
}

.add-outline * {
  outline: solid 1px var(--known);
}

.add-outline input {
  outline-color: var(--danger);
}

@media (max-width: 767.98px) {
  .wordy-navbar__inner {
    min-height: auto;
    padding-top: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.35rem 0.65rem;
  }

  .wordy-navbar__links {
    width: calc(100% + (var(--page-gutter) * 2));
    margin-inline: calc(var(--page-gutter) * -1);
    padding: 0.1rem var(--page-gutter) 0.4rem;
    grid-column: 1 / -1;
    grid-row: 2;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .wordy-navbar__links::-webkit-scrollbar {
    display: none;
  }

  .wordy-navbar__actions {
    gap: 0.2rem;
  }

  .wordy-icon-action,
  .theme-toggle-btn {
    min-width: 2rem;
    width: 2rem;
    min-height: 2rem;
    height: 2rem;
    padding: 0;
  }

  .wordy-nav-link {
    padding-inline: 0.65rem;
  }

  .site-footer__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-hero {
    padding-block: 0 2.5rem;
  }

  .landing-hero__title {
    font-size: clamp(2rem, 8.4vw, 2.75rem);
  }

  .landing-hero__lead {
    margin-top: 0.9rem;
    font-size: 0.9375rem;
  }

  /* Full-width primary, secondary wrapping under it at its own width. */
  .landing-hero__actions .btn-primary {
    width: 100%;
  }

  /* The promoted sign-in on a phone is the primary action, so it matches. */
  .ws-store-none .landing-hero__signin {
    width: 100%;
    justify-content: center;
  }

  .landing-hero__meta {
    gap: 0.35rem 1rem;
    font-size: 0.625rem;
  }

  .landing-steps__list,
  .landing-split {
    grid-template-columns: 1fr;
  }

  .landing-step {
    padding: 1.25rem 1.15rem;
  }

  .word-scroller-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-cta .landing-hero__actions {
    width: 100%;
  }
}

@media (max-width: 389.98px) {
  .wordy-brand__name {
    font-size: 0.6875rem;
  }

  .wordy-navbar__actions {
    gap: 0.1rem;
  }

  .wordy-nav-link {
    padding-inline: 0.55rem;
    font-size: 0.75rem;
  }
}