/* ============================================================
   Shooting Diary — application styles ("Refined utility")
   Built on tokens.css; class prefix sd-.
   ============================================================ */

/* ---------- globals ---------- */

html, body {
    height: 100%;
    /* Paint the root too: the root element's background covers the whole canvas
       including scroll overflow, so tall pages stay dark below the first viewport.
       body-only backgrounds can leave the canvas bare past 100% height. */
    background: var(--bg);
}

body {
    margin: 0;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

/* native widgets (select popups, scrollbars, date fields) follow the theme */
:root {
    color-scheme: dark;
}

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

a {
    color: var(--accent-fg);
    text-decoration: none;
}

/* Legacy forms still use Bootstrap's .form-control, which hardcodes a white
   background; retheme it with the tokens so it matches the Radzen inputs. */
.form-control {
    background-color: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
}

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

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

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

select.form-control option {
    background: var(--surface);
    color: var(--text);
}

.form-check-input {
    accent-color: var(--accent);
}

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

.sd-mono {
    font-family: var(--font-num);
}

app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* The generated still life is mounted only for signed-out visitors. A theme-
   appropriate wash keeps foreground copy legible without hiding the image. */
.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;
}

.sd-landing-background + .sd-topbar,
.sd-landing-background ~ .sd-page,
.sd-landing-privacy,
.sd-landing {
    position: relative;
    z-index: 1;
}

.sd-landing-background ~ .sd-page {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

/* Let the landing artwork continue behind the signed-out header. The regular
   authenticated navbar keeps its solid background and divider. */
.sd-landing-background + .sd-topbar {
    box-sizing: border-box;
    width: min(808px, calc(100% - 56px));
    margin-inline: auto;
    padding-inline: 0;
    background: transparent;
    border-bottom: 0;
}

[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;
}

/* The landscape still life crops too aggressively on portrait phones. This
   companion composition keeps only the diary and target edges at the bottom. */
@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;
    }
}

/* ---------- top navbar ---------- */

.sd-topbar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 28px;
    height: 56px;
    background: var(--topbar);
    border-bottom: 1px solid var(--border);
}

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

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

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

.sd-wordmark {
    font: 600 15px var(--font-ui);
    color: #e8ecee; /* topbar stays dark in both themes */
}

.sd-nav {
    display: flex;
    gap: 4px;
    font-size: var(--text-base);
}

.sd-nav-link {
    padding: 6px 14px;
    border-radius: var(--r-sm);
    color: #9aa5ab;
    background: transparent;
    border: 0;
    font: 400 13.5px var(--font-ui);
    cursor: pointer;
}

.sd-nav-link:hover {
    color: #e8ecee;
    text-decoration: none;
}

.sd-nav-link.active {
    background: rgba(87,167,124,.14);
    color: #8fcaa9;
    font-weight: 600;
}

.sd-topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* the topbar stays dark in both themes, so its controls keep static
   dark-surface colors instead of following the theme tokens */
.sd-topbar .sd-btn-outline {
    border-color: rgba(255,255,255,.15);
    color: #c4ccd0;
}

.sd-topbar .sd-btn-outline:hover:not(:disabled) {
    color: #e8ecee;
    border-color: rgba(255,255,255,.3);
}

.sd-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 7px;
    background: rgba(0,0,0,.12);
}

.sd-language-option {
    display: grid;
    place-items: center;
    min-width: 31px;
    height: 26px;
    padding: 0 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #8e999f;
    font: 600 10.5px var(--font-num);
    letter-spacing: .06em;
    cursor: pointer;
}

.sd-language-option:hover {
    color: #e8ecee;
}

.sd-language-option.selected {
    background: rgba(87,167,124,.18);
    color: #9bd3b4;
}

.sd-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    background: #242b30;
    border: 1px solid rgba(255,255,255,.12);
    display: grid;
    place-items: center;
    font: 600 11px var(--font-ui);
    color: #9aa5ab;
}

.sd-account-menu {
    position: relative;
    z-index: 1001;
}

.sd-account-trigger {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 9px 4px 4px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: transparent;
    color: #c4ccd0;
    font: 500 13px var(--font-ui);
    cursor: pointer;
}

.sd-account-trigger:hover,
.sd-account-trigger[aria-expanded="true"] {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
    color: #e8ecee;
}

.sd-account-trigger:hover .sd-avatar,
.sd-account-trigger[aria-expanded="true"] .sd-avatar {
    border-color: var(--accent-border);
    color: #e8ecee;
}

.sd-account-trigger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sd-account-chevron {
    display: grid;
    transition: transform .15s ease;
}

.sd-account-chevron.open {
    transform: rotate(180deg);
}

.sd-account-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.sd-account-menu-panel {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    width: 224px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    box-shadow: var(--shadow-raised);
}

.sd-account-menu-email {
    overflow: hidden;
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 5px;
    color: var(--text-3);
    font: 400 var(--text-xs) var(--font-ui);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-account-menu-panel form {
    margin: 0;
}

.sd-account-menu-item {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-2);
    font: 500 13px var(--font-ui);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.sd-account-menu-item:hover,
.sd-account-menu-item:focus-visible {
    background: var(--surface-2);
    color: var(--text);
    outline: none;
    text-decoration: none;
}

/* ---------- page scaffolding ---------- */

.sd-page {
    padding: 24px 28px 32px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    flex: 1;
}

/* ---------- account security notification ---------- */

.sd-passkey-notice {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1050;
    box-sizing: border-box;
    width: min(410px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    border-radius: 14px;
    box-shadow: var(--shadow-raised);
}

.sd-passkey-notice-icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--warn);
    background: color-mix(in srgb, var(--warn) 12%, transparent);
    border-radius: 50%;
}

.sd-passkey-notice-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-2);
    font: 400 12.5px/1.45 var(--font-ui);
}

.sd-passkey-notice-content strong {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.sd-passkey-notice-content a {
    align-self: flex-start;
    margin-top: 4px;
    color: var(--accent-fg);
    font-weight: 600;
}

.sd-title-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.sd-page-title {
    margin: 0;
    font: 600 var(--text-lg) var(--font-ui);
    color: var(--text);
}

.sd-meta {
    font: 500 12px var(--font-num);
    color: var(--text-3);
}

.sd-footnote {
    font: 400 11.5px/1.5 var(--font-ui);
    color: var(--text-3);
    padding: 0 4px;
}

/* ---------- cards & panels ---------- */

.sd-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
}

.sd-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-card);
}

.sd-section-label {
    font: 600 var(--text-xs) var(--font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-3);
}

/* ---------- buttons ---------- */

.sd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-h);
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    font: 600 13.5px var(--font-ui);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.sd-btn:hover {
    text-decoration: none;
}

.sd-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sd-btn:disabled {
    opacity: .45;
    cursor: default;
}

.sd-btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}

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

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

.sd-btn-outline:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--border-strong);
}

.sd-btn-outline-accent {
    background: transparent;
    border: 1px solid rgba(87,167,124,.4);
    color: var(--accent-fg);
    font-weight: 600;
}

.sd-btn-outline-accent:hover:not(:disabled) {
    border-color: var(--accent-border);
    color: var(--accent-fg);
}

[data-theme="light"] .sd-btn-outline-accent {
    border-color: rgba(46,125,84,.45);
    background: var(--surface);
}

.sd-btn-danger {
    background: var(--danger);
    color: #fdf0ef;
}

.sd-btn-danger:hover:not(:disabled) {
    background: var(--danger);
    filter: brightness(1.1);
}

/* Signed-out CTAs get a clear light sweep on hover or keyboard focus. */
@keyframes sd-guest-button-highlight {
    0% {
        opacity: 0;
        transform: translateX(-160%) skewX(-18deg);
    }
    24% {
        opacity: .72;
    }
    100% {
        opacity: 0;
        transform: translateX(620%) skewX(-18deg);
    }
}

.sd-landing-ctas .sd-btn,
.sd-landing-applink .sd-btn,
.sd-topbar-user .sd-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: background-color .18s ease, border-color .18s ease;
}

.sd-landing-ctas .sd-btn::after,
.sd-landing-applink .sd-btn::after,
.sd-topbar-user .sd-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,.78), transparent);
    transform: translateX(-160%) skewX(-18deg);
}

.sd-landing-ctas .sd-btn-outline::after,
.sd-landing-applink .sd-btn-outline::after,
.sd-topbar-user .sd-btn-outline::after {
    background: linear-gradient(90deg, transparent, rgba(143,202,169,.72), transparent);
}

.sd-landing-ctas .sd-btn:hover::after,
.sd-landing-ctas .sd-btn:focus-visible::after,
.sd-landing-applink .sd-btn:hover::after,
.sd-landing-applink .sd-btn:focus-visible::after,
.sd-topbar-user .sd-btn:hover::after,
.sd-topbar-user .sd-btn:focus-visible::after {
    animation: sd-guest-button-highlight .7s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
    .sd-account-chevron,
    .sd-landing-ctas .sd-btn,
    .sd-landing-applink .sd-btn,
    .sd-topbar-user .sd-btn {
        transition: none;
    }

    .sd-landing-ctas .sd-btn::after,
    .sd-landing-applink .sd-btn::after,
    .sd-topbar-user .sd-btn::after {
        display: none;
    }

    .sd-landing-ctas .sd-btn:hover,
    .sd-landing-ctas .sd-btn:focus-visible,
    .sd-landing-applink .sd-btn:hover,
    .sd-landing-applink .sd-btn:focus-visible,
    .sd-topbar-user .sd-btn:hover,
    .sd-topbar-user .sd-btn:focus-visible {
        box-shadow: inset 0 0 0 999px rgba(255,255,255,.08);
    }
}

.sd-btn-icon {
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-2);
    font-size: 15px;
}

.sd-btn-icon:hover:not(:disabled) {
    color: var(--text);
}

.sd-btn-icon.active {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-soft);
}

.sd-btn-icon.sd-delete-entries-btn,
.sd-btn-icon.sd-delete-entries-btn.active {
    border-color: var(--danger);
    background: var(--danger);
    color: #fdf0ef;
}

.sd-btn-icon.sd-delete-entries-btn:hover:not(:disabled) {
    background: var(--danger);
    color: #fdf0ef;
    filter: brightness(1.1);
}

.sd-btn-sm {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
}

/* ---------- chips ---------- */

.sd-chip {
    display: inline-flex;
    align-items: center;
    font: 500 11.5px var(--font-ui);
    color: var(--text-2);
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border-strong);
    padding: 3px 9px;
    border-radius: var(--r-full);
    white-space: nowrap;
}

[data-theme="light"] .sd-chip {
    background: rgba(23,34,30,.04);
}

.sd-chip-accent {
    color: var(--accent-fg);
    background: rgba(87,167,124,.12);
    border-color: rgba(87,167,124,.25);
}

[data-theme="light"] .sd-chip-accent {
    background: rgba(46,125,84,.10);
    border-color: rgba(46,125,84,.30);
}

/* selectable filter chips */
.sd-chip-toggle {
    font: 500 12px var(--font-ui);
    color: var(--text-3);
    background: transparent;
    border: 1px solid var(--border-strong);
    padding: 5px 11px;
    border-radius: var(--r-full);
    cursor: pointer;
}

.sd-chip-toggle.selected {
    color: var(--accent-fg);
    background: var(--accent-soft);
    border-color: var(--accent-border);
}

/* sport picker (AddEntry): chips + create input */
.sd-sport-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}

.sd-sport-picker .sd-sport-input {
    flex: 1 1 140px;
    min-width: 120px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--text);
    font: 400 13px var(--font-ui);
}

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

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

.sd-segmented {
    display: inline-flex;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    overflow: hidden;
}

.sd-segmented button {
    padding: 5px 11px;
    font: 500 12px var(--font-ui);
    color: var(--text-3);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.sd-segmented button.selected {
    background: rgba(87,167,124,.16);
    color: var(--accent-fg);
}

[data-theme="light"] .sd-segmented button.selected {
    background: rgba(46,125,84,.12);
}

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

.sd-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex: none;
    cursor: pointer;
}

.sd-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.sd-switch .sd-switch-track {
    position: absolute;
    inset: 0;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    transition: background .12s ease;
    pointer-events: none;
}

