/* =============================================================================
   BOOK OF HOUSES HOMEPAGE (bookofhouses.com only, boh_homepage)
   Steven, 2026-08-09. Loaded ONLY on the BoH homepage variant of /wants; the
   Toll Bench homepage (tollbench.com / app.boho.team) never loads this file.
   Design tokens only.
   ============================================================================= */

/* Green-circle Book of Houses glyph in the left rail (replaces the yellow
   target mark on this domain). The base .start-home__mark supplies the circle
   geometry; we only recolor it green and size the crest svg. */
.start-home__mark.boh-home__mark {
  background: var(--accent-primary);
  color: var(--color-black);
}
.start-home__mark.boh-home__mark svg {
  width: var(--size-5);
  height: var(--size-5);
}

/* The rail "?" about-link sits directly in the stack (no brandline wrapper on
   this domain). */
.boh-home__rail-about {
  display: grid;
  place-items: center;
}

/* Book of Houses serif wordmark in the top bar (Steven, 2026-08-09). The
   lockup glyph beside the text is dropped on this domain -- just the serif
   wordmark, sized to sit like the "Toll Bench" wordmark it replaces. */
.boh-home-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.boh-home-brand__word {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-primary);
}

/* ---- Ported /sorting explainer sections, rendered below the want card ----
   The sections carry their native sorting.css classes (.hero, .slab,
   .values-wrap, etc). We wrap them in .sorting-page so sorting.css base rules
   (typography, link color) apply, and add a little top separation from the
   want card above. sorting.css's own bare selectors only exist in the DOM on
   this page, so there is no leak to the Toll Bench homepage. */
.boh-home-explainer {
  margin-top: calc(var(--space-10) + var(--space-2));
  width: 100%;
}
/* The market shell already provides left/right padding via .start-home__main;
   sorting's .hero adds its own generous side padding, which double-insets on
   the narrow homepage column. Trim the ported hero's side padding so it lines
   up with the want card above it. */
.boh-home-explainer .hero {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
  padding-top: var(--space-0);
}

/* Intro line above the want card on the Book of Houses homepage. */
.boh-home__intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var(--text-secondary);
  margin: var(--space-0) var(--space-0) var(--space-5);
  max-width: 640px;
}

/* ---- "Toll Bench" chip on the want card's top edge (Steven, 2026-08-09) ----
   The Book of Houses homepage replaces the "The future is now" eyebrow with a
   pill that straddles the card's top border, modeled on the unified feed-card
   top pill (see docs/FEED_CARD_SYSTEM.md, /admin/card-gallery #unified-feed-base).
   .start-hero is already position:relative and carries the feed-card tokens, so
   the chip anchors to it. Extra top padding gives the headline room below the
   straddling chip. Tokens only. */
.start-hero.boh-home__hero {
  padding-top: calc(var(--space-5) + var(--space-3));
}
.boh-home__hero-chip {
  position: absolute;
  top: 0;
  left: var(--space-8);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--size-6) + var(--space-1));
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--highlight-yellow);
  color: var(--accent-dark);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}


/* ---- "Why would AI try to give you what you want?" explainer -------------
   Steven, 2026-08-10. Ported from the Toll Bench /start card and placed below
   the Join a House step. A native <details> toggles the body; the caret flips
   on [open]. Card chrome reuses the feed-card tokens so it sits like the want
   card above; the purple pill uses the accent-tertiary label color, the green
   "want" highlight the accent-primary. Tokens only. */
.boh-explainer {
  width: 100%;
  max-width: var(--feed-card-max-width);
  margin: var(--space-8) var(--space-0) var(--space-10);
  padding: var(--feed-card-padding);
  border: var(--feed-card-border);
  border-radius: var(--feed-card-radius);
  background: var(--feed-card-bg);
  box-shadow: var(--feed-card-shadow);
}
.boh-explainer__summary {
  list-style: none;
  display: grid;
  gap: var(--space-3);
  cursor: pointer;
}
.boh-explainer__summary::-webkit-details-marker { display: none; }
.boh-explainer__pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent-tertiary-subtle);
  color: var(--accent-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0;
}
.boh-explainer__pill::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--accent-tertiary);
}
.boh-explainer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.boh-explainer__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  line-height: 1.2;
  color: var(--text-primary);
}
.boh-explainer__title .hl {
  background: var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-0) var(--space-1);
}
.boh-explainer__caret {
  flex: 0 0 auto;
  margin-top: var(--space-1);
  font-size: var(--text-2xl);
  color: var(--text-secondary);
  transition: transform var(--transition-normal);
}
.boh-explainer[open] .boh-explainer__caret { transform: rotate(180deg); }
.boh-explainer__body { margin-top: var(--space-4); }
.boh-explainer__body p {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: var(--space-0) var(--space-0) var(--space-4);
}
.boh-explainer__body p strong { color: var(--text-primary); }
.boh-explainer__tools {
  margin: var(--space-0);
  padding-left: var(--space-5);
}
.boh-explainer__tools li {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}