/* Relay Forums community site. The look follows the interface mockups (see CLAUDE.md):
   dark slate header, light gray page, white cards, one accent color per community.
   Depth comes from soft layered shadows, not hard borders: cards lift a little off the
   page, the main button has weight, the header has a gradient and a shadow under it.

   THE FONTS ARE SERVED FROM THIS SITE (wwwroot/fonts, declared just below): Inter for
   body text and Space Grotesk for headings, both under the SIL Open Font License 1.1
   (the license files sit beside them). No member's browser is ever sent to another
   company for a font. Only the Latin alphabet is in the files; other scripts fall back
   to the device's own fonts through the rest of --font.

   EVERY COLOR ON THE SITE IS DEFINED HERE, ONCE, AS A PAIR: its value on the light theme
   and its value on the dark theme. No other stylesheet, page or script names a color
   (a test holds that: ThemeRulesTests). A theme for a community will be a set of values
   for these variables, the way --accent already is (_Layout.cshtml sets it).

   How the theme is picked:
   - The first :root block is the light theme, and all a browser from before 2024 sees.
   - The second block gives each color as light-dark(light, dark). The browser picks the
     half that matches the element's `color-scheme`, which follows the device unless the
     visitor or member chose (see "The theme" under the second block).
   - The light half of a pair must equal the value in the first block (the test checks).
   - Text must keep a contrast of 4.5 to 1 on every ground it sits on, in both themes.
     ThemeRulesTests lists the pairs and works the numbers out; add a pair there when a
     new variable carries text.

   SHADOWS AND GRADIENTS ARE VARIABLES TOO (the "Depth" block of each :root): a shadow
   is built from shade colors that have a light and a dark value, because a shadow that
   works on a light page is invisible on a dark one. On the dark theme depth comes from
   lighter surfaces for higher things, a hairline of light along a raised thing's top
   edge (--glint) and a little shadow. No other stylesheet writes a shadow's or a
   gradient's colors: it uses --elev-1 to 3 and the named fills. */

