/* ===================================================================
   Tiliaderm — Shared component styles
   Loaded by all UI kits & slides on top of colors_and_type.css
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ---- Editorial layout primitives -------------------------------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ---- Brand wordmark inline -------------------------------------- */
/* ---- Brand wordmark inline (Leaf + TILIADERM) ---- */
.t-logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--tilia-800);
}
.t-logo .t-leaf {
  display: inline-block; width: 1.55em; height: 1.7em; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2081.8%2097.9%22%20width%3D%2281.8%22%20height%3D%2297.9%22%3E%0A%20%20%0A%20%20%3Cdefs%3E%0A%20%20%20%20%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20fill%3D%22%231F3A2E%22%20d%3D%22M78.4%2C35.3C72.9%2C20.2%2C54.1%2C2.4%2C41.2.1h-.6c0-.1-.5.3-.5.3C30.5%2C7.2%2C7.8%2C24.5%2C3.4%2C38.5c-4.5%2C11.6-5.9%2C28.5%2C5.2%2C38.1%2C8.7%2C8.4%2C21.6%2C9.3%2C29.9%2C5.1v13.8c0%2C.6.2%2C1.2.6%2C1.6.5.4%2C1.1.7%2C1.7.7h0c1.3%2C0%2C2.4-1.1%2C2.4-2.3v-14.2c4.9%2C2%2C9.5%2C3%2C13.8%2C3s11.2-2%2C15.4-5.8c9.7-9%2C12.2-26.8%2C6-43.2ZM76.5%2C59.8v.2c-.3%2C7.4-3.9%2C13.4-10.3%2C16.8-6.9%2C3.7-15.9%2C3.5-23-.5v-14.4s1.7-1.7%2C1.7-1.7c4.3-4.4%2C6.9-7%2C11.6-11.4.5-.4.7-1%2C.7-1.7%2C0-.6-.3-1.3-.7-1.7-.9-.9-2.4-.9-3.3%2C0-3.9%2C3.6-6.2%2C6-9.5%2C9.3-.2.2-.3.3-.5.5v-11.2s1.8-1.9%2C1.8-1.9c1.2-1.3%2C2.3-2.4%2C3.8-4%2C.5-.5.7-1.1.7-1.8%2C0-.6-.3-1.2-.8-1.6-1-.8-2.4-.7-3.3.2-.9.9-1.5%2C1.6-2.2%2C2.3v-13.2c0-.7-.3-1.3-.8-1.7-.5-.4-1.2-.6-1.9-.5-1.2.2-2.1%2C1.3-2.1%2C2.4v13.8c-.7-.6-1.4-1.1-2.4-1.9-.9-.8-2.4-.6-3.3.3-.5.5-.7%2C1.1-.7%2C1.8%2C0%2C.6.3%2C1.2.8%2C1.6%2C1.6%2C1.3%2C2.7%2C2.2%2C3.9%2C3.1l1.6%2C1.3v11.5c-.2-.2-.4-.3-.6-.5-3.2-2.6-5.5-4.6-9.3-8-.9-.8-2.4-.8-3.3%2C0-.5.4-.8%2C1.1-.8%2C1.7%2C0%2C.6.3%2C1.2.7%2C1.7%2C4.7%2C4.3%2C7.5%2C6.5%2C11.6%2C10l1.6%2C1.3v14.3c-8.2%2C5.7-20.2%2C3.1-26.5-3-9.4-8.2-8.1-23.1-4.1-33.5C12.1%2C26.9%2C32.8%2C11.4%2C41.3%2C5.1c19.5%2C5.7%2C39.4%2C31%2C35.3%2C54.7Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2081.8%2097.9%22%20width%3D%2281.8%22%20height%3D%2297.9%22%3E%0A%20%20%0A%20%20%3Cdefs%3E%0A%20%20%20%20%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20fill%3D%22%231F3A2E%22%20d%3D%22M78.4%2C35.3C72.9%2C20.2%2C54.1%2C2.4%2C41.2.1h-.6c0-.1-.5.3-.5.3C30.5%2C7.2%2C7.8%2C24.5%2C3.4%2C38.5c-4.5%2C11.6-5.9%2C28.5%2C5.2%2C38.1%2C8.7%2C8.4%2C21.6%2C9.3%2C29.9%2C5.1v13.8c0%2C.6.2%2C1.2.6%2C1.6.5.4%2C1.1.7%2C1.7.7h0c1.3%2C0%2C2.4-1.1%2C2.4-2.3v-14.2c4.9%2C2%2C9.5%2C3%2C13.8%2C3s11.2-2%2C15.4-5.8c9.7-9%2C12.2-26.8%2C6-43.2ZM76.5%2C59.8v.2c-.3%2C7.4-3.9%2C13.4-10.3%2C16.8-6.9%2C3.7-15.9%2C3.5-23-.5v-14.4s1.7-1.7%2C1.7-1.7c4.3-4.4%2C6.9-7%2C11.6-11.4.5-.4.7-1%2C.7-1.7%2C0-.6-.3-1.3-.7-1.7-.9-.9-2.4-.9-3.3%2C0-3.9%2C3.6-6.2%2C6-9.5%2C9.3-.2.2-.3.3-.5.5v-11.2s1.8-1.9%2C1.8-1.9c1.2-1.3%2C2.3-2.4%2C3.8-4%2C.5-.5.7-1.1.7-1.8%2C0-.6-.3-1.2-.8-1.6-1-.8-2.4-.7-3.3.2-.9.9-1.5%2C1.6-2.2%2C2.3v-13.2c0-.7-.3-1.3-.8-1.7-.5-.4-1.2-.6-1.9-.5-1.2.2-2.1%2C1.3-2.1%2C2.4v13.8c-.7-.6-1.4-1.1-2.4-1.9-.9-.8-2.4-.6-3.3.3-.5.5-.7%2C1.1-.7%2C1.8%2C0%2C.6.3%2C1.2.8%2C1.6%2C1.6%2C1.3%2C2.7%2C2.2%2C3.9%2C3.1l1.6%2C1.3v11.5c-.2-.2-.4-.3-.6-.5-3.2-2.6-5.5-4.6-9.3-8-.9-.8-2.4-.8-3.3%2C0-.5.4-.8%2C1.1-.8%2C1.7%2C0%2C.6.3%2C1.2.7%2C1.7%2C4.7%2C4.3%2C7.5%2C6.5%2C11.6%2C10l1.6%2C1.3v14.3c-8.2%2C5.7-20.2%2C3.1-26.5-3-9.4-8.2-8.1-23.1-4.1-33.5C12.1%2C26.9%2C32.8%2C11.4%2C41.3%2C5.1c19.5%2C5.7%2C39.4%2C31%2C35.3%2C54.7Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E") no-repeat center/contain;
}
.t-logo .t-word {
  font-family: var(--font-brand);
  font-weight: 500; font-size: 26px;
  letter-spacing: 0.23em; text-transform: uppercase;
  white-space: nowrap; line-height: 1; color: inherit;
}

