/* Quorum brand tokens, ported from design/mockup/qpop-mockup.html
   (QS_BrandGuidelines_2023_v1.0) -- not invented here. Decision #49
   (docs/qpop-platform-decisions-2026-08-30.md) records this port. */
:root{
  --ocean:#005B99; --midnight:#002554; --steel:#9BA2AA;
  --electric:#009DE2; --innovation:#047BC1; --flash:#8CC63F; --orange:#FF9800;
  --shale:#646A75; --pipeline:#C7CED3; --titanium:#E9EBED; --titanium-lt:#FAFAFA;
  --dark-gray:#4A4A4A; --sky:#ABCBF1;
  --qpop-critical:#C4362F;
  --radius:3px; --shadow:0 1px 2px rgba(0,37,84,.06),0 1px 3px rgba(0,37,84,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Montserrat',Arial,sans-serif;font-size:13px;line-height:1.5;
  color:var(--midnight);background:var(--titanium-lt);-webkit-font-smoothing:antialiased;
}
h1{margin:0;font-weight:600;letter-spacing:-.01em}

/* ---------- Shell: left rail + main ---------- */
.qpop-app{display:grid;grid-template-columns:238px 1fr;min-height:100vh}

.qpop-rail{background:var(--midnight);color:#fff;padding:0 0 28px;position:sticky;top:0;height:100vh;overflow-y:auto}

.qpop-brandbar{display:flex;align-items:center;gap:9px;padding:17px 20px 15px;border-bottom:1px solid rgba(255,255,255,.12)}
.qpop-mark{width:26px;height:26px;border-radius:2px;background:var(--ocean);display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.qpop-brand-name{font-size:14px;font-weight:700;letter-spacing:.02em;color:#fff}
.qpop-brand-sub{font-size:9px;color:var(--steel);letter-spacing:.09em;text-transform:uppercase;margin-top:3px}

.qpop-navgroup{margin-top:16px}
.qpop-rail-group-label{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding:0 20px 6px}
.qpop-rail-nav{display:flex;flex-direction:column}

.qpop-rail-item{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:8px 20px;
  border-left:3px solid transparent;color:rgba(255,255,255,.84)}
.qpop-rail-item:hover{background:rgba(255,255,255,.06)}
.qpop-rail-item-active{background:rgba(0,157,226,.14);border-left-color:var(--electric)}
.qpop-rail-item-label{display:block;font-size:13px;color:inherit}
.qpop-rail-item-active .qpop-rail-item-label{color:#fff;font-weight:600}
.qpop-rail-item-desc{display:block;font-size:9.5px;color:var(--steel);margin-top:2px;letter-spacing:.02em}
.qpop-rail-item-active .qpop-rail-item-desc{color:var(--sky)}

.qpop-rail-children{display:flex;flex-direction:column;padding:2px 0 7px;background:rgba(0,0,0,.18)}
.qpop-rail-child{all:unset;box-sizing:border-box;display:block;cursor:pointer;padding:6px 20px 6px 30px;
  font-size:12px;color:rgba(255,255,255,.66)}
.qpop-rail-child:hover{background:rgba(255,255,255,.06);color:#fff}
.qpop-rail-child-static{cursor:default}
.qpop-rail-child-static:hover{background:none;color:rgba(255,255,255,.66)}

.qpop-railfoot{margin:20px 20px 0;padding-top:13px;border-top:1px solid rgba(255,255,255,.12);
  font-size:9.5px;color:var(--steel);line-height:1.6}

.qpop-main{min-width:0;display:flex;flex-direction:column}

.qpop-topbar{background:#fff;border-bottom:1px solid var(--titanium);padding:9px 26px 8px;position:sticky;top:0;z-index:6}
.qpop-topbar h1{font-size:19px}
.qpop-topbar-lede{font-size:11.5px;color:var(--shale);margin-top:3px;max-width:600px}

.qpop-content{padding:20px 26px 40px}

/* ---------- Grid (reusable data table) ---------- */
.qpop-grid-wrap{display:flex;flex-direction:column;gap:8px}
.qpop-grid-filter{
  font-family:inherit;font-size:12px;color:var(--midnight);border:1px solid var(--pipeline);
  border-radius:var(--radius);padding:6px 10px;max-width:280px}
table.qpop-grid{width:100%;border-collapse:collapse;font-size:12px}
.qpop-grid th{text-align:left;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--shale);font-weight:600;padding:0 12px 8px;border-bottom:1px solid var(--titanium)}
.qpop-grid th[data-sort-key]{cursor:pointer;user-select:none}
.qpop-grid th[data-sort-key]:hover{color:var(--ocean)}
.qpop-grid th[data-sort-dir="asc"]::after{content:" \25B2";font-size:8px}
.qpop-grid th[data-sort-dir="desc"]::after{content:" \25BC";font-size:8px}
.qpop-grid td{padding:9px 12px;border-bottom:1px solid var(--titanium);vertical-align:middle}
.qpop-grid-empty{color:var(--shale);font-style:italic}

/* ---------- Insight bar ---------- */
.qpop-insight-bar{display:flex;gap:1px;background:var(--pipeline);border:1px solid var(--pipeline);
  border-radius:var(--radius);overflow:hidden;margin-bottom:16px;box-shadow:var(--shadow)}
.qpop-insight{flex:1;background:#fff;padding:12px 16px;border-top:3px solid transparent;display:flex;flex-direction:column}
.qpop-insight-value{font-size:22px;font-weight:600;color:var(--midnight);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qpop-insight-label{font-size:10.5px;color:var(--shale);margin-top:2px}
.qpop-insight-sublabel{font-size:9.5px;color:var(--shale);margin-top:1px}
.qpop-insight-good{border-top-color:var(--flash)}
.qpop-insight-bad{border-top-color:var(--qpop-critical)}
.qpop-insight-flat{border-top-color:var(--steel)}
.qpop-insight-none{border-top-color:transparent}

/* ---------- Capability cards (six-card rollup) ---------- */
.qpop-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.qpop-card{border:1px solid var(--pipeline);border-radius:var(--radius);background:#fff;padding:14px 16px;
  display:flex;flex-direction:column;box-shadow:var(--shadow)}
.qpop-card-value{font-size:26px;font-weight:600;color:var(--midnight);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qpop-card-label{font-size:11px;color:var(--shale);margin-top:4px}
.qpop-card-sublabel{font-size:10px;color:var(--shale);margin-top:2px}
@media(max-width:900px){.qpop-cards{grid-template-columns:repeat(2,1fr)}}

/* ---------- Top items (small horizontal highlight strip) ---------- */
.qpop-top-items{margin-bottom:16px}
.qpop-top-items-title{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--shale);
  font-weight:700;margin-bottom:6px}
.qpop-top-items-row{display:flex;gap:10px;flex-wrap:wrap}
.qpop-top-item{border:1px solid var(--pipeline);border-left:3px solid var(--ocean);border-radius:var(--radius);
  background:#fff;padding:8px 12px;flex:1;min-width:180px}
.qpop-top-item-label{display:block;font-size:12px;font-weight:600;color:var(--midnight)}
.qpop-top-item-detail{display:block;font-size:11px;color:var(--shale);margin-top:2px}

.qpop-empty-note{color:var(--shale);font-size:13px}

/* ---------- Generic action form ---------- */
.qpop-form-field{margin-bottom:12px}
.qpop-form-field label{display:block;font-size:11.5px;color:var(--shale);margin-bottom:4px}
.qpop-required{color:var(--qpop-critical)}
.qpop-generic-form input,.qpop-generic-form textarea{
  font-family:inherit;font-size:12.5px;color:var(--midnight);
  border:1px solid var(--pipeline);border-radius:var(--radius);padding:6px 9px;width:320px;max-width:100%}
.qpop-generic-form button[type="submit"]{
  all:unset;cursor:pointer;font-size:12px;font-weight:600;color:#fff;background:var(--ocean);
  border-radius:var(--radius);padding:8px 16px;box-shadow:var(--shadow)}
.qpop-generic-form button[type="submit"]:hover{background:var(--innovation)}