/* CrossCheck demo. Every rule sits under .demo-scope and targets the CrossCheck frame
   only, so it cannot restyle the page around it or another product's demo. The palette
   is CrossCheck's own: navy #102a4f / #0c1f3d and brand teal #1797b3 / #0d7d90. */

.demo-scope .app[data-app="check"] { height: 660px; grid-template-columns: 214px 1fr; font-size: 13px; color: #16203a; }
.demo-scope .cc-app .app-hd { background: #0c1f3d; }
.demo-scope .cc-app .cc-menu { display: none; font: inherit; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.demo-scope .cc-app .app-nav { background: #0c1f3d; overflow-y: auto; padding: 10px 8px 12px; }
.demo-scope .cc-app .app-nav .an-item { padding: 5px 10px; font-weight: 550; color: #cbd5e1; }
.demo-scope .cc-app .app-nav .an-item.sel { background: rgba(23,151,179,.22); color: #fff; }
.demo-scope .cc-app .app-nav .an-item.sel svg { color: #5cc8dd; }
.demo-scope .cc-app .app-nav .an-item.cc-inert { color: #8a9bb8; cursor: default; }
.demo-scope .cc-app .app-nav .an-item.cc-inert:hover { background: rgba(255,255,255,.04); color: #8a9bb8; }
.demo-scope .cc-app .app-nav .an-kid { padding: 3px 10px 3px 12px; font-size: 12px; font-weight: 500; }
.demo-scope .cc-app .app-nav .an-kids { margin-left: 18px; border-left: 1px solid rgba(255,255,255,.12); padding-left: 4px; }
.demo-scope .cc-app .app-nav .an-det summary { cursor: pointer; list-style: none; }
.demo-scope .cc-app .app-nav .an-det summary::-webkit-details-marker { display: none; }
.demo-scope .cc-app .app-nav .an-det summary::after { content: "+"; float: right; font-size: 11px; color: #8a9bb8; }
.demo-scope .cc-app .app-nav .an-det[open] summary::after { content: "\2212"; }
.demo-scope .cc-app .app-nav .an-grp { color: #94a3b8; padding: 10px 10px 3px; }
.demo-scope .cc-app .app-nav .an-foot { display: flex; gap: 6px; align-items: center; margin: 14px 10px 0; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); font-size: 11px; color: #94a3b8; }
.demo-scope .cc-app .app-nav .an-foot svg { color: #5cc8dd; }
.demo-scope .cc-app .app-main { background: #f3f5f8; padding: 16px 18px 0; position: relative; }
.demo-scope .app.cc-app[data-app="check"] .app-main { scroll-behavior: auto; }
.demo-scope .cc-app .cc-envnav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 5px 10px; }
.demo-scope .cc-app .cc-envnav .cc-label { margin-right: 6px; }
.demo-scope .cc-app .cc-envnav .cc-lnk { text-decoration: none; font-weight: 600; border-radius: 6px; padding: 3px 7px; }
.demo-scope .cc-app .cc-envnav .cc-lnk.on { background: #e7f5f8; color: #0d7d90; }
.demo-scope .cc-app .app-main:focus { outline: none; }
.demo-scope .cc-app .app-main:focus-visible { outline: 2px solid #1797b3; outline-offset: -2px; }

/* tones: text, background, line, solid */
.demo-scope .cc-app .t-emerald { --tc: #047857; --tb: #ecfdf5; --tl: #a7f3d0; --ts: #10b981; color: var(--tc); }
.demo-scope .cc-app .t-amber { --tc: #b45309; --tb: #fffbeb; --tl: #fde68a; --ts: #f59e0b; color: var(--tc); }
.demo-scope .cc-app .t-rose { --tc: #be123c; --tb: #fff1f2; --tl: #fecdd3; --ts: #f43f5e; color: var(--tc); }
.demo-scope .cc-app .t-orange { --tc: #c2410c; --tb: #fff7ed; --tl: #fed7aa; --ts: #f97316; color: var(--tc); }
.demo-scope .cc-app .t-sky { --tc: #0369a1; --tb: #f0f9ff; --tl: #bae6fd; --ts: #0ea5e9; color: var(--tc); }
.demo-scope .cc-app .t-teal { --tc: #0f766e; --tb: #f0fdfa; --tl: #99f6e4; --ts: #14b8a6; color: var(--tc); }
.demo-scope .cc-app .t-slate { --tc: #475569; --tb: #f8fafc; --tl: #e2e8f0; --ts: #94a3b8; color: var(--tc); }
.demo-scope .cc-app .t-rose-bg { background: #fff1f2; }

.demo-scope .cc-app .cc-i { width: 15px; height: 15px; flex: none; display: inline-block; vertical-align: -3px; }
.demo-scope .cc-app .cc-page { max-width: 880px; margin: 0 auto; padding-bottom: 18px; }
.demo-scope .cc-app .cc-page > * + * { margin-top: 12px; }
.demo-scope .cc-app p { margin: 0; color: inherit; font-size: 13px; line-height: 1.5; }
.demo-scope .cc-app p + p { margin-top: 5px; }
.demo-scope .cc-app .cc-h1 { font-size: 19px; font-weight: 700; color: #102a4f; margin: 0; letter-spacing: -.01em; }
.demo-scope .cc-app .cc-h2 { font-size: 15px; font-weight: 700; color: #102a4f; margin: 0 0 4px; }
.demo-scope .cc-app .cc-kicker, .demo-scope .cc-app .cc-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: #64748b; margin: 0; }
.demo-scope .cc-app .cc-muted { color: #5b6679; }
.demo-scope .cc-app .cc-small { font-size: 11.5px; }
.demo-scope .cc-app .cc-mono { font-family: var(--mono); font-size: 12px; }
.demo-scope .cc-app .cc-block { display: block; }
.demo-scope .cc-app .cc-right { margin-left: auto; }
.demo-scope .cc-app .cc-center { text-align: center; }
.demo-scope .cc-app .cc-brand { color: #0d7d90; font-weight: 600; }
.demo-scope .cc-app .cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.demo-scope .cc-app .cc-grow { flex: 1 1 200px; }
.demo-scope .cc-app .cc-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-scope .cc-app .cc-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.demo-scope .cc-app .cc-card, .demo-scope .cc-app .cc-hero { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(16,42,79,.05); }
.demo-scope .cc-app .cc-hero { background: #f4fafc; border-color: #cfe7ee; }
.demo-scope .cc-app .cc-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 650; color: #102a4f; margin: 0 0 6px; }
.demo-scope .cc-app summary.cc-card-h { cursor: pointer; margin: 0; }
.demo-scope .cc-app details[open] > summary.cc-card-h { margin-bottom: 8px; }
.demo-scope .cc-app .cc-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; line-height: 1.3; padding: 1px 7px; border-radius: 999px; background: var(--tb, #f8fafc); border: 1px solid var(--tl, #e2e8f0); color: var(--tc, #475569); white-space: nowrap; }
.demo-scope .cc-app .cc-caps { text-transform: uppercase; letter-spacing: .04em; font-size: 10px; }
.demo-scope .cc-app .cc-chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 5px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569; margin: 1px 0; }
.demo-scope .cc-app .cc-box { background: var(--tb, #f8fafc); border: 1px solid var(--tl, #e2e8f0); border-radius: 9px; padding: 9px 11px; }
.demo-scope .cc-app .cc-box ul { margin: 4px 0 0; padding-left: 18px; }
.demo-scope .cc-app .cc-note { font-size: 12px; color: #0369a1; background: #f0f9ff; border: 1px dashed #bae6fd; border-radius: 8px; padding: 7px 10px; }
.demo-scope .cc-app .cc-msg { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; border-radius: 9px; padding: 8px 11px; }
.demo-scope .cc-app .cc-err { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; border-radius: 9px; padding: 8px 11px; }
.demo-scope .cc-app .cc-sample-n { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; border-radius: 10px; padding: 8px 11px; font-size: 12.5px; }
.demo-scope .cc-app .cc-sample-n b { text-transform: uppercase; letter-spacing: .04em; }
.demo-scope .cc-app .cc-dots { margin: 4px 0 0; padding-left: 17px; }
.demo-scope .cc-app .cc-dots li, .demo-scope .cc-app .cc-ol li { margin: 2px 0; }
.demo-scope .cc-app .cc-ol { margin: 6px 0; padding-left: 20px; }
.demo-scope .cc-app ul { list-style-position: outside; }
.demo-scope .cc-app code { font-family: var(--mono); font-size: 11.5px; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; padding: 0 4px; }

/* buttons and inputs */
.demo-scope .cc-app .cc-btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; color: #334155; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.demo-scope .cc-app .cc-btn:hover { background: #f8fafc; border-color: #94a3b8; }
.demo-scope .cc-app .cc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.demo-scope .cc-app .cc-btn-brand { background: #1797b3; border-color: #1797b3; color: #fff; }
.demo-scope .cc-app .cc-btn-brand:hover { background: #0d7d90; border-color: #0d7d90; }
.demo-scope .cc-app .cc-btn-go { background: #102a4f; border-color: #102a4f; color: #fff; }
.demo-scope .cc-app .cc-btn-go:hover { background: #0d7d90; border-color: #0d7d90; }
.demo-scope .cc-app .cc-btn-big { width: 100%; justify-content: center; font-size: 15px; padding: 12px; margin-top: 14px; border-radius: 11px; }
.demo-scope .cc-app .cc-btn-sm { font-size: 11.5px; padding: 3px 9px; }
.demo-scope .cc-app .cc-bad { color: #be123c; border-color: #fecdd3; }
.demo-scope .cc-app .cc-warn { color: #b45309; border-color: #fcd34d; }
.demo-scope .cc-app .cc-lnk { font: inherit; font-size: 12px; background: none; border: 0; color: #0d7d90; text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.demo-scope .cc-app .cc-in { width: 100%; font: inherit; font-size: 13px; color: #16203a; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 10px; margin-top: 3px; box-sizing: border-box; }
.demo-scope .cc-app .cc-in[readonly] { background: #f8fafc; color: #475569; }
.demo-scope .cc-app textarea.cc-in { resize: vertical; }
.demo-scope .cc-app .cc-lab { display: block; font-size: 12px; font-weight: 550; color: #475569; }
.demo-scope .cc-app .cc-help { font-size: 11.5px; color: #5b6679; margin-top: 4px; }
.demo-scope .cc-app .cc-reqd { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #be123c; }
.demo-scope .cc-app .cc-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #1797b3; color: #fff; font-size: 11.5px; font-weight: 700; flex: none; }
.demo-scope .cc-app .cc-num-m { background: #e2e8f0; color: #334155; }
.demo-scope .cc-app :focus-visible { outline: 2px solid #1797b3; outline-offset: 2px; }

/* Start a check */
.demo-scope .cc-app .cc-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.demo-scope .cc-app .cc-way { font: inherit; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; cursor: pointer; display: block; }
.demo-scope .cc-app .cc-way b { display: block; font-size: 12.5px; }
.demo-scope .cc-app .cc-way span { display: block; font-size: 11.5px; color: #475569; margin-top: 2px; }
.demo-scope .cc-app .cc-way.on { border-color: #1797b3; background: #eef8fb; box-shadow: 0 0 0 1px rgba(23,151,179,.4); }
.demo-scope .cc-app .cc-wayw { margin-top: 12px; }
.demo-scope .cc-app .cc-wayp { border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px; background: #fff; color: #334155; }
.demo-scope .cc-app .cc-wayp.cc-best { border: 2px solid rgba(23,151,179,.3); background: #f4fafc; }
.demo-scope .cc-app .cc-wayp > * + * { margin-top: 8px; }
.demo-scope .cc-app .cc-wayp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #102a4f; }
.demo-scope .cc-app .cc-step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 650; color: #102a4f; }
.demo-scope .cc-app .cc-step > * + * { margin-top: 5px; }
.demo-scope .cc-app .cc-cred { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 9px 10px; margin-top: 6px; }
.demo-scope .cc-app .cc-cred-r { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 6px; font-size: 12px; }
.demo-scope .cc-app .cc-busy { display: flex; align-items: center; gap: 8px; color: #0369a1; }
.demo-scope .cc-app .cc-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #bae6fd; border-top-color: #0369a1; animation: ccspin .8s linear infinite; }
@keyframes ccspin { to { transform: rotate(360deg); } }
.demo-scope .cc-app .cc-found { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.demo-scope .cc-app .cc-found > * + * { margin-top: 7px; }
.demo-scope .cc-app .cc-found ul { list-style: none; padding: 0; margin: 6px 0; }
.demo-scope .cc-app .cc-found li label { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
.demo-scope .cc-app .cc-pre, .demo-scope .cc-app .cc-cli { font-family: var(--mono); font-size: 11px; line-height: 1.55; white-space: pre; overflow-x: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; margin: 6px 0 0; }
.demo-scope .cc-app .cc-cli { background: #0f172a; color: #e2e8f0; border-color: #0f172a; }
.demo-scope .cc-app .cc-det summary, .demo-scope .cc-app .cc-cfg summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: #334155; }
.demo-scope .cc-app .cc-dev { background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 12px; margin-top: 7px; }
.demo-scope .cc-app .cc-dev-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.demo-scope .cc-app .cc-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.demo-scope .cc-app .cc-edit { margin-top: 9px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; }
.demo-scope .cc-app .cc-edit > * + * { margin-top: 8px; }
.demo-scope .cc-app .cc-adv { background: var(--tb); border: 1px solid var(--tl); border-radius: 8px; padding: 8px 10px; color: #334155; }
.demo-scope .cc-app .cc-adv-h { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-weight: 650; color: var(--tc); }
.demo-scope .cc-app .cc-adv-h span { font-weight: 400; color: #5b6679; }
.demo-scope .cc-app .cc-adv ul { margin: 5px 0 0; padding-left: 18px; }
.demo-scope .cc-app .cc-adv-s { color: var(--tc); margin-top: 5px; }
.demo-scope .cc-app .cc-src { font-size: 10.5px; color: #64748b; word-break: break-word; }
.demo-scope .cc-app .cc-sticky { position: sticky; bottom: 0; z-index: 3; background: rgba(255,255,255,.97); border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; margin: 14px -4px 0; box-shadow: 0 -6px 18px rgba(16,42,79,.07); }
.demo-scope .cc-app .cc-sticky-t { font-size: 12px; margin-bottom: 6px; color: #334155; }
.demo-scope .cc-app .cc-sticky .cc-row { align-items: flex-end; }

/* console */
.demo-scope .cc-app .cc-hud-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.demo-scope .cc-app .cc-ceil { text-align: right; }
.demo-scope .cc-app .cc-ceil b { display: block; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.demo-scope .cc-app .cc-hud > .cc-box, .demo-scope .cc-app .cc-sub { margin-top: 12px; }
.demo-scope .cc-app .cc-sub { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 11px; }
.demo-scope .cc-app .cc-sub-h { font-weight: 650; color: #102a4f; margin: 10px 0 4px; }
.demo-scope .cc-app .cc-sub .cc-sub-h { margin-top: 0; }
.demo-scope .cc-app .cc-wanted, .demo-scope .cc-app .cc-gaps, .demo-scope .cc-app .cc-wl, .demo-scope .cc-app .cc-plan, .demo-scope .cc-app .cc-envl { list-style: none; padding: 0; margin: 6px 0 0; }
.demo-scope .cc-app .cc-wanted li, .demo-scope .cc-app .cc-plan li { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-size: 12.5px; }
.demo-scope .cc-app .cc-hold { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.demo-scope .cc-app .cc-gaps li + li { margin-top: 7px; }
.demo-scope .cc-app .cc-gaps li p { color: #334155; }
.demo-scope .cc-app .cc-wl { max-height: 260px; overflow-y: auto; }
.demo-scope .cc-app .cc-wl li { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 9px; margin: 5px 0; }
.demo-scope .cc-app .cc-wl li.rec { border-color: rgba(23,151,179,.35); background: #f4fafc; }
.demo-scope .cc-app .cc-box-ck { width: 14px; height: 14px; border: 1.5px solid #94a3b8; border-radius: 3px; flex: none; margin-top: 2px; }
.demo-scope .cc-app .cc-box-ck.on { background: #1797b3; border-color: #1797b3; }
.demo-scope .cc-app .cc-envl li { margin: 6px 0; }
.demo-scope .cc-app .cc-envl li span { display: block; font-size: 11.5px; color: #475569; }

/* the run */
.demo-scope .cc-app .cc-runbar { position: sticky; top: -16px; z-index: 4; margin: -16px -18px 0; padding: 0 18px; background: rgba(255,255,255,.98); border-bottom: 1px solid #e2e8f0; }
.demo-scope .cc-app .cc-runbar.done { position: static; }
.demo-scope .cc-app .cc-demo-ban { background: #fffbeb; border-bottom: 1px solid #fcd34d; margin: 0 -18px; padding: 7px 18px; color: #78350f; font-size: 12px; }
.demo-scope .cc-app .cc-demo-ban p { font-size: 12px; }
.demo-scope .cc-app .cc-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 7px 0; }
.demo-scope .cc-app .cc-ctl[hidden] { display: none; }
.demo-scope .cc-app .cc-dot { width: 8px; height: 8px; border-radius: 50%; background: #1797b3; animation: ccpulse 1.4s ease-in-out infinite; }
.demo-scope .cc-app .cc-dot.paused { background: #f59e0b; animation: none; }
@keyframes ccpulse { 50% { opacity: .35; } }
.demo-scope .cc-app .cc-pausenote { font-size: 12px; color: #92400e; padding: 0 0 8px; }
.demo-scope .cc-app .cc-pausenote[hidden] { display: none; }
.demo-scope .cc-app .cc-runp > .cc-h1 { margin-top: 14px; }
.demo-scope .cc-app .cc-scene { margin: 10px 0 0; background: #0c1f3d; border-radius: 11px; overflow: hidden; }
.demo-scope .cc-app .cc-scene-svg { display: block; width: 100%; height: auto; max-height: 170px; }
.demo-scope .cc-app .cc-scene .bus, .demo-scope .cc-app .cc-scene .link { stroke: rgba(148,163,184,.4); stroke-width: 1.5; }
.demo-scope .cc-app .cc-scene .hub { fill: #102a4f; stroke: #1797b3; }
.demo-scope .cc-app .cc-scene .hub-t { fill: #cbd5e1; font-size: 11px; text-anchor: middle; font-family: var(--sans); }
.demo-scope .cc-app .cc-scene .box { fill: #13305a; stroke: rgba(148,163,184,.5); transition: fill .2s, stroke .2s; }
.demo-scope .cc-app .cc-scene .n-id { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle; font-family: var(--sans); }
.demo-scope .cc-app .cc-scene .n-fw { fill: #94a3b8; font-size: 9px; text-anchor: middle; font-family: var(--mono); }
.demo-scope .cc-app .cc-scene .node.on .box { fill: #0d7d90; stroke: #5cc8dd; }
.demo-scope .cc-app .cc-scene .node.on .link { stroke: #5cc8dd; }
.demo-scope .cc-app .cc-scene .sweep { fill: rgba(92,200,221,.10); animation: ccsweep 2.4s linear infinite; }
@keyframes ccsweep { from { transform: translateX(-60px); } to { transform: translateX(620px); } }
.demo-scope .cc-app .cc-scene figcaption { border-top: 1px solid rgba(255,255,255,.1); padding: 5px 11px; font-size: 12px; color: #cbd5e1; }
.demo-scope .cc-app .cc-livescan { position: relative; height: 3px; border-radius: 3px; background: #e2e8f0; overflow: hidden; margin: 8px 0; }
.demo-scope .cc-app .cc-livescan::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, #1797b3, transparent); animation: ccscan 1.1s ease-in-out infinite; }
@keyframes ccscan { to { left: 100%; } }
.demo-scope .cc-app .cc-prog { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; background: #f8fafc; border-radius: 9px; padding: 9px 11px; }
.demo-scope .cc-app .cc-prog b { display: block; font-size: 12.5px; color: #16203a; margin-top: 2px; overflow-wrap: anywhere; }
.demo-scope .cc-app .cc-trace { margin-top: 12px; }
.demo-scope .cc-app .cc-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; margin-top: 8px; }
.demo-scope .cc-app .cc-sec > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; list-style: none; color: #102a4f; }
.demo-scope .cc-app .cc-sec > summary::-webkit-details-marker { display: none; }
.demo-scope .cc-app .cc-sec-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #e7f5f8; color: #0d7d90; font-weight: 700; }
.demo-scope .cc-app .cc-sec-t { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.demo-scope .cc-app .cc-steps { list-style: none; margin: 0; padding: 2px 12px 10px; }
.demo-scope .cc-app .cc-step-li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid #f1f5f9; animation: ccrise .4s cubic-bezier(.2,.7,.2,1) both; }
.demo-scope .cc-app .cc-step-li:first-child { border-top: 0; }
@keyframes ccrise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo-scope .cc-app .cc-st-i { flex: none; padding-top: 1px; }
.demo-scope .cc-app .cc-st-i .cc-i { width: 18px; height: 18px; }
.demo-scope .cc-app .cc-st-b { min-width: 0; flex: 1; }
.demo-scope .cc-app .cc-st-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #16203a; }
.demo-scope .cc-app .cc-st-l { font-size: 12px; color: #334155; margin-top: 2px; }
.demo-scope .cc-app .cc-st-l > span:first-child { color: #64748b; font-weight: 600; }
.demo-scope .cc-app .cc-st-f { font-size: 12.5px; }
.demo-scope .cc-app .cc-st-n { color: #0369a1; }
.demo-scope .cc-app .cc-st-g { color: #92400e; }
.demo-scope .cc-app .cc-src-b { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; padding: 1px 5px; }
.demo-scope .cc-app .cc-src-b.sample { background: #fef3c7; color: #92400e; }
.demo-scope .cc-app .cc-src-b.live { background: #d1fae5; color: #065f46; }
.demo-scope .cc-app .cc-src-b.feed { background: #e0f2fe; color: #075985; }
.demo-scope .cc-app .cc-how { margin-top: 6px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; }
.demo-scope .cc-app .cc-how > summary { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #475569; padding: 5px 9px; cursor: pointer; }
.demo-scope .cc-app .cc-how > div { padding: 2px 10px 10px; font-size: 12px; }
.demo-scope .cc-app .cc-how > div > * + * { margin-top: 6px; }
.demo-scope .cc-app .cc-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; }
.demo-scope .cc-app .cc-flow span { background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 2px 7px; }
.demo-scope .cc-app .cc-flow span.acc { border-color: #1797b3; color: #0d7d90; }
.demo-scope .cc-app .cc-flow span.good { border-color: #a7f3d0; color: #047857; background: #ecfdf5; }
.demo-scope .cc-app .cc-flow span.warn { border-color: #fde68a; color: #b45309; background: #fffbeb; }
.demo-scope .cc-app .cc-chev { width: 7px; height: 10px; color: #94a3b8; flex: none; }
.demo-scope .cc-app .cc-done { display: flex; align-items: center; gap: 6px; color: #047857; font-weight: 600; margin: 12px 0; }
.demo-scope .cc-app .cc-stopped { display: flex; gap: 10px; margin-top: 12px; color: #78350f; }
.demo-scope .cc-app .cc-stopped > div > * + * { margin-top: 6px; }

/* the verdict */
.demo-scope .cc-app .cc-v { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,42,79,.05); margin-top: 10px; }
.demo-scope .cc-app .cc-vhead { display: flex; gap: 18px; align-items: center; padding: 18px; border-bottom: 1px solid #f1f5f9; }
.demo-scope .cc-app .cc-gauge { position: relative; width: 118px; height: 118px; flex: none; }
.demo-scope .cc-app .cc-gauge svg { width: 118px; height: 118px; }
.demo-scope .cc-app .cc-gauge .bg { fill: none; stroke: #f1f5f9; }
.demo-scope .cc-app .cc-gauge .arc { fill: none; stroke: var(--ts); stroke-linecap: round; }
.demo-scope .cc-app .cc-gauge .tick { fill: #fff; stroke: #cbd5e1; stroke-width: 1.5; }
.demo-scope .cc-app .cc-g-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.demo-scope .cc-app .cc-g-n b { font-size: 30px; line-height: 1; color: #0f172a; }
.demo-scope .cc-app .cc-g-n span { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #94a3b8; margin-top: 3px; }
.demo-scope .cc-app .cc-vwhat { min-width: 0; flex: 1; }
.demo-scope .cc-app .cc-vwhat > * + * { margin-top: 4px; }
.demo-scope .cc-app .cc-band { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 22px; font-weight: 650; }
.demo-scope .cc-app .cc-band .cc-i { width: 22px; height: 22px; }
.demo-scope .cc-app .cc-fid { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5b6679; }
.demo-scope .cc-app .cc-fid-b { width: 110px; height: 6px; border-radius: 6px; background: #f1f5f9; overflow: hidden; }
.demo-scope .cc-app .cc-fid-b i { display: block; height: 100%; background: #94a3b8; }
.demo-scope .cc-app .cc-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 18px; background: var(--tb); border-bottom: 1px solid var(--tl); color: #1e293b; }
.demo-scope .cc-app .cc-strip > div { flex: 1 1 280px; min-width: 0; }
.demo-scope .cc-app .cc-strip b { color: var(--tc); }
.demo-scope .cc-app .cc-vs { padding: 14px 18px; border-top: 1px solid #f1f5f9; color: #334155; display: block; }
.demo-scope .cc-app .cc-vs > * + * { margin-top: 7px; }
.demo-scope .cc-app .cc-soft { background: #f8fafc; }
.demo-scope .cc-app .cc-sevbar { display: flex; height: 9px; border-radius: 9px; overflow: hidden; background: #e2e8f0; }
.demo-scope .cc-app .cc-sevbar span { display: block; height: 100%; background: var(--ts); }
.demo-scope .cc-app .cc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.demo-scope .cc-app .cc-fchip { font: inherit; font-size: 12px; font-weight: 550; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.demo-scope .cc-app .cc-fchip.on { border-color: #1797b3; color: #0d7d90; background: #eef8fb; }
.demo-scope .cc-app .cc-finds { list-style: none; margin: 0; padding: 0; }
.demo-scope .cc-app .cc-find { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid #f1f5f9; color: #334155; }
.demo-scope .cc-app .cc-find > div { min-width: 0; flex: 1; }
.demo-scope .cc-app .cc-find > div > * + * { margin-top: 6px; }
.demo-scope .cc-app .cc-find-i .cc-i { width: 18px; height: 18px; }
.demo-scope .cc-app .cc-find-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #1e293b; }
.demo-scope .cc-app .cc-dl { margin: 0; }
.demo-scope .cc-app .cc-dl div { margin: 3px 0; font-size: 12.5px; }
.demo-scope .cc-app .cc-dl dt { display: inline; font-weight: 600; color: #64748b; }
.demo-scope .cc-app .cc-dl dd { display: inline; margin: 0; }
.demo-scope .cc-app .cc-cfg { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; }
.demo-scope .cc-app .cc-cfg > * + * { margin-top: 6px; }
.demo-scope .cc-app .cc-map { background: #f8fafc; }
.demo-scope .cc-app .cc-flow-map span { background: #fff; }
.demo-scope .cc-app .cc-nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-scope .cc-app .cc-node { font: inherit; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; padding: 11px 12px; cursor: pointer; display: block; color: #334155; }
.demo-scope .cc-app .cc-node:hover { border-color: rgba(23,151,179,.5); }
.demo-scope .cc-app .cc-node > span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; }
.demo-scope .cc-app .cc-node > .cc-node-t { margin-top: 0; justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; }
.demo-scope .cc-app .cc-node > .cc-g2 { display: grid; border-top: 1px solid #f1f5f9; padding-top: 7px; }
.demo-scope .cc-app .cc-node-s { text-align: center; border: 1px solid var(--tl); background: var(--tb); border-radius: 8px; padding: 3px 8px; }
.demo-scope .cc-app .cc-node-s b { display: block; font-size: 18px; line-height: 1.1; }
.demo-scope .cc-app .cc-node-s span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.demo-scope .cc-app .cc-nodes > * { min-width: 0; }
.demo-scope .cc-app .cc-node { overflow-wrap: anywhere; }
.demo-scope .cc-app .cc-node-t > span:first-child { min-width: 0; }
.demo-scope .cc-app .cc-node-d { grid-column: 1 / -1; background: #fff; border: 1px solid rgba(23,151,179,.35); border-radius: 11px; padding: 11px 12px; }
.demo-scope .cc-app .cc-node-d > * + * { margin-top: 7px; }
.demo-scope .cc-app .cc-fails { list-style: none; padding: 0; margin: 0; }
.demo-scope .cc-app .cc-fails li + li { margin-top: 6px; }
.demo-scope .cc-app .cc-fails li p { color: #334155; }
.demo-scope .cc-app .cc-gear { background: linear-gradient(to bottom, var(--tb), #fff 70%); }
.demo-scope .cc-app .cc-imps, .demo-scope .cc-app .cc-fix, .demo-scope .cc-app .cc-rsteps, .demo-scope .cc-app .cc-results, .demo-scope .cc-app .cc-issues, .demo-scope .cc-app .cc-cov, .demo-scope .cc-app .cc-meth, .demo-scope .cc-app .cc-reqs { list-style: none; padding: 0; margin: 8px 0 0; }
.demo-scope .cc-app .cc-imps li { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-top: 7px; color: #334155; }
.demo-scope .cc-app .cc-fix li { display: flex; gap: 9px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 11px; margin-top: 7px; }
.demo-scope .cc-app .cc-fix li.zero { border-color: #cbd5e1; }
.demo-scope .cc-app .cc-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; background: #1e293b; color: #fff; font-size: 11px; font-weight: 700; flex: none; margin-right: 6px; }
.demo-scope .cc-app .cc-roll > summary { cursor: pointer; }
.demo-scope .cc-app .cc-rsteps > li { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.demo-scope .cc-app .cc-rsteps > li > * + * { margin-top: 6px; }
.demo-scope .cc-app .cc-rsteps .cc-box { color: #334155; }
.demo-scope .cc-app .cc-next { display: flex; gap: 9px; width: 100%; font: inherit; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; padding: 10px 12px; cursor: pointer; color: #1e293b; margin-top: 6px; }
.demo-scope .cc-app .cc-next.rel { border-color: rgba(23,151,179,.45); background: #f4fafc; }
.demo-scope .cc-app .cc-next-i { width: 30px; height: 30px; border-radius: 8px; background: #1797b3; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.demo-scope .cc-app .cc-envbtns { margin-top: 10px; }
.demo-scope .cc-app .cc-ledger { margin: 8px 0 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; overflow: hidden; }
.demo-scope .cc-app .cc-ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid #f1f5f9; align-items: baseline; }
.demo-scope .cc-app .cc-ledger > div:first-child { border-top: 0; }
.demo-scope .cc-app .cc-ledger dt { min-width: 0; font-size: 12.5px; color: #334155; }
.demo-scope .cc-app .cc-ledger dd { margin: 0; font-family: var(--mono); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.demo-scope .cc-app .cc-ledger .sub { background: #f8fafc; padding: 4px 12px; font-size: 11.5px; font-style: italic; color: #64748b; }
.demo-scope .cc-app .cc-ledger .sub dt, .demo-scope .cc-app .cc-ledger .sub dd { color: #64748b; font-size: 11.5px; }
.demo-scope .cc-app .cc-ledger .bind { background: #fffbeb; }
.demo-scope .cc-app .cc-ledger .fin { background: var(--tb); }
.demo-scope .cc-app .cc-ledger .fin dd b { font-size: 17px; color: var(--tc); }
.demo-scope .cc-app .cc-scale { position: relative; height: 40px; margin-top: 6px; }
.demo-scope .cc-app .cc-scale .bar { display: flex; height: 10px; border-radius: 10px; overflow: hidden; }
.demo-scope .cc-app .cc-scale .bar span { display: block; height: 100%; }
.demo-scope .cc-app .cc-scale .r { background: #fda4af; }
.demo-scope .cc-app .cc-scale .a { background: #fcd34d; }
.demo-scope .cc-app .cc-scale .g { background: #6ee7b7; }
.demo-scope .cc-app .cc-scale .mk { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.demo-scope .cc-app .cc-scale .mk i { display: block; width: 2px; height: 16px; background: #1e293b; margin: 0 auto; }
.demo-scope .cc-app .cc-scale .mk b { display: block; font-size: 10px; background: #1e293b; color: #fff; border-radius: 4px; padding: 1px 5px; margin-top: 2px; }
.demo-scope .cc-app .cc-bands .cc-box p { color: #334155; font-size: 12px; }
.demo-scope .cc-app .cc-bands .cc-box .cc-label { color: var(--tc); }
.demo-scope .cc-app .cc-res { display: flex; gap: 9px; width: 100%; font: inherit; text-align: left; background: var(--tb); border: 1px solid var(--tl); border-radius: 9px; padding: 8px 10px; cursor: pointer; margin-top: 6px; color: #334155; }
.demo-scope .cc-app .cc-res.dim { opacity: .82; }
.demo-scope .cc-app .cc-res .cc-i { color: var(--tc); margin-top: 2px; }
.demo-scope .cc-app .cc-res-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #1e293b; }
.demo-scope .cc-app .cc-res:hover { filter: brightness(.98); }
.demo-scope .cc-app .cc-issues li, .demo-scope .cc-app .cc-cov li { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin: 5px 0; font-size: 12.5px; }
.demo-scope .cc-app .cc-meth li { margin: 10px 0; font-size: 12.5px; }
.demo-scope .cc-app .cc-bw { margin-top: 8px; }
.demo-scope .cc-app .cc-bwbar { position: relative; height: 11px; border-radius: 11px; background: #f1f5f9; overflow: hidden; margin-top: 3px; }
.demo-scope .cc-app .cc-bwbar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 11px; }
.demo-scope .cc-app .cc-bwbar .pk { background: var(--tl); }
.demo-scope .cc-app .cc-bwbar .st { background: var(--ts); }
.demo-scope .cc-app .cc-tw { overflow-x: auto; }
.demo-scope .cc-app .cc-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.demo-scope .cc-app .cc-tab th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; font-weight: 600; padding: 5px 8px; border-bottom: 1px solid #e2e8f0; }
.demo-scope .cc-app .cc-tab td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.demo-scope .cc-app .cc-tab .n { text-align: right; font-variant-numeric: tabular-nums; }
.demo-scope .cc-app .cc-dl-d summary { cursor: pointer; font-size: 11.5px; color: #0d7d90; font-weight: 600; margin-top: 4px; }
.demo-scope .cc-app .cc-dl-d ul { list-style: none; padding-left: 10px; border-left: 2px solid #f1f5f9; margin: 4px 0 0; font-size: 11.5px; }

/* other screens */
.demo-scope .cc-app .cc-move { display: flex; gap: 12px; }
.demo-scope .cc-app .cc-move > div > * + * { margin-top: 6px; }
.demo-scope .cc-app .cc-move-n { width: 36px; height: 36px; border-radius: 50%; background: #e7f5f8; color: #0d7d90; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; font-size: 15px; }
.demo-scope .cc-app .cc-why { background: #f8fafc; border-radius: 7px; padding: 6px 9px; color: #5b6679; font-size: 12px; }
.demo-scope .cc-app .cc-watch { font: inherit; text-align: left; background: var(--tb); border: 1px solid var(--tl); border-radius: 12px; padding: 12px 14px; cursor: pointer; color: #334155; display: block; }
.demo-scope .cc-app .cc-watch > span + span { margin-top: 6px; }
.demo-scope .cc-app .cc-watch-go { color: var(--tc); font-weight: 650; }
.demo-scope .cc-app .cc-ex { list-style: none; padding: 0; margin: 8px 0 0; }
.demo-scope .cc-app .cc-exb { display: flex; gap: 7px; width: 100%; height: 100%; font: inherit; font-size: 12.5px; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; cursor: pointer; color: #1e293b; }
.demo-scope .cc-app .cc-exb:hover, .demo-scope .cc-app .cc-req:hover { border-color: rgba(23,151,179,.5); background: #f4fafc; }
.demo-scope .cc-app .cc-exb .cc-i { color: #0d7d90; margin-top: 2px; }
.demo-scope .cc-app .cc-gloss { margin: 0; padding: 0; }
.demo-scope .cc-app .cc-gloss div { display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 10px 14px; border-top: 1px solid #f1f5f9; }
.demo-scope .cc-app .cc-gloss div:first-child { border-top: 0; }
.demo-scope .cc-app .cc-gloss dt { font-weight: 700; color: #102a4f; font-size: 12.5px; }
.demo-scope .cc-app .cc-gloss dd { margin: 0; font-size: 12.5px; color: #475569; }
.demo-scope .cc-app .cc-cta { background: #102a4f; color: #fff; border-radius: 14px; padding: 16px 18px; }
.demo-scope .cc-app .cc-cta .cc-h2 { color: #fff; }
.demo-scope .cc-app .cc-cta p { color: rgba(255,255,255,.85); }
.demo-scope .cc-app .cc-cta .cc-btn { margin-top: 10px; }
.demo-scope .cc-app .cc-empty { background: #fff; border: 1px dashed #cbd5e1; border-radius: 12px; padding: 22px; text-align: center; color: #475569; }
.demo-scope .cc-app .cc-empty > * + * { margin-top: 8px; }
.demo-scope .cc-app .cc-empty > .cc-i { width: 26px; height: 26px; color: #94a3b8; }
.demo-scope .cc-app .cc-empty .cc-note { text-align: left; }
.demo-scope .cc-app .cc-envcard > * + * { margin-top: 8px; }
.demo-scope .cc-app .cc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.demo-scope .cc-app .cc-tiles div { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; }
.demo-scope .cc-app .cc-tiles b { display: block; font-size: 22px; color: #102a4f; }
.demo-scope .cc-app .cc-tiles span { font-size: 11px; color: #64748b; }
.demo-scope .cc-app .cc-req { display: block; width: 100%; font: inherit; text-align: left; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; cursor: pointer; color: #334155; margin-top: 6px; }
.demo-scope .cc-app .cc-req > span + span { margin-top: 3px; }

/* X-Ray, evidence, plan, report */
.demo-scope .cc-app .cc-ink { color: #1e293b; }
.demo-scope .cc-app .cc-fwf { border-color: var(--tl); color: #334155; }
.demo-scope .cc-app .cc-fwf > * + * { margin-top: 4px; }
.demo-scope .cc-app .cc-fwban { border-width: 2px; }
.demo-scope .cc-app .cc-fwban > * + * { margin-top: 5px; }
.demo-scope .cc-app .t-amber-row td { background: #fffbeb; }
.demo-scope .cc-app .cc-files { list-style: none; padding: 0; margin: 6px 0 0; gap: 4px; font-size: 12px; }
.demo-scope .cc-app .cc-doc-h { gap: 12px; }
.demo-scope .cc-app .cc-doc-h img { width: 38px; height: 38px; border-radius: 9px; background: #fff; border: 1px solid #e2e8f0; padding: 3px; }
.demo-scope .cc-app .cc-band-s { font-size: 22px; color: var(--tc); }
.demo-scope .cc-app .cc-mat { list-style: none; padding: 0; margin: 6px 0 0; }
.demo-scope .cc-app .cc-mat li { border-left: 3px solid var(--tl); padding: 2px 0 2px 10px; margin-top: 8px; color: #334155; }
.demo-scope .cc-app .cc-kvs { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; margin: 8px 0; font-size: 12px; }
.demo-scope .cc-app .cc-kvs dt { font-weight: 650; color: #334155; }
.demo-scope .cc-app .cc-kvs dd { margin: 0; color: #475569; overflow-wrap: anywhere; }
.demo-scope .cc-app .cc-req-c { border: 1px solid #f1f5f9; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.demo-scope .cc-app .cc-form { margin: 10px 0; }
.demo-scope .cc-app .cc-span2 { grid-column: span 2; }
.demo-scope .cc-app .cc-span3 { grid-column: 1 / -1; }
.demo-scope .cc-app .cc-trail { list-style: none; padding: 0; margin: 8px 0 0; }
.demo-scope .cc-app .cc-trail li { display: flex; gap: 8px; border: 1px solid #e2e8f0; border-radius: 9px; padding: 8px 10px; margin-top: 6px; }
.demo-scope .cc-app .cc-btn-ok { background: #047857; border-color: #047857; color: #fff; }
.demo-scope .cc-app .cc-btn-ok:hover { background: #065f46; border-color: #065f46; }
.demo-scope .cc-app [data-sec].lit { box-shadow: inset 3px 0 0 #1797b3; }
.demo-scope .cc-print { font-size: 13px; color: #16203a; max-width: 820px; margin: 0 auto; }

/* the shared row-detail dialog, inside this frame */
.demo-scope .cc-app .ev-panel { z-index: 8; }

@media (max-width: 760px) {
  .demo-scope .app[data-app="check"] { height: 640px; grid-template-columns: 1fr; }
  .demo-scope .cc-app .cc-menu { display: inline-block; }
  .demo-scope .cc-app .app-hd .hd-tag { display: none; }
  .demo-scope .app.cc-app[data-app="check"] { grid-template-areas: "hd" "main" "ft"; }
  .demo-scope .cc-app.rail-open .app-nav { display: block; grid-area: auto; position: absolute; z-index: 9; top: 41px; left: 0; bottom: 0; width: 250px; max-width: 86%; box-shadow: 8px 0 24px rgba(0,0,0,.3); }
  .demo-scope .cc-app .app-main { padding: 12px 12px 0; }
  .demo-scope .cc-app .cc-runbar { margin: -12px -12px 0; padding: 0 12px; top: -12px; }
  .demo-scope .cc-app .cc-demo-ban { margin: 0 -12px; padding: 7px 12px; }
  .demo-scope .cc-app .cc-ways, .demo-scope .cc-app .cc-g2, .demo-scope .cc-app .cc-g3, .demo-scope .cc-app .cc-nodes, .demo-scope .cc-app .cc-prog { grid-template-columns: 1fr; }
  .demo-scope .cc-app .cc-tiles { grid-template-columns: 1fr 1fr; }
  .demo-scope .cc-app .cc-vhead { flex-direction: column; align-items: flex-start; padding: 14px; }
  .demo-scope .cc-app .cc-vs, .demo-scope .cc-app .cc-find, .demo-scope .cc-app .cc-strip { padding-left: 12px; padding-right: 12px; }
  .demo-scope .cc-app .cc-gloss div { grid-template-columns: 1fr; gap: 3px; }
  .demo-scope .cc-app .cc-tags { margin-left: 0; }
  .demo-scope .cc-app .cc-ceil { text-align: left; }
  .demo-scope .cc-app .cc-sticky { padding: 7px 9px; margin-top: 10px; }
  .demo-scope .cc-app .cc-sticky-t { display: none; }
  .demo-scope .cc-app .cc-sticky .cc-row { gap: 6px; }
  .demo-scope .cc-app .cc-sticky .cc-lab { font-size: 11px; }
  .demo-scope .cc-app .cc-sticky .cc-in { padding: 5px 8px; }
  .demo-scope .cc-app .cc-sticky .cc-btn { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-scope .cc-app .cc-step-li, .demo-scope .cc-app .cc-dot, .demo-scope .cc-app .cc-spin, .demo-scope .cc-app .cc-scene .sweep, .demo-scope .cc-app .cc-livescan::after { animation: none; }
  .demo-scope .cc-app .cc-scene .sweep { display: none; }
}