/* ==========================================================================
   TerraFirma Design System — foundation stylesheet
   Brand: TerraFirma Red #d22730 · TerraFirma Black #111920 · TerraFirma White #F5F8F7
   Typeface: Lato
   All component styles are token-driven — override the :root custom properties
   to retheme; never hard-code a hex in a component.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Lato-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/Lato-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Lato-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('./fonts/Lato-Black.ttf') format('truetype');
}

/* --- Tokens --------------------------------------------------------------- */
/* The :root block below is the LIGHT theme (the default). Raw brand colors and
   the ink neutral scale are palette PRIMITIVES — identical in both themes.
   Only the *semantic* tokens (surfaces / text / borders / status pairs /
   elevation / focus) are re-mapped for dark mode further down. Components must
   only ever reference the semantic tokens so they follow the theme for free.
   Theme selection:
     • default            → follows the OS via prefers-color-scheme
     • data-tf-theme="dark"  on <html>, .tf-root, or any container → force dark
     • data-tf-theme="light" → force light (wins over an OS dark preference)     */
:root {
  color-scheme: light;

  /* Brand */
  --tf-red: #d22730;
  --tf-red-hover: #b31f27;
  --tf-red-active: #8f1a20;
  --tf-red-tint: #fdecec;
  --tf-black: #111920;
  --tf-white: #f5f8f7;

  /* Ink neutral scale (cool, tuned toward TerraFirma Black) */
  --tf-ink-900: #111920;
  --tf-ink-800: #1c262f;
  --tf-ink-700: #33414d;
  --tf-ink-600: #4a5b68;
  --tf-ink-500: #667783;
  --tf-ink-400: #8a99a3;
  --tf-ink-300: #b4bfc6;
  --tf-ink-200: #d5dde1;
  --tf-ink-100: #e7ecee;
  --tf-ink-50:  #f2f5f6;

  /* Semantic surfaces & text */
  --tf-bg: var(--tf-white);
  --tf-surface: #ffffff;
  --tf-surface-sunken: var(--tf-ink-50);
  --tf-surface-hover: var(--tf-ink-50);   /* interactive hover fill (rows, ghost/secondary btns) */
  --tf-border: var(--tf-ink-200);
  --tf-border-strong: var(--tf-ink-300);
  --tf-border-hover: var(--tf-ink-400);   /* border on hovered secondary controls */
  --tf-hairline: var(--tf-ink-100);        /* faint inner rules (table rows, calendar cells) */
  --tf-text: var(--tf-black);
  --tf-text-muted: var(--tf-ink-500);
  --tf-text-subtle: var(--tf-ink-400);
  --tf-text-inverse: var(--tf-white);

  /* Primary action = brand red */
  --tf-primary: var(--tf-red);
  --tf-primary-hover: var(--tf-red-hover);
  --tf-primary-active: var(--tf-red-active);
  --tf-primary-fg: #ffffff;
  --tf-focus-ring: rgba(210, 39, 48, 0.35);
  --tf-danger-ring: var(--tf-danger-bg);   /* error-input focus halo */

  /* Status palette (bg / fg pairs, brand-tuned) */
  --tf-success: #1f8f4e;   --tf-success-bg: #e7f5ec;   --tf-success-fg: #14663a;
  --tf-warning: #b7791f;   --tf-warning-bg: #fbf1dd;   --tf-warning-fg: #8a5a12;
  --tf-danger:  #d22730;   --tf-danger-bg:  #fdecec;   --tf-danger-fg:  #8f1a20;
  --tf-info:    #1d6fb8;   --tf-info-bg:    #e6f0f9;   --tf-info-fg:    #14507f;
  --tf-neutral: var(--tf-ink-500); --tf-neutral-bg: var(--tf-ink-100); --tf-neutral-fg: var(--tf-ink-700);

  /* Typography */
  --tf-font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tf-text-xs: 12px;
  --tf-text-sm: 13px;
  --tf-text-base: 14px;
  --tf-text-md: 15px;
  --tf-text-lg: 18px;
  --tf-text-xl: 22px;
  --tf-text-2xl: 28px;
  --tf-weight-regular: 400;
  --tf-weight-semibold: 600;
  --tf-weight-bold: 700;
  --tf-weight-black: 900;
  --tf-leading-tight: 1.2;
  --tf-leading-normal: 1.5;

  /* Spacing scale (4px base) */
  --tf-space-1: 4px;
  --tf-space-2: 8px;
  --tf-space-3: 12px;
  --tf-space-4: 16px;
  --tf-space-5: 20px;
  --tf-space-6: 24px;
  --tf-space-8: 32px;
  --tf-space-10: 40px;

  /* Responsive foundation.
     Canonical breakpoints — mobile ≤ 640px, tablet 641–1024px, desktop > 1024px.
     CSS media queries cannot read custom properties, so app CSS must hard-code
     these px values; the two tokens below exist for JS (matchMedia) and docs.
     The fluid tokens are re-mapped per breakpoint at the end of this sheet —
     build page shells with them and the frame adapts with no media queries. */
  --tf-bp-mobile: 640px;
  --tf-bp-tablet: 1024px;
  --tf-page-pad: var(--tf-space-8);   /* page-edge gutter: 32 → 24 → 16 */
  --tf-page-gap: var(--tf-space-6);   /* gap between page sections: 24 → 16 */
  --tf-page-max: 1200px;              /* centered content max-width on desktop */
  --tf-card-pad: var(--tf-space-5);   /* card/tile horizontal padding: 20 → 16 */
  --tf-tap-target: 44px;              /* minimum touch-target height (coarse pointers) */

  /* Radius */
  --tf-radius-sm: 4px;
  --tf-radius-md: 6px;
  --tf-radius-lg: 10px;
  --tf-radius-full: 999px;

  /* Elevation */
  --tf-shadow-sm: 0 1px 2px rgba(17, 25, 32, 0.06), 0 1px 1px rgba(17, 25, 32, 0.04);
  --tf-shadow-md: 0 2px 6px rgba(17, 25, 32, 0.08), 0 1px 2px rgba(17, 25, 32, 0.06);
  --tf-shadow-lg: 0 8px 24px rgba(17, 25, 32, 0.12);
}

