/* ==========================================================================
   Magendoo AI Lab — self-contained Swiss design system for ai.magendoo.ro
   Standalone (no dependency on main-site CSS): the subdomain ships alone.
   ========================================================================== */
:root {
    --sw-paper: #fafaf7;
    --sw-ink: #141412;
    --sw-accent: #e0442a;
    --sw-hairline: #dcdcd4;
    --sw-muted: #54544e;
    --sw-faint: #7d7d76;
    --sw-placeholder: #9a9a90;
    --sw-footer-bg: #f2f2ec;
    --sw-body: #33332e;
    --sw-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sw-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
    --sw-gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: var(--sw-font);
    background: var(--sw-paper);
    color: var(--sw-ink);
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }

/* Nav */
.lab-nav {
    position: sticky; top: 0; z-index: 50;
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: clamp(16px, 2vw, 30px); row-gap: 10px;
    padding: 14px var(--sw-gutter);
    border-bottom: 1px solid var(--sw-ink);
    background: var(--sw-paper);
}
.lab-brand { display: flex; align-items: baseline; gap: 6px; margin-right: auto; }
.lab-brand b { font: 800 18px var(--sw-font); letter-spacing: .02em; }
.lab-brand span { font: 600 12px var(--sw-font); color: var(--sw-accent); }
.lab-nav a.link { font: 500 13.5px var(--sw-font); }
.lab-nav a.cta {
    font: 600 13px var(--sw-font);
    background: var(--sw-ink); color: var(--sw-paper);
    padding: 12px 18px;
}
.lab-nav a.cta:hover { opacity: .8; }

/* Sections */
.sec {
    padding: clamp(48px, 5.5vw, 80px) var(--sw-gutter);
    border-bottom: 1px solid var(--sw-hairline);
}
.sec--rule { border-bottom: 1px solid var(--sw-ink); }
.sec--hero { padding: clamp(56px, 7vw, 96px) var(--sw-gutter) clamp(48px, 5vw, 72px); border-bottom: 1px solid var(--sw-ink); }
.sec--cta { padding: clamp(56px, 6.5vw, 96px) var(--sw-gutter); border-bottom: 1px solid var(--sw-ink); }

.kicker {
    font: 600 12px var(--sw-font); letter-spacing: .22em;
    text-transform: uppercase; color: var(--sw-faint); margin: 0 0 20px;
}
.kicker--accent { color: var(--sw-accent); }
.display {
    font: 700 clamp(42px, 6vw, 84px)/.98 var(--sw-font);
    letter-spacing: -.035em; margin: 0 0 clamp(22px, 2.5vw, 32px); max-width: 1000px;
}
.h2 {
    font: 700 clamp(28px, 2.9vw, 40px)/1.08 var(--sw-font);
    letter-spacing: -.025em; margin: 0 0 clamp(24px, 3vw, 40px);
}
.h2--xl { font-size: clamp(32px, 3.7vw, 52px); line-height: 1.05; letter-spacing: -.03em; max-width: 900px; margin-bottom: 20px; }
.body {
    font: 400 clamp(15.5px, 1.25vw, 17px)/1.65 var(--sw-font);
    color: var(--sw-body); margin: 0; text-wrap: pretty;
}
.body--muted { color: var(--sw-muted); }
.body--strong { font-weight: 700; color: var(--sw-ink); }
.fineprint { font: 400 12.5px/1.7 var(--sw-font); color: var(--sw-faint); letter-spacing: .01em; }
.arrow { font: 600 15px var(--sw-font); color: var(--sw-accent); }
.arrow:hover { color: var(--sw-accent); }
.btn {
    display: inline-block; background: var(--sw-ink); color: var(--sw-paper);
    font: 600 15px var(--sw-font); padding: 17px 26px; border: 0; cursor: pointer;
}
.btn:hover { opacity: .8; }
.btn--lg { font-size: 16px; padding: 18px 30px; }

.heading-row {
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: 12px; margin: 0 0 clamp(24px, 3vw, 40px);
}
.heading-row .h2 { margin-bottom: 0; }

.exhibit-tag {
    font: 700 13px var(--sw-font); color: var(--sw-accent);
    letter-spacing: .18em; text-transform: uppercase;
}

/* Demo panel chrome */
.panel {
    border: 1px solid var(--sw-ink);
    background: var(--sw-paper);
}
.panel__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-bottom: 1px solid var(--sw-ink);
    font: 600 11px var(--sw-font); letter-spacing: .18em; text-transform: uppercase; color: var(--sw-faint);
}
.panel__bar .status { color: var(--sw-accent); }
.panel__body { padding: clamp(20px, 2.5vw, 32px); }

/* Agentic search demo */
.query-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.query-input {
    flex: 1 1 340px;
    background: transparent; border: 0; border-bottom: 1px solid var(--sw-ink);
    font: 400 17px/1.4 var(--sw-font); color: var(--sw-ink);
    padding: 12px 0; outline: none;
}
.query-input:focus { border-bottom-color: var(--sw-accent); }
.query-input::placeholder { color: var(--sw-placeholder); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.chip {
    font: 500 13.5px var(--sw-font); padding: 9px 14px;
    border: 1px solid var(--sw-ink); background: transparent; color: var(--sw-ink);
    cursor: pointer;
}
.chip:hover { border-color: var(--sw-accent); }
.chip.selected { background: var(--sw-ink); color: var(--sw-paper); }

.stage { display: none; margin-top: 26px; }
.stage.visible { display: block; animation: fadeup .35s ease both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stage-label {
    font: 600 11px var(--sw-font); letter-spacing: .18em; text-transform: uppercase;
    color: var(--sw-faint); margin: 0 0 10px;
}
.stage-label .n { color: var(--sw-accent); }

.filter-table { width: 100%; border-collapse: collapse; }
.filter-table td {
    font: 400 14.5px/1.5 var(--sw-font); padding: 10px 14px 10px 0;
    border-top: 1px solid var(--sw-hairline); vertical-align: top;
}
.filter-table td:first-child { font-weight: 700; width: 32%; }
.filter-table td:last-child { color: var(--sw-muted); }
.filter-table tr:last-child td { border-bottom: 1px solid var(--sw-hairline); }

.code {
    font: 400 13px/1.6 var(--sw-mono);
    background: var(--sw-ink); color: #e8e8e2;
    padding: 18px 20px; overflow-x: auto; white-space: pre; margin: 0;
}
.code .k { color: #f2b8ab; }
.code .v { color: #a8c7a2; }

.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1px; background: var(--sw-hairline); border: 1px solid var(--sw-hairline); }
.result { background: var(--sw-paper); padding: 18px; }
.result .badge { font: 600 9.5px var(--sw-font); letter-spacing: .14em; color: var(--sw-placeholder); text-transform: uppercase; }
.result .name { font: 700 15px/1.3 var(--sw-font); margin: 8px 0 6px; }
.result .meta { font: 400 13px var(--sw-font); color: var(--sw-muted); }
.result .price { font: 700 16px var(--sw-font); margin-top: 10px; }
.result .stock { font: 500 11.5px var(--sw-font); color: var(--sw-accent); margin-top: 4px; }

/* Terminal replay */
.term {
    background: var(--sw-ink); color: #e8e8e2;
    font: 400 13.5px/1.75 var(--sw-mono);
    padding: clamp(18px, 2.5vw, 28px); min-height: 320px;
    overflow-x: auto;
}
.term .line { display: block; white-space: pre-wrap; }
.term .agent { color: #f2b8ab; }
.term .tool { color: #a8c7a2; }
.term .warn { color: #f5c97b; }
.term .dim { color: #8a8a82; }
.term .ok { color: #a8c7a2; }
.term .caret { display: inline-block; width: 8px; height: 15px; background: #e8e8e2; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Sample cards (MageIQ / StoreSignals) */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(24px, 3vw, 40px); }
.sample { border: 1px solid var(--sw-ink); }
.sample__body { padding: clamp(20px, 2.5vw, 28px); }
.sample__title { font: 700 20px var(--sw-font); margin: 0 0 4px; }
.sample__sub { font: 400 13.5px var(--sw-font); color: var(--sw-faint); margin: 0 0 20px; }
.bubble {
    border: 1px solid var(--sw-hairline); padding: 14px 16px; margin-bottom: 10px;
    font: 400 14px/1.6 var(--sw-font); color: var(--sw-body);
}
.bubble--me { border-color: var(--sw-ink); font-weight: 600; color: var(--sw-ink); }
.bubble .from { display: block; font: 600 10px var(--sw-font); letter-spacing: .16em; text-transform: uppercase; color: var(--sw-faint); margin-bottom: 6px; }
.alert-row { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--sw-hairline); font: 400 14px/1.55 var(--sw-font); color: var(--sw-body); }
.alert-row:last-child { border-bottom: 1px solid var(--sw-hairline); }
.alert-row .sev { flex-shrink: 0; font: 700 10.5px var(--sw-font); letter-spacing: .1em; padding: 3px 8px; height: fit-content; }
.sev--high { background: var(--sw-accent); color: var(--sw-paper); }
.sev--med { border: 1px solid var(--sw-ink); }
.sev--info { border: 1px solid var(--sw-hairline); color: var(--sw-faint); }

/* Built strip */
.spec-row {
    display: grid; grid-template-columns: minmax(150px, 290px) 1fr; column-gap: 20px;
    border-top: 1px solid var(--sw-hairline);
}
.spec-row:first-of-type { border-top: 1px solid var(--sw-ink); }
.spec-row:last-of-type { border-bottom: 1px solid var(--sw-ink); }
.spec-row .l { font: 700 15px/1.45 var(--sw-font); padding: 18px 0; }
.spec-row .r { font: 400 15px/1.6 var(--sw-font); color: var(--sw-muted); padding: 18px 0; }
.spec-row .r a { font-weight: 600; color: var(--sw-accent); }
@media (max-width: 575.98px) {
    .spec-row { grid-template-columns: 1fr; }
    .spec-row .l { padding-bottom: 2px; }
    .spec-row .r { padding-top: 0; }
}

/* Footer */
.lab-footer {
    background: var(--sw-footer-bg);
    padding: clamp(32px, 4vw, 48px) var(--sw-gutter);
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 14px;
}
.lab-footer .links { display: flex; flex-wrap: wrap; gap: 20px; font: 400 13.5px var(--sw-font); }
.lab-footer .legal { font: 400 12px var(--sw-font); color: var(--sw-placeholder); }