/*! KamUmri Tools v0.2.0 */
.ku {
  --ku-accent: var(--global-palette1, #0F5E5B);
  --ku-accent-dark: var(--global-palette2, #0B4845);
  --ku-ink: var(--global-palette3, #14212B);
  --ku-text: var(--global-palette4, #2C3A45);
  --ku-muted: var(--global-palette5, #5B6B78);
  --ku-line: var(--global-palette7, #E3E8EC);
  --ku-page: var(--global-palette8, #F7F9FA);
  --ku-field-line: #C5CFD7;
  --ku-soft: #E6F2F1;
  --ku-amber: #D98A1F;
  --ku-amber-soft: #FCF4E8;
  --ku-error: #B42318;
  --ku-error-soft: #FEF3F2;
  max-width: 720px;
  margin: 0 0 2.5rem;
  color: var(--ku-text);
}
.ku *, .ku *::before, .ku *::after { box-sizing: border-box; }
.ku-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Form panel */
.ku .ku-form {
  background: #fff;
  border: 1px solid var(--ku-line);
  border-radius: 16px;
  padding: 20px 16px 20px;
}
@media (min-width: 640px) { .ku .ku-form { padding: 28px; } }

/* Calendar switch */
.ku .ku-cal {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 20px;
  padding: 4px;
  border: 1px solid var(--ku-line);
  border-radius: 999px;
  background: var(--ku-page);
  min-width: 0;
}
.ku-cal__opt { position: relative; margin: 0; cursor: pointer; }
.ku-cal__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.ku-cal__opt span {
  display: block;
  padding: 8px 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ku-muted);
}
.ku-cal__opt input:checked + span { background: var(--ku-accent); color: #fff; }
.ku-cal__opt input:focus-visible + span { outline: 2px solid var(--ku-accent); outline-offset: 2px; }

/* Date fields */
.ku .ku-date {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1.3fr;
  gap: 10px;
  align-items: end;
}
.ku .ku-date + .ku-date { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--ku-line); }
.ku .ku-date__label {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ku-ink);
}
.ku .ku-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ku-muted);
}
.ku .ku-field input,
.ku .ku-field select {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 10px;
  font: inherit;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ku-ink);
  background-color: #fff;
  border: 1px solid var(--ku-field-line);
  border-radius: 12px;
  box-shadow: none;
}
.ku .ku-field input { text-align: center; }
.ku .ku-field select { font-size: 17px; padding-inline: 10px 6px; cursor: pointer; }
.ku .ku-field input::placeholder { color: #A7B3BD; opacity: 1; }
.ku .ku-field input:focus,
.ku .ku-field select:focus {
  outline: none;
  border-color: var(--ku-accent);
  box-shadow: 0 0 0 3px rgba(15, 94, 91, .18);
}
.ku .ku-field [aria-invalid="true"] { border-color: var(--ku-error); }

/* "Age on another date" */
.ku .ku-asof { margin-top: 18px; }
.ku .ku-asof summary {
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ku-accent);
  list-style: none;
}
.ku .ku-asof summary::-webkit-details-marker { display: none; }
.ku .ku-asof summary::before { content: "+ "; }
.ku .ku-asof[open] summary::before { content: "− "; }
.ku .ku-asof summary:focus-visible { outline: 2px solid var(--ku-accent); outline-offset: 3px; border-radius: 4px; }
.ku .ku-asof[open] .ku-date { margin-top: 14px; }
.ku .ku-asof__note { margin: 10px 0 0; font-size: 14px; color: var(--ku-muted); }

/* Error + submit */
.ku .ku-error {
  margin: 18px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ku-error-soft);
  color: var(--ku-error);
  font-size: 16px;
  line-height: 1.6;
}
.ku .ku-error[hidden] { display: none; }
.ku .ku-btn {
  display: block;
  width: 100%;
  height: 56px;
  margin: 20px 0 0;
  padding: 0 24px;
  border: 0;
  border-radius: 12px;
  background: var(--ku-accent);
  color: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
.ku .ku-btn:hover { background: var(--ku-accent-dark); color: #fff; }
.ku .ku-btn:focus-visible { outline: 3px solid var(--ku-accent); outline-offset: 3px; }

/* Result */
.ku .ku-result {
  margin-top: 20px;
  border: 1px solid var(--ku-line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  scroll-margin-top: 16px;
}
.ku .ku-result[hidden] { display: none; }
.ku .ku-result.ku-in { animation: ku-in .28s ease-out; }
@keyframes ku-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ku .ku-result.ku-in { animation: none; } }

.ku .ku-res__head { padding: 22px 20px 20px; background: var(--ku-soft); }
.ku .ku-res__lead { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--ku-accent-dark); }
.ku .ku-res__age {
  margin: 0;
  font-size: clamp(27px, 6.4vw, 38px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ku-ink);
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.ku .ku-res__age:focus { outline: none; }
.ku .ku-nw { white-space: nowrap; }
.ku .ku-res__alt { margin: 10px 0 0; font-size: 17px; line-height: 1.7; color: var(--ku-text); }

.ku .ku-res__bday {
  padding: 16px 20px;
  border-inline-start: 4px solid var(--ku-amber);
  background: var(--ku-amber-soft);
}
.ku .ku-res__bday p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--ku-ink); }
.ku .ku-res__bday p + p { margin-top: 6px; color: var(--ku-text); }

.ku .ku-res__list { margin: 0; padding: 4px 20px; }
.ku .ku-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ku-line);
}
.ku .ku-row:last-child { border-bottom: 0; }
.ku .ku-row dt { flex: none; margin: 0; font-size: 15px; font-weight: 400; color: var(--ku-muted); }
.ku .ku-row dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ku-ink);
  text-align: end;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) {
  .ku .ku-res__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ku .ku-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ku-line); }
  .ku--diff .ku-res__list { display: block; }
}

