/* Shared components for every page. Tokens, fonts and base element styles
   live in tokens.css; this file only arranges them. docs/DESIGN.md is the
   brief. Rules here read tokens and never a raw colour.

   The first half is the primitives (button, card, badge, tabs, table, input,
   dialog, menu, stat row). The second half restyles the class names the
   pages already use, so a page improves without being rewritten. */

@import url("/shared/tokens.css");

body { padding: 24px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
hr { border: 0; border-top: var(--hairline) solid var(--border); margin: 16px 0; }

/* ─── Button ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  font: inherit; font-size: var(--text-base); font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--accent-fg); background: var(--accent);
  border: var(--hairline) solid transparent; border-radius: var(--radius);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn:hover { background: var(--accent-hover); text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--accent); }
.btn.btn-secondary, .btn.ghost {
  color: var(--fg); background: var(--surface); border-color: var(--border-strong);
}
.btn.btn-secondary:hover, .btn.ghost:hover { background: var(--surface-2); }
.btn.btn-secondary:disabled:hover, .btn.ghost:disabled:hover { background: var(--surface); }
.btn.btn-ghost { color: var(--fg-2); background: transparent; border-color: transparent; }
.btn.btn-ghost:hover { color: var(--fg); background: var(--surface-2); }
.btn.btn-danger, .btn.danger { color: var(--bad-fg); background: var(--bad); }
.btn.btn-danger:hover, .btn.danger:hover { background: var(--bad-hover); }
.btn.btn-sm, .btn.sm { height: 28px; padding: 0 10px; font-size: var(--text-sm); }
.btn.lg { height: 36px; padding: 0 16px; }
.btn.btn-icon { width: 32px; padding: 0; }
.btn.btn-icon.btn-sm { width: 28px; }
.btn .icon { width: 14px; height: 14px; flex-shrink: 0; }
.btn.sm .icon, .btn.btn-sm .icon { width: 13px; height: 13px; }

/* Text buttons that read as links. */
.url-link, .url-action, .add-link, .review-link, .view-as-link, .link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: 500; color: var(--accent);
  text-decoration: none;
}
.url-link:hover, .url-action:hover, .add-link:hover, .review-link:hover,
.view-as-link:hover, .link-btn:hover { text-decoration: underline; text-underline-offset: 2px; }
.add-link.pending { color: var(--fg-2); }
.url-link .icon, .view-as-link .icon { opacity: .7; }

/* ─── Card ────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: var(--hairline) solid var(--border);
}
.card-header h2, .card-header h3 { font-size: var(--text-base); }
.card-body { padding: 16px; }
.card-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px; border-top: var(--hairline) solid var(--border);
}

/* ─── Badge ───────────────────────────────────────────────────────────── */
/* Neutral by default. Status colour is a dot and the text, never a fill. */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font-size: var(--text-xs); font-weight: 500; line-height: 1; white-space: nowrap;
  color: var(--fg-2); background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-sm);
}
.badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: none;
}
.badge.plain::before { display: none; }
.badge-good { color: var(--good); }
.badge-bad { color: var(--bad); }
.badge-good::before, .badge-bad::before { opacity: 1; }

/* ─── Tabs ────────────────────────────────────────────────────────────── */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px 20px;
  border-bottom: var(--hairline) solid var(--border);
}
.tab {
  position: relative; display: inline-flex; align-items: center;
  height: 36px; padding: 0 2px; margin-bottom: calc(-1 * var(--hairline));
  font: inherit; font-size: var(--text-base); font-weight: 500; color: var(--fg-3);
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; text-decoration: none;
}
.tab:hover { color: var(--fg); text-decoration: none; }
.tab[aria-selected="true"], .tab[aria-current="page"], .tab.active, .tab.current {
  color: var(--fg); border-bottom-color: var(--fg);
}

/* ─── Table ───────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
  overflow: auto;
}
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.table th, .table td {
  padding: 10px 12px; text-align: left; vertical-align: middle;
  border-bottom: var(--hairline) solid var(--border);
}
.table th {
  font-size: var(--text-sm); font-weight: 500; color: var(--fg-2);
  background: var(--surface-2); white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--surface-2); }
.table td.num, .table th.num { text-align: right; }
.table tr[aria-selected="true"] td { background: var(--accent-subtle); }

/* Below 640px a table with data-mobile-stack becomes one card per row. Each
   cell is labelled from data-label, which shared/ui/table.js copies from the
   column headers. Row actions (td.actions) move to the top of the card. */
