/* ══ THE SIDE PANEL, A CARD THAT FLOATS ══════════════════════════  20 Oct 2026 (rp169) ══
   Sir, 20 Oct 2026: "improve how the side panel looks and potentially
   functions. Currently, when it slides out ... the top is meant to blend with
   the glass effect at the top. But maybe there's a better way of making that
   seamless." Asked, he chose two things: the panel as a rounded cream card
   that floats just under the header, "a small gap from the edges", with the
   person on a navy plate at its top like the account menu; and, on a wide
   screen, a pin that keeps it open beside the page, the page moving over to
   make room, remembered.

   WHY THE JOIN GOES RATHER THAN BEING HIDDEN BETTER. Since 24 Sep the panel's
   top was made to be the header: one pane of glass from the top of the window,
   the header's own glass moved onto a layer that started where the panel
   ended, the header's bottom line redrawn to turn the corner. Five passes, each
   fixing a seam the last one made, because two blurred panes never agree at an
   edge. A card that floats under the header has no join: the header stays one
   unbroken sheet, and the card is a thing in front of the page with its own
   edge on every side, like every other card on the site (Mason 68).

   This sheet comes last, on every page with the panel (both dashboards,
   my-jobs-norm, both settings pages, Your checks, the organisation). The rules
   it replaces in hyyryn-rail-glass.css (the pane, the header's moved glass,
   the halo on the panel's quiet words) were taken out there, not outranked.
   Every rule names the panel by its id twice (#dashRail#dashRail, (2,0,0)) so
   it wins over the pages' own panel rules on count (Mason 05).

   Layout, measured at 1440, 1280, 1100, 767 and 390 (mason/references/
   research-side-panel-2026-10.md):
     the track (.dash-rail) is 296px from the page's left edge; the card
       (.rail-in) is 272px inside it, 12px in from the left, 12px under the
       header, as tall as what it holds and never closer than 12px to the foot
       of the window, sticky, scrolling inside when it has more;
     on a phone or a half window the card is the window less 24px, at most 300;
     the button that opened it steps back under the card, and the card's own
       way shut sits in its head, top left, the pin top right;
     pinned (1200px and over), the page's column starts 24px clear of the card
     and the panel has no scrim and no way out but the toggle. */

:root { --rc-w: 272px; --rc-gap: 12px; --rc-head: var(--hy-head-h, 74px); }
@media (max-width: 980px) { :root { --rc-head: var(--hy-head-h, 64px); } }

/* ── 1. the track and the card ───────────────────────────────────────── */
html.has-drawer #dashRail#dashRail {
  width: calc(var(--rc-w) + 2 * var(--rc-gap));
}
html.has-drawer #dashRail#dashRail .rail-in {
  top: calc(var(--rc-head) + var(--rc-gap));
  width: var(--rc-w); margin: var(--rc-gap) 0 0 var(--rc-gap);
  height: auto; max-height: calc(100vh - var(--rc-head) - 2 * var(--rc-gap));
  padding: 8px 8px 14px; gap: 10px;
  border: 0; border-radius: 24px;
  background: radial-gradient(120% 40% at 100% 0%, rgba(212,169,67,.06), rgba(212,169,67,0) 55%), linear-gradient(180deg, #FCFBF7 0%, #F7F4EC 100%) #F7F4EC;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #0A1628;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), inset 0 1px 0 #FFFFFF,
              0 2px 6px rgba(10,22,40,.08), 0 18px 40px -18px rgba(10,22,40,.32), 0 50px 90px -40px rgba(10,22,40,.45);
  scrollbar-width: thin; scrollbar-color: rgba(10,22,40,.18) transparent;
}
html.has-drawer #dashRail#dashRail[data-open] .rail-in {
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.10), inset 0 1px 0 #FFFFFF,
              0 2px 6px rgba(10,22,40,.08), 0 18px 40px -18px rgba(10,22,40,.32), 0 50px 90px -40px rgba(10,22,40,.45);
}
html #dashRail#dashRail .rail-night { display: none; }
/* nothing in the card gives up its height to the others: the card scrolls instead (a flex column of a fixed height
   squeezed the name to 26px under the portrait) */
html.has-drawer #dashRail#dashRail .rail-in > *, html #dashRail#dashRail .rail-stack > * { flex-shrink: 0; }
html #dashRail#dashRail .rail-stack { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; margin: 0; padding: 0; }

/* the scrim: a soft dim over the page while the card is over it */
html.has-drawer .dash-shell .rail-scrim#railScrim { background: rgba(10,22,40,.16); }

