/*
 * u19 — Newsroom + Docs Library + Design System viewer + Roadmap
 * (/panel/newsroom, /panel/documentation, /panel/design-system, /panel/roadmap)
 *
 * Page-scoped only. Everything below is namespaced under each page's root
 * wrapper class (.dl / .u19-ds / .rm) so it can never leak onto another
 * surface even though this file loads panel-wide. Newsroom needed no
 * page-scoped rules — its blade already uses the shared fi-eds-* bridge
 * classes as-is.
 */

/* ════════════════════════════════════════════════════════════════════
   Docs Library (.dl) — 3-column shell: nav / fi-eds-prose reading
   surface / "on this page" rail. Typography, badges, card chrome and
   the empty state all reuse shared fi-eds-* classes; only the shell
   layout and the nav rows are page-scoped here.
   ════════════════════════════════════════════════════════════════════ */
.dl { display: block; }
.dl__shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr) 13rem; gap: 32px; align-items: start; }
@media (max-width: 80rem) { .dl__shell { grid-template-columns: 15rem minmax(0, 1fr); } .dl__toc { display: none; } }
@media (max-width: 56rem) { .dl__shell { grid-template-columns: minmax(0, 1fr); } .dl__nav { position: static !important; } }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.dl__nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 24px; }
.dl__new { justify-content: center; }

.dl__section + .dl__section { margin-top: 4px; }
.dl__section-label { font: 600 13px var(--sans); letter-spacing: -.005em; color: var(--ink); padding: 0 8px 8px; }
.dl__group-label { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); padding: 12px 8px 4px; }
.dl__links { display: flex; flex-direction: column; gap: 2px; }
.dl__link {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 8px 8px; border-radius: 10px; font: 400 13px/1.35 var(--sans); color: var(--ink2);
    border: 1px solid transparent; background: transparent; cursor: pointer;
    transition: background 140ms var(--fi-eds-ease), color 140ms var(--fi-eds-ease);
}
.dl__link:hover { background: var(--cream2); color: var(--ink); }
.dl__link--active {
    background: var(--psoft); color: var(--purple7); font-weight: 600;
    border-color: color-mix(in srgb, var(--purple) 20%, transparent);
}
.dl__link-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl__pin { font-size: 11px; opacity: .7; }

.dl__note { font: 400 12.5px/1.5 var(--sans); color: var(--ink3); padding: 0 8px; }
.dl__note code { font: 500 11.5px ui-monospace, Menlo, Consolas, monospace; background: var(--cream2); color: var(--ink2); padding: 1px 5px; border-radius: 6px; }

.dl__archive {
    margin-top: 4px; align-self: flex-start; font: 500 12px var(--sans); color: var(--ink3);
    background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 10px;
    transition: background 140ms var(--fi-eds-ease), color 140ms var(--fi-eds-ease);
}
.dl__archive:hover { background: var(--cream2); color: var(--ink2); }

/* ── Content (nested inside .fi-eds-prose, so heading/link/code/table
   typography all come from the shared bridge — only the doc chrome
   above the rendered markdown is page-scoped) ──────────────────────── */
