/*
  mat.css - THE PRIMER'S MAT CHECK-IN SCREEN (structure only; R-1024-04)
  ===========================================================================
  Layout, sizes, borders and text weight for /mat, the phone / tablet screen staff use at the mat. ZERO colour here: every colour lives
  in mat-render.css (tokens only), so with no Render applied the Mat still reads in greyscale (borders fall back to currentColor).
  Laws kept: 44px minimum targets (tiles are far bigger), 5px radius cap on interactive controls (the avatar is not a control), semantic
  state colours only for "in" / error (mat-render.css), state is always also WORDS plus a check mark, never colour alone.

  Phone first (390px): one column, tiles two across. From 900px (tablet landscape and up) the tap grid takes the left, the name search
  and pass-code box stack on the right so everything is on one screen.
*/

.bu-mat-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bu-mat-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
  padding: var(--structure-gap-sm) var(--structure-gap-md);
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.bu-mat-brand {
  font-weight: var(--structure-weight-bold);
  font-size: var(--structure-text-md);
  white-space: nowrap;
}

.bu-mat-links {
  display: flex;
  align-items: center;
  gap: var(--structure-gap-sm);
  flex-wrap: wrap;   /* R-1031-01: calendar + name corner wrap at 390px instead of overflowing */
  justify-content: flex-end;
}

.bu-mat-links form {
  margin: 0;
}

.bu-mat-links .bu-btn-secondary {
  min-height: var(--structure-touch-min);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding-inline: var(--structure-gap-sm);
}

.bu-mat-main {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--structure-gap-md);
  /* room under the last control for the floating "report a problem" button */
  padding-bottom: 5rem;
  box-sizing: border-box;
}

.bu-mat {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-md);
  min-width: 0;
}

.bu-mat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--structure-gap-sm);
}

.bu-mat-title {
  margin: 0;
  font-size: var(--structure-text-lg);
  line-height: var(--structure-leading-tight);
}

.bu-mat-school {
  margin: 0;
}

.bu-mat-h {
  margin: 0;
  font-size: var(--structure-text-md);
  font-weight: var(--structure-weight-semibold);
}

.bu-mat-h--sub {
  margin-top: var(--structure-gap-md);
  font-size: var(--structure-text-base);
}

.bu-mat-hint {
  margin: 0;
  font-size: var(--structure-text-sm);
}

/* ---- class bar and switcher ---------------------------------------------------------------------------- */

.bu-mat-classbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
  padding: var(--structure-gap-sm) var(--structure-gap-md);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
}

.bu-mat-classinfo {
  min-width: 0;
}

.bu-mat-classname {
  margin: 0;
  font-size: var(--structure-text-md);
  font-weight: var(--structure-weight-semibold);
  overflow-wrap: anywhere;
}

.bu-mat-classtime {
  margin: 0;
}

.bu-mat-phase {
  font-weight: var(--structure-weight-semibold);
  margin-left: var(--structure-gap-xs);
}

.bu-mat-classlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--structure-gap-sm);
}

.bu-mat-classopt {
  width: 100%;
  min-height: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--structure-gap-xs);
  padding: var(--structure-gap-sm) var(--structure-gap-md);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.bu-mat-classopt:disabled {
  cursor: not-allowed;
}

.bu-mat-classopt.is-selected {
  border-width: 2px;
}

/* ---- the result band (last check-in + Undo) ------------------------------------------------------------- */

.bu-mat-band-region {
  position: sticky;
  top: 0;
  z-index: var(--structure-z-rail);
}

.bu-mat-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
  min-height: 3rem;
  padding: var(--structure-gap-sm) var(--structure-gap-md);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  font-weight: var(--structure-weight-semibold);
}

.bu-mat-bandtext {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ---- work area: search, tap grid, code entry ------------------------------------------------------------ */

.bu-mat-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "search"
    "tiles"
    "code";
  gap: var(--structure-gap-md);
  align-items: start;
}

.bu-mat-block {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  min-width: 0;
}

.bu-mat-block--search { grid-area: search; }
.bu-mat-block--tiles { grid-area: tiles; }
.bu-mat-block--code { grid-area: code; }

/* scanner + typed box share the "code" area */
.bu-mat-codearea {
  grid-area: code;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-md);
  min-width: 0;
}

.bu-mat-codearea > .bu-mat-block--code { grid-area: auto; }

.bu-mat-block .bu-field {
  margin: 0;
}

