plexora 0.0.1__py3-none-any.whl

plexora/client/src/css/main.css

@@ -0,0 +1,903 @@
+body {
+    /* !important: Bootstrap's reboot (injected by vendor_bundle.js after this
+       stylesheet) sets its own `body { background-color: var(--bs-body-bg) }`
+       -- same specificity, later in the cascade, so it otherwise wins and
+       leaves the page white. Same override pattern #topBar below already
+       uses against Bootstrap. */
+    background-color: var(--surface-0) !important;
+    font-family: 'Source Sans Pro', sans-serif;
+}
+
+#topBar {
+    background-color: var(--surface-1) !important;
+    border-bottom: 1px solid var(--border-subtle);
+    height: 5vh;
+    max-height: 5vh;
+    left: 0;
+    padding: 0 var(--space-4);
+    position: relative;
+    margin: 0;
+    top: 0;
+    width: 100vw;
+    z-index: 101;
+}
+
+#title {
+    align-items: center;
+    color: var(--text-primary);
+    display: inline-flex;
+    font-size: 16px;
+    gap: var(--space-2);
+    text-decoration: none;
+}
+
+#title:hover,
+#title:focus {
+    color: var(--text-primary);
+    text-decoration: none;
+}
+
+#navbar-logo {
+    height: 24px;
+    width: auto;
+}
+
+#topBar .nav-link {
+    color: var(--text-secondary);
+    font-size: 15px;
+}
+
+#topBar .nav-link:hover,
+#topBar .nav-link:focus,
+#topBar .dropdown.show > .nav-link {
+    color: var(--text-primary);
+}
+
+#topBar .dropdown-menu {
+    background-color: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-2) 0;
+    min-width: 220px;
+}
+
+#topBar .dropdown-item {
+    color: var(--text-secondary);
+    font-size: 13px;
+    padding: var(--space-1) var(--space-3);
+    background-color: transparent;
+}
+
+#topBar .dropdown-item:hover,
+#topBar .dropdown-item:focus {
+    color: var(--text-primary);
+    background-color: var(--surface-1);
+}
+
+#topBar .dropdown-item.disabled,
+#topBar .dropdown-item:disabled {
+    color: var(--text-muted);
+    pointer-events: none;
+}
+
+#topBar .dropdown-header {
+    color: var(--text-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    padding: var(--space-1) var(--space-3);
+}
+
+#topBar .dropdown-divider {
+    border-top: 1px solid var(--border-subtle);
+    margin: var(--space-1) 0;
+}
+
+#topBar .nav-check-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    cursor: pointer;
+}
+
+#topBar .nav-check-item input[type="checkbox"] {
+    margin: 0;
+}
+
+#topBar .nav-check-item:has(input:disabled) {
+    color: var(--text-muted);
+    cursor: default;
+}
+
+/* File > Export Image submenu -- a plain nested .dropdown-menu (inherits
+   the themed look above) shown via hover/focus/click rather than
+   Bootstrap's own JS, since bootstrap's data-api isn't wired for nested
+   dropdowns here. See navbarControls.js for the click-to-toggle fallback
+   (touch/keyboard) that adds/removes the "open" class below. */
+#topBar .nav-submenu-parent {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    gap: var(--space-3);
+    justify-content: space-between;
+    position: relative;
+}
+
+#topBar .nav-submenu-parent.disabled {
+    color: var(--text-muted);
+    cursor: default;
+    pointer-events: none;
+}
+
+#topBar .nav-submenu-caret {
+    font-size: 10px;
+    opacity: 0.7;
+}
+
+#topBar .nav-submenu {
+    display: none;
+    left: 100%;
+    margin: 0;
+    position: absolute;
+    top: -1px;
+}
+
+#topBar .nav-submenu-parent:hover .nav-submenu,
+#topBar .nav-submenu-parent:focus-within .nav-submenu,
+#topBar .nav-submenu-parent.open .nav-submenu {
+    display: block;
+}
+
+/* Fast custom tooltip -- the native `title` attribute has a browser-enforced
+   ~1s hover delay with no CSS way to shorten it. Opt in per-element with
+   data-tooltip="..." wherever that delay actually matters (e.g. HD Mode,
+   both navbar and sidebar); everywhere else keeps using plain `title`. */
+[data-tooltip] {
+    position: relative;
+}
+
+[data-tooltip]::after {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    bottom: calc(100% + 6px);
+    box-shadow: var(--shadow-sm);
+    color: var(--text-primary);
+    content: attr(data-tooltip);
+    font-size: 12px;
+    font-weight: 400;
+    left: 50%;
+    max-width: 220px;
+    opacity: 0;
+    padding: 6px 8px;
+    pointer-events: none;
+    position: absolute;
+    text-align: left;
+    transform: translateX(-50%);
+    transition: opacity 80ms ease;
+    white-space: normal;
+    z-index: 400;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after {
+    opacity: 1;
+}
+
+/*LOADING SPINNER SECTION*/
+.lds-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+}
+
+.lds-ellipsis div {
+    position: absolute;
+    top: 33px;
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background: #000000;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+
+.lds-ellipsis div:nth-child(1) {
+    left: 8px;
+    animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+    left: 8px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+    left: 32px;
+    animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+    left: 56px;
+    animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes lds-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes lds-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(24px, 0);
+    }
+}
+
+/*END OF LOADING SPINNER SECTION*/
+
+#channel_list {
+    width: 100%;
+    height: 80vh;
+    font-size: 10pt;
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
+}
+
+#upload-container {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    padding: 20px;
+}
+
+#channel_list .list-group-item {
+    padding: .20rem 0.5rem;
+    border: 0;
+}
+
+#channel_list .active {
+    background-color: rgba(0, 0, 0, 0.75);
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+    border-right: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    border-left: none;
+    height: 90px;
+}
+
+#channel_list .list-group {
+    border-radius: 0rem;
+}
+
+#channel_list_loader {
+    margin-left: 33px;
+}
+
+.list-button {
+    cursor: pointer;
+}
+
+.auto-loading {
+    opacity: 50%;
+}
+
+.auto-btn {
+    float: right;
+    padding-top: 0;
+    padding-bottom: 0;
+    border: 1px;
+}
+
+.image_distribution_line {
+    stroke: rgba(130, 130, 130, 0.5);
+    stroke-width: 4px;
+    fill: none;
+}
+
+.gmm_line {
+    stroke-width: 1px;
+    stroke-opacity: 0.75;
+    fill: none;
+}
+
+.slider .handle {
+    fill: #fff;
+    stroke: #000;
+    stroke-opacity: .5;
+    stroke-width: 1.25px;
+    cursor: move;
+}
+
+.slider text {
+    margin-top: -10px;
+    font-size: 10px;
+}
+
+
+nav {
+    margin-bottom: 10px;
+}
+
+.channel-col {
+    margin: 0;
+}
+
+.selected-channels-header {
+    color: white;
+    font-size: 0.6rem;
+}
+
+.bold-selections-header * {
+    font-weight: bold;
+}
+
+#upload-container * {
+    font-size: 0.8rem;
+}
+
+#upload-container label {
+    font-weight: bold;
+}
+
+.progress-bar {
+    background-color: #5ca3c1;
+    role: progressbar;
+    width: 0%;
+    aria-valuenow: 0;
+    aria-valuemin: 0;
+    aria-valuemax: 100;
+    height: 40px;
+    border-radius: 2px;
+}
+
+#upload-container .progress-bar-label {
+    top: 50%;
+    vertical-align: middle;
+    font-size: 0.5rem;
+    margin: 3px;
+    white-space: nowrap;
+
+}
+
+#upload-container .progress {
+    margin: 5px;
+    width: 100%;
+    display: none;
+}
+
+#upload-parent {
+    width: 800px;
+    background-color: rgba(255, 255, 255, 1);
+    padding: 10px;
+}
+
+#upload_button {
+    height: 40px
+}
+
+
+.delete-button {
+    padding-left: 5px;
+}
+
+.fa-pencil, .fa-trash {
+    color: black;
+}
+
+.plexora-quit-overlay {
+    align-items: center;
+    background: var(--surface-0);
+    box-sizing: border-box;
+    color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    height: 100vh;
+    justify-content: center;
+    text-align: center;
+    width: 100vw;
+}
+
+.plexora-quit-icon {
+    color: var(--text-muted);
+    font-size: 40px;
+}
+
+.plexora-quit-overlay p {
+    color: var(--text-secondary);
+    font-size: 14px;
+}
+
+
+/* ---------------------------------------------------------------------------
+   App-wide status indicator (appStatus.js). Pinned to the far right of the
+   navbar on every page that extends base.html.
+
+   Colours come from the shared accent tokens rather than literals so the three
+   states stay consistent with the rest of the UI:
+     --accent-success  green   up to date
+     --accent-warning  orange  working
+     --accent-danger   red     disconnected / error
+   --------------------------------------------------------------------------- */
+.app-status {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    gap: var(--space-2);
+    /* .navbar-nav carries me-auto, so this lands hard right of the menus. */
+    margin-left: auto;
+    font-size: 12px;
+    letter-spacing: 0.01em;
+    line-height: 1;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.app-status-glyph {
+    background-color: var(--accent-success);
+    border-radius: 50%;
+    display: inline-block;
+    height: 9px;
+    width: 9px;
+}
+
+.app-status-label {
+    color: var(--text-muted);
+}
+
+.app-status[data-state="busy"] .app-status-glyph {
+    background-color: var(--accent-warning);
+    /* The shape-shifting glyph. Pure CSS -- morphing border-radius plus a slow
+       rotate reads as one small object changing form, with no SVG or library. */
+    animation: plexora-status-morph 1.6s var(--ease-standard) infinite;
+}
+
+.app-status[data-state="error"] .app-status-glyph {
+    background-color: var(--accent-danger);
+}
+
+.app-status[data-state="error"] .app-status-label {
+    color: var(--accent-danger);
+}
+
+/* Typing-like sweep across the label while work is in flight. */
+.app-status[data-state="busy"] .app-status-label {
+    animation: plexora-status-shimmer 1.8s linear infinite;
+    background: linear-gradient(90deg,
+        var(--text-muted) 0%, var(--text-muted) 35%,
+        var(--text-primary) 50%,
+        var(--text-muted) 65%, var(--text-muted) 100%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-size: 200% 100%;
+}
+
+@keyframes plexora-status-morph {
+    0%   { border-radius: 50%; transform: rotate(0deg) scale(1); }
+    30%  { border-radius: 34% 66% 62% 38% / 38% 34% 66% 62%; transform: rotate(120deg) scale(0.8); }
+    60%  { border-radius: 24%; transform: rotate(240deg) scale(1.06); }
+    100% { border-radius: 50%; transform: rotate(360deg) scale(1); }
+}
+
+@keyframes plexora-status-shimmer {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+/* tokens.css already zeroes the duration tokens under this query; the status
+   animations are decorative, so drop them entirely rather than run them fast. */
+@media (prefers-reduced-motion: reduce) {
+    .app-status[data-state="busy"] .app-status-glyph,
+    .app-status[data-state="busy"] .app-status-label {
+        animation: none;
+    }
+    .app-status[data-state="busy"] .app-status-label {
+        background: none;
+        color: var(--accent-warning);
+        -webkit-text-fill-color: var(--accent-warning);
+    }
+}
+
+/* ---------------------------------------------------------------------------
+   Segmentation-mask wait overlay (views/segmentationProgress.js)
+
+   Lives here rather than in import.css because both step-2 import pages use it
+   and only one of them loads import.css -- and because the overlay attaches to
+   <body>, so it is outside the .import-page wrapper those rules are scoped to.
+   --------------------------------------------------------------------------- */
+.segmentation-progress-overlay {
+    align-items: center;
+    background: rgba(5, 7, 10, 0.82);
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    position: fixed;
+    z-index: 1080;
+}
+
+.segmentation-progress-card {
+    background: var(--surface-1);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    padding: var(--space-6);
+    width: min(420px, calc(100vw - 2 * var(--space-5)));
+}
+
+.segmentation-progress-title {
+    color: var(--text-primary);
+    font-size: 15px;
+    font-weight: 700;
+}
+
+.segmentation-progress-title.has-error {
+    color: var(--accent-danger);
+}
+
+.segmentation-progress-detail {
+    color: var(--text-muted);
+    font-size: 12px;
+    margin-top: var(--space-2);
+}
+
+.segmentation-progress-track {
+    background: var(--surface-2);
+    border-radius: var(--radius-sm);
+    height: 8px;
+    margin-top: var(--space-4);
+    overflow: hidden;
+}
+
+.segmentation-progress-fill {
+    background: var(--accent-channel);
+    height: 100%;
+    transition: width var(--duration-base) var(--ease-standard);
+    width: 0;
+}
+
+.segmentation-progress-fill.has-error {
+    background: var(--accent-danger);
+}
+
+/* Used until the job reports a percentage, so the panel never looks stalled
+   while the conversion is still opening a large mask. */
+.segmentation-progress-fill.is-indeterminate {
+    animation: segmentation-progress-slide 1.1s ease-in-out infinite;
+    width: 35%;
+}
+
+@keyframes segmentation-progress-slide {
+    0% { margin-left: -35%; }
+    100% { margin-left: 100%; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .segmentation-progress-fill.is-indeterminate {
+        animation: none;
+        width: 100%;
+    }
+}
+
+.segmentation-progress-actions:not(:empty) {
+    margin-top: var(--space-5);
+}
+
+/* ------------------------------------------------------------------ */
+/* Data-source field (dataSourceField.js)                               */
+/* A path input, its pickers, and the table/image selects that appear   */
+/* only when the file forces the choice. Shared by the requirements     */
+/* modal and the edit page, so it is styled here rather than in         */
+/* import.css -- the modal opens over the viewer, which loads neither   */
+/* that stylesheet nor anything else the edit page has.                 */
+/* ------------------------------------------------------------------ */
+
+.data-source-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+}
+
+.data-source-extra {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    min-width: 0;
+}
+
+.data-source-extra[hidden] {
+    display: none;
+}
+
+/* Spelled out rather than inherited from import.css, for the same reason the
+   rest of this block is here. The margin is dropped because the column above
+   already spaces these with `gap`. */
+.data-source-field .field-hint {
+    color: var(--text-muted);
+    font-size: 11px;
+    font-weight: 400;
+    margin-top: 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* "Browse..." buttons                                                  */
+/* Beside every path input in the app. Here rather than in import.css   */
+/* because the requirements modal opens over the viewer, which loads    */
+/* only this stylesheet -- so there the buttons rendered as bare native */
+/* controls next to fields that were styled.                            */
+/* ------------------------------------------------------------------ */
+
+.browse-button {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    flex-shrink: 0;
+    font-size: 13px;
+    padding: 8px 12px;
+    white-space: nowrap;
+}
+
+.browse-button:hover {
+    border-color: var(--border-strong);
+    color: var(--text-primary);
+}
+
+/* ------------------------------------------------------------------ */
+/* Requirements modal                                                   */
+/* Shown when a plugin declares something the project has not got. Core */
+/* owns this: it renders requirements from any plugin, so it must not   */
+/* live in a plugin stylesheet (tests/test_plugin_css_boundary.py).     */
+/* ------------------------------------------------------------------ */
+
+.requirements-modal {
+    background: var(--surface-1);
+    color: var(--text-primary);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    padding: 0;
+    width: min(720px, 92vw);
+    max-height: 86vh;
+    overflow: auto;
+}
+
+.requirements-modal::backdrop {
+    background: rgba(0, 0, 0, 0.62);
+}
+
+.requirements-form {
+    padding: var(--space-6);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+}
+
+.requirements-title {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.requirements-subtitle {
+    margin: 0;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+}
+
+.requirements-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+}
+
+/* Label beside its control, not above it. The form is a short list of "which
+   column is this?" questions, and one column of left-aligned labels is what
+   makes it answerable at a glance instead of scrolled through. */
+.requirement-field {
+    display: grid;
+    grid-template-columns: minmax(8rem, 32%) 1fr;
+    align-items: center;
+    column-gap: var(--space-3);
+    row-gap: var(--space-1);
+}
+
+.requirement-field > label {
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+/* A field whose control grows downwards -- the data path with its table
+   picker, the coordinate control with its second row. The label names the
+   first row, so it sits against that rather than drifting to the middle of
+   however tall the stack has become. */
+.requirement-field-stacked {
+    align-items: start;
+}
+
+.requirement-field-stacked > label {
+    padding-top: var(--space-2);
+}
+
+/* "optional" rides on the label rather than taking a line of its own under
+   the control, which used to double the height of every field that had it. */
+/* Styled here rather than leaning on import.css: the modal opens over the
+   viewer, which does not load that stylesheet. */
+.requirement-field > label > .field-hint {
+    margin-left: var(--space-1);
+    font-size: 0.72rem;
+    font-weight: 400;
+    text-transform: lowercase;
+    color: var(--text-muted);
+}
+
+/* Two controls answering one question ("which numbers, and logged?") share a
+   row rather than taking two, which is the whole point of the grid above. */
+.requirement-inline {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-width: 0;
+}
+
+.requirement-inline .form-select {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.requirement-inline-check {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    flex: 0 0 auto;
+    font-size: 0.78rem;
+    font-weight: 400;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.requirement-inline-check input {
+    margin: 0;
+    cursor: pointer;
+}
+
+/* The coordinate control (coordinateField.js): a source radio stacked over
+   whichever picker that source needs. Two rows rather than one because the
+   second depends on the first -- reading them side by side hides that the
+   choice above changes what is being asked below.
+
+   Styled here rather than in import.css because the requirements modal opens
+   over the viewer, which does not load that stylesheet -- the same reason the
+   field-hint rule above lives here. The project edit page loads both. */
+.requirement-stack {
+    min-width: 0;
+}
+
+.coordinate-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+}
+
+.coordinate-field-source {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+}
+
+.coordinate-field-radio {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: 0.78rem;
+    font-weight: 400;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.coordinate-field-radio input {
+    margin: 0;
+    cursor: pointer;
+}
+
+/* The two obs selects sit side by side: one position, named twice. */
+.coordinate-field-pair {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+}
+
+.coordinate-field-pair .form-select {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+/* The column classifier is two drag targets, not a control -- it gets the
+   full width and its label above it. */
+.requirement-field-wide {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+}
+
+.requirements-modal .form-control,
+.requirements-modal .form-select {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    padding: var(--space-2) var(--space-3);
+    font-size: 0.85rem;
+    width: 100%;
+}
+
+.requirements-modal .form-control::placeholder {
+    color: var(--text-muted);
+}
+
+/* Every property Bootstrap's own `.form-control:focus` sets has to be named
+   here, background included. Bootstrap's CSS is injected by style-loader as a
+   <style> at the end of <head> -- after main.css's <link> -- and
+   `.form-control:focus` carries the same specificity as
+   `.requirements-modal .form-control`, so it wins the tie on source order.
+   Naming only outline and border-color left the dialog's first input painted
+   white-on-white with a blue glow the moment it took focus, which is the
+   state it opens in. */
+.requirements-modal .form-control:focus,
+.requirements-modal .form-select:focus {
+    background: var(--surface-2);
+    color: var(--text-primary);
+    border-color: var(--accent-channel);
+    box-shadow: 0 0 0 3px var(--accent-channel-soft);
+    outline: none;
+}
+
+.requirements-modal .import-field-row {
+    display: flex;
+    align-items: stretch;
+    gap: var(--space-2);
+}
+
+/* The input takes the slack and the buttons keep their own width. Without
+   this the `width: 100%` above fights the buttons for the row. */
+.requirements-modal .import-field-row .form-control {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.requirements-error {
+    color: var(--accent-danger);
+    background: var(--accent-danger-soft);
+    border-radius: var(--radius-sm);
+    padding: var(--space-2) var(--space-3);
+    font-size: 0.82rem;
+}
+
+.requirements-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+}