/* ============================================================================
   BayRen components — capsules, tablets, groups, and everything a page needs.
   Asaf, 4 September 2026. Requires core/ui/tokens.css, linked before this.

   WHY EVERY CLASS STARTS WITH `br-`
   ---------------------------------
   Eleven surfaces already own classes called .btn, .card, .panel, .pill, .chip,
   .badge, .tabs, .table and .notice, and they do NOT agree with each other. A
   new name space means this file can be copied into every app without changing
   how a single existing page looks. A page adopts the new components when its
   turn comes; nothing breaks on the way. `br-` was checked free estate-wide.

   THE FOUR SHAPES, AND WHAT EACH IS FOR
   -------------------------------------
   Asaf picked four of six mockups. They are not four options — each does what
   the others do badly:

     .br-tablet        a section of content. The default. Use it most.
     .br-tablet--tab   the ONE signature block on a page: the result, the
                       lesson, the thing the reader came for. Once per page.
     .br-capsule--out  dense or secondary areas, where a tint is too much ink.
     .br-group         any list of data: skills, sittings, students, settings.

   COLOUR
   ------
   Nothing here names a hue. Everything reads --tone / --tone-tint / --tone-edge,
   which a .tone-* wrapper sets (see tokens.css). That is what lets a page change
   colour with one word, and it is why adding `background: green` to this file
   would break the whole idea.

   PRINT
   -----
   Browsers do not reliably print background fills, so any meaning carried by a
   fill is lost on paper. Every filled component below has a border-and-text twin
   at the bottom of this file. A student prints their result; it has to survive.
   ============================================================================ */

/* This file is copied into eleven apps whose resets do not agree, so it cannot
   assume a global border-box. Without this, a 100%-wide input plus its padding
   and border pushes the page sideways — which is exactly what happened the
   first time this was rendered. */
[class^="br-"], [class*=" br-"], [class^="br-"]::before, [class^="br-"]::after {
  box-sizing: border-box;
}

/* ── Capsule ────────────────────────────────────────────────────────────────
   A pill. Three weights: solid (a section label), tint (a quiet tag), outline
   (the lightest). */
.br-capsule {
  display: inline-flex; align-items: center; gap: var(--d-s2);
  border-radius: var(--d-r-capsule);
  padding: .22em .7em;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.5;
  background: var(--tone); color: #fff; border: 1px solid transparent;
  white-space: nowrap;
}
.br-capsule--tint { background: var(--tone-tint); color: var(--tone); border-color: var(--tone-edge); }
.br-capsule--out  { background: transparent;      color: var(--tone); border-color: var(--tone); }
.br-capsule--lg   { font-size: .8rem; padding: .3em .85em; }
/* Plain-case capsule, for a name rather than a label. */
.br-capsule--text { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .82rem; }

/* ── Tablet ─────────────────────────────────────────────────────────────────
   The default container. Tinted by its tone; outline and tab are variants. */
.br-tablet {
  background: var(--tone-tint);
  border: 1px solid var(--tone-edge);
  border-radius: var(--d-r-tablet);
  padding: var(--d-s4) var(--d-s5);
  color: var(--d-ink);
}
.br-tablet--plain { background: var(--d-ground); border-color: var(--d-line); }
.br-tablet--out   { background: var(--d-ground); border-color: var(--tone-edge); }
.br-tablet--flat  { box-shadow: none; }
.br-tablet--raised { box-shadow: var(--d-shadow); }

/* The tab tablet: the label notches into the top edge like a folder tab. The
   square top-left corner is what makes the tab read as attached rather than
   floating above. */
.br-tablet--tab {
  position: relative;
  background: var(--d-ground);
  border: 1.5px solid var(--tone);
  border-radius: 0 var(--d-r-tablet) var(--d-r-tablet) var(--d-r-tablet);
  margin-top: 1.15rem;
  padding-top: var(--d-s5);
}
.br-tablet--tab > .br-tablet-tab {
  position: absolute; top: -1.55rem; left: -1.5px;
  display: inline-block;
  background: var(--tone); color: #fff;
  border-radius: var(--d-r-sm) var(--d-r-sm) 0 0;
  padding: .2rem .75rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.br-tablet-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--d-s3); margin-bottom: var(--d-s3);
}
.br-tablet-title {
  font-family: var(--d-font-display); font-weight: 700;
  font-size: 1.2rem; line-height: 1.2; color: var(--d-ink); margin: 0;
}

/* ── Group ──────────────────────────────────────────────────────────────────
   A rounded list with hairline rows. The calmest way to show data, and the
   easiest to read on a phone. */
.br-group {
  background: var(--d-ground);
  border: 1px solid var(--d-line);
  border-radius: var(--d-r-group);
  overflow: hidden;
}
.br-group--tint { background: var(--tone-tint); border-color: var(--tone-edge); }
.br-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--d-s3);
  padding: var(--d-s3) var(--d-s4);
  border-bottom: 1px solid var(--d-line);
  color: var(--d-ink);
}
.br-group--tint .br-row { border-bottom-color: var(--tone-edge); }
.br-row:last-child { border-bottom: 0; }
.br-row-name { display: flex; align-items: center; gap: var(--d-s2); min-width: 0; }
.br-row-value { font-weight: 600; font-variant-numeric: tabular-nums; flex: none; }
.br-row-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--tone); flex: none; }
a.br-row { text-decoration: none; }
a.br-row:hover { background: var(--d-sunken); }
.br-group-label { display: block; margin: 0 0 var(--d-s2) 2px; }

