/* css/rky-calc.css
 *
 * Shared by every calculator so they read as one product with the
 * homepage: the colour palette (light + dark), the top bar, the theme
 * switch, the soft page glow. Link it BEFORE the calculator's own
 * stylesheet; the calculator maps its colour names onto --rky-* values.
 *
 * Dark only applies on screen (never when printing / saving as PDF), and
 * only when js/rky-calc.js has set data-scheme="dark" — without
 * JavaScript the page is simply light.
 */

:root{
    --rky-bg:#f5f6f9;
    --rky-surface:#ffffff;
    --rky-surface-2:#f8f9fb;       /* sunken panels, table heads */
    --rky-surface-3:#eef0f4;       /* chips, icon buttons */
    --rky-hover:#f4f6fa;
    --rky-border:#e3e6ed;
    --rky-border-soft:#eef0f4;
    --rky-border-strong:#cdd3de;
    --rky-field-border:#d6dbe4;
    --rky-ink:#111827;
    --rky-ink-2:#4b5566;
    --rky-muted:#5b6475;
    --rky-faint:#8a92a1;
    --rky-accent:#3559d6;
    --rky-accent-soft:rgba(53,89,214,.10);
    --rky-shadow:0 1px 2px rgba(17,24,39,.04),0 8px 24px -12px rgba(17,24,39,.12);
    --rky-glow-a:rgba(99,132,255,.20);
    --rky-glow-b:rgba(233,166,42,.12);
    --rky-glow-c:rgba(31,191,117,.08);
    --rky-tint:#3559d6;
    --rky-tint-mix:30%;
    --rky-tint-mix-2:16%;
    --rky-glass-bg:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78));
    --rky-glass-border:rgba(17,24,39,.08);
    --rky-glass-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(17,24,39,.05),0 14px 30px -20px rgba(17,24,39,.3);
    --rky-max:1060px;
    --rky-gutter:20px;
}

@media screen{
    :root[data-scheme="dark"]{
        color-scheme:dark;
        --rky-bg:#0a0d14;
        --rky-surface:#11151f;
        --rky-surface-2:#0e121b;
        --rky-surface-3:#1a2030;
        --rky-hover:#161b28;
        --rky-border:#1e2432;
        --rky-border-soft:#191e2b;
        --rky-border-strong:#2c3446;
        --rky-field-border:#2a3142;
        --rky-ink:#e9edf5;
        --rky-ink-2:#b4bccb;
        --rky-muted:#8b95a8;
        --rky-faint:#5e687b;
        --rky-accent:#8aa4ff;
        --rky-accent-soft:rgba(138,164,255,.14);
        --rky-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -22px rgba(0,0,0,.8);
        --rky-glow-a:rgba(74,108,240,.36);
        --rky-glow-b:rgba(224,184,118,.16);
        --rky-glow-c:rgba(62,207,142,.10);
        --rky-tint-mix:42%;
        --rky-tint-mix-2:24%;
        --rky-glass-bg:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%),rgba(17,21,31,.66);
        --rky-glass-border:rgba(255,255,255,.1);
        --rky-glass-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4),0 16px 34px -18px rgba(0,0,0,.8);
    }
}

