/*
© 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 — CSS Styles Part 9 (Process-deck PREMIUM v2 layer, Session 0091)
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-09-16T09:16:51+10:00
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)
  WHAT THIS FILE DOES:
    Styles "v2" of the interactive slide deck on process.html — the page that
    explains how a plastic-injection mould goes from an idea to a product on
    the market. v2 has 19 slides, a numbered index rail, a "Why it matters"
    note on every slide, a top progress bar and a printable handout.
  WHY IT IS A SEPARATE FILE (styles_009):
    v1 lives in css/styles_008.css and stays untouched (its URLs are cached
    immutable for a year by _headers). process.html loads styles_008.css
    first and THIS file after it, so a repeated selector here simply wins.
    Nothing outside the .procdeck family is restyled — except the site header
    and footer, which the PRINT block (S15) hides so a handout has no menu.
  DESIGN LAW (leader decisions, sessions 0089/0091):
    - only existing tokens (--clr-*, --font-*, --radius-*, --sp-*, --shadow-*);
      no new colours, no new fonts, no new images;
    - the one tint used is rgba(232,160,32,0.12) — amber at 12 %, already used
      by styles_004.css. Over white it becomes #fcf4e4;
    - every text/background pair passes WCAG AA (4.5:1). Measured: ink 18.1:1
      on white; brand-deep 5.62:1 white / 5.26:1 paper / 5.14:1 on the tint;
      steel-deep 5.88:1 white / 5.5:1 paper; ink on amber 8.2:1;
    - no !important anywhere except inside the @media print block;
    - plain value first, then the modern value (clamp/grid), so an older
      engine that ignores the modern line still keeps the plain one;
    - soft limit 480 lines.
*/

/* Self-contained values (with fallbacks), so this file needs no other file:
   the light rule colour, a slightly stronger rule, and the amber tint. */
:root {
  --proc-deck-hairline: var(--clr-hairline, rgba(20, 22, 26, 0.08));
  --proc-deck-rule: var(--clr-hairline-strong, rgba(20, 22, 26, 0.1));
  --proc-deck-tint: rgba(232, 160, 32, 0.12);   /* = #fcf4e4 on white */
}

/* ============================================================
   S1: WRAPPER + PAGE HEADING — the section that holds the deck
   ("How We Work"), its title, intro line and the jump link.
   ============================================================ */
