/* Styles for the Identity area (auth pages + settings/manage).
   Token-based (tokens.css) — follows the data-theme stamped on <html>.
   The Blazor app's site.css/app.css are intentionally not loaded here. */

html, body {
    margin: 0;
    font-family: var(--font-ui);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.55;
}

:root {
    color-scheme: dark;
}

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

.identity-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* topbar — stays dark in both themes, like the app shell */
.identity-topbar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 28px;
    height: 56px;
    background: var(--topbar);
    border-bottom: 1px solid var(--border);
}

.identity-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.identity-brand:hover {
    text-decoration: none;
}

.identity-logo {
    width: 26px;
    height: 26px;
    display: block;
    flex: none;
}

.identity-wordmark {
    font: 600 15px var(--font-ui);
    color: #e8ecee;
}

.identity-back {
    margin-left: auto;
    font: 500 13px var(--font-ui);
    color: #9aa5ab;
    text-decoration: none;
}

.identity-back:hover {
    color: #e8ecee;
    text-decoration: none;
}

.identity-content {
    flex: 1;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.identity-content a {
    color: var(--accent-fg);
}

.identity-content a:hover {
    color: var(--accent-fg);
    text-decoration: underline;
}

/* Bootstrap controls used by settings + the default Identity pages, tokenized */

.identity-body .form-control {
    background-color: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.identity-body .form-control:focus {
    background-color: var(--bg);
    color: var(--text);
    border-color: var(--accent-border);
    box-shadow: var(--focus-ring);
    outline: none;
}

.identity-body .form-control::placeholder {
    color: var(--text-3);
}

.identity-body .form-control:disabled,
.identity-body .form-control[readonly] {
    background-color: var(--surface-2);
    color: var(--text-2);
}

.identity-body label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-2);
}

.identity-body .btn {
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

.identity-body .btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.identity-body .btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.identity-body .btn-secondary {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

.identity-body .btn-secondary:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent-border);
}

.identity-body .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    font-weight: 500;
}

.identity-body .btn-outline-secondary:hover {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}

.identity-body .btn-outline-danger {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.identity-body .btn-outline-danger:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fdf0ef;
}

.identity-body .btn:disabled {
    opacity: .45;
}

.identity-body .alert {
    border-radius: 10px;
    font-size: 13px;
}

.identity-body .alert-info {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-fg);
}

.identity-body .alert-warning {
    background: rgba(199,143,74,.12);
    border: 1px solid rgba(199,143,74,.4);
    color: var(--warn);
}

.identity-body .alert-danger {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    color: #e0908c;
}

[data-theme="light"] .identity-body .alert-danger {
    color: var(--danger);
}

.identity-body .text-muted {
    color: var(--text-3) !important;
}

.identity-body .text-danger {
    color: #e0908c !important;
}

[data-theme="light"] .identity-body .text-danger {
    color: var(--danger) !important;
}

.settings-page {
    max-width: 58rem;
    margin: 0 auto;
    padding: 0 20px;
}

.settings-heading {
    margin-bottom: 1.25rem;
}

.settings-heading h1 {
    font: 600 20px var(--font-ui);
    color: var(--text);
    margin-bottom: 4px;
}

.settings-heading p {
    font: 500 12px var(--font-num);
    color: var(--text-3);
    margin-bottom: 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* single-column settings (General tab): full-width panels, nothing in a side column */
.settings-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    max-width: 44rem;
}

/* a labelled group inside a panel, e.g. theme under the language selector */
.settings-subsection {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}

.settings-subheading {
    font: 600 13.5px var(--font-ui);
    color: var(--text);
    margin-bottom: 0.6rem;
}

.settings-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
}

.settings-panel h2 {
    font: 600 15.5px var(--font-ui);
    color: var(--text);
    margin-bottom: 12px;
}

.settings-panel p {
    font-size: 12.5px;
    color: var(--text-2);
}

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

.name-form label {
    display: block;
    margin-bottom: 6px;
}

