/* css/rky-shell.css
 *
 * The shared look for every personal tool:
 *   1. One colour palette (--rky-*), the same as the homepage. Each tool
 *      points its own colour names at these, so changing a colour here
 *      changes it everywhere.
 *   2. The shared top bar (.rky-appbar): Home, tool name, the tool's own
 *      buttons, and the site-wide theme switch.
 *
 * Theme convention (works for the homepage and the tools alike):
 *   data-theme="light" / "dark"  -> that theme
 *   anything else (absent, "system") -> follow the device
 */

/* ================= Palette ================= */

:root{
    --rky-bg:#f5f6f9;
    --rky-surface:#ffffff;
    --rky-surface-2:#f1f3f7;
    --rky-surface-3:#e9ecf2;
    --rky-border:#e3e6ed;
    --rky-border-soft:#eef0f4;
    --rky-border-strong:#cdd3de;
    --rky-ink:#111827;
    --rky-ink-2:#5b6475;
    --rky-ink-3:#838b9a;
    --rky-accent:#3559d6;
    --rky-accent-ink:#2a47b0;
    --rky-accent-soft:#eef2fd;
    --rky-accent-soft-2:#dde5fb;
    --rky-pos:#0f8a55;
    --rky-pos-soft:#e8f5ee;
    --rky-neg:#c93636;
    --rky-neg-soft:#fcecec;
    --rky-neg-line:#f3d3d3;
    --rky-warn:#a86500;
    --rky-warn-soft:#fdf3e0;
    --rky-shadow-1:0 1px 2px rgba(17,24,39,.05);
    --rky-shadow-2:0 12px 28px -14px rgba(17,24,39,.22);
    --rky-shadow-3:0 18px 44px -12px rgba(17,24,39,.28);
    --rky-radius:12px;
    --rky-radius-sm:9px;
    --rky-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --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-glow-a:rgba(99,132,255,.16);
    --rky-glow-b:rgba(233,166,42,.10);
    --rky-glow-c:rgba(31,191,117,.08);
    color-scheme:light;
}

@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
        --rky-bg:#0a0d14;
        --rky-surface:#11151f;
        --rky-surface-2:#161b27;
        --rky-surface-3:#1c2230;
        --rky-border:rgba(255,255,255,.07);
        --rky-border-soft:rgba(255,255,255,.05);
        --rky-border-strong:rgba(255,255,255,.14);
        --rky-ink:#e9edf5;
        --rky-ink-2:#8b95a8;
        --rky-ink-3:#6f7a8e;
        --rky-accent:#4a6cf0;
        --rky-accent-ink:#9db2ff;
        --rky-accent-soft:rgba(138,164,255,.13);
        --rky-accent-soft-2:rgba(138,164,255,.22);
        --rky-pos:#3ecf8e;
        --rky-pos-soft:rgba(62,207,142,.13);
        --rky-neg:#ff7a7a;
        --rky-neg-soft:rgba(255,122,122,.13);
        --rky-neg-line:rgba(255,122,122,.3);
        --rky-warn:#f2b44b;
        --rky-warn-soft:rgba(242,180,75,.13);
        --rky-shadow-1:0 1px 2px rgba(0,0,0,.3);
        --rky-shadow-2:0 12px 32px -12px rgba(0,0,0,.6);
        --rky-shadow-3:0 18px 44px -12px rgba(0,0,0,.6);
        --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);
        --rky-glow-a:rgba(74,108,240,.30);
        --rky-glow-b:rgba(224,184,118,.13);
        --rky-glow-c:rgba(62,207,142,.09);
        color-scheme:dark;
    }
}

