/* v9 tabs (2026-09-20): the app and AI selectors become segmented controls.
   Gene's phone showed the old strip reading as plain labels: muted text on the page
   background with a faint 4px underline. Every option is now a bounded, raised button
   sitting on a recessed track, and the selected one is a filled green card, so the
   row reads as "four choices, this one is on" without adding labels, numbers or
   counters (those were removed on 2026-09-12 for crowding the phone). Loads after
   v8/browse.css and overrides its .browse-navigation rules. */
:root { --tab-track: #e6ede0; --tab-edge: #c9d8c4; --tab-shadow: #b7c9b1; }

.browse-navigation { align-items: center; gap: 12px; margin: 0 0 24px; border-bottom: 0; }
.browse-navigation .browse-tabs {
  display: grid; flex: 1; min-width: 0; gap: 5px; margin: 0; padding: 5px;
  border: 1px solid var(--tab-edge); border-radius: 18px; background: var(--tab-track);
}
.browse-navigation .app-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.browse-navigation .ai-tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); border-radius: 999px; }

/* Each option: white card with a bottom edge so it reads as a physical, pressable button. */
.browse-navigation .browse-tabs button {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 60px; min-width: 0; padding: 10px 10px;
  border: 1px solid transparent; border-radius: 13px;
  background: #fff; color: var(--ink); text-align: center;
  box-shadow: 0 1px 0 var(--tab-shadow), 0 1px 2px #14201a0f;
  transition: background var(--dur-feedback) ease, color var(--dur-feedback) ease, box-shadow var(--dur-feedback) ease, transform var(--dur-fast) ease, border-color var(--dur-feedback) ease;
}
.browse-navigation .ai-tabs button { min-height: 46px; padding: 8px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.browse-navigation .browse-tabs button::after { display: none; }           /* old underline */
.browse-navigation .browse-tabs button > * { position: relative; z-index: 1; }
.browse-navigation .app-tabs button > span { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; }
.browse-navigation .app-tabs small { display: block; margin-top: 4px; font-size: 12px; color: var(--browse-muted); }

/* Hover: the card lifts and its edge turns green. Press: it settles back. */
.browse-navigation .browse-tabs button:not([aria-selected="true"]):active { transform: translateY(0); box-shadow: 0 1px 0 var(--tab-shadow); }

/* Selected: filled deep green, white type, sits flush on the track. */
.browse-navigation .browse-tabs button[aria-selected="true"],
.browse-navigation .browse-tabs button[aria-selected="true"]:hover {
  background: var(--green-deep); color: #fff; border-color: var(--green-deep); font-weight: 650;
  box-shadow: inset 0 1px 0 #ffffff26, 0 1px 0 #0b3b26; transform: none;
}
.browse-navigation .app-tabs button[aria-selected="true"] small { color: #d1edc8; }
.browse-navigation .browse-tabs button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* Autoplay countdown: a light fill sweeps across the selected card instead of an underline. */
.browse-navigation .browse-tabs button > .tab-timer {
  display: none; position: absolute; z-index: 0; inset: 0; left: 0; right: auto; bottom: auto;
  width: 100%; height: 100%; margin: 0; border-radius: 0;
  background: #ffffff2e; transform: scaleX(var(--tab-progress, 0)); transform-origin: left; pointer-events: none;
}
.browse-navigation .browse-tabs button[aria-selected="true"] > .tab-timer { display: block; }

/* Pause/resume sits beside the track as a matching white round button. */
.view-rotation { background: #fff; border-color: var(--tab-edge); box-shadow: 0 1px 0 var(--tab-shadow); }
.view-rotation:hover { border-color: #8fb08c; }

@media (max-width: 720px) {
  .browse-navigation { gap: 8px; margin-bottom: 20px; }
  .browse-navigation .browse-tabs { gap: 3px; padding: 3px; border-radius: 14px; }
  .browse-navigation .browse-tabs button { min-height: 54px; padding: 8px 3px; border-radius: 11px; }
  .browse-navigation .app-tabs button > span { font-size: 12px; white-space: nowrap; }
  .browse-navigation .app-tabs small { margin-top: 3px; font-size: 10px; }
  .browse-navigation .ai-tabs { gap: 3px; border-radius: 999px; }
  .browse-navigation .ai-tabs button { min-height: 42px; padding: 8px 1px; border-radius: 999px; font-size: 11px; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; }
  .browse-navigation .ai-tabs button[aria-selected="true"] { background: var(--green-deep); }
  .view-switcher { flex-basis: 40px; }
  .view-rotation { width: 40px; height: 40px; font-size: 16px; }
}
@media (max-width: 360px) {
  .browse-navigation .ai-tabs button { font-size: 10px; padding-inline: 0; }
  .browse-navigation .app-tabs button > span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .browse-navigation .browse-tabs button { transition: none; } .browse-navigation .browse-tabs button:hover { transform: none; } }

/* ---------- hover-only transforms (Task 2 gate, coordinator-added scope:
   touch devices fire false hovers on tap, so any hover rule that moves
   something only applies where a real hover input exists) ---------- */
@media (hover: hover) {
  .browse-navigation .browse-tabs button:not([aria-selected="true"]):hover { background: #fff; border-color: #8fb08c; transform: translateY(-1px); box-shadow: 0 2px 0 var(--tab-shadow), 0 3px 8px #14201a14; }
}