/* =============================================================================
   04 Blueprint · css/work.css · Sheet 02, System details (work.html)
   Page styles only. Shared tokens and components live in css/base.css.
   Sections: #system-details (hero + detail index), #detail-a, #detail-b,
   #detail-c (SM4 schematics), #builds, #materials, #operations, #in-preparation.
   Order: layout, components, sections, motion, media queries (min-width).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Hero: detail index (three markers that link to the details of this sheet)
   ----------------------------------------------------------------------------- */
.detail-index {
  margin-top: var(--s-7);
}

.di-title {
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--ink);
  color: var(--ink-3);
}

.di-link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}

.di-text {
  display: grid;
  gap: var(--s-1);
  color: var(--ink-3);
}

.di-name {
  color: var(--ink);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

/* Detail marker: a circle with the detail letter over the sheet number */
.detail-marker {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: stroke var(--dur-1) linear;
}

.detail-marker text {
  stroke: none;
}

.dm-letter {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-stretch: 62.5%;
  font-weight: 700;
}

.dm-sheet {
  fill: var(--ink-3);
  font-family: var(--font-text);
  font-size: 12px;
}

/* -----------------------------------------------------------------------------
   2. Details A, B, C: a schematic and its spec
   The markup order is head, spec, drawing. Below 64rem .detail-spec gives its two
   children to the grid, so the sheet reads head, drawing, spec: every drawing sits
   under its own rule and title. From 64rem the spec is one sticky column again.
   ----------------------------------------------------------------------------- */
.detail-grid {
  display: grid;
  row-gap: var(--s-6);
}

.detail-spec {
  display: contents;
}

.detail-spec .sec-head {
  order: 1;
  margin-bottom: 0;
}

.drawing {
  order: 2;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

.spec-dl {
  order: 3;
}

.drawing-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Pens: boxes 1.5 ink, connectors and inner panels 1.25 ink-2, hidden lines dashed */
.drawing-svg .bx,
.drawing-svg .cn,
.drawing-svg .ac,
.drawing-svg .hid,
.drawing-svg .pk {
  fill: none;
}

.drawing-svg .bx {
  stroke: var(--ink);
  stroke-width: 1.5;
}

.drawing-svg .cn {
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

.drawing-svg .ac {
  stroke: var(--accent);
  stroke-width: 1.25;
}

.drawing-svg .zone {
  stroke-width: 3;
}

.drawing-svg .hid {
  stroke: var(--construction);
  stroke-width: 1.25;
  stroke-dasharray: 6 4;
}

.drawing-svg .ah {
  fill: var(--ink-2);
}

.drawing-svg .dot-ac {
  fill: var(--accent);
}

.drawing-svg .sub-dot {
  fill: var(--ink-2);
}

.drawing-svg .sub-field {
  fill: url("#dc-dots");
}

/* Drawing lettering: Saira text caps, 15 units (11.2px at 358px wide) */
.drawing-svg .dl {
  fill: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.drawing-svg .dn {
  fill: var(--ink-2);
}

.drawing-svg .dl-key {
  fill: var(--ink);
  font-weight: 700;
}

/* Signal packets: only js/work.js shows them, when a drawing is complete */
.drawing-svg .pk {
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0;
}

.drawing-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
}

.drawing-caption span:nth-child(2) {
  color: var(--ink-2);
}

.spec-dl {
  border-bottom: 1px solid var(--rule);
}

.spec-item {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-4);
  border-top: 1px solid var(--rule);
}

.spec-item dt {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  line-height: 1.9;
  text-transform: uppercase;
}

.spec-item dd {
  max-width: var(--measure);
  color: var(--ink);
}

.figures {
  display: grid;
  gap: var(--s-3);
}

.figures li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--s-3);
  color: var(--ink-2);
}

.figure-value {
  color: var(--ink);
  font-size: var(--fs-stat);
  letter-spacing: 0.01em;
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   3. What I build: receipts inside the spec rows
   ----------------------------------------------------------------------------- */
#builds .spec-row .receipt {
  grid-column: 1 / -1;
  margin-top: var(--s-2);
}

/* -----------------------------------------------------------------------------
   4. Materials schedule
   ----------------------------------------------------------------------------- */
.materials {
  border-bottom: 1px solid var(--rule);
}

.mat-row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
  align-items: baseline;
  padding: var(--s-5) var(--s-4);
  border-top: 1px solid var(--rule);
}

