/* view-cards.css — #/cases and #/data (WP-F). CONTRACT.md Addendum v3.5 §1/§5.
   Matches styles.css's visual language (translucent glass panels over the
   dimmed globe, per-axis/origin hues, monospace identifiers) without
   touching styles.css itself: reuses its CSS custom properties (--glass,
   --glass2, --line, --ink, --dim, --cyan, --teal, --amber, --violet,
   --local, --rose) and its .panel/.origin-badge/.dim utility classes, and
   only adds new selectors scoped under .view-cards-root (both #viewCases
   and #viewData get that class from their view module) so nothing here can
   collide with another package's rules. Single fixed dark theme, same as
   the rest of the console (styles.css defines its tokens unconditionally on
   bare :root — there is no light mode to also support here). */

.view-cards-root{display:block}
.cv-wrap,.dv-wrap{max-width:1180px;margin:0 auto}

/* ---- shared page head ---- */
.cv-head h1,.dv-head h1{font-size:22px;font-weight:600;color:#fff;
  letter-spacing:.2px;margin-bottom:6px}
.cv-lede,.dv-lede{color:var(--dim);font-size:13.5px;max-width:640px;
  line-height:1.55;margin-bottom:22px}

/* ================================================================ #/cases */

/* ---- the gap banner: the federation's argument, stated up front rather
   than buried in one instance's AOI field (CONTRACT §3). Only renders when
   the live data actually contains capability-axis owners with a shared
   AOI — computed, never hardcoded. ---- */
.cv-gap{border:1px solid rgba(255,122,144,.35);border-radius:14px;
  background:linear-gradient(160deg,rgba(255,122,144,.09),rgba(180,139,255,.05));
  padding:14px 18px;margin-bottom:22px;backdrop-filter:blur(10px)}
.cv-gap[hidden]{display:none}
.cv-gap-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rose);margin-bottom:8px}
.cv-gap-body{font-size:14.5px;line-height:1.6;color:var(--ink);margin-bottom:12px}
.cv-gap-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cv-gap-chip{display:inline-flex;flex-direction:column;gap:1px;padding:6px 12px;
  border-radius:10px;border:1px solid var(--line);background:rgba(10,16,30,.5);
  font-size:12px;color:var(--dim);cursor:pointer;transition:all .2s;
  border-left:3px solid var(--c,var(--violet))}
.cv-gap-chip:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.06)}
.cv-gap-chip b{color:var(--ink);font-weight:600;font-size:12.5px}
.cv-gap-chip.cv-gap-target{cursor:default;border-left-color:var(--rose);
  background:rgba(255,122,144,.08)}
.cv-gap-chip.cv-gap-target b{color:var(--rose)}
.cv-gap-arrow{color:var(--dim);opacity:.6;font-size:13px}

.cv-body{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}

.cv-list{display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 260px);
  overflow-y:auto;scrollbar-width:thin;scrollbar-color:#26344d transparent;
  padding-right:4px}
.cv-group-head{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--c,var(--dim));opacity:.9;margin:14px 0 6px;padding-left:4px}
.cv-group-head:first-child{margin-top:0}
.cv-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:10px;border:1px solid transparent;
  background:transparent;color:var(--ink);font:inherit;cursor:pointer;
  transition:all .2s}
.cv-item:hover{background:rgba(87,215,255,.06)}
.cv-item.active{background:var(--glass2);border-color:var(--line);
  box-shadow:0 4px 18px rgba(0,0,0,.3)}
.cv-dot{width:9px;height:9px;border-radius:50%;flex:none;
  box-shadow:0 0 8px currentColor}
.cv-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cv-item-name{font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cv-item-where{font-size:11px;color:var(--dim)}
.cv-status{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dim)}
.cv-status-up{background:var(--teal);box-shadow:0 0 6px var(--teal)}
.cv-status-down{background:var(--rose);box-shadow:0 0 6px var(--rose)}
.cv-status-unknown{background:var(--dim)}
.cv-empty{padding:14px 4px;font-size:13px}

.cv-detail{background:var(--glass);border:1px solid var(--line);
  border-radius:14px;backdrop-filter:blur(14px);padding:18px 22px;
  min-height:320px;box-shadow:0 8px 40px rgba(0,0,0,.3)}
.cv-detail-empty{padding:20px 4px;font-size:13.5px}
.cv-detail-head{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;
  border-left:3px solid var(--c,var(--cyan));padding-left:12px}
