/* ---------------------------------------------------------------------------
   Components — the reusable pieces: buttons, cards, form controls, choice
   cards, the wizard stepper, status pills, tables, banners and toasts.
   --------------------------------------------------------------------------- */

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn svg { width: 16px; height: 16px; }

.btn--primary { background: var(--command-navy); color: var(--white); }
.btn--primary:hover { background: var(--deep-navy); }

.btn--secondary { background: var(--white); color: var(--command-navy); border-color: var(--border-strong); }
.btn--secondary:hover { background: var(--cloud); }

.btn--quiet { background: transparent; color: var(--command-navy); padding-inline: var(--s-3); }
.btn--quiet:hover { background: var(--navy-tint); }

/* Reserved for the one clear next action, per the colour rules. */
.btn--attention { background: var(--signal-yellow); color: var(--deep-navy); }
.btn--attention:hover { background: #E4D818; }

.btn--danger { background: var(--white); color: #9B2C2C; border-color: #E6C5C5; }
.btn--danger:hover { background: #FDF2F2; }

.btn--small { padding: var(--s-2) var(--s-3); font-size: var(--text-sm); }
.btn--block { width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--mist);
  color: var(--muted);
  border-color: var(--mist);
  cursor: not-allowed;
}

.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

/* ---- Cards and surfaces ------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--s-5);
}

.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: var(--s-4); }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; color: var(--command-navy); }
.card__note { font-size: var(--text-sm); color: var(--muted); }

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack--tight { gap: var(--s-2); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }

/* ---- Page headers ------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
  align-items: center;
}

.page-head__sub { color: var(--muted); margin-top: 2px; font-size: var(--text-base); }

.breadcrumb { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s-2); }
.breadcrumb a { color: var(--command-navy); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---- Stat tiles --------------------------------------------------------- */

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); gap: var(--s-3); }

/* Compact enough that a row of them reads as one strip, not six boxes. */
.stat {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  box-shadow: var(--shadow-card);
}

.stat__value { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; color: var(--command-navy); line-height: 1.1; }
.stat__label { font-size: var(--text-sm); color: var(--muted); }

/* Tiles that filter the list below them */
.stat--button { cursor: pointer; text-align: left; width: 100%; font-family: var(--font-body); }
.stat--button:hover { background: var(--cloud); }
.stat--button.is-active { border-color: var(--control-aqua); background: var(--aqua-tint); }

.stat--aqua { border-left-color: var(--control-aqua); }
.stat--yellow { border-left-color: var(--signal-yellow); }
.stat--mist { border-left-color: var(--mist); }

/* ---- Form controls ------------------------------------------------------ */

.field { margin-bottom: var(--s-4); }
.field:last-child { margin-bottom: 0; }

.field__label {
  display: block;
  font-weight: 600;
  color: var(--command-navy);
  margin-bottom: var(--s-1);
}

.field__hint { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--s-2); }
.field__foot { font-size: var(--text-sm); color: var(--muted); margin-top: var(--s-2); }

.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}

.textarea { min-height: 76px; resize: vertical; line-height: 1.5; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230A3156' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-right: var(--s-10);
}

.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--control-aqua);
  box-shadow: var(--focus-ring);
}

.input-with-mic { display: flex; gap: var(--s-2); align-items: flex-start; }
.input-with-mic > :first-child { flex: 1; }

/* Voice button — optional input, so it stays visually quiet until used. */
.mic {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--command-navy);
  cursor: pointer;
}

.mic:hover { background: var(--cloud); }
.mic svg { width: 18px; height: 18px; }
.mic.is-listening { background: var(--control-aqua); border-color: var(--control-aqua); color: var(--white); }
.mic[hidden] { display: none; }

/* ---- Yes / No pair ------------------------------------------------------ */

.yesno { display: flex; gap: var(--s-3); }

.yesno button {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  min-width: 88px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
}

