/* Resources (resources.php) and Chapter Study Guides (study-guide.php), every layout. Loaded with $pageCss on desktop
   (style.css) and on phones and tablets (phone.css, + tablet.css), so it reads each layer's own tokens through the
   aliases below. Component rules use tokens only; the alias block defines the two values neither layer has (white on
   the blue tile in both themes, and the card's hover shadow). Dark mode follows the layer's neutral greys; blue only as an accent. Links are
   never underlined: an in-text link is color + weight 600. No position change on hover; motion only on color/shadow. */
.res,.sg{
  --r-heading:var(--heading,var(--text));
  --r-tint:var(--info-bg,var(--tint));
  --r-tint-line:var(--info-line,var(--border));
  --r-accent:var(--ink-accent,var(--accent));
  --r-tile:var(--gradient-primary,var(--grad-primary));
  --r-shadow:var(--shadow-card,var(--shadow));
  --r-radius:var(--radius-card,var(--radius));
  --r-line-hover:var(--border-strong,var(--border));
  --r-link-hover:var(--link-hover,var(--accent));
  --r-no-text:var(--no-text,var(--no));
  --r-on-tile:#fff;                                   /* text on the blue tile, both themes (5.3:1 or better) */
  --r-shadow-hover:0 14px 30px -16px rgba(10,22,40,.35);
}
/* :where() keeps this default weaker than the phone rows' own icon rules (.m-row__ico svg is 20px). */
.res :where(svg:not([width])),.sg :where(svg:not([width])){width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- Page head and section jump links ---- */
.res-head{margin-bottom:8px}
.res-head h1{margin:6px 0 10px}
.res-lead{max-width:66ch}
.res-jump ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.res-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);color:var(--r-heading);font-size:.9rem;font-weight:500;text-decoration:none;
  transition:border-color .15s ease,background-color .15s ease}
.res-jump a:hover{border-color:var(--r-line-hover);background:var(--surface-2);color:var(--r-heading)}
.res-jump a:focus-visible,.res-card:focus-visible,.sg-index__row:focus-visible,.sg-pager__link:focus-visible,.res-inline:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.res-sec{margin-top:40px;scroll-margin-top:84px}
.res-h2{scroll-margin-top:84px}
.res--desktop .res-h2{font-size:1.5rem;margin:0 0 8px}
.res-intro{color:var(--muted);max-width:72ch;margin:0 0 14px}
.res-note{margin:12px 2px 0;color:var(--muted);font-size:.92rem}
.res-inline{color:var(--link-text);font-weight:600;text-decoration:none}
.res-inline:hover{color:var(--r-link-hover);text-decoration:none}
.res-disclaimer{margin:36px 2px 0;color:var(--muted);font-size:.85rem;max-width:72ch}
.res-access{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;color:var(--muted);font-size:.95rem}
.res-access svg:not([width]){margin-top:3px}

/* ---- Desktop: one centered column, the page head centered like the site's other hubs (FAQ, EMT Skills) ---- */
.res--desktop{max-width:1080px;margin:0 auto}
.res--desktop .res-head{text-align:center}
.res--desktop .res-lead{max-width:660px;margin:16px auto 0}
.res--desktop .res-jump ul{justify-content:center;margin-top:20px}
.res--desktop .res-sec{margin-top:52px}
.res--desktop .res-intro{max-width:780px}
.res--desktop .res-callout{max-width:none}
.res--desktop .res-disclaimer{text-align:center;margin:52px auto 0}
.res-h3{font-size:1.05rem;margin:24px 0 10px;color:var(--r-heading)}

/* ---- Desktop cards: a fixed number of columns, so every row lines up across the column ---- */
.res-grid{display:grid;gap:16px}
.res-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}   /* three across while a card can be 240px */
.res-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.res-grid--2{grid-template-columns:minmax(0,1fr)}}