.bu-mat-block .bu-input {
  min-height: 3rem;
  width: 100%;
  box-sizing: border-box;
  font-size: var(--structure-text-base);
}

.bu-mat-gridhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
}

.bu-mat-count {
  font-weight: var(--structure-weight-semibold);
}

.bu-mat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--structure-gap-sm);
}

.bu-mat-grid > li {
  display: flex;
  min-width: 0;
}

.bu-mat-tile {
  width: 100%;
  min-height: 7.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--structure-gap-xs);
  padding: var(--structure-gap-sm);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  font: inherit;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.bu-mat-avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  font-weight: var(--structure-weight-bold);
  font-size: var(--structure-text-base);
}

.bu-mat-name {
  font-size: var(--structure-text-base);
  line-height: var(--structure-leading-tight);
  overflow-wrap: anywhere;
  max-width: 100%;
}

.bu-mat-in {
  font-size: var(--structure-text-sm);
  font-weight: var(--structure-weight-bold);
}

.bu-mat-tile.is-in,
.bu-mat-result.is-in {
  border-width: 3px;
}

/* ---- name search results -------------------------------------------------------------------------------- */

.bu-mat-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--structure-gap-sm);
}

.bu-mat-result {
  width: 100%;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: var(--structure-gap-md);
  padding: var(--structure-gap-sm) var(--structure-gap-md);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-max);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.bu-mat-result .bu-mat-name {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.bu-mat-result .bu-mat-in {
  margin-left: auto;
}

/* ---- code entry ----------------------------------------------------------------------------------------- */

.bu-mat-codeform {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
}

.bu-mat-codeform .bu-btn {
  min-height: 3rem;
  align-self: flex-start;
}

/* ---- camera scanner ------------------------------------------------------------------------------------- */

.bu-mat-viewfinder {
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
}

.bu-mat-viewfinder[hidden] { display: none; }

.bu-mat-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bu-mat-scanactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--structure-gap-sm);
}

.bu-mat-scanactions .bu-btn,
.bu-mat-scanactions .bu-btn-secondary {
  min-height: 3rem;
  padding-inline: var(--structure-gap-md);
}

.bu-mat-note {
  margin: 0;
  font-size: var(--structure-text-sm);
  overflow-wrap: anywhere;
}

.bu-mat-note:empty { display: none; }

/* the picker input is driven by the "Take a photo" button; kept in the layout tree (not display:none) so mobile browsers open it */
.bu-mat-photoinput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---- tablet landscape and up: tap grid left, search + code right ----------------------------------------- */

@media (min-width: 900px) {
  .bu-mat-work {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    /* search and code keep their own height and sit together; the spare height goes to the empty third row */
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "tiles search"
      "tiles code"
      "tiles .";
  }

  .bu-mat-main {
    padding: var(--structure-gap-lg);
  }


  .bu-mat-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  }
}

/* the "Scan pass / type code" bar title: only the phone shows it (it replaces the two block headings there) */
.bu-mat-codetitle { display: none; }

/* ---- phone (under 600px): the pass bar sits right under the class card, tiles are three across ----------- */

@media (max-width: 599px) {
  .bu-mat-work {
    grid-template-areas:
      "code"
      "search"
      "tiles";
    gap: var(--structure-gap-sm);
  }

  .bu-mat {
    gap: var(--structure-gap-sm);
  }

  /* one compact bar: title, the two scan buttons, then the code box and its button on one line */
  .bu-mat-codearea {
    gap: var(--structure-gap-xs);
    padding: var(--structure-gap-sm);
    border-width: 1px;
    border-style: solid;
    border-radius: var(--structure-radius-panel);
  }

  .bu-mat-codetitle { display: block; font-size: var(--structure-text-base); }

  /* the two block headings, hints and the code label give way to the bar title; they stay readable to a screen reader */
  .bu-mat-codearea .bu-mat-block > .bu-mat-h,
  .bu-mat-codearea .bu-field > label,
  .bu-mat-codearea .bu-mat-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .bu-mat-codearea .bu-mat-block { gap: var(--structure-gap-xs); }

  .bu-mat-scanactions .bu-btn,
  .bu-mat-scanactions .bu-btn-secondary {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: var(--structure-gap-sm);
    min-height: var(--structure-touch-min);
  }

  .bu-mat-codeform { flex-direction: row; align-items: flex-start; }
  .bu-mat-codeform .bu-field { flex: 1 1 auto; min-width: 0; }
  .bu-mat-codeform .bu-btn { min-height: 3rem; align-self: flex-start; }

  /* the fixed round "?" report button sits in the bottom-right corner: the tile block keeps that strip free so no tile is ever under it */
  .bu-mat-block--tiles {
    padding-inline-end: calc(var(--structure-touch-min) + var(--structure-gap-sm));
  }

  .bu-mat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--structure-gap-xs);
  }

  .bu-mat-tile {
    min-height: 5.75rem;
    padding: var(--structure-gap-xs);
    border-radius: var(--structure-radius-max);
  }

  .bu-mat-avatar {
    width: 2rem;
    height: 2rem;
    font-size: var(--structure-text-sm);
  }

  .bu-mat-name { font-size: var(--structure-text-sm); }

  .bu-mat-main { padding: var(--structure-gap-sm); padding-bottom: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bu-mat-tile,
  .bu-mat-result {
    transition: none;
  }
}

