/* Mr. McGregor — the iPhone app's palette and font on the web. DaisyUI 5 from the CDN does the rest. */

[data-theme="mcgregor"] {
  color-scheme: light;
  --color-base-100: oklch(100% 0 0);            /* the page: white, like the app */
  --color-base-200: oklch(95.5% 0.003 286);     /* rows and tiles: iOS secondary fill (#F2F2F7) */
  --color-base-300: oklch(90% 0.004 286);
  --color-base-content: oklch(18% 0.005 286);
  --color-primary: oklch(76% 0.2 150);          /* system green #34C759 */
  --color-primary-content: oklch(100% 0 0);
  --color-secondary: oklch(59% 0.2 258);        /* system blue #007AFF */
  --color-secondary-content: oklch(100% 0 0);
  --color-accent: oklch(70% 0.11 215);          /* system teal #30B0C7 — the phone's accent; orange is warning's */
  --color-accent-content: oklch(18% 0 0);
  --color-neutral: oklch(40% 0.01 286);
  --color-neutral-content: oklch(100% 0 0);
  --color-info: oklch(59% 0.2 258);
  --color-info-content: oklch(100% 0 0);
  --color-success: oklch(76% 0.2 150);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(76% 0.18 65);
  --color-warning-content: oklch(18% 0 0);
  --color-error: oklch(62% 0.24 29);            /* system red #FF3B30 */
  --color-error-content: oklch(100% 0 0);
  --radius-selector: 1rem;
  --radius-field: 0.75rem;
  --radius-box: 1.25rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* The design system: the iPhone app's measures and pieces on the web (the app's Views/DesignSystem —
   `Space`, `Radius`, the type roles on `Font`, `ListRow`, `StatusBadge` — and its Components). The
   Elementary pieces in Sources/mmg_server/Views/DesignSystem draw with these classes; /design shows
   them all in a debug build. */

:root {
  /* Space, smallest first: the app's `Space`. */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-s: 6px;
  --space-m: 8px;
  --space-l: 12px;
  --space-xl: 16px;
  --space-xxl: 24px;
  /* Corners: the app's `Radius`. */
  --radius-small: 6px;
  --radius-medium: 10px;
  --radius-large: 14px;
  /* iOS's own sizes for the app's type roles: .subheadline 15, .caption 12, .caption2 11. */
  --text-body: 17px;
  --text-row-title: 15px;
  --text-row-detail: 12px;
  --text-row-meta: 11px;
  /* A list's hairline, iOS's separator. */
  --color-separator: oklch(86% 0.004 286);
}

/* A screen drawn as the app draws one: iOS's grouped background, sections of white rows on it. */
.ds-screen {
  background: var(--color-base-200);
  color: var(--color-base-content);
  font-size: var(--text-body);
}

/* A grouped list's section: its label, its rows on a card, and a footer under it. */
.ds-section { display: grid; gap: var(--space-s); }
.ds-section-label {
  margin: 0 var(--space-xl);
  font-size: 1.0625rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.ds-section-footer {
  margin: 0 var(--space-xl);
  font-size: var(--text-row-detail);
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--color-base-100);
  border-radius: var(--radius-large);
  overflow: hidden;
}

/* The one row shape (`ListRow`): something leading, the name and a line or two under it, something
   trailing. The hairline between rows starts where the words do, as iOS's does. */
.ds-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-l);
  min-height: 44px;
  padding: 11px var(--space-xl);
}
.ds-row[data-align="top"] { align-items: flex-start; }
.ds-row[data-align="baseline"] { align-items: baseline; }
.ds-row + .ds-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: var(--ds-row-inset, var(--space-xl));
  border-top: 0.5px solid var(--color-separator);
}
.ds-row:has(> .ds-row-leading) + .ds-row:has(> .ds-row-leading)::before { --ds-row-inset: 52px; }
.ds-row-leading { flex: none; display: flex; align-items: center; justify-content: center; min-width: 24px; }
.ds-row-text { flex: 1; min-width: 0; display: grid; gap: var(--space-xxs); }
.ds-row-trailing { flex: none; display: flex; align-items: center; gap: var(--space-m); }
a.ds-row { color: inherit; text-decoration: none; }
a.ds-row:hover { background: color-mix(in oklab, var(--color-base-200) 60%, transparent); }

