/* Afrroze Tools — age & BMI calculator skin (soft, layered, light) */

[hidden]{display:none!important}

body[data-tool="age"]{
  --accent:#6366f1;--accent-deep:#4a44d0;--accent-darker:#3730a3;
  --tint:#eef0ff;--tint-2:#dcdffc;
  --hero-glow:rgba(99,102,241,.22);--hero-glow-2:rgba(246,93,157,.14);
}
body[data-tool="bmi"]{
  --accent:#12b886;--accent-deep:#06875f;--accent-darker:#046b4b;
  --tint:#e8fbf4;--tint-2:#c9f4e4;
  --hero-glow:rgba(18,184,134,.22);--hero-glow-2:rgba(47,139,251,.14);
}

/* hero artwork */
.calc-art{position:relative;justify-self:end;width:min(330px,100%);aspect-ratio:1;display:grid;place-items:center}
.calc-art::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.95),transparent 62%),linear-gradient(150deg,var(--tint),#fff 55%,var(--tint-2));box-shadow:0 34px 70px -34px rgba(76,58,160,.5),inset 0 1px 0 #fff;border:1px solid rgba(255,255,255,.8)}
.calc-art::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(99,102,241,.22);transform:rotate(-12deg)}
.calc-art .art-ring{position:relative;width:66%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from -90deg,var(--accent) 0 calc(var(--p,72)*1%),var(--tint-2) 0);
  display:grid;place-items:center;box-shadow:0 20px 40px -24px rgba(67,38,189,.55);transition:background .45s ease}
