/* ========================================================================
   CCM Operating Hub: design system
   ──────────────────────────────────────────────────────────────────────────
   Editorial. Restrained. Magazine-native typography across screen + print.
   ======================================================================== */

:root {
  --ink: #1a1a18;
  --taupe: #B5A882;
  --warm-white: #f9f8f6;
  --parchment: #faf9f7;
  --border: #d8d5ce;
  --muted: #888780;
  --success: #3B6D11;
  --success-bg: #EAF3DE;
  --success-text: #27500A;
  --warning: #854F0B;
  --warning-bg: #FAEEDA;
  --warning-text: #633806;
  --danger: #A32D2D;
  --danger-bg: #FCEBEB;
  --danger-text: #791F1F;
  --tag-soft: #ede9e1;
  --sidebar-divider: #333;

  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
               Ubuntu, Cantarell, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--warm-white);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--taupe); }

/* ───────────────────── Typography ───────────────────── */
h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: normal;
  margin: 0;
}
.page-title {
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 18px;
  font-weight: normal;
  color: var(--ink);
  margin: 0 0 20px 0;
}
.section-header {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 12px 0;
}
.field-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
.serif-slash { color: var(--taupe); }
.muted { color: var(--muted); }
.empty-state {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  padding: 20px 0;
  text-align: center;
}

/* ───────────────────── Buttons ───────────────────── */
.btn {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  user-select: none;
}
.btn:hover { background: var(--taupe); border-color: var(--taupe); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn.btn-secondary {
  background: white;
  color: var(--ink);
  border-color: var(--border);
}
.btn.btn-secondary:hover { background: var(--warm-white); color: var(--ink); border-color: var(--border); }
.btn.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
}
.btn.btn-danger:hover { background: #861f1f; border-color: #861f1f; }
.btn.btn-danger-text {
  background: white;
  border-color: var(--border);
  color: var(--danger);
}
.btn.btn-danger-text:hover { background: var(--danger-bg); color: var(--danger); }
.btn.btn-sm { padding: 6px 10px; font-size: 9px; letter-spacing: 0.15em; }
.btn.btn-full { width: 100%; }

.spinner {
  width: 10px; height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ───────────────────── Inputs ───────────────────── */
.input, .select, .textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--taupe);
  background: white;
}
/* Faint placeholder so it's clearly not real input. */
.input::placeholder, .textarea::placeholder {
  color: #b8b6b0;
  font-style: italic;
  opacity: 1;
}
.input.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.input-error { color: var(--danger); font-size: 11px; margin-top: 4px; }

.field { margin-bottom: 14px; }

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23888780'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  padding-right: 32px;
}
.textarea { min-height: 80px; resize: vertical; }
/* Auto-grow textareas: no manual handle, height set in JS via element.style.height. */
.textarea.autogrow {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  min-height: 96px;
}

/* ───────────────────── Cards ───────────────────── */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
}
.card + .card { margin-top: 10px; }
.card-title { font-family: var(--font-serif); font-size: 13px; margin-bottom: 4px; }
.card-meta { color: var(--muted); font-size: 11px; margin-top: 4px; }

/* ───────────────────── Badges and tags ───────────────────── */
.badge {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  background: var(--taupe);
  color: white;
  border-radius: 0;
  line-height: 1.4;
  font-weight: 600;
}
.badge-count {
  background: var(--taupe);
  color: white;
  margin-left: 8px;
  padding: 2px 6px;
}
.badge-health-green { background: var(--success-bg); color: var(--success-text); }
.badge-health-amber { background: var(--warning-bg); color: var(--warning-text); }
.badge-health-red { background: var(--danger-bg); color: var(--danger-text); }
.badge-danger { background: var(--danger); color: white; }

.category-tag {
  display: inline-block;
  font-size: 9px;
  padding: 3px 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  line-height: 1.4;
}
.category-sales { background: var(--success); color: white; }
.category-client { background: var(--ink); color: white; }
.category-editorial { background: var(--taupe); color: white; }
.category-financial { background: var(--muted); color: white; }
.category-admin { background: var(--warm-white); color: var(--muted); border-color: var(--border); }

.tag-soft {
  display: inline-block;
  background: var(--tag-soft);
  color: var(--ink);
  font-size: 10px;
  padding: 2px 6px;
  margin-right: 4px;
  margin-bottom: 4px;
}

/* ───────────────────── Layout: app shell ───────────────────── */
.app-shell { display: block; min-height: 100vh; }
.sidebar {
  width: 200px;
  background: var(--ink);
  color: white;
  display: flex; flex-direction: column;
  position: fixed;          /* truly pinned; .main is offset via margin */
  top: 0; left: 0; bottom: 0;
  z-index: 50;
  overflow: hidden;
}
/* Desktop: white panel, full-color logo. */
.sidebar-logo {
  padding: 18px 20px;
  text-align: center;
  border-bottom: 0.5px solid var(--sidebar-divider);
  background: white;
}
.sidebar-logo img { height: 36px; width: auto; display: inline-block; }
.sidebar-logo .logo-color { display: inline-block; }
.sidebar-logo .logo-reverse { display: none; }
/* Mobile: reverse out against the dark sidebar bar using the black-transparent
 * source filtered to white. */
@media (max-width: 960px) {
  .sidebar-logo { background: transparent; padding: 0 10px; border-bottom: 0; }
  .sidebar-logo .logo-color { display: none; }
  .sidebar-logo .logo-reverse { display: inline-block; filter: invert(1); height: 18px; }
}

/* Hamburger button: hidden on desktop, shown on mobile */
.sidebar-toggle {
  display: none;
  background: transparent; border: 0;
  padding: 8px; margin: 0;
  cursor: pointer; width: 40px; height: 40px;
  position: absolute; right: 8px; top: 8px;
  flex-direction: column; gap: 4px; justify-content: center; align-items: center;
}
.sidebar-toggle span {
  display: block; width: 20px; height: 2px;
  background: white; transition: transform 0.2s ease, opacity 0.2s ease;
}
.sidebar-backdrop { display: none; }
.sidebar-nav {
  flex: 1; padding: 16px 0;
  overflow-y: auto;
  /* Hide the scrollbar visually but keep scroll-if-needed behavior. The
   * sidebar is a chrome element; a scrollbar in it reads as broken UI. */
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }
.sidebar-nav a {
  display: block;
  padding: 10px 18px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  font-weight: 600;
}
.sidebar-nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.sidebar-nav a:hover { color: var(--taupe); }
/* Section header : feels like an editorial kicker: hairline rule + small-caps
 * label. The rule is the real separator; the text is supporting. */
.sidebar-section {
  font-size: 9px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--taupe);
  margin: 22px 18px 2px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sidebar-divider);
  user-select: none;
}
/* Tighten items inside a section so they cluster together */
.sidebar-section + a { padding-top: 6px; }
.sidebar-nav > a { padding-top: 7px; padding-bottom: 7px; }
.sidebar-nav a.active {
  color: white;
  border-left-color: var(--taupe);
  background: rgba(181, 168, 130, 0.06);
}
/* Smart-alert badges next to Contracts / Invoices / Proposals : appear
 * only when something needs your attention. */
.nav-badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  background: var(--danger); color: white;
  border-radius: 999px;
  min-width: 18px; text-align: center;
  line-height: 1.2;
}
.nav-badge.soft { background: var(--taupe); }
.sidebar-user {
  padding: 14px 18px;
  border-top: 0.5px solid var(--sidebar-divider);
  color: var(--muted);
  font-size: 11px;
}
.sidebar-user .username { color: white; font-size: 12px; display: block; margin-bottom: 2px; }
.sidebar-user button.signout {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--sidebar-divider);
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 6px 10px;
  cursor: pointer;
  width: 100%;
}
.sidebar-user button.signout:hover { color: var(--taupe); border-color: var(--taupe); }

.main { margin-left: 200px; min-width: 0; padding: 24px 32px 80px 32px; }

/* Mobile-first header (Kevin / Carly) */
.mobile-header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  text-align: center;
  position: sticky; top: 0; z-index: 10;
}
.mobile-header img { height: 24px; }
.mobile-subtitle {
  font-family: var(--font-serif);
  color: var(--ink);
  font-size: 18px;
  margin-top: 6px;
}
.mobile-date {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.mobile-main { padding: 16px; }

/* ───────────────────── Login ───────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--warm-white);
}
.login-card {
  background: white;
  border: 1px solid var(--border);
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
}
.login-logo { text-align: center; margin-bottom: 16px; }
.login-logo img { height: 40px; }
.login-rule {
  height: 1px;
  background: var(--taupe);
  margin: 20px auto 28px auto;
  width: 60px;
}
.login-divider {
  display: flex; align-items: center;
  margin: 24px 0 14px 0;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.login-divider span { padding: 0 12px; }
.login-roles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.login-role-btn {
  background: white;
  border: 1px solid var(--border);
  padding: 10px 4px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.login-role-btn .role-name { font-family: var(--font-serif); font-size: 13px; text-transform: none; letter-spacing: 0; display: block; margin-bottom: 2px; color: var(--ink); }
.login-role-btn:hover { background: var(--warm-white); border-color: var(--taupe); }

/* ───────────────────── Toasts ───────────────────── */
.toast-container {
  position: fixed; right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 1000;
  max-width: 360px;
}
.toast {
  background: white;
  border: 1px solid var(--border);
  border-left: 2px solid var(--muted);
  padding: 12px 14px 12px 14px;
  display: flex; align-items: center; gap: 12px;
  min-width: 260px;
  font-size: 12px;
  animation: toast-in 0.22s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.info { border-left-color: #34608a; }
.toast.closing { animation: toast-out 0.3s ease forwards; }
.toast .message { flex: 1; }
.toast .close {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 16px; line-height: 1;
  padding: 0 4px;
}
.toast .close:hover { color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ───────────────────── Confirm modal ───────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 26, 24, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1100;
  padding: 20px;
}
.modal-card {
  background: white;
  border: 1px solid var(--border);
  padding: 28px 28px 20px 28px;
  width: 100%;
  max-width: 440px;
}
.modal-title {
  font-family: var(--font-serif);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.modal-body { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ───────────────────── Skeleton ───────────────────── */
.skeleton {
  display: block;
  background: linear-gradient(90deg, #efece6 0%, #f6f4ef 50%, #efece6 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  height: 14px;
  width: 100%;
  margin-bottom: 8px;
}
.skeleton.short { width: 40%; }
.skeleton.block { height: 60px; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ───────────────────── Dashboard : editorial ───────────────────── */

/* Masthead / greeting : editorial magazine feel. One thin rule only. */
.editorial-masthead {
  margin: 0 0 30px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.editorial-masthead .masthead-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.editorial-masthead .greeting {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: 0.005em;
  font-weight: normal;
}
.editorial-masthead .dateline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.editorial-masthead .masthead-issue { text-align: right; }
.editorial-masthead .masthead-issue-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  font-weight: 600;
}
.editorial-masthead .masthead-issue-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  margin-top: 3px;
}
.editorial-masthead .kicker {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 600;
  display: flex; align-items: center; gap: 12px;
}
.editorial-masthead .kicker::before,
.editorial-masthead .kicker::after {
  content: ''; flex: 0 0 24px; height: 1px; background: var(--taupe);
}
.editorial-masthead .kicker span.slash { color: var(--taupe); padding: 0 6px; }

/* Unified page masthead used on every Betsy view */
.page-masthead {
  margin: 0 0 30px 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.page-masthead .kicker {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.page-masthead .kicker .slash { color: var(--taupe); padding: 0 6px; }
.page-masthead h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  color: var(--ink);
  letter-spacing: 0.005em;
  line-height: 1.1;
  font-weight: normal;
  margin: 0;
}
.page-masthead .dateline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}
.page-masthead .dateline .slash { color: var(--taupe); padding: 0 6px; }
@media (max-width: 960px) {
  .page-masthead h1 { font-size: 26px; }
  .page-masthead { margin-bottom: 20px; padding-bottom: 12px; }
  .page-masthead .kicker { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 6px; }
}

/* Numbered column kickers : "01 / Today" editorial pattern */
.col-head .col-number {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--taupe);
  margin-right: 10px;
  letter-spacing: 0.04em;
}
.col-head .col-slash {
  color: var(--taupe);
  margin-right: 8px;
  font-weight: 300;
}

/* Dashboard columns separated by gap alone : no vertical rules (they were
 * causing header misalignment between columns). */
/* Decorative ornament under section masthead : removed per design feedback;
 * the partial line read as broken rather than editorial flourish. */
.editorial-masthead .ornament { display: none; }

/* At-a-glance : magazine-style stats strip */
.at-a-glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: white;
  margin-bottom: 32px;
}
.glance-cell {
  padding: 20px 22px;
  border-right: 1px solid var(--border);
  position: relative;
  min-height: 90px;
}
.glance-cell:last-child { border-right: 0; }
.glance-cell .glance-n {
  font-family: var(--font-serif);
  font-size: 32px;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: 0;
}
.glance-cell .glance-suf {
  font-size: 18px;
  color: var(--muted);
  margin-left: 4px;
}
.glance-cell .glance-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .at-a-glance { grid-template-columns: repeat(2, 1fr); }
  .glance-cell:nth-child(2n) { border-right: 0; }
  .glance-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* ── Settings page ── */
.settings-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: start;
}
.settings-toc {
  position: sticky; top: 24px;
  display: flex; flex-direction: column;
  border-left: 1px solid var(--border);
  padding-left: 0;
}
.settings-toc a {
  display: block;
  padding: 8px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
  font-weight: 600;
}
.settings-toc a:hover { color: var(--ink); }
.settings-toc a.active {
  color: var(--ink);
  border-left-color: var(--taupe);
}
.settings-content { min-width: 0; }
@media (max-width: 900px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-toc {
    position: static;
    flex-direction: row; flex-wrap: wrap;
    border-left: 0; border-bottom: 1px solid var(--border);
    padding-bottom: 8px; margin-bottom: 14px;
  }
  .settings-toc a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .settings-toc a.active { border-bottom-color: var(--taupe); }
}
.settings-section {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 24px;
}
.settings-section:last-child { border-bottom: 0; }
.settings-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.settings-head h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  margin: 0 0 4px 0;
  letter-spacing: 0.04em;
}
.settings-helper { color: var(--muted); font-size: 12px; font-style: italic; }
.settings-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--border);
}
.settings-table th, .settings-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}
.settings-table th {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 9px;
  color: var(--muted);
  background: var(--parchment);
  font-weight: 600;
}
.settings-table tbody tr:last-child td { border-bottom: 0; }
.user-contact-card {
  background: white;
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.user-contact-head { display: flex; align-items: center; gap: 10px; }
.user-contact-name { font-size: 14px; flex: 1; }
.user-contact-head [data-act="remove"] {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); font-size: 14px; line-height: 1;
  width: 28px; height: 28px; padding: 0;
  cursor: pointer;
}
.user-contact-head [data-act="remove"]:hover {
  color: var(--danger); border-color: var(--danger);
}

/* ── Contact feed (global Contacts view) ── */
.contact-group { margin-bottom: 34px; }
.contact-group-date {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--muted);
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.contact-item {
  padding: 14px 0 16px 16px;
  border-bottom: 1px dotted var(--border);
  position: relative;
}
.contact-item::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 18px;
  width: 2px; background: var(--taupe);
}
.contact-item:last-child { border-bottom: 0; }
.contact-item-client {
  font-family: var(--font-serif);
  font-size: 16px;
  margin-bottom: 3px;
}
.contact-item-client a { color: var(--ink); }
.contact-item-client a:hover { color: var(--taupe); }
.contact-item-note {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 6px;
}
.contact-item-meta {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* Three columns : slightly narrower Radar so Today breathes */
/* ───────────────────── Dashboard (3-Zone Editorial) ───────────────────── */
/* Zone 1: full-width editorial hero : the next-shipping issue dominates */
.dash-hero {
  margin: 0 0 24px;
}
.dash-hero-empty {
  background: var(--parchment);
  border: 1px solid var(--border);
  padding: 32px 24px;
  text-align: center;
}
.dash-hero-lead {
  display: block;
  background: white;
  border: 1px solid var(--border);
  border-left: 6px solid var(--ink);
  padding: 24px 28px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dash-hero-lead:hover { background: var(--parchment); }
.dash-hero-lead.tone-good   { border-left-color: #2d5a3d; }
.dash-hero-lead.tone-urgent { border-left-color: var(--danger); }
.dash-hero-kicker {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--taupe);
  font-weight: 600; margin-bottom: 12px;
}
.dash-hero-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; margin-bottom: 14px;
}
.dash-hero-left { flex: 1; min-width: 0; }
.dash-hero-title {
  font-family: var(--font-serif);
  font-size: 32px; line-height: 1.05;
  letter-spacing: -0.005em; margin-bottom: 4px;
}
.dash-hero-sub {
  font-family: var(--font-serif);
  font-style: italic; font-size: 14px;
  color: var(--muted);
}
.dash-hero-right {
  text-align: right; flex: 0 0 auto;
}
.dash-hero-num {
  font-family: var(--font-serif);
  line-height: 1;
}
.dash-hero-num .big {
  font-size: 56px;
  letter-spacing: -0.02em;
}
.dash-hero-num .muted {
  font-size: 28px; color: var(--muted);
}
.dash-hero-pct {
  margin-top: 4px;
}
.dash-hero-bar {
  height: 6px;
  background: var(--border);
  margin-bottom: 12px;
}
.dash-hero-bar-fill {
  height: 100%;
  background: var(--ink);
  transition: width 0.3s ease;
}
.dash-hero-lead.tone-good .dash-hero-bar-fill   { background: #2d5a3d; }
.dash-hero-lead.tone-urgent .dash-hero-bar-fill { background: var(--danger); }
.dash-hero-meta {
  font-family: var(--font-serif); font-size: 14px;
  display: flex; gap: 6px; align-items: baseline;
  margin-bottom: 14px;
}
.dash-hero-open {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-top: 12px;
  border-top: 1px dotted var(--border);
}
.dash-hero-open-pill {
  font-family: var(--font-sans); font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--parchment); color: var(--ink);
  padding: 4px 10px;
  border: 1px solid var(--border);
}
.dash-hero-follow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px; margin-top: 10px;
}
.dash-hero-follow-row {
  display: flex; align-items: baseline; gap: 10px;
  background: white; border: 1px solid var(--border);
  padding: 10px 14px;
  text-decoration: none; color: var(--ink);
}
.dash-hero-follow-row:hover { background: var(--parchment); }
.dash-hero-follow-name {
  font-family: var(--font-serif); font-size: 13px;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-hero-follow-pct {
  font-family: var(--font-serif); font-size: 16px;
}

/* Sold momentum strip : appended to the hero card, shows booking velocity */
.dash-momentum {
  margin-top: 16px;
}
.dash-momentum-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--parchment);
  border: 1px solid var(--border);
}
.dash-momentum-stat {
  padding: 12px 18px;
  border-right: 1px solid var(--border);
}
.dash-momentum-stat:last-child { border-right: 0; }
.dash-momentum-num {
  font-family: var(--font-serif); font-size: 20px;
  color: #2d5a3d; line-height: 1;
  margin-bottom: 4px;
}
.dash-momentum-label {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

/* Zone 2: Attention | Pipeline two-column */
.dash-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 880px) {
  .dash-pair { grid-template-columns: 1fr; }
}
.dash-attention, .dash-pipeline {
  background: white;
  border: 1px solid var(--border);
  padding: 18px 22px 12px;
}
.dash-section-head {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 700;
  padding-bottom: 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between;
}
.attention-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  gap: 0 14px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--border);
  text-decoration: none; color: var(--ink);
  align-items: baseline;
}
.attention-row:last-child { border-bottom: 0; }
.attention-row:hover { background: var(--parchment); margin: 0 -22px; padding: 12px 22px; }
.attention-num {
  grid-row: 1 / 3;
  font-family: var(--font-serif);
  font-size: 32px; line-height: 1;
  text-align: center;
  align-self: center;
}
.attention-row.tone-urgent .attention-num { color: var(--danger); }
.attention-row.tone-empty .attention-num   { color: var(--border); }
.attention-label {
  font-family: var(--font-serif);
  font-size: 14px; line-height: 1.2;
}
.attention-meta {
  grid-column: 2;
  font-style: italic;
  margin-top: 2px;
}

/* Zone 3: Today action zone (carries existing feed-head + quick-add styles) */
.dash-today {
  margin-top: 0;
}

/* ───────────────────── Dashboard (Daily Brief : legacy) ───────────────────── */
/* Single-viewport: action feed on the left, compact status rail on the right.
 * Replaces the long-scroll KPI ledger / card grid layout. */
.dash-masthead { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }
.dash-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  margin-top: 8px;
  line-height: 1.4;
  max-width: 720px;
}
.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 360px);
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px) {
  .dash-grid { grid-template-columns: 1fr; gap: 24px; }
}
.dash-feed { min-width: 0; }
/* Today feed hero : big serif numeral on the left, h2 + descriptive
 * subhead on the right. Numeral does the work, label is the framing. */
