:root {
  color-scheme: light;
  --page-bg: #ffffff;
  --body-background: var(--page-bg);
  --ink: #0b3ea8;
  --ink-soft: #315fb9;
  --line: #b7c9ef;
  --panel: #f7faff;
  --input-bg: #ffffff;
  --button-bg: #f7faff;
  --button-alt-bg: #eef5ff;
  --feedback-ok-bg: #eef5ff;
  --feedback-error-bg: #fff3f3;
  --status-error: #8f1f1f;
  --status-ok: #1f5e2e;
  --status-warning: #9a6400;
  --active-bg: #dce8ff;
  --active-ink: #082f7f;
  --active-line: #4d79d8;
  --active-ring: rgba(11, 62, 168, 0.14);
  --body-font: Georgia, "Times New Roman", serif;
  --ui-font: "Trebuchet MS", "Segoe UI", sans-serif;
  --code-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Auto/System theme: system dark colors must be in the critical block,
   or the light defaults paint first while site.css loads. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --body-background: var(--page-bg);
    --page-bg: #0b1220;
    --ink: #d9e7ff;
    --ink-soft: #9fb8e8;
    --line: #344a73;
    --panel: #111b31;
    --input-bg: #0f1729;
    --button-bg: #16233d;
    --button-alt-bg: #1b2b49;
    --feedback-ok-bg: #13263f;
    --feedback-error-bg: #3a1a23;
    --status-error: #ffb7c3;
    --status-ok: #a7efb8;
    --status-warning: #f2c66d;
    --active-bg: #263858;
    --active-ink: #f3f8ff;
    --active-line: #86a9e8;
    --active-ring: rgba(134, 169, 232, 0.18);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background-color: var(--page-bg);
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  font-family: var(--body-font);
  background: transparent;
  color: var(--ink);
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--body-background);
  background-repeat: no-repeat;
  background-size: cover;
}

a {
  color: var(--ink);
}

label {
  display: block;
  font-family: var(--ui-font);
  font-weight: 600;
}

input,
textarea,
button {
  width: 100%;
  margin-top: 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0.65rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--input-bg);
}

button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: var(--button-bg);
  font-family: var(--ui-font);
}

button[type="button"] {
  background: var(--button-alt-bg);
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: var(--code-font);
}

.shell {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 1rem;
}

.site-header {
  padding: 0.5rem 0 1rem;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: space-between;
}

.site-status-bar {
  display: none;
}

.app-version-banner {
  position: sticky;
  top: 0;
  z-index: 20;
}

.app-version-banner__inner {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 0.75rem 1rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.app-version-banner__text,
.app-version-banner__reload {
  border: 1px solid var(--line);
  background: var(--panel);
  font-family: var(--ui-font);
}

.app-version-banner__text {
  display: inline-block;
  padding: 0.55rem 0.7rem;
}

.app-version-banner__reload {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}

.offline-mode-bar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 15;
  border: 1px solid var(--line);
  border-top: 0;
  border-right: 0;
  background: var(--panel);
  color: var(--muted);
  font-family: var(--ui-font);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  line-height: 1;
  padding: 0 0.6rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.offline-mode-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.3rem;
}

.offline-mode-bar[hidden] {
  display: none;
}

.eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--ui-font);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 auto;
}

.nav-link {
  display: inline-block;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  text-decoration: none;
  background: var(--input-bg);
  font-family: var(--ui-font);
}

.nav-link.is-active {
  background: var(--panel);
}

/* Unread Messages: outline only, so the button's size and caption never change. */
.nav-link[data-unread-count]:not([data-unread-count="0"]) {
  outline: 2px solid var(--active-line);
  outline-offset: 2px;
}

.board-controls-nav .nav-link:disabled {
  width: auto;
  margin-top: 0;
  cursor: not-allowed;
  opacity: 0.55;
}

.tools-nav-divider {
  align-self: center;
  width: 1px;
  height: 1.4rem;
  background: var(--line);
  flex: 0 0 auto;
}

.nav-link-standalone-marker {
  margin-left: 0.2rem;
  opacity: 0.7;
}

.board-controls-nav > *:last-child:not([data-nav-key]) {
  margin-left: auto;
}

