/* ============================================================================
   Delft Dibs — interface polish layer
   Loaded last in every page so these safe, low-specificity primitives apply
   site-wide without overriding intentional component styles. Based on the
   "details that make interfaces feel better" principles: typography wrapping,
   font smoothing, tactile press, honest focus rings, and motion restraint.
   Per-page refinements (concentric radii, optical alignment, specific
   transitions) live in each page's own <style>.
   ============================================================================ */

/* Crisper text on macOS (no-op elsewhere). Safe to repeat where already set. */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings read as deliberate blocks, not ragged orphans. balance only kicks
   in on short text (<=6 lines), so it's safe to apply broadly. */
h1, h2, h3, h4,
.plan-name, .price-name, .card-title {
  text-wrap: balance;
}

/* Body copy: kill single-word orphans on the last line. */
p, li, figcaption, blockquote, .card-sub, .section-sub, .price-tagline {
  text-wrap: pretty;
}

/* Numbers that update (prices, counters, stats) shouldn't shift layout.
   Opt-in utility — applied per page where digits change. */
.tabular-nums,
.card-price, .plan-price .amt, .stat-value, .stat-number, .stat-num {
  font-variant-numeric: tabular-nums;
}

/* Tactile press. Uses the independent `scale` property so it never fights an
   element's existing `transform` (hover lifts, etc.). 0.96 per the spec —
   anything lower feels exaggerated. */
button, .btn, [class*="btn-"], [class*="-btn"],
[class*="cta"], a.button, input[type="submit"] {
  transition-property: scale, box-shadow, background-color, color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
button:active:not(:disabled),
.btn:active:not(:disabled),
[class*="btn-"]:active:not(:disabled),
[class*="-btn"]:active:not(:disabled),
[class*="cta"]:active:not(:disabled),
input[type="submit"]:active:not(:disabled) {
  scale: 0.96;
}

/* Honest, consistent keyboard focus. Only :focus-visible, so it never shows on
   mouse clicks. Most pages don't style this, so conflicts are rare. */
:focus-visible {
  outline: 2px solid var(--brand-blue, #00449E);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Photographic images get a hairline so they sit on the surface instead of
   floating. Pure black at low alpha — never a tinted neutral that reads as
   dirt on the edge. Opt-in so logos/icons are untouched. */
.img-outline,
.card-media img, .listing-image, .listing-photo {
  outline: 1px solid rgba(0, 0, 0, 0.10);
  outline-offset: -1px;
}

/* Respect users who ask for less motion: collapse animations and the slop-y
   decorative loops without breaking layout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}