/* The site shell (PLAN-site-shell §4, §6, §8; C6). Loaded only by shell.html,
   from layout.html's frame_head, so every rule here applies to shell pages
   alone and the :root tokens below override site.css's legacy values only
   there.

   Geometry. The rail and the top bar are position: fixed, like the legacy
   navbar they replace, and are sized by the two chrome tokens themselves:
   --rail-w is the rail's width and the workspace's left margin; --chrome-top
   is the line page content clears below the top bar. So everything that
   already reads the tokens (sticky tools, anchor margins, the flash bar,
   the consent banner, the text-tool toast; C4) follows the shell with no
   further change. The document stays the scroller.

   The rail on desktop is the viewer's (B.4, RULING-site-shell-GO N1): where
   the full rail's query holds (1024px and 64rem), every page shows the 15.5rem
   rail, or the 4rem icon rail once the viewer collapses it, whatever the page's
   density. Below the query the density (§6, per page via data-density on
   .shell-frame) still decides:
     full    — the 4rem icon rail at 896–1023, and below 64rem at a large
               text size
     drawer  — no rail; ☰ opens it in a <dialog>
   (A third density, compact, retired in C12h: RULING-site-shell-12h-open.)
   Below 896px every page uses the drawer. The rail switches between its
   full and icon looks with a container query on its own width, so one set
   of rules serves every combination.

   D5b (RULING-site-shell-5 §5; RULING-site-shell-12d): data-align="centre"
   centres the page's column in the workspace; "rail" starts it a fixed
   gutter from the rail. */

:root {
    --shell-rail-full: 15.5rem;
    --shell-rail-icon: 4rem;
    --shell-top-h: 3.5rem;
    --shell-gutter: 2rem;
    --shell-surface: #ffffff;
    --shell-surface-soft: #f8f4f8;
    /* The page's own item: a step darker than hover (Mooie, R3); both are plum tints since
       RULING-site-shell-rebrand-0 Q7, as visible against white as the blue they replace. */
    --shell-surface-mark: #ebe0eb;
    --shell-ink: #1a1a1a;
    --shell-ink-muted: #606060;
    --shell-ink-faint: #736f68;
    --shell-border: #e4e4e4;
    --shell-accent: #72226d;
    --z-chrome: 40;
    --z-rail-open: 41;
    --rail-w: 0px;
    --chrome-top: calc(var(--shell-top-h) + 1rem);
}

@media (min-width: 896px) {
    :root:has(.shell-frame[data-density="full"]) {
        --rail-w: var(--shell-rail-icon);
    }
}

/* The full rail needs 1024px and 64rem: at the default text size both are
   1024px, and at a large browser text size (the rail's 15.5rem grows with
   it, 496px at 200%) the page keeps the icon rail until the window is 64rem
   wide, so with JavaScript a 1024 screen does not give half its width to the
   rail (RULING-10 Q11, RULING-site-shell-11-0). shell.js's `wide` asks the
   same question. Not covered: without JavaScript the rail is the full one
   from 896px at every text size (below), and a root size set by a user
   stylesheet does not move a rem media query.

   Inside the query nothing reads the page's density: the rail is open or
   collapsed as the viewer left it, on every page, a drawer page's included
   (B.4, RULING-site-shell-GO N1). With JavaScript only: it reads the stored
   choice, and without it a drawer page keeps its rail in the page (below). */
@media (min-width: 1024px) and (min-width: 64rem) {
    :root.shell-js:has(.shell-frame) {
        --rail-w: var(--shell-rail-full);
    }

    :root.shell-js[data-shell-rail="collapsed"]:has(.shell-frame) {
        --rail-w: var(--shell-rail-icon);
    }

    /* :where() keeps this under the spread rail's own width and layer above. */
    :where(html.shell-js) .shell-frame > .shell-rail {
        display: flex;
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: var(--rail-w);
        z-index: var(--z-chrome);
    }

    /* The rail carries the brand and Search here, so the top bar's go. */
    html.shell-js .shell-frame .shell-top-brand,
    html.shell-js .shell-frame .shell-top-search {
        display: none;
    }
}

/* ── The frame ─────────────────────────────────────────────────────────── */