.theme-toggle {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-top: 0;
  flex: 0 0 auto;
}

.theme-swatch {
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  box-shadow: inset 0 0 0 0.22rem var(--page-bg);
}

.theme-swatch[data-theme-mode="auto"] {
  background:
    linear-gradient(135deg, #fff59a 0 50%, #17233f 50% 100%);
}

.theme-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.15rem 0 0.15rem 0.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--input-bg);
  flex: 0 0 auto;
}

/* The palette is positioned outside the theme menu to preserve its size/anchor. */
.lcd-palette { display: none; }
.lcd-palette {
  position: absolute;
  z-index: 31;
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
}
.lcd-palette__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--line);
  background: var(--input-bg);
}
.lcd-palette__chip {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background: var(--lcd-chip, #a2b578);
  border: 1px solid var(--ink);
}
[data-palette-chip="green"] { --lcd-chip: #a2b578; }
[data-palette-chip="amber"], :root[data-lcd-palette="amber"] { --lcd-chip: #b6ab8b; }
[data-palette-chip="purple"], :root[data-lcd-palette="purple"] { --lcd-chip: #aaa1b7; }
[data-palette-chip="gray"], :root[data-lcd-palette="gray"] { --lcd-chip: #acb5aa; }
.lcd-palette__trigger:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.theme-menu__trigger {
  width: auto;
  min-width: 0;
  height: 1.5rem;
  margin-top: 0;
  padding: 0 0.4rem 0 0.3rem;
  border: none;
  border-radius: 0 999px 999px 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--ui-font);
  font-size: 0.7rem;
  line-height: 1;
  flex: 0 0 auto;
}

.theme-menu__trigger:hover,
.theme-menu__trigger[aria-expanded="true"] {
  color: var(--ink);
  background: var(--button-alt-bg);
}

.theme-menu__popover {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  min-width: 11rem;
  border: 1px solid var(--line);
  background-color: var(--page-bg);
  background-image: linear-gradient(var(--panel), var(--panel));
  padding: 0.3rem;
  display: grid;
  gap: 4px;
}

.theme-menu__popover[hidden] {
  display: none;
}

.theme-menu__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin-top: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--ui-font);
  font-size: 0.78rem;
  min-height: 2rem;
  text-align: left;
  cursor: pointer;
}

.theme-menu__option:not([data-theme-option="auto"]) {
  background: var(--body-background);
  background-color: var(--page-bg);
  color: var(--ink);
  border: 1px solid var(--line);
}

.theme-menu__option:hover {
  border-color: var(--ink-soft);
}

.theme-menu__option:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.theme-menu__option[aria-checked="true"] {
  border-color: var(--ink);
}

.theme-menu__option[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
}

.theme-menu__swatch {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
}

.main {
  display: block;
}

.stack > * + * {
  margin-top: 1rem;
}

.card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 0.9rem;
  overflow-wrap: anywhere;
}

/* App shell (`navigation` slot `app`): one row with the wordmark, the main
   destinations, New post and the account menu. Scoped so other sites keep
   today's header. The phone tab bar reuses the same nav. */
[data-shell="app"] .site-header--app {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}

[data-shell="app"] .site-header--app .eyebrow {
  margin: 0;
  flex: 0 0 auto;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.site-brand__mark:empty {
  display: none;
}

[data-shell="app"] .site-header--app .site-header-actions {
  flex: 1 1 auto;
  justify-content: flex-start;
}

[data-shell="app"] .site-header--app .nav {
  flex: 0 1 auto;
}

/* Desktop: the bar holds every main destination, which is wider than the
   760px content column. The header spans up to 1180px, centred on the column,
   and the links sit a little tighter; below that the nav wraps. */
@media (min-width: 640px) {
  [data-shell="app"] .site-header--app {
    --app-header-width: min(100vw - 3rem, 1180px);
    width: var(--app-header-width);
    margin-inline: calc((100% - var(--app-header-width)) / 2);
    align-items: flex-start;
  }

  [data-shell="app"] .site-header--app .site-header-actions {
    align-items: flex-start;
  }

  [data-shell="app"] .site-header--app .eyebrow {
    margin-top: 0.55rem;
  }

  [data-shell="app"] .site-header--app .nav {
    gap: 0.35rem;
  }

  [data-shell="app"] .site-header--app .nav > .nav-link {
    padding: 0.4rem 0.6rem;
  }

  /* Word97, Midnight, Chicago and LCD frame the header. Other themes have nothing
     marking its edges, so a rule across the page makes it a bar. A border-image outset, unlike a wide
     pseudo-element, cannot cause sideways scrolling. */
  :root:not([data-theme="word97"], [data-theme="midnight"], [data-theme="chicago"], [data-theme="lcd"]) [data-shell="app"] .site-header--app {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
    border-image: linear-gradient(var(--line), var(--line)) 1 / 0 0 1px / 0 100vw;
  }
}

/* With room in the margins, the links start at the content's left edge and the
   name sits outside it. Percentages here resolve against the content column.
   Sticker's wide links set the width: below it they would wrap. */
@media (min-width: 1240px) {
  :root:not([data-theme="word97"], [data-theme="midnight"], [data-theme="chicago"], [data-theme="lcd"]) [data-shell="app"] .site-header--app {
    position: relative;
    padding-left: calc((var(--app-header-width) - 100%) / 2);
  }

  :root:not([data-theme="word97"], [data-theme="midnight"], [data-theme="chicago"], [data-theme="lcd"]) [data-shell="app"] .site-header--app .eyebrow {
    position: absolute;
    top: 0.5rem;
    left: 0;
  }
}

/* `:root` outranks themes' general link colors so the button keeps its own ink. */
:root [data-shell="app"] .new-post-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--ink);
  font-family: var(--ui-font);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Only the compose page, where it is the current destination, gets the selected colors. */
:root [data-shell="app"] .new-post-button:where(.is-active) {
  border-color: var(--active-line);
  background: var(--active-bg);
  color: var(--active-ink);
}

.new-post-button__icon {
  font-size: 1.1em;
  line-height: 1;
}

.account-menu {
  position: relative;
  flex: 0 0 auto;
}

.account-menu > summary {
  list-style: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  background: var(--input-bg);
  font-family: var(--ui-font);
  cursor: pointer;
}

.account-menu__icon {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  flex: 0 0 auto;
}

.account-menu[open] > .account-menu__trigger {
  background: var(--panel);
}

/* The trigger reads "You" on desktop and "More" on phones; the More list of
   bar destinations exists only for phones. Both are decided in CSS so the
   server HTML is the same at every width. */
.account-menu__label--more,
.account-menu__label--current,
.account-menu__links.account-menu__more {
  display: none;
}

.account-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  display: grid;
  gap: 0.75rem;
  min-width: 14rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  /* Some themes make --panel translucent; the page color underneath keeps the menu opaque. */
  background: linear-gradient(var(--panel), var(--panel)), var(--page-bg, Canvas);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.account-menu__links {
  display: grid;
  gap: 0.35rem;
}

.account-menu__links .nav-link {
  display: block;
}

.account-menu__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Phones: the same nav, New post and account menu become a bottom tab bar,
   in document order. Bottom-pinned page parts move up by the bar height. */
@media (max-width: 639px) {
  [data-shell="app"] {
    --app-tabbar-height: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    /* What bottom-pinned parts clear: the bar while shown, only the safe area while hidden. */
    --app-tabbar-offset: var(--app-tabbar-height);
  }

  [data-shell="app"][data-tabbar="hidden"] {
    --app-tabbar-offset: env(safe-area-inset-bottom, 0px);
  }

  [data-shell="app"] .main {
    padding-bottom: var(--app-tabbar-height);
  }

  [data-shell="app"] .site-header--app {
    padding-bottom: 0.5rem;
  }

  [data-shell="app"] .site-header--app .site-header-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    min-height: var(--app-tabbar-height);
    padding: 0.3rem 0.3rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: linear-gradient(var(--panel), var(--panel)), var(--page-bg, Canvas);
    transition: transform 0.2s ease;
  }

  /* tab_bar_scroll.js hides the bar while scrolling down. The shown state keeps
     `transform: none` so the menu's fixed popovers position against the screen. */
  [data-shell="app"][data-tabbar="hidden"] .site-header--app .site-header-actions {
    transform: translateY(100%);
  }

  [data-shell="app"] .site-header--app .nav {
    display: contents;
  }

  /* The disclosure itself takes no space, so its trigger is a tab like the
     links, with the same padding and border and therefore the same width. */
  [data-shell="app"] .site-header--app .account-menu {
    display: contents;
  }

  [data-shell="app"] .site-header--app .nav > .nav-link,
  [data-shell="app"] .site-header--app .new-post-button,
  [data-shell="app"] .site-header--app .account-menu__trigger {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.25rem;
    font-size: 0.85rem;
    text-align: center;
  }

  [data-shell="app"] .site-header--app .nav > .nav-link,
  [data-shell="app"] .site-header--app .account-menu__trigger {
    border-color: transparent;
    background: transparent;
  }

  /* `:root` outranks themes' general link colors so the highlighted tab keeps readable ink. */
  :root [data-shell="app"] .site-header--app .nav > .nav-link.is-active,
  :root [data-shell="app"] .account-menu[open] > .account-menu__trigger {
    border-color: var(--line);
    background: var(--active-bg);
    color: var(--active-ink);
  }

  [data-shell="app"] .site-header--app .new-post-button__label {
    white-space: normal;
    line-height: 1.1;
  }

  /* More: the panel fills the screen above the tab bar; the More tab stays
     visible and highlighted, and tapping it again closes the panel. Items sit
     at the bottom, by the tab bar. The auto margin drops to zero when they
     overflow, so a short screen can still scroll to the first one. */
  [data-shell="app"] .account-menu__panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--app-tabbar-height);
    display: flex;
    flex-direction: column;
    width: auto;
    max-height: none;
    padding: 1rem 1rem 1.5rem;
    overflow-y: auto;
  }

  [data-shell="app"] .account-menu__panel > :first-child {
    margin-top: auto;
  }

  [data-shell="app"] .site-header--app .nav > .nav-link[data-phone="more"],
  [data-shell="app"] .account-menu__label--you {
    display: none;
  }

  /* Personal slots: <html data-nav-slots="recent users"> (set before paint by
     the head script from the browser's saved choice) shows those More
     destinations as tabs, after the fixed ones and before New post and More. */
  html[data-nav-slots~="recent"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="recent"],
  html[data-nav-slots~="gallery"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="gallery"],
  html[data-nav-slots~="profiles"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="profiles"],
  html[data-nav-slots~="messages"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="messages"],
  html[data-nav-slots~="search"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="search"],
  html[data-nav-slots~="about"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="about"],
  html[data-nav-slots~="tools"] [data-shell="app"] .site-header--app .nav > .nav-link[data-tab="tools"] {
    display: flex;
    order: 1;
  }

  [data-shell="app"] .site-header--app .new-post-button {
    order: 2;
  }

  [data-shell="app"] .site-header--app .account-menu__trigger {
    order: 3;
  }

  [data-shell="app"] .account-menu__links.account-menu__more {
    display: grid;
  }

  /* On a page listed in the panel, the More tab shows that page's name and the
     selected look, unless the page holds a slot and is highlighted there. Only the
     name carries the look, so that one per-section list decides all of it. */
  [data-shell="app"] .account-menu[data-current] {
    --more-tab-word: none;
    --more-tab-name: inline;
    --more-tab-icon: none;
  }

  html[data-nav-slots~="recent"] [data-shell="app"] .account-menu[data-current="recent"],
  html[data-nav-slots~="gallery"] [data-shell="app"] .account-menu[data-current="gallery"],
  html[data-nav-slots~="profiles"] [data-shell="app"] .account-menu[data-current="profiles"],
  html[data-nav-slots~="messages"] [data-shell="app"] .account-menu[data-current="messages"],
  html[data-nav-slots~="search"] [data-shell="app"] .account-menu[data-current="search"],
  html[data-nav-slots~="about"] [data-shell="app"] .account-menu[data-current="about"],
  html[data-nav-slots~="tools"] [data-shell="app"] .account-menu[data-current="tools"] {
    --more-tab-word: initial;
    --more-tab-name: initial;
    --more-tab-icon: initial;
  }

  [data-shell="app"] .account-menu__label--more {
    display: var(--more-tab-word, inline);
  }

  [data-shell="app"] .account-menu__label--current {
    display: var(--more-tab-name, none);
    color: var(--active-ink);
    font-weight: 600;
    white-space: nowrap;
  }

  [data-shell="app"] .account-menu__label--current::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -1px;
    border: 1px solid var(--line);
    background: var(--active-bg);
  }

  [data-shell="app"] .site-header--app .account-menu__trigger {
    position: relative;
    isolation: isolate;
  }

  /* Themes without their own More glyph: three bars, drawn in the tab's ink. On a
     renamed tab an arrow replaces them, leaving room for the name. */
  :root:not([data-theme="word97"], [data-theme="chicago"], [data-theme="midnight"]) [data-shell="app"] .account-menu__icon {
    display: var(--more-tab-icon, inline-block);
    border: 0;
    border-radius: 0;
    background:
      linear-gradient(currentColor, currentColor) 0 15% / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 85% / 100% 2px no-repeat;
  }

  :root:not([data-theme="word97"], [data-theme="chicago"], [data-theme="midnight"]) [data-shell="app"] .account-menu__label--current::after {
    content: "\25B4";
    position: absolute;
    top: -0.05rem;
    left: 0;
    right: 0;
    font-size: 1.1rem;
    line-height: 1;
    text-align: center;
  }

  [data-shell="app"] .account-menu__more .nav-link,
  [data-shell="app"] .account-menu__links .nav-link {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
  }

  /* Unread Messages shows on the More tab the same way it shows on the link. */
  [data-shell="app"] .account-menu__trigger[data-unread-count]:not([data-unread-count="0"]) {
    outline: 2px solid var(--active-line);
    outline-offset: -2px;
  }

  /* The LCD palette's centering transform would make its fixed popover
     position against the palette instead of the screen. */
  [data-shell="app"] .account-menu .lcd-palette {
    top: 0;
    transform: none;
  }

  /* Theme and LCD palette popovers open upward and stay inside the screen. */
  [data-shell="app"] .account-menu .theme-menu__popover {
    position: fixed;
    top: auto;
    right: 0.3rem;
    /* clear the menu's controls row so the theme and palette buttons stay usable */
    bottom: calc(var(--app-tabbar-height) + 3.75rem);
    max-height: calc(100vh - var(--app-tabbar-height) - 4.5rem);
    overflow-y: auto;
  }

  /* Decorative theme status bars (Word 97, Midnight) give way to the tab bar. */
  :root [data-shell="app"] > .site-status-bar {
    display: none;
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  [data-shell="app"] .site-header--app .site-header-actions {
    transition: none;
  }
}

