/* ——— The time (time-filter.js): the thumb bar's button, and the picker grown from it, in the
   thumb bar's pickers' look (cards.css's --pick-* and the month's: the pickers' glass, violet for
   what's picked, the month's chips and greys) ——— */
:root {
  --time-clock: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.6'/><path d='M12 7.4V12l3.1 2'/></svg>");
  --time-sun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4.6'/><path d='M12 2.6v2.6M12 18.8v2.6M2.6 12h2.6M18.8 12h2.6M5.4 5.4l1.8 1.8M16.8 16.8l1.8 1.8M5.4 18.6l1.8-1.8M16.8 7.2l1.8-1.8' stroke='black' stroke-width='1.9' stroke-linecap='round'/></svg>");
  --time-sunset: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.5 16a5.5 5.5 0 0 1 11 0Z'/><path d='M2.5 18.6h19M7 21.4h10' stroke='black' stroke-width='1.9' stroke-linecap='round'/><path d='M12 4.2v3.2M9.6 5.4 12 7.8l2.4-2.4' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --time-quiet: rgb(244 241 234 / 0.4); /* the pickers' labels' grey (cards.css's .month-dow) */
  --time-chip: linear-gradient(rgb(255 255 255 / 0.075), rgb(255 255 255 / 0.04)); /* the month's chips' fill and edges (.month-chip) */
  --time-chip-edge: inset 0 0 0 0.5px rgb(255 255 255 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.08);
}

/* the button, the cinema's size: a clock in outline; a time picked, lit as the others, its face the
   time (a tiny top line over it, as the day's and the cinema's: cards.css's three faces) */
