/* michaelmorale.com — zone sheets (A-101 Jobsite, E-201 Bench, Z-301 Shop): the enlarged plan of the zone with its
   key plan, one detail card per project, and the match line into the next sheet.
   The sheet title block, crumbs, pager and callouts live in site.css. Card markup comes from build.mjs; each card's
   small drawing is src/content/figures/ID.svg. */

/* ------------------------------------------------------------------ enlarged plan */
/* Each crop repeats its sheet's planView from src/data/site.json (x, y, width, height of the 680 x 520 plan),
   so the callout links land on the drawing. node build.mjs --check fails if the two disagree. */
.siteplan--a-101 { --vx: 32; --vy: 32; --vw: 360; --vh: 480; }
.siteplan--e-201 { --vx: 386; --vy: 2; --vw: 294; --vh: 302; }
.siteplan--z-301 { --vx: 392; --vy: 304; --vw: 288; --vh: 208; }

.sh-body { display: flex; flex-direction: column; gap: 32px; padding: 20px var(--frame-pad) 0; min-width: 0; }
.zoneplan-col { display: flex; flex-direction: column; min-width: 0; }
.zoneplan { min-width: 0; }
/* Plan text is drawn at 13.5 units; the drawing never shrinks below 0.9x, so it stays at 12px or more.
   On the narrowest phones the jobsite plan pans sideways inside its frame instead. */
.zoneplan-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.siteplan--zone { min-width: calc(var(--vw) * .9px); max-width: calc(var(--vw) * 1.6px); }
.zoneplan-cap { flex-wrap: nowrap; align-items: flex-start; }
.zoneplan-cap-text { display: flex; flex-direction: column; min-width: 0; }
.zoneplan-cap .lbl + .lbl { margin-top: 0; }

/* key plan: the whole site with this zone hatched in red pencil; the link goes to the overall plan on the cover */
.keyplan-link {
  display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 8px 14px 8px 8px;
  border: 1.5px solid var(--ink); background: var(--panel); color: var(--ink); text-decoration: none;
  transition: background-color .16s ease, box-shadow .16s ease;
}
.keyplan-link:hover { background: var(--hover); color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.kp { flex: none; width: 88px; height: auto; }
.kp-fill rect { display: none; }
.kp--a-101 .kp-fill .kp-a-101, .kp--e-201 .kp-fill .kp-e-201, .kp--z-301 .kp-fill .kp-z-301 { display: inline; }
.kp--a-101 .kp-zones .kp-a-101, .kp--e-201 .kp-zones .kp-e-201, .kp--z-301 .kp-zones .kp-z-301 {
  stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: none;
}
.kp-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kp-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.35;
}
.keyplan-link:hover .kp-go { color: var(--accent); }

/* ------------------------------------------------------------------ detail cards */
/* container: a lone card (Z-301) lies on its side once the column is wide enough */
.details { min-width: 0; container-type: inline-size; }
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; margin-top: 16px; }
.dcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1.5px solid var(--ink); background: var(--panel);
  transition: background-color .16s ease, box-shadow .16s ease;
}
.dcard:hover, .dcard:focus-within { background: var(--hover); box-shadow: inset 0 -3px 0 var(--accent); }
/* the drawing sits in its own framed panel, like a detail boxed on a sheet */
.dcard-fig {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 14px 12px; border-bottom: 1px dashed var(--ink-2); background: var(--sheet);
}
.dcard-svg { width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.dcard-body { display: flex; flex-direction: column; flex: 1; padding: 14px 14px 0; }
.dcard-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; }
.dcard-head .bubble { width: 56px; height: 56px; }
.dcard-names { min-width: 0; }
.dcard-title { font-family: var(--font-narrow); font-weight: 700; font-size: 24px; line-height: 1.05; letter-spacing: -.003em; }
.dcard-kicker { margin-top: 4px; font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: .06em; color: var(--ink-2); }
.dcard-one { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.dcard-stamp { margin-top: 14px; }
.dcard-specs { margin-top: 14px; border-top: 1px solid var(--line); }
.dcard-specs div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dcard-specs dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-2); padding-top: 1px; }
.dcard-specs dd { font-size: 14px; line-height: 1.4; }
/* the whole card is the link: OPEN DETAIL stretches over it */
.dcard-open {
  display: flex; align-items: center; gap: 8px; min-height: 52px; margin: auto -14px 0; padding: 0 14px;
  border-top: 1.5px solid var(--ink); text-decoration: none; color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em;
}
.dcard-open .ico { margin-left: auto; transition: transform .16s ease; }
.dcard-ref { font-weight: 400; color: var(--ink-2); letter-spacing: .04em; }
.dcard-open::after { content: ""; position: absolute; inset: 0; }
.dcard-open:focus-visible { outline: none; }
.dcard-open:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 3px; }
.dcard:hover .dcard-open, .dcard:focus-within .dcard-open { color: var(--accent); }
.dcard:hover .dcard-ref, .dcard:focus-within .dcard-ref { color: inherit; }
.dcard:hover .dcard-open .ico { transform: translateX(3px); }

