/* =====================================
   SURVIVOR PORTAL
   BeschrijfJeWensen.nl
===================================== */


/* =====================================
   VARIABLES
===================================== */

.survivor-page{
    --survivor-primary:#5f55d9;
    --survivor-primary-dark:#4d43c4;
    --survivor-primary-soft:#f1efff;

    --survivor-text:#25233a;
    --survivor-text-soft:#646177;
    --survivor-text-light:#8b889b;

    --survivor-border:#e3e1eb;
    --survivor-border-strong:#d5d2e2;

    --survivor-background:#f7f7fb;
    --survivor-background-soft:#fbfaff;

    --survivor-success:#34764b;
    --survivor-success-soft:#edf8f0;

    --survivor-warning:#93651d;
    --survivor-warning-soft:#fff7e8;

    --survivor-danger:#9b4141;
    --survivor-danger-soft:#fff1f1;

    --survivor-radius-small:9px;
    --survivor-radius-medium:13px;
    --survivor-radius-large:18px;

    min-height:100vh;

    background:var(--survivor-background);
    color:var(--survivor-text);
}


/* =====================================
   GENERAL LAYOUT
===================================== */

.survivor-page *,
.survivor-page *::before,
.survivor-page *::after{
    box-sizing:border-box;
}

.survivor-container{
    width:min(1180px,calc(100% - 40px));

    margin:0 auto;
}

.survivor-eyebrow,
.survivor-section-label{
    margin:0 0 9px;

    color:var(--survivor-primary);

    font-size:11px;
    font-weight:800;
    line-height:1.4;

    letter-spacing:.09em;
    text-transform:uppercase;
}

.survivor-introduction{
    max-width:700px;

    margin:13px 0 0;

    color:var(--survivor-text-soft);

    font-size:15px;
    line-height:1.75;
}


/* =====================================
   LOGIN HERO
===================================== */

.survivor-login-hero{
    padding:64px 0 45px;

    border-bottom:1px solid var(--survivor-border);

    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(95,85,217,.10),
            transparent 34%
        ),
        #fff;
}

.survivor-login-hero h1{
    margin:0;

    color:var(--survivor-text);

    font-size:40px;
    font-weight:800;
    line-height:1.15;

    letter-spacing:-1.3px;
}


/* =====================================
   LOGIN CONTENT
===================================== */

.survivor-login-content{
    padding:48px 0 70px;
}

.survivor-login-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
    gap:30px;

    align-items:start;
}


/* =====================================
   LOGIN PANEL
===================================== */

.survivor-login-panel,
.survivor-login-information{
    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-large);

    background:#fff;

    box-shadow:0 12px 36px rgba(42,39,80,.045);
}

.survivor-login-panel{
    padding:34px;
}

.survivor-login-panel h2,
.survivor-login-information h2{
    margin:0;

    color:var(--survivor-text);

    font-size:23px;
    font-weight:800;
    line-height:1.3;

    letter-spacing:-.45px;
}

.survivor-login-panel-introduction{
    max-width:600px;

    margin:11px 0 27px;

    color:var(--survivor-text-soft);

    font-size:13px;
    line-height:1.7;
}


/* =====================================
   LOGIN FORM
===================================== */

.survivor-login-form{
    margin-top:25px;
}

.survivor-field{
    margin-bottom:24px;
}

.survivor-field label{
    display:block;

    margin:0 0 8px;

    color:var(--survivor-text);

    font-size:13px;
    font-weight:800;
    line-height:1.4;
}

