/* /birth-sky/ only. The question is one sentence in the Story voice; the answer is the sky. */

/* ---------- asking: the live sky behind, the sentence in front ---------- */
.birth[data-state="ask"] .inst { height: auto; min-height: max(640px, 100dvh); display: grid; align-items: end; overflow: visible; z-index: 1; padding-top: 6.5rem; }
.birth[data-state="ask"] .inst__sky { clip-path: inset(0); }
.birth[data-state="ask"] .inst::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(to top, var(--night) 0%, rgba(9, 7, 13, .9) 38%, rgba(9, 7, 13, .25) 70%, rgba(9, 7, 13, .05) 100%); }
.ask { position: relative; z-index: 1; padding: 0 var(--gut) clamp(2rem, 6vh, 4rem); max-width: 64rem; }
.ask__title { font: 400 var(--t-2xl)/1.02 var(--display); letter-spacing: -.015em; max-width: 16ch; }
.ask__lead { color: var(--ink-dim); font-size: var(--t-l); margin-top: .8rem; max-width: 44ch; }

.sentence { margin-top: 2rem; }
.sentence__line { font: 400 clamp(1.45rem, 1rem + 1.6vw, 2.35rem)/1.25 var(--display); display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem .6rem; margin: 0; }
.sentence__w { font-family: var(--story); font-style: italic; color: var(--ink-dim); padding-top: .2rem; }
.sentence__w[hidden], .slot[hidden] { display: none; }
.slot { display: inline-grid; gap: .2rem; position: relative; }
.slot label { order: 2; font: 500 var(--t-xs)/1.3 var(--ui); color: var(--ink-faint); }
.slot input, .slot select { order: 1; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--line-2); padding: .1rem .1rem .2rem; min-height: 48px; border-radius: 0; color-scheme: dark; }
.slot input:hover, .slot select:hover { border-bottom-color: var(--silver-dim); }
.slot input:focus-visible, .slot select:focus-visible, .slot input[type="date"]:focus, .slot input[type="time"]:focus { outline: none; border-bottom-color: var(--eye); background: rgba(124, 194, 74, .06); }
.slot input[aria-invalid="true"] { border-bottom-color: var(--ember-2); }
.slot--date input { width: 10.5em; }
.slot--time input { width: 4.6em; }
.slot--prec select { max-width: 13em; font-size: .62em; font-family: var(--ui); align-self: end; min-height: 48px; color: var(--ink-dim); cursor: pointer; }
.slot--prec select option { background: var(--dusk); color: var(--ink); }
.slot--place input { width: min(11em, 70vw); }
.slot--place .combo__list { font: 400 var(--t-m)/1.3 var(--ui); min-width: min(22rem, 86vw); top: 3.2rem; right: auto; }
.slot__err { order: 3; font: 500 var(--t-xs)/1.35 var(--ui); color: var(--ember-2); max-width: 22rem; }
.slot__err:empty { display: none; }
.sentence__status { margin-top: .9rem; max-width: 60ch; }
.sentence__errors { margin-bottom: 1.2rem; padding: .9rem 1rem; border-radius: var(--r); border: 1px solid var(--ember); background: rgba(209, 80, 31, .08); font-size: var(--t-s); }
.sentence__errors ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.sentence__errors a { color: var(--ink); }

.exact { margin-top: 1.2rem; max-width: 40rem; }
.exact summary { cursor: pointer; color: var(--silver); font-size: var(--t-s); min-height: 44px; display: flex; align-items: center; }
.exact summary:focus-visible { outline: 2px solid var(--eye); outline-offset: 2px; border-radius: 6px; }
.exact__in { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; padding: .6rem 0 0; }
.exact__in p { grid-column: 1 / -1; color: var(--ink-dim); font-size: var(--t-s); }
.exact__in .slot__err { grid-column: 1 / -1; }
.exact .field input { width: 100%; font-family: var(--data); }

