/* ===========================================================================
   RYBPEC — theme.css
   Design system: tokens, reset, typography and shared components.

   Structure and density follow the IBM Carbon design language (4/8px spacing
   rhythm, 48px controls, IBM Plex type scale, Carbon motion curves). Colour
   is a warm earth palette, and corners are softened per the project brief.

   Every colour, size and duration below is a token. Components never hardcode
   a hex value, so light and dark themes stay in step.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens — light theme (default)
   --------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg: #f9f5f0;
  --bg-brand: #4e342e;
  --layer-01: #ffffff;
  --layer-02: #f3ede6;
  --layer-03: #eae0d5;
  --layer-hover: #f0e7dd;
  --layer-selected: #ece0d3;
  --field: #f2ebe3;
  --field-hover: #eae0d5;

  /* Lines */
  --border-subtle: #e3d8cb;
  /* Dark enough to clear 3:1 against --field: an input's edge is a UI
     boundary, not decoration (WCAG 1.4.11). */
  --border-strong: #8a7867;
  --border-interactive: #4e6b4a;

  /* Text */
  --text-primary: #4e342e;
  --text-secondary: #6b564c;
  --text-helper: #7b675d;
  --text-disabled: #b3a399;
  --text-on-color: #ffffff;
  --text-inverse: #f9f5f0;

  /* Brand + interaction
     Sage green leads, as it does on the RYB'PEC'26 artwork; warm earth grounds
     the type; gold carries the game layer. --on-primary exists because the
     right text colour on a green button is white in light and near-black in
     dark — the two themes cannot share one value. */
  --primary: #4e6b4a;
  --primary-hover: #3f5a3c;
  --primary-active: #33482f;
  --on-primary: #ffffff;
  --secondary: #8d6e63;
  --secondary-hover: #7a5d53;
  --sage: #7f9b79;
  --sage-soft: #c6d6c0;
  --surface-sage: #edf3ea;
  /* The brand gradient carries white text, including small text like the
     header monogram, so its lightest end must still clear 4.5:1. The airier
     sages above are for surfaces that hold dark text. */
  --brand-from: #587350;
  --brand-to: #33482f;
  --accent: #8f631a;
  --accent-surface: #fbf3e4;
  --link: #4e6b4a;
  --link-hover: #33482f;

  /* Status */
  --support-success: #2e6b4f;
  --support-success-surface: #e6f0e9;
  --support-error: #b3261e;
  --support-error-surface: #fbeae8;
  --support-warning: #8a5a00;
  --support-warning-surface: #fbf1de;
  --support-info: #3d5a6c;
  --support-info-surface: #e9f0f3;

  /* Game layer — streak warmth, milestone tiers, and the water in the well.
     The teal is the only cool colour in the system: it reads unmistakably as
     water against the earth tones, which is the whole point of the metaphor. */
  --streak: #a34a08;
  --streak-surface: #fbefdc;
  --tier-bronze: #8a5a2b;
  --tier-silver: #7a7168;
  --tier-gold: #8f631a;
  /* The water's top edge is the fill line, so it has to read clearly against
     the empty part of the well. */
  --water-top: #3f8270;
  --water-bottom: #26685a;

  /* Focus + overlay */
  --focus: #33482f;
  --overlay: rgba(30, 40, 27, 0.55);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(62, 43, 36, 0.06), 0 1px 3px rgba(62, 43, 36, 0.05);
  --shadow-md: 0 2px 6px rgba(62, 43, 36, 0.08), 0 6px 16px rgba(62, 43, 36, 0.07);
  --shadow-lg: 0 8px 28px rgba(62, 43, 36, 0.14);

  /* Spacing — Carbon 4/8 rhythm */
  --sp-01: 0.125rem;  /*  2px */
  --sp-02: 0.25rem;   /*  4px */
  --sp-03: 0.5rem;    /*  8px */
  --sp-04: 0.75rem;   /* 12px */
  --sp-05: 1rem;      /* 16px */
  --sp-06: 1.5rem;    /* 24px */
  --sp-07: 2rem;      /* 32px */
  --sp-08: 2.5rem;    /* 40px */
  --sp-09: 3rem;      /* 48px */
  --sp-10: 4rem;      /* 64px */
  --sp-11: 5rem;      /* 80px */
  --sp-12: 6rem;      /* 96px */

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Sizing */
  --control-h: 3rem;       /* 48px — Carbon field height, also a safe tap target */
  --control-h-sm: 2.5rem;  /* 40px */
  --header-h: 3.5rem;      /* 56px */
  --sidenav-w: 15rem;      /* 240px */
  --measure: 68ch;         /* readable line length for long-form text */

  /* Type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Motion — Carbon easing */
  --ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --ease-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --ease-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --dur-fast: 110ms;
  --dur-moderate: 180ms;
  --dur-slow: 240ms;

  /* Layers */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. Tokens — dark theme
   Warm, desaturated surfaces rather than inverted colours. Contrast pairs are
   re-checked for dark: body text >= 4.5:1, secondary text >= 3:1.
   --------------------------------------------------------------------------- */
