/* ===== Age Calculator Styles =====
   Reuses style.css (hero, header, footer, content section) and timer.css
   (breadcrumb palette). This file holds Age-Calculator-specific pieces:
   card wrapper, form fields, validation messages, submit button and result
   panel (hero headline, grid of breakdowns, next-birthday row). */

/* ===== Hero spacing ===== */
.hero:has(.age-card) {
  padding-top: 14vh;
  padding-bottom: 80px;
  justify-content: flex-start;
}

/* ===== Card wrapper =====
   Same dark rounded card language as the Pomodoro tool so the Age Calculator
   visually belongs to the same family. */
.age-card {
  width: 720px;
  max-width: calc(100vw - 40px);
  background-color: var(--bg-secondary);
  border-radius: 10px;
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .age-card {
  background-color: #ffffff;
}

[data-theme="red"] .age-card,
[data-theme="teal"] .age-card,
[data-theme="blue"] .age-card,
[data-theme="purple"] .age-card,
[data-theme="green"] .age-card,
[data-theme="slate"] .age-card {
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ===== Form ===== */
.age-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.age-form-row {
  display: grid;
  gap: 16px;
}

.age-form-row--two {
  grid-template-columns: 1fr 1fr;
}

.age-form-row--with-reset {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.age-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.age-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.age-required {
  color: #ff6b6b;
  font-weight: 400;
}

[data-theme="red"] .age-required,
[data-theme="teal"] .age-required,
[data-theme="blue"] .age-required,
[data-theme="purple"] .age-required,
[data-theme="green"] .age-required,
[data-theme="slate"] .age-required {
  color: #ffb4b4;
}

.age-optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}

/* Input: date + time. Dark surface like the Pomodoro settings inputs. */
.age-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.age-input::placeholder {
  color: var(--text-secondary);
}

.age-input:hover {
  border-color: #777;
}

.age-input:focus-visible {
  border-color: #ffffff;
}

/* Hide the native picker indicator entirely - we render our own custom
   calendar button + popup so the chrome looks consistent across browsers
   and themes. */
.age-input::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

[data-theme="light"] .age-input {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
  color: var(--text-primary);
}

[data-theme="light"] .age-input:hover {
  border-color: #b8bcc4;
}

[data-theme="light"] .age-input:focus-visible {
  border-color: #000000;
}

[data-theme="red"] .age-input,
[data-theme="teal"] .age-input,
[data-theme="blue"] .age-input,
[data-theme="purple"] .age-input,
[data-theme="green"] .age-input,
[data-theme="slate"] .age-input {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

[data-theme="red"] .age-input:hover,
[data-theme="teal"] .age-input:hover,
[data-theme="blue"] .age-input:hover,
[data-theme="purple"] .age-input:hover,
[data-theme="green"] .age-input:hover,
[data-theme="slate"] .age-input:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

[data-theme="red"] .age-input:focus-visible,
[data-theme="teal"] .age-input:focus-visible,
[data-theme="blue"] .age-input:focus-visible,
[data-theme="purple"] .age-input:focus-visible,
[data-theme="green"] .age-input:focus-visible,
[data-theme="slate"] .age-input:focus-visible {
  border-color: #ffffff;
}


/* ===== Input wrap + custom calendar button =====
   Input lives inside a relatively-positioned wrap so the calendar button
   and datepicker can be absolutely positioned over/under it. The right
   padding on the input reserves space for the icon. */
.age-input-wrap {
  position: relative;
}

.age-input-wrap .age-input {
  padding-right: 38px;
}

.age-calendar-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary);
  transition: color 0.15s, background-color 0.15s;
  border-radius: 4px;
  -webkit-tap-highlight-color: transparent;
}

.age-calendar-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

.age-calendar-btn svg {
  width: 16px;
  height: 16px;
}

[data-theme="light"] .age-calendar-btn {
  color: #777;
}

[data-theme="light"] .age-calendar-btn:hover {
  color: #000;
  background-color: rgba(0, 0, 0, 0.06);
}

[data-theme="red"] .age-calendar-btn,
[data-theme="teal"] .age-calendar-btn,
[data-theme="blue"] .age-calendar-btn,
[data-theme="purple"] .age-calendar-btn,
[data-theme="green"] .age-calendar-btn,
[data-theme="slate"] .age-calendar-btn {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="red"] .age-calendar-btn:hover,
[data-theme="teal"] .age-calendar-btn:hover,
[data-theme="blue"] .age-calendar-btn:hover,
[data-theme="purple"] .age-calendar-btn:hover,
[data-theme="green"] .age-calendar-btn:hover,
[data-theme="slate"] .age-calendar-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
}

