/* ==========================================================================
   PFC 2.0 — APP SHELL + COMPONENT STYLES  (Plan §11.6, WP-2.3)
   Consumes ONLY tokens from tokens.css (no raw hex/px/font here except layout
   primitives). Every selector maps to a styleguide component or the app shell.
   ========================================================================== */

/* ---- Base / light reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---- Icons -------------------------------------------------------------- */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: middle;
}

/* ==========================================================================
   APP SHELL LAYOUT
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}
.app-main { display: flex; flex-direction: column; min-width: 0; }

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  background: var(--color-sidebar-bg);
  color: var(--color-sidebar-fg);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  z-index: 30;
}
.sidebar-brand {
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--topbar-height); flex: none;
  padding: 0 var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand-mark { font-size: var(--text-lg); line-height: 1; }
.sidebar-brand-text {
  font-weight: var(--weight-bold); letter-spacing: 0.02em;
  color: var(--color-sidebar-fg-strong); font-size: var(--text-md);
}
.sidebar-hide { margin-left: auto; color: var(--color-sidebar-fg); display: none; }

.sidebar-nav { padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-5); }
.nav-group-label {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-sidebar-fg); opacity: 0.6;
  padding: 0 var(--space-3) var(--space-2);
  font-weight: var(--weight-semibold);
}
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-sidebar-fg);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-item:hover { background: var(--color-sidebar-hover-bg); color: var(--color-sidebar-fg-strong); text-decoration: none; }
.nav-item.is-active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-fg-strong);
  box-shadow: inset 2px 0 0 var(--color-primary);
}
.nav-item-icon { opacity: 0.9; }
.nav-item-label { flex: 1; }
.nav-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  font-variant-numeric: var(--numeric);
  color: var(--color-primary-contrast); background: var(--color-primary);
  border-radius: var(--radius-full);
}

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-height); flex: none;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.topbar-menu { display: none; }
.breadcrumbs { min-width: 0; }
.breadcrumb-list { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); font-size: var(--text-base); }
.breadcrumb-item { display: flex; align-items: center; color: var(--color-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; margin: 0 var(--space-2); color: var(--color-text-subtle); }
.breadcrumb-item [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); }

.topbar-search {
  position: relative; margin-left: auto;
  display: flex; align-items: center; width: min(320px, 34vw);
}
.topbar-search-icon { position: absolute; left: var(--space-3); color: var(--color-text-subtle); }
.topbar-search input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-6) + var(--space-2));
  font: inherit; color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.topbar-search input:disabled { cursor: not-allowed; opacity: 0.7; }

.topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.topbar-user { display: flex; align-items: center; gap: var(--space-2); padding-left: var(--space-2); }
.avatar {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: var(--color-primary-contrast);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.topbar-user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.topbar-user-name { font-weight: var(--weight-semibold); color: var(--color-text); font-size: var(--text-sm); }
.topbar-user-role { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Theme toggle icon swap */
.icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .icon-sun { display: inline-block; }
  :root[data-theme="auto"] .icon-moon { display: none; }
}
:root[data-theme="dark"] .icon-sun { display: inline-block; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* ---- Content region ----------------------------------------------------- */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-12);
}

/* ---- Sidebar backdrop (small screens only) ------------------------------ */
.sidebar-backdrop { display: none; }

/* ==========================================================================
   FLASH MESSAGES
   ========================================================================== */
.flash-region { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.flash-region:empty { display: none; }
.flash {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-neutral-border);
  background: var(--color-neutral-bg); color: var(--color-neutral-fg);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.flash-icon { margin-top: 1px; }
.flash-text { flex: 1; color: var(--color-text); }
.flash-dismiss { margin: -4px -4px 0 0; color: var(--color-text-muted); }
.flash--success { background: var(--color-success-bg); border-color: var(--color-success-border); }
.flash--success .flash-icon { color: var(--color-success-fg); }
.flash--warn    { background: var(--color-warn-bg);    border-color: var(--color-warn-border); }
.flash--warn .flash-icon { color: var(--color-warn-fg); }
.flash--error   { background: var(--color-error-bg);   border-color: var(--color-error-border); }
.flash--error .flash-icon { color: var(--color-error-fg); }
.flash--info    { background: var(--color-info-bg);    border-color: var(--color-info-border); }
.flash--info .flash-icon { color: var(--color-info-fg); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  line-height: 1.2; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 16px; height: 16px; }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

.btn--primary { background: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-hover); }

