/* === Wiener Urkundenbuch — Person Profile Page === */
/* ==========================================================================
   Personenprofil unter docs/register/persons/<id>.html.
   Reuses tokens from tokens.css and toolbar pattern from document.css —
   only the page-specific layout (header, stats, relations, sources) is
   defined here.
   ========================================================================== */

.person-profile {
    max-width: 78rem;
    margin: 0 auto;
    padding: 0;
}

/* --- Toolbar (nur Breadcrumb + Korb-Mount) ---------------------------- */
/* Nicht sticky: scrollt mit. Das Profil ist eine Recherche-Detailseite,
   keine App-Oberflaeche mit fortlaufenden Aktionen. */

.person-toolbar {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg)) 0;
    padding: var(--space-xs) var(--space-lg);
}

.person-toolbar-inner {
    max-width: 78rem;
    margin: 0 auto;
}

.person-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.person-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.person-breadcrumb {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.person-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.person-breadcrumb a:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.person-breadcrumb .bc-sep {
    color: var(--color-text-light);
}

.person-breadcrumb .bc-doc strong {
    color: var(--color-text);
}

/* --- Header ------------------------------------------------------------ */
/* Kompakt-Layout: H1 + Mikro-Rollen-Strip in einer Zeile, dann eine
   Identitaets-Sub-Zeile (Wortlaut, Bezeichnungen, externe Links) und
   eine horizontale Meta-Strip-Zeile (Geschlecht, Belegt, ID, ...).
   Spart die Weiss-Spalte rechts ueber dem Wahrzeichen-H1. */

.person-header {
    margin: var(--space-sm) auto var(--space-sm);
    max-width: 78rem;
    padding: 0 var(--space-md);
}

.person-header-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.ph-identity {
    min-width: 0;
    flex: 1 1 auto;
}

/* Meta-Strip: horizontale Reihe key/value-Paare. dt klein und uppercase
   als Label, dd direkt daneben. Trennung durch dezenten Bullet. */
.ph-meta-strip {
    margin: var(--space-xs) 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--color-border-light);
}

.ph-meta-strip .ph-meta-pair {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.ph-meta-strip dt {
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-xs);
    margin: 0;
}

.ph-meta-strip dd {
    margin: 0;
    color: var(--color-text);
}

.ph-meta-strip .person-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--color-bg-warm);
    padding: 1px 6px;
    border-radius: var(--radius);
}

/* Identitaets-Sub-Zeile zwischen H1 und Meta-Strip: Quellen-Wortlaut,
   Genannt-als, ext-Links. Eine Zeile, mit Bullets getrennt. */
.ph-subline {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    color: var(--color-text-muted);
}

.ph-subline > * { display: inline-flex; align-items: baseline; gap: var(--space-xs); }

.ph-subline .ext-link {
    color: var(--anno-person);
    text-decoration: none;
}
.ph-subline .ext-link:hover { text-decoration: underline; }
.org-profile .ph-subline .ext-link { color: var(--anno-org); }

.person-name {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    margin: 0;
    color: var(--color-text);
}

.person-name .pn-fn,
.person-name .pn-sn,
.person-name .pn-an {
    /* Wort-Abstand ueber normales Inline-Whitespace, kein zusaetzlicher
       Margin. Vorher 0.3em Margin plus Template-Whitespace ergab ueberbreite
       Luecken zwischen den Namensteilen. */
}

.person-note {
    font-style: italic;
    color: var(--color-text-muted);
}

/* "Genannt als"-Liste als <details>: Default kollabiert, Summary zeigt
   nur den Count. Spart 30-60 px pro Profil, ohne Information zu verlieren. */
.person-titles-details {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
}

.pt-summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-text-muted);
    user-select: none;
}

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

.pt-summary::before {
    content: "\25B8";
    display: inline-block;
    font-size: var(--text-xs);
    color: var(--color-text-light);
    transition: transform 0.12s;
}

.person-titles-details[open] .pt-summary::before {
    transform: rotate(90deg);
}

.pt-summary .pt-label {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pt-summary .pt-count {
    color: var(--color-text);
}

.pt-chips {
    margin: var(--space-xs) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.pt-chip {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-warm);
    font-size: var(--text-sm);
    color: var(--color-text);
}


/* --- Sections (Beziehungen + Quellen) --------------------------------- */
/* Erste Section nach Header (i.d.R. Quellen) hat reduzierten Top-Margin,
   damit die Tabelle so nah wie moeglich am Header sitzt. */

.person-relations,
.person-sources {
    max-width: 78rem;
    margin: var(--space-md) auto;
    padding: 0 var(--space-md);
}

.person-header + .person-sources,
.person-header + .person-relations {
    margin-top: var(--space-sm);
}

.section-head {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-sm);
    padding: 0;
    color: var(--color-text-muted);
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
}