.calc-art .art-ring::before{content:"";position:absolute;inset:11px;border-radius:50%;background:linear-gradient(160deg,#fff,#fbfaff)}
.calc-art .art-in{position:relative;text-align:center;z-index:1}
.calc-art .art-in b{display:block;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem);letter-spacing:-.03em;line-height:1;background:linear-gradient(120deg,var(--accent-deep),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.calc-art .art-in small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#74748f;font-weight:700;margin-top:.45rem}
.calc-art .art-chip{position:absolute;right:2%;bottom:16%;background:#fff;border:1px solid var(--tint-2);border-radius:999px;padding:.32rem .7rem;font-size:.7rem;font-weight:700;color:var(--accent-deep);box-shadow:0 14px 26px -18px rgba(76,58,160,.6)}
.calc-art .art-chip.g{left:2%;right:auto;top:14%;bottom:auto;background:linear-gradient(150deg,#fff,#eefaf6);border-color:#cff2e9;color:#067a6e}
@media (max-width:900px){.calc-art{justify-self:start}}

/* form extras */
.seg{display:inline-flex;gap:.25rem;padding:.28rem;background:var(--tint);border:1px solid var(--tint-2);border-radius:999px;margin-bottom:1rem}
.seg button{border:0;background:transparent;color:var(--muted);font:inherit;font-weight:600;font-size:.85rem;padding:.42rem .95rem;border-radius:999px;cursor:pointer;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.seg button[aria-pressed="true"]{background:#fff;color:var(--accent-deep);box-shadow:0 6px 14px -10px rgba(67,38,189,.6)}
.seg button:hover{color:var(--accent-deep)}
.field-row-inline{display:flex;align-items:end;gap:.6rem;flex-wrap:wrap}
.field-row-inline .field{flex:1 1 160px;margin-bottom:0}
.input-wrap{position:relative;display:block}
.input-wrap input{padding-right:3.2rem;font-variant-numeric:tabular-nums}
.input-wrap .suffix{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);font-size:.8rem;font-weight:700;color:var(--muted);pointer-events:none}
.imperial-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media (max-width:560px){.imperial-grid{grid-template-columns:1fr 1fr}}
.subform{margin-top:.2rem}

/* result card */
.face{background:
    radial-gradient(420px 220px at 92% -20%,rgba(255,255,255,.55),transparent 64%),
    linear-gradient(160deg,#fff,var(--tint) 92%);
  border:1px solid var(--tint-2);border-radius:18px;padding:1.15rem 1.2rem;
  box-shadow:0 20px 44px -34px rgba(76,58,160,.55);margin-top:.2rem}
.face .flabel{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--accent-deep)}
.face .fbig{font-size:clamp(1.75rem,1.3rem + 1.6vw,2.35rem);font-weight:800;letter-spacing:-.035em;line-height:1.12;margin:.3rem 0 .1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.face .fbig em{font-style:normal;color:var(--accent-deep)}
.face .fsub{color:var(--muted);font-size:.88rem}

/* stat boxes */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.9rem}
.stat-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:.65rem .8rem}
.stat-box span{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat-box b{display:block;font-size:1.03rem;letter-spacing:-.02em;margin-top:.12rem;font-variant-numeric:tabular-nums}
.stat-box.hi{background:linear-gradient(160deg,#fff,var(--tint));border-color:var(--tint-2)}

/* progress ring */
.ring-wrap{display:flex;align-items:center;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.ring{--p:0;width:118px;flex:none;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--tint-2) 0);display:grid;place-items:center;position:relative;transition:background .4s ease}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:linear-gradient(160deg,#fff,#fcfbff)}
.ring i{position:relative;font-style:normal;text-align:center;z-index:1}
.ring i b{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.03em;color:var(--accent-deep)}
.ring i small{display:block;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ring-meta{flex:1 1 150px;min-width:0}
.ring-meta p{margin:0 0 .3rem;font-size:.86rem;color:var(--muted)}
.ring-meta b{color:var(--ink)}

/* BMI gauge */
.gauge{position:relative;margin:2.1rem 0 0}
.gauge-track{position:relative;height:14px;border-radius:999px;overflow:hidden;display:flex;box-shadow:inset 0 1px 2px rgba(28,27,58,.12)}
.gauge-track span{height:100%;transition:width .35s ease}
.gauge-track .g-under{width:21.7%;background:linear-gradient(90deg,#8ed0f8,#67b7ee)}
.gauge-track .g-ok{width:21.7%;background:linear-gradient(90deg,#74dcc0,#2fc4a0)}
.gauge-track .g-over{width:16.6%;background:linear-gradient(90deg,#ffd166,#f4a51c)}
.gauge-track .g-obese{width:40%;background:linear-gradient(90deg,#ff9a7a,#ef5a6f)}
.gauge-pin{position:absolute;left:37%;top:-6px;transform:translateX(-50%);transition:left .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease;z-index:2}
.gauge-pin::before{content:"";display:block;width:4px;height:26px;border-radius:3px;background:var(--ink);box-shadow:0 0 0 2.5px #fff,0 6px 12px -4px rgba(28,27,58,.5);margin-inline:auto}
.gauge-pin b{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-4px);background:var(--ink);color:#fff;font-size:.7rem;font-weight:700;border-radius:8px;padding:.12rem .45rem;white-space:nowrap}
.gauge-legend{display:flex;justify-content:space-between;gap:.4rem;flex-wrap:wrap;margin-top:1.05rem;font-size:.66rem;color:var(--muted);letter-spacing:.04em;font-weight:600}
.gauge-legend span{display:flex;align-items:center;gap:.3rem}
.gauge-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;font-style:normal}
.gauge-legend .c-under{background:#67b7ee}
.gauge-legend .c-ok{background:#2fc4a0}
.gauge-legend .c-over{background:#f4a51c}
.gauge-legend .c-obese{background:#ef5a6f}

/* category chip */
.cat{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.3rem .8rem;border:1px solid transparent}
.cat.under{background:#eaf6ff;color:#146c9c;border-color:#c9e8fb}
.cat.ok{background:#e7faf3;color:#067a5c;border-color:#c4f2e2}
.cat.over{background:#fff7e3;color:#9a5a00;border-color:#ffe6ad}
.cat.obese{background:#fff0f0;color:#b3261e;border-color:#ffd4d4}
.cat.obese-2{background:#ffecec;color:#9d1a1a;border-color:#ffc9c9}

/* copy row */
.copy-row{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.copy-row .btn{flex:1 1 140px}
.copied{color:var(--accent-deep)!important}

/* accordion-free small table */
.mini-table{width:100%;border-collapse:collapse;font-size:.9rem}
.mini-table th,.mini-table td{padding:.5rem .3rem;border-bottom:1px solid var(--line);text-align:left}
.mini-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.mini-table td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

@media (max-width:560px){
  .photo-only{display:none}
  .stat-grid{grid-template-columns:1fr 1fr}
  .face{padding:1rem}
  .ring{width:104px}
}