.sd-switch .sd-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-2);
    transition: transform .12s ease, background .12s ease;
    pointer-events: none;
}

.sd-switch input:checked ~ .sd-switch-track {
    background: var(--accent);
    border-color: var(--accent);
}

.sd-switch input:checked ~ .sd-switch-thumb {
    transform: translateX(16px);
    background: var(--on-accent);
}

.sd-switch input:focus-visible ~ .sd-switch-track {
    box-shadow: var(--focus-ring);
}

/* labelled row inside panels: text left, control right */
.sd-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font: 400 13px var(--font-ui);
    color: var(--text-2);
}

.sd-panel-row > span:first-child {
    color: #c4ccd0;
}

[data-theme="light"] .sd-panel-row > span:first-child {
    color: #2b343a;
}

/* ---------- diary entry card ---------- */

.sd-entry-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.sd-entry-location {
    font: 600 var(--text-md) var(--font-ui);
    color: var(--text);
}

.sd-entry-date {
    font: 500 13px var(--font-num);
    color: var(--text-2);
    white-space: nowrap;
}

.sd-entry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.sd-entry-notes {
    margin: 10px 0 12px;
    font: 400 13px/1.55 var(--font-ui);
    color: #aeb8bd;
}

[data-theme="light"] .sd-entry-notes {
    color: #49545b;
}

.sd-weapon-table {
    border-top: 1px solid var(--divider);
}

.sd-weapon-table.no-notes {
    margin-top: 12px;
}

.sd-weapon-head,
.sd-weapon-row {
    display: grid;
    grid-template-columns: 1fr 110px 110px;
    gap: 12px;
    align-items: baseline;
}

.sd-weapon-head {
    padding: 8px 0 4px;
    font: 600 10.5px var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sd-weapon-row {
    padding: 7px 0;
    border-top: 1px solid var(--divider);
}

.sd-weapon-name {
    font: 500 13.5px var(--font-ui);
    color: #dbe2e5;
}

[data-theme="light"] .sd-weapon-name {
    color: #2b343a;
}

.sd-weapon-caliber {
    color: var(--text-3);
    font-weight: 400;
}

.sd-weapon-count {
    font: 500 13.5px var(--font-num);
    color: var(--text);
    text-align: right;
}

.sd-weapon-count.zero {
    color: var(--text-3);
}

.sd-weapon-count.warn {
    color: var(--warn);
}

.sd-loan-badge {
    font: 500 10px var(--font-num);
    color: var(--text-3);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* guns kept for history but no longer owned */
.sd-notowned-badge {
    font: 500 10px var(--font-num);
    letter-spacing: .02em;
    color: var(--text-3);
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* fixed-term permit past its expiry — red flag on the locker row */
.sd-permit-overdue-badge {
    font: 600 10px var(--font-num);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--danger-fg);
    background: var(--danger-soft);
    border-radius: var(--r-full);
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* entry saved offline in the mobile app, not yet posted to the server */
.sd-entry-pending {
    font: 500 11px var(--font-num);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--warn);
    margin-top: 4px;
}

/* ---------- inactive period marker ---------- */

.sd-inactive-marker {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px;
}

.sd-inactive-marker::before,
.sd-inactive-marker::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--border-strong);
}

.sd-inactive-marker span {
    font: 500 11px var(--font-num);
    color: var(--text-3);
    white-space: nowrap;
}

/* ---------- delete mode ---------- */

.sd-delete-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(192,96,92,.1);
    border: 1px solid rgba(192,96,92,.3);
    border-radius: var(--r-md);
    margin-bottom: 16px;
}

.sd-delete-banner .sd-delete-title {
    font: 600 13px var(--font-ui);
    color: #e0908c;
}

[data-theme="light"] .sd-delete-banner .sd-delete-title {
    color: var(--danger);
}

.sd-delete-banner .sd-delete-copy {
    font: 400 12.5px var(--font-ui);
    color: var(--text-2);
}

.sd-delete-banner .sd-delete-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

.sd-entry-selectable {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 16px;
    cursor: pointer;
}

.sd-entry-dimmed {
    opacity: .75;
}

.sd-entry-selected {
    border-color: rgba(192,96,92,.5) !important;
}

.sd-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid rgba(255,255,255,.25);
    margin-top: 2px;
    display: grid;
    place-items: center;
    color: transparent;
    font: 700 12px var(--font-ui);
    flex: none;
}

[data-theme="light"] .sd-check {
    border-color: rgba(23,34,30,.3);
}

.sd-check.checked {
    background: var(--danger);
    border-color: var(--danger);
    color: #fdf0ef;
}

/* ---------- skeleton loading ---------- */

.sd-skeleton-line {
    display: block;
    height: 11px;
    border-radius: 6px;
    background: rgba(255,255,255,.07);
}

[data-theme="light"] .sd-skeleton-line {
    background: rgba(23,34,30,.08);
}

@keyframes sd-skeleton-pulse {
    50% { opacity: .55; }
}

.sd-skeleton-card {
    animation: sd-skeleton-pulse 1.6s ease-in-out infinite;
}

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

.sd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 64px 40px;
    text-align: center;
}

.sd-empty-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1.5px dashed var(--border-strong);
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--text-3);
}

.sd-empty-title {
    font: 600 var(--text-md) var(--font-ui);
    color: var(--text);
}

.sd-empty-copy {
    font: 400 13px/1.55 var(--font-ui);
    color: var(--text-2);
    max-width: 340px;
}

/* ---------- stat tiles (Statistics) ---------- */

.sd-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.sd-stat-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-card);
    min-width: 0;
}

.sd-stat-figure {
    font: 600 var(--text-xl) var(--font-num);
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
}

.sd-stat-figure.text {
    font: 600 16px var(--font-ui);
    line-height: 1.3;
    white-space: normal;
}

.sd-stat-caption {
    font: 600 var(--text-xs) var(--font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: 6px;
}

/* ---------- statistics page ---------- */

.sd-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-stats-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 900px) {
    .sd-stats-charts {
        grid-template-columns: 1fr;
    }

    .sd-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sd-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.sd-chart-title {
    font: 600 var(--text-md) var(--font-ui);
    color: var(--text);
}

.rz-chart .rz-series-data-label {
    fill: var(--text-2);
    font-family: var(--font-num);
    font-size: 11px;
}

/* ---------- horizontal bar list (rounds per caliber) ---------- */

.sd-bar-row {
    display: grid;
    grid-template-columns: 90px 1fr 70px;
    gap: 12px;
    align-items: center;
    padding: 6px 0;
}

.sd-bar-label {
    font: 500 12.5px var(--font-num);
    color: var(--text-2);
    text-align: right;
    white-space: nowrap;
}

.sd-bar-track {
    height: 14px;
    border-radius: 4px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
}

[data-theme="light"] .sd-bar-track {
    background: rgba(23,34,30,.06);
}

.sd-bar-fill {
    display: block; /* the fill is a <span>; without this the inline box ignores width/height */
    height: 100%;
    border-radius: 4px;
    background: #57a77c;
}

.sd-bar-value {
    font: 500 12.5px var(--font-num);
    color: var(--text);
    white-space: nowrap;
}

/* wider label column for weapon/range names (calibers keep the 90px column) */
.sd-bar-row.wide {
    grid-template-columns: minmax(120px, 170px) 1fr 90px;
}

.sd-bar-label.name {
    font: 500 12.5px var(--font-ui);
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* two thin stacked bars per row (rounds + visits) */
.sd-bar-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-bar-track.thin {
    height: 8px;
}

.sd-bar-fill.visits {
    background: #4a7d96;
}

.sd-bar-fill.average {
    background: #9583c9;
}

.sd-bar-value.stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
    line-height: 1.15;
}

.sd-bar-value.stack span:not(:first-child) {
    color: var(--text-2);
}

.sd-legend {
    display: flex;
    gap: 14px;
    align-items: center;
}

.sd-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 500 11.5px var(--font-ui);
    color: var(--text-2);
}

.sd-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* ---------- home nav tiles ---------- */

.sd-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.sd-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.sd-tile:hover {
    border-color: var(--accent-border);
    text-decoration: none;
    color: inherit;
}

.sd-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--accent-fg);
}

.sd-tile-title {
    font: 600 var(--text-md) var(--font-ui);
    color: var(--text);
}

.sd-tile-desc {
    font: 400 12.5px/1.5 var(--font-ui);
    color: var(--text-2);
}

.sd-tile-stat {
    font: 500 12px var(--font-num);
    color: var(--accent-fg);
    margin-top: auto;
}

/* ---------- home page ---------- */

.sd-home {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sd-home-row {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 14px;
    align-items: start;
}

@media (max-width: 1000px) {
    .sd-home-row {
        grid-template-columns: 1fr;
    }

    .sd-tile-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- activity requirement widget (home, option 1c) ---------- */

/* right column of the home row: latest entry + activity stack */
.sd-home-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sd-activity-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* on the diary page the stack sits between the results bar and the first
   month group; the margin lives on the stack so an empty widget adds none */
.sd-diary-feed .sd-activity-stack {
    margin-bottom: 16px;
}

.sd-activity-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-card);
}

.sd-activity-card.urgent,
.sd-activity-card.soon {
    border-radius: 0 var(--r-md) var(--r-md) 0;
    border-left-width: 3px;
}

.sd-activity-card.urgent {
    border-left-color: var(--danger);
}

.sd-activity-card.soon {
    border-left-color: var(--warn);
}

.sd-activity-chip {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font: 600 12px var(--font-num);
    flex: none;
}

.sd-activity-chip.urgent {
    background: rgba(192,96,92,.15);
    color: var(--danger-fg);
}

.sd-activity-chip.soon {
    background: rgba(199,143,74,.15);
    color: #d9a56a;
}

[data-theme="light"] .sd-activity-chip.soon {
    color: var(--warn);
}

.sd-activity-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(87,167,124,.18);
    display: grid;
    place-items: center;
    color: var(--accent-fg);
    flex: none;
}

[data-theme="light"] .sd-activity-check {
    background: rgba(46,125,84,.14);
}

.sd-activity-text {
    flex: 1;
    min-width: 0;
}

.sd-activity-title {
    font: 600 13px var(--font-ui);
    color: var(--text);
}

.sd-activity-sub {
    font: 400 11.5px var(--font-ui);
    color: var(--text-2);
    margin-top: 2px;
}

.sd-activity-safe-title {
    font: 500 12.5px var(--font-ui);
    color: var(--text-2);
}

.sd-activity-safe-sub {
    font: 400 11px var(--font-ui);
    color: var(--text-mid);
    margin-top: 1px;
}

.sd-activity-details {
    margin-left: auto;
    font: 500 11.5px var(--font-ui);
    color: var(--accent-fg);
    white-space: nowrap;
    flex: none;
}

/* ---------- licence readiness (design_handoff_permit_readiness, option 2c):
   one-line sidebar summary card + right-anchored detail drawer ---------- */

/* amber for warn text — lighter than the solid --warn for legibility on dark */
.sd-readiness-card,
.sd-readiness-drawer {
    --warn-text: #e0b880;
}

[data-theme="light"] .sd-readiness-card,
[data-theme="light"] .sd-readiness-drawer {
    --warn-text: var(--warn);
}

.sd-readiness-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 13px 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-ui);
}

.sd-readiness-card:hover {
    border-color: var(--border-strong);
}

.sd-readiness-card.warn {
    border-color: rgba(199,143,74,.4);
}

.sd-readiness-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #57a77c;
    flex: none;
}

.sd-readiness-card.warn .sd-readiness-dot {
    background: var(--warn);
}

.sd-readiness-card-text {
    flex: 1;
    min-width: 0;
}

.sd-readiness-card-title {
    display: block;
    font: 600 13px var(--font-ui);
    color: var(--text);
}

.sd-readiness-card-sub {
    display: block;
    font: 400 11.5px var(--font-ui);
    color: var(--text-mid);
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-readiness-card.warn .sd-readiness-card-sub {
    color: var(--warn-text);
}

.sd-readiness-card-link {
    font: 500 12px var(--font-ui);
    color: var(--accent-fg);
    flex: none;
}

/* the drawer: a right-anchored slide-over above a scrim; above the mobile
   options sheet (z 1100) since the summary card can sit inside it */
.sd-readiness-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1150;
    display: flex;
    justify-content: flex-end;
}

