/* curlo — Components (single source of truth, framework-agnostic).
 * Prefixed .curlo-* classes work in ANY stack. Requires tokens.css.
 * Bootstrap stacks additionally load bootstrap-theme.css (a thin variable bridge),
 * which does NOT re-implement these — it only feeds tokens into Bootstrap's own API.
 */

/* ============ Section eyebrow (// comment label) ============ */
.curlo-eyebrow {
    font-family: var(--curlo-font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--curlo-primary-ink);
}
.curlo-eyebrow::before { content: "// "; opacity: 0.55; }

/* ============ Button (monospace, CLI-flavored) ============ */
.curlo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--curlo-font-mono);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--curlo-line);
    border-radius: var(--curlo-radius-sm);
    background: var(--curlo-surface-2);
    color: var(--curlo-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--curlo-transition);
}
.curlo-btn:hover { border-color: var(--curlo-line-strong); text-decoration: none; }
.curlo-btn:focus-visible { outline: none; box-shadow: var(--curlo-focus-ring); }
.curlo-btn:disabled, .curlo-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.curlo-btn--sm { padding: 0.45rem 0.85rem; font-size: 0.8rem; }
.curlo-btn--lg { padding: 0.9rem 1.6rem; font-size: 1rem; }
.curlo-btn--block { display: flex; width: 100%; }

.curlo-btn--primary   { background: var(--curlo-primary);   border-color: transparent; color: var(--curlo-on-accent); }
.curlo-btn--primary:hover   { background: var(--curlo-primary-strong);   box-shadow: var(--curlo-glow); }
.curlo-btn--secondary { background: var(--curlo-secondary); border-color: transparent; color: var(--curlo-on-accent); }
.curlo-btn--secondary:hover { background: var(--curlo-secondary-strong); }
.curlo-btn--accent    { background: var(--curlo-accent);    border-color: transparent; color: var(--curlo-on-accent); }
.curlo-btn--accent:hover    { background: var(--curlo-accent-strong); }
.curlo-btn--danger    { background: var(--curlo-danger);    border-color: transparent; color: var(--curlo-on-accent); }
.curlo-btn--danger:hover    { background: var(--curlo-danger-strong); }

.curlo-btn--ghost   { background: transparent; border-color: transparent; color: var(--curlo-primary-ink); }
.curlo-btn--ghost:hover { background: var(--curlo-primary-tint); border-color: transparent; }
.curlo-btn--outline { background: transparent; border-color: var(--curlo-primary-ink); color: var(--curlo-primary-ink); }
.curlo-btn--outline:hover { background: var(--curlo-primary-tint); }

/* CLI button: renders like a copyable command (always on the dark code surface) */
.curlo-btn--cli { background: var(--curlo-code-bg); color: var(--curlo-primary); border-color: var(--curlo-code-line); }
.curlo-btn--cli::before { content: "$ "; color: var(--curlo-code-muted); }
.curlo-btn--cli:hover { border-color: var(--curlo-primary); box-shadow: var(--curlo-glow); }

/* ============ Panel / Card (flat — no drop-shadow lift) ============ */
.curlo-card {
    background: var(--curlo-surface);
    color: var(--curlo-text);
    border: 1px solid var(--curlo-line);
    border-radius: var(--curlo-radius);
    transition: border-color 0.2s ease;
    overflow: hidden;
}
.curlo-card:hover { border-color: var(--curlo-line-strong); }
.curlo-card__body { padding: 1.4rem; }
.curlo-card__header {          /* file-tab style */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.65rem 1rem;
    background: var(--curlo-surface-2);
    border-bottom: 1px solid var(--curlo-line);
    font-family: var(--curlo-font-mono);
    font-size: 0.8rem;
    color: var(--curlo-muted);
}
.curlo-card--primary   { border-top: 2px solid var(--curlo-primary); }
.curlo-card--secondary { border-top: 2px solid var(--curlo-secondary); }
.curlo-card--accent    { border-top: 2px solid var(--curlo-accent); }
.curlo-card--danger    { border-top: 2px solid var(--curlo-danger); }

/* ============ Badge & Tag ============ */
.curlo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--curlo-font-mono);
    font-weight: 600;
    font-size: 0.76rem;
    padding: 0.32em 0.7em;
    border-radius: var(--curlo-radius-pill);
    background: var(--curlo-surface-2);
    color: var(--curlo-text);
}
.curlo-badge--primary   { background: var(--curlo-primary);   color: var(--curlo-on-accent); }
.curlo-badge--secondary { background: var(--curlo-secondary); color: var(--curlo-on-accent); }
.curlo-badge--accent    { background: var(--curlo-accent);    color: var(--curlo-on-accent); }
.curlo-badge--success   { background: var(--curlo-success);   color: var(--curlo-on-accent); }
.curlo-badge--warning   { background: var(--curlo-warning);   color: var(--curlo-on-accent); }
.curlo-badge--danger    { background: var(--curlo-danger);    color: var(--curlo-on-accent); }