body{
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-feature-settings:"cv11","ss01";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ================= Top bar =================
   The same bar as the personal tools, on one line:
   ‹ ₹   RKY Finance  /  (icon) Calculator name   ·   own buttons   ·   theme */

.rky-appbar{
    position:relative;
    z-index:30;
    display:block;
    margin:0;
    padding:env(safe-area-inset-top,0px) 0 0;
    background:var(--rky-bg);
    border-bottom:1px solid var(--rky-border);
    color:var(--rky-ink);
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

.rky-appbar [hidden]{display:none!important}

.rky-appbar-inner{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:56px;
    max-width:var(--rky-max);
    margin:0 auto;
    padding:8px calc(var(--rky-gutter) + env(safe-area-inset-right,0px)) 8px calc(var(--rky-gutter) + env(safe-area-inset-left,0px));
}

.rky-id{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    flex:1 1 auto;
}

/* ‹ ₹ — back to the homepage */
.rky-back{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex:none;
    padding:3px 4px 3px 0;
    border-radius:9px;
    text-decoration:none;
    color:var(--rky-ink-2);
    transition:color .15s ease;
}

.rky-back:hover{color:var(--rky-ink)}
.rky-back > svg{width:18px;height:18px}

.rky-mark{
    width:30px;
    height:30px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#2f63e0,#123b72);
    color:#fff;
    font-weight:700;
    font-size:16px;
    line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
    view-transition-name:rky-mark;
}

/* RKY Finance / (icon) Name */
.rky-crumb{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    flex:1;
}

.rky-crumb-site{
    font-size:14px;
    font-weight:500;
    color:var(--rky-ink-2);
    text-decoration:none;
    white-space:nowrap;
}

.rky-crumb-site::after{
    content:"/";
    margin-left:10px;
    font-size:16px;
    color:var(--rky-border-strong);
}

.rky-crumb-site:hover{color:var(--rky-ink)}

.rky-title{
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-width:0;
}

.rky-title h1,
.rky-title .rky-name{
    margin:0;
    font-family:inherit;
    font-size:15px;
    font-weight:650;
    letter-spacing:-.01em;
    line-height:1.2;
    color:var(--rky-ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.rky-title h1 em,.rky-title .rky-name em{font-style:normal}

/* glossy app-style icon, same as the homepage cards */
.rky-tool-icon{
    --c:#8aa4ff;
    width:30px;
    height:30px;
    flex:none;
    border-radius:9px;
    display:grid;
    place-items:center;
    color:#fff;
    background:
        radial-gradient(120% 90% at 30% 12%, color-mix(in srgb, var(--c) 35%, #fff) 0%, transparent 55%),
        linear-gradient(160deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 62%, #000));
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.45),
        inset 0 -4px 7px color-mix(in srgb, var(--c) 55%, #000),
        0 6px 12px -6px color-mix(in srgb, var(--c) 75%, transparent);
}

.rky-tool-icon svg{width:16px;height:16px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}

/* the calculator's own controls (save state, Guide, …) */
.rky-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex:none;
    margin-left:auto;
}

/* ---------------- Theme switch ---------------- */

.rky-themesw{
    display:inline-flex;
    gap:2px;
    flex:none;
    border:1px solid var(--rky-border);
    padding:3px;
    border-radius:10px;
}

.rky-themebtn{
    appearance:none;
    -webkit-appearance:none;
    border:none;
    background:transparent;
    color:var(--rky-faint);
    width:28px;
    height:26px;
    min-height:0;
    padding:0;
    border-radius:7px;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:background .15s ease, color .15s ease;
}

.rky-themebtn svg{width:15px;height:15px}
.rky-themebtn:hover{color:var(--rky-ink)}
.rky-themebtn:active{transform:none}

/* current choice — by attribute too, so switches drawn later by a
   calculator's own script (React) are marked without any extra code */
.rky-themebtn.on,
:root[data-theme="light"] .rky-themebtn[data-theme-set="light"],
:root[data-theme="system"] .rky-themebtn[data-theme-set="system"],
:root[data-theme="dark"] .rky-themebtn[data-theme-set="dark"]{
    background:var(--rky-surface);
    color:var(--rky-ink);
    box-shadow:0 0 0 1px var(--rky-border-strong);
}

/* ================= Depth =================
   .rky-glass: the shared glass surface, the same as the personal tools.
   js/rky-calc.js adds it to each calculator's summary panels (the
   data-glass selector on its <script> tag). */

.rky-glass{
    background:var(--rky-glass-bg) !important;
    border-color:var(--rky-glass-border) !important;
    box-shadow:var(--rky-glass-shadow) !important;
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    backdrop-filter:blur(16px) saturate(150%);
}

/* soft colour glow behind the top of the page */
.rky-page-glow{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:100vh;
    height:100lvh;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

/* Moving colour behind the whole page, tinted with this calculator's own
   colour (--rky-tint, taken from its icon by js/rky-calc.js) plus the
   site's blue and a soft complementary hue. */
.rky-page-glow::before{
    content:"";
    position:absolute;
    inset:-20% -15%;
    filter:blur(70px);
    background:
        radial-gradient(36% 42% at 76% 18%, color-mix(in srgb, var(--rky-tint) var(--rky-tint-mix), transparent), transparent 70%),
        radial-gradient(30% 36% at 14% 14%, color-mix(in srgb, #6384ff var(--rky-tint-mix-2), transparent), transparent 70%),
        radial-gradient(32% 38% at 52% 64%, color-mix(in srgb, var(--rky-tint) var(--rky-tint-mix-2), transparent), transparent 70%),
        radial-gradient(28% 34% at 90% 82%, color-mix(in srgb, #8b5cf6 var(--rky-tint-mix-2), transparent), transparent 70%),
        radial-gradient(28% 34% at 8% 88%, color-mix(in srgb, var(--rky-tint) var(--rky-tint-mix), transparent), transparent 70%);
    animation:rky-glowdrift 16s ease-in-out infinite alternate;
}

.rky-page-glow::after{
    content:"";
    position:absolute;
    inset:-25% -20%;
    filter:blur(80px);
    background:conic-gradient(from 0deg at 55% 45%,
        transparent, color-mix(in srgb, var(--rky-tint) var(--rky-tint-mix), transparent) 12%, transparent 28%,
        color-mix(in srgb, #ec4899 var(--rky-tint-mix-2), transparent) 44%, transparent 58%,
        color-mix(in srgb, var(--rky-tint) var(--rky-tint-mix-2), transparent) 72%, transparent 86%);
    animation:rky-aurora 30s linear infinite;
}

@keyframes rky-aurora{to{transform:rotate(360deg)}}

@keyframes rky-glowdrift{
    50%{transform:translate(4%,3%) rotate(-5deg) scale(1.08)}
    to{transform:translate(-4%,-3%) rotate(6deg) scale(1.04)}
}

/* one-time entrance per visit (js/rky-calc.js adds .rky-enter) */
@keyframes rky-enter{
    from{opacity:0;transform:translateY(12px)}
}

.rky-enter{animation:rky-enter .5s cubic-bezier(.2,.8,.2,1) both}

/* ================= Page transitions ================= */

@view-transition{navigation:auto}

::view-transition-group(*){
    animation-duration:.36s;
    animation-timing-function:cubic-bezier(.2,.8,.2,1);
}

::view-transition-old(root),
::view-transition-new(root){animation-duration:.26s}

/* ================= Responsive ================= */

/* the calculator's name matters more than the site name */
@media (max-width:1080px){
    .rky-crumb-site{display:none}
}

/* Tablets and small laptops: if the calculator has several buttons they
   move to their own row instead of squeezing the name (calculators mark
   their bar .rky-appbar--busy when they have more than one or two). */
@media (max-width:980px){
    .rky-appbar--busy .rky-appbar-inner{flex-wrap:wrap;row-gap:8px}
    .rky-appbar--busy .rky-id{order:0;flex:1 1 0}
    .rky-appbar--busy .rky-themesw{order:1}
    .rky-appbar--busy .rky-actions{order:2;width:100%;margin-left:0;justify-content:flex-end}
}

/* never let the name area collapse under the buttons */
.rky-id{min-width:140px}

/* Phones — row 1: ‹ (icon) Name · theme; row 2: the calculator's own controls */
@media (max-width:559px){

    .rky-appbar--busy .rky-actions{justify-content:flex-start}

    .rky-appbar-inner{
        --rky-gutter:12px;
        flex-wrap:wrap;
        gap:8px;
        min-height:52px;
    }

    .rky-id{flex:1 1 0;order:0;gap:8px}
    .rky-themesw{order:1}
    .rky-actions{order:2;width:100%;margin-left:0;flex-wrap:wrap}

    .rky-mark{display:none}
    .rky-back{padding-right:0}
    .rky-title h1,.rky-title .rky-name{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
    @view-transition{navigation:none}
    .rky-page-glow::before,.rky-page-glow::after{animation:none}
    .rky-enter{animation:none}
}

@media print{
    .rky-themesw,.rky-page-glow,.rky-back > svg{display:none!important}
    .rky-appbar{background:#fff;border-bottom:2px solid #111}
    .rky-glass{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important}
}