/* Application shell. Every colour, radius and space comes from tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-xs); }

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: var(--fw-700);
  letter-spacing: var(--ls-tight-4);
  margin: 0;
}
h2 {
  font-size: var(--fs-15);
  font-weight: var(--fw-600);
  letter-spacing: var(--ls-tight-2);
  margin: 0;
}

.pf-muted { color: var(--c-text-muted); }
.pf-small { font-size: var(--fs-12); }
.pf-eyebrow {
  font-size: var(--fs-10); font-weight: var(--fw-600);
  letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--c-text-muted);
}

/* ---------- App shell ---------- */

.app-header {
  display: flex; align-items: center; gap: var(--s-7);
  padding: 0 var(--s-12); height: 56px; border-right: 2px solid var(--c-border);
  background: var(--c-surface); border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; z-index: 10;
}
.app-brand {
  display: flex; align-items: center; gap: var(--s-7);
  font-family: var(--font-display); font-weight: var(--fw-700);
  color: var(--c-primary-deep); text-decoration: none;
}
.app-brand:hover { text-decoration: none; }
.app-brand::after { content: ""; width: 1px; height: 18px; background: var(--c-border); }
.app-title { font-weight: var(--fw-600); letter-spacing: var(--ls-tight-2); }
.app-header-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-8); }

.app-main { max-width: 1040px; margin: 0 auto; padding: var(--s-12) var(--s-12) 64px; }
.app-main-narrow { max-width: 620px; }

/* ---------- Breadcrumb and page head ---------- */

.crumbs { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-12); margin-bottom: var(--s-5); }
.crumbs span { color: var(--c-text-muted); }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-10); flex-wrap: wrap; margin-bottom: var(--s-10);
}
.page-head p { margin: var(--s-3) 0 0; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4);
  height: 38px; padding: 0 var(--s-10);
  flex: none;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-13); font-weight: var(--fw-500); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
/* Keep the label light on hover: darken the field, never the text. */
.btn-primary:hover { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: var(--c-white); }

/* Second in the ladder: same weight as primary, less commitment. */
.btn-outline { background: var(--c-surface); border-color: var(--c-primary); color: var(--c-primary); }
.btn-outline:hover { background: var(--c-primary-soft); border-color: var(--c-primary-deep); color: var(--c-primary-deep); }

/* Neutral action. Grey border rather than blue, so it reads as lower rank. */
.btn-secondary { background: var(--c-surface); border-color: var(--c-gray-100); color: var(--c-text); }
.btn-secondary:hover { background: var(--c-surface-alt); border-color: var(--c-ink-500); color: var(--c-text); }

.btn-ghost { background: none; border-color: transparent; color: var(--c-primary); padding: 0 var(--s-5); }
.btn-ghost:hover { background: var(--c-primary-soft); color: var(--c-primary-deep); }

.btn-danger-quiet { background: none; border-color: transparent; color: var(--c-text-muted); padding: 0 var(--s-5); }
.btn-danger-quiet:hover { background: var(--c-danger-soft); color: var(--c-danger); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--c-surface); border-color: var(--c-border);
  color: var(--c-text-muted); cursor: not-allowed;
}
.btn-sm { height: 30px; padding: 0 var(--s-6); font-size: var(--fs-12); }
.btn-back::before { content: "\2190"; font-size: var(--fs-15); line-height: 1; }
.btn-block { width: 100%; }

/* ---------- Cards and panels ---------- */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  padding: var(--s-7) var(--s-10);
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--c-border);
}
.card-body { padding: var(--s-10); }
.card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  padding: var(--s-8) var(--s-10); border-top: 1px solid var(--c-border);
}

/* ---------- Forms ---------- */

.field { margin-bottom: var(--s-10); }
.field > label, .field-label {
  display: block; margin-bottom: var(--s-3);
  font-size: var(--fs-12); font-weight: var(--fw-600);
}
.field-hint { margin: 0 0 var(--s-6); font-size: var(--fs-12); color: var(--c-text-muted); }

