:root { color-scheme: light dark; --bg: #f6f7f8; --card: #fff; --text: #1b2329; --muted: #5b6770; --line: #d8dee3; --accent: #0b6b57; --accent-soft: #e3f2ee; --warn-bg: #fff6e0; --warn: #6b4e00; --err: #a3271f; }
@media (prefers-color-scheme: dark) { :root { --bg: #12171b; --card: #1b2228; --text: #e8edf0; --muted: #a2afb8; --line: #333e46; --accent: #5ed1b6; --accent-soft: #17332d; --warn-bg: #33290f; --warn: #f1d58b; --err: #ff9a91; } }
* { box-sizing: border-box; }
/* Layout shift (measured 2026-11-09, desktop): the empty <main> painted before the scripts, then the page grew
   past the window, the scrollbar appeared and everything moved (CLS 0.438 English, 0.072 Arabic). Reserve the
   scrollbar's place, and keep the empty shell invisible until app.js fills it (visibility is not a layout shift). */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
main:has(> #head:empty) { visibility: hidden; animation: shellReveal 0s 3s forwards; }
@keyframes shellReveal { to { visibility: visible; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif; }
main { max-width: 1280px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
#form, #result, section { min-width: 0; }
@media (min-width: 900px) { main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } #head { grid-column: 1 / -1; } }
.brand { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-weight: 700; margin-bottom: 10px; }
.lang { color: var(--accent); font-weight: 600; padding: 8px 4px; }
.tabs { display: flex; gap: 8px; }
.tab { flex: 1; min-height: 46px; border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.tab.on { background: var(--accent); border-color: var(--accent); color: var(--card); }
h1 { font-size: 1.4rem; margin: 0 0 4px; line-height: 1.3; }
h2 { font-size: 1.05rem; margin: 0 0 8px; }
.intro { margin: 0 0 12px; color: var(--muted); }
.card, #result { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.card { margin-bottom: 12px; }
.row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.with-unit { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; align-items: end; }
.field { display: grid; gap: 4px; margin-bottom: 8px; min-width: 0; }
.with-unit .field, .grid > .field { margin-bottom: 0; }
label { font-size: .9rem; font-weight: 600; }
input, select { width: 100%; min-height: 46px; padding: 8px 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
input { direction: ltr; text-align: start; }
[dir="rtl"] input { text-align: right; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
button { font: inherit; cursor: pointer; }
.link { background: none; border: 0; color: var(--err); padding: 8px; min-height: 40px; text-decoration: underline; }
.add { width: 100%; min-height: 46px; background: var(--accent-soft); color: var(--text); border: 1px dashed var(--accent); border-radius: 8px; font-weight: 600; margin-bottom: 12px; }
.options { margin-bottom: 4px; }
#result section { margin-bottom: 18px; }
.report-head { display: none; }
.stats { display: grid; gap: 6px; }
.stat { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--bg); }
.stat.strong { background: var(--accent-soft); font-weight: 700; font-size: 1.15rem; }
.num { font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: start; white-space: nowrap; }
th { background: var(--bg); }
.steps, ul { margin: 0; padding-inline-start: 22px; }
.steps li { margin-bottom: 8px; }
.steps bdi { display: block; font-weight: 600; overflow-wrap: anywhere; }
.warn { background: var(--warn-bg); color: var(--warn); padding: 10px; border-radius: 8px; margin: 10px 0 0; }
.problem { color: var(--err); font-weight: 600; margin: 0 0 12px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.actions button, .clear, .danger { min-height: 46px; border-radius: 8px; font-weight: 700; padding: 6px 12px; }
.primary { background: var(--accent); color: var(--card); border: 0; }
.secondary, .clear { background: transparent; color: var(--text); border: 1px solid var(--line); }
.danger { background: var(--err); color: var(--card); border: 0; }
.clear { width: 100%; margin-top: 4px; font-weight: 600; }
.clear-confirm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.clear-confirm span { grid-column: 1 / -1; font-weight: 600; }
.clear-confirm .clear { margin: 0; }
.hint { background: var(--bg); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.hint p { margin: 0; }
.hint .example { color: var(--muted); margin-top: 6px; }
.stat.strong span:last-child { font-size: 1.5rem; line-height: 1.2; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); gap: 8px; align-items: end; }
.pair .field { margin-bottom: 0; }
@media (max-width: 420px) { .pair { grid-template-columns: minmax(0, 1fr); } .swap { justify-self: center; } }
.swap { min-height: 46px; min-width: 52px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); font-size: 1.3rem; line-height: 1; }
.answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px; border-radius: 8px; background: var(--accent-soft); }
.answer > .num { font-size: 1.9rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.answer .unit { font-weight: 600; color: var(--muted); }
.from-line { color: var(--muted); margin: 6px 2px 12px; overflow-wrap: anywhere; }
.actions { grid-template-columns: 1fr; }
.copy { width: 100%; }
.status { min-height: 1.4em; margin: 0 0 8px; color: var(--accent); font-weight: 600; }
.factor { margin: 0 0 14px; overflow-wrap: anywhere; }
tr.on td { background: var(--accent-soft); font-weight: 700; }
td.n { text-align: end; }
td { white-space: normal; }
.chips-label { font-size: .9rem; font-weight: 600; margin: 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { min-width: 46px; min-height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-weight: 600; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--card); }
.hint { margin: 0; }
.offscreen { position: fixed; top: -1000px; inset-inline-start: -1000px; opacity: 0; }
sup { font-size: .7em; }
.formula > .num { display: block; font-weight: 600; margin-top: 4px; }
table.bars th, table.bars td { white-space: normal; padding: 6px 5px; }
@media (max-width: 480px) { table.bars { font-size: .85rem; } }
/* Inside the site's frame the tool is 317 px wide; at 200% text the site link and the language link no longer
   fit on one line and pushed the page sideways (found in the launch test, 2026-11-09). Let the row wrap. */
.brand { flex-wrap: wrap; }