/* ── 2. the head: the person on a navy plate ──────────────────────────── */
html #dashRail#dashRail :is(.pf-media, .rail-id) {
  background: radial-gradient(120% 120% at 100% 0%, rgba(212,169,67,.16), rgba(212,169,67,0) 60%), linear-gradient(160deg, #16305A, #102341) #102341;
  color: #FAF8F3;
}
/* with a portrait, the plate is two boxes: one gradient run down both, meeting at the same navy, so no line where
   they join */
html #dashRail#dashRail .pf-media:has(+ .rail-id) { background: radial-gradient(130% 70% at 100% 0%, rgba(212,169,67,.16), rgba(212,169,67,0) 60%), linear-gradient(180deg, #17325D 0%, #132B51 100%) #132B51; }
html #dashRail#dashRail .pf-media + .rail-id { background: linear-gradient(180deg, #132B51 0%, #0F2240 100%) #102341; }
html #dashRail#dashRail .rail-id {
  margin: 0; padding: 62px 18px 18px; box-sizing: border-box; border: 0; border-radius: 18px;
  display: flex; flex-direction: column; justify-content: center; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.20), inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px -14px rgba(10,22,40,.55);
}
html #dashRail#dashRail .pf-media {
  position: relative; width: auto; margin: 0; padding: 18px 0 4px; border-radius: 18px 18px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
html #dashRail#dashRail .pf-media + .rail-id {
  margin-top: -10px; padding: 8px 16px 18px; min-height: 0; border-radius: 0 0 18px 18px; text-align: center;
  box-shadow: 0 10px 22px -14px rgba(10,22,40,.55);
}
html #dashRail#dashRail .pf-media .hang { width: 124px; margin: 0 auto; }
html #dashRail#dashRail .hang-cord { stroke: rgba(250,248,243,.55); }
html #dashRail#dashRail .hang-hook { fill: #E2BE6A; }
html #dashRail#dashRail .hang-glint { fill: rgba(255,255,255,.75); }
html #dashRail#dashRail .hang-frame { box-shadow: 0 0 0 3px rgba(212,169,67,.55), 0 14px 26px -12px rgba(0,0,0,.55); }
html #dashRail#dashRail .rail-name {
  margin: 0; color: #FAF8F3; font-family: var(--serif-display, 'Libre Caslon Display', Georgia, serif); font-size: 19px; line-height: 1.2;
  letter-spacing: .02em; text-transform: none; text-shadow: none; }
html #dashRail#dashRail .rail-role {
  margin: 4px 0 0; color: rgba(243,238,227,.74); text-shadow: none;
  font: 400 12.5px/1.45 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .02em; text-transform: none; }

/* ── 3. the way shut and the pin, in the head ─────────────────────────────
   The button that opened the panel is under the card once it is open, so it
   steps back and the card's own (hyyryn-rail-edge.js makes both) takes its
   place, in the same corner: top left of the head. The pin is top right, from
   1200px. Cream rings on the navy plate, 34px, 10px in from its corners. */
