/* ============================================================================
   Cognesia Base — reset + typography + utilities
   File: base.css   v0.1   2026-05-01
   Loads tokens, sets html defaults, exposes container/grid/typography utilities.
   Direction CSS files are layered on top of this and override component recipes.
   ========================================================================== */

@import url("./design-tokens.css");

/* ---- Reset (modern, minimal) ------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-base);
  background: var(--bg);
  color: var(--text);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  overflow-x: hidden;
  max-width: 100vw;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in oklab, var(--accent) 35%, transparent);
  color: var(--text);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ---- Container & grid utilities ---------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

.container--wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.grid {
  display: grid;
  gap: 24px;
}

.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 809px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Typography classes ----------------------------------------------- */
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--tr-2xl);
  font-weight: 600;
  color: var(--text);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--tr-xl);
  font-weight: 600;
  color: var(--text);
}

.h3 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  letter-spacing: var(--tr-lg);
  font-weight: 600;
  color: var(--text);
}

.h4 {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  letter-spacing: var(--tr-md);
  font-weight: 600;
  color: var(--text);
}

.h5 {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  color: var(--text);
}

.h6 {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 700;
  color: var(--text);
}

.body {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--text);
}

.caption {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--tr-xs);
  color: var(--text-muted);
}

.muted    { color: var(--text-muted); }
.subtle   { color: var(--text-subtle); }
.mono     { font-family: var(--font-mono); }
.serif    { font-family: var(--font-serif); }

/* ---- Button utility --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.btn:hover {
  background: var(--accent-hover);
}

.btn:active {
  transform: scale(0.98);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}

.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

.btn--lg {
  height: 44px;
  padding: 0 20px;
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
}

/* ---- Card utility ----------------------------------------------------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow   var(--motion-fast) var(--ease-standard);
}

.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
}

/* ---- Table reset ------------------------------------------------------ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}

th, td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
}

tbody tr:hover {
  background: var(--surface);
}

/* ---- Form basics ------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea,
select {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--text);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow   var(--motion-fast) var(--ease-standard);
}

textarea {
  height: auto;
  min-height: 96px;
  padding: 12px;
  resize: vertical;
  line-height: var(--lh-base);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}

/* iOS zoom prevention */
@media (max-width: 809px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}

/* === Mobile touch-target safety net (≤480px) ============================
   WCAG 2.5.5 / Apple HIG / Material — interactive elements need ≥44×44px
   tap area. Many landing-page direction styles set inputs/buttons/toggles
   to 32–40px to fit desktop density; force a 44px floor on mobile. */
