/* =========================================================
   Rate My Ratings — catalogue.css
   The report catalogue (/reports) and individual report pages.
   Same editorial system as site.css: hairlines, mono eyebrows,
   tabular numerics, restrained radii.
   ========================================================= */

/* ---------- Breadcrumbs --------------------------------- */
.crumbs { margin: 0 0 28px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule-strong); }
.crumbs a { color: var(--fg-muted); text-decoration: none; }
.crumbs a:hover { color: var(--rmr-blue); }
.crumbs li[aria-current] { color: var(--fg-2); }

/* ---------- Catalogue head ------------------------------ */
.cat-head { padding: 64px 0 48px; border-bottom: var(--hairline); }
.cat-head h1 { font-size: 48px; line-height: 1.06; letter-spacing: -0.022em; font-weight: 600; margin: 0 0 24px; max-width: 20ch; text-wrap: balance; }
.cat-head__lede { font-size: 19px; line-height: 1.55; color: var(--fg-2); max-width: 62ch; margin: 0; }
.cat-head__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-top: 28px; }
.cat-head__count .num { color: var(--rmr-blue); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Filter toolbar ------------------------------ */
/* Deliberately quiet: this is a small catalogue, so the filters should
   sit under the listings rather than compete with them. */
.cat-body { padding: 48px 0 96px; border-bottom: var(--hairline); }
.cat-body--related { background: var(--bg-2); }
.cat-tools { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 36px; border-bottom: var(--hairline); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cat-search { position: relative; display: flex; align-items: center; flex: 0 0 268px; margin-left: auto; }
.cat-search__icon { position: absolute; left: 12px; width: 15px; height: 15px; fill: none; stroke: var(--fg-faint); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; transition: stroke var(--dur-base) var(--ease-out); }
.cat-search input { font-family: var(--font-sans); font-size: 14.5px; padding: 9px 14px 9px 34px; width: 100%; border: 1px solid transparent; border-radius: var(--radius-1); background: var(--bg-2); color: var(--fg-1); transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.cat-search input::placeholder { color: var(--fg-faint); }
.cat-search input:hover { background: var(--paper-2); border-color: var(--rule); }
.cat-search input:focus { outline: none; background: var(--bg-3); border-color: var(--rule-strong); }
.cat-search input:focus + .cat-search__icon, .cat-search:focus-within .cat-search__icon { stroke: var(--fg-muted); }
.cat-search input::-webkit-search-cancel-button { cursor: pointer; }

.cat-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 1 auto; min-width: 0; }
.cat-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-filter__more { font-family: var(--font-sans); font-size: 12.5px; padding: 6px 4px; margin-left: 4px; border: 0; background: none; color: var(--rmr-blue); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-out); }
.cat-filter__more:hover { color: var(--rmr-blue-700); }
.cat-filter__more:focus-visible { outline: 2px solid var(--rmr-blue); outline-offset: 2px; border-radius: 2px; }
.cat-filter__lbl { font-size: 12.5px; color: var(--fg-faint); margin-right: 2px; flex: 0 0 62px; }
.chip { font-family: var(--font-sans); font-size: 13px; padding: 6px 12px; border: 1px solid transparent; background: transparent; color: var(--fg-muted); border-radius: var(--radius-1); cursor: pointer; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.chip:hover { background: var(--bg-2); color: var(--fg-1); }
.chip.is-on { background: var(--ink); color: var(--fg-on-dark); }
.chip:focus-visible { outline: 2px solid var(--rmr-blue); outline-offset: 2px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--rmr-blue); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

/* ---------- Catalogue grid ------------------------------ */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card { position: relative; display: flex; flex-direction: column; gap: 10px; background: white; border: var(--hairline); border-radius: 4px; padding: 26px; box-shadow: var(--shadow-1); transition: border-color 120ms var(--ease-out), transform 120ms var(--ease-out); min-width: 0; }
.cat-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.cat-card[hidden] { display: none; }
@keyframes catCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cat-card.is-in { animation: catCardIn 220ms var(--ease-out); }
/* Featured ("Pinned" in the admin panel): an accent edge along the top,
   inside the card's radius. */
.cat-card--featured { border-color: var(--rmr-blue); box-shadow: inset 0 2px 0 var(--rmr-blue), var(--shadow-1); }
.cat-card--featured:hover { border-color: var(--rmr-blue-700); box-shadow: inset 0 2px 0 var(--rmr-blue-700), var(--shadow-1); }
.cat-card__flag { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: white; background: var(--rmr-blue); border-radius: var(--radius-1); padding: 0 8px; }
/* Cards sharing a grid with a featured one reserve the marker row, so every
   title in the row starts on the same line. */
.cat-grid--featured .cat-card:not(.cat-card--featured)::before { content: ""; display: block; height: 22px; }
.cat-card__meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }
.cat-card__title { font-size: 21px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; margin: 0; }
.cat-card__title a { color: var(--fg-1); text-decoration: none; }
.cat-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.cat-card:hover .cat-card__title a { color: var(--rmr-blue); }
.cat-card__title a:focus-visible { outline: none; }
.cat-card__title a:focus-visible::after { outline: 2px solid var(--rmr-blue); outline-offset: 3px; }
.cat-card__summary { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: none; }
.cat-card__foot { margin-top: auto; padding-top: 16px; border-top: var(--hairline); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cat-card__price { font-family: var(--font-mono); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.cat-card__price--none { font-size: 13px; font-weight: 400; color: var(--fg-muted); }
.cat-card__go { font-size: 13.5px; color: var(--rmr-blue); font-weight: 500; }
.cat-card__pub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--fg-faint); margin: 0; }

.cat-none { margin-top: 32px; font-size: 15.5px; color: var(--fg-2); }
.cat-empty { border: var(--hairline); background: white; border-radius: 4px; padding: 48px; max-width: 640px; }
.cat-empty h2 { font-size: 26px; margin: 0 0 14px; letter-spacing: -0.014em; }
.cat-empty p { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0 0 24px; }

.cat-related__h { font-size: 22px; letter-spacing: -0.014em; margin: 0 0 24px; }
.cat-related__more { margin-top: 28px; font-size: 14.5px; }
.cat-related__more a { text-decoration: none; font-weight: 500; }
.cat-related__more a:hover { text-decoration: underline; }

/* ---------- Catalogue foot band ------------------------- */
.cat-foot { padding: 88px 0; background: var(--bg-2); }
.cat-foot__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cat-foot h2 { font-size: 34px; line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; margin: 0 0 20px; max-width: 18ch; text-wrap: balance; }
.cat-foot p { font-size: 16.5px; line-height: 1.65; color: var(--fg-2); max-width: 52ch; }
.cat-foot__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.cat-foot__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cat-foot__facts li { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: var(--hairline); }
.cat-foot__facts .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rmr-blue); }
.cat-foot__facts .v { font-size: 14.5px; line-height: 1.55; color: var(--fg-1); }

