/* Hey Footy theme. First Use brand tokens (fu-tokens v1.1.1, 2026-10-22) mapped onto
   Campfire's colour abstractions. Loads after base.css and colors.css, so the :root
   values here win. Keep ink text on cyan: white on cyan fails contrast. */

@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/Poppins-Regular-6a79411d.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/Poppins-Medium-d4390ad4.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/Poppins-SemiBold-ea01e269.ttf") format("truetype"); }

:root {
  --font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* First Use palette as OKLCH triplets */
  --fu-cyan: 86.64% 0.104 204.7;
  --fu-charcoal: 27.41% 0.019 272;
  --fu-ink: 14.48% 0 0;
  --fu-night: 20.53% 0.051 257.4;
  --fu-deep: 55.74% 0.092 209.6;
  --fu-deep-text: 52.02% 0.085 209.9;
  --fu-pale: 94.84% 0.034 205.8;
  --fu-mist: 98.02% 0.012 203.5;
  --fu-paper: 100% 0 0;
  --fu-muted: 42.39% 0.027 244.3;
  --fu-rule: 87.27% 0.018 223.6;
  --fu-warning: 42.76% 0.102 46;
  --fu-night-surface: 26.04% 0.063 256.8;
  --fu-night-text: 96.48% 0.013 208.8;
  --fu-night-muted: 75.84% 0.031 237.1;
  --fu-night-rule: 36.42% 0.064 251.4;
  --fu-night-warning: 92% 0.05 50;

  /* Campfire tokens, light */
  --lch-white: var(--fu-paper);
  --lch-black: var(--fu-ink);
  --lch-gray: var(--fu-mist);
  --lch-gray-dark: var(--fu-pale);
  --lch-gray-darker: var(--fu-rule);
  --lch-blue: var(--fu-deep-text);
  --lch-blue-light: var(--fu-pale);
  --lch-blue-dark: var(--fu-cyan);
  --lch-orange: var(--fu-warning);

  --color-page: oklch(var(--fu-mist));
  --color-brand: oklch(var(--fu-cyan));
  --color-brand-text: oklch(var(--fu-ink));

  @media (prefers-color-scheme: dark) {
    --lch-white: var(--fu-night);
    --lch-black: var(--fu-night-text);
    --lch-gray: var(--fu-night-surface);
    --lch-gray-dark: var(--fu-night-rule);
    --lch-gray-darker: 46% 0.055 250;
    --lch-blue: var(--fu-cyan);
    --lch-blue-light: 31% 0.06 252;
    --lch-blue-dark: 42% 0.08 230;

    --color-page: oklch(var(--fu-night));
  }
}

html, body {
  background-color: var(--color-page);
}

/* Surfaces stay paper on the mist page */
.panel, #main-content {
  background-color: oklch(var(--lch-white));
}

/* Primary action: ink on cyan, in both modes. Icons stay dark, never inverted. */
.btn--reversed {
  --btn-background: var(--color-brand);
  --btn-color: var(--color-brand-text);
  --hover-filter: brightness(0.92);

  img:not(.avatar) {
    filter: invert(0%);

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

/* Brand lockup on the sign-in page */
.hey-footy-lockup {
  display: block;
  inline-size: min(16em, 70vw);
  margin-inline: auto;
}

.hey-footy-lockup--reverse {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .hey-footy-lockup--light { display: none; }
  .hey-footy-lockup--reverse { display: block; }
}

.hey-footy-byline {
  color: oklch(var(--fu-muted));
  font-size: 0.75em;
  letter-spacing: 0.3em;
  text-transform: uppercase;

  @media (prefers-color-scheme: dark) {
    color: oklch(var(--fu-night-muted));
  }
}

/* Footer mark: charcoal mark on light, white mark on dark */
#app-logo {
  filter: none;
  opacity: 0.8;

  img {
    inline-size: 2.6em;
    block-size: 2.6em;
  }

  .hey-footy-mark--dark { display: none; }

  @media (prefers-color-scheme: dark) {
    .hey-footy-mark--light { display: none; }
    .hey-footy-mark--dark { display: block; }
  }
}

/* Notices at the top of the main column sit below the fixed header, not under it. */
#main-content > p[role="status"] {
  margin-inline: var(--inline-space);

  &:first-child {
    margin-block-start: var(--navbar-height);
  }
}

/* Chat screen: intro line, notices and role chips */
.room-intro {
  border-block-end: 1px solid oklch(var(--lch-gray-dark));
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin: var(--block-space) auto var(--block-space-double);
  max-inline-size: 60ch;
  padding-block-end: var(--block-space);
  text-align: center;
}

.room-intro__title { font-size: 1.1em; }

.room-intro__text, .composer-notice, .room-notice {
  color: oklch(var(--fu-muted));
  font-size: 0.9em;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}

