/* ---------- the watr style ----------
   The site's look, taken from the watr style guide (https://github.com/WatrLabs/watr-style,
   v0.4): one hue in four depths, light from the top-left, square buttons and soft fields,
   Montserrat, everything moving at 0.2s. Loaded after style.css; it restyles, it doesn't
   change the layout.

   Themes, accents and custom themes keep working: the watr colours are only the DEFAULT
   look (no theme chosen, or Light), and the bar, buttons and links follow --accent, so any
   accent or custom theme colours them. The guide's four knobs are below. */

/* Montserrat (SIL Open Font License; see fonts/LICENSE.txt), served from here because the
   Content-Security-Policy only allows our own fonts. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/montserrat-latin-ext.woff2?v=kCAhUKZ2wi") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/montserrat-latin.woff2?v=kCAhUKZ2wi") 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;
}

:root {
  /* knobs (watr-style: change these per site) */
  --watr-hue: 232;          /* the one colour; 232 is the site's light blue */
  --watr-chroma: 1;         /* 0.4 calm, 1 normal, 1.3 loud */
  --lift: 5px;              /* how far things float: 3px flat, 5px normal, 8px dramatic */
  --head-weight: 700;       /* 500 calm, 700 normal, 900 shouty */
  --speed: .2s;

  /* Square buttons and avatars (--round 0), soft 0.3em fields. A custom theme's corner
     radius sets these itself (theme.js) and wins. */
  --radius: 6px;
  --round: 0;
  --field-r: calc(.3em + 20px * min(1, var(--round)));
  --font: "Twemoji", "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Colours: the ramp and neutrals, for browsers that understand oklch (the stylesheet's
   own hex colours stay for the rest). */
@supports (color: oklch(50% 0.1 200)) {
  :root:not([data-accent]):not([data-theme="halloween"]) {
    --accent: oklch(78% calc(.13 * var(--watr-chroma)) var(--watr-hue));
    --accent-hover: oklch(69% calc(.11 * var(--watr-chroma)) var(--watr-hue));
    --on-accent: oklch(14% .015 var(--watr-hue));
    --accent-text-dark: oklch(84% calc(.11 * var(--watr-chroma)) var(--watr-hue));
    --accent-text-light: oklch(45% calc(.12 * var(--watr-chroma)) var(--watr-hue));
  }
  /* Dark is the default; the system's light setting is followed when no theme is chosen. */
  :root:not([data-theme]) {
    --bg: oklch(19% .012 var(--watr-hue));
    --bg-elev: oklch(23% .014 var(--watr-hue));
    --bg-hover: oklch(30% .016 var(--watr-hue));
    --bg-input: oklch(27% .015 var(--watr-hue));
    --border: oklch(32% .016 var(--watr-hue));
    --text: oklch(95% .006 var(--watr-hue));
    --muted: oklch(74% .012 var(--watr-hue));
    --shadow: rgb(15 15 15 / .55);
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      --bg: #ffffff;
      --bg-elev: oklch(95.8% .004 var(--watr-hue));
      --bg-hover: oklch(90.7% .004 var(--watr-hue));
      --bg-input: oklch(90.7% .004 var(--watr-hue));
      --border: oklch(86% .006 var(--watr-hue));
      --text: oklch(16% .012 var(--watr-hue));
      --muted: oklch(42% .012 var(--watr-hue));
      --shadow: rgb(15 15 15 / .4);
    }
  }
  :root[data-theme="light"] {
    --bg: #ffffff;
    --bg-elev: oklch(95.8% .004 var(--watr-hue));
    --bg-hover: oklch(90.7% .004 var(--watr-hue));
    --bg-input: oklch(90.7% .004 var(--watr-hue));
    --border: oklch(86% .006 var(--watr-hue));
    --text: oklch(16% .012 var(--watr-hue));
    --muted: oklch(42% .012 var(--watr-hue));
    --shadow: rgb(15 15 15 / .4);
  }
}

/* ---------- type ---------- */
h1, h2, h3, h4 { font-weight: var(--head-weight); }
/* Small labels are lowercase; sentences and names keep their case. */
.tab, .nav-section h3, .site-footer-col h4, .badge-type, .badge-reason, .badge-count { text-transform: lowercase; }
.site-footer-col h4 { letter-spacing: 0; }

/* ---------- one speed ---------- */
.btn, .icon-btn, .pill, .chip, .nav-item, .tab, .menu a, .menu button, .seg-btn, .thumb img, .link-btn {
  transition-duration: var(--speed);
}

