/* AlMuntaqa Mini App — design system.
 *
 * We own the palette and take exactly one bit from Telegram: light or dark. Telegram users
 * run dozens of themes, some neon, some with a button colour that fails contrast against
 * its own background; inheriting that makes a soft palette unachievable and lets a random
 * theme trample colours that carry meaning here (feed health, verdict tone). Instead the
 * app pushes *its* colours up into Telegram's chrome via setHeaderColor/setBackgroundColor,
 * so the seam disappears and contrast stays something we can prove.
 *
 * One rule governs everything: a card on --surface with a 17px/600 title in --text means
 * "a real thing a publisher wrote". Nothing the model writes may take that shape.
 */

:root {
  color-scheme: light;

  --bg:              #F6F4F0;
  --surface:         #FFFFFF;
  --surface-alt:     #FBFAF8;
  --surface-sunken:  #EFECE6;   /* segmented track, inputs, skeleton base */
  --surface-press:   #F1EEE9;
  --border:          #E7E2DA;

  --text:            #1C1B19;   /* 16.1:1 on --surface */
  --text-secondary:  #6B675F;   /*  5.6:1 on --surface — safe for body copy */
  --text-tertiary:   #8A857D;   /*  3.7:1 — separators and icons ONLY, never text */
  --text-inverse:    #FFFFFF;

  --accent:          #2F6F62;   /*  5.9:1 on --surface */
  --accent-press:    #275C51;
  --accent-soft:     #E3EEEA;
  --accent-on-soft:  #245448;   /*  7.2:1 on --accent-soft */

  --danger:          #A6402F;
  --danger-soft:     #F7E7E3;
  --warn:            #8A5A12;
  --warn-soft:       #FBF0DC;

  --shadow-card: 0 1px 2px rgba(28, 27, 25, .04), 0 1px 1px rgba(28, 27, 25, .03);
  --shadow-pop:  0 8px 28px rgba(28, 27, 25, .14);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: 180ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-h: 100dvh;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #101215;
  --surface:         #191C21;
  --surface-alt:     #20242A;
  --surface-sunken:  #0B0D10;
  --surface-press:   #262A31;
  --border:          #272C33;

  --text:            #ECEAE6;   /* 13.4:1 on --surface */
  --text-secondary:  #A9A59E;   /*  6.9:1 on --surface */
  --text-tertiary:   #7C7970;   /*  3.9:1 — icons and separators only */
  --text-inverse:    #101215;

  --accent:          #79CFBB;   /*  9.3:1 on --surface */
  --accent-press:    #96DCCB;
  --accent-soft:     #17302C;
  --accent-on-soft:  #8FDAC7;   /*  8.7:1 on --accent-soft */

  --danger:          #F09A8A;
  --danger-soft:     #331C18;
  --warn:            #E2B570;
  --warn-soft:       #2C2314;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-pop:  0 8px 28px rgba(0, 0, 0, .55);
}

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

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font: var(--w-reg) 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The shell is a grid, NOT position:fixed. Fixed bars inside an Android WebView jump when
 * the soft keyboard resizes the visual viewport; a grid bound to --app-h just re-lays-out. */
.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: var(--app-h);
  max-width: 720px;              /* Telegram Desktop's webview is much wider than a phone */
  margin-inline: auto;
}

/* --- top bar --- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--safe-top) + var(--sp-4)) var(--sp-4) var(--sp-3);
  background: var(--bg);
}

.topbar__title {
  margin: 0;
  font-size: 26px;
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
}

.topbar__actions { display: flex; gap: var(--sp-2); }

/* --- scroll region --- */

.screen {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--sp-4) var(--sp-8);
  scrollbar-width: thin;
}
.screen:focus { outline: none; }

/* --- bottom tabs --- */

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2) calc(var(--safe-bottom) + var(--sp-2));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 48px;              /* comfortably past the 44px touch-target floor */
  padding: var(--sp-2) var(--sp-1);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font: var(--w-med) 11px/1 inherit;
  cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.tab svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab[aria-current="page"] { color: var(--accent); }
.tab:active { background: var(--surface-press); }

/* --- cards --- */

.card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.card--flat { box-shadow: none; border: 1px solid var(--border); }

/* THE headline card. This shape means "a publisher wrote this". */
.headline {
  display: block;
  padding: var(--sp-4);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-2);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.headline:active { transform: scale(.985); background: var(--surface-press); }

/* Near-black, not link blue. Every serious news product does this — blue headlines read
 * as advertising, and the whole page is links anyway. */
.headline__title {
  margin: 0;
  font-size: 17px;
  font-weight: var(--w-semi);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.headline__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: 13px;
  color: var(--text-secondary);
}
.headline__source { font-weight: var(--w-med); }
.headline__dot { color: var(--text-tertiary); }
.headline__age { font-variant-numeric: tabular-nums; }

/* --- topic group heading --- */

.group { margin-top: var(--sp-6); }
.group:first-child { margin-top: var(--sp-2); }

.group__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-inline-start: var(--sp-1);
}
.group__title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--w-bold);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.group__count {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-on-soft);
  font-size: 12px;
  font-weight: var(--w-semi);
  font-variant-numeric: tabular-nums;
}

