/* Shared navigation, language picker, forms, file lists and account/admin components. */
[hidden] {
    display:none!important;
}

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.masthead {
    gap:22px;
}

.nav {
    gap:20px;
}

.nav a:last-child {
    border:0;
}

.nav a[aria-current=page] {
    color:var(--copper);
}

.logout {
    margin:0;
}

.text-button {
    color:var(--ink);
    border:0;
    background:none;
    padding:10px 0;
    font:inherit;
    white-space:nowrap;
}

.page-title {
    font-size:38px;
    line-height:1.25;
    letter-spacing:-1px;
    margin-bottom:24px;
}

.page-top {
    padding-top:40px;
    padding-bottom:30px;
}

.form-panel {
    max-width:680px;
    margin:30px 0 0 auto;
    border:1px solid var(--line);
    background:var(--white);
    padding:30px;
    border-radius:4px;
}

.form-panel label {
    display:block;
    font-size:14px;
    margin:15px 0 7px;
}

.form-panel input {
    display:block;
    width:100%;
    padding:11px 12px;
    font:inherit;
    border:1px solid #B8C8D2;
    border-radius:4px;
    background:#fff;
    color:var(--ink);
}

.form-panel input:focus-visible {
    outline:2px solid var(--copper);
    outline-offset:2px;
}

.form-panel small,.help {
    font-size:13px;
    color:var(--muted);
}

.form-panel input[type=file] {
    font-size:14px;
    max-width:100%;
}

.form-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.action {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:10px 16px;
    font:500 14px/1.4 Inter,sans-serif;
    background:#F6F9FC;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:4px;
    cursor:pointer;
}

.action.primary {
    background:var(--navy);
    color:white;
    border-color:var(--navy);
}

.action.small {
    font-size:12px;
    padding:7px 10px;
    min-height:36px;
}

.action:disabled {
    opacity:.55;
    cursor:wait;
}

.form-panel>.action,.actions {
    margin-top:24px;
}

.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.status {
    font-size:14px;
    margin-top:18px;
    overflow-wrap:anywhere;
}

.status.error {
    color:#99361E;
}

.status.success {
    color:#286047;
}

.help {
    margin-top:20px;
}

.files-section {
    margin-top:60px;
}

.files-section h2 {
    font-size:25px;
    margin-bottom:20px;
}

.table-scroll {
    overflow-x:auto;
}

