/* Shared finishing layer for workbook.html. Keep workflow/state styles in
   workbook.css; this file owns readable chrome, spacing and focus treatment. */
:root {
  --text-secondary: #b4b4be;
  --text-soft: #b4b4be;
  --text-tertiary: #9696a3;
  --text-muted: #9696a3;
  --border-light: rgba(255, 255, 255, 0.14);
}

/* Keyboard position should be as clear as pointer hover. */
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #8ce4f1 !important;
  outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.search-input::placeholder { color: var(--text-tertiary); }

/* Common action treatment, preserving every existing click handler. */
.add-project-btn.primary-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 38px;
  padding: 0 14px;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--primary);
  color: #07191d;
  font-size: 13px;
  font-weight: 600;
}
.add-project-btn.primary-create-btn:hover { background: #67d4e5; transform: none; }
.add-project-btn.primary-create-btn svg { color: inherit; }
.btn-primary { color: #07191d; font-weight: 600; }
.btn-primary:hover { background: #67d4e5; }
.tasks-nav, .projects-nav, .library-header { gap: 16px; flex-wrap: wrap; }
.tasks-actions, .projects-actions, .library-actions { gap: 8px; flex-wrap: wrap; }
.search-input { min-height: 38px; font-size: 13px; }

/* Keep each workspace's useful width while giving its header a common rhythm. */
.tasks-container { padding-top: 24px; }
.life-hub-page.page-wrapper { padding-top: 0; }
.life-hub-page .page-content { padding-top: 24px; }
.page-header, .library-header { margin-bottom: 24px; }
.today-header h1, .library-title, .documents-title,
.life-hub-page .page-title-group h1 { font-size: 26px; line-height: 1.25; }

/* The Content toolbar wraps as a unit instead of clipping its view controls. */
.content-header-main { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; min-width: 0; }
.ideas-container > .page-header { gap: 16px; flex-wrap: wrap; }
.ideas-container > .page-header .page-actions { flex-wrap: wrap; }
.content-header-tabs { max-width: 100%; overflow-x: auto; }
.content-header-tab { flex-shrink: 0; }

/* Supporting information remains readable instead of appearing disabled. */
.document-card-meta, .document-card-project, .documents-recent-card-meta,
.project-meta-v2, .today-task-item .task-meta, .today-empty-state,
.page-subtitle, .home-greeting-date {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.today-section-header, .today-section-header .task-count,
.completed-task-item .completed-time { color: var(--text-secondary); font-size: 12px; }
.completed-task-item { opacity: 0.85; }
.completed-task-item .task-title { color: var(--text-secondary); }
.document-card-title, .documents-recent-card-title { line-height: 1.4; }

/* Retain the cinematic image, with a steadier reading surface above it. */
.focus-zone .focus-bg { opacity: 0.35; }
.focus-zone .focus-glow { opacity: 0.45; }
.focus-zone .focus-task-item { background: rgba(10, 10, 15, 0.72); }
.focus-zone:hover { transform: none; }

/* The SVG includes a real label gutter; keep it proportional at every width. */
.life-hub-page .wheel-section { min-width: 0; padding: 24px 16px; }
.life-hub-page .wheel-container {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 560 / 470;
}
.life-hub-page .domain-label { font-size: 14px; fill: var(--text-secondary); }

@media (max-width: 768px) {
  .tasks-container { padding: 32px 0 16px; }
  .focus-zone {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .focus-zone .focus-content { padding: 0; min-height: 280px; }
  .focus-zone .focus-header-row { flex-direction: column; gap: 8px; }
  .focus-zone .focus-title-group { width: 100%; }
  .focus-zone .focus-subtitle, .focus-zone .focus-badge span,
  .focus-zone .focus-task-meta, .focus-zone .focus-task-project,
  .focus-zone .focus-add-task, .focus-zone .add-task-inline {
    color: var(--text-secondary) !important;
  }
  .focus-zone .focus-task-item { background: rgba(10, 10, 15, 0.72) !important; }
  .focus-zone .focus-progress-bar-container { flex-direction: column; align-items: stretch !important; }
  .focus-zone .focus-progress-track { flex: none !important; width: 100%; }
  .ideas-container { padding: 16px 0; }
  .content-header-main { gap: 12px; width: 100%; }
  .content-header-main .page-title { width: 100%; }
  .ideas-container > .page-header .page-actions { width: 100%; }
  .ideas-container .page-actions .search-container { flex: 1; min-width: 0; }
  .ideas-container .page-actions .search-input { width: 100%; }
  .focus-task-title {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .life-hub-page .page-content { padding: 16px 0; }
  .life-hub-page .page-header { gap: 16px; flex-wrap: wrap; }
  .life-hub-page .page-actions { flex-wrap: wrap; }
  .life-hub-page .main-grid { grid-template-columns: minmax(0, 1fr); }
  .life-hub-page .wheel-container { height: auto !important; }
  .tasks-actions .search-container { min-width: 120px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep the compact icon bar clear of Search on narrow phones. */
@media (max-width: 600px) {
  .nav-bg-bar { justify-content: space-between; padding: 8px !important; gap: 6px !important; }
  .nav-bg-logo, .nav-bg-right { position: static; flex-shrink: 0; }
  .nav-pill { gap: 0 !important; }
  .nav-pill .nav-item { width: clamp(22px, 6vw, 28px) !important; }
}