/* Hermes Enterprise · Iris workspace demo. Tokens from iris-workspace-chrome/tokens.json + Paper exports. */ :root { color-scheme: dark; --font-body: Inter, system-ui, sans-serif; --font-display: "Barlow Condensed", system-ui, sans-serif; --app: #000030; --ink: #080416; --indigo: #1A135D; --body: #F2F2F2; --muted: #C6C3DA; --muted-2: #B8B8D0; --glass: #F6F4FF; --action: #0000F2; --action-hover: #1a1aff; --context: #151047; --line: rgba(223,223,255,.18); --line-strong: #30305C; --line-soft: rgba(223,223,255,.16); --menu: #17113F; --selected: #302888; --selected-line: rgba(218,216,255,.22); --chip-bg: rgba(21,12,54,.5); --conversation: radial-gradient(ellipse at 85% 3%, rgba(84,88,172,.56), transparent 62%), linear-gradient(160deg,#1A135D 0%,#110734 55%,#080416 100%); --panel: linear-gradient(115deg, rgba(92,103,191,.24), rgba(45,34,116,.38) 48%, rgba(17,10,52,.72)); --nav-w: 240px; --iris-w: 800px; --dur-menu: 140ms; --dur-reveal: 160ms; --dur-disclosure: 180ms; --dur-layout: 160ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--app); color: var(--body); font: 400 12.8px/19.2px var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: hidden; } #root { height: 100%; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; } button:disabled { cursor: not-allowed; } a { color: inherit; } h1, h2, h3, h4, p { margin: 0; } :focus-visible { outline: 2px solid #c6c6ff; outline-offset: 3px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .muted { color: var(--muted); } .meta { font-size: 11.2px; line-height: 16px; color: var(--muted); } .body-15 { font-size: 12px; line-height: 17.6px; } .display-32 { font: 500 25.6px/28.8px var(--font-display); } .display-28 { font: 500 22.4px/25.6px var(--font-display); } .display-26 { font: 500 20.8px/24px var(--font-display); } .grow { flex: 1 1 0; min-width: 0; } .row { display: flex; align-items: center; gap: 12px; } .col { display: flex; flex-direction: column; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- shell ---------- The grid columns are written by `Shell.tsx` now, because the middle one is a number a person can drag (decision C33). What is left here is the fallback for a first paint before React runs, and everything the columns do not say. */ .shell { position: relative; display: grid; grid-template-columns: var(--nav-w) var(--iris-w) minmax(0, 1fr); height: 100%; width: 100%; overflow: hidden; } .shell[data-iris="hidden"] { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .shell[data-iris="rail"] { grid-template-columns: var(--nav-w) 56px minmax(0, 1fr); } .shell.is-narrow { grid-template-columns: var(--nav-w) minmax(0, 1fr); } .pane-app:focus-visible { outline-offset: -3px; } /* ---------- the Iris rail ---------- */ .iris-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; background: var(--conversation); border-right: 1px solid var(--line); min-width: 0; overflow: hidden; } .rail-mark { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; } .rail-mark:hover { background: rgba(255,255,255,.07); } .rail-badge { position: absolute; top: -1px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--action); color: #fff; font-size: 10px; line-height: 14.4px; font-weight: 500; text-align: center; box-shadow: 0 0 0 2px var(--ink); } .rail-rule { width: 22px; height: 1px; background: var(--line); margin: 2px 0; } .rail-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--muted); } .rail-btn:hover { background: rgba(255,255,255,.07); color: var(--body); } /* ---------- the chat/app boundary ---------- 6 px of hit area centred on the grid line, and 1 px of it visible on hover or focus. `touch-action: none` is what makes `setPointerCapture` work on a trackpad without the browser claiming the gesture as a scroll. */ .panel-resizer { position: absolute; top: 0; bottom: 0; width: 6px; z-index: 6; cursor: col-resize; touch-action: none; background: transparent; } .panel-resizer::after { content: ""; position: absolute; inset: 0 2px; background: transparent; transition: background var(--dur-reveal) var(--ease-out); } .panel-resizer:hover::after, .panel-resizer:focus-visible::after { background: var(--action-hover); } .panel-resizer:focus-visible { outline: 2px solid #c6c6ff; outline-offset: 0; border-radius: 3px; } body.is-resizing, body.is-resizing * { cursor: col-resize !important; user-select: none !important; } /* ---------- sidebar rows ---------- Primary navigation is a comfortable, centered 40 px target with consistent space between buttons. Session rows retain two lines for their changing status, but the rule is scoped to their copy so it cannot distort the icon span used by primary navigation (decision C35). */ .sidebar .sidebar-row { margin-block: 2px; } .sidebar .sidebar-row[aria-label] { height: 40px; min-height: 40px; align-items: center; padding-block: 0; } .sidebar .sidebar-row:not([aria-label]) { height: auto; min-height: 36px; align-items: flex-start; padding-block: 6px; } .sidebar .sidebar-row:not([aria-label]) > .sidebar-copy { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; font-size: 10.8px; line-height: 13.6px; } /* ---------- the app pane at full width ---------- Collapsing Iris hands the app 1544 px at 1840, and a dashboard at 1544 px is not a better dashboard — it is the same rows with a person's name at one edge and the button that acts on it at the other. So the pane keeps a measure and grows its gutters instead, on the header, the subheader and the body together so nothing drifts out of line with anything else (decision C33). `max()` is what makes this cost nothing in the open layout: at an 800 px pane the second term is negative and the ordinary 28 px padding wins, so this rule only ever fires where there is spare width. */ .pane-app { --app-measure: 1180px; } .pane-app .pane-header, .pane-app .pane-subheader, .pane-app .app-pane-body, .pane-app .app-body { padding-inline: max(28px, calc((100% - var(--app-measure)) / 2)); } .shell.is-narrow .pane { display: none; } .shell.is-narrow .pane[data-active="true"] { display: flex; } .shell.is-narrow .pane-iris[data-active="true"] { border-right: 0; } /* sidebar */ /* The grid cell `SidebarNav` lives in. Its padding is 8 px because the library's own