/* ══ THE PAGE TOUR ═════════════════════════════════════════ 22 Sep 2026 ══
   Sir: "I do want to offer a tour to each page."
   One component for every page. A page marks the parts worth pointing at
   with data-tour="n" (order), data-tour-title and data-tour-text; this
   draws the offer, the launcher and the walk. Nothing here blocks the page:
   the offer is a small card that can be ignored, and the tour closes on
   Escape, on "Close", or by clicking outside it. */
.hy-tour-launch {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 8000;
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px;
  border-radius: 19px; border: 1px solid rgba(10,22,40,.14); background: rgba(250,248,243,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(10,22,40,.12);
  font: 600 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #0A1628; cursor: pointer; transition: transform 200ms, box-shadow 200ms;
}
.hy-tour-launch:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(10,22,40,.16); }
.hy-tour-launch svg { width: 16px; height: 16px; fill: none; stroke: #0F5A4F; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hy-tour-launch:focus-visible, .hy-tour-card button:focus-visible { outline: 3px solid #D4A943; outline-offset: 2px; }

/* the one-time offer, above the launcher */
.hy-tour-offer {
  position: fixed; left: 20px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 8001;
  width: min(320px, calc(100vw - 40px)); padding: 18px 20px 16px;
  background: #0A1628; color: #FAF8F3; border-radius: 10px;
  box-shadow: 0 18px 40px rgba(4,9,15,.35);
  font-family: 'Libre Caslon Text', Georgia, serif;
  opacity: 0; transform: translateY(8px); transition: opacity 300ms, transform 400ms cubic-bezier(.16,1,.3,1);
}
.hy-tour-offer.is-on { opacity: 1; transform: none; }
/* rp74, 6 Oct 2026: on a phone the offer sat on top of the open account menu, over the
   person's own name and links. While any account menu is open, the offer steps aside.
   It wins over .is-on on count (0,3,1 against 0,2,0), not on !important (Mason 05). */
html:has(.nm-menu.open) .hy-tour-offer, html:has(.acct-wrap .menu[data-open]) .hy-tour-offer { opacity: 0; visibility: hidden; pointer-events: none; }
.hy-tour-offer p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(250,248,243,.86); }
.hy-tour-offer b { display: block; margin-bottom: 6px; font: 600 10.5px/1.4 'Inter', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #D4A943; }
.hy-tour-row { display: flex; gap: 10px; margin-top: 14px; }
.hy-tour-row button {
  height: 34px; padding: 0 14px; border-radius: 17px; cursor: pointer;
  font: 600 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
/* Sir, 25 Sep 2026: just the outline gold, the middle the offer's own navy */
.hy-tour-go { background: #0A1628; color: #FAF8F3; border: 1.5px solid #D4A943; transition: background 160ms ease; }
.hy-tour-go:hover { background: rgba(212,169,67,.14); }
.hy-tour-no { background: transparent; color: rgba(250,248,243,.8); border: 1px solid rgba(250,248,243,.28); }

/* the walk: a ring on the real thing, and a card beside it */
.hy-tour-ring {
  position: fixed; z-index: 9990; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 0 2px #D4A943, 0 0 0 9999px rgba(4,9,15,.58);
  transition: left 380ms cubic-bezier(.16,1,.3,1), top 380ms cubic-bezier(.16,1,.3,1),
              width 380ms cubic-bezier(.16,1,.3,1), height 380ms cubic-bezier(.16,1,.3,1);
}
.hy-tour-card {
  position: fixed; z-index: 9991; width: min(340px, calc(100vw - 32px));
  padding: 20px 22px 16px; border-radius: 10px; background: #FAF8F3; color: #1B2638;
  box-shadow: 0 20px 48px rgba(4,9,15,.4);
  transition: left 380ms cubic-bezier(.16,1,.3,1), top 380ms cubic-bezier(.16,1,.3,1);
}
.hy-tour-k { font: 600 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #0F5A4F; }
.hy-tour-t { margin: 10px 0 8px; font: 400 21px/1.25 'Libre Caslon Display', Georgia, serif; color: #0A1628; }
.hy-tour-x { margin: 0; font: 14px/1.65 'Libre Caslon Text', Georgia, serif; color: #4A5261; }
.hy-tour-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.hy-tour-nav .hy-tour-close { background: none; border: 0; padding: 6px 0; cursor: pointer; font: 500 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #636976; }
.hy-tour-nav div { display: flex; gap: 8px; }
.hy-tour-nav div button { height: 34px; padding: 0 14px; border-radius: 17px; cursor: pointer; font: 600 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.hy-tour-back { background: transparent; border: 1px solid rgba(10,22,40,.2); color: #0A1628; }
.hy-tour-next { background: #0A1628; border: 0; color: #FAF8F3; }
.hy-tour-back[hidden] { display: none; }

@media (max-width: 600px) {
  .hy-tour-launch { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 34px; padding: 0 12px 0 10px; }
  /* On a phone the offer takes the launcher's place at the very foot, so it
     never sits over the hero's search button. */
  .hy-tour-offer { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 14px 16px 12px; }
  .hy-tour-offer p { font-size: 13px; line-height: 1.5; }
  .hy-tour-row { margin-top: 10px; }
  .hy-tour-offering .hy-tour-launch { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .hy-tour-ring, .hy-tour-card, .hy-tour-offer, .hy-tour-launch { transition: none; }
}
@media print { .hy-tour-launch, .hy-tour-offer, .hy-tour-ring, .hy-tour-card { display: none !important; } }
/* The tour button stands down while a dialog is open. 24 Sep 2026: on a phone
   it sat on top of the list-a-service dialog's Back button. */
body:has(.pjm:not([hidden])) .hy-tour-launch{display:none}

/* ── MORE THAN ONE TOUR ──────────────────────────────────────── 24 Sep 2026
   Sir: "we need a way to give more tours if wanted for the main dashboard and
   other tabs in the side panel". A page that declares more tours gets a short
   list above the launcher; each row is a tour, the open tab's is marked. */
.hy-tour-more { background: transparent; border: 1px solid rgba(15,90,79,.35); color: #0F5A4F; }
.hy-tour-more[hidden] { display: none; }
.hy-tour-menu {
  position: fixed; left: 20px; bottom: calc(68px + env(safe-area-inset-bottom, 0px)); z-index: 8002;
  width: min(340px, calc(100vw - 40px)); max-height: calc(100vh - 110px); overflow: auto;
  padding: 16px 8px 8px; border-radius: 10px; background: #FAF8F3; color: #1B2638;
  border: 1px solid rgba(10,22,40,.1); box-shadow: 0 20px 48px rgba(4,9,15,.28);
}
.hy-tour-menu-k { margin: 0 12px 8px; font: 600 10px/1 'Inter', system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #0F5A4F; }
.hy-tour-menu ul { list-style: none; margin: 0; padding: 0; }
.hy-tour-menu button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 8px;
  background: transparent; cursor: pointer; color: inherit;
}
.hy-tour-menu button:hover { background: #EFEBE2; }
.hy-tour-menu button:focus-visible { outline: 3px solid #D4A943; outline-offset: -3px; }
.hy-tour-menu-n { display: flex; align-items: center; gap: 8px; font: 400 17px/1.3 'Libre Caslon Display', Georgia, serif; color: #0A1628; }
.hy-tour-menu-n em {
  font: 600 9.5px/1 'Inter', system-ui, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase;
  color: #0F5A4F; padding: 4px 7px; border-radius: 999px; background: rgba(15,90,79,.1);
}
.hy-tour-menu-s { display: block; margin-top: 3px; font: 13px/1.5 'Libre Caslon Text', Georgia, serif; color: #4A5261; }
@media (max-width: 600px) {
  .hy-tour-menu { left: 12px; bottom: calc(56px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 24px); }
}
@media print { .hy-tour-menu { display: none !important; } }

/* ── THE TOUR SPEAKS THE SIGN-IN'S VOICE ─────────────────────── 24 Sep 2026
   Sir: "Improve the tours pop up fonts", and the first tour one press away
   again, and the tours numbered.

   The same voice the sign-in and the dialogs were given this morning: the
   display serif for the one line that names the thing, Inter for everything
   read or pressed. The card had set its explanation in the text serif at
   14px, which next to the Inter controls read as a second voice.

   THE BUTTON IS TWO BUTTONS IN ONE PILL. "Tour this page" starts the first
   tour, as it did before 24 Sep; "All tours" with its count opens the
   numbered list. Rules written against .hy-tour-launch above still hold on a
   page with one tour; on the dock the launch is a segment, not a pill. */
.hy-tour-dock {
  position: fixed; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 8000;
  display: inline-flex; align-items: stretch; height: 38px; border-radius: 19px;
  border: 1px solid rgba(10,22,40,.14); background: rgba(250,248,243,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(10,22,40,.12); overflow: hidden;
  transition: transform 200ms, box-shadow 200ms;
}
.hy-tour-dock:hover { box-shadow: 0 10px 26px rgba(10,22,40,.16); }
.hy-tour-dock .hy-tour-launch {
  position: static; height: auto; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  font: 500 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .16em;
}
.hy-tour-dock .hy-tour-launch:hover { transform: none; box-shadow: none; background: rgba(10,22,40,.05); }
.hy-tour-all {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 13px; margin: 0;
  border: 0; border-left: 1px solid rgba(10,22,40,.12); background: transparent; cursor: pointer;
  font: 500 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #0A1628;
}
.hy-tour-all:hover, .hy-tour-all[aria-expanded="true"] { background: rgba(10,22,40,.05); }
.hy-tour-all-n {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #0A1628; color: #FAF8F3;
  font: 600 10px/1 'Inter', system-ui, sans-serif; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.hy-tour-dock button:focus-visible { outline: 3px solid #D4A943; outline-offset: -3px; }
body:has(.pjm:not([hidden])) .hy-tour-dock { display: none; }

/* the step card */
.hy-tour-card { width: min(360px, calc(100vw - 32px)); padding: 22px 24px 18px; border-radius: 14px; }
.hy-tour-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hy-tour-k { margin: 0; font: 600 11px/1.35 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #0F5A4F; }
.hy-tour-n { margin: 0; flex: none; font: 500 12px/1.35 'Inter', system-ui, sans-serif; color: #6B7280; font-variant-numeric: tabular-nums; }
.hy-tour-t { margin: 12px 0 8px; font: 400 24px/1.2 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif; color: #0A1628; text-wrap: balance; }
.hy-tour-x { margin: 0; font: 400 14px/1.6 'Inter', system-ui, sans-serif; color: #4B5563; }
.hy-tour-nav { margin-top: 18px; }
.hy-tour-nav .hy-tour-close { font: 500 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .16em; color: #6B7280; }
.hy-tour-nav div button { height: 36px; padding: 0 16px; border-radius: 999px; font: 500 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .2em; }

/* the numbered list */
.hy-tour-menu { width: min(360px, calc(100vw - 40px)); padding: 20px 10px 10px; border-radius: 14px; }
.hy-tour-menu-t { margin: 0 12px 4px; font: 400 22px/1.2 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif; color: #0A1628; }
.hy-tour-menu-k { margin: 0 12px 10px; font: 400 13px/1.5 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #6B7280; }
.hy-tour-menu ol { list-style: none; margin: 0; padding: 0; }
.hy-tour-menu button { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; }
.hy-tour-menu-i {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; margin-top: -2px;
  border-radius: 50%; border: 1px solid rgba(10,22,40,.22); color: #0A1628;
  font: 600 12px/1 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.hy-tour-menu li:first-child .hy-tour-menu-i { background: #0A1628; border-color: #0A1628; color: #FAF8F3; }
.hy-tour-menu-b { display: block; min-width: 0; }
.hy-tour-menu-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font: 500 15px/1.35 'Inter', system-ui, sans-serif; color: #0A1628; }
.hy-tour-menu-n em { font: 600 9.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .12em; }
.hy-tour-menu-s { margin-top: 3px; font: 400 13px/1.5 'Inter', system-ui, sans-serif; color: #6B7280; }
.hy-tour-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the first-visit offer, in the same voice */
.hy-tour-offer p { font: 400 13.5px/1.6 'Inter', system-ui, sans-serif; }

@media (max-width: 600px) {
  .hy-tour-dock { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 34px; }
  .hy-tour-dock .hy-tour-launch { padding: 0 12px 0 10px; }
  .hy-tour-all { padding: 0 12px 0 11px; }
  .hy-tour-offering .hy-tour-dock { visibility: hidden; }
  .hy-tour-t { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hy-tour-dock { transition: none; } }
@media print { .hy-tour-dock { display: none !important; } }
/* "See all tours" sits on its own line above the controls: in the row it
   wrapped to two lines at 360px. */
.hy-tour-card .hy-tour-more {
  display: inline-block; margin: 14px 0 0; padding: 0; height: auto; border: 0; background: none; cursor: pointer;
  font: 600 13px/1.4 'Inter', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #0F5A4F;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.hy-tour-card .hy-tour-more:hover { color: #0A1628; }
.hy-tour-card .hy-tour-more[hidden] { display: none; }

/* ══ WHAT HAPPENS NEXT, ON THE STEP ════════════════════════════ 25 Sep 2026 ══
   Sir: an animation on each tour step of what happens when the instruction
   is followed, where needed. A night stage drawn at 312 by 132 and scaled to
   the card (assets/hyyryn-tour-anim.js). Colours are the site's night theme:
   #0A1628 ground, cream #F3EEE3, gold #D4A943, the pale green of a done
   check. Decorative: the step's words carry the meaning. */
.hy-tour-anim { position: relative; margin: 14px 0 2px; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 0%, #142A51 0%, #0A1628 60%); box-shadow: inset 0 0 0 1px rgba(10,22,40,.08); }
.ta-scene { position: absolute; left: 0; top: 0; width: 312px; height: 132px; transform-origin: 0 0;
  font: 500 10px/1.3 'Inter', system-ui, sans-serif; color: #F3EEE3; }
.ta-scene * { box-sizing: border-box; }
.ta-scene i, .ta-scene em, .ta-scene b { font-style: normal; }
/* how things arrive */
.ta-f { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.ta-slide { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1); }
.ta-drop { opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.ta-pop { opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.ta-slide-x { transform: translateX(-102%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.ta-f.on, .ta-slide.on, .ta-drop.on, .ta-pop.on, .ta-slide-x.on { opacity: 1; transform: none; }
.ta-gone { opacity: 0 !important; pointer-events: none; transition: opacity .2s ease; }
.ta-scene .press { transform: scale(.94); filter: brightness(1.15); }
.ta-scene [class*="ta-btn"], .ta-tile, .ta-pin, .ta-face, .ta-railbtn, .ta-seg span, .ta-tabs span { transition: transform .15s ease, filter .15s ease, background .25s ease, color .25s ease, border-color .25s ease; }
/* the pointer and its press */
.ta-ptr { position: absolute; left: 0; top: 0; width: 14px; height: 14px; z-index: 9; opacity: 0;
  transform: translate(250px,150px); transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.ta-ptr.on { opacity: 1; }
.ta-ptr svg { width: 14px; height: 14px; fill: #F3EEE3; stroke: #0A1628; stroke-width: 1; stroke-linejoin: round; }
.ta-ring { position: absolute; left: 0; top: 0; width: 18px; height: 18px; z-index: 8; border-radius: 50%; border: 1.5px solid #D4A943; opacity: 0; pointer-events: none; }
.ta-ring.go { animation: taRing .45s ease-out; }
@keyframes taRing { from { opacity: .95; scale: .4; } to { opacity: 0; scale: 1.7; } }
.ta-still .ta-ptr, .ta-still .ta-ring { display: none; }
/* parts */
.ta-bar { position: absolute; display: flex; gap: 6px; align-items: center; height: 30px; padding: 0 4px; border-radius: 999px;
  background: rgba(243,238,227,.07); border: 1px solid rgba(243,238,227,.16); }
.ta-field { position: relative; display: inline-block; height: 22px; line-height: 22px; padding: 0 8px; border-radius: 999px;
  background: rgba(243,238,227,.06); overflow: hidden; white-space: nowrap; font-size: 10px; }
.ta-ph { position: absolute; left: 8px; top: 0; color: rgba(243,238,227,.45); transition: opacity .15s; }
.ta-field:has(.ta-ty:not(:empty)) .ta-ph { opacity: 0; }
.is-typing .ta-ty::after { content: ''; display: inline-block; width: 1px; height: 11px; margin-left: 1px; vertical-align: -2px; background: #D4A943; }
.ta-btn { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 10px; border-radius: 999px;
  font: 600 8.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ta-gold { background: #D4A943; color: #0A1628; }
.ta-ghost { box-shadow: inset 0 0 0 1px #D4A943; color: #F3EEE3; }
.ta-row { position: absolute; left: 14px; width: 284px; height: 22px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px; background: rgba(243,238,227,.05); }
.ta-row b { font-weight: 600; } .ta-row em { color: rgba(243,238,227,.6); }
.ta-row .ta-chip { margin-left: auto; }
.ta-av { flex: none; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(#3A4A66,#1D2B44); border: 1px solid rgba(243,238,227,.25); }
.ta-chip { display: inline-block; font: 600 7.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 999px; background: rgba(243,238,227,.1); color: rgba(243,238,227,.8); }
.ta-chip-ok { background: rgba(143,209,184,.16); color: #9FDCC4; }
.ta-grid { position: absolute; left: 14px; top: 14px; width: 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ta-tile { height: 30px; border-radius: 8px; background: rgba(243,238,227,.06); border: 1px solid rgba(243,238,227,.12); display: flex; align-items: center; justify-content: center; font-size: 9.5px; }
.ta-tile-all { color: #D4A943; }
.ta-tile.is-lit { border-color: #D4A943; background: rgba(212,169,67,.16); }
.ta-sheet { position: absolute; left: 164px; top: 14px; width: 134px; height: 104px; border-radius: 10px; background: rgba(243,238,227,.06); border: 1px solid rgba(243,238,227,.12); padding: 10px; }
.ta-k { margin: 0 0 8px; font: 600 8px/1 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #D4A943; }
.ta-line { display: flex; align-items: center; gap: 6px; height: 22px; }
.ta-line i, .ta-kv i, .ta-tr i, .ta-ans i { display: block; height: 6px; border-radius: 3px; background: rgba(243,238,227,.2); }
.ta-acc { position: absolute; left: 14px; width: 284px; min-height: 28px; border-bottom: 1px solid rgba(243,238,227,.12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; font: 400 11px/1.3 'Libre Caslon Text', Georgia, serif; transition: transform .35s ease; }
.ta-acc b { font-weight: 400; }
.ta-plus { color: #D4A943; font: 400 15px/1 'Inter', sans-serif; transition: transform .3s ease; }
.ta-acc.is-open .ta-plus { transform: rotate(45deg); }
.ta-ans { width: 100%; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; }
.ta-acc.is-open .ta-ans { max-height: 44px; padding-bottom: 8px; }
.ta-ans i { margin-top: 6px; height: 5px; }
.ta-ans-on { max-height: none; }
.ta-acc.is-down { transform: translateY(30px); }
.ta-card { position: absolute; border-radius: 10px; background: rgba(243,238,227,.06); border: 1px solid rgba(243,238,227,.14); padding: 10px 12px; }
.ta-card > .ta-chip:not([style]) { position: absolute; right: 12px; top: 12px; }
.ta-ct { display: block; font: 400 12px/1.2 'Libre Caslon Text', Georgia, serif; }
.ta-cs { display: block; margin-top: 3px; color: rgba(243,238,227,.62); }
.ta-kv { display: flex; justify-content: space-between; align-items: center; height: 17px; color: rgba(243,238,227,.7); }
.ta-tick { color: #9FDCC4; } .ta-tick::before { content: '\2713\00a0'; }
.ta-top { position: absolute; left: 0; right: 0; top: 0; height: 34px; border-bottom: 1px solid rgba(243,238,227,.12); }
.ta-logo { position: absolute; left: 14px; top: 13px; width: 40px; height: 8px; border-radius: 2px; background: rgba(243,238,227,.5); }
.ta-face { position: absolute; right: 14px; top: 7px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(#56698C,#26375A); border: 1px solid rgba(243,238,227,.4); }
.ta-menu { position: absolute; right: 14px; top: 40px; width: 150px; padding: 6px; border-radius: 10px; background: #0F1D33; border: 1px solid rgba(243,238,227,.16); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.ta-mrow { display: flex; justify-content: space-between; align-items: center; height: 19px; padding: 0 6px; font-size: 10px; border-radius: 6px; }
.ta-gold-t { color: #D4A943; }
.ta-badge { min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #D4A943; color: #0A1628; font: 700 8px/14px 'Inter', sans-serif; text-align: center; }
.ta-pulse { animation: taPulse 1.4s ease-in-out infinite; }
@keyframes taPulse { 50% { box-shadow: 0 0 0 4px rgba(212,169,67,.25); } }
.ta-railbtn { position: absolute; left: 12px; top: 10px; z-index: 3; width: 22px; height: 20px; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 5px; border-radius: 6px; border: 1px solid rgba(243,238,227,.2); }
.ta-railbtn i { display: block; height: 1.5px; background: #F3EEE3; }
.ta-rail { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; width: 132px; padding: 36px 8px 8px; background: #0F1D33; border-right: 1px solid rgba(243,238,227,.14); }
.ta-rail .ta-mrow { height: 15px; }
.ta-form { position: absolute; left: 14px; top: 14px; width: 284px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.ta-seg { display: inline-flex; height: 22px; border-radius: 999px; border: 1px solid rgba(243,238,227,.2); overflow: hidden; }
.ta-seg span { padding: 0 8px; line-height: 20px; font-size: 9px; }
.ta-seg span.is-lit { background: #D4A943; color: #0A1628; }
.ta-seg-s { position: absolute; left: 100px; top: 108px; }
.ta-thumb { float: left; width: 44px; height: 36px; margin-right: 10px; border-radius: 6px; background: linear-gradient(135deg,#2B3E5C,#16243B); }
.ta-thumb-w { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: 26px; float: none; margin: 0; }
.ta-check { position: absolute; left: 14px; display: flex; align-items: center; gap: 8px; font-size: 11px; transition: opacity .3s ease, transform .3s ease, color .3s ease; }
.ta-box { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(243,238,227,.4); transition: background .25s, border-color .25s; }
.ta-check.is-done { color: rgba(243,238,227,.6); }
.ta-check.is-done .ta-box { background: #9FDCC4; border-color: #9FDCC4; }
.ta-check.is-done .ta-box::after { content: ''; position: absolute; left: 3.5px; top: 1px; width: 4px; height: 7px; border: solid #0A1628; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ta-check.is-gone { opacity: 0; transform: translateY(-6px); }
.ta-note { position: absolute; left: 0; right: 0; margin: 0; text-align: center; font: 400 12px/1.3 'Libre Caslon Text', Georgia, serif; color: #9FDCC4; }
.ta-status { margin: 8px 0 0; font-size: 10px; color: #D4A943; transition: color .3s; }
.ta-status.is-lit { color: #9FDCC4; }
.ta-pic { position: absolute; bottom: 12px; width: 42px; height: 32px; border-radius: 6px; background: linear-gradient(135deg,#3A5176,#1B2A44); border: 1px solid rgba(243,238,227,.2); }
.ta-map { position: absolute; left: 14px; top: 12px; width: 136px; height: 108px; border-radius: 10px; overflow: hidden; background-color: #0F1D33;
  background-image: repeating-linear-gradient(0deg, rgba(243,238,227,.05) 0 1px, transparent 1px 18px), repeating-linear-gradient(90deg, rgba(243,238,227,.05) 0 1px, transparent 1px 18px); }
.ta-map-wide { width: 284px; height: 86px; }
.ta-pin { position: absolute; width: 10px; height: 10px; margin: -10px 0 0 -5px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: rgba(243,238,227,.45); }
.ta-pin.is-lit { background: #D4A943; box-shadow: 0 0 0 4px rgba(212,169,67,.22); }
.ta-me { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #9FDCC4; box-shadow: 0 0 0 3px rgba(159,220,196,.25); }
.ta-pics { display: flex; gap: 4px; margin-top: 8px; }
.ta-pics span { width: 36px; height: 26px; border-radius: 4px; background: linear-gradient(135deg,#3A5176,#1B2A44); }
.ta-radius { position: absolute; left: 150px; top: 62px; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 1px dashed rgba(159,220,196,.6); background: rgba(159,220,196,.07); transition: all .7s cubic-bezier(.16,1,.3,1); }
.ta-radius.is-wide { width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.ta-slider { position: absolute; left: 14px; top: 106px; width: 284px; display: flex; align-items: center; gap: 8px; font-size: 9.5px; }
.ta-track { position: relative; display: block; flex: 1; height: 3px; border-radius: 2px; background: rgba(243,238,227,.2); }
.ta-knob { position: absolute; left: 30%; top: -5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #F3EEE3; transition: left .6s cubic-bezier(.16,1,.3,1), transform .15s; }
.ta-knob.is-wide { left: 62%; }
.ta-slider em { color: #D4A943; min-width: 44px; }
.ta-count { position: absolute; right: 22px; top: 20px; font: 600 9px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #D4A943; }
.ta-bars { position: absolute; left: 14px; right: 14px; top: 12px; height: 88px; display: flex; align-items: flex-end; border-bottom: 1px solid rgba(243,238,227,.14); }
.ta-bars i { display: block; flex: 0 1 0; height: 0; margin: 0; opacity: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#D4A943,#A9822C);
  transition: flex-grow .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1), margin .5s, opacity .3s; }
.ta-bars i.is-in { flex-grow: 1; height: var(--h); margin: 0 3px; opacity: 1; }
.ta-posts { position: absolute; left: 14px; right: 14px; top: 26px; display: flex; justify-content: space-between; }
.ta-posts::before { content: ''; position: absolute; left: 43px; right: 43px; top: 11px; height: 1px; background: rgba(243,238,227,.2); }
.ta-posts span { position: relative; width: 86px; padding-top: 30px; text-align: center; font: 600 8.5px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,238,227,.55); transition: color .3s; }
.ta-posts span::before { content: ''; position: absolute; left: 50%; top: 0; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 1.5px solid rgba(243,238,227,.35); background: #0A1628; transition: border-color .3s, background .3s; }
.ta-posts span.is-lit { color: #D4A943; }
.ta-posts span.is-lit::before { border-color: #D4A943; background: rgba(212,169,67,.18); }
.ta-coin { position: absolute; top: 2px; left: 35px; z-index: 2; height: 14px; padding: 0 6px; border-radius: 999px; background: #D4A943; color: #0A1628; font: 700 9px/14px 'Inter', sans-serif; transition: left .8s cubic-bezier(.65,0,.35,1); }
.ta-coin.is-at1 { left: 134px; } .ta-coin.is-at2 { left: 233px; }
.ta-cap { position: absolute; left: 0; right: 0; top: 92px; margin: 0; text-align: center; font: 400 12px/1.3 'Libre Caslon Text', Georgia, serif; transition: opacity .3s; }
.ta-table { position: absolute; left: 14px; right: 14px; top: 10px; }
.ta-tr { display: flex; justify-content: space-between; align-items: center; height: 24px; border-bottom: 1px solid rgba(243,238,227,.12); font-size: 10px; }
.ta-file { position: absolute; right: 22px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 8.5px; color: rgba(243,238,227,.75); }
.ta-file b { width: 30px; height: 36px; border-radius: 4px; background: #F3EEE3; color: #0F5A4F; font: 700 8px/36px 'Inter', sans-serif; text-align: center; }
.ta-tabs { position: absolute; left: 14px; right: 14px; top: 10px; height: 22px; display: flex; gap: 18px; border-bottom: 1px solid rgba(243,238,227,.14); }
.ta-tabs span { position: relative; font-size: 10.5px; color: rgba(243,238,227,.6); }
.ta-tabs span.is-lit { color: #F3EEE3; }
.ta-tabs span.is-lit::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #D4A943; }
.ta-list { position: absolute; left: 14px; right: 14px; top: 42px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .35s ease; }
.ta-list.is-show { opacity: 1; transform: none; }
.ta-list .ta-line { justify-content: space-between; height: 30px; border-bottom: 1px solid rgba(243,238,227,.1); }
.ta-list .ta-line b { font: 400 11px/1 'Libre Caslon Text', Georgia, serif; } .ta-list .ta-line em { color: rgba(243,238,227,.6); }
.ta-steps { display: flex; gap: 4px; margin-top: 12px; }
.ta-steps span { position: relative; flex: 1; padding-top: 9px; font-size: 8.5px; color: rgba(243,238,227,.55); transition: color .3s; }
.ta-steps span::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px; background: rgba(243,238,227,.18); transition: background .3s; }
.ta-steps span.is-lit { color: #F3EEE3; } .ta-steps span.is-lit::before { background: #D4A943; }
.ta-who { position: absolute; left: 170px; top: 104px; font-size: 9px; color: rgba(243,238,227,.55); }
.ta-stars { display: flex; gap: 3px; }
.ta-stars i { width: 9px; height: 9px; background: #D4A943; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.ta-reply { position: absolute; left: 12px; right: 12px; bottom: 10px; padding: 6px 8px; border-left: 2px solid #D4A943; background: rgba(212,169,67,.08); }
.ta-reply em { display: block; margin-bottom: 3px; font: 600 7.5px/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #D4A943; }
.ta-reply b { font: 400 10.5px/1.2 'Libre Caslon Text', Georgia, serif; }
.ta-wait { position: absolute; left: 14px; top: 10px; margin: 0; font-size: 10px; }
.ta-wait span { color: rgba(243,238,227,.6); } .ta-wait b { font-weight: 600; transition: color .3s; } .ta-wait b.is-lit { color: #D4A943; }
.ta-cols { position: absolute; left: 14px; right: 14px; top: 30px; display: flex; gap: 12px; }
.ta-cols span { flex: 1; padding-bottom: 4px; border-bottom: 1px solid rgba(243,238,227,.14); font: 600 8px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(243,238,227,.6); }
.ta-mark { position: absolute; left: 0; right: 0; top: 48px; text-align: center; font: 600 7.5px/1 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #F0A09A; }
.ta-ev { position: absolute; width: 136px; height: 20px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; background: rgba(243,238,227,.07); font-size: 9.5px; }
.ta-ev .ta-pic { position: static; width: 14px; height: 12px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .ta-scene *, .ta-ptr { transition: none !important; animation: none !important; } }

/* the homeowner's scenes, 26 Sep 2026 */
.ta-stars-pick i { background: rgba(243,238,227,.25); width: 12px; height: 12px; transition: background .2s; }
.ta-stars-pick i.is-lit { background: #D4A943; }
.ta-row.is-lit { background: rgba(212,169,67,.16); box-shadow: inset 0 0 0 1px #D4A943; }

/* 1 Oct 2026: the dock steps aside once the reader is into the page, or a
   dialog has the screen (see hyyryn-tour.js, boot) */
.hy-tour-dock.is-away, .hy-tour-launch.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; transition: opacity 200ms, transform 200ms, visibility 0s 200ms; }

/* 4 Oct 2026: the offer and the tours list step aside while a dialog is open
   (assets/hyyryn-tour.js, awayNow). Last in the file, so it wins over .is-on. */
.hy-tour-offer.is-away, .hy-tour-menu.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms, visibility 0s 200ms; }

/* ══ THE TOUR'S BOXES TAKE THE MENU'S COLOURS, SQUARE ═══════════  5 Oct 2026 ══
   Sir: "square off the tall box, and use the same colour scheme you use for
   the profile menu in the marketplace", the tall box being the list of tours,
   and "I do like the hints and touches of gold".

   The list, the offer and the step card are now the account menu's panel
   (hyyryn-account.css, THE MENU IN THE MARKETPLACE'S NIGHT COLOURS): square,
   the night body #0B1220, a gold frame, and where a box has a heading, the
   lit navy head with the gold rule along its top. Buttons stay pills. "Take
   the tour" keeps Sir's 25 Sep ruling (gold outline, the box's own fill), and
   Next is the same button, so the two read as one action. The dock is a pill
   and a control, so it keeps its shape and takes the colours.

   Records keeps its own (the cheque paper in hyyryn-records.css): every rule
   here is written for a page without the Records head. */
html:not(:has(.rec-head)) .hy-tour-offer,
html:not(:has(.rec-head)) .hy-tour-card,
html:not(:has(.rec-head)) .hy-tour-menu {
  border-radius: 0; border: 0; background: #0B1220; color: #F3EEE3;
  box-shadow: inset 0 3px 0 #D4A943, inset 0 0 0 1px rgba(212,169,67,.32),
              0 30px 60px -24px rgba(2,6,14,.85), 0 2px 6px rgba(2,6,14,.45);
}

/* the offer */
html:not(:has(.rec-head)) .hy-tour-offer { padding: 20px 22px 18px; }
html:not(:has(.rec-head)) .hy-tour-offer b { color: #D4A943; }
html:not(:has(.rec-head)) .hy-tour-offer p { color: rgba(243,238,227,.88); }

/* the buttons: gold outline on the box's own night for the way in, a quiet
   cream outline for the way out */
html:not(:has(.rec-head)) .hy-tour-go,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-next {
  background: transparent; color: #F3EEE3; border: 1.5px solid #D4A943; border-radius: 999px;
}
html:not(:has(.rec-head)) .hy-tour-go:hover,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-next:hover { background: rgba(212,169,67,.14); }
html:not(:has(.rec-head)) .hy-tour-no,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-back {
  background: transparent; color: rgba(243,238,227,.86); border: 1px solid rgba(243,238,227,.28); border-radius: 999px;
}
html:not(:has(.rec-head)) .hy-tour-no:hover,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-back:hover { border-color: rgba(243,238,227,.6); color: #FFFFFF; }
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-close { color: rgba(243,238,227,.62); }
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-close:hover { color: #FFFFFF; }
html:not(:has(.rec-head)) .hy-tour-offer button:focus-visible,
html:not(:has(.rec-head)) .hy-tour-card button:focus-visible { outline: 2px solid #D4A943; outline-offset: 3px; }

/* the step card: its kicker, count and title are the lit head */
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-top {
  margin: -22px -24px 0; padding: 22px 24px 0;
  background: #132A4F radial-gradient(140% 200% at 100% 0%, rgba(212,169,67,.12), transparent 60%);
  box-shadow: inset 0 3px 0 #D4A943, inset 1px 0 0 rgba(212,169,67,.32), inset -1px 0 0 rgba(212,169,67,.32);
}
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-t {
  margin: 0 -24px 16px; padding: 12px 24px 18px; color: #F3EEE3;
  background: #132A4F; border-bottom: 1px solid rgba(212,169,67,.24);
  box-shadow: inset 1px 0 0 rgba(212,169,67,.32), inset -1px 0 0 rgba(212,169,67,.32);
}
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-k { color: #D4A943; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-n { color: rgba(243,238,227,.66); }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-x { color: rgba(243,238,227,.86); }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-more { color: #E3C578; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-more:hover { color: #FFFFFF; }
/* the night stage inside the card: square, framed in gold so it does not
   sink into the night around it */
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-anim { border-radius: 0; box-shadow: inset 0 0 0 1px rgba(212,169,67,.28); }

/* the list of tours: its title and line are the lit head, the rows are the
   menu's rows */
html:not(:has(.rec-head)) .hy-tour-menu { padding: 0 0 6px; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-t {
  margin: 0; padding: 22px 22px 4px; color: #F3EEE3;
  background: #132A4F radial-gradient(140% 260% at 100% 0%, rgba(212,169,67,.12), transparent 60%);
  box-shadow: inset 0 3px 0 #D4A943, inset 1px 0 0 rgba(212,169,67,.32), inset -1px 0 0 rgba(212,169,67,.32);
}
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-k {
  margin: 0 0 6px; padding: 0 22px 18px; color: rgba(243,238,227,.66);
  background: #132A4F; border-bottom: 1px solid rgba(212,169,67,.24);
  box-shadow: inset 1px 0 0 rgba(212,169,67,.32), inset -1px 0 0 rgba(212,169,67,.32);
}
html:not(:has(.rec-head)) .hy-tour-menu button {
  border-radius: 0; padding: 13px 22px; color: #F3EEE3;
  transition: background .15s ease, box-shadow .15s ease;
}
html:not(:has(.rec-head)) .hy-tour-menu li + li button { box-shadow: inset 0 1px 0 rgba(243,238,227,.07); }
html:not(:has(.rec-head)) .hy-tour-menu button:hover { background: rgba(212,169,67,.07); box-shadow: inset 3px 0 0 #D4A943; }
html:not(:has(.rec-head)) .hy-tour-menu button:focus-visible { outline: 2px solid #D4A943; outline-offset: -2px; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-n { color: #F3EEE3; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-s { color: rgba(243,238,227,.62); }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-n em { color: #E3C578; background: rgba(212,169,67,.14); }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-i { border-color: rgba(212,169,67,.55); color: #E3C578; }
html:not(:has(.rec-head)) .hy-tour-menu li:first-child .hy-tour-menu-i { background: #D4A943; border-color: #D4A943; color: #0A1628; }

/* the dock: a pill, in the same night with the same gold */
html:not(:has(.rec-head)) .hy-tour-dock,
html:not(:has(.rec-head)) .hy-tour-launch:not(.hy-tour-dock .hy-tour-launch) {
  background: #0B1220; border: 1px solid rgba(212,169,67,.55); color: #F3EEE3;
  box-shadow: 0 10px 28px rgba(2,6,14,.45);
}
html:not(:has(.rec-head)) .hy-tour-dock .hy-tour-launch,
html:not(:has(.rec-head)) .hy-tour-all { color: #F3EEE3; }
html:not(:has(.rec-head)) .hy-tour-launch svg { stroke: #D4A943; }
html:not(:has(.rec-head)) .hy-tour-dock .hy-tour-launch:hover,
html:not(:has(.rec-head)) .hy-tour-all:hover,
html:not(:has(.rec-head)) .hy-tour-all[aria-expanded="true"] { background: rgba(212,169,67,.12); }
html:not(:has(.rec-head)) .hy-tour-all { border-left-color: rgba(212,169,67,.32); }
html:not(:has(.rec-head)) .hy-tour-all-n { background: #D4A943; color: #0A1628; }

/* ══ THE TOUR, ROUNDED, ON THE SETTINGS CARD'S GRAMMAR ═══════════ 20 Oct 2026 (rp164) ══
   Sir, 20 Oct: "improve the tour feature. Just make sure the tour feature is
   working properly on all pages that have the tour feature". The walk of every
   tour (hyyryn-tour.js, place) fixed where the card goes; this is how it looks.
   On 5 Oct the tour took the account menu's square night with a gold bar along
   its head; the account menu is rounded today (hyyryn-account.css, rp164), so the
   tour follows it: the card, the offer and the list of tours are the menu's
   panel (a 24px corner, a gold hairline all round, the night lit from the top
   right, a long soft shadow), each head is its own rounded plate inside an 8px
   margin, the rows are rounded and lit by a tint, never a bar down a side. New:
   the dots in the head, one a step, the one you are on drawn long.
   The ring takes a rounded corner to match the cards it now rings, with a soft
   gold halo; a ring cut to fit (.is-cut) loses its lower corners and fades, so
   the part reads as going on under the card.
   Records keeps its own paper (hyyryn-records.css), as before: its dots and its
   cut ring are drawn in its colours at the foot of this block. */
.hy-tour-dots { display: flex; gap: 5px; margin: 12px 0 0; }
.hy-tour-dots[hidden] { display: none; }
.hy-tour-dots span { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(10,22,40,.16);
  transition: width .3s cubic-bezier(.2,.9,.25,1), background-color .3s ease; }
.hy-tour-dots span.is-done { background: rgba(15,90,79,.45); }
.hy-tour-dots span.is-at { width: 20px; background: #0F5A4F; }
.hy-tour-ring.is-cut { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hy-tour-ring.is-cut::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(rgba(4,9,15,0), rgba(4,9,15,.55)); }

html:not(:has(.rec-head)) .hy-tour-ring { border-radius: 20px;
  box-shadow: 0 0 0 2px #D4A943, 0 0 0 7px rgba(212,169,67,.16), 0 0 0 9999px rgba(4,9,15,.58); }
html:not(:has(.rec-head)) .hy-tour-card,
html:not(:has(.rec-head)) .hy-tour-offer,
html:not(:has(.rec-head)) .hy-tour-menu {
  border-radius: 24px;
  background: radial-gradient(120% 55% at 100% 0%, rgba(212,169,67,.11), rgba(212,169,67,0) 55%), linear-gradient(180deg, #0F1A2E 0%, #0B1220 46%) #0B1220;
  box-shadow: inset 0 0 0 1px rgba(212,169,67,.26), inset 0 1px 0 rgba(255,255,255,.07),
              0 44px 80px -30px rgba(2,6,14,.85), 0 4px 12px rgba(2,6,14,.35);
}

/* the step card: the head a plate, the words and the film inside the margin */
html:not(:has(.rec-head)) .hy-tour-card { padding: 8px 8px 16px; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-head {
  margin: 0 0 14px; padding: 16px; border-radius: 18px;
  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;
  box-shadow: inset 0 0 0 1px rgba(212,169,67,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-top { margin: 0; padding: 0; align-items: center; background: none; box-shadow: none; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-t { margin: 10px 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-n {
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  background: rgba(243,238,227,.08); box-shadow: inset 0 0 0 1px rgba(243,238,227,.10); }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-x { padding: 0 16px; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-anim { margin: 14px 16px 2px; border-radius: 14px; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-more { margin: 14px 16px 0; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-nav { margin-top: 16px; padding: 0 10px 0 16px; }
html:not(:has(.rec-head)) .hy-tour-dots span { background: rgba(243,238,227,.2); }
html:not(:has(.rec-head)) .hy-tour-dots span.is-done { background: rgba(212,169,67,.5); }
html:not(:has(.rec-head)) .hy-tour-dots span.is-at { background: #D4A943; }

/* the offer */
html:not(:has(.rec-head)) .hy-tour-offer { padding: 20px 20px 18px; border-radius: 22px; }
html:not(:has(.rec-head)) .hy-tour-offer b {
  display: flex; width: max-content; align-items: center; gap: 7px; margin-bottom: 8px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(212,169,67,.14); }
html:not(:has(.rec-head)) .hy-tour-offer b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html:not(:has(.rec-head)) .hy-tour-offer p { font-size: 14px; }

/* the list of tours: the head a plate, the rows rounded */
html:not(:has(.rec-head)) .hy-tour-menu { padding: 8px; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-head {
  margin: 0 0 6px; padding: 16px 16px 14px; border-radius: 18px;
  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;
  box-shadow: inset 0 0 0 1px rgba(212,169,67,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-t,
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-k { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-k { margin-top: 4px; }
html:not(:has(.rec-head)) .hy-tour-menu button { margin: 1px 0; padding: 11px 12px; border-radius: 14px; }
html:not(:has(.rec-head)) .hy-tour-menu li + li button { box-shadow: none; }
html:not(:has(.rec-head)) .hy-tour-menu button:hover { background: rgba(243,238,227,.07); box-shadow: none; }
html:not(:has(.rec-head)) .hy-tour-menu button:hover .hy-tour-menu-i { border-color: #D4A943; background: rgba(212,169,67,.16); }
html:not(:has(.rec-head)) .hy-tour-menu li:first-child button:hover .hy-tour-menu-i { background: #D4A943; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-i { width: 28px; height: 28px; margin-top: -3px; }
html:not(:has(.rec-head)) .hy-tour-menu button:focus-visible { outline-offset: 0; }

/* the dock lifts a little under the pointer, as the cards do */
html:not(:has(.rec-head)) .hy-tour-dock:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(2,6,14,.5); }

/* Records: its own paper, its own dots */
html:has(.rec-head) .hy-tour-dots span { background: rgba(42,13,16,.16); }
html:has(.rec-head) .hy-tour-dots span.is-done { background: rgba(131,99,44,.5); }
html:has(.rec-head) .hy-tour-dots span.is-at { background: #83632C; }
html:has(.rec-head) .hy-tour-card .hy-tour-head { margin-bottom: 12px; }
html:has(.rec-head) .hy-tour-ring.is-cut::after { background: linear-gradient(rgba(6,4,4,0), rgba(6,4,4,.6)); }

@media (max-width: 600px) {
  html:not(:has(.rec-head)) .hy-tour-card { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hy-tour-dots span { transition: none; } html:not(:has(.rec-head)) .hy-tour-dock:hover { transform: none; } }
@media (forced-colors: active) {
  .hy-tour-card, .hy-tour-offer, .hy-tour-menu { border: 1px solid CanvasText; }
  .hy-tour-dots span { background: GrayText; } .hy-tour-dots span.is-at { background: Highlight; }
}

/* ══ THE TOUR IN DAYLIGHT, WITH A NAVY HEAD ══════════════════════  20 Oct 2026 (rp168) ══
   The account menu became a cream panel with a navy head plate (Sir's choice,
   hyyryn-account.css rp168), and the tour follows it, as Sir chose: the step
   card, the list of tours and the first-visit offer are cream panels with the
   card's edge; the card's and the list's heads stay the navy plate with their
   gold; the words are navy and ink; Next and "Take the tour" are navy pills,
   Back and "No thanks" outlined; the film keeps its night stage, inset. The
   dock is a cream glass pill. Records keeps its own paper. */
html:not(:has(.rec-head)) .hy-tour-card,
html:not(:has(.rec-head)) .hy-tour-offer,
html:not(:has(.rec-head)) .hy-tour-menu {
  background: radial-gradient(120% 50% at 100% 0%, rgba(212,169,67,.06), rgba(212,169,67,0) 55%), linear-gradient(180deg, #FCFBF7 0%, #F7F4EC 100%) #F7F4EC;
  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,.10), 0 18px 40px -18px rgba(10,22,40,.40), 0 50px 90px -40px rgba(10,22,40,.50);
}
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-head,
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-head {
  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:not(:has(.rec-head)) .hy-tour-card .hy-tour-x { color: #2B3443; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-more { color: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-card .hy-tour-more:hover { color: #83632C; }
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-close { color: #5B6472; }
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-close:hover { color: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-go,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-next { background: #0A1628; color: #FAF8F3; border: 1.5px solid #0A1628; }
html:not(:has(.rec-head)) .hy-tour-go:hover,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-next:hover { background: #152238; border-color: #152238; box-shadow: 0 0 0 3px rgba(212,169,67,.30); }
html:not(:has(.rec-head)) .hy-tour-no,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-back { background: #FFFFFF; color: #0A1628; border: 1px solid rgba(10,22,40,.20); }
html:not(:has(.rec-head)) .hy-tour-no:hover,
html:not(:has(.rec-head)) .hy-tour-nav .hy-tour-back:hover { border-color: #0A1628; color: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-offer button:focus-visible,
html:not(:has(.rec-head)) .hy-tour-card button:focus-visible { outline: 2px solid #0A1628; outline-offset: 3px; }
/* the offer's words */
html:not(:has(.rec-head)) .hy-tour-offer b { color: #83632C; background: rgba(212,169,67,.16); }
html:not(:has(.rec-head)) .hy-tour-offer p { color: #2B3443; }
/* the list's rows */
html:not(:has(.rec-head)) .hy-tour-menu button { color: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-menu button:hover { background: rgba(10,22,40,.05); }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-n { color: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-s { color: #5B6472; }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-n em { color: #83632C; background: rgba(212,169,67,.16); }
html:not(:has(.rec-head)) .hy-tour-menu .hy-tour-menu-i { border-color: rgba(10,22,40,.22); color: #0A1628; background: #FFFFFF; }
html:not(:has(.rec-head)) .hy-tour-menu li:first-child .hy-tour-menu-i { background: #0A1628; border-color: #0A1628; color: #FAF8F3; }
html:not(:has(.rec-head)) .hy-tour-menu button:hover .hy-tour-menu-i { border-color: #0A1628; background: #EFEAE0; }
html:not(:has(.rec-head)) .hy-tour-menu li:first-child button:hover .hy-tour-menu-i { background: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-menu button:focus-visible { outline: 2px solid #0A1628; }
/* the dock: a cream glass pill */
html:not(:has(.rec-head)) .hy-tour-dock,
html:not(:has(.rec-head)) .hy-tour-launch:not(.hy-tour-dock .hy-tour-launch) {
  background: rgba(250,248,243,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(10,22,40,.14); color: #0A1628; box-shadow: 0 10px 26px -10px rgba(10,22,40,.40); }
html:not(:has(.rec-head)) .hy-tour-dock .hy-tour-launch,
html:not(:has(.rec-head)) .hy-tour-all { color: #0A1628; }
html:not(:has(.rec-head)) .hy-tour-launch svg { stroke: #83632C; }
html:not(:has(.rec-head)) .hy-tour-dock .hy-tour-launch:hover,
html:not(:has(.rec-head)) .hy-tour-all:hover,
html:not(:has(.rec-head)) .hy-tour-all[aria-expanded="true"] { background: rgba(10,22,40,.06); }
html:not(:has(.rec-head)) .hy-tour-all { border-left-color: rgba(10,22,40,.12); }
html:not(:has(.rec-head)) .hy-tour-all-n { background: #0A1628; color: #FAF8F3; }
html:not(:has(.rec-head)) .hy-tour-dock:hover { box-shadow: 0 14px 32px -10px rgba(10,22,40,.45); }

/* rp181, 21 Oct 2026 (the phone sweep): on a phone the offer was a card of three lines and two buttons, 147px, over
   the foot of the page until it was answered. One row now: "New here?" and the two buttons, about 60px. The sentence
   stays for a screen reader. Doubled class: the night offer's own rules (html:not(:has(.rec-head)) ...) weigh 0,2,2. */
@media (max-width: 600px) {
  html body .hy-tour-offer.hy-tour-offer { top: auto; left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; }
  html body .hy-tour-offer.hy-tour-offer p { flex: 1 1 auto; min-width: 0; font-size: 0; line-height: 0; }
  html body .hy-tour-offer.hy-tour-offer p b { margin: 0; font-size: 10.5px; line-height: 1.3; }
  html body .hy-tour-offer.hy-tour-offer .hy-tour-row { margin-top: 0; flex: none; gap: 6px; }
  html body .hy-tour-offer.hy-tour-offer .hy-tour-row button { height: 36px; padding: 0 12px; }
}

/* rp189, 21 Oct 2026: the homeowner's dashboard (html.ovh, hyyryn-home-overview.css) sets the offer's top, so with
   rp181's foot the one-row offer stretched from under the cover to the foot of the screen: a blank card over the whole
   page on a phone, live since rp181. The row's own top is auto (above). And on that page the tour's pill sat on the
   side panel's bar (64 to 112px): on a phone it stands under the bar, on the cover, as at a desk. */
@media (max-width: 760px) {
  html.ovh .hy-tour-dock.hy-tour-dock { top: calc(var(--bar, 64px) + 60px); }
  html.ovh .hy-tour-menu.hy-tour-menu { top: calc(var(--bar, 64px) + 108px); }
}

/* rp200, 22 Oct 2026 (the phone pass): the trade's dashboard is built as the homeowner's (rp189), so on a phone its
   pill stands under the side panel's bar on the cover too; at the foot of the first screen it sat on the money tile's
   line ("£909 more held for work on now"). */
@media (max-width: 760px) {
  html.has-drawer:not(.ovh):has(.ov-cover) .hy-tour-dock.hy-tour-dock { top: calc(var(--bar, 64px) + 60px); }
  html.has-drawer:not(.ovh):has(.ov-cover) .hy-tour-menu.hy-tour-menu { top: calc(var(--bar, 64px) + 108px); }
}