/* ==========================================================================
   InsureKenya — component layer
   Rule of thumb: page layout and one-off spacing live in Tailwind utilities.
   Anything that must PRINT, REPEAT, or be THEMED lives here as a real class.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: var(--font-display); }
.font-mono, .mono { font-family: var(--font-mono); }
h1, h2, h3 { letter-spacing: -0.015em; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* --- cards (ported from the old .insurance-card) -------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgb(var(--brand-300-rgb));
}
.card--selected {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: var(--shadow-md);
}
.card--flagship {
  border-color: rgb(var(--brand-400-rgb));
  box-shadow: 0 0 0 3px rgb(var(--brand-500-rgb) / .12), var(--shadow-md);
}

/* --- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .625rem 1.125rem;
  border-radius: var(--r-md);
  font-weight: 600; font-size: .9375rem; line-height: 1.25rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              transform .12s ease, box-shadow .18s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .6; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--brand-600); color: #fff; }
.btn--primary:hover:not([disabled]) { background: var(--brand-700); }
.btn--accent { background: var(--accent-500); color: var(--ink-900); }
.btn--accent:hover:not([disabled]) { background: var(--accent-600); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink-700); border-color: var(--line); }
.btn--ghost:hover:not([disabled]) { background: var(--surface-2); border-color: var(--ink-300); }
.btn--quiet { background: transparent; color: var(--ink-500); }
.btn--quiet:hover:not([disabled]) { background: var(--surface-2); color: var(--ink-900); }
.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover:not([disabled]) { filter: brightness(.92); }
.btn--sm { padding: .375rem .75rem; font-size: .8125rem; border-radius: var(--r-sm); }
.btn--lg { padding: .875rem 1.75rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }

/* --- form fields ---------------------------------------------------------- */
.field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--ink-700); margin-bottom: .375rem;
}
.field__hint { font-size: .75rem; color: var(--ink-500); margin-top: .3125rem; }
.field__error { font-size: .8125rem; color: var(--danger); margin-top: .375rem; font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-900);
  font-family: inherit; font-size: .9375rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: var(--ring);
}
.input.is-invalid, .select.is-invalid { border-color: var(--danger); }
.input--lg { padding: .875rem 1rem; font-size: 1.125rem; }
.textarea { min-height: 5.5rem; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238D9B92' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right .75rem center;
  background-size: .75rem; padding-right: 2.25rem;
}

/* --- pills / status chips ------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: .3125rem;
  padding: .1875rem .5625rem;
  border-radius: var(--r-full);
  font-size: .75rem; font-weight: 600; line-height: 1.125rem;
  white-space: nowrap;
}
.pill--paid, .pill--active, .pill--approved,
.pill--issued, .pill--confirmed { background: rgb(var(--ok-rgb) / .12); color: rgb(var(--brand-700-rgb)); }
.pill--due, .pill--pending, .pill--grace, .pill--requested,
.pill--under-review, .pill--docs-required { background: rgb(var(--warn-rgb) / .13); color: rgb(var(--accent-700-rgb)); }
.pill--overdue, .pill--lapsed, .pill--rejected,
.pill--reversed { background: rgb(var(--danger-rgb) / .10); color: var(--danger); }
.pill--submitted, .pill--draft, .pill--info { background: rgb(var(--info-rgb) / .10); color: var(--info); }
.pill--neutral { background: var(--surface-2); color: var(--ink-500); }
.pill--brand { background: rgb(var(--brand-500-rgb) / .12); color: rgb(var(--brand-700-rgb)); }
.pill--accent { background: rgb(var(--accent-500-rgb) / .18); color: rgb(var(--accent-700-rgb)); }
.pill--you { background: var(--ink-900); color: #fff; }

/* --- stat tiles ----------------------------------------------------------- */
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1rem 1.125rem;
}
.stat__label {
  font-size: .75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .045em; color: var(--ink-500); margin-bottom: .375rem;
}
.stat__value { font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: var(--ink-900); }
.stat__value--sm { font-size: 1.25rem; }
.stat__sub { font-size: .8125rem; color: var(--ink-500); margin-top: .25rem; }

/* --- progress / meter ----------------------------------------------------- */
.meter { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-full); background: var(--brand-500); transition: width .4s ease; }
.meter__fill--warn { background: var(--accent-500); }
.meter__fill--danger { background: var(--danger); }