.survivor-field input{
    width:100%;
    min-height:48px;

    display:block;

    padding:11px 13px;

    border:1px solid var(--survivor-border-strong);
    border-radius:10px;

    background:#fff;
    color:var(--survivor-text);

    font-family:inherit;
    font-size:14px;
    line-height:1.5;

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.survivor-field input:hover{
    border-color:#c6c2da;
}

.survivor-field input:focus{
    outline:none;

    border-color:var(--survivor-primary);

    box-shadow:0 0 0 3px rgba(95,85,217,.12);
}

.survivor-field input::placeholder{
    color:#aaa7b7;
}

.survivor-field-help{
    margin:7px 0 0;

    color:var(--survivor-text-light);

    font-size:11px;
    line-height:1.55;
}

.survivor-login-actions{
    display:flex;
    align-items:center;
    gap:22px;
}

.survivor-login-actions button,
.survivor-primary-button{
    min-height:46px;

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

    padding:11px 20px;

    border:1px solid var(--survivor-primary);
    border-radius:10px;

    background:var(--survivor-primary);
    color:#fff;

    font-family:inherit;
    font-size:13px;
    font-weight:800;
    line-height:1.35;

    text-decoration:none;

    cursor:pointer;

    box-shadow:0 6px 14px rgba(95,85,217,.17);

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}

.survivor-login-actions button:hover,
.survivor-primary-button:hover{
    background:var(--survivor-primary-dark);
    border-color:var(--survivor-primary-dark);

    transform:translateY(-1px);

    box-shadow:0 9px 20px rgba(95,85,217,.22);
}

.survivor-login-actions button:focus-visible,
.survivor-primary-button:focus-visible{
    outline:3px solid rgba(95,85,217,.22);
    outline-offset:3px;
}

.survivor-login-actions a{
    color:var(--survivor-text-soft);

    font-size:12px;
    font-weight:700;

    text-decoration:none;
}

.survivor-login-actions a:hover{
    color:var(--survivor-primary);
}


/* =====================================
   LOGIN INFORMATION
===================================== */

.survivor-login-information{
    padding:31px;
}

.survivor-login-information > p:not(.survivor-section-label){
    margin:13px 0 0;

    color:var(--survivor-text-soft);

    font-size:13px;
    line-height:1.7;
}

.survivor-login-information-list{
    display:grid;
    gap:0;

    margin-top:26px;
}

.survivor-login-information-item{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;

    padding:18px 0;

    border-top:1px solid var(--survivor-border);
}

.survivor-login-information-item > span{
    width:34px;
    height:34px;

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

    border-radius:10px;

    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);

    font-size:10px;
    font-weight:800;
}

.survivor-login-information-item h3{
    margin:0 0 5px;

    color:var(--survivor-text);

    font-size:14px;
    font-weight:800;
    line-height:1.4;
}

.survivor-login-information-item p{
    margin:0;

    color:var(--survivor-text-soft);

    font-size:12px;
    line-height:1.65;
}

.survivor-notice{
    margin-top:22px;
    padding:18px;

    border:1px solid #dedbee;
    border-radius:var(--survivor-radius-medium);

    background:var(--survivor-background-soft);
}

.survivor-notice strong{
    display:block;

    margin-bottom:6px;

    font-size:13px;
    font-weight:800;
}

.survivor-notice p{
    margin:0 0 10px;

    color:var(--survivor-text-soft);

    font-size:12px;
    line-height:1.65;
}

.survivor-notice a{
    color:var(--survivor-primary);

    font-size:12px;
    font-weight:800;

    text-decoration:none;
}

.survivor-notice a:hover{
    text-decoration:underline;
}


/* =====================================
   MESSAGES
===================================== */

.survivor-message{
    margin:22px 0;
    padding:17px 19px;

    border:1px solid;
    border-radius:var(--survivor-radius-medium);
}

.survivor-message strong{
    display:block;

    margin-bottom:5px;

    font-size:13px;
    font-weight:800;
}

.survivor-message p{
    margin:0;

    font-size:12px;
    line-height:1.65;
}

.survivor-message-error{
    border-color:#e6c6c6;

    background:var(--survivor-danger-soft);
    color:#7e3434;
}


/* =====================================
   DASHBOARD HERO
===================================== */

.survivor-dashboard-hero,
.survivor-detail-hero{
    padding:52px 0 42px;

    border-bottom:1px solid var(--survivor-border);

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(95,85,217,.09),
            transparent 32%
        ),
        #fff;
}

.survivor-dashboard-hero-content,
.survivor-detail-hero-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}

