/* ============================================================
   Flow OES — Design System (page-level subset)
   Extracted from docs/specs/os-performance/job-costing-hub/02-job-costing-hub-scaffold.html
   Adjusted so the system is OPT-IN: scoped under .flow-oes-page so it
   doesn't affect any non-Flow-OES surface in the app.

   What's in here:
     - :root design tokens (--fo-*)
     - .flow-oes-page wrapper (sets the page's typography/color/bg
       locally instead of globally)
     - .fo-page-header / .fo-overline / .fo-title / .fo-mode-toggle
     - .workspace + empty-state primitives
     - .fo-btn / .fo-btn--primary / .fo-btn--ghost
     - .fo-flyout (drawer) + .fo-flyout__scrim / __head / __body / __foot /
       __close / __placeholder

   What's NOT in here (deliberately omitted from the mockup):
     - global html/body resets — would change every page in the app
     - mock app shell (.app, .rail, .topbar) — FlowMES has its own chrome
   ============================================================ */

:root {
    --fo-orange: #F97316;
    --fo-orange-hover: #EA6A0C;
    --fo-orange-press: #C2410C;
    --fo-orange-light: #FDBA74;

    --fo-navy: #121820;
    --fo-navy-1: #1A202C;
    --fo-navy-3: #232B38;
    --fo-navy-border: #2D3748;

    --fo-workspace-bg: #F3F4F6;
    --fo-surface-white: #FFFFFF;
    --fo-surface-hover: #F8FAFC;
    --fo-surface-active: #FFF7ED;
    --fo-border: #E2E8F0;
    --fo-border-strong: #CBD5E1;

    --fo-success: #10B981;
    --fo-warn: #F59E0B;
    --fo-danger: #EF4444;
    --fo-info: #3B82F6;

    /* Per-value-type darker text colors used on tinted backgrounds —
       paired with the rgba(*) tints in field-chip / picker / bracket
       components. Keep these in lock-step with the JobCostingHub mockup. */
    --fo-money-text: #047857;
    --fo-number-text: #1D4ED8;
    --fo-bool-text:   #B45309;
    --fo-date-text:   #6D28D9;
    --fo-enum-text:   #0369A1;

    --fo-text: #0F172A;
    --fo-text-muted: #334155;
    --fo-text-faint: #64748B;
    --fo-text-disabled: #94A3B8;

    --fo-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --fo-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    --fo-tracking-tight: -0.01em;
    --fo-tracking-wide: 0.04em;
    --fo-tracking-caps: 0.12em;

    --fo-radius-sm: 2px;
    --fo-radius: 4px;
    --fo-radius-md: 6px;
    --fo-radius-pill: 999px;

    --fo-dur-fast: 80ms;
    --fo-dur: 140ms;
    --fo-dur-slow: 220ms;
    --fo-ease-out: cubic-bezier(.2, .7, .2, 1);

    --fo-shadow-pop: 0 8px 24px rgba(15, 23, 42, .12), 0 2px 4px rgba(15, 23, 42, .06);
    --fo-shadow-modal: 0 24px 48px rgba(15, 23, 42, .24);
    --fo-ring-focus: 0 0 0 3px rgba(59, 130, 246, .28);

    --fo-control-h: 32px;
}

/* ============================================================
   PAGE — opt-in wrapper that scopes typography + colors locally.
   Without this, the app's global html/body styles win.
   ============================================================ */
.flow-oes-page {
    display: flex;
    flex-direction: column;
    flex: 1;

    /* MainLayout wraps every page in `.content px-4 .content__develop`. In
       dev mode .content__develop paints palegoldenrod (Layout.scss), and
       .content adds padding-top: 1.1rem with Bootstrap px-4 adding 1.5rem
       horizontal. Without compensation a palegoldenrod frame rings the
       Flow OES workspace. Negative margins extend the wrapper over that
       padding box so var(--fo-workspace-bg) covers edge to edge. The
       matching min-height keeps the wrapper at least the parent's full
       height after the top margin pulls it up. */
    margin: -1.1rem -1.5rem 0;
    min-height: calc(100% + 1.1rem);
    overflow: auto;

    background: var(--fo-workspace-bg);
    color: var(--fo-text);
    font-family: var(--fo-font-mono);
    font-size: 13px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
.flow-oes-page * { box-sizing: border-box; }

.flow-oes-page .fo-page-header {
    background: var(--fo-surface-white);
    border-bottom: 1px solid var(--fo-border);
    padding: 24px 32px;
}
.flow-oes-page .fo-page-header__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}
.flow-oes-page .fo-overline {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    margin-bottom: 6px;
}
.flow-oes-page .fo-overline .accent { color: var(--fo-orange); }
.flow-oes-page .fo-overline .dot { color: var(--fo-border-strong); padding: 0 6px; }
.flow-oes-page .fo-title {
    font-family: var(--fo-font-mono);
    font-weight: 600;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: var(--fo-tracking-tight);
    margin: 0;
    color: var(--fo-text);
}