/* Selected by exclusion, not by listing types. An input with no type
   attribute, or a type added later such as datetime-local, would otherwise
   fall through to the browser's own narrow default. */
.input, select, textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]) {
  width: 100%; height: 38px; padding: 0 var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  transition: border-color .12s, box-shadow .12s;
}
textarea { height: auto; padding: var(--s-5) var(--s-6); line-height: 1.6; resize: vertical; }
select { padding-right: var(--s-8); }

input:hover, select:hover, textarea:hover { border-color: var(--c-primary-border); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: var(--ring-primary);
}

.form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); }
.form-actions-end { display: flex; align-items: center; gap: var(--s-5); }

/* ---------- Messages ---------- */

.msg { padding: var(--s-6) var(--s-8); border-radius: var(--r-md); margin-bottom: var(--s-8); font-size: var(--fs-13); }
.msg-error { border: 1px solid var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }
.msg-ok { border: 1px solid var(--c-success); background: var(--c-success-soft); color: var(--c-status-customer-fg); }
.msg-info { border: 1px solid var(--c-border); background: var(--c-surface-alt); color: var(--c-text-muted); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s-6);
  border-radius: var(--r-pill); font-size: var(--fs-11); font-weight: var(--fw-500);
  background: var(--c-surface-alt); color: var(--c-text-muted); white-space: nowrap;
}
.badge-ok { background: var(--c-success-soft); color: var(--c-status-customer-fg); }
.badge-warn { background: var(--c-status-proposal-bg); color: var(--c-status-proposal-fg); }
.badge-info { background: var(--c-primary-soft); color: var(--c-primary); }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: var(--s-2); }
.tab {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-8);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  background: var(--c-surface); font-size: var(--fs-13); color: var(--c-text-muted);
}
.tab:hover { border-color: var(--c-primary-border); color: var(--c-text); text-decoration: none; }
.tab-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); font-weight: var(--fw-500); }
.tab-on:hover { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: var(--c-white); }

/* Sub navigation inside one coordination. */
.subnav {
  display: flex; gap: var(--s-2); margin-bottom: var(--s-10);
  border-bottom: 1px solid var(--c-border);
}
.subnav a {
  padding: var(--s-5) var(--s-8); font-size: var(--fs-13); color: var(--c-text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover { color: var(--c-text); text-decoration: none; }
.subnav a[aria-current="page"] {
  color: var(--c-primary-deep); border-bottom-color: var(--c-primary);
  border-bottom-width: 3px; font-weight: var(--fw-700);
  background: var(--c-primary-soft);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}

/* ---------- Wizard steps ---------- */

.steps { display: flex; align-items: center; gap: var(--s-4); }
.step {
  display: inline-flex; align-items: center; height: 30px; padding: 0 var(--s-8);
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  background: var(--c-surface); font-size: var(--fs-12); color: var(--c-text-muted);
}
.step:hover { border-color: var(--c-primary-border); color: var(--c-text); text-decoration: none; }
.step-on { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); font-weight: var(--fw-500); }
.step-on:hover { background: var(--c-primary-deep); border-color: var(--c-primary-deep); color: var(--c-white); }
.step-done { border-color: var(--c-primary-border); color: var(--c-primary); }
.step-rule { width: 14px; height: 1px; background: var(--c-border); }

/* ---------- Lists ---------- */

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.list-card {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-8);
  align-items: center;
  padding: var(--s-8) var(--s-10);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl);
  color: inherit;
}
.list-card { position: relative; }
.list-card:hover { border-color: var(--c-primary-border); }

/* Stretched over the whole card, so the row is clickable without wrapping
   the action buttons in an anchor. */
.list-card-link { font-weight: var(--fw-600); letter-spacing: var(--ls-tight-2); color: inherit; }
.list-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.list-card-link:hover { text-decoration: none; color: var(--c-primary-deep); }

