/*
 * Workspace Home (feature 92, context/specs/feature-92-workspace-ia-consolidation.md §3.1 and §10).
 * Uses the existing design tokens. The mockup literals in context/design/feature-92 are not tokens.
 */
.workspace-overview-page .home-dashboard,
.workspace-overview-page .home-welcome-wrap {
  display: grid;
  gap: var(--ic-space-6);
}

.home-card,
.home-kpi,
.home-preview-tile {
  border: 1px solid var(--ic-color-border);
  border-radius: var(--ic-radius-card);
  background: var(--ic-color-surface);
}

.home-card-head,
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ic-space-3);
  padding: var(--ic-space-4) var(--ic-space-5);
}

.home-card-head h2,
.home-section-head h2,
.home-note h2 {
  margin: 0;
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-lg);
  font-weight: 600;
  color: var(--ic-color-text);
}

.home-section-head { padding-inline: 0; }

.home-card-count {
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-xs);
}

.home-card-link {
  display: inline-block;
  margin: var(--ic-space-3) var(--ic-space-5) var(--ic-space-4);
  color: var(--ic-color-text);
  font-size: var(--ic-text-sm);
  font-weight: var(--ic-weight-semibold, 600);
  text-decoration: underline;
}

.home-card-link--inline { margin: 0; }

/* Greeting row */
.home-greeting {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ic-space-4);
}

.home-date {
  margin: 0 0 var(--ic-space-1);
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-sm);
}

.home-greeting-title {
  margin: 0;
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ic-color-text);
}

.home-continue {
  display: inline-block;
  margin-top: var(--ic-space-2);
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-sm);
}

.home-periods {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ic-space-1);
  padding: var(--ic-space-1);
  border-radius: var(--ic-radius-control);
  background: color-mix(in srgb, var(--ic-color-text) 8%, var(--ic-color-canvas));
}

.home-period {
  min-height: 2.5rem;
  padding: 0 var(--ic-space-3);
  border: 0;
  border-radius: calc(var(--ic-radius-control) - 2px);
  background: transparent;
  color: var(--ic-color-text-muted);
  font: inherit;
  font-size: var(--ic-text-sm);
  cursor: pointer;
}

.home-period[aria-pressed='true'] {
  background: var(--ic-color-surface);
  color: var(--ic-color-text);
  font-weight: var(--ic-weight-semibold, 600);
  box-shadow: var(--ic-shadow-subtle);
}

.home-period:focus-visible,
.home-action:focus-visible,
.home-button:focus-visible,
.home-docs a:focus-visible,
.home-card-link:focus-visible {
  outline: 2px solid var(--ic-color-action);
  outline-offset: 2px;
}

/* KPI tiles */
.home-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ic-space-4);
}

.home-kpi {
  display: grid;
  gap: var(--ic-space-2);
  padding: var(--ic-space-4) var(--ic-space-5);
}

.home-kpi-head {
  display: flex;
  justify-content: space-between;
  gap: var(--ic-space-2);
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-sm);
}

.home-kpi-delta { font-size: var(--ic-text-xs); }

.home-kpi-value {
  font-family: var(--ic-font-serif);
  font-size: var(--ic-text-2xl);
  font-weight: 600;
  line-height: 1.05;
  color: var(--ic-color-text);
}

.home-kpi-note {
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-xs);
}

.home-kpi[data-tone='danger'] .home-kpi-value,
.home-kpi[data-tone='danger'] .home-kpi-delta { color: var(--ic-color-danger); }

/* Body grid */
.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--ic-space-4);
  align-items: start;
}

.home-side { display: grid; gap: var(--ic-space-4); }

.home-needs,
.home-coming {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-needs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--ic-space-3);
  padding: var(--ic-space-3) var(--ic-space-5);
  border-top: 1px solid var(--ic-color-border);
  border-left: 4px solid var(--ic-color-border);
}

.home-needs-row[data-tone='danger'] { border-left-color: var(--ic-color-danger); }
.home-needs-row[data-tone='warning'] { border-left-color: var(--ic-color-warning); }

