/* Phase 5D: Stitch Warm Journal visual translation. */

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.brand-mark {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
}

.brand-mark-image {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: block;
  object-fit: contain;
}

.brand-mark-image-dark {
  display: none;
}

:root[data-theme="dark"] .brand-mark-image-light {
  display: none;
}

:root[data-theme="dark"] .brand-mark-image-dark {
  display: block;
}

.brand-lockup h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
  overflow-wrap: normal;
}

body {
  letter-spacing: -0.005em;
}

.top-app-bar {
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-canvas);
  background: color-mix(in srgb, var(--color-canvas) 94%, transparent);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.primary-navigation {
  border-color: var(--color-border-subtle);
  background: var(--color-shell);
  background: color-mix(in srgb, var(--color-shell) 96%, transparent);
  box-shadow: var(--shadow-mobile-nav);
  backdrop-filter: blur(14px);
}

.primary-navigation .primary-nav-button {
  color: var(--color-text-secondary);
}

.primary-navigation .primary-nav-button:hover {
  background: var(--color-state-hover);
}

.primary-navigation .primary-nav-button.is-active {
  background: var(--color-state-active);
  color: var(--color-text-interactive);
}

.primary-nav-icon {
  color: var(--color-text-muted);
}

.primary-navigation .primary-nav-button.is-active .primary-nav-icon {
  color: currentColor;
}

.app-section h2,
.dashboard-intro h2,
.journal-page-header h2,
.preview-page-header h2,
.settings-page-header h2 {
  letter-spacing: -0.025em;
}

.app-section h3,
.app-section h4 {
  font-weight: 600;
  letter-spacing: -0.012em;
}

.section-kicker,
.card-label {
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.dashboard-ojt-progress-card,
.dashboard-week-card,
.dashboard-identity-strip,
.profile-form,
.week-panel,
.backup-panel,
.summary-card,
.storage-health-card,
.journal-preview-card,
.daily-log-editor-panel {
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-card);
}

.dashboard-week-card,
.journal-overview {
  position: relative;
  overflow: hidden;
}

.dashboard-week-card::after,
.journal-overview::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  right: -1px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, transparent 49%, var(--color-state-active) 50%);
  pointer-events: none;
}

.dashboard-week-card > *,
.journal-overview > * {
  position: relative;
  z-index: 1;
}

.dashboard-ojt-progress-bar-wrap {
  height: 6px;
  border-radius: 2px;
}

.dashboard-ojt-progress-bar {
  border-radius: 0 2px 2px 0;
}

.settings-tab {
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
}

.primary-nav-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:root[data-theme="light"] .content {
  border-color: transparent;
  background: transparent;
}

:root[data-theme="light"] .dashboard-ojt-progress-card,
:root[data-theme="light"] .dashboard-week-card,
:root[data-theme="light"] .dashboard-identity-strip,
:root[data-theme="light"] .profile-form,
:root[data-theme="light"] .week-panel,
:root[data-theme="light"] .backup-panel,
:root[data-theme="light"] .summary-card,
:root[data-theme="light"] .storage-health-card,
:root[data-theme="light"] .journal-preview-card,
:root[data-theme="light"] .daily-log-editor-panel {
  background: var(--color-page);
}

:root[data-theme="light"] .field input,
:root[data-theme="light"] .field textarea,
:root[data-theme="light"] .field select {
  background: var(--color-shell);
}

:root[data-theme="light"] .secondary-button {
  background: var(--color-page);
}

:root[data-theme="light"] .section-kicker,
:root[data-theme="light"] .card-label {
  color: #546526;
}

/* Phase 5D: Preview & Export document-and-utility-rail skin. */
.preview-context-panel {
  border-color: transparent;
  background: var(--color-shell);
  box-shadow: none;
}

.journal-preview-card {
  border: 1px solid var(--color-border-subtle);
  background: var(--color-page);
  box-shadow: var(--shadow-card);
}

.journal-preview-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -1px;
  right: -1px;
  width: 46px;
  height: 46px;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  background: var(--color-progress-fill);
  opacity: 0.82;
  pointer-events: none;
}

.journal-preview-card > * {
  position: relative;
  z-index: 1;
}

.preview-export-panel {
  border-color: transparent;
  background: var(--color-shell);
}

:root[data-theme="dark"] .preview-export-panel {
  padding: 12px 16px;
}

:root[data-theme="dark"] .weekly-preview-actions {
  gap: 6px;
}

.preview-review-panel {
  border-color: transparent;
  background: var(--color-card);
}

.preview-day-section::before {
  border-color: var(--color-page);
}

@media (forced-colors: active) {
  .journal-preview-card::after,
  .preview-review-list li::before,
  .preview-day-section::before {
    background: Highlight;
  }
}

@media (max-width: 760px) {
  .brand-mark {
    flex-basis: 30px;
    width: 30px;
    height: 30px;
  }

  .brand-lockup h1 {
    max-width: 17ch;
    font-size: 0.92rem;
  }

  .primary-navigation {
    border-color: var(--color-border-subtle);
    box-shadow: var(--shadow-mobile-nav);
  }

  .dashboard-ojt-progress-card,
  .dashboard-week-card,
  .dashboard-identity-strip,
  .profile-form,
  .week-panel,
  .backup-panel,
  .summary-card,
  .storage-health-card,
  .journal-preview-card {
    border-radius: var(--radius-card);
  }
}

@media (max-width: 360px) {
  .brand-lockup {
    gap: 6px;
  }

  .brand-mark {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .brand-lockup h1 {
    max-width: 14ch;
    font-size: 0.82rem;
  }
}

/* Phase 5D: Dashboard Warm Journal surface treatment. */
#dashboard .dashboard-reminder-card,
#dashboard .dashboard-identity-strip,
#dashboard .dashboard-ojt-progress-card,
#dashboard .dashboard-week-card,
#dashboard .dashboard-readiness-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
  background: var(--color-page);
  box-shadow: var(--shadow-card);
}

#dashboard .dashboard-identity-strip,
#dashboard .dashboard-ojt-progress-card,
#dashboard .dashboard-week-card,
#dashboard .dashboard-readiness-card {
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

#dashboard .dashboard-reminder-card[data-backup-state="current"] {
  border-color: var(--color-border-subtle);
  border-left-color: var(--color-border-interactive);
  background: color-mix(in srgb, var(--color-shell) 58%, var(--color-page));
}

#dashboard .dashboard-reminder-card[data-backup-state="current"] .dashboard-reminder-icon {
  border-color: var(--color-border-interactive);
  background: var(--color-state-active);
  color: var(--color-border-interactive);
}

:root[data-theme="dark"] #dashboard .dashboard-reminder-card[data-backup-state="current"] {
  border-left-color: color-mix(in srgb, var(--color-inset) 74%, var(--color-status-success));
}

