/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this file 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

Generated/Updated on: 2026-08-06T19:30:00+1000

styles_004.css — file 4 of 6 (loaded after styles_003.css)

WHAT this file does:
  Styles the card grids (tools and Learn guides), the little level/soon chips
  on cards, the "more coming" card, and the light "paper" section theme kept
  ready for future long articles.

WHY it works this way (for Ryan, 14, and Ava, 9):
  Cards are like trading cards lined up in a grid: one per row on a phone,
  more per row as the screen gets wider (that part lives in styles_006.css).
  Chips are tiny labels — like stickers — that say "Beginner" or "Soon" so
  you know what a guide is before you read it. A card that is not ready yet
  is honest: it says SOON and has no fake button. The light section is a
  warm paper color saved for long stories later; no page uses it yet, and
  this file says so, so nobody wonders why it exists.
*/

/* ============================================================================
   SECTION 16 — SECTION SCAFFOLD (shared section rhythm)
   Sections breathe --sp-8 on mobile; styles_006.css raises it to --sp-9 on
   desktop (design §1.4 rhythm rule). .section-head pairs an h2 with a short
   intro line above grids.
   ========================================================================== */

/* The hero keeps its own tighter rhythm (styles_003.css, session 0034) —
   the shared section padding applies to every section EXCEPT the hero. */
section:not(.hero) {
  padding-block: var(--sp-8);
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--sp-7);
}

.section-head h2 {
  margin-bottom: var(--sp-3);
}

.section-head p {
  color: var(--clr-muted);
  font-size: var(--fs-body-l);
}

/* Home Learn preview + Learn index + Tools sections share the same rhythm. */
.home-learn,
.learn-list,
.tools-more {
  padding-block: var(--sp-8);
}

/* ============================================================================
   SECTION 17 — CARD GRID + CARDS (design §3.4)
   1 column mobile / 2 at ≥768px / 3 at ≥1100px — the column changes live in
   styles_006.css; this file ships the mobile-first single column + the card.
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

.card {
  background-color: var(--clr-surface);
  border: 1px solid #2B2B2B;            /* brighter separation hairline (0034) */
  border-radius: var(--r-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--sh-1);
  padding: var(--sp-5);
  transition: box-shadow var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}

/* Hover lift on pointer devices only (same rule as the TPEE card). */
@media (hover: hover) {
  .card:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), var(--sh-2);
    transform: translateY(-2px);
  }
}

.card h3 {
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}

.card p {
  color: var(--clr-muted);
}

/* Card link ("Open" text link): yellow with a static underline on hover. */
.card a:not(.btn) {
  color: var(--clr-yellow);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}

.card a:not(.btn):hover {
  color: var(--clr-yellow-hover);
  border-bottom-color: var(--clr-yellow-hover);
}

/* ============================================================================
   SECTION 18 — GUIDE CARDS + CHIPS (design §3.5, Learn page)
   Learn cards are dark cards with a meta row: reading time + a level chip.
   All five v1 cards also carry the "soon" chip — the articles are not
   written yet, and the card says so honestly. Cards are NOT links (D7).
   ========================================================================== */

.guide-card {
  display: flex;
  flex-direction: column;
}

/* Card text blocks keep a min-height so uneven titles don't make uneven
   cards (works with text-wrap: pretty per design §2). */
.guide-card h3 {
  min-height: 2.6em;                /* two lines of h3 at 1.3 line-height */
}

.guide-card > p {
  flex-grow: 1;                     /* pushes the meta row to the card bottom */
}

/* The meta row: reading time (Small, muted) + chips. */
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--clr-muted);
}

/* ---- 18.1 Chips ---------------------------------------------------------------
   Tiny outline labels: --r-1 radius, border, NO fill (design §3.4). They are
   labels, not buttons — they do nothing when tapped, so they are not links. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 2px var(--sp-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--clr-border);
  border-radius: var(--r-1);
  color: var(--clr-muted);
  white-space: nowrap;
}

/* Level chip (Beginner / Intermediate / Advanced): yellow-tinted border so
   the useful info stands out from the plain meta text. */
.chip.level {
  border-color: var(--clr-yellow);
  color: var(--clr-yellow);
}

/* Soon chip: quiet grey — coming later, no teasing. */
.chip.soon {
  border-color: var(--clr-border);
  color: var(--clr-muted);
}

/* ============================================================================
   SECTION 19 — "MORE" CARD (Tools page: more tools are coming)
   A quieter card: centered copy, muted tone, one outline link. Never a fake
   button for things that do not exist yet (design §3.4 rule).
   ========================================================================== */

