/* Spacing pass, linked last on every page that links site.css (tools/site_nav.py ui_head()), so it applies after
   every page's own components. Moved out of site.css on Oct 20; the key review builder used to repeat it inline. */
/* SPACING START: spacing pass (Oct 19; rules in docs/PLAYBOOK.md "Spacing"): space shows what belongs together. Scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 px.
   Inside a group (a label and its value, a heading and its text, a tip and the table it explains): 4 to 12. Tips in a row: 4.
   Between groups in a section (intro, table, chart, tiles, the next point): 24.
   A sub-heading sits 32 below what came before and 8 above what it labels.
   Between section cards: 12, open or closed, so opening one never moves the others apart. Before a new part of the tab: 48.
   On phones the big steps drop one size (48 to 32, 32 to 24); the tight pairs stay the same. */
details.deep[open]>summary{padding-bottom:16px}
details.deep>.fold-body{padding:4px 20px 20px 16px}
details.deep>.fold-body>*{margin-top:0;margin-bottom:0}
details.deep>.fold-body>*+*{margin-top:24px}
details.deep>.fold-body>.sec-note+.sec-note{margin-top:8px}   /* summary notes in a row (Oct 23, Christiaan: 8px) */
details.deep>.fold-body>.tipbox,details.deep>.fold-body>p.why.tipbox{margin-top:24px}
/* a tip right after a table, chart or tiles explains it: keep it close */
details.deep>.fold-body>:is(table,.tablewrap,.mstat,.dvv,.sbr,.sbk,.sw,.tiles,.ms-key,ol.story)+.tipbox{margin-top:12px}
/* tips in a row read as one set */
details.deep>.fold-body>.tipbox+.tipbox,details.deep>.fold-body>.tipbox+p.why.tipbox{margin-top:4px}
/* A tip box that opens a card sits like a first line, and a table after a tip box sits 12px below it, the same as a
   tip box after a table (Christiaan, Oct 21: the Brutalizer card's spacing was uneven) */
