/* ---- V1.64 OT assets (ota-): Client\Apps\OtAssets (OtAssetsPage). Design system tokens only (--os-*), full page width; a new app file:
   every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.ota-reasons { display: flex; flex-wrap: wrap; gap: var(--os-space-1); min-width: 16ch; }
/* The overview's wide tables wrap their headers and cells rather than run past their panel (French is longer) */
.ota-rtable th, .ota-vtable th { white-space: normal; height: auto; padding-top: var(--os-space-2); padding-bottom: var(--os-space-2); }
.ota-rtable td, .ota-vtable td { padding-left: var(--os-space-2); padding-right: var(--os-space-2); }

/* ---- V1.69 the premium pass (mockup 28): the overview, the zones' diagram, the charts, the phone's tag lookup ---- */

.ota-mono { font-family: var(--os-font-mono); }
.ota-nowrap { white-space: nowrap; }
.ota-wrap { overflow-wrap: anywhere; min-width: 12ch; }
.ota-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ota-two { display: grid; gap: var(--os-space-1); min-width: 0; }
.ota-error { color: var(--os-bad-text); font: var(--os-type-small); }
.ota-clickrow { cursor: pointer; }
.ota-clickrow:hover td { background: var(--os-surface-sunken); }

/* The grid: columns whose panels stack (no gap beside a tall panel), stretched to the row's height */
.ota-col { --span: 4; display: flex; flex-direction: column; gap: var(--os-gutter); min-width: 0; }
.ota-col.ota-col--8 { --span: 8; }
.ota-col.ota-col--7 { --span: 7; }
.ota-col.ota-col--5 { --span: 5; }
.ota-col.ota-col--12 { --span: 12; }
.ota-ovgrid { margin-top: var(--os-gutter); align-items: stretch; }
.ota-ovgrid > .ota-col > :last-child { flex: 1 1 auto; }
.ota-page .ota-ovgrid + .os-panel { margin-top: var(--os-gutter); }
/* A flush panel's footer stays inside it (no padding to pull back from) */
.ota-page .os-panel--flush > .os-panel__foot { margin: 0; flex-wrap: wrap; }
.ota-page .os-panel__foot .os-spacer { flex: 1; }

/* Legends, dots, the severity bar */
.ota-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2) var(--os-space-3); font: var(--os-type-caption); color: var(--os-text-2); }
.ota-legend > span { display: inline-flex; align-items: center; gap: var(--os-space-1); }
.ota-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--os-text-3); margin-right: var(--os-space-1); flex: none; }
.ota-dot.is-bad, .ota-dot.crit { background: var(--os-bad); }
.ota-dot.is-warn, .ota-dot.high { background: var(--os-warn); }
.ota-dot.med { background: var(--os-hue-violet); }
.ota-dot.low, .ota-dot.is-none { background: var(--os-border-strong); }
.ota-dot.is-good { background: var(--os-good); }
.ota-dot.is-ok { background: var(--os-accent); }
.ota-dot.is-critical { background: var(--os-accent); }
.ota-dot.is-other { background: var(--os-chart-3); }
.ota-dash { display: inline-block; width: 16px; border-top: 2px dashed var(--os-bad); margin-right: var(--os-space-1); }
.ota-dash.ota-dash--rule { border-top-color: var(--os-chart-target); }
.ota-line { display: inline-block; width: 16px; border-top: 2px solid var(--os-text); margin-right: var(--os-space-1); }

.ota-sevbar { display: flex; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--os-surface-sunken); }
.ota-sevbar > i { display: block; width: var(--w); height: 100%; }
.ota-sevbar > i.crit { background: var(--os-bad); }
.ota-sevbar > i.high { background: var(--os-warn); }
.ota-sevbar > i.med { background: var(--os-hue-violet); }
.ota-sevbar > i.low { background: var(--os-border-strong); }
.ota-sevbar.ota-sevbar--lg { height: 10px; border-radius: 5px; }