@media (max-width: 480px) {
  /* Form controls: 44px min height */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="tel"],
  select,
  button,
  .btn,
  .btn-bevel,
  .signup__input,
  .newsletter-form input[type="email"],
  .newsletter-form button {
    min-height: 44px;
  }

  /* Theme toggle is the most common offender — pages set it to 32–37px.
     Force a 44×44 tap area at mobile while preserving visual size via
     padding rather than scaling glyph. */
  .theme-toggle,
  button#themeToggle,
  button#theme-toggle,
  button#soundToggle,
  [data-theme-toggle],
  [class*="theme-toggle"],
  [class*="util-btn"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Site brand / logo lockups in topbars are clickable links to home —
     give them the 44px floor so they're tappable. The poster-typography
     topbar uses a tiny 10px font with line-height collapsing to 18px;
     force inline-flex + 44px min-height regardless of parent line-height. */
  .topbar__brand,
  .topbar .brand,
  .brand,
  a.brand,
  a.topbar__brand,
  .topbar a[href="/"],
  .topbar a[href="#top"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
    line-height: 1 !important;
  }

  /* Page D + final: small standalone anchors inside footers/social rows
     (single-char "x", "discord", "email") need 44px tap area when they
     stand alone in a nav. Inline anchors inside paragraphs are exempted
     above by the p a / li a override. */
  footer nav a,
  .footer-meta nav a,
  .site-footer a,
  .signup-final a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }

  /* Page A footer social icons (.site-footer__social a) — these wrap a
     14×14 SVG. Force 44×44 hit area. */
  .site-footer__social a,
  .social a,
  [aria-label="Social"] a,
  footer a[aria-label] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Page D's founder CTA — both .primary and the secondary a need 44px.
     The earlier rule covered .primary; this catches the secondary. */
  .founder-cta a,
  .cta-row a,
  .button-row a {
    min-height: 44px !important;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
  }

  /* Reset block-treatment for anchors inside footer copy lines that sit
     in plain text spans (e.g. `© 2026 AI with Kian.` next to the
     mailto). These aren't pure-nav rows. */
  .site-footer__credit a,
  .footer-meta > span a,
  .footer-meta a[href^="mailto:"] {
    min-height: auto;
    padding: 0;
  }

  /* Topbar nav anchors: the earlier rule set line-height:44px which can
     stack with vertical padding from `display:inline-block` to produce a
     90px-tall anchor (page B). Use inline-flex with a fixed min-height
     instead so multi-line wrapping doesn't multiply the height. Also
     prevent text wrap so a multi-word link stays on one line. */
  .topbar__nav a,
  .topbar nav a,
  .topbar .right a,
  nav a,
  .nav a {
    line-height: 1.2;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  /* Decorative form labels (e.g. page B's standalone "Email" label) —
     these are not interactive in the touch sense; the input is. Keep
     them inline-block but exclude from the 44px floor. */
  form label,
  .signup label,
  .signup-form label,
  .newsletter-form label {
    min-height: auto;
    line-height: inherit;
    padding: 0;
    display: inline;
  }

  /* Tiny eyebrow / hint / cite / status text legibly bumped to ≥12px on
     phones. Designed at 10–11px for desktop but unreadable on a 320px
     viewport. We keep tracking and uppercase styling intact. */
  .hero__eyebrow,
  .signup__hint,
  .repeat__hint,
  .pullquote__cite,
  .footer__copy,
  .status-bar,
  .status-bar span {
    font-size: 12px !important;
  }
  .mac-window__title-text,
  .mac-window__titlebar__caption,
  .changelog__msg {
    font-size: 13px !important;
  }
  .footer-meta,
  .footer-meta span,
  .site-footer__credit {
    font-size: 12px !important;
  }

  /* final.html hero headline "Welcome to AI with Kian" overflows at 320px
     because clamp(48px, 11vw, 96px) floors at 48px while the headline is
     22 chars wide. The HTML uses ` ` between word spans, which forces
     a single unbreakable run that splits mid-word ("AI wi/th Kian"). At
     mobile we shrink the floor and let each word-span wrap as its own
     unit instead of breaking inside a word. */
  .hero__headline {
    font-size: clamp(28px, 8vw, 48px) !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
    line-height: 1.05;
  }
  /* Treat each colored word-span as its own atomic unit so wrapping
     happens between words, not mid-word. */
  .hero__headline .word-fallback,
  .hero__headline .word-ai,
  .hero__headline .word-with,
  .hero__headline .word-kian {
    display: inline-block;
    white-space: nowrap;
  }

  /* Primary/secondary CTA buttons — page D has .primary at 36px, A/B/C have
     bevel buttons. Force 44px floor on standalone CTAs. */
  a.btn,
  a.primary,
  a.btn--lg,
  a[class*="cta"],
  .signup-final a,
  a.btn-bevel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Inline nav and footer links — these collapse to 12–18px line height.
     Add vertical padding so the tap area covers ≥44px without changing
     the visual font size. */
  .topbar__nav a,
  nav a,
  .nav a,
  .footer a,
  footer a,
  .signup-final a,
  .signup-final__legal a {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }

  /* Footer/legal anchors that sit inside paragraphs of text shouldn't
     get block-level treatment — only standalone link rows. Reset for
     anchors inside paragraphs of body copy. */
  p a, li a, .body a {
    min-height: auto;
    line-height: inherit;
    padding: 0;
    display: inline;
  }

  /* Newsletter form: stack input above button, both full-width 44px tall */
  .newsletter-form,
  form.signup,
  .signup-form,
  .signup__form {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
  }
  .newsletter-form > *,
  form.signup > *,
  .signup-form > *,
  .signup__form > * {
    width: 100%;
  }
}