@media (max-width: 639px) and (pointer: coarse) {
  :root [data-shell="app"] [data-reply-panel][data-reply-panel].reply-panel-reading {
    bottom: calc(var(--app-tabbar-offset) + max(var(--reply-panel-bottom, 8px), 0px));
  }
}

/* List board (`boardCard` slot `list`): a toolbar with separate filter and
   sort controls, then pinned and latest threads as hairline-separated rows. */
.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.board-filter {
  display: flex;
  gap: 0.25rem;
}

.board-filter .nav-link[aria-current] {
  border-color: var(--active-line);
  background: var(--active-bg);
  color: var(--active-ink);
}

.board-sort {
  position: relative;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.board-sort > summary {
  list-style: none;
  cursor: pointer;
}

.board-sort > summary::-webkit-details-marker {
  display: none;
}

.board-sort > summary::after {
  content: " \25BE";
}

.board-sort__menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  z-index: 20;
  display: grid;
  gap: 0.25rem;
  min-width: 10rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  background: linear-gradient(var(--panel), var(--panel)), var(--page-bg, Canvas);
}

.board-sort__menu--end {
  left: auto;
  right: 0;
}

.board-sort__menu .nav-link[aria-current] {
  color: var(--active-ink);
  background: var(--active-bg);
}

.board-tags-link {
  margin-left: auto;
}

