/* ═══════════════════════════════════════════════════════════════════
   NRI Outpost — Tools section (IST clock + Festivals)
   Uses existing palette variables (--ink, --paper, --paper-2, --rule,
   --saffron, --teal, --ink-2, --ink-3). No new tokens.
   ═══════════════════════════════════════════════════════════════════ */

#tools .tools-grid {
  display: grid;
  /* Up to 5 cards (clock / weather / cricket / fasts / festivals). At
     desktop width we use 3-col with the 4th + 5th cards flowing to a
     second row. Cards that are hidden (no Worker URL set yet) collapse
     out cleanly. */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
#tools .tool-card.tool-hidden { display: none; }

@media (max-width: 1280px) {
  #tools .tools-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  #tools .tools-grid { grid-template-columns: 1fr; }
}

#tools .tool-card {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
}

#tools .tool-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

/* ─── 1. IST CLOCK ─────────────────────────────────────────── */
.ist-time-big {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.ist-date-line {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: 4px;
}
.ist-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.ist-status-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--teal) 14%, var(--paper));
  color: color-mix(in oklab, var(--teal) 75%, var(--ink));
}
.ist-status-pill.tone-sleep   { background: color-mix(in oklab, var(--ink-3) 14%, var(--paper));  color: var(--ink-2); }
.ist-status-pill.tone-wake    { background: color-mix(in oklab, var(--teal) 14%, var(--paper));    color: color-mix(in oklab, var(--teal) 70%, var(--ink)); }
.ist-status-pill.tone-good    { background: color-mix(in oklab, #166534 14%, var(--paper));        color: #166534; }
.ist-status-pill.tone-lunch   { background: color-mix(in oklab, var(--saffron) 14%, var(--paper)); color: color-mix(in oklab, var(--saffron) 75%, var(--ink)); }
.ist-status-pill.tone-evening { background: color-mix(in oklab, #7c3aed 14%, var(--paper));        color: #6b2bdb; }
.ist-status-note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.ist-cities-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 22px;
  margin-bottom: 6px;
}
.ist-cities {
  display: flex;
  flex-direction: column;
  border-top: 1px dashed var(--rule);
}
.ist-city-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 13px;
}
.ist-city-row:last-child { border-bottom: none; }
.ist-city-name { color: var(--ink); }
.ist-city-time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.ist-window-note {
  margin-top: 14px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.ist-window-note strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-style: normal;
  color: var(--ink-2);
  font-weight: 600;
}

/* ─── 2. WEATHER + AQI ─────────────────────────────────────── */
.wx-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.wx-city {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  cursor: pointer;
  white-space: nowrap;
}
.wx-city:hover { background: var(--paper-2); color: var(--ink); }
.wx-city.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.wx-card { min-height: 160px; }
.wx-loading,
.wx-error {
  padding: 24px 0;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
  font-style: italic;
}
.wx-error { color: var(--brick); font-style: normal; }

.wx-temp-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 6px;
}
.wx-temp {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wx-temp small {
  font-family: inherit;
  font-size: 24px;
  color: var(--ink-3);
  margin-left: 2px;
}
.wx-cond {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-2);
  flex: 1;
  line-height: 1.3;
}

.wx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 18px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.wx-meta strong {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
  font-weight: 600;
}

.wx-aqi {
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in oklab, #166534 12%, var(--paper));
  border: 1px solid color-mix(in oklab, #166534 25%, var(--rule));
}
.wx-aqi.tone-good { background: color-mix(in oklab, #166534 12%, var(--paper)); border-color: color-mix(in oklab, #166534 25%, var(--rule)); color: #166534; }
.wx-aqi.tone-mod  { background: color-mix(in oklab, #854D0E 12%, var(--paper)); border-color: color-mix(in oklab, #854D0E 25%, var(--rule)); color: #854D0E; }
.wx-aqi.tone-sens { background: color-mix(in oklab, #C2410C 12%, var(--paper)); border-color: color-mix(in oklab, #C2410C 25%, var(--rule)); color: #C2410C; }
.wx-aqi.tone-bad  { background: color-mix(in oklab, #B91C1C 14%, var(--paper)); border-color: color-mix(in oklab, #B91C1C 30%, var(--rule)); color: #B91C1C; }
.wx-aqi.tone-vbad { background: color-mix(in oklab, #7C3AED 14%, var(--paper)); border-color: color-mix(in oklab, #7C3AED 30%, var(--rule)); color: #6b2bdb; }
.wx-aqi.tone-haz  { background: color-mix(in oklab, #1A1818 14%, var(--paper)); border-color: color-mix(in oklab, #1A1818 30%, var(--rule)); color: #1a1818; }
.wx-aqi-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wx-aqi-advice {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.wx-foot-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}

/* ─── 3. CRICKET ───────────────────────────────────────────── */
.cric-body { min-height: 160px; }
.cric-error {
  padding: 24px 0;
  font-size: 13px;
  color: var(--brick);
  text-align: center;
  font-style: italic;
}

.cric-block {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.cric-block.live {
  background: color-mix(in oklab, var(--saffron) 8%, var(--paper));
  border-color: color-mix(in oklab, var(--saffron) 35%, var(--rule));
}
.cric-block.next {
  background: color-mix(in oklab, var(--teal) 7%, var(--paper));
  border-color: color-mix(in oklab, var(--teal) 25%, var(--rule));
}
.cric-block.empty p {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 6px 0;
}

.cric-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.cric-live-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--saffron);
  color: var(--paper);
  /* tiny pulse so the eye catches the live indicator */
  animation: cric-pulse 2.2s ease-out infinite;
}
@keyframes cric-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--saffron) 40%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in oklab, var(--saffron) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--saffron) 0%, transparent); }
}
.cric-next-pill {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--teal) 18%, var(--paper));
  color: color-mix(in oklab, var(--teal) 75%, var(--ink));
}
.cric-match-type {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cric-match-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.cric-scores {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 8px;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 6px;
}
.cric-score-line {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px;
}
.cric-score-team { color: var(--ink-3); }
.cric-score-runs { color: var(--ink); font-weight: 600; }

.cric-status {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 4px;
  font-style: italic;
}
.cric-venue {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

.cric-when {
  font-size: 13px;
  color: var(--ink);
  margin: 6px 0 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.cric-when strong { font-weight: 600; }
.cric-countdown { color: var(--saffron); font-weight: 600; }

.cric-recent {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}
.cric-recent-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.cric-recent-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 12px;
}
.cric-recent-row:last-child { border-bottom: none; }
.cric-recent-name {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 600;
  color: var(--ink-2);
}
.cric-recent-status {
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  flex: 1;
  min-width: 0;
}

.cric-foot-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}

/* ─── 4. FASTING CALENDAR ──────────────────────────────────── */
.fast-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.fast-filter {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.fast-filter:hover { background: var(--paper-2); color: var(--ink); }
.fast-filter.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.fast-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fast-row {
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  border-left: 3px solid var(--ink-3);
}
.fast-row.tradition-hindu { border-left-color: var(--saffron); }
.fast-row.tradition-jain  { border-left-color: var(--teal); }
.fast-row.tradition-muslim   { border-left-color: var(--sage); }
.fast-row.tradition-christian { border-left-color: var(--brick); }

.fast-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.fast-trad-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--ink-3);
  background: var(--paper-2);
}
.fast-trad-tag.tradition-hindu { color: var(--saffron); background: color-mix(in oklab, var(--saffron) 12%, var(--paper-2)); }
.fast-trad-tag.tradition-jain  { color: var(--teal);    background: color-mix(in oklab, var(--teal) 12%, var(--paper-2)); }

.fast-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
  min-width: 0;
}

.fast-count {
  text-align: right;
}
.fast-count-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  color: var(--saffron);
  line-height: 1;
}
.fast-count-label {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}
.fast-count-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--saffron);
  color: var(--paper);
}
.fast-count-pill.tomorrow {
  background: color-mix(in oklab, var(--saffron) 18%, var(--paper));
  color: color-mix(in oklab, var(--saffron) 80%, var(--ink));
}

.fast-date {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 4px;
}
.fast-date em { font-style: italic; color: var(--ink-2); }
.fast-desc {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 6px;
}

.fast-foods {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.fast-foods.strict {
  background: color-mix(in oklab, var(--brick) 8%, var(--paper-2));
  color: var(--brick);
  font-size: 12px;
  font-style: italic;
}
.fast-foods-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 4px;
}
.fast-food-chip {
  font-size: 11.5px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink-2);
}

.fast-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fast-ics-btn {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--ink);
}
.fast-ics-btn:hover {
  background: var(--saffron);
  border-color: var(--saffron);
  text-decoration: none;
}

