/* Self-hosted. The Google Fonts chain (CSS on one origin, the font file on
   another) did not start downloading until ~730ms on a throttled phone, and the
   late swap was the ENTIRE source of this site's layout shift — measured CLS
   0.33 with web fonts vs 0 with them blocked. Same-origin + <link rel=preload>
   in every page head fixes both the shift and ~550ms of the load.
   Noto Sans Bengali is a variable font: one file covers weights 400-800. */
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("/fonts/noto-sans-bengali-bengali.woff2?v=1") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("/fonts/noto-sans-bengali-latin.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* টংখাতা (TongKhata) — tongkhata.app
   Palette mirrors the app's AppTheme Ruby Red brand colors (Tailwind rose/red).
   Rule of thumb: the brand fill is DARK, so anything sitting on it is #FFFFFF. */

:root {
  --brand: #E11D48;          /* Primary — header bar, filled buttons */
  --brand-soft: #FDA4AF;     /* Primary Light — links on dark surfaces */
  --brand-strong: #BE123C;   /* Primary Dark — borders on primary, filled hover */
  --brand-deep: #9F1239;     /* Deep — link + inline-button ink on WHITE */
  --brand-tint: #FFE4E6;     /* Tint / surface variant — tiles, chips, bands */
  --surface: #FFFBFC;        /* app background */
  --surface-2: #FFE4E6;
  --card: #FFFFFF;
  --border: #FECACA;         /* decorative hairline — cards, dividers */
  /* control boundary — inputs, unselected tabs, ghost buttons. WCAG 1.4.11
     wants 3:1; measure against --card (#FFFFFF), not --surface. #E7859A was
     only 2.55:1. This is 3.48:1 on the card, 3.40:1 on the field fill. */
  --border-strong: #CF6A80;
  --text: #111827;           /* Text Primary — also THE dark surface colour */
  --text-2: #6B7280;         /* secondary — on #FFFFFF only, see note below */
  --text-3: #9CA3AF;         /* tertiary */
  --success: #22C55E;        /* fill/dot only — never text */
  --success-ink: #15803D;    /* success TEXT and ✓ glyphs */
  --danger: #EF4444;         /* fill */
  --danger-ink: #B91C1C;     /* error TEXT */
  --info: #3B82F6;
  --warning: #F59E0B;
  color-scheme: light dark;
}

/* Contrast note: --text-2 (#6B7280) is 4.9:1 on #FFFFFF but only ~4.1:1 on the
   pink tints. On #FFE4E6 / #FFF1F2 use --text (#111827) or #4B5563 instead. */

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1B0F13;
    --surface-2: #241318;
    --card: #2A1620;
    --border: #4A2530;
    /* 3.60:1 on --card and 3.95:1 on --surface; #7A4353 was only 2.23:1 and
       left every input edge on /account/ near-invisible on a dark phone. */
    --border-strong: #A85C72;
    --text: #FFE4E6;
    --text-2: #D8AEB6;
    --text-3: #9CA3AF;
    --brand-tint: #3A1B23;
    /* the three inks that are used ON dark surfaces need their own dark value,
       or every consumer has to remember an override of its own */
    --brand-deep: #FDA4AF;
    --success-ink: #4ADE80;
    --danger-ink: #FCA5A5;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: "Noto Sans Bengali", "Hind Siliguri", system-ui, -apple-system, sans-serif;
  background: var(--surface);
  color: var(--text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

a { color: var(--brand-deep); }
@media (prefers-color-scheme: dark) { a { color: var(--brand-soft); } }

/* ---------- focus rings (keyboard + switch access; the site had none) ---------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  summary:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible { outline-color: var(--brand-soft); }
}
/* on the ruby bar and on the dark surfaces the ring has to be light */
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: #FFFFFF; }
.site-footer a:focus-visible { outline-color: #FDA4AF; }

/* ---------- header / nav ---------- */
.site-header {
  background: var(--brand);
  border-bottom: 3px solid var(--brand-strong);
  position: sticky; top: 0; z-index: 50;
}
.site-header .bar {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  /* padding-block, never the shorthand — .wrap supplies the 20px side gutter
     and a shorthand here out-specifies it, putting the burger on the bezel */
  padding-block: 12px;
}
/* logo.png is a ruby disc with transparent corners, so on the ruby bar it needs
   a ring to read as a circle at all. The white keeps it crisp at 36px too. */
.site-header .logo {
  width: 44px; height: 44px; display: block;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .92);
}
.site-header .name {
  font-size: 1.35rem; font-weight: 700; color: #FFFFFF;
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-header nav { margin-left: auto; display: flex; gap: 18px; }
.site-header nav a {
  color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: .95rem;
}
.site-header nav a:hover { text-decoration: underline; }

/* burger button — nav.js inserts it before <nav> and adds .has-burger to the
   header, so with JS off none of the burger CSS below ever applies. */
.nav-burger {
  display: none;
  align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  margin-left: auto; padding: 0;
  background: transparent; border: 0; border-radius: 10px;
  color: #FFFFFF; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger-bars {
  position: relative; display: block;
  width: 20px; height: 2px; border-radius: 2px;
  background: currentColor;
}
.nav-burger-bars::before,
.nav-burger-bars::after {
  content: ""; position: absolute; left: 0;
  width: 20px; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.nav-burger-bars::before { top: -6px; }
.nav-burger-bars::after { top: 6px; }
/* open → X */
.site-header.has-burger.nav-open .nav-burger-bars { background: transparent; }
.site-header.has-burger.nav-open .nav-burger-bars::before { top: 0; transform: rotate(45deg); }
.site-header.has-burger.nav-open .nav-burger-bars::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .nav-burger-bars::before, .nav-burger-bars::after { transition: none; }
}

@media (max-width: 640px) {
  /* --- JS on: burger + full-width dropdown panel --- */
  .site-header.has-burger .nav-burger { display: inline-flex; }
  /* Pre-paint collapse. The burger ships in the markup and an inline <head>
     script sets html.nav-js, so the header is already collapsed on the first
     paint. Keyed only on .has-burger (added by deferred nav.js) it painted a
     122px two-row bar that then snapped to 65px — a 57px shift every load.
     If JS never runs, the head script drops nav-js and the wrap rules apply. */
  .nav-js .site-header:not(.site-header--home) .nav-burger { display: inline-flex; }
  .nav-js .site-header:not(.site-header--home):not(.has-burger) nav { display: none; }
  .site-header.has-burger nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    max-width: 100%; margin: 0; gap: 0;
    background: var(--brand);
    border-top: 1px solid var(--brand-strong);
    box-shadow: 0 14px 28px rgba(17, 24, 39, .22);
    /* a short landscape screen scrolls the panel rather than clipping a link */
    max-height: 75vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header.has-burger.nav-open nav { display: flex; flex-direction: column; }
  .site-header.has-burger nav a {
    display: flex; align-items: center;
    width: 100%; min-height: 48px;
    padding: 12px 20px; font-size: 1rem;
    text-align: left;
    border-top: 1px solid rgba(255, 255, 255, .2);
  }
  .site-header.has-burger nav a:first-child { border-top: 0; }
  /* ring drawn inside the row so it is never clipped by the panel edge */
  .site-header.has-burger nav a:focus-visible { outline-offset: -3px; }
  .site-header.has-burger nav a:hover,
  .site-header.has-burger nav a:active { background: rgba(17, 24, 39, .12); text-decoration: none; }

  /* --- JS off: the bar simply wraps and the nav takes its own second row.
         Never a horizontal scroller, never clipped, every link reachable. --- */
  html:not(.nav-js).site-header:not(.has-burger) nav {
    margin-left: 0; width: 100%;
    flex-wrap: wrap; justify-content: center;
    gap: 8px 16px; padding-bottom: 4px;
  }
}

/* ---------- content pages (privacy / delete / reset) ---------- */
.page { padding: 40px 0 72px; }
.page h1 { font-size: 1.6rem; margin: 0 0 4px; }
.page h2 { font-size: 1.15rem; margin-top: 32px; }
.page .meta { color: var(--text-2); font-size: .9rem; margin-bottom: 24px; }
.page ul, .page ol { padding-left: 22px; }
.page li { margin: 5px 0; }
.page hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.page .en { font-size: .95rem; color: var(--text-2); }
.page .en h1 { font-size: 1.3rem; }
.page .en h2 { font-size: 1.05rem; }
/* pink callout — dark ink, never the grey secondary (see contrast note) */
.box {
  background: var(--brand-tint); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; margin: 18px 0;
  color: var(--text);
}
.box .en, .box p.en { color: #4B5563; }
@media (prefers-color-scheme: dark) {
  .box .en, .box p.en { color: var(--text-2); }
}

/* ---------- footer ---------- */
.site-footer {
  background: #111827; color: #D1D5DB;
  padding: 34px 0; margin-top: 0;
}
.site-footer .cols {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  align-items: center; justify-content: space-between;
}
.site-footer a { color: #FDA4AF; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-footer .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.site-footer .copy { font-size: .9rem; color: #9CA3AF; }
.site-footer .tm { display: block; font-size: .78rem; margin-top: 4px; }

/* ---------- reset page ---------- */
.reset-card {
  max-width: 460px; margin: 56px auto; text-align: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 36px 26px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .08);
}
.reset-card img { width: 76px; height: 76px; border-radius: 50%; }
.reset-card h1 { font-size: 1.35rem; margin: 16px 0 8px; }
.reset-card p { color: var(--text-2); margin: 0 0 12px; }
.reset-card .btn-brand {
  display: inline-block; margin: 10px 0 4px;
  background: var(--brand); color: #FFFFFF;
  padding: 13px 34px; border-radius: 12px;
  font-weight: 700; text-decoration: none; font-size: 1.05rem;
}
.reset-card .btn-brand:hover { background: var(--brand-strong); }
.reset-card .hint { font-size: .88rem; margin-top: 16px; }

/* ---------- phone-size polish ---------- */
@media (max-width: 560px) {
  /* compact header. The nav is either the burger panel (JS on) or a wrapped
     second row (JS off) — never a sideways scroller, and nothing is hidden. */
  .site-header .bar { padding-block: 9px; gap: 9px; }
  .site-header .logo { width: 36px; height: 36px; }
  .site-header .name { font-size: 1.05rem; flex: 0 0 auto; }
  .site-header:not(.has-burger) nav { gap: 0 14px; }
  /* with JS off the header keeps its links but is no longer sticky — a
     158px two-row sticky bar swallows every #anchor the panel links to. */
  .site-header:not(.has-burger) { position: static; }
  .site-header:not(.has-burger) nav a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: 0 6px; font-size: .88rem;
  }

  /* content pages (privacy / terms / delete) read better a notch smaller */
  .page { font-size: .95rem; line-height: 1.75; padding-top: 28px; }
  .page h1 { font-size: 1.35rem; }
  .page h2 { font-size: 1.06rem; margin-top: 26px; }
  .page .meta { font-size: .82rem; }
}

/* reduced motion covers in-page jumps too: html sets smooth scrolling */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }