/* Moneko active component layer.
   Shared, production-facing primitives live here; page composition stays in styles.css. */

/* Browser and interaction foundations */
body { color: var(--text-primary); }
::selection { color: var(--surface); background: var(--grape-deep); }
button, input, select, textarea { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* A currency field is one control: focus the outer paper frame, not the inner input. */
html body :is(.amount-field, .salary-amount) > div:focus-within {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent);
}
html body :is(.amount-field, .salary-amount) > div input:is(:focus, :focus-visible) {
  outline: none;
  outline-offset: 0;
  border: 0;
  box-shadow: none;
  transform: none;
}

/* Progress primitives */
.ratio-fill, .settled-fill, .home-goal-fill, .goal-progress i {
  transform-origin: left center;
  transition: transform var(--duration-moderate) var(--ease-paper), background-color var(--duration-fast) ease-out;
}

/* Paper surfaces shared by three or more active views */
.panel, .stat-block, .transaction-summary-card, .transaction-day-sheet,
.commitment-summary-card, .commitment-timeline-panel, .commitment-group-sheet,
.calendar-panel, .goal-rail, .safety-control-room, .safety-status-card,
.safety-command-card, .safety-quick-strip, .safety-detail-drawer,
.safety-customization-room, .onboarding-step {
  color: var(--text-primary);
  background-color: var(--surface-raised);
  border-color: color-mix(in srgb, var(--line) 82%, var(--theme-mid));
}
.transaction-summary-card, .transaction-day-sheet, .commitment-summary-card,
.commitment-timeline-panel, .commitment-group-sheet, .safety-command-card,
.safety-quick-strip, .safety-detail-drawer { background: var(--surface-raised); }
.transaction-empty, .commitment-empty, .calendar-day, .goal-card,
.plan-day-sheet, .provider-group, .recurring-check, .replace-sample,
.type-switch, .safety-empty, .sync-details { background: var(--surface-soft); }

/* Shared content hierarchy */
.flow-name small, .transaction-name small, .transaction-category,
.commitment-row small, .plan-summary small, .plan-summary em,
.plan-section-head p, .calendar-legend, .goal-card-body p,
.safety-page-head p, .safety-status-card p, .safety-status-card small,
.safety-command-card small, .safety-quick-strip small, .field-error {
  color: var(--text-secondary);
}
.field > span, .flow-name small, .transaction-name small, .transaction-category,
.commitment-card small, .commitment-row small, .plan-summary small,
.plan-summary em, .calendar-legend, .plan-day-item small,
.goal-card-body p, .safety-command-card small, .safety-quick-strip small,
.trash-row small, .history-row small, .onboarding-progress button span {
  font-size: var(--type-label);
  line-height: var(--line-compact);
}
.text-button, .segmented button, .compact-button,
.danger-link, .delete-cloud-button, .goal-contribute { font-size: var(--type-label); }
.flow-name strong, .transaction-name strong, .commitment-row strong,
.plan-day-item strong, .plan-day-item b { font-size: var(--type-body); }

/* Accessible controls */
.icon-button, .goal-edit, .status-toggle, .transaction-row-check, .commitment-row-check,
.transaction-swipe-edit, .transaction-swipe-delete, .commitment-swipe-actions button,
.transactions-view .edit-row, .commitment-edit-button {
  min-width: var(--control-hit-size);
  min-height: var(--control-hit-size);
}
.month-picker input, .sync-button, .salary-button, .text-button, .segmented button,
.compact-button, .goal-contribute, .plan-day-add, .payment-full-button,
.commitment-pay-button, .home-note-row { min-height: var(--control-hit-size); }
.category-icon svg, .transaction-ledger-icon svg {
  width: var(--icon-size-control);
  height: var(--icon-size-control);
  stroke-width: 1.9;
}

/* Form feedback */
.field-error {
  display: block;
  margin-top: var(--space-2);
  color: var(--status-danger);
  font-weight: 700;
}
.field [aria-invalid="true"] {
  border-color: var(--status-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 18%, transparent);
}