.btn--secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-2); }

.btn--ghost { background: transparent; color: var(--color-text-muted); }
.btn--ghost:hover { background: var(--color-surface-2); color: var(--color-text); }

.btn--danger { background: var(--color-error-solid); color: #fff; }
.btn--danger:hover { filter: brightness(0.94); }

.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Icon-only button (topbar/sidebar affordances) */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  color: var(--color-text-muted); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }

/* ==========================================================================
   STATUS CHIPS
   ========================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  border: 1px solid var(--color-neutral-border);
  background: var(--color-neutral-bg); color: var(--color-neutral-fg);
  white-space: nowrap;
}
.chip-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-neutral-solid); flex: none; }
.chip--success { background: var(--color-success-bg); color: var(--color-success-fg); border-color: var(--color-success-border); }
.chip--success .chip-dot { background: var(--color-success-solid); }
.chip--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); border-color: var(--color-warn-border); }
.chip--warn .chip-dot { background: var(--color-warn-solid); }
.chip--error { background: var(--color-error-bg); color: var(--color-error-fg); border-color: var(--color-error-border); }
.chip--error .chip-dot { background: var(--color-error-solid); }
.chip--info { background: var(--color-info-bg); color: var(--color-info-fg); border-color: var(--color-info-border); }
.chip--info .chip-dot { background: var(--color-info-solid); }
.chip--neutral { background: var(--color-neutral-bg); color: var(--color-neutral-fg); border-color: var(--color-neutral-border); }

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-header-titlerow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.page-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-heading); line-height: var(--leading-tight); }
.page-subtitle { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-md); }
.page-header-actions { flex: none; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-heading); }
.card-subtitle { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.card-body { padding: var(--space-5); color: var(--color-text); }
.card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-surface-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ==========================================================================
   TABLES — dense (queues) + roomy (forms)
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table-caption { text-align: left; padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); caption-side: top; }
.table thead th {
  text-align: left; font-weight: var(--weight-semibold); color: var(--color-text-muted);
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--color-surface-2); border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table td { color: var(--color-text); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-2); }
.table .is-numeric { text-align: right; font-variant-numeric: var(--numeric); }
.table .is-muted { color: var(--color-text-subtle); }

/* Density variants */
.table--dense th, .table--dense td { padding: var(--space-2) var(--space-4); }
.table--dense { font-size: var(--text-sm); }
.table--roomy th, .table--roomy td { padding: var(--space-4) var(--space-5); }

/* ==========================================================================
   FORM FIELDS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.field-required { color: var(--color-error-solid); }
.field-control {
  width: 100%; padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-control::placeholder { color: var(--color-text-subtle); }
.field-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }
textarea.field-control { resize: vertical; min-height: 76px; }
.field-help { font-size: var(--text-sm); color: var(--color-text-muted); }

.field.has-error .field-control { border-color: var(--color-error-solid); }
.field.has-error .field-control:focus { box-shadow: 0 0 0 3px var(--color-error-border); }
.field-error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-error-fg); }
.field-error .icon { width: 15px; height: 15px; }

/* Disabled-with-reason (§11.3): field dims, caption explains WHY it's disabled */
.field.is-disabled .field-label { color: var(--color-text-muted); }
.field-control:disabled { background: var(--color-surface-2); color: var(--color-text-muted); cursor: not-allowed; }
.field-reason { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.field-reason .icon { width: 15px; height: 15px; color: var(--color-info-fg); }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.empty-state-icon {
  width: 48px; height: 48px; margin-bottom: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-subtle); background: var(--color-surface-2); border-radius: var(--radius-full);
}
.empty-state-icon .icon { width: 24px; height: 24px; }
.empty-state-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-heading); }
.empty-state-message { margin-top: var(--space-2); max-width: 42ch; color: var(--color-text-muted); }
.empty-state-action { margin-top: var(--space-5); }

