/* ============================== */
/*          ROOT VARIABLES        */
/* ============================== */
* {
    --primary: #9747FF;
}

:root {
    --teko: 'Teko', sans-serif;
    --roboto: 'Roboto', sans-serif;
    --top-navigation-height: 55px;

    --main-background-color: #f2f6fc;
    --card-background-color: #FFFFFF;
    --navigation-color: var(--card-background-color);
    --border-color: rgba(0, 0, 0, 0.28);
    --primary: #9747FF;
    --color_1: #FEB4B6;
    --color_2: #BFD3F8;
    --color_3: #8EDBA9;
    --color_4: #DFA0F2;
    --color_5: #1583E9;

    --primary-text: rgba(0, 0, 0, 0.87);
    --secondary-text: rgba(0, 0, 0, 0.6);
    --tertiary-text: rgba(0, 0, 0, 0.4);

    --shadow: rgba(0, 0, 0, 0.2);

    --table-header: #efe8f8;
    --table-row: rgba(47, 47, 65, 0.12);
}

/* The scheme is chosen in theme.js, which resolves the stored preference
 * (system/light/dark) onto <html data-theme> before first paint — the same
 * hook tailwind's `dark:` variant uses. */
html[data-theme="dark"] {
    --main-background-color: #000000;
    --card-background-color: #1d1d23;
    --navigation-color: var(--card-background-color);
    --border-color: rgba(255, 255, 255, 0.28);
    --primary: #9747FF;
    --color_1: #a27173;
    --color_2: #6e85ab;
    --color_3: #588f6c;
    --color_4: #6b3d79;
    --color_5: #3987cb;

    --primary-text: rgba(255, 255, 255, 0.87);
    --secondary-text: rgba(255, 255, 255, 0.6);
    --tertiary-text: rgba(255, 255, 255, 0.4);

    --shadow: rgba(229, 246, 255, 0.12);

    --table-header: #28272a;
    --table-row: rgba(229, 235, 241, 0.12);
}

/* ============================== */
/*         BASIC RESET            */
/* ============================== */

* {
    margin: 0;
    padding: 0;
    font-family: "Rajdhani", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body,
html,
* {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
form,
label,
fieldset,
address,
span,
div {
    margin: 0;
    padding: 0;
    color: var(--primary-text)
}


/* ============================== */
/*         FONT STYLES            */
/* ============================== */

.rajdhani-light {
    font-family: "Rajdhani", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.rajdhani-regular {
    font-family: "Rajdhani", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.rajdhani-medium {
    font-family: "Rajdhani", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.rajdhani-semibold {
    font-family: "Rajdhani", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.rajdhani-bold {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-style: normal;
}

/* ============================== */
/*         GLOBAL STYLES          */
/* ============================== */

/* Clearance for the fixed navbar: py-2 (16px) plus the 46px search field.
 * Mobile has no search column so the bar is shorter there, and the extra is
 * harmless. base.html carries no spacer of its own — this is the one place. */
body {
    padding-top: 70px;
}

body,
html {
    background-color: var(--main-background-color);
    height: 100vh;
    overflow-x: hidden;
}

html {
    font-size: 18px !important;
}

textarea {
    background-color: var(--main-background-color);
    color: var(--primary-text);
    outline: transparent;
    border: none;
    border-radius: 1.5rem;
    padding: 1rem !important;
}

.teko {
    font-family: var(--teko) !important;
}

.roboto {
    font-family: var(--roboto) !important;
}

/* ============================== */
/*          NAVIGATION            */
/* ============================== */

.navigation {
    --background-color: var(--navigation-color);
    --tint-color: black;
    padding: 8px 16px;
    background-color: var(--background-color);
    top: 0;
    position: sticky;
    width: 100%;
    z-index: 1000;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================== */
/*            CARDS               */
/* ============================== */

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
    list-style: none;
    margin: 0;
}

.card {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}

.card-content {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    min-height: 80px;
}

/* ============================== */
/*         FORMS & INPUTS         */
/* ============================== */

.default-form>label,
.default-form>input,
.default-form>select {
    display: block;
    width: 100%;
    padding: 5px 0;
}

.default-form label {
    margin-top: 20px;
    font-size: 1rem;
    font-weight: bold;
}

.default-form {
    max-width: 760px;
    margin: auto;
    background-color: var(--background-color) !important;
}

.search-form {
    width: 100%;
    max-width: 760px;
}

.search-input,
.default-form input,
.default-form select,
.default-form textarea {
    width: 100%;
    padding: 6px 16px;
    background-color: var(--navigation-color);
    font-size: 14px;
    border-radius: 100px;
    outline: none;
    color: var(--primary-text);
}

.default-form textarea {
    border-radius: 10px;
}

.search-input::placeholder {
    color: var(--tertiary-text);
}

.search-input:hover,
.search-input:focus {
    background-color: var(--card-background-color);
    box-shadow: 2px 4px 10px var(--shadow);
}

/* ============================== */
/*        FAMILY TREE STYLES      */
/* ============================== */

.family-tree,
.family-tree li {
    list-style: none;
}

.family-tree {
    margin: 0px 0px 0px 20px;
    line-height: 2em;
    font-family: Arial;
}

.family-tree-wrapper {
    height: calc(100vh - var(--top-navigation-height));
    overflow-y: auto;
}

.family-tree li {
    font-size: 16px;
    position: relative;
}

.tree-item-and-actions {
    width: 100%;
    display: inline-flex;
    align-items: center;
}

.person-item {
    text-decoration: none;
    border-radius: 4px;
    background-color: var(--card-background-color);
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 100%;
    border-left: 0 solid var(--primary);
    color: black;
    gap: 10px;
    box-shadow: 2px 2px 2px var(--shadow);
    transition: all 0.2s ease-in-out;
}

.person-item-image {
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 999px;
}

.person-item:hover {
    box-shadow: 5px 8px 10px var(--shadow);
    border-right-width: 16px;
}

.person-item-detail-info {
    padding: 0;
    margin: 0;
}

.parent {
    opacity: 0.4;
}

.parent:hover {
    opacity: 1;
}

.current {
    border-left: 10px solid var(--primary);
    background-color: var(--color_2);
}

.daughter {
    border-left: 10px solid var(--color_1);
}

.current.daughter {
    border-left: 10px solid var(--color_1);
    background-color: var(--color_1);
}

.tag {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    background-color: var(--shadow);
}

.tag-1 {
    background-color: var(--color_1);
}

.tag-2 {
    background-color: var(--color_2);
}

.caret {
    cursor: pointer;
    user-select: none;
    /* Prevent text selection */

}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
    color: var(--secondary-text);
    display: inline-flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 18px;
    /*font-size: 12px;*/
    height: 45px;
    content: " ";
    width: 45px;
    font-weight: bold;
    border: 2px dotted var(--secondary-text);
    background-color: var(--card-background-color);
    z-index: 2;
    border-radius: 999px;
}

.caret::after {
    height: 2px;
    position: absolute;
    width: 20px;
    top: 34px;
    left: 30px;
    content: "";
    padding: 0 20px;
    background-color: black;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
    content: '+' !important;
}

.children {
    display: block;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.inactive {
    display: none;
}

.person-information-wrapper {
    height: calc(100vh - var(--top-navigation-height));
    overflow-y: auto;
}

.tree-struct li:before {
    position: absolute;
    left: -44px;
    top: -19px;
    content: "";
    display: block;
    border-left: 1px solid var(--tertiary-text);
    height: 4.2rem;
    border-bottom: 1px solid var(--tertiary-text);
    width: 51px;
}

.tree-item-with-address::before {
    /*top: -88px !important;*/
    /*height: 6.6rem !important;*/
}

.tree-item {
    position: relative;
}

.tree-item::before {
    content: '';
    width: 28px;
    height: 2px;
    background-color: var(--primary-text);
    display: block;
    position: absolute;
    top: 24px;
    left: -28px;
}


.tree-struct li:after {
    position: absolute;
    left: -44px;
    bottom: -7px;
    content: "";
    display: block;
    border-left: 1px solid var(--tertiary-text);
    height: 100%;
}

.tree-struct li.root {
    margin: 0px 0px 0px -20px;
}

.tree-struct li.root:before {
    display: none;
}

.tree-struct li.root:after {
    display: none;
}

.tree-struct li:last-child:after,
.tree-struct>li:first-child:before {
    display: none;
}

.list-generation-separator-text {
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    font-family: var(--teko);
    border: 1px solid var(--border-color);
    margin: 20px;
    border-radius: 100px;
    color: var(--tertiary-text);
}

.selected-parent-container .active {
    display: flex;
}

.selected-person-wrapper {
    background-color: var(--card-background-color);
    border-radius: 20px;
    /*padding: 20px;*/
    transition: background-color 0.5s ease-in-out;
}

.label-and-action {
    display: flex;
    align-items: center;
    height: 55px;
    justify-content: space-between;
}

.selected-parent-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    min-height: 80px;
    /*box-shadow: 3px 3px 5px var(--shadow);*/
    background-color: var(--main-background-color);
    padding: 20px;
    border-radius: 10px;
}


.suggestion-item-container {
    border-radius: 20px;
    background-color: var(--card-background-color);
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow: auto;
    box-shadow: 10px 10px 20px var(--shadow);
}

.suggestion-item {
    cursor: pointer;
    text-decoration: none;
    padding: 20px;
}

.suggestion-item:hover {
    background-color: var(--main-background-color);
}

.search-result-item-inner {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.search-result-generation-name {
    display: flex;
    align-items: center;
    gap: 20px;
}

/*.person-generation {*/
/*    height: 35px;*/
/*    width: 35px;*/
/*    font-weight: bold;*/
/*    border-radius: 1000px;*/
/*    border: 3px dashed var(--primary-text);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

.result-name {}

.result-address {
    font-size: 0.8rem;
    font-color: var(--secondary-text);
}

.person-id {
    padding: 5px 16px;
    border-radius: 100px;
    background-color: var(--border-color);
    color: white;
}

#selected_parent {
    height: 40px;
}

.focusable {
    /* opacity: 0.4 */
}

.focusable:focus {
    opacity: 1;
}

#draggable {
    overflow-x: hidden;
    overflow-y: scroll;
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
    width: 0 !important;
    display: none !important;
}

.draggable::-webkit-scrollbar,
.draggable::-webkit-scrollbar-thumb,
.draggable::-webkit-scrollbar-track,
.draggable::-webkit-scrollbar-thumb {
    width: 0 !important;
    display: none !important;
}

.dark *::-webkit-scrollbar-thumb,
.dark *::-webkit-scrollbar-track,
.dark *::-webkit-scrollbar-thumb {
    width: 0 !important;
    display: none !important;
}


/* ============================== */
/*       INFO AND BUTTON STYLES   */
/* ============================== */

.id-and-gen {
    gap: 20px;
    padding: 20px;
}

.id-and-gen-item {
    flex-direction: column;
    gap: 6px;
    font-family: var(--teko);
}

.rnd-info {
    height: 45px;
    width: 45px;
    border-radius: 100px;
    border: 1px solid var(--border-color);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}

.rnd-info-sm {
    height: 24px !important;
    width: 24px !important;
    font-size: 14px !important;
}

.btn-transparent {
    color: var(--primary-text);
}

.btn-transparent:hover {
    color: var(--primary-text) !important;
    background-color: var(--shadow) !important;
}

.rnd-btn {
    text-decoration: none;
    height: 30px;
    width: 30px;
    display: inline-flex;
    border-radius: 999px;
    align-items: center;
    border: none;
    justify-content: center;
}

.rnd-btn-primary {
    background-color: var(--primary);
    color: white !important;
}

.rnd-btn-primary:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

.rnd-btn:hover {
    background-color: var(--border-color);
}

.rnd-dotted-outline {
    border: 1px dotted var(--primary);
    background: transparent !important;
}

.rnd-dotted-outline:hover,
.rnd-dotted-outline:focus {
    background-color: var(--primary) !important;
    color: white !important;
    border: 1px solid var(--primary) !important;
}

.rnd-dotted-outline.rnd-btn-danger {
    border: 1px dotted orangered;
    color: orangered;
}

.rnd-btn-danger:hover,
.rnd-btn-danger:focus {
    background-color: orangered !important;
    border: 1px solid orangered !important;
    color: white;
}

.all-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination {}

.step-links {
    display: flex;
    gap: 10px;
}

.pagination-item {
    text-decoration: none;
    background: var(--card-background-color);
    border-radius: 4px;
    color: var(--secondary-text);
    height: 55px;
    width: 55px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pagination-item:hover {
    background: var(--primary) !important;
    color: white !important;
}

.current-pagination {
    background: var(--primary);
    color: white;
}

.info-card {}

.spouse-info {
    padding: 10px;
    margin: 10px;
    border-radius: 4px;
}

.spouse-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

/* ============================== */
/*        SAFE AREAS              */
/* ============================== */


/*!* Apply frontend to the safe area *!*/
/*.main-content {*/
/*    padding-top: constant(safe-area-inset-top); !* For iOS 11.0-11.1 *!*/
/*    padding-top: env(safe-area-inset-top); !* For iOS 11.2+ and newer *!*/
/*    padding-bottom: constant(safe-area-inset-bottom);*/
/*    padding-bottom: env(safe-area-inset-bottom);*/
/*    padding-left: constant(safe-area-inset-left);*/
/*    padding-left: env(safe-area-inset-left);*/
/*    padding-right: constant(safe-area-inset-right);*/
/*    padding-right: env(safe-area-inset-right);*/
/*}*/


/* ============================== */
/*        MEDIA QUERIES           */
/* ============================== */

@media all and (max-width: 720px) {
    * {
        --top-navigation-height: 170px;
    }

    .navigation {}

    .actions {
        padding: 20px 0;
    }
}


/*


*/

.bg-card {
    background-color: var(--card-background-color) !important;
}

.person-card-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}


.filter-by-address-form select {
    border-radius: 8px !important;
    background-color: var(--main-background-color);
    padding: 8px 16px;
}

.bg-main {
    background-color: var(--main-background-color);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--primary) !important;
    border-style: double !important;
    border-width: 10px !important;
    border-color: var(--color_3) !important;
}

/*SELECT 2 CUSTOM CSS*/
.select2-container--default .select2-selection--single {
    background-color: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    height: 35px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--primary-text) !important;
    font-size: 16px !important;
}

.select2-dropdown {
    background-color: var(--card-background-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
}

.select2-search__field {
    background-color: var(--card-background-color) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    padding: 10px 20px !important;
    font-size: 14px;
}

.select2-results__option {
    padding: 10px 20px !important;
    font-size: 16px;
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--primary) !important;
}

/*PROFILE ITEM*/

.profiles-container {
    display: grid;
    /* auto-fill keeps empty tracks, so a lone card stays one column wide. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    grid-gap: 24px;
    /* The dashboard holds this grid to a full viewport; rows must stack from
     * the top instead of stretching to fill it. */
    align-content: start;
}

/* Person card: one surface, a tinted inset for relations, no borders. */
.person-card {
    --pc-surface: color-mix(in srgb, var(--primary-text) 4%, var(--card-background-color));
    --pc-surface-strong: color-mix(in srgb, var(--primary-text) 8%, var(--card-background-color));
    --pc-muted: color-mix(in srgb, var(--primary-text) 58%, transparent);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    min-width: 0;
    height: 100%;
    padding: 1.25rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
    color: var(--primary-text);
    list-style: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 15rem;
}

.person-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.25);
}

.person-card--draft {
    background-color: color-mix(in srgb, #facc15 14%, var(--card-background-color));
}

.person-card svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.person-card__cover {
    margin: -1.25rem -1.25rem 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: var(--pc-surface);
}

.person-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.person-card:hover .person-card__cover img {
    transform: scale(1.04);
}

.person-card__body {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.person-card--cover .person-card__body {
    align-items: flex-end;
}

.person-card__photo {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    pointer-events: none;
}

.person-card--cover .person-card__photo {
    align-self: flex-start;
    margin-top: -3.5rem;
}

.person-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--pc-surface-strong);
    color: var(--pc-muted);
}

.person-card--cover .person-card__avatar {
    width: 6rem;
    height: 6rem;
    box-shadow: 0 0 0 4px var(--card-background-color);
}

.person-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-card .person-card__avatar .person-card__icon {
    width: 45%;
    height: 45%;
}

.person-card__gen {
    position: absolute;
    left: -0.35rem;
    bottom: -0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background-color: var(--primary-text);
    box-shadow: 0 0 0 3px var(--card-background-color);
    color: var(--card-background-color);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.person-card .person-card__gen svg {
    width: 0.7rem;
    height: 0.7rem;
}

.person-card__title {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.person-card--cover .person-card__title {
    gap: 0;
}

.person-card--cover .person-card__id {
    line-height: 1.2;
}

.person-card__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: inherit !important;
    text-decoration: none !important;
}

.person-card__name span {
    font-weight: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-card__name::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.person-card .person-card__verified {
    color: #3b82f6;
}

.person-card__id {
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pc-muted);
}

.person-card__stats {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.75rem;
}

.person-card__stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 0.9rem;
    background-color: var(--pc-surface);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.person-card .person-card__stat svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--pc-muted);
}

.person-card__place {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: auto;
    padding: 0.85rem 1rem;
    border-radius: 1.1rem;
    background-color: var(--pc-surface);
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--primary-text);
}

.person-card__relations + .person-card__place {
    margin-top: 0;
}

.person-card .person-card__place svg {
    width: 0.9rem;
    height: 0.9rem;
    margin-top: 0.2rem;
    color: var(--pc-muted);
}

.person-card__place .address-line {
    min-width: 0;
}

.person-card .person-card__place--empty,
.person-card .person-card__place--empty svg {
    color: color-mix(in srgb, var(--primary-text) 35%, transparent);
}

.person-card__relations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.5rem;
    border-radius: 1.1rem;
    background-color: var(--pc-surface);
}

.person-card__relation {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border-radius: 0.8rem;
    color: inherit !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.person-card__relation:hover {
    background-color: var(--card-background-color);
}

.person-card__mini {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--pc-surface-strong);
    color: var(--pc-muted);
}

.person-card__mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.person-card__relation-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    line-height: 1.3;
}

.person-card__relation-label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--pc-muted);
}

.person-card .person-card__relation-label svg {
    width: 0.7rem;
    height: 0.7rem;
}

.person-card__relation-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
}

.profile-card {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    background-color: var(--card-background-color);
    border-radius: 10px;
    transform: translateY(100px);
    border: 2px solid transparent;
    /*overflow: hidden;*/
    /*max-width: 300px;*/
    /*min-height: 500px;*/
    transition: all 0.1s ease-in-out;
}

.profile-card:hover {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--primary);
    transform: scale(1.1) translateY(100px);
    ;
}

.profile-info {
    padding: 20px;
}


.expertise {
    color: grey;
    font-size: 18px;
}

.email {
    color: black;
    font-size: 18px;
}


.profile-image-container {
    height: 200px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

}

.profile-image {
    height: 200px;
    width: 200px;


    border-radius: 100px;
    object-fit: cover;
    border: 5px solid var(--card-background-color);
    box-shadow: 10px 10px 10px var(--shadow);

}

.image-translate {
    position: absolute;
    transform: translateY(-50px);
    transition: all 0.2s ease-in-out;
}


.profile-card:hover .image-translate {
    transform: scale(1.1) translateY(-70px);
    box-shadow: 30px 30px 20px var(--shadow);

}

