/*
 * PromXAI Theme 2.0.21-test258 — stable bilingual Prompts rail geometry and aligned category counts.
 * Single visual owner for the desktop/laptop Prompts browser shell.
 * Scope: canonical Prompts archive at 900px and wider only.
 * Mobile/tablet, prompt detail, library, favorites, Core and database remain unchanged.
 */

.px-home-desktop-only {
  display: none;
}

@media (min-width: 900px) {
  body.home {
    --px-home-rail-bg: var(--px-ui-rail-bg);
    --px-home-rail-soft: var(--px-ui-rail-soft);
    --px-home-rail-hover: var(--px-ui-rail-hover);
    --px-home-rail-line: var(--px-ui-rail-line);
    --px-home-rail-line-strong: var(--px-ui-rail-line-strong);
    --px-home-rail-shadow: var(--px-ui-rail-shadow);
    --px-home-sort-bg: var(--px-ui-sort-bg);
    --px-home-rail-width: 206px;
    --px-home-content-gap: 17px;
    --px-home-content-edge: 17px;
    --px-home-rail-padding-x: 12px;
    --px-shell-rail-width: var(--px-home-rail-width);
    --px-shell-rail-padding-x: var(--px-home-rail-padding-x);
    --px-shell-rail-bg: var(--px-home-rail-bg);
    --px-shell-rail-soft: var(--px-home-rail-soft);
    --px-shell-rail-hover: var(--px-home-rail-hover);
    --px-shell-rail-line: var(--px-home-rail-line);
    --px-shell-rail-line-strong: var(--px-home-rail-line-strong);
    --px-shell-rail-shadow: var(--px-home-rail-shadow);
    --px-shell-dock-bg: color-mix(in srgb, var(--px-home-rail-bg) 94%, transparent);
    padding-bottom: 0;
  }

  body.home .px-home-mobile-header,
  body.home .px-home-mobile-only {
    display: none !important;
  }

  body.home .px-home-desktop-only {
    display: flex;
  }

  body.home .px-home-main {
    padding-top: 0 !important;
  }

  body.home .px-browse--home-concept {
    width: auto !important;
    max-width: none !important;
    margin: 0 var(--px-home-content-edge) 0 calc(var(--px-home-rail-width) + var(--px-home-content-gap)) !important;
    padding: 14px 0 32px !important;
  }

  body.home .px-browse--home-concept .px-browse-layout {
    display: block !important;
  }

  body.home .px-browse--home-concept .px-browse-content {
    min-width: 0;
  }

  /* Content type. Sorting moved out of the rail and now opens the image feed. */
  body.home .px-home-sidebar__section {
    display: grid;
    gap: 6px;
  }

  body.home .px-home-sidebar__section > h2,
  body.home .px-home-sidebar__section-head h2 {
    margin: 0;
    padding-inline: 3px;
    color: var(--px-muted);
    font-size: 9.5px;
    font-weight: 820;
  }

  body.home .px-home-sidebar__type-tabs {
    width: 100%;
    min-height: 37px;
    padding: 3px;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    border: 1px solid var(--px-home-rail-line);
    border-radius: 12px;
    background: var(--px-home-rail-soft);
    box-shadow: none;
  }

  body.home .px-home-sidebar__type-tabs button {
    min-width: 0;
    min-height: 29px;
    padding: 4px 3px;
    border: 0;
    border-radius: 9px;
    color: var(--px-muted);
    background: transparent;
    font-size: 9.5px;
    font-weight: 830;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  }

  body.home .px-home-sidebar__type-tabs button:hover,
  body.home .px-home-sidebar__type-tabs button:focus-visible {
    color: var(--px-text);
    background: var(--px-home-rail-hover);
  }

  body.home .px-home-sidebar__type-tabs button.is-active {
    color: #fff;
    background: var(--px-accent-gradient);
    box-shadow: 0 7px 16px rgb(124 58 237 / 0.17), inset 0 1px 0 rgb(255 255 255 / 0.16);
  }

  /* test440 — Canonical Prompt category count contract.
   * Keep nine useful rows visible, preserve the footer/service trio, and reserve
   * numeric density for the All row only. Term rows are label-first for long-term scale. */
  body.home .px-home-sidebar__categories-section {
    --px-prompt-category-visible-rows: 9;
    --px-prompt-category-row-height: 30px;
    --px-prompt-category-row-gap: 2px;
    min-height: 0;
    flex: 0 1 auto;
    grid-template-rows: auto minmax(0, 1fr);
    padding-top: 8px;
    border-top: 1px solid var(--px-home-rail-line);
  }

  body.home .px-home-sidebar__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body.home .px-home-sidebar__section-head small {
    display: none;
  }

  body.home .px-home-sidebar__categories {
    min-height: 0;
    /* 9 × 30px rows + 8 × 2px gaps + 8px vertical padding = 294px. */
    height: 294px;
    max-height: 294px;
    padding: 2px 1px 6px 0;
    display: flex !important;
    flex: 0 1 auto;
    flex-direction: column;
    gap: var(--px-prompt-category-row-gap);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgb(112 90 255 / .22) transparent;
  }

  body.home .px-home-sidebar__categories::-webkit-scrollbar {
    width: 2px;
  }

  body.home .px-home-sidebar__categories::-webkit-scrollbar-track {
    background: transparent;
  }

  body.home .px-home-sidebar__categories::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(112 90 255 / .22);
  }

  body.home .px-home-sidebar__categories .px-category-button {
    width: 100%;
    min-height: var(--px-prompt-category-row-height) !important;
    height: var(--px-prompt-category-row-height) !important;
    flex: 0 0 var(--px-prompt-category-row-height);
    padding: 4px 8px 4px 6px !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 7px !important;
    color: var(--px-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 9.7px !important;
    font-weight: 780 !important;
  }

  body.home .px-home-sidebar__categories .px-category-button__label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.home .px-home-sidebar__categories .px-category-button:hover,
  body.home .px-home-sidebar__categories .px-category-button:focus-visible {
    color: var(--px-text) !important;
    border-color: var(--px-home-rail-line) !important;
    background: var(--px-home-rail-hover) !important;
  }

  body.home .px-home-sidebar__categories .px-category-button.is-active {
    /* Preserve the approved Arabic edge treatment in both UI languages. */
    width: calc(100% + var(--px-home-rail-padding-x) + 1px) !important;
    margin-left: calc(-1 * (var(--px-home-rail-padding-x) + 1px)) !important;
    padding-left: calc(var(--px-home-rail-padding-x) + 8px) !important;
    border-radius: 0 10px 10px 0 !important;
    color: #fff !important;
    border-color: transparent !important;
    background: var(--px-accent-gradient) !important;
    box-shadow: 0 7px 15px rgb(124 58 237 / 0.14) !important;
  }

  body.home .px-home-sidebar__categories .px-category-button__line {
    display: none;
  }

  body.home .px-home-sidebar__categories .px-category-button--term {
    padding-inline-end: 10px !important;
  }

  body.home .px-home-sidebar__categories .px-category-button--term .px-category-button__label {
    padding-inline: 2px 3px;
  }

  body.home .px-home-sidebar__categories .px-category-button__count {
    position: relative;
    flex: 0 0 auto;
    min-width: 30px;
    height: 20px;
    margin-inline-start: auto;
    padding-inline: 7px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: inherit;
    background: rgb(128 143 177 / .10);
    font-size: 8.4px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
  }

  body.home .px-home-sidebar__categories .px-category-button--all.is-active .px-category-button__count {
    background: rgb(255 255 255 / .18);
  }

  body.home .px-home-sidebar__categories .px-category-button--term .px-category-button__count {
    display: none !important;
  }

  /* Light sorting row that introduces the image feed. */
  body.home .px-home-content-topline {
    /* Sorting keeps the same physical order and edge position in both languages. */
    direction: rtl !important;
    min-height: 42px;
    margin: 0 1px 11px;
    padding: 4px 5px 4px 7px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--px-home-rail-line);
  }

  html[data-ui-lang="en"] body.home .px-home-content-topline {
    padding: 4px 7px 4px 5px;
  }

  body.home .px-home-content-sort-tabs {
    direction: rtl !important;
    min-height: 32px;
    padding: 3px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--px-home-rail-line);
    border-radius: 999px;
    background: var(--px-home-sort-bg);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }

  body.home .px-home-content-sort-tabs button {
    min-width: 67px;
    min-height: 26px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    color: var(--px-muted);
    background: transparent;
    font-size: 10px;
    font-weight: 780;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  }

  body.home .px-home-content-sort-tabs button:hover,
  body.home .px-home-content-sort-tabs button:focus-visible {
    color: var(--px-text);
    background: var(--px-home-rail-hover);
  }

  body.home .px-home-content-sort-tabs button.is-active {
    color: #fff;
    background: var(--px-accent-gradient);
    box-shadow: 0 6px 14px rgb(124 58 237 / .16);
  }

  body.home .px-home-results-meta {
    min-width:68px;
    min-height:30px;
    padding-inline:10px;
    margin:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    color: var(--px-muted);
    font-size: 9.5px;
    font-weight: 750;
    text-align:center;
    white-space: nowrap;
    border-inline-start:1px solid color-mix(in srgb,var(--px-border) 72%,transparent);
  }

  html[data-ui-lang="en"] body.home .px-home-results-meta {
    direction: ltr;
  }

  /* Desktop toolbar is replaced by the top sorting row; mobile remains unchanged. */
  body.home .px-browse--home-concept > .px-browse-layout > .px-browse-content > .px-browse-toolbar {
    display: none !important;
  }

  /* Automatic feed: keep app.js button as an inaccessible trigger and show one loader. */
  body.home .px-load-more-wrap--automatic {
    min-height: 70px;
    margin: 4px 0 0;
    display: grid;
    place-items: center;
  }

  body.home .px-load-more-wrap--automatic > [data-load-more] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.home .px-home-infinite-loader {
    min-width: 152px;
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid var(--px-home-rail-line);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--px-muted);
    background: var(--px-home-sort-bg);
    box-shadow: 0 10px 24px rgb(7 12 25 / .075);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
    font-size: 9.5px;
    font-weight: 750;
  }

  body.home .px-home-infinite-loader[hidden] {
    display: none !important;
  }

  body.home .px-home-infinite-loader__spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgb(112 123 154 / .22);
    border-top-color: var(--px-purple);
    border-inline-end-color: var(--px-blue);
    border-radius: 50%;
    animation: px-home-feed-spin .72s linear infinite;
  }

  body.home .px-browse:not(.is-loading) .px-home-infinite-loader__spinner {
    animation-duration: 1.15s;
    opacity: .78;
  }

  @keyframes px-home-feed-spin {
    to { transform: rotate(360deg); }
  }

  /* Desktop homepage uses one floating navigation owner; remove the duplicate text footer. */
  body.home .px-footer {
    display: none !important;
  }

  /* Keep the last feed row and loader clear of the fixed dock. */
  body.home .px-browse--home-concept {
    padding-bottom: 94px !important;
  }
}

