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

:root {
    color-scheme: light dark;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: clamp(14px, 0.875rem + 0.25vw, 16px);

    /* Page-level colors (default light) */
    --page-bg: #f5f5f7;
    --page-fg: #1c1c1e;
    --page-muted: #6b6b6f;
    --page-text-secondary: #4a4a4f;
    --page-card-bg: #ffffff;
    --page-card-shadow: rgba(0, 0, 0, 0.08);
    --page-shell-shadow: rgba(0, 0, 0, 0.12);
    --page-accent: #0060df;
    --page-accent-hover: #0250bb;
    --page-accent-outline-hover: rgba(0, 96, 223, 0.08);
    --page-error: #c0392b;
}

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--page-fg);
    overflow-x: hidden;
}

/* Shared button */

.button {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background: var(--page-accent);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--page-accent-hover);
}

.button-outline {
    background: transparent;
    border-color: var(--page-accent);
    color: var(--page-accent);
}

.button-outline:hover {
    background: var(--page-accent-outline-hover);
}

/* Small centered "card" pages: checking session / logged in */

.centered-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.shell {
    max-width: 28rem;
    padding: 2rem;
    border-radius: 0.75rem;
    background: var(--page-card-bg);
    box-shadow: 0 1px 3px var(--page-shell-shadow);
    text-align: center;
}

.status {
    color: var(--page-muted);
}

.auth {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

/* Landing page (public, logged-out) — header reuses .dashboard-topbar/.dashboard-wordmark
   from the authenticated app so logged-out and logged-in states match. */

.hero,
.pitch,
.expansion,
.deal {
    max-width: 42rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.deal {
    padding-bottom: 5rem;
}

.hero h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1.25rem;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.hero-lede {
    font-size: 1.1rem;
    color: var(--page-text-secondary);
    margin: 0 0 0.75rem;
}

.hero-tagline {
    font-weight: 600;
    margin: 0;
}

.pitch h2,
.services h2,
.expansion h2,
.deal h2 {
    font-size: 1.5rem;
    margin: 0 0 1.25rem;
    letter-spacing: -0.01em;
}

.pitch p,
.expansion p,
.deal p {
    color: var(--page-text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.pitch-emphasis,
.deal-emphasis {
    color: var(--page-fg);
}

.services {
    max-width: 64rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.service-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
    text-align: left;
}

.service-card {
    padding: 1.25rem;
    border-radius: 0.6rem;
    background: var(--page-card-bg);
    box-shadow: 0 1px 3px var(--page-card-shadow);
}

.service-card h3 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
}

.service-card p {
    margin: 0;
    color: var(--page-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.expansion-list {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.deal-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem auto;
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

.deal-list li {
    color: var(--page-text-secondary);
}

/* ── Explicit dark mode (data-mode="dark") ── */

[data-mode="dark"] {
    --page-bg: #1c1c1e;
    --page-fg: #f5f5f7;
    --page-muted: #a1a1a6;
    --page-text-secondary: #a1a1a6;
    --page-card-bg: #2c2c2e;
    --page-card-shadow: rgba(0, 0, 0, 0.3);
    --page-shell-shadow: rgba(0, 0, 0, 0.3);
    --page-accent: #4c9aff;
    --page-accent-hover: #6aadff;
    --page-accent-outline-hover: rgba(76, 154, 255, 0.12);
}

/* ── Auto dark mode (follows system preference) ── */

@media (prefers-color-scheme: dark) {
    :root:not([data-mode="light"]):not([data-mode="dark"]) {
        --page-bg: #1c1c1e;
        --page-fg: #f5f5f7;
        --page-muted: #a1a1a6;
        --page-text-secondary: #a1a1a6;
        --page-card-bg: #2c2c2e;
        --page-card-shadow: rgba(0, 0, 0, 0.3);
        --page-shell-shadow: rgba(0, 0, 0, 0.3);
        --page-accent: #4c9aff;
        --page-accent-hover: #6aadff;
        --page-accent-outline-hover: rgba(76, 154, 255, 0.12);
    }
}

/* ── Catppuccin Latte (light) ── */

[data-theme="catppuccin"] {
    --page-bg: #eff1f5;
    --page-fg: #4c4f69;
    --page-muted: #6c6f85;
    --page-text-secondary: #5c5f77;
    --page-card-bg: #e6e9ef;
    --page-card-shadow: rgba(0, 4, 20, 0.06);
    --page-shell-shadow: rgba(0, 4, 20, 0.08);
    --page-accent: #1e66f5;
    --page-accent-hover: #2a6ef7;
    --page-accent-outline-hover: rgba(30, 102, 245, 0.08);
    --page-error: #d20f39;
}

/* ── Catppuccin Mocha (explicit dark) ── */

[data-theme="catppuccin"][data-mode="dark"] {
    --page-bg: #1e1e2e;
    --page-fg: #cdd6f4;
    --page-muted: #a6adc8;
    --page-text-secondary: #bac2de;
    --page-card-bg: #313244;
    --page-card-shadow: rgba(0, 0, 0, 0.3);
    --page-shell-shadow: rgba(0, 0, 0, 0.35);
    --page-accent: #89b4fa;
    --page-accent-hover: #a0c4fb;
    --page-accent-outline-hover: rgba(137, 180, 250, 0.12);
    --page-error: #f38ba8;
}

/* ── Catppuccin Mocha (auto dark) ── */

@media (prefers-color-scheme: dark) {
    [data-theme="catppuccin"]:not([data-mode="light"]):not([data-mode="dark"]) {
        --page-bg: #1e1e2e;
        --page-fg: #cdd6f4;
        --page-muted: #a6adc8;
        --page-text-secondary: #bac2de;
        --page-card-bg: #313244;
        --page-card-shadow: rgba(0, 0, 0, 0.3);
        --page-shell-shadow: rgba(0, 0, 0, 0.35);
        --page-accent: #89b4fa;
        --page-accent-hover: #a0c4fb;
        --page-accent-outline-hover: rgba(137, 180, 250, 0.12);
        --page-error: #f38ba8;
    }
}

/* Dashboard (authenticated home): "the panel"
   Identity is drawn as a foundation strip, not a peer card: every other
   module depends on it, so the layout says that structurally. Every module
   is a stub, the dim dot and "Not connected" status are literally true,
   not decoration. Labels use a monospace utility face (patch-panel
   nomenclature); no webfonts are loaded, in keeping with not phoning home. */

.dashboard {
    --db-ink: #1c1c1e;
    --db-muted: #6b6b6f;
    --db-paper: #f5f5f7;
    --db-rail: #1b1f1c;
    --db-rail-ink: #f5f5f0;
    --db-rail-muted: rgba(245, 245, 240, 0.75);
    --db-rail-border: rgba(245, 245, 240, 0.25);
    --db-accent: #a8672e;
    --db-accent-glow: rgba(168, 103, 46, 0.18);
    --db-line: #dcdcd6;
    --db-dot: #9a9d95;
    --db-card-bg: #ffffff;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--db-paper);
    color: var(--db-ink);
}

.dashboard-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--db-rail);
    color: var(--db-rail-ink);
}

.dashboard-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 0.35rem;
}

.dashboard-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--db-rail-ink);
    border-radius: 1px;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.dashboard-hamburger:hover {
    background: rgba(245, 245, 240, 0.08);
}

.dashboard-wordmark {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    opacity: 0.85;
    color: inherit;
    text-decoration: none;
}

.dashboard-nav {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.dashboard-nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--db-rail-muted);
    text-decoration: none;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.dashboard-nav-link:hover {
    color: var(--db-rail-ink);
}

.dashboard-account {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-email {
    font-size: 0.85rem;
    color: var(--db-rail-muted);
}

.dashboard-signout {
    border: 1px solid var(--db-rail-border);
    background: transparent;
    color: var(--db-rail-ink);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    min-height: 44px;
    border-radius: 0.35rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.dashboard-signout:hover {
    border-color: var(--db-rail-muted);
    background: rgba(245, 245, 240, 0.08);
}

.dashboard-signout:focus-visible {
    outline: 2px solid var(--db-accent);
    outline-offset: 2px;
}

.dashboard-body {
    flex: 1;
    max-width: 68rem;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.75rem 4rem;
}

.dashboard-greeting {
    margin-bottom: 2.5rem;
}

.dashboard-title {
    font-size: 1.9rem;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}

.dashboard-subtitle {
    font-size: 1.05rem;
    color: var(--db-muted);
    margin: 0;
}

.eyebrow {
    display: block;
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--db-muted);
    margin-bottom: 0.6rem;
}

.foundation {
    margin-bottom: 2.5rem;
}

.foundation-card {
    border: 1px solid var(--db-line);
    border-left: 3px solid var(--db-accent);
    border-radius: 0.6rem;
    background: var(--db-card-bg);
    padding: 1.1rem 1.4rem 1.3rem;
}

.foundation-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.foundation-name {
    font-weight: 700;
    font-size: 1.05rem;
    margin-right: auto;
}

.foundation-description {
    color: var(--db-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0 0 0.9rem;
    max-width: 46rem;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.module-card {
    border: 1px solid var(--db-line);
    border-radius: 0.6rem;
    background: var(--db-card-bg);
    padding: 1.1rem 1.2rem 1.2rem;
}

.module-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.module-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--db-dot);
    box-shadow: 0 0 0 3px var(--db-accent-glow);
}

@media (prefers-reduced-motion: no-preference) {
    .module-dot {
        animation: dashboard-dot-idle 3.5s ease-in-out infinite;
    }
}

@keyframes dashboard-dot-idle {
    0%,
    100% {
        opacity: 0.55;
    }

    50% {
        opacity: 1;
    }
}

.module-code {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--db-muted);
}

.module-name {
    font-weight: 700;
    font-size: 1.02rem;
    margin: 0 0 0.4rem;
}

.module-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--db-muted);
    margin: 0 0 0.8rem;
}

.feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.feature-tag {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: var(--db-muted);
    background: var(--db-paper);
    border: 1px solid var(--db-line);
    border-radius: 0.3rem;
    padding: 0.18rem 0.45rem;
}

.module-status {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--db-dot);
}

.dashboard-footer {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--db-muted);
    text-align: center;
    padding: 1.25rem;
    opacity: 0.7;
}

/* ── Dashboard: explicit dark mode ── */

[data-mode="dark"] .dashboard {
    --db-ink: #f5f5f7;
    --db-muted: #a1a1a6;
    --db-paper: #1c1c1e;
    --db-rail: #111311;
    --db-rail-ink: #f5f5f0;
    --db-rail-muted: rgba(245, 245, 240, 0.75);
    --db-rail-border: rgba(245, 245, 240, 0.25);
    --db-accent: #d99a4e;
    --db-accent-glow: rgba(217, 154, 78, 0.22);
    --db-line: #3a3a3c;
    --db-dot: #6f7268;
    --db-card-bg: #2c2c2e;
}

/* ── Dashboard: auto dark mode ── */

@media (prefers-color-scheme: dark) {
    html:not([data-mode="light"]):not([data-mode="dark"]) .dashboard {
        --db-ink: #f5f5f7;
        --db-muted: #a1a1a6;
        --db-paper: #1c1c1e;
        --db-rail: #111311;
        --db-rail-ink: #f5f5f0;
        --db-rail-muted: rgba(245, 245, 240, 0.75);
        --db-rail-border: rgba(245, 245, 240, 0.25);
        --db-accent: #d99a4e;
        --db-accent-glow: rgba(217, 154, 78, 0.22);
        --db-line: #3a3a3c;
        --db-dot: #6f7268;
        --db-card-bg: #2c2c2e;
    }
}