/* ---------- Report detail ------------------------------- */
.rep-head { padding: 64px 0 72px; border-bottom: var(--hairline); }
.rep-head__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 64px; align-items: start; }
.rep-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.chip--static { cursor: default; background: var(--bg-2); color: var(--fg-2); font-size: 12.5px; padding: 5px 12px; }
.rep-head h1 { font-size: 46px; line-height: 1.06; letter-spacing: -0.022em; font-weight: 600; margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.rep-head__lede { font-size: 18.5px; line-height: 1.6; color: var(--fg-2); max-width: 56ch; margin: 0; }
.rep-head__cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 32px; }
.rep-head__note { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--fg-faint); margin-top: 20px; max-width: 46ch; letter-spacing: 0.02em; }
.rep-facts { background: white; border: var(--hairline); border-radius: 4px; padding: 26px; box-shadow: var(--shadow-1); }
.rep-facts dl { margin: 0; display: flex; flex-direction: column; }
.rep-facts dl > div { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: var(--hairline); }
.rep-facts dl > div:first-child { padding-top: 0; }
.rep-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.rep-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.rep-facts dd { margin: 0; font-size: 14.5px; color: var(--fg-1); text-align: right; font-weight: 500; }
.rep-facts dd.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

/* The price closes the panel — the last thing read before the CTA. */
.rep-price { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ink); }
.rep-price__k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.rep-price__v { font-family: var(--font-mono); font-size: 40px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.05; color: var(--fg-1); }
.rep-price--none .rep-price__v { font-size: 24px; }

