/* worktally design system — ported from docs/superpowers/specs/2026-10-26-ledger-design-system-reference/
   (tokens.json + components/bundle.css). Token names match tokens.json exactly so the two stay diffable. */

/* ---------- fonts (self-hosted, latin + latin-ext for Polish notes) ---------- */

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/cormorant-garamond/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/cormorant-garamond/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/cormorant-garamond/cormorant-garamond-latin-ext-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/cormorant-garamond/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/cormorant-garamond/cormorant-garamond-latin-ext-500-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/cormorant-garamond/cormorant-garamond-latin-500-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/manrope/manrope-latin-ext-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/manrope/manrope-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/manrope/manrope-latin-ext-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/manrope/manrope-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/manrope/manrope-latin-ext-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/manrope/manrope-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    src: url('lib/fonts/manrope/manrope-latin-ext-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    src: url('lib/fonts/manrope/manrope-latin-700-normal.woff2') format('woff2');
}

/* ---------- tokens: Krem (light, default) ---------- */

:root, [data-theme="light"] {
    --palette-forest: #0a3b35;
    --palette-moss: #2a6151;
    --palette-laurel: #b2b7aa;
    --palette-cream: #fcf7f0;
    --palette-gold: #d8c2a4;

    --surface: var(--palette-cream);
    --surface-raised: #fffdf9;
    --surface-sunken: #f4ede2;
    --line: #e6ddce;
    --line-strong: #7a8277;
    --ink: var(--palette-forest);
    --ink-muted: #4a5a53;
    --ink-subtle: #6b746c;
    --primary: var(--palette-forest);
    --primary-hover: var(--palette-moss);
    --on-primary: var(--palette-cream);
    --accent: var(--palette-gold);
    --accent-ink: #876434;
    --inverse: var(--palette-forest);
    --on-inverse: var(--palette-cream);
    --inverse-accent: var(--palette-gold);
    --success: var(--palette-moss);
    --success-soft: #e3ece6;
    --danger: #9c3d2a;
    --danger-soft: #f6e4dd;
    --focus: var(--palette-moss);

    --shadow-sm: 0 1px 2px rgba(10, 59, 53, 0.06);
    --shadow-md: 0 18px 40px -18px rgba(10, 59, 53, 0.22);

    --ink-rgb: 10, 59, 53;
    --danger-rgb: 156, 61, 42;
    --success-rgb: 42, 97, 81;
    /* Data URIs can't read CSS variables, so each theme carries its own literal-colored glyphs. */
    --wt-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23876434' stroke-linecap='square' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    --wt-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fcf7f0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --wt-radio: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fcf7f0'/%3e%3c/svg%3e");
    color-scheme: light;
}

/* ---------- tokens: Las (dark) — on [data-theme="dark"] (the sidebar, always) and for OS dark mode ---------- */

[data-theme="dark"] {
    --surface: #06231f;
    --surface-raised: var(--palette-forest);
    --surface-sunken: #041a17;
    --line: #1f4a43;
    --line-strong: #6a877c;
    --ink: var(--palette-cream);
    --ink-muted: var(--palette-laurel);
    --ink-subtle: #9aa59b;
    --primary: var(--palette-gold);
    --primary-hover: #e6d5bc;
    --on-primary: var(--palette-forest);
    --accent-ink: var(--palette-gold);
    --inverse: var(--palette-cream);
    --on-inverse: var(--palette-forest);
    --inverse-accent: var(--palette-moss);
    --success: #8fc3ae;
    --success-soft: #123f38;
    --danger: #e8957f;
    --danger-soft: #3a2620;
    --focus: var(--palette-gold);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    --ink-rgb: 252, 247, 240;
    --danger-rgb: 232, 149, 127;
    --success-rgb: 143, 195, 174;
    --wt-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d8c2a4' stroke-linecap='square' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    --wt-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a3b35' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --wt-radio: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230a3b35'/%3e%3c/svg%3e");
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface: #06231f;
        --surface-raised: var(--palette-forest);
        --surface-sunken: #041a17;
        --line: #1f4a43;
        --line-strong: #6a877c;
        --ink: var(--palette-cream);
        --ink-muted: var(--palette-laurel);
        --ink-subtle: #9aa59b;
        --primary: var(--palette-gold);
        --primary-hover: #e6d5bc;
        --on-primary: var(--palette-forest);
        --accent-ink: var(--palette-gold);
        --inverse: var(--palette-cream);
        --on-inverse: var(--palette-forest);
        --inverse-accent: var(--palette-moss);
        --success: #8fc3ae;
        --success-soft: #123f38;
        --danger: #e8957f;
        --danger-soft: #3a2620;
        --focus: var(--palette-gold);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
        --ink-rgb: 252, 247, 240;
        --danger-rgb: 232, 149, 127;
        --success-rgb: 143, 195, 174;
        --wt-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d8c2a4' stroke-linecap='square' stroke-width='1.5' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
        --wt-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a3b35' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
        --wt-radio: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230a3b35'/%3e%3c/svg%3e");
        color-scheme: dark;
    }
}