:root[data-theme='dark'] {
  --bg: #191310;
  --bg-brand: #120d0b;
  --layer-01: #241c18;
  --layer-02: #302620;
  --layer-03: #3b2f28;
  --layer-hover: #2e241e;
  --layer-selected: #3a2e27;
  --field: #302620;
  --field-hover: #3b2f28;

  --border-subtle: #3f332c;
  --border-strong: #8a7364;
  --border-interactive: #a8c7a2;

  --text-primary: #f6efe9;
  --text-secondary: #d2bfb3;
  --text-helper: #b6a297;
  --text-disabled: #6e5c52;
  --text-on-color: #ffffff;
  --text-inverse: #241c18;

  --primary: #7fa37a;
  --primary-hover: #8fb389;
  --primary-active: #6b8f66;
  --on-primary: #12200f;
  --secondary: #6d4c41;
  --secondary-hover: #7d5a4e;
  --sage: #6e8c69;
  --sage-soft: #3b4d38;
  --surface-sage: #1e2a1c;
  --brand-from: #4e6b4a;
  --brand-to: #22331f;
  --accent: #d9ae64;
  --accent-surface: #2f2417;
  --link: #a8c7a2;
  --link-hover: #c2dbbc;

  --support-success: #86cea8;
  --support-success-surface: #1b2b23;
  --support-error: #ff9b92;
  --support-error-surface: #33201e;
  --support-warning: #e3b860;
  --support-warning-surface: #322715;
  --support-info: #a9c6d6;
  --support-info-surface: #1e2a30;

  --streak: #f0b357;
  --streak-surface: #33260f;
  --tier-bronze: #d9a273;
  --tier-silver: #c3b5a6;
  --tier-gold: #d9ae64;
  --water-top: #4e8c7c;
  --water-bottom: #1e4c43;

  --focus: #d9ead4;
  --overlay: rgba(0, 0, 0, 0.68);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* Visitors who never touch the toggle follow their operating system.
 *
 * These values MUST stay identical to the :root[data-theme='dark'] block above.
 * Plain CSS cannot share one declaration between a selector and a media query,
 * so the pair is checked automatically instead — see the theme consistency test
 * described in README.md. Change one, change both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #191310;
    --bg-brand: #120d0b;
    --layer-01: #241c18;
    --layer-02: #302620;
    --layer-03: #3b2f28;
    --layer-hover: #2e241e;
    --layer-selected: #3a2e27;
    --field: #302620;
    --field-hover: #3b2f28;

    --border-subtle: #3f332c;
    --border-strong: #8a7364;
    --border-interactive: #a8c7a2;

    --text-primary: #f6efe9;
    --text-secondary: #d2bfb3;
    --text-helper: #b6a297;
    --text-disabled: #6e5c52;
    --text-on-color: #ffffff;
    --text-inverse: #241c18;

    --primary: #7fa37a;
    --primary-hover: #8fb389;
    --primary-active: #6b8f66;
    --on-primary: #12200f;
    --secondary: #6d4c41;
    --secondary-hover: #7d5a4e;
    --sage: #6e8c69;
    --sage-soft: #3b4d38;
    --surface-sage: #1e2a1c;
    --brand-from: #4e6b4a;
    --brand-to: #22331f;
    --accent: #d9ae64;
    --accent-surface: #2f2417;
    --link: #a8c7a2;
    --link-hover: #c2dbbc;

    --support-success: #86cea8;
    --support-success-surface: #1b2b23;
    --support-error: #ff9b92;
    --support-error-surface: #33201e;
    --support-warning: #e3b860;
    --support-warning-surface: #322715;
    --support-info: #a9c6d6;
    --support-info-surface: #1e2a30;

    --streak: #f0b357;
    --streak-surface: #33260f;
    --tier-bronze: #d9a273;
    --tier-silver: #c3b5a6;
    --tier-gold: #d9ae64;
    --water-top: #4e8c7c;
    --water-bottom: #1e4c43;

    --focus: #d9ead4;
    --overlay: rgba(0, 0, 0, 0.68);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------
   3. Reset
   --------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;         /* 16px keeps mobile browsers from auto-zooming */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
/* The reset above sets svg to block, which would defeat the hidden attribute. */
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--dur-fast) var(--ease-productive);
}
a:hover { color: var(--link-hover); }