/* ==========================================================================
   PROSE — long-form rendered content (user manual / Help / docs)
   Re-establishes the typographic rhythm the base reset zeroes out, using TOKENS
   only, scoped to `.prose` so it never leaks into component-built pages. Tables
   inside prose reuse the `.table` component and are not restyled here. This is the
   §11.6 mechanism: a page that needs new typography adds it to the shared library
   (here + /styleguide) first — never as page-local CSS.
   ========================================================================== */
.prose { color: var(--color-text); font-size: var(--text-base); line-height: var(--leading-normal); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--color-heading); font-weight: var(--weight-semibold);
  line-height: var(--leading-tight); margin: var(--space-6) 0 var(--space-3);
}
.prose h1 { font-size: var(--text-xl); }
.prose h2 { font-size: var(--text-lg); }
.prose h3 { font-size: var(--text-md); }
.prose h4 { font-size: var(--text-base); }
.prose p { margin: var(--space-3) 0; }
.prose ul, .prose ol { margin: var(--space-3) 0; padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: var(--space-1) 0; }
.prose li::marker { color: var(--color-text-muted); }
.prose a { color: var(--color-primary); text-decoration: underline; }
.prose strong { font-weight: var(--weight-semibold); color: var(--color-heading); }
.prose code {
  font-family: var(--font-mono); font-size: 0.9em;
  padding: 0.1em var(--space-1); border-radius: var(--radius-sm);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.prose pre {
  margin: var(--space-4) 0; padding: var(--space-4); overflow-x: auto;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.prose pre code { padding: 0; border: 0; background: none; font-size: var(--text-sm); }
.prose blockquote {
  margin: var(--space-4) 0; padding: var(--space-2) var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  color: var(--color-text-muted); font-style: italic;
}
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-6) 0; }
.prose .table-wrap { margin: var(--space-4) 0; }

/* ==========================================================================
   HTMX LOADING INDICATOR
   htmx toggles `.htmx-request` on the indicator (or triggering element); until
   then the indicator is display:none via htmx's own base rule + ours.
   ========================================================================== */