.sd-readiness-drawer {
    width: 400px;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--form-chrome);
    border-left: 1px solid var(--border-strong);
    box-shadow: -8px 0 30px rgba(0,0,0,.5);
    outline: none;
    animation: sd-readiness-in .22s ease-out;
}

[data-theme="light"] .sd-readiness-drawer {
    box-shadow: var(--shadow-raised);
}

@keyframes sd-readiness-in {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.sd-readiness-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex: none;
}

.sd-readiness-title {
    font: 600 15px var(--font-ui);
    color: var(--text);
}

.sd-readiness-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.sd-readiness-rule + .sd-readiness-rule {
    border-top: 1px solid var(--divider);
    padding-top: 16px;
}

.sd-readiness-rule-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.sd-readiness-rule-name {
    font: 600 13.5px var(--font-ui);
    color: var(--text);
}

.sd-readiness-pill {
    font: 600 10.5px var(--font-num);
    padding: 2px 8px;
    border-radius: var(--r-full);
    flex: none;
}

.sd-readiness-pill.pass {
    background: var(--accent-soft);
    color: var(--accent-fg);
}

.sd-readiness-pill.fail {
    background: rgba(199,143,74,.14);
    color: var(--warn-text);
}

.sd-readiness-criteria {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 400 12px var(--font-ui);
}

.sd-readiness-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.sd-readiness-crit-label {
    flex: 1;
    min-width: 0;
    color: var(--text-2);
}

.sd-readiness-value {
    font: 500 12px var(--font-num);
    color: var(--text);
    white-space: nowrap;
}

.sd-readiness-value.warn {
    color: var(--warn-text);
}

.sd-readiness-value .lim {
    color: var(--text-3);
}

.sd-readiness-track {
    height: 5px;
    border-radius: var(--r-full);
    background: var(--border);
    overflow: hidden;
}

.sd-readiness-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: #57a77c;
}

.sd-readiness-fill.warn {
    background: var(--warn);
}

.sd-readiness-check {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sd-readiness-glyph {
    flex: none;
    font-size: 11px;
}

.sd-readiness-glyph.pass {
    color: var(--accent-fg);
}

.sd-readiness-glyph.fail {
    color: var(--warn-text);
}

/* offending gap range under a failed longest-gap row */
.sd-readiness-evidence {
    font: 400 10.5px var(--font-ui);
    color: var(--text-mid);
    padding-left: 19px;
    margin-top: -4px;
}

/* actionable sentence shown when a rule is short on sessions */
.sd-readiness-callout {
    font: 400 11.5px/1.5 var(--font-ui);
    color: var(--warn-text);
    background: rgba(199,143,74,.08);
    border-radius: var(--r-sm);
    padding: 7px 10px;
}

.sd-readiness-foot {
    font: 400 11px/1.5 var(--font-ui);
    color: var(--text-3);
    border-top: 1px solid var(--divider);
    padding-top: 12px;
}

/* mobile: the drawer becomes the app's bottom sheet */
@media (max-width: 767.98px) {
    .sd-readiness-overlay {
        align-items: flex-end;
        justify-content: center;
    }

    .sd-readiness-drawer {
        width: 100%;
        max-width: 480px;
        height: auto;
        max-height: calc(100vh - 40px);
        background: var(--sheet-bg);
        border: 0;
        border-top: 1px solid var(--sheet-border);
        border-radius: 18px 18px 0 0;
        padding-top: 10px;
        box-shadow: var(--sheet-shadow);
        animation: sd-sheet-up .2s ease-out;
    }

    .sd-readiness-body {
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* ---------- gun locker table ---------- */

.sd-locker-head,
.sd-locker-row {
    display: grid;
    grid-template-columns: 1fr 120px 130px 110px 130px 84px;
    gap: 12px;
    align-items: center;
}

.sd-locker-head {
    padding: 8px 0 6px;
    font: 600 10.5px var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sd-locker-row {
    padding: 10px 0;
    border-top: 1px solid var(--divider);
}

.sd-locker-name {
    font: 600 14px var(--font-ui);
    color: var(--text);
}

.sd-locker-cell {
    font: 400 13px var(--font-ui);
    color: var(--text-2);
}

.sd-locker-cell.mono {
    font: 500 13px var(--font-num);
}

.sd-locker-cell.right {
    text-align: right;
}

.sd-locker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-locker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sd-row-trash {
    justify-self: end;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
}

.sd-row-trash:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

/* restore ("mark as owned") button — mirrors the trash button, accent on hover */
.sd-row-restore {
    justify-self: end;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
}

.sd-row-restore:hover {
    color: var(--accent-fg);
    background: var(--accent-soft);
}

/* no-longer-owned rows/cards read as secondary to the owned ones */
.sd-locker-row-muted .sd-locker-name {
    color: var(--text-2);
    font-weight: 500;
}

.sd-locker-card-muted {
    opacity: .9;
}

.sd-locker-card-muted .sd-locker-card-name {
    color: var(--text-2);
    font-weight: 500;
}

.sd-bar-row.muted {
    opacity: .65;
}

/* ---------- gun locker: details drawer + edit (design_handoff_gun_locker) ---------- */

/* owned rows open the details drawer */
.sd-locker-row-click {
    cursor: pointer;
}

.sd-locker-row-click:hover .sd-locker-name {
    color: var(--accent-fg);
}

.sd-locker-row-actions {
    display: flex;
    gap: 2px;
    justify-self: end;
}

.sd-row-edit {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--text-3);
    cursor: pointer;
}

.sd-row-edit:hover {
    color: var(--accent-fg);
    background: var(--accent-soft);
}

/* details: right-side drawer on desktop, bottom sheet on mobile (one tree) */
.sd-weapon-detail-overlay {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}

.sd-weapon-detail {
    width: 380px;
    box-sizing: border-box;
    background: var(--sheet-bg);
    border-left: 1px solid var(--sheet-border);
    box-shadow: -12px 0 40px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    animation: sd-drawer-in .2s ease-out;
}

@keyframes sd-drawer-in {
    from { transform: translateX(100%); }
    to { transform: none; }
}

.sd-weapon-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--border);
}

.sd-weapon-detail-title {
    font: 600 18px var(--font-ui);
    color: var(--text);
}

.sd-weapon-detail-sub {
    font: 400 12.5px var(--font-ui);
    color: var(--text-2);
    margin-top: 4px;
}

.sd-weapon-detail-body {
    flex: 1;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
}

.sd-weapon-spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--divider);
}

.sd-weapon-spec-row:last-child {
    border-bottom: 0;
}

.sd-weapon-spec-label {
    font: 400 13px var(--font-ui);
    color: var(--text-2);
}

.sd-weapon-spec-value {
    font: 400 13px var(--font-ui);
    color: var(--text);
    text-align: right;
}

.sd-weapon-spec-value.mono {
    font: 500 13px var(--font-num);
}

/* permit deadline tints in the drawer */
.sd-weapon-spec-value.warn {
    color: var(--warn);
}

.sd-weapon-spec-value.danger {
    color: var(--danger-fg);
}

/* "+n more" footer link under the permit reminder stack */
.sd-activity-more {
    margin-left: 0;
    padding: 2px 4px;
}

/* ---------- permit renewals (design_handoff_permit_renewals): badged trigger,
   drawer of per-deadline cards with status pills and five-year progress ---------- */

.sd-locker-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* count of overdue / due-soon deadlines on the "Permit renewals" trigger */
.sd-locker-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: var(--r-full);
    background: var(--danger-soft);
    color: var(--danger-fg);
    font: 600 11px var(--font-num);
    display: inline-grid;
    place-items: center;
}

/* amber for warn text — lighter than the solid --warn for legibility on dark */
.sd-renewals-drawer {
    --warn-text: #e0b880;
    width: 440px;
    overflow-y: hidden;   /* header/footer stay put; only the body scrolls */
}

[data-theme="light"] .sd-renewals-drawer {
    --warn-text: var(--warn);
}

.sd-renewals-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 12px;
    padding: 16px 24px 8px;
}

/* names the worst offender; also the "no permit info" call-out */
.sd-renewals-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    padding: 10px 13px;
    font: 500 12.5px/1.45 var(--font-ui);
    flex: none;
}

.sd-renewals-banner.danger {
    background: rgba(192,96,92,.08);
    border: 1px solid rgba(192,96,92,.3);
    color: var(--danger-fg);
}

.sd-renewals-banner.warn {
    background: rgba(199,143,74,.08);
    border: 1px solid rgba(199,143,74,.3);
    color: var(--warn-text);
}

.sd-renewals-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    align-self: center;
}

.sd-renewals-banner.danger .sd-renewals-banner-dot { background: var(--danger); }
.sd-renewals-banner.warn .sd-renewals-banner-dot { background: var(--warn); }

.sd-permit-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 16px;
    flex: none;
}

.sd-permit-card.warn { border-color: rgba(199,143,74,.4); }
.sd-permit-card.danger { border-color: rgba(192,96,92,.4); }

.sd-permit-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.sd-permit-card-title {
    font: 600 14px var(--font-ui);
    color: var(--text);
}

.sd-permit-pill {
    font: 600 10.5px var(--font-num);
    text-transform: uppercase;
    border-radius: var(--r-full);
    padding: 2px 8px;
    white-space: nowrap;
    flex: none;
    background: var(--accent-soft);
    color: var(--accent-fg);
}

.sd-permit-pill.warn { background: rgba(199,143,74,.14); color: var(--warn-text); }
.sd-permit-pill.danger { background: var(--danger-soft); color: var(--danger-fg); }

.sd-permit-source {
    font: 400 12px var(--font-ui);
    color: var(--text-2);
    margin-top: 2px;
}

.sd-permit-track {
    height: 5px;
    border-radius: var(--r-full);
    background: var(--border);
    margin-top: 10px;
    overflow: hidden;
}

.sd-permit-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: #57a77c;
}

.sd-permit-fill.warn { background: var(--warn); }
.sd-permit-fill.danger { background: var(--danger); }

.sd-permit-dates {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    font: 500 11.5px var(--font-num);
    color: var(--text-mid);
}

.sd-permit-dates .due { color: var(--text); }
.sd-permit-dates .due.warn { color: var(--warn-text); }
.sd-permit-dates .due.danger { color: var(--danger-fg); }

/* older weapons riding on the family card's newest permit */
.sd-permit-covers {
    font: 400 11.5px/1.5 var(--font-ui);
    color: var(--text-mid);
    border-top: 1px solid var(--divider);
    padding-top: 8px;
    margin-top: 8px;
}

.sd-permit-proof-action {
    margin-top: 12px;
}

.sd-renewals-foot {
    font: 400 11px/1.5 var(--font-ui);
    color: var(--text-3);
    border-top: 1px solid var(--divider);
    padding: 14px 24px 20px;
    flex: none;
}

/* "of which before purchase" reads as a sub-row: indented, both sides muted */
.sd-weapon-spec-subrow .sd-weapon-spec-label {
    padding-left: 14px;
}

.sd-weapon-spec-subrow .sd-weapon-spec-value {
    color: var(--text-2);
}

.sd-weapon-detail-actions {
    display: flex;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid var(--border);
}

.sd-weapon-detail-edit {
    flex: 1;
    height: 46px;
}

.sd-weapon-detail-remove {
    width: 120px;
    height: 46px;
    flex: none;
}

.sd-btn-danger-ghost {
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
    color: var(--danger-fg);
}

.sd-btn-danger-ghost:hover {
    background: var(--danger-soft);
}

/* helper line under a form field, e.g. rounds before purchase */
.sd-field-help {
    font: 400 11.5px/1.5 var(--font-ui);
    color: var(--text-3);
    margin-top: -6px;
}

.sd-input-lg.mono {
    font-family: var(--font-num);
}

/* ---------- dialogs (plain overlay) ---------- */

.sd-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: grid;
    place-items: center;
    z-index: 1050;
}

.sd-dialog {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-raised);
    padding: 24px;
    width: 400px;
    max-width: calc(100vw - 48px);
}

.sd-dialog-title {
    font: 600 var(--text-md) var(--font-ui);
    color: var(--text);
    margin: 0 0 8px;
}

