/* ===========================================================================
   The site's frame: sidebar, header, tree, help card and a visitor's links.

   html.has-mdock (shared/base.html) marks a page with the phone tab bar
   (mobile_dock.css); html.has-aside adds the sidebar from 1024px up, for signed-in
   users, and html.is-visitor gets links across the top. Pages without the bar
   (full-screen tools, checkout) keep the classic header and burger.
   =========================================================================== */

/* Each service speaks in its own colour, wherever it appears. */
.is-agents  { --primary-rgb: 34 211 238;  --primary-ink-rgb: 34 211 238; }
.is-imagine { --primary-rgb: 214 120 255; --primary-ink-rgb: 214 120 255; }
.is-storage { --primary-rgb: 250 204 21;  --primary-ink-rgb: 250 204 21; }
.is-edits   { --primary-rgb: 255 138 76;  --primary-ink-rgb: 255 138 76; }
:root[data-theme="light"] .is-agents  { --primary-rgb: 8 112 140;  --primary-ink-rgb: 8 112 140; }
:root[data-theme="light"] .is-imagine { --primary-rgb: 134 46 190; --primary-ink-rgb: 134 46 190; }
:root[data-theme="light"] .is-storage { --primary-rgb: 202 138 4;  --primary-ink-rgb: 133 90 0; }
:root[data-theme="light"] .is-edits   { --primary-rgb: 194 65 12;  --primary-ink-rgb: 194 65 12; }

:root { --aside-bg: #141414; }
:root[data-theme="light"] { --aside-bg: #FFFFFF; }

/* ── Header ──────────────────────────────────────────────────────────── */
html.has-mdock .shell-nav,
html.has-mdock .shell-burger,
html.has-mdock .nav-backdrop { display: none !important; }
html.has-mdock .shell-header::before { border-bottom-color: transparent; }
html.has-mdock .shell-tools { margin-inline-start: auto; }
/* The frame stays put: back and account are always where they were left. */
html.has-mdock .shell-header.hide { transform: none; }

.shell-back {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    color: var(--color-text-main);
    transition: background-color .15s ease, border-color .15s ease;
}
.shell-back:hover { background: var(--color-hover-subtle); border-color: var(--border-strong); }
.shell-back:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .7); outline-offset: 2px; }
.shell-back svg { width: 16px; height: 16px; }
[dir="ltr"] .shell-back svg { transform: scaleX(-1); }
.shell-header:has(.shell-back) { gap: 10px; }
.shell-header:has(.shell-back) .shell-brand { margin-inline-start: 0; }
.shell-title { display: none; }