/* Mode toggle */
.flow-oes-page .fo-mode-toggle {
    display: inline-flex;
    background: var(--fo-workspace-bg);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    padding: 2px;
    height: 32px;
}
.flow-oes-page .fo-mode-toggle button {
    background: transparent;
    border: 0;
    padding: 0 16px;
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    cursor: pointer;
    border-radius: 2px;
    transition: all var(--fo-dur) var(--fo-ease-out);
    height: 26px;
}
.flow-oes-page .fo-mode-toggle button.is-active {
    background: var(--fo-text);
    color: #FFF;
}
.flow-oes-page .fo-mode-toggle button:not(.is-active):hover { color: var(--fo-text); }

/* Workspace — empty, with a single CTA that opens the fly-out */
.flow-oes-page .workspace {
    flex: 1;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fo-workspace-bg);
}

.flow-oes-page .empty {
    text-align: center;
    max-width: 420px;
}
.flow-oes-page .empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--fo-radius-md);
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fo-text-faint);
    margin-bottom: 16px;
}
.flow-oes-page .empty__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}
.flow-oes-page .empty__title {
    font-family: var(--fo-font-mono);
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    color: var(--fo-text);
    margin: 0 0 6px;
    letter-spacing: var(--fo-tracking-tight);
}
.flow-oes-page .empty__sub {
    font-family: var(--fo-font-sans);
    font-size: 13px;
    line-height: 20px;
    color: var(--fo-text-faint);
    margin: 0 0 18px;
}

.flow-oes-page .fo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: var(--fo-control-h);
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background var(--fo-dur) var(--fo-ease-out);
}
.flow-oes-page .fo-btn--primary {
    background: var(--fo-orange);
    color: #FFF;
}
.flow-oes-page .fo-btn--primary:hover { background: var(--fo-orange-hover); }
.flow-oes-page .fo-btn--primary:active { background: var(--fo-orange-press); }
.flow-oes-page .fo-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

/* ============================================================
   FLY-OUT DRAWER — right-anchored overlay panel with scrim.
   Triggered by toggling .is-open on .fo-flyout AND .fo-flyout__scrim.
   The slide-in transform is the one motion exception Flow OES permits
   ("never animate position unless it's the modal/drawer reveal").
   ============================================================ */
.flow-oes-page .fo-flyout__scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.18);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--fo-dur) var(--fo-ease-out);
}
.flow-oes-page .fo-flyout__scrim.is-open {
    opacity: 1;
    pointer-events: auto;
}

.flow-oes-page .fo-flyout {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 600px;
    max-width: 100vw;
    background: var(--fo-surface-white);
    border-left: 1px solid var(--fo-border);
    box-shadow: var(--fo-shadow-modal);
    z-index: 41;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--fo-dur-slow) var(--fo-ease-out);
}
.flow-oes-page .fo-flyout.is-open {
    transform: translateX(0);
}