/* ===== Custom datepicker popup =====
   Anchored to the input wrap; appears below with a small gap. Hidden by
   default; toggled via the .active class. Mirrors the look of the
   bamgio.com template (header + month-year title, prev/next nav, weekday
   row, days grid with today bordered + selected highlighted, Today link
   at the bottom). */
.age-datepicker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background-color: #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  z-index: 50;
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  user-select: none;
  box-sizing: border-box;
}

.age-datepicker.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="light"] .age-datepicker {
  background-color: #ffffff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Color themes: solid #2a2a2a clashes against the accent-colored page.
   Mirror the alarm-modal pattern - translucent dark with a blur - so the
   accent shows through and the popup feels like part of the same surface. */
[data-theme="red"] .age-datepicker,
[data-theme="teal"] .age-datepicker,
[data-theme="blue"] .age-datepicker,
[data-theme="purple"] .age-datepicker,
[data-theme="green"] .age-datepicker,
[data-theme="slate"] .age-datepicker {
  background-color: rgba(0, 0, 0, 0.32);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.age-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.age-datepicker-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

[data-theme="red"] .age-datepicker-title,
[data-theme="teal"] .age-datepicker-title,
[data-theme="blue"] .age-datepicker-title,
[data-theme="purple"] .age-datepicker-title,
[data-theme="green"] .age-datepicker-title,
[data-theme="slate"] .age-datepicker-title {
  color: #ffffff;
}

.age-datepicker-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.age-datepicker-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  color: var(--text-primary);
  padding: 0;
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.age-datepicker-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .age-datepicker-nav-btn {
  color: #000;
}

[data-theme="light"] .age-datepicker-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

[data-theme="red"] .age-datepicker-nav-btn,
[data-theme="teal"] .age-datepicker-nav-btn,
[data-theme="blue"] .age-datepicker-nav-btn,
[data-theme="purple"] .age-datepicker-nav-btn,
[data-theme="green"] .age-datepicker-nav-btn,
[data-theme="slate"] .age-datepicker-nav-btn {
  color: #ffffff;
}

.age-datepicker-nav-btn svg {
  width: 12px;
  height: 12px;
}

.age-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.age-datepicker-weekday {
  font-size: 11px;
  color: var(--text-secondary);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

[data-theme="red"] .age-datepicker-weekday,
[data-theme="teal"] .age-datepicker-weekday,
[data-theme="blue"] .age-datepicker-weekday,
[data-theme="purple"] .age-datepicker-weekday,
[data-theme="green"] .age-datepicker-weekday,
[data-theme="slate"] .age-datepicker-weekday {
  color: rgba(255, 255, 255, 0.55);
}

.age-datepicker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.age-datepicker-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 13px;
  color: var(--text-primary);
  border-radius: 50%;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  padding: 0;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.age-datepicker-day:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .age-datepicker-day {
  color: #000;
}

[data-theme="light"] .age-datepicker-day:hover {
  background-color: rgba(0, 0, 0, 0.08);
}

[data-theme="red"] .age-datepicker-day,
[data-theme="teal"] .age-datepicker-day,
[data-theme="blue"] .age-datepicker-day,
[data-theme="purple"] .age-datepicker-day,
[data-theme="green"] .age-datepicker-day,
[data-theme="slate"] .age-datepicker-day {
  color: #ffffff;
}

.age-datepicker-day.other-month {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="light"] .age-datepicker-day.other-month {
  color: rgba(0, 0, 0, 0.28);
}

[data-theme="red"] .age-datepicker-day.other-month,
[data-theme="teal"] .age-datepicker-day.other-month,
[data-theme="blue"] .age-datepicker-day.other-month,
[data-theme="purple"] .age-datepicker-day.other-month,
[data-theme="green"] .age-datepicker-day.other-month,
[data-theme="slate"] .age-datepicker-day.other-month {
  color: rgba(255, 255, 255, 0.3);
}

.age-datepicker-day.today {
  border-color: var(--text-primary);
}

[data-theme="red"] .age-datepicker-day.today,
[data-theme="teal"] .age-datepicker-day.today,
[data-theme="blue"] .age-datepicker-day.today,
[data-theme="purple"] .age-datepicker-day.today,
[data-theme="green"] .age-datepicker-day.today,
[data-theme="slate"] .age-datepicker-day.today {
  border-color: rgba(255, 255, 255, 0.7);
}

.age-datepicker-day.selected,
.age-datepicker-day.selected:hover {
  background-color: #4285f4;
  color: #ffffff;
  border-color: transparent;
}

.age-datepicker-today {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

[data-theme="light"] .age-datepicker-today {
  border-top-color: rgba(0, 0, 0, 0.1);
}

.age-datepicker-today-btn {
  background: none;
  border: none;
  color: #4285f4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  font-family: inherit;
  transition: background-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.age-datepicker-today-btn:hover {
  background-color: rgba(66, 133, 244, 0.12);
}

/* ===== Custom timepicker popup =====
   Visual chrome mirrors .timer-sound-dropdown from timer.css: tight 4px
   radius, subtle shadow, items as full-width rows with bottom-border
   separators, selected = orange text (no background). Two scrollable
   columns side-by-side (Hour 00-23, Minute 00-59) divided by a thin
   vertical line. */
.age-timepicker {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 160px;
  background-color: #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 4px 0;
  user-select: none;
  display: flex;
  box-sizing: border-box;
  direction: ltr;
}

.age-timepicker.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

[data-theme="light"] .age-timepicker {
  background-color: #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="red"] .age-timepicker,
[data-theme="teal"] .age-timepicker,
[data-theme="blue"] .age-timepicker,
[data-theme="purple"] .age-timepicker,
[data-theme="green"] .age-timepicker,
[data-theme="slate"] .age-timepicker {
  background-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.age-timepicker-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.age-timepicker-col + .age-timepicker-col {
  border-inline-start: 0.5px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .age-timepicker-col + .age-timepicker-col {
  border-inline-start-color: rgba(0, 0, 0, 0.1);
}

[data-theme="red"] .age-timepicker-col + .age-timepicker-col,
[data-theme="teal"] .age-timepicker-col + .age-timepicker-col,
[data-theme="blue"] .age-timepicker-col + .age-timepicker-col,
[data-theme="purple"] .age-timepicker-col + .age-timepicker-col,
[data-theme="green"] .age-timepicker-col + .age-timepicker-col,
[data-theme="slate"] .age-timepicker-col + .age-timepicker-col {
  border-inline-start-color: rgba(255, 255, 255, 0.14);
}

.age-timepicker-col-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #8d8d8d transparent;
}

.age-timepicker-col-list::-webkit-scrollbar {
  width: 3px;
}
.age-timepicker-col-list::-webkit-scrollbar-track {
  background: transparent;
}
.age-timepicker-col-list::-webkit-scrollbar-thumb {
  background: #8d8d8d;
  border-radius: 5px;
}

.age-timepicker-item {
  display: block;
  width: 100%;
  padding: 6px 13px;
  color: #ffffff;
  font-size: 12px;
  background: none;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.age-timepicker-item:last-child {
  border-bottom: none;
}

.age-timepicker-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .age-timepicker-item {
  color: #000000;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .age-timepicker-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.age-timepicker-item.selected {
  color: #e66c00;
}

[data-theme="red"] .age-timepicker-item,
[data-theme="teal"] .age-timepicker-item,
[data-theme="blue"] .age-timepicker-item,
[data-theme="purple"] .age-timepicker-item,
[data-theme="green"] .age-timepicker-item,
[data-theme="slate"] .age-timepicker-item {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

[data-theme="red"] .age-timepicker-item.selected,
[data-theme="teal"] .age-timepicker-item.selected,
[data-theme="blue"] .age-timepicker-item.selected,
[data-theme="purple"] .age-timepicker-item.selected,
[data-theme="green"] .age-timepicker-item.selected,
[data-theme="slate"] .age-timepicker-item.selected {
  color: #ffe58f;
}

/* ===== Reset button (small square, next to reference date) ===== */
.age-reset-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #555;
  background-color: #1e1e1e;
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.age-reset-btn svg {
  width: 18px;
  height: 18px;
}

.age-reset-btn:hover {
  background-color: #262626;
  border-color: #777;
}

.age-reset-btn:active {
  transform: scale(0.94);
}

[data-theme="light"] .age-reset-btn {
  background-color: #f3f4f6;
  border-color: #d5d8dd;
}

[data-theme="light"] .age-reset-btn:hover {
  background-color: #e7e9ee;
  border-color: #b8bcc4;
}

[data-theme="red"] .age-reset-btn,
[data-theme="teal"] .age-reset-btn,
[data-theme="blue"] .age-reset-btn,
[data-theme="purple"] .age-reset-btn,
[data-theme="green"] .age-reset-btn,
[data-theme="slate"] .age-reset-btn {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

[data-theme="red"] .age-reset-btn:hover,
[data-theme="teal"] .age-reset-btn:hover,
[data-theme="blue"] .age-reset-btn:hover,
[data-theme="purple"] .age-reset-btn:hover,
[data-theme="green"] .age-reset-btn:hover,
[data-theme="slate"] .age-reset-btn:hover {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ===== Submit button (full width, green gradient like stopwatch Start) ===== */
.age-submit-btn {
  width: 100%;
  height: 36px;
  background: linear-gradient(to bottom, var(--btn-start-from), var(--btn-start-to));
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter 0.15s, transform 0.1s, opacity 0.2s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
}

.age-submit-btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s;
}

.age-submit-btn:hover {
  filter: brightness(1.08);
}

.age-submit-btn:hover svg {
  transform: translateX(3px);
}

.age-submit-btn:active {
  transform: scale(0.98);
}

.age-submit-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: none;
}

.age-submit-btn:disabled:hover svg {
  transform: none;
}

[data-theme="red"] .age-submit-btn,
[data-theme="teal"] .age-submit-btn,
[data-theme="blue"] .age-submit-btn,
[data-theme="purple"] .age-submit-btn,
[data-theme="green"] .age-submit-btn,
[data-theme="slate"] .age-submit-btn {
  background: #ffffff;
  color: var(--accent);
}

/* ===== Result Panel =====
   Collapsed by default - content stays in the DOM (so the rendered ages
   are visible to crawlers) but hidden visually via max-height + opacity.
   The .is-expanded class drops the collapse, sliding the card open and
   fading the content in. */
.age-result {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.35s ease,
              padding-top 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              border-top-color 0.4s ease;
}

.age-result.is-expanded {
  max-height: 2000px;
  opacity: 1;
  padding-top: 24px;
  border-top-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .age-result.is-expanded {
  border-top-color: #e5e5e5;
}

[data-theme="red"] .age-result.is-expanded,
[data-theme="teal"] .age-result.is-expanded,
[data-theme="blue"] .age-result.is-expanded,
[data-theme="purple"] .age-result.is-expanded,
[data-theme="green"] .age-result.is-expanded,
[data-theme="slate"] .age-result.is-expanded {
  border-top-color: rgba(255, 255, 255, 0.18);
}

/* Hero row inside the result: the pinned "Age: X years" headline. */
.age-result-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.age-result-hero-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.age-result-hero-value {
  font-size: 72px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
}

.age-result-hero-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ===== Grid of breakdown cards ===== */
.age-result-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.age-result-item {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

[data-theme="light"] .age-result-item {
  background-color: #f3f4f6;
  border-color: transparent;
}

[data-theme="red"] .age-result-item,
[data-theme="teal"] .age-result-item,
[data-theme="blue"] .age-result-item,
[data-theme="purple"] .age-result-item,
[data-theme="green"] .age-result-item,
[data-theme="slate"] .age-result-item {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.age-result-item-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.age-result-item-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  word-break: break-word;
}

/* ===== Next-birthday row =====
   Highlighted in the accent color so it reads as the "call to action"
   piece of information. */
.age-result-birthday {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

[data-theme="light"] .age-result-birthday {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.025));
  border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="red"] .age-result-birthday,
[data-theme="teal"] .age-result-birthday,
[data-theme="blue"] .age-result-birthday,
[data-theme="purple"] .age-result-birthday,
[data-theme="green"] .age-result-birthday,
[data-theme="slate"] .age-result-birthday {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

.age-result-birthday svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--text-primary);
}

.age-result-birthday-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.age-result-birthday-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.age-result-birthday-value {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* The formatted date row only appears in layouts that opt in. Default
   themes show "in X days" instead. */
.age-result-birthday-date {
  display: none;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hero:has(.age-card) {
    padding-top: 14vh;
    padding-bottom: 60px;
  }

  .age-card {
    padding: 22px 18px 20px;
    gap: 20px;
  }

  .age-form-row--two {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .age-form-row--with-reset {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .age-input {
    height: 34px;
    font-size: 14px;
  }

  .age-reset-btn {
    width: 34px;
    height: 34px;
  }

  .age-submit-btn {
    height: 34px;
    font-size: 15px;
  }

  .age-result-hero-value {
    font-size: 56px;
  }

  .age-result-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .age-result-item-value {
    font-size: 15px;
  }

  .age-result-birthday {
    padding: 12px 14px;
    gap: 12px;
  }

  .age-result-birthday svg {
    width: 22px;
    height: 22px;
  }

  .age-result-birthday-value {
    font-size: 15px;
  }
}

@media (max-width: 380px) {
  .age-card {
    padding: 20px 14px 18px;
  }

  .age-label {
    font-size: 13px;
  }

  .age-result-hero-value {
    font-size: 46px;
  }
}