/* HishabChai styles. Noto Sans Bengali is self-hosted (OFL licence in assets/fonts/LICENSE-OFL.txt).
   No outside requests, nothing imported from other sites. Mobile first; no horizontal scroll down to 320 px. */
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/bengali-400-normal.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/bengali-700-normal.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC;
}
@font-face {
  font-family: "Noto Sans Bengali";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f1f4f6; --card: #ffffff; --ink: #1c2230; --muted: #566074; --line: #dfe3ea;
  --brand: #0b6b4f; --brand-ink: #ffffff; --header-band: #2f3e4e; --nav-hover: #cfe8dc; --nav-hover-ink: #084c38; --fw-ui: 400; --fw-head: 700; --warn-bg: #fff6e0; --warn-line: #e8c36a; --err: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161d; --card: #1a202a; --ink: #e8ecf2; --muted: #a8b2c2; --line: #2d3644;
    --brand: #3fb68b; --brand-ink: #08150f; --header-band: #1c2733; --warn-bg: #2a2412; --warn-line: #7a6422; --err: #ff8a80;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Noto Sans Bengali", "Kohinoor Bangla", "Bangla Sangam MN", "Nirmala UI", "Noto Sans", system-ui, sans-serif;
  font-size: 17px; line-height: 1.7; overflow-wrap: anywhere;
}
img, svg, canvas, table, select, input, button { max-width: 100%; }
a { color: var(--brand); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.draft-banner { margin: 0; padding: 6px 16px; text-align: center; background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); font-size: .95rem; }

h1 { font-size: 1.7rem; line-height: 1.3; margin: 24px 0 8px; }
h2 { font-size: 1.25rem; margin: 28px 0 8px; }
main { padding-bottom: 24px; }

