/*
© 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 8 (Process-deck premium layer, Session 0089)
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-09-16T08:45:00+10:00
  Audience: Jacques (French, hardware/C bg), Ryan (14), Ava (9), Students (15-23)

  WHAT THIS FILE DOES:
    Styles the new interactive slide deck on process.html ("How We Work").
    The deck explains the process of designing a plastic-injection mould,
    from Idea to Production to Commercialisation. It is built entirely in
    JavaScript (js/slideshow_001.js + js/slideshow_002.js) inside a
    <section id="process-slideshow"> placed after the page teaser.

  WHY THIS FILE IS SEPARATE (styles_008):
    process.html loads styles_001..006 only — it does NOT load styles_007.
    So this file carries its OWN :lang(zh) tracking block (process.html has
    no other rescue for CJK letter-spacing, see S9).

  DESIGN LAW (session 0089, leader):
    - only existing design tokens (--clr-*, --font-*, --radius-*, --sp-*);
    - no new colours, no new fonts, no new images, no letter-spacing on
      load-bearing meaning (would shred zh-Hans);
    - every rule passes WCAG AA contrast on its background;
    - reduced-motion and old-parser safe (plain values before clamp()).
*/
/* Declare the custom property we reuse for the deck's ink-on-paper cards
   so this file is fully self-contained even if styles_007 is absent. */
:root { --proc-deck-ink: var(--clr-ink, #14161a); }

/* ============================================================
   S1: DECK WRAPPER — the section that holds the whole slideshow.
   Sits after the page teaser; keeps the page rhythm (width cap,
   centered). The header controls are translated by i18n via t().
   ============================================================ */
.procdeck {
  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;
  color: var(--clr-charcoal);
  margin-bottom: var(--sp-lg);
  line-height: 1.25;
}
.procdeck__stage { max-width: 820px; margin: 0 auto var(--sp-lg); text-align: center; }

/* ============================================================
   S2: THE CARD — a white card on paper (same language as the
   case-study cards). The deck renders inside it.
   ============================================================ */
.procdeck__card {
  background: var(--clr-white);
  border: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  position: relative;
}

/* ============================================================
   S3: SLIDE BODY — two-column layout: bullets (left) and the
   visual panel (right). Stacks to one column on narrow screens.
   ============================================================ */
.procdeck__body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg) var(--sp-xl);
}
.procdeck__text { flex: 1 1 320px; min-width: 0; }
.procdeck__visual { flex: 1 1 300px; min-width: 0; }

/* Slide step label ("Stage 1 — Concept") */
.procdeck__title {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--clr-charcoal);
  margin: 0 0 var(--sp-md);
  line-height: 1.3;
}
.procdeck__phase {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--clr-brand-deep, #b97f14);
  margin-bottom: var(--sp-sm);
}
/* Bullet list — real bullets, not paragraphs. */
.procdeck__bullets { list-style: none; margin: 0; padding: 0; }
.procdeck__bullets li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: var(--sp-sm);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--clr-text);
}
.procdeck__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--clr-brand);
}

/* ============================================================
   S4: VISUAL PANEL — the SVG diagram card. White well with a
   hairline edge; the diagram keeps its aspect ratio.
   ============================================================ */
.procdeck__visual svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
}

/* ============================================================
   S5: CONTROLS — counter, prev/next, progress bar, phase map.
   All 44px-tall tap targets where interactive.
   ============================================================ */
.procdeck__controls {
  border-top: 1px solid var(--clr-hairline, rgba(20, 22, 26, 0.08));
  padding: var(--sp-md) var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
}
.procdeck__counter {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-steel-deep, #4a4f57);
  min-width: 5em;
  text-align: center;
}
.procdeck__nav { display: flex; gap: var(--sp-sm); }
.procdeck__btn {
  font-family: var(--font-body);
  font-size: 1.05rem;
  min-height: 44px;
  min-width: 44px;
  border: 1px solid var(--clr-charcoal);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--clr-charcoal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-md);
  transition: background-color 0.15s ease;
}
.procdeck__btn:hover { background: var(--clr-paper); }
.procdeck__btn:focus-visible {
  outline: 2px solid var(--clr-focus, #ffb84d);
  outline-offset: 2px;
}
.procdeck__btn[disabled] { opacity: 0.4; cursor: default; }

/* Progress bar — thin amber line showing slide position along the deck. */
.procdeck__progress { height: 4px; background: var(--clr-hairline, rgba(20,22,26,0.1)); }
.procdeck__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--clr-brand);
  transition: width 0.2s ease;
}

/* ============================================================
   S6: PHASE MAP — the "you are here" 5-cell journey bar inside
   the SVG. Highlighting is done in the SVG itself.
   ============================================================ */

/* ============================================================
   S7: RESPONSIVE — stack the deck vertically under 720px so the
   bullets read above the diagram.
   ============================================================ */
@media (max-width: 720px) {
  .procdeck__body { flex-direction: column; }
  .procdeck__visual { width: 100%; }
}

/* ============================================================
   S8: KEYBOARD FOCUS SCOPE — only react to arrows when focus is
   inside the deck (see js/slideshow_002.js). Visual ring on the
   whole card when focused-within so the user sees where they are.
   ============================================================ */
.procdeck__card:focus-within { outline: 2px solid transparent; }

/* ============================================================
   S9: CJK TRACKING — process.html does NOT load styles_007, so
   this file must neutralise uppercase/wide letter-spacing for
   Chinese (zh-Hans) itself, exactly like styles_007 §S8 does.
   These rules keep CJK rhythm intact (no stretched space between
   characters). letter-spacing is decorative only, not meaning.
   ============================================================ */
:lang(zh) .procdeck__phase,
:lang(zh) .procdeck__title { letter-spacing: normal; }

/* ============================================================
   S10: REDUCED MOTION — the deck has no auto-advance and no
   animation on its own; the only transition is the progress-bar
   width and button hover. Disable those for vestibular safety.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .procdeck__progress-fill, .procdeck__btn { transition: none; }
}
/* End of file — under 480 lines. */