/* ROI Chief Library "Drawing Set" kit for roihub (cut from library-primitives.md, roichief-pages main e824e9d).
Loaded by base.html BEFORE style.css. The --rc-* TOKENS live in style.css (first root block = light, the
data-theme="dark" block = dark, no-JS media mirror), so this file is recipes only.
roihub theme scheme: light = the bare root / :not([data-theme="dark"]); dark = [data-theme="dark"] (theme.js always stamps it).
The graphite chrome (.rc-chrome) re-declares its own dark tokens in BOTH themes.
Icons: inline sprite (_icons.html): .
Order: type roles, fonts, 3.0 base ... 3.11 keyframes + reduced-motion kill switch (keep last). */
/* type roles (DESIGN.md `typography`). Mono uppercase for labels, stamps, column headers; mono sentence case for counts, ages, ids, times.
Poppins and Urbanist have no tabular figures: numbers that must align use mono. Inputs are 14px desktop, 16px on phones/coarse pointers. */
.rc-t-display-lg { font: 600 36px/1.08 var(--rc-font-display); letter-spacing: -.02em; }
.rc-t-display-md { font: 600 28px/1.15 var(--rc-font-display); letter-spacing: -.015em; }
.rc-t-title-lg { font: 600 20px/1.25 var(--rc-font-display); letter-spacing: -.01em; }
.rc-t-title-md { font: 600 16px/1.3 var(--rc-font-display); letter-spacing: -.005em; }
.rc-t-body-md { font: 400 14px/1.5 var(--rc-font-sans); }
.rc-t-body-sm { font: 400 13px/1.45 var(--rc-font-sans); }
.rc-t-label { font: 500 13px/1 var(--rc-font-sans); }
.rc-t-button { font: 700 13px/1 var(--rc-font-display); letter-spacing: .09em; text-transform: uppercase; }
.rc-t-mono-label { font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.rc-t-mono-data { font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .02em; }
/* DERIVED (signin.module .title/.lead): the landing/sign-in title is the only place the H1 goes to 44px */
.rc-t-display-xl { font: 600 44px/1.06 var(--rc-font-display); letter-spacing: -.02em; }
@media (max-width: 767px) { .rc-t-display-xl { font-size: 34px; } }
.rc-lead--lg { font: 400 16px/1.6 var(--rc-font-sans); max-width: 46ch; }
/* ============ rc.css · 2. FONTS ============ */
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("/static/fonts/urbanist-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
src: url("/static/fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
src: url("/static/fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
src: url("/static/fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
src: url("/static/fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
src: url("/static/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }
/* ============ rc.css · 3.0 BASE ============ */
html,
body {
background: var(--rc-bg);
color: var(--rc-text);
font-family: var(--rc-font-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { font-size: 14px; line-height: 1.5; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--rc-selection); }
input::placeholder,
textarea::placeholder { color: var(--rc-text-mute); opacity: 1; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--rc-focus);
outline-offset: 2px;
}
:where(h1, h2, h3, h4) { text-wrap: balance; }
.rc-body { background: var(--rc-bg); color: var(--rc-text); font: 400 14px/1.5 var(--rc-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* derived: base layer scoped to a class for the transition */
/* DERIVED reset (kit defect fix): the Library gets these from Tailwind preflight (`@import "tailwindcss"`), which the kit does not copy.
Without it a vanilla page shows the 8px body margin, UA heading/paragraph margins, bullet lists and inline images. Zero specificity: any rc- rule wins. */
*, ::before, ::after { box-sizing: border-box; } /* the base layer's `*` misses pseudo-elements (.rc-check tick, .rc-btn ::before border) */
body { margin: 0; }
:where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote, pre, hr) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(ul, ol, menu) { margin: 0; padding: 0; list-style: none; }
:where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit; }
:where(img, svg, video, canvas, iframe) { display: block; vertical-align: middle; }
:where(img, video) { max-width: 100%; height: auto; }
:where(code, kbd, samp, pre) { font-family: var(--rc-font-mono); font-size: 1em; }
/* ============ rc.css · 3.1 CHROME (verbatim 221, 223-251; line 235 and 243 adapted for the inline SVG mark) ============ */
.rc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rc-chrome {
--rc-bg: #0B0D10; --rc-raised: #161A22; --rc-card: #232935; --rc-card-soft: #2B3240; --rc-band: #2D3444; --rc-field: #0F131A; --rc-hover: #222834;
--rc-line: #3A4253; --rc-line-strong: #4D576A; --rc-line-bright: #808BA0; --rc-control: #8C97AB;
--rc-text: #F2F4F8; --rc-text-soft: #CAD0DA; --rc-text-mute: #B6BDC9; --rc-text-faint: #A0A8B6; --rc-on-accent: #0B0D10;
--rc-accent: #AFA4FB; --rc-accent-ui: #AFA4FB; --rc-focus: #AFA4FB;
--rc-accent-wash: rgba(175, 164, 251, .14); --rc-accent-line: rgba(175, 164, 251, .45);
--rc-purple-hv: #6457D6; --rc-purple-press: #4A3FB0;
--rc-green: #46B17B; --rc-green-ink: #8FD9B1; --rc-warn: #DD8A3B; --rc-warn-ink: #F2AE6B; --rc-warn-wash: rgba(221, 138, 59, .10); --rc-warn-line: rgba(221, 138, 59, .6);
--rc-red: #E5645A; --rc-red-ink: #F2A39C; --rc-red-wash: rgba(229, 100, 90, .08); --rc-red-line: rgba(229, 100, 90, .6);
--rc-green-wash: rgba(70, 177, 123, .10); --rc-green-line: rgba(70, 177, 123, .5);
--rc-yellow: #E8C25A; --rc-yellow-ink: #E8C25A; --rc-highlight: rgba(232, 194, 90, .36); --rc-selection: rgba(181, 164, 232, .32);
--rc-dept-1: #58A6FF; --rc-dept-2: #CC6FE0; --rc-dept-3: #2EC4D6; --rc-dept-4: #F27AC4; --rc-dept-5: #8CCB50;
--rc-mark-end: #EBE2F7;
--rc-shadow-md: 0 8px 18px -10px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .18);
color-scheme: dark;
background: var(--rc-chrome-bg);
color: var(--rc-text);
}
.rc-lockup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--rc-text); }
.rc-mark { display: inline-block; flex: none; width: 28px; height: 24px; }
.rc-mark > svg { display: block; width: 100%; height: 100%; }
/* the ramp's last stop follows --rc-mark-end (CSS beats the stop-color attribute): dark theme and the chrome keep #EBE2F7, light surfaces get #8E7CF0 */
.rc-mark linearGradient > stop:last-child { stop-color: var(--rc-mark-end, #EBE2F7); }
/* the traced ROI CHIEF wordmark (BRAND_WORDMARK_*). Its box height is the cap height: .72em, so at the
16px size (14px on phones) it fills exactly the footprint the live-text wordmark had and the chrome rows
keep their fit. The words stay in the DOM in an .rc-sr span. */
.rc-wordmark { display: inline-flex; align-items: center; flex: none; font-size: 16px; line-height: 1; color: var(--rc-wordmark); white-space: nowrap; }
.rc-wordmark > svg { display: block; width: auto; height: .72em; fill: currentColor; }
@media (max-width: 767px) { .rc-wordmark { font-size: 14px; } }
.rc-lockup__div { flex: none; width: 1px; height: 18px; background: var(--rc-line-strong); }
.rc-lockup__app { font: 500 14px/1 var(--rc-font-sans); color: var(--rc-text-soft); white-space: nowrap; }
/* DERIVED from library.module .chrome/.nav/.end/.user + SubpageHeader.module: roihub's sticky top bar on the graphite chrome.
Markup: lockup, */
.rc-topbar { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 10px 12px;
min-height: var(--rc-chrome-h); padding: 10px 16px; border-bottom: 1px solid var(--rc-chrome-line); } /* one row = exactly 56px incl. the border */
.rc-topbar__nav { display: flex; align-items: center; flex: none; }
.rc-topbar__end { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rc-topbar__div { width: 1px; height: 22px; margin: 0 6px 0 2px; background: var(--rc-chrome-line); }
.rc-topbar__user { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/1 var(--rc-font-sans); color: var(--rc-text-soft); }
@media (max-width: 767px) { /* phone: the mark alone, nav on its own row (SubpageHeader.module) */
.rc-topbar .rc-wordmark, .rc-topbar .rc-lockup__div, .rc-topbar .rc-lockup__app { display: none; }
.rc-topbar__nav { order: 3; flex: 1 0 100%; overflow-x: auto; scrollbar-width: none; }
.rc-topbar__nav .rc-navlink:focus-visible { outline-offset: -2px; } /* the nav is as tall as its links and scrolls: an outside ring is clipped */
.rc-topbar__user { display: none; }
}
a.rc-lockup:focus-visible { outline-offset: 4px; }
/* keyboard skip link (library.module .skip) */
.rc-skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rc-skip:focus, .rc-skip:focus-visible { top: 10px; left: 10px; z-index: 80; width: auto; height: 36px; margin: 0; padding: 0 14px; clip: auto; overflow: visible;
display: inline-flex; align-items: center; background: var(--rc-raised); color: var(--rc-text); border: 1px solid var(--rc-accent-ui); font: 500 13px/1 var(--rc-font-sans); }
/* page values captured OUTSIDE the chrome (custom properties inherit their computed value), so a light-theme menu hanging off the graphite bar can borrow the page hairline + shadow */
body { --rc-page-line: var(--rc-line-strong); --rc-page-shadow: var(--rc-shadow-md); }
/* ============ rc.css · 3.2 BUTTONS (verbatim 253-312) ============ */
/* primary: the one cut-corner object per view */
.rc-btn { --c: 8px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 0; background: none; color: var(--rc-on-fill); cursor: pointer; white-space: nowrap; text-decoration: none; font: 700 13px/1 var(--rc-font-display); letter-spacing: .09em; text-transform: uppercase; }
.rc-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rc-purple); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); transition: background-color var(--rc-dur-fast) var(--rc-ease), transform var(--rc-dur-instant) var(--rc-ease); }
.rc-btn:hover::before { background: var(--rc-purple-hv); }
.rc-btn:active::before { background: var(--rc-purple-press); transform: translateY(1px) scale(.985); }
.rc-btn::after { content: ""; position: absolute; inset: -5px; pointer-events: none; opacity: 0; transition: opacity var(--rc-dur-fast) var(--rc-ease);
background: linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 0 0 / 5px 5px no-repeat, linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 100% 0 / 5px 5px no-repeat,
linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 0 100% / 5px 5px no-repeat, linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 100% 100% / 5px 5px no-repeat; }
.rc-btn:focus-visible::after { opacity: 1; }
/* hover-only state devices (grips, underline draws) sit behind (hover: hover): on touch a tap leaves a sticky
:hover behind, which would keep grips or an underline on a control nobody is pointing at */
@media (hover: hover) { .rc-btn:hover::after { opacity: 1; } }
.rc-btn:focus-visible { outline: 2px solid var(--rc-focus); outline-offset: 7px; }
.rc-btn svg { width: 16px; height: 16px; flex: none; transition: transform .3s var(--rc-ease-out); }
.rc-btn:hover .rc-btn__arr { transform: translateX(3px); }
.rc-btn--lg { --c: 10px; height: 40px; padding: 0 20px; }
.rc-btn--block { width: 100%; }
/* flattened while an overlay owns the cut corner (New while the spec sheet is open) */
.rc-btn--flat { color: var(--rc-accent); }
.rc-btn--flat::before { background: transparent; clip-path: none; box-shadow: inset 0 0 0 1px var(--rc-accent-line); }
.rc-btn--flat:hover::before { background: var(--rc-accent-wash); }
/* confirm of an irreversible action: square red fill */
.rc-btn--danger::before { background: var(--rc-red-fill); clip-path: none; }
.rc-btn--danger:hover::before { background: var(--rc-red-fill-hv); }
.rc-btn:disabled, .rc-btn[aria-disabled="true"] { cursor: not-allowed; color: var(--rc-text-faint); }
.rc-btn:disabled::before, .rc-btn[aria-disabled="true"]::before { background: transparent; clip-path: none; border: 1px dashed var(--rc-line-bright); transform: none; }
.rc-btn:disabled::after, .rc-btn[aria-disabled="true"]::after { display: none; }
.rc-btn2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--rc-line-bright); border-radius: 0; background: transparent; color: var(--rc-text); font: 500 13px/1 var(--rc-font-sans); white-space: nowrap; cursor: pointer; text-decoration: none;
transition: border-color var(--rc-dur-fast) var(--rc-ease), background-color var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease); }
.rc-btn2 svg { width: 16px; height: 16px; flex: none; }
.rc-btn2:hover { border-color: var(--rc-accent-ui); background: var(--rc-accent-wash); }
/* Compact controls (.rc-btn2--sm, .rc-toggle, .rc-seg) share one recipe: 32px, line-strong at rest,
line-bright + hover fill on hover, accent only when pressed/on. Full-size .rc-btn2 keeps line-bright. */
.rc-btn2--sm { height: 32px; padding: 0 10px; border-color: var(--rc-line-strong); }
.rc-btn2--sm:hover { border-color: var(--rc-line-bright); background: var(--rc-hover); }
.rc-btn2[aria-pressed="true"], .rc-btn2.is-on { border-color: var(--rc-accent-ui); color: var(--rc-accent); background: var(--rc-accent-wash); }
.rc-btn2--accent { border-color: var(--rc-accent-line); color: var(--rc-accent); }
.rc-btn2--danger { border-color: var(--rc-red-line); color: var(--rc-red-ink); }
.rc-btn2--danger:hover { border-color: var(--rc-red); background: var(--rc-red-wash); }
.rc-btn2:disabled, .rc-btn2[aria-disabled="true"] { cursor: not-allowed; color: var(--rc-text-faint); border-style: dashed; border-color: var(--rc-line-strong); background: transparent; }
.rc-quiet { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; background: none; color: var(--rc-text-mute); font: 500 13px/1 var(--rc-font-sans); cursor: pointer; text-decoration: none; white-space: nowrap; transition: border-color var(--rc-dur-fast) var(--rc-ease), background-color var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease); }
.rc-quiet:hover { color: var(--rc-text); }
.rc-quiet svg { width: 16px; height: 16px; flex: none; }
.rc-navlink { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; color: var(--rc-text-soft); font: 500 14px/1 var(--rc-font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; background: none; border: 0; }
.rc-navlink::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 1px; background: var(--rc-accent-ui); transform: scaleX(0); transform-origin: left; transition: transform var(--rc-dur-base) var(--rc-ease-out); }
.rc-navlink:hover { color: var(--rc-text); }
.rc-navlink[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .rc-navlink:hover::after { transform: scaleX(1); } }
.rc-icon-btn { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 0; background: none; color: var(--rc-text-mute); cursor: pointer; transition: border-color var(--rc-dur-fast) var(--rc-ease), background-color var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease); }
.rc-icon-btn svg { width: 16px; height: 16px; }
.rc-icon-btn:hover { color: var(--rc-text); border-color: var(--rc-line-strong); }
.rc-icon-btn[aria-pressed="true"] { color: var(--rc-text); }
.rc-link { color: var(--rc-accent); text-decoration: underline; text-decoration-color: var(--rc-accent-line); text-underline-offset: 3px; }
.rc-link:hover { text-decoration-color: currentColor; }
@media (pointer: coarse) {
.rc-btn, .rc-btn2, .rc-quiet, .rc-navlink { min-height: 44px; }
.rc-toggle, .rc-seg > button, .rc-tab { min-height: 44px; }
.rc-icon-btn { width: 44px; height: 44px; }
}
/* DERIVED (DESIGN.md prose: "Clip-path eats outlines, so cut objects draw focus inside (inset 2px white + inset 2px ink) or keep the fill in ::before").
The Library has NO instance of the first form: .rc-btn is the only cut object and uses ::before. Use this ONLY if a cut element must carry its own fill. */
.rc-cut { --c: 10px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.rc-cut:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--rc-on-accent); }
/* ============ rc.css · 3.3 FIELDS (verbatim 314-330) ============ */
.rc-field { display: grid; gap: 6px; min-width: 0; }
.rc-label { font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.rc-hint { margin: 0; font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-mute); }
.rc-input, .rc-select, .rc-textarea { width: 100%; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--rc-control); border-radius: 0; background: var(--rc-field); color: var(--rc-text); font: 400 14px/1.3 var(--rc-font-sans); color-scheme: inherit; transition: border-color var(--rc-dur-fast) var(--rc-ease), box-shadow var(--rc-dur-fast) var(--rc-ease); }
.rc-textarea { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.rc-select { appearance: none; padding-right: 30px; font-size: 13px; font-weight: 500; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667086' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; }
:root[data-theme="dark"] .rc-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C97AB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.rc-input:hover, .rc-select:hover, .rc-textarea:hover { border-color: var(--rc-text-faint); }
.rc-input:focus-visible, .rc-select:focus-visible, .rc-textarea:focus-visible { outline: none; border-color: var(--rc-accent-ui); box-shadow: 0 0 0 1px var(--rc-accent-ui); }
.rc-input:disabled, .rc-select:disabled, .rc-textarea:disabled { cursor: not-allowed; border-style: dashed; color: var(--rc-text-faint); }
.rc-check { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid var(--rc-control); border-radius: 0; background: var(--rc-field); display: inline-grid; place-items: center; cursor: pointer; }
.rc-check:checked { border-color: var(--rc-accent-ui); background: var(--rc-accent-ui); }
.rc-check:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--rc-on-accent); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
@media (max-width: 767px), (pointer: coarse) {
.rc-input, .rc-select, .rc-textarea { font-size: 16px; min-height: 44px; }
}
/* DERIVED: the Library ships no invalid-state, radio or switch primitive (grep of src/ finds none). Suggested minimum, consistent with rules 4 and 9:
an invalid field is a red border PLUS a text message (never colour alone). For radios use .rc-seg / .rc-toggle groups; there is no switch (use .rc-toggle[aria-pressed]). */
.rc-input[aria-invalid="true"], .rc-select[aria-invalid="true"], .rc-textarea[aria-invalid="true"] { border-color: var(--rc-red); }
.rc-input[aria-invalid="true"]:focus-visible, .rc-select[aria-invalid="true"]:focus-visible, .rc-textarea[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--rc-red); }
.rc-hint[data-tone="bad"] { color: var(--rc-red-ink); }
/* ============ rc.css · 3.4 (verbatim 332-364, 366-371) ============ */
/* dimension line: label on a rule with 45deg ticks. Put section numerals INSIDE the heading (.rc-num). */
.rc-dim { display: flex; align-items: center; gap: 10px; margin: 0; font: 500 12px/1 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.rc-dim::before, .rc-dim::after { content: ""; flex: 1; min-width: 12px; height: 9px;
background: linear-gradient(var(--rc-line-bright), var(--rc-line-bright)) 0 50% / 100% 1px no-repeat,
linear-gradient(135deg, transparent calc(50% - .5px), var(--rc-line-bright) calc(50% - .5px), var(--rc-line-bright) calc(50% + .5px), transparent calc(50% + .5px)) 0 0 / 9px 9px no-repeat; }
.rc-dim::after { transform: scaleX(-1); }
.rc-dim--start::before { flex: 0 0 14px; }
.rc-num { margin-right: 10px; font: 500 12px/1 var(--rc-font-mono); letter-spacing: .06em; color: var(--rc-text-faint); }
.rc-stamp { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 22px; padding: 0 6px; border: 1px solid var(--rc-line-bright); font: 500 12px/1 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); white-space: nowrap; }
/* one lucide stroke for 14px glyphs: 2, the same as every other 14px icon (beats a strokeWidth prop) */
.rc-stamp svg { width: 14px; height: 14px; flex: none; stroke-width: 2; }
.rc-stamp--accent { border-color: var(--rc-accent-ui); color: var(--rc-accent); }
.rc-stamp--na { border-style: dashed; }
.rc-count { display: inline-grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--rc-line-strong); font: 500 12px/1 var(--rc-font-mono); color: var(--rc-text-soft); font-variant-numeric: tabular-nums; }
.rc-count--na { border-style: dashed; color: var(--rc-text-faint); }
.rc-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border: 1px solid var(--rc-line-strong); font: 400 13px/1 var(--rc-font-sans); color: var(--rc-text-soft); white-space: nowrap; }
.rc-tag__dim { font: 500 12px/1 var(--rc-font-mono); color: var(--rc-text-mute); }
.rc-mono { font-family: var(--rc-font-mono); font-variant-numeric: tabular-nums; }
/* : middot-joined segments. Each nowrap segment draws its dot in a 1.5ch ::before gutter; the row sits
1.5ch left inside a clipping frame, so the first segment on EVERY line hides its dot: a wrapped line never
starts with "·" and no dot is stranded at a line end. The dot has empty alt text (decoration only); the
first declaration is the fallback for engines without content alt text. --rc-meta-gap (default 1.5ch) widens
the gutter where the text is mono (mono letters fill their cells, so 1.5ch reads cramped there: use 2.5ch). */
.rc-meta { display: inline-flex; max-width: 100%; overflow: hidden; }
.rc-meta__in { display: flex; flex-wrap: wrap; min-width: 0; margin-left: calc(-1 * var(--rc-meta-gap, 1.5ch)); }
.rc-meta__part { white-space: nowrap; }
.rc-meta__part::before { content: "·"; content: "·" / ""; display: inline-block; width: var(--rc-meta-gap, 1.5ch); text-align: center; }
/* stack: one segment per line, no separator; a long segment may wrap since no dot can strand */
.rc-meta--stack .rc-meta__in { flex-direction: column; margin-left: 0; }
.rc-meta--stack .rc-meta__part { white-space: normal; overflow-wrap: anywhere; }
.rc-meta--stack .rc-meta__part::before { content: none; }
.rc-monogram { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--rc-line-bright); font: 600 12px/1 var(--rc-font-mono); letter-spacing: .02em; color: var(--rc-text-soft); text-transform: uppercase; }
.rc-dept { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--rc-dept-c, var(--rc-line-bright)); }
.rc-dept[data-dept="1"] { --rc-dept-c: var(--rc-dept-1); }
.rc-dept[data-dept="2"] { --rc-dept-c: var(--rc-dept-2); }
.rc-dept[data-dept="3"] { --rc-dept-c: var(--rc-dept-3); }
.rc-dept[data-dept="4"] { --rc-dept-c: var(--rc-dept-4); }
.rc-dept[data-dept="5"] { --rc-dept-c: var(--rc-dept-5); }
/* ============ rc.css · 3.5 STATUS (verbatim 373-391) ============ */
/* status: healthy = quiet dot + words; unhealthy/pending = the only rounded pill. Glyph shapes never depend on colour alone. */
.rc-glyph { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rc-green); }
.rc-glyph[data-state="stale"] { width: 9px; border-radius: 0; background: var(--rc-warn); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rc-glyph[data-state="error"] { width: 7px; height: 7px; border-radius: 0; background: var(--rc-red); transform: rotate(45deg); }
.rc-glyph[data-state="pending"] { width: 9px; height: 9px; background: transparent; border: 1.5px dashed var(--rc-text-mute); }
.rc-glyph[data-busy="true"] { animation: rc-blink 1s var(--rc-ease-io) 4; }
.rc-status { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; font: 400 13px/1.2 var(--rc-font-sans); color: var(--rc-text-soft); }
.rc-status[data-state="stale"], .rc-status[data-state="error"], .rc-status[data-state="pending"] { height: 22px; padding: 0 8px; border-radius: 999px; font: 500 12px/1 var(--rc-font-mono); letter-spacing: .02em; }
.rc-status[data-state="stale"] { color: var(--rc-warn-ink); background: var(--rc-warn-wash); box-shadow: inset 0 0 0 1px var(--rc-warn-line); }
.rc-status[data-state="error"] { color: var(--rc-red-ink); background: var(--rc-red-wash); box-shadow: inset 0 0 0 1px var(--rc-red-line); }
.rc-status[data-state="pending"] { color: var(--rc-text-mute); border: 1px dashed var(--rc-line-bright); }
.rc-age { font: 500 12px/1 var(--rc-font-mono); color: var(--rc-text-mute); white-space: nowrap; }
.rc-age[data-state="stale"] { color: var(--rc-warn-ink); }
.rc-age[data-state="error"] { color: var(--rc-red-ink); }
.rc-rollup { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--rc-font-mono); }
.rc-rollup [data-state="error"] { color: var(--rc-red-ink); }
.rc-rollup [data-state="stale"] { color: var(--rc-warn-ink); }
.rc-rollup > b { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
:root[data-theme="dark"] .rc-theme-moon, :root:not([data-theme="dark"]) .rc-theme-sun { display: none; } /* sun shows in dark (click for light), moon in light */
/* ============ rc.css · 3.6 (verbatim 393-409) ============ */
.rc-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--rc-line-strong); border-radius: 0; background: transparent; color: var(--rc-text-soft); font: 500 13px/1 var(--rc-font-sans); cursor: pointer; white-space: nowrap; transition: border-color var(--rc-dur-fast) var(--rc-ease), background-color var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease); }
.rc-toggle:hover { color: var(--rc-text); border-color: var(--rc-line-bright); background: var(--rc-hover); }
.rc-toggle[aria-pressed="true"] { color: var(--rc-accent); border-color: var(--rc-accent-ui); background: var(--rc-accent-wash); }
/* 32px overall: 30px buttons inside the 1px frame */
.rc-seg { display: inline-flex; flex: none; border: 1px solid var(--rc-line-strong); transition: border-color var(--rc-dur-fast) var(--rc-ease); }
.rc-seg:hover { border-color: var(--rc-line-bright); }
.rc-seg > button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-right: 1px solid var(--rc-line-strong); border-radius: 0; background: transparent; color: var(--rc-text-soft); font: 500 13px/1 var(--rc-font-sans); cursor: pointer; transition: border-color var(--rc-dur-fast) var(--rc-ease), background-color var(--rc-dur-fast) var(--rc-ease), color var(--rc-dur-fast) var(--rc-ease); }
.rc-seg > button:last-child { border-right: 0; }
.rc-seg > button:hover { color: var(--rc-text); background: var(--rc-hover); }
.rc-seg > button[aria-pressed="true"], .rc-seg > button[aria-selected="true"] { color: var(--rc-text); background: var(--rc-accent-wash); box-shadow: inset 0 -2px 0 var(--rc-accent-ui); }
.rc-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 0; background: none; color: var(--rc-text-soft); font: 500 14px/1 var(--rc-font-sans); cursor: pointer; white-space: nowrap; text-decoration: none; }
.rc-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--rc-accent-ui); transform: scaleX(0); transform-origin: left; transition: transform var(--rc-dur-base) var(--rc-ease-out); }
.rc-tab:hover { color: var(--rc-text); }
@media (hover: hover) { .rc-tab:hover::after { transform: scaleX(.35); } }
.rc-tab[aria-selected="true"], .rc-tab[aria-current="page"] { color: var(--rc-text); }
.rc-tab[aria-selected="true"]::after, .rc-tab[aria-current="page"]::after { transform: scaleX(1); }
.rc-tab:focus-visible { outline-offset: -2px; }
/* layer bar: the 44px strip of mode tabs under the chrome. roihub: the workspace sub bar (Home / Documentation / Project files / Connect AI / People / Access).
Markup: */
.rc-layerbar { flex: none; display: flex; align-items: stretch; gap: 4px; height: var(--rc-bar-h); padding: 0 var(--rc-gutter); border-bottom: 1px solid var(--rc-line); background: var(--rc-bg); }
.rc-tabs { position: relative; display: flex; align-items: stretch; min-width: 0; margin-left: -14px; }
.rc-layerbar--sticky { position: sticky; top: var(--rc-chrome-h); z-index: 29; } /* DERIVED: roihub keeps its sub bar sticky under the sticky .rc-topbar (z 30); the Library's phone layer bar is z 29 too */
@media (max-width: 767px) { .rc-layerbar--sticky { position: static; } } /* the phone top bar wraps to two rows, so the fixed offset would be wrong: the bar unsticks at 767px, the same breakpoint where style.css ends the one-row chrome (min-width: 768px) */
.rc-tab svg { width: 16px; height: 16px; flex: none; color: var(--rc-text-faint); transition: color var(--rc-dur-fast) var(--rc-ease); }
.rc-tab[aria-selected="true"] svg, .rc-tab[aria-current="page"] svg { color: var(--rc-accent); }
.rc-tab[aria-selected="true"] .rc-count, .rc-tab[aria-current="page"] .rc-count { border-color: var(--rc-accent-line); color: var(--rc-accent); }
@media (max-width: 767px) { /* DERIVED from the phone index strip: swipe, snap, fade the far edge; the underline moves inside because overflow clips bottom:-1px */
.rc-layerbar { padding: 0 16px; }
.rc-tabs { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.rc-tabs:focus-within { -webkit-mask-image: none; mask-image: none; }
.rc-tabs::-webkit-scrollbar { display: none; }
.rc-tab { scroll-snap-align: start; }
.rc-tab::after { bottom: 0; }
}
/* ============ rc.css · 3.7 (verbatim 411-442) ============ */
/* selection = accent frame + CAD grips; focus-within of a stretched link shows the same */
.rc-grips { position: relative; }
.rc-grips::after { content: ""; position: absolute; inset: -3px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity var(--rc-dur-fast) var(--rc-ease);
background: linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 0 0 / 5px 5px no-repeat, linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 100% 0 / 5px 5px no-repeat,
linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 0 100% / 5px 5px no-repeat, linear-gradient(var(--rc-accent-ui), var(--rc-accent-ui)) 100% 100% / 5px 5px no-repeat; }
.rc-grips.is-on::after, .rc-grips[aria-selected="true"]::after, .rc-grips:has(:focus-visible)::after { opacity: 1; }
/* the one yellow look-here (max one per scene): 12px L-brackets that close in */
.rc-brk { position: relative; }
.rc-brk::before { content: ""; position: absolute; inset: -6px; pointer-events: none; --b: var(--rc-yellow);
background: linear-gradient(var(--b), var(--b)) 0 0 / 12px 3px no-repeat, linear-gradient(var(--b), var(--b)) 0 0 / 3px 12px no-repeat,
linear-gradient(var(--b), var(--b)) 100% 0 / 12px 3px no-repeat, linear-gradient(var(--b), var(--b)) 100% 0 / 3px 12px no-repeat,
linear-gradient(var(--b), var(--b)) 0 100% / 12px 3px no-repeat, linear-gradient(var(--b), var(--b)) 0 100% / 3px 12px no-repeat,
linear-gradient(var(--b), var(--b)) 100% 100% / 12px 3px no-repeat, linear-gradient(var(--b), var(--b)) 100% 100% / 3px 12px no-repeat;
animation: rc-brk-in .6s var(--rc-ease-out) both; }
/* transient look-here after a move/restore lands: in, hold, out (2.4s). The persistent .rc-brk stays as is. */
.rc-brk--land::before { animation: rc-brk-land 2.4s var(--rc-ease-out) both; }
/* set --land-delay on the sheet before a smooth scroll so the bracket lands when the sheet arrives */
.rc-brk--land::before { animation-delay: var(--land-delay, 0ms); }
/* drafting sheet: sign-in, landing, error, empty states only (masked; never behind dense content) */
.rc-sheet { position: relative; isolation: isolate; background-color: var(--rc-bg); }
/* impeccable-disable-next-line codex-grid-background -- the drafting grid is the brand's blueprint device (DESIGN.md Layout), masked and used only behind sign-in, landing, error and empty states */
.rc-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: linear-gradient(90deg, var(--rc-grid-major) 1px, transparent 1px), linear-gradient(var(--rc-grid-major) 1px, transparent 1px),
linear-gradient(90deg, var(--rc-grid-minor) 1px, transparent 1px), linear-gradient(var(--rc-grid-minor) 1px, transparent 1px);
background-size: 80px 80px, 80px 80px, 20px 20px, 20px 20px; background-position: calc(50% + 40px) 0, 0 0, calc(50% + 10px) 0, 0 0;
-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 78%); }
.rc-rails { position: relative; --wrap: min(1280px, calc(100% - 2 * clamp(16px, 4vw, 64px))); }
.rc-rails::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: var(--wrap); transform: translateX(-50%); border-inline: 1px solid var(--rc-line); opacity: .75; pointer-events: none; z-index: 0; }
.rc-cross { position: absolute; width: 13px; height: 13px; pointer-events: none;
background: linear-gradient(var(--rc-line-bright), var(--rc-line-bright)) 6px 0 / 1px 13px no-repeat, linear-gradient(var(--rc-line-bright), var(--rc-line-bright)) 0 6px / 13px 1px no-repeat; }
@media (max-width: 719px) { .rc-rails::after, .rc-cross { display: none; } }
/* registration crosses on a framed card: place four on a position:relative panel (de-moduled signin.module/StatePage.module .tl/.tr/.bl/.br) */
.rc-cross { z-index: 2; }
.rc-cross--tl { left: -7px; top: -7px; }
.rc-cross--tr { right: -7px; top: -7px; }
.rc-cross--bl { left: -7px; bottom: -7px; }
.rc-cross--br { right: -7px; bottom: -7px; }
/* ============ rc.css · 3.8 (verbatim 444-478) ============ */
.rc-panel { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--rc-raised); border: 1px solid var(--rc-line-strong); }
.rc-panel__bar { flex: none; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--rc-line); background: var(--rc-band); }
.rc-panel__title { margin: 0; font: 600 16px/1.3 var(--rc-font-display); letter-spacing: -.005em; color: var(--rc-text); }
.rc-panel__body { flex: 1; min-height: 0; padding: 16px; }
.rc-panel__foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 40px; padding: 8px 16px; border-top: 1px solid var(--rc-line); font: 500 12px/1.2 var(--rc-font-mono); color: var(--rc-text-mute); }
.rc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--rc-line); border: 1px solid var(--rc-line); }
.rc-kpi { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 12px 14px; background: var(--rc-raised); }
.rc-kpi__k { font: 500 12px/1.2 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.rc-kpi__v { font: 600 28px/1.05 var(--rc-font-display); letter-spacing: -.02em; color: var(--rc-text); white-space: nowrap; }
.rc-table { width: 100%; border-collapse: collapse; border-spacing: 0; font: 400 13px/1.4 var(--rc-font-sans); border-top: 1px solid var(--rc-line); }
.rc-table thead th { padding: 10px 12px 8px; border-bottom: 1px solid var(--rc-line-strong); text-align: left; white-space: nowrap; font: 500 12px/1 var(--rc-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-text-mute); }
.rc-table td { padding: 10px 12px; border-bottom: 1px solid var(--rc-line); color: var(--rc-text-soft); vertical-align: middle; }
.rc-table td.num { font: 500 12px/1 var(--rc-font-mono); text-align: right; color: var(--rc-text); }
/* only clickable rows react to hover (house rule 8) */
.rc-table--clickable tbody tr:hover td { background: var(--rc-hover); }
.rc-table tr.is-now td { background: var(--rc-accent-wash); box-shadow: inset 0 1px var(--rc-accent-ui), inset 0 -1px var(--rc-accent-ui); }
.rc-notice { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--rc-line-strong); background: var(--rc-raised); color: var(--rc-text); font: 400 13px/1.45 var(--rc-font-sans); }
.rc-notice > svg { width: 16px; height: 16px; margin-top: 1px; color: var(--rc-text-mute); }
.rc-notice[data-tone="ok"] { border-color: var(--rc-green-line); background: var(--rc-green-wash); }
.rc-notice[data-tone="ok"] > svg { color: var(--rc-green); }
.rc-notice[data-tone="warn"] { border-color: var(--rc-warn-line); background: var(--rc-warn-wash); }
.rc-notice[data-tone="warn"] > svg { color: var(--rc-warn); }
.rc-notice[data-tone="bad"] { border-color: var(--rc-red-line); background: var(--rc-red-wash); }
.rc-notice[data-tone="bad"] > svg { color: var(--rc-red); }
/* info is the neutral base above (line-strong, raised, text-mute icon): violet is reserved (house rule 6) */
.rc-skel { display: block; color: transparent; background: linear-gradient(var(--rc-line), var(--rc-line)) 0 0 / 62% 8px no-repeat, linear-gradient(var(--rc-line), var(--rc-line)) 0 16px / 38% 8px no-repeat; min-height: 24px; }
.rc-scan { position: relative; overflow: hidden; }
/* one accent line crosses the box: speed follows the box, never a fixed width */
.rc-scan::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--rc-accent-ui); opacity: 0; pointer-events: none; animation: rc-scan 1.4s var(--rc-ease-io) .1s 4 both; }
/* success check that draws on (lucide check paths are under 24 units long) */
.rc-draw :is(path, polyline, line) { stroke-dasharray: 24; animation: rc-draw .22s var(--rc-ease-out) both; }
.rc-empty { display: grid; justify-items: start; gap: 12px; max-width: 560px; padding: 28px; border: 1px dashed var(--rc-line-bright); position: relative; }
.rc-empty::before { content: ""; position: absolute; left: -3px; top: -3px; width: 5px; height: 5px; background: var(--rc-bg); box-shadow: inset 0 0 0 1px var(--rc-line-bright); }
.rc-empty__t { margin: 0; font: 600 20px/1.25 var(--rc-font-display); color: var(--rc-text); }
.rc-empty__p { margin: 0; color: var(--rc-text-soft); font: 400 14px/1.5 var(--rc-font-sans); max-width: 60ch; }
/* de-moduled ClientApps.module: card grid + key/value list inside a panel */
.rc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.rc-dl { display: grid; margin: 0; border-top: 1px solid var(--rc-line); }
.rc-dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rc-line); }
.rc-dl > div:last-child { border-bottom: 0; }
.rc-dl dt { font: 400 13px/1.4 var(--rc-font-sans); color: var(--rc-text-mute); }
.rc-dl dd { margin: 0; text-align: right; font: 500 12px/1.5 var(--rc-font-mono); color: var(--rc-text); }
/* de-moduled library-detail.module .trust/.trustCell: hairline-split key/value cells (label = .rc-label, value 14px, sub = mono 12px) */
.rc-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(180px, calc(50% - 1px)), 1fr)); gap: 1px; margin: 0; background: var(--rc-line); border: 1px solid var(--rc-line); }
.rc-cell { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; padding: 11px 12px 12px; background: var(--rc-bg); }
.rc-cell__v, .rc-cell__s { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-cell__v { font: 500 14px/1.3 var(--rc-font-sans); color: var(--rc-text); }
.rc-cell__s { font: 500 12px/1.3 var(--rc-font-mono); color: var(--rc-text-mute); }
/* DERIVED (roihub addition; the Library never needs it): wide tables scroll inside their own box, never the page */
.rc-table-wrap { max-width: 100%; overflow-x: auto; }
/* ============ rc.css · A. ICON SPRITE CSS (Appendix A) ============ */
.rc-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rc-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-i--14 { width: 14px; height: 14px; }
/* The class is optional: any svg whose only child is a