/* Inter and Space Grotesk, one file each for every weight (variable fonts). "swap" shows
   text at once in the device's font and changes it when the file arrives. The -ext files
   hold accented Latin letters beyond Western Europe and are only fetched by a page that
   uses one. The layout preloads the two plain Latin files. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-italic.woff2") format("woff2");
  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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  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: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

:root {
  --accent: #0B5FD8;         /* links, primary buttons, the focus ring. Set per community. */
  --on-accent: #FFFFFF;      /* text on an --accent fill */
  --ink: #17212B;
  --on-ink: #FFFFFF;         /* text on an --ink fill: the current page number, a "Pinned" tag */
  --muted: #56616E;
  --label: #3D4853;          /* a small uppercase label: a category's heading, "MODERATOR" */
  --ground: #F2F4F8;
  --surface: #FFFFFF;
  --surface-alt: #F8FAFB;    /* a quieter surface: pinned rows, the user card beside a post, a row under the pointer */
  --surface-head: #F3F6F9;   /* where a heading row's or a user card's soft gradient ends (it starts at --surface or --surface-alt) */
  --surface-raised: #FFFFFF; /* above a card: a menu, a dialog. Lighter than --surface on the dark theme */
  --band: #EAEEF3;
  --line: #E1E6EC;
  --line-soft: #EBEFF3;
  --control-line: #C5CDD6;   /* a button's border under the pointer; dividers that must show */
  --button-line: #D7DDE4;    /* a button's border at rest: its shadow carries the edge */
  --field-line: #808B98;     /* the border of a box to type in: 3 to 1 against the surface it sits on */
  --unread: #C2410C;
  --read-ring: #A9B3BE;      /* the hollow ring beside a board or thread with no new posts */
  --danger: #B42318;
  --on-danger: #FFFFFF;      /* text on a --danger fill */
  --danger-soft: #FEF3F2;    /* behind something deleted or banned; --ink and --danger must stay readable on it */
  --highlight: #FDE68A;      /* behind a word a search found; --ink must stay readable on it */
  --shadow: rgba(23, 33, 43, 0.22);   /* under a menu that floats over the page */
  --media-ground: #0B1016;   /* behind a video before it loads: dark on both themes, so it never flashes white */

  /* The header is dark slate on both themes, so what sits on it has its own colors. It
     is a gradient from --header-top down to --header; text must read on both ends. */
  --header-top: #1B2836;
  --header: #121C27;
  --header-ink: #FFFFFF;
  --header-muted: #C9D2DC;
  --header-hover: #253342;       /* behind a header link under the pointer */
  --header-current: #2D3C4C;     /* behind the header link of the page you are on */
  --header-field: #26333F;       /* a text box in the header (search), and the header's buttons */
  --header-field-line: #7C8996;  /* the text box's border: 3 to 1 or better against the header */
  --header-line: #3B4A59;        /* a header button's border: quieter, the button says what it is */
  --header-glint: rgba(255, 255, 255, 0.07);  /* a hairline of light along the header's top edge */
  --header-shade: rgba(8, 14, 22, 0.5);       /* the shadow the header casts on the page */
  --badge: #FFB454;          /* the count on the header's bell; it sits on the dark header */
  --on-badge: #17212B;
  --logo-plate: #FFFFFF;     /* the light plate behind a community's logo, on both themes: the header is always dark */

  --radius: 16px;
  --radius-small: 10px;
  --radius-mark: 11px;       /* the community's mark in the header, a board's icon tile */
  --radius-chip: 6px;
  --radius-round: 999px;
  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Space Grotesk", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --tight: -0.02em;          /* letter spacing of a large title */
  --ease: 0.14s;             /* how long a hover takes. Motion is small, and off where the device asks (see the end of this file) */

  /* ---- Depth ----
     Shade colors first, then the shadows built from them. Three levels:
     1 a button, a pager link, a small card; 2 a card on the page; 3 something lifted
     toward you (a post a link jumped to, a menu, a dialog). */
  --shade-1: rgba(16, 24, 40, 0.06);   /* the tight contact shadow */
  --shade-2: rgba(16, 24, 40, 0.20);   /* the wide soft shadow under a card */
  --shade-3: rgba(16, 24, 40, 0.30);   /* under something lifted */
  --glint: rgba(255, 255, 255, 0);     /* light along a raised thing's top edge: the dark theme only */
  --card-line: rgba(16, 24, 40, 0.07); /* the hairline round a card */
  --elev-1: inset 0 1px 0 var(--glint), 0 1px 2px var(--shade-1), 0 1px 3px var(--shade-1);
  --elev-2: inset 0 1px 0 var(--glint), 0 1px 2px var(--shade-1), 0 12px 28px -14px var(--shade-2);
  --elev-3: inset 0 1px 0 var(--glint), 0 2px 4px var(--shade-1), 0 22px 44px -18px var(--shade-3);
  --header-shadow: inset 0 1px 0 var(--header-glint), 0 10px 30px -12px var(--header-shade);
  --header-fill: linear-gradient(180deg, var(--header-top) 0%, var(--header) 100%);
  --avatar-ring: 0 0 0 3px var(--surface), 0 4px 12px -4px var(--shade-3);
  --avatar-ring-small: 0 0 0 2px var(--surface), 0 2px 6px -2px var(--shade-3);
  --head-fill: linear-gradient(180deg, var(--surface) 0%, var(--surface-head) 100%);       /* a card's heading row */
  --panel-fill: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface-head) 100%);  /* the user card beside a post */

  /* What is made from the community's color. A browser too old to mix colors (before
     2023) gets these plain stand-ins; the second block mixes the real ones, which are
     the same recipe on both themes because --accent and --surface already change with
     the theme. Nothing here carries text except --welcome-end (the welcome strip),
     which is nearly --surface. */
  --accent-soft: var(--band);          /* a tint of the accent: a board's icon tile */
  --accent-line: var(--line);          /* a border with a little of the accent in it */
  --accent-deep: var(--accent);        /* the accent, deeper: where the mark's and the banner's gradient ends */
  --accent-bright: var(--accent);      /* the accent, lighter: where they start */
  --accent-halo: var(--band);          /* the soft ring round a text box that has the keyboard */
  --primary-shade: var(--shade-2);     /* the colored shadow under a primary button */
  --welcome-end: var(--surface-alt);   /* where the welcome strip's gradient ends */
  --wash: rgba(255, 255, 255, 0);      /* the faint wash of the accent behind the top of the page */
  --unread-halo: rgba(255, 255, 255, 0); /* the soft glow round an unread dot */
  --page-wash: radial-gradient(1100px 420px at 50% -160px, var(--wash), rgba(255, 255, 255, 0) 70%);

  /* A primary button is --accent with this gradient laid over it. Its text (--on-accent)
     must read on every part, so the gradient only ever moves the fill AWAY from the
     text's color: on the light theme (white text) the bottom is deepened; on the dark
     theme (dark text on the lighter shade) the top is lightened. */
  --primary-lift: rgba(255, 255, 255, 0);   /* over the top */
  --primary-sink: rgba(0, 0, 0, 0.16);      /* over the bottom */
  --primary-fill: linear-gradient(180deg, var(--primary-lift) 0%, var(--primary-sink) 100%);
  --primary-shadow: inset 0 1px 0 var(--header-glint), 0 8px 18px -8px var(--primary-shade);
  --mark-fill: linear-gradient(145deg, var(--accent-bright) 0%, var(--accent) 45%, var(--accent-deep) 100%);
  --mark-shadow: inset 0 1px 0 var(--header-glint), 0 6px 14px -6px var(--accent-deep);
  --welcome-fill: linear-gradient(180deg, var(--surface) 0%, var(--welcome-end) 100%);
  --unread-glow: 0 0 0 4px var(--unread-halo);
  --field-glow: 0 0 0 3px var(--accent-halo);

  /* The cover banner on the board index. Its words are --on-banner on --banner-scrim,
     whatever the picture: the scrim is dark enough by itself (5 to 1 or better on a
     pure white picture where the words are), so the picture never decides. The same on
     both themes. */
  --on-banner: #FFFFFF;
  --banner-scrim: rgba(8, 14, 22, 0.80);       /* behind the words */
  --banner-scrim-edge: rgba(8, 14, 22, 0.62);  /* at the top of the words; never lighter where there is text */
  --banner-scrim-none: rgba(8, 14, 22, 0);
  --banner-ornament: rgba(255, 255, 255, 0.14);  /* the faint chevrons on a banner drawn from the accent */
  --banner-shade: linear-gradient(0deg, var(--banner-scrim) 0%, var(--banner-scrim-edge) 62%, var(--banner-scrim-none) 100%);       /* a phone: from the bottom up */
  --banner-shade-side: linear-gradient(90deg, var(--banner-scrim) 0%, var(--banner-scrim-edge) 70%, var(--banner-scrim-none) 100%);  /* wider: from the left, so the rest of the picture shows */
  --banner-fill: linear-gradient(120deg, var(--accent-deep) 0%, var(--accent) 55%, var(--accent-bright) 100%);

  /* Profiles. A member with no photo gets their initials on one of these tints, always
     the same one for the same member; --ink must stay readable on each. The badge pair is
     the chip an add-on puts on a user card (a verified call sign). */
  --avatar-tint-1: #F5E3D3;
  --avatar-tint-2: #E3E0F5;
  --avatar-tint-3: #D7F0EC;
  --avatar-tint-4: #DCE9F9;
  --avatar-tint-5: #F5DDE6;
  --avatar-tint-6: #E4EFD3;
  --badge-surface: #D7F0EC;
  --badge-ink: #0B5A53;

  /* The text colors a member can pick in a post. A post stores the name ("red"), never a
     value, so a theme may change these. Each must stay readable (4.5 to 1) on --surface,
     --surface-alt, --ground (a quote, code) and --band (a table's heading row). */
  --text-red: #B42318;
  --text-orange: #B54708;
  --text-gold: #8A6100;
  --text-green: #177436;
  --text-teal: #0B726A;
  --text-blue: #1D5FD1;
  --text-purple: #7A3FD6;
  --text-pink: #C02672;
  --text-gray: #56616E;

  /* A member may also pick a custom text color. Its hue is kept, but its lightness (0 is
     black, 1 is white) is held inside a range so it stays readable on --surface: the
     first pair on the light theme, the second on the dark one (editor.css picks). */
  --text-custom-min-l: 0;
  --text-custom-max-l: 0.55;
  --text-custom-dark-min-l: 0.72;
  --text-custom-dark-max-l: 1;
}

