/* Hand diagram and auction table (section 4). ♠♣ ink, ♥♦ accent-deep — from tokens via .suit--*. */

.hand-diagram {
  margin: var(--space-element) 0;
  padding: var(--space-element);
  border: var(--hairline);
  border-radius: var(--radius);
  background: var(--color-canvas);
  max-width: 34rem;
}
.hand-diagram__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-element); }

/* Folded play commentary under a hand embedded in a lesson (T-10); sits flush under the diagram. */
.hand-commentary {
  max-width: 34rem; margin: calc(-1 * var(--space-element) - 1px) 0 var(--space-element);
  border: var(--hairline); border-radius: 0 0 var(--radius) var(--radius); background: var(--color-canvas);
}
.hand-commentary > summary {
  display: flex; align-items: center; justify-content: space-between; min-height: var(--touch-target);
  padding-inline: var(--space-element); cursor: pointer; list-style: none;
  font-size: var(--text-small); font-weight: var(--weight-semibold);
}
.hand-commentary > summary::-webkit-details-marker { display: none; }
.hand-commentary > summary::after { content: "▾"; font-size: 1.25rem; line-height: 1; color: var(--color-ink-muted); }
.hand-commentary[open] > summary::after { transform: rotate(180deg); }
@media (hover: hover) { .hand-commentary > summary:hover { background: var(--color-hover-surface); } }
.hand-commentary__body { padding: 0 var(--space-element) var(--space-element); }
.hand-commentary__body > :first-child { margin-top: 0; }

/* Compass: N top, W/E sides, S bottom, table in the middle. */
.compass {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* N and S span the full width so the middle column is only as wide as the table box. */
  grid-template-areas: "n n n" "w t e" "s s s";
  gap: var(--space-s) var(--space-s);
  align-items: center;
}
.compass__hand--n { grid-area: n; justify-self: center; }
.compass__hand--s { grid-area: s; justify-self: center; }
.compass__hand--w { grid-area: w; }
.compass__hand--e { grid-area: e; justify-self: end; }
.compass__table {
  grid-area: t;
  position: relative;
  width: 4.5rem; height: 4.5rem;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-surface-cool);
}
.compass__dir {
  position: absolute;
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  color: var(--color-ink-muted);
}
.compass__dir--n { top: 0.2rem; left: 50%; transform: translateX(-50%); }
.compass__dir--s { bottom: 0.2rem; left: 50%; transform: translateX(-50%); }
.compass__dir--w { left: 0.35rem; top: 50%; transform: translateY(-50%); }
.compass__dir--e { right: 0.35rem; top: 50%; transform: translateY(-50%); }
.compass__dir.is-vul { color: var(--color-accent-deep); }
.compass__dir.is-dealer { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }

.compass__seat {
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.compass__badge {
  margin-left: 0.25rem; padding: 0 0.25rem;
  border: 1px solid var(--color-accent); border-radius: var(--radius);
  color: var(--color-accent-deep); font-size: 0.6rem; letter-spacing: 0.04em;
}

.holding { margin: 0; font-variant-numeric: tabular-nums; }
.holding__row { display: flex; gap: 0.35rem; line-height: 1.45; }
.holding dt { width: 1em; flex: none; text-align: center; }
.holding dd { margin: 0; letter-spacing: 0.06em; overflow-wrap: anywhere; min-width: 0; }

.hand-diagram__meta { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-element); margin: var(--space-element) 0 var(--space-s); color: var(--color-ink-muted); text-transform: uppercase; }
.hand-diagram__meta strong { color: var(--color-ink); font-weight: var(--weight-semibold); }

/* Auction: four columns, never wider than the diagram. */
.auction-wrap { overflow-x: auto; }
.auction { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.auction th {
  font-size: var(--text-caption); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  text-align: left; padding: 0.3rem 0.4rem; border-bottom: var(--hairline);
}
.auction td { padding: 0.3rem 0.4rem; font-size: var(--text-small); }
.auction .call--red { color: var(--color-suit-red); }
.auction .call--other { color: var(--color-ink-muted); }

@media (max-width: 400px) {
  .hand-diagram { padding: var(--space-s); }
  .compass { gap: 0.4rem 0.25rem; }
  .compass__table { width: 3.25rem; height: 3.25rem; }
  .holding__row { font-size: var(--text-small); }
  .auction th, .auction td { padding-inline: 0.2rem; }
}