.clarify { margin: 1.5rem 0 0; padding: 1rem 1.1rem; border-radius: var(--r); border: 1px solid var(--gold-dim); background: rgba(20, 15, 28, .85); max-width: 46rem; }
.clarify legend { padding: 0 .3rem; font: italic var(--t-l)/1.35 var(--story); color: var(--ink); }
.clarify > div { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.clarify .btn { white-space: normal; text-align: left; justify-content: flex-start; }

.sentence__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.6rem; }
.sentence__privacy { color: var(--ink-faint); font-size: var(--t-xs); max-width: 38ch; }
.kept { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: var(--t-s); color: var(--ink-dim); }
.kept b { color: var(--ink); font-weight: 600; }

/* ---------- the rewind: the year runs back while the sky turns ---------- */
.rewind { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); margin: 0; text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s; z-index: 1; }
.rewind.is-on { opacity: 1; }
.rewind span { display: block; font: 400 clamp(5rem, 2rem + 12vw, 12rem)/.9 var(--display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.rewind small { display: block; margin-top: .6rem; font: italic var(--t-l)/1.2 var(--story); color: var(--ink-dim); }

/* ---------- the answer ---------- */
.plate--birth, .birth .tools { transition: opacity .6s; }
.is-rewinding .plate--birth, .is-rewinding .tools { opacity: 0; }
.plate--birth { pointer-events: auto; }
.plate--birth .plate__place:focus { outline: none; }
.plate__city { font-style: normal; color: var(--ink); }
.plate__note { margin-top: .5rem; color: var(--ink-dim); font-size: var(--t-s); max-width: 36rem; }
.plate--birth .plate__when { color: var(--ink); font-size: var(--t-m); margin-top: .5rem; }

.turn { display: grid; gap: .5rem; }
.turn__label { font-size: var(--t-s); color: var(--ink-dim); }
.turn__range { width: 100%; accent-color: var(--silver); min-height: 32px; }
.turn__range:focus-visible { outline: 2px solid var(--eye); outline-offset: 3px; border-radius: 6px; }
.turn__read { font: var(--t-s)/1.3 var(--data); color: var(--silver); margin: 0; }

.reading { padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.reading__in { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .reading__in { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.lensbox { padding: 1.6rem 1.5rem 1.7rem; border-radius: var(--r-lg); background: var(--dusk); border: 1px solid var(--line); }
.lensbox--sky { border-top: 2px solid var(--silver-dim); }
.lensbox--story { border-top: 2px solid var(--gold); background: linear-gradient(180deg, rgba(216, 168, 78, .05), transparent 40%), var(--dusk); }
.lensbox h2 { font: 600 var(--t-l)/1.2 var(--ui); color: var(--silver); }
.lensbox--story h2 { font: italic 400 var(--t-xl)/1.1 var(--story); color: var(--gold); }
.lensbox__sub { color: var(--ink-dim); font-size: var(--t-s); margin: .35rem 0 1.2rem; max-width: 46ch; }
.facts { margin: 0; display: grid; gap: 0; }
.facts div { display: grid; grid-template-columns: minmax(8.5rem, 34%) 1fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; }
.facts dt { color: var(--ink-dim); font-size: var(--t-s); }
.facts dd { margin: 0; font-size: var(--t-s); line-height: 1.5; }
.facts--story dd { font: 400 var(--t-m)/1.45 var(--display); color: var(--ink); }
.lensbox__note { margin-top: 1rem; color: var(--ink-dim); font-size: var(--t-xs); line-height: 1.55; }
@media (max-width: 520px) { .facts div { grid-template-columns: 1fr; gap: .15rem; } }

/* ---------- phones ---------- */
@media (max-width: 959px) {
  .birth[data-state="ask"] .inst { min-height: 100svh; }
  .birth[data-state="ask"] .inst__sky { height: 58svh; bottom: auto; }
  .birth[data-state="ask"] .inst::after { background: linear-gradient(to bottom, transparent 30svh, var(--night) 58svh); }
  .ask { padding-top: 44svh; }
  .rewind { top: 36%; }
  .exact__in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rewind { transition: none; } }