/* ======================================================
   Gap Assessment components, layered on the Vapptrix shell
   (style.css + theme.css, recoloured teal).
   ====================================================== */

/* ---------- wordmark ---------- */
.ga-brand { display: inline-flex; align-items: center; line-height: 1; text-decoration: none; }
.ga-logo, .ga-mark { height: var(--h, 32px); width: auto; flex: none; display: block; }
.ga-brand .ga-mark { display: none; }

/* ---------- generic ---------- */
.ga { display: flex; flex-direction: column; gap: 20px; }
.ga-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ga-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ga-grid-6040 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1100px) { .ga-grid2, .ga-grid3, .ga-grid-6040 { grid-template-columns: 1fr; } }
.card.pad { padding: 22px 24px; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.small { font-size: 12.5px; }
.ga-section-title { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 6px 0 -6px; }
.ga-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ga-actions form { display: inline; }

/* ---------- assessment header & tabs ---------- */
.ga-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.ga-head h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--text-title); }
.ga-head .meta { margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-muted); font-size: 13.5px; }
.ga-head .meta span { display: inline-flex; align-items: center; gap: 6px; }
.ga-head .meta svg { width: 15px; height: 15px; stroke-width: 2; color: var(--text-dim); }
.ga-ref { font-weight: 600; color: var(--primary); }
.ga-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: #fff; border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow-x: auto; }
.ga-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.ga-tab svg { width: 16px; height: 16px; stroke-width: 2; }
.ga-tab:hover { background: var(--bg-card-hover); color: var(--text-title); }
.ga-tab.on { background: var(--brand-grad-diag); color: #fff; box-shadow: 0 10px 20px -12px rgba(11, 95, 244, .8); }
.ga-tab b { font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: rgba(18, 26, 58, .07); }
.ga-tab.on b { background: rgba(255, 255, 255, .25); }
.ga-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ga-status.in_progress { background: rgba(2, 132, 199, .1); color: #0369a1; }
.ga-status.final { background: rgba(22, 163, 74, .12); color: #15803d; }

/* ---------- score gauge ---------- */
.gauge { position: relative; width: 168px; height: 168px; flex: none; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .mid { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.gauge .mid b { display: block; font-size: 40px; font-weight: 700; letter-spacing: -.03em; color: var(--text-title); line-height: 1; }
.gauge .mid small { display: block; font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.gauge.sm { width: 64px; height: 64px; }
.gauge.sm .mid b { font-size: 17px; }
.gauge.sm .mid small { display: none; }

.ga-score { display: flex; gap: 26px; align-items: center; }
.ga-score .txt h3 { margin: 0 0 4px; font-size: 18px; }
.ga-score .lvl { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; background: rgba(11, 95, 244, .1); color: #0647c6; margin: 6px 0 12px; }
.ga-score p { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.ga-mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.ga-mini-stats div { background: #f6f8fb; border-radius: 12px; padding: 10px 12px; }
.ga-mini-stats b { display: block; font-size: 20px; color: var(--text-title); }
.ga-mini-stats span { font-size: 12px; color: var(--text-muted); }

/* ---------- horizontal bars ---------- */
.ga-bars { display: flex; flex-direction: column; gap: 9px; }
.ga-bar { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 46px; gap: 12px; align-items: center; font-size: 13.5px; text-decoration: none; color: var(--text-title); }
.ga-bar:hover .nm { color: var(--primary); }
.ga-bar .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ga-bar .trk { height: 10px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.ga-bar .trk i { display: block; height: 100%; border-radius: 999px; }
.ga-bar .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- framework tiles ---------- */
.fw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .fw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fw-tile { display: block; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border); text-decoration: none; color: var(--text-title); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.fw-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.fw-tile:hover { box-shadow: var(--shadow-md); color: var(--text-title); }
.fw-tile .n { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.fw-tile .p { font-size: 30px; font-weight: 700; letter-spacing: -.03em; margin: 2px 0 8px; }
.fw-tile .trk { height: 6px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.fw-tile .trk i { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.fw-tile .s { margin-top: 8px; font-size: 12px; color: var(--text-dim); }

/* ---------- chips ---------- */
.fw-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600; margin: 2px 3px 2px 0; white-space: nowrap; }
.fw-chip.iso { background: rgba(11, 95, 244, .1); color: #0647c6; }
.fw-chip.soc2 { background: rgba(2, 132, 199, .1); color: #0369a1; }
.fw-chip.gdpr { background: rgba(124, 58, 237, .1); color: #6d28d9; }
.fw-chip.dpdpa { background: rgba(234, 88, 12, .1); color: #c2410c; }
.fw-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.fw-line > em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-dim); min-width: 52px; }

.st { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.implemented, .st.compliant { background: rgba(22, 163, 74, .1); color: #15803d; }
.st.partial { background: rgba(217, 119, 6, .12); color: #b45309; }
.st.not_implemented, .st.non_compliant { background: rgba(220, 38, 38, .1); color: #b91c1c; }
.st.na { background: #f0f2f6; color: #64748b; }
.src { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.src.auto { background: rgba(234, 179, 8, .16); color: #a16207; }
.src.collector { background: rgba(2, 132, 199, .12); color: #0369a1; }
.src.assessor { background: rgba(22, 163, 74, .1); color: #15803d; }
.crit { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.crit::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }

/* ---------- heatmap ---------- */
.heat { width: 100%; border-collapse: separate; border-spacing: 4px; font-size: 13px; }
.heat th { font-weight: 600; color: var(--text-muted); text-align: center; padding: 6px 4px; font-size: 12.5px; }
.heat th:first-child { text-align: left; }
.heat td { padding: 0; }
.heat td.nm { padding: 6px 8px 6px 0; color: var(--text-title); white-space: nowrap; }
.heat .cell { display: block; text-align: center; padding: 8px 4px; border-radius: 8px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.heat .cell.empty { background: #f1f3f7; color: #94a3b8; font-weight: 500; }

/* ---------- location cards ---------- */
.loc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.loc-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); display: flex; gap: 14px; align-items: center; }
.loc-card h4 { margin: 0 0 4px; font-size: 16px; }
.loc-card .lkv { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }

/* ---------- questionnaire ---------- */
.q-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .q-layout { grid-template-columns: minmax(0, 1fr); } }
.q-nav { position: sticky; top: 84px; padding: 10px; max-height: calc(100vh - 110px); overflow: auto; }
.q-nav a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--text-title); font-size: 13.2px; }
.q-nav a svg { width: 17px; height: 17px; stroke-width: 2; color: var(--text-dim); }
.q-nav a:hover { background: var(--bg-card-hover); }
.q-nav a.on { background: rgba(11, 95, 244, .1); color: #0647c6; font-weight: 600; }
.q-nav a.on svg { color: #0b5ff4; }
.q-nav .sc { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: #fff; }
.q-dhead { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.q-dhead h3 { margin: 0; font-size: 20px; }
.q-dhead p { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; }
.q-item { padding: 18px 22px; border-top: 1px solid rgba(18, 26, 58, .06); }
.q-item:first-child { border-top: 0; }
.q-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.q-top h4 { margin: 0; font-size: 15.5px; color: var(--text-title); }
.q-top h4 .id { color: var(--text-dim); font-weight: 600; margin-right: 6px; font-size: 13px; }
.q-q { margin: 6px 0 10px; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.q-maps { margin-bottom: 12px; }
.q-ans { display: grid; gap: 10px; }
.q-row { display: grid; grid-template-columns: 130px minmax(0, auto) minmax(0, 1fr); gap: 12px; align-items: start; background: #f8fafc; border-radius: 12px; padding: 10px 12px; }
@media (max-width: 1250px) { .q-row { grid-template-columns: 1fr; } }
.q-row .who { font-weight: 600; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.seg { display: inline-flex; background: #fff; border: 1px solid #e2e6ee; border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.seg button:hover { background: #f1f4f8; }
.seg button.on[data-v="implemented"] { background: #16a34a; color: #fff; }
.seg button.on[data-v="partial"] { background: #d97706; color: #fff; }
.seg button.on[data-v="not_implemented"] { background: #dc2626; color: #fff; }
.seg button.on[data-v="na"] { background: #64748b; color: #fff; }
.seg[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.q-notes { width: 100%; min-height: 38px; resize: vertical; border: 1px solid #e2e6ee; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--text-title); background: #fff; }
.q-notes:focus { outline: none; border-color: #0b5ff4; box-shadow: 0 0 0 3px rgba(11, 95, 244, .12); }
.q-ev { font-size: 12px; color: #0369a1; margin-top: 4px; }
.q-rec { margin-top: 10px; font-size: 13px; color: var(--text-muted); display: flex; gap: 8px; }
.q-rec svg { width: 16px; height: 16px; flex: none; color: #ca8a04; margin-top: 1px; stroke-width: 2; }
.q-foot { display: flex; justify-content: space-between; gap: 10px; padding: 16px 22px; border-top: 1px solid rgba(18, 26, 58, .06); }
.saving { font-size: 12px; color: var(--text-dim); }

/* ---------- gap register ---------- */
.ga-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 18px 6px; }
.ga-filters select { height: 38px; border-radius: 10px; border: 1px solid #e2e6ee; padding: 0 12px; font: inherit; font-size: 13.5px; background: #fff; color: var(--text-title); }
.gap-table td { vertical-align: top; }
.gap-table .t b { display: block; color: var(--text-title); font-size: 14px; }
.gap-table .t small { color: var(--text-dim); font-size: 12px; }
.gap-table .rec { font-size: 13px; color: var(--text-muted); max-width: 420px; }
.aff { display: flex; flex-direction: column; gap: 4px; }

/* ---------- roadmap ---------- */
.gantt { width: 100%; border-collapse: collapse; font-size: 13px; }
.gantt th { font-weight: 600; color: var(--text-dim); font-size: 11.5px; padding: 8px 0; text-align: center; border-bottom: 1px solid var(--border); }
.gantt th.l { text-align: left; padding-left: 4px; }
.gantt td { padding: 7px 0; border-bottom: 1px solid rgba(18, 26, 58, .05); }
.gantt td.l { padding: 7px 14px 7px 4px; width: 300px; }
.gantt td.l b { display: block; font-size: 13.5px; color: var(--text-title); }
.gantt td.l small { color: var(--text-dim); }
.gantt .lane { position: relative; height: 26px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), rgba(18, 26, 58, .06) calc(100% / 12 - 1px), rgba(18, 26, 58, .06) calc(100% / 12)); }
.gantt .barx { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; color: #fff; font-size: 11.5px; font-weight: 600; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.phase-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1000px) { .phase-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.phase-card { border-radius: 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.phase-card .w { font-size: 12px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.phase-card b { display: block; font-size: 15px; margin: 4px 0 8px; color: var(--text-title); }
.phase-card .n { font-size: 28px; font-weight: 700; letter-spacing: -.03em; }
.phase-card .n small { font-size: 13px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.ini { border-top: 1px solid rgba(18, 26, 58, .06); padding: 18px 22px; }
.ini:first-child { border-top: 0; }
.ini-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.ini-head h4 { margin: 0; font-size: 16px; }
.ini-head h4 .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(11, 95, 244, .1); color: #0647c6; font-size: 13px; margin-right: 8px; }
.ini-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.ini-meta b { color: var(--text-title); font-weight: 600; }
.ini-sol { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.ini-tasks { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ini-tasks li { display: grid; grid-template-columns: 92px 70px minmax(0, 1fr); gap: 10px; font-size: 13px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: #f8fafc; }
.ini-tasks .ph { font-size: 11.5px; font-weight: 700; color: #0647c6; }

/* ---------- forms ---------- */
.ga-form { display: flex; flex-direction: column; gap: 18px; }
.ga-form .card h3 { margin: 0 0 4px; font-size: 18px; }
.ga-form .card .hint { margin: 0 0 16px; color: var(--text-muted); font-size: 13.5px; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 900px) { .fgrid { grid-template-columns: 1fr; } }
.fgrid .field { margin: 0; }
.fgrid .span2 { grid-column: span 2; }
.fgrid .span3 { grid-column: 1 / -1; }
.field label small { color: var(--text-dim); font-weight: 400; }
.cap-group { margin-bottom: 14px; }
.cap-group h5 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.cap { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #e4e8f0; background: #fff; cursor: pointer; font-size: 13.5px; line-height: 1.35; transition: border-color .15s, background .15s; }
.cap:hover { border-color: rgba(11, 95, 244, .45); }
.cap input { margin-top: 2px; accent-color: #0b5ff4; width: 16px; height: 16px; flex: none; }
.cap:has(input:checked) { border-color: #0b5ff4; background: rgba(11, 95, 244, .06); }
.loc-edit { border: 1.5px solid #e4e8f0; border-radius: 16px; padding: 16px; margin-bottom: 14px; background: #fbfcfe; }
.loc-edit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.loc-edit-head b { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.loc-edit-head b svg { width: 18px; height: 18px; color: #0b5ff4; }
.loc-edit .fgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .loc-edit .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loc-edit .caps { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.form-foot { display: flex; justify-content: flex-end; gap: 10px; position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(transparent, #f5f6fa 30%); }

/* ---------- misc tables ---------- */
.kv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv-table th { text-align: left; color: var(--text-muted); font-weight: 500; padding: 8px 0; width: 42%; }
.kv-table td { padding: 8px 0; color: var(--text-title); font-weight: 500; }
.kv-table tr + tr th, .kv-table tr + tr td { border-top: 1px solid rgba(18, 26, 58, .06); }
.org-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.org-card { display: block; padding: 20px; text-decoration: none; color: var(--text-title); }
.org-card h3 { margin: 0 0 4px; font-size: 18px; }
.org-card .sub { color: var(--text-muted); font-size: 13.5px; }
.org-card .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f1f4f8; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.pill svg { width: 13px; height: 13px; stroke-width: 2; }
.ev-check { display: grid; grid-template-columns: minmax(0, 1fr) 160px 70px 130px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(18, 26, 58, .06); font-size: 13.5px; }
.ev-check:first-child { border-top: 0; }
.dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .dl-cards { grid-template-columns: 1fr; } }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #0f172a; color: #e2e8f0; padding: 10px 12px; border-radius: 10px; overflow-x: auto; white-space: pre; }
.report-doc { padding: 26px 30px; }
.report-doc h3 { margin: 18px 0 8px; font-size: 17px; }
.report-doc p { color: var(--text-muted); line-height: 1.6; font-size: 14px; margin: 0 0 10px; }
.report-doc ol, .report-doc ul { color: var(--text-muted); font-size: 14px; line-height: 1.7; padding-left: 20px; }

/* Content shows in its finished state immediately - no entrance fades. */
.animate-in { animation: none !important; opacity: 1 !important; transform: none !important; }

.ga-tabs { flex-wrap: wrap; gap: 4px; }
.ga-tab { padding: 8px 11px; font-size: 13px; }
.loc-edit .fgrid .span2 { grid-column: auto; }

/* Vapptrix tables never wrap cells; long control text here must. */
.db-table td { white-space: normal; }
.db-table td.nowrap, .db-table .nowrap { white-space: nowrap; }
.gap-table td, .gap-table th { vertical-align: top; }

/* ---------- control library table ---------- */
.lib-wrap { overflow-x: auto; padding: 4px 14px 14px; }
.lib-table { width: 100%; min-width: 980px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.lib-table thead th { position: sticky; top: 0; z-index: 1; background: #f6f7fa; text-align: left; font-weight: 600; font-size: 12.5px; color: var(--text-title); padding: 11px 10px; border-bottom: 1px solid var(--border); }
.lib-table thead th:first-child { border-radius: 10px 0 0 10px; }
.lib-table thead th:last-child { border-radius: 0 10px 10px 0; }
.lib-table td { padding: 12px 10px; vertical-align: top; border-bottom: 1px solid rgba(18, 26, 58, .06); color: var(--text-title); overflow-wrap: break-word; }
.lib-table tbody tr:not(.lib-dom):hover td { background: #fafbfd; }
.lib-dom td { background: rgba(11, 95, 244, .07); color: #0647c6; font-weight: 600; font-size: 13.5px; padding: 9px 12px; border-bottom: 0; }
.lib-dom td svg { width: 16px; height: 16px; stroke-width: 2; vertical-align: -3px; margin-right: 6px; }
.lib-dom td span { float: right; font-weight: 500; color: var(--text-dim); font-size: 12px; }
.lib-id { font-weight: 600; color: var(--text-dim); font-size: 12.5px; white-space: nowrap; }
.lib-title { font-weight: 600; line-height: 1.35; }
.lib-title small { display: block; font-weight: 400; color: var(--text-dim); font-size: 11.5px; margin-top: 4px; }
.lib-q { line-height: 1.5; color: var(--text-title); font-weight: 400; }
.lib-rec { display: flex; gap: 6px; margin-top: 6px; color: var(--text-muted); font-size: 12.5px; }
.lib-rec svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: #ca8a04; stroke-width: 2; }
.lib-refs { line-height: 1.9; }
.lib-refs .fw-chip { margin: 0 3px 3px 0; }
.lib-table thead .fw-chip { font-size: 12px; margin: 0; }
.lib-scope { white-space: nowrap; }
.gap-reg .t b { display: block; font-size: 13.5px; line-height: 1.35; }
.gap-reg .t small { display: block; margin-top: 4px; color: var(--text-dim); font-size: 11.5px; line-height: 1.5; }
.gap-reg .rec { color: var(--text-title); line-height: 1.5; max-width: none; }
.gap-reg .aff { gap: 8px; }
.gap-reg .aff-row b { margin-right: 4px; }
.gap-reg .ctx { display: flex; gap: 6px; margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: rgba(11, 95, 244, .07); color: #0647c6; font-size: 12.5px; }
.gap-reg .ctx svg { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke-width: 2; }
.gap-reg .q-maps { margin: 0; }
.gap-reg .fw-line > em { min-width: 44px; }

/* ---------- framework picker ---------- */
.fw-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .fw-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fw-card { position: relative; display: flex; gap: 12px; padding: 16px; border-radius: 16px; border: 1.5px solid #e4e8f0; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.fw-card:hover { border-color: color-mix(in srgb, var(--c) 50%, #fff); }
.fw-card input { position: absolute; opacity: 0; pointer-events: none; }
.fw-card:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.fw-tick { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid #cbd2df; display: grid; place-items: center; color: transparent; margin-top: 1px; }
.fw-tick svg { width: 14px; height: 14px; }
.fw-card:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 6%, #fff); }
.fw-card:has(input:checked) .fw-tick { background: var(--c); border-color: var(--c); color: #fff; }
.fw-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fw-body b { font-size: 15px; color: var(--text-title); }
.fw-body small { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.fw-body em { font-style: normal; font-size: 12px; color: #b45309; }
.fw-n { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--c); }
.fw-scope { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #f6f8fb; font-size: 14px; color: var(--text-title); }
.fw-scope small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12.5px; }
.fw-scope.bad { background: rgba(220, 38, 38, .08); color: #b91c1c; }
.ga-scope { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ga-scope .fw-chip { margin: 0; }
.ga-scope small { color: var(--text-dim); margin-left: 2px; }
.ga-scope a { font-size: 12.5px; font-weight: 600; margin-left: 4px; }
.cov-ctrls { display: flex; flex-wrap: wrap; gap: 6px; }
.cov-ctrls a, .cov-ctrls button { border: 0; font: inherit; cursor: pointer; text-align: left;
   display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 9px; border-radius: 8px; background: #f3f5f9; color: var(--text-title); font-size: 12.5px; text-decoration: none; line-height: 1.35; }
.cov-ctrls a b, .cov-ctrls button b { color: var(--text-dim); font-size: 11.5px; }
.cov-ctrls a:hover, .cov-ctrls button:hover { background: rgba(11, 95, 244, .1); color: #0647c6; }
.lib-table tr:target td { background: rgba(234, 179, 8, .12); }

/* ---------- audit fixes ---------- */
.cap-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-chips .pill { padding: 3px 8px; font-size: 12px; }
.ga-head > div:first-child { flex: 1 1 560px; min-width: 0; }
.ga-head .meta + .meta { margin-top: 8px; }
.ga-head .ga-actions { flex: none; }
.fw-tiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-bottom: 4px; }
.code { white-space: pre-wrap; word-break: break-all; }
.q-jump { display: none; padding: 14px 16px 0; gap: 8px; flex-direction: column; }
.q-jump label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.q-jump select { height: 42px; border-radius: 10px; border: 1.5px solid #dfe4ec; padding: 0 10px; font: inherit; font-size: 14px; background: #fff; color: var(--text-title); }
@media (max-width: 1000px) {
  .q-nav { display: none; }
  .q-jump { display: flex; }
  .ga-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ga-tabs::-webkit-scrollbar { display: none; }
  .ga-tab { flex: none; }
  .q-top { flex-direction: column; gap: 4px; }
}
@media (max-width: 600px) {
  .q-item { padding: 16px; }
  .q-row { padding: 10px; }
  .seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; box-sizing: border-box; }
  .seg button { white-space: normal; }
  .fw-line > em { min-width: 44px; }
}
.q-ctx { margin-top: 10px; display: flex; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(11, 95, 244, .07); color: #0647c6; font-size: 13px; }
.q-ctx svg { width: 15px; height: 15px; flex: none; margin-top: 1px; stroke-width: 2; }

/* ---------- plain-language guidance ---------- */
.gd { margin-top: 8px; }
.gd-plain { margin: 0 0 10px; color: var(--text-title); font-size: 14px; line-height: 1.55; }
.gd-ask { padding: 10px 12px; border-radius: 10px; background: rgba(11, 95, 244, .07); border-left: 3px solid #0b5ff4; font-size: 13.5px; line-height: 1.5; color: var(--text-title); }
.gd-tag { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0647c6; margin-bottom: 3px; }
.gd-more { margin-top: 8px; }
.gd-more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--primary); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.gd-more summary::-webkit-details-marker { display: none; }
.gd-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: rgba(11, 95, 244, .12); font-size: 12px; }
.gd-more[open] summary::before { content: "–"; }
.gd-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.gd-box { background: #f8fafc; border: 1px solid #eef1f6; border-radius: 10px; padding: 10px 12px; font-size: 12.8px; color: var(--text-title); line-height: 1.5; }
.gd-box h6 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.gd-box p { margin: 0; }
.gd-box ul { margin: 0; padding-left: 16px; }
.gd-box li { margin: 2px 0; }
.gd-tools + .gd-tools { margin-top: 8px; }
.gd-tools em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 6px; display: inline-block; margin-bottom: 3px; }
.gd-tools em.free { background: rgba(22, 163, 74, .1); color: #15803d; }
.gd-tools em.paid { background: rgba(2, 132, 199, .1); color: #0369a1; }
.gd-collect { margin-top: 8px !important; color: var(--text-muted); }
.q-plan { margin-top: 8px; }

/* ---------- monthly plan ---------- */
.mo-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .mo-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mo-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: #fff; text-decoration: none; color: var(--text-title); }
.mo-chip:hover { border-color: var(--primary-border); color: var(--text-title); }
.mo-chip b { font-size: 13.5px; }
.mo-chip small { color: var(--text-dim); font-size: 11.5px; }
.mo-chip span { font-size: 12px; color: var(--text-muted); }
.mo-chip em { font-style: normal; color: #dc2626; font-weight: 600; }
.mo-chip.empty { opacity: .6; }
.mo { padding: 0; scroll-margin-top: 80px; }
.mo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 10px; }
.mo-head h3 { margin: 0; font-size: 18px; }
.mo-head h3 span { color: var(--text-dim); font-weight: 500; font-size: 15px; }
.mo-focus { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.mo-check { margin: 0 22px 10px; display: flex; gap: 8px; padding: 9px 12px; border-radius: 10px; background: rgba(2, 132, 199, .08); color: #075985; font-size: 13px; }
.mo-check svg { width: 15px; height: 15px; flex: none; margin-top: 1px; stroke-width: 2; }
.mo-table td { font-size: 13px; line-height: 1.45; }
.ini-wrap { padding: 0; }
.ini-wrap > summary { cursor: pointer; padding: 16px 22px; list-style: none; }
.ini-wrap > summary::-webkit-details-marker { display: none; }

/* ---------- baseline & documents ---------- */
.bl-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.bl-counts div { background: #f6f8fb; border-radius: 12px; padding: 12px 14px; }
.bl-counts b { display: block; font-size: 24px; }
.bl-counts span { font-size: 12.5px; color: var(--text-muted); }
.bl-rule { padding: 14px 22px; border-top: 1px solid rgba(18, 26, 58, .06); }
.bl-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.bl-top b { font-size: 14.5px; color: var(--text-title); font-weight: 600; line-height: 1.45; }
.bl-id { display: inline-block; min-width: 46px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.bl-why { margin: 6px 0 0 46px; font-size: 13px; color: var(--text-muted); }
.bl-rule .gd-more { margin-left: 46px; }
@media (max-width: 700px) { .bl-top { flex-direction: column; } .bl-why, .bl-rule .gd-more { margin-left: 0; } }
.ev-steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.ev-steps li b { display: block; color: var(--text-title); font-size: 14px; }
.ev-steps li span { color: var(--text-muted); font-size: 13.5px; line-height: 1.5; }
.ev-tools { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text-title); }
@media (max-width: 700px) {
  .mo-table { min-width: 0 !important; table-layout: auto; }
  .mo-table colgroup, .mo-table thead { display: none; }
  .mo-table tr { display: block; padding: 12px 4px; border-bottom: 1px solid rgba(18, 26, 58, .08); }
  .mo-table td { display: block; border: 0; padding: 3px 6px; }
  .mo-table td:nth-child(4)::before { content: "Owner: "; font-weight: 600; }
  .mo-table td:nth-child(5)::before { content: "Done when: "; font-weight: 600; }
}
.gd-note { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: #fffbeb; border-left: 3px solid #d97706; font-size: 13px; line-height: 1.5; color: var(--text-title); }
.gd-note .gd-tag { color: #b45309; }
.gd-note div + div { margin-top: 3px; }
.bl-note { margin: 8px 0 0 46px; }
@media (max-width: 700px) { .bl-note { margin-left: 0; } }

/* ---------- what counts as done / documentation ---------- */
.gd-accept { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #fff; border: 1px solid #e6eaf1; }
.gd-accept .gd-tag { color: var(--text-dim); margin-bottom: 6px; }
.acc { display: grid; grid-template-columns: 138px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 1.5; padding: 4px 0; }
.acc + .acc { border-top: 1px dashed #e6eaf1; }
.acc b { font-size: 12px; font-weight: 700; display: inline-flex; align-items: flex-start; gap: 6px; }
.acc b::before { flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; color: #fff; margin-top: 1px; }
.acc.ok b { color: #15803d; } .acc.ok b::before { content: "✓"; background: #16a34a; }
.acc.best b { color: #0369a1; } .acc.best b::before { content: "★"; background: #0284c7; }
.acc.no b { color: #b91c1c; } .acc.no b::before { content: "✕"; background: #dc2626; }
.acc span { color: var(--text-title); }
@media (max-width: 700px) { .acc { grid-template-columns: 1fr; gap: 2px; } }
.gd-docs { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: #f5f3ff; border-left: 3px solid #7c3aed; font-size: 13px; line-height: 1.5; color: var(--text-title); }
.gd-docs .gd-tag { color: #6d28d9; }
.gd-docs ul { margin: 2px 0 0; padding-left: 18px; }

/* ---------- organisation users ---------- */
.u-edit { position: relative; display: inline-block; }
.u-edit > summary { list-style: none; cursor: pointer; }
.u-edit > summary::-webkit-details-marker { display: none; }
.u-edit[open] > summary { background: var(--bg-card-hover); }
.u-edit[open] { position: static; }
.u-edit .u-form, .u-edit > form:last-child { margin-top: 10px; }
.u-form { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 10px 14px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: #fbfcfe; white-space: normal; min-width: 420px; }
.u-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-title); }
.u-form label small { font-weight: 400; color: var(--text-dim); }
.u-form .u-check { flex-direction: row; align-items: center; gap: 8px; }
.u-form .ga-actions { grid-column: 1 / -1; }
.u-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.u-add h4 { margin: 0 0 10px; font-size: 15px; }
.u-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
@media (max-width: 1000px) { .u-grid, .u-form { grid-template-columns: 1fr; min-width: 0; } }

/* ---------- compact guidance in tables ---------- */
.gd-compact .gd-plain { margin: 0 0 8px; font-size: 13.5px; }
.gd-compact .gd-ask { font-size: 13.5px; }
.gd-compact .gd-more summary { font-size: 12.5px; }
.gd-stack { margin-top: 8px; display: flex; flex-direction: column; gap: 0; }
.gd-stack .gd-grid { margin-top: 8px; }
.lib-q .acc { grid-template-columns: 128px minmax(0, 1fr); }
.fw-compact { display: flex; flex-direction: column; gap: 4px; }
.fw-compact > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.fw-compact em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-dim); min-width: 40px; letter-spacing: .03em; }
.fw-compact .fw-chip { margin: 0 2px 2px 0; font-size: 11px; padding: 1px 6px; }
.lib-table { min-width: 860px; }
.gd-more summary .dim { font-weight: 500; }
.gd-plain-in { margin: 0 0 8px !important; padding: 8px 10px; border-radius: 8px; background: #f8fafc; }
.gap-reg .gd-compact .gd-ask { margin-top: 0; }

/* ---------- tabbed detail panel ---------- */
.gt { margin-top: 10px; border: 1px solid #e6eaf1; border-radius: 12px; background: #fff; overflow: hidden; }
.gt-bar { display: flex; gap: 2px; padding: 4px; background: #f6f8fb; border-bottom: 1px solid #e6eaf1; overflow-x: auto; scrollbar-width: none; }
.gt-bar::-webkit-scrollbar { display: none; }
.gt-bar button { flex: none; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.gt-bar button:hover { color: var(--text-title); background: #eef1f6; }
.gt-bar button.on { background: #fff; color: #0647c6; box-shadow: 0 1px 3px rgba(18, 26, 58, .12); }
.gt-bar button i { font-style: normal; font-size: 11px; margin-left: 3px; padding: 0 6px; border-radius: 999px; background: rgba(18, 26, 58, .07); color: var(--text-muted); }
.gt-bar button.on i { background: rgba(11, 95, 244, .12); color: #0647c6; }
.gt-panel { padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text-title); }
.gt-panel[hidden] { display: none; }
.gt-text { margin: 0; }
.gt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.gt-list li { position: relative; padding-left: 26px; }
.gt-list li::before { position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.gt-list.check li::before { content: "✓"; border: 1.5px solid #0b5ff4; color: #0b5ff4; }
.gt-list.docs li::before { content: "≡"; background: rgba(124, 58, 237, .1); color: #6d28d9; font-size: 13px; }
.gt-list.set li::before { content: "›"; background: rgba(2, 132, 199, .1); color: #0369a1; font-size: 14px; }
.gt-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: 12px; color: var(--text-dim); }
.gt-chips em { font-style: normal; padding: 2px 8px; border-radius: 7px; background: rgba(124, 58, 237, .08); color: #6d28d9; font-weight: 600; }
.gt-how { margin-top: 10px; display: flex; flex-direction: column; gap: 3px; padding: 9px 12px; border-radius: 10px; background: rgba(2, 132, 199, .06); border-left: 3px solid #0284c7; }
.gt-how b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #0369a1; }
.gt-how .gt-list { margin-top: 6px; }
.bl-how { margin: 10px 0 0; }
.gt-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gt-tcol { border-radius: 10px; border: 1px solid #e6eaf1; overflow: hidden; }
.gt-tcol h6 { margin: 0; padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gt-tcol.free h6 { background: rgba(22, 163, 74, .08); color: #15803d; }
.gt-tcol.paid h6 { background: rgba(2, 132, 199, .08); color: #0369a1; }
.gt-tool { padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.gt-tool + .gt-tool { border-top: 1px solid #f0f2f6; }
.gt-tool b { font-size: 13px; font-weight: 600; color: var(--text-title); }
.gt-tool span { font-size: 12px; color: var(--text-muted); }
.gt-example { position: relative; padding: 10px 12px 10px 38px; border-radius: 10px; background: #fffbeb; color: #78350f; font-size: 13px; }
.gt-example::before { content: "“"; position: absolute; left: 12px; top: 2px; font-size: 30px; line-height: 1; color: #d97706; font-family: Georgia, serif; }
.gt-panel .acc + .acc { border-top: 1px dashed #e6eaf1; }
.gd-compact .gt { margin-top: 8px; }

/* ---------- control library filters ---------- */
.lib-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.lib-nav .ct { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: #f1f4f8; padding: 1px 8px; border-radius: 999px; }
.lib-nav a.on .ct { background: rgba(11, 95, 244, .14); color: #0647c6; }
.lib-nav a.zero { opacity: .45; }
.lib-filters { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }
.lib-dom-select { display: none; }
.lib-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid #dfe4ec; background: #fff; }
.lib-search:focus-within { border-color: #0b5ff4; box-shadow: 0 0 0 4px rgba(11, 95, 244, .12); }
.lib-search svg { width: 18px; height: 18px; color: #8a91a8; flex: none; stroke-width: 2; }
.lib-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--text-title); }
.lib-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lib-row select, .lib-dom-select { height: 36px; border-radius: 10px; border: 1.5px solid #dfe4ec; padding: 0 30px 0 12px; font: inherit; font-size: 13px; color: var(--text-title); background: #fff; }
.lib-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #f1f4f8; }
.lib-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.lib-seg a i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.lib-seg a:hover { color: var(--text-title); }
.lib-seg a.on { background: #fff; color: var(--text-title); box-shadow: 0 1px 3px rgba(18, 26, 58, .12); }
.lib-count { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.lib-count b { color: var(--text-title); }
@media (max-width: 1000px) {
  .lib-layout { grid-template-columns: minmax(0, 1fr); }
  .lib-nav { display: none; }
  .lib-dom-select { display: block; width: 100%; height: 42px; }
  .lib-count { margin-left: 0; width: 100%; }
}
.lib-layout { grid-template-columns: 224px minmax(0, 1fr); }
.lib-layout .lib-table { min-width: 0; }
.lib-layout .lib-wrap { padding: 4px 12px 12px; }
.lib-layout .lib-table td, .lib-layout .lib-table th { padding-left: 8px; padding-right: 8px; }
.lib-layout .fw-compact em { min-width: 36px; }
.lib-layout .lib-dom td span { float: none; margin-left: 8px; }
.lib-nav a { grid-template-columns: 18px minmax(0, 1fr) auto; font-size: 12.8px; }
@media (max-width: 1000px) {
  .lib-layout { grid-template-columns: minmax(0, 1fr); }
  .lib-layout .lib-table, .lib-layout .lib-table tbody { display: block; }
  .lib-layout .lib-table colgroup, .lib-layout .lib-table thead { display: none; }
  .lib-layout .lib-table tr { display: block; padding: 12px 4px; border-bottom: 1px solid rgba(18, 26, 58, .08); }
  .lib-layout .lib-table td { display: block; border: 0; padding: 4px 6px; }
  .lib-layout .lib-dom td { padding: 9px 10px; border-radius: 8px; }
  .lib-seg { flex-wrap: wrap; }
  .lib-row select { flex: 1 1 140px; }
}

/* ---------- library: everything in the top bar ---------- */
.lib-layout { display: block; }
.lib-layout .lib-dom-select { display: block; }
.lib-top { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 10px; }
.lib-top .lib-dom-select { height: 44px; border-radius: 12px; font-size: 14px; width: 100%; }
@media (max-width: 700px) { .lib-top { grid-template-columns: 1fr; } }

/* ---------- collapsible left menu ---------- */
.nav-min-btn { margin: 8px 14px 16px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; flex: none; }
.nav-min-btn:hover { color: var(--text-title); border-color: var(--primary-border); }
.nav-min-btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.sidebar, .sidebar .nav-link { transition: width .2s; }
@media (min-width: 901px) {
  body.nav-min .sidebar { width: 84px; }
  body.nav-min .sidebar .nav-txt, body.nav-min .sidebar .ga-logo { display: none; }
  body.nav-min .sidebar .ga-brand .ga-mark { display: block; }
  body.nav-min .sidebar-head { padding-left: 0; padding-right: 0; justify-content: center; }
  body.nav-min .sidebar-scroll { padding-left: 12px; padding-right: 12px; }
  body.nav-min .nav-label { font-size: 0; height: 1px; margin: 12px 8px; background: #eef1f6; }
  body.nav-min .nav-label:first-child { margin-top: 4px; }
  body.nav-min .nav-link { justify-content: center; padding: 6px 0; }
  body.nav-min .nav-link.active::before { display: none; }
  body.nav-min .nav-min-btn { justify-content: center; margin: 8px 12px 16px; }
  body.nav-min .nav-min-btn svg { transform: rotate(180deg); }
}
@media (max-width: 900px) { .nav-min-btn { display: none; } }

/* ---------- dropdowns: one consistent custom arrow everywhere ---------- */
select:not([multiple]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6475' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 40px !important;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
}
select:not([multiple]):hover { border-color: rgba(11, 95, 244, .45) !important; }
select:not([multiple]):focus {
  outline: none; border-color: #0b5ff4 !important; box-shadow: 0 0 0 4px rgba(11, 95, 244, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}
select:disabled { cursor: not-allowed; opacity: .6; }
select::-ms-expand { display: none; }

/* Pages use the full width beside the menu (expanded or collapsed). */
.content { max-width: none; }
[hidden] { display: none !important; }
.lib-seg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.lib-seg button i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.lib-seg button:hover { color: var(--text-title); }
.lib-seg button.on { background: #fff; color: var(--text-title); box-shadow: 0 1px 3px rgba(18, 26, 58, .12); }
/* framework refs: label column + chips that wrap under each other, never under the label */
.fw-compact > div { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 0 4px; }
.fw-compact em { min-width: 0; padding-top: 3px; }
.fw-refs { display: flex; flex-wrap: wrap; gap: 3px; }
.fw-refs .fw-chip { margin: 0; white-space: nowrap; }

/* ---------- dashboard ---------- */
.dash { gap: 18px; }
.dash-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 22px 26px; border-radius: 20px; color: #fff;
  /* the logo gradient, deepened so the white text reads on every part of it */
  background: radial-gradient(60% 160% at 0% 0%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(115deg, #0739b8 0%, #0058fb 30%, #0786d6 55%, #079fa8 78%, #17a653 100%); }
.dash-hero h2 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.dash-hero p { margin: 4px 0 0; color: rgba(255, 255, 255, .86); font-size: 14.5px; }
.dash-hero .btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .35); }
.dash-hero .btn.ghost:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.dash-hero .btn:not(.ghost) { background: #fff; color: #0647c6; box-shadow: none; }
.dash-hero .btn:not(.ghost):hover { background: #effaf3; color: #0647c6; }
.dash-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-kpi { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-title); }
a.dash-kpi:hover { border-color: var(--primary-border); color: var(--text-title); }
.dash-kpi .ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; }
.dash-kpi .ic svg { width: 21px; height: 21px; stroke-width: 2; }
.dash-kpi.teal .ic { background: rgba(11, 95, 244, .12); color: #0b5ff4; }
.dash-kpi.blue .ic { background: rgba(2, 132, 199, .12); color: #0284c7; }
.dash-kpi.green .ic { background: rgba(22, 163, 74, .12); color: #16a34a; }
.dash-kpi.red .ic { background: rgba(220, 38, 38, .1); color: #dc2626; }
.dash-kpi.amber .ic { background: rgba(217, 119, 6, .12); color: #d97706; }
.dash-kpi small { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.dash-kpi b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.dash-kpi em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-dim); }
.dash-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 4px 2px -6px; }
.dash-sec h3 { margin: 0; font-size: 17px; }
.dash-sec a { font-size: 13px; font-weight: 600; }
.dash-sec.in { margin: 0 0 10px; }
.dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 16px; }
@media (max-width: 700px) { .dash-cards { grid-template-columns: 1fr; } .dash-ready { grid-template-columns: 1fr; gap: 8px; } }
.dash-card { padding: 0; display: flex; flex-direction: column; container-type: inline-size; }
.dc-main { flex: 1; display: flex; flex-direction: column; }
@container (min-width: 880px) {
  .dc-main { flex-direction: row; align-items: stretch; }
  .dc-main .dc-body { flex: 1.1; padding: 12px 24px 20px; gap: 28px; }
  .dc-main .gauge.md { width: 128px; height: 128px; }
  .dc-main .dc-foot { flex: 1; margin: 0 0 20px; border-top: 0; border-left: 1px solid var(--border); padding: 4px 24px; justify-content: center; gap: 14px; }
}
.dc-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding: 18px 20px 6px; }
.dc-head h4 { margin: 0; font-size: 17px; }
.dc-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.dc-meta b { color: var(--primary); }
.dc-body { display: flex; gap: 20px; align-items: center; padding: 10px 20px 14px; }
.gauge.md { width: 112px; height: 112px; }
.gauge.md .mid b { font-size: 26px; }
.dc-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dc-mat { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(11, 95, 244, .1); color: #0647c6; }
.dc-row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.dc-row b { color: var(--text-title); }
.dc-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #eef1f6; gap: 2px; }
.dc-stack i { display: block; height: 100%; }
.dc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-muted); }
.dc-legend span { display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; }
.dc-legend i { width: 8px; height: 8px; border-radius: 2px; }
.dc-bar { height: 8px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.dc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand-grad); }
.dc-foot { margin-top: auto; padding: 12px 20px 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.dc-fw { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-fw .fw-chip { margin: 0; }
.dc-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-muted); }
.dc-mini span { display: inline-flex; align-items: center; gap: 5px; }
.dc-mini svg { width: 14px; height: 14px; stroke-width: 2; color: var(--text-dim); }
.dash-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1000px) { .dash-two { grid-template-columns: 1fr; } }
.dash-panel { padding: 18px 20px; }
.dash-act { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid rgba(18, 26, 58, .06); text-decoration: none; color: var(--text-title); }
.dash-act:first-of-type { border-top: 0; }
.dash-act:hover b { color: var(--primary); }
.dash-act .sev { flex: none; margin-top: 1px; }
.dash-act b { display: block; font-size: 13.5px; font-weight: 600; }
.dash-act small { font-size: 12px; color: var(--text-muted); }
.dash-ready { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid rgba(18, 26, 58, .06); }
.dash-ready:first-of-type { border-top: 0; }
.dr-name b { display: block; font-size: 13.5px; }
.dr-name small { font-size: 12px; color: var(--text-dim); }
.dr-bars { display: flex; flex-direction: column; gap: 8px; }
.dr-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.dr-row b { text-align: right; color: var(--text-title); }
.dash-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .dash-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-steps > div { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px dashed #dbe2ea; }
.dash-steps span { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: rgba(11, 95, 244, .1); color: #0647c6; }
.dash-steps b { font-size: 13.5px; }
.dash-steps small { font-size: 12px; color: var(--text-muted); }
.dr-weak { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.dr-weak > span { width: 100%; font-weight: 600; color: var(--text-title); margin-bottom: 2px; }
.dr-weak a { padding: 4px 10px; border-radius: 999px; background: #f4f6f9; border: 1px solid var(--border); color: var(--text-title); text-decoration: none; }
.dr-weak a:hover { border-color: var(--primary-border); }
.dash-more { display: block; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(18, 26, 58, .06); font-size: 13px; font-weight: 600; }
.dc-head .ga-status { white-space: nowrap; flex: none; }
@media (max-width: 700px) {
  .dash-hero { padding: 18px; }
  .dash-hero h2 { font-size: 21px; }
  .dash-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .dash-kpi .ic { width: 34px; height: 34px; border-radius: 10px; }
  .dash-kpi .ic svg { width: 18px; height: 18px; }
  .dash-kpi:last-child { grid-column: span 2; }
  .dc-body { gap: 14px; }
  .gauge.md { width: 96px; height: 96px; }
}

/* ---------- client home ---------- */
.ch-fw { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ch-fw-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 46px; gap: 10px; align-items: center; text-decoration: none; color: var(--text-title); font-size: 12.5px; }
.ch-fw-row .fw-chip { margin: 0; justify-self: start; }
.ch-fw-row b { text-align: right; }
.ch-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(18, 26, 58, .06); }
.ch-steps li:first-child { border-top: 0; padding-top: 2px; }
.ch-steps .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: rgba(11, 95, 244, .1); color: #0647c6; }
.ch-steps .n svg { width: 16px; height: 16px; stroke-width: 2.6; }
.ch-steps li.done .n { background: #16a34a; color: #fff; }
.ch-steps li.done b { color: var(--text-muted); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
.ch-steps b { display: block; font-size: 13.5px; }
.ch-steps small { font-size: 12px; color: var(--text-muted); }
.ch-steps .btn { white-space: nowrap; }
.ch-owner { display: inline-flex !important; align-items: center; gap: 4px; margin-top: 2px; color: var(--text-dim) !important; }
.ch-owner svg { width: 12px; height: 12px; }
.dash-act small { display: block; }
.ch-prog { display: grid; grid-template-columns: 32px minmax(0, 1fr) 52px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(18, 26, 58, .06); text-decoration: none; color: var(--text-title); }
.ch-prog:first-of-type { border-top: 0; }
.ch-prog b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ch-prog em { font-style: normal; font-size: 12.5px; color: var(--text-muted); text-align: right; font-weight: 600; }
.ch-prog:hover b { color: var(--primary); }
.ch-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(11, 95, 244, .1); color: #0b5ff4; flex: none; }
.ch-ico svg { width: 17px; height: 17px; stroke-width: 2; }
.ch-ico.red { background: rgba(220, 38, 38, .1); color: #dc2626; }
.ch-ico.green { background: rgba(22, 163, 74, .12); color: #16a34a; }
.ch-ico.blue { background: rgba(2, 132, 199, .12); color: #0284c7; }
.ch-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ch-loc { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: #fafbfc; }
.ch-loc > b { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ch-loc > b svg { width: 15px; height: 15px; color: #0b5ff4; }
.ch-loc > small { margin-left: 6px; color: var(--text-dim); font-size: 12px; }
.ch-loc-n { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.ch-loc-n em { font-style: normal; font-weight: 700; color: var(--text-title); font-size: 14px; margin-right: 3px; }
.ch-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ch-dl a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--text-title); }
.ch-dl a:hover { border-color: var(--primary-border); }
.ch-dl b { display: block; font-size: 13.5px; }
.ch-dl small { font-size: 12px; color: var(--text-muted); }
.ch-others { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.ch-others > span { font-weight: 600; margin-right: 4px; }
.ch-others a { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; }
@media (max-width: 700px) {
  .ch-dl { grid-template-columns: 1fr; }
  .ch-steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .ch-steps .btn { grid-column: 2; justify-self: start; }
}

/* in-page view switches (buttons, so the URL never changes) */
button.ga-tab { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
button.ga-tab.on { background: var(--brand-grad-diag); }
button.fw-tile { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.fw-tile.on { outline: 2px solid var(--c); outline-offset: -1px; }
@keyframes libFlash { from { background: rgba(11, 95, 244, .16); } to { background: transparent; } }
tr.lib-flash > td { animation: libFlash 1.8s ease-out; }
.ch-weak { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.fw-tile .p small { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; }


/* Page switches are instant: no cross-fade between pages (the theme default animated every click). */
@view-transition { navigation: none; }

/* Grcly palette: the 'teal' tone becomes the logo's cyan so it stays distinct from the blue tone */
.dash-kpi.teal .ic, .ch-ico.teal { background: rgba(2, 160, 170, .12); color: #0396a6; }

/* green from the logo in the small accents too */
.dash-kpi.green .ic, .ch-ico.green { background: rgba(31, 184, 90, .13); color: #149a4a; }
.dash-kpi.teal .ic, .ch-ico.teal { background: rgba(8, 170, 182, .13); color: #078f9a; }
.dash-steps span, .ch-steps .n { background: linear-gradient(135deg, rgba(0, 88, 251, .12), rgba(31, 184, 90, .16)); color: #0647c6; }
.dc-mat { background: linear-gradient(90deg, rgba(0, 88, 251, .09), rgba(31, 184, 90, .12)); }

/* No flicker between pages: the loading bar only shows when a page takes longer than a moment,
   and text never flashes in a fallback font (fonts are preloaded and cached). */
.nav-progress.go { animation-delay: .25s; opacity: 0; animation-name: nav-go-late; }
@keyframes nav-go-late { 0% { width: 0; opacity: 1; } 10% { width: 45%; opacity: 1; } 40% { width: 75%; opacity: 1; } 100% { width: 92%; opacity: 1; } }
.nav-progress.done { transition: none; }

/* ======================================================================
   Organisation profile: 3D security estate
   ====================================================================== */
.es-card, .es-tiles, .es-two { --good: #22c55e; --fair: #f5b301; --weak: #f97316; --poor: #ef4444; --none: #94a3b8; }
.good { --tone: var(--good); } .fair { --tone: var(--fair); } .weak { --tone: var(--weak); } .poor { --tone: var(--poor); } .none { --tone: var(--none); }
.es-card { position: relative; border-radius: 22px; padding: 20px 22px 18px; color: #fff; overflow: hidden;
  background: radial-gradient(70% 90% at 15% 0%, rgba(0, 88, 251, .45), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(60, 233, 87, .16), transparent 60%),
    linear-gradient(160deg, #061531 0%, #0a2257 55%, #072b4f 100%);
  box-shadow: 0 30px 60px -36px rgba(6, 30, 90, .8), inset 0 1px 0 rgba(255, 255, 255, .08); }
.es-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.es-head h3 { margin: 0; font-size: 18px; color: #fff; }
.es-head p { margin: 3px 0 0; font-size: 13px; color: rgba(255, 255, 255, .7); }
.es-live { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; }
.es-live b { font-weight: 600; }
.es-upd { color: rgba(255, 255, 255, .6); } .es-upd em { font-style: normal; font-variant-numeric: tabular-nums; }
.es-dot { width: 8px; height: 8px; border-radius: 50%; background: #3ce957; box-shadow: 0 0 6px rgba(60, 233, 87, .7); }
.es-dot.off { background: #94a3b8; animation: none; }
@keyframes esLive { 0% { box-shadow: 0 0 0 0 rgba(60, 233, 87, .55); } 100% { box-shadow: 0 0 0 10px rgba(60, 233, 87, 0); } }
.es-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-top: 10px; align-items: stretch; }
.es-stage { position: relative; perspective: 1400px; min-height: 300px; }
.es-svg { display: block; width: 100%; height: auto; max-height: 520px; transform: rotateX(var(--sx, 0deg)) rotateY(var(--sy, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; overflow: visible; }
.es-grid line { stroke: rgba(120, 170, 255, .11); stroke-width: 1; }
.es-track { stroke: rgba(255, 255, 255, .07); stroke-width: 3; stroke-linecap: round; }
.es-flowline { stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 14; animation: esFlow 2.6s linear infinite; opacity: .85; }
.es-flowline.es-up { stroke: #3ce957; filter: drop-shadow(0 0 3px rgba(60, 233, 87, .8)); }
.es-flowline.es-wan { stroke: #02bebf; stroke-dasharray: 3 9; animation-duration: 2.2s; filter: drop-shadow(0 0 3px rgba(2, 190, 191, .8)); }
@keyframes esFlow { to { stroke-dashoffset: -36; } }
.es-pulse ellipse { fill: none; stroke: var(--tone); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: esPulse 3s ease-out infinite; }
.es-pulse ellipse.b { animation-delay: 1.5s; }
@keyframes esPulse { 0% { opacity: .75; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.25); } }
.es-boxes polygon { stroke-linejoin: round; }
.es-plat .t { fill: #163476; stroke: var(--tone); stroke-width: 1.6; filter: drop-shadow(0 0 7px var(--tone)); }
.es-plat .l { fill: #0d2357; stroke: rgba(255, 255, 255, .06); }
.es-plat .r { fill: #0a1b46; stroke: rgba(255, 255, 255, .06); }
.es-rack .t { fill: #6d8fe6; } .es-rack .l { fill: #2c4aa3; } .es-rack .r { fill: #3b5fc4; }
.es-rack polygon { stroke: rgba(150, 190, 255, .25); stroke-width: .8; }
.es-rack .led { fill: none; stroke: #3ce957; stroke-width: 1.3; stroke-dasharray: 1.5 6; animation: esLed 1.6s steps(2) infinite; }
@keyframes esLed { 50% { stroke: #02bebf; opacity: .35; } }
.es-fw .t { fill: #ffb547; } .es-fw .l { fill: #e8892a; } .es-fw .r { fill: #c96f1c; }
.es-fw polygon { filter: drop-shadow(0 0 4px rgba(255, 170, 60, .55)); }
.es-ep .t { fill: #7cc4ff; } .es-ep .l { fill: #2f7df0; } .es-ep .r { fill: #1d5fd0; }
.es-bob { animation: esBob 5s ease-in-out infinite alternate; }
@keyframes esBob { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.es-cloud-shape { fill: rgba(255, 255, 255, .92); stroke: #8fd3ff; stroke-width: 1.5; filter: drop-shadow(0 6px 14px rgba(0, 139, 242, .55)); }
.es-cloud-name { fill: #fff; font: 600 12px 'Outfit', sans-serif; }
.es-label rect { fill: rgba(7, 20, 50, .88); stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.es-label .es-stem { stroke: var(--tone); stroke-width: 1.5; stroke-dasharray: 2 3; }
.es-l-name { fill: #fff; font: 600 13px 'Outfit', sans-serif; }
.es-l-sub { fill: rgba(255, 255, 255, .6); font: 400 10.5px 'Outfit', sans-serif; }
.es-l-score { fill: var(--tone); font: 700 16px 'Outfit', sans-serif; }
.es-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: rgba(255, 255, 255, .65); margin-top: 4px; }
.es-legend span { display: inline-flex; align-items: center; gap: 6px; }
.es-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--tone); }
.es-legend .es-key i.rack { background: #6d8fe6; } .es-legend .es-key i.fw { background: #ffb547; } .es-legend .es-key i.ep { background: #7cc4ff; }
.es-side { display: flex; flex-direction: column; gap: 12px; }
.es-score { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.es-score small { display: block; font-size: 12px; color: rgba(255, 255, 255, .65); }
.es-score b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.es-score em { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .65); }
.es-card .gauge svg circle:first-child { stroke: rgba(255, 255, 255, .12); }
.es-card .gauge .mid b, .es-card .gauge .mid small { color: #fff; }
.es-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.es-mini > div { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.es-mini small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.es-mini b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.es-mini b.crit { color: #ff8a80; }
.es-sites { display: flex; flex-direction: column; gap: 8px; }
.es-site { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.es-sw { width: 6px; align-self: stretch; border-radius: 4px; background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.es-site b { display: block; font-size: 14px; } .es-site small { font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.es-site-n { text-align: right; } .es-site-n b { color: var(--tone); font-size: 18px; }
.es-tick { animation: esTick .9s ease-out; }
@keyframes esTick { 0% { color: #3ce957; text-shadow: 0 0 12px rgba(60, 233, 87, .9); } 100% { text-shadow: none; } }

/* tiles that lean towards the pointer */
.es-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; perspective: 900px; }
@media (max-width: 1200px) { .es-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .es-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.es-tile, .es-loc { position: relative; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(2, 190, 191, .10), transparent 55%), #fff; }
.es-tile { padding: 16px 16px 14px; border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 14px 30px -24px rgba(10, 40, 110, .55); overflow: hidden; }
.es-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-grad); }
.es-tile:hover, .es-loc:hover { box-shadow: 0 24px 40px -26px rgba(10, 40, 110, .6); }
.es-tile-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; margin-bottom: 10px; color: #fff;
  background: var(--brand-grad-diag); box-shadow: 0 10px 18px -10px rgba(0, 88, 251, .8), inset 0 1px 0 rgba(255, 255, 255, .35); transform: translateZ(24px); }
.es-tile-ic svg { width: 20px; height: 20px; stroke-width: 2; }
.es-tile small { display: block; font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.es-tile b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; transform: translateZ(16px); }
.es-tile em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.es-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 1100px) { .es-two { grid-template-columns: 1fr; } }
.es-panel { padding: 18px 20px; }
.es-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; perspective: 900px; }
.es-loc { padding: 14px; border-radius: 16px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.es-loc-head { display: flex; align-items: center; gap: 12px; }
.es-loc-head b { display: block; font-size: 15px; } .es-loc-head small { font-size: 12px; color: var(--text-muted); }
.es-loc-n { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.es-loc-n span { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 10px; background: #f5f8fc; font-size: 11px; color: var(--text-muted); }
.es-loc-n em { font-style: normal; font-size: 16px; font-weight: 700; color: var(--text-title); }
.es-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.es-chips span { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px dashed #cfd8e6; color: var(--text-dim); }
.es-chips span.on { border-style: solid; border-color: rgba(0, 88, 251, .25); background: linear-gradient(90deg, rgba(0, 88, 251, .08), rgba(31, 184, 90, .1)); color: #0647c6; font-weight: 600; }
.es-cov { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: center; }
.es-ring { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(from -90deg, #0058fb 0%, #02bebf calc(var(--p) * .55%), #3ce957 calc(var(--p) * 1%), #e8edf5 calc(var(--p) * 1%));
  box-shadow: 0 16px 30px -18px rgba(0, 88, 251, .6); }
.es-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 2px 6px rgba(10, 40, 110, .12); }
.es-ring > div { position: relative; text-align: center; }
.es-ring b { display: block; font-size: 24px; font-weight: 700; } .es-ring small { font-size: 11.5px; color: var(--text-muted); }
.es-groups { display: flex; flex-direction: column; gap: 7px; }
.es-grp { display: grid; grid-template-columns: 140px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.es-grp b { text-align: right; color: var(--text-title); }
.es-stack { display: flex; flex-direction: column; gap: 8px; }
.es-stack > div { display: flex; gap: 10px; align-items: flex-start; }
.es-stack b { display: block; font-size: 13px; } .es-stack small { font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 1000px) { .es-body { grid-template-columns: 1fr; } .es-stage { min-height: 0; } }
@media (max-width: 640px) { .es-cov { grid-template-columns: 1fr; justify-items: center; } .es-grp { grid-template-columns: 110px minmax(0, 1fr) 36px; } .es-loc-n { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .es-dot, .es-flowline, .es-pulse ellipse, .es-rack .led, .es-bob, .es-tick, .es-beacon .halo, .es-ripple ellipse, .rack .r, .cam, .es-sparks circle { animation: none !important; }
  .es-pulse ellipse { opacity: .4; }
  .es-tile, .es-loc, .es-svg { transform: none !important; }
}
.es-loc .gauge { width: 68px; height: 68px; flex: none; }
.es-loc .gauge .mid b { font-size: 17px; }
.es-loc .gauge .mid small { font-size: 9.5px; }

/* ---- organisation model: objects keep their material, the edges show the assessment result ---- */
.missing { --tone: #ff7a7a; }
.es-a { transition: transform .2s ease-out, filter .2s; transform-box: fill-box; }
.es-a[data-tip] { cursor: help; outline: none; }
.es-a[data-tip]:hover, .es-a[data-tip]:focus-visible { transform: translateY(-6px); filter: brightness(1.22); }
.es-a:not(.es-platform):not(.es-zone):not(.missing) polygon { stroke: var(--tone, rgba(255, 255, 255, .25)); stroke-width: 1; stroke-linejoin: round; }
.es-a:not(.es-platform):not(.es-zone):not(.missing) .t { filter: drop-shadow(0 0 3px var(--tone, transparent)); }
.es-a.missing polygon { fill: rgba(255, 90, 90, .07) !important; stroke: rgba(255, 130, 130, .8); stroke-width: 1; stroke-dasharray: 3 3; }
.rack .t { fill: #6d8fe6; } .rack .l { fill: #2c4aa3; } .rack .r { fill: #3b5fc4; animation: esRack 3.2s ease-in-out infinite; }
@keyframes esRack { 50% { fill: #4d74dc; } }
.cage .t { fill: rgba(140, 200, 255, .07); } .cage .l { fill: rgba(140, 200, 255, .06); } .cage .r { fill: rgba(140, 200, 255, .1); }
.es-server_room:not(.missing) polygon { stroke-opacity: .55; }
.tape .t { fill: #b9a3ff; } .tape .l { fill: #6d4fd0; } .tape .r { fill: #8467e6; }
.fw .t { fill: #ffb547; } .fw .l { fill: #e8892a; } .fw .r { fill: #c96f1c; }
.desk .t { fill: #9ad3ff; } .desk .l { fill: #2f7df0; } .desk .r { fill: #1d5fd0; }
.ups .t { fill: #b8c4d6; } .ups .l { fill: #4b5b74; } .ups .r { fill: #66768f; }
.post .t, .pole .t { fill: #dbe4f0; } .post .l, .pole .l { fill: #5d6b82; } .post .r, .pole .r { fill: #8a98ae; }
.cam .t { fill: #f1f5f9; } .cam .l { fill: #475569; } .cam .r { fill: #94a3b8; }
.es-cctv:not(.missing) .cam { animation: esCam 6s ease-in-out infinite alternate; transform-box: fill-box; }
@keyframes esCam { from { transform: translateX(-2px); } to { transform: translateX(2px); } }
.ap .t { fill: #f8fafc; } .ap .l { fill: #94a3b8; } .ap .r { fill: #cbd5e1; }
.es-zone polygon { stroke: none; } .es-zone .srv .t { fill: rgba(0, 120, 255, .22); } .es-zone .usr .t { fill: rgba(31, 184, 90, .14); }
.es-ripple ellipse { fill: none; stroke: #9ad3ff; stroke-width: 1.3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: esRipple 2.8s ease-out infinite; }
.es-ripple ellipse.b { animation-delay: 1.4s; }
@keyframes esRipple { 0% { opacity: .8; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
.es-beacon path { fill: #ef4444; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.es-beacon text { fill: #fff; font: 700 9px 'Outfit', sans-serif; }
.es-beacon .halo { fill: rgba(239, 68, 68, .35); transform-box: fill-box; transform-origin: center; animation: esHalo 2s ease-out infinite; }
@keyframes esHalo { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
.es-node { cursor: help; outline: none; }
.es-node-shape { fill: rgba(255, 255, 255, .94); stroke: var(--tone, #8fd3ff); stroke-width: 2; filter: drop-shadow(0 6px 14px rgba(0, 139, 242, .5)); }
.es-repo .es-node-shape { fill: #1d2b55; }
.es-node-glyph { fill: none; stroke: #9ad3ff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-planned .es-node-shape { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .55); stroke-dasharray: 5 4; filter: none; }
.es-node-name { fill: #fff; font: 600 12px 'Outfit', sans-serif; }
.es-node:hover .es-node-shape, .es-node:focus-visible .es-node-shape { stroke-width: 3; }
.es-legend i.missing { background: transparent; border: 1.5px dashed #ff8a8a; }
.es-tip { position: absolute; z-index: 5; max-width: 280px; pointer-events: none; padding: 10px 12px; border-radius: 12px; font-size: 12px; line-height: 1.45;
  background: rgba(6, 18, 46, .94); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .8); }
.es-tip b { display: block; color: #fff; font-size: 13px; margin-bottom: 3px; }
.es-tip .bad { color: #ff9a9a; }
.es-layers { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.es-layers-h { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.es-layer { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 7px; align-items: center; font-size: 12px; color: rgba(255, 255, 255, .78); }
.es-layer i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 6px var(--tone); }
.es-layer span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-layer b { font-variant-numeric: tabular-nums; color: var(--tone); }
.es-sparks circle { fill: var(--tone); opacity: 0; animation: esSpark 2.1s ease-out infinite; }
@keyframes esSpark { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-34px); } }
.es-tower .t { filter: drop-shadow(0 0 6px var(--tone)); }
.es-tower .t { fill: var(--tone); } .es-tower .l { fill: color-mix(in srgb, var(--tone) 55%, #071a45); } .es-tower .r { fill: color-mix(in srgb, var(--tone) 72%, #071a45); }
.es-tower polygon { stroke: rgba(255, 255, 255, .18); stroke-width: .6; }
.es-tile3d .t { fill: rgba(255, 255, 255, .05); stroke: color-mix(in srgb, var(--tone) 60%, transparent); stroke-width: 1; }
.es-tile3d .l, .es-tile3d .r { fill: rgba(255, 255, 255, .03); }
.es-tower { transition: filter .2s; } .es-tower:hover { filter: brightness(1.25); }
a.es-site, a.es-layer { text-decoration: none; color: inherit; }
a.es-site:hover, a.es-layer:hover span { filter: brightness(1.2); }
a.es-site:hover b, a.es-layer:hover span { color: #fff; }
a.es-tile { text-decoration: none; color: var(--text-title); display: block; }
.es-l-score.sm { font-size: 13px; }
.es-tower[data-tip] { cursor: help; outline: none; }
.es-tower[data-tip]:hover, .es-tower[data-tip]:focus-visible { filter: brightness(1.35); }

/* organisation form: structured inventory */
.inv-more { margin: 12px 0 4px; border: 1px dashed #d6dfeb; border-radius: 12px; padding: 0 14px; background: #fafcff; }
.inv-more[open] { padding-bottom: 12px; }
.inv-more summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; list-style: none; }
.inv-more summary::-webkit-details-marker { display: none; }
.inv-more summary svg { width: 16px; height: 16px; color: var(--primary); }
.inv-more summary small { font-weight: 400; color: var(--text-muted); }
.inv-h { margin: 16px 0 8px; font-size: 13px; color: var(--text-title); }
.es-svc .es-node-shape { fill: #1d2b55; }
.es-internet .es-node-shape { fill: rgba(255, 255, 255, .9); }
.es-node-glyph.dark { stroke: #2563eb; }
.es-node-sub { fill: rgba(255, 255, 255, .55); font: 500 10px 'Outfit', sans-serif; letter-spacing: .03em; }
.desk.win .t { fill: #9ad3ff; } .desk.win .l { fill: #2f7df0; } .desk.win .r { fill: #1d5fd0; }
.desk.mac .t { fill: #f1f5f9; } .desk.mac .l { fill: #94a3b8; } .desk.mac .r { fill: #cbd5e1; }
.desk.lin .t { fill: #fcd34d; } .desk.lin .l { fill: #d97706; } .desk.lin .r { fill: #f59e0b; }
.desk.oth .t { fill: #c4b5fd; } .desk.oth .l { fill: #6d28d9; } .desk.oth .r { fill: #8b5cf6; }
.switch .t { fill: #5eead4; } .switch .l { fill: #0f766e; } .switch .r { fill: #14b8a6; }
.es-inv { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 10px; margin: 2px 0; font-size: 12px; }
.es-inv dt { color: var(--text-muted); font-weight: 500; }
.es-inv dd { margin: 0; color: var(--text-title); }
.es-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 640px) { .es-stack { grid-template-columns: 1fr; } }
.es-stack > div.empty small { color: var(--text-dim); font-style: italic; }
.es-stack > div.empty .ch-ico { opacity: .5; }
.es-notes { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #f5f8fc; font-size: 12.5px; }
.es-notes p { margin: 4px 0 0; white-space: pre-line; color: var(--text-muted); }
.es-legend i.os { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 6px; vertical-align: -1px; }
.es-legend i.os.win { background: #4f9cf5; } .es-legend i.os.mac { background: #e2e8f0; } .es-legend i.os.lin { background: #fbbf24; } .es-legend i.os.oth { background: #a78bfa; }

/* organisation model: clickable objects and two-way highlighting */
[data-go] { cursor: pointer; }
.es-svg .es-a, .es-svg .es-node, .es-svg .es-label { transition: opacity .2s, transform .2s ease-out, filter .2s; }
.es-svg.es-dim .es-a:not(.es-hl):not(.es-platform):not(.es-zone), .es-svg.es-dim .es-node:not(.es-hl) { opacity: .22; }
.es-svg.es-dim .es-platform:not(.es-hl) { opacity: .45; }
.es-svg .es-hl .t { filter: drop-shadow(0 0 7px rgba(255, 255, 255, .85)); }
.es-svg .es-label[data-go]:hover rect, .es-svg .es-label[data-go]:focus-visible rect { stroke: #fff; }
.es-svg .es-node[data-go]:hover, .es-svg .es-node[data-go]:focus-visible { filter: brightness(1.15); }
.es-site[data-go], .es-layer[data-go] { transition: background .15s, border-color .15s; }
.es-site[data-go]:hover, .es-site.es-row-hl { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .25); }
.es-layer[data-go]:hover { color: #fff; }
.es-mini a { display: block; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.es-mini a:hover { background: rgba(255, 255, 255, .12); }
.g-focus { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; background: rgba(0, 88, 251, .08); color: #0647c6; }
.g-focus svg { width: 14px; height: 14px; }
.g-focus span { color: var(--text-muted); }

/* ---- model animations: each one shows a control working, partly working or failing ---- */
.m-ok { --act: #3ce957; } .m-warn { --act: #f5b301; } .m-bad, .m-missing { --act: #ff5a5a; } .m-unknown { --act: #94a3b8; }
.es-a .led { fill: var(--act); animation: esLed 1.8s steps(2) infinite; }
.es-a.m-ok .led { animation: esLedOk 3.6s ease-in-out infinite; }
@keyframes esLed { 50% { opacity: .15; } }
@keyframes esLedOk { 50% { opacity: .55; } }
.flowdot { fill: #a7f3d0; filter: drop-shadow(0 0 3px #3ce957); }
.m-warn .flowdot { fill: #fde68a; filter: drop-shadow(0 0 3px #f5b301); }
.pkt { stroke: #fff; stroke-width: .8; }
.pkt.blocked { fill: #ff6b6b; }
.pkt.passed { fill: var(--act); filter: drop-shadow(0 0 3px var(--act)); }
.m-ok .pkt.passed { fill: #3ce957; }
.burst { fill: none; stroke: #ff6b6b; stroke-width: 2; }
.dome { fill: rgba(60, 233, 87, .08); stroke: var(--act); stroke-width: 1.3; animation: esDome 3.2s ease-in-out infinite; }
.dome.open { fill: rgba(255, 90, 90, .05); stroke: #ff7a7a; stroke-dasharray: 4 4; animation: none; opacity: .8; }
@keyframes esDome { 50% { fill: rgba(60, 233, 87, .16); } }
.batt rect { fill: rgba(7, 20, 50, .85); stroke: #dbe4f0; stroke-width: 1; }
.batt .tip { fill: #dbe4f0; stroke: none; }
.batt .lvl { fill: var(--act); stroke: none; }
.m-ok .batt .lvl { animation: esCharge 2.6s ease-in-out infinite; }
.m-bad .batt .lvl { animation: esLed 1.2s steps(2) infinite; }
@keyframes esCharge { 0% { opacity: .55; } 50% { opacity: 1; } 100% { opacity: .55; } }
.arm { stroke: #ffe08a; stroke-width: 2.6; stroke-linecap: round; }
.m-ok .arm { stroke: #fde047; } .m-bad .arm { stroke: #ff8a8a; }
.cone { fill: color-mix(in srgb, var(--act) 18%, transparent); stroke: color-mix(in srgb, var(--act) 55%, transparent); stroke-width: 1; }
.es-ripple ellipse { stroke: var(--act, #9ad3ff); }
.es-flowline.es-missing-link { stroke: #ff6b6b; stroke-dasharray: 2 7; animation: none; opacity: .85; filter: none; cursor: help; }
.es-howto { display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .62); }
.es-howto b { color: #fff; width: 100%; font-size: 12px; }
.es-howto i { display: inline-block; vertical-align: -1px; margin-right: 5px; }
.h-pkt { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #fff; } .h-pkt.ok { background: #ff6b6b; } .h-pkt.bad { background: #ff5a5a; box-shadow: 0 0 5px #ff5a5a; }
.h-flow { width: 14px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, transparent, #a7f3d0); }
.h-cone { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid rgba(60, 233, 87, .5); }
.h-arm { width: 14px; height: 3px; background: #fde047; transform: rotate(-30deg); border-radius: 2px; }
.h-dome { width: 14px; height: 8px; border-radius: 50%; border: 1.3px solid #3ce957; }
.h-led { width: 6px; height: 6px; border-radius: 50%; background: #3ce957; box-shadow: 8px 0 0 #ff5a5a; margin-right: 13px !important; }
.h-link { width: 16px; height: 0; border-top: 2px dashed #ff6b6b; }
@media (prefers-reduced-motion: reduce) {
  .es-a .led, .dome, .batt .lvl { animation: none !important; }
  .pkt, .burst, .flowdot { display: none; }
}

/* ---- model page: big scene, toolbar, plain-language tags ---- */
.es-full .es-body { grid-template-columns: 1fr; }
.es-full .es-stage { border-radius: 16px; background: radial-gradient(80% 70% at 50% 40%, rgba(0, 120, 255, .10), transparent 70%); }
.es-full .es-svg { height: auto; max-height: 80vh; cursor: grab; touch-action: none; }
.es-full .es-svg.dragging { cursor: grabbing; }
.es-full .es-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; align-items: start; }
.es-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 4px; }
.es-toolbar button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06);
  color: #fff; font: 600 12.5px 'Outfit', sans-serif; cursor: pointer; }
.es-toolbar button:hover { background: rgba(255, 255, 255, .14); }
.es-toolbar button.on { background: #fff; color: #0a2257; border-color: #fff; }
.es-toolbar button[data-zoom] { width: 32px; padding: 0; font-size: 17px; line-height: 1; }
.es-tb-l { font-size: 12px; color: rgba(255, 255, 255, .6); margin-right: 2px; }
.es-tb-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, .18); margin: 0 4px; }
.es-tb-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #fff; cursor: pointer; }
.es-tb-hint { margin-left: auto; font-size: 11.5px; color: rgba(255, 255, 255, .5); }
.es-tag { cursor: pointer; }
.es-tag rect { fill: rgba(6, 18, 46, .92); stroke: var(--act); stroke-width: 1.2; }
.es-tag .lead { stroke: var(--act); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; }
.es-tag .dot { fill: var(--act); }
.es-tag .n { fill: #fff; font: 600 13px 'Outfit', sans-serif; }
.es-tag .c { fill: rgba(255, 255, 255, .55); font-weight: 500; }
.es-tag .s { fill: var(--act); font: 600 11.5px 'Outfit', sans-serif; }
.es-tag.m-missing rect { stroke-dasharray: 3 3; }
.es-tag:hover rect.bg, .es-tag:focus-visible rect.bg { fill: rgba(16, 36, 84, .97); stroke-width: 2; }
.es-svg.no-tags .es-tags { display: none; }
.es-svg.es-dim .es-tag:not(.es-hl) { opacity: .25; }
.es-full .es-howto { margin-top: 10px; }
@media (max-width: 760px) { .es-tb-hint { display: none; } }

/* ======================================================================
   3D model page: viewer + sidebar
   ====================================================================== */
.mv { gap: 14px; }
.mv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mv-head h2 { margin: 0; font-size: 24px; }
.mv-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; }
.mv-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
@media (max-width: 1180px) { .mv-main { grid-template-columns: 1fr; } }
.mv-view { position: relative; padding: 0; height: calc(100vh - 200px); min-height: 540px; overflow: hidden; }
.mv-view .es-stage { position: absolute; inset: 0; perspective: none; min-height: 0; border-radius: 22px; }
.mv-view .es-svg { width: 100%; height: 100%; max-height: none; transform: none !important; }
.mv-ov { position: absolute; z-index: 3; display: flex; align-items: center; gap: 6px; }
.mv-tl { top: 14px; left: 14px; padding: 4px; border-radius: 999px; background: rgba(6, 18, 46, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
.mv-tl button { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 255, 255, .8); font: 600 13px 'Outfit', sans-serif; cursor: pointer; }
.mv-tl button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.mv-tl button.on { background: #fff; color: #0a2257; }
.mv-tr { top: 16px; right: 16px; padding: 7px 12px; border-radius: 999px; font-size: 12px; color: rgba(255, 255, 255, .75); background: rgba(6, 18, 46, .72); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px); }
.mv-tr b { color: #fff; } .mv-tr em { font-style: normal; font-variant-numeric: tabular-nums; }
.mv-br { right: 14px; bottom: 14px; flex-direction: row; }
.mv-br button { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(6, 18, 46, .78); color: #fff;
  font: 600 16px/1 'Outfit', sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; backdrop-filter: blur(8px); }
.mv-br button svg { width: 16px; height: 16px; }
.mv-br button#esTags { font-size: 12.5px; }
.mv-br button:hover { background: rgba(30, 50, 100, .9); }
.mv-br button.on#esTags { background: #fff; color: #0a2257; border-color: #fff; }
.mv-bl { left: 14px; bottom: 14px; flex-wrap: wrap; max-width: calc(100% - 330px); padding: 7px 12px; border-radius: 14px; background: rgba(6, 18, 46, .72);
  border: 1px solid rgba(255, 255, 255, .14); font-size: 11.5px; color: rgba(255, 255, 255, .78); gap: 4px 12px; backdrop-filter: blur(8px); }
.mv-bl .k { display: inline-flex; align-items: center; gap: 5px; }
.mv-bl .k i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.mv-bl .ok i { background: #3ce957; } .mv-bl .warn i { background: #f5b301; } .mv-bl .bad i { background: #ff5a5a; }
.mv-bl .miss i { border: 1.5px dashed #ff8a8a; }
.mv-bl .crit i { width: 14px; height: 14px; border-radius: 50%; background: #ef4444; color: #fff; font: 700 10px/14px 'Outfit', sans-serif; text-align: center; font-style: normal; }
.mv-help { position: relative; }
.mv-help summary { cursor: pointer; color: #9ad3ff; font-weight: 600; list-style: none; }
.mv-help summary::-webkit-details-marker { display: none; }
.mv-help[open] > div { position: absolute; left: 0; bottom: calc(100% + 12px); width: 420px; max-width: 70vw; padding: 14px 16px; border-radius: 14px;
  background: rgba(6, 18, 46, .96); border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7); font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.mv-help p { margin: 0 0 6px; } .mv-help b { color: #fff; }
@media (max-width: 760px) { .mv-bl { max-width: calc(100% - 28px); bottom: 62px; } .mv-tr { display: none; } .mv-view { height: 72vh; min-height: 440px; } }

.mv-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 84px; }
.mv-card { padding: 14px 16px; }
.mv-card-h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13.5px; margin-bottom: 10px; color: var(--text-title); }
.mv-card-h svg { width: 16px; height: 16px; color: var(--primary); }
.mv-card-h span { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--text-dim); }
.mv-score { display: flex; gap: 14px; align-items: center; }
.mv-score .gauge.md { width: 96px; height: 96px; }
.mv-score small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.mv-score small svg { width: 14px; height: 14px; color: var(--primary); flex: none; }
.mv-score > div > b { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
.mv-score em { display: block; font-style: normal; font-size: 12px; color: var(--text-muted); }
.mv-mini { display: flex; gap: 6px; margin-top: 8px; }
.mv-mini a { flex: 1; padding: 6px 8px; border-radius: 10px; background: #f4f7fb; text-decoration: none; color: var(--text-title); text-align: center; }
.mv-mini a:hover { background: #e9f0fb; }
.mv-mini b { display: block; font-size: 16px; } .mv-mini b.crit { color: #dc2626; } .mv-mini small { font-size: 10.5px; }
.mv-insp-empty { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.mv-insp-title { display: block; font-size: 14px; margin-bottom: 8px; }
.mv-insp-lines { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.mv-insp-lines li { font-size: 12.5px; line-height: 1.4; padding-left: 20px; position: relative; color: var(--text-main); }
.mv-insp-lines li::before { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; font: 700 9px/15px 'Outfit', sans-serif; text-align: center; color: #fff; }
.mv-insp-lines li.ok::before { content: "\2713"; background: #16a34a; }
.mv-insp-lines li.bad::before { content: "\2715"; background: #dc2626; }
.mv-insp-lines li.warn::before { content: "\25D0"; background: #d97706; }
.mv-insp-lines li.info { color: var(--text-muted); padding-left: 0; }
.mv-insp-lines li.info::before { content: none; }
.mv-site { display: flex; align-items: stretch; gap: 6px; border-radius: 12px; margin-bottom: 6px; }
.mv-site-main { flex: 1; display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--text-title); }
.mv-site-main:hover, .mv-site.es-row-hl .mv-site-main { border-color: var(--primary-border); background: #f7faff; }
.mv-site-main b { display: block; font-size: 13.5px; } .mv-site-main small { font-size: 11.5px; color: var(--text-muted); }
.mv-site-main em { font-style: normal; font-weight: 700; color: var(--tone); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.mv-site-main em i { display: inline-flex; align-items: center; gap: 3px; font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--text-muted); }
.mv-site-main em i svg { width: 11px; height: 11px; flex: none; }
.mv-site .es-sw { box-shadow: none; }
.mv-site-go { display: grid; place-items: center; width: 34px; border-radius: 12px; border: 1px solid var(--border); color: var(--primary); }
.mv-site-go:hover { background: #f1f6ff; } .mv-site-go svg { width: 15px; height: 15px; }
.mv-layer { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 42px; gap: 8px; align-items: center; padding: 6px 4px; border-radius: 8px;
  text-decoration: none; color: var(--text-title); font-size: 12.5px; }
.mv-layer:hover { background: #f4f7fb; }
.mv-layer i { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); }
.mv-layer small { color: var(--text-dim); font-size: 11px; }
.mv-layer b { text-align: right; color: var(--tone); }

/* ======================================================================
   Illustrated office model
   ====================================================================== */
.of-svg .of-floor { fill: url(#ofFloor); }
.of-tile { stroke: rgba(80, 60, 30, .08); stroke-width: 1; }
.of-wall.back { fill: #eef2f7; } .of-wall.side { fill: #e2e8f0; }
.of-wall { stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.of-edge { stroke: #cbd5e1; stroke-width: 2; }
.of-pane { fill: #10264f; stroke: #f8fafc; stroke-width: 2.5; }
.of-screen { fill: #0b1d3f; stroke: #334155; stroke-width: 2; }
.of-bar { fill: #38bdf8; opacity: .9; }
.of-pot .t { fill: #9a6b45; } .of-pot .l { fill: #6b4429; } .of-pot .r { fill: #7d5233; }
.of-leaf { fill: #2f9e4f; stroke: #22803e; stroke-width: 1; }
.of-svg .es-a polygon { stroke: rgba(15, 23, 42, .22); stroke-width: .7; }
.of-svg .es-a .t { filter: none; }
.of-svg .es-a[data-tip]:hover, .of-svg .es-a[data-tip]:focus-visible { transform: none; filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, .55)); }
.of-svg .es-a.missing polygon, .of-svg .es-a.missing ellipse { fill: rgba(255, 90, 90, .08) !important; stroke: #ff8a8a; stroke-width: 1.2; stroke-dasharray: 4 3; }
.of-rack .t { fill: #2b3446; } .of-rack .l { fill: #111827; } .of-rack .r { fill: #1b2333; }
.of-svg .led { fill: #38bdf8; } .of-svg .m-bad .led, .of-svg .m-missing .led { fill: #ff5a5a; } .of-svg .m-warn .led { fill: #f5b301; } .of-svg .m-ok .led { fill: #3ce957; }
.of-glass { fill: rgba(170, 215, 255, .16); stroke: rgba(210, 235, 255, .75); stroke-width: 1.4; }
.of-glass-top { fill: rgba(170, 215, 255, .05); stroke: rgba(210, 235, 255, .5); stroke-width: 1; }
.of-switch .t { fill: #cbd5e1; } .of-switch .l { fill: #475569; } .of-switch .r { fill: #64748b; }
.of-backup .t { fill: #c4b5fd; } .of-backup .l { fill: #6d28d9; } .of-backup .r { fill: #7c3aed; }
.of-ups .t { fill: #64748b; } .of-ups .l { fill: #1f2937; } .of-ups .r { fill: #334155; }
.of-stand .t { fill: #374151; } .of-stand .l { fill: #111827; } .of-stand .r { fill: #1f2937; }
.of-fw .t { fill: #f87171; } .of-fw .l { fill: #b91c1c; } .of-fw .r { fill: #dc2626; }
.of-svg .es-firewall .of-fw { filter: drop-shadow(0 0 8px rgba(255, 70, 70, .75)); }
.of-svg .es-firewall.m-ok .of-fw .t { fill: #6ee7b7; } .of-svg .es-firewall.m-ok .of-fw .l { fill: #047857; } .of-svg .es-firewall.m-ok .of-fw .r { fill: #059669; }
.of-svg .es-firewall.m-ok .of-fw { filter: drop-shadow(0 0 8px rgba(60, 233, 87, .7)); }
.of-svg .es-firewall.m-warn .of-fw .t { fill: #fcd34d; } .of-svg .es-firewall.m-warn .of-fw .l { fill: #b45309; } .of-svg .es-firewall.m-warn .of-fw .r { fill: #d97706; }
.of-desk .t { fill: #ead7b6; } .of-desk .l { fill: #c9a77a; } .of-desk .r { fill: #d9b98c; }
.of-mon .t { fill: #111827; } .of-mon .r { fill: #1f2937; }
.of-mon .l { fill: #3b82f6; } .of-mon.mac .l { fill: #e5e7eb; } .of-mon.lin .l { fill: #f59e0b; } .of-mon.oth .l { fill: #8b5cf6; }
.of-chair .t { fill: #3f4a5c; } .of-chair .l { fill: #1f2937; } .of-chair .r { fill: #2b3445; }
.of-body { stroke: rgba(0, 0, 0, .15); stroke-width: .6; }
.of-body.p0 { fill: #2563eb; } .of-body.p1 { fill: #0f766e; } .of-body.p2 { fill: #7c3aed; } .of-body.p3 { fill: #ea580c; }
.of-head { fill: #e8b98e; stroke: rgba(0, 0, 0, .15); stroke-width: .6; }
.of-gate .t { fill: #e2e8f0; } .of-gate .l { fill: #64748b; } .of-gate .r { fill: #94a3b8; }
.of-reader .t { fill: #e2e8f0; } .of-reader .l { fill: #0ea5e9; } .of-reader .r { fill: #0284c7; }
.of-cam .t { fill: #f8fafc; } .of-cam .l { fill: #64748b; } .of-cam .r { fill: #cbd5e1; }
.of-cam-arm .t, .of-cam-arm .l, .of-cam-arm .r { fill: #94a3b8; }
.of-ap { fill: #f8fafc; stroke: #94a3b8; stroke-width: 1.2; }
.of-svg .dome { stroke-width: 1.6; }
/* links and hub */
.of-link { fill: none; stroke: #3ce957; stroke-width: 2.4; opacity: .75; filter: drop-shadow(0 0 4px rgba(60, 233, 87, .8)); }
.of-link.planned { stroke: rgba(255, 255, 255, .45); stroke-dasharray: 5 6; filter: none; }
.of-link.missing { stroke: #ff6b6b; stroke-dasharray: 3 8; filter: none; opacity: .9; cursor: help; }
.of-pulse { fill: #bbf7d0; filter: drop-shadow(0 0 4px #3ce957); }
.of-hub .halo { fill: rgba(56, 140, 255, .2); }
.of-hub .mer { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.of-hub .pill { fill: #0a1f4d; stroke: #3b82f6; stroke-width: 1.5; }
.of-hub text { fill: #fff; font: 600 13px 'Outfit', sans-serif; }
/* clouds and services */
.of-node .cl { fill: #f8fafc; stroke: var(--tone, #93c5fd); stroke-width: 2.4; filter: drop-shadow(0 8px 16px rgba(0, 80, 200, .45)); }
.of-node .gl-bg { fill: #e0ecff; }
.of-node .gl { fill: none; stroke: #1d4ed8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.of-node .tab { fill: #0d2357; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.of-node .nm { fill: #fff; font: 600 13px 'Outfit', sans-serif; }
.of-node .sb { fill: rgba(255, 255, 255, .6); font: 500 11px 'Outfit', sans-serif; }
.of-planned .cl { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .7); stroke-dasharray: 6 5; filter: none; }
.of-planned .gl-bg { fill: rgba(255, 255, 255, .15); } .of-planned .gl { stroke: #fff; }
/* office titles */
.of-title rect { fill: rgba(6, 18, 46, .92); stroke: rgba(255, 255, 255, .22); stroke-width: 1; }
.of-title .pin { fill: none; stroke: #fff; stroke-width: 2; }
.of-title .tt { fill: #fff; font: 700 17px 'Outfit', sans-serif; }
.of-title .ts { fill: rgba(255, 255, 255, .65); font: 500 12px 'Outfit', sans-serif; }
.of-title .sc { fill: var(--tone, #fff); font: 700 19px 'Outfit', sans-serif; }
.of-title .sl { fill: rgba(255, 255, 255, .55); font: 600 9.5px 'Outfit', sans-serif; letter-spacing: .08em; }
.of-title .sli circle { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.1; } .of-title .sli .d { fill: rgba(255, 255, 255, .55); stroke: none; }
/* icon tags */
.of-tag .bg { fill: rgba(8, 20, 48, .95); stroke: var(--act); stroke-width: 1.6; }
.of-tag .ic { fill: var(--act); }
.of-tag .ig { fill: none; stroke: #0a1430; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.of-tag .n { fill: #fff; font: 600 14px 'Outfit', sans-serif; }
.of-tag .c { fill: rgba(255, 255, 255, .6); font-weight: 500; }
.of-tag .s { fill: var(--act); font: 600 12.5px 'Outfit', sans-serif; }
.of-tag .lead { stroke: var(--act); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .85; }
.of-tag .dot { fill: var(--act); }
.of-tag.m-missing .bg { stroke-dasharray: 4 3; }
.of-tag:hover .bg { fill: rgba(18, 40, 90, .98); stroke-width: 2.4; }

/* model page: full-width viewer, floating inspector, summary row below */
.mv-main { grid-template-columns: 1fr; }
.mv-side { position: static; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr) minmax(300px, 1.2fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .mv-side { grid-template-columns: 1fr; } }
.mv-view { height: calc(100vh - 190px); min-height: 560px; }
.mv-inspect { position: absolute; z-index: 4; top: 62px; right: 14px; width: 310px; max-height: calc(100% - 140px); overflow: auto; padding: 14px 16px;
  border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .6); }
.mv-insp-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: #f1f5f9; color: #475569;
  font-size: 17px; line-height: 1; cursor: pointer; }
.mv-insp-x:hover { background: #e2e8f0; }
.mv-inspect .mv-insp-title { padding-right: 28px; }
.mv-bl { max-width: calc(100% - 300px); }
.mv-inspect, .mv-inspect .mv-insp-title { color: var(--text-title); }
.mv-inspect .mv-insp-lines li { color: #334155; }
.mv-src { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--text-title); background: #fff; border: 1px solid var(--border); white-space: nowrap; }
.mv-src em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 500; }
.mv-src.off { color: var(--text-muted); }

/* ======================================================================
   Control library: Framework Coverage
   ====================================================================== */
.fc { display: flex; flex-direction: column; gap: 18px; }
.fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.fc-head h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
.fc-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; }

.fc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1250px) { .fc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fc-cards { grid-template-columns: 1fr; } }
.fc-card { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 18px 20px; border-radius: 18px; cursor: pointer; font: inherit; color: var(--text-title);
  border: 1px solid color-mix(in srgb, var(--c) 18%, #e6ecf3); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 70%);
  box-shadow: 0 10px 26px -22px rgba(15, 30, 70, .35); transition: box-shadow .2s, transform .2s, border-color .2s; }
.fc-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -22px rgba(15, 30, 70, .45); }
.fc-card.on { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent), 0 18px 34px -22px rgba(15, 30, 70, .45); }
.fc-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fc-badge { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 12px/1 'Outfit', sans-serif;
  letter-spacing: -.01em; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 70%);
  box-shadow: 0 8px 16px -8px var(--c), inset 0 1px 0 rgba(255, 255, 255, .4); }
.fc-name { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fc-go { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--c);
  box-shadow: 0 2px 8px rgba(15, 30, 70, .12); }
.fc-go svg { width: 14px; height: 14px; stroke-width: 2.4; }
.fc-num { display: flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.fc-card.gdpr .fc-num { color: var(--c); }
.fc-ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; color: #fff; }
.fc-ok svg { width: 14px; height: 14px; stroke-width: 3; }
.fc-unit { font-size: 14px; color: var(--text-muted); }
.fc-barrow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.fc-bar { flex: 1; height: 7px; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.fc-bar i { display: block; height: 100%; border-radius: 999px; background: var(--c); }
.fc-barrow em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.fc-by { margin-top: 8px; font-size: 13px; color: var(--text-muted); }

.fc-filters { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.25fr; gap: 14px; align-items: end; }
@media (max-width: 900px) { .fc-filters { grid-template-columns: 1fr 1fr; } }
.fc-filters label { display: flex; flex-direction: column; gap: 7px; }
.fc-filters label > span:first-child { font-size: 13px; font-weight: 600; color: var(--text-title); }
.fc-filters select { height: 46px; border-radius: 12px; border: 1px solid var(--border); background-color: #fff; padding: 0 38px 0 14px; font: 500 14px 'Outfit', sans-serif; color: var(--text-title); }
.fc-q { position: relative; display: block; }
.fc-q svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-dim); }
.fc-q input { width: 100%; box-sizing: border-box; height: 46px; border-radius: 12px; border: 1px solid var(--border); padding: 0 14px 0 42px; font: 500 14px 'Outfit', sans-serif; }
.fc-filters select:focus, .fc-q input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(11, 95, 244, .1); }

.fc-sec { padding: 0; overflow: visible; }
.fc-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 14px; }
.fc-sec-h h3 { margin: 0; font-size: 19px; }
.fc-sec-h p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); }
.fc-pill { flex: none; padding: 7px 14px; border-radius: 999px; background: #f1f5fb; font-size: 13px; font-weight: 600; color: var(--text-title); }
.fc-note { margin: -4px 24px 10px; font-size: 12.5px; color: var(--text-muted); }
.fc-wrap { overflow-x: auto; }
.fc-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 760px; }
.fc-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); padding: 11px 16px; background: #f7f9fc; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fc-table th:first-child, .fc-table td:first-child { padding-left: 24px; }
.fc-table th.r, .fc-table td.r { text-align: right; padding-right: 24px; }
.fc-table td { padding: 12px 16px; border-bottom: 1px solid #eef2f7; vertical-align: middle; font-size: 14px; }
.fc-table tbody tr:hover td { background: #fafcff; }
.fc-ref { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 85%, #000);
  background: color-mix(in srgb, var(--c) 10%, #fff); }
.fc-req { color: var(--text-title); line-height: 1.4; }
.fc-ctrls { line-height: 1.9; }
.fc-c { display: inline-flex; align-items: stretch; margin: 2px 4px 2px 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; max-width: 100%; }
.fc-c b { padding: 3px 9px; border-radius: 8px 0 0 8px; background: #e6efff; color: #0647c6; font-size: 12.5px; font-weight: 700; }
.fc-c span { padding: 3px 10px; border-radius: 0 8px 8px 0; background: #f3f5f9; color: var(--text-title); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-c:hover b { background: #d6e4ff; } .fc-c:hover span { background: #e9eef6; }
.fc-more { margin: 2px 0; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font: 600 12px 'Outfit', sans-serif; color: var(--text-muted); cursor: pointer; }
.fc-more:hover { border-color: var(--primary-border); color: var(--primary); }
.fc-rest { display: block; }
.fc-st { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.fc-st svg { width: 15px; height: 15px; stroke-width: 2.6; }
.fc-st.ok { background: #e8f8ee; color: #15803d; }
.fc-st.ok svg { background: #22c55e; color: #fff; border-radius: 50%; padding: 2px; width: 13px; height: 13px; }
.fc-st.no { background: #fdecec; color: #b91c1c; }
.fc-empty { padding: 28px; text-align: center; color: var(--text-muted); }

/* ======================================================================
   Control library: Controls tab and the details panel
   ====================================================================== */
.cl-head h2 { margin: 0; font-size: 30px; letter-spacing: -.02em; }
.cl-head p { margin: 6px 0 0; color: var(--text-muted); font-size: 15px; }
.cl-tabs { margin: -8px 0 -4px; }

.cl { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cl-filters, .cl-row2 { min-width: 0; }
.cl-filters { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.cl-row1 { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(170px, 210px); gap: 12px; }
.cl-row2 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cl-filters select, .cl-search input { height: 44px; border-radius: 12px; border: 1px solid var(--border); background-color: #fff; font: 500 14px 'Outfit', sans-serif; color: var(--text-title); }
.cl-filters select { padding: 0 36px 0 14px; width: 100%; }
.cl-search { position: relative; display: block; }
.cl-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-dim); }
.cl-search input { width: 100%; box-sizing: border-box; padding: 0 14px 0 42px; }
.cl-filters select:focus, .cl-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(11, 95, 244, .1); }
.cl-seg { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 4px; gap: 2px; border-radius: 12px; background: #f1f4f9; }
.cl-seg button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; border-radius: 9px; background: none;
  font: 600 13px 'Outfit', sans-serif; color: var(--text-muted); cursor: pointer; }
.cl-seg button i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.cl-seg button:hover { color: var(--text-title); }
.cl-seg button.on { background: #fff; color: var(--text-title); box-shadow: 0 1px 3px rgba(15, 30, 70, .14); }
.cl-clear { border: 0; background: none; font: 600 13px 'Outfit', sans-serif; color: var(--primary); cursor: pointer; padding: 0; }
.cl-count { margin-left: auto; font-size: 13.5px; color: var(--text-muted); }
.cl-count b { color: var(--text-title); }
.cl-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.cl-filters .cl-sort select { width: auto; height: 36px; border-radius: 10px; font-size: 13px; }
@media (max-width: 900px) { .cl-row1 { grid-template-columns: 1fr; } .cl-count { margin-left: 0; } }

.cl-card { padding: 0; overflow: hidden; }
.cl-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cl-table th { text-align: left; font-size: 13px; font-weight: 500; color: var(--text-muted); padding: 12px 16px; background: #f7f9fc; border-bottom: 1px solid var(--border); }
.cl-table td { padding: 14px 16px; border-bottom: 1px solid #eef2f7; vertical-align: top; font-size: 14px; }
.cl-table th:first-child, .cl-table td:first-child { padding-left: 22px; }
.cl-table th:last-child, .cl-table td:last-child { padding-right: 22px; }
tr.cl-dom td { padding: 0; background: #f8fafd; border-bottom: 1px solid #e9eef5; }
.cl-dom-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 22px; border: 0; background: none; cursor: pointer;
  font: 500 14px 'Outfit', sans-serif; color: var(--text-title); text-align: left; }
.cl-dom-btn > svg:first-child { width: 18px; height: 18px; color: var(--primary); }
.cl-dom-n { white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: #eaf0f8; font-size: 12px; color: var(--text-muted); }
.cl-dom-btn .chev { margin-left: auto; width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 2; transition: transform .2s; }
.cl-dom-btn[aria-expanded="false"] .chev { transform: rotate(180deg); }
tr.cl-row { cursor: pointer; transition: background .12s; scroll-margin-top: 110px; }
tr.cl-row:hover td { background: #fafcff; }
tr.cl-row.on td { background: color-mix(in srgb, var(--primary) 6%, #fff); }
tr.cl-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.cl-name b { display: block; font-weight: 600; color: var(--text-title); line-height: 1.35; }
.cl-name small { display: block; margin-top: 3px; color: var(--text-dim); font-size: 12.5px; }
.cl-desc span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-muted); line-height: 1.5; font-size: 13.5px; }
.cl-pri { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; vertical-align: middle; }
.cl-pri i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cl-pri.critical { background: #fdecec; color: #c42020; }
.cl-pri.high { background: #fff1e6; color: #c2570c; }
.cl-pri.medium { background: #fff8db; color: #a16207; }
.cl-pri.low { background: #e8f8ee; color: #15803d; }
.cl-fw { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-fwg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px 4px 3px 3px; border-radius: 8px; font-size: 12px;
  background: color-mix(in srgb, var(--c) 8%, #fff); border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); }
.cl-fwg em { font-style: normal; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--c); color: #fff; }
.cl-fwg i { font-style: normal; font-weight: 600; color: color-mix(in srgb, var(--c) 85%, #000); padding: 0 3px; }
.cl-fwg.iso, .cd-map-fw.iso { --c: #0b5ff4; } .cl-fwg.soc2, .cd-map-fw.soc2 { --c: #0891b2; } .cl-fwg.gdpr, .cd-map-fw.gdpr { --c: #7c3aed; } .cl-fwg.dpdpa, .cd-map-fw.dpdpa { --c: #ea7a0c; }
@media (max-width: 900px) {
  .cl-table colgroup, .cl-table thead { display: none; }
  .cl-table, .cl-table tbody, .cl-table tr, .cl-table td { display: block; width: auto; }
  tr.cl-row td { border: 0; padding: 4px 18px; } tr.cl-row { padding: 10px 0; border-bottom: 1px solid #eef2f7; }
  .cl-table td:first-child { padding-left: 18px; }
}

/* details panel: slides up from the bottom over a dimmed page */
html.cl-lock { overflow: hidden; }
.cl-scrim { position: fixed; inset: 0; z-index: 250; background: rgba(15, 23, 42, .4); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .2s; }
.cl-scrim.open { opacity: 1; }
/* centred over the whole window, above the top bar */
.cl-drawer { position: fixed; z-index: 260; top: 50%; left: 50%; width: min(1180px, calc(100vw - 48px)); height: min(86vh, 820px);
  display: flex; flex-direction: column; background: #fff; border-radius: 22px; border: 1px solid var(--border); outline: none;
  box-shadow: 0 40px 90px -30px rgba(15, 30, 70, .55); opacity: 0; transform: translate(-50%, -48%) scale(.98);
  transition: opacity .2s, transform .2s cubic-bezier(.2, .8, .2, 1), width .2s, height .2s; }
.cl-drawer.open { opacity: 1; transform: translate(-50%, -50%); }
.cl-drawer.full { width: calc(100vw - 32px); height: calc(100vh - 32px); }
@media (max-width: 900px) { .cl-drawer { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 18px; } }
.cl-bar { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; gap: 6px; }
.cl-pos { margin-right: 6px; font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-bar button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: #fff;
  color: var(--text-muted); cursor: pointer; }
.cl-bar button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cl-bar button:hover:not(:disabled) { color: var(--text-title); background: #f6f8fb; border-color: var(--primary-border); }
.cl-bar button:disabled { opacity: .4; cursor: default; }
#clExpand .shrink, .cl-drawer.full #clExpand .grow { display: none; }
.cl-drawer.full #clExpand .shrink { display: block; }
.cl-drawer-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cd-head { display: flex; align-items: center; gap: 16px; padding: 20px 250px 18px 28px; border-bottom: 1px solid #eef2f7; }
.cd-ico { flex: none; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 70%, #fff), var(--primary)); box-shadow: 0 10px 20px -10px var(--primary); }
.cd-ico svg { width: 24px; height: 24px; stroke-width: 1.8; }
.cd-title { min-width: 0; }
.cd-head h3 { margin: 0; font-size: 21px; letter-spacing: -.01em; line-height: 1.25; }
.cd-head p { margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted); }
.cd-meta span { color: #cdd5e1; margin: 0 5px; }
.cd-scope { padding: 4px 11px; border-radius: 999px; background: #eef4ff; color: var(--primary); font-size: 12.5px; font-weight: 600; }
.cd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.cd-nav { display: flex; flex-direction: column; gap: 3px; padding: 16px 12px; border-right: 1px solid #eef2f7; overflow-y: auto; }
.cd-nav button { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 500 14px 'Outfit', sans-serif; color: var(--text-muted); text-align: left; }
.cd-nav button svg { width: 17px; height: 17px; flex: none; }
.cd-nav button i { margin-left: auto; font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: #eef2f7; }
.cd-nav button:hover { background: #f6f8fb; color: var(--text-title); }
.cd-nav button.on { background: color-mix(in srgb, var(--primary) 9%, #fff); color: var(--primary); font-weight: 600; }
.cd-panes { overflow-y: auto; padding: 20px 28px 28px; }
.cd-panes h4 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .cl-drawer, .cl-scrim { transition: none; } }
.cd-panes h4 svg { width: 19px; height: 19px; color: var(--primary); }
.cd-text { margin: 0 0 16px; color: var(--text-muted); line-height: 1.6; font-size: 14px; max-width: 900px; }
.cd-ask { display: flex; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border-radius: 14px; background: #fff8ec; border: 1px solid #fde4b8; }
.cd-ask > svg { flex: none; width: 20px; height: 20px; color: #d97706; margin-top: 1px; }
.cd-ask b { display: block; font-size: 14px; color: var(--text-title); margin-bottom: 3px; }
.cd-ask span { font-size: 13.5px; color: #5b6475; line-height: 1.55; }
.cd-ask.soft { background: #f3f7ff; border-color: #dbe6fb; } .cd-ask.soft > svg { color: var(--primary); }
.cd-acc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cd-acc > div { padding: 14px 16px; border-radius: 14px; border: 1px solid; }
.cd-acc b { display: flex; align-items: center; gap: 7px; font-size: 13.5px; margin-bottom: 6px; }
.cd-acc b svg { width: 16px; height: 16px; stroke-width: 2.4; }
.cd-acc span { font-size: 13px; line-height: 1.55; color: #4b5565; }
.cd-acc .ok { background: #effaf3; border-color: #ccefd9; } .cd-acc .ok b { color: #15803d; }
.cd-acc .best { background: #f0f5ff; border-color: #d4e2fc; } .cd-acc .best b { color: #0647c6; }
.cd-acc .no { background: #fef2f2; border-color: #f8d4d4; } .cd-acc .no b { color: #b91c1c; }
@media (max-width: 1100px) { .cd-acc { grid-template-columns: 1fr; } }
.cd-lead { margin: 0 0 16px; font-size: 15.5px; line-height: 1.6; color: #334155; max-width: 980px; }
.cd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 22px; }
.cd-tiles button { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: 14px; border: 1px solid #e6ecf3; background: #fff; cursor: pointer; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.cd-tiles button:hover { border-color: color-mix(in srgb, var(--t) 40%, #fff); box-shadow: 0 10px 22px -16px rgba(15, 30, 70, .4); transform: translateY(-1px); }
.cd-tiles svg { grid-row: span 2; width: 38px; height: 38px; padding: 9px; box-sizing: border-box; border-radius: 11px; color: var(--t);
  background: color-mix(in srgb, var(--t) 11%, #fff); }
.cd-tiles b { font-size: 14px; color: var(--text-title); }
.cd-tiles span { font-size: 12.5px; color: var(--text-muted); }
.t-done { --t: #16a34a; } .t-docs { --t: #0b5ff4; } .t-ev { --t: #7c3aed; } .t-tools { --t: #ea7a0c; }
.cd-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.cd-map-fw { padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); background: color-mix(in srgb, var(--c) 4%, #fff); }
.cd-map-fw > em { display: inline-block; font-style: normal; font-weight: 700; font-size: 12px; padding: 2px 9px; border-radius: 7px; background: var(--c); color: #fff; }
.cd-map-fw ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cd-map-fw li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.cd-map-fw li b { flex: none; min-width: 64px; font-size: 12.5px; color: color-mix(in srgb, var(--c) 85%, #000); }
.cd-map-fw li span { color: #3d4757; line-height: 1.4; }
.cd-q { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #f7f9fc; border: 1px dashed #dbe2ec; }
.cd-q > svg { flex: none; width: 19px; height: 19px; color: var(--text-muted); margin-top: 1px; }
.cd-q b { display: block; font-size: 13px; color: var(--text-title); margin-bottom: 3px; }
.cd-q span { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; font-style: italic; }
.cd-steps { list-style: none; counter-reset: st; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cd-steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 50px; border-radius: 12px; background: #fbfcfe; border: 1px solid #eef2f7;
  font-size: 14px; line-height: 1.55; color: #3d4757; }
.cd-steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; }
.cd-chips em svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: var(--primary); }
.cd-example { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #fffbeb, #fff); border: 1px solid #fde9b5; max-width: 980px; }
.cd-example > svg { flex: none; width: 22px; height: 22px; color: #d97706; }
.cd-example p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #3d4757; }
.cd-list { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: #3d4757; line-height: 1.5; }
.cd-list.check { list-style: none; padding-left: 0; }
.cd-list.check li { position: relative; padding-left: 24px; }
.cd-list.check li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #16a34a; font-weight: 700; }
.cd-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.cd-chips em { font-style: normal; padding: 4px 10px; border-radius: 8px; background: #f1f5fb; color: var(--text-title); font-weight: 500; }
.cd-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cd-tools h5 { margin: 0 0 8px; font-size: 13px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cd-tool { padding: 10px 12px; margin-bottom: 8px; border-radius: 12px; border: 1px solid #eef2f7; background: #fbfcfe; }
.cd-tool b { display: block; font-size: 14px; color: var(--text-title); }
.cd-tool span { display: block; margin-top: 2px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
@media (max-width: 900px) { .cd-body { grid-template-columns: 1fr; } .cd-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #eef2f7; }
  .cd-head { padding: 52px 18px 14px; align-items: flex-start; } .cd-head h3 { font-size: 19px; } .cd-tools, .cd-map { grid-template-columns: 1fr; } .cd-panes { padding: 18px; } }
/* ======================================================================
   Model page: white theme
   ====================================================================== */
.mv .mv-view.es-card { color: var(--text-title); background: linear-gradient(180deg, #f9fbfe 0%, #eef3f9 100%); border: 1px solid #e6ebf2;
  box-shadow: 0 24px 50px -36px rgba(15, 30, 70, .35); }
.mv .es-full .es-stage { background: radial-gradient(55% 45% at 50% 35%, rgba(59, 130, 246, .07), transparent 70%); }
.mv .m-ok { --act: #22c55e; } .mv .m-warn { --act: #f2b200; } .mv .m-bad, .mv .m-missing { --act: #ef4444; } .mv .m-unknown { --act: #94a3b8; }
.mv .mv-view:fullscreen { height: 100vh; border-radius: 0; border: 0; }

/* room details on a light background */
.mv .of-pane { fill: #cfe4f7; stroke: #fff; stroke-width: 2.5; }
.mv .of-svg .es-a[data-tip]:hover, .mv .of-svg .es-a[data-tip]:focus-visible { filter: drop-shadow(0 0 7px rgba(37, 99, 235, .45)); }

/* links, hub */
.mv .of-link { stroke: #22c55e; stroke-width: 2.6; opacity: 1; filter: none; }
.mv .of-link.planned { stroke: #6b8fd6; stroke-dasharray: none; opacity: .75; }
.mv .of-link.missing { stroke: #ef4444; stroke-dasharray: 3 8; }
.mv .of-pulse { fill: #22c55e; stroke: #fff; stroke-width: 1.6; filter: none; }
.mv .of-hub .halo { fill: rgba(59, 130, 246, .14); }
.mv .of-hub .pill { fill: #1d6ff2; stroke: none; filter: drop-shadow(0 6px 10px rgba(29, 111, 242, .35)); }
.mv .of-hub text { fill: #fff; font: 600 13.5px 'Outfit', sans-serif; }

/* clouds and services */
.mv .of-node .cl { fill: #fff; stroke: #e3e9f1; stroke-width: 1.6; filter: drop-shadow(0 10px 14px rgba(15, 30, 70, .12)); }
.mv .of-node .gl { stroke: #2563eb; }
.mv .of-node .tab { fill: #fff; stroke: #e6ebf2; stroke-width: 1; filter: drop-shadow(0 6px 12px rgba(15, 30, 70, .1)); }
.mv .of-node .nm { fill: #0f172a; font: 600 14px 'Outfit', sans-serif; }
.mv .of-node .sb { fill: #64748b; font: 500 11.5px 'Outfit', sans-serif; }
.mv .of-node .st { fill: var(--tone, #94a3b8); }
.mv .of-node.none .st, .mv .of-planned .st { fill: #94a3b8; }
.mv .of-planned .cl { fill: #f8fafc; stroke: #c3cddb; stroke-dasharray: 6 5; filter: none; }

/* site cards */
.mv .of-card .card { fill: #fff; stroke: #e6ebf2; stroke-width: 1; filter: drop-shadow(0 10px 18px rgba(15, 30, 70, .12)); }
.mv .of-card .thumb rect, .mv .of-card .tile rect { stroke: none; }
.mv .of-card .sky { fill: url(#ofSky); } .mv .of-card .sun { fill: #fde68a; }
.mv .of-card .ground { fill: #cfe5c6; } .mv .of-card .tree { fill: #43a047; }
.mv .of-card .win { stroke: rgba(255, 255, 255, .6); stroke-width: 1.6; }
.mv .of-card .v0 .b1 { fill: #4f7cc0; } .mv .of-card .v0 .b2 { fill: #9bb9e3; }
.mv .of-card .v1 .b1 { fill: #3d6aa8; } .mv .of-card .v1 .b2 { fill: #86acdf; }
.mv .of-card .v2 .b1 { fill: #b86a3e; } .mv .of-card .v2 .b2 { fill: #e0b48f; }
.mv .of-card .tt { fill: #0f172a; font: 700 19px 'Outfit', sans-serif; }
.mv .of-card .chev, .mv .of-tag .chev { fill: none; stroke: #64748b; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mv .of-card .sq { fill: var(--tone, #94a3b8); }
.mv .of-card .sc { fill: var(--tone, #475569); font: 700 13px 'Outfit', sans-serif; }
.mv .of-card .sc .sl { fill: #64748b; font: 500 12px 'Outfit', sans-serif; letter-spacing: 0; }
.mv .of-card .tile rect { fill: #f3f6fb; }
.mv .of-card .ti { fill: none; stroke: #2563eb; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mv .of-card .tn { fill: #0f172a; font: 700 12.5px 'Outfit', sans-serif; }
.mv .of-card .tl { fill: #64748b; font: 500 9.5px 'Outfit', sans-serif; }
.mv .of-card:hover .card { stroke: #c7d6ee; }

/* tags: white cards with a coloured edge, icon tile and arrow */
.mv .of-tag .bg { fill: #fff; stroke: var(--act); stroke-width: 1.8; filter: drop-shadow(0 6px 10px rgba(15, 30, 70, .1)); }
.mv .es-tag:hover rect.bg, .mv .es-tag:focus-visible rect.bg { fill: #f8fbff; stroke-width: 2.4; }
.mv .of-tag .ic { fill: var(--act); stroke: none; }
.mv .of-tag .ig { stroke: #fff; }
.mv .of-tag.m-warn .ig { stroke: #3d2f00; }
.mv .of-tag .n { fill: #0f172a; font: 600 14px 'Outfit', sans-serif; }
.mv .of-tag .s { fill: color-mix(in srgb, var(--act) 78%, #000); font: 600 12.5px 'Outfit', sans-serif; }
.mv .of-tag .lead { stroke: var(--act); stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; opacity: 1; }

/* overlays: site switch, legend, view controls */
.mv .mv-tl { padding: 5px; background: #fff; border: 1px solid #e6ebf2; box-shadow: 0 10px 24px -14px rgba(15, 30, 70, .3); backdrop-filter: none; }
.mv .mv-tl button { height: 38px; padding: 0 22px; color: #0f172a; font: 600 14px 'Outfit', sans-serif; }
.mv .mv-tl button:hover { background: #f1f5fb; color: #0f172a; }
.mv .mv-tl button.on { color: #fff; background: linear-gradient(135deg, #2f80ff, #1d5ff0); box-shadow: 0 8px 16px -8px rgba(29, 95, 240, .7); }
.mv .mv-bl { padding: 12px 18px; gap: 10px 22px; border-radius: 16px; background: #fff; border: 1px solid #e6ebf2; color: #0f172a;
  box-shadow: 0 10px 24px -14px rgba(15, 30, 70, .3); backdrop-filter: none; max-width: calc(100% - 420px); }
.mv .mv-bl .k { align-items: flex-start; gap: 9px; }
.mv .mv-bl .k > i { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 5px; }
.mv .mv-bl .k b, .mv .mv-help summary b { display: block; font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.2; }
.mv .mv-bl .k small, .mv .mv-help summary small { display: block; font-size: 11px; color: #64748b; line-height: 1.3; }
.mv .mv-bl .ok > i { background: #22c55e; } .mv .mv-bl .warn > i { background: #f2b200; } .mv .mv-bl .bad > i { background: #ef4444; }
.mv .mv-bl .miss > i { border: 2px dashed #ef4444; border-radius: 50%; background: none; box-sizing: border-box; }
.mv .mv-bl .crit > i { border-radius: 50%; background: #ef4444; color: #fff; font: 700 11px/16px 'Outfit', sans-serif; text-align: center; font-style: normal; }
.mv .mv-help summary { display: flex; align-items: flex-start; gap: 9px; color: #0f172a; font-weight: 400; }
.mv .mv-help summary > i { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1.6px solid #2563eb; box-sizing: border-box;
  color: #2563eb; font: 700 10px/13px 'Outfit', sans-serif; text-align: center; font-style: normal; }
.mv .mv-help[open] > div { background: #fff; color: #475569; border: 1px solid #e6ebf2; box-shadow: 0 24px 50px -20px rgba(15, 30, 70, .35); }
.mv .mv-help b { color: #0f172a; }
.mv .mv-br { gap: 10px; }
.mv .mv-br button { height: 44px; min-width: 44px; border-radius: 12px; background: #fff; border: 1px solid #e6ebf2; color: #0f172a;
  box-shadow: 0 10px 24px -14px rgba(15, 30, 70, .3); font: 500 21px/1 'Outfit', sans-serif; backdrop-filter: none; }
.mv .mv-br button:hover { background: #f5f8fc; }
.mv .mv-br button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mv .mv-br .mv-switch, .mv .mv-br button.on#esTags { gap: 12px; padding: 0 16px; background: #fff; color: #0f172a; border-color: #e6ebf2; font: 600 14px 'Outfit', sans-serif; }
.mv-switch i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
.mv-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(15, 30, 70, .3); transition: transform .15s; }
.mv-switch.on i { background: #1d6ff2; } .mv-switch.on i::after { transform: translateX(16px); }
@media (max-width: 900px) { .mv .mv-bl { max-width: calc(100% - 28px); bottom: 70px; padding: 8px 12px; gap: 6px 14px; } .mv .mv-bl .k small, .mv .mv-help summary small { display: none; } }

/* model page background: light canvas, faint dot grid, offices on a white base */
.mv .mv-view.es-card { background: radial-gradient(75% 70% at 50% 42%, #ffffff 0%, #f7f9fc 55%, #eef2f7 100%); border-color: #e8edf3; }
.mv .es-full .es-stage { background: none; }
.mv .of-base { filter: drop-shadow(0 22px 26px rgba(15, 30, 70, .16)); }
.mv .of-base .t { fill: #ffffff; } .mv .of-base .l { fill: #e3e9f1; } .mv .of-base .r { fill: #d5dde8; }
.mv .of-base polygon { stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
.mv .of-tile { stroke: rgba(100, 116, 139, .12); }
.mv .of-wall.back { fill: #f8fafc; } .mv .of-wall.side { fill: #eef2f7; }
/* the legend and view controls sit in their own strip under the drawing, never over it */
.mv .mv-view .es-stage { inset: 0 0 84px 0; border-radius: 22px 22px 0 0; }
.mv .mv-bl, .mv .mv-br { bottom: 16px; }
.mv .mv-view::after { content: ""; position: absolute; left: 0; right: 0; bottom: 84px; height: 1px; background: #e8edf3; }
@media (max-width: 900px) { .mv .mv-view .es-stage { inset: 0 0 170px 0; } .mv .mv-view::after { bottom: 170px; } .mv .mv-bl { bottom: 72px; } }