/*
 * Numoteq · brand layer for Sable.
 *
 * The Matrix sibling of the Numoteq Forgejo and Redmine themes: same tokens, same rules.
 * Loaded after src/styles.css and only re-points Sable's own design tokens, plus a few
 * component accents, so upstream components stay untouched and rebasing stays cheap.
 *
 *   1. Structure is quiet: hairline lines on flat surfaces.
 *   2. The accent is a signal, not a surface. Text in the accent uses the readable accent
 *      (deep teal on light, cyan on dark); the cyan fill is reserved for the primary action.
 *   3. Only the primary (cyan) action is raised with a hard offset; menus and dialogs carry a
 *      soft offset in the line colour. Everything else is flat.
 *   4. Sora for headings, Inter for text, JetBrains Mono for code and small labels.
 */

@font-face { font-display: swap; font-family: 'NQ Sora'; font-weight: 100 800; src: url('./fonts/sora-variable.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'NQ Inter'; font-weight: 100 900; src: url('./fonts/inter-variable.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'NQ JetBrains Mono'; font-weight: 400; src: url('./fonts/jetbrains-mono.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'NQ JetBrains Mono'; font-weight: 500 600; src: url('./fonts/jetbrains-mono-500.woff2') format('woff2'); }

@font-face { font-display: swap; font-family: 'NQ JetBrains Mono'; font-weight: 700 800; src: url('./fonts/jetbrains-mono-700.woff2') format('woff2'); }

/* ───────────────────────── Light palette ───────────────────────── */

html {
  /* Background: the timeline and main content. */
  --bg-container: #fff;
  --bg-container-hover: #f7f7f3;
  --bg-container-active: #ecebe5;
  --bg-container-line: #e3e4df;
  --bg-on-container: #0a0b0e;

  /* Surface: sidebars, panels, cards. */
  --surface-container: #f7f7f3;
  --surface-container-hover: #ecebe5;
  --surface-container-active: #e3e2dc;
  --surface-container-line: #e3e4df;
  --surface-on-container: #0a0b0e;

  /* Surface variant: the navigation rail and inset wells. */
  --surface-var-container: #f2f2ec;
  --surface-var-container-hover: #ecebe5;
  --surface-var-container-active: #e3e2dc;
  --surface-var-container-line: #c7c9c4;
  --surface-var-on-container: #545864;

  /* Primary: the readable deep teal. The cyan fill is applied to the primary button only. */
  --primary-main: #137274;
  --primary-main-hover: #0f6365;
  --primary-main-active: #0b5557;
  --primary-main-line: #0b4f51;
  --primary-on-main: #fff;
  --primary-container: #e8fafb;
  --primary-container-hover: #d3f6f6;
  --primary-container-active: #bfeff0;
  --primary-container-line: #8fd9db;
  --primary-on-container: #0b4f51;

  /* Secondary: neutral paper. */
  --sec-main: #545864;
  --sec-main-hover: #484c57;
  --sec-main-active: #3c3f49;
  --sec-main-line: #30333b;
  --sec-on-main: #fff;
  --sec-container: #ecebe5;
  --sec-container-hover: #e3e2dc;
  --sec-container-active: #d9d8d1;
  --sec-container-line: #c7c9c4;
  --sec-on-container: #0a0b0e;
  --success-main: #17693f;
  --success-main-hover: #135a36;
  --success-main-active: #0f4c2d;
  --success-main-line: #0c4027;
  --success-on-main: #fff;
  --success-container: #e6f6ec;
  --success-container-hover: #d8f0e1;
  --success-container-active: #c9e9d5;
  --success-container-line: #a8d9bb;
  --success-on-container: #0f4a2c;
  --warn-main: #825200;
  --warn-main-hover: #704700;
  --warn-main-active: #5f3c00;
  --warn-main-line: #523400;
  --warn-on-main: #fff;
  --warn-container: #fff4db;
  --warn-container-hover: #ffedc4;
  --warn-container-active: #fde5ad;
  --warn-container-line: #f0cf85;
  --warn-on-container: #5c3a00;
  --crit-main: #b8293c;
  --crit-main-hover: #a32334;
  --crit-main-active: #8f1e2d;
  --crit-main-line: #7f1a28;
  --crit-on-main: #fff;
  --crit-container: #ffe7ea;
  --crit-container-hover: #ffd9de;
  --crit-container-active: #fcc9cf;
  --crit-container-line: #f2a3ad;
  --crit-on-container: #8a1c2b;
  --focus-ring: #137274;
  --shadow-color: rgb(27 29 34 / 12%);
  --overlay: rgb(10 11 14 / 42%);

  /* Brand-only tokens. */
  --nq-primary: #73f4f6;
  --nq-primary-hover: #8ef7f8;
  --nq-primary-ink: #04131a;
  --nq-extrude: #1b1d22;
  --nq-line-strong: #c7c9c4;
  --nq-accent-strong: #2bbdbf;
  --nq-grid: rgb(27 29 34 / 5%);
  --nq-grid-hero: rgb(27 29 34 / 7%);

  /* Identity: name colours and avatar plates share a slot per sender. */
  --mx-uc-1: #137274;
  --mx-uc-2: #825200;
  --mx-uc-3: #17693f;
  --mx-uc-4: #b8293c;
  --mx-uc-5: #6247c4;
  --mx-uc-6: #1f5fa8;
  --mx-uc-7: #545864;
  --mx-uc-8: #a3337a;
  --avatar-plate-1: #c4f7f8;
  --avatar-plate-2: #fbe6b5;
  --avatar-plate-3: #cdeedb;
  --avatar-plate-4: #fdd6d0;
  --avatar-plate-5: #e2dcfb;
  --avatar-plate-6: #d3e3f8;
  --avatar-plate-7: #e3e4df;
  --avatar-plate-8: #f8d6ea;
  --avatar-identity-on-plate: #1b1d22;
}

/* ───────────────────────── Dark palette ─────────────────────────
 * Same two selectors as styles.css: follow the system unless .light is pinned, and a pinned .dark
 * always wins. Kept in one custom-property block so both selectors share it. */

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg-container: #0e1014;
    --bg-container-hover: #161920;
    --bg-container-active: #1d2027;
    --bg-container-line: #2a2e38;
    --bg-on-container: #f4f5f1;
    --surface-container: #14161b;
    --surface-container-hover: #1d2027;
    --surface-container-active: #262a33;
    --surface-container-line: #2a2e38;
    --surface-on-container: #f4f5f1;
    --surface-var-container: #0b0c0f;
    --surface-var-container-hover: #14161b;
    --surface-var-container-active: #1d2027;
    --surface-var-container-line: #424855;
    --surface-var-on-container: #b7bcc6;
    --primary-main: #73f4f6;
    --primary-main-hover: #8ef7f8;
    --primary-main-active: #b5f9fa;
    --primary-main-line: #2bbdbf;
    --primary-on-main: #04131a;
    --primary-container: #102427;
    --primary-container-hover: #142e31;
    --primary-container-active: #19393c;
    --primary-container-line: #255658;
    --primary-on-container: #b5f9fa;
    --sec-main: #8a90a2;
    --sec-main-hover: #a0a6b6;
    --sec-main-active: #b7bcc6;
    --sec-main-line: #c9cdd5;
    --sec-on-main: #0b0c0f;
    --sec-container: #1d2027;
    --sec-container-hover: #262a33;
    --sec-container-active: #2e333d;
    --sec-container-line: #3a404b;
    --sec-on-container: #f4f5f1;
    --success-main: #5fd897;
    --success-main-hover: #7ae0a9;
    --success-main-active: #95e8bb;
    --success-main-line: #2fbf71;
    --success-on-main: #052414;
    --success-container: #10301f;
    --success-container-hover: #133a26;
    --success-container-active: #17452d;
    --success-container-line: #1f5a3b;
    --success-on-container: #c9f2db;
    --warn-main: #f5c542;
    --warn-main-hover: #f7d064;
    --warn-main-active: #f9dc86;
    --warn-main-line: #c99a1f;
    --warn-on-main: #2b2000;
    --warn-container: #2e2610;
    --warn-container-hover: #382e13;
    --warn-container-active: #433716;
    --warn-container-line: #5e4d1d;
    --warn-on-container: #fbe7ae;
    --crit-main: #ff8f7c;
    --crit-main-hover: #ffa596;
    --crit-main-active: #ffbbb0;
    --crit-main-line: #ff6a55;
    --crit-on-main: #3a0d06;
    --crit-container: #351612;
    --crit-container-hover: #401b16;
    --crit-container-active: #4c201a;
    --crit-container-line: #6a2c23;
    --crit-on-container: #ffd9d2;
    --focus-ring: #b5f9fa;
    --shadow-color: rgb(0 0 0 / 50%);
    --overlay: rgb(4 6 9 / 74%);
    --nq-primary: #73f4f6;
    --nq-primary-hover: #8ef7f8;
    --nq-primary-ink: #04131a;
    --nq-extrude: #336d6e;
    --nq-line-strong: #424855;
    --nq-accent-strong: #73f4f6;
    --nq-grid: rgb(255 255 255 / 4.5%);
    --nq-grid-hero: rgb(255 255 255 / 7%);

    /* Identity: name colours and avatar plates share a slot per sender. */
    --mx-uc-1: #73f4f6;
    --mx-uc-2: #f5c542;
    --mx-uc-3: #5fd897;
    --mx-uc-4: #ff8f7c;
    --mx-uc-5: #b9a7ff;
    --mx-uc-6: #8ab8ff;
    --mx-uc-7: #b7bcc6;
    --mx-uc-8: #f29ad0;
    --avatar-plate-1: var(--mx-uc-1);
    --avatar-plate-2: var(--mx-uc-2);
    --avatar-plate-3: var(--mx-uc-3);
    --avatar-plate-4: var(--mx-uc-4);
    --avatar-plate-5: var(--mx-uc-5);
    --avatar-plate-6: var(--mx-uc-6);
    --avatar-plate-7: var(--mx-uc-7);
    --avatar-plate-8: var(--mx-uc-8);
    --avatar-identity-on-plate: #04131a;
  }
}

:root.dark {
  --bg-container: #0e1014;
  --bg-container-hover: #161920;
  --bg-container-active: #1d2027;
  --bg-container-line: #2a2e38;
  --bg-on-container: #f4f5f1;
  --surface-container: #14161b;
  --surface-container-hover: #1d2027;
  --surface-container-active: #262a33;
  --surface-container-line: #2a2e38;
  --surface-on-container: #f4f5f1;
  --surface-var-container: #0b0c0f;
  --surface-var-container-hover: #14161b;
  --surface-var-container-active: #1d2027;
  --surface-var-container-line: #424855;
  --surface-var-on-container: #b7bcc6;
  --primary-main: #73f4f6;
  --primary-main-hover: #8ef7f8;
  --primary-main-active: #b5f9fa;
  --primary-main-line: #2bbdbf;
  --primary-on-main: #04131a;
  --primary-container: #102427;
  --primary-container-hover: #142e31;
  --primary-container-active: #19393c;
  --primary-container-line: #255658;
  --primary-on-container: #b5f9fa;
  --sec-main: #8a90a2;
  --sec-main-hover: #a0a6b6;
  --sec-main-active: #b7bcc6;
  --sec-main-line: #c9cdd5;
  --sec-on-main: #0b0c0f;
  --sec-container: #1d2027;
  --sec-container-hover: #262a33;
  --sec-container-active: #2e333d;
  --sec-container-line: #3a404b;
  --sec-on-container: #f4f5f1;
  --success-main: #5fd897;
  --success-main-hover: #7ae0a9;
  --success-main-active: #95e8bb;
  --success-main-line: #2fbf71;
  --success-on-main: #052414;
  --success-container: #10301f;
  --success-container-hover: #133a26;
  --success-container-active: #17452d;
  --success-container-line: #1f5a3b;
  --success-on-container: #c9f2db;
  --warn-main: #f5c542;
  --warn-main-hover: #f7d064;
  --warn-main-active: #f9dc86;
  --warn-main-line: #c99a1f;
  --warn-on-main: #2b2000;
  --warn-container: #2e2610;
  --warn-container-hover: #382e13;
  --warn-container-active: #433716;
  --warn-container-line: #5e4d1d;
  --warn-on-container: #fbe7ae;
  --crit-main: #ff8f7c;
  --crit-main-hover: #ffa596;
  --crit-main-active: #ffbbb0;
  --crit-main-line: #ff6a55;
  --crit-on-main: #3a0d06;
  --crit-container: #351612;
  --crit-container-hover: #401b16;
  --crit-container-active: #4c201a;
  --crit-container-line: #6a2c23;
  --crit-on-container: #ffd9d2;
  --focus-ring: #b5f9fa;
  --shadow-color: rgb(0 0 0 / 50%);
  --overlay: rgb(4 6 9 / 74%);
  --nq-primary: #73f4f6;
  --nq-primary-hover: #8ef7f8;
  --nq-primary-ink: #04131a;
  --nq-extrude: #336d6e;
  --nq-line-strong: #424855;
  --nq-accent-strong: #73f4f6;
  --nq-grid: rgb(255 255 255 / 4.5%);
  --nq-grid-hero: rgb(255 255 255 / 7%);

  /* Identity: name colours and avatar plates share a slot per sender. */
  --mx-uc-1: #73f4f6;
  --mx-uc-2: #f5c542;
  --mx-uc-3: #5fd897;
  --mx-uc-4: #ff8f7c;
  --mx-uc-5: #b9a7ff;
  --mx-uc-6: #8ab8ff;
  --mx-uc-7: #b7bcc6;
  --mx-uc-8: #f29ad0;
  --avatar-plate-1: var(--mx-uc-1);
  --avatar-plate-2: var(--mx-uc-2);
  --avatar-plate-3: var(--mx-uc-3);
  --avatar-plate-4: var(--mx-uc-4);
  --avatar-plate-5: var(--mx-uc-5);
  --avatar-plate-6: var(--mx-uc-6);
  --avatar-plate-7: var(--mx-uc-7);
  --avatar-plate-8: var(--mx-uc-8);
  --avatar-identity-on-plate: #04131a;
}

/* ───────────────────────── System tokens ───────────────────────── */

:root {
  --font-family-base: 'NQ Inter', 'Inter', var(--font-family-emoji), ui-sans-serif, system-ui, sans-serif;
  --font-family-mono-base: 'NQ JetBrains Mono', 'JetBrains Mono', ui-monospace, monospace;
  --nq-font-head: 'NQ Sora', 'Sora', 'NQ Inter', ui-sans-serif, system-ui, sans-serif;

  /* Controls 6px, panels 8px, dialogs 12px, badges are pills (DESIGN rule 3 of the Forgejo theme).
     Places (spaces, rooms, rail tiles) take the corner of the Numoteq mark; people are round. */
  --radii-300: 6px;
  --radii-400: 8px;
  --radii-500: 12px;
  --radius: 6px;
  --radius-outer: 8px;
  --radius-inner: var(--radius);
  --nq-radius-dialog: 12px;
  --nq-radius-tile: 26%;

  /* Menus and dialogs: a soft hard-offset in the line colour plus a quiet drop. Applied to those
     surfaces only; Sable's shared float and dialog shadows also sit under media, call tiles,
     drawers and sheets, which stay soft. */
  --nq-shadow-pop: 4px 4px 0 var(--surface-container-line), 0 14px 36px -12px var(--shadow-color);
  --nq-shadow-dialog: 6px 6px 0 var(--nq-line-strong), 0 28px 70px -24px var(--shadow-color);

  /* Type scale for the brand roles: mono eyebrows, Sora titles. */
  --nq-eyebrow-size: 11px;
  --nq-eyebrow-tracking: 0.08em;
  --nq-meta-size: 11px;
  --nq-title-size: 22px;
  --nq-hero-size: 28px;
  --nq-grid-size: 56px;
  --nq-grid-lines:
    linear-gradient(var(--nq-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nq-grid) 1px, transparent 1px);
  --nq-grid-hero-lines:
    linear-gradient(var(--nq-grid-hero) 1px, transparent 1px),
    linear-gradient(90deg, var(--nq-grid-hero) 1px, transparent 1px);

  /* Discord-scale reading sizes: 16px messages, 15px controls, 20px headings. */
  --font-size-label: calc(0.9375rem * var(--text-scale));
  --font-size-body: calc(1rem * var(--text-scale));
  --font-size-subheading: calc(1.0625rem * var(--text-scale));
  --font-size-heading: calc(1.25rem * var(--text-scale));

  /* A solid 2px ring, as in the Forgejo and Redmine themes; high contrast still widens it. */
  --focus-ring-width: 2px;

  /* Inter reads a little larger than Nunito at the same size. */
  --font-weight-medium: var(--font-weight-500);
}

body {
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
}

/* ───────────────────────── Components ───────────────────────── */

/* Sora carries headings: page and panel titles, dialog titles, the room name. */
:is(h1, h2, h3, .panel-header .title, [data-dialog-title], [data-alert-dialog-title]) {
  font-family: var(--nq-font-head);
  font-weight: var(--font-weight-600);
  letter-spacing: -0.015em;
}

::selection {
  background: color-mix(in srgb, var(--nq-primary) 38%, transparent);
  color: inherit;
}

html .menu-surface {
  --radius-outer: var(--radii-400);

  box-shadow: var(--nq-shadow-pop);
}

@media (width >= 42rem) {
  html .dialog-content-verification {
    box-shadow: var(--nq-shadow-dialog);
  }
}

@media (width >= 48rem) and (not ((height < 30rem) and (pointer: coarse))) {
  html .dialog-content-settings {
    box-shadow: var(--nq-shadow-dialog);
  }
}

/* The one raised action: cyan fill, ink text, hard offset; it lifts on hover. */
html .btn-primary {
  --button-container: var(--nq-primary);
  --button-container-hover: var(--nq-primary-hover);
  --button-container-active: var(--nq-primary);
  --button-line: var(--nq-extrude);
  --button-on-container: var(--nq-primary-ink);

  box-shadow: 2px 2px 0 var(--nq-extrude);
}

html .btn-primary:is(:disabled, [aria-disabled='true']) {
  --button-container: var(--sec-container);
  --button-line: var(--sec-container-line);
  --button-on-container: var(--sec-on-container);

  box-shadow: none;
}

html .btn-primary:is(:hover, :focus-visible):not(:disabled, [aria-disabled='true']) {
  box-shadow: 3px 3px 0 var(--nq-extrude);
}

html .btn-primary:active:not(:disabled, [aria-disabled='true']) {
  box-shadow: 1px 1px 0 var(--nq-extrude);
}

/* Sign-in offers several primary buttons at once. The first method stays the raised action; the
   methods revealed under "More ways to sign in" read as secondary beside it. */
html .login-method ~ .login-method .btn-primary {
  --button-container: var(--sec-container);
  --button-container-hover: var(--sec-container-hover);
  --button-container-active: var(--sec-container-active);
  --button-line: var(--sec-container-line);
  --button-on-container: var(--sec-on-container);
}

html .login-method ~ .login-method .btn-primary:is(*, :hover, :focus-visible, :active) {
  box-shadow: none;
}

/* ───────────────────────── Brand roles ─────────────────────────
 * The rules that make the Forgejo and Redmine themes read as Numoteq: Sora titles, mono eyebrows,
 * mono identifiers, the grid in the margins, and an accent marker instead of a filled selection. */

/* Titles at the scale of the Forgejo page title. */
html .room-nav .room-nav-header h2 {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-700);
  letter-spacing: -0.03em;
}