html.has-drawer .rail-stub #railToggle { transition: opacity .18s ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
html.has-drawer:has(#dashRail[data-open]) .rail-stub #railToggle,
html.has-drawer.rail-pin-early .rail-stub #railToggle { opacity: 0; pointer-events: none; }
/* and its column, which stands over the card's corner (z-index 130 to the card's 120), lets the pointer through */
html.has-drawer:has(#dashRail[data-open]) .dash-shell .rail-stub,
html.has-drawer.rail-pin-early .dash-shell .rail-stub { pointer-events: none; }
html #dashRail#dashRail :is(.rail-x, .rail-pin) {
  position: absolute; top: 18px; z-index: 3;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(250,248,243,.10); color: #FAF8F3; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(250,248,243,.22);
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
html #dashRail#dashRail .rail-x { left: 18px; }
html #dashRail#dashRail .rail-pin { right: 18px; display: none; }
html #dashRail#dashRail .rail-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html #dashRail#dashRail .rail-x .rt-bay { fill: currentColor; stroke: none; }
html #dashRail#dashRail .rail-pin::before {
  content: ''; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF8F3' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(45deg);
  transition: transform .25s cubic-bezier(.2,.9,.25,1.2); }
html #dashRail#dashRail :is(.rail-x, .rail-pin):hover { background: rgba(250,248,243,.22); box-shadow: inset 0 0 0 1px rgba(250,248,243,.36); }
html #dashRail#dashRail .rail-pin[aria-pressed="true"] { background: #D4A943; box-shadow: 0 6px 14px -8px rgba(0,0,0,.6); }
html #dashRail#dashRail .rail-pin[aria-pressed="true"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); transform: none; }
html #dashRail#dashRail :is(.rail-x, .rail-pin):focus-visible { outline: 2px solid #E2BE6A; outline-offset: 2px; }
@media (min-width: 1200px) { html #dashRail#dashRail .rail-pin { display: grid; } }

/* ── 4. the rows ──────────────────────────────────────────────────────── */
html #dashRail#dashRail .rail-nav { gap: 2px; margin: 4px 0 0; padding: 0; }
html #dashRail#dashRail .rail-nav .dash-tab-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 46px; padding: 7px 12px 7px 7px; box-sizing: border-box;
  border-radius: 14px; color: #0A1628;
  font: 500 14px/1.25 var(--sans, Inter, system-ui, sans-serif); letter-spacing: 0; text-transform: none; text-align: left;
}
html #dashRail#dashRail .rail-nav .dash-tab-btn::before {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: var(--rc-ico, none) center / 16px 16px no-repeat, #EFEAE0;
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.07);
  transition: background-color .18s ease, box-shadow .18s ease;
}
/* a row that is a section of a page (settings, Your checks) shows its number on the tile, as the cards do */
html #dashRail#dashRail .rail-nav a.dash-tab-btn::before { content: none; }
html #dashRail#dashRail .rail-nav a.dash-tab-btn .tab-count {
  order: -1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border-radius: 10px;
  background: #EFEAE0; box-shadow: inset 0 0 0 1px rgba(10,22,40,.07); color: #0A1628;
  font: 600 11px/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .04em; opacity: 1; }
/* the pill that travels to the row you are on, and under the pointer */
html #dashRail#dashRail .rail-ink { border-radius: 14px; background: #0A1628;
  box-shadow: 0 1px 2px rgba(10,22,40,.18), 0 10px 20px -12px rgba(10,22,40,.6); }
html #dashRail#dashRail .rail-nav.has-ink .dash-tab-btn,
html #dashRail#dashRail .rail-nav.has-ink .dash-tab-btn:hover { color: #0A1628; background: none; box-shadow: none; }
html #dashRail#dashRail .rail-nav.has-ink .dash-tab-btn.is-lit,
html #dashRail#dashRail .rail-nav.has-ink .dash-tab-btn.is-lit:hover { color: #FAF8F3; }
html #dashRail#dashRail .rail-nav.has-ink .dash-tab-btn.is-lit::before { background-image: var(--rc-ico-lit, none); background-color: rgba(250,248,243,.10); box-shadow: inset 0 0 0 1px rgba(250,248,243,.14); }
html #dashRail#dashRail .rail-nav.has-ink a.dash-tab-btn.is-lit .tab-count { background: rgba(250,248,243,.10); color: #E2BE6A; box-shadow: inset 0 0 0 1px rgba(250,248,243,.14); }
html #dashRail#dashRail .rail-nav:not(.has-ink) .dash-tab-btn.active { color: #FAF8F3; background: #0A1628; }
html #dashRail#dashRail .rail-nav .dash-tab-btn:focus-visible { outline: 2px solid #D4A943; outline-offset: -2px; }
/* a count on a tab is something waiting on you: a gold pill at the end of the row */
html #dashRail#dashRail .rail-nav button.dash-tab-btn .tab-count {
  margin-left: auto; display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box;
  border-radius: 999px; background: #D4A943; color: #0A1628;
  font: 600 11px/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: 0; opacity: 1; }
