/* Asteria — les champs de naissance du site (assets/birthrow.js) : l'accueil, le calcul de l'ascendant, l'invitation,
   les outils de date. Une rangée qu'on touche, son nom en petit, sa valeur en grand ; une date ou une heure se choisit
   sur des molettes (une feuille sous le pouce sur un téléphone, sous la rangée sur un grand écran), jamais dans le
   calendrier du navigateur (SITE-DATE1). */

/* ── La rangée ──────────────────────────────────────────────────────────────────────────────────────────── */
.brow { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 92px; padding: 12px 18px 12px 14px; border-radius: 24px; transition: background .25s; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.brow + .brow { margin-top: 2px; }
.brow::after { content: ""; position: absolute; left: 64px; right: 18px; bottom: -1px; height: 1px; background: var(--line); }
.brow:last-of-type::after { display: none; }
.brow:hover, .brow.focus, .brow.open { background: rgba(255, 255, 255, .05); }
.brow-icon { font-size: 22px; color: var(--ivory); text-align: center; display: grid; place-items: center; }
.brow-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.brow-text { display: grid; gap: 7px; min-width: 0; }
.brow-label { font: 500 11px/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.brow-label i { font-style: normal; letter-spacing: .04em; text-transform: none; color: var(--ink-4); }
.brow-value { font: 400 clamp(26px, 7vw, 30px)/1.05 var(--display); letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brow-value.muted { color: var(--ink-3); }
.brow-chev { width: 9px; height: 9px; margin-right: 4px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3);
  transform: rotate(-45deg); transition: transform .3s var(--ease); }
.brow.open .brow-chev { transform: rotate(45deg) translate(-2px, -2px); }
/* toute la rangée est le bouton qui ouvre les molettes (le doigt, le clavier, VoiceOver) */
.brow-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.brow-hit:focus-visible { outline: 2px solid var(--plat); outline-offset: -2px; border-radius: 24px; }
/* une liste (le pays de l'invitation) : le sélecteur du téléphone, posé invisible sur la rangée */
.brow-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; color-scheme: dark;
  -webkit-appearance: none; appearance: none; }
.brow-clear { position: relative; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); }
.brow-clear:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.brow-clear svg { width: 14px; height: 14px; }
/* « Effacer » ne prend sa colonne que lorsqu'il y a quelque chose à effacer : sans valeur, la flèche de l'heure se
   tient au même bord que celle de la date (elle était décalée d'un écart, 10 points) */
