/* HyperCurio — HC-400: the frame every logged-in page sits in, and HC-401: the account menu.
 *
 * Four destinations, in this order everywhere: Home, Dashboard, Collection, Insights. The chrome
 * that carries them is completely different in each layout, and that is the point of this file.
 *
 * The one structural decision worth explaining. All three navigations are in the DOM at once and
 * CSS decides which is visible, rather than JavaScript rebuilding the bar on resize. The
 * acceptance criterion is "rotating a phone switches between tab bar and rail without losing the
 * page or scroll position", and the cheapest way to satisfy that is to never touch the DOM: a
 * media query flip changes nothing about the document, so the scroll position is simply still
 * there. Rebuilding the nav on an orientation event is how you lose it.
 *
 * Portrait is the default here and the other two are the media queries, because portrait is the
 * layout with the least room and the one that breaks first if it is treated as an afterthought.
 */

/* ---------------------------------------------------------------- shared */
.sh-body { min-height: 100vh; min-height: 100dvh; }

/* The logo, the Ask pill and the avatar appear in all three top bars, so they are styled once. */
.sh-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--hc-surface-2); border: 1px solid var(--hc-border);
  color: var(--hc-text); font-family: var(--hc-font-head); font-size: 17px; font-weight: 600;
  cursor: pointer; flex: 0 0 auto;
}
.sh-avatar:hover { border-color: var(--hc-text-muted); }
.sh-topright { display: flex; align-items: center; gap: var(--hc-3); margin-left: auto; min-width: 0; }

/* Desktop search. Not in the other two layouts: there is nowhere to put 340px of input on a
   phone, and the ticket only asks for it here. */
.sh-search { position: relative; width: 340px; flex: 0 1 340px; min-width: 180px; }   /* shrinks before the avatar is pushed off the edge at 1024-1300px */
.sh-search input {
  width: 100%; min-height: 44px; padding: 0 var(--hc-4) 0 44px;
  border-radius: 999px; border: 1px solid var(--hc-border);
  background: var(--hc-surface-1); color: var(--hc-text); font: inherit; font-size: 15px;
}
.sh-search input::placeholder { color: var(--hc-text-disabled); }
.sh-search input:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
.sh-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hc-text-muted); pointer-events: none; }

/* ---------------------------------------------------------------- HC-1625 / HC-1626: the three navigations
   The breakpoints are the mockup's (Implementation Guide 3.3): a bottom tab bar below 760px, a 92px left rail from 760 to
   1119px, the links in the top bar from 1120px. They are layout, not theme: every theme gets the same structure and the
   brand layer only recolours it. Collection and the item page draw their own top bar but take these same three navs
   (HCShell.nav, body.sh-ownbar), so a destination looks and sits the same on every page. */

/* ---- phone, below 760px (the default): a 64px top bar, and the five destinations along the bottom. */
.sh-top {
  display: flex; align-items: center; gap: var(--hc-3);
  height: 64px; padding-inline: var(--hc-pad);
  background: var(--hc-bg); border-bottom: 1px solid var(--hc-border);
  position: sticky; top: 0; z-index: 30;
}
.sh-title { display: none; }

.sh-rail-nav { display: none; }
.sh-desk-nav { display: none; }

/* Five equal columns, 22px icons over 11px labels, the bar clear of the home indicator. Alan, 17 Oct, on his phone: the
   labels at 14px bold did not fit five across ("Scout" ran off the right edge). At 11px "Collection" and "Dashboard"
   fit a 72px column, which is a 360px-wide phone. */
.sh-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--hc-surface-1); border-top: 1px solid var(--hc-border);
}
.sh-tab {
  min-width: 0; min-height: 60px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 9px 2px; position: relative;
  color: var(--hc-text-muted); text-decoration: none; font-size: 11px; font-weight: 700; line-height: 1.15;
}
.sh-tab svg { width: 22px; height: 22px; }
.sh-tab .sh-nl { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-tab[aria-current="page"] { color: var(--hc-accent); }
/* The current line sits on the TOP edge of the tab, centred, not the bottom: the bottom is the screen. */
.sh-tab[aria-current="page"]::before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: var(--hc-accent);
}
.sh-tab:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: -4px; }

