/* ── HST Hub — components built on top of marketing-site tokens ───────────── */

/* App shell main container */
.app-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
}

/* ── Service-card grid (hub landing) ──────────────────────────────────────── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.service-card {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 120ms ease, transform 120ms ease;
  display: block;
}
.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.service-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.service-card h3 {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.service-card h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background: var(--accent);
  border-radius: 2px;
}
.service-card p {
  color: var(--fg-mute);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ── KPI tile grid (dashboard) ────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.kpi-tile {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 1.25rem;
}
.kpi-tile.live {
  background: var(--accent-subtle);
  border-color: var(--accent-border-subtle);
}
.kpi-tile .kpi-label {
  color: var(--fg-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.kpi-tile .kpi-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.kpi-tile .kpi-sub {
  font-size: 0.85rem;
  color: var(--fg-mute);
  margin-top: 0.4rem;
}

/* ── Section panels (dashboard breakdowns) ────────────────────────────────── */
.panel {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.panel h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.panel h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background: var(--accent);
  border-radius: 2px;
}
.panel-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  .panel-grid-2 { grid-template-columns: 1fr; }
}

.bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 60px;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.bar-row .bar-track {
  height: 8px;
  background: var(--ink-3);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line-2);
}
.bar-row .bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}
.bar-row .bar-count {
  text-align: right;
  color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

/* ── Data table (pipeline, won, audit) ────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  overflow: hidden;
}
.data-table thead th {
  background: var(--ink-3);
  color: var(--fg-mute);
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.data-table thead th:hover {
  color: var(--accent);
}
.data-table thead th.sort-asc::after { content: ' ▲'; color: var(--accent); }
.data-table thead th.sort-desc::after { content: ' ▼'; color: var(--accent); }
.data-table tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.92rem;
  color: var(--fg);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr {
  cursor: pointer;
  transition: background 100ms ease;
}
.data-table tbody tr:hover {
  background: var(--accent-subtle);
}
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── Filters bar ──────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  align-items: center;
}
.filter-bar select,
.filter-bar input[type="search"] {
  background: var(--card-ink);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-family: inherit;
}
.filter-bar select:focus,
.filter-bar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.filter-bar label {
  font-size: 0.78rem;
  color: var(--fg-mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Stage / capital-type badges ──────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--line-2);
  background: var(--ink-3);
  color: var(--fg-mute);
}
.badge-stage-Researching   { background: rgba(148,163,184,0.15); color: var(--fg-mute); }
.badge-stage-Identified    { background: rgba(14,165,233,0.12);  color: var(--accent); border-color: var(--accent-border-subtle); }
.badge-stage-Preparing     { background: rgba(245,158,11,0.15);  color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.badge-stage-Submitted     { background: rgba(168,85,247,0.15);  color: #a855f7; border-color: rgba(168,85,247,0.3); }
.badge-stage-In-Review     { background: rgba(168,85,247,0.15);  color: #a855f7; border-color: rgba(168,85,247,0.3); }
.badge-stage-Awarded       { background: rgba(34,197,94,0.15);   color: #22c55e; border-color: rgba(34,197,94,0.3); }
.badge-stage-Declined      { background: rgba(239,68,68,0.12);   color: #ef4444; border-color: rgba(239,68,68,0.3); }
.badge-stage-Deferred      { background: var(--ink-3);         color: var(--fg-mute); }

/* ── Drop-zone (upload) ───────────────────────────────────────────────────── */
.drop-zone {
  display: block;          /* <label> is inline by default — without this the
                              dashed border collapses to a thin vertical sliver */
  cursor: pointer;
  border: 2px dashed var(--line-2);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  background: var(--card-ink);
  transition: border-color 150ms ease, background 150ms ease;
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.drop-zone input[type="file"] {
  display: none;
}
.drop-zone .drop-prompt {
  color: var(--fg-mute);
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

/* ── Progress chip ────────────────────────────────────────────────────────── */
.progress-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border-subtle);
  color: var(--accent);
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.progress-chip.error {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.3);
  color: #ef4444;
}
.progress-chip.success {
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.3);
  color: #22c55e;
}
.progress-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.progress-chip.parsing .dot,
.progress-chip.committing .dot {
  animation: hub-pulse 1.4s ease-in-out infinite;
}
@keyframes hub-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast-host {
  position: fixed;
  top: 80px;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  color: var(--fg);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.15);
  font-size: 0.9rem;
  max-width: 360px;
  border-left: 3px solid var(--accent);
  animation: hub-slide-in 200ms ease;
}
.toast.error { border-left-color: #ef4444; }
.toast.success { border-left-color: #22c55e; }
@keyframes hub-slide-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ── Detail page two-column layout ────────────────────────────────────────── */
/* Renamed from .detail-grid: the Notifications detail <dl> redefines
   .detail-grid later in this file (max-content 1fr), which silently overrode
   this layout AND its 900px collapse at every width. Funding detail uses
   .detail-cols; the <dl> keeps .detail-grid. */
.detail-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
.detail-cols > .panel { min-width: 0; }
@media (max-width: 900px) {
  .detail-cols { grid-template-columns: 1fr; }
}
.field-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1rem;
}
.field-list dt {
  color: var(--fg-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: center;
}
.field-list dd {
  margin: 0;
  color: var(--fg);
  font-size: 0.92rem;
}
.field-list dd.long { grid-column: 1 / -1; line-height: 1.55; }

/* ── Login page card ──────────────────────────────────────────────────────── */
.login-card {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  max-width: 28rem;
  margin: 4rem auto;
  text-align: center;
}
.login-card h1 {
  color: var(--accent);
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
}
.login-card p {
  color: var(--fg-mute);
  font-size: 0.95rem;
  margin: 0 0 2rem;
}
.login-error {
  color: #ef4444;
  font-size: 0.9rem;
  margin-top: 1rem;
}
.login-passkey-signin {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.login-auth-choice-hidden {
  display: none !important;
}
.login-passkey-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--input-bg);
  color: var(--fg);
  font: inherit;
  padding: 0.75rem 0.9rem;
  text-align: left;
}
.login-passkey-input::placeholder {
  color: var(--fg-mute);
}
.login-passkey-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
.login-passkey-step {
  margin-top: 1rem;
}
.login-passkey-step:empty {
  display: none;
}
.login-card .login-passkey-note {
  color: var(--fg);
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}
.login-card .login-passkey-status {
  min-height: 1.25rem;
  margin: 0;
}
.login-passkey-btn {
  justify-content: center;
  min-width: 13rem;
  width: 100%;
}
.login-passkey-btn.hidden {
  display: none;
}
.login-passkey-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

/* ── Generic state messages ───────────────────────────────────────────────── */
.state-empty,
.state-loading,
.state-error {
  text-align: center;
  padding: 2rem;
  color: var(--fg-mute);
}
.state-error { color: #ef4444; }

/* ── Modal (edit form) ────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  overflow-y: auto;
}
.modal-card {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  padding: 2rem;
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.4);
}
.modal-card h2 {
  color: var(--accent);
  margin: 0 0 0.25rem;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.modal-card h2::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background: var(--accent);
  border-radius: 2px;
}
.modal-card .modal-sub {
  color: var(--fg-mute);
  font-size: 0.85rem;
  margin: 0 0 1.5rem;
}
/* Unscoped from .modal-card: Department edit, policy-manual editor, and
   SecurityConnect reset render .form-grid/.form-actions outside a modal and
   were getting zero styling. minmax(0,1fr) lets date/number inputs shrink
   instead of forcing the grid wider than the card. */
.form-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: center;
}
.form-grid label {
  color: var(--fg-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.form-grid input,
.form-grid select,
.form-grid textarea {
  background: var(--ink-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.form-grid textarea { min-height: 80px; resize: vertical; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.modal-card .form-actions {
  justify-content: flex-end;
  margin-top: 1.5rem;
}
.form-error {
  color: #ef4444;
  font-size: 0.9rem;
  margin-top: 1rem;
}

/* ── Audit timeline ───────────────────────────────────────────────────────── */
.audit-list { list-style: none; padding: 0; margin: 0; }
.audit-list li {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.audit-list .audit-meta {
  color: var(--fg-mute);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.audit-list .audit-changes {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 0.82rem;
  color: var(--fg);
  background: var(--ink-3);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Notifications (Phase 2a + 2b) ───────────────────────────────────────── */

/* Compose form */
.compose-form {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.compose-form > label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.compose-form .form-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fg);
}
.compose-form input[type="text"],
.compose-form textarea {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  font-size: 0.95rem;
  color: var(--fg);
  font-family: inherit;
}
.compose-form textarea { resize: vertical; min-height: 5rem; }
.compose-form .char-count {
  font-size: 0.78rem;
  color: var(--fg-mute);
  align-self: flex-end;
}
.targeting-box {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent, #6cf);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.targeting-box .targeting-note {
  margin: 0.4rem 0 0;
  color: var(--fg-mute);
  font-size: 0.85rem;
}
.recipient-count-box {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.recipient-count-box .count-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--fg);
}
.recipient-count-box .count-breakdown {
  color: var(--fg-mute);
  font-size: 0.85rem;
}

/* Modal review grid + irreversibility warning */
.review-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.45rem 1rem;
  margin: 0.5rem 0 1rem;
  font-size: 0.92rem;
}
.review-grid dt {
  font-weight: 600;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  align-self: center;
}
.review-grid dd { margin: 0; word-break: break-word; }
.irreversibility-warning {
  background: rgba(255, 180, 60, 0.12);
  border: 1px solid rgba(255, 180, 60, 0.4);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  font-size: 0.88rem;
  color: var(--fg);
  margin: 0.75rem 0;
}

/* List view */
.list-toolbar {
  margin: 0.75rem 0 1rem;
  display: flex;
  justify-content: flex-end;
}
.notif-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.notif-table th,
.notif-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line-2);
}
.notif-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
  font-weight: 600;
}
.clickable-row { cursor: pointer; transition: background 120ms; }
.clickable-row:hover { background: var(--card-ink); }

/* Status badges (shared between list + detail) */
.notif-status {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
}
.notif-status-pending,
.notif-status-scheduled { background: rgba(140,140,160,0.15); color: var(--fg-mute); }
.notif-status-sending   { background: rgba(80, 160, 240, 0.16); color: #4a9be8; border-color: rgba(80,160,240,0.35); }
.notif-status-sent      { background: rgba(70, 200, 130, 0.16); color: #3aaf7a; border-color: rgba(70,200,130,0.35); }
.notif-status-partial   { background: rgba(255, 180, 60, 0.16); color: #d99a30; border-color: rgba(255,180,60,0.35); }
.notif-status-failed    { background: rgba(240, 90, 90, 0.16);  color: #d65454; border-color: rgba(240,90,90,0.35); }
.notif-status-cancelled,
.notif-status-expired   { background: rgba(140,140,160,0.10); color: var(--fg-mute); }

/* Detail view */
.back-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--fg-mute);
  margin-bottom: 0.75rem;
  text-decoration: none;
}
.back-link:hover { color: var(--fg); }

.detail-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
  align-items: center;
}
.detail-chip {
  font-size: 0.82rem;
  color: var(--fg-mute);
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
}
.detail-section {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}
.detail-section h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 600;
}
.detail-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  margin: 0;
  font-size: 0.92rem;
}
.detail-grid dt {
  color: var(--fg-mute);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}
.detail-grid dd { margin: 0; word-break: break-word; }

/* Audit trail (metadata-only render) */
.audit-trail { list-style: none; padding: 0; margin: 0; }
.audit-row {
  display: grid;
  grid-template-columns: max-content max-content 1fr max-content;
  gap: 0.6rem 1rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 0.88rem;
}
.audit-row:last-child { border-bottom: 0; }
.audit-time {
  color: var(--fg-mute);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.audit-action {
  font-weight: 600;
  font-family: 'SF Mono','Menlo','Consolas',monospace;
  font-size: 0.82rem;
}
.audit-actor { color: var(--fg-mute); font-size: 0.82rem; }
.audit-delta {
  color: var(--fg-mute);
  font-size: 0.78rem;
  font-family: 'SF Mono','Menlo','Consolas',monospace;
  white-space: nowrap;
}

.error-text { color: #d65454; }
.page-sub { color: var(--fg-mute); font-size: 0.92rem; }

/* ── Account security / passkeys ─────────────────────────────────────────── */
.account-security-head h1 {
  margin-bottom: 0.25rem;
}
.passkey-panel {
  max-width: 860px;
}
.passkey-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.passkey-panel-head h2 {
  margin: 0;
}
.security-alert {
  border: 1px solid rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
  color: var(--fg);
  border-radius: 6px;
  padding: 0.65rem 0.8rem;
  font-size: 0.88rem;
  margin-bottom: 0.9rem;
}
.security-alert.error {
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
}
.passkey-register-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.passkey-register-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 260px;
}
.passkey-register-form .form-label {
  color: var(--fg-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}
.passkey-register-form input[type="text"] {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.75rem;
  min-height: 2.6rem;
}
.passkey-register-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.passkey-inline-status {
  color: #d65454;
  font-size: 0.88rem;
  margin-top: 0.75rem;
  min-height: 1.2rem;
}
.passkey-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.passkey-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  background: var(--ink-3);
}
.passkey-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.passkey-row-main strong {
  color: var(--fg);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}
.passkey-meta {
  color: var(--fg-mute);
  font-size: 0.82rem;
  line-height: 1.4;
}
.passkey-disable-btn {
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.state-empty.compact {
  padding: 0.8rem;
  text-align: left;
}
@media (max-width: 680px) {
  .passkey-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .passkey-row {
    grid-template-columns: 1fr;
  }
  .passkey-disable-btn {
    justify-self: start;
  }
}

/* ── Service sub-nav (in-service navigation, replaces top-nav duplicates) ── */
.service-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.25rem 0 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-2);
}
/* Admin sub-nav stays pinned under the (sticky) site header on scroll.
   --subnav-top is set in JS to the header's measured height; --ink is the
   solid page background in both light + dark themes so rows don't show through. */
.service-subnav.subnav-sticky {
  position: sticky;
  top: var(--subnav-top, 64px);
  z-index: 40;
  margin-top: 0;
  padding-top: 0.75rem;
  background: var(--ink);
}
.service-subnav-link {
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--fg-mute);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.service-subnav-link:hover {
  color: var(--fg);
  background: var(--card-ink);
}
.service-subnav-link.active {
  color: var(--fg);
  background: var(--card-ink);
  border-color: var(--line-2);
  font-weight: 600;
}

/* ── Targeting builder (Phase 2c) ───────────────────────────────────────── */

.targeting-builder {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.targeting-mode-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.targeting-mode-tab {
  padding: 0.4rem 0.85rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.targeting-mode-tab:hover {
  color: var(--fg);
  background: var(--ink-3, rgba(0,0,0,0.04));
}
.targeting-mode-tab.active {
  background: var(--ink-3, rgba(0,0,0,0.06));
  color: var(--fg);
  border-color: var(--accent, #6cf);
  font-weight: 600;
}
.targeting-pane {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.4rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.filter-label {
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}
.filter-hint {
  font-size: 0.78rem;
  color: var(--fg-mute);
  font-style: italic;
}

/* Chip multi-select (depts, roles) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  padding: 0.32rem 0.7rem;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.84rem;
  color: var(--fg-mute);
  cursor: pointer;
  transition: background 100ms, color 100ms, border-color 100ms;
}
.chip:hover { color: var(--fg); }
.chip.selected {
  background: rgba(80, 160, 240, 0.16);
  color: #4a9be8;
  border-color: rgba(80, 160, 240, 0.55);
  font-weight: 600;
}

/* Platform radios */
.radio-row { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.84rem;
  cursor: pointer;
  color: var(--fg-mute);
}
.radio-pill input[type="radio"] { margin: 0; }
.radio-pill:has(input:checked) {
  color: var(--fg);
  background: rgba(80, 160, 240, 0.10);
  border-color: rgba(80, 160, 240, 0.45);
}

/* Activity dropdown */
.activity-select {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.42rem 0.65rem;
  font-size: 0.9rem;
  color: var(--fg);
  font-family: inherit;
  width: max-content;
  max-width: 100%;
}

/* Specific users textarea */
.specific-emails {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-family: 'SF Mono','Menlo','Consolas',monospace;
  font-size: 0.85rem;
  color: var(--fg);
  resize: vertical;
  min-height: 6rem;
}
.specific-emails-hint {
  font-size: 0.78rem;
  color: var(--fg-mute);
  margin-top: 0.25rem;
}

/* Dry-run toggle inside recipient-count box */
.dry-run-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--fg-mute);
  cursor: pointer;
  margin-left: auto;
}
.dry-run-label input[type="checkbox"] { margin: 0; }

/* Dry-run result modal list */
.dry-run-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.6rem 0;
  padding: 0.6rem;
  background: var(--ink-3, rgba(0,0,0,0.05));
  border-radius: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.dry-run-chip {
  padding: 0.18rem 0.5rem;
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: 'SF Mono','Menlo','Consolas',monospace;
  font-size: 0.78rem;
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Financials module (CFO Dashboard) — ported from
 * reference/cfo-handoff-v2/templates/dashboard.html
 *
 * All selectors are scoped under .financials-dashboard so they cannot
 * collide with existing hub styles. Tokens prefixed --fin-* to keep them
 * distinct from the existing --navy / --gold / etc. which the rest of the
 * hub uses with different values.
 * ═══════════════════════════════════════════════════════════════════════════
 */

.financials-dashboard {
  --fin-navy:      #0D3A7D;
  --fin-navy-deep: #081F4A;
  --fin-navy-soft: #1E4A8E;
  --fin-gold:      #C5A24A;
  --fin-gold-soft: #D9B96A;
  --fin-cream:     #F7F4EC;
  --fin-paper:     #FFFFFF;
  --fin-ink:       #0B1E3F;
  --fin-ink-soft:  #3A4A6B;
  --fin-rule:      #E4DFD2;
  --fin-good:      #1F7A4D;
  --fin-bad:       #A03A2A;
  --fin-warn:      #9C7A1F;
  color: var(--fin-ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
}
.financials-dashboard .num { font-variant-numeric: tabular-nums; }
.financials-dashboard h2 {
  font-size:13px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--fin-ink-soft); margin:0 0 14px 0; font-weight:700;
}
.financials-dashboard h3 {
  font-size:15px; margin:0 0 8px 0; font-weight:700; color:var(--fin-ink);
}

/* Header strip */
.fin-hdr {
  background: linear-gradient(180deg, var(--fin-navy) 0%, var(--fin-navy-deep) 100%);
  color:#fff; padding:22px 28px; border-bottom:3px solid var(--fin-gold);
  display:flex; align-items:center; gap:22px; border-radius:10px 10px 0 0;
}
.fin-hdr .fin-titles { flex:1; }
.fin-hdr h1 { color:#fff; font-size:22px; letter-spacing:-0.015em; margin:0; font-weight:700; }
.fin-hdr .fin-sub {
  color:var(--fin-gold-soft); font-size:12px; text-transform:uppercase;
  letter-spacing:.16em; margin-top:4px;
}
.fin-hdr .fin-meta {
  text-align:right; color:rgba(255,255,255,0.85); font-size:12px; line-height:1.6;
}
.fin-hdr .fin-meta b { color:#fff; font-weight:600; }

/* Container — sits on light cream regardless of hub theme */
.fin-wrap {
  background: var(--fin-cream);
  border:1px solid var(--fin-rule);
  border-radius:10px;
  padding:0 0 24px 0;
}
.fin-body { padding:24px 28px; }

/* Confidential stamp */
.fin-stamp {
  display:inline-flex; align-items:center; gap:6px;
  color:var(--fin-bad); font-weight:700;
  font-size:11px; text-transform:uppercase; letter-spacing:.10em;
}
.fin-stamp .fin-dot {
  width:8px; height:8px; border-radius:50%; background:var(--fin-bad);
}

/* KPI grid + tiles */
.fin-kpi-grid {
  display:grid; gap:14px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-bottom:14px;
}
.fin-kpi-grid.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
.fin-tile {
  background:var(--fin-paper); border:1px solid var(--fin-rule);
  border-radius:10px; padding:18px 20px;
  box-shadow:0 1px 0 rgba(11,30,63,0.04);
}
.fin-tile .fin-label {
  font-size:11px; text-transform:uppercase; letter-spacing:.10em;
  color:var(--fin-ink-soft); font-weight:600;
}
.fin-tile .fin-val {
  font-size:28px; font-weight:700; color:var(--fin-navy);
  margin-top:6px; letter-spacing:-0.02em;
}
.fin-tile .fin-tile-sub {
  font-size:12px; color:var(--fin-ink-soft); margin-top:4px;
}
.fin-tile.accent { border-top:3px solid var(--fin-gold); }
.fin-tile.warn .fin-val { color:var(--fin-warn); }
.fin-tile.bad  .fin-val { color:var(--fin-bad); }
.fin-tile.good .fin-val { color:var(--fin-good); }

/* Section cards */
.fin-card {
  background:var(--fin-paper); border:1px solid var(--fin-rule);
  border-radius:10px; padding:22px 24px;
  box-shadow:0 1px 0 rgba(11,30,63,0.04);
  margin-bottom:18px;
}
.fin-card.risk { border-left:4px solid var(--fin-bad); }
.fin-card .fin-ttl {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px; gap:12px; flex-wrap:wrap;
}
.fin-col2 {
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}

/* Badges */
.fin-badge {
  display:inline-block;
  background:rgba(13,58,125,0.08); color:var(--fin-navy);
  padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; border:1px solid rgba(13,58,125,0.18);
}
.fin-badge.gold {
  background:rgba(197,162,74,0.12); color:#7A5F1F;
  border-color:rgba(197,162,74,0.35);
}
.fin-badge.bad {
  background:rgba(160,58,42,0.10); color:var(--fin-bad);
  border-color:rgba(160,58,42,0.30);
}
.fin-badge.good {
  background:rgba(31,122,77,0.10); color:var(--fin-good);
  border-color:rgba(31,122,77,0.30);
}

/* Tables */
.fin-t { width:100%; border-collapse:collapse; }
.fin-t th, .fin-t td {
  text-align:left; padding:10px 8px;
  border-bottom:1px solid var(--fin-rule); font-size:13px;
}
.fin-t th {
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--fin-ink-soft); font-weight:600; background:transparent;
}
.fin-t td.n { text-align:right; font-variant-numeric:tabular-nums; }
.fin-t tr.total td {
  font-weight:700; border-top:2px solid var(--fin-ink);
  border-bottom:none; padding-top:12px;
}
.fin-t tr.sub td {
  color:var(--fin-ink-soft); font-size:12px;
  padding-top:2px; padding-bottom:8px; border-bottom:none;
}

/* Equity pill */
.fin-equity-pill {
  display:inline-block; background:var(--fin-navy); color:#fff;
  font-weight:600; padding:2px 8px; border-radius:6px;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.fin-equity-pill.reserved { background:var(--fin-gold); color:var(--fin-navy-deep); }

/* Burn bars (also used for recurring stack) */
.fin-bars { display:grid; gap:10px; margin-top:6px; }
.fin-bar-row {
  display:grid; grid-template-columns:180px 1fr 90px;
  align-items:center; gap:12px; font-size:13px;
}
.fin-bar-row .fin-amt {
  text-align:right; font-variant-numeric:tabular-nums;
  color:var(--fin-ink-soft); font-weight:600;
}
.fin-bar-track {
  height:14px; background:rgba(13,58,125,0.07);
  border-radius:4px; overflow:hidden;
}
.fin-bar-fill {
  height:100%;
  background:linear-gradient(90deg, var(--fin-navy) 0%, var(--fin-navy-soft) 100%);
  border-radius:4px;
}
.fin-bar-fill.gold {
  background:linear-gradient(90deg, var(--fin-gold) 0%, var(--fin-gold-soft) 100%);
}

/* 5-month trend */
.fin-trend {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin-top:8px;
}
.fin-trend .fin-m {
  background:rgba(13,58,125,0.04); border:1px solid var(--fin-rule);
  border-radius:8px; padding:12px; text-align:center;
}
.fin-trend .fin-mo {
  font-size:11px; color:var(--fin-ink-soft);
  text-transform:uppercase; letter-spacing:.10em; font-weight:600;
}
.fin-trend .fin-v {
  font-size:18px; color:var(--fin-navy); font-weight:700;
  margin-top:4px; font-variant-numeric:tabular-nums;
}
.fin-trend .fin-pp {
  font-size:11px; color:var(--fin-ink-soft); margin-top:2px; min-height:14px;
}

/* Projection table */
.fin-proj { width:100%; border-collapse:collapse; font-size:13px; }
.fin-proj th, .fin-proj td {
  padding:8px 10px; border-bottom:1px solid var(--fin-rule);
  text-align:right; font-variant-numeric:tabular-nums;
}
.fin-proj th:first-child, .fin-proj td:first-child {
  text-align:left; color:var(--fin-ink-soft);
}
.fin-proj th {
  font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--fin-ink-soft); font-weight:600;
}
.fin-proj tr.base td {
  background:rgba(197,162,74,0.07); font-weight:700; color:var(--fin-ink);
}

/* Notes */
.fin-note {
  background:rgba(197,162,74,0.10); border-left:3px solid var(--fin-gold);
  padding:10px 14px; border-radius:0 6px 6px 0;
  font-size:12px; color:var(--fin-ink-soft); margin-top:10px;
}
.fin-note b { color:var(--fin-ink); }

/* Footer */
.fin-foot {
  margin:30px 28px 0 28px; padding-top:18px;
  border-top:1px solid var(--fin-rule);
  color:var(--fin-ink-soft); font-size:11px; line-height:1.6;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* Snapshot history list — horizontal scroll on narrow viewports so the wide
   committed-by/timestamp columns don't spill outside the card. min-width on
   the inner table keeps columns from squishing into illegible widths. */
.fin-snap-list {
  background:var(--fin-paper); border:1px solid var(--fin-rule);
  border-radius:10px; padding:8px 4px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;  /* momentum scrolling on iOS */
}
.fin-snap-list table { min-width:760px; }

/* ─── Upload + Preview editor (Phase 4c) ──────────────────────────────────── */

/* 3-up drop zones */
.fin-upload-grid {
  display:grid; gap:12px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.fin-upload-drop {
  display:flex; flex-direction:column; gap:6px;
  background:var(--fin-paper); border:2px dashed rgba(13,58,125,0.25);
  border-radius:10px; padding:14px 16px; cursor:pointer;
  transition:background 120ms ease, border-color 120ms ease;
}
.fin-upload-drop:hover,
.fin-upload-drop.drag-over { border-color:var(--fin-navy); background:rgba(13,58,125,0.04); }
.fin-upload-drop.has-file  { border-color:var(--fin-good); border-style:solid; background:rgba(31,122,77,0.04); }
.fin-upload-kind {
  font-size:13px; font-weight:700; color:var(--fin-ink);
}
.fin-upload-hint {
  font-size:11px; color:var(--fin-ink-soft);
}
.fin-upload-filename {
  font-size:12px; color:var(--fin-ink-soft); font-style:italic;
  margin-top:auto;
  word-break:break-all;
}
.fin-upload-drop.has-file .fin-upload-filename {
  color:var(--fin-good); font-style:normal; font-weight:600;
}
.fin-upload-status {
  margin-top:6px;
}

/* Per-field row in preview editor */
.fin-field-row {
  display:grid; grid-template-columns:240px 1fr;
  gap:14px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--fin-rule);
}
.fin-field-row:last-of-type { border-bottom:none; }
.fin-field-label {
  font-size:13px; color:var(--fin-ink-soft); font-weight:600;
}
.fin-field-input {
  display:flex; gap:10px; align-items:center;
}
.fin-input {
  background:var(--fin-paper); border:1px solid var(--fin-rule);
  border-radius:6px; padding:6px 10px; font-size:13px;
  color:var(--fin-ink); width:100%; max-width:340px;
  font:13px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
}
.fin-input:focus {
  outline:none; border-color:var(--fin-navy); box-shadow:0 0 0 3px rgba(13,58,125,0.12);
}
.fin-input.num { font-variant-numeric:tabular-nums; }
.fin-input[type="textarea"], textarea.fin-input {
  font-family:inherit; min-height:54px; resize:vertical;
}
.fin-field-saved {
  font-size:11px; font-weight:600; min-width:64px;
  color:transparent; transition:color 120ms ease;
}
.fin-field-saved.saving { color:var(--fin-ink-soft); }
.fin-field-saved.saved  { color:var(--fin-good); }
.fin-field-saved.error  { color:var(--fin-bad); }

/* Sub-cards for category list + pending receivables */
.fin-subcard {
  margin:14px 0; padding:14px;
  background:rgba(13,58,125,0.03); border:1px solid var(--fin-rule);
  border-radius:8px;
}
.fin-subcard h3 {
  font-size:13px; color:var(--fin-ink); margin:0 0 4px;
  text-transform:uppercase; letter-spacing:.10em;
}
.fin-subcard-note {
  font-size:12px; color:var(--fin-ink-soft); margin:0 0 8px;
}
.fin-cat-table .fin-cat-name { font-size:13px; }

/* Pending receivables editor — rows of [source, amount, status, remove] */
.fin-pending-list {
  display:flex; flex-direction:column; gap:8px;
}
.fin-pending-row {
  display:grid; grid-template-columns:2fr 1fr 1.5fr auto;
  gap:8px; align-items:center;
}
.fin-pending-remove {
  font-size:11px; padding:4px 10px;
}

/* Parser warnings strip */
.fin-warning-list {
  background:rgba(156,122,31,0.08);
  border-left:3px solid var(--fin-warn);
  border-radius:0 6px 6px 0;
  padding:10px 14px; margin:0 0 16px 0;
}
.fin-warning-title {
  font-size:12px; font-weight:700; color:var(--fin-warn); margin-bottom:6px;
}
.fin-warning-list ul {
  margin:0; padding-left:18px; font-size:12px; color:var(--fin-ink-soft);
}
.fin-warning-list li { margin:2px 0; }

/* Commit bar — sticky-feel area at the bottom of the preview form */
.fin-commit-bar {
  margin-top:18px; padding:14px;
  background:rgba(197,162,74,0.06);
  border:1px solid rgba(197,162,74,0.30);
  border-radius:8px;
}

@media (max-width: 760px) {
  .fin-upload-grid { grid-template-columns:1fr; }
  .fin-field-row { grid-template-columns:1fr; gap:6px; }
  .fin-field-label { font-size:12px; }
  .fin-input { max-width:none; }
  .fin-pending-row { grid-template-columns:1fr; }
  .fin-pending-row .fin-pending-remove { justify-self:end; }
}

/* ─── Mobile global-nav drawer ────────────────────────────────────────────────
   styles.css ships responsive drawer styles for `.site-header nav`, but the
   hub uses `<nav class="site-nav">` containing `<div id="main-nav">`. Without
   these scoped rules, on mobile the nav-links overflow the viewport rather
   than collapsing into the hamburger drawer.
*/
@media (max-width: 768px) {
  #main-nav {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    width: 75%;
    max-width: 300px;
    height: 100dvh;
    background: var(--ink-2);
    border-left: 1px solid var(--line, rgba(255,255,255,0.1));
    padding: 5rem 1.5rem 2rem;
    transition: transform 0.3s ease;
    z-index: 1050;
    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #main-nav.open {
    transform: translateX(0);
  }
  #main-nav .nav-links {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  #main-nav .nav-links li {
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  }
  #main-nav .nav-links li:last-child {
    border-bottom: none;
  }
  #main-nav .nav-links a {
    display: block;
    padding: 0.85rem 0;
    font-size: 1rem;
  }
}

/* Responsive */
@media (max-width: 980px) {
  .fin-kpi-grid, .fin-kpi-grid.three { grid-template-columns:repeat(2, 1fr); }
  .fin-col2 { grid-template-columns:1fr; }
  .fin-bar-row { grid-template-columns:140px 1fr 80px; }
  .fin-trend { grid-template-columns:repeat(2, 1fr); }
  .fin-hdr { flex-wrap:wrap; }
  .fin-hdr .fin-meta { text-align:left; width:100%; }
}
@media (max-width: 560px) {
  .fin-kpi-grid, .fin-kpi-grid.three { grid-template-columns:1fr; }
  .fin-body { padding:18px 14px; }
  .fin-hdr { padding:18px; }
  .fin-hdr h1 { font-size:18px; }
}

/* ─── Balance Sheet tab (Financials) ──────────────────────────────────────────
 * Two-column layout: parsed-summary card on the left, PDF iframe on the right.
 * Stacks vertically on narrow viewports. PDF iframe sized to fit a typical
 * 8.5x11 portrait page above the fold on a laptop without scrolling.
 *
 * Naming convention: long-form `.balance-sheet-*` for the structural blocks
 * (layout, head, summary, pdf-host, empty), short-form `.bs-*` for the
 * components inside them (picker, summary-list, receivables, divider,
 * negative). The short names are NOT formally scoped under their parents —
 * they're flat global selectors that happen to be specific enough that
 * nothing else in hub.css collides today. If a future component reaches for
 * a `.bs-*` name, prefix this section's selectors under their natural parent
 * (e.g. `.balance-sheet-summary .bs-summary-list`) at that point.
 *
 * Theme tokens (defined in kit.css :root + html[data-theme="light"]):
 *   --card-ink   surface for cards         (dark: rgba near-black 85%; light: #fff)
 *   --line       soft border               (dark: rgba white 8%; light: #e2e8f0)
 *   --line-2     stronger border / select  (dark: rgba white 18%; light: #cbd5e1)
 *   --fg         primary text              (auto-themed)
 *   --fg-mute    secondary text            (auto-themed)
 *   --input-bg   form-field background     (auto-themed)
 * Earlier ad-hoc fallbacks like var(--bg-soft, #1a1a1a) hardcoded dark and
 * broke light mode. Use the real tokens so both themes work without re-edits.
 */
.balance-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.balance-sheet-controls { display:flex; gap:12px; align-items:center; }
.bs-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-size: 0.9rem;
}
.bs-picker {
  font: inherit;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--input-bg);
  color: var(--fg);
  min-width: 220px;
}
.balance-sheet-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 20px;
  align-items: start;
  margin: 0 auto 24px;
  padding: 0;
}
.balance-sheet-summary {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 18px 20px;
  font-size: 0.92rem;
  color: var(--fg);
}
.bs-summary-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.bs-summary-head strong { color: var(--fg); font-weight: 600; }
.bs-summary-sub { color: var(--fg-mute); font-size: 0.82rem; }
.bs-summary-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 16px;
  row-gap: 8px;
  margin: 0;
}
.bs-summary-list dt {
  color: var(--fg-mute);
  font-size: 0.85rem;
  margin: 0;
}
.bs-summary-list dd {
  margin: 0;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.balance-sheet-pdf-host {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.balance-sheet-pdf-frame {
  width: 100%;
  height: 80vh;
  min-height: 600px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;  /* iframe content is PDF (light); safe both themes */
}
.bs-pdf-loading { padding: 40px; text-align: center; color: var(--fg-mute); }
.bs-pdf-download { align-self: flex-start; }
.balance-sheet-empty {
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  padding: 28px 24px;
  background: var(--card-ink);
  color: var(--fg-mute);
  font-size: 0.92rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.balance-sheet-empty strong { color: var(--fg); font-size: 1rem; }
.balance-sheet-empty p { margin: 0; }

/* Multi-block summary card. Card contains: head, 3 dl row-blocks, a
 * <details> for receivables, and an <hr> separating BS items from runway
 * context. Each block keeps its own dl grid; vertical rhythm comes from
 * margin on the blocks rather than a single tall dl. */
.bs-summary-list + .bs-summary-list,
.bs-receivables + .bs-summary-list,
.bs-summary-list + .bs-receivables { margin-top: 10px; }

/* Soft divider between the BS group and the runway-context group. */
.bs-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}

/* Negative-amount styling. Parens are already in the formatter; this just
 * de-emphasizes the value so it reads as "loss" without screaming. Falls back
 * cleanly in both themes since --fin-bad is a single dark-red hex. */
.bs-negative { color: var(--fin-bad, #A03A2A); }

/* Expandable receivables row. Native <details>/<summary> for accessibility.
 * Summary row mimics the dl grid layout (label left, value right) so the
 * collapsed state visually fits the surrounding rows. Expanded state reveals
 * a nested list of awards with source / amount / status. */
.bs-receivables { margin: 0; }
.bs-receivables-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;        /* hide default ▶ disclosure marker (we add our own) */
  font-size: 0.85rem;
  color: var(--fg-mute);
}
.bs-receivables-summary::-webkit-details-marker { display: none; }
.bs-receivables-summary::before {
  content: "▸";
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card-ink));
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-2));
  border-radius: 999px;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.14);
  transition: transform 0.15s ease;
  transform-origin: center;
}
.bs-receivables[open] > .bs-receivables-summary::before {
  transform: rotate(90deg);
}
.bs-receivables-label {
  flex: 1;
  color: var(--fg-mute);
}
.bs-receivables-total {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  text-align: right;
}
.bs-receivables-items {
  list-style: none;
  margin: 6px 0 0;
  padding: 8px 10px 4px 18px;
  background: var(--ink-3);
  border-radius: 6px;
  font-size: 0.82rem;
}
.bs-receivables-item {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.bs-receivables-item:last-child { border-bottom: none; }
.bs-receivables-item-source {
  color: var(--fg);
  font-size: 0.85rem;
  margin-bottom: 2px;
}
.bs-receivables-item-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  color: var(--fg-mute);
  font-size: 0.78rem;
}
.bs-receivables-item-amount {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.bs-receivables-item-status { font-style: italic; }

@media (max-width: 900px) {
  .balance-sheet-layout {
    grid-template-columns: 1fr;
  }
  .balance-sheet-pdf-frame { height: 65vh; min-height: 340px; }
}

/* Very-narrow phones (≤420px). The default `max-content 1fr` grid on
 * `.bs-summary-list` lets a long label like "Owner contributions YTD" force
 * the first column wider than the card, pushing the right-aligned value off
 * screen. Below 420px we switch the label column to `1fr` and let labels
 * wrap; values stay right-aligned at their natural width. Receivables
 * `<summary>` already uses flex with `space-between` so it handles narrow
 * widths without help. */
@media (max-width: 420px) {
  .bs-summary-list {
    grid-template-columns: minmax(0, 1fr) max-content;
    column-gap: 12px;
  }
  .bs-summary-list dt { word-break: break-word; }
  .bs-receivables-summary { gap: 12px; }
  .balance-sheet-summary { padding: 16px; }
}

/* ── Command Center (ops dashboard) ───────────────────────────────────────── */
.cc-wrap { max-width: 1040px; margin: 0 auto; padding: 8px 0 48px; }
.cc-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 8px 0 4px;
}
.cc-titles h1, .cc-page-h { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--text); }
.cc-page-h { margin-bottom: 16px; }
.cc-sub { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.cc-stamp { color: var(--text-muted); font-size: 12px; white-space: nowrap; padding-top: 6px; }
.cc-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cc-refresh-btn { padding: 7px 12px; font-size: 12px; }
.cc-section-h { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 28px 0 12px; }

/* Directives */
.cc-directives { display: grid; gap: 10px; }
.cc-directive {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
}
.cc-directive-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
  display: grid; place-items: center;
}
.cc-directive { text-decoration: none; transition: border-color .15s, transform .15s; }
a.cc-directive:hover { border-color: var(--accent); transform: translateY(-1px); }
.cc-directive-main { flex: 1; }
.cc-directive-text { color: var(--text); font-weight: 600; font-size: 15px; }
.cc-directive-why { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.cc-directive-chev { color: var(--text-muted); font-size: 22px; line-height: 1; align-self: center; }
.cc-why-line { color: var(--text-muted); font-size: 14px; margin: 0 0 12px; }
.cc-why-line b { color: var(--text); }

/* Clickable KPI tiles (drill-down) */
a.kpi-link { text-decoration: none; position: relative; transition: border-color .15s, transform .15s; }
a.kpi-link:hover { border-color: var(--accent); transform: translateY(-1px); }
.kpi-drill { display: block; margin-top: 10px; color: var(--accent); font-size: 12px; font-weight: 600; }

/* Drill-down lists */
.cc-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.cc-tk-list { display: flex; flex-direction: column; }
.cc-tk-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cc-tk-row:last-child { border-bottom: 0; }
.cc-tk-type {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 4px; background: var(--border); color: var(--text-muted);
}
.cc-tktype-epic  { background: rgba(168,85,247,0.15); color: #a855f7; }
.cc-tktype-story { background: rgba(34,197,94,0.15);  color: #22c55e; }
.cc-tktype-task  { background: rgba(14,165,233,0.12); color: var(--accent); }
.cc-tk-sum { color: var(--text); font-size: 14px; }
.cc-rel-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cc-doc-frame { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-top: 4px; }

/* Project + report card grids */
.cc-project-grid, .cc-report-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.cc-project-card, .cc-report-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px; transition: border-color .15s, transform .15s;
}
.cc-project-card:hover, .cc-report-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cc-project-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-project-top h3, .cc-report-card h3 { font-size: 16px; font-weight: 650; margin: 0; color: var(--text); }
.cc-project-summary, .cc-report-card p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.cc-proj-updates { margin: 10px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.cc-proj-updates li { color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.cc-proj-updates li::marker { color: var(--accent); }
.cc-project-meta { display: flex; gap: 16px; color: var(--text-muted); font-size: 12px; margin-top: 12px; }
.cc-report-kind { color: var(--accent); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* Status badges */
.badge.cc-status { font-size: 11px; }
.cc-status-active  { background: rgba(34,197,94,0.15);  color: #22c55e; border-color: rgba(34,197,94,0.3); }
.cc-status-blocked { background: rgba(239,68,68,0.12);  color: #ef4444; border-color: rgba(239,68,68,0.3); }
.cc-status-shipped { background: rgba(14,165,233,0.12); color: var(--accent); border-color: var(--accent-border-subtle); }
.cc-status-paused  { background: rgba(148,163,184,0.15); color: var(--text-muted); }

/* Submit form — required marker + hint */
.cc-req { color: #ef4444; margin-left: 2px; }
.cc-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* Tickets tab */
.cc-ticket-filters { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.cc-filter { font-size: 12px; padding: 5px 12px; }
.cc-filter.is-on { border-color: var(--accent); color: var(--accent); }
.cc-ticket-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.cc-ticket-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.cc-ticket-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cc-ticket-top h3 { font-size: 16px; font-weight: 650; margin: 0; color: var(--text); }
.cc-ticket-badges { display: flex; gap: 6px; flex-shrink: 0; }
.cc-ticket-desc p { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.cc-ticket-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cc-att { font-size: 11px; color: var(--text-muted); background: var(--surface-2, rgba(148,163,184,0.1));
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.cc-ticket-meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  color: var(--text-muted); font-size: 12px; margin-top: 12px; }

/* Priority */
.badge.cc-prio { font-size: 11px; }
.cc-prio-high    { background: rgba(239,68,68,0.12);  color: #ef4444; border-color: rgba(239,68,68,0.3); }
.cc-prio-normal  { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.cc-prio-low     { background: rgba(148,163,184,0.1);  color: var(--text-muted); }

/* Note trail — what the automation did on this ticket */
.cc-ticket-notes { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.cc-notes-h { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 8px; }
.cc-note { border-left: 2px solid var(--accent-border-subtle, var(--border));
  padding: 0 0 0 10px; margin-bottom: 10px; }
.cc-note:last-child { margin-bottom: 0; }
.cc-note-meta { display: flex; gap: 8px; align-items: baseline; font-size: 11px;
  color: var(--text-muted); margin-bottom: 3px; }
.cc-note-by { font-weight: 650; color: var(--accent); }
.cc-note-text p { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 0 0 4px; }
.cc-note-text p:last-child { margin-bottom: 0; }

/* Auto-fix status chip */
.cc-ticket-fix { margin-top: 12px; }
.cc-autofix { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 3px 10px; border: 1px solid transparent; }
.cc-autofix-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.cc-autofix-queued   { background: rgba(148,163,184,0.15); color: var(--text-muted); }
.cc-autofix-running  { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.cc-autofix-running .cc-autofix-dot { animation: cc-pulse 1.4s ease-in-out infinite; }
.cc-autofix-deployed { background: rgba(34,197,94,0.15); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.cc-autofix-branch_pushed { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.cc-autofix-patch_ready { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.3); }
.cc-autofix-resolved { background: rgba(14,165,233,0.12); color: var(--accent); border-color: var(--accent-border-subtle); }
.cc-autofix-already_fixed { background: rgba(14,165,233,0.12); color: var(--accent); border-color: var(--accent-border-subtle); }
.cc-autofix-needs_review { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.cc-autofix-failed   { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.cc-autofix-skipped  { background: rgba(148,163,184,0.12); color: var(--text-muted); }
@keyframes cc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .cc-autofix-running .cc-autofix-dot { animation: none; }
}

/* Panels, reports, comments, forms */
.cc-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; margin-top: 4px;
}
.cc-panel p { color: var(--text); font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.cc-panel p:last-child { margin-bottom: 0; }
.cc-report-body p { color: var(--text); }

/* Rendered markdown (report drill-down) */
.cc-md h2, .cc-md h3, .cc-md h4 { color: var(--text); font-weight: 650; line-height: 1.3; margin: 18px 0 8px; }
.cc-md h2 { font-size: 18px; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.cc-md h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.cc-md h4 { font-size: 14px; }
.cc-md > :first-child { margin-top: 0; }
.cc-md p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.cc-md-ul { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.cc-md-ul li { font-size: 14px; line-height: 1.5; color: var(--text); }
.cc-md a { color: var(--accent); text-decoration: none; }
.cc-md a:hover { text-decoration: underline; }
.cc-md code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.cc-md strong { color: var(--text); font-weight: 650; }
.cc-md em { color: var(--text-muted); }
.cc-source { margin-top: 12px; color: var(--text-muted); font-size: 12px; }
.cc-source code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }

.cc-thread { display: grid; gap: 10px; }
.cc-comment { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.cc-comment-meta { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.cc-comment-meta b { color: var(--text); font-weight: 600; }
.cc-comment-body { color: var(--text); font-size: 14px; line-height: 1.5; }
.cc-comment-form, .cc-ticket-form { margin-top: 14px; display: grid; gap: 14px; }
/* align-items:start — grid items default to stretching to the row height, so a
   field with an extra child (the Where hint) makes the row taller and every
   OTHER field's label and control stretch to match, leaving the controls on
   different baselines. Top-align instead: each field keeps its natural height
   and all the controls line up. */
.cc-form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: start; }
/* Same height for selects and text inputs so the row reads as one line — the
   native control heights differ by a few px otherwise. */
.cc-ticket-form .cc-form-row select,
.cc-ticket-form .cc-form-row input { height: 41px; }
.cc-ticket-form select, .cc-ticket-form input, .cc-ticket-form textarea,
.cc-comment-form textarea {
  width: 100%; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  font: inherit; font-size: 14px;
}
.cc-ticket-form .btn, .cc-comment-form .btn { justify-self: start; }

/* Jira (CLO) ticket chips */
.cc-jira {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--border); background: var(--surface-strong, var(--surface));
  color: var(--text); cursor: pointer; transition: border-color .15s, background .15s;
}
.cc-jira:hover { border-color: var(--accent); }
.cc-jira-key { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--accent); letter-spacing: 0.02em; }
.cc-jira-status {
  padding: 1px 6px; border-radius: 4px; font-weight: 600; font-size: 10px;
  background: var(--border); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.cc-jira-ext { color: var(--text-muted); font-size: 10px; }
.cc-jira-to-do .cc-jira-status       { background: rgba(148,163,184,0.2);  color: var(--text-muted); }
.cc-jira-in-progress .cc-jira-status { background: rgba(245,158,11,0.18);  color: #f59e0b; }
.cc-jira-done .cc-jira-status        { background: rgba(34,197,94,0.18);   color: #22c55e; }
.cc-jira-blocked .cc-jira-status     { background: rgba(239,68,68,0.15);   color: #ef4444; }
.cc-jira-none {
  color: var(--text-muted); font-weight: 500; font-style: italic; cursor: default;
  border-style: dashed;
}
.cc-ticket-line { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.cc-ticket-label { color: var(--text-muted); font-size: 13px; }

/* Operations tab */
.cc-ops-calendar {
  margin-top: 22px; padding: 16px;
  background:
    linear-gradient(135deg, rgba(14,165,233,0.12), transparent 34%),
    var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
}
.cc-cal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.cc-cal-eyebrow {
  color: var(--accent); font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.cc-cal-head h2 { color: var(--text); font-size: 18px; margin: 3px 0 0; }
.cc-cal-headright { display: flex; align-items: center; gap: 14px; }
.cc-cal-nav { display: flex; align-items: center; gap: 4px; }
.cc-cal-navbtn, .cc-cal-today {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; line-height: 1;
}
.cc-cal-navbtn { width: 26px; height: 26px; font-size: 15px; }
.cc-cal-today { height: 26px; padding: 0 9px; font-size: 11px; font-weight: 700; }
.cc-cal-navbtn:hover, .cc-cal-today:hover { border-color: var(--accent); color: var(--accent); }
.cc-cal-navbtn:focus-visible, .cc-cal-today:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cc-cal-today[hidden] { display: none; }
.cc-cal-total {
  display: flex; flex-direction: column; align-items: flex-end;
  color: var(--text-muted); font-size: 11px; line-height: 1.2;
}
.cc-cal-total b { color: var(--text); font-size: 22px; line-height: 1; }
.cc-cal-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr); gap: 16px; }
.cc-cal-board {
  background: color-mix(in srgb, var(--surface) 82%, #38bdf8 18%);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px;
}
.cc-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cc-cal-weekdays span {
  color: var(--text-muted); font-size: 10px; font-weight: 700;
  text-align: center; text-transform: uppercase; letter-spacing: 0.05em;
}
.cc-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cc-cal-cell {
  min-height: 68px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.02); padding: 6px; overflow: hidden;
}
.cc-cal-empty { opacity: 0; }
.cc-cal-cell.has-events { border-color: rgba(14,165,233,0.4); background: rgba(14,165,233,0.08); }
.cc-cal-cell.today { box-shadow: inset 0 0 0 1px var(--accent); }
.cc-cal-day { color: var(--text); font-size: 12px; font-weight: 700; margin-bottom: 5px; }
.cc-cal-event {
  display: block; width: fit-content; max-width: 100%;
  color: var(--accent); background: rgba(14,165,233,0.13);
  border: 1px solid rgba(14,165,233,0.28); border-radius: 5px;
  padding: 2px 5px; font-size: 10px; font-weight: 800;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-cal-event + .cc-cal-event { margin-top: 3px; }
.cc-cal-more { color: var(--text-muted); font-size: 10px; margin-top: 3px; display: block; }
.cc-cal-agenda {
  background: rgba(0,0,0,0.12); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
}
.cc-cal-agenda h3 { color: var(--text); font-size: 14px; margin: 0 0 10px; }
.cc-cal-agenda-list { display: grid; gap: 9px; }
.cc-cal-agenda-item {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.cc-cal-agenda-item:last-child { border-bottom: 0; }
.cc-cal-agenda-date { color: var(--accent); font-size: 11px; font-weight: 750; }
.cc-cal-agenda-title {
  min-width: 0; color: var(--text); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cc-ops-bucket { margin-top: 22px; }
.cc-ops-bucket-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}
.cc-ops-bucket-head h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 650; }
.cc-ops-count {
  min-width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent-subtle); color: var(--accent); font-size: 12px; font-weight: 700;
}
.cc-ops-grid { display: grid; gap: 12px; margin-top: 12px; }
.cc-ops-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.cc-ops-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cc-ops-main { min-width: 0; }
.cc-ops-main h3 { margin: 3px 0 0; color: var(--text); font-size: 15px; font-weight: 650; line-height: 1.35; }
.cc-ops-type {
  color: var(--accent); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cc-ops-meta {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  color: var(--text-muted); font-size: 12px; margin-top: 10px;
}
.cc-ops-actions { margin-top: 12px; display: flex; justify-content: flex-start; }
.cc-ops-edit {
  margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px;
}
.cc-ops-edit summary {
  width: fit-content; color: var(--accent); font-size: 12px; font-weight: 650;
  cursor: pointer; list-style-position: outside;
}
.cc-ops-edit-grid {
  display: grid; grid-template-columns: minmax(150px, 220px) auto;
  gap: 10px; align-items: end; margin-top: 10px;
}
.cc-ops-comment-field { grid-column: 1 / -1; }
.cc-ops-edit select, .cc-ops-edit textarea {
  width: 100%; background: var(--input-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 10px;
  font: inherit; font-size: 13px;
}
.cc-ops-edit .btn { justify-self: start; padding: 8px 12px; font-size: 12px; }

/* Status tab: chart, backend, alerts */
.cc-panel-h { font-size: 14px; font-weight: 650; margin: 0 0 12px; color: var(--text); }
.cc-chart-panel { padding: 18px 18px 8px; }
.cc-chart { width: 100%; height: auto; display: block; }
.cc-chart-val { fill: var(--text); font-size: 12px; font-weight: 600; }
.cc-chart-lbl { fill: var(--text-muted); font-size: 11px; }
.cc-chart-axis { stroke: var(--border); stroke-width: 1; }
.cc-status-cols { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 4px; }
.cc-svc { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.cc-svc:last-child { border-bottom: 0; }
.cc-svc-name { flex: 1; color: var(--text); font-size: 14px; }
.cc-svc-state { color: var(--text-muted); font-size: 12px; text-transform: capitalize; }
.cc-svc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); }
.cc-svc-operational { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.18); }
.cc-svc-degraded { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.18); }
.cc-svc-down { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }
.cc-badge { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.cc-badge-warn { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.cc-alarm-summary { display: flex; align-items: baseline; gap: 8px; color: var(--text-muted); font-size: 13px; }
.cc-alarm-num { font-size: 28px; font-weight: 700; line-height: 1; }
.cc-alarm-num.good { color: #22c55e; }
.cc-alarm-num.bad { color: #ef4444; }
.cc-alarm-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); color: var(--text); font-size: 13px; }

/* Ticket attachments */
.cc-dropzone {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  border: 1.5px dashed var(--border); border-radius: 10px; padding: 18px;
  width: 100%; background: transparent; text-align: left; font: inherit;
  color: var(--text-muted); font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.cc-dropzone:hover, .cc-dropzone.drag { border-color: var(--accent); background: var(--accent-subtle); }
.cc-dropzone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cc-dz-icon { font-size: 18px; }
.cc-dz-link { color: var(--accent); font-weight: 600; }
.cc-dz-hint { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.cc-attachment-warning {
  margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(239,68,68,0.5);
  border-radius: 8px; background: rgba(239,68,68,0.1); color: var(--text);
  font-size: 13px; line-height: 1.45;
}
.cc-attachment-warning[hidden] { display: none; }
.cc-attachment-warning strong { color: #ef4444; }
.cc-attachment-warning ul { margin: 5px 0 0; padding-left: 20px; }
.cc-attachment-warning li + li { margin-top: 3px; }
.cc-other-dialog {
  box-sizing: border-box; width: calc(100% - 24px); max-width: 520px;
  margin: auto; color: var(--fg);
}
.cc-other-dialog::backdrop { background: rgba(15, 23, 42, 0.62); }
.cc-other-dialog .form-error[hidden] { display: none; }
.cc-other-count { margin-top: 5px; color: var(--fg-mute); font-size: 12px; text-align: right; }
.cc-other-detail {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-top: 6px; padding: 7px 9px; border: 1px solid var(--line-2);
  border-radius: 7px; color: var(--fg-mute); font-size: 12px; line-height: 1.4;
}
.cc-other-detail[hidden] { display: none; }
.cc-other-detail .btn { flex: none; }
.cc-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.cc-thumb {
  position: relative; width: 112px;
}
.cc-thumb img {
  width: 112px; height: 84px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); display: block;
}
.cc-thumb-file {
  width: 112px; height: 84px; display: grid; place-content: center; gap: 4px;
  text-align: center; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2, rgba(148,163,184,0.1)); color: var(--text);
}
.cc-thumb-file-icon { font-size: 25px; line-height: 1; }
.cc-thumb-file-type { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .06em; }
.cc-thumb-x {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; border: none; background: #ef4444; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.cc-thumb-name {
  display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 112px;
}

@media (max-width: 560px) {
  .cc-hdr { flex-direction: column; }
  .cc-actions { justify-content: flex-start; }
  .cc-stamp { padding-top: 0; }
  .cc-cal-layout { grid-template-columns: 1fr; }
  .cc-cal-cell { min-height: 54px; padding: 5px; }
  .cc-cal-agenda-item { grid-template-columns: 1fr; align-items: start; gap: 5px; }
  .cc-cal-agenda-title { white-space: normal; }
  .cc-ops-edit-grid { grid-template-columns: 1fr; }
}

/* ── Seal Identifier Ledger (.sl-*) ──────────────────────────────────────── */
.sl-wrap { max-width: 1040px; margin: 0 auto; padding: 8px 0 48px; }
.sl-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sl-titles h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.015em; margin: 0; color: var(--text); }
.sl-sub { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.sl-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sl-ranges { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.sl-range { background: transparent; border: 0; padding: 6px 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.sl-range + .sl-range { border-left: 1px solid var(--line-2); }
.sl-range.active { background: var(--accent); color: #0f172a; font-weight: 700; }
.sl-refresh { padding: 7px 12px; font-size: 12px; }
.sl-stamp { color: var(--text-muted); font-size: 12px; white-space: nowrap; }

.sl-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1088px) { .sl-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .sl-cols { grid-template-columns: 1fr; } }
.sl-col { background: var(--card-ink); border: 1px solid var(--line-2); border-radius: 10px; padding: 16px; min-width: 0; }
.sl-col-hdr { display: flex; align-items: center; gap: 8px; }
.sl-col-name { font-size: 16px; font-weight: 700; color: var(--text); }
.sl-col-reason { font-size: 12px; color: var(--text-muted); margin: 2px 0 12px; min-height: 16px; }
.sl-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.sl-dot.sl-green { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.sl-dot.sl-amber { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.sl-dot.sl-red   { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }

.sl-metrics { margin-bottom: 12px; }
.sl-count-n { font-size: 22px; font-weight: 800; color: var(--text); }
.sl-count-l { font-size: 12px; color: var(--text-muted); }
.sl-spark-wrap { margin: 8px 0 6px; }
.sl-spark { width: 100%; height: 44px; display: block; }
.sl-sub2 { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); gap: 8px; }
.sl-verify { white-space: nowrap; }

.sl-days { display: flex; flex-direction: column; gap: 4px; max-height: 360px; overflow-y: auto; }
.sl-day-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-top: 8px; }
.sl-seal { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text); text-decoration: none; padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px; }
.sl-seal:hover { border-color: var(--accent); }
.sl-seal-st { font-size: 10px; color: #f59e0b; text-transform: uppercase; }

.sl-footer { margin-top: 18px; }
.sl-pipe { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12px; color: var(--text-muted); padding: 10px 14px; background: var(--card-ink); border: 1px solid var(--line-2); border-radius: 8px; }
.sl-pipe-k { font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.sl-pipe-stamp { margin-left: auto; }
.sl-caveat { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; }
.sl-trunc { font-size: 11px; color: var(--text-muted); font-style: italic; padding: 4px 8px; }
.sl-stale { color: #ef4444; font-weight: 700; }
.sl-date { background: var(--card-ink); border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font-size: 12px; padding: 6px 8px; color-scheme: dark; }
.sl-live { padding: 7px 12px; font-size: 12px; }
.sl-dot.sl-hist { background: var(--text-muted); box-shadow: 0 0 0 3px rgba(148,163,184,.18); }
.sl-pending { font-size: 12px; color: var(--text); margin-top: 8px; padding: 8px 12px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35); border-radius: 8px; }
.sl-pending-n { font-weight: 800; color: #f59e0b; margin-right: 4px; }
.sl-pending a { color: var(--accent); }

/* ── Admin module (Phase 2, read-only) ────────────────────────────────────── */
.adm-wrap { display: block; }
.adm-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.adm-titles h1 {
  color: var(--accent);
  font-size: 1.5rem;
  margin: 0 0 0.25rem;
}
.adm-sub {
  color: var(--fg-mute);
  font-size: 0.9rem;
  max-width: 56ch;
  line-height: 1.5;
}
.adm-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.adm-viewonly {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-mute);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border-subtle);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}
.adm-grid { margin-top: 0.5rem; }

/* Tab pills (Vendors/Courses, Ads, SecurityConnect) */
.adm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.adm-tab {
  background: var(--card-ink);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--fg-mute);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
}
.adm-tab:hover { border-color: var(--accent); color: var(--fg); }
.adm-tab.active {
  background: var(--accent-subtle);
  border-color: var(--accent-border-subtle);
  color: var(--accent);
}

.adm-table tbody tr { cursor: pointer; }

/* Status pill — neutral by default, semantic tints for known states */
.adm-status {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  color: var(--fg-mute);
}
.adm-status-pending,
.adm-status-pending-moderation,
.adm-status-submitted,
.adm-status-review,
.adm-status-in-review { background: rgba(255,180,60,0.16); color: #d99a30; border-color: rgba(255,180,60,0.35); }
.adm-status-approved,
.adm-status-active,
.adm-status-canonical,
.adm-status-current,
.adm-status-published,
.adm-status-verified { background: rgba(70,200,130,0.16); color: #3aaf7a; border-color: rgba(70,200,130,0.35); }
.adm-status-rejected,
.adm-status-denied,
.adm-status-suspended,
.adm-status-past-due,
.adm-status-expired,
.adm-status-failed { background: rgba(240,90,90,0.16); color: #d65454; border-color: rgba(240,90,90,0.35); }

.adm-status-panel { margin-bottom: 1.25rem; }

/* PROVES requested-seal chips in the detail modal */
.adm-detail-h {
  color: var(--accent);
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
}
.adm-seal-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.adm-seal-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem;
  color: var(--fg-mute);
  background: var(--accent-subtle);
  border: 1px solid var(--accent-border-subtle);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  word-break: break-all;
}
.adm-refresh { font-size: 0.82rem; padding: 0.4rem 0.95rem; }

/* ── Admin module: write-action buttons + row action cells ───────────────── */
.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.8rem; border-radius: 7px; }
.btn-danger { background: #b42318; color: #fff; border-color: #b42318; }
.btn-danger:hover { background: #912018; }
.adm-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-modal-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Header toolbar above an admin table (e.g. Add user, Fetch new). */
.adm-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }

/* RCR refresh progress — values come from the persisted Lambda run status. */
.rcr-progress-panel {
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.rcr-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}
.rcr-progress-title {
  color: var(--fg);
  font-weight: 650;
}
.rcr-progress-percent {
  color: var(--accent);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.rcr-progress-track {
  position: relative;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--ink-3);
}
.rcr-progress-fill {
  position: relative;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #54d2c7);
  transition: width 350ms ease;
}
.rcr-progress-fill.running::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.35) 48%, transparent 75%);
  animation: rcr-progress-sheen 1.4s linear infinite;
}
.rcr-progress-detail,
.rcr-progress-summary {
  color: var(--fg-mute);
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.rcr-progress-summary { margin-top: 0.2rem; }
.rcr-progress-summary.error { color: #ef6b62; }
@keyframes rcr-progress-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .rcr-progress-fill { transition: none; }
  .rcr-progress-fill.running::after { animation: none; }
}

/* Reason / freeform textarea used by admPromptReason + the edit modals. */
.modal-card textarea.adm-reason {
  background: var(--ink-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.92rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  resize: vertical;
}
.modal-card textarea.adm-reason:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* Roles checkbox grid (Users page Roles + Add user modals). */
.adm-role-label {
  display: block;
  color: var(--fg-mute);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}
.adm-role-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.adm-role-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--ink-3);
}
.adm-role-row input[type="checkbox"] { margin-top: 0.2rem; flex: 0 0 auto; }
.adm-role-text { display: flex; flex-direction: column; gap: 0.15rem; }
.adm-role-name { color: var(--fg); font-size: 0.92rem; font-weight: 600; }
.adm-role-help { color: var(--fg-mute); font-size: 0.78rem; line-height: 1.4; }

/* Inline checkbox row (e.g. Global department). */
.adm-check { display: flex; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--fg); }
.adm-check input[type="checkbox"] { flex: 0 0 auto; }

/* Department policy-manuals editor + read-only manual cards. */
.adm-manuals { display: flex; flex-direction: column; gap: 0.85rem; }
.adm-manual-edit,
.adm-manual-card {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.85rem;
  background: var(--ink-3);
}
.adm-manual-edit .btn-sm { margin-top: 0.65rem; }

/* ── Admin module: stats row + filter pills + search ─────────────────────── */
.adm-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2);
  border-radius: 8px; overflow: hidden; margin-bottom: 1rem;
}
.adm-stat { background: var(--card-ink); padding: 0.85rem 1rem; }
.adm-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--fg, #f3f6fb); font-variant-numeric: tabular-nums; }
.adm-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-mute); margin-top: 2px; }
@media (max-width: 720px) { .adm-stats { grid-template-columns: repeat(2, 1fr); } }
.adm-toolbar { align-items: center; }
.adm-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-filter {
  padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: transparent; color: var(--fg-mute); border: 1px solid var(--line-2);
  cursor: pointer; transition: all 0.15s ease;
}
.adm-filter:hover { color: var(--fg, #f3f6fb); border-color: var(--accent); }
.adm-filter.active { background: var(--accent-subtle); color: var(--accent); border-color: var(--accent-border-subtle); }
.adm-search {
  margin-left: auto; min-width: 220px; padding: 0.5rem 0.8rem;
  background: var(--card-ink); color: var(--fg, #f3f6fb);
  border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 0.88rem;
}
.adm-search:focus { outline: none; border-color: var(--accent); }

/* ── Admin: wide-table horizontal scroll, alias chips, assessment metrics ─── */
.adm-table-host { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* .data-table's overflow:hidden made the table itself the scrollport, so the
   sticky Actions column pinned to the table's own edge (i.e. never stuck).
   The host is the scroll container; the table must let overflow through. */
.adm-table { min-width: 640px; overflow: visible; }
/* Pin the Actions column to the right edge so it stays visible when a wide
   table scrolls horizontally (--ink-3 is solid in both light + dark themes). */
.adm-table th:last-child,
.adm-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--ink-3);
  box-shadow: -8px 0 10px -8px rgba(0, 0, 0, 0.28);
}
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip {
  display: inline-block; padding: 2px 9px; border: 1px solid var(--line-2);
  border-radius: 6px; font-size: 0.8rem; font-family: ui-monospace, 'DM Mono', monospace;
  color: var(--fg-mute); background: var(--card-ink);
}
.adm-detail-note { color: var(--fg-mute); font-size: 0.85rem; }

/* ═══ Responsive audit 2026-07-29 — mobile (≤768px) + desktop fixes ═══════════
   Page-level horizontal overflow is clipped (styles.css `main{overflow-x:clip}`,
   `body{overflow-x:hidden}`), so anything wider than the viewport was silently
   unreachable on phones. Wide content now scrolls inside its own host. */

/* The closed mobile nav drawer (#main-nav, fixed + translateX(100%)) extends
   documentElement.scrollWidth ~280px past the right edge; body{overflow-x:
   hidden} doesn't cover the html scrollport, so phones could pan sideways
   into blank space on every signed-in page. */
html { overflow-x: hidden; }

/* ── Shared scroll hosts for wide tables ── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap   { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* was used by Notifications but never defined */
.fin-tscroll  { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── App shell ── */
@media (max-width: 768px) {
  /* styles.css tries `main{padding:1rem}` at ≤768 but .app-main outspecifies it */
  .app-main { padding: 1.25rem 1rem 2rem; }
}
/* Marketing hero default centered these; in the app they sit above left-aligned
   tables and filters. */
.app-main .cta-group { justify-content: flex-start; }
/* .content-section had no rules: h2 fell through to the marketing hero clamp
   (~43px on desktop). */
.content-section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.content-section > p { color: var(--fg-mute); }
/* 1rem inset + 360px cap = 376px > viewport at 375px */
.toast { max-width: min(360px, calc(100vw - 2rem)); }
/* GIS renders at intrinsic width; center it under the centered passkey button */
.login-card .g_id_signin { display: flex; justify-content: center; }

/* iOS Safari zooms the page when a focused control is under 16px. */
@media (max-width: 768px) {
  .filter-bar select, .filter-bar input[type="search"],
  .form-grid input, .form-grid select, .form-grid textarea,
  .fin-input, .adm-search, .pb-scope { font-size: 16px; }
}

/* Sub-navs: one scrollable row on phones instead of 2-4 wrapped rows of
   pinned chrome (Admin has 10 pills, Command Center 7). */
@media (max-width: 720px) {
  .service-subnav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; }
  .service-subnav::-webkit-scrollbar { display: none; }
  .service-subnav-link { flex: 0 0 auto; white-space: nowrap; }
}

/* ── Funding ── */
@media (max-width: 560px) {
  /* keep each label+select pair on one row; search spans full width */
  .filter-bar { display: grid; grid-template-columns: max-content minmax(0, 1fr);
    align-items: center; }
  .filter-bar input[type="search"] { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
}
@media (max-width: 480px) {
  .bar-row { grid-template-columns: minmax(0, 1fr) 60px; }
  .bar-row .bar-count { grid-column: 2; }
}
.audit-list { max-width: 900px; }

/* ── Modals ── */
@media (max-width: 560px) {
  .modal-backdrop { padding: 1.5rem 0.75rem 1rem; }
  .modal-card { padding: 1.25rem; }
  /* max-content labels + native date inputs forced the 2-col grid wider than
     the card; stack instead */
  .form-grid { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .form-grid label { margin-top: 0.5rem; }
}

/* ── Notifications ── */
.table-wrap .notif-table { min-width: 560px; }
@media (max-width: 560px) {
  .detail-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .detail-grid dt { margin-top: 0.5rem; }
}
@media (max-width: 640px) {
  .audit-row { grid-template-columns: 1fr; gap: 2px; }
  .audit-delta { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Financials ── */
@media (max-width: 560px) {
  /* 140px+80px fixed tracks left the bar ~7px wide at 375px */
  .fin-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
  .fin-bar-row .fin-bar-track { grid-column: 1 / -1; }
  .fin-foot { margin-left: 14px; margin-right: 14px; }
}
.fin-commit-bar > div { flex-wrap: wrap; }
.balance-sheet-controls { flex-wrap: wrap; }
@media (max-width: 760px) {
  .fin-cat-table { table-layout: fixed; }
  .fin-cat-table td:first-child, .fin-cat-table th:first-child {
    width: 55%; word-break: break-word; }
  .fin-cat-table .fin-input.num { min-width: 0; }
}
@media (max-width: 420px) {
  .bs-picker { min-width: 0; width: 100%; }
  .bs-picker-label { width: 100%; }
}

/* ── Command Center ── */
.cc-cal-head, .cc-cal-headright { flex-wrap: wrap; }
/* weekday header must share the day grid's track sizing or it can widen the board */
.cc-cal-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cc-project-meta { flex-wrap: wrap; gap: 6px 16px; }
.cc-ops-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
/* 560×210 viewBox stretched to ~1000px wide scaled labels to ~21px */
.cc-chart { max-width: 620px; margin-inline: auto; }
.cc-ticket-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.cc-md a, .cc-md code { overflow-wrap: anywhere; }
.cc-svc-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) {
  /* agenda's 260px floor starved the month board between 561-860px */
  .cc-cal-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cc-cal-grid, .cc-cal-weekdays { gap: 3px; }
  /* ~36px cells can't fit "CLO-54" chips; show colored dots (title/href kept) */
  .cc-cal-event { font-size: 0; padding: 0; width: 8px; height: 8px;
    border-radius: 50%; }
  .cc-cal-event + .cc-cal-event { margin-top: 2px; }
  .cc-cal-cell { min-height: 44px; }
  .cc-tk-row { flex-wrap: wrap; }
  .cc-tk-sum { min-width: 0; flex: 1 1 100%; }
}

/* ── Admin / Seal Ledger ── */
.field-list dd { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .field-list { grid-template-columns: 1fr; gap: 0.15rem; }
  .field-list dt { margin-top: 0.5rem; }
  .adm-search { margin-left: 0; width: 100%; min-width: 0; box-sizing: border-box; }
}
@media (max-width: 420px) {
  .adm-stats { grid-template-columns: 1fr; }
  .adm-stat-value { font-size: 1.25rem; }
}

/* ── Touch targets: compact controls get a taller hit area on touch screens ── */
@media (pointer: coarse) {
  .btn-sm, .adm-filter, .cc-filter { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}