.sd-dialog-copy {
    font: 400 13px/1.55 var(--font-ui);
    color: var(--text-2);
    margin: 0 0 20px;
}

.sd-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ---------- landing (logged out) ---------- */

.sd-landing {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 28px 66px;
}

.sd-locker-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.sd-locker-identity .sd-locker-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sd-weapon-photo-thumb,
.sd-weapon-detail-photo,
.sd-weapon-photo-preview {
    display: block;
    object-fit: contain;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    flex: none;
}

.sd-weapon-photo-thumb {
    width: 80px;
    height: 56px;
}

.sd-weapon-detail-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 280px;
    margin-bottom: 16px;
}

.sd-weapon-photo-preview {
    width: 100%;
    height: 200px;
}

.sd-weapon-photo-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sd-weapon-photo-upload {
    position: relative;
    overflow: hidden;
    margin: 0;
}

.sd-weapon-photo-upload input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.sd-weapon-photo-upload:focus-within {
    box-shadow: var(--focus-ring);
}

.sd-weapon-photo-upload:has(input:disabled) {
    opacity: .6;
    cursor: wait;
}

.sd-weapon-photo-field .sd-field-help {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .sd-locker-card .sd-weapon-photo-thumb {
        width: 60px;
        height: 50px;
    }

    .sd-locker-card:has(.sd-weapon-photo-thumb) .sd-locker-card-text {
        flex: 1;
        overflow-wrap: anywhere;
    }
}

.sd-landing-kicker {
    font: 500 12px var(--font-num);
    letter-spacing: .14em;
    color: var(--accent-fg);
    text-transform: uppercase;
}

.sd-landing-headline {
    font: 700 40px/1.2 var(--font-ui);
    color: var(--text);
    margin: 16px 0 0;
    max-width: 640px;
    letter-spacing: -.01em;
}

.sd-landing-copy {
    font: 400 15.5px/1.65 var(--font-ui);
    color: var(--text-2);
    margin: 16px 0 0;
    max-width: 540px;
}

.sd-landing-ctas {
    display: flex;
    gap: 12px;
    width: min(540px, 100%);
    margin-top: 30px;
}

@media (min-width: 768px) {
    .sd-landing-ctas {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-landing-ctas .sd-btn {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
    }
}

.sd-btn-lg {
    height: 48px;
    padding: 0 26px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 600;
}

.sd-btn-outline.sd-btn-lg {
    color: var(--text);
}

.sd-landing-features {
    display: grid;
    grid-template-columns: repeat(3, 260px);
    gap: 14px;
    margin-top: 70px;
}

@media (max-width: 900px) {
    .sd-landing-headline {
        font-size: 28px;
    }

    .sd-landing-features {
        grid-template-columns: 1fr;
        margin-top: 36px;
    }
}

/* On tall desktop canvases, center the hero between the header and footer. */
@media (min-width: 1200px) and (min-height: 900px) {
    .sd-landing {
        justify-content: center;
    }
}

.sd-feature-card {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.sd-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
    color: var(--accent-fg);
}

.sd-feature-title {
    font: 600 14.5px var(--font-ui);
    color: var(--text);
    margin-top: 12px;
}

.sd-feature-copy {
    font: 400 12.5px/1.55 var(--font-ui);
    color: var(--text-2);
    margin-top: 5px;
}

/* landing: mobile download label and available platform icon buttons */
.sd-landing-applink {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    width: min(540px, 100%);
    max-width: 100%;
}

.sd-mobile-download-title {
    margin: 0;
    font: 600 15px/1.4 var(--font-ui);
    color: var(--text);
}

.sd-mobile-download {
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: var(--r-md);
    flex: none;
}

.sd-mobile-download-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-top: 6px;
}

.sd-mobile-download-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 10px;
    min-width: 0;
    max-width: 240px;
}

.sd-mobile-download-option .sd-btn {
    background: var(--surface);
}

.sd-mobile-download-option .sd-btn:hover {
    background: var(--surface-2);
    border-color: var(--accent-border);
}

.sd-landing-applink-hint {
    font: 400 11.5px/1.5 var(--font-ui);
    color: var(--text-2);
}

/* ---------- forms (native + Radzen harmonizing) ---------- */

.sd-label {
    display: block;
    font: 500 12.5px var(--font-ui);
    color: var(--text-2);
    margin-bottom: 6px;
}

.sd-input {
    box-sizing: border-box;
    width: 100%;
    height: var(--control-h);
    padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg);
    color: var(--text);
    font: 400 13.5px var(--font-ui);
}

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

/* ---------- diary page layout ---------- */

.sd-diary-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .sd-diary-grid {
        grid-template-columns: 1fr;
    }

    /* stacked single-column layout: a sticky sidebar makes no sense */
    .sd-diary-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* ---------- sticky diary header (desktop diary) ----------
   Wraps the delete banner and the results bar so delete mode floats along
   with the toolbar when scrolling instead of disappearing off-screen. */

.sd-diary-head {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--bg);
    /* bleed across the page padding so the header spans edge to edge */
    margin: -24px -28px 12px;
}

.sd-diary-head .sd-delete-banner {
    /* re-inset past the bleed; the bar's top padding keeps the bottom
       border clear of the results bar below */
    margin: 16px 28px 2px;
}

.sd-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--divider);
}

.sd-results-pager {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sd-page-summary {
    font: 500 12px var(--font-num);
    color: var(--text-3);
    white-space: nowrap;
}

.sd-page-indicator {
    font: 500 12.5px var(--font-num);
    color: var(--text-2);
}

.sd-page-btn {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    color: var(--text-2);
    cursor: pointer;
    flex: none;
}

.sd-page-btn:hover:not(:disabled) {
    color: var(--text);
}

.sd-page-btn:disabled {
    opacity: .35;
    cursor: default;
}

/* ---------- month groups + compact entry card (desktop diary) ---------- */

.sd-entry-groups {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sd-month-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-month-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--divider);
}

.sd-month-title {
    font: 600 13px var(--font-ui);
    color: var(--text);
}

.sd-month-summary {
    font: 500 11.5px var(--font-num);
    color: var(--text-3);
    white-space: nowrap;
}

.sd-entry-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 16px 18px;
}

.sd-date-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.sd-date-wd {
    font: 600 10.5px var(--font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-mid);
}

.sd-date-day {
    font: 600 22px var(--font-ui);
    color: var(--text);
    line-height: 1.1;
}

.sd-date-mon {
    font: 500 10.5px var(--font-num);
    text-transform: uppercase;
    color: var(--text-3);
}

.sd-entry-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-entry-line1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.sd-entry-line1 .sd-entry-location {
    font-size: 15px;
}

.sd-entry-annotation {
    font: 400 11.5px var(--font-ui);
    color: var(--text-3);
}

.sd-entry-weapons {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-entry-weapon-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.sd-entry-weapon-row .sd-weapon-name {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-entry-weapon-row .sd-weapon-count {
    font-size: 12.5px;
    flex: none;
}

.sd-entry-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}

.sd-entry-total {
    font: 600 18px var(--font-num);
    color: var(--text);
    line-height: 1.2;
}

.sd-entry-total-cap {
    font: 500 10.5px var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sd-entry-malf {
    font: 500 11px var(--font-num);
    color: var(--text-3);
}

/* ---------- pagination footer ---------- */

.sd-pagination {
    border-top: 1px solid var(--divider);
    padding-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sd-pagination-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-pagination .sd-page-btn,
.sd-page-num {
    width: 34px;
    height: 34px;
}

.sd-page-num {
    min-width: 34px;
    padding: 0 6px;
    display: inline-grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font: 500 12.5px var(--font-num);
    color: var(--text-2);
    cursor: pointer;
}

.sd-page-num:hover {
    color: var(--text);
}

.sd-page-num.active {
    background: rgba(87,167,124,.16);
    color: var(--accent-fg);
    font-weight: 600;
}

[data-theme="light"] .sd-page-num.active {
    background: rgba(46,125,84,.12);
}

.sd-page-ellipsis {
    font: 500 12.5px var(--font-num);
    color: var(--text-3);
    padding: 0 2px;
}

.sd-chart-pager {
    border-top: 1px solid var(--divider);
    margin-top: 12px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sd-chart-pager .sd-page-summary {
    margin-right: auto;
}

.sd-page-size-divider {
    width: 1px;
    height: 20px;
    background: var(--border-strong);
    margin: 0 6px;
    flex: none;
}

/* ---------- jump to year ---------- */

.sd-year-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.sd-year-chip {
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border-strong);
    background: transparent;
    font: 500 12px var(--font-num);
    color: var(--text-2);
    cursor: pointer;
}

.sd-year-chip.selected {
    background: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent-fg);
}

/* ---------- filter panel header with reset ---------- */

.sd-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sd-reset-link {
    font: 500 11.5px var(--font-ui);
    color: var(--accent-fg);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.sd-reset-link:hover {
    text-decoration: underline;
}

.sd-diary-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.sd-diary-sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* stays visible while the feed scrolls; scrolls itself if taller than the viewport */
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    /* Keep the sticky sidebar above the results bar (z 90). */
    z-index: 91;
}

/* The drawer shares the sticky sidebar's stacking context. Raise that context
   while it is open so the account menu (z 1001) stays below the modal. */
.sd-diary-sidebar:has(.sd-readiness-overlay) {
    z-index: 1150;
}

/* when the sidebar overflows into scrolling, flex-shrink would crush the
   export button before the scrollbar appears — pin it to its proper size */
.sd-diary-sidebar > .sd-btn {
    flex-shrink: 0;
    min-height: var(--control-h);
}

/* mobile condensed feed wrapper (inside .sd-diary-feed) */
.sd-diary-feed-m {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-sidebar-actions {
    display: flex;
    gap: 10px;
}

.sd-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* sub-group label inside the Filter panel (weapon type / sport) */
.sd-filter-label {
    font: 500 11.5px var(--font-ui);
    color: var(--text-3);
    margin-bottom: 7px;
}

/* label + "show all/less" toggle on one line above a collapsible chip group */
.sd-filter-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}

.sd-filter-label-row .sd-filter-label {
    margin-bottom: 0;
}

/* collapsed chip group: exactly one row visible — 28px clears the tallest chip
   (27px) but stays under where the second row starts (32px) */
.sd-chip-group.collapsed,
.sd-year-chips.collapsed {
    max-height: 28px;
    overflow: hidden;
}

.sd-select {
    height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: 500 12.5px var(--font-ui);
    cursor: pointer;
}

.sd-select:focus {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Theme the native option popup (mirrors select.form-control option). Without
   this the opened dropdown list renders on a white background in dark mode —
   most visibly on .sd-select-lg, whose control background is transparent. */
.sd-select option {
    background: var(--surface);
    color: var(--text);
}

.sd-entry-summary {
    font: 400 12.5px var(--font-ui);
    color: var(--accent-fg);
    margin-top: 4px;
}

.sd-icon {
    flex: none;
    vertical-align: -2px;
}

/* ---------- error banner ---------- */

.sd-error-card {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    padding: 14px 18px;
    color: #e0908c;
    font: 500 13px var(--font-ui);
}

[data-theme="light"] .sd-error-card {
    color: var(--danger);
}

/* ============================================================
   Radzen overrides — map --rz-* onto the token palette and
   clean up the components the redesigned pages still use.
   ============================================================ */

:root {
    --rz-primary: var(--accent);
    --rz-primary-dark: #266a47;
    --rz-primary-light: var(--accent-hover);
    --rz-secondary: #4a7d96;
    --rz-danger: var(--danger);
    --rz-body-background-color: var(--bg);
    --rz-base-background-color: var(--surface-2);
    --rz-panel-background-color: var(--surface);
    --rz-panel-border: 1px solid var(--border);
    --rz-card-background-color: var(--surface);
    --rz-content-background-color: var(--surface);
    --rz-border-radius: 6px;
    --rz-input-background-color: var(--bg);
    --rz-input-border: 1px solid var(--border-strong);
    --rz-text-color: var(--text);
    --rz-text-secondary-color: var(--text-2);
    --rz-text-title-color: var(--text);
    --rz-series-1: #57a77c;
    --rz-series-2: #4a7d96;
}

.rz-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.rz-chart .rz-tick-text,
.rz-chart .rz-axis-title {
    fill: var(--text-2);
    font-family: var(--font-ui);
    font-size: 11.5px;
}

.rz-chart .rz-grid-line {
    stroke: var(--border);
}

.rz-chart .rz-axis .rz-axis-line {
    stroke: var(--border-strong);
}

/* ============================================================
   Mobile (<768px) — bottom tab bar, FAB, bottom sheets.
   Values from design_handoff_shooting_diary mockups (mobile artboards).
   ============================================================ */

:root {
    --tabbar-h: 64px;
    /* mobile sheets sit on a slightly lighter surface than cards */
    --sheet-bg: #1d2429;
    --sheet-border: rgba(255,255,255,.12);
    --sheet-shadow: 0 -8px 30px rgba(0,0,0,.5);
    --sheet-handle: rgba(255,255,255,.2);
    /* mobile mid-tone text (tab labels, meta) — between --text-2 and --text-3 */
    --text-mid: #78838a;
    /* add-entry header/footer chrome */
    --form-chrome: #171c1f;
    /* error text on tinted/dark surfaces */
    --danger-fg: #e0908c;
}

[data-theme="light"] {
    --sheet-bg: #ffffff;
    --sheet-border: rgba(23,34,30,.15);
    --sheet-shadow: 0 -8px 30px rgba(23,34,30,.25);
    --sheet-handle: rgba(23,34,30,.25);
    --text-mid: #798690;
    --form-chrome: #f7f8f8;
    --danger-fg: #b3423d;
}

/* visibility helpers — mobile-only markup stays out of the desktop layout
   (scoped to media queries so they never override an element's own display) */
@media (min-width: 768px) {
    .sd-mobile-only {
        display: none !important;
    }
}

/* ---------- bottom tab bar (stays dark in both themes, like the topbar) ---------- */

.sd-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    height: var(--tabbar-h);
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    background: #171c1f;
    border-top: 1px solid rgba(255,255,255,.09);
}

.sd-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
}

.sd-tab:hover {
    text-decoration: none;
}

.sd-tab-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    color: #78838a;
}