:root[data-theme="dark"]{
    --rky-bg:#0a0d14;
    --rky-surface:#11151f;
    --rky-surface-2:#161b27;
    --rky-surface-3:#1c2230;
    --rky-border:rgba(255,255,255,.07);
    --rky-border-soft:rgba(255,255,255,.05);
    --rky-border-strong:rgba(255,255,255,.14);
    --rky-ink:#e9edf5;
    --rky-ink-2:#8b95a8;
    --rky-ink-3:#6f7a8e;
    --rky-accent:#4a6cf0;
    --rky-accent-ink:#9db2ff;
    --rky-accent-soft:rgba(138,164,255,.13);
    --rky-accent-soft-2:rgba(138,164,255,.22);
    --rky-pos:#3ecf8e;
    --rky-pos-soft:rgba(62,207,142,.13);
    --rky-neg:#ff7a7a;
    --rky-neg-soft:rgba(255,122,122,.13);
    --rky-neg-line:rgba(255,122,122,.3);
    --rky-warn:#f2b44b;
    --rky-warn-soft:rgba(242,180,75,.13);
    --rky-shadow-1:0 1px 2px rgba(0,0,0,.3);
    --rky-shadow-2:0 12px 32px -12px rgba(0,0,0,.6);
    --rky-shadow-3:0 18px 44px -12px rgba(0,0,0,.6);
    --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);
    --rky-glow-a:rgba(74,108,240,.30);
    --rky-glow-b:rgba(224,184,118,.13);
    --rky-glow-c:rgba(62,207,142,.09);
    color-scheme:dark;
}

/* ================= Top bar ================= */

/* Anything hidden inside the bar (e.g. a tool's original theme buttons)
   stays hidden even if the tool's own CSS gives it a display value. */
.rky-appbar [hidden]{display:none !important}

.rky-appbar{
    position:sticky;
    top:0;
    z-index:60;
    display:block;               /* a tool's own `header{...}` rules must not leak in */
    margin:0;
    padding:env(safe-area-inset-top,0px) 0 0;
    /* Solid, and deliberately NO backdrop-filter / transform / filter:
       those would make the bar a containing block for position:fixed
       children, and some tools keep their tab bar inside the header and
       pin it to the bottom of the screen on phones. */
    background:var(--rky-bg);
    border-bottom:1px solid var(--rky-border);
    box-shadow:none;
    font-family:var(--rky-font);
    color:var(--rky-ink);
}

.rky-appbar-inner{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:56px;
    padding:8px max(var(--rky-gutter,20px), env(safe-area-inset-right,0px)) 8px max(var(--rky-gutter,20px), env(safe-area-inset-left,0px));
    max-width:var(--rky-max,1240px);   /* a tool sets these to line up with its content */
    margin:0 auto;
}

/* Home: chevron + ₹ mark */
.rky-home{
    display:inline-flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
    padding:3px 4px 3px 0;
    border-radius:9px;
    color:var(--rky-ink-2);
    text-decoration:none;
    transition:color .15s ease;
}

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

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

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

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

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

.rky-crumb-sep{
    color:var(--rky-border-strong);
    font-size:16px;
}

.rky-tool{
    --c:#8aa4ff;
    display:inline-flex;
    align-items:center;
    gap:9px;
    min-width:0;
}

.rky-tool-icon{
    width:30px;
    height:30px;
    flex-shrink:0;
    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))}

