/* =============================================================================
   DataConfo Academy — BRAND SYSTEM
   -----------------------------------------------------------------------------
   Design tokens, reset, typography and the shared component vocabulary.
   Everything visual is derived from the tokens in :root — change a value here
   and it propagates to the site, and to any certificate, deck or brochure that
   reuses the same values.

   Derived from the DataConfo brand book: navy / turquoise / white,
   Georgia for display, Calibri for interface.

   This design deliberately commits to one light visual world — a certification
   institute's public site. Every colour is painted explicitly so the page holds
   on any host background.
   ============================================================================ */

:root {
  /* ------------------------------------------------------------ BRAND NAVY */
  --navy-950: #04101F;
  --navy-900: #061A31;
  --navy-800: #0B2545;   /* primary brand navy */
  --navy-700: #123A63;
  --navy-600: #1B4A7A;
  --navy-500: #2B6193;

  /* -------------------------------------------------------- BRAND TURQUOISE */
  --teal-700: #086F6B;
  --teal-600: #0C8F8A;   /* accent text on white — passes AA */
  --teal-500: #14A9A2;   /* primary accent */
  --teal-400: #2FC0B8;
  --teal-300: #5FD6CE;   /* accent on navy */
  --teal-050: #E9F7F6;
  --teal-025: #F4FBFA;

  /* -------------------------------------------- NEUTRALS (biased cool/teal) */
  --white:     #FFFFFF;
  --paper:     #FBFCFD;
  --surface-2: #F3F7F9;
  --surface-3: #E9EFF3;
  --line:      #DCE5EB;
  --line-soft: #E9EFF3;
  --line-strong: #C3D2DC;
  --ink-900: #0C1620;
  --ink-800: #1B2A38;
  --ink-700: #33475A;
  --ink-600: #4E6579;
  --ink-500: #6B8194;
  --ink-400: #8FA3B3;

  /* On-navy neutrals */
  --on-navy:       #EEF4F8;
  --on-navy-dim:   #A9BFD1;
  --on-navy-faint: #6E8BA5;
  --navy-line:     #16375D;
  --navy-surface:  #0E2A4C;

  /* --------------------------------------------------------------- SEMANTIC */
  --ok:    #17795F;
  --warn:  #9A6412;
  --alert: #A83232;
  --ok-bg:    #E7F4EF;
  --warn-bg:  #FBF3E4;
  --alert-bg: #FBECEC;

  /* ------------------------------------------------------------- TYPOGRAPHY */
  --font-display: Georgia, "Times New Roman", "Noto Serif", "Liberation Serif", serif;
  --font-ui: Calibri, Carlito, "Segoe UI", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", Arial, sans-serif;

  /* Display sizes are UNCHANGED — the headlines were already right.
     Everything else is scaled ~30%. The only concession: the lower bound of
     h2/h3 is lifted, otherwise a 22px body would collide with a 25px heading
     on a phone and the hierarchy would collapse. */
  --fs-display: clamp(2.35rem, 1.35rem + 3.4vw, 4.05rem);
  --fs-h1:      clamp(2.15rem, 1.45rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.85rem, 1.45rem + 1.3vw, 2.4rem);
  --fs-h3:      clamp(1.45rem, 1.3rem + 0.55vw, 1.72rem);
  --fs-h4:      1.32rem;
  --fs-lede:    clamp(1.35rem, 1.28rem + 0.4vw, 1.5rem);
  --fs-body:    1.35rem;
  --fs-sm:      1.19rem;
  --fs-xs:      1.03rem;
  --fs-micro:   0.87rem;

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-body:  1.62;

  --ls-label: 0.09em;
  --ls-tight: -0.012em;

  /* ------------------------------------------------------------------ SPACE */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px;

  --section-y: clamp(56px, 6vw, 104px);

  /* ----------------------------------------------------------------- RADIUS */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------- SHADOWS */
  --sh-1: 0 1px 2px rgba(11, 37, 69, 0.05);
  --sh-2: 0 1px 2px rgba(11, 37, 69, 0.04), 0 8px 20px -14px rgba(11, 37, 69, 0.24);
  --sh-3: 0 2px 6px rgba(11, 37, 69, 0.05), 0 18px 44px -22px rgba(11, 37, 69, 0.34);
  --sh-header: 0 1px 0 var(--line), 0 10px 28px -24px rgba(11, 37, 69, 0.6);

  /* ---------------------------------------------------------------- LAYOUT */
  --wrap: 1320px;
  --wrap-mid: 1040px;
  --wrap-narrow: 780px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 84px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

/* =============================================================== RESET/BASE */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-800);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy-800);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-family: var(--font-ui); font-weight: 700; }