.name-row {
    display: flex;
    gap: 0.5rem;
    max-width: 24rem;
}

/* file inputs: bootstrap's fixed form-control height clips the native
   "Choose file" button — let the input size itself and restyle the button */
.identity-body input[type="file"].form-control {
    height: auto;
    padding: 0.3rem 0.5rem;
    line-height: 1.4;
    min-width: 0; /* let it shrink inside the flex row instead of overflowing */
}

.identity-body input[type="file"].form-control::file-selector-button {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 0.2rem 0.75rem;
    margin-right: 0.75rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.identity-body input[type="file"].form-control::file-selector-button:hover {
    border-color: var(--accent-border);
}

.name-hint {
    font-size: 11.5px;
    color: var(--text-3);
    margin: 6px 0 0;
}

.account-details {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}

.account-details dt {
    font: 600 11px var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-top: 3px;
}

.account-details dd {
    margin-bottom: 0;
    overflow-wrap: anywhere;
    color: var(--text);
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.settings-delete-panel {
    border-color: color-mix(in srgb, var(--danger) 48%, var(--border));
}

.settings-delete-panel h2 {
    color: var(--danger);
}

.delete-account-form {
    display: grid;
    gap: 0.75rem;
    max-width: 24rem;
}

.delete-account-form .btn {
    justify-self: start;
}

.passkey-list {
    display: grid;
    gap: 0.75rem;
}

.passkey-row {
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.875rem 1rem;
}

.passkey-row strong {
    color: var(--text);
    font-size: 13.5px;
}

.passkey-row span {
    color: var(--text-2);
    display: block;
    font-size: 12.5px;
}

.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.settings-tab {
    padding: 0.55rem 0.9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-2);
    font: 500 13.5px var(--font-ui);
    text-decoration: none;
}

.settings-tab:hover {
    color: var(--text);
    text-decoration: none;
}

.settings-tab.active {
    color: var(--accent-fg);
    border-bottom-color: var(--accent-border);
    font-weight: 600;
}

.add-passkey-panel .form-group {
    max-width: 24rem;
}

.password-login-option {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
}

.password-login-option strong {
    color: var(--text);
    font-size: 13.5px;
}

.password-login-option span {
    color: var(--text-2);
    display: block;
    font-size: 12.5px;
    max-width: 26rem;
}

/* the security rationale under the state line */
.password-login-option .password-login-why {
    color: var(--text-3);
    margin-top: 0.35rem;
}

#passkey-error {
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .settings-grid {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }

    .settings-grid .passkey-panel {
        grid-column: 1 / 2;
    }

    .settings-grid .add-passkey-panel {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }
}

/* ============================================================
   Auth pages (login/register) — dark, passkey-first design.
   Scoped under body.identity-auth; the settings/manage pages
   above keep the light layout.
   ============================================================ */

body.identity-auth {
    margin: 0;
    background: var(--bg);
    font-family: var(--font-ui);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sd-landing-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(20,24,27,.34), rgba(20,24,27,.58)),
        url("/images/landing-background-v3.png") center center / cover no-repeat;
}

.auth-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 0 26px;
    position: relative;
    z-index: 1;
}

[data-theme="light"] .sd-landing-background {
    background:
        linear-gradient(180deg, rgba(236,238,238,.72), rgba(236,238,238,.84)),
        url("/images/landing-background-v3.png") center center / cover no-repeat;
}

/* Use the portrait composition for phone-sized login and registration pages. */
@media (max-width: 767.98px) and (orientation: portrait) {
    .sd-landing-background {
        background:
            linear-gradient(180deg, rgba(20,24,27,.34), rgba(20,24,27,.58)),
            url("/images/landing-background-mobile-v1.png") center center / cover no-repeat;
    }

    [data-theme="light"] .sd-landing-background {
        background:
            linear-gradient(180deg, rgba(236,238,238,.72), rgba(236,238,238,.84)),
            url("/images/landing-background-mobile-v1.png") center center / cover no-repeat;
    }
}

.auth-page {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
}

.auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 76px 0 40px;
    text-align: center;
}

