@visns-studio/visns-components 6.6.4 → 6.15.0

package/src/components/styles/Vault.module.scss

@@ -0,0 +1,1983 @@
+// ---------------------------------------------------------------------------
+// Vault (components/vault/*)
+// ---------------------------------------------------------------------------
+// The staff password manager: a popover that lives in the navigation's action
+// pill (VaultQuickSearch), the page behind it (VaultManager), and the small
+// pieces both of them mount — the OTP chip, the confirm panel, the entry form.
+//
+// Every brand value is a CSS custom property with a neutral fallback, as in
+// CallQueueSettings.module.scss, so the library carries no palette of its own.
+//
+// IMPORTANT — why every control below restates its own colour, background,
+// border, font-size AND box size:
+//
+// The popover mounts INSIDE `.hactions > ul`, whose chip rules used to reach
+// every descendant `a` and `button` and hand it white text, a fixed 36px box
+// and a pill radius. On a white panel that renders as blank boxes; it is the
+// bug this file's second pass fixed. Navigation.module.scss now excludes
+// `[data-nav-overlay] *` from those rules, which is the real fix, but a
+// component that survives only because its host is well behaved is a
+// component that breaks the next time it is mounted somewhere new. So nothing
+// here inherits anything it actually needs. No `!important` was required.
+// ---------------------------------------------------------------------------
+
+$vault-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+
+@mixin vault-tokens {
+    --v-primary: var(--primary-color, #00386c);
+    --v-secondary: var(--secondary-color, #404040);
+    --v-paragraph: var(--paragraph-color, #2b2b2b);
+    --v-background: var(--background-color, #fff);
+    --v-br: var(--br, 6px);
+    --v-btn-br: var(--btn-br, 6px);
+
+    --v-line: color-mix(in srgb, var(--v-paragraph) 18%, transparent);
+    // 76% of the body colour over white lands around #5b5b5b — roughly 6:1,
+    // comfortably past 4.5:1. The 62% this started at was 4.0:1 and genuinely
+    // hard to read on a tablet.
+    --v-muted: color-mix(in srgb, var(--v-paragraph) 76%, transparent);
+    --v-surface: color-mix(in srgb, var(--v-paragraph) 4%, var(--v-background));
+    --v-hover: color-mix(in srgb, var(--v-primary) 9%, var(--v-background));
+    --v-tint: color-mix(in srgb, var(--v-primary) 12%, var(--v-background));
+    --v-ok: rgb(31, 122, 71);
+    --v-bad: rgb(190, 62, 62);
+}
+
+// Undo anything a host may have imposed on a generic element. Applied to every
+// interactive element in the module — see the note at the top of the file.
+@mixin vault-reset {
+    box-sizing: border-box;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
+    max-width: none;
+    margin: 0;
+    font-family: inherit;
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: normal;
+    text-transform: none;
+    text-decoration: none;
+    text-align: left;
+    appearance: none;
+    outline: none;
+    transform: none;
+    box-shadow: none;
+    // The host's chip rules transition `all`, which makes a control visibly
+    // resize on hover once its box is no longer fixed.
+    transition: background-color 0.15s ease, color 0.15s ease,
+        border-color 0.15s ease;
+}
+
+@mixin vault-focus {
+    &:focus-visible {
+        outline: 2px solid var(--v-primary);
+        outline-offset: 2px;
+    }
+}
+
+// A checkbox or a radio, and nothing else.
+//
+// The host CRM styles bare `input` — padding, a min-width, a text-field
+// height, a pill radius — and none of that is typed, so it lands on
+// `input[type=radio]` too and renders the visibility choice as a pair of wide
+// ovals with a dot floating in one of them. Restating the box is not enough on
+// its own: the host's width wins over `width: 16px` often enough (a later
+// rule, a more specific selector) that the only reliable fix is to stop
+// relying on the native painting altogether.
+//
+// So the control is drawn here. `appearance: none` throws away the platform
+// widget, every axis of the box is pinned — width, height, min, max and the
+// flex basis, because a flex parent can stretch a box that has all four — and
+// the mark is painted: an inset ring for the radio's dot, a background tick
+// for the checkbox. Nothing below inherits from the host.
+$vault-tick: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3.1 3.1 5.9-6'/%3E%3C/svg%3E";
+
+@mixin vault-check {
+    @include vault-focus;
+
+    flex: 0 0 16px;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    min-height: 16px;
+    max-width: 16px;
+    max-height: 16px;
+    padding: 0;
+    margin: 0;
+    border: 1.5px solid var(--v-line);
+    border-radius: 3px;
+    background: var(--v-background);
+    background-image: none;
+    box-shadow: none;
+    appearance: none;
+    -webkit-appearance: none;
+    cursor: pointer;
+    vertical-align: middle;
+    transition: background-color 0.12s ease, border-color 0.12s ease,
+        box-shadow 0.12s ease;
+
+    &:hover:not(:disabled) {
+        border-color: var(--v-primary);
+    }
+
+    &:checked {
+        border-color: var(--v-primary);
+        background-color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: default;
+    }
+
+    &[type='radio'] {
+        border-radius: 50%;
+
+        // Fill, then an inset ring in the surface colour: what is left in the
+        // middle is the dot. One property, no pseudo-element — and pseudo
+        // elements on an input are exactly the sort of thing a host reset is
+        // liable to have opinions about.
+        &:checked {
+            box-shadow: inset 0 0 0 3px var(--v-background);
+        }
+    }
+
+    &[type='checkbox'] {
+        &:checked {
+            background-image: url($vault-tick);
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 12px 12px;
+        }
+    }
+}
+
+@keyframes vaultSpin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes vaultPopIn {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.spin {
+    animation: vaultSpin 1s linear infinite;
+    flex-shrink: 0;
+}
+
+.muted {
+    color: var(--v-muted);
+}
+
+// ---------------------------------------------------------------------------
+// Shared controls
+// ---------------------------------------------------------------------------
+
+.primaryButton {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.4rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0.85rem;
+    border: 1px solid var(--v-primary);
+    border-radius: var(--v-btn-br);
+    background: var(--v-primary);
+    color: #fff;
+    font-size: 0.82rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+
+    svg {
+        color: currentColor;
+        flex-shrink: 0;
+    }
+
+    &:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--v-primary) 85%, #000);
+        border-color: color-mix(in srgb, var(--v-primary) 85%, #000);
+        color: #fff;
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: default;
+    }
+}
+
+.ghostButton {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.4rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.45rem 0.75rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.8rem;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+
+    svg {
+        color: currentColor;
+        flex-shrink: 0;
+    }
+
+    &:hover:not(:disabled) {
+        background: var(--v-hover);
+        border-color: var(--v-primary);
+        color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+
+// The row-level actions. Icon plus word: four unexplained glyphs in a row is a
+// puzzle, and both surfaces are used in a hurry.
+.actionPill {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.3rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.28rem 0.55rem;
+    border: 1px solid var(--v-line);
+    border-radius: 999px;
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.74rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+
+    svg {
+        color: currentColor;
+        flex-shrink: 0;
+    }
+
+    &:hover:not(:disabled) {
+        background: var(--v-tint);
+        border-color: var(--v-primary);
+        color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+
+// The password copy is the thing people came for, so it leads.
+.actionPillPrimary {
+    border-color: color-mix(in srgb, var(--v-primary) 45%, transparent);
+    background: var(--v-tint);
+    color: var(--v-primary);
+}
+
+.actionPillDanger {
+    &:hover:not(:disabled) {
+        border-color: var(--v-bad);
+        background: color-mix(in srgb, var(--v-bad) 12%, var(--v-background));
+        color: var(--v-bad);
+    }
+}
+
+// The row's actions, in one cluster: three glyphs that copy something, a
+// hairline, then the pills that change the entry.
+//
+// The copies are icon-only and the pills are not, which is deliberate. A copy
+// is repeatable and harmless, always in the same order, and the row has only
+// so much width; edit and delete are neither repeatable nor harmless, and a
+// bare glyph there asks the user to guess.
+.actionCluster {
+    display: inline-flex;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+// The tooltip hangs on this rather than on the button inside it: a disabled
+// button fires no pointer events, and "no 2FA on this entry" is worth reading
+// precisely when the button is disabled.
+.actionIconWrap {
+    display: inline-flex;
+}
+
+.actionIcon {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    width: 28px;
+    height: 28px;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-muted);
+    cursor: pointer;
+
+    svg {
+        color: currentColor;
+        flex-shrink: 0;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--v-primary);
+        background: var(--v-tint);
+        color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.45;
+        cursor: default;
+    }
+}
+
+// The password is what most people came for, so it reads as the default.
+.actionIconDanger {
+    color: var(--v-bad, #b42318);
+
+    &:hover:not(:disabled) {
+        border-color: color-mix(in srgb, var(--v-bad, #b42318) 45%, transparent);
+        background: color-mix(in srgb, var(--v-bad, #b42318) 10%, transparent);
+        color: var(--v-bad, #b42318);
+    }
+}
+
+.actionIconPrimary {
+    border-color: color-mix(in srgb, var(--v-primary) 45%, transparent);
+    background: var(--v-tint);
+    color: var(--v-primary);
+}
+
+// A second and a half of "that worked", where the pointer already is.
+.actionIconDone {
+    border-color: var(--v-ok);
+    background: color-mix(in srgb, var(--v-ok) 14%, var(--v-background));
+    color: var(--v-ok);
+
+    &:hover:not(:disabled) {
+        border-color: var(--v-ok);
+        background: color-mix(in srgb, var(--v-ok) 14%, var(--v-background));
+        color: var(--v-ok);
+    }
+}
+
+.actionDivider {
+    display: inline-block;
+    flex-shrink: 0;
+    width: 1px;
+    height: 18px;
+    margin: 0 0.2rem;
+    background: var(--v-line);
+}
+
+.iconButton {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    padding: 0.3rem;
+    border: 1px solid transparent;
+    border-radius: var(--v-btn-br);
+    background: transparent;
+    color: var(--v-paragraph);
+    font-size: 0.8rem;
+    cursor: pointer;
+
+    svg {
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--v-line);
+        background: var(--v-hover);
+        color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+}
+
+.linkButton {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    align-items: center;
+    padding: 0.1rem 0;
+    border: none;
+    border-radius: 2px;
+    background: none;
+    color: var(--v-primary);
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:hover {
+        color: var(--v-primary);
+        text-decoration: underline;
+    }
+}
+
+.dangerLink {
+    @extend .linkButton;
+
+    color: var(--v-bad);
+
+    &:hover {
+        color: var(--v-bad);
+    }
+}
+
+.select {
+    @include vault-reset;
+    @include vault-focus;
+
+    padding: 0.45rem 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+// Every checkbox and radio in the vault carries this, so the box survives
+// being mounted anywhere — see `vault-check`. The descendant selectors below
+// repeat it only as a safety net for markup that forgets the class.
+// Every checkbox and radio in the vault carries this class; the mixin draws
+// the whole control, both shapes included. Qualified with the element so the
+// selector outweighs a host rule of the form `.some-form input`, which is how
+// the CRM was stretching these in the first place.
+input.checkControl {
+    @include vault-check;
+}
+
+.inlineCheck {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.5rem;
+    align-items: center;
+    color: var(--v-paragraph);
+    font-size: 0.8rem;
+    line-height: 1.2;
+    cursor: pointer;
+
+    input[type='checkbox'],
+    input[type='radio'] {
+        @include vault-check;
+    }
+}
+
+.searchBar {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-muted);
+
+    &:focus-within {
+        border-color: var(--v-primary);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-primary) 15%, transparent);
+    }
+}
+
+.searchInput {
+    @include vault-reset;
+
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--v-paragraph);
+    font-size: 0.88rem;
+
+    &::placeholder {
+        color: var(--v-muted);
+        opacity: 1;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// OTP chip
+// ---------------------------------------------------------------------------
+
+.otpChip {
+    @include vault-tokens;
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.3rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.28rem 0.55rem;
+    border: 1px solid var(--v-line);
+    border-radius: 999px;
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.74rem;
+    font-weight: 600;
+    white-space: nowrap;
+    cursor: pointer;
+
+    svg {
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--v-primary);
+        background: var(--v-tint);
+        color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: default;
+    }
+}
+
+.otpChipLg {
+    padding: 0.4rem 0.7rem;
+    font-size: 0.85rem;
+}
+
+// The quick search's variant: a 29px square that matches the icon buttons
+// beside it, until a code arrives and the digits become the content.
+.otpChipCompact {
+    height: 29px;
+    border-radius: var(--v-btn-br);
+
+    // Reserved so the row does not lurch sideways the moment the code lands.
+    &.otpChipOpen {
+        min-width: 96px;
+        padding: 0 0.45rem;
+    }
+}
+
+.otpChipIcon {
+    width: 29px;
+    min-width: 29px;
+    padding: 0;
+}
+
+.otpChipOpen {
+    border-color: color-mix(in srgb, var(--v-primary) 45%, transparent);
+    background: var(--v-tint);
+    color: var(--v-primary);
+}
+
+.otpChipExpiring {
+    border-color: var(--v-bad);
+    background: color-mix(in srgb, var(--v-bad) 12%, var(--v-background));
+    color: var(--v-bad);
+}
+
+.otpCode {
+    // Tabular figures, or the code jitters every second as the glyph widths
+    // change under it.
+    font-family: $vault-mono;
+    font-variant-numeric: tabular-nums;
+    font-feature-settings: 'tnum';
+    letter-spacing: 0.02em;
+}
+
+.otpLabel {
+    letter-spacing: 0.04em;
+}
+
+.otpRing {
+    flex-shrink: 0;
+    // 12 o'clock, draining clockwise.
+    transform: rotate(-90deg);
+}
+
+.otpRingTrack {
+    fill: none;
+    stroke: currentColor;
+    stroke-opacity: 0.22;
+    stroke-width: 2;
+}
+
+.otpRingValue {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.95s linear;
+}
+
+// ---------------------------------------------------------------------------
+// Confirm panel
+// ---------------------------------------------------------------------------
+
+.confirmPanel {
+    @include vault-tokens;
+
+    box-sizing: border-box;
+    padding: 0.85rem;
+    border: 1px solid color-mix(in srgb, var(--v-primary) 35%, transparent);
+    border-radius: var(--v-br);
+    background: var(--v-tint);
+    color: var(--v-paragraph);
+}
+
+.confirmCompact {
+    // Inside the popover the panel replaces the result list. Holding a height
+    // close to a couple of rows keeps the popover from collapsing and jumping
+    // back out again when the panel closes.
+    min-height: 152px;
+    margin: 0.6rem;
+}
+
+.confirmHead {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    margin-bottom: 0.35rem;
+    color: var(--v-primary);
+    font-size: 0.85rem;
+}
+
+.confirmMessage {
+    margin: 0 0 0.55rem;
+    color: var(--v-muted);
+    font-size: 0.78rem;
+    line-height: 1.45;
+}
+
+.confirmRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    align-items: center;
+}
+
+.confirmInput {
+    @include vault-reset;
+    @include vault-focus;
+
+    flex: 1;
+    min-width: 150px;
+    padding: 0.45rem 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.85rem;
+
+    &[aria-invalid='true'] {
+        border-color: var(--v-bad);
+    }
+}
+
+.confirmButton {
+    @extend .primaryButton;
+
+    padding: 0.45rem 0.8rem;
+}
+
+.confirmCancel {
+    @extend .ghostButton;
+
+    padding: 0.45rem 0.7rem;
+}
+
+.confirmError {
+    // Always in the DOM, holding its own height, so an error does not shove
+    // the buttons down the instant it appears.
+    min-height: 1.15em;
+    margin: 0.45rem 0 0;
+    color: var(--v-bad);
+    font-size: 0.76rem;
+    font-weight: 500;
+}
+
+// ---------------------------------------------------------------------------
+// Quick search (header popover)
+// ---------------------------------------------------------------------------
+
+.quickSearch {
+    @include vault-tokens;
+
+    position: relative;
+    align-items: center;
+}
+
+// Deliberately the same shape as Notification's trigger: these two sit side by
+// side in the action pill and must read as one row of chips, not two designs.
+// This one DOES inherit the header's colour, which is correct — it is a chip.
+.trigger {
+    @include vault-focus;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--paragraph-color, #333);
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background-color: rgba(var(--primary-color-rgb, 0, 86, 179), 0.1);
+        color: var(--primary-color, #0056b3);
+        transform: scale(1.05);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+}
+
+.popoverWrapper {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: 1100;
+    margin-top: 10px;
+    // The host's chip `li` is a centring flex container. The popover is
+    // absolutely positioned so it escapes the flexbox, but `text-align` is
+    // inherited and would centre every line of prose inside it.
+    text-align: left;
+}
+
+.popover {
+    @include vault-tokens;
+
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    // 560 rather than 480: a real title, a real email username and five
+    // actions have to share one line, and 480 was where the actions started
+    // wrapping onto a second and third row.
+    width: 560px;
+    max-width: calc(100vw - 2rem);
+    border: 1px solid var(--v-line);
+    border-radius: 10px;
+    // Opaque, and stated: the header behind this is a dark brand bar, and a
+    // panel that inherits any of it is unreadable.
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
+    overflow: hidden;
+    animation: vaultPopIn 0.18s ease-out;
+
+    > .searchBar {
+        border: none;
+        border-bottom: 1px solid var(--v-line);
+        border-radius: 0;
+
+        &:focus-within {
+            border-bottom-color: var(--v-primary);
+            box-shadow: none;
+        }
+    }
+}
+
+.popoverHead {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.7rem 0.85rem;
+    border-bottom: 1px solid var(--v-line);
+    background: var(--v-surface);
+}
+
+.popoverTitle {
+    display: inline-flex;
+    gap: 0.4rem;
+    align-items: center;
+    color: var(--v-paragraph);
+    font-size: 0.95rem;
+    font-weight: 700;
+
+    svg {
+        color: var(--v-primary);
+    }
+}
+
+.rows {
+    max-height: 348px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+
+    // The same reason every control in this file restates its own box: two
+    // hosts reach in here with bare element selectors. Navigation's
+    // `.hactions > ul li` handed every row `display: flex`, a 32px minimum
+    // box, `justify-content: center` and 2px side margins — at 0,1,2, which
+    // the `.row` grid below (0,1,0) cannot outrank — and the CRM's own
+    // `ul { padding-left: … }` indented the list. Navigation is scoped to
+    // `> li` now, but a component that survives only because its host is well
+    // behaved breaks the next time it is mounted somewhere new.
+    > li {
+        min-width: 0;
+        min-height: 0;
+        margin: 0;
+        padding: 0;
+        position: static;
+        list-style: none;
+    }
+}
+
+// Geometry, restated at 0,2,0 so it wins outright wherever this is mounted.
+// Paint stays in `.row`; only the box is repeated.
+.rows > .row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    justify-content: normal;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 0;
+    margin: 0;
+    padding: 0.5rem 0.85rem;
+    position: static;
+}
+
+.rows > .row > .rowMain {
+    display: block;
+}
+
+// One row, one line. The identity truncates; the actions never do.
+//
+// It was three stacked blocks — title, meta, then a wrapping strip of labelled
+// pills — which cost three lines per entry and, with a long title beside a
+// long email username, spilled the pills onto two or three rows of their own.
+// A grid with a `minmax(0, 1fr)` first column is what lets the text give way
+// to the buttons instead of pushing them.
+.row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.75rem;
+    align-items: center;
+    padding: 0.5rem 0.85rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--v-line) 55%, transparent);
+    border-left: 3px solid transparent;
+    cursor: default;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.rowActive {
+    border-left-color: var(--v-primary);
+    background: var(--v-hover);
+}
+
+.rowMain {
+    // `min-width: 0` is the load-bearing declaration: without it a grid item
+    // refuses to shrink below its content and the ellipsis never engages.
+    min-width: 0;
+    // Hard left, and stated rather than inherited: every title in the list
+    // starts on the same edge whatever its length, which is what makes the
+    // rows scan as a ledger.
+    //
+    // `stretch` — the default — and NOT `justify-self: start`, which sizes a
+    // grid item to fit-content. The content here is `white-space: nowrap`, so
+    // its min-content width IS its full width: under `start` the cell would
+    // refuse to shrink, overflow its track and slide under the action icons
+    // instead of ellipsing. Filling the track is what makes the ellipsis work,
+    // and `text-align: left` is what puts the text on its left edge.
+    justify-self: stretch;
+    overflow: hidden;
+    text-align: left;
+    color: var(--v-paragraph);
+    font-size: 0.88rem;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+// Kept for anything still rendering the old two-line shape.
+.rowTitle {
+    display: flex;
+    gap: 0.35rem;
+    align-items: center;
+    min-width: 0;
+}
+
+.rowName {
+    color: var(--v-paragraph);
+    font-size: 0.9rem;
+    font-weight: 700;
+}
+
+.privateMark {
+    flex-shrink: 0;
+    margin-right: 0.25rem;
+    color: var(--v-muted);
+    vertical-align: -1px;
+}
+
+.rowMeta {
+    color: var(--v-muted);
+    font-size: 0.82rem;
+}
+
+.rowActions {
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    // Flush right on every row, so the clusters line up with each other
+    // rather than trailing whatever length the title happened to be.
+    justify-self: end;
+    margin-left: auto;
+    align-items: center;
+}
+
+// A square icon button. The label lives in the tooltip and the aria-label,
+// which is what keeps five of them on one line.
+.rowAction {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 29px;
+    height: 29px;
+    min-width: 29px;
+    padding: 0;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-secondary);
+    cursor: pointer;
+
+    svg {
+        flex-shrink: 0;
+        color: currentColor;
+    }
+
+    &:hover:not(:disabled) {
+        border-color: var(--v-primary);
+        background: var(--v-tint);
+        color: var(--v-primary);
+    }
+
+    &:disabled {
+        opacity: 0.55;
+        cursor: default;
+    }
+}
+
+.rowActionPrimary {
+    border-color: var(--v-primary);
+    background: var(--v-primary);
+    color: #fff;
+
+    &:hover:not(:disabled) {
+        border-color: color-mix(in srgb, var(--v-primary) 85%, #000);
+        background: color-mix(in srgb, var(--v-primary) 85%, #000);
+        color: #fff;
+    }
+}
+
+.empty {
+    padding: 1.75rem 1rem;
+    text-align: center;
+
+    p {
+        margin: 0 0 0.85rem;
+        color: var(--v-muted);
+        font-size: 0.85rem;
+    }
+}
+
+.fallback {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    align-items: center;
+    padding: 0.65rem 0.85rem;
+    border-bottom: 1px solid var(--v-line);
+    background: var(--v-tint);
+
+    label {
+        width: 100%;
+        color: var(--v-paragraph);
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+}
+
+.fallbackInput {
+    @include vault-reset;
+    @include vault-focus;
+
+    flex: 1;
+    min-width: 160px;
+    padding: 0.4rem 0.5rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-family: $vault-mono;
+    font-size: 0.82rem;
+}
+
+.footer {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0.55rem 0.85rem;
+    border-top: 1px solid var(--v-line);
+    background: var(--v-surface);
+}
+
+.footerHint {
+    color: var(--v-muted);
+    font-size: 0.75rem; // 12px at a 16px root
+}
+
+// ---------------------------------------------------------------------------
+// Generator
+// ---------------------------------------------------------------------------
+
+.generator {
+    @include vault-tokens;
+
+    box-sizing: border-box;
+    margin-top: 0.5rem;
+    padding: 0.75rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-br);
+    background: var(--v-surface);
+}
+
+.genCandidate {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.45rem 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+
+    code {
+        overflow-wrap: anywhere;
+        color: var(--v-paragraph);
+        font-family: $vault-mono;
+        font-size: 0.88rem;
+        user-select: all;
+    }
+}
+
+.strength {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    margin-top: 0.5rem;
+
+    &[data-score='0'] .strengthFill {
+        background: var(--v-bad);
+    }
+    &[data-score='1'] .strengthFill {
+        background: rgb(200, 130, 50);
+    }
+    &[data-score='2'] .strengthFill {
+        background: rgb(175, 155, 40);
+    }
+    &[data-score='3'] .strengthFill,
+    &[data-score='4'] .strengthFill {
+        background: var(--v-ok);
+    }
+}
+
+.strengthTrack {
+    flex: 1;
+    height: 5px;
+    border-radius: 999px;
+    background: var(--v-line);
+    overflow: hidden;
+}
+
+.strengthFill {
+    height: 100%;
+    border-radius: 999px;
+    transition: width 0.2s ease, background-color 0.2s ease;
+}
+
+.strengthLabel {
+    min-width: 62px;
+    color: var(--v-muted);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-align: right;
+}
+
+.genLength {
+    display: block;
+    margin-top: 0.75rem;
+    color: var(--v-muted);
+    font-size: 0.78rem;
+
+    strong {
+        color: var(--v-paragraph);
+    }
+
+    input {
+        width: 100%;
+        margin-top: 0.3rem;
+        accent-color: var(--v-primary);
+    }
+}
+
+.genOptions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 0.6rem;
+}
+
+.genOption {
+    @extend .inlineCheck;
+
+    font-size: 0.78rem;
+}
+
+.genActions {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    margin-top: 0.85rem;
+}
+
+// ---------------------------------------------------------------------------
+// Entry form
+// ---------------------------------------------------------------------------
+
+.form {
+    @include vault-tokens;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+    box-sizing: border-box;
+    padding: 1rem;
+    color: var(--v-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+}
+
+.label {
+    color: var(--v-muted);
+    font-size: 0.74rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.input,
+.textarea {
+    @include vault-reset;
+    @include vault-focus;
+
+    width: 100%;
+    padding: 0.5rem 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+    color: var(--v-paragraph);
+    font-size: 0.87rem;
+
+    &::placeholder {
+        color: var(--v-muted);
+        opacity: 1;
+    }
+
+    &:focus {
+        border-color: var(--v-primary);
+    }
+
+    &:disabled {
+        background: var(--v-surface);
+        opacity: 0.7;
+    }
+}
+
+.textarea {
+    line-height: 1.5;
+    resize: vertical;
+}
+
+.help {
+    margin: 0;
+    color: var(--v-muted);
+    font-size: 0.75rem;
+}
+
+.fieldError {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    margin: 0;
+    color: var(--v-bad);
+    font-size: 0.76rem;
+    font-weight: 500;
+}
+
+.totpOk {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    margin: 0;
+    color: var(--v-ok);
+    font-size: 0.76rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+}
+
+.passwordField {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+}
+
+.inputRow {
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+}
+
+.totpConfigured {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+    align-items: center;
+    padding: 0.55rem 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-surface);
+    color: var(--v-ok);
+    font-size: 0.83rem;
+    font-weight: 600;
+}
+
+// ---------------------------------------------------------------------------
+// 2FA: the field, and the QR paths into it
+// ---------------------------------------------------------------------------
+
+.totpField {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    box-sizing: border-box;
+    padding: 2px;
+    border: 1px dashed transparent;
+    border-radius: var(--v-br);
+    // Only the border colour moves on a drag, so the field does not shift the
+    // fields below it by a pixel when an image is dragged over the modal.
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.totpFieldDropping {
+    border-color: var(--v-primary);
+    background: var(--v-tint);
+}
+
+.qrActions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+// The file input behind "Upload QR image". Not `display: none`, which would
+// take it out of the accessibility tree along with the label the button
+// already carries.
+.visuallyHidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+.qrScanner {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    padding: 0.6rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-br);
+    background: var(--v-surface);
+    animation: vaultPopIn 0.12s ease-out;
+}
+
+.qrScannerHead {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    color: var(--v-paragraph);
+    font-size: 0.8rem;
+    font-weight: 600;
+
+    svg {
+        flex-shrink: 0;
+        color: var(--v-primary);
+    }
+
+    // The title takes the slack, so the controls sit hard right.
+    > span {
+        margin-right: auto;
+    }
+}
+
+.qrStage {
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 300px;
+    aspect-ratio: 4 / 3;
+    border-radius: var(--v-br);
+    background: #000;
+}
+
+.qrVideo {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    // The preview is a viewfinder, not a mirror: a rear camera pointed at a
+    // printed code must not show the code reversed.
+    transform: none;
+}
+
+.qrViewfinder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: min(62%, 200px);
+    aspect-ratio: 1;
+    transform: translate(-50%, -50%);
+    border: 2px solid rgba(255, 255, 255, 0.85);
+    border-radius: 10px;
+    // Everything outside the frame dims, which is what makes the frame read
+    // as a target rather than as a border.
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
+    pointer-events: none;
+}
+
+.qrSweep {
+    position: absolute;
+    top: 0;
+    right: 6px;
+    left: 6px;
+    height: 2px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.9);
+    animation: vaultQrSweep 2.4s ease-in-out infinite;
+}
+
+// `top` rather than a transform, because a percentage translate on a 2px-tall
+// element is 2px — the travel has to be measured against the frame.
+@keyframes vaultQrSweep {
+    0%,
+    100% {
+        top: 8%;
+        opacity: 0.35;
+    }
+    50% {
+        top: 90%;
+        opacity: 0.9;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .qrSweep {
+        top: 50%;
+        animation: none;
+        opacity: 0.5;
+    }
+}
+
+.qrStarting {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.55);
+    color: #fff;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.tagField {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0.35rem 0.45rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-btn-br);
+    background: var(--v-background);
+
+    &:focus-within {
+        border-color: var(--v-primary);
+    }
+}
+
+.tagInput {
+    @include vault-reset;
+
+    flex: 1;
+    min-width: 110px;
+    padding: 0.2rem 0;
+    border: none;
+    background: transparent;
+    color: var(--v-paragraph);
+    font-size: 0.84rem;
+
+    &::placeholder {
+        color: var(--v-muted);
+        opacity: 1;
+    }
+}
+
+.tagPill {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.12rem 0.5rem;
+    border-radius: 999px;
+    background: var(--v-tint);
+    color: var(--v-primary);
+    font-size: 0.72rem;
+    font-weight: 700;
+
+    button {
+        @include vault-reset;
+
+        display: inline-flex;
+        align-items: center;
+        padding: 0;
+        border: none;
+        background: none;
+        color: inherit;
+        font-size: 0.72rem;
+        cursor: pointer;
+        opacity: 0.7;
+
+        &:hover {
+            color: inherit;
+            opacity: 1;
+        }
+    }
+}
+
+.radioRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    label {
+        display: inline-flex;
+        gap: 0.5rem;
+        align-items: center;
+        color: var(--v-paragraph);
+        font-size: 0.84rem;
+        line-height: 1.2;
+        cursor: pointer;
+    }
+
+    input[type='radio'],
+    input[type='checkbox'] {
+        @include vault-check;
+    }
+}
+
+.radioDisabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.formActions {
+    display: flex;
+    gap: 0.6rem;
+    align-items: center;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--v-line);
+}
+
+// ---------------------------------------------------------------------------
+// Manager page
+// ---------------------------------------------------------------------------
+
+.manager {
+    @include vault-tokens;
+
+    box-sizing: border-box;
+    // A tight bottom: the pager is measured to end just above the fold, and a
+    // 2rem skirt under it was enough to put a scrollbar on the page.
+    padding: 1.25rem 1.5rem 1rem;
+    color: var(--v-paragraph);
+    font-size: 0.85rem;
+}
+
+.managerHead {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+}
+
+.pageTitle {
+    margin: 0;
+    color: var(--v-paragraph);
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.pageIntro {
+    max-width: 62ch;
+    margin: 0.35rem 0 0;
+    color: var(--v-muted);
+    font-size: 0.83rem;
+    line-height: 1.5;
+}
+
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.6rem;
+    align-items: center;
+    margin-bottom: 1rem;
+    padding: 0.65rem;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-br);
+    background: var(--v-surface);
+
+    .searchBar {
+        flex: 1;
+        min-width: 240px;
+    }
+}
+
+.tableWrap {
+    // A last resort only: the table is sized to fit a 1024px tablet, and the
+    // URL column folds away below 1200px so it does not have to scroll there.
+    overflow-x: auto;
+    border: 1px solid var(--v-line);
+    border-radius: var(--v-br);
+    background: var(--v-background);
+}
+
+// The list is sized to the window rather than to its contents — the height
+// comes from JS, which is the only place the distance to the bottom of the
+// viewport is knowable. What this adds is the clipping: a row that does not
+// fit is cut off here instead of growing the page and pushing the pager out
+// of reach. In a window too short even for the five-row floor, the component
+// switches this to `overflow-y: auto` and the header stays put.
+.tableWrapFitted {
+    overflow-x: hidden;
+
+    thead th {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+// Fitted mode: every row is exactly --vault-row-height tall so the page size
+// is arithmetic. One line per row; anything longer is clipped with an
+// ellipsis, and the tag chips stop wrapping.
+.tableWrapFitted {
+    --vault-row-height: 58px;
+
+    tbody tr {
+        height: var(--vault-row-height);
+        max-height: var(--vault-row-height);
+    }
+
+    tbody td {
+        height: var(--vault-row-height);
+        padding-top: 0;
+        padding-bottom: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    tbody td > * {
+        max-width: 100%;
+    }
+
+    // Title + tag line share the fixed row; the tags clip, never wrap.
+    tbody td .tagRow {
+        flex-wrap: nowrap;
+        overflow: hidden;
+    }
+
+    tbody td {
+        line-height: 1.25;
+    }
+}
+}
+
+.table {
+    width: 100%;
+    border-collapse: collapse;
+    color: var(--v-paragraph);
+    font-size: 0.84rem;
+    text-align: left;
+
+    th,
+    td {
+        padding: 0.6rem 0.7rem;
+        text-align: left;
+        vertical-align: middle;
+    }
+
+    thead th {
+        border-bottom: 1px solid var(--v-line);
+        background: var(--v-surface);
+        color: var(--v-muted);
+        font-size: 0.72rem;
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+        white-space: nowrap;
+    }
+
+    tbody tr {
+        border-bottom: 1px solid color-mix(in srgb, var(--v-line) 55%, transparent);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &:hover {
+            background: var(--v-hover);
+        }
+    }
+
+    tbody td strong {
+        color: var(--v-paragraph);
+        font-size: 0.88rem;
+        font-weight: 700;
+    }
+}
+
+.sortButton {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+
+    svg {
+        color: var(--v-primary);
+    }
+
+    &:hover {
+        color: var(--v-primary);
+    }
+}
+
+.actionsHead,
+.actionsCell {
+    text-align: right;
+    white-space: nowrap;
+}
+
+.actionsCell {
+    display: table-cell;
+
+    // Wraps rather than forcing a horizontal scrollbar on a narrow tablet.
+    > * {
+        margin-left: 0.25rem;
+    }
+}
+
+.hostLink {
+    @include vault-reset;
+    @include vault-focus;
+
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    color: var(--v-primary);
+    font-size: 0.83rem;
+    font-weight: 500;
+
+    &:hover {
+        color: var(--v-primary);
+        text-decoration: underline;
+    }
+}
+
+// Only visible once the URL column folds away, so the site is never a mystery
+// on a tablet.
+.hostUnderTitle {
+    display: none;
+    color: var(--v-muted);
+    font-size: 0.76rem;
+}
+
+.pill {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+    padding: 0.12rem 0.5rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.pillShared {
+    background: color-mix(in srgb, var(--v-ok) 15%, var(--v-background));
+    color: var(--v-ok);
+}
+
+.pillPrivate {
+    background: color-mix(in srgb, var(--v-paragraph) 12%, var(--v-background));
+    color: var(--v-muted);
+}
+
+.deletedRow {
+    opacity: 0.65;
+
+    strong {
+        text-decoration: line-through;
+    }
+}
+
+.deletedTag {
+    margin-left: 0.4rem;
+    padding: 0.05rem 0.4rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--v-bad) 15%, var(--v-background));
+    color: var(--v-bad);
+    font-size: 0.66rem;
+    font-weight: 700;
+    text-decoration: none;
+}
+
+// Under the title, not beside it: the title keeps its own line and the
+// chips take a compact second one, which is what lets a row stay short.
+.tagRow {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.25rem;
+    margin: 0.2rem 0 0;
+    max-width: 100%;
+    overflow: hidden;
+
+    .tagPill {
+        flex: 0 0 auto;
+        padding: 0.05rem 0.45rem;
+        font-size: 0.68rem;
+    }
+}
+
+.tableEmpty {
+    padding: 2.5rem 1rem !important;
+    color: var(--v-muted);
+    text-align: center !important;
+
+    p {
+        margin: 0 0 0.9rem;
+        color: var(--v-muted);
+        font-size: 0.88rem;
+    }
+}
+
+.pager {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: space-between;
+    // PAGER_GAP in VaultManager.jsx budgets for this margin; changing one
+    // without the other loses the bottom of the pager or leaves a gap.
+    margin-top: 0.85rem;
+    color: var(--v-muted);
+    font-size: 0.8rem;
+}
+
+.pagerButtons {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+// An iPad in landscape is 1024px, and the CRM's own chrome takes some of that.
+// Below 1200 the URL column folds and the host moves under the title, which
+// keeps the whole table inside the viewport with no horizontal scroll.
+@media (max-width: 1200px) {
+    .urlColumn {
+        display: none;
+    }
+
+    .hostUnderTitle {
+        display: block;
+    }
+}
+
+@media (max-width: 900px) {
+    .manager {
+        padding: 1rem 0.85rem 1rem;
+    }
+
+    .actionsCell {
+        text-align: left;
+
+        > * {
+            margin: 0.15rem 0.25rem 0.15rem 0;
+        }
+    }
+
+    .actionCluster {
+        justify-content: flex-start;
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Access log
+// ---------------------------------------------------------------------------
+
+.log {
+    @include vault-tokens;
+
+    box-sizing: border-box;
+    padding: 1rem;
+    color: var(--v-paragraph);
+    font-size: 0.85rem;
+    text-align: left;
+}
+
+.logFilters {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 0.85rem;
+}
+
+.logRows {
+    max-height: 50vh;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-y: auto;
+}
+
+.logRow {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 0.55rem 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--v-line) 55%, transparent);
+    color: var(--v-paragraph);
+    font-size: 0.83rem;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    em {
+        color: var(--v-primary);
+        font-style: normal;
+        font-weight: 600;
+    }
+}
+
+.logMeta {
+    display: flex;
+    gap: 0.75rem;
+    color: var(--v-muted);
+    font-size: 0.75rem;
+    white-space: nowrap;
+}