/* research/netineti: this page's own components, after longform.css.
   layers: tokens.css > holon.css > longform.css > this file > utilities.css. */

/* this plan's extra pair variant: dates down the side */
.techs.dates li { grid-template-columns: 6rem 1fr; }
.techs.dates b { color: var(--quiet); font-size: 15px; padding-top: 0.2rem; }
.techs.dates span { color: var(--ink); }
.techs.dates span i { display: block; color: var(--quiet); font-style: normal; font-size: 17px; }

.steps { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 36rem; counter-reset: n; }
.steps li { counter-increment: n; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 1.2rem; padding: 0.7rem 0; border-top: 1px solid rgba(25,25,24,0.12); font-size: 17px; line-height: 1.7; }
.steps li::before { content: counter(n); color: var(--quiet); font-size: 15px; padding-top: 0.2rem; }
.plain { list-style: none; margin: 1.2rem 0 0; padding: 0; max-width: 36rem; }
.plain li { padding: 0.6rem 0; border-top: 1px solid rgba(25,25,24,0.12); font-size: 17px; line-height: 1.7; }
.plain b { font-weight: 400; }
.plain span { color: var(--quiet); }

/* an experiment, pre-registered: one open card, each field on its own hairline */
.exp { max-width: 36rem; margin-top: 4rem; }
.exp-h { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; margin: 0 0 0.4rem; }
.exp-h .id { color: var(--quiet); font-size: 15px; letter-spacing: 0.04em; }
.exp-h h3 { font-weight: 400; font-size: clamp(23px, 2.4vw, 26px); line-height: 1.4; margin: 0; }
.exp-h .cost { color: var(--quiet); font-size: 15px; margin-left: auto; }
.exp .q { font-style: italic; color: var(--quiet); margin: 0 0 1rem; }
.row { display: grid; grid-template-columns: 7rem 1fr; gap: 0 1.2rem; padding: 0.7rem 0; border-top: 1px solid rgba(25,25,24,0.1); font-size: 17px; line-height: 1.7; }
.row b { font-weight: 400; font-style: italic; color: var(--quiet); }
.row p { grid-column: 2; margin: 0 0 0.6rem; }
.row p:last-child { margin: 0; }
.row.falsify { border-top-color: rgba(25,25,24,0.35); }
.row.falsify b { color: var(--ink); }

/* the cue: the stop rule */
.cue { border-left: 1px solid rgba(25,25,24,0.35); padding-left: 1.2rem; margin: 2.4rem 0; max-width: 29rem; }
.cue p { margin: 0 0 0.6rem; }
.cue p:last-child { margin: 0; }

/* the full plan, folded like the home page's cards (details.layer/.fold mechanism
   lives in holon.css; this page only styles what the fold contains) */
details.layer .in { margin-top: 1.2rem; }
details.layer .in p:last-child { margin-bottom: 0; }
details.layer .in .mid { font-size: clamp(22px, 2.4vw, 26px); margin: 2.8rem 0 0.8rem; }
details.layer .in .mid:first-child { margin-top: 0.6rem; }
details.layer .in p, details.layer .in li { font-size: 17px; line-height: 1.7; }
details.layer .in .techs { max-width: none; }
details.layer .in .techs li { grid-template-columns: 9rem 1fr; }
details.layer .in .steps { max-width: none; }
.map { font: 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--quiet); background: none; border: 0; padding: 0; margin: 0.6rem 0 0; white-space: pre; overflow-x: auto; }
.refs { font-size: 15px; color: var(--quiet); margin: 0.6rem 0 0; }
.refs a { margin-right: 0.8em; }

/* one later experiment, folded */
details.exp2 { border-top: 1px solid rgba(25,25,24,0.14); padding: 0.9rem 0; }
details.exp2:last-of-type { border-bottom: 1px solid rgba(25,25,24,0.14); }
details.exp2 summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0 1rem; align-items: baseline; font-size: 17px; }
details.exp2 summary::-webkit-details-marker { display: none; }
details.exp2 .id { color: var(--quiet); font-size: 14px; letter-spacing: 0.04em; }
details.exp2 .cost { color: var(--quiet); font-size: 14px; white-space: nowrap; }
details.exp2 .in { margin-top: 0.8rem; }
details.exp2 { --gap: 0.8rem; }
/* a row is tall enough to tap: the summary keeps 44 px without moving the layout */
details.exp2 summary { padding: 8px 0; margin: -8px 0; }
details.exp2 .in .q { font-style: italic; color: var(--quiet); margin: 0 0 0.6rem; font-size: 17px; }
details.exp2 .row { font-size: 16px; }

@media (max-width: 760px) {
  details.layer .in .techs li { grid-template-columns: 1fr; }
  .techs.dates li { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row p { grid-column: auto; }
  .row b { margin-bottom: 0.1rem; }
  details.exp2 summary { grid-template-columns: 2.6rem 1fr; }
  details.exp2 .cost { grid-column: 2; }
  details.layer { padding-right: 2.6rem; }
}

/* body reads in inter, as on /research; display lines stay newsreader */
body { font-family: var(--sans) !important; }
p, li, summary { font-family: var(--sans); }
p.big { font-family: var(--serif); }
.sub { font-size: 17px; line-height: 1.6; color: var(--quiet); margin: 1.2rem 0 0; }
/* k. is not named here; dot rules live in home.css and research.css */

/* the crumb, sans as on the other inner pages */
.top { font: 400 14px/1.65 var(--sans); color: var(--quiet); margin: 0 0 3rem; }
/* the four row summary reads first, a touch larger than the folds */
.paper > .wide > .techs > li { font-size: 18px; }
/* experiment cards inside a fold sit flush */
@media (min-width: 761px) { details.layer .in .exp2 .row { grid-template-columns: 6.5rem 1fr; } }