details.deep>.fold-body>.tipbox:first-child,details.deep>.fold-body>p.why.tipbox:first-child{margin-top:12px}
details.deep>.fold-body>.tipbox+:is(table,.tablewrap,.mstat,.dvv,.tiles){margin-top:12px}
/* paragraphs of one point stay together */
details.deep>.fold-body>p.why:not(.tipbox)+p.why:not(.tipbox){margin-top:12px}
/* a one-line intro that describes the table or tiles right under it stays close to them */
details.deep>.fold-body>p.why:not(.tipbox)+:is(table,.tablewrap,.mstat,.dvv,.tiles){margin-top:12px}
/* sub-headings belong to what follows them */
details.deep>.fold-body>:is(h4,.mini-h,.sub-h){margin-top:32px}
details.deep>.fold-body>:is(h4,.mini-h,.sub-h)+*{margin-top:8px}
details.deep>.fold-body>:first-child{margin-top:0}
/* the cause line labels the timeline under it */
details.deep>.fold-body>.cause+ol.story{margin-top:12px}
/* rows of one list stay together */
details.deep>.fold-body>.sbr+.sbr,details.deep>.fold-body>.sbr+.sbk,details.deep>.fold-body>.ms+.ms{margin-top:12px}
details.deep>.fold-body>.ms-do+.ms,details.deep>.fold-body>.ms+.ms-key{margin-top:12px}
/* sections inside a section */
details.deep>.fold-body>details.deep{margin-top:24px}
details.deep>.fold-body>details.deep+details.deep{margin-top:12px}
/* section cards */
details.deep+details.deep,details.deep.attached{margin-top:12px}
/* a part of the tab ("Whole key · …") starts a new group */
.part>.scope2{margin-top:48px;margin-bottom:0}
.scope2{margin-bottom:0}
.part>.part-h+.scope2{margin-top:12px}
/* "Whole key · …" labels the cards under it: close to them, far from the summary items above */
.scope2+details.deep{margin-top:12px}
.fpanels .tl-detail{margin-bottom:40px}
/* in each summary item, the Why sits a step away from the Do, and the buttons a step below the Why */
.tl-d .wc-why{margin-top:12px}
/* Pacing tab: its own rules use the tab id, so these repeat with it */
#panel-pace details.deep>.fold-body{padding:4px 20px 20px 16px}
#panel-pace details.deep>.fold-body>*{margin-top:0;margin-bottom:0}
#panel-pace details.deep>.fold-body>*+*{margin-top:24px}
#panel-pace details.deep>.fold-body>.sec-note+.sec-note{margin-top:8px}
#panel-pace details.deep>.fold-body>.tipbox,#panel-pace details.deep>.fold-body>p.why.tipbox{margin-top:24px}
#panel-pace details.deep>.fold-body>:is(table,#panel-pace .tablewrap,#panel-pace .mstat,#panel-pace .dvv,#panel-pace .sbr,#panel-pace .sbk,#panel-pace .sw,#panel-pace .tiles,#panel-pace .ms-key,#panel-pace ol.story)+.tipbox{margin-top:12px}
#panel-pace details.deep>.fold-body>.tipbox+.tipbox,#panel-pace details.deep>.fold-body>.tipbox+p.why.tipbox{margin-top:4px}
#panel-pace details.deep>.fold-body>p.why:not(.tipbox)+p.why:not(.tipbox){margin-top:12px}
#panel-pace details.deep>.fold-body>p.why:not(.tipbox)+:is(table,#panel-pace .tablewrap,#panel-pace .mstat,#panel-pace .dvv,#panel-pace .tiles){margin-top:12px}
#panel-pace details.deep>.fold-body>:is(h4,#panel-pace .mini-h,#panel-pace .sub-h){margin-top:32px}
#panel-pace details.deep>.fold-body>:is(h4,#panel-pace .mini-h,#panel-pace .sub-h)+*{margin-top:8px}
#panel-pace details.deep>.fold-body>:first-child{margin-top:0}
#panel-pace details.deep>.fold-body>.cause+ol.story{margin-top:12px}
#panel-pace details.deep>.fold-body>.sbr+.sbr,#panel-pace details.deep>.fold-body>.sbr+.sbk,#panel-pace details.deep>.fold-body>.ms+.ms{margin-top:12px}
#panel-pace details.deep>.fold-body>.ms-do+.ms,#panel-pace details.deep>.fold-body>.ms+.ms-key{margin-top:12px}
#panel-pace details.deep>.fold-body>details.deep{margin-top:24px}
#panel-pace details.deep>.fold-body>details.deep+details.deep{margin-top:12px}
/* a table's color key is its caption; pattern tips explain the numbers above them */
details.deep>.fold-body>:is(table,.tablewrap)+.pc-key,#panel-pace details.deep>.fold-body>:is(table,.tablewrap)+.pc-key{margin-top:8px}
details.deep>.fold-body>:is(.mstat,.tablewrap,table,.tiles)+.patterns,#panel-pace details.deep>.fold-body>:is(.mstat,.tablewrap,table,.tiles)+.patterns{margin-top:12px}
/* burn windows: the rows are one list, the summary tip explains them, the key labels them */
details.deep>.fold-body>.ba-row+.ba-row,details.deep>.fold-body>.ba-row+.burn-all,details.deep>.fold-body>.burn-all+.bs-key,details.deep>.fold-body>.ba-row+.bs-key{margin-top:12px}
@media (max-width:600px){
  details.deep>.fold-body>:is(h4,.mini-h,.sub-h),#panel-pace details.deep>.fold-body>:is(h4,.mini-h,.sub-h){margin-top:24px}
  .part>.scope2{margin-top:32px}
  .fpanels .tl-detail{margin-bottom:32px}
  details.deep>.fold-body,#panel-pace details.deep>.fold-body{padding:4px 16px 16px 16px}
}
/* Oct 20 (Christiaan): pulls in Active mitigation sit 24 apart, so each reads as its own moment */
details.deep>.fold-body>.ms+.ms{margin-top:24px}
/* Oct 20: a phase's fix line and the tip box under it are tips in a row, 4 apart */
.phx-fix+.tipbox{margin-top:4px}
/* SPACING END */

/* Oct 28: no empty top block; the first card sits right under the tabs; a card after a tab's top block (Item level on
   Gear) is 12px below it, like every other card */
.fpanel>.ptop:empty{display:none}
.fpanel>.ptop:empty+.part>details.deep:first-of-type{margin-top:.25rem}
.fpanel>.part:first-child>.part-h:first-child+details.deep{margin-top:.25rem}   /* the tab's first card when nothing sits above it (heading hidden) */
.ptop+details.deep{margin-top:12px}
.ptop:has(+details.deep){margin-bottom:12px}
.ptop:has(+details.deep)>:last-child{margin-bottom:0}