.yesno button:hover { background: var(--cloud); }

.yesno button[aria-pressed="true"] {
  background: var(--command-navy);
  border-color: var(--command-navy);
  color: var(--white);
}

/* ---- Choice cards (radio / checkbox grids) ------------------------------ */

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-2); }
.choices--wide { grid-template-columns: 1fr; }

.choice {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--s-3);
  cursor: pointer;
  position: relative;
}

.choice:hover { background: var(--cloud); }

.choice input { position: absolute; opacity: 0; pointer-events: none; }

.choice__mark {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.choice--multi .choice__mark { border-radius: 5px; }

.choice__mark::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}

.choice--multi .choice__mark::after { border-radius: 2px; }

.choice__title { font-weight: 600; color: var(--command-navy); }
.choice__desc { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }

.choice.is-selected {
  border-color: var(--control-aqua);
  background: var(--aqua-tint);
}

.choice.is-selected .choice__mark { border-color: var(--control-aqua); }
.choice.is-selected .choice__mark::after { background: var(--control-aqua); }

.choice:focus-within { box-shadow: var(--focus-ring); }

/* ---- Status pills ------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: var(--s-1) var(--s-3);
  background: var(--navy-tint);
  color: var(--command-navy);
  white-space: nowrap;
}

.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

.pill--draft { background: var(--cloud); color: var(--muted); }
.pill--pending { background: var(--yellow-tint); color: #6B5E00; }
.pill--approved { background: var(--aqua-tint-strong); color: #0A5A5E; }
.pill--generated { background: var(--navy-tint); color: var(--command-navy); }

/* ---- Banners ------------------------------------------------------------ */

.banner {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  background: var(--cloud);
}

.banner__icon { flex: none; width: 18px; height: 18px; color: var(--command-navy); margin-top: 2px; }
.banner__title { font-weight: 600; color: var(--command-navy); margin-bottom: 2px; }
.banner__body { font-size: var(--text-base); color: var(--slate); }

.banner--attention { background: var(--yellow-tint); border-color: #EADF7A; }
.banner--info { background: var(--aqua-tint); border-color: var(--aqua-tint-strong); }
.banner--quiet { background: var(--cloud); }

/* ---- Tables ------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }

.table th {
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--cloud);
  white-space: nowrap;
}

.table td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--cloud); }

.table__name { display: flex; align-items: center; gap: var(--s-3); }

/* Descriptions are a hint, not the content — one line each keeps rows short. */
.table__name .card__note {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.table__name a { font-weight: 600; color: var(--command-navy); text-decoration: none; }
.table__name a:hover { text-decoration: underline; }

.tile-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--command-navy);
  color: var(--white);
  display: grid;
  place-items: center;
  flex: none;
}

.tile-icon svg { width: 15px; height: 15px; }

/* ---- Toolbar (search + filters) ----------------------------------------- */

.toolbar { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.toolbar .input { flex: 1; min-width: 220px; }
.toolbar .select { width: auto; min-width: 160px; }

/* ---- Empty state -------------------------------------------------------- */

.empty { text-align: center; padding: var(--s-8) var(--s-6); }
.empty img { width: 48px; opacity: .9; margin-bottom: var(--s-3); }
.empty h3 { margin-bottom: var(--s-2); }
.empty p { color: var(--muted); max-width: 420px; margin: 0 auto var(--s-5); }

/* ---- Wizard stepper ----------------------------------------------------- */

.stepper { display: flex; margin: var(--s-4) 0 var(--s-5); }

.stepper__item { flex: 1; text-align: center; position: relative; }

.stepper__line {
  position: absolute;
  top: 12px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--mist);
}

.stepper__item:last-child .stepper__line { display: none; }
.stepper__item.is-done .stepper__line { background: var(--control-aqua); }

.stepper__dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  margin: 0 auto var(--s-1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--mist);
  color: var(--muted);
  font-weight: 600;
  font-size: var(--text-sm);
}