:root[data-theme="dark"] #dashboard .dashboard-reminder-card[data-backup-state="current"] .dashboard-reminder-icon {
  border-color: color-mix(in srgb, var(--color-inset) 70%, var(--color-status-success));
  background: color-mix(in srgb, var(--color-inset) 76%, var(--color-page));
  color: color-mix(in srgb, var(--color-inset) 56%, var(--color-status-success));
}

#dashboard .dashboard-reminder-card[data-backup-state="attention"],
#dashboard .dashboard-reminder-card[data-backup-state="missing"] {
  border-color: var(--color-status-warning-border);
  border-left-color: var(--color-status-warning);
  background: var(--color-status-warning-bg);
}

:root[data-theme="dark"] #dashboard .dashboard-reminder-card[data-backup-state="attention"],
:root[data-theme="dark"] #dashboard .dashboard-reminder-card[data-backup-state="missing"] {
  border-color: color-mix(in srgb, var(--color-status-warning-border) 40%, transparent);
  border-left-color: color-mix(in srgb, var(--color-status-warning) 50%, transparent);
  background: color-mix(in srgb, var(--color-status-warning-bg) 45%, var(--color-card));
  padding: 12px 14px;
  gap: 8px;
}

:root[data-theme="dark"] #dashboard .dashboard-reminder-card .reminder-text {
  line-height: 1.45;
}

:root[data-theme="dark"] #dashboard .dashboard-readiness-card {
  padding: 12px 14px;
  gap: 8px;
}

:root[data-theme="dark"] #dashboard .dashboard-block-heading {
  margin-bottom: 6px;
}

:root[data-theme="dark"] #dashboard .dashboard-summary-status {
  gap: 6px;
}

:root[data-theme="dark"] #dashboard .dashboard-summary-status li,
:root[data-theme="dark"] #dashboard .dashboard-summary-status li.is-filled,
:root[data-theme="dark"] #dashboard .dashboard-summary-status li.is-missing {
  min-height: 40px;
  padding: 6px 12px;
}

#dashboard .dashboard-identity-strip {
  background: color-mix(in srgb, var(--color-shell) 72%, var(--color-page));
}

#dashboard .summary-card--identity {
  border-color: transparent;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-shell) 55%, var(--color-page));
  box-shadow: none;
}

:root[data-theme="dark"] #dashboard .summary-card--identity {
  background: color-mix(in srgb, var(--color-card) 72%, var(--color-canvas));
}

#dashboard .dashboard-identity-icon {
  background: var(--color-state-active);
}

:root[data-theme="dark"] #dashboard .dashboard-identity-icon {
  background: color-mix(in srgb, var(--color-card) 80%, var(--color-canvas));
}

#dashboard .dashboard-ojt-progress-card,
#dashboard .dashboard-week-card,
#dashboard .dashboard-readiness-card {
  position: relative;
  overflow: hidden;
}

#dashboard .dashboard-week-band--header {
  background: color-mix(in srgb, var(--color-shell) 82%, var(--color-page));
}

#dashboard .dashboard-week-stat {
  background: color-mix(in srgb, var(--color-shell) 72%, var(--color-page));
}

#dashboard .dashboard-day-list > li {
  background: color-mix(in srgb, var(--color-shell) 45%, var(--color-page));
}

#dashboard .dashboard-day-list > li.empty-state {
  background: transparent;
}

#dashboard .dashboard-day-list > li.is-today {
  background: color-mix(in srgb, var(--color-state-active) 55%, var(--color-page));
}

:root[data-theme="dark"] #dashboard .dashboard-day-list > li {
  background: color-mix(in srgb, var(--color-card) 70%, var(--color-canvas));
}

:root[data-theme="dark"] #dashboard .dashboard-day-list > li.empty-state {
  background: transparent;
}

:root[data-theme="dark"] #dashboard .dashboard-day-list > li.is-today {
  background: color-mix(in srgb, var(--color-inset) 55%, var(--color-card));
}

#dashboard .dashboard-summary-status li.is-filled,
#dashboard .dashboard-summary-status li.is-missing {
  background: transparent;
}

:root[data-theme="dark"] #dashboard .dashboard-summary-status li.is-filled,
:root[data-theme="dark"] #dashboard .dashboard-summary-status li.is-missing {
  background: transparent;
}

:root[data-theme="light"] #dashboard .dashboard-day-status.is-worked {
  border-color: var(--color-border-interactive);
  background: var(--color-state-active);
  color: var(--color-focus-ring);
}

:root[data-theme="dark"] #dashboard .dashboard-day-status.is-worked {
  border-color: color-mix(in srgb, var(--color-inset) 72%, var(--color-text-interactive));
  background: color-mix(in srgb, var(--color-inset) 68%, var(--color-page));
  color: var(--color-text-primary);
}

#dashboard .dashboard-readiness-card .secondary-button,
#dashboard .dashboard-reminder-card .secondary-button {
  border-color: var(--color-border-strong);
}

@media (max-width: 760px) {
  #dashboard .dashboard-reminder-card,
  #dashboard .dashboard-identity-strip,
  #dashboard .dashboard-ojt-progress-card,
  #dashboard .dashboard-week-card,
  #dashboard .dashboard-readiness-card {
    border-radius: var(--radius-card);
  }
}

@media (forced-colors: active) {
  .brand-mark-frame,
  .brand-mark-progress {
    stroke: CanvasText;
  }

  .top-app-bar,
  .primary-navigation {
    border-color: CanvasText;
  }

  #dashboard .dashboard-identity-strip,
  #dashboard .dashboard-ojt-progress-card,
  #dashboard .dashboard-week-card,
  #dashboard .dashboard-readiness-card,
  #dashboard .dashboard-reminder-card,
  #dashboard .summary-card--identity,
  #dashboard .dashboard-day-list > li,
  #dashboard .dashboard-summary-status li {
    border-color: CanvasText;
  }

  #dashboard .dashboard-day-list > li.is-today {
    box-shadow: inset 3px 0 0 Highlight;
  }
}
/* Phase 5D J1A: Warm Journal color and surface finish for the Stitch checkpoint. */
#journal .journal-toolbar {
  border-color: var(--color-border-subtle);
  background: var(--color-shell);
  box-shadow: var(--shadow-card);
}

#journal .journal-overview {
  border-color: var(--color-border-subtle);
  background: var(--color-page);
  box-shadow: var(--shadow-card);
}

#journal .journal-overview::after {
  display: none;
}

#journal .journal-overview-bookmark {
  background: var(--color-border-strong);
}

#journal .journal-metric-icon-clock {
  background: var(--color-state-active);
  color: var(--color-focus-ring);
}

