/* The Trunk console theme — tweakcn "Vercel" preset (docs/11 §4, normative). Light is :root, dark is .dark on (class strategy, toggle in topbar). */ :root { --background: oklch(0.9900 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(0.9900 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.9400 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.9700 0 0); --muted-foreground: oklch(0.4400 0 0); --accent: oklch(0.9400 0 0); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.6300 0.1900 23.0300); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9200 0 0); --input: oklch(0.9400 0 0); --ring: oklch(0 0 0); --chart-1: oklch(0.8100 0.1700 75.3500); --chart-2: oklch(0.5500 0.2200 264.5300); --chart-3: oklch(0.7200 0 0); --chart-4: oklch(0.9200 0 0); --chart-5: oklch(0.5600 0 0); --sidebar: oklch(0.9900 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9400 0 0); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0.9400 0 0); --sidebar-ring: oklch(0 0 0); --radius: 0.5rem; } .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.1400 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.1800 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(1 0 0); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.2500 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.2300 0 0); --muted-foreground: oklch(0.7200 0 0); --accent: oklch(0.3200 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.6900 0.2000 23.9100); --destructive-foreground: oklch(0 0 0); --border: oklch(0.2600 0 0); --input: oklch(0.3200 0 0); --ring: oklch(0.7200 0 0); --chart-1: oklch(0.8100 0.1700 75.3500); --chart-2: oklch(0.5800 0.2100 260.8400); --chart-3: oklch(0.5600 0 0); --chart-4: oklch(0.4400 0 0); --chart-5: oklch(0.9200 0 0); --sidebar: oklch(0.1800 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(1 0 0); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.3200 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.3200 0 0); --sidebar-ring: oklch(0.7200 0 0); } html { font-family: Geist, ui-sans-serif, system-ui, sans-serif; } /* Alert levels + status colors stay semantic, independent of chrome (docs/11 §1) */ :root { --level-red: oklch(0.63 0.19 23); --level-amber: oklch(0.76 0.16 70); --level-green: oklch(0.64 0.15 150); } /* htmx request affordance */ .htmx-request .htmx-spin { display: inline-block; } .htmx-spin { display: none; } dialog::backdrop { background: rgb(0 0 0 / 0.5); } /* --------------------------------------------------------------------------- Component layer — all colors from tokens (docs/11 §1: no hard-coded colors). --------------------------------------------------------------------------- */ .card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); } .btn { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: var(--radius); padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-weight: 500; line-height: 1.25rem; border: 1px solid transparent; cursor: pointer; transition: opacity 120ms ease; white-space: nowrap; } .btn:hover { opacity: 0.85; } .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); } .btn-outline:hover { background: var(--accent); opacity: 1; } .btn-destructive { background: var(--destructive); color: var(--destructive-foreground); } .btn-ghost { background: transparent; color: var(--muted-foreground); } .btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } .input, .select, .textarea { width: 100%; background: var(--card); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius); padding: 0.375rem 0.625rem; font-size: 0.8125rem; line-height: 1.25rem; } .input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); } .input::placeholder { color: var(--muted-foreground); } .label { display: block; margin-bottom: 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); } .table { width: 100%; font-size: 0.8125rem; border-collapse: collapse; } .table thead th { text-align: left; font-weight: 500; color: var(--muted-foreground); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .table tbody td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--border); } .table tbody tr:hover { background: var(--muted); } .badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .nav-link { display: flex; align-items: center; gap: 0.625rem; border-radius: var(--radius); padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--sidebar-foreground); opacity: 0.75; } .nav-link:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); opacity: 1; } .nav-link.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); opacity: 1; } .nav-section { padding: 1rem 0.75rem 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); } .dialog-panel { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; width: min(28rem, calc(100vw - 2rem)); } .flash { border-radius: var(--radius); padding: 0.625rem 0.875rem; font-size: 0.8125rem; border: 1px solid var(--border); } .flash-success { border-color: var(--level-green); } .flash-error { border-color: var(--destructive); color: var(--destructive); } .flash-info { border-color: var(--chart-2); } /* --------------------------------------------------------------------------- Console shell — sidebar widths, rail (collapsed) mode, mobile drawer, icons --------------------------------------------------------------------------- */ :root { --sidebar-w: 16rem; --sidebar-rail: 4rem; --topbar-h: 3.5rem; } html.sb-collapsed { --sidebar-w: var(--sidebar-rail); } .icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon-sm { width: 0.875rem; height: 0.875rem; } .icon-lg { width: 1.5rem; height: 1.5rem; } .console-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-w); display: flex; flex-direction: column; background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border); transition: width 160ms ease, transform 200ms ease; } .console-topbar { position: fixed; top: 0; right: 0; left: var(--sidebar-w); z-index: 20; height: var(--topbar-h); transition: left 160ms ease; } .console-main { margin-left: var(--sidebar-w); margin-top: var(--topbar-h); min-height: calc(100vh - var(--topbar-h)); transition: margin-left 160ms ease; } .nav-link { position: relative; } .nav-link .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-link .nav-count { margin-left: auto; } .nav-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; user-select: none; } .nav-group > summary::-webkit-details-marker { display: none; } .nav-group > summary .nav-caret { margin-left: auto; transition: transform 150ms ease; opacity: .6; } .nav-group[open] > summary .nav-caret { transform: rotate(90deg); } .nav-group > div { padding-left: 0; } /* Rail mode: icons only, labels become tooltips via title="" */ html.sb-collapsed .nav-label, html.sb-collapsed .nav-section, html.sb-collapsed .nav-caret, html.sb-collapsed .nav-count, html.sb-collapsed .sb-brand-text, html.sb-collapsed .sb-hide-collapsed { display: none; } html.sb-collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; } html.sb-collapsed .nav-group > summary { justify-content: center; padding: .5rem 0; } html.sb-collapsed .nav-group > summary .nav-section { display: none; } html.sb-collapsed .nav-group:not([open]) > div { display: block; } /* rail always shows every link */ html.sb-collapsed .sb-brand { flex-direction: column; justify-content: center; gap: .25rem; height: auto; padding: .5rem 0; } html.sb-collapsed .sb-brand .sb-toggle { margin-left: 0; } /* Mobile: off-canvas drawer */ @media (max-width: 767.98px) { :root, html.sb-collapsed { --sidebar-w: 0px; } .console-sidebar { width: 16rem; transform: translateX(-100%); } html.sb-open .console-sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgb(0 0 0 / .45); } html.sb-open .nav-label, html.sb-open .nav-section, html.sb-open .nav-caret, html.sb-open .nav-count, html.sb-open .sb-brand-text { display: initial; } html.sb-open .nav-link { justify-content: flex-start; padding: .5rem .75rem; } .console-topbar { left: 0; } .console-main { margin-left: 0; } } /* Stat tiles (overview) */ .stat { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.125rem; } .stat-label { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 500; color: var(--muted-foreground); } .stat-value { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .stat-delta { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted-foreground); } .stat-delta.up { color: var(--level-green); } .stat-delta.down { color: var(--destructive); } .queue-row { display: flex; align-items: center; gap: .75rem; padding: .625rem .25rem; border-bottom: 1px solid var(--border); } .queue-row:last-child { border-bottom: 0; } .queue-count { min-width: 2.25rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; border-radius: 9999px; padding: .125rem .5rem; background: var(--secondary); } .queue-count.hot { background: var(--destructive); color: var(--destructive-foreground); } .card-title { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 500; color: var(--muted-foreground); } .card-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--muted-foreground); } .card-link:hover { color: var(--foreground); } /* --------------------------------------------------------------------------- Tabs — peer views of one resource. Actions belong in modals, not tabs. --------------------------------------------------------------------------- */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; transition: color 120ms ease, border-color 120ms ease; } .tab:hover { color: var(--foreground); } .tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius); } .tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); } .tab .tab-count { border-radius: 9999px; background: var(--secondary); color: var(--secondary-foreground); padding: 0 0.4rem; font-size: 0.6875rem; font-variant-numeric: tabular-nums; } .tab[aria-selected="true"] .tab-count { background: var(--primary); color: var(--primary-foreground); } /* --------------------------------------------------------------------------- Modal — native , so Escape and focus trapping come for free. --------------------------------------------------------------------------- */ dialog.modal { padding: 0; border: 0; background: transparent; color: inherit; max-height: calc(100vh - 4rem); } dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); } dialog.modal .dialog-panel { width: min(34rem, calc(100vw - 2rem)); max-height: inherit; overflow-y: auto; } .dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .dialog-title { font-size: 0.9375rem; font-weight: 600; } .dialog-foot { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; } /* Toolbar sitting above a table or tab strip */ .page-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Empty state inside a card */ .empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 3rem 1rem; text-align: center; color: var(--muted-foreground); } .empty .icon { width: 1.75rem; height: 1.75rem; opacity: .5; } /* --------------------------------------------------------------------------- Vertical tabs — for sections whose labels are words rather than one noun, or where there are more of them than fit across a line. Collapses to a scrolling horizontal strip on narrow screens, where a sidebar would cost half the width. --------------------------------------------------------------------------- */ .tabs-layout { display: grid; gap: 1.25rem; align-items: start; } @media (min-width: 900px) { .tabs-layout { grid-template-columns: 15rem minmax(0, 1fr); } } .tabs-side { display: flex; flex-direction: row; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; } .tabs-side::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .tabs-side { position: sticky; top: calc(var(--topbar-h) + 1.5rem); flex-direction: column; overflow: visible; border-bottom: 0; border-right: 1px solid var(--border); padding-bottom: 0; padding-right: 0.5rem; } } .tab-side { display: flex; align-items: center; gap: 0.5rem; flex: none; border-radius: var(--radius); padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; transition: background 120ms ease, color 120ms ease; } .tab-side:hover { background: var(--accent); color: var(--accent-foreground); } .tab-side:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .tab-side[aria-selected="true"] { background: var(--secondary); color: var(--foreground); font-weight: 600; } @media (min-width: 900px) { .tab-side { white-space: normal; line-height: 1.3; } .tab-side[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--primary); } } .tab-side .tab-count { margin-left: auto; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground); padding: 0 0.4rem; font-size: 0.6875rem; font-variant-numeric: tabular-nums; } .tab-side[aria-selected="true"] .tab-count { background: var(--primary); color: var(--primary-foreground); } /* --------------------------------------------------------------------------- Checkbox and radio groups — aligned columns, not a ragged wrap. A wrapping flex of variable-length labels gives every row a different left edge, which is the difference between a list you can scan and one you have to read. A grid with a fixed column width fixes the alignment; the whole option is the hit target, not just the 14px box. --------------------------------------------------------------------------- */ .check-grid { display: grid; gap: 0.25rem 0.75rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .check-grid.check-grid-narrow { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); } .check { display: flex; align-items: center; gap: 0.5rem; min-width: 0; border-radius: var(--radius); padding: 0.3rem 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; cursor: pointer; transition: background 100ms ease; } .check:hover { background: var(--accent); } .check:has(input:disabled) { cursor: default; opacity: 0.6; } .check:has(input:disabled):hover { background: transparent; } .check:has(input:checked) { color: var(--foreground); font-weight: 500; } .check:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; } .check input[type="checkbox"], .check input[type="radio"] { width: 0.95rem; height: 0.95rem; flex: none; accent-color: var(--primary); border-radius: 0.2rem; border: 1px solid var(--border); } .check-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .check-note { margin-left: auto; font-size: 0.6875rem; color: var(--muted-foreground); } /* A setting whose control is wide gets its own row under the description. */ .setting { display: grid; gap: 0.75rem; } @media (min-width: 1024px) { .setting.setting-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } } .setting-desc { min-width: 0; } .setting-control { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; } .setting.setting-inline .setting-control { justify-content: flex-end; } /* --------------------------------------------------------------------------- Workflow diagram — a step chain that stays readable in dark mode, on a phone, and to a screen reader, which a picture of a flowchart does not. --------------------------------------------------------------------------- */ .flow { display: flex; flex-direction: column; gap: 0; counter-reset: flow-step; } .flow-step { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding: 0 0 1.25rem; } .flow-step:last-child { padding-bottom: 0; } /* The connecting line, drawn behind the markers. */ .flow-step:not(:last-child)::before { content: ""; position: absolute; left: 0.94rem; top: 1.75rem; bottom: 0; width: 1px; background: var(--border); } .flow-marker { z-index: 1; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9999px; border: 1px solid var(--border); background: var(--card); font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted-foreground); } .flow-step[data-kind="decision"] .flow-marker { border-color: var(--level-amber); color: var(--level-amber); } .flow-step[data-kind="terminal"] .flow-marker { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); } .flow-body { min-width: 0; padding-top: 0.3rem; } .flow-label { font-size: 0.875rem; font-weight: 500; } .flow-actor { display: inline-block; margin-left: 0.5rem; border-radius: 9999px; background: var(--secondary); color: var(--secondary-foreground); padding: 0.05rem 0.5rem; font-size: 0.6875rem; font-weight: 500; vertical-align: 1px; } .flow-note { margin-top: 0.15rem; font-size: 0.75rem; line-height: 1.45; color: var(--muted-foreground); } /* A decision point: two lanes side by side. */ .flow-branch { display: grid; gap: 0.75rem; margin: 0 0 1.25rem 2.75rem; } @media (min-width: 720px) { .flow-branch { grid-template-columns: 1fr 1fr; } } .flow-lane { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; } .flow-lane-yes { border-left: 3px solid var(--level-green); } .flow-lane-no { border-left: 3px solid var(--level-amber); } .flow-lane-head { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); } .flow-lane .flow-step { padding-bottom: 0.75rem; grid-template-columns: 1.5rem minmax(0, 1fr); } .flow-lane .flow-step::before { left: 0.7rem; top: 1.4rem; } .flow-lane .flow-marker { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; } .status-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .status-chain .sep { color: var(--muted-foreground); } /* --------------------------------------------------------------------------- Attention rows — compact, because a console with five things waiting should still fit on one screen. The whole row is the link. --------------------------------------------------------------------------- */ .attention { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius); background: var(--card); padding: 0.5rem 0.75rem; transition: border-color 120ms ease, background 120ms ease; } .attention:hover { background: var(--accent); border-color: var(--ring); } .attention:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .attention-error { border-left-color: var(--destructive); } .attention-warn { border-left-color: var(--level-amber); } .attention-info { border-left-color: var(--border); } .attention-icon { display: flex; color: var(--muted-foreground); } .attention-error .attention-icon { color: var(--destructive); } .attention-warn .attention-icon { color: var(--level-amber); } .attention-title { display: block; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; } .attention-detail { display: block; margin-top: 0.05rem; font-size: 0.6875rem; line-height: 1.35; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attention-action { display: inline-flex; align-items: center; gap: 0.15rem; font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; } .attention:hover .attention-action { color: var(--foreground); } /* --------------------------------------------------------------------------- Combobox — a select you can type into, single or multiple. A native