.survivor-dashboard-hero h1,
.survivor-detail-hero h1{
    margin:0;

    color:var(--survivor-text);

    font-size:36px;
    font-weight:800;
    line-height:1.18;

    letter-spacing:-1px;
}

.survivor-dashboard-status{
    min-width:180px;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:19px 24px;

    border:1px solid #dedbee;
    border-radius:var(--survivor-radius-medium);

    background:rgba(255,255,255,.82);
}

.survivor-dashboard-status-label{
    color:var(--survivor-text-soft);

    font-size:10px;
    font-weight:800;

    letter-spacing:.06em;
    text-transform:uppercase;
}

.survivor-dashboard-status strong{
    margin:3px 0 0;

    color:var(--survivor-primary);

    font-size:31px;
    font-weight:800;
    line-height:1.1;
}

.survivor-dashboard-status > span:last-child{
    margin-top:3px;

    color:var(--survivor-text-light);

    font-size:11px;
}


/* =====================================
   DASHBOARD CONTENT
===================================== */

.survivor-dashboard-content,
.survivor-detail-content{
    padding:45px 0 70px;
}

.survivor-dashboard-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;

    margin-bottom:27px;
}

.survivor-dashboard-toolbar h2{
    margin:0;

    color:var(--survivor-text);

    font-size:24px;
    font-weight:800;
    line-height:1.3;

    letter-spacing:-.45px;
}

.survivor-dashboard-toolbar > div > p:last-child{
    max-width:670px;

    margin:10px 0 0;

    color:var(--survivor-text-soft);

    font-size:13px;
    line-height:1.7;
}

.survivor-logout-link,
.survivor-back-link{
    flex:0 0 auto;

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

    min-height:42px;

    padding:9px 15px;

    border:1px solid var(--survivor-border-strong);
    border-radius:9px;

    background:#fff;
    color:var(--survivor-text-soft);

    font-size:12px;
    font-weight:800;

    text-decoration:none;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.survivor-logout-link:hover,
.survivor-back-link:hover{
    border-color:#c5c1da;

    background:var(--survivor-background-soft);
    color:var(--survivor-primary);
}


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

.survivor-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.survivor-dashboard-card{
    position:relative;

    min-height:215px;

    display:flex;
    flex-direction:column;

    padding:25px;

    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-large);

    background:#fff;
    color:inherit;

    text-decoration:none;

    box-shadow:0 9px 28px rgba(42,39,80,.04);

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.survivor-dashboard-card:hover{
    transform:translateY(-2px);

    border-color:#cbc7e2;

    box-shadow:0 14px 34px rgba(42,39,80,.075);
}

.survivor-dashboard-card-number,
.survivor-empty-state-number{
    width:38px;
    height:38px;

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

    flex:0 0 38px;

    border-radius:11px;

    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);

    font-size:11px;
    font-weight:800;
}

.survivor-dashboard-card-content{
    margin-top:22px;
}

.survivor-dashboard-card h3{
    margin:0 0 8px;

    color:var(--survivor-text);

    font-size:18px;
    font-weight:800;
    line-height:1.35;

    letter-spacing:-.25px;
}

.survivor-dashboard-card p{
    max-width:470px;

    margin:0;

    color:var(--survivor-text-soft);

    font-size:13px;
    line-height:1.7;
}

.survivor-dashboard-card-action{
    margin-top:auto;
    padding-top:21px;

    color:var(--survivor-primary);

    font-size:12px;
    font-weight:800;
}


/* =====================================
   DASHBOARD INFORMATION
===================================== */

.survivor-dashboard-information{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;

    margin-top:28px;
}

.survivor-dashboard-information-item{
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:13px;

    padding:20px;

    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-medium);

    background:#fff;
}

.survivor-dashboard-information-item > span{
    width:32px;
    height:32px;

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

    border-radius:9px;

    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);

    font-size:10px;
    font-weight:800;
}

.survivor-dashboard-information-item h3{
    margin:0 0 5px;

    font-size:13px;
    font-weight:800;
    line-height:1.4;
}

.survivor-dashboard-information-item p{
    margin:0;

    color:var(--survivor-text-soft);

    font-size:11px;
    line-height:1.65;
}