/* Theme-independent tokens, plus Bootstrap's root variables. These are declared on every themed
   element (not just :root) because a custom property that references another one is resolved where
   it's declared — on :root alone, --bs-body-color would keep the Krem ink inside the Las sidebar. */
:root, [data-theme] {
    --font-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
    --font-sans: Manrope, "Segoe UI", system-ui, sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    --radius-xs: 2px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-pill: 999px;

    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 15px;
    --bs-body-line-height: 24px;
    --bs-body-bg: var(--surface);
    --bs-body-color: var(--ink);
    --bs-body-color-rgb: var(--ink-rgb);
    --bs-emphasis-color: var(--ink);
    --bs-emphasis-color-rgb: var(--ink-rgb);
    --bs-secondary-color: var(--ink-muted);
    --bs-tertiary-color: var(--ink-subtle);
    --bs-heading-color: var(--ink);
    --bs-link-color: var(--ink);
    --bs-link-color-rgb: var(--ink-rgb);
    --bs-link-hover-color: var(--ink);
    --bs-link-hover-color-rgb: var(--ink-rgb);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-xs);
    --bs-border-radius-lg: var(--radius-md);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-form-invalid-color: var(--danger);
    --bs-form-invalid-border-color: var(--danger);
    --bs-form-valid-color: var(--success);
    --bs-form-valid-border-color: var(--line-strong);
    --bs-focus-ring-color: var(--focus);
}

/* ---------- base ---------- */

html, body {
    font-family: var(--font-sans);
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-ink);
    text-underline-offset: 4px;
}

a:hover {
    text-decoration-color: currentColor;
}

h1, h2, h3, h4 {
    color: var(--ink);
    text-wrap: balance;
}

h1 {
    font: 500 48px/52px var(--font-display);
    letter-spacing: -.01em;
    margin: 0 0 var(--space-2);
}

h1 em, h2 em {
    font-style: italic;
    color: var(--accent-ink);
}

h2 {
    font: 500 30px/36px var(--font-display);
    margin: 0 0 var(--space-4);
}

h3 {
    font: 600 22px/28px var(--font-display);
    margin: 0 0 var(--space-2);
}

h4 {
    font: 600 15px/22px var(--font-sans);
}

h1:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

button, a, input, select, textarea {
    touch-action: manipulation;
}

.text-secondary, .text-body-secondary, .text-muted {
    color: var(--ink-muted) !important;
}

hr {
    border-color: var(--line);
    opacity: 1;
}

code, kbd {
    color: var(--ink);
}

.eyebrow {
    font: 700 11px/16px var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-ink);
    margin: 0;
}

.serif {
    font-family: var(--font-display);
}

.tabular {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    h1 {
        font-size: 38px;
        line-height: 42px;
    }
}

/* ---------- buttons: engraved labels, square corners ---------- */

.btn {
    --bs-btn-font-family: var(--font-sans);
    --bs-btn-font-size: 11.5px;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 16px;
    --bs-btn-padding-y: 0;
    --bs-btn-padding-x: var(--space-6);
    --bs-btn-border-radius: var(--radius-xs);
    --bs-btn-focus-box-shadow: none;
    --bs-btn-disabled-opacity: .4;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, gap .2s ease;
}