.auth-logo {
    width: 52px;
    height: 52px;
    display: block;
}

.auth-title {
    font: 600 22px var(--font-ui);
    color: var(--text);
}

.auth-tagline {
    font: 400 13px var(--font-ui);
    color: var(--text-2);
    margin-top: 4px;
}

/* register: page lead under the brand header */
.auth-lead {
    margin-bottom: 18px;
}

.auth-lead h1 {
    font: 600 17px var(--font-ui);
    color: var(--text);
    margin: 0 0 4px;
}

.auth-lead p {
    font: 400 12.5px/1.5 var(--font-ui);
    color: var(--text-2);
    margin: 0;
}

.auth-primary {
    height: 52px;
    border: 0;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 15px var(--font-ui);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.auth-primary:hover {
    background: var(--accent-hover);
}

@keyframes auth-passkey-spinner {
    to {
        transform: rotate(360deg);
    }
}

.auth-passkey-icon,
.auth-passkey-spinner {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}

.auth-passkey-spinner {
    display: none;
    border: 2px solid rgba(255,255,255,.34);
    border-top-color: currentColor;
    border-radius: 50%;
}

.auth-primary.is-loading {
    cursor: wait;
}

.auth-primary.is-loading .auth-passkey-icon {
    display: none;
}

.auth-primary.is-loading .auth-passkey-spinner {
    display: block;
    animation: auth-passkey-spinner .72s linear infinite;
}

/* Main sign-in actions use a pronounced light sweep on hover or keyboard focus. */
@keyframes auth-button-highlight {
    0% {
        opacity: 0;
        transform: translateX(-160%) skewX(-18deg);
    }
    24% {
        opacity: .76;
    }
    100% {
        opacity: 0;
        transform: translateX(620%) skewX(-18deg);
    }
}

.auth-primary,
.auth-outline-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .18s ease, border-color .18s ease;
}

.auth-primary::after,
.auth-outline-btn::after {
    content: "";
    position: absolute;
    top: -65%;
    bottom: -65%;
    left: -38%;
    width: 38%;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
    transform: translateX(-160%) skewX(-18deg);
}

.auth-outline-btn::after {
    background: linear-gradient(90deg, transparent, rgba(143,202,169,.76), transparent);
}

.auth-primary:focus-visible,
.auth-outline-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), 0 8px 20px rgba(0,0,0,.28);
}

.auth-primary:hover::after,
.auth-primary:focus-visible::after,
.auth-outline-btn:hover::after,
.auth-outline-btn:focus-visible::after {
    animation: auth-button-highlight .68s ease-out 1;
}

.auth-primary.is-loading::after {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-primary,
    .auth-outline-btn {
        transition: none;
    }

    .auth-primary::after,
    .auth-outline-btn::after {
        display: none;
    }

    .auth-primary.is-loading .auth-passkey-spinner {
        animation: none;
    }

    .auth-primary:hover,
    .auth-outline-btn:hover {
        box-shadow: inset 0 0 0 999px rgba(255,255,255,.08);
    }
}

.auth-caption {
    font: 400 12px/1.5 var(--font-ui);
    color: var(--text-3);
    text-align: center;
    margin-top: 10px;
}

.auth-caption-warning {
    display: block;
    margin-top: 2px;
    color: var(--text-2);
    font-weight: 700;
}

.auth-login-method {
    display: flex;
    flex-direction: column;
}

.auth-password-toggle {
    align-self: center;
    background: transparent;
    border: 0;
    color: var(--accent-fg);
    cursor: pointer;
    font: 500 13px var(--font-ui);
    margin-top: 22px;
    padding: 4px 8px;
}

.auth-password-toggle:hover {
    text-decoration: underline;
}

.auth-password-toggle:focus-visible {
    border-radius: 6px;
    box-shadow: var(--focus-ring);
    outline: none;
}

.auth-password-login > .auth-password-toggle {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.auth-password-login[hidden],
.auth-login-method[hidden] {
    display: none;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 22px;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--border);
}

