/* Calc: shared styles for inawaf.com/cal */
:root{
  --bg:#071a21; --bg2:#0b242d; --bg3:#0f2d38;
  --ink:#e9f1f1; --mute:rgba(233,241,241,.7); --faint:rgba(233,241,241,.46);
  --line:rgba(233,241,241,.13); --line2:rgba(233,241,241,.26);
  --amber:#f2c14e;
  --ok:#5fd0a8; --mild:#f2c14e; --mod:#f39a52; --bad:#f26a5e; --na:#a9bcc0;
  --display:'Bricolage Grotesque','Readex Pro','Segoe UI',Tahoma,system-ui,sans-serif;
  --body:'Readex Pro','Segoe UI',Tahoma,system-ui,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5.5rem)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--body); font-weight:340; line-height:1.55; -webkit-font-smoothing:antialiased}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(233,241,241,.5) 1px, transparent 1.5px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 70% 0%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 70% 0%, #000, transparent 75%);
  opacity:.09;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:6px}

/* Header, matching the main site */
.bar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.85rem clamp(1.25rem,5vw,4rem);
  background:rgba(7,26,33,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font:600 1.3rem/1 var(--display); color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.right{display:flex; align-items:center; gap:clamp(.4rem,1.5vw,1.25rem)}
.tabs{display:flex; gap:.25rem}
.tabs a{padding:.5rem .85rem; border-radius:999px; font:500 .9rem/1 var(--body); color:var(--ink); text-decoration:none; opacity:.7; transition:opacity .2s, box-shadow .2s}
.tabs a:hover{opacity:1; box-shadow:inset 0 0 0 1.5px rgba(233,241,241,.35)}
.tabs a.drop{color:var(--amber); opacity:.95}
.tabs a.drop:hover{box-shadow:inset 0 0 0 1.5px var(--amber)}
.tabs a.here{opacity:1; box-shadow:inset 0 0 0 1.5px rgba(233,241,241,.35)}
.lang{display:flex; gap:.25rem; padding-inline-start:clamp(.4rem,1.5vw,1.25rem); border-inline-start:1px solid rgba(233,241,241,.2)}
.lang button{all:unset; cursor:pointer; padding:.5rem .85rem; border-radius:999px; font:500 .9rem/1 var(--body); color:var(--ink); opacity:.7}
.lang button[aria-pressed="true"]{opacity:1; box-shadow:inset 0 0 0 1.5px currentColor}
.lang button:hover{opacity:1}
@media (max-width:480px){
  .tabs a,.lang button{padding:.45rem .55rem; font-size:.84rem}
  .tabs{gap:.1rem}
}

.wrap{max-width:74rem; margin:0 auto; padding:clamp(1.5rem,5vw,3.5rem) clamp(1.25rem,5vw,4rem) 3rem}

/* ---------- Hub ---------- */
.hub-hero{padding:clamp(1rem,5vw,3rem) 0 clamp(2rem,5vw,3.5rem)}
.hub-hero h1{margin:0; font:700 clamp(4.4rem,14vw,10rem)/.88 var(--display); letter-spacing:-.05em}
html[dir="rtl"] .hub-hero h1{letter-spacing:0}
.trace{display:block; width:min(30rem,100%); height:auto; margin:1.1rem 0 0; color:var(--amber); overflow:visible}
.trace path{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.8s .25s cubic-bezier(.55,.1,.3,1) forwards}
html[dir="rtl"] .trace{transform:scaleX(-1)}
@keyframes draw{to{stroke-dashoffset:0}}
.hub-hero p{margin:1.2rem 0 0; max-width:36rem; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.65; color:var(--mute)}

.tools{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(1.5rem,4vw,3.5rem)}
.tools li{border-top:1px solid var(--line)}
.tool{display:grid; grid-template-columns:3.25rem 1fr; gap:1.1rem; align-items:start; padding:1.5rem 0 1.6rem; text-decoration:none}
.tool .ico{width:3.25rem; height:3.25rem; color:var(--amber)}
.tool h2{margin:0; font:600 clamp(1.3rem,2.2vw,1.6rem)/1.15 var(--display); letter-spacing:-.015em; display:inline; background:linear-gradient(var(--amber),var(--amber)) 0 100%/0 2px no-repeat; transition:background-size .25s}
.tool:hover h2,.tool:focus-visible h2{background-size:100% 2px}
.tool p{margin:.45rem 0 0; color:var(--mute); font-size:.98rem; max-width:32rem}
.tool small{display:block; margin-top:.55rem; font-size:.82rem; color:var(--faint)}
html[dir="rtl"] .tool h2{letter-spacing:0}
@media (max-width:760px){.tools{grid-template-columns:1fr}}

/* ---------- Calculator pages ---------- */
.back{display:inline-flex; align-items:center; gap:.4rem; font-size:.9rem; color:var(--mute); text-decoration:none; margin-bottom:1.6rem}
.back:hover{color:var(--ink)}
.back svg{width:1rem; height:1rem}
.top{display:flex; gap:1.25rem; align-items:flex-start; margin-bottom:clamp(2rem,4vw,3rem)}
.top .ico{flex:none; width:clamp(3rem,6vw,4rem); height:clamp(3rem,6vw,4rem); color:var(--amber); margin-top:.2rem}
.top h1{margin:0; font:600 clamp(2rem,4.6vw,3.4rem)/1.04 var(--display); letter-spacing:-.025em; text-wrap:balance}
.lead{margin:.75rem 0 0; max-width:40rem; color:var(--mute); font-size:1.05rem}
.src{margin:.5rem 0 0; font-size:.86rem; color:var(--faint)}
.ico svg{width:100%; height:100%; display:block}
@media (max-width:600px){.top{flex-direction:column; gap:.9rem}}

.layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(19rem,25rem); gap:clamp(1.75rem,4vw,3.5rem); align-items:start}
@media (max-width:900px){.layout{grid-template-columns:1fr}}

