/* HyperCurio rev5 shell (#1858 HC-R5-01): the top nav, the phone header, the tab bar and the landscape rail. Theme tokens only
   (no color, font family or radius values; circles are 50%). Every rule is under [data-rev5="1"] body.r5n-on, which hc-r5-shell.js
   sets only once it has drawn its nav, so with the preview off nothing here applies and the v4 nav is exactly as it was.

   The four layouts are SPEC-01 §3, and CSS alone switches between them (rotating never touches the DOM, so the scroll position and
   any open panel stay):
     phone landscape  (max-height: 499.98px) and (orientation: landscape)                      header + left rail
     phone portrait   width < 600 and not phone landscape                                       header + bottom tab bar
     tablet           600 to 1023px and not phone landscape                                     top nav, Ask / Add / account on row 2
     desktop          1024px and wider and not phone landscape                                  top nav in one row */

.r5n-top, .r5n-dock { display: none; }

/* ---------- v4's bars step aside (they stay in the page: the account menu and Quick actions code still find their parts) ---------- */
[data-rev5="1"] body.r5n-on .sh-top, [data-rev5="1"] body.r5n-on .sh-tabs, [data-rev5="1"] body.r5n-on .sh-rail-nav,
[data-rev5="1"] body.r5n-on .co-topbar, [data-rev5="1"] body.r5n-on .it-topbar, [data-rev5="1"] body.r5n-on .co-bottomnav,
[data-rev5="1"] body.r5n-on .sh-quick, [data-rev5="1"] body.r5n-on .sh-qdim { display: none !important; }
[data-rev5="1"] body.r5n-on { padding-left: 0; padding-bottom: 0; }

/* #2141: the item page's sticky bar sits directly under this header (--r5n-h is set by hc-r5-shell.js) */
@media (min-width: 1024px) { [data-rev5="1"] body.r5n-on .it-actions { top: var(--r5n-h, 65px); } }

/* ---------- shared parts ---------- */
[data-rev5="1"] body.r5n-on .r5n-top {
  display: block; position: sticky; top: 0; z-index: 30;
  background: var(--hc-surface-1); border-bottom: 1px solid var(--hc-border); color: var(--hc-text);
  view-transition-name: hc-top;
}
.r5n-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-sizing: border-box;
  max-width: 1280px; margin: 0 auto; padding: 10px 24px;
}
.r5n-logo { display: inline-flex; align-items: center; flex: none; height: 44px; min-width: 44px; border-radius: var(--hc-radius-control); }
.r5n-logo img { display: block; height: 44px; width: auto; }
.r5n-logo:focus-visible, .r5n-tab:focus-visible, .r5n-d:focus-visible, .r5n-acct:focus-visible, .r5n-askbtn:focus-visible { outline: 2px solid var(--hc-focus); outline-offset: 2px; }
.r5n-slot:empty { display: none; }
.r5n-i { width: 18px; height: 18px; flex: none; }
.r5n-spark { color: var(--hc-assistant); }

/* six tabs: an 18px icon and a 14px label */
.r5n-tabs { display: flex; align-items: center; gap: 2px; flex: none; }
.r5n-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
  border-radius: var(--hc-radius-control); color: var(--hc-text-muted); text-decoration: none;
  font-family: var(--hc-font-body); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.r5n-tab:hover { color: var(--hc-text); }
.r5n-tab[aria-current="page"] { color: var(--hc-text); font-weight: 600; background: var(--hc-surface-2); }
.r5n-tab .r5n-b { margin-left: 2px; white-space: nowrap; }