/* --- Dark theme ----------------------------------------------------------- */
/* Only semantic tokens change; the brand red and the ink scale stay put.
   The same declarations are applied three ways so both automatic (OS) and
   explicit (attribute) theming work, and an explicit choice always wins:
     1. @media prefers-color-scheme: dark  → automatic, unless forced light
     2. [data-tf-theme="dark"]              → forced dark on any subtree
   A forced-light reset (defined after) re-asserts the light values so a
   data-tf-theme="light" container stays light even under an OS dark preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tf-theme="light"]) {
    color-scheme: dark;

    /* surfaces */
    --tf-bg: #0e151b;
    --tf-surface: #172129;
    --tf-surface-sunken: #10181e;
    --tf-surface-hover: #1f2b34;
    --tf-border: #2a3641;
    --tf-border-strong: #3a4854;
    --tf-border-hover: #46545f;
    --tf-hairline: #212d36;

    /* text */
    --tf-text: #eaeff1;
    --tf-text-muted: #9fadb7;
    --tf-text-subtle: #6f7e89;
    --tf-text-inverse: var(--tf-ink-900);

    /* primary — brand red holds; hover/active lighten (they can't darken on dark) */
    --tf-primary: var(--tf-red);
    --tf-primary-hover: #e24049;
    --tf-primary-active: #f26a71;
    --tf-primary-fg: #ffffff;
    --tf-focus-ring: rgba(226, 64, 73, 0.45);
    --tf-danger-ring: rgba(226, 64, 73, 0.40);

    /* status — accents brighten, backgrounds go to dark tints, foregrounds lift.
       --tf-danger keeps the brand-red hue, lifted only for legibility on dark. */
    --tf-success: #35c06e;  --tf-success-bg: #12291d;  --tf-success-fg: #77dca2;
    --tf-warning: #d29a32;  --tf-warning-bg: #2b2113;  --tf-warning-fg: #ecc061;
    --tf-danger:  #e24049;  --tf-danger-bg:  #2c1517;  --tf-danger-fg:  #f2969b;
    --tf-info:    #3f9fe0;  --tf-info-bg:    #10202e;  --tf-info-fg:    #7ec1f0;
    --tf-neutral: var(--tf-ink-400); --tf-neutral-bg: #232f39; --tf-neutral-fg: #c4ced4;

    /* elevation — deeper, blacker shadows read on a dark canvas */
    --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.30);
    --tf-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
    --tf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60);
  }
}

