/* Directory — hand-authored additions.

   pages/directory.css is GENERATED from the design handoff by scripts/extract_page_css.py
   and must never be hand-edited; additions live here (CLAUDE.md house style).

   The mock laid this page out as a standalone utility screen with a `.dir-wrap` container
   and inline `style=` on every section. Here it sits inside the normal site chrome, so what
   follows is the handful of rules the generated file has no class for. */

/* The mock's `.dir-wrap` was the page container; inside `.section__in` it only needs to
   supply the vertical rhythm between the stacked blocks. */
.dir-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ── Closed state ─────────────────────────────────────────────────────────── */
.closed-hero .t-display {
  font-size: clamp(2rem, 5vw, 3.2rem);
  margin: 0;
}

.closed-hero p {
  margin: 0;
  color: var(--p-steel-300);
  max-width: 56ch;
}

.closed-hero__ctas {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ── The request form, folded into each card ──────────────────────────────
   A <details> rather than a modal: it opens with no JavaScript, and the form inside is a
   plain POST that works the same way. */
.req > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.req > summary::-webkit-details-marker {
  display: none;
}

.req-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--p-steel-100);
}

.req-form .win-chips {
  border: 0;
  padding: 0;
  margin: 0;
}

.req-form legend {
  padding: 0;
  margin-bottom: 8px;
}

/* The selected window is styled from the radio itself, so it survives with JS off. */
.win:has(input:checked) {
  border-color: var(--c-action-primary);
  background: var(--p-accent-050);
}

.win:focus-within {
  outline: 2px solid var(--c-focus-ring, var(--c-action-primary));
  outline-offset: 2px;
}

.req-form__foot {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

/* ── Incoming / sent ──────────────────────────────────────────────────────── */
.incoming__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.incoming__body > b {
  font-size: 15px;
}

.incoming__body .chip {
  align-self: flex-start;
  margin-top: 4px;
}

.incoming__note {
  margin: 6px 0 0;
  color: var(--p-graphite-700);
}

.incoming--accepted {
  border-color: var(--c-status-success);
}

.incoming__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.incoming__actions form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.incoming__hint {
  color: var(--c-text-muted);
}

/* ── Ground rules ─────────────────────────────────────────────────────────── */
.rules-card {
  padding: var(--sp-5);
}

.rules-card .t-h3 {
  margin: 0 0 var(--sp-3);
}

.rules {
  margin: 0;
  padding: 0;
  list-style: none;
}