html .room-header .room-identity h1 {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-700);
  letter-spacing: -0.025em;
}

html .app-page-shell .app-page-header h1 {
  font-size: var(--nq-title-size);
  letter-spacing: -0.03em;
}

html .home-page .hero h1,
html .lobby .hero :is(h1, h2),
html .auth-page .auth-heading h1 {
  font-size: var(--nq-hero-size);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

/* Eyebrows: section and group labels, field labels, the day divider. */
html .room-nav .rooms-heading-label,
html .settings-nav .settings-nav-group-label {
  color: var(--surface-var-on-container);
}

html .date-divider span {
  color: var(--primary-main);
}

html .room-nav .rooms-heading-label,
html .members-drawer .group-label,
html .date-divider span,
html .settings-nav .settings-nav-group-label,
html .form-field .label,
html label.caption,
html fieldset.group > legend,
html .field-grid .color-setting > span {
  font-family: var(--font-family-mono);
  font-size: var(--nq-eyebrow-size);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--nq-eyebrow-tracking);
  text-transform: uppercase;
}

/* Identifiers and times are mono, in their own case. */
html :is(.window-rows time, .message-details .via) {
  font-family: var(--font-family-mono);
  font-size: var(--nq-meta-size);
  letter-spacing: 0;
}

/* Side navigation: no fill on the current item, only the accent marker. */
html .room-nav :is(.room-row, .nav-action)[aria-current='page'],
html .settings-nav .settings-nav-item[aria-current='page'] {
  --room-icon-plate: transparent;

  background: transparent;
  font-weight: var(--font-weight-600);
  position: relative;
}