.mat-code {
  color: var(--accent);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.mat-name {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.mat-row .tag-list {
  grid-column: 1 / -1;
  gap: var(--s-2);
}

.mat-row .spec-tag {
  padding: 0.3125rem 0.625rem;
  font-size: var(--fs-label);
}

/* -----------------------------------------------------------------------------
   5. Sequence of operations: ASME symbols on one line (vertical below 64rem)
   --ops-p is the drawn part of the line, 0 to 1 (js/work.js scrubs it).
   ----------------------------------------------------------------------------- */
.ops {
  --ops-p: 1;
  position: relative;
  display: grid;
  gap: var(--s-6);
}

.ops::before {
  content: "";
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: calc(1rem - 1px);
  width: 2px;
  background: var(--ink-2);
  scale: 1 var(--ops-p);
  transform-origin: top left;
}

.op {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-1);
}

/* The symbol breaks the line: a cleared paper square */
.op-sym {
  grid-row: 1 / span 3;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
}

.op-sym svg {
  width: 2rem;
  height: 2rem;
}

.op-code {
  grid-column: 2;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.op-name {
  grid-column: 2;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.op-text {
  grid-column: 2;
  color: var(--ink-2);
}

.ops-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
}

.ops-legend li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.ops-legend svg {
  width: 1rem;
  height: 1rem;
  color: var(--ink-2);
}

/* -----------------------------------------------------------------------------
   6. Drawings in preparation: hidden-line (dashed 6 4) boxes
   ----------------------------------------------------------------------------- */
.prep-list {
  display: grid;
  gap: var(--s-5);
}

.prep {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-height: 13rem;
  padding: var(--s-5) var(--s-5) 5rem;
  background:
    repeating-linear-gradient(to right, var(--ink-3) 0 6px, transparent 6px 10px) top / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--ink-3) 0 6px, transparent 6px 10px) bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to bottom, var(--ink-3) 0 6px, transparent 6px 10px) left / 1px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--ink-3) 0 6px, transparent 6px 10px) right / 1px 100% no-repeat;
}

.prep-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  max-width: none;
  color: var(--ink-3);
}

.prep-name {
  color: var(--ink-2);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
}

.stamp--prep {
  position: absolute;
  right: var(--s-5);
  bottom: var(--s-5);
  width: 10.5rem;
  height: 3.6rem;
  rotate: -4deg;
}

.prep:nth-child(2) .stamp--prep {
  rotate: 3deg;
}

.prep:nth-child(3) .stamp--prep {
  rotate: -7deg;
}

/* -----------------------------------------------------------------------------
   7. Motion (motion allowed only; .rv and .is-in come from BP.onEnter)
   ----------------------------------------------------------------------------- */

/* Hero: the detail markers pop in, 90ms apart (CSS only; not after a sheet change) */
html.motion-ok:not(.arrived) .di-link .detail-marker {
  animation: marker-pop var(--dur-2) var(--ease-snap) 500ms both;
}

html.motion-ok:not(.arrived) .di-list li:nth-child(2) .detail-marker {
  animation-delay: 590ms;
}

html.motion-ok:not(.arrived) .di-list li:nth-child(3) .detail-marker {
  animation-delay: 680ms;
}

@keyframes marker-pop {
  from {
    scale: 0;
  }
}

/* SM4: a drawing waits blank until it enters; js/work.js then inks it */
.drawing.rv:not(.is-in) .drawing-svg {
  opacity: 0;
}

/* Detail A shows under the hero on a first load: it is held blank until js/work.js has set
   its ink (.is-set), so the finished drawing never flashes before it is drawn. The hold has a
   CSS deadline (intro-deadline, css/base.css): if js/work.js has not run 2.5s after the first
   frame, the drawing is printed complete. */
html.motion-ok:not(.arrived, .motion-fallback) #detail-a .drawing:not(.is-set) .drawing-svg {
  opacity: 0;
  animation: intro-deadline 1ms linear 2500ms forwards;
}

/* Materials: the row rule is the border; the tags rise one by one */
.mat-row.rv .spec-tag {
  transition:
    opacity var(--dur-3) var(--ease-settle) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 40ms),
    translate var(--dur-3) var(--ease-settle) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 40ms);
}

.mat-row.rv:not(.is-in) .spec-tag {
  opacity: 0;
  translate: 0 0.5rem;
}