/* ── Dashboard: Catppuccin Latte (light) ── */

[data-theme="catppuccin"] .dashboard {
    --db-ink: #4c4f69;
    --db-muted: #6c6f85;
    --db-paper: #eff1f5;
    --db-rail: #dce0e8;
    --db-rail-ink: #4c4f69;
    --db-rail-muted: rgba(76, 79, 105, 0.7);
    --db-rail-border: rgba(76, 79, 105, 0.2);
    --db-accent: #fe640b;
    --db-accent-glow: rgba(254, 100, 11, 0.15);
    --db-line: #ccd0da;
    --db-dot: #9ca0b0;
    --db-card-bg: #e6e9ef;
}

/* ── Dashboard: Catppuccin Mocha (explicit dark) ── */

[data-theme="catppuccin"][data-mode="dark"] .dashboard {
    --db-ink: #cdd6f4;
    --db-muted: #a6adc8;
    --db-paper: #1e1e2e;
    --db-rail: #181825;
    --db-rail-ink: #cdd6f4;
    --db-rail-muted: rgba(205, 214, 244, 0.7);
    --db-rail-border: rgba(205, 214, 244, 0.2);
    --db-accent: #fab387;
    --db-accent-glow: rgba(250, 179, 135, 0.18);
    --db-line: #313244;
    --db-dot: #585b70;
    --db-card-bg: #313244;
}

/* ── Dashboard: Catppuccin Mocha (auto dark) ── */

@media (prefers-color-scheme: dark) {
    html[data-theme="catppuccin"]:not([data-mode="light"]):not(
            [data-mode="dark"]
        )
        .dashboard {
        --db-ink: #cdd6f4;
        --db-muted: #a6adc8;
        --db-paper: #1e1e2e;
        --db-rail: #181825;
        --db-rail-ink: #cdd6f4;
        --db-rail-muted: rgba(205, 214, 244, 0.7);
        --db-rail-border: rgba(205, 214, 244, 0.2);
        --db-accent: #fab387;
        --db-accent-glow: rgba(250, 179, 135, 0.18);
        --db-line: #313244;
        --db-dot: #585b70;
        --db-card-bg: #313244;
    }
}

/* ── Responsive: Mobile-first overrides ────────────────────────────── */

/* Mobile (up to 48rem / 768px): hamburger nav, stacked layouts, touch targets */
@media (max-width: 48rem) {
    .dashboard-body {
        padding: 0 1rem 3rem;
    }

    .dashboard-hamburger {
        display: flex;
    }

    .dashboard-nav {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 3;
        padding-top: 0.5rem;
        border-top: 1px solid var(--db-rail-border);
        gap: 0;
    }

    .dashboard-nav.is-open {
        display: flex;
    }

    .dashboard-nav-link {
        padding: 0.75rem 0;
        min-height: 44px;
        border-bottom: 1px solid var(--db-rail-border);
    }

    .dashboard-account {
        gap: 0.5rem;
    }

    .dashboard-email {
        font-size: 0.78rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 40vw;
    }

    .foundation-name {
        margin-right: 0;
        flex-basis: 100%;
    }

    .hero,
    .pitch,
    .expansion,
    .deal {
        padding: 2rem 1rem;
    }

    .hero h1 {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }

    .hero-subtitle {
        font-size: clamp(1rem, 4vw, 1.15rem);
    }

    .widget-card-controls {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .widget-move,
    .widget-edit,
    .widget-remove {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.4rem 0.7rem;
        font-size: 0.85rem;
    }

    .widget-height-slider {
        width: 100%;
        margin-top: 0.25rem;
    }

    .widget-height-slider input[type="range"] {
        flex: 1;
        width: auto;
    }

    .widget-title-input {
        min-height: 44px;
        font-size: 1rem;
    }

    .config-options {
        flex-direction: column;
        align-items: stretch;
    }

    .config-option {
        min-height: 44px;
        justify-content: center;
    }

    .admin-text-size {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .admin-text-size-slider {
        width: 100%;
    }

    .admin-text-size-slider input[type="range"] {
        flex: 1;
        width: auto;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }

    .todo-search-toggle {
        width: 44px;
        height: 44px;
    }

    .todo-tag-chip {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.85rem;
    }

    .todo-add-submit {
        min-width: 44px;
        min-height: 44px;
    }

    .rss-tab {
        min-height: 44px;
        padding: 0.5rem 0.85rem;
    }

    .rss-widget-feed-toggle {
        min-height: 44px;
        padding: 0.4rem 0.6rem;
    }

    .widget-edit-mode-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    .button {
        min-height: 44px;
        padding: 0.65rem 1.25rem;
    }

    .dashboard-title {
        font-size: clamp(1.4rem, 5vw, 1.9rem);
    }
}

/* Tablet+ (48rem and up): side-by-side layouts */
@media (min-width: 48rem) {
    .dashboard-topbar {
        padding: 0.9rem 1.75rem;
        gap: 0.75rem;
    }

    .dashboard-body {
        padding: 0 1.75rem 4rem;
    }

    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .module-grid {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }

    .hero,
    .pitch,
    .expansion,
    .deal {
        padding: 3rem 1.5rem;
    }
}

/* Desktop (64rem and up): wider content area */
@media (min-width: 64rem) {
    .dashboard-body {
        padding: 0 2rem 4rem;
    }
}

/* Touch devices: always show remove buttons (no hover) */
@media (hover: none) {
    .todo-item-remove {
        opacity: 0.7;
    }
}

/* Responsive admin setting rows */
@media (max-width: 48rem) {
    .admin-setting-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    .admin-setting-key {
        min-width: 0;
    }

    .admin-settings-new {
        flex-direction: column;
    }
}

.widget-canvas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.widget-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.widget-card {
    border: 1px solid var(--db-line);
    border-radius: 0.6rem;
    background: var(--db-card-bg);
    padding: 1.1rem 1.4rem 1.3rem;
}

.widget-card-controls {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.widget-move,
.widget-edit,
.widget-remove {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    border: 1px solid var(--db-line);
    background: var(--db-paper);
    color: var(--db-ink);
    border-radius: 0.3rem;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
}

.widget-move:disabled {
    opacity: 0.35;
    cursor: default;
}

.widget-height-slider {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--db-ink);
}

.widget-height-slider input[type="range"] {
    width: 80px;
    height: 4px;
    cursor: pointer;
}

.widget-height-label {
    min-width: 1.5rem;
    text-align: center;
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-weight: 600;
}

.widget-title-input {
    flex: 1 1 auto;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--db-line);
    border-radius: 0.3rem;
    background: var(--db-paper);
    color: var(--db-ink);
    min-width: 0;
}

.widget-title-input::placeholder {
    color: var(--db-muted);
    font-weight: 400;
}

.widget-title-display {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--db-ink);
}

