/* ============================================================================ ORPPIO back office (bo-*) Agency staff surface: dense, table-first, desktop-first. Scoped to body.bo-app (the agency layout) so the portal and public pages are untouched. This file is the COMPONENT layer. It holds no colour, no size and no radius of its own: every value comes from kernol.css, and the block below is the only place the two layers meet. The --bo-* names are the contract the templates and BackofficeHelper are written against — two hundred views spend them — so they stay, mapped onto the brand rather than restating it. Re-tinting the back office is an edit to kernol.css. Reshaping a component is an edit here. Nothing is an edit to a template. ============================================================================ */ :root { /* ═══ The bridge: --bo-* roles onto Kernol tokens ═════════════════════════ Read this as the back office's own vocabulary. Left of the colon is what a component asks for; right of it is what the brand answers. */ /* ─── Neutral ramp ───────────────────────────────────────────────────── Still called "navy" because that is what the templates and the sibling stylesheets ask for, and because it is true: the workspace greys are the brand navy's own hue, desaturated as they lighten. */ --bo-navy-25: var(--kernol-grey-25); --bo-navy-50: var(--kernol-grey-50); --bo-navy-100: var(--kernol-grey-100); --bo-navy-200: var(--kernol-grey-300); --bo-navy-300: var(--kernol-grey-400); --bo-navy-400: var(--kernol-grey-600); --bo-navy-500: var(--kernol-grey-700); --bo-navy-600: var(--kernol-grey-800); --bo-navy-700: var(--kernol-navy-700); --bo-navy-850: var(--kernol-navy-900); --bo-navy-870: var(--kernol-chrome-850); --bo-navy-900: var(--kernol-chrome-900); --bo-navy-925: var(--kernol-chrome-950); --bo-navy-950: var(--kernol-navy-950); /* The public quotation page is written against a `slate` ramp that this file never declared, so every colour on it resolved to nothing. Aliased here so the one page a client reads before they have bought anything draws from the same palette as everything else. */ --bo-slate-50: var(--kernol-grey-50); --bo-slate-100: var(--kernol-grey-100); --bo-slate-200: var(--kernol-grey-300); --bo-slate-400: var(--kernol-grey-500); --bo-slate-500: var(--kernol-grey-600); --bo-slate-600: var(--kernol-grey-700); --bo-slate-700: var(--kernol-grey-800); --bo-slate-900: var(--kernol-navy-900); /* ─── Accents. One family per meaning, and only one. ─────────────────── `green` is the brand pine green and `violet` is the muted plan indigo: the names are the templates', the colours are the brand's. Keeping the old names is what lets a hundred call sites of `bo_badge(:pos)` change colour without being touched — and there is no second green to disagree with the pine. */ --bo-blue-50: var(--kernol-blue-50); --bo-blue-100: var(--kernol-blue-100); --bo-blue-200: var(--kernol-blue-200); --bo-blue-300: var(--kernol-blue-400); --bo-blue-500: var(--kernol-blue-500); --bo-blue-600: var(--kernol-blue-600); --bo-blue-700: var(--kernol-blue-700); --bo-blue-800: var(--kernol-blue-800); --bo-green-50: var(--kernol-teal-50); --bo-green-100: var(--kernol-teal-100); --bo-green-200: var(--kernol-teal-200); --bo-green-600: var(--kernol-teal-600); --bo-green-700: var(--kernol-teal-700); --bo-amber-50: var(--kernol-tan-50); --bo-amber-100: var(--kernol-tan-100); --bo-amber-200: var(--kernol-tan-200); --bo-amber-500: var(--kernol-tan-500); --bo-amber-600: var(--kernol-tan-600); --bo-amber-700: var(--kernol-tan-700); --bo-violet-50: var(--kernol-periwinkle-50); --bo-violet-100: var(--kernol-periwinkle-100); --bo-violet-200: var(--kernol-periwinkle-200); --bo-violet-600: var(--kernol-periwinkle-500); --bo-violet-700: var(--kernol-periwinkle-700); --bo-red-50: var(--kernol-red-50); --bo-red-100: var(--kernol-red-100); --bo-red-200: var(--kernol-red-200); --bo-red-600: var(--kernol-red-600); --bo-red-700: var(--kernol-red-700); /* ─── The work canvas ────────────────────────────────────────────────── The page is no longer white. Orppio's workspace is a warm near-white ground with white cards floating on it — that separation is what lets a table, a queue and a metric strip sit next to each other and still read as three things. --bo-bg stays white because it is what a *component* is made of. */ --bo-primary: var(--kernol-primary); --bo-primary-700: var(--kernol-primary-hover); --bo-bg: var(--kernol-surface); --bo-bg-shell: var(--kernol-background); --bo-bg-sunken: var(--kernol-surface-secondary); --bo-bg-rail: var(--kernol-surface-rail); --bo-card: var(--kernol-surface); --bo-ink: var(--kernol-text-primary); --bo-ink-soft: var(--kernol-text-body); --bo-muted: var(--kernol-text-secondary); --bo-faint: var(--kernol-text-muted); --bo-border: var(--kernol-border); --bo-border-soft: var(--kernol-border-subtle); --bo-border-hover: var(--kernol-border-strong); /* ─── Dark chrome ────────────────────────────────────────────────────── The accent inverts: on the light canvas the interactive colour is blue, and in here it is the pine green. That is the point of it. Blue on the sidebar would be a second "you can act on this" competing with the buttons on the page, whereas the pine fill says only "you are here", which nothing else in the product says. */ --bo-chrome: var(--kernol-chrome); --bo-chrome-hover: var(--kernol-chrome-hover); --bo-chrome-line: var(--kernol-chrome-line); --bo-chrome-raised: var(--kernol-chrome-raised); --bo-chrome-quiet: var(--kernol-chrome-850); --bo-chrome-well: var(--kernol-chrome-950); --bo-chrome-floor: var(--kernol-chrome-950); --bo-chrome-edge: var(--kernol-chrome-edge); --bo-chrome-ink: var(--kernol-chrome-ink); --bo-chrome-soft: var(--kernol-chrome-soft); --bo-chrome-muted: var(--kernol-chrome-muted); --bo-chrome-faint: var(--kernol-chrome-faint); --bo-chrome-accent: var(--kernol-nav-active-icon); --bo-chrome-pill-bg: var(--kernol-chrome-pill-bg); --bo-chrome-pill-ink: var(--kernol-chrome-pill-ink); --bo-chrome-pill-alert-bg: var(--kernol-chrome-pill-alert-bg); --bo-chrome-pill-alert-ink:var(--kernol-chrome-pill-alert-ink); --bo-chrome-pill-info-bg: var(--kernol-chrome-pill-info-bg); --bo-chrome-pill-info-ink: var(--kernol-chrome-pill-info-ink); /* ─── Shared component surfaces ──────────────────────────────────────── Every table, queue, card and list draws its hover, its selection and its column-header band from these four and from nothing else. The header band is now barely a band: Orppio's tables carry their columns on weight and a hairline rather than on a filled strip. */ --bo-hover: var(--kernol-hover); --bo-hover-strong: var(--kernol-hover-strong); --bo-selected: var(--kernol-selected); --bo-th-bg: var(--kernol-grey-50); --bo-th-ink: var(--kernol-text-secondary); --bo-th-line: var(--kernol-border); --bo-cell-x: 14px; --bo-cell-edge: var(--bo-page-x); /* ─── Shape ──────────────────────────────────────────────────────────── Controls at 8, panels at 12, the largest surfaces at 14, a badge at 6. Nothing in the product is rounder than 14 except an avatar. */ --bo-r-xs: var(--kernol-radius-xs); --bo-r-sm: var(--kernol-radius); /* buttons, inputs, chips, nav */ --bo-r: var(--kernol-radius-md); /* menus, callouts, empty states */ --bo-r-lg: var(--kernol-radius-lg); /* cards, the table card */ --bo-r-badge: var(--kernol-radius-sm); --bo-r-full: var(--kernol-radius-full); --bo-shadow-card: var(--kernol-shadow-xs); --bo-shadow-sm: var(--kernol-shadow-sm); --bo-shadow-pop: var(--kernol-shadow-pop); --bo-shadow-modal: var(--kernol-shadow-modal); /* ─── Metrics ──────────────────────────────────────────────────────────── */ --bo-sidebar-w: var(--kernol-sidebar-w); --bo-topbar-h: var(--kernol-topbar-h); --bo-row-h: var(--kernol-row-h); --bo-row-h-tight: 38px; --bo-page-x: var(--kernol-page-x); --bo-gap: var(--kernol-space-4); /* ─── Type ─────────────────────────────────────────────────────────────── */ --bo-font: var(--kernol-font); --bo-font-mono: var(--kernol-font-mono); --bo-t-10: var(--kernol-text-10); --bo-t-11: var(--kernol-text-11); --bo-t-12: var(--kernol-text-12); --bo-t-13: var(--kernol-text-13); --bo-t-14: var(--kernol-text-14); --bo-t-16: var(--kernol-text-16); --bo-t-18: var(--kernol-text-18); --bo-t-22: var(--kernol-text-22); --bo-t-24: var(--kernol-text-26); --bo-track-eyebrow: var(--kernol-tracking-eyebrow); } /* ─── Scoped element defaults ────────────────────────────────────────────── */ body.bo-app { font-family: var(--bo-font); color: var(--bo-ink); background: var(--bo-bg-shell); font-size: var(--bo-t-13); line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; } /* The link reset is wrapped in :where() so it carries no specificity at all. A backoffice link takes its colour from whatever it is part of — a table cell, a nav item, a breadcrumb — and a reset that outranks those component classes silently wins every one of those arguments. It did: with the sidebar light, `color: inherit` resolving to --bo-ink happened to look like the nav's own colour, so nothing showed. On the navy chrome the same rule painted every nav label navy-on-navy. Zero specificity is the fix: any class beats the reset. */ :where(.bo-app a) { color: inherit; text-decoration: none; } .bo-app a.bo-link, .bo-app .bo-link-sm { color: var(--bo-primary); } .bo-app a.bo-link:hover, .bo-app .bo-link-sm:hover { color: var(--bo-primary-700); } /* ─── Type helpers ───────────────────────────────────────────────────────── */ /* The page title is the only type in the product above 18px. It is set at the size Kernol's own screens use — big enough to name the page from across a desk, and the reason the topbar underneath it carries no title of its own. */ .bo-h1 { font-size: var(--bo-t-24); font-weight: 680; letter-spacing: var(--kernol-tracking-tight); line-height: 1.2; color: var(--bo-ink); } .bo-h2 { font-size: var(--bo-t-16); font-weight: 650; letter-spacing: -0.012em; color: var(--bo-ink); } .bo-h3 { font-size: var(--bo-t-14); font-weight: 600; color: var(--bo-ink); } /* A section title inside a page, one step under .bo-h1 — used where a page has several named regions rather than one subject. */ .bo-h1--sub { font-size: var(--bo-t-18); font-weight: 660; } .bo-body { font-size: var(--bo-t-13); color: var(--bo-ink-soft); } .bo-sm { font-size: var(--bo-t-12); color: var(--bo-ink-soft); } .bo-xs { font-size: var(--bo-t-12); color: var(--bo-muted); } .bo-faint-t { color: var(--bo-faint); } .bo-eyebrow { font-size: var(--bo-t-11); font-weight: 650; text-transform: uppercase; letter-spacing: var(--bo-track-eyebrow); color: var(--bo-muted); } .bo-num { font-variant-numeric: tabular-nums; } .bo-strong { font-weight: 600; color: var(--bo-ink); } /* Icon sizing — bo_icon stamps .bo-ic on every svg */ .bo-ic { width: 16px; height: 16px; flex: none; } .bo-ic-sm { width: 14px; height: 14px; } .bo-ic-lg { width: 18px; height: 18px; } .bo-ic-xl { width: 22px; height: 22px; } /* ========================================================================== 1. APP SHELL ========================================================================== */ .bo-shell { display: grid; grid-template-columns: var(--bo-sidebar-w) 1fr; min-height: 100vh; background: var(--bo-bg-shell); } .bo-main { min-width: 0; display: flex; flex-direction: column; } /* Pages that scroll a region of themselves instead of the document — the Messagerie, where a scrolling page would carry the composer off screen. The page sets `content_for :body_class`, and every link from down to the scroller is given a definite height here. The chain has to be unbroken: one link left at `auto` height, and its content pushes the document past the viewport again. That is what each declaration is for — `minmax(0, 1fr)` because an implicit grid row is `auto` and grows past a fixed-height grid, `min-height: 0` because a flex item refuses to shrink below its content without it. Nothing is clipped with `overflow: hidden`: when the chain holds, nothing overflows in the first place, and hiding it would only have made a real overflow invisible instead of absent. */ body.bo-app--fixed { height: 100dvh; } .bo-app--fixed .bo-shell { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr); } /* The sidebar's own 100vh is taller than 100dvh where the two differ. */ .bo-app--fixed .bo-sidebar { height: 100%; } .bo-app--fixed .bo-main { min-height: 0; } .bo-app--fixed .bo-topbar { flex: none; } .bo-app--fixed .bo-page { min-height: 0; } /* ── The chrome: a navy sidebar, a light topbar ──────────────────────────── The sidebar is where you go somewhere; the topbar tells you where you are and belongs to the page under it, so it stays on the canvas. Only the sidebar is navy, and everything inside it draws from --bo-chrome-*; no component in here reaches for a light-canvas token, because a token tuned for ink-on-white inverts badly. */ .bo-sidebar { background: var(--bo-chrome); border-right: 1px solid var(--bo-chrome-edge); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* A long nav scrolls; its scrollbar should belong to the chrome rather than arrive as a pale strip out of the operating system's own palette. */ .bo-sidebar { scrollbar-width: thin; scrollbar-color: var(--bo-chrome-raised) transparent; } .bo-sidebar::-webkit-scrollbar { width: 10px; } .bo-sidebar::-webkit-scrollbar-track { background: transparent; } .bo-sidebar::-webkit-scrollbar-thumb { background: var(--bo-chrome-line); border-radius: var(--bo-r-full); border: 3px solid transparent; background-clip: padding-box; } /* ── Brand and workspace ─────────────────────────────────────────────────── The product names itself once, at the top of the sidebar, with the light lockup — the wordmark is an image cut from the brand sheet rather than type, so it is never re-set and never stretched (height is fixed, width follows). Under it the *agency* names itself, in a control shaped like the switcher it will become when an account can hold more than one workspace. Which is the right hierarchy for a multi-tenant tool: whose software this is, then whose data you are looking at. */ /* The Orppio lockup: the extracted mark (public/branding/orppio-icon.png, a transparent PNG cut from the brand sheet) beside the name set in type. The mark carries a warm-grey counter, so it needs the dark rail under it — which is exactly where it lives. Type rather than a cut wordmark, because the name has to sit on one baseline with the rest of the rail's vocabulary and stay crisp at any zoom. */ .bo-brand { display: flex; align-items: center; padding: 18px var(--kernol-space-4) 10px; } .bo-brand > a { display: inline-flex; align-items: center; gap: 10px; min-width: 0; } .bo-brand-mark { height: 30px; width: auto; display: block; flex: none; } .bo-brand-word { font-size: 19px; font-weight: 700; letter-spacing: -0.022em; color: var(--bo-chrome-ink); line-height: 1; } .bo-workspace { margin: var(--kernol-space-3) var(--kernol-space-3) var(--kernol-space-2); display: flex; align-items: center; gap: var(--kernol-space-2); width: calc(100% - var(--kernol-space-6)); padding: 9px 11px; border: 1px solid var(--bo-chrome-line); border-radius: var(--bo-r-sm); background: transparent; color: var(--bo-chrome-ink); font-family: var(--bo-font); font-size: var(--bo-t-13); font-weight: 600; text-align: left; line-height: 1.25; } .bo-workspace-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bo-workspace .bo-ic { color: var(--bo-chrome-muted); } a.bo-workspace:hover, button.bo-workspace:hover { background: var(--bo-chrome-hover); border-color: var(--bo-chrome-raised); } .bo-nav { flex: 1; padding: 4px 12px 16px; display: flex; flex-direction: column; gap: 1px; } .bo-nav-group { margin-top: var(--kernol-space-5); } .bo-nav-group:first-child { margin-top: var(--kernol-space-2); } /* The group parked at the floor of the rail (Settings): pushed down by the free space above it and kept off the person's card by a hairline. */ .bo-nav-group--pinned { margin-top: auto; padding-top: var(--kernol-space-3); border-top: 1px solid var(--bo-chrome-line); } .bo-nav-group-label { font-size: var(--bo-t-11); font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bo-chrome-faint); padding: 0 10px 6px; } .bo-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--kernol-radius-md); font-size: var(--bo-t-13); font-weight: 500; color: var(--bo-chrome-soft); cursor: pointer; line-height: 1.3; border: 1px solid transparent; } .bo-nav-item:hover { background: var(--bo-chrome-hover); color: var(--bo-chrome-ink); } .bo-nav-item .bo-ic { color: var(--bo-chrome-muted); } .bo-nav-item:hover .bo-ic { color: var(--bo-chrome-ink); } /* The product's signature. Everywhere else in Kernol the warm accent is rationed; here it is spent in full, because "where am I" is the one question the sidebar exists to answer and nothing else on the navy competes for it. A peach fill, a rust label that clears 4.5:1 on that fill, a brighter tan icon beside it, and a ring — four signals, so the item is still obviously current in greyscale or through any colour vision. */ .bo-nav-item.is-active { background: var(--kernol-nav-active-bg); border-color: var(--kernol-nav-active-ring); color: var(--kernol-nav-active-ink); font-weight: 640; box-shadow: 0 0 0 2px rgb(46 125 90 / 0.22); } .bo-nav-item.is-active:hover { background: var(--kernol-teal-700); color: var(--kernol-nav-active-ink); } .bo-nav-item.is-active .bo-ic, .bo-nav-item.is-active:hover .bo-ic { color: var(--kernol-nav-active-icon); } .bo-nav-item.is-active .bo-nav-count { background: var(--kernol-teal-800); color: var(--kernol-teal-100); } .bo-nav-count { margin-left: auto; font-size: var(--bo-t-10); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--bo-chrome-pill-ink); background: var(--bo-chrome-pill-bg); border-radius: var(--bo-r-full); padding: 1px 6px; line-height: 1.5; } .bo-nav-count--alert { background: var(--bo-chrome-pill-alert-bg); color: var(--bo-chrome-pill-alert-ink); } .bo-nav-count--info { background: var(--bo-chrome-pill-info-bg); color: var(--bo-chrome-pill-info-ink); } .bo-sidebar-foot { background: var(--bo-chrome-floor); border-top: 1px solid var(--bo-chrome-line); padding: 12px; display: flex; align-items: center; gap: 10px; } .bo-sidebar-foot .bo-name { font-size: var(--bo-t-12); font-weight: 600; color: var(--bo-chrome-ink); line-height: 1.25; } .bo-sidebar-foot .bo-role { font-size: var(--bo-t-11); color: var(--bo-chrome-muted); } .bo-sidebar-foot .bo-avatar { background: var(--bo-chrome-pill-info-bg); color: var(--bo-chrome-pill-info-ink); } .bo-sidebar-foot .bo-iconbtn { color: var(--bo-chrome-muted); } .bo-sidebar-foot .bo-iconbtn:hover { background: var(--bo-chrome-well); color: var(--bo-chrome-ink); } /* The topbar is the page's own header: light, and separated from the canvas by the same hairline every other region uses. */ /* The topbar sits ON the canvas rather than on a white bar of its own: in Kernol the page title is the largest thing on the screen and owns the top of it, so a second horizontal rule above it would only cut the header in two. What is left up here is where-you-are on the left and the three things that belong to the account rather than to the page on the right. */ .bo-topbar { height: var(--bo-topbar-h); background: var(--bo-bg-shell); display: flex; align-items: center; gap: var(--kernol-space-3); padding: 0 var(--bo-page-x); position: sticky; top: 0; z-index: 40; } .bo-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--bo-t-12); font-weight: 500; color: var(--bo-muted); min-width: 0; } .bo-crumbs a:hover { color: var(--bo-ink); } .bo-crumbs .bo-ic-sm { color: var(--bo-faint); } .bo-crumb-here { color: var(--bo-ink); font-weight: 600; } .bo-topbar-spacer { flex: 1; } /* The palette trigger is dressed as the search field it stands in for — a real white control on the canvas, wide enough to read as the way you find things, with the shortcut parked at its right edge. It is still a button: what opens is the ⌘K palette, and there is no input here to type into by accident. */ .bo-searchbtn { display: flex; align-items: center; gap: var(--kernol-space-2); width: 300px; height: 38px; padding: 0 12px; border: 1px solid var(--bo-border); border-radius: var(--bo-r-sm); background: var(--kernol-surface); color: var(--bo-faint); font-size: var(--bo-t-13); cursor: pointer; font-family: var(--bo-font); box-shadow: var(--bo-shadow-card); } .bo-searchbtn:hover { border-color: var(--bo-border-hover); color: var(--bo-muted); } .bo-searchbtn:focus-visible { outline: none; border-color: var(--kernol-blue-400); box-shadow: var(--kernol-focus-ring); } .bo-kbd { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--bo-t-10); font-weight: 600; color: var(--bo-muted); border: 1px solid var(--bo-border); border-radius: var(--bo-r-xs); background: var(--kernol-surface-secondary); padding: 2px 5px; font-family: var(--bo-font); } /* The master-access pill: only a platform operator inside a tenant ever sees it. Warm rather than alarming — it is a reminder of where you are, not an error. */ .bo-masterpill { display: inline-flex; align-items: center; gap: var(--kernol-space-2); height: 30px; padding: 0 10px; border-radius: 999px; background: var(--kernol-warning-soft); color: var(--kernol-warning-ink); font-size: var(--bo-t-12); font-weight: 600; text-decoration: none; white-space: nowrap; } .bo-masterpill:hover { text-decoration: underline; } .bo-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--bo-r-sm); border: none; background: transparent; color: var(--bo-muted); cursor: pointer; position: relative; } .bo-iconbtn:hover { background: var(--bo-hover-strong); color: var(--bo-ink); } /* The topbar's own controls: create, notifications, account. Circular, on the canvas, bordered rather than filled — they belong to the account and must not read as the page's primary action, which is the one navy button below them. */ .bo-topbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--bo-r-full); border: 1px solid var(--bo-border); background: var(--kernol-surface); color: var(--bo-muted); cursor: pointer; position: relative; flex: none; box-shadow: var(--bo-shadow-card); font-family: var(--bo-font); } .bo-topbar-btn:hover { border-color: var(--bo-border-hover); color: var(--bo-ink); } .bo-topbar-btn--accent { color: var(--kernol-accent); } .bo-topbar-btn:focus-visible { outline: none; border-color: var(--kernol-blue-400); box-shadow: var(--kernol-focus-ring); } /* The create menu.
gives it open/close and the keyboard for free; the summary is dressed as the topbar's own round button and its marker removed. */ .bo-createmenu { position: relative; } .bo-createmenu > summary { list-style: none; } .bo-createmenu > summary::-webkit-details-marker { display: none; } .bo-createmenu > summary::marker { content: ""; } .bo-createmenu[open] > summary { border-color: var(--bo-border-hover); color: var(--bo-ink); } .bo-createmenu > .bo-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 232px; } .bo-topbar-avatar { flex: none; display: inline-flex; cursor: pointer; border-radius: var(--bo-r-full); } .bo-topbar-avatar .bo-avatar { width: 38px; height: 38px; font-size: var(--bo-t-13); border: 1px solid var(--bo-border); } .bo-topbar-avatar:hover .bo-avatar { border-color: var(--bo-border-hover); } /* The account menu: the same
as the create menu, whose summary is the avatar. Its head names who is signed in; the two items are the profile and the way out. The sign-out is a button_to, so its form has to lay out like a link. */ .bo-accountmenu > summary { list-style: none; } .bo-accountmenu > summary::-webkit-details-marker { display: none; } .bo-accountmenu > summary::marker { content: ""; } .bo-accountmenu[open] > .bo-topbar-avatar .bo-avatar { border-color: var(--bo-border-hover); } .bo-accountmenu > .bo-menu { min-width: 240px; } .bo-menu-head { padding: 8px 10px 6px; } .bo-menu-head-name { font-size: var(--bo-t-13); font-weight: 620; color: var(--bo-ink); } .bo-menu-head-meta { margin-top: 2px; font-size: var(--bo-t-12); color: var(--bo-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bo-menu-form { display: contents; } .bo-menu-form .bo-menu-item { width: 100%; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; } /* ========================================================================== 2. PAGE STRUCTURE ========================================================================== */ .bo-page { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Every page opens the same way: what this page is, one line saying what it is for, and its actions on the right. The title carries the page, so the head needs no rule under it and no card around it — it sits directly on the canvas and the first real surface below is the tabs or the table. */ .bo-pagehead { display: flex; align-items: flex-start; gap: var(--kernol-space-4); padding: var(--kernol-space-1) var(--bo-page-x) 0; } .bo-pagehead-titles { min-width: 0; padding-top: 1px; } .bo-pagehead-sub { font-size: var(--bo-t-13); color: var(--bo-muted); margin-top: 3px; } .bo-pagehead-actions { margin-left: auto; display: flex; align-items: center; gap: var(--kernol-space-2); flex: none; padding-top: 2px; } .bo-content { padding: var(--kernol-space-5) var(--bo-page-x) var(--kernol-space-10); display: flex; flex-direction: column; gap: var(--kernol-space-4); } /* A page's sub-navigation: the segmented control that sits between the page head and the page body. It spends the page gutter itself, so the tabs line up with the title above them and the card below them instead of hugging the sidebar. Whatever follows already brings its own top inset, so it sets none. */ .bo-subnav { padding: var(--kernol-space-4) var(--bo-page-x) 0; } .bo-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; flex: 1; border-top: 1px solid var(--bo-border); margin-top: 12px; } .bo-detail-main { min-width: 0; padding: var(--kernol-space-5) var(--bo-page-x) var(--kernol-space-10); display: flex; flex-direction: column; gap: var(--kernol-space-4); } /* The side rail scrolls with the page rather than in its own box: no sticky, no max-height, no inner scrollbar. Content taller than the viewport is reached by scrolling the page itself. */ .bo-detail-side { border-left: 1px solid var(--bo-border); background: var(--bo-bg-rail); padding: var(--kernol-space-5) var(--kernol-space-4); display: flex; flex-direction: column; gap: var(--kernol-space-4); } @media (min-width: 1600px) { .bo-detail { grid-template-columns: minmax(0, 1fr) 360px; } } /* The sticky action bar on a long form: the save is always reachable, and the shadow points up so the bar reads as sitting over the page it will submit. */ .bo-actionbar { position: sticky; bottom: 0; z-index: 30; background: var(--kernol-surface); border-top: 1px solid var(--bo-border); padding: var(--kernol-space-3) var(--bo-page-x); display: flex; align-items: center; gap: var(--kernol-space-2); box-shadow: 0 -6px 16px -8px rgb(12 31 23 / 0.14); } .bo-actionbar-spacer { flex: 1; } /* ========================================================================== 3. BUTTONS ========================================================================== */ /* Four weights and a size. The rule that matters is one primary per screen: the navy fill is the thing this page is for, and everything else — export, filter, cancel, a row's own actions — is the white secondary or a ghost. A screen showing six navy buttons has told the reader nothing. */ .bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--bo-r-sm); font-family: var(--bo-font); font-size: var(--bo-t-13); font-weight: 570; line-height: 1; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s; } .bo-btn:active { transform: translateY(1px); } .bo-btn:focus-visible { outline: none; box-shadow: var(--kernol-focus-ring); } .bo-btn--primary { background: var(--bo-primary); color: var(--kernol-text-on-dark); } .bo-btn--primary:hover { background: var(--bo-primary-700); color: var(--kernol-text-on-dark); } .bo-btn--secondary { background: var(--kernol-surface); color: var(--bo-ink-soft); border-color: var(--bo-border); box-shadow: var(--bo-shadow-card); } .bo-btn--secondary:hover { border-color: var(--bo-border-hover); color: var(--bo-ink); } .bo-btn--ghost { background: transparent; color: var(--bo-muted); } .bo-btn--ghost:hover { background: var(--bo-hover-strong); color: var(--bo-ink); } .bo-btn--danger { background: var(--bo-red-600); color: var(--kernol-text-on-dark); } .bo-btn--danger:hover { background: var(--bo-red-700); color: var(--kernol-text-on-dark); } .bo-btn--danger-soft { background: var(--kernol-surface); color: var(--bo-red-700); border-color: var(--bo-border); } .bo-btn--danger-soft:hover { background: var(--bo-red-50); border-color: var(--bo-red-200); color: var(--bo-red-700); } .bo-btn--sm { height: 28px; padding: 0 10px; font-size: var(--bo-t-12); } .bo-btn--lg { height: 40px; padding: 0 18px; font-size: var(--bo-t-14); } .bo-btn .bo-ic { width: 15px; height: 15px; } .bo-btn[disabled], .bo-btn.is-disabled { opacity: 0.45; pointer-events: none; } .bo-splitbtn { display: inline-flex; } .bo-splitbtn .bo-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .bo-splitbtn .bo-btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; padding: 0 6px; } /* ========================================================================== 4. STATUS SYSTEM — dot+text default; tinted badge for lifecycle emphasis ========================================================================== */ .bo-st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bo-t-12); font-weight: 500; color: var(--bo-ink-soft); white-space: nowrap; } .bo-st::before { content: ''; } /* The status dot, drawn once. .bo-st puts it before a word; .bo-dot is the same dot with no word, for a legend or a feed row. Each tone is declared in exactly one place so the two can never disagree about what "warn" looks like. */ .bo-st::before, .bo-dot { width: 7px; height: 7px; border-radius: var(--bo-r-full); background: var(--bo-navy-300); flex: none; display: inline-block; } .bo-st--neutral::before, .bo-dot--neutral { background: var(--bo-navy-300); } .bo-st--info::before, .bo-dot--info { background: var(--bo-blue-500); } .bo-st--pos::before, .bo-dot--pos { background: var(--bo-green-600); } .bo-st--warn::before, .bo-dot--warn { background: var(--bo-amber-500); } .bo-st--neg::before, .bo-dot--neg { background: var(--bo-red-600); } .bo-st--review::before, .bo-dot--review { background: var(--bo-violet-600); } .bo-st--neg { color: var(--bo-red-700); font-weight: 600; } /* A rounded rectangle, not a capsule. Kernol's statuses are read in columns of twenty and a screen of capsules reads as a bag of sweets; the softer corner keeps a status looking like a piece of data. Pastel ground, strong ink — and the word itself always present, so no status is carried by colour alone. */ .bo-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--bo-r-badge); font-size: var(--bo-t-12); font-weight: 600; white-space: nowrap; letter-spacing: -0.005em; } .bo-badge--neutral { background: var(--bo-navy-100); color: var(--bo-navy-600); } .bo-badge--info { background: var(--bo-blue-50); color: var(--bo-blue-700); } .bo-badge--pos { background: var(--bo-green-50); color: var(--bo-green-700); } .bo-badge--warn { background: var(--bo-amber-50); color: var(--bo-amber-700); } .bo-badge--neg { background: var(--bo-red-50); color: var(--bo-red-700); } .bo-badge--review { background: var(--bo-violet-50); color: var(--bo-violet-700); } .bo-badge .bo-ic { width: 12px; height: 12px; } .bo-row-flag { box-shadow: inset 3px 0 0 transparent; } .bo-row-flag--neg { box-shadow: inset 3px 0 0 var(--bo-red-600); } .bo-row-flag--warn { box-shadow: inset 3px 0 0 var(--bo-amber-500); } .bo-row-flag--review { box-shadow: inset 3px 0 0 var(--bo-violet-600); } /* ========================================================================== 5. VIEW TABS, TOOLBAR, FILTER CHIPS ========================================================================== */ /* The status rail above a table. The current view is a white tab lifted off the canvas onto the surface below it — the same move the table itself makes — and pinned with a navy underline; the rest stay flat on the canvas. Each carries its own count, so the shape of the work is legible before anything is clicked, and a zero is shown rather than hidden. */ .bo-viewtabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--bo-border); padding: 0 var(--bo-page-x); overflow-x: auto; scrollbar-width: none; } .bo-viewtabs::-webkit-scrollbar { display: none; } .bo-viewtab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; font-size: var(--bo-t-13); font-weight: 520; color: var(--bo-muted); border: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: var(--bo-r-sm) var(--bo-r-sm) 0 0; margin-bottom: -1px; cursor: pointer; white-space: nowrap; } .bo-viewtab:hover { color: var(--bo-ink); background: var(--bo-hover); } /* A tab that names a section rather than filtering a list carries its icon. The glyph follows the label's own weight — quiet until the tab is the page. */ .bo-viewtab .bo-ic { color: var(--bo-faint); } .bo-viewtab:hover .bo-ic { color: var(--bo-muted); } .bo-viewtab.is-active .bo-ic { color: var(--kernol-navy-900); } .bo-viewtab.is-active { background: var(--kernol-surface); border-color: var(--bo-border-soft); border-bottom-color: var(--kernol-navy-900); color: var(--bo-ink); font-weight: 650; } .bo-viewtab.is-active:hover { background: var(--kernol-surface); } .bo-tabcount { font-size: var(--bo-t-11); font-weight: 650; font-variant-numeric: tabular-nums; color: var(--bo-muted); background: var(--kernol-surface-secondary); border-radius: var(--bo-r-badge); padding: 1px 6px; min-width: 20px; text-align: center; } .bo-viewtab.is-active .bo-tabcount { background: var(--kernol-grey-100); color: var(--bo-ink); } .bo-tabcount--alert { background: var(--bo-red-50); color: var(--bo-red-700); } .bo-viewtab.is-active .bo-tabcount--alert { background: var(--bo-red-50); color: var(--bo-red-700); } .bo-toolbar { display: flex; align-items: center; gap: var(--kernol-space-2); padding: var(--kernol-space-3) var(--bo-page-x); flex-wrap: wrap; } /* A filter bar directly under the page head, with no view tabs to separate the two. Four index pages carried this as the same inline style. */ .bo-toolbar--ruled { border-top: 1px solid var(--bo-border); margin-top: var(--kernol-space-3); } .bo-toolbar-spacer { flex: 1; } /* The filter bar as its own white surface, sitting above the table card rather than floating on the canvas — Kernol treats "how this list is narrowed" as part of the list, not as page chrome. Inset to the page gutter, and it drops the gutter again inside a container that already spends it. */ .bo-toolbar--filters { margin: var(--kernol-space-4) var(--bo-page-x) 0; padding: var(--kernol-space-3) var(--kernol-space-3); background: var(--kernol-surface); border: 1px solid var(--bo-border); border-radius: var(--bo-r-lg); box-shadow: var(--bo-shadow-card); } .bo-content .bo-toolbar--filters, .bo-detail-main .bo-toolbar--filters, .bo-card .bo-toolbar--filters { margin-inline: 0; } .bo-content > .bo-toolbar--filters, .bo-detail-main > .bo-toolbar--filters { margin-top: 0; } /* A filter bar and the table it narrows are one object: no canvas between. */ .bo-toolbar--filters + .bo-tablewrap { margin-top: var(--kernol-space-2); } .bo-search { display: flex; align-items: center; gap: var(--kernol-space-2); height: 38px; padding: 0 12px; border: 1px solid var(--bo-border); border-radius: var(--bo-r-sm); background: var(--kernol-surface); width: 260px; color: var(--bo-faint); } .bo-search input { border: none; outline: none; background: transparent; font-family: var(--bo-font); font-size: var(--bo-t-13); color: var(--bo-ink); width: 100%; } .bo-search input::placeholder { color: var(--bo-faint); } .bo-search:focus-within { border-color: var(--kernol-blue-400); box-shadow: var(--kernol-focus-ring); } /* A filter bar: one search that takes the slack, and selects sized to their own content, all on the same line. .bo-select is width:100% by design — it is a form-field control first — so inside the wrapping toolbar each select claims a whole row and the bar reads as four stacked inputs instead of one strip. The flex-basis on the search is what makes it the element that grows; the selects keep their natural width and only the search gives ground when the window narrows, down to min-width, after which the bar wraps as it did before. */ .bo-toolbar--filters .bo-search { flex: 1 1 300px; width: auto; min-width: 200px; } /* A select in a filter bar is a filter *button*, not a form field: it keeps its own width, stands on the same white as the bar, and is bordered rather than filled so the bar reads as a row of equal choices. */ /* A