.feed-head {
  display: flex; align-items: flex-end; gap: 18px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.feed-num {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 0.85;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-weight: normal;
  flex: 0 0 auto;
}
.feed-num.tone-urgent { color: var(--danger); }
.feed-num.tone-empty  { color: var(--border); }
.feed-head-text { padding-bottom: 4px; }
.feed-head h2 {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: 0.005em;
  font-weight: normal;
  margin: 0;
  line-height: 1;
}
.feed-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Right-rail stat cards : magazine "By the Numbers" treatment.
 * Big serif numeral leads, label below, hairline, then row list. */
.dash-rail { display: flex; flex-direction: column; gap: 18px; }
.stat-card {
  background: white;
  border: 1px solid var(--border);
  padding: 18px 20px 14px;
}
.stat-num {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.stat-card.tone-urgent .stat-num { color: var(--danger); }
.stat-card.tone-empty  .stat-num { color: var(--border); }
.stat-label {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.stat-card.tone-empty .stat-list { color: var(--muted); }

/* Issue inventory card on the dashboard : leads the rail, magazine
 * editor's north star ("how full is Spring 2026?"). */
.inventory-card { display: flex; flex-direction: column; gap: 8px; }
.inventory-lead {
  display: block;
  background: white;
  border: 1px solid var(--ink);
  border-left: 4px solid var(--ink);
  padding: 18px 20px 16px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.15s ease;
}
.inventory-lead:hover { background: var(--parchment); }
.inventory-lead.tone-good { border-left-color: #2d5a3d; }
.inventory-lead.tone-urgent { border-left-color: var(--danger); }
.inventory-lead-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.inventory-issue-name {
  font-family: var(--font-serif); font-size: 18px; line-height: 1.1;
}
.inventory-lead-num {
  font-family: var(--font-serif);
  margin-bottom: 8px;
}
.inventory-lead-num .big {
  font-size: 38px; line-height: 1;
}
.inventory-lead-num .muted {
  font-size: 18px; color: var(--muted);
}
.inventory-lead-bar {
  height: 4px; background: var(--border);
  margin-bottom: 8px;
}
.inventory-lead-bar-fill {
  height: 100%; background: var(--ink);
  transition: width 0.3s ease;
}
.inventory-lead.tone-good .inventory-lead-bar-fill { background: #2d5a3d; }
.inventory-lead.tone-urgent .inventory-lead-bar-fill { background: var(--danger); }
.inventory-lead-meta {
  font-family: var(--font-serif); font-size: 13px;
  margin-bottom: 8px;
}
.inventory-open {
  border-top: 1px dotted var(--border);
  padding-top: 8px;
  margin-top: 4px;
}
.inventory-open-row {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 2px 0;
}
.inventory-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
}
.inventory-row:hover { background: var(--parchment); }
.inventory-row-name { font-family: var(--font-serif); font-size: 14px; }
.inventory-row-pct {
  font-family: var(--font-serif); font-size: 18px;
  color: var(--ink);
}

/* Issue detail: ship countdown + risk callouts */
.issue-countdown {
  display: flex; align-items: baseline; gap: 14px;
  background: var(--parchment);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ink);
  padding: 14px 22px;
  margin-bottom: 14px;
}
.issue-countdown.tone-warn { border-left-color: var(--taupe); }
.issue-countdown.tone-urgent { border-left-color: var(--danger); }
.issue-countdown.tone-good { border-left-color: #2d5a3d; opacity: 0.7; }
.issue-countdown-num {
  font-family: var(--font-serif);
  font-size: 36px; line-height: 1;
  color: var(--ink);
}
.issue-countdown.tone-urgent .issue-countdown-num { color: var(--danger); }
.issue-countdown-label {
  font-family: var(--font-serif);
  font-style: italic; font-size: 16px;
  color: var(--ink);
}

/* ── Issue Workspace : header + tabs (Sell · Make · Ship · Collect) ── */
.issue-workspace-head {
  margin-bottom: 24px;
}
.issue-ws-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
}
.issue-ws-title {
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: 42px;
  line-height: 1.05;
  margin: 0 0 6px;
  color: var(--ink);
}
.issue-ws-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
}
.issue-ws-sub .badge { font-style: normal; font-family: var(--font-sans); }

.issue-ws-countdown {
  text-align: right;
  padding: 10px 18px;
  border-right: 4px solid var(--ink);
  flex-shrink: 0;
}
.issue-ws-countdown.tone-warn { border-right-color: var(--taupe); }
.issue-ws-countdown.tone-urgent { border-right-color: var(--danger); }
.issue-ws-countdown.tone-good { border-right-color: #2d5a3d; opacity: 0.65; }
.issue-ws-countdown-num {
  font-family: var(--font-serif);
  font-size: 42px; line-height: 1;
  color: var(--ink);
}
.issue-ws-countdown.tone-urgent .issue-ws-countdown-num { color: var(--danger); }
.issue-ws-countdown-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.issue-ws-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: white;
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.issue-ws-stats .stat {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
}
.issue-ws-stats .stat:last-child { border-right: 0; }
.issue-ws-stats .stat-n { font-family: var(--font-serif); font-size: 22px; color: var(--ink); }
.issue-ws-stats .stat-l {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.issue-ws-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-top: 8px;
}
.issue-ws-tabs button {
  display: flex; align-items: baseline; gap: 8px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 14px 22px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  transition: color 0.15s ease, border-color 0.15s ease;
  position: relative;
}
.issue-ws-tabs button:hover { color: var(--ink); }
.issue-ws-tabs button.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.ws-tab-num {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--taupe);
  font-style: italic;
}
.issue-ws-tabs button.active .ws-tab-num { color: var(--ink); }
.ws-tab-label {
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}
.ws-tab-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  margin-left: 2px;
}
.ws-tab-pulse.pulse-warn   { background: var(--taupe); }
.ws-tab-pulse.pulse-urgent { background: var(--danger); }
.ws-tab-pulse.pulse-empty  { background: transparent; border: 1px dotted var(--border); }
.ws-tab-pulse.pulse-normal { background: transparent; }

.issue-ws-body {
  padding-top: 24px;
}

.ws-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.ws-section:last-child { border-bottom: 0; }
.ws-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.ws-section-head h3 {
  font-family: var(--font-serif);
  font-weight: normal;
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}

.ws-mini-pill {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 10px;
}
.ws-mini-pill.tone-good   { background: #2d5a3d; color: white; border-color: #2d5a3d; }
.ws-mini-pill.tone-warn   { background: var(--taupe); color: white; border-color: var(--taupe); }
.ws-mini-pill.tone-urgent { background: var(--danger); color: white; border-color: var(--danger); }
.ws-mini-pill-name {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; font-size: 9px; opacity: 0.85;
}
.ws-mini-pill-status { font-size: 11px; }

@media (max-width: 760px) {
  .issue-ws-title { font-size: 30px; }
  .issue-ws-stats { grid-template-columns: repeat(2, 1fr); }
  .issue-ws-stats .stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .issue-ws-tabs { overflow-x: auto; }
  .issue-ws-tabs button { padding: 12px 14px; flex-shrink: 0; }
}

.issue-risks {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
.issue-risk {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: var(--font-serif);
}
.issue-risk.tone-warn   { border-left: 3px solid var(--taupe); }
.issue-risk.tone-urgent { border-left: 3px solid var(--danger); }
.issue-risk-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--taupe); flex: 0 0 auto;
}
.issue-risk.tone-urgent .issue-risk-dot { background: var(--danger); }

/* Issue detail: inventory grid */
.inventory-summary {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-bottom: 14px;
  background: white;
  border: 1px solid var(--border);
}
.inv-stat {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}
.inv-stat:last-child { border-right: 0; }
.inv-n {
  font-family: var(--font-serif); font-size: 22px;
  line-height: 1; margin-bottom: 4px; color: var(--ink);
}
.inv-l {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
@media (max-width: 900px) {
  .inventory-summary { grid-template-columns: repeat(3, 1fr); }
  .inv-stat:nth-child(3) { border-right: 0; }
  .inv-stat:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
}

.inventory-bar {
  height: 4px; background: var(--border);
  margin-bottom: 22px;
}
.inventory-bar-fill {
  height: 100%; background: var(--ink);
  transition: width 0.3s ease;
}

.inv-group { margin-bottom: 22px; }
.inv-group-head {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-bottom: 8px;
}
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.inv-slot {
  text-align: left;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inv-slot:hover { border-color: var(--ink); }
.inv-slot.status-sold {
  background: var(--ink); color: white;
  border-color: var(--ink);
}
.inv-slot.status-reserved {
  background: var(--taupe); color: white;
  border-color: var(--taupe);
}
.inv-slot-label {
  font-family: var(--font-serif); font-size: 13px;
  margin-bottom: 4px; line-height: 1.2;
}
.inv-slot-meta {
  font-size: 11px;
}
.inv-slot.status-sold .inv-slot-meta b { color: white; }
.inv-slot.status-reserved .inv-slot-meta i { color: white; }
.inv-slot.status-available .inv-slot-meta { color: var(--muted); }

/* Issue activity feed : chronological event stream */
.issue-activity {
  list-style: none; padding: 0; margin: 0;
}
.issue-activity-row {
  display: grid;
  grid-template-columns: 160px 1fr 110px;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 13px;
  align-items: baseline;
}
.issue-activity-row:last-child { border-bottom: 0; }
.issue-activity-kind {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 600;
}
.issue-activity-label {
  font-family: var(--font-serif);
}
.issue-activity-when {
  text-align: right;
  font-style: italic;
}
@media (max-width: 720px) {
  .issue-activity-row { grid-template-columns: 1fr; gap: 4px; }
  .issue-activity-when { text-align: left; }
}
/* ───────────────────── Client hover-card preview ───────────────────── */
.client-hover {
  position: absolute;
  width: 320px;
  background: white;
  border: 1px solid var(--ink);
  box-shadow: 0 8px 24px rgba(26, 26, 24, 0.12);
  padding: 14px 16px;
  z-index: 1100;
  display: none;
  font-family: var(--font-sans);
  color: var(--ink);
}
.client-hover-loading { padding: 4px 0; }
.client-hover-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.client-hover-name {
  font-family: var(--font-serif); font-size: 16px;
}
.client-hover-tier {
  font-size: 9px; padding: 2px 8px;
  background: var(--ink); color: white;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600;
}
.client-hover-line {
  font-size: 12px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.client-hover-stats {
  display: flex; gap: 14px;
  padding: 10px 0;
  border-top: 1px dotted var(--border);
  border-bottom: 1px dotted var(--border);
  margin-bottom: 8px;
}
.client-hover-num {
  font-family: var(--font-serif); font-size: 14px;
  margin-bottom: 2px;
}
.client-hover-label {
  font-size: 9px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 600;
}
.client-hover-foot {
  font-size: 11px;
}
.client-hover-foot a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ───────────────────── Pipeline kanban (full deal lifecycle view) ───────────────────── */
.pipeline-kanban {
  display: grid;
  grid-template-columns: repeat(7, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
}
@media (max-width: 1400px) {
  .pipeline-kanban { grid-template-columns: repeat(7, 240px); }
}
.pipeline-col {
  background: var(--parchment);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 240px;
}
.pipeline-col-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.pipeline-col-label {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.pipeline-col-helper {
  font-size: 10px; color: var(--muted);
  font-style: italic;
}
.pipeline-col-stats { text-align: right; }
.pipeline-col-count {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1;
}
.pipeline-col-body {
  flex: 1;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.pipeline-card {
  background: white;
  border: 1px solid var(--border);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.pipeline-card:hover { border-color: var(--ink); }
.pipeline-card[draggable="true"] { cursor: grab; }
.pipeline-card[draggable="true"]:active { cursor: grabbing; }
.pipeline-card.dragging { opacity: 0.4; }
.pipeline-col.drop-target {
  background: rgba(45, 90, 61, 0.06);
  outline: 2px dashed #2d5a3d;
  outline-offset: -2px;
}
.pipeline-col.drop-blocked {
  background: rgba(180, 30, 40, 0.04);
  outline: 2px dashed var(--danger);
  outline-offset: -2px;
}
.pipeline-card .pipeline-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
  padding: 0; border-bottom: 0;
}
.pipeline-client {
  font-family: var(--font-serif); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipeline-age {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.04em; color: var(--muted);
  flex: 0 0 auto;
}
.pipeline-age.stale { color: var(--danger); font-weight: 600; }
.pipeline-deal-name {
  font-size: 11px; color: var(--muted);
  margin-bottom: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipeline-card-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; margin-bottom: 8px;
}
.pipeline-amount {
  font-family: var(--font-serif); font-size: 14px;
}
.pipeline-substatus {
  font-size: 9px; padding: 1px 6px;
  background: var(--taupe); color: white;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600;
}
.pipeline-card-actions {
  border-top: 1px dotted var(--border);
  padding-top: 8px;
}
.pipeline-card-actions .btn {
  width: 100%; font-size: 10px; padding: 6px 8px;
}

/* Dashboard pipeline-card (3 stat rows) : three sales/billing alerts in one container so empty state
 * reads as a single quiet block, not three "0" cards screaming for attention. */
.pipeline-card {
  background: white;
  border: 1px solid var(--border);
  padding: 18px 20px 6px;
}
.pipeline-card.tone-empty { background: var(--parchment); }
.pipeline-card-head {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pipeline-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  text-decoration: none; color: var(--ink);
  border-bottom: 1px dotted var(--border);
}
.pipeline-row:last-child { border-bottom: 0; }
.pipeline-row:hover { background: var(--parchment); margin: 0 -20px; padding: 12px 20px; }
.pipeline-row-num {
  font-family: var(--font-serif);
  font-size: 30px; line-height: 1; color: var(--ink);
  flex: 0 0 48px; text-align: center;
}
.pipeline-row.tone-urgent .pipeline-row-num { color: var(--danger); }
.pipeline-row.tone-empty .pipeline-row-num { color: var(--border); }
.pipeline-row-body { flex: 1; min-width: 0; }
.pipeline-row-label {
  font-family: var(--font-serif); font-size: 14px;
  margin-bottom: 2px;
}

/* Stat-card link variant: whole card is clickable, shows hover affordance */
.stat-card.stat-link {
  display: block; text-decoration: none; color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.stat-card.stat-link:hover { background: var(--parchment); border-color: var(--ink); }
.stat-card.stat-link.tone-empty { opacity: 0.6; }
.stat-meta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.rail-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--border);
  text-decoration: none;
  color: var(--ink);
}
.rail-row:last-child { border-bottom: 0; }
.rail-row:hover { background: var(--parchment); }
.rail-row-main { flex: 1; min-width: 0; }
.rail-row-name {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-row-meta { font-size: 11px; }
.rail-pill {
  font-size: 10px; padding: 2px 7px;
  background: var(--taupe); color: white;
  text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; font-family: var(--font-sans);
}
.rail-pill.urgent { background: var(--danger); }
.rail-more { padding: 8px 0; font-size: 11px; }
.small { font-size: 12px; }

/* Legacy rules below : kept for any non-dashboard pages still using them */
.dash-ledger {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 26px 0;
}
.ledger-cell {
  padding: 18px 22px;
  border-right: 1px solid var(--border);
}
.ledger-cell:last-child { border-right: 0; }
.ledger-num {
  font-family: var(--font-serif);
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
  font-weight: normal;
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.ledger-num .muted { color: var(--border); }
.ledger-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.ledger-cell.tone-urgent .ledger-num { color: var(--danger); }
.ledger-cell.tone-good   .ledger-num { color: var(--ink); }
@media (max-width: 900px) {
  .dash-ledger { grid-template-columns: repeat(2, 1fr); }
  .ledger-cell:nth-child(2) { border-right: 0; }
  .ledger-cell:nth-child(1), .ledger-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
}

/* Two-column main: Decisions + Schedule. */
.dash-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  margin-bottom: 30px;
}
.dash-pane { min-width: 0; }
.dash-pane-full { margin-bottom: 30px; }
@media (max-width: 1100px) {
  .dash-main { grid-template-columns: 1fr; }
}

/* Legacy .dashboard layout still used elsewhere : unchanged below. */
.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
  max-height: calc(100vh - 240px);
}
.dashboard-col {
  min-width: 0;
  display: flex; flex-direction: column;
  min-height: 0;            /* allow flex child to shrink so overflow works */
}
.dashboard-col > [data-list],
.dashboard-col > div[data-list] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;       /* reserve scrollbar gutter */
}
@media (max-width: 1100px) {
  .dashboard { max-height: none; grid-template-columns: 1fr; }
  .dashboard-col > [data-list] { overflow-y: visible; }
}

/* Editorial section headers : bigger serif, magazine TOC feel. */
.dashboard-col .col-head, .dash-pane .col-head {
  display: flex; align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  gap: 0;
}
.dashboard-col .col-head h2, .dash-pane .col-head h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-weight: normal;
  margin: 0;
  flex: 0 0 auto;
}
.dashboard-col .col-head .count, .dash-pane .col-head .count {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
}
/* Lead-item treatment : first card in each column reads like a featured
 * story. Slightly bigger type, subtle parchment background. */
.dashboard-col [data-list] > .task-card:first-child,
.dashboard-col [data-list] > .radar-card:first-child {
  background: var(--parchment);
  border-left-width: 4px;
}
.dashboard-col [data-list] > .task-card:first-child .task-title,
.dashboard-col [data-list] > .radar-card:first-child h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.25;
}
.dashboard-col .col-head .col-action {
  margin-left: auto;
}

.quick-add {
  display: flex; gap: 0; margin-bottom: 18px;
  max-width: 560px;
}
.quick-add .input { flex: 1; background: white; }
.quick-add .btn { flex: 0 0 auto; border-left: 0; }

/* Today cards : thinner, category-color left edge, no heavy box */
.task-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: opacity 0.3s ease, transform 0.15s ease;
}
.task-card.cat-sales     { border-left-color: var(--success); }
.task-card.cat-client    { border-left-color: var(--ink); }
.task-card.cat-editorial { border-left-color: var(--taupe); }
.task-card.cat-financial { border-left-color: var(--muted); }
.task-card.cat-admin     { border-left-color: var(--border); }
.task-card.overdue       { border-left-color: var(--danger); border-left-width: 3px; }
.task-card.fade-out      { opacity: 0; pointer-events: none; }
.task-card .title {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: normal;
  color: var(--ink);
  line-height: 1.3;
}
.task-card .notes {
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: italic;
}
.task-card-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.task-card-row .meta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.task-card-row .meta .dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--border);
  display: inline-block;
}

/* Radar : open editorial list, not heavy boxes. Thin rules between. */
.radar-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 0 16px 14px;
  margin: 0;
  position: relative;
  transition: opacity 0.3s ease;
}
.radar-card::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 16px;
  width: 2px; background: var(--border);
}
.radar-card.sev-warn::before { background: var(--taupe); }
.radar-card.sev-bad::before  { background: var(--danger); }
.radar-card.fade-out { opacity: 0; pointer-events: none; }
.radar-card .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.radar-card h4 {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.2;
  margin: 0 0 4px 0;
  color: var(--ink);
}
.radar-card .contact-name {
  color: var(--muted); font-size: 12px;
  font-style: italic;
}
.radar-card .actions { display: flex; gap: 8px; margin-top: 12px; }
.days-badge {
  font-size: 10px; padding: 3px 8px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600;
  color: white; white-space: nowrap; line-height: 1.4;
}
.days-badge.warn { background: var(--taupe); }
.days-badge.bad { background: var(--danger); }

