/* =============================================================================
   04 Blueprint · css/home.css · Sheet 01, General arrangement (index.html)
   Uses the tokens and components of base.css. Order: variables, layout,
   components, sections, media queries.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Hero layout (#general-arrangement)
   ----------------------------------------------------------------------------- */
.hero {
  padding-top: var(--s-7);
}

.hero-grid {
  display: grid;
  row-gap: var(--s-8);
}

/* The copy column is the container for --fs-display (22.5cqi) */
.hero-copy {
  min-width: 0;
  container-type: inline-size;
}

.kicker {
  color: var(--ink-2);
}

/* The dimension is exactly as wide as the widest h1 line ("ENGINEERED") */
.hero-title {
  width: max-content;
  max-width: 100%;
  margin-top: var(--s-6);
}

/* Extension lines run down to 4px above the cap line of the first h1 line */
.hero-dim {
  --ext-below: calc(0.09 * var(--fs-display) - 4px);
  min-height: 2.75rem;
}

.hero-h1 {
  --cap: 0.09em;
  --base: 0.778em;
  --lh: 0.86em;
  font-size: var(--fs-display);
  line-height: 0.86;
}

/* Guidelines run from the frame across the whole copy column */
.hero-h1 .h1-guides {
  right: auto;
  width: calc(100cqi - var(--guide-left));
}

.hero-lede {
  margin-top: var(--s-6);
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.45;
}

.hero-actions {
  margin-top: var(--s-6);
}

.hero-receipt {
  margin-top: var(--s-7);
}

/* -----------------------------------------------------------------------------
   2. GA figure: five plates on the order path (SM2)
   ----------------------------------------------------------------------------- */
.ga {
  display: grid;
  justify-items: center;
  gap: var(--s-4);
}

.ga-svg {
  width: 100%;
  max-width: 26rem;
  height: auto;
  overflow: visible;
}

.ga-caption {
  max-width: 26rem;
  color: var(--ink-3);
  font-size: var(--fs-small);
  line-height: 1.5;
  text-align: center;
}

.ga .f-top {
  fill: var(--paper-2);
}

.ga .f-left {
  fill: color-mix(in srgb, var(--ink) 6%, var(--paper));
}

.ga .f-right {
  fill: color-mix(in srgb, var(--ink) 12%, var(--paper));
}

.ga .p-out {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: miter;
  transition: stroke var(--dur-1) linear;
}

.ga .plate.is-active .p-out {
  stroke: var(--accent);
}

.ga .p-edge {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

/* The order path through the parts: a hidden line (ISO 128 dashed), under the pictogram ink */
.ga .p-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--construction) 70%, transparent);
  stroke-width: 1.25;
  stroke-dasharray: 6 4;
}