.flow-oes-page .fo-flyout__head {
    padding: 18px 24px 14px;
    border-bottom: 1px solid var(--fo-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}
.flow-oes-page .fo-flyout__head-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.flow-oes-page .fo-flyout__body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px 24px;
}
.flow-oes-page .fo-flyout__foot {
    border-top: 1px solid var(--fo-border);
    padding: 14px 24px;
    background: var(--fo-workspace-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.flow-oes-page .fo-flyout__close {
    width: 32px;
    height: 32px;
    border-radius: var(--fo-radius-pill);
    background: transparent;
    border: 1px solid var(--fo-border);
    color: var(--fo-text-faint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    transition: background var(--fo-dur) var(--fo-ease-out);
    flex-shrink: 0;
}
.flow-oes-page .fo-flyout__close:hover {
    background: var(--fo-surface-hover);
    color: var(--fo-text);
}

/* Ghost button — used inside the fly-out foot for Cancel. */
.flow-oes-page .fo-btn--ghost {
    background: transparent;
    color: var(--fo-text-muted);
    border-color: var(--fo-border);
}
.flow-oes-page .fo-btn--ghost:hover {
    background: var(--fo-surface-hover);
    color: var(--fo-text);
}

/* Placeholder text used inside the fly-out body until the criteria builder
   ships. Kept generic so it can be reused by other shells if needed. */
.flow-oes-page .fo-flyout__placeholder {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.flow-oes-page .fo-flyout__placeholder .label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
}
.flow-oes-page .fo-flyout__placeholder .title {
    font-family: var(--fo-font-mono);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: var(--fo-tracking-tight);
    margin: 0;
}
.flow-oes-page .fo-flyout__placeholder .body {
    font-family: var(--fo-font-sans);
    font-size: 13px;
    color: var(--fo-text-faint);
    margin: 4px 0 0;
}

/* ============================================================
   FILTER BUILDER — saved-filters strip, view meta, tabs, groups,
   criteria, field picker, brackets, footer match count.
   All token-based. All scoped under .flow-oes-page so we don't
   leak into any non-Flow-OES surface.
   ============================================================ */

/* Section label (Saved Filters · 5) */
.flow-oes-page .section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flow-oes-page .section-label .count {
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
    color: var(--fo-text-disabled);
}

/* Saved filters strip */
.flow-oes-page .views {
    padding: 14px 24px;
    border-bottom: 1px solid var(--fo-border);
    background: var(--fo-workspace-bg);
}
.flow-oes-page .views__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.flow-oes-page .view-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 12px 0 10px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border-strong);
    border-radius: var(--fo-radius);
    font-size: 12px;
    font-weight: 500;
    color: var(--fo-text-muted);
    cursor: pointer;
    transition: all var(--fo-dur) var(--fo-ease-out);
    position: relative;
}
.flow-oes-page .view-chip:hover {
    background: var(--fo-surface-hover);
    color: var(--fo-text);
    border-color: var(--fo-text-faint);
}
.flow-oes-page .view-chip.is-active {
    background: var(--fo-text);
    color: #FFF;
    border-color: var(--fo-text);
}
.flow-oes-page .view-chip.is-active:hover { background: var(--fo-navy-1); }
.flow-oes-page .view-chip .bar {
    width: 3px;
    height: 12px;
    background: var(--fo-orange);
    border-radius: 1px;
}
.flow-oes-page .view-chip .dirty {
    width: 5px;
    height: 5px;
    background: var(--fo-orange);
    border-radius: var(--fo-radius-pill);
}
.flow-oes-page .view-chip--add {
    background: transparent;
    border-style: dashed;
    color: var(--fo-text-faint);
}
.flow-oes-page .view-chip--add:hover {
    color: var(--fo-orange);
    border-color: var(--fo-orange);
}
.flow-oes-page .view-chip--skeleton {
    background: var(--fo-surface-hover);
    border-color: var(--fo-border);
    color: transparent;
    pointer-events: none;
    min-width: 80px;
}
.flow-oes-page .view-error {
    font-size: 11px;
    color: var(--fo-danger);
    display: flex;
    align-items: center;
    gap: 8px;
}
.flow-oes-page .view-error button {
    background: transparent;
    border: 0;
    color: var(--fo-orange-press);
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

/* View meta row (name + Modified pill + Reset / Save as / Save) */
.flow-oes-page .view-meta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--fo-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.flow-oes-page .view-meta__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.flow-oes-page .view-meta__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    min-width: 0;
}
.flow-oes-page .view-meta__name b {
    font-weight: 600;
    color: var(--fo-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flow-oes-page .view-meta__name .modified {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-orange-press);
    background: rgba(249, 115, 22, 0.1);
    padding: 1px 6px;
    border-radius: var(--fo-radius-sm);
    flex-shrink: 0;
}
.flow-oes-page .view-meta__actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.flow-oes-page .text-btn {
    background: transparent;
    border: 0;
    padding: 5px 10px;
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-muted);
    cursor: pointer;
    border-radius: var(--fo-radius);
    transition: all var(--fo-dur) var(--fo-ease-out);
}
.flow-oes-page .text-btn:hover {
    background: var(--fo-surface-white);
    color: var(--fo-text);
}
.flow-oes-page .text-btn.is-primary { color: var(--fo-orange-press); }
.flow-oes-page .text-btn.is-primary:hover { background: rgba(249, 115, 22, 0.08); }

/* Tabs (Filter / Columns) */
.flow-oes-page .tabs {
    display: flex;
    padding: 0 24px;
    border-bottom: 1px solid var(--fo-border);
    background: var(--fo-surface-white);
    gap: 0;
}
.flow-oes-page .tab {
    padding: 12px 4px;
    margin-right: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--fo-dur) var(--fo-ease-out);
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font-family: var(--fo-font-mono);
}
.flow-oes-page .tab:hover { color: var(--fo-text); }
.flow-oes-page .tab.is-active {
    color: var(--fo-text);
    border-bottom-color: var(--fo-orange);
}
.flow-oes-page .tab .count {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    background: var(--fo-workspace-bg);
    color: var(--fo-text-faint);
    padding: 1px 6px;
    border-radius: var(--fo-radius-sm);
}
.flow-oes-page .tab.is-active .count {
    background: rgba(249, 115, 22, 0.12);
    color: var(--fo-orange-press);
}