.widget-title-wrapper {
    margin-bottom: 0.5rem;
}

.widget-title-separator {
    height: 1px;
    background: var(--db-line);
    margin-top: 0.4rem;
}

.widget-unsupported {
    color: var(--db-muted);
    font-style: italic;
}

.text-widget-body {
    line-height: 1.6;
}

.text-widget-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.text-widget-textarea {
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    min-height: 8rem;
    resize: vertical;
}

.text-widget-form-actions {
    display: flex;
    gap: 0.6rem;
}

/* Search widget */

.search-widget-form {
    display: flex;
    gap: 0.6rem;
}

.search-widget-input {
    flex: 1;
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    background: var(--db-paper);
    color: var(--db-ink);
}

.search-widget-config-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.search-widget-provider-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.9rem;
    color: var(--db-ink);
}

.search-widget-provider-label select {
    font: inherit;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    background: var(--db-paper);
    color: var(--db-ink);
}

.search-widget-form-actions {
    display: flex;
    gap: 0.6rem;
}

/* RSS widgets (Feed List, Reader) */

/* Email inbox */

.email-widget-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.email-widget-row,
.email-message-row {
    color: var(--db-ink);
    text-decoration: none;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    background: var(--db-paper);
    padding: 0.55rem 0.7rem;
    text-align: left;
    font: inherit;
}

.email-widget-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.email-widget-row:hover,
.email-message-row:hover {
    border-color: var(--db-accent);
}

.email-widget-row-subject,
.email-message-subject {
    font-weight: 650;
}

.email-widget-row-from,
.email-message-from,
.email-message-date {
    color: var(--db-muted);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-page {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.email-page-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.email-page-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 2fr);
    gap: 1rem;
    min-height: 34rem;
}

.email-message-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-y: auto;
    max-height: 72vh;
}

.email-message-row {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.email-message-detail {
    border: 1px solid var(--db-line);
    border-radius: 0.45rem;
    padding: 1rem;
    overflow: hidden;
}

.email-message-empty {
    color: var(--db-muted);
}

.email-message-raw {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--db-line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: 0.8rem/1.45 ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.email-message-body {
    margin: 1rem 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font: inherit;
    line-height: 1.55;
}

.email-message-source {
    color: var(--db-muted);
}

.email-message-source summary {
    cursor: pointer;
}

@media (max-width: 760px) {
    .email-page-layout {
        grid-template-columns: 1fr;
    }

    .email-message-list {
        max-height: 30vh;
    }
}

.rss-widget {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rss-widget-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rss-widget-input {
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
}

.rss-widget-add-feed {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rss-widget-add-feed-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.rss-widget-add-feed-url {
    flex: 1 1 18rem;
}

.rss-widget-layout-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--db-ink);
}

.rss-widget-layout-choice label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.rss-widget-limits {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    align-items: center;
    font-size: 0.9rem;
    color: var(--db-ink);
}

.rss-widget-limit {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rss-widget-limit select.rss-widget-input {
    padding: 0.35rem 0.5rem;
}

.rss-widget-form-actions {
    display: flex;
    gap: 0.6rem;
}

.todo-widget-height {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--db-ink);
}

.todo-widget-height label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.todo-widget-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.todo-widget-form-actions {
    display: flex;
    gap: 0.6rem;
}

.rss-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 1px solid var(--db-line);
    padding-bottom: 0.6rem;
}

.rss-tab {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--db-line);
    background: var(--db-paper);
    color: var(--db-muted);
    border-radius: 0.35rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.rss-tab:hover {
    color: var(--db-ink);
    border-color: var(--db-accent);
}

.rss-tab-active,
.rss-tab-active:hover {
    background: var(--db-accent);
    border-color: var(--db-accent);
    color: white;
}

.rss-feed-error {
    margin: 0;
}

.rss-item {
    margin: 0;
    padding: 0;
    font-size: 0.92rem;
}

.rss-item a {
    color: var(--db-ink);
    font-weight: 600;
    text-decoration: none;
}

.rss-item a:hover {
    color: var(--db-accent);
    text-decoration: underline;
}

.rss-item-button {
    display: block;
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--db-ink);
    font-weight: 600;
    cursor: pointer;
}

.rss-item-button:hover {
    color: var(--db-accent);
}

.rss-reader-body {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1rem;
}

.rss-reader-body .rss-item-list {
    overflow-y: auto;
}

.rss-reader-pane {
    border: 1px solid var(--db-line);
    border-radius: 0.5rem;
    background: var(--db-paper);
    padding: 1rem 1.2rem;
}

.rss-reader-image {
    display: block;
    width: 100%;
    max-height: 18rem;
    object-fit: cover;
    border-radius: 0.4rem;
    margin: 0.8rem 0 0;
}

