/* Shared styles for the F&H STAC Resources section (the free tools under /resources/).

   MS-TOOLS-1, November 4, 2026: these pages take the home page's look (Bryant: "the whole site
   should look as solid as it reads"). Same tokens, same two faces, same header and footer, same
   spacing scale, the same one button and the same filled card as index.html and DESIGN.md.
   Nothing on these pages may bring in a color or a face the home page does not use, with one
   named exception: the green, amber and red status tokens below, which only ever carry a
   verdict (recordable or not, the reporting clock, a risk band). Light only; no dark switch. */
:root{
  /* the home page's tokens, the same names and the same values (index.html, DESIGN.md) */
  --page:#FBF8F1;
  --ink:#15151C;
  --body:#3A3B47;
  --soft:#4A4B57;
  --label:#5A5B68;
  --accent:#5B2BD6;
  --link:#4F22C4;
  --link-hover:#3A1896;
  --navy:#1E2A6E;
  --band:#F4EFE4;
  --well:#F1ECE1;
  --plan:#F6F4FC;
  --line:#E5DECF;
  --line-2:#CFCFDA;
  --line-3:#DCD4C3;
  --frame:#D3D4DD;
  --ghost:#C8C9D3;
  --sans:'DM Sans',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --sec:96px;
  --head:48px;
  --gutter:28px;

  /* THE OLD NAMES, KEPT AS ALIASES. Every tool page's own <style> block is written against these
     (--surface-low, --muted-2, --violet-2, --geist and so on), and the tools are not touched by a
     restyle. So the names stay and each one now points at a home token. --geist, --literata and
     --jetbrains are names only: all three are DM Sans, so no page loads Geist, Literata or
     JetBrains Mono any more. */
  --geist:var(--sans);
  --literata:var(--sans);
  --jetbrains:var(--sans);
  --bg:var(--page);
  --surface:#FFFFFF;
  --surface-low:var(--well);
  --surface-lowest:var(--band);
  --text:var(--ink);
  --muted:var(--body);
  --muted-2:var(--label);
  --prose:var(--body);
  --violet:var(--accent);
  --violet-2:var(--link);
  --secondary-bg:var(--accent);
  --v-hi:var(--accent);
  --line-soft:var(--line);
  --line-solid:var(--line-2);
  --line-solid-2:var(--line-3);

  /* Status tokens, the one exception named at the top. Each has an -ink (readable text tone,
     measured >=8:1 on its own wash) and a -wash (tinted surface). The base color is for borders
     and dots only; it does NOT clear 4.5:1 as text. */
  --ok:#13A06A;   --ok-ink:#0b6b47;   --ok-wash:#e6f5ee;
  --warn:#CF8A1F; --warn-ink:#8a4f00; --warn-wash:#fdf3e1;
  --bad:#D5352E;  --bad-ink:#a3221b;  --bad-wash:#fdecea;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
[id]{scroll-margin-top:84px}
/* Catch-all so no link falls through to the browser's default blue. Components that set their
   own link color (menu, cards, buttons, footer) override this by specificity. */
a:not([class]){color:var(--link)}
a:not([class]):hover{color:var(--link-hover)}

/* ---- the button: the home page's .btn, one height everywhere -------------------------------
   12 + 24 + 12 = 48 pixels at normal text size, taller when a phone's text is set larger. */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 26px;border-radius:999px;font-family:var(--sans);font-size:16px;font-weight:700;line-height:1.5;letter-spacing:0.01em;text-align:center;text-decoration:none}