/* Group card (one AND-group) */
.flow-oes-page .group {
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius-md);
}
.flow-oes-page .group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--fo-border);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
}
.flow-oes-page .group__head .label {
    display: flex;
    align-items: center;
    gap: 6px;
}
.flow-oes-page .group__head .all-pill {
    background: var(--fo-workspace-bg);
    color: var(--fo-text);
    padding: 1px 6px;
    border-radius: var(--fo-radius-sm);
    letter-spacing: var(--fo-tracking-wide);
    font-weight: 700;
    border: 1px solid var(--fo-border);
}
.flow-oes-page .group__remove {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    color: var(--fo-text-disabled);
    cursor: pointer;
    border-radius: var(--fo-radius);
    font-size: 13px;
    line-height: 1;
    font-family: var(--fo-font-mono);
}
.flow-oes-page .group__remove:hover {
    color: var(--fo-danger);
    background: rgba(239, 68, 68, 0.08);
}
.flow-oes-page .criteria-list {
    padding: 4px 12px;
}

/* Criterion row */
.flow-oes-page .crit {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--fo-border);
    flex-wrap: wrap;
}
.flow-oes-page .crit:last-child { border-bottom: 0; }
.flow-oes-page .crit__remove {
    width: 26px;
    height: 28px;
    background: transparent;
    border: 0;
    border-radius: var(--fo-radius);
    color: var(--fo-text-disabled);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    margin-left: auto;
    flex-shrink: 0;
}
.flow-oes-page .crit__remove:hover {
    color: var(--fo-danger);
    background: rgba(239, 68, 68, 0.08);
}

/* Field chip */
.flow-oes-page .field-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 28px;
    padding: 0 10px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border-strong);
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--fo-text);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    max-width: 220px;
    transition: all var(--fo-dur) var(--fo-ease-out);
}
.flow-oes-page .field-chip:hover { border-color: var(--fo-text-faint); }
.flow-oes-page .field-chip.is-empty {
    color: var(--fo-text-faint);
    border-style: dashed;
    font-weight: 500;
}
.flow-oes-page .field-chip .type-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 9px;
    font-weight: 700;
    background: var(--fo-workspace-bg);
    color: var(--fo-text-faint);
    border-radius: var(--fo-radius-sm);
    letter-spacing: 0;
}
.flow-oes-page .field-chip .type-mark.is-money    { background: rgba(16, 185, 129, 0.12); color: var(--fo-money-text); }
.flow-oes-page .field-chip .type-mark.is-percent  { background: rgba(249, 115, 22, 0.12); color: var(--fo-orange-press); }
.flow-oes-page .field-chip .type-mark.is-number   { background: rgba(59, 130, 246, 0.12); color: var(--fo-number-text); }
.flow-oes-page .field-chip .type-mark.is-bool     { background: rgba(245, 158, 11, 0.12); color: var(--fo-bool-text); }
.flow-oes-page .field-chip .type-mark.is-date     { background: rgba(124, 58, 237, 0.12); color: var(--fo-date-text); }
.flow-oes-page .field-chip .type-mark.is-text     { background: rgba(100, 116, 139, 0.12); color: var(--fo-text-muted); }
.flow-oes-page .field-chip .type-mark.is-enum     { background: rgba(56, 189, 248, 0.12); color: var(--fo-enum-text); }
.flow-oes-page .field-chip .caret {
    color: var(--fo-text-faint);
    font-size: 9px;
    flex-shrink: 0;
}

/* Operator select */
.flow-oes-page .op-select {
    appearance: none;
    height: 28px;
    padding: 0 24px 0 10px;
    background: var(--fo-workspace-bg);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--fo-text);
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 9px;
}

/* Value zones */
.flow-oes-page .val {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.flow-oes-page .val-input {
    height: 28px;
    padding: 0 10px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border-strong);
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--fo-text);
    min-width: 0;
    width: 100%;
    outline: none;
}
.flow-oes-page .val-input:focus {
    border-color: var(--fo-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16);
}
.flow-oes-page .val-and {
    font-size: 10px;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    font-weight: 600;
    padding: 0 4px;
    flex-shrink: 0;
}
.flow-oes-page .val-bool {
    display: flex;
    align-items: center;
    background: var(--fo-workspace-bg);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    padding: 2px;
    height: 28px;
}
.flow-oes-page .val-bool button {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 0 14px;
    height: 22px;
    border-radius: var(--fo-radius-sm);
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--fo-text-faint);
    cursor: pointer;
}
.flow-oes-page .val-bool button.is-active {
    background: var(--fo-text);
    color: #FFF;
}
.flow-oes-page .val-multi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    padding: 3px 6px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border-strong);
    border-radius: var(--fo-radius);
    width: 100%;
    cursor: text;
}
.flow-oes-page .val-multi .tag {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    background: var(--fo-workspace-bg);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius-sm);
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--fo-text);
}
.flow-oes-page .val-multi .placeholder {
    color: var(--fo-text-faint);
    font-size: 11px;
    font-style: italic;
    padding: 0 4px;
}