/* =====================================
   DETAIL NOTICE
===================================== */

.survivor-detail-notice{
    margin-bottom:26px;
    padding:19px 21px;

    border:1px solid #dedbee;
    border-radius:var(--survivor-radius-medium);

    background:var(--survivor-background-soft);
}

.survivor-detail-notice strong{
    display:block;

    margin-bottom:5px;

    color:var(--survivor-text);

    font-size:13px;
    font-weight:800;
}

.survivor-detail-notice p{
    margin:0;

    color:var(--survivor-text-soft);

    font-size:12px;
    line-height:1.65;
}


/* =====================================
   OVERVIEW PANEL
===================================== */

.survivor-overview-panel{
    overflow:hidden;

    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-large);

    background:#fff;

    box-shadow:0 10px 32px rgba(42,39,80,.04);
}

.survivor-overview-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;

    padding:25px 27px;

    border-bottom:1px solid var(--survivor-border);
}

.survivor-overview-header h2{
    margin:0;

    color:var(--survivor-text);

    font-size:21px;
    font-weight:800;
    line-height:1.3;

    letter-spacing:-.35px;
}

.survivor-overview-header > div:first-child > p:last-child{
    margin:7px 0 0;

    color:var(--survivor-text-light);

    font-size:12px;
}

.survivor-overview-controls{
    display:flex;
    align-items:flex-end;
    gap:14px;
}


/* =====================================
   SORTING
===================================== */

.survivor-sort-form{
    display:flex;
    align-items:center;
    gap:9px;
}

.survivor-sort-form label{
    color:var(--survivor-text-soft);

    font-size:11px;
    font-weight:800;
}

.survivor-sort-form select{
    min-height:39px;

    padding:8px 32px 8px 11px;

    border:1px solid var(--survivor-border-strong);
    border-radius:9px;

    background:#fff;
    color:var(--survivor-text);

    font-family:inherit;
    font-size:12px;
    font-weight:700;
}

.survivor-sort-form select:focus{
    outline:none;

    border-color:var(--survivor-primary);

    box-shadow:0 0 0 3px rgba(95,85,217,.10);
}


/* =====================================
   VIEW SWITCH
===================================== */

.survivor-view-switch{
    display:flex;

    padding:3px;

    border:1px solid var(--survivor-border);
    border-radius:9px;

    background:var(--survivor-background);
}

.survivor-view-switch a{
    min-height:32px;

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

    padding:6px 10px;

    border-radius:7px;

    color:var(--survivor-text-soft);

    font-size:11px;
    font-weight:800;

    text-decoration:none;
}

.survivor-view-switch a.active{
    background:#fff;
    color:var(--survivor-primary);

    box-shadow:0 2px 7px rgba(42,39,80,.08);
}


/* =====================================
   EMPTY STATE
===================================== */

.survivor-empty-state{
    max-width:700px;

    margin:0 auto;
    padding:55px 30px;

    text-align:center;
}

.survivor-empty-state-number{
    margin:0 auto 19px;
}

.survivor-empty-state h2{
    margin:0;

    color:var(--survivor-text);

    font-size:21px;
    font-weight:800;
    line-height:1.35;
}

.survivor-empty-state p{
    max-width:600px;

    margin:12px auto 0;

    color:var(--survivor-text-soft);

    font-size:13px;
    line-height:1.7;
}

.survivor-empty-state a{
    display:inline-flex;

    margin-top:20px;

    color:var(--survivor-primary);

    font-size:12px;
    font-weight:800;

    text-decoration:none;
}

.survivor-empty-state a:hover{
    text-decoration:underline;
}


/* =====================================
   ACCORDION
===================================== */

.survivor-accordion{
    display:grid;
    gap:14px;
}

.survivor-accordion-card{
    overflow:hidden;

    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-medium);

    background:#fff;

    box-shadow:0 5px 18px rgba(42,39,80,.025);
}

