/* Shared finishing layer for the website and installed PWA. The Android TWA
   renders this same shell; keep its system bars aligned with --ui-canvas. */
:root {
  --soft-radius-control: var(--ui-radius-control);
  --soft-radius-card: var(--ui-radius-card);
  --soft-radius-overlay: var(--ui-radius-overlay);
}

/* Notices belong to the same neutral surface family as panels. Their words
   and symbols, not colour alone, communicate success or failure. */
.fpl-toast {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text);
  border-radius: var(--ui-radius-card);
}

.fpl-toast--error { border-left-color: #d86358; }
.fpl-toast--warning { border-left-color: #ffac2e; }
.fpl-toast--success { border-left-color: #a0e0ab; }
.fpl-toast--info { border-left-color: var(--ui-accent); }
.fpl-toast--error .fpl-toast-icon { background: #d86358; color: #101012; }
.fpl-toast--success .fpl-toast-icon { background: #a0e0ab; color: #101012; }
.fpl-toast-action {
  min-height: 36px;
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-control);
}
.fpl-toast-close {
  display: grid;
  place-items: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  opacity: 0.86;
}

/* One predictable keyboard treatment across dense tools and overlays. */
:where(a, button, input, select, textarea, summary, [role='button'], [role='tab'], [role='radio']):focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
}
:where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}
.familiar-dialog,
.page-help-panel,
.settings-section {
  border-color: var(--ui-border);
}
.familiar-hint,
.familiar-field-status {
  color: var(--ui-secondary);
}
.auth-purpose {
  margin: -12px 0 2px;
  color: var(--ui-secondary);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* The preference sheet slides away, but an off-screen dialog must also leave
   the accessibility and tab order. It is a non-modal sheet, not a page lock. */
.cookie-overlay {
  visibility: hidden;
  pointer-events: none;
  transition: transform 500ms var(--ui-ease), visibility 0s linear 500ms;
}
.cookie-overlay.show {
  visibility: visible;
  pointer-events: auto;
  transition: transform 500ms var(--ui-ease), visibility 0s;
}

/* Keep horizontal tool navigation reachable at text enlargement instead of
   clipping the final item. Native scrolling also works with a keyboard. */
.familiar-tabs,
.results-subnav,
.elite-meta-nav {
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 12px;
}

@media (max-width: 720px) {
  .fpl-toast-action,
  .fpl-toast-close,
  .page-help-trigger,
  .familiar-tabs button,
  .familiar-close,
  .familiar-clear {
    min-width: 44px;
    min-height: 44px;
  }

  .fpl-toast { align-items: center; }
  .fpl-toast-action { padding-inline: 8px; }
  .familiar-entry,
  .familiar-entry-panels,
  .settings-section { min-width: 0; }
  .familiar-tabs { scroll-snap-type: inline proximity; }
  .familiar-tabs button { scroll-snap-align: start; }
}

@media (prefers-reduced-transparency: reduce) {
  .fpl-toast,
  .familiar-dialog,
  .page-help-panel,
  .tactical-more-sheet,
  .mobile-more-drawer {
    background: var(--ui-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  :root { --ui-border: rgb(255 255 255 / 0.62); }
  :root.light-mode { --ui-border: rgb(10 10 11 / 0.62); }
  .fpl-toast,
  .familiar-dialog,
  .settings-section { border-width: 2px; }
}

@media (forced-colors: active) {
  .fpl-toast,
  .familiar-dialog,
  .familiar-tabs button.active,
  .familiar-kit-option:has(input:checked) {
    border: 1px solid CanvasText;
  }
  :where(a, button, input, select, textarea):focus-visible {
    outline-color: Highlight;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fpl-toast,
  .familiar-tabs button,
  .page-help-panel { transition: none !important; }
  .familiar-tabs { scroll-behavior: auto; }
  .cookie-overlay,
  .cookie-overlay.show { transition: none !important; }
}