p { margin: 0; }

a { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-700); text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

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

ul, ol { margin: 0; padding: 0 0 0 1.15em; }
li::marker { color: var(--teal-500); }

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

:focus-visible {
  outline: 2px solid var(--teal-600);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

::selection { background: var(--teal-050); color: var(--navy-800); }

/* ============================================================ TYPE HELPERS */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--navy-800);
  text-wrap: balance;
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--teal-500);
  flex: none;
}
.eyebrow--light { color: var(--teal-300); }
.eyebrow--light::before { background: var(--teal-300); }
.eyebrow--plain::before { display: none; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.56;
  color: var(--ink-600);
  max-width: 62ch;
}
.lede--light { color: var(--on-navy-dim); }

.muted { color: var(--ink-500); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.nums  { font-variant-numeric: tabular-nums lining-nums; }

.label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
}

/* The catalogue's typographic anchor: a standard number set in Georgia, which
   renders it in old-style figures. This is what makes the grid read like a
   reference index of standards rather than a shop. */
.anchor {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--navy-800);
  display: block;
}
.anchor--sm {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* ================================================================== LAYOUT */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--mid    { max-width: var(--wrap-mid); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 4vw, 64px); }
.section--paper   { background: var(--paper); }
.section--white   { background: var(--white); }
.section--surface { background: var(--surface-2); }
.section--navy    { background: var(--navy-800); color: var(--on-navy); }
.section--navy h2, .section--navy h3, .section--navy .display { color: var(--white); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-10);
  max-width: 68ch;
}
.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  max-width: none;
}
.section-head--split > div {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-width: 60ch;
}
@media (max-width: 720px) {
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-8 { display: flex; flex-direction: column; gap: var(--s-8); }
.row     { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.spacer  { flex: 1 1 auto; }

.rule { height: 1px; background: var(--line); border: 0; }
.rule--navy { background: var(--navy-line); }

.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;
}

.skip-link {
  position: absolute; left: var(--s-4); top: -60px; z-index: 200;
  background: var(--navy-800); color: var(--white);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-2);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); text-decoration: none; color: var(--white); }

/* ================================================================= BUTTONS */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 13px 24px;
  min-height: 52px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-2);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; }

/* Primary — Buy Now / commit */
.btn--primary { --btn-bg: var(--navy-800); --btn-fg: var(--white); --btn-bd: var(--navy-800); box-shadow: var(--sh-1); }
.btn--primary:hover { --btn-bg: var(--navy-700); --btn-bd: var(--navy-700); color: var(--white); }

/* Accent — the single action on navy grounds */
.btn--accent { --btn-bg: var(--teal-400); --btn-fg: var(--navy-950); --btn-bd: var(--teal-400); }
.btn--accent:hover { --btn-bg: var(--teal-300); --btn-bd: var(--teal-300); color: var(--navy-950); }

/* Outline — Add to Cart */
.btn--outline { --btn-bd: var(--line-strong); --btn-fg: var(--navy-800); --btn-bg: var(--white); }
.btn--outline:hover { --btn-bd: var(--navy-800); --btn-bg: var(--white); color: var(--navy-800); }

