/* ============================================================================================
   library-overage.css — resource, blog and taxonomy discovery pages (2026-09-18)

   WHAT THIS IS
   Every page's linked CSS is held to 40 KB gzipped (scripts/verify.mjs, rule P2). The shared sheet
   is at its line, so the styles for /resource-library, /blog and their collection routes live here,
   linked from those routes with `data-overage`, as go-overage.css serves the landing pages.

   HOW IT IS MEASURED
   The verifier leaves this sheet out of the P2 total and reports it on its own line.

   DESIGN RECORD
   docs/superpowers/specs/2026-09-18-resource-library-design.md
   ============================================================================================ */

/* ---- the breadcrumb ---------------------------------------------------------------------
   Its own recipe rather than the editorial sheet's `.breadcrumb`, which is unscoped and carries an
   editorial page's furniture: a 720px measure, 64px of lead and a full-bleed lavender band behind it.
   A marketing page wants none of those. The shape is the system's — a flex row of quiet links with the
   drawn chevron between them (2026-09-18).

   NOTE: this is the third copy of that shape, after editorial.css and go-overage.css. They should
   become one `.crumb` in the shared sheet when it has room; unifying them is its own change, with its
   own pass over the editorial and landing pages. */

.lib-crumb { padding-block: var(--s-5) 0; color: var(--muted); font-size: var(--fs-small); }
.lib-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.lib-crumb li { display: flex; align-items: center; gap: var(--s-2); }
.lib-crumb li + li::before { content: '\203A'; color: var(--faint); }
.lib-crumb a { color: var(--ink); text-decoration: none; }
.lib-crumb a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.lib-crumb [aria-current='page'] { color: var(--muted); }

/* ---- the control bar under the open hero -----------------------------------------------
   One pill holding Topics, Types and Search, after the reference. It sits on the hero, which
   draws no rails, so it is centred on the column rather than inset from them.               */

/* The facet panel has to leave the hero (Robert, 2026-09-18). `.hero--s2` clips its subtree with
   `overflow: hidden` so the aurora cannot spill; the panel was being cut off at the hero's foot, which
   reads as a z-index fault but is not one. The aurora already clips itself (`.s2-aurora` carries its own
   overflow), so this hero can let its children out. It also takes a stacking context of its own, since
   the panel's z-index is otherwise trapped inside `.hero--s2-inner`'s. */
.hero--s2.hero--library { overflow: visible; z-index: 5; }
.hero--s2.hero--library .hero--s2-inner { overflow: visible; }

/* The hero in two columns (Robert, 2026-09-18): the eyebrow, title and its line on the left, the controls
   alone on the right. The open hero's default puts the line in the right column, which left the title and
   its line crowded against each other on one baseline and the controls stranded in a row below. */
.hero--library .hero--s2-inner {
  grid-template-areas: 'eyebrow eyebrow' 'title slot' 'message slot';
  align-items: start;
}
.hero--library .s2-sub { margin-top: var(--s-4); max-width: 46ch; }
.lib-controls {
  grid-area: slot;
  display: flex;
  justify-content: flex-start;
  align-self: center;
}
@media (max-width: 960px) {
  .hero--library .hero--s2-inner { grid-template-areas: 'eyebrow eyebrow' 'title title' 'message message' 'slot slot'; }
  .lib-controls { margin-top: var(--s-5); }
}
.lib-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  background: var(--bg);
  box-shadow: var(--menu-shadow);
  max-width: 100%;
}
.lib-bar > * + * { border-left: 1px solid var(--border); }

/* a facet opens a native <details>, so it discloses without a script and closes on Escape */
.lib-drop { position: relative; }
.lib-drop > summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--sp-44);
  padding: 0 var(--sp-20);
  border-radius: var(--r-control);
  font-size: var(--fs-ui);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.lib-drop > summary::-webkit-details-marker { display: none; }
/* the drawn caret points down, and turns up when the facet is open: the menus' own mark, rotated
   rather than a second drawing (NAV-006) */