.sd-tab-label {
    font: 500 10.5px var(--font-ui);
    color: #78838a;
}

.sd-tab.active .sd-tab-icon {
    background: rgba(87,167,124,.2);
    color: #8fcaa9;
}

.sd-tab.active .sd-tab-label {
    font-weight: 600;
    color: #8fcaa9;
}

/* ---------- FAB (mobile primary action, above the tab bar) ---------- */

.sd-fab {
    position: fixed;
    right: 16px;
    /* 16px clearance above the tab bar incl. its 6px bottom padding */
    bottom: calc(var(--tabbar-h) + 22px + env(safe-area-inset-bottom));
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: var(--r-lg);
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: var(--shadow-raised);
    display: none;
    place-items: center;
    cursor: pointer;
    z-index: 900;
}

/* ---------- bottom sheet ---------- */

.sd-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1100;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.sd-sheet {
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    background: var(--sheet-bg);
    border-top: 1px solid var(--sheet-border);
    border-radius: 18px 18px 0 0;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    box-shadow: var(--sheet-shadow);
    animation: sd-sheet-up .2s ease-out;
}

@keyframes sd-sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

.sd-sheet-handle {
    position: relative;
    width: 36px;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--sheet-handle);
    margin: 0 auto 14px;
    flex: none;
    /* the handle can be pulled down to dismiss the sheet (see the drag helper in app.js) */
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

/* enlarge the drag target well beyond the thin visual pill so it's easy to grab */
.sd-sheet-handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 26px;
}

.sd-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sd-sheet-title {
    font: 600 16px var(--font-ui);
    color: var(--text);
}

.sd-sheet-sub {
    font: 400 12.5px var(--font-ui);
    color: var(--text-mid);
    margin: 0 0 14px;
}

.sd-sheet-link {
    font: 500 13px var(--font-ui);
    color: var(--accent-fg);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.sd-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sd-sheet-section .sd-section-label {
    margin-bottom: 9px;
}

/* inputs & buttons inside sheets follow the 48px mobile control size */
.sd-sheet .sd-btn {
    height: 48px;
    border-radius: var(--r-md);
}

.sd-btn-block {
    width: 100%;
    height: 50px;
    border-radius: var(--r-md);
    font-size: 15px;
}

/* ---------- split title row (title + meta left, action pill right) ---------- */

.sd-title-block {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.sd-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    background: var(--surface);
    color: #c4ccd0;
    font: 500 13px var(--font-ui);
    cursor: pointer;
    flex: none;
}

[data-theme="light"] .sd-filter-pill {
    color: #2b343a;
}

.sd-filter-badge {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 10.5px var(--font-num);
}

/* ---------- condensed entry card (mobile diary feed) ---------- */

.sd-entry-meta {
    font: 400 12px var(--font-ui);
    color: var(--accent-fg);
    margin-top: 3px;
}

.sd-weapon-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
    padding-top: 9px;
}

.sd-weapon-list.no-notes {
    margin-top: 10px;
}

.sd-weapon-row-m {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.sd-weapon-row-m .sd-weapon-name {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-weapon-count-m {
    font: 500 12.5px var(--font-num);
    color: var(--text);
    white-space: nowrap;
}

.sd-weapon-count-m .warn {
    color: var(--warn);
}

/* ---------- filter sheet controls ---------- */

.sd-segmented-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--sheet-border);
    border-radius: 9px;
    overflow: hidden;
}

.sd-segmented-block button {
    padding: 11px 0;
    text-align: center;
    font: 500 13.5px var(--font-ui);
    color: var(--text-mid);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.sd-segmented-block button.selected {
    background: rgba(87,167,124,.16);
    color: var(--accent-fg);
}

[data-theme="light"] .sd-segmented-block button.selected {
    background: rgba(46,125,84,.12);
}

.sd-chip-toggle-lg {
    font-size: 13.5px;
    padding: 10px 16px;
}

.sd-sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Keep the label and its control together on the left instead of pushed apart
   (e.g. the ERVA toggle when adding a weapon). */
.sd-sheet-row-inline {
    justify-content: flex-start;
}

.sd-sheet-row > span:first-child {
    font: 400 14px var(--font-ui);
    color: #c4ccd0;
}

[data-theme="light"] .sd-sheet-row > span:first-child {
    color: #2b343a;
}

.sd-select-lg {
    height: auto;
    padding: 10px 14px;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: 500 13.5px var(--font-ui);
}

.sd-switch-lg {
    width: 44px;
    height: 26px;
}

.sd-switch-lg .sd-switch-thumb {
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
}

.sd-switch-lg input:checked ~ .sd-switch-thumb {
    transform: translateX(18px);
}

.sd-sheet-actions {
    border-top: 1px solid var(--border);
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-sheet .sd-btn-block {
    height: 50px;
}

/* ---------- add entry form ---------- */

.sd-addentry {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sd-addentry-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--form-chrome);
    flex: none;
}

.sd-addentry-back {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    flex: none;
}

.sd-addentry-back:hover {
    color: var(--text);
}

.sd-addentry-title {
    font: 600 17px var(--font-ui);
    color: var(--text);
}

.sd-addentry-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sd-addentry-foot {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    background: var(--form-chrome);
    flex: none;
}

.sd-addentry-cancel {
    width: 110px;
    height: 50px;
    border-radius: var(--r-md);
}

.sd-addentry-save {
    flex: 1;
    height: 50px;
    border-radius: var(--r-md);
    font-size: 15px;
}

/* --- fields --- */

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

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

.sd-field-label .optional {
    font-weight: 400;
    color: var(--text-3);
}

.sd-field-label.error,
.sd-stepper-label.error {
    color: var(--danger-fg);
}

.sd-input-lg {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text);
    font: 400 14px var(--font-ui);
}

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

.sd-input-lg::placeholder {
    color: var(--text-3);
}

.sd-input-lg.mono {
    font: 500 13.5px var(--font-num);
}

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

.sd-textarea {
    height: auto;
    min-height: 64px;
    padding: 12px 14px;
    line-height: 1.5;
    resize: vertical;
}

.sd-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Half-width field, left-aligned so its right edge matches the left column of a
   two-column row above it (e.g. the date of purchase). */
.sd-field-half {
    max-width: calc(50% - 6px);
}

.sd-field-error {
    font: 400 12px var(--font-ui);
    color: var(--danger-fg);
}

/* --- weapons used --- */

.sd-weapons-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.sd-weapons-label {
    font: 600 12px var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sd-weapons-counter {
    font: 500 12px var(--font-num);
    color: var(--text-mid);
}

.sd-weapon-blocks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 3px;
}

.sd-weapon-block {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sd-weapon-block.owned {
    border-color: rgba(87,167,124,.3);
}

[data-theme="light"] .sd-weapon-block.owned {
    border-color: rgba(46,125,84,.35);
}

.sd-weapon-block .sd-input-lg,
.sd-weapon-block .sd-step-value {
    background: var(--bg);
}

.sd-weapon-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sd-weapon-block-name {
    font: 600 14px var(--font-ui);
    color: var(--text);
}

.sd-loan-kicker {
    font: 600 12px var(--font-ui);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-2);
}

.sd-block-remove {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    cursor: pointer;
    flex: none;
}

.sd-block-remove:hover {
    color: var(--danger);
    background: var(--danger-soft);
}

/* --- date field with localized calendar popup --- */

.sd-date-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sd-date-field .sd-input-lg {
    padding-right: 44px;
}

.sd-date-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
}

.sd-date-btn:hover {
    color: var(--text);
}

/* invisible click-away layer under the popup */
.sd-cal-scrim {
    position: fixed;
    inset: 0;
    z-index: 1190;
}

.sd-cal-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1200;
    width: 280px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-raised);
    padding: 10px;
}

.sd-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.sd-cal-title {
    font: 600 13px var(--font-ui);
    color: var(--text);
}

.sd-cal-nav {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 7px;
    color: var(--text-2);
    cursor: pointer;
    flex: none;
}

.sd-cal-nav:hover {
    color: var(--text);
}

.sd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.sd-cal-wd {
    text-align: center;
    font: 600 10.5px var(--font-ui);
    text-transform: uppercase;
    color: var(--text-3);
    padding: 4px 0;
}

.sd-cal-day {
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font: 500 12.5px var(--font-num);
    color: var(--text);
    cursor: pointer;
}

.sd-cal-day:hover:not(:disabled) {
    background: var(--surface-2);
}

.sd-cal-day.other {
    color: var(--text-3);
}

.sd-cal-day.today {
    border: 1px solid var(--accent-border);
}

.sd-cal-day.selected {
    background: var(--accent);
    color: var(--on-accent);
}

.sd-cal-day:disabled {
    color: var(--text-3);
    opacity: .4;
    cursor: default;
}

.sd-cal-nav-group {
    display: flex;
    gap: 4px;
    flex: none;
}

/* the « » year-jump buttons are text glyphs, not icons */
.sd-cal-nav.year {
    font: 600 13px var(--font-ui);
}

/* the title doubles as the zoom-out button (days → months → years) */
.sd-cal-title-btn {
    background: transparent;
    border: 0;
    padding: 4px 8px;
    border-radius: 7px;
    cursor: pointer;
}

.sd-cal-title-btn:hover {
    background: var(--surface-2);
}