.btn-sm {
    --bs-btn-padding-x: var(--space-4);
    --bs-btn-font-size: 10.5px;
    min-height: 34px;
}

.btn-lg {
    --bs-btn-padding-x: var(--space-6);
    --bs-btn-font-size: 12px;
    min-height: 48px;
}

.btn:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    box-shadow: none;
}

.btn-primary {
    --bs-btn-color: var(--on-primary);
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: var(--on-primary);
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-hover);
    --bs-btn-active-color: var(--on-primary);
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-hover);
    --bs-btn-disabled-color: var(--on-primary);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary, .btn-outline-secondary, .btn-secondary, .btn-warning, .btn-outline-warning, .btn-light, .btn-outline-dark {
    --bs-btn-color: var(--ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-color: var(--surface);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-color: var(--ink);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ink);
}

/* Row actions are underlined text links, not boxes; danger is the same in brick, never a red fill. */
.btn-link, .btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--ink-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ink);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--ink-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-padding-x: 0;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 18px;
    min-height: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    letter-spacing: .01em;
    text-transform: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    text-decoration-color: var(--accent);
}

.btn-link:hover {
    text-decoration-color: currentColor;
}

.btn-danger, .btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-hover-color: var(--danger);
    --bs-btn-active-color: var(--danger);
    --bs-btn-disabled-color: var(--danger);
    text-decoration-color: var(--danger);
}

/* The serif arrow on the view's primary action ("Add entry →"). */
.btn-arrow {
    font: 400 16px/1 var(--font-display);
    letter-spacing: 0;
    color: var(--inverse-accent);
    transition: transform .2s ease;
}

.btn:hover .btn-arrow {
    transform: translateX(3px);
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
}

/* ---------- fields: ledger lines, no boxes ---------- */

.form-label, .col-form-label {
    font: 700 10.5px/16px var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 2px;
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.field-optional {
    font: italic 500 13px/16px var(--font-display);
    letter-spacing: 0;
    text-transform: none;
    color: var(--accent-ink);
}

.form-text, .field-hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 18px;
    color: var(--ink-subtle);
}

.form-control, .form-select {
    font: 500 17px/26px var(--font-sans);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 8px 0 9px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control::placeholder {
    color: var(--ink-subtle);
    font-weight: 400;
}

.form-control:hover, .form-select:hover {
    border-bottom-color: var(--ink);
}

.form-control:focus, .form-select:focus {
    color: var(--ink);
    background-color: transparent;
    outline: none;
    border-bottom-color: var(--focus);
    box-shadow: 0 1px 0 0 var(--focus);
}

.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: transparent;
    color: var(--ink-muted);
    border-bottom-style: dashed;
    border-bottom-color: var(--line-strong);
}

.form-control::-webkit-calendar-picker-indicator {
    opacity: .55;
    cursor: pointer;
}

textarea.form-control {
    min-height: 112px;
    resize: vertical;
    line-height: 28px;
    padding-top: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--line) 27px, var(--line) 28px);
    background-attachment: local;
}

.form-select {
    --bs-form-select-bg-img: var(--wt-chevron);
    padding-right: 28px;
    background-position: right 2px center;
    background-size: 16px 16px;
    cursor: pointer;
}

.form-select option {
    color: #0a3b35;
    background: #fcf7f0;
}

/* Browsers paint autofilled values with their own forced colors; repaint them on the ledger line. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--surface-raised) inset;
    box-shadow: 0 0 0 1000px var(--surface-raised) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.form-check-input {
    background-color: transparent;
    border: 1px solid var(--line-strong);
}

.form-check-input[type="checkbox"] {
    border-radius: var(--radius-xs);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: var(--wt-check);
}

.form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: var(--wt-radio);
}

.form-check-input:focus {
    border-color: var(--focus);
    box-shadow: none;
}

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

.form-check-label {
    color: var(--ink);
}

.validation-message, .validation-errors, .invalid-feedback, .text-danger {
    color: var(--danger) !important;
    font-size: 12.5px;
    line-height: 18px;
    margin-top: 6px;
}

.validation-errors {
    padding-left: 1.1rem;
}

.form-control.invalid, .form-select.invalid {
    border-bottom-color: var(--danger);
}

/* Search rows: a ledger line with its button beside it, not a fused Bootstrap group. */
.input-group {
    gap: var(--space-4);
    align-items: flex-end;
    flex-wrap: nowrap;
}