/* Operations: while the line is scrubbed (.is-live), each step waits for the line (.is-on) */
.ops.rv:not(.is-in)::before {
  scale: 1 0;
}

.ops.rv:not(.is-in) .op > * {
  opacity: 0;
}

.ops.is-live .op-sym svg {
  transition: scale var(--dur-2) var(--ease-snap);
}

.ops.is-live .op > :not(.op-sym) {
  transition: opacity var(--dur-3) var(--ease-settle), translate var(--dur-3) var(--ease-settle);
}

.ops.is-live .op:not(.is-on) .op-sym svg {
  scale: 0;
}

.ops.is-live .op:not(.is-on) .op-sym {
  background: none;
}

.ops.is-live .op:not(.is-on) > :not(.op-sym) {
  opacity: 0;
  translate: 0 0.5rem;
}

/* -----------------------------------------------------------------------------
   8. Media queries
   ----------------------------------------------------------------------------- */
@media (hover: hover) {
  .di-link:hover .detail-marker {
    stroke: var(--accent);
  }
}

@media (min-width: 48rem) {
  #builds .spec-row .receipt {
    grid-column: 3;
    margin-top: var(--s-1);
  }

  .mat-row {
    grid-template-columns: 4.5rem minmax(0, 2fr) minmax(0, 3fr);
  }

  .mat-row .tag-list {
    grid-column: auto;
  }
}

@media (min-width: 64rem) {
  /* Hero: h1 and lede on the left, the detail index beside them from the h1 line down. The hero
     stays short, so the top of Detail A is in the first screen (js/work.js inks it on a first load). */
  .page-hero > .wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto 1fr; /* the last row takes the extra height of the index */
    column-gap: var(--gutter);
    align-items: start;
  }

  .page-hero > .wrap > * {
    grid-column: 1 / -1;
  }

  .page-hero > .wrap > .page-h1 {
    grid-column: 1 / 8;
  }

  .page-hero > .wrap > .page-lede {
    grid-column: 1 / 7;
  }

  .page-hero > .wrap > .detail-index {
    grid-column: 8 / 13;
    grid-row: 2 / -1;
    margin-top: var(--s-6);
  }

  #detail-a {
    padding-top: var(--s-8);
  }

  .detail-marker {
    width: 4rem;
    height: 4rem;
  }

  /* The drawing fits between the header and the frame; the shorter spec stays beside it.
     Floor: 26rem wide, so the 15-unit labels stay at 13px on a short laptop screen. A drawing
     that is narrower than its six columns stands in their centre, so no wide empty band opens
     between it and the spec. */
  .detail-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .drawing {
    grid-column: 1 / 7;
    grid-row: 1;
    width: min(100%, max(26rem, (100svh - var(--header-h) - 2 * var(--frame-inset) - 7rem) * 0.75));
    max-width: none;
    margin-inline: 0;
    justify-self: center;
  }

  .detail-spec {
    position: sticky;
    top: calc(var(--frame-inset) + var(--header-h) + var(--s-6));
    display: block;
    grid-column: 8 / 13;
    grid-row: 1;
  }

  .detail-spec .sec-head {
    margin-bottom: var(--s-6);
  }

  .detail--mirror .drawing {
    grid-column: 7 / 13;
  }

  .detail--mirror .detail-spec {
    grid-column: 1 / 6;
  }

  .spec-item {
    grid-template-columns: 7rem minmax(0, 1fr);
    column-gap: var(--s-4);
  }

  .mat-row {
    grid-template-columns: 6rem minmax(0, 4fr) minmax(0, 6fr) 2rem;
    column-gap: var(--gutter);
  }

  .prep-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }

  /* Operations: five columns on one horizontal line */
  .ops {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .ops::before {
    top: calc(1rem - 1px);
    right: calc((100% - 4 * var(--gutter)) / 5 - 2rem); /* the line ends at the last symbol */
    bottom: auto;
    left: 0;
    width: auto;
    height: 2px;
    scale: var(--ops-p) 1;
  }

  .ops.rv:not(.is-in)::before {
    scale: 0 1;
  }

  .op {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    padding-right: var(--s-4);
  }

  .op-sym {
    margin-bottom: var(--s-4);
  }
}

/* Short laptop screens: a tighter hero, so the top of Detail A stays in the first screen */
@media (min-width: 64rem) and (max-height: 45rem) {
  .page-hero {
    padding-top: var(--s-6);
  }

  #detail-a {
    padding-top: var(--s-6);
  }
}