.home-needs-text,
.home-coming-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.home-needs-title { font-size: var(--ic-text-sm); color: var(--ic-color-text); }

.home-needs-detail,
.home-coming-detail {
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-xs);
}

.home-needs-money {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-xs);
  color: var(--ic-color-text);
  white-space: nowrap;
}

.home-needs-empty {
  padding: var(--ic-space-4) var(--ic-space-5);
  border-top: 1px solid var(--ic-color-border);
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-sm);
}

.home-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 var(--ic-space-4);
  border: 1px solid var(--ic-color-text);
  border-radius: var(--ic-radius-control);
  background: transparent;
  color: var(--ic-color-text);
  font: inherit;
  font-size: var(--ic-text-sm);
  font-weight: var(--ic-weight-semibold, 600);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.home-action:hover { background: color-mix(in srgb, var(--ic-color-text) 6%, transparent); }

/* Ageing: one hue ramp from neutral navy to red, with a text label on every bucket. */
.home-ageing { display: grid; gap: var(--ic-space-4); padding: 0 var(--ic-space-5) var(--ic-space-5); }

.home-ageing-bar {
  display: flex;
  height: 0.875rem;
  overflow: hidden;
  border-radius: var(--ic-radius-pill);
  background: color-mix(in srgb, var(--ic-color-text) 8%, var(--ic-color-canvas));
}

.home-ageing-segment { height: 100%; }

.home-ageing-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ic-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-ageing-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--ic-space-2);
  font-size: var(--ic-text-xs);
  color: var(--ic-color-text-muted);
}

.home-ageing-amount {
  grid-column: 2;
  font-family: var(--ic-font-mono);
  color: var(--ic-color-text);
}

.home-ageing-swatch {
  grid-row: 1 / span 2;
  width: 0.625rem;
  height: 0.625rem;
  margin-top: 0.2rem;
  border-radius: 2px;
}

[data-bucket='not-yet-due'] { --home-bucket: color-mix(in srgb, var(--ic-color-text) 38%, var(--ic-color-canvas)); }
[data-bucket='late-1-30'] { --home-bucket: color-mix(in srgb, var(--ic-color-action) 38%, var(--ic-color-canvas)); }
[data-bucket='late-31-60'] { --home-bucket: color-mix(in srgb, var(--ic-color-action) 72%, var(--ic-color-canvas)); }
[data-bucket='late-over-60'] { --home-bucket: var(--ic-stamp-dark, var(--ic-color-action-hover)); }
.home-ageing-segment,
.home-ageing-swatch { background: var(--home-bucket); }

/* Coming up */
.home-coming-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ic-space-3);
  padding: var(--ic-space-3) var(--ic-space-5);
  border-top: 1px solid var(--ic-color-border);
  font-size: var(--ic-text-sm);
}

.home-coming-date { display: grid; justify-items: center; line-height: 1.1; }
.home-coming-month { color: var(--ic-color-text-muted); font-size: 0.6875rem; letter-spacing: 0.06em; }
.home-coming-day { font-family: var(--ic-font-serif); font-size: var(--ic-text-xl); color: var(--ic-color-text); }

/* Chart: invoiced and paid differ in lightness, not only hue. */
.home-chart-legend {
  display: flex;
  gap: var(--ic-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--ic-text-xs);
  color: var(--ic-color-text-muted);
}

.home-chart-legend li { display: inline-flex; align-items: center; gap: var(--ic-space-2); }
.home-chart-key { width: 0.75rem; height: 0.75rem; border-radius: 2px; }
[data-series='invoiced'] { --home-series: color-mix(in srgb, var(--ic-color-text) 28%, var(--ic-color-canvas)); }
[data-series='paid'] { --home-series: var(--ic-color-text); }
.home-chart-key,
.home-chart-bar { background: var(--home-series); }

.home-chart { padding: 0 var(--ic-space-5); }

.home-chart-plot {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ic-space-3);
  height: 11rem;
  border-bottom: 1px solid var(--ic-color-border);
}

.home-chart-group {
  display: grid;
  grid-template-rows: 1fr auto;
  min-width: 0;
}

