/* ============================================================
   TravlFun · polish.css · v1.0 · © Luxa Grid LLC
   Global quality layer, loaded LAST on every page. Refines
   typography, motion, focus, scrollbars, and print output.
   No feature changes — only finish.
   ============================================================ */

/* ---------- Correctness: [hidden] always wins ----------
   Component classes set display:flex/grid/inline-flex, which beats
   the UA's [hidden] rule. This restores the platform contract. */
[hidden] { display: none !important; }

/* ---------- Typography & rendering ---------- */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
h1, h2, h3, h4 { text-wrap: balance; }
p, li, .tf-empty__text, .tf-alert__body { text-wrap: pretty; }
b, strong { font-weight: 600; }
::selection { background: var(--tf-color-primary); color: #fff; }
img, svg { shape-rendering: geometricPrecision; }

/* Numbers align everywhere they tabulate */
td, .tf-estimate__amt, .tf-score__num, .tf-stepper__value { font-variant-numeric: tabular-nums; }

/* ---------- Focus: one ring, never two ---------- */
/* Wrappers already show a focus ring via :focus-within — suppress the
   inner control's own outline so focus reads as a single crisp ring. */
.tf-input input:focus-visible,
.tf-input select:focus-visible,
.tf-input textarea:focus-visible,
.tf-search input:focus-visible,
.mt-select input:focus-visible,
.mt-select select:focus-visible,
.tw-day__head input:focus-visible,
.tw-item input:focus-visible,
.tw-pitem input.txt:focus-visible { outline: none; }
.mt-select:focus-within { border-color: var(--tf-color-primary); }
.tw-day__head input:focus { border-bottom: 1.5px solid var(--tf-color-primary); }

/* Keyboard users get a ring on cards acting as links */
a.tf-card:focus-visible, .tf-card a:focus-visible { border-radius: 8px; }

/* ---------- Scrollbars (subtle, both themes) ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--tf-border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tf-border-strong); border-radius: 99px; border: 2.5px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--tf-ink-3); background-clip: content-box; }

/* ---------- Motion (all gated on reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Page entrance — one quiet rise, no fireworks */
  main, .ad-shell, .au-layout { animation: tfPageIn .45s var(--tf-ease) both; }
  @keyframes tfPageIn { from { opacity: 0; transform: translateY(10px); } }

  /* Loading gates fade rather than pop */
  #gate { animation: tfFade .3s ease both; }
  @keyframes tfFade { from { opacity: 0; } }

  /* Card grids stagger in gently */
  .hp-trending > *, .dp-cards > *,
  .dp-nearby > *, .wx-seasons > *, .hp-why__grid > * {
    animation: tfCardIn .4s var(--tf-ease) both;
  }
  .hp-trending > :nth-child(2),
  .dp-cards > :nth-child(2), .dp-nearby > :nth-child(2), .wx-seasons > :nth-child(2),
  .hp-why__grid > :nth-child(2) { animation-delay: .05s; }
  .hp-trending > :nth-child(3),
  .dp-cards > :nth-child(3), .dp-nearby > :nth-child(3), .wx-seasons > :nth-child(3),
  .hp-why__grid > :nth-child(3) { animation-delay: .1s; }
  .hp-trending > :nth-child(4),
  .dp-cards > :nth-child(4), .wx-seasons > :nth-child(4),
  .hp-why__grid > :nth-child(4) { animation-delay: .15s; }
  .hp-trending > :nth-child(5) { animation-delay: .2s; }
  .hp-trending > :nth-child(6) { animation-delay: .25s; }
  @keyframes tfCardIn { from { opacity: 0; transform: translateY(8px); } }

  /* Overlays arrive, they don't appear */
  .tf-modal-layer.is-open .tf-modal { animation: tfModalIn .28s var(--tf-ease) both; }
  @keyframes tfModalIn { from { opacity: 0; transform: translateY(16px) scale(.985); } }
  .tf-drawer-layer.is-open .tf-drawer:not(.tf-sheet) { animation: tfDrawerIn .3s var(--tf-ease) both; }
  @keyframes tfDrawerIn { from { transform: translateX(28px); opacity: .4; } }
  .tf-drawer-layer.is-open .tf-sheet { animation: tfSheetIn .3s var(--tf-ease) both; }
  @keyframes tfSheetIn { from { transform: translateY(30px); opacity: .4; } }
  .tf-modal-layer.is-open, .tf-drawer-layer.is-open { animation: tfFade .22s ease both; }

  /* Feedback lands softly */
  .tf-toast { animation: tfToastIn .32s var(--tf-ease) both; }
  @keyframes tfToastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
  .tf-update { will-change: transform; }

  /* Micro-tactility on secondary controls (primaries have their edge) */
  .tf-btn--outline:active, .tf-btn--ghost:active, .tf-btn--icon:active,
  .tf-tag--select:active, .sp-seg button:active, .ac-seg button:active { transform: scale(.97); }

  /* Interest tags and chips ease their state changes */
  .tf-tag, .tf-badge, .mp-chip, .mt-folder, .wx-m { transition: background .15s, color .15s, border-color .15s, opacity .15s; }
}

/* ---------- Empty & loading states ---------- */
.tf-empty { color: var(--tf-ink-2); }
.tf-empty__art svg { box-shadow: var(--tf-shadow-1); }
.tf-btn__spinner { flex: none; }

/* ---------- Small-screen breathing room ---------- */
@media (max-width: 480px) {
  .tf-modal__header, .tf-modal__body, .tf-modal__footer { padding-left: 18px; padding-right: 18px; }
  .tf-card__body { word-break: break-word; }
}

/* ---------- Print: plans and guides come out clean ---------- */
@media print {
  .tf-navbar, .tf-footer, .sp-foot, .tw-nav, .dp-subnav, .mp-zoom,
  #tfBell, .tf-toast-dock, .tf-update, .tw-hide-ro, .hp-skip,
  .tf-btn, .wx-units, .ad-side { display: none !important; }
  body { background: #fff !important; }
  main { animation: none !important; }
  .tf-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  a { color: inherit !important; text-decoration: none !important; }
}