.composer-notice {
  background-color: oklch(var(--lch-gray));
  border-radius: 2em;
  margin: var(--block-space) auto;
  padding: 0.6em 1.2em;
  text-align: center;
}

.room-notice {
  background-color: oklch(var(--fu-warning) / 0.12);
  border-radius: 0.6em;
  margin: var(--navbar-height) var(--inline-space) 0;
  padding: 0.6em 1em;
}

.message__roles {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25em;
}

.role-chip {
  background-color: oklch(var(--fu-pale));
  border-radius: 999px;
  color: oklch(var(--fu-night));
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.6;
  padding: 0 0.6em;
  white-space: nowrap;
}

.app-notice {
  background-color: oklch(var(--lch-gray));
  border-radius: 2em;
  font-size: 0.85em;
  margin: var(--navbar-height) auto 0;
  padding: 0.4em 1em;
  text-align: center;
  width: fit-content;

  & + .app-notice { margin-block-start: var(--block-space-half); }
}

/* Dropdowns. The list fill is one step lighter than the page: paper on mist in
   light mode, night-surface on night in dark mode. color-scheme makes browsers
   that draw their own list (and ignore option colours) draw it dark in dark mode. */
:root {
  --select-fill: oklch(var(--fu-paper));
  --select-text: oklch(var(--fu-ink));

  @media (prefers-color-scheme: dark) {
    --select-fill: oklch(var(--fu-night-surface));
    --select-text: oklch(var(--fu-night-text));
  }
}

select {
  accent-color: oklch(var(--fu-cyan));
  background-color: var(--select-fill);
  color: var(--select-text);
  color-scheme: light;

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

  &:focus-visible {
    outline: 2px solid oklch(var(--fu-cyan));
    outline-offset: 2px;
  }

  option {
    background-color: var(--select-fill);
    color: var(--select-text);
  }

  option:checked,
  option:hover {
    background: oklch(var(--fu-cyan)) linear-gradient(oklch(var(--fu-cyan)), oklch(var(--fu-cyan)));
    color: oklch(var(--fu-ink));
  }
}

/* Browsers with customisable selects get a fully branded list. */
@supports (appearance: base-select) {
  select,
  select::picker(select) {
    appearance: base-select;
  }

  select::picker(select) {
    background-color: var(--select-fill);
    border: 1px solid oklch(var(--fu-cyan));
    border-radius: 0.6em;
    color: var(--select-text);
    margin-block-start: 0.25em;
    padding: 0.25em;
  }

  select option {
    border-radius: 0.4em;
    padding: 0.4em 0.7em;
  }

  select option::checkmark { display: none; }

  select option:is(:hover, :focus-visible, :checked) {
    background: oklch(var(--fu-cyan));
    color: oklch(var(--fu-ink));
  }
}

/* Colour mode switch */
.theme-switch {
  background-color: oklch(var(--lch-gray));
  border: 1px solid oklch(var(--lch-gray-darker));
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}

.theme-switch__option {
  border-radius: 999px;
  color: oklch(var(--lch-black));
  cursor: pointer;
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.35em 0.8em;

  &[aria-pressed="true"] {
    background-color: oklch(var(--fu-cyan));
    color: oklch(var(--fu-ink));
  }

  &:focus-visible {
    outline: 2px solid oklch(var(--fu-cyan));
    outline-offset: 1px;
  }
}

.sidebar__tools .theme-switch { align-self: center; }

/* The one menu */
.main-menu {
  pointer-events: auto;
  position: relative;
}

.main-menu__button {
  --btn-padding: 0.25em 0.9em 0.25em 0.25em;
  list-style: none;

  &::-webkit-details-marker { display: none; }
}

.main-menu__avatar {
  block-size: 2em;
  font-size: 0.8em;
  inline-size: 2em;
}

.main-menu__panel {
  background-color: var(--select-fill);
  border: 1px solid oklch(var(--fu-cyan));
  border-radius: 0.8em;
  box-shadow: 0 0.6em 2em oklch(0% 0 0 / 0.25);
  color: var(--select-text);
  inline-size: min(18em, calc(100vw - 2em));
  max-block-size: min(75dvh, 36em);
  overflow-y: auto;
  padding: 0.5em;
  position: absolute;
  z-index: 10;
}

.main-menu--down .main-menu__panel { inset-block-start: calc(100% + 0.4em); inset-inline-end: 0; }
.main-menu--up .main-menu__panel { inset-block-end: calc(100% + 0.4em); inset-inline-start: 0; }

.main-menu__heading {
  color: oklch(var(--fu-muted));
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin: 0.8em 0.6em 0.3em;
  text-transform: uppercase;

  &:first-child { margin-block-start: 0.3em; }

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}

.main-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;

  form { display: contents; }
}

