/* =========================================================================
   Component — the identity panel
   -------------------------------------------------------------------------
   Styles for what assets/js/identity-panel.js renders. A COMPONENT file, not
   a page file: the renderer is shared by the portal dashboard and the sign-in
   page, so styling it from one page's stylesheet left it unstyled on the
   other — the exact failure audit rule D-6 exists to catch.

   Rule of thumb: shared markup, shared stylesheet. If two pages mount the same
   renderer, its CSS is a component.
   ========================================================================= */

/* The panel's own headings sit directly under the page h1, so they take a
   deliberate step down from the base h2 scale rather than crowding it. */
.identity-panel h2 {
  font-size: 18px;
  margin-bottom: 14px;
}

/* A label column and a value column, one pair per row (U-1082). `auto-fit`
   columns flowed `dt` and `dd` as loose siblings, so a value landed beside,
   above or under another label depending on the width — on every page that
   carries the block. A label never takes more than 40 % of the row. */
.identity-grid {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(0, 1fr);
  gap: 12px 24px;
  align-items: baseline;
  margin: 0;
}

.identity-grid dt {
  grid-column: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--doc-ink-soft);
}

/* The page's own type, breaking only where a line cannot fit. A value that is
   an identifier says so with `.table-mono`; monospace and `break-all` on every
   value split prose mid-word ("frei gegeben", "we nn"). */
.identity-grid dd {
  grid-column: 2;
  margin: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

/* Narrow: the value under its label, and the pairs apart. */
@media (max-width: 640px) {
  .identity-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 0;
  }

  .identity-grid dt,
  .identity-grid dd {
    grid-column: 1;
  }

  .identity-grid dt:not(:first-child) {
    margin-top: 12px;
  }
}

.scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A scope's box (U-1130): shown while its pill is hovered or focused — focus is what
   a tap gives where there is no hover. Under the pill, never wider than the card. */
.scope-list li {
  position: relative;
}

.scope-pill {
  font-family: inherit;
  cursor: help;
}

.scope-hint {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: min(320px, 80vw);
  padding: 8px 10px;
  border: 1px solid var(--doc-line);
  border-radius: var(--radius);
  background: var(--doc-panel);
  box-shadow: var(--shadow-pop);
  color: var(--doc-ink);
  font-size: 12.5px;
  line-height: 1.4;
}

.scope-pill:hover + .scope-hint,
.scope-pill:focus + .scope-hint {
  display: block;
}