.languages-known {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.language-item img {
    max-height: 20px;
}

.expertise {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.expertise-item {
    background-color: var(--shadow);
    color: var(--secondary-text);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 14px;
}

.faculty-and-year {
    font-size: 0.8rem;
}


/*Profile dropdown*/

/*.action {*/
/*    position: fixed;*/
/*    top: 20px;*/
/*    right: 30px;*/
/*}*/

.action .profile {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.action .profile img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.action .menu {
    position: absolute;
    top: 120px;
    right: 20px;
    padding: 10px 20px;
    background: var(--card-background-color);
    /*width: 200px;*/
    /*box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);*/
    box-shadow: 10px 10px 20px var(--shadow);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    transition: 0.2s;
    visibility: hidden;
    opacity: 0;
}

.action .menu.active {
    top: 80px;
    visibility: visible;
    opacity: 1;
}

.action .menu::before {
    content: "";
    position: absolute;
    top: -5px;
    right: 28px;
    width: 20px;
    height: 20px;
    background: var(--card-background-color);
    transform: rotate(45deg);
}

.action .menu h3 {
    width: 100%;
    text-align: center;
    font-size: 18px;
    padding: 20px 0;
    font-weight: 500;
    /*color: #555;*/
    line-height: 1.5em;
}

.action .menu h3 span {
    font-size: 14px;
    color: #cecece;
    font-weight: 300;
}

.action .menu ul {
    margin: 0;
    padding: 0;
}

.action .menu ul li {
    list-style: none;
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

.action .menu ul li img {
    margin-right: 10px;
    opacity: 0.5;
    transition: 0.2s;
}

.action .menu ul li:hover img {
    opacity: 1;
}

.action .menu ul li a {
    display: inline-block;
    text-decoration: none;
    color: var(--secondary-text);
    font-weight: 500;
    transition: 0.2s;
}

.action .menu ul li {
    /*background-color: var(--primary);*/
    padding: 8px 20px;
    border-radius: 8px;
    /*color: white;*/
}

.action .menu ul li:hover {
    background-color: var(--primary);
    color: white;
}


.team-up-button {
    background-color: var(--border-color);
    color: var(--primary-text);
    width: 100%;
}

.team-up-button:hover {
    background-color: var(--primary);
    color: white;
}

.profile-detail-image {
    width: 300px;
    height: 300px;
    object-fit: cover;

    border-radius: 300px;
    box-shadow: 10px 30px 30px var(--shadow);
}

.remarks {
    padding: 20px;
    margin: 20px;

    background-color: var(--shadow);
    border-radius: 20px;
}

.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.tree-active {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    z-index: 99999;
    transition: all 0.5s ease-in-out;
}

/* Navigation progress -- driven only by real events, see
   static/js/progress_bar_scripts.js. Two states, and nothing appears at all
   unless a navigation is genuinely slower than ~300ms:

   .is-waiting  the outgoing request is in flight. Its duration is unknowable,
                so the bar is indeterminate rather than a made-up percentage.
   (default)    determinate -- a real count of this page's finished
                subresources, completed by the window load event. */
#progress-bar-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: transparent;
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms ease;
}

#progress-bar-container.is-navigating {
    opacity: 1;
    transition: opacity 80ms ease;
}

#progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
    transition: width 150ms linear;
}

#progress-bar-container.is-waiting #progress-bar {
    width: 28%;
    background: linear-gradient(90deg, transparent, var(--primary) 35%, var(--primary) 65%, transparent);
    transition: none;
    animation: nav-waiting 950ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes nav-waiting {
    from {
        transform: translateX(-100%);
    }

    to {
        /* A 28%-wide bar crossing the full container is 128/28 of its own width. */
        transform: translateX(457%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #progress-bar {
        transition: none;
    }

    #progress-bar-container.is-waiting #progress-bar {
        width: 100%;
        background: var(--primary);
        animation: nav-waiting-pulse 1.2s ease-in-out infinite;
    }

    @keyframes nav-waiting-pulse {

        0%,
        100% {
            opacity: 0.3;
        }

        50% {
            opacity: 1;
        }
    }
}


.transition-out {
    transform: translateX(-150%);
    transition: transform 0.4s ease-in-out;
}


/* STYLE THE DEFAULT DJANGO FORM */

.django-form input[type="text"],
.django-form input[type="number"],
.django-form input[type="email"],
select {
    background: var(--card-background-color) !important;
    border: var(--border-color) solid 1px !important;
    border-radius: 1rem !important;
    padding: 0.25rem 0.5rem;
}

.django-form p {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.django-form p input {
    width: 100%;
}

.django-form ul {
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: circle;
}

.errorlist {
    padding: 20px 30px !important;
    list-style: none !important;
    border-radius: 20px;
    background-color: rgba(255, 0, 0, 0.5);
}

.errorlist li {
    color: white;
}

select {
    padding: 0.25rem 0.5rem !important;
    background: transparent !important;
}

.collapsible-form-item select {
    width: 200px;
}

.django-form input::file-selector-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background-color: var(--primary);
    padding: 0.5rem 1.5rem;
    border-radius: 10rem;
    color: white;
    outline: none;
    border: none;
}

.django-form input[type="text"],
.django-form input[type="number"],
.django-form input[type="email"],
.django-form select,
.django-form a,
.django-form input[type="file"],
.django-form .combo,
.select2 {
    margin: 0 0 2rem 0;
}

.django-form a {
    background-color: var(--main-background-color);
    border-radius: 1000px;
    padding: 0.5rem 1.5rem;
    display: inline-block;
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: clip;
    font-style: italic;
}

.django-form a:hover {
    background-color: var(--color_2);
}

.django-form input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 4px 0;
}

.django-form label {
    padding: 0 0 0.5rem 0;
    font-weight: bold !important;
}

.gallery-image:hover {
    filter: brightness(0.95);
}

input[type="checkbox"],
input[type="radio"] {
    width: 25px !important;
    height: 25px !important;
    background-color: transparent;
    border-radius: 10000px !important;
    vertical-align: middle;
    border: 2px dotted var(--border-color);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    border: 0.5rem double var(--color_4);
    background-color: var(--primary) !important;
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"] {
    padding: 0.25rem 0.5rem;
    border-radius: 20rem;
    background: transparent;
    border: 1px solid var(--border-color) !important;
}

table {
    margin: 0 auto;
    border-collapse: collapse;
    border-style: hidden;
    /*Remove all the outside
    borders of the existing table*/
}

table tr:nth-child(odd) {
    background: var(--table-row);
}

table td {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    /*border: 1px solid var(--border-color);*/
}

table th {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    background: var(--table-header);
}

table th {
    font-weight: bold;
}

#id_payment,
#id_payment label {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#id_payment label {
    background: var(--main-background-color);
    padding: 0.8rem;
    border-radius: 1rem;
}

#id_payment label:hover {
    background: var(--color_4);
}

select:disabled {
    opacity: 0.5;
}

select:enabled {
    opacity: 1;
}



/* ============================== */
/*      NAVIGATION BAR & SEARCH   */
/* ============================== */

/*
 * Surfaces, not borders. Three levels are in play and each is told apart by its
 * background alone:
 *
 *   bar    -> --card-background-color  (floated over the page)
 *   field  -> --main-background-color  (recessed into the bar)
 *   chip   -> --card-background-color  (raised back out of the field)
 *
 * The pair inverts correctly in dark mode, where card (#1d1d23) is the lighter
 * of the two, so "recessed" stays legible without a single hairline.
 *
 * Everything tinted here is derived with color-mix() from --primary-text /
 * --card-background-color, both of which flip with the colour scheme, so no
 * rule in this block needs a dark-mode twin.
 */

.top-navigation {
    background-color: color-mix(in srgb, var(--card-background-color) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ---------- search field ---------- */

/* An uplifted surface: a step DARKER than the card in light mode, a step
 * LIGHTER in dark mode. --primary-text flips with the scheme, so one mix does
 * both. --main-background-color cannot serve here — it is #000 in dark mode,
 * which reads as sunken against the card. */
.top-navigation,
#nav-filter-panel {
    --nav-surface: color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color));
    --nav-surface-strong: color-mix(in srgb, var(--primary-text) 11%, var(--card-background-color));
}

/* Capped in px, not rem: html sets font-size 18px, so max-w-5xl resolved to
 * ~1150px — wider than this flex column ever gets, which is why it read as
 * having no effect. 820px is under the column at every desktop width, so the
 * bar stays centred instead of stretching. Change this one number to retune. */
#nav-search-shell {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
}

.nav-field {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 4px;
    gap: 4px;
    background-color: var(--nav-surface);
    border-radius: 999px;
    transition: box-shadow 0.15s ease-in-out;
}

.nav-field:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 32%, transparent);
}

/*
 * The query input owns the full height of the field and carries no chrome of
 * its own — the field around it IS the input, visually.
 *
 * Qualified with `input` on purpose: the global
 * `input[type="number"], input[type="text"], ...` rule near the top of the
 * FORMS section sets `border: 1px solid !important`, and an attribute selector
 * out-specifies a bare class, so `.nav-search-input` alone lost to it even
 * with !important. `input.nav-search-input` ties on specificity and wins on
 * order, since this block is the last in the file.
 */
input.nav-search-input {
    flex: 1 1 auto;
    align-self: stretch;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 0 0.6rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    outline: none;
    color: var(--primary-text);
    font-size: 0.9rem;
}

input.nav-search-input:focus,
input.nav-search-input:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

input.nav-search-input::placeholder {
    color: var(--tertiary-text);
}

/* The leading icon of every search field built on .nav-field. */
.nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 38px;
    padding: 0 0.7rem;
    flex-shrink: 0;
    border-radius: 999px;
    background-color: var(--card-background-color);
    color: var(--primary-text);
    pointer-events: none;
}

.nav-search-chip {
    color: var(--primary);
}

/* The "|" between the query and the filter toggle. */
.nav-divider {
    flex-shrink: 0;
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background-color: color-mix(in srgb, var(--primary-text) 16%, transparent);
}

/* Icon-only actions: the filter toggle in the field, and the buttons in the
 * actions column. */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--secondary-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.nav-icon-btn:hover {
    background-color: color-mix(in srgb, var(--primary-text) 7%, transparent);
    color: var(--primary-text);
}

.nav-icon-btn[aria-expanded="true"] {
    background-color: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}

.nav-icon-btn-primary {
    width: 40px;
    height: 40px;
    background-color: var(--primary);
    color: #fff;
}

.nav-icon-btn-primary:hover {
    background-color: var(--primary);
    color: #fff;
    filter: brightness(1.12);
}

.nav-icon-btn-primary i,
.nav-icon-btn-primary svg {
    color: #fff !important;
}

/* ---------- floating layers ---------- */

/* Elevation comes from the shadow, never an outline. */
.nav-pop {
    background-color: var(--card-background-color);
    box-shadow: 0 18px 45px -12px var(--shadow), 0 6px 14px -8px var(--shadow);
}

.nav-row {
    transition: background-color 0.15s ease-in-out;
}

.nav-row:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--card-background-color));
}

/* The identity block sits one surface below the actions under it, which is what
 * separates them — this menu has no divider rule. */
.nav-pop-header {
    background-color: var(--nav-surface);
}

/* ---------- avatar placeholder ---------- */

/*
 * Neutral rather than branded: this stands in for a photo, so a saturated fill
 * would read as a badge. The gradient and the hairline are both mixed off
 * --primary-text, so they invert with the colour scheme, and the "border" is an
 * inset shadow to keep it off the box model.
 */
.nav-avatar {
    background-image: linear-gradient(145deg,
        color-mix(in srgb, var(--primary-text) 13%, var(--card-background-color)) 0%,
        color-mix(in srgb, var(--primary-text) 5%, var(--card-background-color)) 100%);
    color: var(--secondary-text) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-text) 10%, transparent);
    letter-spacing: 0.02em;
}

/* ---------- theme switch ---------- */

/*
 * A recessed track with one raised segment — the same surface hierarchy the
 * menu itself uses, so the group needs no outline. The active segment is the
 * card surface, i.e. it rises to the level of the menu around it.
 */
.theme-seg {
    background-color: color-mix(in srgb, var(--primary-text) 6%, transparent);
}

.theme-seg-btn {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.3rem;
    border-radius: 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    color: var(--secondary-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* The blanket `span { color: var(--primary-text) }` reset would otherwise win
 * over the button's own colour. */
.theme-seg-btn span {
    color: inherit;
}

.theme-seg-btn:hover {
    color: var(--primary-text);
}

.theme-seg-btn[aria-pressed="true"] {
    background-color: var(--card-background-color);
    color: var(--primary);
    box-shadow: 0 1px 3px -1px var(--shadow);
}

/* ============================== */
/*        NAVBAR FILTER SHEET     */
/* ============================== */

/*
 * Adaptive height: the sheet is anchored under a ~64px bar, so it may use
 * everything below that minus a little breathing room. dvh keeps it honest on
 * mobile, where the browser chrome eats into vh.
 */
#nav-filter-panel .nav-filter-sheet {
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
}

/* Hangs straight off the field: square top edge, no gap, and the width of the
 * search component it belongs to. */
#nav-filter-panel {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
    margin-top: -14px;
    padding-top: 14px;
}

@supports (height: 100dvh) {
    #nav-filter-panel .nav-filter-sheet {
        max-height: calc(100dvh - 5.5rem);
    }
}

/*
 * The address selects come from a Django form and take no classes at the call
 * site, so every control in the sheet is styled from here instead. The global
 * `select` rule forces `background: transparent !important`, hence the
 * !important below.
 */
#nav-filter-panel input[type="text"],
#nav-filter-panel input[type="number"],
#nav-filter-panel select {
    width: 100%;
    margin: 0 !important;
    padding: 0.4rem 0.8rem !important;
    background: var(--nav-surface) !important;
    color: var(--primary-text);
    border: none !important;
    border-radius: 999px !important;
    font-size: 0.85rem;
}

#nav-filter-panel select:disabled {
    opacity: 0.4;
}

#nav-filter-panel .select2 {
    width: 100% !important;
    margin: 0 !important;
}

#nav-filter-panel .select2-container--default .select2-selection--single {
    height: 34px;
    background-color: var(--nav-surface) !important;
    border: none !important;
    border-radius: 999px !important;
}

/* select2 appends its dropdown to <body>, so it is reached globally. */
.select2-dropdown {
    border: none !important;
    box-shadow: 0 18px 45px -12px var(--shadow), 0 6px 14px -8px var(--shadow);
}

.select2-search__field {
    background-color: var(--main-background-color) !important;
    border: none !important;
}

/* ---------- field label ---------- */

.nav-filter-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tertiary-text);
}

/* ---------- segmented control ---------- */

/*
 * A three-state toggle: all / has / has none. The radios are real form controls
 * (the sheet submits without any JS); only their labels are visible, so the
 * global 25px input[type="radio"] sizing has to be overridden away.
 */
.nav-seg {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background-color: var(--nav-surface-strong);
    border-radius: 999px;
}

.nav-seg input[type="radio"] {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.nav-seg label {
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--tertiary-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.nav-seg label:hover {
    color: var(--primary-text);
}

.nav-seg input[type="radio"]:checked + label {
    background-color: var(--card-background-color);
    color: var(--primary-text);
    box-shadow: 0 1px 3px var(--shadow);
}

/* ---------- switch ---------- */

.nav-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

.nav-switch input[type="checkbox"] {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.nav-switch-track {
    position: relative;
    flex-shrink: 0;
    display: block;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--primary-text) 18%, transparent);
    transition: background-color 0.18s ease-in-out;
}

.nav-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background-color: var(--card-background-color);
    box-shadow: 0 1px 2px var(--shadow);
    transition: transform 0.18s ease-in-out;
}

.nav-switch input[type="checkbox"]:checked + .nav-switch-track {
    background-color: var(--primary);
}

.nav-switch input[type="checkbox"]:checked + .nav-switch-track::after {
    transform: translateX(16px);
}

/* ---------- active-filter badge ---------- */

/*
 * Sits on the filter toggle whenever the sheet holds a value. The count is
 * written by navigation.js from the sheet's own controls, so it is right both
 * on a fresh load of a filtered result page and while the user is still
 * picking, before submitting.
 */
.nav-filter-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--primary);
    color: #fff !important;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--nav-surface);
}

/* ---------- mobile search mode ---------- */

/*
 * Below md the bar has room for one thing at a time. Opening the search hides
 * the brand and every other action, leaving the field and its close button;
 * closing it puts them all back. The state lives as one class on the <nav> so
 * the JS never has to know which elements are in the row.
 *
 * `!important` is needed on both sides: #nav-search carries Tailwind's `hidden`
 * (display:none) as its resting state, and the items being hidden carry `flex`.
 * `md:flex` sits in a min-width query, so nothing here reaches the desktop
 * layout.
 */
@media (max-width: 767px) {
    .top-navigation.nav-search-open #nav-brand,
    .top-navigation.nav-search-open .nav-search-hide {
        display: none !important;
    }

    .top-navigation.nav-search-open #nav-search {
        display: flex !important;
        flex: 1 1 auto;
    }

    .top-navigation.nav-search-open #nav-actions {
        flex: 0 0 auto;
    }
}

/* ============================== */
/*       PERSON AUTOSUGGEST       */
/* ============================== */

/*
 * The panel that components/person_autosuggest.html renders. It is anchored by
 * the caller — in the navbar it takes the same left/right/top-full box as the
 * filter sheet, so the two are the same width and hang off the same field.
 *
 * Its own surface token, deliberately: --nav-surface is scoped to the navbar,
 * and this component is meant to be dropped into any form. The mix is off
 * --primary-text, which flips with the colour scheme, so nothing below needs a
 * dark-mode twin.
 */
.autosuggest-panel {
    --autosuggest-surface: color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color));
    --autosuggest-hover: color-mix(in srgb, var(--primary) 10%, var(--card-background-color));
    --autosuggest-active: color-mix(in srgb, var(--primary) 16%, var(--card-background-color));
    margin-top: -14px;
    padding-top: 14px;
}

/*
 * A flex column rather than sticky positioning: the list is the only thing
 * that scrolls, so the header and the "show all" footer stay put without
 * either needing a stacking context of its own. overflow:hidden also clips the
 * rows to the sheet's radius.
 */
.autosuggest-sheet {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 7rem);
    overflow: hidden;
    padding: 0.3rem;
}

@supports (height: 100dvh) {
    .autosuggest-sheet {
        max-height: calc(100dvh - 7rem);
    }
}

/* ---------- header ---------- */

.autosuggest-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    padding: 0.4rem 0.6rem 0.3rem;
}

.autosuggest-head-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tertiary-text);
}

.autosuggest-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    color: var(--tertiary-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.autosuggest-close:hover {
    background-color: color-mix(in srgb, var(--primary-text) 8%, transparent);
    color: var(--primary-text);
}

.autosuggest-close svg {
    width: 14px;
    height: 14px;
}

/* In-flight request: a hairline of progress under the header, which is the one
 * place a line here is not standing in for a border. */
.autosuggest-panel.is-loading .autosuggest-head::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, transparent, var(--primary), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: autosuggest-sweep 0.9s linear infinite;
}

@keyframes autosuggest-sweep {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .autosuggest-panel.is-loading .autosuggest-head::after {
        animation: none;
    }
}

/* ---------- rows ---------- */

.autosuggest-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 0.3rem 0.3rem;
    overflow-y: auto;
    list-style: none;
}

/*
 * Three pieces per row: who they are, their own numbers directly under their
 * name, and their father held out at the far right. The avatar spans both text
 * lines, and the grid areas are the whole difference between the two widths —
 * the markup is identical either way.
 *
 *   large   [avatar] name              [father photo] father's name
 *              "     id  generation
 *
 *   small   [avatar] name
 *              "     id  generation
 *              "     [father photo] father's name
 */
.autosuggest-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "avatar name"
        "avatar meta"
        "avatar parent";
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.12s ease-in-out;
}

/* The father takes at most a bit under half the row, so a long name on either
 * side truncates instead of crushing the other. */
@media (min-width: 1024px) {
    .autosuggest-item {
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 45%);
        grid-template-areas:
            "avatar name parent"
            "avatar meta parent";
        row-gap: 0.1rem;
    }

    /* Two rows only, and the photo is as tall as both — centring reads right. */
    .autosuggest-item .autosuggest-avatar {
        align-self: center;
    }
}

.autosuggest-item:hover {
    background-color: var(--autosuggest-hover);
}

/* Keyboard and pointer share one highlight, so ArrowDown and the mouse can
 * never disagree about which row is next. */
.autosuggest-item.is-active {
    background-color: var(--autosuggest-active);
}

/*
 * Both photos, the person's and the father's, at one size — grid-area only
 * applies to the outer one, since the father's sits inside a flex pill.
 *
 * Stacked, the photo spans three text rows, and centring it against all three
 * left it floating beside the father instead of beside the person it belongs
 * to; it is pinned to the top of the name row until the row goes wide.
 */
.autosuggest-avatar {
    grid-area: avatar;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--autosuggest-surface);
    color: var(--tertiary-text);
}