.main-menu__item {
  border-radius: 0.5em;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  inline-size: 100%;
  padding: 0.45em 0.6em;
  text-align: start;
  text-decoration: none;

  &:hover, &:focus-visible {
    background-color: oklch(var(--fu-cyan));
    color: oklch(var(--fu-ink));
    outline: none;
  }
}

.main-menu__item--current { font-weight: 600; box-shadow: inset 3px 0 0 oklch(var(--fu-cyan)); }
.main-menu__item--quiet { color: oklch(var(--fu-muted)); @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); } }

.main-menu__row {
  align-items: center;
  display: flex;
  gap: 0.6em;
  justify-content: space-between;
  padding: 0.3em 0.6em;

  .theme-switch { margin: 0; }
}

/* Unread dots in the Menu */
.main-menu__item {
  align-items: center;
  display: flex;
  gap: 0.5em;
  justify-content: space-between;
}

.main-menu__dot {
  block-size: 0.55em;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 0.55em;
}

.main-menu__item.unread {
  font-weight: 600;

  .main-menu__dot { background-color: oklch(var(--fu-cyan)); }
}

.main-menu--unread .main-menu__button { position: relative; }

.main-menu--unread .main-menu__button::after {
  background-color: oklch(var(--fu-cyan));
  block-size: 0.7em;
  border: 2px solid var(--color-page);
  border-radius: 50%;
  content: "";
  inline-size: 0.7em;
  inset-block-start: -0.15em;
  inset-inline-end: -0.15em;
  position: absolute;
}

/* Feedback chats: who reads the message, shown right above the message box */
.feedback-audience {
  background-color: oklch(var(--fu-pale));
  border-radius: 2em;
  color: oklch(var(--fu-night));
  font-size: 0.85em;
  margin: 0 auto var(--block-space-half);
  max-inline-size: calc(100% - var(--inline-space) * 2);
  padding: 0.4em 1em;
  text-align: center;
  width: fit-content;
}

/* Menu groups: headings only, tap to open */
.main-menu__group { border-block-end: 1px solid oklch(var(--lch-gray-dark)); }
.main-menu__group:last-child { border-block-end: none; }

.main-menu__group-summary,
.main-menu__group--link {
  align-items: center;
  border-radius: 0.5em;
  color: inherit;
  cursor: pointer;
  display: flex;
  gap: 0.5em;
  justify-content: space-between;
  list-style: none;
  padding: 0.6em;
  text-decoration: none;

  &::-webkit-details-marker { display: none; }
  &:hover, &:focus-visible { background-color: oklch(var(--fu-cyan)); color: oklch(var(--fu-ink)); outline: none; }
}

.main-menu__group-summary::after {
  content: "›";
  font-size: 1.2em;
  line-height: 1;
  transition: transform 150ms ease;
}

.main-menu__group[open] > .main-menu__group-summary::after { transform: rotate(90deg); }

.main-menu__group-text { display: flex; flex-direction: column; }
.main-menu__group-title { font-weight: 600; }
.main-menu__group-sub { font-size: 0.8em; opacity: 0.75; }

.main-menu__count {
  background-color: oklch(var(--lch-gray-dark));
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
  margin-inline-start: 0.3em;
  padding: 0 0.5em;
}

.main-menu__group .main-menu__list { padding: 0 0 0.4em 0.6em; }

.main-menu__group.unread > .main-menu__group-summary .main-menu__dot,
.main-menu__group--link.unread .main-menu__dot { background-color: oklch(var(--fu-cyan)); }
.main-menu__group-summary .main-menu__dot:only-of-type { margin-inline-start: auto; }

/* Parent banner: new feedback for their child */
.app-notice--feedback {
  background-color: oklch(var(--fu-cyan));
  color: oklch(var(--fu-ink));
  font-weight: 600;

  a { color: oklch(var(--fu-ink)); }
}

#feedback_notices:empty { display: none; }

/* Notifications bell */
.notifications-slot { margin-inline-start: var(--inline-space-half); pointer-events: auto; }
#nav:not(:has(.flex-item-justify-end)) .notifications-slot { margin-inline-start: auto; }
.notifications { position: relative; }

.notifications__button {
  list-style: none;
  position: relative;

  &::-webkit-details-marker { display: none; }
}

.notifications__count:empty { display: none; }

.notifications__count {
  background-color: oklch(var(--fu-cyan));
  border: 2px solid var(--color-page);
  border-radius: 999px;
  color: oklch(var(--fu-ink));
  font-size: 0.7em;
  font-weight: 700;
  inset-block-start: -0.4em;
  inset-inline-end: -0.4em;
  line-height: 1.4;
  min-inline-size: 1.5em;
  padding: 0 0.35em;
  position: absolute;
  text-align: center;
}