.section-label {
  margin: 0.4rem 0 -0.4rem;
  font-family: var(--ui-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.thread-rows {
  border: 1px solid var(--line);
  background: var(--panel);
}

.thread-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  overflow-wrap: anywhere;
}

.thread-row + .thread-row {
  border-top: 1px solid var(--line);
}

.thread-row__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

.thread-row__count {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
  text-align: right;
  font-family: var(--ui-font);
  color: var(--ink-soft);
}

.thread-row__count-number {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.thread-row__count-label {
  font-size: 0.75rem;
}

.thread-row__excerpt,
.thread-row__meta,
.thread-row > .event-block {
  grid-column: 1;
  margin: 0.15rem 0 0;
}

.thread-row__excerpt {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}

.thread-row__meta {
  font-size: 0.85rem;
}

/* A row with an attached image: the thumbnail fills a narrow first column as
   tall as the row; the image never adds height of its own. */
.thread-row--thumb {
  grid-template-columns: 3.5rem minmax(0, 1fr) auto;
}

.thread-row--thumb > .thread-row__title,
.thread-row--thumb > .thread-row__excerpt,
.thread-row--thumb > .thread-row__meta,
.thread-row--thumb > .event-block {
  grid-column: 2;
}

.thread-row--thumb > .thread-row__count {
  grid-column: 3;
}

.thread-row__thumb {
  grid-column: 1;
  grid-row: 1 / span 4;
  position: relative;
  display: block;
  min-height: 2.75rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
}

.thread-row__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chip {
  display: inline-block;
  padding: 0 0.4rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ui-font);
  font-size: 0.75rem;
  line-height: 1.5;
  vertical-align: 1px;
}

.chip--pending {
  border-color: var(--status-warning, var(--line));
  color: var(--status-warning, var(--ink-soft));
}

.chip--approved {
  border-color: var(--status-ok, var(--line));
  color: var(--status-ok, var(--ink));
}

/* Users and person pages: built from the board filter, Account's card and grouped rows, and thread rows;
   only page-specific layout lives here. */
.users-page__title {
  margin: 0;
}
/* A search field inside the board toolbar. Users filters the list already on the page, so its field is script-only;
   board search submits a native form and stays visible. */
.board-toolbar__search {
  flex: 1 1 12rem;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.45rem 0.7rem;
}
.board-toolbar > button {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}
@media (scripting: none) {
  .board-toolbar__search[data-users-search] {
    display: none;
  }
}
.thread-rows > .thread-row[hidden],
.account-group > .account-row[hidden],
.person-head > .starfield.banner:empty {
  display: none;
}
.person-head .account-name {
  margin: 0;
}
.person-head__action {
  margin: 0;
}
.person-head__action button {
  width: auto;
  min-height: 44px;
  margin: 0;
}
.person-page .account-key-fingerprint-value {
  flex: 0 0 auto;
  white-space: nowrap;
}
.person-identities__title {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

.board-empty {
  padding: 2rem 1rem;
  text-align: center;
}

.board-empty h2 {
  margin: 0 0 0.4rem;
}

.board-empty p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}

/* Gallery: justified rows. Each tile's basis is its (clamped) aspect ratio
   times the row height, so rows fill the width and images keep their shape. */
.gallery-grid {
  --gallery-row: 12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Keeps a short last row at row height instead of stretching it. */
.gallery-grid::after {
  content: "";
  flex: 1000 1 0;
}

.gallery-tile {
  display: flex;
  flex: var(--ratio) 1 calc(var(--ratio) * var(--gallery-row));
  flex-direction: column;
  min-width: 0;
  /* A row that wraps early may stretch, but not far past the row height. */
  max-width: calc(var(--ratio) * var(--gallery-row) * 1.6);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
}

.gallery-tile:hover,
.gallery-tile:focus-visible {
  border-color: var(--ink-soft);
}

.gallery-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio);
  object-fit: cover;
  background: var(--line);
}

