/* v141: shared layout & information hierarchy for all four themes.
   Loaded after every theme sheet. Structure only — colours stay with each theme. */

/* Decorative English eyebrows (EXPEDITIONS, LOOT LEDGER …) carry no information. */
html[data-appearance][data-appearance] #mainContent .page-title > div > span:first-child { display: none !important; }
/* Card meta rows can now be empty (the list position "第 N 場" was removed). */
html[data-appearance][data-appearance] #mainContent .party-card .meta:empty, html[data-appearance][data-appearance] #mainContent .panel .meta:empty { display: none !important; }

/* v142: on a loot card the member's share is the number that matters; the sale total supports it. */
html[data-appearance][data-appearance] #mainContent .loot-card .loot-value-row > .highlight strong {
  font-size: clamp(1.6rem, 1.2rem + 1vw, 1.9rem) !important; line-height: 1.1 !important;
  font-variant-numeric: tabular-nums; letter-spacing: 0 !important;
}
html[data-appearance][data-appearance] #mainContent .loot-card .loot-value-row > div:not(.highlight) strong {
  font-size: 1rem !important; font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  /* Get the first raid on screen: the header keeps only the page name. */
  html[data-appearance][data-appearance] #mainContent .page-title { padding-bottom: .5rem !important; margin-bottom: .75rem !important; min-height: 0 !important; }
  html[data-appearance][data-appearance] #mainContent .page-title .page-seal { display: none !important; }
  html[data-appearance][data-appearance] #mainContent .page-title h1 { font-size: 1.55rem !important; line-height: 1.2 !important; margin: 0 !important; }
  html[data-appearance][data-appearance] #mainContent .page-title p { display: none !important; }
  html[data-appearance][data-appearance] #mainContent .page-title::after { display: none !important; }

  html[data-appearance][data-appearance] #mainContent .party-browse-tools, html[data-appearance][data-appearance] #mainContent .loot-browse-tools { gap: .5rem !important; margin: 0 0 .5rem !important; }
  /* Category tabs: one row that scrolls sideways instead of clipping the last tab. */
  html[data-appearance][data-appearance] #mainContent #partyFilters, html[data-appearance][data-appearance] #mainContent #lootFilters, html[data-appearance][data-appearance] #mainContent #guideFilters, html[data-appearance][data-appearance] #mainContent #memberFilters {
    flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: 0 -1rem !important; padding: 2px 1rem !important;
    scroll-padding-inline: 1rem;
  }
  html[data-appearance][data-appearance] #mainContent #partyFilters::-webkit-scrollbar, html[data-appearance][data-appearance] #mainContent #lootFilters::-webkit-scrollbar,
  html[data-appearance][data-appearance] #mainContent #guideFilters::-webkit-scrollbar, html[data-appearance][data-appearance] #mainContent #memberFilters::-webkit-scrollbar { display: none; }
  html[data-appearance][data-appearance] #mainContent #partyFilters > button, html[data-appearance][data-appearance] #mainContent #lootFilters > button, html[data-appearance][data-appearance] #mainContent #guideFilters > button, html[data-appearance][data-appearance] #mainContent #memberFilters > button {
    flex: 0 0 auto !important; white-space: nowrap; min-height: 40px;
  }
  /* View switch and pager on a single compact row. */
  /* The switch takes only the width it needs so the pager fits beside it on the right. */
  html[data-appearance][data-appearance] #mainContent .party-layout-switch, html[data-appearance][data-appearance] #mainContent .loot-layout-switch {
    display: inline-flex !important; width: fit-content !important; max-width: calc(100% - 9rem) !important;
    padding: 3px !important; min-height: 0 !important; gap: 2px !important;
    justify-self: start !important; align-self: flex-start !important; grid-template-columns: none !important;
  }
  html[data-appearance][data-appearance] #mainContent .party-layout-switch button, html[data-appearance][data-appearance] #mainContent .loot-layout-switch button {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 38px !important;
    padding: .3rem .6rem !important; font-size: .82rem !important; letter-spacing: 0 !important;
  }
  /* The text labels stay; the decorative glyphs before them go on narrow screens. */
  html[data-appearance][data-appearance] #mainContent .party-layout-switch button > span[aria-hidden], html[data-appearance][data-appearance] #mainContent .loot-layout-switch button > span[aria-hidden] { display: none !important; }
  html[data-appearance][data-appearance] #mainContent .party-carousel-nav, html[data-appearance][data-appearance] #mainContent .loot-carousel-nav {
    margin: -2.9rem 0 .75rem auto !important; width: max-content !important; gap: .35rem !important;
    position: relative; z-index: 1;
  }
  html[data-appearance][data-appearance] #mainContent .party-carousel-nav button, html[data-appearance][data-appearance] #mainContent .loot-carousel-nav button { min-width: 40px !important; min-height: 40px !important; }
  html[data-appearance][data-appearance] #mainContent .party-carousel-nav span, html[data-appearance][data-appearance] #mainContent .loot-carousel-nav span { white-space: nowrap !important; width: auto !important; min-width: 2.6rem !important; text-align: center; }
}