/* =========================================================================
   Sikhs in UAE — samagam schedule
   Built mobile-first. Desktop simply centres the same narrow column.

   Colour: deep Sikh blue carries the structure, saffron is reserved for the
   few things that genuinely deserve the eye — what is next, and the prompt to
   install. Each samagam type owns three tones: an accent that clears 4.5:1 on
   white, a deep end for gradients that carry white text, and a near-white
   tint. Neutrals are cool rather than warm, so the blue sits on the page
   instead of fighting a parchment background.

   Type: Manrope, self-hosted. Uber Move and Airbnb Cereal are both
   proprietary, so this takes the Uber side of that reference — a semi-condensed
   modern grotesque, cooler and more compact than a Cereal-alike, with open
   apertures and a big x-height that hold up at 13px on a phone. Being
   semi-condensed also buys a little width back, which a long line like
   "Unit 7, Ground Floor, Area LMN, Dubai" spends well.

   Three weights, latin only, about 72KB in total, served from our own box
   rather than a third party, with font-display: swap behind a fallback stack
   that puts Avenir Next first — so a phone on a weak signal paints readable
   text immediately and swaps when the file lands. The serif is kept for the
   wordmark alone.
   ========================================================================= */

@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --blue-950: #08192F;
  --blue-900: #0C2547;
  --blue-800: #123464;
  --blue-700: #17458A;
  --blue-600: #1D5AB0;
  --blue-500: #2E75D4;
  --blue-200: #BED5F3;
  --blue-100: #DEEAF9;
  --blue-50:  #EFF5FD;

  --saffron-800: #7E400A;
  --saffron-700: #98500B;
  --saffron-600: #BD6A10;
  --saffron-500: #E08A1E;
  --saffron-400: #F2A343;
  --saffron-100: #FDE8C9;
  --saffron-50:  #FEF6EA;

  --ink:    #101828;
  --ink-2:  #344054;
  --muted:  #667085;
  --faint:  #98A2B3;
  --line:   #E4E7EC;
  --line-2: #F1F3F6;
  --paper:  #F4F6FA;
  --card:   #FFFFFF;

  --danger:    #B42318;
  --danger-bg: #FEF3F2;
  --danger-line:#FCD9D4;
  --good:      #067647;
  --good-bg:   #ECFDF3;
  --good-line: #C4EBD5;

  --accent: var(--blue-600);
  --deep:   var(--blue-800);
  --tint:   var(--blue-50);

  --font-display: ui-serif, "New York", Charter, "Iowan Old Style", Georgia,
                  "Noto Serif", "Times New Roman", serif;
  /* Avenir Next sits ahead of the platform default on purpose: it is already
     on every iPhone and Mac, and it is far closer to Manrope than SF Pro is,
     so the moment before the webfont swaps looks intentional. */
  --font-body: "Manrope", "Avenir Next", Avenir,
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --radius:    20px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  /* Soft and wide rather than tight and dark — a 2012 drop shadow is half of
     what makes an interface look its age. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06), 0 0 0 1px rgba(16, 24, 40, .04);
  --shadow:    0 1px 2px rgba(16, 24, 40, .07), 0 6px 16px -8px rgba(16, 24, 40, .16);
  --shadow-md: 0 2px 5px rgba(16, 24, 40, .07), 0 14px 30px -12px rgba(16, 24, 40, .22);
  --shadow-lg: 0 24px 60px -14px rgba(16, 24, 40, .28);

  --gutter: 18px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* An author-level `display` beats the browser's own [hidden] rule, and several
   panels below are flex. Without this the countdown shows all three of its
   states at once. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  /* 500 rather than 400 as the floor. At 400 Manrope reads thin on a bright
     phone screen — the whole page looked undernourished rather than light. */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-weight: 700; margin: 0; letter-spacing: -.022em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--blue-700); }

:focus-visible {
  outline: 3px solid var(--saffron-400);
  outline-offset: 2px;
  border-radius: 8px;
}

.wrap {
  max-width: 580px;
  margin: 0 auto;
  padding: 0 var(--gutter) calc(40px + var(--safe-b));
}
.wrap--narrow { max-width: 440px; }

.icon { width: 20px; height: 20px; flex: none; }

/* ---------------------------------------------------------- masthead ---- */

.masthead {
  background: var(--blue-900);
  background: linear-gradient(145deg, var(--blue-800) 0%, var(--blue-950) 100%);
  color: #fff;
  padding: calc(11px + env(safe-area-inset-top, 0px)) var(--gutter) 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--saffron-500), var(--saffron-400) 46%, transparent);
}
.masthead--sevadar { background: linear-gradient(145deg, #1C3049 0%, #0A1725 100%); }

.masthead__mark img { border-radius: 8px; width: 26px; height: 26px; }
.masthead__org {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; letter-spacing: -.012em; line-height: 1.15;
  flex: 1; min-width: 0;
}
.masthead__text { flex: 1; min-width: 0; }
.masthead__text .masthead__org { flex: none; font-size: 20px; }
.masthead__sub {
  font-size: 12px; color: var(--blue-200); margin-top: 2px;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.masthead__back,
.masthead__action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; min-height: 42px; margin-left: -8px;
  color: #fff; text-decoration: none; border-radius: 12px;
  background: rgba(255,255,255,.12);
}
.masthead__action {
  margin: 0 -2px 0 0; padding: 0 14px; font-size: 14px; font-weight: 600;
}

/* ----------------------------------------------------- install banner ---- */

/* Permanent, and only one line tall. It is not dismissible on purpose — the
   point is that sangat stop hunting for the link — so it has to earn its keep
   by taking as little room as a strip can. */
.install {
  display: flex; align-items: center; gap: 10px;
  padding: 8px var(--gutter);
  background: linear-gradient(180deg, #F4F2FE, #ECE9FC);
  border-bottom: 1px solid #DFD9F7;
}
.install__icon { flex: none; border-radius: 8px; box-shadow: var(--shadow-xs); }
.install__text {
  flex: 1; min-width: 0;
  font-size: 12px; color: #5A5473; line-height: 1.3;
}
.install__text strong {
  display: block; font-size: 14px; font-weight: 700; color: #3D3376;
}
.install__go {
  flex: none; border: 0; cursor: pointer;
  background: #5B4FC7; color: #fff;
  font: 700 14.5px/1 var(--font-body);
  padding: 0 17px; min-height: 38px; border-radius: 999px;
}
.install__go:active { background: #4A3FB0; }

/* Already installed — say nothing. The media query covers Chrome and current
   iOS; the class is set before first paint for older iOS, which only reports
   navigator.standalone. */
@media (display-mode: standalone) { .install { display: none !important; } }
html.standalone .install { display: none !important; }

/* --------------------------------------------------------------- deck ---- */

/* The next few samagams, side by side and swipeable. Most sangat will never
   scroll past the fold, so the two or three that are queued behind the next
   one live up here where a flick reaches them. */
.deck { margin: 12px 0 18px; }

.deck__bar {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-bottom: 6px;
}
.deck__count {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; margin-right: 2px;
}
.deck__arrow {
  width: 34px; height: 34px; padding: 0; flex: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 11px;
  background: #fff; color: var(--blue-700);
}
.deck__arrow .icon { width: 18px; height: 18px; }
.deck__arrow:active { background: var(--blue-50); }
.deck__arrow:disabled { color: var(--faint); opacity: .45; cursor: default; background: #fff; }

/* A plain horizontal scroller and nothing more — no script touches its height.
   The cards stretch to match the tallest so their bottom edges line up; a card
   whose cap is a few pixels shorter (a "Later" card has no counter pill) would
   otherwise sit visibly high against the one beside it. */
.deck__track {
  display: flex; align-items: stretch; gap: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 3px 0 12px;
}
.deck__track::-webkit-scrollbar { display: none; }

/* Just under full width, so the edge of the next one shows. That sliver is
   what tells somebody there is more here without a word of instruction. */
.slide {
  flex: 0 0 89%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.deck--single .slide { flex-basis: 100%; }

/* The colour cue in the deck is state, not type: blue for the one you are
   going to, grey for everything behind it. Each state just redefines the same
   three custom properties, so the cap, the pin, the counter pill and the
   relative-day line all follow without knowing anything about it. */
.slide--lead {
  --accent: var(--blue-600); --deep: var(--blue-800); --tint: var(--blue-50);
}
.slide--queued {
  --accent: #475569; --deep: #334155; --tint: #F1F5F9;
}

.slide__cap { position: relative; padding: 16px 18px 18px; border-top: 4px solid var(--accent); }
.slide--lead .slide__cap {
  background: linear-gradient(160deg, var(--blue-800) 0%, var(--blue-950) 100%);
  color: #fff;
}
.slide--lead .slide__cap::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(105% 85% at 86% -20%, var(--accent), transparent 62%);
  opacity: .7; pointer-events: none;
}
.slide--lead .slide__cap > * { position: relative; z-index: 1; }
.slide--queued .slide__cap { background: var(--tint); }

.slide__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.slide--lead .slide__eyebrow { color: rgba(255,255,255,.7); }
.slide--queued .slide__eyebrow { color: var(--accent); }

.slide__type {
  font-size: 25px; font-weight: 700; line-height: 1.12;
  letter-spacing: -.03em; margin-top: 4px;
}
.slide--lead .slide__type { color: #fff; }
.slide--queued .slide__type { color: var(--accent); }

.slide__title { font-size: 13.5px; margin-top: 3px; }
.slide--lead .slide__title { color: rgba(255,255,255,.82); }
.slide--queued .slide__title { color: var(--ink-2); }

/* Date and time are what the eye is meant to land on, and neither outranks
   the other — same size, same weight, one above the other. */
/* Regular weight, not semibold. Two bold lines under a bold title made the
   whole cap read as one shouting block. */
.slide__when {
  font-size: 16.5px; font-weight: 500; line-height: 1.38;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
/* A gap above, so the pair reads as one block of when rather than running on
   from the samagam's name. */
.slide__when:first-of-type { margin-top: 14px; }
.slide--lead .slide__when { color: #fff; }
.slide--queued .slide__when { color: var(--ink); }

.slide__rel { font-size: 14px; font-weight: 600; color: var(--accent); margin-top: 9px; }

.slide__body {
  display: flex; flex-direction: column; flex: 1;
  padding: 16px 18px 16px;
}
/* Extra height opens up between the address and the buttons rather than
   collecting under them, where it would read as a gap rather than padding. */
.slide__actions { margin-top: auto; padding-top: 13px; }
.slide__actions { display: flex; gap: 8px; }
.slide__actions .btn--primary { flex: 1.9; min-width: 0; }
.slide__actions .btn--ghost { flex: 1; min-width: 0; }

/* Side by side stops fitting on the oldest phones, and "Open in Maps" breaking
   across two lines is not something this button can afford to do. */
@media (max-width: 359px) {
  .slide__actions { flex-direction: column; }
  .slide__actions .btn { flex: none; }
}

/* The card's footer strip. Centred when it holds only the link, split when
   there is a poster to reach as well. */
.slide__foot {
  display: flex; align-items: stretch;
  border-top: 1px solid var(--line-2);
}
.slide__foot--split .slide__poster {
  border-right: 1px solid var(--line-2);
}

/* Available, not insistent: the weight of a caption, in the muted grey the
   rest of the card uses for secondary text. */
.slide__poster {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: none; padding: 15px 18px; border: 0; background: none; cursor: pointer;
  font: 600 15px/1 var(--font-body); color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.slide__poster:active { background: var(--paper); color: var(--ink-2); }
.poster__icon { width: 16px; height: 16px; flex: none; }

/* The link fills whatever the poster button leaves, so the tap target is the
   strip rather than two words in the middle of it. */
.slide__more {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 4px;
  font-size: 16px; font-weight: 600; color: var(--blue-700); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.slide__more:active { background: var(--blue-50); }

/* A highlight travelling across the words once every few seconds, then a long
   pause. The gradient is painted through the letterforms rather than over
   them, so there is no bar sliding about on top of the card.

   Guarded twice: browsers without background-clip:text never get the
   transparent fill, and reduced motion puts the flat colour back rather than
   freezing the sweep wherever it happened to stop. */
.slide__more-text { font-weight: 600; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .slide__more-text {
    background-image: linear-gradient(100deg,
      var(--blue-700) 0%, var(--blue-700) 42%,
      #8CBAF2 50%,
      var(--blue-700) 58%, var(--blue-700) 100%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine 4.2s ease-in-out infinite;
  }
}

/* Both ends stay inside 0-100%. A percentage position on an oversized
   background is what keeps the image covering the whole element; push it past
   either end and the uncovered letters get no paint, which with a transparent
   fill means they simply vanish. At 0% and 100% the visible slice is all base
   colour, so the highlight only appears while it is crossing. */
@keyframes shine {
  0%        { background-position: 100% 0; }
  45%, 100% { background-position: 0% 0; }
}
.slide__more-icon { width: 17px; height: 17px; margin-left: -4px; }

/* A slow fade rather than an actual blink — enough to catch the eye on a page
   somebody has already looked at, not enough to nag. Killed outright by the
   reduced-motion rule at the foot of this file. */
.slide__pulse {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--blue-600);
  animation: softpulse 2.4s ease-in-out infinite;
}
@keyframes softpulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .18; }
}

.deck--empty {
  text-align: center; padding: 28px 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.deck--empty .slide__eyebrow { color: var(--muted); margin-bottom: 10px; }
.deck__none { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.deck__none-sub { font-size: 14.5px; color: var(--muted); margin-top: 7px; }

/* ---------------------------------------------------------- countdown ---- */

/* Still secondary to the date and time above it, but sitting in a solid block
   of the type's own colour rather than dissolving into the dark cap. That
   block does double duty: it is the one place on the lead card where Saturday
   Amritvela and Sunday Amritvela plainly differ. */
.count { margin-top: 13px; font-size: 13px; line-height: 1.3; }

.count__live,
.count__now,
.count__over {
  display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
/* On the dark cap a solid blue pill sat too close to the navy behind it and
   read as a smudge. Glass instead: the cap shows through, the numbers stay
   white, and the shape is still legible as a pill. */
.slide--lead .count__live,
.slide--lead .count__now {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  padding: 6px 12px 7px; border-radius: 999px;
}

/* On the pale cap the opposite holds — a solid dark pill is exactly the
   contrast that works, just deeper than the slate the rest of the card uses. */
.slide--queued .count__live,
.slide--queued .count__now {
  background: #1E293B; color: #fff;
  padding: 6px 12px 7px; border-radius: 999px;
  box-shadow: 0 2px 8px -3px rgba(16, 24, 40, .45);
}

.count__icon { width: 15px; height: 15px; opacity: .8; }
.count__lead { opacity: .9; font-weight: 600; }
.count__unit { font-variant-numeric: tabular-nums; }
.count__unit b { font-weight: 700; font-size: 15px; letter-spacing: -.015em; }
.count--nodays [data-cell="days"] { display: none; }
.count--nohours [data-cell="hours"] { display: none; }

.count__now { font-weight: 700; }
.count__over { color: rgba(255,255,255,.85); }
.count__over a { color: #fff; font-weight: 700; }
.count__pulse {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 0 rgba(255,255,255,.7);
  animation: pulse 1.9s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* --------------------------------------------------------------- chip ---- */

.chip {
  flex: none; display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 999px;
  background: var(--blue-50); color: var(--blue-700);
  border: 1px solid var(--blue-100);
}
.chip--now {
  background: var(--saffron-500); color: #fff; border-color: var(--saffron-500);
  text-transform: uppercase; letter-spacing: .06em;
}

/* -------------------------------------------------------------- venue ---- */

.venue { display: flex; gap: 9px; align-items: flex-start; }
.venue__pin { width: 19px; height: 19px; color: var(--accent); margin-top: 2px; }
.venue--lg .venue__pin { width: 21px; height: 21px; }
.venue__lines { min-width: 0; }
.venue__primary {
  font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--ink);
  letter-spacing: -.025em;
}
.venue--lg .venue__primary { font-size: 21px; }
.venue__secondary { font-size: 15px; font-weight: 500; color: var(--ink-2);
                    margin-top: 2px; line-height: 1.4; }
.venue--tbc .venue__primary { color: var(--muted); font-style: italic; font-weight: 500; }

/* ------------------------------------------------------------- alerts ---- */

.alert {
  display: flex; gap: 9px; align-items: flex-start;
  margin-top: 14px; padding: 11px 13px;
  border-radius: var(--radius-xs);
  font-size: 14.5px; line-height: 1.4;
}
.alert__icon { width: 19px; height: 19px; margin-top: 1px; flex: none; }
.alert--cancelled {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-line);
}

/* ------------------------------------------------------------ buttons ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 12px;
  border-radius: var(--radius-sm);
  font: 600 16px/1 var(--font-body);
  /* Never wrap. "Open in Maps" breaking across two lines is the one
     button on the card that must not look uncertain, and a silent wrap
     is harder to notice than an overflow. */
  white-space: nowrap;
  letter-spacing: -.01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .08s ease, background .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.985); }
.btn__icon { width: 20px; height: 20px; flex: none; }

.btn--primary { background: var(--blue-700); color: #fff; box-shadow: var(--shadow-xs); }
.btn--primary:active { background: var(--blue-800); }

.btn--ghost { background: #fff; color: var(--blue-700); border-color: var(--blue-100); }
.btn--ghost:active { background: var(--blue-50); }

.btn--quiet { background: transparent; color: var(--muted); border-color: var(--line); }
.btn--danger { background: #fff; color: var(--danger); border-color: var(--danger-line); }
.btn--block { display: flex; width: 100%; }
.btn--small { min-height: 42px; padding: 0 14px; font-size: 14.5px; border-radius: var(--radius-xs);
              background: #fff; color: var(--blue-700); border-color: var(--blue-100); }

/* ------------------------------------------------------------ listing ---- */

.listing__title {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 18px 0 0;
}

/* Two segmented controls rather than one. Upcoming and Past share theirs
   because they are the same thing pointed in opposite directions; the
   calendar keeps its own, a gap away. */
.tabs { display: flex; gap: 9px; margin-bottom: 12px; }
.tabs__set {
  display: flex; gap: 3px; padding: 3px; flex: none;
  background: #E8ECF2; border-radius: var(--radius-xs);
}
.tabs__set--pair { flex: 1; min-width: 0; }

.tab {
  flex: 1; text-align: center; min-height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 12px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--muted);
  text-decoration: none; border-radius: 8px;
  transition: background .14s ease, color .14s ease;
}
.tab--on { background: #fff; color: var(--blue-800); box-shadow: var(--shadow-xs); }
.tab__icon { width: 16px; height: 16px; flex: none; }

/* On the narrowest phones the three words plus an icon stop fitting side by
   side, so the calendar keeps only its icon. */
@media (max-width: 359px) {
  .tab { padding: 0 8px; font-size: 14px; }
  .tabs__set:last-child .tab { font-size: 0; gap: 0; padding: 0 14px; }
  .tabs__set:last-child .tab__icon { width: 19px; height: 19px; }
}

.pills {
  display: flex; gap: 6px; margin-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.pills::-webkit-scrollbar { display: none; }
.pills--wrap { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

.pill {
  flex: none; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 13px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line);
  font: 600 14px/1 var(--font-body); color: var(--ink-2);
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pill--on {
  background: var(--tint); border-color: var(--accent); color: var(--accent);
  font-weight: 700;
}
.pill--fill { border-style: dashed; color: var(--blue-700); border-color: var(--blue-200); }

/* ------------------------------------------------------------ day group -- */

/* Everything on one date sits under one heading. Repeating the date down the
   page invites sangat to read the second entry as a different day. */
.day { margin-top: 16px; }
.day:first-of-type { margin-top: 12px; }

.day__head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 7px;
}
.day__title {
  flex: 1; min-width: 0;
  font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.022em;
}
.day__rel {
  flex: none; font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.day__rel--soon {
  background: var(--saffron-500); color: #fff;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.day__count {
  font-size: 13px; font-weight: 600; color: var(--saffron-700);
  margin: -4px 0 8px;
}

.cards { display: flex; flex-direction: column; gap: 8px; }

.card {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: var(--radius-sm);
  padding: 14px 12px 14px 15px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--accent);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .14s ease, transform .08s ease;
}
.card:active { transform: scale(.995); box-shadow: var(--shadow); }

.card__body { flex: 1; min-width: 0; }
.card__type {
  display: block;
  font-size: 17.5px; font-weight: 700; color: var(--accent); line-height: 1.25;
  letter-spacing: -.024em;
}
.card__title { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }

.card__time,
.card__venue {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 15.5px; color: var(--ink-2); margin-top: 7px; line-height: 1.38;
}
.card__venue strong { font-weight: 700; color: var(--ink); }
.card__icon { width: 16px; height: 16px; color: var(--faint); margin-top: 2px; }

.card__flag {
  display: inline-block;
  margin-top: 9px; padding: 5px 9px; border-radius: 8px;
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger-line);
  font-size: 13px; font-weight: 600;
}

.card__chevron { width: 18px; height: 18px; color: var(--faint); align-self: center; }

.card--past { box-shadow: none; }
.card--past .card__type { color: var(--ink-2); }
.card--cancelled .card__type { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.empty {
  text-align: center; color: var(--muted); font-size: 15px;
  padding: 30px 20px; background: #fff; border-radius: var(--radius-sm);
  border: 1px dashed var(--line); margin-top: 14px;
}

/* ----------------------------------------------------------- calendar ---- */

.cal {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid var(--line-2);
  padding: 8px 10px 12px; margin-top: 14px;
}
.cal__nav { display: flex; align-items: center; gap: 4px; }
.cal__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  color: var(--blue-700); border-radius: 12px; text-decoration: none;
}
.cal__arrow:active { background: var(--blue-50); }
.cal__month {
  flex: 1; text-align: center;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}

.cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; margin-top: 4px;
}
.cal__dow {
  text-align: center; padding: 6px 0 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--faint);
}
.cal__cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; aspect-ratio: 1 / 1; min-height: 40px;
  border-radius: var(--radius-xs);
  color: var(--ink-2); text-decoration: none;
}
.cal__num { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; }
.cal__dots { display: flex; gap: 2.5px; height: 6px; align-items: center; }
.cal__dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.cal__more { background: var(--faint); width: 5px; height: 2px !important; border-radius: 1px !important; }

.cal__cell--out { color: var(--faint); opacity: .55; }
.cal__cell--has { background: var(--paper); }
.cal__cell--has .cal__num { font-weight: 700; color: var(--ink); }
.cal__cell--has:active { background: var(--blue-50); }
.cal__cell--today {
  box-shadow: inset 0 0 0 2px var(--blue-600);
}
.cal__cell--today .cal__num { color: var(--blue-700); font-weight: 700; }

.cal__today {
  display: block; text-align: center; margin-top: 12px;
  font-size: 14.5px; font-weight: 600; color: var(--blue-700); text-decoration: none;
}

/* ------------------------------------------------------------- detail ---- */

/* Deliberately short. The card the visitor tapped already gave them the name,
   the date, the time and the venue, so none of that gets a panel of its own
   here — the notes do, because they are the only thing this page adds. */
.detail { padding: 18px 0 8px; }

.detail__head { display: flex; align-items: flex-start; gap: 10px; }
.detail__title {
  flex: 1; min-width: 0;
  font-size: 27px; line-height: 1.16; letter-spacing: -.03em;
}
.detail__sub { font-size: 14.5px; color: var(--muted); margin-top: 3px; }
.detail__when {
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); margin-top: 7px;
  font-variant-numeric: tabular-nums;
}

.note {
  margin-top: 16px; padding: 14px 15px;
  background: var(--card); border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); border-left: 4px solid var(--saffron-500);
  box-shadow: var(--shadow-xs);
}
.note__label {
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--saffron-700); margin-bottom: 5px;
}
.note__body { font-size: 16.5px; font-weight: 500; color: var(--ink); line-height: 1.55; }

.rowline { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; }
.rowline__icon { color: var(--blue-600); flex: none; margin-top: 1px; }
.rowline__icon .icon { width: 20px; height: 20px; }
.rowline__body { min-width: 0; }
.rowline__label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.rowline__value { display: block; font-size: 16px; font-weight: 500;
                  color: var(--ink); line-height: 1.35; }
.rowline__value--strong { font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.rowline__extra { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 2px; }
.detail__call { font-weight: 600; text-decoration: none; }

.detail__actions { display: flex; gap: 8px; margin-top: 18px; }
.detail__actions .btn--primary { flex: 1.9; min-width: 0; }
.detail__actions .btn--ghost { flex: 1; min-width: 0; }
@media (max-width: 359px) {
  .detail__actions { flex-direction: column; }
  .detail__actions .btn { flex: none; }
}

/* A preview, not the poster itself. Tapping opens it properly. */
.thumb {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin-top: 18px; padding: 10px; cursor: pointer; text-align: left;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
}
.thumb img {
  width: 62px; height: 62px; flex: none;
  object-fit: cover; border-radius: 10px; background: var(--paper);
}
.thumb__hint {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 600; color: var(--blue-700);
}
.thumb__icon { width: 17px; height: 17px; }

/* ------------------------------------------------------------- footer ---- */

.footer {
  text-align: center; padding: 14px var(--gutter) calc(32px + var(--safe-b));
  max-width: 580px; margin: 0 auto;
}
.footer__org {
  font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.footer__note { font-size: 13px; color: var(--faint); margin-top: 4px; }

/* -------------------------------------------------------- sheet/modal ---- */

.sheet { position: fixed; inset: 0; z-index: 80; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.5); }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; border-radius: 24px 24px 0 0;
  padding: 10px 22px calc(26px + var(--safe-b));
  box-shadow: var(--shadow-lg);
  animation: rise .28s cubic-bezier(.22,.8,.3,1);
  max-height: 88vh; overflow-y: auto;
}
@keyframes rise { from { transform: translateY(100%); } to { transform: none; } }
.sheet__grip {
  width: 40px; height: 4px; border-radius: 2px; background: var(--line);
  margin: 0 auto 16px;
}
.sheet__title { font-size: 22px; margin-bottom: 6px; }
.sheet__lede { font-size: 15px; color: var(--muted); margin-bottom: 18px; }

.sheet__choices { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.sheet__choices .btn { width: 100%; }

.steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.step { display: flex; gap: 12px; align-items: flex-start; }
.step__num {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: var(--blue-700); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step__body { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.step__body strong { color: var(--ink); }
.step__glyph { display: inline-flex; vertical-align: -5px; margin: 0 1px; color: var(--blue-700); }
.step__glyph svg { width: 19px; height: 19px; }

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8,16,28,.94);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border-radius: 8px; }
.lightbox__close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 14px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 26px; cursor: pointer;
}

/* ------------------------------------------------------------ sevadar ---- */

body.sevadar { background: #F2F4F8; }

.login {
  margin-top: 10vh; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 30px 24px calc(26px + var(--safe-b));
  text-align: center;
}
.login__lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--blue-50); color: var(--blue-700); margin-bottom: 14px;
}
.login__lock .icon { width: 26px; height: 26px; }
.login__title { font-size: 24px; }
.login__sub { font-size: 14px; color: var(--muted); margin-top: 4px; margin-bottom: 22px; }
.login__note { font-size: 13px; color: var(--faint); margin-top: 20px; line-height: 1.5; }
.login .field { text-align: left; }

.flash {
  display: flex; align-items: center; gap: 9px;
  margin: 16px 0 0; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line);
  font-size: 15px; font-weight: 600;
}
.flash__icon { width: 19px; height: 19px; flex: none; }

.formerror {
  margin: 16px 0 0; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line);
  font-size: 15px; font-weight: 600;
}

.addbtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; margin: 18px 0 24px;
  background: var(--blue-700); color: #fff; border-radius: var(--radius-sm);
  font-size: 16.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 18px -6px rgba(23,68,127,.5);
}
.addbtn__icon { width: 21px; height: 21px; }

.sevheading {
  font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px;
  display: flex; align-items: center; gap: 8px;
}
.sevheading__count {
  background: #E4E9F0; color: var(--ink-2); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; letter-spacing: 0;
}

.sevlist { display: flex; flex-direction: column; gap: 10px; }
.sevrow {
  background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
  border: 1px solid var(--line-2); border-left: 4px solid var(--accent);
  padding: 14px 15px;
}
.sevrow__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sevrow__type { font-size: 17px; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.sevrow__when { font-size: 15px; color: var(--ink); margin-top: 5px; }
.sevrow__rel { display: block; color: var(--muted); font-size: 13.5px; }
.sevrow__venue { font-size: 14.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
.sevrow__issues {
  margin-top: 9px; padding: 9px 11px 9px 26px; border-radius: 8px;
  background: var(--saffron-50); border: 1px solid var(--saffron-100);
  color: var(--saffron-800); font-size: 13.5px; line-height: 1.45;
  list-style: disc;
}
.sevrow__actions { display: flex; gap: 8px; margin-top: 12px; }
.sevrow__actions .btn { flex: 1; }

.tag {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
}
.tag--cancelled { background: var(--danger-bg); color: var(--danger); }
.tag--poster { background: var(--blue-50); color: var(--blue-700); }

/* --------------------------------------------------------------- form ---- */

.form { margin-top: 18px; }

.group {
  border: 1px solid var(--line-2); margin: 0 0 16px; padding: 16px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-xs);
}
.group__legend {
  font-size: 17px; font-weight: 700; color: var(--blue-800);
  padding: 0; margin-bottom: 4px; letter-spacing: -.02em;
}
.group__note { font-size: 13.5px; color: var(--saffron-700); margin-bottom: 14px; }

.field { display: block; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field__label { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field__opt { font-weight: 400; color: var(--faint); font-size: 13px; }
.field__hint { display: block; font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }

.input {
  display: block; width: 100%;
  min-height: 50px; padding: 12px 14px;
  font: 500 16.5px/1.4 var(--font-body); color: var(--ink);
  background: #FCFCFD; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none;
}
.input:focus { border-color: var(--blue-600); background: #fff; outline: none;
               box-shadow: 0 0 0 3px var(--blue-50); }
.input--area { min-height: 100px; resize: vertical; line-height: 1.5; }
.input--file { padding: 12px; background: #fff; font-size: 14.5px; }
select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
  padding-right: 40px;
}

.row { display: flex; gap: 12px; }
.row .field { flex: 1; min-width: 0; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--ink-2); line-height: 1.4; cursor: pointer;
}
.check--standalone { padding: 12px; background: var(--paper); border-radius: var(--radius-sm); }
.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--blue-700); }
.check em { color: var(--muted); font-size: 13.5px; font-style: normal; }

.quickfill { margin-bottom: 16px; }
.quickfill__label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }

.posterrow { display: flex; gap: 12px; align-items: center; margin-top: -4px; }
.posterrow__thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

.formactions { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.dangerform { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }

/* -------------------------------------------------------------- toast ---- */

.toast {
  position: fixed; left: 50%; bottom: calc(26px + var(--safe-b));
  transform: translate(-50%, 14px);
  max-width: calc(100% - 40px);
  background: var(--blue-950); color: #fff;
  padding: 12px 20px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; text-align: center; line-height: 1.35;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; z-index: 95;
  transition: opacity .2s ease, transform .2s ease;
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------- motion ---- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Stopping the sweep is not enough — without this the text would be left
     wearing whatever slice of the gradient the animation froze on. */
  .slide__more-text {
    background-image: none;
    -webkit-text-fill-color: var(--blue-700);
    color: var(--blue-700);
  }
}

/* Desktop is a rounding error in the audience, so it just gets breathing room. */
@media (min-width: 620px) {
  :root { --gutter: 24px; }
  .masthead, .install { padding-left: max(var(--gutter), calc(50vw - 290px + var(--gutter)));
                        padding-right: max(var(--gutter), calc(50vw - 290px + var(--gutter))); }
}