.shell-frame {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.shell-skip {
    position: fixed;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: calc(var(--z-chrome) + 2);
    padding: 0.5rem 0.875rem;
    background: var(--shell-ink);
    color: #fff;
    font-size: 0.875rem;
    border-radius: 6px;
    transform: translateY(-200%);
}

.shell-skip:focus {
    transform: none;
}

/* ── The rail ──────────────────────────────────────────────────────────── */

.shell-rail {
    display: none;
    container: shell-rail / inline-size;
    flex-direction: column;
    /* Tight rhythm on purpose: brand, search, three pins, nine group labels,
       the open section and the foot fit 1280x800 without the rail
       scrolling (PLAN §6 height budget; measured in REVIEW-site-shell-6). */
    gap: 0.125rem;
    padding: 0.75rem 0.625rem;
    background: var(--shell-surface);
    border-inline-end: 1px solid var(--shell-border);
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--shell-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@media (min-width: 896px) {
    .shell-frame:not([data-density="drawer"]) > .shell-rail {
        display: flex;
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: var(--rail-w);
        z-index: var(--z-chrome);
    }

    /* A section opened on the icon rail spreads over the page, never
       reflowing it (§6). shell.js sets and clears the flag. */
    .shell-frame > .shell-rail[data-expanded] {
        inline-size: var(--shell-rail-full);
        z-index: var(--z-rail-open);
        box-shadow: 0 0.75rem 2rem rgba(12, 12, 16, 0.14);
    }
}

/* The spread rail's scrim (RULING-site-shell-9 Q5): invisible, over the page
   and the top bar and under the rail (the same layer, earlier in the frame),
   so the press that folds the rail lands here, never on the page. shell.js
   shows it only while a section is spread. */
.shell-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-rail-open);
}

/* Without JavaScript there is no drawer, so where the rail would live in
   one (phones, drawer pages) it stays in the page, above the workspace. */
@media (max-width: 895px) {
    html:not(.shell-js) .shell-frame > .shell-rail {
        display: flex;
        padding-block-start: calc(var(--shell-top-h) + 0.75rem);
    }
}

html:not(.shell-js) .shell-frame[data-density="drawer"] > .shell-rail {
    display: flex;
    padding-block-start: calc(var(--shell-top-h) + 0.75rem);
}

/* Without JavaScript nothing can spread the icon rail, so wherever a rail
   shows it is the full one, and the search buttons (JS-only) go. */
@media (min-width: 896px) {
    html:not(.shell-js):has(.shell-frame:not([data-density="drawer"])) {
        --rail-w: var(--shell-rail-full);
    }
}

html:not(.shell-js) [data-shell-search] {
    display: none;
}

/* A browser without :has() never gets the :root token above, so the frame
   carries it itself: the rail, the workspace and the top bar all read it
   from inside the frame. (The consent banner, outside it, keeps 0.) */
@supports not selector(:has(a)) {
    @media (min-width: 896px) {
        .shell-frame:not([data-density="drawer"]) {
            --rail-w: var(--shell-rail-icon);
        }

        html:not(.shell-js) .shell-frame:not([data-density="drawer"]) {
            --rail-w: var(--shell-rail-full);
        }
    }

    @media (min-width: 1024px) and (min-width: 64rem) {
        html.shell-js .shell-frame {
            --rail-w: var(--shell-rail-full);
        }

        html.shell-js[data-shell-rail="collapsed"] .shell-frame {
            --rail-w: var(--shell-rail-icon);
        }
    }
}

.shell-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    text-decoration: none;
}

