/* Shared UI primitives. Layout starts at phone size in responsive.css. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --touch-size: 44px;
  --control-size: 48px;
  --radius-control: 10px;
  --radius-card: 16px;
  --page-gutter: 16px;
  --card-padding: 16px;
  --surface: #191818;
  --control-bg: #141313;
  --subtle: #aaa298;
}
:root[data-theme="light"] {
  --surface: #fffdf8;
  --control-bg: #fffdfa;
  --subtle: #6e665d;
}
html { scroll-padding-top: 90px; }
body { min-width: 0; overflow-x: clip; -webkit-text-size-adjust: 100%; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary { touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
:where(input, select, textarea) { min-width: 0; font-size: 16px; }
:where(h1, h2, h3, h4, p, small, strong, a) { overflow-wrap: anywhere; }
:where(main, section, article, aside, form, nav, header, footer) { min-width: 0; }
:where(button, input, select, textarea, a, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
:where(.primary-button, .ghost-button, .text-button, .theme-toggle, .profile-pill,
.question-pagination button, .analysis-warning button, .tarot-info-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-size);
  min-height: var(--touch-size);
  gap: var(--space-2);
  padding: 10px 14px;
  border-radius: var(--radius-control);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
}
.primary-button, .ghost-button, .text-button, .theme-toggle, .profile-pill,
.question-pagination button, .analysis-warning button, .tarot-info-button {
  min-height: var(--touch-size);
  border-radius: var(--radius-control);
}
.primary-button { min-height: 50px; justify-content: center; gap: 16px; }
.text-button { padding: 10px 14px; }
.ghost-button--danger, .text-button--danger { color: var(--red); }
.profile-pill { padding: 10px 16px; }
.field input, .field select, .field textarea, .save-profile-row input {
  min-width: 0;
  min-height: var(--control-size);
  border-radius: var(--radius-control);
  font-size: 16px;
}
.field > span { color: var(--text); font-size: 14px; }
.field small, .intake-description, .privacy-note { font-size: 13px; line-height: 1.7; }
.field i { font-size: 12px; }
.field textarea { min-height: 120px; }
.privacy-consent { padding-block: 8px; font-size: 13px; line-height: 1.8; }
.privacy-consent input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--gold); }
.intake-card, .analysis-panel, .summary-card, .school-card,
.local-basics, .overview-hero, .life-trajectory, .local-tarot, .overview-caveats {
  border-radius: var(--radius-card);
}
.local-basics-card, .overview-signal, .overview-dimension, .foundation-tarot-draw,
.local-tarot-card, .save-profile-prompt { border-radius: var(--radius-control); }
.school-card summary { min-height: 44px; padding-block: 12px; font-size: 13px; }
.form-error { font-size: 14px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 16px; padding: 12px 16px; transform: translateY(-150%); background: var(--surface); color: var(--gold-light); }
.skip-link:focus { transform: translateY(0); }

/* One dialog surface for login, profile editing, name terms and card meanings. */
body:has(dialog[open]) { overflow: hidden; }
.account-dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - max(16px, env(safe-area-inset-top)));
  margin: 0;
  padding: 24px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 20px 20px 0 0;
  background: var(--surface);
}
.account-dialog h2 { font-size: 24px; }
.account-dialog-copy, .info-dialog-content { font-size: 15px; line-height: 1.8; }
.account-dialog-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.account-dialog-actions > * { width: 100%; }
.login-code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.login-code-row .ghost-button { white-space: nowrap; padding-inline: 10px; }
.info-dialog > button { width: 100%; margin-top: 16px; }
.tarot-info-button { width: 100%; margin-top: 8px; padding: 8px 2px; border: 1px solid var(--line); color: var(--gold-light); background: var(--panel); font-size: 12px; }
.name-help-trigger { width: 44px; height: 44px; font-size: 14px; cursor: pointer; }
/* Explicit sizing prevents iOS native date/time appearance from widening
   controls beyond their field or collapsing the empty control height. */
.native-birth-field { position: relative; width: 100%; min-width: 0; }
.field .native-birth-control {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: var(--control-size);
  min-height: var(--control-size);
  margin: 0;
  padding: 0 13px;
  font: inherit;
  font-size: 16px;
  text-align: left;
}
.native-birth-placeholder {
  display: none;
  position: absolute;
  inset: 0 14px;
  align-items: center;
  color: var(--subtle);
  font-size: 16px;
  pointer-events: none;
}
.native-birth-field:not(:focus-within) .native-birth-control[data-has-value="false"] { color: transparent; }
.native-birth-control[data-has-value="false"] + .native-birth-placeholder { display: flex; }
.native-birth-field:focus-within .native-birth-placeholder { display: none; }
.date-field-control, .time-select-group { display: none; }
.native-birth-control::-webkit-date-and-time-value { min-width: 0; min-height: 1.5em; text-align: left; }
@media (min-width: 640px) {
  :root { --page-gutter: 24px; --card-padding: 24px; }
  .account-dialog { inset: 0; width: min(480px, calc(100% - 48px)); max-height: calc(100dvh - 48px); margin: auto; padding: 28px; border-radius: 20px; }
}
@media (min-width: 640px) and (pointer: fine) {
  .native-birth-field { display: none; }
  .date-field-control { display: block; }
  .time-select-group { display: grid; }
  .date-picker-toolbar { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .date-picker-nav { width: 44px; height: 44px; }
  .date-picker-selects select { padding-left: 5px; padding-right: 22px; font-size: 14px; }
  .time-combo-toggle { width: 44px; min-height: 46px; }
  .field .time-input { padding-right: 48px; }
  .date-picker-footer button { min-width: 44px; min-height: 44px; }
  .time-combo-option { min-height: 44px; }
}