/* Scenario, landing, banner, office and system-admin panels share these pieces.
   Colours come from the design tokens in app.css. */
.scenario-shell .table-scroll {
  max-width:100%;
  overflow-x:auto
}
.scenario-nav .scenario-unread-count {
  margin-inline-start:auto;
  min-width:1.5rem;
  padding:.05rem .45rem;
  border-radius:999px;
  background-color:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-fill) 45%,transparent);
  color:var(--sidebar-bg);
  font-size:.68rem;
  font-weight:900;
  line-height:1.5;
  text-align:center;
  flex-shrink:0
}
.scenario-nav .scenario-queue-count {
  margin-inline-start:auto;
  min-width:1.5rem;
  padding:.05rem .45rem;
  border:1px solid rgb(255 255 255 / 25%);
  border-radius:999px;
  color:#e2e8f0;
  font-size:.68rem;
  font-weight:800;
  line-height:1.5;
  text-align:center;
  flex-shrink:0
}
.scenario-nav .scenario-queue-count + .scenario-unread-count {
  margin-inline-start:.25rem
}
.scenario-unread-count[hidden] { display:none }
.scenario-new-badge {
  display:inline-block;
  margin-inline-start:.3rem;
  padding:.1rem .5rem;
  border-radius:999px;
  background-color:var(--accent-fill);
  box-shadow:0 4px 10px -4px var(--accent-glow);
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap
}
.scenario-table .scenario-row-unread { background-color:var(--accent-soft) }
.scenario-table .scenario-row-unread > td:first-child { box-shadow:inset 3px 0 var(--accent-fill) }
.scenario-read-receipt { color:var(--warning); font-size:.8rem }
.scenario-filters {
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr auto;
  gap:1rem;
  overflow:visible;
  padding:1.2rem;
  margin-bottom:1.4rem;
  align-items:end
}
.scenario-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-bottom:1.4rem
}
.scenario-stats-lead {
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.scenario-stat {
  --tone:var(--accent-fill);
  position:relative;
  isolation:isolate;
  padding:1.4rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  color:inherit;
  text-decoration:none;
  transition:transform .3s var(--ease-out),box-shadow .3s,border-color .3s
}
.scenario-stat::before {
  content:"";
  position:absolute;
  inset-inline:0;
  top:0;
  height:3px;
  background-image:linear-gradient(-90deg,color-mix(in srgb,var(--tone) 55%,white),var(--tone))
}
.scenario-stat::after {
  content:"";
  position:absolute;
  top:-3rem;
  left:-3rem;
  z-index:-1;
  width:9rem;
  height:9rem;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--tone) 16%,transparent),transparent 70%);
  transition:transform .6s var(--ease-out)
}
.scenario-stat:nth-child(5n + 2) { --tone:#0891b2 }
.scenario-stat:nth-child(5n + 3) { --tone:#059669 }
.scenario-stat:nth-child(5n + 4) { --tone:#d97706 }
.scenario-stat:nth-child(5n + 5) { --tone:#e11d48 }
a.scenario-stat:hover {
  border-color:color-mix(in srgb,var(--tone) 40%,var(--line));
  box-shadow:var(--shadow-md);
  transform:translateY(-3px)
}
a.scenario-stat:hover::after { transform:scale(1.3) }
a.scenario-stat:focus-visible {
  outline:3px solid var(--accent-glow);
  outline-offset:3px
}
.scenario-stat > span { color:var(--muted); font-size:.8rem; font-weight:800 }
.scenario-stat strong {
  color:var(--ink);
  font-size:2.1rem;
  font-weight:900;
  line-height:1.2
}
.scenario-stat small,.scenario-note {
  color:var(--muted);
  font-size:.8rem;
  line-height:1.9
}
.main-content > .scenario-note {
  margin:-.4rem 0 1.2rem;
  padding:.7rem 1rem;
  border:1px solid var(--line);
  border-inline-start:3px solid var(--accent-fill);
  border-radius:var(--radius);
  background-color:var(--surface)
}
.scenario-overview {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem
}
.scenario-delivery {
  display:flex;
  align-items:center;
  gap:2rem;
  padding:2rem;
  line-height:2.3
}
.scenario-delivery small {
  font-size:.75rem;
  color:var(--muted)
}
.scenario-ring {
  flex:0 0 140px;
  height:140px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--accent-fill) var(--progress),var(--surface-3) 0);
  box-shadow:0 6px 16px -10px var(--accent-glow);
  position:relative;
  isolation:isolate;
  direction:rtl
}
.scenario-ring:before {
  content:"";
  position:absolute;
  inset:14px;
  background-color:var(--surface);
  border-radius:50%;
  z-index:-1
}
.scenario-ring strong {
  color:var(--ink);
  font-size:1.8rem;
  font-weight:900
}
.scenario-metric-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:1.3rem;
  gap:1rem
}
.scenario-metric-grid div {
  border:1px dashed var(--line-strong);
  border-radius:.8rem;
  background-color:var(--surface-2);
  padding:.8rem;
  color:var(--ink-2);
  font-size:.8rem
}
.scenario-metric-grid strong {
  display:block;
  font-size:1.5rem;
  margin-top:.5rem;
  color:var(--muted)
}
.scenario-overview .scenario-note {
  padding:0 1.4rem 1.4rem
}
.scenario-section {
  margin-top:1.4rem
}
.scenario-table {
  width:100%;
  min-width:880px;
  border-collapse:collapse;
  text-align:left
}
.scenario-table th,.scenario-table td {
  padding:1rem;
  border-bottom:1px solid var(--line);
  font-size:.8rem
}
.scenario-table th {
  background-color:var(--surface-2);
  color:var(--muted);
  font-weight:800
}
.scenario-table td {
  color:var(--ink-2)
}
.scenario-table td a {
  color:var(--ink);
  text-decoration:none
}
.scenario-table td a:hover {
  color:var(--accent-text)
}
.scenario-table small {
  display:block;
  color:var(--muted);
  font-size:.7rem;
  margin-top:.4rem
}
.scenario-table tr[data-campaign-href] {
  cursor:pointer
}
.scenario-table tr[data-campaign-href]:hover {
  background-color:var(--surface-3)
}
.scenario-table tr[data-campaign-href]:hover > td:first-child {
  box-shadow:inset 3px 0 var(--accent-fill)
}
.scenario-table tr:focus-visible {
  outline:2px solid var(--accent-fill);
  outline-offset:-3px
}
.scenario-inline-assignment {
  display:flex;
  align-items:center;
  gap:.45rem;
  min-width:15rem
}
.scenario-inline-assignment select {
  min-width:0;
  flex:1;
  border:1px solid var(--line-strong);
  border-radius:.6rem;
  background-color:var(--surface);
  padding:.5rem .65rem;
  color:var(--ink)
}
.scenario-inline-assignment select:focus {
  border-color:var(--accent-fill);
  box-shadow:0 0 0 3px var(--accent-glow);
  outline:none
}
.scenario-inline-assignment .button {
  min-height:2.25rem;
  padding:.45rem .75rem;
  font-size:.75rem
}
.scenario-empty {
  padding:2rem;
  text-align:center;
  color:var(--muted)
}
.scenario-pad {
  padding:1.5rem;
  line-height:2
}
.scenario-pad h2 {
  color:var(--ink);
  font-weight:900;
  margin-bottom:.8rem
}
.scenario-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.4rem;
  color:var(--muted);
  font-size:.8rem
}
.scenario-detail-grid {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(240px,1fr);
  gap:1.4rem
}
.scenario-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.scenario-summary dt {
  font-size:.75rem;
  color:var(--muted)
}
.scenario-summary dd {
  color:var(--ink-2);
  font-size:.9rem;
  overflow-wrap:anywhere
}
.scenario-submit {
  display:grid;
  gap:1.1rem
}
.scenario-version,.scenario-notice {
  padding-bottom:1.5rem;
  margin-bottom:1.5rem;
  border-bottom:1px solid var(--line)
}
.scenario-review {
  border-inline-start:3px solid var(--accent-fill);
  border-radius:.6rem;
  padding:.8rem 1rem;
  background-color:var(--accent-soft);
  margin-top:1rem
}
@media(max-width:1100px) {
  .scenario-stats-lead {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .scenario-overview {
    grid-template-columns:1fr
  }
  .scenario-filters {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .scenario-detail-grid {
    grid-template-columns:1fr
  }
}
@media(max-width:640px) {
  .scenario-stats {
    grid-template-columns:1fr 1fr
  }
  .scenario-stat {
    padding:1rem
  }
  .scenario-stat strong {
    font-size:1.6rem
  }
  .scenario-delivery {
    flex-direction:column;
    gap:1rem;
    padding:1.3rem
  }
  .scenario-ring {
    flex-basis:140px;
    width:140px
  }
  .scenario-filters,.scenario-summary {
    grid-template-columns:1fr
  }
  .scenario-pad {
    padding:1rem
  }
  .scenario-metric-grid {
    gap:.5rem;
    padding:1rem
  }
}