.input-group > .form-control, .input-group > .btn {
    border-radius: 0 !important;
    margin-left: 0 !important;
}

.input-group > .btn {
    border-radius: var(--radius-xs) !important;
}

.field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ---------- surfaces ---------- */

.form-panel, .wt-card, .card {
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

.form-panel {
    max-width: 38rem;
    align-self: start;
}

.form-panel > h2, .wt-card > h2 {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: var(--space-5);
}

@media (max-width: 480px) {
    .form-panel, .wt-card {
        padding: var(--space-5);
    }
}

/* ---------- page header ---------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.page-header h1 {
    margin: 10px 0 0;
}

.page-header-subtitle {
    color: var(--ink-muted);
    margin: var(--space-2) 0 0;
    max-width: 60ch;
}

.page-header-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.page-notice, .status-message {
    margin-bottom: var(--space-6);
}

/* ---------- tables ---------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink);
    --bs-table-border-color: var(--line);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--surface-sunken);
    --bs-table-hover-color: var(--ink);
    color: var(--ink);
}

.table > thead th {
    background: var(--surface-sunken);
    font: 700 9.5px/14px var(--font-sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    border-bottom: 0;
    padding-top: 9px;
    padding-bottom: 9px;
}

.table > thead th:first-child {
    border-top-left-radius: var(--radius-xs);
    border-bottom-left-radius: var(--radius-xs);
}

.table > thead th:last-child {
    border-top-right-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
}

.table td {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.table-actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Status words ("Active", "Archived") as engraved pills; the dot is secondary to the word. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    font: 700 9.5px/14px var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    vertical-align: middle;
}

.badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: var(--radius-pill);
    background: currentColor;
}

.badge.text-bg-light {
    background-color: transparent !important;
    color: var(--success) !important;
    border-color: var(--success);
}

.badge.text-bg-secondary {
    background-color: transparent !important;
    color: var(--ink-muted) !important;
}

/* ---------- alerts: anything not yet a <Notice> reads as one ---------- */

.alert {
    --bs-alert-bg: var(--inverse);
    --bs-alert-color: var(--on-inverse);
    --bs-alert-border-color: var(--inverse);
    --bs-alert-link-color: var(--on-inverse);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 20px;
    max-width: 640px;
}

.alert a {
    color: inherit;
    text-decoration-color: var(--inverse-accent);
}

.alert-danger, .alert-warning {
    --bs-alert-bg: var(--danger-soft);
    --bs-alert-color: var(--danger);
    --bs-alert-border-color: var(--danger);
    --bs-alert-link-color: var(--danger);
}

.alert-danger a, .alert-warning a {
    text-decoration-color: currentColor;
}

.alert p:last-child {
    margin-bottom: 0;
}

/* ---------- Duration ("1h 05m"): unit letters in italic gold ---------- */

.wt-dur {
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
    letter-spacing: .01em;
}

.wt-dur i {
    font-style: italic;
    color: var(--accent-ink);
    margin: 0 .12em 0 .04em;
    font-size: .86em;
}

/* ---------- Logo ---------- */

.wt-logo {
    display: inline-flex;
    align-items: center;
    gap: .32em;
    color: var(--ink);
    text-decoration: none;
}

.wt-logo svg {
    display: block;
    flex: none;
}

.wt-logo__tile {
    fill: var(--palette-forest);
}

.wt-logo__inner {
    fill: none;
    stroke: var(--palette-gold);
    stroke-opacity: .5;
}

.wt-logo__ticks {
    stroke: var(--palette-cream);
}

.wt-logo__slash {
    stroke: var(--palette-gold);
}

.wt-logo--glyph .wt-logo__ticks {
    stroke: var(--ink);
}

.wt-logo--glyph .wt-logo__slash {
    stroke: var(--accent-ink);
}

.wt-logo__word {
    font: 600 1em/1 var(--font-display);
    letter-spacing: -.01em;
}

/* ---------- Notice: the inverse seal ---------- */

.wt-notice {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 20px;
    background: var(--inverse);
    color: var(--on-inverse);
    box-shadow: var(--shadow-md);
    max-width: 640px;
}

.wt-notice__mark {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--radius-pill);
    border: 1px solid var(--inverse-accent);
    color: var(--inverse-accent);
    display: grid;
    place-items: center;
    font: 600 13px/1 var(--font-sans);
}