html .room-nav :is(.room-row, .nav-action)[aria-current='page']:hover,
html .settings-nav .settings-nav-item[aria-current='page']:hover {
  background: var(--bg-container-hover);
}

html .room-nav :is(.room-row, .nav-action)[aria-current='page']::before,
html .settings-nav .settings-nav-item[aria-current='page']::before {
  background: var(--primary-main);
  border-radius: var(--radius-pill);
  content: '';
  inset-block: 22%;
  inset-inline-start: 0;
  position: absolute;
  width: 3px;
}

/* The marker is enough; Sable's ring around the current room's icon is dropped. */
html .room-nav .room-row[aria-current='page'] .room-avatar-icon::after {
  box-shadow: none;
}

/* Segmented switches: the chosen option is solid accent with ink text, flat. */
html .switcher .switcher-thumb {
  background: var(--nq-primary);
  box-shadow: none;
}

html .switcher .switcher-option:has(input:checked) {
  color: var(--nq-primary-ink);
}

/* The grid lives in the margins: behind sign-in and setup, and fading out of the home and lobby
   heroes. Message content never sits on it. */
html .auth-page {
  background-color: var(--bg-container);
  background-image: var(--nq-grid-lines);
  background-position: center top;
  background-size: var(--nq-grid-size) var(--nq-grid-size);
}