/* One consistent focus ring across the whole product. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--primary);
  color: var(--text-on-color);
}

/* ---------------------------------------------------------------------------
   4. Typography scale
   --------------------------------------------------------------------------- */
.display {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.375rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 300;
}
.heading-05 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }
.heading-04 { font-size: 1.5rem;   line-height: 1.3;  font-weight: 500; }
.heading-03 { font-size: 1.25rem;  line-height: 1.4;  font-weight: 500; }
.heading-02 { font-size: 1rem;     line-height: 1.4;  font-weight: 600; }
.heading-01 { font-size: 0.875rem; line-height: 1.35; font-weight: 600; }
.body-02    { font-size: 1rem;     line-height: 1.6; }
.body-01    { font-size: 0.875rem; line-height: 1.45; }
.label-01 {
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--text-helper);
}
.helper-text { font-size: 0.75rem; line-height: 1.35; color: var(--text-helper); }

.text-secondary { color: var(--text-secondary); }
.text-helper { color: var(--text-helper); }
.serif { font-family: var(--font-serif); }
.tabular { font-variant-numeric: tabular-nums; }

/* Long-form reading column: 60–75 characters. */
.prose {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: var(--measure);
  color: var(--text-primary);
}
.prose p + p { margin-top: var(--sp-05); }

/* ---------------------------------------------------------------------------
   5. Layout helpers
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--sp-05);
}
@media (min-width: 42rem) { .container { padding-inline: var(--sp-06); } }
@media (min-width: 66rem) { .container { padding-inline: var(--sp-07); } }

.container--narrow { max-width: 46rem; }

.stack > * + * { margin-top: var(--sp-05); }
.stack-sm > * + * { margin-top: var(--sp-03); }
.stack-lg > * + * { margin-top: var(--sp-07); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-04);
}
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }

.section { padding-block: var(--sp-08); }
@media (min-width: 42rem) { .section { padding-block: var(--sp-10); } }

.divider {
  height: 1px;
  border: 0;
  background: var(--border-subtle);
  margin-block: var(--sp-06);
}

/* A small utility set, so templates never need an inline style attribute. */
.mt-02 { margin-top: var(--sp-02); }
.mt-03 { margin-top: var(--sp-03); }
.mt-04 { margin-top: var(--sp-04); }
.mt-05 { margin-top: var(--sp-05); }
.mt-06 { margin-top: var(--sp-06); }
.mt-07 { margin-top: var(--sp-07); }
.mb-05 { margin-bottom: var(--sp-05); }
.mb-06 { margin-bottom: var(--sp-06); }
.mb-07 { margin-bottom: var(--sp-07); }
.measure-md { max-width: 44rem; }
.text-center { text-align: center; }
.cluster--center { justify-content: center; }
.full-width { width: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-05);
  top: -4rem;
  z-index: var(--z-toast);
  padding: var(--sp-03) var(--sp-05);
  background: var(--primary);
  color: var(--text-on-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--dur-moderate) var(--ease-entrance);
}
.skip-link:focus { top: var(--sp-03); color: var(--text-on-color); }