.autosuggest-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.autosuggest-avatar svg {
    width: 55%;
    height: 55%;
}

.autosuggest-name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary-text);
}

/*
 * The father is a peer element, not a miniature: same photo size, ordinary
 * text. What makes it secondary is tone and the recessed pill it sits in, so
 * nothing here is scaled down to say "less important".
 */
.autosuggest-parent {
    grid-area: parent;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.15rem 0.75rem 0.15rem 0.15rem;
    border-radius: 999px;
    background-color: var(--autosuggest-surface);
    justify-self: start;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .autosuggest-parent {
        justify-self: end;
    }
}

/* The pill is already --autosuggest-surface, so a placeholder photo on that
 * same fill would vanish into it. align-self is reset because this one is a
 * flex child, where the top-alignment above means nothing. */
.autosuggest-parent .autosuggest-avatar {
    align-self: center;
    background-color: var(--card-background-color);
}

.autosuggest-parent-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.85rem;
    color: var(--secondary-text);
}

/* Sits under the name, so it reads as that person's own detail rather than as
 * a column of badges. */
.autosuggest-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    justify-self: start;
}

.autosuggest-id,
.autosuggest-gen {
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

/* A handle, so it carries no chip of its own — the "@" is what marks it. */
.autosuggest-id {
    color: var(--primary);
}

.autosuggest-gen {
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: var(--autosuggest-surface);
    color: var(--secondary-text);
}

/* ---------- empty ---------- */

.autosuggest-empty {
    margin: 0;
    padding: 1.1rem 0.9rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--tertiary-text);
}

.autosuggest-empty[hidden] {
    display: none;
}

/* ---------- sticky footer ---------- */

/* Full-bleed against the sheet's padding, so it reads as the sheet's own base
 * rather than a card floating inside it. */
.autosuggest-foot {
    flex: 0 0 auto;
    margin: 0 -0.3rem -0.3rem;
    padding: 0.3rem;
    background-color: var(--autosuggest-surface);
}

.autosuggest-foot[hidden] {
    display: none;
}

/* Soft, not solid: this is a way out of the list, not the action the list is
 * for — picking a row is. A filled primary button read louder than the rows
 * above it. */
.autosuggest-show-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--primary) 12%, var(--card-background-color));
    color: var(--primary) !important;
    font-size: 0.82rem;
    font-weight: 700;
    transition: background-color 0.15s ease-in-out;
}

.autosuggest-show-all:hover {
    background-color: color-mix(in srgb, var(--primary) 22%, var(--card-background-color));
}

.autosuggest-show-all svg {
    width: 15px;
    height: 15px;
}


/* ==================================================================
 *   DASHBOARD — BROWSE-ALL CTA
 *
 * The old "see all profiles" was a bare pill floating under the grid,
 * which read as a footnote. It is the door to the whole tree, so it
 * gets a panel: a surface above the page ground, a title that says
 * what is behind it and a subtitle that says how much.
 * ================================================================== */

.tree-cta {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
    background-image: linear-gradient(100deg,
        color-mix(in srgb, var(--primary) 16%, transparent),
        transparent 58%);
    color: var(--primary-text) !important;
    text-decoration: none !important;
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

.tree-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px var(--shadow);
}

.tree-cta__glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 1rem;
    background-color: color-mix(in srgb, var(--primary) 16%, var(--card-background-color));
    color: var(--primary);
}

.tree-cta__glyph svg {
    width: 21px;
    height: 21px;
}

.tree-cta__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.tree-cta__title {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}

.tree-cta__subtitle {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--secondary-text);
}

.tree-cta__go {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background-color: var(--primary);
    color: #ffffff;
    transition: transform 0.16s ease-out;
}

.tree-cta__go svg {
    width: 18px;
    height: 18px;
}

.tree-cta:hover .tree-cta__go {
    transform: translateX(3px);
}

/* Mobile keeps the arrow but drops the subtitle to one line of breathing
 * room rather than three lines of wrap. */
@media (max-width: 480px) {
    .tree-cta__subtitle {
        font-size: 0.74rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tree-cta,
    .tree-cta__go {
        transition: none;
    }

    .tree-cta:hover {
        transform: none;
    }

    .tree-cta:hover .tree-cta__go {
        transform: none;
    }
}


/* ==================================================================
 *   DASHBOARD — EMPTY PROFILE GRID
 * ================================================================== */

/* No surface of its own: with nothing to list, the page ground is the state.
 * It holds the full viewport so the browse-all panel below stays a scroll
 * away rather than crowding the illustration. */
.empty-profiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.25rem;
    min-height: calc(100vh - var(--top-navigation-height) - 4rem);
}

@supports (min-height: 100svh) {
    .empty-profiles {
        min-height: calc(100svh - var(--top-navigation-height) - 4rem);
    }
}

.empty-profiles__art {
    width: 100%;
    max-width: 380px;
    height: auto;
    margin-bottom: 0.75rem;
}

.empty-profiles__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary-text);
}

.empty-profiles__subtitle {
    margin: 0.4rem 0 0;
    max-width: 30rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--secondary-text);
}

.empty-profiles__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.empty-profiles__actions:empty {
    display: none;
}

/* The dashed branches breathe out of phase so the illustration reads as
 * waiting for people rather than as a static diagram. */
.empty-profiles__node {
    animation: empty-profiles-breathe 4.5s ease-in-out infinite;
}

.empty-profiles__node--mine {
    animation-delay: 1.5s;
}

.empty-profiles__node--late {
    animation-delay: 3s;
}

@keyframes empty-profiles-breathe {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

.empty-profiles__spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: empty-profiles-twinkle 3.6s ease-in-out infinite;
}

.empty-profiles__spark--b {
    animation-delay: 1.2s;
}

.empty-profiles__spark--c {
    animation-delay: 2.4s;
}

@keyframes empty-profiles-twinkle {
    0%, 100% { opacity: 0.25; }
    45%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .empty-profiles__node,
    .empty-profiles__spark {
        animation: none;
    }
}


/* ==================================================================
 *   MODAL
 * ==================================================================
 *
 * Surfaces, not borders, and the same three-level rule the navbar block
 * documents:
 *
 *   panel   -> --card-background-color   (floated over the scrim)
 *   field   -> --modal-surface           (recessed into the panel)
 *   raised  -> --card-background-color   (lifted back out of the field)
 *
 * Both derived tokens come from color-mix() over --primary-text and
 * --card-background-color, which flip with the colour scheme, so nothing in
 * this block needs a dark-mode twin.
 *
 * Depth is drawn by the stack itself: the panel behind slides left, shrinks
 * and fades, so "there is something under this" needs no outline. */

html.modal-open,
html.modal-open body {
    overflow: hidden !important;
}

.modal-root {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.modal-root[hidden] {
    display: none !important;
}

.modal-scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: modal-scrim-in 0.2s ease-out;
}

@keyframes modal-scrim-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Every panel occupies the same single grid cell, so they overlap instead of
 * sharing the row. As a flex container this laid the panels out side by side
 * on a desktop: pushing a second one squeezed the first one's width, which is
 * a reflow of the whole form on every push and pop — the transform then
 * animated a box that was itself still resizing. In one cell nothing a panel
 * does can change another's size; they just stack, and a panel that scales
 * past its neighbours simply overlaps them. */
.modal-stack {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-areas: "stack";
    place-items: center;
    pointer-events: none;
}

/* The panel fills the phone and floats on a desktop; both cases are the same
 * box with different insets, set in the media query below. */
.modal-panel {
    --modal-surface: color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color));
    --modal-surface-strong: color-mix(in srgb, var(--primary-text) 11%, var(--card-background-color));

    grid-area: stack;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--card-background-color);
    pointer-events: auto;
    overflow: hidden;

    /* Promoted up front rather than at the moment it moves: leaving this to
     * the browser meant the layer was created on the first frame of the
     * transition, which is exactly the frame that then dropped. */
    will-change: transform, filter;
    transform-origin: center center;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                filter 0.28s ease-in-out;
}

/* Entering from the right, leaving to the right: the stack reads as one strip
 * of paper sliding under the finger rather than as panels appearing. */
.modal-panel.is-entering,
.modal-panel.is-leaving {
    transform: translateX(100%);
}

/* Depth is drawn by scale and blur, never by transparency: a faded panel reads
 * as disabled, while a smaller, softer one reads as further away. Each level
 * back shrinks and blurs a little more than the one in front of it, so a stack
 * three deep still shows where it came from.
 *
 * The panel itself keeps taking pointer events while its children do not —
 * that is what makes the visible sliver a way back to that step (modal.js
 * returnTo) without exposing a control the operator cannot see. */
.modal-panel[data-depth="1"] {
    transform: scale(0.92) translateX(-4%);
    filter: blur(2px);
}

.modal-panel[data-depth="2"] {
    transform: scale(0.84) translateX(-7%);
    filter: blur(4px);
}

.modal-panel[data-depth="3"] {
    transform: scale(0.76) translateX(-9%);
    filter: blur(6px);
}

.modal-panel:not([data-depth="0"]) {
    cursor: pointer;
}

.modal-panel:not([data-depth="0"]) > * {
    pointer-events: none;
}

.modal-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.75rem 0.75rem 0.5rem;
}

.modal-head-text {
    flex: 1;
    min-width: 0;
    padding: 0 0.25rem;
}

.modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-subtitle {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tertiary-text);
    margin-top: 0.15rem;
}

.modal-head-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 38px;
    width: 38px;
    border: none;
    border-radius: 999px;
    background-color: transparent;
    color: var(--secondary-text);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.modal-head-btn:hover {
    background-color: var(--modal-surface);
    color: var(--primary-text);
}

.modal-head-btn[hidden] {
    display: none !important;
}

.modal-head-btn svg {
    height: 1.1rem;
    width: 1.1rem;
}

.modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 1rem 1rem;
}

/* Sticky rather than merely last: a long form scrolls under the actions
 * instead of pushing them off the bottom of a phone screen. */
.modal-foot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    background-color: var(--card-background-color);
    box-shadow: 0 -10px 24px -18px var(--shadow);
}

.modal-foot[hidden] {
    display: none !important;
}

.modal-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--card-background-color) 72%, transparent);
    z-index: 5;
}

.modal-busy[hidden] {
    display: none !important;
}

.modal-spinner {
    height: 2rem;
    width: 2rem;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-top-color: var(--primary);
    animation: modal-spin 0.7s linear infinite;
}

@keyframes modal-spin {
    to { transform: rotate(360deg); }
}

@media (min-width: 768px) {
    .modal-stack {
        padding: 2rem 1rem;
    }

    /* Sized by the cell, not by its siblings — still out of flow, so a panel
     * scaling down never hands the space back to anything. */
    .modal-panel {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 64rem;
        max-height: 90vh;
        border-radius: 1.75rem;
        box-shadow: 0 30px 70px -20px var(--shadow), 0 10px 24px -14px var(--shadow);
    }

    .modal-panel--sm { max-width: 32rem; }
    .modal-panel--md { max-width: 44rem; }

    .modal-head {
        padding: 1rem 1rem 0.5rem;
    }

    .modal-title {
        font-size: 1.25rem;
    }

    .modal-body {
        padding: 0.25rem 1.5rem 1.25rem;
    }

    .modal-foot {
        padding: 0.85rem 1.5rem;
    }
}

@supports (max-height: 90svh) {
    @media (min-width: 768px) {
        .modal-panel { max-height: 90svh; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-panel {
        transition: none;
    }

    .modal-panel.is-entering,
    .modal-panel.is-leaving {
        transform: none;
    }

    /* Still distinguishable without the movement: the blur alone carries it. */
    .modal-panel[data-depth="1"],
    .modal-panel[data-depth="2"],
    .modal-panel[data-depth="3"] {
        transform: none;
    }

    .modal-scrim {
        animation: none;
    }

    .modal-spinner {
        animation-duration: 2s;
    }
}


/* ==================================================================
 *   RELATION PICKER — the L
 * ==================================================================
 *
 * Father above, spouse beside, this person at the corner. Two columns on a
 * desktop; on a phone the cells stack and the connectors are dropped, since a
 * single column already reads as an order.
 *
 * Each cell is one fixed-height card whose caption sits on its own line rather
 * than over the content, so a long name has nothing to collide with. The
 * connectors are positioned off the cell box alone — no measuring, and nothing
 * to keep in sync when a slot fills. */

.relation-picker {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.85rem;
    margin-bottom: 1.25rem;
    border-radius: 1.25rem;
    background-color: var(--modal-surface);
}

.relation-cell {
    position: relative;
    min-width: 0;
}

.relation-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    min-height: 88px;
    padding: 0.55rem 0.8rem;
    border: none;
    border-radius: 1rem;
    background-color: var(--card-background-color);
    color: var(--primary-text);
    text-align: start;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.relation-slot__role {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--secondary-text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline-end: 1.5rem;
}

.relation-slot:not(.relation-slot--self):not(.is-filled) {
    outline: 2px dashed color-mix(in srgb, var(--primary) 34%, transparent);
    outline-offset: -2px;
}

.relation-slot:not(.relation-slot--self):not(:disabled):hover {
    background-color: color-mix(in srgb, var(--primary) 8%, var(--card-background-color));
}

.relation-slot:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 45%, transparent);
    outline: none;
}

.relation-slot--self {
    background-color: color-mix(in srgb, var(--primary) 12%, var(--card-background-color));
    cursor: default;
}

/* Locked, not disabled-looking: this side of the link is a fact, not a control
 * that has been switched off. */
.relation-slot:disabled {
    cursor: default;
    opacity: 1;
}

.relation-slot__empty,
.relation-slot__filled {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.relation-slot__empty[hidden],
.relation-slot__filled[hidden] {
    display: none !important;
}

.relation-slot__empty {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tertiary-text);
}

.relation-slot__empty svg {
    height: 1.1rem;
    width: 1.1rem;
}

.relation-slot__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 32px;
    width: 32px;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--modal-surface-strong);
    color: var(--tertiary-text);
}

.relation-slot__avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.relation-slot__avatar--self {
    background-color: color-mix(in srgb, var(--primary) 22%, transparent);
    color: var(--primary);
}

.relation-slot__avatar svg {
    height: 1.05rem;
    width: 1.05rem;
}

.relation-slot__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.relation-slot__name {
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-slot__id {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--tertiary-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-clear {
    position: absolute;
    top: 0.4rem;
    inset-inline-end: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    width: 22px;
    border: none;
    border-radius: 999px;
    background-color: var(--modal-surface-strong);
    color: var(--secondary-text);
    cursor: pointer;
    z-index: 2;
}

.relation-clear[hidden] {
    display: none !important;
}

.relation-clear:hover {
    background-color: color-mix(in srgb, #ef4444 18%, var(--card-background-color));
    color: #ef4444;
}

.relation-clear svg {
    height: 0.75rem;
    width: 0.75rem;
}

/* The same pink heart the tree hangs between a couple, so the relationship
 * reads the same here as it does there. */
.relation-heart {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    height: 26px;
    width: 26px;
    border-radius: 999px;
    background-color: #fbcfe8;
    color: #db2777;
    z-index: 2;
}

html[data-theme="dark"] .relation-heart {
    background-color: #831843;
    color: #fbcfe8;
}

.relation-heart svg {
    height: 0.85rem;
    width: 0.85rem;
}

@media (min-width: 640px) {
    .relation-picker {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 1rem 2.25rem;
    }

    .relation-cell--parent { grid-column: 1; grid-row: 1; }
    .relation-cell--self   { grid-column: 1; grid-row: 2; }
    .relation-cell--spouse { grid-column: 2; grid-row: 2; }

    /* The vertical arm, spanning the row gap under the father. */
    .relation-cell--parent::after {
        content: '';
        position: absolute;
        inset-inline-start: 2rem;
        top: 100%;
        height: 1rem;
        border-inline-start: 2px dashed color-mix(in srgb, var(--primary) 38%, transparent);
    }

    /* The horizontal arm, spanning the column gap at the cards' mid-height. */
    .relation-cell--spouse::before {
        content: '';
        position: absolute;
        inset-inline-start: -2.25rem;
        width: 2.25rem;
        top: 44px;
        border-top: 2px dotted #ec4899;
    }

    .relation-cell--spouse .relation-heart {
        display: flex;
        inset-inline-start: -1.75rem;
        top: 31px;
    }

    .relation-cell--parent:has(.relation-slot.is-filled)::after {
        border-style: solid;
    }
}


/* ==================================================================
 *   MODAL FORMS
 * ==================================================================
 *
 * The global `input[type="text"], input[type="number"], …` rule near the top
 * of the FORMS section sets `border: 1px solid !important`, and an attribute
 * selector out-specifies a bare class — the same trap `input.nav-search-input`
 * documents. Everything here is therefore scoped under `.person-form` and
 * qualified with the element, which is what lets the fields sit on a surface
 * with no outline at all. */

.form-section {
    margin-bottom: 1.25rem;
}

.form-section__title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tertiary-text);
    margin-bottom: 0.5rem;
    padding-inline-start: 0.3rem;
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.form-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary-text);
    padding-inline-start: 0.3rem;
}

.form-hint {
    font-size: 0.66rem;
    color: var(--tertiary-text);
    padding-inline-start: 0.3rem;
}

.form-error {
    font-size: 0.68rem;
    font-weight: 700;
    color: #ef4444;
    padding-inline-start: 0.3rem;
}

.form-error[hidden] {
    display: none !important;
}

