/* The direct one-sentence answer under the H1. First thing a reader sees and the unit an AI
   answer lifts, so it is a real paragraph in the HTML, not a JS-filled box. */
.answer{font-size:16.5px;color:var(--text-2);line-height:2.1;max-width:700px;margin-top:14px;
  border-inline-start:3px solid var(--green);padding-inline-start:15px}

.calc-shell{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:26px}
@media (max-width:900px){.calc-shell{grid-template-columns:1fr;gap:16px}}
.calc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px;
  box-shadow:var(--shadow)}
.calc-card .ch{font-size:18px;font-weight:800;margin:0}
.calc-card .cs{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.9}
@media (max-width:520px){.calc-card{padding:18px 16px;border-radius:20px}}

.fld{margin-top:17px}
.fld>label,.fld>.fl{display:block;font-size:13.5px;font-weight:800;margin-bottom:8px}
.fld small{font-weight:700;color:var(--muted);font-size:12px}
/* 48px min height on every control — the whole point of a phone-first calculator. */
.fld input,.fld select{width:100%;font:inherit;font-size:16px;min-height:48px;color:var(--text);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:12px 15px;
  -webkit-appearance:none;appearance:none}
.fld input:focus,.fld select:focus{outline:none;background:#fff;border-color:var(--green-2)}
.fld input::-webkit-outer-spin-button,.fld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23727f6e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 13px center;background-size:20px;padding-inline-start:40px}
.fld .fh{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.85}

.seg{display:flex;gap:8px;flex-wrap:wrap}
/* The radio itself stays in the accessibility tree and in the tab order — opacity, not display. */
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg label{flex:1 1 90px;display:flex;align-items:center;justify-content:center;min-height:48px;
  padding:10px 8px;font-size:14px;font-weight:800;color:var(--text-2);background:var(--bg-soft);
  border:1px solid var(--line);border-radius:14px;text-align:center;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.seg input:checked+label{background:var(--bg-tint);border-color:var(--green-2);color:var(--green-3)}
.seg input:focus-visible+label{outline:2px solid var(--green-3);outline-offset:2px}

/* Sticky on desktop so the number stays visible while the fields are edited; static on a phone,
   where the result sits directly under the last field anyway. */
.calc-res{position:sticky;top:82px}
@media (max-width:900px){.calc-res{position:static}}
.res-lead{font-size:12.5px;color:var(--muted);line-height:1.95;margin-bottom:10px}
/* min-height is the no-layout-shift guarantee: the card is pre-rendered, and swapping in a taller
   or shorter result must not move the prose underneath it. */
.calc-out{min-height:326px}
.res{background:linear-gradient(168deg,var(--bg-tint),#fff 60%);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:24px 22px;height:100%;box-sizing:border-box}
.res-top{padding-bottom:15px;border-bottom:1px solid var(--line)}
.res-big{display:flex;align-items:baseline;gap:8px}
.res-big b{font-size:clamp(38px,8vw,46px);font-weight:800;line-height:1.16;color:var(--ink-green)}
.res-big i{font-style:normal;font-size:15px;font-weight:800;color:var(--muted)}
.res-cap{font-size:13.5px;font-weight:700;color:var(--muted);margin-top:2px}
.res-tag{display:inline-flex;margin-top:12px;font-size:12.5px;font-weight:800;padding:6px 14px;
  border-radius:99px;background:var(--bg-soft);border:1px solid var(--line);color:var(--text-2)}
.res-tag.t-ok{background:#eaf7d9;border-color:#c7e5a0;color:#2f6b06}
.res-tag.t-warn{background:#fdf4dd;border-color:#f0dca6;color:#7a5606}
.res-tag.t-bad{background:#fdeceb;border-color:#f3c9c5;color:#8e2f26}
.res-lines{list-style:none;margin:0;padding:0}
.res-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.res-lines li:last-child{border-bottom:0;padding-bottom:0}
.res-lines span{color:var(--muted);line-height:1.8}
.res-lines b{font-weight:800;text-align:left;line-height:1.8}
.res-warn{margin-top:14px;font-size:13px;line-height:1.95;color:#7a5606;background:#fdf4dd;
  border:1px solid #f0dca6;border-radius:14px;padding:12px 15px}
.res-note{margin-top:14px;font-size:12.5px;line-height:1.95;color:var(--muted)}
.res-empty{display:grid;place-items:center;text-align:center}
.res-empty p{font-size:14px;color:var(--muted);line-height:2;max-width:300px}
@media (max-width:520px){.res{padding:20px 17px;border-radius:20px}.calc-out{min-height:0}}

/* Cross-links between the five tools. Every tool page carries the other four. */
.tool-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px;margin-top:18px}
.tool-strip a{display:flex;align-items:center;gap:11px;min-height:58px;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:14px;font-weight:800;
  transition:transform .18s,border-color .18s,color .18s}
.tool-strip a:hover{transform:translateY(-2px);border-color:var(--green-2);color:var(--green-3)}
.tool-strip svg{width:21px;height:21px;flex:0 0 auto;stroke:var(--green-3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* The YMYL sourcing block. Named methods with real citations, not a vague "based on science". */
.srcs{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:2.05;
  padding-inline-start:19px}
.srcs li{margin:5px 0}
/* Formulas are set in a math serif, not the UI sans. A published equation printed in a bold UI
   font reads like a slogan; the serif, the italic variables and the real stacked fraction are what
   make a reader trust that this is the actual Mifflin-St Jeor / US-Navy equation and not our
   paraphrase of it. Persian words inside a formula stay in the brand sans — the math font has no
   Arabic-script glyphs and would fall back mid-line anyway. */
.formula{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-top:14px;font-size:16px;line-height:2.6;
  font-family:"Cambria Math","Latin Modern Math","STIX Two Math","Times New Roman",Georgia,serif;
  direction:ltr;text-align:left;overflow-x:auto;overscroll-behavior-x:contain}
/* Only the line-level spans go block. A bare `.formula span` rule also caught .frac/.num/.den —
   which are spans too — and flattened every fraction back into one line. */
.formula > span:not(.frac){display:block;color:var(--text-2);margin-top:6px}
.formula i{font-style:italic}
.formula b{font-weight:700;font-style:italic}
/* Persian identifiers inside an LTR formula: the sans is the only font here with the glyphs, and
   the isolate stops a Persian word from dragging the surrounding operators to the wrong side. */
.formula .fa{font-family:"GFSans",sans-serif;font-style:normal;font-size:14px;font-weight:700;
  unicode-bidi:isolate;direction:rtl}
/* A real two-line fraction rather than a ÷ sign. inline-flex keeps it on the same baseline row as
   the rest of the equation, which a <table> or a <div> would not. */
.frac{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;
  margin:0 5px;line-height:1.45}
.frac .num{display:block;padding:0 6px 2px}
.frac .den{display:block;border-top:1.5px solid currentColor;padding:2px 6px 0}
.formula sup{font-size:.72em;vertical-align:super;line-height:0}
/* A formula is one of the few places on a Persian page where LTR is correct, but the caption
   above it is not — so the caption stays outside the box. */
.formula-cap{font-size:13px;font-weight:800;color:var(--text-2);margin-top:18px}

@media (hover:none){
  .tool-strip a:hover{transform:none;border-color:var(--line);color:inherit}
}