/* ==========================================================================
   app.crewbyte.io — application shell
   Loaded after base.css.

   Layout model: on phones this is a single column with a fixed top bar and a
   bottom tab bar (thumb reach). From 900px it becomes a two-column shell with
   a persistent dark rail. Nothing reflows content between the two beyond the
   chrome — the same page works at both sizes.
   ========================================================================== */

body.app { background: var(--paper); padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
@media (min-width: 900px) { body.app { padding-bottom: 0; } }

/* ---------------------------------------------------------------- shell */
.shell { min-height: 100vh; }
@media (min-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
  }
}

/* ------------------------------------------------------------- side rail */
.rail {
  display: none;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--ink-900);
  border-right: 1px solid var(--line-dark);
  padding: var(--s5) var(--s4);
  overflow-y: auto;
  flex-direction: column;
}
@media (min-width: 900px) { .rail { display: flex; } }

/* Wordmark sizes. See the .brand note in base.css — the PNG has ~25%
   transparent padding top and bottom, so visible height is about half. */
.rail__brand {
  display: flex;
  align-items: center;
  padding: 0 var(--s2) var(--s5);
  text-decoration: none;
}
.rail__brand .brand__img { height: 38px; }

/* Mobile top bar only; the desktop app bar is light, where this asset
   must not appear. */
.appbar .brand__img { height: 34px; }

.rail__section {
  font-size: .625rem;
  font-weight: 660;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: var(--s5) var(--s2) var(--s2);
}

.rail-link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 9px var(--s3);
  border-radius: var(--r-sm);
  color: rgba(248, 247, 244, .64);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 530;
  transition: background .12s ease, color .12s ease;
}
.rail-link:hover { background: rgba(255, 255, 255, .05); color: #F8F7F4; }
.rail-link.is-active { background: rgba(18, 135, 111, .17); color: #F8F7F4; box-shadow: inset 2px 0 0 var(--accent-on-dark); }
.rail-link__icon { flex: 0 0 18px; opacity: .82; }
.rail-link__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 640;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
}
.rail-link__count--quiet { background: rgba(255,255,255,.12); color: rgba(248,247,244,.72); }

.rail__foot { margin-top: auto; padding-top: var(--s5); border-top: 1px solid var(--line-dark); }

/* ---------------------------------------------------------------- top bar */
.appbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(15, 17, 21, .96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  color: #F8F7F4;
  border-bottom: 1px solid var(--line-dark);
  padding-top: var(--safe-top);
}
.appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: var(--header-h);
  padding-inline: var(--s4);
}
@media (min-width: 900px) {
  .appbar { background: var(--paper-raised); color: var(--ink-900); border-color: var(--line); }
  .appbar__inner { padding-inline: var(--s6); height: 60px; }
  /* The bar goes light here and the rail takes over the branding. The wordmark
     must not survive into this breakpoint — its "byte" half is near-white and
     would disappear. .hide-lg already removes it at 768px; this is a belt-and-
     braces guard in case that class is ever dropped from the markup. */
  .appbar .brand { display: none; }
}

/* Location switcher — the control multi-site operators touch most. */
.loc-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px 10px 6px 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-sm);
  color: inherit;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  max-width: 190px;
}
.loc-switch:hover { background: rgba(255, 255, 255, .13); color: inherit; }
.loc-switch__code {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .07em;
  opacity: .6;
}
@media (min-width: 900px) {
  .loc-switch { background: var(--paper-sunk); border-color: var(--line-strong); }
  .loc-switch:hover { background: var(--paper-deep); }
}

.appbar__date {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .55;
}

/* --------------------------------------------------------- bottom tabbar */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding-bottom: var(--safe-bottom);
}
@media (min-width: 900px) { .tabbar { display: none; } }

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: var(--tabbar-h);
  text-decoration: none;
  color: var(--ink-300);
  font-size: .625rem;
  font-weight: 620;
  letter-spacing: .01em;
  position: relative;
}
.tab.is-active { color: var(--accent-deep); }
.tab.is-active::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
.tab__dot {
  position: absolute;
  top: 8px; right: 50%;
  margin-right: -16px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bad);
  border: 1.5px solid var(--paper-raised);
}

/* ------------------------------------------------------------------ main */
.main { padding: var(--s5) var(--s4) var(--s8); min-width: 0; }
@media (min-width: 900px) { .main { padding: var(--s6) var(--s7) var(--s10); } }

/*
 * Measure, not width. 1060px keeps a single column of text readable, and on a
 * 1080p laptop the rail plus padding uses most of what is left. On genuinely
 * large screens that leaves a lot of empty desk, so the cap opens up — but the
 * extra space goes to a second COLUMN (see .dash below), never to longer lines
 * of prose, which only get harder to read as they get wider.
 */