/* ---------- bars ----------
   The top bar is a step up from the page background (the surface colour) with normal text,
   like the site's original bar, and casts the drop onto the page. The footer keeps the site's
   own tinted surface too (style.css). A frosted-glass top bar keeps its own look. */
:root:not([data-topbar]) .topbar {
  background: var(--bg-elev); color: var(--text);
  box-shadow: var(--lift) var(--lift) var(--lift) var(--shadow);
}

/* ---------- buttons and fields ---------- */
.btn.primary { color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }
.search input { border-radius: var(--field-r) 0 0 var(--field-r); border-color: transparent; }
.search input:focus { border-color: var(--accent); }
.search button[type="submit"] { border-radius: 0 var(--field-r) var(--field-r) 0; border-color: transparent; background: var(--bg-hover); }
.search button[type="submit"]:hover { background: var(--bg-input); }
.chat-form input { border-radius: var(--field-r); }
:root:not([data-theme]) input:not([type]), :root:not([data-theme]) input[type="text"], :root:not([data-theme]) input[type="search"],
:root:not([data-theme]) input[type="email"], :root:not([data-theme]) input[type="password"], :root:not([data-theme]) input[type="url"],
:root:not([data-theme]) input[type="number"], :root:not([data-theme]) textarea, :root:not([data-theme]) select,
:root[data-theme="light"] input:not([type]), :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="search"],
:root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="password"], :root[data-theme="light"] input[type="url"],
:root[data-theme="light"] input[type="number"], :root[data-theme="light"] textarea, :root[data-theme="light"] select {
  border-color: transparent;
}
:root:not([data-theme]) input:focus, :root:not([data-theme]) textarea:focus, :root:not([data-theme]) select:focus,
:root[data-theme="light"] input:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] select:focus {
  border-color: var(--accent);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- light from the top-left: every floating thing drops down and to the right ---------- */
.menu, .toast {
  box-shadow: var(--lift) var(--lift) var(--lift) var(--shadow);
}
.menu { border-color: transparent; }
.card:hover .thumb { box-shadow: var(--lift) var(--lift) var(--lift) var(--shadow); }
.thumb { transition: box-shadow var(--speed); }

/* ---------- panels and tabs ---------- */
.card-panel { background: color-mix(in srgb, var(--accent) 6%, var(--bg-elev)); }
.tabs { border-bottom: 3px solid var(--accent); gap: 4px; }
.tab { border-bottom: 0; background: var(--bg-hover); }
.tab.active { background: var(--accent); color: var(--on-accent); }

/* ---------- error and empty states: the blob goes on the right (above on phones) ---------- */
.empty:not(.small) {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 32px;
  max-width: 760px; margin: 0 auto; text-align: left; padding: 64px 16px;
}
.empty:not(.small) > * { grid-column: 1; justify-self: start; }
.empty:not(.small)::after {
  content: "\1FAE0"; grid-column: 2; grid-row: 1 / span 6; font-size: 112px; line-height: 1;
}
@media (max-width: 600px) {
  .empty:not(.small) { grid-template-columns: 1fr; text-align: center; }
  .empty:not(.small) > * { justify-self: center; }
  .empty:not(.small)::after { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
}

/* ---------- everything is square ----------
   The guide's rule: square buttons, square avatars, square everything, except text fields
   (soft 0.3em corners) and radio buttons (round). A custom theme that picked its own corner
   radius in the theme creator keeps it, and so do the theme gallery's little previews. */
:root:not([data-theme="custom"]) :not(.theme-mini *), :root:not([data-theme="custom"]) :not(.theme-mini *)::before,
:root:not([data-theme="custom"]) :not(.theme-mini *)::after {
  border-radius: 0 !important;
}
/* (separate rules: a browser drops a whole rule over a pseudo-element it doesn't know) */
:root:not([data-theme="custom"]) ::-webkit-slider-thumb { border-radius: 0 !important; }
:root:not([data-theme="custom"]) ::-moz-range-thumb { border-radius: 0 !important; }
:root:not([data-theme="custom"]) :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"],
  input[type="datetime-local"], input[type="time"], textarea, select) {
  border-radius: .3em !important;
}
:root:not([data-theme="custom"]) .search input { border-radius: .3em 0 0 .3em !important; }
:root:not([data-theme="custom"]) .search button[type="submit"] { border-radius: 0 .3em .3em 0 !important; }
:root:not([data-theme="custom"]) input[type="radio"] { border-radius: 50% !important; }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }

/* ---------- bar height and burger (watr-style: 45px bar, square-ended burger lines) ---------- */
:root { --topbar-h: 48px; }
#menu-toggle svg { stroke-linecap: butt; stroke-width: 2.5; }

