/* ============ Capstone Compliance — Source Registry ============ */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink-900); background: #F4F7FB; }
.cr { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

/* brand blue accents (real Capstone palette) */
:root {
  --c-navy: var(--navy);
  --c-azure: var(--azure-500);
  --c-azure-700: var(--azure-700);
  --c-pale: var(--azure-50);
  --c-pale2: #F0F6FE;
  --c-line: #E4EAF1;
  --c-panel: #FFFFFF;
  --c-soft: #F7F9FC;
}

/* ---- Sidebar ---- */
.cr-side { background: var(--c-navy); color: #C9D9EA; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.cr-logo { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; }
.cr-logo .cr-mark { width: 30px; height: 30px; flex: 0 0 auto; background: url(/assets/capstone-mark.svg) center/contain no-repeat; }
.cr-logo .cr-word { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #fff; letter-spacing: -0.01em; }
.cr-nav { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.cr-nav-sec { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #5E7E9E; padding: 16px 12px 6px; }
.cr-nav-i { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: #B7CAdE; cursor: pointer; transition: background 120ms, color 120ms; }
.cr-nav-i:hover { background: rgba(255,255,255,0.06); color: #fff; }
.cr-nav-i.on { background: var(--c-azure); color: #fff; }
.cr-nav-i.on svg { color: #fff; }
.cr-nav-i svg { color: #6E8DAC; flex: 0 0 auto; }
.cr-nav-i.on { box-shadow: 0 4px 14px -4px rgba(0,153,255,0.6); }
.cr-acct { position: relative; margin-top: auto; }
.cr-side-foot { width: 100%; padding: 14px 16px; border: none; border-top: 1px solid rgba(255,255,255,0.08); background: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; transition: background .15s; }
.cr-side-foot:hover, .cr-side-foot.on { background: rgba(255,255,255,0.06); }
.cr-side-foot .av { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 50%; background: var(--c-azure); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.cr-side-foot .nm { font-size: 13px; color: #fff; font-weight: 600; }
.cr-side-foot .rl { font-size: 11px; color: #6E8DAC; }
.cr-acct-who { flex: 1; min-width: 0; }
.cr-acct-who .nm, .cr-acct-who .rl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-acct-caret { color: #6E8DAC; font-size: 16px; flex: 0 0 auto; }
.cr-acct-menu { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 6px); background: #0d2236; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6); padding: 6px; z-index: 40; }
.cr-acct-id { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 6px; }
.cr-acct-id .av { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--c-azure); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.cr-acct-id .nm { font-size: 13px; color: #fff; font-weight: 600; }
.cr-acct-id .rl { font-size: 11px; color: #6E8DAC; }
.cr-acct-email { font-size: 11px; color: #9DB2C6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.cr-acct-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: none; background: transparent; color: #C7D6E3; font: inherit; font-size: 13px; text-align: left; text-decoration: none; border-radius: 7px; cursor: pointer; }
.cr-acct-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.cr-acct-item svg { color: #6E8DAC; flex: 0 0 auto; }
.cr-acct-signout { color: #FF9A9A; }
.cr-acct-signout:hover { background: rgba(255,90,90,0.14); color: #FFC2C2; }
.cr-acct-signout:disabled { opacity: .6; cursor: default; }

/* ---- Main ---- */
.cr-main { display: flex; flex-direction: column; min-width: 0; }
.cr-top { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--c-line); position: sticky; top: 0; z-index: 20; }
.cr-home { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--ink-400); border: 1px solid transparent; text-decoration: none; transition: background .15s, color .15s; }
.cr-home:hover { background: var(--c-soft); color: var(--ink-900); }
.cr-home svg { display: block; }
.cr-crumb { font-size: 13px; color: var(--ink-400); }
.cr-crumb b { color: var(--ink-900); }
.cr-title-h { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.cr-search { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: 9px; width: 320px; color: var(--ink-400); }
.cr-search input { border: none; background: none; outline: none; font-size: 13.5px; font-family: var(--font-sans); color: var(--ink-900); width: 100%; }
.cr-role { display: flex; align-items: center; gap: 8px; }
.cr-role select { height: 38px; border: 1px solid var(--c-line); border-radius: 9px; padding: 0 10px; font-family: var(--font-sans); font-size: 13px; color: var(--ink-700); background: #fff; cursor: pointer; }

.cr-body { padding: 26px 28px 60px; overflow-y: auto; }
.cr-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.cr-h1 { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -0.02em; }
.cr-sub { font-size: 14px; color: var(--ink-400); margin-top: 4px; }

/* ---- compliance note ---- */
.cr-note { display: flex; gap: 12px; background: #FFF8E8; border: 1px solid #F2DFA8; border-radius: 11px; padding: 14px 16px; margin-bottom: 22px; }
.cr-note svg { color: #B7860B; flex: 0 0 auto; margin-top: 1px; }
.cr-note p { margin: 0; font-size: 13px; line-height: 1.5; color: #7A5A12; }

/* ---- dashboard summary cards ---- */
.cr-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 14px; }
.cr-kpi { background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 13px; padding: 16px; }
.cr-kpi .v { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.cr-kpi .l { font-size: 12px; color: var(--ink-400); margin-top: 8px; line-height: 1.3; }
.cr-kpi.accent { background: linear-gradient(150deg, var(--c-pale), #fff); border-color: var(--azure-100); }
.cr-kpi.accent .v { color: var(--c-azure-700); }
.cr-refresh { font-size: 12px; color: var(--ink-400); margin: 4px 2px 24px; display: flex; align-items: center; gap: 7px; }

/* ---- toolbar / filters ---- */
.cr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cr-seg { display: flex; background: var(--c-soft); border: 1px solid var(--c-line); border-radius: 9px; padding: 3px; }
.cr-seg button { border: none; background: none; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-500); padding: 6px 13px; border-radius: 6px; cursor: pointer; }
.cr-seg button.on { background: #fff; color: var(--c-azure-700); font-weight: 600; box-shadow: var(--shadow-xs); }
.cr-filter { height: 36px; border: 1px solid var(--c-line); border-radius: 9px; padding: 0 10px; font-family: var(--font-sans); font-size: 13px; color: var(--ink-700); background: #fff; cursor: pointer; }
.cr-spacer { flex: 1; }
.cr-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-weight: 600; font-size: 13px; height: 36px; padding: 0 14px; border-radius: 9px; cursor: pointer; border: 1px solid transparent; transition: all 120ms; white-space: nowrap; }
.cr-btn-primary { background: var(--c-azure); color: #fff; }
.cr-btn-primary:hover { background: var(--c-azure-700); }
.cr-btn-outline { background: #fff; border-color: var(--c-line); color: var(--ink-700); }
.cr-btn-outline:hover { background: var(--c-soft); border-color: #CFD9E5; }

/* ---- registry table ---- */
.cr-tablewrap { background: #fff; border: 1px solid var(--c-line); border-radius: 13px; overflow: hidden; }
.cr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cr-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-400); padding: 12px 16px; background: var(--c-soft); border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.cr-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.cr-table tbody tr:last-child td { border-bottom: none; }
.cr-table tbody tr { cursor: pointer; transition: background 100ms; }
.cr-table tbody tr:hover { background: var(--c-pale2); }
.cr-src-name { font-weight: 600; color: var(--ink-900); display: flex; align-items: center; gap: 10px; }
.cr-src-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--c-pale); color: var(--c-azure-700); display: grid; place-items: center; flex: 0 0 auto; }
.cr-src-sub { font-size: 11.5px; color: var(--ink-400); font-weight: 400; margin-top: 2px; }
.cr-cell-mut { color: var(--ink-500); }
.cr-mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-500); }

/* ---- badges ---- */
.cr-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cr-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-badge.success { background: #E4F6EC; color: #18794E; }
.cr-badge.warning { background: #FDF1DD; color: #9A6700; }
.cr-badge.info { background: var(--c-pale); color: var(--c-azure-700); }
.cr-badge.purple { background: #F0EAFE; color: #6D44C8; }
.cr-badge.danger { background: #FCE9E9; color: #C0322B; }
.cr-badge.neutral { background: #EEF1F5; color: #5E7589; }
.cr-free { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 7px; background: var(--c-soft); color: var(--ink-600); border: 1px solid var(--c-line); white-space: nowrap; }

/* ---- detail drawer ---- */
.cr-drawer-bd { position: fixed; inset: 0; background: rgba(8,20,35,0.42); z-index: 60; opacity: 0; pointer-events: none; transition: opacity 200ms; }
.cr-drawer-bd.open { opacity: 1; pointer-events: auto; }
.cr-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 620px; max-width: 94vw; background: #fff; z-index: 61; box-shadow: -20px 0 60px -20px rgba(8,20,35,0.4); transform: translateX(100%); transition: transform 260ms var(--ease-out); display: flex; flex-direction: column; }
.cr-drawer.open { transform: none; }
.cr-dr-head { padding: 22px 26px 18px; border-bottom: 1px solid var(--c-line); }
.cr-dr-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cr-dr-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.cr-dr-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cr-x { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--c-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink-500); flex: 0 0 auto; }
.cr-x:hover { background: var(--c-soft); }
.cr-dr-body { flex: 1; overflow-y: auto; padding: 22px 26px 40px; }
.cr-dr-tabs { display: flex; gap: 4px; padding: 0 26px; border-bottom: 1px solid var(--c-line); }
.cr-dr-tab { font-size: 13px; font-weight: 600; color: var(--ink-400); padding: 12px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cr-dr-tab.on { color: var(--c-azure-700); border-bottom-color: var(--c-azure); }
.cr-sec { margin-bottom: 24px; }
.cr-sec-h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; }
.cr-kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 13px; }
.cr-kv dt { color: var(--ink-400); }
.cr-kv dd { margin: 0; color: var(--ink-800); font-weight: 500; }
.cr-kv dd a { color: var(--c-azure-700); word-break: break-all; }
.cr-desc { font-size: 14px; line-height: 1.55; color: var(--ink-600); }
.cr-pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.cr-pill { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 7px; background: var(--c-soft); color: var(--ink-600); border: 1px solid var(--c-line); }
.cr-legal { font-size: 12.5px; line-height: 1.5; color: #7A5A12; background: #FFF8E8; border: 1px solid #F2DFA8; border-radius: 9px; padding: 11px 13px; }

/* audit timeline */
.cr-audit { display: flex; flex-direction: column; gap: 0; }
.cr-au { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.cr-au:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--c-line); }
.cr-au-dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; flex: 0 0 auto; margin-top: 2px; box-shadow: 0 0 0 1px var(--c-line); }
.cr-au-dot.ok { background: #30A46C; } .cr-au-dot.match { background: #E5484D; } .cr-au-dot.cfg { background: var(--c-azure); } .cr-au-dot.warn { background: #E0A33B; }
.cr-au-act { font-size: 13px; color: var(--ink-800); line-height: 1.4; }
.cr-au-meta { font-size: 11.5px; color: var(--ink-400); margin-top: 2px; }

/* evidence */
.cr-ev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; margin-bottom: 10px; }
.cr-ev-ic { width: 36px; height: 36px; border-radius: 8px; background: var(--c-pale); color: var(--c-azure-700); display: grid; place-items: center; flex: 0 0 auto; }
.cr-ev-nm { font-size: 13px; font-weight: 600; }
.cr-ev-meta { font-size: 11.5px; color: var(--ink-400); }
.cr-ev-id { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); margin-left: auto; }

.cr-dr-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* reports grid */
.cr-rep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cr-rep { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 18px; cursor: pointer; transition: border-color 140ms, transform 140ms, box-shadow 140ms; }
.cr-rep:hover { border-color: var(--azure-200); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.cr-rep-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--c-pale); color: var(--c-azure-700); display: grid; place-items: center; margin-bottom: 14px; }
.cr-rep h4 { font-size: 14px; font-weight: 600; margin: 0 0 5px; }
.cr-rep p { font-size: 12.5px; color: var(--ink-400); margin: 0; line-height: 1.4; }

/* checks table */
.cr-checks td .st { font-weight: 600; }

/* role caps note */
.cr-rolecaps { font-size: 12px; color: var(--ink-400); display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cr-cap { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--c-pale); color: var(--c-azure-700); }

.cr-section-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 34px 0 14px; letter-spacing: -0.01em; }

@media (max-width: 1200px) { .cr-kpis { grid-template-columns: repeat(3,1fr); } .cr-rep-grid { grid-template-columns: repeat(2,1fr); } }

/* daily checklist box */
.cr-chk { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--ink-200, #d7dee7); display: inline-grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; }
.cr-chk.done { background: var(--c-azure, #0099FF); border-color: var(--c-azure, #0099FF); }

/* registry footer */
.cr-foot { margin-top: 36px; padding: 22px 0 8px; border-top: 1px solid var(--ink-100, #e7edf3); }
.cr-foot-quote { font-family: var(--font-display); font-size: 15px; color: var(--ink-600, #3d586b); font-style: italic; margin-bottom: 10px; }
.cr-foot-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-500, #5e7589); }
.cr-foot-brand b { color: var(--ink-800, #13283b); }
.cr-foot-mark { width: 20px; height: 14px; background: var(--c-azure, #0099FF); clip-path: polygon(0 100%, 35% 0, 100% 0, 65% 100%); display: inline-block; }