/* The name beside the mark, set in the site's font (RULING-site-shell-rebrand-0). */
.shell-brand-word {
    color: var(--shell-accent);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.shell-brand-mark {
    flex: none;
    block-size: 1.75rem;
    inline-size: auto;
}

.shell-search,
.shell-summary,
.shell-link,
.shell-foot-link,
.shell-collapse {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    min-block-size: 1.75rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.shell-search {
    margin-block: 0.125rem 0.375rem;
    border: 1px solid var(--shell-border);
    color: var(--shell-ink-muted);
}

.shell-kbd {
    margin-inline-start: auto;
    padding: 0 0.3125rem;
    border: 1px solid var(--shell-border);
    border-radius: 4px;
    font: 0.75rem var(--base-fonts);
}

/* A keyboard shortcut means nothing on a touch screen. */
@media (hover: none) {
    .shell-kbd {
        display: none;
    }
}

.shell-summary {
    list-style: none;
    font-weight: 600;
}

.shell-summary::-webkit-details-marker {
    display: none;
}

.shell-summary svg,
.shell-foot-link svg,
.shell-search svg,
.shell-collapse svg {
    flex: none;
    color: var(--shell-ink-muted);
}

.shell-list {
    display: grid;
    gap: 1px;
    margin: 0 0 0.25rem;
    padding: 0;
    list-style: none;
}

.shell-link {
    min-block-size: 1.625rem;
    padding-inline-start: 2.25rem;
    color: var(--shell-ink-muted);
}

.shell-link--overview {
    font-size: 0.8125rem;
}

.shell-search:hover,
.shell-summary:hover,
.shell-link:hover,
.shell-foot-link:hover,
.shell-collapse:hover {
    background: var(--shell-surface-soft);
    color: var(--shell-ink);
}

/* The brand is marked current on /tools for screen readers (and guard 4),
   but draws no pill: the wordmark stands on its own (RULING-site-shell-6). */
.shell-link[aria-current="page"],
.shell-link[aria-current="location"],
.shell-foot-link[aria-current="page"],
.shell-foot-link[aria-current="location"] {
    background: var(--shell-surface-mark);
    color: var(--shell-ink);
}

/* The dashboard's section being read (tools_dashboard_shell.js), shown on
   the group's summary so it reads in the icon rail and with the group shut. */
.shell-section[data-spy-current] > .shell-summary {
    color: var(--shell-accent);
}

.shell-lock {
    display: inline-flex;
    margin-inline-start: auto;
    color: var(--shell-ink-faint);
}

.shell-group-label {
    margin: 0.25rem 0 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shell-ink-faint);
}

/* One row: the identity links, then the collapse control as an icon (its
   words are its aria-label). A signed-out foot may wrap; it has no Pinned or
   Admin group above it, so it still fits. */
.shell-rail-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.25rem;
    margin-block-start: auto;
    padding-block-start: 0.375rem;
    border-block-start: 1px solid var(--shell-border);
}

.shell-rail-foot .shell-foot-link,
.shell-rail-foot .shell-collapse {
    inline-size: auto;
    gap: 0.375rem;
    padding-inline: 0.375rem;
}

.shell-rail-foot .shell-collapse {
    margin-inline-start: auto;
}

/* The icon look: any rail narrower than a label needs (a collapsed rail, or
   896–1023px and below 64rem at a large text size). Labels hide, open lists hide unless
   the rail has been expanded over the page. */
@container shell-rail (max-width: 6rem) {
    .shell-link,
    .shell-group-label,
    .shell-brand-word,
    .shell-kbd {
        display: none;
    }

    /* Hidden from sight only: a label is its control's accessible name, and
       every icon is aria-hidden (display: none would leave the toggles,
       Search and the foot links nameless). Each also carries a title. */
    .shell-label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .shell-brand,
    .shell-search,
    .shell-summary,
    .shell-foot-link,
    .shell-collapse {
        justify-content: center;
        padding-inline: 0;
    }

    .shell-search {
        border-color: transparent;
    }

    .shell-rail-foot {
        flex-direction: column;
        align-items: stretch;
    }

    /* Its links are hidden here, so the group holding the page's item says
       so (the Admin group included; RULING-site-shell-6 Q7). */
    .shell-section:has(.shell-link[aria-current]) > .shell-summary {
        background: var(--shell-surface-mark);
    }

    .shell-rail-foot .shell-collapse {
        margin-inline-start: 0;
    }
}

/* ── The top bar ───────────────────────────────────────────────────────── */

.shell-top {
    position: fixed;
    inset-block-start: 0;
    inset-inline: var(--rail-w) 0;
    z-index: var(--z-chrome);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    block-size: var(--shell-top-h);
    padding-inline: var(--shell-gutter);
    background: rgba(255, 255, 255, 0.94);
    border-block-end: 1px solid var(--shell-border);
    font-size: 0.875rem;
    color: var(--shell-ink-muted);
}

.shell-menu,
.shell-top-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--shell-ink);
    cursor: pointer;
}

.shell-top-brand {
    display: inline-flex;
}

.shell-top-brand img {
    block-size: 1.75rem;
    inline-size: auto;
}

/* The trail gives way, never the controls: it shrinks (min-inline-size: 0),
   the current page's name ends in an ellipsis, and on phones only that name
   shows. ☰, the brand and search keep their size. */
.shell-crumbs {
    flex: 0 1 auto;
    min-inline-size: 0;
}

.shell-crumbs ol {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
}

.shell-crumbs li {
    flex: none;
}

