/* ============================================================
   glass-bridge.css - Map existing site class names to glass look
   Loaded after glass.css when glass_theme is on. Aliases only:
   no redesign, no removal of package class recipes.
   ============================================================ */

/* Buttons: site uses btn--* ; package uses btn-primary / btn-ghost */
.btn--primary {
    background: linear-gradient(135deg, var(--accent), var(--chart-2));
    color: #fff;
    box-shadow: 0 6px 20px rgba(22,32,58,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
    border-color: transparent;
}
html[data-theme="dark"] .btn--primary {
    color: #0A1020;
}
.btn--primary:hover {
    background: linear-gradient(135deg, var(--accent-hover), var(--accent));
    color: #fff;
}
html[data-theme="dark"] .btn--primary:hover {
    color: #0A1020;
}
.btn--secondary {
    background: var(--glass-fill);
    color: var(--accent);
    border: 1px solid var(--accent-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
}
.btn--secondary:hover {
    background: var(--glass-fill-strong);
    color: var(--accent-hover);
    border-color: var(--accent-line);
}
.btn--ghost {
    background: var(--glass-fill);
    color: var(--accent);
    border: 1px solid var(--accent-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Tables: site uses .table-wrap ; package uses .tbl-wrap */
.table-wrap {
    overflow-x: auto;
    margin: 1.6em 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    border: 1px solid var(--glass-border);
}

/* Reading progress: longform.js uses track + inner __bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 60;
}
.reading-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--chart-2));
}

/* TOC: package registers .toc but ships no .toc CSS.
   Style existing .contents with glass token vocabulary. */
.contents__desktop,
.contents__mobile {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
}
.contents__list a:hover,
.contents__list a:focus-visible,
.contents__list a.is-active,
.contents__sublist a:hover,
.contents__sublist a:focus-visible,
.contents__sublist a.is-active {
    color: var(--accent);
}
.contents__list a.is-active .contents__num,
.contents__num {
    color: var(--accent);
}

/* Optional future .toc recipe (components.json) */
.toc {
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass);
    padding: 16px 18px;
}
.toc a.active {
    color: var(--accent);
}