/* ============================================================
   Carespective product-mockup chrome
   ------------------------------------------------------------
   Synthetic UI mockups used inside marketing-page feature
   sections. Not part of the canonical product UI — these are
   illustrative only. Built on the same DS tokens.
   ============================================================ */

.mockup {
  inline-size: 100%;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-mockup);
  overflow: hidden;
  font-size: 12px;
  color: var(--ink);
  position: relative;
  transform: translateZ(0);
}

.mock-window { background: var(--surface); display: flex; flex-direction: column; min-block-size: 540px; }

.mock-titlebar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--surface-soft);
  border-block-end: 1px solid var(--border-light);
}
.mock-dot { inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--border); }
.mock-dot--r { background: oklch(70% 0.13 25); }
.mock-dot--y { background: oklch(80% 0.13 80); }
.mock-dot--g { background: oklch(75% 0.13 145); }
.mock-url {
  margin-inline-start: 0.75rem;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  padding: 0.25rem 0.625rem;
  flex: 1; min-inline-size: 0;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}

.mock-body { display: flex; min-block-size: 0; flex: 1; }

.mock-sidebar {
  inline-size: 168px; flex: 0 0 168px;
  background: color-mix(in oklch, var(--surface-soft) 60%, var(--surface));
  border-inline-end: 1px solid var(--border-light);
  padding: 0.875rem 0.625rem;
  display: flex; flex-direction: column; gap: 0.875rem;
}
.mock-sidebar-brand {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.5rem 0.625rem;
  border-block-end: 1px solid var(--border-light);
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  color: var(--ink);
}
.mock-sidebar-brand .wordmark-mark { inline-size: 18px; block-size: 18px; }
.mock-sidebar-group { display: flex; flex-direction: column; gap: 1px; }
.mock-sidebar-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  padding: 0.25rem 0.5rem 0.375rem;
}
.mock-sidebar-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 12px; color: var(--ink-soft);
  padding: 0.375rem 0.5rem;
  border-radius: var(--r-sm); font-weight: 500;
}
.mock-sidebar-item .icon-sq {
  inline-size: 14px; block-size: 14px; border-radius: 3px;
  background: var(--border-strong); opacity: 0.55; flex: 0 0 auto;
}
.mock-sidebar-item.is-active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 0 0 1px var(--border-light) inset;
}
.mock-sidebar-item.is-active .icon-sq { background: var(--accent); opacity: 1; }
.mock-sidebar-foot {
  margin-block-start: auto;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem; border-radius: var(--r-md);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  border: 1px solid var(--border-light);
}
.mock-sidebar-foot .avatar {
  inline-size: 24px; block-size: 24px; border-radius: 50%;
  background: linear-gradient(135deg, oklch(72% 0.05 200), oklch(58% 0.08 200));
  display: grid; place-items: center;
  color: white; font-weight: 600; font-size: 10px; flex: 0 0 auto;
}
.mock-sidebar-foot-text { display: flex; flex-direction: column; gap: 1px; min-inline-size: 0; }
.mock-sidebar-foot-name { font-size: 11px; font-weight: 500; color: var(--ink); }
.mock-sidebar-foot-org { font-size: 10px; color: var(--muted); }

.mock-main {
  flex: 1; min-inline-size: 0;
  padding: 1rem 1.125rem;
  display: flex; flex-direction: column; gap: 1rem;
  background: var(--surface); overflow: hidden;
}
.mock-main-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--border-light);
}
.mock-main-head-left { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
.mock-crumb {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted);
}
.mock-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: 18px; letter-spacing: -0.01em; color: var(--ink);
}
.mock-main-head-right { display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }
.mock-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-light); border-radius: var(--r-sm);
  font-size: 11px; font-weight: 500; color: var(--ink-soft);
  background: var(--surface);
}
.mock-pill--ghost { background: transparent; }
.mock-pill--accent { background: var(--accent); color: white; border-color: var(--accent); }
.mock-pill .caret { font-size: 9px; opacity: 0.55; }

.mock-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 500;
  background: var(--surface-soft); color: var(--ink-soft);
  border: 1px solid transparent; white-space: nowrap;
}
.mock-badge--positive { background: var(--positive-bg); color: var(--positive-fg); }
.mock-badge--warning  { background: var(--warning-bg);  color: var(--warning-fg);  }
.mock-badge--negative { background: var(--negative-bg); color: var(--negative-fg); }
.mock-badge--info     { background: var(--info-bg);     color: var(--info-fg);     }
.mock-badge .dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: currentColor; }

