/* === /use-cases — self-contained, expandable showcase cards === */
/* Reuses design tokens + shared components from style.css. Dark theme default. */
/* Each agent/app is a <details> card that expands to its OWN prompt + connect    */
/* steps + a copy button (the homepage .icon-btn). Native exclusive accordion      */
/* (name="uc-show") → one card open at a time = isolated.                          */

/* ---- Intro ---- */
.uc-intro { padding-bottom: 0; }
.uc-intro h1 { margin-bottom: 0.5rem; }

.uc-actions { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1rem; }
.uc-actions .btn { padding: 0.5rem 1.125rem; }
.uc-actions--end { margin-top: 2.25rem; border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; }
.uc-llms { font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; }

/* ---- Section jump-nav ---- */
.uc-flownav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.uc-flownav a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary);
    background: var(--card); border: 1px solid var(--border-subtle); border-radius: 999px;
    padding: 0.32rem 0.85rem 0.32rem 0.6rem; text-decoration: none;
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.uc-flownav a:hover { border-color: var(--primary); color: var(--primary-hi); transform: translateY(-1px); }
.uc-flownav-ic { display: inline-flex; width: 0.95rem; height: 0.95rem; color: var(--primary); }
.uc-flownav-ic svg { width: 100%; height: 100%; }

/* ---- Section ---- */
.uc-flow { margin-top: 2rem; scroll-margin-top: 4rem; }
.uc-flow-head { border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; margin-bottom: 1.1rem; }
.uc-flow-head h2 { font-family: Montserrat, system-ui, sans-serif; font-size: 1.3rem; color: var(--text); margin-bottom: 0.4rem; }
.uc-eyebrow {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.55rem;
}
.uc-flow-badge { color: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: 0.03em; }

.uc-flow code { font-family: 'JetBrains Mono', monospace; font-size: 0.82em; background: var(--primary-muted); color: var(--primary); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.uc-flow a { color: var(--primary); }
.uc-flow a:hover { color: var(--primary-hi); }

/* ---- Numbered step-chips (browser section) ---- */
.uc-steps { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.uc-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.uc-step-n {
    position: relative; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: grid; place-items: center; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 600;
    color: var(--primary); border: 1px solid var(--primary); background: var(--primary-muted);
}
.uc-step:not(:last-child) .uc-step-n::after { content: ''; position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%); width: 2px; height: 0.7rem; background: var(--border); }
.uc-step-b { font-size: 0.9rem; color: var(--text); line-height: 1.55; padding-top: 0.18rem; }

/* ---- Section label ---- */
.uc-cards-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); margin: 0.25rem 0 0.7rem; }

