/* posts/revisiting-down-and-out.css — figures for one evolving post.
   Loaded through the post's pageStyles. Pen + pixel marks (docs/pen-and-pixel.md):
   meaning rides on marks, never colour; marks sit in a strip at the edge and always
   beside a word; text never sits on texture. Moss = where to look. Works without JS. */

.rdo-fig{
  margin: 1.5rem 0;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.rdo-fig figcaption{ font-size: var(--text-sm); color: var(--muted); margin-top: .8rem; line-height: 1.5; }
.rdo-fig__title{ font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 0 .7rem; }

/* ── Study at a glance: recorded numbers, no marks needed ── */
.rdo-glance{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.rdo-glance li{ background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; margin: 0; }
.rdo-glance .n{ display: block; font-family: var(--mono); font-weight: 600; font-size: 1.45rem; line-height: 1.15; color: var(--ink); }
.rdo-glance .l{ display: block; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.35; margin-top: .15rem; }
@media (max-width: 600px){ .rdo-glance{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ── Legend ── */
.rdo-legend{ display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0 0 .9rem; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--ink-soft); }
.rdo-legend li{ display: flex; align-items: center; gap: .45rem; margin: 0; }
.rdo-mk{ display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--mark); }
.rdo-mk--open{ box-shadow: none; border: 1.5px dashed var(--mark); }
.rdo-mk--pen{ background: var(--mark-hatch); }
.rdo-mk--pixel{ background: var(--mark-dither); }
.rdo-mk--solid{ background: var(--mark-solid); }
.rdo-mk--ruled{ background: var(--mark-ruled); }

/* ── Five steps ── */
.rdo-steps{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.rdo-step{ position: relative; margin: 0; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 1rem .75rem .75rem; overflow: hidden; }
.rdo-step::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; }
.rdo-step--open{ border: 1.5px dashed var(--mark); }
.rdo-step--open::before{ display: none; }
.rdo-step--pen::before{ background: var(--mark-hatch); }
.rdo-step--pixel::before{ background: var(--mark-dither); }
.rdo-step--solid::before{ background: var(--mark-solid); }
.rdo-step--ruled::before{ background: var(--mark-ruled); }
.rdo-step__k{ display: block; font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.rdo-step__t{ display: block; font-weight: 700; color: var(--ink); margin: .1rem 0 .25rem; line-height: 1.25; }
.rdo-step__d{ display: block; font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.45; }
.rdo-step__c{ display: block; font-family: var(--mono); font-weight: 600; font-size: 1.3rem; color: var(--ink); margin-top: .5rem; }
.rdo-step--now{ outline: 2px solid var(--moss); outline-offset: 2px; }
.rdo-step__now{ display: block; font-family: var(--mono); font-size: var(--text-xs); font-weight: 600; color: var(--moss); margin-top: .1rem; }
@media (max-width: 760px){
  .rdo-steps{ grid-template-columns: minmax(0,1fr); }
  .rdo-step{ padding: .8rem .8rem .75rem 1.2rem; }
  .rdo-step::before{ right: auto; bottom: 0; width: 7px; height: auto; }
}

/* ── Map of the questions ── */
.rdo-map{ margin: 0; }
.rdo-row{ display: grid; grid-template-columns: 11rem minmax(0,1fr) 2rem; gap: .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--rule); }
.rdo-row:first-child{ border-top: 0; }
.rdo-row__name{ font-size: var(--text-sm); font-weight: 700; color: var(--ink); line-height: 1.3; }
.rdo-row__n{ font-family: var(--mono); font-weight: 600; text-align: right; color: var(--ink); }
.rdo-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rdo-chip{ margin: 0; font-family: var(--mono); font-size: var(--text-xs); color: var(--ink); background: var(--bg); border: 1px solid var(--mark); border-radius: 5px; min-height: 26px; display: inline-flex; align-items: center; padding: .15rem .45rem .15rem calc(5px + .4rem); background-image: linear-gradient(90deg, transparent 0 5px, var(--bg) 5px); }
.rdo-chip--open{ border: 1.5px dashed var(--mark); padding-left: .45rem; background-image: none; }
.rdo-chip--pen{ background-image: linear-gradient(90deg, transparent 0 5px, var(--bg) 5px), var(--mark-hatch); }
.rdo-chip--pixel{ background-image: linear-gradient(90deg, transparent 0 5px, var(--bg) 5px), var(--mark-dither); }
.rdo-chip--solid{ background-image: linear-gradient(90deg, transparent 0 5px, var(--bg) 5px), var(--mark-solid); }
.rdo-chip--ruled{ background-image: linear-gradient(90deg, transparent 0 5px, var(--bg) 5px), var(--mark-ruled); }
@media (max-width: 600px){
  .rdo-row{ grid-template-columns: minmax(0,1fr) 2rem; }
  .rdo-chips{ grid-column: 1 / -1; order: 3; }
}

/* Question lists under the map: show the ID beside each question */
.rdo-qid{ font-family: var(--mono); font-size: var(--text-xs); color: var(--muted); margin-right: .45rem; }

/* Collapsible groups: a quiet frame so they read as one set */
.e-content details{ border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .35rem .8rem; margin: .4rem 0; }
.e-content details[open]{ padding-bottom: .6rem; }
.e-content summary{ cursor: pointer; font-weight: 700; }
.e-content details + p{ margin-top: 1.1rem; }

@media print{
  .rdo-fig{ break-inside: avoid; }
  /* Keep the pen + pixel marks on paper. print.css clears every background with
     !important (it is tuned for the résumé), so the marks re-assert themselves here,
     narrowly: only the mark swatches, step strips and chip strips, never a fill. */
  .rdo-fig, .rdo-fig *, .rdo-fig *::before{ -webkit-print-color-adjust: exact; print-color-adjust: exact; --mark: #3a453d; }
  .rdo-mk--pen{ background: var(--mark-hatch) !important; }
  .rdo-mk--pixel{ background: var(--mark-dither) !important; }
  .rdo-mk--solid{ background: var(--mark-solid) !important; }
  .rdo-mk--ruled{ background: var(--mark-ruled) !important; }
  .rdo-step--pen::before{ background: var(--mark-hatch) !important; }
  .rdo-step--pixel::before{ background: var(--mark-dither) !important; }
  .rdo-step--solid::before{ background: var(--mark-solid) !important; }
  .rdo-step--ruled::before{ background: var(--mark-ruled) !important; }
  .rdo-chip--pen{ background: linear-gradient(90deg, transparent 0 5px, #fff 5px), var(--mark-hatch) !important; }
  .rdo-chip--pixel{ background: linear-gradient(90deg, transparent 0 5px, #fff 5px), var(--mark-dither) !important; }
  .rdo-chip--solid{ background: linear-gradient(90deg, transparent 0 5px, #fff 5px), var(--mark-solid) !important; }
  .rdo-chip--ruled{ background: linear-gradient(90deg, transparent 0 5px, #fff 5px), var(--mark-ruled) !important; }
}