/* The free resources: the hub (/resources) and each resource's page (/resources/<slug>), built by
   src/pages/resources.js and src/pages/resources-page.js from src/resources.json. The gate's
   behaviour is public/assets/resources.js. Tokens and the calls are styles.css's own. Tables never
   scroll sideways: on a phone each row becomes a small card with its column names beside the values. */

.nw{white-space:nowrap}

/* ---------- the hero: the promise on the left, the gate on the right ---------- */

.res-hero{padding:clamp(40px,4.6vw,64px) 0 clamp(36px,4vw,56px)}
.res-hero .container{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,4.4vw,64px);align-items:start}
.res-hero h1{max-width:20ch}
.res-hero .lede{margin:18px 0 22px}
.res-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:14px;color:var(--faint);margin:0 0 18px}
.res-crumbs a{color:var(--slate);text-decoration:none}
.res-crumbs a:hover{color:var(--emerald-ink);text-decoration:underline}
.res-inside{margin:0 0 22px}
.res-inside li{font-size:16px}
.res-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.res-meta li{display:inline-flex;align-items:center;gap:7px}
.res-meta li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--emerald)}
/* on a phone the gate sits below the promise, so a jump to it is offered under the lede */
.res-jump{display:none;margin:0 0 24px}
@media (max-width:940px){.res-hero .container{grid-template-columns:1fr;gap:30px}.res-hero h1{max-width:none}.res-jump{display:block}}

/* ---------- the gate ---------- */

.gate-wrap{position:relative}
.gate{scroll-margin-top:90px}
.gate h2{font-size:clamp(22px,2.3vw,26px);margin-bottom:6px}
.gate .gate-line{color:var(--slate);font-size:15.5px;margin:0 0 20px}
.gate .stamp-call{width:100%;margin-top:4px}
.gate .field.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 10px;align-items:start}
.gate .field.check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--emerald-ink);cursor:pointer;padding:0}
.gate .field.check label{font-weight:400;font-size:14px;line-height:1.5;color:var(--slate);margin:0;cursor:pointer}
.gate .field.check label a{color:var(--emerald-ink);font-weight:600}
.gate .field.check .field-err{grid-column:2}
.field-err{margin:7px 0 0;font-size:14px;font-weight:600;color:var(--flag)}
.field-err[hidden]{display:none}
.field input[aria-invalid='true'],.field select[aria-invalid='true']{border-color:var(--flag);box-shadow:0 0 0 3px var(--flag-wash)}
.gate .field.check input[aria-invalid='true']{outline:2px solid var(--flag);outline-offset:2px}
.gate-fine{font-size:13px;color:var(--faint);margin:14px 0 0}

.gate-done{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:clamp(22px,2.8vw,32px);box-shadow:var(--shadow-sm);outline:none;scroll-margin-top:90px}
.gate-done[hidden]{display:none}
.gate-done h2{font-size:clamp(22px,2.3vw,26px);margin-bottom:6px}
.gate-done .gate-mailed{color:var(--emerald-ink);font-weight:600;font-size:15px;margin:0 0 18px}
.gate-files{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.gate-file{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--rule);border-radius:var(--r-md);text-decoration:none;color:var(--navy);font-weight:700;font-size:15.5px;line-height:1.35;transition:border-color .15s,background .15s}
.gate-file:hover,.gate-file:focus-visible{border-color:var(--emerald-ink);background:var(--emerald-wash);color:var(--navy)}
.gate-file .chip{flex:0 0 auto}
.gate-file-label{min-width:0}
.gate-again{font:inherit;font-size:14.5px;font-weight:600;color:var(--emerald-ink);background:none;border:none;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* ---------- the public summary ---------- */

.res-body{display:grid;gap:clamp(48px,5.4vw,72px)}
.res-part{max-width:880px}
.res-part>h2{margin-bottom:.4em}
.res-part>.lede{margin:0 0 18px}
.res-part p{max-width:70ch}
.res-part h3{margin:28px 0 10px}
.res-part .list{max-width:72ch}
.res-part .list li{color:var(--navy)}
sup.cite{font-size:.68em;line-height:0;margin-left:2px;font-family:var(--font-mono);font-weight:500}
sup.cite a{text-decoration:none;color:var(--emerald-ink);padding:0 1px}
sup.cite a:hover{text-decoration:underline}

.res-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;font-size:15.5px;margin:6px 0 4px;box-shadow:var(--shadow-sm)}
.res-table th,.res-table td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--rule-soft)}
.res-table thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);font-weight:500;background:var(--paper)}
.res-table tbody tr:last-child td{border-bottom:none}
.res-table td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--navy);font-weight:500}
.res-table td .muted{display:block;font-size:14px;margin-top:2px}
.res-caption{font-size:13.5px;color:var(--faint);margin:10px 2px 0;max-width:72ch}
@media (max-width:640px){
  .res-table,.res-table tbody,.res-table tr,.res-table td{display:block;width:100%}
  .res-table{border:none;background:none;box-shadow:none;overflow:visible}
  .res-table thead{display:none}
  .res-table tr{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-md);margin-bottom:10px;padding:6px 0;box-shadow:var(--shadow-sm)}
  .res-table td{border:none;padding:6px 14px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:10px}
  .res-table td::before{content:attr(data-label);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding-top:3px}
  .res-table td.wide{grid-template-columns:1fr}
  .res-table td.wide::before{padding-top:0}
  .res-table td.num{white-space:normal}
}