/* zoomed-out month/year pickers: coarser 3-wide grid of day-styled cells */
.sd-cal-grid.coarse {
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.sd-cal-grid.coarse .sd-cal-day {
    height: 40px;
    font: 500 12.5px var(--font-ui);
}

/* --- steppers --- */

.sd-stepper-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.sd-stepper-label {
    font: 500 11.5px var(--font-ui);
    color: var(--text-2);
}

.sd-stepper {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    height: 48px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    overflow: hidden;
}

.sd-stepper.error {
    border: 1.5px solid var(--danger);
}

.sd-step-btn {
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: var(--text-2);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.sd-step-btn.plus {
    color: var(--accent-fg);
}

.sd-step-value {
    min-width: 0;
    border: 0;
    background: var(--bg);
    color: var(--text);
    font: 600 15px var(--font-num);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.sd-step-value::-webkit-outer-spin-button,
.sd-step-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sd-step-value:focus {
    outline: none;
}

.sd-ghost-link {
    align-self: flex-start;
    font: 500 12.5px var(--font-ui);
    color: var(--text-mid);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.sd-ghost-link:hover {
    color: var(--text-2);
}

.sd-dashed-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.sd-btn-dashed {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 12px;
    background: transparent;
    color: var(--text-2);
    font: 600 13px var(--font-ui);
    cursor: pointer;
}

.sd-btn-dashed.owned {
    border-color: rgba(87,167,124,.4);
    color: var(--accent-fg);
}

[data-theme="light"] .sd-btn-dashed.owned {
    border-color: rgba(46,125,84,.45);
}

/* --- validation summary --- */

.sd-error-summary {
    background: var(--danger-soft);
    border: 1px solid rgba(192,96,92,.4);
    border-radius: var(--r-md);
    padding: 12px 14px;
}

[data-theme="light"] .sd-error-summary {
    border-color: rgba(179,66,61,.4);
}

.sd-error-summary-title {
    font: 600 13px var(--font-ui);
    color: var(--danger-fg);
}

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

[data-theme="light"] .sd-error-summary ul {
    color: #8f4a45;
}

/* --- owned-weapon picker sheet --- */

.sd-picker-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-picker-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 8px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}

.sd-picker-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sd-picker-name {
    font: 600 14px var(--font-ui);
    color: var(--text);
}

.sd-picker-meta {
    font: 400 12px var(--font-ui);
    color: var(--text-mid);
}

.sd-picker-plus {
    color: var(--accent-fg);
    display: grid;
    place-items: center;
    flex: none;
}

/* ---------- landing hero logo (mobile drops the navbar, hero leads with it) ---------- */

.sd-landing-logo {
    width: 52px;
    height: 52px;
    display: block;
    margin-bottom: 8px;
}

/* ---------- admin ---------- */

.sd-admin {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 960px;
    margin: 0 auto;
}

.sd-admin section:not(.sd-card) {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sd-admin-notice {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font: 500 var(--text-sm) var(--font-ui);
}

.sd-admin-notice.success {
    border-color: var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent-fg);
}

.sd-admin-notice.error {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

.sd-admin-distribution {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-admin-distribution h2 {
    margin: 0 0 5px;
    font: 600 var(--text-lg) var(--font-ui);
    color: var(--text);
}

.sd-admin-distribution p {
    margin: 0;
    color: var(--text-2);
    font-size: var(--text-sm);
}

.sd-admin-details {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
}

.sd-admin-details dt {
    color: var(--text-3);
    font: 600 var(--text-xs) var(--font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

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

.sd-admin-upload {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
}

.sd-admin-upload-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    max-width: 560px;
}

.sd-admin-upload-row .form-control {
    min-width: 0;
    height: var(--control-h);
    padding: 5px 8px;
}

.sd-admin-upload-row .form-control::file-selector-button {
    height: 26px;
    margin: -1px 10px -1px -3px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
}

.sd-admin-distribution .sd-admin-hint {
    color: var(--text-3);
    font-size: var(--text-xs);
}

.sd-admin-update-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sd-admin-exception-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.sd-admin-exception-grid > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.sd-admin-exception-grid strong {
    color: var(--text);
    font: 600 21px var(--font-num);
}

.sd-admin-exception-grid span {
    color: var(--text-3);
    font-size: var(--text-xs);
}

.sd-admin-back {
    display: inline-block;
    margin-bottom: 5px;
    color: var(--text-3);
    font-size: var(--text-xs);
    text-decoration: none;
}

.sd-exception-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sd-exception-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.sd-exception-filter-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    color: var(--text-3);
    font: 600 var(--text-xs) var(--font-ui);
}

.sd-exception-filter-grid .form-control {
    min-width: 0;
    color: var(--text);
    background: var(--surface-2);
}

.sd-exception-search {
    grid-column: span 2;
}

.sd-exception-filter-actions,
.sd-exception-pagination,
.sd-exception-result-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-exception-result-head {
    justify-content: space-between;
    color: var(--text-3);
    font: 500 var(--text-xs) var(--font-num);
}

.sd-exception-table-wrap {
    padding: 0;
    overflow-x: auto;
}

.sd-exception-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.sd-exception-table th {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-3);
    font: 600 10px var(--font-num);
    letter-spacing: .07em;
    text-align: left;
    text-transform: uppercase;
}

.sd-exception-table td {
    max-width: 260px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-size: var(--text-xs);
    vertical-align: top;
}

.sd-exception-table tbody tr {
    cursor: pointer;
}

.sd-exception-table tbody tr:hover,
.sd-exception-table tbody tr:focus-visible {
    outline: none;
    background: var(--surface-2);
}

.sd-exception-table tbody tr:last-child td {
    border-bottom: 0;
}

.sd-exception-table strong,
.sd-exception-table small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-exception-table strong {
    color: var(--text);
    font-weight: 600;
}

.sd-exception-table small {
    margin-top: 3px;
    color: var(--text-3);
    white-space: nowrap;
}

.sd-exception-time,
.sd-exception-table code,
.sd-exception-detail code {
    font-family: var(--font-num);
    font-size: 11px;
}

.sd-exception-badge {
    display: inline-flex;
    padding: 3px 7px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    color: var(--text-2);
    font: 600 10px var(--font-num);
    text-transform: uppercase;
}

.sd-exception-badge.crash {
    border-color: var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
}

.sd-exception-badge.unhandled {
    border-color: rgba(199,143,74,.5);
    background: rgba(199,143,74,.09);
    color: var(--warn);
}

.sd-exception-empty {
    color: var(--text-3);
    text-align: center;
}

.sd-exception-pagination {
    justify-content: flex-end;
}

.sd-exception-detail {
    position: fixed;
    z-index: 1001;
    top: 0;
    right: 0;
    width: min(680px, 92vw);
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    padding: 24px;
    border-left: 1px solid var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow-raised);
}

.sd-exception-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sd-exception-detail h2 {
    margin: 8px 0 0;
    color: var(--text);
    font: 650 24px var(--font-ui);
}

.sd-exception-message {
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.sd-exception-detail-list {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.sd-exception-detail-list dt {
    color: var(--text-3);
    font: 600 10px var(--font-num);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sd-exception-detail-list dd {
    min-width: 0;
    margin: 0;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.sd-exception-copy-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sd-exception-copy-value code {
    flex: 1;
}

.sd-exception-detail h3 {
    margin: 20px 0 8px;
    color: var(--text);
    font-size: var(--text-md);
}

.sd-exception-stack {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 14px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--text-2);
    font: 11px/1.55 var(--font-num);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
    .sd-admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .sd-admin-upload-row {
        flex-direction: column;
    }

    .sd-admin-exception-grid,
    .sd-exception-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-exception-search {
        grid-column: span 2;
    }

    .sd-exception-detail {
        width: 100%;
        padding: 18px;
    }

    .sd-exception-detail-list {
        grid-template-columns: 1fr;
    }
}

.sd-landing-language {
    margin-top: 8px;
}

.sd-landing-language .sd-language-switcher {
    border-color: var(--border-strong);
    background: var(--surface);
}

.sd-landing-language .sd-language-option {
    color: var(--text-3);
}

.sd-landing-language .sd-language-option:hover {
    color: var(--text);
}

.sd-landing-language .sd-language-option.selected {
    background: var(--accent-soft);
    color: var(--accent-fg);
}

/* ---------- gun locker mobile cards ---------- */

.sd-locker-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sd-locker-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px 16px;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    text-align: left;
}

.sd-locker-card-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sd-locker-card-name {
    font: 600 15px var(--font-ui);
    color: var(--text);
}

.sd-locker-card-meta {
    font: 400 12px var(--font-ui);
    color: var(--text-2);
}

.sd-locker-card-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: none;
}

.sd-locker-card-rounds {
    font: 600 15px var(--font-num);
    color: var(--text);
}

.sd-locker-card-caption {
    font: 400 10.5px var(--font-ui);
    color: var(--text-3);
}

.sd-weapon-select {
    position: relative;
}

.sd-weapon-select .sd-input-lg {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
}

.sd-weapon-select > .sd-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--text-2);
    pointer-events: none;
}

.sd-addweapon-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

/* Desktop weapon details and forms; mobile uses the shared bottom sheet. */
@media (min-width: 768px) {
    .sd-weapon-detail-modal-host {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 32px;
        box-sizing: border-box;
    }

    .sd-weapon-detail-modal-host .sd-weapon-detail {
        width: 720px;
        max-width: 100%;
        max-height: calc(100dvh - 64px);
        border: 1px solid var(--sheet-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-raised);
        overflow: hidden;
        animation: none;
    }

    .sd-weapon-detail-modal-host .sd-weapon-detail-head {
        flex-shrink: 0;
        padding: 24px 32px 20px;
    }

    .sd-weapon-detail-modal-host .sd-weapon-detail-title {
        font-size: 22px;
    }

    .sd-weapon-detail-modal-host .sd-weapon-detail-sub,
    .sd-weapon-detail-modal-host .sd-weapon-spec-label,
    .sd-weapon-detail-modal-host .sd-weapon-spec-value {
        font-size: 14px;
    }

    .sd-weapon-detail-modal-host .sd-weapon-detail-body {
        min-height: 0;
        overflow-y: auto;
        padding: 18px 32px;
    }

    .sd-weapon-detail-modal-host .sd-weapon-detail-actions {
        flex-shrink: 0;
        padding: 20px 32px 24px;
    }

    /* Adding a weapon stays inline between the header and the list. */
    .sd-inline-host {
        position: static;
        inset: auto;
        display: block;
        background: transparent;
        z-index: auto;
    }

    .sd-inline-host .sd-sheet {
        position: static;
        max-width: none;
        max-height: none;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-card);
        padding: 18px 20px;
        animation: none;
        overflow: visible;
    }

    /* modal host: the same sheet markup renders as a centered modal on desktop
       (edit weapon, design_handoff_gun_locker) */
    .sd-modal-host {
        align-items: center;
    }

    .sd-modal-host .sd-sheet {
        max-width: 720px;
        max-height: calc(100vh - 64px);
        background: var(--sheet-bg);
        border: 1px solid var(--sheet-border);
        border-radius: var(--r-lg);
        box-shadow: var(--shadow-raised);
        padding: 24px;
        animation: none;
    }
}

/* ---------- mobile reflow ---------- */

@media (max-width: 767.98px) {
    .sd-desktop-only {
        display: none !important;
    }

    /* mobile drops the topbar: navigation is the bottom tab bar */
    .sd-topbar {
        display: none;
    }

    .sd-tabbar {
        display: grid;
    }

    .sd-fab {
        display: grid;
    }

    .sd-page {
        padding: 16px 14px calc(var(--tabbar-h) + 32px + env(safe-area-inset-bottom));
    }

    .sd-passkey-notice {
        right: 12px;
        bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom));
        width: calc(100vw - 24px);
    }

    .sd-card {
        border-radius: 12px;
        padding: 15px 16px;
    }

    .sd-meta {
        font-size: 11.5px;
        color: var(--text-mid);
    }

    /* centered dialogs: inset 24px, stretched 48px buttons */
    .sd-dialog {
        margin: 0 24px;
        padding: 22px;
    }

    .sd-dialog-actions button {
        flex: 1;
        height: 48px;
        border-radius: var(--r-md);
    }

    /* --- diary --- */

    .sd-title-row-split {
        justify-content: space-between;
        align-items: center;
    }

    .sd-title-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .sd-diary-feed {
        gap: 10px;
    }

    .sd-entry-location {
        font-size: 15px;
    }

    .sd-entry-date {
        font-size: 12px;
    }

    .sd-entry-notes {
        font-size: 12.5px;
        margin: 8px 0 10px;
    }

    .sd-inactive-marker span {
        font-size: 10.5px;
    }

    .sd-delete-banner {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* the results bar is hidden on mobile: keep the header in normal flow
       and the delete banner where it always was */
    .sd-diary-head {
        position: static;
        margin: 0;
        background: none;
    }

    .sd-diary-head .sd-delete-banner {
        margin: 0 0 16px;
    }

    /* --- page headers: title + meta stack; split rows keep the action right --- */

    .sd-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .sd-title-row-split {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* --- statistics --- */

    .sd-stat-tile {
        border-radius: 12px;
        padding: 13px 15px;
    }

    .sd-stat-figure {
        font-size: 22px;
        line-height: 1.1;
    }

    .sd-stat-figure.text {
        font-size: 14.5px;
    }

    .sd-stat-caption {
        font-size: 10.5px;
        margin-top: 5px;
    }

    /* charts become label-over-bar rows: label + mono value line, track below */
    .sd-bar-row,
    .sd-bar-row.wide {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "label value"
            "track track";
        row-gap: 4px;
        column-gap: 8px;
    }

    .sd-bar-label {
        grid-area: label;
        text-align: left;
        font-size: 12px;
    }

    .sd-bar-track,
    .sd-bar-stack {
        grid-area: track;
    }

    .sd-bar-value {
        grid-area: value;
        font-size: 12px;
        color: var(--text-2);
    }

    .sd-bar-value.stack {
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
    }

    .sd-bar-track.thin {
        height: 10px;
    }

    .sd-chart-head {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* --- landing (logged out) --- */

    .sd-landing {
        padding: 44px 12px 36px;
    }

    .sd-landing-kicker {
        font-size: 11px;
        margin-top: 22px;
    }

    .sd-landing-copy {
        font-size: 14px;
        line-height: 1.6;
    }

    .sd-landing-ctas {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 28px;
    }

    .sd-landing-ctas .sd-btn {
        width: 100%;
        /* the CTAs are <a> elements: unlike buttons they default to content-box,
           so 100% width + side padding would overflow the viewport */
        box-sizing: border-box;
        height: 52px;
        border-radius: var(--r-md);
        font-size: 15px;
    }

    .sd-landing-applink {
        width: 100%;
    }

    .sd-landing-features {
        width: 100%;
        margin-top: 32px;
        gap: 10px;
    }

    .sd-feature-card {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        border-radius: 12px;
    }

    .sd-feature-icon {
        width: 36px;
        height: 36px;
        flex: none;
    }

    .sd-feature-title {
        margin-top: 0;
        font-size: 14px;
    }

    .sd-feature-copy {
        margin-top: 3px;
    }

    /* --- add entry: full-screen with sticky header/footer --- */

    .sd-addentry {
        position: fixed;
        inset: 0;
        z-index: 1050;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--bg);
    }

    .sd-addentry-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sd-addentry-foot {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    /* on the page background, inputs and blocks step up to the card surface;
       inputs nested inside weapon blocks step back down to the page tone */
    .sd-addentry .sd-input-lg,
    .sd-addentry .sd-weapon-block {
        background: var(--surface);
    }

    .sd-addentry .sd-weapon-block .sd-input-lg,
    .sd-addentry .sd-step-value {
        background: var(--bg);
    }
}

/* ---------- opened entry + signature (design_handoff_signatures) ---------- */
.sd-entry-openable {
    cursor: pointer;
}

/* diary row status pill */
.sd-sig-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font: 500 11px var(--font-ui);
    padding: 2px 9px 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
}

.sd-sig-pill.signed {
    color: #a9c7d6;
    background: rgba(120,170,200,.10);
    border: 1px solid rgba(120,170,200,.32);
}

.sd-sig-pill.add {
    color: var(--text-3);
    background: transparent;
    border: 1px dashed rgba(255,255,255,.18);
}

[data-theme="light"] .sd-sig-pill.add {
    border-color: rgba(23,34,30,.18);
}

.sd-entry-detail {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-raised);
    width: 720px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 20px 22px 24px;
    box-sizing: border-box;
}