/* ----- KPI row ----- */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.kpi {
  border: 1px solid var(--border-light); border-radius: var(--r-md);
  padding: 0.625rem 0.75rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 0.25rem;
  min-inline-size: 0;
}
.kpi-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 500;
}
.kpi-value {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-value .small { font-size: 13px; color: var(--muted); margin-inline-start: 2px; }
.kpi-trend {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 10px; font-weight: 500; color: var(--positive-fg);
}
.kpi-trend--down { color: var(--negative-fg); }

/* ----- Bars ----- */
.bars { display: flex; flex-direction: column; gap: 0.5rem; }
.bar-row {
  display: grid; grid-template-columns: 96px 1fr 36px;
  gap: 0.5rem; align-items: center; font-size: 11px;
}
.bar-row-label { color: var(--ink-soft); font-weight: 500; }
.bar-track {
  block-size: 6px; background: var(--surface-soft);
  border-radius: var(--r-pill); overflow: hidden; position: relative;
}
.bar-fill { block-size: 100%; background: var(--accent); border-radius: var(--r-pill); }
.bar-fill--warn { background: oklch(68% 0.135 70); }
.bar-fill--neg  { background: oklch(60% 0.16 25); }
.bar-row-value {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  text-align: end; font-variant-numeric: tabular-nums;
}

/* ----- Mock card ----- */
.mock-card {
  border: 1px solid var(--border-light); border-radius: var(--r-md);
  padding: 0.875rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 0.625rem;
}
.mock-card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem;
}
.mock-card-title { font-size: 12px; font-weight: 500; color: var(--ink); }
.mock-card-meta {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ----- Alert strip ----- */
.alert-strip {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: var(--r-md);
  background: var(--warning-bg); color: var(--warning-fg);
  font-size: 11px; font-weight: 500;
  border-inline-start: 3px solid currentColor;
}
.alert-strip strong { color: currentColor; font-weight: 600; }
.alert-strip .meta {
  margin-inline-start: auto;
  font-family: var(--font-mono); font-size: 10px; opacity: 0.7;
}

/* ----- Sign-off list ----- */
.signoff-list { display: flex; flex-direction: column; gap: 0.5rem; }
.signoff-item {
  display: grid; grid-template-columns: 18px 1fr auto;
  gap: 0.625rem; align-items: center;
  padding: 0.5rem 0.75rem; border-radius: var(--r-md);
  border: 1px solid var(--border-light); background: var(--surface);
}
.signoff-item.is-pending {
  background: oklch(98% 0.02 80); border-color: oklch(85% 0.04 80);
}
.signoff-check {
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--surface);
  display: grid; place-items: center;
}
.signoff-check.is-done { background: var(--accent); border-color: var(--accent); }
.signoff-check.is-done::after {
  content: ""; inline-size: 8px; block-size: 4px;
  border: 2px solid white; border-block-start: 0; border-inline-end: 0;
  transform: rotate(-45deg) translateY(-1px);
}
.signoff-content { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
.signoff-title { font-size: 12px; font-weight: 500; color: var(--ink); }
.signoff-sub { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }

/* ----- Profile strip ----- */
.profile-strip {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.875rem;
  border: 1px solid var(--border-light); border-radius: var(--r-md);
  background: linear-gradient(135deg, oklch(98% 0.018 200), oklch(96% 0.02 70));
}
.profile-avatar {
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  display: grid; place-items: center; color: white;
  font-weight: 600; font-size: 16px;
  background: linear-gradient(135deg, oklch(70% 0.10 30), oklch(55% 0.14 25));
  flex: 0 0 auto;
}
.profile-meta { display: flex; flex-direction: column; gap: 0.125rem; min-inline-size: 0; }
.profile-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.profile-role { font-size: 11px; color: var(--muted); }
.profile-stats {
  margin-inline-start: auto;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.profile-stat { display: flex; flex-direction: column; align-items: flex-end; }
.profile-stat-value {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16px; color: var(--ink); letter-spacing: -0.02em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.profile-stat-value .small { font-size: 11px; color: var(--muted); margin-inline-start: 2px; }
.profile-stat-label {
  font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  font-family: var(--font-mono); font-weight: 500;
}

/* ----- Calendar strip ----- */
.cal-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.cal-day {
  border: 1px solid var(--border-light); border-radius: var(--r-sm);
  padding: 0.5rem 0.375rem; background: var(--surface);
  display: flex; flex-direction: column; gap: 0.25rem;
  min-block-size: 64px; font-size: 10px;
}
.cal-day-h { display: flex; justify-content: space-between; align-items: baseline; }
.cal-day-num { font-family: var(--font-display); font-weight: 500; font-size: 12px; color: var(--ink); }
.cal-day-name { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--muted); }
.cal-day.is-today .cal-day-num { color: var(--accent-deep); }
.cal-day.is-today { box-shadow: inset 0 -2px 0 var(--accent); }
.cal-event {
  font-size: 9px; font-weight: 500;
  padding: 0.125rem 0.25rem; border-radius: 2px;
  background: var(--info-bg); color: var(--info-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event--accent { background: var(--accent-soft); color: var(--accent-deep); }
.cal-event--warn   { background: var(--warning-bg);   color: var(--warning-fg); }

/* ----- Renewal list ----- */
.renewal-list { display: flex; flex-direction: column; gap: 0.375rem; }
.renewal-item {
  display: grid; grid-template-columns: 1.6fr 1fr 0.8fr auto;
  gap: 0.625rem; align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-light); background: var(--surface);
}
.renewal-item.is-urgent {
  border-color: oklch(86% 0.06 25); background: oklch(99% 0.012 25);
}
.renewal-stack { display: flex; flex-direction: column; min-inline-size: 0; }
.renewal-title { font-size: 12px; color: var(--ink); font-weight: 500; }
.renewal-sub { font-size: 10px; color: var(--muted); font-family: var(--font-mono); }
.renewal-name {
  font-size: 11px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 0.5rem; min-inline-size: 0;
}
.renewal-avatar {
  inline-size: 18px; block-size: 18px; border-radius: 50%;
  display: grid; place-items: center;
  color: white; font-weight: 600; font-size: 9px;
  flex: 0 0 auto;
}
.av-1 { background: linear-gradient(135deg, oklch(70% 0.10 30), oklch(55% 0.13 25)); }
.av-2 { background: linear-gradient(135deg, oklch(72% 0.08 200), oklch(50% 0.11 200)); }
.av-3 { background: linear-gradient(135deg, oklch(72% 0.10 145), oklch(55% 0.12 145)); }
.av-5 { background: linear-gradient(135deg, oklch(70% 0.08 270), oklch(50% 0.11 260)); }