.stepper__label { font-size: var(--text-sm); color: var(--muted); }

.stepper__item.is-done .stepper__dot { background: var(--control-aqua); color: var(--white); }
.stepper__item.is-current .stepper__dot { background: var(--signal-yellow); color: var(--deep-navy); }
.stepper__item.is-current .stepper__label { color: var(--command-navy); font-weight: 600; }

/* ---- Modal -------------------------------------------------------------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 31, 56, 0.45);
  display: grid;
  place-items: center;
  padding: var(--s-6);
  z-index: 40;
}

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--s-8);
  max-width: 520px;
  width: 100%;
}

.modal h2 { margin-bottom: var(--s-3); }
.modal .btn-row { margin-top: var(--s-6); justify-content: flex-end; }

/* ---- Toasts ------------------------------------------------------------- */

.toast-stack {
  position: fixed;
  right: var(--s-6);
  bottom: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  z-index: 50;
}

.toast {
  background: var(--deep-navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-5);
  box-shadow: var(--shadow-float);
  font-size: var(--text-base);
  max-width: 380px;
}

.toast--warn { background: var(--signal-yellow); color: var(--deep-navy); font-weight: 500; }

/* ---- Narrow screens ----------------------------------------------------- */

@media (max-width: 560px) {
  /* Two counts side by side reads better than four tall blocks on a phone */
  .stat-row { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .stat { padding: var(--s-4); }
  .stat__value { font-size: var(--text-xl); }

  .card { padding: var(--s-5); }
  .wizard__card { padding: var(--s-5); }
  .page-head { margin-bottom: var(--s-6); }
  .wizard__foot { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .wizard__foot .btn-row { justify-content: flex-end; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; }
}

/* ---- Case references ---------------------------------------------------- */

/* MC-0007 and the like: quiet, monospaced, easy to read out loud. */
.ref {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--command-navy);
  background: var(--navy-tint);
  border-radius: var(--radius-sm);
  padding: 2px var(--s-2);
  white-space: nowrap;
}

.ref--large { font-size: var(--text-base); padding: var(--s-1) var(--s-3); }

/* ---- Multi-select dropdown ---------------------------------------------
   A <details> element doing the work: click the bar, a panel of tick boxes
   opens underneath. No library, keyboard-friendly, and far more compact
   than a grid of choice cards when there are a lot of options.
   ------------------------------------------------------------------------ */

.dropdown { position: relative; }

.dropdown__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  list-style: none;
  cursor: pointer;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-base);
  color: var(--slate);
}

.dropdown__button::-webkit-details-marker { display: none; }
.dropdown__button:hover { background: var(--cloud); }
.dropdown[open] .dropdown__button { border-color: var(--control-aqua); }

.dropdown__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown__value.is-empty { color: var(--muted); }

.dropdown__caret { flex: none; width: 14px; height: 14px; color: var(--command-navy); }
.dropdown[open] .dropdown__caret { transform: rotate(180deg); }

.dropdown__panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raised);
  padding: var(--s-1);
}

.dropdown__option {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-base);
}

.dropdown__option:hover { background: var(--cloud); }
.dropdown__option input { accent-color: var(--control-aqua); width: 15px; height: 15px; }

/* ---- Compact two-column form -------------------------------------------
   Short fields sit side by side so a form fits on one screen; anything
   that needs room (a description, notes) spans the full width.
   ------------------------------------------------------------------------ */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 var(--s-5);
}

.form-grid .field--wide { grid-column: 1 / -1; }

/* ---- Extra status pills ------------------------------------------------- */

