/* ============================================================
   Hque global overrides
   --------------------------------------------------------------
   PR 2 of theme refresh. Replaces the previous app.css.
   Three jobs:
   1. Set the system font stack globally (the portal moves off
      Space Grotesk; the marketing site keeps its own fonts).
   2. Flatten all MudBlazor surfaces (no shadows, 1px borders,
      6px radius, sentence-case buttons, GitHub-style focus ring).
   3. Provide the heading scale and the link/button language so
      *.razor.css files in PR 3 can drop their per-component
      overrides without losing visual coherence.
   ============================================================ */

/* Full-viewport overlay used by App.razor's <Authorizing> fragment on
   AuthorizeRouteView. Lives in global CSS (not App.razor.css scoped CSS)
   because Blazor does NOT add the b-XXX scope attribute to elements
   rendered by child components from a RenderFragment parameter -- the
   <Authorizing> div is rendered inside AuthorizeRouteView and never
   matches the scoped attribute selector.

   AuthorizeRouteView applies the destination route's layout to ALL
   branches (Authorized / NotAuthorized / Authorizing), so a protected
   route would otherwise flash its authenticated chrome (topbar at
   z-index 200, profile menu) at an unauthenticated user during the
   auth-state-resolving window. position:fixed + max int z-index covers
   that chrome until auth resolves. */
.auth-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background, #fff);
    z-index: 2147483647;
}

/* --- Font stack --------------------------------------------- */
html, body, .mud-typography, .mud-input, .mud-button-root,
.mud-table, .mud-list-item, .mud-menu-item, .mud-tooltip,
.mud-dialog, .mud-tab {
    font-family: var(--font-sans);
}

.mono, code, kbd, pre, samp,
.mud-input--mono input {
    font-family: var(--font-mono);
}

/* --- Heading scale ------------------------------------------ */
h1, .h1 { font-size: var(--text-4xl); font-weight: 500; line-height: 1.3; color: var(--fg-default); margin: 0 0 12px; }
h2, .h2 { font-size: var(--text-3xl); font-weight: 500; line-height: 1.3; color: var(--fg-default); margin: 0 0 10px; }
h3, .h3 { font-size: var(--text-xl); font-weight: 500; line-height: 1.4; color: var(--fg-default); margin: 0 0 8px; }
h4, .h4 { font-size: var(--text-lg); font-weight: 500; line-height: 1.4; color: var(--fg-default); margin: 0 0 6px; }
h5, .h5 { font-size: var(--text-md); font-weight: 500; line-height: 1.5; color: var(--fg-default); margin: 0 0 4px; }

/* Override the legacy serif heading classes so any *.razor.css
   still referencing them gets the new sans treatment. PR 3
   removes the class usages. */
.org-title, .tl-title, .te-title, .brand-headline, .dialog-title, .tif-title {
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: var(--text-3xl) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
}

/* --- Links -------------------------------------------------- */
a, .mud-link {
    color: var(--accent-fg);
    text-decoration: none;
}
a:hover, .mud-link:hover {
    text-decoration: underline;
}

/* --- Focus ring (the GitHub signature) ---------------------- */
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

/* ============================================================
   Flatten MudBlazor surfaces
   ============================================================ */

.mud-paper, .mud-card, .mud-dialog, .mud-popover, .mud-menu-popover,
.mud-table, .mud-tabs, .mud-appbar, .mud-drawer, .mud-tooltip,
.mud-snackbar, .mud-expansion-panels {
    box-shadow: none !important;
}

.mud-paper, .mud-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.mud-popover, .mud-menu-popover {
    background: var(--canvas-overlay);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.mud-dialog {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

/* --- Buttons ------------------------------------------------ */
.mud-button-root {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    transition: background-color 80ms ease, border-color 80ms ease;
}

.mud-button-outlined {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--fg-default);
}
.mud-button-outlined:hover {
    background: var(--canvas-subtle);
    border-color: var(--border-default);
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--accent-fg);
    color: var(--fg-on-emphasis);
    border: 1px solid var(--accent-fg);
}
.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--accent-emphasis);
    border-color: var(--accent-emphasis);
}