/* ── Buttons ────────────────────────────────────────────────────────────────
   Pill shaped, to match the capsules. Four intents, three sizes. */
.br-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--d-s2);
  border-radius: var(--d-r-capsule);
  padding: .55rem 1.15rem;
  font-family: var(--d-font-body); font-size: .92rem; font-weight: 600;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent;
  background: var(--tone); color: #fff;
  transition: filter var(--d-fast), background var(--d-fast), border-color var(--d-fast);
}
.br-btn:hover { filter: brightness(1.08); }
.br-btn:active { filter: brightness(.95); }
.br-btn--soft  { background: var(--tone-tint); color: var(--tone); border-color: var(--tone-edge); }
.br-btn--ghost { background: transparent; color: var(--tone); border-color: var(--tone); }
.br-btn--quiet { background: transparent; color: var(--d-muted); border-color: var(--d-line); }
.br-btn--danger { background: var(--wrong); color: #fff; }
.br-btn--danger.br-btn--ghost { background: transparent; color: var(--wrong); border-color: var(--wrong); }
.br-btn--sm { font-size: .82rem; padding: .35rem .85rem; }
.br-btn--lg { font-size: 1rem; padding: .75rem 1.6rem; }
.br-btn--block { display: flex; width: 100%; }
.br-btn[disabled], .br-btn.is-disabled {
  opacity: .5; cursor: not-allowed; filter: none; pointer-events: none;
}
.br-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.br-btn.is-loading::after {
  content: ""; position: absolute; width: 1em; height: 1em;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 999px; animation: br-spin .7s linear infinite;
  color: #fff;
}
.br-btn--soft.is-loading::after, .br-btn--ghost.is-loading::after { color: var(--tone); }
@keyframes br-spin { to { transform: rotate(360deg); } }

/* ── Fields ─────────────────────────────────────────────────────────────────
   The focus ring takes the section's tone, which is the one place colour does
   real work rather than decoration. */
.br-field { display: block; margin-bottom: var(--d-s4); }
.br-label {
  display: block; margin-bottom: var(--d-s1);
  font-size: .84rem; font-weight: 600; color: var(--d-ink);
}
.br-input, .br-select, .br-textarea {
  display: block; width: 100%;
  padding: .55rem .8rem;
  font-family: var(--d-font-body); font-size: .95rem; color: var(--d-ink);
  background: var(--d-ground);
  border: 1.5px solid var(--d-line-strong);
  border-radius: var(--d-r-input);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.br-textarea { min-height: 5rem; resize: vertical; }
.br-input:focus, .br-select:focus, .br-textarea:focus {
  outline: none; border-color: var(--tone);
  box-shadow: 0 0 0 3px var(--tone-tint);
}
.br-input::placeholder, .br-textarea::placeholder { color: var(--d-faint); }
.br-input[aria-invalid="true"], .br-textarea[aria-invalid="true"] { border-color: var(--wrong); }
.br-hint { margin: var(--d-s1) 0 0; font-size: .8rem; color: var(--d-muted); }
.br-error { margin: var(--d-s1) 0 0; font-size: .8rem; color: var(--wrong); font-weight: 500; }
.br-check { display: flex; align-items: flex-start; gap: var(--d-s2); font-size: .92rem; }
.br-check input { accent-color: var(--tone); width: 1.05em; height: 1.05em; margin-top: .15em; flex: none; }

/* ── Tabs ───────────────────────────────────────────────────────────────────*/
.br-tabs {
  display: flex; flex-wrap: wrap; gap: var(--d-s2);
  border-bottom: 1px solid var(--d-line);
  padding-bottom: var(--d-s2); margin-bottom: var(--d-s4);
}
.br-tab {
  display: inline-flex; align-items: center; gap: var(--d-s2);
  border-radius: var(--d-r-capsule); padding: .3rem .85rem;
  font-size: .88rem; font-weight: 600; color: var(--d-muted);
  text-decoration: none; border: 1px solid transparent;
}
.br-tab:hover { background: var(--d-sunken); color: var(--d-ink); }
.br-tab.is-on { background: var(--tone-tint); color: var(--tone); border-color: var(--tone-edge); }
.br-tab-count {
  font-size: .74rem; font-weight: 700; background: var(--d-sunken);
  border-radius: 999px; padding: 0 .4em; color: var(--d-muted);
}
.br-tab.is-on .br-tab-count { background: var(--tone); color: #fff; }

/* ── Table ──────────────────────────────────────────────────────────────────
   Sits inside a .br-tablet--plain or on its own. Wide tables scroll in their
   own box so the page never scrolls sideways. */
.br-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.br-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.br-table th {
  text-align: left; font-size: .74rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--d-muted);
  padding: var(--d-s2) var(--d-s3); border-bottom: 1px solid var(--d-line);
  white-space: nowrap;
}
.br-table td {
  padding: var(--d-s3); border-bottom: 1px solid var(--d-line); color: var(--d-ink);
  vertical-align: top;
}
.br-table tr:last-child td { border-bottom: 0; }
.br-table tbody tr:hover { background: var(--d-sunken); }
.br-table .br-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Notice ─────────────────────────────────────────────────────────────────
   Built from the tone, so .tone-warn or .tone-wrong on the wrapper is all a
   notice needs to change meaning. */
.br-notice {
  display: flex; gap: var(--d-s3);
  background: var(--tone-tint); border: 1px solid var(--tone-edge);
  border-left: 3px solid var(--tone);
  border-radius: var(--d-r-sm);
  padding: var(--d-s3) var(--d-s4);
  font-size: .92rem; color: var(--d-ink);
}
.br-notice strong { color: var(--tone); }

/* ── Status pill ────────────────────────────────────────────────────────────
   A SIGNAL, not decoration — it always carries a word, never colour alone. */
.br-status {
  display: inline-flex; align-items: center; gap: .35em;
  border-radius: var(--d-r-capsule); padding: .15em .6em;
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  background: var(--d-sunken); color: var(--d-muted); white-space: nowrap;
}
.br-status--ok      { background: var(--correct-bg); color: var(--correct); }
.br-status--wrong   { background: var(--wrong-bg);   color: var(--wrong); }
.br-status--waiting { background: var(--warn-bg);    color: var(--warn); }
.br-status--info    { background: var(--info-bg);    color: var(--info); }

/* ── Stat tile ──────────────────────────────────────────────────────────────
   A band, a score, a count. The number leads. */
.br-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--d-s3); }
.br-stat {
  background: var(--tone-tint); border: 1px solid var(--tone-edge);
  border-radius: var(--d-r-tablet); padding: var(--d-s3) var(--d-s4);
}
.br-stat-value {
  font-family: var(--d-font-display); font-weight: 700;
  font-size: 1.9rem; line-height: 1; color: var(--tone);
  font-variant-numeric: tabular-nums;
}
.br-stat-label {
  font-size: .74rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--d-muted); margin-top: var(--d-s1);
}