.dl__crumb { font: 500 12px var(--sans); color: var(--ink3); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.dl__crumb span { color: var(--lineS); }
.dl__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
.dl__head h1 { margin: 0 !important; }
.dl__head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.dl__meta { margin: 12px 0 0 !important; font: 500 12px var(--sans); color: var(--ink3); font-feature-settings: 'tnum' on; }
.dl__rule { border: 0; border-top: 1px solid var(--line); margin: 20px 0 24px !important; }
.dl__doc { max-width: none; }

/* ── On this page ────────────────────────────────────────────────── */
.dl__toc { position: sticky; top: 16px; }
.dl__toc-label { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.dl__toc a {
    display: block; font: 400 12.5px/1.4 var(--sans); color: var(--ink2); text-decoration: none;
    padding: 4px 0 4px 12px; border-left: 2px solid var(--line);
    transition: color 140ms var(--fi-eds-ease), border-color 140ms var(--fi-eds-ease);
}
.dl__toc a:hover { color: var(--purple7); border-left-color: var(--purple); }
.dl__toc a.lvl-3 { padding-left: 20px; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
    .dl__link, .dl__archive, .dl__toc a { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Design System viewer (.u19-ds) — chrome around the embedded Nuxt
   workbench iframe only; the iframe content itself is out of scope.
   ════════════════════════════════════════════════════════════════════ */
.u19-ds { display: flex; flex-direction: column; gap: 16px; }

.u19-ds__banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; background: var(--psoft);
    border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent);
    border-radius: 14px;
}
.u19-ds__banner-text { display: flex; align-items: flex-start; gap: 10px; }
.u19-ds__banner-text svg { width: 20px; height: 20px; color: var(--purple); flex: none; margin-top: 1px; }
.u19-ds__banner-copy { font: 400 13px/1.55 var(--sans); color: var(--ink2); max-width: 72ch; }
.u19-ds__banner-copy strong { color: var(--ink); font-weight: 600; }
.u19-ds__banner-copy code { font: 500 12px ui-monospace, Menlo, Consolas, monospace; background: var(--paper); border: 1px solid var(--line); color: var(--purple7); padding: 1px 6px; border-radius: 6px; }
.u19-ds__banner-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.u19-ds__copybtn {
    display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: var(--purple7);
    background: var(--paper); border: 1px solid color-mix(in srgb, var(--purple) 24%, transparent);
    border-radius: 10px; padding: 7px 13px; cursor: pointer;
    transition: background 150ms var(--fi-eds-ease), border-color 150ms var(--fi-eds-ease);
}
.u19-ds__copybtn:hover { background: var(--psoft); border-color: var(--purple); }
.u19-ds__copybtn svg, .u19-ds__openbtn svg { width: 14px; height: 14px; flex: none; }

.u19-ds__openbtn {
    display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px var(--sans); color: var(--paper);
    background: var(--ink); border: 1px solid var(--ink); border-radius: 10px; padding: 8px 15px; text-decoration: none;
    transition: background 150ms var(--fi-eds-ease);
}
.u19-ds__openbtn:hover { background: var(--ink2); }

.u19-ds__frame-wrap {
    position: relative; border: 1px solid var(--line); border-radius: 18px;
    overflow: hidden; background: var(--cream); box-shadow: var(--fi-eds-shadow);
}
.u19-ds__fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 28px; text-align: center; z-index: 0; }
.u19-ds__fallback-inner { max-width: 48ch; color: var(--ink3); font: 400 13px/1.6 var(--sans); }
.u19-ds__fallback-inner p { margin: 0 0 6px; font-weight: 600; color: var(--ink2); }
.u19-ds__fallback-inner code { font: 500 12px ui-monospace, Menlo, Consolas, monospace; background: var(--cream2); color: var(--ink2); padding: 1px 5px; border-radius: 6px; }
.u19-ds__frame { position: relative; z-index: 1; width: 100%; height: calc(100vh - 220px); min-height: 600px; border: 0; display: block; background: var(--cream); }

@media (prefers-reduced-motion: reduce) {
    .u19-ds__copybtn, .u19-ds__openbtn { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Roadmap (.rm) — status/milestone timeline. Colors are driven purely
   by [data-status] (mapped to the 3 sanctioned status pairs + purple
   for "active"/milestone); the accent hex the Page class computes from
   RoadmapItem::STATUSES is intentionally not read here so no non-token
   color reaches the page.
   ════════════════════════════════════════════════════════════════════ */
@property --u19-p { syntax: '<number>'; inherits: false; initial-value: 0; }

.rm { display: flex; flex-direction: column; gap: 24px; }
.rm [x-cloak] { display: none !important; }
.rm :focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 8px; }

/* ── Hero ────────────────────────────────────────────────────────── */
.rm__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.rm__eyebrow { font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--purple7); }
.rm__title { font: 430 clamp(24px, 3vw, 32px)/1.15 var(--ser); letter-spacing: -.01em; color: var(--ink); margin: 8px 0 0; }
.rm__sub { margin: 8px 0 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink3); }
.rm__sub b { color: var(--ink); font-weight: 600; }