/* Next 7 Days : editorial agenda. Serif italic date, compact rows, no heavy
 * boxes; a small colored marker dot indicates category. */
.upcoming-day { margin-bottom: 22px; }
.upcoming-day h5 {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
  font-weight: normal;
}
.upcoming-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0;
  border: 0;
  background: transparent;
}
.upcoming-row + .upcoming-row { border-top: 1px dotted var(--border); }
.upcoming-row .marker {
  width: 6px; height: 6px; flex: 0 0 6px;
  align-self: center;
  background: var(--border);
}
.upcoming-row.cat-sales     .marker { background: var(--success); }
.upcoming-row.cat-client    .marker { background: var(--ink); }
.upcoming-row.cat-editorial .marker { background: var(--taupe); }
.upcoming-row.cat-financial .marker { background: var(--muted); }
.upcoming-row.cat-admin     .marker { background: var(--border); }
.upcoming-row .title {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  line-height: 1.3;
}
.upcoming-row .due {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* ───────────────────── Page header ───────────────────── */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb .slash { color: var(--taupe); margin: 0 6px; }

/* ───────────────────── Tables ───────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--border);
}
.table th, .table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 13px;
  vertical-align: middle;
}
.table th {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--muted);
  background: var(--parchment);
}
.table tbody tr { transition: background 0.1s ease; cursor: pointer; }
.table tbody tr:hover { background: var(--parchment); }
.table tbody tr.no-hover { cursor: default; }
.table tbody tr.no-hover:hover { background: white; }
.table .name-cell { font-family: var(--font-serif); font-size: 13px; }

/* ───────────────────── Filter bar ───────────────────── */
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; align-items: center;
}
.filter-bar .search { flex: 0 1 320px; min-width: 200px; max-width: 320px; }

/* ───────────────────── Bulk action bar ───────────────────── */
.bulk-bar {
  position: sticky; bottom: 0;
  background: var(--ink); color: white;
  padding: 12px 16px;
  display: flex; gap: 10px; align-items: center;
  margin-top: 14px;
}
.bulk-bar .selected-count {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
}

/* ───────────────────── Kanban ───────────────────── */
/* Trello/Linear-style: columns are fixed-width and the board scrolls
 * horizontally when they overflow. Never wrap to a new row, because seeing
 * "Done" drop below "Overdue" breaks the left-to-right pipeline metaphor. */
.kanban {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding-bottom: 8px;            /* room for horizontal scrollbar */
  scroll-snap-type: x proximity;  /* gentle snap to column edges */
}
.kanban-col {
  flex: 0 0 280px;                /* fixed width, no shrink */
  background: var(--parchment);
  border: 1px solid var(--border);
  padding: 10px;
  min-height: 400px;
  scroll-snap-align: start;
}
.kanban-col h4 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.kanban-col.drop-target { border-left: 2px solid var(--taupe); }
.kanban-card { background: white; border: 1px solid var(--border); padding: 10px; margin-bottom: 8px; cursor: grab; user-select: none; }
.kanban-card.dragging { opacity: 0.5; }
.kanban-card .title { font-size: 12px; font-weight: 600; }
.kanban-card .meta { font-size: 10px; color: var(--muted); margin-top: 4px; display: flex; gap: 6px; align-items: center; }

/* .three variant kept for Kevin's simpler 3-column board; same layout model
 * (fixed-width columns, horizontal scroll), so no override needed. */

/* ───────────────────── Calendar ───────────────────── */
.calendar { background: white; border: 1px solid var(--border); }
.calendar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.calendar-head h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.calendar-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.calendar-dow > div {
  padding: 8px 10px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: left;
}
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-day {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 92px;
  padding: 6px 8px;
  background: white;
  cursor: pointer;
  position: relative;
  min-width: 0; /* prevent grid children from pushing out */
}
.calendar-day.other-month { background: var(--parchment); color: var(--muted); }
.calendar-day.today { background: var(--warm-white); }
.calendar-day .dayno { font-size: 11px; color: var(--muted); }
.calendar-day .pill {
  display: block;
  font-size: 10px; padding: 2px 4px;
  margin-top: 2px;
  color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: grab;
}
.calendar-day .pill.cat-sales { background: var(--success); }
.calendar-day .pill.cat-client { background: var(--ink); }
.calendar-day .pill.cat-editorial { background: var(--taupe); }
.calendar-day .pill.cat-financial { background: var(--muted); }
.calendar-day .pill.cat-admin { background: var(--warm-white); color: var(--muted); border: 1px solid var(--border); }
.calendar-day.drop-target { background: var(--parchment); outline: 2px solid var(--taupe); outline-offset: -2px; }