.rky-tool-name{
    margin:0;
    font:650 15px/1.2 var(--rky-font);
    letter-spacing:-.01em;
    color:var(--rky-ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Right side: the tool's own buttons, then theme / ⋯ */
.rky-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    margin-left:auto;
}

.rky-iconbtn{
    appearance:none;
    width:34px;
    height:34px;
    border-radius:9px;
    border:1px solid var(--rky-border);
    background:transparent;
    color:var(--rky-ink-2);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:color .15s ease, border-color .15s ease, background .15s ease;
}

.rky-iconbtn:hover,
.rky-iconbtn[aria-expanded="true"]{
    color:var(--rky-ink);
    border-color:var(--rky-border-strong);
}

.rky-iconbtn svg{width:17px;height:17px}

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

.rky-theme button{
    appearance:none;
    width:28px;
    height:26px;
    border:none;
    border-radius:7px;
    background:transparent;
    color:var(--rky-ink-3);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
}

.rky-theme button:hover{color:var(--rky-ink)}
.rky-theme button svg{width:15px;height:15px}

.rky-theme button.on{
    background:var(--rky-surface);
    color:var(--rky-ink);
    box-shadow:0 0 0 1px var(--rky-border-strong);
}

/* ⋯ menu — only shown when something has been moved into it */
.rky-more{display:none}
.rky-more.has-items{display:block}

.rky-more-menu{
    position:absolute;
    right:16px;
    top:calc(100% - 2px);
    z-index:70;
    min-width:220px;
    max-width:calc(100vw - 32px);
    padding:8px;
    background:var(--rky-surface);
    border:1px solid var(--rky-border-strong);
    border-radius:14px;
    box-shadow:var(--rky-shadow-3);
    display:flex;
    flex-direction:column;
    gap:6px;
}

.rky-more-menu[hidden]{display:none}

.rky-more-label{
    font:600 11.5px/1 var(--rky-font);
    color:var(--rky-ink-3);
    padding:6px 6px 2px;
}

.rky-more-menu .rky-theme{align-self:flex-start;margin:0 4px 4px}

/* Shared primary button, for tools that want it */
.rky-btn{
    appearance:none;
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:34px;
    padding:0 13px;
    border:none;
    border-radius:9px;
    background:var(--rky-accent);
    color:#fff;
    font:600 13px/1 var(--rky-font);
    cursor:pointer;
    white-space:nowrap;
    transition:filter .15s ease;
}

.rky-btn:hover{filter:brightness(1.08)}

.rky-appbar :focus-visible{
    outline:2px solid var(--rky-accent);
    outline-offset:2px;
}

/* Save / sync status. It sits in the bar next to the buttons on wide
   screens, and becomes a small line under the tool name on phones. */
.rky-appbar-inner > .rky-home{order:0}
.rky-appbar-inner > .rky-crumb{order:1}
.rky-appbar-inner > .rky-status{order:2;flex-shrink:0;display:flex;align-items:center}
.rky-appbar-inner > .rky-actions{order:3;margin-left:0}

/* Import / Export as icon + label buttons (Slice, Asset Position) */
.rky-appbar .io{display:flex;gap:6px;align-items:center}
.rky-appbar .io .io-btn{display:inline-flex;align-items:center;gap:6px}
.rky-appbar .io .io-btn svg{width:14px;height:14px;flex:0 0 auto}

/* ================= Depth =================
   .rky-glass: the shared glass surface. Each tool applies it to its own
   main summary cards with one rule, e.g.  .cards > .card{ ...see below }  */

.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 each page (added by js/rky-shell.js) */
.rky-page-glow{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:620px;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.rky-page-glow::before{
    content:"";
    position:absolute;
    inset:-40% -15% 0;
    filter:blur(70px);
    background:
        radial-gradient(38% 46% at 75% 22%, var(--rky-glow-a), transparent 70%),
        radial-gradient(32% 40% at 15% 12%, var(--rky-glow-b), transparent 70%),
        radial-gradient(30% 38% at 50% 60%, var(--rky-glow-c), transparent 70%);
    animation:rky-glowdrift 22s ease-in-out infinite alternate;
}

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

/* ================= Page transitions =================
   Opening a tool from the homepage morphs the tapped icon and name into
   this bar (same view-transition-names on both pages); going back reverses
   it. Browsers without support open the page as before. */

@view-transition{navigation:auto}

.rky-home-mark{view-transition-name:rky-mark}

::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}

/* one-time entrance (js/rky-shell.js adds .rky-enter to the first cards) */
@keyframes rky-enter{
    from{opacity:0;transform:translateY(12px)}
}

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

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

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

@media (max-width:900px){
    .rky-crumb-root,
    .rky-crumb-sep{display:none}
}

@media (max-width:560px){
    .rky-appbar-inner{
        gap:8px;
        padding:8px 12px;
        min-height:52px;
    }
    .rky-home-mark{display:none}
    .rky-home{padding-right:0}
    .rky-tool-name{font-size:15.5px}
    .rky-actions{gap:6px}

    .rky-appbar-inner{flex-wrap:wrap;row-gap:0}
    .rky-appbar-inner > .rky-status{
        order:10;
        flex:0 0 calc(100% - var(--rky-status-indent,65px));   /* always its own line */
        margin:-8px 0 0 var(--rky-status-indent,65px);
        white-space:nowrap;
        overflow:hidden;
    }
    /* the tool's own status pill, shown as plain small text */
    .rky-appbar-inner > .rky-status > *{
        display:inline-flex;
        max-width:100%;
        padding:0 !important;
        height:auto !important;
        min-height:0 !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        font-size:11.5px !important;
        font-weight:600;
        line-height:1.3 !important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .rky-appbar .io .io-btn{width:34px;height:34px;padding:0 !important;justify-content:center;border-radius:9px}
    .rky-appbar .io .io-btn .lbl{display:none}
    .rky-appbar .io .io-btn svg{width:16px;height:16px}
}

@media print{
    .rky-appbar{position:static;backdrop-filter:none}
    .rky-actions{display:none}
}

/* ================= Tool colour =================
   Tools that opt in get the homepage's moving colour light, tinted with
   their own colour (js/rky-shell.js copies it from the tool's icon into
   --rky-tint), plus a thin line of that colour under the bar. Softer than
   the homepage so tables and charts stay easy to read. */

:root{--rky-tint-1:26%;--rky-tint-2:13%}

@media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){--rky-tint-1:38%;--rky-tint-2:19%}
}

