:root {
    color-scheme: light dark;
    /* Colours, shapes and font follow the Amagno.App. */
    --color-background: #f5f5f5;
    --color-surface: #ffffff;
    --color-text: #333333;
    --color-text-muted: #737373;
    --color-border: #cccccc;
    --color-input-border: #737373;
    --color-hover: #eeeeee;
    --color-selected: #e5f0f9;
    --color-preview-background: #ededed;
    --color-accent: #1464f0;
    --color-accent-hover: #0e57d8;
    --color-accent-contrast: #ffffff;
    --color-header: #ffffff;
    --color-header-text: #333333;
    --color-brand: #1464f0;
    --color-danger-background: #fce7ea;
    --color-danger-text: #c41a14;
    --color-success-background: #eaf5ee;
    --color-success-text: #1f6e3a;
    --color-warning-background: #fff4d6;
    --color-warning-text: #7a4b00;
    --radius: 9px;
    --radius-large: 18px;
    --radius-pill: 30px;
    --shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
    --shadow-raised: 0 0 10px 1px rgba(0, 0, 0, 0.2);
    --space: 16px;
    --header-height: 64px;
    --toolbox-width: 360px;
    font-family: Inter, "Helvetica Neue", sans-serif;
}

/* The theme chosen in the settings (data-theme) wins over the one of the operating system. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-background: #000000;
        --color-surface: #2e2e2e;
        --color-text: #eaeaea;
        --color-text-muted: #bcbcbc;
        --color-border: #444444;
        --color-input-border: #737373;
        --color-hover: #444444;
        --color-selected: #1d3d75;
        --color-preview-background: #717171;
        --color-accent: #97c3e7;
        --color-accent-hover: #b1d2ed;
        --color-accent-contrast: #000000;
        --color-header: #000000;
        --color-header-text: #eaeaea;
        --color-brand: #ffffff;
        --color-danger-background: #4a1f22;
        --color-danger-text: #f6aab5;
        --color-success-background: #183323;
        --color-success-text: #a8e0b8;
        --color-warning-background: #3d2f10;
        --color-warning-text: #f5d38a;
        --shadow: none;
        --shadow-raised: 0 0 10px 1px rgba(0, 0, 0, 0.6);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-background: #000000;
    --color-surface: #2e2e2e;
    --color-text: #eaeaea;
    --color-text-muted: #bcbcbc;
    --color-border: #444444;
    --color-input-border: #737373;
    --color-hover: #444444;
    --color-selected: #1d3d75;
    --color-preview-background: #717171;
    --color-accent: #97c3e7;
    --color-accent-hover: #b1d2ed;
    --color-accent-contrast: #000000;
    --color-header: #000000;
    --color-header-text: #eaeaea;
    --color-brand: #ffffff;
    --color-danger-background: #4a1f22;
    --color-danger-text: #f6aab5;
    --color-success-background: #183323;
    --color-success-text: #a8e0b8;
    --color-warning-background: #3d2f10;
    --color-warning-text: #f5d38a;
    --shadow: none;
    --shadow-raised: 0 0 10px 1px rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] {
    color-scheme: light;
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
}

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

body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.4;
}

a {
    color: var(--color-accent);
}

h1 {
    margin: 0 0 var(--space);
    font-size: 1.5rem;
    font-weight: 600;
}

h1:focus {
    outline: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* App frame */

.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    padding: 10px var(--space);
    padding-left: max(var(--space), env(safe-area-inset-left));
    padding-right: max(var(--space), env(safe-area-inset-right));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-header);
    color: var(--color-header-text);
}

.app-header .brand {
    color: var(--color-brand);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
}

.header-search {
    flex: 1;
    max-width: 420px;
    margin-left: auto;
}

.header-search input {
    width: 100%;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

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

.app-header .brand,
.app-header .button-quiet {
    flex: none;
}

/* On a phone the search gets a row of its own, so that it does not squeeze the links. */
@media (max-width: 719px) {
    .app-header {
        flex-wrap: wrap;
    }

    .app-header .brand {
        margin-right: auto;
    }

    .header-search {
        order: 1;
        flex-basis: 100%;
        max-width: none;
    }
}

.app-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space);
}

/* Side navigation, like the left section of the Amagno.App on wide screens */

.app-sidebar {
    display: none;
}

@media (min-width: 960px) {
    .app-header {
        height: var(--header-height);
        padding-top: 0;
        padding-bottom: 0;
    }

    .app-body {
        display: grid;
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    }

    .app-sidebar {
        position: sticky;
        top: var(--header-height);
        display: block;
        height: calc(100vh - var(--header-height));
        overflow-y: auto;
        padding: var(--space) 12px;
        border-right: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .app-content {
        width: 100%;
    }

    /* The vault list page repeats the quick access for narrow screens. */
    .app-content .quick-access {
        display: none;
    }
}

.app-sidebar .quick-access ul {
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space);
}

