/* ========================================================= Work — BAS / EMS field guide Shares chrome + tokens with /contacts/ so themes flow straight from the dashboard theme picker. ========================================================= */ :root { /* Fallbacks — shared/theme.js overrides on at load. */ --bg: #0d1117; --surface: #161b22; --surface-2: #0d1117; --surface-3: #21262d; --elevated: #1c2128; --text: #e6edf3; --text-strong: #ffffff; --muted: #8b949e; --subtle: #6e7681; --accent: #58A6FF; --accent-hover: #79b8ff; --accent-soft: rgba(88,166,255,0.18); --accent-softer: rgba(88,166,255,0.08); --accent-fg: #0d1117; --accent-2: #3FB950; --code-bg: rgba(110,118,129,0.18); --danger: #f85149; --warn: #d29922; --warn-bg: rgba(210,153,34,0.15); --ok: #3fb950; --ok-bg: rgba(63,185,80,0.15); --info: var(--accent); --info-bg: var(--accent-soft); --border: #30363d; --border-strong: #484f58; --radius: 10px; --radius-sm: 6px; --header-h: 56px; --footer-h: 32px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.35); --shadow-md: 0 8px 24px rgba(0,0,0,0.45); --content-max: 1240px; color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, system-ui, sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.55; height: 100%; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--accent-soft); color: var(--text-strong); } /* ========================================================= App shell — mirrors /contacts/ ========================================================= */ .app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } /* Top command bar */ .cmd-bar { height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; padding: 0 18px 0 220px; /* leaves room for x-nav pill on left */ flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--text-strong); letter-spacing: -0.01em; } .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent-hover))); color: var(--accent-fg); display: grid; place-items: center; font-weight: 800; font-size: 14px; } .brand-sub { font-size: 11px; color: var(--subtle); font-weight: 500; margin-left: 2px; } .divider-v { width: 1px; height: 22px; background: var(--border); margin: 0 4px; } .cmd-bar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .role-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 11px; color: var(--muted); font-weight: 600; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 0.12s; line-height: 1; background: transparent; color: var(--muted); font-family: inherit; } .btn:hover { background: var(--surface-3); color: var(--text-strong); } .btn-danger { color: var(--danger); } .btn-danger:hover { background: rgba(248,81,73,0.12); color: var(--danger); } /* ========================================================= Main split — sidebar + scrollable content ========================================================= */ .main-split { flex: 1; display: flex; overflow: hidden; } .dir-rail { width: 224px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; overflow-y: auto; } .dir-rail h6 { margin: 0 0 10px 4px; font-size: 10px; font-weight: 700; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.12em; } .dir-rail .seg { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; } .dir-rail .seg button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 12px; background: transparent; border: 0; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: all 0.12s; text-align: left; font-family: inherit; } .dir-rail .seg button:hover { background: var(--surface-3); color: var(--text-strong); } .dir-rail .seg button.active { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text-strong); font-weight: 700; } .dir-rail .seg button .seg-tag { font-size: 10px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, monospace; opacity: 0.65; } .dir-rail .rail-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--subtle); } /* Content area */ .dir-main { flex: 1; overflow-y: auto; padding: 0 22px 32px; background: var(--bg); } .dir-toolbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 0 12px; margin-bottom: 18px; background: var(--bg); border-bottom: 1px solid var(--border); -webkit-backdrop-filter: saturate(140%) blur(6px); backdrop-filter: saturate(140%) blur(6px); } .dir-toolbar h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); display: flex; align-items: baseline; gap: 10px; letter-spacing: -0.01em; } .dir-toolbar h2 .crumb { font-size: 11px; color: var(--subtle); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; } /* ========================================================= Tab panes — Bootstrap still toggles them; we just restyle ========================================================= */ .tab-content { max-width: var(--content-max); margin: 0 auto; } .tab-pane { display: none; } .tab-pane.show.active { display: block; } .tab-pane h2, .tab-pane > h2:first-child { color: var(--text-strong); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin: 0 0 1.1rem 0; } .tab-pane h3 { color: var(--text-strong); font-size: 1.15rem; font-weight: 600; margin: 1.75rem 0 0.6rem; } .tab-pane h4 { color: var(--text-strong); font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; } .tab-pane p { margin: 0.6rem 0; color: var(--text); } .tab-pane ul, .tab-pane ol { padding-left: 1.3rem; } .tab-pane li { margin: 0.25rem 0; color: var(--text); } .tab-pane strong { color: var(--text-strong); } .tab-pane a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .tab-pane a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; } .tab-pane a:visited { color: var(--accent-hover); } /* Eyebrow / tag row at top of Overview */ .section-intro { margin: 0 0 1.5rem; } .eyebrow { margin: 0 0 0.35rem; font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; } .section-intro h1 { margin: 0; font-size: 1.65rem; font-weight: 700; color: var(--text-strong); letter-spacing: -0.015em; } .section-intro .subtitle { margin: 0.4rem 0 0; color: var(--text); font-size: 0.95rem; max-width: 80ch; } .header-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; } .header-tag { display: inline-block; background: var(--accent-soft); color: var(--accent-hover); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.7rem; font-size: 0.75rem; font-weight: 600; } /* ========================================================= Callouts ========================================================= */ .callout { border-left: 3px solid var(--info); background: var(--info-bg); color: var(--text); padding: 0.8rem 1rem; margin: 1.1rem 0; border-radius: 0 var(--radius) var(--radius) 0; } .callout strong { color: var(--text-strong); } .callout.warn { border-left-color: var(--warn); background: var(--warn-bg); } .callout.ok { border-left-color: var(--ok); background: var(--ok-bg); } /* ========================================================= Tables ========================================================= */ table { width: 100%; border-collapse: collapse; margin: 1.1rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); font-size: 0.92rem; color: var(--text); } th, td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } th { background: var(--surface-2); color: var(--text-strong); font-weight: 600; border-bottom: 1px solid var(--border-strong); } tbody tr:nth-child(even) { background: rgba(255,255,255,0.015); } tbody tr:hover { background: var(--accent-softer); } tr:last-child td { border-bottom: none; } .table-shell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .table-scroll { overflow-x: auto; } /* ========================================================= Code ========================================================= */ pre, code, kbd, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.88rem; } code { background: var(--code-bg); color: var(--accent-hover); padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid var(--border); } pre { background: var(--surface-2); color: var(--text); padding: 0.95rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); overflow-x: auto; line-height: 1.5; box-shadow: var(--shadow-sm); } pre code { background: transparent; border: 0; padding: 0; color: inherit; } kbd { background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0.05rem 0.4rem; font-size: 0.82rem; color: var(--text-strong); } /* ========================================================= Diagrams ========================================================= */ img.diagram { display: block; max-width: 100%; height: auto; margin: 1.25rem auto; background: #ffffff; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; box-shadow: var(--shadow-md); } figure { margin: 1.25rem 0; text-align: center; } figcaption { color: var(--text); font-size: 0.85rem; margin-top: 0.35rem; } /* ========================================================= Cards / grids ========================================================= */ .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 1rem 0; } .card { background: var(--surface); border: 1px solid var(--border); padding: 14px 16px; border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; color: var(--text); } .card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } .card h4 { margin: 0 0 0.4rem; color: var(--accent-hover); } .card p, .card li, .card span { color: var(--text); } .action-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; } .action-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.85rem; background: var(--accent-soft); color: var(--accent-hover) !important; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-decoration: none !important; transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .action-link:hover { background: var(--accent); color: var(--accent-fg) !important; border-color: var(--accent); transform: translateY(-1px); } /* ========================================================= Link lists ========================================================= */ .link-list { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 0.8rem 1.1rem 0.8rem 2.2rem; margin: 0.75rem 0 1.1rem; } .link-list li { margin: 0.3rem 0; } /* ========================================================= Key takeaways panel ========================================================= */ .takeaways { background: var(--accent-softer); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1.25rem; } .takeaways h3 { margin-top: 0; color: var(--accent-hover); border: none; } /* ========================================================= Technical Library ========================================================= */ .library-shell { margin-top: 0.5rem; } .library-toolbar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; } .library-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .library-search { width: 100%; padding: 0.65rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 0.95rem; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .library-search::placeholder { color: var(--subtle); } .library-search:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); } .library-filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .library-filter { appearance: none; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 999px; padding: 0.35rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; } .library-filter:hover { background: var(--surface-3); color: var(--text-strong); } .library-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); } .library-meta { margin: 0; color: var(--text); font-size: 0.85rem; } .library-table { margin: 0; border: none; box-shadow: none; width: 100%; table-layout: fixed; } .library-table th, .library-table td { word-break: break-word; overflow-wrap: anywhere; } .library-table thead th { white-space: normal; } .library-table th:nth-child(1), .library-table td:nth-child(1) { width: 10%; } .library-table th:nth-child(2), .library-table td:nth-child(2) { width: 13%; } .library-table th:nth-child(3), .library-table td:nth-child(3) { width: 12%; } .library-table th:nth-child(4), .library-table td:nth-child(4) { width: 13%; } .library-table th:nth-child(5), .library-table td:nth-child(5) { width: 30%; } .library-table th:nth-child(6), .library-table td:nth-child(6) { width: 10%; } .library-table th:nth-child(7), .library-table td:nth-child(7) { width: 12%; } .library-view-link { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; } .library-access-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; } .library-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1.2; border: 1px solid var(--border); white-space: nowrap; background: var(--surface-2); color: var(--text); } .library-badge-vendor { background: var(--accent-soft); color: var(--accent-hover); } .library-badge-hosted { background: var(--ok-bg); color: var(--ok); } .library-badge-portal { background: var(--warn-bg); color: var(--warn); } .library-badge-source { background: rgba(139,92,246,0.18); color: #c4b5fd; } .library-sort { display: inline-flex; align-items: center; gap: 0.35rem; width: 100%; padding: 0; background: transparent; border: 0; color: inherit; font: inherit; font-weight: 700; cursor: pointer; } .library-sort:hover { color: var(--accent-hover); } .library-sort-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; color: var(--muted); font-size: 0.78rem; } .library-sort-icon::before { content: '↕'; } .library-sort.is-active { color: var(--accent-hover); } .library-sort.is-active[data-direction='asc'] .library-sort-icon::before { content: '↑'; color: var(--accent); } .library-sort.is-active[data-direction='desc'] .library-sort-icon::before { content: '↓'; color: var(--accent); } .library-view-link.external::after { content: "↗"; margin-left: 0.3rem; font-size: 0.85em; } .library-empty { text-align: center; color: var(--muted); } /* ========================================================= Misc ========================================================= */ .badge-proto { display: inline-block; background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent-hover); padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; margin: 0.15rem 0.2rem 0.15rem 0; white-space: nowrap; } hr { border: none; border-top: 1px solid var(--border); margin: 1.75rem 0; } footer.site-footer { text-align: center; padding: 1.25rem 1rem; color: var(--muted); border-top: 1px solid var(--border); background: var(--surface); font-size: 0.82rem; flex-shrink: 0; } /* ========================================================= Focus rings ========================================================= */ a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1024px) { .dir-main { padding: 0 16px 24px; } .library-table { font-size: 0.86rem; } .library-table th, .library-table td { padding: 0.5rem 0.55rem; } } @media (max-width: 768px) { html, body { font-size: 14px; } .cmd-bar { padding: 0 14px 0 14px; height: 52px; gap: 8px; } .cmd-bar .brand-sub { display: none; } .main-split { flex-direction: column; } .dir-rail { width: 100%; height: auto; max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--border); padding: 10px 12px; } .dir-rail .seg { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } .dir-rail .seg button { width: auto; padding: 6px 10px; font-size: 12px; } .dir-rail .rail-footer { display: none; } .dir-main { padding: 0 14px 24px; } .section-intro h1 { font-size: 1.3rem; } .tab-pane h2 { font-size: 1.25rem; } .tab-pane h3 { font-size: 1.05rem; } table { font-size: 0.84rem; } th, td { padding: 0.45rem 0.55rem; } pre { font-size: 0.78rem; padding: 0.7rem 0.8rem; } .action-link { width: 100%; } .table-scroll { overflow-x: visible; } .library-table { table-layout: auto; } .library-table thead { display: none; } .library-table, .library-table tbody, .library-table tr, .library-table td { display: block; width: 100%; } .library-table tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.7rem; padding: 0.5rem 0.75rem; } .library-table tbody tr:nth-child(even) { background: var(--surface); } .library-table td { border: none; padding: 0.32rem 0; font-size: 0.9rem; } .library-table td::before { content: attr(data-label); display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.15rem; } } /* ========================================================= Print ========================================================= */ @media print { .cmd-bar, .dir-rail, .x-nav, footer.site-footer { display: none; } .app { height: auto; overflow: visible; } .main-split, .dir-main { display: block; overflow: visible; } .tab-pane { display: block !important; opacity: 1 !important; } .tab-content { max-width: none; padding: 0; } a { color: #000; text-decoration: underline; } pre, table, img.diagram { box-shadow: none; page-break-inside: avoid; } body { background: #fff; color: #000; } }