.thumb-time {
  flex: none; display: grid; place-items: center; min-width: 50px; height: 44px; padding: 0 8px; box-sizing: border-box; border: 0; border-radius: 22px; overflow: hidden;
  background: none; color: var(--ink); font: inherit; cursor: pointer; transition: background .2s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.thumb-time > * { pointer-events: none; }
.thumb-time.on { padding: 0 11px; background: linear-gradient(165deg, rgb(150 128 255 / 0.55), rgb(90 60 210 / 0.55)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); color: #fff; }
.thumb-time:active { background: rgb(255 255 255 / 0.12); transition-duration: .06s; }
.thumb-time.on:active { filter: brightness(1.15); }
html:not(.thumb) .thumb-time { display: none; }
.time-icon { display: grid; place-items: center; min-width: 30px; height: 32px; line-height: 1; }
.time-icon.on { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; }
.time-cap { flex: none; height: 6.5px; margin-top: 4.1px; font-size: 6.5px; line-height: 6.5px; font-weight: 800; letter-spacing: .06em; opacity: .75; white-space: nowrap; }
.time-word { --f: 13.5px; flex: none; height: var(--f); margin-top: calc(14.9px - .8633 * var(--f)); font-size: var(--f); font-weight: 750; letter-spacing: -.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.time-word.long { --f: 12px; letter-spacing: -.035em; }
.time-word.longer { --f: 11px; letter-spacing: -.04em; } /* ("9:30pm–12:00am": a 360px phone's bar still fits it) */
.time-word small { margin-left: .5px; font-size: 8.5px; font-weight: 800; letter-spacing: 0; }
.time-icon.part .time-word { --f: 12.5px; margin-top: 2.6px; }
.time-icon.part > .time-part { width: 11px; height: 11px; margin-top: 2.4px; background: currentColor; opacity: .9; }
.time-glyph { display: block; width: 21px; height: 21px; background: rgb(244 241 234 / 0.85); -webkit-mask: var(--time-clock) center / contain no-repeat; mask: var(--time-clock) center / contain no-repeat; }
/* the parts of the day's glyphs, each in its own light */
.time-part { display: block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.time-part.g-sunrise { --m: var(--sunrise); --ink-g: #e8c48a; }
.time-part.g-sun { --m: var(--time-sun); --ink-g: #f2cf7d; }
.time-part.g-sunset { --m: var(--time-sunset); --ink-g: #f0a27a; }
.time-part.g-moon { --m: var(--moon); --ink-g: #a9bbe6; }

/* ——— The picker: the month's layer (the page dimmed and blurred, the button lifted, the card the
   pickers' glass grown from the button, the × key over it), its bars rising from the button's side
   (--in). With less motion, just faded ——— */
.time-pop { position: fixed; inset: 0; z-index: calc(var(--z-screen) + 10); color: var(--ink); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.time-shade { position: absolute; inset: 0; background: rgb(6 5 10 / 0.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s var(--set-off); }
.time-pop.up .time-shade { opacity: 1; }
.time-pop.going .time-shade { opacity: 0; transition-duration: .18s; }
.time-lift {
  position: absolute; border-radius: 22px; background: rgb(28 26 38 / 0.7); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 22px -12px rgba(0, 0, 0, 0.9); transition: transform .28s var(--set-off), box-shadow .28s var(--set-off);
}
.time-lift > .thumb-time { width: 100%; pointer-events: none; }
.time-pop.up .time-lift { transform: scale(1.06); box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 22px 40px -16px rgb(0 0 0 / 0.9); }
.time-pop.going .time-lift { transform: none; transition-duration: .18s; }
.time-card {
  position: absolute; box-sizing: border-box; padding: 18px 14px 14px; border-radius: 28px;
  background: var(--pick-glass); backdrop-filter: blur(28px) saturate(1.8); -webkit-backdrop-filter: blur(28px) saturate(1.8); box-shadow: var(--pick-glass-edge);
  opacity: 0; transform: translateY(14px) scale(0.94); will-change: transform, opacity; transition: transform .3s var(--set-off), opacity .2s var(--set-off), translate .3s var(--set-off);
}
.time-pop.has-clear > .time-card { translate: 0 -46px; }
.time-pop.up .time-card { opacity: 1; transform: none; }
.time-pop.going .time-card { opacity: 0; transform: translateY(10px) scale(.96); transition: transform .18s var(--set-off), opacity .14s var(--set-off); }
/* the × key over the button, the month's clear (cards.css's .clear) */
.time-pop > .clear {
  position: absolute; z-index: 3; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--ink-soft); background: linear-gradient(rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.04)); box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.08);
  opacity: 0; transform: translateY(10px) scale(.8); transition: opacity .2s var(--set-off) .05s, transform .3s var(--set-off) .05s;
}
.time-pop.up > .clear { opacity: 1; transform: none; }
.time-pop.going > .clear { opacity: 0; transition-delay: 0s; }
.time-pop > .clear.now { display: none; }
.time-pop > .clear:active { background: var(--pick-press); color: var(--ink); }

/* its head: the title, the switch (the month's chip glass, the end chosen violet), the day and cinemas */
.time-head { padding: 0 4px; }
.time-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.time-title { min-width: 0; margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-where { margin: 3px 0 0; font-size: .8rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.time-modes { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 12px; background: var(--time-chip); box-shadow: var(--time-chip-edge); }
.time-mode { height: 26px; padding: 0 9px; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); font: inherit; font-size: .72rem; font-weight: 650; white-space: nowrap; cursor: pointer; transition: background .18s, color .18s; }
.time-mode[aria-checked="true"] { background: var(--pick-on); box-shadow: var(--pick-on-glow); color: #fff; }

/* the stretch in big figures: each time flush under its label, its AM or PM small after it, each
   slot as wide as its widest (time-filter.js); or the stretch in words; its films at the right (on
   a line of their own under the times when a Try doesn't fit beside them) */
.time-read { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 12px 4px 8px; }
:is(.time-end, .time-words) { display: grid; grid-template-columns: auto 1fr; column-gap: 3px; align-items: baseline; justify-items: start; }
:is(.time-end, .time-words) small { grid-column: 1 / -1; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--time-quiet); }
:is(.time-end, .time-words) b { font-size: 1.75rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
:is(.time-end, .time-words) span { font-size: .85rem; font-weight: 650; color: var(--ink-faint); }
.time-end.open b { color: var(--ink-faint); }
.time-approx { font-style: normal; font-size: .9em; font-weight: 500; letter-spacing: .01em; text-transform: none; color: rgb(244 241 234 / 0.32); } /* ("(approx)": not all know ≈) */
.time-words { display: none; }
.time-read.in-words .time-words { display: grid; }
.time-read.in-words :is(.time-end, .time-dash) { display: none; }
.time-dash { flex: none; align-self: center; width: 14px; height: 2px; margin: 14px 2px 0; border-radius: 1px; background: var(--time-quiet); }
.time-films { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding-bottom: 3px; }
.time-films.trying { padding-bottom: 4px; } /* (a Try that far up, clear of the NOW over the chart once now is at the right) */
.time-count { display: flex; align-items: baseline; gap: 4px; }
.time-count b { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.time-count span { font-size: .8rem; color: var(--ink-faint); }
.time-films.zero .time-count b { color: var(--ink-faint); }
.time-try { display: flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border: 0; border-radius: 11px; background: var(--pick-press); color: var(--ink); font: inherit; font-size: .72rem; font-weight: 650; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.time-try-chev { width: 5px; height: 5px; margin-left: 1px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
@media (max-width: 379px) { /* (a 360px phone: a size down, so the title and the switch, and both times and the films, each fit a line) */
  .time-title { font-size: 1.08rem; }
  .time-mode { padding: 0 8px; }
  :is(.time-end, .time-words) b { font-size: 1.5rem; }
  .time-count b { font-size: 1.15rem; }
}

/* the chart, on one scale (.time-scale, the rail's width): each bar its half hour, its paint 1px in
   from each edge; those in the stretch violet; in Finish by, each lit as far as its films are out in
   time (.time-fit); the stretch's box ringed as today's date is (.month-cell.today); now, a red line.
   A screen too short for the card: the bars and the parts' chips shorter (--less-bars, --less-chips:
   time-filter.js's fit) */
.time-chart { position: relative; height: calc(104px - var(--less-bars, 0px)); margin-top: 6px; padding: 0 6px; touch-action: none; cursor: ew-resize; }
.time-scale { position: absolute; left: 6px; right: 6px; top: 0; bottom: 0; }
.time-bars { position: absolute; left: 0; right: 0; top: 6px; height: calc(74px - var(--less-bars, 0px)); }
.time-bar {
  position: absolute; bottom: 0; box-sizing: border-box; height: calc(var(--h) * 100%); min-height: 3px; padding: 0 1px; border-radius: 3px 3px 1.5px 1.5px;
  background: rgb(255 255 255 / 0.14); background-clip: content-box; transform-origin: 50% 100%;
  transform: scaleY(0); transition: transform .32s var(--set-off) var(--in, 0s), background .15s;
}
.time-pop.up .time-bar { transform: none; }
.time-pop.going .time-bar { transition-delay: 0s; }
.time-bar.none { height: 3px; background-color: rgb(255 255 255 / 0.06); }
.time-bar.in { background: var(--pick-on); background-clip: content-box; }
.time-bar.in.none { background: var(--pick-press); background-clip: content-box; }
.time-bar.past { opacity: .32; }
.time-chart.all .time-bar.in { background: rgb(255 255 255 / 0.3); background-clip: content-box; }
.time-chart.finish .time-bar.in { background: var(--pick-press); background-clip: content-box; }
.time-fit { display: none; }
.time-chart.finish .time-bar.in > .time-fit { display: block; position: absolute; left: 1px; right: 1px; bottom: 0; height: calc(var(--f, 1) * 100%); border-radius: inherit; background: var(--pick-on); transition: height .25s var(--set-off); }
.time-box { position: absolute; top: 0; height: calc(86px - var(--less-bars, 0px)); border-radius: 10px; pointer-events: none; background: color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.time-chart.all .time-box { opacity: 0; }
.time-box.held { background: var(--pick-press); }
.time-now { position: absolute; top: -2px; height: calc(90px - var(--less-bars, 0px)); width: 0; margin-left: -.75px; border-left: 1.5px solid rgb(255 92 92 / 0.8); pointer-events: none; }
.time-now span { position: absolute; top: -9px; left: -12px; width: 24px; text-align: center; font-size: .5rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: #ff8a8a; }
.time-rail { position: absolute; left: 0; right: 0; top: calc(90px - var(--less-bars, 0px)); height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.09); }
.time-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; background: var(--pick-on); }
.time-chart.all .time-fill { background: rgb(255 255 255 / 0.24); }
.time-knob {
  position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; outline: none;
  background: var(--pick-on); box-shadow: var(--pick-on-glow), 0 0 0 2px rgb(16 15 22 / 0.9); transition: transform .18s var(--set-off), background .15s, box-shadow .15s;
}
.time-knob::after { content: ""; position: absolute; inset: 9px 11px; border-left: 1.5px solid rgb(255 255 255 / 0.75); border-right: 1.5px solid rgb(255 255 255 / 0.75); }
.time-knob.held, .time-knob:focus-visible { transform: scale(1.18); background: var(--pick-lift); box-shadow: var(--pick-lift-glow); }
.time-chart.glide :is(.time-knob, .time-fill, .time-box) { transition: left .3s var(--set-off), width .3s var(--set-off), transform .18s var(--set-off), opacity .2s; }
.time-axis { position: relative; height: 12px; margin: 6px 6px 0; font-size: .68rem; font-weight: 600; color: var(--time-quiet); font-variant-numeric: tabular-nums; }
.time-axis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.time-axis span:first-child { transform: none; }
.time-axis span:last-child { transform: translateX(-100%); }

/* the parts of the day: the month's chips, each its glyph over its name; picked, violet */
.time-parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.time-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: calc(52px - var(--less-chips, 0px)); min-width: 0; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--time-chip); box-shadow: var(--time-chip-edge); color: var(--ink); font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.94); transition: transform .3s var(--set-off) var(--in, 0s), opacity .2s var(--set-off) var(--in, 0s), background .15s, color .15s, box-shadow .15s;
}
.time-pop.up .time-chip { opacity: 1; transform: none; }
.time-pop.going .time-chip { opacity: 0; transition-delay: 0s; transition-duration: .12s; }
.time-chip > .time-part { width: 16px; height: 16px; background: var(--ink-g); }
.time-chip:active { background: var(--pick-press); transition-duration: .06s; }
.time-chip.on { background: var(--pick-on); box-shadow: var(--pick-on-glow); color: #fff; }
.time-chip.on > .time-part { background: #fff; }
.time-chip.time-pop-in { animation: time-pop-in .26s var(--set-off); }
@keyframes time-pop-in { 40% { transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) { .time-card, .time-bar, .time-chip, .time-pop > .clear { transition-duration: .01s !important; transition-delay: 0s !important; } }