.brow.has-clear { grid-template-columns: 40px minmax(0, 1fr) auto; }
.brow.has-clear.filled { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.brow.text { cursor: text; grid-template-columns: 40px minmax(0, 1fr); }
.brow-input { width: 100%; min-width: 0; height: 34px; padding: 0; border: 0; outline: none; background: none; text-align: left;
  font: 400 clamp(26px, 7vw, 30px)/1.05 var(--display); letter-spacing: -.01em; color: var(--ink); -webkit-appearance: none; appearance: none; }
.brow-input::placeholder { color: var(--ink-3); opacity: 1; }
.brows-title { margin: 16px 18px 8px; font: italic 400 34px/1 var(--display); color: var(--ivory); }
.brows { position: relative; border-radius: 30px; padding: 6px;
  background: linear-gradient(180deg, rgba(24, 26, 44, .78), rgba(12, 13, 24, .86));
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 100px -50px #000, inset 0 1px 0 rgba(255, 255, 255, .08); }

/* ── Les molettes ───────────────────────────────────────────────────────────────────────────────────────── */
/* Sous la barre du haut et le grain, au-dessus de tout le reste. Fermées : rien ne reste dans la page. */
.wp { position: fixed; inset: 0; z-index: 90; }
.wp[hidden] { display: none !important; }
.wp-scrim { position: absolute; inset: 0; background: rgba(3, 4, 10, .62); opacity: 0; transition: opacity .28s var(--ease); }
.wp.in .wp-scrim { opacity: 1; }
.wp-panel { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 520px; box-sizing: border-box;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg, #1a1c30 0%, #0e0f1c 100%); border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0;
  box-shadow: 0 -30px 80px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(104%); transition: transform .38s cubic-bezier(.2, .9, .25, 1); outline: none; }
.wp.in .wp-panel { transform: none; }
.wp-panel.held { transition: none; }
.wp-grab { width: 38px; height: 5px; margin: 2px auto 10px; border-radius: 3px; background: var(--ink-4); }
.wp-head { padding: 4px 6px 12px; text-align: center; touch-action: none; }
.wp-title { margin: 0; font: 500 11px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.wp-big { margin: 8px 0 0; font: 400 34px/1.1 var(--display); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wp-small { margin: 6px 0 0; font: 500 15px/1.4 var(--sans); color: var(--ivory); }

/* Cinq lignes vues, la ligne choisie dans le repère du milieu ; les autres s'éloignent sur un cylindre. */
.wp-wheels { position: relative; display: flex; gap: 4px; height: 220px; margin: 0 -4px; }
.wp-lens { position: absolute; left: 0; right: 0; top: 88px; height: 44px; border-radius: 14px; pointer-events: none;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.wp-col { position: relative; flex: 1 1 0; min-width: 0; height: 220px; overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  perspective: 540px; outline: none; border-radius: 14px; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%); }
.wp-col::-webkit-scrollbar { display: none; }
.wp-col.drag { scroll-snap-type: none; cursor: grabbing; }
/* au clavier, la molette qui a la main entoure sa ligne choisie (jamais toute sa colonne) */
.wp-col:focus-visible .wp-item.on { box-shadow: inset 0 0 0 1.5px rgba(228, 226, 220, .6); border-radius: 12px; }
.wp-list { padding: 88px 0; }
.wp-item { height: 44px; line-height: 44px; scroll-snap-align: center; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 6px; font: 400 22px/44px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
  transform-origin: 50% 50%; backface-visibility: hidden; -webkit-user-select: none; user-select: none; transition: color .15s; }
.wp-item.on { color: var(--ink); font-weight: 500; }
.wp-item.off { color: var(--ink-4); text-decoration: line-through; text-decoration-color: rgba(243, 241, 236, .2); }
.wp-day { flex-grow: .78; }
.wp-month { flex-grow: 1.7; }
.wp-month .wp-item { text-transform: capitalize; }
.wp-year { flex-grow: 1.05; }
.wp-period { flex-grow: .9; }
.wp-period .wp-item { font-size: 19px; }

.wp-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.wp-done { flex: 1 1 auto; min-height: 56px; font-size: 17px; }
.wp-alt { flex: 0 1 auto; min-height: 56px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .04); color: var(--ink-2); font: 500 15px/1.2 var(--sans); cursor: pointer; }
.wp-alt:hover { color: var(--ink); border-color: rgba(243, 241, 236, .45); }
.wp-alt[hidden] { display: none; }

/* Sur un grand écran, à la souris : les molettes s'ouvrent sous la rangée, sans voile, la page reste à elle. */
.wp.is-pop { inset: auto; width: 0; height: 0; }
.wp.is-pop .wp-scrim, .wp.is-pop .wp-grab { display: none; }
.wp.is-pop .wp-panel { position: fixed; bottom: auto; margin: 0; max-width: none; padding: 16px 14px 14px; border-radius: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -30px #000, inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(-8px) scale(.985); transform-origin: 50% 0; transition: opacity .2s var(--ease), transform .24s var(--ease); }
.wp.is-pop.in .wp-panel { opacity: 1; transform: none; }
/* la rangée juste au-dessus dit déjà son nom et sa valeur : la tête ne garde que le Soleil de ce jour-là */
.wp.is-pop .wp-head { padding: 0 6px 8px; }
.wp.is-pop .wp-title, .wp.is-pop .wp-big { display: none; }
.wp.is-pop .wp-small { margin: 0; }
.wp.is-pop.is-time .wp-head { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wp-scrim, .wp-panel, .wp.is-pop .wp-panel, .brow-chev { transition: none !important; }
}