.btn-ghost{padding:11px 25px}
.btn-solid{background:var(--accent);color:#FFFFFF}
.btn-solid:hover{background:#4A1FBC;color:#FFFFFF}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ghost)}
.btn-ghost:hover{color:var(--ink);background:var(--band)}

/* ---- header: the home page's, one row on every screen --------------------------------------
   The one difference from index.html: these pages carry five links, not four (the fifth is All
   resources), so the menu button takes over below 1080 instead of 960. Five links and the button
   need about 980 pixels and would wrap to a second row between 960 and 1080. */
.site-head{position:sticky;top:0;z-index:50;background:rgba(251,248,241,0.95);border-bottom:1px solid var(--line)}
.site-head .wrap{padding-top:12px;padding-bottom:12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand img{display:block;width:46px;height:46px}
.brand-words{display:flex;flex-direction:column;line-height:1.2}
.brand-name{font-weight:700;font-size:17px;letter-spacing:0.04em}
.brand-sub{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--label)}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;font-size:15px}
.site-nav .nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--body);text-decoration:none}
.site-nav .nav-link:hover,.site-nav .nav-link[aria-current="page"]{color:var(--link)}
.site-nav .btn{margin-left:4px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:48px;height:48px;margin:-2px -10px -2px 0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;flex:none}
.nav-toggle:hover{background:var(--band)}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .bars{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}
@media (max-width:1079px){
  .site-head .wrap{flex-wrap:nowrap;position:relative;padding-top:10px;padding-bottom:10px}
  .brand{min-width:0;gap:10px}
  .brand-words{min-width:0}
  .site-nav{gap:0 20px}
  .site-nav .btn{display:none}
  .js .nav-toggle{display:inline-flex}
  html:not(.js) .site-head .wrap{flex-wrap:wrap}
  .js .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px var(--gutter) 12px;background:var(--page);border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(21,21,28,0.08)}
  .js .site-nav.open{display:flex}
  .js .site-nav .nav-link{justify-content:flex-start;min-height:52px;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
  .js .site-nav .nav-link:nth-last-child(2){border-bottom:0}
}

/* ---- footer: the home page's ---------------------------------------------------------------- */
.site-foot{background:var(--band);border-top:1px solid var(--line);margin-top:var(--sec)}
.site-foot .wrap{padding-top:72px;padding-bottom:28px;display:flex;flex-direction:column;align-items:center;gap:40px}
.foot-line{margin:0;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,46px);line-height:1.2;max-width:860px;color:var(--ink)}
.foot-line .c{color:var(--accent)}
.foot-line .n{font-style:italic;font-weight:700;color:var(--navy)}
.foot-base{width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line-3);font-size:14px;color:var(--soft)}
.foot-base .who{display:flex;align-items:center;gap:12px}
.foot-base img{display:block;width:30px;height:30px;flex:none}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--soft)}

/* ---- the meeting button that follows a reader down a long page --------------------------------
   The same solid button. Only below 1080, where the header's own meeting button sits behind the
   menu, so a screen never shows the button twice. resources.js shows it after 480 pixels. */
.fh-sticky-cta{position:fixed;right:20px;bottom:20px;z-index:900;box-shadow:0 12px 28px rgba(21,21,28,0.18);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s,background .2s}
.fh-sticky-cta.show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1080px){.fh-sticky-cta{display:none}}
@media (max-width:560px){.fh-sticky-cta{left:16px;right:16px;bottom:16px}}
/* Room under the footer for the following button, so it never sits over the footer's last line. */
@media (max-width:1079px){body:has(#fhStickyCta) .site-foot .wrap{padding-bottom:96px}}

/* ---- the hub ------------------------------------------------------------------------------- */
.r-hero{max-width:1160px;margin:0 auto;padding:var(--sec) var(--gutter) 0;display:flex;flex-direction:column;gap:14px}
.r-eyebrow{font-size:12px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--link)}
.r-hero h1{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(40px,6vw,64px);line-height:1.05;letter-spacing:-0.01em;color:var(--ink)}
.r-hero p{margin:0;color:var(--body);font-size:19px;max-width:640px}
.r-grid{max-width:1160px;margin:0 auto;padding:var(--head) var(--gutter) 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px}   /* MS-MOBILE-1, Nov 4: a 300 pixel floor no wider than the screen, so 130% text on a phone does not overflow */
/* The home page's card: filled, 24 pixel corners, no border and no shadow (DESIGN.md). */
.r-card{display:flex;flex-direction:column;gap:12px;padding:32px 28px;border-radius:24px;background:var(--well);text-decoration:none;color:var(--ink)}
.r-card:hover{background:var(--plan)}
.r-card .tag{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--link)}
.r-card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1;color:var(--ink)}
.r-card p{margin:0;color:var(--body);font-size:16px;line-height:1.6}
.r-card .more{margin-top:auto;padding-top:4px;color:var(--link);font-size:15px;font-weight:700}
.r-card:hover .more{text-decoration:underline;text-underline-offset:3px}