/* --- segmented control (window picker) --- */

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--sp-4);
  background: var(--surface-sunken);
  border-radius: var(--r-full);
}
.segmented__item {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-secondary);
  font: var(--w-med) 14px/1 inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented__item[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  font-weight: var(--w-semi);
  box-shadow: var(--shadow-card);
}

/* --- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--text-inverse);
  font: var(--w-semi) 16px/1 inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:active { background: var(--accent-press); transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn--block { width: 100%; }
.btn--quiet { background: var(--surface-sunken); color: var(--text); }
.btn--danger { background: transparent; color: var(--danger); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;     /* the touch-target floor, not a suggestion */
  flex: none;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-btn:active { background: var(--surface-press); color: var(--danger); }

/* --- rows (topics, sources, settings) --- */

.rows {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.row:first-child { border-top: 0; }
.row:active { background: var(--surface-press); }
.row--static { cursor: default; }
.row--static:active { background: var(--surface); }

.row__body { flex: 1; min-width: 0; }
.row__title { font-size: 16px; overflow-wrap: anywhere; }
.row__sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.row__value {
  flex: none;
  color: var(--text-secondary);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* --- switch --- */

.switch {
  flex: none;
  position: relative;
  width: 50px; height: 30px;
  border: 0;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.switch::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 24px; height: 24px;
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
  transition: transform var(--dur) var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
[dir="rtl"] .switch[aria-checked="true"]::after { transform: translateX(-20px); }

/* --- inputs --- */

.field {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: var(--w-reg) 16px/1.4 inherit;   /* 16px or iOS zooms on focus */
  resize: vertical;
  transition: border-color var(--dur) var(--ease);
}
.field:focus { outline: none; border-color: var(--accent); }
.field::placeholder { color: var(--text-tertiary); }

.label {
  display: block;
  margin: 0 0 var(--sp-2) var(--sp-1);
  font-size: 13px;
  font-weight: var(--w-med);
  color: var(--text-secondary);
}

/* --- notices --- */

.notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: var(--sp-3);
}
.notice--info { background: var(--accent-soft); color: var(--accent-on-soft); }

/* --- empty states --- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-5);
}
.empty__glyph {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  color: var(--accent-on-soft);
}
.empty__glyph svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.empty__title { margin: 0 0 var(--sp-2); font-size: 17px; font-weight: var(--w-semi); }
.empty__body {
  margin: 0 0 var(--sp-5);
  max-width: 34ch;
  font-size: 15px;
  color: var(--text-secondary);
}

/* --- skeletons --- */

.skeleton {
  border-radius: var(--r-xs);
  background: linear-gradient(
    90deg, var(--surface-sunken) 25%, var(--surface-alt) 37%, var(--surface-sunken) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -135% 0; } }

.skeleton--title { height: 17px; margin-bottom: var(--sp-2); }
.skeleton--short { width: 55%; }
.skeleton--meta  { height: 12px; width: 38%; margin-top: var(--sp-3); }

/* --- progress pill (cold classification) --- */

.progress {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-on-soft);
  font-size: 14px;
  font-weight: var(--w-med);
}
.spinner {
  flex: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- snackbar (undo) --- */

.snackbar {
  position: fixed;
  inset-inline: var(--sp-4);
  bottom: calc(var(--safe-bottom) + 84px);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  max-width: 640px;
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.snackbar.is-open { opacity: 1; transform: none; pointer-events: auto; }
.snackbar__action {
  flex: none;
  border: 0;
  background: none;
  color: var(--accent);
  font: var(--w-semi) 14px/1 inherit;
  cursor: pointer;
  padding: var(--sp-2);
}

/* --- fact-check --- */
/*
 * Deliberately NOT a .headline. This is the one place the model writes prose, and it must
 * never be mistakable for something a publisher wrote.
 */
.ai-card {
  padding: var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: var(--surface-alt);
  margin-bottom: var(--sp-3);
}
.ai-card__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: 12px;
  font-weight: var(--w-semi);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-secondary);
}
.ai-card__claim {
  margin: 0 0 var(--sp-3);
  padding-inline-start: var(--sp-3);
  border-inline-start: 3px solid var(--border);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.ai-card__basis { margin: 0 0 var(--sp-4); font-size: 15px; line-height: 1.5; }

.verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: var(--w-semi);
}
.verdict--supported          { background: var(--accent-soft); color: var(--accent-on-soft); }
.verdict--contradicted       { background: var(--danger-soft); color: var(--danger); }
.verdict--misleading_context { background: var(--warn-soft);   color: var(--warn); }
.verdict--unverified         { background: var(--surface-sunken); color: var(--text-secondary); }

.citations { margin: 0; padding: 0; list-style: none; }
.citation {
  display: block;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}
.citation__publisher { font-size: 14px; font-weight: var(--w-semi); color: var(--accent); }
.citation__quote {
  margin: var(--sp-2) 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* --- health dot --- */

.dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--accent);
}
.dot--bad { background: var(--warn); }

/* --- utility --- */

.stack > * + * { margin-top: var(--sp-3); }
.muted { color: var(--text-secondary); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(button, a, input, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}