.pill--live { background: var(--aqua-tint-strong); color: #0A5A5E; }
.pill--hold { background: var(--yellow-tint); color: #6B5E00; }
.pill--cancelled { background: var(--cloud); color: var(--muted); text-decoration: line-through; }
.pill--build { background: var(--navy-tint); color: var(--command-navy); }

/* ---- Filter chips ------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 3px var(--s-3);
  cursor: pointer;
  white-space: nowrap;
}

.chip:hover { background: var(--cloud); }

.chip[aria-pressed="true"] {
  background: var(--command-navy);
  border-color: var(--command-navy);
  color: var(--white);
}

.chip__count { opacity: .65; margin-left: 4px; }

/* The "add another" row at the bottom of a dropdown's list */
.dropdown__add {
  display: flex;
  gap: var(--s-2);
  padding: var(--s-2);
  border-top: 1px solid var(--border);
  margin-top: var(--s-1);
  position: sticky;
  bottom: 0;
  background: var(--white);
}

.dropdown__add .input { padding: var(--s-1) var(--s-2); font-size: var(--text-sm); }

/* A failed save is not a toast — it stays until it is dealt with. */
.save-alarm {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%);
  z-index: 60;
  max-width: 560px;
  background: var(--signal-yellow);
  color: var(--deep-navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  padding: var(--s-3) var(--s-5);
  font-size: var(--text-base);
}

.save-alarm a { color: var(--deep-navy); }

/* The quiet line that reports whether work is actually saved */
.wizard__autosave.is-saved { color: #0A5A5E; }
.wizard__autosave.is-error { color: #9B2C2C; font-weight: 600; }

/* ---- People, permissions and groups ------------------------------------ */

/* Two columns that prefer to stay two, since both hold tables. */
.grid-2--wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }

.avatar--sm { width: 26px; height: 26px; font-size: 11px; }

.person { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.person__text { min-width: 0; }
.person__name { font-weight: 600; }

/* An email is often wider than its column, so trim it rather than let it
   push the table sideways. The full one is on the title attribute. */
.person__email {
  font-size: var(--text-sm);
  color: var(--slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 24ch;
}

.people-table td { vertical-align: middle; }
.people-table .select { min-width: 150px; }

/* A column of tick boxes that wraps instead of becoming a long list. */
.tick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-2);
}

.tick {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  cursor: pointer;
  font-size: var(--text-sm);
}

.tick input { accent-color: var(--command-navy); }
.tick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.perm-table th:not(:first-child),
.perm-table td:not(:first-child) { text-align: center; width: 1%; white-space: nowrap; }
.perm-table__cell svg { width: 15px; height: 15px; }
.tick-mark { color: #0A5A5E; }
.tick-mark--no { color: var(--mist); }

.group-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--border);
}

.group-row:first-child { border-top: 0; }
.group-row__text { min-width: 0; }
.group-row__name { font-weight: 600; }

.group-editor {
  border: 1px solid var(--command-navy);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin: var(--s-3) 0;
  background: var(--navy-tint);
}

/* ---- Platform status ---------------------------------------------------- */

.platform-card__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-2) 0 var(--s-3);
}

.platform-card__watch--warn {
  color: #9B2C2C;
  font-weight: 600;
}

.platform-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}

.platform-card__name:hover { text-decoration: underline; }

/* ---- Improvements ------------------------------------------------------- */

.lesson__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.lesson__text { min-width: 0; }
.lesson__name { font-weight: 600; color: var(--command-navy); }

.lesson__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}

/* The build review asks three questions, so it needs more room than a
   yes/no dialog. */
.modal--wide { max-width: 640px; }

/* ---- Adding somebody ---------------------------------------------------- */

/* Email, level and the button on one line, so adding a person is one
   glance rather than a form. */
.invite-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) auto;
  gap: var(--s-3);
  align-items: end;
}

.invite-row .field { margin-bottom: 0; }
.invite-row__go .btn { white-space: nowrap; }

@media (max-width: 720px) {
  .invite-row { grid-template-columns: 1fr; }
}

/* The sharing and invite blocks sit under the answers on the review step. */
.review-sharing {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-5);
}