/* Exercise library (/guides/exercises). Base: the guide-page stylesheet inlined in
   guides/index.html, so these pages match the other guides. Exercise-specific rules
   follow at the bottom and use site-system.css tokens so light mode works. */
:root {
    color-scheme: dark;
    --app-bg: #000000;
    --app-surface: #0a0a0a;
    --app-card: #141414;
    --app-primary: #0096ff;
    --bg: var(--app-bg);
    --surface: var(--app-surface);
    --card: var(--app-card);
    --text: #ffffff;
    --text-muted: #a3a3a3;
    --border: #262626;
    --brand: var(--app-primary);
    --brand-strong: #33adff;
    --success: #22c55e;
    --warning: #eab308;
    --danger: #ef4444;
    --radius: 8px;
    --shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 22px 54px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

html {
    margin: 0;
    padding: 0;
    background: var(--bg);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(0, 150, 255, 0.06) 0, rgba(0, 150, 255, 0) 320px),
        linear-gradient(180deg, #000000 0%, #050505 100%);
    overflow-x: hidden;
}

a {
    color: var(--brand);
    text-underline-offset: 3px;
}

a:hover { color: #66bdff; }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--brand);
    color: #00131f;
    padding: 10px 16px;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 700;
    z-index: 100;
}

.skip-link:focus { left: 0; }

        .site-nav{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin-bottom:18px;position:relative;z-index:50}.site-nav .brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#e6edf8;font-weight:700;font-size:1.02rem}.site-nav .brand img{border-radius:7px;display:block}.site-nav .menu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.site-nav .nav-item{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;color:#5ea3ff;background:rgba(20,31,52,.72);border:1px solid rgba(94,163,255,.26);font-size:.92rem;text-decoration:none;cursor:pointer;white-space:nowrap;list-style:none;transition:background-color .2s ease,color .2s ease}.site-nav .nav-item:hover{color:#fff;background:#5ea3ff}.site-nav summary.nav-item{list-style:none}.site-nav summary.nav-item::-webkit-details-marker{display:none}.site-nav summary.nav-item::after{content:"";width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-1px);transition:transform .2s ease}.site-nav .nav-group{position:relative}.site-nav .nav-group[open]>summary.nav-item::after{transform:rotate(-135deg) translateY(1px)}.site-nav .nav-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;max-height:min(70vh,480px);overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:8px;background:#0f1728;border:1px solid #2b3a57;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.42);z-index:60}.site-nav .nav-drop a{padding:9px 12px;border-radius:8px;color:#e6edf8;text-decoration:none;font-size:.92rem;white-space:nowrap}.site-nav .nav-drop a:hover{background:rgba(94,163,255,.16);color:#fff}

/* ---- Layout container (guide pages use width:940px; homepage uses 1180px) ---- */
.container {
    width: min(940px, calc(100% - 32px));
    margin: 0 auto;
    padding-top: 24px;       /* replaces old body top gutter */
    position: relative;
    z-index: 1;
}

/* ---- Hero header + section cards ---- */
.header,
.section {
    background:
        linear-gradient(135deg, rgba(0, 150, 255, 0.05) 0%, rgba(0, 150, 255, 0) 60%),
        var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);          /* 8px (was 16px) */
    box-shadow: var(--shadow-sm);
    padding: 26px 28px;
}

.header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
    box-shadow: var(--shadow-md);
}

.hero-copy { text-align: left; }

