/* Iris shared chrome on top of tokens.css. * * After the per-page CSS split, this file holds only the rules that * render on every (or nearly every) page: layout shell, navbar, site * header, footer, button + form-field bases, banner, modal scaffolding, * overdue indicator + drawer, toast, the Performance area sub-nav, and * the Performance page shell. Per-page rules live in their own files * (grid.css, okrs.css, directives.css, moments.css, evidence.css, * login.css, stub-pages.css) and load only from the page that needs * them. Shared component files (etable.css, pill-multi-select.css) load * from each page that consumes them. * * Component CSS only — no hardcoded colors, no hardcoded px values for * typography or spacing. All values reference tokens from tokens.css. * Pixel widths/heights for fixed assets (icons, glyphs) are allowed * since they're physical asset dimensions, not design decisions. */ /* ---------- Layout shell ---------------------------------------------- */ /* Universal border-box. Without this, width: 100% on inputs (.quick-add, * .field input/textarea/select) overflows the parent because default * content-box adds padding + border on top. */ *, *::before, *::after { box-sizing: border-box; } body { min-height: 100vh; } /* The app shell wraps the navbar + main content for authenticated views. * The nav is a sticky flex item on the left; .app__content flexes to * take the remaining width. min-width: 0 on the content column lets * children (the grid table) shrink below their natural width instead of * pushing the layout sideways. */ .app { display: flex; min-height: 100vh; } .app__content { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* ---------- Navbar ---------------------------------------------------- */ /* Persistent left navigation. Width and padding are in rem so a future * font-size changer that adjusts 's base scales the whole nav * proportionally. The collapsed state is driven by [data-nav-collapsed] * on , set synchronously by nav-toggle.js before paint. */ .nav { width: 13.75rem; flex-shrink: 0; position: sticky; top: 0; align-self: flex-start; height: 100vh; display: flex; flex-direction: column; padding: var(--size-4) var(--size-3); border-right: 1px solid var(--color-border); background: var(--color-surface); overflow-y: auto; transition: width var(--transition-base); } [data-nav-collapsed="1"] .nav { width: 3.75rem; } [data-nav-collapsed="1"] .nav__label, [data-nav-collapsed="1"] .nav__wordmark { display: none; } [data-nav-collapsed="1"] .nav__brand-link, [data-nav-collapsed="1"] .nav__item, [data-nav-collapsed="1"] .nav__toggle { justify-content: center; } .nav__brand { margin-bottom: var(--size-5); padding: 0 var(--size-2); } .nav__brand-link { display: flex; align-items: center; gap: var(--size-3); color: var(--color-text); font-weight: var(--weight-black); letter-spacing: var(--tracking-tighter); font-size: var(--font-size-xl); text-decoration: none; } .nav__brand-link:hover { color: var(--color-text); text-decoration: none; } .nav__glyph { width: 1.75rem; height: 1.75rem; flex-shrink: 0; display: block; } .nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--size-1); } .nav__item { position: relative; display: flex; align-items: center; gap: var(--size-3); padding: var(--size-2) var(--size-3); font-size: var(--font-size-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; overflow: hidden; } .nav__item:hover { background: var(--color-surface); color: var(--color-text); text-decoration: none; } [data-theme="dark"] .nav__item:hover { background: var(--color-surface-raised); } .nav__item--active, .nav__item--active:hover { background: var(--color-surface-raised); color: var(--color-brand-primary); } .nav__item--active::before { content: ""; position: absolute; left: 0; top: var(--size-1); bottom: var(--size-1); width: 3px; border-radius: var(--radius-pill); background: var(--color-brand-primary); } .nav__icon { width: 1.25em; height: 1.25em; flex-shrink: 0; display: block; } .nav__divider { margin: var(--size-3) 0; border: none; border-top: 1px solid var(--color-border); } /* Push the bottom group + toggle to the bottom of the nav. */ .nav__list--bottom { margin-top: auto; } .nav__toggle { margin-top: var(--size-2); display: flex; align-items: center; gap: var(--size-3); padding: var(--size-2) var(--size-3); font-family: var(--font-sans); font-size: var(--font-size-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); background: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; text-align: left; transition: background-color var(--transition-fast), color var(--transition-fast); } .nav__toggle:hover { background: var(--color-surface-raised); color: var(--color-text); } [data-theme="dark"] .nav__toggle:hover { background: var(--color-bg); } /* Hide the navbar entirely below the desktop breakpoint. The mobile * list view + slim header stay; navigation between sections on phone * is deferred to a later commit (likely a bottom-bar or hamburger). */ @media (max-width: 47.99rem) { .nav { display: none; } } /* ---------- Site header ----------------------------------------------- */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: var(--size-4) var(--size-6); border-bottom: 1px solid var(--color-border); background: var(--color-bg); } /* The slim top header now shows the page title (a Jinja block per * template) instead of the IRIS wordmark — that moved into the navbar. * The title reads as a breadcrumb-equivalent, not a heading: small, * secondary color, no weight emphasis. */ .site-header__title { font-size: var(--font-size-md); font-weight: var(--weight-medium); color: var(--color-text); letter-spacing: var(--tracking-tight); } .site-header__right { display: flex; align-items: center; gap: var(--size-4); color: var(--color-text-secondary); font-size: var(--font-size-sm); } .site-header__right .email { color: var(--color-text-secondary); } .site-header__right a { color: var(--color-text-secondary); } .site-header__right a:hover { color: var(--color-text); text-decoration: none; } /* Three-segment mode switcher (light / dim / dark) — phase 1c commit 5. * The pill container holds three buttons; the active segment is filled * coral (matching the "coral = system state" rule), inactive segments * are muted text. Sized in rem so font-scale settings flow through. */ .mode-switcher { display: inline-flex; align-items: center; padding: var(--size-0-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .mode-switcher__option { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.375rem; padding: 0; border: none; background: transparent; color: var(--color-text-muted); border-radius: var(--radius-pill); cursor: pointer; line-height: 1; transition: background-color var(--transition-fast), color var(--transition-fast); } .mode-switcher__option:hover { color: var(--color-text-secondary); } .mode-switcher__option--active, .mode-switcher__option--active:hover { background: var(--color-brand-coral); color: var(--color-brand-coral-on); } /* ---------- Site footer ----------------------------------------------- */ .site-footer { padding: var(--size-8) var(--size-6) var(--size-6); text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); letter-spacing: var(--tracking-wide); } /* ---------- Buttons --------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--size-3) var(--size-6); font-family: var(--font-sans); font-size: var(--font-size-base); font-weight: var(--weight-semibold); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .btn--primary { background: var(--color-brand-primary); color: var(--color-brand-primary-on); } .btn--primary:hover { background: var(--color-brand-primary-hover); color: var(--color-brand-primary-on); text-decoration: none; } .btn--primary:active { background: var(--color-brand-primary-active); } .btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); } .btn--ghost:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); text-decoration: none; } /* --bad variant — used for destructive actions in the OKR drawer (Delete * KR / Delete Objective). Stays muted by default — destructive intent * shouldn't shout from a form that's open for casual editing — and * lights up on hover. */ .btn--bad { background: transparent; color: var(--color-status-bad); border-color: color-mix(in srgb, var(--color-status-bad) 35%, transparent); } .btn--bad:hover { background: color-mix(in srgb, var(--color-status-bad) 12%, transparent); color: var(--color-status-bad); border-color: var(--color-status-bad); text-decoration: none; } /* ---------- Banner ---------------------------------------------------- */ .banner { margin-top: var(--size-8); padding: var(--size-4) var(--size-5); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--font-size-base); } .banner--info { border-left: 3px solid var(--color-brand-secondary); } .banner strong { color: var(--color-text); margin-right: var(--size-2); } /* ---------- Form fields ----------------------------------------------- */ /* Pico was removed in Commit 3.5, so basic input/textarea/select styles * live here. Token-referenced; same look as .quick-add. Component- * specific modifiers (e.g., .field--krs for the KR multi-select) live * with their components. */ .field { display: flex; flex-direction: column; gap: var(--size-1); flex: 1 1 0; min-width: 0; } .field__label { font-size: var(--font-size-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .field input[type="text"], .field input[type="number"], .field input[type="date"], .field textarea, .field select { width: 100%; padding: var(--size-2) var(--size-3); font-family: var(--font-sans); font-size: var(--font-size-base); color: var(--color-text); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .field textarea { font-family: var(--font-sans); resize: vertical; line-height: var(--leading-snug); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: var(--focus-ring); } .field-row { display: flex; flex-wrap: wrap; gap: var(--size-3); } /* ---------- Modal scaffolding ---------------------------------------- */ /* Native