.btn--outline-light { --btn-bd: rgba(238,244,248,0.36); --btn-fg: var(--white); }
.btn--outline-light:hover { --btn-bd: var(--white); --btn-bg: rgba(255,255,255,0.07); color: var(--white); }

/* Quiet — Request Information */
.btn--quiet {
  --btn-fg: var(--ink-600);
  padding: 10px 7px;
  min-height: 43px;
  font-weight: 700;
  font-size: var(--fs-xs);
}
.btn--quiet:hover { --btn-fg: var(--teal-700); }
.btn--quiet .arrow { transition: transform var(--dur) var(--ease); }
.btn--quiet:hover .arrow { transform: translateX(3px); }

.btn--sm { padding: 10px 17px; min-height: 45px; font-size: var(--fs-xs); }
.btn--lg { padding: 16px 30px; min-height: 61px; font-size: var(--fs-body); }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

.dca-inline-link {
  background: none; border: 0; padding: 0;
  color: var(--teal-600); font: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
.dca-inline-link:hover { color: var(--teal-700); }

/* ================================================================== BADGES */
/* Eleven levels, three tiers. No level gets a colour of its own. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--t1 { background: var(--surface-3); color: var(--ink-700); border-color: var(--line); }
.badge--t2 { background: var(--teal-050); color: var(--teal-700); border-color: #CFEBE9; }
.badge--t3 { background: #E7EDF4; color: var(--navy-700); border-color: #CFDBE7; }

.badge--onnavy.badge--t1 { background: rgba(238,244,248,0.10); color: var(--on-navy-dim); border-color: rgba(238,244,248,0.18); }
.badge--onnavy.badge--t2 { background: rgba(47,192,184,0.16); color: var(--teal-300); border-color: rgba(47,192,184,0.3); }
.badge--onnavy.badge--t3 { background: rgba(238,244,248,0.10); color: var(--on-navy); border-color: rgba(238,244,248,0.22); }

/* Small neutral metadata pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-600);
  white-space: nowrap;
}
.pill svg { color: var(--ink-400); flex: none; }

.langflag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-600);
}
.langflag i {
  font-style: normal;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--white);
  line-height: 1.2;
}

.price {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.price sup {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-left: 3px;
  color: var(--ink-500);
  top: -0.55em;
}

/* =================================================================== CARDS */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card--hover:hover {
  box-shadow: var(--sh-2);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.card__pad { padding: var(--s-6); }

/* =================================================================== FORMS */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-700);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}
.field__label .opt {
  font-weight: 400;
  font-size: var(--fs-micro);
  color: var(--ink-400);
  text-transform: lowercase;
  letter-spacing: 0;
}
.input, .select, .textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--ink-900);
  font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px rgba(20, 169, 162, 0.15);
}
.textarea { min-height: 142px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234E6579' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}
.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea { border-color: var(--alert); }
.field__error { font-size: var(--fs-xs); color: var(--alert); }

.grid-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}
.grid-fields .span-2 { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .grid-fields { grid-template-columns: 1fr; }
  .grid-fields .span-2 { grid-column: auto; }
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.5;
  cursor: pointer;
}
.check input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 23px; height: 23px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--white);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check input[type="checkbox"]:checked {
  background: var(--navy-800) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color: var(--navy-800);
}
.check input[type="checkbox"]:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }

.radio-card {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.radio-card:hover { border-color: var(--line-strong); }
.radio-card input[type="radio"] {
  appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.radio-card input[type="radio"]:checked {
  border-color: var(--navy-800);
  box-shadow: inset 0 0 0 5px var(--navy-800);
}
.radio-card:has(input:checked) { border-color: var(--navy-800); background: var(--surface-2); }
.radio-card__t { font-weight: 700; font-size: var(--fs-sm); color: var(--navy-800); }
.radio-card__b { font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }

/* Segmented control — language variation on the product page */
.segment {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-2);
  gap: 3px;
}
.segment button {
  border: 0;
  background: transparent;
  padding: 9px 19px;
  border-radius: 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-600);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segment button[aria-pressed="true"] {
  background: var(--white);
  color: var(--navy-800);
  box-shadow: var(--sh-1);
}
.segment button[disabled] { opacity: 0.35; pointer-events: none; }

/* Toggle switch — cookie preferences */
.switch {
  appearance: none;
  flex: none;
  width: 50px; height: 29px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  position: relative;
  transition: background var(--dur) var(--ease);
  cursor: pointer;
  border: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--sh-1);
  transition: transform var(--dur) var(--ease);
}
.switch:checked { background: var(--teal-500); }
.switch:checked::after { transform: translateX(21px); }
.switch[disabled] { background: var(--teal-500); opacity: 0.45; cursor: not-allowed; }

