/* Self-hosted variable fonts: Instrument Sans is the UI/body face, JetBrains
   Mono the code face. Propshaft rewrites the relative url() to the digested
   asset, the same mechanism icons.css relies on. The woff2 and their OFL licenses live in
   app/assets/fonts/ (Propshaft auto-adds that dir to the asset load path). */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/instrument-sans-05af7909.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/instrument-sans-italic-af4cd8d9.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/jetbrains-mono-2e704927.woff2") format("woff2");
}

:root {
  --font-family:
    "Instrument Sans", -apple-system, BlinkMacSystemFont, Aptos, Roboto,
    "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monaco, monospace;

  /* Type scale: the .txt-* utilities and the sidebar, nav, message, forum,
     flash, and SaaS components size themselves from these. */
  --font-size-x-small: 0.8rem;
  --font-size-small: 0.85rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.4rem;
  --font-size-x-large: 1.8rem;
  --font-size-xx-large: 2.4rem;

  --hover-color: var(--color-border-darker);
  --hover-size: 0.15em;
  --hover-filter: brightness(1);
}

/* Typeface preference (per-device, set by the typeface controller): "System"
   drops the bundled Instrument Sans and falls back to the platform UI stack.
   Default (attribute absent) keeps the webfont. Mono is unaffected. */
:root[data-typeface="system"] {
  --font-family:
    -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html,
body {
  -webkit-text-size-adjust: none;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: 1.4;
  overflow: initial;
  text-size-adjust: none;
}

/* Instrument Sans tops out at 700. The UA default for these is `bolder`,
   which computes to 900 inside already-bold contexts (message authors,
   sidebar names) and makes the browser synthesize the weight — cap it so
   emphasis always renders real glyphs. */
b,
strong {
  font-weight: 700;
}

/* Browser surfaces carry the design too: text selection, the input caret,
   and native form controls (checkboxes, radios, progress) all take the
   workspace accent instead of shipping UA defaults. */
:root {
  accent-color: var(--color-accent-brand);
  caret-color: var(--color-link);
}

::selection {
  background-color: var(--color-selected-dark);
  color: var(--color-text);
}

/* Links */
:where(a:not([class]):not(:has(img))) {
  color: var(--link-color, var(--color-link));

  @media (hover: hover) and (pointer: fine) {
    &:where(:not(:active):hover) {
      --hover-filter: brightness(1.3);

      filter: var(--hover-filter);
    }
  }
}

:where(button, input, textarea, summary, .input, .btn) {
  --outline-size: min(0.2em, 2px);

  appearance: none;
  border: none;
  background-color: transparent;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  touch-action: manipulation;
  transition:
    box-shadow 150ms ease,
    outline-offset 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease,
    filter 150ms ease;

  /* Hover */
  @media (hover: hover) and (pointer: fine) {
    &:where(:not(:active):hover) {
      filter: var(--hover-filter);
      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
    }
  }

  /* Keyboard navigation */
  &:where(:not(:active)):focus-visible {
    outline-width: var(--outline-size);
    outline-color: var(--outline-color, var(--color-link));
    outline-offset: var(--outline-offset, var(--outline-size));
  }

  /* Pressing */
  &:focus:not(:focus-visible) {
    --outline-offset: 0;
  }

  /* Disabled */
  &:where([disabled]):not(:hover):not(:active) {
    cursor: not-allowed;
    filter: brightness(0.75);
  }
}

/* Turbo */
turbo-frame,
turbo-cable-stream-source {
  display: contents;
}

/* For settings */
fieldset {
  border: 2px solid var(--fieldset-border-color, var(--color-border));
  border-block-end: 0;
  border-inline: 0;
  display: flex;
  flex-direction: column;
  max-inline-size: 50ch;
  padding: var(--block-space) 0;

  &.border {
    border-color: var(--color-border-darker);
    border-style: solid;
    border-width: 1px;
  }
}

legend {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-inline: auto;
  text-align: center;
}

.membership-item:has(.btn.invisible) {
  opacity: 0.5;
}

/* Starred marker in the per-room notification list — mirrors the sidebar's
   starred-first ordering with a small amber flag. */
.membership-item__starred {
  color: var(--color-alert);
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Dialogs */
.dialog {
  --width: 50ch;

  background-color: var(--color-bg);
  margin-inline: var(--inline-space);
  inline-size: var(--width);
  max-inline-size: calc(100dvw - var(--inline-space) * 2);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &::backdrop {
    background-color: oklch(var(--lch-always-black) / 0.5);
  }
}

/* Misc */
menu {
  outline: 0;
}

code {
  background: var(--color-bg);
  border: 1px solid var(--color-border-dark);
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
}

pre {
  background-color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.version-badge {
  border: 1px solid var(--color-border-darker);
  border-radius: 0.3em;
  color: var(--color-border-darker);
  padding: 0.1em var(--inline-space-half);
}

/* PWA install */
.pwa__instructions {
  @media (display-mode: standalone) {
    display: none;
  }
}

.pwa__installer {
  display: none;

  .pwa--can-install & {
    display: block;
  }
}

/* Notification settings */
.notifications-help {
  padding: var(--block-space) var(--inline-space);
  background-color: var(--color-border);
  border-radius: 0.5em;
  border: 1px solid var(--color-border-dark);
  margin-block-end: var(--block-space-half);

  summary {
    --column-gap: var(--inline-space-half);
    --btn-background: transparent;
    --btn-border-radius: 0.5em;
    --btn-border-color: transparent;

    display: flex;
    justify-content: start;
    padding: var(--block-space) var(--inline-space);
    margin: calc(var(--block-space) * -1) calc(var(--inline-space) * -1);
  }

  .disclosure {
    margin-inline-start: auto;
    transition: transform 150ms ease;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    .notifications-help[open] & {
      transform: rotate(90deg);
    }
  }

  img {
    display: inline;
    vertical-align: text-top;

    @media (prefers-color-scheme: dark) {
      filter: invert(100);
    }

    :root[data-theme="light"] & {
      filter: invert(0);
    }

    :root[data-theme="dark"] & {
      filter: invert(100);
    }
  }

  li {
    margin-block: var(--block-space-half);
  }

  em {
    background: var(--color-bg);
    border: 1px solid var(--color-border-darker);
    padding: 0.2em 0.4em;
    border-radius: 0.3em;
    font-style: normal;
    font-size: 0.9em;
  }
}

/* Nicer scrollbars on Chrome 29+. This is intended for Windows machines, but */
/* there's not a way to target Windows using CSS, so Chrome on Mac will have */
/* slightly thinner scrollbars than normal. #C1C1C1 is the default color on Macs. */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  * {
    scrollbar-color: oklch(var(--lch-gray-darker)) transparent;
    scrollbar-width: thin;
  }
}