/* Nothing hides behind the tab bar: 120px plus the home indicator (3.3). */
.sh-main { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
body.sh-ownbar { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* HC-1625 5.2: the nav badge. Ignite, mono, the count of new deals; only Scout ever has one. 18px on the rail and the
   tab bar, sitting on the icon's corner; 20px inline after the word in the top bar. */
.sh-nbadge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--hc-action, #FF7A1A); color: var(--hc-on-action, #060A17);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 700; line-height: 1;
}
.sh-nbadge[hidden] { display: none; }
.sh-nbadge { white-space: nowrap; }   /* 1525: the real count, "1,240", stays on one line */
.sh-tab .sh-nbadge, .sh-rail-link .sh-nbadge { position: absolute; top: 4px; right: calc(50% - 24px); min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; }

/* ---- tablet, 760 to 1119px: the rail. */
@media (min-width: 760px) {
  .sh-tabs { display: none; }
  .sh-main { padding-bottom: var(--hc-12); }
  body.sh-ownbar { padding-bottom: 0; }
  .sh-rail-nav {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 31;
    width: 92px; padding: calc(14px + env(safe-area-inset-top, 0px)) 8px 14px; overflow-y: auto;
    background: var(--hc-surface-1); border-right: 1px solid var(--hc-border);
  }
  .sh-rail-mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--hc-4); border-radius: 50%; flex: none; text-decoration: none; }
  .sh-rail-mark img { width: 48px; height: 48px; display: block; filter: drop-shadow(0 0 10px rgba(34, 184, 255, .45)); }
  .sh-rail-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    position: relative; flex: none; width: 76px; min-height: 64px; padding: 10px 0;
    border-radius: var(--hc-radius-control);
    color: var(--hc-text-muted); text-decoration: none; font-size: 12px; font-weight: 700; line-height: 1.15; text-align: center;
  }
  .sh-rail-link svg { width: 22px; height: 22px; }
  .sh-rail-link:hover { color: var(--hc-text); }
  .sh-rail-link[aria-current="page"] { background: var(--hc-surface-2); color: var(--hc-accent); box-shadow: inset 0 0 0 1px var(--hc-border); }
  .sh-rail-link:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }

  /* Everything else moves over by the rail's width. */
  .sh-body { padding-left: 92px; }
  body.sh-ownbar { padding-left: 92px; }
  /* The mark is on the rail now; the top bar gains the page title. */
  .sh-top .hc-brand, body.sh-ownbar .co-topbar .hc-brand, body.sh-ownbar .it-topbar .hc-brand { display: none; }
  .sh-title { display: block; font-family: var(--hc-font-title); font-size: calc(20px * var(--hc-scale-title)); font-weight: var(--hc-weight-title); margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---- desktop, 1120px and up: one 76px bar carries the logo, the five destinations, + Add, Ask and the avatar. */
@media (min-width: 1120px) {
  .sh-rail-nav { display: none; }
  .sh-body, body.sh-ownbar { padding-left: 0; }
  .sh-top .hc-brand, body.sh-ownbar .co-topbar .hc-brand, body.sh-ownbar .it-topbar .hc-brand { display: inline-flex; }
  .sh-top { height: 76px; gap: var(--hc-5); }
  .sh-title { display: none; }

  .sh-desk-nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; }
  .co-topnav.sh-desk-nav, .it-topnav.sh-desk-nav { gap: 2px; }   /* 873: the same spacing on the pages with their own bar */
  .sh-desk-link {
    display: inline-flex; align-items: center; gap: var(--hc-2);
    position: relative; min-height: 44px; padding-inline: var(--hc-3);
    color: var(--hc-text-muted); text-decoration: none; font-size: 15px; font-weight: 700; white-space: nowrap;
  }
  .sh-desk-link svg { width: 20px; height: 20px; }
  .sh-desk-link:hover { color: var(--hc-text); }
  /* Current: the word in ink, the icon and a 3px underline in the accent (the mockup's .topnav). */
  .sh-desk-link[aria-current="page"] { color: var(--hc-text); }
  .sh-desk-link[aria-current="page"] svg { color: var(--hc-accent); }
  .sh-desk-link[aria-current="page"]::after {
    content: ""; position: absolute; left: var(--hc-3); right: var(--hc-3); bottom: -1px;
    height: 3px; background: var(--hc-accent); border-radius: 3px 3px 0 0;
  }
  .sh-desk-link:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
}
/* 1120 to 1279px: five links, + Add, Ask HyperCurio and the avatar are a tight fit beside the logo, so the links drop their
   small icons there (the words stay), as the old bar did from 1024. */