/* ── Nav and sidebar ────────────────────────────────────────────────────────*/
.br-nav { display: flex; flex-direction: column; gap: 2px; }
.br-nav-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--d-faint);
  padding: var(--d-s4) var(--d-s3) var(--d-s1);
}
.br-nav-link {
  display: flex; align-items: center; gap: var(--d-s2);
  padding: .45rem var(--d-s3); border-radius: var(--d-r-capsule);
  font-size: .92rem; font-weight: 500; color: var(--d-muted); text-decoration: none;
}
.br-nav-link:hover { background: var(--d-sunken); color: var(--d-ink); }
.br-nav-link.is-on { background: var(--tone-tint); color: var(--tone); font-weight: 600; }

/* ── Empty state and progress ───────────────────────────────────────────────*/
.br-empty {
  text-align: center; padding: var(--d-s7) var(--d-s4);
  color: var(--d-muted); font-size: .95rem;
}
.br-meter {
  height: 8px; border-radius: 999px; background: var(--d-sunken); overflow: hidden;
}
.br-meter > i { display: block; height: 100%; background: var(--tone); border-radius: 999px; }

/* ── Links and focus ────────────────────────────────────────────────────────*/
.br-link { color: var(--tone); text-decoration: underline; text-underline-offset: .15em; }
.br-link:hover { text-decoration-thickness: 2px; }

/* One visible focus ring for everything, so a keyboard is never lost. */
.br-btn:focus-visible, .br-tab:focus-visible, .br-nav-link:focus-visible,
.br-link:focus-visible, a.br-row:focus-visible, .br-capsule:focus-visible {
  outline: 2px solid var(--tone); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .br-btn, .br-input, .br-select, .br-textarea { transition: none; }
  .br-btn.is-loading::after { animation: none; }
}

/* ── On paper ───────────────────────────────────────────────────────────────
   Browsers do not reliably print background fills, so every meaning carried by
   a fill moves to a border and to text. A student prints their result and shows
   it to an agent; it has to survive the trip. */
@media print {
  .br-tablet, .br-tablet--tab, .br-group, .br-stat, .br-notice {
    background: #fff !important;
    border: 1px solid #b9c2cc !important;
    box-shadow: none !important;
  }
  .br-notice { border-left: 3px solid #6b7889 !important; }
  .br-capsule, .br-capsule--tint, .br-capsule--out {
    background: #fff !important; color: #14283c !important;
    border: 1px solid #6b7889 !important;
  }
  .br-tablet--tab > .br-tablet-tab {
    background: #fff !important; color: #14283c !important;
    border: 1px solid #6b7889 !important; border-bottom: 0 !important;
  }
  .br-status { background: #fff !important; border: 1px solid #6b7889 !important; color: #14283c !important; }
  .br-stat-value { color: #14283c !important; }
  .br-btn, .br-tabs { display: none !important; }
  .br-meter > i { background: #6b7889 !important; }
}