/* Personal mascots: the trigger, the picker sheet, the Suds swap and the
   arrival. Loaded on every page, Bulletin included, which has team.css and no
   site.css, so every value reads the site token, then Bulletin's, then a
   literal. The tokens live on :root and flip with the staff dark theme. */
:root {
  --mascot-paper: var(--color-surface-raised, var(--team-color-surface-raised, #fff));
  --mascot-ink: var(--color-text, var(--team-color-text, #172033));
  --mascot-heading: var(--color-heading, var(--team-color-heading, #102747));
  --mascot-muted: var(--color-muted, var(--team-color-muted, #5f6b7a));
  --mascot-line: var(--color-border, var(--team-color-border, #d8e0ea));
  --mascot-gold: var(--color-accent, var(--team-color-accent, #c9a24d));
  --mascot-gold-deep: var(--color-accent-dark, var(--team-color-accent-dark, #b8902f));
  --mascot-plate: var(--color-plate, var(--team-color-plate, #fff));
  --mascot-cream: #f6efdd;
  /* Text drawn on the light plate keeps light-theme ink in either theme. */
  --mascot-plate-muted: var(--light-muted, #5f6b7a);
  --mascot-focus: var(--color-focus, var(--team-color-focus, #1a3a6b));
  --mascot-focus-navy: var(--focus-on-navy, var(--team-focus-on-navy, #ead9ac));
  --mascot-on-navy: var(--on-navy, var(--team-on-navy, #fff));
  --mascot-on-navy-line: var(--on-navy-line-strong, var(--team-on-navy-line-strong, rgba(255, 255, 255, 0.28)));
  --mascot-on-navy-hover: var(--on-navy-hover, var(--team-on-navy-hover, rgba(255, 255, 255, 0.16)));
  --mascot-display: var(--font-display, var(--team-font-display, inherit));
  --mascot-spring: var(--ease-spring, var(--team-ease-spring, cubic-bezier(0.34, 1.4, 0.64, 1)));
  --mascot-ease-out: var(--ease-out, var(--team-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
  --mascot-target: var(--target, var(--team-target, 44px));
  --mascot-radius: var(--radius-lg, var(--team-radius-lg, 14px));
  --mascot-backdrop: var(--backdrop, var(--team-backdrop, rgba(8, 20, 38, 0.55)));
  --mascot-shadow: var(--shadow-lg, var(--team-shadow-lg, 0 16px 40px rgba(16, 39, 71, 0.14)));
  --mascot-lift: 0 10px 22px -12px rgba(16, 39, 71, 0.38);
}
@media screen {
  /* Fixed-colour art sits on the plate in the dark theme, never on cream. */
  :root[data-theme="dark"] { --mascot-cream: var(--color-plate, var(--team-color-plate, #e9eef5)); }
}

/* --- the trigger ----------------------------------------------------------
   One button, wearing the current mascot's face (lib/mascot-picker.js
   mascotPickerButton, and the static account-menu row in staff-bar). */
.mascot-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--mascot-target);
  padding: 0.25rem 0.85rem 0.25rem 0.3rem;
  border: 1px solid var(--mascot-line);
  border-radius: 999px;
  background: var(--mascot-paper);
  color: var(--mascot-ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.mascot-trigger:hover { border-color: var(--mascot-gold); box-shadow: var(--mascot-lift); }
.mascot-trigger:focus-visible { outline: 3px solid var(--mascot-focus); outline-offset: 3px; }
.mascot-trigger__face {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mascot-cream);
  box-shadow: 0 0 0 2px var(--mascot-gold);
  object-fit: cover;
}
/* Mail paints the face as a background (lib/mascot-presentation.js). */
span.mascot-trigger__face { display: inline-block; background-position: center; background-repeat: no-repeat; background-size: cover; }
/* Two classes: the shared .ico rule sizes every glyph at one class. */
.mascot-trigger .mascot-trigger__swap { flex: none; width: 1rem; height: 1rem; color: var(--mascot-muted); }
.mascot-trigger:hover .mascot-trigger__swap { color: var(--mascot-gold-deep); }

/* On a navy header. */
.mascot-trigger--navy { border-color: var(--mascot-on-navy-line); background: transparent; color: var(--mascot-on-navy); }
.mascot-trigger--navy:hover { background: var(--mascot-on-navy-hover); border-color: var(--mascot-gold); box-shadow: none; }
.mascot-trigger--navy:focus-visible { outline-color: var(--mascot-focus-navy); }
.mascot-trigger--navy .mascot-trigger__swap { color: currentColor; }

/* Only the face, with a gold swap badge; the words stay the accessible name. */
.mascot-trigger--compact {
  justify-content: center;
  flex: none;
  width: var(--mascot-target);
  height: var(--mascot-target);
  min-height: 0;
  padding: 0;
}
.mascot-trigger--compact .mascot-trigger__face { width: 2.25rem; height: 2.25rem; }
.mascot-trigger--compact .mascot-trigger__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.mascot-trigger--compact .mascot-trigger__swap {
  position: absolute;
  right: -0.2rem;
  bottom: -0.2rem;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0.18rem;
  border-radius: 50%;
  background: var(--mascot-gold);
  box-shadow: 0 0 0 2px var(--mascot-paper);
  color: #fff;
}
.mascot-trigger--compact.mascot-trigger--navy .mascot-trigger__swap { box-shadow: 0 0 0 2px var(--color-header, #0e336a); color: #fff; }
/* On the gold badge the glyph stays white, hover or not. */
.mascot-trigger--compact:hover .mascot-trigger__swap { color: #fff; }

/* A settings row: the mascot by name, and the way to change it. */
.mascot-trigger--card {
  display: flex;
  gap: 0.85rem;
  width: 100%;
  max-width: 26rem;
  min-height: 4.25rem;
  padding: 0.6rem 0.9rem 0.6rem 0.6rem;
  border-radius: var(--mascot-radius);
  text-align: start;
  white-space: normal;
}
.mascot-trigger--card .mascot-trigger__face { width: 3rem; height: 3rem; }
.mascot-trigger__text { display: grid; gap: 0.1rem; min-width: 0; }
.mascot-trigger__name { font-family: var(--mascot-display); font-size: 1rem; font-weight: 700; color: var(--mascot-heading); }
.mascot-trigger__hint { color: var(--mascot-muted); font-size: 0.8125rem; font-weight: 500; }
.mascot-trigger--card .mascot-trigger__swap {
  margin-inline-start: auto;
  width: 2rem;
  height: 2rem;
  padding: 0.45rem;
  border-radius: 50%;
  background: var(--mascot-cream);
  color: var(--mascot-gold-deep);
}

/* The account-menu row (partials/staff-bar.html.raw): the face stands where
   the other rows have a glyph, and the current mascot sits at the end. */
.staff-bar .staff-bar__places .mascot-trigger--menu {
  gap: 0.6rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--radius-md, var(--team-radius-md, 10px));
  background: transparent;
  box-shadow: none;
  font-weight: inherit;
}
.mascot-trigger--menu .mascot-trigger__face { width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 1.5px var(--mascot-gold); }
.staff-bar .staff-bar__places .mascot-trigger--menu .mascot-trigger__current {
  margin-inline-start: auto;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--mascot-on-navy);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Where each trigger sits. */
.ask-head > .mascot-trigger { margin-inline-start: auto; }
.staff-dock-ask > .mascot-trigger { align-self: flex-end; margin: 0.35rem 0.8rem 0; }
/* In the Call Center and meeting rails the face mark is the trigger. Two
   classes and a button: conversation-rail.css's .desk-bristle__mark disc
   (padding, plate) is for an image, not this. */
.desk-bristle__head--personal > button.mascot-trigger.desk-bristle__mark {
  width: var(--mascot-target);
  height: var(--mascot-target);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.desk-bristle__head--personal > button.desk-bristle__mark .mascot-trigger__face { width: 2.5rem; height: 2.5rem; }
.mail-agent__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0 0 0.4rem; }
.mail-agent__head > .mail-agent__title { margin: 0; }
.tr-bristle-panel__head > .mascot-trigger { margin-inline-start: auto; }

/* Hidden while an uncached account choice resolves, like the artwork. */
[data-mascot-loading] :is(.mascot-trigger__name, .mascot-trigger__current) { visibility: hidden; }
[data-mascot-loading] [data-mascot-pose], [data-mascot-loading] [data-mascot-background] { visibility: hidden; }

/* --- the sheet --------------------------------------------------------------
   site.css styles every dialog.sheet and loads after this file, so on staff
   and public pages these equal-or-lower specificity rules lose to it. Bulletin
   has no site.css: there they are the sheet. */
dialog.mascot-picker {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 44rem);
  padding: 0;
  border: 0;
  border-radius: var(--mascot-radius);
  background: var(--mascot-paper);
  color: var(--mascot-ink);
  box-shadow: var(--mascot-shadow);
  overflow: hidden;
}
@supports (height: 1dvh) {
  dialog.mascot-picker { max-height: min(90dvh, 44rem); }
}
dialog.sheet.mascot-picker { width: min(36rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
/* The swap plays in place: the sheet's body holds still until it is over. */
:where(dialog.mascot-picker) .sheet__body:has(.mascot-picker__stage.is-revealing) { overflow: hidden; }
dialog.mascot-picker:not([open]) { display: none; }
dialog.mascot-picker::backdrop { background: var(--mascot-backdrop); }
html.sheet-open { overflow: hidden; }
:where(dialog.mascot-picker) .sheet__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--mascot-line);
}
:where(dialog.mascot-picker) .sheet__title { margin: 0; font-family: var(--mascot-display); font-size: 1.25rem; font-weight: 700; color: var(--mascot-heading); }
:where(dialog.mascot-picker) .sheet__title:focus { outline: none; }
:where(dialog.mascot-picker) .sheet__title:focus-visible { outline: 3px solid var(--mascot-gold); outline-offset: 2px; }
:where(dialog.mascot-picker) .sheet__close {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mascot-muted);
  cursor: pointer;
}
:where(dialog.mascot-picker) .sheet__close .ico { width: 1.25rem; height: 1.25rem; }
:where(dialog.mascot-picker) .sheet__close:focus-visible { outline: 3px solid var(--mascot-focus); outline-offset: 2px; }
:where(dialog.mascot-picker) .sheet__body { flex: 1 1 auto; min-height: 0; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; }

.mascot-picker__intro { margin: 0 0 1.15rem; color: var(--mascot-muted); font-size: 0.9rem; line-height: 1.6; }
.mascot-picker__stage { position: relative; }
.mascot-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.mascot-picker__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 11rem;
  padding: 1rem 0.5rem 0.8rem;
  border: 1px solid var(--mascot-line);
  border-radius: 1rem;
  background: var(--mascot-paper);
  color: var(--mascot-ink);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.mascot-picker__card:hover { border-color: var(--mascot-gold); box-shadow: var(--mascot-lift); transform: translateY(-2px); }
.mascot-picker__card[aria-checked="true"] {
  border: 2px solid var(--mascot-gold-deep);
  padding: calc(1rem - 1px) calc(0.5rem - 1px) calc(0.8rem - 1px);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.2);
}
.mascot-picker__card:focus-visible { outline: 3px solid var(--mascot-focus); outline-offset: 4px; }
.mascot-picker__card:disabled { cursor: wait; opacity: 0.6; transform: none; }
.mascot-picker__art {
  display: grid;
  place-items: center;
  width: 5.4rem;
  height: 5.4rem;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--mascot-plate) 0, var(--mascot-cream) 70%);
  box-shadow: inset 0 0 0 1px rgba(16, 39, 71, 0.06);
}
.mascot-picker__art img { width: 100%; height: 100%; object-fit: contain; }
.mascot-picker__name { font-size: 0.93rem; line-height: 1.4; margin-top: 0.15rem; }
.mascot-picker__description { color: var(--mascot-muted); font-size: 0.71rem; line-height: 1.4; max-width: 9rem; }
.mascot-picker__check {
  position: absolute;
  display: grid;
  place-items: center;
  right: 0.5rem;
  top: 0.5rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--mascot-gold-deep);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  opacity: 0;
}
.mascot-picker__card[aria-checked="true"] .mascot-picker__check { opacity: 1; }
.mascot-picker__feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; min-height: 3rem; margin-top: 0.8rem; }
.mascot-picker__status { flex: 1 1 14rem; margin: 0; color: var(--mascot-muted); font-size: 0.82rem; line-height: 1.5; }
.mascot-picker__retry[hidden] { display: none; }

/* --- the Suds swap ----------------------------------------------------------
   lib/mascot-reveal.js animates these; at rest (and without motion) the new
   mascot simply stands on its plate under its name. */
.mascot-reveal {
  position: absolute;
  inset: -0.25rem;
  z-index: 2;
  overflow: hidden;
  border-radius: 1.1rem;
  pointer-events: auto;
}
.mascot-reveal[hidden] { display: none; }
.mascot-reveal__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 78%, rgba(201, 162, 77, 0.24) 0, rgba(201, 162, 77, 0) 46%),
    radial-gradient(circle at 50% 62%, var(--mascot-plate) 0, var(--mascot-cream) 62%, var(--mascot-paper) 100%);
}
.mascot-reveal__foam {
  position: absolute;
  inset-inline: 0;
  bottom: 0.1rem;
  width: 15rem;
  height: 9rem;
  margin-inline: auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 60%, rgba(255, 255, 255, 0.95) 0 22%, transparent 23%),
    radial-gradient(circle at 52% 44%, rgba(255, 255, 255, 0.98) 0 26%, transparent 27%),
    radial-gradient(circle at 72% 62%, rgba(255, 255, 255, 0.92) 0 20%, transparent 21%),
    radial-gradient(circle at 44% 74%, rgba(225, 238, 250, 0.9) 0 24%, transparent 25%),
    radial-gradient(circle at 62% 80%, rgba(214, 233, 248, 0.85) 0 18%, transparent 19%);
  filter: drop-shadow(0 4px 10px rgba(16, 39, 71, 0.12));
  opacity: 0.9;
  transform: scale(1.3, 0.5);
  transform-origin: 50% 100%;
}
.mascot-reveal__figure {
  position: absolute;
  inset-inline: 0;
  bottom: 0.75rem;
  width: auto;
  height: min(15rem, 70%);
  aspect-ratio: 144 / 208;
  margin-inline: auto;
  object-fit: contain;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 10px 12px rgba(16, 39, 71, 0.18));
}
.mascot-reveal__old[hidden] { display: none; }
.mascot-reveal__suds { position: absolute; left: 50%; top: 62%; width: 0; height: 0; }
.mascot-reveal__bubble {
  position: absolute;
  left: -0.625rem;
  top: -0.625rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.98) 0 18%, rgba(214, 233, 248, 0.6) 55%, rgba(160, 200, 235, 0.35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(16, 39, 71, 0.15);
  opacity: 0;
}
.mascot-reveal__name {
  line-height: 1.2;
  position: absolute;
  top: 0.9rem;
  inset-inline: 0;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  padding: 0.15rem 0.75rem;
  border: 2px solid var(--mascot-gold-deep);
  border-radius: 0.5rem;
  background: var(--mascot-paper);
  box-shadow: 0 3px 0 var(--mascot-gold-deep);
  color: var(--mascot-heading);
  font-family: var(--mascot-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.mascot-reveal__caption {
  position: absolute;
  top: 3.85rem;
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 2rem);
  color: var(--mascot-plate-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* --- arrival --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  /* While the sheet celebrates, the page's own mascots wait out of sight, so
     they arrive when it lifts (lib/mascot-picker.js sets the attribute). */
  :root[data-mascot-swapping] :is([data-mascot-pose], [data-mascot-background], .tr-bristle__lift):not(dialog *) { opacity: 0; }
  .mascot-arrive { animation: mascot-arrive 620ms var(--mascot-spring) both; transform-origin: 50% 85%; }
  @keyframes mascot-arrive {
    0% { opacity: 0; scale: 0.4; rotate: 0deg; }
    55% { opacity: 1; scale: 1.12; rotate: -6deg; }
    80% { scale: 0.96; rotate: 4deg; }
    100% { opacity: 1; scale: 1; rotate: 0deg; }
  }
  .mascot-picker__art.is-popping { animation: mascot-card-pop 360ms var(--mascot-spring); }
  @keyframes mascot-card-pop {
    0% { scale: 0.9; }
    60% { scale: 1.08; }
    100% { scale: 1; }
  }
  dialog.mascot-picker[open] { animation: mascot-sheet-in 160ms var(--mascot-ease-out) both; }
  @keyframes mascot-sheet-in {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to { opacity: 1; transform: none; }
  }
  dialog.mascot-picker.is-leaving::backdrop { animation: mascot-backdrop-out 260ms ease-in both; }
  @keyframes mascot-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mascot-trigger:hover .mascot-trigger__face { animation: mascot-trigger-wobble 620ms var(--mascot-spring); }
  .mascot-trigger .mascot-trigger__swap { transition: rotate 320ms var(--mascot-ease-out), color 160ms ease; }
  .mascot-trigger:hover .mascot-trigger__swap { rotate: 180deg; }
  @keyframes mascot-trigger-wobble {
    0% { rotate: 0deg; }
    30% { rotate: -12deg; }
    55% { rotate: 9deg; }
    80% { rotate: -4deg; }
    100% { rotate: 0deg; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mascot-picker__card, .mascot-trigger { transition: none; }
  .mascot-picker__card:hover { transform: none; }
}

/* --- phones ---------------------------------------------------------------- */
@media (max-width: 40rem) {
  dialog.sheet.mascot-picker {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    margin: auto auto 0;
    border-radius: var(--mascot-radius) var(--mascot-radius) 0 0;
  }
  /* The visible viewport, where the engine has it (site.css does the same). */
  @supports (height: 1dvh) {
    dialog.sheet.mascot-picker { max-height: 92dvh; }
  }
}
@media (max-width: 30rem) {
  .mascot-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mascot-picker__card { min-height: 9rem; padding: 0.7rem 0.4rem 0.65rem; }
  .mascot-picker__card[aria-checked="true"] { padding: calc(0.7rem - 1px) calc(0.4rem - 1px) calc(0.65rem - 1px); }
  .mascot-picker__art { width: 4.25rem; height: 4.25rem; }
  .mascot-picker__intro { margin-bottom: 0.8rem; }
  .mascot-picker .sheet__body { padding: 1rem; }
  .mascot-reveal__name { font-size: 1.25rem; }
  /* A chip that folds to its face on a phone, like the compact trigger. */
  .mascot-trigger--fold { justify-content: center; width: var(--mascot-target); height: var(--mascot-target); min-height: 0; padding: 0; }
  .mascot-trigger--fold .mascot-trigger__face { width: 2.25rem; height: 2.25rem; }
  .mascot-trigger--fold .mascot-trigger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mascot-trigger--fold .mascot-trigger__swap,
  .mascot-trigger--fold:hover .mascot-trigger__swap {
    position: absolute; right: -0.2rem; bottom: -0.2rem; width: 1.15rem; height: 1.15rem; padding: 0.18rem;
    border-radius: 50%; background: var(--mascot-gold); box-shadow: 0 0 0 2px var(--mascot-paper); color: #fff;
  }
}