.survivor-accordion-header{
    width:100%;

    display:grid;
    grid-template-columns:38px minmax(0,1fr) 24px;
    gap:14px;

    align-items:center;

    padding:18px 20px;

    border:0;

    background:#fff;
    color:var(--survivor-text);

    font-family:inherit;

    text-align:left;

    cursor:pointer;
}

.survivor-accordion-header:hover{
    background:var(--survivor-background-soft);
}

.survivor-accordion-number{
    width:36px;
    height:36px;

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

    border-radius:10px;

    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);

    font-size:10px;
    font-weight:800;
}

.survivor-accordion-title{
    font-size:15px;
    font-weight:800;
    line-height:1.4;
}

.survivor-accordion-icon{
    color:var(--survivor-text-light);

    font-size:10px;

    transition:transform .18s ease;
}

.survivor-accordion-card.open
.survivor-accordion-icon{
    transform:rotate(180deg);
}

.survivor-accordion-content{
    display:none;

    border-top:1px solid var(--survivor-border);
}

.survivor-accordion-card.open
.survivor-accordion-content{
    display:block;
}


/* =====================================
   READONLY DATA
===================================== */

.survivor-readonly-list{
    margin:0;
}

.survivor-readonly-row{
    display:grid;
    grid-template-columns:minmax(180px,30%) minmax(0,1fr);
    gap:25px;

    padding:17px 21px;

    border-bottom:1px solid #efedf4;
}

.survivor-readonly-row:last-child{
    border-bottom:0;
}

.survivor-readonly-row dt{
    color:var(--survivor-text-soft);

    font-size:12px;
    font-weight:800;
    line-height:1.6;
}

.survivor-readonly-row dd{
    min-width:0;

    margin:0;

    color:var(--survivor-text);

    font-size:13px;
    line-height:1.7;

    overflow-wrap:anywhere;
}


/* =====================================
   TABLES
===================================== */

.survivor-table-wrapper{
    width:100%;

    overflow-x:auto;
}

.survivor-data-table{
    width:100%;

    border-collapse:collapse;

    font-size:12px;
}

.survivor-data-table th{
    padding:13px 15px;

    border-bottom:1px solid var(--survivor-border);

    background:#faf9fd;
    color:var(--survivor-text-soft);

    font-size:10px;
    font-weight:800;
    line-height:1.4;

    letter-spacing:.045em;
    text-align:left;
    text-transform:uppercase;
}

.survivor-data-table td{
    padding:15px;

    border-bottom:1px solid #efedf4;

    color:var(--survivor-text-soft);

    line-height:1.6;

    vertical-align:top;
}

.survivor-data-table tbody tr:last-child td{
    border-bottom:0;
}

.survivor-data-table tbody tr:hover > td{
    background:#fdfcff;
}

.survivor-table-primary{
    color:var(--survivor-text) !important;

    font-weight:800;
}

.survivor-table-secondary{
    color:var(--survivor-text-light);

    font-size:11px;
}

.survivor-empty-value{
    color:#aaa7b6;

    font-size:11px;
    font-style:italic;
}


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

.survivor-contact-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;

    padding:22px;
}

.survivor-contact-card{
    overflow:hidden;

    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-medium);

    background:#fff;
}

.survivor-contact-card-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;

    padding:20px;

    border-bottom:1px solid var(--survivor-border);
}

.survivor-contact-card-header h3{
    margin:0;

    color:var(--survivor-text);

    font-size:17px;
    font-weight:800;
    line-height:1.35;
}

.survivor-contact-relation{
    flex:0 0 auto;

    display:inline-flex;

    padding:5px 8px;

    border-radius:7px;

    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);

    font-size:10px;
    font-weight:800;
}

.survivor-contact-card-body{
    display:grid;
    gap:17px;

    padding:20px;
}

.survivor-contact-detail{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    gap:14px;
}

.survivor-contact-detail-label{
    color:var(--survivor-text-light);

    font-size:10px;
    font-weight:800;

    letter-spacing:.045em;
    text-transform:uppercase;
}

.survivor-contact-detail p{
    margin:0;

    color:var(--survivor-text-soft);

    font-size:12px;
    line-height:1.6;

    overflow-wrap:anywhere;
}