.r5n-end { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
/* the Ask bar fills what is left, never under 320px (below that the whole group wraps to row 2) */
.r5n-ask {
  position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 320px; margin: 0;
  min-height: 44px; box-sizing: border-box;
  background: var(--hc-field); border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-control);
}
.r5n-ask:focus-within { outline: 2px solid var(--hc-focus); outline-offset: 2px; }
.r5n-ask .r5n-spark { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.r5n-askin {
  flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0 14px 0 42px; box-sizing: border-box;
  border: 0; background: transparent; color: var(--hc-text); border-radius: var(--hc-radius-control);
  font-family: var(--hc-font-body); font-size: var(--hc-body-size); text-overflow: ellipsis;
}
.r5n-askin::placeholder { color: var(--hc-text-muted); opacity: 1; }
.r5n-askin:focus { outline: none; }
.r5n-add { flex: none; min-height: 44px; }
.r5n-add .r5n-i { width: 18px; height: 18px; }

/* the account button: initials or the photo in a circle */
.r5n-acct {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; overflow: hidden;
  border-radius: 50%; border: 1px solid var(--hc-border-control); background: var(--hc-surface-2); color: var(--hc-text);
  font-family: var(--hc-font-label); font-weight: var(--hc-weight-label); font-size: 14px; cursor: pointer;
}
.r5n-acct img { width: 100%; height: 100%; object-fit: cover; }

/* the phone header's labeled Ask button (sparkle in --hc-assistant, "Ask" in the label role) */
.r5n-askbtn {
  display: none; align-items: center; gap: 6px; margin-left: auto; height: 36px; padding: 0 14px; box-sizing: border-box; position: relative;
  border: 1px solid var(--hc-border-control); border-radius: var(--hc-radius-control); background: var(--hc-surface-2); color: var(--hc-text);
  font-family: var(--hc-font-label); font-weight: 600; font-size: var(--hc-body-size); cursor: pointer;
}

/* the dock: the tab bar on a phone held upright, the rail when it is turned */
.r5n-d {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; min-height: 44px;
  margin: 0; padding: 0; border: 0; background: none; color: var(--hc-text-muted); text-decoration: none; cursor: pointer;
  font-family: var(--hc-font-label); font-weight: 600; letter-spacing: -0.1px; line-height: 1.15;
  /* Terry (1 Nov): tab and rail labels 11px at least; the theme's label size less a pixel, never under 11px */
  font-size: max(11px, calc(var(--hc-label-size) - 1px));
}
.r5n-d[aria-current="page"] { color: var(--hc-accent); }
.r5n-l { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r5n-di { position: relative; display: inline-flex; }
.r5n-di .r5n-b { position: absolute; left: 14px; top: -7px; min-width: 18px; white-space: nowrap; }
.r5n-pc { display: grid; place-items: center; border-radius: 50%; background: var(--hc-accent); color: var(--hc-on-accent); }
.r5n-plus .r5n-pi { width: 28px; height: 28px; }

/* #2178 (Terry, 10 Nov): on desktop the HyperCurio logo IS Home (it sits where the Home tab began), so the Home tab goes. Tablet and phone keep it. */
@media (min-width: 1024px) and (min-height: 500px), (min-width: 1024px) and (orientation: portrait) {
  .r5n-tab[data-r5n-id="home"] { display: none; }
}
/* ---------- desktop and tablet: the top nav ---------- */
@media (min-width: 600px) and (min-height: 500px), (min-width: 600px) and (orientation: portrait) {
  [data-rev5="1"] body.r5n-on .r5n-dock { display: none; }
}
/* desktop 1024 to 1279: a little tighter so one row holds a 320px Ask bar */
@media (min-width: 1024px) and (max-width: 1279.98px) and (min-height: 500px), (min-width: 1024px) and (max-width: 1279.98px) and (orientation: portrait) {
  .r5n-in { padding: 10px 16px; gap: 8px 10px; }
  .r5n-tab { padding: 0 8px; gap: 5px; }
  .r5n-end { gap: 10px; }
}
/* ...and from 1024 to 1179 the six labels without their icons: logo, six icons and labels, a 320px Ask bar, + Add and the account
   button need about 1,140px, so here the icons give way rather than the row (v4 did the same at 1120 to 1279) */
@media (min-width: 1024px) and (max-width: 1179.98px) and (min-height: 500px), (min-width: 1024px) and (max-width: 1179.98px) and (orientation: portrait) {
  .r5n-tab > .r5n-i { display: none; }
  .r5n-tab { padding: 0 9px; }
}
/* tablet: row 1 is the logo and the six tabs, row 2 the Ask bar, Add and account */
@media (min-width: 600px) and (max-width: 1023.98px) and (min-height: 500px), (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  .r5n-in { padding: 8px 16px 12px; gap: 8px; }
  .r5n-tabs { flex: 1 1 auto; justify-content: flex-start; }
  .r5n-tab { padding: 0 8px; gap: 5px; }
  .r5n-end { flex-basis: 100%; }
  [data-rev5="1"] body.r5n-on .tk-fab { bottom: var(--hc-5, 24px) !important; }
}

/* ---------- phones: the header (portrait and landscape) ---------- */
@media (max-width: 599.98px), (max-height: 499.98px) and (orientation: landscape) {
  .r5n-in { flex-wrap: nowrap; gap: 8px; min-height: 56px; padding: 8px 16px; }
  .r5n-logo, .r5n-logo img { height: 40px; }
  .r5n-tabs, .r5n-ask, .r5n-add { display: none; }
  .r5n-end { display: contents; }
  .r5n-askbtn { display: inline-flex; }
  .r5n-acct { width: 36px; height: 36px; }
  /* 44pt hit areas for the 36pt controls */
  .r5n-acct::after, .r5n-askbtn::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
  .r5n-acct { overflow: visible; }
  .r5n-acct img { border-radius: 50%; }
}

/* ---------- phone portrait: the tab bar ---------- */
@media (max-width: 599.98px) and (min-height: 500px), (max-width: 599.98px) and (orientation: portrait) {
  [data-rev5="1"] body.r5n-on .r5n-top { padding-top: env(safe-area-inset-top, 0px); }
  [data-rev5="1"] body.r5n-on .r5n-dock {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 64px repeat(3, minmax(0, 1fr)); align-items: stretch;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-sizing: border-box;
    height: calc(56px + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--hc-surface-1); border-top: 1px solid var(--hc-border);
    view-transition-name: hc-tabs;
  }
  .r5n-d { gap: 4px; padding: 6px 1px 5px; }
  .r5n-d .r5n-i { width: 24px; height: 24px; }
  /* the center +: a 60pt circle raised 32pt above the bar, a 4pt ring in the page color, "Add" under it */
  .r5n-plus { justify-content: flex-end; }
  .r5n-plus .r5n-pc { position: absolute; left: 50%; top: -33px; width: 60px; height: 60px; transform: translateX(-50%); box-shadow: 0 0 0 4px var(--hc-bg), var(--hc-glow, 0 0 0 transparent); }
  /* content scrolls under the bar; the last thing on the page stays clear of it and of the raised + */
  [data-rev5="1"] body.r5n-on { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  [data-rev5="1"] body.r5n-on .sh-main { padding-bottom: 24px; }
  [data-rev5="1"] body.r5n-on .tk-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  [data-rev5="1"] body.r5n-on .hc-toast { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- phone landscape: the rail ---------- */
@media (max-height: 499.98px) and (orientation: landscape) {
  [data-rev5="1"] body.r5n-on .r5n-dock {
    display: flex; flex-direction: column; justify-content: space-evenly; align-items: stretch;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; box-sizing: border-box; overflow-y: auto;
    width: calc(64px + env(safe-area-inset-left, 0px));
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--hc-surface-1); border-right: 1px solid var(--hc-border);
    view-transition-name: hc-tabs;
  }
  .r5n-d { gap: 2px; padding: 2px 2px; flex: 0 1 auto; }
  .r5n-d .r5n-i { width: 22px; height: 22px; }
  .r5n-plus .r5n-pc { width: 44px; height: 44px; }
  /* the badge sits over the icon's top right, inside the rail even at "12,345" */
  .r5n-di .r5n-b { left: calc(50% + 8px); top: -8px; transform: translateX(-50%); }
  .r5n-plus .r5n-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* the rail sits on the left; the content keeps 44pt on the right (the notch can be on either side) and 21pt for the home indicator */
  [data-rev5="1"] body.r5n-on {
    padding-left: calc(64px + env(safe-area-inset-left, 0px));
    padding-right: max(44px, env(safe-area-inset-right, 0px));
    padding-bottom: max(21px, env(safe-area-inset-bottom, 0px));
  }
  [data-rev5="1"] body.r5n-on .sh-main { padding-bottom: 24px; }
  [data-rev5="1"] body.r5n-on .tk-fab { bottom: max(21px, env(safe-area-inset-bottom, 0px)) !important; right: max(44px, env(safe-area-inset-right, 0px)) !important; }
  [data-rev5="1"] body.r5n-on .hc-toast { bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
}

/* ---------- full-screen flows: the camera/scan view, the Ask sheet, checkout (HCShellR5.hide(true), or a full-screen rev5 sheet) ---------- */
[data-rev5="1"] body.r5n-on.r5n-full .r5n-dock, [data-rev5="1"] body.r5n-on.r5n-full .r5n-top,
[data-rev5="1"] body.r5n-on:has(dialog.r5-sheet--full[open]) .r5n-dock { display: none !important; }
[data-rev5="1"] body.r5n-on.r5n-full { padding-left: 0; padding-bottom: 0; }

/* ---------- #1923: the loading bar (hc-r5-shell.js busy / ready) ---------- */
/* One thin bar across the top of the screen while a page waits past half a second; drawn from first paint, before the nav (so it is
   scoped to the flag only). The v4 hairlines (hc-shell.css data-loading, hc-motion.js .hc-hairline) step aside for it with rev5 on:
   the shell counts their waits instead, so there is one indicator, not three. Reduced motion: no travel, the bar fills the width and
   pulses gently. Tokens only. */
[data-rev5="1"] .r5n-busy {
  position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 60; height: 3px; overflow: hidden; pointer-events: none;
  background: var(--hc-surface-2);
}
[data-rev5="1"] .r5n-busy[hidden], html:not([data-rev5="1"]) .r5n-busy { display: none; }
[data-rev5="1"] .r5n-busy > i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--hc-accent);
  animation: r5n-busy 1.2s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes r5n-busy { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes r5n-busy-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [data-rev5="1"] .r5n-busy > i { width: 100%; transform: none; animation: r5n-busy-pulse 2s ease-in-out infinite; }
}
/* #1923: while a page waits for its content (busy 'page'), the footer and Supplies' one-line placeholder are held back, so nothing on
   screen is pushed down when the content lands (they were 0.26 to 0.87 of layout shift on Scout, Shop and Supplies); the bar says
   the page is loading */
[data-rev5="1"] body.r5n-on.r5n-wait .sh-foot, [data-rev5="1"] body.r5n-on.r5n-wait .sp-loading { visibility: hidden; }
/* #1923: the v4 loading hairlines, while rev5 is on (the shell's bar above takes their waits) */
[data-rev5="1"] .sh-body[data-loading]::after, [data-rev5="1"] .hc-hairline { display: none !important; }

/* #1923: section skeletons for rev5 pages (Home's value card, Up next, Recently added): a quiet block in the card colors, shimmering
   unless reduced motion is asked for. Sized by the page to match what replaces it. */
[data-rev5="1"] .r5-skel {
  display: block; border-radius: var(--hc-radius-control); background: var(--hc-surface-2);
  background-image: linear-gradient(100deg, var(--hc-surface-2) 30%, var(--hc-surface-1) 50%, var(--hc-surface-2) 70%);
  background-size: 300% 100%; animation: r5-skel 1.4s linear infinite;
}
@keyframes r5-skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { [data-rev5="1"] .r5-skel { animation: none; background-image: none; } }

/* ---------- Account > Appearance: the preview switch ---------- */
.r5n-pref { margin-top: 16px; }
.r5n-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; color: var(--hc-text); font-weight: 600; }
.r5n-switch input { width: 20px; height: 20px; accent-color: var(--hc-accent); margin: 0; }
.r5n-adm { margin-top: 12px; }
.r5n-admrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.r5n-admrow .hc-input { flex: 1 1 220px; min-width: 0; width: auto; }