/* Pictograms on the top faces: 1.25px strokes whatever the skew */
.ga .pl,
.ga .po,
.ga .pz {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ga .pl {
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

.ga .pl.pb {
  fill: var(--paper-2);
}

.ga .pf {
  fill: var(--ink-2);
}

.ga .po {
  stroke: var(--accent);
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.ga .pa {
  fill: var(--accent);
}

.ga .pz {
  stroke: var(--accent);
  stroke-width: 3;
}

.ga .leader {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

.ga .anchor {
  fill: var(--ink-2);
}

.ga .balloon {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.ga .balloon-no {
  fill: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 700;
}

.ga .chain {
  fill: none;
  stroke: var(--construction);
  stroke-width: 1.25;
  stroke-dasharray: 12 3 2 3;
}

.ga .chain-head {
  fill: var(--construction);
}

.ga .packet {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0;
}

.ga .ga-label {
  fill: var(--ink-3);
  font-family: var(--font-text);
  font-size: 17px;
  letter-spacing: 0.06em;
}

/* Detail markers: hidden below 30rem, where they would be under 9px */
.ga-markers {
  display: none;
}

.ga-marker {
  cursor: pointer;
}

.ga .marker-ring {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
  transition: stroke var(--dur-1) linear;
}

.ga-marker:hover .marker-ring {
  stroke: var(--accent);
}

.ga .marker-div,
.ga .marker-leader {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

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

.ga .marker-sheet {
  fill: var(--ink-3);
  font-family: var(--font-text);
  font-size: 13px;
}

/* -----------------------------------------------------------------------------
   3. Parts list (below the fold, beside the sticky figure from 64rem)
   ----------------------------------------------------------------------------- */
.parts-title {
  margin-bottom: var(--s-3);
  color: var(--ink-3);
}

.parts-head {
  display: none;
}

.parts-list {
  border-top: 2px solid var(--ink);
}

.parts-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur-1) linear;
}

.parts-row.is-active {
  background: var(--paper-3);
}

.parts-no {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  margin-left: var(--s-2);
  border: 1px solid transparent;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-1) linear, color var(--dur-1) linear;
}

.parts-row.is-active .parts-no {
  border-color: var(--accent);
  color: var(--accent);
}

.parts-name {
  font-weight: 700;
}

.parts-spec {
  grid-column: 2;
  color: var(--ink-2);
  font-size: var(--fs-small);
}

/* -----------------------------------------------------------------------------
   4. Credentials: key figures and nameplates (#credentials)
   ----------------------------------------------------------------------------- */
.key-figures {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}

.key-figures .dim {
  min-height: 3rem;
}

.rating {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.stamp--rating {
  flex: none;
  width: 7rem;
  height: 7rem;
  rotate: -8deg;
}

.nameplates {
  display: grid;
  gap: var(--s-5);
}

.nameplate {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6) var(--s-6) var(--s-5);
  border: 2px solid var(--ink);
}

/* Inner border, 4px inside the plate edge */
.nameplate::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ink-2);
  pointer-events: none;
}

/* Slotted rivets in the four corners */
.rivet {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink-2);
  border-radius: 50%;
  background: linear-gradient(45deg, transparent 42%, var(--ink-2) 42% 58%, transparent 58%);
}

.rivet:nth-of-type(1) {
  top: 10px;
  left: 10px;
}

.rivet:nth-of-type(2) {
  top: 10px;
  right: 10px;
}

.rivet:nth-of-type(3) {
  bottom: 10px;
  left: 10px;
}

.rivet:nth-of-type(4) {
  right: 10px;
  bottom: 10px;
}

.np-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

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

.np-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
}

.np-field dt {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.np-value {
  margin-top: var(--s-1);
  font-size: var(--fs-stat);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* Inline-block, so a value can rise on entry (an inline box cannot move) */
.np-value > span {
  display: inline-block;
}

.np-note {
  margin-top: calc(-1 * var(--s-3));
  color: var(--ink-2);
}

.np-link {
  margin-top: auto;
}

/* -----------------------------------------------------------------------------
   5. Performance specification (#performance)
   ----------------------------------------------------------------------------- */
.req {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
}

.req:first-child {
  padding-top: 0;
}

.req-code {
  position: relative;
  display: inline-grid;
  width: 5.5rem;
  height: 1.875rem;
  place-items: center;
  color: var(--accent);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.req-box {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
}

.req-name {
  margin-top: var(--s-4);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
}

.req-line {
  margin-top: var(--s-2);
  color: var(--ink-2);
}

/* -----------------------------------------------------------------------------
   6. Detail references (#details)
   ----------------------------------------------------------------------------- */
.detail-cards {
  display: grid;
  gap: var(--s-5);
}

.detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  transition: background-color var(--dur-1) linear;
}

.detail-art {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.detail-marker {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
}

.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;
}

.mini {
  width: 10rem;
  height: 6rem;
  overflow: visible;
}

.mini .ln {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.25;
}

.mini .ln-2 {
  stroke: var(--ink-2);
}

.mini .ln-acc {
  stroke: var(--accent);
}

.mini .ln-dots {
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linecap: round;
}

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

.stretched {
  text-decoration: none;
}

/* The whole card is the link target */
.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.detail-text {
  color: var(--ink-2);
  font-size: var(--fs-small);
}

.detail-open {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--s-2);
  color: var(--ink);
}

.detail-open .icon {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform var(--dur-2) var(--ease-snap);
}


/* -----------------------------------------------------------------------------
   7. Inspection reports (#inspection)
   ----------------------------------------------------------------------------- */
.insp-grid {
  display: grid;
  gap: var(--s-7);
}

.insp-register {
  display: grid;
  justify-items: center;
  align-self: start;
  gap: var(--s-4);
}

.stamp--register {
  width: 11rem;
  height: 11rem;
  rotate: -6deg;
}

.insp-register .stamp-caption b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-stretch: 62.5%;
  letter-spacing: 0.02em;
}