.rep-parts { padding: 88px 0; border-bottom: var(--hairline); }
.rep-parts h2 { font-size: 34px; line-height: 1.12; letter-spacing: -0.018em; font-weight: 600; margin: 0 0 20px; max-width: 20ch; text-wrap: balance; }
.rep-parts__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--ink); }
.rep-part { padding: 28px 24px 28px 0; border-right: var(--hairline); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rep-part + .rep-part { padding-left: 24px; }
.rep-part:last-child { border-right: 0; padding-right: 0; }
.rep-part__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--fg-faint); }
.rep-part h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.006em; margin: 0; }
.rep-part p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; overflow-wrap: break-word; hyphens: auto; }
.rep-parts__foot { margin-top: 32px; padding-top: 20px; border-top: var(--hairline); font-size: 14.5px; color: var(--fg-muted); max-width: 68ch; }

/* ---------- Home teaser --------------------------------- */
.cat-teaser__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.cat-teaser__head h2 { margin-bottom: 0; }
.cat-teaser__all { font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.cat-teaser__all:hover { text-decoration: underline; }
.cat-teaser .cat-grid { grid-template-columns: repeat(3, 1fr); }
.cat-teaser__foot { margin-top: 36px; padding-top: 20px; border-top: var(--hairline); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--fg-muted); }

/* ---------- Responsive ---------------------------------- */
@media (max-width: 1020px) {
  .cat-grid, .cat-teaser .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .rep-parts__grid { grid-template-columns: repeat(2, 1fr); }
  .rep-part { border-right: 0; border-bottom: var(--hairline); padding: 24px 0; }
  .rep-part + .rep-part { padding-left: 0; }
}

@media (max-width: 920px) {
  .rep-head__grid, .cat-foot__grid { grid-template-columns: 1fr; gap: 40px; }
  .cat-head h1 { font-size: 34px; }
  .rep-head h1 { font-size: 34px; }
  .cat-foot h2, .rep-parts h2 { font-size: 28px; }
}

@media (max-width: 640px) {
  .cat-head { padding: 40px 0 32px; }
  .cat-head h1, .rep-head h1 { font-size: 28px; }
  .cat-head__lede, .rep-head__lede { font-size: 16px; }
  .cat-body { padding: 36px 0 64px; }
  .cat-grid, .cat-teaser .cat-grid { grid-template-columns: 1fr; }
  .rep-parts__grid { grid-template-columns: 1fr; }
  .cat-card { padding: 22px; }
  /* One card per row — nothing to align against, so drop the reserved row. */
  .cat-grid--featured .cat-card:not(.cat-card--featured)::before { display: none; }
  .cat-empty { padding: 28px; }
  .cat-foot { padding: 56px 0; }
  .rep-head { padding: 40px 0 48px; }
  .rep-parts { padding: 56px 0; }
  .rep-head__cta .btn, .cat-foot__cta .btn { width: 100%; justify-content: center; }
  .cat-tools { gap: 18px; }
  .cat-search { order: -1; flex: 1 1 100%; margin-left: 0; }
  .cat-filters { gap: 14px; width: 100%; }
  .cat-filter { width: 100%; }
  .cat-filter__lbl { flex: 0 0 100%; }
  .rep-price__v { font-size: 34px; }
}

@media print {
  .cat-tools, .cat-foot, .rep-head__cta { display: none; }
}