/* Hey-Team theme. Tech 4 Sports colours (sky blue #38BDF8, deep navy #0B2545) mapped onto
   Campfire's colour abstractions. Loads after base.css and colors.css, so the :root
   values here win. Keep dark text on sky: white on sky fails contrast (2.1:1).

   Derived from the earlier First Use palette (fu-tokens v1.1.1): each blue keeps its
   lightness and chroma and takes the sky hue (232.7), or the navy hue (255.3) for dark
   surfaces. Dark surfaces keep their old lightness steps above the navy page. pale and
   mist have reduced chroma to stay inside sRGB. Text pairs measured at 4.5:1 or more. */

@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";

  /* Hey-Team palette as OKLCH triplets */
  --brand-sky: 75.35% 0.139 232.7;
  --brand-navy: 26.4% 0.068 255.3;
  --brand-charcoal: 27.41% 0.019 272;
  --brand-ink: 14.48% 0 0;
  --brand-night: var(--brand-navy);
  --brand-deep: 55.74% 0.092 232.7;
  --brand-deep-text: 52.02% 0.085 232.7;
  --brand-pale: 94.84% 0.029 232.7;
  --brand-mist: 98.02% 0.011 232.7;
  --brand-paper: 100% 0 0;
  --brand-muted: 42.39% 0.027 244.3;
  --brand-rule: 87.27% 0.018 223.6;
  --brand-warning: 42.76% 0.102 46;
  --brand-night-surface: 31.91% 0.063 255.3;
  --brand-night-text: 96.48% 0.013 232.7;
  --brand-night-muted: 75.84% 0.031 237.1;
  --brand-night-rule: 42.29% 0.064 255.3;
  --brand-night-warning: 92% 0.05 50;

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

  --color-page: oklch(var(--brand-mist));
  --color-brand: oklch(var(--brand-sky));
  --color-brand-text: oklch(var(--brand-navy));

  @media (prefers-color-scheme: dark) {
    --lch-white: var(--brand-night);
    --lch-black: var(--brand-night-text);
    --lch-gray: var(--brand-night-surface);
    --lch-gray-dark: var(--brand-night-rule);
    --lch-gray-darker: 51.87% 0.055 255.3;
    --lch-blue: var(--brand-sky);
    --lch-blue-light: 36.87% 0.06 255.3;
    --lch-blue-dark: 47.87% 0.08 232.7;

    --color-page: oklch(var(--brand-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: navy on sky, 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-team-lockup {
  display: block;
  inline-size: min(16em, 70vw);
  margin-inline: auto;
}

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

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

/* Footer mark: the same logo in both modes. Its chat interior is white, so it reads on navy. */
#app-logo {
  filter: none;
  opacity: 0.8;

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

/* 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(--brand-muted));
  font-size: 0.9em;

  @media (prefers-color-scheme: dark) { color: oklch(var(--brand-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(--brand-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(--brand-pale));
  border-radius: 999px;
  color: oklch(var(--brand-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(--brand-paper));
  --select-text: oklch(var(--brand-ink));

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

select {
  accent-color: oklch(var(--brand-sky));
  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(--brand-sky));
    outline-offset: 2px;
  }

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

  option:checked,
  option:hover {
    background: oklch(var(--brand-sky)) linear-gradient(oklch(var(--brand-sky)), oklch(var(--brand-sky)));
    color: oklch(var(--brand-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(--brand-sky));
    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(--brand-sky));
    color: oklch(var(--brand-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(--brand-sky));
    color: oklch(var(--brand-ink));
  }

  &:focus-visible {
    outline: 2px solid oklch(var(--brand-sky));
    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(--brand-sky));
  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(--brand-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(--brand-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(--brand-sky));
    color: oklch(var(--brand-ink));
    outline: none;
  }
}

.main-menu__item--current { font-weight: 600; box-shadow: inset 3px 0 0 oklch(var(--brand-sky)); }

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

  .theme-switch { margin: 0; }
}

/* List items. A private chat with a new message shows in bold in the M list. */
.main-menu__item {
  align-items: center;
  display: flex;
  gap: 0.5em;
  justify-content: space-between;
}

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

/* Feedback chats: who reads the message, shown right above the message box */
.feedback-audience {
  background-color: oklch(var(--brand-pale));
  border-radius: 2em;
  color: oklch(var(--brand-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(--brand-sky)); color: oklch(var(--brand-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); }

/* Log out: always visible below the groups, the same size as a group heading */
.main-menu__logout { margin: 0; }
.main-menu__logout-button {
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  inline-size: 100%;
  text-align: start;
}

.main-menu__group-title { font-weight: 600; }

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

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

  a { color: oklch(var(--brand-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(--brand-sky));
  border: 2px solid var(--color-page);
  border-radius: 999px;
  color: oklch(var(--brand-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(--brand-sky));
  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(--brand-sky)); color: oklch(var(--brand-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); }

/* Chat banner list: tap the chat name to go to another team, coach or club chat. */
/* One banner width on every chat: room for 20 characters, so "Coaches and Managers" fits.
   On a phone the banner shrinks to the free space in the bar, and a long name shortens before the arrow. */
.room-switch {
  flex: 0 1 auto;
  /* 20 title characters at about 0.625em each, plus the arrow, the gap and the side padding. */
  inline-size: calc(20 * 0.625em + 3.4em);
  min-inline-size: 0;
  pointer-events: auto;
  position: relative;
}

.room-switch__button {
  box-sizing: border-box;
  cursor: pointer;
  gap: 0.5em;
  inline-size: 100%;
  justify-content: space-between;
  list-style: none;

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

  .room__contents { flex: 1; max-inline-size: none; min-inline-size: 0; text-align: start; }
}

.room-switch__caret {
  border-block-start: 0.4em solid currentColor;
  border-inline: 0.35em solid transparent;
  flex-shrink: 0;
  transition: rotate 150ms ease;

  .room-switch[open] & { rotate: 180deg; }
}

.room-switch__panel { inset-block-start: calc(100% + 0.4em); inset-inline-start: 0; }

/* Feedback items open or start a chat through a form button. They look like the chat links above them. */
.room-switch__action {
  cursor: pointer;
  inline-size: 100%;
  text-align: start;
}
.room-switch--flip .room-switch__panel { inset-block-end: calc(100% + 0.4em); inset-block-start: auto; }

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

.avatar--static { cursor: default; }

/* Readable subtle text. The upstream rule colour is about 1.4:1 on white. */
:root {
  --color-text-subtle: oklch(var(--brand-muted));
  @media (prefers-color-scheme: dark) { --color-text-subtle: oklch(var(--brand-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; }
}

/* Scroll bars: a thin thumb on a transparent track in every browser and in both modes.
   base.css sets this for Chrome only. The webkit rules cover Safari, which ignores scrollbar-color. */
* {
  scrollbar-color: oklch(var(--lch-gray-darker) / 0.7) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar { background: transparent; block-size: 8px; inline-size: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background-color: oklch(var(--lch-gray-darker) / 0.7); border-radius: 999px; }
::-webkit-scrollbar-button { display: none; }

/* Chat pages have no side panel (owner decision 2026-10-30). The Menu sits in the top bar.
   The panel's frame stays in the page, hidden, because its controllers turn the unread channel
   into the events that the bell and the parent's live feedback notice use. */
body.sidebar.panel-hidden {
  --sidebar-width: 0vw;

  #sidebar { display: none; }

  @media (min-width: 100ch) {
    --sidebar-width: 0vw;

    #main-content { margin-inline: 5vw; }
  }

  @media (max-width: 100ch) {
    #nav { padding-inline-end: var(--inline-space); }
  }
}

/* The Menu button in the top bar is a round button with the member's initials (owner request 2026-10-30).
   The word "Menu" stays for screen readers. */
#nav .main-menu__button {
  --btn-padding: 0.25em;

  > span:not(.main-menu__avatar) {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
}

/* F (feedback) and G (guardians): round buttons in the top bar that open a list (owner request 2026-10-30). */
.coord-menu {
  flex-shrink: 0;
  pointer-events: auto;
  position: relative;
}

/* The same colour as the other top bar buttons (owner request 2026-10-30). */
.coord-menu__button {
  aspect-ratio: 1;
  block-size: var(--btn-size);
  cursor: pointer;
  font-weight: 700;
  justify-content: center;
  list-style: none;
  padding: 0;

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

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

/* Phones: the list takes the width of the screen, so it never runs off the edge. */
@media (max-width: 100ch) {
  .coord-menu__panel {
    inline-size: auto;
    inset-block-start: calc(var(--navbar-height) - 0.2em);
    inset-inline: var(--inline-space);
    position: fixed;
  }
}

/* Phones: every button in the chat top bar is one small round size, with small gaps,
   so the chat banner keeps room for its name. */
@media (max-width: 100ch) {
  body.sidebar.panel-hidden #nav {
    --bar-btn: 2rem;

    column-gap: 0.2rem;

    .room-actions { column-gap: 0.2rem; }
    .notifications-slot { margin-inline-start: 0.2rem; }

    /* Only the bar's own buttons: never the buttons inside an open list or dialog, such as "Mark all read". */
    .btn:not(.room--current):not(:is(.main-menu__panel, .notifications__panel, .coord-menu__panel, .room-switch__panel, dialog) *) {
      --btn-padding: 0;

      aspect-ratio: 1;
      block-size: var(--bar-btn);
      inline-size: var(--bar-btn);
      justify-content: center;
      min-inline-size: var(--bar-btn);
    }

    .main-menu__avatar { font-size: 0.75em; }

    .room-switch__button { --btn-padding: 0.25em 0.6em; gap: 0.3em; }
  }
}