/* =========================================================================
   Age Calculator — page layer on top of editor-bench / bench-tools /
   text-tools. The bench here holds a form rather than an editor, so this
   adds the headline figure, the date fields' bad state and the Q&A list.
   ========================================================================= */
.age-page [hidden]{ display: none !important; }

.age-page .field input.is-bad{ border-color: var(--bad); background: var(--bad-soft); }
.age-page .ac-row{ display: flex; gap: 6px; align-items: stretch; }
.age-page .ac-row input{ flex: 1 1 auto; min-width: 0; }

.age-page .ac-headline{
  margin: 0; font-size: clamp(22px, 3.2vw, 32px); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15; color: var(--ink);
}
.age-page .ac-sub{ margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.age-page .tt-body{ max-height: none; }

.age-page .ac-rule{
  margin: 0 14px 14px; padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper-2);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
}
.age-page .ac-diff{ padding: 0 14px 14px; font-size: 14px; line-height: 1.55; }
.age-page .ac-diff strong{ color: var(--ink); }

.qdt-bench .qa-list details{ border-top: 1px solid var(--rule); padding: 12px 0; }
.qdt-bench .qa-list details:last-child{ border-bottom: 1px solid var(--rule); }
.qdt-bench .qa-list summary{ cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.qdt-bench .qa-list p{ margin: 8px 0 0; color: var(--ink-2); line-height: 1.6; font-size: 14px; max-width: 76ch; }