.home-chart-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 11rem;
}

.home-chart-bar {
  width: min(2rem, 40%);
  min-height: 2px;
  border-radius: 3px 3px 0 0;
}

.home-chart-month {
  position: relative;
  top: 1.5rem;
  margin-top: -1.25rem;
  text-align: center;
  font-size: var(--ic-text-xs);
  color: var(--ic-color-text-muted);
}

.home-chart-note {
  margin: 0;
  padding: var(--ic-space-8) var(--ic-space-5) var(--ic-space-4);
  color: var(--ic-color-text-muted);
  font-size: var(--ic-text-xs);
}

/* Recent documents */
.home-table-wrap { overflow-x: auto; }

.home-docs {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--ic-text-sm);
}

.home-docs th,
.home-docs td {
  padding: var(--ic-space-3) var(--ic-space-5);
  border-top: 1px solid var(--ic-color-border);
  text-align: left;
}

.home-docs th {
  color: var(--ic-color-text-muted);
  font-family: var(--ic-font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.home-docs .home-doc-amount { text-align: right; font-family: var(--ic-font-mono); }
.home-doc-number a { color: var(--ic-color-text); font-family: var(--ic-font-mono); font-size: var(--ic-text-xs); }

.home-status {
  display: inline-block;
  padding: 2px var(--ic-space-3);
  border-radius: var(--ic-radius-pill);
  background: color-mix(in srgb, var(--ic-color-text) 10%, var(--ic-color-surface));
  color: var(--ic-color-text);
  font-size: var(--ic-text-xs);
}

.home-status[data-status='paid'] { background: color-mix(in srgb, var(--ic-color-success) 22%, var(--ic-color-surface)); }
.home-status[data-status='overdue'] { background: color-mix(in srgb, var(--ic-color-danger) 20%, var(--ic-color-surface)); color: var(--ic-color-danger); }
.home-status[data-status='unpaid'],
.home-status[data-status='partially-paid'] { background: color-mix(in srgb, var(--ic-color-text) 12%, var(--ic-color-surface)); }

.home-saved { display: inline-flex; align-items: center; gap: var(--ic-space-2); font-size: var(--ic-text-xs); color: var(--ic-color-text-muted); }
.home-saved-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ic-color-border); }
.home-saved[data-tone='stale'] .home-saved-dot,
.home-saved[data-tone='none'] .home-saved-dot { background: var(--ic-color-warning); }
.home-saved[data-tone='current'] .home-saved-dot { background: var(--ic-color-success); }
.home-saved[data-tone='attention'] .home-saved-dot { background: var(--ic-color-danger); }

/* Backup footer */
.home-backup-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-space-4);
  padding: var(--ic-space-4) var(--ic-space-5);
  border-radius: var(--ic-radius-card);
  background: color-mix(in srgb, var(--ic-color-text) 8%, var(--ic-color-canvas));
}

.home-backup-footer div { display: grid; gap: 2px; font-size: var(--ic-text-sm); }
.home-backup-footer span { color: var(--ic-color-text-muted); font-size: var(--ic-text-xs); }

/* Buttons */
.home-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--ic-space-5);
  border: 1px solid transparent;
  border-radius: var(--ic-radius-control);
  font: inherit;
  font-size: var(--ic-text-sm);
  font-weight: var(--ic-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
}

.home-button--primary { background: var(--ic-color-action); color: #fff; }
.home-button--primary:hover { background: var(--ic-color-action-hover); }
.home-button--ghost { border-color: color-mix(in srgb, var(--ic-paper) 40%, transparent); color: var(--ic-paper); }
.home-button--dark { background: var(--ic-color-text); color: var(--ic-color-canvas); }

/* New user */
.home-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  align-items: center;
  gap: var(--ic-space-8);
  padding: clamp(var(--ic-space-6), 5vw, var(--ic-space-12));
  border-radius: var(--ic-radius-panel);
  background: var(--ic-color-text);
  color: var(--ic-paper);
}

.home-welcome-copy { display: grid; justify-items: start; gap: var(--ic-space-4); }

