/* michaelmorale.com — project detail pages (one per project). Loaded after site.css.
   Page order: detail title block, then the detail body from src/content/projects/ID.html:
     .proj-figs    the drawing field: the live figure (plus the kit car's photo slots and FIG. 7A)
     .proj-text    .proj-story (problem, build, status) and .proj-notes (stack, keynotes)
   then the PREV / BACK TO SHEET / NEXT pager and the title strip.
   Phone and tablet: the drawing field is a full-width band straight under the title block, then the text.
   1024px+: the field is a column beside the text, and a lone figure stays in view while the text scrolls.
   .proj-figs--wide (Flipboard) keeps the band across the sheet and sets the text in two columns under it.
   Widget styles load separately from css/widgets/NAME.css. */

/* ------------------------------------------------------------------ detail title block */
.dt-head { display: flex; flex-direction: column; border-bottom: 2px solid var(--ink); }
.dt-main { display: flex; flex-direction: column; padding: 18px var(--frame-pad) 22px; min-width: 0; }
.dt-title { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 16px; }
.bubble--xl { width: 60px; height: 60px; }
.bubble--xl .bubble-n { font-size: 20px; padding-bottom: 6px; }
.bubble--xl .bubble-s { padding-top: 7px; }
.dt-h { font-family: var(--font-narrow); font-weight: 700; font-size: clamp(32px, 9vw, 64px); line-height: .98; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
.proj-kicker { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; line-height: 1.45; letter-spacing: .08em; color: var(--ink-2); }
/* the dek: one plain sentence, set a size up from the body like the Field Journal's standfirst */
.proj-one { margin-top: 8px; max-width: 36em; font-size: 18px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }

/* Phone: SHEET | ZONE, then STATUS and BUILT WITH across. The DETAIL mark repeats the bubble right above it,
   so it waits for the tablet title block (it is also in the title strip at the foot of the sheet). */
.dt-tb { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.dt-cell { padding: 10px var(--frame-pad) 12px; border-bottom: 1px solid var(--ink); min-width: 0; }
.dt-cell--wide { grid-column: 1 / -1; border-bottom: 0; }
@media (max-width: 719px) {
  .dt-cell--mark { display: none; }
  .dt-tb > .dt-cell:nth-child(2) { order: 1; border-right: 1px solid var(--ink); }
  .dt-tb > .dt-cell:nth-child(4) { order: 2; }
  .dt-tb > .dt-cell--status { order: 3; grid-column: 1 / -1; }
  .dt-tb > .dt-cell--wide { order: 4; }
}
.dt-val { margin-top: 4px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; line-height: 1.4; }
.dt-mark { margin-top: 4px; font-family: var(--font-narrow); font-weight: 700; font-size: 26px; line-height: 1; }
.dt-cell--status dd { margin-top: 8px; }

/* Tablet title block: DETAIL | SHEET | ZONE, then STATUS | BUILT WITH, so the longest stamp keeps one line */
@media (min-width: 720px) and (max-width: 1179px) {
  .dt-tb { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dt-tb > .dt-cell { grid-column: span 2; border-right: 1px solid var(--ink); }
  .dt-tb > .dt-cell--mark { order: 1; }
  .dt-tb > .dt-cell:nth-child(2) { order: 2; }
  .dt-tb > .dt-cell:nth-child(4) { order: 3; border-right: 0; }
  .dt-tb > .dt-cell--status { order: 4; grid-column: span 3; border-bottom: 0; }
  .dt-tb > .dt-cell--wide { order: 5; grid-column: span 3; border-right: 0; }
}

/* ------------------------------------------------------------------ body */
.detail-body { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--ink); }

/* the drawing field: a band of panel paper, the figure drawn on it */
.proj-figs { min-width: 0; background: var(--panel); border-bottom: 1px solid var(--ink); }
.fig-region { min-width: 0; padding: 0 var(--frame-pad) 22px; container-type: inline-size; }
.proj-figs > * + * { border-top: 1px solid var(--line); }

/* detail title across the top of each drawing: what it is, and LIVE once the widget has mounted */
.fig-label, .photo-set > .lbl {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  margin: 0 calc(-1 * var(--frame-pad)) 18px; padding: 13px var(--frame-pad) 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: .08em; color: var(--ink);
}
.fig-region:has(> .fig.is-live) > .fig-label::after {
  content: "LIVE"; content: "LIVE" / ""; /* a visual cue only; the controls say what they do */
  flex: none; margin-left: auto; padding-left: 14px; color: var(--accent); letter-spacing: .14em;
  background: radial-gradient(circle, var(--accent) 3.5px, transparent 4px) 0 50% / 8px 8px no-repeat;
}

.fig { position: relative; min-width: 0; }
.fig--static svg { width: 100%; height: auto; }
.fig-note { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em; color: var(--ink-2); }
.fig-text { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* fallback: request trace */
.trace-svg { display: none; margin: 0 auto 12px; }
.trace-svg--narrow { display: block; } /* under 302px, the tightened drawing keeps its 12px labels */
@container (min-width: 302px) {
  .trace-svg { display: block; }
  .trace-svg--narrow { display: none; }
}
.trace-steps { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin-inline: auto; }
.trace-steps li { font-size: 15px; line-height: 1.5; }
.step-n { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); }

/* fallback: pull plan */
.pp-static { display: flex; flex-direction: column; margin-top: 12px; border: 1.5px solid var(--ink); }
.pp-static li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; min-height: 40px; background: var(--sheet); }
.pp-static li + li { border-top: 1px solid var(--line); }
.slot-n { padding: 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); }
.slot-name { padding-right: 10px; font-family: var(--font-narrow); font-weight: 600; font-size: 16px; line-height: 1.2; }
.rev-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.rev-note .rev-tri { flex: none; }
.rev-note p { font-size: 15px; line-height: 1.5; }
.rev-note-lead { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); }