.auth-divider span {
    font: 500 11px var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-passkey-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-passkey-option[hidden] {
    display: none;
}

.auth-passkey-option .auth-divider {
    margin-bottom: 2px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.auth-field label {
    font: 600 12px var(--font-ui);
    color: var(--text-2);
    margin: 0;
}

.auth-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.auth-label-row a,
.auth-footer a {
    font: 400 12px var(--font-ui);
    color: var(--accent-fg);
    text-decoration: none;
}

.auth-label-row a:hover,
.auth-footer a:hover {
    color: var(--accent-fg);
    text-decoration: underline;
}

.auth-input {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font: 400 14px var(--font-ui);
    color: var(--text);
}

.auth-input:focus {
    outline: none;
    border-color: var(--accent-border);
    box-shadow: var(--focus-ring);
}

.auth-status {
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 10px;
    color: var(--accent-fg);
    font: 500 12.5px/1.45 var(--font-ui);
    margin-bottom: 16px;
    padding: 11px 13px;
    text-align: center;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap .auth-input {
    padding-right: 56px;
}

.auth-show {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    padding: 0 10px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font: 400 12px var(--font-ui);
    color: var(--text-3);
    cursor: pointer;
}

.auth-show:hover {
    color: var(--text);
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 400 12.5px var(--font-ui);
    color: var(--text-2);
    margin: 0;
    cursor: pointer;
}

.auth-remember input {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    margin: 0;
}

.auth-outline-btn {
    height: 50px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    font: 600 14.5px var(--font-ui);
    cursor: pointer;
    margin-top: 2px;
}

.auth-outline-btn:hover {
    border-color: var(--border-strong);
    background: rgba(255,255,255,.03);
}

.auth-footer {
    margin-top: auto;
    padding: 24px 0 30px;
    text-align: center;
    font: 400 13px var(--font-ui);
    color: var(--text-2);
}

.auth-footer a {
    font-size: 13px;
    font-weight: 600;
}

.auth-footer-minor {
    margin-top: 8px;
}

.auth-footer-minor a {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-3);
}

/* The compact passkey-first login leaves much less content than registration.
   Keep its footer with the login controls on wider screens instead of stretching
   a large empty gap down to the viewport edge. */
@media (min-width: 768px) {
    .auth-login-page .auth-header {
        padding-top: clamp(124px, 19vh, 184px);
    }

    .auth-login-page .auth-footer {
        margin-top: 0;
    }
}

/* Tall desktop canvases have enough room to center the complete auth column.
   Safe alignment falls back to the top if validation or password fields make
   the column taller than the viewport. */
@media (min-width: 1200px) and (min-height: 900px) {
    .auth-main {
        align-items: safe center;
    }

    .auth-login-page .auth-header {
        padding-top: 0;
    }
}

/* The registration brand mark adds visual weight above the form. On 4K-class
   canvases, offset the complete column by exactly the 52px logo height. */
@media (min-width: 2560px) and (min-height: 1440px) {
    .auth-register-page {
        transform: translateY(-52px);
    }
}

/* server-side validation states */

.auth-summary {
    display: none;
}

.auth-summary.validation-summary-errors {
    display: block;
    background: var(--danger-soft);
    border: 1px solid rgba(192,96,92,.4);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 20px;
}

.auth-summary.validation-summary-errors::before {
    content: "Sign-in failed";
    font: 600 13px var(--font-ui);
    color: #e0908c;
}

.auth-summary ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font: 400 12.5px/1.6 var(--font-ui);
    color: #c9a09d;
}

.auth-field-error {
    font: 400 12px var(--font-ui);
    color: #e0908c;
}

.auth-field-error:empty {
    display: none;
}

.auth-input.input-validation-error {
    border: 1.5px solid var(--danger);
}

.auth-field:has(.input-validation-error) label {
    color: #e0908c;
}

#passkey-error {
    text-align: center;
    margin-top: 8px;
}

/* light-theme adjustments for the auth pages (dark is the default) */