.main__inner { max-width: 1060px; }
.main__inner--wide { max-width: 1320px; }

@media (min-width: 1400px) {
  .main__inner { max-width: 1240px; }
  .main__inner--wide { max-width: 1520px; }
}
@media (min-width: 1800px) {
  .main { padding-inline: var(--s9); }
  .main__inner { max-width: 1360px; }
  .main__inner--wide { max-width: 1680px; }
}

/* The rail can afford to breathe on a big monitor. */
@media (min-width: 1600px) {
  .shell { grid-template-columns: 268px minmax(0, 1fr); }
  .run-foot { left: 268px; }
  .builder-actions { /* stays full width of the content column */ }
}

/* ------------------------------------------------------- dashboard columns */
.dash { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
.dash__side { display: grid; gap: var(--s6); align-content: start; }

@media (min-width: 760px) {
  /* Tablet and small laptop: the side panels sit two-up rather than stacking
     into a very long scroll. */
  .dash__side { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

@media (min-width: 1200px) {
  .dash {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
    gap: var(--s7);
    align-items: start;
  }
  .dash__side {
    grid-template-columns: minmax(0, 1fr);
    position: sticky;
    top: calc(60px + var(--s6));
  }
}

/* Date scrubber on the checks screen. */
.day-strip {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.day-strip::-webkit-scrollbar { display: none; }
.day {
  flex: 0 0 auto;
  min-width: 58px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  text-align: center;
  text-decoration: none;
  color: var(--ink-400);
}
.day:hover { border-color: var(--ink-300); color: var(--ink-900); }
.day.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.day__dow { font-size: .625rem; font-weight: 660; letter-spacing: .09em; text-transform: uppercase; opacity: .7; }
.day__num { font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 620; letter-spacing: -.03em; }

/* ------------------------------------------------------------- run cards */
/*
 * One column on a phone; two from 1100px, because a checklist card is short
 * and wide and a single column of them on a 27" monitor is mostly whitespace
 * with a lot of scrolling. Kept at one column inside the dashboard's narrower
 * main column, where two would be cramped.
 */
.run-list { display: grid; gap: var(--s2); }
@media (min-width: 1100px) {
  .run-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}
@media (min-width: 1700px) {
  .main__inner--wide .run-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.run-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .14s ease, transform .08s ease;
}
.run-card:hover { border-color: var(--ink-300); color: inherit; }
.run-card:active { transform: scale(.995); }
.run-card--overdue { border-left: 3px solid var(--bad); }
.run-card--due { border-left: 3px solid var(--warn); }
.run-card--done { border-left: 3px solid var(--accent); background: var(--paper-sunk); }

.run-card__body { flex: 1; min-width: 0; }
.run-card__title { font-weight: 620; font-size: .9375rem; letter-spacing: -.012em; color: var(--ink-900); }
.run-card__meta {
  font-size: .8125rem;
  color: var(--ink-300);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.run-card__ring {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 660;
  color: var(--ink-400);
}
.run-card__ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.run-card__ring circle { fill: none; stroke-width: 3.5; }
.run-card__ring .track { stroke: var(--paper-deep); }
.run-card__ring .fill { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .4s ease; }

/* ------------------------------------------------- run execution surface */
.run-header {
  position: sticky;
  top: calc(var(--header-h) + var(--safe-top));
  z-index: 60;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--line);
  margin: calc(var(--s5) * -1) calc(var(--s4) * -1) var(--s5);
  padding: var(--s4);
}
@media (min-width: 900px) {
  .run-header { top: 60px; margin: calc(var(--s6) * -1) calc(var(--s7) * -1) var(--s6); padding: var(--s4) var(--s7); }
}
.run-header__title { font-weight: 660; font-size: 1.0625rem; letter-spacing: -.02em; }
.run-header__meta { font-size: .8125rem; color: var(--ink-300); margin-top: 2px; }

.run-section {
  font-size: .6875rem;
  font-weight: 680;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding: var(--s6) 0 var(--s3);
}

/* A single checklist item, mid-service. Generous target, obvious state. */
.item {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--s3);
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
.item.is-pass { border-color: var(--accent-tint-strong); background: linear-gradient(var(--accent-tint), var(--paper-raised) 46px); }
.item.is-fail { border-color: #EFCEC9; background: linear-gradient(var(--bad-tint), var(--paper-raised) 46px); }
.item.is-na   { opacity: .72; }
.item.is-busy { opacity: .6; pointer-events: none; }
.item.is-critical:not(.is-pass):not(.is-na) { box-shadow: inset 3px 0 0 var(--warn); }

.item__head { display: flex; gap: var(--s3); padding: var(--s4); align-items: flex-start; }
.item__label { font-weight: 570; font-size: .9375rem; line-height: 1.45; color: var(--ink-900); }
.item__guidance { font-size: .8125rem; color: var(--ink-400); line-height: 1.5; margin-top: 4px; }
.item__flags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.item__body { padding: 0 var(--s4) var(--s4); }
.item__answered {
  padding: var(--s2) var(--s4) var(--s4);
  font-size: .75rem;
  color: var(--ink-300);
  font-family: var(--font-mono);
  letter-spacing: -.005em;
}

/* Pass / fail / N/A control. Three big targets, no ambiguity. */
.judge { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s2); }
.judge button {
  min-height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  font-weight: 620;
  font-size: .875rem;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .12s ease;
}
.judge button:hover { border-color: var(--ink-300); }
.judge button[data-state="pass"].is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.judge button[data-state="fail"].is-on { background: var(--bad); border-color: var(--bad); color: #fff; }
.judge button[data-state="na"] { flex: 0 0 auto; padding-inline: var(--s4); color: var(--ink-300); }
.judge button[data-state="na"].is-on { background: var(--ink-600); border-color: var(--ink-600); color: #fff; }

/* Temperature entry: big numeric field with a live in/out-of-range verdict. */
.temp-entry { display: flex; gap: var(--s3); align-items: flex-start; }
.temp-entry .input--num { flex: 1; text-align: center; min-height: 56px; }
.temp-verdict {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 56px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: .6875rem;
  font-weight: 680;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: var(--paper-sunk);
  color: var(--ink-300);
  border: 1px solid var(--line);
  padding: var(--s2);
  line-height: 1.3;
}
.temp-verdict.is-ok  { background: var(--accent-tint); color: var(--accent-dark); border-color: var(--accent-tint-strong); }
.temp-verdict.is-bad { background: var(--bad-tint); color: var(--bad); border-color: #EFCEC9; }
.temp-range { font-size: .75rem; color: var(--ink-300); margin-top: var(--s2); font-family: var(--font-mono); }

/* Photo capture control. */
.photo-drop {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
  cursor: pointer;
  min-height: 60px;
  transition: border-color .14s ease, background .14s ease;
}
.photo-drop:hover { border-color: var(--accent); background: var(--accent-tint); }
.photo-drop input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.photo-drop__text { font-size: .875rem; font-weight: 560; color: var(--ink-500); }
.photo-drop__hint { font-size: .75rem; color: var(--ink-300); }
.photo-drop.has-photo { border-style: solid; border-color: var(--accent); background: var(--accent-tint); }

.photo-thumb {
  width: 46px; height: 46px;
  border-radius: var(--r-xs);
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--paper-deep);
}

/* Sign-off block at the bottom of a run. */
.signoff {
  background: var(--ink-900);
  color: rgba(248, 247, 244, .74);
  border-radius: var(--r-md);
  padding: var(--s5);
  margin-top: var(--s6);
}
.signoff h3 { color: #F8F7F4; font-size: 1.0625rem; margin-bottom: var(--s2); }
.signoff .input, .signoff .textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #F8F7F4;
}
.signoff .input::placeholder { color: rgba(248, 247, 244, .32); }
.signoff .label { color: rgba(248, 247, 244, .62); }
.signoff__blockers {
  background: rgba(178, 58, 44, .18);
  border: 1px solid rgba(228, 104, 90, .34);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font-size: .875rem;
  margin-bottom: var(--s4);
  color: #F3D8D4;
}

/* Sticky progress footer while a run is open. */
.run-foot {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  z-index: 80;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  display: flex;
  align-items: center;
  gap: var(--s4);
}
@media (min-width: 900px) { .run-foot { bottom: 0; left: 236px; padding-inline: var(--s7); } }
.run-foot__count { font-family: var(--font-mono); font-size: .8125rem; font-weight: 620; white-space: nowrap; }

/* ------------------------------------------------------------ builder UI */
.builder-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  margin-bottom: var(--s3);
}
.builder-item__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--paper-sunk);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.builder-item__grip {
  cursor: grab;
  color: var(--ink-200);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
  padding: var(--s1);
}
.builder-item__grip:active { cursor: grabbing; }
.builder-item__n {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 660;
  color: var(--ink-300);
  min-width: 20px;
}
.builder-item__body { padding: var(--s4); }
.builder-item.is-dragging { opacity: .4; }

/* -------------------------------------------------------- data displays */

.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.sparkline i { flex: 1; min-width: 3px; background: var(--accent-tint-strong); border-radius: 1px; }
.sparkline i.hi { background: var(--accent); }
.sparkline i.lo { background: var(--warn); }
.sparkline i.zero { background: var(--paper-deep); }

.trend-legend { display: flex; gap: var(--s4); font-size: .6875rem; color: var(--ink-300); margin-top: var(--s2); }

/* Evidence photo grid in run review. */
.evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s2); }
.evidence-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-xs); border: 1px solid var(--line); }