@media (min-width: 1120px) and (max-width: 1279px) { .sh-desk-nav .sh-desk-link > svg { display: none; } }

/* The Ask pill: "Ask" below 1120px, "Ask HyperCurio" from 1120px (5.3), in every top bar. */
.sh-top .hc-btn--assistant .hc-from-lg, .co-topbar .hc-btn--assistant .hc-from-lg, .it-topbar .hc-btn--assistant .hc-from-lg { display: none; }
.sh-top .hc-btn--assistant .hc-to-lg, .co-topbar .hc-btn--assistant .hc-to-lg, .it-topbar .hc-btn--assistant .hc-to-lg { display: inline; }
@media (min-width: 1120px) {
  .sh-top .hc-btn--assistant .hc-from-lg, .co-topbar .hc-btn--assistant .hc-from-lg, .it-topbar .hc-btn--assistant .hc-from-lg { display: inline; }
  .sh-top .hc-btn--assistant .hc-to-lg, .co-topbar .hc-btn--assistant .hc-to-lg, .it-topbar .hc-btn--assistant .hc-to-lg { display: none; }
}

/* The help button and toasts stay above the tab bar (HC-1626). */
@media (max-width: 759px) {
  .tk-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (min-width: 760px) { .tk-fab { bottom: var(--hc-5) !important; } }

@media (max-width: 1119px) { .sh-search { display: none; } }

/* ---------------------------------------------------------------- HC-401: the account menu
   A dropdown where there is room and a bottom sheet on portrait, which is the same rule the rest
   of the product follows. <dialog> on portrait so Escape and the backdrop are the browser's job;
   a positioned panel on the wider layouts, where a modal over the whole screen would be wrong
   for a six-item menu. */
.sh-acct { border: 0; padding: 0; background: none; --sh-acct-top: 8px; max-height: none; overflow: visible; }
/* menu1019 (Alan, 19 Oct, staff account on a Mac): the two staff translation items made the menu taller than his screen,
   and the panel could not scroll, so Safari rubber-banded it back and Log out was out of reach. The panel now stops at
   the bottom of the screen (dvh where the browser has it, vh before) and scrolls inside itself without moving the page;
   Log out is pinned to its foot, so it is always on screen. The dialog's own UA max-height/overflow are switched off so
   only the panel scrolls. */
.sh-acct-panel {
  width: min(320px, 100vw);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-card); overflow: hidden auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - var(--sh-acct-top) - 12px);
  max-height: calc(100dvh - var(--sh-acct-top) - 12px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.sh-acct-out { position: sticky; bottom: 0; z-index: 1; background: var(--hc-surface-1); }
/* menu1019: set on <html> while the menu is open, when the page scrolls (see mount in hc-shell.js). */
html.sh-acct-lock { overflow: hidden; scrollbar-gutter: stable; }
.sh-acct-who { padding: var(--hc-4) var(--hc-5); border-bottom: 1px solid var(--hc-border); }
/* 978 (Terry): a <dialog> brings the browser's own black text colour, so the name (the one line with no
   colour of its own) read near-black on the dark panel. White and bold; the username sits under it. */
.sh-acct-name { font-weight: 700; color: var(--hc-text); }
.sh-acct-user { color: var(--hc-text); font-size: 14px; margin-top: 2px; }
.sh-acct-mail { color: var(--hc-text-muted); font-size: 14px; word-break: break-all; }
.sh-acct-list { list-style: none; margin: 0; padding: var(--hc-2); }
.sh-acct-item {
  display: flex; align-items: center; gap: var(--hc-3);
  width: 100%; min-height: 48px; padding-inline: var(--hc-3);
  border: 0; border-radius: var(--hc-radius-control); background: none;
  color: var(--hc-text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
.sh-acct-item:hover { background: var(--hc-surface-2); }
/* admin1018: the item for the page you are on. */
.sh-acct-item[aria-current="page"] { background: var(--hc-surface-2); box-shadow: inset 3px 0 0 var(--hc-accent); }
.sh-acct-item:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: -2px; }
/* #1962: the menu itself holds focus after a click. #1962 again (Terry, 5 Nov: "Now the entire Account menu has a focus ring when you
   tap the user's avatar icon"): HyperCurio Dark rings every :focus-visible with outline !important (hc-brand-lord-alan.css), and
   Safari counts the menu as :focus-visible after a tap, so the plain rule lost. The menu's own id, !important, wins; its items keep the ring. */
#shAcct:focus, #shAcct:focus-visible { outline: none !important; box-shadow: none !important; }
.sh-acct-item svg { width: 20px; height: 20px; color: var(--hc-text-muted); }
.sh-acct-sub { display: block; color: var(--hc-text-muted); font-size: 13px; }
.sh-acct-sep { height: 1px; margin: var(--hc-2) var(--hc-3); background: var(--hc-border); }
/* 923 (Terry's agent): every item is one style; leaving is set apart below the separator and in its own colour. */
#shLogout, #shLogout svg { color: var(--hc-bad); }

/* Portrait: a sheet off the bottom edge. */
@media (max-width: 599px) {
  .sh-acct { width: 100vw; max-width: 100vw; margin: auto 0 0; }
  .sh-acct::backdrop { background: var(--hc-scrim); }
  .sh-acct-panel { width: 100vw; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0; border-bottom: 0; }
}
/* Landscape and desktop: anchored under the avatar. `position: fixed` rather than absolute
   because the dialog is top-layer, so it is positioned against the viewport either way. */
@media (min-width: 600px) {
  .sh-acct { position: fixed; inset: auto var(--hc-pad) auto auto; top: 68px; margin: 0; --sh-acct-top: 68px; }
  .sh-acct::backdrop { background: transparent; }
}
@media (min-width: 1120px) { .sh-acct { top: 84px; --sh-acct-top: 84px; } }

/* ---------------------------------------------------------------- placeholder destinations
   Dashboard, Collection and Insights have their own tickets and their own mockups. Until those
   land they are real routes using this shell, which is what HC-400 asks for, rather than dead
   links that make the nav untestable. */
.sh-placeholder { display: grid; place-items: center; gap: var(--hc-4); padding: var(--hc-16) var(--hc-pad); text-align: center; }
.sh-placeholder h1 { font-family: var(--hc-font-display); font-size: var(--hc-h1); margin: 0; }
.sh-placeholder p { color: var(--hc-text-muted); max-width: 44ch; margin: 0; }

/* 735: a profile photo, when there is one, replaces the initial. */
.sh-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.sh-avatar:has(img) { padding: 0; overflow: hidden; }

/* 763 (Terry): the Dashboard drew twice, an empty frame and then the real page. A page that has
   to fetch before it can draw marks its body data-loading; until HCShell.mount runs, the page is
   hidden (#960 K below says what shows instead). */
.sh-body[data-loading] > main, .sh-body[data-loading] > .sh-tabs { visibility: hidden; }
/* #960 K (Terry's "Never Blank": "Never a full-page spinner"; "under 150 ms, nothing. 150 ms to 1 s, hairline. Over 1 s, section
   skeletons"). The bar in the middle of an empty page is gone. Under 150 ms nothing shows; then the 2 px gold hairline runs along
   the top, where the bar is about to be; past 1 s hc-shell.js puts up the section skeletons (.sh-skel). The hairline is still
   pure CSS, so it is there from first paint. */
.sh-body[data-loading]::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--hc-accent) 50%, transparent 100%) no-repeat;
  background-size: 30% 100%; opacity: 0;
  animation: sh-hair-on 1ms linear 150ms forwards, sh-load 1.1s cubic-bezier(.2, .8, .2, 1) infinite;
}
@keyframes sh-hair-on { to { opacity: 1; } }
@keyframes sh-load { from { background-position: -50% 0; } to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) { .sh-body[data-loading]::after { animation: sh-hair-on 1ms linear 150ms forwards; background: var(--hc-accent); opacity: 0; } }
.sh-skel { display: grid; gap: var(--hc-4); max-width: var(--hc-max, 1328px); margin: 0 auto; padding: 0 var(--hc-pad) var(--hc-6, 24px); animation: sh-skel-in 300ms cubic-bezier(.2, .8, .2, 1) both; }
.sh-skel i { display: block; border-radius: var(--hc-radius-card, 14px); background: linear-gradient(100deg, var(--hc-surface-1) 30%, var(--hc-surface-2) 50%, var(--hc-surface-1) 70%) 0 0 / 300% 100%; animation: sh-shimmer 1.4s linear infinite; }
.sh-skel .sk-bar { height: 64px; border-radius: 0; margin: 0 calc(-1 * var(--hc-pad)) var(--hc-4); background: var(--hc-surface-1); animation: none; border-bottom: 1px solid var(--hc-border); }
.sh-skel .sk-h { height: 34px; width: min(360px, 60%); border-radius: 8px; }
.sh-skel .sk-p { height: 14px; width: min(520px, 85%); border-radius: 6px; }
.sh-skel .sk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--hc-3); }
.sh-skel .sk-row i { height: 112px; }
.sh-skel .sk-wide { height: 220px; }
@media (min-width: 1120px) { .sh-skel .sk-bar { height: 76px; } }
@keyframes sh-skel-in { from { opacity: 0; } }
@keyframes sh-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sh-skel, .sh-skel i { animation: none; } }

