/* ══ THE SIDE PANEL IS GLASS, THE HEADER'S GLASS ═════════════════ 24 Sep 2026 ══
   Sir: "give the sidepanel in the dashboard a glass effect instead of navy
   that matches the header's colour".

   The masthead is cream at 94 per cent over a 14px blur, saturated 1.15. The
   panel takes the same glass, a little clearer (84 per cent) because it lies
   over the page rather than over nothing, and a little more blur so the page
   behind it reads as colour, not as text. The night photograph that stood
   behind the navy goes: glass does not carry a picture, and the header this
   is matching does not have one.

   EVERYTHING THAT WAS CREAM ON NAVY TURNS OVER. The travelling pill becomes
   navy with cream letters, which is the page's own primary button, so the
   current section reads as the thing you are on. Muted text takes the page's
   muted grey; the hanging portrait's cord and hook take navy, as they do on
   the service page.

   Loaded after every page's own rail rules and written one step more specific
   (`html .dash-rail`), because three pages each carry their own navy panel
   rules and this has to win over all of them without editing any. Shared by
   the trade dashboard, the homeowner's, and both settings pages, so the panel
   is one panel wherever it opens. */

/* ── v2, the same evening ─────────────────────────────────────────────────
   Sir: "the glass effect is not visible on the live." It was applied, and
   measured live: cream at 84 per cent. Over a cream page that IS cream; glass
   is only glass when what is behind it shows. So the panel is clearer (58 per
   cent), the blur heavier and more saturated so the page behind reads as
   colour and light rather than as text, and the scrim that greyed the page
   under it is nearly gone, because glass over a grey wash is a grey panel.

   AND THE TOP IS THE HEADER. Sir: "blend the top of the sidepanel to the
   header". The panel's first 90px carry the header's own cream (94 per cent)
   and fade into the clearer glass below, and while the panel is open the
   header's bottom hairline goes, so the two read as one sheet of glass
   folded down the left side of the page. */
/* ── v3, later still ──────────────────────────────────────────────────────
   Sir, with a screenshot: "still not seeing the glass effect". Measured the
   thing it was meant to match instead of assuming it: the dashboard's header
   is NOT cream at 94 per cent (that is the kit's figure); hyyryn-glass.css
   makes it cream at 38 per cent, blurred 8px, saturated 1.8, which is why the
   cover photograph glows through it. The panel now takes those numbers, with
   a little more blur (14px) because it lies over text rather than a picture,
   and a thin light edge so the sheet has a border you can see. The top needs
   no special treatment any more: it IS the header's glass. */
html .dash-rail .rail-in,
html.has-drawer .dash-rail .rail-in,
html .has-drawer .dash-rail .rail-in {
  background: rgba(250, 248, 243, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
          backdrop-filter: blur(14px) saturate(1.8);
  color: #0A1628;
  border-right: 1px solid rgba(255, 255, 255, .6);
}
html .dash-rail[data-open] .rail-in,
html.has-drawer .dash-rail[data-open] .rail-in,
html .has-drawer .dash-rail[data-open] .rail-in {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .35),
              inset -1px 0 0 rgba(10, 22, 40, .06),
              18px 0 48px -26px rgba(10, 22, 40, .30);
}
/* rp169: the header keeps its bottom line while the panel is open; the panel is a card under it now */
html .dash-rail .rail-night { display: none; }

html .has-drawer .rail-scrim,
html.has-drawer .rail-scrim { background: rgba(10, 22, 40, .06); }