html :is(.home-page .hero, .lobby .hero) {
  isolation: isolate;
  position: relative;
}

html :is(.home-page .hero, .lobby .hero)::before {
  background-image: var(--nq-grid-hero-lines);
  background-position: center top;
  background-size: var(--nq-grid-size) var(--nq-grid-size);
  content: '';
  inset: calc(var(--space-700) * -1) 0 0;
  mask-image: radial-gradient(ellipse 55% 85% at 50% 30%, #000 25%, transparent 80%);
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

/* People are round; places take the corner of the Numoteq mark. */
html .avatar-root[data-avatar-kind='person'],
html .quick-tool .avatar-root {
  border-radius: var(--radii-round);
}

html .avatar-root[data-avatar-kind='place'],
html .rail .rail-item,
html .quick-tool.nav-tab,
html .rail .avatar-root {
  border-radius: var(--nq-radius-tile);
}

/* ───────────────────────── Punch ─────────────────────────
 * The moves that give the Forgejo theme its presence, carried into the chat: the brand tile at the
 * top of the rail, page-scale Sora, and the accent on the signals
 * that matter (mentions, the day, the unread count, the field you are typing in). */

/* The brand tile: the top rail item (home) carries the Numoteq mark, like the N in Forgejo. */
html .rail-stack:first-of-type > li:first-child .rail-item {
  background: url('./mark-tile.svg') center / 100% 100% no-repeat;
  border-color: transparent;
}

html .rail-stack:first-of-type > li:first-child .icon {
  opacity: 0;
}

html .rail-stack:first-of-type > li:first-child .rail-item::after {
  background: var(--nq-primary-ink);
}

html .rail-stack:first-of-type > li:first-child .rail-item:hover::after {
  opacity: 0.12;
}

/* Who said it reads first: Sora names and a larger avatar. */
html .message .sender-identity-name {
  font-family: var(--nq-font-head);
  font-weight: var(--font-weight-600);
  letter-spacing: -0.01em;
}

html .message .message-avatar {
  --avatar-size: 2.5rem;
}

html .avatar-root .avatar-fallback {
  font-family: var(--nq-font-head);
  font-weight: var(--font-weight-700);
}

/* Signals in the accent. */
html .message .formatted-body a[data-matrix-link],
html .message .formatted-body [data-mx-room-mention] {
  background: var(--primary-container);
  border-color: var(--primary-container-line);
  color: var(--primary-on-container);
  font-weight: var(--font-weight-600);
}

html .room-nav .unread-badge-dot {
  background-color: var(--bg-on-container);
}

html .unread-badge.unread-badge-highlight {
  background: var(--nq-primary);
  color: var(--nq-primary-ink);
}

html .room-view .composer {
  border-radius: var(--radii-400);
}

html .room-view .composer:focus-within {
  border-color: var(--primary-main);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nq-accent-strong) 24%, transparent);
}