#journal .journal-metric-icon-calendar {
  background: var(--color-border-strong);
  color: var(--color-text-inverse);
}

#journal .journal-tip-card {
  border-color: color-mix(in srgb, var(--color-border-interactive) 42%, var(--color-border-subtle));
  background: var(--color-state-active);
  box-shadow: none;
}

#journal .journal-tip-card h3 {
  color: var(--color-focus-ring);
}

:root[data-theme="light"] #journal .journal-toolbar {
  background: var(--color-shell);
}

:root[data-theme="light"] #journal .journal-overview {
  background: var(--color-page);
}

:root[data-theme="light"] #journal .journal-tip-card p {
  color: #3c4c10;
}

@media (forced-colors: active) {
  #journal .journal-overview-bookmark,
  #journal .journal-metric-icon-clock,
  #journal .journal-metric-icon-calendar,
  #journal .journal-completion-track span {
    background: Highlight;
    color: HighlightText;
  }

  #journal .journal-tip-card {
    border-color: CanvasText;
    background: Canvas;
  }
}
/* Phase 5D J2A: Warm Journal skin for Daily Record accordions. */
#journal .daily-record-accordion {
  border-color: var(--color-border-subtle);
  background: var(--color-page);
  box-shadow: var(--shadow-card);
}

#journal .daily-record-accordion.is-expanded {
  border-color: color-mix(in srgb, var(--color-border-interactive) 45%, var(--color-border-subtle));
}

#journal .daily-record-day-badge {
  background: var(--color-focus-ring);
}

#journal .daily-record-panel {
  background: color-mix(in srgb, var(--color-shell) 68%, var(--color-page));
}

#journal .daily-record-detail-grid > div {
  background: color-mix(in srgb, var(--color-page) 82%, var(--color-shell));
}

#journal .daily-record-task-status {
  background: var(--color-state-active);
}

#journal .daily-record-note {
  background: var(--color-shell);
}

@media (forced-colors: active) {
  #journal .daily-record-accordion,
  #journal .daily-record-detail-grid > div {
    border-color: CanvasText;
  }

  #journal .daily-record-day-badge {
    background: Highlight;
    color: HighlightText;
  }
}
/* Phase 5D J2B: Warm Journal attachment thumbnail treatment. */
#journal .daily-record-thumbnail {
  border-color: color-mix(in srgb, var(--color-border-interactive) 24%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-page) 76%, var(--color-shell));
}

#journal .daily-record-thumbnail-overflow {
  border-color: color-mix(in srgb, var(--color-border-interactive) 46%, var(--color-border-subtle));
  background: var(--color-state-active);
  color: var(--color-focus-ring);
}

@media (forced-colors: active) {
  #journal .daily-record-thumbnail,
  #journal .daily-record-thumbnail-overflow {
    border-color: CanvasText;
  }
}
/* Phase 5D J2C: quieter Daily Record surfaces and dividers. */
#journal .daily-record-accordion {
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

#journal .daily-record-panel {
  background: var(--color-page);
}

#journal .daily-record-note {
  background: transparent;
}

#journal .daily-record-thumbnail {
  border-color: color-mix(in srgb, var(--color-border-interactive) 18%, var(--color-border-subtle));
}
/* Phase 5D J3A: Warm Journal Weekly Summary surface treatment. */
#journal .journal-summary-panel {
  border-color: var(--color-border-subtle);
  background: var(--color-page);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

#journal .journal-summary-icon {
  background: var(--color-state-active);
  color: var(--color-focus-ring);
}

#journal .journal-summary-panel .weekly-summary-form textarea {
  border-color: color-mix(in srgb, var(--color-border-interactive) 28%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-shell) 72%, var(--color-page));
}

#journal .journal-summary-panel .weekly-summary-form textarea:hover {
  border-color: color-mix(in srgb, var(--color-border-interactive) 58%, var(--color-border-subtle));
}

/* Phase 5D J4A: Warm Journal Dark Mode visual fidelity. */
:root[data-theme="dark"] #journal .journal-toolbar {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-shell) 78%, #4e3c3b);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

:root[data-theme="dark"] #journal .journal-week-picker select,
:root[data-theme="dark"] #journal .journal-toolbar .secondary-button,
:root[data-theme="dark"] #journal .journal-overview .secondary-button,
:root[data-theme="dark"] #journal .daily-record-editor-action {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-card) 84%, var(--color-canvas));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] #journal .journal-overview,
:root[data-theme="dark"] #journal .journal-summary-panel {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-page) 86%, #4e3c3b);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

:root[data-theme="dark"] #journal .journal-overview-bookmark {
  background: var(--color-text-interactive);
  color: var(--color-text-inverse);
}

:root[data-theme="dark"] #journal .journal-metric-icon-clock,
:root[data-theme="dark"] #journal .journal-summary-icon {
  background: color-mix(in srgb, var(--color-shell) 60%, var(--color-page));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] #journal .journal-metric-icon-calendar {
  background: var(--color-border-strong);
  color: var(--color-text-inverse);
}

:root[data-theme="dark"] #journal .journal-completion-track {
  background: color-mix(in srgb, var(--color-card) 82%, #292929);
}

:root[data-theme="dark"] #journal .journal-completion-track span {
  background: var(--color-text-interactive);
}

:root[data-theme="dark"] #journal .journal-tip-card {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-inset) 28%, var(--color-page));
}

:root[data-theme="dark"] #journal .journal-tip-card h3 {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] #journal .journal-tip-card p {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] #journal .daily-record-accordion {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-page) 88%, var(--color-card));
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

:root[data-theme="dark"] #journal .daily-record-accordion.is-expanded {
  border-color: color-mix(in srgb, var(--color-border-interactive) 54%, var(--color-border-subtle));
}

:root[data-theme="dark"] #journal .daily-log-day-card.daily-record-toggle:hover {
  background: color-mix(in srgb, var(--color-state-hover) 72%, var(--color-inset));
}

:root[data-theme="dark"] #journal .daily-record-day-badge {
  background: var(--color-inset);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] #journal .daily-record-panel {
  border-top-color: transparent;
  background: color-mix(in srgb, var(--color-page) 82%, var(--color-shell));
}

:root[data-theme="dark"] #journal .daily-record-detail-grid > div {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-card) 76%, var(--color-page));
}

:root[data-theme="dark"] #journal .daily-record-task-status {
  background: color-mix(in srgb, var(--color-inset) 72%, var(--color-page));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] #journal .daily-record-thumbnail-overflow {
  background: color-mix(in srgb, var(--color-card) 80%, var(--color-canvas));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] #journal .daily-record-note {
  border-left-color: var(--color-text-interactive);
  background: transparent;
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] #journal .daily-record-thumbnail {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-card) 72%, var(--color-page));
}

