/* Pedal only: the full title block (with Material), the parts block (View A beside the parts list)
   and the price line. Shared sheet rules, tables, drawing classes and the highlight states live in
   sheet.css. */

/* ---- Title block. Desktop sub-grid of 6: Title 6; Drawing no., Revision, Sheet 2 each; Scale,
   Date, Drawn by 2 each; Material 3 and Status 3. */
[data-sheet="pedal"] .tb-cell[data-key="material"],
[data-sheet="pedal"] .tb-cell[data-key="status"]{grid-column:span 3}

/* ---- View B: the live pedal at rest. Full content width, no border and no ground: the floor fades
   into the page colour inside the scene, so the box has no visible edge. Poster, canvas, leaders and
   labels stack in that order; the canvas fades in once the first frame is drawn. */
.vb{margin:0}
.vb-box{position:relative;width:100%;height:clamp(440px,46vw,620px)}
.vb-box > .poster,.vb-box .poster img,#stage,svg.leaders,.labels{position:absolute;inset:0;width:100%;height:100%;display:block}
.vb-box .poster img{object-fit:cover}
#stage{opacity:0;transition:opacity .4s ease-out}
body.gl #stage{opacity:1}
/* A lost canvas is cut at once, never faded: its blank frame must not show over the poster. */
body.lost #stage{transition:none}
html.calm #stage{transition:none}
@media (prefers-reduced-motion:reduce){#stage{transition:none}}
svg.leaders{color:var(--paper);pointer-events:none}
svg.leaders .leader{stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke}
svg.leaders .dot{fill:currentColor}
svg.leaders .vb-balloon circle{fill:var(--deep);stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke}
svg.leaders .vb-balloon text{fill:currentColor;font-family:var(--mono)}
.labels{pointer-events:none;color:var(--paper)}
.vb-label{position:absolute;left:0;top:0;white-space:nowrap;font-size:15px;line-height:20px}
.vb-label .num{font:400 13.5px/20px var(--mono)}
.vb-label .name{margin-left:8px}

/* ---- The parts block. Desktop: heading, hint and list in columns 1-6, View A in 7-12, the two
   tops level; tablet and phone follow DOM order (heading, hint, View A, list). */
.parts{grid-template-rows:auto auto 1fr}
.parts > .doc-h{grid-column:1 / 7;grid-row:1}
.parts > .hint{grid-column:1 / 7;grid-row:2;margin-top:8px;font-size:15px;line-height:20px}
.parts > .parts-list{grid-column:1 / 7;grid-row:3;margin-top:16px}
.parts > .view-a{grid-column:7 / 13;grid-row:1 / 4}
.view-a .drawing{width:100%}
.view-a svg{display:block;width:100%;height:auto;overflow:visible;color:var(--paper)}
g.part,g.shapes{cursor:pointer}

/* ---- The parts list: the shared table look on div rows with table roles. Each row is a grid and
   the positioning box for its button's ::after, so the whole row is the button's hit area. */
.parts-list{font-size:15px;line-height:20px}
.parts-list .row{display:grid;grid-template-columns:48px 22% 26% 48px minmax(0,1fr);position:relative;border-bottom:1px solid var(--rule)}
.parts-list .row.head{border-bottom-color:var(--paper)}
.parts-list .rows:last-child .row:last-child{border-bottom-color:var(--paper)}
.parts-list .c{padding:12px 16px;min-width:0}
.parts-list .c0{padding-left:0}
.parts-list .c3{text-align:right}
.part-ref{margin:0;padding:0;border:0;background:none;color:inherit;font:400 13.5px/20px var(--mono);cursor:pointer;text-align:left}
.part-ref::after{content:"";position:absolute;inset:0}

/* ---- View C: the drawing in columns 1-8 and its notes in 9-12, tops level. Tablet and phone put
   the notes under the drawing. */
.dims > .view-c{grid-column:1 / 9;grid-row:1}
.dims > .notes{grid-column:9 / 13;grid-row:1}
.view-c .drawing{width:100%}
.view-c svg{display:block;width:100%;height:auto;overflow:visible;color:var(--paper)}
.notes ol{margin:12px 0 0;padding-left:24px;font-size:15px;line-height:20px}
.notes li + li{margin-top:8px}

/* ---- The spec sheet. Desktop: each group's heading in columns 1-3 and its table in 4-12, the
   property over columns 4-7 and the value over 8-12; a 1px paper rule runs across 1-12 above each
   group; groups 32px apart. The footnotes keep the same grid. Tablet and phone: the heading above its
   table, property 40% and value 60%. */
.spec-group,.footnotes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;border-top:1px solid var(--paper);margin-top:32px}
.spec > .doc-h + .spec-group{margin-top:16px}
.spec-group > h3,.footnotes > h3{grid-column:1 / 4;padding-top:10px}
.spec-group > table{grid-column:4 / 13}
/* Columns 4-7 of 4-12 with their gutter: 4 (col + gap) / (9 col + 8 gap), 45.6% at desktop widths. */
.spec-table tr > :first-child{width:45.6%}
.spec-table tbody tr:last-child{border-bottom:0} /* the next group's paper rule closes it */
.spec-table td > a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.spec-table td > a:hover{text-decoration-thickness:2px}
.footnotes > ol{grid-column:4 / 13;margin:0;padding:12px 0 0 24px;font-size:15px;line-height:20px}
.footnotes li + li{margin-top:12px}