/* ---------------------------------------------------------------- #960 K: View Switching, "Never Blank"
   Terry, 10 Oct: "views swap directly with no blank flash (good)", but "the indicators do not slide", no hairline, no fade and
   8 px slide, no thumbnail-to-hero morph. These rules were in hc-motion.css, which most pages only get once HCShell.mount has
   run, after the browser has decided there is no transition (the new page has to say so before its first frame). Home and Scout
   never had one. Here, in the stylesheet every shell page links in its head, every page change takes part.
   K2: the old view fades out while the new one slides 8 px in from the side of its tab (180 ms). The top bar, the rail and the
   tab bar are their own layers, so they hold still and only the view moves; the type the old page adds as it leaves
   (hc-motion.js, pageswap) says which way: hc-back for a tab to the left, and for Back. */
@view-transition { navigation: auto; }
.sh-top, .co-topbar, body.sh-ownbar .it-topbar, .it-shared .it-topbar { view-transition-name: hc-top; }
.sh-tabs { view-transition-name: hc-tabs; }
.sh-rail-nav { view-transition-name: hc-rail; }
::view-transition-group(hc-top), ::view-transition-group(hc-tabs), ::view-transition-group(hc-rail) { animation-duration: 180ms; }
::view-transition-old(root) { animation: hcVtOut 180ms cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-new(root) { animation: hcVtIn 180ms cubic-bezier(.2, .8, .2, 1) both; }
html:active-view-transition-type(hc-back)::view-transition-new(root) { animation-name: hcVtInBack; }
@keyframes hcVtOut { to { opacity: 0; } }
@keyframes hcVtIn { from { opacity: 0; transform: translateX(8px); } }
@keyframes hcVtInBack { from { opacity: 0; transform: translateX(-8px); } }
/* K "Never Blank": Home, Dashboard and Insights hide everything until they know who you are (763, data-loading), so their first frame is
   empty, and a plain cross-fade went from the old view to nothing. Arriving at one of them, the old view holds (and the hairline
   shows under its bar past 150 ms) until the page is drawn; then hc-shell.js (ready) moves these on to their last 180 ms, the same
   fade and 8 px slide. A page still not drawn after 1 s lets go and shows its skeletons. hc-motion.js adds the hc-hold type. */
html:active-view-transition-type(hc-hold)::view-transition-old(*), html:active-view-transition-type(hc-hold)::view-transition-old(root) { animation: hcVtHoldOut 1180ms linear both; }
html:active-view-transition-type(hc-hold)::view-transition-new(*), html:active-view-transition-type(hc-hold)::view-transition-new(root) { animation: hcVtHoldIn 1180ms linear both; }
html:active-view-transition-type(hc-hold):active-view-transition-type(hc-back)::view-transition-new(root) { animation-name: hcVtHoldInBack; }
html:active-view-transition-type(hc-hold)::view-transition-group(hc-top) { animation: hcVtHoldHair 1180ms linear both; }
/* The bar these pages draw at mount arrives after the layers were taken, so it is part of the view, not a layer of its own (a named
   element with no layer is left out of the picture: the bar went missing for the last 180 ms). */
html:active-view-transition-type(hc-hold) :is(.sh-top, .sh-tabs, .sh-rail-nav) { view-transition-name: none; }
@keyframes hcVtHoldOut { 84.7% { opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .2, 1); } to { opacity: 0; } }
@keyframes hcVtHoldIn { 0%, 84.7% { opacity: 0; transform: translateX(8px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } to { opacity: 1; transform: none; } }
@keyframes hcVtHoldInBack { 0%, 84.7% { opacity: 0; transform: translateX(-8px); animation-timing-function: cubic-bezier(.2, .8, .2, 1); } to { opacity: 1; transform: none; } }
@keyframes hcVtHoldHair { 0%, 12.6% { box-shadow: 0 2px 0 transparent; } 12.7%, 100% { box-shadow: 0 2px 0 var(--hc-accent); } }
/* A browser that cannot run a transition between pages gets the same 180 ms on the view as it arrives (hc-shell.js, arrive()). */
.hc-vt-in { animation: hcVtIn 180ms cubic-bezier(.2, .8, .2, 1) both; }
.hc-vt-in.hc-vt-back { animation-name: hcVtInBack; }
/* K1: the current-tab mark slides from the tab you left to the one you tapped, the moment you tap it, and on the new page carries
   on from where it had got to (hc-shell.js, navSlide). The mark is the tab bar's top line, the top bar's underline and the rail's
   tile; the rail's tile is drawn as a layer while it slides so it can move. */
.sh-tab.hc-ind-slide::before, .sh-desk-link.hc-ind-slide::after, .sh-rail-link.hc-ind-slide::before { animation: hcIndSlide var(--hc-ind-dur, 240ms) cubic-bezier(.2, .8, .2, 1) both; }
.sh-rail-link.hc-ind-slide[aria-current="page"] { background: transparent; box-shadow: none; }
.sh-rail-link.hc-ind-slide[aria-current="page"]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--hc-surface-2); box-shadow: inset 0 0 0 1px var(--hc-border); }
@keyframes hcIndSlide { from { transform: translate(var(--hc-ind-dx, 0px), var(--hc-ind-dy, 0px)) scale(var(--hc-ind-sx, 1), var(--hc-ind-sy, 1)); } }
/* "Reduced motion: instant swap, hairline only." */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .hc-vt-in, .sh-tab.hc-ind-slide::before, .sh-desk-link.hc-ind-slide::after, .sh-rail-link.hc-ind-slide::before { animation: none !important; }
}