:root[data-theme="dark"] #journal .journal-summary-panel .weekly-summary-form textarea {
  border-color: color-mix(in srgb, var(--color-border-interactive) 30%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-card) 76%, var(--color-page));
  color: var(--color-text-primary);
  caret-color: var(--color-text-interactive);
}

:root[data-theme="dark"] #journal .journal-summary-panel .weekly-summary-form textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.82;
}

:root[data-theme="dark"] #journal .journal-summary-panel .weekly-summary-form textarea:hover {
  border-color: color-mix(in srgb, var(--color-border-interactive) 68%, var(--color-border-default));
}

:root[data-theme="dark"] #journal .journal-summary-panel .weekly-summary-form textarea:focus {
  border-color: var(--color-border-interactive);
  background: color-mix(in srgb, var(--color-card) 88%, #292929);
}

:root[data-theme="dark"] #journal :is(button, select, textarea, summary):focus-visible {
  outline-color: var(--color-focus-ring);
  box-shadow: 0 0 0 2px #4e3c3b;
}

@media (forced-colors: active) {
  #journal .journal-summary-panel,
  #journal .journal-summary-panel .weekly-summary-form textarea {
    border-color: CanvasText;
  }

  #journal .journal-summary-icon {
    background: Canvas;
    color: CanvasText;
  }
}

/* Phase 5D E1A: Warm Journal Daily Log Editor shell. */
:root[data-theme="light"] .daily-log-editor-overlay {
  background: color-mix(in srgb, var(--color-text-primary) 34%, transparent);
  backdrop-filter: blur(3px);
}

:root[data-theme="light"] .daily-log-editor-panel {
  border-color: color-mix(in srgb, var(--color-border-interactive) 24%, var(--color-border-subtle));
  background: var(--color-page);
  box-shadow: 0 18px 52px color-mix(in srgb, var(--color-text-primary) 20%, transparent);
}

:root[data-theme="light"] .daily-log-editor-header {
  border-bottom-color: var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-shell) 78%, var(--color-page));
}

@media (max-width: 760px) {
  :root[data-theme="light"] .daily-log-editor-panel {
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -10px 34px color-mix(in srgb, var(--color-text-primary) 16%, transparent);
  }

  :root[data-theme="light"] .daily-log-editor-panel::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
  }
}

@media (forced-colors: active) {
  :root[data-theme="light"] .daily-log-editor-overlay {
    backdrop-filter: none;
  }

  :root[data-theme="light"] .daily-log-editor-panel {
    border-color: CanvasText;
  }

  :root[data-theme="light"] .daily-log-editor-panel::before {
    background: CanvasText;
  }
}

/* Phase 5D E2B: Warm Journal Daily Log task and surface simplification. */
:root[data-theme="light"] .daily-details-heading {
  border-left: 0;
  background: transparent;
  padding: 0;
}

:root[data-theme="light"] .daily-details-heading .card-label {
  color: var(--color-focus-ring);
}

:root[data-theme="light"] .daily-status-field select {
  border-color: var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-shell) 64%, var(--color-page));
  font-weight: 600;
}

:root[data-theme="light"] .time-entry-fieldset {
  border-color: transparent;
  background: transparent;
}

:root[data-theme="light"] .time-entry-fieldset legend {
  color: var(--color-text-interactive);
}


:root[data-theme="light"] .rendered-time-strip strong {
  color: var(--color-focus-ring);
}

:root[data-theme="light"] .rendered-time-strip p {
  color: var(--color-text-secondary);
}

:root[data-theme="light"] .daily-log-editor-panel .primary-button {
  border: 0;
}

:root[data-theme="light"] .daily-log-editor-panel .primary-button:hover {
  border: 0;
}

:root[data-theme="light"] .daily-log-editor-panel .secondary-button {
  border-color: color-mix(in srgb, var(--color-border-subtle) 54%, transparent);
  background: color-mix(in srgb, var(--color-shell) 62%, var(--color-page));
}

:root[data-theme="light"] .daily-log-editor-panel .secondary-button:hover {
  border-color: color-mix(in srgb, var(--color-border-interactive) 42%, transparent);
}

:root[data-theme="light"] .task-editor-subview {
  background: transparent;
}

:root[data-theme="light"] .task-editor-form {
  background: color-mix(in srgb, var(--color-shell) 58%, var(--color-page));
}


:root[data-theme="light"] .task-duration-fieldset legend,
:root[data-theme="light"] .task-form-heading .card-label {
  color: var(--color-text-interactive);
}

@media (forced-colors: active) {
  .daily-details-heading,
  .time-entry-fieldset,
  .rendered-time-strip,
  .task-editor-form {
    border-color: CanvasText;
  }
}

/* Phase 5D E2D: Warm Journal Light treatment for Photo Documentation. */
:root[data-theme="light"] .photo-add-button {
  background: color-mix(in srgb, var(--color-state-active) 82%, var(--color-page));
  color: var(--color-text-interactive);
}

:root[data-theme="light"] .photo-add-button:hover,
:root[data-theme="light"] .photo-add-button:active {
  background: color-mix(in srgb, var(--color-state-hover) 72%, var(--color-state-active));
}

:root[data-theme="light"] .photo-set-item {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-page) 90%, var(--color-shell));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

:root[data-theme="light"] .photo-set-image-list {
  background: transparent;
}

:root[data-theme="light"] .photo-set-image-list .photo-attachment-item {
  background: var(--color-page);
}

:root[data-theme="light"] .photo-preview-frame {
  background: color-mix(in srgb, var(--color-shell) 74%, var(--color-inset));
}

:root[data-theme="light"] .photo-category {
  background: color-mix(in srgb, var(--color-state-active) 74%, var(--color-page));
  color: var(--color-text-interactive);
}

:root[data-theme="light"] .photo-caption-form,
:root[data-theme="light"] .photo-upload-form {
  background: color-mix(in srgb, var(--color-shell) 62%, var(--color-page));
}

:root[data-theme="light"] .photo-caption-form select,
:root[data-theme="light"] .photo-caption-form textarea,
:root[data-theme="light"] .photo-upload-form input,
:root[data-theme="light"] .photo-upload-form select,
:root[data-theme="light"] .photo-upload-form textarea {
  background: var(--color-page);
}

:root[data-theme="light"] .photo-delete-button:hover,
:root[data-theme="light"] .photo-delete-button:active {
  background: color-mix(in srgb, var(--color-status-danger-bg) 82%, var(--color-page));
}

@media (forced-colors: active) {
  :root[data-theme="light"] .photo-set-item,
  :root[data-theme="light"] .photo-preview-frame,
  :root[data-theme="light"] .photo-upload-form,
  :root[data-theme="light"] .photo-caption-form,
  :root[data-theme="light"] .photo-add-button,
  :root[data-theme="light"] .photo-category {
    border-color: CanvasText;
    box-shadow: none;
  }
}