/* card figure paint: split-flap tiles (Flipboard) use the board tokens */
.dcard-svg .f-tile { fill: var(--tile); }
.dcard-svg .f-tile-well { fill: var(--tile-well); }
.dcard-svg .f-tile-ink { fill: var(--tile-ink); }
.dcard-svg .s-tile-well { stroke: var(--tile-well); }

/* A lone card (Z-301) gets the whole row: a bigger drawing on top, then the text in two columns */
@container (min-width: 560px) {
  .dcard:only-child { grid-column: 1 / -1; }
  .dcard:only-child .dcard-fig { padding: 22px 20px 18px; }
  .dcard:only-child .dcard-svg { max-width: 440px; }
  .dcard:only-child .dcard-body {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "head specs" "one specs" "stamp specs" ". specs" "open open";
    column-gap: 28px; padding: 18px 20px 0;
  }
  .dcard:only-child .dcard-head { grid-area: head; }
  .dcard:only-child .dcard-one { grid-area: one; }
  .dcard:only-child .dcard-stamp { grid-area: stamp; margin-bottom: 18px; }
  .dcard:only-child .dcard-specs { grid-area: specs; align-self: start; margin-top: 4px; }
  .dcard:only-child .dcard-open { grid-area: open; margin: 0 -20px; padding: 0 20px; }
}

/* ------------------------------------------------------------------ plan <-> cards */
/* Point at a card and its callout on the plan lights up in red pencil, and the other way round.
   Cards and callouts come out of build.mjs in the same order, so position pairs them (up to six per sheet). */
.sh-body:has(.dcard:nth-child(1):is(:hover, :focus-within)) .siteplan--zone > .callout:nth-of-type(1),
.sh-body:has(.dcard:nth-child(2):is(:hover, :focus-within)) .siteplan--zone > .callout:nth-of-type(2),
.sh-body:has(.dcard:nth-child(3):is(:hover, :focus-within)) .siteplan--zone > .callout:nth-of-type(3),
.sh-body:has(.dcard:nth-child(4):is(:hover, :focus-within)) .siteplan--zone > .callout:nth-of-type(4),
.sh-body:has(.dcard:nth-child(5):is(:hover, :focus-within)) .siteplan--zone > .callout:nth-of-type(5),
.sh-body:has(.dcard:nth-child(6):is(:hover, :focus-within)) .siteplan--zone > .callout:nth-of-type(6) {
  background: var(--accent); border-color: var(--accent); border-style: solid; color: var(--on-accent);
}
.sh-body:has(.siteplan--zone > .callout:nth-of-type(1):is(:hover, :focus-visible)) .dcard:nth-child(1),
.sh-body:has(.siteplan--zone > .callout:nth-of-type(2):is(:hover, :focus-visible)) .dcard:nth-child(2),
.sh-body:has(.siteplan--zone > .callout:nth-of-type(3):is(:hover, :focus-visible)) .dcard:nth-child(3),
.sh-body:has(.siteplan--zone > .callout:nth-of-type(4):is(:hover, :focus-visible)) .dcard:nth-child(4),
.sh-body:has(.siteplan--zone > .callout:nth-of-type(5):is(:hover, :focus-visible)) .dcard:nth-child(5),
.sh-body:has(.siteplan--zone > .callout:nth-of-type(6):is(:hover, :focus-visible)) .dcard:nth-child(6) {
  background: var(--hover); box-shadow: inset 0 -3px 0 var(--accent);
}
.sh-body:has(.siteplan--zone > .callout:nth-of-type(1):is(:hover, :focus-visible)) .dcard:nth-child(1) .dcard-open,
.sh-body:has(.siteplan--zone > .callout:nth-of-type(2):is(:hover, :focus-visible)) .dcard:nth-child(2) .dcard-open,
.sh-body:has(.siteplan--zone > .callout:nth-of-type(3):is(:hover, :focus-visible)) .dcard:nth-child(3) .dcard-open,
.sh-body:has(.siteplan--zone > .callout:nth-of-type(4):is(:hover, :focus-visible)) .dcard:nth-child(4) .dcard-open,
.sh-body:has(.siteplan--zone > .callout:nth-of-type(5):is(:hover, :focus-visible)) .dcard:nth-child(5) .dcard-open,
.sh-body:has(.siteplan--zone > .callout:nth-of-type(6):is(:hover, :focus-visible)) .dcard:nth-child(6) .dcard-open {
  color: var(--accent);
}