/* Account: avatar, name and caret in one hairline pill. */
.shell-acct {
    gap: 8px;
    width: auto;
    height: 42px;
    padding-block: 0;
    padding-inline: 5px 11px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--color-text-main);
    font: inherit;
    font-size: 13.5px;
    transition: background-color .15s ease, border-color .15s ease;
}
.shell-acct:hover,
.shell-acct[aria-expanded="true"] { background: var(--color-hover-subtle); border-color: var(--border-strong); }
.shell-acct-n { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-acct-c { width: 13px; height: 13px; flex: none; color: var(--color-text-muted); transition: transform .2s ease; }
.shell-acct[aria-expanded="true"] .shell-acct-c { transform: rotate(180deg); }

/* The phone's top bar is one slim line: back and where you are, or the logo on
   home, and the avatar. Everything else is in the tab bar and the menu. */
@media (max-width: 1023.98px) {
    html.has-mdock { --nav-bar: 50px; }
    html.has-mdock .shell-header { padding-inline: 12px; }
    html.has-mdock .shell-header:has(.shell-title) .shell-brand { display: none; }
    html.has-mdock .shell-title {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html.has-mdock .shell-title img { width: 17px; height: 17px; flex: none; }
    html.has-mdock .shell-back { width: 34px; height: 34px; border: 0; margin-inline-start: -6px; }
    html.has-mdock .shell-back svg { width: 18px; height: 18px; }
    html.has-mdock .shell-header:has(.shell-back) { gap: 4px; }
    html.has-mdock .shell-acct { width: 34px; height: 34px; padding: 0; border: 0; }
    html.has-mdock .shell-acct-n,
    html.has-mdock .shell-acct-c,
    html.has-mdock .nav-credit { display: none; }
    /* The bar already says it, and the tabs lead to the gallery. */
    html.has-bar-title .shell-main .page-title,
    html.has-bar-title .sf-title-root,
    html.has-bar-title .ims-head { display: none; }
}

.acct-theme { width: 100%; margin-top: 1px; }
.f-social #theme-toggle {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}
.f-social #theme-toggle:hover { color: var(--color-text-main); background: var(--color-hover-strong); }
.f-social #theme-toggle svg { width: 17px; height: 17px; }

/* Imagine's credit balance, on desktop; on a phone the studio shows it itself. */
@media (min-width: 1024px) {
    html.has-mdock .nav-credit {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--border-subtle);
        color: var(--color-text-main);
        font-size: 12.5px;
        white-space: nowrap;
    }
    html.has-mdock .nav-credit svg { width: 15px; height: 15px; color: rgb(var(--primary-ink-rgb)); }
}

/* On phones vertical room is the scarce thing: less air above the content. */
@media (max-width: 1023.98px) {
    html.has-mdock .shell-main.py-10,
    html.has-mdock .shell-main.py-8 { padding-top: 14px; }
    html.has-mdock .rn-bar-wrap { margin-bottom: 12px; }
    html.has-mdock .shell-main.px-0 > .rn-bar-wrap { padding-top: 10px; }
}
@media (max-width: 560px) {
    /* Pages without the bar (checkout): back, logo, avatar and burger are enough. */
    .shell-header:has(.shell-back) .shell-search { display: none; }
    .shell-acct { width: 34px; height: 34px; padding: 0; border: 0; }
    .shell-acct-n, .shell-acct-c { display: none; }
}

/* ── The tree (sidebar and «منو» sheet) ──────────────────────────────── */
.atree { display: grid; gap: 1px; }
.atree-i {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding-inline: 10px;
    border-radius: 12px;
    color: var(--color-text-muted);
    font-size: 14.5px;
    cursor: pointer;
    list-style: none;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}
.atree-i::-webkit-details-marker { display: none; }
.atree-i:hover { color: var(--color-text-main); background: var(--color-hover-subtle); }
.atree-i svg { width: 20px; height: 20px; flex: none; }
.atree-i .atree-mark { width: 18px; height: 18px; margin-inline: 1px; flex: none; }
.atree-i.is-on { color: var(--color-text-main); }
.atree-i.is-on > svg:first-child { color: rgb(var(--primary-ink-rgb)); }
.atree-i:focus-visible,
.atree-kids a:focus-visible { outline: 2px solid rgb(var(--primary-rgb) / .7); outline-offset: -2px; }
.atree-i .atree-car { width: 14px; height: 14px; margin-inline-start: auto; transition: transform .2s ease; }
.atree-sec[open] > .atree-i .atree-car { transform: rotate(180deg); }

.atree-kids {
    margin-inline-start: 19px;
    margin-bottom: 4px;
    padding-inline-start: 20px;
    border-inline-start: 1px solid var(--border-strong);
}
.atree-kids a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    color: var(--color-text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color .15s ease;
}
.atree-kids a:hover { color: var(--color-text-main); }
.atree-kids a::before {
    content: "";
    position: absolute;
    inset-inline-start: -20px;
    top: 50%;
    width: 13px;
    border-top: 1px solid var(--border-strong);
}
.atree-kids a.is-on { color: var(--color-text-main); }
.atree-kids a.is-on::before { border-color: rgb(var(--primary-rgb)); }
.atree-kids a.is-on::after {
    content: "";
    position: absolute;
    inset-inline-start: -33px;
    top: 9px;
    width: 4px;
    height: 20px;
    border-radius: 9px;
    background: rgb(var(--primary-rgb));
    box-shadow: 0 0 12px rgb(var(--primary-rgb) / .8);
}
.atree-kids em {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--status-ok-bg);
    color: var(--status-ok);
    font-size: 11px;
    font-style: normal;
}
.only-desktop { display: none !important; }
@media (min-width: 1024px) {
    .only-desktop { display: flex !important; }
    .only-mobile { display: none !important; }
}