.app-preview { margin: 0; justify-self: center; width: min(210px, 100%); }
.app-preview img {
    display: block;
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;                    /* phone-frame look from homepage .phone-shot */
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.section { margin: 18px 0; }

/* ---- Eyebrow (homepage style: dotted brand accent) ---- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #c9e9ff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}
.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 18px rgba(0, 150, 255, 0.9);
}

/* ---- Typography (homepage scale) ---- */
h1 {
    margin: 0 0 12px;
    font-size: clamp(1.85rem, 3.8vw, 3rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
}
h2 {
    margin: 0 0 14px;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    line-height: 1.1;
    letter-spacing: 0;
    font-weight: 700;
}
h3 { margin: 0 0 8px; font-size: 1.08rem; letter-spacing: 0; }

p { margin: 0 0 14px; color: #b8b8b8; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 14px; padding-left: 22px; color: #b8b8b8; }
li { margin: 7px 0; }
strong { color: var(--text); }

/* ---- Card / link grids ---- */
.toc,
.card-grid,
.related-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.toc a,
.related-grid a,
.program-card {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    background: rgba(16, 16, 16, 0.72);
    padding: 14px;
    text-decoration: none;
    color: var(--text);
}
.toc a:hover,
.related-grid a:hover {
    border-color: rgba(0, 150, 255, 0.45);
    background: rgba(0, 150, 255, 0.08);
}
.program-card p,
.related-grid span,
.toc span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.94rem;
    font-weight: 400;
}

/* ---- Tables ---- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
table { width: 100%; border-collapse: collapse; background: rgba(10, 10, 10, 0.5); }
th, td {
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    vertical-align: top;
    color: #b8b8b8;
}
th {
    color: var(--text);
    background: rgba(0, 150, 255, 0.1);
    font-size: 0.9rem;
}
tr:last-child td { border-bottom: 0; }

/* ---- Callout ---- */
.callout {
    background: rgba(0, 150, 255, 0.08);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 14px 0;
    color: #dce6f4;
}

/* ---- Store row (white primary CTA to match homepage .cta.primary feel) ---- */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.store-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius);
    background: var(--brand);
    color: #00111d;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.18s ease, background 0.18s ease;
}
.store-row a:hover { background: var(--brand-strong); color: #00111d; transform: translateY(-2px); }

/* ---- FAQ accordion (homepage .faq-list look) ---- */
.faq-list details {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius);
    background: rgba(16, 16, 16, 0.72);
    padding: 14px 16px;
    margin: 0 0 10px;
}
.faq-list summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; float: right; color: var(--brand-strong); font-weight: 800; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list details p { margin: 12px 0 0; color: #b8b8b8; }

/* ---- Footer + guide meta ---- */
.footer { margin-top: 30px; padding: 28px 0 12px; text-align: center; font-size: 0.92rem; color: var(--text-muted); }
.guide-meta { margin: 0 0 6px; color: rgba(163, 163, 163, 0.5); font-size: 0.75rem; line-height: 1.35; }

@media (max-width: 720px) {
    .container { width: min(100% - 24px, 940px); }
    .header { grid-template-columns: 1fr; }
    .hero-copy { text-align: center; }
    .app-preview { max-width: 190px; }
    .header, .section { padding: 20px 18px; }
    .toc, .card-grid, .related-grid { grid-template-columns: 1fr; }
}

@media (max-width:720px){.site-nav{gap:10px}.site-nav .menu{width:100%}.site-nav .nav-group{position:static}.site-nav .nav-drop{position:static;min-width:0;width:100%;margin-top:4px;box-shadow:none;background:rgba(94,163,255,.06);border-color:rgba(94,163,255,.18)}}

/* ======================= Exercise library additions ======================= */
.ex-breadcrumbs { margin: 0 0 12px; font-size: 0.86rem; color: var(--vl-text-muted); }
.ex-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; color: inherit; }
.ex-breadcrumbs li { margin: 0; }
.ex-breadcrumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.6; }
.ex-breadcrumbs a { color: var(--vl-text-muted); text-decoration: none; }
.ex-breadcrumbs a:hover { color: var(--vl-brand); }

/* Detail hero: copy left, artwork right. Artwork has a black background in both themes. */
.ex-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.ex-figure { margin: 0; width: 100%; }
.ex-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--vl-border);
    background: #000;
}
.ex-figure.is-small img { max-width: 512px; margin-inline: auto; }

.ex-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.ex-facts li {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--vl-border);
    background: var(--vl-surface-raised);
    color: var(--vl-text-soft);
    font-size: 0.86rem;
}
.ex-facts strong { color: var(--vl-text); font-weight: 600; }

.ex-steps { counter-reset: step; list-style: none; padding-left: 0; }
.ex-steps li { counter-increment: step; position: relative; padding-left: 42px; margin: 12px 0; }
.ex-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--vl-brand);
    color: var(--vl-brand-ink);
    font-weight: 700;
    font-size: 0.86rem;
}

.ex-two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ex-two-col > .section { margin: 0; }
.ex-row { margin: 18px 0; }

.ex-muscles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ex-muscles div {
    border: 1px solid var(--vl-border);
    border-radius: var(--radius);
    background: var(--vl-surface-raised);
    padding: 12px 14px;
}
.ex-muscles h3 { font-size: 0.82rem; text-transform: uppercase; color: var(--vl-text-muted); margin-bottom: 4px; }
.ex-muscles p { margin: 0; color: var(--vl-text); }

/* Image cards (hub + alternatives). */
.ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ex-cards li { margin: 0; }
.ex-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--vl-border);
    border-radius: var(--radius);
    background: var(--vl-surface-raised);
    overflow: hidden;
    text-decoration: none;
    color: var(--vl-text);
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.ex-card:hover { border-color: var(--vl-brand); transform: translateY(-2px); color: var(--vl-text); }
.ex-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: #000; }
.ex-card span { display: block; padding: 10px 12px 2px; font-weight: 600; line-height: 1.3; }
.ex-card small { display: block; padding: 0 12px 12px; color: var(--vl-text-muted); font-size: 0.82rem; }

/* Hub: search + equipment filter + grouped sections. */
.ex-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.ex-search {
    flex: 1 1 260px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--vl-border-strong);
    background: var(--vl-surface);
    color: var(--vl-text);
    font: inherit;
}
.ex-search:focus-visible { outline: 2px solid var(--vl-focus); outline-offset: 2px; }
.ex-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.ex-filters button {
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--vl-border-strong);
    background: transparent;
    color: var(--vl-text-soft);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
}
.ex-filters button[aria-pressed="true"] { background: var(--vl-brand); border-color: var(--vl-brand); color: var(--vl-brand-ink); }
.ex-jump { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 0.92rem; }
.ex-jump li { margin: 0; }
.ex-group h3 { margin: 18px 0 10px; color: var(--vl-text-muted); font-size: 0.86rem; text-transform: uppercase; }
.ex-empty { display: none; }
.ex-empty.is-visible { display: block; }
[hidden] { display: none !important; }

@media (max-width: 720px) {
    .ex-hero { grid-template-columns: 1fr; }
    .ex-two-col, .ex-muscles { grid-template-columns: 1fr; }
    .ex-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ex-hero .ex-facts { justify-content: center; }
}