/* ---- an article ---------------------------------------------------------------------------- */
.r-article{max-width:776px;margin:0 auto;padding:56px var(--gutter) 0}
.r-crumbs{font-size:14px;color:var(--label);margin-bottom:16px}
.r-crumbs a{color:var(--label);text-decoration:none}
.r-crumbs a:hover{color:var(--link)}
.r-article h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,56px);line-height:1.05;letter-spacing:-0.01em;margin:0 0 14px;color:var(--ink)}
.r-meta{color:var(--label);font-size:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.r-body{font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--body)}   /* the home page's 17 on 1.65 (DESIGN.md) */
.r-body h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,34px);line-height:1.15;margin:44px 0 12px;color:var(--ink)}
.r-body h3{font-family:var(--sans);font-weight:700;font-size:19px;line-height:1.3;margin:30px 0 8px;color:var(--ink)}
.r-body p{margin:0 0 16px}
.r-body ul,.r-body ol{margin:0 0 16px;padding-left:22px}
.r-body li{margin:6px 0}
.r-body blockquote{margin:24px 0;padding:18px 22px;border-radius:16px;background:var(--well);color:var(--body)}
.r-body a{color:var(--link)}
.r-body a:hover{color:var(--link-hover)}
.r-body a.btn-solid{color:#FFFFFF}
.r-body code{font-family:var(--sans);font-size:.9em;font-weight:700;background:var(--well);padding:2px 6px;border-radius:6px}
.r-note{margin:22px 0;padding:14px 18px;border:1px dashed var(--accent);border-radius:16px;color:var(--accent);font-size:15px}
.r-cta-band{max-width:776px;margin:var(--head) auto 0;padding:36px 32px;border-radius:24px;background:var(--well);display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.r-cta-band h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,34px);line-height:1.15;color:var(--ink)}
.r-cta-band p{margin:0 0 4px;color:var(--body)}
.r-article .r-cta-band{margin-left:0;margin-right:0}

/* ---- figures and placeholders --------------------------------------------------------------- */
.r-figure{margin:28px auto;text-align:center}
.r-figure img{max-width:100%;height:auto;border-radius:20px}
.r-figure figcaption{margin-top:10px;font-size:14px;color:var(--label)}
.r-figure-ph .r-ph-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:200px;padding:28px;border:1.5px dashed var(--accent);border-radius:20px;background:var(--well)}
.r-ph-tag{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:700;color:var(--link)}
.r-ph-title{font-size:15px;color:var(--label);max-width:48ch;line-height:1.45}

/* ===========================================================================
   Diagrams. House style, added 3 Aug 2026 (see README).

   Diagrams live IN the page, never as an <img>. Inline markup inherits these
   tokens, so a palette change carries automatically, and the words are real
   text: selectable, readable by a screen reader, and indexed by Google.
   =========================================================================== */
.r-diagram, .r-compare{margin:28px auto;padding:22px 20px 16px;border-radius:24px;background:var(--well)}
.r-diagram svg{width:100%; height:auto; display:block}

.rc-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.rc-col{padding:16px 16px 14px; border-radius:16px; border:1px solid var(--line-soft)}
.rc-ok{background:var(--ok-wash);  border-color:color-mix(in srgb, var(--ok) 42%, transparent)}
.rc-bad{background:var(--bad-wash); border-color:color-mix(in srgb, var(--bad) 42%, transparent)}
.rc-col h4{font-size:17px; font-weight:700; margin:0 0 3px; color:var(--text)}
.rc-col h4 span{display:block; font-size:13.5px; font-weight:600; letter-spacing:.04em; margin-top:3px}
.rc-ok h4 span{color:var(--ok-ink)}
.rc-bad h4 span{color:var(--bad-ink)}
.rc-lead{font-size:15px; font-weight:600; color:var(--text); margin:12px 0 8px}
.rc-col ul{list-style:none; margin:12px 0 0; padding:0}
.rc-col li{position:relative; padding-left:16px; margin:0 0 9px; font-size:14.5px; line-height:1.45; color:var(--muted-2)}
.rc-col li::before{content:""; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%}
.rc-ok li::before{background:var(--ok)}
.rc-bad li::before{background:var(--bad)}
.rc-note{margin:14px 0 0; padding-top:11px; border-top:1px solid var(--line-soft); font-size:13.5px; color:var(--ok-ink)}
.rc-cite{margin:16px 0 0; text-align:center; font-size:12px; letter-spacing:.05em; color:var(--muted-2)}
.rc-brand{display:flex; align-items:center; gap:10px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line-soft); font-size:13px}
.rc-mark{position:relative; flex:none; width:18px; height:18px; border-radius:50%; border:2px solid var(--secondary-bg)}
.rc-mark::after{content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%; background:var(--violet-2)}
.rc-brand b{font-weight:800; color:var(--text)}
.rc-url{font-size:12px; color:var(--violet-2)}
.rc-said{margin-left:auto; font-size:12px; color:var(--muted-2)}
@media (max-width:640px){
  .rc-grid{grid-template-columns:1fr; gap:14px}
  .r-diagram, .r-compare{padding:18px 14px 12px}
}
@media (max-width:480px){ .rc-said{display:none} }