.home-welcome-eyebrow {
  font-family: var(--ic-font-mono);
  font-size: var(--ic-text-xs);
  letter-spacing: 0.085em;
  color: color-mix(in srgb, var(--ic-paper) 70%, transparent);
}

.home-welcome-title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--ic-font-serif);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
}

.home-welcome-lede {
  max-width: 46ch;
  margin: 0;
  color: color-mix(in srgb, var(--ic-paper) 82%, transparent);
  line-height: 1.55;
}

.home-welcome-actions { display: flex; flex-wrap: wrap; gap: var(--ic-space-3); }

.home-example {
  display: grid;
  gap: var(--ic-space-3);
  margin: 0;
  padding: var(--ic-space-5);
  border-radius: var(--ic-radius-card);
  background: var(--ic-color-surface);
  color: var(--ic-color-text);
  box-shadow: var(--ic-shadow-raised);
  transform: rotate(2deg);
}

.home-example-head,
.home-example-total,
.home-example-lines div { display: flex; justify-content: space-between; gap: var(--ic-space-3); }
.home-example-head span,
.home-example-lines { font-family: var(--ic-font-mono); font-size: var(--ic-text-xs); }
.home-example-lines { display: grid; gap: var(--ic-space-2); margin: 0; padding: var(--ic-space-3) 0; border-block: 1px solid var(--ic-color-border); }
.home-example-lines dd { margin: 0; }
.home-example figcaption { color: var(--ic-color-text-muted); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }

.home-welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--ic-space-4);
  align-items: start;
}

.home-checklist-list { margin: 0; padding: 0; list-style: none; }

.home-checklist-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ic-space-3);
  padding: var(--ic-space-3) var(--ic-space-5);
  border-top: 1px solid var(--ic-color-border);
}

.home-checklist-list li div { display: grid; gap: 2px; }
.home-checklist-list li strong { font-size: var(--ic-text-sm); }
.home-checklist-list li div span { color: var(--ic-color-text-muted); font-size: var(--ic-text-xs); }

.home-check {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--ic-color-border);
  border-radius: 50%;
  font-size: 0.75rem;
  color: #fff;
}

.home-checklist-list li[data-done='true'] .home-check {
  border-color: var(--ic-color-success);
  background: var(--ic-color-success);
}

.home-note {
  display: grid;
  gap: var(--ic-space-3);
  padding: var(--ic-space-5);
  border-radius: var(--ic-radius-card);
  background: color-mix(in srgb, var(--ic-color-warning) 10%, var(--ic-color-canvas));
}

.home-note p { margin: 0; color: var(--ic-color-text-muted); font-size: var(--ic-text-sm); line-height: 1.55; }
.home-note a { color: var(--ic-color-text); font-weight: var(--ic-weight-semibold, 600); font-size: var(--ic-text-sm); }

.home-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ic-space-4);
}

.home-preview-tile {
  display: grid;
  gap: var(--ic-space-2);
  padding: var(--ic-space-4) var(--ic-space-5);
  border-style: dashed;
  opacity: 0.72;
}

.home-preview-tile span,
.home-preview-tile small { color: var(--ic-color-text-muted); font-size: var(--ic-text-xs); }
.home-preview-tile strong { font-family: var(--ic-font-serif); font-size: var(--ic-text-2xl); color: var(--ic-color-text-muted); }

@media (max-width: 980px) {
  .home-kpis,
  .home-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-grid,
  .home-welcome,
  .home-welcome-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  /* KPI tiles become a horizontally scrollable row (spec §10, Mobile). */
  .home-kpis {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--ic-space-2);
  }

  .home-kpi { flex: 0 0 min(72vw, 15rem); scroll-snap-align: start; }
  .home-needs-row { grid-template-columns: minmax(0, 1fr) auto; }
  .home-needs-row .home-action { grid-column: 1 / -1; }
  .home-example { transform: none; }
}

@media (max-width: 480px) {
  .home-preview-grid { grid-template-columns: minmax(0, 1fr); }
  .home-ageing-legend { grid-template-columns: minmax(0, 1fr); }
  .home-checklist-list li { grid-template-columns: auto minmax(0, 1fr); }
  .home-checklist-list li .home-action { grid-column: 1 / -1; }
}