/* ── Help card ───────────────────────────────────────────────────────── */
.app-help { padding: 16px 12px 14px; text-align: center; }
.mdock-sheet .app-help { border: 1px solid var(--border-subtle); border-radius: 22px; background: var(--surface-fill); }
.app-help h3 { font-size: 18px; font-weight: 300; line-height: 1.5; }
.app-help p { margin-top: 3px; font-size: 12.5px; line-height: 1.75; color: var(--color-text-muted); }
.app-help a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin-top: 9px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--color-hover-strong);
    color: var(--color-text-main);
    font-size: 13px;
    text-decoration: none;
    transition: border-color .15s ease;
}
.app-help a:hover { border-color: var(--border-strong); }
.app-help svg { width: 13px; height: 13px; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.aside { display: none; }
@media (min-width: 1024px) {
    html.has-aside { --aside-w: clamp(236px, 19vw, 276px); }
    html.has-aside body { padding-inline-start: var(--aside-w); }
    html.has-aside .shell-header { inset-inline-start: var(--aside-w); }
    html.has-aside .shell-header > .shell-brand { display: none; }
    /* No bar across the content: back and account float on the canvas, and a
       page's title can share their row. */
    html.has-aside .shell-header::before { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
    html.has-aside .shell-header { pointer-events: none; }
    html.has-aside .shell-header > * { pointer-events: auto; }
    html.has-aside .shell-back,
    html.has-aside .shell-acct,
    html.has-aside .nav-credit { background-color: var(--color-bg-dark); }
    html.has-aside .shell-acct:hover { background-color: var(--color-raised); }

    .aside {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 61;
        display: flex;
        flex-direction: column;
        width: var(--aside-w);
        padding: 14px 18px 10px;
        background: var(--aside-bg);
        border-inline-end: 1px solid var(--border-subtle);
    }
    .aside-brand { flex: none; min-height: 46px; margin-bottom: 14px; }
    .aside-brand .shell-brand { width: max-content; }
    /* Spans the sidebar's full width so the active mark can reach its edge. */
    .aside-scroll {
        flex: 1;
        min-height: 0;
        margin-inline: -18px;
        padding-inline: 18px;
        overflow-y: auto;
        scrollbar-width: thin;
    }
    .aside .app-help { flex: none; margin-top: 8px; border-top: 1px solid var(--border-subtle); }
    .aside .atree-kids a.is-on::after { inset-inline-start: -57px; border-radius: 6px; }
    .aside a.atree-i.is-on::before {
        content: "";
        position: absolute;
        inset-inline-start: -18px;
        top: 11px;
        width: 4px;
        height: 22px;
        border-radius: 6px;
        background: rgb(var(--primary-rgb));
        box-shadow: 0 0 12px rgb(var(--primary-rgb) / .8);
    }
    .aside-search {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        height: 40px;
        margin-bottom: 10px;
        padding: 0 12px;
        border-radius: 999px;
        border: 1px solid var(--border-subtle);
        background: none;
        color: var(--color-text-muted);
        font: inherit;
        font-size: 13px;
        cursor: pointer;
        transition: border-color .15s ease;
    }
    .aside-search:hover { border-color: var(--border-strong); }
    .aside-search svg { width: 16px; height: 16px; flex: none; }
    .aside-search kbd { margin-inline-start: auto; font-size: 10.5px; color: var(--color-text-subtle); }
}
@media (min-width: 1024px) and (max-width: 1399.98px) {
    /* The sidebar takes the room the two-column landing hero needs. */
    html.has-aside .hero.hero-hub { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1024px) and (max-height: 760px) {
    /* A short laptop screen: the tree needs the room more than the card. */
    .aside .app-help p { display: none; }
}

/* A service's coloured mark beside a title. */
.svc-mark { display: inline-block; width: .82em; height: .82em; margin-inline-end: .32em; vertical-align: -.04em; }

/* ── A visitor's header ──────────────────────────────────────────────── */
.pub-nav, .pub-start { display: none; }
html.is-visitor .shell-tools { margin-inline-start: auto; gap: 6px; }
html.is-visitor .shell-join {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: none;
    color: var(--color-text-main);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
html.is-visitor .shell-join:hover { background: var(--color-hover-subtle); border-color: var(--border-strong); }
@media (max-width: 1023.98px) {
    html.is-visitor .shell-tools > .shell-search { display: none; }
}
@media (min-width: 1024px) {
    .pub-nav { display: flex; align-items: center; gap: 2px; margin-inline-start: clamp(10px, 2vw, 28px); }
    .pub-nav > a, .pub-more > button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 36px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: none;
        color: var(--color-text-muted);
        font: inherit;
        font-size: 13.5px;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
        transition: color .15s ease, background-color .15s ease;
    }
    .pub-nav > a:hover, .pub-more:hover > button, .pub-more:focus-within > button { color: var(--color-text-main); background: var(--color-hover-subtle); }
    .pub-nav > a.is-on { color: var(--color-text-main); background: var(--color-hover-strong); }
    .pub-nav img { width: 16px; height: 16px; flex: none; }
    .pub-more { position: relative; }
    .pub-more > button svg { width: 12px; height: 12px; }
    .pub-more-menu {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        display: none;
        min-width: 228px;
        padding: 6px;
        border: 1px solid var(--border-subtle);
        border-radius: 16px;
        background: var(--color-raised);
        box-shadow: var(--shadow-lg);
    }
    .pub-more:hover .pub-more-menu, .pub-more:focus-within .pub-more-menu { display: grid; gap: 1px; }
    .pub-more-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 10px;
        color: var(--color-text-muted);
        font-size: 13.5px;
        text-decoration: none;
    }
    .pub-more-menu a:hover, .pub-more-menu a.is-on { background: var(--color-hover-subtle); color: var(--color-text-main); }
    .pub-more-menu em { padding: 1px 8px; border-radius: 999px; background: var(--status-ok-bg); color: var(--status-ok); font-size: 11px; font-style: normal; }
    .pub-start {
        display: inline-flex;
        align-items: center;
        height: 34px;
        padding: 0 16px;
        border-radius: 999px;
        background: rgb(var(--primary-rgb));
        color: var(--color-text-on-primary);
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
        transition: filter .15s ease;
    }
    .pub-start:hover { filter: brightness(1.08); }
    html.is-visitor .shell-tools > .shell-search { width: 34px; height: 34px; min-width: 0; padding: 0; justify-content: center; border-radius: 50%; }
    html.is-visitor .shell-tools > .shell-search .shell-search-t,
    html.is-visitor .shell-tools > .shell-search .shell-kbd { display: none; }
}

/* ── A visitor's footer on a phone: short, the tab bar does the navigating ── */
@media (max-width: 1023.98px) {
    html.is-visitor .f-in { gap: 18px 14px; padding-block: 22px 8px; }
    html.is-visitor .f-brand p { margin-top: 2px; font-size: 13px; line-height: 1.8; }
    html.is-visitor .f-social { margin-top: 10px; }
    html.is-visitor .f-note { display: none; }
    html.is-visitor .f-col li a { min-height: 30px; font-size: 13px; }
    html.is-visitor .f-mail { margin-bottom: 0 !important; }
    html.is-visitor .f-in > .f-col:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    html.is-visitor .f-in > .f-col:last-child h3 { width: 100%; margin: 0; }
}

/* ── Footer on app pages: the legal line only ────────────────────────── */
.shell-footer.is-compact { border-top: 0; padding-top: 0; background: none; }
.shell-footer.is-compact .f-bar { justify-content: center; border-top: 0; padding-block: 14px; font-size: 11.5px; color: var(--color-text-subtle); }
.shell-footer.is-compact .subs { display: none; }

@media (prefers-reduced-motion: reduce) {
    .atree-i .atree-car, .shell-acct-c { transition: none; }
}