/* ============================================================================
   KIPS PDF — Tool Typography Normalizer
   ----------------------------------------------------------------------------
   Loaded on every /tools/*.html page AFTER the page's own inline <style> and
   after kips-design-system.css. Its only job: make text sizes CONSISTENT and
   perfectly readable on every device (Android low-end, iPhone, iPad, tablet,
   desktop, MacBook, ultrawide) using a single fluid type scale.

   Strategy: target the shared structural selectors used across all 41 tools and
   override their many ad-hoc px sizes (14/13/11/12/15/24...) with one harmonised
   clamp() scale. Loaded last → wins the cascade at equal specificity.
   ========================================================================== */

:root {
  /* One fluid type scale, shared by every tool page.
     clamp(min, preferred, max): min protects low-end phones, max caps desktop. */
  --kt-fs-title:  clamp(22px, 3.4vw, 30px);   /* tool name (h1/h2)      */
  --kt-fs-sub:    clamp(16px, 2.2vw, 19px);   /* section subheads (h3)  */
  --kt-fs-body:   clamp(14px, 1.4vw, 15.5px); /* descriptions, labels   */
  --kt-fs-ui:     clamp(14px, 1.4vw, 15.5px); /* inputs, status, links  */
  --kt-fs-btn:    clamp(15px, 1.5vw, 16.5px); /* buttons                */
  --kt-fs-micro:  clamp(11px, 1.1vw, 12.5px); /* hints, badges, captions*/
  --kt-lh:        1.55;
}

/* Prevent mobile browsers from auto-inflating text inconsistently. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: var(--kt-fs-body); line-height: var(--kt-lh); }

/* --- Headings ------------------------------------------------------------- */
body h1,
body h2,
.card h1,
.card h2 {
  font-size: var(--kt-fs-title);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
}
body h3, .card h3 { font-size: var(--kt-fs-sub); line-height: 1.3; }

/* --- Body / description text ---------------------------------------------- */
.tool-desc,
.card > p,
.subtitle,
.desc,
.note,
.info,
.label,
label {
  font-size: var(--kt-fs-body);
  line-height: var(--kt-lh);
}

/* --- Form controls (consistent across devices) ---------------------------- */
input,
select,
textarea,
input[type="file"],
input[type="text"],
input[type="number"],
input[type="password"] {
  font-size: var(--kt-fs-ui);
  font-family: inherit;
}
/* iOS does not zoom the page on focus when inputs are >= 16px; our clamp max
   keeps controls comfortable while the floor stays readable on small screens. */

/* --- Buttons -------------------------------------------------------------- */
.btn-main,
.btn,
button,
.button,
.action-btn {
  font-size: var(--kt-fs-btn);
  font-weight: 700;
  line-height: 1.2;
}

/* --- Status / helper / hint / back link ----------------------------------- */
#status,
.status,
.hint,
.helper {
  font-size: var(--kt-fs-ui);
}
.back,
a.back {
  font-size: var(--kt-fs-ui);
}
.preview-hint,
.badge,
.tag,
.caption,
small {
  font-size: var(--kt-fs-micro);
}

/* --- Tables & lists inside tools ------------------------------------------ */
.card table, .card th, .card td, .card li {
  font-size: var(--kt-fs-body);
}

/* --- Touch ergonomics: comfortable tap targets on phones/tablets ---------- */
@media (pointer: coarse) {
  .btn-main, .btn, button, .button { min-height: 48px; }
  input[type="file"], select, input[type="text"], input[type="number"] { min-height: 46px; }
}

/* --- Respect reduced motion for any tool-level animations ----------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}