/* Zones and conduits */
.ota-zmap-wrap { overflow-x: auto; }
.ota-zmap { display: block; width: 100%; min-width: 720px; height: auto; }
.ota-lane { fill: var(--os-surface); }
.ota-lane.is-odd { fill: var(--os-surface-sunken); }
.ota-zt { font: var(--os-type-caption); fill: var(--os-text-2); }
.ota-zt-strong { font: var(--os-type-body-strong); fill: var(--os-text); }
.ota-zt.ota-zt--bad { fill: var(--os-bad-text); }
.ota-zt.ota-zt--mono { font-family: var(--os-font-mono); }
.ota-conduit { fill: none; stroke: var(--os-border-strong); stroke-width: 1.5; }
.ota-conduit.ota-conduit--bypass { stroke: var(--os-bad); stroke-width: 2; stroke-dasharray: 6 4; }
.ota-zbox { cursor: pointer; }
.ota-zbox > rect:first-of-type { fill: var(--os-surface-raised); stroke: var(--os-border); stroke-width: 1; }
.ota-zbox:hover > rect:first-of-type { stroke: var(--os-accent); }
.ota-zbox.is-flat > rect:first-of-type { stroke: var(--os-bad); stroke-width: 2; }
.ota-zbox.is-out > rect:first-of-type { fill: var(--os-surface); stroke: var(--os-border-strong); stroke-dasharray: 4 3; }
.ota-zbar.is-bad { fill: var(--os-bad); }
.ota-zbar.is-warn { fill: var(--os-warn); }
.ota-zbar.is-good { fill: var(--os-good); }
.ota-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--os-space-3); margin: 0; width: 100%; }
.ota-stats > div { display: grid; gap: var(--os-space-1); }
.ota-stats dt { font: var(--os-type-kpi-sm); color: var(--os-text); }
.ota-stats dd { margin: 0; font: var(--os-type-caption); color: var(--os-text-2); }
.ota-stats > div.is-bad dt { color: var(--os-bad-text); }

/* Needs attention now */
.ota-alist { list-style: none; margin: 0; padding: 0; }
.ota-alist li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ota-alist li:first-child { border-top: 0; }
.ota-alist li > div { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; }
.ota-alist__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--os-space-2); min-width: 0; overflow-wrap: anywhere; }
.ota-alist__icon { display: inline-flex; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); flex: none; }
.ota-alist__icon--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.ota-alist__icon--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.ota-alist__icon--info { background: var(--os-info-soft); color: var(--os-info-text); }
.ota-alist__icon--good { background: var(--os-good-soft); color: var(--os-good-text); }

/* The advisories */
.ota-vulns__bar { display: grid; gap: var(--os-space-2); padding: var(--os-space-3) var(--os-space-4); }
.ota-vulns__bar b { color: var(--os-text); }
.ota-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1); }
.ota-chipbtn { cursor: pointer; border: 0; }

/* Assets by type and level */
.ota-type { display: inline-flex; align-items: center; gap: var(--os-space-2); white-space: nowrap; }
.ota-heat th, .ota-heat td { padding-left: var(--os-space-2); padding-right: var(--os-space-2); }
.ota-heat td.num { padding-top: var(--os-space-1); padding-bottom: var(--os-space-1); }
.ota-heat__cell { display: inline-flex; justify-content: center; min-width: 32px; padding: var(--os-space-1) var(--os-space-2); border-radius: var(--os-radius-sm); color: var(--os-text-3); }
.ota-heat--1 { background: color-mix(in srgb, var(--os-accent) 14%, transparent); color: var(--os-text); }
.ota-heat--2 { background: color-mix(in srgb, var(--os-accent) 30%, transparent); color: var(--os-text); }
.ota-heat--3 { background: color-mix(in srgb, var(--os-accent) 52%, transparent); color: var(--os-text); }
.ota-heat--4 { background: var(--os-accent-fill); color: var(--os-on-accent-fill); }
.ota-heat tfoot td { font: var(--os-type-body-strong); color: var(--os-text); }