/* 789: the account menu hangs from the avatar on the wider layouts; it does not dim the page there. */
@media (min-width: 600px) { .sh-acct::backdrop { background: transparent; } }
/* 903: Scan in the top bar, beside Ask. Icon-only on a phone, where the bar has no room for words.
   14 Oct: + Add (Alan) is the same button in the same place: sh-add, styled alike. */
.sh-add { width: auto; min-height: 44px; padding: 0 var(--hc-4); gap: 6px; font-size: 15px; flex: none; text-decoration: none; }
@media (max-width: 599px) { .sh-add span { display: none; } .sh-add { padding: 0; width: 44px; justify-content: center; } }
.sh-scan { width: auto; min-height: 44px; padding: 0 var(--hc-4); gap: 6px; font-size: 15px; }
@media (max-width: 599px) { .sh-scan span { display: none; } .sh-scan { padding: 0 var(--hc-3); } }

/* #1304 (Terry, 18 Oct): the ? button (Ask HyperCurio, a cyan ring) and the Quick actions hamburger, between the destinations
   and the avatar in every top bar. Open, the hamburger keeps its icon and lights cyan; the page behind dims, the bar does not. */
.sh-help, .sh-qbtn {
  flex: none; display: inline-grid; place-items: center; height: 44px; padding: 0; cursor: pointer; font: inherit;
}
.sh-help {
  width: 44px; border-radius: 50%; background: transparent;
  border: 2px solid var(--hc-assistant); color: var(--hc-assistant); font-size: 20px; font-weight: 800; line-height: 1;
}
.sh-help:hover { background: color-mix(in srgb, var(--hc-assistant) 10%, transparent); }
.sh-qbtn {
  width: 52px; border-radius: var(--hc-radius-control, 12px);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border); color: var(--hc-text);
}
.sh-qbtn svg { width: 24px; height: 24px; stroke-width: 2.2; }
.sh-qbtn:hover { border-color: var(--hc-text-muted); }
.sh-qbtn[aria-expanded="true"] {
  color: var(--hc-assistant); border: 2px solid var(--hc-assistant);
  background: color-mix(in srgb, var(--hc-assistant) 14%, var(--hc-surface-2));
}
.sh-help:focus-visible, .sh-qbtn:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 3px; }
.co-topright .sh-help, .co-topright .sh-qbtn { margin: 0; }
body.sh-ownbar .it-topbar .sh-help { margin-left: auto; }