.rss-reader-content {
    line-height: 1.6;
    margin: 0.8rem 0;
    font-size: 0.95rem;
}

.rss-reader-content img {
    max-width: 100%;
}

.rss-reader-original {
    display: inline-block;
    font-weight: 600;
    color: var(--db-accent);
    text-decoration: none;
}

.rss-reader-original:hover {
    text-decoration: underline;
}

@media (min-width: 48rem) {
    .rss-reader-body {
        grid-template-columns: minmax(14rem, 1fr) minmax(16rem, 1.4fr);
        gap: 1.2rem;
    }
}

.add-widget {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.admin-section {
    margin-bottom: 2.5rem;
}

.admin-settings-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-setting-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.admin-setting-key {
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    font-weight: 600;
    min-width: 10rem;
}

.admin-settings-new {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.status-error {
    color: var(--page-error);
}

/* Todo widget */

.todo-widget {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.todo-tag-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.todo-search-toggle {
    flex: 0 0 auto;
    border: 1px solid var(--db-line);
    background: var(--db-paper);
    color: var(--db-muted);
    border-radius: 0.4rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0.15rem;
}

.todo-search-toggle:hover,
.todo-search-toggle-active {
    color: var(--db-accent);
    border-color: var(--db-accent);
}

.todo-search {
    flex: 1 1 auto;
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    min-width: 0;
}

.todo-tag-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.todo-tag-chip {
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--db-line);
    background: var(--db-paper);
    color: var(--db-muted);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
}

.todo-tag-chip:hover {
    color: var(--db-ink);
    border-color: var(--db-accent);
}

.todo-tag-chip-active,
.todo-tag-chip-active:hover {
    background: var(--db-accent);
    border-color: var(--db-accent);
    color: white;
}

.todo-add-form {
    margin-top: 0.25rem;
}

.todo-add-input-wrap {
    display: flex;
    align-items: center;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    overflow: hidden;
    background: var(--db-paper);
}

.todo-add-input-wrap:focus-within {
    border-color: var(--db-accent);
}

.todo-add-title {
    flex: 1 1 auto;
    font: inherit;
    padding: 0.5rem 0.7rem;
    border: none;
    background: transparent;
    min-width: 0;
}

.todo-add-title:focus {
    outline: none;
}

.todo-add-tags {
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.5rem 0.5rem;
    border: none;
    border-left: 1px solid var(--db-line);
    background: transparent;
    width: 7rem;
    min-width: 0;
    color: var(--db-muted);
}

.todo-add-tags:focus {
    outline: none;
    color: var(--db-ink);
}

.todo-add-tags::placeholder {
    color: var(--db-muted);
    opacity: 0.6;
}

.todo-add-submit {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--db-accent);
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0 0.75rem;
    cursor: pointer;
    line-height: 1;
}

.todo-add-submit:hover {
    color: var(--db-accent-hover, var(--db-ink));
}

.todo-item-list {
    display: flex;
    flex-direction: column;
    padding-right: 1.2rem;
    /* .todo-widget is itself a column flex container, so this list is a flex
     item — without an explicit min-height, some browsers let a flex item's
     automatic min-height win over its own max-height/overflow-y and refuse
     to actually shrink/scroll. Forces the inline max-height (from the
     dashboard height slider) to be the real constraint. */
    min-height: 0;
}

.todo-item {
    line-height: 1.5rem;
    padding: 0.25rem 0;
}

.todo-item-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.todo-item-title {
    flex: 1 1 auto;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--db-ink);
}

.todo-item-done .todo-item-title {
    text-decoration: line-through;
    color: var(--db-muted);
    font-weight: 400;
}

.todo-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.todo-item-tag {
    border: none;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--db-paper);
    color: var(--db-muted);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    cursor: pointer;
}

.todo-item-remove {
    flex: 0 0 auto;
    border: none;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--db-muted);
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0;
}

.todo-item:hover .todo-item-remove {
    opacity: 1;
}

.todo-item-remove:hover {
    color: var(--db-accent);
}

.todo-item-notes {
    margin: 0.4rem 0 0 1.9rem;
    font-size: 0.85rem;
    color: var(--db-muted);
}

/* ── Edit mode toggle ─────────────────────────────────────────────── */

.widget-canvas-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    height: 0;
    overflow: visible;
    position: relative;
    top: 15px;
    z-index: 1;
}

.widget-edit-mode-toggle {
    background: transparent;
    border: 1px solid var(--db-border);
    border-radius: 4px;
    color: var(--db-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.3rem 0.6rem;
    transition: all 0.15s ease;
}

.widget-edit-mode-toggle:hover {
    color: var(--db-accent);
    border-color: var(--db-accent);
}

/* ── RSS feed toggle checkboxes ───────────────────────────────────── */

.rss-widget-feed-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--db-border);
}

.rss-widget-feed-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--db-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    user-select: none;
}

.rss-widget-feed-toggle:hover {
    border-color: var(--db-accent);
}

.rss-widget-feed-toggle.is-enabled {
    background: var(--db-accent);
    border-color: var(--db-accent);
    color: #fff;
}

.rss-widget-feed-toggle input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