.form-alert {
    margin-bottom: 0.85rem;
    padding: 0.7rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ef4444;
    background-color: color-mix(in srgb, #ef4444 12%, var(--card-background-color));
}

.form-alert[hidden] {
    display: none !important;
}

.person-form input[type="text"],
.person-form input[type="number"],
.person-form input[type="email"],
.person-form input[type="date"],
.person-form input[type="tel"],
.person-form select,
.person-form textarea {
    width: 100%;
    padding: 0.5rem 0.85rem !important;
    border: none !important;
    border-radius: 0.9rem !important;
    background-color: var(--modal-surface) !important;
    color: var(--primary-text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.person-form textarea {
    min-height: 5rem;
    resize: vertical;
}

.person-form input:focus,
.person-form select:focus,
.person-form textarea:focus {
    background-color: var(--card-background-color) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
    box-shadow: 0 0 0 2px color-mix(in srgb, #ef4444 50%, transparent);
}

/* The gender control, which is set on every single record.
 *
 * Standalone rather than built on .nav-seg: that one is deliberately quiet —
 * grey on grey, for a filter nobody needs to find — and this is the opposite
 * register. Male and female are tinted apart rather than both taking the brand
 * purple: at a counter the wrong one is easy to leave selected, and two colours
 * make a mis-set field visible from across the form.
 *
 * The input lives inside its label, so the selected state is read with :has()
 * rather than a sibling combinator. That is what lets the markup drop the
 * for/id pair that used to collide between stacked panels. */
.person-form .form-seg {
    display: inline-flex;
    align-self: start;
    padding: 4px;
    gap: 2px;
    background-color: var(--modal-surface-strong);
    border-radius: 999px;
}

.person-form .form-seg__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--secondary-text);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* The global input[type="radio"] rule forces a 25px circle with !important,
 * so the real control has to be flattened with the same weight. */
.person-form .form-seg__option input[type="radio"] {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    opacity: 0;
    border: none !important;
    pointer-events: none;
    appearance: none;
}

.person-form .form-seg__option:hover {
    color: var(--primary-text);
}

.person-form .form-seg__option:has(input:checked) {
    color: #ffffff;
}

.person-form .form-seg__option[data-gender="M"]:has(input:checked) {
    background-color: #2563eb;
}

.person-form .form-seg__option[data-gender="F"]:has(input:checked) {
    background-color: #db2777;
}

.person-form .form-seg__option[data-gender="O"]:has(input:checked) {
    background-color: var(--primary);
}

.person-form .form-seg__option:has(input:focus-visible) {
    outline: 2px solid color-mix(in srgb, var(--primary) 60%, transparent);
    outline-offset: 1px;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding-inline-start: 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==================================================================
 *   PERSON PICKER
 * ================================================================== */

.person-picker {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.person-picker__search {
    --nav-surface: var(--modal-surface);
    width: 100%;
    padding-inline-start: 0.85rem;
}

.person-picker__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--tertiary-text);
}

/* In flow, unlike the navbar's, which hangs off the search field. */
.person-picker__results {
    position: static;
}

.person-picker__results .autosuggest-sheet {
    box-shadow: none;
    background-color: var(--modal-surface);
}

.person-picker__heading,
.person-picker__empty {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tertiary-text);
    padding-inline-start: 0.5rem;
    margin-bottom: 0.35rem;
}

.person-picker__empty {
    text-transform: none;
    letter-spacing: 0;
    padding: 1.5rem 0.5rem;
    text-align: center;
}

.person-picker__recent[hidden] {
    display: none !important;
}


/* ==================================================================
 *   PHOTO FLOW
 * ================================================================== */

.photo-flow {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.photo-step[hidden] {
    display: none !important;
}

.photo-step__head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

/* Numbered because the two steps are a sequence, and the first one disappears
 * entirely once a voucher is held — the number is what says so. Gradient and
 * glow to match the controls grid the panel was opened from. */
.photo-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 28px;
    width: 28px;
    border-radius: 999px;
    background-image: linear-gradient(140deg, #ba84ff, #9747FF);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--primary) 80%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Step one is money, step two is the photo — the two chips are coloured apart
 * so the panel says which half it is on before a word is read. Red for the
 * voucher, the colour the printed book it stands for is inked in. */
.photo-step[data-photo-step="voucher"] .photo-step__index {
    background-image: linear-gradient(140deg, #f87171, #dc2626);
    box-shadow: 0 8px 16px -8px rgba(220, 38, 38, 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.photo-step__title {
    font-size: 0.95rem;
    font-weight: 700;
}

.photo-step__hint,
.photo-step__empty {
    font-size: 0.72rem;
    color: var(--tertiary-text);
}

.photo-step__empty {
    padding: 1rem;
    border-radius: 1rem;
    background-color: var(--modal-surface);
}

.photo-step__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

/* ------------------------------ the voucher -------------------------------
 *
 * The whole of step one is one card, shaped like the voucher it is about to
 * become: the person at the head, the choices as line items, a torn edge, and
 * the bill number written on the counterfoil below it. The bill number is
 * inside the card rather than a field under it because on the paper an operator
 * is holding it is part of the same piece of paper.
 *
 * Red, not the amber the controls grid gives vouchers: in the grid the tile is
 * one errand among eleven and the hue only has to separate it from its
 * neighbours, while here the card is the entire screen and can be the colour
 * the printed book is actually inked in.
 *
 * The card is deliberately tall and loosely packed. Cutting a voucher is the
 * step that takes someone's money, so it gets room rather than being a dense
 * form to tab through.
 *
 * The radio is the state. :has(input:checked) means nothing has to keep a
 * selected class in sync with it, and the keyboard still works because the
 * input is only visually hidden, never display:none. */

.voucher-card {
    --ticket-from: #f87171;
    --ticket-to: #dc2626;

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin: 0.35rem 0 0.25rem;
    padding: 1.5rem 1.25rem;
    border-radius: 1.5rem;
    /* Faintly tinted paper, so the notches below — which are the panel's own
     * colour — read as holes punched through it rather than as dots. */
    background-color: color-mix(in srgb, var(--ticket-to) 6%, var(--card-background-color));
    box-shadow: 0 26px 46px -30px color-mix(in srgb, var(--ticket-to) 85%, transparent),
                0 4px 14px -12px var(--shadow);
}

.voucher-card::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -4rem;
    right: -3rem;
    height: 11rem;
    width: 11rem;
    border-radius: 50%;
    background: radial-gradient(circle,
                color-mix(in srgb, var(--ticket-to) 22%, transparent) 0%,
                transparent 68%);
}

.voucher-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.voucher-card__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.6rem;
    width: 2.6rem;
    flex-shrink: 0;
    border-radius: 0.9rem;
    background-image: linear-gradient(140deg, var(--ticket-from), var(--ticket-to));
    color: #ffffff;
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--ticket-to) 80%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.voucher-card__mark svg {
    height: 1.3rem;
    width: 1.3rem;
    color: #ffffff;
}

.voucher-card__title {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.voucher-card__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ticket-to) 80%, var(--primary-text));
}

.voucher-card__person {
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The tear. Full-bleed across the card, with a notch bitten out of each end —
 * the notches are the panel's background, so half of each disc reads as a hole
 * once the card's radius clips it. */
.voucher-card__tear {
    position: relative;
    height: 0;
    margin-inline: -1.25rem;
    border-top: 2px dashed color-mix(in srgb, var(--ticket-to) 32%, transparent);
}

.voucher-card__tear::before,
.voucher-card__tear::after {
    content: '';
    position: absolute;
    top: -9px;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background-color: var(--card-background-color);
}

.voucher-card__tear::before { left: -9px; }
.voucher-card__tear::after  { right: -9px; }

/* The counterfoil. Whatever is written here travels with the voucher. */
.voucher-card__stub {
    gap: 0.35rem;
}

.ticket-choices {
    display: grid;
    gap: 0.6rem;
}

.ticket {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    /* Lifted off the tinted card, so a line item reads as a row on the paper. */
    background-color: var(--card-background-color);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.18s ease-in-out,
                box-shadow 0.18s ease-in-out,
                transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Visually hidden, not removed: the radio still takes focus and arrow keys. */
.ticket input {
    position: absolute;
    height: 1px;
    width: 1px;
    opacity: 0;
    pointer-events: none;
}

.ticket::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -3rem;
    right: -2rem;
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    background: radial-gradient(circle,
                color-mix(in srgb, var(--ticket-to) 26%, transparent) 0%,
                transparent 68%);
    opacity: 0;
    transition: opacity 0.18s ease-in-out;
}

.ticket__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.85rem;
    background-image: linear-gradient(140deg, var(--ticket-from), var(--ticket-to));
    color: #ffffff;
    box-shadow: 0 8px 16px -9px color-mix(in srgb, var(--ticket-to) 75%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ticket__icon svg {
    height: 1.1rem;
    width: 1.1rem;
    color: #ffffff;
}

.ticket__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ticket__purpose {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.ticket__note {
    font-size: 0.7rem;
    color: var(--tertiary-text);
    line-height: 1.3;
}

/* The amount sits past a dashed rule, the way a price does on a line item.
 * There are no notches here — the card's own tear is the one perforation, and a
 * second set on every row made the block read as a sheet of stamps. */
.ticket__stub {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    flex-shrink: 0;
    padding-left: 0.95rem;
    border-left: 2px dashed color-mix(in srgb, var(--ticket-to) 35%, transparent);
}

.ticket__currency {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--tertiary-text);
}

.ticket__amount {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background-image: linear-gradient(140deg, var(--ticket-from), var(--ticket-to));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ticket__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.35rem;
    width: 1.35rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-image: linear-gradient(140deg, var(--ticket-from), var(--ticket-to));
    color: #ffffff;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease-in-out, transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.ticket__check svg {
    height: 0.8rem;
    width: 0.8rem;
    color: #ffffff;
}

.ticket:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -18px color-mix(in srgb, var(--ticket-to) 80%, transparent);
}

.ticket:hover::before {
    opacity: 0.7;
}

.ticket:has(input:checked) {
    background-color: color-mix(in srgb, var(--ticket-to) 9%, var(--card-background-color));
    box-shadow: 0 16px 28px -20px color-mix(in srgb, var(--ticket-to) 90%, transparent),
                inset 0 0 0 2px color-mix(in srgb, var(--ticket-to) 45%, transparent);
}

.ticket:has(input:checked)::before {
    opacity: 1;
}

.ticket:has(input:checked) .ticket__check {
    opacity: 1;
    transform: scale(1);
}

.ticket:has(input:focus-visible) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ticket-to) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .ticket,
    .ticket::before,
    .ticket__check {
        transition: none;
    }

    .ticket:hover {
        transform: none;
    }
}

.photo-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11rem;
    padding: 1.25rem;
    border-radius: 1.25rem;
    background-color: var(--modal-surface);
    outline: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
    outline-offset: -2px;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, outline-color 0.15s ease-in-out;
}

.photo-drop:hover,
.photo-drop.is-over {
    background-color: color-mix(in srgb, var(--primary) 8%, var(--card-background-color));
    outline-color: var(--primary);
}

.photo-drop__idle,
.photo-drop__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.photo-drop__idle[hidden],
.photo-drop__preview[hidden] {
    display: none !important;
}

.photo-drop__idle svg {
    height: 2rem;
    width: 2rem;
    color: var(--primary);
}

.photo-drop__title {
    font-size: 0.88rem;
    font-weight: 700;
}

.photo-drop__hint,
.photo-drop__meta {
    font-size: 0.7rem;
    color: var(--tertiary-text);
}

.photo-drop__preview img {
    max-height: 15rem;
    border-radius: 1rem;
    object-fit: contain;
}

/* The photo already on file, with the one control that acts on it. Clearing
 * lives here rather than on the page so the thing being cleared is in view. */
.photo-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.6rem 0.85rem;
    border-radius: 1rem;
    background-color: var(--modal-surface);
}

.photo-current[hidden] {
    display: none !important;
}

.photo-current__text {
    flex: 1;
    min-width: 0;
}

.photo-current__label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tertiary-text);
}

.photo-current__hint {
    font-size: 0.7rem;
    color: var(--tertiary-text);
}

.photo-current img {
    height: 3rem;
    width: 3rem;
    border-radius: 0.75rem;
    object-fit: cover;
    flex-shrink: 0;
}

/* Clearing, not deleting: it empties the field so another photo can go in,
 * which is what the operator is almost always here to do. */
.photo-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 34px;
    padding: 0 0.8rem;
    border: none;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--primary-text) 8%, var(--card-background-color));
    color: var(--secondary-text);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.photo-clear:hover {
    background-color: color-mix(in srgb, #ef4444 14%, var(--card-background-color));
    color: #ef4444;
}

.photo-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.photo-clear svg {
    height: 0.85rem;
    width: 0.85rem;
}

.photo-progress {
    height: 4px;
    margin-top: 0.85rem;
    border-radius: 999px;
    background-color: var(--modal-surface-strong);
    overflow: hidden;
}

.photo-progress[hidden] {
    display: none !important;
}

.photo-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background-color: var(--primary);
    transition: width 0.15s ease-out;
}

.photo-save {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1rem;
    border: none;
    border-radius: 999px;
    background-color: var(--primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
}

.photo-save:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.photo-save svg {
    height: 1.05rem;
    width: 1.05rem;
    color: #ffffff;
}


/* The wrapper that carries the modal hooks around a button component, which
 * takes no data attributes of its own. display:contents keeps it out of the
 * layout entirely, so the button sits in its parent flex row unchanged. */
.modal-trigger {
    display: contents;
}


/* ==================================================================
 *   CONTROLS GRID
 * ==================================================================
 *
 * Every action for a person, as one block of tiles. They were scattered before
 * — bright white pills in one card, icons floating over the photos, a link in
 * another — so this trades the shadowed white for tiles that sit directly on
 * the page. No container surface behind them: a card inside a card inside a
 * column was one box too many, and the tiles read as a group on their own.
 *
 * Each tile carries its own hue in --tile-from / --tile-to and spends it three
 * times: a gradient chip under the icon, a soft radial wash behind it, and the
 * colour of the shadow the tile lifts on. That is the same recipe as the
 * dashboard's empty-state illustration — gradient, glow, shadow — so a person's
 * controls and the empty grid look like one product rather than two.
 *
 * The surface stays neutral in every case. A wall of eleven saturated tiles
 * would be unreadable; the colour lives in the chip and the wash, which is
 * enough to tell them apart at a glance without shouting.
 *
 * Two columns on a phone, four from md up. Fixed counts rather than auto-fill:
 * the labels are Devanagari phrases of quite different lengths, and auto-fill
 * would reflow the whole grid every time one tile appears or disappears with a
 * permission. */

.action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.action-tile {
    --tile-from: #ba84ff;
    --tile-to: #9747FF;

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    min-height: 6.5rem;
    padding: 0.9rem;
    border: none;
    border-radius: 1.25rem;
    background-color: var(--card-background-color);
    color: var(--primary-text);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.22s ease-in-out;
}

/* The wash. Parked off the top-right corner so the tile keeps a clean reading
 * edge on the left, where the label sits. */
.action-tile::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -3.25rem;
    right: -2.25rem;
    height: 8.5rem;
    width: 8.5rem;
    border-radius: 50%;
    background: radial-gradient(circle,
                color-mix(in srgb, var(--tile-to) 30%, transparent) 0%,
                transparent 68%);
    opacity: 0.85;
    transition: opacity 0.22s ease-in-out, transform 0.22s ease-in-out;
}

.action-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    border-radius: 0.85rem;
    background-image: linear-gradient(140deg, var(--tile-from), var(--tile-to));
    color: #ffffff;
    /* The lit top edge plus a shadow in the tile's own colour: the chip reads as
     * a small object on the surface rather than a coloured square. */
    box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--tile-to) 70%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 0.22s ease-in-out;
}

.action-tile__icon svg {
    height: 1.25rem;
    width: 1.25rem;
    color: #ffffff;
}

.action-tile__label {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    color: var(--primary-text);
}

/* The second line only appears where there is already something to replace —
 * it is what tells an operator the tile edits rather than adds. */
.action-tile__label small {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--tertiary-text);
}

.action-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 30px -20px color-mix(in srgb, var(--tile-to) 85%, transparent),
                0 6px 14px -12px var(--shadow);
}

.action-tile:hover::before {
    opacity: 1;
    transform: scale(1.12);
}

.action-tile:hover .action-tile__icon {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--tile-to) 80%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.action-tile:active {
    transform: translateY(0);
    box-shadow: none;
}

.action-tile:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tile-to) 60%, transparent);
}

.action-tile:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* One hue per errand, grouped by what the errand is about: people are warm,
 * places and papers are cool, access is green, money is amber. */
.action-tile--child     { --tile-from: #5eead4; --tile-to: #0d9488; }
.action-tile--spouse    { --tile-from: #fb7185; --tile-to: #e11d48; }
.action-tile--edit      { --tile-from: #c4b5fd; --tile-to: #7c3aed; }
.action-tile--address   { --tile-from: #7dd3fc; --tile-to: #0284c7; }
.action-tile--education { --tile-from: #bef264; --tile-to: #65a30d; }
.action-tile--photo     { --tile-from: #f8a75d; --tile-to: #d9873c; }
.action-tile--family    { --tile-from: #ba84ff; --tile-to: #9747FF; }
.action-tile--voucher   { --tile-from: #fcd34d; --tile-to: #d97706; }
.action-tile--access    { --tile-from: #86efac; --tile-to: #16a34a; }

/* The two photo tiles are the errand most operators are here for, so they keep
 * the faint tinted surface that marks them out of the row. */
.action-tile--photo,
.action-tile--family {
    background-color: color-mix(in srgb, var(--tile-to) 7%, var(--card-background-color));
}

.action-tile--danger {
    --tile-from: #fca5a5;
    --tile-to: #dc2626;
}

@media (min-width: 768px) {
    .action-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-tile,
    .action-tile::before,
    .action-tile__icon {
        transition: none;
    }

    .action-tile:hover {
        transform: none;
    }

    .action-tile:hover .action-tile__icon,
    .action-tile:hover::before {
        transform: none;
    }
}


/* ==================================================================
 *   CONTROL LEVEL CHOICES
 * ================================================================== */

.level-choices {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.level-choice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-radius: 0.9rem;
    background-color: var(--modal-surface);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.level-choice:hover {
    background-color: var(--modal-surface-strong);
}

.level-choice:has(input:checked) {
    background-color: color-mix(in srgb, var(--primary) 14%, var(--card-background-color));
    color: var(--primary);
}


/* ==================================================================
 *   PERSON LINE
 * ==================================================================
 *
 * A person named in passing. person_item.html is a 300px button with its own
 * border, spouse rail and phone list — far too much furniture for a footnote
 * on a receipt. */

.person-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.3rem 0;
    text-decoration: none !important;
}

.person-line__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 28px;
    width: 28px;
    border-radius: 999px;
    overflow: hidden;
    background-color: var(--modal-surface-strong);
    color: var(--tertiary-text);
}

.person-line__avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.person-line__avatar svg {
    height: 0.9rem;
    width: 0.9rem;
}

.person-line__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.person-line__label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tertiary-text);
    line-height: 1;
}

.person-line__name {
    font-size: 0.8rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.person-line__id {
    margin-inline-start: auto;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--tertiary-text);
    font-variant-numeric: tabular-nums;
}


/* ==================================================================
 *   VOUCHER RECEIPT
 * ==================================================================
 *
 * It stands for a piece of paper someone is holding, so it is shaped like one:
 * the amount reads first, a torn edge separates it from the numbers that
 * identify it, and the people involved are quiet lines at the foot. The old
 * card was a red-to-purple gradient with a 4xl amount and two full person
 * cards inside it. */

.receipt-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
}

.receipt {
    position: relative;
    padding: 0.9rem 1rem 0.75rem;
    border-radius: 1.1rem;
    background-color: var(--card-background-color);
}

.receipt__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.receipt__purpose {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
}

.receipt__kind {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.receipt__kind svg {
    height: 0.9rem;
    width: 0.9rem;
    color: var(--primary);
}

.receipt__tag {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

.receipt__amount {
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The torn edge: a dotted rule is the whole illusion. */
.receipt__tear {
    height: 0;
    margin: 0.7rem -1rem;
    border-top: 2px dotted color-mix(in srgb, var(--primary-text) 14%, transparent);
}

.receipt__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.receipt__meta dt {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tertiary-text);
    line-height: 1.2;
}

.receipt__meta dd {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.receipt__note {
    margin-top: 0.6rem;
    font-size: 0.76rem;
    color: var(--secondary-text);
}

.receipt__people {
    margin-top: 0.5rem;
    padding-top: 0.4rem;
    display: flex;
    flex-direction: column;
}

.receipt--spouse {
    background-color: color-mix(in srgb, var(--primary) 6%, var(--card-background-color));
}

/* A <button>, not the link it used to be: a GET that deletes is one prefetch
 * away from firing on its own. Quiet until hovered — it is the one thing on
 * this column that cannot be undone. */
.receipt__delete {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    color: #ef4444 !important;
    text-decoration: none !important;
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;
}

.receipt__delete:hover {
    opacity: 1;
}

.receipt__delete:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.receipt__delete svg {
    height: 0.8rem;
    width: 0.8rem;
}

.receipt.is-going {
    opacity: 0.4;
}

@media (min-width: 768px) {
    .receipt-stack {
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    }
}


/* ==================================================================
 *   QR CODE
 * ==================================================================
 *
 * Drawn client-side from the person's own url — see static/js/qr_code.js for
 * why nothing is stored. The frame is white in both themes because that is the
 * quiet margin a scanner reads the code against; on a dark page it reads as a
 * printed card sitting on the surface, which is what it is about to become. */

.qr-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    text-align: center;
}

.qr-panel__frame {
    padding: 1rem;
    border-radius: 1.25rem;
    background-color: #ffffff;
    background-image: radial-gradient(circle at 50% 0%,
                      rgba(151, 71, 255, 0.1) 0%, transparent 65%);
    box-shadow: 0 18px 34px -22px rgba(151, 71, 255, 0.85),
                0 4px 12px -10px var(--shadow);
}

.qr-panel__code {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* qrcodejs leaves both a canvas and the <img> it makes from it. Either one may
 * be the visible node depending on the browser, so both are sized here. */
.qr-panel__code canvas,
.qr-panel__code img {
    display: block;
    max-width: 100%;
    height: auto;
}

.qr-panel__name {
    margin-top: 0.85rem;
    font-size: 1rem;
    font-weight: 700;
}

.qr-panel__hint {
    font-size: 0.72rem;
    color: var(--tertiary-text);
}

.qr-panel__save {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    padding: 0.45rem 0.95rem;
    border: none;
    border-radius: 999px;
    background-image: linear-gradient(140deg, #67e8f9, #0891b2);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 20px -12px rgba(8, 145, 178, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.qr-panel__save span,
.qr-panel__save svg {
    color: #ffffff;
}

.qr-panel__save svg {
    height: 0.95rem;
    width: 0.95rem;
}

.qr-panel__save:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .qr-panel__save {
        transition: none;
    }

    .qr-panel__save:hover {
        transform: none;
    }
}

/* ============================== */
/*        ADDRESS PICKER          */
/* ============================== */

/*
 * Province blocks, the searchable district / municipality / ward menus and
 * the address viewer. One surface token so the same controls sit right on a
 * card, in the modal and in the navbar sheet, which each set --nav-surface.
 */
.province-picker,
.combo,
.address-cards,
.address-flags {
    --picker-surface: var(--nav-surface, var(--modal-surface, color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color))));
}

/* The full-page address forms reuse the modal's field styles, which read
 * --modal-surface; outside a modal panel nothing defines it. */
.address-form {
    --modal-surface: color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color));
    --modal-surface-strong: color-mix(in srgb, var(--primary-text) 11%, var(--card-background-color));
}

.address-form input[type="text"] {
    height: 44px;
}

.address-form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- province blocks ---------- */

.province-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .province-picker {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Real radios, visually replaced by their labels; the global 25px radio
 * sizing has to be undone. */
.province-picker__input {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.province-picker__block {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    border-radius: 0.9rem;
    background-color: var(--picker-surface);
    color: var(--secondary-text);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.province-picker__block:hover {
    background-color: color-mix(in srgb, var(--primary) 12%, var(--picker-surface));
    color: var(--primary-text);
}

.province-picker__input:checked + .province-picker__block {
    background-color: var(--primary);
    color: #fff;
}

.province-picker__input:focus-visible + .province-picker__block {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* ---------- cascade row ---------- */

.address-cascade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
}

.address-cascade__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.address-cascade__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary-text);
    padding-inline-start: 0.3rem;
}

/* ---------- searchable menu ---------- */

.combo {
    position: relative;
    width: 100%;
}

select.combo__native {
    display: none !important;
}

.combo__field {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 44px;
    padding: 0 0.6rem 0 0.95rem;
    border-radius: 0.9rem;
    background-color: var(--picker-surface);
    color: var(--secondary-text);
    transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.combo__field:hover {
    background-color: color-mix(in srgb, var(--primary-text) 4%, var(--picker-surface));
}

.combo.is-open .combo__field,
.combo__field:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 32%, transparent);
}

/* Beats the global and sheet-scoped text-input rules, which add borders,
 * padding and their own background with !important. */
.combo input.combo__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    color: var(--primary-text);
    font-size: 0.88rem;
    text-overflow: ellipsis;
}

.combo input.combo__input::placeholder {
    color: var(--tertiary-text);
}

.combo__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--tertiary-text);
}

.combo__clear[hidden] {
    display: none;
}

.combo__clear:hover {
    background-color: color-mix(in srgb, var(--primary-text) 8%, transparent);
    color: var(--primary-text);
}

.combo__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.combo.is-open .combo__chevron {
    transform: rotate(180deg);
}

.combo.is-disabled .combo__field {
    opacity: 0.5;
    cursor: not-allowed;
}

.combo.is-disabled input.combo__input {
    cursor: not-allowed;
}

.combo__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1200;
    max-height: 16rem;
    margin: 0 !important;
    padding: 0.4rem !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none !important;
    border-radius: 1rem;
    background-color: var(--card-background-color);
    box-shadow: 0 18px 45px -12px var(--shadow), 0 6px 14px -8px var(--shadow);
}

.combo__list[hidden] {
    display: none;
}

.combo__option {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.65rem;
    font-size: 0.86rem;
    color: var(--primary-text);
    cursor: pointer;
}

.combo__option.is-active {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--card-background-color));
}