/* fallback: ledger */
.lg-static { display: grid; gap: 14px; }
.lg-total { font-family: var(--font-narrow); font-weight: 700; font-size: 34px; line-height: 1.05; }
.lg-buckets { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.lg-bucket { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; }
.lg-bucket dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.lg-bucket dd { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.lg-bar { position: relative; display: block; height: 8px; background: var(--hover); }
.lg-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); }
.lg-fill-100 { width: 66.7%; }
.lg-fill-25 { width: 16.7%; }
.lg-fill-50 { width: 33.3%; }
.lg-v { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.lg-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; }
.lg-table caption { text-align: left; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lg-table td { padding: 5px 6px 5px 0; border-bottom: 1px dotted var(--line); vertical-align: top; }
.lg-table .num { font-weight: 600; text-align: right; padding-right: 10px; }
@container (min-width: 440px) { .lg-static { grid-template-columns: 170px minmax(0, 1fr); gap: 18px; } }

/* flipboard wiring */
.wiring {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  margin-top: 14px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-align: center;
}
.w-box { padding: 8px 4px; border: 1.2px solid var(--ink); background: var(--sheet); line-height: 1.25; min-width: 0; }
.w-link { position: relative; min-width: 28px; height: 1px; background: var(--ink); }
.w-proto { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-weight: 400; color: var(--ink-2); }
.w-state { grid-column: 1 / -1; margin-top: 8px; font-weight: 400; color: var(--ink-2); }
@container (max-width: 339px) {
  /* too narrow for three whole-word boxes in a row: run the wiring top to bottom */
  .wiring { grid-template-columns: minmax(0, 1fr); }
  .w-link { justify-self: center; width: 1px; min-width: 0; height: 26px; }
  .w-proto { left: 10px; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* fallback: dial */
.dial-static { display: grid; gap: 14px; justify-items: center; }
.dial-svg { width: 220px; height: auto; }
.dial-segs { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
@container (min-width: 440px) { .dial-static { grid-template-columns: 220px minmax(0, 1fr); justify-items: start; align-items: center; gap: 18px; } }

/* quickshot keys */
.keys { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); }
.keys li { display: flex; align-items: center; gap: 6px; }
.keys kbd { padding: 3px 7px; border: 1px solid var(--ink); border-bottom-width: 2px; background: var(--sheet); color: var(--ink); font-size: 12px; font-weight: 600; }

/* fallback: scan overlay */
.scan-svg { width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.sw { flex: none; width: 18px; height: 12px; border: 1px solid var(--ink-2); }
.sw-stip { border-style: dashed; background: radial-gradient(circle, var(--ink-2) 0 1px, transparent 1.2px) 0 0 / 5px 5px; }
.sw-hex { border-color: var(--ink); background: repeating-linear-gradient(60deg, var(--ink) 0 1px, transparent 1px 4px); }

/* kit car photo slots: crop-marked frames waiting for prints. Phone: the first slot runs full width. */
.photo-set { padding: 0 var(--frame-pad) 22px; }
.photo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.photo-slot { min-width: 0; }
.photo-slot:first-child { grid-column: 1 / -1; }
.photo-slot img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
.photo-slot-frame {
  position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  border: 1.5px dashed var(--ink-2); background: var(--sheet);
}
.photo-slot-frame::before, .photo-slot-frame::after { /* corner ticks, like crop marks on a drawing */
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink);
}
.photo-slot-frame::before { left: 6px; top: 6px; border-left-width: 1.5px; border-top-width: 1.5px; }
.photo-slot-frame::after { right: 6px; bottom: 6px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.photo-slot figcaption { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: .06em; color: var(--ink-2); }
.funnel-svg { max-width: 320px; margin: 0 auto; }
@media (min-width: 560px) {
  .photo-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-slot:first-child { grid-column: auto; }
}

/* ------------------------------------------------------------------ the written detail: Field Journal reading rhythm */
/* 16px body on a 1.62 line, 64ch measure, 28px between sections, small tracked labels ruled out to the edge */
.proj-text { display: flex; flex-direction: column; gap: 28px; padding: 26px var(--frame-pad) 30px; min-width: 0; }
.proj-story, .proj-notes { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.spec h2 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: .14em; color: var(--ink-2);
}
.spec h2::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.spec p { max-width: 64ch; font-size: 16px; line-height: 1.62; text-wrap: pretty; }
.stack { display: flex; flex-wrap: wrap; max-width: 64ch; font-family: var(--font-mono); font-size: 13px; line-height: 1.8; }
.stack li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--ink-2); }
.keynotes { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; counter-reset: kn; }
.keynotes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.55; counter-increment: kn; }
.keynotes li::before { /* keynote hexagon, as on a drawing */
  content: counter(kn); display: flex; align-items: center; justify-content: center; width: 26px; height: 22px; margin-top: 2px;
  background: var(--ink); color: var(--sheet); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}

/* ------------------------------------------------------------------ pager */
/* Phone: PREV, BACK TO SHEET and NEXT each get a full row, in reading and tab order, so "1 / A-101" never breaks at its hyphen. */
.detail .pager { margin-top: 0; padding-top: 22px; border-top: 0; }
@media (max-width: 559px) {
  .detail .pager { grid-template-columns: minmax(0, 1fr); }
  .detail .pager-prev, .detail .pager-next, .detail .pager-up { grid-column: 1; grid-row: auto; }
}
.dt-strip { margin-top: 26px; }

/* ------------------------------------------------------------------ tablet (720px+) */
@media (min-width: 720px) {
  .dt-main { padding: 26px var(--frame-pad) 28px; }
  .bubble--xl { width: 72px; height: 72px; }
  .bubble--xl .bubble-n { font-size: 24px; }
  .dt-title { gap: 20px; }
  .proj-one { font-size: 19px; }

  .fig-region, .photo-set { padding-bottom: 26px; }
  .fig-label, .photo-set > .lbl { margin-bottom: 22px; }
  .proj-text { padding-top: 32px; padding-bottom: 36px; }
  .spec p { font-size: 17px; }
}

/* ------------------------------------------------------------------ wide (1024px+): the field beside the text */
@media (min-width: 1024px) {
  .detail-body { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: stretch; }
  .proj-figs { border-bottom: 0; border-right: 1px solid var(--ink); }
  .fig-region, .photo-set { padding-inline: 28px; }
  .fig-label, .photo-set > .lbl { margin-inline: -28px; padding-inline: 28px; }
  .proj-text { padding: 30px 32px 40px 36px; gap: 32px; }
  .proj-story, .proj-notes { gap: 30px; }

  /* Flipboard: the board wants the whole width, so the field stays a band and the text splits under it */
  .proj-figs--wide { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--ink); }
  .proj-figs--wide .fig-region { padding-inline: 40px; padding-bottom: 30px; }
  .proj-figs--wide .fig-label { margin-inline: -40px; padding-inline: 40px; }
  .proj-figs--wide + .proj-text { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 0; padding: 0; }
  .proj-figs--wide + .proj-text > .proj-story { padding: 32px 40px 40px; }
  .proj-figs--wide + .proj-text > .proj-notes { padding: 32px 32px 40px 36px; border-left: 1px solid var(--line); }
}
/* a lone figure stays in view while the text scrolls past it (only when the screen is tall enough to hold it) */
@media (min-width: 1024px) and (min-height: 720px) {
  .proj-figs:not(.proj-figs--wide) > .fig-region:only-child { position: sticky; top: 0; }
}

