/* ---------------------------------------------------------
   Module tokens and optional accent hooks
   --------------------------------------------------------- */

:root {
    --tl-x: 6px;
    --tl-bullet: 12px;
    --tl-line-w: 1px;
    --tl-gap: 14px;

    --pfm-accent: var(--design);
    --pfm-positive: var(--design-light);
    --pfm-negative: var(--akzent-red-soft);
    --pfm-neutral: var(--paper-muted);
    --pfm-romance: var(--signal-light);
    --pfm-professional: var(--design-light);
    --pfm-surface: color-mix(in srgb, var(--bg-main) 96%, transparent);
    --pfm-surface-soft: color-mix(in srgb, var(--paper) 2.5%, transparent);
    --pfm-surface-strong: color-mix(in srgb, var(--bg-deep) 64%, transparent);
    --val: 50%;
    --neg: var(--pfm-negative);
    --pos: var(--pfm-positive);
    --mid: var(--pfm-neutral);
}

.dossier-profile {
    --pfm-accent: var(--profile-accent);
}

.value_freifeld,
.pfm-block {
    display: block;
    width: 100%;
}

.pfm-card,
.pfm-card *,
.pfm-person,
.pfm-person *,
.pfm-magic-badge,
.pfm-magic-badge *,
.rel-item,
.rel-item * {
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Core record cards
   --------------------------------------------------------- */

.pfm-card {
    position: relative;
    width: 100%;
    padding: clamp(var(--space-m), 2.4vw, 30px);
    color: var(--txtcol);
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--pfm-accent) 7%, transparent),
            transparent 26%
        ),
        var(--pfm-surface);
    border: 1px solid var(--hairline-strong);
    border-left: 3px solid var(--pfm-accent);
    line-height: 1.65;
    text-align: left;
}

.pfm-card::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 15px;
    width: 7px;
    height: 7px;
    background: var(--pfm-accent);
    opacity: 0.78;
    pointer-events: none;
}

.pfm-card + .pfm-card {
    margin-top: 1px;
}

.pfm-header {
    display: grid;
    grid-template-columns: minmax(128px, 160px) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 34px);
    align-items: start;
}

.pfm-header > * {
    min-width: 0;
}

.pfm-portrait {
    --pfm-portrait-ratio: 3 / 4;
    position: relative;
    width: 100%;
    aspect-ratio: var(--pfm-portrait-ratio);
    overflow: hidden;
    background: var(--bg-deep);
    border: 1px solid var(--hairline-strong);
}

.pfm-portrait::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 2;
    border: 1px solid color-mix(in srgb, var(--pfm-accent) 48%, transparent);
    pointer-events: none;
}

.pfm-portrait::after {
    content: "";
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 9px;
    height: 9px;
    background: var(--pfm-accent);
    pointer-events: none;
}

.pfm-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: grayscale(1) contrast(1.06) brightness(0.84);
    transition: transform 320ms ease, filter 320ms ease;
}

.pfm-portrait:hover img {
    transform: scale(1.035);
    filter: grayscale(1) contrast(1.09) brightness(0.92);
}

.pfm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 var(--space-l) 11px 0;
    border-bottom: 1px solid var(--hairline);
}

.pfm-label,
.pfm-subtitle,
.rel-section-title,
.rel-scale-label {
    color: var(--paper-muted);
    font-size: var(--txtxsmall);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pfm-label {
    color: var(--paper);
}

.pfm-subtitle {
    margin: var(--space-xs) 0 10px;
}

.pfm-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: var(--pfm-accent);
}

.pfm-ico svg,
.pfm-float-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pfm-float-svg {
    float: right;
    width: 52px;
    height: 52px;
    margin: 2px 0 var(--space-s) 16px;
    color: var(--pfm-accent);
    opacity: 0.72;
}

/* ---------------------------------------------------------
   Lists, facts and timelines
   --------------------------------------------------------- */

.pfm-list,
.pfm-facts,
.pfm-strengths,
.pfm-weaknesses {
    display: grid;
    gap: var(--space-xs);
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.pfm-list li,
.pfm-facts li,
.pfm-strengths li,
.pfm-weaknesses li {
    position: relative;
    padding-left: 22px;
}

.pfm-list li::before,
.pfm-facts li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 1px;
    width: 7px;
    height: 7px;
    background: var(--pfm-accent);
    transform: translateY(-50%);
}

.pfm-strengths li::before,
.pfm-weaknesses li::before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--akzenttext);
    font-size: 19px;
    font-weight: 400;
    line-height: 1;
}

.pfm-strengths li::before {
    content: "+";
    color: var(--pfm-positive);
}

.pfm-weaknesses li::before {
    content: "−";
    color: var(--pfm-negative);
}

.pfm-timeline {
    position: relative;
    display: grid;
    gap: var(--space-m);
    margin: var(--space-s) 0 0;
    padding-left: calc(var(--tl-x) + var(--tl-gap) + 7px);
}

.pfm-timeline::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: var(--tl-x);
    width: var(--tl-line-w);
    background: linear-gradient(
        to bottom,
        var(--pfm-accent),
        var(--hairline-strong) 76%,
        transparent
    );
}

.pfm-tl-item {
    position: relative;
    min-width: 0;
}

.pfm-tl-item::before {
    content: "";
    position: absolute;
    top: 3px;
    left: calc(-1 * (var(--tl-gap) + 13px));
    width: var(--tl-bullet);
    height: var(--tl-bullet);
    background: var(--bg-deep);
    border: 1px solid var(--pfm-accent);
}

.pfm-tl-item::marker {
    color: var(--pfm-accent);
}

.pfm-tl-when {
    margin-bottom: 5px;
    color: var(--paper);
    font-family: var(--akzenttext);
    font-size: var(--txtm);
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1.1;
    text-transform: uppercase;
}

.pfm-tl-what {
    color: var(--txtcol);
    font-size: var(--txtm);
}

.pfm-timeline--compact {
    gap: var(--space-s);
}

.pfm-timeline--compact .pfm-tl-when {
    font-size: var(--txtxsmall);
}

.pfm-tl-when.is-badge {
    display: inline-block;
    width: fit-content;
    padding: 6px var(--space-xs);
    color: var(--paper-muted);
    background: var(--pfm-surface-strong);
    border: 1px solid var(--hairline);
}

/* ---------------------------------------------------------
   Grids and compact records
   --------------------------------------------------------- */

.pfm-2col,
.pfm-qna.pfm-2col,
.pfm-family,
.pfm-magic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hairline);
}

.pfm-magic-badge,
.pfm-person,
.pfm-q {
    min-width: 0;
    padding: 16px var(--space-m);
    background: var(--pfm-surface);
    border: 0;
}

.pfm-magic-badge {
    display: grid;
    gap: 6px;
    border-top: 2px solid var(--pfm-accent);
}

.pfm-family {
    margin-top: 10px;
}

.pfm-person {
    display: grid;
    gap: 5px;
}

.pfm-person .role {
    color: var(--pfm-accent);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pfm-person .name {
    color: var(--paper);
    font-family: var(--akzenttext);
    font-size: clamp(18px, 1.8vw, 25px);
    font-weight: 400;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.pfm-person .note {
    color: var(--txtcol-soft);
    font-size: var(--txtm);
}

.pfm-qna {
    display: grid;
    gap: 1px;
    background: var(--hairline);
}

.pfm-q {
    display: grid;
    gap: var(--space-xs);
    border-left: 3px solid var(--pfm-accent);
}

.pfm-q .q {
    color: var(--paper);
    font-size: var(--txtsmall);
    font-weight: 600;
}

.pfm-q .a {
    color: var(--txtcol);
    font-size: var(--txtm);
}

/* ---------------------------------------------------------
   Stances, chips and scales
   --------------------------------------------------------- */

.pfm-stance {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--space-s) 0;
}

.pfm-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    color: var(--paper-muted);
    background: var(--pfm-surface-strong);
    border: 1px solid var(--hairline-strong);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.pfm-chip--pro {
    border-left: 3px solid var(--pfm-positive);
}

.pfm-chip--contra {
    border-left: 3px solid var(--pfm-negative);
}

.pfm-chip--neutral {
    border-left: 3px solid var(--pfm-neutral);
}

.pfm-scale {
    position: relative;
    height: 9px;
    overflow: hidden;
    background: color-mix(in srgb, var(--paper) 4.5%, transparent);
    border: 1px solid var(--hairline-strong);
}

.pfm-scale::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--val);
    background: linear-gradient(90deg, var(--neg), var(--mid), var(--pos));
}

.pfm-scale.pfm-scale--bi::before {
    background: linear-gradient(90deg, var(--neg), var(--pos));
}

.pfm-scale.pfm-scale--center::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 50%;
    width: 1px;
    background: var(--paper-muted);
}

.pfm-scale.pfm-scale--ticks {
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 1px),
        color-mix(in srgb, var(--paper) 18%, transparent) calc(10% - 1px),
        color-mix(in srgb, var(--paper) 18%, transparent) 10%
    );
}

/* ---------------------------------------------------------
   Relations
   --------------------------------------------------------- */

.pfm-relations,
.rel-sections.rel--grid .pfm-relations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--hairline-strong);
}

.rel-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--space-xxs) 0 10px;
}

.rel-section-title::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--pfm-accent);
}

.rel-item {
    --rel-accent: var(--pfm-accent);
    display: grid;
    gap: 14px;
    width: auto;
    min-width: 0;
    padding: clamp(16px, 2vw, 22px);
    color: var(--txtcol);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--pfm-accent) 4.5%, transparent),
            transparent 42%
        ),
        var(--pfm-surface);
    border: 0;
    border-top: 2px solid var(--rel-accent);
}

.rel-item.rel--pro {
    --rel-accent: var(--pfm-positive);
}

.rel-item.rel--contra {
    --rel-accent: var(--pfm-negative);
}

.rel-item.rel--neutral {
    --rel-accent: var(--pfm-neutral);
}

.rel-item.rel--romance {
    --rel-accent: var(--pfm-romance);
}

.rel-item.rel--beaker {
    --rel-accent: var(--pfm-professional);
}

.rel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    min-width: 0;
    padding-left: var(--space-s);
    border-left: 3px solid var(--rel-accent);
}

.rel-id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rel-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    object-position: center;
    background: var(--bg-deep);
    border: 1px solid var(--hairline-strong);
    filter: grayscale(1) contrast(1.05) brightness(0.88);
}

.rel-name {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--paper);
    font-family: var(--akzenttext);
    font-size: clamp(18px, 1.8vw, 25px);
    font-weight: 400;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rel-name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.rel-name a:hover {
    color: var(--rel-accent);
    border-bottom-color: var(--rel-accent);
}

.rel-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px var(--space-xs);
    color: var(--paper-muted);
    background: var(--pfm-surface-strong);
    border: 1px solid var(--rel-accent);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}

.rel-type-ico {
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: var(--rel-type-ico) no-repeat center / contain;
    mask: var(--rel-type-ico) no-repeat center / contain;
}

.rel--pro .rel-type-ico,
.rel--romance .rel-type-ico {
    --rel-type-ico: var(--ico-heart);
}

.rel--neutral .rel-type-ico {
    --rel-type-ico: var(--ico-cloud);
}

.rel--contra .rel-type-ico {
    --rel-type-ico: var(--ico-warning);
}

.rel--beaker .rel-type-ico {
    --rel-type-ico: var(--ico-beaker);
}

.rel--pro .rel-type-label::after {
    content: "positiv";
}

.rel--contra .rel-type-label::after {
    content: "negativ";
}

.rel--neutral .rel-type-label::after {
    content: "neutral";
}

.rel--romance .rel-type-label::after {
    content: "romantisch";
}

.rel--beaker .rel-type-label::after {
    content: "professionell";
}

.rel-desc {
    margin: 0;
    color: var(--txtcol);
    font-size: var(--txtm);
    line-height: 1.6;
}

.rel-metrics {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding-top: 13px;
    border-top: 1px solid var(--hairline);
}

.rel-scale .pfm-scale {
    outline: 0;
    box-shadow: none;
}

.rel-scale-label {
    margin-bottom: 6px;
}

.rel-scale-ticks {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 5px;
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
}

.rel-intensity {
    display: grid;
    gap: 5px;
    justify-items: end;
}

.rel-count {
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rel-intensity .rel-stars {
    direction: ltr;
    unicode-bidi: isolate;
}

.rel-intensity .rel-stars .star::after {
    opacity: 0 !important;
}

:root{
  --ico-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z'/%3E%3C/svg%3E");
  --ico-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.5 9.75a6 6 0 0 1 11.573-2.226 3.75 3.75 0 0 1 4.133 4.303A4.5 4.5 0 0 1 18 20.25H6.75a5.25 5.25 0 0 1-2.23-10.004 6.072 6.072 0 0 1-.02-.496Z'/%3E%3C/svg%3E");
--ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
--ico-beaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z'/%3E%3C/svg%3E");
}

.rel-stars{
  --ico-filled: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z"/></svg>');
  --ico-outline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.563.563 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/></svg>');
  display:inline-grid; grid-auto-flow:column; gap:2px;
}
.rel-stars[data-icon="sparkles"]{
  --ico-filled: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z" clip-rule="evenodd"/></svg>');
  --ico-outline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z"/></svg>');
}
.rel-stars[data-icon="fire"]{
  --ico-filled: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z" clip-rule="evenodd"/></svg>');
  --ico-outline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"/><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"/></svg>');
}
.rel-stars[data-icon="beaker"]{
  --ico-filled: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z" clip-rule="evenodd"/></svg>');
  --ico-outline: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/></svg>');
}


.rel-stars .star {
    position: relative;
    display: inline-block;
    width: 17px;
    height: 17px;
}

.rel-stars .star::before,
.rel-stars .star::after {
    content: "";
    position: absolute;
    inset: 0;
}

.rel-stars .star::before {
    background: var(--paper-muted);
    -webkit-mask: var(--ico-outline) center / contain no-repeat;
    mask: var(--ico-outline) center / contain no-repeat;
    opacity: 0.62;
}

.rel-stars .star::after {
    background: var(--rel-accent);
    -webkit-mask: var(--ico-filled) center / contain no-repeat;
    mask: var(--ico-filled) center / contain no-repeat;
    opacity: 0;
}

.rel-intensity .rel-stars[data-max="10"][data-value="0"] .star:nth-child(-n+0)::after { opacity: 0 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="1"] .star:nth-child(-n+1)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="2"] .star:nth-child(-n+2)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="3"] .star:nth-child(-n+3)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="4"] .star:nth-child(-n+4)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="5"] .star:nth-child(-n+5)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="6"] .star:nth-child(-n+6)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="7"] .star:nth-child(-n+7)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="8"] .star:nth-child(-n+8)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="9"] .star:nth-child(-n+9)::after { opacity: 1 !important; }
.rel-intensity .rel-stars[data-max="10"][data-value="10"] .star:nth-child(-n+10)::after { opacity: 1 !important; }

.rel-item .pfm-scale::before {
    background: linear-gradient(90deg, var(--neg), var(--mid), var(--pos));
}

.rel-item.rel--pro .pfm-scale::before {
    background: linear-gradient(90deg, var(--pfm-neutral), var(--pfm-positive));
}

.rel-item.rel--contra .pfm-scale::before {
    background: linear-gradient(90deg, var(--pfm-negative), var(--pfm-neutral));
}

/* ---------------------------------------------------------
   Figures and embedded portraits
   --------------------------------------------------------- */

.pfm-figure {
    display: inline-grid;
    gap: var(--space-xs);
    max-width: 100%;
}

.pfm-figure--120,
.pfm-figure--120x200 {
    width: 120px;
}

.pfm-fig--float-right {
    float: right;
    margin: 3px 0 var(--space-s) 16px;
}

.pfm-fig--float-left {
    float: left;
    margin: 3px 16px var(--space-s) 0;
}

.pfm-img {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
    background: var(--bg-deep);
    border: 1px solid var(--hairline-strong);
    filter: grayscale(1) contrast(1.05) brightness(0.86);
}

.pfm-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pfm-img--120 {
    width: 120px;
    height: 120px;
}

.pfm-img--120x200 {
    width: 120px;
    height: 200px;
}

.pfm-caption {
    max-width: 100%;
    color: var(--txtcol-soft);
    font-size: var(--txtxxsmall);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-align: left;
    text-transform: uppercase;
    word-break: break-word;
}

.pfm-caption:empty {
    display: none;
}

.pfm-figure--wide,
.pfm-figure--wide *,
.post .pfm-figure--wide,
.post .pfm-figure--wide * {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.pfm-figure--wide {
    display: block;
    width: 100%;
    margin: var(--space-m) 0;
    padding: 0;
    overflow: hidden;
}

.pfm-figure--wide .pfm-img--wide {
    display: block;
    width: 100%;
    height: 250px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hairline-strong);
    outline: 0;
}

.pfm-figure--wide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.post .pfm-figure--wide {
    height: auto;
    margin-inline: 0;
    padding-inline: 0;
}

.rel-head--with-portrait {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.rel-head-main,
.rel-head-main2 {
    min-width: 0;
}

.rel-head-main2 {
    display: grid;
    gap: 10px;
}

.rel-mini-portrait {
    width: 58px;
    height: 58px;
    overflow: hidden;
    background: var(--bg-deep);
    border: 1px solid var(--hairline-strong);
    filter: grayscale(1) contrast(1.06) brightness(0.84);
}

.rel-mini-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .pfm-relations,
    .rel-sections.rel--grid .pfm-relations {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .pfm-2col,
    .pfm-qna.pfm-2col,
    .pfm-family,
    .pfm-magic-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .pfm-header {
        grid-template-columns: 1fr;
    }

    .pfm-portrait {
        width: min(220px, 100%);
    }

    .pfm-card {
        padding: var(--space-m);
    }
}

@media (max-width: 680px) {
    .pfm-figure.pfm-fig--float-right,
    .pfm-figure.pfm-fig--float-left {
        float: none;
        display: block;
        margin: var(--space-s) 0;
        max-width: 100%;
    }

    .pfm-figure.pfm-fig--float-right .pfm-img,
    .pfm-figure.pfm-fig--float-left .pfm-img {
        margin-inline: auto;
    }
}

@media (max-width: 520px) {
    .rel-head,
    .rel-metrics {
        grid-template-columns: 1fr;
    }

    .rel-head {
        display: grid;
        justify-items: start;
    }

    .rel-intensity {
        justify-items: start;
    }

    .rel-head--with-portrait {
        grid-template-columns: 1fr;
    }

    .rel-mini-portrait {
        grid-row: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pfm-portrait img {
        transition: none;
    }
}