.shell-crumbs li:last-child {
    flex: 0 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shell-menu,
.shell-top-brand,
.shell-top-search {
    flex: none;
}

@media (max-width: 639px) {
    .shell-crumbs li:not(:last-child) {
        display: none;
    }

    .shell-crumbs li + li::before {
        content: none;
    }
}

.shell-crumbs li + li::before {
    content: "/";
    margin-inline-end: 0.375rem;
    color: var(--shell-ink-faint);
}

.shell-crumbs a {
    color: inherit;
}

.shell-crumbs [aria-current="page"] {
    color: var(--shell-ink);
    font-weight: 600;
}

.shell-top-spacer {
    flex: 1;
}

/* Phones and drawer pages: the brand and search live in the top bar. */
@media (min-width: 896px) {
    .shell-frame:not([data-density="drawer"]) .shell-top-brand,
    .shell-frame:not([data-density="drawer"]) .shell-top-search {
        display: none;
    }
}

/* ── The workspace ─────────────────────────────────────────────────────── */

.shell-workspace {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    margin-inline-start: var(--rail-w);
    min-width: 0;
}

/* The page's <main>. Not `body > main`, so site.css's 96px for the voter
   pages never applies; and no stacking context (site.css gives main z-index 2), so the
   flash bar, page modals and overlays can rise above the chrome. */
.shell-main {
    flex: 1;
    z-index: auto;
    padding-block: var(--shell-top-h) 0;
    padding-inline: var(--shell-gutter);
    min-width: 0;
}

.shell-main:focus {
    outline: none;
}

/* A page wrapper that brings its own gutter or top padding reads these,
   with its legacy value as the fallback:
       padding: var(--page-top, 48px) var(--page-gutter, 24px) 80px;
   and a wrapper that builds its gutter into its width:
       width: min(100% - (2 * var(--page-gutter, var(--space-lg))), 62rem);
   In the shell the gutter is .shell-main's alone (D5b) and the top collapses
   to the tiers' below; outside the shell nothing defines them, so a plain
   or voter page keeps its own numbers. 0px, not 0: a unitless zero is invalid in
   calc() arithmetic with a length.
   --page-anchor is the same idea for an anchor target's offset:
       scroll-margin-top: var(--page-anchor, var(--chrome-top));
   The shell clears its top bar once, with the root's scroll-padding below,
   so a page's own margin would double it (RULING-site-shell-8 Q5). */
.shell-main {
    --page-gutter: 0px;
    --page-top: var(--space-xl);
    --page-anchor: 0px;
}

/* Anything scrolled to (a focused field, an anchor, scrollIntoView) lands
   below the fixed top bar, not under it. The shell's own sheet, so no other
   frame takes it. */
html {
    scroll-padding-block-start: var(--chrome-top);
}

/* A section spread over the page (the icon look, 896px up) steps the fixed
   overlays aside while it is open, as the legacy phone menu did until C13b: the flash
   bar (z 1000) covered the spread rail's first rows up to about 1006px, and
   the consent banner (z 50) its foot up to about 1160px on an icon-rail page
   (RULING-site-shell-8 Q5). */
@media (min-width: 896px) {
    :root:has(.shell-rail[data-expanded]) :is(.flash-bar, .consent) {
        visibility: hidden;
    }
}

/* The content tiers keep their widths; their 112px top padding, page
   rhythm from before the shell (PLAN §7), collapses to the shell's. */
.shell-main > :is(.content-narrow, .content-sm, .content-md, .content-wide, .content-xwide, .content-full) {
    padding-block-start: var(--space-xl);
}

/* The shell owns the gutter (.shell-main's padding), so a tier's own side
   padding goes, on both sides at every width, as a page's own wrapper's does
   through --page-gutter (RULING-site-shell-12d). */
.shell-main > :is(.content-narrow, .content-sm, .content-md, .content-wide, .content-xwide, .content-full) {
    padding-inline: 0;
}

/* D5b's other value: "rail" starts the column a fixed gutter from the rail
   instead of centring it (RULING-site-shell-5 §5). */
.shell-frame[data-align="rail"] .shell-main > * {
    margin-inline-start: 0;
}

/* With no rail on screen the gutter is the page's edge, not a distance from
   the rail: both sides take the legacy tiers' 24px, so a phone column is
   symmetric instead of 32px on the left and 32 + 24px on the right. */
@media (max-width: 895px) {
    /* 24px, not 1.5rem (RULING-6 Q3's number): in rem it grew with the text
       size, 48px a side at 200% on a phone, and squeezed controls out of the
       column that a 24px gutter keeps (C10, RULING-9 Q6). */
    .shell-frame {
        --shell-gutter: 24px;
    }
}

/* A drawer page draws no rail below the full rail's query; from the query
   up it has the viewer's rail like any page (B.4, RULING-site-shell-12h).
   It keeps the no-rail gutter from 896px up all the same, 24px each side
   and no tier padding on the right, for its work column: the 2rem gutter
   plus the tier's 24px had left the blog draft's work column 40px narrower
   than legacy, and 72px narrower at 150% text (RULING-site-shell-11d Q2). */
.shell-frame[data-density="drawer"] {
    --shell-gutter: 24px;
}

.shell-foot {
    z-index: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-block-start: 0;
    padding: 1.5rem var(--shell-gutter);
    font-size: 0.8125rem;
    color: var(--shell-ink-faint);
}

.shell-foot a {
    color: inherit;
}

.shell-foot-copy {
    margin: 0;
}

/* A legal or contact page's own footer link, marked as a text link is: ink
   and an underline. The rail's soft background is invisible on the footer's
   ground (C12a measurement), so Mooie chose the underline (RULING-site-shell-12-0
   A2, §8; RULING-site-shell-6 Q2). */
.shell-foot a[aria-current] {
    color: var(--shell-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.shell-foot .consent-trigger {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ── The drawer and the palette ────────────────────────────────────────── */

.shell-drawer {
    inset-block: 0;
    inset-inline: 0 auto;
    margin: 0;
    inline-size: min(20rem, 88vw);
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    padding: 0;
    border: 0;
    background: var(--shell-surface);
}

.shell-drawer::backdrop,
.shell-palette::backdrop {
    background: rgba(12, 12, 16, 0.32);
}

/* The drawer is a column: the close button on its own row, the rail below
   it, the drawer's height and scrolling itself, so no row passes under the
   button (C7 review). */
.shell-drawer[open] {
    display: flex;
    flex-direction: column;
}

.shell-drawer-close {
    align-self: flex-end;
    margin: 0.5rem 0.5rem 0;
    display: inline-flex;
    padding: 0.375rem;
    border: 0;
    background: none;
    color: var(--shell-ink);
    cursor: pointer;
}

.shell-drawer-slot {
    flex: 1;
    min-block-size: 0;
}

/* The drawer's rail is the drawer's height and scrolls itself, so it can
   open at the current item (shell.js scrollRailToCurrent). */
.shell-drawer .shell-rail {
    display: flex;
    block-size: 100%;
    inline-size: 100%;
    border: 0;
}

.shell-palette {
    inset-block-start: 12vh;
    margin-block: 0;
    margin-inline: auto;
    inline-size: min(40rem, calc(100vw - 2rem));
    max-block-size: 70vh;
    padding: 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-surface);
    color: var(--shell-ink);
    font-size: 0.9375rem;
}

.shell-palette-input {
    inline-size: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--shell-border);
    border-radius: 6px;
    font: inherit;
}

.shell-palette-note {
    margin: 0.75rem 0.25rem 0.25rem;
    color: var(--shell-ink-muted);
    font-size: 0.875rem;
}

.shell-palette-results {
    display: grid;
    gap: 2px;
    margin: 0.5rem 0 0;
    max-block-size: calc(70vh - 5rem);
    overflow-y: auto;
}

.shell-palette-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
}

.shell-palette-result[data-active] {
    background: var(--shell-surface-soft);
}

.shell-palette-go {
    flex: 1;
    min-width: 0;
}

.shell-palette-go a {
    display: grid;
    color: inherit;
    text-decoration: none;
}

.shell-palette-result small {
    color: var(--shell-ink-muted);
    font-size: 0.8125rem;
}

.shell-palette-pin {
    flex: none;
    padding: 0.25rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--shell-ink-faint);
    cursor: pointer;
}

.shell-palette-pin[aria-pressed="true"] {
    color: var(--shell-accent);
}

/* The pin is the active cell (Right Arrow): show it, as focus would. */
.shell-palette-pincell[aria-selected="true"] .shell-palette-pin {
    outline: 2px solid var(--shell-accent);
    outline-offset: 1px;
}

/* Scroll lock while a dialog is open, on body so the viewport stays the
   scroller (html overflow would stop sticky everywhere). */
body:has(.shell-frame dialog[open]) {
    overflow: hidden;
}

:focus-visible {
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .shell-frame > .shell-rail {
        transition: inline-size 0.18s ease;
    }
}

@media print {
    :root {
        --rail-w: 0px;
    }

    .shell-rail,
    .shell-top,
    .shell-drawer,
    .shell-palette,
    .shell-skip,
    .shell-foot {
        display: none !important;
    }

    .shell-main {
        padding-block-start: 0;
    }

    /* The screen rules that size the rail outrank :root here, and a
       landscape page is wide enough to match them. */
    .shell-workspace {
        margin-inline-start: 0;
    }
}