/* ---------------------------------------------------------------------------
   6. Buttons
   Carbon anatomy — 48px tall, generous horizontal padding, label then icon —
   softened with the rounded corners and subtle shadow the brief calls for.
   --------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text-primary);
  --btn-bg-hover: var(--layer-hover);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-03);
  min-height: var(--control-h);
  padding: var(--sp-03) var(--sp-06);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--dur-fast) var(--ease-productive),
    border-color var(--dur-fast) var(--ease-productive),
    box-shadow var(--dur-fast) var(--ease-productive),
    transform var(--dur-fast) var(--ease-productive);
}
.btn:hover:not(:disabled) { background: var(--btn-bg-hover); color: var(--btn-fg); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn .icon { flex: none; }

.btn--primary {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-primary);
  --btn-bg-hover: var(--primary-hover);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--primary:active:not(:disabled) { background: var(--primary-active); transform: translateY(0); }

.btn--secondary {
  --btn-bg: var(--secondary);
  --btn-fg: var(--text-on-color);
  --btn-bg-hover: var(--secondary-hover);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover:not(:disabled) { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--tertiary {
  --btn-bg: transparent;
  --btn-fg: var(--link);
  --btn-border: var(--border-interactive);
  --btn-bg-hover: var(--primary);
}
.btn--tertiary:hover:not(:disabled) { color: var(--on-primary); }

.btn--ghost {
  --btn-fg: var(--link);
  --btn-bg-hover: var(--layer-hover);
}

.btn--danger {
  --btn-bg: var(--support-error);
  --btn-fg: #ffffff;
  --btn-bg-hover: #8f1e17;
}
:root[data-theme='dark'] .btn--danger { --btn-fg: #2a1210; --btn-bg-hover: #ffb3ab; }

.btn--sm { min-height: var(--control-h-sm); padding-inline: var(--sp-05); font-size: 0.875rem; }
.btn--full { width: 100%; }

/* Submitting state: the button says so, and a second press cannot land. */
.btn.is-loading { pointer-events: none; opacity: 0.8; }
.btn.is-loading::before {
  content: '';
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 640ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::before { animation-duration: 2s; }
}

/* Icon-only control: the visual box may be small, the tap target may not. */
.btn--icon {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--sp-03);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------------
   7. Forms
   --------------------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-06); }

.field__label {
  display: block;
  margin-bottom: var(--sp-03);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
.field__required { color: var(--support-error); margin-left: 2px; }

.field__control {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--sp-03) var(--sp-05);
  background: var(--field);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 1rem;
  transition:
    border-color var(--dur-fast) var(--ease-productive),
    background-color var(--dur-fast) var(--ease-productive);
}
.field__control::placeholder { color: var(--text-disabled); }
.field__control:hover:not(:disabled):not([readonly]) { background: var(--field-hover); }
.field__control:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field__control:disabled { opacity: 0.5; cursor: not-allowed; }
.field__control[readonly] { background: var(--layer-02); color: var(--text-secondary); }

textarea.field__control {
  min-height: 8rem;
  padding-block: var(--sp-04);
  line-height: 1.6;
  resize: vertical;
}
select.field__control {
  appearance: none;
  padding-right: var(--sp-09);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__helper { margin-top: var(--sp-03); font-size: 0.75rem; color: var(--text-helper); }

/* Errors sit directly under the field they belong to, with an icon so the
   message does not depend on colour alone. */
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-02);
  margin-top: var(--sp-03);
  font-size: 0.8125rem;
  color: var(--support-error);
}
.field--invalid .field__control { border-color: var(--support-error); background: var(--support-error-surface); }

.field__wrap { position: relative; display: flex; }
.field__wrap .field__control { padding-right: 3.25rem; }
.field__toggle {
  position: absolute;
  right: var(--sp-02);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.field__toggle:hover { color: var(--text-primary); background: var(--layer-hover); }

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-03);
  min-height: 2.75rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.checkbox input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  accent-color: var(--primary);
  flex: none;
  cursor: pointer;
}

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-06); }
legend { padding: 0; margin-bottom: var(--sp-04); font-weight: 600; }