/* who you are */
html .dash-rail .rail-name { color: #0A1628; }
html .dash-rail .rail-role,
html .dash-rail .rail-k,
html .dash-rail .rail-due,
html .dash-rail .rail-ver,
html .dash-rail .ro-t { color: #636976; }
html .dash-rail .rail-id { border-color: rgba(10, 22, 40, .12); }
html .dash-rail .hang-cord { stroke: rgba(10, 22, 40, .45); }
html .dash-rail .hang-hook { fill: #0A1628; }
html .dash-rail .hang-glint { fill: rgba(250, 248, 243, .7); }
html .dash-rail .hang-frame { box-shadow: 0 10px 26px -14px rgba(10, 22, 40, .45); }

/* ── v4, 26 Sep 2026 ─────────────────────────────────────────────────────
   Sir, with a screenshot: "the description in the side panel is barely
   visible". Measured: "Electrical & heating · Milton Keynes" was #636976 at
   12px over glass that is only 38 per cent cream, so over the cover's night
   photograph it read at about 1.3 to 1. The panel's quiet lines take the
   name's navy and a soft cream halo, which holds over a dark photograph and
   a light page alike: about 4 to 1 at worst without the halo, clear with it. */
/* RETIRED rp169, 20 Oct 2026: the panel's quiet lines took navy and a cream
   halo, !important, because they lay on glass over the cover's photograph. The
   panel is a cream card now (hyyryn-rail-card.css), so the words sit on cream
   and need neither. */
html .dash-rail .ro-note { margin: -4px 0 14px; font: 400 12px/1.45 'Libre Caslon Text', Georgia, serif; }
html .dash-rail .ro-note:empty { display: none; }
html .dash-rail .ro-note.is-bad { color: #8A1F1F !important; }
html .dash-rail .rail-open[aria-busy="true"] { opacity: .6; cursor: progress; }

/* the "taking work" switch */
html .dash-rail .ro-track { background: rgba(10, 22, 40, .16); box-shadow: none; }
html .dash-rail [aria-checked="true"] .ro-track,
html .dash-rail input:checked + .ro-track,
html .dash-rail .is-on .ro-track { background: #0A1628; }
html .dash-rail .ro-knob { background: #FAF8F3; box-shadow: 0 1px 2px rgba(10, 22, 40, .3); }
html .dash-rail .rail-open[aria-checked="true"] .ro-track { background: #0A1628; }
html .dash-rail .rail-open[aria-checked="true"] .ro-knob { background: #FAF8F3; }
html .dash-rail .rail-open .ro-t { color: #0A1628; }

/* hairlines inside the panel */
html .dash-rail .rail-sec,
html .dash-rail .rail-open { border-color: rgba(10, 22, 40, .12); }

/* the tabs */
html .dash-rail .rail-nav .dash-tab-btn { color: #4A5261; }
html .dash-rail .rail-nav .dash-tab-btn:hover { color: #0A1628; background: rgba(10, 22, 40, .05); }
html .dash-rail .rail-nav .dash-tab-btn.active { color: #FAF8F3; background: #0A1628; box-shadow: none; }
html .dash-rail .rail-nav .dash-tab-btn:focus-visible { outline-color: #0A1628; }
html .dash-rail .rail-nav .tab-count { color: #636976; }
html .dash-rail .rail-nav .dash-tab-btn.active .tab-count { color: rgba(250, 248, 243, .72); }

html .dash-rail .rail-ink {
  background: #0A1628;
  box-shadow: 0 1px 2px rgba(10, 22, 40, .18), 0 8px 18px -10px rgba(10, 22, 40, .55);
}
html .dash-rail .rail-nav.has-ink .dash-tab-btn,
html .dash-rail .rail-nav.has-ink .dash-tab-btn:hover,
html .dash-rail .rail-nav.has-ink .dash-tab-btn.active { background: none; box-shadow: none; color: #4A5261; }
html .dash-rail .rail-nav.has-ink .dash-tab-btn:hover { color: #0A1628; }
html .dash-rail .rail-nav.has-ink .dash-tab-btn.is-lit,
html .dash-rail .rail-nav.has-ink .dash-tab-btn.is-lit:hover { color: #FAF8F3; }
html .dash-rail .rail-nav.has-ink .dash-tab-btn.is-lit .tab-count { color: rgba(250, 248, 243, .72); }
html .dash-rail .rail-nav.has-ink .dash-tab-btn:focus-visible { outline: 2px solid #D4A943; outline-offset: -3px; }

/* the checks line and list */
html .dash-rail .rail-ver-none { margin: 6px 0 0; font-family: 'Libre Caslon Text', Georgia, serif; font-size: 12.5px; line-height: 1.5; color: #4A5261; }
html .dash-rail .rail-ver span { color: #1B2638; }
html .dash-rail .rail-ver em { color: #636976; }
html .dash-rail .rv-tick { stroke: #0F5A4F; }
html .dash-rail .rail-ver .is-due em { color: #83632C; }
html .dash-rail .rail-ver .is-due .rv-tick { stroke: #83632C; }

/* the expiry warning belonged to the illustration's list: with the list
   hidden, the warning goes with it, whatever a script says */
html .dash-rail .rail-ver[hidden] ~ .rail-due { display: none !important; }

/* the way out */
html .dash-rail .rail-more { color: #636976; }
html .dash-rail .rail-more:hover { color: #0A1628; box-shadow: inset 0 -1px 0 #0A1628; }

/* the tour button would sit on the open panel */
html:has(.dash-rail[data-open]) .hy-tour-dock { display: none; }

/* ── THE EDGE OPENS IT ──────────────────────────────────────────────────────
   assets/hyyryn-rail-edge.js opens the panel when a mouse rests at the left
   edge. A thin light line shows along that edge while the pointer is near it,
   so the movement has something to answer to before the panel arrives. */
.hy-rail-edge {
  position: fixed; left: 0; top: 74px; bottom: 0; width: 3px; z-index: 118;
  pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(10, 22, 40, .35) 20%, rgba(10, 22, 40, .35) 80%, transparent);
  transition: opacity 180ms ease;
}
.hy-rail-edge.is-near { opacity: 1; }
@media (prefers-reduced-transparency: reduce) {
  html .dash-rail .rail-in { background: #FAF8F3; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .hy-rail-edge { transition: none; } }

/* ── THE SEARCH, IN THE SITE'S SHAPE ──────────────────────────── 24 Sep 2026 ──
   assets/hyyryn-rail-search.js. The homepage search bar's pill: white, the
   line colour, a round navy go button. It rises to the top of the panel when
   pressed and lists predictions under itself. */
html .dash-rail .rail-search.rs {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 5px 0 16px; margin: 0; box-sizing: border-box; width: 100%;
  background: #fff; border: 1px solid #D0CCC4; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(10, 22, 40, .05), 0 3px 8px -3px rgba(10, 22, 40, .09);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}
html .dash-rail .rail-search.rs:focus-within { border-color: #0F5A4F; box-shadow: 0 0 0 3px rgba(15, 90, 79, .14); }
/* risen: clear of the panel's own button, which sits over the top left */
html .dash-rail .rail-search.rs.is-up { position: sticky; top: 0; z-index: 3; margin: 30px 0 6px; }
html .dash-rail .rs-field { position: relative; flex: 1 1 auto; min-width: 0; display: block; }
html .dash-rail .rail-search.rs input {
  position: relative; z-index: 1; width: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  font: 400 14px/20px 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #0A1628;
}
html .dash-rail .rail-search.rs input:focus { outline: none; }
html .dash-rail .rail-search.rs input::placeholder { color: #6B7280; letter-spacing: 0; text-transform: none; }
html .dash-rail .rail-search.rs input::-webkit-search-cancel-button { display: none; }
html .dash-rail .rs-ghost {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; white-space: pre; overflow: hidden;
  font: 400 14px/20px 'Inter', system-ui, sans-serif; color: #A8A29A;
}
html .dash-rail .rs-ghost i { font-style: normal; color: transparent; }
html .dash-rail .rail-search.rs button {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: #0A1628; cursor: pointer;
}
html .dash-rail .rail-search.rs button svg { width: 15px; height: 15px; fill: none; stroke: #FAF8F3; stroke-width: 2; }
html .dash-rail .rs-list {
  position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 5;
  margin: 0; padding: 6px; list-style: none; max-height: min(60vh, 420px); overflow: auto;
  background: rgba(255, 255, 255, .97); border: 1px solid rgba(10, 22, 40, .10); border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(10, 22, 40, .45);
}
html .dash-rail .rs-list[hidden] { display: none; }
html .dash-rail .rs-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  font: 400 13.5px/1.35 'Inter', system-ui, sans-serif; color: #1B2638;
}
html .dash-rail .rs-list li.is-on { background: #F3EFE4; }
html .dash-rail .rs-list .rs-l { min-width: 0; overflow-wrap: anywhere; }
html .dash-rail .rs-list .rs-l b { font-weight: 600; color: #0A1628; }
html .dash-rail .rs-list .rs-k {
  flex: none; font: 600 9.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #6B7280;
}
html .dash-rail .rs-list .rs-none { cursor: default; color: #636976; font-size: 13px; white-space: normal; }
/* where a result lands: marked for a moment */
.rs-hit { outline: 3px solid rgba(212, 169, 67, .75); outline-offset: 4px; border-radius: 6px; transition: outline-color 1.2s ease; }
@media (prefers-reduced-motion: reduce) { .rs-hit { transition: none; } }

/* ── ONE SHEET OF GLASS, NO SEAM; ONE EDGE ─────── 24 Sep 2026, RETIRED rp169 ──
   Here were the rules that made the header and the panel one pane of glass:
   the header's own glass moved onto a layer starting where the panel ended,
   a fixed pane (`.hy-rail-glass`) the panel's width from the top of the window,
   the panel and the scrim made clear, the header's bottom line drawn by the
   layer and turned down the panel's edge. Five passes, each fixing a seam the
   last one made: two blurred panes never agree at an edge.

   Sir, 20 Oct 2026, asked whether there was "a better way of making that
   seamless", chose the panel as a card that floats under the header. With no
   shared edge there is no seam to hide, and the header stays one unbroken
   sheet. hyyryn-rail-edge.js no longer makes the pane; hyyryn-rail-card.css
   draws the card. Mason 69. */