/* ᱢᱟᱹᱦᱤᱛ Mạhit — all the styling lives here.
   Design language shared with Santali Pad: navy #102A42 ink, grey neutrals,
   orange #F39822 highlight, Figtree for Latin UI beside the Ol Chiki face,
   1px hairline edges, 10–16px corners, pill chips, an orange focus ring.
   Colours come from CSS variables that app.js changes as the sky changes. */

* { box-sizing: border-box; }

/* Any rule that sets `display` beats the browser's own [hidden] rule, so a
   card styled `display: flex` would stay visible when hidden. This one line
   makes the hidden attribute mean what it says, everywhere. */
[hidden] { display: none !important; }

/* No pinch-zoom, no double-tap zoom, no rubber-band scroll: it should feel
   like an app once installed, not like a web page. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

:root {
  /* these six are rewritten by app.js for each sky */
  --sky-top: #2F6EA5;
  --sky-mid: #8DB6DA;
  --sky-bot: #E5EAF1;
  --txt: #102A42;
  --mut: #5B6574;
  --card: rgba(255, 255, 255, 0.8);
  --edge: rgba(255, 255, 255, 0.75);
  --line: rgba(16, 42, 66, 0.10);
  --soft: rgba(255, 255, 255, 0.5);

  /* app.js rewrites these three per sky; every pair clears 4.5:1 on its card */
  --accent: #9A5200;        /* accent for TEXT (orange family) */
  --accent-solid: #102A42;  /* accent for FILLS, under --on-fill */
  --on-fill: #FFFFFF;       /* text on a fill: white on navy, navy on orange */
  --mark: #2F6EA5;          /* the festival dot */
  --brand: #102A42;         /* fixed: the navy of the app icon */
  --highlight: #F39822;     /* focus ring and small highlights, as in Santali Pad */
  --radius: 16px;
  /* Each embedded face declares a unicode-range, so they only take the block
     they cover and everything else falls through to the system font. */
  --font-ui: 'Ol Chiki', 'Odia', 'Figtree', 'Noto Sans Bengali', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html, body { height: 100%; }

:focus-visible { outline: 2px solid var(--highlight); outline-offset: 2px; }
button { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--txt);
  background: var(--sky-bot);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior: none;
  transition: color .5s ease;
  /* stop a long-press selecting the grid like text */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- the sky ---------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(172deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bot) 100%);
  transition: background 1.2s ease;
  overflow: hidden;
}
.cloud {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  opacity: .11;
  filter: blur(34px);
}
.cloud-a { width: 380px; height: 110px; top: 12%;  left: -90px; }
.cloud-b { width: 300px; height: 90px;  top: 46%;  right: -80px; }

/* ---------- layout ---------- */
.app {
  max-width: 520px;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100%;
  min-height: 100dvh;
}

/* ---------- glass card ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
}
body.glass .card {
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
body:not(.glass) {
  --card: rgba(255, 255, 255, 0.97);
}
body:not(.glass).dark {
  --card: rgba(17, 34, 54, 0.95);
}

/* ---------- top bar ---------- */
.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 12px;
}
.mark {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: #FFFFFF;             /* white tile, like Santali Pad's logo */
  box-shadow: 0 0 0 1px var(--line), inset 0 0 0 2px rgba(243, 152, 34, 0.9);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700;
}
.bar-name { flex-grow: 1; min-width: 0; line-height: 1.25; }
.bar-name strong { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.bar-name span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt);          /* sits on the open sky, so use the ink, softened */
  opacity: .78;
}

.chip {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 13px 0 9px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--edge);
  color: var(--txt);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.chip svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--accent);
}
.chip[hidden] { display: none; }
.icon-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--txt);
  cursor: pointer;
}
.icon-btn.box {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--edge);
  color: var(--txt);
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- month title ---------- */
.title-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 0 4px 12px;
}
.title-text { flex-grow: 1; min-width: 0; }
.title-text h1 {
  margin: 0;
  display: inline;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.year {
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  margin-left: 8px;
}
.range {
  font-size: 11.5px;
  color: var(--mut);
  margin-top: 3px;
}
.navs { display: flex; gap: 4px; flex-shrink: 0; }

/* ---------- the calendar ---------- */
/* The stage grows to fill whatever height is left, and the grid rows share it
   out, so the calendar fills the screen instead of floating in the top half. */
.stage {
  perspective: 1400px;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;  /* card sits under the title; slack falls below */
  min-height: 0;
}
.sheet {
  width: 100%;
  container-type: inline-size;   /* lets the header size itself off the card */
  display: flex;
  flex-direction: column;
  padding: 8px 8px 10px;
  transform-origin: center center;
  will-change: transform, opacity;
}
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.week { font-size: 12.5px; }   /* app.js shrinks this to fit the longest name */
.week div {
  text-align: center;
  padding: 3px 1px 7px;
  font-size: inherit;
  font-weight: 700;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
}
.week div.wend { color: var(--accent); }

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}
.cell {
  aspect-ratio: 1 / 1.3;    /* taller than square: room for both numerals */
  border: 0;
  background: none;
  padding: 0;
  border-radius: 10px;
  font: inherit;
  color: var(--txt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
}
.cell.blank { cursor: default; }
.cell b { font-size: 17px; font-weight: 600; line-height: 1; }
.cell small { font-size: 9px; line-height: 1; color: var(--mut); }
.cell.wend b { color: var(--accent); }
.cell.today { background: var(--accent-solid); }
.cell.today b, .cell.today small { color: var(--on-fill); }
.cell:active:not(.blank) { transform: scale(.94); }
/* the festival dot under a day */
.cell u {
  display: block;
  width: 4px; height: 4px;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--mark);
}
.cell.today u { background: var(--on-fill); }