@media (max-width: 640px) {
  table[data-mobile-stack], table[data-mobile-stack] tbody,
  table[data-mobile-stack] tr, table[data-mobile-stack] td { display: block; width: 100%; }
  table[data-mobile-stack] thead { display: none; }
  table[data-mobile-stack] tr {
    display: flex; flex-direction: column;
    padding: 12px; border-bottom: var(--hairline) solid var(--border);
  }
  table[data-mobile-stack] tbody tr:last-child { border-bottom: 0; }
  table[data-mobile-stack] td {
    display: grid; grid-template-columns: 40% 1fr; gap: 8px;
    padding: 4px 0; border: 0; text-align: left;
  }
  table[data-mobile-stack] td[data-label]::before {
    content: attr(data-label); color: var(--fg-3); font-size: var(--text-sm);
  }
  table[data-mobile-stack] td:not([data-label]), table[data-mobile-stack] td[data-label=""] { display: block; }
  table[data-mobile-stack] td[data-label=""]::before { display: none; }
  table[data-mobile-stack] td.actions { order: -1; display: flex; gap: 8px; padding-bottom: 8px; }
  table[data-mobile-stack] td.actions::before { display: none; }
  table[data-mobile-stack] tbody tr:hover td { background: none; }
}

/* ─── Input ───────────────────────────────────────────────────────────── */
.field, .input, .select, .textarea,
input.field, select.field, textarea.field {
  width: 100%; min-height: 32px; padding: 6px 10px;
  font: inherit; font-size: var(--text-base); color: var(--fg);
  background: var(--surface);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color .12s ease;
}
textarea.field, .textarea { min-height: 72px; line-height: 20px; resize: vertical; }
.field:hover, .input:hover, .select:hover, .textarea:hover { border-color: var(--fg-3); }
.field:focus, .input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring);
}
.field::placeholder, .input::placeholder, .textarea::placeholder { color: var(--fg-3); }
select.field, .select {
  appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236E7586' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.field:disabled, .field[readonly], .input:disabled, .input[readonly] {
  background: var(--surface-2); color: var(--fg); -webkit-text-fill-color: var(--fg);
  border-color: var(--border); opacity: 1; cursor: default;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
input[type="date"].field, input[type="month"].field { width: auto; }

.field-label, label.row .label-text { font-size: var(--text-sm); font-weight: 500; color: var(--fg); }
.field-hint, label.row .help { font-size: var(--text-xs); color: var(--fg-3); line-height: 16px; }
label.row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: var(--text-sm); color: var(--fg-2); }
label.row[hidden], label.check-row[hidden] { display: none; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.field-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .field-grid { grid-template-columns: 1fr; } }

.check-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border: var(--hairline) solid var(--border); border-radius: var(--radius);
}
label.check-row { cursor: pointer; margin-bottom: 0; }
label.check-row:has(input:disabled) { cursor: default; }
.check-row input[type="checkbox"] { flex: none; margin: 2px 0 0; cursor: pointer; }
.check-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .5; }
.check-row .check-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.check-row .check-label { font-weight: 500; color: var(--fg); font-size: var(--text-sm); }
.check-row .check-help { font-size: var(--text-xs); color: var(--fg-3); line-height: 16px; }

/* A standing explanation inside a form: a plain paragraph with a heading. */
.form-note { padding: 12px; border: var(--hairline) solid var(--border); border-radius: var(--radius); }
.form-note h4 { font-size: var(--text-sm); font-weight: 600; margin-bottom: 4px; }
.form-note p { font-size: var(--text-sm); color: var(--fg-2); }
.form-note p + p { margin-top: 6px; }

/* ─── Stat row ────────────────────────────────────────────────────────── */
/* One card of figures split by hairlines. Replaces every grid of KPI tiles. */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;
  box-shadow: calc(-1 * var(--hairline)) 0 0 var(--border);
  text-align: left; font: inherit; color: inherit; background: none; border: 0;
}
button.stat { cursor: pointer; }
button.stat:hover { background: var(--surface-2); }
.stat[aria-pressed="true"] { background: var(--accent-subtle); }
.stat-label { font-size: var(--text-sm); color: var(--fg-2); }
.stat-value { font-size: var(--text-lg); font-weight: 600; line-height: 24px; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: var(--text-xs); color: var(--fg-3); }
.stat-value.good { color: var(--good); }
.stat-value.bad { color: var(--bad); }

