/* 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; }

/* ---------------------------------------------------------------- portrait (the default)
   A 64px top bar, and the four destinations along the bottom where a thumb reaches. */
.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; }

.sh-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex;
  height: 76px;
  /* 8px of it is the safe-area pad the ticket asks for, and on a device that reports a real
     inset we use that instead, so the labels clear the home indicator. */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--hc-surface-1); border-top: 1px solid var(--hc-border);
}
.sh-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  position: relative;
  color: var(--hc-text-muted); text-decoration: none; font-size: 14px; font-weight: 700;
}
.sh-tab svg { width: 24px; height: 24px; }
.sh-tab[aria-current="page"] { color: var(--hc-accent); }
/* The active line sits on the TOP edge of the tab, not the bottom: the bottom is the screen. */
.sh-tab[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hc-accent);
}
.sh-tab:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: -4px; }

/* Nothing hides behind the tab bar. */
.sh-main { padding-bottom: 110px; }

/* ---------------------------------------------------------------- landscape
   600 to 1023, or any short landscape screen. A bottom bar would eat a third of a 390px-tall
   phone, so the destinations go up the left instead. */
@media (min-width: 600px) and (max-width: 1023px),
       (max-height: 499px) and (orientation: landscape) and (max-width: 1023px) {
  .sh-tabs { display: none; }
  .sh-main { padding-bottom: var(--hc-8); }

  .sh-body { display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto 1fr; }
  /* 774 follow-up: the pages mount the shell into <div id="shell">, and as a grid item that div
     took the 92px rail column, so the top bar (Ask, the account menu) was squeezed out of sight
     at tablet widths. display: contents lets the rail and the bar be the grid's own items. */
  #shell { display: contents; }
  .sh-top { grid-column: 2; grid-row: 1; }
  .sh-body > main { grid-column: 2; grid-row: 2; min-width: 0; }
  .sh-rail-nav {
    display: flex; flex-direction: column; align-items: center; gap: var(--hc-2);
    grid-row: 1 / 3; grid-column: 1;
    width: 92px; padding-block: var(--hc-4);
    background: var(--hc-surface-1); border-right: 1px solid var(--hc-border);
    position: sticky; top: 0; height: 100vh; height: 100dvh;
  }
  .sh-rail-mark {
    display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--hc-3);
    border-radius: var(--hc-radius-control); background: var(--hc-accent); color: var(--hc-on-accent);
    font-family: var(--hc-font-head); font-weight: 600; text-decoration: none;
  }
  .sh-rail-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 76px; height: 60px; border-radius: var(--hc-radius-control);
    color: var(--hc-text-muted); text-decoration: none; font-size: 13px; font-weight: 700;
  }
  .sh-rail-link svg { width: 22px; height: 22px; }
  .sh-rail-link[aria-current="page"] { background: var(--hc-surface-2); color: var(--hc-accent); }
  .sh-rail-link:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }

  /* The top bar shrinks and gains the page title, because the rail has no room for one. */
  .sh-top { height: 56px; }
  .sh-title { display: block; font-family: var(--hc-font-title); font-size: calc(20px * var(--hc-scale-title)); font-weight: var(--hc-weight-head); margin: 0; }
  .sh-top .hc-brand { display: none; }   /* the mark is on the rail now */
}

/* ---------------------------------------------------------------- desktop
   One 76px bar carries everything: logo, the four destinations, search, Ask and the avatar. */
@media (min-width: 1024px) {
  .sh-tabs { display: none; }
  .sh-main { padding-bottom: var(--hc-12); }
  .sh-top { height: 76px; gap: var(--hc-6); }
  .sh-title { display: none; }

  .sh-desk-nav { display: flex; align-items: center; gap: var(--hc-2); }
  .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;
  }
  .sh-desk-link svg { width: 20px; height: 20px; }
  .sh-desk-link:hover { color: var(--hc-text); }
  .sh-desk-link[aria-current="page"] { color: var(--hc-accent); }
  .sh-desk-link[aria-current="page"]::after {
    content: ""; position: absolute; left: var(--hc-3); right: var(--hc-3); bottom: -2px;
    height: 3px; background: var(--hc-accent); border-radius: 2px;
  }
  .sh-desk-link:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: 2px; }
}
@media (max-width: 1023px) { .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-panel {
  width: min(320px, 100vw);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border);
  border-radius: var(--hc-radius-card); overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.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); }
.sh-acct-item:focus-visible { outline: 2px solid var(--hc-accent); outline-offset: -2px; }
.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::backdrop { background: transparent; }
}
@media (min-width: 1024px) { .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 and a quiet indeterminate bar shows instead. Pure CSS, so it is there from first paint. */
.sh-body[data-loading] > main, .sh-body[data-loading] > .sh-tabs { visibility: hidden; }
.sh-body[data-loading]::after {
  content: ''; position: fixed; top: 50%; left: 50%; width: 160px; height: 3px; margin: -2px 0 0 -80px;
  border-radius: 3px; background: linear-gradient(90deg, transparent 0, var(--hc-accent) 50%, transparent 100%) var(--hc-surface-2);
  background-size: 50% 100%; background-repeat: no-repeat; animation: sh-load 1.4s ease-in-out infinite;
}
@keyframes sh-load { from { background-position: -100% 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .sh-body[data-loading]::after { animation: none; background-position: 50% 0; } }

/* 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. */
.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); } }

/* 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; }