/* ---- RW-02 / RW-18: first-night trials above the regulars, and the small waiver / photo marks on a tile. Words always carry the meaning. ---- */

.bu-mat-trials {
  margin-bottom: var(--structure-gap-md);
}

.bu-mat-trial {
  cursor: default;
}

.bu-mat-trial-state,
.bu-mat-mark {
  font-size: var(--structure-text-sm);
  font-weight: var(--structure-weight-bold);
  line-height: var(--structure-leading-tight);
}

.bu-mat-mark--quiet {
  font-weight: var(--structure-weight-normal, 400);
}

.bu-mat-trial-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--structure-gap-xs);
}

.bu-mat-trial .bu-btn-secondary {
  min-height: var(--structure-touch-min);
  display: inline-flex;
  align-items: center;
}

.bu-mat-trial-note {
  font-size: var(--structure-text-sm);
}

/* ---- R-1027-15: the profile card a tile opens (structure only; colours in mat-render.css) ---------------------------------------- */

.bu-mat-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--structure-gap-md);
  overflow-y: auto;
}

.bu-mat-card {
  width: 100%;
  max-width: 28rem;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-sm);
  padding: var(--structure-gap-md);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  box-sizing: border-box;
}

.bu-mat-card-title { margin: 0; font-size: var(--structure-text-lg); line-height: var(--structure-leading-tight); overflow-wrap: anywhere; }
.bu-mat-card-sub { margin: 0; }

.bu-mat-attention {
  list-style: none;
  margin: 0;
  padding: var(--structure-gap-xs) var(--structure-gap-sm);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  font-weight: var(--structure-weight-semibold);
}

.bu-mat-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--structure-gap-xs); }
.bu-mat-facts > li { display: grid; grid-template-columns: 1.75rem minmax(5.5rem, 8rem) 1fr; align-items: center; gap: var(--structure-gap-xs); min-height: 2.25rem; }
.bu-mat-fact-k { font-size: var(--structure-text-sm); }
.bu-mat-fact-v { font-weight: var(--structure-weight-semibold); overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--structure-gap-xs); }

.bu-mat-ring { position: relative; flex: none; display: inline-block; width: 2.5rem; height: 2.5rem; }
.bu-mat-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.bu-mat-ring-track, .bu-mat-ring-fill { fill: none; stroke-width: 4; }
.bu-mat-ring-words { font-size: var(--structure-text-sm); font-weight: var(--structure-weight-bold); }

.bu-mat-refusal { margin: 0; font-weight: var(--structure-weight-bold); padding: var(--structure-gap-xs) var(--structure-gap-sm); border-width: 2px; border-style: solid; border-radius: var(--structure-radius-panel); }

.bu-mat-card-actions { display: flex; flex-wrap: wrap; gap: var(--structure-gap-sm); align-items: center; }
.bu-mat-card-actions .bu-btn, .bu-mat-card-actions .bu-btn-secondary { min-height: var(--structure-touch-min); flex: 1 1 8rem; }

.bu-mat-paper { margin-top: var(--structure-gap-sm); }
.bu-mat-paper-list { margin: 0; padding-inline-start: var(--structure-gap-md); font-size: var(--structure-text-sm); }

.bu-mat-wv { font-weight: var(--structure-weight-bold); }

/* Skins may pick the tile shape (circle, square, octagon) with two optional tokens; with none set the tile keeps its look. */
.bu-mat-tile {
  border-radius: var(--theme-x-mat-tile-radius, var(--structure-radius-max));
  clip-path: var(--theme-x-mat-tile-clip, none);
}