.mud-button-filled, .mud-fab {
    box-shadow: none !important;
}
.mud-button-filled:hover, .mud-fab:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* --- Inputs (outlined field skin) --------------------------
   Filled-subtle, rounded outlined inputs, site-wide. Promoted from the
   per-page ::deep copies (TableItemForm etc.) so every field matches. */
.mud-input.mud-input-outlined {
    background: var(--canvas-subtle) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--fg-default) !important;
}
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-muted) !important;
    border-radius: var(--radius-lg) !important;
}
.mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--border-muted) !important;
}
.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-fg) !important;
    box-shadow: var(--focus-ring);
}
.mud-input.mud-input-outlined input::placeholder,
.mud-input.mud-input-outlined textarea::placeholder {
    color: var(--fg-muted) !important;
    opacity: 0.6 !important;
}
.mud-input input, .mud-input textarea, .mud-input-slot {
    color: var(--fg-default);
}
.mud-input-label {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}
/* Input adornments (clear button, start/end icons) */
.mud-input-adornment .mud-icon-button { color: var(--fg-muted) !important; opacity: 0.6; }
.mud-input-adornment .mud-icon-button:hover { opacity: 1; }
.mud-input-adornment-start, .mud-input-adornment-end { color: var(--fg-muted) !important; }
/* Validation */
.mud-input-error .mud-input-outlined-border { border-color: var(--danger-fg) !important; }
.mud-input-helper-text.mud-input-error { color: var(--danger-fg) !important; opacity: 1; }
.mud-alert-filled-success {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--success-fg) !important;
}

/* --- Tabs --------------------------------------------------- */
.mud-tab {
    text-transform: none !important;
    font-weight: 400 !important;
    color: var(--fg-muted) !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    margin-right: 40px !important;
}
.mud-tab.mud-tab-active {
    color: var(--fg-default) !important;
    font-weight: 500 !important;
}
.mud-tabs-toolbar-content .mud-tab-slider {
    background: var(--fg-default) !important;
    height: 2px !important;
}

