/* Shared phone behavior: the same party, with space for thumbs. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,summary{touch-action:manipulation}
.calendar-nav,.calendar-selection,.clock-touch-control{display:none}
.clock-column button[aria-pressed=true]{background:var(--accent);outline:2px solid var(--ink);outline-offset:2px}
.has-wheel{position:relative;padding-bottom:8px}
.has-wheel>button{display:none}
.wheel-shell{position:relative;min-width:0;margin-top:5px}
.wheel-band{position:absolute;pointer-events:none;top:44px;left:0;right:0;height:44px;background:#fffdf550;border-radius:9px}
.reel-window{position:relative;height:132px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y;scroll-snap-type:y mandatory;scrollbar-width:none;padding:44px 0;-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
.reel-window::-webkit-scrollbar{display:none}
.reel-window.is-wheeling{scroll-snap-type:none;scroll-behavior:auto}
.reel-window{cursor:grab}
.reel-window.is-dragging,.reel-window.is-dragging .wheel-item{cursor:grabbing}
.reel-window .wheel-item{cursor:inherit}
.reel-window:focus-visible{outline:2px solid #70628a;outline-offset:-2px;border-radius:9px}
.wheel-item{height:44px;display:flex;align-items:center;justify-content:center;scroll-snap-align:center;font:600 35px/1 var(--sans);letter-spacing:-1px;font-variant-numeric:tabular-nums;user-select:none;cursor:pointer;opacity:.4;transform:scale(.84);transition:opacity .12s,transform .12s;white-space:nowrap}
.wheel-item.is-selected{opacity:1;transform:scale(1)}
.month-reel .wheel-item{font-size:clamp(16px,4.5vw,23px);letter-spacing:-.7px}
.year-reel .wheel-item{font-size:clamp(24px,6vw,30px)}
.reel .wheel-source{display:none!important}
.is-editing .wheel-source{display:block!important;position:absolute;top:44px;left:0;width:100%;height:44px!important;min-height:44px!important;z-index:2;background:var(--mint);border-radius:8px}
.is-editing .reel-window{opacity:.15;pointer-events:none}
.wheel-hint{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin:11px 0 0}
.has-wheel label{cursor:pointer;min-height:22px}
.birthday-search .month-reel .wheel-item{font-size:clamp(16px,2vw,19px)}
@media(pointer:coarse){
  .birthday-search .reel button,.fact-tabs button,.share-actions button,.share-actions a,.target-year button,.quick-picks button,.ranking-tools select{min-height:48px}
  .clock-touch-control{display:block;margin-top:22px}
  .clock-touch-control input{height:44px;margin:0}
  .day:hover:not(:disabled){transform:none;box-shadow:none}
}
@media(max-width:650px){
  body{padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  main,.party-header{min-width:0}
  .party-header{gap:12px;min-height:66px;padding-top:10px;padding-bottom:10px}
  .brand{min-height:44px;letter-spacing:-.5px}
  .music{min-height:44px}
  .wish{width:180px;height:180px;margin:-7px auto 0}
  .wish-note{margin-bottom:16px}
  .badge{line-height:1.6;margin-bottom:15px}
  .birthday-picker .reel button,.birthday-search .reel button{min-height:44px}
  .birthday-picker .reel select,.birthday-picker .reel input{height:48px;min-height:48px}
  .birthday-picker .month-reel select{font-size:clamp(16px,4.8vw,23px)}
  .birthday-picker .year-reel input{font-size:clamp(23px,6.8vw,31px)}
  .birthday-search .month-reel .wheel-item{font-size:clamp(16px,4.5vw,23px)}
  .text-button,.source a{min-height:44px}
  .source a{display:inline-flex;align-items:center;justify-content:center}
  #result{scroll-margin-top:16px}
  #rank{font-size:clamp(39px,10.5vw,62px);letter-spacing:-.055em}
  .fact-tabs button{min-height:44px}
  .share-actions,.receipt>.share-result .share-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .share-actions>a,.share-actions>button{min-height:48px;padding:12px 4px;font-size:clamp(12px,3.25vw,14px)}
  .share-preview summary{min-height:44px}
  .share-status,.target-caveat{overflow-wrap:anywhere}
  .mode-buttons{min-width:0}
  .mode-buttons button{white-space:normal;flex:1;min-width:0;line-height:1.5;padding:10px 8px;min-height:48px}
  .controls select,.ranking-tools select,.clock-panel select,.model-controls select{font-size:16px;min-height:48px;width:100%}
  .ranking-tools select{max-width:65%;padding-right:24px}
  .controls label,.model-controls>label{min-width:0}
  .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .model-controls input[type=range]{height:44px;margin:0}
  .range-ticks button{min-height:44px}
  .workspace .receipt{order:-1;scroll-margin-top:18px}
  .receipt-main{gap:0 14px}
  .receipt-stat strong,body.conception .receipt-stat strong{font-size:clamp(30px,9.2vw,46px)}
  .receipt-facts>div{flex-wrap:wrap;gap:4px 12px;line-height:1.6}
  .receipt-facts dd{margin-left:auto}
  .calendar-nav{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;margin:24px 0 18px}
  .calendar-nav button{border:0;background:var(--mint);border-radius:11px;font-size:22px;min-height:48px;padding:8px}
  .calendar-nav select{font-size:18px;min-height:48px;min-width:0;font-weight:550;background:transparent;border:0;text-align:center;text-align-last:center;padding:8px 18px 8px 6px}
  .calendar{grid-template-columns:1fr;gap:0}
  .calendar .month-label{display:none}
  .day-grid{grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:6px}
  .calendar .day{height:46px;min-height:46px;max-height:none;aspect-ratio:auto;font-size:16px;border-radius:8px}
  .calendar-selection{display:flex;align-items:center;justify-content:space-between;gap:15px;background:var(--butter);border:0;border-radius:12px;margin:18px 0 0;padding:15px;width:100%;text-align:left;min-height:68px}
  .calendar-selection strong{display:block;font-size:16px;font-weight:600}
  .calendar-selection span span{display:block;font-size:12px;color:#766f58;line-height:1.5;margin-top:5px}
  .calendar-selection>span:last-child{font-size:22px}
  .map-panel .panel-heading{flex-wrap:wrap;gap:10px}
  .quick-picks button{min-height:44px;font-size:12px}
  .month-rank-row{min-height:55px}
  .ranking-panel li button{min-height:65px}
  .clock-touch-control{display:block;margin-top:22px}
  .clock-touch-control input{height:44px;margin:0}
  .download-all{max-width:100%;white-space:normal}
  .data-buffet td:last-child{gap:5px 15px}
  .data-buffet td a{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .downloads a,.downloads button{min-height:44px;max-width:100%;white-space:normal}
  .details-body{overflow-wrap:anywhere}
}
@media(max-width:360px){
  main{padding-left:14px;padding-right:14px}
  .party-header{padding-left:14px;padding-right:14px}
  .season-panel,.ranking-panel,.country-panel,.population-panel,.clock-panel,.data-buffet,.rare-birthday{padding-left:17px;padding-right:17px}
  .country-comparison{grid-template-columns:1fr}
  .country-comparison button>strong{min-height:0}
  .receipt-main{padding-left:16px;padding-right:16px}
  .receipt h2{font-size:23px}
  .ranking-tools{align-items:flex-start;flex-direction:column}
  .ranking-tools select{max-width:100%}
  .ranking-tools>span{max-width:none;text-align:left}
  .rare-heading h2{font-size:25px}
  .rare-spark{width:60px;height:60px}
}
@media(max-width:650px) and (max-height:740px){
  .wish{width:142px;height:142px}
  .wish-note{margin-bottom:11px}
}
.month-day-reels{grid-template-columns:1.6fr 1fr}

@media(max-width:650px){.birthday-search .month-day-reels{grid-template-columns:1.6fr 1fr}}

/* Selection comes into focus through type, without an inner highlight box. */
.wheel-band{display:none}.wheel-item{opacity:.28;transform:scale(.78);transition:opacity .14s ease,transform .18s ease}.wheel-item.is-selected{opacity:1;transform:scale(1)}.month-reel .wheel-item,.birthday-search .month-reel .wheel-item{font-size:clamp(22px,6vw,30px);letter-spacing:-1px}.day-reel .wheel-item{font-size:40px}
@media(prefers-reduced-motion:reduce){.wheel-item{transition:none}}