.notifications__panel {
  background-color: var(--select-fill);
  border: 1px solid oklch(var(--fu-cyan));
  border-radius: 0.8em;
  box-shadow: 0 0.6em 2em oklch(0% 0 0 / 0.25);
  color: var(--select-text);
  inline-size: min(22em, calc(100vw - 2em));
  inset-block-start: calc(100% + 0.4em);
  inset-inline-end: 0;
  max-block-size: min(70dvh, 34em);
  overflow-y: auto;
  padding: 0.5em;
  position: absolute;
  z-index: 10;
}

.notifications__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.3em 0.5em 0.5em;
}

.notifications__clear { --btn-padding: 0.25em 0.8em; font-size: 0.8em; }
.notifications__list { list-style: none; margin: 0; padding: 0; }

.notifications__item {
  border-radius: 0.5em;
  color: inherit;
  display: grid;
  gap: 0.1em;
  padding: 0.5em 0.6em;
  text-decoration: none;

  &:hover, &:focus-visible { background-color: oklch(var(--fu-cyan)); color: oklch(var(--fu-ink)); outline: none; }
}

.notifications__kind { font-size: 0.68em; font-weight: 600; letter-spacing: 0.08em; opacity: 0.7; text-transform: uppercase; }
.notifications__text { font-size: 0.92em; }
.notifications__time { font-size: 0.72em; opacity: 0.7; }
.notifications__empty, .notifications__foot { font-size: 0.85em; margin: 0.5em; opacity: 0.8; text-align: center; }

/* Chat header: one solid bar. Title on the left, actions grouped on the right. */
body.sidebar #nav {
  background-color: oklch(var(--lch-white));
  border-block-end: 1px solid oklch(var(--lch-gray-dark));
  padding-block: 0.55em;

  .room-actions + .notifications-slot { margin-inline-start: 0; }
  .room-actions, .notifications-slot { pointer-events: auto; }
}

body.sidebar #nav .notifications-slot { margin-inline-start: var(--inline-space-half); }

/* The chat intro starts below the bar. */
.room-intro { margin-block-start: calc(var(--navbar-height) + var(--block-space)); }

/* Phones: leave room for the side panel button at the right of the bar. */
@media (max-width: 100ch) {
  body.sidebar #nav { padding-inline-end: calc(var(--btn-size) + var(--inline-space) * 2); }
}
.avatar--static { cursor: default; }

/* Readable subtle text. The upstream rule colour is about 1.4:1 on white. */
:root {
  --color-text-subtle: oklch(var(--fu-muted));
  @media (prefers-color-scheme: dark) { --color-text-subtle: oklch(var(--fu-night-muted)); }
}

/* The report link sits after every reaction. Keep it quiet so the reactions stay the focus. */
.boost__report {
  color: var(--color-text-subtle);
  text-decoration: none;
  &:hover, &:focus-visible { color: var(--color-link, oklch(var(--lch-blue))); text-decoration: underline; }
}

/* Plain pages. Many safeguarding and account pages stack a label and a field inside one
   paragraph. This gives each pair its own line, a gap, and a readable width. */
.panel:not(.admin) {
  > h1 { margin-block: 0 0.6em; }
  > p, form > p { max-inline-size: 42rem; margin-inline: auto; }
  form > p:has(> label + :is(input, select, textarea, .input)) {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    text-align: start;
    label { font-size: 0.9em; font-weight: 600; }
    .input { inline-size: 100%; }
  }
  form > :is(.btn, input[type="submit"]) { margin-block-start: 0.6em; }
}

.report-people {
  border: 1px solid var(--color-border);
  border-radius: 0.8em;
  display: grid;
  gap: 0.5em;
  margin-block: var(--block-space);
  padding: 0.8em 1em;
  legend { font-weight: 600; padding-inline: 0.3em; }
}
.report-people__item { align-items: center; display: flex; gap: 0.6em; cursor: pointer; }
.admin-form__actions { display: flex; justify-content: flex-end; margin-block-start: 0.6em; }

/* The server refuses reactions and edits here, so do not offer the buttons. */
body.posting-blocked :is(.quick-boosts, .message__boost-btn, .message__edit-btn) { display: none; }

/* Alerts stay on screen until closed. Long safeguarding notices need time to read. */
.flash.flash--alert { animation: none; }
.flash__close { font-size: 0.85em; padding: 0.2em 0.7em; }

/* Profile account links: one compact, left-aligned list. */
.profile-links {
  align-self: stretch;
  text-align: start;
  p { margin: 0 0 0.5em; font-size: 0.9em; }
  ul { list-style: none; margin: 0; padding: 0; border-block: 1px solid var(--color-border); }
  li + li { border-block-start: 1px solid var(--color-border); }
  li a { display: block; padding: 0.55em 0.2em; text-decoration: none; }
  li a:hover, li a:focus-visible { text-decoration: underline; }
}