/*
  mat-render.css - RENDER-LAYER COLOURS FOR THE MAT CHECK-IN SCREEN (R-1024-04)
  ===========================================================================
  Tokens only (--theme-*), no hex: every skin that defines the core Render tokens gets a readable Mat; structure lives in mat.css (the
  Primer). Greyscale first: surfaces, borders and text are the skin's neutrals. The ONLY colour that carries meaning is the semantic
  state colour (--theme-state-healthy = checked in, --theme-state-error = problem, --theme-x-state-info = already in / undone), and each
  of those states also says so in words and a check mark in the markup, so colour is never the only signal.
*/

.bu-mat {
  --mat-line: var(--theme-border-inactive, currentColor);
  --mat-card: var(--theme-bg-card, transparent);
  --mat-ink: var(--theme-text-main, inherit);
  --mat-muted: var(--theme-text-muted, inherit);
  color: var(--mat-ink);
}

.bu-mat-bar {
  border-bottom-color: var(--theme-border-inactive, currentColor);
  background-color: var(--theme-bg-surface, transparent);
  color: var(--theme-text-main, inherit);
}

.bu-mat-classbar,
.bu-mat-classopt,
.bu-mat-tile,
.bu-mat-result {
  background-color: var(--mat-card);
  border-color: var(--mat-line);
  color: var(--mat-ink);
}

.bu-mat-classopt.is-selected {
  border-color: var(--theme-border-active, currentColor);
}

.bu-mat-classopt:disabled {
  color: var(--mat-muted);
}

.bu-mat-hint,
.bu-mat-classtime,
.bu-mat-school {
  color: var(--mat-muted);
}

.bu-mat-avatar {
  background-color: var(--theme-bg-surface, transparent);
  border-color: var(--theme-border-active, currentColor);
  color: var(--mat-ink);
}

.bu-mat-tile:hover,
.bu-mat-result:hover,
.bu-mat-classopt:hover:not(:disabled) {
  border-color: var(--theme-border-active, currentColor);
}

.bu-mat-tile:focus-visible,
.bu-mat-result:focus-visible,
.bu-mat-classopt:focus-visible {
  outline: 3px solid var(--theme-x-focus-ring, currentColor);
  outline-offset: 2px;
}

/* In: the semantic "healthy" state. The word "In" and the check mark are in the markup. */
.bu-mat-tile.is-in,
.bu-mat-result.is-in {
  border-color: var(--theme-state-healthy, currentColor);
  background-color: color-mix(in srgb, var(--theme-state-healthy, transparent) 14%, var(--mat-card));
}

.bu-mat-in {
  color: var(--mat-ink);
}

/* The band: healthy = checked in, info = already in / undone, error = a problem. */
/* The band sticks to the top while the page scrolls under it, so it must be OPAQUE: the canvas colour with the skin's surface tint on top. */
.bu-mat-band {
  background-color: var(--theme-bg-canvas, Canvas);
  background-image: linear-gradient(var(--theme-bg-surface, transparent), var(--theme-bg-surface, transparent));
  border-color: var(--mat-line);
  color: var(--mat-ink);
}

.bu-mat-band[data-kind="done"] {
  border-color: var(--theme-state-healthy, currentColor);
}

.bu-mat-band[data-kind="already"],
.bu-mat-band[data-kind="undone"] {
  border-color: var(--theme-x-state-info, currentColor);
}

.bu-mat-band[data-kind="error"] {
  border-color: var(--theme-state-error, currentColor);
}

/* camera scanner: the viewfinder frame and its notes */
.bu-mat-viewfinder {
  border-color: var(--mat-line);
  background-color: var(--theme-bg-surface, transparent);
}

.bu-mat-note {
  color: var(--mat-ink);
}

/* the phone's one-bar "Scan pass / type code" (the bar only has a border and padding under 600px) */
@media (max-width: 599px) {
  .bu-mat-codearea {
    background-color: var(--mat-card);
    border-color: var(--mat-line);
    color: var(--mat-ink);
  }
}