/* ───────────────────────── Click-through fixes ───────────────────────── */

/* Destructive actions are an outline in the danger colour, filled only while pressed or hovered. */
html .btn-danger:not(.icon-button) {
  --button-container: transparent;
  --button-container-hover: var(--crit-container);
  --button-container-active: var(--crit-container-hover);
  --button-on-container: var(--crit-main);

  box-shadow: inset 0 0 0 var(--border-width) var(--crit-main);
}

/* A chosen option (option cards, own reactions, chips) is a neutral surface with the accent edge;
   the pale accent wash is not a state. */
html .choice.choice:is([aria-selected='true'], [aria-pressed='true'], [data-state='checked'], [data-selected='true']),
html .choice.choice:is([aria-selected='true'], [aria-pressed='true'], [data-state='checked'], [data-selected='true']):hover {
  background: var(--surface-container-active);
  border-color: var(--primary-main);
  color: inherit;
}

/* Section headings inside settings read as headings, not as disabled text. */
html .settings-section-heading .settings-section-title h2 {
  color: var(--bg-on-container);
  font-size: var(--font-size-subheading);
  letter-spacing: -0.01em;
}

/* The settings outline tracks the current section with the same accent marker as the nav. */
html .settings-nav .settings-outline::before {
  background: var(--primary-main);
}

