/* How it works contents (site layout; app/views/site/how_it_works). Loaded through the layout's
   :head slot, before site/pages.css, so every rule is scoped under .pg to outrank it.

   It lives in app/assets/stylesheets rather than app/site_assets because only this folder is on
   the site-lane allowlist. The portal layout also loads it (stylesheet_link_tag :app) but never
   renders .pg; test/domains/site/how_it_works_contents_css_test.rb keeps every selector scoped.

   Wide screens: the table of contents is a sticky left sidebar, on the index and on every page.
   1000px and below: the index shows the contents right after its heading, before the diagram;
   pages keep the "Contents" disclosure at the top. */

.pg .rail .rail-part > .p{font:650 13px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin:22px 0 2px}
.pg .rail > ol > .rail-part:first-child > .p{margin-top:12px}
.pg .rail .g{font-size:14px;margin:12px 0 4px}
.pg .rail li a{padding:4px 0 4px 12px;font-size:14px}

/* Index */
.pg .hiw-grid{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-areas:"side head" "side body";column-gap:clamp(32px,4vw,64px);align-items:start}
.pg .hiw-head{grid-area:head;min-width:0}
.pg .hiw-body{grid-area:body;min-width:0}
.pg .hiw-side{grid-area:side;position:sticky;top:96px;max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.pg .hiw-side .rail{position:static}
.pg .hiw-part{margin-top:clamp(48px,6vw,80px);scroll-margin-top:96px}
.pg .hiw-part-h{font-size:clamp(30px,3.4vw,44px);letter-spacing:-0.035em;line-height:1.05;margin:0}
.pg .hiw-part-gloss{color:var(--ink-2);font-size:18px;margin:12px 0 0;max-width:32em}
.pg .hiw-part .groups{margin-top:clamp(20px,3vw,32px)}
.pg .hiw-body .cta{margin-top:clamp(48px,6vw,80px)}

@media (max-width:1000px){
  .pg .hiw-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "body"}
  .pg .hiw-side{position:static;max-height:none;overflow:visible;padding:4px 0 20px;margin:28px 0 8px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
  .pg .rail li a{padding:9px 0 9px 12px;font-size:16px}
}
@media (min-width:600px) and (max-width:1000px){
  .pg .hiw-side .rail > ol{columns:2;column-gap:40px}
  .pg .hiw-side .rail-part{break-inside:avoid}
}

/* Pages: the contents on the left on wide screens */
@media (min-width:1001px){
  .pg .pbody .gwrap{grid-template-columns:240px minmax(0,1fr)}
  .pg .pbody .gwrap > .rail{order:-1;max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
}