/* roomflow-rail-wip.css — companion of roomflow-rail-wip.js (2026-09-29 step
   4). Loaded after roomflow-asset-wip.css; only WIP routes render
   <body data-nav-wip>. Visual language ported from SnapRender's own rail
   (snaprender-panel-wip.css ~1650-1800/2470-2620), renamed dt-rf-rail-* to
   match this page's own prefix, and shares roomflow-asset-wip.css's own
   280px/296px slot + picture/tools transition instead of defining a second
   one (see the Assets-tab notes below). */

body[data-nav-wip] .dt-rf-rail {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    background: #f5f6f8;
    border: 0;
    border-radius: 16px;
    /* Separate the card from the canvas without changing its reserved width. */
    box-shadow: 0 0 0 12px #ffffff;
    transition: width .28s cubic-bezier(.2, .8, .2, 1);
}
body[data-nav-wip] .dt-rf-rail[hidden] { display: none !important; }
body.dark-mode[data-nav-wip] .dt-rf-rail { background: #1f1f22; box-shadow: 0 0 0 12px #161618; }

/* collapsed: a narrow column - expand key, Large/Grid switch, thumb strip */
body[data-nav-wip] .dt-rf-rail { width: 56px; }
body[data-nav-wip] .dt-rf-rail.is-open { width: 280px; max-width: calc(100% - 40px); }

body[data-nav-wip] .dt-rf-rail-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    flex: 0 0 auto;
}
body[data-nav-wip] .dt-rf-rail.is-open .dt-rf-rail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 10px;
}
body[data-nav-wip] .dt-rf-rail-expand,
body[data-nav-wip] .dt-rf-rail-collapse {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}
body[data-nav-wip] .dt-rf-rail-expand:hover,
body[data-nav-wip] .dt-rf-rail-collapse:hover { background: #e7e9ed; color: #111827; }
body[data-nav-wip] .dt-rf-rail-expand[hidden],
body[data-nav-wip] .dt-rf-rail-collapse[hidden] { display: none !important; }
body.dark-mode[data-nav-wip] .dt-rf-rail-expand,
body.dark-mode[data-nav-wip] .dt-rf-rail-collapse { background: transparent; color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-rf-rail-expand:hover,
body.dark-mode[data-nav-wip] .dt-rf-rail-collapse:hover { background: #34343a; color: #f5f5f6; }

body[data-nav-wip] .dt-rf-rail-tabs {
    display: flex;
    min-width: 0;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #e7e9ed;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
body[data-nav-wip] .dt-rf-rail-tabs[hidden] { display: none !important; }
body[data-nav-wip] .dt-rf-rail-tab {
    height: 28px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
body[data-nav-wip] .dt-rf-rail-tab:hover { background: #f3f4f6; color: #111827; }
body[data-nav-wip] .dt-rf-rail-tab.is-on { background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
body[data-nav-wip] .dt-rf-rail-tab[hidden] { display: none !important; }
body.dark-mode[data-nav-wip] .dt-rf-rail-tab { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-rf-rail-tab:hover { background: #2a2a2e; color: #f5f5f6; }
body.dark-mode[data-nav-wip] .dt-rf-rail-tab.is-on { background: #34343a; color: #f5f5f6; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

body[data-nav-wip] .dt-rf-rail-viewsw {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #e7e9ed;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
body.dark-mode[data-nav-wip] .dt-rf-rail-tabs,
body.dark-mode[data-nav-wip] .dt-rf-rail-viewsw { background: #141416; box-shadow: inset 0 0 0 1px #2a2a2e; }
/* collapsed (56px) the two keys side by side (~58px) overflowed the column:
   stack them, as SnapRender's collapsed rail does */
body[data-nav-wip] .dt-rf-rail:not(.is-open) .dt-rf-rail-viewsw {
    flex-direction: column;
}
body[data-nav-wip] .dt-rf-rail-view {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
body[data-nav-wip] .dt-rf-rail-view.is-on { background: #ffffff; color: #111827; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
body[data-nav-wip] .dt-rf-rail-view:disabled { opacity: .4; cursor: not-allowed; }
body.dark-mode[data-nav-wip] .dt-rf-rail-view { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-rf-rail-view.is-on { background: #34343a; color: #f5f5f6; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

/* collapsed thumb strip / expanded results list */
body[data-nav-wip] .dt-rf-rail-strip,
body[data-nav-wip] .dt-rf-rail-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 4px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body[data-nav-wip] .dt-rf-rail-strip::-webkit-scrollbar,
body[data-nav-wip] .dt-rf-rail-results::-webkit-scrollbar { width: 0; }
body[data-nav-wip] .dt-rf-rail-strip[hidden] { display: none !important; }
body[data-nav-wip] .dt-rf-rail-body[hidden] { display: none !important; }
body[data-nav-wip] .dt-rf-rail-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
}
body[data-nav-wip] .dt-rf-rail-results[hidden],
body[data-nav-wip] .dt-rf-rail-assets[hidden] { display: none !important; }
body[data-nav-wip] .dt-rf-rail-results {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
}
body[data-nav-wip] .dt-rf-rail-results > .dt-rf-rail-thumb { min-width: 0; }
body[data-nav-wip] .dt-rf-rail-results > .dt-rf-rail-empty { grid-column: 1 / -1; }
body[data-nav-wip] .dt-rf-rail-assets { flex: 1 1 auto; display: flex; min-width: 0; min-height: 0; }

body[data-nav-wip] .dt-rf-rail-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: #e5e7eb;
    opacity: .85;
    flex: 0 0 auto;
}
body[data-nav-wip] .dt-rf-rail-thumb:hover { opacity: 1; }
body[data-nav-wip] .dt-rf-rail-thumb.is-current { opacity: 1; border-color: #2563eb; }
body[data-nav-wip] .dt-rf-rail-thumb img,
body[data-nav-wip] .dt-rf-rail-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Match SnapRender: centered play marks for both rail and full-size cards. */
body[data-nav-wip] .dt-rf-rail-vmark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(17, 24, 39, .62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat center / 14px;
    pointer-events: none;
}
body[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-vmark {
    width: 40px;
    height: 40px;
    background-size: 20px;
}
/* [WIP 2026-09-29 step 6] a derivative/full address that no longer loads
   (an expired signed address, a removed object) is hidden instead of showing
   a broken-image box - same idea as SnapRender's own .dt-rv-thumb.is-broken */
body[data-nav-wip] .dt-rf-rail-thumb.is-broken {
    display: none !important;
}
body[data-nav-wip] .dt-rf-rail-empty {
    margin: 8px 4px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #9ca3af;
    text-align: left;
}
body.dark-mode[data-nav-wip] .dt-rf-rail-empty { color: #71717a; }

/* grid view: overlays the canvas, same idea as SnapRender's dt-rv-grid */
body[data-nav-wip] .dt-rf-rail-grid {
    position: absolute;
    inset: 0;
    z-index: 14;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-radius: 16px;
    background: #ffffff;
    box-sizing: border-box;
    transition: right .28s cubic-bezier(.2, .8, .2, 1);
}
body[data-nav-wip] .dt-rf-rail-grid[hidden] { display: none !important; }
body[data-nav-wip] .dt-rf-rail-grid {
    --dt-rf-scroll-thumb: rgba(100, 116, 139, .28);
    --dt-rf-scroll-thumb-hover: rgba(100, 116, 139, .48);
    scrollbar-width: thin;
    scrollbar-color: var(--dt-rf-scroll-thumb) transparent;
}
body.dark-mode[data-nav-wip] .dt-rf-rail-grid {
    background: #161618;
    --dt-rf-scroll-thumb: rgba(161, 161, 170, .30);
    --dt-rf-scroll-thumb-hover: rgba(161, 161, 170, .50);
}
/* Preserve the thin fallback in Firefox; Chromium/WebKit use the rounded thumb. */
@supports selector(::-webkit-scrollbar) {
    body[data-nav-wip] .dt-rf-rail-grid {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar-track,
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar-corner {
        background: transparent;
    }
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar-track {
        margin: 8px 0;
    }
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar-thumb {
        min-height: 48px;
        border: 2px solid transparent;
        border-radius: 999px;
        background-color: var(--dt-rf-scroll-thumb);
        background-clip: padding-box;
    }
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar-thumb:hover {
        background-color: var(--dt-rf-scroll-thumb-hover);
    }
    body[data-nav-wip] .dt-rf-rail-grid::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }
}
body[data-nav-wip] .dt-rf-rail-col {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    gap: 12px;
}
body[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb {
    display: block;
    aspect-ratio: auto;
    border: 0;
    border-radius: 12px;
    background: #f3f4f6;
    opacity: 1;
}
body.dark-mode[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb { background: #2a2a2e; }
body[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb.is-broken { display: none; }
body[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb img,
body[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb video {
    height: auto;
    object-fit: contain;
}

/* [WIP 2026-09-30] grid pending placeholder - item 2 of "batch 2", ported
   from SnapRender's .dt-rv-pending/.dt-rv-pend-* (snaprender-panel-wip.css
   ~2615-2663, ~4278-4288), renamed to the dt-rf-rail-pend* namespace. */
body[data-nav-wip] .dt-rf-rail-pending {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 120px;
    border-radius: 10px;
    cursor: default;
    overflow: hidden;
    background: linear-gradient(110deg, #eef0f3 30%, #f7f8fa 50%, #eef0f3 70%) 0 0 / 250% 100%;
    animation: dt-rf-rail-shimmer 1.6s linear infinite;
}
body.dark-mode[data-nav-wip] .dt-rf-rail-pending {
    background: linear-gradient(110deg, #1f1f22 30%, #2a2a2e 50%, #1f1f22 70%) 0 0 / 250% 100%;
}
@keyframes dt-rf-rail-shimmer {
    to { background-position: -150% 0; }
}
body[data-nav-wip] .dt-rf-rail-pend-pct {
    font-size: 22px;
    font-weight: 600;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
body.dark-mode[data-nav-wip] .dt-rf-rail-pend-pct { color: #e5e7eb; }
body[data-nav-wip] .dt-rf-rail-pend-bar {
    width: 56%;
    height: 4px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(17, 24, 39, .08);
}
body.dark-mode[data-nav-wip] .dt-rf-rail-pend-bar { background: rgba(255, 255, 255, .08); }
body[data-nav-wip] .dt-rf-rail-pend-bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width .3s ease;
}
body[data-nav-wip] .dt-rf-rail-pend-stage {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
    padding: 0 8px;
}
body.dark-mode[data-nav-wip] .dt-rf-rail-pend-stage { color: #a1a1aa; }
/* in the grid the placeholder IS the progress display: the page's own card
   and its dimming masks step aside,
   same as SnapRender's own body.dt-rv-grid-pending rules
   (snaprender-panel-wip.css ~2606-2614). A video run keeps them (no placeholder). */
body.dt-rf-rail-grid-on[data-nav-wip] .wr-lists-box > .progress.active:not([data-dt-kind="video"]) { visibility: hidden !important; }
body.dt-rf-rail-grid-on[data-nav-wip] .wr-lists-box.dt-p-on:not(:has(> .progress[data-dt-kind="video"]))::before { display: none !important; }
body.dt-rf-rail-grid-on[data-nav-wip] .wr-lists-box:has(> .progress.active:not([data-dt-kind="video"])) > #genLoadingMask { display: none !important; }

/* [WIP 2026-09-30] item 5's grid pick-to-edit / multi-select, ported from
   SnapRender's own .dt-rv-cell.is-sel/.dt-rv-check/.dt-rv-gridbar/.dt-rv-tool
   (snaprender-panel-wip.css ~2530-2572, ~3228-3255, ~3488), renamed to the
   dt-rf-rail-* / dt-rf-grid-* namespace. */
body[data-nav-wip] .dt-rf-rail-thumb { position: relative; }
body[data-nav-wip] .dt-rf-rail-thumb.is-sel::after,
body[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb.is-current::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #2563eb;
    border-radius: inherit;
    pointer-events: none;
}
body[data-nav-wip] .dt-rf-rail-check {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgba(17, 24, 39, .28);
    pointer-events: none;
}
body.dt-rf-rail-multi[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-check { display: block; }
body.dt-rf-rail-multi[data-nav-wip] .dt-rf-rail-grid .dt-rf-rail-thumb.is-sel .dt-rf-rail-check {
    border-color: #2563eb;
    background: #2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
/* the grid bar is a second .dt-rs-tools in the tab row (look, dark mode,
   is-icons, :disabled and .is-on all come from roomflow-panel-wip.css /
   roomflow-inline-edit-wip.css); only its own hidden state is needed here,
   since .dt-rs-tools' own display:flex would otherwise beat [hidden] */
body[data-nav-wip] .wr-title .dt-rf-grid-tools[hidden] { display: none !important; }

/* ── space reservation: the collapsed rail always takes a little room while
   offered; opening it (either tab) reuses the exact 296px/half-centre shift
   roomflow-asset-wip.css already defines for its own panel (dt-rf-as-open) -
   the Assets tab drives that same class via window.dtRfAssets.setOpen(), so
   nothing here needs to repeat those numbers for that case. Only the
   collapsed width and the Results-tab-open width need their own rule. ── */
body.dt-rf-rail-on[data-nav-wip] .wr-lists.result {
    padding-right: 72px !important;
    box-sizing: border-box !important;
    transition: padding .28s cubic-bezier(.2, .8, .2, 1), left .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1);
}
body.dt-rf-rail-open[data-nav-wip] .wr-lists.result {
    padding-right: 296px !important;
}
/* The rail's separator shadow cuts a straight edge through the shared stage.
   Round that exposed edge without resizing the image/asset coordinate space. */
@media (min-width: 769px) {
    body.dt-rf-rail-on[data-nav-wip] .dt-rf-rail-grid {
        right: 68px;
    }
    body.dt-rf-rail-on.dt-rf-rail-open[data-nav-wip] .dt-rf-rail-grid {
        right: min(292px, calc(100% - 28px));
    }
    body.dt-rf-rail-on[data-nav-wip] .wr-lists-box::after {
        content: '';
        position: absolute;
        inset: 0 68px 0 0; /* 56px rail + 12px separator */
        z-index: 14; /* above the picture, below the rail and generation mask */
        border-radius: inherit;
        box-shadow: 0 0 0 12px #ffffff;
        pointer-events: none;
        transition: right .28s cubic-bezier(.2, .8, .2, 1);
    }
    body.dt-rf-rail-on.dt-rf-rail-open[data-nav-wip] .wr-lists-box::after {
        right: min(292px, calc(100% - 28px)); /* rail max-width also leaves 40px */
    }
    body.dark-mode.dt-rf-rail-on[data-nav-wip] .wr-lists-box::after {
        box-shadow: 0 0 0 12px #161618;
    }
}
body.dt-rf-rail-on[data-nav-wip] .dt-rs-tools,
body.dt-rf-rail-on[data-nav-wip] .dt-rf-bar {
    transition: padding .28s cubic-bezier(.2, .8, .2, 1), left .28s cubic-bezier(.2, .8, .2, 1), width .28s cubic-bezier(.2, .8, .2, 1);
}
body.dt-rf-rail-open[data-nav-wip] .dt-rs-tools,
body.dt-rf-rail-open[data-nav-wip] .dt-rf-bar {
    left: calc(50% - 148px);
}
/* the field is centred on the free area left of the rail, so it must also fit
   in it: at its natural 640px it spilled past the canvas's left edge when the
   rail was open (free area ~580px at 1440px) */
body.dt-rf-rail-on[data-nav-wip] .dt-rf-bar {
    max-width: calc(100% - 72px - 32px) !important;
}
body.dt-rf-rail-open[data-nav-wip] .dt-rf-bar,
body.dt-rf-as-open[data-nav-wip] .dt-rf-bar {
    max-width: calc(100% - 296px - 32px) !important;
}
/* grid view hides the per-picture keys/tools, same as SnapRender. [WIP
   2026-09-30] item 5: the edit FIELD is no longer hidden here - the grid
   picks to edit (SR's own rvBar stays over its grid with the selection row),
   so the bar floats above the grid overlay (z 14) with only its quick-tool
   chip row (Markup/Remove BG/Upscale/Comment - single-picture tools) hidden,
   the same way SR forces the grid into plain Edit mode. */
body.dt-rf-rail-grid-on[data-nav-wip] :is(.dt-rs-tools:not(.dt-rf-grid-tools), .dt-rs-keys, #fullscreenBtn) {
    display: none !important;
}
body.dt-rf-rail-grid-on[data-nav-wip] .dt-rf-bar { z-index: 16; }
body.dt-rf-rail-grid-on[data-nav-wip] .dt-rf-bar .dt-rf-chips { display: none !important; }
/* the grid scrolls clear of the open field (same idea as SR's own padding-bottom) */
body.dt-rf-rail-grid-on[data-nav-wip] .wr-lists-box:has(.dt-rf-bar.is-open) .dt-rf-rail-grid { padding-bottom: 180px; }

/* ── Assets tab: roomflow-asset-wip.js's own <aside class="dt-rf-side"> is
   reparented (window.dtRfAssets.mount) into .dt-rf-rail-assets above, so it
   must give up its own absolute right-edge positioning and just fill this
   slot; its own dt-rf-as-open padding-right/left-shift reservation on
   .wr-lists.result / .dt-rs-tools / .dt-rf-bar is kept as-is (see
   roomflow-asset-wip.css) since it already matches this rail's own open
   width (296px / 148px) exactly. ── */
body[data-nav-wip] .dt-rf-rail .dt-rf-side {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    border-left: 0;
    background: transparent;
    box-shadow: none;
}
body.dark-mode[data-nav-wip] .dt-rf-rail .dt-rf-side { background: transparent; }

@media (max-width: 768px) {
    body[data-nav-wip] .dt-rf-rail { display: none !important; }   /* narrow viewports: no room for a side rail (same breakpoint tsPlace/other WIP rules already treat as "mobile") */
    body.dt-rf-rail-on[data-nav-wip] .wr-lists.result,
    body.dt-rf-rail-open[data-nav-wip] .wr-lists.result { padding-right: 19.2px !important; }
}

/* inside the rail the Assets tab already names the panel and the rail has its
   own collapse key: drop the panel's own title and close; keep Clear */
body[data-nav-wip] .dt-rf-rail .dt-rf-side .dt-rf-side-title,
body[data-nav-wip] .dt-rf-rail .dt-rf-side .dt-rf-side-close {
    display: none !important;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-side .dt-rf-side-head {
    grid-area: 1 / 2;
    align-self: start;
    padding: 4px 12px 12px 8px;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-hint {
    grid-area: 1 / 1;
    align-self: center;
    padding: 4px 0 12px 14px;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-side-clear {
    background: transparent;
    color: #6b7280;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-side-clear:hover { background: #e7e9ed; color: #111827; }
body.dark-mode[data-nav-wip] .dt-rf-rail .dt-rf-side-clear { color: #a1a1aa; }
body.dark-mode[data-nav-wip] .dt-rf-rail .dt-rf-side-clear:hover { background: #34343a; color: #f5f5f6; }
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-cats {
    grid-column: 1 / -1;
    padding: 0 12px 16px;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-cat {
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
    align-items: start;
}
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-face {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05);
}
body.dark-mode[data-nav-wip] .dt-rf-rail .dt-rf-mat-face {
    background: #27272a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-item.is-ph .dt-rf-mat-face { background: transparent; box-shadow: none; }
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-item:hover .dt-rf-mat-face { box-shadow: inset 0 0 0 1px #2563eb; }
body[data-nav-wip] .dt-rf-rail .dt-rf-mat-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.4;
    min-height: 2.8em;
    max-height: 2.8em;
}
body[data-nav-wip] .dt-rf-rail button:focus-visible {
    outline: 2px solid #5673ff;
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    body[data-nav-wip] .dt-rf-rail,
    body[data-nav-wip] .dt-rf-rail .dt-rf-mat-cat,
    body[data-nav-wip] .dt-rf-rail .dt-rf-mat-face {
        transition: none;
    }
}