.rss-widget-feed-toggle-label {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── RSS item list scroll limit ───────────────────────────────────── */

.rss-item-list {
    overflow-y: auto;
}

.rss-item-source {
    font-size: 0.8em;
    color: var(--db-muted);
    white-space: nowrap;
}

.rss-item {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
    line-height: 1.5rem;
}

/* ── Empty state ──────────────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 1rem 1rem;
    gap: 0.4rem;
}

.empty-state-icon {
    font-size: 1.5rem;
    line-height: 1;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    margin: 0;
}

.empty-state-subtitle {
    font-size: 0.95rem;
    color: var(--db-muted);
    margin: 0 0 0.25rem;
}

/* ── Admin text size slider ───────────────────────────────────────── */

.admin-text-size {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-text-size label {
    font-weight: 500;
}

.admin-text-size-slider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.admin-text-size-slider input[type="range"] {
    width: 120px;
}

.admin-text-size-label {
    font-weight: 600;
    min-width: 2em;
}

/* ── Global text size classes ─────────────────────────────────────── */

.text-size-xs {
    font-size: 0.75rem;
}

.text-size-s {
    font-size: 0.875rem;
}

.text-size-m {
    font-size: 1rem;
}

.text-size-l {
    font-size: 1.125rem;
}

.text-size-xl {
    font-size: 1.25rem;
}

/* ── Config: Appearance ───────────────────────────────────────────── */

.config-section {
    margin-bottom: 2rem;
}

.config-page {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.config-page > .dashboard-subtitle {
    margin-bottom: 0.75rem;
}

.config-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
}

.config-section-description {
    font-size: 0.9rem;
    color: var(--db-muted);
    margin: 0 0 1.25rem;
}

.config-group {
    margin-bottom: 1.5rem;
}

.config-group-label {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--db-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.config-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.config-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    background: var(--db-card-bg);
    color: var(--db-ink);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        background 0.15s ease;
}

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

.config-option.is-selected {
    border-color: var(--db-accent);
    background: var(--db-accent-glow);
    font-weight: 600;
}

.config-option-swatch {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid var(--db-line);
    flex: none;
}

.config-plugin-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--db-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.config-plugin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--db-card-bg);
    border-bottom: 1px solid var(--db-line);
}

.config-plugin-row:last-child {
    border-bottom: 0;
}

.config-plugin-name,
.config-plugin-version {
    margin: 0;
}

.config-plugin-name {
    font-weight: 650;
}

.config-plugin-version {
    margin-top: 0.15rem;
    color: var(--db-muted);
    font-size: 0.8rem;
}

.config-plugin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--db-muted);
    cursor: pointer;
    white-space: nowrap;
}

.config-plugin-toggle input {
    inline-size: 1.05rem;
    block-size: 1.05rem;
    accent-color: var(--db-accent);
}

/* Jobhunt widget + page */

.jobhunt-widget {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.jobhunt-widget-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Fixed-column grid, not flex — long company/role names ellipsize in place
   instead of stretching the row (and the widget card) wider. */
.jobhunt-widget-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--db-line);
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 0.3rem;
}

.jobhunt-widget-row:hover {
    background: var(--db-paper);
}

.jobhunt-widget-row-company,
.jobhunt-widget-row-role {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jobhunt-widget-row-company {
    font-weight: 600;
    color: var(--db-ink);
}

.jobhunt-widget-row-role {
    color: var(--db-muted);
}

.jobhunt-widget-row-score {
    justify-self: end;
    min-width: 2.2rem;
    text-align: center;
    border: 1px solid var(--db-line);
    background: var(--db-paper);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--db-ink);
}

.jobhunt-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.jobhunt-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--db-line);
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: 0.3rem;
}

.jobhunt-row:hover {
    background: var(--db-paper);
}

.jobhunt-row-company {
    flex: 1 1 auto;
    font-weight: 600;
    color: var(--db-ink);
}

.jobhunt-row-role {
    flex: 1 1 auto;
    color: var(--db-muted);
}

.jobhunt-row-score {
    flex: 0 0 auto;
    min-width: 2.2rem;
    text-align: center;
    border: 1px solid var(--db-line);
    background: var(--db-paper);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--db-ink);
}

.jobhunt-row-status {
    flex: 0 0 auto;
    color: var(--db-accent);
    font-weight: 600;
    text-transform: capitalize;
}

.jobhunt-row-applied {
    flex: 0 0 auto;
    color: var(--db-muted);
    font-size: 0.78rem;
}

.jobhunt-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jobhunt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.jobhunt-detail-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.jobhunt-detail-back {
    color: var(--db-muted);
    font-size: 0.85rem;
    text-decoration: none;
    align-self: flex-start;
}

.jobhunt-detail-back:hover {
    color: var(--db-accent);
}

.jobhunt-detail {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.jobhunt-detail-header {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.jobhunt-detail-subtitle {
    color: var(--db-muted);
    font-size: 1rem;
}

.jobhunt-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.85rem;
    color: var(--db-muted);
}

.jobhunt-detail-status {
    color: var(--db-accent);
    font-weight: 600;
    text-transform: capitalize;
}

.jobhunt-detail-section {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.jobhunt-detail-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--db-muted);
}

.jobhunt-detail-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--db-ink);
    white-space: pre-wrap;
}