/* RW-02: a missing waiver is the semantic "risk" state (the words "waiver needed" and the "!" are in the markup, so colour is never alone). */
.bu-mat-trial[data-needs="true"] {
  border-color: var(--theme-state-error, currentColor);
}

.bu-mat-mark {
  color: var(--mat-ink);
}

/* ---- R-1027-15: waiver check / X, the profile card, the progress ring, and the "checked in" glow. Tokens only; words and icons are in the markup. ---- */

.bu-mat-wv--ok { color: var(--theme-state-healthy, inherit); }
.bu-mat-wv--risk { color: var(--theme-state-error, inherit); }

.bu-mat-overlay { background-color: color-mix(in srgb, var(--theme-bg-canvas, Canvas) 78%, transparent); }

.bu-mat-card {
  background-color: var(--theme-bg-canvas, Canvas);
  background-image: linear-gradient(var(--theme-bg-surface, transparent), var(--theme-bg-surface, transparent));
  border-color: var(--theme-border-active, currentColor);
  color: var(--mat-ink, inherit);
}

.bu-mat-attention { border-color: var(--theme-state-warning, currentColor); }
.bu-mat-refusal { border-color: var(--theme-state-error, currentColor); color: var(--theme-state-error, inherit); }
.bu-mat-card .bu-mat-hint, .bu-mat-fact-k { color: var(--theme-text-muted, inherit); }

.bu-mat-ring-track { stroke: var(--theme-border-inactive, rgba(128, 128, 128, 0.45)); }
.bu-mat-ring-fill { stroke: var(--theme-x-state-info, currentColor); stroke-linecap: butt; }
.bu-mat-ring.is-full .bu-mat-ring-fill { stroke: var(--theme-state-healthy, currentColor); }
.bu-mat-ring.is-full + .bu-mat-ring-words { color: var(--theme-state-healthy, inherit); }

/* A checked-in tile glows (drop-shadow follows a clipped shape; box-shadow would be cut). Still glow with no motion; the soft pulse only runs when motion is allowed. */
.bu-mat-tile.is-in,
.bu-mat-result.is-in {
  filter: drop-shadow(0 0 0.5rem var(--theme-state-healthy, currentColor));
}

@media (prefers-reduced-motion: no-preference) {
  .bu-mat-tile.is-in { animation: bu-mat-glow 2.4s ease-in-out infinite; }
}

:root[data-reduced-motion="true"] .bu-mat-tile.is-in { animation: none; }

@keyframes bu-mat-glow {
  0%, 100% { filter: drop-shadow(0 0 0.35rem var(--theme-state-healthy, currentColor)); }
  50% { filter: drop-shadow(0 0 0.8rem var(--theme-state-healthy, currentColor)); }
}

@media (forced-colors: active) {
  .bu-mat-tile.is-in { outline: 3px solid Highlight; filter: none; }
}

/* RW-15: a chosen chip is marked by the check and the border, not by colour alone. */
.bu-mat-chip[aria-pressed="true"] { border-color: var(--theme-border-active, currentColor); font-weight: var(--structure-weight-bold); }
.bu-mat-chip[data-testid="mat-note-needs"][aria-pressed="true"] { border-color: var(--theme-state-warning, currentColor); }
/* R-1027-25: a QR must be dark on light in every skin or phones cannot read it; this is the only fixed colour pair here. */
.bu-mat-joinqr-img { background-color: #fff; }

/* R-1027-20 (2): promotion day card. Skin neutrals only; the state words carry the meaning. */
.bu-mat-promo-card {
  background-color: var(--mat-card);
  border-color: var(--theme-border-active, var(--mat-line));
  color: var(--mat-ink);
}

/* US-219: room checklist item state. The words ("ticked by ...", "not yet") carry the meaning; the border only reinforces it. */
.bu-mat-roomcheck-item { border-color: var(--theme-border, currentColor); }
.bu-mat-roomcheck-item.is-done { border-color: var(--theme-border-active, currentColor); }