/* Bracket toggle on a criterion */
.flow-oes-page .crit__bracket-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    cursor: pointer;
    transition: all var(--fo-dur) var(--fo-ease-out);
}
.flow-oes-page .crit__bracket-toggle:hover {
    color: var(--fo-text);
    border-color: var(--fo-text-faint);
}
.flow-oes-page .crit__bracket-toggle.is-on {
    background: rgba(249, 115, 22, 0.06);
    color: var(--fo-orange-press);
    border-color: var(--fo-orange);
}
.flow-oes-page .crit__bracket-toggle .checkbox {
    width: 12px;
    height: 12px;
    border: 1px solid currentColor;
    border-radius: var(--fo-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}
.flow-oes-page .crit__bracket-toggle.is-on .checkbox {
    background: var(--fo-orange);
    color: #FFF;
    border-color: var(--fo-orange);
}

/* Bracket grid */
.flow-oes-page .bracket-wrap {
    width: 100%;
    margin-top: 8px;
    background: var(--fo-workspace-bg);
    border: 1px dashed var(--fo-border-strong);
    border-radius: var(--fo-radius-md);
    padding: 10px 12px;
}
.flow-oes-page .bracket-config {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--fo-text-muted);
}
.flow-oes-page .bracket-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fo-font-mono);
    font-size: 12px;
}
.flow-oes-page .bracket-table th,
.flow-oes-page .bracket-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--fo-border);
}
.flow-oes-page .bracket-table th {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
}
.flow-oes-page .bracket-table input {
    width: 100%;
    height: 24px;
    padding: 0 6px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 11.5px;
    color: var(--fo-text);
    outline: none;
}
.flow-oes-page .bracket-table input:focus {
    border-color: var(--fo-orange);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.16);
}
.flow-oes-page .bracket-table .row-remove {
    background: transparent;
    border: 0;
    color: var(--fo-text-disabled);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--fo-radius);
}
.flow-oes-page .bracket-table .row-remove:hover {
    color: var(--fo-danger);
    background: rgba(239, 68, 68, 0.08);
}
.flow-oes-page .bracket-add {
    margin-top: 6px;
    background: transparent;
    border: 1px dashed var(--fo-border-strong);
    padding: 4px 10px;
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-muted);
    cursor: pointer;
}
.flow-oes-page .bracket-add:hover {
    color: var(--fo-orange-press);
    border-color: var(--fo-orange);
}
.flow-oes-page .bracket-hint {
    margin: 4px 0 8px;
    font-style: italic;
    font-size: 11.5px;
    line-height: 16px;
    color: var(--fo-text-muted);
}
.flow-oes-page .bracket-warn {
    margin-top: 6px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--fo-bool-text);
    border-radius: var(--fo-radius);
    padding: 6px 8px;
    font-size: 11px;
    line-height: 16px;
}

/* Field picker popover */
.flow-oes-page .picker {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 320px;
    max-height: 360px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius-md);
    box-shadow: var(--fo-shadow-pop);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.flow-oes-page .picker__search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--fo-border);
    background: var(--fo-workspace-bg);
    display: flex;
    align-items: center;
    gap: 6px;
}
.flow-oes-page .picker__search svg {
    width: 12px;
    height: 12px;
    stroke: var(--fo-text-faint);
    fill: none;
    stroke-width: 1.5;
    flex-shrink: 0;
}
.flow-oes-page .picker__search input {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--fo-font-mono);
    font-size: 11.5px;
    color: var(--fo-text);
    outline: none;
}
.flow-oes-page .picker__list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.flow-oes-page .picker__group-label {
    padding: 8px 12px 4px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
}
.flow-oes-page .picker__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--fo-text);
    transition: background var(--fo-dur-fast) var(--fo-ease-out);
}
.flow-oes-page .picker__option:hover { background: var(--fo-surface-hover); }
.flow-oes-page .picker__option.is-disabled {
    color: var(--fo-text-disabled);
    cursor: not-allowed;
}
.flow-oes-page .picker__option.is-disabled:hover { background: transparent; }
.flow-oes-page .picker__option .mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 9px;
    font-weight: 700;
    background: var(--fo-workspace-bg);
    color: var(--fo-text-faint);
    border-radius: var(--fo-radius-sm);
    flex-shrink: 0;
}
.flow-oes-page .picker__option .mark.is-money   { background: rgba(16, 185, 129, 0.12); color: var(--fo-money-text); }
.flow-oes-page .picker__option .mark.is-percent { background: rgba(249, 115, 22, 0.12); color: var(--fo-orange-press); }
.flow-oes-page .picker__option .mark.is-number  { background: rgba(59, 130, 246, 0.12); color: var(--fo-number-text); }
.flow-oes-page .picker__option .mark.is-bool    { background: rgba(245, 158, 11, 0.12); color: var(--fo-bool-text); }
.flow-oes-page .picker__option .mark.is-date    { background: rgba(124, 58, 237, 0.12); color: var(--fo-date-text); }
.flow-oes-page .picker__option .mark.is-text    { background: rgba(100, 116, 139, 0.12); color: var(--fo-text-muted); }
.flow-oes-page .picker__option .mark.is-enum    { background: rgba(56, 189, 248, 0.12); color: var(--fo-enum-text); }
.flow-oes-page .picker__option .new-pill {
    margin-left: auto;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-orange-press);
    background: rgba(249, 115, 22, 0.12);
    padding: 1px 5px;
    border-radius: var(--fo-radius-sm);
}
.flow-oes-page .picker__empty {
    padding: 16px;
    text-align: center;
    font-size: 11.5px;
    color: var(--fo-text-faint);
}