/* --- Tables ------------------------------------------------- */
.mud-table {
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mud-table-cell {
    border-color: var(--border-muted);
    color: var(--fg-default);
    padding: 8px 12px;
}
.mud-table-head .mud-table-cell {
    background: var(--canvas-subtle);
    color: var(--fg-muted);
    font-weight: 500;
    font-size: var(--text-xs);
}
.mud-table-row:hover {
    background: var(--canvas-subtle);
}

/* --- Switches / chips --------------------------------------- */
.mud-switch-track { background: var(--border-muted); }
.mud-switch-input.mud-checked + .mud-switch-track { background: var(--accent-fg); }
.mud-switch.mud-switch-checked .mud-switch-track { background: var(--accent-fg) !important; opacity: 0.5 !important; }
.mud-switch.mud-switch-checked .mud-switch-thumb { background: var(--accent-fg) !important; }

.mud-chip {
    background: var(--neutral-subtle);
    color: var(--fg-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    height: auto;
    padding: 2px 10px;
}

/* --- Dialogs ------------------------------------------------ */
.mud-dialog-title {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--fg-default);
    border-bottom: 1px solid var(--border-default);
    padding: 16px 20px;
}
.mud-dialog-content {
    padding: 16px 20px;
    color: var(--fg-default);
}
.mud-dialog-actions {
    border-top: 1px solid var(--border-default);
    padding: 12px 20px;
}

/* --- Tooltip ------------------------------------------------ */
.mud-tooltip {
    background: var(--fg-default);
    color: var(--canvas-default);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    padding: 4px 8px;
}

/* --- Selection / focus list items --------------------------- */
.mud-list-item.mud-selected-item {
    background: var(--accent-subtle);
    color: var(--accent-fg);
}
.mud-list-item:hover {
    background: var(--canvas-subtle);
}

/* --- Logo / avatar gradient kill ----------------------------
   Overrides the legacy .logo-mark and .av-* helpers so they
   read as flat. PR 3 removes the class usage entirely. */
.logo-mark, .logo-mark::after {
    background: var(--accent-fg) !important;
    box-shadow: none !important;
    filter: none !important;
}
.av, .av-blue, .av-violet, .av-emerald, .av-amber, .av-rose, .av-cyan {
    background: var(--canvas-subtle) !important;
    color: var(--fg-default) !important;
    border: 1px solid var(--border-default);
    font-family: var(--font-mono);
}

/* ============================================================
   Behaviour preserved from app.css
   --------------------------------------------------------------
   These rules carry layout/structural responsibilities that
   the new flat MudBlazor overrides above don't replace. Listed
   with consumer breadcrumbs for PR 3 follow-up.
   ============================================================ */

/* MudBlazor scroll containment / popover z-index / input padding —
   used by: MudBlazor internals. Without these, .mud-main-content
   doesn't scroll and popovers escape modal stacking. */
.mud-main-content {
    overflow-y: auto !important;
    height: calc(100vh - var(--mud-appbar-height)) !important;
}
.mud-popover-provider {
    z-index: 9999 !important;
}
.mud-popover.mud-popover-open {
    z-index: 9999 !important;
}
.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined textarea {
    padding: 10px 14px !important;
}
.mud-input-control .mud-input.mud-input-outlined {
    margin-top: 2px !important;
}
.mud-input-label.mud-input-label-outlined {
    left: -4px !important;
}
.mud-tabs-panels.mud-tabs-vertical {
    display: block;
    width: 100%;
}
.mud-picker .mud-picker-input-text {
    color: var(--fg-default) !important;
}

/* Que chat layout — used by: QuePage.razor (out of scope this PR).
   Colour references on .chat-bubble-* now resolve through HqueTheme
   PaletteLight/Dark; they previously fell through unstyled. */
.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--mud-appbar-height) - 124px);
    max-width: 900px;
    margin: 0 auto;
    padding: 14px;
    top: 100px;
    position: relative;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 4px;
}
.chat-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.chat-message-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 80%;
}
.chat-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-message-assistant {
    align-self: flex-start;
}
.chat-avatar {
    flex-shrink: 0;
    margin-top: 4px;
}
.chat-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-lg) !important;
    min-width: 80px;
}
.chat-bubble-user {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}
.chat-bubble-assistant {
    background-color: var(--canvas-subtle) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}
.chat-input-bar {
    padding: 12px 16px;
    border-radius: var(--radius-lg) !important;
    margin-top: 8px;
}
.chat-input-wrapper {
    position: relative;
}
.chat-textarea {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 12px 48px 12px 12px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    min-height: 4.5em;
    max-height: 240px;
    background: transparent;
    color: var(--fg-default);
    outline: none;
    box-sizing: border-box;
}
.chat-textarea:focus {
    border-color: var(--accent-fg);
    box-shadow: var(--focus-ring);
}
.chat-textarea::placeholder {
    color: var(--fg-subtle);
}
.chat-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chat-send-btn {
    position: absolute !important;
    bottom: 4px;
    right: 4px;
}
.chat-markdown {
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-word;
}
.chat-markdown p { margin: 0 0 0.5em; }
.chat-markdown p:last-child { margin-bottom: 0; }
.chat-markdown code {
    background: var(--neutral-subtle);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.4em;
    font-size: 0.85em;
    font-family: var(--font-mono);
}
.chat-markdown pre {
    background: var(--neutral-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    overflow-x: auto;
    margin: 0.5em 0;
}
.chat-markdown pre code {
    background: none;
    padding: 0;
    font-size: 0.82em;
    line-height: 1.5;
}
.chat-markdown ul, .chat-markdown ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}
.chat-markdown li { margin: 0.2em 0; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 {
    margin: 0.6em 0 0.3em;
    line-height: 1.3;
}
.chat-markdown h1 { font-size: 1.3em; }
.chat-markdown h2 { font-size: 1.15em; }
.chat-markdown h3 { font-size: 1.05em; }
.chat-markdown blockquote {
    border-left: 3px solid var(--accent-fg);
    margin: 0.5em 0;
    padding: 0.3em 0.8em;
    opacity: 0.85;
}
.chat-markdown table {
    border-collapse: collapse;
    margin: 0.5em 0;
    font-size: 0.85em;
}
.chat-markdown th, .chat-markdown td {
    border: 1px solid var(--border-muted);
    padding: 4px 8px;
}
.chat-markdown th {
    background: var(--canvas-subtle);
}
.chat-markdown hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 0.8em 0;
}
.chat-tool-json {
    background: var(--neutral-subtle);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.8rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 4px 0;
}

