/* ══════════════════════════════════════
   Viscar - Pages (Docs, Pricing, About, Dashboard)
   ══════════════════════════════════════ */

/* ── Shared page header ── */
.page-hero {
    padding: calc(100px + env(safe-area-inset-top, 0px)) 2.5rem 3rem;
    text-align: center; position: relative; z-index: 1;
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(30,111,255,0.12) 0%, transparent 65%);
}
.page-hero .section-title { margin-bottom: 0.6rem; }

/* ── Docs ── */
.docs-layout { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; max-width: 1140px; margin: 0 auto; padding: 0 2.5rem 4rem; position: relative; z-index: 1; }
.docs-sidebar { position: sticky; top: 80px; align-self: start; display: flex; flex-direction: column; gap: 0.3rem; }
.docs-sidebar a { padding: 0.5rem 0.8rem; border-radius: 0.5rem; font-size: 0.85rem; color: var(--txt2); text-decoration: none; transition: all 0.2s; font-weight: 500; }
.docs-sidebar a:hover { color: var(--cyan); background: rgba(0,194,255,0.06); }
.docs-sidebar a.active { color: var(--cyan); background: rgba(0,194,255,0.08); }
.docs-sidebar-label { font-family: var(--mono); font-size: 0.65rem; color: var(--txt3); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.8rem 0.8rem 0.3rem; font-weight: 600; }

.docs-content { min-width: 0; }
/* scroll-margin-top compensates for the 60-px fixed top-bar - without it
   anchor-link clicks would land the heading flush behind the bar.
   Matches the scrollspy activation line in docs.js so the chip stays in
   sync with where the heading actually settles after the scroll. */
.docs-section { margin-bottom: 3rem; scroll-margin-top: 80px; }
.docs-section h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border2); }
.docs-section h3 { font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 0.6rem; }
.docs-section p { color: var(--txt2); line-height: 1.75; margin-bottom: 1rem; font-size: 0.92rem; }

/* white-space: pre is what makes the multi-line JSON in our examples
   actually render with the line breaks and indentation written into
   the markup. Without it, browsers collapse whitespace and the entire
   JSON block flattens to one line. overflow-x:auto lets long lines
   horizontal-scroll instead of breaking layout. */
.docs-code { background: var(--bg2); border: 1px solid var(--border); border-radius: 0.6rem; padding: 1.2rem 1.4rem; font-family: var(--mono); font-size: 0.82rem; color: var(--txt2); line-height: 1.7; overflow-x: auto; margin: 1rem 0; position: relative; white-space: pre; }
.docs-code .method { color: var(--green); font-weight: 600; }
.docs-code .url { color: var(--cyan); }
.docs-code .key { color: var(--violet); }
.docs-code .val { color: var(--amber); }
.docs-code-label { position: absolute; top: 0.5rem; right: 0.7rem; font-family: var(--mono); font-size: 0.62rem; color: var(--txt3); letter-spacing: 0.06em; text-transform: uppercase; }

.endpoint-card { background: var(--bg3); border: 1px solid var(--border2); border-radius: 0.8rem; padding: 1.5rem; margin-bottom: 1rem; transition: border-color 0.2s; }
.endpoint-card:hover { border-color: var(--border); }
.endpoint-method { display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 0.3rem; font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; margin-right: 0.6rem; }
.endpoint-method.get { background: rgba(48,209,88,0.12); color: var(--green); }
.endpoint-method.post { background: rgba(30,111,255,0.12); color: var(--blue); }
.endpoint-path { font-family: var(--mono); font-size: 0.88rem; color: var(--txt); font-weight: 500; }
.endpoint-desc { color: var(--txt2); font-size: 0.85rem; margin-top: 0.5rem; line-height: 1.6; }
.endpoint-badge { display: inline-flex; padding: 0.15rem 0.5rem; border-radius: 2rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em; margin-left: 0.5rem; }
.endpoint-badge.free { background: var(--green2); color: var(--green); }
.endpoint-badge.paid { background: var(--amber2); color: var(--amber); }

/* Field / error reference tables inside doc sections. Sits between body
   copy and JSON examples - same typographic weight, no heavy borders. */