.lib-drop > summary > .chev { margin-left: 0; top: -.14em; transform: rotate(90deg); }
.lib-drop[open] > summary > .chev { transform: rotate(-90deg); }
.lib-drop > summary:hover > .chev { transform: rotate(90deg); }
.lib-drop[open] > summary:hover > .chev { transform: rotate(-90deg); }
.lib-drop > summary:hover { background: var(--bg-2); }
.lib-drop[open] > summary { background: var(--bg-2); }
.lib-drop-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  left: 0;
  min-width: 268px;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--menu-radius);
  background: var(--bg);
  box-shadow: var(--menu-shadow);
}
.lib-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--sp-20);
  min-width: 232px;
}
.lib-search input {
  flex: 1;
  min-width: 0;
  height: var(--sp-44);
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-ui);
  color: var(--ink);
}
.lib-search input:focus { outline: none; }
.lib-search .icon { color: var(--muted); flex: none; }

/* ---- a facet option, in the bar's panel and in the rail alike ---------------------------
   A <fieldset> groups the options for assistive technology, but the browser's default 2px groove
   border draws a box around every group — the "checkbox wrapper" (Robert, 2026-09-18). It is a
   grouping element here, not a visible frame, so it carries no chrome of its own.               */

.lib-opt-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1px; }

.lib-opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px var(--s-3);
  border-radius: var(--r-frame);
  font-size: var(--fs-ui-small);
  line-height: var(--lh-tight);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.lib-opt:hover { background: var(--bg-2); }

/* The box is drawn rather than the platform's: the default control is large, square-cornered and a
   different shape on every OS, which is what made a column of them read as a stack of wrappers. This
   is the field corner, the system hairline, and the brand gradient when it is on. */
.lib-opt input {
  appearance: none;
  flex: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-xs);
  background: var(--bg);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lib-opt input::before {
  content: '';
  width: 9px;
  height: 9px;
  transform: scale(0);
  transition: transform var(--t-fast) var(--ease);
  /* the tick, drawn once: no sprite reference inside a control that repeats thirty times */
  background: #fff;
  clip-path: polygon(14% 47%, 0 61%, 39% 100%, 100% 22%, 85% 9%, 37% 70%);
}
.lib-opt input:checked { background: var(--grad-brand); border-color: transparent; }
.lib-opt input:checked::before { transform: scale(1); }
.lib-opt input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.lib-opt:has(input:checked) { background: var(--bg-2); }
.lib-opt:has(input:checked) .lib-opt-name { color: var(--ink); font-weight: var(--fw-display); }

.lib-opt-name { flex: 1; min-width: 0; }
.lib-opt-count { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--fs-micro); }
/* an option that would return nothing says so before it is clicked, rather than after */
.lib-opt.is-empty { opacity: .4; }

/* ---- the collection page's rail ---------------------------------------------------------
   The page's second column on the ruled grid, not a card: the divider is the grid's own line. */

.lib-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--sp-48);
  align-items: start;
}
.lib-rail { position: sticky; top: 96px; display: grid; gap: var(--s-4); }
.lib-rail .lib-search {
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  min-width: 0;
}
.lib-rail-group { border-top: 1px solid var(--border); padding-top: var(--s-3); }
.lib-rail-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--fs-ui);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.lib-rail-group > summary::-webkit-details-marker { display: none; }
.lib-rail-group > summary::after { content: ''; width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-fast) var(--ease); }
.lib-rail-group[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.lib-rail-list { display: grid; gap: 2px; padding: var(--s-2) 0 var(--s-3); }

.lib-status { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-ui-small); color: var(--muted); border-top: 1px solid var(--border); padding-top: var(--s-4); }
.lib-reset { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--bg); font: inherit; font-size: var(--fs-ui-small); color: var(--ink); cursor: pointer; }
.lib-reset:hover { background: var(--bg-2); border-color: var(--border-strong); }

/* ---- cards ------------------------------------------------------------------------------ */

.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--s-5); }
/* beside the rail the column is ~856px at 1440, where a 268px minimum only fits two: the results want
   three across, as the reference's do */