.app-sidebar .quick-access-link,
.sidebar-vault {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background 0.3s;
}

.app-sidebar .quick-access-link:hover,
.sidebar-vault:hover {
    background: var(--color-hover);
}

.app-sidebar .quick-access-link.active,
.sidebar-vault.active {
    background: var(--color-selected);
    font-weight: 600;
}

.sidebar-vault-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.favourite-mark {
    color: var(--color-accent);
}

.sidebar-favourite-vaults {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-heading {
    margin: 8px 12px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Buttons and form */

button {
    font: inherit;
    cursor: pointer;
}

.button-primary,
.button-quiet {
    white-space: nowrap;
    min-height: 40px;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    transition: background 0.3s;
}

.button-primary {
    border: 0;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.button-primary:hover:not(:disabled) {
    background: var(--color-accent-hover);
}

.button-primary:disabled {
    opacity: 0.6;
    cursor: default;
}

.button-quiet {
    border: 0;
    background: transparent;
    color: inherit;
}

.button-quiet:hover:not(:disabled) {
    background: var(--color-hover);
}

.button-quiet:disabled {
    color: var(--color-text-muted);
    cursor: default;
}

.login-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--space);
}

.login-card {
    width: min(100%, 380px);
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.login-title {
    text-align: center;
}

.login-form {
    display: grid;
    gap: 6px;
}

.login-form label {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.login-form input {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: inherit;
    font: inherit;
}

.login-form .button-primary {
    margin-top: 16px;
}

.recent-servers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent-servers li {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.recent-servers .button-quiet {
    min-height: 32px;
    padding: 2px 8px;
    font-size: 0.875rem;
}

.recent-servers .recent-server {
    font-weight: 400;
}

.recent-servers .recent-server[aria-pressed="true"] {
    font-weight: 600;
}

.recent-servers .recent-server-remove {
    padding: 2px 6px;
    color: var(--color-text-muted);
}

.forgot-password {
    display: grid;
    justify-items: center;
    margin-top: 8px;
}

.forgot-password-question {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.forgot-password-question p {
    flex-basis: 100%;
    margin: 0;
}

.connection-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 10px 16px;
    background: var(--color-warning-background);
    color: var(--color-warning-text);
}

.system-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

.system-message-text {
    flex: 1;
}

.maintenance-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--color-warning-background);
    color: var(--color-warning-text);
}

.maintenance-message-title {
    font-weight: 600;
}

.maintenance-message-text {
    flex: 1;
}

.connection-banner .button-quiet {
    color: inherit;
}

.maintenance-message .button-quiet {
    color: inherit;
}

.system-message .button-quiet {
    color: inherit;
}

.notification-banner {
    padding: 8px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.notification-banner-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-banner-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-banner-message {
    margin: 6px 0;
    white-space: pre-line;
}

.toolbox-outdated {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 var(--space);
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
}

.alert {
    margin: var(--space) 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--color-danger-background);
    color: var(--color-danger-text);
}

.empty-state {
    color: var(--color-text-muted);
}

/* Navigation */

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.breadcrumb li + li::before {
    content: "›";
    padding: 0 6px;
}

.breadcrumb a {
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Vaults and magnets */

.vaults,
.contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.vaults .vault,
.contacts .contact,
.magnets .magnet {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}

.vaults .vault:hover,
.contacts .contact:hover,
.magnets .magnet:hover {
    border-color: var(--color-accent);
}

.contact .favourite-mark {
    margin-left: auto;
    color: var(--color-accent);
}

.solution-store {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.solution-store-panel {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.solution-store-header {
    display: flex;
    gap: 6px;
}

.solution-store-header input {
    flex: 1;
    min-width: 0;
}

.solutions {
    display: grid;
    gap: 6px;
    max-height: 24rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.solution {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.solution-text {
    min-width: 0;
}

.solution-name {
    font-weight: 600;
}

.solution-recommended {
    margin-left: 6px;
    color: var(--color-accent);
    font-size: 0.875rem;
}

.solution-description {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.user-group-header {
    display: flex;
    gap: 4px;
    align-items: center;
}

.user-group-members,
.user-group-candidates {
    margin: 4px 0 8px 16px;
    padding: 0;
    list-style: none;
}

.contact-vault-assignment {
    margin-top: 12px;
}

.contact-vault-candidates {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.joint-vaults,
.contact-tags {
    margin-bottom: 24px;
}

.magnets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}

.magnet-icon,
.server-icon {
    flex: none;
    width: 20px;
    height: 20px;
    fill: var(--color-accent);
}

.server-icon {
    object-fit: contain;
}

/* Documents */

.document-list-layout {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 8px;
}

.document-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.document-list-toolbar .document-list-layout {
    margin-bottom: 0;
    margin-inline-start: auto;
}

.document-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.document-list-layout [aria-pressed="true"] {
    background: var(--color-selected);
}

/* Organisation administration */

.organisation-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.organisation-tabs [aria-pressed="true"] {
    background: var(--color-selected);
}

#organisation-member-filter {
    width: min(100%, 360px);
    margin-bottom: 12px;
}

.organisation-members,
.organisation-roles,
.organisation-vaults,
.protocol-entries {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    list-style: none;
}

.organisation-members > li,
.organisation-roles > li,
.organisation-vaults > li,
.protocol-entries > li {
    display: grid;
    gap: 2px;
    padding: 8px 16px;
}

.organisation-members > li + li,
.organisation-roles > li + li,
.organisation-vaults > li + li,
.protocol-entries > li + li {
    border-top: 1px solid var(--color-border);
}

.organisation-member.inactive .organisation-member-name {
    color: var(--color-text-muted);
}

.organisation-member-details,
.organisation-role-permissions,
.protocol-details {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.organisation-role-toggle {
    justify-self: start;
    font-weight: 600;
}

.organisation-role-members {
    margin: 4px 0 0;
    padding-left: 20px;
}

.member-invite-form,
.organisation-member-editor,
.organisation-vault-editor,
.vault-assign-form,
.transfer-key-form,
.selection-value-add-form,
.selection-value-add-sub-form,
.selection-value-rename-form,
.metadata-edit-form,
.metadata-actions,
.remaining-vaults-member,
.role-create-form,
.role-rename-form,
.role-member-add-bar,
.role-delete-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}

.transfer-key-invitation {
    margin-bottom: 16px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.remaining-vaults {
    margin: 0;
    padding: 0;
    list-style: none;
}

.user-sync {
    margin-bottom: 16px;
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.user-sync h3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin: 4px 0;
    font-size: 1rem;
}

.user-sync-kind,
.user-sync-details,
.user-sync-status {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.user-sync-details,
.user-sync-status {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

.user-sync-options,
.user-sync-form {
    display: grid;
    gap: 8px;
    max-width: 480px;
    margin: 8px 0;
}

.user-sync-form label {
    display: grid;
    gap: 2px;
}

.user-sync-actions,
.user-sync-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 8px 0;
}

.organisation-role-editor {
    margin-top: 8px;
}

.organisation-role-editor h3 {
    margin: 12px 0 4px;
    font-size: 0.9rem;
}

.role-permissions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.metadata-section {
    margin-bottom: 24px;
}

.metadata-category {
    margin: 16px 0 8px;
    font-size: 1rem;
}

.metadata-list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    list-style: none;
}

.metadata-list > li {
    padding: 8px 16px;
}

.metadata-list > li + li {
    border-top: 1px solid var(--color-border);
}

.metadata-toggle {
    font-weight: 600;
}

.metadata-details {
    margin-left: 8px;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.metadata-list .inactive > .metadata-toggle,
.metadata-selection-value.inactive {
    color: var(--color-text-muted);
}

.metadata-sublist,
.metadata-selection-values {
    margin: 4px 0 0;
    padding-left: 20px;
    list-style: none;
}

.metadata-sublist > li,
.metadata-selection-values > li {
    padding: 2px 0;
}

.document-select {
    display: flex;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
}

.document-select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.document-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rows, like the simple list of the Amagno.App */

.document-rows {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.document-rows .document + .document {
    border-top: 1px solid var(--color-border);
}

.document-rows .document-select {
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding: 8px 16px;
    transition: background 0.3s;
}

.document-rows .document-select:hover {
    background: var(--color-hover);
}

.document-rows .document.selected .document-select {
    background: var(--color-selected);
}

.document-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
}

.document-icon .server-icon {
    max-width: 100%;
    max-height: 100%;
}

.document-text {
    display: grid;
    min-width: 0;
}

.document-rows .document-name {
    line-height: 24px;
}

.document-details {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Details: rows with columns */

.document-details-list {
    --document-columns: minmax(0, 3fr) repeat(4, minmax(0, 1fr));
}

.document-details-header {
    display: grid;
    grid-template-columns: var(--document-columns);
    gap: 16px;
    padding: 8px 16px;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.document-details-header.checkable {
    padding-left: 48px;
}

.document-details-list .document-select {
    min-height: 44px;
}

.document-details-row {
    display: grid;
    flex: 1;
    grid-template-columns: var(--document-columns);
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.document-column {
    overflow: hidden;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-name-column {
    display: flex;
    align-items: center;
    gap: 10px;
}

.document-name-column .document-icon {
    width: 22px;
    height: 22px;
}

@media (max-width: 720px) {
    .document-details-list {
        --document-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    }

    .document-column-optional {
        display: none;
    }
}

/* Tiles with page thumbnails */

.document-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.document-tiles-large {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.document-tiles .document {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.document-tiles .document.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent);
}

.document-tiles .document-select {
    flex-direction: column;
}

.document-preview {
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    padding: 8px;
    background: var(--color-preview-background);
}

.document-preview .thumbnail {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.document-tiles .document-name {
    padding: 8px 10px;
    font-size: 0.875rem;
}

/* Quick access */

.quick-access ul,
.vault-views {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.quick-access-link,
.vault-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.quick-access-link:hover,
.vault-view:hover {
    border-color: var(--color-accent);
}

.vault-view .count {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.click-finder {
    display: grid;
    gap: 10px;
    width: 100%;
}

.click-finder-path,
.click-finder-nodes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.click-finder-path li + li::before {
    content: "›";
    margin-right: 6px;
    color: var(--color-text-muted);
}

.click-finder-node {
    min-height: 32px;
    max-width: 100%;
    padding: 4px 12px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.click-finder-node:hover {
    border-color: var(--color-accent);
}

.vault-search {
    flex: 1 1 220px;
    max-width: 360px;
}

.vault-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
}

/* Search */

.search-vault + .search-vault {
    margin-top: 28px;
}

.search-vault-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1.125rem;
    font-weight: 600;
}

.search-vault-title a {
    color: inherit;
    text-decoration: none;
}

.search-vault-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

/* Document preview */

.document-page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--space);
}

.document-page-header h1 {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#refresh-document {
    margin-left: auto;
}

.page-viewer {
    display: grid;
    gap: 12px;
}

.page-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.page-navigation button:disabled {
    opacity: 0.4;
    cursor: default;
}

.page-frame {
    display: grid;
    place-items: center;
    min-height: 60vh;
    padding: var(--space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-preview-background);
}

.page-image {
    max-width: 100%;
    max-height: calc(100vh - 220px);
    object-fit: contain;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.page-frame.zoomed {
    container-type: inline-size;
    display: block;
    overflow: auto;
    max-height: calc(100vh - 160px);
}

.page-frame.zoomed .page-image {
    width: calc(var(--zoom) * 100cqw);
    max-width: none;
    max-height: none;
}

.zoom-controls {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.zoom-level {
    min-width: 6em;
    text-align: center;
}

.page-canvas {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.page-canvas .page-image {
    display: block;
}

.page-text-layer {
    position: absolute;
    inset: 0;
    container-type: size;
    pointer-events: none;
    line-height: 1;
}

.page-text {
    position: absolute;
    overflow: hidden;
    color: transparent;
    font-size: calc(var(--text-height) * 85cqh);
    white-space: pre;
}

.page-text.hit {
    background: rgb(255 214 0 / 0.4);
    outline: 1px solid rgb(230 160 0 / 0.8);
}

.page-text-layer.selectable {
    pointer-events: auto;
    cursor: text;
    user-select: text;
}

.page-text-layer.selectable .page-text::selection {
    color: transparent;
    background: rgb(0 120 215 / 0.35);
}

.page-text-layer.pickable .page-text {
    pointer-events: auto;
    cursor: pointer;
    outline: 1px solid rgb(0 120 215 / 0.3);
    outline-offset: 1px;
    border-radius: 2px;
}

.page-text-layer.pickable .page-text:hover {
    background: rgb(0 120 215 / 0.25);
}

.pick-hint {
    margin: 0 0 8px;
    color: var(--color-text-muted);
}

.tag.pick-target .tag-input {
    border-color: var(--color-accent);
}

.page-canvas.placing-note {
    cursor: crosshair;
}

.note-form {
    position: absolute;
    display: grid;
    gap: calc(var(--space) / 2);
    width: min(280px, 80vw);
    padding: calc(var(--space) / 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    line-height: normal;
    cursor: default;
    transform: translate(-50%, -50%);
}

.note-form textarea {
    width: 100%;
    resize: vertical;
}

.page-canvas.placing-highlight {
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.page-canvas.placing-highlight .page-image {
    pointer-events: none;
}

.highlight-preview {
    position: absolute;
    pointer-events: none;
}

.highlight-form {
    position: absolute;
    display: flex;
    gap: calc(var(--space) / 2);
    align-items: center;
    padding: calc(var(--space) / 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    line-height: normal;
    cursor: default;
    transform: translate(-50%, 8px);
    white-space: nowrap;
}

.color-choice {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
}

.color-choice[aria-pressed="true"] {
    border-color: var(--color-text);
    box-shadow: 0 0 0 2px var(--color-surface) inset;
}

.color-choices {
    display: flex;
    gap: 4px;
}

.page-canvas.drawing-ink .page-image {
    pointer-events: none;
}

.ink-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: none;
}

.ink-form {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) / 2);
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--space) / 2);
}

.ink-form > p {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
}

.color-choice.color-yellow { background: #ffc30f; }
.color-choice.color-green { background: #32aa5a; }
.color-choice.color-blue { background: #1464f0; }
.color-choice.color-red { background: #eb413c; }
.line-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.line-preview line { stroke-width: 3; stroke-linecap: round; }
.line-preview.color-yellow line { stroke: #ffc30f; }
.line-preview.color-green line { stroke: #32aa5a; }
.line-preview.color-blue line { stroke: #1464f0; }
.line-preview.color-red line { stroke: #eb413c; }
.highlight-preview.color-yellow { background: rgba(255, 195, 15, 0.2); }
.highlight-preview.color-green { background: rgba(50, 170, 90, 0.2); }
.highlight-preview.color-blue { background: rgba(20, 100, 240, 0.2); }
.highlight-preview.color-red { background: rgba(235, 65, 60, 0.2); }
.note-form.color-yellow { background: color-mix(in srgb, #ffc30f 25%, #ffffff); }
.note-form.color-green { background: color-mix(in srgb, #32aa5a 25%, #ffffff); }
.note-form.color-blue { background: color-mix(in srgb, #1464f0 25%, #ffffff); }
.note-form.color-red { background: color-mix(in srgb, #eb413c 25%, #ffffff); }

.annotation-tools {
    display: contents;
}

.annotation-tools:disabled .button-quiet {
    opacity: 0.4;
    cursor: default;
}

.pending-note {
    position: absolute;
    max-width: min(280px, 80vw);
    padding: calc(var(--space) / 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    line-height: normal;
    white-space: pre-wrap;
    transform: translate(-50%, -50%);
}

.pending-note.color-yellow { background: color-mix(in srgb, #ffc30f 25%, #ffffff); }
.pending-note.color-green { background: color-mix(in srgb, #32aa5a 25%, #ffffff); }
.pending-note.color-blue { background: color-mix(in srgb, #1464f0 25%, #ffffff); }
.pending-note.color-red { background: color-mix(in srgb, #eb413c 25%, #ffffff); }

.stamp-placement-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    touch-action: none;
}

.stamp-preview {
    position: absolute;
    width: auto;
    outline: 2px dashed var(--color-accent);
    cursor: grab;
    transform: translate(-50%, -50%);
    user-select: none;
}

.stamp-placement-form {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--space) / 2);
    max-width: min(360px, 80vw);
    margin-top: calc(var(--space) / 2);
    padding: calc(var(--space) / 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    transform: translateX(-50%);
}

.stamp-placement-form .notice {
    flex-basis: 100%;
    margin: 0;
}

.annotation-edit-layer {
    position: absolute;
    inset: 0;
    touch-action: none;
}

.annotation-edit-layer .layer-message {
    position: absolute;
    top: var(--space);
    left: var(--space);
    right: var(--space);
}

.annotation-frame {
    position: absolute;
    padding: 0;
    border: 2px dashed var(--color-accent);
    border-radius: 2px;
    background: transparent;
    cursor: grab;
}

.annotation-frame.selected {
    border-style: solid;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.annotation-frame.pending {
    cursor: default;
    opacity: 0.6;
}

.annotation-frame.deleted {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--color-border);
}

.annotation-edit-form {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--space) / 2);
    max-width: min(320px, 80vw);
    margin-top: calc(var(--space) / 2);
    padding: calc(var(--space) / 2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    transform: translateX(-50%);
}

.ink-canvas.pending {
    pointer-events: none;
}

.note-form-actions {
    display: flex;
    gap: calc(var(--space) / 2);
    justify-content: flex-end;
}

/* Toolbox */

.workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.workspace.has-toolbox {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.toolbox {
    position: sticky;
    top: 72px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 88px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.toolbox-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 0;
}

.toolbox-title {
    flex: 1;
    margin: 0;
    overflow: hidden;
    font-size: 1rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toolbox-favourite {
    min-height: 32px;
    padding: 0 8px;
    font-size: 1.25rem;
    line-height: 1;
}

.toolbox-favourite.is-favourite {
    color: var(--color-accent);
}

.toolbox-favourite-error {
    flex-basis: 100%;
    margin: 0;
}

.toolbox-open {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 0.875rem;
    text-decoration: none;
}

.toolbox-close {
    display: none;
    min-height: 32px;
    padding: 0 10px;
    font-size: 1.25rem;
    line-height: 1;
}

.toolbox-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.toolbox-tab {
    padding: 6px 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.toolbox-tab[aria-selected="true"] {
    border-bottom-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}

.toolbox-panel {
    overflow-y: auto;
    padding: 4px 14px 14px;
}

.tag-section {
    border-bottom: 1px solid var(--color-border);
}

.tag-section:last-child {
    border-bottom: 0;
}

.tag-section summary {
    padding: 10px 0;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.tags {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}

.tag dt {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.tag dd {
    min-height: 1.4em;
    margin: 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.member-section h3 {
    margin: 12px 0 6px;
    font-size: 0.875rem;
}

.members,
.user-groups {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.member.inactive {
    color: var(--color-text-muted);
}

.member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.member-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-remove {
    min-height: 28px;
    padding: 2px 8px;
}

#member-add {
    margin-top: 8px;
}

.member-candidates ul {
    display: grid;
    gap: 4px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.member-candidate {
    width: 100%;
    text-align: left;
}

.notice {
    margin: var(--space) 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--color-success-background);
    color: var(--color-success-text);
}

.learning-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: var(--space) 0;
    padding: 10px 12px;
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-selected);
}

.learning-hint-text {
    flex: 1 1 240px;
}

.see-also-section + .see-also-section {
    margin-top: 16px;
}

.see-also-heading {
    margin: 0 0 6px;
    font-size: 0.95em;
}

.see-also-list {
    display: grid;
    gap: 4px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.see-also-list > li {
    min-width: 0;
}

.see-also-document,
.see-also-magnet {
    display: flex;
    gap: 6px;
    align-items: center;
    min-width: 0;
}

.see-also-document a,
.see-also-magnet a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.see-also-kind {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.see-also-unlink {
    margin-left: auto;
}

.see-also-link-form {
    display: grid;
    gap: 6px;
    margin-bottom: 8px;
}

.see-also-link-actions {
    display: flex;
    gap: 8px;
}

.see-also-candidate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.versions {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.version {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 10px;
    align-items: start;
}

.version .thumbnail {
    width: 64px;
    background: #ffffff;
    box-shadow: var(--shadow);
}

.version-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.document-link-copy {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.document-link-copy-note {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.document-messages,
.document-message-form,
.document-message-comment-form {
    display: grid;
    gap: 8px;
}

.document-message-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.document-message {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.document-message-entry {
    width: 100%;
}

.document-message-comment {
    width: 100%;
    padding-left: 12px;
    border-left: 2px solid var(--color-border);
}

.document-message-author {
    font-weight: 600;
}

.document-message-date {
    margin-left: 8px;
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.document-message-text {
    margin: 2px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.document-message-form textarea,
.document-message-comment-form textarea {
    width: 100%;
    min-height: 4em;
    box-sizing: border-box;
}

.version-title {
    flex-basis: 100%;
    font-size: 0.875rem;
}

.version-current,
.version-confirm {
    flex-basis: 100%;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.vault-email-addresses ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vault-email-address.inactive a {
    color: var(--color-text-muted);
}

.stamp-category {
    margin: 12px 0 6px;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.stamp-category:first-child {
    margin-top: 0;
}

.stamps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stamp {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.stamp-row {
    display: flex;
    gap: 4px;
    align-items: center;
}

.stamp-favourite {
    flex: none;
    min-height: 32px;
    padding: 0 8px;
    font-size: 1.25rem;
    line-height: 1;
}

.stamp-favourite.is-favourite {
    color: var(--color-accent);
}

.stamp:hover:not(:disabled) {
    border-color: var(--color-accent);
}

.stamp:disabled {
    cursor: progress;
    opacity: 0.6;
}

#edit-tags {
    min-height: 32px;
    padding: 5px 12px;
    font-size: 0.875rem;
}

.tag-editor fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

.tag-editor legend {
    padding: 10px 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.tag-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 34px;
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: inherit;
    font: inherit;
}

textarea.tag-input {
    resize: vertical;
}

.autocomplete-sets {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 4px;
}

.autocomplete-set {
    padding: 5px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.autocomplete-set:hover,
.autocomplete-set:focus-visible {
    border-color: var(--color-accent);
}

.tag-editor-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 12px 0 0;
    background: var(--color-surface);
}

@media (min-width: 960px) {
    /* Like the side navigation, the toolbox takes the full height at the right edge. */
    .app-content:has(.workspace.has-toolbox) {
        max-width: none;
        padding-right: calc(var(--toolbox-width) + var(--space));
    }

    .workspace.has-toolbox {
        grid-template-columns: minmax(0, 1fr);
    }

    .toolbox {
        position: fixed;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        z-index: 5;
        width: var(--toolbox-width);
        max-height: none;
        border: 0;
        border-left: 1px solid var(--color-border);
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 959px) {
    .workspace.has-toolbox {
        grid-template-columns: minmax(0, 1fr);
    }

    .workspace:not(.has-selection) .toolbox {
        display: none;
    }

    .toolbox {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        max-height: 65vh;
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: var(--radius-large) var(--radius-large) 0 0;
        box-shadow: var(--shadow-raised);
    }

    .toolbox-close {
        display: block;
    }
}

@media (max-width: 480px) {
    .document-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .document-tiles-large {
        grid-template-columns: 1fr;
    }

    .vaults,
    .magnets {
        grid-template-columns: 1fr;
    }
}

/* Saved searches */

.saved-search-group h2 {
    margin: 0 0 8px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.saved-searches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
    margin-bottom: 24px;
}

.saved-search {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}

.saved-search:hover {
    border-color: var(--color-accent);
}

.saved-search-icon {
    flex: none;
    width: 20px;
    height: 20px;
    fill: var(--color-accent);
}

@media (max-width: 480px) {
    .saved-searches {
        grid-template-columns: 1fr;
    }
}

/* Stamp input */

.stamp-input fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
}

.stamp-input legend {
    padding: 10px 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.stamp-input-title {
    margin: 0 0 8px;
    font-size: 1rem;
}

.stamp-input-required {
    margin-left: 2px;
    color: var(--color-danger-text);
}

.stamp-input .tag-input[aria-invalid="true"] {
    border-color: var(--color-danger-text);
    background: var(--color-danger-background);
}

/* Tasks */

.task-vault h2 {
    margin: 0 0 10px;
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 600;
}

.task-magnet-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-magnet .count {
    flex: none;
    min-width: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 0.75rem;
    text-align: center;
}

/* Selection tags */

.selection-input {
    max-height: 220px;
    padding: 4px 8px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
}

.selection-input[aria-invalid="true"] {
    border-color: var(--color-danger-text);
    background: var(--color-danger-background);
}

.selection-option {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding-inline-start: calc(var(--selection-level, 0) * 18px);
}

.selection-option:has(input:disabled) {
    color: var(--color-text-muted);
}

/* Search rules */

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

.rule-group {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
}

.rule-group .rule-group {
    border-inline-start: 3px solid var(--color-border);
}

.rule-group-header,
.rule-group-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.rule-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: var(--radius);
}

.rule-row[aria-invalid="true"] {
    border-color: var(--color-danger-text);
    background: var(--color-danger-background);
}

.rule-row select,
.rule-row input[type="text"],
.rule-row input[type="date"],
.rule-row input[type="number"] {
    min-height: 32px;
}

.rule-choice-label {
    align-self: center;
    color: var(--color-text-muted);
}

.rule-value-relative {
    display: inline-flex;
    gap: 6px;
}

.rule-value-relative input {
    width: 6em;
}

.rule-row .selection-input {
    flex: 1 1 220px;
    max-height: 160px;
}

.rule-search {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.rule-search-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.rule-search-actions .hint {
    color: var(--color-text-muted);
}

.save-search {
    margin-top: 10px;
}

.save-search-form {
    display: grid;
    gap: 8px;
    max-width: 420px;
}

.save-search-visibility {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    border: 0;
}

.save-search-visibility legend {
    padding: 0 0 4px;
}

.save-search-actions {
    display: flex;
    gap: 10px;
}

.save-search .hint {
    color: var(--color-text-muted);
}

.vault-actions,
.vault-action-panel {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.vault-action-bar,
.vault-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vault-action-panel {
    max-width: 32rem;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.vault-action-panel .checkbox-label {
    display: flex;
    gap: 6px;
    align-items: center;
}

.magnet-settings {
    margin-bottom: 12px;
}

.magnet-settings-actions,
.magnet-rename {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.magnet-icon-upload {
    position: relative;
    cursor: pointer;
}

.magnet-icon-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.magnet-rule {
    margin-bottom: 12px;
}

.magnet-rule-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.magnet-transfer {
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
}

.magnet-transfer-actions,
.magnet-copy-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.magnet-deletion {
    margin-bottom: 16px;
}

.magnet-deletion-actions {
    display: flex;
    gap: 10px;
}

.name-creation {
    margin-bottom: 16px;
}

.name-creation-form {
    display: grid;
    gap: 8px;
    max-width: 420px;
}

.name-creation-actions {
    display: flex;
    gap: 10px;
}

.load-more {
    display: block;
    margin: 12px auto;
}

.select-documents {
    margin-bottom: 8px;
}

.document-selection-actions {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.document-selection-actions .selection-count {
    margin-inline-end: auto;
    font-weight: 600;
}

.document-selection-actions .document-action-panel,
.document-selection-actions .document-action-note,
.document-selection-actions .document-action-alert {
    flex-basis: 100%;
    margin: 0;
}

.document.checkable {
    position: relative;
}

.document-rows .document.checkable {
    display: flex;
    align-items: center;
}

.document-rows .document-check {
    flex: none;
    margin-inline-start: 16px;
}

.document-tiles .document-check {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
}

.document-check {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
}

.search-vault-show-all {
    display: inline-block;
    margin-top: 8px;
}

.remove-rule {
    margin-inline-start: auto;
}

/* Document actions */

.document-actions {
    padding: 8px 14px 0;
}

.document-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.document-actions .button-quiet,
.document-actions .button-primary {
    min-height: 32px;
    padding: 5px 10px;
    font-size: 0.875rem;
}

.document-action[aria-expanded="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.document-action-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding: 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
}

.magnet-choice-list {
    flex-basis: 100%;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.magnet-choice-list li {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.magnet-choice-item {
    flex: 1;
    text-align: start;
}

.document-action-question {
    flex-basis: 100%;
    margin: 0 0 4px;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.document-action-alert {
    margin: 8px 14px 0;
    font-size: 0.875rem;
}

.document-actions .document-action-alert {
    margin: 8px 0 0;
}

/* Upload */

.document-upload {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.upload-drop-zone {
    position: relative;
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 8px 14px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
}

.upload-drop-zone:hover,
.upload-drop-zone:focus-within,
.upload-drop-zone.drag-over {
    border-color: var(--color-accent);
    color: var(--color-text);
}

.upload-choose {
    color: var(--color-accent);
    text-decoration: underline;
}

/* The invisible input covers the zone, so the browser takes dropped files without script. */
.upload-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-options {
    margin-top: 8px;
}

.upload-options summary {
    cursor: pointer;
    color: var(--color-text-muted);
}

.upload-option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
}

.upload-option-group legend {
    width: 100%;
    margin-bottom: 4px;
    padding: 0;
    font-weight: 600;
}

.upload-camera {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.upload-camera input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
}

@media (pointer: fine) {
    .upload-camera {
        display: none;
    }
}

.shared-files {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.document-upload .document-action-note,
.document-upload .document-action-alert {
    flex-basis: 100%;
    margin: 0;
}

.recycle-bin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.recycle-bin-actions .document-action-panel,
.recycle-bin-actions .document-action-note,
.recycle-bin-actions .document-action-alert {
    flex-basis: 100%;
    margin: 0;
}

.recycle-bin-actions #recycle-bin-empty[aria-expanded="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.document-action-note {
    margin: 8px 14px 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.full-text-panel {
    flex-direction: column;
    align-items: stretch;
}

.full-text {
    max-height: 50vh;
    margin: 0;
    overflow: auto;
    font: inherit;
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.full-text-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.document-action-panel label[for="check-in-file"] {
    flex-basis: 100%;
    font-size: 0.875rem;
}

.document-action-panel input[type="file"] {
    flex-basis: 100%;
    min-width: 0;
}

.weblink-form {
    display: grid;
    flex-basis: 100%;
    gap: 4px;
    min-width: 0;
}

.weblink-form label {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.weblink-form select,
.weblink-form input {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
}

.weblink-form > .button-primary {
    margin-top: 6px;
}

.weblink-result {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

/* AI chat */

.app-header .header-link {
    flex: none;
    color: var(--color-header-text);
    text-decoration: none;
}

.app-header .header-link:hover {
    text-decoration: underline;
}

.ai-chat-scope fieldset {
    margin: 0 0 var(--space);
    padding: 0;
    border: 0;
}

.ai-chat-scope legend {
    margin-bottom: 8px;
    font-weight: 600;
}

.ai-chat-scope label {
    display: block;
    padding: 6px 0;
}

.ai-chat-vaults {
    margin: 0;
    padding: 0 0 0 24px;
    list-style: none;
}

.ai-chat-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space);
    margin-bottom: var(--space);
}

.ai-chat-name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 var(--space);
    padding: 0;
    list-style: none;
}

.ai-chat-message {
    max-width: 85%;
    padding: 10px 12px;
    border-radius: var(--radius);
    overflow-wrap: anywhere;
}

.ai-chat-message-question {
    align-self: flex-end;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    white-space: pre-wrap;
}

.ai-chat-message-answer {
    align-self: flex-start;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}

.ai-chat-message-answer p,
.ai-chat-message-answer ul,
.ai-chat-message-answer ol {
    margin: 0 0 8px;
}

.ai-chat-message-answer > :last-child {
    margin-bottom: 0;
}

.ai-chat-answer-heading {
    margin: 0 0 8px;
    font-size: 1rem;
}

.ai-chat-thinking {
    color: var(--color-text-muted);
    font-style: italic;
}

.ai-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 var(--space);
    padding: 0;
    list-style: none;
}

.ai-chat-suggest {
    margin: 0 0 var(--space);
    color: var(--color-text-muted);
}

.ai-chat-suggest button {
    margin-right: 8px;
}

.ai-chat-question {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 6px 10px;
}

.ai-chat-question label {
    grid-column: 1 / -1;
    font-size: 0.875rem;
}

.ai-chat-question textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    resize: vertical;
}

.ai-chat-documents {
    margin-top: var(--space);
}

.ai-chat-documents h2 {
    margin: 0 0 8px;
    color: var(--color-text-muted);
    font-size: 1rem;
    font-weight: 600;
}

.ai-chat-documents ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-chat-documents li {
    padding: 4px 0;
}

/* Settings */
.settings-form {
    display: grid;
    gap: 8px;
    max-width: 320px;
}

.settings-form label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-form select {
    flex: 1;
    min-height: 32px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: inherit;
    font: inherit;
}

.settings-form .button-primary {
    justify-self: start;
    margin-top: 8px;
}

.theme-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0 0 var(--space);
    padding: 0;
    border: 0;
}

.theme-choice legend {
    margin-bottom: 8px;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.theme-choice label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-value-actions,
.metadata-document-type .metadata-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-inline-start: 8px;
}