/*
// © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of
// this document may be reproduced, modified or stored in a retrieval system,
// or transmitted in any form or by any means, electronic, mechanical,
// photocopying, recording or otherwise, without the prior written permission
// of Toptronic Limited. For copyright inquiries: jacques@toptronic.com
 */
/*
 * PLWS :: Plazdiez Website - Session 0107 layer (glossary page presentation v4)
 * Project: Paul Lambourn Web Site (PLWS) - www.plazdiez.co.za
 * Generated/Updated on: 2026-09-17T17:05:00+10:00
 * Audience: Jacques (hardware/C bg), Ryan (14), Ava (9), Students (15-23),
 *           and the Master's-level reader who wants the "why".
 *
 * WHAT THIS FILE IS: the FOURTH presentation layer of the Glossary page and
 * nothing else. It is linked on glossary.html AFTER css/styles_012.css, with
 * ?v=0107. It adds a new capability, so it is a NEW numbered file: /css/* is
 * served "immutable" for a year and a returning visitor keeps the old bytes.
 *
 * WHAT IS NEW IN 0107: two small pieces of furniture, both from the session
 * 0107 contract (PLWS_Plan_0107_glossary_v4.md, section 6):
 *   1. .gl-about-by - the author credit line under the about block.
 *   2. .gl-vs - a comparison block (injection vs blow moulding vs casting)
 *      that sits between the terms table and the Customers Talks table.
 * Nothing else on the page changes. No v2/v3 rule is re-declared except where
 * a state must be added, and each such case is written next to the rule.
 *
 * COLOURS: a colour is only valid for the surface it was chosen for. This
 * layer paints only on LIGHT surfaces (white cards and the warm paper page),
 * so it reuses the light-surface vocabulary from styles_010/011/012:
 * --clr-ink (#14161a) 18.11:1 on white, --gl-ink-soft (#2b2f36) 13.44:1 on
 * white, --gl-muted (#5f6774) 5.71:1 on white, and --clr-brand-deep (#8f5d00)
 * 5.62:1 on white for the one brass accent. Every pair below is checked
 * against the surface it is painted on and the ratio is written beside it.
 * -- Jacques: choose the colour for the surface, like a material spec.
 * -- Ava: dark words on light paper, light words on dark ink.
 * -- Ryan: contrast ratio = how far apart two colours are in brightness;
 *    4.5:1 is the minimum for ordinary text.
 *
 * HOUSE RULES OBEYED HERE: no @import, no external URL, no !important
 * outside the print block, every selector starts with .gl- (or is inside
 * .gl-vs), no v2/v3 rule re-declared without a reason written next to it,
 * and the file stays under 470 lines.
 */

/* ============ SECTION 1: THE AUTHOR CREDIT LINE (p.gl-about-by) ============
   The contract (section 6, item 1) puts one line inside the existing
   section.gl-about, right after p.gl-about-text: "Compiled by Paul Lambourn,
   toolmaker since 1978." It is a signature, not a paragraph, so it must be
   QUIET: smaller than the about text, ink on white at >= 4.5:1, generous
   space above, and no rule of its own (the about card already carries the
   amber left edge; a second line would shout).
   -- Jacques: the maker's mark on the drawing, small and in the corner.
   -- Ava: a little line that says who wrote the book.
   Contrast: --gl-muted (#5f6774) on white = 5.71:1, comfortably above the
   4.5:1 AA minimum for ordinary text. It is the same grey the page already
   uses for captions, so the line reads as a caption, not as body copy.
   The 0.8rem size is one step below the 0.9rem caption size, and the
   letterspacing is the page's quiet-caption idiom (see .gl-index-label in
   styles_012.css). No border, no background: the space above does the work. */
.gl-about-by {
  margin: var(--sp-lg) 0 0;        /* generous space above, none below */
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--gl-muted);          /* 5.71:1 on white */
}

/* ============ SECTION 2: THE COMPARISON BLOCK (section.gl-vs) ============
   The contract (section 6, item 2) adds a section between the terms table
   and the Customers Talks table. It must read as part of the page in the
   SAME visual language as the two existing .gl-table blocks, and must NOT
   look like a third hero or a second toolbar. So it borrows the quiet
   reference-table look of styles_011.css SECTION 3: white ground, hairline
   rules, a whisper of zebra, amber only where the reader's attention is.
   The block is deliberately NOT a card with a shadow and NOT a coloured
   band: those are the hero and the toolbar idioms, and this is neither.
   -- Students: the visual weight of a component should match its job. A
      reference table gets a quiet table; a call-to-action gets a band. */

/* The section is a plain block on the page frame. It shares the same
   max-width and horizontal padding as the table wrappers (styles_010.css
   .gl-table-wrap), so its edges line up with the two tables above and
   below it. The top margin is the same rhythm the page uses between big
   blocks; the amber top rule is the same signature the talks heading uses
   (styles_011.css .gl-talks-head), so a reader sees "a new section starts
   here" without any new decoration. */
.gl-vs {
  max-width: var(--max-width, 1400px);
  margin: 0 auto var(--sp-2xl);
  padding: 0 var(--sp-lg);
  border-top: 4px solid var(--clr-brand);
  padding-top: var(--sp-lg);
}

