/* ===== Custom tweaks on top of Tailwind ===== */

html { scroll-behavior: smooth; }

body {
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Malayalam text balance */
.font-ml, [lang="ml"] {
  font-family: 'Noto Sans Malayalam', 'Inter', sans-serif;
  line-height: 1.55;
}

/* Subtle headline grain */
.font-serif {
  letter-spacing: -0.01em;
}

/* Card hover lift */
.promise-card {
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.promise-card:hover {
  transform: translateY(-2px);
  border-color: rgb(168 162 158); /* stone-400 */
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.12);
}

/* Measurability ribbons on cards */
.msr-high   { background: rgb(236 253 245); color: rgb(4 120 87); border-color: rgb(167 243 208); }
.msr-medium { background: rgb(255 251 235); color: rgb(180 83 9);  border-color: rgb(253 230 138); }
.msr-low    { background: rgb(255 241 242); color: rgb(190 18 60); border-color: rgb(254 205 211); }
.msr-flag   { background: rgb(245 243 255); color: rgb(91 33 182); border-color: rgb(221 214 254); }

.tag-chip {
  background: rgb(245 245 244); /* stone-100 */
  color: rgb(68 64 60); /* stone-700 */
}

/* Section nav pills */
.section-pill[data-active="true"] {
  background: rgb(28 25 23); /* stone-900 */
  color: white;
}
.section-pill[data-active="true"] .section-pill-count {
  background: rgba(255,255,255,0.15);
  color: white;
}

/* Section icon */
.section-emoji {
  font-size: 1.05em;
  line-height: 1;
}

/* Modal scroll inertia on mobile */
#modal-body { -webkit-overflow-scrolling: touch; }

/* Highlight matched search terms */
mark.hit {
  background: rgb(254 240 138); /* yellow-200 */
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* Prevent layout shift while data loads */
#grid:empty + #empty { display: none; }

/* Scrollbar polish for sidebar */
aside .lg\:max-h-\[calc\(100vh-180px\)\]::-webkit-scrollbar { width: 6px; }
aside .lg\:max-h-\[calc\(100vh-180px\)\]::-webkit-scrollbar-thumb { background: rgb(214 211 209); border-radius: 3px; }

/* Better focus rings on filter pills */
.measur-pill:focus-visible,
.status-pill:focus-visible {
  outline: 2px solid rgb(28 25 23);
  outline-offset: 2px;
}

/* ===== Status colors (cards + modal) ===== */
.st-not_started    { background: rgb(245 245 244); color: rgb(68 64 60);   border-color: rgb(214 211 209); }
.st-in_progress    { background: rgb(239 246 255); color: rgb(29 78 216);  border-color: rgb(191 219 254); }
.st-partially_kept { background: rgb(255 251 235); color: rgb(180 83 9);   border-color: rgb(253 230 138); }
.st-kept           { background: rgb(236 253 245); color: rgb(4 120 87);   border-color: rgb(167 243 208); }
.st-broken         { background: rgb(255 241 242); color: rgb(190 18 60);  border-color: rgb(254 205 211); }
.st-stalled        { background: rgb(250 245 255); color: rgb(107 33 168); border-color: rgb(233 213 255); }
.st-disputed       { background: rgb(255 247 237); color: rgb(154 52 18);  border-color: rgb(254 215 170); }

/* Status filter pills active state */
.status-pill[data-active="true"][data-status="in_progress"]    { background: rgb(29 78 216);  color: white; }
.status-pill[data-active="true"][data-status="partially_kept"] { background: rgb(217 119 6);  color: white; }
.status-pill[data-active="true"][data-status="kept"]           { background: rgb(5 150 105);  color: white; }
.status-pill[data-active="true"][data-status="broken"]         { background: rgb(225 29 72);  color: white; }
.status-pill[data-active="true"][data-status="stalled"]        { background: rgb(126 34 206); color: white; }
.status-pill[data-active="true"][data-status="disputed"]       { background: rgb(194 65 12);  color: white; }
.status-pill[data-active="true"][data-status=""]               { background: rgb(28 25 23);   color: white; }

/* Trust tier chips */
.trust-primary    { background: rgb(220 252 231); color: rgb(22 101 52);  border-color: rgb(187 247 208); }
.trust-secondary  { background: rgb(254 249 195); color: rgb(133 77 14);  border-color: rgb(253 224 71); }
.trust-tertiary   { background: rgb(245 245 244); color: rgb(87 83 78);   border-color: rgb(214 211 209); }

/* Recently-updated rail */
.recent-rail::-webkit-scrollbar { height: 6px; }
.recent-rail::-webkit-scrollbar-thumb { background: rgb(214 211 209); border-radius: 3px; }

/* Evidence card */
.evidence-item {
  border: 1px solid rgb(231 229 228);
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: rgb(250 250 249);
}
.evidence-item + .evidence-item { margin-top: 0.5rem; }

/* Minister chip */
.minister-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgb(245 243 255);
  color: rgb(91 33 182);
  border: 1px solid rgb(221 214 254);
  border-radius: 9999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
}

/* Toast / copy feedback */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  background: rgb(28 25 23); color: white; padding: 0.5rem 1rem;
  border-radius: 9999px; font-size: 0.875rem; z-index: 100;
  opacity: 0; transition: opacity 200ms ease;
}
.toast.show { opacity: 1; }

/* ===== Tagline rotator ===== */
#tagline-rotator.fade-out { opacity: 0; }