/* Soft/outlined metadata tags (versions, licenses, counts) */
.curlo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-family: var(--curlo-font-mono);
    font-weight: 600;
    font-size: 0.76rem;
    padding: 0.3em 0.7em;
    border-radius: var(--curlo-radius-pill);
    background: transparent;
    border: 1px solid var(--curlo-line);
    color: var(--curlo-muted);
}
.curlo-tag--primary { background: var(--curlo-primary-tint);   border-color: rgb(74 222 128 / 0.4);  color: var(--curlo-primary-ink); }
.curlo-tag--info    { background: var(--curlo-secondary-tint); border-color: rgb(56 189 248 / 0.4);  color: var(--curlo-secondary-ink); }
.curlo-tag--accent  { background: var(--curlo-accent-tint);    border-color: rgb(251 191 36 / 0.4);  color: var(--curlo-accent-ink); }

/* ============ Step marker (keycap) ============ */
.curlo-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--curlo-surface-2);
    border: 1px solid var(--curlo-line);
    color: var(--curlo-primary-ink);
    font-family: var(--curlo-font-mono);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
    transition: all 0.2s ease;
}
.curlo-step:hover { border-color: var(--curlo-primary); box-shadow: var(--curlo-glow); }
.curlo-step--secondary { color: var(--curlo-secondary-ink); }
.curlo-step--accent    { color: var(--curlo-accent-ink); }
.curlo-step--danger    { color: var(--curlo-danger-ink); }

/* ============ Alert / callout ============ */
.curlo-alert {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.05rem;
    border-radius: var(--curlo-radius-sm);
    background: var(--curlo-surface);
    border: 1px solid var(--curlo-line);
    border-left: 3px solid var(--curlo-line-strong);
    color: var(--curlo-text);
    font-size: 0.92rem;
}
.curlo-alert--success { border-left-color: var(--curlo-success); }
.curlo-alert--warning { border-left-color: var(--curlo-warning); }
.curlo-alert--danger  { border-left-color: var(--curlo-danger); }
.curlo-alert--info    { border-left-color: var(--curlo-info); }

/* ============ Progress ============ */
.curlo-progress { height: 6px; background: var(--curlo-surface-3); border-radius: var(--curlo-radius-pill); overflow: hidden; }
.curlo-progress__bar { height: 100%; background: var(--curlo-primary); border-radius: inherit; }
.curlo-progress__bar--warning { background: var(--curlo-warning); }
.curlo-progress__bar--danger  { background: var(--curlo-danger); }

/* ============ Command runner + popover (auto-typed command, then redirect) ====
 * Any element with [data-command] becomes a trigger (wired by curlo.js). On click
 * a modal popover opens, types the command into a terminal, then redirects to
 * data-redirect once it finishes ("self" reloads the current page).
 *   <button class="curlo-btn curlo-btn--primary"
 *           data-command="curlo launch --customer abc"
 *           data-result="✓ launched customer abc"
 *           data-redirect="https://app.example.com/abc">launch</button>
 *   <script src=".../curlo/curlo.js"></script>
 */
.curlo-run__cmd { color: var(--curlo-code-text); }
.curlo-run__result {
    display: block;
    margin-top: 0.35rem;
    color: var(--curlo-primary);
    white-space: pre-wrap;
}

.curlo-popover {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.curlo-popover.is-open { opacity: 1; }
.curlo-popover__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(4 8 15 / 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.curlo-popover__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Graceful exit: fade the backdrop and drop the panel back a touch before removal
 * (mirrors the scale-in entrance). curlo.js adds .is-closing, then unmounts. */
.curlo-popover.is-closing { opacity: 0; }
.curlo-popover.is-closing .curlo-popover__panel { transform: scale(0.96); opacity: 0; }
/* Loading variant: the terminal body centres the loader + its message on one row. */
.curlo-popover--loading .curlo-terminal__body {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.6rem 1.6rem;
}

/* ============ Forms ============ */
.curlo-field { margin-bottom: 1rem; }
.curlo-label { display: block; font-family: var(--curlo-font-mono); font-size: 0.8rem; color: var(--curlo-muted); margin-bottom: 0.4rem; }
.curlo-input, .curlo-select, .curlo-textarea {
    width: 100%;
    background: var(--curlo-surface);
    color: var(--curlo-text);
    border: 1px solid var(--curlo-line);
    border-radius: var(--curlo-radius-sm);
    padding: 0.65rem 0.85rem;
    font-family: var(--curlo-font-sans);
    font-size: 0.95rem;
    transition: border-color 0.15s ease;
}
.curlo-input:focus, .curlo-select:focus, .curlo-textarea:focus { outline: none; border-color: var(--curlo-primary); box-shadow: var(--curlo-focus-ring); }
.curlo-input::placeholder, .curlo-textarea::placeholder { color: var(--curlo-muted); }

/* ============ Terminal (signature — always dark, in both themes) ============ */
.curlo-terminal {
    background: var(--curlo-code-bg);
    border: 1px solid var(--curlo-code-line);
    border-radius: var(--curlo-radius);
    overflow: hidden;
    box-shadow: var(--curlo-shadow-lg);
}
.curlo-terminal__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.7rem 1rem;
    background: var(--curlo-code-bar);
    border-bottom: 1px solid var(--curlo-code-line);
}
.curlo-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.curlo-dot--r { background: var(--curlo-danger); }
.curlo-dot--y { background: var(--curlo-accent); }
.curlo-dot--g { background: var(--curlo-primary); }
.curlo-terminal__title { margin-left: 0.5rem; font-family: var(--curlo-font-mono); font-size: 0.78rem; color: var(--curlo-code-muted); }
.curlo-terminal__body {
    margin: 0;
    padding: 1.2rem 1.35rem;
    font-family: var(--curlo-font-mono);
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--curlo-code-text);
    overflow-x: auto;
    background: transparent;
    border: 0;
}