/* Above the stretched link, or they would not be reachable. */
.list-actions { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-4); }
.list-actions form { margin: 0; }

.icon-btn {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text-muted);
}
.icon-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); text-decoration: none; }
.icon-btn-danger:hover { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-danger-soft); }
.list-card-name { font-weight: var(--fw-600); letter-spacing: var(--ls-tight-2); }
.list-card-meta { grid-column: 1 / -1; display: flex; gap: var(--s-8); flex-wrap: wrap; font-size: var(--fs-12); color: var(--c-text-muted); }

.empty { padding: var(--s-16); text-align: center; color: var(--c-text-muted); font-size: var(--fs-13); }

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

.stats { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.stat {
  min-width: 120px; padding: var(--s-6) var(--s-8);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
}
.stat strong { display: block; margin-top: var(--s-2); font-size: var(--fs-18); letter-spacing: var(--ls-tight-3); }

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

/* No radius here: the surrounding card already clips, and rounding both
   leaves a visible square shoulder on the table header. */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-13); background: var(--c-surface); }
table.data th {
  padding: var(--s-6) var(--s-8); text-align: left; vertical-align: bottom;
  background: var(--c-surface-alt); border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-10); font-weight: var(--fw-600);
  letter-spacing: var(--ls-uppercase); text-transform: uppercase; color: var(--c-text-muted);
}
table.data td { padding: var(--s-5) var(--s-8); border-bottom: 1px solid var(--c-border); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--c-cool-100); }
.cell-person { display: flex; flex-direction: column; gap: 1px; }

/* The row is the control. Labels fill each cell so a click anywhere in the
   row reaches the checkbox, with no script involved. */
.pick-row { cursor: pointer; }
.pick-row:hover { background: var(--c-cool-100); }
.pick-row:has(input:checked) { background: var(--c-primary-soft); }
.pick-row td > label { display: block; margin: 0; cursor: pointer; }
.pick-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--c-primary); }
.matrix td:first-child { min-width: 190px; }
.cell-person span { font-size: var(--fs-11); color: var(--c-text-muted); }

/* ---------- Matrix ---------- */

.matrix th.slot { text-align: center; text-transform: none; letter-spacing: 0; color: var(--c-text); white-space: nowrap; }
.matrix th.slot b { display: block; font-size: var(--fs-13); font-weight: var(--fw-700); }
.matrix th.slot span { display: block; font-size: var(--fs-11); font-weight: var(--fw-400); color: var(--c-text-muted); }
.matrix td.slot { text-align: center; padding: var(--s-3) var(--s-5); }
.matrix td.slot form { margin: 0; display: block; }

.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 32px; margin: 0;
  border: 1px solid var(--c-gray-100); border-radius: var(--r-md);
  /* An empty control needs a fill, or it reads as a gap in the table. */
  background: var(--c-surface-alt); color: var(--c-ink-500);
  font-size: var(--fs-13); line-height: 1;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.mark:hover { border-color: var(--c-primary); background: var(--c-surface); box-shadow: var(--ring-primary); }
.mark-can { border-color: var(--c-blue-300); color: var(--c-primary); background: var(--c-cool-100); }
.mark-on { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-success); font-weight: var(--fw-700); }

.matrix tfoot td { border-top: 1px solid var(--c-border); background: var(--c-surface-alt); padding: var(--s-7) var(--s-8); }
.matrix tfoot .tally { display: block; margin-bottom: var(--s-4); font-size: var(--fs-12); color: var(--c-text-muted); text-align: center; }
.matrix tfoot .tally strong { color: var(--c-text); }

/* ---------- Two column layout ---------- */

.split { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--s-10); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------- Slot rows in the wizard ---------- */