.rm__hero-right { display: flex; align-items: center; gap: 16px; }
.rm__ring {
    --u19-p: 0; width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; position: relative;
    background: conic-gradient(var(--purple) calc(var(--u19-p) * 1%), var(--line) 0);
}
.rm__ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); }
.rm__ring span { position: relative; z-index: 1; font: 600 15px var(--sans); letter-spacing: -.01em; color: var(--ink); }
.rm__ring span small { font: 500 10px var(--sans); color: var(--ink3); }

/* ── Controls (filters · search · view) ─────────────────────────── */
.rm__controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.rm__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.rm__tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.rm__chip {
    display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px var(--sans); color: var(--ink2);
    background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 13px; cursor: pointer;
    transition: color 150ms var(--fi-eds-ease), border-color 150ms var(--fi-eds-ease), background 150ms var(--fi-eds-ease);
}
.rm__chip:hover { color: var(--ink); border-color: var(--lineS); }
.rm__chip.is-on { color: var(--purple7); background: var(--psoft); border-color: transparent; }
.rm__chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink3); }
.rm__chip em { font-style: normal; font-size: 11px; color: var(--ink3); }
.rm__chip[data-status="active"] i { background: var(--purple); }
.rm__chip[data-status="shipped"] i { background: var(--ok-ink); }
.rm__chip[data-status="planned"] i { background: var(--warn-ink); }
.rm__chip[data-status="blocked"] i { background: var(--err-ink); }

.rm__search { position: relative; display: flex; align-items: center; }
.rm__search svg { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--ink3); pointer-events: none; }
.rm__search input {
    width: 13rem; max-width: 46vw; font: 400 13px var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--line);
    border-radius: 10px; padding: 8px 12px 8px 30px; min-height: 38px;
    transition: border-color 150ms var(--fi-eds-ease), box-shadow 150ms var(--fi-eds-ease);
}
.rm__search input::placeholder { color: var(--ink3); }
.rm__search input:focus { outline: none; border-color: var(--purple); box-shadow: var(--eds-focus-ring); }

/* Sub-16px text inputs make iOS Safari zoom on focus — bump on touch widths
   (same treatment as .ans in eds-panel.css and .ctrl-search__input in u12). */
@media (max-width: 640px) {
    .rm__search input { font-size: 16px; }
}
.rm__search-clear {
    position: absolute; right: 6px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    color: var(--ink3); background: var(--cream2); border: 0; font-size: 12px; line-height: 1;
}
.rm__search-clear:hover { color: var(--ink); }

.rm__seg { display: inline-flex; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.rm__seg button {
    font: 500 12.5px var(--sans); color: var(--ink2); background: transparent; border: 0; border-radius: 6px; padding: 6px 13px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; transition: color 150ms var(--fi-eds-ease), background 150ms var(--fi-eds-ease);
}
.rm__seg button:hover { color: var(--ink); }
.rm__seg button.is-on { color: var(--purple7); background: var(--paper); box-shadow: var(--fi-eds-shadow); }
.rm__seg svg { width: 13px; height: 13px; }

/* ── Timeline ────────────────────────────────────────────────────── */
.rm__timeline { position: relative; padding: 8px 0 16px; }
.rm__spine { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); border-radius: 2px; background: var(--line); }

.rm__group { position: relative; margin: 0 0 4px; }
.rm__group-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 28px 0 24px; }
.rm__group-head:first-child { margin-top: 4px; }
.rm__group-pill {
    display: inline-flex; align-items: center; gap: 8px; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 6px 14px; box-shadow: var(--fi-eds-shadow);
}
.rm__group-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink3); }
.rm__group-pill em { font-style: normal; color: var(--ink3); font-weight: 500; letter-spacing: 0; }
.rm__group[data-status="active"] .rm__group-pill i { background: var(--purple); }
.rm__group[data-status="shipped"] .rm__group-pill i { background: var(--ok-ink); }
.rm__group[data-status="planned"] .rm__group-pill i { background: var(--warn-ink); }
.rm__group[data-status="blocked"] .rm__group-pill i { background: var(--err-ink); }
.rm__now {
    position: relative; font: 600 11px var(--sans); letter-spacing: .08em; color: var(--purple7); display: flex; align-items: center; gap: 6px;
}
.rm__now::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); }
@media (prefers-reduced-motion: no-preference) {
    .rm__now::before {
        content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px;
        border-radius: 50%; background: var(--purple); animation: u19-ping 1.8s var(--fi-eds-ease) infinite;
    }
}
@keyframes u19-ping { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.6); opacity: 0; } }