.ku .ku-res__actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--ku-line);
}
.ku .ku-act {
  flex: 1;
  height: 46px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--ku-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ku-accent);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
.ku .ku-act:hover { border-color: var(--ku-accent); background: #fff; color: var(--ku-accent-dark); }
.ku .ku-act:focus-visible { outline: 2px solid var(--ku-accent); outline-offset: 2px; }

.ku .ku-noscript { margin: 12px 0 0; color: var(--ku-muted); }

/* Birth-year tables */
.ku--years { max-width: 720px; }
.ku .ku-lookup { margin-bottom: 20px; }
.ku .ku-lookup__row { display: flex; gap: 10px; margin-top: 8px; }
.ku .ku-lookup__row input {
  flex: 1; min-width: 0; height: 54px; margin: 0; padding: 0 12px;
  font: inherit; font-size: 20px; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--ku-ink); background: #fff; border: 1px solid var(--ku-field-line); border-radius: 12px; box-shadow: none;
}
.ku .ku-lookup__row input:focus { outline: none; border-color: var(--ku-accent); box-shadow: 0 0 0 3px rgba(15, 94, 91, .18); }
.ku .ku-lookup__row .ku-btn { width: auto; margin: 0; height: 54px; font-size: 17px; white-space: nowrap; }
.ku .ku-lookup__out {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 10px;
  border-inline-start: 4px solid var(--ku-amber); background: var(--ku-amber-soft);
  font-size: 17px; line-height: 1.7; color: var(--ku-ink);
}
.ku .ku-lookup__out--err { border-inline-start-color: var(--ku-error); background: var(--ku-error-soft); color: var(--ku-error); }
.ku .ku-lookup__out[hidden] { display: none; }
.ku .ku-years__note { margin: 0 0 8px; font-size: 16px; line-height: 1.8; color: var(--ku-text); }
.ku--years h2 { margin: 28px 0 12px; scroll-margin-top: 16px; }
.ku .ku-table-wrap { overflow-x: auto; border: 1px solid var(--ku-line); border-radius: 12px; }
.ku .ku-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.ku .ku-table th, .ku .ku-table td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--ku-line); text-align: start; white-space: nowrap; }
@media (max-width: 420px) { .ku .ku-table { font-size: 15px; } .ku .ku-table th, .ku .ku-table td { padding: 10px 8px; } }
.ku .ku-table thead th { background: var(--ku-page); font-size: 14px; font-weight: 600; color: var(--ku-muted); white-space: normal; line-height: 1.4; }
.ku .ku-table tbody th { font-weight: 600; color: var(--ku-ink); }
.ku .ku-table tbody tr:last-child > * { border-bottom: 0; }
.ku .ku-table tbody tr { scroll-margin: 80px; }
.ku .ku-table tr.ku-hit > * { background: var(--ku-amber-soft); }

/* Hijri unavailable / out-of-range states (v0.5.0-dev1) */
.ku .ku-cal__opt--off { cursor: not-allowed; }
.ku .ku-cal__opt--off input { cursor: not-allowed; }
.ku .ku-cal__opt--off span { opacity: .45; }
.ku .ku-cal__note { margin: -10px 0 18px; font-size: 14px; line-height: 1.7; color: var(--ku-muted); }
.ku .ku-error.ku-error--info {
  background: var(--ku-page);
  color: var(--ku-text);
  border-inline-start: 4px solid var(--ku-accent);
}
.ku .ku-res__alt.ku-res__note { font-size: 15px; color: var(--ku-muted); }