/* ---- Desktop banner: one wide card, its words on the left and its buttons on the right ---- */
.res-banner{display:flex;align-items:center;gap:22px;padding:22px 26px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-radius);box-shadow:var(--r-shadow)}
[data-theme="dark"] .res-banner{box-shadow:none}
.res-banner__ico{width:52px;height:52px;border-radius:14px;background:var(--r-tile);color:var(--r-on-tile);display:grid;place-items:center;flex:none}
.res-banner__ico svg:not([width]){width:26px;height:26px;stroke:currentColor}
.res-banner__body{flex:1;min-width:0}
.res-banner__title{margin:0 0 4px;font-size:1.15rem;font-weight:700;color:var(--r-heading);line-height:1.3}
.res-banner__text{margin:0;color:var(--muted)}
.res-banner .res-meta{margin:6px 0 0}
.res-banner__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;flex:none}
@media (max-width:820px){.res-banner{flex-direction:column;align-items:flex-start}.res-banner__actions{justify-content:flex-start}}
.res-card{display:flex;align-items:flex-start;gap:14px;padding:16px 16px 16px 18px;min-height:76px;background:var(--surface);
  border:1px solid var(--border);border-radius:14px;box-shadow:var(--r-shadow);color:var(--text);text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease}
.res-card:hover{border-color:var(--r-line-hover);box-shadow:var(--r-shadow-hover);color:var(--text)}
[data-theme="dark"] .res-card{box-shadow:none}
[data-theme="dark"] .res-card:hover{box-shadow:none;background:var(--surface-2)}
.res-card__ico{width:40px;height:40px;border-radius:11px;background:var(--r-tile);color:var(--r-on-tile);display:grid;place-items:center;flex:none}
.res-card__ico svg:not([width]){width:21px;height:21px;stroke:currentColor}
.res-card__body{flex:1;min-width:0}
.res-card__title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-weight:600;color:var(--r-heading);line-height:1.3}
.res-card__sub{display:block;margin-top:4px;color:var(--muted);font-size:.9rem;line-height:1.5}
.res-card__go{color:var(--faint);align-self:center}
.res-card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.res-meta{display:block;margin-top:5px;color:var(--faint);font-size:.8rem;font-weight:500;font-variant-numeric:tabular-nums}
.res-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:var(--r-tint);border:1px solid var(--r-tint-line);
  color:var(--r-heading);font-size:.74rem;font-weight:600;line-height:1.5;white-space:nowrap}
.res-tag svg:not([width]){width:12px;height:12px;stroke-width:2.4}

/* ---- Callouts (signed-out guides, empty and error states) ---- */
.res-callout{max-width:720px}
.res-callout p{margin:0 0 10px}
.res-callout__title{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--r-heading)}
.res-callout__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.res--phone .res-callout__actions,.sg--phone .res-callout__actions{flex-direction:column}

/* ---- Phones and tablets: rows ---- */
.res--phone .res-sec,.res--tablet .res-sec{margin-top:26px}
.res--phone .res-h2,.res--tablet .res-h2{margin-top:0}
.m-row .res-meta{font-size:12.5px;margin-top:3px}
.m-row__end .res-tag{font-size:12px}
.res-head .res-jump{display:none}
.res--desktop .res-head .res-jump,.res--tablet .res-head .res-jump,.sg--desktop .res-head .res-jump,.sg--tablet .res-head .res-jump{display:block}

/* ---- Study guide list (desktop: the same centered column and head as the Resources hub) ---- */
.sg--desktop.sg--list{max-width:1080px;margin:0 auto}
.sg--desktop.sg--list .res-head{text-align:center}
.sg--desktop.sg--list .res-lead{max-width:700px;margin:16px auto 0}
.sg--desktop.sg--list .res-access{justify-content:center}
.sg--desktop.sg--list .res-disclaimer{text-align:center;margin:44px auto 0}
.sg-index{display:grid;gap:18px}
/* Desktop: the book's sections flow down two balanced columns (they hold 2 to 11 chapters, so a grid row left gaps). */
.sg--desktop .sg-index{display:block;column-count:2;column-gap:18px;margin-top:26px}
.sg--desktop .sg-index__sec{display:inline-block;width:100%;margin:0 0 18px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
@media (max-width:900px){.sg--desktop .sg-index{column-count:1}}
.sg--desktop .sg-index__sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-radius);box-shadow:var(--r-shadow);padding:16px 8px 8px}
.sg-index__h{display:flex;flex-direction:column;gap:2px}
.sg--desktop .sg-index__h{font-size:1.1rem;margin:0 10px 8px}
.sg-index__no{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sg-index__list{list-style:none;margin:0;padding:0}
.sg-index__list>li:first-child>.m-row{border-top:0}
.sg-index__row{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 10px;border-radius:10px;color:var(--text);text-decoration:none;transition:background-color .15s ease}
.sg-index__row:hover{background:var(--surface-2);color:var(--text)}
.sg-index__body{flex:1;min-width:0}
.sg-index__title{font-weight:500;color:var(--r-heading)}
.sg-index__end{display:flex;align-items:center;gap:6px;color:var(--faint)}
.sg-index__num{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--r-tint);border:1px solid var(--r-tint-line);
  color:var(--r-heading);font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums}