.gallery-tile__caption {
  display: flex;
  flex-direction: column;
  padding: 0.3rem 0.5rem 0.4rem;
  line-height: 1.3;
}

.gallery-tile__title {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-tile__meta {
  color: var(--ink-soft);
  font-size: 0.85em;
}

@media (max-width: 40rem) {
  .gallery-grid {
    --gallery-row: 7rem;
    gap: 0.35rem;
  }
}

/* Member-only links (Messages, Invite) are in every viewer's HTML; the head
   script marks a browser remembered as approved before paint. */
:root:not([data-member="approved"]) [data-member-only] {
  display: none !important;
}

/* critical-css-end */

.post-card {
  position: relative;
  padding-bottom: 2.25rem;
  scroll-margin-top: 1rem;
}

.post-card:target {
  border-color: var(--active-line);
}

.thread-root-card h1 {
  margin-bottom: 1rem;
}

.pending-reply-card {
  border-style: dashed;
}

.pending-thread-shell {
  border-style: dashed;
}

.pending-reply-card .body {
  white-space: pre-wrap;
}

.pending-thread-shell .body {
  white-space: pre-wrap;
}

.pending-reply-status {
  color: var(--ink-soft);
}

.pending-thread-status {
  color: var(--ink-soft);
}

.post-card-permalink {
  position: absolute;
  right: 0.9rem;
  bottom: 0.65rem;
  font-family: var(--ui-font);
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.post-card:hover .post-card-permalink,
.post-card:focus-within .post-card-permalink {
  opacity: 1;
}

.board-subsection {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent 28%);
}

.board-subsection-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 0;
}