.side-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 520px; max-width: 92vw;
  background: white; border-left: 1px solid var(--border);
  box-shadow: -20px 0 40px rgba(26, 26, 24, 0.08);
  z-index: 900;
  transform: translateX(100%); transition: transform 0.25s ease;
  overflow-y: auto; padding: 28px 32px 32px 32px;
  display: flex; flex-direction: column;
}
.side-panel.side-panel-wide { width: 720px; }
.side-panel h3 { margin-bottom: 20px; }
.side-panel-section { padding-top: 18px; border-top: 1px solid var(--border); margin-top: 8px; }

/* Contract Terms : editable boilerplate cards */
.term-card {
  background: white;
  border: 1px solid var(--border);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.term-head { margin-bottom: 10px; }
.term-head h4 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: normal;
  margin: 0 0 4px;
}
.term-helper { font-size: 11px; color: var(--muted); font-style: italic; }
.term-card textarea {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.5;
  min-height: 84px;
}

/* QuickBooks connection card */
.qbo-card {
  background: white;
  border: 1px solid var(--border);
  padding: 22px 26px;
  max-width: 560px;
}
.qbo-card h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 8px;
}
.qbo-card.connected { border-left: 4px solid #2d5a3d; }
.qbo-card.disconnected { border-left: 4px solid var(--taupe); }
.qbo-card.not-configured { border-left: 4px solid var(--muted); background: var(--parchment); }
.qbo-status-head { display: flex; align-items: center; gap: 10px; }
.qbo-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2d5a3d;
  display: inline-block;
}
.qbo-card p { margin: 8px 0; line-height: 1.5; }
.qbo-card code {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  background: var(--parchment);
  padding: 1px 6px;
}
.qbo-steps {
  margin: 14px 0 0;
  padding-left: 20px;
}
.qbo-steps li {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 12px;
  color: var(--ink);
}
.qbo-steps li code {
  word-break: break-all;
  font-size: 10px;
}
.qbo-steps a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.qbo-card.not-configured { max-width: 640px; }

/* Packages & Scope : list row with expand-to-show-line-items */
.pkg-row {
  border: 1px solid var(--border);
  background: white;
  margin-bottom: 10px;
}
.pkg-row-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}
.pkg-row-head:hover { background: var(--parchment); }
.pkg-row-name { flex: 0 0 auto; display: flex; align-items: baseline; gap: 12px; min-width: 200px; }
.pkg-tier {
  font-size: 9px; padding: 2px 8px;
  background: var(--ink); color: white;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-family: var(--font-sans); font-weight: 600;
}
.pkg-name {
  font-family: var(--font-serif);
  font-size: 17px;
}
.pkg-row-meta {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 13px;
  display: flex; align-items: baseline; gap: 8px;
}
.pkg-chevron {
  color: var(--muted); transition: transform 0.2s ease;
  font-size: 12px;
}
.pkg-row.expanded .pkg-chevron { transform: rotate(180deg); }
.pkg-row-body {
  padding: 0 18px 16px;
  border-top: 1px dotted var(--border);
}
.pkg-items-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}
.pkg-items-table th {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  text-align: left; padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
}
.pkg-items-table th.num, .pkg-items-table td.num { text-align: right; }
.pkg-items-table td {
  padding: 8px 10px;
  border-bottom: 1px dotted var(--border);
  vertical-align: top;
}
.pkg-items-table tr:last-child td { border-bottom: 0; }
.pkg-asset { font-family: var(--font-serif); font-size: 14px; }

.pkg-line-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--border);
}
.pkg-line-row:last-child { border-bottom: 0; }
.pkg-line-form {
  background: var(--parchment);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pkg-line-form h5 {
  font-family: var(--font-serif); font-size: 14px; font-weight: normal;
}
.side-panel .field { margin-bottom: 18px; }
.side-panel form > div[style*="grid-template-columns"] { gap: 16px !important; }
.side-panel form .field-label { margin-bottom: 8px; }
.side-panel form input.input,
.side-panel form select.select,
.side-panel form textarea.textarea { padding: 12px 14px; font-size: 14px; }
.side-panel form textarea.textarea { min-height: 110px; }
.side-panel form > div:last-child { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.side-panel.open { transform: translateX(0); }
.side-panel h3 { font-family: var(--font-serif); text-transform: uppercase; letter-spacing: 0.12em; font-size: 14px; margin-bottom: 14px; }
.side-panel .close-x {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--muted); line-height: 1;
}

/* ───────────────────── View toggle ───────────────────── */
/* View toggle : plain inline text labels, active has a taupe underline.
 * No background, no border, no box. Stays out of the way so primary
 * buttons beside it are the only emphasis. */
.view-toggle {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  margin-right: 8px;
}
.view-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 0 4px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.view-toggle button:hover { color: var(--ink); }
.view-toggle button.active {
  color: var(--ink);
  border-bottom-color: var(--taupe);
  font-weight: 600;
}

/* ───────────────────── Client detail ───────────────────── */
.client-section { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; }
.deliverable-card { background: white; border: 1px solid var(--border); padding: 14px; margin-bottom: 10px; }
.deliverable-card .desc { font-family: var(--font-serif); font-size: 13px; }
.rev-dots { display: inline-flex; gap: 4px; align-items: center; }
.rev-dot { width: 8px; height: 8px; display: inline-block; border: 1px solid var(--border); }
.rev-dot.used { background: var(--ink); border-color: var(--ink); }
.rev-banner { margin-top: 10px; padding: 8px 12px; font-size: 12px; }
.rev-banner.warn { background: var(--warning-bg); color: var(--warning-text); }
.rev-banner.bad { background: var(--danger-bg); color: var(--danger-text); }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 10px 0; border-bottom: 1px solid var(--border); }
.timeline .date { font-family: var(--font-serif); font-size: 13px; margin-bottom: 2px; }
.timeline .who-note { color: var(--muted); font-size: 12px; }

.save-indicator { color: var(--taupe); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; margin-left: 8px; opacity: 0; transition: opacity 0.3s ease; }
.save-indicator.show { opacity: 1; }

.action-bar {
  position: sticky; bottom: 0;
  background: white; border-top: 1px solid var(--border);
  padding: 14px 16px;
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  margin-top: 28px;
}

/* ───────────────────── Import ───────────────────── */
.import-preview {
  width: 100%; border-collapse: collapse; background: white;
  border: 1px solid var(--border);
  margin-top: 14px;
}
.import-preview th, .import-preview td { padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px; }
.import-preview th { text-transform: uppercase; letter-spacing: 0.12em; font-size: 9px; color: var(--muted); }
.import-preview tr.error { background: var(--danger-bg); }
.import-preview tr.clean { background: var(--success-bg); }
.import-preview tr.duplicate { background: var(--warning-bg); }

/* ───────────────────── Carly queue ───────────────────── */
.content-card {
  background: white; border: 1px solid var(--border);
  padding: 16px; margin-bottom: 14px;
}
.content-card.posted { background: var(--warm-white); }
.content-card h3 { font-family: var(--font-serif); font-size: 14px; margin-bottom: 6px; }
.platform-badge { background: var(--taupe); color: white; font-size: 9px; padding: 3px 6px; text-transform: uppercase; letter-spacing: 0.12em; margin-right: 4px; }
.caption-box {
  background: var(--warm-white);
  padding: 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  margin: 10px 0;
}
.no-asset {
  border-left: 2px solid var(--taupe);
  padding-left: 10px;
  color: var(--muted);
  font-size: 12px;
  margin: 10px 0;
}
.filter-pill {
  display: inline-block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 6px 10px;
  background: white;
  border: 1px solid var(--border);
  cursor: pointer;
  margin: 0 4px 4px 0;
  color: var(--ink);
}
.filter-pill.active { background: var(--ink); color: white; border-color: var(--ink); }

.status-pill {
  display: inline-block; font-size: 9px; padding: 3px 7px; text-transform: uppercase; letter-spacing: 0.12em;
}
.status-pill.posted { background: var(--success-bg); color: var(--success-text); }
.status-pill.ready { background: var(--taupe); color: white; }
.status-pill.scheduled { background: var(--warm-white); color: var(--ink); border: 1px solid var(--border); }

/* ───────────────────── Checkbox ───────────────────── */
.checkbox {
  width: 16px; height: 16px;
  border: 1px solid var(--border);
  accent-color: var(--ink);
  margin-right: 8px;
}

/* ───────────────────── Issue cards ───────────────────── */
.issue-card {
  background: white; border: 1px solid var(--border);
  padding: 18px 20px;
  display: flex; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
  align-items: flex-start;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.issue-card:hover {
  border-color: var(--taupe);
  box-shadow: 0 2px 8px rgba(26, 26, 24, 0.06);
}
.issue-card h3 { font-family: var(--font-serif); font-size: 17px; margin-bottom: 4px; }
.issue-card h3 a.issue-card-title:hover { border-bottom-color: var(--taupe) !important; }
.issue-card .meta { color: var(--muted); font-size: 11px; margin-top: 6px; }
.issue-card .counts { font-size: 11px; color: var(--muted); }

.issue-stats {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  background: white;
  margin-bottom: 28px;
}
.issue-stats .stat {
  padding: 18px 20px;
  border-right: 1px solid var(--border);
}
.issue-stats .stat:last-child { border-right: 0; }
.issue-stats .stat-n {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
}
.issue-stats .stat-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}
@media (max-width: 900px) { .issue-stats { grid-template-columns: repeat(3, 1fr); } .issue-stats .stat { border-right: 0; border-bottom: 1px solid var(--border); } }

.issue-tally {
  margin-top: 14px;
  border-collapse: collapse;
  width: 100%;
  max-width: 560px;
}
.issue-tally th {
  width: 58px;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: var(--muted);
  text-align: left;
  padding: 6px 12px 6px 0;
  vertical-align: top;
  font-weight: 600;
  border-right: 1px solid var(--border);
}
.issue-tally td {
  padding: 6px 0 6px 14px;
  font-size: 13px;
  color: var(--ink);
}
.issue-tally tr + tr th, .issue-tally tr + tr td { border-top: 1px dotted var(--border); }

/* ───────────────────── Responsive ───────────────────── */
/* Kanban is already flex + overflow-x at every breakpoint, so no special
 * mobile rules needed. Columns stay 280px wide; users swipe horizontally. */