.combo__option[aria-selected="true"] {
    color: var(--primary);
    font-weight: 700;
}

.combo__alt {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--tertiary-text);
}

.combo__empty {
    padding: 0.9rem 0.75rem;
    font-size: 0.8rem;
    text-align: center;
    color: var(--tertiary-text);
}

/* ---------- address viewer ---------- */

.address-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.address-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    background-color: var(--picker-surface);
    text-align: start;
}

.address-card--current {
    background-color: color-mix(in srgb, var(--primary) 9%, var(--card-background-color));
}

.address-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 0.8rem;
    background-color: var(--card-background-color);
    color: var(--secondary-text);
}

.address-card--current .address-card__icon {
    background-color: var(--primary);
    color: #fff;
}

.address-card__icon svg {
    width: 18px;
    height: 18px;
}

.address-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1 1 auto;
}

.address-card__roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.address-card__role {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tertiary-text);
}

.address-card--current .address-card__role--current {
    color: var(--primary);
}

.address-card__role + .address-card__role::before {
    content: '·';
    margin-inline-end: 0.3rem;
    color: var(--tertiary-text);
}

.address-card__primary {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-text);
    overflow-wrap: anywhere;
}

.address-card__secondary {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--secondary-text);
    overflow-wrap: anywhere;
}

.address-card__actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.address-card:hover .address-card__actions,
.address-card:focus-within .address-card__actions {
    opacity: 1;
}

/* No hover on touch screens, so the actions stay in view. */
@media (hover: none) {
    .address-card__actions {
        opacity: 1;
    }
}

.address-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--secondary-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.address-card__action svg {
    width: 15px;
    height: 15px;
}

.address-card__action:hover {
    background-color: var(--card-background-color);
    color: var(--primary-text);
}

.address-card__action--danger:hover {
    color: #ef4444;
}

.address-empty {
    padding: 1.25rem 1rem;
    border-radius: 1.1rem;
    background-color: var(--picker-surface);
    font-size: 0.82rem;
    text-align: center;
    color: var(--tertiary-text);
}

/* ---------- birth / current flags ---------- */

/* One row of standard toggle pills: a check box drawn in the pill, the real
 * checkbox hidden behind it. */
.address-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0.35rem;
}

.address-flags__label {
    margin-inline-end: 0.25rem;
    padding-inline-start: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.address-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.95rem 0 0.6rem;
    border-radius: 999px;
    background-color: var(--picker-surface);
    color: var(--secondary-text);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.address-flag:hover {
    color: var(--primary-text);
    background-color: color-mix(in srgb, var(--primary) 8%, var(--picker-surface));
}

/* The global checkbox rule draws its own circle with !important. */
.address-flag input[type="checkbox"] {
    position: absolute;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    opacity: 0;
    border: none !important;
    appearance: none;
    pointer-events: none;
}

.address-flag:has(input:focus-visible) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}

.address-flag__check {
    width: 20px;
    height: 20px;
    padding: 3px;
    flex-shrink: 0;
    border-radius: 0.4rem;
    background-color: var(--card-background-color);
    fill: none;
    stroke: transparent;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: background-color 0.15s ease-in-out, stroke 0.15s ease-in-out;
}

.address-flag:has(input:checked) {
    background-color: color-mix(in srgb, var(--primary) 12%, var(--card-background-color));
    color: var(--primary);
}

.address-flag:has(input:checked) .address-flag__check {
    background-color: var(--primary);
    stroke: #fff;
}

/* ============================ BS DATE INPUT ============================
 * Two rows — वि.सं. and ई.सं. — of year / month / day on one soft surface, with
 * the resolved date read back underneath. Qualified past the global
 * `.django-form input[type="text"]` / `select` rules and `.person-form …` so
 * both the page forms and the modal render it without an outline. */

.bs-date {
    --bs-date-surface: var(--modal-surface, color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color)));
    --bs-date-control: color-mix(in srgb, var(--card-background-color) 70%, var(--bs-date-surface));
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.4rem;
    border-radius: 1.1rem;
    background-color: var(--bs-date-surface);
    transition: box-shadow 0.15s ease-in-out;
}

.bs-date:focus-within {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent);
}

.bs-date__tabs {
    display: inline-flex;
    align-self: start;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background-color: var(--bs-date-control);
}

.bs-date__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

/* आज / हिजो / अस्ति: one tap fills both calendars. */
.bs-date__presets {
    display: inline-flex;
    gap: 0.25rem;
}

.bs-date__preset {
    padding: 0.25rem 0.7rem;
    border: none;
    border-radius: 999px;
    background-color: var(--bs-date-control);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--secondary-text);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.bs-date__preset:hover {
    color: var(--primary-text);
    background-color: var(--card-background-color);
}

.bs-date__preset[aria-pressed="true"] {
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 14%, var(--card-background-color));
}

.bs-date__tab {
    padding: 0.25rem 0.85rem;
    border: none;
    border-radius: 999px;
    background: none;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--secondary-text);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.bs-date__tab[aria-selected="true"] {
    color: var(--primary);
    background-color: var(--card-background-color);
    box-shadow: 0 1px 3px var(--shadow);
}

.bs-date__row {
    display: grid;
    grid-template-columns: 4.6rem minmax(0, 1fr) 4.4rem;
    align-items: center;
    gap: 0.3rem;
}

.bs-date__row[hidden] {
    display: none;
}

.bs-date .bs-date__row input.bs-date__year,
.bs-date .bs-date__row select.bs-date__month,
.bs-date .bs-date__row select.bs-date__day {
    width: 100%;
    min-width: 0;
    height: 2.2rem;
    padding: 0 0.6rem !important;
    border: none !important;
    border-radius: 0.75rem !important;
    background-color: var(--bs-date-control) !important;
    color: var(--primary-text);
    font-size: 0.85rem;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    outline: none;
    box-shadow: none;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.bs-date .bs-date__row input.bs-date__year:focus,
.bs-date .bs-date__row select:focus {
    background-color: var(--card-background-color) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
}

.bs-date__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.3rem;
    padding: 0 0.3rem;
}

.bs-date__readout {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
}

.bs-date__clear {
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--tertiary-text);
    background: none;
    border: none;
    cursor: pointer;
}

.bs-date__clear:hover {
    color: var(--primary-text);
}

.bs-date__clear[hidden] {
    display: none;
}

.bs-date.is-warn .bs-date__readout {
    color: #d97706;
}

.bs-date.is-invalid .bs-date__readout {
    color: #ef4444;
}

.bs-date.is-invalid,
.form-field.has-error .bs-date {
    box-shadow: 0 0 0 2px color-mix(in srgb, #ef4444 50%, transparent);
}

/* Age and life dates under the name on the detail page. */
.life-chip {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--secondary-text);
    background-color: color-mix(in srgb, var(--primary-text) 6%, var(--card-background-color));
}

.life-chip--age {
    font-weight: 700;
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 12%, var(--card-background-color));
}

/* ---------- Memorial: garland, diyo and life dates for the deceased ---------- */

/*
 * The garland is 1.3× the photo's width and centred, so its strands run along
 * the photo's outer edges and its loop hangs at the bottom edge — clear of the
 * face. No drop-shadows on the images: the webps carry a faint alpha fringe
 * that a shadow turns into a visible box.
 *
 * Mobile: the photo is a 10rem circle. The mask keeps everything below the
 * circle's middle, but above it only what lies inside the circle, so the
 * strands appear to tuck in behind the round frame.
 */
.memorial-frame {
    --memorial-photo: 10rem;
    --memorial-garland: calc(var(--memorial-photo) * 1.3);
    --memorial-spill-from: calc(var(--memorial-photo) / 2);
}

/* The circle is pulled 100px up over the family photo; stay inside it there. */
.memorial-frame--tucked {
    --memorial-spill-from: max(calc(var(--memorial-photo) / 2), 100px);
}

.memorial-garland {
    position: absolute;
    z-index: 2;
    top: 0;
    left: calc((var(--memorial-photo) - var(--memorial-garland)) / 2);
    width: var(--memorial-garland);
    height: var(--memorial-garland);
    pointer-events: none;
    -webkit-mask:
        radial-gradient(circle calc(var(--memorial-photo) / 2 - 3px) at 50% calc(var(--memorial-photo) / 2), #000 99%, transparent 100%) no-repeat,
        linear-gradient(to bottom, transparent var(--memorial-spill-from), #000 var(--memorial-spill-from)) no-repeat;
    mask:
        radial-gradient(circle calc(var(--memorial-photo) / 2 - 3px) at 50% calc(var(--memorial-photo) / 2), #000 99%, transparent 100%) no-repeat,
        linear-gradient(to bottom, transparent var(--memorial-spill-from), #000 var(--memorial-spill-from)) no-repeat;
}

.memorial-garland img {
    display: block;
    width: 100%;
    height: 100%;
}

.memorial-plaque {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    column-gap: 0.75rem;
    width: min(22rem, calc(100vw - 2rem));
    margin-top: -0.5rem;
}

.memorial-plaque__flame {
    position: relative;
    display: block;
    width: 5.5rem;
    height: 5.5rem;
}

.memorial-plaque__flame::before {
    content: '';
    position: absolute;
    inset: -15% -15% 20%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgb(255 180 70 / 0.55), rgb(255 180 70 / 0) 65%);
    animation: memorial-glow 3.2s ease-in-out infinite;
}

.memorial-plaque__diyo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.memorial-plaque__date {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-bottom: 0.6rem;
    line-height: 1.2;
}

.memorial-plaque__date--birth {
    align-items: flex-end;
    text-align: right;
}

.memorial-plaque__date--death {
    align-items: flex-start;
    text-align: left;
}

.memorial-plaque__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--secondary-text);
}

.memorial-plaque__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-text);
    white-space: nowrap;
}

@keyframes memorial-glow {
    0%, 100% { opacity: 0.65; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .memorial-plaque__flame::before {
        animation: none;
    }
}

/* The A4 श्रद्धाञ्जली download under the plaque (static/js/condolence.js). */
.condolence-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 0.75rem;
}

.condolence-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.4rem;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
}

.condolence-actions__split {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    background-image: linear-gradient(140deg, #d9a54c, #9c6a24);
    box-shadow: 0 10px 20px -12px rgba(156, 106, 36, 0.9),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.condolence-actions__split:hover {
    transform: translateY(-1px);
}

.condolence-actions__split button {
    background: transparent;
}

.condolence-actions__primary {
    padding: 0 0.9rem 0 1.1rem;
}

.condolence-actions__split .condolence-actions__primary {
    border-radius: 999px 0 0 999px;
}

.condolence-actions__split .condolence-actions__toggle {
    padding: 0 0.85rem 0 0.6rem;
    border-radius: 0 999px 999px 0;
    background: rgba(0, 0, 0, 0.1);
}

.condolence-actions__split .condolence-actions__toggle:hover {
    background: rgba(0, 0, 0, 0.18);
}

.condolence-actions__toggle svg {
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.condolence-actions__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.condolence-actions__split,
.condolence-actions__split span,
.condolence-actions__split svg {
    color: #ffffff;
}

.condolence-actions__split span {
    font-weight: 700;
}

.condolence-actions svg {
    width: 1rem;
    height: 1rem;
}

.condolence-actions__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    padding: 0.3rem;
    border-radius: 1rem;
    background: var(--card-background-color);
    box-shadow: 0 16px 32px -12px var(--shadow);
}

.condolence-actions__menu[hidden] {
    display: none;
}

.condolence-actions__menu button {
    width: 100%;
    padding: 0 1rem;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--primary-text);
    white-space: nowrap;
}

.condolence-actions__menu button:hover {
    background: var(--main-background-color);
}

.condolence-actions__menu span,
.condolence-actions__menu svg {
    color: var(--primary-text);
}

.condolence-actions__busy,
.condolence-actions [aria-busy] .condolence-actions__idle {
    display: none;
}

.condolence-actions [aria-busy] .condolence-actions__busy {
    display: inline;
}

.condolence-actions[data-busy] button {
    cursor: progress;
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .condolence-actions__split,
    .condolence-actions__split:hover {
        transition: none;
        transform: none;
    }

    .condolence-actions__toggle svg {
        transition: none;
    }
}

/* Portrait / landscape picker heading the download menu. */
.condolence-actions__menu {
    min-width: 13.5rem;
}

.condolence-actions__layouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    margin-bottom: 0.3rem;
    padding: 0.25rem;
    border-radius: 0.8rem;
    background: var(--main-background-color);
}

.condolence-actions__menu .condolence-actions__layouts button {
    flex-direction: column;
    gap: 0.2rem;
    height: 3.6rem;
    padding: 0;
    border-radius: 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
}

.condolence-actions__menu .condolence-actions__layouts button:hover {
    background: color-mix(in srgb, var(--card-background-color) 60%, transparent);
}

.condolence-actions__layouts svg {
    width: 1.15rem;
    height: 1.15rem;
}

.condolence-actions__menu .condolence-actions__layouts [aria-checked="true"],
.condolence-actions__menu .condolence-actions__layouts [aria-checked="true"]:hover {
    background: var(--card-background-color);
    box-shadow: 0 4px 12px -6px var(--shadow);
}

.condolence-actions__menu .condolence-actions__layouts [aria-checked="true"] span,
.condolence-actions__menu .condolence-actions__layouts [aria-checked="true"] svg {
    color: #b07a2a;
}

.condolence-actions__menu .condolence-actions__layouts [aria-checked="false"] span,
.condolence-actions__menu .condolence-actions__layouts [aria-checked="false"] svg {
    color: var(--secondary-text);
}

.condolence-actions__menu > button {
    justify-content: flex-start;
}

/* Full-screen preview of the print (built by condolence.js). */
html.condolence-preview-open {
    overflow: hidden;
}

.condolence-preview {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: calc(0.75rem + env(safe-area-inset-top)) 1rem calc(1rem + env(safe-area-inset-bottom));
    background-color: rgba(18, 14, 10, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffffff;
}

.condolence-preview[hidden] {
    display: none;
}

.condolence-preview button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

.condolence-preview svg {
    width: 1rem;
    height: 1rem;
}

/* The base theme colours every span; here each label follows its button. */
.condolence-preview span {
    color: inherit;
}

.condolence-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
}

.condolence-preview__layouts {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.08);
}

.condolence-preview__layouts button {
    height: 2.2rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.condolence-preview__layouts [aria-checked="true"] {
    background-color: #ffffff;
    color: #9c6a24;
}

.condolence-preview__close {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.condolence-preview__close:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.condolence-preview__close svg {
    width: 1.2rem;
    height: 1.2rem;
}

.condolence-preview__stage {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.condolence-preview__page {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.35rem;
    background-color: #ffffff;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    transition: opacity 0.2s ease;
}

.condolence-preview__page:not([src]) {
    display: none;
}

.condolence-preview[data-loading] .condolence-preview__page {
    opacity: 0.35;
}

.condolence-preview__status {
    position: absolute;
    display: none;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.55);
    font-size: 0.85rem;
    font-weight: 600;
}

.condolence-preview[data-loading] .condolence-preview__status--busy,
.condolence-preview[data-failed] .condolence-preview__status--failed {
    display: inline-block;
}

.condolence-preview__actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}

.condolence-preview__save {
    flex: 1;
    height: 2.75rem;
    padding: 0 1rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.12);
    font-size: 0.88rem;
    font-weight: 700;
    color: #ffffff;
}

.condolence-preview__save.condolence-actions__primary {
    background-image: linear-gradient(140deg, #d9a54c, #9c6a24);
}

.condolence-preview[data-loading] .condolence-preview__save,
.condolence-preview[data-busy] .condolence-preview__save {
    opacity: 0.6;
    pointer-events: none;
}

/* हार्दिक श्रद्धाञ्जली heading (condolence_title.html). */
.condolence-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: var(--ritual-accent, var(--mourning-accent));
    text-align: center;
    text-wrap: balance;
}

.condolence-title--hero {
    margin-bottom: 1rem;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
}

.condolence-title--feed {
    margin-bottom: 0.5rem;
    font-size: clamp(1.45rem, 4.2dvh, 2.1rem);
}