/* Default only: :where() keeps theme .nav-link rules winning even though theme sheets load first. */
:where(:root:not([data-theme="chicago"])) .nav-link.is-active {
  color: var(--active-ink);
  background: var(--active-bg);
  border-color: var(--active-line);
  box-shadow:
    0 0 0 1px var(--active-ring),
    inset 0 -2px 0 color-mix(in srgb, var(--active-line) 68%, transparent 32%);
  font-weight: 600;
}

.feedback {
  padding: 0.75rem;
  border: 1px solid var(--line);
}

.feedback-ok {
  background: var(--feedback-ok-bg);
}

.feedback-error {
  background: var(--feedback-error-bg);
}

.meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.pinned-thread-marker {
  display: inline-block;
  margin-left: 0.4rem;
  border: 1px solid var(--line);
  padding: 0.12rem 0.35rem;
  vertical-align: middle;
  color: var(--ink-soft);
  background: var(--input-bg);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 650;
  text-transform: uppercase;
}

.body {
  white-space: normal;
}

/* Posts their authors marked as Markdown. Colors come from the theme via currentColor. */
.post-markdown > :first-child { margin-top: 0; }
.post-markdown > :last-child { margin-bottom: 0; }
.post-markdown p { margin: 0 0 0.75em; }
.post-markdown h3, .post-markdown h4, .post-markdown h5, .post-markdown h6 {
  margin: 1em 0 0.4em;
  line-height: 1.25;
}
.post-markdown h3 { font-size: 1.15em; }
.post-markdown h4 { font-size: 1.05em; }
.post-markdown h5, .post-markdown h6 { font-size: 1em; }
.post-markdown ul, .post-markdown ol { margin: 0 0 0.75em; padding-left: 1.5em; }
.post-markdown li > p { margin: 0 0 0.25em; }
.post-markdown blockquote {
  margin: 0 0 0.75em;
  padding-left: 0.75em;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}
