@ketvietlab/ketsuite 0.1.2 → 0.1.5

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

@@ -0,0 +1,809 @@
+/* Shared cards, navigation, record lists and feedback components. */
+
+@layer ket.app {
+  [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-divider-subtle);
+    border-radius: var(--admin-radius);
+    background: var(--admin-card);
+    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-divider-subtle);
+    border-radius: var(--admin-radius);
+    background: var(--admin-card);
+  }
+  /* A metric that is a link is the same card; only the whole of it is the target,
+     since there is nothing else inside one to click. */
+  a[data-ui="metric"] {
+    color: inherit;
+    text-decoration: none;
+  }
+  a[data-ui="metric"]:hover {
+    border-color: var(--admin-line);
+    background: var(--admin-card-hover);
+  }
+  [data-ui="card-grid"]:has(> [data-ui="metric"]) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+  }
+  /* With a glyph the card becomes two columns: a tile that spans every row, and
+     the figure. The tile is decorative — the label still names the number — so it
+     never takes width away from an amount that has to stay on one line. */
+  [data-ui="metric"]:has(> [data-ui="metric-icon"]) {
+    grid-template-columns: auto 1fr;
+    column-gap: var(--admin-gap-sm);
+  }
+  /* Auto-placement would drop the value into the tile's own column the moment a
+     card carried a third line, which reads as a label folded into five words and
+     an amount squeezed under the glyph. The figures are pinned to the text
+     column instead, so a card is the same shape whatever it happens to carry. */
+  [data-ui="metric"]:has(> [data-ui="metric-icon"]) > :not([data-ui="metric-icon"]) {
+    grid-column: 2;
+  }
+  [data-ui="metric-icon"] {
+    display: grid;
+    grid-row: 1 / 3;
+    grid-column: 1;
+    align-self: center;
+    place-items: center;
+    inline-size: 2.25rem;
+    block-size: 2.25rem;
+    border-radius: var(--admin-radius);
+    background: var(--admin-accent-soft);
+    color: var(--admin-accent-text);
+  }
+  [data-ui="metric-icon"] svg {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+  }
+  /* A money card needs the width of the longest amount it can hold. Thirteen
+     digits and a symbol at the display size do not fit a ten-rem track, and a
+     clipped total reads as a different number.
+
+     13.5rem is the widest floor that still fits five cards across the content
+     column at 1440 — wider and the fifth drops to a row of its own, which reads
+     as a sixth category rather than as a wrap. Below that width they wrap, which
+     is the point: the floor is a minimum, not a count. */
+  [data-ui="card-grid"]:has(> [data-ui="metric"][data-tone="money"]) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
+  }
+  [data-ui="metric"][data-tone="money"] [data-ui="metric-value"] {
+    font-size: var(--admin-size-amount);
+    white-space: nowrap;
+  }
+  /* A tile costs a fixed 2.75rem of the track, so a row of glyph cards needs a
+     wider minimum than a row of plain ones — but not the money minimum, which
+     was sized for the amount alone and drops a four-card header to three. */
+  [data-ui="card-grid"]:has(> [data-ui="metric"] > [data-ui="metric-icon"]) {
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
+  }
+  [data-ui="metric-label"],
+  [data-ui="metric-value"],
+  [data-ui="metric-detail"],
+  [data-ui="metric-trend"] {
+    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) {
+    /* An amount in đồng is thirteen digits and a symbol. At two cards to a phone
+       screen the display size clipped it, and a clipped total is worse than a
+       small one — it reads as a different number. */
+    [data-ui="metric"][data-tone="night-audit-amount"] [data-ui="metric-value"],
+    [data-ui="metric"][data-tone="money"] [data-ui="metric-value"] {
+      font-size: var(--admin-size-lg);
+      overflow-wrap: anywhere;
+    }
+    /* At the smaller size the amount fits a narrower track, so a phone keeps two
+       cards to a row instead of dropping to a column five cards long. */
+    [data-ui="card-grid"]:has(> [data-ui="metric"][data-tone="money"]) {
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
+    }
+    /* And the tile goes, for the same reason the amount shrank: it repeats the
+       label, and the 2.75rem it costs on a nine-rem card is the difference
+       between a total that fits and one that is clipped into a different number. */
+    [data-ui="metric-icon"] {
+      display: none;
+    }
+    [data-ui="metric"]:has(> [data-ui="metric-icon"]),
+    [data-ui="metric"]:has(> [data-ui="metric-icon"]) > :not([data-ui="metric-icon"]) {
+      grid-column: auto;
+      grid-template-columns: 1fr;
+    }
+  }
+  [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;
+  }
+
+  /* A quiet context strip keeps location and company visible without competing
+     with the page title below it. It is a navigation surface, not another card. */
+  [data-ui="page-context"] {
+    display: flex;
+    inline-size: 100%;
+    min-inline-size: 0;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--admin-gap-md);
+  }
+
+  [data-ui="page-context-trail"] {
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  [data-ui="page-context-trail"] [data-ui="breadcrumbs"] ol {
+    flex-wrap: nowrap;
+  }
+
+  /* A trail that does not fit shortens from the left: the ancestors give way
+     before the page you are on. Every crumb may shrink, so every crumb has to
+     clip — without `overflow`, `nowrap` text keeps its full width and paints
+     over the crumb beside it, which is what long labels used to do here. */
+  [data-ui="page-context-trail"] [data-ui="breadcrumb"] {
+    min-inline-size: 0;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  [data-ui="page-context-trail"] [data-ui="breadcrumb"] > :where(a, span) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The separator is a pseudo-element on the crumb, so it must not be eaten by
+     the same shrinking that clips the label. */
+  [data-ui="page-context-trail"] [data-ui="breadcrumb"]:not(:last-child)::after {
+    flex: 0 0 auto;
+  }
+
+  /* The current page keeps its room last, after the ancestors have given theirs. */
+  [data-ui="page-context-trail"] [data-ui="breadcrumb"]:last-child {
+    flex: 0 1 auto;
+  }
+
+  [data-ui="page-context-viewer"] {
+    display: inline-flex;
+    min-inline-size: 0;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-xs);
+    text-decoration: none;
+  }
+
+  a[data-ui="page-context-viewer"]:hover {
+    color: var(--admin-ink);
+  }
+
+  [data-ui="page-context-icon"] {
+    display: grid;
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex: 0 0 auto;
+    place-items: center;
+    color: var(--admin-ink-muted);
+  }
+
+  [data-ui="page-context-icon"] > [data-ui="icon"] {
+    inline-size: 0.875rem;
+    block-size: 0.875rem;
+  }
+
+  [data-ui="page-context-copy"] {
+    display: inline-flex;
+    min-inline-size: 0;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+  }
+
+  [data-ui="page-context-company"] {
+    overflow: hidden;
+    font-weight: 650;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-ui="page-context-branch"] {
+    color: var(--admin-ink-muted);
+    white-space: nowrap;
+  }
+
+  [data-ui="page-context-branch"]::before {
+    margin-inline-end: var(--admin-gap-xs);
+    content: "·";
+  }
+  [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);
+  }
+
+  @media (max-width: 47.9375rem) {
+    [data-ui="page-context"] {
+      gap: var(--admin-gap-sm);
+    }
+
+    [data-ui="page-context-viewer"] {
+      max-inline-size: 9rem;
+      min-block-size: 2.75rem;
+    }
+
+    [data-ui="page-context-branch"] {
+      display: none;
+    }
+  }
+  /* A filter row shows every choice at once, on as many lines as that takes. */
+  [data-ui="tabs"][data-wrap="true"] {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+  [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);
+  }
+  [data-ui="tab"][data-disabled="true"] {
+    cursor: default;
+  }
+
+  /* Compact operational records for mobile and narrow side panels. */
+  /* A deadline. Plain until it has passed, then it is the thing on the row
+     that needs acting on, so the date itself carries the colour rather than a
+     badge beside it — the badges in these tables are priority. */
+  [data-ui="deadline"] {
+    color: inherit;
+    font-variant-numeric: tabular-nums;
+  }
+  [data-ui="deadline"][data-late="true"] {
+    color: var(--admin-danger);
+    font-weight: 600;
+  }
+
+  /* A document hierarchy. The nesting is the markup, so the indent comes from
+     the nested list rather than from padding baked into each label. */
+  [data-ui="doc-tree"] {
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--admin-divider-subtle);
+    border-radius: var(--admin-radius);
+    background: var(--admin-card);
+    list-style: none;
+  }
+  [data-ui="doc-branch"] {
+    margin: 0;
+    /* The rail a reader follows down a branch, and the indent, in one. */
+    padding: 0 0 0 var(--admin-gap);
+    border-inline-start: 1px solid var(--admin-line);
+    margin-inline-start: var(--admin-gap);
+    list-style: none;
+  }
+  [data-ui="doc-entry"] {
+    display: flex;
+    min-block-size: 2.5rem;
+    align-items: baseline;
+    gap: var(--admin-gap-sm);
+    padding: var(--admin-gap-sm) var(--admin-gap);
+    color: inherit;
+    text-decoration: none;
+  }
+  [data-ui="doc-entry"]:hover {
+    background: var(--admin-surface-subtle);
+  }
+  [data-ui="doc-title"] {
+    flex: 0 0 auto;
+    color: var(--admin-ink);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  [data-ui="doc-summary"] {
+    overflow: hidden;
+    flex: 1 1 auto;
+    color: var(--admin-ink-secondary);
+    font-size: var(--admin-size-sm);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-ui="doc-count"] {
+    flex: 0 0 auto;
+    color: var(--admin-ink-muted);
+    font-size: var(--admin-size-sm);
+  }
+  [data-ui="record-list"] {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 1px solid var(--admin-divider-subtle);
+    border-radius: var(--admin-radius);
+    background: var(--admin-card);
+    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;
+  }
+  /* A line that says work is still going on. It reads as status rather than as
+     content, and it stays put — the whole point is that the page underneath it
+     is no longer being thrown away and rebuilt. */
+  [data-ui="live-region"] {
+    display: flex;
+    align-items: center;
+    gap: var(--admin-gap-xs);
+    margin: 0;
+    color: var(--admin-ink-secondary);
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  [data-ui="live-region"]::before {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    flex: 0 0 auto;
+    border-radius: 50%;
+    background: var(--admin-accent);
+    content: "";
+  }
+  [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) {
+    /* A button sits in a row with the fields it submits, so it is the height of
+       one. The 2.75rem touch target this used to take stood half again as tall
+       as the input above it and read as a banner rather than a control. */
+    :where([data-ui="action"], [data-control="action"])[data-size] {
+      min-block-size: var(--admin-field-height);
+    }
+    [data-ui="modal-layer"][data-presentation="dialog"]
+      [data-ui="relation-dialog-actions"]
+      [data-ui="action"][data-size="compact"] {
+      min-block-size: var(--admin-field-height);
+    }
+    :where([data-ui="action"], [data-control="action"])[data-icon-only="true"][data-size] {
+      inline-size: var(--admin-field-height);
+    }
+    [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;
+    }
+  }
+
+  /* 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) auto;
+      align-items: center;
+      gap: var(--admin-gap-sm);
+      block-size: auto;
+      padding: var(--admin-gap-sm);
+    }
+    [data-ui="sidebar-header"] {
+      padding: 0;
+    }
+    /* The grid above reserves `minmax(8rem, 1fr)` for this. It was reserving that
+       column for an element `responsive.css` had hidden, so the row carried a
+       gap where the only other way out of a screen should have been. */
+    [data-ui="sidebar-search"] {
+      display: flex;
+      margin: 0;
+    }
+    /* The one definition of the mobile menu strip. `responsive.css` used to hide
+       it at this same breakpoint, in this same layer, at this same specificity —
+       so which rule won was decided by the order of the `styles` array and
+       nothing else. Swapping two lines in that array made the mobile menu
+       disappear entirely. */
+    [data-ui="sidebar-nav"] {
+      display: block;
+      grid-column: 1 / -1;
+      padding: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      /* The desktop sidebar hides its scrollbar because it scrolls vertically
+         in a tall column where the cut edge is obvious. Lying on its side this
+         strip hides most of itself — two thirds of it on a phone — and without
+         a scrollbar there is nothing at all to say the rest exists. */
+      scrollbar-width: thin;
+      overscroll-behavior-inline: contain;
+      /* A second, quieter signal for the platforms that draw the scrollbar only
+         while it moves: the strip fades where it continues. */
+      mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
+    }
+
+    [data-ui="sidebar-nav"]::-webkit-scrollbar {
+      display: block;
+      block-size: 0.25rem;
+    }
+    [data-ui="sidebar-section-label"],
+    [data-ui="app-list"],
+    [data-ui="menu-section-title"] {
+      display: none;
+    }
+    [data-ui="sidebar-foot"] {
+      display: flex;
+      grid-column: 3;
+      grid-row: 1;
+    }
+    [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;
+    }
+  }
+}