/*
 * TRILHO Design System v1 — opt-in, vanilla/PWA.
 * Load fonts.css before this file. Apply .trilho-ds to a dedicated root.
 * No legacy aliases, global reset, positioning engine or interaction logic.
 * Reference: field-guide-crafted d5ec77b, src/styles.css.
 */
.trilho-ds {
  --trilho-canvas: oklch(0.938 0.017 85.5);
  --trilho-canvas-deep: oklch(0.898 0.024 82);
  --trilho-surface: oklch(0.968 0.014 85);
  --trilho-ink: oklch(0.235 0.014 55);
  --trilho-forest: oklch(0.212 0.026 148);
  --trilho-forest-hover: oklch(0.262 0.03 148);
  --trilho-forest-active: oklch(0.172 0.022 148);
  --trilho-rust: oklch(0.585 0.163 45);
  --trilho-muted: oklch(0.462 0.018 60);
  --trilho-border: oklch(0.235 0.014 55 / 18%);
  --trilho-control-border: var(--trilho-muted);
  --trilho-destructive: oklch(0.512 0.185 27);
  --trilho-success: oklch(0.402 0.045 128);
  --trilho-info: #365969;
  --trilho-font-ui: "DM Sans", system-ui, sans-serif;
  --trilho-font-editorial: "Fraunces", Georgia, serif;
  --trilho-text-sm: .875rem;
  --trilho-text-base: 1rem;
  --trilho-text-lg: 1.25rem;
  --trilho-text-title: clamp(2rem, 5vw, 3.5rem);
  --trilho-leading: 1.5;
  --trilho-space-0: 0;
  --trilho-space-1: .25rem;
  --trilho-space-2: .5rem;
  --trilho-space-3: .75rem;
  --trilho-space-4: 1rem;
  --trilho-space-5: 1.25rem;
  --trilho-space-6: 1.5rem;
  --trilho-space-8: 2rem;
  --trilho-space-12: 3rem;
  --trilho-space-16: 4rem;
  --trilho-border-width: 1px;
  --trilho-border-strong: 2px;
  --trilho-radius: 0;
  --trilho-radius-control: 8px;
  --trilho-touch: 44px;
  --trilho-touch-large: 48px;
  --trilho-shadow: none;
  --trilho-focus-width: 3px;
  --trilho-focus-offset: 3px;
  --trilho-z-base: 0;
  --trilho-z-bar: 10;
  --trilho-z-backdrop: 20;
  --trilho-z-sheet: 30;
  --trilho-z-notice: 40;
  --trilho-safe-top: env(safe-area-inset-top, 0px);
  --trilho-safe-right: env(safe-area-inset-right, 0px);
  --trilho-safe-bottom: env(safe-area-inset-bottom, 0px);
  --trilho-safe-left: env(safe-area-inset-left, 0px);
  color: var(--trilho-ink);
  background: var(--trilho-canvas);
  font: var(--trilho-text-base)/var(--trilho-leading) var(--trilho-font-ui);
  color-scheme: light;
}
.trilho-ds, .trilho-ds *, .trilho-ds *::before, .trilho-ds *::after { box-sizing: border-box; }
.trilho-ds :where(button, input, select, textarea) { font: inherit; }
.trilho-ds :where([hidden]) { display: none !important; }
.trilho-ds :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--trilho-focus-width) solid var(--trilho-rust);
  outline-offset: var(--trilho-focus-offset);
}
.trilho-ds .trilho-title { font-size: var(--trilho-text-title); line-height: 1.1; letter-spacing: -.035em; font-weight: 700; }
.trilho-ds .trilho-editorial { font-family: var(--trilho-font-editorial); font-weight: 400; }
.trilho-ds .trilho-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.trilho-ds .trilho-muted { color: var(--trilho-muted); }
.trilho-ds .trilho-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--trilho-space-2); min-block-size: var(--trilho-touch-large);
  min-inline-size: var(--trilho-touch); max-inline-size: 100%;
  padding: var(--trilho-space-2) var(--trilho-space-5);
  border: var(--trilho-border-width) solid var(--trilho-forest);
  border-radius: var(--trilho-radius-control); box-shadow: var(--trilho-shadow);
  background: var(--trilho-surface); color: var(--trilho-forest);
  font-weight: 600; line-height: 1.25; text-align: center;
  text-decoration: none; cursor: pointer; overflow-wrap: anywhere;
}
.trilho-ds .trilho-button--primary { background: var(--trilho-forest); color: var(--trilho-surface); }
.trilho-ds .trilho-button--secondary { background: var(--trilho-surface); }
.trilho-ds .trilho-button--tertiary { background: transparent; border-color: transparent; }
.trilho-ds .trilho-button--icon {
  min-block-size: var(--trilho-touch); inline-size: var(--trilho-touch);
  padding: var(--trilho-space-2); flex-shrink: 0;
}
.trilho-ds .trilho-button svg { inline-size: 1.25rem; block-size: 1.25rem; flex-shrink: 0; }
@media (hover: hover) {
  .trilho-ds .trilho-button:not(:disabled):not([aria-disabled="true"]):hover { background: var(--trilho-canvas-deep); }
  .trilho-ds .trilho-button--primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--trilho-forest-hover); }
}
.trilho-ds .trilho-button:not(:disabled):not([aria-disabled="true"]):active { background: var(--trilho-canvas-deep); }
.trilho-ds .trilho-button--primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--trilho-forest-active); }
.trilho-ds .trilho-button:disabled, .trilho-ds .trilho-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.trilho-ds .trilho-field { display: grid; gap: var(--trilho-space-2); min-inline-size: 0; }
.trilho-ds .trilho-label { display: block; font-size: var(--trilho-text-sm); font-weight: 700; }
.trilho-ds .trilho-input {
  display: block; inline-size: 100%; min-inline-size: 0;
  min-block-size: var(--trilho-touch-large); padding: var(--trilho-space-3);
  color: var(--trilho-ink); background: var(--trilho-surface);
  border: var(--trilho-border-width) solid var(--trilho-control-border);
  border-radius: var(--trilho-radius-control); box-shadow: var(--trilho-shadow);
}
.trilho-ds textarea.trilho-input { min-block-size: 8rem; resize: vertical; }
.trilho-ds .trilho-input::placeholder { color: var(--trilho-muted); opacity: 1; }
.trilho-ds .trilho-input[aria-invalid="true"] { border: var(--trilho-border-strong) solid var(--trilho-destructive); }
.trilho-ds .trilho-input:disabled { background: var(--trilho-canvas-deep); color: var(--trilho-muted); cursor: not-allowed; }
.trilho-ds .trilho-input[readonly] { background: var(--trilho-canvas); }
.trilho-ds .trilho-help, .trilho-ds .trilho-error { margin: 0; font-size: var(--trilho-text-sm); }
.trilho-ds .trilho-help { color: var(--trilho-muted); }
.trilho-ds .trilho-error { color: var(--trilho-destructive); }
/* Native radio group: label wraps a radio followed by .trilho-segment-label. */
.trilho-ds .trilho-segmented {
  display: flex; flex-wrap: wrap; gap: var(--trilho-space-1);
  margin: 0; padding: var(--trilho-space-1); min-inline-size: 0;
  border: var(--trilho-border-width) solid var(--trilho-control-border);
  border-radius: var(--trilho-radius-control);
}
.trilho-ds .trilho-segment { position: relative; flex: 1 1 auto; }
.trilho-ds .trilho-segment input {
  position: absolute; inline-size: 1px; block-size: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.trilho-ds .trilho-segment-label {
  display: flex; justify-content: center; align-items: center;
  min-block-size: var(--trilho-touch); padding: var(--trilho-space-2) var(--trilho-space-3);
  border: var(--trilho-border-width) solid transparent;
  border-radius: var(--trilho-radius-control); font-weight: 600; cursor: pointer;
}
.trilho-ds .trilho-segment input:checked + .trilho-segment-label { background: var(--trilho-forest); color: var(--trilho-surface); }
.trilho-ds .trilho-segment input:focus-visible + .trilho-segment-label { outline: var(--trilho-focus-width) solid var(--trilho-rust); outline-offset: 1px; }
.trilho-ds .trilho-segment input:disabled + .trilho-segment-label { opacity: .5; cursor: not-allowed; }
.trilho-ds .trilho-state {
  --trilho-state-color: var(--trilho-muted);
  padding: var(--trilho-space-4); border: var(--trilho-border-width) solid var(--trilho-border);
  border-inline-start: 3px solid var(--trilho-state-color);
  border-radius: var(--trilho-radius); background: var(--trilho-surface);
}
.trilho-ds .trilho-state--success { --trilho-state-color: var(--trilho-success); }
.trilho-ds .trilho-state--error { --trilho-state-color: var(--trilho-destructive); }
.trilho-ds .trilho-state--info { --trilho-state-color: var(--trilho-info); }
.trilho-ds .trilho-state-title { margin: 0 0 var(--trilho-space-1); font-weight: 700; }
.trilho-ds .trilho-state-text { margin: 0; }
.trilho-ds .trilho-app-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--trilho-space-3);
  min-block-size: 64px; padding: var(--trilho-space-2) var(--trilho-space-4);
  background: var(--trilho-canvas); border-block-end: var(--trilho-border-width) solid var(--trilho-border);
}
.trilho-ds .trilho-app-bar-title { flex: 1; min-inline-size: 0; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.trilho-ds .trilho-separator { margin: var(--trilho-space-6) 0; border: 0; border-block-start: var(--trilho-border-width) solid var(--trilho-border); }
.trilho-ds .trilho-sheet {
  padding: var(--trilho-space-6); min-inline-size: 0;
  background: var(--trilho-surface); border: var(--trilho-border-width) solid var(--trilho-border);
  border-radius: var(--trilho-radius); box-shadow: var(--trilho-shadow);
}
.trilho-ds .trilho-safe-top { padding-top: calc(var(--trilho-space-2) + var(--trilho-safe-top)); }
.trilho-ds .trilho-safe-bottom { padding-bottom: calc(var(--trilho-space-4) + var(--trilho-safe-bottom)); }
.trilho-ds .trilho-safe-inline {
  padding-left: calc(var(--trilho-space-4) + var(--trilho-safe-left));
  padding-right: calc(var(--trilho-space-4) + var(--trilho-safe-right));
}
.trilho-ds .trilho-touch { min-inline-size: var(--trilho-touch); min-block-size: var(--trilho-touch); }
.trilho-ds .trilho-touch-large { min-inline-size: var(--trilho-touch-large); min-block-size: var(--trilho-touch-large); }
.trilho-ds .trilho-stack { display: grid; gap: var(--trilho-space-4); }
.trilho-ds .trilho-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--trilho-space-3); }
@media (forced-colors: active) {
  .trilho-ds .trilho-segment input:checked + .trilho-segment-label { border-color: Highlight; outline: 2px solid Highlight; }
  .trilho-ds .trilho-button { border-color: ButtonText; }
}