/* Two compact reels, shared across input devices. */
.reels.month-day-reels{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:10px}.birthday-search{max-width:360px}.birthday-picker .reel{padding:13px 9px 9px}.wheel-shell{margin-top:2px}.has-wheel label{margin-bottom:0}.reel-window{outline-offset:-4px}
@media(max-width:650px){.birthday-search{max-width:none}.reels.month-day-reels{gap:8px}.birthday-picker .reel{padding:12px 5px 8px}.month-reel .wheel-item,.birthday-search .month-reel .wheel-item{font-size:clamp(22px,6vw,28px)}}

/* Give the selected month the same presence as the day, including before JS. */
.birthday-picker .month-reel .wheel-item.is-selected{font-weight:650}
@media(max-width:650px){
  .birthday-picker .month-reel .wheel-item{font-size:clamp(26px,8vw,32px);font-weight:500}
  .birthday-picker .month-reel .wheel-item.is-selected{font-size:clamp(27px,8.6vw,35px);font-weight:550}
  .birthday-picker .day-reel .wheel-item{font-weight:500}
  .birthday-picker .day-reel .wheel-item.is-selected{font-weight:550}
}
@supports(font-size:1cqi){
  @media(max-width:650px){
    .birthday-picker .month-reel{container-type:inline-size}
    .birthday-picker .month-reel .wheel-item.is-selected{font-size:min(35px,17cqi)}
  }
}