@media (max-width: 960px) {
  .dashboard { grid-template-columns: 1fr; }
  .app-shell { display: block; }
  .main { margin-left: 0; }                 /* clear desktop offset on mobile */

  /* Sidebar collapses to a compact bar with hamburger */
  .sidebar {
    width: 100%;
    min-height: 0; position: sticky; top: 0; left: 0; bottom: auto;
    z-index: 950;
    flex-direction: row; align-items: center; justify-content: flex-start;
    padding: 8px 14px;
    height: 52px;
    /* Allow the dropdown nav (top:52px absolute child) to escape the bar */
    overflow: visible;
  }
  .sidebar-logo {
    padding: 0 10px; margin-right: auto;
    border-bottom: none; background: transparent;
    display: flex; align-items: center;
    height: 32px;
  }
  .sidebar-logo .logo-color { display: none; }
  .sidebar-logo .logo-reverse {
    display: inline-block;
    height: 18px;
    filter: invert(1);
  }
  .sidebar-toggle { display: flex; position: static; }
  .sidebar-nav {
    display: none;
    position: absolute; top: 52px; right: 0;
    width: 260px; max-width: 85vw;
    background: var(--ink);
    flex-direction: column; padding: 12px 0;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.2);
  }
  .app-shell.menu-open .sidebar-nav {
    display: flex !important;
    max-height: calc(100vh - 52px);
    overflow-y: auto;
  }
  .app-shell.menu-open .sidebar-backdrop {
    display: block;
    position: fixed; inset: 52px 0 0 0;
    background: rgba(0,0,0,0.35);
    z-index: 900;
  }
  .app-shell.menu-open .sidebar-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .app-shell.menu-open .sidebar-toggle span:nth-child(2) { opacity: 0; }
  .app-shell.menu-open .sidebar-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .sidebar-nav a {
    padding: 14px 20px; border-left: 2px solid transparent;
    font-size: 12px; letter-spacing: 0.18em;
  }
  .sidebar-nav a.active { border-left-color: var(--taupe); background: rgba(181,168,130,0.08); color: white; }
  .sidebar-user { display: none; }

  .main { padding: 18px 16px 60px; }
  /* Only hide tables when an explicit card-mode replacement exists for them.
   * Without this opt-in, hiding all tables left views like Deliverables empty. */
  .has-card-fallback .table { display: none; }
  .table-as-cards { display: block; }
  /* Make all tables horizontally scrollable on mobile (the .table-wrap parent
   * already has overflow-x:auto). Slightly tighter padding so more fits. */
  .table th, .table td { padding: 8px 10px; font-size: 12px; }
  .side-panel { width: 100%; }
  .action-bar { flex-direction: column; align-items: stretch; }
  .btn { padding: 12px 18px; min-height: 44px; font-size: 12px; }
  .input, .select, .textarea { min-height: 44px; font-size: 14px; }
}
.table-as-cards { display: none; }

/* ── Fulfillment totals strip on the Clients page ── */
.fulfillment-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: white;
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.fulfillment-totals > div {
  padding: 14px 18px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.fulfillment-totals > div:last-child { border-right: 0; }
.fulfillment-totals .fulfillment-n {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
}
.fulfillment-totals .fulfillment-l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .fulfillment-totals { grid-template-columns: repeat(2, 1fr); }
  .fulfillment-totals > div:nth-child(2n) { border-right: 0; }
  .fulfillment-totals > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

/* Progress bar (client fulfillment, could be reused elsewhere) */
.progress-bar {
  background: var(--border);
  height: 6px;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  background: var(--taupe);
  height: 100%;
  transition: width 0.3s ease;
}

/* ───────────────────── Renewal Radar ───────────────────── */
/* Renewal Radar : promoted to top of dashboard. Reads as a feature
 * "cover story" strip with a serif headline + ledger of contracts ending soon. */
.renewal-section {
  margin: 4px 0 28px 0;
  padding: 18px 22px;
  background: var(--parchment);
  border-left: 4px solid var(--taupe);
}
.renewal-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 14px;
}
.renewal-head h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  font-weight: normal;
  margin: 0;
}
.renewal-grid {
  display: grid;
  /* 3-up at desktop, gracefully collapsing. Cap each card so a single
   * renewal doesn't sprawl across the full width. */
  grid-template-columns: repeat(3, minmax(0, 380px));
  gap: 14px;
}
@media (max-width: 1100px) {
  .renewal-grid { grid-template-columns: repeat(2, minmax(0, 380px)); }
}
@media (max-width: 720px) {
  .renewal-grid { grid-template-columns: 1fr; }
}
.renewal-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 3px solid var(--taupe);
  padding: 14px 16px;
}
.renewal-name {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 16px;
  margin-bottom: 6px;
}
.renewal-name a { color: var(--ink); }
.renewal-days {
  font-size: 10px; padding: 2px 7px;
  background: var(--taupe); color: white;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; font-family: var(--font-sans);
}
.renewal-days.urgent { background: var(--danger); }
.renewal-stats {
  font-size: 12px; color: var(--ink);
  margin-bottom: 10px;
}
.renewal-points {
  list-style: none; padding: 0; margin: 0 0 12px 0;
  border-top: 1px dotted var(--border);
}
.renewal-points li {
  font-size: 12px; color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
  line-height: 1.45;
}
.renewal-actions { display: flex; gap: 6px; }

/* ───────────────────── Help Overlay (?) ───────────────────── */
.help-overlay {
  position: fixed; inset: 0;
  background: rgba(26,26,24,0.5);
  z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.help-card {
  background: white;
  border: 1px solid var(--border);
  padding: 28px 32px;
  width: 100%; max-width: 460px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.help-card h3 {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}
.help-table { width: 100%; border-collapse: collapse; }
.help-table td { padding: 8px 0; font-size: 13px; vertical-align: middle; }
.help-table td.keys { width: 130px; }
.help-table kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--parchment);
  border: 1px solid var(--border);
  color: var(--ink);
  margin-right: 3px;
}
.help-foot {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--muted);
  text-align: center;
}
.help-foot kbd { font-family: var(--font-sans); font-size: 10px; padding: 1px 5px; background: var(--parchment); border: 1px solid var(--border); }

/* ───────────────────── Unified Calendar ───────────────────── */
.cal-grid {
  background: white;
  border: 1px solid var(--border);
}
.cal-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.cal-header > div {
  padding: 8px 12px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
}
.cal-body {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px 8px;
  min-height: 110px;
  min-width: 0;
  position: relative;
}
.cal-cell.other { background: var(--parchment); color: var(--muted); }
.cal-cell.today { background: var(--warm-white); }
.cal-cell.today .cal-day {
  display: inline-block;
  background: var(--ink);
  color: white;
  border-radius: 50%;
  width: 22px; height: 22px;
  line-height: 22px; text-align: center;
}
.cal-day { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.cal-events { display: flex; flex-direction: column; gap: 2px; }
.cal-event {
  font-size: 10px;
  padding: 2px 5px;
  background: var(--ink); color: white;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-left: 2px solid currentColor;
}
.cal-event.layer-issues       { background: var(--taupe);  color: white; }
.cal-event.layer-materials    { background: var(--danger); color: white; }
.cal-event.layer-deliverables { background: var(--ink);    color: white; }
.cal-event.layer-content      { background: var(--success); color: white; }
.cal-event.layer-tasks        { background: var(--muted);  color: white; }
.cal-more { font-size: 9px; color: var(--muted); padding: 2px 4px; font-style: italic; }

.layer-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  background: white;
  border: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}
.layer-pill.on {
  background: var(--layer-color, var(--ink));
  color: white;
  border-color: var(--layer-color, var(--ink));
}

@media (max-width: 768px) {
  .cal-cell { min-height: 64px; padding: 4px 5px; }
  .cal-event { font-size: 9px; padding: 1px 3px; }
}