/* ============================================================
   Ported app classes (Path A: flatten + tokenise)
   --------------------------------------------------------------
   Layout/structure preserved; gradients, hover-lift and
   hover-shadow stripped; hex literals replaced with tokens;
   radii normalised to var(--radius-md/lg/pill).

   PR 3 will migrate consumers off these globals onto Mud
   components or scoped CSS, at which point each block can be
   removed from this file.
   ============================================================ */


/* --- Dialog (legacy custom) ---
   used by: LinkedItems.razor, Dashboard.razor,
            TableItemListPage.razor, ScheduleRow.razor,
            AssignGroup.razor, AdminWorkspacesTab.razor,
            AdminTeamsTab.razor, AdminLocationsTab.razor */
.admin-dialog {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 420px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-btn {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--canvas-default);
    color: var(--fg-default);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.dialog-btn.cancel { background: var(--canvas-default); color: var(--fg-muted); }
.dialog-btn.cancel:hover { background: var(--canvas-subtle); }
.dialog-btn.danger { background: var(--danger-subtle); color: var(--danger-fg); border-color: var(--danger-muted); }
.dialog-btn.danger:hover { background: var(--danger-subtle); border-color: var(--danger-fg); }

/* --- Inline edit form (.te-* shared classes) ---
   Header/back/subtitle chrome was folded into <PageHeader>; the button row
   into <FormActions>. What remains here backs those two components plus the
   still-bespoke section/card bits.
   used by: TableEditPage.razor (actions), NewApiKeyPage.razor (actions),
            <FormActions> (.te-actions/.te-save-btn/.te-cancel-btn) */
/*.te-section { margin-bottom: 24px; }*/
/* Opt-in section spacing (the global .te-section margin above is disabled). Used where
   stacked heading/content boxes need breathing room, e.g. the Teams edit page. */
.te-section--gap { margin-bottom: 20px; }
.te-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.te-section-title {
    font-weight: 500;
    font-size: var(--text-md);
    color: var(--fg-default);
}
.te-section-hint {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-family: var(--font-mono);
}
.te-card {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.te-card-body {
    padding: 20px 24px;
}
.te-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
}
.te-actions .te-save-btn {
    padding: 8px 28px;
    font-weight: 500;
    border-radius: var(--radius-md);
    background: var(--accent-fg) !important;
    border: 1px solid var(--accent-fg) !important;
    color: var(--fg-on-emphasis) !important;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.te-actions .te-save-btn:hover {
    background: var(--accent-emphasis) !important;
    border-color: var(--accent-emphasis) !important;
}
.te-cancel-btn {
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 8px 20px;
    color: var(--fg-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, color 80ms ease;
}
.te-cancel-btn:hover {
    background: var(--canvas-subtle);
    color: var(--fg-default);
}

/* --- User-edit team rows (.ue-*) ---
   used by: UserEditPage.razor, AdminUsersTab.razor */
.ue-team-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ue-team-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
}
.ue-team-row:hover {
    background: var(--canvas-subtle);
}
.ue-team-row.active {
    border-color: var(--accent-fg);
    background: var(--accent-subtle);
}
.ue-team-check { flex-shrink: 0; padding-top: 2px; }
.ue-team-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ue-team-info { flex: 1; min-width: 0; }
.ue-team-name { font-weight: 500; font-size: var(--text-sm); color: var(--fg-default); margin-bottom: 2px; }
.ue-team-desc { font-size: var(--text-xs); color: var(--fg-muted); line-height: 1.5; }
.ue-team-count { font-size: var(--text-2xs); color: var(--fg-subtle); font-family: var(--font-mono); white-space: nowrap; padding-top: 3px; }
.ue-empty { padding: 24px; text-align: center; color: var(--fg-subtle); font-size: var(--text-sm); }

/* --- Manage members (.mm-*) ---
   used by: ManageTeamMembersPage.razor, AdminTeamsTab.razor */
.mm-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    transition: border-color 80ms ease;
}
.mm-search-wrap:focus-within { border-color: var(--accent-fg); }
.mm-search {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--fg-default);
    font-size: var(--text-sm);
}
.mm-search::placeholder { color: var(--fg-subtle); }
.mm-user-list { display: flex; flex-direction: column; gap: 8px; }
.mm-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--canvas-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: background-color 80ms ease, border-color 80ms ease;
}
.mm-user-row:hover { background: var(--canvas-subtle); }
.mm-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--canvas-subtle);
    border: 1px solid var(--border-default);
    color: var(--fg-default);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mm-user-avatar span { font-size: var(--text-xs); font-weight: 500; color: var(--fg-default); font-family: var(--font-mono); }