/* ---------------------------------------------------------------------------
   8. Notifications (Carbon inline notification)
   --------------------------------------------------------------------------- */
.notification {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-04);
  padding: var(--sp-05);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--tone, var(--support-info));
  border-radius: var(--radius-md);
  background: var(--tone-surface, var(--support-info-surface));
  color: var(--text-primary);
  font-size: 0.9375rem;
  animation: notification-in var(--dur-slow) var(--ease-entrance) both;
}
.notification + .notification { margin-top: var(--sp-04); }
.notification__icon { color: var(--tone); flex: none; margin-top: 1px; }
.notification__body { flex: 1 1 auto; }
.notification__title { font-weight: 600; }
.notification__close {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.5rem -0.5rem 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
/* A neutral grey works as a hover wash on both the light and dark surfaces. */
.notification__close:hover { background: rgba(128, 128, 128, 0.18); color: var(--text-primary); }

.notification--success { --tone: var(--support-success); --tone-surface: var(--support-success-surface); }
.notification--error   { --tone: var(--support-error);   --tone-surface: var(--support-error-surface); }
.notification--warning { --tone: var(--support-warning); --tone-surface: var(--support-warning-surface); }
.notification--info    { --tone: var(--support-info);    --tone-surface: var(--support-info-surface); }

@keyframes notification-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   9. Tiles and tags
   --------------------------------------------------------------------------- */
.tile {
  background: var(--layer-01);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-06);
  box-shadow: var(--shadow-sm);
}
.tile--flush { padding: 0; overflow: hidden; }
.tile--quiet { background: var(--layer-02); box-shadow: none; }

a.tile,
button.tile {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--dur-fast) var(--ease-productive),
    box-shadow var(--dur-fast) var(--ease-productive),
    border-color var(--dur-fast) var(--ease-productive);
}
a.tile:hover,
button.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-interactive);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-02);
  padding: 0.1875rem var(--sp-04);
  border-radius: var(--radius-pill);
  background: var(--layer-03);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag--success { background: var(--support-success-surface); color: var(--support-success); }
.tag--warning { background: var(--support-warning-surface); color: var(--support-warning); }
.tag--error   { background: var(--support-error-surface);   color: var(--support-error); }
.tag--accent  { background: var(--accent-surface);          color: var(--accent); }
.tag--info    { background: var(--support-info-surface);    color: var(--support-info); }

/* ---------------------------------------------------------------------------
   10. Progress
   --------------------------------------------------------------------------- */
.progress {
  --fill: 0%;
  position: relative;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--layer-03);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: var(--fill);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sage), var(--primary));
  transition: width var(--dur-slow) var(--ease-productive);
}

/* ---------------------------------------------------------------------------
   11. Data table
   Below 42rem each row restacks into a card, using the data-label on each cell
   as its heading — no horizontal scrolling on a phone.
   --------------------------------------------------------------------------- */
.table-wrap { width: 100%; overflow-x: auto; }

.table { font-size: 0.9375rem; }
.table th,
.table td {
  padding: var(--sp-04) var(--sp-05);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.table thead th {
  position: sticky;
  top: 0;
  background: var(--layer-02);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.table tbody tr { transition: background-color var(--dur-fast) var(--ease-productive); }
.table tbody tr:hover { background: var(--layer-hover); }
.table td.numeric { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 41.99rem) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    margin-bottom: var(--sp-04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--layer-01);
    overflow: hidden;
  }
  .table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-05);
    border-bottom: 1px solid var(--border-subtle);
  }
  .table td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-helper);
  }
  .table td.numeric { text-align: right; }
}

/* ---------------------------------------------------------------------------
   12. Empty state
   --------------------------------------------------------------------------- */
.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--sp-04);
  padding: var(--sp-09) var(--sp-05);
  text-align: center;
  color: var(--text-secondary);
}
.empty-state__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--layer-02);
  color: var(--text-helper);
}