/* Solo-Variante: einzige rel-Gruppe vorhanden, daher uebernimmt der
   rel-block-title die Section-Heading-Funktion. Optisch identisch zum
   section-head, damit Beziehungen und Quellen visuell auf derselben
   Ebene stehen. */
.rel-block-title-solo {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 0;
    cursor: help;
    margin: 0;
}

/* Wenn die Section nur eine Gruppe enthaelt, faellt der zusaetzliche
   rel-block-head-Margin weg, weil er die ehemalige section-head ersetzt. */
.person-relations.is-single .rel-block {
    margin: 0;
}

/* --- Beziehungen ------------------------------------------------------- */

.rel-block {
    margin: var(--space-md) 0;
}

.rel-block-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.rel-block-title {
    font-size: var(--text-base);
    font-family: var(--font-sans);
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
    cursor: help;
    border-bottom: 1px dotted var(--color-border);
}

.rel-block-count {
    display: inline-block;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 6px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
}

.rel-table,
.person-source-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: var(--text-sm);
}

.rel-table th,
.rel-table td,
.person-source-table th,
.person-source-table td {
    padding: 4px var(--space-sm);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border-light);
}

.rel-table th,
.person-source-table th {
    background: var(--color-bg-warm);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.rel-table tr:last-child td,
.person-source-table tr:last-child td {
    border-bottom: 0;
}

/* Link-Farbe folgt dem ZIEL-Typ, nicht dem Profil-Kontext:
   - Verlinkte Person -> blau (anno-person)
   - Verlinkte Org    -> lila (anno-org)
   So bleibt die semantische Farbe konsistent ueber alle Tabellen. */
.rel-other-link {
    text-decoration: none;
    font-weight: 500;
}
.rel-other-link--person { color: var(--anno-person); }
.rel-other-link--org    { color: var(--anno-org); }
.rel-other-link:hover { text-decoration: underline; }

.rel-other-plain {
    color: var(--color-text);
}

.rel-source-link {
    color: var(--color-text);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.rel-source-link:hover {
    text-decoration: underline;
}

.rel-col-perspective {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

/* Beziehungs-Tabelle: Signatur und Datum identisch zur Quellen-Tabelle
   stylen, damit beide Listen visuell als "Belege" lesbar bleiben. */
.rel-table .rel-col-idno {
    width: 5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}
.rel-table .rel-col-idno a {
    color: var(--anno-person);
    text-decoration: none;
}
.rel-table .rel-col-idno a:hover { text-decoration: underline; }
.org-profile .rel-table .rel-col-idno a { color: var(--anno-org); }

.rel-table .rel-col-date {
    width: 8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Sortier-Pfeile leben jetzt in components.css (projektweit). Hier
   nur noch die org-Profilseiten-spezifische Akzent-Farbe. */
.org-profile .sortable-table th.sorted-asc::after,
.org-profile .sortable-table th.sorted-desc::after {
    color: var(--anno-org);
}

/* Type-spezifische Akzent-Farbe links — analog zu Annotations-Farben. */

.rel-block-kin       .rel-block-title { color: var(--anno-person); }
.rel-block-friend    .rel-block-title { color: var(--anno-fn-recipient); }
.rel-block-rep       .rel-block-title { color: var(--anno-fn-other); }
.rel-block-occ       .rel-block-title { color: var(--anno-org); }
.rel-block-title_ref .rel-block-title { color: var(--anno-org); }

/* --- Quellen-Tabelle --------------------------------------------------- */

.person-source-table .src-col-idno {
    width: 5rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

/* Signatur-Link in der Quellen-Tabelle: Farbe folgt dem Profil-Kontext,
   weil die Signatur die Quelle der aktuellen Entitaet adressiert. */
.person-source-table .src-col-idno a {
    color: var(--anno-person);
    text-decoration: none;
}
.org-profile .person-source-table .src-col-idno a { color: var(--anno-org); }

.person-source-table .src-col-idno a:hover {
    text-decoration: underline;
}

.person-source-table .src-col-date {
    width: 8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.person-source-table .src-col-corpus {
    width: 12rem;
    color: var(--color-text-muted);
}

.person-source-table .src-col-regest {
    color: var(--color-text);
}

@media (max-width: 900px) {
    .person-header-top {
        flex-direction: column;
        align-items: stretch;
    }
    .role-micro { align-self: flex-start; }
}

@media (max-width: 768px) {
    .rel-table,
    .person-source-table { font-size: var(--text-xs); }
    .person-source-table .src-col-corpus { display: none; }
    .ph-meta-strip { gap: var(--space-xs) var(--space-sm); }
}

/* --- Sub-Zeile-Helfer: orig-label fuer "Im Quellen-Wortlaut" usw. ----- */
.orig-label {
    font-size: var(--text-xs);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* --- Rollen-Mikro-Strip ----------------------------------------------- */
/* Mikro-Pillen rechts neben H1, in einer Zeile. Vier kleine Pillen,
   jede zeigt Count + Label-Initial. Hover oder Hint zeigt vollen Label. */
.role-micro {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px;
    font-size: var(--text-xs);
    flex: 0 0 auto;
}
.role-micro-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 1px 6px;
    border-left: 2px solid var(--color-border);
    background: var(--color-bg-warm);
    border-radius: 0 var(--radius) var(--radius) 0;
    line-height: 1.4;
    cursor: help;
}
.role-micro-cell .rm-count {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--color-text);
    font-size: var(--text-xs);
}
.role-micro-cell .rm-label {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.role-micro-cell.is-zero {
    opacity: 0.28;
    border-left-color: var(--color-border-light);
}
.role-micro-issuer    { border-left-color: var(--anno-fn-issuer); }
.role-micro-recipient { border-left-color: var(--anno-fn-recipient); }
.role-micro-witness   { border-left-color: var(--anno-fn-witness); }
.role-micro-other     { border-left-color: var(--anno-fn-other); }

/* --- Untergeordnete Orgs --------------------------------------------- */
.org-children {
    max-width: 78rem;
    margin: var(--space-lg) auto;
    padding: 0 var(--space-md);
}
.section-head .section-head-count {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}
.child-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-xs) var(--space-md);
}
.child-item {
    font-size: var(--text-sm);
    border-left: 2px solid var(--color-border);
    padding-left: var(--space-sm);
}
.child-link {
    color: var(--anno-org);
    text-decoration: none;
}
.child-link:hover { text-decoration: underline; }
.child-plain {
    color: var(--color-text-light);
    cursor: help;
}

/* --- Tabellen-Truncation --------------------------------------------- */
/* Body-Zeilen jenseits der Truncation ausblenden, solange Tabelle nicht
   expandiert ist. JS toggelt .is-expanded auf der Tabelle. */
.rel-table[data-truncate-at]:not(.is-expanded) tbody tr.is-overflow,
.person-source-table[data-truncate-at]:not(.is-expanded) tbody tr.is-overflow {
    display: none;
}
.table-toggle {
    margin-top: var(--space-sm);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font: inherit;
    padding: 4px 10px;
    border-radius: var(--radius);
    cursor: pointer;
}
.table-toggle:hover { background: var(--color-bg-warm); }

/* --- Role-Chips in Quellen-Tabelle ----------------------------------- */
.role-chip {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    font-size: var(--text-xs);
    border-radius: var(--radius);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    white-space: nowrap;
}
.role-chip-issuer    { border-left: 3px solid var(--anno-fn-issuer); }
.role-chip-recipient { border-left: 3px solid var(--anno-fn-recipient); }
.role-chip-witness   { border-left: 3px solid var(--anno-fn-witness); }
.role-chip-other     { border-left: 3px solid var(--anno-fn-other); }

/* Owner/Tenant-Beziehungstypen referenzieren Orte, also Ort-Token. */
.rel-block-owner  .rel-block-title { color: var(--anno-place); }
.rel-block-tenant .rel-block-title { color: var(--anno-place); }

/* Source-Tabelle: neue Spalten Bezeichnung + Rolle */
.person-source-table .src-col-label {
    color: var(--color-text);
    font-size: var(--text-xs);
}
.person-source-table .src-col-role {
    white-space: nowrap;
}
@media (max-width: 1024px) {
    .person-source-table .src-col-label { display: none; }
}
@media (max-width: 768px) {
    .person-source-table .src-col-role { display: none; }
}