form fieldset{border:0; margin:0 0 2.2rem; padding:0; min-width:0}
form legend{display:block; width:100%; padding:0 0 .55rem; margin:0 0 1rem; border-bottom:1px solid var(--line); font:600 1.15rem/1.2 var(--display); letter-spacing:-.01em}
.hint{font-size:.88rem; color:var(--mute); margin:-.35rem 0 1rem; max-width:44rem}

.fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:1rem 1.1rem}
.f label{display:block; font-size:.9rem; margin-bottom:.35rem}
.f label em{font-style:normal; color:var(--faint)}
.in{display:flex; align-items:stretch; border:1px solid var(--line2); border-radius:10px; background:var(--bg2); transition:border-color .15s}
.in:focus-within{border-color:var(--amber)}
.in input{all:unset; flex:1; min-width:0; padding:.68rem .8rem; font:500 1.05rem/1.3 var(--body); font-variant-numeric:tabular-nums; color:var(--ink)}
.in input::placeholder{color:var(--faint); font-weight:340}
.in .u{display:flex; align-items:center; padding:0 .75rem; font-size:.84rem; color:var(--mute); border-inline-start:1px solid var(--line); white-space:nowrap}
.f.warn .in{border-color:var(--mod)}
.f .msg{font-size:.8rem; color:var(--mod); margin:.3rem 0 0}

.q{margin:0 0 1.15rem}
.q > p{margin:0 0 .45rem; font-size:.92rem}
.seg{display:flex; flex-wrap:wrap; gap:.4rem}
.seg label{position:relative; cursor:pointer}
.seg input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.seg span{display:block; padding:.5rem .8rem; border:1px solid var(--line2); border-radius:8px; font-size:.86rem; line-height:1.3; color:var(--mute); transition:color .15s, border-color .15s, background-color .15s}
.seg label:hover span{color:var(--ink)}
.seg input:checked + span{color:var(--ink); border-color:var(--ink); background:rgba(233,241,241,.06)}
.seg input:checked + span.t-m{color:var(--ok); border-color:var(--ok); background:rgba(95,208,168,.09)}
.seg input:checked + span.t-i{color:var(--mild); border-color:var(--mild); background:rgba(242,193,78,.09)}
.seg input:checked + span.t-s{color:var(--bad); border-color:var(--bad); background:rgba(242,106,94,.09)}
.seg input:focus-visible + span{outline:2px solid var(--amber); outline-offset:2px}

.checks{display:grid; gap:.55rem}
.chk{display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; font-size:.92rem}
.chk input{appearance:none; -webkit-appearance:none; flex:none; width:1.15rem; height:1.15rem; margin:.15rem 0 0; border:1.5px solid var(--line2); border-radius:4px; background:var(--bg2); display:grid; place-content:center; cursor:pointer}
.chk input::after{content:""; width:.55rem; height:.32rem; border:2px solid var(--bg); border-top:0; border-right:0; transform:rotate(-45deg) translateY(-1px); opacity:0}
.chk input:checked{background:var(--amber); border-color:var(--amber)}
.chk input:checked::after{opacity:1}
.chk input:disabled{cursor:default; opacity:.75}
.chk small{display:block; color:var(--faint); font-size:.8rem}
.grp-t{margin:.9rem 0 .5rem; font-size:.84rem; color:var(--mute)}
.grp-t:first-child{margin-top:0}