/* Documents tab strip and the Recurring tab (feature 92, spec §3.2) */
.document-library-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ic-space-1);
  border-bottom: 1px solid var(--ic-color-border);
}

.document-library-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--ic-space-2);
  min-height: 2.75rem;
  padding: 0 var(--ic-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ic-color-text-muted);
  font: inherit;
  font-size: var(--ic-text-sm);
  cursor: pointer;
}

.document-library-tab[aria-selected='true'] {
  border-bottom-color: var(--ic-color-action);
  color: var(--ic-color-text);
  font-weight: var(--ic-weight-semibold, 600);
}

.document-library-tab:focus-visible {
  outline: 2px solid var(--ic-color-action);
  outline-offset: -2px;
}

.document-library-tab-count {
  padding: 0 var(--ic-space-2);
  border-radius: var(--ic-radius-pill);
  background: color-mix(in srgb, var(--ic-color-text) 10%, var(--ic-color-surface));
  font-size: var(--ic-text-xs);
}

.document-library-main[data-view='recurring'] .document-library-shell,
.document-library-main[data-view='recurring'] .document-library-empty { display: none !important; }

.document-library-recurring { display: grid; gap: var(--ic-space-4); }
.document-library-recurring-intro { display: grid; gap: var(--ic-space-1); }

.document-library-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: var(--ic-weight-semibold, 600);
  text-decoration: underline;
  cursor: pointer;
}

/* Backup page (feature 92, spec §3.4) */
.backup-page-container { max-width: 52rem; }
.backup-page-hero { display: grid; gap: var(--ic-space-3); }
.backup-page-lede { max-width: 60ch; margin: 0; color: var(--ic-color-text-muted); line-height: 1.55; }

.backup-page-states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ic-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-page-states li {
  display: grid;
  gap: var(--ic-space-2);
  padding: var(--ic-space-4) var(--ic-space-5);
  border: 1px solid var(--ic-color-border);
  border-radius: var(--ic-radius-card);
  background: var(--ic-color-surface);
}

.backup-page-states strong { font-size: var(--ic-text-sm); color: var(--ic-color-text); }
.backup-page-states span { font-size: var(--ic-text-xs); line-height: 1.5; color: var(--ic-color-text-muted); }

.backup-page-signed-out,
.backup-page-body:not([hidden]) { display: grid; gap: var(--ic-space-3); padding: 0 var(--ic-space-5) var(--ic-space-5); justify-items: start; }
.backup-page-signed-out p { margin: 0; color: var(--ic-color-text-muted); font-size: var(--ic-text-sm); }
.backup-page-footnote { margin: 0; color: var(--ic-color-text-muted); font-size: var(--ic-text-sm); }

@media (max-width: 760px) {
  .backup-page-states { grid-template-columns: minmax(0, 1fr); }
}

.workspace-topbar .tb-btn,
.workspace-topbar .tb-btn:hover { text-decoration: none; }
.home-welcome-eyebrow { text-transform: uppercase; }

/* Grid children default to min-width:auto, which lets wide tables push the page sideways on phones. */
.workspace-overview-container > *,
.home-dashboard > *,
.home-grid > *,
.home-side > *,
.home-welcome-wrap > *,
.home-welcome-grid > * { min-width: 0; }


/* UX-034: with fewer than three issued invoices the home leads with documents. The key figures
   collapse into one line, and the ageing bars and six-month chart wait until there is data. The
   Recent documents card is moved ahead of the grid in the DOM (not with CSS order), so Tab order
   matches what is on screen. */
.home-starter-line { display: none; margin: 0; color: var(--ic-ink-soft); font-size: 14px; }

.home-dashboard--starter .home-starter-line { display: block; }
.home-dashboard--starter .home-grid { grid-template-columns: minmax(0, 1fr); }
.home-dashboard--starter .home-kpis,
.home-dashboard--starter .home-ageing-card,
.home-dashboard--starter .home-chart-card,
.home-dashboard--starter .home-periods { display: none; }