/* =========================================================================
   BSV Search Spring - the Creations shell (d17, 5 Nov 2026, Marquez D17)
   Hub, the three listings, a writer's page, a tag page. Loaded with the
   reader library, so the four themes (--r-* on <html>) come from
   reader.css; this file only adds the two colours the listings need and
   maps the listing styles (browse.css, the hub) onto the theme.
   Decisions: navy hub hero kept (1a); one Aa choice (2a); the switch above
   the filter stays (3b); slim footer (4a).
   ========================================================================= */

:root { --cs-card: #fbf6ea; --cs-eyebrow: #1D6B66; }
:root[data-reader-theme="light"] { --cs-card: #ffffff; --cs-eyebrow: #1D6B66; }
:root[data-reader-theme="sepia"] { --cs-card: #fbf6ea; --cs-eyebrow: #1D6B66; }
:root[data-reader-theme="dark"]  { --cs-card: #232930; --cs-eyebrow: #6cc3bb; }
:root[data-reader-theme="night"] { --cs-card: #0e1013; --cs-eyebrow: #6cc3bb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-reader-theme]) { --cs-card: #232930; --cs-eyebrow: #6cc3bb; }
}

/* The shell keeps the site's sans for listings; Aa's typeface choice is
   for reading text, so only titles and previews follow it below. */
.cshell { font-family: var(--r-sans); }
.cshell-main { padding-top: 28px; }

/* The bar: wider than the article's, it carries four pills ------------- */
.cshell .cshell-bar-inner { max-width: 76rem; }
.cshell .reader-nav { min-width: 0; }
.cshell-tabs {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto;
}
/* lk1105 item 1 (Marquez 5 Nov 2026): when the pills do not fit, the row scrolls sideways with a thin, visible
   scrollbar - the main site menu's own treatment (nav-fragment 26 Aug) - instead of a hidden one ("Writers" was cut off). */
.cshell-tabs {
  scrollbar-width: thin; scrollbar-color: var(--r-rule) transparent;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-inline: 12px; padding-bottom: 4px;
}
.cshell-tabs::-webkit-scrollbar { height: 6px; }
.cshell-tabs::-webkit-scrollbar-track { background: transparent; }
.cshell-tabs::-webkit-scrollbar-thumb { background: var(--r-rule); border-radius: 3px; }
.cshell-tabs:hover::-webkit-scrollbar-thumb { background: var(--r-soft); }
.cshell-tabs a {
  display: inline-block; white-space: nowrap;
  font: 600 .9375rem/1 var(--r-sans);
  color: var(--r-soft); text-decoration: none;
  padding: 8px 12px; border-radius: 999px; border: 1.5px solid transparent;
}
.cshell-tabs a:hover { color: var(--r-ink); background: color-mix(in srgb, var(--r-ink) 8%, transparent); }
.cshell-tabs a.is-active { color: var(--r-ink); border-color: var(--r-rule); background: var(--cs-card); }
@media (max-width: 600px) {
  .cshell .reader-bar-inner { padding-left: 12px; padding-right: 12px; }
  .cshell-tabs a { padding: 7px 9px; font-size: .875rem; }
}

/* The footer ----------------------------------------------------------- */
.cshell-foot {
  border-top: 1px solid var(--r-rule); margin-top: 56px;
  padding: 22px 20px 40px;
  font: 400 .875rem/1.6 var(--r-sans); color: var(--r-soft);
}
.cshell-foot-inner { max-width: 76rem; margin: 0 auto; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.cshell-foot a { color: var(--r-soft); }
.cshell-foot a:hover { color: var(--r-ink); }
.cshell-foot .cshell-foot-home { margin-left: auto; font-weight: 600; color: var(--r-ink); }

/* Headings and the page title ----------------------------------------- */
.cshell :is(h1, h2, h3):not(.bsv-hub-hero *) { color: var(--r-ink) !important; }
.cshell h1 { font-family: var(--r-serif); }

/* Cards ---------------------------------------------------------------- */
.cshell .creations-row {
  background: var(--cs-card) !important; border-color: var(--r-rule) !important;
  box-shadow: none !important; color: var(--r-ink);
}
.cshell .creations-row :is(a, p, div, span):not([class*="badge"]):not([class*="pill"]):not([class*="price"]):not([class*="licence"]) { color: inherit; }
.cshell .creations-row .views-field-title a { color: var(--r-ink) !important; }
.cshell .creations-row :is(.views-field-field-mc-type, .views-field-field-mc-type *) { color: var(--cs-eyebrow) !important; }
.cshell .creations-row :is(.views-field-field-mc-article-category, .views-field-field-mc-article-category *, [class*="byline"], [class*="byline"] *) { color: var(--r-soft) !important; }

/* The sidebar: switch and filter box ----------------------------------- */
/* d17d (5 Nov 00:39, Marquez): the Writers page's own form (.creations-find-writer) is treated like the Views filters. */
.cshell .layout-sidebar :is(.views-exposed-form, .creations-find-writer) {
  background: var(--cs-card) !important; border-color: var(--r-rule) !important; box-shadow: none !important;
}
/* d17b (5 Nov 00:30, Marquez): only the rounded pill box takes the card colour; the box around it
   shows the page ground, so no second rectangle appears around the switch. */
.cshell .layout-sidebar .creations-switch,
.cshell .settings-tray-editable:has(.creations-switch) { background: none !important; border-color: transparent !important; box-shadow: none !important; }
.cshell .creations-switch ul { background: var(--cs-card) !important; border-color: var(--r-rule) !important; box-shadow: none !important; }
.cshell .creations-switch a { color: var(--r-soft) !important; }
.cshell .creations-switch .is-active a { background: var(--r-ink) !important; color: var(--r-bg) !important; }
.cshell .layout-sidebar :is(label, h2, h3) { color: var(--r-ink) !important; }
.cshell .layout-sidebar :is(select, input[type="text"], input[type="search"]) {
  background: var(--r-bg); color: var(--r-ink); border-color: var(--r-rule);
}
.cshell .layout-sidebar :is(.views-exposed-form, .creations-find-writer) :is(.button, input[type="submit"], button[type="submit"]) {
  background: var(--r-ink) !important; border-color: var(--r-ink) !important; color: var(--r-bg) !important;
}

/* Listing buttons ("Write an article" and the like) -------------------- */
.cshell .bsv-cta-button { background: var(--cs-card); color: var(--r-ink); border-color: var(--r-rule); }

/* The hub: navy hero kept as approved 28 Oct (decision 1a); the lower
   "You know something..." band takes the card colour. ------------------ */
.cshell .bsv-hub-earn { background: var(--cs-card) !important; border-color: var(--r-rule) !important; color: var(--r-ink); }
/* d17c (5 Nov 00:34, Marquez): the four white cards (Tips, Single articles, Subscriptions, Reuse
   licences) keep the hub's own dark text in every theme - only the band's own text follows the theme. */
.cshell .bsv-hub-earn *:not(.bsv-hub-ways, .bsv-hub-ways *) { color: inherit; }

/* d17g (5 Nov 01:05, Marquez): Aa Typeface and Text size work on the shell pages too.
   Typeface: titles, previews and body text follow the reader's font (the hub's two designed
   bands keep theirs). Text size: the whole content area scales (Small 0.9, Medium 1, Large 1.15). */
:root { --cs-scale: 1; }
:root[data-reader-size="s"] { --cs-scale: .9; }
:root[data-reader-size="m"] { --cs-scale: 1; }
:root[data-reader-size="l"] { --cs-scale: 1.15; }
.cshell .cshell-main { zoom: var(--cs-scale); }
.cshell .layout-content :is(h1, .field--name-body, .field--name-body *, .creations-preview, .creations-preview *, .creations-title, .creations-title *, .views-field-title, .views-field-title *, .bsvpay-collection-title, .bsvpay-collection-title *):not(.bsv-hub-hero *, .bsv-hub-earn *) { font-family: var(--r-font) !important; }

@media print { .cshell .reader-bar, .cshell-foot { display: none; } }

/* lk1105 item 3 (Marquez 5 Nov 2026): article covers on the hub's "Newest articles".
   (a) the half-width cards: the cover across the top, full card width, 170px high, cropped;
   (b) the wide first card: B2, the Articles listing's layout - cover 220px on the right beside the head,
       preview and badges full width underneath; (c) "Newest collections" is not touched (cover on the left);
   phones (700px and under): the cover on top for every card. The card's own padding is 24px 26px.
   lk1105b: the B2 grid only above 700px, so a phone card keeps the hub's own layout (tags under the topics). */
.cshell #block-bsvsearch-spring-creations-latest .creations-row ~ .creations-row > .views-field-field-mc-cover { order: -1; flex: 0 0 auto; width: calc(100% + 52px); max-width: none; margin: -24px -26px 16px; padding: 0; }
.cshell #block-bsvsearch-spring-creations-latest .creations-row ~ .creations-row > .views-field-field-mc-cover img { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 16px 16px 0 0; }
/* lk1105c: the hub's own card rules give the tags line no order (0), so on a flex card it jumped above the title;
   Marquez's 3 Nov rule is tags directly under the topics line (topics 5, badges 8). */
.cshell #block-bsvsearch-spring-creations-latest .creations-row > .views-field-field-mc-tags { order: 6; }
@media (min-width: 701px) {
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) { display: grid; grid-template-columns: max-content minmax(0, 1fr) 220px; align-items: start; align-content: start; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > * { grid-column: 1 / 3; width: auto; padding-left: 0; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row) > .views-field-field-mc-cover { grid-column: 3; grid-row: 1 / span 5; padding-left: 24px; align-self: start; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row) > .views-field-field-mc-cover img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-field-mc-type { grid-row: 1; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-title { grid-row: 2; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-uid { grid-row: 3; grid-column: 1; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-created { grid-row: 3; grid-column: 2; padding-left: 8px; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-field-mc-article-category { grid-row: 4; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-field-mc-tags { grid-row: 5; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-field-mc-preview { grid-row: 6; grid-column: 1 / -1; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-field-mc-price-sats { grid-row: 7; grid-column: 1; justify-self: start; margin-top: 14px; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row):has(> .views-field-field-mc-cover) > .views-field-field-mc-licence-offered { grid-row: 7; grid-column: 2; justify-self: start; padding-left: 8px; margin-top: 14px; }
}
@media (max-width: 700px) {
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row) > .views-field-field-mc-cover { order: -1; flex: 0 0 auto; width: calc(100% + 52px); max-width: none; margin: -24px -26px 16px; padding: 0; }
  .cshell #block-bsvsearch-spring-creations-latest .creations-row:not(.creations-row ~ .creations-row) > .views-field-field-mc-cover img { display: block; width: 100%; height: 170px; object-fit: cover; border-radius: 16px 16px 0 0; }
}