.slot-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) 110px 110px minmax(120px, 1fr) auto;
  gap: var(--s-4); align-items: center; margin-bottom: var(--s-4);
}
.slot-row > .row-actions { display: flex; align-items: center; gap: var(--s-2); }
@media (max-width: 720px) {
  .slot-row { grid-template-columns: 1fr 1fr; }
  .slot-row > .row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

.chosen { list-style: none; margin: 0; padding: 0; }
.chosen li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) var(--s-10); border-bottom: 1px solid var(--c-border); font-size: var(--fs-13);
}
.chosen li:last-child { border-bottom: 0; }
.chosen form { margin: 0; display: flex; }

.preview { padding: var(--s-8); background: var(--c-surface-alt); overflow-x: auto; }

/* A control sitting beside an input matches the input, not the button scale. */
.input-group { display: flex; align-items: center; gap: var(--s-4); margin: 0; }
.input-group .btn { height: 38px; }

/* Rendered open by the server, so it needs no script to appear. */
.modal {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--scrim-modal);
  display: flex; align-items: flex-start; justify-content: center;
}
.modal-card {
  margin: 12vh var(--s-8) 0; padding: var(--s-12); width: 100%; max-width: 420px;
  background: var(--c-surface); border-radius: var(--r-2xl);
}
.modal-card h2 { margin-bottom: var(--s-3); font-size: var(--fs-18); }

/* On the allocation matrix a cell is either blue, meaning the member said
   they can, or red, meaning they did not. Green wins: that is a placement. */
.mark-cannot { border-color: var(--c-danger); color: var(--c-danger); background: var(--c-danger-soft); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); }
.chip {
  padding: var(--s-3) var(--s-7); border: 1px solid var(--c-border);
  border-radius: var(--r-pill); background: var(--c-surface);
  font-size: var(--fs-12); color: var(--c-text-muted);
}
.chip:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.chip[aria-pressed="true"] { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-white); }

/* Answers matrix: the cell carries a rank, so it is a select rather than a
   toggle. Kept the same size as the allocation tick for a steady grid. */
.rank-cell { margin: 0; display: inline-flex; gap: var(--s-3); align-items: center; }
select.rank {
  width: 56px; height: 32px; padding: 0 0 0 var(--s-4); margin: 0;
  text-align: center; font-variant-numeric: tabular-nums;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text-muted);
}
select.rank-on { border-color: var(--c-success); background: var(--c-success-soft); color: var(--c-status-customer-fg); font-weight: var(--fw-600); }
select.rank-cannot { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }

.status-control { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.status-control form { margin: 0; }

.list-row { display: flex; align-items: stretch; gap: var(--s-5); }
.list-row .list-card { flex: 1; }
.list-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.list-actions form { margin: 0; }
@media (max-width: 720px) {
  .list-row { flex-direction: column; }
  .list-actions { justify-content: flex-end; }
}

/* Compose beside preview, but only once the form can hold the subject line
   without clipping it. Below that the preview drops underneath rather than
   squeezing the field. */
.compose { display: flex; flex-direction: column; gap: var(--s-10); }
@media (min-width: 1100px) {
  .compose { display: grid; grid-template-columns: minmax(620px, 1.5fr) minmax(320px, 1fr); align-items: start; }
}

/* Actions beside a list card. A fixed column keeps the cards flush rather
   than ragged, whatever each row happens to offer. */
.list-actions { min-width: 168px; justify-content: flex-end; }
.list-actions .btn { min-width: 76px; }

/* A destructive action that still needs to line up with its neighbour: same
   shape and size, colour only on hover. */
.btn-danger-text { color: var(--c-danger); }
.btn-danger-text:hover { border-color: var(--c-danger); background: var(--c-danger-soft); color: var(--c-danger); }

/* Copy icon drawn in CSS, so no extra request and it follows currentColor. */
.copy-link { gap: var(--s-4); }
.copy-icon {
  position: relative; width: 11px; height: 13px; flex: none;
  border: 1.5px solid currentColor; border-radius: 2px;
}
.copy-icon::before {
  content: ""; position: absolute; left: 2px; top: -4px;
  width: 11px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px;
  border-bottom-color: transparent; border-left-color: transparent;
}