/* calc-kit.css — shared skin for every single-purpose calculator page.
   2026-09-13 rev 2 (Ernesto): GOLD Safari chrome (theme-color is gold on every
   calculator page — navy was the wrong call, the brand bar is gold), the Jarvis
   HUD treatment (depth, tilted rings, rays, holographic floor — not flat), and
   a bigger, bolder, instructional type scale. Text floor raised to 15px. */
:root{--navy:#0B1F3A;--navy2:#142850;--ink3:#071426;--gold:#D4A94E;--gold2:#F0CE86;
 --paper:#F3EFE6;--muted:#B8C4D6;--dim:#8FA2BC;--line:rgba(212,169,78,.32);
 --green:#3DD68C;--err:#E07A5F;--card:rgba(255,255,255,.05)}
*{box-sizing:border-box}
html{background:var(--gold)}
body{margin:0;color:var(--paper);line-height:1.6;min-height:100vh;position:relative;
 background:linear-gradient(180deg,var(--navy) 0%,var(--navy2) 62%,#0d2141 100%);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- THE JARVIS HUD: depth, rings, rays, holographic floor ---------- */
.ck-hud{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ck-hud i{position:absolute;display:block;border:1px solid rgba(212,169,78,.16);
 border-radius:50%;left:50%;top:120px;transform-origin:center}
.ck-hud i:nth-child(1){width:420px;height:420px;margin-left:-210px;
 transform:rotateX(72deg) rotate(8deg);border-color:rgba(212,169,78,.22)}
.ck-hud i:nth-child(2){width:640px;height:640px;margin-left:-320px;margin-top:-60px;
 transform:rotateX(74deg) rotate(-6deg)}
.ck-hud i:nth-child(3){width:900px;height:900px;margin-left:-450px;margin-top:-150px;
 transform:rotateX(76deg) rotate(14deg);border-color:rgba(212,169,78,.10)}
.ck-hud b{position:absolute;left:50%;top:0;width:2px;height:52vh;display:block;
 background:linear-gradient(180deg,rgba(212,169,78,.28),transparent);transform-origin:top center}
.ck-hud b:nth-of-type(1){transform:rotate(-24deg)}
.ck-hud b:nth-of-type(2){transform:rotate(19deg)}
.ck-hud b:nth-of-type(3){transform:rotate(-7deg);opacity:.5}
.ck-hud s{position:absolute;left:-25%;right:-25%;bottom:-20px;height:46vh;display:block;
 background:
   repeating-linear-gradient(to right,rgba(212,169,78,.12) 0 1px,transparent 1px 54px),
   repeating-linear-gradient(to bottom,rgba(212,169,78,.12) 0 1px,transparent 1px 54px);
 transform:perspective(560px) rotateX(74deg);
 -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 82%);
 mask-image:linear-gradient(to top,#000 0%,transparent 82%)}
.ck-glow{position:fixed;left:50%;top:-140px;width:640px;height:640px;margin-left:-320px;
 border-radius:50%;pointer-events:none;z-index:0;filter:blur(70px);opacity:.34;
 background:radial-gradient(circle,rgba(212,169,78,.55) 0%,transparent 66%)}

/* SAFE AREA, added 2026-09-14. Every calc-*.html sets viewport-fit=cover, so the
   page draws UNDER the iPhone status bar / notch. Without these insets the
   header - and the "All calculators" back button in it - sits beneath the
   status bar and iOS eats the tap. app.html already did this in 16 places;
   this kit never did. Ernesto reported the top-left back button as unclickable
   three times before the cause was measured. */
#calc{position:relative;z-index:1;max-width:640px;margin:0 auto;
 padding:calc(18px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px))
         calc(80px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px))}

/* ---------- header ---------- */
.ck-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.ck-back{color:#0B1F3A;background:var(--gold);text-decoration:none;font-size:16px;font-weight:800;
 border-radius:10px;padding:11px 15px;white-space:nowrap;box-shadow:0 4px 14px rgba(212,169,78,.3);
 display:inline-flex;align-items:center;min-height:44px}
.ck-brand{display:flex;align-items:center;gap:9px}
.ck-mark{width:36px;height:36px;border-radius:10px;background:var(--gold);color:var(--navy);
 display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:800;
 box-shadow:0 0 22px rgba(212,169,78,.45)}
.ck-bname{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:800}

.ck-title{font-size:34px;margin:0 0 8px;color:#fff;line-height:1.1;letter-spacing:-.6px;
 font-weight:800;text-shadow:0 2px 26px rgba(212,169,78,.22)}
.ck-tag{font-size:17px;color:var(--muted);margin:0 0 24px;font-weight:500}

/* ---------- instructional blocks ---------- */
.ck-sec{background:linear-gradient(180deg,rgba(8,23,41,.92),rgba(8,23,41,.72));
 border:1px solid var(--line);border-radius:14px;padding:18px 19px;margin-bottom:16px;
 backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.ck-sec-h{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
 font-weight:800;margin:0 0 12px;display:flex;align-items:center;gap:9px}
.ck-sec-h span{flex:none;width:26px;height:26px;border-radius:8px;background:var(--gold);
 color:#0B1F3A;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;
 letter-spacing:0}
.ck-sec p{font-size:17px;line-height:1.55;margin:0;color:var(--paper);font-weight:500}
.ck-step{display:flex;gap:13px;margin-bottom:15px;align-items:flex-start}
.ck-step:last-child{margin-bottom:0}
.ck-n{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(212,169,78,.16);
 border:1px solid var(--gold);color:var(--gold);font-size:14px;font-weight:800;
 display:flex;align-items:center;justify-content:center;margin-top:2px}
.ck-step-h{font-size:17px;font-weight:800;margin:0 0 3px;color:#fff;line-height:1.3}
.ck-step-p{font-size:16px;color:var(--muted);margin:0;line-height:1.5}

.ck-youdrive{background:rgba(212,169,78,.1);border:2px solid var(--gold);border-radius:13px;
 padding:16px 18px;margin-bottom:22px}
.ck-youdrive p{margin:0;font-size:17px;line-height:1.55;color:#fff;font-weight:600}
.ck-youdrive b{color:var(--gold)}

/* ---------- inputs ---------- */
.ck-form-h{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
 font-weight:800;margin:26px 0 14px}
.ck-field{margin-bottom:19px}
.ck-label{display:block;font-size:18px;font-weight:700;margin-bottom:4px;color:#fff}
.ck-hint{font-size:15px;color:var(--dim);margin:0 0 8px;line-height:1.45}
.ck-input{width:100%;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:11px;
 padding:15px 15px;color:#fff;font-size:20px;font-weight:700;font-family:inherit;
 font-variant-numeric:tabular-nums}
.ck-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,169,78,.18)}

/* ---------- results ---------- */
.ck-res{background:linear-gradient(180deg,rgba(8,23,41,.95),rgba(8,23,41,.8));
 border:1px solid var(--line);border-radius:14px;padding:18px 19px;margin:26px 0 0;
 box-shadow:0 10px 34px rgba(0,0,0,.32)}
.ck-res-h{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
 font-weight:800;margin:0 0 14px}
.ck-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
 padding:11px 0;border-bottom:1px solid rgba(147,168,200,.14)}
.ck-row:last-child{border-bottom:none}
.ck-rk{font-size:16px;color:var(--muted);font-weight:500}
.ck-rv{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ck-hero{border-bottom:none;background:rgba(212,169,78,.12);border:2px solid var(--gold);
 border-radius:12px;padding:15px 16px;margin:6px 0 10px;flex-direction:column;align-items:flex-start;
 gap:4px;box-shadow:0 0 30px rgba(212,169,78,.18)}
.ck-hero .ck-rk{color:var(--gold);font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.ck-hero .ck-rv{font-size:38px;color:var(--gold);line-height:1.05;text-shadow:0 2px 20px rgba(212,169,78,.35)}
.ck-rnote{font-size:15px;color:var(--dim);margin:3px 0 10px;line-height:1.45}
.ck-err{color:var(--err);font-size:16px;margin:0;font-weight:600}

.ck-flag{background:#2A1010;border:2px solid #7A2E2E;border-radius:13px;padding:15px 17px;margin:20px 0 0}
.ck-flag p{margin:0;font-size:16px;color:#F6DED6;line-height:1.55}
.ck-flag b{color:#FF9A7B}
.ck-foot{font-size:14px;color:var(--dim);line-height:1.65;margin:26px 0 0}

/* ── THE MATH BEHIND IT / WORKED EXAMPLES ── added 2026-09-13.
   Ernesto: "these are all math examples... give the mathematical equation.
   And give at least two examples so it's easy to understand." */
.ck-equation{background:rgba(212,169,78,.06);border:1px solid rgba(212,169,78,.28);
 border-radius:14px;padding:18px 16px;margin:22px 0}
.ck-formula{margin:0;padding:14px;background:rgba(0,0,0,.30);border-radius:10px;
 color:#F3EFE6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;
 line-height:1.7;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.ck-eqnote{font-size:15px;color:#A9B4C6;line-height:1.6;margin:10px 0 0}
.ck-example{border-top:1px solid rgba(212,169,78,.22);padding-top:14px;margin-top:14px}
.ck-exlabel{font-size:12px;letter-spacing:2px;font-weight:800;color:#D4A94E;margin:0 0 6px}
.ck-exgiven{font-size:16px;color:#F3EFE6;line-height:1.6;margin:0 0 8px}
.ck-exwork{margin:0 0 8px;padding:12px;background:rgba(0,0,0,.30);border-radius:10px;
 color:#A9B4C6;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
 line-height:1.8;white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.ck-exans{font-size:17px;font-weight:700;color:#3DD68C;line-height:1.55;margin:0}