/* ---------- sidebar (watr-style 0.5 .watr-side): a surface panel under the bar whose drop
   falls onto the page; full-width rows, the current page goes bright, lowercase labels ---------- */
.sidebar {
  padding: 0 0 24px; background: var(--bg-elev);
  box-shadow: var(--lift) var(--lift) var(--lift) var(--shadow);
}
:root[data-glow] .sidebar, :root[data-bg-image] .sidebar { box-shadow: none; }
.nav-section { padding: 9px 0; border-bottom: 0; }
.nav-section:first-child { padding-top: 18px; }
.nav-section h3 { margin: 0 0 4px; padding-inline: 20px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.nav-item { padding: 0 20px; gap: 16px; }
.nav-item:not(:has(.avatar)), .site-footer-col a, .bottom-nav { text-transform: lowercase; }
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.nav-item.active:hover { background: var(--accent-hover); }
.signin-promo, .nav-footer { padding-inline: 20px; }
body.sidebar-collapsed .sidebar { padding: 0; }
body.sidebar-collapsed .sidebar .nav-item { padding: 14px 0; }
@media (max-width: 900px) {
  .sidebar { box-shadow: none; }
  body.sidebar-open .sidebar { box-shadow: calc(var(--lift) * 2) calc(var(--lift) * 2) calc(var(--lift) * 2) var(--shadow); }
  :root[data-sidebar="right"] body.sidebar-open .sidebar { box-shadow: none; }
}

/* ---------- chips, switches, tags ---------- */
.chip.active, .pill.on { background: var(--accent); color: var(--on-accent); }
.badge-live, .badge-stream, .badge-premiere { text-transform: lowercase; }
/* switches: square track, square knob that casts a tiny drop */
.switch { width: 44px; height: 22px; border: 0; background: var(--bg-hover); }
.switch::after { top: 3px; left: 3px; width: 16px; height: 16px; background: var(--muted); box-shadow: 2px 2px 2px var(--shadow); }
.switch-row input:checked + .switch::after { transform: translateX(22px); background: var(--on-accent); }
.vp-switch::after { box-shadow: 2px 2px 2px rgb(0 0 0 / .4); }
/* the loading spinner stays round (a square one read as a box) */
.spinner { border-width: 4px; }
:root:not([data-theme="custom"]) .spinner { border-radius: 50% !important; }

/* ---------- dialogs and toasts ---------- */
dialog { box-shadow: calc(var(--lift) * 2) calc(var(--lift) * 2) calc(var(--lift) * 2) var(--shadow); }
/* toasts sit bottom-right, where the shadows fall */
.toast { left: auto; right: 16px; transform: translateY(calc(100% + 40px)); }
.toast.show { transform: none; }

/* ---------- every other floating thing drops down and to the right too ---------- */
.search-suggest, .miniplayer, .vp-menu, .an-tip { box-shadow: var(--lift) var(--lift) var(--lift) var(--shadow); }
.seg-btn.active, .tm-thumb { box-shadow: 2px 2px 2px var(--shadow); }
@media (max-width: 900px) { .short-comments { box-shadow: none; border-top: 1px solid var(--border); } }

/* ---------- scrollbars: flat and square, a muted thumb on the page colour ----------
   (scrollbar-color for Firefox and Chrome/Edge 121+, the ::-webkit- rules for Safari) */
:root {
  --scroll-thumb: color-mix(in srgb, var(--muted) 45%, var(--bg));
  --scroll-track: var(--bg);
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
body * { scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-track); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-corner { background: var(--scroll-track); }

@media (prefers-reduced-motion: reduce) {
  :root { --speed: 0s; }
  .thumb img { transition: none; }
}

/* ---------- the watr.lol bar, pinned above the header ----------
   hub.js puts it first in <body>. the header and sidebar are fixed, so the bar is fixed too
   and everything that sits under the header moves down by its height. */
:root:has(body > .watrhub:not(.watrhub--bottom)) {
  --hub-h: 32px;
  --topbar-h: calc(48px + var(--hub-h)); /* 48px is the bar height set above */
}
body > .watrhub:not(.watrhub--bottom) {
  position: fixed; inset: 0 0 auto 0; height: var(--hub-h);
  box-sizing: border-box; padding: 0 14px; flex-wrap: nowrap; white-space: nowrap;
}
.topbar { top: var(--hub-h, 0px); height: calc(var(--topbar-h) - var(--hub-h, 0px)); }
@media (max-width: 420px) {
  body > .watrhub:not(.watrhub--bottom) { gap: 10px; padding: 0 10px; }
}