/* ===== Indira Guarantees cards ===== */
.ig-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid rgb(221 214 254);
  background: white;
  border-radius: 0.85rem;
  padding: 1rem 1.1rem 1.1rem;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  overflow: hidden;
}
.ig-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgb(124 58 237), rgb(217 119 6));
}
.ig-card:hover {
  transform: translateY(-2px);
  border-color: rgb(167 139 250);
  box-shadow: 0 10px 28px -16px rgb(91 33 182 / 0.35);
}
.ig-card .ig-num {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgb(124 58 237);
}
.ig-card .ig-en {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.3;
  color: rgb(28 25 23);
}
.ig-card .ig-ml {
  font-family: 'Noto Sans Malayalam', 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgb(87 83 78);
}
.ig-card .ig-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  margin-top: 0.15rem;
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: rgb(91 33 182);
}
.ig-card .ig-metric .ig-metric-unit {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.7rem;
  color: rgb(120 113 108);
  letter-spacing: 0.01em;
}

/* ===== Promise Spotlight (dark) ===== */
.spot-audience-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  background: rgb(252 211 77 / 0.12);
  color: rgb(252 211 77);
  border: 1px solid rgb(252 211 77 / 0.3);
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.spot-trend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  background: rgb(244 63 94 / 0.15);
  color: rgb(253 164 175);
  border: 1px solid rgb(244 63 94 / 0.3);
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.spot-hook {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-style: italic;
  color: rgb(252 211 77);
  font-size: 0.9rem;
  line-height: 1.5;
}
.spot-en {
  font-family: 'Fraunces', ui-serif, Georgia, serif;
  font-weight: 600;
  color: white;
  line-height: 1.2;
  font-size: 1.4rem;
}
@media (min-width: 640px) {
  .spot-en { font-size: 1.85rem; }
}
.spot-ml {
  font-family: 'Noto Sans Malayalam', 'Inter', sans-serif;
  color: rgb(214 211 209);
  line-height: 1.55;
  font-size: 0.9rem;
}
.spot-thumb {
  cursor: pointer;
  border: 1px solid rgb(68 64 60);
  background: rgb(41 37 36);
  border-radius: 0.6rem;
  padding: 0.6rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
  font-family: inherit;
  color: inherit;
}
.spot-thumb:hover { background: rgb(57 54 49); }
.spot-thumb[data-active="true"] {
  border-color: rgb(252 211 77);
  background: rgb(57 54 49);
}
.spot-thumb-emoji { font-size: 1.1rem; }
.spot-thumb-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgb(231 229 228);
  letter-spacing: 0.02em;
}
.spot-thumb-sub {
  font-size: 0.65rem;
  color: rgb(168 162 158);
  line-height: 1.25;
}
.spot-feature { transition: opacity 200ms ease; }
.spot-feature.fade-out { opacity: 0.2; }

/* Moderator console */
.mod-shell { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: 100vh; }
@media (max-width: 900px) { .mod-shell { grid-template-columns: 1fr; height: auto; } }
.mod-queue { border-right: 1px solid rgb(231 229 228); overflow-y: auto; background: rgb(250 250 249); }
.mod-detail { overflow-y: auto; padding: 1.25rem 1.5rem; }
.mod-row {
  padding: 0.6rem 0.8rem; border-bottom: 1px solid rgb(231 229 228);
  cursor: pointer; font-size: 0.85rem;
}
.mod-row:hover { background: rgb(245 245 244); }
.mod-row[data-active="true"] { background: rgb(28 25 23); color: white; }
.mod-row[data-active="true"] .mod-row-meta { color: rgb(168 162 158); }
.mod-row-meta { color: rgb(120 113 108); font-size: 0.72rem; margin-top: 0.15rem; }
.mod-row-dirty::after {
  content: "•"; color: rgb(217 119 6); margin-left: 0.3rem; font-weight: bold;
}

.mod-tab {
  padding: 0.5rem 0.75rem; font-size: 0.78rem; font-weight: 500;
  border-bottom: 2px solid transparent; cursor: pointer; color: rgb(87 83 78);
}
.mod-tab[data-active="true"] { color: rgb(28 25 23); border-bottom-color: rgb(28 25 23); }

.mod-input {
  width: 100%; padding: 0.5rem 0.65rem; border: 1px solid rgb(214 211 209);
  border-radius: 0.4rem; font-size: 0.85rem; background: white;
}
.mod-input:focus { outline: none; border-color: rgb(28 25 23); box-shadow: 0 0 0 3px rgb(28 25 23 / 0.08); }
.mod-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: rgb(87 83 78); margin-bottom: 0.3rem; }
.mod-btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.45rem 0.85rem; border-radius: 0.4rem; font-size: 0.82rem;
  font-weight: 500; cursor: pointer; border: 1px solid rgb(214 211 209);
  background: white; color: rgb(28 25 23);
}
.mod-btn:hover { background: rgb(245 245 244); }
.mod-btn-primary { background: rgb(28 25 23); color: white; border-color: rgb(28 25 23); }
.mod-btn-primary:hover { background: rgb(0 0 0); }
.mod-btn-danger { background: rgb(225 29 72); color: white; border-color: rgb(225 29 72); }

/* Sticky save/discard footer for the moderator detail pane */
.mod-footer-bar {
  position: sticky;
  bottom: 0;
  margin: 1rem -1.5rem -1.25rem;
  padding: 0.75rem 1.5rem;
  background: rgb(255 251 235);
  border-top: 1px solid rgb(253 230 138);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 5;
  box-shadow: 0 -8px 24px -16px rgb(0 0 0 / 0.15);
}
@media (max-width: 900px) {
  .mod-footer-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
  }
}