/* The lighter-pages grammar (DESIGN_SYSTEM, "Folds and the page switch"; REDESIGN-PLAN).
   ------------------------------------------------------------------------------------
   Everything here sits behind data-shape="lighter" on <main>, so a page links this sheet
   and changes nothing until it also sets the attribute. That is what lets one stage be
   piloted while the other six, which share stage.css, stay as they are. When the last page
   is converted the attribute and this scoping go, and these rules move into the sheets
   they belong to.

   The parts, each with one job:
   - .l-tint: the main thing to do, on a pale tint of the page's own stop.
   - Step discs inside it, filled with the full stop.
   - .l-raised: questions and where to go next.
   - White for explanation, 24px between paragraphs.
   - A fold that looks like a button and says Show or Hide.
   - .m-loud, once, as the one sentence set large in place of a box. */

/* A band runs the full width of the window, while its text keeps the column. The fill is
   a border-image pushed out 100vmax each side rather than a 100vw pseudo-element: it does
   not assume the section is centred in the window, and an outset border-image is ink
   overflow, so it can never make the page scroll sideways. The section's own background
   is set as well, to the same colour, because that is what a script reads as "tinted" and
   what shows if border-image is not drawn. The ink rule top and bottom says where the band
   starts and ends, so the section still reads with the tint invisible, which is the first
   colour a yellowed lens loses. */
main[data-shape="lighter"] :is(.l-tint, .l-raised){
  --band:var(--tint);
  background-color:var(--band);
  border-image:linear-gradient(var(--top-rule, var(--ink)) 0 1px, var(--band) 0 calc(100% - 1px), var(--end-rule, var(--ink)) 0) fill 0 / 0 / 0 100vmax;
  padding-block:44px 20px;
  margin-block:44px;
}
main[data-shape="lighter"] .l-raised{--band:var(--lift)}
/* Two raised sections in a row are one band: the rule and the gap between them go. */
main[data-shape="lighter"] .l-raised:has(+ .l-raised){--end-rule:var(--band); margin-bottom:0}
main[data-shape="lighter"] .l-raised + .l-raised{--top-rule:var(--band); margin-top:0}

/* A band holds text, discs and folds and nothing else with a fill or a frame of its own,
   so the blocks that are boxes on white give theirs up inside one. */
main[data-shape="lighter"] :is(.l-tint, .l-raised) :is(.howto, .rule-card, .m-term){background:none}
main[data-shape="lighter"] :is(.l-tint, .l-raised) .obit{
  background:none; border:0; border-top:1px solid var(--ink); padding:18px 0 0;
}
/* The next-page card is a link, so the box check exempts it, but in a band it is the same box. */
main[data-shape="lighter"] :is(.l-tint, .l-raised) .next{
  background:none; border:0; border-top:1px solid var(--ink); padding:18px 0 0;
}
main[data-shape="lighter"] :is(.l-tint, .l-raised) .next:hover .q{text-decoration-line:underline; text-underline-offset:4px}
/* The time and cost chips are labels, not boxes, once they sit in a band. */
main[data-shape="lighter"] :is(.l-tint, .l-raised) .meta{gap:6px 18px}
main[data-shape="lighter"] :is(.l-tint, .l-raised) .meta span{background:none; border:0; padding:0}
/* Large type belongs to .m-loud alone. A rule inside the steps and a reader's question in a
   pull keep their rule, which sets them apart from the prose round them, at body size. The
   pull keeps its raised fill because what it holds is a question. */
main[data-shape="lighter"] :is(.l-tint, .l-raised) .rule-card{padding:0 0 0 24px; margin:18px 0}
main[data-shape="lighter"] :is(.rule-card p, .pull p:first-child){font:600 23px/var(--leading-prose) var(--font-body)}

/* At 1250 and up the stage grid alternates its apparatus column side to side. Blocks a reader
   reads in order stay in the prose column instead, or each one leaves half the screen empty
   beside it. */
@media (min-width:1251px){
  main[data-shape="lighter"] .body > :is(.pull, .obit, .m-loud){grid-column:1}
  main[data-shape="lighter"] section:nth-of-type(even) .body > :is(.pull, .obit, .m-loud){grid-column:2}
}
main[data-shape="lighter"] .act :is(h3, h4){text-wrap:balance}

/* Discs mark the order of the steps, inside the tint only. The stop is a ground under ink
   at 4.52 or better (tokens.css), and the ink border keeps the accent inside an intact
   line. Written out in full because the stage pages do not load onpage.css. */
main[data-shape="lighter"] .l-tint .step > .num{
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:var(--disc, 46px); height:var(--disc, 46px);
  border:1px solid var(--ink); border-radius:100%; background:var(--stop);
  font:500 17px/1 var(--font-mono); color:var(--ink); letter-spacing:normal;
}

/* White is for explanation: a full line of space between paragraphs. */
/* Not the stage menu: its group labels are spaced to sit with the group below them. */
main[data-shape="lighter"] :is(section, .body, details:not(.stagemenu)) > p{margin:0 0 24px}
main[data-shape="lighter"] :is(section, .body, details:not(.stagemenu)) > p:last-child{margin-bottom:0}

/* A fold is a button. Glossary terms (.m-term) carry their gloss in the summary and are
   not folds; the stage menu is navigation with its own control. Everything else that
   closes gets an ink frame, a 44px target and a label that says what pressing it does,
   because a bare triangle or a plus is the control a reader over 75 most often misses. */
main[data-shape="lighter"] details:not(.m-term, .stagemenu){margin:16px 0 24px; max-width:var(--measure)}
main[data-shape="lighter"] details:not(.m-term, .stagemenu) > summary{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:52px; padding:10px 14px; box-sizing:border-box;
  font:500 17px/1.35 var(--font-body); color:var(--ink); text-wrap:balance;
  background:var(--ground); border:1px solid var(--ink-line); border-radius:var(--radius);
  cursor:pointer; list-style:none;
}
main[data-shape="lighter"] details:not(.m-term, .stagemenu) > summary::-webkit-details-marker{display:none}
main[data-shape="lighter"] details:not(.m-term, .stagemenu) > summary::after{
  content:"Show"; flex:none;
  font:500 13px/1 var(--font-mono); letter-spacing:var(--track); text-transform:uppercase;
  color:var(--ink); border:1px solid var(--ink-line); border-radius:99px; padding:7px 10px;
}
main[data-shape="lighter"] details[open]:not(.m-term, .stagemenu) > summary::after{content:"Hide"}
main[data-shape="lighter"] details:not(.m-term, .stagemenu) > summary:hover{text-decoration-line:underline; text-underline-offset:4px}
main[data-shape="lighter"] details:not(.m-term, .stagemenu) > summary:focus-visible{outline:2px solid var(--ink-line); outline-offset:3px}
main[data-shape="lighter"] details:not(.m-term, .stagemenu) > :not(summary){margin:16px 0 0}

/* The one sentence set large. It stands in white between sections, never inside a band,
   so it breaks a run of prose instead of becoming a box of its own. */
main[data-shape="lighter"] .m-loud{margin-block:56px}