.reports {
  display: grid;
  gap: var(--s-6);
}

#inspection .report blockquote {
  max-width: 44rem;
  font-size: var(--fs-quote);
  line-height: 1.5;
}

.insp-more {
  margin-top: var(--s-7);
}

/* -----------------------------------------------------------------------------
   8. Motion (motion allowed only; js/home.js and BP.onEnter set .rv, .is-in and
   --reveal-delay, see "Scroll reveals" in base.css)
   ----------------------------------------------------------------------------- */

/* Hero: the lede, actions and receipt paint with the first frame (the lede is the LCP), then
   settle 0.75rem into place, 80ms apart. CSS only: no script and no opacity change. Not after
   a sheet change (html.arrived): the sweep prints the finished sheet. */
/* The 195+ dimension is part of the headline: printed with the first frame below 64rem, drawn
   by the intro from 64rem (see the 64rem block). */
html.motion-ok .hero-dim[data-intro] {
  opacity: 1;
}

html.motion-ok:not(.arrived) :is(.hero-lede, .hero-actions, .hero-receipt) {
  animation: settle-in var(--dur-3) var(--ease-settle) both; /* keyframes in base.css */
}

html.motion-ok:not(.arrived) .hero-actions {
  animation-delay: 80ms;
}

html.motion-ok:not(.arrived) .hero-receipt {
  animation-delay: 160ms;
}

/* Credentials: the dimensions and the rating stamp wait (js/home.js draws and stamps them) */
.key-figures.rv:not(.is-in) :is(.dim, .stamp) {
  opacity: 0;
}

/* Nameplates: rivets pop (snap) 40ms apart, then the values rise 80ms apart */
.nameplates.rv .rivet {
  transition: scale var(--dur-2) var(--ease-snap) var(--reveal-delay, 0ms);
}

.nameplates.rv .np-value > span {
  transition:
    opacity var(--dur-3) var(--ease-settle) var(--reveal-delay, 0ms),
    translate var(--dur-3) var(--ease-settle) var(--reveal-delay, 0ms);
}

.nameplates.rv:not(.is-in) .rivet {
  scale: 0;
}

.nameplates.rv:not(.is-in) .np-value > span {
  opacity: 0;
  translate: 0 0.5rem;
}

/* REQ code boxes draw (stroke offset on a path with pathLength="1") */
.req.rv .req-box path {
  stroke-dasharray: 1;
  stroke-linecap: square;
  transition: stroke-dashoffset var(--dur-4) var(--ease-draft);
}

.req.rv:not(.is-in) .req-box path {
  stroke-dashoffset: 1;
}

/* Detail cards rise 90ms apart (the hover background keeps its own transition) */
.detail-card.rv {
  transition:
    opacity var(--dur-3) var(--ease-settle) var(--reveal-delay, 0ms),
    translate var(--dur-3) var(--ease-settle) var(--reveal-delay, 0ms),
    background-color var(--dur-1) linear;
}

.detail-card.rv:not(.is-in) {
  opacity: 0;
  translate: 0 0.75rem;
}

/* Selected reports rise 90ms apart; each stamp follows (BP.stamp) */
.reports .report.rv {
  transition:
    opacity var(--dur-3) var(--ease-settle) var(--reveal-delay, 0ms),
    translate var(--dur-3) var(--ease-settle) var(--reveal-delay, 0ms);
}

.reports .report.rv:not(.is-in) {
  opacity: 0;
  translate: 0 0.75rem;
}

/* -----------------------------------------------------------------------------
   9. Media queries
   ----------------------------------------------------------------------------- */