.sd-entry-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.sd-entry-detail-title {
    display: block;
    font: 600 16px var(--font-ui);
    color: var(--text);
}

.sd-entry-detail-sub {
    font: 400 12.5px var(--font-ui);
    color: var(--text-2);
}

.sd-entry-detail-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.sd-entry-detail-weapons {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
}

.sd-entry-detail-weapons td {
    padding: 7px 0;
    border-bottom: 1px solid var(--divider);
    font: 400 13px var(--font-ui);
    color: var(--text);
}

.sd-entry-detail-weapons td.num {
    width: 80px;
    text-align: right;
    font-family: var(--font-num);
}

.sd-entry-detail-weapons td.muted {
    color: var(--text-3);
}

.sd-entry-detail-notes {
    font: 400 12.5px/1.55 var(--font-ui);
    color: var(--text-2);
    margin: 0 0 16px;
}

.sd-entry-detail-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
}

.sd-signature-card {
    background: var(--surface);
    border: 1px solid rgba(120,170,200,.28);
    border-radius: 10px;
    padding: 16px 18px 18px;
}

.sd-signature-card-head {
    display: flex;
    gap: 6px 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sd-signature-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
}

.sd-signature-remove {
    flex: none;
}

.sd-signature-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: 600 11px var(--font-ui);
    color: #a9c7d6;
}

.sd-signature-time {
    font: 500 11px var(--font-num);
    color: var(--text-3);
}

.sd-signature-paper {
    background: #f7f5ee;
    border-radius: 6px;
    height: 88px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.sd-signature-paper img {
    max-height: 78px;
    max-width: 90%;
    transform: rotate(-3deg);
}

.sd-signature-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: 8px 16px;
    margin: 12px 0 0;
}

.sd-signature-meta > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sd-signature-meta .cap {
    font: 600 10.5px var(--font-ui);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
}

.sd-signature-meta > div > span:last-child {
    font: 400 13.5px var(--font-ui);
    color: var(--text);
    overflow-wrap: anywhere;
}

.sd-signature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.sd-signature-confirm {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--divider);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    font: 400 12.5px var(--font-ui);
    color: var(--text-2);
}

.sd-signature-empty {
    border: 1px dashed rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 22px 18px;
    text-align: center;
}

[data-theme="light"] .sd-signature-empty {
    border-color: rgba(23,34,30,.18);
}

.sd-signature-empty-icon {
    width: 40px;
    height: 40px;
    border-radius: 99px;
    border: 1px solid var(--accent-border);
    color: var(--accent-fg);
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
}

.sd-signature-empty p {
    font: 400 12.5px/1.55 var(--font-ui);
    color: var(--text-2);
    margin: 0 0 14px;
}

.sd-signature-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.sd-signature-link {
    margin-top: 14px;
    text-align: left;
}

.sd-signature-link p {
    font: 400 11.5px/1.5 var(--font-ui);
    color: var(--text-3);
    margin: 0 0 6px;
}

/* the link field IS the copy button: click anywhere on it to copy */
.sd-signature-link-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
}

.sd-signature-link-copy:hover {
    border-color: var(--accent-border);
}

.sd-signature-link-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 400 12px var(--font-num);
    color: var(--text-2);
}

.sd-signature-link-hint {
    font: 600 11.5px var(--font-ui);
    color: var(--accent-fg);
    flex: none;
}

.sd-signature-link-copy.copied .sd-signature-link-hint {
    color: var(--text-2);
}

.sd-signature-skeleton {
    height: 120px;
    border-radius: 10px;
    background: var(--surface-2);
}

/* ---- capture flow ---- */
.sd-capture-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.sd-capture-method {
    position: relative;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-2);
    font: 500 12.5px var(--font-ui);
    padding: 14px 8px;
    cursor: pointer;
    text-align: center;
}

.sd-capture-method.selected {
    border-color: var(--accent);
    color: var(--text);
    background: var(--accent-soft);
}

.sd-capture-method-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 99px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
}

.sd-capture-pad-wrap {
    position: relative;
    background: #ffffff;
    color-scheme: light;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 16px;
}

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

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

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

.sd-capture-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.sd-capture-photo img {
    max-width: 100%;
    max-height: 260px;
    border-radius: 8px;
    background: #f7f5ee;
}

.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;
}

.sd-capture-drop input {
    display: none;
}

.sd-capture-identity {
    margin-bottom: 14px;
}

.sd-capture-info {
    font: 400 12px/1.5 var(--font-ui);
    color: #a9c7d6;
    background: rgba(120,170,200,.10);
    border: 1px solid rgba(120,170,200,.28);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.sd-capture-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* crop editor for a photographed/uploaded signature (rotate + select an area) */
.sd-crop-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #f7f5ee;
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
}

.sd-crop-canvas {
    display: block;
    max-width: 100%;
    border-radius: 4px;
    touch-action: none;
    cursor: crosshair;
}

.sd-crop-hint {
    text-align: center;
    font: 400 12px/1.4 var(--font-ui);
    color: var(--text-3);
}

.sd-crop-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* mobile: the opened entry is a bottom sheet, not a centred dialog */
@media (max-width: 767.98px) {
    .sd-entry-detail-overlay {
        align-items: end;
    }

    .sd-entry-detail {
        width: 100%;
        max-width: 480px;
        border-radius: 18px 18px 0 0;
        max-height: calc(100vh - 40px);
        padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
        animation: sd-sheet-up .2s ease-out;
    }

    .sd-signature-card-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .sd-signature-heading {
        display: contents;
    }

    .sd-signature-time {
        grid-column: 1 / -1;
    }

    .sd-signature-remove {
        grid-column: 2;
        grid-row: 1;
    }

    /* weapon details: the desktop drawer becomes a bottom sheet */
    .sd-weapon-detail-overlay {
        justify-content: center;
        align-items: flex-end;
    }

    .sd-weapon-detail {
        width: 100%;
        max-width: 480px;
        max-height: calc(100vh - 40px);
        border-left: 0;
        border-top: 1px solid var(--sheet-border);
        border-radius: 18px 18px 0 0;
        box-shadow: var(--sheet-shadow);
        padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
        animation: sd-sheet-up .2s ease-out;
    }

    .sd-weapon-detail-head {
        padding: 0 0 8px;
        border-bottom: 0;
    }

    .sd-weapon-detail-title {
        font-size: 17px;
    }

    .sd-weapon-detail-body {
        padding: 0;
    }

    .sd-weapon-spec-row {
        padding: 12px 0;
    }

    .sd-weapon-spec-label,
    .sd-weapon-spec-value {
        font-size: 13.5px;
    }

    .sd-weapon-detail-actions {
        padding: 14px 0 0;
        border-top: 0;
    }

    .sd-weapon-detail-edit,
    .sd-weapon-detail-remove {
        height: 50px;
    }

    /* permit renewals sheet: condensed cards */
    .sd-permit-card {
        border-radius: 12px;
        padding: 14px 15px;
    }

    .sd-permit-dates {
        font-size: 11px;
    }

    .sd-renewals-foot {
        padding: 12px 0 0;
    }

    /* Kept strip-shaped: a taller pad invites tall signatures that render tiny in
       the wide 125x32pt PDF slot. */
    .sd-capture-pad {
        height: 140px;
    }

    /* Keep both rotation controls on one row, including the Finnish labels. */
    .sd-crop-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .sd-crop-tools .sd-btn {
        min-width: 0;
        height: 44px;
        padding: 0 8px;
        gap: 4px;
        font-size: 12px;
    }

    .sd-crop-change-image {
        grid-column: 1 / -1;
    }

    /* Name on its own row above role — the ~480px sheet is too narrow for two
       side-by-side fields to show what you're typing. */
    .sd-capture-identity {
        grid-template-columns: 1fr;
    }
}

/* Landscape phones (short viewport): the sheet gets very little height, so use the
   full width and shrink the signature pad. Otherwise the pad — which has
   touch-action: none, so scroll gestures over it draw instead of scrolling — fills
   the sheet and buries the signer fields and the Save button, with no room to reach
   them. Height-based so it catches phones in landscape whatever their (wide) width. */
@media (orientation: landscape) and (max-height: 600px) {
    .sd-entry-detail {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 16px);
    }

    .sd-capture-pad {
        height: 120px;
    }
}

/* ============================================================
   Edit entry (design_handoff_edit_entry)
   View-mode audit line, in-place edit mode, kuittaus-void
   warning banner + voided empty state.
   ============================================================ */

.sd-entry-detail-head-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