/* a list of documents: title, publisher and date, the summary, the link */
.res-docs{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.res-doc{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-sm)}
.res-doc h4{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.3;margin:0 0 6px}
.res-doc h4 a{color:var(--navy);text-decoration:none}
.res-doc h4 a:hover{color:var(--emerald-ink);text-decoration:underline}
.res-doc .by{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:4px 14px}
.res-doc p{margin:0;color:var(--slate);font-size:15.5px;max-width:none}
.res-doc .kind{display:inline-block;margin-top:12px}
.res-group+.res-group{margin-top:34px}
.res-group>h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.res-group>h3 .count{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:500}

/* the official sources, numbered, with the day each was read */
.res-sources{counter-reset:src;list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:880px}
.res-sources li{counter-increment:src;position:relative;padding-left:40px;font-size:15px;color:var(--slate);line-height:1.5;scroll-margin-top:96px}
.res-sources li::before{content:counter(src);position:absolute;left:0;top:1px;min-width:28px;height:22px;padding:0 6px;border-radius:var(--r-xs);background:var(--emerald-wash);color:var(--emerald-ink);font-family:var(--font-mono);font-size:11px;display:flex;align-items:center;justify-content:center}
.res-sources li:target::before{background:var(--emerald-ink);color:#fff}
.res-sources a{font-weight:600;color:var(--navy)}
.res-sources a:hover{color:var(--emerald-ink)}
.res-sources .when{display:block;font-size:13.5px;color:var(--faint)}

.res-note{background:var(--white);border:1px solid var(--rule);border-left:4px solid var(--emerald-ink);border-radius:var(--r-md);padding:18px 20px;max-width:880px}
.res-note p{margin:0;color:var(--slate);font-size:15.5px;max-width:none}
.res-note p+p{margin-top:8px}
.res-note b{color:var(--navy)}

/* the bridge from the resource to the product it points at */
.res-bridge{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,3.6vw,48px);align-items:center;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-xl);padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow-sm);max-width:none}
.res-bridge h2{margin-bottom:.35em}
.res-bridge p{color:var(--slate);margin:0}
.res-bridge .calls{justify-content:flex-end}
@media (max-width:860px){.res-bridge{grid-template-columns:1fr}.res-bridge .calls{justify-content:flex-start}}

/* ---------- the hub ---------- */

.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.res-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.res-card{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-lg);padding:26px 26px 24px;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:transform .24s var(--ease-out),box-shadow .24s var(--ease-out),border-color .24s}
a.res-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--mist)}
.res-card .res-ico{width:44px;height:44px;border-radius:12px;background:var(--emerald-wash);color:var(--emerald-ink);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.res-card .res-ico svg{width:24px;height:24px}
.res-card .res-card-title{font-size:clamp(19px,1.9vw,22px);line-height:1.25;letter-spacing:-.01em;margin:0}
.res-card p{color:var(--slate);margin:0;font-size:15.5px;line-height:1.55;flex:1 1 auto}
.res-card .res-kinds{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.res-card .when{font-size:13px;color:var(--faint)}
.res-card .thread-link{align-self:flex-start;margin-top:8px}
a.res-card:hover .thread-link::after{width:100%}
a.res-card:hover .thread-link .arrow{transform:translateX(4px)}
@media (max-width:1000px){.res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.res-grid,.res-grid.two{grid-template-columns:1fr}}

.res-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 30px;counter-reset:step}
.res-steps li{counter-increment:step;border-top:1px solid var(--rule);padding-top:18px}
.res-steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--emerald-ink);margin-bottom:10px}
.res-steps h3{font-size:19px;margin:0 0 6px}
.res-steps p{margin:0;color:var(--slate);font-size:15.5px}
@media (max-width:820px){.res-steps{grid-template-columns:1fr}}

@media (prefers-reduced-motion:no-preference){
  .js .res-grid.stagger>*{transform:translateY(14px);transition:transform .6s var(--ease-out);transition-delay:var(--d,0ms)}
  .js .res-grid.stagger.in>*{transform:none}
}