.condolence-title--card {
    align-self: stretch;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

/* The shared wording (condolence_text.html). */
.condolence-text {
    display: flex;
    flex-direction: column;
    gap: 0.7em;
    text-align: center;
    color: var(--primary-text);
}

.condolence-text p {
    margin: 0;
}

.condolence-text strong {
    font-weight: 700;
    color: var(--ritual-accent, var(--mourning-accent));
}

.condolence-text__tribute strong,
.condolence-text__tribute span {
    white-space: nowrap;
}

.condolence-text__closing {
    color: var(--secondary-text);
}

.condolence-text__signoff {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
}

.condolence-text__signoff span {
    font-size: 0.82em;
    color: var(--secondary-text);
}

.condolence-text__signoff strong {
    color: var(--primary-text);
}

.condolence-text--page {
    width: 100%;
    max-width: 36rem;
    margin-top: 1rem;
    font-size: 1rem;
    line-height: 1.9;
}

/* In the feed it takes whatever height is left; updates_feed.js fits the type to it. */
.condolence-text--feed {
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0.6rem 0 0;
    overflow: hidden;
    font-size: var(--fit-size, 0.95rem);
    line-height: 1.65;
}

.condolence-text--feed.is-brief .condolence-text__closing {
    display: none;
}

.condolence-text--feed.is-bare .condolence-text__signoff {
    display: none;
}

.condolence-text--feed.is-scrollable {
    min-height: 3.4em;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.condolence-text--feed.is-scrollable::-webkit-scrollbar {
    display: none;
}

.condolence-text--feed.is-clipped {
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent);
    mask-image: linear-gradient(180deg, #000 78%, transparent);
}

@media (min-width: 768px) {
    .condolence-text--page {
        font-size: 1.05rem;
    }
}

/* Desktop: a 420×500 rounded card, so the garland only needs its top edge cut. */
@media (min-width: 768px) {
    /*
     * The portrait photo is inset within the 420px column and the garland spans
     * exactly that column, so it never reaches the family photo beside it. The
     * garland is stretched ~12% taller so its loop lands at the photo's bottom
     * edge (the loop's top sits at ~82% of the garland image), below the chin.
     */
    .memorial-frame {
        --memorial-photo: calc(420px - 6rem);
        --memorial-photo-height: calc(var(--memorial-photo) * 500 / 420);
        padding: 0 3rem;
    }

    .memorial-frame .memorial-photo {
        width: var(--memorial-photo);
        height: var(--memorial-photo-height);
    }

    .memorial-garland {
        left: 0;
        width: 100%;
        height: calc(var(--memorial-photo-height) / 0.82);
        -webkit-mask: none;
        mask: none;
    }

    .memorial-plaque {
        width: 420px;
        margin-top: -0.5rem;
        column-gap: 1rem;
    }

    .memorial-plaque__flame {
        width: 8.5rem;
        height: 8.5rem;
    }

    .memorial-plaque__label {
        font-size: 0.8rem;
    }

    .memorial-plaque__value {
        font-size: 1.1rem;
    }
}

/* ---------- BS date: calendar tabs ---------- */

.bs-date--tabbed {
    gap: 0.45rem;
}

.bs-date__tabs {
    display: inline-flex;
    align-self: start;
    padding: 3px;
    gap: 2px;
    border-radius: 999px;
    background-color: var(--bs-date-control);
}

.bs-date__tab {
    padding: 0.22rem 0.8rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--tertiary-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.bs-date__tab:hover {
    color: var(--primary-text);
}

.bs-date__tab[aria-selected="true"] {
    background-color: var(--primary);
    color: #fff;
}

/* The tab names the calendar, so the row loses its tag column. */
.bs-date--tabbed .bs-date__row {
    grid-template-columns: 5rem minmax(0, 1fr) 4.6rem;
}

.bs-date__row[hidden] {
    display: none;
}

/* ---------- Latest updates: जुठो and सुतक ---------- */

:root {
    --mourning-accent: #c2410c;
    --birth-accent: #db2777;
}

html[data-theme="dark"] {
    --mourning-accent: #fb923c;
    --birth-accent: #f472b6;
}

.updates,
.observance {
    --ritual-surface: color-mix(in srgb, var(--primary-text) 5%, var(--card-background-color));
    --ritual-surface-strong: color-mix(in srgb, var(--primary-text) 10%, var(--card-background-color));
}

.observance--mourning,
.update-card--mourning {
    --ritual-accent: var(--mourning-accent);
}

.observance--birth,
.update-card--birth {
    --ritual-accent: var(--birth-accent);
}

/* Compact memorial: the round mobile frame at every width, sized by one variable. */
.memorial-frame.memorial-frame--compact {
    --memorial-photo: 7.5rem;
    --memorial-spill-from: calc(var(--memorial-photo) / 2);
    position: relative;
    display: block;
    padding: 0;
}

.memorial-frame.memorial-frame--hero {
    --memorial-photo: 10rem;
}

.memorial-frame--compact .memorial-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--memorial-photo);
    height: var(--memorial-photo);
    border-radius: 999px;
    object-fit: cover;
    background-color: var(--ritual-surface-strong);
    color: var(--tertiary-text);
}

.memorial-frame--compact .memorial-photo--empty svg {
    width: 40%;
    height: 40%;
}

.memorial-frame--compact .memorial-garland {
    left: calc((var(--memorial-photo) - var(--memorial-garland)) / 2);
    width: var(--memorial-garland);
    height: var(--memorial-garland);
    -webkit-mask:
        radial-gradient(circle calc(var(--memorial-photo) / 2 - 3px) at 50% calc(var(--memorial-photo) / 2), #000 99%, transparent 100%) no-repeat,
        linear-gradient(to bottom, transparent var(--memorial-spill-from), #000 var(--memorial-spill-from)) no-repeat;
    mask:
        radial-gradient(circle calc(var(--memorial-photo) / 2 - 3px) at 50% calc(var(--memorial-photo) / 2), #000 99%, transparent 100%) no-repeat,
        linear-gradient(to bottom, transparent var(--memorial-spill-from), #000 var(--memorial-spill-from)) no-repeat;
}

.memorial-plaque.memorial-plaque--compact {
    width: 100%;
    max-width: 17rem;
    column-gap: 0.5rem;
    margin-top: -0.35rem;
}

.memorial-plaque--compact .memorial-plaque__flame {
    width: 3.75rem;
    height: 3.75rem;
}

.memorial-plaque--compact .memorial-plaque__date {
    padding-bottom: 0.4rem;
}

.memorial-plaque--compact .memorial-plaque__label {
    font-size: 0.68rem;
}

.memorial-plaque--compact .memorial-plaque__value {
    font-size: 0.82rem;
}

.birth-frame {
    position: relative;
    display: block;
    width: 7.5rem;
    height: 7.5rem;
    margin-bottom: 0.4rem;
}

.birth-frame.birth-frame--hero {
    width: 10rem;
    height: 10rem;
}

.birth-frame::before {
    content: '';
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--birth-accent) 30%, transparent), transparent 68%);
}

.birth-frame__photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    background-color: color-mix(in srgb, var(--birth-accent) 12%, var(--card-background-color));
    color: var(--birth-accent);
}

.birth-frame__photo--empty svg {
    width: 42%;
    height: 42%;
}

.birth-frame__badge {
    position: absolute;
    right: 2%;
    bottom: 2%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background-color: var(--birth-accent);
    color: #ffffff;
}

.birth-frame__badge svg {
    width: 1rem;
    height: 1rem;
}

.updates {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.updates__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.25rem;
}

.updates__heading {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.updates__all {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 0.95rem;
    border-radius: 999px;
    background-color: var(--ritual-surface);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--primary-text) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease-in-out;
}

.updates__all:hover {
    background-color: var(--ritual-surface-strong);
}

.updates__nav {
    display: flex;
    flex-shrink: 0;
    gap: 0.4rem;
}

.updates__nav[hidden] {
    display: none;
}

.updates__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background-color: var(--ritual-surface);
    color: var(--primary-text);
    transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.updates__nav-btn:hover:not(:disabled) {
    background-color: var(--ritual-surface-strong);
}

.updates__nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.updates__nav-btn svg {
    width: 1.1rem;
    height: 1.1rem;
}

.updates__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-text);
}

.updates__subtitle {
    font-size: 0.8rem;
    color: var(--secondary-text);
}

/* A snap rail at every width; wider screens get fixed-width cards. */
.updates__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15.5rem, 80%);
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
}

.updates__rail::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .updates__rail {
        grid-auto-columns: 17rem;
    }
}

.update-card {
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    min-height: 21rem;
    padding: 1.25rem 1.15rem 1.3rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--ritual-accent) 10%, transparent), transparent 55%);
    color: var(--primary-text) !important;
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

.update-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -18px var(--shadow);
}

.update-card__kicker {
    display: flex;
    justify-content: space-between;
    align-self: stretch;
    margin-bottom: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ritual-accent);
}

.update-card__name {
    margin-top: 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.update-card__context {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--secondary-text);
}

.update-card__day {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-self: stretch;
    margin-top: auto;
    padding-top: 1rem;
    padding-bottom: 0.2rem;
    font-size: 0.78rem;
    color: var(--secondary-text);
}

.update-card__day strong {
    color: var(--primary-text);
}

.ritual-progress {
    display: grid;
    grid-template-columns: repeat(var(--span), 1fr);
    gap: 3px;
    align-self: stretch;
}

.ritual-progress span {
    height: 5px;
    border-radius: 999px;
    background-color: var(--ritual-surface-strong);
}

.ritual-progress span.is-milestone {
    height: 9px;
    margin-top: -2px;
}

.ritual-progress span.is-done {
    background-color: var(--ritual-accent);
}

/* ---------- जुठो / सुतक detail pages ---------- */

.observance {
    --ok: #16a34a;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 2rem;
}

html[data-theme="dark"] .observance {
    --ok: #22c55e;
}

/* Full-bleed and pulled up behind the translucent navbar, so the glow starts at the very top. */
.observance-band {
    margin-top: -70px;
    padding: calc(70px + 2.5rem) 1rem 2rem;
}

/* Marigold yellow in light mode; on the dark page a softer orange reads warmer than yellow. */
.observance--mourning {
    --band-glow: #facc15;
}

html[data-theme="dark"] .observance--mourning {
    --band-glow: #fdba74;
}

.observance--mourning .observance-band {
    background:
        radial-gradient(ellipse 55% 75% at 50% 42%, color-mix(in srgb, var(--band-glow) 42%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--band-glow) 20%, transparent), transparent 92%);
}

html[data-theme="dark"] .observance--mourning .observance-band {
    background:
        radial-gradient(ellipse 55% 75% at 50% 42%, color-mix(in srgb, var(--band-glow) 26%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--band-glow) 12%, transparent), transparent 92%);
}

/* A newborn gets one faint halo behind the photo. */
.observance--birth .observance-band {
    background: radial-gradient(ellipse 34% 48% at 50% 38%, color-mix(in srgb, var(--birth-accent) 16%, transparent), transparent 70%);
}

.observance-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

.observance-band__name {
    margin-top: 0.5rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary-text);
}

.observance-band__context {
    font-size: 0.85rem;
    color: var(--secondary-text);
}

.observance-band__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--card-background-color) 70%, transparent);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-text) !important;
    text-decoration: none !important;
}

.observance-band__link svg {
    width: 14px;
    height: 14px;
}

.observance__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 0.75rem;
}

/* ---------- bento ---------- */

.bento {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .bento {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bento__tile {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    padding: 1rem;
    border-radius: 1.4rem;
    background-color: var(--card-background-color);
    color: var(--primary-text) !important;
    text-decoration: none !important;
}

.bento__tile--ring {
    grid-row: span 2;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.bento__tile--wide {
    grid-column: span 2;
}

.bento__tile--full,
.bento__tile--wide3 {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .bento__tile--wide3 {
        grid-column: span 3;
    }
}

.bento__tile--accent {
    background-color: color-mix(in srgb, var(--ritual-accent) 14%, var(--card-background-color));
}

.bento__tile--quiet {
    justify-content: center;
    padding: 0.75rem 1rem;
}

.bento__tile--link {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.15s ease-out;
}

.bento__tile--link:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--card-background-color));
}

.bento__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--secondary-text);
}

.bento__big {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ritual-accent);
}

.bento__big small {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--secondary-text);
}

.bento__value {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.bento__value svg {
    width: 1.2rem;
    height: 1.2rem;
}

.bento__caption {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--secondary-text);
}

.bento__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: 0.35rem;
    border-radius: 0.8rem;
    background-color: color-mix(in srgb, var(--ritual-accent) 14%, var(--card-background-color));
    color: var(--ritual-accent);
}

.bento__icon svg {
    width: 16px;
    height: 16px;
}

.bento__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background-color: var(--primary);
    color: #ffffff;
}

.bento__go svg {
    width: 17px;
    height: 17px;
}

.bento__tile--solid,
.affected-check .bento__tile.bento__tile--solid {
    background-color: var(--ritual-accent);
}

.bento__tile--solid.bento__tile--ok,
.affected-check .bento__tile.bento__tile--ok {
    background-color: var(--ok);
}

.bento__tile--solid .bento__label,
.bento__tile--solid .bento__big,
.bento__tile--solid .bento__big small,
.bento__tile--solid .bento__value {
    color: #ffffff;
}

.bento__tile--solid .bento__label {
    opacity: 0.85;
}

.bento--over {
    opacity: 0.7;
}

/* Day progress: one pill per day, set around a circle and filled as the days pass. */
.day-ring {
    --radius: 4.1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 9.75rem;
    height: 9.75rem;
}

.day-ring__pill {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 20px;
    margin: -10px 0 0 -4.5px;
    border-radius: 999px;
    background-color: var(--ritual-surface-strong);
    transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(-1 * var(--radius)));
}

.day-ring__pill.is-done {
    background-color: var(--ritual-accent);
}

.day-ring__pill.is-today {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ritual-accent) 30%, transparent);
}

.day-ring__value,
.day-ring__unit {
    position: relative;
}

.day-ring__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ritual-accent);
}

.day-ring__unit {
    font-size: 0.72rem;
    color: var(--secondary-text);
}

.split {
    display: flex;
    gap: 3px;
    height: 10px;
    margin-top: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
}

.split__part {
    flex: var(--share) 1 0;
    background-color: var(--ritual-accent);
}

.split__part:nth-child(2),
.split__key:nth-child(2) .split__dot {
    background-color: color-mix(in srgb, var(--ritual-accent) 55%, var(--card-background-color));
}

.split__part:nth-child(3),
.split__key:nth-child(3) .split__dot {
    background-color: color-mix(in srgb, var(--ritual-accent) 28%, var(--card-background-color));
}

.split__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.9rem;
    margin-top: 0.45rem;
}

.split__key {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--secondary-text);
}

.split__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background-color: var(--ritual-accent);
}

.bar {
    position: relative;
    display: block;
    height: 6px;
    margin: 0.35rem 0 0.15rem;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--ritual-surface-strong);
}

.bar::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--p) * 1%);
    border-radius: inherit;
    background-color: var(--ritual-accent);
}

/* ---------- के म प्रभावित छु? ---------- */

.affected-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1rem;
    border-radius: 1.75rem;
    background-color: var(--card-background-color);
}

.affected-check__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-text);
}

/* The navbar field reads --nav-surface, which is scoped to the top navigation. */
.affected-check__shell {
    --nav-surface: var(--ritual-surface);
    --nav-surface-strong: var(--ritual-surface-strong);
    width: 100%;
    max-width: 36rem;
}

.affected-check__chip {
    color: var(--ritual-accent);
    pointer-events: none;
}

.affected-check__result {
    width: 100%;
}

.affected-check__result:empty {
    display: none;
}

.affected-check .bento__tile {
    background-color: var(--ritual-surface);
}

.bento--verdict {
    animation: verdict-in 0.22s ease-out;
}

.verdict-who {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
}

.verdict-who__photo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    object-fit: cover;
    background-color: var(--card-background-color);
    font-weight: 700;
    color: var(--secondary-text);
}

.verdict-who__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.verdict-who__name {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes verdict-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .bento--verdict {
        animation: none;
    }
}

/* ---------- पूरा विवरण ---------- */

.observance-full summary,
.gen summary,
.gen-more summary {
    list-style: none;
}

.observance-full summary::-webkit-details-marker,
.gen summary::-webkit-details-marker,
.gen-more summary::-webkit-details-marker {
    display: none;
}

.observance-full__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
    cursor: pointer;
}

.observance-full__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-text);
}

.observance-full__hint {
    flex: 1 1 auto;
    font-size: 0.78rem;
    color: var(--secondary-text);
}

.observance-full__toggle > svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--secondary-text);
    transition: transform 0.18s ease-out;
}

.observance-full[open] .observance-full__toggle > svg {
    transform: rotate(180deg);
}

.observance-full__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.panel {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
}

.panel__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-text);
}

.panel--notes {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
}

.note {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background-color: var(--card-background-color);
    font-size: 0.75rem;
    color: var(--secondary-text);
}

.note svg {
    width: 14px;
    height: 14px;
    color: var(--ritual-accent);
}

/* Rites as dots on a line; the line into a step lights up once that step is reached. */
.stepper {
    display: grid;
    grid-auto-columns: minmax(5.5rem, 1fr);
    grid-auto-flow: column;
    overflow-x: auto;
    scrollbar-width: none;
}

.stepper::-webkit-scrollbar {
    display: none;
}

.stepper__step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0.25rem;
    text-align: center;
}

.stepper__step::before {
    content: '';
    position: absolute;
    top: calc(1.4rem + 6.5px);
    right: 50%;
    width: 100%;
    height: 3px;
    background-color: var(--ritual-surface-strong);
}

.stepper__step:first-child::before {
    display: none;
}

.stepper__step--done::before,
.stepper__step--today::before {
    background-color: var(--ritual-accent);
}

.stepper__day {
    height: 1.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1rem;
    white-space: nowrap;
    color: var(--secondary-text);
}

.stepper__dot {
    position: relative;
    z-index: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--ritual-surface-strong);
}

.stepper__step--done .stepper__dot,
.stepper__step--today .stepper__dot {
    background-color: var(--ritual-accent);
}

.stepper__step--today .stepper__dot {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ritual-accent) 25%, transparent);
}

.stepper__name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary-text);
}

.stepper__step--done .stepper__name {
    color: var(--secondary-text);
}

.stepper__date {
    font-size: 0.7rem;
    color: var(--secondary-text);
}

.stepper__step--today .stepper__date {
    font-weight: 700;
    color: var(--ritual-accent);
}

.tier--over {
    opacity: 0.6;
}

.tier__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.85rem;
    align-items: center;
}

.tier__days {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 1.1rem;
    background-color: color-mix(in srgb, var(--ritual-accent) 15%, var(--card-background-color));
    color: var(--ritual-accent);
}

.tier__days-num {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.tier__days-unit {
    font-size: 0.66rem;
    font-weight: 600;
}

.tier__copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tier__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-text);
}

.tier__rule {
    font-size: 0.75rem;
    color: var(--secondary-text);
}

.tier__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.tier__count {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-text);
}

.pill {
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    background-color: var(--ritual-surface);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--secondary-text);
}

.pill--live {
    background-color: color-mix(in srgb, var(--ritual-accent) 15%, var(--card-background-color));
    color: var(--ritual-accent);
}

/* Each generation is a bar sized to the tier's largest; opening it lists the people. */
.gens {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gen__row {
    display: grid;
    grid-template-columns: 5.25rem 1fr 3rem;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border-radius: 0.9rem;
    cursor: pointer;
    transition: background-color 0.14s ease-out;
}

.gen__row:hover,
.gen[open] > .gen__row {
    background-color: var(--ritual-surface);
}

.gen__row--static {
    cursor: default;
}

.gen__row--static:hover {
    background: none;
}

.gen__label {
    overflow: hidden;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--secondary-text);
}

.gen__track {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--ritual-surface);
}

.gen__bar {
    display: block;
    width: calc(var(--share) * 1%);
    height: 100%;
    border-radius: inherit;
    background-color: var(--ritual-accent);
}

.gen__bar--faint {
    background-color: color-mix(in srgb, var(--ritual-accent) 30%, var(--card-background-color));
}

.gen__count {
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
    color: var(--primary-text);
}

.gen__body {
    padding: 0.55rem 0 0.4rem;
}

.gen-more summary {
    display: inline-flex;
    margin-top: 0.45rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background-color: var(--ritual-surface);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.gen-more > [data-slot] {
    margin-top: 0.45rem;
}

.observer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.4rem;
}

.observer-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border-radius: 999px;
    background-color: var(--ritual-surface);
    color: var(--primary-text) !important;
    text-decoration: none !important;
    transition: background-color 0.14s ease-out;
}

.observer-chip:hover {
    background-color: color-mix(in srgb, var(--primary) 10%, var(--card-background-color));
}

.observer-chip__photo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    object-fit: cover;
    background-color: var(--ritual-surface-strong);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.observer-chip__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.observer-chip__name,