.post-markdown blockquote p { margin: 0; }
.post-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.post-markdown pre {
  margin: 0 0 0.75em;
  padding: 0.5em 0.75em;
  overflow-x: auto;
  background: rgba(127, 127, 127, 0.12);
  white-space: pre;
}
.post-markdown figure { margin: 0 0 0.75em; }
.post-markdown figcaption { font-size: 0.85em; opacity: 0.8; }
.post-markdown hr { border: 0; border-top: 1px solid currentColor; opacity: 0.4; margin: 1em 0; }
.post-markdown .docs-table-scroll, .post-markdown .docs-list-scroll { overflow-x: auto; margin: 0 0 0.75em; }
.post-markdown table { border-collapse: collapse; }
.post-markdown th, .post-markdown td { border: 1px solid rgba(127, 127, 127, 0.5); padding: 0.25em 0.5em; text-align: left; }
.post-markdown .docs-align-center { text-align: center; }
.post-markdown .docs-align-right { text-align: right; }
.post-markdown .docs-task-item { list-style: none; margin-left: -1.25em; }
.post-markdown .docs-task-label { display: inline; font: inherit; color: inherit; }
.post-markdown .docs-task-label input {
  display: inline-block;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0 0.4em 0 0;
  vertical-align: middle;
}
.post-markdown .docs-list-source, .post-markdown .docs-table-source { white-space: pre-wrap; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button-row > * {
  flex: 1 1 12rem;
}

.button-row.button-row-natural > * {
  flex: 0 0 auto;
  width: auto;
}

.button-row.button-row-split {
  justify-content: space-between;
}

.button-row.button-row-split > *:last-child {
  margin-left: auto;
}

.quote-card-header-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 100%;
  vertical-align: middle;
}

