/* Sadyâ + Pondo shared UI foundation, v1. Keep both copies byte-identical.
   No runtime dependency on the sibling repository. */
:root {
  color-scheme: light;
  --canvas: oklch(97% .006 80);
  --bg: var(--canvas);
  --surface: oklch(99% .004 80);
  --sunken: oklch(94% .008 80);
  --ink: oklch(27% .014 70);
  --muted: oklch(48% .013 70);
  --faint: oklch(54% .012 70);
  --rule: oklch(87% .007 75);
  --rule-soft: oklch(91% .006 75);
  --line: var(--rule);
  --line-soft: var(--rule-soft);
  --accent: oklch(43% .065 160);
  --accent-soft: oklch(94% .025 160);
  --accent-bg: var(--accent-soft);
  --error: oklch(50% .16 25);
  --neg: var(--error);
  --error-soft: oklch(94% .02 25);
  --neg-bg: var(--error-soft);
  --radius: 14px;
  --family-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --family-control-radius: 8px;
  --family-rail: 208px;
}
body { font-family: var(--family-font); background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font-family: inherit; }
.brand, .family-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.brand-mark { display: block; width: 34px; height: 34px; flex: 0 0 34px; padding: 0; background: transparent; box-shadow: none; border-radius: 8px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { opacity: .5; cursor: default; }
.month-nav button, .month-nav select, .shop-filter select, .shop-filter input, .review-content input, .review-content select, .review-actions button, #capture, #add-task, .timer-controls button { border-radius: var(--family-control-radius); }
.review-content input, .review-content select, .review-source { color: var(--ink); background: var(--surface); }
.review-actions button { color: var(--ink); background: var(--sunken); }
.review-actions button[type=submit] { color: var(--surface); background: var(--ink); }
.tabs .tab.on, .view-nav button.selected { color: var(--accent); font-weight: 600; box-shadow: none; }
.analysis-toolbar h2, .desktop-page-header h2, .page-heading h1 { font-size: 32px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
@media (min-width: 900px) {
  :root { --sidebar-width: var(--family-rail); }
  body[data-view]::before { background: var(--sunken); border-color: var(--rule-soft); }
  body[data-view] header h1.family-brand { top: 30px; left: 20px; font-size: 20px; letter-spacing: -.02em; }
  body[data-view] .tabs { left: 20px; width: calc(var(--sidebar-width) - 40px); gap: 6px; }
  body[data-view] .tabs::before { content: none; }
  body[data-view] .tab { min-height: 44px; border-radius: 8px; padding: 0 12px; }
  body[data-view] .tab.on { background: var(--surface); }
  body[data-view] .tab:hover:not(.on) { background: var(--canvas); }
  .analysis-breakdown, .breakdown-columns { background: var(--canvas); }
}
@media (min-width: 1101px) {
  .app-shell { grid-template-columns: var(--family-rail) minmax(320px, 1fr) 324px; }
}
@media (max-width: 899px) {
  .analysis-toolbar h2, .desktop-page-header h2 { font-size: 28px; }
  body[data-view] > .wrap > header { align-items: center; }
  body[data-view] .tabs .tab.on { background: var(--accent-soft); }
}
@media (max-width: 760px) {
  .view-nav button.selected { background: var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}