.cv-detail-name{font-size:19px;font-weight:600;color:#fff}
.cv-detail-axis{font-size:11.5px;color:var(--dim)}
.cv-detail-where{font-size:13px;color:var(--dim);margin:2px 0 12px;padding-left:15px}
.cv-scope-badge{display:inline-block;padding:2px 9px;border-radius:999px;
  border:1px solid rgba(255,198,92,.4);color:var(--amber);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em}
.cv-aoi{font-size:13px;line-height:1.5;padding:9px 12px;border-radius:10px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  border-left:3px solid var(--c,var(--rose));margin-bottom:14px}
.cv-aoi b{color:var(--ink)}
.cv-rows{display:flex;flex-direction:column;gap:0;margin-bottom:14px}
.cv-row{display:flex;justify-content:space-between;gap:14px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.cv-row:last-child{border-bottom:0}
.cv-row-k{color:var(--dim);flex:none}
.cv-row-v{text-align:right;color:var(--ink)}
.cv-row-v code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--cyan)}
.cv-status-pill{padding:1px 9px;border-radius:999px;border:1px solid var(--line);
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;background:transparent}
.cv-status-pill.cv-pill-up{color:var(--teal);border-color:rgba(60,230,176,.4)}
.cv-status-pill.cv-pill-down{color:var(--rose);border-color:rgba(255,122,144,.4)}
.cv-status-pill.cv-pill-unknown{color:var(--dim)}
.cv-assets-label{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:4px}
.cv-assets{list-style:none;display:flex;flex-direction:column;gap:4px;
  font-size:12.5px;color:var(--ink);max-height:220px;overflow-y:auto}
.cv-assets li{padding:4px 0 4px 14px;position:relative}
.cv-assets li::before{content:"";position:absolute;left:0;top:11px;width:5px;
  height:5px;border-radius:50%;background:var(--dim)}

@media (max-width:900px){.cv-body{grid-template-columns:1fr}
  .cv-list{max-height:none}}

/* ================================================================= #/data */

.dv-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.dv-search{flex:1;min-width:220px;background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:10px;padding:9px 13px;
  color:var(--ink);font-size:13px;outline:0;transition:border-color .25s}
.dv-search:focus{border-color:rgba(87,215,255,.45)}
.dv-search::placeholder{color:#4d5b73}
.dv-owner{background:rgba(10,16,30,.6);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;color:var(--ink);font-size:12.5px;
  outline:0;cursor:pointer}
.dv-count{color:var(--dim);font-size:12px;white-space:nowrap;margin-left:auto}

.dv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px}
.dv-tile{background:var(--glass);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;cursor:pointer;transition:all .22s;backdrop-filter:blur(10px);
  display:flex;flex-direction:column;gap:6px;min-height:150px}
