/* timepick.css — the scroll-wheel time picker (timepick.js)
   Looks like the app's paper cards: cream, scalloped edge, dashed pink inner line,
   script title, Fraunces numbers, matcha-green Done. */
.tp-back { position: fixed; inset: 0; z-index: 9998; display: none; background: transparent; }
.tp-back.on { display: block; }

.tp-pop {
    --tp-ink: #B03F64; --tp-pink: #FFE4E9; --tp-line: rgba(229, 143, 163, .55); --tp-cream: #FFFBF1;
    --tp-sage: var(--sage, #6F8C5A); --tp-num: var(--serif, 'Fraunces', Georgia, serif);
    position: fixed; z-index: 9999; width: 272px; display: none; isolation: isolate;
    padding: 28px 28px 24px; color: #3E2727; font: inherit; font-size: 13px; text-align: center;
}
.tp-pop.on { display: block; animation: tp-in .18s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes tp-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
:where(.tp-pop) button { font: inherit; cursor: pointer; }

/* desktop: scalloped paper, like the cards */
.tp-pop.paper::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border: 14px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='42'%20height='42'%3E%3Cg%20fill='%23FFFBF1'%20stroke='%233E2727'%20stroke-opacity='.5'%20stroke-width='1.2'%3E%3Ccircle%20cx='7'%20cy='7'%20r='6.3'/%3E%3Ccircle%20cx='21'%20cy='7'%20r='6.3'/%3E%3Ccircle%20cx='35'%20cy='7'%20r='6.3'/%3E%3Ccircle%20cx='7'%20cy='21'%20r='6.3'/%3E%3Ccircle%20cx='35'%20cy='21'%20r='6.3'/%3E%3Ccircle%20cx='7'%20cy='35'%20r='6.3'/%3E%3Ccircle%20cx='21'%20cy='35'%20r='6.3'/%3E%3Ccircle%20cx='35'%20cy='35'%20r='6.3'/%3E%3C/g%3E%3Crect%20x='7'%20y='7'%20width='28'%20height='28'%20fill='%23FFFBF1'/%3E%3C/svg%3E") 14 fill round;
    filter: drop-shadow(0 18px 24px rgba(62, 39, 39, .22));
}
.tp-pop.paper::after {
    content: ""; position: absolute; inset: 16px; z-index: -1; pointer-events: none;
    border: 1.5px dashed var(--tp-line); border-radius: 14px;
}

.tp-x {
    position: absolute; top: 22px; right: 22px; width: 26px; height: 26px; padding: 0;
    display: grid; place-items: center; border: 0; border-radius: 50%;
    background: transparent; color: #a48a8a; transition: background .15s, color .15s;
}
.tp-x:hover { background: var(--tp-pink); color: var(--tp-ink); }

.tp-head { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 2px; }
.tp-ic {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--tp-pink); color: var(--tp-ink); margin-bottom: 4px;
}
.tp-title { font-family: var(--script, cursive); font-size: 32px; line-height: 1.1; color: var(--tp-sage); }
html[data-lang]:not([data-lang="en"]) .tp-title { font-family: var(--cute-d, inherit), var(--cute, inherit), sans-serif; font-size: 20px; font-weight: 700; line-height: 1.4; }
.tp-sub { font-family: var(--tp-num); font-style: italic; font-size: 12px; color: #a48a8a; margin-top: -2px; }

.tp-show {
    display: flex; align-items: baseline; justify-content: center; gap: 8px;
    margin: 10px 0 0; font-family: var(--tp-num); font-variant-numeric: tabular-nums lining-nums;
}
.tp-val { font-size: 40px; font-weight: 600; line-height: 1; color: var(--tp-ink); letter-spacing: -.01em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.tp-from { font-size: 17px; font-weight: 600; color: #a48a8a; }
.tp-arrow { font-size: 15px; color: #d7a9b5; }
.tp-dur { min-height: 17px; margin-top: 3px; font-family: var(--tp-num); font-style: italic; font-size: 13px; color: var(--tp-sage); }
.tp-pop.bad .tp-val, .tp-show.bad .tp-val { color: #d9b3bc; }
.tp-show.bad + .tp-dur { color: #D0607E; }
.tp-show.shake { animation: tp-shake .3s; }
@keyframes tp-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* the wheels sit in a soft well; 5 rows of 40px, the middle one is the pick */
.tp-well {
    position: relative; margin: 12px 0 0; padding: 0 6px; border-radius: 20px;
    background: linear-gradient(#FBF3E2, #FFF8EC 50%, #FBF3E2);
    box-shadow: inset 0 2px 6px rgba(62, 39, 39, .06);
}
.tp-band {
    position: absolute; left: 8px; right: 8px; top: 80px; height: 40px; pointer-events: none;
    border-radius: 13px; background: #fff; border: 1.5px dashed #F4A3B4;
    box-shadow: 0 3px 10px rgba(229, 143, 163, .25);
}
.tp-wheels { position: relative; display: flex; justify-content: center; align-items: center; height: 200px; perspective: 500px; }
.tp-wheel {
    position: relative; flex: 1; max-width: 90px; height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory;
    scrollbar-width: none; overscroll-behavior: contain; outline: none; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
            mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}
.tp-wheel::-webkit-scrollbar { display: none; }
.tp-sp { height: 80px; }
.tp-it {
    height: 40px; line-height: 40px; scroll-snap-align: center; cursor: pointer; user-select: none;
    font-family: var(--tp-num); font-size: 22px; font-weight: 500; color: #7a6262;
    font-variant-numeric: tabular-nums lining-nums; transform-origin: center; will-change: transform, opacity;
}
.tp-it.on { color: var(--tp-ink); font-weight: 700; }
.tp-colon { position: relative; z-index: 1; width: 14px; font-family: var(--tp-num); font-size: 24px; font-weight: 700; color: var(--tp-ink); margin-top: -3px; }

.tp-foot { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 16px; }
.tp-ok {
    border: 0; border-radius: 999px; padding: 11px 20px; font-weight: 800; font-size: 14px;
    background: var(--primary, #BDD373); color: var(--primary-ink, #3E4A14);
    box-shadow: 0 4px 14px rgba(134, 161, 54, .3); transition: transform .12s, background .15s;
}
.tp-ok:hover { background: var(--primary-hover, #AFC862); }
.tp-ok:active { transform: scale(.97); }
.tp-none {
    order: 2; border: 0; background: none; padding: 6px; color: #a48a8a;
    font-family: var(--tp-num); font-style: italic; font-size: 13px;
}
.tp-none:hover { color: var(--tp-ink); }

/* phone: bottom sheet with a grab handle */
.tp-pop.sheet {
    left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto;
    padding: 26px 22px calc(18px + env(safe-area-inset-bottom));
    background: var(--tp-cream); border-radius: 26px 26px 0 0;
    box-shadow: 0 -10px 40px rgba(62, 39, 39, .18);
}
.tp-pop.sheet::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 99px; background: rgba(62, 39, 39, .15);
}
.tp-pop.sheet::after {
    content: ""; position: absolute; inset: 20px 12px 0; z-index: -1; pointer-events: none;
    border: 1.5px dashed var(--tp-line); border-bottom: 0; border-radius: 18px 18px 0 0;
}
.tp-pop.sheet .tp-x { top: 22px; right: 20px; }
.tp-pop.sheet.on { animation: tp-up .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes tp-up { from { transform: translateY(40px); opacity: 0; } }
.tp-back.on:has(+ .tp-pop.sheet) { background: rgba(62, 39, 39, .28); }
.tp-pop.sheet .tp-wheel { max-width: 110px; }
.tp-pop.sheet .tp-it { font-size: 25px; }
.tp-pop.sheet .tp-val { font-size: 46px; }

/* the time fields themselves: look tappable */
input[type="time"] { cursor: pointer; caret-color: transparent; }

@media (prefers-reduced-motion: reduce) { .tp-pop.on, .tp-pop.sheet.on, .tp-show.shake { animation: none; } }