/* ---- Visually hidden -------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Long preformatted code blocks should scroll horizontally, not push layout. */
pre, pre.code-block, .code-block {
  overflow-x: auto;
  max-width: 100%;
  white-space: pre;
  word-wrap: normal;
}
@media (max-width: 640px) {
  pre, pre.code-block, .code-block {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* Full-bleed cover sections use negative-margin bands; clip on the section
   itself so the negative margin doesn't trip element-overflow detection. */
.cover, .pe-cover, .editorial-cover {
  overflow-x: hidden;
  max-width: 100%;
}

/* Articles that contain `.full-bleed-band` (negative margin extends out) need
   to clip horizontally so the band's overflow isn't reported on the article. */
article:has(.full-bleed-band),
article:has(.cover__band) {
  overflow-x: hidden;
}

/* Scene wrap (remy ASCII parallax canvas) — clip to its container. */
.scene-wrap {
  overflow: hidden;
  max-width: 100%;
}

/* Component cards / logo size rows — flex children with min-width:0 so they
   don't impose a min content-size on their grid cells. */
.component-card, .component-grid > * {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Pineapple-express specific: prevent display titles, service cells, and
   forbid badges from overflowing on tight viewports. */
.pe-mag-card,
.pe-mag-card__title,
.pe-services,
.pe-service,
.pe-service__title,
.pe-service__body,
.pe-trust,
.pe-trust__cell,
.pe-trust__name,
.pe-logo-forbid,
.pe-logo-forbid__cell,
.pe-cta-bar,
.pe-compliance-band {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.pe-mag-card__title,
.pe-trust__name {
  font-size: clamp(20px, 6vw, 32px) !important;
}
@media (max-width: 640px) {
  .pe-trust {
    grid-template-columns: 1fr 1fr !important;
  }
  .pe-logo-forbid {
    grid-template-columns: 1fr !important;
  }
  .pe-service {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .pe-compliance-band {
    margin: 0 !important;
    padding: 32px 20px !important;
  }
  /* Override inline min-width on modal-card examples (300px / 320px / 360px etc) */
  [style*="min-width:300px"],
  [style*="min-width: 300px"],
  [style*="min-width:320px"],
  [style*="min-width: 320px"],
  [style*="min-width:340px"],
  [style*="min-width: 340px"],
  [style*="min-width:360px"],
  [style*="min-width: 360px"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .pe-cta-bar {
    padding: 14px 16px !important;
    width: 100% !important;
  }
  .pe-mag-card {
    overflow-x: hidden;
  }
}

/* ---- Global no-overflow safety nets (all viewports) ------------------ */
/* Logo size-comparison rows use inline display:flex with fixed widths;
   on narrow grid columns (e.g. 478px tile at 1440 with sidebar) they overflow.
   Allow wrapping at every viewport. */
.logo-tile [style*="display:flex"],
.logo-tile [style*="display: flex"],
.logo-block [style*="display:flex"],
.logo-block [style*="display: flex"] {
  flex-wrap: wrap;
  max-width: 100%;
}
.logo-tile, .logo-block {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.logo-tile img, .logo-block img {
  max-width: 100%;
  height: auto;
}

/* ---- Mobile responsive collapse — applies globally -------------------- */
@media (max-width: 640px) {
  /* Collapse multi-column grids to single column.
     Covers all grid/row class patterns used by html-guidelines pages
     (.kpi-top, .voice-grid, .logo-block, .editorial-grid, .swatch-grid,
     .forbidden-grid, .component-grid, .type-row, .scale-row, .motion-row,
     .channel-row, .linear-row, .member-row, .who-row, .ls-row, .dd-grid,
     .dodont, .dodont-grid, .components, .imagery, .imagery-grid,
     .imagery-row, .ease-row, .recipe, .radius-scale, .grid-2/3/4,
     .pe-* poster grids, .cog-grid-*) plus any inline grid-template-columns.   */
  [class*="-grid"],
  [class*="-row"],
  [class*="grid-"],
  [class*="cog-grid-"],
  [class*="-grid-"],
  [class*="pe-trust"],
  [class*="pe-services"],
  [class*="pe-logo-forbid"],
  [class*="pe-flow"],
  [class*="pe-mag-card"],
  .pe-trust, .pe-services, .pe-logo-forbid,
  .kpi-top, .kpi-row, .kpi-grid,
  .grid-2, .grid-3, .grid-4,
  .voice-tone-grid, .do-dont-grid, .voice-grid,
  .logo-block, .logo-grid,
  .editorial-grid,
  .swatch-pair, .swatch-grid, .swatch-list,
  .forbidden-grid, .forbid-grid,
  .component-grid, .components,
  .recipe, .radius-scale, .imagery, .imagery-row, .imagery-grid,
  .dodont, .dodont-grid, .dd-grid,
  .ease-row, .motion-row, .type-row, .scale-row, .channel-row,
  .linear-row, .member-row, .who-row, .ls-row,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Long words don't push layout */
  html, body {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Constrain block elements */
  main, article, section, aside, header, footer, nav, div {
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Photos and embeds — width:auto so inline width="240" attribute is overridden */
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
  /* Inline-styled flex rows (logo-tile inner divs use display:flex with fixed-width
     children) — let them wrap so 80px+160px+240px logos don't blow out the column. */
  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap;
    max-width: 100%;
  }
  /* Aside / marginalia constrained */
  aside { max-width: 100% !important; }
}

@media (max-width: 900px) {
  /* Tablet — collapse 4+ col grids to 2 col; collapse 3-col to 2; collapse
     asymmetric editorial 1fr 200px / 7fr 5fr to single column. */
  .grid-3, .grid-4,
  [class*="cog-grid-4"], [class*="cog-grid-3"],
  .imagery-row, .recipe, .radius-scale,
  .forbidden-grid, .forbid-grid,
  .ease-row,
  .pe-radius-row, .pe-swatch-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Editorial-poster asymmetric grids (1fr 200px, 7fr 5fr) -> single col */
  .editorial-grid,
  .grid-asym,
  .logo-block {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Tight type/scale/motion/channel rows that have fixed-px columns
     (110px 1fr 180px etc.) — let the middle column shrink. */
  .type-row, .pe-type-row,
  .scale-row, .pe-space-row,
  .motion-row,
  .linear-row, .who-row, .ls-row, .member-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 8px 0 !important;
  }
  html, body {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto;
  }
  [style*="display:flex"],
  [style*="display: flex"] {
    flex-wrap: wrap;
    max-width: 100%;
  }
}

/* === Print + page-break — applies globally =============================== */
@page { size: A4; margin: 12mm; }
@media print {
  section, .section, article > * { break-inside: avoid; }
  .cover, .page-break { break-after: page; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .no-print { display: none !important; }
}

/* === Reduced motion — global ============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Print clipping safety net (Phase A.2 post-Kian-review) ============== */
/* Targets: descender clipping on display fonts with line-height:1.0/.95/.9
   set inline; page-break-in-half across type-specimen rows; long-word
   horizontal overflow on print; <pre>/code overflow; ASCII-box overflow.
   Applies on print AND screen so type-specimen rows never clip in either. */

/* --- Always-on (screen + print): kill descender clip on inline-styled
       display/headline samples that carry line-height <= 1.05 --- */
.type-row [style*="line-height:0.9"],
.type-row [style*="line-height: 0.9"],
.type-row [style*="line-height:.9"],
.type-row [style*="line-height: .9"],
.type-row [style*="line-height:0.95"],
.type-row [style*="line-height: 0.95"],
.type-row [style*="line-height:.95"],
.type-row [style*="line-height: .95"],
.type-row [style*="line-height:1.0"],
.type-row [style*="line-height: 1.0"],
.pe-type-row [style*="line-height:0.95"],
.pe-type-row [style*="line-height: 0.95"],
.pe-type-row [style*="line-height:.95"],
.pe-type-row [style*="line-height: .95"],
.pe-type-row [style*="line-height:1.0"],
.pe-type-row [style*="line-height: 1.0"] {
  padding-bottom: 0.15em !important;
  /* don't override line-height (preserve the design intent on the sample),
     just give descenders breathing room below the baseline */
}

/* Display fonts at 40px+ inline get a small bottom pad to prevent g/j/p/q/y
   clipping under fixed line-height. Targets common inline patterns. */
[style*="font-size:40px"],
[style*="font-size: 40px"],
[style*="font-size:42px"],
[style*="font-size: 42px"],
[style*="font-size:48px"],
[style*="font-size: 48px"],
[style*="font-size:56px"],
[style*="font-size: 56px"],
[style*="font-size:64px"],
[style*="font-size: 64px"],
[style*="font-size:72px"],
[style*="font-size: 72px"],
[style*="font-size:96px"],
[style*="font-size: 96px"],
[style*="font-size:3.5rem"],
[style*="font-size: 3.5rem"] {
  padding-bottom: 0.08em;
}

/* Constrain type-specimen samples so they can never push past the column.
   The samples sit in a `1fr` middle cell of a 110px/120px/140px 1fr 180px/200px/220px
   grid. Inline `font-size:72px` with no `max-width` will horizontally overflow
   on A4. Force min-width:0 on grid children + word-break on the sample paragraph. */
.type-row > *,
.pe-type-row > *,
.scale-row > *,
.motion-row > * {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.type-row p, .type-row__sample,
.pe-type-row p,
.scale-row p, .motion-row p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* === Print-only safety net =============================================== */
@media print {
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Keep specimen / scale / motion / KPI rows from splitting across pages */
  .type-row, .pe-type-row, .scale-row, .pe-space-row,
  .motion-row, .ease-row, .channel-row, .linear-row,
  .who-row, .ls-row, .member-row, .kpi-tile,
  [class*="-row"], [class*="specimen"] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Display fonts: ensure descenders fit on print */
  h1, h2, .h1, .h2, .display, .hero-headline, .poster-hero__title,
  .calm-section__title, [class*="display"], [class*="hero"],
  [class*="poster-hero"] {
    line-height: 1.1 !important;
    padding-bottom: 0.1em;
  }

  /* Long words/URLs/tokens: wrap on print */
  body, p, td, li, code, pre, .card, .specimen, .kpi-tile,
  .type-row__sample, .type-row__meta, .type-row__spec,
  .ml-h2, .pe-type-row p, .calm-section__title {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Code blocks scroll on screen → wrap on print */
  pre, .code-block, .cli-log {
    white-space: pre-wrap !important;
    overflow-x: visible !important;
    word-break: break-word;
  }

  /* Constrain block elements to page width */
  main, article, section, .container,
  .ascii-box, .cli-grid, [class*="cli-grid"],
  [class*="ascii-box"], .cog-shell-main {
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: visible !important;
  }
  img, svg, video { max-width: 100% !important; height: auto; }

  /* Editorial-poster hero: cap at print-safe size */
  .poster-hero__title, .poster-headline, .editorial-hero,
  [class*="poster-hero"] {
    font-size: clamp(36px, 8vw, 56px) !important;
    line-height: 1.1 !important;
    padding-bottom: 0.1em;
  }

  /* Drop-cap: prevent first-letter from clipping at section start */
  .poster-article p:first-of-type::first-letter {
    line-height: 0.95 !important;
    padding-bottom: 0.05em;
  }

  /* Pineapple-express 72px italic specimen — cap so it cannot exceed column */
  .pe-type-row p[style*="font-size:72px"],
  .pe-type-row p[style*="font-size: 72px"] {
    font-size: 48px !important;
    line-height: 1.1 !important;
    padding-bottom: 0.1em;
  }

  /* Cognesia-Inc terminal-CLI 56px (3.5rem) specimen — cap for A4 column */
  [style*="font-size:3.5rem"] {
    font-size: 40px !important;
    line-height: 1.15 !important;
    padding-bottom: 0.1em;
  }

  /* Remy-direct 56px Pixelify specimen with line-height:.95 — descender pad */
  .type-row p[style*="font-size:56px"],
  .type-row p[style*="font-size: 56px"],
  .type-row__sample[style*="font-size:48px"],
  .type-row__sample[style*="font-size: 48px"] {
    line-height: 1.1 !important;
    padding-bottom: 0.12em;
  }

  /* Discord-remy hero / cover banner with line-height: 0.9 / 0.95 */
  [style*="line-height: 0.9"],
  [style*="line-height:0.9"],
  [style*="line-height: .9"],
  [style*="line-height:.9"],
  [style*="line-height: 0.95"],
  [style*="line-height:0.95"],
  [style*="line-height: .95"],
  [style*="line-height:.95"] {
    line-height: 1.1 !important;
    padding-bottom: 0.08em;
  }

  /* Hide the theme toggle in print — irrelevant in PDFs */
  .theme-toggle, .cog-icon-sun, .cog-icon-moon,
  [data-theme-toggle], #theme-toggle {
    display: none !important;
  }

  /* Avoid orphans/widows on long-form */
  p, li { orphans: 3; widows: 3; }

  /* Spacing-scale visual: ensure 96px bar can't exceed page width */
  .scale-row [style*="width:96"],
  .scale-row [style*="width: 96"],
  .pe-space-row [style*="width:"],
  .scale-row [style*="width:"] {
    max-width: 100% !important;
  }
}

/* === Voice IS / IS-NOT — neutralize green/red dot pills ================== */
/* Council Agent 5: Voice IS/IS-NOT badges flirt with emoji-icon territory.
   Override the inline-styled pill to a hairline mono glyph: text only,
   no green/red fill, foreground = --text / --text-muted. Targets the
   inline pattern background:var(--success|--danger)/--color-success|--color-danger
   used in voice-tone sections. */
[id*="voice"] [aria-hidden][style*="--success"],
[id*="voice"] [aria-hidden][style*="color-success"],
[aria-labelledby*="voice"] [aria-hidden][style*="--success"],
[aria-labelledby*="voice"] [aria-hidden][style*="color-success"],
.cog-voice-tone [aria-hidden][style*="--success"],
.cog-voice-tone [aria-hidden][style*="color-success"] {
  background: transparent !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

[id*="voice"] [aria-hidden][style*="--danger"],
[id*="voice"] [aria-hidden][style*="color-danger"],
[aria-labelledby*="voice"] [aria-hidden][style*="--danger"],
[aria-labelledby*="voice"] [aria-hidden][style*="color-danger"],
.cog-voice-tone [aria-hidden][style*="--danger"],
.cog-voice-tone [aria-hidden][style*="color-danger"] {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

/* Utility classes for non-inline use */
.voice-glyph-yes::before, .v-yes::before {
  content: "✓ ";
  font-family: var(--font-mono);
  color: var(--text);
  font-weight: 600;
}
.voice-glyph-no::before, .v-no::before {
  content: "✗ ";
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 600;
}