/* ============================================================================ Agentimus — admin UI Aesthetic: "technical broadsheet". Warm paper, dark ink masthead, editorial serif headings + monospace data. Scoped under #agentimus-app so nothing leaks into wp-admin. No external fonts (wordpress.org rule); system stacks. ========================================================================= */ /* Page-level: make our admin screen full-bleed. This file loads only on the Agentimus page, so these wp-admin overrides never touch other screens. Below 960px wp-admin's `.auto-fold/.folded #wpcontent` adds a 10px LEFT padding — a (0,2,0) selector that out-specifies a bare `#wpcontent`, so it left an uneven gap on the left of our full-bleed app. Match that specificity to zero it; leave margin-left alone so content still clears the folded admin menu when it's shown. */ #wpcontent, .auto-fold #wpcontent, .folded #wpcontent { padding-left: 0; } .wrap { margin: 0; } /* WP core gives #wpbody-content a 65px bottom padding. That space lives inside the sticky readiness rail's scroll box, so at the page bottom it is *also* exactly how far the rail's top tucks under the sticky header — footer gap and rail tuck are one dial. 16px keeps the footer off the content while barely clipping the gauge. */ #wpbody-content { padding-bottom: 16px; } /* A narrower-breakpoint core rule drops the admin footer's side padding to 20px, which pulls its text left of our content. Hold it at 40px so the footer lines up with the full-bleed app. */ #wpfooter { padding-left: 40px; padding-right: 40px; color: #a7a7a7; } /* Design tokens — defined globally rather than only on #agentimus-app. Custom properties are inert (they paint nothing until a property references them), so this leaks no visuals into wp-admin, but it DOES let UI we Teleport to (toasts, the reset modal) read the same tokens. Visual rules below stay scoped to .ar-* / #agentimus-app. */ :root { /* Type */ --ar-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --ar-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --ar-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Paper & ink */ --ar-paper: #f3f0e7; --ar-surface: #fffdf7; --ar-surface-2: #faf6ec; --ar-ink: #1b1913; --ar-ink-soft: #6c675a; --ar-ink-faint: #9a937f; --ar-line: #e4ddcb; --ar-line-strong: #d3cab2; /* Signal */ --ar-accent: #146b64; --ar-good: #2f7a4c; --ar-warn: #ad7b18; --ar-bad: #b93c2b; --ar-info: #2f5f9e; /* blue — for informational actions (distinct from teal/green) */ --ar-radius: 4px; /* Shared height for the nav bar and the page-head below it, so the two strips are always exactly the same height. Change here, both follow. */ --ar-bar-h: 72px; /* WP admin-bar height — the sticky header sits flush below it. 32px on desktop; 46px in the responsive-admin band; 0 once the bar stops being fixed (≤600px) and scrolls away. */ --ar-adminbar: 32px; } @media screen and (max-width: 782px) { :root { --ar-adminbar: 46px; } } @media screen and (max-width: 600px) { :root { --ar-adminbar: 0px; } } #agentimus-app { /* Full-bleed: wp-admin's content padding is neutralized below, so the app fills the admin body edge-to-edge with no left/right gap. Transparent so it sits on wp-admin's own background — no floating "document" panel. */ margin: 0 0 24px; container-type: inline-size; color: var(--ar-ink); font-family: var(--ar-sans); font-size: 14px; line-height: 1.5; background: transparent; } #agentimus-app * { box-sizing: border-box; } /* Breathing room when a tile or readiness link scrolls a target to the top. */ #agentimus-app [id^="ar-"] { scroll-margin-top: 16px; } #agentimus-app code { font-family: var(--ar-mono); font-size: 0.86em; } /* A jumped-to target (a readiness "fix" link, a rail rung, a dashboard tile) briefly rings so the eye lands on the exact control to change. */ @keyframes ar-jump-flash { from { box-shadow: 0 0 0 2px var(--ar-accent), 0 0 0 7px rgba(20, 107, 100, 0.16); } to { box-shadow: 0 0 0 2px rgba(20, 107, 100, 0), 0 0 0 7px rgba(20, 107, 100, 0); } } #agentimus-app .ar-jump-flash { animation: ar-jump-flash 1.5s ease-out forwards; } @media (prefers-reduced-motion: reduce) { #agentimus-app .ar-jump-flash { animation: none; box-shadow: 0 0 0 2px var(--ar-accent); } } /* Quiet privacy framing under the dashboard summary tiles. */ /* No own margins — the parent .ar-act grid's 22px gap spaces it equally above and below (grid gaps DON'T collapse with margins, they add, so any margin here desyncs the two). */ .ar-dash-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-faint); } /* ---- Header bar (brand · tabs · gauge in one slim row) ------------------ */ /* The nav bar + page-head travel together and STAY at the top on scroll — wrapped in one sticky block so a nav row that wraps on a narrow screen can never desync from the title strip below it. Flush below the WP admin bar; z-index keeps it over the scrolling content while staying under the modals/toasts (which teleport to at 100000+). */ .ar__sticky { position: sticky; top: var(--ar-adminbar); z-index: 40; transition: box-shadow 0.24s ease; } /* Once the page is scrolled, the pinned header lifts above the content with a soft shadow (the pagehead's hairline stays as the crisp edge) so the two never merge. The .is-stuck class is toggled from App.vue on scroll. */ .ar__sticky.is-stuck { box-shadow: 0 8px 18px -12px rgba(38, 32, 24, 0.32), 0 2px 5px -3px rgba(38, 32, 24, 0.12); } @media (prefers-reduced-motion: reduce) { .ar__sticky { transition: none; } } .ar__bar { display: flex; align-items: stretch; gap: 26px; /* Match .ar__body's 34px so the brand mark and gauge line up with the content cards' left/right edges. */ padding: 0 34px; min-height: var(--ar-bar-h); background: var(--ar-surface); border-bottom: 1px solid var(--ar-line); } /* Brand — clickable, returns to the default (Settings) tab. */ .ar__brand { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; align-self: center; appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: opacity 0.15s; } .ar__brand:hover { opacity: 0.82; } .ar__brand:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 4px; border-radius: 6px; } .ar__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ar-ink); color: var(--ar-paper); /* Framed-icon look: a gap in the bar colour, then an offset accent ring, so the ring reads as a clean frame rather than a muddy edge. */ box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent), 0 1px 5px -1px rgba(27, 25, 19, 0.25); } /* Name + version stacked, both flush-left, within the 30px mark height. The wordmark sets the column width; the version line is justified (spread by letter-spacing) to fill that exact width — so line 2 matches line 1's width. */ .ar__brandtext { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; } /* SVG "AR" monogram — paper strokes with a gold accent on the A's crossbar. */ .ar__logo { width: 18px; height: auto; display: block; } .ar__logo-line { stroke: var(--ar-paper); stroke-width: 2.4; } .ar__logo-accent { stroke: var(--ar-warn); stroke-width: 2.2; } .ar__name { font-family: var(--ar-serif); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.01em; color: var(--ar-ink); } .ar__ver { /* Same gold as the readiness gauge / 6-of-11 figure. */ font-family: var(--ar-sans); font-size: 9px; line-height: 1; color: var(--ar-warn); text-align: justify; text-align-last: justify; text-justify: inter-character; -moz-text-align-last: justify; } /* Brand / nav separator — a small right-pointing arrow whose tip is a gold gem: two angled bars meet at a framed gold node that points toward the menu. The gold echoes the version line + logo crossbar, the ring echoes the logo's framed mark. Sets the masthead apart from the menu; no motion, no layout shift. */ .ar__sep { flex: 0 0 auto; align-self: center; display: inline-flex; /* The bar uses a uniform 26px gap; pull the arrow in toward the brand so it sits closer to the logo/wordmark, leaving the arrow → menu spacing untouched. */ margin-left: -10px; } .ar__sep svg { display: block; } .ar__sep-chev { stroke: var(--ar-line-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .ar__sep-ring { stroke: rgba(173, 123, 24, 0.45); stroke-width: 1; } .ar__sep-node { fill: var(--ar-warn); filter: drop-shadow(0 0 2px rgba(173, 123, 24, 0.45)); } /* Tabs — inline in the bar, active item underlined at the bar's base. The strip takes the space left of the brand and scrolls horizontally when it can't fit, so no tab is ever clipped on narrow screens. */ .ar__tabs { /* `0 1 auto`, not `1 1 auto`: the nav no longer absorbs the bar's free space, so the More menu can sit immediately after Discovery instead of being pushed to the far right. .ar__review takes the slack with margin-left:auto. */ flex: 0 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ar__tabs::-webkit-scrollbar { display: none; } .ar__tab { appearance: none; background: none; border: 0; cursor: pointer; flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; padding: 0 2px; font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s; } .ar__tab:hover { color: var(--ar-ink-soft); } .ar__tab.is-active { color: var(--ar-ink); border-bottom-color: var(--ar-accent); } /* ---- Nav "Activity to review" badge + dropdown ------------------------- */ .ar__review { flex: 0 0 auto; align-self: center; position: relative; margin-left: auto; } .ar__review-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface); color: var(--ar-ink-soft); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .ar__review-btn:hover, .ar__review.is-open .ar__review-btn { color: var(--ar-ink); border-color: var(--ar-ink-faint); background: var(--ar-surface-2); } /* Resting state — logging on, nothing flagged: a calm anchor with a softer border and no red count, so a populated queue (red badge) is what draws the eye. */ .ar__review.is-quiet .ar__review-btn { border-color: var(--ar-line); } .ar__review-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar__review-count { font-family: var(--ar-mono); font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-bad); color: var(--ar-paper); } .ar__review-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 400px; max-width: calc(100cqw - 32px); max-height: 72vh; overflow-y: auto; background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); box-shadow: 0 14px 36px -12px rgba(27, 25, 19, 0.45); padding: 16px 18px; } .ar__review-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ar__review-title { font-family: var(--ar-serif); font-size: 16px; font-weight: 600; color: var(--ar-ink); } .ar__review-lead { margin: 6px 0 12px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); } .ar__review-empty { margin: 6px 0; font-size: 13px; color: var(--ar-ink-soft); } /* Dropdown rows always stack (container queries key off the app width, not the popover). */ .ar__review-pop .ar-susp-row { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 0; } .ar__review-pop .ar-susp-row:first-child { padding-top: 6px; } .ar__review-pop .ar-susp-row__action { justify-self: start; text-align: left; max-width: none; } /* Hairline between the descriptive header and the actionable list (only when there are rows). */ .ar__review-list { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--ar-line); } /* Live-updates toggle (opt-in polling) — sits top-right of the dropdown head. */ .ar__review-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .ar__live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 999px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface); font: inherit; font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ar-ink-soft); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .ar__live:hover { border-color: var(--ar-ink-soft); color: var(--ar-ink); } .ar__live-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; } .ar__live.is-on { border-color: rgba(47, 122, 76, 0.45); color: var(--ar-good); background: rgba(47, 122, 76, 0.08); } .ar__live.is-on .ar__live-dot { border-color: var(--ar-good); background: var(--ar-good); } /* ---- Page header (per-tab title + intro, below the nav bar) ------------- */ .ar__pagehead { /* Locked to the nav bar's exact height (shared token) and the content is vertically centred — so the title/intro never make this strip taller or shorter than the nav above it, whatever the per-tab text. */ height: var(--ar-bar-h); display: flex; flex-direction: column; justify-content: center; padding: 0 34px; background: var(--ar-surface); border-bottom: 1px solid var(--ar-line); } /* #agentimus-app lifts specificity (1,1,0) above wp-admin's core .wrap h1 (0,1,1), which would otherwise force 23px / weight 400 / 5px padding onto our title and inflate the page header. padding:0 explicitly drops the .wrap h1 5px. */ #agentimus-app .ar__pagehead-title { margin: 0; padding: 0; font-family: var(--ar-serif); font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ar-ink); } .ar__pagehead-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ar-ink-soft); /* Keep to one line so the header height stays locked to the nav's 72px; truncates with an ellipsis only on very narrow viewports. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Readiness rail widget — gauge + stat, lives in the side panel on every tab. */ .ar-rail-readiness { display: flex; align-items: center; gap: 15px; } /* The gauge + tier block doubles as a quiet link to the full readiness report: button reset, no underline, just a faint brighten on hover. */ .ar-rail-readiness--link { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: filter 0.15s ease; } .ar-rail-readiness--link:hover { filter: brightness(1.08); } .ar-rail-readiness--link:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: 8px; } .ar-rail-gauge { position: relative; flex: 0 0 auto; width: 62px; height: 62px; } .ar-rail-gauge svg { width: 62px; height: 62px; transform: rotate(-90deg); } .ar-rail-gauge__track { fill: none; stroke: var(--ar-line); stroke-width: 7; } .ar-rail-gauge__fill { fill: none; stroke: var(--ar-accent); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .ar-rail-gauge__fill[data-tone="good"] { stroke: var(--ar-good); } .ar-rail-gauge__fill[data-tone="ok"] { stroke: var(--ar-warn); } .ar-rail-gauge__fill[data-tone="low"] { stroke: var(--ar-bad); } .ar-rail-gauge__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ar-mono); font-size: 15px; font-weight: 600; color: var(--ar-ink); } .ar-rail-gauge__num small { font-size: 9px; opacity: 0.55; } /* Tier badge beside the gauge: the one-word standing on the ladder. */ .ar-rail-tier { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ar-rail-tier__name { font-family: var(--ar-serif); font-size: 19px; font-weight: 600; line-height: 1.05; color: rgba(243, 240, 231, 0.92); } .ar-rail-tier[data-state="top"] .ar-rail-tier__name { color: #5cc08a; } .ar-rail-tier[data-state="floor"] .ar-rail-tier__name { color: #e08a72; } .ar-rail-tier__sub { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 240, 231, 0.45); } /* The three-rung strip under the gauge: name + tally, with a state dot. Each row is a quiet link that jumps to that rung's group in the Readiness tab — no underline, just a subtle brighten on hover (it stays a stat panel, not a menu). */ .ar-rungs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; } .ar-rung { font-family: var(--ar-mono); font-size: 12px; color: rgba(243, 240, 231, 0.4); } .ar-rung__btn { display: flex; align-items: center; gap: 9px; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: filter 0.15s ease; } .ar-rung__btn:hover { filter: brightness(1.18); } .ar-rung__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; } /* The Optimized rung has no tab to jump to (it's per-post), so it's a plain stat row. */ .ar-rung__btn--static { cursor: default; } .ar-rung__btn--static:hover { filter: none; } .ar-rung__tick { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; } .ar-rung__name { flex: 1; min-width: 0; } .ar-rung__count { font-size: 11px; opacity: 0.85; } .ar-rung[data-state="done"] { color: #5cc08a; } .ar-rung[data-state="done"] .ar-rung__tick { background: currentColor; } .ar-rung[data-state="current"] { color: #e0b24c; } .ar-rung[data-state="current"] .ar-rung__tick::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; } @media (prefers-reduced-motion: reduce) { .ar-rung__btn { transition: none; } } /* The next-step CTA: always a single centred line — clip with an ellipsis rather than wrap, since the check label that fills it varies in length. */ .ar-rail-next { display: block; width: 100%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Belt and braces with `.ar__rail > * { min-width: 0 }`: a button won't shrink past its own content unless told to, however roomy the box around it. */ min-width: 0; max-width: 100%; } /* A per-post content gap has no in-app page to jump to, so the next-step reads as a plain informational line (no arrow, no link) rather than a click that goes nowhere. */ .ar-rail-next--info { margin: 11px 0 0; font-family: var(--ar-mono); font-size: 12px; color: rgba(243, 240, 231, 0.5); } /* Dark variant of the Readiness rail card. Double class so it outranks the base .ar-rail-card background regardless of source order. */ .ar-rail-card.ar-rail-card--readiness { background: var(--ar-ink); border-color: var(--ar-ink); } .ar-rail-card--readiness .ar-rail-card__label { color: rgba(243, 240, 231, 0.5); } .ar-rail-card--readiness .ar-rail-gauge__track { stroke: rgba(243, 240, 231, 0.15); } .ar-rail-card--readiness .ar-rail-gauge__num { color: rgba(243, 240, 231, 0.62); } .ar-rail-card--readiness .ar-rail-allgood { color: #5cc08a; } /* Brightened gauge tones for contrast on the dark card. */ .ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="good"] { stroke: #5cc08a; } .ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="ok"] { stroke: #e0b24c; } .ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="low"] { stroke: #e08a72; } .ar-rail-card--readiness .ar-rail-link { color: #57b6a6; } .ar-rail-card--readiness .ar-rail-link:hover { color: #6fc7b8; } /* ---- Toast (teleported to , so no UI shift & viewport-fixed) ------- */ /* Self-contained: it lives outside #agentimus-app, so it can't rely on the CSS variables defined there — radius/font are hardcoded. */ /* Fixed top-right stack: toasts pile downward, newest at the bottom, each on its own dismiss timer. (top: 36px tucks into the nav-bar band below the wp-admin bar; right: 34px aligns with the content's right edge.) */ .ar-toasts { position: fixed; top: 36px; right: 34px; z-index: 100003; /* above the modal (100001), so a "copied"/"saved" toast is visible over an open dialog */ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; } .ar-toast { pointer-events: auto; display: flex; align-items: stretch; min-width: 268px; max-width: 400px; background: #fffefb; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 36px -10px rgba(27, 25, 19, 0.42), 0 0 0 1px rgba(27, 25, 19, 0.06); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; } .ar-toast__bar { flex: 0 0 4px; background: #9a937f; } .ar-toast__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 15px; min-width: 0; } .ar-toast__title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1b1913; } .ar-toast__msg { font-size: 13px; line-height: 1.4; color: #4a463d; } .ar-toast.is-success .ar-toast__bar { background: #2f9e5e; } .ar-toast.is-success .ar-toast__title { color: #1d7a45; } .ar-toast.is-error .ar-toast__bar { background: #c0392b; } .ar-toast.is-error .ar-toast__title { color: #a3271a; } .ar-toast.is-warning .ar-toast__bar { background: #d99a1c; } .ar-toast.is-warning .ar-toast__title { color: #936713; } .ar-toast.is-info .ar-toast__bar { background: #3a6ea5; } .ar-toast.is-info .ar-toast__title { color: #2c5680; } /* Slide in from the right (right-to-left), out to the right. The leaving toast is taken out of flow so the survivors slide up smoothly via the move transition. */ .ar-toast-enter-active { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ar-toast-leave-active { transition: opacity 0.25s ease, transform 0.3s ease; position: absolute; right: 0; } .ar-toast-move { transition: transform 0.3s ease; } .ar-toast-enter-from, .ar-toast-leave-to { opacity: 0; transform: translateX(calc(100% + 24px)); } @media (prefers-reduced-motion: reduce) { .ar-toast-enter-active, .ar-toast-leave-active, .ar-toast-move { transition: opacity 0.2s; } .ar-toast-enter-from, .ar-toast-leave-to { transform: none; } } /* ---- Body / cards ------------------------------------------------------- */ .ar__body { padding: 26px 34px; } .ar__body.is-railed { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 26px; align-items: start; } .ar__main { display: grid; gap: 22px; min-width: 0; } /* On wide screens the rail owns the endpoints list (the form's copy hides). */ .ar__body.is-railed .ar-card--endpoints { display: none; } /* ---- Right rail --------------------------------------------------------- */ /* Rail sticks BELOW the now-sticky header (admin bar + the two 72px strips). It's only sticky above 900px (it goes static below), where the header is always exactly 144px. */ /* The rail sticks below the sticky header and flows with the page (no internal scroll or scrollbar) — the main column is always taller, so the whole rail stays reachable as you scroll. */ .ar__rail { position: sticky; top: calc(var(--ar-adminbar) + 2 * var(--ar-bar-h)); display: grid; gap: 11px; align-content: start; padding-bottom: 6px; } /* A grid item's min-width defaults to `auto`, so it refuses to shrink below its content's min-content width — and a