/* Jumra copy of Simple UI languages/technical.css. The only change: the Google Fonts @import
   is removed, because fonts are self-hosted (patterns P7); brand.css declares IBM Plex Sans and Mono. Keep in step with the design system. */
/* Simple UI design language: Technical: compact and dense, mono accents for numbers and labels, outlined panels,
   a slate sidebar. Suits developer tools, monitoring and data-heavy back offices.
   Load after ui.css and brand.css, and set <html data-language="technical">. Brand colours come from brand.css.
   Rule kept from Simple UI: the brand colour never marks data or an outcome about a person. */
html[data-language="technical"]{--font:"IBM Plex Sans",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--r:4px;--r-lg:4px;--bg:#f4f5f7;--line:#dfe2e7;--line-2:#c9ced6;--sunk:#eef0f3;--shadow:none;--topbar:48px}
html[data-language="technical"] body{font-size:13px}
html[data-language="technical"] h1{font-size:20px;font-weight:600;letter-spacing:0}
html[data-language="technical"] .page{padding:20px 24px;gap:16px}
html[data-language="technical"] .sidebar{background:#1e2430;border-right:0}
html[data-language="technical"] .sidebar .brand{background:#1e2430;color:#fff;border-bottom:1px solid #2e3646}
html[data-language="technical"] .sidebar .brand small{color:#8b95a7}
html[data-language="technical"] .nav-label{font-family:var(--mono);color:#8b95a7}
html[data-language="technical"] .nav a{height:32px;color:#c9d1dd;font-size:13px}
html[data-language="technical"] .nav a:hover{background:#2a3242;color:#fff}
html[data-language="technical"] .nav a.on{background:#2a3242;color:#fff}
html[data-language="technical"] .nav a.on::before{background:var(--brand)}
html[data-language="technical"] .nav .count{font-family:var(--mono);background:#2e3646;color:#c9d1dd}
html[data-language="technical"] .sidebar-foot{border-top-color:#2e3646;color:#c9d1dd}
html[data-language="technical"] .topbar{background:#fff;border-bottom:1px solid var(--line);padding:0 24px}
html[data-language="technical"] .page-head .eyebrow,html[data-language="technical"] .tile .label,html[data-language="technical"] .table th{font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;font-size:11px}
html[data-language="technical"] .card{box-shadow:none;padding:14px 16px;gap:12px}
html[data-language="technical"] .card-head h2{font-size:14px;font-weight:600}
html[data-language="technical"] .tile{padding:10px 14px}
html[data-language="technical"] .tile .value{font-family:var(--mono);font-size:22px;font-weight:500}
html[data-language="technical"] .table{font-size:12.5px}
html[data-language="technical"] .table td{padding:6px 12px;font-variant-numeric:tabular-nums}
html[data-language="technical"] .table th{padding:6px 12px;background:var(--sunk)}
html[data-language="technical"] .table .num{font-family:var(--mono)}
html[data-language="technical"] .btn{height:30px;font-size:12.5px;padding:0 12px}
html[data-language="technical"] .badge{border-radius:3px;font-family:var(--mono);font-size:11px}
html[data-language="technical"] .chip{border-radius:3px;font-size:12px}