/* Shared visual contract. Load after feature styles on both app and guide pages.
   Existing selectors are adapters; new components can use the ui-* classes.
   Keep geometry local to each feature, and appearance/feedback in this file. */
:root {
  --ui-text-base: 10px;
  --ui-text-title: var(--ui-text-base);
  --ui-text-section: var(--ui-text-base);
  --ui-text-body: var(--ui-text-base);
  --ui-text-label: var(--ui-text-base);
  --ui-text-meta: var(--ui-text-base);
  --ui-weight-label: 700;
  --ui-radius-control: 10px;
  --ui-radius-card: 13px;
  --ui-radius-dialog: 22px;
  --ui-control-border: rgba(165, 213, 191, .24);
  --ui-action-bg: linear-gradient(145deg, rgba(165, 213, 191, .11), rgba(165, 213, 191, .035)), #14251e;
  --ui-action-hover: linear-gradient(145deg, rgba(165, 213, 191, .17), rgba(165, 213, 191, .06)), #14251e;
  --ui-action-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 16px rgba(4, 13, 10, .1);
  --ui-dialog-bg: linear-gradient(145deg, #193329, #0d2018);
  --ui-dialog-shadow: 0 24px 80px #0008;
  --ui-muted: #afbeb5;
  --ui-warning: #edb38b;
  --ui-motion: 160ms var(--ease-out);
}

/* Text actions: navigation, forms, account controls, assistant and guide. */
html body :is(
  .ui-action, .workspace-action, .route-export-trigger, .route-camp-button,
  .gear-history-toggle, .new-session-button, .quick-prompt, .message-route-action,
  .upload-button, .send-button, .trip-gear-save, .gear-save-retry,
  .trip-image-button, .trip-quiet-button, .route-export-submit,
  .landing-login-button, .landing-register-button, .landing-primary-cta, .landing-inline-cta,
  .auth-submit, .auth-account-submit, .auth-logout-button,
  .user-quota-reset, .provider-usage-actions button, .onboarding-settings button,
  .gear-editor-buttons button, [data-editor-keep], [data-editor-discard-confirm],
  .gear-conflict-actions button, .gear-transfer-form footer button, .brand-button,
  .gear-recommendation-footer button, .trip-completion-dialog footer button,
  [data-copy-plan], .trip-upload-file-card button, [data-preview-download],
  .session-clear-all, .trekly-tour .driver-popover-prev-btn,
  .trekly-tour .driver-popover-next-btn, .field-cta
) {
  min-height: var(--button-min-height, 32px);
  box-sizing: border-box;
  border: 1px solid var(--button-border, var(--ui-control-border));
  border-radius: var(--ui-radius-control);
  padding-inline: 12px;
  color: var(--button-color, #e2f0e6);
  background: var(--button-bg, var(--ui-action-bg));
  box-shadow: var(--ui-action-shadow);
  font-family: inherit;
  font-size: var(--ui-text-label);
  font-weight: var(--ui-weight-label);
  line-height: 1.5;
  text-shadow: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ui-motion), border-color var(--ui-motion), color var(--ui-motion), transform var(--ui-motion), opacity var(--ui-motion);
  &:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--button-hover, var(--ui-action-hover));
    border-color: var(--button-border-hover, rgba(165, 213, 191, .46));
    transform: translateY(var(--ui-action-lift, -1px));
  }
  &:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(0); }
  &:disabled, &[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
}

