/* Mangrove Jachai — Mangrove Intelligence identity: cream, mangrove green, slate.
   Bangla is the primary script, so Hind Siliguri carries body and headings;
   Fraunces appears only in the Latin half of the wordmark. */

:root {
  /* Layout: one centred 720px column; white page, quiet grey panels, one green accent */
  --paper: #F5F7FA;   /* faint cool grey page, so white cards stand out */
  --surface: #FFFFFF;
  --panel: #F0F3F6;
  --ink: #0F1B24;
  --muted: #56636D;
  --line: #D8DFE5;
  --green: #0B6B46;
  --green-hover: #08573A;
  --on-green: #FFFFFF;
  --slate: #23313B;
  --field: #FFFFFF;
  --shadow: 0 1px 2px rgba(15, 27, 36, 0.06), 0 8px 24px rgba(15, 27, 36, 0.06);

  --danger: #B42318;   --danger-bg: #FEF3F2;
  --caution: #B54708;  --caution-bg: #FFFAEB;
  --ok: #067647;       --ok-bg: #ECFDF3;
  --unknown: #475467;  --unknown-bg: #F2F4F7;
  --help: #3538CD;     --help-bg: #EEF4FF;

  /* Traditional printed-Bangla look: Tiro Bangla for running text, Noto Serif Bengali for headings */
  --bn: 'Tiro Bangla', 'Noto Serif Bengali', 'Kalpurush', 'SolaimanLipi', serif;
  --bn-head: 'Noto Serif Bengali', 'Tiro Bangla', 'Kalpurush', serif;
  --ui: 'Sora', 'Tiro Bangla', system-ui, sans-serif;
  --display: 'Fraunces', Georgia, serif;
  /* English text: Source Serif 4, a free newspaper-style serif close to The Economist's house face */
  --en: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0C1217; --surface: #121A21; --panel: #0F161C; --ink: #E8EDF1; --muted: #9AA7B1; --line: #24303A;
    --green: #3FB884; --green-hover: #5CCB98; --on-green: #06120C; --slate: #B8C4CD; --field: #0F161C;
    --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
    --danger: #F97066; --danger-bg: #2B1210; --caution: #FDB022; --caution-bg: #2A1F08;
    --ok: #47CD89; --ok-bg: #0B2A1A; --unknown: #B0BAC4; --unknown-bg: #1B242C; --help: #A4BCFD; --help-bg: #161D3A;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0C1217; --surface: #121A21; --panel: #0F161C; --ink: #E8EDF1; --muted: #9AA7B1; --line: #24303A;
  --green: #3FB884; --green-hover: #5CCB98; --on-green: #06120C; --slate: #B8C4CD; --field: #0F161C;
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --danger: #F97066; --danger-bg: #2B1210; --caution: #FDB022; --caution-bg: #2A1F08;
  --ok: #47CD89; --ok-bg: #0B2A1A; --unknown: #B0BAC4; --unknown-bg: #1B242C; --help: #A4BCFD; --help-bg: #161D3A;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px/1.75 var(--bn); }
html[lang="en"] { --bn: var(--en); --bn-head: var(--en); --ui: 'Libre Franklin', 'Franklin Gothic', 'Helvetica Neue', Arial, sans-serif; }
/* English: newspaper-style headings (heavy, tight Source Serif at display size) with Franklin labels */
html[lang="en"] :is(h1, h2) { font-weight: 800; font-optical-sizing: auto; font-variation-settings: 'opsz' 60; letter-spacing: -0.012em; line-height: 1.15; }
html[lang="en"] .result h3 { font-family: var(--ui); font-weight: 700; letter-spacing: 0.08em; }
html[lang="en"] body { font-family: var(--en); font-size: 18px; line-height: 1.6; }
a { color: var(--green); }
code { font: 0.9em/1.4 ui-monospace, 'SFMono-Regular', Menlo, monospace; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

.wrap { max-width: 720px; margin: 0 auto; padding-inline: 16px; }

/* header */
.top { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(8px); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; }
.mark { width: 38px; height: 38px; flex: none; color: var(--slate, #1C2733); }
.mark .mk-g { stroke: var(--green); }
.brand-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; line-height: 1.15; }
.brand-bn { font: 700 20px var(--bn-head); }
.brand-en { font: 600 18px var(--display); color: var(--green); }
.by { flex-basis: 100%; font: 500 12px var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lang-switch { display: inline-flex; flex: none; padding: 4px; gap: 4px; border: 2px solid var(--green); border-radius: 999px; background: var(--surface); }
.lang-switch button, .lang-switch a { display: inline-grid; place-items: center; text-decoration: none; min-height: 40px; min-width: 76px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--green); font: 700 16px var(--ui); cursor: pointer; }
.lang-switch [lang="bn"] { font: 700 17px var(--bn-head); }
.lang-switch button[aria-pressed="true"], .lang-switch a[aria-current="page"] { background: var(--green); color: var(--on-green); }
.lang-switch button:hover:not([aria-pressed="true"]), .lang-switch a:hover:not([aria-current]) { background: var(--panel); }
.lang-switch button:focus-visible, .lang-switch a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
@media (max-width: 380px) { .lang-switch button, .lang-switch a { display: inline-grid; place-items: center; text-decoration: none; min-width: 64px; padding: 0 10px; font-size: 15px; } }

/* hero */
.demo { margin: 16px 0 0; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; color: var(--muted); }
.hero { padding-block: 44px 4px; }
.hero h1 { margin: 0 0 12px; font-family: var(--bn-head); font-weight: 700; font-size: clamp(30px, 6.5vw, 42px); line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
html[lang="en"] .hero h1 { font-family: var(--en); font-weight: 800; letter-spacing: -0.015em; }
.intro { margin: 0; color: var(--muted); max-width: 60ch; }
.intro.small { font-size: 15px; }

/* check form */
.check { display: grid; gap: 12px; margin-top: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.label { font-family: var(--bn-head); font-weight: 600; }
textarea, input[type="text"], input[type="number"], select {
  width: 100%; font: inherit; color: var(--ink); background: var(--field);
  border: 1px solid #CBD3DA; border-radius: var(--radius); padding: 10px 12px;
}
textarea:focus, input:focus, select:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
#q { font-size: 17px; min-height: 110px; resize: vertical; }
.ex-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-label { font: 500 12px var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 15px var(--bn); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; min-height: 40px; cursor: pointer; }
.chip:hover { border-color: var(--green); color: var(--green); }
.btn { font: 600 18px var(--bn-head); background: var(--green); color: var(--on-green); border: 0; border-radius: var(--radius); padding: 14px 20px; cursor: pointer; transition: background 0.15s; }
.btn:hover { background: var(--green-hover); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-slate { background: var(--slate); color: var(--paper); }
.btn-ghost { font: 600 15px var(--bn-head); background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 9px 14px; cursor: pointer; }
.btn-ghost:hover { border-color: var(--slate); }

/* result */
.result { --v: var(--unknown); --vbg: var(--unknown-bg); margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.result.v-danger { --v: var(--danger); --vbg: var(--danger-bg); }
.result.v-caution { --v: var(--caution); --vbg: var(--caution-bg); }
.result.v-registered { --v: var(--ok); --vbg: var(--ok-bg); }
.result.v-help { --v: var(--help); --vbg: var(--help-bg); }
.result > :not(.verdict):not(.example-flag) { margin-inline: 18px; }
.example-flag { margin: 0; padding: 7px 18px; font: 500 13px var(--bn); color: var(--muted); border-bottom: 1px solid var(--line); }
.verdict { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--vbg); color: var(--v); }
.verdict h2 { margin: 0; font-family: var(--bn-head); font-weight: 600; font-size: 21px; line-height: 1.4; text-wrap: balance; }
.dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--v); box-shadow: 0 0 0 5px color-mix(in srgb, var(--v) 22%, transparent); }
.result h3 { margin: 18px 18px 6px; font: 600 12px var(--ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.result ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-block: 0; }
.reasons li { padding-left: 16px; position: relative; }
.reasons li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.reasons li.sev::before { background: var(--v); }
.src { font: 500 13px var(--ui); white-space: nowrap; }
.note { color: var(--muted); margin-top: 14px; }
.sub { margin: 4px 0 6px; font-size: 14px; color: var(--muted); }
.found li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.pill { font: 500 12px var(--ui); padding: 2px 9px; border-radius: 999px; background: var(--unknown-bg); color: var(--unknown); white-space: nowrap; }
.pill-danger { background: var(--danger-bg); color: var(--danger); }
.pill-caution { background: var(--caution-bg); color: var(--caution); }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.advice li { font-size: 16px; }
.helplist { margin-top: 14px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block: 18px; }
.outcome { border-top: 1px solid var(--line); padding-block: 14px 16px; margin-inline: 0 !important; padding-inline: 18px; background: var(--panel); }
.outcome p { margin: 0 0 8px; font-size: 15px; }
.ok { color: var(--ok); }

/* report */
.report { margin-top: 48px; padding: 24px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.report h2, .info h2 { margin: 0 0 6px; font-family: var(--bn-head); font-weight: 600; font-size: 22px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 16px; }
.field { display: grid; gap: 4px; align-content: start; }
.field.wide { grid-column: 1 / -1; }
.field > label { font-size: 15px; font-weight: 600; }
.hint { font-size: 13px; color: var(--muted); }
.consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); margin-top: 4px; }
.consent input { margin-top: 3px; width: 20px; height: 20px; flex: none; accent-color: var(--green); }
.consent { min-height: 44px; cursor: pointer; }
.status { margin: 6px 0 0; font-size: 15px; min-height: 1.4em; }
.status.ok { color: var(--ok); } .status.err { color: var(--danger); }
@media (max-width: 480px) { .grid { grid-template-columns: 1fr; } }

/* info */
.info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .info { grid-template-columns: 1fr; } }
.helplines, .registers { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.helplines li { display: grid; gap: 2px; }
.hl-label { font-size: 14px; color: var(--muted); }
.hl-num { display: flex; align-items: center; gap: 8px; font: 600 18px var(--ui); font-variant-numeric: tabular-nums; }
.hl-num a { color: var(--ink); text-decoration: none; }
.copy { font: 500 12px var(--ui); background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.registers a { font-size: 15px; }
.foot { margin-block: 48px 32px; padding-top: 20px; border-top: 1px solid var(--line); font: 13px/1.6 var(--ui); color: var(--muted); }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) textarea, :root:not([data-theme="light"]) input, :root:not([data-theme="light"]) select { border-color: var(--line); } }
:root[data-theme="dark"] textarea, :root[data-theme="dark"] input, :root[data-theme="dark"] select { border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* guides: home strip, guide pages and index */
.guides-strip { margin-block: 32px; }
.guides-strip h2 { font: 700 22px var(--bn-head); margin: 0 0 12px; }
.guide-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guide-links a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: 15px; }
.guide-links a:hover { border-color: var(--green); color: var(--green); }
.more { font: 600 15px var(--ui); color: var(--green); }
.crumbs { margin-top: 24px; font: 13px var(--ui); color: var(--muted); }
.crumbs a { color: var(--muted); }
.doc.guide { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 26px 22px; margin-block: 12px 20px; }
.guide h1 { font: 700 clamp(26px, 5vw, 36px)/1.2 var(--bn-head); margin: 0 0 8px; text-wrap: balance; }
.guide h2 { font: 700 20px var(--bn-head); margin: 28px 0 8px; }
.guide h3 { font: 600 17px var(--bn-head); margin: 16px 0 4px; }
.guide p, .guide li { max-width: 68ch; }
.guide .lede { font-size: 1.08em; }
.g-signs, .g-regs { padding-left: 1.2em; display: grid; gap: 6px; }
.g-typ { border-top: 1px solid var(--line); padding-top: 4px; }
.g-src, .g-note { font: 13px/1.5 var(--ui); color: var(--muted); }
.g-cta { margin-top: 28px; padding: 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.g-cta p { margin: 0; font-weight: 600; }
.g-cta .btn { text-decoration: none; display: inline-block; width: auto; }
.g-help { list-style: none; padding: 0; display: grid; gap: 8px; }
.g-help li { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.g-index { list-style: none; padding: 0; display: grid; gap: 14px; }
.g-index li { display: grid; gap: 2px; }
.g-index a { color: var(--green); }
.g-index span { color: var(--muted); font-size: 15px; }
.crumbs a { display: inline-block; padding-block: 10px; }