/* ─── Empty ───────────────────────────────────────────────────────────── */
.empty, .admin-table-empty { padding: 24px 16px; color: var(--fg-3); font-size: var(--text-sm); text-align: center; }

/* ─── Dialog ──────────────────────────────────────────────────────────── */
.dialog, .modal-card {
  width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 0; margin: auto; color: var(--fg);
  background: var(--raised);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  overflow: auto;
}
.dialog::backdrop { background: var(--scrim); }
.dialog-head, .modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 0;
}
.dialog-head h2, .modal-head h3 { font-size: var(--text-md); font-weight: 600; }
.dialog-body, .modal-body { padding: 12px 20px 16px; color: var(--fg-2); }
.dialog-foot, .modal-foot {
  display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
  padding: 12px 20px 16px;
}
.modal-backdrop {
  position: fixed; inset: 0; z-index: var(--z-dialog);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: var(--scrim);
}
.modal-backdrop[hidden] { display: none; }
.modal-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  color: var(--fg-3); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.modal-close:hover { color: var(--fg); background: var(--surface-2); }

/* ─── Menu and popover ────────────────────────────────────────────────── */
.kebab { position: relative; display: inline-block; }
.kebab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  color: var(--fg-3); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.kebab-btn:hover, .kebab-btn[aria-expanded="true"] { color: var(--fg); background: var(--surface-2); }
.menu, .kebab-menu, .popover {
  z-index: var(--z-popover);
  min-width: 180px; padding: 4px;
  background: var(--raised);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}
.kebab-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.kebab-menu[hidden], .menu[hidden], .popover[hidden] { display: none; }
.kebab-menu.kebab-menu--up { top: auto; bottom: calc(100% + 4px); }
.menu-item, .kebab-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 32px; padding: 0 8px;
  font: inherit; font-size: var(--text-base); color: var(--fg); text-align: left; white-space: nowrap;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
}
.menu-item:hover, .kebab-item:hover { background: var(--surface-2); text-decoration: none; }
.menu-item .icon, .kebab-item .icon { color: var(--fg-3); flex: none; }
.menu-item.danger, .kebab-item.danger, .menu-item.danger .icon, .kebab-item.danger .icon { color: var(--bad); }
.menu-sep { height: var(--hairline); margin: 4px -4px; background: var(--border); }

/* ─── Toast ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast);
  transform: translateX(-50%);
  max-width: calc(100vw - 32px); padding: 10px 14px;
  font-size: var(--text-base); color: var(--fg);
  background: var(--raised);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.toast.show { opacity: 1; pointer-events: auto; }
.toast.err { color: var(--bad); }
.toast.ok { color: var(--fg); }

/* ─── Alert ───────────────────────────────────────────────────────────── */
/* A plain bordered note. Only an error carries colour, and only in its text. */
.alert {
  padding: 10px 12px; margin-bottom: 12px;
  font-size: var(--text-sm); color: var(--fg-2);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
}
.alert.ok { color: var(--good); }
.alert.err { color: var(--bad); border-color: currentColor; }
.alert.view-as-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alert.view-as-banner .view-as-exit { margin-left: auto; font-weight: 500; white-space: nowrap; }

/* ─── Theme switch ────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--surface-2); border-radius: var(--radius);
}
.theme-toggle-seg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 24px; padding: 0;
  color: var(--fg-3); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.theme-toggle-seg:hover { color: var(--fg); }
.theme-toggle-seg.on { color: var(--fg); background: var(--surface); box-shadow: 0 0 0 var(--hairline) var(--border); }
.theme-toggle-seg .icon { width: 14px; height: 14px; }

/* ─── Page frame (until the shell replaces it) ────────────────────────── */
.container {
  max-width: 920px; margin: 0 auto;
  background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-lg);
}
.container.wide { max-width: 1240px; }
.container.member-view { max-width: 720px; }
/* Sign-in: a small card with room above it, not a page-wide banner. */
.container.narrow { max-width: 440px; margin-top: min(12vh, 96px); }
.container.narrow .header { flex-direction: column; align-items: flex-start; gap: 12px; }

.header {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  border-bottom: var(--hairline) solid var(--border);
}
.header .logo {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
}
.header .logo img { width: 100%; height: 100%; object-fit: contain; }
.header .header-text { flex: 1; min-width: 0; }
.header h1 { font-size: var(--text-lg); line-height: 28px; font-weight: 600; }
.header p { margin-top: 2px; font-size: var(--text-base); color: var(--fg-2); max-width: 720px; }
.header .brand-tag { display: block; font-size: var(--text-sm); color: var(--fg-3); margin-bottom: 2px; }
.header .header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.role-tag { display: none; }