/* ============ Code block with line numbers (always dark) ============ */
.curlo-code {
    background: var(--curlo-code-bg);
    border: 1px solid var(--curlo-code-line);
    border-radius: var(--curlo-radius);
    overflow: hidden;
    counter-reset: curlo-ln;
    color: var(--curlo-code-text);
}
.curlo-code pre { margin: 0; padding: 1rem 0; overflow-x: auto; background: transparent; border: 0; }
.curlo-code .cl {
    display: block;
    position: relative;
    padding: 0 1.35rem 0 3.6rem;
    font-family: var(--curlo-font-mono);
    font-size: 0.88rem;
    line-height: 1.85;
    white-space: pre;
}
.curlo-code .cl::before {
    counter-increment: curlo-ln;
    content: counter(curlo-ln);
    position: absolute;
    left: 0;
    width: 2.6rem;
    text-align: right;
    color: var(--curlo-code-muted);
    user-select: none;
}

/* Syntax tokens (shared by terminal + code) */
.curlo-c { color: var(--curlo-code-muted); }     /* comment */
.curlo-p { color: var(--curlo-primary); font-weight: 700; } /* prompt */
.curlo-k { color: var(--curlo-primary); }        /* command / keyword */
.curlo-f { color: var(--curlo-secondary); }      /* flag */
.curlo-s { color: var(--curlo-accent); }         /* string */
.curlo-v { color: var(--curlo-magenta); }        /* variable / path */
.curlo-ok { color: var(--curlo-primary); }

/* ============ Editor-style status bar ============ */
.curlo-statusbar {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    height: 30px;
    padding: 0 0.9rem;
    background: var(--curlo-primary);
    color: var(--curlo-on-accent);
    font-family: var(--curlo-font-mono);
    font-size: 0.74rem;
    font-weight: 600;
}
.curlo-statusbar__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.curlo-statusbar__spacer { margin-left: auto; }

/* ============ Slim nav (dev-docs top bar) ============ */
.curlo-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    height: 56px;
    display: flex;
    align-items: center;
    background: var(--curlo-nav-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--curlo-line);
}
.curlo-nav__inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.curlo-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--curlo-font-mono);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    color: var(--curlo-text);
    text-decoration: none;
}
.curlo-nav__brand:hover { color: var(--curlo-text); text-decoration: none; }
.curlo-nav__brand img { height: 24px; width: 24px; }
.curlo-nav__links { display: flex; gap: 0.25rem; }
.curlo-nav__links a {
    font-family: var(--curlo-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--curlo-muted);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border-radius: var(--curlo-radius-sm);
    transition: color 0.15s ease, background-color 0.15s ease;
}
.curlo-nav__links a:hover,
.curlo-nav__links a:focus-visible,
.curlo-nav__links a.active {
    color: var(--curlo-primary-ink);
    background: var(--curlo-surface-2);
    text-decoration: none;
}
.curlo-nav__actions { display: flex; align-items: center; gap: 1.25rem; }
@media (max-width: 720px) { .curlo-nav__links { display: none; } }

/* Theme toggle (light/dark switch) — compact icon button */
.curlo-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--curlo-surface-2);
    color: var(--curlo-text);
    border: 1px solid var(--curlo-line);
    border-radius: var(--curlo-radius-sm);
    cursor: pointer;
    transition: var(--curlo-transition);
}
.curlo-theme-toggle:hover { border-color: var(--curlo-line-strong); color: var(--curlo-primary-ink); }
.curlo-theme-toggle svg {
    width: 18px; height: 18px; display: block;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Show the icon for the mode you'll switch TO */
.curlo-theme-toggle .to-dark { display: inline-flex; }
.curlo-theme-toggle .to-light { display: none; }
[data-theme="dark"] .curlo-theme-toggle .to-dark { display: none; }
[data-theme="dark"] .curlo-theme-toggle .to-light { display: inline-flex; }