.docs-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: 0.85rem; }
.docs-table thead th { text-align: left; font-weight: 600; color: var(--txt2); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--border); background: var(--bg2); }
.docs-table tbody td { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border2); color: var(--txt2); line-height: 1.55; vertical-align: top; }
.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-table code { background: var(--bg2); color: var(--cyan); border: 1px solid var(--border2); padding: 0.12rem 0.4rem; border-radius: 4px; font-family: var(--mono); font-size: 0.78rem; }

/* ── Pricing ── */
.pricing-page-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 1140px; margin: 0 auto; }
.pricing-page-card { background: var(--bg3); border: 1px solid var(--border2); border-radius: 1rem; padding: 2.2rem; transition: border-color 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
.pricing-page-card:hover { border-color: var(--border); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
.pricing-page-card.featured { border-color: rgba(30,111,255,0.3); box-shadow: 0 0 0 1px rgba(30,111,255,0.1); }
.pricing-page-btn { width: 100%; margin-top: 1.5rem; padding: 0.7rem; border-radius: 0.55rem; font-family: var(--font); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border: 1px solid var(--border2); background: rgba(30,111,255,0.06); color: var(--txt2); }
.pricing-page-btn:hover { border-color: var(--cyan); background: rgba(0,194,255,0.08); color: var(--txt); }
.pricing-page-card.featured .pricing-page-btn { background: linear-gradient(135deg, var(--blue) 0%, var(--cyan) 100%); color: #fff; border: none; box-shadow: 0 4px 16px rgba(30,111,255,0.3); }

/* ── About ── */
/* Narrative block: centred, readable measure, with a brand accent rule and a
   "lead" first paragraph so it reads as a deliberate, structured section rather
   than a stray left-aligned column. */
.about-story {
    max-width: 800px;
    margin: 0 auto 4.5rem;
    padding: 0.4rem 0 0.4rem 1.6rem;
    border-left: 2px solid var(--blue);
    text-align: left;
}
.about-story p { color: var(--txt2); font-size: 1rem; line-height: 1.85; margin-bottom: 1.2rem; }
.about-story p:first-child { font-size: 1.14rem; line-height: 1.8; color: var(--txt); font-weight: 500; }
.about-story p:last-child { margin-bottom: 0; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 1000px; margin: 0 auto; }
.about-card { background: linear-gradient(135deg, rgba(10,18,32,0.9), rgba(15,25,42,0.9)); border: 1px solid rgba(30,111,255,0.15); border-radius: 1rem; padding: 2rem; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; }
.about-card:hover { border-color: rgba(30,111,255,0.35); box-shadow: 0 4px 24px rgba(30,111,255,0.08); transform: translateY(-2px); }
.about-card-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(30,111,255,0.1); border: 1px solid rgba(30,111,255,0.2); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; box-shadow: 0 0 12px rgba(30,111,255,0.08); }
.about-card-icon svg { width: 22px; height: 22px; color: var(--cyan); }
.about-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; }
.about-card p { color: var(--txt2); font-size: 0.9rem; line-height: 1.7; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1.2rem; margin-top: 2rem; }
.team-card { background: var(--bg3); border: 1px solid var(--border2); border-radius: 0.9rem; padding: 1.8rem; text-align: center; transition: border-color 0.3s; }
.team-card:hover { border-color: var(--border); }
.team-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--violet)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-weight: 800; font-size: 1.1rem; color: #fff; }
.team-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.team-role { font-size: 0.8rem; color: var(--txt2); margin-bottom: 0.6rem; }
.team-link { color: var(--txt3); text-decoration: none; font-size: 0.82rem; transition: color 0.2s; }
.team-link:hover { color: var(--cyan); }
.team-links { display: flex; gap: 0.8rem; justify-content: center; margin-top: 0.4rem; }
.team-links .team-link { display: flex; align-items: center; }