/* Readout: the result panel */
.readout{
  --tone:var(--na);
  position:sticky; top:calc(env(safe-area-inset-top,0px) + 5.25rem);
  border:1px solid var(--line2); border-top:3px solid var(--tone); border-radius:14px;
  padding:1.35rem 1.4rem 1.2rem; background:var(--bg2);
}
.tone-ok{--tone:var(--ok)} .tone-mild{--tone:var(--mild)} .tone-mod{--tone:var(--mod)} .tone-bad{--tone:var(--bad)} .tone-na{--tone:var(--na)}
.ro-k{margin:0; font-size:.84rem; color:var(--mute)}
.ro-grade{margin:.25rem 0 0; font:600 clamp(1.45rem,2.6vw,1.9rem)/1.12 var(--display); letter-spacing:-.015em; color:var(--tone); text-wrap:balance}
.ro-main{margin:.8rem 0 0; font:600 2.6rem/1 var(--display); font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ro-main span{font:400 1rem var(--body); color:var(--mute); margin-inline-start:.35rem; letter-spacing:0}
.ro-note{margin:.75rem 0 0; color:var(--mute); font-size:.92rem}
.ro-rows{margin:1.1rem 0 0; padding:0}
.ro-rows div{display:flex; justify-content:space-between; gap:1rem; padding:.48rem 0; border-top:1px solid var(--line); font-size:.9rem}
.ro-rows dt{color:var(--mute)}
.ro-rows dd{margin:0; text-align:end; font-variant-numeric:tabular-nums; font-weight:500}
.ro-rows .f-hi dd{color:var(--bad)}
.ro-rows .f-mid dd{color:var(--mild)}
.ro-rows .f-ok dd{color:var(--ok)}
.ro-warn{margin:1rem 0 0; padding:.75rem .9rem; list-style:none; border-radius:10px; background:rgba(243,154,82,.1); font-size:.86rem; color:var(--ink)}
.ro-warn li+li{margin-top:.4rem}
.ro-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem}
.btn{all:unset; cursor:pointer; padding:.6rem 1.05rem; border-radius:999px; border:1.5px solid var(--line2); font:500 .9rem/1 var(--body); color:var(--ink)}
.btn:hover{border-color:var(--ink)}
.btn.primary{border-color:var(--amber); color:var(--amber)}
.btn:focus-visible{outline:2px solid var(--amber); outline-offset:3px}
.plot{display:block; width:100%; height:auto; margin-top:1rem}

/* Compact result bar on phones */
.mini{
  position:fixed; inset:auto 0 0 0; z-index:6;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.8rem 1.25rem calc(.8rem + env(safe-area-inset-bottom,0px));
  background:rgba(11,36,45,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-top:3px solid var(--tone,var(--na)); text-decoration:none; color:var(--ink);
  transform:translateY(110%); transition:transform .25s;
}
.mini b{font:600 1.05rem/1.2 var(--display); color:var(--tone,var(--na))}
.mini span{font-size:.85rem; color:var(--mute); white-space:nowrap}
.mini.on{transform:none}
@media (min-width:901px){.mini{display:none}}

.how{margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line); padding-top:1.1rem; max-width:48rem}
.how summary{cursor:pointer; font:600 1.15rem var(--display)}
.how h3{font:600 1rem var(--display); margin:1.4rem 0 .4rem}
.how p,.how li{color:var(--mute); font-size:.95rem}
.how ul{padding-inline-start:1.2rem}
.eq{display:block; margin:.4rem 0; padding:.6rem .85rem; border-inline-start:2px solid var(--amber); background:var(--bg2); font-variant-numeric:tabular-nums; color:var(--ink); font-size:.95rem}
.ref{width:100%; border-collapse:collapse; font-size:.88rem; margin-top:.5rem; font-variant-numeric:tabular-nums}
.ref th,.ref td{padding:.45rem .5rem; text-align:start; border-top:1px solid var(--line)}
.ref th{color:var(--mute); font-weight:400}
.tbl-wrap{overflow-x:auto}

.foot{margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.84rem; color:var(--faint); max-width:48rem}

@media (max-width:900px){ .readout{position:relative; top:auto} body.has-mini{padding-bottom:4.5rem} }
@media (prefers-reduced-motion:reduce){
  .trace path{animation:none; stroke-dashoffset:0}
  .mini{transition:none}
}