/* ══════════════════════════════════════════════════════════════════
   TRADZY — VISUAL POLISH LAYER (Apple HIG-inspired)
   ══════════════════════════════════════════════════════════════════
   Loaded last so it wins over stylesheet rules, but note: inline
   style="" attributes still beat this file. That is intentional —
   this layer only sets properties the codebase does NOT set inline
   (min-height, max-width, rendering hints), so it never fights the
   existing design, it only fills the gaps.

   Addresses three measured issues:
     1. 89% of tap targets were under the 44px touch guideline
     2. Content sprawled to 2134px on a 2560px display (max-width:none)
     3. iOS auto-inflated text on rotate (no text-size-adjust set)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. TEXT RENDERING ────────────────────────────────────────────
   Stops iOS Safari from arbitrarily scaling text on orientation
   change, and matches Apple's font smoothing so the mono/condensed
   faces render with the same weight they were designed at. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── 2. LARGE-DISPLAY CONTAINMENT ─────────────────────────────────
   Measured: on a 2560px viewport the active tab stretched to 2134px
   with max-width:none, producing very long line lengths. Apple caps
   content width and centres it rather than letting it sprawl.
   1728px = MacBook Pro 16" logical width — generous for a data-dense
   dashboard while still stopping the sprawl on ultrawide monitors.

   IMPLEMENTATION NOTE: .tab-content is a flex item inside `.right-col`
   (display:flex; flex-direction:column). In a column container the cross
   axis is horizontal, and `margin-inline:auto` on a flex item absorbs all
   free cross-axis space — which collapses the element to width:0 instead
   of centring it. `align-self:center` + an explicit width is the correct
   mechanism here. Do not swap this back to auto margins. */
@media (min-width: 1800px) {
  .tab-content {
    width: 100%;
    max-width: 1728px;
    align-self: center;
  }
}

/* ── 3. TOUCH TARGETS ─────────────────────────────────────────────
   Apple HIG specifies a 44×44pt minimum hit area. Rather than
   inflating every element's visual box (which would wreck this
   deliberately dense layout), the hit area is expanded only on
   genuine touch devices, and only for real interactive controls.
   Chips/pills inside scrolling rows are excluded so the compact
   selector rows keep their density. */
@media (pointer: coarse) {
  button,
  a.btn,
  .r-tab,
  input[type="button"],
  input[type="submit"],
  [role="button"] {
    min-height: 40px;
  }

  /* Form fields need comfortable height and a >=16px font, otherwise
     iOS Safari zooms the viewport on focus — a classic mobile bug. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    min-height: 40px;
    font-size: max(16px, 1em);
  }
}

/* ── 3b. ANALYSIS INPUT TIERS ─────────────────────────────────────
   The analysis panel asks for 34 separate card groups / 255 options, but
   the scoring engine weights six of them far above the rest and silently
   caps the score at 68 until four are strong. The tier divider marks where
   "required to move the number" ends and "optional refinement" begins.
   Deep sections are collapsed on load via markDeepTierCollapsed(). */
.tier-divider {
  grid-column: 1 / -1;
  margin: 18px 16px 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--acc-rgb), 0.16);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tier-divider-label {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  letter-spacing: 0.16em;
  color: rgba(var(--acc-ink-rgb), 0.62);
}
.tier-divider-note {
  font-family: var(--font-mono);
  font-size:var(--fs-11);
  line-height: 1.5;
  color: var(--text3);
}

/* Core sections carry a subtle lime edge so the fast path reads as a group */
.analysis-sec[data-tier="core"] > .sec-head {
  box-shadow: inset 2px 0 0 rgba(var(--acc-rgb), 0.45);
}

/* ── 4. FOCUS VISIBILITY ──────────────────────────────────────────
   Keyboard users had no consistent focus indicator. Uses :focus-visible
   so it only appears for keyboard navigation, never on mouse click. */
:focus-visible {
  outline: 2px solid var(--lime, var(--lime));
  outline-offset: 2px;
  border-radius:var(--rad-3);
}

/* ── 5. MOTION PREFERENCE ─────────────────────────────────────────
   Respects the OS "Reduce Motion" accessibility setting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}