[data-tf-theme="dark"] {
  color-scheme: dark;

  /* surfaces */
  --tf-bg: #0e151b;
  --tf-surface: #172129;
  --tf-surface-sunken: #10181e;
  --tf-surface-hover: #1f2b34;
  --tf-border: #2a3641;
  --tf-border-strong: #3a4854;
  --tf-border-hover: #46545f;
  --tf-hairline: #212d36;

  /* text */
  --tf-text: #eaeff1;
  --tf-text-muted: #9fadb7;
  --tf-text-subtle: #6f7e89;
  --tf-text-inverse: var(--tf-ink-900);

  /* primary */
  --tf-primary: var(--tf-red);
  --tf-primary-hover: #e24049;
  --tf-primary-active: #f26a71;
  --tf-primary-fg: #ffffff;
  --tf-focus-ring: rgba(226, 64, 73, 0.45);
  --tf-danger-ring: rgba(226, 64, 73, 0.40);

  /* status */
  --tf-success: #35c06e;  --tf-success-bg: #12291d;  --tf-success-fg: #77dca2;
  --tf-warning: #d29a32;  --tf-warning-bg: #2b2113;  --tf-warning-fg: #ecc061;
  --tf-danger:  #e24049;  --tf-danger-bg:  #2c1517;  --tf-danger-fg:  #f2969b;
  --tf-info:    #3f9fe0;  --tf-info-bg:    #10202e;  --tf-info-fg:    #7ec1f0;
  --tf-neutral: var(--tf-ink-400); --tf-neutral-bg: #232f39; --tf-neutral-fg: #c4ced4;

  /* elevation */
  --tf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 1px rgba(0, 0, 0, 0.30);
  --tf-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.40);
  --tf-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60);
}

/* Forced-light reset: re-assert the light semantic tokens so a
   data-tf-theme="light" region stays light even when the OS prefers dark.
   Placed last so it wins the cascade over the media block above. */
[data-tf-theme="light"] {
  color-scheme: light;

  --tf-bg: var(--tf-white);
  --tf-surface: #ffffff;
  --tf-surface-sunken: var(--tf-ink-50);
  --tf-surface-hover: var(--tf-ink-50);
  --tf-border: var(--tf-ink-200);
  --tf-border-strong: var(--tf-ink-300);
  --tf-border-hover: var(--tf-ink-400);
  --tf-hairline: var(--tf-ink-100);
  --tf-text: var(--tf-black);
  --tf-text-muted: var(--tf-ink-500);
  --tf-text-subtle: var(--tf-ink-400);
  --tf-text-inverse: var(--tf-white);

  --tf-primary: var(--tf-red);
  --tf-primary-hover: var(--tf-red-hover);
  --tf-primary-active: var(--tf-red-active);
  --tf-primary-fg: #ffffff;
  --tf-focus-ring: rgba(210, 39, 48, 0.35);
  --tf-danger-ring: var(--tf-danger-bg);

  --tf-success: #1f8f4e;  --tf-success-bg: #e7f5ec;  --tf-success-fg: #14663a;
  --tf-warning: #b7791f;  --tf-warning-bg: #fbf1dd;  --tf-warning-fg: #8a5a12;
  --tf-danger:  #d22730;  --tf-danger-bg:  #fdecec;  --tf-danger-fg:  #8f1a20;
  --tf-info:    #1d6fb8;  --tf-info-bg:    #e6f0f9;  --tf-info-fg:    #14507f;
  --tf-neutral: var(--tf-ink-500); --tf-neutral-bg: var(--tf-ink-100); --tf-neutral-fg: var(--tf-ink-700);

  --tf-shadow-sm: 0 1px 2px rgba(17, 25, 32, 0.06), 0 1px 1px rgba(17, 25, 32, 0.04);
  --tf-shadow-md: 0 2px 6px rgba(17, 25, 32, 0.08), 0 1px 2px rgba(17, 25, 32, 0.06);
  --tf-shadow-lg: 0 8px 24px rgba(17, 25, 32, 0.12);
}

/* Scope a comfortable default type environment onto DS roots without
   leaking a global reset onto a host app that may set its own. */
.tf-root,
[class^='tf-'],
[class*=' tf-'] {
  font-family: var(--tf-font-sans);
}
.tf-root {
  color: var(--tf-text);
  font-size: var(--tf-text-base);
  line-height: var(--tf-leading-normal);
  background: var(--tf-bg);
}