:root[data-theme="dark"]{--rky-tint-1:38%;--rky-tint-2:19%}

:root[data-rky-tinted] .rky-page-glow{height:100vh;height:100lvh}

:root[data-rky-tinted] .rky-page-glow::before{
    inset:-20% -15%;
    background:
        radial-gradient(36% 42% at 76% 18%, color-mix(in srgb, var(--rky-tint) var(--rky-tint-1), transparent), transparent 70%),
        radial-gradient(30% 36% at 14% 14%, color-mix(in srgb, #6384ff var(--rky-tint-2), transparent), transparent 70%),
        radial-gradient(32% 38% at 52% 64%, color-mix(in srgb, var(--rky-tint) var(--rky-tint-2), transparent), transparent 70%),
        radial-gradient(28% 34% at 90% 82%, color-mix(in srgb, #8b5cf6 var(--rky-tint-2), transparent), transparent 70%),
        radial-gradient(28% 34% at 8% 88%, color-mix(in srgb, var(--rky-tint) var(--rky-tint-1), transparent), transparent 70%);
    animation:rky-tintdrift 16s ease-in-out infinite alternate;
}

:root[data-rky-tinted] .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-2), transparent) 14%, transparent 30%,
        color-mix(in srgb, #ec4899 var(--rky-tint-2), transparent) 46%, transparent 60%,
        color-mix(in srgb, var(--rky-tint) var(--rky-tint-2), transparent) 74%, transparent 88%);
    animation:rky-aurora 30s linear infinite;
}

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

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

:root[data-rky-tinted] .rky-appbar{
    border-bottom-color:color-mix(in srgb, var(--rky-tint) 55%, var(--rky-border));
    box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--rky-tint) 45%, transparent), 0 14px 30px -22px color-mix(in srgb, var(--rky-tint) 70%, transparent);
}

@media (prefers-reduced-motion:reduce){
    :root[data-rky-tinted] .rky-page-glow::before,
    :root[data-rky-tinted] .rky-page-glow::after{animation:none}
}

@media print{
    .rky-page-glow{display:none!important}
}