/* ───────────────────── Quick-Add Picker (Proposal Builder) ───────────────────── */
.quick-add-panel { width: 560px; max-width: 95vw; }
.picker-cat { margin-bottom: 6px; }
.picker-cat-head {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
  padding: 12px 12px 6px;
  background: var(--parchment);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.picker-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  background: white;
  border: 0;
  border-bottom: 1px dotted var(--border);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.picker-row:hover { background: var(--parchment); }
.picker-row.saving { background: var(--parchment); opacity: 0.6; }
.picker-row.added { background: var(--success-bg); border-bottom-color: var(--success); }
.picker-row.added::after {
  content: '✓ added';
  margin-left: 10px;
  font-size: 10px; color: var(--success-text); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.picker-row-name {
  font-family: var(--font-serif); font-size: 14px; color: var(--ink);
}
.picker-row-price {
  font-family: var(--font-sans); font-size: 13px; color: var(--ink); font-weight: 600;
}

.proposal-items-table .inline-input,
.proposal-items-table .inline-select {
  font-size: 12px;
}
.proposal-items-table .inline-input.center { text-align: center; }
.proposal-items-table .inline-input.right { text-align: right; }
.proposal-items-table td { vertical-align: middle; }
.proposal-items-table .asset-edit { font-family: var(--font-serif); font-size: 13px; }
/* Asset/description cells should wrap, not truncate mid-word, when the
 * column is squeezed at narrow widths. */
.proposal-items-table td { word-break: normal; overflow-wrap: anywhere; }
.proposal-items-table { min-width: 720px; }
.table-wrap { width: 100%; max-width: 100%; }

/* ───────────────────── Inline editing ───────────────────── */
.inline-select, .inline-input {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  width: 100%;
  outline: none;
  border-radius: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.inline-select:hover, .inline-input:hover {
  border-color: var(--border);
  background: white;
}
.inline-select:focus, .inline-input:focus {
  border-color: var(--taupe);
  background: white;
}
.inline-input.price { max-width: 80px; }

/* Deliverables list : grouped by issue (Spring 2026, Summer 2026, etc.) */
.deliverables-issue-group { margin-bottom: 32px; }
.deliverables-issue-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.deliverables-issue-head h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  letter-spacing: 0.005em;
}
.inline-select.saving, .inline-input.saving {
  border-color: var(--muted);
  background: var(--parchment);
}
.inline-select.saved, .inline-input.saved {
  border-color: var(--success);
  background: var(--success-bg);
  animation: saved-flash 1s ease;
}
@keyframes saved-flash {
  0%   { background: var(--success-bg); }
  100% { background: white; }
}

/* Subtle card hover for clickable rows */
.table tbody tr:not(.no-hover) { transition: background 0.12s ease; }

/* Date input native style cleanup */
input[type="date"] { font-family: var(--font-sans); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.4; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Loading skeleton animation refinement */
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.inline-edit-table td { padding: 8px 10px; }

/* ───────────────────── Cmd-K Command Palette ───────────────────── */
.cmdk-hint {
  position: fixed; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 8px;
  background: white;
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  z-index: 800;
  user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cmdk-hint:hover { color: var(--ink); border-color: var(--ink); }
.cmdk-hint kbd {
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 1px 4px;
  background: var(--parchment);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 0;
}

.cmdk-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 24, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 20px 20px;
}
.cmdk-panel {
  background: white;
  border: 1px solid var(--border);
  width: 100%; max-width: 600px;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}
.cmdk-input {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 18px 20px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: white;
  color: var(--ink);
  outline: none;
}
.cmdk-input::placeholder { color: var(--muted); }
.cmdk-results {
  max-height: 60vh;
  overflow-y: auto;
}
.cmdk-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  border-left: 2px solid transparent;
  align-items: center;
  font-size: 13px;
}
.cmdk-row.active {
  background: var(--parchment);
  border-left-color: var(--taupe);
}
.cmdk-row-type {
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.cmdk-row-label {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmdk-row-hint {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.cmdk-empty {
  padding: 30px 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: italic;
}
.cmdk-foot {
  display: flex; gap: 14px; justify-content: flex-end;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cmdk-foot kbd {
  font-family: var(--font-sans);
  font-size: 10px;
  padding: 1px 4px;
  background: var(--parchment);
  border: 1px solid var(--border);
  color: var(--ink);
  margin-right: 4px;
}
@media (max-width: 768px) {
  .cmdk-hint { display: none; } /* Cmd-K is desktop-only UX */
  .cmdk-overlay { padding-top: 40px; }
  .cmdk-row { grid-template-columns: 60px 1fr; }
  .cmdk-row-hint { display: none; }
}

/* ───────────────────── Proposal Builder ───────────────────── */
.proposal-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: white;
  border: 1px solid var(--border);
  margin-bottom: 22px;
}
.proposal-totals .cell {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}
.proposal-totals .cell:last-child { border-right: 0; }
.proposal-totals .cell .n {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--ink);
  line-height: 1.05;
}
.proposal-totals .cell .l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}
@media (max-width: 1100px) {
  .proposal-totals { grid-template-columns: repeat(2, 1fr); }
  .proposal-totals .cell:nth-child(2n) { border-right: 0; }
  .proposal-totals .cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
.proposal-totals .cell .n { white-space: nowrap; }

.proposal-items-table th {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.proposal-items-table td { font-size: 12px; vertical-align: top; }

/* ───────────────────── Proposal Print Document : editorial ───────────────────── */
.proposal-doc-page {
  background: #ECE9E2;  /* warm paper backdrop */
  min-height: 100vh;
  padding: 32px 20px 80px;
}
.proposal-toolbar {
  max-width: 880px;
  margin: 0 auto 22px;
  display: flex; gap: 8px; align-items: center;
}
.proposal-doc {
  max-width: 880px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 28px;
}
.ppage {
  background: white;
  padding: 64px 72px 48px;
  position: relative;
  min-height: 980px;
  display: flex; flex-direction: column;
  box-shadow: 0 6px 28px rgba(26,26,24,0.08);
}
.ppage-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; color: var(--muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.cover-rule {
  height: 1px;
  background: var(--taupe);
  margin: 16px 0 0;
}
.ppage-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Cover (Page 1) ───────────────────────────────────────────────────── */
.cover-logo {
  text-align: center;
  margin: 60px 0 50px;
}
.cover-logo img { height: 96px; }
.cover-kicker {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--taupe);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}
.cover-title {
  font-family: var(--font-serif);
  font-size: 52px;
  line-height: 1.05;
  margin: 0 0 10px 0;
  color: var(--ink);
  font-weight: normal;
  text-align: center;
  letter-spacing: 0;
}
.cover-subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 38px;
}
.cover-blurb {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  padding: 22px 28px;
  background: var(--parchment);
  border-left: 2px solid var(--taupe);
  margin: 0 auto 44px;
  max-width: 600px;
  text-align: left;
  letter-spacing: 0.005em;
}
.cover-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: auto;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.cover-meta > div { padding: 0; }
.meta-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
}
.meta-value {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.meta-sub { color: var(--muted); font-size: 12px; font-style: italic; }

/* ── Package (Page 2) ──────────────────────────────────────────────────── */
.package-kicker {
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--taupe);
  font-weight: 700;
  margin-top: 36px;
  margin-bottom: 8px;
}
.package-title {
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: normal;
}
.package-leadin {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 30px;
  max-width: 600px;
  line-height: 1.5;
}
.value-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  margin-bottom: 32px;
  padding: 22px 0;
}
.value-strip > div { padding: 0 14px; text-align: center; border-right: 1px solid var(--border); }
.value-strip > div:last-child { border-right: 0; }
.value-strip .vs-n {
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--ink);
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
}
.value-strip .vs-l {
  font-size: 9px;
  color: var(--muted);
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.package-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px;
  font-family: var(--font-sans);
}
.package-table th {
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 8px 8px 10px;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  border-bottom: 1px solid var(--ink);
}
.package-table th.num, .package-table td.num { text-align: right; }
.package-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-size: 11px;
  color: var(--ink);
}
.package-table tr:nth-child(even) td { background: transparent; }
.package-table td.channel {
  font-family: var(--font-serif);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.package-table td.placement .placement-name {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.package-table td.placement .placement-note {
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  margin-top: 2px;
}
.package-table td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.package-table tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  font-family: var(--font-serif);
  font-size: 14px;
}

/* ── Recommendation (Page 3) ──────────────────────────────────────────── */
.recommendation-text {
  font-family: var(--font-serif);
  font-size: 15px; line-height: 1.7;
  color: var(--ink);
  margin-bottom: 32px;
  white-space: pre-line;
  max-width: 640px;
}
.recommendation-text::first-letter {
  font-family: var(--font-serif);
  font-size: 60px;
  float: left;
  line-height: 0.9;
  margin: 4px 10px 0 0;
  color: var(--taupe);
}
.next-step-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: normal;
  color: var(--ink);
  margin: 36px 0 12px;
  border-top: 1px solid var(--border);
  padding-top: 28px;
}
.next-step-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 32px;
  max-width: 640px;
}
.signoff {
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.signoff-name {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 2px;
}
.signoff-line {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  font-family: var(--font-serif);
}

/* Visual Addendum page: media-kit-style spread of real magazine examples
 * pulled from Settings → Specs. Layout adapts to asset count via
 * .addendum-count-N modifier classes on the .ppage. */
.addendum-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
  max-width: 540px;
}
.addendum-grid {
  display: grid;
  gap: 18px;
}
.addendum-count-1 .addendum-grid { grid-template-columns: 1fr; }
.addendum-count-2 .addendum-grid { grid-template-columns: 1fr 1fr; }
.addendum-count-3 .addendum-grid {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a a" "b c";
}
.addendum-count-3 .addendum-fig:nth-child(1) { grid-area: a; }
.addendum-count-3 .addendum-fig:nth-child(2) { grid-area: b; }
.addendum-count-3 .addendum-fig:nth-child(3) { grid-area: c; }
.addendum-count-4 .addendum-grid { grid-template-columns: 1fr 1fr; }
.addendum-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.addendum-img-wrap {
  width: 100%;
  background: #f5f1e8;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.addendum-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.addendum-img-missing {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--muted);
  padding: 60px;
}
.addendum-fig figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink);
  margin-top: 8px;
  text-align: center;
  letter-spacing: 0.02em;
}

@media print {
  .proposal-doc-page { background: white; padding: 0; }
  .proposal-doc { max-width: none; gap: 0; }
  .ppage {
    box-shadow: none;
    padding: 22mm 20mm;
    min-height: auto;
    page-break-after: always;
  }
  .ppage:last-child { page-break-after: auto; }
  /* Avoid splitting a single addendum image across two pages */
  .addendum-fig { page-break-inside: avoid; break-inside: avoid; }
  @page { margin: 0; }
}

/* ───────────────────── Client Statement : print-ready ───────────────────── */
.statement-page {
  background: var(--warm-white);
  min-height: 100vh;
  padding: 40px 20px 80px;
}
.statement-toolbar {
  max-width: 800px;
  margin: 0 auto 16px;
  display: flex; align-items: center; gap: 8px;
}
.statement-doc {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border: 1px solid var(--border);
  padding: 48px 56px 56px;
  box-shadow: 0 8px 30px rgba(26,26,24,0.06);
}
.statement-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.statement-logo { height: 36px; }
.statement-head-meta { text-align: right; }
.statement-kicker {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}
.statement-asof {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
  margin-top: 4px;
}
.statement-rule {
  height: 2px; background: var(--ink);
  margin: 18px 0 24px;
}
.statement-client-name {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.1;
  color: var(--ink);
  font-weight: normal;
  letter-spacing: 0.01em;
  margin: 0 0 10px 0;
}
.statement-client-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
  margin: 0 0 28px 0;
}
.statement-client-meta > div { border-left: 2px solid var(--border); padding-left: 10px; }
.statement-client-meta dt {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 2px;
}
.statement-client-meta dd {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}
.statement-totals {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  margin-bottom: 32px;
}
.statement-totals .stat {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
}
.statement-totals .stat:last-child { border-right: 0; }
.statement-totals .stat-n {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.05;
  color: var(--ink);
}
.statement-totals .stat-l {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 600;
}
.statement-section { margin-bottom: 32px; }
.statement-h {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: normal;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin: 0 0 16px 0;
}
.statement-group { margin-bottom: 22px; }
.statement-group-head {
  font-family: var(--font-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--muted);
  margin: 0 0 8px 0;
}
.statement-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.statement-table th {
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--parchment);
}
.statement-table td {
  padding: 10px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.statement-table td.placement { font-family: var(--font-serif); font-size: 13px; }
.statement-contacts {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--border);
}
.statement-contacts li {
  padding: 8px 0;
  border-bottom: 1px dotted var(--border);
  font-size: 12px;
  display: flex; gap: 12px; align-items: baseline;
}
.statement-contacts .date { font-family: var(--font-serif); min-width: 150px; color: var(--ink); }
.statement-contacts .note { flex: 1; color: var(--ink); }
.statement-foot {
  margin-top: 40px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 640px) {
  .statement-doc { padding: 28px 20px; }
  .statement-client-name { font-size: 24px; }
  .statement-totals { grid-template-columns: repeat(2, 1fr); }
  .statement-totals .stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .statement-totals .stat:nth-child(2n) { border-right: 0; }
  .statement-table { font-size: 11px; }
  .statement-table th, .statement-table td { padding: 6px 8px; }
}