/* --- Button --------------------------------------------------------------- */
.tf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-space-2);
  font-family: var(--tf-font-sans);
  font-weight: var(--tf-weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--tf-radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}
.tf-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--tf-focus-ring);
}
.tf-btn:disabled,
.tf-btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
/* sizes */
.tf-btn--sm { font-size: var(--tf-text-sm); padding: 5px 10px; height: 30px; }
.tf-btn--md { font-size: var(--tf-text-base); padding: 7px 14px; height: 36px; }
.tf-btn--lg { font-size: var(--tf-text-md); padding: 10px 18px; height: 44px; }
.tf-btn--block { display: flex; width: 100%; }
/* variants */
.tf-btn--primary { background: var(--tf-primary); color: var(--tf-primary-fg); }
.tf-btn--primary:hover { background: var(--tf-primary-hover); }
.tf-btn--primary:active { background: var(--tf-primary-active); }
.tf-btn--secondary { background: var(--tf-surface); color: var(--tf-text); border-color: var(--tf-border-strong); }
.tf-btn--secondary:hover { background: var(--tf-surface-hover); border-color: var(--tf-border-hover); }
.tf-btn--ghost { background: transparent; color: var(--tf-text); }
.tf-btn--ghost:hover { background: var(--tf-surface-hover); }
.tf-btn--danger { background: var(--tf-danger); color: #fff; }
.tf-btn--danger:hover { background: var(--tf-red-hover); }

/* --- Badge ---------------------------------------------------------------- */
.tf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--tf-font-sans);
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-semibold);
  line-height: 1;
  padding: 4px 9px;
  border-radius: var(--tf-radius-full);
  white-space: nowrap;
}
.tf-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--tf-radius-full);
  background: currentColor;
  flex: none;
}
.tf-badge--neutral { background: var(--tf-neutral-bg); color: var(--tf-neutral-fg); }
.tf-badge--success { background: var(--tf-success-bg); color: var(--tf-success-fg); }
.tf-badge--warning { background: var(--tf-warning-bg); color: var(--tf-warning-fg); }
.tf-badge--danger  { background: var(--tf-danger-bg);  color: var(--tf-danger-fg); }
.tf-badge--info    { background: var(--tf-info-bg);    color: var(--tf-info-fg); }

/* --- Card ----------------------------------------------------------------- */
.tf-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow-sm);
  overflow: hidden;
}
.tf-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-space-3);
  padding: var(--tf-space-4) var(--tf-card-pad);
  border-bottom: 1px solid var(--tf-border);
}
.tf-card__title {
  font-size: var(--tf-text-md);
  font-weight: var(--tf-weight-bold);
  color: var(--tf-text);
  margin: 0;
}
.tf-card__subtitle {
  font-size: var(--tf-text-sm);
  color: var(--tf-text-muted);
  margin: 2px 0 0;
}
.tf-card__body { padding: var(--tf-card-pad); }
.tf-card__footer {
  padding: var(--tf-space-3) var(--tf-card-pad);
  border-top: 1px solid var(--tf-border);
  background: var(--tf-surface-sunken);
}

/* --- StatTile ------------------------------------------------------------- */
.tf-stat {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow-sm);
  padding: var(--tf-space-4) var(--tf-card-pad);
  min-width: 180px;
}
.tf-stat__label {
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tf-text-muted);
  margin: 0 0 var(--tf-space-2);
}
.tf-stat__value {
  font-size: var(--tf-text-2xl);
  font-weight: var(--tf-weight-black);
  line-height: var(--tf-leading-tight);
  color: var(--tf-text);
}
.tf-stat__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--tf-space-2);
  font-size: var(--tf-text-sm);
}
.tf-stat__delta { font-weight: var(--tf-weight-semibold); display: inline-flex; align-items: center; gap: 2px; }
.tf-stat__delta--up { color: var(--tf-success); }
.tf-stat__delta--down { color: var(--tf-danger); }
.tf-stat__delta--flat { color: var(--tf-text-muted); }
.tf-stat__caption { color: var(--tf-text-muted); }

