/* ==========================================================================
Accred Connect console — app styles
Foundation: accred-premium.css v2.6.1 Inset (ATLAS_SHELL_STANDARD.md, PUS v1.1 section 0), then tokens.css.
This file only adds Connect page layout and product visuals; it does not
redefine foundation tokens or restyle `.acc-*` classes globally.
========================================================================== */
/* index.html and 404.html link accred-premium.css, tokens.css and this file side by side,
in that order (skeleton pass 2026-11-02): an @import chain made the browser fetch them
one after another before the first paint. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* --------------------------------------------------------------------------
Shell (Atlas): body is the `.acc-shell` grid. Its grid children are, in
order, the full-width navy top bar (row 1), the light sidebar and the main
column (row 2). Overlays, menus, and the boot splash are fixed or hidden,
so they take no grid cell. The foundation handles the column widths for
expanded/collapsed and the mobile sheet; app.js mirrors its body classes
onto data-sidebar / data-mobile-nav.
-------------------------------------------------------------------------- */
body.acc-shell {
height: 100dvh;
min-height: 100dvh;
overflow: clip;
font-variant-numeric: tabular-nums;
}
/* Home layout fix 2026-11-03: the shell never scrolls sideways. `hidden` on the body went to the
viewport, which a scrollIntoView or focus can still scroll, sliding the rail out of view; `clip`
on both the root and the body leaves nothing outside the panes to scroll. */
html:has(> body.acc-shell) { overflow: clip; }
/* The main column fills grid row 2 (100dvh − the 60 px top bar); the device
workspace and pages scroll inside it, so the top bar and sidebar never move. */
.connect-console-shell { min-height: 0; overflow: hidden; }
#companyGroupsList .acc-nav-item__label { overflow: hidden; text-overflow: ellipsis; }
/* Top bar (order fixed by Atlas §2) -------------------------------------- */
/* Local test relay status: a top-bar .acc-dot-status (dot + two words, no pill); the tone class carries the state. */
.notification-center { position: relative; }
.notification-panel { position: absolute; top: calc(100% + 0.5rem); right: 0; padding: 0; --acc-origin: top right; }
.notification-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.875rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.notification-panel-title { margin: 0; }
.notification-list { max-height: 22rem; overflow-y: auto; padding: 0.375rem; }
.notification-empty { padding: 1.5rem 1rem; text-align: center; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.notification-item {
display: flex; gap: 0.625rem; width: 100%; padding: 0.625rem 0.75rem; border: 0; border-radius: var(--radius-md);
background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; transition: background-color var(--dur-fast);
}
.notification-item:hover, .notification-item:focus-visible { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.notification-dot { width: 0.5rem; height: 0.5rem; margin-top: 0.4rem; border-radius: 50%; background: hsl(var(--border-strong)); flex: 0 0 auto; }
.notification-item.is-unread .notification-dot { background: hsl(var(--primary)); }
.notification-copy { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.notification-topline { display: flex; gap: 0.5rem; align-items: baseline; font-weight: 500; }
.notification-source { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.notification-body { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.notification-meta { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
/* Page-top banners: one at a time. ---------------------------------------- */
.connection-progress, .control-safety-banner { flex: 0 0 auto; align-items: center; }
.connection-progress .acc-spinner { margin-top: 0; }
body.connection-progress-visible .control-safety-banner { display: none; }
.control-safety-banner .control-safety-state { flex: 0 0 auto; }
.control-safety-details { margin-top: 0.5rem; }
.control-safety-banner.acc-banner--critical .control-safety-state { background: hsl(var(--destructive-soft)); color: hsl(var(--destructive)); }
/* --------------------------------------------------------------------------
Workspace: list (320) · device pane. The foundation grid is
used as-is; the height is fluid because banners sit above the workspace.
-------------------------------------------------------------------------- */
.connect-workspace-grid { flex: 1 1 auto; min-height: 0; height: auto; }
.workspace-main { min-width: 0; min-height: 0; overflow: auto; background: hsl(var(--background)); }
/* Device groups (company scaffolding): a quiet rail of filter rows beside the
list from 1280 px, measured like the sidebar's nav items; the pressed row is
the sidebar's pressed-filter treatment (DS §3.4). Below 1280 px the list
header's "Group" select replaces it. */
.device-groups { display: none; }
.device-groups__body { padding: 0.75rem 0.5rem 1rem; }
.device-groups__label { margin: 1rem 0 0.25rem; padding: 0 0.625rem; font-size: var(--text-xs); font-weight: 600; line-height: 1.3; color: hsl(var(--muted-foreground)); }
.device-groups__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.125rem; }
.device-group {
display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2.125rem; padding: 0 0.625rem;
border: 0; border-radius: var(--radius-md); background: transparent; color: hsl(var(--foreground));
font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out);
}
.device-group:hover:not(:disabled) { background: hsl(var(--subtle)); }
.device-group[aria-pressed="true"] { background: hsl(var(--subtle)); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); font-weight: 500; }
.device-group:disabled { cursor: not-allowed; color: hsl(var(--muted-foreground)); }
.device-group__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-group__count { flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: var(--text-xs); }
.device-group--more { color: hsl(var(--muted-foreground)); } /* B-14: quiet "Show all clients (N)" row */
@media (min-width: 1280px) {
.connect-workspace-grid { grid-template-columns: 13.5rem var(--shell-list) minmax(0, 1fr); }
.device-groups { display: block; border-right: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.list-filter-field.device-group-field { display: none; }
}
/* Device list pane */
.sessions-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sessions-header { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem 1rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); }
.sessions-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* Design system 3.0 §5.1: the Devices list pane carries the page subtitle under its title, sized for the narrow pane. */
.sessions-header .devices-desc { margin: -0.25rem 0 0; font-size: var(--text-sm); }
.search-container .search-icon { pointer-events: none; }
.search-container > .acc-input { padding-left: 2.25rem; }
.list-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.25rem; }
.list-filter-field { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 100%; min-width: 0; }
.list-filter-field .acc-select { flex: 1 1 auto; width: 100%; min-width: 0; }
.list-filter-summary { flex: 1 1 auto; }
.agents-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.agents-list:focus-visible { outline-offset: -2px; }
/* Device card = list row with presence dot-status */
.agent-card { align-items: center; gap: 0.75rem; min-height: 3.5rem; padding: 0.625rem 1rem; cursor: pointer; }
.agent-card:hover { background: hsl(var(--subtle)); }
.agent-card.active, .agent-card[aria-selected="true"] { background: hsl(var(--accent)); }
.agent-card:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; border-radius: 0; }
.agent-status { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 1.25rem; flex: 0 0 auto; }
.agent-status-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.status-dot { width: 0.625rem; height: 0.625rem; flex: 0 0 auto; border-radius: 50%; background: hsl(var(--muted-foreground) / 0.6); box-shadow: 0 0 0 3px hsl(var(--muted-foreground) / 0.15); }
.status-dot[data-state="online"] { background: hsl(var(--success)); box-shadow: 0 0 0 3px hsl(var(--success) / 0.18); }
.status-dot[data-state="enrolled"] { background: transparent; box-shadow: inset 0 0 0 2px hsl(var(--border-strong)); }
.status-dot[data-state="stale"] { background: hsl(var(--muted-foreground) / 0.4); box-shadow: 0 0 0 3px hsl(var(--muted-foreground) / 0.12); }
.status-dot[data-state="connecting"], .status-dot[data-state="authenticating"], .status-dot[data-state="reconnecting"] { background: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18); animation: acc-pulse-ring 1.8s var(--ease-out) infinite; }
.status-dot[data-state="active"] { background: hsl(var(--info)); box-shadow: 0 0 0 3px hsl(var(--info) / 0.18); }
.status-dot[data-state="degraded"] { background: hsl(var(--warning)); }
.status-dot[data-state="offline"], .status-dot[data-state="disconnected"], .status-dot[data-state="ended"] { background: hsl(var(--muted-foreground) / 0.55); }
.status-dot[data-state="failed"] { background: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.18); }
.agent-details { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.agent-name-row { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.agent-name { font-size: var(--text-base); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.agent-flag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 1.125rem; padding: 0 0.375rem; border-radius: 999px; border: 1px solid hsl(var(--border-strong)); color: hsl(var(--muted-foreground)); font-size: var(--text-xs, 0.75rem); font-weight: 500; }
.agent-flag--live { gap: 0.3125rem; color: hsl(var(--foreground)); }
.agent-pill { flex: 0 0 auto; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* C14: the row status is a dot plus short muted text, not a button-like pill. */
.agent-when { flex: 0 0 auto; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.agent-when[data-tone="success"] { color: hsl(var(--success)); font-weight: 500; }
.agent-when[data-tone="info"] { color: hsl(var(--info)); }
.agent-presence-row, .agent-meta-row, .agent-identity-row { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-presence-row[data-tone="success"] { color: hsl(var(--success)); }
.agent-presence-row[data-tone="warning"] { color: hsl(var(--warning)); }
.agent-presence-row[data-tone="info"] { color: hsl(var(--info)); }
.agent-meta-row { display: flex; align-items: center; gap: 0.375rem; }
.agent-meta-row svg { width: 0.75rem; height: 0.75rem; flex: 0 0 auto; }
.agent-meta-row span { overflow: hidden; text-overflow: ellipsis; }
.agent-identity-row { font-variant-numeric: tabular-nums; }
.agent-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.badge-tag { display: inline-flex; align-items: center; height: 1.125rem; padding: 0 0.375rem; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: var(--text-xs, 0.75rem); font-weight: 500; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.badge-tag.product { background: hsl(var(--info-soft)); color: hsl(var(--info)); }
.badge-tag.warning { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.badge-tag.primary { background: hsl(var(--primary-soft)); color: hsl(var(--accent-foreground)); }
/* List states. Skeleton pass 2026-11-02: loading rows are the real device row
(.acc-list__row.agent-card) with foundation .acc-skeleton blocks inside, so
these are only size helpers for those blocks; no Connect-only skeleton look.
The stage line fades in on the same --skeleton-delay as the blocks. */
.agent-card--skeleton, .notification-item--skeleton { cursor: default; pointer-events: none; }
.agent-skeleton-dot { display: block; width: 0.625rem; height: 0.625rem; }
.agents-loading-notice { margin: 0; padding: 0.75rem 1rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); text-align: center; animation: acc-fade-in var(--dur-base) var(--ease-out) var(--skeleton-delay, 300ms) both; }
.table-skeleton-button { display: inline-block; width: 5.5rem; height: var(--control-h-sm); vertical-align: middle; }
.next-step-card__icon-skeleton { display: block; width: 100%; height: 100%; border-radius: inherit; }
.next-step-card__actions .next-step-card__action-skeleton { width: 9rem; height: var(--control-h); border-radius: var(--radius-md); }
.getting-started__skeleton .acc-checklist__mark { border: 0; }
.org-menu__dot-skeleton { display: block; width: 0.5rem; height: 0.5rem; flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .agents-loading-notice { animation: none; } }
.agents-empty .acc-empty__actions, .empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; }
/* v2.5: an empty, error or permission state is a plain symbol (no tile, no ring); the tone is the symbol colour. */
.agents-empty.is-error .acc-empty__icon { color: hsl(var(--destructive)); }
.agents-empty.is-permission .acc-empty__icon { color: hsl(var(--warning)); }
.agents-empty .acc-details { width: 100%; max-width: 26rem; margin-top: 0.5rem; text-align: left; }
/* Welcome (home) view: no hero (design system v2.0 §5.1); the list's "Devices" is the page title. */
.welcome-screen { display: flex; flex-direction: column; gap: 1rem; }
.next-step-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; padding: 1.25rem; }
.next-step-card__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border-radius: var(--radius-lg); background: hsl(var(--primary-soft)); color: hsl(var(--accent-foreground)); }
.next-step-card__icon svg { width: 1.375rem; height: 1.375rem; }
.next-step-card[data-tone="success"] .next-step-card__icon { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.next-step-card[data-tone="neutral"] .next-step-card__icon { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.next-step-card__body { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.next-step-card__title { margin: 0; font-size: var(--text-lg); }
.next-step-card__desc { margin: 0; max-width: var(--prose-max); color: hsl(var(--muted-foreground)); font-size: var(--text-sm); }
.next-step-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 0 0 auto; align-self: center; }
.welcome-stats-grid { overflow: hidden; }
.welcome-stats-grid[hidden] { display: none; }
/* Loading rule: a metric is an inline skeleton (foundation .acc-skeleton--inline) until the inventory has loaded, never "0". */
.acc-nav-item__badge[hidden] { display: none; }
.acc-metric__value--text { font-size: var(--text-lg); line-height: 1.3; }
.getting-started__title { font-size: var(--text-md); color: hsl(var(--foreground)); }
.acc-checklist__progress-label strong { font-size: var(--text-md); color: hsl(var(--foreground)); }
.acc-checklist__action .acc-btn { white-space: nowrap; }
/* Device page -------------------------------------------------------------- */
.workspace-container { display: flex; flex-direction: column; min-height: 100%; }
.device-contextbar { flex: 0 0 auto; }
.breadcrumb-link { font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.breadcrumb-link:hover { color: hsl(var(--foreground)); text-decoration: none; }
.workspace-page { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 auto; }
.device-title-row { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; min-width: 0; }
.device-title-row .acc-page-title { min-width: 0; overflow-wrap: anywhere; }
.workspace-tabs[hidden] { display: none; }
.workspace-tabs .acc-tab[hidden] { display: none; }
.workspace-header { margin-bottom: 0; }
.workspace-header .acc-page-title { overflow-wrap: anywhere; }
/* Narrow device pane: actions wrap under the title instead of squeezing it. */
.workspace-header { flex-wrap: wrap; }
.workspace-header .acc-page-header__text { flex: 1 1 18rem; }
.workspace-header .acc-page-header__actions { flex: 0 1 auto; }
.workspace-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid hsl(var(--border)); overflow-x: auto; scrollbar-width: none; }
.workspace-tabs::-webkit-scrollbar { display: none; }
.workspace-tabs .acc-tab:disabled { color: hsl(var(--muted-foreground) / 0.75); cursor: not-allowed; }
.workspace-tabs .acc-tab:disabled > svg { opacity: 0.6; }
/* C07: an unavailable tab says why in the tab itself. */
.tab-reason { padding: 0 0.375rem; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: var(--text-xs); font-weight: 500; line-height: 1.25rem; }
/* U-CON-D: the live-session bar sits between the header and the tabs. */
.live-session-bar[hidden] { display: none; }
.workspace-content { flex: 1 1 auto; min-height: 0; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-pane[hidden] { display: none; }
/* Overview */
/* C12: at most two equal columns; cards in a row share one height. */
.info-tab-layout { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(18rem, calc((100% - 1rem) / 2))), 1fr)); gap: 1rem; align-items: stretch; }
.info-status-note { margin: 0; color: hsl(var(--muted-foreground)); }
.info-status-note .acc-btn--link { height: auto; padding: 0; vertical-align: baseline; }
.info-grid { grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr); row-gap: 0.625rem; margin: 0; }
.info-grid dd { font-weight: 500; }
.info-grid dd.info-detail { font-weight: 400; color: hsl(var(--muted-foreground)); }
/* Policy values keep readable width; their action wraps below in narrow cards. */
.info-policy-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 0.5rem; }
.info-policy-row > span { flex: 1 1 12rem; min-width: min(100%, 10rem); }
.info-policy-row > button { flex: 0 0 auto; }
.info-policy-row > .device-owner { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.info-policy-row > .device-owner__actions { display: inline-flex; flex: 0 0 auto; min-width: 0; gap: 0.25rem; }
.owner-dialog__clear { margin-inline-end: auto; }
.info-term { border-bottom: 1px dotted hsl(var(--border-strong)); cursor: help; }
.info-footnote { margin: 0.5rem 0 0; }
.info-duplicate-note { font-size: var(--text-sm); }
.info-mono { font-size: var(--text-xs); }
.presence-pill[data-tone="success"] { background: hsl(var(--success-soft)); color: hsl(var(--success)); }
.presence-pill[data-tone="warning"] { background: hsl(var(--warning-soft)); color: hsl(var(--warning)); }
.presence-pill[data-tone="info"] { background: hsl(var(--info-soft)); color: hsl(var(--info)); }
.presence-pill[data-tone="neutral"] { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.info-duplicate-note[data-tone="warning"] { background: hsl(var(--warning-soft)); border-color: hsl(var(--warning) / 0.3); }
/* Remote screen */
.screen-tab-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.screen-tab-layout > .screen-viewport-card { flex: 1 1 100%; grid-column: 1 / -1; }
@media (min-width: 1600px) { .screen-tab-layout { grid-template-columns: minmax(0, 1fr) 20rem; } .screen-tab-layout > .screen-viewport-card { grid-column: auto; } }
.screen-viewport-card:not(.has-image) { aspect-ratio: auto; min-height: 18rem; padding: 1.5rem 1rem; }
.screen-viewport-card {
position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; min-height: 0; overflow: hidden;
border: 1px solid hsl(222 30% 18%); border-radius: var(--radius-lg); background: hsl(222 44% 11%); color: hsl(216 25% 94%);
}
.screen-viewport-card img { width: 100%; height: 100%; object-fit: contain; cursor: crosshair; display: none; }
.screen-viewport-card.has-image img { display: block; }
.screen-viewport-card.has-image .screen-placeholder { display: none; }
.screen-placeholder { color: hsl(216 20% 80%); }
.screen-placeholder .acc-empty__icon { background: none; color: hsl(216 25% 94%); box-shadow: none; }
.screen-placeholder .acc-empty__title { color: hsl(0 0% 100%); }
.screen-placeholder .acc-empty__desc { color: hsl(216 20% 80%); }
.screen-next-steps { margin: 0.25rem 0 0; padding-left: 1.125rem; max-width: 28rem; text-align: left; font-size: var(--text-sm); color: hsl(216 20% 80%); }
.screen-next-steps li + li { margin-top: 0.25rem; }
.screen-placeholder .acc-btn--outline { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.18); color: hsl(0 0% 100%); }
.screen-placeholder .acc-btn--outline:hover:not(:disabled) { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); }
.input-controls-card .acc-card__section { padding: 0.875rem 1.25rem 1.125rem; }
.input-group-row { display: flex; gap: 0.5rem; }
.input-group-row .acc-input { flex: 1 1 auto; min-width: 0; }
.keyboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.status-text-banner { font-size: var(--text-sm); }
.metrics-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.625rem; }
/* Diagnostics are for troubleshooting; collapsed by default. */
details.metrics-panel > summary.metrics-header { cursor: pointer; list-style: none; margin-bottom: 0; }
details.metrics-panel > summary.metrics-header::-webkit-details-marker { display: none; }
details.metrics-panel > summary.metrics-header::before { content: "\25B8"; color: hsl(var(--muted-foreground)); margin-right: 0.375rem; transition: transform 160ms var(--acc-ease-out, ease-out); }
details.metrics-panel[open] > summary.metrics-header { margin-bottom: 0.625rem; }
details.metrics-panel[open] > summary.metrics-header::before { transform: rotate(90deg); }
details.metrics-panel > summary.metrics-header:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm, 6px); }
.metrics-grid { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr); row-gap: 0.375rem; font-size: var(--text-xs); }
.metrics-grid dd { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Files */
.files-tab-layout { overflow: hidden; }
.path-toolbar { flex-wrap: wrap; }
.path-toolbar .acc-input { flex: 1 1 14rem; width: auto; min-width: 0; }
.explorer-grid { max-height: 60vh; }
.item-name-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.item-name-cell svg { width: 1rem; height: 1rem; flex: 0 0 auto; color: hsl(var(--muted-foreground)); }
.icon-folder svg { color: hsl(var(--warning)); }
.explorer-table .acc-table__empty td { color: hsl(var(--muted-foreground)); }
/* PowerShell: tokenized mono dark surface */
.terminal-card {
display: grid; grid-template-rows: minmax(16rem, 1fr) auto; min-height: 24rem; height: calc(100dvh - 22rem); overflow: hidden;
border: 1px solid hsl(222 30% 18%); border-radius: var(--radius-lg);
background: hsl(222 44% 11%); color: hsl(158 64% 72%);
font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.55;
}
.terminal-output { padding: 0.875rem 1rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.terminal-input-row { display: flex; gap: 0.5rem; align-items: flex-end; padding: 0.75rem; border-top: 1px solid hsl(222 30% 18%); background: hsl(222 40% 9%); }
.terminal-input { flex: 1 1 auto; min-height: 2.75rem; height: 2.75rem; resize: vertical; background: hsl(222 36% 14%); color: hsl(216 25% 94%); border-color: hsl(222 30% 24%); box-shadow: none; font-family: var(--font-mono); font-size: var(--text-sm); }
.terminal-input::placeholder { color: hsl(216 20% 60%); }
.terminal-input:hover { border-color: hsl(222 25% 34%); }
.terminal-input:disabled { background: hsl(222 36% 12%); color: hsl(216 15% 55%); }
.terminal-input-row .acc-btn { flex: 0 0 auto; }
/* --------------------------------------------------------------------------
Dialogs: the foundation's .acc-dialog > .acc-scrim + .acc-dialog__panel
(448 / 640 px, a bottom sheet below 640 px). The scrim sits under the panel
and takes the click; the container itself lets clicks through (foundation).
-------------------------------------------------------------------------- */
.connect-dialog > .acc-scrim { z-index: auto; pointer-events: auto; }
.confirm-target strong { overflow-wrap: anywhere; }
.confirm-note { margin: 0; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.preview-dialog__image { display: block; width: 100%; height: auto; max-height: 70dvh; object-fit: contain; border-radius: var(--radius-md); background: hsl(var(--fill)); }
.deploy-body.acc-stack { gap: 1rem; }
/* Tooltip (§6): the foundation's dark .acc-tooltip, placed by app.js. */
.connect-tooltip { position: fixed; pointer-events: none; white-space: pre-line; overflow-wrap: anywhere; }
/* Enrollment dialog */
.deploy-result[hidden] { display: none; }
.installer-format-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.installer-format-field legend { padding: 0; margin-bottom: 0.375rem; }
.installer-format-options { display: grid; gap: 0.625rem; }
.installer-summary-box { margin: 0; min-height: 5rem; }
/* Shortcuts dialog */
.shortcuts-group + .shortcuts-group { margin-top: 1rem; }
.shortcuts-group .acc-label { margin: 0 0 0.25rem; }
.acc-shortcut-row .acc-kbd-combo { flex: 0 0 auto; }
/* --------------------------------------------------------------------------
Help panel, account menu, toasts, tour, launch overlay
-------------------------------------------------------------------------- */
.help-scrim { z-index: var(--z-overlay); }
.help-panel { z-index: var(--z-sheet); }
.help-panel__body { padding-top: 0.25rem; }
/* Help sheet (UX wave 3 X-11, PUS §8 item 2): the foundation's 400 px sheet. The home is five
sections in order: Start here, On this page, Keyboard shortcuts, Guides, Contact support. Each is
a sentence-case label over a white borderless group on the sheet's grey ground (v2.5 Inset).
Guides (app.js renderHelpTopics, ported from Accred Fleet HelpTopics.tsx) is a filterable list
that opens a guide in place, with Back to the home and Previous / Next. One pane at every width:
the home or a guide. The foundation has no help-index primitive, so this is app-local and built
from tokens and foundation rows only. */
.help-topics[data-view="article"] .help-topics__index,
.help-topics[data-view="index"] .help-topics__article { display: none; }
.help-topics__index { display: flex; flex-direction: column; gap: 1.5rem; }
.help-section__label { margin: 0 0 0.375rem; padding: 0 1rem; }
.help-group { margin: 0; padding: 0; list-style: none; border-radius: var(--radius-lg); background: hsl(var(--card)); overflow: clip; }
.help-group--pad { padding: 0 1rem; }
.help-group--pad > .acc-compact { padding-block: 0.75rem; }
.help-group :is(.acc-list__title, .acc-list__meta) { display: block; }
.help-group .acc-list__meta { white-space: normal; }
.help-shortcuts .acc-shortcut-row { min-height: 2.75rem; }
.help-section__more { margin: 0.25rem 0 0 1rem; }
.help-topics__filter { margin-bottom: 0.5rem; }
.help-topics__filter .acc-input { width: 100%; }
.help-topics__empty { display: grid; justify-items: start; gap: 0.25rem; padding: 0.25rem 1rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.help-steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: var(--text-sm); color: hsl(var(--foreground)); }
.help-steps strong { font-weight: 600; }
.help-glossary { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; font-size: var(--text-sm); }
.help-glossary dd + dt { margin-top: 0.625rem; }
.help-glossary dt { font-weight: 500; color: hsl(var(--foreground)); }
.help-glossary dd { color: hsl(var(--muted-foreground)); }
.help-topics__back { margin: -0.25rem 0 0.75rem -0.625rem; }
.help-topics__header { margin-bottom: 0.75rem; padding: 0 1rem; }
.help-topics__heading { font-size: var(--text-md); font-weight: 600; line-height: 1.4; outline: none; }
.help-topics__body { min-width: 0; }
.help-guide { padding: 0 1rem; border-radius: var(--radius-lg); background: hsl(var(--card)); }
.help-guide > :is(.help-steps, .help-glossary, .acc-compact) { padding-block: 0.875rem; }
.help-guide > .help-steps { padding-left: 1.25rem; }
.help-guide > .acc-compact:empty { display: none; }
.help-topics__pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.help-topics__pager-link {
display: grid; justify-items: start; gap: 0.125rem; min-width: 0; padding: 0.625rem 0.875rem;
border: 0; border-radius: var(--radius-lg); background: hsl(var(--card)); color: hsl(var(--foreground));
font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out);
}
.help-topics__pager-link:hover { background: hsl(var(--subtle)); }
.help-topics__pager-link--next { grid-column: 2; justify-items: end; text-align: right; }
.help-topics__pager-dir { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.help-topics__pager-dir > svg { width: 0.875rem; height: 0.875rem; }
.help-topics__pager-title { max-width: 100%; font-size: var(--text-sm); font-weight: 500; }
/* Session history: the technician's notes, folded under a count. */
.session-notes { display: grid; justify-items: start; gap: 0.375rem; max-width: 28rem; }
.session-notes .acc-details { width: 100%; }
.session-notes__list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.session-notes__list time { display: block; color: hsl(var(--muted-foreground)); font-size: var(--text-xs); }
.session-notes__text { white-space: pre-wrap; overflow-wrap: anywhere; color: hsl(var(--foreground)); }
/* AI support: Settings days, and Session history's approvals and transcript. Server text is shown as text only. */
.assist-days { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 0.875rem; }
.sessions-tabs { align-self: flex-start; }
.assist-approvals, .assist-jobs, .assist-timeline { margin: 0; padding: 0; list-style: none; }
.assist-approval { display: grid; gap: 0.625rem; padding: 0.875rem 1rem; }
.assist-approval + .assist-approval { border-top: 1px solid hsl(var(--border)); }
.assist-approval__title, .assist-subtitle { margin: 0; font-size: var(--text-base); font-weight: 600; overflow-wrap: anywhere; }
.assist-subtitle { margin-bottom: 0.5rem; }
.assist-approval__actions, .assist-transcript__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.assist-approval__actions { justify-content: flex-end; }
.assist-transcript__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.assist-code { max-height: 18rem; margin: 0; overflow: auto; }
.assist-reason { max-width: 20rem; overflow-wrap: anywhere; }
.assist-timeline { display: grid; gap: 0.5rem; }
.assist-timeline > li { display: grid; grid-template-columns: minmax(7rem, auto) minmax(6rem, auto) minmax(0, 1fr); gap: 0.25rem 0.75rem; font-size: var(--text-sm); }
.assist-timeline time, .assist-timeline__actor { color: hsl(var(--muted-foreground)); }
.assist-timeline__summary { overflow-wrap: anywhere; white-space: pre-wrap; }
.assist-jobs { display: grid; gap: 0.75rem; }
.assist-job { display: grid; gap: 0.5rem; padding-top: 0.75rem; border-top: 1px solid hsl(var(--border)); }
.assist-job:first-child { padding-top: 0; border-top: 0; }
.assist-job__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; overflow-wrap: anywhere; }
.assist-receipt pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.assist-receipt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.assist-job__facts, .assist-job__error { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.assist-job__error { color: hsl(var(--destructive-tint-foreground)); }
/* IT help (Teams requests): the list and one request's conversation. Server text is shown as text only. */
#itHelpTabs { align-self: flex-start; }
.it-help-channel { display: block; font-size: var(--text-xs); }
.it-help-request { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Foundation v4.0.5: IT help leads with the requester, so the request is the .is-grow column and takes the share from a
1,600 px main area. Deliberate exception: it stays one line with an ellipsis there too (max-width: 0 lets the 36 %
share set its width), so a long request never makes one row taller than the rest; the full text opens with the request. */
@container acc-main (min-width: 100rem) { .it-help-table td.it-help-request { max-width: 0; white-space: nowrap; } }
.it-help-row--new td:first-child .acc-btn--link { font-weight: 600; }
#itHelpTicketBody { display: grid; gap: 1.25rem; }
.it-help-section { gap: 0.5rem; }
.it-help-section > h4 { margin: 0; }
.it-help-thread { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.it-help-thread__msg { display: grid; gap: 0.125rem; max-width: 46rem; padding: 0.625rem 0.75rem; border-radius: var(--radius-md, 8px); background: hsl(var(--subtle)); }
.it-help-thread__msg.is-assistant { background: hsl(var(--accent)); }
.it-help-thread__who { color: hsl(var(--muted-foreground)); font-size: var(--text-xs); font-weight: 600; }
.it-help-thread__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.it-help-thread__tool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; padding-left: 0.75rem; font-size: var(--text-sm); }
.it-help-thread__tool code { font-family: var(--font-mono); font-size: var(--text-xs); }
.it-help-thread__tool.is-failed .it-help-thread__who { color: hsl(var(--destructive-tint-foreground)); }
.it-help-thread__detail { color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.assist-screenshot { display: block; max-width: 100%; height: auto; border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); }
@media (max-width: 639px) {
.assist-days { justify-content: flex-start; }
.assist-timeline > li { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
.help-topics__pager-link { transition: none; }
}
/* Command palette (Ctrl/⌘ K) */
.command-scrim { z-index: var(--z-overlay); }
.command-dialog { align-items: start; padding-top: 12vh; z-index: calc(var(--z-dialog) + 1); }
.command-dialog .acc-command { max-height: min(70dvh, 36rem); }
.command-dialog .acc-command__input kbd { flex: 0 0 auto; }
.command-dialog .acc-menu__label { padding: 0.25rem 0.625rem; }
.command-item { min-height: 2.5rem; }
.command-item[aria-selected="true"] { background: hsl(var(--muted)); }
.command-item__label { display: block; font-weight: 500; }
.command-item .acc-menu__item__hint { white-space: nowrap; }
/* Preferences dialog + display density (accred.connect.density). Compact
tightens list rows and table cells only; the shell geometry never changes. */
.preferences-density, .preferences-theme, .preferences-action { align-self: flex-start; }
body[data-density="compact"] .agent-card { padding-top: 0.5rem; padding-bottom: 0.5rem; }
body[data-density="compact"] .acc-table td, body[data-density="compact"] .acc-table th { padding-top: 0.375rem; padding-bottom: 0.375rem; }
/* Account menu: fixed; app.js places it per Atlas §3 (below the top-bar avatar, right-aligned, 240 px). */
.account-menu { position: fixed; width: 15rem; }
/* Organization menu: fixed below the sidebar organization card (Atlas §4, C20). */
.org-menu { position: fixed; width: 18rem; max-width: calc(100vw - 1rem); }
.org-menu__item .acc-product-dot { flex: 0 0 auto; }
.org-menu__item .acc-menu__check { margin-left: auto; color: hsl(var(--primary)); }
.org-menu__item .acc-menu__check svg { width: 1rem; height: 1rem; }
.account-menu .acc-menu__item__body, .org-menu .acc-menu__item__body { display: flex; flex-direction: column; min-width: 0; }
.account-menu .acc-menu__item__hint, .org-menu .acc-menu__item__hint { margin-left: auto; color: hsl(var(--muted-foreground)); }
/* Connect pages (unified IA §3.5) --------------------------------------------
SYS-13 (design system 2.5 §5.2, foundation v3.3.0): every page is Standard
and fluid, filling the main area beside the sidebar with the foundation gutter
(never capped or centred here). Settings is a Reading page (.acc-page--reading,
60rem, left-aligned). The Devices workspace and its panes are list-detail. */
.connect-page-view { flex: 1 1 auto; min-height: 0; overflow: auto; background: hsl(var(--background)); }
/* Foundation v2.7.1 sticks the Settings rail at the top bar's height + 1rem, for apps whose window scrolls under
the top bar. Connect's pages scroll inside .connect-page-view, which already starts below the top bar, so the
rail keeps the 1rem it had (deliberate exception; the save bar needs nothing, this view is its scroll container). */
.connect-page-view .acc-settings__nav { top: 1rem; }
.connect-page-view[hidden], .connect-workspace-grid[hidden] { display: none; }
.connect-page { display: flex; flex-direction: column; gap: 1rem; }
.connect-page[hidden] { display: none; }
/* Session history: the count sits under the table, only when there is one (CNX-05). */
.sessions-summary { justify-content: flex-start; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.sessions-summary:empty { display: none; }
.sessions-summary:has(> .acc-sr-only:only-child) { padding: 0; border-top: 0; min-height: 0; }
.connect-page .acc-page-header { margin-bottom: 0; flex-wrap: wrap; }
.connect-page .acc-page-title:focus { outline: none; }
.connect-page .acc-card > .acc-toolbar { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; gap: 0.75rem; }
.installer-name, .company-name { font-weight: 500; color: hsl(var(--foreground)); }
.connect-page .acc-table .is-actions { text-align: right; white-space: nowrap; }
/* Foundation v4.0.1 keeps its fluid-first-column rule to main areas from 1,600 px, so below that the columns
already share the width. Connect adds one thing there: headers and cells after the first may wrap even where a
Connect rule keeps them on one line (IT help's request, session status), so AI support and IT help stay inside
their card at 1100 px (5 and 14 px over otherwise). Actions stay on one line. */
@container acc-main (max-width: 99.99rem) {
.connect-page .acc-table :is(th, td):not(:first-child, .is-actions) { white-space: normal; }
}
.connect-page .acc-table__empty .acc-empty { padding-block: 1.5rem; }
.companies-search { width: min(18rem, 100%); }
.installers-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: hsl(var(--foreground)); }
.installer-name { display: block; }
.installer-where { display: block; }
/* Settings (design system v1.5 §7): the foundation's .acc-settings* classes; layout glue only.
One section shows at a time; the number fields keep the foundation's 16 rem control width. */
.acc-settings__section[hidden] { display: none; }
.acc-setting__control > .acc-setting__value .acc-skeleton { vertical-align: middle; }
/* Enrollment card: one device ID, under Advanced (C08). */
.info-advanced { margin-top: 0.5rem; }
.info-id-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.info-id-row .info-mono { overflow-wrap: anywhere; }
/* Notifications popover (X11): app filter and footer. */
.notification-filter { padding: 0.5rem 0.75rem 0; }
.notification-panel-footer { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 1rem; border-top: 1px solid hsl(var(--border)); }
.acc-toast__close { margin-left: 0; }
/* Coach marks: the host positions .acc-coachmark and the spotlight. */
.tour-spot { pointer-events: none; }
.acc-coachmark__footer .acc-row { gap: 0.375rem; }
/* --------------------------------------------------------------------------
Responsive
≥1280 groups rail · list · device pane, sidebar expanded by choice
1024–1279 sidebar collapsed by default
<1024 sidebar sheet (foundation), list → device navigation (breadcrumb back)
-------------------------------------------------------------------------- */
@media (max-width: 1279px) {
.screen-tab-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
/* The sheet keeps its labels while it slides closed (data-sidebar flips to collapsed first). */
.acc-shell .acc-nav-item { justify-content: flex-start; width: 100%; height: 2.25rem; margin: 0; padding: 0 0.625rem; }
.acc-shell .acc-nav-item__label { display: block; }
.acc-shell .acc-nav-item__badge { display: inline-flex; }
.acc-shell .acc-nav-item__badge[hidden] { display: none; }
.acc-shell .acc-sidebar__section-label { display: flex; }
.acc-shell .acc-org-card { justify-content: flex-start; padding: 0.625rem; }
.acc-shell .acc-org-card__text { display: flex; }
.acc-shell .acc-org-card__chev { display: block; }
.mobile-nav-backdrop { z-index: calc(var(--z-sheet) - 1); }
/* A closed sheet leaves the tab order (the foundation, v2.5.2, already drops its shadow). */
.acc-shell:not([data-mobile-nav="open"]) > .acc-sidebar { visibility: hidden; transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
/* list → detail: the workspace becomes one stacked column */
.connect-workspace-grid { display: flex; flex-direction: column; overflow-y: auto; height: auto; }
.sessions-pane { flex: 1 1 auto; overflow: visible; border-right: 0; }
.agents-list { overflow: visible; }
.workspace-main { overflow: visible; }
body.view-detail .sessions-pane { display: none; }
body.view-detail .workspace-main { display: block; }
/* CNX-10: below the list, the home keeps what a phone can't reach otherwise:
the technician app, the code-signing note and the next step (the setup
checklist is on Overview). The greeting repeats the list's title and the metric tiles
repeat the filter chips, so they stay desktop-only, as does the second
Add device (the list has one). */
body:not(.view-detail) .workspace-main { display: block; padding: 0 1rem 1rem; }
/* Both keep their height; the column scrolls instead of squeezing the list. */
body:not(.view-detail) .sessions-pane,
body:not(.view-detail) .workspace-main { flex: 0 0 auto; }
body:not(.view-detail) .welcome-stats-grid { display: none; }
.device-contextbar { position: sticky; top: 0; z-index: 2; }
.terminal-card { height: 24rem; }
.explorer-grid { max-height: none; }
}
@media (max-width: 767px) {
/* Icon buttons keep their tap size; the brand gives way first. */
.connect-topbar .acc-btn--icon, .connect-topbar .acc-search-trigger, .connect-topbar .acc-avatar { flex: 0 0 auto; }
.breadcrumb-link, .help-section .acc-btn--link { min-height: 2rem; }
/* Choice rows are the tap target for their 16 px native control. */
.acc-choice { min-height: 2rem; }
/* 32 px minimum tap height for the small buttons that sit in panels and dialogs. */
.notification-mark-all, .preferences-density .acc-segmented__item, .preferences-theme .acc-segmented__item { min-height: 2rem; height: 2rem; }
.control-safety-banner { align-items: flex-start; }
.control-safety-state { display: none; }
.sessions-header { padding: 0.75rem 1rem 0.625rem; }
.info-tab-layout { grid-template-columns: minmax(0, 1fr); }
.keyboard-grid { grid-template-columns: minmax(0, 1fr); }
.input-group-row { flex-wrap: wrap; }
.input-group-row .acc-btn { width: 100%; }
.workspace-header .acc-page-header__actions .acc-btn { flex: 1 1 auto; }
/* Stacked header: a row flex-basis would become a height. */
.workspace-header .acc-page-header__text,
.next-step-card__body { flex-basis: auto; }
.path-toolbar .acc-btn { flex: 1 1 auto; }
.acc-metric__value--text { font-size: var(--text-md); }
}
@media (max-width: 639px) {
/* Popover anchored to the bell overflows a 390px viewport; pin it to the viewport edges instead. */
.notification-panel { position: fixed; top: calc(var(--shell-topbar, 3.5rem) + 0.375rem); right: 0.5rem; left: 0.5rem; width: auto; }
.account-menu { width: min(17rem, calc(100vw - 1rem)); }
/* Design system: full-width primary actions below 640 px (QA G-25). */
.connect-page .acc-page-header__actions > .acc-btn--primary { flex: 1 1 100%; }
}
@media (max-width: 420px) {
.next-step-card { flex-wrap: wrap; }
.next-step-card__actions { align-self: stretch; }
.next-step-card__actions .acc-btn { flex: 1 1 auto; }
.agent-pill { max-width: 6.5rem; }
.agent-card { padding: 0.625rem 0.75rem; }
#connectionChipLabel { display: inline-block; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1920px) {
:root { --shell-list: 22rem; }
}
/* Reduced motion: the foundation collapses animation; stop the live rings. */
@media (prefers-reduced-motion: reduce) {
.status-dot, .suite-launch-progress-bar { animation: none !important; }
}
/* C02: the paused Add device entry carries its own "Coming soon" badge. */
.add-device-soon { margin-left: 0.25rem; }
.acc-btn[aria-disabled="true"] .add-device-soon { opacity: 1; }
/* C18: Add a device. The company field matches the suite select. */
.deploy-stepper { margin-bottom: 0.25rem; align-items: center; }
.deploy-stepper .acc-stepper__step { flex: 0 0 auto; }
.deploy-company-input { padding-right: 2.25rem; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.625rem center; }
.deploy-company-input::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.deploy-step[hidden] { display: none; }
.deploy-summary { margin: 0; }
.deploy-silent-command { display: block; padding: 0.5rem 0.75rem; overflow-x: auto; white-space: nowrap; }
.deploy-command-row { display: flex; align-items: center; gap: 0.5rem; }
.deploy-command-row .deploy-silent-command { flex: 1 1 0; width: 0; min-width: 0; } /* a long command scrolls; it never widens the dialog on a phone */
#deployReviewTitle:focus { outline: none; }
/* UX review 2026-10-18 chunk 2 (C13, C27, C05, C30) */
.agent-meta-row .agent-flag { overflow: visible; }
.info-duplicate-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.info-duplicate-note[hidden] { display: none; }
.info-duplicate-note__text { flex: 1 1 16rem; min-width: 0; }
.info-duplicate-note__actions { flex: 0 0 auto; }
/* Home tiles are filter shortcuts (Design System: every metric has a destination). */
/* v2.5: each tile is its own white group (the foundation restates button tiles), so no transparent reset here. */
button.welcome-stat-card { appearance: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out); }
button.welcome-stat-card:hover { background-color: hsl(var(--subtle)); }
button.welcome-stat-card:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
button.welcome-stat-card[aria-pressed="true"] { background: hsl(var(--accent)); box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
.getting-started__soon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.75rem 1.25rem; border-top: 1px solid hsl(var(--border)); background: hsl(var(--subtle)); font-size: var(--text-sm); color: hsl(var(--muted-foreground)); }
.getting-started__soon ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; }
/* ==========================================================================
Phone layout (mobile review 2026-10-19, CNX-MOB-01 to CNX-MOB-04).
Design system "Below 640 px": single column, left-sheet nav, full-width
primary actions, card rows instead of wide tables, 44 px touch targets.
Everything below is scoped to <1024 / <640 px or touch-only media queries,
so the desktop layout is unchanged.
========================================================================== */
/* Top bar: the navigation toggle keeps the panel-left icon at every width
(Atlas §2.1); below 1024 px it opens the sidebar sheet. */
.mobile-nav-close { display: none; }
/* Devices "More actions" menu: fixed below its "…" (app.js places it). */
.devices-more-menu, .device-more-menu, .support-row-menu { position: fixed; width: 15rem; }
/* 4.5:1 on the card at 12 px (the foundation success token measures 4.46:1). */
.agent-when[data-tone="success"] { color: color-mix(in srgb, hsl(var(--success)) 88%, hsl(var(--foreground))); }
@media (max-width: 1023px) {
/* The navigation sheet (full height, over the top bar) closes with its own X, above the app grid.
One back path on the device page: the breadcrumb (CNX-MOB-04). */
.mobile-nav-close { display: flex; margin: -0.5rem -0.25rem 0.25rem auto; color: hsl(var(--sidebar-muted)); }
.mobile-nav-close:hover { background: hsl(var(--sidebar-hover)); color: hsl(var(--sidebar-foreground)); }
}
@media (max-width: 639px) {
/* 44 px controls (buttons, icon buttons, inputs, selects, chips, tabs). */
:root { --control-h: 2.75rem; --control-h-sm: 2.75rem; --control-h-lg: 2.75rem; }
.acc-input, .acc-select, .acc-textarea { font-size: 1rem; }
.acc-shell .acc-nav-item { height: 2.75rem; min-height: 2.75rem; }
.acc-shell .acc-sidebar__apps .acc-apptab { min-height: 2.75rem; }
.acc-tab, .workspace-tabs .acc-tab { min-height: 2.75rem; }
.acc-filter-chip { min-width: 2.75rem; height: 2.25rem; padding: 0 0.875rem; justify-content: center; }
.acc-segmented__item, .notification-mark-all, .preferences-density .acc-segmented__item, .preferences-theme .acc-segmented__item { min-height: 2.75rem; height: auto; }
.breadcrumb-link, .help-section .acc-btn--link, .acc-btn--link { min-height: 2.75rem; }
.acc-menu__item { min-height: 2.75rem; }
.acc-choice { min-height: 2.75rem; }
.acc-dialog__close, .acc-sheet__close { width: 2.75rem; height: 2.75rem; }
details > summary { min-height: 2.75rem; display: flex; align-items: center; }
/* The 36x20 switch keeps its look; its hit area grows to 44 px. */
.acc-switch::before { content: ""; position: absolute; inset: -0.75rem -0.25rem; }
.connect-topbar { gap: 0.125rem; padding: 0 0.5rem; }
.connect-topbar .acc-suite-brand { min-width: 0; margin-right: 0; padding-right: 0.25rem; }
/* Organization menu: a bottom sheet over a scrim. */
.org-menu:not([hidden]) {
left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
width: 100% !important; max-width: none !important; max-height: 75dvh; overflow-y: auto;
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: acc-slide-in-up var(--dur-slow) var(--ease-out) both;
}
body[data-org-menu="open"]::after { content: ""; position: fixed; inset: 0; z-index: calc(var(--z-popover) - 1); background: hsl(222 44% 11% / 0.55); }
/* Search: a bottom sheet like Hub and Manage, not a top sheet. */
.command-dialog { place-items: end center; align-items: end; padding: 0; }
.command-dialog .acc-command { width: 100%; max-height: 85dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Device rows: the account and company wrap to two lines instead of clipping (CNX-MOB-01). */
.agent-card { align-items: flex-start; }
.agent-card .agent-status { padding-top: 0.375rem; }
.agent-meta-row { align-items: flex-start; }
.agent-meta-row svg { margin-top: 0.125rem; }
.agent-meta-row span { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agent-when { padding-top: 0.25rem; }
/* Device page (CNX-MOB-03): label/value pairs stack instead of a 150 px column;
an unavailable Connect drops below the button that works. */
.acc-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
.acc-kv dt { margin-top: 0.625rem; font-size: var(--text-xs); }
.acc-kv dt:first-child { margin-top: 0; }
.acc-kv--rows > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
.workspace-header .acc-page-header__actions { flex-wrap: wrap; }
.workspace-header .acc-page-header__actions > #remoteStart:disabled { order: 2; }
.workspace-header .acc-page-header__actions > .acc-btn { flex: 1 1 100%; }
.device-contextbar .breadcrumb-link { padding-inline: 0.25rem; }
/* Wide tables become card rows (Sessions, Installers, Companies & sites). */
.connect-card-table, .connect-card-table tbody, .connect-card-table tr, .connect-card-table td { display: block; width: 100%; }
.connect-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.acc-table-wrap:has(> .connect-card-table) { overflow: visible; }
.connect-card-table tr { padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.connect-card-table tr:last-child { border-bottom: 0; }
.connect-card-table td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 0; height: auto; padding: 0.1875rem 0; border: 0; white-space: normal; text-align: right; overflow-wrap: anywhere; }
.connect-card-table td[data-label]::before { content: attr(data-label); flex: 0 0 auto; color: hsl(var(--muted-foreground)); font-size: var(--text-sm); text-align: left; }
.connect-card-table td:first-child { display: block; padding-bottom: 0.375rem; text-align: left; font-weight: 600; }
.connect-card-table td:first-child .acc-btn--link { max-width: 100%; height: auto; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.connect-card-table td.is-session-status { flex-wrap: wrap; justify-content: flex-start; gap: 0.375rem; text-align: left; }
.connect-card-table td.is-session-status::before { flex-basis: 100%; }
.connect-card-table td:first-child::before { content: none; }
.connect-card-table td:first-child .acc-compact { display: block; font-weight: 400; }
.connect-card-table td[colspan] { display: block; text-align: left; }
/* Empty and error rows keep the empty-state type: the first-cell bold is for a row's name. */
.connect-card-table .acc-table__empty td { padding: 0; font-weight: 400; text-align: center; }
.connect-card-table td.is-actions { display: block; width: 100%; padding-top: 0.5rem; text-align: left; white-space: normal; }
.connect-card-table td.is-actions:empty { display: none; }
.connect-card-table td.is-actions .acc-btn { width: 100%; opacity: 1; }
.connect-card-table td.is-notes { display: block; text-align: left; }
.connect-card-table td.is-notes::before { display: block; margin-bottom: 0.25rem; }
.installers-toolbar { flex-wrap: wrap; }
.companies-search { flex: 1 1 100%; }
/* Toasts sit above the home bar and span the screen width. */
.acc-toaster { left: 0.5rem; right: 0.5rem; bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); width: auto; }
/* While a bottom sheet is open (search, organizations, a dialog) toasts wait instead of covering it. */
body:has(#commandPalette:not([hidden])) .acc-toaster,
body[data-org-menu="open"] .acc-toaster,
body:has(.connect-dialog:not([hidden])) .acc-toaster { visibility: hidden; }
}
/* Keyboard hints are for keyboards: touch screens without hover hide them
(search sheet legend, Esc key cap, Ctrl K, the Help shortcut list). */
@media (hover: none) and (pointer: coarse) {
.acc-command__footer,
.acc-command__input > .acc-kbd,
.acc-search-trigger .acc-kbd-combo,
.help-shortcuts-section { display: none; }
}
/* The notification panel is a light popover that lives inside the navy top bar;
its ghost buttons use the popover colors, not the top-bar ghost colors. */
.acc-topbar .acc-popover .acc-btn--ghost { color: hsl(var(--foreground)); }
.acc-topbar .acc-popover .acc-btn--ghost:hover:not(:disabled) { background: hsl(var(--subtle)); color: hsl(var(--foreground)); }
/* QA 2026-10-21 (keyboard): visible focus where the foundation shows none
(scrollable regions, a focused heading). */
.deploy-silent-command:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
#deployReviewTitle:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 4px; border-radius: var(--radius-sm); }
/* Deliberate exception to foundation v2.1 (.acc-table .is-actions .acc-btn
{ opacity: 0.7 }): Connect's row actions are text buttons (Revoke), and the
dimmed red is 3.4:1 against the row, below WCAG AA 4.5:1 in both themes.
Shown at full strength until the foundation drops or changes the dim. */
.acc-table .is-actions .acc-btn { opacity: 1; }
/* Help panel: links back to the products site and Hub (suite audit S8). */
.help-suite-links a, .help-support a { color: hsl(var(--primary)); text-underline-offset: 2px; }
.help-suite-links a:hover, .help-support a:hover { color: hsl(var(--primary-hover)); }
/* A link inside a sentence is underlined, not told apart by color alone (QA X-09). */
.help-support a { text-decoration: underline; }
/* Preview demo mode (preview-demo.js, *.workers.dev only): a slim, fixed
pill so reviewers always know the data is sample data. It sits under
scrims, sheets and dialogs so it never covers their buttons (QA G-11). */
.preview-demo-banner {
position: fixed; left: 50%; bottom: max(0.75rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
z-index: calc(var(--z-overlay) - 1); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.5rem;
max-width: calc(100vw - 2rem); padding: 0.375rem 0.875rem; border-radius: 999px;
background: hsl(var(--suitebar)); color: hsl(var(--suitebar-foreground)); box-shadow: var(--shadow-md);
font-size: var(--text-xs); line-height: 1.3; text-align: center; pointer-events: none;
}
.preview-demo-banner span { color: hsl(var(--suitebar-muted)); }
@media (max-width: 599px) { .preview-demo-banner span { display: none; } }
/* 404 page (src/404.html): the suite top bar over one centred empty state (QA G-17). */
body.not-found-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: hsl(var(--background)); }
.not-found-page__main { flex: 1; display: grid; place-items: center; padding: 1.5rem 1rem; }
.not-found-page__card { width: 100%; max-width: 32rem; }
.not-found-page .acc-empty__title { margin: 0; font-size: var(--text-lg); }
.not-found-page .acc-empty__desc { margin: 0; }
/* ==========================================================================
v2.5 Inset layout (UX wave 3, X-08). Ported from the UI samples gallery
(Accred UI Samples site/assets/directions/inset-apps/connect.css, ebd5705),
unscoped, with the gallery's --inset-* variables mapped to the v2.5 tokens
(fill, thumb, primary-fill, tile-glyph, icon-chevron, border). Two gallery
rules are not ported because they break the v2.4 selection rule: the blue
device name on the selected row, and the solid blue current settings item
(it keeps the accent tint). PUS v1.1 section 0, "Every app (layout)".
========================================================================== */
/* Device console: sidebar ------------------------------------------------------
A source-list sidebar: large title, search, a segmented All / Online /
Offline control with the two special views as small chips under it, one
Settings-style "Location" field row, then device rows that read like Mail:
status dot and name on the first line with the status pill and chevron
beside them, the account and client on a full-width second line. */
.sessions-pane { background: hsl(var(--card)); border-right-color: hsl(var(--border)); }
.sessions-header { gap: 0.625rem; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); }
.sessions-title-row { min-height: 2rem; }
.sessions-title-row .acc-card-title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; }
.sessions-title-row .acc-btn--icon.acc-btn--sm { width: 2rem; height: 2rem; border-radius: 0.5rem; }
.sessions-header .search-container > .acc-input { height: 2rem; border-radius: 0.5rem; font-size: var(--text-sm); background: transparent; box-shadow: inset 0 0 0 1px hsl(var(--border)); }
.sessions-header .search-container > .acc-input:hover:not(:disabled, :focus) { box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
.sessions-header .search-container > svg { width: 0.9375rem; height: 0.9375rem; left: 0.75rem; }
.sessions-header .search-container > .acc-input { padding-left: 2.125rem; }
/* Status filters: the foundation's .acc-filter-chip as is (B-12, 2026-11-06; the
primary-soft pill exception is retired). This rule only lays the row out. */
.device-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
/* Location and group: a quiet label beside a hairline select, as on the tour. */
.list-filter-row { gap: 0.5rem 0.75rem; min-height: 0; }
.list-filter-field { height: 2rem; gap: 0.625rem; }
.list-filter-field > .acc-label { flex: 0 0 auto; min-width: 3.75rem; font-size: var(--text-sm); font-weight: 400; color: hsl(var(--muted-foreground)); }
.list-filter-field .acc-select {
height: 2rem; border-radius: 0.5rem; background-color: transparent; box-shadow: inset 0 0 0 1px hsl(var(--border));
color: hsl(var(--foreground)); font-size: var(--text-sm);
}
.list-filter-field .acc-select:hover:not(:disabled) { box-shadow: inset 0 0 0 1px hsl(var(--border-strong)); }
:is(.sessions-header .search-container > .acc-input, .list-filter-field .acc-select):focus-visible { background-color: hsl(var(--card)); box-shadow: inset 0 0 0 1.5px hsl(var(--ring)), 0 0 0 3px hsl(var(--ring-soft)); outline: none; }
.list-filter-summary { font-size: var(--text-xs); color: hsl(var(--muted-foreground)); }
.list-filter-summary:empty { display: none; }
.list-filter-row .acc-btn--link { font-size: var(--text-sm); }
.list-filter-row:not(:has(.list-filter-field:not([hidden]), .list-filter-summary:not(:empty), .acc-btn)) { display: none; }
/* Device rows. */
.agents-list { padding: 0.375rem 0; }
.agent-card {
--acc-list-sep: 2.25rem;
display: grid; grid-template-columns: 0.625rem minmax(0, 1fr) auto auto; align-items: center; column-gap: 0.75rem; row-gap: 0.1875rem;
min-height: 3.5rem; margin: 0 0.5rem; padding: 0.5625rem 0.75rem 0.5625rem 0.875rem; border-radius: 0.625rem;
width: calc(100% - 1rem);
}
.agent-card > .agent-status { grid-column: 1; grid-row: 1; width: 0.625rem; }
.agent-card > .agent-details { display: contents; }
.agent-card .agent-name-row { grid-column: 2; grid-row: 1; }
.agent-card .agent-meta-row { grid-column: 2 / -1; grid-row: 2; min-width: 0; }
.agent-card > .agent-when { grid-column: 3; grid-row: 1; }
.agent-card::after { grid-column: 4; grid-row: 1; margin-left: 0; }
.agent-name { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.005em; }
.agent-meta-row { gap: 0.3125rem; font-size: var(--text-sm); line-height: 1.35; }
.agent-meta-row svg { width: 0.75rem; height: 0.75rem; margin-top: 0 !important; }
.status-dot { width: 0.5625rem; height: 0.5625rem; box-shadow: none; }
.status-dot[data-state="online"] { box-shadow: 0 0 0 3px hsl(var(--success) / 0.16); }
.status-dot[data-state="enrolled"] { box-shadow: inset 0 0 0 1.5px hsl(var(--control-border)); }
/* Status pill: slim tinted capsule, right-aligned on the name line. */
.agent-when {
display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.4375rem; border-radius: 0.375rem;
background: hsl(var(--fill)); color: hsl(var(--foreground)); font-size: 0.75rem; font-weight: 500;
}
.agent-when[data-tone="success"] { background: hsl(var(--success-soft)); color: color-mix(in srgb, hsl(var(--success)) 80%, hsl(var(--foreground))); }
.agent-when[data-tone="info"] { background: hsl(var(--info-soft)); color: hsl(var(--info)); }
.agent-flag, .badge-tag {
height: 1.125rem; padding: 0 0.375rem; border: 0; border-radius: 0.3125rem;
background: hsl(var(--fill)); color: hsl(var(--foreground)); font-size: var(--text-xs, 0.75rem); font-weight: 500;
}
/* Rounded hover and selection; the separators around them step aside. */
.agent-card:hover { background-color: hsl(var(--subtle)); }
.agent-card:is([aria-selected="true"], .active) { background-color: hsl(var(--accent)); }
.agent-card:is(:hover, [aria-selected="true"], .active),
.agent-card:has(+ .agent-card:is(:hover, [aria-selected="true"], .active)) { background-image: none; }
.agent-card:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; border-radius: 0.625rem; }
/* List states. */
.agents-empty .acc-empty__icon { background: none; box-shadow: none; }
.agents-empty.is-error .acc-empty__icon { color: hsl(var(--destructive)); }
.agents-empty.is-permission .acc-empty__icon { color: hsl(var(--warning)); }
.agents-empty .acc-details { max-width: 100%; }
/* Device console: home workspace --------------------------------------------
One column (home layout fix 2026-11-03): the status card, the Getting started
checklist and the count tiles stack in DOM order and share one width, fluid
like every Quiet page (foundation v3.3.0). The old two-column pairing put the tiles
in the right column of a third row whenever the checklist sat between them. */
.workspace-main:has(> .welcome-screen) { container: connect-home / inline-size; }
.welcome-screen {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start;
width: 100%;
}
.welcome-screen > * { width: 100%; max-width: none; margin: 0; }
/* Status card: icon tile, title, then the action. */
.next-step-card {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: 0.875rem;
padding: 1.125rem 1.25rem; border-radius: var(--radius-lg); background: hsl(var(--card));
}
.next-step-card__icon {
align-self: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem;
background: hsl(var(--primary-fill)); color: hsl(var(--tile-glyph));
}
.next-step-card__icon svg { width: 1.25rem; height: 1.25rem; }
.next-step-card[data-tone="success"] .next-step-card__icon { background: hsl(var(--success)); color: hsl(var(--tile-glyph)); }
.next-step-card[data-tone="warning"] .next-step-card__icon { background: hsl(var(--warning)); color: hsl(var(--tile-glyph)); }
.next-step-card[data-tone="neutral"] .next-step-card__icon { background: hsl(var(--muted-foreground)); color: hsl(var(--tile-glyph)); }
.next-step-card__body { gap: 0.1875rem; align-self: center; }
.next-step-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; min-width: 0; }
.next-step-card__head > .acc-badge { flex: 0 0 auto; cursor: default; }
.next-step-card__title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.next-step-card__desc { max-width: 60ch; font-size: var(--text-sm); line-height: 1.45; }
.next-step-card__actions { align-self: center; }
.next-step-card__actions .acc-btn { height: var(--control-h-sm); padding: 0 1rem; border-radius: 0.5625rem; font-size: var(--text-sm); }
/* Count tiles: one row of four (two by two when the column is narrow); a
drawn chevron says each one opens a filter. Label and number only. */
.welcome-stats-grid { overflow: visible; }
.welcome-stats-grid .acc-metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
button.welcome-stat-card { position: relative; padding: 0.875rem 2.25rem 0.875rem 1rem; border-radius: var(--radius-lg); }
button.welcome-stat-card::after {
content: ""; position: absolute; top: 1.0625rem; right: 1rem; width: 0.4375rem; height: 0.75rem;
background: hsl(var(--control-border));
-webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat;
}
button.welcome-stat-card:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
button.welcome-stat-card[aria-pressed="true"] { background: hsl(var(--accent)); box-shadow: none; }
button.welcome-stat-card[aria-pressed="true"] :is(.acc-metric__label, .acc-metric__meta) { color: hsl(var(--accent-foreground)); }
button.welcome-stat-card[aria-pressed="true"]::after { background: hsl(var(--accent-foreground)); }
button.welcome-stat-card .acc-metric__meta[hidden] { display: none; }
/* Getting started is the foundation's guided stepper (.acc-checklist--guided, design system 3.0 §6.4); Overview keeps only its local bits. */
@container connect-home (max-width: 48rem) {
.welcome-stats-grid .acc-metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Device page ------------------------------------------------------------------ */
/* Breadcrumb sits on the ground at the top of the content column. */
.device-contextbar {
width: 100%; min-height: 0;
padding: 1.125rem 2rem 0; border-bottom: 0; background: transparent;
}
.device-contextbar .acc-breadcrumbs { font-size: var(--text-base); }
.device-contextbar .breadcrumb-link { height: auto; font-size: var(--text-base); color: hsl(var(--accent-foreground)); font-weight: 500; }
.device-contextbar .acc-breadcrumbs__sep { color: hsl(var(--control-border)); }
.workspace-page {
width: 100%; gap: 1.25rem;
padding: 1.25rem 2rem 3rem;
}
/* Title and actions share a row: the breadcrumb above is the nav row. */
.workspace-header { margin-bottom: 0; row-gap: 0.25rem; }
.workspace-header > .acc-page-header__text > * { grid-column: 1; }
.workspace-header > .acc-page-header__text > .device-title-row { grid-row: 1; }
.workspace-header > .acc-page-header__actions { grid-row: 1; align-self: center; margin: 0; }
.device-title-row { gap: 0.625rem; }
/* Tabs: one segmented control; "Early test" and "Coming soon" stay as small
muted notes inside the segment. */
.workspace-tabs { gap: 0.125rem; padding: 0.125rem; border-bottom: 0; overflow-x: auto; }
.workspace-tabs .acc-tab { gap: 0.375rem; }
.workspace-tabs .acc-tab > svg { width: 0.9375rem; height: 0.9375rem; }
.workspace-tabs .acc-tab:disabled { color: hsl(var(--muted-foreground)); }
.workspace-tabs .acc-tab:disabled > svg { opacity: 1; }
.tab-reason { padding: 0 0.375rem; border-radius: 0.3125rem; background: hsl(var(--fill)); font-size: var(--text-xs); line-height: 1.125rem; }
.info-tab-layout {
grid-template-columns: repeat(auto-fill, minmax(min(100%, max(20rem, calc((100% - 1.25rem) / 2))), 1fr));
gap: 1.5rem 1.25rem;
}
.info-grid { grid-template-columns: minmax(8rem, 10.5rem) minmax(0, 1fr); gap: 0; font-size: var(--text-base); }
.info-grid > dd { padding-left: 1rem; }
.info-grid > :is(dt, dd) { padding: 0.5625rem 0; box-shadow: inset 0 -1px 0 hsl(var(--border)); }
.info-grid > :is(dt, dd):nth-last-child(-n + 2) { box-shadow: none; }
.info-grid > dt { color: hsl(var(--muted-foreground)); }
.info-grid > dd { font-weight: 500; }
.info-card > .acc-card__body { padding-block: 0.375rem; }
.info-card > .acc-card__body.acc-stack { gap: 0.5rem; }
.info-card > .acc-card__body:has(> .acc-details:last-child, > .acc-btn:last-child) { padding-bottom: 1rem; }
.info-policy-row { align-items: center; }
.info-policy-row > .acc-btn { height: 1.75rem; padding: 0 0.5rem; margin: -0.25rem 0; }
.info-term { border-bottom: 1px dotted hsl(var(--control-border)); }
.info-advanced { margin-top: 0.25rem; }
.info-advanced .info-grid > :is(dt, dd) { box-shadow: none; padding: 0.25rem 0; }
.info-duplicate-note { border-radius: var(--radius-lg); }
/* Pages: Clients locations, Installers, Session history, Settings ------------ */
.connect-page { width: 100%; gap: 1.25rem; }
.connect-page .acc-page-header { margin-bottom: 0.25rem; }
.connect-page .acc-card > .acc-toolbar { min-height: 3.25rem; padding: 0.625rem 1rem; gap: 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--border)); }
.connect-page .acc-toolbar .acc-input--sm { height: 2rem; border-radius: 0.5rem; font-size: var(--text-sm); }
.connect-page .acc-toolbar .acc-btn--link { font-size: var(--text-sm); }
.companies-search { width: min(20rem, 100%); }
.installers-toggle { gap: 0.625rem; }
.installers-toggle .acc-switch { flex: none; }
/* Table cells: names semibold, meta on one muted line, statuses on one line. */
.connect-card-table .company-name, .installer-name { font-weight: 600; }
.installer-where { margin-top: 0.0625rem; font-size: var(--text-sm); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.connect-card-table td:has(> .acc-badge) { white-space: nowrap; }
.connect-card-table td.is-session-status { white-space: nowrap; }
.connect-card-table td.is-session-status > * { vertical-align: middle; }
.connect-card-table td.is-session-status > .acc-badge + .acc-badge { margin-left: 0.25rem; }
.connect-page .acc-table .is-actions .acc-btn--sm { height: 1.875rem; padding: 0 0.75rem; }
.connect-page .acc-table .is-actions .acc-btn--link { height: auto; }
.connect-page .acc-table__empty .acc-empty { padding-block: 2.5rem; }
.session-notes { justify-items: start; gap: 0.25rem; }
.session-notes .acc-details { width: auto; min-width: 9rem; max-width: 22rem; border-radius: 0.5rem; }
.session-notes .acc-details > summary { min-height: 1.875rem; padding: 0.25rem 0.625rem; font-size: var(--text-sm); }
/* Settings: the Security card's fact list (not settings, so a list, not rows). */
.settings-security.acc-kv:not(.acc-kv--rows) { grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: 0; }
.settings-security.acc-kv:not(.acc-kv--rows) > dd { padding-left: 1rem; }
.settings-security.acc-kv:not(.acc-kv--rows) > :is(dt, dd) { padding: 0.5625rem 0; box-shadow: inset 0 -1px 0 hsl(var(--border)); }
.settings-security.acc-kv:not(.acc-kv--rows) > :is(dt, dd):nth-last-child(-n + 2) { box-shadow: none; }
.settings-security.acc-kv:not(.acc-kv--rows) > dt { color: hsl(var(--muted-foreground)); }
/* Notifications popover. */
.notification-panel-header { border-bottom-color: hsl(var(--border)); }
.notification-list { padding: 0.375rem; }
.notification-item { border-radius: 0.625rem; }
.notification-item:hover, .notification-item:focus-visible { background: hsl(var(--subtle)); color: inherit; }
.notification-panel-footer { border-top-color: hsl(var(--border)); }
.acc-tabs.notification-filter { display: flex; width: auto; margin: 0.625rem 0.75rem 0.125rem; }
.notification-filter > .acc-tab { flex: 1 1 0; }
.notification-panel-footer { padding: 0.375rem 1rem; }
.notification-panel-footer .acc-btn--link { min-height: 2rem; font-size: var(--text-sm); }
/* Dialogs: Add device and confirmations ----------------------------------------- */
/* A banner inside a dialog is a grey fill, not a white group on white. */
.acc-dialog__panel :is(.acc-banner, .acc-scope) { background: hsl(var(--fill)); }
.acc-dialog__panel .acc-banner { padding: 0.75rem 0.875rem; }
.acc-dialog__panel .acc-banner > svg { padding: 0.3125rem; width: 0.9375rem; height: 0.9375rem; }
.deploy-stepper { gap: 0.75rem; }
.deploy-stepper .acc-stepper__num { border-color: hsl(var(--control-border)); }
.installer-format-options { gap: 0; border-radius: var(--radius-md); background: hsl(var(--fill)); overflow: clip; }
.installer-format-options > .acc-choice { padding: 0.625rem 0.875rem; }
.installer-format-options > .acc-choice + .acc-choice { box-shadow: inset 0 1px 0 hsl(var(--border)); }
.installer-summary-box { border-radius: var(--radius-md); }
.deploy-silent-command { border-radius: 0.5rem; }
/* Links inside a sentence keep the sentence's size. */
:is(p, .acc-compact) > .acc-btn--link { height: auto; font-size: inherit; vertical-align: baseline; }
@media (max-width: 1023px) {
.device-contextbar { padding: 0.75rem 1rem; background: hsl(var(--background)); }
.workspace-page { padding: 1rem 1rem 2.5rem; }
}
@media (max-width: 639px) {
/* Touch sizes: 44px search and location (filter chips: the 639px rule above). */
.sessions-header .search-container > .acc-input { height: 2.75rem; font-size: 1rem; }
.list-filter-field, .list-filter-field .acc-select { height: 2.75rem; }
.list-filter-field .acc-select { font-size: 1rem; }
.agent-card { align-items: center; }
.agent-card .agent-status { padding-top: 0; }
.agent-when { padding-top: 0; }
.agent-meta-row { align-items: flex-start; }
.agent-meta-row svg { margin-top: 0.1875rem !important; }
.workspace-header > .acc-page-header__text > .device-title-row { grid-row: auto; }
.workspace-header > .acc-page-header__actions { grid-row: auto; }
.info-grid { grid-template-columns: minmax(0, 1fr); }
.info-grid > dt { padding-bottom: 0; box-shadow: none; font-size: var(--text-sm); }
.info-grid > dd { padding-top: 0.125rem; }
.info-grid > dt:nth-last-child(2) { box-shadow: none; }
.settings-security.acc-kv:not(.acc-kv--rows) { grid-template-columns: minmax(0, 1fr); }
.settings-security.acc-kv:not(.acc-kv--rows) > dt { padding-bottom: 0; box-shadow: none; }
.session-notes .acc-details { max-width: 100%; }
/* Card rows (Installers, Sessions, Companies): one 16px inset, Settings-height
label rows, and no separator doubled against the card edge. */
.connect-card-table tr { padding: 0.75rem 1rem; border-bottom: 0; box-shadow: inset 0 -1px 0 hsl(var(--border)); }
.connect-card-table tr:last-child { box-shadow: none; }
.connect-card-table td { height: auto; min-height: 2.75rem; padding: 0.5rem 0; align-items: center; }
.connect-card-table td:first-child { min-height: 0; padding: 0 0 0.625rem; background-size: 100% 1px; }
.connect-card-table td:last-child,
.connect-card-table td:has(+ td.is-actions:empty) { background-image: none; }
.connect-card-table td.is-actions { min-height: 0; padding: 0.625rem 0 0; }
.connect-card-table .acc-table__empty td { min-height: 0; padding: 0; background-image: none; }
/* The 44px name link keeps its tap area without padding the card top. */
.connect-card-table td:first-child > .acc-btn--link { margin-block: -0.5rem; }
/* A wrapped AI request title has a date under it: keep the top tap area, no pull into the date. */
.connect-card-table td.ai-support-request > .ai-support-open { margin-bottom: 0; }
/* Status badges sit right, like every other value; they still wrap if long. */
.connect-card-table td.is-session-status { justify-content: flex-end; }
.connect-card-table td.is-session-status::before { flex-basis: auto; margin-right: auto; }
}
/* v2.5 walk (UX wave 3): what the Inset port left to the app. */
@media (min-width: 640px) {
/* The 15 px body widened Session history: dates and lengths stay on one line; a long device name wraps instead. */
#pageSessions .acc-table td:nth-child(3), #pageSessions .acc-table td:nth-child(4) { white-space: nowrap; }
#pageSessions .acc-table td:first-child .acc-btn--link { height: auto; white-space: normal; text-align: left; overflow-wrap: anywhere; }
}
@media (max-width: 639px) {
/* Status card on a phone: the action drops under the text instead of squeezing it to one word a line. */
.next-step-card { grid-template-columns: auto minmax(0, 1fr); }
.next-step-card__actions { grid-column: 1 / -1; }
.next-step-card__actions .acc-btn { flex: 1 1 auto; }
/* An installer's client and location wrap on a phone (the one-line rule is for the desktop table). */
.installer-where { white-space: normal; }
}
/* Shell audit (UX wave 3): sidebar nav items here are