/* ================================================================== CHIPS */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--ink-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: all var(--dur) var(--ease);
}
.chip:hover { border-color: var(--navy-600); color: var(--navy-800); }
.chip[aria-pressed="true"] {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}
.chip[aria-pressed="true"]:hover { background: var(--navy-700); border-color: var(--navy-700); }
.chip__n {
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  opacity: 0.6;
}

.chip--removable { padding-right: 8px; }
.chip--removable .x {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
}

/* ================================================================== NOTICE */
.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  color: var(--ink-600);
  line-height: 1.55;
}
.notice svg { flex: none; color: var(--ink-400); margin-top: 3px; }
.notice--ok    { background: var(--ok-bg);    border-color: #C7E5D9; color: #14604D; }
.notice--ok svg { color: var(--ok); }
.notice--warn  { background: var(--warn-bg);  border-color: #EEDCB6; color: #7B5210; }
.notice--warn svg { color: var(--warn); }

/* Editable-content marker — visible while reviewing the mockup, switched off
   with the prototype toggle for client presentation. */
.editable {
  position: relative;
  padding-left: var(--s-5);
  border-left: 2px dashed var(--teal-400);
}
.editable__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--s-2);
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--teal-025);
  border: 1px solid #CFEBE9;
  color: var(--teal-700);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
body.no-notes .editable { padding-left: 0; border-left: 0; }
body.no-notes .editable__tag { display: none; }

/* ================================================================== TABLES */
.table-scroll { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
table.data th, table.data td {
  text-align: left;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
}
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data th.num { text-align: right; }

/* ==================================================================== LOGO
   A pure wordmark — no symbol. "DataConfo" in the display serif, a hairline,
   then ACADEMY letterspaced in the accent. The hairline is what turns two
   words into one lockup. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo__text { display: flex; flex-direction: row; align-items: baseline; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-size: 1.62rem;
  letter-spacing: -0.015em;
  color: var(--navy-800);
}
.logo__sub {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--line-strong);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.logo--light .logo__name { color: var(--white); }
.logo--light .logo__sub  { color: var(--teal-300); border-left-color: var(--navy-line); }
.logo--lg .logo__name { font-size: 2.2rem; }
.logo--lg .logo__sub  { font-size: var(--fs-xs); letter-spacing: 0.3em; }

/* Narrow screens: stack the lockup so it keeps its width in check. */
@media (max-width: 560px) {
  .site-header .logo__text { flex-direction: column; align-items: flex-start; }
  .site-header .logo__sub {
    margin-left: 0; padding-left: 0; border-left: 0;
    margin-top: 4px; letter-spacing: 0.2em;
  }
}

/* ================================================================= UTILITY */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: var(--r-2);
  background: var(--teal-050);
  color: var(--teal-700);
  flex: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-tile--navy { background: var(--navy-800); color: var(--teal-300); }
.icon-tile--ghost { background: rgba(47,192,184,0.14); color: var(--teal-300); }
.icon-tile--lg { width: 62px; height: 62px; border-radius: var(--r-3); }

.toast-host {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 13px 22px;
  border-radius: var(--r-pill);
  background: var(--navy-800);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: var(--sh-3);
  animation: toast-in 240ms var(--ease);
}
.toast svg { color: var(--teal-300); flex: none; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}