/* ---- Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  text-decoration: none; letter-spacing: 0.005em;
}
.btn-primary { background: var(--tilia-700); color: var(--paper); }
.btn-primary:hover { background: var(--tilia-800); }
.btn-secondary { background: transparent; color: var(--tilia-800); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--tilia-700); background: var(--bg-brand-soft); }
.btn-ghost { background: transparent; color: var(--tilia-700); padding: 10px 12px; }
.btn-ghost:hover { background: var(--tilia-100); }
.btn-accent { background: var(--honey-600); color: var(--paper); }
.btn-accent:hover { background: var(--honey-700); }
.btn-lg { padding: 14px 24px; font-size: 15px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---- Pills & tags ---------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.pill-brand   { background: var(--tilia-100); color: var(--tilia-800); }
.pill-accent  { background: var(--honey-100); color: var(--honey-700); }
.pill-neutral { background: var(--stone-100); color: var(--stone-800); }
.pill-success { background: #E2EDE3; color: var(--tilia-600); }
.pill-warning { background: var(--honey-100); color: var(--honey-700); }
.pill-outline { background: transparent; color: var(--stone-800); border: 1px solid var(--border-strong); }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--tilia-100); color: var(--tilia-800);
}

/* ---- Eyebrow --------------------------------------------------- */
.eyebrow {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fg-brand);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; display: inline-block; width: 18px; height: 1px;
  background: currentColor; opacity: 0.6;
}

/* ---- Card ------------------------------------------------------ */
.card {
  background: var(--paper-pure); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.card-hover { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* ---- Form inputs ----------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12px; font-weight: 500; color: var(--fg-2); letter-spacing: 0.02em; }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 14px; color: var(--fg-1);
  background: var(--paper-pure); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 10px 12px; outline: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--tilia-600); box-shadow: 0 0 0 3px rgba(61, 107, 90, 0.18);
}

/* ---- Icon (lucide stroke style) -------------------------------- */
.ic { width: 18px; height: 18px; stroke: currentColor; fill: none;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 22px; height: 22px; }