@media (min-width: 900px) and (max-width: 1240px) {
  body.home {
    --px-home-rail-width: 190px;
    --px-home-content-gap: 13px;
    --px-home-content-edge: 13px;
    --px-home-rail-padding-x: 10px;
  }


  body.home .px-home-content-sort-tabs button {
    min-width: 60px;
    padding-inline: 9px;
  }

}

@media (max-width: 899px) {
  body.home .px-home-desktop-only {
    display: none !important;
  }

  body.home .px-home-mobile-header,
  body.home .px-home-mobile-only {
    display: block;
  }
}

/* ========================================================================
   PromXAI Theme 2.0.0-RC41 — animated chronology clock
   ======================================================================== */
@keyframes pxChronologyDesktopClock {
  0% { transform: rotate(0deg) scale(1); }
  42% { transform: rotate(220deg) scale(1.12); filter: drop-shadow(0 0 7px rgb(118 91 255 / .42)); }
  100% { transform: rotate(360deg) scale(1); filter: none; }
}
@media (min-width: 900px) {
  body.home .px-home-content-sort-tabs button[data-home-chronology] { min-width:94px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  body.home .px-home-content-sort-tabs button[data-home-chronology] > .px-icon { width:18px;height:18px; flex:0 0 18px; color:currentColor; transform-origin:50% 50%; }
  body.home .px-home-content-sort-tabs button[data-home-chronology] .px-chronology-label-wrap { display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; }
  body.home .px-home-content-sort-tabs button[data-home-chronology].is-chronology-switching > .px-icon { animation:pxChronologyDesktopClock .52s cubic-bezier(.2,.8,.2,1) both; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .px-home-content-sort-tabs button[data-home-chronology].is-chronology-switching > .px-icon { animation:none !important; }
}