.jobhunt-detail-toggle {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: var(--db-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.jobhunt-detail-toggle:hover {
    text-decoration: underline;
}

.jobhunt-detail-link {
    color: var(--db-accent);
    font-size: 0.85rem;
    word-break: break-all;
}

.jobhunt-detail-documents {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.jobhunt-detail-document-missing {
    color: var(--db-muted);
    font-size: 0.85rem;
}

.jobhunt-detail-history {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.jobhunt-detail-history-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.jobhunt-detail-history-date {
    color: var(--db-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.jobhunt-detail-history-transition {
    color: var(--db-ink);
}

.jobhunt-detail-history-note {
    color: var(--db-muted);
    font-size: 0.8rem;
}

/* Knowledge page */

.knowledge-page,
.knowledge-list-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.knowledge-back {
    color: var(--db-muted);
    font-size: 0.85rem;
    text-decoration: none;
    align-self: flex-start;
}

.knowledge-back:hover {
    color: var(--db-accent);
}

.knowledge-doc-body {
    line-height: 1.6;
}

.knowledge-doc-body table {
    border-collapse: collapse;
    width: 100%;
}

.knowledge-doc-body th,
.knowledge-doc-body td {
    border: 1px solid var(--db-line);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

.knowledge-doc-body blockquote {
    border-left: 3px solid var(--db-accent);
    margin: 0;
    padding-left: 1rem;
    color: var(--db-muted);
}

.knowledge-doc-body pre {
    background: var(--db-paper);
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    padding: 0.75rem;
    overflow-x: auto;
}

/* mermaid.run() replaces a pre.mermaid's text content with an inline SVG in
   place — drop the code-block chrome (background/border/padding) so the
   diagram isn't boxed like a snippet, and center it since diagrams are
   rarely full-width. */
.knowledge-doc-body pre.mermaid {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

.knowledge-doc-body pre.mermaid svg {
    max-width: 100%;
}

/* `[[slug]]` wikilinks. A link whose target page doesn't exist still
   navigates (landing on the "Page not found" state), so it's marked muted and
   dashed rather than hidden — a wikilink to a page you haven't written yet is
   a normal thing to have in a draft. */
.knowledge-doc-body .knowledge-wikilink {
    color: var(--db-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--db-accent-glow);
}

.knowledge-doc-body .knowledge-wikilink:hover {
    border-bottom-color: var(--db-accent);
}

.knowledge-doc-body .knowledge-wikilink-missing {
    color: var(--db-muted);
    border-bottom-style: dashed;
    border-bottom-color: var(--db-line);
}

.knowledge-doc-body .knowledge-wikilink-missing:hover {
    border-bottom-color: var(--db-muted);
}

.knowledge-action-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.knowledge-editor {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* The editor remains deliberately Markdown-first while attachments get a
   first-class visual surface. This is an incremental, accessible step toward
   the block editor: users can add and preview supporting material without
   leaving a page or manually discovering its URL. */
.knowledge-editor-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem);
    align-items: start;
    gap: 1rem;
}

.knowledge-attachments {
    border: 1px solid var(--db-line);
    border-radius: 0.55rem;
    background: var(--db-card-bg);
    padding: 0.85rem;
}

.knowledge-attachments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.knowledge-attachments h2 {
    margin: 0;
    font-size: 0.95rem;
}

.knowledge-attachments-refresh {
    padding: 0.28rem 0.5rem;
    font-size: 0.75rem;
}

.knowledge-attachments-help,
.knowledge-attachments-status,
.knowledge-attachments-pending p {
    margin: 0.45rem 0;
    color: var(--db-muted);
    font-size: 0.8rem;
}

.knowledge-attachments-drop {
    border: 1px dashed var(--db-accent);
    border-radius: 0.4rem;
    padding: 0.75rem 0.6rem;
    text-align: center;
    color: var(--db-muted);
    font-size: 0.8rem;
    cursor: pointer;
}

.knowledge-attachments-drop:hover,
.knowledge-attachments-drop.is-dragging {
    background: var(--db-accent-glow);
    color: var(--db-accent);
}

.knowledge-attachments-upload-link {
    color: var(--db-accent);
    font-weight: 600;
}

.knowledge-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.6rem 0 0;
    padding: 0;
    list-style: none;
}

.knowledge-attachments-list:empty {
    display: none;
}

.knowledge-attachment-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    border-top: 1px solid var(--db-line);
    font-size: 0.8rem;
}

.knowledge-attachment-item a {
    min-width: 0;
    overflow: hidden;
    color: var(--db-ink);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.knowledge-attachment-item a:hover {
    color: var(--db-accent);
    text-decoration: underline;
}

.knowledge-attachment-item-size {
    margin-left: auto;
    flex: 0 0 auto;
    color: var(--db-muted);
    font-size: 0.7rem;
}

.knowledge-editor-title-row {
    display: flex;
    gap: 0.6rem;
}

.knowledge-editor-title {
    flex: 1;
    font: inherit;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
}

.knowledge-editor-kind select {
    font: inherit;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    padding: 0.5rem;
}

.knowledge-editor-role {
    margin: 0;
    color: var(--db-muted);
}

.knowledge-editor-parent,
.knowledge-editor-kind {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.knowledge-editor-slug {
    margin: 0;
    color: var(--db-muted);
    font-size: 0.8rem;
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

.knowledge-editor-body {
    font: inherit;
    font-family:
        ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
    min-height: 24rem;
    padding: 0.75rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    resize: vertical;
}

.knowledge-editor-preview {
    min-height: 24rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    padding: 0.75rem;
}

@media (max-width: 44rem) {
    .knowledge-editor-workspace {
        grid-template-columns: 1fr;
    }
}

.knowledge-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.knowledge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.knowledge-tree-node {
    display: block;
}

.knowledge-tree-node > div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.knowledge-tree-children {
    margin-top: 0.4rem;
    margin-left: 1.25rem;
}

.knowledge-list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--db-line);
    border-radius: 0.4rem;
    background: var(--db-card-bg);
}

.knowledge-list-link {
    color: var(--db-ink);
    font-weight: 600;
    text-decoration: none;
}

.knowledge-list-link:hover {
    color: var(--db-accent);
}

.knowledge-list-role,
.knowledge-doc-role {
    color: var(--db-muted);
    font-size: 0.78rem;
}

.knowledge-doc-role {
    align-self: flex-start;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: var(--db-accent-glow);
}

.knowledge-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--db-rail);
    color: var(--db-rail-ink);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 100;
}

.knowledge-list-header-actions {
    display: flex;
    gap: 0.6rem;
}

.knowledge-trash-row-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.knowledge-widget {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.knowledge-widget-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    /* Same flex-item-inside-a-column-flex-parent fix as .todo-item-list —
     see the comment there. */
    min-height: 0;
}

.knowledge-widget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    text-decoration: none;
    border-radius: 0.3rem;
}

.knowledge-widget-row:hover {
    background: var(--db-accent-glow);
}

.knowledge-widget-row-title {
    color: var(--db-ink);
    font-weight: 600;
}

.knowledge-widget-row-role {
    color: var(--db-muted);
    font-size: 0.78rem;
    text-align: right;
}
/* Shortener: native management page with readable, selectable URL strings. */
.shortener-page { width: 100%; padding: 1.5rem 0; }
.shortener-description, .shortener-help { color: var(--db-muted); }
.shortener-help { font-size: 0.875rem; line-height: 1.6; }
.shortener-create, .shortener-link { border: 1px solid var(--db-line, #8885); border-radius: 10px; padding: 1.25rem; margin: 1rem 0; }
.shortener-create label { display: block; font-weight: 600; margin-bottom: 0.6rem; }
.shortener-input-row, .shortener-copy-row, .shortener-actions, .shortener-list-header { display: flex; align-items: center; gap: 0.75rem; }
.shortener-list-header { justify-content: space-between; margin-top: 2rem; }
.shortener-page input { flex: 1; min-width: 0; padding: 0.7rem; border: 1px solid var(--db-line, #8885); border-radius: 6px; background: transparent; color: inherit; font: inherit; }
.shortener-page button { white-space: nowrap; }
.shortener-page button:disabled { opacity: 0.55; cursor: wait; }
.shortener-emoji { font-size: 1.3rem; color: inherit; overflow-wrap: anywhere; }
.shortener-destination { overflow-wrap: anywhere; line-height: 1.5; }
.shortener-empty { padding: 2rem 0; color: var(--db-muted); }

/* Portfolio analytics: signal-first, readable at a glance. */
.portfolio-analytics-widget { display:flex; flex-direction:column; gap:1rem; overflow:auto; padding:.25rem; }
.portfolio-analytics-hero { display:flex; justify-content:space-between; gap:1rem; padding:1.1rem 1.2rem; border:1px solid var(--db-line,#8885); border-radius:14px; background:linear-gradient(135deg,var(--db-accent-glow),transparent 72%); }
.portfolio-analytics-eyebrow { margin:0 0 .2rem; color:var(--db-muted); font-size:.78rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.portfolio-analytics-number { margin:0; color:var(--db-ink); font-size:clamp(2.5rem,7vw,4rem); line-height:.9; letter-spacing:-.07em; }
.portfolio-analytics-summary { margin:.55rem 0 0; color:var(--db-muted); line-height:1.4; }
.portfolio-analytics-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; gap:.1rem; min-width:4.9rem; padding:.6rem .55rem; color:var(--db-muted); border-radius:12px; background:linear-gradient(160deg,var(--db-accent-glow),transparent 85%); font-size:.7rem; text-align:center; }
.portfolio-analytics-badge strong { color:var(--db-accent); font-size:1.35rem; }
.portfolio-analytics-chart { display:flex; align-items:end; gap:3px; height:8rem; padding:.45rem 0 0; border-bottom:1px solid var(--db-line,#8885); }
.portfolio-analytics-bar-slot { flex:1; min-width:3px; height:100%; display:flex; align-items:end; }
.portfolio-analytics-bar { width:100%; min-height:3px; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--db-accent),var(--db-accent-glow)); }
.portfolio-analytics-axis,.portfolio-analytics-section-heading { display:flex; justify-content:space-between; color:var(--db-muted); font-size:.75rem; }
.portfolio-analytics-axis { padding-top:.4rem; }.portfolio-analytics-section-heading { margin-top:.2rem; }.portfolio-analytics-section-heading strong { color:var(--db-ink); font-size:.9rem; }
.portfolio-analytics-pages { display:flex; flex-direction:column; border:1px solid var(--db-line,#8885); border-radius:12px; overflow:hidden; }
.portfolio-analytics-row { display:grid; grid-template-columns:1.7rem minmax(0,1fr) auto; gap:.45rem; align-items:center; padding:.65rem .8rem; border-bottom:1px solid var(--db-line,#8885); text-decoration:none; }.portfolio-analytics-row:last-child { border-bottom:0; }a.portfolio-analytics-row:hover { background:var(--db-paper); }
.portfolio-analytics-rank { color:var(--db-muted); font-size:.75rem; }.portfolio-analytics-row-label { overflow:hidden; color:var(--db-ink); font-weight:600; text-overflow:ellipsis; white-space:nowrap; }.portfolio-analytics-count { min-width:1.6rem; padding:.15rem .4rem; border-radius:99px; background:var(--db-accent-glow); color:var(--db-ink); font-size:.8rem; font-weight:700; text-align:center; }
.portfolio-analytics-empty { margin:0; padding:1rem; color:var(--db-muted); border:1px dashed var(--db-line,#8885); border-radius:12px; line-height:1.45; }

@media (max-width: 600px) {
    .shortener-input-row { flex-direction: column; align-items: stretch; }
    .shortener-actions { flex-wrap: wrap; }
}

/* Management pages use the dashboard's horizontal gutter for useful content
   space while preserving the surrounding shell (Knowledge keeps its own layout). */
.email-page,
.shortener-page,
.portfolio-analytics-page,
.jobhunt-page,
.jobhunt-detail-page,
.config-page {
    box-sizing: border-box;
    width: calc(100% + 3.5rem);
    max-width: none;
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    padding: 1.5rem 0;
}

@media (max-width: 48rem) {
    .email-page,
    .shortener-page,
    .portfolio-analytics-page,
    .jobhunt-page,
    .jobhunt-detail-page,
    .config-page {
        width: calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
    }
}

@media (min-width: 64rem) {
    .email-page,
    .shortener-page,
    .portfolio-analytics-page,
    .jobhunt-page,
    .jobhunt-detail-page,
    .config-page {
        width: calc(100% + 4rem);
        margin-left: -2rem;
        margin-right: -2rem;
    }
}