/* AvertSignal interactive demo system — simulation theater styles.
   Owner shell: card-based business dashboard.
   Agency shell: dense portfolio tables and queues. */

.demo-page{background:#eef3f9}

/* ---------------------------------------------------------------- header -- */
.ds-page-head{padding:30px 0 8px}
.ds-back{display:inline-flex;margin-bottom:18px;color:#315a67;font-size:13px;font-weight:800;text-decoration:none}
.ds-back:hover{text-decoration:underline}
.ds-page-head h1{max-width:22ch;margin:12px 0 0;color:#081826;font:700 clamp(26px,4vw,44px)/1.06 Sora,Inter,sans-serif;letter-spacing:-.04em}
.ds-page-head h1 em{color:#008f85;font-style:normal}
.ds-promise{margin:10px 0 0;color:#41586b;font-size:15px;line-height:1.55}
.ds-area{display:block;margin-top:3px;color:#607586;font-size:12px;font-weight:700}
.demo-identity{display:flex;flex-wrap:wrap;gap:8px}
.demo-identity span{padding:6px 9px;border:1px solid rgba(7,178,167,.42);border-radius:999px;color:#087f79;background:rgba(7,178,167,.09);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

/* -------------------------------------------------------------- controls -- */
.ds-controls-bar{position:sticky;top:0;z-index:40;margin-top:16px;padding:10px 0;background:rgba(238,243,249,.94);backdrop-filter:blur(7px);border-block:1px solid #d5e0eb}
.ds-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ds-controls .btn{min-height:38px;padding:7px 13px;font-size:12.5px}
.ds-controls .btn.primary{background:#008f85;border-color:#008f85}
.ds-select-wrap select{min-height:38px;max-width:min(420px,72vw);padding:7px 32px 7px 11px;border:1px solid #c3d2da;border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23415868' fill='none' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center;color:#102d42;font:700 12.5px/1.3 Inter,sans-serif;appearance:none}
.ds-rail{display:flex;flex-wrap:wrap;gap:2px 10px;margin:0 0 0 auto;padding:0;list-style:none}
.ds-rail li{display:grid;justify-items:center;gap:3px;color:#8ba0ae;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-align:center}
.ds-rail i{width:11px;height:11px;border:1.5px solid #b7c8d2;border-radius:50%;background:#fff;transition:background .25s,border-color .25s,box-shadow .25s}
.ds-rail li.is-active{color:#315a67}
.ds-rail li.is-active i{border-color:#008f85;background:#8ee4db}
.ds-rail li.is-current i{box-shadow:0 0 0 4px rgba(7,178,167,.18)}
.ds-setup{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:8px}
.ds-setup-text{margin:0;color:#334e62;font-size:13.5px;font-weight:600;line-height:1.45}
.is-running .ds-setup-text::after{content:"";display:none}
.ds-progress{margin-left:auto;color:#607586;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ds-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);overflow:hidden;white-space:nowrap}

/* ----------------------------------------------------------------- frame -- */
.ds-stage{padding:20px 0 74px}
.ds-frame{position:relative;overflow:hidden;border:1px solid #ccd9e0;border-radius:20px;background:#f6f9fb;box-shadow:0 30px 70px rgba(6,14,26,.13)}
.ds-chrome{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:13px 18px;background:linear-gradient(90deg,#08131f,#0c1c2d);color:#dbe7ef}
.ds-chrome-brand{font:800 14px/1 Sora,Inter,sans-serif;letter-spacing:-.01em}
.ds-chrome-brand em{color:#7fcfc7;font:inherit}
.ds-chrome-nav{display:flex;gap:14px;color:#93aab9;font-size:11px;font-weight:700}
.ds-chrome-nav span{cursor:default}
.ds-sim-badge{margin-left:auto;padding:5px 9px;border:1px dashed #3c6152;border-radius:999px;color:#8ee4db;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

/* ---------------------------------------------------------------- regions -- */
.ds-owner-body,.ds-agency-body{padding:18px}
.ds-region{border:1px solid #dde6ec;border-radius:15px;background:#fff;box-shadow:0 10px 26px rgba(6,14,26,.04)}
.ds-region-kicker{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 0;color:#607586;font-size:9.5px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ds-count{padding:2px 7px;border-radius:999px;background:#fdf0ee;color:#a33b35;font-size:9px;letter-spacing:.06em}
.ds-empty-note{padding:14px 16px 16px;color:#78899a;font-size:12.5px;line-height:1.5}
.ds-empty-tall strong{color:#41586b}

/* owner layout */
.ds-summary{margin-bottom:14px}
.ds-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:10px 16px 16px}
.ds-tile{padding:11px 13px;border:1px solid #e4ebf0;border-radius:11px;background:#fafcfd;transition:box-shadow .3s,border-color .3s}
.ds-tile-label{display:block;color:#607586;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.ds-tile-value{display:block;margin-top:6px;color:#0b2233;font:700 17px/1.1 Sora,Inter,sans-serif;letter-spacing:-.02em}
.ds-tiles--six .ds-tile-value{font-size:21px}
.ds-tile.is-bumped{border-color:#7fcfc7;box-shadow:0 0 0 3px rgba(7,178,167,.14)}
.ds-owner-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(300px,1fr);gap:14px;align-items:start}
.ds-owner-main{display:grid;gap:14px}
.ds-systems-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:10px 16px 16px}
.ds-system{padding:12px 13px;border:1px solid #e4ebf0;border-radius:11px;background:#fbfdfe;transition:border-color .35s,background .35s,box-shadow .35s}
.ds-system header{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ds-system-label{color:#17364c;font-size:12.5px;font-weight:800}
.ds-system p{margin:6px 0 0;color:#66798a;font-size:11.5px;line-height:1.45}
.ds-journey{transition:border-color .3s}
.ds-journey-chain{display:grid;gap:6px;padding:10px 16px 16px}
.ds-step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 11px;border:1px solid #edf2f5;border-radius:10px;background:#fbfdfe}
.ds-step-dot{width:8px;height:8px;border-radius:50%;background:#cbd7df}
.ds-step.tone-ok .ds-step-dot{background:#0aa79b}
.ds-step.tone-warn .ds-step-dot{background:#dfa92f}
.ds-step.tone-danger .ds-step-dot{background:#cf5050}
.ds-step-label{color:#22405a;font-size:12.5px;font-weight:700}
.ds-issue-list{padding:10px 16px 16px;display:grid;gap:9px}
.ds-issue-card{padding:12px 14px;border:1px solid #ecd9d6;border-radius:12px;background:#fffafa}
.ds-issue-card.sev-critical{border-color:#eab8b3;background:#fff5f4}
.ds-issue-card header{display:flex;align-items:center;gap:10px}
.ds-issue-card strong{color:#132c40;font-size:13px;line-height:1.35}
.ds-issue-card footer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px;color:#66798a;font-size:11px;font-weight:600}
.ds-sev{padding:3px 8px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.ds-sev.sev-critical{background:#fbe4e1;color:#a33028}
.ds-sev.sev-high{background:#fdeedd;color:#8a5b12}
.ds-sev.sev-medium{background:#eef4f8;color:#41586b}

/* incident detail */
.ds-incident-body,.ds-panel-body{padding:12px 16px 16px}
.ds-incident-title{margin:2px 0 10px;color:#0b2233;font:700 16.5px/1.25 Sora,Inter,sans-serif;letter-spacing:-.02em}
.dl-rows{display:grid;gap:7px;margin:0}
.dl-rows>div{padding:8px 11px;border:1px solid #edf2f5;border-radius:9px;background:#fbfdfe}
.dl-rows dt{color:#607586;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.dl-rows dd{margin:4px 0 0;color:#1d3950;font-size:12px;font-weight:600;line-height:1.5}
.ds-checks{display:grid;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed #e0e8ee}
.ds-check{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:6px 10px;border-radius:8px;background:#f7fafc;font-size:11.5px;font-weight:600;color:#33506a}
.ds-check em{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ds-check-dot{width:8px;height:8px;border-radius:50%;background:#c4d1da}
.ds-check.tone-ok .ds-check-dot{background:#0aa79b}
.ds-check.tone-warn .ds-check-dot{background:#dfa92f}
.ds-check.tone-ok em{color:#087f79}
.ds-check.tone-warn em{color:#8a5b12}
.ds-check.tone-muted em{color:#78899a}

/* chips */
.ds-chip{display:inline-flex;align-items:center;padding:3px 8px;border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;transition:background .3s,color .3s,border-color .3s;border:1px solid transparent}
.ds-chip.tone-ok,.ds-chip.tone-verified{background:#e2f6f2;color:#077468;border-color:#9adbd2}
.ds-chip.tone-warn{background:#fdf3dd;color:#8a5b12;border-color:#ecd9a8}
.ds-chip.tone-danger{background:#fbe4e1;color:#a33028;border-color:#efb9b3}
.ds-chip.tone-muted{background:#eef2f5;color:#66798a;border-color:#d8e1e7}
.ds-chip.tone-info{background:#e8f3fa;color:#1d6a94;border-color:#bcdcee}

/* timeline */
.ds-timeline{margin-top:14px}
.ds-timeline-list{display:grid;gap:0;padding:6px 16px 14px}
.ds-tl-entry{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:start;padding:11px 0;border-top:1px solid #eef2f5;animation:ds-in .34s ease both}
.ds-tl-entry:first-child{border-top:0}
.ds-tl-entry time{color:#087f79;font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding-top:2px}
.ds-tl-entry strong{color:#16344c;font-size:12.5px;line-height:1.4}
.ds-tl-entry p{margin:3px 0 0;color:#66798a;font-size:11.5px;line-height:1.5}
.ds-tl-entry.is-verified time{color:#047a6d}
.ds-tl-entry.is-verified>div strong{color:#05564d}
@keyframes ds-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* final band */
.ds-final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding:20px 22px;border:1px solid #8adbd3;border-radius:15px;background:linear-gradient(120deg,#effcfa,#f4fdfb);animation:ds-rise .45s ease both}
.ds-final strong{display:block;color:#05564d;font:700 19px/1.2 Sora,Inter,sans-serif;letter-spacing:-.02em}
.ds-final p{margin:6px 0 0;max-width:56ch;color:#2c5a58;font-size:12.5px;line-height:1.55}
.ds-final-actions{display:flex;flex-wrap:wrap;gap:9px}
@keyframes ds-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ agency bits -- */
.ds-agency-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,1fr);gap:14px;align-items:start}
.ds-agency-main{display:grid;gap:14px}
.ds-client-table{padding:8px 12px 14px}
.ds-tr{display:grid;grid-template-columns:minmax(140px,1.6fr) .6fr .9fr .5fr;gap:10px;align-items:center;padding:8px 8px;border-bottom:1px solid #eef2f5}
.ds-th{color:#607586;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid #e4ebf0}
.ds-tr:last-child{border-bottom:0}
.ds-cell-name{color:#17364c;font-size:12.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-client-row span:not(.ds-cell-name){color:#41586b;font-size:12px;font-weight:700}
.ds-client-row.st-attention{background:#fffcf3;box-shadow:inset 3px 0 0 #e5b83c}
.ds-client-row.st-critical{background:#fff6f5;box-shadow:inset 3px 0 0 #cf5050}
.ds-client-row.is-changed{animation:ds-rowflash 1.1s ease both}
@keyframes ds-rowflash{0%{background:#eafaf7}100%{}}
.ds-queue-list{padding:10px 14px 14px;display:grid;gap:8px}
.ds-queue-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:9px 11px;border:1px solid #e8edf1;border-left-width:3px;border-radius:10px;background:#fbfdfe;animation:ds-in .3s ease both}
.ds-queue-row.sev-critical{border-left-color:#cf5050}
.ds-queue-row.sev-high{border-left-color:#dfa92f}
.ds-queue-row.sev-medium{border-left-color:#8fa8b8}
.ds-queue-main strong{display:block;color:#17364c;font-size:12px}
.ds-queue-main small{color:#66798a;font-size:10.5px}
.ds-history-feed{display:grid;gap:0;padding:6px 14px 12px}
.ds-hist-entry{display:grid;grid-template-columns:96px 1fr auto;gap:10px;align-items:start;padding:9px 0;border-top:1px solid #eef2f5}
.ds-hist-entry:first-child{border-top:0}
.ds-hist-entry time{color:#607586;font-size:10px;font-weight:800}
.ds-hist-entry strong{color:#16344c;font-size:11.5px;line-height:1.4}
.ds-hist-entry p{margin:2px 0 0;color:#78899a;font-size:10.5px;line-height:1.45}

/* ------------------------------------------------------------ coachmarks -- */
.ds-cm-layer{position:absolute;inset:0;pointer-events:none;z-index:30}
.ds-cm{position:absolute;width:280px;pointer-events:auto;padding:12px 13px;border:1px solid #0e3f43;border-radius:13px;background:#0c2733;color:#e7f3f2;box-shadow:0 18px 44px rgba(4,18,26,.4);animation:ds-cm-in .3s ease both}
.ds-cm::before{content:"";position:absolute;width:12px;height:12px;transform:rotate(45deg);background:#0c2733;border-left:1px solid #0e3f43;border-top:1px solid #0e3f43;left:var(--arrow-x,24px);top:-7px}
.ds-cm-text{margin:0;font-size:12.5px;line-height:1.5;font-weight:600}
.ds-cm-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.ds-cm-actions button{min-height:29px;padding:4px 11px;border-radius:8px;border:1px solid #2e5b63;background:#12313c;color:#cdeae6;font:800 11px/1 Inter,sans-serif;cursor:pointer}
.ds-cm-actions button:hover{background:#17414e}
.ds-cm-actions .ds-cm-next{background:#00bfb1;border-color:#00bfb1;color:#04262b}
.ds-cm-actions .ds-cm-next:hover{background:#25cfc2}
@keyframes ds-cm-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ds-cm--dock{left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto;max-width:none!important;animation:ds-cm-dock .3s ease both}
.ds-cm--dock::before{display:none}
@keyframes ds-cm-dock{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
[data-cm-anchor].ds-cm-active{position:relative;z-index:25;border-radius:inherit;outline:2px solid #00bfb1;outline-offset:2px;animation:ds-glow 1.6s ease infinite}
@keyframes ds-glow{0%,100%{outline-color:#00bfb1}50%{outline-color:#8ee4db}}

/* -------------------------------------------------------------------- hub -- */
.ds-hub{min-height:100vh;padding:64px 0 80px;background:linear-gradient(180deg,#060e1a 0,#0c1c2d 30%,#eef3f9 30%)}
.ds-hub h1{max-width:17ch;margin:14px 0 0;color:#fff;font:700 clamp(34px,5.4vw,64px)/1.03 Sora,Inter,sans-serif;letter-spacing:-.055em}
.ds-hub h1 em{color:#0fbfb2;font-style:normal}
.ds-hub>.container>.storefront-lead{max-width:640px;margin:18px 0 54px;color:#c6d5e3}
.ds-hub-group{margin-top:34px}
.ds-hub-group-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:15px}
.ds-hub-group h2{margin:0;color:#081826;font:700 clamp(21px,3vw,31px)/1.12 Sora,Inter,sans-serif;letter-spacing:-.035em}
.ds-hub-group:first-of-type h2,.ds-hub-group:first-of-type .storefront-kicker{color:#fff}
.ds-hub-blurb{margin:7px 0 0;color:#66798a;font-size:12.5px}
.ds-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:13px}
.ds-hub-card{display:flex;flex-direction:column;min-height:212px;padding:19px;border:1px solid #d5e0eb;border-radius:17px;background:#fff;color:#122c40;box-shadow:0 12px 30px rgba(6,14,26,.09);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease}
.ds-hub-card:hover{transform:translateY(-3px);box-shadow:0 20px 45px rgba(6,14,26,.15)}
.ds-tier{align-self:flex-start;padding:5px 9px;border:1px solid #6fd4ca;border-radius:999px;color:#077468;background:#e8faf7;font-size:9.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ds-hub-card.aud-agency .ds-tier{border-color:#b9a7e8;color:#5b48a8;background:#f3effd}
.ds-hub-card h3{margin:13px 0 6px;font:700 19px/1.15 Sora,Inter,sans-serif;letter-spacing:-.03em}
.ds-hub-card>p{margin:0;color:#607586;font-size:12px;line-height:1.5}
.ds-hub-card dl{display:flex;gap:20px;margin:auto 0 14px;padding-top:16px}
.ds-hub-card dt{color:#8a99a6;font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.ds-hub-card dd{margin:4px 0 0;font-size:11px;font-weight:800}
.ds-hub-card>b{color:#087f79;font-size:12px}

/* ------------------------------------------------------------- responsive -- */
@media(max-width:1060px){
  .ds-rail li span{display:none}
  .ds-rail{gap:6px}
}
@media(max-width:940px){
  .ds-owner-grid,.ds-agency-grid{grid-template-columns:1fr}
  .ds-chrome-nav{display:none}
}
@media(max-width:720px){
  .ds-page-head{padding-top:20px}
  .ds-controls-bar{padding:8px 0}
  .ds-controls{gap:6px}
  .ds-controls .btn{flex:1 1 auto;min-height:40px}
  .ds-select-wrap{order:-1;width:100%}
  .ds-select-wrap select{width:100%;max-width:none}
  .ds-rail{display:none}
  .ds-progress{margin-left:0;width:100%}
  .ds-owner-body,.ds-agency-body{padding:12px}
  .ds-systems-grid{grid-template-columns:1fr 1fr}
  .ds-tr{grid-template-columns:minmax(110px,1.5fr) .5fr 1fr .4fr;gap:6px}
  .ds-timeline-list{padding:4px 12px 12px}
  .ds-tl-entry{grid-template-columns:1fr;gap:4px}
  .ds-hist-entry{grid-template-columns:1fr;gap:3px}
  .ds-final{flex-direction:column;align-items:flex-start}
  .ds-final-actions{width:100%}
  .ds-final-actions .btn{flex:1}
}
@media(max-width:480px){
  .ds-systems-grid{grid-template-columns:1fr}
  .ds-tiles{grid-template-columns:1fr 1fr;padding:8px 12px 12px}
  .ds-tiles--six{grid-template-columns:1fr 1fr}
  .ds-sim-badge{width:100%;text-align:center}
  .dl-rows dd{font-size:11.5px}
}

/* --------------------------------------------------------- reduced motion -- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ds-tl-entry,.ds-queue-row,.ds-final,.ds-cm{animation:none;opacity:1;transform:none}
  [data-cm-anchor].ds-cm-active{animation:none;outline:2px solid #008f85}
}