.lib-results .lib-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.lib-card { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }  /* its one track never outgrows the column: a broken image's intrinsic width had widened it and the page scrolled sideways (2026-09-30) */
.lib-card.is-out, .lib-card.is-folded { display: none; }

.lib-card-link {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-4) var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--tile);
  color: inherit;
  text-decoration: none;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lib-card-link:hover, .lib-card-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(60, 45, 110, .13);
  outline: none;
}
.lib-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-field); background: var(--bg-2); }
.lib-card .pill { justify-self: start; }
.lib-card-title { margin: 0; font-size: var(--fs-card-sm); line-height: var(--lh-tight); color: var(--ink); text-wrap: pretty; }
.lib-card-sum { margin: 0; font-size: var(--fs-ui-small); color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- featured and spotlight -------------------------------------------------------------- */

.lib-feature { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
/* the featured card fills its column: left on the shared auto-fill track it renders at one card's minimum
   and the title breaks every second word */
.lib-feature-main { grid-template-columns: minmax(0, 1fr); }
.lib-feature-main .lib-card-img { aspect-ratio: 16 / 9; }
.lib-feature-main .lib-card-link { padding: var(--s-5); }
.lib-feature-main .lib-card-title { font-size: var(--fs-card); }
.lib-feature-main .lib-card-sum { font-size: var(--fs-ui); -webkit-line-clamp: 2; }
.lib-spot { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); align-content: start; }
.lib-spot .lib-card-link { grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-3); }
.lib-spot .lib-card-img { aspect-ratio: 4 / 3; grid-row: span 2; }
.lib-spot .lib-card-title { font-size: var(--fs-ui); }

/* A section whose container ends in ruled cells pads nothing at its foot, so the cells' own joint dots
   and the next section's rule land on one line. With the section's 60px there, the cells closed 55px
   above the section and the page drew two rows of dots with the rails stranded between them (Robert,
   2026-09-18). This is the bargain .ramps and .latest already make; the clip keeps the cells' 100vw
   rule from widening the page. */
.lib-collections { padding-bottom: 0; overflow-x: clip; }
/* the grid's own padding rule carries two selectors, so the section's needs to match it or the foot
   padding comes back and the two dot rows return — the same pair .ramps carries */
.marketing-grid > .lib-collections { padding-bottom: 0; }

/* ---- a collection row --------------------------------------------------------------------- */

.lib-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: var(--s-7) 0 var(--s-4); }
.lib-row-head h2 { margin: 0; font-size: var(--fs-subhead); line-height: var(--lh-tight); }
.lib-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- browse and search ---------------------------------------------------------------------
   One attribute switches the page: browsing shows the curated sections, searching shows the grid. */

[data-library][data-mode='search'] [data-lib-browse] { display: none; }
[data-library][data-mode='browse'] [data-lib-searchonly] { display: none; }

.lib-more { margin-top: var(--s-6); display: flex; justify-content: center; }
/* Button recipes set their own display value. These selectors must outrank that value so the filter
   island's native hidden state stays authoritative until a reset or another result page exists. */
.lib-status .lib-reset[hidden],
.lib-more [data-lib-more][hidden] { display: none; }

/* Without scripting nothing can be filtered, so the controls do not render, everything shows, and the
   page is a plain grid — the same bargain the integration fold makes. */
@media (scripting: none) {
  .lib-controls, .lib-rail, .lib-more, .lib-status { display: none; }
  .lib-layout { grid-template-columns: minmax(0, 1fr); }
  .lib-card.is-folded { display: grid; }
  [data-library] [data-lib-searchonly] { display: revert; }
}
@media print {
  .lib-controls, .lib-rail, .lib-more { display: none; }
  .lib-card.is-folded { display: grid; }
}

/* ---- narrow --------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .lib-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .lib-rail { position: static; }
  .lib-feature { grid-template-columns: minmax(0, 1fr); }
  .lib-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lib-bar { flex-direction: column; width: 100%; border-radius: var(--r-card); }
  .lib-bar > * + * { border-left: 0; border-top: 1px solid var(--border); }
  .lib-drop-panel { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
  .lib-grid, .lib-row { grid-template-columns: minmax(0, 1fr); }
  .lib-spot .lib-card-link { grid-template-columns: 76px minmax(0, 1fr); }
}

/* More from the library (2026-10-01): one ruled row of the other shelves closes the page, so the row sits on the
   footer's rule rather than leaving open grid under it (Robert) */