/* -------------------------------------------------------------- auth pages */
body.auth {
  background: var(--ink-900);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s5);
  padding-block: calc(var(--s6) + var(--safe-top)) calc(var(--s6) + var(--safe-bottom));
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--paper-raised);
  border-radius: var(--r-lg);
  padding: clamp(24px, 5vw, 36px);
  border: 1px solid var(--line);
}
.auth-card--wide { max-width: 620px; }
.auth-head { text-align: center; margin-bottom: var(--s6); }
.auth-head h1 { font-size: 1.5rem; margin-bottom: var(--s2); }
.auth-head p { color: var(--ink-300); font-size: .9375rem; margin-bottom: 0; }
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s6);
  text-decoration: none;
}
.auth-brand .brand__img { height: 50px; }
.auth-foot { text-align: center; margin-top: var(--s5); font-size: .875rem; color: rgba(248,247,244,.5); }
.auth-foot a { color: rgba(248,247,244,.82); }
.auth-alt {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  text-align: center;
}

/* PIN pad for shared kitchen tablets. */
.pin-display {
  display: flex;
  justify-content: center;
  gap: var(--s3);
  margin-bottom: var(--s6);
}
.pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.pin-dot.is-filled { background: var(--accent); border-color: var(--accent); transform: scale(1.12); }