html #dashRail#dashRail .rail-nav button.dash-tab-btn.is-lit .tab-count { color: #0A1628; }
/* the marks, one a tab */
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="earnings"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="money"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7c0-5.33-8-5.33-8 0'/%3E%3Cpath d='M10 7v14'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M6 13h10'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7c0-5.33-8-5.33-8 0'/%3E%3Cpath d='M10 7v14'/%3E%3Cpath d='M6 21h12'/%3E%3Cpath d='M6 13h10'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="jobs"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="own"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="services"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.41l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='0.5'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.59 2.59A2 2 0 0 0 11.17 2H4a2 2 0 0 0-2 2v7.17a2 2 0 0 0 .59 1.41l8.7 8.7a2.43 2.43 0 0 0 3.42 0l6.58-6.58a2.43 2.43 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='0.5'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="reviews"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.53 2.3a.53.53 0 0 1 .94 0l2.31 4.68a2.12 2.12 0 0 0 1.6 1.16l5.17.76a.53.53 0 0 1 .29.9l-3.74 3.64a2.12 2.12 0 0 0-.61 1.88l.88 5.14a.53.53 0 0 1-.77.56l-4.62-2.43a2.12 2.12 0 0 0-1.97 0L6.4 21.01a.53.53 0 0 1-.77-.56l.88-5.14a2.12 2.12 0 0 0-.61-1.88L2.16 9.8a.53.53 0 0 1 .29-.9l5.17-.76a2.12 2.12 0 0 0 1.6-1.16z'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.53 2.3a.53.53 0 0 1 .94 0l2.31 4.68a2.12 2.12 0 0 0 1.6 1.16l5.17.76a.53.53 0 0 1 .29.9l-3.74 3.64a2.12 2.12 0 0 0-.61 1.88l.88 5.14a.53.53 0 0 1-.77.56l-4.62-2.43a2.12 2.12 0 0 0-1.97 0L6.4 21.01a.53.53 0 0 1-.77-.56l.88-5.14a2.12 2.12 0 0 0-.61-1.88L2.16 9.8a.53.53 0 0 1 .29-.9l5.17-.76a2.12 2.12 0 0 0 1.6-1.16z'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="disputes"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="homes"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="approvals"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="watch"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="people"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="spend"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="packs"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z'/%3E%3Cpath d='M12 22V12'/%3E%3Cpath d='m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="plan"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.13a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.13 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.94 15.5A2 2 0 0 0 8.5 14.06l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94A2 2 0 0 0 9.94 8.5l1.58-6.13a.5.5 0 0 1 .96 0L14.06 8.5A2 2 0 0 0 15.5 9.94l6.13 1.58a.5.5 0 0 1 0 .96L15.5 14.06a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-nav .dash-tab-btn[data-tab="profile"] { --rc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 21v-1a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1'/%3E%3C/svg%3E"); --rc-ico-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3Cpath d='M7 21v-1a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v1'/%3E%3C/svg%3E"); }

/* ── 5. what else the card holds ─────────────────────────────────────── */
/* the trade's "taking work" switch: a row tile */
html #dashRail#dashRail .rail-open {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; margin: 0; padding: 7px 12px; box-sizing: border-box;
  border: 0; border-radius: 14px; background: #F1ECE2; box-shadow: inset 0 0 0 1px rgba(10,22,40,.07); text-align: left; }
html #dashRail#dashRail .rail-open .ro-t { color: #0A1628; font: 500 13.5px/1.2 var(--sans, Inter, system-ui, sans-serif); letter-spacing: 0; text-transform: none; }
html #dashRail#dashRail .rail-open[aria-checked="true"] { background: rgba(15,90,79,.08); box-shadow: inset 0 0 0 1px rgba(15,90,79,.22); }
html #dashRail#dashRail .rail-open[aria-checked="true"] .ro-track { background: #0F5A4F; }
html #dashRail#dashRail .ro-note { margin: -2px 6px 2px; color: #4A5160; text-shadow: none; font: 400 12.5px/1.5 var(--serif, 'Libre Caslon Text', Georgia, serif); }
html #dashRail#dashRail .ro-note.is-bad { color: #8A1F1F; }

/* a section at the foot (Your checks, payment protection, the organisations): a tile */
html #dashRail#dashRail .rail-sec {
  margin: 4px 0 0; padding: 14px 14px 14px; border: 0; border-radius: 16px;
  background: #F1ECE2; box-shadow: inset 0 0 0 1px rgba(10,22,40,.07); }
/* a section that is only a way somewhere else (payment protection, support, back to settings, another
   organisation) is not a tile with a button in it: its links are rows like the tabs, each with its mark, under them */
html #dashRail#dashRail .rail-sec:not(:has(> :not(.rail-more):not([hidden]))) {
  display: grid; gap: 2px; margin: 6px 0 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
html #dashRail#dashRail .rail-sec:not(:has(> :not(.rail-more):not([hidden]))) > .rail-more {
  display: flex; align-items: center; gap: 12px; min-height: 46px; margin: 0; padding: 7px 12px 7px 7px; box-sizing: border-box;
  border-radius: 14px; background: none; box-shadow: none; color: #0A1628;
  font: 500 14px/1.25 var(--sans, Inter, system-ui, sans-serif); letter-spacing: 0; text-transform: none; }