.wt-notice__body {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wt-notice__title {
    font: italic 500 17px/20px var(--font-display);
    margin-right: 4px;
}

.wt-notice__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.wt-notice__action {
    background: none;
    border: 0;
    padding: 2px 0;
    font: 700 10.5px/16px var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--inverse-accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}

.wt-notice__action:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.wt-notice__close {
    background: none;
    border: 0;
    color: inherit;
    font: 400 22px/1 var(--font-display);
    cursor: pointer;
    opacity: .7;
    padding: 0 4px;
}

.wt-notice__close:hover {
    opacity: 1;
}

.wt-notice__action:focus-visible, .wt-notice__close:focus-visible {
    outline: 2px solid var(--inverse-accent);
    outline-offset: 3px;
}

.wt-notice--danger {
    background: var(--danger-soft);
    color: var(--danger);
    box-shadow: none;
    border: 1px solid var(--danger);
}

.wt-notice--danger .wt-notice__mark {
    border-color: var(--danger);
    color: var(--danger);
}

.wt-notice--danger .wt-notice__action {
    color: var(--danger);
}

.wt-notice--danger .wt-notice__action:focus-visible, .wt-notice--danger .wt-notice__close:focus-visible {
    outline-color: var(--danger);
}

@media (max-width: 520px) {
    .wt-notice {
        flex-wrap: wrap;
    }

    .wt-notice__actions {
        width: 100%;
        padding-left: 42px;
    }
}

/* ---------- DurationField: one dial ---------- */

.wt-dfield {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wt-dfield__dial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
    padding: 10px 0;
}

.wt-dfield__value {
    font: 500 44px/48px var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--ink);
    letter-spacing: -.01em;
    padding: 0 4px;
    border-radius: var(--radius-xs);
    cursor: default;
}

.wt-dfield__value i {
    font-style: italic;
    font-size: .55em;
    color: var(--accent-ink);
    margin: 0 6px 0 3px;
}

.wt-dfield__value:focus {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.wt-dfield__step {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--ink);
    font: 400 22px/1 var(--font-display);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color .2s ease, color .2s ease;
}

.wt-dfield__step:hover:not(:disabled) {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
}

.wt-dfield__step:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.wt-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wt-chip {
    font: 600 12px/16px var(--font-sans);
    font-variant-numeric: tabular-nums;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}

.wt-chip:hover:not(:disabled) {
    border-color: var(--line-strong);
    color: var(--ink);
}

.wt-chip[aria-pressed="true"] {
    background: var(--inverse);
    border-color: var(--inverse);
    color: var(--on-inverse);
}

.wt-chip:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- TotalSummary ---------- */

.wt-total {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-5) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin: 0 0 var(--space-4);
}

.wt-total__value {
    font: 500 48px/48px var(--font-display);
    letter-spacing: -.01em;
    color: var(--ink);
}

.wt-total__value i {
    font-size: .6em;
    margin: 0 4px 0 2px;
}

.wt-total__meta {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
}

.wt-total__meta b {
    color: var(--ink);
    font-weight: 600;
}

/* ---------- EntryList: the day ledger ---------- */

.wt-ledger, .wt-day__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wt-day {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line);
}

.wt-day:first-child {
    border-top: 1px solid var(--ink);
}

.wt-day__date {
    margin: 0;
    font: inherit;
}

.wt-day__num {
    display: block;
    font: 500 44px/40px var(--font-display);
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--ink);
}

