/* ONOTO dashboard for the solution pages. The .wd-* rules are copied from
   src/components/stage-dashboard.css (homepage); keep the two in step. */
.wfilm { position: relative; margin: 0; overflow: hidden; }
/* Dashboard view of a workflow stage. Sized from the film box (container
   queries), so the same layout holds at 4:3, 16:9 and on phones. */
.wfilm { container-type: size; container-name: wfilm; }

.wdash {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 1.4cqmin;
  padding: 2cqmin;
  padding-top: 1.8cqmin;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(105, 223, 207, .06), transparent 60%),
    #0a100f;
  color: #e9efee;
  font-family: var(--onoto-sans, Manrope, Inter, system-ui, sans-serif);
  font-size: clamp(9px, 1.7cqmin, 14px);
  line-height: 1.3;
  animation: wdashIn 360ms ease both;
}
@keyframes wdashIn { from { opacity: 0; transform: translateY(6px); } }

.wd-top { display: flex; align-items: center; justify-content: flex-start; gap: 2cqmin; padding-right: 30cqmin; min-height: 5cqmin; }
.wd-top div { display: flex; align-items: baseline; gap: 1.4cqmin; min-width: 0; }
.wd-top b { font-size: 1.35em; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.wd-top span { color: rgba(233, 239, 238, .62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-live { display: inline-flex; align-items: center; gap: .5em; color: #69dfcf !important; font-weight: 600; }
.wd-live i { width: .55em; height: .55em; border-radius: 50%; background: #69dfcf; box-shadow: 0 0 0 .35em rgba(105, 223, 207, .14); animation: wdLive 1.6s ease-in-out infinite; }
@keyframes wdLive { 50% { opacity: .35; } }

.wd-main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.4cqmin; min-height: 0; }
.wd-evidence { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #000; min-height: 0; }
.wd-evidence video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wd-evidence span { position: absolute; left: .7em; bottom: .7em; padding: .35em .6em; background: rgba(4, 8, 8, .78); color: #fff; font-weight: 600; font-size: .92em; }
.wd-evidence::before { position: absolute; z-index: 1; inset: .7em .7em auto auto; padding: .3em .55em; background: rgba(4, 8, 8, .7); color: rgba(255, 255, 255, .8); font-size: .85em; content: 'Evidence'; }

.wd-kpis { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.4cqmin; min-height: 0; }
.wd-kpi { display: flex; flex-direction: column; justify-content: center; gap: .25em; padding: .8em .9em; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .025); min-width: 0; }
.wd-kpi small { color: rgba(233, 239, 238, .62); font-size: .92em; }
.wd-kpi b { font-size: 1.9em; font-weight: 650; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wd-kpi em { font-style: normal; color: rgba(233, 239, 238, .5); font-size: .86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-kpi.good b { color: #69dfcf; }
.wd-kpi.warn b { color: #ffc56b; }
.wd-kpi.alert b { color: #ff8a5c; }

.wd-lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.4cqmin; min-height: 0; }
.wd-card { display: flex; flex-direction: column; min-height: 0; padding: .8em .9em; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .025); }
.wd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: .6em; }
.wd-card-head b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-card-head > span { display: inline-flex; align-items: center; gap: .5em; color: rgba(233, 239, 238, .55); font-size: .88em; white-space: nowrap; }
.wd-card-head > span span { display: inline-flex; align-items: center; gap: .35em; }
.wd-card-head i { display: inline-block; width: .7em; height: .7em; border-radius: 2px; }
.k-mint { background: #69dfcf; } .k-muted { background: rgba(255, 255, 255, .28); } .k-orange { background: #ff8a5c; } .k-blue { background: #7fb2ff; }

.wd-plot { position: relative; flex: 1; min-height: 0; }
.wd-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wd-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wd-bar { fill: #69dfcf; opacity: .85; }
.wd-bar.hot { fill: #ff8a5c; opacity: 1; }
.wd-bar.muted { fill: rgba(255, 255, 255, .26); }
.wd-band { fill: rgba(105, 223, 207, .1); }
.wd-area { fill: rgba(255, 138, 92, .12); stroke: none; }
.wd-line { fill: none; stroke: #ff8a5c; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.wd-dot { fill: #ff8a5c; }
.wd-seg.mint { fill: #69dfcf; } .wd-seg.orange { fill: #ff8a5c; } .wd-seg.blue { fill: #7fb2ff; }
.wd-axis { display: flex; justify-content: space-between; margin-top: .45em; color: rgba(233, 239, 238, .45); font-size: .82em; font-variant-numeric: tabular-nums; }

.wd-table table { width: 100%; height: 100%; border-collapse: collapse; }
.wd-table { overflow: hidden; }
.wd-table td { padding: .42em .2em; border-top: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; font-variant-numeric: tabular-nums; }
.wd-table td:first-child { width: 22%; color: rgba(233, 239, 238, .62); }
.wd-table td:last-child { width: 22%; text-align: right; }
.wd-table td:nth-child(2) { width: auto; }
.wd-pill { display: inline-block; padding: .14em .5em; border: 1px solid rgba(255, 255, 255, .16); color: rgba(233, 239, 238, .78); font-size: .86em; }
.wd-table tr.good .wd-pill { border-color: rgba(105, 223, 207, .45); color: #69dfcf; }
.wd-table tr.warn .wd-pill { border-color: rgba(255, 197, 107, .5); color: #ffc56b; }
.wd-table tr.alert .wd-pill { border-color: rgba(255, 138, 92, .55); color: #ff8a5c; }

.wd-area.good { fill: rgba(105, 223, 207, .12); }
.wd-line.good { stroke: #69dfcf; }
.wd-dot.good { fill: #69dfcf; }
.od-section .wd-top { padding-right: 0; }

/* Section */
.od-section { background: #070c0b; color: #fff; }
.od-section .section-head p { color: #98a9af; }
.od-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,.12); border-bottom: 0; }
.od-tabs button { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border: 0; border-right: 1px solid rgba(255,255,255,.1); background: transparent; color: rgba(255,255,255,.62); font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; position: relative; }
.od-tabs button:last-child { border-right: 0; }
.od-tabs button span { color: rgba(255,255,255,.4); font-weight: 500; font-size: 13px; }
.od-tabs button:hover { color: #fff; }
.od-tabs button[aria-selected="true"] { background: rgba(255,255,255,.05); color: #fff; }
.od-tabs button[aria-selected="true"]::after { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #69dfcf; content: ''; }
.od-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .75fr); border: 1px solid rgba(255,255,255,.12); }
.od-film { aspect-ratio: 16 / 10.5; border-right: 1px solid rgba(255,255,255,.12); background: #0a100f; }
.od-use { display: flex; flex-direction: column; gap: 26px; padding: 30px 28px; }
.od-use-row small { display: block; margin-bottom: 8px; color: #69dfcf; font-size: 13px; font-weight: 600; }
.od-use-row b { font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.od-use-row p { margin: 0; color: #b6c4c8; font-size: 15px; line-height: 1.6; }
@media (max-width: 1100px) {
  .od-grid { grid-template-columns: 1fr; }
  .od-film { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .od-use { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
}
@media (max-width: 680px) {
  .od-tabs { grid-template-columns: 1fr 1fr; }
  .od-tabs button { min-height: 52px; padding: 0 14px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .od-tabs button:nth-child(2) { border-right: 0; }
  .od-film { aspect-ratio: 4 / 3.4; }
  .od-use { grid-template-columns: 1fr; padding: 22px 18px; }
}
/* Small boxes (phones): keep the evidence and the four numbers; the chart and
   the table come back as soon as there is room to read them. */
@container wfilm (max-width: 520px) {
  .wdash { grid-template-rows: auto minmax(0, 1fr); font-size: 10px; }
  .wd-top { padding-right: 46cqmin; min-height: 12cqmin; }
  .wd-lower { display: none; }
  .wd-kpi { padding: .5em .6em; }
  .wd-kpi b { font-size: 1.55em; }
  .wd-kpi em { display: none; }
  .wd-top span:not(.wd-live) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wdash, .wd-live i { animation: none; } }

/* Until the section has mounted it takes no room, so nothing shifts when it fills in. */
.od-section:not(.od-mounted) { display: none; }