/* SUPPLY.training — shared page theme for every page except the home page (home uses home.css).
   Loaded LAST in <head>, after each page's own <style>, so these rules win at equal specificity.
   The colours inside each page were already remapped to the green palette; this file aligns
   layout width, display type, hero bands and small text. Palette: container green #14403A,
   deep green #0E2F2B, green-ink #1D5A50, pallet grey #EEF0EA, ink #1C2626, ADR orange #F5802B. */

/* ---- display type: Barlow Condensed for h1/h2 (font-face lives in site.css) ---- */
h1,h2{font-family:var(--sx-display,"Barlow Condensed","Arial Narrow",Arial,sans-serif);font-weight:700;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(42px,5.4vw,64px);line-height:1.02}
h2{font-size:clamp(30px,3.4vw,40px);line-height:1.08}
.card h2,.issue-card h2,.panel h2,.tool-card h2{font-size:26px;line-height:1.1}

/* ---- one content width: 1120px box, 24px side padding, so the left edge matches the header ---- */
.container{width:min(1072px,calc(100% - 48px))}
.wrap{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.inner{max-width:1072px;margin-left:auto;margin-right:auto}
main{max-width:1120px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
.hero{padding-left:24px;padding-right:24px}
.prose main p,.prose main li{max-width:72ch}
.hero-pad{padding-top:52px;padding-bottom:44px}

/* ---- hero band: flat container green, white display headline (no gradients) ---- */
.hero{background:#14403A;background-image:none;color:#fff;border-bottom:0}
.hero h1,.hero h2{color:#fff}
.hero p{color:#D5E3DE}
.hero a,.hero .back,.hero .crumb{color:#fff}
.hero .crumb,.hero .back{font-weight:600;font-size:14px}
.hero .tag,.hero .ey{color:#A9CBC2}

/* ---- small print and labels: sentence case, readable size ---- */
.ey,.cat,.tag,.issue-tag,.kicker,.pill-label{text-transform:none;letter-spacing:0}
.ey{font-size:15px;font-weight:600}
.cat{font-size:15px;font-weight:600}
.tag,.issue-tag{font-size:13px;font-weight:600}
.meta{font:12.5px/1.4 'IBM Plex Sans',Arial,sans-serif}
.card p,.issue-card p{font-size:14.5px}
.note,.crumb,.count,.intro{font-size:14px}
small{font-size:13px}

/* ---- status dots (replace emoji): drawn, with the status also written in text ---- */
i.dot{display:inline-block;width:.8em;height:.8em;border-radius:50%;margin-right:.4em;vertical-align:-.05em;background:#8E9E9A}
i.dot.g{background:#247a45}
i.dot.o{background:#F5802B}
i.dot.y{background:#D9A400}
i.dot.r{background:#B91C1C}
svg.ico-warn{width:1.1em;height:1.1em;vertical-align:-.15em;margin-right:.35em}

@media (max-width:767px){
  .container{width:min(1072px,calc(100% - 36px))}
  .wrap,main{padding-left:18px;padding-right:18px}
  .hero{padding-left:18px;padding-right:18px}
  .hero>.wrap{padding-left:0;padding-right:0}
}

/* ---- tools index: equal rows, same pattern as the home page ---- */
.tool-rows{margin:0;padding:0;list-style:none;border-top:3px solid #1C2626}
.tool-rows li{border-bottom:1px solid #C5CBC2}
.tool-rows a{display:grid;grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.3fr) 130px;gap:6px 28px;align-items:center;
  margin:0 -12px;padding:26px 12px;color:#1C2626;text-decoration:none;transition:background-color .15s}
.tool-rows a:hover{background:#fff}
.tool-rows .icon{width:40px;height:40px;color:#1D5A50;margin:0}
.tool-rows .t{font:700 clamp(28px,3vw,38px)/1.05 var(--sx-display,"Barlow Condensed",Arial,sans-serif)}
.tool-rows .d{font-size:15.5px;line-height:1.5;color:#4F5C58}
.tool-rows .go{justify-self:end;font-weight:600;font-size:15px;color:#1D5A50;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tool-rows+.note{margin-top:26px;text-align:left;max-width:72ch}
@media (max-width:1023px){.tool-rows a{grid-template-columns:40px minmax(0,1fr);gap:4px 18px;align-items:start}.tool-rows .icon{grid-row:1/4}.tool-rows .go{justify-self:start;margin-top:6px}}
@media (max-width:767px){.tool-rows a{margin:0;padding:20px 0}.tool-rows a:hover{background:transparent}}

/* =====================================================================================
   Design polish, 1 Nov 2026. Same palette and type, more depth, rhythm and consistency.
   Loaded last, so these win over the per-page <style> blocks at equal specificity.
   ===================================================================================== */

/* ---- one page background: pallet-board grey everywhere, white only for cards and panels ---- */
body{background:#F1F3EE}

/* ---- hero bands: depth (soft light + fine hatch) and an orange base line, like an ADR plate ---- */
.hero{position:relative;isolation:isolate;overflow:hidden;background-color:#14403A;
  padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(40px,5vw,56px);box-shadow:inset 0 -3px 0 #F5802B}
.hero>.wrap,.hero>.inner,.hero>.container{padding-top:0;padding-bottom:0}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(820px 380px at 88% -20%,rgba(255,255,255,.11),transparent 62%),
    radial-gradient(640px 320px at -5% 115%,rgba(8,30,27,.85),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 16px)}
.hero h1{letter-spacing:-.012em;max-width:22ch}
.hero p{max-width:64ch;font-size:17.5px;line-height:1.55}
.hero .ey,.hero .eyebrow,.hero .kicker{display:inline-flex;align-items:center;gap:10px;color:#F6B07A;margin-bottom:4px}
.hero .ey::before,.hero .eyebrow::before,.hero .kicker::before{content:"";width:22px;height:3px;border-radius:2px;background:#F5802B}
.hero .cta{box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}

/* ---- headings and prose ---- */
h1,h2{letter-spacing:-.01em}
main p a,.copy a,.prose a{color:#1D5A50;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
main p a:hover{color:#14403A}
::selection{background:#F5802B;color:#1C2626}
:focus-visible{outline:3px solid #F5802B;outline-offset:2px}

/* ---- cards: one surface system (white, hairline, tinted shadow on hover, lift) ---- */
.card,.issue-card,.tool,.stat,.decision-card,.guide{background:#fff;border:1px solid #DCE2DB;border-radius:14px;
  box-shadow:0 1px 2px rgba(20,64,58,.05);transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s}
a.card,a.issue-card,.issue-card:has(>a){cursor:pointer}
a.card:hover,.issue-card:hover,a.issue-card:hover{transform:translateY(-3px);border-color:#B7C5BE;
  box-shadow:0 18px 32px -16px rgba(20,64,58,.32),0 2px 6px rgba(20,64,58,.06)}
a.card:active,.issue-card:active{transform:translateY(-1px);transition-duration:.08s}
.card h3,.issue-card h3{font-size:18px;line-height:1.3;letter-spacing:-.01em;color:#1C2626}
.card p,.issue-card p{font-size:14.5px;line-height:1.55;color:#4F5C58}
.tag,.issue-tag{display:inline-block;font:600 12px/1 'IBM Plex Sans',Arial,sans-serif;letter-spacing:.03em;color:#1D5A50;
  background:#E7EEEA;border-radius:6px;padding:5px 8px}
.tag.free{color:#1F6B3D;background:#E4F1E8}
.meta{font:500 12.5px/1.4 'IBM Plex Sans',Arial,sans-serif;color:#5D6B67;border-top:1px solid #E6EAE5;padding-top:10px}
.card a.link,.issue-card>a,.link{color:#1D5A50;font-weight:600;transition:color .15s}
.card a.link:hover,.issue-card>a:hover{color:#14403A;text-decoration:underline;text-underline-offset:3px}

/* ---- topic tiles (common issues, resources): the count in display type, dark when active ---- */
.cat,.category{background:#fff;border:1px solid #DCE2DB;border-radius:12px;text-align:left;padding:16px 18px;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s,background-color .2s,color .2s}
.cat:hover,.category:hover{transform:translateY(-2px);border-color:#B7C5BE;box-shadow:0 14px 26px -16px rgba(20,64,58,.3)}
.cat:active,.category:active{transform:translateY(0)}
.cat span{font:700 30px/1 var(--sx-display,"Barlow Condensed",Arial,sans-serif);color:#B04E15;margin-bottom:6px}
.cat{font:600 14px/1.3 'IBM Plex Sans',Arial,sans-serif;text-transform:none;letter-spacing:0;color:#1C2626}
.cat.active,.category[aria-pressed="true"]{background:#14403A;border-color:#14403A;color:#fff}
.cat.active span{color:#F6B07A}
.category{display:block;width:100%;text-align:left;cursor:pointer}
.category h3{margin:0 0 4px;font:700 24px/1.05 var(--sx-display,"Barlow Condensed",Arial,sans-serif);letter-spacing:0}
.category .count{font-size:13px;font-weight:500;color:#5D6B67}
.category[aria-pressed="true"] .count{color:#C9DDD6}
.category[aria-pressed="true"] h3{color:#fff}

/* ---- about: numbers in display type, left aligned on an orange edge ---- */
.stats{gap:16px}
.stat{text-align:left;border-left:4px solid #F5802B;border-radius:0 14px 14px 0;padding:18px 20px}
.stat .n{font:700 46px/1 var(--sx-display,"Barlow Condensed",Arial,sans-serif);color:#14403A}
.stat .l{margin-top:6px;font:500 13.5px/1.3 'IBM Plex Sans',Arial,sans-serif;text-transform:none;letter-spacing:0;color:#4F5C58}

/* ---- buttons: one size, one motion (lift on hover, press on click) ---- */
.cta,.button,.btn,a.sx-next-btn,.search button,.cookie-btn{transition:transform .15s cubic-bezier(.2,.7,.2,1),box-shadow .15s,background-color .15s}
.cta:hover,.button:hover,a.sx-next-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(0,0,0,.45)}
.cta:active,.button:active,a.sx-next-btn:active{transform:translateY(1px);box-shadow:none;transition-duration:.06s}
.search{box-shadow:0 10px 30px -14px rgba(0,0,0,.5)}
.search button{transition:background-color .15s}.search button:hover{background:#14403A}

/* ---- in-page notes ---- */
.note,.notice{border-radius:12px}

@media (prefers-reduced-motion:reduce){.card,.issue-card,.cat,.category,.cta,.button,a.sx-next-btn{transition:none}
  a.card:hover,.issue-card:hover,.cat:hover,.category:hover,.cta:hover,.button:hover{transform:none}}

/* polish follow-ups, 1 Nov 2026 */
.tool-rows{border-top:1px solid #C5CBC2}
.category.active,.category[aria-pressed="true"]{background:#14403A;border-color:#14403A;color:#fff}
.category.active h3,.category[aria-pressed="true"] h3{color:#fff}
.category.active .count,.category[aria-pressed="true"] .count{color:#C9DDD6}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 'IBM Plex Sans',Arial,sans-serif;letter-spacing:.02em;text-transform:none;color:#1D5A50}
.eyebrow::before,.kicker::before{content:"";width:22px;height:3px;border-radius:2px;background:#F5802B}
#categories .category.active{background:#14403A;border-color:#14403A;color:#fff;box-shadow:0 14px 26px -16px rgba(20,64,58,.5)}
#categories .category.active h3{color:#fff}
#categories .category.active .count{color:#C9DDD6}

/* ---- pages without a .hero: the title block becomes a full-width band (export-import, translator, events, privacy, 404) ---- */
html{overflow-x:clip}
header.header{position:relative;isolation:isolate;overflow:hidden;background:#14403A;color:#fff;box-shadow:inset 0 -3px 0 #F5802B;
  margin:0 calc(50% - 50vw) 28px;padding:clamp(40px,5vw,56px) calc(50vw - 50%) clamp(36px,4vw,48px)}
header.header::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(820px 380px at 88% -20%,rgba(255,255,255,.11),transparent 62%),
    radial-gradient(640px 320px at -5% 115%,rgba(8,30,27,.85),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,transparent 2px 16px)}
header.header h1{margin:6px 0 12px;color:#fff;font-size:clamp(38px,5vw,56px);line-height:1.02;letter-spacing:-.012em;max-width:22ch}
header.header p,header.header .lead,header.header .intro,header.header .updated{color:#D5E3DE;font-size:17px;line-height:1.55;max-width:64ch;margin:0}
header.header .updated{font-size:14px}
header.header .eyebrow,header.header .code{display:inline-flex;align-items:center;gap:10px;margin:0 0 4px;font:600 14px/1 'IBM Plex Sans',Arial,sans-serif;letter-spacing:.02em;text-transform:none;color:#F6B07A}
header.header .eyebrow::before,header.header .code::before{content:"";width:22px;height:3px;border-radius:2px;background:#F5802B}
header.header .badges{margin:16px 0 0}
header.header .badge{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:6px;font-weight:600;font-size:12.5px;letter-spacing:.02em;text-transform:none}
main>header.header,.wrap>header.header{margin-top:-42px}
@media (max-width:767px){main>header.header,.wrap>header.header{margin-top:-36px}}