/* ---- 19.1 Learn page foot (session 0034, decision R4e) ----------------------
   One honest sentence about how guides are published, plus a real way
   forward (a secondary button to Tools) so the Learn page is never a
   dead end while the articles are being written. */
.learn-foot {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.learn-foot p {
  color: var(--clr-muted);
  max-width: 52ch;
  margin-inline-end: auto;      /* logical margin — flips by itself in RTL */
}

.more-card {
  max-width: 640px;
  text-align: left;
}

.more-card h2 {
  margin-bottom: var(--sp-3);
}

.more-card p {
  color: var(--clr-muted);
  margin-bottom: var(--sp-4);
}

/* ============================================================================
   SECTION 20 — LIGHT SECTIONS (.section--light)
   *** NOT USED BY ANY v1 PAGE. ***
   These tokens ship NOW so future Learn articles (long-form reading) can flip
   to warm paper by adding one class — dark header and footer still frame the
   page (design §0, §3.5). Documented here so nobody deletes it as "dead CSS".
   Rules on paper:
   - bright yellow #F0E010 is NEVER text (0.8:1 — fails hard); graphic fill only
   - links use --clr-ink-yellow (5.7:1) and are UNDERLINED
   - red #D02010 on paper is AA-safe (4.9:1) for small emphasis
   - transition from dark chrome: hard edge + --sp-6 padding, no gradients
   ========================================================================== */

.section--light {
  background-color: var(--clr-paper);
  color: var(--clr-ink-text);
  padding-block: var(--sp-7);
}

.section--light h1,
.section--light h2,
.section--light h3,
.section--light h4,
.section--light h5,
.section--light h6 {
  color: var(--clr-ink-text);
}

.section--light p {
  color: var(--clr-ink-text);
}

.section--light .lead,
.section--light small,
.section--light .small {
  color: var(--clr-ink-muted);
}

/* Eyebrow on paper: the AA-safe deep yellow, never the bright one. */
.section--light .eyebrow {
  color: var(--clr-ink-yellow);
}

/* Reading links on paper: deep yellow + always underlined. */
.section--light a:not(.btn) {
  color: var(--clr-ink-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.section--light a:not(.btn):hover {
  color: var(--clr-ink-text);
}

/* Long-form rhythm: the .prose column breathes more on paper (§3.5). */
.section--light .prose {
  margin-inline: auto;
}

.section--light .prose > * + * {
  margin-top: var(--sp-5);          /* generous paragraph rhythm on paper */
}

/* Code on paper: warm light block, ink text. */
.section--light pre,
.section--light .code-sample {
  background-color: var(--clr-paper-code);
  border-color: var(--clr-paper-border);
  color: var(--clr-ink-text);
}

/* Blockquote: the one place bright yellow may appear on paper — as a graphic
   left border, never as text. */
.section--light blockquote {
  border-left-color: var(--clr-yellow);
  color: var(--clr-ink-muted);
}

/* Cards on paper: white cards on the warm field. */
.section--light .card {
  background-color: var(--clr-paper-2);
  border-color: var(--clr-paper-border);
  box-shadow: 0 1px 2px rgba(20, 20, 20, .08);
}

.section--light .card p {
  color: var(--clr-ink-muted);
}

/* Chips on paper: level chips become ink-on-yellow FILLS (the allowed
   graphic use of bright yellow); soon chips stay quiet outlines. The .level
   rule carries an extra class, so it wins over the generic chip rule
   regardless of order. */
.section--light .chip {
  border-color: var(--clr-paper-border);
  color: var(--clr-ink-muted);
}

.section--light .chip.level {
  background-color: var(--clr-yellow);
  border-color: var(--clr-yellow);
  color: var(--clr-ink);
}

/* Secondary button on paper: deep-yellow outline + text (AA-safe swap). */
.section--light .btn-secondary {
  border-color: var(--clr-ink-yellow);
  color: var(--clr-ink-yellow);
}

.section--light .btn-secondary:hover {
  background-color: rgba(110, 98, 0, .08);
  color: var(--clr-ink-yellow);
}

/* Focus ring on paper: deep yellow so it stays visible against white. */
.section--light :focus-visible {
  outline-color: var(--clr-ink-yellow);
}

/* Hairlines and muted text on paper. */
.section--light hr {
  border-top-color: var(--clr-paper-border);
}

.section--light ::selection {
  background-color: var(--clr-yellow);
  color: var(--clr-ink);
}

/* End of styles_004.css — grids, cards, chips, light-section theme.
   Next: styles_005.css (timeline, contact card, 404, statement, heritage). */