@media (hover:hover) and (pointer:fine) {
  button, .flow-item, .calendar-day, .goal-card { transition-timing-function: var(--ease-paper); }
}
@media (pointer:coarse) {
  button, a, input, select { min-height: var(--control-hit-size); }
  .nav-item { min-height: var(--control-hit-mobile); }
}
@media (max-width:700px) {
  body { font-size: 16px; }
  .main-content { padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); }
  .sidebar { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .nav-item { font-size: 12px; }
  .topbar { flex-wrap: wrap; }
  .top-actions { width: 100%; justify-content: flex-end; }
  .field-row, .setup-money-grid, .onboarding-step .field-row,
  .onboarding-step .setup-money-grid { grid-template-columns: 1fr; }
  .transaction-summary-card, .commitment-summary-card { min-height: 120px; }
}
@media (max-width:390px) {
  .top-actions { gap: 6px; }
  .sync-button, .salary-button { padding-inline: 10px; }
  html body .nav-item { font-size: var(--type-label); white-space: normal; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .view.active-view, dialog[open], .moneko-mascot, .cat,
  .home-breed-art, .room-preview img, .onboarding-summary-cat img,
  .sync-button.syncing .sync-dot {
    animation: none !important;
  }
  :where(button, a, input, select, textarea),
  .room-orb, .room-cloud, .room-scene-detail, .toast {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: var(--duration-normal) !important;
    transition-timing-function: ease-out !important;
  }
  .ratio-fill, .settled-fill, .home-goal-fill,
  .goal-progress i, .commitment-progress i {
    transition: none !important;
  }
}

/* Render only the active application surface. */
.view.hidden { content-visibility: hidden; }
.view:not(.hidden) { content-visibility: auto; contain: layout style paint; }

/* Readability, contrast and device-fit pass — keep the paper world, clarify its signals. */
html body .view :is(small, .eyebrow, .section-label, .home-note-row,
  .home-note-empty, .home-month-note p, .home-goal-values span,
  .flow-title, .month-picker span, .sync-button,
  .salary-button, .daily-budget span, .daily-budget small, .progress-head,
  .settled-summary > span, .settled-summary > strong, .stat-block small,
  .flow-title strong, .flow-name small, .empty-list, .donut span,
  .top-expense-row, .top-expense-row strong, .transaction-summary-card small,
  .transaction-summary-card div > span, .transaction-result-count,
  .transaction-day-head span, .transaction-name small, .transaction-category,
  .transaction-row .type-tag, .transaction-empty span, .commitment-page-head p,
  .commitment-summary-card small, .commitment-summary-card em, .commitment-day small,
  .commitment-row small, .commitment-completed > summary strong,
  .commitment-completed > summary small, .commitment-empty span,
  .payment-balance-card span, .payment-balance-card small, .payment-full-button,
  .plan-summary small, .plan-summary em, .plan-section-head p, .calendar-legend,
  .calendar-event, .plan-day-date span, .plan-day-date small,
  .plan-day-list-head small, .plan-day-item small, .plan-day-totals small,
  .plan-day-empty small, .plan-goal-empty small, .goal-card-title small,
  .goal-card-body p, .goal-card-foot, .goal-money span, .completed-goals > summary,
  .safety-page-head p, .safety-status-card p, .safety-status-card small,
  .safety-command-card small, .safety-quick-strip small, .room-sync-window small,
  .room-caption small, .safety-detail-drawer > header p,
  .safety-drawer-panel .data-nest-head p, .safety-layout .section-head p,
  .safety-install-card p, .trash-row small, .history-row small) {
  font-size: max(12px, var(--type-micro));
  line-height: 1.45;
}

html body .onboarding-dialog :is(small, .field > span, .onboarding-progress button span,
  .onboarding-step .field > span, .onboarding-add-link, .social-auto-row small,
  .onboarding-live-answer span, .onboarding-live-answer small,
  .onboarding-summary dt, .onboarding-envelopes b, .onboarding-actions > span) {
  font-size: max(12px, var(--type-micro));
  line-height: 1.45;
}

html body :is(.brand small, .sidebar-note small, .insight-note,
  .transaction-empty, .commitment-page-head p, .plan-day-empty,
  .plan-goal-empty, .goal-card-body p, .safety-page-head p,
  .safety-status-card p, .safety-status-card small,
  .safety-command-card small, .safety-quick-strip small,
  .safety-layout .section-head p, .room-heading p, .data-nest-head p,
  .sync-device-help, .onboarding-head p, .step-heading p,
  .social-auto-row small, .onboarding-live-answer small,
  .onboarding-summary-cat, .onboarding-summary dt) {
  color: var(--text-secondary);
}

html body .plans-view { --plan-muted: var(--text-secondary); }
html body .payment-balance-card :is(span, small) { color: var(--text-secondary); }
html body .payment-full-button,
html body .commitment-completed > summary { color: var(--status-success); }
html body .payment-full-button:hover {
  color: color-mix(in srgb, var(--status-success) 82%, black);
}
html body .commitment-completed > summary small { color: var(--text-secondary); }
html body .commitment-summary-card :is(small, em) { color: var(--text-secondary); }
html body .commitment-summary-card.planned strong,
html body .commitment-summary-card.paid strong,
html body .commitment-summary-card.planned > span,
html body .commitment-summary-card.paid > span { color: var(--status-success); }
html body .commitment-summary-card.saving strong,
html body .commitment-summary-card.saving > span { color: var(--action-secondary-text); }
html body .commitment-summary-card.remaining strong,
html body .commitment-summary-card.remaining > span { color: var(--status-danger); }
html body .onboarding-progress button { color: var(--text-secondary); }
html body .onboarding-progress button b { color: var(--text-secondary); }
html body .onboarding-progress button.active,
html body .onboarding-progress button.done { color: var(--status-success); }
html body .onboarding-progress button.active b,
html body .onboarding-progress button.done b { color: var(--text-on-accent); background: var(--status-success); }
html body .onboarding-live-answer { color: var(--status-success); }
html body .onboarding-envelopes .expense { color: #75452f; }
html body .onboarding-envelopes .saving { color: #365768; }
html body .safety-room-view {
  --nest-muted: var(--text-secondary);
  --nest-green: var(--status-success);
  --nest-blue: var(--action-secondary-text);
  --nest-coral: var(--status-danger);
  --nest-yellow: var(--color-summer-sun);
}
html body .field input::placeholder,
html body .field textarea::placeholder { color: var(--text-secondary); opacity: 1; }
html body .home-add-button,
html body .commitment-add-button { color: var(--color-sun-ink); }

html body :where(button, a, input, select, textarea):focus-visible {
  outline-color: var(--focus-ring);
}

html body .view :is(.transaction-row, .transaction-day-sheet,
  .commitment-row, .plan-day-item, .goal-card, .safety-command-card,
  .history-row, .trash-row) {
  overflow-wrap: anywhere;
}

html body .calendar-event {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Calendar labels stay legible without forcing long event names into narrow cells. */
html body .calendar-weekdays { font-size: var(--type-label); line-height: 1.45; }
html body .calendar-day-number { font-size: var(--type-label); }
html body .calendar-dots b { font-size: var(--type-micro); }
html body .goal-rail .text-button { min-height: var(--control-hit-size); font-size: var(--type-label); }
html body .commitment-swipe-actions button,
html body .commitment-progress span,
html body .safety-command-card small b,
html body .safety-quick-strip strong {
  font-size: var(--type-label);
  line-height: var(--line-compact);
}
html body .onboarding-dialog .onboarding-add-link {
  min-height: var(--control-hit-size);
  padding-block: 10px;
  font-size: var(--type-label);
}
html body .onboarding-progress button { min-height: var(--control-hit-size); }

@media (max-width: 700px) {
  html body .view { overflow-wrap: anywhere; }
  html body .view :is(button, a, input, select, textarea) { min-height: 44px; }
  html body .view :is(.nav-item, .nav-item span) { min-height: 54px; }
  html body .view :is(.transaction-row, .commitment-row, .plan-day-item) { min-width: 0; }
  html body .view :is(.transaction-row .amount, .commitment-row strong, .goal-money b) {
    font-variant-numeric: tabular-nums;
  }
}

@media (max-width: 360px) {
  html body .topbar h1 { font-size: 21px; letter-spacing: -.025em; }
  html body .top-actions { gap: 5px; }
  html body .nav-item { font-size: var(--type-label); letter-spacing: -.025em; padding-inline: 2px; white-space: normal; }
}

/* Functional copy stays readable even when an older page rule uses micro type. */
html body :is(.sync-button, .salary-button,
  .safety-page-head p, .safety-status-card p, .safety-status-card small,
  .room-caption small, .safety-command-card small, .safety-quick-strip small,
  .onboarding-progress button span) {
  font-size: var(--type-label);
  line-height: var(--line-compact);
}
html body .salary-button {
  color: var(--action-secondary-text);
  background: var(--selection-wash);
  border-color: var(--selection-border);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-shadow) 76%, transparent);
}
html body .sync-button {
  color: var(--text-secondary);
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--theme-shadow) 62%, transparent);
}

.pay-cycle-label {
  margin: 8px 0 0;
  font-size: var(--type-label);
  line-height: var(--line-compact);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
#itemDatePreview { font-size: var(--type-label); line-height: 1.5; color: var(--text-secondary); }
html body .view .calendar-day { min-height: 72px; }
html body .calendar-day-number { position: absolute; top: 5px; left: 5px; margin: 0; }
.calendar-month-label {
  position: absolute;
  top: 34px;
  left: 6px;
  font-size: var(--type-label);
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-secondary);
}
html body .calendar-dots b { white-space: nowrap; }