.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pin-key {
  min-height: 62px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink-900);
  transition: background .1s ease, transform .06s ease;
}
.pin-key:hover { background: var(--paper-sunk); }
.pin-key:active { transform: scale(.96); background: var(--paper-deep); }
.pin-key--action { font-size: .875rem; font-family: var(--font-sans); font-weight: 620; color: var(--ink-400); }

.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s3); }
.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  text-decoration: none;
  color: var(--ink-900);
  text-align: center;
  transition: border-color .12s ease, transform .08s ease;
}
.person:hover { border-color: var(--accent); color: var(--ink-900); }
.person:active { transform: scale(.97); }
.person__name { font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.person__role { font-size: .6875rem; color: var(--ink-300); }

/* --------------------------------------------------------- support banner */
.support-banner {
  background: var(--warn);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  text-align: center;
  padding: 7px var(--s4);
  letter-spacing: .01em;
}

/* ============================================================ SHIFT LEAD */
.shift-card { max-width: 520px; }

/* Dashboard strip. Quiet when somebody holds it, amber when nobody does —
   an unclaimed shift is a gap in the record, not a neutral state. */
.shift-strip {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
}
.shift-strip--empty { border-left-color: var(--warn); background: var(--warn-tint); border-color: #EBD9B7; }

.shift-strip__dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--warn);
}
.shift-strip__dot.is-on {
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}

/* ------------------------------------------------------------- the watches */
.watch-list { display: grid; gap: var(--s3); }

.watch {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  overflow: hidden;
  break-inside: avoid;
}
.watch.is-open { border-color: var(--accent-tint-strong); }

.watch__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
}
.watch.is-open .watch__head { background: var(--accent-tint); }

.watch__time {
  font-size: .8125rem;
  font-weight: 620;
  color: var(--ink-500);
  white-space: nowrap;
}
.watch__who { display: flex; flex-direction: column; line-height: 1.25; }
.watch__body { padding: var(--s4); }

.watch__runs { list-style: none; margin: 0; padding: 0; }
.watch__runs > li { margin: 0; border-bottom: 1px solid var(--line); }
.watch__runs > li:last-child { border-bottom: 0; }