.procdeck.procdeck--v2 { max-width: 1080px; margin: 0 auto var(--sp-2xl); }
.procdeck__heading {
  font-family: var(--font-heading);
  font-size: 1.35rem; font-size: clamp(1.25rem, 3vw, 1.75rem);
  text-align: center; line-height: 1.25;
  color: var(--clr-charcoal, #1a1a1a);              /* 17.4:1 on white */
  margin: 0 0 var(--sp-md);
  overflow-wrap: break-word;                        /* long title wraps, never clips */
}
.procdeck__stage {
  max-width: 820px; margin: 0 auto var(--sp-lg);
  text-align: center; line-height: 1.55;
  color: var(--clr-steel-deep, #5c6575);            /* 5.5:1 on paper */
  overflow-wrap: break-word;
}
/* Skip link to the deck — a quiet text link for keyboard users. */
.procdeck__jump {
  display: block;
  width: -moz-fit-content; width: fit-content;
  margin: 0 auto var(--sp-sm);
  padding: var(--sp-xs) var(--sp-sm);
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  color: var(--clr-brand-deep, #8f5d00);            /* 5.26:1 on paper */
  text-decoration: underline; text-underline-offset: 3px;
  border-radius: var(--radius-sm, 4px);
}

/* ============================================================
   S2: THE CARD — one white card that behaves like a slide. The
   rounded top clips the progress bar neatly into the corners.
   ============================================================ */
.procdeck__card {
  position: relative;
  background: var(--clr-white, #ffffff);
  border: 1px solid var(--proc-deck-hairline);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.15));
  overflow: hidden;                                  /* clips bar + rail */
}
/* Top progress bar: 19 slides, amber fill. It is decoration — the
   chip below states the same fact in words ("Slide 3 of 19"). */
.procdeck__progress { height: 5px; background: var(--proc-deck-rule); }
.procdeck__progress-fill { height: 100%; width: 0%; background: var(--clr-brand, #e8a020); transition: width 0.2s ease; }

/* ============================================================
   S3: HEAD ROW — the 5-stage phase strip left, the "Slide 3 of 19"
   chip right. Sits on the paper tint, so it reads as a band.
   ============================================================ */
.procdeck__head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-sm) var(--sp-md);
  padding: var(--sp-md) var(--sp-xl);
  background: var(--clr-paper, #faf7f2);
  border-bottom: 1px solid var(--proc-deck-hairline);
}
.procdeck__stripmap { flex: 1 1 260px; min-width: 0; max-width: 460px; }
/* The phase-map SVG: full width, natural height, capped to a band so
   it can never push the slide title out of view. */
.procdeck__stripmap svg { display: block; width: 100%; height: auto; max-height: 56px; }
.procdeck__step {
  margin-left: auto; flex: 0 0 auto;
  padding: var(--sp-xs) var(--sp-md);
  border: 1px solid var(--proc-deck-rule); border-radius: 999px;
  background: var(--clr-white, #ffffff);
  font-family: var(--font-mono, Consolas, monospace);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--clr-steel-deep, #5c6575);            /* 5.88:1 on white */
}

/* ============================================================
   S4: SLIDE BODY — bullets left, diagram right. The grid rule is
   the real layout; the flex rule above it is the older-engine
   fallback (it just wraps).
   ============================================================ */
.procdeck__body {
  display: flex; flex-wrap: wrap; gap: var(--sp-lg);
  align-items: center; justify-content: center; padding: var(--sp-xl);
}
.procdeck__body {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: var(--sp-xl);
}
.procdeck__text { flex: 1 1 320px; min-width: 0; }   /* min-width keeps long words in */
.procdeck__visual { flex: 1 1 300px; min-width: 0; }
/* Small gold kicker above the title, e.g. "Stage 2". */
.procdeck__phase {
  display: block; margin-bottom: var(--sp-xs);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--clr-brand-deep, #8f5d00);            /* 5.62:1 on white */
}
.procdeck__title {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  color: var(--clr-ink, #14161a);                   /* 18.1:1 on white */
  margin: 0 0 var(--sp-md); line-height: 1.25;
  overflow-wrap: break-word; hyphens: auto;         /* long translations wrap */
}
.procdeck__bullets { list-style: none; margin: 0; padding: 0; }
.procdeck__bullets li {
  position: relative; padding-left: 1.35em; margin-bottom: var(--sp-sm);
  font-size: 1rem; line-height: 1.6;
  color: var(--clr-text, #333333);                  /* 12.6:1 on white */
  overflow-wrap: break-word; hyphens: auto;
}
.procdeck__bullets li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--clr-brand, #e8a020);
}

/* ============================================================
   S5: "WHY IT MATTERS" NOTE — a quiet callout, not a shouty box:
   paper-amber tint plus a 3px gold rule. Ink on the tint measures
   5.14:1 for the label and 11.6:1 for the body text.
   ============================================================ */
.procdeck__note {
  margin-top: var(--sp-lg);
  padding: var(--sp-md) var(--sp-md) var(--sp-md) var(--sp-lg);
  background: var(--proc-deck-tint);                /* #fcf4e4 on white */
  border-left: 3px solid var(--clr-brand, #e8a020);
  border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) 0;
  font-size: 0.95rem; line-height: 1.55;
  color: var(--clr-text, #333333);
  overflow-wrap: break-word;
}
.procdeck__note-label {
  display: block; margin-bottom: var(--sp-xs);
  font-family: var(--font-heading);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--clr-brand-deep, #8f5d00);            /* 5.14:1 on the tint */
}

/* ============================================================
   S6: DIAGRAM WELL — soft tint, hairline edge and inner padding so
   the SVG never touches the edge of the card.
   ============================================================ */
.procdeck__visual {
  justify-self: center; width: 100%; padding: var(--sp-md);
  background: var(--clr-paper, #faf7f2);
  border: 1px solid var(--proc-deck-hairline);
  border-radius: var(--radius-lg, 12px);
}
.procdeck__visual svg { display: block; width: 100%; height: auto; max-height: 340px; }

/* ============================================================
   S7: BOTTOM CONTROL BAR — counter left, Prev/Next right. Every
   tap target is at least 44px in both directions.
   ============================================================ */
.procdeck__controls {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-sm) var(--sp-md);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--clr-paper, #faf7f2);
  border-top: 1px solid var(--proc-deck-hairline);
}
.procdeck__counter {
  font-family: var(--font-mono, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem; font-weight: 600; min-width: 5em; text-align: center;
  color: var(--clr-steel-deep, #5c6575);            /* 5.5:1 on paper */
}
.procdeck__nav { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
.procdeck__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs);
  min-height: 44px; min-width: 44px;                /* tap target, both axes */
  padding: 0 var(--sp-md);
  border: 1px solid var(--clr-ink, #14161a);
  border-radius: var(--radius-sm, 4px);
  background: var(--clr-white, #ffffff);
  color: var(--clr-ink, #14161a);                   /* 18.1:1 on white */
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.procdeck__btn--prev { background: var(--clr-white, #ffffff); }
.procdeck__btn:hover { background: var(--proc-deck-tint); border-color: var(--clr-brand-deep, #8f5d00); }
/* Next is the primary action: filled amber, ink text on amber = 8.2:1. */
.procdeck__btn--next {
  background: var(--clr-brand, #e8a020);
  border-color: var(--clr-brand, #e8a020);
  color: var(--clr-brand-ink, #14161a);
}
.procdeck__btn--next:hover { background: var(--clr-accent-hover, #cf8f0d); border-color: var(--clr-accent-hover, #cf8f0d); }
.procdeck__btn[disabled] { opacity: 0.45; cursor: default; }
.procdeck__btn[disabled]:hover,
.procdeck__btn--prev[disabled]:hover { background: var(--clr-white, #ffffff); border-color: var(--clr-ink, #14161a); }
.procdeck__btn--next[disabled]:hover { background: var(--clr-brand, #e8a020); border-color: var(--clr-brand, #e8a020); }

/* ============================================================
   S8: INDEX RAIL — the 19 numbered jump buttons. The visual chip is
   34px, the tappable button is 44px (drawn as a real box, not a
   floating overlay, so neighbours never steal each other's clicks).
   Wide screens: the rail wraps. Phones: one line, scrolled sideways.
   ============================================================ */
.procdeck__rail {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-lg);
  overflow-x: auto;                                 /* never widens the card */
  -webkit-overflow-scrolling: touch;                /* smooth flick on iOS */
  scrollbar-width: thin;
  background: var(--clr-white, #ffffff);
}
.procdeck__dot {
  position: relative; z-index: 0;                    /* own stacking context */
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent;
  font-family: var(--font-mono, Consolas, monospace);
  font-size: 0.78rem; font-weight: 600;
  color: var(--clr-steel-deep, #5c6575);            /* 5.88:1 on white */
  cursor: pointer;
}
/* The 34px chip, drawn inside the 44px button (5px inset all round). */
.procdeck__dot::before {
  content: ""; position: absolute; inset: 5px; z-index: -1;
  border: 1px solid var(--proc-deck-rule);
  border-radius: var(--radius-sm, 4px);
  background: var(--clr-white, #ffffff);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.procdeck__dot:hover::before { border-color: var(--clr-brand-deep, #8f5d00); background: var(--proc-deck-tint); }
.procdeck__dot[aria-current="true"] { color: var(--clr-brand-ink, #14161a); font-weight: 700; }
.procdeck__dot[aria-current="true"]::before { background: var(--clr-brand, #e8a020); border-color: var(--clr-brand, #e8a020); }

/* ============================================================
   S9: PRINT ROW — "Print / save as PDF" plus its hint line. Quiet
   by design: printing is a side action, not the main one.
   ============================================================ */
.procdeck__print {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-xs) var(--sp-md);
  padding: var(--sp-md) var(--sp-lg) var(--sp-lg);
  border-top: 1px solid var(--proc-deck-hairline);
  text-align: center;
}
.procdeck__print > button,
.procdeck__print > a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--sp-md);
  border: 1px solid var(--proc-deck-rule);
  border-radius: var(--radius-sm, 4px);
  background: var(--clr-white, #ffffff);
  color: var(--clr-steel-deep, #5c6575);            /* 5.88:1 on white */
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.procdeck__print > button:hover,
.procdeck__print > a:hover {
  background: var(--clr-paper, #faf7f2);
  border-color: var(--clr-brand-deep, #8f5d00);
  color: var(--clr-ink, #14161a);
}
.procdeck__print p,
.procdeck__print small,
.procdeck__print span {
  flex: 1 1 100%; margin: 0; font-size: 0.82rem; line-height: 1.5;
  color: var(--clr-steel-deep, #5c6575);            /* 5.5:1 on white */
  overflow-wrap: break-word;
}

/* ============================================================
   S10: HANDOUT — the stacked, printable copy of the 19 slides.
   Invisible on screen; it appears in @media print (S15). Built in
   js/slideshow_004.js. A "generated by" line was deliberately NOT
   added via CSS content: it would be hard-coded English inside a
   translated page (the v1 language bug the contract forbids).
   ============================================================ */
.procdeck__handout { display: none; }
.procdeck__handout-title {
  font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25;
  overflow-wrap: break-word; hyphens: auto;
}

/* ============================================================
   S11: FOCUS RING — one ring that stays visible on the white card
   AND on the tinted buttons: a dark ink outline (18:1 on white,
   16:1 on the tint) plus a soft amber halo for extra visibility.
   ============================================================ */
.procdeck__btn:focus-visible,
.procdeck__dot:focus-visible,
.procdeck__jump:focus-visible,
.procdeck__print > button:focus-visible,
.procdeck__print > a:focus-visible {
  outline: 2px solid var(--clr-ink, #14161a);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(232, 160, 32, 0.35);
}
.procdeck__card:focus-within { outline: 2px solid transparent; }

/* ============================================================
   S12: CJK TRACKING — Chinese must not get the wide uppercase
   tracking meant for Latin small caps: it rips the characters
   apart. letter-spacing is decoration only, never meaning, so
   switching it off is always safe for zh / zh-Hans.
   ============================================================ */
:lang(zh) .procdeck__heading,
:lang(zh) .procdeck__phase,
:lang(zh) .procdeck__title,
:lang(zh) .procdeck__step,
:lang(zh) .procdeck__note-label,
:lang(zh) .procdeck__handout-title { letter-spacing: normal; }
:lang(zh) .procdeck__phase,
:lang(zh) .procdeck__step,
:lang(zh) .procdeck__note-label { text-transform: none; }  /* uppercase adds nothing to Han */

/* ============================================================
   S13: RESPONSIVE
   Under 720px: one column (bullets above the diagram), the rail is
   one scrollable line, the controls stack full width.
   Under 400px (down to a 320px phone): tighter padding, and the
   head row stacks so the chip cannot squeeze the phase strip.
   ============================================================ */
@media (max-width: 720px) {
  .procdeck__body {
    display: flex; flex-direction: column;           /* beats the grid */
    gap: var(--sp-lg); padding: var(--sp-lg) var(--sp-md);
  }
  .procdeck__visual { width: 100%; }
  .procdeck__head { padding: var(--sp-md); }
  .procdeck__stripmap { max-width: none; }
  .procdeck__rail { flex-wrap: nowrap; padding: var(--sp-xs) var(--sp-md) var(--sp-sm); }
  .procdeck__controls { padding: var(--sp-md); }
  .procdeck__counter { flex: 1 1 100%; }
  .procdeck__nav { flex: 1 1 100%; }
  .procdeck__btn { flex: 1 1 auto; }
  .procdeck__print { padding: var(--sp-md); }
}
@media (max-width: 400px) {
  .procdeck__heading { font-size: 1.2rem; }
  .procdeck__title { font-size: 1.1rem; }
  .procdeck__body { padding: var(--sp-md) var(--sp-sm); gap: var(--sp-md); }
  .procdeck__head { padding: var(--sp-sm) var(--sp-sm) var(--sp-md); }
  .procdeck__step { margin-left: 0; }
  .procdeck__note { padding: var(--sp-sm) var(--sp-sm) var(--sp-sm) var(--sp-md); }
  .procdeck__visual { padding: var(--sp-sm); }
  .procdeck__rail { padding: var(--sp-xs) var(--sp-sm) var(--sp-sm); }
}

/* ============================================================
   S14: REDUCED MOTION — a visitor who asked their system to reduce
   motion gets no gliding bar and no soft sweeps; colours still
   change on hover/focus, so nothing becomes invisible.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .procdeck__progress-fill,
  .procdeck__btn,
  .procdeck__dot::before,
  .procdeck__print > button,
  .procdeck__print > a { transition: none; }
}

/* ============================================================
   S15: PRINT — the handout. This is the only place !important is
   allowed: a printed sheet must beat the screen rules, and the
   interactive card must be gone completely. Paper is white, text
   is black, no slide splits across a page. The site header and
   footer are hidden here too, because paper has no navigation.
   ============================================================ */
@media print {
  @page { margin: 14mm; }

  /* Hide every interactive part, plus the site chrome. */
  .site-header,
  .site-footer,
  .skip-link,
  .procdeck__card,
  .procdeck__progress,
  .procdeck__rail,
  .procdeck__controls,
  .procdeck__jump,
  .procdeck__print { display: none !important; }

  /* Show the stacked handout copy instead. */
  .procdeck,
  .procdeck__handout {
    display: block !important; max-width: none !important;
    margin: 0 !important; box-shadow: none !important;
  }

  /* One slide per block; a block never splits across two pages. */
  .procdeck__handout-slide {
    break-inside: avoid; page-break-inside: avoid;
    padding-bottom: 8mm; margin-bottom: 8mm;
    border-bottom: 1px solid var(--proc-deck-rule);
  }
  .procdeck__handout-slide:last-child { border-bottom: 0; margin-bottom: 0; }
  .procdeck__handout-title { break-after: avoid; page-break-after: avoid; margin: 0 0 3mm; color: #000000 !important; }

  /* Black ink on white paper; no fills to drink up the toner. */
  .procdeck__handout,
  .procdeck__handout-slide,
  .procdeck__handout-slide * {
    background: transparent !important; background-color: transparent !important;
    color: #000000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  /* The note rule and the diagram well keep an edge, but a printer-friendly one. */
  .procdeck__handout-slide .procdeck__note,
  .procdeck__handout-slide .procdeck__visual { border-color: #000000 !important; }
  /* Bullet markers print as black squares. */
  .procdeck__handout-slide .procdeck__bullets li::before { background: #000000 !important; }
  /* Diagrams shrink to the paper width and never overflow it. */
  .procdeck__handout-slide svg {
    display: block; width: 100% !important; max-width: 100% !important;
    height: auto !important; max-height: none !important;
  }
  .procdeck__handout-slide ul,
  .procdeck__handout-slide ol,
  .procdeck__handout-slide li,
  .procdeck__handout-slide p { color: #000000 !important; overflow-wrap: break-word; }
  /* Dark-ish print (dark mode / "print backgrounds" off): the handout sheet is
     forced paper-white so the black text can never be inverted into the page. */
  .procdeck__handout {
    background: #ffffff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Safety net: if the handout is ever rendered INSIDE the card instead of as a
     sibling of it, the card must come back as a plain block, or hiding the card
     above would hide the handout too. Engines without :has() ignore this. */
  .procdeck__card:has(.procdeck__handout) {
    display: block !important; border: 0 !important; box-shadow: none !important;
  }
}
/* End of file — under the 480-line soft limit. */