/* Support by type */
.ota-hbars { display: grid; gap: var(--os-space-2); }
.ota-hbars__row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr 32px; align-items: center; gap: var(--os-space-2); }
.ota-hbars__label { font: var(--os-type-small); color: var(--os-text-2); text-align: right; overflow-wrap: anywhere; }
.ota-hbars__track { display: flex; height: 16px; background: var(--os-surface-sunken); border-radius: var(--os-radius-sm); overflow: hidden; }
.ota-hbars__track > i { display: flex; align-items: center; justify-content: center; width: var(--w); height: 100%; font: var(--os-type-caption); font-style: normal; color: var(--os-on-accent-fill); }
.ota-hbars__track > i.is-bad { background: var(--os-bad); color: var(--os-surface); }
.ota-hbars__track > i.is-warn { background: var(--os-warn); }
.ota-hbars__track > i.is-ok { background: var(--os-accent); }
.ota-hbars__track > i.is-none { background: var(--os-border-strong); }
.ota-hbars__n { font: var(--os-type-caption); color: var(--os-text-2); }
.ota-hbars__ticks { position: relative; height: 16px; border-top: var(--os-border-w) solid var(--os-chart-axis); }
.ota-hbars__ticks > b { position: absolute; left: var(--x); transform: translateX(-50%); font: var(--os-type-caption); color: var(--os-chart-label); }

/* The backups' dots and the risk trend */
.ota-dots, .ota-trend__svg { display: block; width: 100%; height: auto; }
.ota-dots__never { fill: var(--os-surface-sunken); }
.ota-dots__grid { stroke: var(--os-chart-grid); stroke-width: 1; }
.ota-dots__rule { stroke: var(--os-chart-target); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ota-dot-c { fill: var(--os-chart-3); }
.ota-dot-c.is-critical { fill: var(--os-accent); }
.ota-dot-c.is-late { stroke: var(--os-bad); stroke-width: 1.5; }
.ota-bar.is-bad { fill: var(--os-bad); }
.ota-bar.is-warn { fill: var(--os-warn); }
.ota-trend__line { fill: none; stroke: var(--os-text); stroke-width: 2; }
.ota-trend__pt { fill: var(--os-surface-raised); stroke: var(--os-text); stroke-width: 2; }
.ota-trend__pt.is-current { fill: var(--os-accent); }
.ota-trend__mark { stroke: var(--os-chart-target); stroke-width: 1; stroke-dasharray: 3 3; }

/* The riskiest assets */
.ota-risk { display: inline-flex; align-items: center; gap: var(--os-space-2); white-space: nowrap; }
.ota-risk__bar { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--os-surface-sunken); overflow: hidden; }
.ota-risk__bar > i { display: block; width: var(--w); height: 100%; background: var(--os-good); }
.ota-risk.is-bad .ota-risk__bar > i, .ota-risk__bar.is-bad > i { background: var(--os-bad); }
.ota-risk.is-warn .ota-risk__bar > i, .ota-risk__bar.is-warn > i { background: var(--os-warn); }
.ota-risk.is-bad b { color: var(--os-bad-text); }
.ota-risk__bar.ota-risk__bar--lg { flex: 1; width: auto; height: 8px; border-radius: 4px; }
.ota-ago.is-bad { color: var(--os-bad-text); }
.ota-ago.is-warn { color: var(--os-warn-text); }
.ota-risk-n { margin-left: var(--os-space-1); padding: 0 var(--os-space-1); border-radius: var(--os-radius-sm); font: var(--os-type-caption); }
.ota-risk-n.is-bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.ota-risk-n.is-warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.ota-risk-n.is-good { background: var(--os-good-soft); color: var(--os-good-text); }