.survivor-contact-social{
    padding:16px 20px;

    border-top:1px solid var(--survivor-border);

    background:var(--survivor-background-soft);
}

.survivor-contact-social strong{
    display:block;

    margin-bottom:6px;

    color:var(--survivor-text);

    font-size:11px;
    font-weight:800;
}

.survivor-contact-social p{
    margin:3px 0;

    color:var(--survivor-text-soft);

    font-size:11px;
    line-height:1.55;

    overflow-wrap:anywhere;
}


/* =====================================
   DOCUMENTS
===================================== */

.survivor-storage-badge,
.survivor-account-badge{
    display:inline-flex;
    align-items:center;

    padding:5px 8px;

    border-radius:7px;

    font-size:10px;
    font-weight:800;
    line-height:1.3;
}

.survivor-storage-physical{
    background:#f3f0e8;
    color:#715f37;
}

.survivor-storage-digital{
    background:#edf3ff;
    color:#49689c;
}

.survivor-storage-both{
    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);
}

.survivor-storage-unknown{
    background:#f2f1f5;
    color:#777486;
}

.survivor-document-description{
    color:var(--survivor-text-soft);

    line-height:1.65;
}

.survivor-document-notes{
    margin-top:10px;
    padding-top:10px;

    border-top:1px solid #efedf4;
}

.survivor-document-notes strong{
    display:block;

    margin-bottom:4px;

    color:var(--survivor-text);

    font-size:10px;
    font-weight:800;
}

.survivor-document-notes p{
    margin:0;

    color:var(--survivor-text-light);

    font-size:11px;
    line-height:1.6;
}


/* =====================================
   DIGITAL ACCOUNTS
===================================== */

.survivor-table-action-column,
.survivor-table-action{
    width:95px;

    text-align:right !important;
}

.survivor-details-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;

    padding:6px 9px;

    border:1px solid var(--survivor-border-strong);
    border-radius:8px;

    background:#fff;
    color:var(--survivor-primary);

    font-family:inherit;
    font-size:10px;
    font-weight:800;

    cursor:pointer;
}

.survivor-details-toggle:hover{
    border-color:#c7c3dd;

    background:var(--survivor-background-soft);
}

.survivor-details-toggle-icon{
    font-size:8px;

    transition:transform .18s ease;
}

.survivor-details-toggle[aria-expanded="true"]
.survivor-details-toggle-icon{
    transform:rotate(180deg);
}

.survivor-account-details-row{
    display:none;
}

.survivor-account-details-row.open{
    display:table-row;
}

.survivor-account-details-row > td{
    padding:0 !important;

    background:#fbfaff !important;
}

.survivor-account-details-content{
    padding:21px;
}

.survivor-account-detail-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.survivor-account-detail-item{
    min-width:0;

    padding:15px;

    border:1px solid var(--survivor-border);
    border-radius:10px;

    background:#fff;
}

.survivor-account-detail-label{
    display:block;

    margin-bottom:8px;

    color:var(--survivor-text-light);

    font-size:10px;
    font-weight:800;

    letter-spacing:.045em;
    text-transform:uppercase;
}

.survivor-status-active{
    background:var(--survivor-success-soft);
    color:var(--survivor-success);
}

.survivor-status-cancelled{
    background:#f1f0f4;
    color:#6e6b79;
}

.survivor-status-unknown{
    background:var(--survivor-warning-soft);
    color:var(--survivor-warning);
}

.survivor-importance-high{
    background:var(--survivor-danger-soft);
    color:var(--survivor-danger);
}

.survivor-importance-normal{
    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);
}

.survivor-importance-low{
    background:#f1f0f4;
    color:#777486;
}

.survivor-action-delete{
    background:var(--survivor-danger-soft);
    color:var(--survivor-danger);
}

.survivor-action-transfer{
    background:#edf3ff;
    color:#49689c;
}

.survivor-action-keep{
    background:var(--survivor-success-soft);
    color:var(--survivor-success);
}

.survivor-action-memorialize{
    background:var(--survivor-primary-soft);
    color:var(--survivor-primary);
}

