@stsdti/approvable-vue 0.1.0

package/src/themes/approvable.css

@@ -0,0 +1,1171 @@
+/* ==========================================================================
+   laravel-approvable — the Approvable theme
+
+   One stylesheet, light and dark. Every colour, radius and shadow is a custom
+   property declared on `.approvable`-rooted blocks, so an application that
+   wants a different accent overrides the property rather than the rule.
+
+   Dark mode follows the viewer's system setting, and `[data-theme]` (or a
+   `.dark` / `.light` class) on an ancestor wins over it in both directions —
+   an application with its own theme toggle stamps one of those and the panel
+   follows.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   Tokens
+   -------------------------------------------------------------------------- */
+.approvable,
+.approvable-actions,
+.approvable-select,
+.approvable-timeline,
+.approvable-dialog-backdrop {
+    --approvable-font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+    --approvable-radius: 18px;
+    --approvable-radius-sm: 10px;
+
+    --approvable-surface: #fff;
+    --approvable-surface-raised: #fff;
+    --approvable-border: transparent;
+    --approvable-divider: oklch(0.95 0.005 260);
+
+    --approvable-ink: oklch(0.28 0.015 260);
+    --approvable-ink-soft: oklch(0.5 0.015 260);
+    --approvable-muted: oklch(0.62 0.012 260);
+    --approvable-muted-soft: oklch(0.66 0.012 260);
+
+    --approvable-accent: oklch(0.55 0.16 255);
+    --approvable-accent-ink: oklch(0.5 0.12 255);
+    --approvable-accent-tint: oklch(0.95 0.04 250);
+    --approvable-accent-tint-ink: oklch(0.45 0.14 255);
+    --approvable-accent-on: #fff;
+    --approvable-accent-dashed: oklch(0.68 0.11 255);
+
+    --approvable-success-tint: oklch(0.92 0.07 150);
+    --approvable-success-ink: oklch(0.46 0.14 150);
+    --approvable-success-text: oklch(0.5 0.11 150);
+
+    --approvable-danger-tint: oklch(0.94 0.05 25);
+    --approvable-danger-ink: oklch(0.5 0.16 25);
+    --approvable-danger-text: oklch(0.5 0.16 25);
+
+    --approvable-warn-tint: oklch(0.94 0.06 75);
+    --approvable-warn-ink: oklch(0.5 0.13 65);
+
+    --approvable-neutral-tint: oklch(0.955 0.004 260);
+    --approvable-neutral-ink: oklch(0.62 0.01 260);
+
+    --approvable-control: #fff;
+    --approvable-control-border: oklch(0.88 0.012 260);
+    --approvable-control-ink: oklch(0.45 0.02 260);
+    --approvable-control-hover: oklch(0.97 0.004 260);
+
+    --approvable-skeleton: oklch(0.94 0.006 260);
+    --approvable-skeleton-soft: oklch(0.955 0.005 260);
+
+    --approvable-shadow: rgba(0, 0, 0, 0.16) 1px 1px 7px;
+    --approvable-shadow-lg: 0 30px 70px -20px oklch(0.3 0.03 260 / 0.5);
+    --approvable-scrim: oklch(0.25 0.015 260 / 0.42);
+}
+
+/* Dark — the system preference first. Scoped so that an application which has
+   explicitly asked for light does not get dark anyway. */
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]):not(.light) .approvable,
+    :root:not([data-theme="light"]):not(.light) .approvable-actions,
+    :root:not([data-theme="light"]):not(.light) .approvable-select,
+    :root:not([data-theme="light"]):not(.light) .approvable-timeline,
+    :root:not([data-theme="light"]):not(.light) .approvable-dialog-backdrop {
+        color-scheme: dark;
+
+        --approvable-surface: oklch(0.235 0.012 260);
+        --approvable-surface-raised: oklch(0.26 0.012 260);
+        --approvable-border: oklch(0.3 0.012 260);
+        --approvable-divider: oklch(0.3 0.012 260);
+
+        --approvable-ink: oklch(0.93 0.005 260);
+        --approvable-ink-soft: oklch(0.74 0.008 260);
+        --approvable-muted: oklch(0.63 0.01 260);
+        --approvable-muted-soft: oklch(0.58 0.01 260);
+
+        --approvable-accent: oklch(0.62 0.16 258);
+        --approvable-accent-ink: oklch(0.85 0.09 255);
+        --approvable-accent-tint: oklch(0.32 0.065 258);
+        --approvable-accent-tint-ink: oklch(0.85 0.09 255);
+        --approvable-accent-dashed: oklch(0.55 0.11 258);
+
+        --approvable-success-tint: oklch(0.33 0.075 152);
+        --approvable-success-ink: oklch(0.82 0.13 150);
+        --approvable-success-text: oklch(0.82 0.13 150);
+
+        --approvable-danger-tint: oklch(0.34 0.085 25);
+        --approvable-danger-ink: oklch(0.78 0.14 25);
+        --approvable-danger-text: oklch(0.78 0.14 25);
+
+        --approvable-warn-tint: oklch(0.34 0.075 75);
+        --approvable-warn-ink: oklch(0.83 0.13 80);
+
+        --approvable-neutral-tint: oklch(0.28 0.012 260);
+        --approvable-neutral-ink: oklch(0.63 0.01 260);
+
+        --approvable-control: oklch(0.28 0.012 260);
+        --approvable-control-border: oklch(0.38 0.012 260);
+        --approvable-control-ink: oklch(0.74 0.008 260);
+        --approvable-control-hover: oklch(0.32 0.012 260);
+
+        --approvable-skeleton: oklch(0.29 0.01 260);
+        --approvable-skeleton-soft: oklch(0.255 0.01 260);
+
+        --approvable-shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 16px 34px -22px oklch(0 0 0 / 0.7);
+        --approvable-shadow-lg: 0 30px 70px -20px oklch(0 0 0 / 0.8);
+        --approvable-scrim: oklch(0.12 0.01 262 / 0.62);
+    }
+}
+
+/* …then an explicit choice, which wins in both directions. */
+[data-theme="dark"] .approvable,
+[data-theme="dark"] .approvable-actions,
+[data-theme="dark"] .approvable-select,
+[data-theme="dark"] .approvable-timeline,
+[data-theme="dark"] .approvable-dialog-backdrop,
+.dark .approvable,
+.dark .approvable-actions,
+.dark .approvable-select,
+.dark .approvable-timeline,
+.dark .approvable-dialog-backdrop {
+    color-scheme: dark;
+
+    --approvable-surface: oklch(0.235 0.012 260);
+    --approvable-surface-raised: oklch(0.26 0.012 260);
+    --approvable-border: oklch(0.3 0.012 260);
+    --approvable-divider: oklch(0.3 0.012 260);
+
+    --approvable-ink: oklch(0.93 0.005 260);
+    --approvable-ink-soft: oklch(0.74 0.008 260);
+    --approvable-muted: oklch(0.63 0.01 260);
+    --approvable-muted-soft: oklch(0.58 0.01 260);
+
+    --approvable-accent: oklch(0.62 0.16 258);
+    --approvable-accent-ink: oklch(0.85 0.09 255);
+    --approvable-accent-tint: oklch(0.32 0.065 258);
+    --approvable-accent-tint-ink: oklch(0.85 0.09 255);
+    --approvable-accent-dashed: oklch(0.55 0.11 258);
+
+    --approvable-success-tint: oklch(0.33 0.075 152);
+    --approvable-success-ink: oklch(0.82 0.13 150);
+    --approvable-success-text: oklch(0.82 0.13 150);
+
+    --approvable-danger-tint: oklch(0.34 0.085 25);
+    --approvable-danger-ink: oklch(0.78 0.14 25);
+    --approvable-danger-text: oklch(0.78 0.14 25);
+
+    --approvable-warn-tint: oklch(0.34 0.075 75);
+    --approvable-warn-ink: oklch(0.83 0.13 80);
+
+    --approvable-neutral-tint: oklch(0.28 0.012 260);
+    --approvable-neutral-ink: oklch(0.63 0.01 260);
+
+    --approvable-control: oklch(0.28 0.012 260);
+    --approvable-control-border: oklch(0.38 0.012 260);
+    --approvable-control-ink: oklch(0.74 0.008 260);
+    --approvable-control-hover: oklch(0.32 0.012 260);
+
+    --approvable-skeleton: oklch(0.29 0.01 260);
+    --approvable-skeleton-soft: oklch(0.255 0.01 260);
+
+    --approvable-shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 16px 34px -22px oklch(0 0 0 / 0.7);
+    --approvable-shadow-lg: 0 30px 70px -20px oklch(0 0 0 / 0.8);
+    --approvable-scrim: oklch(0.12 0.01 262 / 0.62);
+}
+
+/* --------------------------------------------------------------------------
+   Reset, scoped to what this package renders
+   -------------------------------------------------------------------------- */
+.approvable,
+.approvable *,
+.approvable-actions,
+.approvable-actions *,
+.approvable-select,
+.approvable-select *,
+.approvable-timeline,
+.approvable-timeline *,
+.approvable-dialog-backdrop,
+.approvable-dialog-backdrop * {
+    box-sizing: border-box;
+}
+
+.approvable,
+.approvable-actions,
+.approvable-select,
+.approvable-timeline,
+.approvable-dialog {
+    font-family: var(--approvable-font);
+    color: var(--approvable-ink);
+}
+
+/* --------------------------------------------------------------------------
+   Panel
+   -------------------------------------------------------------------------- */
+.approvable {
+    position: relative;
+    width: 100%;
+    background: var(--approvable-surface);
+    border: 1px solid var(--approvable-border);
+    border-radius: var(--approvable-radius);
+    box-shadow: var(--approvable-shadow);
+    overflow: hidden;
+}
+
+.approvable-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}
+
+/* --------------------------------------------------------------------------
+   Header
+   -------------------------------------------------------------------------- */
+.approvable-header {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 12px 15px;
+}
+
+.approvable-updated-at {
+    flex: 1;
+    min-width: 0;
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.approvable-history-btn {
+    flex: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    font-size: 11.5px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--approvable-accent-ink);
+    cursor: pointer;
+}
+
+.approvable-history-btn:hover {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+/* --------------------------------------------------------------------------
+   Status badge — the header pill, and anywhere else a status is named
+   -------------------------------------------------------------------------- */
+.approvable-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex: none;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+    color: var(--approvable-neutral-ink);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
+/* The pulsing dot an in-flight approval carries. A pseudo-element, so the
+   badge stays a single text node in the markup. */
+.approvable-badge--waiting,
+.approvable-badge--draft {
+    padding-left: 8px;
+}
+
+.approvable-badge--waiting {
+    background: var(--approvable-accent-tint);
+    color: var(--approvable-accent-tint-ink);
+}
+
+.approvable-badge--draft {
+    background: var(--approvable-warn-tint);
+    color: var(--approvable-warn-ink);
+}
+
+.approvable-badge--waiting::before,
+.approvable-badge--draft::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    flex: none;
+    border-radius: 999px;
+    background: currentColor;
+    animation: approvable-pulse 1.6s ease-in-out infinite;
+}
+
+.approvable-badge--waiting::before {
+    background: var(--approvable-accent);
+}
+
+.approvable-badge--success {
+    background: var(--approvable-success-tint);
+    color: var(--approvable-success-ink);
+}
+
+.approvable-badge--danger {
+    background: var(--approvable-danger-tint);
+    color: var(--approvable-danger-ink);
+}
+
+.approvable-badge--muted,
+.approvable-badge--empty {
+    background: var(--approvable-neutral-tint);
+    color: var(--approvable-neutral-ink);
+}
+
+@keyframes approvable-pulse {
+    0%, 100% { opacity: 0.35; transform: scale(0.85); }
+    50% { opacity: 1; transform: scale(1); }
+}
+
+/* --------------------------------------------------------------------------
+   Step rows
+   -------------------------------------------------------------------------- */
+.approvable-steps {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+}
+
+/* `isDirectionRow` lays the trail out horizontally. Row internals are
+   unchanged; only the flow is. */
+.approvable-steps--row {
+    display: flex;
+    gap: 18px;
+    overflow-x: auto;
+}
+
+.approvable-steps--row .approvable-step {
+    flex: 0 0 auto;
+    max-width: 320px;
+    border-top: 0;
+}
+
+.approvable-step {
+    display: flex;
+    gap: 10px;
+    padding: 7px 0;
+    border-top: 1px solid var(--approvable-divider);
+}
+
+.approvable-step--single-line {
+    align-items: center;
+    min-height: 32px;
+}
+
+/* A step nobody can act on yet reads as background information. */
+.approvable-step--pending {
+    opacity: 0.72;
+}
+
+.approvable-step-disc {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+    color: var(--approvable-neutral-ink);
+}
+
+/* On a multi-line row the disc sits level with the first line of text. */
+.approvable-step:not(.approvable-step--single-line) > .approvable-step-disc {
+    margin-top: 7px;
+}
+
+.approvable-step-disc--success {
+    background: var(--approvable-success-tint);
+    color: var(--approvable-success-ink);
+}
+
+.approvable-step-disc--danger {
+    background: var(--approvable-danger-tint);
+    color: var(--approvable-danger-ink);
+}
+
+/* The step being waited on: a solid ring, no glyph. */
+.approvable-step-disc--ring {
+    background: var(--approvable-surface);
+    border: 3px solid var(--approvable-accent);
+}
+
+/* A step further down the trail: a dashed outline. */
+.approvable-step-disc--pending {
+    background: none;
+    border: 2px dashed var(--approvable-accent-dashed);
+}
+
+.approvable-step-disc svg {
+    width: 11px;
+    height: 11px;
+    display: block;
+}
+
+.approvable-step-body {
+    flex: 1;
+    min-width: 0;
+}
+
+/* Wraps rather than overflowing: in a narrow column the buttons drop to their
+   own line instead of being clipped by the panel. */
+.approvable-step-line {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-height: 32px;
+}
+
+.approvable-step-name {
+    flex: none;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1.3;
+}
+
+.approvable-step--active .approvable-step-name {
+    font-weight: 600;
+}
+
+/* The quiet half of the name pair. It takes the slack in the row and clips
+   before the status does, because the status is the shorter, load-bearing one. */
+/* A basis rather than a bare `flex: 1`, so the role clips to an ellipsis
+   before it collapses to nothing. */
+.approvable-step-role {
+    flex: 1 1 80px;
+    min-width: 0;
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* No role on this step: the spacer still has to push the status right. */
+.approvable-step-spacer {
+    flex: 1;
+    min-width: 0;
+}
+
+.approvable-step-status {
+    display: flex;
+    align-items: baseline;
+    gap: 5px;
+    flex: none;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted-soft);
+}
+
+.approvable-step--success .approvable-step-status {
+    color: var(--approvable-success-text);
+}
+
+.approvable-step--danger .approvable-step-status {
+    color: var(--approvable-danger-text);
+}
+
+.approvable-step-date {
+    color: var(--approvable-muted-soft);
+}
+
+.approvable-step-comment {
+    margin: 0 0 3px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--approvable-ink-soft);
+    text-wrap: pretty;
+}
+
+.approvable-step-comment-more {
+    padding: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--approvable-accent-ink);
+    cursor: pointer;
+}
+
+.approvable-step-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    /* Stays right-aligned on the line it wraps onto. */
+    margin-left: auto;
+}
+
+.approvable-btn-group {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.approvable-btn-group:empty {
+    display: none;
+}
+
+/* --------------------------------------------------------------------------
+   Footer
+   -------------------------------------------------------------------------- */
+.approvable-footer {
+    padding: 10px 15px 13px;
+    border-top: 1px solid var(--approvable-divider);
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+}
+
+/* --------------------------------------------------------------------------
+   Buttons
+   -------------------------------------------------------------------------- */
+.approvable-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    flex: none;
+    padding: 5px 11px;
+    border: 1px solid var(--approvable-control-border);
+    border-radius: 999px;
+    background: var(--approvable-control);
+    color: var(--approvable-control-ink);
+    font-family: inherit;
+    font-size: 11.5px;
+    font-weight: 600;
+    line-height: 1;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.approvable-btn:hover:not(:disabled) {
+    background: var(--approvable-control-hover);
+}
+
+.approvable-btn:focus-visible,
+.approvable-history-btn:focus-visible,
+.approvable-step-comment-more:focus-visible,
+.approvable-timeline-refresh:focus-visible,
+.approvable-dialog-close:focus-visible {
+    outline: 2px solid var(--approvable-accent);
+    outline-offset: 2px;
+}
+
+.approvable-btn:disabled,
+.approvable-btn.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.approvable-btn--primary {
+    border-color: transparent;
+    background: var(--approvable-accent);
+    color: var(--approvable-accent-on);
+}
+
+.approvable-btn--primary:hover:not(:disabled) {
+    background: var(--approvable-accent);
+    filter: brightness(1.06);
+}
+
+/* A button carrying nothing but an icon collapses to a circle. */
+.approvable-btn--icon {
+    width: 24px;
+    height: 24px;
+    padding: 0;
+}
+
+ /* An icon-font glyph. The package ships no font: whichever one the
+    application loads (Tabler, Font Awesome, an in-house set) renders here,
+    because a button's `icon` is a class name from the workflow definition. */
+.approvable-btn i {
+    display: inline-flex;
+    font-size: 13px;
+    line-height: 1;
+}
+
+.approvable-btn-icon,
+.approvable-icon {
+    width: 12px;
+    height: 12px;
+    display: block;
+    flex: none;
+}
+
+/* --------------------------------------------------------------------------
+   Loading — the initial skeleton (no content yet) and the refresh veil
+   -------------------------------------------------------------------------- */
+.approvable-skeleton-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 32px;
+    padding: 7px 0;
+    border-top: 1px solid var(--approvable-divider);
+}
+
+.approvable-skeleton-disc {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--approvable-skeleton);
+    animation: approvable-shimmer 1.4s ease-in-out infinite;
+}
+
+.approvable-skeleton-bar {
+    height: 12px;
+    border-radius: 999px;
+    background: var(--approvable-skeleton);
+    animation: approvable-shimmer 1.4s ease-in-out infinite;
+}
+
+.approvable-skeleton-bar--soft {
+    height: 11px;
+    background: var(--approvable-skeleton-soft);
+}
+
+.approvable-skeleton-bar--pill {
+    width: 92px;
+    height: 20px;
+}
+
+.approvable-skeleton-spacer {
+    flex: 1;
+}
+
+@keyframes approvable-shimmer {
+    0%, 100% { opacity: 0.45; }
+    50% { opacity: 1; }
+}
+
+.approvable-loading {
+    position: absolute;
+    inset: 0;
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: color-mix(in oklab, var(--approvable-surface) 78%, transparent);
+    color: var(--approvable-accent);
+    cursor: wait;
+}
+
+.approvable-spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: approvable-rotation 0.8s linear infinite;
+}
+
+@keyframes approvable-rotation {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .approvable-badge--waiting::before,
+    .approvable-badge--draft::before,
+    .approvable-skeleton-bar,
+    .approvable-skeleton-disc,
+    .approvable-spinner {
+        animation: none;
+    }
+}
+
+/* --------------------------------------------------------------------------
+   Comment popover
+   -------------------------------------------------------------------------- */
+.approvable-popover {
+    position: relative;
+    display: inline-flex;
+}
+
+.approvable-popover-panel {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    z-index: 1050;
+    min-width: 280px;
+    padding: 13px;
+    background: var(--approvable-surface-raised);
+    border: 1px solid var(--approvable-border);
+    border-radius: var(--approvable-radius-sm);
+    box-shadow: var(--approvable-shadow);
+    font-size: 12.5px;
+    line-height: 1.45;
+    text-align: left;
+    white-space: normal;
+    cursor: auto;
+}
+
+.approvable-popover-title {
+    margin-bottom: 6px;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.approvable-popover-meta {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 11.5px;
+    color: var(--approvable-muted);
+}
+
+.approvable-popover-author {
+    color: var(--approvable-ink-soft);
+}
+
+.approvable-popover-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+
+.approvable-textarea {
+    display: block;
+    width: 100%;
+    min-height: 36px;
+    margin: 8px 0 0;
+    padding: 8px 11px;
+    font-family: inherit;
+    font-size: 12.5px;
+    line-height: 1.5;
+    color: var(--approvable-ink);
+    background: var(--approvable-control);
+    border: 1px solid var(--approvable-control-border);
+    border-radius: var(--approvable-radius-sm);
+    resize: none;
+    overflow: hidden;
+}
+
+.approvable-textarea:focus {
+    outline: none;
+    border-color: var(--approvable-accent);
+}
+
+.approvable-textarea::placeholder {
+    color: var(--approvable-muted-soft);
+}
+
+/* --------------------------------------------------------------------------
+   Bulk action block (ApprovableButtons)
+   -------------------------------------------------------------------------- */
+.approvable-divider {
+    margin: 8px 0;
+    border: 0;
+    border-top: 1px solid var(--approvable-divider);
+}
+
+.approvable-actions-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+}
+
+/* --------------------------------------------------------------------------
+   Status select
+   -------------------------------------------------------------------------- */
+.approvable-select {
+    display: block;
+}
+
+.approvable-select-label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 11.5px;
+    font-weight: 600;
+    color: var(--approvable-muted);
+}
+
+.approvable-select-input {
+    display: block;
+    width: 100%;
+    min-height: 36px;
+    padding: 7px 12px;
+    font-family: inherit;
+    font-size: 12.5px;
+    line-height: 1.4;
+    color: var(--approvable-ink);
+    background: var(--approvable-control);
+    border: 1px solid var(--approvable-control-border);
+    border-radius: var(--approvable-radius-sm);
+    cursor: pointer;
+}
+
+.approvable-select-input:hover,
+.approvable-select-input:focus {
+    outline: none;
+    border-color: var(--approvable-accent);
+}
+
+.approvable-select-option {
+    display: flex;
+    align-items: center;
+}
+
+/* --------------------------------------------------------------------------
+   History dialog — the panel's geometry, in a modal
+   -------------------------------------------------------------------------- */
+.approvable-dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 120;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    background: var(--approvable-scrim);
+}
+
+.approvable-dialog {
+    display: flex;
+    flex-direction: column;
+    width: min(460px, 100%);
+    max-height: 82vh;
+    overflow: hidden;
+    background: var(--approvable-surface);
+    border: 1px solid var(--approvable-border);
+    border-radius: var(--approvable-radius);
+    box-shadow: var(--approvable-shadow-lg);
+}
+
+.approvable-dialog-header {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 12px 15px;
+}
+
+/* The "‹ History" chip that titles the dialog. */
+.approvable-dialog-eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    flex: none;
+    margin: 0;
+    padding: 4px 10px 4px 7px;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+    color: var(--approvable-control-ink);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.approvable-dialog-eyebrow svg {
+    width: 11px;
+    height: 11px;
+    flex: none;
+}
+
+.approvable-dialog-title {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.approvable-dialog-close {
+    flex: none;
+    width: 24px;
+    height: 24px;
+    display: grid;
+    place-items: center;
+    padding: 0;
+    border: 1px solid var(--approvable-control-border);
+    border-radius: 999px;
+    background: var(--approvable-control);
+    color: var(--approvable-control-ink);
+    cursor: pointer;
+}
+
+.approvable-dialog-close:hover {
+    background: var(--approvable-control-hover);
+}
+
+.approvable-dialog-body {
+    overflow-y: auto;
+}
+
+.approvable-dialog-footer,
+.approvable-timeline-footer {
+    padding: 10px 15px 13px;
+    border-top: 1px solid var(--approvable-divider);
+    font-size: 11.5px;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+}
+
+/* --------------------------------------------------------------------------
+   Audit timeline — the trail's row rhythm, newest first
+   -------------------------------------------------------------------------- */
+/* Standalone (outside the dialog) it needs its own frame. */
+.approvable-timeline--panel {
+    background: var(--approvable-surface);
+    border: 1px solid var(--approvable-border);
+    border-radius: var(--approvable-radius);
+    box-shadow: var(--approvable-shadow);
+    overflow: hidden;
+}
+
+.approvable-timeline-header {
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 12px 15px;
+}
+
+.approvable-timeline-eyebrow {
+    flex: none;
+    margin: 0;
+    padding: 4px 10px;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+    color: var(--approvable-control-ink);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+.approvable-timeline-title {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.approvable-timeline-refresh {
+    flex: none;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-family: inherit;
+    font-size: 11.5px;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--approvable-accent-ink);
+    cursor: pointer;
+}
+
+.approvable-timeline-refresh:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.approvable-timeline-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 96px;
+    padding: 0 15px 15px;
+    font-size: 12px;
+    color: var(--approvable-muted);
+}
+
+.approvable-timeline-error {
+    margin: 0 15px 15px;
+    padding: 9px 11px;
+    border-radius: var(--approvable-radius-sm);
+    background: var(--approvable-danger-tint);
+    color: var(--approvable-danger-ink);
+    font-size: 12px;
+}
+
+.approvable-timeline-list {
+    list-style: none;
+    margin: 0;
+    padding: 0 15px;
+}
+
+.approvable-timeline-item {
+    display: flex;
+    gap: 10px;
+    padding: 7px 0;
+    border-top: 1px solid var(--approvable-divider);
+}
+
+.approvable-timeline-item--single-line {
+    align-items: center;
+    min-height: 32px;
+}
+
+/* Bookkeeping events are context, not news. */
+.approvable-timeline-item--quiet {
+    opacity: 0.6;
+}
+
+.approvable-timeline-marker {
+    flex: none;
+    width: 18px;
+    height: 18px;
+    display: grid;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+    color: var(--approvable-neutral-ink);
+}
+
+.approvable-timeline-item:not(.approvable-timeline-item--single-line) > .approvable-timeline-marker {
+    margin-top: 7px;
+}
+
+.approvable-timeline-marker svg {
+    width: 11px;
+    height: 11px;
+    display: block;
+}
+
+.approvable-timeline-marker--approve {
+    background: var(--approvable-success-tint);
+    color: var(--approvable-success-ink);
+}
+
+.approvable-timeline-marker--reject {
+    background: var(--approvable-danger-tint);
+    color: var(--approvable-danger-ink);
+}
+
+.approvable-timeline-marker--comment,
+.approvable-timeline-marker--status,
+.approvable-timeline-marker--signal {
+    background: var(--approvable-accent-tint);
+    color: var(--approvable-accent-tint-ink);
+}
+
+.approvable-timeline-marker--undo {
+    background: var(--approvable-warn-tint);
+    color: var(--approvable-warn-ink);
+}
+
+.approvable-timeline-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.approvable-timeline-line {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 32px;
+}
+
+.approvable-timeline-actor {
+    flex: none;
+    margin: 0;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.approvable-timeline-operation {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+    font-size: 11.5px;
+    font-weight: 400;
+    line-height: 1.3;
+    color: var(--approvable-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.approvable-timeline-time {
+    flex: none;
+    font-size: 11px;
+    line-height: 1.3;
+    color: var(--approvable-muted-soft);
+}
+
+.approvable-timeline-comment {
+    margin: 0 0 3px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--approvable-ink-soft);
+    text-wrap: pretty;
+}
+
+.approvable-timeline-change {
+    margin: 0 0 3px;
+    font-size: 11.5px;
+    line-height: 1.6;
+    color: var(--approvable-muted);
+}
+
+.approvable-timeline-change-label {
+    margin-right: 6px;
+    font-weight: 600;
+}
+
+.approvable-timeline-value {
+    padding: 1px 6px;
+    border-radius: 999px;
+    background: var(--approvable-neutral-tint);
+    font-size: 11px;
+}
+
+.approvable-timeline-value--old {
+    color: var(--approvable-muted-soft);
+    text-decoration: line-through;
+}
+
+.approvable-timeline-value--new {
+    color: var(--approvable-ink-soft);
+    font-weight: 500;
+}
+
+.approvable-timeline-arrow {
+    padding: 0 4px;
+    color: var(--approvable-muted-soft);
+}