.watch__run {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  min-height: 40px;
  text-decoration: none;
  color: inherit;
}
.watch__run:hover .watch__run-title { color: var(--accent-deep); }
.watch__run-time { flex: 0 0 auto; font-size: .75rem; color: var(--ink-300); min-width: 42px; }
.watch__run-title {
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  font-weight: 560;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.watch__run-by { flex: 0 0 auto; }

/* ------------------------------------------------------- first-run setup */
.setup-card { max-width: 660px; }
.setup-choices { display: grid; gap: var(--s3); }

.setup-choice {
  display: block;
  position: relative;
  padding: var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.setup-choice:hover { border-color: var(--ink-300); }
.setup-choice input { position: absolute; opacity: 0; pointer-events: none; }
.setup-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.setup-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.setup-choice__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-weight: 640;
  font-size: 1rem;
  color: var(--ink-900);
  margin-bottom: var(--s2);
}
.setup-choice__desc { display: block; font-size: .9375rem; line-height: 1.55; color: var(--ink-500); }
.setup-choice__note { display: block; font-size: .8125rem; color: var(--ink-300); margin-top: var(--s3); }

/* The preview only opens on the option that is actually selected — it is
   reassurance for the choice being made, not a wall of text to read twice. */
.setup-preview { display: none; margin-top: var(--s4); }
.setup-choice:has(input:checked) .setup-preview { display: block; }

.setup-preview__head {
  display: block;
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--s2);
}
.setup-preview__list {
  display: grid;
  gap: 2px;
  padding: var(--s3);
  background: var(--paper-raised);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--r-sm);
}
.setup-preview__item {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-size: .8125rem;
  padding: 3px 0;
}
.setup-preview__foot {
  display: block;
  font-size: .75rem;
  color: var(--ink-300);
  margin-top: var(--s2);
  line-height: 1.5;
}

/* --------------------------------------------------------------- onboard */
.onboard-steps { display: flex; gap: var(--s2); margin-bottom: var(--s6); }
.onboard-steps span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-deep);
}
.onboard-steps span.is-done { background: var(--accent); }
.onboard-steps span.is-current { background: var(--ink-900); }

/* ==========================================================================
   TRAINING
   The player is a reading surface first. It gets a narrower measure than the
   rest of the app, larger body type, and no competing chrome — somebody is
   working through it one-handed on a phone, standing up, mid-shift.
   ========================================================================== */

/* ------------------------------------------------------------ the lesson */
.lesson { max-width: 640px; }

.lesson__title {
  font-size: clamp(1.375rem, 1.2rem + .9vw, 1.75rem);
  letter-spacing: -.028em;
  margin-bottom: var(--s4);
}

.lesson__body {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink-700);
}
.lesson__body > * + * { margin-top: var(--s4); }
.lesson__body h2 { font-size: 1.1875rem; margin-top: var(--s6); }
.lesson__body h3 { font-size: 1.0625rem; margin-top: var(--s5); }
.lesson__body ul, .lesson__body ol { padding-left: 1.3em; }
.lesson__body li { margin-bottom: var(--s2); }
.lesson__body table { font-size: .9375rem; margin-top: var(--s4); }
.lesson__body th, .lesson__body td {
  border: 1px solid var(--line);
  padding: var(--s2) var(--s3);
  text-align: left;
}
.lesson__body th { background: var(--paper-sunk); font-weight: 620; }

.lesson__nav {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.lesson-exit {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-300);
  text-decoration: none;
  border: 1px solid transparent;
}
.lesson-exit:hover { background: var(--paper-sunk); color: var(--ink-900); }

/* ------------------------------------------------------------ step media */
.lesson-media { margin: 0 0 var(--s5); }
.lesson-media img,
.lesson-media video {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-900);
  display: block;
}
.lesson-media video { aspect-ratio: 16 / 9; object-fit: contain; }
.lesson-media figcaption {
  font-size: .8125rem;
  color: var(--ink-300);
  margin-top: var(--s2);
  line-height: 1.5;
}
.lesson-media--embed { position: relative; }
.lesson-media--embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: block;
  background: var(--ink-900);
}

/* ---------------------------------------------------------- quiz answers */
.choices { display: grid; gap: var(--s2); margin-top: var(--s5); }

.choice-row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.choice-row:hover { border-color: var(--ink-300); }
.choice-row input[type="radio"] {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--accent);
}
.choice-row__text { flex: 1; font-size: .9375rem; line-height: 1.45; }
.choice-row__mark {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
}
.choice-row.is-picked { border-color: var(--accent); background: var(--accent-tint); }

/* After answering: the right one is always marked, and a wrong pick is shown
   as wrong rather than simply unhighlighted — being told only "not that one"
   teaches nothing. */
.choice-row.is-correct {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choice-row.is-chosen-wrong {
  border-color: var(--bad);
  background: var(--bad-tint);
  box-shadow: inset 0 0 0 1px var(--bad);
}
.choice-row:has(input:disabled) { cursor: default; }

.quiz-verdict {
  margin-top: var(--s5);
  padding: var(--s4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper-sunk);
  font-size: .9375rem;
  line-height: 1.6;
}
.quiz-verdict__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 660;
  margin-bottom: var(--s2);
}
.quiz-verdict__answer { margin-bottom: var(--s2); }
.quiz-verdict.is-right {
  background: var(--accent-tint);
  border-color: var(--accent-tint-strong);
}
.quiz-verdict.is-right .quiz-verdict__head { color: var(--accent-dark); }
.quiz-verdict.is-wrong {
  background: var(--bad-tint);
  border-color: #EFCEC9;
}
.quiz-verdict.is-wrong .quiz-verdict__head { color: var(--bad); }