/* The app's type roles. */
.ds-row-title { font-size: var(--text-row-title); font-weight: 500; line-height: 1.3; }
.ds-row-title[data-size="body"] { font-size: var(--text-body); font-weight: 400; }
.ds-row-detail {
  font-size: var(--text-row-detail);
  line-height: 1.35;
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.ds-row-meta {
  font-size: var(--text-row-meta);
  color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
}
.ds-secondary { color: color-mix(in oklab, var(--color-base-content) 55%, transparent); }

/* A state in one word, in its colour, on a tinted capsule (`StatusBadge`). `--ds-tint` is the
   colour the shared rules name (`ChoreLogic.stateColor`, a zone's colour). */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-s);
  border-radius: 999px;
  font-size: var(--text-row-meta);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ds-tint, var(--color-neutral));
  background: color-mix(in oklab, var(--ds-tint, var(--color-neutral)) 18%, transparent);
  white-space: nowrap;
}

/* A chore's circle, which marks it done (`ChoreRow`). */
.ds-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--color-base-content) 35%, transparent);
}

/* The week ahead (`WeekStrip`): a day a column, today on its own tile. */
.ds-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-xs);
  padding: var(--space-l) var(--space-m);
}
.ds-day {
  display: grid;
  justify-items: center;
  gap: var(--space-xs);
  padding: var(--space-m) 0;
  border-radius: var(--radius-medium);
  font-variant-numeric: tabular-nums;
}
.ds-day[aria-current="date"] { background: var(--color-base-200); }
.ds-day-name { font-size: var(--text-row-meta); font-weight: 600; letter-spacing: 0.02em; }
.ds-day-temps { font-size: var(--text-row-title); white-space: nowrap; }
/* On a phone's width the week's numbers drop to the app's caption, on one line each. */
@media (max-width: 480px) {
  .ds-week { gap: 0; padding: var(--space-m) var(--space-xs); }
  .ds-day-temps { font-size: var(--text-row-meta); }
}
.ds-day-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--color-primary); }

/* A gauge's dial (`GaugeDial`, around `GaugeRing`): three quarters of a ring, filled to the reading. */
.ds-dial { display: grid; justify-items: center; gap: var(--space-xs); padding: var(--space-m) 0; text-align: center; }
.ds-ring { position: relative; width: 88px; height: 88px; }
.ds-ring svg { width: 100%; height: 100%; }
.ds-ring-track { stroke: var(--color-base-200); }
.ds-ring-value { stroke: var(--ds-tint, var(--color-neutral)); transition: stroke-dasharray 0.3s; }
.ds-ring-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-ring-number { font-size: 22px; font-weight: 600; }
.ds-ring-unit { font-size: var(--text-row-meta); }
.ds-dials { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-xs) var(--space-m); padding: var(--space-m); }

/* The steward's conversation (the app's ChatUI bubbles). */
.ds-bubble {
  width: fit-content;
  max-width: 85%;
  padding: var(--space-m) var(--space-l);
  border-radius: 18px;
  font-size: var(--text-row-title);
  line-height: 1.35;
}
.ds-bubble[data-from="person"] { margin-left: auto; background: var(--color-primary); color: var(--color-primary-content); }
.ds-bubble[data-from="steward"] { background: var(--color-base-200); }

/* A row that's a link: the whole row is the target, and it lightens under the pointer. */
.ds-row-link { position: absolute; inset: 0; border-radius: inherit; }
.ds-row:has(> .ds-row-link):hover { background: color-mix(in oklab, var(--color-base-200) 55%, transparent); }
.ds-row-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }