/* Cendro marketing — product mocks, app-frame chrome and diagram styles.
   Brand: navy #00053c, blue #2b8ffe, sky #0fb7fe, deep #005dd6.
   Everything here is illustrative UI built in HTML/CSS/SVG; real screenshots
   drop into the same .app-frame via the app_frame(src=...) macro. */

/* ── App frame (browser-window chrome) ─────────────────────────────────────── */
.app-frame {
    margin: 0;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid rgba(0, 5, 60, 0.08);
    background: #fff;
    box-shadow: 0 24px 60px -20px rgba(0, 5, 60, 0.25), 0 8px 24px -12px rgba(0, 5, 60, 0.15);
}
.app-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    background: #f3f6fb;
    border-bottom: 1px solid rgba(0, 5, 60, 0.06);
}
.app-frame-bar i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 5, 60, 0.12);
}
.app-frame-bar i:nth-child(1) { background: #fca5a5; }
.app-frame-bar i:nth-child(2) { background: #fcd34d; }
.app-frame-bar i:nth-child(3) { background: #86efac; }
.app-frame-url {
    margin-left: 10px;
    flex: 1;
    max-width: 320px;
    height: 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(0, 5, 60, 0.08);
    font-size: 10px;
    line-height: 16px;
    color: rgba(0, 5, 60, 0.4);
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
}
.app-frame-body { position: relative; background: #fff; }
.app-frame-body > img { display: block; width: 100%; height: auto; }
.app-frame-caption {
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(0, 5, 60, 0.45);
}
/* Hero variant: brand glow behind the frame */
.app-frame-hero {
    position: relative;
}
.app-frame-hero::before {
    content: "";
    position: absolute;
    inset: 8% 6% -6% 6%;
    z-index: -1;
    border-radius: 2rem;
    background: linear-gradient(135deg, rgba(15,183,254,.35), rgba(43,143,254,.25) 45%, rgba(0,93,214,.2));
    filter: blur(40px);
}

/* ── Shared mock primitives ────────────────────────────────────────────────── */
.mock { font-family: Poppins, system-ui, sans-serif; color: #00053c; user-select: none; }
.mock-bar { height: 8px; border-radius: 999px; background: rgba(0, 5, 60, 0.1); }
.mock-bar.sm { height: 6px; }
.mock-bar.lg { height: 10px; }
.mock-bar.w40 { width: 40%; } .mock-bar.w55 { width: 55%; } .mock-bar.w70 { width: 70%; } .mock-bar.w85 { width: 85%; }
.mock-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 600; line-height: 1.4;
    background: rgba(43, 143, 254, 0.1); color: #005dd6;
}
.mock-pill.ok { background: rgba(16, 185, 129, 0.12); color: #047857; }
.mock-pill.warn { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.mock-pill.muted { background: rgba(0, 5, 60, 0.06); color: rgba(0, 5, 60, 0.55); }

/* ── Simple "coming soon" placeholder ──────────────────────────────────────── */
.mock-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    min-height: 420px;
    background:
        linear-gradient(180deg, rgba(15,183,254,0.06), rgba(43,143,254,0.02)),
        repeating-linear-gradient(45deg, rgba(0,5,60,0.025) 0 10px, transparent 10px 20px);
    color: rgba(0, 5, 60, 0.45);
}
.mock-placeholder svg { width: 40px; height: 40px; color: #2b8ffe; }
.mock-placeholder p { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 640px) { .mock-placeholder { min-height: 220px; } }

/* ── Dashboard mock (Archive heatmap) ──────────────────────────────────────── */
.mock-dash { display: flex; min-height: 420px; }
.mock-side {
    width: 168px; flex: none;
    padding: 16px 12px;
    background: #f7f9fc;
    border-right: 1px solid rgba(0, 5, 60, 0.06);
}
.mock-side .mock-logo {
    height: 18px; width: 90px; border-radius: 4px;
    background: linear-gradient(135deg, #0fb7fe, #2b8ffe 45%, #005dd6);
    margin-bottom: 18px;
}
.mock-nav { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; margin-bottom: 4px; }
.mock-nav i { width: 12px; height: 12px; border-radius: 3px; background: rgba(0, 5, 60, 0.15); flex: none; }
.mock-nav b { display: block; height: 7px; border-radius: 999px; background: rgba(0, 5, 60, 0.15); }
.mock-nav.active { background: rgba(43, 143, 254, 0.12); }
.mock-nav.active i, .mock-nav.active b { background: #2b8ffe; }
.mock-main { flex: 1; min-width: 0; padding: 18px 20px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mock-title { font-size: 13px; font-weight: 600; }
.mock-sub { font-size: 10px; color: rgba(0, 5, 60, 0.5); margin-top: 2px; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-stat { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0, 5, 60, 0.07); background: #fff; }
.mock-stat small { display: block; font-size: 9px; color: rgba(0, 5, 60, 0.5); }
.mock-stat strong { display: block; font-size: 15px; font-weight: 700; margin-top: 2px; }
.mock-stat strong.blue { color: #005dd6; }
.mock-panel { border: 1px solid rgba(0, 5, 60, 0.07); border-radius: 12px; padding: 12px; background: #fff; }
.mock-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 11px; font-weight: 600; }
.mock-legend { display: flex; align-items: center; gap: 6px; font-size: 9px; color: rgba(0, 5, 60, 0.5); }
.mock-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.heat { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; }
.heat i { display: block; aspect-ratio: 1 / 1; border-radius: 2px; }
.heat .h0 { background: #e8f3ff; }
.heat .h1 { background: #bfe0ff; }
.heat .h2 { background: #7fc0ff; }
.heat .h3 { background: #2b8ffe; }
.heat .h4 { background: #005dd6; }
.mock-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: rgba(0, 5, 60, 0.4); }

/* ── Search mock (Cloud) ───────────────────────────────────────────────────── */
.mock-search { padding: 18px 20px; min-height: 420px; }
.mock-searchbar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    border: 1px solid rgba(43, 143, 254, 0.5); background: #fff;
    box-shadow: 0 0 0 3px rgba(15, 183, 254, 0.15);
    font-size: 12px;
}
.mock-searchbar svg { width: 16px; height: 16px; color: #2b8ffe; flex: none; }
.mock-searchbar .caret { display: inline-block; width: 1px; height: 14px; background: #00053c; margin-left: 2px; animation: gfx-blink 1s steps(2) infinite; }
@keyframes gfx-blink { to { visibility: hidden; } }
.mock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; }
.mock-result {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px; border-radius: 12px;
    border: 1px solid rgba(0, 5, 60, 0.07); background: #fff; margin-bottom: 8px;
}
.mock-doc {
    width: 34px; height: 42px; flex: none; border-radius: 6px;
    background: linear-gradient(180deg, #fff, #f3f6fb);
    border: 1px solid rgba(0, 5, 60, 0.1); position: relative; overflow: hidden;
}
.mock-doc::before, .mock-doc::after {
    content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px;
    background: rgba(0, 5, 60, 0.12);
}
.mock-doc::before { top: 10px; } .mock-doc::after { top: 18px; right: 12px; }
.mock-result h6 { margin: 0; font-size: 12px; font-weight: 600; }
.mock-result p { margin: 4px 0 0; font-size: 10px; line-height: 1.5; color: rgba(0, 5, 60, 0.6); }
.mock-result mark { background: rgba(15, 183, 254, 0.3); color: inherit; border-radius: 3px; padding: 0 2px; }
.mock-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mock-result .score { margin-left: auto; flex: none; }

/* ── File explorer mock (stubs) ────────────────────────────────────────────── */
.mock-files { padding: 14px 16px; }
.mock-files-head, .mock-file {
    display: grid; grid-template-columns: 1fr 70px 160px; gap: 10px; align-items: center;
    padding: 8px 10px; font-size: 11px;
}
.mock-files-head { color: rgba(0, 5, 60, 0.45); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid rgba(0, 5, 60, 0.08); }
.mock-file { border-radius: 8px; }
.mock-file:nth-child(even) { background: #f7f9fc; }
.mock-file .name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mock-file .name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-file svg { width: 16px; height: 16px; flex: none; }
.mock-file .size { color: rgba(0, 5, 60, 0.5); font-size: 10px; }
.mock-file.stub .name span { color: rgba(0, 5, 60, 0.75); }

/* ── AI extraction mock ────────────────────────────────────────────────────── */
.mock-ai { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px; align-items: start; }
.mock-scan {
    aspect-ratio: 3 / 4; border-radius: 8px;
    background: #fff; border: 1px solid rgba(0, 5, 60, 0.12);
    box-shadow: 0 6px 16px -8px rgba(0, 5, 60, 0.25);
    padding: 14px 12px; position: relative; overflow: hidden;
    transform: rotate(-2deg);
}
.mock-scan .ln { height: 5px; border-radius: 3px; background: rgba(0, 5, 60, 0.12); margin-bottom: 9px; }
.mock-scan .hw { height: 7px; border-radius: 4px; background: rgba(0, 93, 214, 0.35); margin-bottom: 10px; transform: skewX(-12deg); }
.mock-scan .stamp {
    position: absolute; right: 10px; bottom: 12px;
    padding: 2px 6px; border: 1.5px solid rgba(43, 143, 254, 0.7); border-radius: 4px;
    color: #005dd6; font-size: 8px; font-weight: 700; letter-spacing: .08em; transform: rotate(-8deg);
}
.mock-fields { display: grid; gap: 8px; }
.mock-field {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(0, 5, 60, 0.07); background: #fff; font-size: 11px;
}
.mock-field small { color: rgba(0, 5, 60, 0.5); font-size: 9px; display: block; }
.mock-field b { font-weight: 600; }
.mock-field svg { width: 14px; height: 14px; color: #10b981; flex: none; }

/* ── Compact card thumbnails (scaled mocks) ────────────────────────────────── */
.mock-thumb { position: relative; overflow: hidden; border-radius: 0.75rem; border: 1px solid rgba(0, 5, 60, 0.08); background: #fff; aspect-ratio: 16 / 9; }
.mock-thumb-inner { position: absolute; top: 0; left: 0; width: 200%; transform: scale(0.5); transform-origin: top left; }
.mock-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ── Diagrams ──────────────────────────────────────────────────────────────── */
.gfx-diagram { width: 100%; height: auto; display: block; }
.gfx-diagram text { font-family: Poppins, system-ui, sans-serif; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mock-side { display: none; }
    .mock-dash, .mock-search { min-height: 0; }
    .mock-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .mock-stat strong { font-size: 12px; }
    .mock-ai { grid-template-columns: 110px 1fr; }
    .mock-files-head, .mock-file { grid-template-columns: 1fr 150px; }
    .mock-files-head span:nth-child(2), .mock-file .size { display: none; }
}