/* Links that carry a class still follow the palette instead of the browser blue. */
html a.bookmarks-link,
html a.skip-link {
  color: var(--primary-main);
}

/* Rows in scrolling lists keep their focus ring inside the list. */
html .member-user-list .member-identity-button:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

/* Field labels in the create-room, poll and schedule forms match the other field labels. */
html .field .field-label,
html fieldset.answers > legend,
html .date-time-field-label.date-time-field-label {
  font-family: var(--font-family-mono);
  font-size: var(--nq-eyebrow-size);
  font-weight: var(--font-weight-500);
  letter-spacing: var(--nq-eyebrow-tracking);
  text-transform: uppercase;
}

/* No accent glow behind the room preview. */
html .wrapper .join-container {
  background-image: none;
}

/* Volume above 100% is marked with a quiet hatch, not an alarm red. */
html body .range.range[data-max-range='2'] .slider-track.slider-track,
html body .range.range[data-max-range='2'] .slider-track.slider-track:hover {
  background:
    linear-gradient(to right, var(--surface-container) 50%, transparent 50%),
    repeating-linear-gradient(-45deg, var(--surface-container-line) 0 2px, var(--surface-container) 2px 6px);
}

/* Light: muted timeline and list text keeps 4.5:1. Sable dims it with opacity on top of an already
   muted colour, which falls to 3.3–3.9:1 on paper; the colour alone carries the hierarchy here. */