.content { padding: 24px; }
.section { margin-bottom: 24px; }
.section h2 { font-size: var(--text-md); margin-bottom: 6px; }
.section .hint, .hint { font-size: var(--text-sm); color: var(--fg-2); margin-bottom: 12px; }
.muted { color: var(--fg-3); }
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .grow { flex: 1; }

.copy-link {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all;
  background: var(--surface-2); border-radius: var(--radius-sm);
}

/* Footer row: theme switch and links on the left, identity on the right. */
.footer-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 24px; padding-top: 16px; border-top: var(--hairline) solid var(--border);
  font-size: var(--text-sm); color: var(--fg-3);
}
.footer-bar .footer-left, .footer-bar .footer-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.footer-bar .footer-links { display: inline-flex; gap: 4px 16px; align-items: center; flex-wrap: wrap; }
.footer-bar .footer-link { color: var(--fg-2); font-size: var(--text-sm); }
.footer-bar .footer-link:hover { color: var(--fg); }
.signout-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--fg-2);
}
.signout-link:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* ─── Member steps ────────────────────────────────────────────────────── */
/* One card of rows, split by hairlines. Done is green, the current step is
   the one with a button, the rest are quiet. */
.stepper {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
}
.step {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 14px 16px;
  border-bottom: var(--hairline) solid var(--border);
}
.step:last-child { border-bottom: 0; }
.step .step-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: var(--text-xs); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fg-3); border: var(--hairline) solid var(--border-strong);
}
.step .step-icon .icon, .step .step-icon svg { width: 14px; height: 14px; }
.step.done .step-icon { color: var(--good); border-color: currentColor; }
.step.active .step-icon { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.step .step-body .step-title { font-size: var(--text-base); font-weight: 500; color: var(--fg); }
.step .step-body .step-desc { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-2); }
.step.locked .step-body .step-title { color: var(--fg-3); }
.step.locked .step-body .step-desc { color: var(--fg-3); }
.step .step-action { display: flex; gap: 8px; }

/* ─── Status pills on the admin board ─────────────────────────────────── */
/* Still clickable to open the inline editor. A small square chip: neutral
   text for waiting, green for done, red for blocked. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
  color: var(--fg-2); background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .5;
}
.pill:hover:not([disabled]) { border-color: var(--border-strong); background: var(--surface-2); }
.pill.available { color: var(--accent); }
.pill.signed, .pill.submitted, .pill.scheduled, .pill.done { color: var(--good); }
.pill.signed::before, .pill.submitted::before, .pill.scheduled::before, .pill.done::before { opacity: 1; }
.pill.blocked { color: var(--bad); }
.pill.blocked::before { opacity: 1; }
.pill.locked, .pill.waived { color: var(--fg-3); }
.pill.waived { border-style: dashed; }
.pill[disabled] { cursor: default; }

.pill-edit, .url-edit-row {
  display: inline-flex; align-items: center; gap: 2px;
  height: 28px; padding: 0 4px;
  background: var(--surface);
  border: var(--hairline) solid var(--ring); border-radius: var(--radius-sm);
}
.url-edit-row { width: 100%; max-width: 100%; padding-left: 8px; position: relative; z-index: 5; }
.pill-edit select {
  height: 24px; padding: 0 6px; border: 0; background: transparent; outline: none;
  font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--fg);
}
.pill-edit select option { color: var(--fg); background: var(--raised); }
.url-edit-row .url-input {
  flex: 1; min-width: 0; padding: 2px 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: var(--text-xs); color: var(--fg);
}
.pill-edit button, .url-edit-row button {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer;
}
.pill-edit button .icon { width: 12px; height: 12px; }
.pill-edit button.commit, .url-edit-row button.commit { color: var(--good); }
.pill-edit button.cancel, .url-edit-row button.cancel { color: var(--fg-3); }
.pill-edit button:hover, .url-edit-row button:hover { background: var(--surface-2); }
.url-edit { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.url-edit .url-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0;
  color: var(--fg-3); background: transparent; border: 0; border-radius: var(--radius-xs); cursor: pointer;
}
.url-edit .url-edit-btn:hover { color: var(--accent); background: var(--surface-2); }

/* ─── Admin board ─────────────────────────────────────────────────────── */
.admin-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.admin-toolbar .stat { font-size: var(--text-sm); color: var(--fg-3); white-space: nowrap; padding: 0 4px; }
.admin-toolbar .stat strong { color: var(--fg); font-weight: 600; }
.admin-toolbar .grow { flex: 1; min-width: 8px; }
.admin-toolbar .search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.admin-toolbar .search-wrap input {
  width: 100%; height: 32px; padding: 0 10px 0 32px;
  font: inherit; font-size: var(--text-base); color: var(--fg);
  background: var(--surface);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--radius-sm);
}
.admin-toolbar .search-wrap input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
.admin-toolbar .search-wrap .search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--fg-3); pointer-events: none;
}