[data-theme="light"] .auth-outline-btn {
    border-color: rgba(23,34,30,.25);
}

[data-theme="light"] .auth-outline-btn:hover {
    background: rgba(23,34,30,.04);
    border-color: rgba(23,34,30,.35);
}

[data-theme="light"] .auth-summary.validation-summary-errors::before,
[data-theme="light"] .auth-field-error,
[data-theme="light"] .auth-field:has(.input-validation-error) label {
    color: var(--danger);
}

[data-theme="light"] .auth-summary ul {
    color: #8a4a46;
}

/* ---------- account lockout ---------- */

.lockout-page {
    max-width: 400px;
}

.lockout-page .auth-header {
    padding-bottom: 30px;
}

.lockout-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    padding: 28px;
    text-align: center;
}

.lockout-icon {
    align-items: center;
    background: rgba(199, 143, 74, .12);
    border: 1px solid rgba(199, 143, 74, .35);
    border-radius: 50%;
    color: var(--warn);
    display: inline-flex;
    height: 58px;
    justify-content: center;
    margin-bottom: 18px;
    width: 58px;
}

.lockout-icon svg {
    height: 28px;
    width: 28px;
}

.lockout-card h1 {
    color: var(--text);
    font: 600 19px/1.3 var(--font-ui);
    margin: 0;
}

.lockout-explanation {
    color: var(--text-2);
    font: 400 13px/1.6 var(--font-ui);
    margin: 10px 0 22px;
}

.lockout-notice {
    align-items: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    gap: 12px;
    padding: 14px;
    text-align: left;
}

.lockout-notice > svg {
    color: var(--accent-fg);
    flex: none;
    height: 20px;
    margin-top: 1px;
    width: 20px;
}

.lockout-notice strong,
.lockout-notice span {
    display: block;
}

.lockout-notice strong {
    color: var(--text);
    font: 600 13px var(--font-ui);
    margin-bottom: 3px;
}

.lockout-notice span {
    color: var(--text-3);
    font: 400 11.5px/1.5 var(--font-ui);
}

.lockout-back {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: 18px;
    text-decoration: none;
}

.lockout-back:hover {
    color: var(--text);
    text-decoration: none;
}

.lockout-footer {
    margin-top: 0;
}

@media (max-width: 479.98px) {
    .lockout-page .auth-header {
        padding-top: 48px;
    }

    .lockout-card {
        padding: 24px 20px;
    }
}

/* ---------- theme picker (settings page) ---------- */

.theme-options {
    display: flex;
    gap: 0.75rem;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.theme-option:hover {
    border-color: var(--accent-border);
}

.theme-option.selected {
    border: 2px solid var(--accent);
    background: var(--accent-soft);
    padding: calc(0.625rem - 1px) calc(1rem - 1px);
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 34px;
    height: 26px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--border-strong);
}

.theme-swatch span {
    display: block;
    height: 4px;
    border-radius: 2px;
}

.theme-swatch-dark {
    background: #14181b;
}

.theme-swatch-dark span:first-child {
    background: #2e7d54;
    width: 60%;
}

.theme-swatch-dark span:last-child {
    background: #3a444b;
}

.theme-swatch-light {
    background: #eceeee;
}

.theme-swatch-light span:first-child {
    background: #2e7d54;
    width: 60%;
}

.theme-swatch-light span:last-child {
    background: #c7cdcd;
}

/* ---- public remote-signing page (/sign/{token}) ---- */
.sign-summary {
    background: var(--surface-2, rgba(120,170,200,.06));
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.sign-summary-lead {
    font: 500 13px var(--font-ui);
    color: var(--text);
    margin-bottom: 10px;
}

.sign-summary dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    margin: 0;
}

.sign-summary dl > div {
    display: contents;
}

.sign-summary dt {
    font: 600 11px var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3);
    align-self: center;
}

.sign-summary dd {
    margin: 0;
    font: 400 13px var(--font-ui);
    color: var(--text);
}