.observer-chip__relation {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.observer-chip__name {
    font-size: 0.82rem;
    font-weight: 600;
}

.observer-chip__relation {
    font-size: 0.7rem;
    color: var(--secondary-text);
}

.observer-chip__tag {
    font-weight: 700;
    color: var(--ritual-accent);
}

.tier-lazy__empty {
    font-size: 0.78rem;
    color: var(--secondary-text);
}

/* Space the profile grid away from the updates rail above it. */
.updates + .dashboard-section-head {
    margin-top: 1.25rem;
}

/* ---------- person compare ---------- */

.compare-page {
    --compare-1: var(--primary);
    --compare-2: #F59E0B;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding: 0.75rem;
}

.compare-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.1rem;
    border-radius: 1.75rem;
    background-color: var(--card-background-color);
    background-image: linear-gradient(120deg,
        color-mix(in srgb, var(--compare-1) 10%, transparent),
        transparent 45%,
        color-mix(in srgb, var(--compare-2) 8%, transparent));
}

.compare-form__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.compare-form__art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    border-radius: 999px;
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--compare-1) 18%, var(--card-background-color)),
        color-mix(in srgb, var(--compare-2) 16%, var(--card-background-color)));
    transition: width 0.25s ease-out, height 0.25s ease-out;
}

.compare-form__art img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}

.compare-form__title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.3;
}

/* With a result below, the hero steps aside into a single row. */
.compare-page:has(.compare-result) .compare-form__intro {
    flex-direction: row;
}

.compare-page:has(.compare-result) .compare-form__art {
    width: 52px;
    height: 52px;
}

.compare-form__slots {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .compare-form__slots {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: stretch;
    }
}

.compare-form__swap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    width: 44px;
    height: 44px;
    margin-block: -1.1rem;
    border-radius: 999px;
    background-color: var(--card-background-color);
    box-shadow: 0 8px 22px -10px var(--shadow);
    color: var(--primary);
    transition: transform 0.25s ease-out;
}

.compare-form__swap svg {
    width: 18px;
    height: 18px;
    transform: rotate(90deg);
}

.compare-form__swap:hover {
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    .compare-form__swap {
        margin-block: 0;
        margin-inline: -0.9rem;
    }

    .compare-form__swap svg {
        transform: none;
    }
}

/* Each slot is a recessed well on the form card; its field and card rise back to card level. */
.compare-slot {
    --slot-accent: var(--compare-1);
    --nav-surface: var(--card-background-color);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border-radius: 1.4rem;
    background-color: color-mix(in srgb, var(--slot-accent) 6%, var(--main-background-color));
}

.compare-slot--2 {
    --slot-accent: var(--compare-2);
}

.compare-slot__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-slot__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background-color: var(--slot-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.compare-slot__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.compare-slot__chip {
    color: var(--slot-accent);
    background-color: color-mix(in srgb, var(--slot-accent) 12%, var(--card-background-color));
    pointer-events: none;
}

.compare-slot[data-filled="true"] .compare-slot__search {
    display: none;
}

.compare-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 88px;
    padding: 0.8rem;
    border-radius: 1.1rem;
    background-color: color-mix(in srgb, var(--card-background-color) 55%, transparent);
    transition: background-color 0.2s ease-out;
}

.compare-slot[data-filled="true"] .compare-card {
    background-color: var(--card-background-color);
    box-shadow: 0 14px 30px -22px var(--shadow);
}

.compare-card__ghost {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    opacity: 0.7;
}

.compare-card__ghost-avatar,
.compare-card__ghost-line {
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--primary-text) 6%, transparent) 0%,
        color-mix(in srgb, var(--slot-accent) 16%, transparent) 50%,
        color-mix(in srgb, var(--primary-text) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: compare-shimmer 1.8s ease-in-out infinite;
}

.compare-card__ghost-avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 999px;
}

.compare-card__ghost-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.compare-card__ghost-line {
    height: 12px;
    width: 70%;
    border-radius: 999px;
}

.compare-card__ghost-line--short {
    width: 40%;
}

.compare-card__person {
    display: none;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
}

.compare-slot[data-filled="true"] .compare-card__ghost {
    display: none;
}

.compare-slot[data-filled="true"] .compare-card__person {
    display: flex;
}

.compare-card.is-entering .compare-card__person {
    animation: compare-enter 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.compare-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--slot-accent) 14%, var(--card-background-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--slot-accent) 40%, transparent);
    color: var(--slot-accent);
}

.compare-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-card__avatar svg {
    width: 26px;
    height: 26px;
}

.compare-card__copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 auto;
    min-width: 0;
}

.compare-card__name {
    overflow: hidden;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--primary-text) !important;
    text-decoration: none !important;
}

.compare-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.compare-card__pill {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--slot-accent) 12%, transparent);
    color: var(--slot-accent);
    font-size: 0.7rem;
    font-weight: 700;
}

.compare-card__pill:empty,
.compare-card__parent:empty {
    display: none;
}

.compare-card__parent {
    overflow: hidden;
    font-size: 0.75rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--secondary-text);
}

.compare-card__change {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    color: var(--secondary-text);
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.compare-card__change:hover {
    background-color: color-mix(in srgb, var(--primary-text) 7%, transparent);
    color: var(--primary-text);
}

.compare-card__change svg {
    width: 16px;
    height: 16px;
}

.compare-form__actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 0.6rem;
}

@media (min-width: 768px) {
    .compare-form__actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.compare-form__status {
    font-size: 0.8rem;
    text-align: center;
    color: var(--secondary-text);
}

.compare-form__status.is-warning {
    color: #e11d48;
}

.compare-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 46px;
    padding: 0 1.4rem;
    border-radius: 999px;
    background-image: linear-gradient(120deg, var(--compare-1), color-mix(in srgb, var(--compare-1) 55%, var(--compare-2)));
    color: #fff;
    font-weight: 700;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.compare-form__submit span,
.compare-form__submit svg {
    color: #fff;
}

.compare-form__submit svg {
    width: 18px;
    height: 18px;
}

.compare-form__submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.compare-form.is-ready .compare-form__submit:not(:disabled) {
    box-shadow: 0 14px 28px -14px var(--compare-1);
}

.compare-form.is-ready .compare-form__submit:not(:disabled):hover {
    transform: translateY(-1px);
}

.compare-form.is-submitting .compare-form__submit {
    opacity: 0.8;
    animation: compare-pulse 1.2s ease-in-out infinite;
}

/* result */

.compare-result {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scroll-margin-top: calc(var(--top-navigation-height) + 0.75rem);
    animation: compare-enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.compare-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .compare-summary {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

.compare-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 1.25rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
}

.compare-stat__value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    background-image: linear-gradient(135deg, var(--compare-1), var(--compare-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.compare-stat__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.compare-lineage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
}

.compare-lineage__caption {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--secondary-text);
}

/* A fork drawn under the root: one stem, a crossbar, and a drop into each branch. */
.compare-lineage__branches {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    padding-top: 1.6rem;
}

.compare-lineage__branches::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 0.8rem;
    background-color: color-mix(in srgb, var(--primary-text) 16%, transparent);
}

.compare-lineage__branches::after {
    content: '';
    position: absolute;
    top: 0.8rem;
    left: 25%;
    right: 25%;
    height: 2px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--compare-1), var(--compare-2));
}

/* Direct line: one person descends from the other, so the stem runs straight down. */
.compare-lineage__branches--single {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-top: 0.8rem;
}

.compare-lineage__branches--single::before,
.compare-lineage__branches--single::after {
    display: none;
}

.compare-lineage__branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.compare-lineage__branch::before {
    content: '';
    position: absolute;
    top: -0.8rem;
    left: 50%;
    width: 2px;
    height: 0.8rem;
    background-color: var(--branch-accent);
}

.compare-lineage__branch--1 {
    --branch-accent: var(--compare-1);
}

.compare-lineage__branch--2 {
    --branch-accent: var(--compare-2);
}

.compare-lineage__branch .compare-chip + .compare-chip::before {
    content: '';
    position: absolute;
    top: -0.9rem;
    left: 50%;
    width: 2px;
    height: 0.9rem;
    background-image: linear-gradient(var(--branch-accent) 50%, transparent 50%);
    background-size: 2px 6px;
}

.compare-chip {
    --chip-accent: var(--primary-text);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 260px;
    padding: 0.6rem;
    border-radius: 1.1rem;
    background-color: color-mix(in srgb, var(--chip-accent) 7%, var(--card-background-color));
    text-align: center;
    text-decoration: none !important;
    transition: transform 0.16s ease-out;
}

.compare-chip:hover {
    transform: translateY(-2px);
}

.compare-chip--root {
    --chip-accent: var(--primary);
}

.compare-chip--1 {
    --chip-accent: var(--compare-1);
}

.compare-chip--2 {
    --chip-accent: var(--compare-2);
}

.compare-chip__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--chip-accent) 14%, var(--card-background-color));
    color: var(--secondary-text);
}

.compare-chip--1 .compare-chip__avatar,
.compare-chip--2 .compare-chip__avatar,
.compare-chip--root .compare-chip__avatar {
    box-shadow: 0 0 0 2px var(--chip-accent);
}

.compare-chip__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-chip__avatar svg {
    width: 20px;
    height: 20px;
}

.compare-chip__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    width: 100%;
}

.compare-chip__name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
}

.compare-chip__meta {
    font-size: 0.7rem;
    color: var(--secondary-text);
}

@media (min-width: 640px) {
    .compare-chip {
        flex-direction: row;
        text-align: left;
    }
}

.compare-children {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
}

.compare-children__title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.compare-children__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.compare-children__item {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--primary-text) 6%, var(--card-background-color));
    color: var(--primary-text) !important;
    font-size: 0.78rem;
    text-decoration: none !important;
    transition: background-color 0.15s ease-in-out;
}

.compare-children__item:hover {
    background-color: color-mix(in srgb, var(--primary-text) 11%, var(--card-background-color));
}

.compare-children__item.is-branch-1 {
    background-color: color-mix(in srgb, var(--compare-1) 16%, var(--card-background-color));
    color: var(--compare-1) !important;
    font-weight: 700;
}

.compare-children__item.is-branch-2 {
    background-color: color-mix(in srgb, var(--compare-2) 18%, var(--card-background-color));
    color: color-mix(in srgb, var(--compare-2) 75%, var(--primary-text)) !important;
    font-weight: 700;
}

.compare-children__count {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--primary-text) 7%, var(--card-background-color));
    font-size: 0.72rem;
    color: var(--secondary-text);
}

.compare-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
    font-weight: 700;
    color: var(--secondary-text);
}

.compare-empty svg {
    width: 28px;
    height: 28px;
    color: var(--tertiary-text);
}

.compare-trees {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .compare-trees {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.compare-tree {
    --tree-accent: var(--compare-1);
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.5rem;
    border-radius: 1.5rem;
    background-color: var(--card-background-color);
}

.compare-tree--2 {
    --tree-accent: var(--compare-2);
}

.compare-tree__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 1.1rem;
    background-color: color-mix(in srgb, var(--tree-accent) 9%, var(--card-background-color));
}

.compare-tree__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background-color: var(--tree-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.compare-tree__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.compare-tree__gen {
    flex: 0 0 auto;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background-color: var(--card-background-color);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--secondary-text);
}

.compare-tree__body {
    overflow: auto;
    padding: 0.5rem 0.25rem;
}

@keyframes compare-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@keyframes compare-enter {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

@keyframes compare-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .compare-card__ghost-avatar,
    .compare-card__ghost-line,
    .compare-card.is-entering .compare-card__person,
    .compare-result,
    .compare-form.is-submitting .compare-form__submit {
        animation: none;
    }

    .compare-form__swap,
    .compare-chip {
        transition: none;
    }
}

/* Newborns take the child's colour: pink for a daughter, dodger blue for a son, grey otherwise. */
.birth-tone--daughter {
    --birth-accent: #db2777;
}

.birth-tone--son {
    --birth-accent: #1e90ff;
}

.birth-tone--neutral {
    --birth-accent: #6b7280;
}

html[data-theme="dark"] .birth-tone--daughter {
    --birth-accent: #f472b6;
}

html[data-theme="dark"] .birth-tone--son {
    --birth-accent: #4aa8ff;
}

html[data-theme="dark"] .birth-tone--neutral {
    --birth-accent: #9ca3af;
}

/* The detail page's plaque: room around the diyo and dates that read at a glance. */
.memorial-plaque.memorial-plaque--hero {
    max-width: 27rem;
    column-gap: 1.75rem;
    margin-top: -0.25rem;
}

.memorial-plaque--compact.memorial-plaque--hero .memorial-plaque__flame {
    width: 5.25rem;
    height: 5.25rem;
}

.memorial-plaque--compact.memorial-plaque--hero .memorial-plaque__date {
    gap: 0.3rem;
    padding-bottom: 0.75rem;
}

.memorial-plaque--compact.memorial-plaque--hero .memorial-plaque__label {
    font-size: 0.82rem;
    letter-spacing: 0.06em;
}

.memorial-plaque--compact.memorial-plaque--hero .memorial-plaque__value {
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .memorial-plaque.memorial-plaque--hero {
        max-width: 32rem;
        column-gap: 2.25rem;
    }

    .memorial-plaque--compact.memorial-plaque--hero .memorial-plaque__label {
        font-size: 0.9rem;
    }

    .memorial-plaque--compact.memorial-plaque--hero .memorial-plaque__value {
        font-size: 1.3rem;
    }
}

/* ---------- recent updates feed: one full-screen slide per update ---------- */

body:has(.feed-shell) {
    overflow: hidden;
}

.feed-shell {
    --ritual-surface: color-mix(in srgb, var(--primary-text) 5%, var(--card-background-color));
    --ritual-surface-strong: color-mix(in srgb, var(--primary-text) 10%, var(--card-background-color));
    --feed-portrait: clamp(6.5rem, 22dvh, 10rem);
    position: fixed;
    inset: 0;
    z-index: 1500;
    background-color: var(--main-background-color);
}

.feed {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    outline: none;
}

.feed::-webkit-scrollbar {
    display: none;
}

.feed-slide {
    --band-glow: #facc15;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    padding: calc(4.5rem + env(safe-area-inset-top)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.feed-slide--mourning {
    --ritual-accent: var(--mourning-accent);
    background:
        radial-gradient(ellipse 70% 45% at 50% 30%, color-mix(in srgb, var(--band-glow) 30%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--band-glow) 12%, transparent), transparent 70%);
}

html[data-theme="dark"] .feed-slide--mourning {
    --band-glow: #fdba74;
    background:
        radial-gradient(ellipse 70% 45% at 50% 30%, color-mix(in srgb, var(--band-glow) 18%, transparent), transparent 72%),
        linear-gradient(180deg, color-mix(in srgb, var(--band-glow) 8%, transparent), transparent 70%);
}

.feed-slide--birth {
    --ritual-accent: var(--birth-accent);
    background: radial-gradient(ellipse 60% 40% at 50% 30%, color-mix(in srgb, var(--birth-accent) 18%, transparent), transparent 72%);
}

.feed-slide__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    gap: 0.45rem;
    width: 100%;
    max-width: 28rem;
    text-align: center;
}

/* Content centres in the space above the CTAs, which stay pinned to the bottom. */
.feed-slide__inner > :first-child {
    margin-top: auto;
}

.feed-slide__inner > :last-child:not(.feed-slide__actions) {
    margin-bottom: auto;
}

.feed-slide.is-entering .feed-slide__inner {
    animation: feed-in 0.28s ease-out;
}

.feed-slide__kicker {
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--ritual-accent);
}

.feed-slide .memorial-frame.memorial-frame--hero {
    --memorial-photo: var(--feed-portrait);
}

.feed-slide .birth-frame.birth-frame--hero {
    width: var(--feed-portrait);
    height: var(--feed-portrait);
}

.feed-slide__name {
    margin-top: 0.4rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-text);
}

.feed-slide__context {
    font-size: 0.85rem;
    color: var(--secondary-text);
}

.feed-slide .memorial-plaque--hero .memorial-plaque__label {
    font-size: 0.62rem;
}

.feed-slide .memorial-plaque--hero .memorial-plaque__value {
    font-size: 0.8rem;
}

.feed-slide__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.feed-slide .day-ring {
    --radius: 2.4rem;
    width: 5.8rem;
    height: 5.8rem;
}

.feed-slide .day-ring__pill {
    width: 6px;
    height: 12px;
    margin: -6px 0 0 -3px;
}

.feed-slide .day-ring__value {
    font-size: 0.95rem;
}

.feed-slide .day-ring__unit {
    font-size: 0.62rem;
}

.feed-slide__status {
    display: block;
    align-self: center;
    width: 100%;
    font-size: 0.85rem;
    text-align: center;
    color: var(--secondary-text);
}

.feed-slide__status strong {
    color: var(--primary-text);
}

/* Rites as two-line labels on one strip that bleeds to the slide edges. */
.feed-rites {
    position: relative;
    align-self: stretch;
    margin: 0.9rem -1.25rem 0;
}

.feed-rites__track {
    display: flex;
    gap: var(--rite-gap);
    margin: 0;
    padding: 4px 1.25rem 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.feed-rites__track::-webkit-scrollbar {
    display: none;
}

.feed-rites {
    --rite-gap: 2.5rem;
    --rite-node: 14px;
    --rite-line: 1.5px;
}

.feed-rites__item {
    position: relative;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    scroll-snap-align: center;
    white-space: nowrap;
}

/* Each rite draws half the line on either side; the halves meet mid-gap, whatever the label widths. */
.feed-rites__item::before,
.feed-rites__item::after {
    content: '';
    position: absolute;
    top: calc((var(--rite-node) - var(--rite-line)) / 2);
    height: var(--rite-line);
    background-color: var(--ritual-surface-strong);
}

.feed-rites__item::before {
    left: calc(var(--rite-gap) / -2);
    right: 50%;
}

.feed-rites__item::after {
    left: 50%;
    right: calc(var(--rite-gap) / -2);
}

.feed-rites__item:first-child::before,
.feed-rites__item:last-child::after {
    display: none;
}

.feed-rites__item--done::before,
.feed-rites__item--done::after,
.feed-rites__item--today::before {
    background-color: var(--ritual-accent);
}

.feed-rites__node {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--rite-node);
    height: var(--rite-node);
    margin-bottom: 0.3rem;
    border-radius: 999px;
    background-color: var(--ritual-surface-strong);
    color: #ffffff;
}

.feed-rites__item--done .feed-rites__node,
.feed-rites__item--today .feed-rites__node {
    background-color: var(--ritual-accent);
}

.feed-rites__item--today .feed-rites__node {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ritual-accent) 25%, transparent);
}

.feed-rites__node svg {
    width: 9px;
    height: 9px;
    stroke-width: 3;
}

.feed-rites__item:first-child {
    margin-left: auto;
}

.feed-rites__item:last-child {
    margin-right: auto;
}

.feed-rites__name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary-text);
}

.feed-rites__date {
    font-size: 0.8rem;
    color: var(--secondary-text);
}

.feed-rites__item--done .feed-rites__name,
.feed-rites__item--done .feed-rites__date {
    opacity: 0.55;
}

.feed-rites__item--today .feed-rites__name,
.feed-rites__item--today .feed-rites__date {
    color: var(--ritual-accent);
}

.feed-rites__edge {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background-color: var(--ritual-surface-strong);
    color: var(--primary-text);
    transform: translateY(-50%);
}

.feed-rites__edge[hidden] {
    display: none;
}

.feed-rites__edge--start {
    left: 0.4rem;
}

.feed-rites__edge--end {
    right: 0.4rem;
}

.feed-rites__edge svg {
    width: 0.95rem;
    height: 0.95rem;
}

.feed-slide__actions {
    display: flex;
    gap: 0.6rem;
    align-self: stretch;
    margin-top: auto;
    padding-top: 1.1rem;
}

.feed-slide__action {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 2.35rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--card-background-color) 80%, transparent);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-text) !important;
    text-decoration: none !important;
    transition: filter 0.15s ease-in-out;
}

.feed-slide__action--primary {
    background-color: var(--ritual-accent);
    color: #ffffff !important;
}

.feed-slide__action:hover {
    filter: brightness(1.06);
}

.feed-slide__action svg {
    width: 0.9rem;
    height: 0.9rem;
}

