/* ───────────────────────────────────────────────────────────────────────────
   information-drawer — the card grid and its detail panel.

   Pairs with public/js/information-drawer.js. Every colour and face comes from
   /brand/tokens.css (generated from lib/brand.js); nothing here re-states a
   brand value, so a rebrand is still one file.

   Type is clamp()ed rather than sized in raw vw. The component this was ported
   from sized headings at 5.7vw with two breakpoints of overrides to undo it —
   110px on a 27" display, 21px on a phone. clamp() is the fix the overrides
   were reaching for.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── GRID ────────────────────────────────────────────────────────────────── */
.idrawer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
@media (max-width: 900px) { .idrawer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .idrawer-grid { grid-template-columns: minmax(0, 1fr); } }

.idrawer-card {
  appearance: none;
  /* flex column, not block: a <button> centres its content vertically, so in a
     stretched grid row the two shorter cards rendered with a band of empty
     space above the portrait and their names floating in the middle. */
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.idrawer-card:hover  { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(36,28,26,.45); }
.idrawer-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── CARD FACE ───────────────────────────────────────────────────────────── */
.idrawer-card__portrait {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
}
.idrawer-card__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The neutral placeholder an unclaimed listing gets. Her initials in the house
   serif — not a scraped photo, and not a stock model standing in for a real
   person who never agreed to be here. */
.idrawer-card__monogram {
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 46px);
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--accent) 55%, var(--bg));
  user-select: none;
}
.idrawer-card__body { padding: 14px 16px 16px; display: grid; gap: 6px; align-content: start; flex: 1 1 auto; }
.idrawer-card__name {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.15;
  margin: 0;
}
.idrawer-card__where { color: var(--ink-muted); font-size: 14px; margin: 0; }
.idrawer-card__headline {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.idrawer-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.idrawer-card__price { font-family: var(--font-mono-stack); font-size: 14px; }

/* ── BADGES ──────────────────────────────────────────────────────────────── */
.ibadge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; letter-spacing: .02em; white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--ink-muted) 8%, transparent);
}
.ibadge--verified {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 40%, transparent);
  background: color-mix(in srgb, var(--good) 10%, transparent);
}
.ibadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── DRAWER SHELL ────────────────────────────────────────────────────────── */
.idrawer { position: fixed; inset: 0; z-index: 204; pointer-events: none; }
.idrawer.is-open { pointer-events: auto; }

.idrawer__overlay {
  position: absolute; inset: 0;
  background: #241C1A;   /* the ink token's value; a scrim, not a brand colour */
  opacity: 0;
  pointer-events: none;
}
.idrawer.is-open .idrawer__overlay { pointer-events: auto; }

.idrawer__panel {
  position: fixed; inset-block: 0; right: 0;
  width: var(--idrawer-width, 62%);
  max-width: 820px;
  background: var(--surface);
  color: var(--ink);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateX(100%);
  transition-property: transform;
  transition-timing-function: cubic-bezier(.65, 0, .35, 1);
  padding: clamp(20px, 4vw, 48px);
  z-index: 205;
}
.idrawer.is-open .idrawer__panel { transform: translateX(0); }
@media (max-width: 900px) { .idrawer__panel { width: 100%; max-width: none; } }

.idrawer__content { opacity: 0; display: grid; gap: clamp(16px, 2.2vw, 28px); }
/* The rhythm of the drawer body. It lives here rather than on .idrawer__content
   because the detail view is re-rendered into a holder element once the full
   profile arrives — a gap on the content would then apply to one child and
   space nothing, which is how this shipped the first time. */
.idrawer__stack { display: grid; gap: clamp(16px, 2.2vw, 28px); align-content: start; }

/* Reduced motion keeps the drawer, drops the travel. Someone who asked the OS
   for less movement still needs to read the profile. */
@media (prefers-reduced-motion: reduce) {
  .idrawer__panel { transition: none !important; }
  .idrawer-card { transition: none; }
  .idrawer-card:hover { transform: none; }
}

/* ── DRAWER CONTENT ──────────────────────────────────────────────────────── */
.idrawer__identity { margin-top: 4px; }
.idrawer__topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.idrawer__close {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent; color: inherit; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.idrawer__close:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.idrawer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.idrawer__count { font-family: var(--font-mono-stack); font-size: 13px; color: var(--ink-muted); }

.idrawer__rule { height: 1px; background: var(--border); border: 0; margin: 0; }

.idrawer__identity { display: flex; gap: clamp(14px, 2vw, 24px); align-items: flex-start; flex-wrap: wrap; }
.idrawer__portrait {
  width: clamp(96px, 16vw, 168px); aspect-ratio: 4 / 5; flex: 0 0 auto;
  border-radius: 12px; overflow: hidden; position: relative;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  display: grid; place-items: center;
  border: 1px solid var(--border);
}
.idrawer__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idrawer__name { font-family: var(--font-display); font-size: clamp(28px, 4vw, 46px); line-height: 1.05; margin: 0 0 6px; }
.idrawer__sub { color: var(--ink-muted); margin: 0 0 10px; }

/* The unclaimed notice. Above the fold of the drawer, in plain words, and
   styled to be read rather than skimmed past. */
.idrawer__notice {
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
}
.idrawer__notice strong { font-weight: 600; }

.idrawer__section h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  margin: 0 0 10px;
}
.idrawer__prose p { margin: 0 0 .85em; line-height: 1.6; }
.idrawer__prose p:last-child { margin-bottom: 0; }

.idrawer__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.idrawer__table th, .idrawer__table td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--border); }
.idrawer__table td:last-child, .idrawer__table th:last-child { text-align: right; font-family: var(--font-mono-stack); }
.idrawer__table th { font-weight: 600; color: var(--ink-muted); font-size: 13px; }

.idrawer__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.idrawer__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 999px;
  font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
  transition: filter .2s ease;
}
.idrawer__btn:hover { filter: brightness(1.08); }
.idrawer__btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.idrawer__btn--ghost:hover { border-color: var(--accent); }
.idrawer__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Absence renders as absence. This is the only style for a thing we do not
   know, and it never resembles data. */
.idrawer__absent { color: var(--ink-muted); font-size: 14px; line-height: 1.55; }