@ketvietlab/ketsuite 0.1.2 → 0.1.3

package/dist/modules/backend/design/admin.css

@@ -1,4229 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────────────
-   KetSuite backend — enterprise-dense application styling.
-
-   The [data-ui] attributes are the stable interface. Rules stay intentionally
-   shallow so ket.user can override them without specificity fights.
-   ───────────────────────────────────────────────────────────────────────────── */
-
-/* The stable hook inventory is generated beside the components in
-   packages/ketsuite/src/ui/* and locked by test/backend-ui.test.ts. Keeping a
-   second hand-written list here was the drift this kit was created to remove. */
-
-@layer ket.app {
-  :where(*, *::before, *::after) {
-    box-sizing: border-box;
-  }
-
-  :where([hidden]) {
-    display: none !important;
-  }
-
-  :where(html) {
-    min-block-size: 100%;
-    background: var(--admin-bg);
-    font-family: var(--admin-font);
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-  }
-
-  :where(body) {
-    min-block-size: 100%;
-    margin: 0;
-    background: var(--admin-bg);
-    color: var(--admin-ink);
-    font-family: inherit;
-    font-size: var(--admin-size-base);
-    line-height: 1.45;
-  }
-
-  :where(button, input, select, textarea) {
-    color: inherit;
-    font: inherit;
-  }
-
-  :where(button, a) {
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :where(a) {
-    color: inherit;
-  }
-
-  :where(button, [href], input, select, textarea, summary):focus-visible {
-    outline: 2px solid var(--admin-focus-border);
-    outline-offset: 2px;
-  }
-
-  ::selection {
-    background: var(--admin-accent-line);
-    color: var(--admin-ink);
-  }
-
-  * {
-    scrollbar-color: var(--admin-line-strong) transparent;
-    scrollbar-width: thin;
-  }
-
-  /* ── Application shell ─────────────────────────────────────────────────── */
-
-  [data-ui="shell"] {
-    display: grid;
-    grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
-    min-inline-size: 0;
-    background: var(--admin-bg);
-  }
-
-  body > [data-ui="shell"] {
-    min-block-size: 100dvh;
-  }
-
-  /* ── Sidebar ───────────────────────────────────────────────────────────────
-     Ported from vidoo_backend_theme, so the framework and the Odoo deployment
-     look like one product: 228px, a quiet tinted ground, and one column that
-     carries the brand, a menu search, the apps, the open app's menu, and the
-     systray at the foot. There is no application bar across the top — the row
-     above the content is the control panel, and it belongs to the view. */
-
-  [data-ui="sidebar"] {
-    z-index: 20;
-    display: flex;
-    min-inline-size: 0;
-    flex-direction: column;
-    overflow: hidden;
-    padding: 0;
-    background: var(--admin-bg);
-    border-inline-end: 1px solid var(--admin-line);
-    white-space: nowrap;
-  }
-
-  [data-ui="sidebar-main"] {
-    display: flex;
-    min-block-size: 0;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    flex-direction: column;
-    overflow: hidden;
-  }
-
-  [data-ui="sidebar-header"] {
-    flex-shrink: 0;
-    padding: 0.75rem 0.75rem 0.5rem;
-  }
-
-  [data-ui="sidebar-brand"] {
-    display: flex;
-    inline-size: 100%;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.5rem;
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink);
-    font-size: 0.875rem;
-    font-weight: 600;
-    text-decoration: none;
-    transition: background-color var(--admin-motion-fast);
-  }
-
-  [data-ui="sidebar-brand"]:hover {
-    background: var(--admin-surface);
-  }
-
-  [data-ui="sidebar-brand-name"] {
-    overflow: hidden;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    text-overflow: ellipsis;
-  }
-
-  [data-ui="sidebar-brand-chevron"] {
-    display: grid;
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--admin-ink-muted);
-  }
-
-  /* The menu search, not the record search. This one narrows the sidebar; the
-     one in the control panel narrows the list. Both are GET forms. */
-  [data-ui="sidebar-search"] {
-    position: relative;
-    flex-shrink: 0;
-    margin: 0 0.75rem 0.625rem;
-  }
-
-  [data-ui="sidebar-search-icon"] {
-    position: absolute;
-    inset-inline-start: 0.625rem;
-    inset-block-start: 50%;
-    display: grid;
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-    place-items: center;
-    color: var(--admin-ink-muted);
-    pointer-events: none;
-    transform: translateY(-50%);
-  }
-
-  [data-ui="sidebar-search-input"] {
-    inline-size: 100%;
-    padding: 0.4375rem 0.625rem 0.4375rem 1.875rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font: inherit;
-    font-size: 0.8125rem;
-    line-height: 1.3;
-    outline: none;
-    transition:
-      border-color var(--admin-motion-fast),
-      box-shadow var(--admin-motion-fast);
-  }
-
-  [data-ui="sidebar-search-input"]::placeholder {
-    color: var(--admin-ink-muted);
-  }
-
-  [data-ui="sidebar-search-input"]:focus {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-  }
-
-  /* The scroll lives here, not on the sidebar: the brand, the search and the
-     foot stay put while forty menu entries move under them. */
-  [data-ui="sidebar-nav"] {
-    flex: 1 1 auto;
-    padding: 0 0.5rem 0.75rem;
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-width: none;
-  }
-
-  [data-ui="sidebar-nav"]::-webkit-scrollbar {
-    display: none;
-  }
-
-  [data-ui="sidebar-section-label"] {
-    margin: 0.875rem 0.5rem 0.375rem;
-    color: var(--admin-ink-secondary);
-    font-size: 0.6875rem;
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    line-height: 1.2;
-    text-transform: uppercase;
-  }
-
-  [data-ui="sidebar-section-label"]:first-child {
-    margin-block-start: 0;
-  }
-
-  [data-ui="sidebar-section-label"][data-scope="app"] {
-    margin-block-start: 1.125rem;
-    padding-block-start: 0.75rem;
-    border-block-start: 1px solid var(--admin-line);
-  }
-
-  [data-ui="sidebar-empty"] {
-    margin: 0.5rem;
-    color: var(--admin-ink-muted);
-    font-size: 0.75rem;
-    white-space: normal;
-  }
-
-  [data-ui="app-list"],
-  [data-ui="menu"],
-  [data-ui="menu-section-children"] {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  [data-ui="app-entry"],
-  [data-ui="menu-item"] {
-    display: flex;
-    min-inline-size: 0;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.3125rem 0.5rem;
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    line-height: 1.35;
-    text-decoration: none;
-    transition:
-      background-color var(--admin-motion-fast),
-      color var(--admin-motion-fast);
-  }
-
-  [data-ui="app-entry"]:hover,
-  [data-ui="menu-item"]:hover {
-    background: var(--admin-surface);
-  }
-
-  [data-ui="app-entry"][data-active="true"],
-  [data-ui="menu-item"][data-active="true"] {
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-    font-weight: 600;
-  }
-
-  [data-ui="app-icon"] {
-    display: grid;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--admin-ink-secondary);
-  }
-
-  [data-ui="menu-icon"] {
-    display: grid;
-    inline-size: 1rem;
-    block-size: 1rem;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--admin-ink-secondary);
-  }
-
-  [data-ui="app-entry"][data-active="true"] [data-ui="app-icon"] {
-    color: var(--admin-focus-border);
-  }
-
-  [data-ui="app-monogram"] {
-    display: grid;
-    inline-size: 1.125rem;
-    block-size: 1.125rem;
-    place-items: center;
-    border-radius: var(--admin-radius-xs);
-    background: var(--admin-surface-hover);
-    font-size: 0.625rem;
-    font-weight: 700;
-  }
-
-  [data-ui="app-name"],
-  [data-ui="menu-label"] {
-    overflow: hidden;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    text-overflow: ellipsis;
-  }
-
-  [data-ui="icon"] {
-    display: block;
-    inline-size: 1em;
-    block-size: 1em;
-  }
-
-  [data-ui="app-icon"] > [data-ui="icon"],
-  [data-ui="menu-icon"] > [data-ui="icon"],
-  [data-ui="sidebar-brand-chevron"] > [data-ui="icon"],
-  [data-ui="sidebar-search-icon"] > [data-ui="icon"],
-  [data-ui="menu-section-chevron"] > [data-ui="icon"],
-  [data-ui="chrome-search-icon"] > [data-ui="icon"],
-  [data-ui="indicator-icon"] > [data-ui="icon"],
-  [data-ui="pager-step"] > [data-ui="icon"],
-  [data-ui="view-kind"] > [data-ui="icon"],
-  [data-ui="facet-remove"] > [data-ui="icon"],
-  [data-ui="col-config-open"] > [data-ui="icon"] {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  [data-ui="pager-step"] > [data-ui="icon"],
-  [data-ui="view-kind"] > [data-ui="icon"],
-  [data-ui="col-config-open"] > [data-ui="icon"] {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-  }
-
-  [data-ui="chrome-search-icon"] {
-    display: grid;
-    inline-size: 0.8125rem;
-    block-size: 0.8125rem;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--admin-ink-muted);
-  }
-
-  [data-ui="chrome-create"] > [data-ui="icon"] {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-    margin-inline-end: 0.25rem;
-  }
-
-  [data-ui="indicator-icon"] {
-    display: grid;
-    inline-size: 1rem;
-    block-size: 1rem;
-    place-items: center;
-  }
-
-  /* ── The open app's menu ───────────────────────────────────────────────── */
-
-  [data-ui="menu-item-wrap"] {
-    display: block;
-  }
-
-  [data-ui="menu-section-title"] {
-    display: flex;
-    inline-size: 100%;
-    align-items: center;
-    gap: 0.375rem;
-    padding: 0.375rem 0.5rem 0.25rem;
-    margin-block-start: 0.125rem;
-    border-radius: var(--admin-radius-sm);
-    cursor: pointer;
-    list-style: none;
-    transition: background-color var(--admin-motion-fast);
-  }
-
-  [data-ui="menu-section-title"]:hover {
-    background: var(--admin-surface);
-  }
-
-  [data-ui="menu-section-title"]::-webkit-details-marker {
-    display: none;
-  }
-
-  [data-ui="menu-section-chevron"] {
-    display: grid;
-    inline-size: 0.625rem;
-    block-size: 0.625rem;
-    flex-shrink: 0;
-    place-items: center;
-    color: var(--admin-ink-secondary);
-    transition: transform var(--admin-motion-fast);
-  }
-
-  [data-ui="menu-section"][open] > [data-ui="menu-section-title"] [data-ui="menu-section-chevron"] {
-    transform: rotate(90deg);
-  }
-
-  [data-ui="menu-section-text"] {
-    overflow: hidden;
-    color: var(--admin-ink-secondary);
-    font-size: 0.6875rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-  }
-
-  /* A rule down the side, so depth is legible without counting indents. */
-  [data-ui="menu-section-children"] {
-    margin-inline-start: 1rem;
-    padding-inline-start: 0.75rem;
-    border-inline-start: 1px solid var(--admin-line);
-  }
-
-  [data-ui="menu-item-wrap"][data-depth="1"] > * > [data-ui="menu-section-children"],
-  [data-ui="menu-item-wrap"][data-depth="2"] > * > [data-ui="menu-section-children"] {
-    margin-inline-start: 0.75rem;
-  }
-
-  [data-ui="menu-dot"] {
-    inline-size: 0.25rem;
-    block-size: 0.25rem;
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: var(--admin-ink-muted);
-  }
-
-  [data-ui="menu-item"][data-active="true"] [data-ui="menu-dot"] {
-    background: var(--admin-focus-border);
-  }
-
-  [data-ui="menu-item"][data-active="true"] [data-ui="menu-icon"] {
-    color: var(--admin-focus-border);
-  }
-
-  /* ── List chrome ───────────────────────────────────────────────────────────
-     The row above a list: what you can add, where you are, what you filtered on,
-     which slice you are looking at, and how you want to look at it. Every one of
-     them is a link or a form — no client state, so the back button works. */
-
-  [data-ui="chrome-lead"],
-  [data-ui="chrome-tail"] {
-    display: flex;
-    min-inline-size: 0;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-  }
-
-  [data-ui="chrome-lead"] {
-    flex: 0 1 auto;
-  }
-
-  [data-ui="chrome-tail"] {
-    flex: 0 0 auto;
-  }
-
-  [data-ui="chrome-create"] {
-    display: inline-flex;
-    min-block-size: var(--admin-control-height);
-    align-items: center;
-    padding-inline: 0.75rem;
-    border: 1px solid transparent;
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-accent);
-    color: var(--admin-accent-ink);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    text-decoration: none;
-  }
-
-  [data-ui="crumbs"] {
-    display: flex;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="crumb"] {
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    text-decoration: none;
-  }
-
-  [data-ui="crumb"][aria-current="page"] {
-    color: var(--admin-ink);
-    font-weight: 600;
-  }
-
-  /* The separator is CSS, so the markup stays a plain list of names. */
-  [data-ui="crumb"] + [data-ui="crumb"]::before {
-    margin-inline-end: var(--admin-gap-xs);
-    color: var(--admin-ink-muted);
-    content: "/";
-  }
-
-  [data-ui="chrome-search"] {
-    display: flex;
-    inline-size: min(100%, 32rem);
-    margin-inline: auto;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    min-block-size: var(--admin-control-height);
-    padding-inline: 0.5rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-  }
-
-  [data-ui="chrome-search"]:focus-within {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-  }
-
-  [data-ui="chrome-search-input"] {
-    flex: 1 1 8rem;
-    min-inline-size: 6rem;
-    border: 0;
-    background: none;
-    color: var(--admin-ink);
-    font: inherit;
-    font-size: 0.8125rem;
-    outline: none;
-  }
-
-  /* A facet is what you filtered on, and the × is how you undo it. Both visible:
-     a filter you cannot see is a list that is lying about how much it has. */
-  [data-ui="facet"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-    font-size: 0.75rem;
-    font-weight: 600;
-  }
-
-  [data-ui="facet-remove"] {
-    display: grid;
-    inline-size: 1rem;
-    block-size: 1rem;
-    place-items: center;
-    border-radius: var(--admin-radius-sm);
-    color: inherit;
-    line-height: 1;
-    text-decoration: none;
-  }
-
-  [data-ui="search-menu"] {
-    position: relative;
-    flex: 0 0 auto;
-  }
-
-  [data-ui="search-menu-open"] {
-    display: inline-flex;
-    min-block-size: 1.75rem;
-    align-items: center;
-    gap: 0.25rem;
-    padding-inline: 0.5rem;
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink-secondary);
-    cursor: pointer;
-    font-size: 0.75rem;
-    font-weight: 600;
-    list-style: none;
-  }
-
-  [data-ui="search-menu-open"]::-webkit-details-marker {
-    display: none;
-  }
-
-  [data-ui="search-menu-open"] > [data-ui="icon"] {
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-  }
-
-  [data-ui="search-menu-content"] {
-    position: absolute;
-    z-index: 20;
-    inset-block-start: calc(100% + 0.375rem);
-    inset-inline-end: 0;
-    display: grid;
-    min-inline-size: 14rem;
-    max-block-size: 24rem;
-    padding: 0.375rem;
-    overflow: auto;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-float);
-  }
-
-  [data-ui="search-menu-item"] {
-    display: flex;
-    min-block-size: 2rem;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0.5rem;
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink);
-    font-size: 0.8125rem;
-    text-decoration: none;
-  }
-
-  a[data-ui="search-menu-item"]:hover,
-  a[data-ui="search-menu-item"][data-active="true"] {
-    background: var(--admin-accent-soft);
-  }
-
-  [data-ui="search-menu-item"][data-nested="true"] {
-    display: grid;
-    block-size: auto;
-    color: var(--admin-ink-secondary);
-    font-size: 0.75rem;
-    font-weight: 700;
-  }
-
-  [data-ui="custom-filter"] {
-    display: grid;
-    gap: 0.375rem;
-    margin: 0.375rem 0 0;
-    padding: 0.5rem 0 0;
-    border: 0;
-    border-block-start: 1px solid var(--admin-line);
-  }
-
-  [data-ui="custom-filter"] select,
-  [data-ui="custom-filter"] input,
-  [data-ui="custom-filter"] button {
-    min-block-size: 2rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font: inherit;
-  }
-
-  [data-ui="custom-filter"] button {
-    background: var(--admin-accent);
-    color: var(--admin-accent-ink);
-    cursor: pointer;
-  }
-
-  [data-ui="pager"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: 0.75rem;
-    font-variant-numeric: tabular-nums;
-  }
-
-  [data-ui="pager-step"] {
-    display: grid;
-    inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    place-items: center;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink);
-    font-size: 0.875rem;
-    line-height: 1;
-    text-decoration: none;
-  }
-
-  /* An arrow with nowhere to go stays put and says so, rather than disappearing —
-     a toolbar that changes width as you page is a toolbar you cannot aim at. */
-  [data-ui="pager-step"][aria-disabled="true"] {
-    border-color: var(--admin-line);
-    color: var(--admin-ink-muted);
-    cursor: default;
-  }
-
-  [data-ui="group-pager"] > td {
-    text-align: end;
-  }
-
-  [data-ui="group-pager"] > td > span,
-  [data-ui="group-pager"] > td > a {
-    display: inline-grid;
-    min-inline-size: 2rem;
-    min-block-size: 2rem;
-    place-items: center;
-    color: var(--admin-ink-secondary);
-    text-decoration: none;
-  }
-
-  [data-ui="group-pager"] > td > span:first-child {
-    display: inline;
-    margin-inline-end: var(--admin-gap-xs);
-    font-size: 0.75rem;
-  }
-
-  [data-ui="view-switch"] {
-    display: inline-flex;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    overflow: hidden;
-  }
-
-  [data-ui="view-kind"] {
-    display: grid;
-    inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    place-items: center;
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    line-height: 1;
-    text-decoration: none;
-  }
-
-  [data-ui="view-kind"] + [data-ui="view-kind"] {
-    border-inline-start: 1px solid var(--admin-line-strong);
-  }
-
-  [data-ui="view-kind"][data-active="true"] {
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-  }
-
-  /* ── Kanban ───────────────────────────────────────────────────────────────── */
-
-  [data-ui="kanban"] {
-    display: grid;
-    gap: var(--admin-gap-sm);
-    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-  }
-
-  [data-ui="kanban-card"] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--admin-gap-xs);
-    padding: var(--admin-gap-sm);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-
-  [data-ui="kanban-title"] {
-    margin: 0;
-    color: var(--admin-ink);
-    font-size: 0.875rem;
-    font-weight: 600;
-  }
-
-  [data-ui="kanban-meta"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="kanban-note"] {
-    margin: 0;
-    color: var(--admin-ink-secondary);
-    font-size: 0.75rem;
-  }
-
-  [data-ui="main"] {
-    min-inline-size: 0;
-  }
-
-  [data-ui="topbar"] {
-    z-index: 10;
-    display: flex;
-    min-block-size: var(--admin-topbar-height);
-    align-items: center;
-    gap: var(--admin-gap);
-    padding-inline: var(--admin-gap);
-    background: color-mix(in srgb, var(--admin-surface) 94%, transparent);
-    border-block-end: 1px solid var(--admin-line);
-    backdrop-filter: blur(10px);
-  }
-
-  body > [data-ui="shell"] [data-ui="topbar"] {
-    position: sticky;
-    inset-block-start: 0;
-  }
-
-  [data-ui="context-switcher"] {
-    display: flex;
-    min-inline-size: 0;
-    max-inline-size: min(24rem, 42vw);
-    flex-direction: column;
-    margin-inline-start: auto;
-    padding: 0.375rem 0.625rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    text-align: end;
-    text-decoration: none;
-    transition:
-      border-color var(--admin-motion-fast),
-      background-color var(--admin-motion-fast);
-  }
-
-  [data-ui="context-switcher"]:hover,
-  [data-ui="context-switcher"]:focus-visible {
-    border-color: var(--admin-accent-line);
-    background: var(--admin-accent-soft);
-  }
-
-  [data-ui="context-company"],
-  [data-ui="context-branch"] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  [data-ui="context-company"] {
-    font-size: var(--admin-size-sm);
-    font-weight: 650;
-  }
-
-  [data-ui="context-branch"] {
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-xs);
-  }
-
-  [data-ui="title"] {
-    margin: 0;
-    flex: 0 0 auto;
-    white-space: nowrap;
-    color: var(--admin-ink);
-    font-size: var(--admin-size-lg);
-    font-weight: 700;
-    letter-spacing: -0.015em;
-    line-height: 1.25;
-  }
-
-  [data-ui="content"] {
-    inline-size: 100%;
-    min-inline-size: 0;
-    padding: var(--admin-gap) var(--admin-gap) var(--admin-gap-lg);
-    overflow-x: auto;
-  }
-
-  /* Screens that are reading rather than scanning keep their measure. */
-  [data-ui="content"]:has([data-ui="app-groups"]),
-  [data-ui="content"]:has([data-ui="tokens"]) {
-    inline-size: min(100%, var(--admin-page-max));
-    margin-inline: auto;
-  }
-
-  /* A list runs to both edges of the pane and starts directly under the bar:
-     the border, the radius and the drop shadow were drawing a card around
-     something that is not a card. */
-  [data-ui="content"]:has([data-ui="table-scroll"]):not(:has([data-ui="record-workspace"])) {
-    padding: 0;
-  }
-
-  [data-ui="content"]:has([data-ui="table-scroll"]):not(:has([data-ui="record-workspace"]))
-    [data-ui="table-scroll"] {
-    border-radius: 0;
-    border-block-start: 0;
-    border-inline: 0;
-    box-shadow: none;
-  }
-
-  /* ── App registry ──────────────────────────────────────────────────────── */
-
-  [data-ui="app-groups"] {
-    display: grid;
-    gap: 1.375rem;
-  }
-
-  [data-ui="app-group"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: var(--admin-gap-sm);
-  }
-
-  [data-ui="group-title"] {
-    margin: 0;
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-    font-weight: 700;
-    letter-spacing: 0.075em;
-    line-height: 1.4;
-    text-transform: uppercase;
-  }
-
-  [data-ui="app-grid"] {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
-    gap: var(--admin-gap);
-  }
-
-  [data-ui="app-card"] {
-    position: relative;
-    display: grid;
-    min-inline-size: 0;
-    min-block-size: 10rem;
-    grid-template-rows: auto auto 1fr auto;
-    padding: var(--admin-gap-md);
-    overflow: hidden;
-    border: 1px solid var(--admin-line);
-    border-block-start: 2px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-
-  [data-ui="app-card"][data-state="installed"] {
-    border-block-start-color: var(--admin-accent);
-  }
-
-  [data-ui="app-title"] {
-    min-inline-size: 0;
-    margin: 0;
-    color: var(--admin-ink);
-    font-size: 0.9375rem;
-    font-weight: 700;
-    letter-spacing: -0.01em;
-    line-height: 1.35;
-    overflow-wrap: anywhere;
-  }
-
-  [data-ui="app-summary"] {
-    min-inline-size: 0;
-    margin: 0.25rem 0 0;
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    line-height: 1.45;
-    overflow-wrap: anywhere;
-  }
-
-  [data-ui="app-meta"] {
-    display: grid;
-    min-inline-size: 0;
-    grid-template-columns: max-content minmax(0, 1fr);
-    align-content: start;
-    gap: 0.1875rem var(--admin-gap-sm);
-    margin: var(--admin-gap) 0 0;
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-sm);
-    line-height: 1.35;
-  }
-
-  [data-ui="app-meta"] dt {
-    color: var(--admin-ink-secondary);
-    font-weight: 600;
-  }
-
-  [data-ui="app-meta"] dd {
-    min-inline-size: 0;
-    margin: 0;
-    overflow-wrap: anywhere;
-  }
-
-  [data-ui="app-meta-value"][data-kind="dependents"] {
-    color: var(--admin-ink-secondary);
-    font-weight: 600;
-  }
-
-  [data-ui="app-actions"] {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-block-start: var(--admin-gap);
-    padding-block-start: var(--admin-gap);
-    border-block-start: 1px solid var(--admin-line);
-  }
-
-  [data-ui="app-action"] {
-    /* A button and a link both wear this. The rule was written for the button, so
-     an anchor got the border and none of the shape: min-block-size does nothing
-     to an inline box, and the browser kept its underline. Now it fits either. */
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    min-block-size: var(--admin-control-height);
-    padding-inline: 0.75rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink-secondary);
-    cursor: pointer;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    line-height: 1;
-    transition:
-      background-color var(--admin-motion-fast),
-      border-color var(--admin-motion-fast),
-      color var(--admin-motion-fast),
-      transform var(--admin-motion-fast);
-  }
-
-  [data-ui="app-action"][data-action="install"] {
-    border-color: var(--admin-accent);
-    background: var(--admin-accent);
-    color: var(--admin-accent-ink);
-  }
-
-  [data-ui="app-action"]:active:not(:disabled) {
-    transform: translateY(1px);
-  }
-
-  [data-ui="app-action"]:disabled {
-    border-color: var(--admin-line);
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-disabled);
-    cursor: not-allowed;
-    opacity: 0.8;
-    transform: none;
-  }
-
-  /* ── Data list ────────────────────────────────────────────────────────── */
-
-  /* ── Data table ────────────────────────────────────────────────────────────
-     One table, drawn the same way everywhere: columns arrive as data, so the row
-     height, the header and the overflow behaviour are decided here once and no
-     module gets to disagree.
-
-     The scroll box is the important part. A wide list must scroll inside itself,
-     because a page that scrolls sideways takes the sidebar with it. */
-
-  [data-ui="table-scroll"] {
-    overflow-x: auto;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-
-  [data-ui="table"] {
-    inline-size: 100%;
-    border-spacing: 0;
-    background: var(--admin-surface);
-    /* auto, not fixed: a name column and a status column do not want the same
-       share of the width, and nothing here knows which is which. */
-    table-layout: auto;
-  }
-
-  [data-ui="table"] th {
-    position: sticky;
-    z-index: 1;
-    inset-block-start: 0;
-    block-size: 2rem;
-    padding: 0 var(--admin-gap);
-    background: var(--admin-surface-subtle);
-    border-block-end: 1px solid var(--admin-line);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-    font-weight: 700;
-    letter-spacing: 0.055em;
-    line-height: 1.2;
-    text-align: start;
-    text-transform: uppercase;
-    white-space: nowrap;
-  }
-
-  [data-ui="row"] {
-    block-size: var(--admin-row-height);
-  }
-
-  [data-ui="group-row"] td {
-    padding: 0;
-    border-block-end: 1px solid var(--admin-line);
-    background: var(--admin-surface-subtle);
-  }
-
-  [data-ui="group-link"] {
-    display: flex;
-    min-block-size: var(--admin-row-height);
-    align-items: center;
-    gap: 0.5rem;
-    padding-inline: var(--admin-gap);
-    color: var(--admin-ink);
-    font-size: 0.8125rem;
-    font-weight: 650;
-    text-decoration: none;
-  }
-
-  [data-ui="group-indent"] {
-    inline-size: calc(var(--group-depth) * 1rem);
-    flex: 0 0 auto;
-  }
-
-  [data-ui="group-link"] > [data-ui="icon"] {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-  }
-
-  [data-ui="group-count"] {
-    min-inline-size: 1.5rem;
-    margin-inline-start: auto;
-    padding: 0.125rem 0.375rem;
-    border-radius: 999px;
-    background: var(--admin-surface-hover);
-    color: var(--admin-ink-secondary);
-    font-size: 0.75rem;
-    font-variant-numeric: tabular-nums;
-    text-align: center;
-  }
-
-  [data-ui="row"]:last-child td {
-    border-block-end: 0;
-  }
-
-  [data-ui="row"] td {
-    padding: 0.375rem var(--admin-gap);
-    border-block-end: 1px solid var(--admin-line);
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    line-height: 1.35;
-    text-align: start;
-    vertical-align: middle;
-    transition: background-color var(--admin-motion-fast);
-  }
-
-  /* The first column is what you are looking for; everything else qualifies it. */
-  [data-ui="row"] td:first-child {
-    color: var(--admin-ink);
-    font-weight: 500;
-  }
-
-  [data-ui="row-link"] {
-    color: inherit;
-    text-underline-offset: 0.14em;
-  }
-
-  [data-ui="cell"] code {
-    color: var(--admin-ink);
-    font-family: var(--admin-font-mono);
-    font-size: var(--admin-size-sm);
-    font-variant-numeric: tabular-nums;
-    overflow-wrap: anywhere;
-  }
-
-  /* Numbers line up on the right, everywhere, so a column can be read down. */
-  [data-ui="table"] [data-align="end"] {
-    text-align: end;
-    font-variant-numeric: tabular-nums;
-  }
-
-  [data-ui="col-actions"],
-  [data-ui="cell-actions"] {
-    inline-size: var(--admin-control-height);
-  }
-
-  /* ── Choosing columns ──────────────────────────────────────────────────────
-     A <details> and a list of links. Not checkboxes in a form: a checkbox needs
-     a handler to mean anything, and a handler is client state (D43). Each entry
-     is the same list with one more column, or one fewer. */
-
-  [data-ui="col-config"] {
-    position: relative;
-  }
-
-  [data-ui="col-config-open"] {
-    display: grid;
-    inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    place-items: center;
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink-secondary);
-    cursor: pointer;
-    font-size: 0.75rem;
-    line-height: 1;
-    list-style: none;
-  }
-
-  [data-ui="col-config-open"]::-webkit-details-marker {
-    display: none;
-  }
-
-  [data-ui="col-config-menu"] {
-    position: absolute;
-    z-index: 30;
-    inset-block-start: calc(100% + 0.25rem);
-    inset-inline-end: 0;
-    display: flex;
-    min-inline-size: 10rem;
-    flex-direction: column;
-    padding: 0.25rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-
-  [data-ui="col-toggle"] {
-    display: flex;
-    min-block-size: 1.75rem;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    padding-inline: 0.375rem;
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    text-decoration: none;
-    text-transform: none;
-    letter-spacing: normal;
-    white-space: nowrap;
-  }
-
-  [data-ui="col-toggle"][data-on="true"] {
-    color: var(--admin-ink);
-    font-weight: 600;
-  }
-
-  [data-ui="col-toggle-mark"] {
-    inline-size: 0.75rem;
-    flex: 0 0 auto;
-    color: var(--admin-accent-text);
-  }
-
-  /* ── Status ────────────────────────────────────────────────────────────────
-     The tone is named for what it means, not for what it looks like. A design
-     team that wants "draft" amber changes one rule and every draft follows. */
-
-  [data-ui="badge"] {
-    display: inline-flex;
-    min-block-size: 1.375rem;
-    align-items: center;
-    gap: 0.3125rem;
-    padding-inline: 0.4375rem;
-    border-radius: var(--admin-radius-sm);
-    font-size: var(--admin-size-xs);
-    font-weight: 600;
-    line-height: 1.2;
-    white-space: nowrap;
-  }
-
-  [data-ui="badge"]::before {
-    inline-size: 0.375rem;
-    block-size: 0.375rem;
-    flex: 0 0 auto;
-    border-radius: 50%;
-    background: currentColor;
-    content: "";
-  }
-
-  [data-ui="badge"][data-tone="neutral"] {
-    background: var(--admin-neutral-soft);
-    color: var(--admin-neutral);
-  }
-
-  [data-ui="badge"][data-tone="info"] {
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-  }
-
-  [data-ui="badge"][data-tone="positive"] {
-    background: var(--admin-success-soft);
-    color: var(--admin-success);
-  }
-
-  [data-ui="badge"][data-tone="warning"] {
-    background: var(--admin-warning-soft);
-    color: var(--admin-warning);
-  }
-
-  [data-ui="badge"][data-tone="danger"] {
-    background: var(--admin-danger-soft);
-    color: var(--admin-danger);
-  }
-
-  [data-ui="qr-code"] {
-    display: block;
-    max-inline-size: 100%;
-    block-size: auto;
-    image-rendering: pixelated;
-  }
-
-  /* ── People ────────────────────────────────────────────────────────────────
-     Initials, not a photograph: nothing stores one yet, and a broken image in
-     every row is worse than no image. This stays as the fallback either way. */
-
-  [data-ui="person"] {
-    display: inline-flex;
-    min-inline-size: 0;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="person-name"] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  [data-ui="avatar"] {
-    display: grid;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    flex: 0 0 auto;
-    place-items: center;
-    border-radius: 50%;
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-    font-size: 0.625rem;
-    font-weight: 700;
-    letter-spacing: 0.02em;
-    line-height: 1;
-  }
-
-  /* ── Settings token list ──────────────────────────────────────────────── */
-
-  [data-ui="tokens"] {
-    display: grid;
-    gap: var(--admin-gap-sm);
-  }
-
-  [data-ui="token-list"] {
-    margin: 0;
-    overflow: hidden;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-
-  [data-ui="token"] {
-    display: grid;
-    min-block-size: 2.5rem;
-    grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr);
-    align-items: center;
-    border-block-end: 1px solid var(--admin-line);
-  }
-
-  [data-ui="token"]:last-child {
-    border-block-end: 0;
-  }
-
-  [data-ui="token-name"],
-  [data-ui="token-value"] {
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0.625rem var(--admin-gap);
-    overflow-wrap: anywhere;
-  }
-
-  [data-ui="token-name"] {
-    color: var(--admin-ink);
-    font-family: var(--admin-font-mono);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-
-  [data-ui="token-value"] {
-    border-inline-start: 1px solid var(--admin-line);
-    color: var(--admin-ink-secondary);
-    font-family: var(--admin-font-mono);
-    font-size: var(--admin-size-sm);
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* ── Feedback states ──────────────────────────────────────────────────── */
-
-  [data-ui="empty"] {
-    display: grid;
-    max-inline-size: 38rem;
-    justify-items: start;
-    gap: var(--admin-gap-xs);
-    margin: var(--admin-gap-md) auto;
-    padding: var(--admin-gap-md);
-    border: 1px dashed var(--admin-line-strong);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-
-  [data-ui="empty-message"],
-  [data-ui="empty-hint"],
-  [data-ui="error-code"],
-  [data-ui="error-message"],
-  [data-ui="error-hint"] {
-    margin: 0;
-  }
-
-  [data-ui="empty-message"] {
-    color: var(--admin-ink);
-    font-size: var(--admin-size-base);
-    font-weight: 700;
-  }
-
-  [data-ui="empty-hint"] {
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-  }
-
-  [data-ui="error"] {
-    display: grid;
-    max-inline-size: 48rem;
-    gap: var(--admin-gap-xs);
-    margin: var(--admin-gap-md) auto;
-    padding: var(--admin-gap-md);
-    border: 1px solid var(--admin-danger-line);
-    border-inline-start: 3px solid var(--admin-danger);
-    border-radius: var(--admin-radius);
-    background: var(--admin-danger-soft);
-    color: var(--admin-status-fixed-ink);
-  }
-
-  [data-ui="error-code"] {
-    color: var(--admin-danger);
-    font-family: var(--admin-font-mono);
-    font-size: var(--admin-size-xs);
-    font-weight: 700;
-    letter-spacing: 0.035em;
-  }
-
-  [data-ui="error-message"] {
-    font-size: 0.8125rem;
-    font-weight: 600;
-  }
-
-  [data-ui="error-hint"] {
-    margin-block-start: var(--admin-gap-xs);
-    padding-block-start: var(--admin-gap-sm);
-    border-block-start: 1px solid var(--admin-danger-line);
-    color: var(--admin-status-fixed-ink-secondary);
-    font-size: 0.8125rem;
-  }
-
-  /* ── Design catalogue ─────────────────────────────────────────────────── */
-
-  [data-ui="catalogue"] {
-    inline-size: min(100%, 108rem);
-    margin-inline: auto;
-    padding: var(--admin-gap-lg);
-  }
-
-  [data-ui="catalogue-nav"] {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: 50;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--admin-gap-xs);
-    margin: calc(var(--admin-gap-lg) * -1) calc(var(--admin-gap-lg) * -1) var(--admin-gap-xl);
-    padding: var(--admin-gap) var(--admin-gap-lg);
-    background: color-mix(in srgb, var(--admin-bg) 94%, transparent);
-    border-block-end: 1px solid var(--admin-line);
-    backdrop-filter: blur(12px);
-  }
-
-  [data-ui="catalogue-nav"] a {
-    block-size: var(--admin-control-height);
-    padding-inline: 0.5rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-    line-height: 1.25;
-    text-decoration: none;
-  }
-
-  [data-ui="catalogue-case"] {
-    display: grid;
-    gap: var(--admin-gap);
-    margin-block-end: 3rem;
-    scroll-margin-block-start: 5rem;
-  }
-
-  [data-ui="catalogue-head"] {
-    display: grid;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="catalogue-head"] h2,
-  [data-ui="catalogue-head"] p {
-    margin: 0;
-  }
-
-  [data-ui="catalogue-head"] h2 {
-    color: var(--admin-ink);
-    font-size: var(--admin-size-md);
-    font-weight: 700;
-    letter-spacing: -0.01em;
-  }
-
-  [data-ui="catalogue-head"] p {
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-  }
-
-  [data-ui="catalogue-frame"] {
-    min-inline-size: 0;
-    max-block-size: 46rem;
-    overflow: auto;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-lg);
-    background: var(--admin-bg);
-    box-shadow: var(--admin-shadow-card);
-  }
-
-  [data-ui="catalogue-frame"] > [data-ui="shell"] {
-    min-inline-size: 50rem;
-    min-block-size: 26rem;
-  }
-
-  [data-ui="catalogue-frame"] > :is([data-ui="empty"], [data-ui="error"]) {
-    margin-block: 3rem;
-  }
-
-  /* ── Pointer states ───────────────────────────────────────────────────── */
-
-  @media (hover: hover) {
-    [data-ui="nav-item"]:hover {
-      background: var(--admin-surface);
-      color: var(--admin-ink);
-    }
-
-    [data-ui="nav-item"][data-active="true"]:hover {
-      background: var(--admin-accent-soft);
-      color: var(--admin-accent-text);
-    }
-
-    [data-ui="app-action"]:hover:not(:disabled) {
-      border-color: var(--admin-line-strong);
-      background: var(--admin-surface-hover);
-      color: var(--admin-ink);
-    }
-
-    [data-ui="app-action"][data-action="install"]:hover:not(:disabled) {
-      border-color: var(--admin-accent-hover);
-      background: var(--admin-accent-hover);
-      color: var(--admin-accent-ink);
-    }
-
-    [data-ui="row"]:hover td {
-      background: var(--admin-surface-hover);
-    }
-
-    [data-ui="catalogue-nav"] a:hover {
-      border-color: var(--admin-accent-line);
-      background: var(--admin-accent-soft);
-      color: var(--admin-accent-text);
-    }
-  }
-
-  /* ── Responsive composition ───────────────────────────────────────────── */
-
-  @media (max-width: 63.9375rem) {
-    [data-ui="content"] {
-      padding-inline: var(--admin-gap-md);
-    }
-
-    [data-ui="topbar"] {
-      padding-inline: var(--admin-gap-md);
-    }
-
-    [data-ui="table"] {
-      min-inline-size: 100%;
-    }
-  }
-
-  @media (max-width: 47.9375rem) {
-    :root {
-      --admin-topbar-height: 3.25rem;
-    }
-
-    [data-ui="shell"] {
-      display: block;
-    }
-
-    [data-ui="sidebar"],
-    body > [data-ui="shell"] > [data-ui="sidebar"] {
-      position: sticky;
-      inset-block-start: 0;
-      z-index: 30;
-      display: flex;
-      inline-size: 100%;
-      block-size: auto;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--admin-gap-sm);
-      min-block-size: var(--admin-topbar-height);
-      padding: var(--admin-gap-xs) var(--admin-gap-sm);
-      overflow: hidden;
-      background: var(--admin-surface);
-      border-inline-end: 0;
-      border-block-end: 1px solid var(--admin-line);
-    }
-
-    [data-ui="sidebar-header"] {
-      min-inline-size: 0;
-      flex: 1 1 auto;
-      padding: 0;
-    }
-
-    [data-ui="sidebar-brand"] {
-      min-block-size: 2.75rem;
-      padding-inline: var(--admin-gap-sm);
-    }
-
-    [data-ui="sidebar-search"],
-    [data-ui="sidebar-nav"] {
-      display: none;
-    }
-
-    [data-ui="sidebar-foot"] {
-      flex: 0 0 auto;
-      flex-direction: row;
-      align-items: center;
-      gap: var(--admin-gap-xs);
-      margin: 0;
-      padding: 0;
-      border: 0;
-    }
-
-    [data-ui="indicators"] {
-      padding: 0;
-    }
-
-    [data-ui="viewer"] {
-      padding: 0;
-    }
-
-    [data-ui="viewer-who"] {
-      display: none;
-    }
-
-    [data-ui="nav-item"] {
-      min-block-size: 2.75rem;
-      flex: 0 0 auto;
-      padding-inline: 0.625rem;
-      white-space: nowrap;
-    }
-
-    [data-ui="nav-item"][data-active="true"] {
-      box-shadow: inset 0 -2px 0 var(--admin-accent);
-    }
-
-    body > [data-ui="shell"] [data-ui="topbar"] {
-      position: static;
-      flex-wrap: wrap;
-      min-block-size: var(--admin-topbar-height);
-      padding: var(--admin-gap-sm) var(--admin-gap);
-    }
-
-    [data-ui="chrome-lead"] {
-      min-inline-size: 0;
-      flex: 1 1 auto;
-    }
-
-    [data-ui="title"] {
-      overflow: hidden;
-      min-inline-size: 0;
-      text-overflow: ellipsis;
-    }
-
-    [data-ui="chrome-search"] {
-      order: 3;
-      inline-size: 100%;
-      min-block-size: 2.75rem;
-      flex: 1 0 100%;
-      margin: 0;
-    }
-
-    [data-ui="chrome-tail"] {
-      margin-inline-start: auto;
-    }
-
-    [data-ui="chrome-create"],
-    [data-ui="pager-step"],
-    [data-ui="view-kind"] {
-      min-block-size: 2.75rem;
-    }
-
-    [data-ui="pager-step"],
-    [data-ui="view-kind"] {
-      inline-size: 2.75rem;
-      block-size: 2.75rem;
-    }
-
-    [data-ui="content"] {
-      padding: var(--admin-gap) var(--admin-gap) var(--admin-gap-lg);
-    }
-
-    [data-ui="app-grid"] {
-      grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
-    }
-
-    [data-ui="app-action"] {
-      min-block-size: 2.75rem;
-      padding-inline: var(--admin-gap-md);
-    }
-
-    [data-ui="token"] {
-      grid-template-columns: 1fr;
-    }
-
-    [data-ui="token-value"] {
-      padding-block-start: 0;
-      border-inline-start: 0;
-    }
-
-    [data-ui="catalogue"] {
-      padding: var(--admin-gap);
-    }
-
-    [data-ui="catalogue-nav"] {
-      margin: calc(var(--admin-gap) * -1) calc(var(--admin-gap) * -1) var(--admin-gap-lg);
-      padding: var(--admin-gap);
-      flex-wrap: nowrap;
-      overflow-x: auto;
-    }
-  }
-
-  @media (max-width: 29.9375rem) {
-    [data-ui="app-grid"] {
-      grid-template-columns: 1fr;
-    }
-
-    [data-ui="app-card"] {
-      min-block-size: 9.5rem;
-      padding: var(--admin-gap);
-    }
-
-    [data-ui="empty"] {
-      margin-block: var(--admin-gap-md);
-      padding: var(--admin-gap-md);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      scroll-behavior: auto;
-      transition-duration: 0.01ms;
-    }
-  }
-
-  @media print {
-    [data-ui="sidebar"],
-    [data-ui="catalogue-nav"] {
-      display: none;
-    }
-
-    [data-ui="shell"] {
-      display: block;
-    }
-
-    [data-ui="topbar"] {
-      position: static;
-    }
-
-    [data-ui="content"] {
-      padding: 0;
-    }
-  }
-}
-
-/* The compact shell is two useful rows: identity/search, then a horizontally
-   scrollable menu for the current app. The old responsive rules changed the
-   sidebar to a row but left its flexing navigation at desktop height, producing
-   more than 500px of empty space above every mobile screen. */
-@media (max-width: 47.9375rem) {
-  [data-ui="sidebar-main"] {
-    display: contents;
-  }
-
-  [data-ui="sidebar"],
-  body > [data-ui="shell"] > [data-ui="sidebar"] {
-    display: grid;
-    grid-template-columns: auto minmax(8rem, 1fr);
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    block-size: auto;
-    padding: var(--admin-gap-sm);
-  }
-  [data-ui="sidebar-header"] {
-    padding: 0;
-  }
-  [data-ui="sidebar-search"] {
-    margin: 0;
-  }
-  [data-ui="sidebar-nav"] {
-    display: block;
-    grid-column: 1 / -1;
-    padding: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-  [data-ui="sidebar-section-label"],
-  [data-ui="app-list"],
-  [data-ui="menu-section-title"],
-  [data-ui="sidebar-foot"] {
-    display: none;
-  }
-  [data-ui="menu"] {
-    display: flex;
-    inline-size: max-content;
-    gap: var(--admin-gap-xs);
-  }
-  [data-ui="menu-item-wrap"],
-  [data-ui="menu-section"] {
-    display: block;
-  }
-  [data-ui="menu-section-children"] {
-    display: flex;
-    inline-size: max-content;
-    gap: var(--admin-gap-xs);
-    margin: 0;
-    padding: 0;
-    border: 0;
-  }
-  [data-ui="menu-item"] {
-    min-block-size: 2.5rem;
-    padding-inline: var(--admin-gap);
-  }
-  [data-ui="menu-dot"] {
-    display: none;
-  }
-
-  /* A list remains a readable list on a narrow screen. Let its own scroll box
-     carry the width instead of squeezing identifiers into one-character lines. */
-  [data-ui="table"] {
-    inline-size: max-content;
-    min-inline-size: 100%;
-  }
-  [data-ui="row"] td,
-  [data-ui="cell"] code {
-    overflow-wrap: normal;
-    white-space: nowrap;
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────────────────────
-   Sign-in, and the identity strip in the topbar.
-
-   Written against the same tokens as everything above, because the sign-in page
-   is the first screen anyone sees and a first screen that does not look like the
-   rest teaches the wrong thing about the rest.
-
-   The form is centred rather than full-width: at 1600px a login stretched across
-   the viewport reads as an error state.
-   ───────────────────────────────────────────────────────────────────────────── */
-
-@layer ket.app {
-  [data-ui="login"] {
-    display: grid;
-    min-block-size: 100dvh;
-    place-items: center;
-    padding: var(--admin-gap-lg);
-    background: var(--admin-bg);
-  }
-
-  [data-ui="login-form"] {
-    display: grid;
-    inline-size: min(24rem, 100%);
-    gap: var(--admin-gap-md);
-    padding: var(--admin-gap-xl);
-    border: 1px solid var(--admin-line);
-    border-block-start: 2px solid var(--admin-accent);
-    border-radius: var(--admin-radius-lg);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-float);
-  }
-
-  [data-ui="login-title"] {
-    margin: 0;
-    color: var(--admin-ink);
-    font-size: var(--admin-size-xl);
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-  }
-
-  /* role="alert", so it is announced as well as seen. */
-  [data-ui="login-error"] {
-    margin: 0;
-    padding: var(--admin-gap-sm) var(--admin-gap-md);
-    border: 1px solid var(--admin-danger-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-danger-soft);
-    color: var(--admin-danger-strong);
-    font-size: var(--admin-size-sm);
-    line-height: 1.4;
-  }
-
-  /* A field is a label wrapping its input, so the whole thing is a click target. */
-  [data-ui="field"] {
-    display: grid;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="field-label"] {
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 500;
-  }
-
-  [data-ui="field-input"] {
-    min-block-size: var(--admin-control-height);
-    padding-inline: 0.625rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-bg);
-    color: var(--admin-ink);
-    font: inherit;
-    font-size: var(--admin-size-base);
-    transition:
-      border-color var(--admin-motion-fast),
-      box-shadow var(--admin-motion-fast);
-  }
-
-  [data-ui="field-input"]:focus-visible {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-    outline: none;
-  }
-
-  [data-ui="login-submit"] {
-    min-block-size: var(--admin-control-height);
-    border: 1px solid var(--admin-accent);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-accent);
-    color: var(--admin-accent-ink);
-    font: inherit;
-    font-size: var(--admin-size-base);
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color var(--admin-motion-fast);
-  }
-
-  [data-ui="login-submit"]:hover {
-    background: var(--admin-accent-hover);
-  }
-
-  [data-ui="login-providers"] {
-    display: grid;
-    gap: var(--admin-gap-sm);
-  }
-
-  [data-ui="login-divider"] {
-    display: flex;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-xs);
-    text-transform: uppercase;
-  }
-
-  [data-ui="login-divider"]::before,
-  [data-ui="login-divider"]::after {
-    block-size: 1px;
-    flex: 1;
-    background: var(--admin-line);
-    content: "";
-  }
-
-  [data-ui="login-provider"] {
-    display: grid;
-    min-block-size: var(--admin-control-height);
-    padding-inline: 0.75rem;
-    place-items: center;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-bg);
-    color: var(--admin-ink);
-    font-size: var(--admin-size-base);
-    font-weight: 600;
-    text-align: center;
-    text-decoration: none;
-    transition:
-      border-color var(--admin-motion-fast),
-      background-color var(--admin-motion-fast);
-  }
-
-  [data-ui="login-provider"]:hover {
-    border-color: var(--admin-accent);
-    background: var(--admin-accent-soft);
-  }
-
-  [data-ui="login-locales"] {
-    display: flex;
-    margin: 0;
-    gap: var(--admin-gap-sm);
-    justify-content: center;
-    font-size: var(--admin-size-xs);
-  }
-
-  [data-ui="login-locale"] {
-    color: var(--admin-ink-muted);
-    text-decoration: none;
-  }
-
-  [data-ui="login-locale"][data-active="true"] {
-    color: var(--admin-accent-text);
-    font-weight: 600;
-  }
-
-  /* ── KétViệt sidebar systray ──────────────────────────────────────────────── */
-
-  /* The old KétViệt footer had one compact operational row, then Settings below
-     a divider. KetSuite keeps that composition while the avatar opens a native
-     account menu, so sign-out remains available without another permanent icon. */
-  [data-ui="sidebar-foot"] {
-    display: flex;
-    position: relative;
-    min-inline-size: 0;
-    flex-direction: column;
-    gap: var(--admin-gap-xs);
-    margin-block-start: auto;
-    padding: var(--admin-gap-sm) 0.625rem var(--admin-gap);
-    border-block-start: 1px solid var(--admin-line);
-  }
-
-  [data-ui="sidebar-tools"] {
-    display: flex;
-    min-inline-size: 0;
-    min-block-size: var(--admin-control-height);
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    padding: 0 0.125rem var(--admin-gap-sm);
-    border-block-end: 1px solid var(--admin-line);
-  }
-
-  [data-ui="indicators"] {
-    display: flex;
-    min-inline-size: 0;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="indicators"] > ket-island[data-island="mail.inbox-indicator"],
-  [data-ui="indicator"][data-kind="message"] {
-    order: 1;
-  }
-
-  [data-ui="indicators"] > ket-island[data-island="activity.indicator"],
-  [data-ui="indicator"][data-kind="activity"] {
-    order: 2;
-  }
-
-  [data-ui="indicator"] {
-    display: inline-flex;
-    min-inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    align-items: center;
-    justify-content: center;
-    gap: 0.375rem;
-    padding-inline: var(--admin-gap-sm);
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    line-height: 1;
-    text-decoration: none;
-    transition:
-      border-color var(--admin-motion-fast),
-      background-color var(--admin-motion-fast),
-      color var(--admin-motion-fast);
-  }
-
-  [data-ui="indicator"]:hover {
-    border-color: var(--admin-ink-muted);
-    background: var(--admin-surface-hover);
-    color: var(--admin-ink);
-  }
-
-  [data-ui="indicator-icon"] {
-    display: grid;
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-    flex: 0 0 auto;
-    place-items: center;
-  }
-
-  [data-ui="indicator-count"] {
-    min-inline-size: 0.75rem;
-    color: var(--admin-ink);
-    font-size: var(--admin-size-sm);
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-    text-align: center;
-  }
-
-  [data-ui="viewer-company-indicator"] {
-    display: grid;
-    inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    flex: 0 0 auto;
-    place-items: center;
-    color: var(--admin-ink-muted);
-  }
-
-  [data-ui="viewer-company-indicator"] > [data-ui="icon"] {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-  }
-
-  [data-ui="viewer"] {
-    position: relative;
-    min-inline-size: 0;
-    margin-inline-start: auto;
-  }
-
-  [data-ui="viewer-trigger"] {
-    position: relative;
-    display: grid;
-    inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    place-items: center;
-    border-radius: var(--admin-radius-sm);
-    cursor: pointer;
-    list-style: none;
-  }
-
-  [data-ui="viewer-trigger"]::-webkit-details-marker {
-    display: none;
-  }
-
-  [data-ui="viewer-trigger"] > [data-ui="avatar"] {
-    inline-size: var(--admin-control-height);
-    block-size: var(--admin-control-height);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-success-icon);
-    color: #fff;
-    font-size: var(--admin-size-base);
-    font-weight: 500;
-  }
-
-  [data-ui="viewer-presence"] {
-    position: absolute;
-    inset-inline-end: -0.125rem;
-    inset-block-end: -0.125rem;
-    inline-size: 0.625rem;
-    block-size: 0.625rem;
-    border-radius: 50%;
-    background: var(--admin-success);
-    box-shadow: 0 0 0 2px var(--admin-bg);
-  }
-
-  [data-ui="viewer-menu"] {
-    position: absolute;
-    inset-inline-end: 0;
-    inset-block-end: calc(100% + var(--admin-gap-sm));
-    z-index: 40;
-    display: grid;
-    inline-size: 12rem;
-    gap: var(--admin-gap-sm);
-    padding: var(--admin-gap-sm);
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-float);
-  }
-
-  [data-ui="viewer-who"] {
-    display: flex;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    flex-direction: column;
-  }
-
-  [data-ui="viewer-name"] {
-    overflow: hidden;
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 500;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* Only rendered when the account belongs to more than one company, so it is
-   always meaningful when it is there. */
-  [data-ui="viewer-company"] {
-    overflow: hidden;
-    padding: 0.125rem 0.5rem;
-    border: 1px solid var(--admin-accent-line);
-    border-radius: var(--admin-radius-xs);
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-    font-size: var(--admin-size-xs);
-    font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  [data-ui="signout"] {
-    display: block;
-  }
-
-  [data-ui="signout-button"] {
-    display: flex;
-    inline-size: 100%;
-    min-block-size: 2.25rem;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    padding-inline: var(--admin-gap-sm);
-    border: 0;
-    border-radius: var(--admin-radius-sm);
-    background: transparent;
-    color: var(--admin-ink-secondary);
-    font: inherit;
-    font-size: var(--admin-size-sm);
-    text-align: start;
-    cursor: pointer;
-    transition:
-      background-color var(--admin-motion-fast),
-      color var(--admin-motion-fast);
-  }
-
-  [data-ui="signout-button"]:hover {
-    background: var(--admin-surface-hover);
-    color: var(--admin-ink);
-  }
-
-  [data-ui="signout-button"] > [data-ui="icon"] {
-    inline-size: 1rem;
-    block-size: 1rem;
-  }
-
-  [data-ui="signout-label"] {
-    min-inline-size: 0;
-  }
-
-  [data-ui="sidebar-settings"] {
-    display: flex;
-    min-block-size: 2rem;
-    align-items: center;
-    padding-inline: var(--admin-gap-sm);
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-sm);
-    font-weight: 500;
-    text-decoration: none;
-    transition:
-      background-color var(--admin-motion-fast),
-      color var(--admin-motion-fast);
-  }
-
-  [data-ui="sidebar-settings"]:hover {
-    background: var(--admin-surface-hover);
-    color: var(--admin-ink);
-  }
-
-  /* Named in the screen contract but never given a rule, so it inherited nothing
-   and sat flush against its sibling. */
-  [data-ui="app-meta-value"][data-kind="depends"] {
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-xs);
-  }
-}
-
-/* ── KetSuite UI kit foundations ────────────────────────────────────────────
-   These rules mirror docs/design-system in kingfruit: operational density,
-   warm neutrals, one decisive primary action, explicit state and 44px compact
-   touch targets. They intentionally add no palette, radius or shadow. */
-
-@layer ket.app {
-  [data-ui="stack"] {
-    display: grid;
-    min-inline-size: 0;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="stack"][data-gap="compact"] {
-    gap: var(--admin-gap-xs);
-  }
-  [data-ui="stack"][data-gap="loose"] {
-    gap: var(--admin-gap-md);
-  }
-
-  [data-ui="inline"] {
-    display: inline-flex;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-
-  [data-ui="code"] {
-    color: var(--admin-ink);
-    font-family: var(--admin-font-mono);
-    font-size: var(--admin-size-sm);
-    font-variant-numeric: tabular-nums;
-    overflow-wrap: anywhere;
-  }
-
-  /* Action hierarchy. Primary is brand-600, not brand-500: normal-size white
-     labels need the stronger token to meet AA. */
-  :where([data-ui="action"], [data-control="action"]) {
-    display: inline-flex;
-    min-block-size: var(--admin-control-height);
-    align-items: center;
-    justify-content: center;
-    gap: var(--admin-gap-xs);
-    padding-inline: 0.625rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    line-height: 1;
-    text-decoration: none;
-    cursor: pointer;
-    transition:
-      background-color var(--admin-motion-fast),
-      border-color var(--admin-motion-fast),
-      color var(--admin-motion-fast),
-      transform var(--admin-motion-fast);
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-size="compact"] {
-    min-block-size: var(--admin-control-height);
-    padding-inline: 0.5rem;
-    border-radius: var(--admin-radius-sm);
-    font-size: 0.8125rem;
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-size="prominent"] {
-    min-block-size: var(--admin-control-height);
-    padding-inline: var(--admin-gap);
-    font-size: 0.8125rem;
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-variant="primary"] {
-    border-color: var(--admin-accent);
-    background: var(--admin-accent);
-    color: var(--admin-accent-ink);
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-variant="tertiary"] {
-    border-color: transparent;
-    background: transparent;
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-variant="destructive"] {
-    border-color: var(--admin-danger-line);
-    background: var(--admin-danger-soft);
-    color: var(--admin-danger-strong);
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-icon-only="true"] {
-    inline-size: var(--admin-control-height);
-    padding: 0;
-  }
-
-  :where([data-ui="action"], [data-control="action"])[data-icon-only="true"][data-size="compact"] {
-    min-block-size: var(--admin-control-height);
-    inline-size: var(--admin-control-height);
-  }
-
-  :where([data-ui="action"], [data-control="action"]):is(:disabled, [aria-disabled="true"]) {
-    border-color: var(--admin-line);
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-disabled);
-    cursor: not-allowed;
-    opacity: 0.82;
-  }
-
-  :where([data-ui="action"], [data-control="action"]):active:not(:disabled, [aria-disabled="true"]) {
-    transform: translateY(1px);
-  }
-  [data-ui="action-icon"] {
-    display: grid;
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-    place-items: center;
-  }
-  [data-ui="action-spinner"] {
-    inline-size: 1rem;
-    block-size: 1rem;
-    border: 2px solid currentColor;
-    border-inline-end-color: transparent;
-    border-radius: 50%;
-    animation: ket-action-spin 700ms linear infinite;
-  }
-  [data-ui="action-group"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-  @keyframes ket-action-spin {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-
-  /* Operational schedule: a real grid rather than a decorative calendar. The
-     label column remains readable while the date range scrolls horizontally. */
-  [data-ui="schedule-scroll"] {
-    max-inline-size: 100%;
-    overflow-x: auto;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-  [data-ui="schedule"] {
-    position: relative;
-    inline-size: 100%;
-  }
-  [data-ui="schedule-head"],
-  [data-ui="schedule-row"] {
-    position: relative;
-    display: grid;
-    min-block-size: 2.75rem;
-  }
-  [data-ui="schedule-head"] {
-    position: sticky;
-    z-index: 4;
-    inset-block-start: 0;
-    background: var(--admin-surface-subtle);
-    border-block-end: 1px solid var(--admin-line-strong);
-  }
-  [data-ui="schedule-row"] {
-    border-block-end: 1px solid var(--admin-line);
-  }
-  [data-ui="schedule-row"]:last-child {
-    border-block-end: 0;
-  }
-  [data-ui="schedule-corner"],
-  [data-ui="schedule-row-label"] {
-    position: sticky;
-    z-index: 3;
-    inset-inline-start: 0;
-    display: flex;
-    min-inline-size: 0;
-    flex-direction: column;
-    justify-content: center;
-    padding: var(--admin-gap-sm) var(--admin-gap);
-    background: var(--admin-surface);
-    border-inline-end: 1px solid var(--admin-line-strong);
-  }
-  [data-ui="schedule-corner"] {
-    z-index: 5;
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-xs);
-    font-weight: 700;
-    letter-spacing: 0.055em;
-    text-transform: uppercase;
-  }
-  [data-ui="schedule-day"] {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-inline-end: 1px solid var(--admin-line);
-    color: var(--admin-ink-secondary);
-  }
-  [data-ui="schedule-day"][data-today="true"] {
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-  }
-  [data-ui="schedule-day-label"],
-  [data-ui="schedule-row-name"] {
-    font-size: var(--admin-size-sm);
-    font-weight: 650;
-  }
-  [data-ui="schedule-day-detail"],
-  [data-ui="schedule-row-detail"] {
-    overflow: hidden;
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-xs);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="schedule-cell"] {
-    grid-row: 1;
-    border-inline-end: 1px solid var(--admin-line);
-  }
-  [data-ui="schedule-cell"][data-today="true"] {
-    background: color-mix(in srgb, var(--admin-accent-soft) 48%, transparent);
-  }
-  [data-ui="schedule-event"] {
-    z-index: 2;
-    grid-row: 1;
-    align-self: center;
-    display: flex;
-    min-inline-size: 0;
-    block-size: 2.25rem;
-    flex-direction: column;
-    justify-content: center;
-    margin-inline: 0.2rem;
-    padding-inline: var(--admin-gap-sm);
-    overflow: hidden;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink-secondary);
-  }
-  [data-ui="schedule-event"][data-tone="neutral"] {
-    background: var(--admin-neutral-soft);
-    color: var(--admin-neutral);
-  }
-  [data-ui="schedule-event"][data-tone="positive"] {
-    border-color: var(--admin-success-icon);
-    background: var(--admin-success-soft);
-    color: var(--admin-success);
-  }
-  [data-ui="schedule-event"][data-tone="info"] {
-    border-color: var(--admin-accent-line);
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-  }
-  [data-ui="schedule-event"][data-tone="warning"] {
-    border-color: var(--admin-warning-icon);
-    background: var(--admin-warning-soft);
-    color: var(--admin-warning);
-  }
-  [data-ui="schedule-event"][data-tone="danger"] {
-    border-color: var(--admin-danger-line);
-    background: var(--admin-danger-soft);
-    color: var(--admin-danger);
-  }
-  [data-ui="schedule-event-title"],
-  [data-ui="schedule-event-detail"] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="schedule-event-title"] {
-    font-size: var(--admin-size-xs);
-  }
-  [data-ui="schedule-event-detail"] {
-    font-size: 0.6875rem;
-    opacity: 0.82;
-  }
-
-  [data-ui="tag"] {
-    display: inline-flex;
-    min-block-size: 1.625rem;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    padding-inline: var(--admin-gap-sm);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-
-  [data-ui="tag-remove"] {
-    color: inherit;
-    font-size: var(--admin-size-md);
-    line-height: 1;
-    text-decoration: none;
-  }
-  [data-ui="count-badge"] {
-    display: inline-grid;
-    min-inline-size: 1.25rem;
-    min-block-size: 1.25rem;
-    place-items: center;
-    padding-inline: 0.3125rem;
-    border-radius: 9999px;
-    background: var(--admin-accent-soft);
-    color: var(--admin-accent-text);
-    font-size: 0.625rem;
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* Dense record workspace: identity and cross-record facts stay above the
-     fold, while collaboration remains visible beside the active business tab. */
-  [data-ui="record-workspace"] {
-    display: grid;
-    min-inline-size: 0;
-    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
-    align-items: start;
-    gap: var(--admin-gap);
-  }
-  [data-ui="record-workspace"][data-has-aside="false"] {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  /* `framed` gives legacy list/form screens the accounting workspace. Rich
-     screens already render their own RecordWorkspace; flatten only the generic
-     wrapper in that case so no duplicate card or heading appears. */
-  [data-ui="record-workspace"][data-page-frame="true"]:has(
-    > [data-ui="record-sheet"] > [data-ui="record-body"] [data-ui="record-workspace"]
-  ),
-  [data-ui="record-workspace"][data-page-frame="true"]:has(
-      > [data-ui="record-sheet"] > [data-ui="record-body"] [data-ui="record-workspace"]
-    )
-    > [data-ui="record-sheet"],
-  [data-ui="record-workspace"][data-page-frame="true"]:has(
-      > [data-ui="record-sheet"] > [data-ui="record-body"] [data-ui="record-workspace"]
-    )
-    > [data-ui="record-sheet"]
-    > [data-ui="record-body"] {
-    display: contents;
-  }
-  [data-ui="record-workspace"][data-page-frame="true"]:has(
-      > [data-ui="record-sheet"] > [data-ui="record-body"] [data-ui="record-workspace"]
-    )
-    > [data-ui="record-sheet"]
-    > [data-ui="record-header"] {
-    display: none;
-  }
-  [data-ui="record-sheet"] {
-    min-inline-size: 0;
-    overflow: hidden;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-  [data-ui="record-header"] {
-    display: flex;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: stretch;
-    justify-content: space-between;
-    gap: var(--admin-gap-md);
-    padding: var(--admin-gap-md);
-    border-block-end: 1px solid var(--admin-line);
-  }
-  [data-ui="record-identity"] {
-    display: grid;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    grid-template-columns: 4.5rem minmax(0, 1fr);
-    align-items: center;
-    gap: var(--admin-gap);
-  }
-  [data-ui="record-thumbnail"] {
-    display: grid;
-    inline-size: 4.5rem;
-    aspect-ratio: 1;
-    overflow: hidden;
-    place-items: center;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="record-thumbnail"] > img {
-    display: block;
-    inline-size: 100%;
-    block-size: 100%;
-    object-fit: cover;
-  }
-  [data-ui="record-thumbnail"] > [data-ui="icon"] {
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-  }
-  [data-ui="record-kicker"],
-  [data-ui="record-heading"],
-  [data-ui="record-subtitle"] {
-    margin: 0;
-  }
-  [data-ui="record-kicker"] {
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-  }
-  [data-ui="record-heading"] {
-    overflow-wrap: anywhere;
-    color: var(--admin-ink);
-    font-size: clamp(1.25rem, 2vw, 1.75rem);
-    font-weight: 650;
-    letter-spacing: -0.025em;
-    line-height: 1.15;
-  }
-  [data-ui="record-subtitle"] {
-    margin-block-start: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-  }
-  [data-ui="record-badges"] {
-    display: flex;
-    min-inline-size: 0;
-    flex: 1 0 100%;
-    flex-wrap: nowrap;
-    align-items: center;
-    gap: var(--admin-gap);
-    padding-inline-start: calc(4.5rem + var(--admin-gap));
-    overflow-x: auto;
-  }
-  [data-ui="record-toggle"] {
-    display: inline-flex;
-    min-block-size: 1.5rem;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-    line-height: 1;
-    white-space: nowrap;
-    cursor: pointer;
-  }
-  [data-ui="record-toggle"][data-disabled="true"] {
-    cursor: default;
-  }
-  [data-ui="record-toggle-input"] {
-    inline-size: 0.875rem;
-    block-size: 0.875rem;
-    margin: 0;
-    accent-color: var(--admin-focus-border);
-  }
-  [data-ui="record-toggle-input"]:focus-visible {
-    outline: 2px solid var(--admin-focus-border);
-    outline-offset: 2px;
-  }
-  [data-ui="record-toggle-input"]:disabled {
-    opacity: 0.8;
-  }
-  [data-ui="record-toggle-label"] {
-    line-height: 1.2;
-  }
-  [data-ui="record-facts"] {
-    display: flex;
-    min-inline-size: 0;
-    flex: 0 1 auto;
-    align-items: stretch;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-subtle);
-  }
-  [data-ui="record-fact"] {
-    display: grid;
-    min-inline-size: 5rem;
-    align-content: center;
-    justify-items: center;
-    gap: 0.0625rem;
-    padding: var(--admin-gap-sm) var(--admin-gap);
-    color: var(--admin-ink);
-    text-align: center;
-    text-decoration: none;
-  }
-  [data-ui="record-fact"] + [data-ui="record-fact"] {
-    border-inline-start: 1px solid var(--admin-line);
-  }
-  [data-ui="record-fact-value"] {
-    max-inline-size: 9rem;
-    overflow: hidden;
-    font-size: var(--admin-size-md);
-    font-variant-numeric: tabular-nums;
-    line-height: 1.15;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="record-fact-label"] {
-    color: var(--admin-ink-muted);
-    font-size: var(--admin-size-xs);
-    white-space: nowrap;
-  }
-  a[data-ui="record-fact"]:hover {
-    background: var(--admin-surface-hover);
-    color: var(--admin-accent-text);
-  }
-  [data-ui="record-navigation"] {
-    min-inline-size: 0;
-    padding-inline: var(--admin-gap);
-  }
-  [data-ui="record-navigation"] [data-ui="tabs"] {
-    border-block-end: 0;
-  }
-  [data-ui="record-controller"]:has(> ket-island:not([hidden]) > :not([hidden])) {
-    padding: var(--admin-gap-sm) var(--admin-gap-md) 0;
-    border-block-start: 1px solid var(--admin-line);
-  }
-  [data-ui="record-controller"] > ket-island {
-    display: contents;
-  }
-  [data-ui="record-body"] {
-    min-inline-size: 0;
-    padding: var(--admin-gap-md);
-    border-block-start: 1px solid var(--admin-line);
-  }
-  [data-ui="record-aside"] {
-    position: sticky;
-    inset-block-start: calc(var(--admin-topbar-height) + var(--admin-gap));
-    display: grid;
-    min-inline-size: 0;
-    max-block-size: calc(100dvh - var(--admin-topbar-height) - 2 * var(--admin-gap));
-    align-content: start;
-    gap: var(--admin-gap);
-    overflow-y: auto;
-  }
-  [data-ui="record-aside"] :is([data-ui="chatter"], [data-ui="activity-record"]) {
-    max-inline-size: none;
-    padding: var(--admin-gap);
-    box-shadow: none;
-  }
-  @media (min-width: 96rem) {
-    [data-ui="record-workspace"][data-has-aside="true"] {
-      grid-template-columns: minmax(0, 2fr) minmax(32rem, 1fr);
-    }
-  }
-  @media (max-width: 72rem) {
-    [data-ui="record-workspace"] {
-      grid-template-columns: minmax(0, 1fr);
-    }
-    [data-ui="record-aside"] {
-      position: static;
-      max-block-size: none;
-      overflow: visible;
-    }
-  }
-  @media (max-width: 47.9375rem) {
-    [data-ui="record-header"] {
-      flex-direction: column;
-      padding: var(--admin-gap);
-    }
-    [data-ui="record-identity"] {
-      grid-template-columns: 3.75rem minmax(0, 1fr);
-    }
-    [data-ui="record-thumbnail"] {
-      inline-size: 3.75rem;
-    }
-    [data-ui="record-heading"] {
-      font-size: 1.25rem;
-    }
-    [data-ui="record-facts"] {
-      inline-size: 100%;
-      overflow-x: auto;
-    }
-    [data-ui="record-fact"] {
-      min-inline-size: 5.5rem;
-      flex: 1 0 auto;
-    }
-    [data-ui="record-badges"] {
-      gap: var(--admin-gap-sm);
-      padding-inline-start: 0;
-    }
-    [data-ui="record-toggle"] {
-      font-size: var(--admin-size-xs);
-    }
-    [data-ui="record-navigation"] {
-      padding-inline: var(--admin-gap-sm);
-    }
-    [data-ui="record-navigation"] [data-ui="tabs"] {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      overflow: visible;
-    }
-    [data-ui="record-navigation"] [data-ui="tabs"]:has(> [data-ui="tab"]:nth-child(3)) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    [data-ui="record-navigation"] [data-ui="tab"] {
-      gap: 0;
-      justify-content: center;
-      padding-inline: var(--admin-gap-xs);
-      font-size: var(--admin-size-xs);
-      line-height: 1.15;
-      text-align: center;
-      white-space: normal;
-    }
-    [data-ui="record-navigation"] [data-ui="tab"] > span {
-      display: none;
-    }
-    [data-ui="record-body"] {
-      padding: var(--admin-gap);
-    }
-  }
-
-  /* Page hierarchy and surfaces. */
-  [data-ui="section"] {
-    display: grid;
-    gap: var(--admin-gap-sm);
-    min-inline-size: 0;
-  }
-  [data-ui="section-head"] {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: var(--admin-gap);
-  }
-  [data-ui="section-eyebrow"],
-  [data-ui="section-title"],
-  [data-ui="section-description"] {
-    margin: 0;
-  }
-  [data-ui="section-eyebrow"] {
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-    font-weight: 700;
-    letter-spacing: 0.075em;
-    text-transform: uppercase;
-  }
-  [data-ui="section-title"] {
-    color: var(--admin-ink);
-    font-size: var(--admin-size-md);
-    line-height: 1.35;
-  }
-  [data-ui="section-description"] {
-    margin-block-start: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-  }
-  [data-ui="section-actions"] {
-    flex: 0 0 auto;
-  }
-  [data-ui="section-body"] {
-    min-inline-size: 0;
-  }
-
-  [data-ui="surface"] {
-    min-inline-size: 0;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-  [data-ui="surface"][data-tone="subtle"] {
-    background: var(--admin-surface-subtle);
-    box-shadow: none;
-  }
-  [data-ui="surface"][data-padding="compact"] {
-    padding: var(--admin-gap);
-  }
-  [data-ui="surface"][data-padding="default"] {
-    padding: var(--admin-gap-md);
-  }
-  [data-ui="surface"][data-padding="none"] {
-    padding: 0;
-  }
-
-  /* Durable record attachments. The upload stays compact, while long file
-     names wrap inside the panel instead of widening the page. */
-  [data-ui="attachments"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: var(--admin-gap);
-  }
-  [data-ui="attachment-list"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: 0;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    list-style: none;
-  }
-  [data-ui="attachment-item"] {
-    display: flex;
-    min-inline-size: 0;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--admin-gap);
-    padding: var(--admin-gap-sm) var(--admin-gap);
-  }
-  [data-ui="attachment-item"] + [data-ui="attachment-item"] {
-    border-block-start: 1px solid var(--admin-line);
-  }
-  [data-ui="attachment-link"] {
-    min-inline-size: 0;
-    overflow-wrap: anywhere;
-    color: var(--admin-accent-text);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    text-decoration: none;
-  }
-  [data-ui="attachment-meta"] {
-    flex: 0 0 auto;
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-    white-space: nowrap;
-  }
-  [data-ui="attachment-upload"] {
-    display: flex;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: end;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="attachment-upload"] > label {
-    display: grid;
-    min-inline-size: min(18rem, 100%);
-    flex: 1 1 18rem;
-    gap: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-  [data-ui="attachment-input"] {
-    inline-size: 100%;
-    min-block-size: var(--admin-control-height);
-    min-inline-size: 0;
-    color: var(--admin-ink);
-    font: inherit;
-  }
-
-  /* Relational selectors keep the short path compact and put full CRUD in the
-     modal. The footer action remains visible even when the relation is empty. */
-  [data-ui="relation-select"] {
-    position: relative;
-    inline-size: 100%;
-    min-inline-size: 0;
-  }
-  [data-ui="relation-native"] {
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    inline-size: 1px;
-    block-size: 1px;
-    opacity: 0;
-    pointer-events: none;
-  }
-  [data-ui="relation-trigger"] {
-    display: flex;
-    inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: var(--admin-control-height);
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--admin-gap-sm);
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  [data-ui="relation-trigger"][data-empty="true"] {
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="relation-trigger"]:focus-visible {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-    outline: none;
-  }
-  [data-ui="relation-value"] {
-    min-inline-size: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="relation-menu"] {
-    position: absolute;
-    inset-block-start: calc(100% + 0.25rem);
-    inset-inline: 0;
-    z-index: 40;
-    display: grid;
-    min-inline-size: min(22rem, calc(100vw - 2rem));
-    overflow: hidden;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-float);
-  }
-  [data-ui="relation-search"] {
-    inline-size: calc(100% - var(--admin-gap-sm) * 2);
-    min-block-size: var(--admin-control-height);
-    margin: var(--admin-gap-sm);
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink);
-    font: inherit;
-  }
-  [data-ui="relation-options"] {
-    display: grid;
-    max-block-size: 16rem;
-    overflow: auto;
-  }
-  [data-ui="relation-option"] {
-    display: grid;
-    min-block-size: var(--admin-control-height);
-    padding: 0.375rem 0.625rem;
-    border: 0;
-    background: transparent;
-    color: var(--admin-ink);
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  [data-ui="relation-option"]:is(:hover, :focus-visible),
-  [data-ui="relation-option"][aria-selected="true"] {
-    background: var(--admin-accent-soft);
-    outline: none;
-  }
-  [data-ui="relation-option"] small {
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="relation-footer"] {
-    display: flex;
-    justify-content: flex-start;
-    padding: var(--admin-gap-xs) var(--admin-gap-sm);
-    border-block-start: 1px solid var(--admin-line);
-  }
-  [data-ui="relation-dialog-toolbar"] {
-    display: flex;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    margin-block-end: var(--admin-gap);
-  }
-  [data-ui="relation-dialog-toolbar"] [data-ui="form-control"] {
-    flex: 1 1 auto;
-  }
-  [data-ui="relation-dialog-list"] {
-    display: grid;
-    margin: 0;
-    padding: 0;
-    border-block-start: 1px solid var(--admin-line);
-    list-style: none;
-  }
-  [data-ui="relation-dialog-row"] {
-    display: grid;
-    min-inline-size: 0;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--admin-gap-sm);
-    padding: var(--admin-gap-sm) 0;
-    border-block-end: 1px solid var(--admin-line);
-  }
-  [data-ui="relation-dialog-main"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: 0.125rem;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--admin-ink);
-    font: inherit;
-    text-align: start;
-    cursor: pointer;
-  }
-  [data-ui="relation-dialog-main"]:focus-visible {
-    outline: 2px solid var(--admin-focus-border);
-    outline-offset: 2px;
-  }
-  [data-ui="relation-dialog-meta"] {
-    overflow: hidden;
-    color: var(--admin-ink-muted);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="relation-dialog-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--admin-gap-xs);
-  }
-  [data-ui="relation-editor"] {
-    display: grid;
-    gap: var(--admin-gap);
-    margin-block-end: var(--admin-gap);
-    padding: var(--admin-gap);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface-subtle);
-  }
-  [data-ui="relation-empty"] {
-    margin: 0;
-    padding: var(--admin-gap);
-    color: var(--admin-ink-muted);
-    text-align: center;
-  }
-  [data-ui="modal-sheet"][data-size="large"] {
-    inline-size: min(56rem, calc(100vw - var(--admin-gap-lg)));
-  }
-  [data-ui="modal-layer"][data-presentation="dialog"] {
-    place-items: center;
-    padding: var(--admin-gap-lg);
-  }
-  [data-ui="modal-layer"][data-presentation="dialog"] [data-ui="modal-sheet"] {
-    inline-size: min(56rem, 100%);
-    block-size: auto;
-    max-block-size: calc(100dvh - var(--admin-gap-lg) * 2);
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-lg);
-    overflow: hidden;
-  }
-
-  /* URL-addressable modal workspace. The backdrop is a real close link and
-     the sheet owns its scroll, so the document never grows horizontally. */
-  [data-ui="modal-layer"] {
-    position: fixed;
-    inset: 0;
-    z-index: 100;
-    display: grid;
-    min-inline-size: 0;
-    justify-items: end;
-  }
-  [data-ui="modal-backdrop"] {
-    position: absolute;
-    inset: 0;
-    display: block;
-    background: color-mix(in srgb, #000 36%, transparent);
-    text-decoration: none;
-  }
-  button[data-ui="modal-backdrop"] {
-    padding: 0;
-    border: 0;
-    cursor: pointer;
-  }
-  [data-ui="modal-backdrop"] > span {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-  }
-  [data-ui="modal-sheet"] {
-    position: relative;
-    z-index: 1;
-    display: grid;
-    inline-size: min(34rem, calc(100vw - var(--admin-gap-lg)));
-    max-inline-size: 100%;
-    block-size: 100dvh;
-    min-inline-size: 0;
-    grid-template-rows: auto minmax(0, 1fr);
-    border-inline-start: 1px solid var(--admin-line-strong);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-float);
-  }
-  [data-ui="modal-head"] {
-    display: flex;
-    min-inline-size: 0;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--admin-gap);
-    padding: var(--admin-gap) var(--admin-gap-md);
-    border-block-end: 1px solid var(--admin-line);
-  }
-  [data-ui="modal-title"] {
-    min-inline-size: 0;
-    margin: 0;
-    overflow: hidden;
-    color: var(--admin-ink);
-    font-size: var(--admin-size-md);
-    line-height: 1.35;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="modal-close"] {
-    display: grid;
-    inline-size: 2.75rem;
-    block-size: 2.75rem;
-    flex: 0 0 auto;
-    place-items: center;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink-secondary);
-    text-decoration: none;
-  }
-  [data-ui="modal-body"] {
-    min-inline-size: 0;
-    overflow: auto;
-    padding: var(--admin-gap-md);
-    overscroll-behavior: contain;
-  }
-
-  [data-ui="media"] {
-    display: grid;
-    min-inline-size: 0;
-    max-inline-size: 44rem;
-    grid-template-columns: minmax(14rem, 24rem) minmax(10rem, 18rem);
-    align-items: start;
-    gap: var(--admin-gap);
-  }
-  [data-ui="media-primary"] {
-    display: block;
-    inline-size: 100%;
-    aspect-ratio: 1;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-lg);
-    object-fit: contain;
-    background: var(--admin-surface-subtle);
-  }
-  [data-ui="media-placeholder"] {
-    display: grid;
-    grid-column: 1 / -1;
-    min-block-size: 10rem;
-    place-items: center;
-    padding: var(--admin-gap-md);
-    border: 1px dashed var(--admin-line);
-    border-radius: var(--admin-radius-lg);
-    color: var(--admin-ink-secondary);
-    text-align: center;
-  }
-  [data-ui="media-gallery"] {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="media-item"] {
-    display: grid;
-    inline-size: 100%;
-    gap: var(--admin-gap-xs);
-    padding: var(--admin-gap-xs);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-  [data-ui="media-item"][data-primary="true"] {
-    border-color: var(--admin-accent-line);
-    box-shadow: 0 0 0 2px var(--admin-focus-ring);
-  }
-  [data-ui="media-item"] > img {
-    display: block;
-    inline-size: 100%;
-    aspect-ratio: 1;
-    border-radius: calc(var(--admin-radius) - var(--admin-gap-xs));
-    object-fit: cover;
-  }
-  [data-ui="media-item-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-  }
-  [data-ui="media-item-actions"] > form {
-    display: inline-flex;
-  }
-  [data-ui="media-actions"] {
-    display: flex;
-    grid-column: 1 / -1;
-    flex-wrap: wrap;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="media-upload"] {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: end;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="media-file-label"] {
-    display: inline-flex;
-    block-size: var(--admin-control-height);
-    min-block-size: var(--admin-control-height);
-    align-items: center;
-    justify-content: center;
-    padding-inline: 0.625rem;
-    border: 1px solid var(--admin-line-strong);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-surface);
-    color: var(--admin-ink-secondary);
-    cursor: pointer;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    line-height: 1;
-  }
-  [data-ui="media-file-label"]:focus-within {
-    outline: 2px solid var(--admin-focus-border);
-    outline-offset: 2px;
-  }
-  [data-ui="media-file-input"] {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    margin: -1px;
-    padding: 0;
-    border: 0;
-    clip-path: inset(50%);
-    overflow: hidden;
-    white-space: nowrap;
-  }
-  [data-ui="media-extension"] {
-    min-inline-size: 0;
-    grid-column: 1 / -1;
-  }
-
-  [data-ui="media"] > :is([data-ui="loading"], [data-ui="error"]) {
-    grid-column: 1 / -1;
-  }
-
-  [data-ui="record-form"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: var(--admin-gap);
-  }
-  [data-ui="form-cluster"] {
-    display: flex;
-    inline-size: 100%;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: end;
-    justify-content: flex-end;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="record-form"][data-layout="actions"] {
-    display: block;
-  }
-  [data-ui="record-form"][data-layout="inline"] {
-    display: grid;
-    min-inline-size: min(100%, 14rem);
-    max-inline-size: 22rem;
-    flex: 0 1 22rem;
-    grid-template-columns: minmax(9rem, 1fr) auto;
-    align-items: end;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="record-form"][data-layout="inline"][data-has-fields="false"] {
-    display: inline-flex;
-    min-inline-size: auto;
-    max-inline-size: none;
-    flex: 0 0 auto;
-  }
-  [data-ui="record-form"][data-layout="inline"] > [data-ui="form-grid"] {
-    display: block;
-  }
-  [data-ui="record-form"][data-layout="inline"] > [data-ui="form-grid"]:empty {
-    display: none;
-  }
-  [data-ui="record-form"][data-layout="inline"] > [data-ui="form-actions"] {
-    grid-column: 2;
-    align-self: end;
-  }
-  [data-ui="form-grid"] {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--admin-gap-sm) var(--admin-gap-lg);
-  }
-  [data-ui="form-field"] {
-    display: grid;
-    min-inline-size: 0;
-    min-block-size: var(--admin-control-height);
-    gap: 0.125rem;
-  }
-  [data-ui="form-field"][data-span="full"] {
-    grid-column: 1 / -1;
-  }
-  [data-ui="form-label"] {
-    color: var(--admin-ink);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-  [data-ui="form-required"] {
-    color: var(--admin-danger);
-    font-weight: 700;
-  }
-  [data-ui="form-control"] {
-    inline-size: 100%;
-    min-block-size: var(--admin-control-height);
-    min-inline-size: 0;
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink);
-    background: var(--admin-surface);
-    font: inherit;
-    font-size: 0.8125rem;
-    line-height: 1.3;
-    transition:
-      border-color var(--admin-motion-fast),
-      box-shadow var(--admin-motion-fast);
-  }
-  :is(input, select)[data-ui="form-control"]:not([type="checkbox"]) {
-    block-size: var(--admin-control-height);
-  }
-  [data-ui="form-control"]:focus-visible {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-    outline: none;
-  }
-  [data-ui="form-control"]:disabled {
-    border-color: var(--admin-line);
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-disabled);
-    cursor: not-allowed;
-  }
-  [data-ui="form-field"][data-invalid="true"] [data-ui="form-control"] {
-    border-color: var(--admin-danger);
-  }
-  textarea[data-ui="form-control"] {
-    min-block-size: 5rem;
-    resize: vertical;
-  }
-  input[type="checkbox"][data-ui="form-control"] {
-    inline-size: 1rem;
-    min-block-size: 1rem;
-    padding: 0;
-    accent-color: var(--admin-focus-border);
-  }
-  [data-ui="form-field"][data-kind="checkbox"] {
-    grid-template-columns: 1rem minmax(0, 1fr);
-    align-content: start;
-    align-items: start;
-    column-gap: var(--admin-gap-sm);
-  }
-  [data-ui="form-field"][data-kind="checkbox"] [data-ui="form-control"] {
-    grid-column: 1;
-    grid-row: 1;
-    margin-block-start: 0.0625rem;
-  }
-  [data-ui="form-field"][data-kind="checkbox"]
-    :is([data-ui="form-label"], [data-ui="form-help"], [data-ui="form-error"]) {
-    grid-column: 2;
-  }
-  [data-ui="form-options"] {
-    display: flex;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap);
-  }
-  [data-ui="form-option"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-    cursor: pointer;
-  }
-  [data-ui="form-option-input"] {
-    inline-size: 1rem;
-    block-size: 1rem;
-    margin: 0;
-    accent-color: var(--admin-focus-border);
-  }
-  [data-ui="form-option-input"]:disabled {
-    opacity: 0.8;
-    cursor: not-allowed;
-  }
-  [data-ui="form-help"] {
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-  }
-  [data-ui="form-error"] {
-    color: var(--admin-danger-strong);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-
-  [data-ui="date-picker"] {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: end;
-    gap: var(--admin-gap-sm);
-    min-inline-size: 0;
-  }
-  [data-ui="date-picker"] fieldset {
-    display: grid;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-    border: 0;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="date-picker-label"] {
-    padding: 0;
-    color: var(--admin-ink);
-    font-size: var(--admin-size-sm);
-    font-weight: 700;
-  }
-  [data-ui="date-picker-fields"] {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(10rem, 1fr));
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="date-picker"][data-range="false"] [data-ui="date-picker-fields"] {
-    grid-template-columns: minmax(10rem, 18rem);
-  }
-  [data-ui="date-picker-field"] {
-    display: grid;
-    min-inline-size: 0;
-    grid-template-columns: minmax(4.5rem, 6rem) minmax(0, 1fr);
-    align-items: center;
-    gap: 0.125rem var(--admin-gap-sm);
-  }
-  [data-ui="date-picker-field-label"] {
-    grid-column: 1;
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-    font-weight: 600;
-  }
-  [data-ui="date-picker-required"] {
-    color: var(--admin-danger);
-    font-weight: 700;
-  }
-  [data-ui="date-picker-control-wrap"] {
-    position: relative;
-    display: grid;
-    align-items: center;
-    min-inline-size: 0;
-    grid-column: 2;
-  }
-  [data-ui="date-picker-icon"] {
-    position: absolute;
-    inset-inline-start: var(--admin-gap-sm);
-    z-index: 1;
-    display: inline-grid;
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-    place-items: center;
-    color: var(--admin-ink-muted);
-    pointer-events: none;
-  }
-  [data-ui="date-picker-control"] {
-    inline-size: 100%;
-    block-size: var(--admin-control-height);
-    min-block-size: var(--admin-control-height);
-    min-inline-size: 0;
-    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius-sm);
-    color: var(--admin-ink);
-    background: var(--admin-surface);
-    font: inherit;
-    font-size: 0.8125rem;
-    line-height: 1.3;
-    color-scheme: light dark;
-    transition:
-      border-color var(--admin-motion-fast),
-      box-shadow var(--admin-motion-fast);
-  }
-  [data-ui="date-picker-control"]:focus-visible {
-    border-color: var(--admin-focus-border);
-    box-shadow: 0 0 0 3px var(--admin-focus-ring);
-    outline: none;
-  }
-  [data-ui="date-picker-control"]:disabled {
-    background: var(--admin-surface-subtle);
-    color: var(--admin-ink-disabled);
-    cursor: not-allowed;
-  }
-  [data-ui="date-picker-field"][data-invalid="true"] [data-ui="date-picker-control"] {
-    border-color: var(--admin-danger);
-  }
-  [data-ui="date-picker-help"] {
-    grid-column: 2;
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-xs);
-  }
-  [data-ui="date-picker-error"] {
-    grid-column: 2;
-    color: var(--admin-danger-strong);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-  [data-ui="date-picker-actions"] {
-    padding-block-end: 0.0625rem;
-  }
-  [data-ui="form-errors"] {
-    margin: 0;
-    padding: var(--admin-gap-sm) var(--admin-gap);
-    border: 1px solid var(--admin-danger-line);
-    border-inline-start: 3px solid var(--admin-danger);
-    border-radius: var(--admin-radius-sm);
-    background: var(--admin-danger-soft);
-    color: var(--admin-status-fixed-ink);
-    font-size: var(--admin-size-sm);
-  }
-  [data-ui="form-actions"] {
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  /* Record forms use the label/value rhythm of operational ERP screens.
-     Labels stay scannable in a narrow rail while controls consume the remaining
-     measure. Narrow screens return to the simpler stacked field. */
-  [data-ui="record-form"][data-layout="default"]
-    > [data-ui="form-grid"]
-    > [data-ui="form-field"]:not([data-kind="checkbox"]) {
-    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
-    align-items: center;
-    column-gap: var(--admin-gap);
-  }
-
-  [data-ui="record-form"][data-layout="default"]
-    > [data-ui="form-grid"]
-    > [data-ui="form-field"]:not([data-kind="checkbox"])
-    > [data-ui="form-label"] {
-    grid-column: 1;
-    align-self: center;
-  }
-
-  [data-ui="record-form"][data-layout="default"]
-    > [data-ui="form-grid"]
-    > [data-ui="form-field"]:not([data-kind="checkbox"])
-    > :is([data-ui="form-control"], [data-ui="form-options"], [data-ui="form-help"], [data-ui="form-error"]) {
-    grid-column: 2;
-  }
-
-  [data-ui="record-form"][data-layout="default"]
-    > [data-ui="form-grid"]
-    > [data-ui="form-field"][data-kind="textarea"] {
-    align-items: start;
-  }
-
-  [data-ui="record-form"][data-layout="default"]
-    > [data-ui="form-grid"]
-    > [data-ui="form-field"][data-kind="textarea"]
-    > [data-ui="form-label"] {
-    margin-block-start: 0.375rem;
-  }
-
-  @media (max-width: 42rem) {
-    [data-ui="date-picker"] {
-      grid-template-columns: minmax(0, 1fr);
-      align-items: stretch;
-    }
-    [data-ui="date-picker-fields"],
-    [data-ui="date-picker"][data-range="false"] [data-ui="date-picker-fields"] {
-      grid-template-columns: minmax(0, 1fr);
-    }
-    [data-ui="date-picker-actions"],
-    [data-ui="date-picker-actions"] [data-ui="action-group"] {
-      inline-size: 100%;
-    }
-    [data-ui="date-picker-actions"] [data-ui="action"] {
-      flex: 1 1 8rem;
-    }
-    [data-ui="media"] {
-      max-inline-size: none;
-      grid-template-columns: minmax(0, 1fr);
-    }
-    [data-ui="media-gallery"],
-    [data-ui="media-actions"],
-    [data-ui="media-extension"],
-    [data-ui="media"] > :is([data-ui="loading"], [data-ui="error"]) {
-      grid-column: 1;
-    }
-    [data-ui="form-grid"] {
-      grid-template-columns: minmax(0, 1fr);
-    }
-    [data-ui="form-field"][data-span="full"] {
-      grid-column: auto;
-    }
-    [data-ui="record-form"][data-layout="default"]
-      > [data-ui="form-grid"]
-      > [data-ui="form-field"]:not([data-kind="checkbox"]) {
-      grid-template-columns: minmax(0, 1fr);
-      align-items: stretch;
-    }
-    [data-ui="record-form"][data-layout="default"]
-      > [data-ui="form-grid"]
-      > [data-ui="form-field"]:not([data-kind="checkbox"])
-      > :is(
-        [data-ui="form-label"],
-        [data-ui="form-control"],
-        [data-ui="form-options"],
-        [data-ui="form-help"],
-        [data-ui="form-error"]
-      ) {
-      grid-column: 1;
-    }
-    [data-ui="record-form"][data-layout="default"]
-      > [data-ui="form-grid"]
-      > [data-ui="form-field"][data-kind="textarea"]
-      > [data-ui="form-label"] {
-      margin-block-start: 0;
-    }
-    [data-ui="form-actions"],
-    [data-ui="form-actions"] [data-ui="action-group"] {
-      inline-size: 100%;
-    }
-    [data-ui="form-actions"] [data-ui="action"] {
-      flex: 1 1 10rem;
-    }
-    [data-ui="form-cluster"] {
-      align-items: stretch;
-    }
-    [data-ui="record-form"][data-layout="inline"] {
-      min-inline-size: 100%;
-      max-inline-size: none;
-      flex-basis: 100%;
-    }
-    [data-ui="record-form"][data-layout="inline"][data-has-fields="false"] {
-      min-inline-size: 100%;
-    }
-    [data-ui="relation-menu"] {
-      position: fixed;
-      inset: auto var(--admin-gap-sm) var(--admin-gap-sm);
-      max-block-size: min(28rem, calc(100dvh - var(--admin-gap-lg)));
-    }
-    [data-ui="relation-options"] {
-      max-block-size: min(18rem, 45dvh);
-    }
-    [data-ui="relation-dialog-toolbar"],
-    [data-ui="relation-dialog-row"] {
-      grid-template-columns: minmax(0, 1fr);
-    }
-    [data-ui="relation-dialog-toolbar"] {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-    }
-    [data-ui="relation-dialog-row"] {
-      align-items: stretch;
-    }
-    [data-ui="relation-dialog-actions"] {
-      justify-content: flex-end;
-    }
-    [data-ui="relation-dialog-actions"] [data-ui="action"] {
-      flex: 0 0 auto;
-    }
-    [data-ui="modal-layer"][data-presentation="dialog"] {
-      padding: 0;
-    }
-    [data-ui="modal-layer"][data-presentation="dialog"] [data-ui="modal-sheet"] {
-      inline-size: 100%;
-      block-size: 100dvh;
-      max-block-size: 100dvh;
-      border: 0;
-      border-radius: 0;
-    }
-  }
-
-  [data-ui="card-grid"] {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
-    gap: var(--admin-gap);
-  }
-  [data-ui="content-card"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: var(--admin-gap);
-    padding: var(--admin-gap);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    box-shadow: var(--admin-shadow-card);
-  }
-  [data-ui="card-head"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: var(--admin-gap-xs);
-  }
-  [data-ui="content-card"][data-selected="true"] {
-    border-color: var(--admin-accent-line);
-    box-shadow: 0 0 0 2px var(--admin-focus-ring);
-  }
-  [data-ui="card-title"],
-  [data-ui="card-summary"] {
-    margin: 0;
-  }
-  [data-ui="card-title"] {
-    color: var(--admin-ink);
-    font-size: var(--admin-size-base);
-    line-height: 1.35;
-  }
-  [data-ui="card-title"] a {
-    color: inherit;
-    text-decoration: none;
-  }
-  [data-ui="card-summary"],
-  [data-ui="card-meta"] {
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-  }
-  [data-ui="card-body"] {
-    min-inline-size: 0;
-    color: var(--admin-ink);
-  }
-  [data-ui="card-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--admin-gap-sm);
-    padding-block-start: var(--admin-gap);
-    border-block-start: 1px solid var(--admin-line);
-  }
-
-  [data-ui="metric"] {
-    display: grid;
-    min-inline-size: 0;
-    gap: var(--admin-gap-xs);
-    padding: var(--admin-gap);
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-  }
-  [data-ui="card-grid"]:has(> [data-ui="metric"]) {
-    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  }
-  [data-ui="metric-label"],
-  [data-ui="metric-value"],
-  [data-ui="metric-detail"] {
-    margin: 0;
-  }
-  [data-ui="metric-label"] {
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    font-weight: 600;
-  }
-  [data-ui="metric-value"] {
-    color: var(--admin-ink);
-    font-size: var(--admin-size-xl);
-    font-weight: 700;
-    font-variant-numeric: tabular-nums;
-    line-height: 1.25;
-  }
-  @media (max-width: 29.9375rem) {
-    [data-ui="metric"][data-tone="night-audit-amount"] [data-ui="metric-value"] {
-      font-size: var(--admin-size-lg);
-      overflow-wrap: anywhere;
-    }
-  }
-  [data-ui="metric-detail"] {
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-  }
-
-  /* Secondary navigation for deep records. */
-  [data-ui="breadcrumbs"] ol {
-    display: flex;
-    min-inline-size: 0;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-  [data-ui="breadcrumb"] {
-    display: inline-flex;
-    min-inline-size: 0;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-  }
-  [data-ui="breadcrumb"]:not(:last-child)::after {
-    color: var(--admin-ink-muted);
-    content: "/";
-  }
-  [data-ui="breadcrumb"] a {
-    color: inherit;
-  }
-  [data-ui="breadcrumb"] [aria-current="page"] {
-    color: var(--admin-ink);
-    font-weight: 600;
-  }
-  [data-ui="tabs"] {
-    display: flex;
-    min-inline-size: 0;
-    gap: var(--admin-gap-xs);
-    overflow-x: auto;
-    border-block-end: 1px solid var(--admin-line);
-  }
-  [data-ui="tab"] {
-    display: inline-flex;
-    min-block-size: var(--admin-control-height);
-    flex: 0 0 auto;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    padding-block-start: 0.25rem;
-    padding-inline: var(--admin-gap);
-    border-block-end: 2px solid transparent;
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    text-decoration: none;
-  }
-  [data-ui="tab"][data-active="true"] {
-    border-block-end-color: var(--admin-accent);
-    color: var(--admin-accent-text);
-  }
-
-  /* Compact operational records for mobile and narrow side panels. */
-  [data-ui="record-list"] {
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    border: 1px solid var(--admin-line);
-    border-radius: var(--admin-radius);
-    background: var(--admin-surface);
-    list-style: none;
-  }
-  [data-ui="record-row"] + [data-ui="record-row"] {
-    border-block-start: 1px solid var(--admin-line);
-  }
-  [data-ui="record-row"] > a {
-    display: flex;
-    min-block-size: 3rem;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--admin-gap);
-    padding: var(--admin-gap-sm) var(--admin-gap);
-    color: inherit;
-    text-decoration: none;
-  }
-  [data-ui="record-copy"] {
-    display: flex;
-    min-inline-size: 0;
-    flex: 1 1 auto;
-    flex-direction: column;
-  }
-  [data-ui="record-title"] {
-    overflow: hidden;
-    color: var(--admin-ink);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="record-summary"] {
-    overflow: hidden;
-    color: var(--admin-ink-secondary);
-    font-size: var(--admin-size-sm);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="record-value"] {
-    flex: 0 0 auto;
-    color: var(--admin-ink);
-    font-size: 0.8125rem;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* Inline feedback and loading. */
-  [data-ui="notice"] {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    align-items: start;
-    gap: var(--admin-gap-sm);
-    padding: var(--admin-gap-sm);
-    border: 1px solid var(--admin-accent-line);
-    border-inline-start: 3px solid var(--admin-accent);
-    border-radius: var(--admin-radius);
-    background: var(--admin-accent-soft);
-    color: var(--admin-ink);
-  }
-  [data-ui="notice"][data-tone="positive"] {
-    border-color: var(--admin-success-icon);
-    background: var(--admin-success-soft);
-  }
-  [data-ui="notice"][data-tone="warning"] {
-    border-color: var(--admin-warning-icon);
-    background: var(--admin-warning-soft);
-  }
-  [data-ui="notice"][data-tone="danger"] {
-    border-color: var(--admin-danger-line);
-    border-inline-start-color: var(--admin-danger);
-    background: var(--admin-danger-soft);
-  }
-  [data-ui="notice"][data-tone="positive"],
-  [data-ui="notice"][data-tone="warning"],
-  [data-ui="notice"][data-tone="danger"] {
-    color: var(--admin-status-fixed-ink);
-  }
-  [data-ui="notice-icon"] {
-    display: grid;
-    inline-size: 1.25rem;
-    block-size: 1.25rem;
-    place-items: center;
-  }
-  [data-ui="notice-copy"] {
-    min-inline-size: 0;
-  }
-  [data-ui="notice-title"],
-  [data-ui="notice-message"] {
-    margin: 0;
-  }
-  [data-ui="notice-title"] {
-    font-size: 0.8125rem;
-    font-weight: 700;
-  }
-  [data-ui="notice-message"] {
-    margin-block-start: 0.125rem;
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-  }
-  [data-ui="notice"][data-tone="positive"] [data-ui="notice-message"],
-  [data-ui="notice"][data-tone="warning"] [data-ui="notice-message"],
-  [data-ui="notice"][data-tone="danger"] [data-ui="notice-message"] {
-    color: var(--admin-status-fixed-ink-secondary);
-  }
-  [data-ui="notice-actions"],
-  [data-ui="empty-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--admin-gap-sm);
-  }
-
-  [data-ui="loading"] {
-    display: grid;
-    max-inline-size: 42rem;
-    gap: var(--admin-gap);
-    padding: var(--admin-gap-md);
-  }
-  [data-ui="loading-label"] {
-    color: var(--admin-ink-secondary);
-    font-size: 0.8125rem;
-    font-weight: 600;
-  }
-  [data-ui="skeleton"] {
-    display: grid;
-    gap: var(--admin-gap-sm);
-  }
-  [data-ui="skeleton-line"] {
-    display: block;
-    block-size: 0.75rem;
-    border-radius: var(--admin-radius-xs);
-    background: var(--admin-surface-subtle);
-  }
-  [data-ui="skeleton-line"]:nth-child(2n) {
-    inline-size: 82%;
-  }
-  [data-ui="skeleton-line"]:nth-child(3n) {
-    inline-size: 64%;
-  }
-
-  [data-ui="table-caption"] {
-    padding: var(--admin-gap);
-    color: var(--admin-ink);
-    font-size: 0.8125rem;
-    font-weight: 700;
-    text-align: start;
-  }
-  [data-ui="sort-link"] {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--admin-gap-xs);
-    color: inherit;
-    text-decoration: none;
-  }
-  [data-ui="sort-icon"] {
-    display: grid;
-    inline-size: 0.75rem;
-    block-size: 0.75rem;
-    place-items: center;
-    color: var(--admin-accent-text);
-  }
-  [data-ui="action-label"],
-  [data-ui="col"],
-  [data-ui="facet-label"] {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  [data-ui="empty-icon"] {
-    display: grid;
-    inline-size: 2.5rem;
-    block-size: 2.5rem;
-    place-items: center;
-    color: var(--admin-ink-muted);
-  }
-  [data-ui="kanban-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--admin-gap-sm);
-    margin-block-start: auto;
-  }
-  [data-ui="pager-range"] {
-    font-variant-numeric: tabular-nums;
-    white-space: nowrap;
-  }
-
-  @media (hover: hover) {
-    :where([data-ui="action"], [data-control="action"]):hover:not(:disabled, [aria-disabled="true"]),
-    [data-ui="record-row"] > a:hover {
-      border-color: var(--admin-line-strong);
-      background: var(--admin-surface-hover);
-      color: var(--admin-ink);
-    }
-    :where([data-ui="action"], [data-control="action"])[data-variant="primary"]:hover:not(:disabled) {
-      border-color: var(--admin-accent-hover);
-      background: var(--admin-accent-hover);
-      color: var(--admin-accent-ink);
-    }
-    :where([data-ui="action"], [data-control="action"])[data-variant="destructive"]:hover:not(:disabled) {
-      border-color: var(--admin-danger);
-      background: var(--admin-danger);
-      color: #fff;
-    }
-    [data-ui="content-card"][data-interactive="true"]:hover {
-      border-color: var(--admin-accent-line);
-      box-shadow: var(--admin-shadow-float);
-      transform: translateY(-2px);
-    }
-  }
-
-  @media (max-width: 47.9375rem) {
-    :where([data-ui="action"], [data-control="action"])[data-size] {
-      min-block-size: 2.75rem;
-    }
-    [data-ui="modal-layer"][data-presentation="dialog"]
-      [data-ui="relation-dialog-actions"]
-      [data-ui="action"][data-size="compact"] {
-      min-block-size: var(--admin-control-height);
-    }
-    :where([data-ui="action"], [data-control="action"])[data-icon-only="true"][data-size] {
-      inline-size: 2.75rem;
-    }
-    [data-ui="section-head"],
-    [data-ui="notice"] {
-      grid-template-columns: 1fr;
-      flex-direction: column;
-    }
-    [data-ui="section-actions"],
-    [data-ui="notice-actions"] {
-      inline-size: 100%;
-    }
-    [data-ui="surface"][data-padding="default"] {
-      padding: var(--admin-gap-md);
-    }
-    [data-ui="card-grid"] {
-      grid-template-columns: 1fr;
-    }
-    [data-ui="attachment-item"] {
-      align-items: flex-start;
-      flex-direction: column;
-      gap: var(--admin-gap-xs);
-    }
-    [data-ui="modal-sheet"] {
-      inline-size: 100%;
-      border-inline-start: 0;
-    }
-    [data-ui="table"] [data-priority="tertiary"] {
-      display: none;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-ui="action-spinner"] {
-      animation: none;
-    }
-    [data-ui="content-card"] {
-      transform: none !important;
-    }
-  }
-}
-
-@media (max-width: 47.9375rem) {
-  [data-ui="sidebar-foot"] {
-    display: none;
-  }
-}