/* Phase 5D E2E: Warm Journal Light finish for Remarks and final actions. */
:root[data-theme="light"] .daily-remarks-section textarea {
  border-color: color-mix(in srgb, var(--color-border-subtle) 76%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-page) 94%, var(--color-shell));
}

:root[data-theme="light"] .daily-remarks-section textarea:hover {
  border-color: var(--color-border-interactive);
}

:root[data-theme="light"] .editor-header-message.success {
  background: color-mix(in srgb, var(--color-status-success-bg) 82%, var(--color-page));
}

:root[data-theme="light"] .editor-header-message.error {
  background: color-mix(in srgb, var(--color-status-danger-bg) 86%, var(--color-page));
}

:root[data-theme="light"] .editor-final-actions .destructive-actions {
  border-top-color: color-mix(in srgb, var(--color-status-danger-border) 48%, transparent);
}

:root[data-theme="light"] .editor-final-actions .danger-button {
  border-color: transparent;
  background: transparent;
}

:root[data-theme="light"] .editor-final-actions .danger-button:hover,
:root[data-theme="light"] .editor-final-actions .danger-button:active {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-status-danger-bg) 82%, var(--color-page));
}

@media (forced-colors: active) {
  :root[data-theme="light"] .daily-remarks-section textarea,
  :root[data-theme="light"] .editor-header-message,
  :root[data-theme="light"] .editor-final-actions .danger-button {
    border: 1px solid ButtonText;
    box-shadow: none;
  }
}

/* Phase 5D E2F: Dark-mode visual fidelity for the focused Daily Log Editor. */
:root[data-theme="dark"] .daily-log-editor-overlay {
  background: color-mix(in srgb, var(--color-overlay) 92%, #161616);
  backdrop-filter: blur(4px);
}

:root[data-theme="dark"] .daily-log-editor-panel {
  border-color: color-mix(in srgb, var(--color-border-strong) 48%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-modal) 92%, var(--color-canvas));
  box-shadow:
    0 24px 64px rgba(10, 10, 10, 0.64),
    0 0 0 1px rgba(240, 234, 210, 0.04);
}

:root[data-theme="dark"] .daily-log-editor-header {
  border-bottom-color: color-mix(in srgb, var(--color-border-default) 58%, transparent);
  background: color-mix(in srgb, var(--color-shell) 54%, var(--color-modal));
}

:root[data-theme="dark"] .daily-log-editor-header .card-label,
:root[data-theme="dark"] .daily-details-heading .card-label,
:root[data-theme="dark"] .daily-log-editor-panel .journal-col-header .card-label,
:root[data-theme="dark"] .task-form-heading .card-label {
  color: var(--color-text-interactive);
}

:root[data-theme="dark"] .daily-log-editor-header h3,
:root[data-theme="dark"] .daily-details-heading h4,
:root[data-theme="dark"] .daily-log-editor-panel .journal-col-header h4,
:root[data-theme="dark"] .task-editor-subview-header h4 {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .daily-log-editor-panel .editor-close-button {
  border-color: color-mix(in srgb, var(--color-border-default) 76%, transparent);
  background: color-mix(in srgb, var(--color-page) 82%, var(--color-shell));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .daily-log-editor-panel .editor-close-button:hover {
  border-color: var(--color-border-interactive);
  background: var(--color-state-hover);
}

:root[data-theme="dark"] .daily-log-editor-body {
  background: color-mix(in srgb, var(--color-modal) 90%, var(--color-canvas));
}

:root[data-theme="dark"] .daily-log-editor-panel .field input,
:root[data-theme="dark"] .daily-log-editor-panel .field textarea,
:root[data-theme="dark"] .daily-log-editor-panel .field select {
  border-color: color-mix(in srgb, var(--color-border-default) 86%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-card) 84%, var(--color-canvas));
  color: var(--color-text-primary);
  caret-color: var(--color-focus-ring);
}

:root[data-theme="dark"] .daily-log-editor-panel .field input:hover,
:root[data-theme="dark"] .daily-log-editor-panel .field textarea:hover,
:root[data-theme="dark"] .daily-log-editor-panel .field select:hover {
  border-color: color-mix(in srgb, var(--color-border-interactive) 68%, var(--color-border-default));
}

:root[data-theme="dark"] .daily-log-editor-panel .field input:focus,
:root[data-theme="dark"] .daily-log-editor-panel .field textarea:focus,
:root[data-theme="dark"] .daily-log-editor-panel .field select:focus {
  border-color: var(--color-border-interactive);
  background: color-mix(in srgb, var(--color-card) 92%, var(--color-canvas));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-interactive) 30%, transparent);
}

:root[data-theme="dark"] .daily-log-editor-panel ::placeholder {
  color: var(--color-text-muted);
  opacity: 0.78;
}

:root[data-theme="dark"] .daily-log-editor-panel :is(button, input, select, textarea, summary):focus-visible {
  outline-color: var(--color-focus-ring);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-canvas) 84%, transparent);
}

:root[data-theme="dark"] .daily-status-field select {
  border-color: color-mix(in srgb, var(--color-border-default) 80%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-card) 84%, var(--color-canvas));
}

:root[data-theme="dark"] .time-entry-fieldset {
  border-color: transparent;
  background: transparent;
}

:root[data-theme="dark"] .time-entry-fieldset legend,
:root[data-theme="dark"] .task-duration-fieldset legend {
  color: var(--color-text-interactive);
}

:root[data-theme="dark"] .time-field.is-muted {
  opacity: 0.7;
}


