/* Weft default theme: "Sunset Soft" with a "Midnight" dark scheme.
   Fonts are bundled under /assets/fonts (SIL Open Font License 1.1). */

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-wght-italic.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/m-plus-rounded-1c-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/m-plus-rounded-1c-latin-800-normal.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "M PLUS Rounded 1c", "Nunito Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
  --radius: 1rem;
  --radius-sm: .65rem;
  --pill: 999px;
  --panel-pad: clamp(1rem, 3vw, 1.5rem);
  --width: 72rem;

  /* Sunset Soft, with the Midnight values as the dark half of each pair. */
  --bg: light-dark(#fff8f2, #150b26);
  --surface: light-dark(#ffffff, #1d1133);
  --surface-subtle: light-dark(#fffbf7, #22153c);
  --surface-sunken: light-dark(#fff3ea, #2a1b48);
  --line: light-dark(#f0dccd, #3a2766);
  --line-strong: light-dark(#e2c2ac, #4e3884);
  --ink: light-dark(#2a1240, #efe8fb);
  --muted: light-dark(#6b4a5e, #bbaeda);
  --link: light-dark(#7a2fb8, #ffb977);
  --link-hover: light-dark(#5b2a9e, #ffd2a6);
  --header-bg: linear-gradient(180deg, light-dark(rgb(255 255 255 / .22), rgb(255 255 255 / .06)), rgb(255 255 255 / 0)), linear-gradient(90deg, light-dark(#ffbe76, #3a1d6e), light-dark(#ffa071, #2a1452));
  --header-ink: light-dark(#2a1240, #ffffff);
  --header-hover: light-dark(rgb(255 255 255 / .3), rgb(255 255 255 / .1));
  --brand-bg: radial-gradient(circle at 35% 28%, light-dark(#f3e9ff, #ffffff) 0%, light-dark(#a97ceb, #ffd9a8) 24%, light-dark(#6e33c4, #ff8a1f) 66%, light-dark(#4b2390, #c25e00) 100%);
  --brand-ink: light-dark(#ffffff, #2a1240);
  --nav-bg: linear-gradient(180deg, light-dark(#ffffff, #22153c), light-dark(#fffaf5, #1b1031));
  --nav-ink: light-dark(#5a2a10, #e2d8f7);
  --accent: light-dark(#7a2fb8, #ff9a4d);
  --bar-bg: linear-gradient(180deg, light-dark(#f6efff, #2e1e54), light-dark(#ece1fc, #281a4a));
  --bar-ink: light-dark(#3b1e6e, #efe8fb);
  --bar-line: light-dark(#e2d3f7, #3a2766);
  --strip-bg: linear-gradient(180deg, light-dark(#fffcf9, #261845), light-dark(#fff5ec, #1f1238));
  --primary-bg: linear-gradient(180deg, light-dark(#8a55dd, #ffb067), light-dark(#6e33c4, #ff8a3d));
  --primary-hover: linear-gradient(180deg, light-dark(#7c46d4, #ffbd80), light-dark(#6129b8, #ff9750));
  --primary-edge: light-dark(#5b2a9e, #c8641e);
  --primary-ink: light-dark(#ffffff, #2a1240);
  --secondary-bg: linear-gradient(180deg, light-dark(#ffffff, #33245c), light-dark(#fff3ea, #2a1d4d));
  --secondary-hover: linear-gradient(180deg, light-dark(#fff8f2, #3d2c6b), light-dark(#ffe8d8, #33245c));
  --secondary-edge: light-dark(#ebc3a8, #4e3884);
  --secondary-ink: light-dark(#5a2a10, #efe8fb);
  --chip-bg: light-dark(#fff0e5, #2e1f53);
  --chip-edge: light-dark(#f2d2bc, #4e3884);
  --chip-ink: light-dark(#7a3a00, #e2d8f7);
  --badge-bg: light-dark(#f1e6ff, #3a2766);
  --badge-edge: light-dark(#c9a7f0, #5b4394);
  --badge-ink: light-dark(#4b2390, #f1e6ff);
  --avatar-bg: linear-gradient(180deg, #ffc48a, #ff9a4d);
  --avatar-edge: light-dark(#e58a45, #c8641e);
  --avatar-ink: #2a1240;
  --warm-bg: linear-gradient(180deg, #ffb067, #ff8a3d);
  --field-bg: light-dark(#ffffff, #120a22);
  --field-edge: light-dark(#e2c2ac, #4e3884);
  --field-hover: light-dark(#c9a184, #6a51a8);
  --code-bg: light-dark(#fff3ea, #2e1f53);
  --pre-bg: light-dark(#2a1240, #0e0719);
  --pre-ink: light-dark(#fff1e6, #f3e9ff);
  --quote-bg: light-dark(#fffbf7, #22153c);
  --target-bg: light-dark(#fbf5ff, #2a1b48);
  --notice-bg: light-dark(#fff4d6, #3a2a10);
  --notice-edge: light-dark(#f0d28a, #7a5a20);
  --notice-ink: light-dark(#5a3e00, #ffe3b0);
  --disabled-bg: light-dark(#efe6e0, #2a1d4d);
  --disabled-ink: light-dark(#6b5a62, #a597c4);
  --focus: light-dark(#7a2fb8, #ffb977);
  --gloss: inset 0 1px 0 light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .12));
  --shadow: 0 2px 11px light-dark(rgb(42 18 64 / .07), rgb(0 0 0 / .3));
  --shadow-menu: 0 .6rem 1.6rem light-dark(rgb(42 18 64 / .16), rgb(0 0 0 / .45));
  /* The page backdrop: pinstripes over a horizon that fades into the page colour. */
  --backdrop: repeating-linear-gradient(135deg, light-dark(rgb(255 255 255 / .5), rgb(255 255 255 / .04)) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, light-dark(#ffc28c, #3a1d6e) 0, light-dark(#ffd9ba, #28144f) 200px, light-dark(#ffefe2, #190d30) 480px, light-dark(#fff8f2, #120922) 720px);
  /* The gloss bar: a hard highlight split at half height. */
  --gloss-bar: linear-gradient(180deg, light-dark(#ffddb5, #5e3ea0) 0%, light-dark(#ffc991, #4a2a88) 49%, light-dark(#ffb676, #3b1f72) 50%, light-dark(#ffc287, #44287e) 100%);
  --gloss-hover: linear-gradient(180deg, light-dark(#ffe7cb, #6a49ad) 0%, light-dark(#ffd4a6, #55339a) 49%, light-dark(#ffc38b, #46297f) 50%, light-dark(#ffcd99, #4f2f8b) 100%);
  --gloss-on: linear-gradient(180deg, light-dark(#fffbf6, #ffc48a) 0%, light-dark(#fff0e0, #ffae66) 49%, light-dark(#ffe4c9, #ff9a4d) 50%, light-dark(#ffeedc, #ffa85e) 100%);
  --gloss-edge: light-dark(#e8a26c, #2a1452);
  --gloss-ink: light-dark(#2a1240, #ffffff);
  --gloss-on-ink: #2a1240;
  --gloss-text-shadow: 0 1px 0 light-dark(rgb(255 255 255 / .45), rgb(0 0 0 / .35));
  --seg-dark: light-dark(rgb(176 84 20 / .24), rgb(0 0 0 / .35));
  --seg-light: light-dark(rgb(255 255 255 / .55), rgb(255 255 255 / .12));
  --tool-hover: light-dark(rgb(255 255 255 / .55), rgb(255 255 255 / .08));
  /* Lift for everything that sits on the backdrop. Sunset Soft casts warm
     shadows; Midnight glows instead, since shadows vanish on a dark page. */
  --lift: 0 2.6px 6px rgb(110 45 0 / .12);
  --lift-accent: var(--lift);
  --lift-drop: drop-shadow(0 2.2px 2.6px rgb(110 45 0 / .12));
  --accent-glow: 0 0 0 transparent;
  --text-glow: none;
  --bar-cast: 0 2.8px 4.4px -1px rgb(110 45 0 / .08);
}

/* An explicit choice from the header toggle overrides the system scheme. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Midnight's glow. Shadow lists cannot be light-dark() pairs, so these are
   set per scheme: once for the system preference and once for the toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lift: 0 0 14px 1px hsl(250 74% 70% / .21), 0 2px 6px rgb(0 0 0 / .35);
    --lift-accent: 0 0 14.5px 1px hsl(250 100% 65% / .25), 0 2px 6px rgb(0 0 0 / .35);
    --lift-drop: drop-shadow(0 0 7.5px hsl(250 100% 65% / .25));
    --accent-glow: 0 0 8px hsl(250 100% 65% / .25);
    --text-glow: 0 0 11.5px hsl(253 100% 73% / .2);
    --bar-cast: 0 0 0 transparent;
  }
}
:root[data-theme="dark"] {
  --lift: 0 0 14px 1px hsl(250 74% 70% / .21), 0 2px 6px rgb(0 0 0 / .35);
  --lift-accent: 0 0 14.5px 1px hsl(250 100% 65% / .25), 0 2px 6px rgb(0 0 0 / .35);
  --lift-drop: drop-shadow(0 0 7.5px hsl(250 100% 65% / .25));
  --accent-glow: 0 0 8px hsl(250 100% 65% / .25);
  --text-glow: 0 0 11.5px hsl(253 100% 73% / .2);
  --bar-cast: 0 0 0 transparent;
}

* { box-sizing: border-box; }

html {
  font: 16px/1.55 var(--font-body);
  color: var(--ink);
  background: var(--backdrop);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .17em; }
a:hover { color: var(--link-hover); }
button, input, textarea, select { font: inherit; color: inherit; }
button, .button-link { min-height: 2.75rem; }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Layout rules set display on many elements; hidden must still win. */
[hidden] { display: none !important; }

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

.skip-link {
  position: absolute;
  z-index: 30;
  top: .5rem;
  left: .5rem;
  padding: .6rem .85rem;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* Header: the logo and search sit on the backdrop, with the gloss bar below. */

.site-header, .site-main, .site-footer { width: min(100% - 2rem, var(--width)); margin-inline: auto; }
.site-header { position: relative; z-index: 10; }
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.9rem 0 1.1rem;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--ink);
  text-decoration: none;
  filter: var(--lift-drop);
}
.site-brand:hover { color: var(--ink); }
.brand-mark {
  width: 3.75rem;
  height: 3.75rem;
  display: grid;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-bg);
  box-shadow: inset 0 -4px 8px rgb(42 14 92 / .3), 0 3px 10px rgb(42 14 92 / .25);
  color: var(--brand-ink);
  font: 800 1.85rem/1 var(--font-display);
}
.brand-name { font: 800 2.6rem/1 var(--font-display); letter-spacing: -.03em; }

.masthead-search {
  position: relative;
  flex: 0 1 27.5rem;
  margin-left: auto;
}
.site-header .masthead-search input {
  width: 100%;
  min-height: 2.65rem;
  padding: .45rem 2.9rem .45rem 1.1rem;
  border: 1px solid var(--field-edge);
  border-radius: var(--pill);
  background: var(--field-bg);
  box-shadow: inset 0 2px 3px rgb(42 18 64 / .12), var(--lift);
  color: var(--ink);
}
.masthead-search input::placeholder { color: var(--muted); opacity: 1; }
.masthead-search .search-submit {
  position: absolute;
  top: 50%;
  right: .2rem;
  width: 2.3rem;
  min-height: 2.3rem;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--link);
}
.masthead-search .search-submit:hover { background: var(--surface-sunken); color: var(--link-hover); }

/* The gloss bar: full-height segments with etched dividers. It stacks above
   the navbits drawer so its shadow falls onto it. */
.site-nav {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 3rem;
  border: 1px solid var(--gloss-edge);
  border-radius: .75rem;
  background: var(--gloss-bar);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 2px 10px rgb(42 14 92 / .12), var(--bar-cast), var(--lift);
  color: var(--gloss-ink);
  text-shadow: var(--gloss-text-shadow);
}
.gloss-segment {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset -1px 0 0 var(--seg-dark), inset 1px 0 0 var(--seg-light);
  color: var(--gloss-ink);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  text-shadow: inherit;
  cursor: pointer;
}
.gloss-segment:hover, details[open] > .gloss-segment { background: var(--gloss-hover); color: var(--gloss-ink); }
.gloss-segment:is([aria-current="page"], .is-current) {
  background: var(--gloss-on);
  box-shadow: inset 0 2px 3px rgb(120 50 0 / .16), inset -1px 0 0 var(--seg-dark);
  color: var(--gloss-on-ink);
  font-weight: 800;
  text-shadow: none;
}
.gloss-segment img { flex: none; }
.gloss-first { border-radius: calc(.75rem - 1px) 0 0 calc(.75rem - 1px); }
.gloss-last { border-radius: 0 calc(.75rem - 1px) calc(.75rem - 1px) 0; }
.gloss-spacer { flex: 1; }
/* Right-hand segments carry their divider on the left; "More" drops its right one. */
.gloss-icon, .account-menu > .gloss-segment, .nav-sign-in {
  box-shadow: inset 1px 0 0 var(--seg-dark), inset 2px 0 0 var(--seg-light);
}
.gloss-icon { position: relative; min-width: 3rem; justify-content: center; padding: 0; }
/* The unread count on the bell. */
.nav-badge {
  position: absolute;
  top: .3rem;
  right: .25rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  border: 1px solid var(--primary-edge);
  border-radius: var(--pill);
  background: var(--primary-bg);
  box-shadow: var(--gloss), var(--accent-glow);
  color: var(--primary-ink);
  font: 800 .68rem/1.05rem var(--font-display);
  text-align: center;
  text-shadow: none;
}
.nav-more > .gloss-segment { box-shadow: inset 1px 0 0 var(--seg-light); }
.gloss-segment:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / .18); }

.scheme-toggle { display: contents; }
.scheme-to-light { display: none; }
:root[data-theme="dark"] .scheme-to-light { display: inline-flex; }
:root[data-theme="dark"] .scheme-to-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scheme-to-light { display: inline-flex; }
  :root:not([data-theme="light"]) .scheme-to-dark { display: none; }
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.account-menu, .nav-more { position: relative; display: flex; }
.account-menu > summary { padding: 0 1rem 0 .6rem; font-weight: 800; }
.account-avatar {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  flex: none;
  place-items: center;
  border: 1px solid var(--avatar-edge);
  border-radius: .5rem;
  background: var(--avatar-bg);
  color: var(--avatar-ink);
  font: 800 .9rem/1 var(--font-display);
  text-shadow: none;
}
.account-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { flex: none; transition: transform .15s ease; }
details[open] > summary .chevron { transform: rotate(180deg); }

.menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + .4rem);
  right: 0;
  min-width: 15rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
  text-shadow: none;
}
.menu-panel ul { margin: 0; padding: 0; list-style: none; }
.menu-panel a, .menu-button {
  width: 100%;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  padding: .45rem .75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  justify-content: flex-start;
}
.menu-panel a:hover, .menu-button:hover { background: var(--surface-sunken); color: var(--ink); }
:is(.menu-panel, .drawer-panel) a[aria-current="page"] { background: var(--surface-sunken); font-weight: 800; }
.menu-heading { margin: .3rem .75rem .5rem; color: var(--muted); font-size: .88rem; }
.nav-logout { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--line); }
.nav-more .menu-panel { right: auto; left: 0; }

/* Phones swap the labelled links for a menu segment. */
.nav-drawer { display: none; }
.drawer-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  display: grid;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-menu);
  text-shadow: none;
}
.drawer-panel a {
  min-height: 2.9rem;
  display: flex;
  align-items: center;
  padding: 0 .75rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}
.drawer-panel a:hover { background: var(--surface-sunken); }

/* Page */

.site-main { flex: 1; padding: 1.5rem 0 2.5rem; }
.site-main:focus { outline: none; }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-bottom: 1.75rem;
  padding: .85rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nav-bg);
  box-shadow: var(--lift);
  color: var(--muted);
  font-size: .88rem;
}
.site-footer p { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.site-footer a { font-weight: 700; }
.pride-flag {
  display: inline-block;
  width: 1.25rem;
  height: .75rem;
  margin-left: .2rem;
  border: 1px solid rgb(42 18 64 / .15);
  border-radius: .2rem;
  background: linear-gradient(180deg, #5bcefa 0 20%, #f5a9b8 20% 40%, #ffffff 40% 60%, #f5a9b8 60% 80%, #5bcefa 80% 100%);
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; font-family: var(--font-display); font-weight: 800; }
h1 { margin-bottom: .5rem; font-size: clamp(1.75rem, 4vw, 2.3rem); letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.08rem; }
.page-heading { margin: 0 0 1.5rem; }
.page-heading > p:not(.eyebrow):not(.page-summary) { color: var(--muted); }
.admin-navigation { margin: -.75rem 0 1.5rem; }
.admin-navigation ul, .page-heading + nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.admin-navigation li { min-width: 0; max-width: 100%; }
.admin-navigation a, .page-heading + nav a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 2.4rem;
  padding: .3rem .85rem;
  border: 1px solid var(--chip-edge);
  border-radius: var(--pill);
  background: var(--chip-bg);
  color: var(--chip-ink);
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.admin-navigation a:hover, .page-heading + nav a:hover { border-color: var(--secondary-edge); color: var(--ink); }
.page-heading-row, .thread-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.page-heading-row h1, .thread-heading h1 { margin-bottom: 0; }
.page-summary { margin: .5rem 0 0; color: var(--muted); }
.eyebrow {
  margin: 0 0 .35rem;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .92rem;
}
.breadcrumbs a { color: var(--link); font-weight: 700; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }
/* vBulletin-style navbits: a page's leading breadcrumb hangs under the gloss
   bar like a drawer. The bar's shadow falls across its top edge. */
.site-main > .breadcrumbs:first-child {
  margin: -1.5rem .9rem 1.1rem;
  padding: .55rem 1rem;
  border: 1px solid var(--gloss-edge);
  border-top: 0;
  border-radius: 0 0 .75rem .75rem;
  background: var(--surface);
  box-shadow: inset 0 4px 4px -3px rgb(120 50 0 / .2), 0 2px 6px rgb(42 14 92 / .08), var(--lift);
  font-size: .85rem;
}
.navbits-icon { flex: none; }
.navbits-label { color: var(--muted); }

/* Panels: a leading h2 becomes the panel's title bar. */

.content-panel, .post-card, .revision-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--lift);
}
.content-panel { margin: 1.2rem 0; padding: var(--panel-pad); overflow: hidden; }
.content-panel > h2:first-child {
  margin: calc(-1 * var(--panel-pad)) calc(-1 * var(--panel-pad)) var(--panel-pad);
  padding: .7rem var(--panel-pad);
  border-bottom: 1px solid var(--bar-line);
  background: var(--bar-bg);
  box-shadow: var(--gloss);
  color: var(--bar-ink);
  font-size: 1.05rem;
}
.section-heading { margin: 0 0 .3rem; }
.section-heading-block { margin-bottom: 1rem; }
.section-heading-block h2 { margin: 0; }
.forum-list { margin: 0; padding: 0; list-style: none; }
.forum-row {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem .25rem;
  border-top: 1px solid var(--line);
}
.content-panel > h2:first-child + .forum-list > .forum-row:first-child,
.content-panel > h2:first-child + ul > .forum-row:first-child { border-top: 0; padding-top: 0; }
.forum-row:first-child { margin-top: .4rem; }
.forum-row-main { min-width: 0; }
.forum-row h3 { margin: 0; font-family: var(--font-body); font-size: 1.08rem; }
.forum-row h3 a { color: var(--link); text-decoration: none; }
.forum-row h3 a:hover { text-decoration: underline; }
.forum-row p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.row-link { flex: none; color: var(--link); font-size: .92rem; font-weight: 750; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
.empty-state { margin: 0; padding: 1rem .2rem; color: var(--muted); }

/* Forum index and thread lists: vBulletin-style tables in a lifted panel
   whose header row is the gloss bar. */
.welcome-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 1.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--strip-bg);
  box-shadow: var(--gloss), var(--shadow), var(--lift);
}
.welcome-text { flex: 1 1 26rem; min-width: 0; }
.welcome-panel h1 { margin: 0 0 .3rem; font-size: clamp(1.6rem, 4vw, 2.1rem); text-shadow: var(--text-glow); }
.welcome-panel p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.welcome-cta { min-height: 3rem; padding: 0 1.6rem; font-family: var(--font-display); font-size: 1.05rem; box-shadow: var(--gloss), 0 2px 5px rgb(42 14 92 / .22), var(--lift-accent); }
.list-panel {
  margin: 0 0 1.2rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--lift);
}
.forum-table { width: 100%; border-collapse: collapse; }
.forum-table thead th {
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--bar-line);
  background: var(--bar-bg);
  box-shadow: var(--gloss);
  color: var(--bar-ink);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 800;
  text-align: left;
  text-shadow: var(--text-glow);
}
.forum-table thead th:first-child { font-size: .95rem; }
.forum-table tbody :is(th, td) { padding: .95rem 1.1rem; border-top: 1px solid var(--line); font-weight: 400; text-align: left; vertical-align: middle; }
.forum-table tbody tr:first-child > * { border-top: 0; }
.forum-table tbody tr:hover > * { background: var(--surface-subtle); }
.forum-table .stat-col { width: 5.5rem; font-weight: 800; text-align: right; }
.forum-table thead .stat-col { font-weight: 800; }
.forum-table .last-col { width: 15rem; max-width: 15rem; font-size: .9rem; }
.forum-title { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.forum-title > div { min-width: 0; }
.forum-title a, .thread-name a { color: var(--link); font-size: 1.05rem; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.forum-title a:hover, .thread-name a:hover, .last-title:hover { text-decoration: underline; }
.forum-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--primary-edge);
  border-radius: .85rem;
  background: var(--primary-bg);
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .55), 0 1px 3px rgb(42 14 92 / .2);
}
.forum-tile img { width: 1.35rem; height: 1.35rem; filter: drop-shadow(0 1px 0 rgb(255 255 255 / .5)); }
.last-title { display: block; overflow: hidden; color: var(--link); font-weight: 750; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.last-meta { color: var(--muted); }
.thread-cell { min-width: 0; }
.thread-name { margin: 0; }
.thread-name .status-pill { vertical-align: .1em; }
.thread-starter { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.thread-cell .moderation-actions { margin-top: .45rem; }
.thread-cell .moderation-actions button { min-height: 2.25rem; padding: 0 .8rem; font-size: .85rem; }
.thread-table tr.is-pinned > * { background: var(--surface-subtle); }
.stat-inline { display: none; }
p.stat-inline { margin: .15rem 0 0; color: var(--muted); font-size: .88rem; }
.forum-table td.empty-state { padding: 1.1rem; }

/* The forum index beside its sidebar; the sidebar drops below on narrow screens. */
.index-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 1.5rem; }
.index-main { flex: 999 1 35rem; min-width: 0; }
.index-sidebar { flex: 1 1 18.75rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.2rem; }
.sidebar-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), var(--lift);
}
/* The same gloss bar header as the forum table. */
.sidebar-panel > h2 {
  margin: 0;
  padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--bar-line);
  background: var(--bar-bg);
  box-shadow: var(--gloss);
  color: var(--bar-ink);
  font-size: .95rem;
  text-shadow: var(--text-glow);
}
.sidebar-list { margin: 0; padding: .3rem 1.1rem .5rem; list-style: none; }
.sidebar-list > li { padding: .6rem 0; border-top: 1px dashed var(--line); }
.sidebar-list > li:first-child { border-top: 0; }
.sidebar-list a { font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.sidebar-list a:hover { text-decoration: underline; }
.sidebar-meta { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }
.sidebar-event { display: flex; align-items: center; gap: .85rem; }
.sidebar-event > div { min-width: 0; }
.date-tile {
  width: 3.4rem;
  display: grid;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(42 14 92 / .15);
  text-align: center;
}
.date-tile-month { padding: .1rem 0; background: var(--primary-bg); color: var(--primary-ink); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.date-tile-day { padding: .05rem 0 .1rem; color: var(--ink); font: 800 1.35rem/1.25 var(--font-display); }

/* Controls */

.button-link, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .5rem 1.15rem;
  border: 1px solid var(--primary-edge);
  border-radius: var(--pill);
  background: var(--primary-bg);
  box-shadow: var(--gloss), 0 1px 3px rgb(42 18 64 / .14);
  color: var(--primary-ink);
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.button-link:hover, button:hover { background: var(--primary-hover); color: var(--primary-ink); }
.button-link:active, button:active { box-shadow: inset 0 2px 4px rgb(0 0 0 / .18); }
.button-secondary, .button-link.button-secondary {
  border-color: var(--secondary-edge);
  background: var(--secondary-bg);
  color: var(--secondary-ink);
}
.button-secondary:hover, .button-link.button-secondary:hover { background: var(--secondary-hover); color: var(--secondary-ink); }
button:disabled, button:disabled:hover {
  border-color: var(--line-strong);
  background: var(--disabled-bg);
  box-shadow: none;
  color: var(--disabled-ink);
  cursor: not-allowed;
}
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .4rem; }
.account-control-list { display: flex; flex-wrap: wrap; gap: 1rem; }
.account-control-list form { flex: 1 1 12rem; min-width: 0; }

label { font-weight: 700; }
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="range"], [type="color"]),
select,
textarea {
  min-height: 2.75rem;
  padding: .55rem .8rem;
  border: 1px solid var(--field-edge);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  box-shadow: inset 0 1px 2px rgb(42 18 64 / .06);
  color: var(--ink);
  max-width: 100%;
}
input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"]):hover, select:hover, textarea:hover { border-color: var(--field-hover); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
textarea { line-height: 1.5; }

.forum-form { display: grid; gap: .55rem; margin: 1rem 0 0; }
.forum-form label { margin-top: .35rem; color: var(--ink); }
.forum-form input, .forum-form textarea, .forum-form select { width: 100%; }
.forum-form textarea { min-height: 10rem; resize: vertical; }
.forum-form input:is([type="checkbox"], [type="radio"]) { width: 1.1rem; height: 1.1rem; padding: 0; margin: .2rem .4rem .2rem 0; vertical-align: middle; flex: none; }
.forum-form button { justify-self: start; }
.forum-form input[type="file"] { padding: .5rem; border: 1px dashed var(--field-edge); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.composer-files ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.composer-files li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .35rem .45rem .35rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.composer-file-name { flex: 1 1 10rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.composer-files button { min-height: 2.25rem; padding: 0 .8rem; font-size: .85rem; }
.composer-files .form-hint:empty { display: none; }
.poll-panel fieldset { display: grid; gap: .6rem; min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.poll-panel fieldset label { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.poll-panel legend { padding: 0 .35rem; font-weight: 800; }
.form-hint { margin: .15rem 0 .45rem; color: var(--muted); font-size: .9rem; font-weight: 400; }
.composer { margin-top: 1.5rem; }
.narrow-panel { max-width: 52rem; margin-right: auto; margin-left: auto; }

/* Threads and posts */

.thread-heading { align-items: center; margin: 1.25rem 0 1.2rem; }

/* Above a thread: the reply button and the pager, both on the backdrop. */
.thread-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin: 0 0 1rem; }
.post-reply { box-shadow: var(--gloss), 0 2px 5px rgb(42 14 92 / .22), var(--lift-accent); font-family: var(--font-display); }
.pager {
  display: inline-flex;
  gap: .25rem;
  margin-left: auto;
  padding: .25rem;
  border: 1px solid var(--line);
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: var(--lift);
}
.pager a { min-height: 2.25rem; display: inline-flex; align-items: center; gap: .35rem; padding: 0 .75rem; border-radius: .5rem; font-weight: 750; text-decoration: none; }
.pager a:hover { background: var(--surface-sunken); }

/* The thread panel: its title bar holds the heading and the thread's tools,
   and the posts follow as rows. Menus open out of the bar, so nothing clips. */
.thread-panel { margin: 0 0 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow), var(--lift); }
.thread-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.25rem;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--bar-line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--bar-bg);
  box-shadow: var(--gloss);
  color: var(--bar-ink);
}
.thread-bar-title { min-width: 0; }
.thread-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.thread-title-row .status-pill { margin: 0; box-shadow: var(--accent-glow); }
.thread-bar h1 { margin: 0; color: var(--bar-ink); font-size: 1.5rem; overflow-wrap: anywhere; text-shadow: var(--text-glow); }
.thread-meta { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.thread-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; font-size: .9rem; }
/* Extension controls in the bar (watch, bookmark, reading, tags) read as icon links. */
.thread-bar-tools :is(.bookmark-panel, .reading-panel, .thread-tags) { display: contents; }
.thread-bar-tools form, .thread-bar-tools p { display: inline-flex; margin: 0; }
.thread-bar-tools .reading-panel p { align-items: center; gap: .35rem; color: var(--muted); }
.thread-bar-tools :is(button, a, .compact-actions > summary):not(.compact-form *) {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0 .6rem;
  border: 0;
  border-radius: .6rem;
  background: transparent;
  box-shadow: none;
  color: var(--link);
  font-size: inherit;
  font-weight: 750;
  text-decoration: none;
}
.thread-bar-tools :is(button, a, .compact-actions > summary):not(.compact-form *):hover,
.thread-bar-tools .compact-actions[open] > summary { background: var(--tool-hover); color: var(--link-hover); }
.thread-bar-tools :is(.thread-menu, .moderate-thread, .tag-editor) > .compact-form { position: absolute; z-index: 20; top: 100%; right: 0; }
/* The account menu links bookmarks and the tag badges link the tag browser,
   so the bar leaves those two links out. */
.thread-bar-tools :is(.bookmark-panel > a, .thread-tags > a:not(.thread-tag)):not(.compact-form *) { display: none; }
:is(.notification-watch button, .bookmark-panel button, .thread-menu > summary, .moderate-thread > summary, .tag-editor > summary, .print-link, .report-thread > summary)::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: center / contain no-repeat;
}
.notification-watch button::before { background-image: url("/assets/icons/eye.svg"); }
.bookmark-panel button::before { background-image: url("/assets/icons/star.svg"); }
.thread-menu > summary::before { background-image: url("/assets/icons/wrench.svg"); }
.moderate-thread > summary::before { background-image: url("/assets/icons/shield.svg"); }
.tag-editor > summary::before { background-image: url("/assets/icons/tag.svg"); }
a.print-link::before { background-image: url("/assets/icons/print.svg"); }
.report-thread > summary::before { background-image: url("/assets/icons/flag.svg"); }
.menu-link { display: flex; align-items: center; gap: .45rem; min-height: 2.4rem; font-weight: 750; }

/* Posts inside the thread panel are rows, not separate cards. */
.thread-panel .post-list { display: block; }
.thread-panel .post-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.thread-panel .post-list > :first-child { border-top: 0; }
.thread-panel .post-list > :last-child { border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px); }
.thread-panel .post-list > .content-panel { margin: 0; border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
.thread-panel .post-list > :not(.post-card, .content-panel) { margin: 0; padding: .75rem 1.15rem; border-top: 1px solid var(--line); }
.thread-panel .post-card:target, .thread-panel .post-card.is-targeted { box-shadow: inset 0 0 0 2px var(--accent); }
/* Menus open out of posts, so the rows do not clip; the last row rounds its own corner. */
.thread-panel .post-card { overflow: visible; }
.thread-panel .post-list > .post-card:last-child .post-author { border-bottom-left-radius: calc(var(--radius) - 1px); }

/* A post: author card, a slim strip with the time and number, the body, and a
   footer with reactions on the left and the post's actions on the right. */
.post-author .avatar-mark { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; font-size: 2rem; }
.author-kind { display: inline-block; margin-top: .3rem; }
.role-badge {
  display: inline-flex;
  margin-top: .4rem;
  padding: .1rem .6rem;
  border: 1px solid var(--badge-edge);
  border-radius: var(--pill);
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: .76rem;
  font-weight: 800;
  box-shadow: var(--accent-glow);
}
/* Rank, join date and post count read as quiet lines under the name. */
.author-facts { display: grid; justify-items: center; gap: .1rem; margin-top: .55rem; color: var(--muted); font-size: .82rem; line-height: 1.4; }
.author-facts:empty { display: none; }
.author-facts p { margin: 0; }
.author-facts .post-author-rank { color: var(--accent); }
/* Slots order by dependency first, so Reputation lands after Profiles; the
   card reads rank, then join date, then post count. */
.author-facts :is(.rank-pips, .post-author-rank, .post-author-badge) { order: -1; }
/* Five rank pips above the rank: lit ones are glossy orange beads. */
.rank-pips { display: inline-flex; justify-content: center; gap: 3px; margin-bottom: .1rem; }
.rank-pip { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.rank-pip.is-on { background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffb062 40%, #e06a00 100%); box-shadow: var(--accent-glow); }
.post-main { display: flex; flex-direction: column; padding-bottom: .6rem; }
.post-meta { align-items: center; }
.post-number { font-weight: 800; text-decoration: none; }
.post-tools {
  align-items: center;
  gap: .4rem;
  margin: auto calc(-1 * clamp(1rem, 3vw, 1.5rem)) 0;
  padding: .6rem clamp(1rem, 3vw, 1.5rem) 0;
}
.post-tools .post-reactions { order: 0; display: flex; flex-wrap: wrap; gap: .35rem; margin-right: auto; }
.post-tools .post-reactions form { margin: 0; }
.post-tools .post-reactions :is(button, span) {
  min-height: 2.25rem;
  padding: .2rem .8rem;
  border: 1px solid var(--secondary-edge);
  border-radius: var(--pill);
  background: var(--secondary-bg);
  color: var(--secondary-ink);
  font-size: .86rem;
  font-weight: 800;
  text-transform: capitalize;
}
.post-tools .post-reactions span { display: inline-flex; align-items: center; }
.post-tools .post-reactions button[aria-pressed="true"] { border-color: var(--badge-edge); background: var(--badge-bg); color: var(--badge-ink); box-shadow: var(--accent-glow); }
.post-tools-end { display: contents; }
.post-quote { order: 1; }
.post-tools .bookmark-post-tools { order: 2; margin: 0; }
.post-menu { order: 3; display: flex; }
.post-quote, .post-tools .bookmark-post-tools button {
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .8rem;
  border: 1px solid var(--secondary-edge);
  border-radius: var(--pill);
  background: var(--secondary-bg);
  box-shadow: var(--gloss);
  color: var(--secondary-ink);
  font-size: .86rem;
  font-weight: 800;
  text-decoration: none;
}
.post-quote:hover, .post-tools .bookmark-post-tools button:hover { background: var(--secondary-hover); color: var(--secondary-ink); }
/* Icon-only controls keep their text as the accessible name. */
.post-tools .bookmark-post-tools button { width: 2.25rem; justify-content: center; padding: 0; font-size: 0; }
/* The post menu is plain dots: there when wanted, not calling for attention. */
.post-tools .post-menu > summary {
  width: 2.25rem;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0;
}
.post-tools .post-menu > summary:hover, .post-tools .post-menu[open] > summary { background: transparent; color: var(--ink); }
.post-tools .bookmark-post-tools button::before { content: ""; width: 16px; height: 16px; background: url("/assets/icons/star.svg") center / contain no-repeat; }
.post-tools .post-menu > summary::after { display: none; }
.post-tools .post-menu > summary::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url("/assets/icons/more.svg") center / contain no-repeat; }
.post-menu > .compact-form { position: absolute; z-index: 20; top: calc(100% + .35rem); right: 0; min-width: 15rem; }
/* Inside a menu, nested actions read as rows rather than pills. */
.compact-form .compact-actions > summary, .compact-form .menu-link {
  width: 100%;
  min-height: 2.4rem;
  justify-content: space-between;
  padding: .35rem .6rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 750;
  text-decoration: none;
}
.compact-form .menu-link { justify-content: flex-start; }
.compact-form .compact-actions > summary:hover, .compact-form .menu-link:hover { background: var(--surface-sunken); color: var(--ink); }
.compact-form .compact-actions { max-width: none; }
.compact-form .compact-actions > .compact-form { box-shadow: none; }

/* Polls sit inside the opening post. */
.first-post-extras { display: grid; gap: .75rem; margin: 1.1rem 0 .4rem; }
.first-post-extras .poll-panel { margin: 0; box-shadow: none; }
.first-post-extras > p { margin: 0; }
.poll-panel > h2:first-child { font-size: .98rem; }
.poll-summary { margin: -.45rem 0 .9rem; color: var(--muted); font-size: .85rem; }
.poll-panel fieldset { display: block; margin: 0; padding: 0; border: 0; }
.poll-options { display: grid; gap: .75rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.poll-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.poll-choice { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.poll-yours { color: var(--accent); font-size: .82rem; font-weight: 800; }
.poll-count { margin-left: auto; color: var(--muted); font-size: .85rem; font-weight: 750; white-space: nowrap; }
.poll-bar { position: relative; flex-basis: 100%; height: .65rem; overflow: hidden; border: 1px solid var(--chip-edge); border-radius: var(--pill); background: var(--chip-bg); }
.poll-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: var(--warm-bg);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), var(--accent-glow);
}
.poll-fill-5 { --fill: 5%; }
.poll-fill-10 { --fill: 10%; }
.poll-fill-15 { --fill: 15%; }
.poll-fill-20 { --fill: 20%; }
.poll-fill-25 { --fill: 25%; }
.poll-fill-30 { --fill: 30%; }
.poll-fill-35 { --fill: 35%; }
.poll-fill-40 { --fill: 40%; }
.poll-fill-45 { --fill: 45%; }
.poll-fill-50 { --fill: 50%; }
.poll-fill-55 { --fill: 55%; }
.poll-fill-60 { --fill: 60%; }
.poll-fill-65 { --fill: 65%; }
.poll-fill-70 { --fill: 70%; }
.poll-fill-75 { --fill: 75%; }
.poll-fill-80 { --fill: 80%; }
.poll-fill-85 { --fill: 85%; }
.poll-fill-90 { --fill: 90%; }
.poll-fill-95 { --fill: 95%; }
.poll-fill-100 { --fill: 100%; }
.poll-panel form { margin: 0; }
.poll-panel form + form { margin-top: .6rem; }
/* Closing is the quiet action beside Vote. */
.poll-panel .poll-form ~ form button, .poll-panel ul + form button {
  border-color: var(--secondary-edge);
  background: var(--secondary-bg);
  color: var(--secondary-ink);
}
.poll-create .button-link { min-height: 2.25rem; padding: .25rem .9rem; font-size: .86rem; }
.status-pill, .bot-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  margin: .4rem 0 0;
  padding: .1rem .6rem;
  border: 1px solid var(--badge-edge);
  border-radius: var(--pill);
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
}
.moderation-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.extension-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.extension-heading h2 { margin: 0; overflow-wrap: anywhere; }
.extension-heading .extension-badge { margin: 0; }
.extension-badge-core { border-color: var(--chip-edge); background: var(--chip-bg); color: var(--chip-ink); }
.extension-package-id { color: var(--muted); overflow-wrap: anywhere; }
.personal-thread-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.reading-panel { flex: 1 1 17rem; }
.reading-panel p { margin: 0 0 .45rem; }
.reading-boundary { display: block; height: 1px; }
.bookmark-panel { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.reading-unread, .bookmark-badge { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; color: var(--accent); font-size: .88rem; font-weight: 750; }
.bookmark-badge { margin-left: .6rem; }
.bookmark-post-tools { margin: 0; }
.bookmark-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.bookmark-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.bookmark-list > li > a { overflow-wrap: anywhere; }
.bookmark-list time { color: var(--muted); font-size: .88rem; }
.moderation-actions form { margin: 0; }
.post-list { display: grid; gap: .85rem; }
.post-card { display: grid; grid-template-columns: 11rem minmax(0, 1fr); overflow: hidden; scroll-margin-top: 1rem; }
.post-card:target,
.post-card.is-targeted {
  border-color: var(--accent);
  background: var(--target-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent), var(--shadow);
}
.post-author {
  padding: 1.2rem 1rem;
  border-right: 1px solid var(--line);
  background: var(--surface-subtle);
  text-align: center;
}
.avatar-mark {
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  margin: 0 auto .7rem;
  border: 1px solid var(--avatar-edge);
  border-radius: 1.1rem;
  background: var(--avatar-bg);
  box-shadow: var(--gloss), 0 1px 4px rgb(42 18 64 / .15);
  color: var(--avatar-ink);
  font: 800 1.6rem/1 var(--font-display);
}
img.avatar-mark { object-fit: cover; background: var(--surface-sunken); }
.author-name { margin: 0; overflow-wrap: anywhere; font-weight: 800; }
.author-kind { color: var(--muted); font-size: .84rem; }
.post-author .bot-badge { margin-top: .4rem; }
.post-main { min-width: 0; padding: 0 clamp(1rem, 3vw, 1.5rem) 1.1rem; }
.post-meta, .revision-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: .86rem;
}
.post-meta {
  margin: 0 calc(-1 * clamp(1rem, 3vw, 1.5rem));
  padding: .55rem clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--strip-bg);
}
.revision-meta { padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.post-meta-primary { display: flex; flex-wrap: wrap; gap: .7rem; }
.post-meta time, .revision-meta time { color: var(--muted); }
.post-links { display: flex; flex-wrap: wrap; gap: .85rem; }
.post-links a { font-weight: 750; white-space: nowrap; }
.post-body { overflow-wrap: anywhere; }
.post-body > :first-child { margin-top: 1rem; }
.post-body > :last-child { margin-bottom: 0; }
.post-body p { margin: .8rem 0; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { margin: 1.2rem 0 .55rem; }
.post-body pre {
  overflow-x: auto;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--pre-bg);
  color: var(--pre-ink);
  line-height: 1.6;
}
.post-body code, code { font-family: var(--font-mono); font-size: .92em; }
.post-body :not(pre) > code { padding: .1rem .35rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--code-bg); }
.post-body blockquote { margin: .9rem 0; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--quote-bg); color: var(--muted); }
.post-body blockquote > :first-child { margin-top: 0; }
.post-body blockquote > :last-child { margin-bottom: 0; }
.post-body table, .content-panel table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.post-body th, .post-body td, .content-panel th, .content-panel td { padding: .45rem .7rem; border-bottom: 1px solid var(--line); text-align: left; }
.post-body th, .content-panel th { background: var(--strip-bg); }
.post-body tr:last-child > td, .content-panel tr:last-child > td { border-bottom: 0; }
.post-body details { margin: .8rem 0; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.post-body summary { color: var(--link); font-weight: 750; cursor: pointer; }

/* Tool rows: everything except the main call to action is a quiet control. */

.thread-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.post-tools { display: flex; flex-wrap: wrap; }
.thread-tools button, .thread-tools .button-link,
.post-tools button, .post-tools .button-link,
.personal-thread-tools button, .personal-thread-tools .button-link,
.moderation-actions button {
  min-height: 2.4rem;
  padding: .35rem .95rem;
  border-color: var(--secondary-edge);
  background: var(--secondary-bg);
  color: var(--secondary-ink);
  font-size: .92rem;
}
.thread-tools button:hover, .thread-tools .button-link:hover,
.post-tools button:hover, .post-tools .button-link:hover,
.personal-thread-tools button:hover, .personal-thread-tools .button-link:hover,
.moderation-actions button:hover { background: var(--secondary-hover); color: var(--secondary-ink); }
.compact-actions { position: relative; max-width: 28rem; }
.compact-actions > summary, .admin-actions > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.4rem;
  padding: .35rem .95rem;
  border: 1px solid var(--secondary-edge);
  border-radius: var(--pill);
  background: var(--secondary-bg);
  box-shadow: var(--gloss);
  color: var(--secondary-ink);
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
}
.compact-actions > summary::after, .admin-actions > summary::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-left: .1rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.compact-actions[open] > summary::after, .admin-actions[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.compact-actions > summary:hover, .admin-actions > summary:hover { background: var(--secondary-hover); }
.compact-actions[open] { z-index: 2; }
.compact-form { display: grid; gap: .5rem; min-width: min(20rem, calc(100vw - 3rem)); margin-top: .45rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-menu); }
.compact-form label { color: var(--ink); font-size: .9rem; }
.compact-form input[type="file"], .compact-form textarea { width: 100%; }
.compact-form input[type="file"] { padding: .5rem; border: 1px dashed var(--field-edge); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.compact-form textarea { resize: vertical; }
.compact-form button { justify-self: start; }
.moderation-actions form { display: grid; gap: .5rem; }
.post-tools { border-top: 1px dashed var(--line); }
.post-attachments { margin-top: .9rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.post-attachments h3 { margin: 0 0 .45rem; font-size: .95rem; }
.post-attachments ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.2rem; }
.post-attachments li { overflow-wrap: anywhere; }
.attachment-size { color: var(--muted); font-size: .84rem; }
.notice { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--notice-edge); border-radius: var(--radius-sm); background: var(--notice-bg); color: var(--notice-ink); }

.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin: 1rem 0; }
.pagination a { align-self: center; font-weight: 750; }
.revision-list { display: grid; gap: .9rem; }
.revision-card { padding: var(--panel-pad); }
.revision-meta { align-items: center; margin-bottom: .2rem; }
.revision-meta h2 { margin: 0 0 .35rem; font-size: 1.15rem; }
.revision-meta p { margin: 0; }
.revision-body { padding-top: .3rem; }

/* Accounts and settings */

.sign-in-panel { margin-top: 2rem; }
.passkey-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.passkey-options > section { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.passkey-options h2 { margin-bottom: .75rem; font-size: 1.12rem; }
.passkey-form { display: grid; gap: .55rem; }
.passkey-form input { width: 100%; }
.passkey-form button { justify-self: start; margin-top: .3rem; }
.passkey-status { margin-top: 1rem; }
.oidc-option { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.oidc-option p { color: var(--muted); }
.oidc-option form { display: grid; gap: .55rem; justify-items: start; }
.oidc-option input { width: 100%; }
.settings-panel { margin-top: 1rem; }
.settings-panel > h2:first-child { font-size: 1.05rem; }
.settings-form { max-width: 34rem; }
.settings-list { display: grid; gap: .65rem; margin: .75rem 0 1rem; padding: 0; list-style: none; }
.settings-list > li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.linked-identities { grid-template-columns: minmax(0, 1fr); }
.linked-identities code { min-width: 0; overflow-wrap: anywhere; }
.atproto-profile-import, .atproto-profile-import select { min-width: 0; max-width: 100%; }
.settings-list form { margin: 0; }
.settings-list time { color: var(--muted); }
.add-passkey-form { margin-top: 1rem; }

/* Administration */

.admin-create-section > h2 { margin-top: 0; }
.admin-section-form { max-width: 56rem; }
.admin-section-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 15rem); gap: 1rem; }
.admin-section-fields > div { min-width: 0; }
.admin-section-fields label, .admin-rename-form label { display: block; margin: 0 0 .35rem; }
.admin-section-fields input, .admin-section-fields select, .admin-rename-form input { width: 100%; min-width: 0; }
.admin-rename-form { display: grid; grid-template-columns: minmax(10rem, 1fr) auto; align-items: end; gap: .5rem .65rem; width: min(100%, 27rem); }
.admin-rename-form label { grid-column: 1 / -1; margin: 0; }
.admin-user { display: grid; grid-template-columns: minmax(13rem, 1fr) minmax(16rem, 1.35fr); align-items: start; gap: 1rem; }
.admin-user-main, .admin-user-controls { min-width: 0; }
.admin-user-main h3 { overflow-wrap: anywhere; }
.admin-user-scopes { overflow-wrap: anywhere; }
.admin-user-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: start; gap: .55rem; }
.admin-actions { min-width: 0; }
.admin-actions[open] { grid-column: 1 / -1; }
.admin-action-content { display: grid; gap: .6rem; min-width: 0; margin-top: .45rem; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.admin-action-content p { margin: 0; color: var(--muted); font-size: .9rem; overflow-wrap: anywhere; }
.admin-control-form { display: grid; gap: .45rem; min-width: 0; padding: .65rem 0; border-top: 1px solid var(--line); }
.admin-control-form:first-child { padding-top: 0; border-top: 0; }
.admin-control-form label { font-size: .9rem; }
.admin-control-form select { display: block; width: 100%; margin-top: .25rem; }
.admin-checkbox { display: flex; align-items: center; gap: .45rem; }
.admin-checkbox input { margin: 0; }
.admin-control-form button, .admin-status-form button { justify-self: start; max-width: 100%; white-space: normal; text-align: left; }
.admin-status-form { min-width: 0; margin: 0; }
.admin-section-row { flex-wrap: wrap; }
.admin-section-row .forum-row-main { flex: 1 1 12rem; }

.credential-value { max-width: 100%; padding: .85rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.bot-list > li > div { min-width: 0; width: 100%; overflow-wrap: anywhere; }
.bot-list .settings-list > li { flex-wrap: wrap; align-items: flex-start; }
.bot-list .settings-list > li > span { min-width: 0; overflow-wrap: anywhere; }

/* Media */

.post-body img,
.attachment-thumbnail {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.attachment-thumbnail {
  max-height: 270px;
  margin: .5rem 0;
  object-fit: contain;
}
.post-attachments li {
  margin-bottom: .8rem;
  overflow-wrap: anywhere;
}

/* Extension feature styles */

.ignored-post-content > summary { cursor: pointer; color: var(--muted); padding-block: .5rem; }
.ignored-post-content[open] > summary { margin-bottom: .75rem; }
.conversation-list { list-style: none; padding: 0; }
.conversation-list > li { padding-block: .75rem; border-bottom: 1px solid var(--line); }
.conversation-list small { display: block; color: var(--muted); }
.message header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: .75rem; }
.message-attachments { padding-inline-start: 1.25rem; }
.message-attachments img { max-width: min(100%, 10rem); height: auto; }

.profile-signature {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
  overflow-wrap: anywhere;
  overflow-x: auto;
}
.profile-signature > :first-child { margin-top: 0; }
.profile-signature img { max-width: 100%; max-height: 8rem; object-fit: contain; }
.post-author-rank, .member-rank { color: var(--accent); font-size: .86rem; font-weight: 750; }
.post-author-badge, .member-badge {
  display: inline-block;
  max-width: 100%;
  margin: .25rem .35rem .25rem 0;
  padding: .1rem .6rem;
  border: 1px solid var(--badge-edge);
  border-radius: var(--pill);
  background: var(--badge-bg);
  color: var(--badge-ink);
  font-size: .82rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.moved-post .post-main { grid-column: 1 / -1; }

/* Small screens */

@media (max-width: 760px) {
  .site-header, .site-main, .site-footer { width: min(100% - 1.25rem, var(--width)); }
  .masthead { gap: .75rem; padding: 1rem 0 .8rem; }
  .masthead-search { flex: 1 1 100%; margin-left: 0; }
  .gloss-link { display: none; }
  .site-main > .breadcrumbs:first-child { margin: -1.1rem .5rem 1rem; }
  .thread-bar { padding: .75rem .85rem; }
  .forum-table .stat-col { display: none; }
  .forum-table .last-col { width: 7.5rem; max-width: 7.5rem; font-size: .8rem; }
  .forum-table .last-title { white-space: normal; overflow-wrap: anywhere; }
  .forum-tile { width: 2.2rem; height: 2.2rem; }
  .forum-table .stat-inline { display: inline; }
  .forum-table p.stat-inline { display: block; }
  .forum-table tbody :is(th, td) { padding: .8rem .85rem; }
  .welcome-panel { padding: 1.1rem 1.2rem; }
  .thread-bar h1 { font-size: 1.25rem; }
  .nav-drawer { display: flex; }
  .account-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .account-menu > summary { padding: 0 .75rem 0 .6rem; }
  .brand-name { font-size: 1.9rem; }
  .brand-mark { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; }
  .site-main { padding-top: 1.1rem; }
  .page-heading-row, .thread-heading { align-items: flex-start; flex-direction: column; }
  .forum-row { align-items: flex-start; }
  .row-link { max-width: 6.5rem; text-align: right; }
  .post-card { grid-template-columns: 1fr; }
  .post-author { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-right: 0; border-bottom: 1px solid var(--line); text-align: left; }
  .avatar-mark { width: 2.5rem; height: 2.5rem; flex: none; margin: 0; border-radius: .8rem; font-size: 1.1rem; }
  .author-name { max-width: 55%; }
  .post-author .bot-badge { margin: 0 0 0 auto; }
  .post-author { flex-wrap: wrap; }
  .post-author .avatar-mark { width: 2.5rem; height: 2.5rem; border-radius: .8rem; font-size: 1.1rem; }
  .post-author .role-badge { margin: 0; }
  .author-facts { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: .1rem .75rem; margin: 0; }
  .revision-meta { flex-direction: column; gap: .45rem; }
  .moderation-actions { width: 100%; }
  .passkey-options { grid-template-columns: 1fr; }
  .admin-section-fields { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .admin-user { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .admin-user-controls { grid-template-columns: minmax(0, 1fr); }
  .admin-actions[open] { grid-column: auto; }
  .admin-rename-form { grid-template-columns: minmax(0, 1fr); }
  .admin-rename-form label { grid-column: auto; }
  .bookmark-list > li { grid-template-columns: minmax(0, 1fr); }
  .bookmark-list form { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media print {
  .site-header, .site-nav, .post-tools, .composer, .nav-logout, .site-footer {
    display: none;
  }
  html, body, .thread-panel, .content-panel, .post-card {
    background: white;
    color: black;
    box-shadow: none;
  }
  .post {
    break-inside: avoid;
  }
}