.loading-indicator { display: none; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.htmx-request .loading-indicator, .loading-indicator.htmx-request { display: inline-flex; }
.spinner { animation: pfc-spin 0.8s linear infinite; }
@keyframes pfc-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   MODAL / DIALOG  (shared shell for the confirm-dialog + add-change-dialog
   htmx primitives). A trigger hx-gets the dialog partial into a slot; the
   `.modal-overlay` is a fixed backdrop so it centres regardless of the slot's
   position in the page. `.modal` alone (no overlay) is the styleguide anatomy.
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: var(--color-scrim);
}
.modal {
  width: 100%; max-width: 32rem;
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--space-8));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.modal-head-icon { color: var(--color-text-muted); }
.modal-head-icon--warn { color: var(--color-warn-fg); }
.modal-title { flex: 1; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-heading); }
.modal-close { margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2)) calc(-1 * var(--space-1)) 0; }
.modal-body { padding: var(--space-5); color: var(--color-text); overflow-y: auto; }
.modal-body > * + * { margin-top: var(--space-4); }
.modal-message { color: var(--color-text); }
.modal-note { font-size: var(--text-sm); color: var(--color-text-muted); font-style: italic; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

/* ==========================================================================
   FORM ACTIONS (right-aligned button row for editor forms)
   ========================================================================== */
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

/* ==========================================================================
   DEADLINE EDITOR + PICKER (structured deadline primitive)
   ========================================================================== */
.deadline-picker { margin-bottom: var(--space-2); }
.deadline-editor-result:empty { display: none; }
.deadline-editor-result { margin-top: var(--space-5); }

/* ==========================================================================
   SANITIZED EMAIL PREVIEW (sandboxed iframe primitive)
   ========================================================================== */
.email-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.email-preview-head {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.email-preview-subject { font-weight: var(--weight-semibold); color: var(--color-heading); }
.email-preview-meta { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.email-preview-meta-label { color: var(--color-text-muted); min-width: 4.5rem; }
.email-preview-frame {
  display: block; width: 100%; height: 320px;
  border: 0; background: var(--color-surface);
}
.email-preview-note {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.email-preview-note .icon { width: 14px; height: 14px; color: var(--color-info-fg); }

/* ==========================================================================
   STAGED-CHANGE WORKBENCH (before -> after cards + add-change dialog)
   ========================================================================== */
.workbench-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.workbench-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-heading); }
.workbench-title .icon { color: var(--color-text-muted); }
.workbench-cards { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

.staged-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.staged-card-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
}
.staged-card-icon { color: var(--color-text-subtle); }
.staged-card-field { flex: 1; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.staged-card-remove { width: 28px; height: 28px; }
.staged-card-remove .icon { width: 15px; height: 15px; }

.staged-diff { display: grid; grid-template-columns: 1fr auto 1fr; }
.staged-diff-cell { padding: var(--space-3) var(--space-4); min-width: 0; }
.staged-diff-label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); opacity: 0.8; }
.staged-diff-value { font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-word; }
.staged-diff-before { background: var(--color-error-bg); color: var(--color-error-fg); }
.staged-diff-before .staged-diff-value { text-decoration: line-through; text-decoration-color: var(--color-error-border); }
.staged-diff-after { background: var(--color-success-bg); color: var(--color-success-fg); }
.staged-diff-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-text-subtle); padding: 0 var(--space-1); }
.staged-diff-arrow .icon { width: 16px; height: 16px; }

/* ==========================================================================
   LAYOUT UTILITIES (small, generic — used by pages + styleguide)
   ========================================================================== */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }

/* ==========================================================================
   STYLEGUIDE PAGE
   ========================================================================== */
.sg-section { margin-top: var(--space-10); }
.sg-section:first-of-type { margin-top: var(--space-6); }
.sg-section-title { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--color-heading); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-2); }
.sg-section-note { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-5); }
.sg-block { margin-top: var(--space-5); }
.sg-block-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-subtle); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); font-size: var(--text-xs); }
.sg-swatch-chip { height: 46px; }
.sg-swatch-meta { padding: var(--space-2) var(--space-3); }
.sg-swatch-name { font-weight: var(--weight-semibold); color: var(--color-text); }
.sg-swatch-var { color: var(--color-text-muted); font-family: var(--font-mono); }
.sg-scale-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.sg-scale-demo { background: var(--color-primary-soft-bg); border-radius: var(--radius-sm); height: 16px; }
.sg-scale-name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); width: 8rem; flex: none; }
.sg-type-row { padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.sg-type-row .sg-scale-name { display: inline-block; }

/* Force the (normally hidden) htmx loading indicator visible for documentation only. */
.sg-show-indicator .loading-indicator { display: inline-flex; }

/* Anatomy frame: shows a dialog panel (the `.modal` without its fixed overlay) in
   flow, so the styleguide documents the dialog's look without an interaction. */
.sg-demo-frame {
  display: flex; justify-content: center;
  padding: var(--space-6);
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   RESPONSIVE — sidebar becomes an off-canvas overlay on small screens
   ========================================================================== */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition);
    box-shadow: var(--shadow-lg);
  }
  .app-shell[data-sidebar-state="open"] .sidebar { transform: translateX(0); }
  .sidebar-hide { display: inline-flex; }
  .topbar-menu { display: inline-flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(2, 6, 23, 0.5); z-index: 25;
  }
  .topbar-search { width: auto; }
  .topbar-search input { width: 44vw; }
  .topbar-user-meta { display: none; }
  .content { padding: var(--space-4) var(--space-4) var(--space-10); }
}

@media (max-width: 560px) {
  .page-header { flex-direction: column; }
  .topbar-search { display: none; }
}

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}