.fast-empty {
  padding: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 10px;
}

.fast-foot-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
}

/* ─── 5. FESTIVAL CALENDAR ─────────────────────────────────── */
.fest-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.fest-filter {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.fest-filter:hover { background: var(--paper-2); color: var(--ink); }
.fest-filter.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.fest-list {
  display: flex;
  flex-direction: column;
}
.fest-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-items: flex-start;
}
.fest-row:last-child { border-bottom: none; }
.fest-emoji {
  font-size: 22px;
  line-height: 1.2;
}
.fest-body { min-width: 0; }
.fest-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.fest-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.fest-holiday-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--teal) 75%, var(--ink));
  background: color-mix(in oklab, var(--teal) 14%, var(--paper));
  padding: 2px 7px;
  border-radius: 4px;
}
.fest-desc {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
  line-height: 1.4;
}
.fest-date {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.fest-count {
  text-align: right;
}
.fest-count-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--saffron);
  line-height: 1;
}
.fest-count-label {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}
.fest-count-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--saffron);
  color: var(--paper);
}
.fest-count-pill.tomorrow {
  background: color-mix(in oklab, var(--saffron) 18%, var(--paper));
  color: color-mix(in oklab, var(--saffron) 80%, var(--ink));
}

.fest-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  background: var(--paper);
  border: 1px dashed var(--rule);
  border-radius: 10px;
}
.fest-empty em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: var(--saffron);
}

.fest-foot-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  padding-top: 12px;
  border-top: 1px dashed var(--rule);
}