.rm__lane { position: relative; }

/* node */
.rm__node { position: relative; width: 50%; padding: 0 24px 16px 0; }
.rm__node--right { margin-left: 50%; padding: 0 0 16px 24px; }
.rm__dot {
    position: absolute; top: 22px; width: 14px; height: 14px; border-radius: 50%; z-index: 2;
    background: var(--paper); border: 2px solid var(--lineS); box-shadow: 0 0 0 4px var(--cream);
}
.rm__node--left .rm__dot { right: -7px; }
.rm__node--right .rm__dot { left: -7px; }
.rm [data-status="active"] .rm__dot { background: var(--purple); border-color: var(--purple); }
.rm [data-status="shipped"] .rm__dot { background: var(--ok-ink); border-color: var(--ok-ink); }
.rm [data-status="planned"] .rm__dot { background: var(--paper); border-color: var(--warn-ink); }
.rm [data-status="blocked"] .rm__dot { background: var(--paper); border-color: var(--err-ink); }
.rm__node[data-status="active"] .rm__dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--purple); opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
    .rm__node[data-status="active"] .rm__dot::after { animation: u19-beat 1.8s var(--fi-eds-ease) infinite; }
}
@keyframes u19-beat {
    0% { transform: scale(.75); opacity: .55; }
    100% { transform: scale(1.7); opacity: 0; }
}

/* card */
.rm__card {
    position: relative; border-radius: 18px; padding: 16px 18px;
    background: var(--paper); border: 1px solid var(--line); box-shadow: var(--fi-eds-shadow);
    transition: transform 160ms var(--fi-eds-ease), border-color 160ms var(--fi-eds-ease), box-shadow 160ms var(--fi-eds-ease);
}
.rm__card:hover { transform: translateY(-2px); border-color: var(--lineS); box-shadow: var(--fi-eds-shadow-h); }
.rm__node--left .rm__card::after { content: ''; position: absolute; top: 22px; right: -7px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--paper); border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
.rm__node--right .rm__card::after { content: ''; position: absolute; top: 22px; left: -7px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--paper); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.rm__card-top { display: flex; align-items: flex-start; gap: 10px; }
.rm__icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--cream2); border: 1px solid var(--line); }
.rm__card-h { flex: 1 1 auto; min-width: 0; }
.rm__title-btn {
    display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 0;
    font: 600 14px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink); transition: color 150ms var(--fi-eds-ease);
}
.rm__title-btn:hover { color: var(--purple7); }
.rm__star { color: var(--warn-ink); font-size: 12px; }
.rm__badge { flex: 0 0 auto; font: 600 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; background: var(--cream2); color: var(--ink3); }
.rm [data-status="active"] .rm__badge { background: var(--psoft); color: var(--purple7); }
.rm [data-status="shipped"] .rm__badge { background: var(--ok-surface); color: var(--ok-ink); }
.rm [data-status="planned"] .rm__badge { background: var(--warn-surface); color: var(--warn-ink); }
.rm [data-status="blocked"] .rm__badge { background: var(--err-surface); color: var(--err-ink); }
.rm__summary { margin: 10px 0 0; font: 400 12.5px/1.55 var(--sans); color: var(--ink2); }

.rm__bar { margin-top: 12px; height: 6px; border-radius: 6px; background: var(--cream2); overflow: hidden; }
.rm__bar-fill {
    height: 100%; width: 100%; border-radius: 6px; background: var(--purple);
    transform-origin: left center; transform: scaleX(calc(var(--u19-p) / 100));
}
@media (prefers-reduced-motion: no-preference) { .rm__bar-fill { animation: u19-grow 1s var(--fi-eds-ease) both; } }
@keyframes u19-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(calc(var(--u19-p) / 100)); }
}
.rm__bar-label { margin-top: 6px; font: 500 11px var(--sans); color: var(--ink3); }

