/* no-manual-a6.css
   THE A6 PAMPHLET LAYER for the three PVS manual pages.
   Branch MANUALS-A6, 2026-09-03.

   THIS FILE IS A LAYER, NOT A REPLACEMENT. A page loads no-manual-v2.css first
   and then this one. Everything in v2 (the cover band, the fact grid, the DO and
   DO NOT columns, the tables, the step chips, the print block) still applies and
   is not restated here. This file adds only what the PREDATOR A6 pamphlet has
   that the long scroll pages did not:

     1. LEAF PAGINATION. The A6 book is a sequence of numbered leaves, so the web
        page becomes a sequence of numbered leaves too, at the A6 ratio, on a
        grey ground, exactly the way PREDATOR/manual/manual.html presents its
        print master. Scrolling the web page is scrolling the pamphlet.
     2. THE CONTENTS LEAF with leader rows, which the long scroll pages had no
        equivalent of.
     3. THE SECTION RULE AND FOLIO. A 0.55mm rule above every section head and a
        centred two digit folio at the foot of every leaf, both from the A6 book.
     4. THE STAT GRID, three across in hairline boxes, from the A6 book.
     5. THE SQUARE CALLOUT MARKER. A6 law 11: markers are squares, never circles.
        v2 already draws square step chips and square key chips, so this only adds
        the figure callout marker and the tier band.

   WHY A LAYER AND NOT AN EDIT TO no-manual-v2.css:
   the three flipbook pages (NGAL, PREDATOR, BRIDGE) and the three PVS pages all
   load v2. Editing v2 changes six live pages at once. A separate file changes
   only the pages that link it. See manuals/MANUALS-NOTES.md section 2: a styling
   fix is a file re-upload, never a page body push, and that stays true here.

   NO EM DASHES OR EN DASHES ANYWHERE IN THIS FILE.
*/

/* ---------------------------------------------------------------- the ground
   The A6 book sits on grey so a white leaf reads as paper. On a phone the grey
   is dropped and the leaves run edge to edge, because a 105mm leaf inside a
   375px viewport with a grey margin wastes the only width there is. */