.marketing-grid > .lib-more-collections { padding-bottom: 0; }

/* The collection grid's wide cell (Robert, 2026-10-01): with five collections the second row holds one, so the last
   three quarters are one cell featuring a product tour, its cover beside its name and the link. The grid closes: a
   rule between the rows (the second row's own top border, rail to rail) and a dot only where two lines meet, along
   that rule at the rails and the three dividers that touch it, and along the foot at the rails and the quarter where
   the wide cell begins. The selectors carry .cells--4 too: this sheet loads before the shared one, so the override
   has to outrank `.cells--4::after` by specificity. */
.cells--feature-last { --hd: radial-gradient(circle, var(--grid-dot) 1px, var(--bg) 1.5px 9.5px, transparent 10px); }
.cells--4.cells--feature-last > .cells-feature { grid-column: span 3; }
.cells--4.cells--feature-last::after { background:
    var(--hd) left .5px top .5px / 20px 20px no-repeat, var(--hd) left calc(25% + .5px) top .5px / 20px 20px no-repeat, var(--hd) left calc(50% + .5px) top .5px / 20px 20px no-repeat,
    var(--hd) left calc(75% + .5px) top .5px / 20px 20px no-repeat, var(--hd) right .5px top .5px / 20px 20px no-repeat,
    var(--hd) left .5px bottom -.5px / 20px 20px no-repeat, var(--hd) left calc(25% + .5px) bottom -.5px / 20px 20px no-repeat,
    var(--hd) right .5px bottom -.5px / 20px 20px no-repeat; }
.cells--4.cells--feature-last > li:nth-child(n + 5) { position: relative; border-top: 1px solid var(--page-grid-ink); }
/* the joints on the row rule: each pseudo-element runs 10px past its cell either side so a percentage lands on the
   cell's own coordinates (the inset trick .cells::after uses), centred on the rule's own half pixel */
.cells--4.cells--feature-last > li:nth-child(5)::before, .cells--4.cells--feature-last > .cells-feature::before {
  content: ''; position: absolute; z-index: 1; top: -9.5px; left: -10px; right: -10px; height: 20px; pointer-events: none; }
.cells--4.cells--feature-last > li:nth-child(5)::before { background: var(--hd) left .5px top 0 / 20px 20px no-repeat; }
.cells--4.cells--feature-last > .cells-feature::before { background:
    var(--hd) left .5px top 0 / 20px 20px no-repeat, var(--hd) left calc(100% / 3 + .5px) top 0 / 20px 20px no-repeat,
    var(--hd) left calc(200% / 3 + .5px) top 0 / 20px 20px no-repeat, var(--hd) right .5px top 0 / 20px 20px no-repeat; }
.cell--feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; column-gap: var(--s-6); row-gap: var(--s-3); align-items: center; }
.cell--feature > .cell-title { align-self: end; }
.cell--feature > .cell-more { align-self: start; margin-top: 0; }
.cell-feature-img { grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-field); border: 1px solid var(--border); background: var(--bg-2); }
/* folded to two columns, the wide cell takes the free half beside the fifth collection, its cover above its name,
   so the two-by-two grid closes on three even rows; the shared .cells--4 dividers and rules draw it, and the joint
   dots go, as they do for every folded grid */
@media (max-width: 999px) {
  .cells--4.cells--feature-last > .cells-feature { grid-column: auto; }
  .cells--4.cells--feature-last > li:nth-child(n + 5) { border-top-width: 0; }
  .cells--4.cells--feature-last > li:nth-child(5)::before, .cells--4.cells--feature-last > .cells-feature::before { display: none; }
  .cell--feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .cell-feature-img { grid-row: auto; }
  .cell--feature > .cell-title { align-self: auto; }
}