/* --- Table ---------------------------------------------------------------- */
.tf-table-wrap {
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  /* scroll, don't clip: wide tables pan horizontally on narrow viewports */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--tf-surface);
}
.tf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tf-text-base);
}
.tf-table thead th {
  text-align: left;
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-bold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tf-text-muted);
  background: var(--tf-surface-sunken);
  padding: var(--tf-space-3) var(--tf-space-4);
  border-bottom: 1px solid var(--tf-border);
  white-space: nowrap;
}
.tf-table tbody td {
  padding: var(--tf-space-3) var(--tf-space-4);
  border-bottom: 1px solid var(--tf-hairline);
  color: var(--tf-text);
  vertical-align: middle;
}
.tf-table tbody tr:last-child td { border-bottom: none; }
.tf-table--hover tbody tr:hover { background: var(--tf-surface-hover); }
.tf-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- PageHeader ----------------------------------------------------------- */
.tf-pageheader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tf-space-4);
  padding-bottom: var(--tf-space-4);
  border-bottom: 1px solid var(--tf-border);
}
.tf-pageheader__eyebrow {
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tf-primary);
  margin: 0 0 4px;
}
.tf-pageheader__title {
  font-size: var(--tf-text-xl);
  font-weight: var(--tf-weight-black);
  line-height: var(--tf-leading-tight);
  color: var(--tf-text);
  margin: 0;
}
.tf-pageheader__subtitle {
  font-size: var(--tf-text-base);
  color: var(--tf-text-muted);
  margin: 6px 0 0;
}
.tf-pageheader__actions { display: flex; align-items: center; gap: var(--tf-space-2); flex: none; }

/* --- Input ---------------------------------------------------------------- */
.tf-field { display: flex; flex-direction: column; gap: 6px; }
.tf-field__label {
  font-size: var(--tf-text-sm);
  font-weight: var(--tf-weight-semibold);
  color: var(--tf-text);
}
.tf-field__hint { font-size: var(--tf-text-xs); color: var(--tf-text-muted); }
.tf-field__hint--error { color: var(--tf-danger-fg); }
.tf-input {
  /* border-box: width:100% must include padding/border or the field overflows
     its container (Chrome UA leaves text inputs content-box) */
  box-sizing: border-box;
  font-family: var(--tf-font-sans);
  font-size: var(--tf-text-base);
  color: var(--tf-text);
  background: var(--tf-surface);
  border: 1px solid var(--tf-border-strong);
  border-radius: var(--tf-radius-md);
  padding: 8px 12px;
  width: 100%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.tf-input::placeholder { color: var(--tf-text-subtle); }
.tf-input:focus {
  outline: none;
  border-color: var(--tf-primary);
  box-shadow: 0 0 0 3px var(--tf-focus-ring);
}
.tf-input:disabled { background: var(--tf-surface-sunken); color: var(--tf-text-subtle); cursor: not-allowed; }
.tf-input--error { border-color: var(--tf-danger); }
.tf-input--error:focus { box-shadow: 0 0 0 3px var(--tf-danger-ring); }

/* --- Avatar --------------------------------------------------------------- */
.tf-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tf-radius-full);
  background: var(--tf-ink-700);
  color: #fff;
  font-weight: var(--tf-weight-bold);
  overflow: hidden;
  flex: none;
  line-height: 1;
}
.tf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tf-avatar--sm { width: 28px; height: 28px; font-size: var(--tf-text-xs); }
.tf-avatar--md { width: 36px; height: 36px; font-size: var(--tf-text-sm); }
.tf-avatar--lg { width: 48px; height: 48px; font-size: var(--tf-text-md); }
.tf-avatar--brand { background: var(--tf-primary); }

/* --- CalendarShell -------------------------------------------------------- */
.tf-cal {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius-lg);
  box-shadow: var(--tf-shadow-sm);
  overflow: hidden;
}
.tf-cal__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-space-3);
  padding: var(--tf-space-3) var(--tf-space-4);
  border-bottom: 1px solid var(--tf-border);
}
.tf-cal__title { font-size: var(--tf-text-md); font-weight: var(--tf-weight-bold); color: var(--tf-text); }
/* minmax(0,1fr): keep the 7 columns equal — nowrap event chips must truncate,
   never widen their column past the viewport */