html #dashRail#dashRail .rail-sec:not(:has(> :not(.rail-more):not([hidden]))) > .rail-more::before {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 10px;
  background: var(--rc-lk, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")) center / 16px 16px no-repeat, #EFEAE0; box-shadow: inset 0 0 0 1px rgba(10,22,40,.07);
  transition: background-color .18s ease; }
html #dashRail#dashRail .rail-sec:not(:has(> :not(.rail-more):not([hidden]))) > .rail-more:hover { background: rgba(10,22,40,.05); color: #0A1628; box-shadow: none; }
html #dashRail#dashRail .rail-sec:not(:has(> :not(.rail-more):not([hidden]))) > .rail-more:hover::before { background-color: #0A1628; background-image: var(--rc-lk-on, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")); }
/* each link's mark, by where it goes (set on the link, so the rule above draws it whatever its weight) */
html #dashRail .rail-more[href*="payment-protection"] { --rc-lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); --rc-lk-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
html #dashRail .rail-more[href*="support"] { --rc-lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --rc-lk-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
html #dashRail .rail-more[href^="settings"] { --rc-lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); --rc-lk-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E"); }
html #dashRail .rail-more[href*="new=1"] { --rc-lk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); --rc-lk-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E2BE6A' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E"); }
html #dashRail#dashRail .rail-k { margin: 0 0 4px; color: #83632C; text-shadow: none;
  font: 600 10px/1.3 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
html #dashRail#dashRail .rail-ver-none, html #dashRail#dashRail .rail-sec p { color: #3E4757; text-shadow: none; }
html #dashRail#dashRail .rail-due { color: #83632C; text-shadow: none; }
/* a link in a tile (Your checks): a white pill */
html #dashRail#dashRail .rail-more {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 10px; padding: 0 14px; border-radius: 999px;
  background: #FFFFFF; color: #0A1628; box-shadow: inset 0 0 0 1px rgba(10,22,40,.16), 0 1px 2px rgba(10,22,40,.06);
  font: 500 11px/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
html #dashRail#dashRail .rail-more:hover { background: #0A1628; color: #FAF8F3; box-shadow: inset 0 0 0 1px #0A1628, 0 10px 20px -12px rgba(10,22,40,.5); }
html #dashRail#dashRail .rail-sec .rail-more:focus-visible { outline: 2px solid #D4A943; outline-offset: 2px; }
html #dashRail#dashRail .rail-sec .rail-more:first-child { margin-top: 0; }
html #dashRail#dashRail .rail-sec .rail-more + .rail-more { margin-left: 0; }
html #dashRail#dashRail .rail-orgs a { border-radius: 12px; }
html #dashRail#dashRail .rail-orgs a[aria-current] { box-shadow: none; background: #FFFFFF; font-weight: 600; }

/* the search, at the foot of the card */
html #dashRail#dashRail .rail-search { margin-top: auto; }
html #dashRail#dashRail .rail-search.rs { border-color: rgba(10,22,40,.14); }

/* ── 6. pinned open beside the page (1200px and over) ────────────────────
   The page's column starts 24px clear of the card: the card's right edge is
   12 + 272 = 284px from the window's left, and the column stood at the page
   edge plus the toggle's 38px column plus the shell's gap. The scrim goes, the
   tour's button moves to the right of the card, and the cover photograph
   still runs under the card from edge to edge. */