/* Stable dimensions for global navigation, including route-source selection. */
html body .workspace-action { height: 40px; gap: 8px; }
html body .workspace-action svg { width: 18px; height: 18px; flex: 0 0 18px; }
html body :is(.route-export-trigger, .route-camp-button) { border-radius: var(--ui-radius-card); }
html body :is(.route-export-trigger-copy, .route-camp-button-copy, .message-route-action) strong,
html body .new-session-button span {
  font-size: var(--ui-text-label);
  font-weight: var(--ui-weight-label);
  color: inherit;
}
html body :is(.route-export-trigger-copy, .route-camp-button-copy, .message-route-action) small {
  color: var(--ui-muted); font-size: var(--ui-text-meta); line-height: 1.5;
}
html body :is(.route-export-trigger, .workspace-action)[aria-expanded="true"],
html body .route-export-trigger.is-open,
html body .trip-route-source button[aria-pressed="true"] {
  --button-bg: linear-gradient(145deg, #315243, #223d30);
  --button-hover: linear-gradient(145deg, #3b5f4e, #294937);
  --button-border: #a5d5bf;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(165, 213, 191, .22);
}
/* Route details sit on paper: keep dark actions opaque and helper text legible. */
html body .trip-route-source { color: #52695a; font-size: var(--ui-text-label); }
html body .trip-route-source small { color: #52695a; font-size: var(--ui-text-meta); }

/* Equal tracks include the export wrapper, not just the two direct buttons. */
html body .trip-header-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 288px; max-width: 100%; flex: 0 0 auto; gap: 8px;
}
html body .trip-header-actions .route-export-zone { min-width: 0; }
html body .trip-header-actions :is(.trip-image-button, .route-export-trigger) {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; height: 36px; min-height: 36px;
  padding: 0 6px; margin: 0; gap: 6px;
  border-radius: var(--ui-radius-control); white-space: nowrap;
}

html body :is(.auth-submit, .auth-account-submit, .landing-login-button, .landing-register-button, .landing-primary-cta, .field-cta) { --button-min-height: 40px; }

/* Primary actions share the brand accent; danger remains explicit. */
html body :is(
  .ui-primary, .new-session-button, .send-button, .route-export-submit,
  .landing-register-button, .landing-primary-cta, .landing-inline-cta,
  .auth-submit:not(.auth-submit--quiet), .auth-account-submit, .gear-editor-save,
  .gear-transfer-form button[type="submit"], .brand-button.is-primary,
  [data-recommendation-start], [data-recommendation-apply], [data-completion-submit],
  [data-preview-download], .trekly-tour .driver-popover-next-btn, .field-cta
) {
  --button-bg: #f26d3b; --button-hover: #ff8a56;
  --button-color: #14251c; --button-border: #f26d3b; --button-border-hover: #ff8a56;
}
html body :is(.ui-danger, .session-clear-all, .auth-logout-button, .brand-button.is-danger, [data-editor-discard-confirm]) {
  --button-bg: #352720; --button-hover: #483129;
  --button-color: #ffb2a3; --button-border: #996455; --button-border-hover: #c98472;
}

/* Close controls share geometry. Map/player controls keep their compact geometry. */
html body :is(
  .ui-close, .auth-modal-close, .auth-account-close, .gear-assistant-close,
  .gear-library-close, .gear-recommendation-close, .trip-overview .trip-overview-close,
  .trip-image-preview .trip-image-preview-close, .gear-editor-dialog > header button,
  .trip-completion-dialog > header button
) {
  display: grid; place-items: center; flex: 0 0 32px;
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 1px solid var(--ui-control-border); border-radius: var(--ui-radius-control);
  background: var(--ui-action-bg); color: var(--ink-soft);
  font: 400 22px/1 sans-serif; cursor: pointer;
  transition: background-color var(--ui-motion), color var(--ui-motion);
  &:hover:not(:disabled) { background: var(--ui-action-hover); color: var(--ink); }
}
html body :is(
  .route-export-close, .route-weather-close, .trip-video-player header button,
  .gear-library-add, .gear-library-add-row > button, .gear-information-marker,
  .gear-library-delete, .trip-gear-remove, .route-icon-button, .trip-gear-action,
  .session-delete, .preview-remove, .gear-fold-toggle,
  .route-playback-toggle
) {
  border-radius: 7px;
  transition: background-color var(--ui-motion), color var(--ui-motion), border-color var(--ui-motion);
}
/* Text links, tabs and inline controls retain their lighter emphasis. */
html body :is(
  .auth-inline-button, .auth-link-button, .auth-password-toggle, .landing-text-link,
  .trip-overview-nav button, .gear-recommendation-tabs button, .gear-recommendation-nav button,
  .view-switcher-button, .map-mode-button, .route-start-date-trigger, .trip-video-choices button,
  .route-date-picker-footer button, .route-camp-delete-button,
  .field-header > a:last-child, .field-footer a, .guide-toc a
) {
  font-family: inherit; font-size: var(--ui-text-label); font-weight: var(--ui-weight-label);
  line-height: 1.5;
}
html body :is(.trip-overview-nav button, .gear-recommendation-tabs button) {
  min-height: 32px; color: var(--ink-soft); border-radius: 0;
  &:hover { color: var(--ink); background: rgba(165, 213, 191, .08); }
  &[aria-pressed="true"], &.is-active { color: var(--mint); border-bottom-color: var(--mint); }
}
html body :is(.map-mode-button, .view-switcher-button) { border-radius: var(--ui-radius-control); }
html body :is(.map-mode-button, .view-switcher-button).is-active {
  color: #173221; background: var(--mint);
}

/* Consistent focus is independent of hover, selected state or surface. */
html body :is(button, a, input, select, textarea, summary, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--mint); outline-offset: 3px;
}
html body .route-inspector :is(button, input, select):focus-visible {
  outline-color: #38654d;
}

/* Dialogs share surface/chrome, retaining feature-specific sizing and scrolling. */
html body :is(
  .ui-dialog, .gear-library-dialog, .gear-editor-dialog, .gear-recommendation-dialog,
  .trip-completion-dialog, .trip-image-preview, .gear-transfer-dialog, .auth-card, .auth-account-panel
) {
  color: var(--ink); background: var(--ui-dialog-bg);
  border: 1px solid var(--ui-control-border); border-radius: var(--ui-radius-dialog);
  box-shadow: var(--ui-dialog-shadow);
  &::backdrop { background: #030d09b3; backdrop-filter: blur(5px); }
}
html body :is(
  .gear-library-header h3, .gear-editor-dialog h3, .gear-recommendation-header h2,
  .trip-completion-dialog h2, .trip-image-preview h2, .trip-overview-header h2,
  .auth-panel h1, .auth-account-head strong,
  .trekly-tour .driver-popover-title
) { font-size: var(--ui-text-title); font-weight: 650; line-height: 1.4; }
html body :is(
  .trip-completion-dialog h3, .gear-editor-performance h4,
  .onboarding-settings-head strong, .auth-account-panel h4,
  .auth-account-panel .user-quota-manager-head strong,
  .gear-recommendation-items h3, .gear-recommendation-evidence h3
) { font-size: var(--ui-text-section); font-weight: 650; line-height: 1.5; }
html body :is(
  .trip-completion-dialog p, .gear-editor-guidance, .gear-editor-performance > p,
  .gear-recommendation-item p, .gear-recommendation-evidence p,
  .trekly-tour .driver-popover-description, .field-copy > p, .auth-copy
) { font-size: var(--ui-text-body); line-height: 1.7; }
html body :is(
  .gear-editor-dialog header p, .gear-library-header p, .gear-recommendation-header [data-recommendation-trip],
  .gear-recommendation-muted, .gear-recommendation-disclaimer,
  .onboarding-settings label, .onboarding-settings-foot p, .model-settings-fields label,
  .trip-review-columns, .gear-editor-field, .gear-parameter-seasons legend,
  .auth-field label, .auth-account-form .auth-field label, .brand-editor label,
  .gear-recommendation-steps li, .gear-recommendation-history-toggle
) { font-size: var(--ui-text-label); line-height: 1.6; color: var(--ui-muted); }
html body :is(
  .gear-editor-dialog small, .trip-review-identity small, .trip-upload-file-card small,
  .gear-recommendation-footer, .driver-popover-progress-text,
  .user-quota-identity small, .user-quota-manager-head small, .field-shot figcaption,
  .auth-field-hint, .auth-form-message, .trip-save-status, .brand-input-hint
) { font-size: var(--ui-text-meta); line-height: 1.6; color: var(--ui-muted); }

/* Editable fields share a surface; exclude file/range/checkbox and map data. */
html body :is(
  .auth-field input, .auth-account-form input,
  .gear-editor-dialog input:not([type="checkbox"]), .gear-editor-dialog select,
  .onboarding-settings select, .model-settings-fields select, .gear-transfer-form input, .gear-transfer-form select, .brand-library-dialog [data-brand-name],
  .trip-notes-input
) {
  min-height: 42px; border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-control); background: #0c1b14;
  color: var(--ink); font-family: inherit; font-size: var(--ui-text-body); line-height: 1.5;
  &::placeholder { color: var(--ink-faint); }
}
/* The wrapping label paints the category text; keep the native select interactive without painting a second copy. */
html body .gear-transfer-form .gear-transfer-category-picker select { color: transparent; }
html body :is(.trip-review-row input, .gear-recommendation-optional input, .gear-parameter-seasons input) { accent-color: var(--mint); }
html body :is(.gear-recommendation-selection, .trip-upload-file-card, .gear-recommendation-help-content) {
  border-color: var(--ui-control-border); border-radius: var(--ui-radius-card); background: var(--surface-soft);
}
html body .trip-upload-file-card :is([data-actual-time], p) {
  font-size: var(--ui-text-label); line-height: 1.6; color: var(--mint);
}
html body .trip-upload-file-card [data-state="warning"] { color: var(--ui-warning); }
html body .trip-upload-file-card button { min-height: 32px; padding: 6px 10px; }
html body .trip-file-drop-copy strong { font-size: var(--ui-text-section); }
html body .trip-file-drop-hint { font-size: var(--ui-text-label); }

@media (max-width: 760px) {
  html body .workspace-action { height: 44px; }
  html body .trip-overview-header { padding-right: 18px; }
  html body .trip-overview-heading { width: 100%; padding-right: 48px; }
  html body .trip-header-actions { width: 100%; gap: 6px; }
  html body .trip-header-actions :is(.trip-image-button, .route-export-trigger) { height: 44px; min-height: 44px; }
  html body :is(.gear-editor-dialog, .gear-recommendation-dialog, .trip-completion-dialog, .trip-image-preview) { border-radius: 16px; }
  html body .trip-route-source { gap: 6px; }
}
@media (pointer: coarse) {
  html body .trip-header-actions :is(.trip-image-button, .route-export-trigger) { height: 44px; min-height: 44px; }
  html body .auth-brand-lockup { padding-right: 52px; }
  html body :is(.ui-action, .auth-submit, .gear-editor-buttons button, .gear-recommendation-dialog .gear-recommendation-footer button, .trip-completion-dialog footer button, .auth-account-submit, .trip-upload-file-card button) { --button-min-height: 44px; min-height: 44px; }
  html body :is(.ui-close, .auth-modal-close, .auth-account-close, .gear-assistant-close, .gear-library-close, .gear-recommendation-close, .trip-overview .trip-overview-close, .trip-image-preview .trip-image-preview-close, .gear-editor-dialog > header button, .trip-completion-dialog > header button) { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --ui-motion: 0s; --ui-action-lift: 0px; }
  html body :is(button, .field-cta, .workspace-action, .route-export-trigger, .route-camp-button) {
    transition: none;
  }
}

/* Overview and explicit save share one card, with separate keyboard targets. */
.trip-overview-entry { position: relative; }
html body .trip-overview-entry .trip-overview-trigger {
  grid-template-columns: 30px minmax(0, 1fr);
  padding-right: 64px;
  min-height: 62px;
}
html body .trip-overview-entry .trip-save-button {
  --button-bg: #eea14c; --button-hover: #ffb86b;
  --button-border: #eea14c; --button-border-hover: #ffb86b;
  --button-color: #19271e; --ui-action-lift: 0px;
  position: absolute; right: 10px; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 44px; height: 42px; padding: 3px; padding-inline: 3px; gap: 1px;
  &:disabled {
    --button-bg: #283b31; --button-border: #45564b; --button-color: #a1aea6;
    opacity: .65;
  }
}
.trip-save-button svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.trip-save-button span { white-space: nowrap; }