@media print {
  .no-print { display: none !important; }
  .sidebar, .mobile-header, .sidebar-backdrop, .toast-container, .modal-backdrop, .side-panel { display: none !important; }
  body, html, .app-shell, .main, .statement-page { background: white !important; }
  .app-shell { display: block !important; }
  .main { padding: 0 !important; }
  .statement-page { padding: 0 !important; }
  .statement-doc { max-width: none; border: 0; box-shadow: none; padding: 24px 28px !important; }
  .statement-totals { break-inside: avoid; }
  .statement-group { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  @page { margin: 18mm 14mm; }
}

/* Mobile-first views (Kevin/Carly) */
@media (max-width: 960px) {
  .mobile-main { font-size: 14px; }
  .mobile-main .btn { min-height: 44px; }
}

/* Mobile tweaks for Betsy's editorial views */
@media (max-width: 960px) {
  .editorial-masthead { padding-bottom: 14px; border-bottom-width: 1px; margin-bottom: 20px; }
  .editorial-masthead .greeting { font-size: 26px; line-height: 1.15; }
  .editorial-masthead .dateline { font-size: 13px; margin-top: 4px; }
  .editorial-masthead .masthead-issue { display: none; } /* drop the Vol I decoration on mobile */
  .editorial-masthead .ornament { display: none; }

  .at-a-glance { margin-bottom: 24px; }
  .glance-cell { padding: 14px 16px; min-height: 74px; }
  .glance-cell .glance-n { font-size: 24px; }

  .dashboard-col .col-head, .dash-pane .col-head { padding-bottom: 6px; margin-bottom: 14px; }
  .dashboard-col .col-head h2, .dash-pane .col-head h2 { font-size: 14px; letter-spacing: 0.12em; }

  .task-card .title { font-size: 14px; }
  .task-card { padding: 12px 14px; }

  .radar-card h4 { font-size: 15px; }

  /* Sidebar: compact on mobile */
  .sidebar { padding: 8px 10px; }
  .sidebar-logo { padding: 4px 12px 4px 4px; }
  .sidebar-logo img { height: 18px; }
  .sidebar-nav a { padding: 10px 10px; font-size: 10px; }
}



/* ───────────────────── Contracts ───────────────────── */
.contract-toolbar {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 0;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.contract-status {
  font-family: var(--font-sans);
  font-size: 10px; padding: 4px 10px;
  text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 600;
  background: var(--border); color: var(--ink);
}
.contract-status.status-draft { background: var(--border); }
.contract-status.status-sent, .contract-status.status-viewed { background: var(--taupe); color: white; }
.contract-status.status-signed { background: var(--ink); color: white; }
.contract-status.status-executed { background: #2d5a3d; color: white; }
.contract-status.status-voided, .contract-status.status-declined { background: var(--danger); color: white; }

/* Compact status pill for the contracts list table */
.contract-status-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 9px; padding: 2px 8px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 600;
  background: var(--border); color: var(--ink);
  white-space: nowrap;
}
.contract-status-pill.status-sent, .contract-status-pill.status-viewed { background: var(--taupe); color: white; }
.contract-status-pill.status-signed { background: var(--ink); color: white; }
.contract-status-pill.status-executed { background: #2d5a3d; color: white; }
.contract-status-pill.status-voided, .contract-status-pill.status-declined { background: var(--danger); color: white; }

.contract-doc {
  max-width: 760px; margin: 0 auto;
  background: white;
  padding: 60px 60px 80px;
  border: 1px solid var(--border);
  font-family: var(--font-serif);
  color: var(--ink);
}
.contract-head {
  margin-bottom: 40px; padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.contract-logo {
  margin-bottom: 22px;
  text-align: center;
}
.contract-logo img {
  height: 56px; width: auto;
}
.contract-kicker {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.32em;
  text-transform: uppercase; color: var(--taupe);
  font-weight: 600;
  margin-bottom: 14px;
  display: inline-block;
  padding: 0 14px;
  position: relative;
}
.contract-kicker::before, .contract-kicker::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 28px; height: 1px; background: var(--taupe);
  margin: 0 12px 3px;
}
.contract-title {
  font-size: 36px; line-height: 1.1; font-weight: normal;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}
.contract-meta {
  display: flex; gap: 32px; flex-wrap: wrap;
  font-size: 13px;
  justify-content: center;
}
.contract-meta .meta-l {
  font-family: var(--font-sans);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 2px; font-weight: 600;
}
.contract-meta .meta-v { font-size: 14px; }

.contract-section { margin-bottom: 28px; }
.contract-section h2 {
  font-size: 16px; letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 600;
  margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-sans);
}
.contract-section p {
  font-size: 14px; line-height: 1.6;
  margin: 0; white-space: pre-wrap;
}
.contract-edit {
  font-family: var(--font-sans); font-size: 9px;
  background: transparent; border: 1px solid var(--border);
  padding: 2px 8px; cursor: pointer; color: var(--muted);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.contract-edit:hover { color: var(--ink); border-color: var(--ink); }

.contract-schedule {
  width: 100%; border-collapse: collapse;
  margin-top: 12px; font-size: 13px;
}
.contract-schedule th {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--ink);
}
.contract-schedule th.num, .contract-schedule td.num { text-align: right; }
.contract-schedule td {
  padding: 10px; vertical-align: top;
  border-bottom: 1px dotted var(--border);
}
.contract-schedule .placement-name { font-size: 14px; }
.contract-schedule tfoot td {
  border-top: 1px solid var(--ink); border-bottom: 0;
  padding-top: 12px; font-weight: 600;
}

.contract-signatures {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px;
  margin: 50px 0 30px;
}
.sig-block { padding-top: 14px; }
.sig-label {
  font-family: var(--font-sans); font-size: 9px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  margin-bottom: 18px;
}
.sig-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 28px; line-height: 1; margin-bottom: 8px;
}
.sig-line {
  border-bottom: 1px solid var(--ink);
  margin-bottom: 6px;
}
.sig-meta {
  font-family: var(--font-sans); font-size: 10px;
  color: var(--muted); letter-spacing: 0.04em;
}

.contract-audit {
  margin-top: 40px; padding: 18px 20px;
  background: var(--parchment); border: 1px solid var(--border);
  font-family: var(--font-sans);
}
.contract-audit h3 {
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px; font-weight: 600;
}
.audit-row { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
.audit-row:last-child { margin-bottom: 0; }

@media print {
  .no-print, .contract-toolbar, .sidebar, .toast-container { display: none !important; }
  body { background: white; }
  .main { margin-left: 0 !important; padding: 0 !important; }
  .contract-doc { border: 0; padding: 24px 32px; max-width: none; }
}

/* ───────────────────── Public sign page ───────────────────── */
.sign-shell {
  min-height: 100vh; background: var(--parchment);
  padding: 30px 20px 60px;
}
.sign-head {
  text-align: center;
  max-width: 760px; margin: 0 auto 28px;
}
.sign-logo { height: 40px; color: var(--ink); }
.sign-kicker {
  font-family: var(--font-sans);
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 600;
  margin-top: 14px;
}
.sign-main { max-width: 760px; margin: 0 auto; }
.sign-doc { box-shadow: 0 4px 24px rgba(26,26,24,0.06); }
.sign-form-card {
  max-width: 760px; margin: 30px auto 0;
  background: white;
  border: 1px solid var(--border);
  padding: 32px 40px 40px;
  box-shadow: 0 4px 24px rgba(26,26,24,0.06);
}
.sign-form-card h3 {
  font-family: var(--font-serif); font-size: 22px;
  font-weight: normal; margin: 0 0 12px;
}
.sign-form-card p { font-size: 13px; line-height: 1.55; margin-bottom: 18px; }
.consent-field label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; cursor: pointer; }
.consent-field input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }
.sign-error, .sign-success {
  background: white; border: 1px solid var(--border);
  padding: 40px 50px; text-align: center;
  max-width: 560px; margin: 80px auto;
}
.sign-error h2, .sign-success h2 {
  font-family: var(--font-serif); font-weight: normal;
  margin: 0 0 14px;
}
.sign-success h2 { color: #2d5a3d; }

/* ─── Material upload lightbox (Phase 2) ────────────────────────────── */
.lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(10, 10, 8, 0.94);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  animation: lightbox-in 0.18s ease-out;
}
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-stage {
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
}
.lightbox-stage img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  background: #1a1a18;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.lightbox-stage figcaption {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.78);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 18px; right: 24px;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.85);
  font-size: 32px; line-height: 1;
  cursor: pointer; padding: 8px 12px;
  font-family: var(--font-sans);
}
.lightbox-close:hover { color: white; }
.lightbox-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 0;
  width: 56px; height: 56px;
  font-size: 38px; line-height: 1;
  cursor: pointer;
  font-family: var(--font-sans);
}
.lightbox-arrow:hover { background: rgba(255,255,255,0.15); color: white; }
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
@media (max-width: 540px) {
  .lightbox-arrow { width: 44px; height: 44px; font-size: 28px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-close { top: 8px; right: 10px; }
}


/* ─── Phase B : Proofing pipeline ─────────────────────────────────────── */
.proofing-issue {
  background: var(--warm-white);
  border: 1px solid var(--border);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.proof-pipeline {
  display: flex;
  gap: 0;
  align-items: stretch;
  flex-wrap: wrap;
}
.proof-pill {
  flex: 1;
  min-width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 14px;
  background: white;
  border: 1px solid var(--border);
  border-right: none;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}
.proof-pill:last-child { border-right: 1px solid var(--border); }
.proof-pill:hover { background: var(--parchment); }
.proof-pill.active {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}
.proof-pill.active + .proof-pill { border-left-color: var(--ink); }
.proof-pill-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--border);
  border: 1.5px solid var(--border);
}
.proof-pill.tone-done .proof-pill-dot {
  background: var(--ink);
  border-color: var(--ink);
}
.proof-pill.tone-progress .proof-pill-dot {
  background: var(--taupe);
  border-color: var(--taupe);
}
.proof-pill.tone-blocked .proof-pill-dot {
  background: var(--danger);
  border-color: var(--danger);
}
.proof-pill.tone-pending .proof-pill-dot {
  background: white;
}
.proof-pill.active .proof-pill-dot { border-color: white; }
.proof-detail {
  background: white;
  border: 1px solid var(--border);
  padding: 18px 22px;
}
.proof-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.proof-detail-head h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  margin: 0 0 4px;
}
.proof-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.proof-detail-attach {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dotted var(--border);
}
.proof-attachment-row {
  display: flex; gap: 10px; align-items: center;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--parchment);
  border: 1px dotted var(--border);
}
.hidden-file { display: none; }

/* ─── Phase B : Remnant Opportunities (formerly Late-change) ──────────── */
.late-change-issue {
  background: white;
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.late-change-issue-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--warm-white);
}
.late-change-issue-head h3 { margin: 0; font-family: var(--font-serif); font-size: 18px; }
.late-change-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.late-change-row:last-child { border-bottom: none; }
.late-change-slot { font-family: var(--font-serif); font-size: 15px; }
.late-change-money {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.late-change-money .secondary { color: var(--muted); font-size: 12px; }
.late-change-pill {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--border);
  background: var(--warm-white);
  color: var(--muted);
  white-space: nowrap;
}
.late-change-pill.outcome-pitched { background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning); }
.late-change-pill.outcome-won     { background: var(--success-bg); color: var(--success-text); border-color: var(--success); }
.late-change-pill.outcome-lost,
.late-change-pill.outcome-expired { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger); }
.late-change-actions { display: flex; gap: 6px; }

/* ─── Phase B : Per-issue stories ─────────────────────────────────────── */
.story-card {
  background: white;
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 14px;
}
.story-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; margin-bottom: 10px;
}
.story-card-head h4 {
  font-family: var(--font-serif); font-size: 17px; margin: 0;
}
/* Right-side controls (status badge + edit button) : vertically center so the
 * READY/SCHEDULED pill doesn't tower over the Edit button. */
.story-card-head > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}
/* Status pills inside story-card-head : match button height for clean alignment */
.story-card-head .status-pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}
.story-meta-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-sans); font-size: 12px;
  color: var(--muted); margin-bottom: 12px;
}
.story-meta-row b { color: var(--ink); font-weight: normal; }
.story-shoot-card {
  background: var(--parchment);
  border: 1px dotted var(--border);
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
}
.story-asset-list {
  margin: 10px 0;
}
.story-asset-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px dotted var(--border);
}
.story-asset-row:last-child { border-bottom: none; }
.story-asset-status {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--border);
}
.story-asset-status.s-pending  { color: var(--muted); }
.story-asset-status.s-received { color: var(--warning-text); border-color: var(--warning); background: var(--warning-bg); }
.story-asset-status.s-approved { color: var(--success-text); border-color: var(--success); background: var(--success-bg); }
.story-asset-status.s-rejected { color: var(--danger-text); border-color: var(--danger); background: var(--danger-bg); }

/* Required field marker — accompanies HTML `required` attribute so users see
   what's needed BEFORE submit. Class added consistently across all new/edit
   forms (clients, tasks, deliverables, proposals, issues). */
.required-marker { color: #a14848; font-weight: 600; margin-left: 2px; }

/* Inline price input — red placeholder when no price has been entered yet
   AND the description doesn't suggest it's intentionally free. Surfaces
   data gaps from sloppy imports (Bastille, Luxe Forte) without forcing
   the user to scan every row to spot them. */
.inline-input.price-missing::placeholder { color: #a14848; font-weight: 600; opacity: 0.9; }