/*
 * Calculator chrome for /tools/* in the v3 look. Loaded after site3.css and
 * built only on its tokens (--bg, --ink, --dim, --mute, --line, --line2, --amber,
 * --s-idle, --ease). Only tarefe.html and rahandazi.html use this file.
 *
 * Markup contract with tools/calc.js and the inline page scripts — do not rename:
 * form#calc, input[name], input[name="tier"] radios, [data-out], [data-vip],
 * #share, #sw-note.
 */

/* ---------- the two-part shell: inputs on one side, live answer on the other ---------- */
.calc-sec{padding:0 6vw 12vh}
.calc{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start;max-width:1200px;margin:0 auto}
.calc form{display:grid;gap:16px;min-width:0}

/* ---------- input side ---------- */
.fset{min-width:0;border:0;padding:28px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));box-shadow:inset 0 0 0 1px var(--line)}
/* A floated legend behaves like normal content instead of riding the fieldset's top edge. */
.fset>legend{float:inline-start;width:100%;display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:0;font-size:1.1rem;font-weight:900}
.fset>legend+*{clear:both}
.fset>legend i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;font-style:normal;font-size:.8rem;font-weight:800;color:var(--amber);background:rgba(255,197,61,.1)}
.fset .stack{display:grid;gap:18px;margin-bottom:18px}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;
  /* a field whose neighbour has a hint line must not stretch its own box */
  align-items:start}
.grid2 .wide{grid-column:1/-1}

.fld{display:grid;gap:8px;min-width:0}
.fld>span:not(.unit){font-size:.9rem;font-weight:700;line-height:1.7;color:var(--ink)}
.fld input:not([type=radio]){width:100%;min-height:52px;padding:0 16px;border:0;border-radius:12px;outline:0;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line2);
  font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums;transition:box-shadow .25s,background .25s}
.fld input:not([type=radio]):hover{box-shadow:inset 0 0 0 1px rgba(170,185,255,.24)}
.fld input:not([type=radio]):focus{background:rgba(0,0,0,.42);box-shadow:inset 0 0 0 1px rgba(255,197,61,.6),0 0 0 4px rgba(255,197,61,.08)}
.fld small{font-size:.8rem;line-height:1.9;color:var(--dim)}
.fld small a{color:var(--amber)}
.fld .unit{position:relative;display:block}
.fld .unit input{padding-inline-end:64px}
.fld .unit b{position:absolute;inset-inline-end:16px;top:50%;translate:0 -50%;font-size:.8rem;font-weight:700;color:var(--dim);pointer-events:none}

/* ---------- PC-tier presets: three radios that write one number into one field ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tier{position:relative;min-width:0;padding:14px 16px;border-radius:14px;cursor:pointer;
  background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .25s,background .25s}
.tier input{position:absolute;inset-inline-start:0;top:0;width:0;height:0;opacity:0;pointer-events:none}
.tier b{display:block;font-size:.95rem;font-weight:800}
.tier span{display:block;margin-top:4px;font-size:.78rem;line-height:1.7;color:var(--dim)}
.tier:hover{box-shadow:inset 0 0 0 1px rgba(170,185,255,.28)}
.tier:has(input:checked){background:rgba(255,197,61,.08);box-shadow:inset 0 0 0 1px rgba(255,197,61,.6)}
.tier:has(input:checked) b{color:var(--amber)}
.tier:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}

/* ---------- answer side: the till receipt ---------- */
.answer{position:sticky;top:96px;min-width:0;container-type:inline-size;padding:32px;border-radius:24px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,197,61,.075),rgba(255,255,255,.015) 42%);
  box-shadow:inset 0 0 0 1px rgba(255,197,61,.26),0 40px 90px -30px #000}
.answer::before{content:"";position:absolute;inset:-40% -20% auto;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,197,61,.16),transparent)}
.answer .a-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.answer h2{font-size:1rem;font-weight:800;color:var(--dim)}
.answer .now{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:700;
  color:var(--s-idle);background:rgba(62,223,171,.1)}
.big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:18px}
.big [data-out]{min-width:0;overflow-wrap:anywhere;font-size:clamp(2.3rem,13.5cqi,4.6rem);font-weight:900;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--amber)}
.big small{font-size:1rem;font-weight:700;color:var(--dim)}
.answer .cap{margin-top:8px;font-size:.88rem;line-height:1.9;color:var(--dim)}

.lines{margin-top:26px;border-top:1px dashed var(--line2)}
.line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;padding:14px 2px;
  border-bottom:1px dashed var(--line2);font-size:.92rem;color:var(--dim)}
/* a long Toman figure drops to its own line whole instead of splitting from «تومان» */
.line b{margin-inline-start:auto;text-align:end;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.line.hi{color:var(--ink)}
.line.hi b{color:var(--s-idle)}

.formula{margin-top:22px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.28);font-size:.85rem;line-height:2.05;color:var(--dim)}
.formula b{color:var(--ink)}
.go-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.go-row .btn,.go-row .btn-line{flex:1 1 auto}
button.btn-line{border:0;background:transparent;cursor:pointer}
.answer .fine{margin-top:18px;font-size:.82rem;line-height:2;color:var(--dim)}
.answer .fine a{color:var(--amber)}

/* brief amber pulse when a result actually changes (class set by the page script) */
.answer .tick{animation:tick .55s var(--ease)}
@keyframes tick{from{opacity:.35;filter:blur(3px)}}

/* ---------- notes ---------- */
.notes{list-style:none;counter-reset:n;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:1200px;margin:40px auto 0}
.notes li{counter-increment:n;display:flex;gap:14px;padding:20px 22px;border-radius:16px;font-size:.96rem;line-height:2;color:var(--dim);
  background:rgba(255,255,255,.022);box-shadow:inset 0 0 0 1px var(--line);overflow-wrap:break-word}
.notes li::before{content:counter(n,persian);flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:3px;border-radius:8px;
  font-size:.8rem;font-weight:800;color:var(--amber);background:rgba(255,197,61,.1)}
.notes li>div{min-width:0}
.notes b{color:var(--ink)}
.notes .k{direction:ltr;unicode-bidi:isolate;padding:1px 6px;border-radius:6px;font-size:.88em;color:var(--ink);background:rgba(255,255,255,.05)}
.other-tool{max-width:1200px;margin:22px auto 0;font-size:.95rem;color:var(--dim)}
.other-tool a{font-weight:800;color:var(--amber)}

/* ---------- small screens ---------- */
@media (max-width:980px){
  .calc-sec{padding:0 20px 9vh}
  .calc{grid-template-columns:minmax(0,1fr)}
  .answer{position:relative;top:auto;padding:24px 22px}
  .fset{padding:22px 20px}
  .notes{grid-template-columns:minmax(0,1fr);margin-top:28px}
  .notes li{padding:18px}
}
@media (max-width:560px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .tier span{margin-top:0}
}