.collapsible {
  margin-bottom: 16px; overflow: hidden;
  background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
}
.collapsible[hidden] { display: none; }
.collapsible h3 { padding: 12px 16px; font-size: var(--text-md); border-bottom: var(--hairline) solid var(--border); }
.collapsible .collapsible-body { padding: 16px; }

.admin-table-wrap {
  overflow: hidden;
  background: var(--surface);
  border: var(--hairline) solid var(--border); border-radius: var(--radius);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.admin-table th, .admin-table td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: var(--hairline) solid var(--border);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table th { font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); background: var(--surface-2); }
.admin-table tbody tr:hover td { background: var(--surface-2); }
.admin-table .business-name { font-size: var(--text-base); font-weight: 500; color: var(--fg); }
.admin-table .business-meta { margin-top: 2px; font-size: var(--text-sm); color: var(--fg-3); }
.admin-table .row-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.admin-table .view-as-link:disabled { opacity: .6; cursor: default; text-decoration: none; }

.group-row td { background: var(--surface-2) !important; }
.group-row .group-title { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg); }
.group-row .group-title .badge { height: 20px; color: var(--fg-2); }
.group-row .group-title .badge::before { display: none; }

/* ─── Survey ──────────────────────────────────────────────────────────── */
.survey-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: var(--hairline) solid var(--border); }
.survey-section:last-of-type { border-bottom: 0; }
.survey-section h3 { font-size: var(--text-md); margin-bottom: 12px; }
.survey-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-shell);
  background: var(--surface); border-top: var(--hairline) solid var(--border);
}
.survey-actions-inner {
  max-width: 720px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.survey-actions-btns { display: flex; gap: 8px; flex-shrink: 0; }
.survey-save-status { color: var(--fg-3); font-size: var(--text-sm); min-height: 1em; }
.survey-save-status.err { color: var(--bad); }
#survey-form { padding-bottom: 76px; }

/* ─── Phones ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { padding: 0; }
  .container { border-radius: 0; border-left: 0; border-right: 0; }
  .header { padding: 16px; gap: 12px; }
  .header .logo { width: 28px; height: 28px; }
  .header h1 { font-size: var(--text-md); line-height: 24px; }
  .content { padding: 16px; }
  .step { grid-template-columns: 24px minmax(0, 1fr); }
  .step .step-action { grid-column: 2; }
  .admin-toolbar .search-wrap { max-width: none; flex-basis: 100%; }
  .survey-actions-inner { padding: 10px 16px; flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .survey-actions-btns { justify-content: flex-end; }
  #survey-form { padding-bottom: 124px; }
}

/* ─── Team shell ──────────────────────────────────────────────────────── */
/* shared/ui/shell.js builds this. Expanded: a sidebar beside the page.
   .shell-collapsed: the sidebar docks into the top bar. Below 900px the top
   bar always shows and the sidebar is a sheet (.shell-sheet) over the page. */
.in-shell body { padding: 0; }
.shell { display: flex; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; z-index: var(--z-shell);
  display: flex; flex-direction: column; flex: none;
  width: 248px; height: 100vh; padding: 12px 10px;
  background: var(--surface); border-right: var(--hairline) solid var(--border);
}
.shell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-main { flex: 1; min-width: 0; }

.side-head { display: flex; align-items: center; gap: 4px; padding: 0 2px 12px 6px; }
.side-brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--fg); font-weight: 600; }
.side-brand:hover { text-decoration: none; }
.side-brand img { width: 22px; height: 22px; object-fit: contain; }
.side-close { display: none; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.side-section, .side-page {
  display: flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 8px; border-radius: var(--radius);
  color: var(--fg-2); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.side-section .icon { color: var(--fg-3); flex: none; }
.side-section > span:not(.side-chevron) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-section:hover, .side-page:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.side-section.active { color: var(--fg); }
.side-section.active .icon { color: var(--fg); }
.side-chevron { display: inline-flex; color: var(--fg-3); transition: transform .15s ease; }
.side-block.open .side-chevron { transform: rotate(90deg); }
.side-pages { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 8px 18px; }
.side-page { height: 30px; padding-left: 16px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.side-page[aria-current="page"] { color: var(--fg); font-weight: 500; background: var(--surface-2); }
.side-group {
  padding: 10px 8px 4px 16px; font-size: var(--text-xs); color: var(--fg-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-bottom { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: var(--hairline) solid var(--border); }
.side-cta:empty { display: none; }
.side-cta .btn { width: 100%; }
.side-footer { display: flex; align-items: center; gap: 2px; }
.side-footer .grow, .topbar .grow { flex: 1; }
.side-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius); color: var(--fg-3);
}
.side-icon:hover, .side-icon.active { color: var(--fg); background: var(--surface-2); }
.side-account { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: var(--text-xs); color: var(--fg-3); }
.side-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-account .link-btn { font-size: var(--text-xs); color: var(--fg-2); }

.topbar {
  position: sticky; top: 0; z-index: var(--z-shell);
  display: none; align-items: center; gap: 4px;
  height: 48px; padding: 0 12px;
  background: var(--surface); border-bottom: var(--hairline) solid var(--border);
}
.top-brand { display: inline-flex; margin-right: 8px; }
.top-brand img { width: 22px; height: 22px; object-fit: contain; }
.top-menu { display: none; }
.top-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.top-section, .top-pages {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px; border-radius: var(--radius);
  font: inherit; font-weight: 500; color: var(--fg-2); background: none; border: 0; cursor: pointer;
  white-space: nowrap; text-decoration: none;
}
.top-section .icon { color: var(--fg-3); }
.top-section:hover, .top-pages:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }
.top-section.active, .top-section.active .icon { color: var(--fg); }
.top-group { display: inline-flex; align-items: center; }
.top-slash { color: var(--border-strong); padding: 0 2px; }
.top-pages { color: var(--fg); }
.top-pages .icon { color: var(--fg-3); }
.top-icon.active { color: var(--fg); background: var(--surface-2); }
.top-cta { display: inline-flex; margin-right: 4px; }
.top-cta:empty { display: none; }

.shell-menu { position: fixed; max-height: calc(100vh - 80px); overflow-y: auto; }
.menu-item.current { font-weight: 500; background: var(--surface-2); }
.menu-note { padding: 6px 8px 2px; font-size: var(--text-xs); color: var(--fg-3); }
.shell-scrim { display: none; }

/* Collapsed on desktop: top bar in, sidebar out. */
.shell-collapsed .sidebar { display: none; }
.shell-collapsed .topbar { display: flex; }

/* The page inside the shell: no card frame, no banner, no own nav. */
.in-shell .container, .in-shell .container.wide {
  max-width: 1200px; margin: 0; border: 0; border-radius: 0; background: none;
}
.in-shell .header { padding: 28px 32px 0; border: 0; }
.in-shell .header .logo, .in-shell .header .brand-tag, .in-shell .crumbs,
.in-shell .header .page-nav, .in-shell .footer-bar, .in-shell .crm-nav,
.in-shell .header .theme-toggle, .in-shell .shell-main [data-shell-cta] { display: none; }
.in-shell .content { padding: 20px 32px 40px; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: var(--z-dialog);
    width: min(300px, 86vw); height: auto;
    box-shadow: var(--shadow-float); border-right: 0;
    transform: translateX(-100%); transition: transform .2s ease; visibility: hidden;
  }
  .shell-sheet .sidebar { transform: none; visibility: visible; }
  .shell-collapsed .sidebar { display: flex; }
  .side-collapse { display: none; }
  .side-close { display: inline-flex; }
  .shell-sheet .shell-scrim { display: block; position: fixed; inset: 0; z-index: calc(var(--z-dialog) - 1); background: var(--scrim); }
  .topbar { display: flex; }
  .top-menu { display: inline-flex; }
  .top-expand, .top-icon { display: none; }
  .top-nav .top-section:not(.active) { display: none; }
  .top-nav .top-section.active .top-label { display: none; }
  .in-shell .header { padding: 20px 16px 0; }
  .in-shell .content { padding: 16px 16px 32px; }
}
@media (max-width: 480px) {
  .top-brand { display: none; }
}