/* ---- Botanical decorative line ---------------------------------- */
.botanical-rule {
  display: block; width: 56px; height: 1px;
  background: var(--tilia-400); margin: 0;
}
.botanical-mark::before {
  content: ""; display: inline-block;
  width: 18px; height: 22px; margin-right: 10px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2081.8%2097.9%22%20width%3D%2281.8%22%20height%3D%2297.9%22%3E%0A%20%20%0A%20%20%3Cdefs%3E%0A%20%20%20%20%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20class%3D%22st0%22%20fill%3D%22%231F3A2E%22%20d%3D%22M78.4%2C35.3C72.9%2C20.2%2C54.1%2C2.4%2C41.2.1h-.6c0-.1-.5.3-.5.3C30.5%2C7.2%2C7.8%2C24.5%2C3.4%2C38.5c-4.5%2C11.6-5.9%2C28.5%2C5.2%2C38.1%2C8.7%2C8.4%2C21.6%2C9.3%2C29.9%2C5.1v13.8c0%2C.6.2%2C1.2.6%2C1.6.5.4%2C1.1.7%2C1.7.7h0c1.3%2C0%2C2.4-1.1%2C2.4-2.3v-14.2c4.9%2C2%2C9.5%2C3%2C13.8%2C3s11.2-2%2C15.4-5.8c9.7-9%2C12.2-26.8%2C6-43.2ZM76.5%2C59.8v.2c-.3%2C7.4-3.9%2C13.4-10.3%2C16.8-6.9%2C3.7-15.9%2C3.5-23-.5v-14.4s1.7-1.7%2C1.7-1.7c4.3-4.4%2C6.9-7%2C11.6-11.4.5-.4.7-1%2C.7-1.7%2C0-.6-.3-1.3-.7-1.7-.9-.9-2.4-.9-3.3%2C0-3.9%2C3.6-6.2%2C6-9.5%2C9.3-.2.2-.3.3-.5.5v-11.2s1.8-1.9%2C1.8-1.9c1.2-1.3%2C2.3-2.4%2C3.8-4%2C.5-.5.7-1.1.7-1.8%2C0-.6-.3-1.2-.8-1.6-1-.8-2.4-.7-3.3.2-.9.9-1.5%2C1.6-2.2%2C2.3v-13.2c0-.7-.3-1.3-.8-1.7-.5-.4-1.2-.6-1.9-.5-1.2.2-2.1%2C1.3-2.1%2C2.4v13.8c-.7-.6-1.4-1.1-2.4-1.9-.9-.8-2.4-.6-3.3.3-.5.5-.7%2C1.1-.7%2C1.8%2C0%2C.6.3%2C1.2.8%2C1.6%2C1.6%2C1.3%2C2.7%2C2.2%2C3.9%2C3.1l1.6%2C1.3v11.5c-.2-.2-.4-.3-.6-.5-3.2-2.6-5.5-4.6-9.3-8-.9-.8-2.4-.8-3.3%2C0-.5.4-.8%2C1.1-.8%2C1.7%2C0%2C.6.3%2C1.2.7%2C1.7%2C4.7%2C4.3%2C7.5%2C6.5%2C11.6%2C10l1.6%2C1.3v14.3c-8.2%2C5.7-20.2%2C3.1-26.5-3-9.4-8.2-8.1-23.1-4.1-33.5C12.1%2C26.9%2C32.8%2C11.4%2C41.3%2C5.1c19.5%2C5.7%2C39.4%2C31%2C35.3%2C54.7Z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E") no-repeat center/contain;
  transform: translateY(4px) rotate(-12deg);
  opacity: 0.85;
}

/* ---- Botanical SVG placeholder thumbnail (clinical+leaf) -------- */
.thumb-clinical {
  background:
    radial-gradient(80% 80% at 75% 35%, rgba(212,169,116,0.18), transparent 60%),
    radial-gradient(60% 60% at 15% 85%, rgba(94,139,126,0.30), transparent 65%),
    linear-gradient(135deg, var(--tilia-800), var(--tilia-600));
}
.thumb-botanical {
  background:
    radial-gradient(70% 70% at 30% 40%, rgba(135,170,159,0.5), transparent 60%),
    linear-gradient(160deg, var(--tilia-700), var(--tilia-500));
}
.thumb-paper-tint {
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(184,133,74,0.16), transparent 60%),
    linear-gradient(180deg, var(--tilia-50), var(--stone-100));
}