.is-locked .sg-index__title,.is-locked .m-row__title{color:var(--muted)}
.res-tag--lock{background:transparent;border-color:var(--border);color:var(--muted)}
.sg--phone .sg-index,.sg--tablet .sg-index{gap:0}
.sg--phone .sg-index__h,.sg--tablet .sg-index__h{margin-top:22px}

/* ---- One guide ---- */
.sg-container{max-width:860px}
.sg-sub{margin:-4px 0 0;color:var(--muted);font-weight:500}
.sg-guide{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-radius);box-shadow:var(--r-shadow);padding:26px 32px 28px;margin-top:8px}
.sg--phone .sg-guide{padding:18px 16px 20px;margin-top:4px}
.sg--tablet .sg-guide{padding:24px 26px}
.sg-guide .res-head{margin-bottom:6px}
.sg-jump{margin-top:4px}
.sg-sec{scroll-margin-top:84px}
.sg-h2{font-size:1.3rem;margin:30px 0 10px;padding-top:22px;border-top:1px solid var(--border);scroll-margin-top:84px}
.sg-sec:first-of-type .sg-h2{margin-top:22px}
.sg--phone .sg-h2{font-size:20px}
.sg-h3{font-size:1.06rem;margin:22px 0 8px;color:var(--r-heading);line-height:1.3}
.sg-guide p,.sg-guide li{line-height:1.65;max-width:72ch}
.sg-guide p{margin:0 0 12px}
.sg-list{margin:0 0 12px;padding-left:1.3em}
.sg-list li{margin:0 0 7px}
.sg-list li::marker{color:var(--muted)}
.sg-note{margin:14px 0 16px;padding:12px 16px;border-radius:10px;background:var(--r-tint);border:1px solid var(--r-tint-line);border-left:4px solid var(--r-accent)}
.sg-note p:last-child,.sg-note .sg-list:last-child{margin-bottom:0}
.sg-note__label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--r-heading);margin:0 0 4px!important}
.sg-sec--traps .sg-note{background:var(--no-bg);border-color:var(--no-line);border-left-color:var(--r-no-text)}
.sg-sec--five .sg-list{list-style:none;padding:0;counter-reset:five}
.sg-sec--five .sg-list li{counter-increment:five;position:relative;padding-left:44px;min-height:32px}
.sg-sec--five .sg-list li::before{content:counter(five);position:absolute;left:0;top:-1px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--r-tile);color:var(--r-on-tile);font-weight:700;font-size:.85rem;font-variant-numeric:tabular-nums}
.sg-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* Print and download (owner, 2026-10-18) */
.sg-tools{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.sg-tools--center{justify-content:center}
.sg-tool{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--r-line-hover);
  color:var(--r-heading);font-size:.92rem;font-weight:500;text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.sg-tool:hover{background:var(--surface-2);color:var(--r-heading)}
.sg-tool:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sg-tool svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sg-hint{margin:10px 0 0;color:var(--muted);font-size:.92rem}
@media print{.sg-tools{display:none!important}}
.sg--phone .sg-actions{flex-direction:column}
.sg-back{margin-top:16px}
.sg-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.sg--phone .sg-pager{grid-template-columns:1fr}
.sg--phone .sg-pager__gap{display:none}
.sg-pager__link{display:flex;flex-direction:column;gap:2px;padding:12px 16px;min-height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border);
  color:var(--r-heading);text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.sg-pager__link:hover{border-color:var(--r-line-hover);background:var(--surface-2);color:var(--r-heading)}
.sg-pager__link--next{text-align:right;grid-column:2}
.sg--phone .sg-pager__link--next{grid-column:1;text-align:left}
.sg-pager__dir{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sg-pager__name{font-weight:600}

@media (prefers-reduced-motion:reduce){.res-jump a,.res-card,.sg-index__row,.sg-pager__link{transition:none}}
@media print{
  .res-jump,.sg-actions,.sg-pager,.sg-back{display:none!important}
  .sg-guide{box-shadow:none;border:0;padding:0}
  .sg-note{break-inside:avoid}
  .sg-h2{break-after:avoid}
}