/* Source: TTC BRAND.pdf. Neutral shades and dark surfaces are UI adaptations. */
@font-face { font-family: Lora; src: url(https://api.tastethecity.ca/brand/fonts/Lora-Regular.woff2) format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }
@font-face { font-family: Lato; src: url(https://api.tastethecity.ca/brand/fonts/Lato-Regular.woff2) format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Lato; src: url(https://api.tastethecity.ca/brand/fonts/Lato-Bold.woff2) format('woff2'); font-style: normal; font-weight: 600 900; font-display: swap; }
@font-face { font-family: Inter; src: url(https://api.tastethecity.ca/brand/fonts/Inter-Variable.woff2) format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url(https://api.tastethecity.ca/brand/fonts/JetBrainsMono-Variable.woff2) format('woff2'); font-style: normal; font-weight: 100 800; font-display: swap; }
.dev-admin-root {
  --ttc-font-heading: Lora, Georgia, serif;
  --ttc-font-body: Lato, Arial, sans-serif;
  --ttc-font-ui: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ttc-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --admin-neutral-50: 248 247 241; --admin-neutral-100: 239 239 230; --admin-neutral-200: 220 224 213;
  --admin-neutral-300: 196 203 189; --admin-neutral-400: 153 162 142; --admin-neutral-500: 105 115 99;
  --admin-neutral-600: 89 103 81; --admin-neutral-700: 70 84 70; --admin-neutral-800: 52 63 53;
  --admin-neutral-900: 34 42 36; --admin-neutral-950: 25 25 25;
  --admin-sage-50: 242 245 237; --admin-sage-100: 228 235 221; --admin-sage-200: 201 216 191;
  --admin-sage-300: 179 197 165; --admin-sage-400: 149 171 137; --admin-sage-500: 118 148 103;
  --admin-sage-600: 89 118 75; --admin-sage-700: 65 92 54; --admin-sage-800: 51 76 56;
  --admin-sage-900: 37 57 44; --admin-sage-950: 28 43 33;
  --brand-forest: #25392c; --brand-terracotta: #b0513c; --brand-peach: #d58168; --brand-sage: #95ab89;
  --brand-canvas: #f8f7f1; --brand-panel: #fff; --brand-soft: #efefe6; --brand-ink: #191919;
  --brand-muted: #596751; --brand-line: #dce0d5; --brand-accent: #25392c; --brand-focus: #b0513c;
  --brand-row-highlight: #c9d8bf;
  /* Message direction row tints: cool blue for customer replies, warm stone for
     our sends. Neither reuses the semantic red/amber/green or the sage highlight. */
  --admin-row-inbound-surface: #e8f0fb; --admin-row-inbound-accent: #3b6fb6;
  --admin-row-outbound-surface: #f3f1ea; --admin-row-outbound-accent: #a39c86;
  /* Operational meaning stays separate from the forest/sage identity palette. */
  --admin-success-text: #166534; --admin-success-surface: #f0fdf4; --admin-success-line: #15803d;
  --admin-warning-text: #854d0e; --admin-warning-surface: #fefce8; --admin-warning-line: #a16207;
  --admin-danger: #b91c1c; --admin-danger-hover: #7f1d1d; --admin-on-danger: #fff;
  --admin-primary: 37 57 44; --admin-primary-hover: 28 43 33; --brand-on-primary: #fff; --brand-field-line: #87917e;
  --admin-status-danger-text: #991b1b;
  --admin-status-danger-surface: #fef2f2;
  --admin-status-danger-line: #b91c1c;
  --admin-status-info-text: #334155;
  --admin-status-info-surface: #ffffff;
  --admin-status-info-line: #64748b;
  --admin-status-neutral-text: #374151;
  --admin-status-neutral-surface: #f3f4f6;
  --admin-status-neutral-line: #6b7280;
  color-scheme: light;
}
.dev-admin-root.dark {
  --brand-canvas: #191919; --brand-panel: #222a24; --brand-soft: #343f35; --brand-ink: #f8f7f1;
  --brand-muted: #b3bca9; --brand-line: #465446; --brand-accent: #b3c5a5; --brand-focus: #d58168;
  --brand-row-highlight: #415c36;
  --admin-row-inbound-surface: #1c2a3d; --admin-row-inbound-accent: #7aa7e0;
  --admin-row-outbound-surface: #2c302a; --admin-row-outbound-accent: #8f8a78;
  --admin-success-text: #bbf7d0; --admin-success-surface: #123321; --admin-success-line: #4ade80;
  --admin-warning-text: #fef08a; --admin-warning-surface: #382c10; --admin-warning-line: #eab308;
  --admin-danger: #fca5a5; --admin-danger-hover: #fee2e2; --admin-on-danger: #450a0a;
  --admin-primary: 149 171 137; --admin-primary-hover: 179 197 165; --brand-on-primary: #191919; --brand-field-line: #87917e;
  --admin-status-danger-text: #fecaca;
  --admin-status-danger-surface: #3b1717;
  --admin-status-danger-line: #f87171;
  --admin-status-info-text: #f1f5f9;
  --admin-status-info-surface: #1e293b;
  --admin-status-info-line: #94a3b8;
  --admin-status-neutral-text: #e5e7eb;
  --admin-status-neutral-surface: #292e37;
  --admin-status-neutral-line: #9ca3af;
  color-scheme: dark;
}
.dev-admin, .dev-admin-auth { font-family: var(--ttc-font-body); font-optical-sizing: auto; background: var(--brand-canvas); color: var(--brand-ink); }
/* Capture final colours together, without control hover transitions lagging. */
.dev-admin-root.theme-crossfade *,
.dev-admin-root.theme-crossfade *::before,
.dev-admin-root.theme-crossfade *::after { transition: none !important; }
.dev-admin-root.theme-crossfade::view-transition-group(root),
.dev-admin-root.theme-crossfade::view-transition-old(root),
.dev-admin-root.theme-crossfade::view-transition-new(root) {
  animation-duration: 400ms;
  animation-timing-function: ease-in-out;
}
.dev-admin-root.theme-crossfade::view-transition { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .dev-admin-root.theme-crossfade::view-transition-group(root),
  .dev-admin-root.theme-crossfade::view-transition-old(root),
  .dev-admin-root.theme-crossfade::view-transition-new(root) { animation: none; }
}
/* Brand character belongs in page titles and dashboard headings, not just
   marketing screens. Supporting UI fonts must not flatten that hierarchy. */
.dev-admin h1, .dev-admin .admin-page-title, .dev-admin .admin-record-header h1, .dev-admin .admin-page-header h1,
.dev-admin .admin-editorial-heading, .dev-admin .ttc-dashboard .ttc-dash-hero h2, .dev-admin .ttc-dashboard .ttc-dash-panel h2 { font-family: var(--ttc-font-heading); font-weight: 600; letter-spacing: -.025em; }
.dev-admin .admin-prose, .dev-admin [data-font-role='prose'] { font-family: var(--ttc-font-body); }
/* Controls and their labels remain UI text even when nested in editorial copy. */
.dev-admin :is(button, input, select, textarea, label, summary, [role='button'], [role='option'], nav, th, dt, .admin-badge, .admin-pagination, .admin-pagination-button, .admin-table-action, .admin-page-header-actions, .admin-back-link, .admin-form-hint, .admin-select-panel, .admin-calendar),
.dev-admin .admin-prose :is(button, input, select, textarea, label),
.dev-admin .ttc-dashboard :is(.ttc-dash-eyebrow, .ttc-dash-stat-top, .ttc-dash-day-label, .ttc-dash-legend, .ttc-dash-text-link),
.dev-admin-auth :is(label, button, .auth-topbar, .auth-help, .auth-message) { font-family: var(--ttc-font-ui); }
.dev-admin :is([data-table-column='number'], [data-table-column='date']) { font-family: var(--ttc-font-ui); font-variant-numeric: tabular-nums lining-nums; }
.ttc-dashboard { font-variant-numeric: tabular-nums lining-nums; }
.dev-admin ::selection, .dev-admin-auth ::selection { background: var(--theme-brand-d5816866, #d5816866); }
.dev-admin [class~='bg-brand-primary'] { color: var(--brand-on-primary); }

/* Dim unavailable controls once; fieldsets and optgroups disable their children. */
:is(.dev-admin, .dev-admin-auth) :is(:disabled, [aria-disabled='true']):not(fieldset, optgroup) {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Checkbox and radio captions share the state without dimming the input twice. */
:is(.dev-admin, .dev-admin-auth) label:has(input:is([type='checkbox'], [type='radio']):disabled) {
  cursor: not-allowed;
}
:is(.dev-admin, .dev-admin-auth) label > input:is([type='checkbox'], [type='radio']):disabled ~ span {
  opacity: 0.5;
}

/* Tailwind Forms paints selections with currentColor, not accent-color. */
.dev-admin input[type='checkbox'] {
  color: rgb(var(--admin-primary));
  accent-color: rgb(var(--admin-primary));
  border-color: var(--brand-field-line);
  background-color: var(--brand-panel);
}
.dev-admin input[type='checkbox']:is(:checked, :indeterminate) {
  background-color: currentColor;
  border-color: transparent;
}
.dev-admin input[type='checkbox']:focus {
  --tw-ring-color: rgb(var(--admin-primary));
  --tw-ring-offset-color: var(--brand-panel);
}
/* Match the dark theme's button foreground; keep system high-contrast marks. */
@media (forced-colors: none) {
  .dev-admin-root :is(.dev-admin, .dev-admin-auth) input[type='checkbox']:checked { background-image: var(--admin-checkbox-checked-image); }
  .dev-admin-root :is(.dev-admin, .dev-admin-auth) input[type='checkbox']:indeterminate { background-image: var(--admin-checkbox-indeterminate-image); }
  .dev-admin-root .dev-admin select { background-image: var(--admin-select-chevron-image); }
  .dev-admin-auth input[type='checkbox'] { appearance: none; border: 1px solid var(--brand-field-line); border-radius: 3px; background: var(--brand-panel) no-repeat center / 100% 100%; }
  .dev-admin-auth input[type='checkbox']:checked { background-color: var(--brand-terracotta); border-color: transparent; }
}

/* A single staff sign-in card. Its solid background matches the raster logo. */
.dev-admin-auth { margin: 0; min-height: 100svh; padding: clamp(20px, 4vw, 64px); display: grid; place-items: center; background: radial-gradient(ellipse at 8% 8%, var(--theme-brand-95ab8926, #95ab8926), transparent 55%), radial-gradient(ellipse at 95% 95%, var(--theme-brand-d581681c, #d581681c), transparent 50%), var(--brand-canvas); }
/* Include the body's padding inside its viewport height, so the sign-in
   group centers in the visible page rather than an oversized scroll area. */
.dev-admin-auth, .dev-admin-auth *, .dev-admin-auth *::before, .dev-admin-auth *::after { box-sizing: border-box; }
.auth-wrap { width: min(100%, 440px); }
.auth-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; color: var(--brand-muted); font-size: 13px; }
.auth-topbar p { margin: 0; }
.admin-theme-icon { width: 20px; height: 20px; }
.admin-theme-icon-moon { display: block; }
.admin-theme-icon-sun { display: none; }
.dark .admin-theme-icon-moon { display: none; }
.dark .admin-theme-icon-sun { display: block; }
.auth-theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--brand-line); border-radius: 999px; padding: 9px 14px; background: var(--brand-panel); color: var(--brand-ink); font: inherit; cursor: pointer; }
.auth-theme-toggle svg { width: 16px; height: 16px; }
/* These card-local colours stay readable on forest in either page theme. */
.auth-shell {
  --admin-success-text: var(--theme-brand-86efac, #86efac); --admin-success-surface: var(--theme-brand-052e16, #052e16);
  --admin-warning-text: var(--theme-brand-fcd34d, #fcd34d); --admin-warning-surface: var(--theme-brand-451a03, #451a03);
  --brand-canvas: var(--theme-brand-1c2b21, #1c2b21); --brand-panel: var(--theme-brand-25392c, #25392c); --brand-soft: var(--theme-brand-334c38, #334c38);
  --brand-ink: var(--theme-brand-f8f7f1, #f8f7f1); --brand-muted: var(--theme-brand-c9d8bf, #c9d8bf); --brand-line: var(--theme-brand-60755e, #60755e);
  --brand-field-line: var(--theme-brand-95ab89, #95ab89); --brand-focus: var(--theme-brand-d58168, #d58168);
  padding: clamp(24px, 6vw, 40px); border: 1px solid var(--theme-brand-465446, #465446); border-radius: 20px;
  background: var(--theme-brand-25392c, #25392c); color: var(--brand-ink); color-scheme: dark;
  box-shadow: 0 24px 70px -35px var(--theme-brand-25392c55, #25392c55);
}
.auth-logo { display: block; width: 144px; height: 144px; margin: 0 auto 24px; }
.auth-form-panel { min-width: 0; }
.auth-form-panel h1 { margin: 0 0 12px; font: 600 clamp(29px, 3vw, 36px)/1.2 var(--ttc-font-heading); letter-spacing: -.025em; }
.auth-intro { margin: 0 0 32px; color: var(--brand-muted); font-size: 15px; line-height: 1.65; }
.auth-form-panel label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.auth-field { margin-bottom: 22px; }
.auth-form-panel input[type=email], .auth-form-panel input[type=password] { display: block; width: 100%; min-height: 48px; border: 1px solid var(--brand-field-line); border-radius: 8px; padding: 12px 14px; background: var(--brand-canvas); color: var(--brand-ink); font: 16px var(--ttc-font-ui); }
.auth-form-panel input::placeholder { color: var(--brand-muted); opacity: 1; }
.auth-form-panel .remember-me { display: flex; align-items: center; gap: 10px; margin: 4px 0 26px; }
.remember-me input { width: 17px; height: 17px; margin: 0; accent-color: var(--brand-terracotta); }
.auth-form-panel .remember-me label { margin: 0; font-weight: 400; color: var(--brand-muted); }
.auth-submit { display: block; width: 100%; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 8px; background: var(--theme-brand-b0513c, #b0513c); color: var(--theme-brand-ffffff, #fff); font: 700 15px var(--ttc-font-ui); cursor: pointer; box-shadow: 0 6px 16px -10px var(--theme-brand-b0513c, #b0513c); transition: background .15s; }
.auth-submit:hover { background: var(--theme-brand-954331, #954331); }
.auth-submit:disabled { opacity: .65; cursor: wait; }
.auth-secondary { margin-top: 20px; background: var(--brand-canvas); border: 1px solid var(--brand-field-line); color: var(--brand-ink); box-shadow: none; }
.auth-secondary:hover { background: var(--brand-soft); }
/* Provider marks keep their official colours rather than inheriting TTC themes. */
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(https://api.tastethecity.ca/brand/fonts/GoogleSans-Medium.woff2) format('woff2'); }
.auth-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; background: #fff; border-color: #747775; color: #1f1f1f; font: 500 14px/20px 'Google Sans', sans-serif; }
.auth-google:hover { background: #f2f2f2; }
.auth-provider-icon { display: block; flex: 0 0 auto; width: 20px; height: auto; }
.auth-link { border: 0; padding: 0; background: transparent; color: var(--brand-ink); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dev-admin-auth :is(input, button, a):focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.auth-help { margin: 24px 0 0; font-size: 12px; line-height: 1.6; color: var(--brand-muted); text-align: center; }
.auth-help + .auth-help { margin-top: 8px; }
.auth-help a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.auth-error-list { margin: 0; padding-left: 18px; }
.auth-message { padding: 12px 14px; margin-bottom: 22px; border: 1px solid var(--brand-line); border-radius: 8px; background: var(--brand-soft); color: var(--brand-ink); font-size: 14px; line-height: 1.5; }
.auth-message-alert { color: var(--admin-warning-text); background: var(--admin-warning-surface); border-color: var(--admin-warning-line); border-left-width: 3px; }
.auth-message-notice { color: var(--admin-success-text); background: var(--admin-success-surface); border-color: var(--admin-success-line); border-left-width: 3px; }
/* Values, not surrounding labels, opt into exact-character typography. */
.dev-admin-root :is(.dev-admin, .dev-admin-auth) :is(
  .admin-mono, .font-mono, code, pre, [data-font-role='mono'],
  a[href^='mailto:'], a[href^='tel:'], input[type='email'], input[type='tel'],
  input[name$='[slug]'], input[name$='_code]'], input[name$='_id]']
) {
  font-family: var(--ttc-font-mono);
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
  overflow-wrap: anywhere;
}
.dev-admin td[data-font-role='mono']::before { font-family: var(--ttc-font-ui); }
.dev-admin-root .dev-admin th[data-font-role] { font-family: var(--ttc-font-ui); }
@media (prefers-reduced-motion: reduce) { .auth-submit { transition: none; } }

/* A cancelled leave attempt needs a visible path back to the editor actions. */
.dev-admin .admin-form-actions[data-unsaved-attention='true'] {
  outline: 2px solid var(--admin-warning-line);
  outline-offset: 4px;
  border-radius: 6px;
}
.dev-admin .admin-form-actions[data-unsaved-attention='true'] :is(a, button, input[type='submit']),
.dev-admin [data-unsaved-attention-button='true'] {
  animation: admin-unsaved-action-pulse 0.65s ease-in-out 3;
}
@keyframes admin-unsaved-action-pulse {
  50% { box-shadow: 0 0 0 5px var(--admin-warning-line); }
}
@media (prefers-reduced-motion: reduce) {
  .dev-admin .admin-form-actions[data-unsaved-attention='true'] :is(a, button, input[type='submit']),
  .dev-admin [data-unsaved-attention-button='true'] { animation: none; }
}

/* Shared menu triggers use a quiet hover and a thin keyboard-only focus ring. */
.dev-admin .admin-menu-trigger { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; outline: none; box-shadow: none; }
.dev-admin .admin-menu-trigger::-webkit-details-marker { display: none; }
.dev-admin .admin-menu-trigger:focus { outline: none; box-shadow: none; }
.dev-admin .admin-menu-trigger:focus-visible { outline: 1px solid var(--brand-accent); outline-offset: 2px; box-shadow: none; }
.dev-admin .admin-menu-trigger-icon { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; color: var(--brand-muted); background: transparent; }
.dev-admin .admin-menu-trigger-icon:is(:hover, :focus-visible), .dev-admin details[open] > .admin-menu-trigger-icon { color: var(--brand-accent); background: var(--brand-soft); }