.signoff__statement {
  font-size: .9375rem;
  line-height: 1.6;
  margin-bottom: var(--s5);
  color: rgba(248, 247, 244, .82);
}
.signoff__statement p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------ completion card */
.done-card {
  max-width: 460px;
  margin: var(--s7) auto;
  text-align: center;
  padding: var(--s7) var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.done-card__mark {
  width: 58px; height: 58px;
  margin: 0 auto var(--s5);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
}
.done-card__title { font-size: 1.5rem; margin-bottom: var(--s2); }
.done-card__sub { color: var(--ink-300); font-size: .9375rem; margin-bottom: var(--s6); }
.done-card__kv { text-align: left; margin-bottom: var(--s5); }
.done-card__note { font-size: .8125rem; color: var(--ink-300); margin-bottom: var(--s5); }
.done-card__actions { justify-content: center; }

/* ============================================================== BUILDER */
.builder-list { list-style: none; margin: 0; padding: 0; }
.builder-list > li { margin: 0 0 var(--s3); }

.select--inline {
  width: auto;
  min-height: 34px;
  padding: 4px 32px 4px 10px;
  font-size: .8125rem;
  font-weight: 600;
  background-position: right 9px center;
}

.builder-item__grip {
  border-radius: var(--r-xs);
}
.builder-item__grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.media-current {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-sunk);
  margin-bottom: var(--s4);
}
.media-current img,
.media-current video {
  width: 100%;
  max-width: 280px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line-strong);
  margin-bottom: var(--s2);
}

.add-step {
  padding: var(--s4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-sunk);
}
.add-step__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

.builder-actions {
  position: sticky;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom));
  z-index: 70;
  display: flex;
  gap: var(--s3);
  padding: var(--s3) 0;
  background: linear-gradient(to top, var(--paper) 62%, transparent);
}
@media (min-width: 900px) { .builder-actions { bottom: 0; } }

.person-picker {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0 var(--s3);
  background: var(--paper-sunk);
}

/* -------------------------------------------------------------- preview */
.preview-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s5);
  border: 1px solid #EBD9B7;
  background: var(--warn-tint);
  border-radius: var(--r-sm);
  color: var(--warn);
  flex-wrap: wrap;
}
.preview-frame {
  max-width: 640px;
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-raised);
}

/* --------------------------------------------------- recorded answers */
.answer-row {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  overflow: hidden;
}
.answer-row.is-right { border-left: 3px solid var(--accent); }
.answer-row.is-wrong { border-left: 3px solid var(--bad); }
.answer-row__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
}
.answer-row__n { font-size: .75rem; font-weight: 660; color: var(--ink-300); }
.answer-row__kind {
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.answer-row__body { padding: var(--s4); }
.answer-row__prompt { font-weight: 570; margin-bottom: var(--s2); line-height: 1.5; }
.answer-row__answer { font-size: .9375rem; }
.answer-row__quote {
  margin: 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--line-strong);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-700);
}

/* --------------------------------------------------------------- matrix */
.matrix { font-size: .8125rem; }
.matrix__name {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper-raised);
  min-width: 180px;
  border-right: 1px solid var(--line);
}
.matrix thead .matrix__name { background: var(--paper-sunk); }
.matrix tbody tr:hover .matrix__name { background: var(--paper-sunk); }

/* Module names are long and there are a lot of them; turning the header on
   its side keeps the grid readable without truncating every title. */
.matrix__module {
  height: 150px;
  padding: 0 !important;
  width: 38px;
  min-width: 38px;
  vertical-align: bottom;
}
.matrix__module > span {
  display: block;
  width: 150px;
  transform-origin: bottom left;
  transform: translateX(30px) rotate(-60deg);
  font-size: .6875rem;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.matrix__cell { text-align: center; padding: var(--s2) !important; }

.matrix__dot {
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-xs);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--line-strong);
  background: var(--paper-raised);
  color: var(--ink-300);
}
.matrix__dot--completed   { background: var(--accent); border-color: var(--accent); color: #fff; }
.matrix__dot--in_progress { background: var(--info-tint); border-color: var(--info); color: var(--info); }
.matrix__dot--overdue     { background: var(--bad); border-color: var(--bad); color: #fff; }
.matrix__dot--failed      { background: var(--bad-tint); border-color: var(--bad); color: var(--bad); }
.matrix__dot--expired     { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); }
.matrix__dot--not_started { background: var(--paper-deep); }

.matrix__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s4);
  font-size: .75rem;
  color: var(--ink-400);
}
.matrix__key-item { display: inline-flex; align-items: center; gap: var(--s2); }

