/* assets/res-hub.css · The Resources hub around the report: /resources, /resources/field-notes, /resources/toolkit
   (9 Nov 2026). Light (brand law 2: a public, community resource): ghost-white ground, white cards with the card
   shadow and no border, the Dawn duo on the masthead only (bounded band, full-field text-safe). Mono ALL CAPS for
   marketing headlines; Plex Sans for structure; Mono for numerals and meta. Magenta: the masthead's one action
   ("Add your numbers"); no magenta insight on these pages. Patterns: ClickUp's learn hub, editorial index and
   template gallery (.research/plan3/clickup_catalog.md, archetypes 12 and 17). */

/* the footer's off-screen honeypot field would widen an RTL page by ~10,000px: clip the page sideways, as the other
   pages' sheets do (assets/rivet.css) */
html, body{ overflow-x:clip; }
main.rh{ --rh-gap:clamp(16px, 2vw, 24px); --rh-r:var(--radius-card, 12px); --hairline:#E3E3EA;
  background:var(--ghost-white, #F8F8FA); color:var(--ink); padding-block-end:clamp(24px, 4vw, 48px); }
main.rh *, main.rh *::before, main.rh *::after{ box-sizing:border-box; }
main.rh p{ margin:0; }

/* breadcrumb */
.rh-crumbs{ padding-block:16px 0; }
.rh-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; font:500 14px/1.4 var(--font-sans); color:var(--ink-muted); }
.rh-crumbs li + li::before{ content:"/"; margin-inline-end:6px; color:var(--slate-400, #A4A4C7); }
.rh-crumbs a{ color:var(--ink-muted); text-decoration:none; }
.rh-crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.rh-crumbs [aria-current]{ color:var(--ink); font-weight:600; }

/* masthead: one bounded Dawn band, centred */
.rh-mast{ padding-block:clamp(16px, 2.4vw, 24px) 0; }
.rh-mast__band{ display:grid; justify-items:center; gap:14px; text-align:center; border-radius:24px;
  padding:clamp(36px, 6vw, 72px) clamp(20px, 4vw, 56px); background:var(--duo-dawn); color:#000; }
.rh-mast__eye{ font:500 12px/1.3 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:#2a2a33; }
.rh-mast__h{ margin:0; max-inline-size:20ch; font-family:var(--font-mono); font-weight:600; text-transform:uppercase;
  letter-spacing:-.03em; line-height:1.05; font-size:var(--fs-display, 64px); text-wrap:balance; color:#000; }
.rh-mast__lead{ max-inline-size:58ch; font:400 var(--fs-lead, 18px)/1.6 var(--font-sans); color:#1a1a22; }
.rh-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.rh-acts--c{ justify-content:center; margin-block-start:6px; }

/* sections */
.rh-sec{ padding-block:clamp(28px, 4vw, 48px) 0; }
.rh-sec__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:8px 24px; margin-block-end:18px; }
.rh-eye{ font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); margin-block-end:6px; }
.rh-sec__h{ margin:0; font:600 var(--fs-h2, 32px)/1.2 var(--font-sans); letter-spacing:-.01em; text-wrap:balance; max-inline-size:32ch; }
.rh-more{ font:600 14px/1.3 var(--font-sans); color:var(--purple); text-decoration:none; white-space:nowrap; }
.rh-more:hover{ text-decoration:underline; }
.rh-more:focus-visible, .rh-door:focus-visible, .rh-list a:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; border-radius:6px; }

/* report KPIs and doors */
.rh-kpis{ list-style:none; margin:0 0 var(--rh-gap); padding:clamp(18px, 2.4vw, 28px); display:grid; gap:18px 24px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr)); background:#fff; border-radius:var(--rh-r); box-shadow:var(--shadow-card); }
.rh-kpi{ display:grid; gap:6px; }
.rh-kpi__v{ font:600 var(--fs-h1, 48px)/1.05 var(--font-mono); font-variant-numeric:tabular-nums; }
.rh-kpi__l{ font:500 11px/1.3 var(--font-mono); letter-spacing:var(--track-label, .08em); text-transform:uppercase; color:var(--ink-muted); }
.rh-doors{ list-style:none; margin:0; padding:0; display:grid; gap:var(--rh-gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rh-door{ position:relative; display:grid; gap:6px; block-size:100%; padding:20px 48px 20px 20px; border-radius:var(--rh-r);
  background:#fff; box-shadow:var(--shadow-card); color:var(--ink); text-decoration:none;
  transition:transform var(--dur-instant, 120ms) var(--ease-standard, ease), box-shadow var(--dur-instant, 120ms); }
.rh-door:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10); }
.rh-door__h{ font:600 var(--fs-h4, 20px)/1.2 var(--font-sans); }
.rh-door__p{ font:400 14px/1.6 var(--font-sans); color:var(--ink-muted); }
.rh-door__go{ position:absolute; inset-inline-end:20px; top:20px; color:var(--purple); font-weight:600; }
[dir="rtl"] .rh-door__go, [dir="rtl"] .rh-more span{ display:inline-block; transform:scaleX(-1); }
[dir="rtl"] .rh-door{ padding:20px 20px 20px 48px; }
[dir="rtl"] .rh-kpi__v{ direction:ltr; unicode-bidi:isolate; text-align:end; }

/* chips */
.rh-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rh-chip{ appearance:none; display:inline-flex; align-items:center; gap:8px; min-block-size:38px; padding:0 16px; border-radius:999px;
  border:0; background:#fff; box-shadow:inset 0 0 0 1px var(--hairline); color:var(--ink); cursor:pointer; font:600 14px/1 var(--font-sans); }
.rh-chip:hover{ box-shadow:inset 0 0 0 1px var(--slate-400, #A4A4C7); }
.rh-chip[aria-pressed="true"]{ background:var(--ink); color:#fff; box-shadow:none; }
.rh-chip:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.rh-chip__n{ font:500 11px/1 var(--font-mono); opacity:.7; font-variant-numeric:tabular-nums; }

/* cards: articles and toolkit items */
.rh-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rh-tag{ display:inline-flex; padding:3px 10px; border-radius:999px; background:var(--purple-subtle, #F6F8FF); color:var(--purple);
  font:600 12px/1.4 var(--font-sans); }
.rh-soon, .rh-lock{ display:inline-flex; align-items:center; gap:6px; font:500 11px/1.3 var(--font-mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); }
.rh-lock::before{ content:""; inline-size:10px; block-size:11px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat; }
.rh-arts, .rh-kits{ list-style:none; margin:0; padding:0; display:grid; gap:var(--rh-gap); grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rh-arts--index, .rh-kits--index{ margin-block-start:20px; }
.rh-art, .rh-kit{ display:grid; align-content:start; gap:10px; padding:22px; border-radius:var(--rh-r); background:#fff; box-shadow:var(--shadow-card); }
.rh-art[hidden], .rh-kit[hidden]{ display:none; }
.rh-art__h, .rh-kit__h{ margin:0; font:600 var(--fs-h4, 20px)/1.2 var(--font-sans); text-wrap:balance; }
.rh-art__p, .rh-kit__p{ font:400 var(--fs-body, 16px)/1.6 var(--font-sans); color:var(--ink-muted); }
.rh-art__by, .rh-kit__for{ font:500 12px/1.4 var(--font-mono); letter-spacing:.02em; color:var(--ink-muted); margin-block-start:auto; }
@media (min-width:900px){
  .rh-art--big{ grid-column:1 / -1; padding:clamp(24px, 3vw, 40px); background:linear-gradient(135deg, #fff 0 55%, var(--purple-subtle, #F6F8FF)); }
  .rh-art--big .rh-art__h{ font:600 var(--fs-h2, 32px)/1.2 var(--font-sans); max-inline-size:26ch; }
  .rh-art--big .rh-art__p{ font-size:var(--fs-lead, 18px); max-inline-size:60ch; }
}

/* toolkit tools row */
.rh-tools{ display:grid; gap:14px; }
.rh-search{ inline-size:100%; max-inline-size:520px; min-block-size:48px; padding:0 16px; border-radius:10px; border:0;
  box-shadow:inset 0 0 0 1px var(--hairline); background:#fff; color:var(--ink); font:400 16px/1 var(--font-sans); }
.rh-search:focus-visible{ outline:3px solid var(--purple); outline-offset:2px; }
.rh-empty{ margin-block-start:20px; padding:20px; border-radius:var(--rh-r); border:1px dashed var(--hairline); color:var(--ink-muted); }
.rh-empty[hidden]{ display:none; }

/* frameworks / coming lists */
.rh-split{ display:grid; gap:var(--rh-gap); grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.rh-panel{ padding:clamp(20px, 2.6vw, 30px); border-radius:var(--rh-r); background:#fff; box-shadow:var(--shadow-card); }
.rh-panel .rh-sec__head{ margin-block-end:10px; }
.rh-list{ list-style:none; margin:0; padding:0; display:grid; }
.rh-list li{ border-block-start:1px solid var(--hairline); }
.rh-list a, .rh-list li > span:first-child{ display:grid; gap:2px; padding-block:14px; color:var(--ink); text-decoration:none; }
.rh-list li:has(> span){ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.rh-list a:hover b{ text-decoration:underline; }
.rh-list b{ font:600 var(--fs-body, 16px)/1.4 var(--font-sans); }
.rh-list span span, .rh-list a span{ font:400 14px/1.5 var(--font-sans); color:var(--ink-muted); }

/* join band: ink on white, the page's quiet close */
.rh-join{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding:clamp(24px, 3vw, 40px);
  border-radius:var(--rh-r); background:#fff; box-shadow:var(--shadow-card); }
.rh-join__h{ margin:0 0 6px; font:600 var(--fs-h3, 24px)/1.2 var(--font-sans); }
.rh-join__p{ color:var(--ink-muted); max-inline-size:56ch; }

/* typography on the locked ramp (review 9 Nov): phones drop one step; Arabic takes no caps or tight tracking */
@media (max-width:719px){
  .rh-mast__h{ font-size:var(--fs-display-m, 40px); }
  .rh-sec__h{ font-size:var(--fs-h3, 24px); }
  .rh-kpi__v{ font-size:var(--fs-h2, 32px); }
  .rh-art--big .rh-art__h{ font-size:var(--fs-h3, 24px); }
}
:lang(ar) .rh-mast__h{ text-transform:none; letter-spacing:0; line-height:1.25; }
/* type.css sizes every #main h1 from --role-hero with an id selector: set the variable instead */
.rh-mast__h{ --role-hero:var(--fs-display, 64px); }
@media (max-width:719px){ .rh-mast__h{ --role-hero:var(--fs-display-m, 40px); } }
/* shared kit buttons and links carry 15px: on the ramp here (body 16) */
main.rh :is(.k-btn, .k-link){ font-size:var(--fs-body, 16px); }

/* committee spec (10 Nov 2026): no "coming soon" without a destination; an honest empty state instead */
.rh-wait{ max-inline-size:640px; margin-inline:auto; padding:var(--space-5, 40px) var(--space-3, 24px); border-radius:12px;
  background:#fff; box-shadow:var(--shadow-card); text-align:center; display:grid; gap:12px; justify-items:center; }
.rh-wait h2{ margin:0; }
.rh-wait p{ margin:0; max-inline-size:52ch; color:var(--ink-muted); }
.rh-note{ margin:0; font-size:var(--fs-body, 16px); line-height:1.6; color:var(--ink-muted); }
.rh-note .k-link{ margin-inline-start:6px; }