/* =====================================================================================================================
   owns.ai  -  DEMOS: the /demos admin page and the /claim/<token> page (js/demos.js)

   Built on the shell's tokens (--surface, --text, --border...) and components (.card, .kpi, .table, .badge, .tabs), so
   both themes and the Velocity layer (design.css) apply as everywhere else. The demo itself, at <business>.owns.ai,
   carries its own styles (content/demo/page.inc).

   Coded By Darko G.
   ===================================================================================================================== */

/* ---- /demos -------------------------------------------------------------------------------------------------------- */

.dm-head-actions { gap: 8px; flex-wrap: wrap; }
.dm-h { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.dm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dm-ok { color: var(--success); }
.dm-bad, .dm-warn { color: var(--danger); }

.dm-runner { border-left: 3px solid var(--border-strong); }
.dm-runner.is-running { border-left-color: var(--success); }
.dm-runner.is-stopping { border-left-color: var(--warning); }
.dm-runner-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; }
.dm-state { font-weight: 700; font-size: 1.02rem; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.dm-runner.is-running .dm-state i { color: var(--success); }
.dm-runner.is-stopping .dm-state i { color: var(--warning); }

.dm-bar { height: 8px; margin-top: 6px; }
.dm-progress:empty { display: none; }

.dm-now { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.dm-now-card b { color: var(--text); }
.dm-log { list-style: none; margin: 10px 0 0; padding: 0; font: .78rem/1.45 var(--font-mono); color: var(--text-2); max-height: 150px; overflow: auto; }
.dm-log li { display: flex; gap: 8px; padding: 1px 0; }
.dm-log li span { color: var(--faint); flex: none; }
.dm-log li.is-warn { color: var(--warning); }
.dm-log li.is-error { color: var(--danger); }
.dm-log li.is-ok { color: var(--success); }
.dm-log-full { max-height: 55vh; }

.dm-checks { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dm-checks li { display: flex; gap: 10px; align-items: flex-start; }
.dm-checks li > i { margin-top: 3px; font-size: 1.05rem; }
.dm-checks code, .dm-hosting code { word-break: break-all; }

.dm-fields { display: grid; gap: 4px; margin-bottom: 8px; }
.dm-fields .input { max-width: 160px; }

.dm-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.dm-tabs { flex-wrap: wrap; border-bottom: 0; margin: 0; }
.dm-count { font-size: .75em; opacity: .7; margin-left: 2px; }
.dm-search { position: relative; flex: 1 1 240px; max-width: 340px; }
.dm-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.dm-search .input { padding-left: 36px; width: 100%; }

.dm-table td { vertical-align: top; }
.dm-name { color: var(--text); }
.dm-learned { color: var(--text-2); }
.dm-star { color: #F5B301; font-size: .8em; }
.dm-sub code { font-size: .82rem; }
.dm-acts { display: inline-flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.dm-act { min-height: 30px; padding: 4px 9px; }
.dm-pager { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
.dm-pager .row { gap: 6px; }

.dm-steps { margin: 10px 0 14px; padding-left: 20px; display: grid; gap: 4px; color: var(--text-2); }
.dm-steps code, .dm-notes code { word-break: break-all; }
.dm-notes { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); }

.dm-sync-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dm-sync-stats > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.dm-sync-stats b { font-size: 1.15rem; color: var(--text); }
.dm-sync-stats b.dm-warn { color: var(--danger); }
.dm-sync-stats span { font-size: .75rem; color: var(--muted); }
.dm-files { border-top: 1px solid var(--border); padding-top: 12px; }
.dm-files summary { cursor: pointer; }
.dm-live.is-on { color: var(--success); }
.dm-live.is-claimed { color: var(--brand); font-weight: 600; }
@media (max-width: 720px) { .dm-sync-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dm-reasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dm-reason { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); }
.dm-reason b { font-size: 1.2rem; color: var(--text); }
.dm-reason span { font-weight: 600; color: var(--text-2); }

@media (max-width: 720px) {
    .dm-table thead { display: none; }
    .dm-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
    .dm-table td { display: block; border: 0; padding: 3px 14px; }
    .dm-table td.num { text-align: left; }
    .dm-acts { justify-content: flex-start; }
    .dm-search { max-width: none; }
}


/* ---- /claim/<token> ------------------------------------------------------------------------------------------------- */

.cl-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.cl-title { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -.035em; margin: 12px 0 14px; }
.cl-perks { list-style: none; padding: 0; margin: 18px 0 24px; display: flex; flex-direction: column; gap: 9px; }
.cl-perks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); }
.cl-perks i { color: var(--accent-text); margin-top: 4px; }
.cl-actions .alert { margin: 0; }
.cl-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-done h3 { display: flex; align-items: center; gap: 8px; }
.cl-done h3 i { color: var(--success); }
.cl-missing { max-width: 620px; margin: 0 auto; }
.cl-skel-stage { height: 420px; }

.cl-shot { display: block; border-radius: 18px; overflow: hidden; background: var(--surface); border: 0; box-shadow: var(--shadow-lg), var(--ring); text-decoration: none; color: inherit; }
.cl-bar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cl-lights { display: flex; gap: 7px; flex: none; }
.cl-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.cl-lights i:nth-child(2) { background: #FEBC2E; }
.cl-lights i:nth-child(3) { background: #28C840; }
.cl-url { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--tile); color: var(--text-2); font-size: .85rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cl-url i { color: var(--success); font-size: .78rem; }
.cl-view { position: relative; display: block; aspect-ratio: 1366 / 900; background: var(--surface-3); }
.cl-view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cl-try { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; color: #fff;
          background: var(--accent); box-shadow: var(--shadow); }
.cl-shot:hover .cl-try, .cl-shot:focus-visible .cl-try { filter: brightness(1.08); }

/* The claim form (signed out): a free account and the claim in one go. */
.cl-form { margin-top: 22px; }
.cl-form-head { margin-bottom: 16px; }
.cl-form-head h2 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin: 0 0 6px; }
.cl-form-head h2 i { color: var(--brand); }
.cl-form .pw-wrap .input { padding-right: 46px; }
.cl-form .auth-consent { margin: 12px 0 8px; }
.cl-actions { margin-top: 22px; }

/* What the Free plan gives them. */
.cl-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cl-free-head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.cl-free-head h2 { font-size: 1.15rem; margin: 0 0 3px; }
.cl-free-price { flex: none; display: grid; place-content: center; text-align: center; width: 76px; height: 76px; border-radius: 50%; color: #fff; line-height: 1;
                 background: var(--accent); }
.cl-free-price b { font: 800 1.6rem var(--font-display); }
.cl-free-price small { font-size: .62rem; font-weight: 600; opacity: .9; margin-top: 4px; }
.cl-free-h { font-size: 13px; font-weight: 700; letter-spacing: -.005em; color: var(--brand); margin: 16px 0 8px; }
.cl-free .cl-perks { margin: 0; }
.cl-free-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 18px; font-size: .9rem; color: var(--text-2); }
.cl-free-list li { display: flex; gap: 8px; align-items: flex-start; }
.cl-free-list i { color: var(--accent-text); margin-top: 4px; font-size: .8rem; }
.cl-free-up { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: var(--r); background: var(--accent-soft); color: var(--text-2); }
.cl-free-up > i { color: var(--brand); margin-top: 3px; }

/* A build form, for a business whose assistant is already built (shared/js/core.js OA.claim): the assistant itself,
   to claim or preview, where the website box was. */
.cl-built { --demo: var(--accent); display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: var(--r-lg); color: var(--text); text-align: left;
            background: var(--bg); border: 0; box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.cl-built-av { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 1.3rem; background: var(--demo); }
.cl-built-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-built-txt small { font-size: .7rem; font-weight: 700; letter-spacing: -.005em; color: var(--brand); }
.cl-built-txt b { font: 800 1.08rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-built-txt > span { font-size: .84rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-built-ok { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: .74rem; font-weight: 700;
               color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.cl-built-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.mk-build-center .cl-built-btns { justify-content: center; }
.cl-built-btns .btn { flex: 1 1 auto; }

@media (max-width: 900px) {
    .cl-grid { grid-template-columns: 1fr; gap: 28px; }
    .cl-skel-stage { height: 260px; }
}
@media (max-width: 560px) {
    .cl-free-list { grid-template-columns: 1fr; }
    .cl-free-head { align-items: flex-start; }
    .cl-free-price { width: 64px; height: 64px; }
    .cl-built { flex-wrap: wrap; }
    .cl-built-ok { display: none; }
    .cl-built-btns .btn { flex-basis: 100%; }
}
.dm-email a { word-break: break-all; }