table {
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

th,td {
    text-align:left;
    padding:15px 10px;
    border-bottom:1px solid var(--line);
}

td:first-child {
    max-width:340px;
    overflow-wrap:anywhere;
}

th {
    font-weight:500;
}

td .action {
    margin:5px;
}

progress {
    width:100%;
    height:12px;
    margin-top:20px;
    accent-color:var(--copper);
}

.download-panel {
    margin-left:0;
}

.filename {
    font-size:23px;
    overflow-wrap:anywhere;
}

dl {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px 22px;
    margin:25px 0;
}

dt {
    color:var(--muted);
    font-size:14px;
}

dd {
    margin:0;
    font-size:14px;
}

.prose {
    max-width:900px;
}

.prose h2 {
    font-size:24px;
    margin:30px 0 14px;
}

.prose p {
    margin-bottom:18px;
}

@media(max-width:1050px) {
    .nav {
        gap:12px;
        font-size:12px;
    }
    .brand {
        font-size:26px;
    }
}

@media(max-width:760px) {
    .nav {
        font-size:14px;
        gap:0;
    }
    .text-button {
        padding:12px 2px;
    }
    .page-title {
        font-size:30px;
    }
    .form-panel {
        padding:22px;
        margin-top:20px;
    }
    .form-columns {
        grid-template-columns:1fr;
        gap:0;
    }
    .files-section {
        margin-top:38px;
    }
    .table-scroll table {
        min-width:550px;
    }
    dl {
        grid-template-columns:1fr;
        gap:5px;
    }
    dd {
        margin-bottom:13px;
    }
}

.language-picker {
    position:relative;
    font-size:13px;
}

.language-picker summary {
    list-style:none;
    font-size:12px;
    font-weight:500;
    letter-spacing:.5px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 11px;
    min-height:42px;
    border:1px solid var(--line);
    border-radius:4px;
    cursor:pointer;
}

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

.language-picker summary:after {
    display:none;
}

.language-picker summary .icon {
    width:17px;
    height:17px;
    color:#617E95;
}

.language-chevron {
    width:6px;
    height:6px;
    border-right:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transform:rotate(45deg);
    margin:0 1px 3px 4px;
}

.language-picker[open] .language-chevron {
    transform:rotate(225deg);
    margin-bottom:-3px;
}

.language-options {
    position:absolute;
    right:0;
    top:calc(100% + 7px);
    min-width:190px;
    z-index:30;
    padding:6px;
    background:var(--white);
    border:1px solid var(--line);
    border-radius:5px;
    box-shadow:0 7px 24px #12386812;
}

.language-options button {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    width:100%;
    min-height:42px;
    border:0;
    background:transparent;
    color:var(--ink);
    padding:10px 12px;
    border-radius:3px;
    text-align:left;
    font:400 13px Inter,sans-serif;
}

.language-options button:hover {
    background:#EDF2F4;
}

.language-options button[aria-pressed=true] {
    background:#F3EBE5;
    color:var(--copper);
}

.language-options small {
    font-size:10px;
    color:var(--muted);
}

@media(max-width:760px) {
    .language-picker {
        margin-top:10px;
        align-self:flex-start;
    }
    .language-options {
        right:auto;
        left:0;
    }
}

.account-links {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.totp-qr {
    display:block;
    max-width:100%;
    height:auto;
    margin:24px 0;
}

.secret-key,.recovery-codes code {
    overflow-wrap:anywhere;
}

.recovery-codes {
    padding:20px 32px;
    line-height:2.2;
    background:var(--paper,#f5f4f0);
    max-width:650px;
}

.form-panel input[type=checkbox] {
    width:auto;
    display:inline;
    margin-right:8px;
}

.security-summary {
    display:grid;
    grid-template-columns:minmax(180px,340px) auto;
    max-width:650px;
    gap:12px;
}

.security-summary dd {
    font-weight:600;
}

.bot-trap {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.relation-map {
    display:flex;
    align-items:flex-start;
    gap:32px;
    margin:24px 0;
    line-height:1.9;
}

.relation-person {
    border:1px solid #b1ada5;
    padding:18px 24px;
    min-width:160px;
}

.relation-map>ul {
    border-left:2px solid #b48970;
    padding-left:28px;
}

.relation-map small {
    color:#58636b;
}

@media(max-width:650px) {
    .relation-map {
        display:block;
    }
    .relation-person {
        display:inline-block;
    }
    .table-scroll {
        max-width:100%;
        overflow:auto;
    }
}

/* Compact mobile navigation: one contained panel, including all language choices. */
.language-label { display: none; }
.menu-symbol { position: relative; width: 18px; height: 14px; flex: 0 0 18px; }
.menu-symbol::before, .menu-symbol::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
    background: currentColor; transform-origin: center;
}
.menu-symbol::before { top: 3px; }
.menu-symbol::after { bottom: 3px; }
.menu[aria-expanded="true"] .menu-symbol::before { top: 6px; transform: rotate(45deg); }
.menu[aria-expanded="true"] .menu-symbol::after { bottom: 6.5px; transform: rotate(-45deg); }
@media (max-width: 760px) {
    .masthead { position: relative; }
    .masthead > .menu {
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        min-width: 44px; min-height: 44px; padding: 9px 12px; font-size: 13px;
        background: transparent; border: 1px solid var(--line); border-radius: 4px; box-shadow: none;
    }
    .masthead > .menu[aria-expanded="true"] { background: var(--soft); color: var(--copper); }
    .masthead > .nav {
        position: absolute; top: calc(100% - 5px); inset-inline: 0; width: 100%;
        z-index: 50; padding: 12px 18px 16px; background: var(--paper);
        border: 1px solid var(--line); border-top: 2px solid var(--copper-light);
        border-radius: 0 0 6px 6px; box-shadow: 0 12px 24px #18394f16;
        max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px);
        overflow-y: auto; overscroll-behavior: contain;
    }
    .masthead > .nav > a {
        display: flex; align-items: center; min-height: 48px; padding: 10px 10px;
        font-size: 16px; border: 0; border-bottom: 1px solid var(--line);
        overflow-wrap: anywhere;
    }
    .masthead > .nav > a[aria-current="page"] {
        color: var(--copper); background: #eee9e2; border-inline-start: 2px solid var(--copper);
        padding-inline-start: 8px;
    }
    .masthead .logout { margin-top: 5px; }
    .masthead .logout .text-button { min-height: 44px; padding-inline: 10px; }
    .masthead .language-picker {
        width: 100%; min-width: 0; margin-top: 12px; align-self: stretch; border: 0;
    }
    .masthead .language-picker > summary {
        width: 100%; min-height: 48px; padding: 10px;
        border: 0; border-radius: 0; gap: 10px;
    }
    .masthead .language-label { display: block; flex: 1; min-width: 0; font-size: 13px; letter-spacing: 0; }
    .masthead .language-options {
        position: static; inset: auto; min-width: 0; width: 100%;
        padding: 4px 0 0; border: 0; border-radius: 0; box-shadow: none;
        background: transparent; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px;
    }
    .masthead .language-picker:not([open]) .language-options { display: none; }
    .masthead .language-options button {
        min-width: 0; min-height: 44px; padding: 10px 8px; gap: 6px;
        border: 1px solid var(--line); background: var(--white); border-radius: 3px;
    }
    .masthead .language-options button span { min-width: 0; overflow-wrap: anywhere; }
    .masthead .language-options small { flex-shrink: 0; }
    .masthead .language-options button[aria-pressed="true"] { background: #eee9e2; border-color: var(--copper-light); color: var(--copper); }
}