:root[data-theme="dark"] .rendered-time-strip strong {
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .rendered-time-strip p {
  color: var(--color-text-secondary);
}


:root[data-theme="dark"] .daily-log-editor-panel .primary-button {
  border-color: var(--color-border-interactive);
  background: var(--color-text-interactive);
  color: var(--color-text-inverse);
}

:root[data-theme="dark"] .daily-log-editor-panel .primary-button:hover {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
}

:root[data-theme="dark"] .daily-log-editor-panel .secondary-button {
  border-color: color-mix(in srgb, var(--color-border-default) 80%, transparent);
  background: color-mix(in srgb, var(--color-page) 78%, var(--color-shell));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .daily-log-editor-panel .secondary-button:hover {
  border-color: var(--color-border-interactive);
  background: var(--color-state-hover);
}






:root[data-theme="dark"] .task-editor-subview {
  background: transparent;
}

:root[data-theme="dark"] .task-editor-form {
  border: 1px solid color-mix(in srgb, var(--color-border-default) 54%, transparent);
  background: color-mix(in srgb, var(--color-card) 90%, var(--color-canvas));
}

:root[data-theme="dark"] .photo-add-button {
  border: 1px solid color-mix(in srgb, var(--color-border-interactive) 54%, transparent);
  background: color-mix(in srgb, var(--color-state-active) 78%, var(--color-card));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .photo-add-button:hover,
:root[data-theme="dark"] .photo-add-button:active {
  border-color: var(--color-border-interactive);
  background: color-mix(in srgb, var(--color-inset) 72%, var(--color-card));
}

:root[data-theme="dark"] .photo-set-item {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-card) 88%, var(--color-canvas));
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

:root[data-theme="dark"] .photo-set-image-list .photo-attachment-item {
  background: color-mix(in srgb, var(--color-page) 88%, var(--color-canvas));
}

:root[data-theme="dark"] .photo-preview-frame {
  background: color-mix(in srgb, var(--color-inset) 48%, var(--color-canvas));
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .photo-category {
  border: 1px solid color-mix(in srgb, var(--color-border-interactive) 42%, transparent);
  background: color-mix(in srgb, var(--color-state-active) 76%, var(--color-card));
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .photo-image-count,
:root[data-theme="dark"] .photo-attachment-main .item-meta,
:root[data-theme="dark"] .photo-selection-count {
  color: var(--color-text-muted);
}

:root[data-theme="dark"] .photo-caption-details summary {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .photo-caption-details summary:hover,
:root[data-theme="dark"] .photo-caption-details[open] summary {
  background: var(--color-state-hover);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .photo-caption-form,
:root[data-theme="dark"] .photo-upload-form {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-card) 90%, var(--color-canvas));
}

:root[data-theme="dark"] .photo-quiet-button {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .photo-quiet-button:hover {
  background: var(--color-state-hover);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .photo-delete-button {
  color: color-mix(in srgb, var(--color-status-danger) 65%, var(--color-text-secondary));
}

:root[data-theme="dark"] .photo-delete-button:hover,
:root[data-theme="dark"] .photo-delete-button:active {
  background: var(--color-status-danger-bg-strong);
  color: var(--color-status-danger);
}

:root[data-theme="dark"] .daily-remarks-section textarea {
  border-color: color-mix(in srgb, var(--color-border-default) 82%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-card) 86%, var(--color-canvas));
}

:root[data-theme="dark"] .daily-remarks-section textarea:hover {
  border-color: var(--color-border-interactive);
}

:root[data-theme="dark"] .editor-header-message.success {
  border-color: var(--color-status-success);
  background: color-mix(in srgb, var(--color-status-success-bg) 88%, var(--color-card));
  color: var(--color-status-success);
}

:root[data-theme="dark"] .editor-header-message.error {
  border-color: var(--color-status-danger);
  background: color-mix(in srgb, var(--color-status-danger-bg-strong) 54%, var(--color-card));
  color: var(--color-status-danger);
}

:root[data-theme="dark"] .editor-final-actions .destructive-actions {
  border-top-color: color-mix(in srgb, var(--color-status-danger-border) 46%, transparent);
}

:root[data-theme="dark"] .editor-final-actions .danger-button {
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--color-status-danger) 60%, var(--color-text-secondary));
}

:root[data-theme="dark"] .editor-final-actions .danger-button:hover,
:root[data-theme="dark"] .editor-final-actions .danger-button:active {
  border-color: var(--color-status-danger);
  background: var(--color-status-danger-bg-strong);
}

/* Settings Danger Zone stays destructive without neon emphasis. */
:root[data-theme="dark"] .backup-reset-panel h3,
:root[data-theme="dark"] .backup-reset-panel .card-label {
  color: color-mix(in srgb, var(--color-status-danger) 60%, var(--color-text-secondary));
}

:root[data-theme="dark"] .backup-reset-panel .danger-button {
  border-color: color-mix(in srgb, var(--color-status-danger-border) 40%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--color-status-danger) 60%, var(--color-text-primary));
}

@media (max-width: 760px) {
  :root[data-theme="dark"] .daily-log-editor-panel {
    border-color: color-mix(in srgb, var(--color-border-strong) 52%, var(--color-border-subtle));
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -14px 42px rgba(10, 10, 10, 0.58);
  }

  :root[data-theme="dark"] .daily-log-editor-panel::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-text-muted) 78%, transparent);
  }
}

@media (forced-colors: active) {
  :root[data-theme="dark"] .daily-log-editor-overlay {
    backdrop-filter: none;
  }

  :root[data-theme="dark"] .daily-log-editor-panel,
  :root[data-theme="dark"] .task-editor-form,
  :root[data-theme="dark"] .photo-set-item,
  :root[data-theme="dark"] .photo-upload-form,
  :root[data-theme="dark"] .photo-caption-form,
  :root[data-theme="dark"] .photo-add-button,
  :root[data-theme="dark"] .photo-category {
    border-color: CanvasText;
    box-shadow: none;
  }

  .daily-log-editor-panel .field input[aria-invalid="true"],
  .daily-log-editor-panel .field textarea[aria-invalid="true"],
  .daily-log-editor-panel .field select[aria-invalid="true"] {
    border-color: CanvasText;
    box-shadow: none;
    outline: 2px solid CanvasText;
    outline-offset: 1px;
  }
}
/* Pass 5 C-1: Journal and Daily Log Editor Worked badges share the Dashboard olive treatment. */
:root[data-theme="light"] .day-status-badge.is-worked {
  border-color: var(--color-border-interactive);
  background: var(--color-state-active);
  color: var(--color-focus-ring);
}

:root[data-theme="dark"] .day-status-badge.is-worked {
  border-color: color-mix(in srgb, var(--color-inset) 72%, var(--color-text-interactive));
  background: color-mix(in srgb, var(--color-inset) 68%, var(--color-page));
  color: var(--color-text-primary);
}

/* Pass 5 C-2: stronger solid olive active pill for Light-theme navigation (mobile bar and desktop dock). */
:root[data-theme="light"] .primary-navigation .primary-nav-button.is-active {
  border-color: var(--color-border-interactive);
  background: var(--color-focus-ring);
  color: var(--color-text-inverse);
}

/* Pass 5 C-3: Settings tabs as a quiet local-navigation strip. */
.settings-tabs {
  gap: var(--space-2);
  border-bottom: 0;
  padding-bottom: 0;
}

.settings-tab {
  border-color: transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-secondary);
  min-height: 44px;
  padding: 8px 16px;
}

.settings-tab:hover {
  border-color: transparent;
  background: var(--color-state-hover);
}

.settings-tab[aria-selected="true"] {
  box-shadow: none;
}

:root[data-theme="light"] .settings-tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--color-state-active);
  color: var(--color-focus-ring);
  box-shadow: inset 0 -2px 0 var(--color-border-interactive);
}