.sh-qdim { position: fixed; inset: 0; z-index: 32; background: var(--hc-scrim); }
.sh-qdim[hidden], .sh-quick[hidden] { display: none; }
body.sh-qopen header.sh-top, body.sh-qopen header.co-topbar, body.sh-qopen header.it-topbar { z-index: 34; }   /* header: beats hc-item.css's body.sh-ownbar .it-topbar */
.sh-quick {
  position: fixed; z-index: 35; box-sizing: border-box; padding: var(--hc-4) var(--hc-3) var(--hc-3);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card, 16px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45); color: var(--hc-text);
}
/* The caret, under the hamburger (hc-shell.js sets --sh-caret). */
.sh-quick::before {
  content: ""; position: absolute; top: -7px; left: calc(var(--sh-caret, 50%) - 7px); width: 12px; height: 12px;
  background: var(--hc-surface-1); border-left: 1px solid var(--hc-border); border-top: 1px solid var(--hc-border); transform: rotate(45deg);
}
.sh-quick-h {
  padding: 0 var(--hc-3) var(--hc-2); color: var(--hc-text-muted);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.sh-quick-list { list-style: none; margin: 0; padding: 0; }
.sh-quick-item {
  display: flex; align-items: center; gap: var(--hc-3); min-height: 64px; padding: var(--hc-2) var(--hc-3);
  border-radius: var(--hc-radius-control, 12px); color: var(--hc-text); text-decoration: none;
}
.sh-quick-item:hover { background: var(--hc-surface-2); }
.sh-quick-item:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: -2px; }
.sh-quick-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--hc-radius-control, 12px); background: var(--hc-surface-2); }
.sh-quick-ico svg { width: 24px; height: 24px; }
.sh-quick-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-quick-t { display: inline-flex; align-items: center; gap: var(--hc-2); font-family: var(--hc-font-title); font-weight: 700; font-size: 18px; line-height: 1.2; }
.sh-quick-p { color: var(--hc-text-muted); font-size: 14px; line-height: 1.3; }
/* The Home cards' accents (hc-home.css 1299). */
.sh-quick--add .sh-quick-ico { color: var(--hc-accent); }
.sh-quick--appraise .sh-quick-ico { color: #F49A3F; }
.sh-quick--find .sh-quick-ico { color: #7AAAFF; }
.sh-quick--scout .sh-quick-ico { color: #4CC38A; }
@media (prefers-reduced-motion: no-preference) {
  .sh-quick:not([hidden]) { animation: sh-qin .14s ease-out; }
  @keyframes sh-qin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* 993: the frame of a collection photo whose file failed to load (hc-shell.js marks it). */
.hc-photo-missing { position: relative; }
.hc-photo-missing::after { content: 'Photo missing'; position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; text-align: center; font-size: 12px; color: var(--hc-text-muted); pointer-events: none; }

/* HC-1631 (stage 2): HCShell.toast's base, so it reads under any theme; the HyperCurio look is in hc-components.css. */
.hc-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--hc-surface-2); color: var(--hc-text); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-control); }
.hc-toast[hidden] { display: none; }
.hc-toast .hc-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 760px) { .hc-toast { bottom: 28px; } }

/* 18 Oct (Alan: "should the top banner (header) of the website be fixed as someone scrolls?"; Terry: "As some pages could have
   massively long scrolls, I would vote yes"). The bar was already position: sticky, but sticky only holds inside its parent, and
   its parent was the short #shell wrapper (rail + bar + account menu), so it scrolled away with it. Taking the wrapper out of
   the layout makes the page itself the parent, and the bar stays at the top on every shell page, desktop and phone. */
#shell { display: contents; }
/* menu1019: the staff "Show untranslated text" switch (Admin settings > Translations; Account > Appearance for plan testers). */
.hc-i18n-switch-note { color: var(--hc-text-muted); font-size: 14px; margin: var(--hc-2) 0 0; }