.tf-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tf-cal__dow {
  padding: var(--tf-space-2);
  text-align: center;
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tf-text-muted);
  background: var(--tf-surface-sunken);
  border-bottom: 1px solid var(--tf-border);
}
.tf-cal__cell {
  min-height: 92px;
  padding: 6px;
  border-right: 1px solid var(--tf-hairline);
  border-bottom: 1px solid var(--tf-hairline);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tf-cal__cell:nth-child(7n) { border-right: none; }
.tf-cal__daynum { font-size: var(--tf-text-xs); font-weight: var(--tf-weight-semibold); color: var(--tf-text-muted); }
.tf-cal__cell--today .tf-cal__daynum {
  color: var(--tf-primary-fg);
  background: var(--tf-primary);
  border-radius: var(--tf-radius-full);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tf-cal__cell--muted { background: var(--tf-surface-sunken); }
.tf-cal__event {
  font-size: var(--tf-text-xs);
  font-weight: var(--tf-weight-semibold);
  padding: 3px 6px;
  border-radius: var(--tf-radius-sm);
  /* default track = brand red, routed through the theme-aware danger pair */
  border-left: 3px solid var(--tf-danger);
  background: var(--tf-danger-bg);
  color: var(--tf-danger-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-cal__event--sales   { border-left-color: var(--tf-info);    background: var(--tf-info-bg);    color: var(--tf-info-fg); }
.tf-cal__event--ops     { border-left-color: var(--tf-success); background: var(--tf-success-bg); color: var(--tf-success-fg); }
.tf-cal__event--service { border-left-color: var(--tf-warning); background: var(--tf-warning-bg); color: var(--tf-warning-fg); }

/* ==========================================================================
   Responsive & mobile
   Every TerraFirma screen ships in three widths: mobile ≤ 640px,
   tablet 641–1024px, desktop > 1024px (canonical values — keep media queries
   in app CSS on these numbers; see --tf-bp-* in :root).
   Two mechanisms:
     1. Fluid tokens — --tf-page-pad / --tf-page-gap / --tf-card-pad re-map
        per breakpoint below, so token-built layouts adapt automatically.
     2. Component behavior — the rules below reshape components on narrow
        viewports and grow touch targets on coarse pointers.
   ========================================================================== */

/* --- Touch ergonomics (any touch-first device, regardless of width) ------- */
@media (pointer: coarse) {
  .tf-btn--sm { min-height: 36px; }
  .tf-btn--md { min-height: var(--tf-tap-target); }
  .tf-btn--lg { min-height: 48px; }
  .tf-input   { min-height: var(--tf-tap-target); }
}

/* --- Tablet and down ------------------------------------------------------ */
@media (max-width: 1024px) {
  :root {
    --tf-page-pad: var(--tf-space-6);
  }
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    --tf-page-pad: var(--tf-space-4);
    --tf-page-gap: var(--tf-space-4);
    --tf-card-pad: var(--tf-space-4);
  }

  /* PageHeader: actions drop below the title block, full width */
  .tf-pageheader {
    flex-direction: column;
    align-items: stretch;
    gap: var(--tf-space-3);
  }
  .tf-pageheader__actions { flex-wrap: wrap; }

  /* Inputs: ≥16px type or iOS Safari zooms the page on focus */
  .tf-input { font-size: max(var(--tf-text-base), 16px); }

  /* StatTiles: two-up on a phone instead of one monolithic column */
  .tf-stat { min-width: 140px; }

  /* Table stacked mode (opt-in via the Table `stack` prop): each row becomes
     a label/value card; labels come from the column headers via data-label */
  .tf-table--stack thead { display: none; }
  .tf-table--stack tbody tr {
    display: block;
    padding: var(--tf-space-2) 0;
    border-bottom: 1px solid var(--tf-hairline);
  }
  .tf-table--stack tbody tr:last-child { border-bottom: none; }
  .tf-table--stack tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tf-space-4);
    padding: 6px var(--tf-space-4);
    border-bottom: none;
    text-align: right;
  }
  .tf-table--stack tbody td::before {
    content: attr(data-label);
    font-size: var(--tf-text-xs);
    font-weight: var(--tf-weight-bold);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--tf-text-muted);
    text-align: left;
  }
  .tf-table--stack tbody td:not([data-label])::before { content: none; }

  /* Calendar: tighter cells; chips stay color-tracked and truncate */
  .tf-cal__toolbar { flex-wrap: wrap; }
  .tf-cal__cell { min-height: 56px; padding: 4px; gap: 3px; }
  .tf-cal__dow { padding: var(--tf-space-1) 2px; letter-spacing: 0; }
  .tf-cal__event { padding: 2px 4px; border-left-width: 2px; }
}