/* LAYOUT_CARDS header (Steven's sketches 1 and 3, COO hands 2026-10-12).
   Behind the LAYOUT_CARDS flag only: components/_layout_cards_header.html
   (signed in, from base.html) and the brand slot of feed/_market_header.html
   (logged out). Nothing here applies with the flag off.

   The bar is the public Toll Bench bar (.market-topbar in pages/start-home.css:
   black, 64px, the white pill on the right). The pill and the menu are the
   public header's own components; their rules live in pages/start-home.css,
   which base.html does not load, so they are repeated here scoped to
   .lc-header with the same tokens and measurements. */

/* The shell grid (layout.css .app-shell) with the rail and sidebar columns
   gone: this header in the topbar row, the page under it. */
.app-shell.app-shell--layout-cards {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topbar"
    "main";
}
/* Phones: drawer pages (/wants and the rest) run in the window's scroll with
   the drawer in normal flow (layout.css body.drawer-layout, "main" only).
   The header keeps its row above it and sticks to the top. */
@media (max-width: 767px) {
  body.drawer-layout .app-shell.app-shell--layout-cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "topbar"
      "main";
  }
}

.lc-header {
  grid-area: topbar;
  position: sticky;
  top: 0;
  z-index: var(--z-overlay, 300);   /* above sticky page bars (want tabs), under modals and slide-over panels */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-16);
  padding: var(--space-3) var(--space-4);
  box-sizing: border-box;
  border-bottom: 1px solid var(--color-dark-700);
  background: var(--color-dark-900);
}

/* The target mark (components/_toll_mark.html): the rail's Wants disc and
   its purple badge, rail-nav.css. Here it only needs a box for the badge to
   hang off, upper right. */
.lc-header__mark,
.market-brand__mark {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  text-decoration: none;
}
.lc-header__mark { margin-right: var(--space-2); }   /* room for the badge */
.lc-header__mark .lc-mark__badge {
  top: calc(-1 * var(--space-1));
  right: calc(-1 * var(--space-2));
}

/* "TOLL Bench", the wordmark's own face and weight, and under it, left
   aligned, "BETA . CERTIFY AI WORK" in the small mono caps the Beta tag and
   tagline wear (pages/start-home.css .market-beta-tag / .market-tagline).
   CERTIFY AI WORK is the certification badge (Steven 2026-10-13,
   components/certified-badge.css, size sm, 14px tall): the name and the
   badge stand 2px apart, so the brand is the pill's 40px and the bar keeps
   its height. */
.lc-header__name {
  flex: 0 1 auto;
  margin-right: auto;
  text-decoration: none;
}
.lc-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--space-1) / 2);
}
.market-brand__name {
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold, 800);
  line-height: 1;
  white-space: nowrap;
}
.lc-header__name:hover .market-brand__name { color: var(--color-yellow-400); }
.lc-brand__sub {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-1) * .75);
  color: var(--color-yellow-400);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) * .75);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.market-topbar .market-brand { gap: var(--space-2); }

/* The public pill (pages/start-home.css .market-pill), scoped. */
.lc-header .market-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; height: var(--size-10); padding: 3px; box-sizing: border-box; border: 1px solid var(--topbar-pill-border); border-radius: var(--topbar-pill-radius); background: var(--topbar-pill-bg); box-shadow: var(--topbar-pill-shadow); }
.lc-header .market-pill__btn { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 36px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-full); background: none; color: var(--text-primary); font: inherit; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); }
.lc-header .market-pill__btn:hover { background: var(--surface-secondary); color: var(--text-primary); }
.lc-header .market-pill__btn:focus-visible { outline: 2px solid var(--interactive-focus-ring); outline-offset: 1px; }
.lc-header .market-pill__btn iconify-icon { display: block; width: var(--size-5); height: var(--size-5); font-size: var(--size-5); }
.lc-header .market-pill__btn--want { width: 34px; background: var(--tb-brand-purple); color: var(--color-white); }
.lc-header .market-pill__btn--want:hover { background: var(--tb-brand-purple-hover); color: var(--color-white); }

/* The public menu (pages/start-home.css .market-menu), scoped: a card under
   the pill on wide screens, the full bar width on phones. */
.lc-header .market-menu { display: none; }
.lc-header .market-menu:not([hidden]) { display: block; position: absolute; top: 100%; right: var(--space-4); z-index: 1; width: max-content; min-width: 240px; max-height: calc(100vh - var(--size-16) - var(--space-4)); max-height: calc(100dvh - var(--size-16) - var(--space-4)); margin-top: var(--space-2); padding: var(--space-1) var(--space-4); overflow-y: auto; box-sizing: border-box; border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--surface-primary); box-shadow: var(--shadow-lg); }
.lc-header .market-menu__link { display: block; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-default); color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--font-semibold); text-decoration: none; }
.lc-header .market-menu__link:last-child { border-bottom: 0; }

/* Group labels inside the menu, in the mono tag voice the cards' tags use. */
.lc-menu__label { display: block; padding: var(--space-4) var(--space-2) var(--space-1); color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.lc-menu__label:first-child { padding-top: var(--space-2); }
.lc-menu__house { padding: var(--space-1) 0 var(--space-2); border-bottom: 1px solid var(--border-default); }
.lc-menu__count { margin-left: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--font-medium); }

@media (max-width: 767px) {
  .lc-header .market-menu:not([hidden]) { right: 0; left: 0; width: auto; margin-top: 0; padding: var(--space-1) var(--space-4) var(--space-2); border: 0; border-bottom: 1px solid var(--border-default); border-radius: 0; background: var(--surface-app); box-shadow: var(--shadow-md); }
}
@media (max-width: 390px) {
  .lc-header { gap: var(--space-2); padding-inline: var(--space-3); }
  .lc-header__name { font-size: var(--text-xl); }
}

/* Drawer pages (/wants, /shop, /dm when loaded directly) are full-viewport
   overlays (layout.css .drawer-container / .drawer-panel--right, z 9400).
   Under the flag they start below this header, so the header stays the one
   bar on top. The Toll Bench drawer bar (feed/_toll_bench_header.html: the
   wordmark, + WANT and an X back to the feed) repeats this header and its X
   leads to the hidden feed, so it steps aside. A panel opened from the pill
   (#panel-utility, the Toll shop) still slides over everything, its own X
   closing it, exactly as today. */
.app-shell--layout-cards .drawer-panel .toll-bench-header { display: none; }
@media (min-width: 768px) {
  body.drawer-layout .app-shell--layout-cards .drawer-panel--right { top: var(--size-16) !important; }
}