/* ==========================================================================
   MOCK AUDITS
   The report gets printed and handed to people — landlords, franchisors,
   insurers — so it is built to survive losing its colour on somebody's office
   laser printer. Severity is never carried by hue alone.
   ========================================================================== */

/* The big 0-5 rating block. Deliberately echoes the FSA's own badge shape so
   it reads instantly, without imitating it closely enough to be mistaken for
   the real certificate. */
.rating-badge {
  flex: 0 0 auto;
  width: 84px;
  padding: var(--s3) var(--s2);
  border-radius: var(--r-md);
  text-align: center;
  border: 2px solid currentColor;
  line-height: 1;
}
.rating-badge__num {
  display: block;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -.04em;
}
.rating-badge__of {
  display: block;
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
  margin-top: 4px;
}
.rating-badge--ok   { color: var(--accent-dark); background: var(--accent-tint); }
.rating-badge--warn { color: var(--warn);        background: var(--warn-tint); }
.rating-badge--bad  { color: var(--bad);         background: var(--bad-tint); }

.rating-chip {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-size: .9375rem;
  font-weight: 700;
  border: 1.5px solid currentColor;
}
.rating-chip--ok   { color: var(--accent-dark); background: var(--accent-tint); }
.rating-chip--warn { color: var(--warn);        background: var(--warn-tint); }
.rating-chip--bad  { color: var(--bad);         background: var(--bad-tint); }
.rating-chip--none { color: var(--ink-200);     background: var(--paper-deep); border-color: var(--line-strong); }

/* Template picker on the audits index. */
.audit-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.audit-card__body { flex: 1; min-width: 0; }

/* ------------------------------------------------------ outcome selector */
.verdict-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2);
}
@media (min-width: 720px) {
  .verdict-grid { grid-template-columns: repeat(5, 1fr); }
}