/* ---------------------------------------------------------------------------
   13. Application shell — header
   --------------------------------------------------------------------------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--layer-01);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: saturate(140%) blur(6px);
}
.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-03);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: linear-gradient(140deg, var(--brand-from), var(--brand-to));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: none;
}
.brand__name { font-size: 0.9375rem; }
.brand__sub {
  display: none;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-helper);
}
@media (min-width: 42rem) { .brand__sub { display: block; } }

.app-nav { display: none; margin-left: var(--sp-05); }
.app-nav__list { display: flex; align-items: center; gap: var(--sp-02); list-style: none; }
.app-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-03);
  height: 2.75rem;
  padding-inline: var(--sp-04);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-productive), color var(--dur-fast) var(--ease-productive);
}
.app-nav__link:hover { background: var(--layer-hover); color: var(--text-primary); }
/* The current page is marked with weight, colour and an underline — never colour alone. */
.app-nav__link.is-active {
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--primary);
}
.app-header__actions { display: flex; align-items: center; gap: var(--sp-02); margin-left: auto; }

/* Streak chip in the header — small, always visible, never in the way. */
.streak-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-02);
  height: 2rem;
  padding-inline: var(--sp-04);
  border-radius: var(--radius-pill);
  background: var(--streak-surface);
  color: var(--streak);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.streak-chip:hover { text-decoration: none; filter: brightness(0.96); }
/* Alive but unfed today: amber, so the nudge is visible on every page. */
.streak-chip--risk {
  background: var(--support-warning-surface);
  color: var(--support-warning);
}

.user-chip {
  display: none;
  align-items: center;
  gap: var(--sp-03);
  padding: var(--sp-02) var(--sp-04) var(--sp-02) var(--sp-02);
  border-radius: var(--radius-pill);
  background: var(--layer-02);
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.user-chip__avatar {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--text-on-color);
  font-size: 0.75rem;
  font-weight: 700;
}
@media (min-width: 66rem) {
  .app-nav { display: block; }
  .user-chip { display: inline-flex; }
  .app-header__menu-toggle { display: none; }
}

/* Mobile drawer */
.app-drawer {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: var(--z-overlay);
  padding: var(--sp-05);
  background: var(--layer-01);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--dur-moderate) var(--ease-entrance),
    opacity var(--dur-moderate) var(--ease-entrance),
    visibility var(--dur-moderate);
}
.app-drawer[data-open='true'] { transform: none; opacity: 1; visibility: visible; }
.app-drawer__list { list-style: none; display: grid; gap: var(--sp-02); }
.app-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-04);
  min-height: 3rem;
  padding-inline: var(--sp-04);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
}
.app-drawer__link:hover { background: var(--layer-hover); }
.app-drawer__link.is-active { background: var(--layer-selected); font-weight: 600; }
@media (min-width: 66rem) { .app-drawer { display: none; } }

/* ---------------------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------------------- */
.app-footer {
  margin-top: var(--sp-10);
  padding-block: var(--sp-07);
  border-top: 1px solid var(--border-subtle);
  background: var(--layer-01);
  color: var(--text-helper);
  font-size: 0.8125rem;
}
.app-footer__inner { display: flex; flex-wrap: wrap; gap: var(--sp-04); align-items: center; justify-content: space-between; }
.app-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-05); list-style: none; }

/* ---------------------------------------------------------------------------
   15. Page header block
   --------------------------------------------------------------------------- */
.page-head {
  padding-block: var(--sp-07) var(--sp-06);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--sp-07);
}
.page-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-03);
  margin-bottom: var(--sp-03);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-helper);
}
.page-head__title { margin-bottom: var(--sp-03); }
.page-head__lead { color: var(--text-secondary); max-width: 46rem; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-03); list-style: none; font-size: 0.8125rem; }
.breadcrumb li::after { content: '/'; margin-left: var(--sp-03); color: var(--text-disabled); }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb a { color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   16. Motion preferences
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover:not(:disabled),
  a.tile:hover,
  button.tile:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   17. Print — a day can be printed and carried into a prayer meeting
   --------------------------------------------------------------------------- */
@media print {
  .app-header, .app-footer, .app-drawer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .tile { border: 1px solid #ccc; box-shadow: none; }
  a[href]::after { content: ''; }
}