.mm-user-info { flex: 1; min-width: 0; }
.mm-user-name { font-weight: 500; font-size: var(--text-sm); color: var(--fg-default); margin-bottom: 1px; }
.mm-user-email { font-size: var(--text-2xs); color: var(--fg-subtle); font-family: var(--font-mono); }
.mm-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 80ms ease, border-color 80ms ease;
    flex-shrink: 0;
}
.mm-toggle-btn.add { background: var(--accent-subtle); border: 1px solid var(--accent-muted); color: var(--accent-fg); }
.mm-toggle-btn.add:hover { background: var(--accent-subtle); border-color: var(--accent-fg); }
.mm-toggle-btn.remove { background: var(--danger-subtle); border: 1px solid var(--danger-muted); color: var(--danger-fg); }
.mm-toggle-btn.remove:hover { background: var(--danger-subtle); border-color: var(--danger-fg); }
.mm-empty { padding: 24px; text-align: center; color: var(--fg-subtle); font-size: var(--text-sm); }

/* --- Utilities ---
   used by: AdminUsersTab.razor, AdminBillingTab.razor (.mono / .dim) */
.mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.dim { color: var(--fg-subtle); }

/* ============================================================
   Status tones + categorical palette (color consolidation).
   One .tone-* class carries both fg and bg; the single .status-dot
   and .status-chip read from it. Categorical distinction colours use
   .cat-* keys. See hque-tokens.css for the token definitions.
   ============================================================ */
.tone-neutral { --tone-fg: var(--tone-neutral-fg); --tone-bg: var(--tone-neutral-bg); }
.tone-info    { --tone-fg: var(--tone-info-fg);    --tone-bg: var(--tone-info-bg); }
.tone-success { --tone-fg: var(--tone-success-fg); --tone-bg: var(--tone-success-bg); }
.tone-warning { --tone-fg: var(--tone-warning-fg); --tone-bg: var(--tone-warning-bg); }
.tone-danger  { --tone-fg: var(--tone-danger-fg);  --tone-bg: var(--tone-danger-bg); }
.tone-done    { --tone-fg: var(--tone-done-fg);    --tone-bg: var(--tone-done-bg); }

/* The single dot — replaces the per-component glow-dot variants. */
.status-dot {
    display: inline-block;
    flex: none;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--tone-fg);
    box-shadow: var(--dot-glow) var(--tone-fg);
}

/* The single chip — folds the prior pill implementations onto tones. */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-2xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    color: var(--tone-fg);
    background: var(--tone-bg);
}

/* Categorical dot — same shape, colour from a --cat-* key. */
.cat-dot {
    display: inline-block;
    flex: none;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    background: var(--cat-color);
    box-shadow: var(--dot-glow) var(--cat-color);
}
.cat-blue   { --cat-color: var(--cat-blue); }
.cat-green  { --cat-color: var(--cat-green); }
.cat-amber  { --cat-color: var(--cat-amber); }
.cat-purple { --cat-color: var(--cat-purple); }
.cat-teal   { --cat-color: var(--cat-teal); }
.cat-pink   { --cat-color: var(--cat-pink); }