/* ---- The price line: Display, 700, paper, at --edge. The frame's bottom padding sits under it. */
.price-line{margin:0;max-width:13.2em;font-size:clamp(46px,6.9vw,116px);font-weight:700;line-height:.93;letter-spacing:-.03em;color:var(--paper);text-wrap:balance}

/* ---- Tablet: 3 columns; Title 3, then Drawing no. | Revision | Sheet, Scale | Date | Drawn by,
   then Material 2 | Status 1. */
@media (max-width:1199px){
  [data-sheet="pedal"] .tb-cell[data-key="material"]{grid-column:span 2}
  [data-sheet="pedal"] .tb-cell[data-key="status"]{grid-column:span 1}
  .parts{grid-template-rows:none}
  .parts > .doc-h,.parts > .hint,.parts > .parts-list,.parts > .view-a{grid-column:1 / -1;grid-row:auto}
  .parts > .view-a{margin-top:16px}
  .parts > .parts-list{margin-top:32px}
  .dims > .view-c,.dims > .notes{grid-column:1 / -1;grid-row:auto}
  .dims > .notes{margin-top:24px}
  .spec-group,.footnotes{display:block}
  .spec-table tr > :first-child{width:40%}
}

/* ---- Phone: 2 columns; Material and Status each take a whole row (sheet.css sets the order, with
   Sheet moved after Drawn by). The price breaks after "USD." on its own at this size. */
@media (max-width:760px){
  /* View B runs edge to edge at 4:5; the frame has no side lines on phones. */
  .vb-box{width:auto;height:auto;aspect-ratio:4 / 5;margin-inline:calc(-1 * var(--edge))}
  [data-sheet="pedal"] .tb-cell[data-key="material"],
  [data-sheet="pedal"] .tb-cell[data-key="status"]{grid-column:span 2}
  /* Phone rows: No. | part, material and note stacked | Qty. Material and Note headers stay for
     screen readers but are hidden from sight. */
  .parts-list .row{grid-template-columns:40px minmax(0,1fr) 32px}
  .parts-list .c{padding:0}
  .parts-list .row:not(.head) .c{padding-top:12px}
  .parts-list .row.head .c{padding:12px 0}
  .parts-list .c0{grid-column:1;grid-row:1 / span 3}
  .parts-list .c1{grid-column:2;grid-row:1}
  .parts-list .c2{grid-column:2;grid-row:2;padding-top:0 !important}
  .parts-list .c4{grid-column:2;grid-row:3;padding:0 0 12px !important}
  .parts-list .c3{grid-column:3;grid-row:1}
  .parts-list .row.head .c2,.parts-list .row.head .c4{position:absolute;width:1px;height:1px;overflow:clip;clip-path:inset(50%);white-space:nowrap;padding:0}
  .parts-list .row:not(.head) .c1{padding-right:8px}
}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .price-line{font-size:clamp(40px,12vw,76px)}
}

/* ---- Paper: View B is its landscape poster at the poster's own shape, with numbered balloons in
   poster coordinates; leaders and balloons follow the swapped tokens into ink on white. */
@media print{
  #stage{display:none}
  .vb-box{width:100%;height:auto;aspect-ratio:1440 / 900;margin-inline:0}
}