:root[data-theme="dark"] .settings-tab[aria-selected="true"] {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-inset) 68%, var(--color-page));
  color: var(--color-text-primary);
  box-shadow: inset 0 -2px 0 var(--color-border-interactive);
}

/* Settings recovery surfaces stay calm without hard outlines. */
.restore-review-panel,
.storage-health-panel,
.backup-reset-panel {
  border-color: transparent;
}

/* Pass 5 C-4: dashed Restore Backup surface with the native file input preserved. */
.restore-file-surface {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-4);
  border: 1.5px dashed var(--color-border-interactive);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--color-state-active) 18%, var(--color-page));
  padding: var(--space-4);
}

.restore-file-icon {
  display: grid;
  align-self: start;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid var(--color-border-interactive);
  border-radius: var(--radius-pill);
  background: var(--color-state-active);
  color: var(--color-focus-ring);
}

.restore-file-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.restore-file-copy {
  display: grid;
  gap: 4px;
  align-content: center;
}

.restore-file-copy strong {
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 1.3;
}

.restore-file-copy span {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
}

.restore-file-control {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.restore-file-surface input[type="file"] {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-control);
  background: var(--color-page);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.88rem;
  padding: 10px 12px;
}

.restore-file-surface input[type="file"]:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .restore-file-surface:hover {
    border-color: var(--color-border-strong);
    background: color-mix(in srgb, var(--color-state-active) 26%, var(--color-page));
  }
}

@media (forced-colors: active) {
  :root[data-theme="light"] .primary-navigation .primary-nav-button.is-active {
    border-color: Highlight;
    color: Highlight;
  }

  :root[data-theme="light"] .settings-tab[aria-selected="true"],
  :root[data-theme="dark"] .settings-tab[aria-selected="true"] {
    border-color: Highlight;
    color: Highlight;
  }

  .settings-tab,
  .backup-panel,
  .storage-health-card,
  .storage-health-guidance {
    border-color: CanvasText;
  }

  .restore-file-surface,
  .restore-file-icon {
    border-color: CanvasText;
  }

  .settings-panel .field input,
  .settings-panel .field textarea,
  .settings-panel .field select {
    border-color: ButtonText;
  }
}

/* Daily Log Editor break duration + treatment skin. Surface hierarchy before borders. */
:root[data-theme="light"] .break-entry-fieldset,
:root[data-theme="light"] .break-treatment-fieldset {
  border: 0;
  background: transparent;
}

:root[data-theme="light"] .break-total-hint {
  color: var(--color-text-secondary);
}

:root[data-theme="light"] .break-treatment-options {
  border-color: color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
  background: color-mix(in srgb, var(--color-shell) 58%, var(--color-page));
}

:root[data-theme="light"] .break-treatment-option input:checked + span {
  border-color: color-mix(in srgb, var(--color-border-interactive) 55%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-state-active) 55%, var(--color-page));
}

:root[data-theme="light"] .task-doc-total {
  color: var(--color-text-secondary);
}

:root[data-theme="light"] .task-doc-total .task-doc-note {
  color: var(--color-text-muted);
}



:root[data-theme="dark"] .break-entry-fieldset,
:root[data-theme="dark"] .break-treatment-fieldset {
  border: 0;
  background: transparent;
}

:root[data-theme="dark"] .break-total-hint {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .break-treatment-options {
  border-color: color-mix(in srgb, var(--color-border-default) 55%, transparent);
  background: color-mix(in srgb, var(--color-card) 72%, var(--color-canvas));
}

:root[data-theme="dark"] .break-treatment-option input:checked + span {
  border-color: color-mix(in srgb, var(--color-border-interactive) 60%, var(--color-border-default));
  background: color-mix(in srgb, var(--color-inset) 55%, var(--color-card));
}

:root[data-theme="dark"] .task-doc-total {
  color: var(--color-text-secondary);
}

:root[data-theme="dark"] .task-doc-total .task-doc-note {
  color: var(--color-text-muted);
}


@media (forced-colors: active) {
  .break-treatment-options,
  .break-treatment-option span,
  .daily-tasks-section .task-bullet-item {
    border-color: CanvasText;
  }
}

/* Daily Log Editor control-surface softening: filled surfaces before outline boxes. */
:root[data-theme="light"] .daily-log-editor-panel .field input,
:root[data-theme="light"] .daily-log-editor-panel .field textarea,
:root[data-theme="light"] .daily-log-editor-panel .field select {
  border-color: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
  background: color-mix(in srgb, var(--color-shell) 66%, var(--color-page));
}

:root[data-theme="light"] .daily-log-editor-panel .field input:hover,
:root[data-theme="light"] .daily-log-editor-panel .field textarea:hover,
:root[data-theme="light"] .daily-log-editor-panel .field select:hover {
  border-color: color-mix(in srgb, var(--color-border-interactive) 45%, var(--color-border-subtle));
}

:root[data-theme="light"] .daily-log-editor-panel .field input:focus-visible,
:root[data-theme="light"] .daily-log-editor-panel .field textarea:focus-visible,
:root[data-theme="light"] .daily-log-editor-panel .field select:focus-visible {
  border-color: var(--color-border-interactive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-interactive) 32%, transparent);
}

:root[data-theme="dark"] .daily-log-editor-panel .field input,
:root[data-theme="dark"] .daily-log-editor-panel .field textarea,
:root[data-theme="dark"] .daily-log-editor-panel .field select {
  border-color: color-mix(in srgb, var(--color-border-default) 45%, transparent);
  background: color-mix(in srgb, var(--color-card) 70%, var(--color-canvas));
}

:root[data-theme="dark"] .daily-log-editor-panel .field input:hover,
:root[data-theme="dark"] .daily-log-editor-panel .field textarea:hover,
:root[data-theme="dark"] .daily-log-editor-panel .field select:hover {
  border-color: color-mix(in srgb, var(--color-border-interactive) 60%, var(--color-border-default));
}

:root[data-theme="dark"] .daily-log-editor-panel .field input:focus-visible,
:root[data-theme="dark"] .daily-log-editor-panel .field textarea:focus-visible,
:root[data-theme="dark"] .daily-log-editor-panel .field select:focus-visible {
  border-color: var(--color-border-interactive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-interactive) 34%, transparent);
}

:root .daily-log-editor-panel .field input:disabled,
:root .daily-log-editor-panel .field textarea:disabled,
:root .daily-log-editor-panel .field select:disabled {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-shell) 40%, transparent);
}

