/* Digital nGenuity — STR Prep App styles Brand: Deep Slate #2F3B46 · Network Blue #346BB4 · Signal Amber #FBB515 Uplink Green #4EBA6F · Port Orange #F37021 · Steel Gray #BDC2C6 */ :root { --slate:#2F3B46; --blue:#346BB4; --amber:#FBB515; --green:#4EBA6F; --orange:#F37021; --gray:#BDC2C6; --bg:#F4F5F6; --card:#FFFFFF; --line:#E2E5E8; --text:#2F3B46; --muted:#6B7680; /* Role-specific tokens so the dark theme can override cleanly: */ --card-alt:#FBFCFD; /* nested/striped surfaces (categories, table zebra) */ --input:#FFFFFF; /* form control background */ --heading:#2F3B46; /* heading/label text (== slate in light mode) */ --header-grad:linear-gradient(90deg, var(--slate) 0%, #3a5f8a 100%); --line-strong:#C7CCD1; /* heavier hairline — question card borders, sidebar divider */ --line-stronger:#AEB4BA; /* heaviest — subcategory header dividers */ } /* Dark theme — set via data-theme on (theme.js applies saved/system preference before paint; the topbar toggle flips + persists it). Brand accent colours are intentionally kept so status/badges stay recognizable; --slate stays for the header band. */ :root[data-theme="dark"] { --bg:#0E141B; --card:#18222D; --card-alt:#1E2A36; --input:#111A23; --line:#2B3A48; --text:#E6EAEE; --muted:#93A1AD; --heading:#F1F4F7; --header-grad:linear-gradient(90deg, #1a2530 0%, #244066 100%); --line-strong:#3C4E5F; --line-stronger:#4C6070; } * { box-sizing: border-box; } body { margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text); background:var(--bg); font-size:14px; line-height:1.5; } a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; } header.topbar { background:var(--header-grad); color:#fff; padding:0 24px; display:flex; align-items:center; gap:24px; height:56px; } header.topbar .brand { font-weight:bold; font-size:17px; color:#fff; letter-spacing:.3px; } header.topbar .brand span { color:var(--amber); } header.topbar nav { margin-left:auto; display:flex; gap:16px; } header.topbar nav a { color:var(--gray); font-weight:bold; font-size:13px; } header.topbar nav a:hover, header.topbar nav a.active { color:#fff; text-decoration:none; } .client-switch select { background:#3c4a57; color:#fff; border:1px solid #4d5b68; border-radius:6px; padding:6px 10px; font-family:inherit; font-size:13px; } /* Theme toggle — sits in the topbar; translucent so it reads on the header band. */ .theme-toggle { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:5px 11px; font-family:inherit; font-size:12px; font-weight:bold; cursor:pointer; white-space:nowrap; } .theme-toggle:hover { background:rgba(255,255,255,.22); } .wrap { max-width:1080px; margin:0 auto; padding:24px; } .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; margin-bottom:18px; } .card h2 { margin:0 0 14px; font-size:16px; color:var(--heading); } .card h2.with-bar { border-left:4px solid var(--blue); padding-left:10px; } h1 { font-size:22px; color:var(--heading); margin:0 0 4px; } .subtitle { color:var(--muted); margin:0 0 20px; } .btn { display:inline-block; border:none; border-radius:6px; cursor:pointer; font-family:inherit; font-size:13px; font-weight:bold; padding:8px 14px; background:var(--blue); color:#fff; text-decoration:none; } .btn:hover { filter:brightness(.94); text-decoration:none; } .btn.amber { background:var(--amber); color:var(--slate); } .btn.green { background:var(--green); } .btn.orange { background:var(--orange); } .btn.ghost { background:var(--input); color:var(--heading); border:1px solid var(--line); } .btn.sm { padding:4px 9px; font-size:12px; } .btn.danger { background:#fff; color:#b23; border:1px solid #e5c2c2; } .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .spacer { flex:1; } table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; } th { font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); } tr:last-child td { border-bottom:none; } label { display:block; font-weight:bold; font-size:12px; color:var(--heading); margin:12px 0 4px; } input[type=text], input[type=password], input[type=number], input[type=date], select, textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; font-family:inherit; font-size:14px; background:var(--input); color:var(--text); } textarea { min-height:90px; resize:vertical; } .inline-form { display:inline; } .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } .form-grid .full { grid-column:1 / -1; } .badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:bold; color:#fff; white-space:nowrap; } .priority { font-weight:bold; } .priority.High { color:var(--orange); } .priority.Medium { color:var(--blue); } .priority.Low { color:var(--muted); } .status-select { font-size:12px; padding:4px 6px; width:auto; min-width:130px; } .score-big { font-size:46px; font-weight:bold; color:var(--blue); line-height:1; } .score-meter { height:10px; background:var(--line); border-radius:6px; overflow:hidden; margin:10px 0; } .score-meter > div { height:100%; background:var(--green); } .delta { font-weight:bold; } .counts { display:flex; gap:10px; flex-wrap:wrap; } .count-pill { border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--card); min-width:96px; } .count-pill .n { font-size:22px; font-weight:bold; } .count-pill .l { font-size:11px; color:var(--muted); } .flash { padding:11px 14px; border-radius:8px; margin-bottom:14px; font-size:13px; } .flash.ok { background:#e7f6ed; border:1px solid var(--green); color:#1d6b3c; } .flash.error { background:#fdece2; border:1px solid var(--orange); color:#9a3b10; } :root[data-theme="dark"] .flash.ok { background:#12321f; color:#8fe0ab; } :root[data-theme="dark"] .flash.error { background:#3a1d12; color:#f0b48f; } .phase-head { color:#fff; padding:8px 14px; border-radius:8px 8px 0 0; font-weight:bold; font-size:14px; } .phase-block { border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:18px; } .phase-block table { margin:0; } .muted { color:var(--muted); } .small { font-size:12px; } .tag { display:inline-block; background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:1px 7px; font-size:11px; color:var(--muted); } .empty { color:var(--muted); font-style:italic; padding:14px 0; } /* Progress bar (projects) */ .progress { height:8px; background:var(--line); border-radius:6px; overflow:hidden; min-width:90px; } .progress > div { height:100%; background:var(--blue); } .pct { font-size:11px; color:var(--muted); } /* Standards — nested Section › Category › Question accordion */ .acc { border:1px solid var(--line); border-radius:8px; margin-bottom:8px; background:var(--card); } .acc > summary { cursor:pointer; padding:10px 14px; font-weight:bold; color:var(--heading); list-style:none; display:flex; align-items:center; gap:10px; } .acc > summary::-webkit-details-marker { display:none; } .acc > summary::before { content:"\25B8"; color:var(--muted); font-size:11px; width:10px; } .acc[open] > summary::before { content:"\25BE"; } .acc > summary:hover { background:var(--bg); } .acc .acc-meta { margin-left:auto; font-weight:normal; color:var(--muted); font-size:12px; } .acc-body { padding:10px 14px 14px 34px; border-top:1px solid var(--line); } .acc-category { background:var(--card-alt); } .acc-tools { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; margin-bottom:10px; } .acc-tools .row { margin:0; } /* Engineer review sidebar — Alignment Report page only. Phase 2b: the review nav lives in the RIGHT column (was left), styled as a card to match the shared .page-toc, so it no longer stacks beside the Compass app sidebar. */ .align-report { display:grid; grid-template-columns:1fr 270px; gap:28px; align-items:start; } .align-report-content { min-width:0; grid-column:1; grid-row:1; } .align-report > .align-nav { grid-column:2; grid-row:1; } .align-nav { position:sticky; top:calc(var(--topbar-h) + 16px); align-self:start; max-height:calc(100vh - var(--topbar-h) - 32px); overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:14px; scrollbar-width:thin; } .align-nav::-webkit-scrollbar { width:8px; } .align-nav::-webkit-scrollbar-thumb { background:var(--line-strong); border-radius:4px; } .align-nav-head { display:flex; align-items:center; justify-content:space-between; font-weight:bold; color:var(--heading); font-size:16px; margin-bottom:10px; } .align-nav-pct { color:var(--blue); font-size:16px; } .align-nav-progress { height:9px; margin-bottom:20px; } .align-nav-list, .align-nav-cats { list-style:none; margin:0; padding:0; } .align-nav-sec { margin-bottom:6px; } .align-nav-row, .align-nav-link { display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; text-align:left; font:inherit; color:var(--text); padding:7px 6px; border-radius:6px; cursor:pointer; } .align-nav-link { padding:0; flex:1; min-width:0; } .align-nav-row:hover { background:var(--bg); } .align-nav-chevron { flex:0 0 auto; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--muted); padding:0; } .align-nav-chevron::before { content:"\25B8"; font-size:12px; display:inline-block; transition:transform .15s ease; } .align-nav-sec[data-expanded="1"] .align-nav-chevron::before { transform:rotate(90deg); } .align-nav-title { flex:1; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .align-nav-sec-row .align-nav-title { font-weight:bold; } .align-nav-count { font-size:12px; color:var(--muted); white-space:nowrap; } .align-nav-cats { display:none; padding-left:27px; margin-top:2px; } .align-nav-sec[data-expanded="1"] .align-nav-cats { display:block; } .align-nav-sec.is-active-sec > .align-nav-sec-row, .align-nav-cat.is-active-cat > .align-nav-cat-row { background:var(--card-alt); } .align-nav-cat.is-active-cat > .align-nav-cat-row .align-nav-title { font-weight:bold; } .align-nav-icon { flex:0 0 auto; width:17px; height:17px; border-radius:50%; position:relative; display:inline-block; } .align-nav-icon-none { border:2px dashed var(--muted); } .align-nav-icon-partial { background:conic-gradient(var(--blue) calc(var(--pct, 50) * 1%), var(--line) 0); } .align-nav-icon-done { background:var(--green); } .align-nav-icon-done::after { content:""; position:absolute; left:4px; top:3px; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); } .align-nav-mobile-toggle { display:none; margin-bottom:14px; } .align-nav-backdrop { display:none; } .align-nav-submit { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } .align-nav-submit .btn { width:100%; text-align:center; } /* Heavier borders — scoped to this page only; the bare .q-item/.acc-* rules above are shared with standards.html/assessment_report.html/alignment_scope.html. */ .align-report .q-item { border:2px solid var(--line-strong); border-radius:10px; padding:14px; margin-bottom:12px; } .align-report .q-item:last-child { border-bottom:2px solid var(--line-strong); margin-bottom:0; } .align-report .q-item textarea, .align-report .q-item input[type=url], .align-report .q-item input[type=text] { border:1px solid var(--line); } .align-report .acc-category > summary { border-bottom:3px solid var(--line-stronger); } .align-report .acc-category > .acc-body { border-top:none; } @media (max-width:900px) { .align-report { display:block; } .align-nav-mobile-toggle { display:inline-flex; align-items:center; gap:6px; } .align-nav { position:fixed; top:0; left:0; height:100vh; max-height:none; width:min(84vw, 320px); transform:translateX(-100%); transition:transform .2s ease; z-index:60; background:var(--card); border:none; border-radius:0; box-shadow:2px 0 14px rgba(0,0,0,.3); padding:16px 14px; margin:0; } .align-nav.is-open { transform:translateX(0); } .align-nav-backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s ease; } .align-nav-backdrop.is-open { opacity:1; pointer-events:auto; } } .q-row { padding:9px 2px; border-bottom:1px solid var(--line); } .q-row:last-child { border-bottom:none; } .q-head { display:flex; align-items:center; gap:10px; } .q-head .q-title { font-weight:bold; } /* Inline edit/add reveal — the summary is styled as a small button. */ .pop { display:inline-block; } .pop > summary { list-style:none; } .pop > summary::-webkit-details-marker { display:none; } .pop > summary::marker { content:""; } .pop .pop-body { margin-top:8px; width:min(560px, 100%); } /* Alignment — scope selection + review/fill */ .scope-row { display:flex; align-items:center; gap:8px; padding:5px 2px; font-weight:normal; margin:0; } .scope-row input { width:auto; } .scope-all { border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:6px; } .q-item { padding:12px 0; border-bottom:1px solid var(--line); } .q-item:last-child { border-bottom:none; } .q-item .q-title { font-weight:bold; } .answer-row { display:flex; gap:16px; align-items:center; margin:8px 0; flex-wrap:wrap; } .answer-row .ans { display:inline-flex; align-items:center; gap:6px; font-weight:bold; margin:0; } .answer-row .ans input { width:auto; } /* BAM finding review */ .q-finding { border-left:3px solid #C0392B; padding-left:10px; } .answer-box { background:var(--bg); border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:6px 0; } .rag-row .ans.rag { color: var(--rag); border:1px solid var(--rag); border-radius:999px; padding:3px 10px; } /* SOW workspace blocks */ .sow-block-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .sow-cover .h { font-size:20px; font-weight:bold; color:var(--heading); } .sow-block table { margin-top:6px; } .sow-total td { border-top:2px solid var(--line); background:var(--bg); } /* Roomier SOW block editor */ .pop-body.sow-edit { width:min(820px, 92vw); } .pop-body.sow-edit textarea { min-height:200px; font-size:13px; line-height:1.5; } /* ═══════════════════════════════════════════════════════════════════════════ UI REFRESH — Phase 0 foundation (design tokens + component scaffolding). Additive only: these tokens/classes are NOT wired into base.html yet, so the current layout is unchanged. Phases 1–3 consume them (grouped left sidebar, right-hand sticky TOC, modals). See docs/ui-refresh-plan.md. ═══════════════════════════════════════════════════════════════════════════ */ :root { --sidebar-w:240px; --topbar-h:56px; --toc-w:240px; --sidebar-bg:var(--card); --sidebar-fg:var(--text); --sidebar-muted:var(--muted); --sidebar-hover-bg:var(--card-alt); --sidebar-active-bg:var(--blue); --sidebar-active-fg:#fff; --shell-line:var(--line); --radius:10px; } /* App shell: fixed-width sidebar + fluid main. Collapses to one column on mobile. */ .app-shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh; } .app-sidebar { background:var(--sidebar-bg); border-right:1px solid var(--shell-line); padding:16px 12px; display:flex; flex-direction:column; gap:6px; } .app-sidebar .brand { font-weight:bold; font-size:16px; color:var(--heading); padding:6px 10px 2px; } .app-sidebar .brand span { color:var(--amber); } .app-sidebar .client-name { color:var(--muted); font-size:12px; padding:0 10px 10px; border-bottom:1px solid var(--shell-line); margin-bottom:6px; } .sidebar-group { margin-top:10px; } .sidebar-group > .label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--sidebar-muted); padding:4px 10px; } .sidebar-link { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--sidebar-fg); font-weight:600; font-size:13px; } .sidebar-link:hover { background:var(--sidebar-hover-bg); text-decoration:none; } .sidebar-link.active { background:var(--sidebar-active-bg); color:var(--sidebar-active-fg); } .app-main { min-width:0; display:flex; flex-direction:column; } /* Slim top bar variant: global actions + client picker only. */ .app-topbar { display:flex; align-items:center; gap:16px; height:var(--topbar-h); padding:0 24px; border-bottom:1px solid var(--shell-line); background:var(--card); } .app-topbar .spacer { margin-left:auto; } /* Two-column content + right-hand sticky table-of-contents (Phase 2). Lives inside .wrap.wrap-wide, which supplies the outer width/padding. */ .wrap.wrap-wide { max-width:1200px; } .page-layout { display:grid; grid-template-columns:1fr var(--toc-w); gap:24px; align-items:start; } .page-main { min-width:0; } .page-toc { position:sticky; top:calc(var(--topbar-h) + 16px); align-self:start; max-height:calc(100vh - var(--topbar-h) - 32px); overflow:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:12px; } .page-toc-title { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); padding:2px 8px 8px; } .toc-nav { display:flex; flex-direction:column; gap:1px; } .toc-link { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:5px 8px; border-radius:6px; text-decoration:none; color:var(--text); border-left:2px solid transparent; font-size:13px; line-height:1.35; } .toc-link:hover { background:var(--card-alt); } .toc-link .toc-label { overflow:hidden; text-overflow:ellipsis; } .toc-link .toc-meta { flex:none; font-size:11px; color:var(--muted); } .toc-lvl-2 { padding-left:20px; font-size:12px; color:var(--muted); } .toc-link.toc-active { background:var(--card-alt); border-left-color:var(--amber); color:var(--heading); font-weight:600; } .toc-lvl-2.toc-active { color:var(--heading); } /* Offset scroll targets so they clear the sticky top bar. */ [data-toc-section] { scroll-margin-top:calc(var(--topbar-h) + 12px); } /* Stat card + chip (Phase 4 dashboard). */ .stat-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:2px; } .stat-card .value { font-size:26px; font-weight:bold; color:var(--heading); } .stat-card .label { color:var(--muted); font-size:12px; } .chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; color:var(--text); background:var(--card-alt); } /* Native modal base (Phase 3 forms). Toggled via data-* in app.js (CSP-safe). */ dialog.modal { border:none; border-radius:12px; padding:0; width:min(560px, calc(100% - 32px)); background:var(--card); color:var(--text); box-shadow:0 12px 44px rgba(0,0,0,.28); } dialog.modal::backdrop { background:rgba(0,0,0,.45); } dialog.modal .modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); } dialog.modal .modal-body { padding:20px; } dialog.modal .modal-foot { padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; } dialog.modal .modal-head h3 { margin:0; font-size:15px; color:var(--heading); } dialog.modal .modal-x { background:none; border:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:0 2px; } dialog.modal .modal-x:hover { color:var(--heading); } dialog.modal .modal-body > form > label:first-child { margin-top:0; } /* A second form in the body (e.g. a Delete action) is set off from the first. */ dialog.modal .modal-body > form + form { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); } dialog.modal[open] { animation:modal-in .12s ease-out; } @keyframes modal-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce) { dialog.modal[open] { animation:none; } } /* Mobile: sidebar becomes an off-canvas drawer; TOC hides. */ .app-sidebar-backdrop { display:none; } @media (max-width:900px) { .app-shell { grid-template-columns:1fr; } .app-sidebar { position:fixed; z-index:40; top:0; bottom:0; left:0; width:var(--sidebar-w); transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(0,0,0,.3); } .app-shell.nav-open .app-sidebar { transform:translateX(0); } .app-shell.nav-open .app-sidebar-backdrop { display:block; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.4); } .page-layout { grid-template-columns:1fr; } .page-toc { display:none; } } /* ── UI REFRESH — Phase 1: wire the Compass shell into base.html ── */ .app-sidebar{ position:sticky; top:0; height:100vh; overflow-y:auto; } .app-sidebar .brand{ display:flex; align-items:center; gap:8px; text-decoration:none; } .app-sidebar .brand span{ color:var(--amber); } .app-sidebar .brand-sub{ font-size:11px; color:var(--muted); padding:0 10px 8px; border-bottom:1px solid var(--line); margin-bottom:4px; } .app-sidebar .client-name{ font-weight:700; font-size:13px; color:var(--heading); padding:8px 10px 2px; } .app-topbar{ position:sticky; top:0; z-index:5; } .app-topbar .hamb{ display:none; background:var(--card-alt); border:1px solid var(--line); border-radius:8px; color:var(--text); width:34px; height:34px; cursor:pointer; font-size:15px; } .app-topbar .client-switch-select{ background:var(--input); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-family:inherit; font-size:13px; font-weight:600; } .app-topbar .theme-toggle-v2{ background:var(--card-alt); border:1px solid var(--line); border-radius:8px; color:var(--text); height:34px; padding:0 12px; cursor:pointer; font-size:14px; font-weight:700; } .app-topbar .theme-toggle-v2:hover, .app-topbar .hamb:hover{ background:var(--sidebar-hover-bg); } .app-topbar .user-chip{ display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; padding:4px 6px; border-radius:8px; } .app-topbar .user-chip:hover{ background:var(--card-alt); text-decoration:none; } .app-topbar .user-chip .av{ width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; } .app-topbar .user-chip .who{ line-height:1.15; display:flex; flex-direction:column; } .app-topbar .user-chip .who b{ font-size:12.5px; } .app-topbar .user-chip .who span{ font-size:11px; color:var(--muted); } @media (max-width:900px){ .app-sidebar{ position:fixed; height:auto; } .app-topbar .hamb{ display:inline-block; } .app-topbar .user-chip .who{ display:none; } }