/*
 * VORTEX — Phase 5 public experience layer
 * Adds consistent layout, hierarchy, responsive behavior and interaction polish.
 * Loaded after existing page styles; legacy selectors and behavior remain intact.
 */
:root {
  --vx-content-max: 1200px;
  --vx-page-gutter: clamp(16px, 3.2vw, 36px);
  --vx-section-gap: clamp(28px, 4vw, 48px);
  --vx-card-hover: 0 16px 34px rgba(0,0,0,.24);
}
html { scroll-padding-top: 92px; }
body:not([data-page="reader"]) main {
  min-height: calc(100vh - 160px);
}
body:not([data-page="reader"]) main > .container,
body:not([data-page="reader"]) main > .db,
body:not([data-page="reader"]) main > .nw,
body:not([data-page="reader"]) main > .ax {
  width: min(var(--vx-content-max), calc(100% - (var(--vx-page-gutter) * 2)));
  margin-inline: auto;
}
body:not([data-page="reader"]) :where(button, input, select, textarea) { accent-color: var(--ds-accent); }
body:not([data-page="reader"]) :where(input, select, textarea) {
  max-width: 100%;
}
body:not([data-page="reader"]) :where(img) {
  height: auto;
}
body:not([data-page="reader"]) :where(a, button) {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity;
  transition-duration: 180ms;
  transition-timing-function: var(--ds-ease, ease);
}
body:not([data-page="reader"]) :where(a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible) {
  outline: 2px solid var(--ds-accent-hi);
  outline-offset: 3px;
}
body:not([data-page="reader"]) :where(.ds-btn, .btn, button) { touch-action: manipulation; }
body:not([data-page="reader"]) :where(.ds-card, .ax-card, .nw-card, .db-card, .ac-card, .h4-lcard, .h4-mcard) {
  border-color: var(--ds-line, rgba(255,255,255,.08));
}
body:not([data-page="reader"]) :where(.ds-card, .ax-card, .nw-card, .db-card, .ac-card, .h4-lcard, .h4-mcard):hover {
  border-color: rgba(19,171,210,.34);
}
body:not([data-page="reader"]) :where(.page-title, .h4-head, .nw-sec-head, .ax-panel-head, .db-count-row) {
  gap: 12px;
}
body:not([data-page="reader"]) :where(.page-title h1, .h4-head h2, .nw-sec-head h2, .ax-panel h2) {
  text-wrap: balance;
}
body:not([data-page="reader"]) :where(.empty, .ds-empty, .ds-state) {
  border-radius: var(--ds-r-lg, 16px);
}
body:not([data-page="reader"]) :where(.hidden, [hidden]) { display: none !important; }

/* Homepage */
body[data-page="home"] .h4 { padding-bottom: clamp(36px, 6vw, 76px); }
body[data-page="home"] .h4-wrap { gap: var(--vx-section-gap); }
body[data-page="home"] .h4-sec { margin-block: 0; }
body[data-page="home"] .h4-head {
  align-items: end;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ds-line);
}
body[data-page="home"] .h4-head h2 { font-size: clamp(21px, 2.5vw, 29px); }
body[data-page="home"] .h4-latest,
body[data-page="home"] .h4-anime,
body[data-page="home"] .db-home-grid { scroll-margin-top: 96px; }
body[data-page="home"] .h4-hero { overflow: clip; }

/* Anime catalog and series guide */
body[data-page="anime"] .ax { padding-bottom: 64px; }
/* شريط أقسام العمل: ملتصق تحت الرأس تمامًا، داخل عمود المحتوى، بخلفية صلبة وحدود واضحة */
body[data-page="anime"] .ax-tabs {
  position: sticky;
  top: var(--ds-header-h);
  z-index: 12;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 16px;
  padding: 10px 2px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--ds-bg, #05080c);
  border-bottom: 1px solid var(--ds-line, rgba(255,255,255,.08));
  box-shadow: 0 14px 22px -18px rgba(0,0,0,.95);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scroll-padding-inline: 16px;
}
body[data-page="anime"] .ax-tabs::-webkit-scrollbar { display: none; }
body[data-page="anime"] .ax-tabs button { flex: 0 0 auto; white-space: nowrap; }
body[data-page="anime"] .ax-panel {
  scroll-margin-top: 140px;
  margin-block: clamp(24px, 3.5vw, 42px);
}
body[data-page="anime"] .ax-card,
body[data-page="anime"] .ax-panel,
body[data-page="anime"] .ax-episodes {
  min-width: 0;
}
body[data-page="anime"] .ax-toolbar {
  align-items: center;
  flex-wrap: wrap;
}
body[data-page="anime"] .ax-legend { flex-wrap: wrap; }
body[data-page="anime"] .ax-hero-inner { min-width: 0; }

/* Manga and reader entry points */
body[data-page="manga"] #manga-page { padding-block: clamp(24px, 4vw, 48px); }
body[data-page="manga"] .page-title { margin-bottom: 24px; }
body[data-page="reader"] .reader-body { overflow-x: clip; }

/* Databook */
body[data-page="databook"] .db { padding-bottom: 64px; }
body[data-page="databook"] .db-hero { margin-bottom: clamp(24px, 4vw, 42px); }
body[data-page="databook"] .db-toolbar {
  gap: 12px;
  align-items: center;
}
body[data-page="databook"] .db-grid { align-items: stretch; }
body[data-page="databook"] .db-detail { min-width: 0; }

/* News */
body[data-page^="news"] .nw { padding-bottom: 64px; }
body[data-page="news"] .nw-mast { margin-bottom: 24px; }
body[data-page^="news"] .nw-sec { margin-block: clamp(24px, 4vw, 44px); }
body[data-page="news-article"] .na { min-width: 0; }
body[data-page="news-article"] .na :where(p, li) { line-height: 1.95; }

/* Search, browse and favorites */
body[data-page="search"] .container,
body[data-page="browse"] .container,
body[data-page="favorites"] .container { padding-block: clamp(24px, 4vw, 48px) 64px; }
body[data-page="search"] .search-bar,
body[data-page="browse"] .bbar { min-width: 0; }
body[data-page="search"] .filters,
body[data-page="browse"] .bbar { border-radius: var(--ds-r-lg, 16px); }
body[data-page="search"] .manga-grid,
body[data-page="favorites"] .manga-grid { align-items: stretch; }

/* Shared motion and responsive rules */
@media (hover: hover) and (pointer: fine) {
  body:not([data-page="reader"]) :where(.ds-card, .ax-card, .nw-card, .db-card, .ac-card, .h4-lcard, .h4-mcard):hover {
    box-shadow: var(--vx-card-hover);
  }
}
@media (max-width: 767px) {
  :root { --vx-page-gutter: 14px; --vx-section-gap: 28px; }
  body[data-page="home"] .h4-head { align-items: center; }
  :root { --ds-header-h: 64px; }
  body[data-page="anime"] .ax-panel { scroll-margin-top: 116px; }
  body[data-page="anime"] .ax-toolbar > * { max-width: 100%; }
  body[data-page="databook"] .db-toolbar { align-items: stretch; }
  body[data-page^="news"] .nw { width: 100%; }
  body[data-page="news-article"] .na { overflow-wrap: anywhere; }
  body:not([data-page="reader"]) :where(.page-title, .h4-head, .nw-sec-head) {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:not([data-page="reader"]) *,
  body:not([data-page="reader"]) *::before,
  body:not([data-page="reader"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}