/* ------------------------------------------------------------------ wide (1180px+): title block on the right edge */
@media (min-width: 1180px) {
  .dt-head { display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
  .dt-main { padding: 30px 44px 34px; }
  /* the title sits down on the sheet, level with the detail mark at the foot of the title block */
  .dt-title { margin-top: auto; padding-top: 24px; }
  .proj-one { font-size: 21px; line-height: 1.42; }
  .dt-tb { display: flex; flex-direction: column; border-top: 0; border-left: 2px solid var(--ink); }
  .dt-tb > .dt-cell { padding: 11px 18px 12px; border-right: 0; border-bottom: 1px solid var(--ink); }
  .dt-tb > .dt-cell--mark { order: 9; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 0; }
  .dt-tb > .dt-cell--wide { border-bottom: 2px solid var(--ink); }
  .dt-mark { font-size: 56px; line-height: .95; }

  .fig-region, .photo-set { padding-inline: 44px; padding-bottom: 32px; }
  .fig-label, .photo-set > .lbl { margin-inline: -44px; padding-inline: 44px; }
  .proj-text { padding: 34px 44px 44px 40px; }
  .proj-figs--wide .fig-region { padding-inline: 44px; }
  .proj-figs--wide .fig-label { margin-inline: -44px; padding-inline: 44px; }
  .proj-figs--wide + .proj-text > .proj-story { padding: 34px 44px 44px; }
  .proj-figs--wide + .proj-text > .proj-notes { padding: 34px 44px 44px 40px; }
}

@media (min-width: 1440px) {
  .dt-h { font-size: 72px; }
  .proj-text, .proj-figs--wide + .proj-text > .proj-story, .proj-figs--wide + .proj-text > .proj-notes { padding-top: 38px; }
}

/* ------------------------------------------------------------------ print: text after the figure, no sticky */
@media print {
  .detail-body { display: block; }
  .proj-figs { background: none; }
  .fig-region { position: static !important; }
  .fig-label::after { content: none !important; }
}