/* Enterprise Contact Sales - warm gold, not loud */
.btn-enterprise { border-color: rgba(196,163,95,0.4) !important; background: rgba(196,163,95,0.08) !important; color: #c4a35f !important; }
.btn-enterprise:hover { border-color: rgba(196,163,95,0.6) !important; background: rgba(196,163,95,0.14) !important; color: #d4b76e !important; }

/* ══════════════════════════════════════
   Dashboard Pages
   ══════════════════════════════════════ */

.dash-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; max-width: 1140px; margin: 0 auto; padding: 0 2.5rem 4rem; position: relative; z-index: 1; }

/* Sidebar */
.dash-sidebar { position: sticky; top: 80px; align-self: start; display: flex; flex-direction: column; gap: 0.2rem; }
.dash-sidebar-label { font-family: var(--mono); font-size: 0.62rem; color: var(--txt3); letter-spacing: 0.1em; text-transform: uppercase; padding: 1rem 0.8rem 0.4rem; font-weight: 600; }
.dash-sidebar a {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.8rem; border-radius: 0.5rem;
    font-size: 0.88rem; color: var(--txt2); text-decoration: none;
    transition: all 0.2s; font-weight: 500;
}
.dash-sidebar a svg { width: 16px; height: 16px; opacity: 0.45; transition: opacity 0.2s; }
.dash-sidebar a:hover { color: var(--cyan); background: rgba(0,194,255,0.06); }
.dash-sidebar a:hover svg { opacity: 1; }
.dash-sidebar a.active { color: var(--cyan); background: rgba(0,194,255,0.08); }
.dash-sidebar a.active svg { opacity: 1; }

/* Content */
.dash-content { min-width: 0; }
.dash-content h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; }
.dash-content .dash-subtitle { color: var(--txt2); font-size: 0.92rem; margin-bottom: 2rem; }

/* Stat cards */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.dash-stat-card {
    background: var(--bg3); border: 1px solid var(--border2); border-radius: 0.8rem;
    padding: 1.4rem; transition: border-color 0.2s;
}
.dash-stat-card:hover { border-color: var(--border); }
.dash-stat-label { font-family: var(--mono); font-size: 0.65rem; color: var(--txt3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; }
.dash-stat-val { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--txt); }
.dash-stat-sub { font-size: 0.78rem; color: var(--txt3); margin-top: 0.2rem; }

/* Cards / sections */
.dash-card {
    background: var(--bg3); border: 1px solid var(--border2); border-radius: 0.9rem;
    padding: 1.8rem; margin-bottom: 1.5rem; transition: border-color 0.2s;
}
.dash-card:hover { border-color: var(--border); }
.dash-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.8rem; }
.dash-card p { color: var(--txt2); font-size: 0.9rem; line-height: 1.7; }

/* Profile page */
.profile-photo-wrap {
    display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem;
}
.profile-photo {
    width: 80px; height: 80px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--violet));
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.8rem; color: #fff; flex-shrink: 0;
}
.profile-photo-info h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.15rem; }
.profile-photo-info p { color: var(--txt2); font-size: 0.88rem; }

.profile-field { margin-bottom: 1.2rem; }
.profile-field-label { font-family: var(--mono); font-size: 0.68rem; color: var(--txt3); letter-spacing: 0.08em; margin-bottom: 0.35rem; text-transform: uppercase; }
.profile-field-value {
    padding: 0.65rem 0.9rem; background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 0.5rem; color: var(--txt); font-size: 0.92rem;
}
.profile-field-value.readonly { color: var(--txt2); }

/* API Keys */
.key-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.2rem; background: var(--bg2); border: 1px solid var(--border2);
    border-radius: 0.6rem; margin-bottom: 0.7rem; transition: border-color 0.2s;
}
.key-row:hover { border-color: var(--border); }
/* Let the text column shrink instead of widening the whole row (and the page)
   when the API key string is long - it truncates with an ellipsis; the full key
   is still available via the Copy button. */
.key-row > div:first-child { min-width: 0; }
.key-name { font-weight: 600; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-value { font-family: var(--mono); font-size: 0.8rem; color: var(--txt2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.key-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.key-btn {
    padding: 0.4rem 0.8rem; min-height: 36px; border-radius: 0.4rem; border: 1px solid var(--border2);
    background: transparent; color: var(--txt3); font-size: 0.78rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s; font-family: var(--font);
    display: inline-flex; align-items: center; justify-content: center;
}
.key-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,194,255,0.06); }
.key-btn.danger:hover { border-color: var(--red); color: var(--red); background: rgba(255,69,58,0.06); }

/* Subscription card */
.sub-current {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem; background: var(--bg2); border: 1px solid rgba(30,111,255,0.2);
    border-radius: 0.8rem; margin-bottom: 1.5rem;
}
.sub-plan-name { font-size: 1.2rem; font-weight: 700; }
.sub-plan-badge {
    font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
    padding: 0.2rem 0.6rem; border-radius: 2rem; letter-spacing: 0.06em;
    background: var(--green2); color: var(--green);
}

/* Dash btn */
.dash-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 1.1rem; border-radius: 0.5rem;
    font-family: var(--font); font-size: 0.88rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
    border: 1px solid var(--border2); background: transparent; color: var(--txt2);
}
.dash-btn:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(0,194,255,0.06); }
.dash-btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff; border: none;
    box-shadow: 0 4px 14px rgba(30,111,255,0.25);
}
.dash-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30,111,255,0.4); }

