/* NanoCo portal design system. Brand reference: near-monochrome ink on paper, * warm linen grouping, one action teal, and one restrained highlight. */ /* ── Inter (vendored variable font — no CDN) ───────────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/vendor/fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/vendor/fonts/InterVariable-Italic.woff2") format("woff2"); } :root { --ink: #1a1612; --ink-soft: #3a332b; --ink-softest: #8a8178; --icon: #3a332b; --paper: #ffffff; --surface-tint: #f2ebd7; --mint-fill: #faf5ea; --divider-soft: #e7e0d3; --divider-solid: #8a8178; --teal: #0f756d; --teal-strong: #095f59; --teal-bright: #1fb8b0; --teal-subtle: #e1f4f1; --teal-border: #80cbc5; --mint: #56edd6; --on-teal: #ffffff; --highlight: #e85d3a; --danger: #b6432c; --danger-subtle: #fcebe6; --amber: #9a6108; --amber-subtle: #fff2cf; /* ── Page-layout spacing & rhythm (block gap > line height) ─────────────── */ --space-2xs: 12px; --space-xs: 16px; --space-sm: 24px; --space-md: 32px; --space-lg: 40px; /* ── Control sizing (Fui Control Height) ────────────────────────────────── */ --control-h: 34px; /* Fui Control Height/md */ --control-h-sm: 26px; /* Fui Control Height/sm */ /* ── Semantic aliases (component layer reads these) ─────────────────────── */ --bg: var(--ink); --surface: var(--paper); --surface-2: #f7f7f5; --surface-3: #f1f2f1; --surface-warm: var(--surface-tint); --border: var(--divider-soft); --border-strong: var(--divider-solid); --text: var(--ink); --text-soft: var(--ink-soft); --text-faint: #6d645b; --accent: var(--teal); --action: var(--teal); /* alias used by buttons/links/focus */ --accent-strong: var(--teal-strong); --accent-soft: var(--teal-subtle); --accent-ring: rgba(15, 117, 109, 0.24); --green: var(--teal); /* success == teal in the kit */ --green-soft: var(--teal-subtle); --amber-soft: var(--amber-subtle); --red: var(--danger); --red-soft: var(--danger-subtle); --brand: var(--teal-bright); --on-brand: var(--on-teal); --on-action: var(--on-teal); --shadow-sm: none; --shadow-md: 0 16px 38px rgba(26, 22, 18, 0.09); --radius: 16px; --radius-sm: 8px; --radius-lg: 12px; --sidebar-w: 256px; --sidebar-w-collapsed: 56px; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* ── Dark theme ───────────────────────────────────────────────────────────── * Overrides only the raw tokens (+ the few literal semantic aliases); every * component reads tokens via var(), so the whole UI recolours from here. * Applied via [data-theme="dark"] on , set before paint by the head * script (localStorage → OS preference). Teal accent is preserved. */ :root[data-theme="dark"] { --ink: #ffffff; --ink-soft: #b0b0b0; --ink-softest: #767676; --icon: #d8d8d8; --paper: #181818; --surface-tint: #202020; --mint-fill: #101010; --divider-soft: #3a3a3a; --divider-solid: #666666; --teal: #56edd6; --teal-strong: #88ffe8; --teal-bright: #56edd6; --teal-subtle: #163a35; --teal-border: #2f6a63; --mint: #56edd6; --on-teal: #06110f; --highlight: #e85d3a; --danger: #f07b61; --danger-subtle: #3a1d16; --amber: #e0a63f; --amber-subtle: #362a12; --surface-2: #000000; --text-faint: #949494; --accent-ring: rgba(86, 237, 214, 0.32); --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.22); --shadow-md: 0 18px 46px rgba(0, 0, 0, 0.42); color-scheme: dark; } /* Theme toggle: show the icon for the theme you'd switch TO. */ .theme-ico-dark { display: none; } :root[data-theme="dark"] .theme-ico-light { display: none; } :root[data-theme="dark"] .theme-ico-dark { display: inline-flex; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--text); background: var(--surface-2); font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-optical-sizing: auto; } a { color: var(--action); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { color: var(--ink); } :where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; } /* ── Layout ──────────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; } .sidebar { background: var(--surface); color: var(--text-soft); border-right: 1px solid var(--border); padding: 24px 17px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; } .brand { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 5px 10px 26px; color: inherit; } .brand:hover { text-decoration: none; } .brand-wordmark { display: grid; width: 137px; height: 16px; } .brand-wordmark img { grid-area: 1 / 1; width: 137px; height: 16px; display: block; } .wordmark-on-dark { display: none !important; } :root[data-theme="dark"] .wordmark-on-light { display: none !important; } :root[data-theme="dark"] .wordmark-on-dark { display: block !important; } .brand .subtitle { color: var(--text-faint); font-size: 11.5px; font-weight: 600; } .nav-label { color: var(--text-faint); font-size: 11px; font-weight: 650; letter-spacing: 0.01em; padding: 14px 10px 6px; } /* Collapsible sections: the label is a . Strip the native disclosure marker and put a rotating chevron on the right instead. */ .nav-section { display: block; } summary.nav-label { display: flex; align-items: center; justify-content: flex-start; gap: 10px; cursor: pointer; list-style: none; user-select: none; border-radius: 8px; transition: color 0.12s; } summary.nav-label::-webkit-details-marker, summary.nav-label::marker { display: none; content: ''; } summary.nav-label:hover { color: var(--text-soft); } summary.nav-label:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; } .nav-label .chev { display: inline-flex; opacity: 0.55; transition: transform 0.15s ease; margin-left: auto; } /* Section-level icon: hidden on the expanded section headers (Build/Manage/Admin are text-only there); shown as a teal-filled dark-bordered badge only in the collapsed rail. Dashboard is a nav item (not a nav-label) so it keeps its icon in both modes. */ .sec-ico { display: inline-flex; align-items: center; flex: none; } .nav-label .sec-ico { display: none; } details.nav-section[open] > summary.nav-label .chev { transform: rotate(90deg); } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 8px; color: var(--text-soft); font-weight: 500; font-size: 13.5px; cursor: pointer; } .nav-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; } .nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; } .nav-item.active .ico { opacity: 1; } .nav-item .ico { width: 18px; text-align: center; opacity: 0.7; } .sidebar .spacer { flex: 1; } .sidebar .foot { display: grid; gap: 5px; color: var(--text-faint); font-size: 11px; padding: 14px 10px 2px; border-top: 1px solid var(--border); } .foot-status { display: inline-flex; align-items: center; gap: 6px; color: var(--action); font-weight: 650; } .sidebar-backdrop { display: none; } .sidebar-tenant-switcher { position: relative; display: grid; gap: 5px; margin: 6px 8px 10px; } .sidebar-tenant-label { color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .sidebar-tenant-switcher details { position: relative; } .sidebar-tenant-switcher summary { min-height: var(--control-h); display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); cursor: pointer; list-style: none; } .sidebar-tenant-switcher summary::-webkit-details-marker, .sidebar-tenant-switcher summary::marker { display: none; content: ''; } .sidebar-tenant-switcher summary > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-tenant-switcher summary > .icon { flex: none; transform: rotate(90deg); transition: transform .15s ease; } .sidebar-tenant-switcher details[open] summary { border-color: var(--teal); box-shadow: 0 0 0 3px var(--accent-ring); } .sidebar-tenant-switcher details[open] summary > .icon { transform: rotate(-90deg); } .sidebar-tenant-menu { position: absolute; z-index: 4; top: calc(100% + 6px); left: 0; right: 0; max-height: min(320px, 55vh); overflow-y: auto; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); } .sidebar-tenant-menu a { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--radius-sm); color: var(--text-soft); font-size: 12.5px; } .sidebar-tenant-menu a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .sidebar-tenant-menu a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; } .sidebar-tenant-menu a .icon { margin-left: auto; } .main { min-width: 0; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 36px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 5; } .topbar h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; } .topbar .crumb { color: var(--text-faint); font-size: 12.5px; margin-bottom: 2px; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } /* Square icon button (e.g. the sidebar-collapse toggle in every header). */ .icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--icon); cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); } /* ── Collapsed sidebar (icon-only rail) — toggled by [data-sidebar-toggle]. Shows the individual sub-item icons (Dashboard + every section's items) as a flat rail; section headers hide and their sections are force-open (JS). ───── */ .sidebar-collapsed .app { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } .sidebar-collapsed .sidebar { padding: 22px 8px; gap: 2px; } .sidebar-collapsed .brand { display: none; } .sidebar-collapsed .nav-text, .sidebar-collapsed .chev { display: none; } .sidebar-collapsed .nav-label { display: none; } .sidebar-collapsed .nav-section { padding: 0; } .sidebar-collapsed .nav-item { justify-content: center; padding: 9px 0; gap: 0; border-radius: 9px; } .sidebar-collapsed .nav-item .ico { width: auto; opacity: 1; } .sidebar-collapsed .sidebar .foot { display: none; } .sidebar-collapsed .sidebar-tenant-switcher { display: none; } .content { padding: 36px 40px 56px; max-width: 1240px; width: 100%; } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card + .card { margin-top: var(--space-sm); } .card-head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .card-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; } .card-head .sub { color: var(--text-faint); font-size: 12.5px; } .card-body { padding: 22px; } .grid { display: grid; gap: var(--space-sm); align-items: stretch; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } /* Cards in a grid share the row height and use the grid gap, not stacked margin. */ .grid > .card { height: 100%; margin-top: 0; display: flex; flex-direction: column; } .grid > .card > .card-body { flex: 1; } /* The .sidebar-collapsed override must ALSO collapse to one column here — it outranks the bare .app rule on specificity, and with .sidebar display:none the main pane would auto-place into the empty 56px first column. */ @media (max-width: 860px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } .app, .sidebar-collapsed .app { grid-template-columns: 1fr; } .sidebar { display: none; } } /* ── Buttons (action, never brand) ─────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font: inherit; font-weight: 560; font-size: 13.5px; line-height: 1.1; padding: 7px 15px; min-height: var(--control-h); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); transition: background 0.12s, border-color 0.12s, box-shadow 0.12s; text-decoration: none; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:active { transform: translateY(0.5px); } .btn.primary { background: var(--action); border-color: var(--action); color: var(--on-action); } .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn.danger { color: var(--red); border-color: var(--border-strong); } .btn.danger:hover { background: var(--red-soft); border-color: var(--red); } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-3); } .btn.sm { padding: 4px 11px; min-height: var(--control-h-sm); font-size: 12.5px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ── Badges (color is never the only signal — always paired with a label) ──── */ /* Fui badges: bordered pills, height 26 (sm). Neutral is the default. */ .badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.3; background: var(--surface-tint); color: var(--text-soft); border: 1px solid var(--divider-soft); white-space: nowrap; } .badge.enforced { background: var(--mint-fill); color: var(--teal-strong); border-color: var(--teal-border); } .badge.stored { background: var(--surface-tint); color: var(--text-faint); border-color: var(--divider-soft); } .badge.green { background: var(--teal-subtle); color: var(--teal-bright); border-color: var(--teal-border); } .badge.amber { background: var(--amber-soft); color: var(--amber); border-color: #e6d9ad; } .badge.red { background: var(--red-soft); color: var(--red); border-color: #f3c9bd; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ── Tables / lists ──────────────────────────────────────────────────────── */ /* Data table (e.g. Templates): lives inside a .card, header row in faint caps, numeric columns tabular + right-aligned, whole rows hover like list rows. */ .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th, .table td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } .table thead th { font-size: 11.5px; font-weight: 650; color: var(--text-faint); text-transform: none; background: var(--surface-2); } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover td { background: var(--surface-2); } .table .name { font-weight: 600; color: var(--ink); } .table .name a { color: inherit; } .table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; } .table th.right, .table td.right { text-align: right; white-space: nowrap; } .table .muted { color: var(--text-faint); } .table .content-cell { color: var(--text-soft); } .list { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); } .row:last-child { border-bottom: none; } .row:hover { background: var(--surface-2); } .row .grow { flex: 1; min-width: 0; } .row .name { font-weight: 600; color: var(--ink); } .row .meta { color: var(--text-faint); font-size: 12.5px; margin-top: 4px; } .row .actions { display: flex; gap: 7px; } /* ── Forms ───────────────────────────────────────────────────────────────── */ .field { margin-bottom: 20px; } .field label, .field-label { display: block; font-weight: 580; font-size: 12.5px; margin-bottom: 6px; color: var(--ink); } .field .hint { color: var(--text-faint); font-size: 12px; margin-top: 5px; } .field-error { margin: 6px 0 0; color: var(--red); font-size: 12px; font-weight: 580; overflow-wrap: anywhere; } [aria-invalid="true"] { border-color: var(--red) !important; } input:not([type]), input[type=text], input[type=email], input[type=search], input[type=number], input[type=date], select, textarea { width: 100%; font: inherit; font-size: 14px; line-height: 1.4; color: var(--ink); min-height: var(--control-h); padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 0.12s, box-shadow 0.12s; } input::placeholder, textarea::placeholder { color: var(--ink-softest); } input[readonly], textarea[readonly] { background: var(--surface-2); color: var(--text-soft); cursor: default; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--accent-ring); } select, input[type=date] { height: var(--control-h); } select { cursor: pointer; } select:disabled { cursor: not-allowed; opacity: 0.6; } textarea { resize: vertical; min-height: 90px; font-family: var(--mono); font-size: 12.5px; line-height: 1.55; } .checks { display: flex; flex-wrap: wrap; gap: 8px; } /* `label.chk` (0,1,1) so it outranks `.field label { display:block }` (0,1,1, earlier) — otherwise the chips render as blocks and the flex centering/reset never apply. */ label.chk { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 12px; border: 1px solid var(--border-strong); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink); user-select: none; } .chk input { accent-color: var(--action); margin: 0; flex: none; } .chk:has(input:checked) { background: var(--accent-soft); border-color: var(--action); color: var(--accent-strong); } .form-actions { display: flex; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); } /* ── Runtime-managed app skills ─────────────────────────────────────────── */ .app-skill-intro { align-items: flex-start; } .app-skills-layout { display: grid; grid-template-columns: minmax(250px, 310px) minmax(0, 1fr); gap: var(--space-sm); align-items: start; } .app-skills-layout > .card { margin: 0; } .app-skill-picker { position: sticky; top: 16px; } .app-skill-picker .card-body { padding: 12px; } .app-skill-search { margin-bottom: 10px; } .app-skill-list { max-height: calc(100vh - 260px); overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; } .app-skill-option { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); } .app-skill-option:hover { text-decoration: none; background: var(--surface-2); } .app-skill-option.active { background: var(--accent-soft); border-color: var(--accent); } .app-skill-option[hidden] { display: none; } .app-skill-mark, .app-skill-avatar { display: grid; place-items: center; flex: none; border-radius: 9px; background: var(--surface-3); color: var(--accent-strong); font-weight: 750; letter-spacing: -0.02em; } .app-skill-mark { width: 34px; height: 34px; font-size: 11px; } .app-skill-avatar { width: 42px; height: 42px; font-size: 13px; } .app-skill-option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .app-skill-option-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .app-skill-option-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: 11px; margin-top: 2px; } .app-skill-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); } .app-skill-option .badge { padding: 1px 5px; font-size: 9px; } .app-skill-editor-head { align-items: center; } .app-skill-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .app-skill-title .sub { margin-top: 3px; } .app-skill-explain { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; padding: 13px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 13px; line-height: 1.5; } .app-skill-explain .icon { flex: none; margin-top: 1px; color: var(--accent-strong); } .app-skill-editor textarea[name="instructions"] { min-height: 340px; } .app-skill-actions { display: flex; align-items: center; gap: 12px; padding-top: 2px; } .app-skill-actions .hint { margin: 0; } .app-skill-remove { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; } .app-skill-remove .hint { margin-top: 3px; } @media (max-width: 860px) { .app-skills-layout { grid-template-columns: 1fr; } .app-skill-picker { position: static; } .app-skill-list { max-height: 280px; } } /* ── Code / pills ────────────────────────────────────────────────────────── */ code, .mono { font-family: var(--mono); font-size: 12.5px; } .pill { display: inline-block; background: var(--surface-3); border-radius: 6px; padding: 1px 7px; font-family: var(--mono); font-size: 12px; margin: 2px 6px 2px 0; } .pill.kept { background: var(--green-soft); color: var(--green); } .pill.removed { background: var(--red-soft); color: var(--red); text-decoration: line-through; opacity: 0.85; } /* ── Effective (∩) view ──────────────────────────────────────────────────── */ .intersect { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; align-items: stretch; gap: 0; } .intersect .op { display: grid; place-items: center; font-size: 18px; color: var(--text-faint); font-weight: 600; } .intersect .col { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; } .intersect .col.result { background: linear-gradient(180deg, #f4faf9, #eaf3f2); border-color: var(--accent); } .intersect .col h3 { margin: 0 0 4px; font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; color: var(--text-soft); } .intersect .col .cap { font-size: 11.5px; color: var(--text-faint); margin-bottom: 12px; } @media (max-width: 860px) { .intersect { grid-template-columns: 1fr; } .intersect .op { padding: 6px; } } .op-inline { color: var(--text-faint); font-weight: 700; margin: 0 2px; } .adv-sets > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-strong); margin-top: 14px; } .adv-sets > summary::-webkit-details-marker { display: none; } /* ══ Template × Policy inspector (design import) ══════════════════════════════ */ .insp-selects { display: flex; align-items: center; gap: 10px; } .insp-sel { position: relative; display: inline-flex; align-items: center; } .insp-sel select { width: auto; min-height: 0; padding: 8px 12px; font-size: 13px; font-weight: 600; } .insp-sel .icon { display: none; } .insp-x { color: var(--text-faint); } .insp-wrap, .insp { display: flex; gap: 20px; align-items: flex-start; } .insp-loading { display: flex; align-items: center; gap: 10px; padding: 40px; color: var(--text-faint); } .insp-empty { padding: 26px; text-align: center; color: var(--text-faint); font-size: 14px; } .insp-empty.pad { padding: 48px; } .insp-list { flex: none; width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .insp-list-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--border); } .insp-list-title { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 13px; } .insp-list-sub { font-size: 12.5px; font-weight: 400; color: var(--text-faint); } .insp-search { display: flex; align-items: center; gap: 9px; padding: 0 12px; height: 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: 12px; color: var(--text-faint); } .insp-search input { flex: 1; border: none; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: 14px; } .insp-filters { display: flex; padding: 3px; background: var(--surface-3); border-radius: 9px; gap: 2px; } .insp-filters button { flex: 1; padding: 7px 4px; border: none; border-radius: 7px; background: transparent; color: var(--text-soft); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .insp-filters button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(15, 23, 20, 0.1); } .insp-list-body { max-height: 640px; overflow: auto; padding: 6px 8px 10px; } .insp-apphead { display: flex; align-items: center; gap: 9px; padding: 12px 10px 5px; } .insp-appmark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 9.5px; font-weight: 700; font-family: var(--mono); } .insp-appname { font-size: 13px; font-weight: 700; font-family: var(--mono); color: var(--ink); } .insp-appcount { font-size: 11.5px; color: var(--text-faint); } .insp-row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; cursor: pointer; } .insp-row:hover { background: var(--surface-2); } .insp-row.sel { background: var(--accent-soft); } .insp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; } .insp-scope { flex: 1; min-width: 0; font-size: 13.5px; font-family: var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insp-scope.rm { color: var(--text-faint); text-decoration: line-through; } .insp-dot.allow { background: var(--teal); } .insp-dot.ask { background: var(--amber); } .insp-dot.block, .insp-dot.removed { background: var(--red); } .ipill { flex: none; padding: 3px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; } .ipill.allow { background: var(--green-soft); color: var(--teal-strong); } .ipill.ask { background: var(--amber-soft); color: var(--amber); } .ipill.block, .ipill.removed { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); } .insp-detail { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; align-self: stretch; } .insp-dhead { display: flex; align-items: center; gap: 13px; padding: 22px 24px; border-bottom: 1px solid var(--border); } .insp-dmark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; font-size: 14px; font-weight: 700; font-family: var(--mono); } .insp-did { flex: 1; min-width: 0; } .insp-dscope { font-size: 19px; font-weight: 700; font-family: var(--mono); color: var(--ink); } .insp-dsub { font-size: 13.5px; color: var(--text-soft); margin-top: 1px; } .insp-badge { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; } .insp-badge-dot { width: 8px; height: 8px; border-radius: 50%; } .insp-badge.allow { background: var(--green-soft); color: var(--teal-strong); } .insp-badge.allow .insp-badge-dot { background: var(--teal); } .insp-badge.ask { background: var(--amber-soft); color: var(--amber); } .insp-badge.ask .insp-badge-dot { background: var(--amber); } .insp-badge.block, .insp-badge.removed { background: color-mix(in srgb, var(--red) 13%, transparent); color: var(--red); } .insp-badge.block .insp-badge-dot, .insp-badge.removed .insp-badge-dot { background: var(--red); } .insp-dbody { padding: 24px; } .insp-verdict { font-size: 15px; line-height: 1.6; color: var(--text-soft); padding: 16px 18px; border-radius: 13px; margin-bottom: 26px; border: 1px solid var(--border); background: var(--surface-2); } .insp-verdict.ok { background: var(--green-soft); border-color: var(--teal-border); color: var(--ink); } .insp-verdict.warn { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 32%, transparent); color: var(--ink); } .insp-verdict.bad { background: color-mix(in srgb, var(--red) 8%, transparent); border-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--ink); } .insp-trace-title { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; } .insp-trace { position: relative; padding-left: 34px; } .insp-trace::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--border); } .insp-step { position: relative; padding-bottom: 22px; } .insp-step:last-child { padding-bottom: 0; } .insp-step-mark { position: absolute; left: -34px; top: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid; } .insp-step-mark.teal { background: color-mix(in srgb, var(--teal) 18%, transparent); border-color: var(--teal); color: var(--teal-strong); } .insp-step-mark.amber { background: var(--amber-soft); border-color: var(--amber); color: var(--amber); } .insp-step-mark.red { background: color-mix(in srgb, var(--red) 15%, transparent); border-color: var(--red); color: var(--red); } .insp-step-mark.grey { background: var(--surface-3); border-color: var(--border-strong); color: var(--text-faint); } .insp-step-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .insp-step-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--ink); } .insp-step-desc { font-size: 13.5px; color: var(--text-soft); line-height: 1.5; margin-top: 5px; } .insp-dcards { display: flex; gap: 12px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--border); } .insp-dcard { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 12px; padding: 15px 16px; background: var(--surface-2); } .insp-dcard-k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; } .insp-dcard-v { font-size: 13.5px; color: var(--text-soft); word-break: break-word; } .insp-dcard-v.mono { font-family: var(--mono); } @media (max-width: 1000px) { .insp-wrap, .insp { flex-direction: column; } .insp-list { width: 100%; } } /* ── Misc ────────────────────────────────────────────────────────────────── */ .empty { text-align: center; padding: 48px 20px; color: var(--text-faint); } .empty .big { font-size: 30px; margin-bottom: 10px; opacity: 0.7; } /* Fui Notification: white/tinted card, 1px border, radius-lg, subtle shadow, and a 4px colored left-accent bar carrying the status signal. */ .banner { padding: 11px 14px; border-radius: var(--radius-lg); font-size: 13px; margin-bottom: 18px; display: flex; gap: 9px; align-items: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left-width: 4px; box-shadow: var(--shadow-sm); } .banner.warn { border-left-color: var(--amber); color: var(--amber); } .banner.err { background: var(--red-soft); border-color: #f3c9bd; border-left-color: var(--red); color: var(--red); } .banner.ok { background: var(--green-soft); border-color: var(--teal-border); border-left-color: var(--green); color: var(--green); } /* Removable tag chips (e.g. IdP-group bindings) */ .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 11px; border-radius: 999px; background: var(--surface-tint); border: 1px solid var(--divider-solid); font-size: 12.5px; } .tag .meta { color: var(--text-faint); margin: 0; } .tag .x { display: inline-grid; place-items: center; width: 18px; height: 18px; border: none; border-radius: 999px; background: transparent; color: var(--text-faint); cursor: pointer; font-size: 12px; line-height: 1; padding: 0; } .tag .x:hover { background: var(--red-soft); color: var(--red); } .field-row { display: flex; gap: 8px; align-items: flex-end; } .field-row .btn { min-height: var(--control-h); } /* match the selects/inputs beside it */ .section-title { font-size: 12.5px; letter-spacing: 0.01em; color: var(--text-soft); font-weight: 650; margin: 0 0 10px; } /* ── Dashboard ─────────────────────────────────────────────────────────────── */ .dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); } .dash-kpis > .card, .dash-actions > .card, .dash-row > .card { margin: 0; } .dash-kpis > .kpi { border: 0; border-right: 1px solid var(--border); border-radius: 0; box-shadow: none; } .dash-kpis > .kpi:last-child { border-right: 0; } .kpi { text-decoration: none; color: inherit; padding: 22px; display: flex; flex-direction: column; transition: background 0.12s; } .kpi:hover { background: var(--surface-2); text-decoration: none; } .kpi-top { display: flex; align-items: center; justify-content: space-between; } .kpi-label { font-size: 12px; font-weight: 650; color: var(--text-faint); } .kpi-ico { color: var(--teal); display: inline-flex; } .kpi-num { font-size: 36px; font-weight: 760; letter-spacing: -0.035em; color: var(--ink); margin: 14px 0 5px; font-variant-numeric: tabular-nums; line-height: 1; } .kpi-sub { font-size: 12.5px; color: var(--text-faint); } .field.compact { margin: 0; } .field.compact label { margin-bottom: 4px; font-size: 11.5px; } .field.compact input, .field.compact select { font-size: 12.5px; } .field .optional { color: var(--text-faint); font-weight: 450; } /* ── Validation access administration ───────────────────────────────────── */ .access-link-panel { display: grid; gap: 14px; margin-bottom: var(--space-sm); padding: 18px 20px; border: 1px solid var(--teal-border); border-radius: var(--radius); background: var(--green-soft); box-shadow: var(--shadow-sm); } .access-link-panel .hint { margin-top: 3px; color: var(--text-soft); } .access-link-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; } .access-link-copy input { background: var(--surface); font-family: var(--mono); font-size: 12px; } .access-create-card { margin-bottom: var(--space-sm); } .access-create-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr 1.2fr auto; align-items: end; gap: 10px; } .access-user-create-grid { grid-template-columns: 1fr 1fr 1.15fr auto; } .access-create-grid .btn { white-space: nowrap; } .access-host-hint { margin-top: 10px; color: var(--amber); } .access-detail-card .kv code { margin-left: 4px; } .access-admin-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .access-admin-actions form { margin: 0; } .validation-version-list { display: flex; flex-direction: column; } .validation-version-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border); } .validation-version-row:first-child { padding-top: 0; } .validation-version-row:last-child { padding-bottom: 0; border-bottom: none; } .validation-version-row code { color: var(--text-faint); font-size: 11px; } .admin-comment-version + .admin-comment-version { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); } .governance-viewer { display: flex; align-items: center; gap: 12px; margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--border); } .governance-viewer > span { display: flex; flex-direction: column; text-align: right; line-height: 1.25; } .governance-viewer small { color: var(--text-faint); font-size: 10.5px; } .governance-viewer form { margin: 0; } .company-template-admin { display: flex; flex-direction: column; gap: 14px; } .company-template-add { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 15px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2); } .company-template-add form { display: flex; align-items: center; gap: 8px; margin: 0; } .company-template-card { display: flex; flex-direction: column; gap: 11px; padding: 17px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .company-template-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .company-template-card h3 { margin: 0 0 3px; font-size: 16px; } .company-template-card > form { margin: 0; } .company-template-card details { padding-top: 10px; border-top: 1px solid var(--border); } .company-template-card details summary { color: var(--text-soft); font-size: 12px; font-weight: 650; cursor: pointer; } .company-template-card details[open] summary { margin-bottom: 12px; } /* ── Company review inside the governance UI ────────────────────────────── */ .validation-body { min-height: 100vh; background: var(--surface-2); } .validation-error-main { width: min(520px, calc(100% - 32px)); margin: 0 auto; padding-top: 10vh; } .validation-gate { padding: 44px; text-align: center; } .validation-gate h1 { margin: 16px 0 8px; font-size: 24px; } .validation-gate p { color: var(--text-soft); } .validation-gate-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto; border-radius: 16px; background: var(--accent-soft); color: var(--accent-strong); } .validation-versions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 18px 0 24px; color: var(--text-faint); font-size: 12px; } .validation-versions > span { margin-right: 3px; font-weight: 650; } .validation-versions a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: var(--surface); } .validation-versions a:hover { text-decoration: none; border-color: var(--border-strong); } .validation-versions a.active { border-color: var(--teal); background: var(--accent-soft); color: var(--accent-strong); font-weight: 650; } .company-template-table { border-top: 1px solid var(--border); } .validation-review { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .validation-review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: var(--text-soft); font-size: 12px; } .validation-review-head > span { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--surface-3); font-size: 10px; } .validation-comments { display: flex; flex-direction: column; gap: 8px; } .validation-comment { padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-soft); white-space: pre-wrap; overflow-wrap: anywhere; } .validation-comment-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 5px; color: var(--text-faint); font-size: 11px; } .validation-comment-meta strong { color: var(--ink); } .validation-no-comments { padding: 11px 13px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-faint); font-size: 12px; } .validation-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; margin-top: 10px; } .validation-comment-form label { grid-column: 1 / -1; color: var(--ink); font-size: 11.5px; font-weight: 600; } .validation-comment-form textarea { min-height: 72px; margin: 0; font-family: var(--font); font-size: 13px; } .validation-comment-form .btn { align-self: end; } .validation-signature { display: flex; align-items: flex-start; gap: 18px; margin-top: var(--space-sm); padding: 24px; border-color: var(--border-strong); } .validation-signature.signed { border-color: var(--teal-border); background: var(--green-soft); } .validation-signature-mark { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft); color: var(--accent-strong); } .validation-signature h2 { margin: 0 0 6px; font-size: 18px; } .validation-signature p { max-width: 760px; margin: 0 0 14px; color: var(--text-soft); } .validation-signature code { display: block; max-width: 100%; margin-top: 8px; color: var(--text-faint); font-size: 10px; overflow-wrap: anywhere; } .validation-signature-meta { color: var(--accent-strong); font-size: 12px; font-weight: 650; } .validation-sign-form { max-width: 660px; margin-top: 18px; } .validation-sign-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; color: var(--ink); font-size: 13px; cursor: pointer; } .validation-sign-check input { flex: none; margin-top: 3px; accent-color: var(--teal); } .validation-disclaimer { max-width: 780px; margin: 16px auto 0; color: var(--text-faint); font-size: 11px; text-align: center; } @media (max-width: 1000px) { .access-create-grid { grid-template-columns: 1fr 1fr; } .access-create-grid .btn { justify-self: start; } } @media (max-width: 700px) { .governance-viewer > span { display: none; } .validation-signature { padding: 18px; } .validation-signature-mark { display: none; } .validation-comment-form { grid-template-columns: 1fr; } .validation-comment-form .btn { justify-self: start; } .access-link-copy, .access-create-grid, .validation-version-row { grid-template-columns: 1fr; } .access-link-copy .btn, .access-create-grid .btn { justify-self: stretch; } .company-template-add, .company-template-card-head { align-items: stretch; flex-direction: column; } .company-template-add form { align-items: stretch; flex-direction: column; } .access-table th:nth-child(3), .access-table td:nth-child(3) { display: none; } } .dash-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-sm); margin-top: var(--space-sm); align-items: start; } .chart-wrap { padding-top: 10px; } .chart-svg { display: block; height: 210px; width: 100%; } .chart-legend { display: flex; gap: 14px; } .chart-legend .lg { font-size: 12px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; } .chart-legend .lg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; } .chart-legend .lg-req::before { background: var(--teal); } .chart-legend .lg-blk::before { background: var(--text-soft); } /* SVG chart elements — theme-aware (dashboard.ts renders them by class). */ .ch-grid { stroke: var(--border); } .ch-axis { fill: var(--text-faint); } .ch-line-prov { stroke: var(--teal); } .ch-line-fail { stroke: var(--text-soft); opacity: 0.5; } .audit-list { display: flex; flex-direction: column; } .audit-item { display: flex; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); } .audit-item:first-child { padding-top: 0; } .audit-item:last-child { border-bottom: none; padding-bottom: 0; } .audit-ico { flex: none; margin-top: 1px; display: inline-flex; } .audit-ico.ok { color: var(--teal); } .audit-ico.err { color: var(--red); } .audit-ico.muted { color: var(--text-faint); } .audit-text { font-size: 13px; color: var(--ink); line-height: 1.4; } .audit-time { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; } .dash-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin-top: var(--space-sm); } .action-card { display: flex; align-items: flex-start; gap: 12px; padding: 18px; text-decoration: none; color: inherit; transition: border-color 0.12s, box-shadow 0.12s; } .action-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); text-decoration: none; } .action-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--surface-3); color: var(--teal); display: inline-grid; place-items: center; flex: none; } .action-title { font-weight: 640; color: var(--ink); } .action-sub { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; } @media (max-width: 900px) { .dash-kpis, .dash-actions { grid-template-columns: 1fr 1fr; } .dash-kpis > .kpi:nth-child(2n) { border-right: 0; } .dash-kpis > .kpi:nth-child(-n + 2) { border-bottom: 1px solid var(--border); } .dash-row { grid-template-columns: 1fr; } } /* A divided sub-section inside a card body (e.g. "What it ships" under the form). As a
it collapses to just its summary to keep the card compact. */ .subsection { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); } details.subsection > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; margin: 0; } details.subsection > summary::-webkit-details-marker, details.subsection > summary::marker { display: none; content: ''; } details.subsection > summary .chev { display: inline-flex; opacity: 0.6; transition: transform 0.15s ease; } details.subsection[open] > summary .chev { transform: rotate(90deg); } details.subsection[open] > .kv { margin-top: 12px; } .kv { display: grid; grid-template-columns: 140px 1fr; gap: 10px 16px; font-size: 13.5px; } .kv dt { color: var(--text-faint); } .kv dd { margin: 0; } .kv dd .badge { margin: 2px 6px 2px 0; } /* chip rows inside kv values — keep them apart */ .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .toolbar .grow { flex: 1; } /* Hidden by default so it reserves NO width inside a button; shown on request. The `.spin` variant is repeated so this outranks the standalone `.spin` display (equal single-class specificity would otherwise let .spin win). */ .htmx-indicator, .htmx-indicator.spin { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator, .htmx-request .htmx-indicator.spin, .htmx-request.htmx-indicator.spin { display: inline-block; } /* Inline .spin indicator — a small ripple (used inside buttons/rows). */ .spin { display: inline-block; width: 13px; aspect-ratio: 1; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 rgba(25, 165, 155, 0.28); animation: l2 1.4s infinite linear; position: relative; vertical-align: middle; } .spin::before, .spin::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(25, 165, 155, 0.28); animation: inherit; animation-delay: -0.5s; } .spin::after { animation-delay: -1s; } /* Standalone loader — the reference teal ripple (drop-in
). */ .loader { width: 20px; aspect-ratio: 1; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(25, 165, 155, 0.28); animation: l2 1.5s infinite linear; position: relative; } .loader::before, .loader::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(25, 165, 155, 0.28); animation: inherit; animation-delay: -0.5s; } .loader::after { animation-delay: -1s; } @keyframes l2 { 100% { box-shadow: 0 0 0 40px transparent; } } /* App picker (App rules section) — a single grouped