/* ---- §1 artifact cards (what you can publish in the browser) ---- */
.uc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.85rem; margin-bottom: 0.5rem; }
.uc-card {
    background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
    padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; scroll-margin-top: 5rem;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.uc-card:hover { border-color: var(--primary); transform: translateY(-1px); }
.uc-card-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--primary-muted); margin-bottom: 0.6rem; }
.uc-card-ico svg { width: 17px; height: 17px; stroke: var(--primary); }
.uc-card h3 { font-family: Montserrat, system-ui, sans-serif; font-size: 1rem; color: var(--text); margin: 0 0 0.3rem; }
.uc-card p { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; margin: 0 0 0.75rem; flex: 1; }
.uc-card p code { font-family: 'JetBrains Mono', monospace; font-size: 0.78em; background: var(--primary-muted); color: var(--primary); padding: 0 4px; border-radius: 3px; }
.uc-card-cta { margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.uc-card-cta::after { content: ' →'; }
.uc-card-cta:hover { color: var(--primary-hi); }

/* ---- "Works in" browser row ---- */
.uc-browsers { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.95rem; font-size: 0.8rem; color: var(--text-secondary); }
.uc-browsers-label { font-family: 'JetBrains Mono', monospace; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.uc-browsers-item { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ---- Brand logo wrapper (currentColor → tinted per-brand via inline style) ---- */
.uc-logo { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; }
.uc-logo svg { width: 100%; height: 100%; }
.uc-logo--lobster { width: 1.9rem; height: 1.9rem; }
.uc-browsers .uc-logo { width: 1.1rem; height: 1.1rem; }

/* ---- Expandable showcase card (<details>) ---- */
.uc-show { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius); margin-bottom: 0.65rem; scroll-margin-top: 4rem; }
.uc-show[open] { border-color: var(--primary); }
.uc-show-head { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.95rem; user-select: none; }
.uc-show-head::-webkit-details-marker { display: none; }
.uc-show-head::marker { content: ""; }
.uc-show-head:hover .uc-show-name { color: var(--primary-hi); }
.uc-show-title { display: flex; flex-direction: column; gap: 0.08rem; flex: 1; min-width: 0; }
.uc-show-name { font-family: Montserrat, system-ui, sans-serif; font-weight: 600; font-size: 1rem; color: var(--text); }
.uc-show-tag { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.3; }
.uc-show-tag em { color: var(--primary); font-style: normal; }
.uc-show-tag strong { color: var(--text); }
.uc-show-chevron { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--text-secondary); transition: transform 0.2s, color 0.2s; }
.uc-show-chevron svg { width: 100%; height: 100%; }
.uc-show[open] .uc-show-chevron { transform: rotate(90deg); color: var(--primary); }
.uc-show-body { padding: 0.1rem 0.95rem 1rem; border-top: 1px solid var(--border-subtle); }
.uc-show-lead { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; margin: 0.75rem 0 0.2rem; }
.uc-show-note { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin: 0.5rem 0 0; }

/* block label inside a card */
.uc-block-label { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-secondary); margin: 0.85rem 0 0.3rem; }
.uc-block-label code { font-family: 'JetBrains Mono', monospace; font-size: 0.92em; background: var(--primary-muted); color: var(--primary); padding: 0 4px; border-radius: 3px; text-transform: none; }
.uc-block-fast { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-sm); padding: 0 5px; }

/* ---- Snippet box (prompt / code) + homepage copy button, NO scroll ---- */
.uc-snippet {
    position: relative; background: var(--surface); border: 1px solid rgba(140, 112, 57, 0.4);
    border-radius: var(--radius-sm); padding: 0.65rem 2.4rem 0.7rem 0.8rem;
    font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; line-height: 1.6; color: var(--primary); margin: 0;
}
.uc-snippet .icon-btn { position: absolute; top: 0.4rem; right: 0.4rem; }
.uc-snippet-text { white-space: normal; word-break: break-word; color: var(--primary); }
.uc-snippet--code { color: var(--text); }
.uc-snippet--code pre { margin: 0; }
.uc-snippet--code code { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* ---- Anchor target highlight (hero deep-link → card glows; JS also opens it) ---- */
@keyframes uc-flash {
    0%   { box-shadow: 0 0 0 3px var(--primary), 0 0 24px -4px var(--primary); }
    100% { box-shadow: 0 0 0 1px var(--primary), 0 0 22px -6px var(--primary); }
}
.uc-card:target, .uc-show:target {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), 0 0 22px -6px var(--primary);
    animation: uc-flash 1s ease-out;
}
@media (prefers-reduced-motion: reduce) { .uc-card:target, .uc-show:target { animation: none; } }

/* ---- Mobile: one comfortable screen ---- */
@media (max-width: 480px) {
    .container.uc-intro, #use-cases-page.container { padding: 1rem; }
    .uc-flownav a { font-size: 0.78125rem; padding: 0.28rem 0.7rem 0.28rem 0.5rem; }
    .uc-flow { margin-top: 1.25rem; }
    .uc-flow-head { padding-top: 1rem; margin-bottom: 0.9rem; }
    .uc-flow-head h2 { font-size: 1.15rem; }
    .uc-step-b { font-size: 0.85rem; }
    .uc-cards { grid-template-columns: 1fr; gap: 0.7rem; }
    .uc-card { padding: 0.85rem 1rem 0.95rem; }
    .uc-card p { font-size: 0.8rem; }
    .uc-browsers { gap: 0.7rem; }
    .uc-show-head { padding: 0.75rem 0.8rem; }
    .uc-show-body { padding: 0.1rem 0.8rem 0.9rem; }
    .uc-snippet { font-size: 0.7rem; }
}