/* The tag lookup and the asset's card (the phone first; a side panel on a desktop) */
.ota-lookup { display: grid; gap: var(--os-space-3); min-width: 0; }
.ota-lookup > * { min-width: 0; }
.ota-lookup__search { display: flex; gap: var(--os-space-2); }
.ota-lookup__field { display: flex; align-items: center; gap: var(--os-space-2); flex: 1; min-width: 0; padding-left: var(--os-space-3); border: var(--os-border-w) solid var(--os-border-strong); border-radius: var(--os-radius-md); background: var(--os-surface-raised); }
.ota-lookup__field .os-input { border: 0; background: transparent; min-width: 0; flex: 1; }
.ota-lookup__picks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }
.ota-lookup__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--os-space-2); }
.ota-lookup__actions .os-btn { min-width: 0; white-space: normal; }
.ota-card { display: grid; gap: var(--os-space-3); padding: var(--os-space-4); border: var(--os-border-w) solid var(--os-border); border-radius: var(--os-radius-lg); background: var(--os-surface-raised); }
.ota-card__top { display: flex; align-items: flex-start; gap: var(--os-space-3); }
.ota-card__icon { display: inline-flex; padding: var(--os-space-2); border-radius: var(--os-radius-md); background: var(--os-surface-sunken); color: var(--os-text-2); flex: none; }
.ota-card__name { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; color: var(--os-text-2); overflow-wrap: anywhere; }
.ota-card__name > b { font: var(--os-type-h4); font-family: var(--os-font-mono); color: var(--os-text); }
.ota-card__score { display: flex; align-items: center; gap: var(--os-space-3); }
.ota-card__big { font: var(--os-type-kpi); color: var(--os-text); white-space: nowrap; }
.ota-card__big small { font: var(--os-type-small); color: var(--os-text-2); margin-left: var(--os-space-1); }
.ota-card__h { display: flex; align-items: baseline; gap: var(--os-space-2); margin: 0; font: var(--os-type-body-strong); color: var(--os-text); }
.ota-kv { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ota-kv > div { display: grid; gap: var(--os-space-1); padding: var(--os-space-3) var(--os-space-2) var(--os-space-3) 0; border-bottom: var(--os-border-w) solid var(--os-border-subtle); min-width: 0; overflow-wrap: anywhere; }
.ota-kv > div:nth-child(even) { padding-left: var(--os-space-3); border-left: var(--os-border-w) solid var(--os-border-subtle); }
.ota-kv span { font: var(--os-type-caption); color: var(--os-text-2); }
.ota-kv b { font: var(--os-type-body-strong); color: var(--os-text); }
.ota-kv b.is-bad { color: var(--os-bad-text); }
.ota-kv b.is-warn { color: var(--os-warn-text); }
.ota-kv b.is-good { color: var(--os-good-text); }
.ota-kv small { font: var(--os-type-caption); color: var(--os-text-3); }
.ota-why { list-style: none; margin: 0; padding: 0; display: grid; }
.ota-why li { display: flex; align-items: flex-start; gap: var(--os-space-3); padding: var(--os-space-2) 0; border-top: var(--os-border-w) solid var(--os-border-subtle); }
.ota-why li:first-child { border-top: 0; }
.ota-why li > div { display: grid; gap: var(--os-space-1); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ota-why__pts { font: var(--os-type-body-strong); color: var(--os-text); font-variant-numeric: tabular-nums; }
.ota-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-3); }
.ota-notes li { display: grid; gap: var(--os-space-1); overflow-wrap: anywhere; }
.ota-notes__photo { display: block; max-width: 100%; max-height: 240px; border-radius: var(--os-radius-md); }
.ota-photo-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2); }

/* The side panel (a desktop) and the phone's inline lookup */
.ota-lookup-host { display: none; }
.ota-lookup-host__head { display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-2); }
.ota-lookup-host.is-open { display: grid; gap: var(--os-space-3); align-content: start; position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(460px, 100%);
    padding: var(--os-space-4); overflow-y: auto; background: var(--os-surface); border-left: var(--os-border-w) solid var(--os-border); box-shadow: var(--os-shadow-4); }

.ota-overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--os-space-4); background: var(--os-scrim); }
.ota-scan__video { display: block; width: 100%; max-height: 50vh; border-radius: var(--os-radius-md); background: var(--os-surface-sunken); }
.ota-scale .os-input { max-width: 12ch; }
.ota-review td { background: var(--os-surface-sunken); }
.ota-review .os-row { margin-top: var(--os-space-2); }

/* The phone: the asset first, the overview one tap away; wider screens never show the phone's switch */
.ota-phone-only { display: none; }
@media (max-width: 639.98px) {
    .ota-phone-only { display: block; }
    .ota-phone-hide { display: none; }
    .ota-phone-switch { margin-bottom: var(--os-space-3); }
    .ota-phone-switch .os-seg { width: 100%; }
    .ota-lookup-host.is-phone { display: grid; gap: var(--os-space-3); position: static; width: auto; padding: 0; border: 0; box-shadow: none; background: transparent; overflow: visible; }
    .ota-lookup-host.is-phone .ota-lookup-host__head { display: none; }
    .ota-lookup__actions { position: sticky; bottom: 0; padding: var(--os-space-2) 0; background: var(--os-surface); }
}