@media (prefers-color-scheme: light) {
  :root:not(.dark) :is(.member-group, .state .state-event-text, .state .state-text, .state-detail, .rooms-heading, .hit-context) {
    opacity: 1;
  }
}

:root.light :is(.member-group, .state .state-event-text, .state .state-text, .state-detail, .rooms-heading, .hit-context) {
  opacity: 1;
}

/* Dark: identity plates are bright, so a profile cover painted from one is toned down. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) .profile-card-cover:not(.has-banner) {
    box-shadow: inset 0 0 0 100vmax rgb(14 16 20 / 62%);
  }
}

:root.dark .profile-card-cover:not(.has-banner) {
  box-shadow: inset 0 0 0 100vmax rgb(14 16 20 / 62%);
}

/* ───────────────────────── Shape ─────────────────────────
 * One geometry, as in Forgejo and Redmine: people are round, places are the brand tile, controls
 * 6px, panels and menus 8px, dialogs 12px, reactions and badges pills. */

html .rail .nav-tab-side::before {
  border-radius: var(--radius-pill);
}

html .reaction.choice,
html .reactions .add-reaction {
  border-radius: var(--radius-pill);
}

@media (width >= 42rem) {
  html .dialog-content-verification {
    border-radius: var(--nq-radius-dialog);
  }
}