/* tool pages and controls */
.field { margin: 10px 0; }
.field label, .assumption .label { display: block; font-size: .95rem; color: var(--muted); }
input, select, button {
  font: inherit; color: var(--ink); min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--card);
}
input, select { width: 100%; padding: 8px 10px; }
button { padding: 6px 14px; cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.field-error, .error { color: var(--err); display: block; }
.hint { color: var(--muted); font-size: .95rem; margin: 6px 0; }
.notice { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
.badge { display: inline-block; margin: 0 6px; padding: 0 8px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .85rem; }
.rows { margin: 8px 0; }
.rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 0; }
.rows dt { color: var(--muted); }
.rows dd { margin: 0; font-weight: var(--fw-ui); text-align: right; }
.rows .strong dt { color: var(--ink); }
.rows .strong dd { color: var(--brand); }
.appliance { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.appliance .field-name { grid-column: 1 / -1; }
.appliance button { grid-column: 1 / -1; justify-self: start; }
.assumption { margin: 10px 0; }
.override { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* generated content */
.tools { display: grid; grid-template-columns: 1fr; gap: 12px; }
.related ul { padding-left: 20px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
table.sources { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.sources th, table.sources td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 90px; }
table.sources td { overflow-wrap: anywhere; }
.ad-slot { min-height: 250px; margin: 20px auto; max-width: 860px; }

@media (min-width: 560px) {
  .tools { grid-template-columns: repeat(2, 1fr); }
  .appliance { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .appliance .field-name, .appliance button { grid-column: auto; }
}
@media (min-width: 820px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion) *:not(main > *) { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* FIXED CARD SIZE (desktop, two columns): each card has the height of its tallest state (measured with
   tools/card-height-probe.js over every tab, mode and sub-option, with values filled in), so switching tab, mode or
   language never moves anything below the card. It grows only if the content is taller (many devices, long
   results). On tablets and phones the columns stack, so the card keeps its natural height; the values below only
   reserve space at load, and nothing above the changing part moves.
   Reserve room for the calculator that JavaScript draws, so the text below does not jump
   when it appears (layout shift). Heights are a little under the real ones (measured 2026-11-15
   with the design D layout). Only when scripting is on, so the no-JavaScript page has no empty gap. */
@media (scripting: enabled) {
  #tool-root[data-tool="fdr-dps-savings"] { min-height: 985px; }
  #tool-root[data-tool="land-converter"] { min-height: 533px; }
  #tool-root[data-tool="solar-battery"] { min-height: 1091px; }
}
@media (scripting: enabled) and (max-width: 899px) {
  #tool-root[data-tool="fdr-dps-savings"] { min-height: 1260px; }
  #tool-root[data-tool="land-converter"] { min-height: 800px; }
  #tool-root[data-tool="solar-battery"] { min-height: 1440px; }
}
@media (scripting: enabled) and (max-width: 440px) {
  #tool-root[data-tool="fdr-dps-savings"] { min-height: 1400px; }
  #tool-root[data-tool="land-converter"] { min-height: 800px; }
  #tool-root[data-tool="solar-battery"] { min-height: 1530px; }
}

/* ---- Design D (2026-11-15): header with logo, menu, banner, cards, calculator card, result card, footer ---- */
header.site { background: var(--card); box-shadow: 0 1px 0 var(--line), 0 2px 8px #0000000d; position: sticky; top: 0; z-index: 40; }
html { scroll-padding-top: 76px; }
header.site .bar { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--brand); text-decoration: none; padding: 4px 10px 4px 6px; border-radius: 10px; border: 1px solid transparent; }
.brand-icon { width: 44px; height: 44px; display: block; flex: none; }
.brand-text { display: none; font-weight: var(--fw-head); font-size: 1.35rem; line-height: 1; white-space: nowrap; }
@media (min-width: 560px) { .brand-text { display: block; } }
.burger-in { position: absolute; opacity: 0; width: 44px; height: 44px; right: 16px; top: 8px; margin: 0; cursor: pointer; z-index: 3; }
.burger { width: 44px; height: 44px; border: 1px solid #cfd6de; border-radius: 10px; background: #f6f8fa; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.burger i { display: block; width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px; }
.burger-in:focus-visible + .bar .burger { outline: 3px solid var(--brand); outline-offset: 2px; }
nav.main { display: none; background: var(--card); border-top: 1px solid var(--line); position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 70px); overflow-y: auto; box-shadow: 0 8px 16px #0000001a; }
.burger-in:checked ~ nav.main { display: block; }
nav.main a { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; min-height: 54px; text-decoration: none; color: var(--ink); border-bottom: 1px solid #edf0f3; font-weight: var(--fw-ui); }
nav.main a::after { content: "\203A"; color: var(--muted); font-size: 1.4rem; }
nav.main a[aria-current="page"] { color: var(--nav-hover-ink); background: var(--nav-hover); }
@media (min-width: 900px) {
  header.site { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(24px, calc((100% - 1180px) / 2)); }
  header.site .bar { padding: 8px 0; }
  header.site .wrap.bar { max-width: none; margin: 0; }
  .burger, .burger-in { display: none; }
  nav.main { display: flex; align-items: center; gap: 4px; background: transparent; border: 0; margin-left: auto; position: static; max-height: none; overflow: visible; box-shadow: none; width: auto; border-radius: 0; padding: 0; animation: none; }
  .menu-scrim, .burger-in:checked ~ .menu-scrim { display: none; }
  nav.main a { border: 0; min-height: 44px; padding: 0 14px; border-radius: 10px; white-space: nowrap; }
  nav.main a::after { content: none; }
}
h1 { font-size: 1.65rem; line-height: 1.3; margin: 18px 0 8px; }
main { padding-bottom: 24px; flex: 1 0 auto; width: 100%; }
.intro p { margin: 0 0 14px; color: var(--muted); }
.band { background: var(--brand); color: var(--brand-ink); border-radius: 16px; padding: 20px 18px; margin: 16px 0 14px; }
.band h1 { margin: 0 0 6px; }
.band p { margin: 0; }
.card { display: block; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); box-shadow: 0 1px 3px #0000000a; }
.card b { display: block; color: var(--brand); font-size: 1.12rem; }
.card span { display: block; color: var(--muted); font-size: .97rem; line-height: 1.5; }
#tool-root { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 1px 3px #0000000a; margin-bottom: 16px; }
#tool-root input, #tool-root select { border-color: #aeb7c4; border-radius: 10px; min-height: 48px; }
.field label { font-weight: var(--fw-ui); color: var(--ink); }
.numeral-switch { margin-bottom: 12px; }
.results:has(dl) { margin-top: 16px; border: 2px solid var(--brand); border-radius: 16px; overflow: hidden; background: var(--card); }
.results dl.rows { margin: 0; padding: 4px 16px 8px; }
.results .rows .strong { background: #e9f5ef; margin: 0 -16px; padding: 12px 16px; border-bottom: 0; }
.results .rows .strong dd { font-size: 1.5rem; }
.results .notice { margin: 0; border: 0; border-top: 1px solid var(--warn-line); border-radius: 0; background: var(--warn-bg); font-size: .93rem; }
.results .buttons { margin: 0 16px 16px; }
footer.site { background: #eef7f2; color: #1a2530; margin-top: 28px; padding: 18px 0 20px; text-align: center; border-top: 1px solid #cfe3d8; }
body.ads-on footer.site { padding-bottom: 96px; }
.foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; text-align: left; }
.foot-links a { color: #1a2530; text-decoration: none; display: flex; align-items: center; min-height: 44px; border: 1px solid transparent; border-radius: 10px; padding: 0 10px; }
.foot-logo { display: inline-block; margin-top: 12px; border-radius: 10px; padding: 4px 8px; line-height: 0; border: 1px solid transparent; }
.foot-logo-img { width: 88px; height: auto; aspect-ratio: 110 / 148; display: block; }
footer.site .copy { margin: 4px 0 0; font-size: .88rem; color: #3d4a56; }
@media (min-width: 900px) {
  .foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
  .foot-links a { border: 1px solid transparent; padding: 0 14px; border-radius: 10px; }
  h1 { font-size: 2rem; }
}

/* ---- Design D, second part (restores the block styles and adds the wide layout) ---- */
body { min-height: 100vh; display: flex; flex-direction: column; }
footer.site { margin-top: auto; }
main { margin-bottom: 28px; }
@media (min-width: 900px) { .wrap.wide { max-width: 1180px; padding: 0 24px; } }
details.fold { background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin: 10px 0; box-shadow: 0 1px 3px #0000000a; }
details.fold > summary { cursor: pointer; padding: 12px 14px 12px 40px; font-weight: 700; font-size: 1.05rem; position: relative; list-style: none; min-height: 48px; display: flex; align-items: center; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "\25B8"; position: absolute; left: 16px; color: var(--brand); }
details.fold[open] > summary::before { content: "\25BE"; }
details.fold > .fold-body { padding: 14px 16px 16px; }
details.fold h3 { font-size: 1rem; margin: 14px 0 4px; }
details.fold .table-wrap { margin-top: 6px; }
.numeral-switch { display: inline-flex; border: 1px solid var(--brand); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.numeral-switch button { border: 0; border-radius: 0; background: var(--card); color: var(--brand); padding: 8px 18px; min-height: 44px; font: inherit; cursor: pointer; }
.numeral-switch button + button { border-left: 1px solid var(--brand); }
.numeral-switch button.on { background: var(--brand); color: var(--brand-ink); font-weight: var(--fw-ui); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
textarea { width: 100%; padding: 8px 10px; font: inherit; color: var(--ink); border: 1px solid #aeb7c4; border-radius: 10px; max-width: 100%; background: var(--card); }
.report .ok { color: var(--brand); }
.report .error { color: var(--err); }
#tool-root button, .report button, .buttons button { min-height: 46px; padding: 8px 16px; border: 1px solid var(--brand); border-radius: 10px; background: var(--card); color: var(--brand); font-weight: var(--fw-ui); }
.report button[type="submit"] { background: var(--brand); color: var(--brand-ink); }
.related h2 { margin-top: 24px; }
.related .tools { margin: 8px 0 0; }
@media (min-width: 900px) {
  /* two columns: the form on the left, the result on the right; each column is one block, so a tall result
     can never stretch the rows of the form (that made the controls jump). */
  #tool-root { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-items: stretch; align-content: start; padding: 20px; }
  #tool-root > .tool-right { position: sticky; top: 12px; }
}

/* ---- Text pages (About, Contact, Privacy, সতর্কতা, 404): hero, lead callout, numbered cards ---- */
.page-hero { background: #e9f5ef; border: 1px solid #cfe6db; border-radius: 16px; padding: 22px 18px 20px; margin: 16px 0 14px; text-align: center; }
.page-hero h1 { margin: 0 0 6px; }
.page-hero .sub { margin: 0 auto; max-width: 640px; color: #35604f; }
.hero-divider { display: block; position: relative; width: 120px; height: 14px; margin: 14px auto 0; }
.hero-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: linear-gradient(90deg, transparent, var(--brand) 25%, var(--brand) 75%, transparent); }
.hero-divider::after { content: ""; position: absolute; left: 50%; top: 1px; width: 10px; height: 10px; margin-left: -5px; background: var(--brand); transform: rotate(45deg); border: 2px solid #e9f5ef; box-sizing: content-box; }
.doc { max-width: 760px; margin: 0 auto; counter-reset: docn; }
.doc-card, .doc-lead { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 14px; margin: 12px 0; box-shadow: 0 1px 3px #0000000a; line-height: 1.85; }
.doc-lead { border-left: 6px solid var(--brand); background: #f7fbf9; }
.doc-lead p, .doc-card p { margin: 0 0 12px; }
.doc-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 1.2rem; line-height: 1.4; }
.doc-card h2::before { counter-increment: docn; content: counter(docn, bengali); flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; font-size: .95rem; font-weight: 700; }
.doc-summary { background: #e9f5ef; border-color: #b7dccb; border-left: 6px solid var(--brand); }
.doc-summary h2::before, .contact-card h2::before { content: none; }
.doc-card ul { margin: 0 0 8px; padding-left: 4px; list-style: none; }
.doc-card li { position: relative; padding: 6px 0 6px 26px; }
.doc-card li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.doc-card a { font-weight: var(--fw-ui); }
.contact-card { text-align: center; padding: 22px 18px; }
.contact-email { margin-bottom: 14px; }
.contact-email .label { display: block; color: var(--muted); font-size: .95rem; }
.contact-email strong { display: block; font-size: 1.3rem; color: var(--brand); overflow-wrap: anywhere; }
.contact-card .buttons { justify-content: center; align-items: center; }
.btn-link { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 18px; border-radius: 10px; background: var(--brand); color: var(--brand-ink) !important; text-decoration: none; }
.contact-card .buttons button { min-height: 46px; padding: 8px 16px; border: 1px solid var(--brand); border-radius: 10px; background: var(--card); color: var(--brand); font-weight: var(--fw-ui); }
.doc .related h2 { margin-top: 20px; }
@media (min-width: 900px) { .doc-card, .doc-lead { padding: 22px 26px 16px; } }
#report.doc-card h2::before { content: none; }

/* ================= Owner feedback build (2026-11-15) ================= */
:root { --hover-bg: #eef7f3; --hover-border: var(--brand); --hover-ink: #084c38; --ring: #0b6b4f55; --sub: #35597f; --sub-tint: #e8eff6; --sub-ink: #1f3a57; }
header.site { --hover-bg: var(--nav-hover); --hover-border: var(--nav-hover); --hover-ink: var(--nav-hover-ink); }
footer.site { --hover-bg: var(--nav-hover); --hover-border: var(--nav-hover); --hover-ink: var(--nav-hover-ink); }

/* ONE hover and keyboard-focus style for everything that is clicked (shared on purpose, defined once) */
:is(a.card, a.brand, a.home-card, a.foot-logo, a.btn-link, nav.main a, .foot-links a, .doc-card a, .doc-lead a, .related a, .seg button, .numeral-switch button, #tool-root button, .report button, .buttons button, details.fold > summary):hover:not(:disabled):not(.on):not([aria-current="page"]) { background-color: var(--hover-bg); border-color: var(--hover-border); color: var(--hover-ink); }
:is(a.card, a.brand, a.home-card, a.foot-logo, a.btn-link, nav.main a, .foot-links a, .doc-card a, .doc-lead a, .related a, .seg button, .numeral-switch button, #tool-root button, .report button, .buttons button, details.fold > summary):focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; box-shadow: 0 0 0 3px #ffffffaa; }
:is(a.card, a.brand, a.home-card, a.foot-logo, a.btn-link, nav.main a, .foot-links a, .doc-card a, .doc-lead a, .related a, .seg button, .numeral-switch button, #tool-root button, .report button, .buttons button, details.fold > summary, input, select, textarea) { cursor: pointer; }
input, textarea { cursor: text; }
@media (prefers-reduced-motion: no-preference) {
  :is(a.card, a.brand, a.home-card, a.foot-logo, a.btn-link, nav.main a, .foot-links a, .doc-card a, .doc-lead a, .related a, .seg button, .numeral-switch button, #tool-root button, .report button, .buttons button, details.fold > summary, input, select, textarea) { transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
}
input:hover, select:hover, textarea:hover { border-color: var(--brand); }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); outline: none; }

/* boxes side by side with a clear selected state (digit switch, duration unit, compounding, land tool) */
.numeral-switch, .seg { display: inline-flex; flex-wrap: wrap; gap: 8px; border: 0; border-radius: 0; overflow: visible; margin-bottom: 12px; }
.numeral-switch button, .seg button { border: 1px solid var(--brand); border-radius: 10px; background: var(--card); color: var(--brand); padding: 8px 18px; min-height: 46px; font: inherit; cursor: pointer; }
.numeral-switch button + button { border-left: 1px solid var(--brand); }
.numeral-switch button.on, .seg button.on { background: var(--brand); color: var(--brand-ink); font-weight: var(--fw-ui); }
.seg-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.seg-tools { margin-left: 8px; }
.tenure-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.tenure-row .seg { margin-bottom: 0; }
.field-compounding .seg { margin-bottom: 8px; }
.field-tenure .hint, .field-compounding .hint { display: block; }

/* result card and empty card */
.results:has(dl) { border: 2px solid #7fb9a0; background: #f6fbf8; border-radius: 18px; overflow: hidden; box-shadow: 0 2px 10px #0b6b4f1f; }
.results dl.rows { margin: 0; padding: 8px 14px 4px; }
.results .rows .strong { background: #e3f3ea; border: 1px solid #b7dccb; border-radius: 12px; margin: 6px 0 10px; padding: 12px 14px; }
.results .rows > div:last-child { border-bottom: 0; }
.save-row { padding: 12px 14px 14px; }
.save-row button { width: 100%; }
.results .notice { border-radius: 0; }
.empty-card { border: 2px dashed #b3d2c4; background: #f8fbf9; border-radius: 16px; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; color: var(--muted); }
.empty-card svg { fill: #9cc7b4; }
.empty-card p { margin: 0; max-width: 260px; }
@media (min-width: 900px) { .empty-card { min-height: 320px; } }

/* solar device list */
.device-list { list-style: none; counter-reset: dev; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.device { counter-increment: dev; border: 1px solid #dde2e7; border-radius: 14px; padding: 12px; background: #fff; }
.device-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.device-name { font-size: 1.05rem; }
.device-name::before { content: counter(dev, bengali) ". "; color: var(--brand); }
.device-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 0 10px; }
.device .remove { margin-left: auto; }
.add-device select { max-width: 100%; }
.other-device { border: 1px dashed #b3d2c4; border-radius: 14px; padding: 12px; margin: 10px 0; background: #f8fbf9; }

/* assumptions: the standard value is the light text inside the box */
.override { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.override-input { max-width: 180px; }
.override-input::placeholder { color: #8b97a8; opacity: 1; }
.assumption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 0; border-bottom: 1px solid #edf0f3; }

/* other tools: names only, centred, light border and a light inside colour */
.card { background: #f9fcfb; border: 1px solid #dde2e7; }
.related { text-align: center; margin: 32px 0 8px; }
.related .tools { grid-template-columns: repeat(auto-fit, minmax(200px, 280px)); justify-content: center; }
.related .card { text-align: center; display: flex; align-items: center; justify-content: center; min-height: 56px; }
main.wrap, main.wrap.wide { padding-bottom: 48px; }

/* inside the closed blocks */
details.fold > .fold-body ul { list-style: none; padding: 0; margin: 0 0 8px; }
details.fold > .fold-body li { position: relative; padding: 6px 0 6px 24px; }
details.fold > .fold-body li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
details.fold > .fold-body p { margin: 0 0 10px; }
details.fold.fold-steps > .fold-body ol { list-style: none; counter-reset: st; padding: 0; margin: 0; display: grid; gap: 10px; }
details.fold.fold-steps > .fold-body ol li { counter-increment: st; position: relative; padding: 12px 12px 12px 58px; border: 1px solid #dde2e7; border-radius: 12px; background: #fff; }
details.fold.fold-steps > .fold-body ol li::before { content: counter(st, bengali); position: absolute; left: 12px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.fold-examples p { border: 1px solid #dde2e7; border-radius: 12px; overflow: hidden; background: #fff; padding: 10px 12px; }
.fold-examples p:has(.ex-in) { padding: 0; }
.ex-in { display: block; padding: 10px 12px; background: #f3f6f8; }
.ex-out { display: block; padding: 10px 12px; background: #e3f3ea; color: var(--hover-ink); font-weight: var(--fw-ui); }
.fold-note > .fold-body { background: var(--warn-bg); border-top: 1px solid var(--warn-line); border-radius: 0 0 14px 14px; padding-top: 12px; }
.fold-note > .fold-body li::before { background: #c58a00; }
.fold-formula > .fold-body p, .fold-formula > .fold-body li { background: #f3f6f8; border: 1px solid #dde3e9; border-left: 5px solid var(--brand); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; line-height: 1.9; }
.fold-formula > .fold-body li::before { content: none; }
.fold-formula > .fold-body li { padding-left: 12px; }
.fold-faq .faq-item { border: 1px solid #dde2e7; border-radius: 12px; padding: 12px; margin: 0 0 10px; background: #fff; }
.fold-faq h3 { margin: 0 0 4px; font-size: 1rem; color: var(--brand); display: flex; gap: 10px; align-items: baseline; }
.fold-faq h3::before { content: "?"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; }
.fold-faq .faq-item p { margin: 0; }
table.sources thead th { background: #eef3f0; }
table.sources tbody tr:nth-child(even) { background: #f9fbfa; }
.conf { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .85rem; font-weight: var(--fw-ui); background: #e8eaee; color: #495263; white-space: nowrap; }
.conf-confirmed { background: #dcf2e5; color: #0b5f3f; }
.conf-single-source { background: #fff1d1; color: #7a5200; }
.conf-unconfirmed { background: #fde4e1; color: #9b2a1f; }
#tool-root .seg button.on, #tool-root .numeral-switch button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: var(--fw-ui); }
#tool-root .seg button, #tool-root .numeral-switch button { padding: 8px 18px; }

/* ---- dropdowns on phones: big text (16 px minimum so iOS does not zoom), 48 px tall, clear arrow ---- */
select { font-size: 1.0625rem; min-height: 48px; padding: 8px 40px 8px 12px; appearance: none; -webkit-appearance: none; background-color: var(--card); background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; color: var(--ink); }
input, textarea { font-size: 1.0625rem; }
.seg-tools { margin-left: 0; }

.tool-left, .tool-right { min-width: 0; }
.tool-right > .results:has(dl) { margin-top: 0; }
.tool-right > .notes { margin-top: 12px; }
.tool-right > .results, .tool-right > .results:has(dl) { margin-top: 0; }
@media (max-width: 899px) { .tool-right { margin-top: 16px; } }

/* ---- accessible list (replaces the long native dropdowns): same look in every browser ---- */
.cs { position: relative; }
.cs-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 8px 40px 8px 12px; text-align: left; font-size: 1.0625rem; background-color: var(--card); color: var(--ink); border: 1px solid #aeb7c4; border-radius: 10px; background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 7px 7px, 7px 7px; background-repeat: no-repeat; }
.cs-btn[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.cs.cs-placeholder .cs-text { color: #6b7688; }
.cs-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: min(320px, 60vh); overflow-y: auto; background: var(--card); border: 1px solid var(--brand); border-radius: 12px; box-shadow: 0 10px 28px #0000003a; overscroll-behavior: contain; }
.cs-list:focus { outline: none; }
.cs-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px; font-size: 1.0625rem; line-height: 1.4; border-radius: 8px; cursor: pointer; }
.cs-opt[aria-selected="true"] { font-weight: var(--fw-ui); color: var(--brand); }
.cs-opt[aria-selected="true"]::after { content: "\2713"; color: var(--brand); font-weight: var(--fw-ui); }
.cs-opt:hover, .cs-opt.cs-active { background: #e9f5ef; }

/* ---- Three levels in the calculator card (2026-11-16): 1) header band with the language switch, centred;
   2) main selection (green); 3) sub-options (steel blue, smaller). Colours are defined once as variables. ---- */
.plot-helper { margin: 0; padding: 0; border: 0; }
.tool-head { display: flex; justify-content: center; background: var(--header-band); margin: -16px -16px 16px; padding: 12px 16px; border-radius: 14px 14px 0 0; grid-column: 1 / -1; }
.tool-head .numeral-switch { margin: 0; }
#tool-root .tool-head .numeral-switch button { background: transparent; color: #fff; border: 1px solid #ffffffcc; }
#tool-root .tool-head .numeral-switch button.on { background: #fff; color: var(--header-band); border-color: #fff; font-weight: var(--fw-ui); }
.tool-head { --hover-bg: #ffffff2e; --hover-border: #fff; --hover-ink: #fff; }
.seg-main { --hover-bg: #f1f3f5; --hover-border: var(--brand); --hover-ink: var(--brand); }
.seg-sub { --hover-bg: var(--sub-tint); --hover-border: var(--sub); --hover-ink: var(--sub-ink); }
#tool-root .seg-sub button { border-color: var(--sub); color: var(--sub); background: var(--card); min-height: 44px; padding: 6px 14px; font-size: .97rem; }
#tool-root .seg-sub button.on { background: var(--sub); color: #fff; border-color: var(--sub); font-weight: var(--fw-ui); }
.seg-sub { margin-bottom: 8px; }
@media (min-width: 900px) { .tool-head { margin: -20px -20px 20px; } }
/* the result box has one size and one place on every tab and in every state */

/* ---- Motion (technique taken from the owner's Fiverr sample site; transform and opacity only) ----
   The hidden start state exists only after motion.js adds .motion and .rv, so without JavaScript all is visible. */
:root { --mv-ease: cubic-bezier(.2, .7, .2, 1); --mv-dur: 450ms; --mv-dist: 28px; }
main, footer { overflow-x: clip; }
.motion .rv { opacity: 0; transition: opacity var(--mv-dur) var(--mv-ease), transform var(--mv-dur) var(--mv-ease); }
.motion .rv[data-rv="l"] { transform: translateX(calc(var(--mv-dist) * -1)); }
.motion .rv[data-rv="r"] { transform: translateX(var(--mv-dist)); }
.motion .rv[data-rv="u"] { transform: translateY(var(--mv-dist)); }
.motion .rv.rv-in { opacity: 1; transform: none; }
.motion .rv.rv-now { transition: none; }
.motion .rv.rv-d1 { transition-delay: 70ms; }
.motion .rv.rv-d2 { transition-delay: 140ms; }
.motion .rv.rv-d3 { transition-delay: 210ms; }
.motion .rv.rv-d4 { transition-delay: 280ms; }
.motion .rv.rv-d5 { transition-delay: 350ms; }
/* language switch inside the calculator box (both directions): the left column comes in from the left, the right column
   (result or empty card) from the right, and both settle in place. Header band stays still. */
@keyframes swap-from-left { from { opacity: 0; transform: translateX(-56px); } to { opacity: 1; transform: none; } }
@keyframes swap-from-right { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
.motion #tool-root.swap .tool-left { animation: swap-from-left 460ms var(--mv-ease) both; }
.motion #tool-root.swap .tool-right { animation: swap-from-right 460ms var(--mv-ease) both; }

/* ---- Hover and open styles that differ from the green "selected" fill (the "explore" feel of the owner's Fiverr sample
   site: lift, accent line, moving arrow; plain CSS). The one shared hover rule above still sets the colours from variables. ---- */
:root { --accent-warm: #d9a441; --warm-tint: #fff7e8; }
details.fold, a.card, .related a, .doc-card, .doc-lead { --hover-bg: var(--warm-tint); --hover-border: var(--accent-warm); --hover-ink: var(--ink); }
details.fold > summary { border-radius: 14px; }
details.fold[open] > summary { border-radius: 14px 14px 0 0; box-shadow: inset 4px 0 0 var(--sub); }
details.fold > summary:hover { box-shadow: inset 4px 0 0 var(--accent-warm); }
details.fold > summary::before { transition: transform .25s ease-out; }
details.fold > summary:hover::before { transform: translateX(4px); }
details.fold[open] > summary:hover::before { transform: none; }
.seg button:hover:not(.on):not(:disabled), .numeral-switch button:hover:not(.on) { box-shadow: inset 0 -3px 0 var(--hover-border); }
a.card, .related a { transition: transform .25s ease-out, box-shadow .25s ease-out, background-color .18s ease, border-color .18s ease; }
a.card:hover, .related a:hover { transform: translateY(-3px); box-shadow: 0 8px 18px #00000024; }
.motion a.card.rv.rv-in:hover, .motion .related a.rv.rv-in:hover { transform: translateY(-3px); transition-delay: 0ms; }

/* land converter: the 8-row result is a two-column grid of units on desktop, so the tallest state is much shorter */
@media (min-width: 900px) {
  #tool-root[data-tool="land-converter"] .results dl.rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  #tool-root[data-tool="land-converter"] .results .rows .strong { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  #tool-root[data-tool="land-converter"] .custom-values { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  #tool-root[data-tool="land-converter"] .plot-fields { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; }
  #tool-root[data-tool="land-converter"] .custom-values[hidden] { display: none; }
}

/* Weights: bold (700) only for headings, block titles and the big result number; everything else is regular (400).
   Only 400 and 700 are self-hosted, so no other weight is used. */
.rows .strong dd, .rows .strong dt { font-weight: var(--fw-head); }
.rows .strong dt { font-weight: var(--fw-ui); }
details.fold > summary, h1, h2, h3 { font-weight: var(--fw-head); }

/* ---- Home (owner picked option A): calm centred hero, three big icon cards, vertically centred between header and footer ---- */
main:has(.home-hero) { display: flex; flex-direction: column; justify-content: center; }
.home-hero { text-align: center; padding: 28px 0 24px; }
.home-hero h1 { margin: 0 0 8px; font-size: 1.9rem; }
.home-hero p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.home-tools { gap: 16px; }
.home-card { position: relative; padding: 20px 20px 22px; border-radius: 18px; background: var(--card); }
.home-card .ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #e3f3ea; margin-bottom: 12px; }
.home-card .ic svg { width: 28px; height: 28px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-card b { color: var(--ink); font-size: 1.15rem; margin-bottom: 4px; }
.home-card .arrow { position: absolute; right: 20px; top: 22px; color: var(--brand); font-size: 1.3rem; font-style: normal; transition: transform .25s ease-out; }
.home-card:hover .arrow { transform: translateX(4px); }
@media (min-width: 900px) { .home-hero { padding: 48px 0 32px; } .home-hero h1 { font-size: 2.3rem; } .home-hero p { font-size: 1.15rem; } }

/* Clear sits right under the last field in every tab and mode (small gap, no blank above it). The card height follows the
   content of the current tab; the reserved min-height below is only the height of the DEFAULT state at load, so nothing shifts
   while the page loads (later changes come from the visitor's click, which does not count as layout shift). */

/* Result rows as separate cells (a small table): label and value in their own bordered cell, a gap between cells. */
.results dl.rows { display: grid; gap: 8px; }
.results .rows > div:not(.strong) { background: #fff; border: 1px solid #dde2e7; border-radius: 10px; padding: 8px 12px; align-items: baseline; }
.results .rows > div:not(.strong) dt { padding-right: 10px; border-right: 1px solid #dde2e7; flex: 0 0 46%; }
.results .rows > div:not(.strong) dd { flex: 1; }
/* Notes under the result: each paragraph is its own block with a blue bar, so two notes never read as one text. */
.tool-right > .notes p.hint { background: #fff; border: 1px solid #dde2e7; border-left: 4px solid var(--sub); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; }
/* Opening a closed block: the content slides in (transform and opacity only), items one after another. */
@keyframes fold-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.motion details.fold[open] > .fold-body { animation: fold-in 380ms var(--mv-ease) both; }
.motion details.fold[open] .fold-body :is(li, .faq-item) { animation: fold-in 380ms var(--mv-ease) both; }
.motion details.fold[open] .fold-body li:nth-child(2), .motion details.fold[open] .faq-item:nth-child(2), .motion details.fold[open] .fold-body li:nth-child(2) { animation-delay: 60ms; }
.motion details.fold[open] .fold-body li:nth-child(3), .motion details.fold[open] .faq-item:nth-child(3), .motion details.fold[open] .fold-body li:nth-child(3) { animation-delay: 120ms; }
.motion details.fold[open] .fold-body li:nth-child(n+4), .motion details.fold[open] .faq-item:nth-child(n+4), .motion details.fold[open] .fold-body li:nth-child(n+4) { animation-delay: 180ms; }

/* The load reservation stays until the visitor first touches the page (script adds html.touched on the first click, tap or key press):
   no layout shift can come from it, and from then on the card follows the content of the current tab (no blank under Clear). */
@media (scripting: enabled) { html.touched #tool-root { min-height: 0 !important; } }

/* Footer on desktop: logo on the left, links and copyright on the right (one compact band). */
@media (min-width: 900px) {
  footer.site .wrap { display: grid; grid-template-columns: auto 1fr; column-gap: 32px; align-items: center; }
  footer.site .foot-logo { grid-column: 1; grid-row: 1 / 3; margin: 0; }
  footer.site .foot-logo-img { width: 110px; }
  footer.site .foot-links { grid-column: 2; grid-row: 1; align-self: end; }
  footer.site .copy { grid-column: 2; grid-row: 2; align-self: start; }
}

/* Phone menu: a compact rounded card under the hamburger button (right side), opening with a short fade + scale from its top-right
   corner (transform and opacity only). Still no JavaScript: the checkbox opens it; the button or a tap outside (the scrim label) closes it. */
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.92); } to { opacity: 1; transform: none; } }
.menu-scrim { display: none; }
.burger-in:checked ~ .menu-scrim { display: block; position: fixed; inset: 0; z-index: 1; cursor: default; }
header.site .bar { position: relative; z-index: 2; }
@media (max-width: 899px) {
  nav.main { left: auto; right: 12px; top: calc(100% + 6px); width: min(260px, calc(100vw - 32px)); padding: 6px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 28px #00000026; z-index: 3; transform-origin: top right; }
  .burger-in:checked ~ nav.main { animation: menu-in 240ms var(--mv-ease) both; }
  nav.main a { border: 0; border-radius: 10px; min-height: 48px; margin: 2px 0; }
}

/* ---- Landing motion: on every page load (and back/forward restore) the page content, not the sticky header, fades and slides in,
   one block after another (the calculator card the moment it is built). Plain CSS (no script needed, so no flash and nothing hidden without JavaScript: only when scripting is on).
   transform and opacity only; 380 ms; the first blocks start at once so the main content is never hidden for long. ---- */
@keyframes land-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes land-in-again { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (scripting: enabled) {
  html:not(.still) main > :not(#tool-root) { animation: land-in 260ms cubic-bezier(.16,.84,.3,1) both; }
  html:not(.still) main.again > :not(#tool-root) { animation-name: land-in-again; }
  html:not(.still) main > :nth-child(2):not(#tool-root) { animation-delay: 30ms; }
  html:not(.still) main > :nth-child(3):not(#tool-root) { animation-delay: 60ms; }
  html:not(.still) main > :nth-child(n+4):not(#tool-root) { animation-delay: 80ms; }
  /* The calculator card shows a skeleton at the first paint (the dark band and the empty result card, drawn by CSS only), so the
     card is never an empty hole while the script loads. When the script has built the card, its two columns fade in over the
     skeleton (no delay, 200 ms); the card itself is not moved. */
  #tool-root:not(:has(.tool-left))::after { content: ""; display: block; height: 320px; border: 2px dashed #b3d2c4; background: #f8fbf9; border-radius: 16px; grid-column: 2; }
  html:not(.still) #tool-root:not(.landed) > :is(.tool-left, .tool-right) { animation: land-in 200ms cubic-bezier(.16,.84,.3,1) both; }
}

/* The header and the page never shift sideways between pages: the scrollbar space is always reserved (short pages such as Home had no
   scrollbar, so their centred layout sat 7.5 px to the right of the tall pages). */
html { scrollbar-gutter: stable; }

/* Page changes: the header stays exactly where it is. Browsers that support cross-document view transitions keep the header as its own
   layer (no fade, no repaint flash) and swap only the page content; the content then plays the landing motion. Others use the cached,
   preloaded logo (see _headers and the preload tag). */
@view-transition { navigation: auto; }
header.site { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }

/* The language band is real HTML from the first byte (same size as the built one); without scripts it is hidden. */
@media (scripting: none) { .tool-head-static { display: none; } }