/* Add buttons */
.flow-oes-page .add-condition {
    margin: 8px 12px 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px dashed var(--fo-border-strong);
    padding: 6px 12px;
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-muted);
    cursor: pointer;
}
.flow-oes-page .add-condition:hover {
    color: var(--fo-orange-press);
    border-color: var(--fo-orange);
    background: rgba(249, 115, 22, 0.04);
}
.flow-oes-page .add-or-group {
    width: 100%;
    margin-top: 14px;
    background: transparent;
    border: 1px dashed var(--fo-border-strong);
    padding: 10px;
    border-radius: var(--fo-radius-md);
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.flow-oes-page .add-or-group:hover {
    color: var(--fo-bool-text);
    border-color: var(--fo-warn);
    background: rgba(245, 158, 11, 0.04);
}

/* OR divider between groups */
.flow-oes-page .or-divider {
    position: relative;
    margin: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.flow-oes-page .or-divider::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    height: 1px;
    background: var(--fo-border);
}
.flow-oes-page .or-divider .pill {
    background: rgba(245, 158, 11, 0.12);
    color: var(--fo-bool-text);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--fo-tracking-caps);
    padding: 2px 10px;
    border-radius: var(--fo-radius-sm);
    position: relative;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Match count (footer) */
.flow-oes-page .match {
    flex: 1;
    min-width: 0;
}
.flow-oes-page .match__numbers {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-variant-numeric: tabular-nums;
}
.flow-oes-page .match__primary {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-tight);
    color: var(--fo-text);
}
.flow-oes-page .match__label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    margin-top: 4px;
}
.flow-oes-page .match__pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--fo-radius-pill);
    background: var(--fo-success);
    margin-right: 6px;
    vertical-align: middle;
}

/* Wrapper for picker positioning — field chip is the anchor */
.flow-oes-page .field-chip-wrap {
    position: relative;
    display: inline-block;
}

/* ============================================================
   COLUMNS TAB — column row card with grip, type mark, sort
   toggle, priority indicator, and remove.
   ============================================================ */
.flow-oes-page .columns-tab__hint {
    font-family: var(--fo-font-sans);
    font-size: 12px;
    color: var(--fo-text-faint);
    margin-bottom: 12px;
    line-height: 18px;
}

.flow-oes-page .col-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--fo-surface-white);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    margin-bottom: 6px;
}
.flow-oes-page .col-row.is-dragging {
    opacity: 0.4;
}
.flow-oes-page .col-row.is-drop-target {
    border-color: var(--fo-orange);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.16);
}

.flow-oes-page .col-row__grip {
    color: var(--fo-text-disabled);
    cursor: grab;
    display: flex;
    align-items: center;
}
.flow-oes-page .col-row__grip:active { cursor: grabbing; }
.flow-oes-page .col-row__grip svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
}

.flow-oes-page .col-row__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 9px;
    font-weight: 700;
    background: var(--fo-workspace-bg);
    color: var(--fo-text-faint);
    border-radius: var(--fo-radius-sm);
    flex-shrink: 0;
}
.flow-oes-page .col-row__mark.is-money   { background: rgba(16, 185, 129, 0.12); color: var(--fo-money-text); }
.flow-oes-page .col-row__mark.is-percent { background: rgba(249, 115, 22, 0.12); color: var(--fo-orange-press); }
.flow-oes-page .col-row__mark.is-number  { background: rgba(59, 130, 246, 0.12); color: var(--fo-number-text); }
.flow-oes-page .col-row__mark.is-bool    { background: rgba(245, 158, 11, 0.12); color: var(--fo-bool-text); }
.flow-oes-page .col-row__mark.is-date    { background: rgba(124, 58, 237, 0.12); color: var(--fo-date-text); }
.flow-oes-page .col-row__mark.is-text    { background: rgba(100, 116, 139, 0.12); color: var(--fo-text-muted); }
.flow-oes-page .col-row__mark.is-enum    { background: rgba(56, 189, 248, 0.12); color: var(--fo-enum-text); }