/* Both themes: each color as light-dark(light, dark). */
@supports (color: light-dark(#000, #FFF)) {
  :root {
    --on-accent: light-dark(#FFFFFF, #0F1419);
    --ink: light-dark(#17212B, #E6EBF0);
    --on-ink: light-dark(#FFFFFF, #0F1419);
    --muted: light-dark(#56616E, #A7B2BE);
    --label: light-dark(#3D4853, #C3CCD6);
    --ground: light-dark(#F2F4F8, #0F1419);
    --surface: light-dark(#FFFFFF, #1A222C);
    --surface-alt: light-dark(#F8FAFB, #1F2832);
    --surface-head: light-dark(#F3F6F9, #212B36);
    --surface-raised: light-dark(#FFFFFF, #222C38);
    --band: light-dark(#EAEEF3, #26313D);
    --line: light-dark(#E1E6EC, #2F3B48);
    --line-soft: light-dark(#EBEFF3, #283340);
    --control-line: light-dark(#C5CDD6, #4D5B6A);
    --button-line: light-dark(#D7DDE4, #3D4A58);
    --field-line: light-dark(#808B98, #74808E);
    --unread: light-dark(#C2410C, #FF9B66);
    --read-ring: light-dark(#A9B3BE, #5E6B79);
    --danger: light-dark(#B42318, #FF9388);
    --on-danger: light-dark(#FFFFFF, #0F1419);
    --danger-soft: light-dark(#FEF3F2, #3B1F1D);
    --highlight: light-dark(#FDE68A, #6B5300);
    --shadow: light-dark(rgba(23, 33, 43, 0.22), rgba(0, 0, 0, 0.6));
    --header-top: light-dark(#1B2836, #131B24);
    --header: light-dark(#121C27, #0B1016);
    --header-hover: light-dark(#253342, #1C2630);
    --header-current: light-dark(#2D3C4C, #24303C);
    --header-shade: light-dark(rgba(8, 14, 22, 0.5), rgba(0, 0, 0, 0.7));

    /* Depth on the dark theme: shadows show little on a dark page, so they are deeper
       and shorter, the card's hairline is light instead of dark, and a raised thing
       catches a hairline of light along its top edge. */
    --shade-1: light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.32));
    --shade-2: light-dark(rgba(16, 24, 40, 0.20), rgba(0, 0, 0, 0.55));
    --shade-3: light-dark(rgba(16, 24, 40, 0.30), rgba(0, 0, 0, 0.70));
    --glint: light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.06));
    --card-line: light-dark(rgba(16, 24, 40, 0.07), rgba(255, 255, 255, 0.07));

    /* A primary button's gradient runs the other way on the dark theme (see --primary-fill). */
    --primary-lift: light-dark(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16));
    --primary-sink: light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));

    /* Made from the community's color, mixed. One recipe serves both themes: --accent,
       --surface, --line and --shade-3 already have their light and dark values. (These
       are not light-dark pairs, so the first block's stand-ins are what an old browser
       keeps.) */
    --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--surface));
    --accent-line: color-mix(in srgb, var(--accent) 22%, var(--line));
    --accent-deep: color-mix(in srgb, var(--accent) 82%, #000);
    --accent-bright: color-mix(in srgb, var(--accent) 80%, #FFF);
    --accent-halo: color-mix(in srgb, var(--accent) 26%, transparent);
    --primary-shade: color-mix(in srgb, var(--accent) 50%, var(--shade-3));
    --welcome-end: color-mix(in srgb, var(--accent) 6%, var(--surface));
    --wash: color-mix(in srgb, var(--accent) 12%, transparent);
    --unread-halo: color-mix(in srgb, var(--unread) 18%, transparent);

    --avatar-tint-1: light-dark(#F5E3D3, #5A4030);
    --avatar-tint-2: light-dark(#E3E0F5, #403A6B);
    --avatar-tint-3: light-dark(#D7F0EC, #1F4F4A);
    --avatar-tint-4: light-dark(#DCE9F9, #27456B);
    --avatar-tint-5: light-dark(#F5DDE6, #5E3145);
    --avatar-tint-6: light-dark(#E4EFD3, #3D5222);
    --badge-surface: light-dark(#D7F0EC, #143F3B);
    --badge-ink: light-dark(#0B5A53, #8EE3D8);

    --text-red: light-dark(#B42318, #FF9A8F);
    --text-orange: light-dark(#B54708, #FFAE70);
    --text-gold: light-dark(#8A6100, #F2CB57);
    --text-green: light-dark(#177436, #74D694);
    --text-teal: light-dark(#0B726A, #5FD6CB);
    --text-blue: light-dark(#1D5FD1, #8AB8FF);
    --text-purple: light-dark(#7A3FD6, #C0A8FF);
    --text-pink: light-dark(#C02672, #FF94C6);
    --text-gray: light-dark(#56616E, #AEB9C5);
  }

  /* The theme. With nothing chosen the page follows the device, which works with
     JavaScript off. A visitor's or member's choice is written on <html> by the server
     (data-theme; see Theme/ThemeChoices.cs), so the first paint is already right.
     `color-scheme` set on one element shows that element in the other theme. */
  :root { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

* { box-sizing: border-box; }

/* The header stays at the top of the screen as the page scrolls (with JavaScript: see
   "Header"). So a link that jumps to something (#post-123, "First unread", a board on
   /manage) must stop short of it, or the header would cover what was asked for.
   js/menu.js keeps --header-h at the header's real height, phone and desktop; the
   number here is only what holds until it has measured. */
html.js { --sticky-top: var(--header-h, 68px); }
html { scroll-padding-top: calc(var(--sticky-top, 0px) + 8px); }

body {
  margin: 0;
  /* A faint wash of the community's color behind the top of the page, then the ground. */
  background: var(--page-wash) no-repeat, var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

/* Headings are set in the heading typeface. What a member wrote in a post is not a
   heading of the site: posts set their own (threads.css, editor.css). */
h1, h2, h3, legend { font-family: var(--font-heading); letter-spacing: -0.01em; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.muted { color: var(--muted); font-size: 14px; }
.accent-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.accent-link:hover { text-decoration: underline; }

/* Header: a gradient and a shadow under it, so it has depth instead of being a flat slab.
   With JavaScript it stays at the top as the page scrolls. Without, the menus cannot
   fold away (header.css), the header is several rows tall, and it scrolls with the page. */
.site-header { background: var(--header-fill); color: var(--header-ink); box-shadow: var(--header-shadow); }
html.js .site-header { position: sticky; top: 0; z-index: 30; }
.header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--header-ink); text-decoration: none; }
/* The default mark: two chevrons (a message being passed along) on a tile of the
   community's color. It is always drawn as on the light theme, the color as the owner
   picked it with white on top: the header is dark on both themes, and the mark is the
   community's identity, not a part of the page's theme. */
.brand-mark {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-mark);
  color-scheme: light; background: var(--mark-fill); color: var(--on-accent); box-shadow: var(--mark-shadow);
}
/* A community's own logo, in place of the mark: fitted into 36 px of height whatever its
   shape, on a light plate with a little padding so dark artwork shows on the dark header. */
.brand-logo { flex: none; display: flex; align-items: center; height: 36px; padding: 4px 6px; border-radius: var(--radius-chip); background: var(--logo-plate); }
.brand-logo img { display: block; width: auto; height: 100%; max-width: 132px; object-fit: contain; }
/* A logo made for a dark background sits straight on the header, a little larger. */
.brand-logo.on-dark { padding: 0; border-radius: 0; background: none; }
.brand-name { font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: -0.015em; }
.main-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 0 22px; }
.signed-in { color: var(--header-muted); font-size: 14px; font-weight: 600; }
.main-nav a { color: var(--header-muted); font-weight: 500; text-decoration: none; padding: 12px 0; }
.main-nav a[aria-current="page"] { color: var(--header-ink); font-weight: 600; }

/* Page */
.page { padding-top: 28px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 24px; }
/* A card lifts a little off the page: a soft shadow carries its edge, so the border is
   only a hairline (dark on the light theme, light on the dark one). */
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: var(--radius); box-shadow: var(--elev-2); overflow: hidden; }
.empty { margin: 0; padding: 24px 20px; color: var(--muted); }

/* The cover banner at the top of the board index (Shared/_Banner.cshtml): the owner's
   picture, or a banner drawn from the community's color, with the name and the tagline
   over it. Short on a phone, so the boards are not pushed far down the screen. The
   words sit on a dark scrim (--banner-shade) and are readable on any picture. */
.banner-row { padding-top: 16px; }
.banner {
  position: relative; display: flex; align-items: flex-end; min-height: 104px; overflow: hidden;
  border-radius: var(--radius); background: var(--media-ground); color: var(--on-banner); box-shadow: var(--elev-2);
}
/* Drawn from the community's color as the owner picked it, on both themes (like the mark). */
.banner-drawn { color-scheme: light; background: var(--banner-fill); }
.banner-picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-ornament { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--banner-ornament); }
/* The words and the scrim behind them. The padding on the side where the scrim fades out
   is what keeps the words on the part of it that is dark enough: on a phone that is the
   top (the scrim rises from the bottom), from tablet width up it is the right (the scrim
   comes in from the left and leaves the rest of the picture clear). */
.banner-words { position: relative; flex: 1 1 auto; min-width: 0; padding: 28px 16px 12px; background: var(--banner-shade); }
.banner-name { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: var(--tight); overflow-wrap: anywhere; }
.banner-tagline { margin: 3px 0 0; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }

/* Board index. A category's heading is a small uppercase label with a dot of the accent. */
.category-name {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px;
  border-bottom: 1px solid var(--line); background: var(--head-fill);
  color: var(--label); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.category-name::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.board-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--line-soft); transition: background-color var(--ease); }
.category-name + .board-row { border-top: 0; }
.board-row:hover { background: var(--surface-alt); }
/* The board's icon in a tile tinted with the community's color (Shared/_BoardIcon). The
   unread dot sits on the tile's corner (unread.css). */
.board-tile {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-mark); background: var(--accent-soft); color: var(--accent);
}
.board-main { flex: 1 1 200px; min-width: 0; }
.board-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.board-name:hover { color: var(--accent); text-decoration: underline; }
.board-counts { flex: 0 0 112px; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; }
.board-counts span + span::before { content: "· "; }
/* The latest post: the poster's avatar, then the thread and their name. */
.board-last { flex: 0 1 280px; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.board-last-text { min-width: 0; overflow-wrap: anywhere; }
/* On a phone the counts and the latest post line up under the board's name, past the tile. */
@media (max-width: 767.98px) {
  .board-counts, .board-last { margin-left: 58px; }
  .board-counts { flex: 1 1 100%; }
  .board-last { flex: 1 1 100%; }
}
@media (min-width: 768px) {
  .banner-row { padding-top: 20px; }
  .banner { min-height: 176px; align-items: stretch; }
  .banner-words { flex: 0 1 820px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 30% 22px 28px; background: var(--banner-shade-side); }
  .banner-words > * { max-width: 560px; }
  .banner-name { font-size: 34px; }
  .banner-tagline { margin-top: 6px; font-size: 16px; }
  .category-name { padding: 16px 22px; font-size: 15px; }
  .board-row { gap: 10px 18px; padding: 16px 22px; }
  .board-main { flex-basis: 300px; }
  .board-counts { display: block; }
  .board-counts span { display: block; }
  .board-counts span + span::before { content: none; }
}

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-top: 14px; padding-bottom: 18px; font-size: 13px; color: var(--muted); }
.footer-row strong { color: var(--ink); }

/* The theme choice in the footer: Light, Dark or Match my device (Pages/Theme). Three
   real buttons in a form, so it works with JavaScript off; js/theme.js saves the page
   load. The one in use is filled and ticked, never told apart by color alone. */
.theme-choice { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.theme-choice-label { font-weight: 600; color: var(--ink); }
.theme-options { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-option {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--button-line); border-radius: var(--radius-round);
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: var(--elev-1); transition: border-color var(--ease), background-color var(--ease);
}
.theme-option:hover { border-color: var(--control-line); }
.theme-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-option[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.theme-option .theme-tick { display: none; }
.theme-option[aria-pressed="true"] .theme-tick { display: block; }

/* Only shown in a preview (tools/Start-Preview.ps1). */
.preview-link { flex: 1 1 100%; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); }

/* Motion is small (a hover that fades in, a button that lifts one pixel) and it is OFF
   for anyone whose device asks for less motion. This rule is last in this file and
   covers every stylesheet: a new transition anywhere needs nothing more. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .forum-button:hover, .button:hover { transform: none !important; }
}