/* --- simple tables -------------------------------------------------------- */
.table-simple { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-simple th {
  text-align: left; font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-500);
  padding: .625rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-simple td { padding: .75rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.table-simple tbody tr:last-child td { border-bottom: 0; }
.table-simple tbody tr.is-clickable { cursor: pointer; }
.table-simple tbody tr.is-clickable:hover { background: var(--surface-2); }
.table-simple tbody tr.is-selected { background: var(--brand-50); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- modal (single root; only ever closes its own node) -------------------- */
.ik-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgb(var(--ink-900-rgb) / .55);
  animation: ikFade .18s ease;
}
.ik-modal__panel {
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 34rem; max-height: 90vh;
  display: flex; flex-direction: column;
  animation: ikRise .22s cubic-bezier(.2,.8,.3,1);
}
.ik-modal__panel--wide { max-width: 52rem; }
.ik-modal__panel--narrow { max-width: 26rem; }
.ik-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--line-2);
}
.ik-modal__title { font-size: 1.125rem; font-weight: 700; }
.ik-modal__body { padding: 1.25rem 1.5rem; overflow-y: auto; }
.ik-modal__foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .625rem;
  padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--line-2);
}
@keyframes ikFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ikRise { from { opacity: 0; transform: translateY(12px) scale(.985) } to { opacity: 1; transform: none } }

/* --- toasts --------------------------------------------------------------- */
#ik-toasts {
  position: fixed; top: 1rem; right: 1rem; z-index: 80;
  display: flex; flex-direction: column; gap: .5rem;
  max-width: min(22rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .75rem .875rem; border-radius: var(--r-md); box-shadow: var(--shadow-md);
  color: #fff; font-size: .875rem; font-weight: 500;
  animation: ikRise .2s ease;
}
.toast--success { background: var(--brand-600); }
.toast--error   { background: var(--danger); }
.toast--warning { background: var(--accent-600); }
.toast--info    { background: var(--ink-800); }
.toast.is-leaving { opacity: 0; transform: translateX(12px); transition: opacity .25s ease, transform .25s ease; }

