/*******************************************************************************
 * @file         design.css
 * @brief        Shared visual system.
 * @project      TopoTrace
 *
 * @author       Michael McGinnis
 * @date         2026-09-18
 * @version      1.0.0
 *
 * Copyright (c) 2026 TopoTrace LLC. All rights reserved.
 * Licensed under the Apache License, Version 2.0 -- see the LICENSE file at the repository root.
 ******************************************************************************/

/* Shared visual system. Loaded after feature styles so every surface uses the same scale. */
:root{--mu-black:#18252e;--mu-black-soft:#2d404c;--mu-page-bg:#f4f6f8;--mu-border:#dfe5e9;--mu-text:#233440;--mu-text-muted:#60717d;--mu-accent:#9e2435;--mu-accent-soft:#faeff1;--radius:12px;--sidebar-width:232px}
html{scroll-behavior:smooth}body{font-size:14px;line-height:1.55}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #327baf;outline-offset:3px}a{ text-underline-offset:3px}h1,h2,h3{line-height:1.25}h1{letter-spacing:-.035em}p{max-width:90ch}svg{vertical-align:middle}img{max-width:100%}[hidden]{display:none!important}
.skip-link{position:fixed;top:-80px;left:250px;z-index:1100;padding:12px 20px;background:white;color:var(--mu-text)}.skip-link:focus{top:8px}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);display:flex;flex-direction:column;padding:28px 16px 16px;background:var(--mu-black);color:white;z-index:100;overflow-y:auto}
.brand{gap:11px;padding:0 10px 25px;border-bottom:1px solid #ffffff18;align-items:center}.brand-mark{width:35px;height:35px}.brand-word{font-size:19px;letter-spacing:.14em}.brand-tagline{display:block;border:0;padding:3px 0 0;margin:0;color:#a3b5c1;font-size:10px;letter-spacing:.06em}.brand-copy{display:block}
.view-tabs{display:block;padding-top:12px}.nav-section{margin-top:16px}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#8fa4b2;font-weight:700;padding:0 12px;margin:0 0 7px}
.view-tabs a{display:flex;justify-content:flex-start;gap:12px;width:auto;height:auto;min-height:39px;padding:9px 12px;margin:2px 0;color:#bccad3;border-radius:7px;font-size:13px;font-weight:500;border-left:2px solid transparent}
.view-tabs a .tab-label{position:static;width:auto;height:auto;padding:0;margin:0;clip:auto;overflow:visible;white-space:normal}.view-tabs a svg{width:18px;height:18px;opacity:.8}.view-tabs a.active{background:#ffffff10;color:white;border-left-color:#e37884}.view-tabs a:hover{background:#ffffff0b;color:white}.view-tabs a.active svg{opacity:1}
.sidebar-foot{margin-top:auto;padding:28px 12px 4px;color:#8fa4b2;font-size:11px}.sidebar-foot strong{display:block;color:#cbd6dd;font-weight:500;margin-bottom:3px}.sidebar-foot a{color:#cbd6dd;text-decoration:none}.sidebar-close{display:none}
.topbar{margin-left:var(--sidebar-width);min-height:76px;padding:15px 34px;background:white;color:var(--mu-text);border-bottom:1px solid var(--mu-border);gap:14px;flex-wrap:wrap;justify-content:flex-start}
.location{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mu-text-muted);margin-right:auto}.location strong{color:var(--mu-text);font-weight:600}.location-divider{color:#b6c1c8}.mobile-menu{display:none}
.search{gap:6px}.search select,.search input{background:#f7f9fa;border:1px solid var(--mu-border);font-size:12px;padding:8px;min-height:35px}.search input{min-width:120px;width:160px}.search select{max-width:150px}.search button,.auth-control button{font-size:12px;min-height:35px}
.auth-control{position:relative;order:2}.auth-control button.ghost{border-color:var(--mu-border);color:var(--mu-text);background:white}.auth-form{position:absolute;right:0;top:46px;width:min(400px,calc(100vw - 32px));background:white;border:1px solid var(--mu-border);padding:18px;box-shadow:0 16px 48px #18252e26;border-radius:12px;z-index:150;flex-wrap:wrap}.auth-form input{width:100%;min-width:0;background:#f4f6f8;color:var(--mu-text);border:1px solid var(--mu-border)}.auth-form .save-msg,.oauth-status{color:var(--mu-text-muted)}
main#app{max-width:1560px;margin:0 0 0 var(--sidebar-width);padding:34px 38px 56px;min-height:calc(100vh - 160px);min-width:0}.work-page,.visibility-page,.workspace-page{max-width:none;margin:0}.section-heading{gap:16px;flex-wrap:wrap;margin-bottom:24px;align-items:center}.section-heading h1,main#app h1{font-size:28px;font-weight:700;margin-top:0;margin-bottom:8px}.section-heading h1{margin-bottom:0}.page-intro{color:var(--mu-text-muted);margin:8px 0 26px;max-width:76ch;font-size:14px}
.fact-card,.host-card,.stat-card,.visibility-stats>div,.board-column{border-color:var(--mu-border);box-shadow:0 2px 3px #18252e03;border-radius:var(--radius)}.fact-card{padding:24px;margin-bottom:24px;min-width:0;overflow-wrap:anywhere}.fact-card h2{text-transform:none;letter-spacing:-.015em;font-size:17px;color:var(--mu-text);margin-bottom:16px}.fact-card h3{font-size:14px}.host-grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}.host-card{padding:21px;gap:12px}.host-name{font-size:15px;overflow-wrap:anywhere}.platform-icon{padding:7px;width:36px;height:36px;border-radius:9px;background:#eef3f6}.host-card:hover{border-color:#b8c8d3;box-shadow:0 8px 22px #18252e08}.host-platform{text-transform:capitalize}.host-card .last-cooked{padding-top:12px}.stat-grid,.visibility-stats{gap:16px;margin:22px 0}.stat-card,.visibility-stats>div{padding:22px;background:white}.stat-value,.visibility-stats strong{font-size:30px;letter-spacing:-.04em;color:var(--mu-text);font-variant-numeric:tabular-nums}.stat-label,.visibility-stats span{font-size:12px;color:var(--mu-text-muted)}
/* Quiet secondary actions; color is reserved for the chosen action and state. */
#app button,.search button,.auth-control button{border:1px solid var(--mu-border);border-radius:7px;background:white;color:var(--mu-text);font-weight:600;padding:9px 13px;line-height:1.35;min-height:36px;box-shadow:0 1px 2px #18252e05}
#app button:hover,.search button:hover,.auth-control button:hover{background:#edf2f5;border-color:#bbc9d1}#app button[type=submit],.search button[type=submit],.auth-form button[type=submit]{background:var(--mu-black);border-color:var(--mu-black);color:white}#app button[type=submit]:hover,.search button[type=submit]:hover{background:var(--mu-black-soft)}
#app input:not([type=checkbox]):not([type=radio]),#app select,#app textarea{border:1px solid #ccd6dd;background:white;color:var(--mu-text);padding:9px 11px;border-radius:7px;max-width:100%;min-width:0;font-size:13px}#app input[type=checkbox]{accent-color:var(--mu-accent)}#app a.ghost{background:white;border:1px solid var(--mu-border);border-radius:7px;padding:9px 13px;font-size:13px;text-decoration:none}
.work-form{gap:16px;padding:16px 0}.work-field{font-size:12px;color:var(--mu-text-muted);gap:7px}.work-form fieldset{border:1px solid var(--mu-border);border-radius:8px;padding:16px}.editor-row{gap:10px}.editor-row input.wide{min-width:0}.editor-row label{line-height:1.5}.work-item-head h2{margin-bottom:0}.saved-view-controls{background:#f8fafb;border-color:var(--mu-border);padding:12px 16px;font-size:12px}.saved-view-controls summary{cursor:pointer}.visibility-toolbar{gap:8px;margin:16px 0}.visibility-toolbar button[aria-pressed=true]{background:var(--mu-black)!important;color:white!important;border-color:var(--mu-black)!important}
table{font-variant-numeric:tabular-nums}.fact-table td,.visibility-table td{padding:13px 12px;font-size:13px}.visibility-table th,.fact-list-table th,.docs-table th,.bench-table th{background:#f7f9fa;color:var(--mu-text-muted);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:12px;text-align:left}.visibility-table tbody tr:hover{background:#fafbfc}.visibility-table-wrap,.fact-list-scroll{border:1px solid var(--mu-border);border-radius:9px;overflow:auto}.visibility-table-wrap table{margin:0}.visibility-badge,.evidence-badge{font-size:11px;font-weight:600;border-radius:5px;padding:4px 8px;white-space:nowrap}.evidence-verified{color:#216440}.evidence-outdated{color:#885a13}
.visibility-demo{font-size:12px;border:1px solid #e7d59e;background:#fff9e9;color:#71551d;border-radius:8px;padding:14px 18px;max-width:none}.demo-story{border:1px solid #dbe4ed;border-left:3px solid #607e95;background:#edf3f8;padding:22px}.demo-story h2{font-size:18px;margin:0 0 8px}.demo-story-grid>div{border:1px solid var(--mu-border)}.demo-guide{margin:18px 0;background:white;border:1px solid var(--mu-border);padding:14px 18px;border-radius:9px}.demo-guide summary{font-weight:600;cursor:pointer;font-size:13px}.demo-guide ol{font-size:13px;color:var(--mu-text-muted)}
.footer{margin:0 0 0 var(--sidebar-width);padding:18px 38px;border-top:1px solid var(--mu-border);display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:11px;color:var(--mu-text-muted);text-align:left}.footer p{margin:0}.footer-links{display:flex;gap:18px}.footer a{text-decoration:none}.footer a:hover{text-decoration:underline}
.empty-state{border:1px dashed #cdd8e0;border-radius:12px;background:white;padding:46px 24px}.empty-state img{max-width:120px}.empty-state h2{font-size:21px}.about-logo{width:190px}.risk-bar-wrap{height:7px}.risk-bar{background:#9f7031}.trend-chart,.entity-graph,.asset-graph{border:1px solid var(--mu-border);border-radius:10px;background:#fafcfd}.ent-legend{padding:12px 0}.ent-tip{line-height:1.6}.risk-row{grid-template-columns:minmax(100px,1fr) minmax(70px,1fr) 110px auto}.ent-table{display:block;overflow:auto}.stat-card.stat-warn{background:#fffafa;border-color:#ead0d0}
/* Documentation: a searchable library and a readable article, not a wall of cards. */
.docs-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}.docs-library{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto}.docs-search{width:100%;margin-bottom:18px}.docs-nav{width:auto}.docs-nav a{font-size:12px;font-weight:500;padding:8px 10px}.docs-nav a.active{background:#e5ecf1;color:#203d50;font-weight:600}.docs-category{list-style:none;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mu-text-muted);padding:20px 10px 7px}.docs-body{padding:30px 36px;max-width:920px;min-width:0;overflow-wrap:anywhere}.docs-body>h2:first-of-type{font-size:27px;letter-spacing:-.03em;line-height:1.25;margin-top:22px;color:var(--mu-text)}.docs-body h3{font-size:19px;margin-top:32px;border-top:1px solid var(--mu-border);padding-top:24px}.docs-body h4{font-size:15px;margin-top:24px}.docs-body p,.docs-body li{line-height:1.8;font-size:14px;max-width:78ch}.docs-body p{margin-bottom:16px}.docs-body a{color:#285e7c}.docs-body pre{padding:18px;background:#192b36;color:#e4edf2;line-height:1.6;overflow:auto;border:0;border-radius:8px}.docs-body pre code{padding:0;background:transparent;color:inherit;white-space:pre}.docs-body code{background:#edf2f5;color:#2c5169}.docs-tools{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:var(--mu-text-muted);font-size:11px;border-bottom:1px solid var(--mu-border);padding-bottom:16px}.docs-toc{margin:24px 0;padding:16px 20px;border:1px solid var(--mu-border);border-radius:8px;background:#f8fafb}.docs-toc summary{font-size:12px;font-weight:600;cursor:pointer}.docs-toc ul{margin-bottom:0}.docs-toc a{font-size:12px}.docs-table-wrap{overflow:auto;max-width:100%;margin:18px 0;border:1px solid var(--mu-border);border-radius:8px}.docs-table{margin:0;min-width:440px}.docs-table td{font-size:12px;padding:12px}.docs-empty{padding:20px;font-size:13px;color:var(--mu-text-muted)}.docs-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.docs-flow>div{padding:16px;border:1px solid var(--mu-border);border-radius:8px;background:#f8fafb}.docs-flow span{display:block;color:var(--mu-accent);font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:8px}.docs-flow strong{display:block;font-size:13px}.docs-flow p{font-size:12px;margin:5px 0 0;line-height:1.6}
.presentation-mode .topbar{padding-right:200px}.presentation-mode .sidebar{display:none}.presentation-mode main#app,.presentation-mode .topbar,.presentation-mode .footer{margin-left:0}.presentation-exit{background:white;border-color:var(--mu-border);color:var(--mu-text)}.compact-view .visibility-table td,.compact-view .visibility-table th{padding:7px 10px}.compact-view .fact-card{padding:16px}
.legal-page{background:white;border:1px solid var(--mu-border);border-radius:14px;padding:40px!important;max-width:860px}.legal-page h1{font-size:32px}.legal-page p{color:#465966}.legal-page .legal-logo{width:180px;margin:12px 0 24px}.legal-page .legal-summary{background:#f5f8fa;border-left-color:var(--mu-accent)}
@media(min-width:1790px){main#app{margin-right:auto;margin-left:calc(var(--sidebar-width) + (100vw - var(--sidebar-width) - 1560px)/2)}}
@media(max-width:1190px){.topbar{padding:15px 24px}.topbar .search{order:3;width:100%}.search input{flex:1}main#app{padding:28px 24px}.docs-layout{grid-template-columns:185px minmax(0,1fr);gap:18px}.docs-body{padding:24px}.visibility-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){:root{--sidebar-width:0px}.sidebar{width:252px;transform:translateX(-100%);transition:transform .15s ease}.nav-open .sidebar{transform:translateX(0)}.sidebar-close{display:block;align-self:flex-end;color:white;background:transparent;border:1px solid #ffffff35;border-radius:6px;padding:6px 12px;margin-bottom:12px}.mobile-menu{display:block;background:white;border:1px solid var(--mu-border);border-radius:6px;padding:7px 10px;color:var(--mu-text)}.nav-scrim{position:fixed;inset:0;background:#0c192d70;z-index:90;border:0;border-radius:0}.skip-link{left:16px}.topbar{padding:12px 20px}.footer{padding:20px}.presentation-mode .mobile-menu{display:none}.docs-layout{grid-template-columns:180px minmax(0,1fr)}.docs-library{position:static;max-height:none}}
@media(max-width:620px){main#app{padding:24px 16px 36px}.section-heading h1,main#app h1{font-size:25px}.fact-card{padding:18px}.search select{max-width:115px}.search input{width:100px}.search button{padding:8px}.location{font-size:11px}.topbar{padding:12px 16px}.visibility-toolbar input[type=search]{width:100%;min-width:0}.visibility-stats>div,.stat-card{padding:16px}.docs-layout{display:block}.docs-library{margin-bottom:20px}.docs-nav{max-height:180px;overflow:auto;border:1px solid var(--mu-border);border-radius:8px;background:white;padding:8px}.docs-body{padding:20px}.docs-body>h2:first-of-type{font-size:24px}.docs-flow{grid-template-columns:1fr}.docs-category{padding-top:10px}.docs-search{margin-bottom:10px}.risk-row{grid-template-columns:1fr 1fr;gap:6px}.demo-story-grid{grid-template-columns:1fr}.footer-links{flex-wrap:wrap}.legal-page{margin:16px!important;padding:24px!important}.editor-row{flex-wrap:wrap}.work-item-head h2{flex-basis:100%}.presentation-mode .topbar{padding-right:16px;padding-top:60px}.auth-form{right:0}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.sidebar,.topbar,.footer,.docs-library,.docs-tools,.docs-toc,.skip-link,.presentation-exit,.nav-scrim{display:none!important}main#app,.presentation-mode main#app{margin:0;padding:0;max-width:none;min-height:0}.docs-layout{display:block}.docs-body{border:0;max-width:none;padding:0;box-shadow:none}.docs-body h2,.docs-body h3,.docs-body h4{break-after:avoid}.docs-body pre,.docs-flow>div,tr{break-inside:avoid}.docs-body pre{white-space:pre-wrap;color:#18252e;background:#f1f3f5}.docs-body pre code{white-space:pre-wrap;overflow-wrap:anywhere}.docs-table-wrap{overflow:visible}.docs-table{min-width:0}.docs-body a{color:inherit}body{background:white}@page{margin:16mm}}