/* The heading is a question ("Injection, blow moulding or casting?") and it
   is the section's title, so it is a real h2 - but it must not compete with
   the hero. The talks heading (styles_011.css) uses the shared .section-head
   h2 at clamp(1.75rem, 4vw, 2.5rem); this heading is deliberately smaller
   and left-aligned, because it introduces a small reference table, not a
   page section. 1.4rem is a clear step above the 1.05rem about heading and
   well below the hero. Ink on white = 18.11:1. */
.gl-vs h2 {
  margin: 0 0 var(--sp-sm);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--clr-ink);           /* 18.11:1 on white */
}

/* The intro is the AI-search answer block: 40-60 words that answer the
   question in the heading. The contract caps its measure at 70ch, the same
   comfortable line length the about text uses, so it can never become a
   wall of text. --gl-ink-soft is the page's body-copy grey, 13.44:1 on
   white. */
.gl-vs-intro {
  max-width: 70ch;
  margin: 0 0 var(--sp-lg);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gl-ink-soft);       /* 13.44:1 on white */
}

/* ============ SECTION 3: THE COMPARISON TABLE (table.gl-vs-table) ============
   The table carries the classes "gl-table gl-vs-table", so it inherits every
   v2/v3 .gl-table rule (white ground, hairline, zebra, sticky header, phone
   card layout) for free. This layer only adds the small differences that
   make a 3-column table with a row header read well. Nothing here re-declares
   a v2/v3 rule; it only adds what the comparison table needs.
   -- Ryan: the first column is a row header (th scope="row"), so a screen
      reader announces the route name before each pair of cells. */

/* The row header column is the route name (Injection moulding, Blow
   moulding, Casting). It is a header, so it is set in the page's heading
   font and ink, like the term column in the terms table (.gl-term). The
   width is fixed so the two answer columns share the rest evenly and the
   table never looks lopsided. */
.gl-vs-table th[scope="row"] {
  width: 22%;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clr-ink);           /* 18.11:1 on white */
}

/* The two answer cells are body copy, the same soft grey as the meaning
   column (.gl-mean). The "How" column is the longer of the two, so it gets
   the wider share. */
.gl-vs-table td {
  color: var(--gl-ink-soft);       /* 13.44:1 on white */
  line-height: 1.5;
}
.gl-vs-table td:first-of-type { width: 44%; }

/* The header row keeps the v2/v3 ink ground and amber underline from
   styles_011.css; nothing to add here. The caption is already styled by
   styles_010.css (.gl-table caption) as a quiet grey line above the table,
   which is exactly the register this table wants. */

/* ============ SECTION 4: PHONES AND NARROW SCREENS (820px and below) ============
   styles_010.css SECTION 6 already turns every .gl-table into a stack of
   cards on a phone: the thead is hidden, each row becomes a block, and each
   VALUE cell prints its own column label from data-label in a ::before.
   The contract's markup gives the two value cells NO data-label (only
   data-plws-t), so the v2 ::before label prints an empty line for them -
   harmless, and the row header above them already names the route. BUT the
   v2 phone rule only sets display:block on .gl-table td - it does NOT
   touch th. The comparison table's first column is a th[scope="row"], so
   on a phone that header cell would stay a table-cell inside a block row
   and could push the page wider. The smallest rule that fixes it is to
   make the row header a full-width block line too, exactly like the term
   column in the terms table (styles_011.css SECTION 6 does this for
   .gl-term). This is the ONE new phone rule this file needs; everything
   else the v2 mechanism already covers.
   -- Ava: on a phone each route is a little card: the route name on top,
      then "How the part is formed" and "Choose it when" underneath. */
@media screen and (max-width: 820px) {
  .gl-vs { padding: var(--sp-lg) var(--sp-md); }
  .gl-vs-table th[scope="row"] {
    display: block;
    width: auto;
    font-size: 1.02rem;
    padding: 0 0 4px;
  }
}

/* ============ SECTION 5: PRINT - the handout ============
   On paper the comparison block prints as a normal table: black text on
   white, no amber, no chrome. The v2/v3 print rules already strip the table
   chrome (styles_011.css SECTION 7 turns the header row white and the zebra
   off; styles_010.css SECTION 7 makes the header static). This layer only
   has to (a) drop the amber top rule of the section, (b) force the row
   header and the two cells to black, and (c) make sure the phone card
   layout does not leak onto paper - the v2 print rules already restore the
   table display, so nothing more is needed there. This is the only place in
   this file where !important is allowed, because a printed sheet has to
   beat the screen rules. */
@media print {
  .gl-vs { border-top: none; padding-top: 0; }
  .gl-vs h2, .gl-vs-intro { color: #000 !important; max-width: none; }
  .gl-vs-table th[scope="row"],
  .gl-vs-table td { color: #000 !important; }
}

/* ============ SECTION 6: CALM - reduced motion ============
   Nothing in this file animates: the author line and the comparison block
   are static furniture, and the table inherits no new transition or
   animation from this layer (the v2/v3 transitions on rows and controls are
   already switched off by their own reduced-motion blocks). So there is
   nothing new to turn off here - the rule below is a deliberate no-op that
   documents the decision for the next reader.
   -- Ryan: "prefers-reduced-motion" is the visitor telling the browser
      once, "please stop things moving"; we simply obey. */
@media (prefers-reduced-motion: reduce) {
  /* No new animation or transition is added by this file, so there is
     nothing to disable. If a future layer adds one here, switch it off. */
}

/* Content continues in css/styles_014.css if this file ever reaches 480 lines. */