.fade-in { animation: fadeIn .45s ease-in; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

/* --- illustrations -------------------------------------------------------
   The SVG root carries the outline, so each shape only has to declare its
   fill. Five values, applied via classes, never hardcoded on the element. */
.ill {
  width: 100%; height: auto; display: block;
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ill-tint   { fill: var(--brand-100); }
.ill-fill   { fill: var(--brand-300); }
.ill-accent { fill: var(--accent-500); }
.ill-paper  { fill: #fff; }
.ill-ink    { fill: none; }
.ill-flat   { stroke: none; }            /* shapes that carry no outline */
/* One rule recolors all ten illustrations for use on brand-colored panels. */
[data-ill="on-dark"] .ill        { stroke: rgb(var(--brand-100-rgb)); }
[data-ill="on-dark"] .ill-tint   { fill: rgb(var(--brand-700-rgb)); }
[data-ill="on-dark"] .ill-fill   { fill: rgb(var(--brand-500-rgb)); }
[data-ill="on-dark"] .ill-paper  { fill: rgb(var(--brand-800-rgb)); }

/* --- dropzone (harvested from the legacy group purchase flow) -------------- */
.dropzone {
  border: 2px dashed var(--line); border-radius: var(--r-md);
  padding: 1.25rem; text-align: center; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.dropzone:hover { border-color: rgb(var(--brand-400-rgb)); background: var(--brand-50); }
.dropzone.has-file { border-style: solid; border-color: var(--brand-500); background: var(--brand-50); }

/* --- demo bar ------------------------------------------------------------- */
#demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem;
  padding: .5rem .875rem;
  background: var(--ink-900); color: rgb(var(--ink-300-rgb));
  font-size: .75rem;
}
#demo-bar .demo-bar__tag {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-400);
}
#demo-bar button {
  color: #fff; text-decoration: underline; text-underline-offset: 2px;
  background: none; border: 0; cursor: pointer; font-size: inherit; font-family: inherit;
}
#demo-bar button:hover { color: var(--accent-400); }
#demo-bar code { font-family: var(--font-mono); color: var(--accent-400); }

.storage-warning {
  background: rgb(var(--accent-500-rgb) / .16);
  border-bottom: 1px solid rgb(var(--accent-600-rgb) / .4);
  color: rgb(var(--accent-700-rgb));
  padding: .5rem .875rem; font-size: .8125rem; font-weight: 500; text-align: center;
}

/* --- site chrome ---------------------------------------------------------- */
.site-nav {
  background: rgb(var(--surface-rgb) / .92);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.nav-link {
  color: var(--ink-700); font-weight: 500; font-size: .9375rem;
  text-decoration: none; padding: .375rem .125rem; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--ink-900); border-bottom-color: rgb(var(--brand-400-rgb)); }
.site-subnav { border-top: 1px solid var(--line); background: rgb(var(--brand-500-rgb) / .06); }
.site-subnav > div { height: 2.75rem; white-space: nowrap; }
.site-subnav .nav-link { font-size: .875rem; padding: .25rem .125rem; }
.site-subnav__label {
  color: rgb(var(--brand-700-rgb)); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.site-subnav__label i { margin-right: .25rem; }

.site-footer { background: var(--ink-900); color: rgb(var(--ink-300-rgb)); font-size: .875rem; }
.site-footer a { color: rgb(var(--brand-200-rgb)); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

/* --- portal shell --------------------------------------------------------- */
.portal-side { background: var(--ink-900); color: rgb(var(--ink-300-rgb)); }
.portal-side__link {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .875rem; border-radius: var(--r-md);
  color: rgb(var(--ink-300-rgb)); text-decoration: none;
  font-size: .9375rem; font-weight: 500;
}
.portal-side__link:hover { background: rgb(255 255 255 / .07); color: #fff; }
.portal-side__link.is-active { background: var(--brand-600); color: #fff; }
.portal-side__link .badge {
  margin-left: auto; background: var(--accent-500); color: var(--ink-900);
  border-radius: var(--r-full); padding: 0 .4375rem;
  font-size: .6875rem; font-weight: 700; line-height: 1.125rem;
}

/* --- misc ----------------------------------------------------------------- */
.divider { height: 1px; background: var(--line); border: 0; }
.copyable { cursor: pointer; }
.shake { animation: ikShake .4s ease; }
@keyframes ikShake {
  10%, 90% { transform: translateX(-2px) }
  20%, 80% { transform: translateX(4px) }
  30%, 50%, 70% { transform: translateX(-6px) }
  40%, 60% { transform: translateX(6px) }
}
.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;
}

/* --- medical: tiers, plan cards, segmented choices ------------------------
   Tier 1/2/3 is hospital access, not quality: Tier 1 can use the top private
   hospitals, Tier 3 is a micro panel. Colour steps down in weight, never to
   red — a Tier 3 plan is a sensible choice, not a warning. */
.pill--tier1 { background: rgb(var(--brand-700-rgb)); color: #fff; }
.pill--tier2 { background: rgb(var(--brand-500-rgb) / .14); color: rgb(var(--brand-700-rgb)); }
.pill--tier3 { background: rgb(var(--accent-500-rgb) / .20); color: rgb(var(--accent-700-rgb)); }
.pill--on-request { background: var(--surface-2); color: var(--ink-700); border: 1px dashed var(--ink-300); }
.pill--with-underwriter, .pill--exam-requested, .pill--awaiting-payment { background: rgb(var(--warn-rgb) / .13); color: rgb(var(--accent-700-rgb)); }
.pill--declined { background: rgb(var(--danger-rgb) / .10); color: var(--danger); }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.seg > button, .seg > a {
  padding: .5rem .875rem; font-size: .875rem; font-weight: 600; color: var(--ink-700);
  background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer;
}
.seg > button:first-child, .seg > a:first-child { border-left: 0; }
.seg > button:hover, .seg > a:hover { background: var(--surface-2); }
.seg > button[aria-pressed="true"], .seg > a[aria-current="page"] { background: var(--brand-600); color: #fff; }

.family-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .75rem .25rem .25rem; border-radius: var(--r-full);
  background: var(--ink-900); color: #fff; font-weight: 600; font-size: .875rem;
}
.family-chip b {
  font-family: var(--font-mono); background: var(--accent-500); color: var(--ink-900);
  border-radius: var(--r-full); padding: .125rem .625rem;
}

.plan-card { position: relative; }
.plan-card--dim { opacity: .78; }
.plan-card__badge {
  position: absolute; top: -.75rem; left: 1.25rem;
  background: var(--accent-500); color: var(--ink-900);
  font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .1875rem .625rem; border-radius: var(--r-full); box-shadow: var(--shadow-sm);
}
.uw-mono {
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: rgb(var(--brand-700-rgb));
  font-size: .75rem; font-weight: 800; letter-spacing: .02em; border: 1px solid rgb(var(--brand-200-rgb));
}
.hosp-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; }
.hosp-check i { margin-top: .1875rem; }

.compare-grid th, .compare-grid td { min-width: 11rem; }
.compare-grid td:first-child, .compare-grid th:first-child { min-width: 12rem; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.compare-grid tr.section td { background: var(--surface-2); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); }
.compare-grid tr.total td { font-weight: 700; border-top: 2px solid var(--ink-900); }

.step-rail__dot { width: 1.75rem; height: 1.75rem; }
.typeahead { position: relative; }
.typeahead__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); max-height: 18rem; overflow-y: auto;
}
.typeahead__item { display: block; width: 100%; text-align: left; padding: .5rem .75rem; font-size: .875rem; background: none; border: 0; cursor: pointer; }
.typeahead__item:hover, .typeahead__item.is-active { background: var(--brand-50); }