@media (width >= 48rem) and (not ((height < 30rem) and (pointer: coarse))) {
  html .dialog-content-settings {
    border-radius: var(--nq-radius-dialog);
  }
}

html .dialog-content-sheet {
  border-radius: var(--nq-radius-dialog) var(--nq-radius-dialog) 0 0;
}

/* The account block in the sidebar footer: Sora name over the mono Matrix ID, as in the timeline. */
html .account-tool-desktop .account-display-name {
  font-family: var(--nq-font-head);
  letter-spacing: -0.01em;
}

html .account-tool-desktop .account-user-id {
  font-family: var(--font-family-mono);
  font-size: var(--nq-meta-size);
}

/* Footer actions are quiet 32px icons, as in Discord, so the account block gets the width. */
html .desktop-tool-actions .desktop-tool.nav-tab {
  height: var(--control-height-300);
  width: var(--control-height-300);
}

html .desktop-tool-actions .desktop-tool.nav-tab-outlined:not([aria-current='page']) {
  border-color: transparent;
}

html .desktop-tool-actions .desktop-tool.nav-tab-outlined:not([aria-current='page']):hover {
  background: var(--surface-container-hover);
}

/* They stay put on hover: no lift and no hover bar; only the current tool keeps its marker. */
html .desktop-tool-actions .desktop-tool.nav-tab-bottom:hover,
html .desktop-tool-actions .desktop-tool.nav-tab-bottom:hover::after {
  transform: none;
}

html .desktop-tool-actions .desktop-tool.nav-tab-bottom:not([aria-current='page']):hover::before {
  display: none;
}

html .desktop-tool-actions .desktop-tool.nav-tab-bottom[aria-current='page']:hover::before {
  transform: none;
}

/* Deployment overlay: the stock build inlines the Sable mark, so swap it for the Numoteq mark. */
html img.brand-mark {
  content: url('./mark.svg');
}