@media (min-width: 1200px) {
  html.has-drawer:is(.rail-pinned, .rail-pin-early) .dash-shell .dash-body {
    margin-left: calc(var(--rc-gap) + var(--rc-w) + 24px - clamp(16px, 1.6vw, 28px) - 38px - clamp(14px, 1.6vw, 24px));
    transition: margin-left 340ms cubic-bezier(.22, .85, .3, 1); }
  html.has-drawer:is(.rail-pinned, .rail-pin-early) .dash-shell .rail-scrim#railScrim { display: none; }
  /* rail-pin-early: set by the page's own wall script as the panel is parsed, when it was pinned last time, so
     the first paint already has it open beside the page; the drawer's own open takes over a moment later */
  html.has-drawer.rail-pin-early #dashRail#dashRail { translate: 0 0; visibility: visible; transition: none; }
  html.has-drawer.rail-pinned:has(#dashRail[data-open]) .hy-tour-dock { display: inline-flex; left: calc(var(--rc-gap) + var(--rc-w) + 20px); }
  /* rp173: the first visit's tour offer goes with its button (it sat on the card's last three rows) */
  html.has-drawer.rail-pinned:has(#dashRail[data-open]) .hy-tour-offer { left: calc(var(--rc-gap) + var(--rc-w) + 20px); }
  html.has-drawer.rail-pinned .hg-bar { margin-left: calc((var(--rc-gap) + var(--rc-w)) / 2); }
}
/* rp173, found by Mason's panels.mjs: the card open over the page (not pinned) had the first visit's tour offer, a
   fixed card at z 8001, standing on its last three rows (Services, Reviews, Disputes: the pointer could not reach
   them). While the card is over the page the offer steps aside, as it does for the account menu, and comes back
   when the card shuts. */
html.has-drawer:not(.rail-pinned):has(#dashRail[data-open]) .hy-tour-offer { opacity: 0; visibility: hidden; pointer-events: none; }
html.has-drawer.rail-settle .dash-shell .dash-body, html.has-drawer.rail-settle #dashRail#dashRail, html.has-drawer.rail-settle #dashRail .rail-in { transition: none; }

/* the setup guide's bar is centred at the foot of the window, 660px wide: under 1252px it would lie over the open
   card's foot (the search), so it steps aside while the card is over the page, and comes back when it shuts */
@media (max-width: 1251px) {
  html.has-drawer:not(.rail-pinned):has(#dashRail[data-open]) .hg-bar { visibility: hidden; opacity: 0; pointer-events: none; }
}

/* ── 7. a phone and a half window ─────────────────────────────────────── */
@media (max-width: 980px) {
  html.has-drawer #dashRail#dashRail { width: calc(min(300px, 100vw - 24px) + 2 * var(--rc-gap)); }
  html.has-drawer #dashRail#dashRail .rail-in { width: min(300px, calc(100vw - 24px)); border-radius: 22px; padding: 8px 8px 12px; }
}
/* ── 8. a phone: the panel's button as a bar of sections (rp178, 21 Oct 2026) ──────────────────────────────
   The phone sweep (Sir: "the mobile view needs some serious improvements and fixes"): on a phone the button was a
   38px disc stuck at the top left of the page as it scrolled, over the first words of every card. It becomes a bar
   the width of the screen under the masthead, with the section you are in and "Sections" (hyyryn-rail-edge.js
   writes both), on its own ground, so nothing passes under a button and the place you are is said. */
html #railToggle .rt-name, html #railToggle .rt-more { display: none; }
@media (max-width: 760px) {
  html.has-drawer .dash-shell .rail-stub { width: auto; }
  html.has-drawer .rail-stub #railToggle.rail-toggle {
    position: sticky; top: var(--hy-head-h, 64px); z-index: 2;
    display: flex; align-items: center; gap: 12px; box-sizing: border-box;
    width: calc(100% + 2 * var(--edge, 16px)); height: 48px; margin: 0 0 0 calc(-1 * var(--edge, 16px)); padding: 0 var(--edge, 16px);
    border: 0; border-bottom: 1px solid rgba(10,22,40,.10); border-radius: 0;
    background: rgba(250,248,243,.96); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: 0 10px 20px -18px rgba(10,22,40,.55); color: var(--navy, #0A1628); text-align: left; }
  html.has-drawer .rail-stub #railToggle.rail-toggle svg { flex: none; width: 20px; height: 20px; }
  html.has-drawer .rail-stub #railToggle .rt-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 500 15px/1.2 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .01em; }
  html.has-drawer .rail-stub #railToggle .rt-more { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none;
    font: 600 10.5px/1 var(--sans, Inter, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #6B7280; }
  html.has-drawer .rail-stub #railToggle .rt-more::after { content: ''; width: 7px; height: 7px; margin-top: -3px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
  html.has-drawer .rail-stub #railToggle.rail-toggle:focus-visible { outline: 2px solid var(--navy, #0A1628); outline-offset: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  html #dashRail#dashRail .rail-pin, html #dashRail#dashRail .rail-pin::before { transition: none; }
  html.has-drawer:is(.rail-pinned, .rail-pin-early) .dash-shell .dash-body { transition: none; }
}
@media (forced-colors: active) {
  html.has-drawer #dashRail#dashRail .rail-in { border: 1px solid CanvasText; }
  html #dashRail#dashRail .rail-nav .dash-tab-btn::before { forced-color-adjust: none; }
}
@media print { html.has-drawer.rail-pinned .dash-shell .dash-body { margin-left: 0; } }