/* Shared foundations for the 8 redesign prototypes (reset, script typography, phone frame). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ui, "Noto Sans Bengali", "Inter", system-ui, sans-serif); color: var(--ink, #14231f); background: var(--bg, #fff); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus, #0e6a55); outline-offset: 2px; }

/* script typography — Urdu needs tall line-height for Nastaliq, Bangla a little extra air */
.ur { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", "Segoe UI", serif; direction: rtl; text-align: right; line-height: 2.2; font-weight: 400; }
.bn { font-family: var(--bn, "Noto Sans Bengali"), sans-serif; line-height: 1.85; }
.ro { font-family: var(--ro, "Lora"), Georgia, serif; line-height: 1.65; }
mark { background: var(--mark, #ffe58a); color: inherit; border-radius: 3px; padding: 0 .1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clamp1, .clamp2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp1 { -webkit-line-clamp: 1; }
.clamp2 { -webkit-line-clamp: 2; }
.scroll { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.noscroll-x { overflow-x: auto; scrollbar-width: none; }
.noscroll-x::-webkit-scrollbar { display: none; }

/* phone frame: full-bleed on every phone and tablet (<=820px); framed only if mobile.html is opened on a desktop monitor */
body.is-mobile { min-height: 100dvh; display: grid; place-items: center; background: var(--stage, #e9e5da); }
.device { position: relative; width: 100vw; height: 100dvh; overflow: hidden; overflow: clip; background: var(--bg); isolation: isolate; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.statusbar { display: none; }
@media (min-width: 821px) {
  body.is-mobile { padding: 20px 0; }
  .device { width: 390px; height: min(844px, calc(100dvh - 40px)); border-radius: 44px; box-shadow: 0 0 0 9px #14171a, 0 0 0 11px #3a3f44, 0 30px 70px rgba(0, 0, 0, .35); }
  .statusbar { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; height: 34px; padding: 6px 28px 0; font: 600 13px Inter, sans-serif; color: var(--sb, #111); position: relative; z-index: 5; }
  .statusbar i { font-style: normal; letter-spacing: 2px; font-size: 11px; }
}