/* ---------- weather ---------- */
.wxcard {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
}
.wx-icon svg, .wxask svg { width: 30px; height: 30px; }
.wxcard svg, .daywx svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--mut);
}
.wx-icon { flex-shrink: 0; display: flex; }
.wx-main { flex-grow: 1; min-width: 0; }
.wx-line { display: flex; align-items: baseline; gap: 8px; }
.wx-line b { font-size: 23px; font-weight: 700; line-height: 1; }
.wx-line span { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.wx-main small { display: block; font-size: 10.5px; color: var(--mut); margin-top: 4px; }
.wx-side { flex-shrink: 0; text-align: right; }
.wx-side small { display: block; font-size: 10px; color: var(--mut); line-height: 1.5; }
.wx-side .wx-age { opacity: .75; }

.wxask {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
}
.wxask > span { flex-grow: 1; min-width: 0; }
.wxask strong { display: block; font-size: 13.5px; font-weight: 600; }
.wxask small { display: block; font-size: 10.5px; color: var(--mut); margin-top: 3px; line-height: 1.5; }
.wxask button {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--accent-solid);
  color: var(--on-fill);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wxask button:disabled { opacity: .6; }

/* weather inside the day sheet */
.daywx {
  margin-top: 4px;
  margin-bottom: 14px;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--edge);
}
.dw-top { display: flex; align-items: center; gap: 10px; }
.dw-top svg { width: 26px; height: 26px; flex-shrink: 0; }
.dw-t { font-size: 19px; font-weight: 700; }
.dw-t i { font-style: normal; font-size: 13px; font-weight: 500; color: var(--mut); }
.dw-c { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.dw-sun { font-size: 11px; color: var(--mut); margin-top: 7px; }
.dw-hours { display: flex; gap: 6px; margin-top: 11px; }
.dw-hours span {
  flex-grow: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px;
  border-radius: 11px;
  background: var(--card);
}
.dw-hours small { font-size: 9.5px; color: var(--mut); }
.dw-hours svg { width: 18px; height: 18px; }
.dw-hours b { font-size: 12.5px; font-weight: 600; }

/* a settings row that opens something, rather than toggling */
.setrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  font: inherit;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
}
.setrow > span:first-child { flex-grow: 1; min-width: 0; }
.setrow strong { display: block; font-size: 14px; font-weight: 600; }
.setrow small { display: block; font-size: 11px; color: var(--mut); margin-top: 2px; }
.setval { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent); }
.setrow svg {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--mut);
}

/* the town search */
.search { display: flex; gap: 8px; }
.search input {
  flex-grow: 1;
  min-width: 0;
  height: 46px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--txt);
  font: inherit;
  font-size: 15px;
}
.search button {
  flex-shrink: 0;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-solid);
  color: var(--on-fill);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* the line under the calendar naming this month's festivals */
.strip {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 12px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--soft);
  color: var(--txt);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.foot {
  font-size: 10.5px;
  color: var(--mut);
  text-align: center;
  padding: 12px 8px 0;
  line-height: 1.55;
  flex-shrink: 0;
}

/* ---------- today card, fills the space under the calendar ---------- */
.todaycard {
  margin-top: auto;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 14px;
  font: inherit;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
}
.todaycard svg {
  width: 19px; height: 19px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--mut);
}
.tc-num {
  flex-shrink: 0;
  width: 50px; height: 50px;
  border-radius: 12px;
  background: var(--accent-solid);
  color: var(--on-fill);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.tc-body { flex-grow: 1; min-width: 0; }
.tc-wd { display: block; font-size: 15px; font-weight: 600; }
.tc-sub { display: block; font-size: 11.5px; color: var(--mut); margin-top: 3px; }

/* ---------- drawers ---------- */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 11, 20, .45);
  z-index: 40;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  max-height: 86vh;
  overflow-y: auto;
  margin: 0 auto;
  max-width: 520px;
  padding: 8px 16px calc(22px + env(safe-area-inset-bottom));
  background: var(--card);
  border: 1px solid var(--edge);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  animation: rise .26s cubic-bezier(.2, .7, .3, 1);
}
body.glass .drawer {
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
}
@keyframes rise { from { transform: translateY(100%) } to { transform: none } }

