/* ============================================================================
 * COMPONENT · tc-vermessung — Grubbs Vermessungsbuch (#981, 21.10.2026)
 * ----------------------------------------------------------------------------
 * Die Buchseite im Stadtbuch: was du in Headblast schon gefunden hast, und was
 * noch im Dunkeln liegt. Grubb spricht (TC.Sprechblase.figur), darunter der
 * Stand als tc-xp-bar, dann die dunklen Stellen — je ein Satz Neugier und ein
 * Knopf, der hinführt; die ersten drei offen, der Rest und das schon
 * Vermessene hinter tc-accordion. Kein eigener Balken, kein eigenes Akkordeon
 * (Heuristik 2).
 *
 *   <section class="tc-card tc-vermessung" id="vermessung">
 *     <div class="tc-card__body">
 *       <div class="tc-sprechblase tc-sprechblase--figur">…Grubb…</div>
 *       <div class="tc-xp-bar tc-vermessung__stand">
 *         <div class="tc-xp-bar__kopf"><span class="tc-vermessung__name">🧭 Grubbs Vermessungsbuch</span>
 *           <span class="tc-vermessung__zahl"><b>12</b> von 22</span></div>
 *         <div class="tc-xp-bar__bahn" role="progressbar" …><div class="tc-xp-bar__fuellung" style="width:55%"></div></div>
 *       </div>
 *       <p class="tc-vermessung__fuss">Noch 3 bis „Stadtkenner“ in Silber.</p>
 *       <h3 class="tc-vermessung__titel">Noch im Dunkeln</h3>
 *       <ul class="tc-vermessung__liste">
 *         <li class="tc-vermessung__ort is-dunkel">
 *           <span class="tc-vermessung__zeichen" aria-hidden="true">🎲</span>
 *           <p class="tc-vermessung__satz">Hinter dem Würfel klappert es. Was da wohl läuft?</p>
 *           <a class="tc-button tc-button--secondary tc-vermessung__hin" href="…">Hingehen</a>
 *         </li>
 *       </ul>
 *       <div class="tc-accordion tc-accordion--flush tc-vermessung__mehr" data-accordion="multi">…</div>
 *     </div>
 *   </section>
 *
 * Ein vermessener Ort (`is-hell`) zeigt Zeichen, Namen und den Tag der ersten
 * Tat; der Name führt zur Karteikarte im Stadtbuch, wo es eine gibt.
 * Zeichnet TC.Vermessungsbuch (js/ui/vermessungsbuch.js).
 * ========================================================================== */

.tc-vermessung .tc-card__body {
  display: grid;
  gap: var(--tc-space-3);
  min-width: 0;
}

/* --- Der Stand -------------------------------------------------------------- */
.tc-vermessung__stand { margin-top: 0; }
.tc-vermessung__stand .tc-xp-bar__kopf {
  align-items: baseline;
  margin-bottom: 6px;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
}
.tc-vermessung__stand .tc-xp-bar__bahn {
  height: 10px;
  border-radius: 5px;
}
.tc-vermessung__name {
  min-width: 0;
  font-family: var(--tc-font-display);
  font-weight: 600;
  color: var(--tc-text-strong);
}
.tc-vermessung__zahl {
  flex: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tc-vermessung__zahl b {
  font-size: var(--tc-text-base);
  color: var(--tc-highlight);
}
.tc-vermessung.is-voll .tc-xp-bar__fuellung { background: var(--tc-success); }

.tc-vermessung__fuss {
  margin: calc(var(--tc-space-2) * -1) 0 0;
  font-size: var(--tc-text-xs);
  line-height: 1.45;
  color: var(--tc-text-muted);
}

.tc-vermessung__titel {
  margin: var(--tc-space-2) 0 0;
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-base);
  font-weight: 600;
  color: var(--tc-highlight);
}

/* --- Die Orte -------------------------------------------------------------- */
.tc-vermessung__liste {
  display: grid;
  gap: var(--tc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-vermessung__ort {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: var(--tc-space-1) var(--tc-space-3);
  min-width: 0;
  padding: var(--tc-space-3);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  background: var(--tc-bg-surface-1);
}

.tc-vermessung__zeichen {
  grid-row: span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tc-radius-full);
  background: var(--tc-bg-surface-2);
  font-size: 1.15rem;
  line-height: 1;
}

.tc-vermessung__satz {
  margin: 0;
  font-size: var(--tc-text-sm);
  line-height: 1.5;
  color: var(--tc-text-default);
}

/* Im Dunkeln: das Zeichen nur als Schatten, der Satz kursiv wie eine Notiz
   am Kartenrand. Die Notiz bleibt voll lesbar (Heuristik 8) — dunkel ist der
   Ort, nicht die Schrift. */
.tc-vermessung__ort.is-dunkel {
  border-style: dashed;
  border-color: var(--tc-border-default);
  background: transparent;
}
.tc-vermessung__ort.is-dunkel .tc-vermessung__zeichen {
  filter: grayscale(1) brightness(0.45);
  background: var(--tc-bg-surface-1);
}
.tc-vermessung__ort.is-dunkel .tc-vermessung__satz { font-style: italic; }

.tc-vermessung__hin {
  justify-self: start;
  min-height: var(--tc-touch-rec, 44px);
}

/* Vermessen: Name und Tag in einer Zeile, der Tag tritt zurück. */
.tc-vermessung__ort.is-hell { padding-block: var(--tc-space-2); }
.tc-vermessung__ort.is-hell .tc-vermessung__zeichen { grid-row: auto; align-self: center; }
.tc-vermessung__wort {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--tc-space-2);
  min-width: 0;
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-strong);
}
.tc-vermessung__wort a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--tc-border-strong);
  text-underline-offset: 3px;
}
.tc-vermessung__wort a:hover { text-decoration-color: var(--tc-highlight); }
.tc-vermessung__tag {
  font-size: var(--tc-text-xs);
  color: var(--tc-text-muted);
  font-variant-numeric: tabular-nums;
}

.tc-vermessung__mehr .tc-accordion__body .tc-vermessung__liste { padding-bottom: var(--tc-space-2); }

.tc-vermessung__leer {
  margin: 0;
  font-size: var(--tc-text-sm);
  color: var(--tc-text-muted);
}

/* Ab 768 px stehen die dunklen Stellen nebeneinander. */
@media (min-width: 768px) {
  .tc-vermessung__liste--dunkel {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}