/* Mourning slides: days and full details up beside the back button, the wording, then the download. */
.feed-slide--mourning {
    padding-top: calc(4rem + env(safe-area-inset-top));
}

.feed-slide__top {
    position: absolute;
    top: calc(0.75rem + env(safe-area-inset-top));
    left: 4rem;
    right: 1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    height: 2.5rem;
}

.feed-days {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    max-width: 13rem;
    min-width: 6rem;
    height: 2.1rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--card-background-color) 85%, transparent);
}

/* One segment per jutho day, the elapsed ones filled. */
.feed-days__track {
    display: grid;
    grid-template-columns: repeat(var(--n), 1fr);
    gap: 3px;
    width: 100%;
}

.feed-days__track span {
    height: 4px;
    border-radius: 999px;
    background-color: var(--ritual-surface-strong);
}

.feed-days__track .is-done {
    background-color: var(--ritual-accent);
}

.feed-days__track .is-today {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ritual-accent) 30%, transparent);
}

.feed-slide__day-chip {
    margin: -0.15rem 0 0.6rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--ritual-accent) 10%, transparent);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ritual-accent);
}

.feed-slide__details {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 2.1rem;
    padding: 0 0.8rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--card-background-color) 85%, transparent);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--primary-text) !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.feed-slide__details:hover {
    background-color: var(--card-background-color);
}

.feed-slide__details svg {
    width: 0.85rem;
    height: 0.85rem;
}

.feed-slide__name a {
    font-weight: inherit;
    color: inherit !important;
    text-decoration: none !important;
}

.feed-slide__name a:hover {
    text-decoration: underline !important;
    text-underline-offset: 0.2em;
}

.feed-slide__actions--mourning .condolence-actions {
    flex: 1;
    margin-top: 0;
}

.feed-slide__actions--mourning .condolence-actions__split {
    width: 100%;
}

.feed-slide__actions--mourning .condolence-actions__primary {
    flex: 1;
    justify-content: center;
}

.feed-slide__actions--mourning .condolence-actions button {
    height: 2.35rem;
}

/* The slide ends at the button, so the menu opens upwards. */
.feed-slide__actions--mourning .condolence-actions__menu {
    top: auto;
    bottom: calc(100% + 0.4rem);
}

.feed-slide__actions--mourning .condolence-actions__menu .condolence-actions__layouts button {
    height: 3.6rem;
}

.feed-slide--empty svg {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--tertiary-text);
}

@media (max-height: 760px) {
    .feed-shell {
        --feed-portrait: clamp(5.5rem, 15dvh, 8rem);
    }

    .feed-slide {
        padding-top: calc(3.75rem + env(safe-area-inset-top));
    }

    .feed-slide--mourning {
        padding-top: calc(3.6rem + env(safe-area-inset-top));
    }

    .feed-slide__kicker {
        margin-bottom: 0.2rem;
    }

    .feed-slide__name {
        font-size: 1.3rem;
    }

    .feed-slide .day-ring {
        --radius: 1.95rem;
        width: 4.8rem;
        height: 4.8rem;
    }

    .feed-slide .day-ring__pill {
        width: 5px;
        height: 10px;
        margin: -5px 0 0 -2.5px;
    }
}

.feed-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0;
    pointer-events: none;
}

.feed-bar > * {
    pointer-events: auto;
}

.feed-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    color: var(--primary-text) !important;
}

a.feed-bar__btn {
    background-color: var(--ritual-surface);
}

.feed-bar__btn svg {
    width: 1.15rem;
    height: 1.15rem;
}

.feed-bar__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.feed-bar__title strong {
    font-size: 0.95rem;
    color: var(--primary-text);
}

.feed-bar__title span {
    min-height: 1em;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--secondary-text);
}

.feed-steps {
    position: absolute;
    top: 50%;
    right: 1.5rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transform: translateY(-50%);
}

.feed-steps__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background-color: var(--ritual-surface);
    color: var(--primary-text);
    transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.feed-steps__btn:hover:not(:disabled) {
    background-color: var(--ritual-surface-strong);
}

.feed-steps__btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Touch screens swipe; the buttons are for mouse and keyboard. */
@media (hover: none), (max-width: 767px) {
    .feed-steps {
        display: none;
    }
}

.feed-skeleton {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ritual-surface-strong) 25%, var(--ritual-surface) 45%, var(--ritual-surface-strong) 65%);
    background-size: 300% 100%;
    animation: feed-shimmer 1.4s ease-in-out infinite;
}

.feed-skeleton--kicker {
    width: 7rem;
    height: 0.8rem;
    margin-bottom: 0.5rem;
}

.feed-skeleton--title {
    width: min(14rem, 70%);
    height: clamp(1.45rem, 4.2dvh, 2.1rem);
}

.feed-skeleton--text {
    flex: 0 1 6.5rem;
    min-height: 3rem;
    align-self: stretch;
    margin-top: 0.35rem;
    border-radius: 1rem;
}

.feed-skeleton--portrait {
    width: var(--feed-portrait);
    height: var(--feed-portrait);
}

.feed-skeleton--name {
    width: min(15rem, 80%);
    height: 1.6rem;
    margin-top: 0.6rem;
}

.feed-skeleton--line {
    width: min(10rem, 60%);
    height: 0.9rem;
}

.feed-skeleton--ring {
    width: 5.8rem;
    height: 5.8rem;
    margin-top: 0.75rem;
}

.feed-skeleton--steps {
    align-self: stretch;
    height: 2.9rem;
    margin-top: 1.4rem;
    border-radius: 0.75rem;
}

.feed-skeleton--action {
    flex: 1;
    height: 2.35rem;
}

@media (max-height: 760px) {
    .feed-skeleton--ring {
        width: 4.8rem;
        height: 4.8rem;
    }
}

@keyframes feed-shimmer {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0 0;
    }
}

@keyframes feed-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feed-skeleton,
    .feed-slide.is-entering .feed-slide__inner {
        animation: none;
    }
}

/* ============================== */
/*        PERSON AVATAR           */
/* ============================== */

/*
 * The no-photo stand-in (components/person_avatar.html, symbols in
 * person_card_icons.html): cool slate for men, dusty rose for women. It has no
 * backdrop — the frame's surface shows through and the bust stands on the
 * frame's bottom edge, round or rectangular. The !importants win over the
 * icon-sizing `svg` rules each frame carries for its old glyph.
 */
:root {
    --pa-m-hi: #f8fbff;
    --pa-m-mid: #c5d5ea;
    --pa-m-deep: #a2b8d6;
    --pa-m-hair1: #adbfd8;
    --pa-m-hair2: #98abc9;

    --pa-f-hi: #fff9fb;
    --pa-f-mid: #f0cad6;
    --pa-f-deep: #dea8ba;
    --pa-f-hair1: #e0b3c3;
    --pa-f-hair2: #cf9fb0;

    /* The child of the family illustration: warm apricot, between the two. */
    --pa-c-hi: #fffaf5;
    --pa-c-mid: #f7dcc6;
    --pa-c-deep: #ecc2a2;
    --pa-c-hair1: #e0b692;
    --pa-c-hair2: #cfa07c;
}

html[data-theme="dark"] {
    --pa-m-hi: #c8d6ea;
    --pa-m-mid: #8da4c4;
    --pa-m-deep: #6d84a8;
    --pa-m-hair1: #5f7699;
    --pa-m-hair2: #4f6588;

    --pa-f-hi: #f3d5de;
    --pa-f-mid: #c692a4;
    --pa-f-deep: #a46e82;
    --pa-f-hair1: #8c566b;
    --pa-f-hair2: #76475c;

    --pa-c-hi: #f3dfcc;
    --pa-c-mid: #c9a080;
    --pa-c-deep: #a88063;
    --pa-c-hair1: #8f6a4d;
    --pa-c-hair2: #795840;
}

.person-avatar {
    display: block;
    flex-shrink: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    fill: none;
    stroke: none !important;
}

.person-avatar[hidden] {
    display: none;
}

/* For frames that bring no surface of their own. */
.person-avatar-frame {
    background-color: color-mix(in srgb, var(--primary-text) 6%, transparent);
}

.person-avatar__caption {
    position: absolute;
    inset: 1.75rem 0 auto;
    text-align: center;
    font-size: 1.1rem;
    color: var(--tertiary-text);
}

/* ---------- शुभ जन्म: confetti and colour, the bright counterpart to the mourning glow ---------- */

.update-card--birth,
.feed-slide--birth,
.observance--birth {
    --party-sun: #d97706;
    --party-mint: #059669;
    --party-lilac: #8b5cf6;
    --party-coral: #f43f5e;
    --party-sky: #0ea5e9;
}

html[data-theme="dark"] .update-card--birth,
html[data-theme="dark"] .feed-slide--birth,
html[data-theme="dark"] .observance--birth {
    --party-sun: #fbbf24;
    --party-mint: #34d399;
    --party-lilac: #a78bfa;
    --party-coral: #fb7185;
    --party-sky: #38bdf8;
}

.update-card--birth {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-image:
        radial-gradient(circle at 10% 6%, color-mix(in srgb, var(--party-sun) 20%, transparent), transparent 42%),
        radial-gradient(circle at 94% 14%, color-mix(in srgb, var(--birth-accent) 20%, transparent), transparent 44%),
        radial-gradient(circle at 50% 104%, color-mix(in srgb, var(--party-mint) 14%, transparent), transparent 52%);
}

.update-card--birth:hover {
    transform: translateY(-3px) rotate(-0.4deg);
}

.feed-slide--birth {
    isolation: isolate;
    background:
        radial-gradient(ellipse 55% 38% at 50% 28%, color-mix(in srgb, var(--birth-accent) 22%, transparent), transparent 72%),
        radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--party-sun) 18%, transparent), transparent 38%),
        radial-gradient(circle at 94% 40%, color-mix(in srgb, var(--party-lilac) 16%, transparent), transparent 40%),
        radial-gradient(circle at 20% 96%, color-mix(in srgb, var(--party-mint) 14%, transparent), transparent 42%);
}

.observance--birth .observance-band {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 34% 48% at 50% 40%, color-mix(in srgb, var(--birth-accent) 22%, transparent), transparent 70%),
        radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--party-sun) 18%, transparent), transparent 36%),
        radial-gradient(circle at 88% 60%, color-mix(in srgb, var(--party-lilac) 16%, transparent), transparent 38%);
}

/* Confetti sits behind the content; each piece falls through its own container. */
.confetti {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
}

.confetti i {
    --c: var(--birth-accent);
    position: absolute;
    top: -1.5rem;
    left: var(--x);
    width: 0.45rem;
    height: 0.8rem;
    border-radius: 2px;
    background-color: var(--c);
    opacity: 0.85;
    animation: confetti-fall var(--t) linear var(--d) infinite;
}

.confetti i:nth-child(5n + 1) { --c: var(--party-sun); }
.confetti i:nth-child(5n + 2) { --c: var(--birth-accent); }
.confetti i:nth-child(5n + 3) { --c: var(--party-mint); }
.confetti i:nth-child(5n + 4) { --c: var(--party-lilac); }
.confetti i:nth-child(5n) { --c: var(--party-coral); }

.confetti i:nth-child(3n) {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
}

.confetti i:nth-child(4n + 2) {
    width: 0.3rem;
    height: 1rem;
}

.confetti--card i {
    opacity: 0.6;
}

.confetti--card i:nth-child(n + 11) {
    display: none;
}

@keyframes confetti-fall {
    from {
        transform: translate3d(0, 0, 0) rotate(var(--r));
    }
    50% {
        transform: translate3d(1.25rem, 50vh, 0) rotate(calc(var(--r) + 200deg));
        transform: translate3d(1.25rem, 55cqh, 0) rotate(calc(var(--r) + 200deg));
    }
    to {
        transform: translate3d(-0.5rem, 100vh, 0) rotate(calc(var(--r) + 420deg));
        transform: translate3d(-0.5rem, calc(100cqh + 3rem), 0) rotate(calc(var(--r) + 420deg));
    }
}

/* शुभ जन्म heading (birth_title.html). */
.birth-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    margin: 0;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.birth-title__text {
    padding: 0.05em 0;
    background-image: linear-gradient(100deg, var(--birth-accent), var(--party-lilac) 55%, var(--party-sun));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.birth-title__pop {
    width: 1em;
    height: 1em;
    flex: none;
    color: var(--party-sun);
    animation: birth-pop 2.4s ease-in-out infinite;
}

.birth-title__pop--flip {
    color: var(--birth-accent);
    animation-name: birth-pop-flip;
    animation-delay: -1.2s;
}

.birth-title--card {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.birth-title--feed {
    margin-bottom: 0.5rem;
    font-size: clamp(1.45rem, 4.2dvh, 2.1rem);
}

.birth-title--hero {
    margin-bottom: 1rem;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
}

@keyframes birth-pop {
    0%, 100% { transform: rotate(0) scale(1); }
    50% { transform: rotate(-12deg) scale(1.12); }
}

@keyframes birth-pop-flip {
    0%, 100% { transform: scaleX(-1) rotate(0) scale(1); }
    50% { transform: scaleX(-1) rotate(-12deg) scale(1.12); }
}

/* A slowly turning rainbow aura, twinkling stars and a bobbing badge around the newborn. */
.birth-frame::before {
    inset: -20%;
    background: conic-gradient(from 0deg, var(--party-sun), var(--birth-accent), var(--party-lilac), var(--party-sky), var(--party-mint), var(--party-sun));
    filter: blur(1.1rem);
    opacity: 0.5;
    animation: birth-aura 12s linear infinite;
}

.birth-frame__spark {
    position: absolute;
    display: flex;
    width: 1.1rem;
    height: 1.1rem;
    animation: birth-twinkle 2.6s ease-in-out infinite;
}

.birth-frame__spark svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke-width: 1.5;
}

.birth-frame__spark--a {
    top: -4%;
    left: -2%;
    color: var(--party-sun);
}

.birth-frame__spark--b {
    top: 10%;
    right: -12%;
    width: 0.85rem;
    height: 0.85rem;
    color: var(--party-lilac);
    animation-delay: -0.9s;
}

.birth-frame__spark--c {
    bottom: 14%;
    left: -14%;
    width: 0.8rem;
    height: 0.8rem;
    color: var(--party-coral);
    animation-delay: -1.7s;
}

.birth-frame--hero .birth-frame__spark {
    width: 1.5rem;
    height: 1.5rem;
}

.birth-frame--hero .birth-frame__spark--b,
.birth-frame--hero .birth-frame__spark--c {
    width: 1.1rem;
    height: 1.1rem;
}

.birth-frame__badge {
    animation: birth-bob 2.2s ease-in-out infinite;
}

@keyframes birth-aura {
    to { transform: rotate(360deg); }
}

@keyframes birth-twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
    50% { opacity: 0.45; transform: scale(0.7) rotate(18deg); }
}

@keyframes birth-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-4px) rotate(-8deg); }
}

/* Day counters fill in party colours rather than one flat accent. */
.ritual-progress--birth span.is-done:nth-child(4n + 1),
.feed-slide--birth .day-ring__pill.is-done:nth-child(4n + 1) {
    background-color: var(--party-sun);
}

.ritual-progress--birth span.is-done:nth-child(4n + 2),
.feed-slide--birth .day-ring__pill.is-done:nth-child(4n + 2) {
    background-color: var(--birth-accent);
}

.ritual-progress--birth span.is-done:nth-child(4n + 3),
.feed-slide--birth .day-ring__pill.is-done:nth-child(4n + 3) {
    background-color: var(--party-mint);
}

.ritual-progress--birth span.is-done:nth-child(4n),
.feed-slide--birth .day-ring__pill.is-done:nth-child(4n) {
    background-color: var(--party-lilac);
}

.feed-slide--birth .feed-slide__action--primary {
    background-image: linear-gradient(100deg, var(--birth-accent), var(--party-lilac));
}

@media (prefers-reduced-motion: reduce) {
    .confetti i {
        top: var(--y);
        transform: rotate(var(--r));
        animation: none;
    }

    .birth-title__pop,
    .birth-frame::before,
    .birth-frame__spark,
    .birth-frame__badge {
        animation: none;
    }

    .birth-title__pop--flip {
        transform: scaleX(-1);
    }
}

/* ============================== */
/*      FAMILY PHOTO (EMPTY)      */
/* ============================== */

/*
 * The empty family-photo panel: the avatar family (components/family_art.html)
 * on a card washed with the mother's rose and the father's slate, so the space
 * reads as waiting for a photo rather than broken.
 */
:root {
    --fam-glow: #fdeae6;
    --fam-heart: #f2bccb;
    --fam-heart-2: #f6d3b6;
    --fam-spark: #f1d79c;
}

html[data-theme="dark"] {
    --fam-glow: #3a2a30;
    --fam-heart: #b98597;
    --fam-heart-2: #b39073;
    --fam-spark: #a89262;
}

.family-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.25rem;
    overflow: hidden;
    text-align: center;
    background-color: var(--card-background-color);
    background-image:
        radial-gradient(60% 55% at 16% 18%, color-mix(in srgb, var(--pa-f-mid) 18%, transparent), transparent 70%),
        radial-gradient(55% 50% at 86% 86%, color-mix(in srgb, var(--pa-m-mid) 18%, transparent), transparent 70%);
}

.family-art {
    width: min(58%, 13rem);
    height: auto;
    overflow: visible;
}

.family-empty__copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.family-empty__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-text);
}

.family-empty__hint {
    font-size: 0.9rem;
    color: var(--tertiary-text);
}

.family-empty__action {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    background-color: color-mix(in srgb, var(--primary) 10%, var(--card-background-color));
    transition: background-color 0.16s ease-out, transform 0.16s ease-out;
}

.family-empty__action:hover {
    background-color: color-mix(in srgb, var(--primary) 16%, var(--card-background-color));
    transform: translateY(-1px);
}

.family-empty__action svg {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 768px) {
    .family-empty {
        gap: 1.25rem;
    }

    .family-art {
        width: min(60%, 21rem);
    }

    .family-empty__title {
        font-size: 1.5rem;
    }

    .family-empty__hint {
        font-size: 1rem;
    }
}

.family-art__glow,
.family-art__figure,
.family-art__heart,
.family-art__spark {
    transform-box: fill-box;
}

.family-art__glow {
    transform-origin: center;
    animation: fam-breathe 6s ease-in-out infinite;
}

/* Parents lean toward each other from the feet; the child bobs between them. */
.family-art__figure {
    transform-origin: 50% 100%;
    animation: fam-lean 5s ease-in-out infinite;
}

.family-art__figure--father { --lean: 1.5deg; }
.family-art__figure--mother { --lean: -1.5deg; animation-delay: -0.4s; }

.family-art__figure--child {
    animation: fam-hop 2.8s ease-in-out infinite;
}

.family-art__heart {
    opacity: 0;
    fill: var(--fam-heart);
    transform-origin: center;
    animation: fam-heart 4.8s ease-out infinite;
}

.family-art__heart--b { fill: var(--fam-heart-2); animation-delay: 1.6s; }
.family-art__heart--c { animation-delay: 3.2s; }

.family-art__spark {
    fill: var(--fam-spark);
    transform-origin: center;
    animation: fam-twinkle 3.2s ease-in-out infinite;
}

.family-art__spark--b { animation-delay: -1.6s; }

@keyframes fam-breathe {
    0%, 100% { opacity: 0.75; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes fam-lean {
    0%, 100% { transform: rotate(0) translateY(0); }
    50% { transform: rotate(var(--lean)) translateY(-1px); }
}

@keyframes fam-hop {
    0%, 55%, 100% { transform: translateY(0); }
    25% { transform: translateY(-3.5px); }
}

@keyframes fam-heart {
    0% { opacity: 0; transform: translateY(6px) scale(0.5); }
    25% { opacity: 0.95; }
    100% { opacity: 0; transform: translateY(-16px) scale(1.05); }
}

@keyframes fam-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.55) rotate(0); }
    50% { opacity: 0.95; transform: scale(1) rotate(20deg); }
}

@media (prefers-reduced-motion: reduce) {
    .family-art__glow,
    .family-art__figure,
    .family-art__heart,
    .family-art__spark {
        animation: none;
    }

    .family-art__heart {
        opacity: 0.85;
    }
}