.verdict {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  font-size: .8125rem;
  font-weight: 620;
  color: var(--ink-500);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.verdict:hover { border-color: var(--ink-300); }
.verdict input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
  pointer-events: none;
}
.verdict:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.verdict--compliant.is-on      { background: var(--accent); border-color: var(--accent); color: #fff; }
.verdict--minor.is-on          { background: var(--warn-tint); border-color: var(--warn); color: var(--warn); }
.verdict--major.is-on          { background: var(--warn); border-color: var(--warn); color: #fff; }
.verdict--critical.is-on       { background: var(--bad); border-color: var(--bad); color: #fff; }
.verdict--not_applicable.is-on { background: var(--ink-600); border-color: var(--ink-600); color: #fff; }

/* Answered-state tint on the check itself, matching the checklist run screen. */
.item.is-minor        { border-color: #EBD9B7; background: linear-gradient(var(--warn-tint), var(--paper-raised) 46px); }
.item.is-major        { border-color: var(--warn); background: linear-gradient(var(--warn-tint), var(--paper-raised) 46px); }
.item.is-critical-fail{ border-color: var(--bad); background: linear-gradient(var(--bad-tint), var(--paper-raised) 46px); }

/* --------------------------------------------------------- score breakdown */
.area-row { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.area-row:last-of-type { border-bottom: 0; }
.area-row__head { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s3); }
.area-row__score {
  font-size: 1.75rem;
  font-weight: 660;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ink-900);
}
.area-row.is-capping { padding-left: var(--s4); border-left: 3px solid var(--bad); }

/* ---------------------------------------------------------------- findings */
.finding {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  overflow: hidden;
  break-inside: avoid;
}
.finding--minor    { border-left-color: var(--ink-300); }
.finding--major    { border-left-color: var(--warn); }
.finding--critical { border-left-color: var(--bad); }
.finding.is-resolved { opacity: .72; background: var(--paper-sunk); }

.finding__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--line);
}
.finding__body { padding: var(--s4); }
.finding__prompt { font-weight: 600; font-size: .9375rem; line-height: 1.45; margin-bottom: var(--s2); }
.finding__observation { font-size: .875rem; color: var(--ink-500); line-height: 1.6; margin-bottom: var(--s3); }
.finding__photo {
  max-width: 240px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  margin-bottom: var(--s3);
}
.finding__action {
  padding: var(--s3) var(--s4);
  background: var(--paper-sunk);
  border-radius: var(--r-sm);
  font-size: .875rem;
  line-height: 1.55;
}
.finding__resolution {
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--accent-tint);
  border-radius: var(--r-sm);
  font-size: .875rem;
  line-height: 1.55;
}
.finding__close {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
  flex-wrap: wrap;
}
.finding__close .input { flex: 1; min-width: 200px; min-height: 40px; font-size: .875rem; }

.report-foot {
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ print */
@media print {
  .appbar, .rail, .tabbar, .run-foot, .flash-stack, .no-print { display: none !important; }
  body.app { padding: 0; background: #fff; }
  .shell { display: block; }
  .main { padding: 0; }
  .panel { break-inside: avoid; border-color: #ccc; }

  .builder-actions, .add-step, .preview-bar, .lesson__nav, .back-link { display: none !important; }
  .answer-row { break-inside: avoid; }
  .matrix__name { position: static; }
  .table-scroll { overflow: visible; }

  /* Audit reports get printed and filed. Severity must survive a mono laser
     printer, so the left rule is thickened and given a pattern rather than
     relying on colour that will come out as identical grey. */
  .finding { break-inside: avoid; border-left-width: 6px; }
  .finding--major    { border-left-style: double; }
  .finding--critical { border-left-style: solid; }
  .finding--minor    { border-left-style: dotted; }
  .finding__close { display: none !important; }
  .rating-badge { border-width: 3px; }
  .area-row { break-inside: avoid; }
}

/* ==========================================================================
   ROLES & PERMISSIONS
   Settings → Roles. Two screens: a list of roles, and a permission editor.
   ========================================================================== */

.role-list { display: grid; gap: var(--s4); }

.role-card {
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
@media (min-width: 720px) {
  .role-card { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}

.role-card__main { min-width: 0; }
.role-card__name { font-size: 1.0625rem; font-weight: 640; letter-spacing: -.015em; margin: 0; }
.role-card__desc {
  margin: var(--s2) 0 0;
  font-size: .875rem;
  color: var(--ink-400);
  line-height: 1.55;
  max-width: 64ch;
}
.role-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s3);
  font-size: .8125rem;
  color: var(--ink-300);
}
.role-card__meta b { color: var(--ink-900); font-weight: 620; }
.role-card__tier {
  font-size: .6875rem;
  font-weight: 660;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-300);
}
.role-card__empty { margin: var(--s3) 0 0; font-size: .8125rem; color: var(--ink-300); font-style: italic; }

/* Six granted permissions as chips, then a count. Enough to recognise a role
   at a glance without reprinting the whole editor. */
.role-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s4) 0 0; padding: 0; }
.role-chips li {
  margin: 0;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  font-size: .75rem;
  color: var(--ink-500);
}
.role-chips li.is-sensitive {
  background: var(--warn-tint);
  border-color: #EBD9B7;
  color: var(--warn);
  font-weight: 600;
}
.role-chips li.is-more { background: transparent; border-style: dashed; color: var(--ink-300); }

.role-card__side { display: flex; gap: var(--s2); align-items: flex-start; flex-wrap: wrap; }

/* Delete is a disclosure rather than a modal: it needs a reassignment target
   chosen before it can run, and a confirm dialog cannot ask for one. */
.role-delete { position: relative; }
.role-delete summary { cursor: pointer; }
.role-delete summary::-webkit-details-marker { display: none; }
.role-delete__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  width: min(300px, calc(100vw - 48px));
  box-shadow: var(--shadow-pop);
}
@media (max-width: 719px) {
  .role-delete__panel { position: static; width: 100%; margin-top: var(--s3); }
}

/* ---------------------------------------------------------- permission list */
.perm-list { list-style: none; margin: 0; padding: 0; }
.perm { margin: 0; border-top: 1px solid var(--line); }
.perm:first-child { border-top: 0; }

.perm__label {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  padding: var(--s4) var(--s5);
  cursor: pointer;
  transition: background .12s ease;
}
.perm__label:hover { background: var(--paper-sunk); }

.perm__input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.perm__input:disabled { cursor: default; opacity: .55; }

.perm__body { min-width: 0; }
.perm__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: .9375rem;
  font-weight: 590;
  color: var(--ink-900);
}
.perm__help {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-300);
  max-width: 68ch;
}

/* Anything that lets its holder widen their own access is marked, so it is a
   decision rather than a stray click. */
.perm__flag {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--warn-tint);
  color: var(--warn);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.perm--sensitive .perm__label { box-shadow: inset 3px 0 0 var(--warn); }
@media (max-width: 520px) {
  .form-actions .btn { width: 100%; }
}