.flow-oes-page .col-row__name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
}

.flow-oes-page .col-row__priority {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    display: flex;
    align-items: center;
    gap: 4px;
}
.flow-oes-page .col-row__priority b {
    color: var(--fo-text);
    font-size: 11px;
}

.flow-oes-page .col-row__sort {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--fo-workspace-bg);
    border: 1px solid var(--fo-border);
    border-radius: var(--fo-radius);
    padding: 2px;
    height: 24px;
}
.flow-oes-page .col-row__sort button {
    width: 22px;
    height: 20px;
    background: transparent;
    border: 0;
    font-family: var(--fo-font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--fo-text-faint);
    cursor: pointer;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.flow-oes-page .col-row__sort button.is-active {
    background: var(--fo-text);
    color: #FFF;
}

.flow-oes-page .col-row__remove {
    width: 22px;
    height: 22px;
    background: transparent;
    border: 0;
    color: var(--fo-text-disabled);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: var(--fo-radius);
}
.flow-oes-page .col-row__remove:hover {
    color: var(--fo-danger);
    background: rgba(239, 68, 68, 0.08);
}

/* + Add column dashed pill — reuses .add-condition shape but full width */
.flow-oes-page .add-column {
    width: 100%;
    margin-top: 8px;
    background: transparent;
    border: 1px dashed var(--fo-border-strong);
    padding: 8px 12px;
    border-radius: var(--fo-radius);
    font-family: var(--fo-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
}
.flow-oes-page .add-column:hover {
    color: var(--fo-orange-press);
    border-color: var(--fo-orange);
    background: rgba(249, 115, 22, 0.04);
}
.flow-oes-page .add-column-wrap {
    position: relative;
}

/* =============================================================
   CCFlowGrid — Flow OES grid component (1b)
   Added by ITEM 2. Subsequent items append below this block.
   ============================================================= */

/* Flow OES tokens used by .fo-grid (and forward by other Flow OES
   surfaces). Ported from flow-oes-showcase.html. Declared in a
   second :root rule so the existing :root at line 22 is not
   modified — these names are new, no overrides. */
:root {
    /* Spacing — 4px scale */
    --fo-s-1:  4px;
    --fo-s-2:  8px;
    --fo-s-3:  12px;
    --fo-s-4:  16px;
    --fo-s-5:  20px;
    --fo-s-6:  24px;
    --fo-s-8:  32px;
    --fo-s-10: 40px;
    --fo-s-12: 48px;
    --fo-s-16: 64px;

    /* Typography — font shorthand. Letter-spacing / text-transform /
       font-variant-numeric stay at the use site so consumers can
       opt in. */
    --fo-t-body:    400 13px/20px var(--fo-font-mono);  /* Table cells · meta · most UI */
    --fo-t-label:   500 10px/14px var(--fo-font-mono);  /* Caps labels · table headers · overlines */
    --fo-t-data:    500 13px/20px var(--fo-font-mono);  /* Cell values · numbers */
    --fo-t-data-sm: 400 11px/16px var(--fo-font-mono);  /* Dense data · meta lines */
}

.fo-grid {
    border: 1px solid var(--fo-border);
    background: #ffffff;
}

.fo-grid__table {
    width: 100%;
    border-collapse: collapse;
}

.fo-grid__head {
    padding: 10px var(--fo-s-3);                /* 10px vertical — off the 4px scale, intentional per showcase #c-table */
    background: var(--fo-workspace-bg);
    font: var(--fo-t-label);
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    border-bottom: 1px solid var(--fo-border);
    text-align: left;
}

.fo-grid__head--right  { text-align: right; }
.fo-grid__head--center { text-align: center; }

.fo-grid__cell {
    padding: var(--fo-s-2) var(--fo-s-3);
    font: var(--fo-t-body);
    color: var(--fo-text);
    border-bottom: 1px solid var(--fo-border);
    height: 36px;                               /* 36px — off the 4px scale (no --fo-s-9); Flow OES default row */
}

.fo-grid__cell--right  { text-align: right; }
.fo-grid__cell--center { text-align: center; }

.fo-grid__cell--numeric {
    font: var(--fo-t-data);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ----- ITEM 3 — Virtualization + sticky header ----- */
.fo-grid {
    overflow: auto;
    max-height: 100%;
}

.fo-grid__head {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ----- ITEM 4 — Single-column sort ----- */
.fo-grid__head--sortable {
    cursor: pointer;
    user-select: none;
}

.fo-grid__head--sortable:hover {
    color: var(--fo-text);
}

.fo-grid__head--sorted {
    color: var(--fo-text);
}

/* Sort affordance for sortable columns. Two stacked Unicode triangles
   (▲ / ▼). Both render faint by default (advertises sortability);
   the active direction flips to solid Flow OES orange via inline style
   from the razor. Unicode-text approach chosen after SVG attribute
   binding via Blazor failed to apply dynamic fill/opacity at runtime. */
.fo-grid__sort-arrows {
    display: inline-flex;
    flex-direction: column;
    margin-left: var(--fo-s-1);
    line-height: 0.85;
    font-size: 11px;                            /* was 8px — too small to see at high DPR */
    vertical-align: middle;
}

.fo-sort-faint  { opacity: 0.3; color: currentColor; }
.fo-sort-active { opacity: 1;   color: #F97316; }   /* brand orange — direction active */

/* ----- ITEM 6 — Empty state slot ----- */
.fo-grid__empty-cell {
    padding: 0;                                 /* the inner .fo-grid__empty handles its own padding */
}

.fo-grid__empty {
    padding: var(--fo-s-8) var(--fo-s-3);       /* 32px top/bottom, 12px sides */
    text-align: center;
    color: var(--fo-text-faint);
    font: var(--fo-t-body);
}

/* ----- ITEM 7 — Capped indicator footer ----- */
.fo-grid__footer {
    display: flex;
    align-items: center;
    gap: var(--fo-s-3);
    padding: var(--fo-s-2) var(--fo-s-3);
    border-top: 1px solid var(--fo-border);
    background: var(--fo-workspace-bg);
    font: var(--fo-t-data-sm);                  /* 400 11px/16px mono */
    color: var(--fo-text-faint);
}

/* Capped indicator chip — modeled after the "LIVE · WEEK 19" chip in
   the Flow OES showcase: soft orange tint, subtle orange ring, leading
   dot. Deviates from the prompt's amber/--fo-warn spec — using
   --fo-orange (the brand accent) so it matches the Quality Hub chip
   language rather than reading as a yellow warning. */
.fo-grid__footer-cap {
    display: inline-flex;
    align-items: center;
    gap: 6px;                                   /* 6px — off-scale; dot-to-text */
    padding: 4px 12px;                          /* 4px / 12px — showcase chip rhythm */
    border: 1px solid rgba(249, 115, 22, 0.25); /* subtle orange ring */
    border-radius: 9999px;                      /* fully rounded capsule */
    background: rgba(249, 115, 22, 0.10);       /* --fo-orange at 10% — soft tint matching LIVE chip */
    color: var(--fo-orange);
    font-weight: 500;
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    font-size: 10px;                            /* 10px — off-scale; caps overline */
}

.fo-grid__footer-cap::before {
    content: "";
    width: 6px;                                 /* 6px — off-scale; chip leading dot */
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ----- ITEM 8 — Dense mode ----- */
.fo-grid--dense .fo-grid__cell {
    height: 28px;                               /* 28px — off the 4px scale; dense row rhythm */
    padding: var(--fo-s-1) var(--fo-s-3);
}

.fo-grid--dense .fo-grid__head {
    padding: 6px var(--fo-s-3);                 /* 6px — off the 4px scale; dense header */
}

/* ----- 2b — Page-header grain tag ----- */
/* Small bordered pill next to the applied view name. Caps mono with
   tracking, slate-faint to stay subordinate to the title. Informational
   only — no hover, no click affordance. */
.fo-grain-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;                           /* 2px / 8px — off-scale; minimal pill */
    border: 1px solid var(--fo-border);
    border-radius: 9999px;
    font: 500 10px/14px var(--fo-font-mono);
    letter-spacing: var(--fo-tracking-caps);
    text-transform: uppercase;
    color: var(--fo-text-faint);
    background: var(--fo-workspace-bg);
}

/* ----- ITEM 5 — Single-row selection ----- */
.fo-grid__row {
    cursor: pointer;
}

.fo-grid__row:hover {
    background: #f8fafc;                        /* showcase hex — verbatim per prompt */
}

.fo-grid__row--selected {
    background: #fff7ed;                        /* showcase hex — verbatim per prompt */
}

.fo-grid__row--selected .fo-grid__cell:first-child {
    box-shadow: inset 3px 0 0 var(--fo-orange); /* 3px — off the 4px scale; brand accent rail */
}