.survivor-action-default{
    background:#f1f0f4;
    color:#777486;
}

.survivor-account-notes{
    margin-top:16px;
    padding:17px;

    border:1px solid var(--survivor-border);
    border-radius:10px;

    background:#fff;
}

.survivor-account-notes strong{
    display:block;

    margin-bottom:6px;

    color:var(--survivor-text);

    font-size:11px;
    font-weight:800;
}

.survivor-account-notes p{
    margin:0;

    color:var(--survivor-text-soft);

    font-size:12px;
    line-height:1.65;
}


/* =====================================
   DETAIL ACTIONS
===================================== */

.survivor-detail-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;

    margin-top:25px;
}

.survivor-secondary-button{
    min-height:44px;

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

    padding:10px 17px;

    border:1px solid var(--survivor-border-strong);
    border-radius:10px;

    background:#fff;
    color:var(--survivor-text-soft);

    font-size:12px;
    font-weight:800;

    text-decoration:none;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.survivor-secondary-button:hover{
    border-color:#c5c1da;

    background:var(--survivor-background-soft);
    color:var(--survivor-primary);
}


/* =====================================
   DETAIL FOOTER NOTE
===================================== */

.survivor-detail-footer-note{
    margin-top:25px;
    padding:20px 22px;

    border:1px solid var(--survivor-border);
    border-radius:var(--survivor-radius-medium);

    background:#fff;
}

.survivor-detail-footer-note strong{
    display:block;

    margin-bottom:6px;

    color:var(--survivor-text);

    font-size:12px;
    font-weight:800;
}

.survivor-detail-footer-note p{
    margin:0;

    color:var(--survivor-text-soft);

    font-size:11px;
    line-height:1.65;
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width:960px){

    .survivor-login-layout{
        grid-template-columns:1fr;
    }

    .survivor-login-information{
        max-width:none;
    }

    .survivor-dashboard-information{
        grid-template-columns:1fr;
    }

    .survivor-contact-grid{
        grid-template-columns:1fr;
    }

    .survivor-account-detail-grid{
        grid-template-columns:1fr;
    }

}


@media (max-width:760px){

    .survivor-container{
        width:min(100% - 30px,1180px);
    }

    .survivor-login-hero{
        padding:45px 0 34px;
    }

    .survivor-login-hero h1{
        font-size:33px;
    }

    .survivor-login-content{
        padding:35px 0 55px;
    }

    .survivor-dashboard-hero,
    .survivor-detail-hero{
        padding:40px 0 34px;
    }

    .survivor-dashboard-hero-content,
    .survivor-detail-hero-content{
        align-items:flex-start;
        flex-direction:column;
        gap:23px;
    }

    .survivor-dashboard-hero h1,
    .survivor-detail-hero h1{
        font-size:31px;
    }

    .survivor-dashboard-status{
        width:100%;
        min-width:0;

        align-items:flex-start;
    }

    .survivor-dashboard-toolbar{
        align-items:flex-start;
        flex-direction:column;
        gap:19px;
    }

    .survivor-dashboard-grid{
        grid-template-columns:1fr;
    }

    .survivor-dashboard-card{
        min-height:195px;
    }

    .survivor-overview-header{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
    }

    .survivor-overview-controls{
        width:100%;

        align-items:flex-start;
        flex-direction:column;
    }

    .survivor-sort-form{
        width:100%;

        align-items:flex-start;
        flex-direction:column;
    }

    .survivor-sort-form select{
        width:100%;
    }

    .survivor-readonly-row{
        grid-template-columns:1fr;
        gap:5px;
    }

    .survivor-detail-actions{
        align-items:stretch;
        flex-direction:column-reverse;
    }

    .survivor-primary-button,
    .survivor-secondary-button{
        width:100%;
    }

}


@media (max-width:620px){

    .survivor-data-table,
    .survivor-data-table tbody,
    .survivor-data-table tr,
    .survivor-data-table td{
        width:100%;

        display:block;
    }

    .survivor-data-table thead{
        position:absolute;

        width:1px;
        height:1px;

        overflow:hidden;

        clip:rect(0,0,0,0);
        clip-path:inset(50%);

        white-space:nowrap;
    }

    .survivor-data-table tbody tr{
        padding:15px 17px;

        border-bottom:1px solid var(--survivor-border);
    }

    .survivor-data-table tbody tr:last-child{
        border-bottom:0;
    }

    .survivor-data-table td{
        display:grid;
        grid-template-columns:125px minmax(0,1fr);
        gap:14px;

        padding:7px 0;

        border:0;

        text-align:left !important;
    }

    .survivor-data-table td::before{
        content:attr(data-label);

        color:var(--survivor-text-light);

        font-size:9px;
        font-weight:800;

        letter-spacing:.045em;
        text-transform:uppercase;
    }

    .survivor-account-details-row{
        display:none !important;

        padding:0 !important;
    }

    .survivor-account-details-row.open{
        display:block !important;
    }

    .survivor-account-details-row > td{
        display:block;

        padding:0 !important;
    }

    .survivor-account-details-row > td::before{
        display:none;
    }

    .survivor-account-details-content{
        padding:17px 0 3px;
    }

    .survivor-table-action{
        align-items:center;
    }

}


@media (max-width:480px){

    .survivor-container{
        width:min(100% - 24px,1180px);
    }

    .survivor-login-panel,
    .survivor-login-information{
        padding:23px 20px;
    }

    .survivor-login-actions{
        align-items:stretch;
        flex-direction:column;
        gap:13px;
    }

    .survivor-login-actions button{
        width:100%;
    }

    .survivor-login-actions a{
        text-align:center;
    }

    .survivor-dashboard-card{
        min-height:0;

        padding:21px;
    }

    .survivor-dashboard-information-item{
        padding:17px;
    }

    .survivor-detail-notice{
        padding:17px;
    }

    .survivor-overview-header{
        padding:21px;
    }

    .survivor-contact-grid{
        padding:15px;
    }

    .survivor-contact-card-header,
    .survivor-contact-card-body{
        padding:17px;
    }

    .survivor-contact-card-header{
        flex-direction:column;
    }

    .survivor-contact-detail{
        grid-template-columns:1fr;
        gap:4px;
    }

    .survivor-accordion-header{
        grid-template-columns:34px minmax(0,1fr) 18px;
        gap:11px;

        padding:16px;
    }

    .survivor-accordion-number{
        width:32px;
        height:32px;
    }

    .survivor-readonly-row{
        padding:15px 17px;
    }

    .survivor-data-table td{
        grid-template-columns:1fr;
        gap:3px;
    }

}


/* =====================================
   PRINT
===================================== */

@media print{

    header,
    footer,
    .survivor-back-link,
    .survivor-logout-link,
    .survivor-detail-notice,
    .survivor-sort-form,
    .survivor-view-switch,
    .survivor-detail-actions,
    .survivor-dashboard-information,
    .survivor-details-toggle{
        display:none !important;
    }

    body,
    .survivor-page{
        background:#fff !important;
    }

    .survivor-container{
        width:100%;

        max-width:none;

        margin:0;
    }

    .survivor-dashboard-hero,
    .survivor-detail-hero{
        padding:0 0 20px;

        border-bottom:1px solid #bbb;

        background:#fff;
    }

    .survivor-dashboard-content,
    .survivor-detail-content{
        padding:20px 0 0;
    }

    .survivor-overview-panel,
    .survivor-accordion-card,
    .survivor-contact-card,
    .survivor-detail-footer-note{
        box-shadow:none;

        break-inside:avoid;
    }

    .survivor-accordion{
        gap:12px;
    }

    .survivor-accordion-content{
        display:block !important;
    }

    .survivor-accordion-icon{
        display:none;
    }

    .survivor-account-details-row{
        display:table-row !important;
    }

    .survivor-contact-grid{
        grid-template-columns:1fr;

        padding:15px;
    }

    .survivor-data-table{
        font-size:10px;
    }

    .survivor-data-table th,
    .survivor-data-table td{
        padding:8px;
    }

}