.sign-methods {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sign-method {
    flex: 1;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    font: 500 13px var(--font-ui);
    padding: 10px;
    cursor: pointer;
}

.sign-method.selected {
    border-color: var(--accent-border);
    background: var(--accent-soft, rgba(87,167,124,.14));
    color: var(--text);
}

.sign-pane {
    margin-bottom: 12px;
}

.sign-done {
    text-align: center;
    padding: 20px 0;
}

.sign-done-icon {
    width: 52px;
    height: 52px;
    border-radius: 99px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    font-size: 24px;
    color: var(--accent-fg, #8fcaa9);
    border: 1px solid var(--accent-border);
}

.sign-weapons {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.sign-weapons th {
    font: 600 10.5px var(--font-ui);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-3);
    text-align: left;
    padding: 0 8px 4px 0;
    border-bottom: 1px solid var(--border);
}

.sign-weapons td {
    font: 400 12.5px var(--font-ui);
    color: var(--text);
    padding: 5px 8px 5px 0;
    border-bottom: 1px solid var(--border);
}

.sign-weapons .num {
    text-align: right;
    font-family: var(--font-num);
    padding-right: 0;
}

/* signature pad on the public /sign page — app.css isn't loaded in this layout,
   so the paper-toned pad (white with a dashed baseline) is redefined here to
   match the in-app capture. Paper stays light in both themes, like the desktop. */
.sign-page .sd-capture-pad-wrap {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    background: #ffffff;
    color-scheme: light;
    border-radius: 8px;
    padding: 10px;
}

.sign-page .sd-capture-pad-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 1;
}

.sign-page .sd-capture-pad-label {
    position: absolute;
    left: 12px;
    top: 10px;
    font: 600 10px var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8577;
}

.sign-page .sd-capture-pad {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 200px;
    background: #ffffff;
    border-bottom: 1px dashed rgba(23,34,30,.35);
    touch-action: none;
}

.sign-pane .sd-capture-drop {
    width: 100%;
    min-height: 150px;
    border: 1px dashed var(--border-strong);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-3);
    font: 400 12.5px var(--font-ui);
    cursor: pointer;
    text-align: center;
    padding: 12px;
}

.sign-pane .sd-capture-drop input[type="file"] {
    margin-top: 4px;
}

/* the crop editor shown once an uploaded image is readable */
.sign-crop-wrap {
    margin-top: 10px;
    padding-top: 44px;   /* keeps the rotate/change buttons clear of the image */
}

.sign-crop-canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    cursor: crosshair;
}

.sign-crop-hint {
    margin: 8px 0 0;
    font: 400 12px var(--font-ui);
    color: var(--text-3);
}

/* "what does the image show?" — only for page-shaped uploads */
.sign-kind {
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--accent-border);
    border-radius: 8px;
    background: var(--accent-soft, rgba(87,167,124,.10));
}

.sign-kind-title {
    font: 600 13px var(--font-ui);
    color: var(--text);
    margin-bottom: 8px;
}

.sign-kind-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
}

.sign-kind-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 400 13px var(--font-ui);
    color: var(--text-2);
    cursor: pointer;
}

.sign-kind-options input[type="radio"] { accent-color: var(--accent, #57a77c); }

/* wide layout for the /sign page — auth-page is a narrow 360px column, but the
   signing page has a summary + a capture form that read better side by side */
.sign-page {
    max-width: 820px;
    padding-bottom: 48px;
}

.sign-page .auth-header {
    padding-top: 48px;
    padding-bottom: 28px;
}

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

.sign-page .auth-summary,
.sign-page .sign-done {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 767.98px) {
    .sign-body {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.settings-privacy-panel .btn {
    margin-top: 2px;
}

.sign-privacy-note {
    margin: 12px 0 0;
    color: var(--text-3);
    font: 400 11.5px/1.55 var(--font-ui);
    text-align: center;
}

.sign-privacy-note a {
    color: var(--accent-fg);
    font-weight: 600;
    white-space: nowrap;
}

.sign-privacy-note a:hover {
    color: var(--accent);
}