/* ------------------------------------------------------------------ match line + pager */
/* The dash-dot line is the plan's zone-outline pen (16 5 3 5). */
.matchline {
  display: flex; align-items: center; gap: 12px; margin-top: 36px; padding: 0 var(--frame-pad);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; line-height: 1.3; color: var(--ink-2);
}
.matchline::before, .matchline::after {
  content: ""; flex: 1 1 24px; min-width: 24px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 16px, transparent 16px 21px, var(--ink) 21px 24px, transparent 24px 29px);
}
.matchline::before { flex: 0 0 24px; }
.matchline span { flex: 0 1 auto; min-width: 0; text-align: center; }
.matchline .ml-more { display: none; }
.zone-sheet .pager { margin-top: 14px; border-top: 0; }
/* the way on: NEXT SHEET is the filled one */
.zone-sheet .pager-next { background: var(--ink); border-color: var(--ink); color: var(--sheet); }
.zone-sheet .pager-next .pager-k { color: var(--sheet); }
.zone-sheet .pager-next:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.zone-sheet .pager-next:hover .pager-k { color: var(--on-accent); }
.zone-sheet .pager-next .ico { transition: transform .16s ease; }
.zone-sheet .pager-next:hover .ico { transform: translateX(3px); }
/* what is on the next sheet (site.css sets the face): even lines when it has to wrap */
.zone-sheet .pager-note { text-wrap: balance; }
/* Phone: PREV SHEET and NEXT SHEET each get a full row, in reading and tab order (as on the project pages),
   so the labels and the note are not squeezed into half columns */
@media (max-width: 559px) {
  .zone-sheet .pager { grid-template-columns: minmax(0, 1fr); }
  .zone-sheet .pager-prev, .zone-sheet .pager-next { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------------------------------ small phones, then tablet (720px+) */
@media (max-width: 399px) {
  .keyplan-link { gap: 12px; }
  .kp { width: 72px; }
}

@media (min-width: 560px) {
  .matchline .ml-more { display: inline; }
  .keyplan-link { align-self: flex-start; }
}

@media (min-width: 720px) {
  .sh-body { padding-top: 26px; }
  .zoneplan { max-width: 640px; }
  .siteplan--a-101 { max-width: 460px; }
  .dcards { gap: 18px; }
  .zone-sheet .pager-next .pager-name { font-size: 22px; }
}

/* ------------------------------------------------------------------ plan beside the cards (960px+) */
@media (min-width: 960px) {
  .sh-body { display: grid; grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); column-gap: 32px; align-items: start; }
  .zoneplan { max-width: none; }
  .siteplan--zone { max-width: none; }
}

/* The plan column stays pinned beside the cards. To keep the whole column (caption, plan, key plan) inside the
   viewport, the drawing is capped to the height left after about 240px of caption, key plan and margins, but never
   below its 0.9x floor. svh (the viewport with browser toolbars showing) where supported, vh otherwise. */
@media (min-width: 960px) and (min-height: 640px) {
  .zoneplan-col { position: sticky; top: 20px; }
  .siteplan--zone {
    max-width: max(calc(var(--vw) * .9px), calc((100vh - 240px) * var(--vw) / var(--vh)));
    max-width: max(calc(var(--vw) * .9px), calc((100svh - 240px) * var(--vw) / var(--vh)));
  }
}

@media (min-width: 1180px) {
  .sh-body { padding: 32px 44px 0; column-gap: 40px; }
  .matchline { margin-top: 44px; padding: 0 44px; }
  .zone-sheet .pager-next .pager-name { font-size: 24px; }
}

/* ------------------------------------------------------------------ forced colors, motion, print */
@media (forced-colors: active) {
  .matchline::before, .matchline::after { forced-color-adjust: none; background: CanvasText; }
  .zone-sheet .pager-next { border-color: LinkText; }
}
@media (prefers-reduced-motion: reduce) {
  .dcard:hover .dcard-open .ico, .zone-sheet .pager-next:hover .ico { transform: none; }
}
@media print {
  .keyplan-link, .matchline { display: none !important; }
  .zoneplan-col { position: static; }
  .dcard-open::after { display: none; }
}