/* ====================================================================
   THEME B — LIQUID CHROME
   Cool ivory paper, midnight-blue ink, chrome-gradient text on emphasis.
   The italic em words and stat numerals literally look like polished
   liquid metal — gradient mimics light reflecting off platinum.
   Patek Philippe / Vacheron luxury watch dial register.
   ==================================================================== */

body.manual {
  --paper:      #F8F9FB;
  --paper-alt:  #ECEFF3;
  --ink:        #0F1828;            /* midnight blue — luxury watch case */
  --ink-soft:   #2E3A4F;
  --ink-faint:  #6B7588;
  --gold-warm:  #5C6275;            /* deep platinum for light bg labels */
  --gold-rule:  #D4D8E0;            /* bright chrome for dark bg accents */
  --rule:       rgba(15, 24, 40, 0.14);
  --rule-strong:rgba(15, 24, 40, 0.55);
}

/* ==== LIQUID CHROME GRADIENT TEXT EFFECT (the WOW move) ==== */
/* All italic emphasis words and stat numerals get a polished metal gradient.
   Note: .plus and inline children also need their OWN background-clip:text
   because they inherit color:transparent from the parent. */
body.manual .field-hero__title em,
body.manual .field-doctrine__quote em,
body.manual .colophon-headline em,
body.manual .hero-record__num,
body.manual .hero-record__num .plus,
body.manual .hero-record__quote em,
body.manual .eng-card__no,
body.manual .eng-card__title em {
  background: linear-gradient(135deg,
    #FFFFFF 0%,
    #D4D8E0 25%,
    #E8EBF0 45%,
    #FFFFFF 55%,
    #A8B0BD 75%,
    #6E7480 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  animation: chrome-shimmer 8s ease-in-out infinite;
}

/* ====================================================================
   OVERFLOW FIX — chrome gradient + italic Playfair + drop-shadow filter
   --------------------------------------------------------------------
   STANDALONE block-level numerals: need display:inline-block + relaxed
   line-height + bottom padding so italic descender and filter shadow
   render fully inside their own box (don't bleed into adjacent elements).

   INLINE <em> inside flowing text: keep flow normal, drop the filter
   that was extending beyond the line box.
   ==================================================================== */

/* — STANDALONE numerals (block-style) — */
body.manual .hero-record__num,
body.manual .hero-record__num .plus,
body.manual .eng-card__no {
  display: inline-block;
  line-height: 1.15;
  padding: 4px 6px 8px 0;
  filter: drop-shadow(0 2px 12px rgba(212, 216, 224, 0.4));
}
body.manual .hero-record__stat { gap: 0; padding-bottom: 12px; }

/* — INLINE em inside flowing text: keep wrap intact, kill filter — */
body.manual .field-hero__title em,
body.manual .field-doctrine__quote em,
body.manual .colophon-headline em,
body.manual .hero-record__quote em,
body.manual .eng-card__title em,
body.manual .section-head__title em,
body.manual .approach-hero__title em {
  filter: none;            /* drop-shadow was creating visual overflow */
  padding: 0 0.06em 0 0;   /* tiny right cushion so italic-slant doesn't clip */
}

@keyframes chrome-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}


/* On light backgrounds — emphasis gets DARKER chrome gradient */
body.manual .section-head__title em,
body.manual .approach-hero__title em,
body.manual .colophon-headline em /* override above for sections that have it on dark */ {
  /* keep the bright version for dark sections — listed above */
}
body.manual .section-head__title em,
body.manual .approach-hero__title em {
  background: linear-gradient(135deg,
    #5C6275 0%,
    #2E3A4F 30%,
    #6B7588 50%,
    #2E3A4F 70%,
    #0F1828 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 6px rgba(15, 24, 40, 0.18));
  animation: chrome-shimmer 8s ease-in-out infinite;
}

/* Stat numerals on light bg — DARK chrome
   ALL standalone numerals get inline-block + line-height + padding so the
   italic descender and drop-shadow render fully inside their own box. */
body.manual .big-stat-num span,
body.manual .big-stat-num em,
body.manual .phase-num,
body.manual .benchmark-stat,
body.manual .principle-num,
body.manual .bc-reason__num,
body.manual .path__letter {
  background: linear-gradient(135deg, #5C6275 0%, #2E3A4F 30%, #8590A5 50%, #2E3A4F 70%, #0F1828 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(15, 24, 40, 0.25));
  animation: chrome-shimmer 10s ease-in-out infinite;
  display: inline-block;
  line-height: 1.15;
  padding: 4px 8px 10px 0;
}

/* big-stat-num outer wrapper: extra bottom padding so massive 200px numerals
   don't overflow into the label below */
body.manual .big-stat-num {
  padding-bottom: 16px;
}

/* Brand-mark dot — solid bright chrome (SVG can't easily do gradient via tspan) */
body.manual .manual-logo__mark tspan:last-child { fill: #5C6275; }

/* ==== Hero — midnight blue with chrome corona ==== */
body.manual .field-hero { background: #0F1828; }
body.manual .field-hero::before {
  background:
    linear-gradient(180deg, rgba(15,24,40,0.30) 0%, rgba(15,24,40,0.20) 40%, rgba(15,24,40,0.75) 100%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(212,216,224,0.35), transparent 60%);
}
body.manual .field-hero__title       { color: #FFFFFF; }
body.manual .field-hero__lede        { color: rgba(255,255,255,0.92); }
body.manual .field-hero .ref-tag     { color: rgba(255,255,255,0.85); }
body.manual .field-hero__actions .manual-link        { color: #FFFFFF; border-color: #FFFFFF; }
body.manual .field-hero__actions .manual-link:hover  { color: #D4D8E0; border-color: #D4D8E0; }
body.manual .field-hero__actions .manual-link--soft  { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.35); }
body.manual .field-coord                             { color: rgba(255,255,255,0.6); }
body.manual .field-coord b                           { color: #D4D8E0; }

/* On-record */
body.manual .hero-record         { background: rgba(15,24,40,0.55); border-color: rgba(255,255,255,0.18); }
body.manual .hero-record__attr   { color: rgba(255,255,255,0.55); }
body.manual .hero-record__label  { color: rgba(255,255,255,0.7); }
body.manual .hero-record__quote  { color: rgba(255,255,255,0.95); }
body.manual .hero-record__stat   { border-bottom-color: rgba(255,255,255,0.12); }

/* Engagement cards */
body.manual .eng-card { background: #0F1828; }

/* Doctrine */
body.manual .field-doctrine { background: #0F1828; }
body.manual .field-doctrine::before {
  background:
    linear-gradient(180deg, rgba(15,24,40,0.30) 0%, rgba(15,24,40,0.40) 50%, rgba(15,24,40,0.75) 100%),
    radial-gradient(ellipse at center, transparent 40%, rgba(15,24,40,0.3) 100%);
}
body.manual .field-doctrine__inner       { color: #FFFFFF; }
body.manual .field-doctrine__quote       { color: #FFFFFF; }
body.manual .field-doctrine__attr        { color: rgba(255,255,255,0.6); }
body.manual .field-doctrine__brackets span { background: rgba(212,216,224,0.7); }
body.manual .field-doctrine__inner .ref-tag { color: rgba(255,255,255,0.7); }

/* Colophon */
body.manual .colophon                 { background: #0F1828; }
body.manual .colophon .ref-tag        { color: rgba(255,255,255,0.7); }

/* Ticker */
body.manual .ticker             { background: #0F1828; }
body.manual .ticker-track .dot  { color: #D4D8E0; }