.quote-card-header-actions .thread-reaction-button {
  width: auto;
  margin-top: 0;
}

.quote-card-header-actions .thread-reaction-button.quote-card-vote-button[data-action] {
  padding: 0 0.25rem;
  line-height: inherit;
}

.quote-card-header-actions .quote-card-reaction-feedback {
  align-self: center;
  margin: 0;
  line-height: inherit;
}

.quote-card-reaction-feedback[data-kind="ok"] {
  color: var(--status-ok);
}

.quote-card-reaction-feedback[data-kind="error"] {
  color: var(--status-error);
}

.possibly-related {
  padding: 0.75rem;
}

.possibly-related-title {
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.possibly-related ul {
  margin: 0;
  padding-left: 1.2rem;
}

.possibly-related li + li {
  margin-top: 0.35rem;
}

.key-material-gap {
  margin-top: 1rem;
}

[data-role="public-key-viewer"],
[data-role="private-key-viewer"] {
  margin-top: 0.45rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--line);
  background: var(--input-bg);
  overflow: auto;
  max-height: 140px;
  font-size: 0.75rem;
  line-height: 1.45;
}

[data-role="browser-key-status"][data-kind="error"],
[data-role="compose-identity-status"][data-kind="error"] {
  color: var(--status-error);
}

/* Retry beside a failed account creation, inline with its message. */
.compose-identity-retry,
.reaction-retry {
  display: inline-block;
  width: auto;
  min-height: 2.75rem;
  margin: 0 0 0 0.35rem;
  padding: 0 0.9rem;
}

[data-role="browser-key-status"][data-kind="ok"] {
  color: var(--status-ok);
}

.agent-authored-post {
  border-color: color-mix(in srgb, var(--status-ok) 45%, var(--line) 55%);
}

.agent-label {
  display: inline;
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 650;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .shell {
    padding: 1.5rem;
  }

  .card {
    padding: 1rem 1.1rem;
  }

}

[data-action="copy-invitation-link"] {
  flex: 0 0 auto;
  width: auto;
  align-self: flex-start;
}

.media-embed-card__iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

.media-embed-card--inline-player {
  display: block;
  max-width: 100%;
}

.media-embed-card--inline-player > summary {
  cursor: pointer;
}

.media-embed-card--inline-player[open] > .media-embed-card__iframe {
  margin-top: 0.5rem;
}

.media-embed-card__source {
  display: block;
  overflow-wrap: anywhere;
}

.media-embed-card--portrait > .media-embed-card__iframe {
  max-width: 360px;
  aspect-ratio: 9 / 16;
}

.media-embed-card--spotify > .media-embed-card__iframe {
  height: 352px;
  aspect-ratio: auto;
}

.media-embed-card--preview {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.media-embed-card__thumbnail {
  display: block;
  max-width: 100%;
  height: auto;
}

.media-embed-card--soundcloud > .media-embed-card__iframe { height: 166px; aspect-ratio: auto; }

.media-embed-card--soundcloud.media-embed-card--collection > .media-embed-card__iframe { height: 450px; }

.media-embed-card--bandcamp > .media-embed-card__iframe { height: 472px; aspect-ratio: auto; }
.media-embed-card__iframe[hidden] { display: none; }

.media-embed-card--bandcamp.media-embed-card--track > .media-embed-card__iframe { height: 120px; }
.account-key-history {
  overflow-wrap: anywhere;
}
.scripture-expansion { margin-block: 0.8rem; padding-block: 0.5rem; border-block-start: 1px solid var(--line); }
.scripture-expansion summary { cursor: pointer; font-family: var(--ui-font); }
.scripture-expansion summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.scripture-expansion .body { margin-block-start: 0.6rem; overflow-wrap: anywhere; }
.agent-reply-feedback { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }