/* Site chrome: skip link, header and navigation, flash messages, site
   notices, main-column composition, locale selector, and guest landing. */
@layer components {
  .skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    z-index: 100;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .skip-link:focus {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-4);
    border: var(--border-thin) solid var(--color-text);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 700;
  }

  .site-header {
    position: relative;
    z-index: 20;
    border-bottom: var(--border-thin) solid var(--color-border);
    background: var(--color-canvas);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    width: min(100%, var(--width-application));
    min-height: 4rem;
    margin-inline: auto;
    padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-7));
  }

  body:not(.error-layout) .site-header__brand {
    display: inline-flex;
    align-items: baseline;
    flex: 0 0 auto;
    color: var(--color-text);
    font-family: var(--font-reading);
    line-height: 1;
    text-decoration: none;
  }

  .site-header__brand-mark {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.085em;
  }

  .site-nav,
  .site-nav__primary,
  .site-nav__secondary {
    min-width: 0;
  }

  .site-nav__primary,
  .site-nav__secondary {
    display: flex;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__primary > li,
  .site-nav__secondary > li {
    min-width: 0;
  }

  .site-nav a,
  .site-nav summary,
  .site-nav button {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: var(--space-1) var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-interface);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .site-nav a:hover,
  .site-nav summary:hover,
  .site-nav button:hover {
    color: var(--color-accent);
  }

  .site-nav__new-post,
  .site-nav__sign-up {
    border-bottom: 2px solid var(--color-accent);
  }

  .site-nav__my-blog-icon {
    display: none;
  }

  .site-nav__feed-icon {
    display: none;
  }

  .site-nav__more-item,
  .site-nav__more {
    position: relative;
  }

  .site-nav__more > summary {
    gap: 0.25em;
    cursor: pointer;
    list-style: none;
  }

  .site-nav__more > summary::-webkit-details-marker {
    display: none;
  }

  .site-nav__more-indicator {
    display: block;
    flex: none;
    width: 1em;
    height: 1em;
    color: var(--color-accent);
  }

  .site-nav__more[open] .site-nav__more-indicator-vertical {
    display: none;
  }

  .site-nav__sign-out-form {
    margin: 0;
  }

  .site-nav__secondary {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    display: grid;
    align-items: stretch;
    gap: 0;
    width: min(19rem, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 5rem);
    padding: var(--space-2);
    overflow-y: auto;
    border: var(--border-thin) solid var(--color-border-strong);
    background: var(--color-surface);
    box-shadow: var(--elevation-menu);
  }

  .site-nav__secondary a,
  .site-nav__secondary button {
    width: 100%;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    white-space: normal;
  }

  .site-nav__more:not([open]) > .site-nav__secondary {
    display: none;
  }

  .site-header__notifications {
    gap: 0.0625rem;
  }

  /* Compact navigation icons: shown only by the compact steps below, and
     as tall as the navigation text beside them (its font size). */
  .site-nav__icon {
    display: none;
    flex: none;
    width: auto;
    height: 1em;
    overflow: visible;
  }

  /* The unread count sits right after the label or bell icon, raised like a
     mathematical exponent: its foot rests two thirds up the capitals. Its
     height is --nav-badge-ratio of the icon beside it. Only `font-size`
     resolves `em` against the navigation text; every other property would
     resolve it against the badge's own size, so the height is expressed in
     the badge's own em (0.72 of it is the digit size). */
  .site-header__unread-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    box-sizing: border-box;
    min-width: calc(1em / 0.72);
    height: calc(1em / 0.72);
    /* Digits carry no descender, so the font's descent space lifts their
       ink above the circle's centre. Top padding pushes them back down by
       half its value (the rest is centring), so each value here is twice
       the measured offset. It is per preset because it follows the
       navigation face's metrics. */
    padding: var(--nav-badge-nudge, 0.37em) 0.125rem 0;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-surface);
    font-size: calc(1em * var(--nav-badge-ratio, 0.6667) * 0.72);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    transform: translateY(calc(-50% - 0.18em));
    transform: translateY(calc(-50% - 0.25cap));
  }

  .flash {
    width: min(100%, var(--width-reading));
    margin-inline: auto;
  }

  /* Flash messages share the column of the page they introduce. */
  .site-main:has(
      > .settings-page,
      > .community-management-page--tags,
      > .mod-dashboard,
      > .admin-detail
    )
    > .flash {
    width: min(100%, var(--width-wide));
  }

  .site-main:has(> .admin-index) > .flash {
    width: min(100%, var(--width-application));
  }

  /* A page header already rules off the body. A list that opens the body
     must not add its own thin top rule, or two lines stack with nothing
     between them. Colour-coded section strips are not dividers and stay. */
  .page-header + .feed > .post-card:first-child,
  .page-header + .notifications__region > .notifications:first-child,
  .page-header + .settings-layout > .settings-nav:first-child > .settings-nav__list:first-child,
  .page-header + * > .subscriptions__list:first-child,
  .page-header + .community-index,
  .page-header + .tag-index,
  .page-header + .tag-posts > .tag-posts__item:first-child > .post-card:first-child,
  .identity-roster__header + .identity-list,
  .community-management-header + .community-members {
    border-top: 0;
  }

  /* Site notices sit outside main, so they recompute its content box and
     then take the same column as the page below them. */
  .unverified-banner,
  .email-verified-banner {
    --notice-column: var(--width-reading);
    width: min(
      calc(min(100%, var(--width-application)) - 2 * var(--page-gutter)),
      var(--notice-column)
    );
    margin-inline: auto;
  }

  body:has(
      .site-main > :is(
        .settings-page,
        .community-management-page--tags,
        .mod-dashboard,
        .admin-detail
      )
    )
    :is(.unverified-banner, .email-verified-banner) {
    --notice-column: var(--width-wide);
  }

  body:has(.site-main > .admin-index)
    :is(.unverified-banner, .email-verified-banner) {
    --notice-column: var(--width-application);
  }

  .flash__message {
    margin: 0;
  }

  .flash__message:not(:empty) {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid currentColor;
    background: var(--color-surface);
  }

  .flash__message--alert,
  .field-error,
  .button--danger {
    color: var(--color-danger);
  }

  .flash__message--notice,
  .userpic__default-badge {
    color: var(--color-success);
  }

  .unverified-banner,
  .email-verified-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid currentColor;
    background: var(--color-surface);
    font-size: var(--text-sm);
  }

  .unverified-banner {
    color: var(--color-danger);
  }

  .email-verified-banner {
    color: var(--color-success);
  }

  .unverified-banner p,
  .email-verified-banner__heading {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  .unverified-banner p {
    flex: 1 1 20rem;
  }

  .unverified-banner form,
  .unverified-banner .btn {
    min-width: 0;
    max-width: 100%;
    margin: 0;
  }

  .unverified-banner .btn {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .email-verified-banner__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .email-verified-banner__cta-link {
    display: inline-block;
  }

  .locale-selector {
    width: min(100%, var(--width-reading));
    margin: 0 0 var(--space-7);
  }

  .locale-selector__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  /* Progressive enhancement: `locale_selector_controller.js` adds the
     state class once it can auto-submit on change, so the extra submit
     button only exists on the no-JS path. */
  .locale-selector--js .locale-selector__submit {
    display: none;
  }

  /* Public Home's top rail renders the selector as one framed dropdown
     butted against the Support link. These overrides live in the
     components layer because that layer outranks `pages`, where the
     rest of the Home shell is defined. */
  .home-utility .locale-selector {
    width: auto;
    margin: 0;
  }

  .home-utility .locale-selector__form {
    flex-wrap: nowrap;
    gap: 0;
  }

  .home-utility .locale-selector :is(label, select, input) {
    font: inherit;
  }

  /* The visible label is redundant beside a two-option dropdown; it
     stays in the DOM as the select's accessible name. */
  .home-utility .locale-selector__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .home-utility .locale-selector :is(select, input) {
    height: 2rem;
    padding-inline: 0.5rem;
    border: 1px solid var(--home-ink);
    border-radius: 0;
    background: transparent;
    color: var(--home-ink);
  }

  .home-utility .locale-selector input {
    margin-left: -1px;
  }

  .home-utility .locale-selector input:hover,
  .home-utility .locale-selector input:focus-visible {
    background: var(--home-ink);
    color: var(--home-warm-white);
  }

  .landing-hero {
    max-width: var(--width-reading);
    margin: 0 0 var(--space-6);
  }

  .landing-hero__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-xl);
    letter-spacing: -0.045em;
    line-height: var(--leading-tight);
  }

  .landing-hero__tagline {
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
  }

  .landing-hero__pillars {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
  }

  .landing-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
  }

  .landing-hero__cta {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-4);
    border: var(--border-thin) solid var(--color-text);
    border-radius: var(--radius-small);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
  }

  .landing-hero__cta--primary {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-surface);
  }

  @media (max-width: 900px) {
    .site-nav__my-blog-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .site-nav__my-blog-icon {
      display: inline;
    }

    .site-nav__my-journal {
      min-width: 1.5rem;
      justify-content: center;
    }
  }

  @media (max-width: 720px) {
    .site-header__inner {
      gap: var(--space-3);
      min-height: 3.5rem;
      padding: var(--space-2) var(--space-4);
    }

    .site-nav__primary {
      justify-content: flex-end;
      gap: var(--space-1);
    }

    .site-nav a,
    .site-nav summary,
    .site-nav button {
      padding-inline: var(--space-1);
      letter-spacing: 0.025em;
    }

  }

  @media (max-width: 430px) {
    .site-header__inner {
      align-items: flex-start;
    }

    .site-nav__primary {
      flex-wrap: wrap;
    }

    .site-nav a,
    .site-nav summary,
    .site-nav button {
      white-space: normal;
    }

    .site-nav__feed-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .site-nav__feed-icon {
      display: inline;
    }

    .site-nav__feed {
      min-width: 1.5rem;
      justify-content: center;
    }
  }

  @media (max-width: 330px) {
    .site-header__inner {
      gap: var(--space-1);
      padding-inline: var(--space-2);
    }
  }

  /* First compact step: the notifications label becomes the bell icon
     up to 600px, where the Russian row would squeeze its one-click items.
     Presets choose their widths (journal-presentation-themes.md §4). */
  @media (max-width: 600px) {
    .site-header__bell-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .site-header__bell-icon {
      display: block;
    }

    .site-header__notifications {
      min-width: 1.5rem;
      justify-content: center;
    }
  }

  /* Second compact step: More becomes the menu icon (☰) below 390px,
     where the Russian Journal row would otherwise break onto a second row.
     The label stays as the accessible name. */
  @media (max-width: 389px) {
    .site-nav__more-label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .site-nav__more > summary {
      min-width: 1.5rem;
      justify-content: center;
    }

    .site-nav__menu-icon {
      display: block;
    }

    .site-nav__more-indicator {
      display: none;
    }
  }

  /* Fourth compact step: when both icons are not enough, the navigation
     type shrinks so the row still fits on one line. Journal Russian needs
     it below 330px (journal-presentation-themes.md §4). */
  @media (max-width: 329px) {
    .site-nav a,
    .site-nav summary,
    .site-nav button {
      font-size: 0.6875rem;
    }
  }
}