/* ── Mobile section-nav drawer chrome (Docs / Dashboard) ──
   Hidden by default (desktop, and any page without a sidebar). Revealed only on
   phone widths when body.has-mnav is set by site.js. The edge "bookmark" tab and
   scrim elements are injected by site.js. Sits BELOW the top-bar (z 200) so the
   header stays visible, and below modals/toasts (z 1000+). */
.mnav-tab, .mnav-scrim { display: none; }

/* Responsive */
@media (max-width: 768px) {
    .docs-layout, .dash-layout { grid-template-columns: 1fr; }

    /* Side nav becomes a left slide-out drawer. */
    .docs-sidebar, .dash-sidebar {
        position: fixed; top: 0; left: 0; height: 100dvh; width: min(82vw, 300px);
        margin: 0; padding: calc(76px + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
        flex-direction: column; flex-wrap: nowrap; gap: 0.25rem;
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        background: var(--bg2); border-right: 1px solid var(--border);
        box-shadow: 10px 0 50px rgba(0,0,0,0.55);
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(.4,0,.2,1);
        z-index: 150;
    }
    body.mnav-open .docs-sidebar, body.mnav-open .dash-sidebar { transform: translateX(0); }
    .docs-sidebar a, .dash-sidebar a { font-size: 0.95rem; padding: 0.7rem 0.85rem; }
    .docs-sidebar-label, .dash-sidebar-label { width: auto; }

    /* Edge "bookmark" tab — narrow, vertically centred at the left edge. */
    body.has-mnav .mnav-tab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; left: 0; top: 50%; transform: translateY(-50%);
        width: 27px; height: 58px; padding: 0;
        background: var(--bg3); color: var(--cyan);
        border: 1px solid var(--border); border-left: none; border-radius: 0 11px 11px 0;
        box-shadow: 2px 2px 14px rgba(0,0,0,0.4);
        z-index: 160; cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.2s;
    }
    body.has-mnav .mnav-tab svg { width: 16px; height: 16px; transition: transform 0.28s; }
    /* When open, ride out with the drawer and flip the chevron to "close". */
    body.has-mnav.mnav-open .mnav-tab { transform: translateY(-50%) translateX(min(82vw, 300px)); }
    body.has-mnav.mnav-open .mnav-tab svg { transform: rotate(180deg); }

    /* Backdrop behind the drawer (dims content, leaves the top-bar visible). */
    body.has-mnav .mnav-scrim {
        display: block; position: fixed; inset: 0; z-index: 140;
        background: rgba(2, 8, 18, 0.5);
        opacity: 0; pointer-events: none; transition: opacity 0.28s;
    }
    body.has-mnav.mnav-open .mnav-scrim { opacity: 1; pointer-events: auto; }
    /* Reference tables scroll horizontally instead of crushing/clipping cells. */
    .docs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .about-grid { grid-template-columns: 1fr; }
    .pricing-page-grid { grid-template-columns: repeat(2, 1fr); }
    .page-hero { padding-top: calc(80px + env(safe-area-inset-top, 0px)); }
    .sub-current { flex-direction: column; gap: 1rem; text-align: center; }
}
@media (max-width: 480px) {
    .pricing-page-grid { grid-template-columns: 1fr; }
}

/* ── Light-theme page overrides (selectors that hardcode dark colours) ── */
[data-theme="light"] .about-card { background: linear-gradient(135deg, #f6f9fd, #edf2f9); }
[data-theme="light"] .pricing-page-card:hover { box-shadow: 0 10px 30px rgba(20,45,95,0.12); }