.grip {
  display: block;
  width: 44px; height: 22px;
  margin: 0 auto 8px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.grip::after {
  content: '';
  position: absolute;
  left: 50%; top: 9px;
  transform: translateX(-50%);
  width: 38px; height: 4px;
  border-radius: 999px;
  background: var(--mut);
  opacity: .5;
}

.drawer h2 { margin: 2px 0 14px; font-size: 20px; font-weight: 600; }
.drawer h2 span { font-size: 13px; color: var(--mut); font-weight: 500; margin-left: 6px; }
.drawer h2 span#parabTitle { font-size: inherit; color: inherit; font-weight: inherit; margin-left: 0; }
.drawer h3 {
  margin: 16px 0 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mut);
  font-weight: 600;
}

.day-head { display: flex; align-items: flex-start; gap: 14px; padding: 2px 2px 14px; }
.day-big { font-size: 66px; font-weight: 700; line-height: .85; color: var(--accent); }
.day-meta { padding-top: 4px; min-width: 0; }
.day-wd { font-size: 19px; font-weight: 600; }
.day-sub { font-size: 12.5px; color: var(--mut); margin-top: 3px; }

.rows { display: flex; flex-direction: column; }
.rows div {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
}
.rows span {
  width: 96px;
  flex-shrink: 0;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
}
.rows strong { font-size: 15.5px; font-weight: 500; }

/* festivals on the day sheet */
.events { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.events div {
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--edge);
}
.events strong { display: block; font-size: 14.5px; font-weight: 600; }
.events small { display: block; font-size: 11px; color: var(--mut); margin-top: 3px; line-height: 1.5; }

/* the festival list for the year */
.plist { display: flex; flex-direction: column; gap: 8px; }
.pitem {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--edge);
  font: inherit;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
}
.pitem:disabled { cursor: default; opacity: .78; }
.pwhen {
  flex-shrink: 0;
  width: 54px;
  text-align: center;
  padding-top: 1px;
}
.pwhen b { display: block; font-size: 19px; font-weight: 700; color: var(--accent); line-height: 1; }
.pwhen small { display: block; font-size: 9.5px; color: var(--mut); margin-top: 3px; line-height: 1.25; }
.pbody { flex-grow: 1; min-width: 0; }
.pbody strong { display: block; font-size: 14.5px; font-weight: 600; }
.pbody small { display: block; font-size: 11px; color: var(--mut); margin-top: 3px; line-height: 1.5; }
.drawer h2 em { font-style: normal; color: var(--accent); }
.drawer code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: .92em;
  padding: 1px 4px;
  border-radius: 4px;
  background: var(--soft);
}

.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--edge);
  font: inherit;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
}
/* selected: tinted like Santali Pad's chips, not a heavy outline */
.opt.on {
  background: color-mix(in srgb, var(--accent-solid) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent-solid) 45%, transparent);
}
.opt i {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 2px solid var(--mut);
}
.opt.on i { border: 5px solid var(--accent-solid); background: var(--on-fill); }
.opt u { text-decoration: none; display: block; font-size: 16px; font-weight: 600; }
.opt small { display: block; font-size: 11px; color: var(--mut); margin-top: 2px; }

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-top: 1px solid var(--line);
}
.switch-row > div { flex-grow: 1; }
.switch-row strong { display: block; font-size: 14px; font-weight: 600; }
.switch-row small { display: block; font-size: 11px; color: var(--mut); margin-top: 2px; }

.sw {
  flex-shrink: 0;
  position: relative;
  width: 50px; height: 30px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mut) 45%, transparent);
  cursor: pointer;
  transition: background .18s ease;
}
.sw[aria-checked="true"] { background: var(--accent-solid); }
.sw span {
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(5, 11, 20, .25);
  transition: left .18s cubic-bezier(.2, .7, .3, 1);
}
.sw[aria-checked="true"] span { left: 23px; }
.dark .sw[aria-checked="true"] span { background: var(--on-fill); }

/* Appearance: a segmented control like Santali Pad's script bar */
.seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--edge);
}
.seg-btn {
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mut);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.seg-btn[aria-pressed="true"] {
  background: var(--accent-solid);
  color: var(--on-fill);
}

.primary {
  display: block;
  width: 100%;
  margin-top: 18px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--accent-solid);
  color: var(--on-fill);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.note {
  font-size: 11px;
  color: var(--mut);
  line-height: 1.6;
  margin: 16px 2px 0;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}