:root[data-theme="light"] .daily-log-editor-panel .field input[aria-invalid="true"],
:root[data-theme="light"] .daily-log-editor-panel .field textarea[aria-invalid="true"],
:root[data-theme="light"] .daily-log-editor-panel .field select[aria-invalid="true"],
:root[data-theme="dark"] .daily-log-editor-panel .field input[aria-invalid="true"],
:root[data-theme="dark"] .daily-log-editor-panel .field textarea[aria-invalid="true"],
:root[data-theme="dark"] .daily-log-editor-panel .field select[aria-invalid="true"] {
  border-color: var(--danger-border);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

/* Break treatment as calm selectable surfaces rather than outlined rows. */
:root[data-theme="light"] .break-treatment-option span,
:root[data-theme="dark"] .break-treatment-option span {
  border-color: transparent;
}

:root[data-theme="light"] .break-treatment-option span {
  background: color-mix(in srgb, var(--color-shell) 55%, var(--color-page));
}

:root[data-theme="light"] .break-treatment-option:hover span {
  background: color-mix(in srgb, var(--color-shell) 78%, var(--color-page));
}

:root[data-theme="light"] .break-treatment-option input:checked + span {
  border-color: color-mix(in srgb, var(--color-border-interactive) 55%, transparent);
  background: color-mix(in srgb, var(--color-state-active) 60%, var(--color-page));
}

:root[data-theme="dark"] .break-treatment-option span {
  background: color-mix(in srgb, var(--color-card) 72%, var(--color-canvas));
}

:root[data-theme="dark"] .break-treatment-option:hover span {
  background: color-mix(in srgb, var(--color-card) 88%, var(--color-canvas));
}

:root[data-theme="dark"] .break-treatment-option input:checked + span {
  border-color: color-mix(in srgb, var(--color-border-interactive) 60%, transparent);
  background: color-mix(in srgb, var(--color-inset) 60%, var(--color-card));
}

.break-treatment-option:focus-within span {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border-interactive) 30%, transparent);
}

@media (forced-colors: active) {
  .daily-log-editor-panel .field input,
  .daily-log-editor-panel .field textarea,
  .daily-log-editor-panel .field select {
    border: 1px solid ButtonText;
    background: Field;
    color: FieldText;
  }

  .daily-log-editor-panel .field input:focus-visible,
  .daily-log-editor-panel .field textarea:focus-visible,
  .daily-log-editor-panel .field select:focus-visible,
  .break-treatment-option:focus-within span {
    outline: 2px solid Highlight;
    outline-offset: 1px;
  }

  .break-treatment-option input:checked + span {
    border-color: Highlight;
    outline: 1px solid Highlight;
  }
}

/* Journal page surface softening: calm content surfaces over outlined boxes. */
#journal .journal-toolbar,
#journal .journal-overview,
#journal .journal-daily-panel,
#journal .journal-summary-panel,
#journal .journal-history-panel {
  border-color: transparent;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

:root[data-theme="light"] #journal .journal-toolbar,
:root[data-theme="light"] #journal .journal-overview,
:root[data-theme="light"] #journal .journal-daily-panel,
:root[data-theme="light"] #journal .journal-summary-panel,
:root[data-theme="light"] #journal .journal-history-panel {
  background: var(--color-page);
}

:root[data-theme="dark"] #journal .journal-toolbar,
:root[data-theme="dark"] #journal .journal-overview,
:root[data-theme="dark"] #journal .journal-daily-panel,
:root[data-theme="dark"] #journal .journal-summary-panel,
:root[data-theme="dark"] #journal .journal-history-panel {
  background: color-mix(in srgb, var(--color-page) 88%, var(--color-card));
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

#journal .journal-overview-grid div,
#journal .daily-record-detail-grid > div {
  background: color-mix(in srgb, var(--color-shell) 55%, var(--color-page));
}

:root[data-theme="dark"] #journal .journal-overview-grid div,
:root[data-theme="dark"] #journal .daily-record-detail-grid > div {
  background: transparent;
}

@media (min-width: 1000px) {
  :root[data-theme="dark"] #journal .journal-daily-panel {
    padding: 22px 24px;
  }
}

#journal .daily-record-accordion {
  border-color: transparent;
  background: var(--color-page);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

:root[data-theme="dark"] #journal .daily-record-accordion {
  background: color-mix(in srgb, var(--color-page) 88%, var(--color-card));
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

#journal .daily-record-accordion.is-expanded {
  border-color: color-mix(in srgb, var(--color-border-interactive) 40%, transparent);
}

#journal .daily-record-panel {
  border-top-color: color-mix(in srgb, var(--color-border-subtle) 55%, transparent);
}

#journal .week-item {
  border-color: transparent;
  background: color-mix(in srgb, var(--color-shell) 55%, var(--color-page));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 7%, transparent);
}

:root[data-theme="dark"] #journal .week-item {
  background: color-mix(in srgb, var(--color-card) 80%, var(--color-canvas));
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.28);
}

#journal .week-item.is-selected {
  border-color: color-mix(in srgb, var(--color-border-interactive) 55%, transparent);
}

/* Persistent Log Today floating action. */
.log-today-fab {
  border-color: transparent;
  background: var(--color-text-interactive);
  color: var(--color-text-inverse);
}

:root[data-theme="dark"] .log-today-fab {
  box-shadow: var(--shadow-card);
}

.log-today-fab:hover {
  background: var(--accent-deep);
}

.log-today-fab:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  #journal .journal-toolbar,
  #journal .journal-overview,
  #journal .journal-daily-panel,
  #journal .journal-summary-panel,
  #journal .journal-history-panel,
  #journal .daily-record-accordion,
  #journal .week-item {
    border-color: CanvasText;
  }

  .log-today-fab {
    background: ButtonFace;
    color: ButtonText;
  }
}

/* Pending photo-selection preview: soft grouping, no hard cards. */
.pending-photo-preview {
  border-radius: var(--radius-control);
  padding: 10px;
}

:root[data-theme="light"] .pending-photo-preview {
  background: color-mix(in srgb, var(--color-shell) 55%, var(--color-page));
}

:root[data-theme="dark"] .pending-photo-preview {
  background: color-mix(in srgb, var(--color-card) 72%, var(--color-canvas));
}

.pending-photo-heading {
  color: var(--color-text-secondary);
}

.pending-photo-item {
  background: transparent;
}

.pending-photo-thumb {
  background: color-mix(in srgb, var(--color-shell) 60%, var(--color-page));
}

.pending-photo-thumb.is-unavailable {
  border: 1px dashed color-mix(in srgb, var(--color-border-default) 60%, transparent);
}

.pending-photo-meta strong {
  color: var(--color-text-primary);
}

.pending-photo-meta span {
  color: var(--color-text-muted);
}

@media (forced-colors: active) {
  .pending-photo-preview {
    border: 1px solid CanvasText;
  }

  .pending-photo-thumb {
    border: 1px solid CanvasText;
  }
}