.wt-day__dm {
    display: block;
    font: 700 10px/14px var(--font-sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 6px;
}

.wt-day__sum {
    font: italic 500 16px/20px var(--font-display);
    color: var(--accent-ink);
    margin: 10px 0 0;
}

.wt-day__sum .wt-dur i {
    color: inherit;
}

.wt-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px var(--space-5);
    padding: 4px 0 14px;
}

.wt-item + .wt-item {
    border-top: 1px dashed var(--line);
    padding-top: 14px;
}

.wt-item__project {
    font: 600 15px/22px var(--font-sans);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    overflow-wrap: anywhere;
}

.wt-item__project::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    flex: none;
}

.wt-item__archived {
    font: italic 500 14px/20px var(--font-display);
    color: var(--ink-muted);
}

.wt-item__note {
    grid-column: 1;
    grid-row: 2;
    font-size: 14px;
    line-height: 21px;
    color: var(--ink-muted);
    padding-left: 16px;
    max-width: 62ch;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wt-item__dur {
    grid-column: 2;
    grid-row: 1;
    font: 500 22px/22px var(--font-display);
    text-align: right;
}

.wt-item__acts {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    align-items: flex-start;
}

.wt-ledger__empty {
    padding: var(--space-7) 0;
    text-align: center;
    font: italic 500 20px/26px var(--font-display);
    color: var(--ink-muted);
    border-top: 1px solid var(--ink);
    margin: 0;
}

@media (max-width: 576px) {
    .wt-day {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .wt-day__date {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
    }

    .wt-day__sum {
        margin: 0;
    }
}

/* ---------- language switch ("PL · EN") ---------- */

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font: 700 10.5px/16px var(--font-sans);
    letter-spacing: .16em;
}

.lang-switch a {
    color: var(--ink-muted);
    text-decoration: none;
    padding: 2px 0;
}

.lang-switch a + a::before {
    content: '·';
    display: inline-block; /* keeps the current language's underline off the separator */
    color: var(--ink-subtle);
    margin-right: var(--space-2);
}

.lang-switch a:hover {
    color: var(--ink);
}

.lang-switch a.is-current {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 5px;
}

/* ---------- empty states and auth helpers ---------- */

.empty-state {
    padding: var(--space-7) var(--space-4);
    text-align: center;
    border-top: 1px solid var(--ink);
}

.empty-state h2, .empty-state h3 {
    font: italic 500 22px/28px var(--font-display);
    color: var(--ink-muted);
    margin-bottom: var(--space-2);
}

.empty-state p {
    margin-bottom: 0;
    color: var(--ink-muted);
}

.empty-state p:only-child {
    font: italic 500 20px/26px var(--font-display);
}

.empty-state .btn {
    margin-top: var(--space-4);
}

.email-verified {
    color: var(--success);
    letter-spacing: .12em;
}

.auth-subtitle {
    color: var(--ink-muted);
    margin-bottom: var(--space-6);
}

.auth-footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 14px;
    color: var(--ink-muted);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Error and not-found pages: a short statement and a way back. */
.status-page {
    max-width: 40rem;
    padding: var(--space-7) 0;
}

.status-page h1 {
    margin-top: var(--space-3);
}

.status-page-lead {
    font-size: 17px;
    line-height: 28px;
    color: var(--ink-muted);
    margin: var(--space-4) 0 var(--space-6);
}

.status-page-meta {
    font-size: 13px;
    color: var(--ink-subtle);
    margin: 0 0 var(--space-6);
    overflow-wrap: anywhere;
}

/* The font shorthand resets font-variant-numeric, so every serif figure re-asserts lining, tabular
   digits here, last in the cascade. Cormorant's default old-style figures read "1h oom". */
.wt-dur, .wt-dfield__value, .wt-day__num, .wt-total__value, .wt-total__meta, .wt-day__sum, .tabular {
    font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Blazor plumbing ---------- */

.blazor-error-boundary {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: 1rem;
    color: var(--danger);
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

:lang(pl) .blazor-error-boundary::after {
    content: "Wystąpił błąd."
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}