/* "Muokattu 10.7.2026 09.41 · laukaukset 100 → 120" — its own row under the subtitle */
.sd-entry-audit {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    max-width: 100%;
    font: 500 11.5px var(--font-num);
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sd-entry-audit .sd-icon {
    flex: none;
}

.sd-edit-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 6px;
    font: 600 10.5px var(--font-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e4c07f;
    background: rgba(199, 168, 90, .1);
    border: 1px solid rgba(199, 168, 90, .35);
    vertical-align: 2px;
}

[data-theme="light"] .sd-edit-badge {
    color: #8a6420;
    background: rgba(167, 107, 36, .08);
    border-color: rgba(167, 107, 36, .35);
}

.sd-edit-warn {
    display: flex;
    gap: 11px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(199, 168, 90, .08);
    border: 1px solid rgba(199, 168, 90, .32);
    border-radius: 10px;
    font: 400 12.5px/1.55 var(--font-ui);
    color: #dcc99b;
}

.sd-edit-warn b {
    font-weight: 600;
    color: #efe0bd;
}

.sd-edit-warn .sd-icon {
    flex: none;
    margin-top: 1px;
    color: #e4c07f;
}

[data-theme="light"] .sd-edit-warn {
    background: rgba(167, 107, 36, .07);
    border-color: rgba(167, 107, 36, .3);
    color: #7a5c1c;
}

[data-theme="light"] .sd-edit-warn b {
    color: #5d4512;
}

[data-theme="light"] .sd-edit-warn .sd-icon {
    color: #a76b24;
}

/* the save-confirm dialog reuses the warn card as its hint */
.sd-dialog .sd-edit-warn {
    margin: 14px 0 0;
}

.sd-dialog-copy b {
    font-weight: 600;
    color: var(--text);
}

.sd-entry-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sd-edit-2col {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 14px;
}

.sd-edit-weapons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sd-edit-weapon-row {
    display: grid;
    grid-template-columns: 1fr 110px 44px;
    gap: 8px;
    align-items: center;
}

.sd-edit-rounds {
    text-align: right;
    -moz-appearance: textfield;
}

.sd-edit-rounds::-webkit-outer-spin-button,
.sd-edit-rounds::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sd-edit-weapon-remove {
    width: 44px;
    height: 48px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    color: var(--text-3);
    cursor: pointer;
}

.sd-edit-weapon-remove:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.sd-edit-weapon-remove:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sd-entry-edit-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--divider);
}

/* post-edit empty kuittaus state: same dashed card, explanatory copy */
.sd-signature-voided-title {
    font: 600 13px var(--font-ui);
    color: var(--text);
    margin-bottom: 6px;
}

@media (max-width: 480px) {
    .sd-edit-2col {
        grid-template-columns: 1fr;
    }
}

/* Empty diary and filtered-result actions. */
.sd-empty-actions {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---------- first-run onboarding ---------- */

.sd-onboarding-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 50% -20%, rgba(87,167,124,.14), transparent 38%),
        var(--bg);
}

.sd-onboarding-topbar {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 28px;
    box-sizing: border-box;
    background: rgba(20,24,27,.88);
    border-bottom: 1px solid var(--border);
}

.sd-onboarding-page {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 42px 24px 64px;
}

.sd-onboarding {
    width: min(760px, 100%);
    margin: 0 auto;
}

.sd-onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--text-3);
    font: 600 11px var(--font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.sd-onboarding-progress-track {
    height: 3px;
    margin: 10px 0 28px;
    overflow: hidden;
    border-radius: var(--r-full);
    background: var(--surface-2);
}

.sd-onboarding-progress-track span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent);
}

.sd-onboarding .sd-loading {
    min-height: 280px;
    display: grid;
    place-items: center;
    color: var(--text-3);
    font: 500 13px var(--font-ui);
}

.sd-onboarding-card,
.sd-onboarding-form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-raised);
}

.sd-onboarding-card {
    padding: 42px;
    text-align: center;
}

.sd-onboarding-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    color: var(--accent-fg);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: 16px;
}

.sd-onboarding-icon.success {
    border-radius: 50%;
}

.sd-onboarding-kicker {
    color: var(--accent-fg);
    font: 600 11px var(--font-ui);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.sd-onboarding h1 {
    margin: 8px 0 10px;
    color: var(--text);
    font: 600 25px/1.2 var(--font-ui);
}

.sd-onboarding p {
    margin: 0;
    color: var(--text-2);
    font: 400 14px/1.6 var(--font-ui);
}

.sd-onboarding-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 30px;
}

.sd-onboarding-choice {
    min-height: 108px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 18px;
    text-align: left;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    cursor: pointer;
}

.sd-onboarding-choice:hover {
    color: var(--text);
    border-color: var(--accent-border);
    transform: translateY(-1px);
}

.sd-onboarding-choice:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.sd-onboarding-choice.primary {
    background: var(--accent-soft);
    border-color: var(--accent-border);
}

.sd-onboarding-choice-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--accent-fg);
    background: var(--surface);
    border-radius: 9px;
}

.sd-onboarding-choice strong,
.sd-onboarding-choice small {
    display: block;
}

.sd-onboarding-choice strong {
    color: var(--text);
    font: 600 13.5px var(--font-ui);
}

.sd-onboarding-choice small {
    margin-top: 5px;
    color: var(--text-3);
    font: 400 11.5px/1.4 var(--font-ui);
}

.sd-onboarding-form-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.sd-onboarding-count {
    flex: none;
    padding: 6px 10px;
    color: var(--accent-fg);
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    border-radius: var(--r-full);
    font: 600 11.5px var(--font-num);
}

.sd-onboarding-form-card {
    padding: 24px;
}

.sd-onboarding-form-card .sd-sheet-title {
    display: none;
}

.sd-onboarding-weapon-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 26px;
    text-align: left;
}

.sd-onboarding-weapon-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--accent-fg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sd-onboarding-weapon-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--accent-fg);
    background: var(--accent-soft);
    border-radius: 8px;
}

.sd-onboarding-weapon-row strong,
.sd-onboarding-weapon-row small {
    display: block;
}

.sd-onboarding-weapon-row strong {
    color: var(--text);
    font: 600 13.5px var(--font-ui);
}

.sd-onboarding-weapon-row small {
    margin-top: 3px;
    color: var(--text-3);
    font: 400 11.5px var(--font-ui);
}

.sd-onboarding-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--divider);
}

@media (max-width: 767.98px) {
    .sd-onboarding-topbar {
        height: calc(56px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 18px 0;
    }

    .sd-onboarding-page {
        padding: 24px 16px calc(32px + env(safe-area-inset-bottom));
    }

    .sd-onboarding-progress-track {
        margin-bottom: 18px;
    }

    .sd-onboarding-card {
        padding: 28px 18px 20px;
    }

    .sd-onboarding h1 {
        font-size: 22px;
    }

    .sd-onboarding-choice-grid {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .sd-onboarding-choice {
        min-height: 92px;
        padding: 15px;
    }

    .sd-onboarding-form-head {
        align-items: flex-start;
    }

    .sd-onboarding-form-card {
        padding: 18px 16px;
    }

    .sd-onboarding-actions {
        flex-direction: column-reverse;
    }

    .sd-onboarding-actions .sd-btn {
        width: 100%;
        min-height: 46px;
    }
}

/* ---------- privacy notice ---------- */

.sd-public-topbar {
    justify-content: space-between;
}

.sd-public-back {
    color: #aeb8bd;
    font: 500 13px var(--font-ui);
    text-decoration: none;
}

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

.sd-public-page {
    flex: 1;
    width: 100%;
}

.sd-privacy {
    box-sizing: border-box;
    width: min(960px, 100%);
    margin: 0 auto;
    padding: 52px 28px 80px;
    color: var(--text);
}

.sd-privacy-hero {
    max-width: 760px;
    margin-bottom: 34px;
}

.sd-privacy-kicker {
    color: var(--accent-fg);
    font: 600 11.5px var(--font-num);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sd-privacy h1 {
    margin: 12px 0 14px;
    color: var(--text);
    font: 700 clamp(30px, 5vw, 44px)/1.16 var(--font-ui);
    letter-spacing: -.02em;
}

.sd-privacy-lead {
    max-width: 720px;
    margin: 0;
    color: var(--text-2);
    font: 400 16px/1.7 var(--font-ui);
}

.sd-privacy-updated {
    margin: 16px 0 0;
    color: var(--text-3);
    font: 500 11.5px var(--font-num);
}

.sd-privacy-callout {
    margin: 0 0 36px;
    padding: 20px 22px;
    border: 1px solid rgba(199,143,74,.4);
    border-radius: 12px;
    background: rgba(199,143,74,.08);
}

.sd-privacy-callout h2,
.sd-privacy-section h2 {
    margin: 0 0 12px;
    color: var(--text);
    font: 650 19px/1.3 var(--font-ui);
}

.sd-privacy-callout p,
.sd-privacy-section p,
.sd-privacy-section li {
    color: var(--text-2);
    font: 400 14px/1.7 var(--font-ui);
}

.sd-privacy-callout p {
    margin: 8px 0 0;
}

.sd-privacy-callout strong {
    color: var(--warn);
}

.sd-privacy-section {
    padding: 32px 0;
    border-top: 1px solid var(--border);
}

.sd-privacy-section > p {
    max-width: 800px;
    margin: 0 0 14px;
}

.sd-privacy-section ul {
    max-width: 820px;
    margin: 0;
    padding-left: 22px;
}

.sd-privacy-section li + li {
    margin-top: 10px;
}

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

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

.sd-privacy-card h3,
.sd-privacy-basis h3 {
    margin: 0 0 7px;
    color: var(--text);
    font: 600 14px/1.35 var(--font-ui);
}

.sd-privacy-card p,
.sd-privacy-basis p {
    margin: 0;
}

.sd-privacy-basis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 30px;
    max-width: 840px;
}

.sd-privacy-note {
    margin-top: 16px !important;
    color: var(--text-3) !important;
    font-size: 12.5px !important;
}

.sd-landing-privacy a,
.sd-home-privacy a {
    color: var(--accent-fg);
    font-weight: 600;
}

.sd-landing-privacy {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 28px calc(24px + env(safe-area-inset-bottom));
    text-align: center;
    font: 400 11.5px var(--font-ui);
    color: var(--text-3);
}

.sd-home-privacy {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 24px;
    color: var(--text-3);
    font: 400 11.5px var(--font-ui);
}

.sd-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}

.sd-btn-link:hover {
    text-decoration: none;
}

@media (max-width: 700px) {
    .sd-public-topbar {
        padding: 0 18px;
    }

    .sd-public-back {
        font-size: 12px;
    }

    .sd-privacy {
        padding: 32px 18px 64px;
    }

    .sd-privacy-hero {
        margin-bottom: 26px;
    }

    .sd-privacy-lead {
        font-size: 14.5px;
    }

    .sd-privacy-callout {
        padding: 17px 18px;
    }

    .sd-privacy-section {
        padding: 26px 0;
    }

    .sd-privacy-grid,
    .sd-privacy-basis {
        grid-template-columns: 1fr;
    }

    .sd-privacy-basis {
        gap: 18px;
    }

    .sd-home-privacy {
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }
}
.sd-capture-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.sd-capture-fields:disabled { pointer-events: none; opacity: .75; }
.sd-self-sign-choice { display: flex; align-items: center; gap: 10px; padding: 10px 0 16px; cursor: pointer; }
.sd-self-sign-choice input { width: 20px; height: 20px; }
.sd-signing-location {
    margin: 12px 0 0;
    padding: 8px 0 0;
    border-top: 1px solid var(--divider);
    font: 400 12px/1.5 var(--font-ui);
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.sd-signing-location > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    list-style: none;
    cursor: pointer;
    font-weight: 500;
}

.sd-signing-location > summary::-webkit-details-marker {
    display: none;
}

.sd-signing-location > summary:hover {
    color: var(--text);
}

.sd-signing-location > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 3px;
}

.sd-signing-location > summary svg {
    flex: none;
}

.sd-signing-location[open] > summary svg {
    transform: rotate(90deg);
}

.sd-signing-location-body {
    display: grid;
    gap: 4px;
    padding-top: 4px;
}

.sd-signing-location-fix {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.sd-signing-location p {
    margin: 0;
}

.sd-signing-location a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sd-signing-location-empty {
    color: var(--text-3);
}