/* ---- RW-15 (R-1027-29): tonight's lesson on the class bar, and the quick note on the card (structure only; colours are in mat-render.css) ---- */
.bu-mat-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: var(--structure-gap-sm); padding: var(--structure-gap-xs) var(--structure-gap-md); }
.bu-mat-lesson-text { margin: 0; font-weight: var(--structure-weight-semibold); overflow-wrap: anywhere; flex: 1 1 12rem; }
.bu-mat-lesson-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--structure-gap-sm); width: 100%; }
.bu-mat-lesson-form .bu-input { flex: 1 1 14rem; min-width: 0; }
.bu-mat-lesson-form .bu-btn, .bu-mat-lesson-form .bu-btn-secondary, .bu-mat-lesson .bu-btn-secondary { min-height: var(--structure-touch-min); }
.bu-mat-lesson-label { font-weight: var(--structure-weight-semibold); }
.bu-mat-lesson-form .bu-mat-hint { flex: 1 1 100%; margin: 0; }
.bu-mat-note { display: grid; gap: var(--structure-gap-sm); }
.bu-mat-chips { display: flex; flex-wrap: wrap; gap: var(--structure-gap-sm); }
.bu-mat-chip { min-height: var(--structure-touch-min); flex: 1 1 8rem; border-width: 2px; border-style: solid; }
/* ---- R-1027-25: the join QR the walk-in scans (structure only; the quiet-zone colour is in mat-render.css) ---- */
.bu-mat-joinqr { align-items: center; text-align: center; }
.bu-mat-joinqr-img { width: min(80vw, 24rem); height: auto; padding: var(--structure-gap-sm); border-radius: var(--structure-radius-panel); }

/* ---- R-1027-20 (2): promotion day. One student at a time, one big Award button; the Mat's own bar is hidden so nothing else is on screen. ---- */

.bu-mat-shell:has(.bu-mat[data-mode="promotion"]) > .bu-mat-bar {
  display: none;
}

.bu-mat-promo {
  display: flex;
  flex-direction: column;
  gap: var(--structure-gap-md);
  min-height: 70vh;
}

.bu-mat-promo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--structure-gap-sm);
}

.bu-mat-promo-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--structure-gap-sm);
}

.bu-mat-promo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--structure-gap-md);
  padding: var(--structure-gap-lg) var(--structure-gap-md);
  border-width: 2px;
  border-style: solid;
  border-radius: var(--structure-radius-panel);
  text-align: center;
}

.bu-mat-promo-name {
  margin: 0;
  font-size: var(--structure-text-xl);
  font-weight: var(--structure-weight-bold);
  line-height: var(--structure-leading-tight);
  overflow-wrap: anywhere;
}

.bu-mat-promo-change {
  margin: 0;
  font-size: var(--structure-text-lg);
}

.bu-mat-promo-to {
  font-weight: var(--structure-weight-bold);
}

.bu-mat-promo-style {
  margin: 0;
}

.bu-mat-promo-award {
  width: 100%;
  max-width: 28rem;
  min-height: 5rem;
  font-size: var(--structure-text-xl);
  font-weight: var(--structure-weight-bold);
}

.bu-mat-promo-actions,
.bu-mat-promo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--structure-gap-sm);
}

.bu-mat-promo-foot {
  margin-top: auto;
}

.bu-mat-promo-done {
  margin: 0;
  font-size: var(--structure-text-lg);
  font-weight: var(--structure-weight-semibold);
  text-align: center;
}

/* ---- US-219 (REQ-INCIDENT-002): the pre-class room checklist, one big tap per item (structure only; the state border is in mat-render.css) ---- */
.bu-mat-roomcheck { display: grid; gap: var(--structure-gap-sm); padding: var(--structure-gap-xs) var(--structure-gap-md); }
.bu-mat-roomcheck-title { margin: 0; }
.bu-mat-roomcheck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--structure-gap-sm); }
.bu-mat-roomcheck-item { display: flex; align-items: center; gap: var(--structure-gap-md); width: 100%; min-height: 3.5rem; padding: var(--structure-gap-sm) var(--structure-gap-md); text-align: left; border-width: 2px; border-style: solid; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.bu-mat-roomcheck-box { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-width: 2px; border-style: solid; font-weight: var(--structure-weight-bold); }
.bu-mat-roomcheck-text { flex: 1 1 auto; font-weight: var(--structure-weight-semibold); overflow-wrap: anywhere; }
.bu-mat-roomcheck-state { flex: 0 1 auto; margin: 0; }