/* ============ FRONTEND ============ */
.orca-pedigree {
    --op-bg: #f9fafb;
    --op-card: #ffffff;
    --op-text: #111827;
    --op-strong: #111827;
    --op-label: #6b7280;
    --op-muted: #6b7280;
    --op-accent: #2563eb;
    --op-line: #2563eb;
    --op-size: 130px;
    --op-row-h: 320px;    /* vertical band for one parent generation */
    font-family: inherit;
    color: var(--op-text);
    margin: 2rem 0;
    overflow-x: auto;
    padding: 24px 24px 12px;
    box-sizing: border-box;
}

.orca-pedigree__tree { position: relative; width: max-content; margin: 0 auto; }
.orca-chart-node { position: absolute; width: var(--op-size); }
.orca-pedigree__tree:not(.is-laid-out) .orca-chart-node { position: relative; display: inline-block; vertical-align: top; margin-right: 36px; }
.orca-chart-lines { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.orca-card__info { overflow-wrap: anywhere; }
.orca-card__avatar:focus-visible { outline: 3px solid var(--op-line); outline-offset: 4px; }

/* SVG lines */
.orca-line {
    fill: none;
    stroke: var(--op-line);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: var(--op-length, 300);
    stroke-dashoffset: var(--op-length, 300);
    animation: orca-draw 1s ease forwards;
}
.orca-line--a     { animation-delay: .15s; }
.orca-line--b     { animation-delay: .15s; }
.orca-line--merge { animation-delay: .85s; }
.orca-line--out   { animation-delay: 1.4s; }

@keyframes orca-draw { to { stroke-dashoffset: 0; } }

/* Cards */
.orca-card {
    margin: 0;
    text-align: center;
    width: var(--op-size);
    opacity: 0;
    transform: translateX(-20px);
    animation: orca-fade-in .7s ease forwards;
    animation-delay: calc(var(--i, 0) * .15s + .2s);
}
@keyframes orca-fade-in { to { opacity: 1; transform: translateX(0); } }

.orca-card__avatar-wrap {
    position: relative;
    width: var(--op-size);
    height: var(--op-size);
    margin: 0 auto;
    padding-top: 6px;
    box-sizing: content-box;
}

.orca-card__avatar {
    position: relative;
    width: var(--op-size);
    height: var(--op-size);
    border-radius: 50%;
    overflow: hidden;
    background: var(--op-bg);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
    border: 4px solid #fff;
    box-sizing: border-box;
}
.orca-card__avatar:hover {
    transform: scale(1.04);
    box-shadow: 0 14px 32px rgba(37,99,235,.35);
}
.orca-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.orca-gender {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    z-index: 3;
    pointer-events: none;
}
.orca-gender--male   { background: #2563eb; }
.orca-gender--female { background: #db2777; }

.orca-card__info {
    margin-top: .7rem;
    font-size: .85rem;
    line-height: 1.35;
}
.orca-card__name {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .25rem;
    color: var(--op-text);
}
.orca-card__row  {
    color: var(--op-text);
    font-size: .78rem;
}
.orca-card__label { font-weight: 600; color: var(--op-label); }
.orca-card__value { color: var(--op-text); }

/* Credit line */
.orca-pedigree__credit {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .78rem;
    color: var(--op-muted);
    letter-spacing: .02em;
}
.orca-pedigree__credit a { color: var(--op-accent); text-decoration: none; font-weight: 600; }
.orca-pedigree__credit a:hover { text-decoration: underline; }

/* Lightbox */
.orca-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 99999;
    opacity: 0;
    transition: opacity .3s ease;
    padding: 2rem;
}
.orca-lightbox.is-open { opacity: 1; }
.orca-lightbox__img {
    max-width: 90vw; max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    transform: scale(.9);
    transition: transform .3s ease;
}
.orca-lightbox.is-open .orca-lightbox__img { transform: scale(1); }
.orca-lightbox__close {
    position: absolute; top: 20px; right: 30px;
    background: none; border: none;
    font-size: 44px; color: #fff;
    cursor: pointer; line-height: 1;
}

/* Mobile */
@media (max-width: 700px) {
    .orca-pedigree { --op-size: 100px; --op-row-h: 240px; padding: 18px 12px 10px; }
    .orca-connector { width: 80px; }
    .orca-connector--main { width: 80px; }
    .orca-connector--deep { width: 60px; }
    .orca-parents-block,
    .orca-grandparents-col,
    .orca-deep-lineage__deeper { gap: 1.5rem; }
}

/* ============ ADMIN (unchanged) ============ */
.orca-admin .orca-form { max-width: 1100px; }
.orca-admin h3 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 6px;
    margin-top: 2rem;
}
.orca-admin__intro { color: #555; }

.orca-admin__credit {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e5e5;
    color: #666;
    font-size: .85rem;
}
.orca-admin__credit a { color: #2563eb; text-decoration: none; }
.orca-admin__credit a:hover { text-decoration: underline; }

/* ---- Tree editor ---- */
.orca-tree-editor {
    border: 1px dashed #c3c4c7;
    border-radius: 8px;
    padding: 1rem;
    background: #fafafa;
}

.ot-node {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: .75rem;
    background: #fff;
    margin: .5rem 0;
    position: relative;
}
.ot-node__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    font-weight: 700;
    margin-bottom: .4rem;
}
.ot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .75rem;
}
.ot-grid label { font-size: .78rem; color: #374151; display: block; margin-bottom: .15rem; }
.ot-grid input,
.ot-grid select { width: 100%; }
.ot-grid .ot-image-row { display: flex; gap: .35rem; }
.ot-grid .ot-image-row input { flex: 1; }

.ot-actions {
    margin-top: .5rem;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.ot-actions button { font-size: .75rem !important; }

.ot-parents {
    margin-top: .6rem;
    padding-left: .75rem;
    border-left: 3px solid #2563eb;
}
.ot-slot-title {
    font-size: .72rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: .25rem;
}
/* A hidden modal must never intercept clicks; modal is moved to body on open. */
.orca-lightbox[hidden] { display: none !important; }
.orca-lightbox { z-index: 2147483647; box-sizing: border-box; }
.orca-lightbox__img { width: auto !important; height: auto !important; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    .orca-card { animation: none; opacity: 1; transform: none; }
    .orca-line { animation: none; stroke-dashoffset: 0; }
    .orca-lightbox, .orca-lightbox__img { transition: none; }
}