@media (hover: hover) {
  .detail-card:hover {
    background: color-mix(in srgb, var(--paper-3) 55%, transparent);
  }

  .detail-card:hover .detail-open {
    color: var(--accent);
  }

  .detail-card:hover .detail-open .icon {
    transform: translateX(0.25rem);
  }
}

@media (min-width: 30rem) {
  .ga-markers {
    display: inline;
  }

  .parts-head,
  .parts-row {
    grid-template-columns: 3rem minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .parts-head {
    display: grid;
    column-gap: var(--s-3);
    padding-block: var(--s-2);
    color: var(--ink-3);
  }

  .parts-head span:first-child {
    padding-left: var(--s-2);
  }

  .parts-list {
    border-top-width: 1px;
  }

  .parts-head {
    border-top: 2px solid var(--ink);
  }

  .parts-spec {
    grid-column: auto;
  }
}

@media (min-width: 48rem) {
  .nameplates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nameplate:nth-child(3) {
    grid-column: 1 / -1;
  }

  .ga-svg,
  .ga-caption {
    max-width: 30rem;
  }
}

@media (min-width: 64rem) {
  .hero {
    padding-top: var(--s-6);
  }

  html.motion-ok:not(.arrived, .motion-fallback) .hero-dim[data-intro] {
    opacity: 0;
  }

  .hero-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: var(--section-pad);
  }

  /* The display size also follows the viewport height here, so the two buttons stay in the first
     screen of a short laptop (1366 x 657): 17svh is 112px there, and the 9rem cap from 847px up. */
  .hero-copy {
    --fs-display: clamp(2.75rem, min(22.5cqi, 17svh), 9rem);
    grid-column: 1 / 7;
    grid-row: 1;
  }

  /* The figure stays beside the copy while the plates separate */
  .ga {
    position: sticky;
    top: calc(var(--frame-inset) + var(--header-h) + 1rem);
    grid-column: 7 / 13;
    grid-row: 1 / 3;
    align-self: start;
  }

  /* The figure and its two-line caption fit between the header and the frame */
  .ga-svg {
    max-width: none;
    max-height: calc(100svh - var(--header-h) - 2 * var(--frame-inset) - var(--s-6) - 6rem);
  }

  .ga-caption {
    max-width: 30rem;
  }

  .parts {
    grid-column: 1 / 7;
    grid-row: 2;
    align-self: start;
  }

  .key-figures {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
  }

  .key-figures > li {
    grid-column: span 4;
  }

  .nameplates {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .nameplate:nth-child(1) {
    grid-column: 1 / 6;
  }

  .nameplate:nth-child(2) {
    grid-column: 6 / 10;
  }

  .nameplate:nth-child(3) {
    grid-column: 10 / 13;
  }

  .req {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

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

  /* The receipt starts on the line of its h3: REQ box height plus the h3 top margin */
  .req .receipt {
    grid-column: 7 / 13;
    margin-top: calc(1.875rem + var(--s-4));
  }

  .req .receipt blockquote {
    font-size: var(--fs-body);
  }

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

  .insp-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .insp-register {
    position: sticky;
    top: calc(var(--frame-inset) + var(--header-h) + 2rem);
    grid-column: 1 / 5;
  }

  .stamp--register {
    width: 15rem;
    height: 15rem;
  }

  .reports {
    grid-column: 5 / 13;
  }

  .insp-more {
    padding-left: calc((100% + var(--gutter)) / 3);
  }
}

/* Short screens (up to 832px tall): tighter hero spacing and a smaller lede, so the two buttons
   and the whole receipt (the quote with its source) clear the frame line of the first screen */
@media (min-width: 64rem) and (max-height: 52rem) {
  .hero {
    padding-top: var(--s-4);
  }

  .hero-title {
    margin-top: var(--s-4);
  }

  .hero-lede {
    margin-top: var(--s-4);
    font-size: 1.125rem;
  }

  .hero-actions {
    margin-top: var(--s-5);
  }

  .hero-receipt {
    margin-top: var(--s-4);
  }
}