/* The decision tree brings its own canvas, so it gets a frame rather than a card. */
.r-tree{margin:34px auto}
.r-tree svg{width:100%; height:auto; display:block; border-radius:20px; border:1px solid var(--line)}
/* PM-5, October 20, 2026 (MAIN-FIX-1). At phone width the 560-unit chart drew its smallest
   text at about 6.5px. Below 600px it keeps a floor of 480px and scrolls sideways inside
   its own frame, the way the JSA tables already do, so the page itself never scrolls. */
@media (max-width:600px){
  .r-tree{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .r-tree svg{min-width:480px}
}

/* ---- the masthead seal ------------------------------------------------------------------------
   The seal behind the article title, faint, the way the home page sets it behind the hero phone.
   Behind the title only, never behind running text. Clipped to the article box so it can never
   widen the page. */
.r-article{position:relative; overflow:hidden}
.r-article::before{content:""; position:absolute; top:-26px; right:-26px;
  width:220px; height:220px; background:url("/assets/img/seal/fh-seal-240.png") no-repeat center/contain;
  opacity:.07; pointer-events:none}
.r-article > *{position:relative}
@media (max-width:560px){ .r-article::before{width:150px; height:150px; top:-18px; right:-18px} }

/* ---- featured resource (not used today) ------------------------------------------------------
   The hub has been a grid since August 31; these rules wait for the day one page is featured on
   its own again. */
.r-feature-wrap{max-width:1160px;margin:0 auto;padding:var(--head) var(--gutter) 0}
.r-feature{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;padding:40px 36px;border-radius:24px;background:var(--well);text-decoration:none;color:var(--ink)}
.r-feature:hover{background:var(--plan)}
.r-feature-body{display:flex;flex-direction:column;gap:12px;max-width:64ch}
.r-feature .tag{font-size:12px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--link)}
.r-feature h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,36px);line-height:1.1}
.r-feature p{margin:0;color:var(--body);font-size:16px;line-height:1.6}
.r-feature-cta{display:block}
.r-feature .more{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 26px;border-radius:999px;background:var(--accent);color:#FFFFFF;font-size:16px;font-weight:700;white-space:nowrap}
@media (max-width:720px){
  .r-feature{grid-template-columns:1fr;gap:22px;padding:32px 24px}
  .r-feature-cta,.r-feature .more{width:100%}
}

/* ---- phones: the home page's scale ------------------------------------------------------------ */
@media (max-width:719px){
  :root{--sec:64px;--head:32px;--gutter:20px}
  [id]{scroll-margin-top:calc(52px + 1.5em)}
  .brand img{width:40px;height:40px;flex:none}
  .brand-sub{letter-spacing:0.1em}
  .r-hero{padding-top:48px}
  .r-hero p{font-size:17px}
  .r-card{padding:28px 24px}
  .r-card h3{font-size:28px}
  .r-article{padding-top:32px}
  .r-cta-band{padding:32px 24px}
  .r-cta-band .btn{align-self:stretch}
  .site-foot .wrap{padding-top:56px;gap:32px}
  .foot-line{font-size:clamp(25px,7.6vw,32px)}
  .foot-base{flex-direction:column;align-items:flex-start;gap:4px}
  .foot-links{padding-left:42px}
}

/* SEO-1, November 8, 2026: the labeled list (a bold label over its text) that the prequalification
   checklist defines in its own page, shared here so the ISNetworld guide and the spreadsheets
   comparison can use it too. The checklist's own copy of these rules is unchanged. In the comparison,
   each item has two lines, paper first and F&H STAC second. */
.pq-list{list-style:none;padding:0;margin:0 0 18px}
.pq-list li{margin:0 0 12px;padding:18px 20px;border:0;border-radius:16px;background:var(--surface-low)}
.pq-list b{display:block;font-family:var(--geist);font-size:16px;color:var(--text);margin-bottom:4px}
.pq-list span{display:block;font-size:15px;line-height:1.55;color:var(--muted)}
.pq-list span.vs-stac{margin-top:6px;color:var(--text)}