.dv-tile:hover{border-color:rgba(87,215,255,.4);transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.dv-tile-top{display:flex;align-items:center;gap:8px}
.dv-sov{margin-left:auto;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.06em;padding:2px 7px;border-radius:999px;
  border:1px solid rgba(255,122,144,.4);color:var(--rose)}
.dv-title{font-size:14.5px;font-weight:600;color:#fff;line-height:1.3}
.dv-id{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--cyan);
  opacity:.85}
.dv-owner{font-size:11.5px;color:var(--dim)}
.dv-desc{font-size:12px;line-height:1.5;color:var(--dim);margin-top:2px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.dv-empty{padding:30px 4px;font-size:13.5px;grid-column:1/-1}

/* ---- card detail modal: same centered-overlay pattern as #kgOverlay, own
   ids/classes so nothing collides with styles.css's copy of that pattern. ---- */
.dv-modal-wrap{position:fixed;inset:0;z-index:12;display:flex;
  align-items:center;justify-content:center;background:rgba(3,5,12,.6);
  backdrop-filter:blur(4px)}
.dv-modal-wrap.hidden{display:none}
.dv-modal{position:relative;width:min(560px,92vw);max-height:84vh;overflow-y:auto;
  background:var(--glass2);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;box-shadow:0 24px 80px rgba(0,0,0,.55);
  animation:dv-rise .3s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes dv-rise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1}}
.dv-modal-close{position:absolute;top:14px;right:16px;background:transparent;
  border:0;color:var(--dim);font-size:15px;cursor:pointer}
.dv-modal-close:hover{color:var(--ink)}
.dv-modal-top{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dv-modal-title{font-size:19px;font-weight:600;color:#fff;margin-bottom:2px}
.dv-modal-id{font-family:ui-monospace,Menlo,monospace;font-size:12px;
  color:var(--cyan);margin-bottom:12px}
.dv-modal-desc{font-size:13.5px;line-height:1.6;color:var(--ink);margin-bottom:16px}
.dv-modal-rows{display:flex;flex-direction:column;margin-bottom:6px}
.dv-modal-rows .dv-row{display:flex;justify-content:space-between;gap:14px;
  padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.dv-modal-rows .dv-row:last-child{border-bottom:0}
.dv-row-k{color:var(--dim)}
.dv-row-v{text-align:right;color:var(--ink);max-width:70%}
.dv-row-v code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--cyan)}
.dv-modal-owner{margin-top:16px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border-left:3px solid var(--c,var(--violet))}
.dv-owner-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:3px}
.dv-owner-name{font-size:14px;font-weight:600;color:#fff}
.dv-owner-meta{font-size:11.5px;color:var(--dim);margin:2px 0 8px}
.dv-owner-link{background:transparent;border:1px solid rgba(87,215,255,.4);
  border-radius:8px;padding:5px 11px;color:var(--cyan);font-size:11.5px;
  cursor:pointer;transition:all .2s}
.dv-owner-link:hover{box-shadow:0 0 12px rgba(87,215,255,.3)}

/* ============================================================== #/cases ==
   CONTRACT.md Addendum v3.6 ruling R1: this route renders the two CASES
   (an analysis, not an owner). Case accent color (#ffd166) matches
   globe.js's CASE_COLOR / case-detail.js's --gn-case so the list here, the
   right-column #caseDetail card and the globe's own case markers all read
   as the same object. ---------------------------------------------------- */
.cl-wrap{max-width:1180px;margin:0 auto}
.cl-head h1{font-size:22px;font-weight:600;color:#fff;letter-spacing:.2px;margin-bottom:6px}
.cl-lede{color:var(--dim);font-size:13.5px;max-width:640px;line-height:1.55;margin-bottom:22px}

.cl-body{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}

.cl-list{display:flex;flex-direction:column;gap:6px}
.cl-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:11px 12px;border-radius:12px;border:1px solid transparent;
  background:transparent;color:var(--ink);font:inherit;cursor:pointer;
  transition:all .2s}
.cl-item:hover{background:rgba(255,209,102,.06)}
.cl-item.active{background:var(--glass2);border-color:rgba(255,209,102,.35);
  box-shadow:0 4px 18px rgba(0,0,0,.3)}
.cl-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#ffd166;
  box-shadow:0 0 8px #ffd166}
.cl-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cl-item-name{font-size:13.5px;font-weight:600;line-height:1.35}
.cl-item-aoi{font-size:11px;color:var(--dim)}
.cl-item-prov{flex:none;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid rgba(255,209,102,.35);
  color:#e8c980;background:rgba(255,209,102,.08)}
.cl-empty{padding:14px 4px;font-size:13px}

.cl-detail{background:var(--glass);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(14px);padding:20px 24px;min-height:360px;
  box-shadow:0 8px 40px rgba(0,0,0,.3)}
.cl-detail-empty{padding:20px 4px;font-size:13.5px}
.cl-detail-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.cl-detail-title{font-size:19px;font-weight:600;color:#fff}
.cl-prov-badge{font-size:10.5px;letter-spacing:.03em;padding:.2em .65em;
  border-radius:999px;background:rgba(255,209,102,.10);color:#e8c980;
  box-shadow:inset 0 0 0 1px rgba(255,209,102,.30)}
.cl-detail-aoi{font-size:13px;color:var(--dim);margin-bottom:16px}
.cl-detail-aoi b{color:var(--ink)}

.cl-sec{margin:16px 0 6px;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);opacity:.8}
.cl-sec:first-of-type{margin-top:4px}
.cl-question{font-size:13.5px;line-height:1.6;color:var(--ink)}

.cl-owners{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.cl-owners li{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:12.5px;padding:6px 10px;border-radius:9px;
  background:rgba(255,255,255,.03);border-left:3px solid #ffd166}
.cl-owner-name{font-weight:600;color:var(--ink)}
.cl-owner-where{color:var(--dim);font-size:11.5px}
.cl-owner-id{margin-left:auto;font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px;color:var(--cyan);opacity:.75}
.cl-no-owners{padding:8px 10px;font-size:12.5px;border-radius:9px;
  background:rgba(255,255,255,.03)}

.cl-steps{display:flex;flex-direction:column}
.cl-step{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);
  align-items:baseline}
.cl-step:last-child{border-bottom:0}
.cl-step-seq{opacity:.45;font-variant-numeric:tabular-nums;min-width:1.4em;font-size:12px}
.cl-step-kind{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  opacity:.75;min-width:5.4em;padding-top:.15em}
.cl-step-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cl-step-note{font-size:12.5px;line-height:1.5;color:var(--ink)}
.cl-step-meta{font-size:11px;color:var(--dim)}

.cl-outs{display:flex;flex-direction:column;gap:8px}
.cl-out{padding:.55em .75em;border-radius:9px;background:rgba(255,209,102,.06);
  border-left:3px solid #ffd166}
.cl-out-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-out-top code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--cyan)}
.cl-out-media{font-size:10px;color:var(--dim)}
.cl-out-headline{font-size:12.5px;line-height:1.55;color:var(--ink);margin-top:4px}

.cl-globe-btn{margin-top:18px;background:transparent;
  border:1px solid rgba(255,209,102,.4);border-radius:9px;padding:7px 14px;
  color:#e8c980;font-size:12px;cursor:pointer;transition:all .2s}
.cl-globe-btn:hover{box-shadow:0 0 12px rgba(255,209,102,.3)}

@media (max-width:900px){.cl-body{grid-template-columns:1fr}}

/* -------------------------------------------------------- #/data: owners ==
   Owner library moved here from #/cases (R1) — reuses the .cv-* structure
   verbatim (same list/detail/gap-banner CSS already written for exactly
   this content; only its mount point changed). ---------------------------- */
.dv-owners{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.dv-owners .cv-head h1,.dv-owners .cv-head h2{font-size:19px;font-weight:600;
  color:#fff;letter-spacing:.2px;margin-bottom:6px}

@media (max-width:1100px){.view-cards-root{padding-right:12px}}