.nom.a6{background:#8F8F8F}
.nom.a6 .wrap{max-width:none;padding:0;background:transparent}

/* ------------------------------------------------------------------ the leaf
   105 x 148 at A6. The ratio is held with aspect-ratio so a leaf is a leaf at
   every width, and min-height rather than height so a leaf that overflows grows
   instead of clipping. A6 law 12: nothing may be cut off. */
.nom.a6 .leaf{
  position:relative;
  width:min(680px,100%);
  margin:0 auto 22px;
  padding:38px 42px 54px;
  background:var(--paper);
  box-shadow:0 2px 14px rgba(14,14,14,.35);
  aspect-ratio:105/148;
  min-height:0;
  overflow:visible;
  counter-increment:a6leaf;
}
.nom.a6{counter-reset:a6leaf 0}

/* THE FOLIO. Two digits with a leading zero, centred at the foot, Quantico,
   letterspaced. Straight off the A6 book. The cover and the back cover carry no
   folio, same as the book. */
.nom.a6 .leaf::after{
  content:counter(a6leaf,decimal-leading-zero);
  position:absolute;left:0;right:0;bottom:20px;
  text-align:center;
  font-family:'Quantico',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.16em;color:var(--muted);
}
.nom.a6 .leaf.nofolio::after{content:none}

/* A leaf whose content genuinely runs longer than the A6 ratio (a full spec
   table, a long troubleshooting table) is allowed to grow. The ratio is the
   default, not a clip. */
.nom.a6 .leaf.tall{aspect-ratio:auto;min-height:0}

/* ----------------------------------------------------------------- the cover
   The cover leaf carries the black band edge to edge inside the leaf, which is
   how the A6 cover reads: ink to the trim on the cover only.

   THE NEGATIVE MARGIN MUST BE UNDONE HERE, AND THIS IS NOT OPTIONAL.
   no-manual-v2.css carries `.nom .cover{margin-left:calc(50% - 50vw);
   margin-right:calc(50% - 50vw)}` so the long scroll pages bleed their header
   band to the full viewport width. The cover leaf matches that selector, so
   without the reset below the cover leaf would be a full viewport wide black
   band while every other leaf is 680px, and at 1920 it would also blow the
   a6shell grid out sideways. Both selectors are repeated (.leaf.cover, not
   .cover) so this wins on specificity, the same lesson MANUALS-NOTES trap 2
   records for the flipbook. */
.nom.a6 .leaf.cover{
  padding:0;background:var(--band);
  margin-left:auto;margin-right:auto;
}
.nom.a6 .leaf.cover .cover-in{
  margin:0;max-width:none;padding:52px 42px 44px;
  min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;
}

/* THE TWO OTHER VIEWPORT UNITS IN v2 ALSO HAVE TO BE RE-BASED ON THE LEAF.
   v2 sizes the logo at min(300px,58vw) and the cover h1 at clamp(27px,4.8vw,42px),
   both correct for a full bleed header and both wrong inside a 680px leaf: on a
   1400px screen 58vw is 812px, so the logo would be capped at 300px on a leaf
   only 680px wide while reading as tiny, and the h1 would jump to its 42px
   ceiling regardless of how much room the leaf actually has. Percentages of the
   leaf are the honest measure here because the leaf is the page. */
.nom.a6 .leaf.cover .logo{width:min(300px,64%)}
.nom.a6 .leaf.cover h1{font-size:clamp(27px,6.2vw,42px)}
/* Above the phone breakpoint the leaf stops growing with the viewport (it is
   capped at 680px), so a vw sized head would keep growing while its page does
   not. Fix it to one size there. */
@media (min-width:700px){
  .nom.a6 .leaf.cover h1{font-size:38px}
}

/* ------------------------------------------------------------ the section rule
   0.55mm above every section head, full column width, from the A6 book. v2
   already puts a 3px top border on h2; inside a leaf it becomes the book's
   hairline instead, because a leaf is a page and a page opens with a rule. */
.nom.a6 .leaf h2{
  border-top-width:2px;
  margin:0 0 14px;
  padding-top:12px;
  font-size:19px;
}
.nom.a6 .leaf h2:first-child{margin-top:0}

/* The continued marker, right aligned on the section rule. The A6 builder emits
   CONTINUED when a section splits across leaves; the web page carries the same
   word so a reader who lands mid section knows it. */
.nom.a6 .leaf h2 .cw{
  float:right;
  font-family:'Quantico',sans-serif;font-weight:400;
  font-size:10px;letter-spacing:.19em;color:var(--muted);
  padding-top:6px;
}

/* --------------------------------------------------------------- the contents
   Leader rows. The dotted rule is a repeating gradient rather than a row of
   period characters, so it never wraps and never reads out to a screen reader. */
.nom.a6 .toc{list-style:none;padding:0;margin:0}
.nom.a6 .toc li{display:flex;align-items:baseline;gap:8px;margin-bottom:11px}
.nom.a6 .toc .tn{
  font-family:'Quantico',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.06em;color:var(--accent-text);
  flex:none;min-width:26px;
}
.nom.a6 .toc .tt{flex:none;font-weight:600}
.nom.a6 .toc .td{
  flex:1 1 auto;height:1px;margin-bottom:4px;
  background-image:radial-gradient(circle,var(--muted) .5px,transparent .5px);
  background-size:5px 1px;background-repeat:repeat-x;
}
.nom.a6 .toc .tp{
  flex:none;font-family:'Quantico',sans-serif;font-weight:700;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------------- the stat grid
   Three across, hairline boxes, Quantico label over a bold value. From the A6
   book's stat grid. auto-fit rather than a fixed three so it folds to two and
   then one without a media query. */
.nom.a6 .stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:8px;margin:0 0 16px;
}
.nom.a6 .stats>div{border:1px solid var(--rule);padding:10px 11px}
.nom.a6 .stats .l{
  display:block;font-family:'Quantico',sans-serif;font-weight:700;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.nom.a6 .stats .v{font-weight:700;font-size:16px;line-height:1.2}

/* ------------------------------------------------------------- the tier band
   The band that opens a block, from the A6 book: a thick rule, a name in wide
   letterspaced Quantico, one quiet line under it. Used here for the kit blocks
   and for the two safety leaves. */
.nom.a6 .tier{
  border-top:3px solid var(--fg);
  padding:11px 0 0;margin:0 0 14px;
}
.nom.a6 .tier h4{
  font-family:'Quantico',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.21em;text-transform:uppercase;
  color:var(--fg);margin:0 0 5px;
}
.nom.a6 .tier p{font-size:14.5px;color:var(--muted);margin:0;max-width:none}

/* ------------------------------------------------------ the square callout
   A6 law 11: callout markers are SQUARES, not circles. v2's step chip and key
   chip are already square. This is the standalone marker used beside a figure
   caption line, matched to them. */
.nom.a6 .cal{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:19px;flex:none;
  background:var(--step);color:var(--paper);
  font-family:'Quantico',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.03em;margin-right:8px;
}

/* --------------------------------------------------------- leaf level spacing
   A leaf is a page, so the first and last block inside it lose their outer
   margins. Without this a leaf opens with a gap the book does not have. */
.nom.a6 .leaf>:first-child{margin-top:0}
.nom.a6 .leaf>:last-child{margin-bottom:0}
.nom.a6 .leaf figure{margin-bottom:14px}
.nom.a6 .leaf .box{margin-bottom:14px}

/* The lede sits at the head of a leaf, not at the head of a document, so it is
   quieter here than v2's page level lede. */
.nom.a6 .leaf .lede{font-size:16.5px;margin-bottom:14px;max-width:none}

/* v2 caps a bare paragraph at 72ch for a full width scroll page. Inside a leaf
   the leaf itself is the measure, so the cap does nothing but risk a short
   ragged column. See MANUALS-NOTES trap 3: any new full width paragraph in a
   manual page needs this. */
.nom.a6 .leaf p,.nom.a6 .leaf ul,.nom.a6 .leaf ol{max-width:none}

/* ------------------------------------------------------------------ the rail
   A quiet sticky index down the side on wide screens only. HORIZONTAL BEFORE
   VERTICAL (DESIGN-PRINCIPLES-v2 rule 2.14): the leaf column is 680px and a
   1920px screen has 600px of empty width on each side, so the section index
   goes BESIDE the leaves rather than above them as another stacked block. */
.nom.a6 .a6shell{display:block}
@media (min-width:1180px){
  .nom.a6 .a6shell{
    display:grid;grid-template-columns:200px minmax(0,1fr);
    gap:32px;max-width:1000px;margin:0 auto;padding:24px 0 60px;
    align-items:start;
  }
  .nom.a6 .a6rail{position:sticky;top:18px}
  .nom.a6 .a6rail ol{list-style:none;padding:0;margin:0}
  .nom.a6 .a6rail li{margin-bottom:9px}
  .nom.a6 .a6rail a{
    display:block;
    font-family:'Quantico',sans-serif;font-size:11px;letter-spacing:.07em;
    text-transform:uppercase;color:#E3E5E8;text-decoration:none;
    border-left:2px solid rgba(227,229,232,.28);padding:2px 0 2px 10px;
  }
  .nom.a6 .a6rail a:hover,.nom.a6 .a6rail a:focus-visible{
    color:var(--paper);border-left-color:var(--gold);
  }
}
.nom.a6 .a6rail{display:none}
@media (min-width:1180px){.nom.a6 .a6rail{display:block}}

/* ----------------------------------------------------------------- the phone
   Below 700px the grey ground and the leaf shadow are dropped and the leaves run
   edge to edge with a hairline between them. A 105mm leaf inside a 375px
   viewport cannot afford a margin, and the A6 ratio at that width makes a leaf
   taller than the screen anyway, so holding the ratio there buys nothing and
   costs readability. Bon has asked for mobile explicitly and repeatedly. */
@media (max-width:700px){
  .nom.a6{background:var(--paper)}
  .nom.a6 .leaf{
    width:100%;margin:0 0 0;padding:26px 20px 40px;
    box-shadow:none;aspect-ratio:auto;
    border-bottom:1px solid var(--rule);
  }
  .nom.a6 .leaf::after{bottom:14px}
  .nom.a6 .leaf.cover .cover-in{padding:36px 20px 30px}
  .nom.a6 .leaf h2{font-size:17px}
  .nom.a6 .stats{grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
}

/* ----------------------------------------------------------------- the print
   Printing the web page gives a Letter sheet per leaf, so the reader who prints
   from the browser gets something close to the pamphlet without the PDF. v2's
   own print block already sets the page box and the type scale; this only makes
   a leaf a page and takes the grey away. */
@media print{
  .nom.a6{background:#fff}
  .nom.a6 .a6shell{display:block;max-width:none;padding:0}
  .nom.a6 .a6rail{display:none}
  .nom.a6 .leaf{
    width:auto;margin:0;padding:0 0 8mm;box-shadow:none;
    aspect-ratio:auto;break-after:page;page-break-after:always;
    break-inside:avoid;page-break-inside:avoid;
  }
  .nom.a6 .leaf:last-child{break-after:auto;page-break-after:auto}
  .nom.a6 .leaf::after{position:static;display:block;margin-top:6mm}
}