.rm__meta { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rm__tag { display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; font: 500 11px var(--sans); color: var(--ink2); background: var(--cream2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; }
.rm__tag svg { width: 11px; height: 11px; opacity: .7; }
.rm__when { margin-left: auto; font: 500 11px var(--sans); color: var(--ink3); }

.rm__acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; opacity: 0; transition: opacity 160ms var(--fi-eds-ease); }
.rm__card:hover .rm__acts, .rm__card:focus-within .rm__acts { opacity: 1; }
.rm__act {
    width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; font-size: 13px; line-height: 1;
    color: var(--ink3); background: var(--paper); border: 1px solid var(--line); transition: color 150ms var(--fi-eds-ease), border-color 150ms var(--fi-eds-ease), background 150ms var(--fi-eds-ease);
}
.rm__act:hover { color: var(--purple7); border-color: var(--purple); background: var(--psoft); }
.rm__act--danger:hover { color: var(--err-ink); border-color: var(--err-ink); background: var(--err-surface); }
.rm__grip { cursor: grab; display: none; touch-action: none; }
.rm.is-draggable .rm__grip { display: grid; }
.rm__grip:active { cursor: grabbing; }
.rm__node--ghost { opacity: .4; }
.rm__node--ghost .rm__card { border-style: dashed; }
.rm__node--chosen .rm__card { border-color: var(--purple); box-shadow: var(--eds-focus-ring); }

/* contextual add-to-lane */
.rm__lane-add-wrap { position: relative; width: 50%; padding: 0 24px 0 0; }
.rm__lane-add-wrap.is-right { margin-left: 50%; padding: 0 0 0 24px; }
.rm__lane-add {
    display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center; font: 500 12px var(--sans); color: var(--ink3);
    background: transparent; border: 1px dashed var(--lineS); border-radius: 12px; padding: 10px; cursor: pointer;
    transition: color 150ms var(--fi-eds-ease), border-color 150ms var(--fi-eds-ease), background 150ms var(--fi-eds-ease);
}
.rm__lane-add:hover { color: var(--purple7); border-color: var(--purple); background: var(--psoft); }


.rm__noresults { text-align: center; color: var(--ink3); font: 400 13px var(--sans); padding: 40px 16px; }

/* empty state */
.rm__empty { text-align: center; padding: 56px 24px; border: 1px dashed var(--lineS); border-radius: 18px; background: var(--cream2); }
.rm__empty h3 { font: 430 20px var(--ser); letter-spacing: -.01em; margin: 12px 0 6px; color: var(--ink); }
.rm__empty p { color: var(--ink3); font: 400 13.5px/1.5 var(--sans); max-width: 30rem; margin: 0 auto 20px; }
.rm__empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rm__empty-orb { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; background: var(--psoft); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) { .rm__empty-orb { animation: u19-bob 3.5s ease-in-out infinite; } }
@keyframes u19-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* responsive: single rail on the left */
@media (max-width: 60rem) {
    .rm__spine { left: 22px; }
    .rm__group-head { align-items: flex-start; padding-left: 46px; }
    .rm__node, .rm__node--right { width: 100%; margin-left: 0; padding: 0 0 16px 46px; }
    .rm__node--left .rm__dot, .rm__node--right .rm__dot { left: 14px; right: auto; }
    .rm__node--left .rm__card::after { left: -7px; right: auto; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .rm__lane-add-wrap, .rm__lane-add-wrap.is-right { width: 100%; margin-left: 0; padding: 0 0 0 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .rm__chip, .rm__search input, .rm__seg button, .rm__card, .rm__title-btn, .rm__acts, .rm__act, .rm__lane-add,
    .rm__ring, .rm__bar-fill, .rm__node, .rm__now::before, .rm__dot::after { animation: none; transition: none; }
}