/* Paliad — Patent Knowledge platform.
   Firm name is rendered at runtime from FIRM_NAME (see internal/branding +
   frontend/src/branding.ts). Default: "HLC". */

:root {
    /* Brand palette (4 colors). Token names use the --hlc- prefix as a
       stable internal identifier — not a firm-specific reference; renaming
       the prefix would touch every CSS rule for no user-visible benefit.
       Lime + midnight are the primary pair. Cyan + cream are supporting. */
    --hlc-lime:         #BFF355;
    --hlc-midnight:     #002236;
    --hlc-cyan:         #9FE3D9;
    --hlc-cream:        #EEE5E1;

    /* Channel tokens enable rgb(var(--*-rgb) / a) for tints without
       hard-coded rgba values elsewhere. */
    --hlc-lime-rgb:     191 243 85;
    --hlc-midnight-rgb: 0 34 54;
    --hlc-cyan-rgb:     159 227 217;
    --hlc-cream-rgb:    238 229 225;

    /* Surface + semantic tokens — re-pointed onto the brand palette.
       Light mode is the default. Dark mode overrides every token below
       in the :root[data-theme="dark"] block further down. Components
       that read these tokens (instead of palette/hex literals) get the
       theme swap for free. */
    --color-bg:           var(--hlc-cream);
    --color-bg-subtle:    #f7f3f0;        /* slightly off-cream for table headers / soft surfaces */
    --color-bg-lime-tint: rgb(var(--hlc-lime-rgb) / 0.10);
    --color-surface:      #ffffff;        /* cards stay white for contrast */
    --color-surface-2:    #fafafa;        /* slightly raised surface (alt rows, code blocks) */
    --color-surface-muted: #f3f4f6;       /* nested muted surfaces (chips, soft fills) */
    /* Form inputs render on white in light mode (m: 2026-04-30 — the
       cream `--color-bg` made inputs feel like background blocks, not
       wells). In dark mode we drop slightly *below* the card surface
       so the input still reads as a depressed well rather than merging
       into the card panel. */
    --color-input-bg:     #ffffff;
    --color-text:         var(--hlc-midnight);
    --color-text-muted:   #5a6573;
    --color-text-subtle:  #6b7280;        /* third-tier text (placeholders, helper) */
    --color-accent:       var(--hlc-lime);
    --color-accent-light: #d8f78a;        /* lighter lime for hover */
    --color-accent-dark:  var(--hlc-midnight); /* foreground on lime — WCAG AA */
    /* Accent text colour. Lime fails WCAG on the cream/white BGs we use
       in light mode, so accent emphasis in body copy is rendered in
       midnight here. Dark-mode flips this to lime (lime on midnight is
       WCAG AA); the .sidebar scope below already keeps lime today since
       the sidebar lives on a midnight BG, so it's a no-op there. */
    --color-accent-fg:    var(--hlc-midnight);
    --color-border:       #e1dcd6;        /* derived from cream, neutral warm */
    --color-border-strong: #d4d4d8;       /* stronger border for tab/select boundaries */
    --color-hero-bg:      var(--hlc-midnight);
    --color-hero-text:    #ffffff;
    /* Overlay tints for hover/stripe/divider — opacities tuned so they read
       on cream backgrounds. Dark mode swaps to white-channel alphas. */
    --color-overlay-faint:  rgba(0, 0, 0, 0.04);
    --color-overlay-subtle: rgba(0, 0, 0, 0.06);
    --color-overlay-strong: rgba(0, 0, 0, 0.10);
    --color-overlay-modal:  rgba(0, 0, 0, 0.4);   /* modal/drawer scrim */

    /* Segmented-control active pill — brand-lime accent so every density /
       view-mode toggle reads as the same primary action (m/paliad#52).
       Surfaces consuming these tokens: .filter-bar-segment (FilterBar
       density + future view-mode segments). Override on dark mode below. */
    --color-segment-active-bg:     var(--color-accent);
    --color-segment-active-fg:     var(--color-accent-dark);
    --color-segment-active-border: var(--color-accent);

    /* Status palette — five buckets (red/amber/green/blue/neutral) shared
       across dashboard cards, frist-due-chips, agenda urgency, termin
       badges, login forms. Light values match the existing pastel-on-dark
       Tailwind-100/700 pattern; dark values invert to a tinted alpha
       backdrop with bright foreground for AA contrast on dark surfaces. */
    --status-red-bg:      #fee2e2;
    --status-red-fg:      #b91c1c;
    --status-red-border:  #fecaca;
    --status-amber-bg:    #fef3c7;
    --status-amber-fg:    #92400e;
    --status-amber-fg-2:  #b45309;
    --status-amber-border: #fcd34d;
    --status-green-bg:    #dcfce7;
    --status-green-fg:    #166534;
    --status-green-border: #bbf7d0;
    --status-green-soft-bg: #ecfccb;
    --status-green-soft-fg: #365314;
    --status-blue-bg:     #dbeafe;
    --status-blue-fg:     #1e40af;
    --status-blue-fg-2:   #2563eb;
    --status-blue-soft-bg: #eef2ff;
    --status-blue-soft-fg: #4338ca;
    --status-neutral-bg:  #f3f4f6;
    --status-neutral-fg:  #6b7280;
    --status-neutral-fg-2: #475569;
    --status-neutral-fg-3: #374151;
    /* Project-tree icon palette — five identity colours by node type.
       Light values are saturated-mid; dark values are brightened pastels
       so they remain legible on midnight without losing identity. */
    --tree-icon-client:     #4338ca;
    --tree-icon-litigation: #9d174d;
    --tree-icon-patent:     #075985;
    --tree-icon-case:       #92400e;
    --tree-icon-project:    #166534;

    /* Sidebar — light mode harmonises with the cream/white body palette
       (t-paliad-104). Surface lifts one step from the body cream so the
       sidebar reads as part of the same design language, not a separate
       midnight panel. The active item's text colour is midnight (full
       contrast against the muted-grey inactive items); the brand-lime
       accent stripe on .sidebar-item.active::after stays via --color-accent
       directly, so the lime brand cue is preserved in both themes.
       Dark mode (block below) restores the original midnight + cream + lime
       palette since that already reads as one piece. */
    --sidebar-bg:          var(--color-bg-subtle);
    --sidebar-text:        var(--color-text);
    --sidebar-text-muted:  var(--color-text-muted);
    --sidebar-text-active: var(--hlc-midnight);
    --sidebar-border:      var(--color-border);
    --sidebar-hover-bg:    rgb(var(--hlc-midnight-rgb) / 0.05);
    --sidebar-input-bg:    rgb(var(--hlc-midnight-rgb) / 0.05);
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", monospace;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
    /* Sidebar scrollbar — themed thin scrollbar so the auto-overflow
       inside the nav reads as part of the sidebar surface. Light mode
       uses midnight-channel alpha against the cream sidebar; the dark
       block below switches to cream-channel alpha against midnight. */
    --sidebar-scrollbar-thumb:       rgb(var(--hlc-midnight-rgb) / 0.18);
    --sidebar-scrollbar-thumb-hover: rgb(var(--hlc-midnight-rgb) / 0.32);
    --sidebar-scrollbar-width:       6px;
    --max-width: 1080px;
    --sidebar-collapsed: 64px;
    --sidebar-expanded: 240px;
    /* User-adjustable width for the expanded/pinned desktop sidebar.
       Defaults to --sidebar-expanded; sidebar.ts overrides on
       document.documentElement when the user drags the resize handle
       and persists the value to localStorage. Mobile drawer keeps the
       fixed --sidebar-expanded width. */
    --sidebar-width: 240px;
    --bottom-nav-height: 56px;
}

/* Dark mode (m/paliad#2). Activated by the pre-paint inline script in
   PWAHead.tsx setting <html data-theme="dark"> from localStorage[paliad-theme]
   ("dark" | "auto"+system-prefers-dark). The body palette flips to
   midnight-bg + cream-fg, and accent text flips back to lime (passes WCAG
   AA on midnight). Status pills, dashboard cards, and tree-icon colours
   are tinted-alpha-on-dark for readability.

   Sidebar (t-paliad-104, reversing t-paliad-083): the sidebar now flips
   with the theme. Light mode keeps the sidebar on a cream-tinted surface
   so it reads as part of the page; dark mode restores the original
   midnight + cream-text + lime-active palette below — that combo already
   reads as one piece on a midnight body. */
:root[data-theme="dark"] {
    --color-bg:           var(--hlc-midnight);
    --color-bg-subtle:    #00304a;        /* slightly raised for table headers */
    --color-bg-lime-tint: rgb(var(--hlc-lime-rgb) / 0.12);
    --color-surface:      #0a3047;        /* card surface — distinct from body */
    --color-surface-2:    #0d3a55;        /* one step further raised */
    --color-surface-muted: rgb(var(--hlc-cream-rgb) / 0.05);
    /* Input wells render BELOW card surface so the depression reads. */
    --color-input-bg:     #00192a;
    --color-text:         var(--hlc-cream);
    --color-text-muted:   rgb(var(--hlc-cream-rgb) / 0.66);
    --color-text-subtle:  rgb(var(--hlc-cream-rgb) / 0.50);
    --color-accent-light: #9bd926;        /* darker lime for hover on dark */
    --color-accent-dark:  var(--hlc-midnight);  /* foreground on lime stays midnight */
    --color-accent-fg:    var(--hlc-lime);      /* lime text on midnight is AA */
    --color-border:       rgb(var(--hlc-cream-rgb) / 0.12);
    --color-border-strong: rgb(var(--hlc-cream-rgb) / 0.22);
    --color-hero-bg:      #0a3047;        /* hero panel one step lighter than bg */
    --color-hero-text:    var(--hlc-cream);

    --color-overlay-faint:  rgba(255, 255, 255, 0.04);
    --color-overlay-subtle: rgba(255, 255, 255, 0.07);
    --color-overlay-strong: rgba(255, 255, 255, 0.12);
    --color-overlay-modal:  rgba(0, 0, 0, 0.65);

    /* Segmented active pill — lime stays the brand on dark mode too; the
       --color-accent-dark token already resolves to midnight in both
       themes, keeping the foreground WCAG-AA on lime. */
    --color-segment-active-bg:     var(--color-accent);
    --color-segment-active-fg:     var(--color-accent-dark);
    --color-segment-active-border: var(--color-accent);

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* Status palette — alpha-tinted backdrops so the pill reads as a
       coloured swatch rather than a saturated rectangle. Foregrounds are
       the Tailwind 300-shades for AA contrast on the alpha bg. */
    --status-red-bg:      rgb(239 68 68 / 0.18);
    --status-red-fg:      #fca5a5;
    --status-red-border:  rgb(239 68 68 / 0.35);
    --status-amber-bg:    rgb(245 158 11 / 0.18);
    --status-amber-fg:    #fcd34d;
    --status-amber-fg-2:  #fbbf24;
    --status-amber-border: rgb(245 158 11 / 0.35);
    --status-green-bg:    rgb(34 197 94 / 0.18);
    --status-green-fg:    #86efac;
    --status-green-border: rgb(34 197 94 / 0.35);
    --status-green-soft-bg: rgb(132 204 22 / 0.18);
    --status-green-soft-fg: #bef264;
    --status-blue-bg:     rgb(59 130 246 / 0.18);
    --status-blue-fg:     #93c5fd;
    --status-blue-fg-2:   #60a5fa;
    --status-blue-soft-bg: rgb(99 102 241 / 0.18);
    --status-blue-soft-fg: #a5b4fc;
    --status-neutral-bg:  rgb(var(--hlc-cream-rgb) / 0.08);
    --status-neutral-fg:  rgb(var(--hlc-cream-rgb) / 0.66);
    --status-neutral-fg-2: rgb(var(--hlc-cream-rgb) / 0.55);
    --status-neutral-fg-3: rgb(var(--hlc-cream-rgb) / 0.78);

    /* Tree-icon colours — brighter shades so they remain identifiable
       on midnight without losing their colour identity. */
    --tree-icon-client:     #818cf8;
    --tree-icon-litigation: #f472b6;
    --tree-icon-patent:     #38bdf8;
    --tree-icon-case:       #fbbf24;
    --tree-icon-project:    #86efac;

    /* Sidebar — restore the original midnight + cream + lime palette here
       (the light-mode defaults harmonise with the cream body; dark mode
       wants the high-contrast midnight column it had before t-paliad-104). */
    --sidebar-bg:          var(--hlc-midnight);
    --sidebar-text:        var(--hlc-cream);
    --sidebar-text-muted:  rgb(var(--hlc-cream-rgb) / 0.66);
    --sidebar-text-active: var(--hlc-lime);
    --sidebar-border:      rgb(var(--hlc-cream-rgb) / 0.12);
    --sidebar-hover-bg:    rgb(var(--hlc-cream-rgb) / 0.08);
    --sidebar-input-bg:    rgb(var(--hlc-cream-rgb) / 0.08);
    --sidebar-scrollbar-thumb:       rgb(var(--hlc-cream-rgb) / 0.20);
    --sidebar-scrollbar-thumb-hover: rgb(var(--hlc-cream-rgb) / 0.35);
}

/* Smooth the body-background swap so theme toggles don't snap. Surface
   and text colors are read by individual elements and inherit a similar
   transition where they apply their own background/color shorthand. */
:root {
    color-scheme: light;
}
:root[data-theme="dark"] {
    color-scheme: dark;
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* --- Header --- */

.header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 3.5rem;
}

.logo {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.logo-mark {
    font-family: var(--font-mono);
    color: var(--color-accent-fg);
    font-weight: 700;
    font-size: 1.3rem;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.nav-logout {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
}

.nav-logout:hover {
    color: var(--color-accent-fg);
}

.nav-lang {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    user-select: none;
}

.lang-btn {
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    padding: 0;
    color: inherit;
}

.lang-btn:hover {
    color: var(--color-accent-fg);
}

.lang-active {
    color: var(--color-accent-fg);
    font-weight: 600;
    cursor: default;
}

.lang-sep {
    margin: 0 0.25rem;
}

.timeline-trigger-date {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* --- Hero --- */

.hero {
    background: var(--color-hero-bg);
    color: var(--color-hero-text);
    padding: 5rem 0 4.5rem;
}

.hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.hero-accent {
    font-weight: 400;
    opacity: 0.85;
}

.hero-sub {
    margin-top: 1.25rem;
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 560px;
}


/* --- Card Grid --- */

.sections {
    padding: 4rem 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-light);
}

.card-icon {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--color-accent-fg);
    margin-bottom: 1rem;
}

.card-icon svg {
    width: 100%;
    height: 100%;
}

.card h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}


.card p {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.section-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}


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

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-link:hover {
    border-color: var(--color-accent);
}

/* --- Offices --- */

.offices {
    padding: 0 0 4rem;
}

.offices h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}


.office-list {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.office-list span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    position: relative;
    padding-left: 0.85rem;
}

.office-list span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* --- Footer --- */

.footer {
    border-top: 1px solid var(--color-border);
    padding: 1.5rem 0;
    margin-top: auto;
}

.footer p {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* --- Login --- */

.login-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-md);
}

.login-tabs {
    display: flex;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--color-border);
}

.login-tab {
    flex: 1;
    padding: 0.6rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.login-tab:hover {
    color: var(--color-text);
}

.login-tab.active {
    /* Canonical active-tab pattern (F-20) — lime underline + midnight text +
       600 weight. Matches .entity-tab.active and .gebuehren-tab.active. */
    color: var(--color-text);
    border-bottom-color: var(--hlc-lime);
    font-weight: 600;
}

.login-error {
    background: var(--status-red-bg);
    color: var(--status-red-fg);
    border: 1px solid var(--status-red-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.login-success {
    background: var(--status-green-bg);
    color: var(--status-green-fg);
    border: 1px solid var(--status-green-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.35rem;
    margin-top: 0.75rem;
}

.login-label:first-child {
    margin-top: 0;
}

.login-input {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    color: var(--color-text);
    background: var(--color-input-bg);
}

.login-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.15);
}

.login-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.login-button {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.65rem 1rem;
    margin-top: 1.25rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-dark);
    cursor: pointer;
    transition: background 0.15s ease;
}

.login-button:hover {
    background: var(--color-accent-light);
}

.login-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-top: 1.5rem;
}

/* --- Onboarding (first-login profile capture) --- */

.onboarding-card {
    max-width: 460px;
}

.onboarding-heading {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--color-text);
}

.onboarding-lede {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.login-label-optional {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}

/* --- Nav Links --- */

.nav-link {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.nav-link:hover {
    color: var(--color-accent-fg);
}

/* --- Sidebar --- */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-collapsed);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    z-index: 40;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 150ms ease;
    /* Accent text inside the sidebar tracks --sidebar-text-active so it
       stays legible against the sidebar surface in either theme. Light
       mode: midnight on cream-tint (no-op vs the root default). Dark
       mode: lime on midnight (matches root). */
    --color-accent-fg: var(--sidebar-text-active);
}

/* `:root.sidebar-pinned .sidebar` is the pre-paint companion to
   `.sidebar.pinned` (t-paliad-142). The FOUC script in PWAHead.tsx sets
   the html class before paint, so the sidebar element renders at pinned
   width from frame 1; runtime initSidebar later mirrors `.pinned` onto
   the element itself for the explicit pin/unpin click animation. Same
   pattern as the `.has-sidebar.sidebar-pinned` / `:root.sidebar-pinned
   .has-sidebar` pair below. */
.sidebar.expanded,
.sidebar.pinned,
:root.sidebar-pinned .sidebar {
    width: var(--sidebar-width);
}

.sidebar.resizing,
.sidebar.resizing .sidebar-label,
.has-sidebar.sidebar-resizing {
    transition: none !important;
}

.sidebar-header {
    display: flex;
    align-items: center;
    height: 3.5rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--sidebar-text);
    flex: 1;
    min-width: 0;
    height: 100%;
}

.sidebar-logo .logo-text {
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.sidebar-pin {
    background: none;
    border: none;
    color: var(--sidebar-text-muted);
    cursor: pointer;
    padding: 0.35rem;
    margin-right: 0.75rem;
    border-radius: 4px;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, color 150ms ease, background 150ms ease;
}

.sidebar.expanded .sidebar-pin,
.sidebar.pinned .sidebar-pin,
:root.sidebar-pinned .sidebar .sidebar-pin {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-pin:hover {
    color: var(--sidebar-text-active);
    background: var(--sidebar-hover-bg);
}

.sidebar-pin svg {
    width: 16px;
    height: 16px;
    display: block;
}

.sidebar.pinned .sidebar-pin,
:root.sidebar-pinned .sidebar .sidebar-pin {
    color: var(--sidebar-text-active);
}

/* Vertical drag-strip on the sidebar's right edge. Only meaningful when
   the sidebar is wide enough to show labels (expanded or pinned), so
   collapsed/icon-rail state hides it. Positioned slightly off-edge for
   easier hit; pointer-events stay enabled only when visible. */
.sidebar-resize-handle {
    position: absolute;
    top: 0;
    right: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 41;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, background 150ms ease;
    user-select: none;
    touch-action: none;
}

.sidebar.expanded .sidebar-resize-handle,
.sidebar.pinned .sidebar-resize-handle,
:root.sidebar-pinned .sidebar .sidebar-resize-handle {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-resize-handle:hover,
.sidebar.resizing .sidebar-resize-handle {
    background: var(--color-accent);
    opacity: 0.5;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    /* Themed thin scrollbar — cream-channel alpha so it reads as part of
       the midnight sidebar surface in both light and dark mode. The
       gutter is reserved (`stable`) so the sidebar's icon column doesn't
       shift left when the scrollbar appears (admin nav can be tall
       enough to overflow on shorter viewports). */
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scrollbar-thumb) transparent;
    scrollbar-gutter: stable;
}

/* WebKit fallback (Safari, older Chromium): explicit thumb styling. The
   thumb width matches --sidebar-scrollbar-width so the visual gutter is
   the same on Firefox (`scrollbar-width: thin`) and Webkit. */
.sidebar-nav::-webkit-scrollbar {
    width: var(--sidebar-scrollbar-width);
}
.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--sidebar-scrollbar-thumb);
    border-radius: 3px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-scrollbar-thumb-hover);
}

.sidebar-item {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    color: var(--sidebar-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    transition: color 150ms ease, background 150ms ease;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font-sans);
    width: 100%;
    text-align: left;
    padding: 0;
}

.sidebar-item:hover {
    color: var(--sidebar-text);
    background: var(--sidebar-hover-bg);
}

.sidebar-item.active {
    color: var(--sidebar-text-active);
}

.sidebar-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    /* Brand lime in both themes — keeps the active cue visually anchored
       even when the active text colour flips between midnight (light) and
       lime (dark). */
    background: var(--color-accent);
    border-radius: 0 2px 2px 0;
}

.sidebar-icon {
    /* Width accounts for the reserved scrollbar gutter on .sidebar-nav so
       icons stay visually centered inside the 64px collapsed rail rather
       than drifting left when the scrollbar appears (or appearing left of
       center even when it doesn't, since `scrollbar-gutter: stable`
       always reserves the gutter). The other sidebar items (header,
       bottom, hamburger) sit outside .sidebar-nav and are unaffected. */
    width: calc(var(--sidebar-collapsed) - var(--sidebar-scrollbar-width));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-icon svg {
    width: 20px;
    height: 20px;
}

.sidebar-label {
    opacity: 0;
    white-space: nowrap;
    transition: opacity 150ms ease;
    overflow: hidden;
    padding-right: 1rem;
}

.sidebar.expanded .sidebar-label,
.sidebar.pinned .sidebar-label,
:root.sidebar-pinned .sidebar .sidebar-label {
    opacity: 1;
}

.sidebar-spacer {
    flex: 1;
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-lang-item {
    cursor: default;
}

.sidebar-lang-item:hover {
    background: transparent;
    color: var(--sidebar-text-muted);
}

.sidebar-lang {
    display: flex;
    align-items: center;
}

.sidebar-hamburger {
    display: none;
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 50;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: background 150ms ease;
}

.sidebar-hamburger:hover {
    background: var(--color-accent-light);
}

.sidebar-hamburger svg {
    width: 22px;
    height: 22px;
}

.sidebar-overlay {
    display: none;
}

/* Layout: pages with sidebar */

.has-sidebar {
    padding-left: var(--sidebar-collapsed);
    transition: padding-left 150ms ease;
}

/* Two selectors apply the pinned padding because the pre-paint inline
   script in PWAHead.tsx sets `<html class="sidebar-pinned">` (body
   doesn't exist yet at that point), while the runtime sidebar.ts later
   adds `sidebar-pinned` to `<body>` too. Either source is sufficient
   and they don't conflict. Keeping both keeps the legacy DOM contract
   intact (sidebar.ts continues to manage the body class). */
.has-sidebar.sidebar-pinned,
:root.sidebar-pinned .has-sidebar {
    padding-left: var(--sidebar-width);
}

.has-sidebar .tool-results {
    top: 1.5rem;
}

.no-scroll {
    overflow: hidden;
}

/* --- Tool Pages --- */

.tool-page {
    padding: 2rem 0 4rem;
}

.tool-header {
    margin-bottom: 2rem;
}

.tool-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tool-subtitle {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    margin-top: 0.5rem;
    line-height: 1.6;
}

.tool-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.tool-input {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tool-results {
    position: sticky;
    top: 4.5rem;
}

/* Input sections */

.input-section h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}


.input-section select {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-input-bg);
    color: var(--color-text);
    outline: none;
    cursor: pointer;
}

.input-section select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.15);
}

/* Streitwert */

.streitwert-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.streitwert-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.streitwert-prefix {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-text-muted);
}

.streitwert-field {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
    width: 100%;
    max-width: 240px;
}

.streitwert-field:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.15);
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: pointer;
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    cursor: pointer;
    border: 2px solid var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.streitwert-presets {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.streitwert-presets button {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.streitwert-presets button:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.streitwert-presets button.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* Instance cards */

.instance-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    transition: border-color 0.15s ease;
}

.instance-card.enabled {
    border-color: var(--color-accent-light);
}

.instance-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
}

.instance-header input[type="checkbox"] {
    accent-color: var(--color-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.instance-header label {
    flex: 1;
    font-size: 0.88rem;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.instance-header label strong {
    font-weight: 500;
}

.instance-toggle {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem;
}

.instance-details {
    padding: 0.75rem 0.85rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.instance-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.field-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
}

.field-row select {
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
}

.field-row input[type="checkbox"] {
    accent-color: var(--color-accent);
}

/* Results panel */

.result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.result-total-section {
    text-align: center;
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--color-accent);
}

.result-total-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.result-total {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-accent-fg);
}

.result-empty {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    padding: 2rem 0;
}

.result-summary {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.result-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0.2rem 0;
    color: var(--color-text-muted);
}

.result-section {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.result-section:last-child {
    border-bottom: none;
}

.result-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.result-section-label {
    font-size: 0.88rem;
    font-weight: 600;
}

.result-section-total {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-accent-fg);
}

.result-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    padding: 0.15rem 0;
    color: var(--color-text-muted);
}

.result-detail-sum {
    font-weight: 600;
    color: var(--color-text);
    padding-top: 0.25rem;
    border-top: 1px dotted var(--color-border);
    margin-top: 0.15rem;
}

.result-attorney-detail {
    margin: 0.4rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--color-border);
}

.result-detail-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: 0.15rem;
}

.result-detail-note {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
}

/* Result action buttons */

.result-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.result-action-btn {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.result-action-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.result-action-btn--accent {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

.result-action-btn--accent:hover {
    background: var(--color-accent-light);
    border-color: var(--color-accent-light);
    color: var(--color-accent-dark);
}

.result-action-btn.copied {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* Scenario comparison */

.comparison-container {
    margin-top: 2rem;
}

.comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.comparison-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.comparison-col-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.comparison-diff {
    margin-top: 1.5rem;
}

.comparison-diff-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
}

.comparison-diff-card.diff-decrease {
    border-color: var(--color-accent);
    background: rgb(var(--hlc-lime-rgb) / 0.04);
}

.comparison-diff-card.diff-increase {
    border-color: #e53e3e;
    background: rgba(229, 62, 62, 0.04);
}

.comparison-diff-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.comparison-diff-value {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
}

.diff-decrease .comparison-diff-value {
    color: var(--color-accent-fg);
}

.diff-increase .comparison-diff-value {
    color: #e53e3e;
}

.diff-neutral .comparison-diff-value {
    color: var(--color-text-muted);
}

.comparison-diff-pct {
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
}

.comparison-diff-detail {
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    text-align: left;
}

/* Print header/footer (hidden on screen) */

.print-header,
.print-footer {
    display: none;
}

/* --- Fristenrechner --- */

/* Fristenrechner v3 (t-paliad-133) — landing fork + pathway shells.
   The fork is the default landing surface. Each pathway is a peer
   container that slides in once chosen; back-button returns to fork. */

.fristen-pathway-fork {
    margin: 2rem 0 2.5rem;
    padding: 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}

.fristen-pathway-fork-heading {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.fristen-pathway-fork-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 720px) {
    .fristen-pathway-fork-cards {
        grid-template-columns: 1fr;
    }
}

.fristen-pathway-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms, box-shadow 120ms, transform 60ms;
}

.fristen-pathway-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.fristen-pathway-card:active {
    transform: translateY(1px);
}

.fristen-pathway-card:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.fristen-pathway-card-icon {
    font-size: 1.75rem;
    line-height: 1;
}

.fristen-pathway-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
}

.fristen-pathway-card-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.fristen-pathway-fork-shortcut {
    border-top: 1px dashed var(--color-border);
    padding-top: 1rem;
}

.fristen-pathway-fork-shortcut-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.fristen-pathway-shell {
    margin: 1.5rem 0;
}

.fristen-pathway-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    border-radius: 4px;
}

.fristen-pathway-back:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}

.fristen-pathway-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text);
}

.fristen-b1-stub {
    padding: 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

/* t-paliad-180 Slice 1 — Determinator row-stack primitive.
 *
 * Every decision (mode, perspective, inbox, cascade depth N) renders as
 * a `.fristen-row` with three possible states: `is-active` (user is
 * picking — expands to show chips), `is-answered` (compact single-line
 * paper-trail row), `is-prefilled` (answered but the value came from
 * the project context, marked with a `aus Akte` tag).
 *
 * Layout is column-flex: rows stack top-to-bottom, the active row's
 * chip body wraps as a responsive grid. The whole-row click on an
 * answered/prefilled row re-activates it (handled via JS row-level
 * click handlers, never a `::before { inset: 0 }` overlay — see
 * CLAUDE.md "Whole-card / whole-row click").
 */
.fristen-row-stack-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.fristen-row-search-link,
.fristen-row-reset-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
    transition: border-color 120ms, color 120ms, background 120ms;
}

.fristen-row-search-link:hover,
.fristen-row-reset-link:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
    background: var(--color-bg-subtle, var(--color-bg-muted));
}

.fristen-row-search-link:focus-visible,
.fristen-row-reset-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.fristen-row-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

/* When inline search is active, the stack-header's reset link is the
 * only chrome that doesn't make sense — the search panel has its own
 * "← back to decision tree" button at the top. */
.fristen-row-stack-header.is-inline-search-active .fristen-row-search-link,
.fristen-row-stack-header.is-inline-search-active .fristen-row-reset-link {
    display: none;
}

/* t-paliad-198 Slice 3 — inline search overlay. Expands above the row
 * stack when the `🔍 Direkt suchen` button is clicked. The row stack
 * itself is hidden via the JS toggle on `#fristen-row-stack`; the
 * search input drives the same `#fristen-b1-results` container the
 * cascade narrows into. */
.fristen-row-search-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem 1rem;
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
}

.fristen-row-search-panel-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    border-radius: 4px;
}

.fristen-row-search-panel-back:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}

.fristen-row-search-panel-back:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.fristen-row-search-panel-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
}

.fristen-row-search-panel-input-wrap:focus-within {
    border-color: var(--color-accent);
}

.fristen-row-search-panel-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.fristen-row-search-panel-input {
    flex: 1 1 auto;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 1rem;
    padding: 0.4rem 0;
    outline: none;
}

.fristen-row-search-panel-input::placeholder {
    color: var(--color-text-muted);
}

.fristen-row-search-panel-clear {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

.fristen-row-search-panel-clear:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}

.fristen-row-search-panel-clear:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.fristen-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    transition: background 120ms, border-color 120ms;
}

.fristen-row.is-active {
    background: var(--color-bg-subtle, var(--color-bg-muted));
    border-color: var(--color-accent);
    border-left-width: 4px;
    padding: 0.85rem 1rem;
}

.fristen-row.is-answered {
    background: transparent;
    border-color: var(--color-border);
}

.fristen-row.is-prefilled {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    border-left-width: 4px;
}

.fristen-row.is-answered,
.fristen-row.is-prefilled {
    cursor: pointer;
}

.fristen-row.is-answered:hover,
.fristen-row.is-prefilled:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-subtle, var(--color-bg-muted));
}

.fristen-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    min-height: 1.6rem;
}

.fristen-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.fristen-row.is-active .fristen-row-num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    /* Lime is high-luminance; foreground stays midnight in both themes via
       --color-accent-dark (light: midnight by default, dark: midnight
       explicit). Using --color-text here would flip to cream in dark mode
       and collapse contrast on lime. */
    color: var(--color-accent-dark);
}

.fristen-row.is-prefilled .fristen-row-num {
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
}

.fristen-row-label {
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
}

.fristen-row.is-active .fristen-row-label {
    font-weight: 600;
    font-size: 1.05rem;
}

.fristen-row-answer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--color-text);
}

.fristen-row-answer-check {
    color: var(--color-accent);
    font-weight: 700;
}

.fristen-row-answer-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.fristen-row-prefilled-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    font-style: italic;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* Reference identifier (project.reference / "HL-2024-001") inside the
 * prefilled tag. Rendered upper-case and not italic so the project ID
 * stands out from the surrounding "aus Akte" italic text. */
.fristen-row-prefilled-ref {
    font-style: normal;
    text-transform: none;
    font-weight: 600;
    color: var(--color-text);
}

/* t-paliad-197 Slice 2 — auto-walk inline tooltip. Surfaces once per
 * user per browser when ≥ 2 cascade rows render in is-prefilled state.
 * Slots above the first prefilled row inside the stack so it reads as
 * a contextual hint rather than a global banner. The dismiss button
 * removes the element and writes a localStorage flag so the tooltip
 * never re-surfaces in this browser. */
.fristen-row-autowalk-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.25rem 0 0.4rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
    border-left-width: 4px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    font-size: 0.85rem;
    color: var(--color-text);
    /* t-paliad-198 Slice 3: fade-in + slight slide-down on first paint.
     * The is-entering class is applied at injection and removed on the
     * next animation frame so the transition fires from the initial
     * offset state to the resting state. ~200ms keeps it subtle — the
     * user notices the hint without it feeling theatrical. */
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease, transform 200ms ease;
}

.fristen-row-autowalk-tip.is-entering {
    opacity: 0;
    transform: translateY(-4px);
}

/* Mobile (<640px): the tooltip sits below the prefilled row instead of
 * above it, so the user's eye lands on the row's "aus Akte" tag first
 * and reads the explanation beneath. The transform offset flips
 * accordingly. */
@media (max-width: 640px) {
    .fristen-row.is-prefilled + .fristen-row-autowalk-tip,
    .fristen-row-autowalk-tip {
        margin: 0 0 0.4rem;
        font-size: 0.8rem;
    }
    .fristen-row-autowalk-tip.is-entering {
        transform: translateY(4px);
    }
}

.fristen-row-autowalk-tip-icon {
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--color-accent);
}

.fristen-row-autowalk-tip-text {
    flex: 1 1 auto;
}

.fristen-row-autowalk-tip-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    border-radius: 4px;
}

.fristen-row-autowalk-tip-dismiss:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}

.fristen-row-autowalk-tip-dismiss:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.fristen-row-edit {
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    font-size: 0.8rem;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 120ms, color 120ms, background 120ms;
}

.fristen-row.is-answered:hover .fristen-row-edit,
.fristen-row.is-prefilled .fristen-row-edit,
.fristen-row:focus-within .fristen-row-edit {
    opacity: 1;
}

.fristen-row-edit:hover {
    color: var(--color-text);
    background: var(--color-bg-muted);
}

.fristen-row-edit:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.fristen-row-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin-left: 2.1rem;
}

.fristen-row-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    cursor: pointer;
    font-size: 0.95rem;
    text-align: left;
    color: var(--color-text);
    transition: border-color 120ms, background 120ms;
}

.fristen-row-chip:hover {
    border-color: var(--color-accent);
    background: var(--color-bg-muted);
}

.fristen-row-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.fristen-row-chip.is-picked {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.fristen-row-chip--leaf {
    /* Leaf nodes get a subtle accent marker so users sense they'll see
       results, not deeper buttons. */
    border-left: 3px solid var(--color-accent);
}

.fristen-row-chip-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.fristen-row-chip-label {
    flex: 1;
}

/* t-paliad-198 Slice 3 — responsive row-stack breakpoints (design §7).
 *
 * Default (above): desktop layout — head + chip body share the row, chips
 * wrap into a 3-column grid via auto-fill 220px.
 *
 * 768–1023px (tablet density): same head layout but chip grid drops to
 * 2 columns (auto-fill 200px) so each chip stays comfortably tappable.
 *
 * 640–767px (small tablet / large phone): head wraps so the ändern
 * affordance moves to its own line; chip grid is single-column to keep
 * the chip body legible.
 *
 * <640px (phone): chips full-width single-column; ändern stays
 * permanently visible (no hover state to reveal it on touch); the row
 * num badge tucks into the same line as the label to save vertical
 * space.
 */
@media (max-width: 1023px) {
    .fristen-row-body {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (max-width: 767px) {
    .fristen-row {
        padding: 0.6rem 0.75rem;
    }
    .fristen-row.is-active {
        padding: 0.85rem 0.85rem;
    }
    .fristen-row-head {
        gap: 0.4rem;
    }
    .fristen-row-body {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        margin-left: 1.9rem;
    }
    .fristen-row-edit {
        opacity: 1;
        margin-left: auto;
    }
}

@media (max-width: 640px) {
    .fristen-row-body {
        grid-template-columns: 1fr;
        margin-left: 0;
    }
    .fristen-row-head {
        gap: 0.4rem;
        flex-wrap: wrap;
    }
    .fristen-row-answer {
        flex-basis: 100%;
        margin-left: 2rem;
    }
    .fristen-row-edit {
        opacity: 1;
    }
    .fristen-row-chip {
        padding: 0.75rem 0.85rem;
    }
}

.fristen-b1-loosen-link {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    margin-right: 0.5rem;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.fristen-b1-loosen-link:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.fristen-b1-loosen-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.fristen-b1-error {
    padding: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.fristen-forum-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 0 1rem;
}

.fristen-forum-filter-label {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.fristen-forum-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fristen-forum-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text);
    transition: background 120ms, border-color 120ms;
}

.fristen-forum-chip:hover {
    background: var(--color-bg-muted);
}

.fristen-forum-chip--active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-text, #000);
    font-weight: 500;
}

/* Phase D search (t-paliad-131) — augments the proceeding tile grid by
   letting the user type a phrase and drill into the right calculator
   from a ranked card list. Sits above the mode tabs. */
.fristen-search {
    margin-bottom: 1.5rem;
}

.fristen-search-row {
    position: relative;
    display: flex;
    align-items: center;
}

.fristen-search-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--color-muted, #777);
    pointer-events: none;
}

.fristen-search-input {
    flex: 1;
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.6rem;
    font-size: 1rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    background: var(--color-bg, #fff);
    color: var(--color-text, #222);
}

.fristen-search-input:focus {
    outline: none;
    border-color: var(--color-accent, #c6f41c);
    box-shadow: 0 0 0 3px rgba(198, 244, 28, 0.25);
}

.fristen-search-clear {
    position: absolute;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-muted, #777);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}

.fristen-search-clear:hover {
    background: var(--color-bg-subtle, #f4f4f4);
    color: var(--color-text, #222);
}

.fristen-search-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.fristen-search-chips-label {
    font-size: 0.875rem;
    color: var(--color-muted, #666);
    margin-right: 0.25rem;
}

.fristen-search-chip {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-bg, #fff);
    color: var(--color-text, #222);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.fristen-search-chip:hover {
    background: var(--color-bg-subtle, #f7f7f7);
    border-color: var(--color-text-muted, #aaa);
}

.fristen-search-chip:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

.fristen-search-results,
.fristen-b1-results {
    margin-top: 1rem;
}

.fristen-search-results.is-loading,
.fristen-b1-results.is-loading {
    opacity: 0.55;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.fristen-b1-results {
    margin-top: 1.5rem;
}

.fristen-search-status {
    padding: 1rem;
    color: var(--color-muted, #666);
    font-size: 0.95rem;
    text-align: center;
}

.fristen-search-error {
    color: var(--color-error, #b00020);
}

.fristen-search-summary {
    font-size: 0.85rem;
    color: var(--color-muted, #666);
    margin-bottom: 0.5rem;
}

.fristen-search-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.fristen-card {
    border: 1px solid var(--color-border, #ddd);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    background: var(--color-bg, #fff);
}

.fristen-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.fristen-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text, #222);
}

.fristen-card-altname {
    font-size: 0.85rem;
    color: var(--color-muted, #777);
    font-style: italic;
}

.fristen-card-desc {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.92rem;
    color: var(--color-text-muted, #555);
    line-height: 1.45;
}

.fristen-card-aliases {
    font-size: 0.82rem;
    color: var(--color-muted, #888);
    margin-bottom: 0.6rem;
}

.fristen-card-aliases-label {
    font-weight: 500;
    color: var(--color-muted, #777);
    margin-right: 0.25rem;
}

.fristen-card-pills-section {
    margin-top: 0.7rem;
}

.fristen-card-pills-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #888);
    margin: 0 0 0.4rem;
    font-weight: 600;
}

.fristen-card-pills {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Each pill is one (proceeding × rule) or one cross-cutting trigger.
   Click navigates into the right calculator mode pre-selected. The
   anchor element preserves middle-click / cmd-click "open in new tab"
   semantics — the JS handler skips drill-in for those modifier clicks. */
.fristen-pill {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr) auto auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-subtle, #ececec);
    border-radius: 6px;
    background: var(--color-bg-subtle, #fafafa);
    color: var(--color-text, #222);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.fristen-pill:hover {
    background: rgba(198, 244, 28, 0.08);
    border-color: var(--color-accent, #c6f41c);
}

.fristen-pill:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

.fristen-pill-proc {
    font-weight: 600;
    font-size: 0.86rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fristen-pill-proc--cross {
    font-style: italic;
    color: var(--color-muted, #888);
}

.fristen-pill-rule {
    font-size: 0.86rem;
    color: var(--color-text-muted, #444);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fristen-pill-source {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-size: 0.8rem;
    color: var(--color-muted, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fristen-pill-duration {
    font-size: 0.82rem;
    color: var(--color-text-muted, #444);
    white-space: nowrap;
}

.fristen-pill-party {
    font-size: 0.74rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.fristen-pill-party--claimant {
    background: rgba(54, 160, 255, 0.12);
    color: #1a6dba;
    border-color: rgba(54, 160, 255, 0.3);
}

.fristen-pill-party--defendant {
    background: rgba(220, 90, 60, 0.12);
    color: #a0381f;
    border-color: rgba(220, 90, 60, 0.3);
}

.fristen-pill-party--both {
    background: rgba(120, 120, 120, 0.12);
    color: #555;
    border-color: rgba(120, 120, 120, 0.3);
}

.fristen-pill-party--court {
    background: rgba(190, 130, 0, 0.12);
    color: #8a5d00;
    border-color: rgba(190, 130, 0, 0.3);
}

@media (max-width: 720px) {
    .fristen-pill {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        row-gap: 0.25rem;
    }
    .fristen-pill-rule { grid-column: 1 / -1; }
    .fristen-pill-source { grid-column: 1 / -1; }
    .fristen-pill-duration { grid-column: 1; }
    .fristen-pill-party { grid-column: 2; }
}

/* v4 (t-paliad-136 Phase B): card-click → inline calc panel.
   The card is now interactive — click anywhere in the body (or on a
   pill) to expand the panel that holds the trigger-date input, flag
   checkboxes, computed deadline, and "Add to project" CTA. Only one
   card may be expanded at a time; opening another collapses the
   previous. */
.fristen-card[role="button"] {
    cursor: pointer;
    transition: border-color 120ms, box-shadow 120ms;
}
.fristen-card[role="button"]:hover:not(.is-expanded) {
    border-color: var(--brand-lime, #c6f41c);
    box-shadow: 0 0 0 2px rgba(198, 244, 28, 0.18);
}
.fristen-card.is-expanded {
    border-color: var(--brand-lime, #c6f41c);
    box-shadow: 0 0 0 2px rgba(198, 244, 28, 0.25);
}

.fristen-card-calc {
    margin-top: 1rem;
    padding: 0.9rem 1rem 0.8rem;
    border-top: 1px dashed var(--color-border, #e2e2e2);
    background: rgba(198, 244, 28, 0.04);
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    position: relative;
    cursor: default;
}

.fristen-card-calc-close {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-muted, #888);
    cursor: pointer;
    padding: 0.1rem 0.4rem;
}
.fristen-card-calc-close:hover {
    color: var(--color-text, #222);
}

.fristen-card-calc-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #777);
    font-weight: 600;
    display: block;
    margin-bottom: 0.3rem;
}

.fristen-card-calc-pill-picker {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.fristen-card-calc-pill-picker legend {
    padding: 0;
    margin-bottom: 0.3rem;
}

.fristen-card-calc-pill-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border-subtle, #ececec);
    border-radius: 5px;
    background: var(--color-bg, #fff);
    cursor: pointer;
    font-size: 0.88rem;
}
.fristen-card-calc-pill-option:has(input:checked) {
    border-color: var(--brand-lime, #c6f41c);
    background: rgba(198, 244, 28, 0.08);
}
.fristen-card-calc-pill-option-proc {
    font-weight: 600;
    color: var(--color-text, #222);
}
.fristen-card-calc-pill-option-rule {
    color: var(--color-text, #222);
}
.fristen-card-calc-pill-option-source {
    font-size: 0.8rem;
    color: var(--color-muted, #888);
    font-family: ui-monospace, monospace;
}

/* m/paliad#57 part 4 — once a card is expanded into a calc panel,
   the rule-pill list is redundant with the calc panel's context
   picker (locked caption or fieldset). Hide it so the user isn't
   asked the same thing twice. The cross-cutting section stays —
   those pills are alternative concepts to explore, not the same
   proceeding context. */
.fristen-card.is-expanded .fristen-card-pills-section--rules {
    display: none;
}

/* Locked-context caption when the user clicked a specific rule pill
   to expand. Shows the picked (proceeding, rule) tuple compactly
   with a small "ändern" button to swap back to the radio picker. */
.fristen-card-calc-pill-locked {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-border-subtle, #ececec);
    border-radius: 5px;
    background: rgba(198, 244, 28, 0.06);
    font-size: 0.88rem;
}
.fristen-card-calc-pill-locked-label {
    font-weight: 600;
    color: var(--color-muted, #777);
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}
.fristen-card-calc-pill-locked-proc {
    font-weight: 600;
    color: var(--color-text, #222);
}
.fristen-card-calc-pill-locked-rule {
    color: var(--color-text, #222);
}
.fristen-card-calc-pill-locked-source {
    font-size: 0.8rem;
    color: var(--color-muted, #888);
    font-family: ui-monospace, monospace;
}
.fristen-card-calc-pill-change {
    margin-left: auto;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-link, #1267a8);
    cursor: pointer;
    font-size: 0.82rem;
    text-decoration: underline;
}
.fristen-card-calc-pill-change:hover { text-decoration: none; }

.fristen-card-calc-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.fristen-card-calc-trigger {
    display: flex;
    flex-direction: column;
    min-width: 200px;
}
.fristen-card-calc-trigger-input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 5px;
    font-size: 0.95rem;
    background: var(--color-bg, #fff);
}

.fristen-card-calc-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}
.fristen-card-calc-flag {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.88rem;
    padding: 0.3rem 0.55rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border-subtle, #ececec);
    border-radius: 4px;
    cursor: pointer;
}
.fristen-card-calc-flag:has(input:checked) {
    border-color: var(--brand-lime, #c6f41c);
    background: rgba(198, 244, 28, 0.08);
}

.fristen-card-calc-result {
    padding: 0.6rem 0.8rem;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border-subtle, #ececec);
    border-radius: 6px;
    min-height: 2.6rem;
}
.fristen-card-calc-result-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fristen-card-calc-result-arrow {
    color: var(--brand-lime-strong, #88a800);
    font-weight: 700;
}
.fristen-card-calc-result-due strong {
    font-size: 1.1rem;
    color: var(--color-text, #222);
}
.fristen-card-calc-result-detail {
    color: var(--color-muted, #777);
    font-size: 0.88rem;
}
.fristen-card-calc-result-rule {
    color: var(--color-muted, #888);
    font-size: 0.83rem;
    margin-top: 0.3rem;
    font-style: italic;
}
.fristen-card-calc-result-shift {
    margin-top: 0.4rem;
    padding: 0.4rem 0.55rem;
    background: rgba(255, 184, 0, 0.1);
    border-left: 3px solid #f5a800;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #6c4a00;
}
.fristen-card-calc-result-status {
    color: var(--color-muted, #888);
    font-size: 0.9rem;
    font-style: italic;
}
.fristen-card-calc-result-error {
    color: var(--color-danger, #c44);
    font-style: normal;
}
.fristen-card-calc-result-court {
    color: #8a5d00;
    font-style: normal;
}

.fristen-card-calc-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.fristen-card-calc-add[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.fristen-card-calc-msg {
    font-size: 0.88rem;
    min-height: 0;
}
.fristen-card-calc-msg .form-msg {
    display: inline-block;
    padding: 0.3rem 0.55rem;
    border-radius: 4px;
}
.fristen-card-calc-msg .form-msg-ok {
    background: rgba(140, 200, 80, 0.15);
    color: #2e6a16;
}
.fristen-card-calc-msg .form-msg-error {
    background: rgba(200, 60, 60, 0.1);
    color: #a31919;
}

.fristen-card-calc-add-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.5rem;
    border: 1px solid var(--color-border-subtle, #ececec);
    border-radius: 5px;
    background: var(--color-bg, #fff);
}
.fristen-card-calc-add-select {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
    min-width: 240px;
    font-size: 0.95rem;
}

@media (max-width: 720px) {
    .fristen-card-calc-pill-option {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }
    .fristen-card-calc-pill-option-rule,
    .fristen-card-calc-pill-option-source { grid-column: 2; }
}

/* Drill-in highlight — applied to the focused timeline / column row for
   ~2.4 s after a pill click pre-selects the proceeding and computes the
   timeline. Fades the row to draw attention without staying loud. */
.fristen-focus-highlight {
    animation: fristen-focus-pulse 2.4s ease-out;
    border-radius: 6px;
}

@keyframes fristen-focus-pulse {
    0%   { background: rgba(198, 244, 28, 0.55); box-shadow: 0 0 0 4px rgba(198, 244, 28, 0.35); }
    40%  { background: rgba(198, 244, 28, 0.30); }
    100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}

.fristen-mode-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.mode-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: -1px;
}

.mode-tab:hover {
    color: var(--color-text);
}

.mode-tab.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
    font-weight: 600;
}

.mode-panel[hidden] {
    display: none;
}

.fristen-wizard {
    max-width: 720px;
}

/* --- Event mode (Was kommt nach…) --- */

.wizard-step-hint {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: -0.4rem 0 1rem;
}

.event-picker-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-search-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
}

.event-search-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
}

.event-list-item {
    padding: 0.55rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
    line-height: 1.35;
}

.event-list-item:last-child { border-bottom: none; }

.event-list-item:hover,
.event-list-item:focus {
    background: var(--color-bg-lime-tint);
    outline: none;
}

.event-list-empty {
    padding: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

.event-results-header {
    background: var(--color-surface-muted);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.event-results-empty {
    padding: 1rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.event-result-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.event-result-row {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.8rem 1rem;
}

.event-result-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}

.event-result-title {
    font-weight: 600;
    color: var(--color-text);
}

.event-result-date {
    font-variant-numeric: tabular-nums;
    color: var(--color-accent-fg);
    font-weight: 600;
}

.event-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.event-result-duration {
    background: var(--color-surface-muted);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.event-rule-code {
    background: var(--color-bg-lime-tint);
    color: var(--color-accent-fg);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.78rem;
}

.event-result-composite,
.event-result-adjusted {
    margin-top: 0.4rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.event-result-notes {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.4;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.wizard-step {
    margin-bottom: 2rem;
}

.wizard-step-label {
    font-size: 0.92rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.proceeding-group {
    margin-bottom: 1.25rem;
}

.proceeding-group h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

/* Sub-group inside a .proceeding-group — used today by the DE block
   to split Verletzungsverfahren tiles from Nichtigkeitsverfahren tiles
   under one "Deutsche Gerichte" h4. Heading is one tier below the h4
   (mixed-case, no upper-tracking) so the two-level hierarchy reads at
   a glance. */
.proceeding-subgroup {
    margin-top: 0.6rem;
}

.proceeding-subgroup:first-child {
    margin-top: 0;
}

.proceeding-subgroup-heading {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.35rem 0;
}

.proceeding-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.proceeding-btn {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.proceeding-btn:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
}

.proceeding-btn.active {
    border-color: var(--color-accent);
    background: rgb(var(--hlc-lime-rgb) / 0.06);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.15);
}

.proceeding-btn strong {
    font-weight: 500;
}

/* Date input */

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
}

.date-field-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Nested checkbox under a parent flag (e.g. upc.inf.cfi inf-amend-flag is
   only meaningful with ccr-flag on — indent so the dependency is
   visible). */
.date-field-row--nested {
    margin-left: 1.5rem;
}
.date-field-row--nested input[type="checkbox"]:disabled + span {
    color: var(--color-text-muted);
}

.date-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    min-width: 160px;
}

.trigger-event-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-accent-fg);
}

.date-input {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    outline: none;
}

.date-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.15);
}

.calculate-btn {
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-dark);
    cursor: pointer;
    transition: background 0.15s ease;
    align-self: flex-start;
}

.calculate-btn:hover {
    background: var(--color-accent-light);
}

.reset-btn {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.reset-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

/* Timeline */

.timeline-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-accent);
}

.timeline-header strong {
    font-size: 1rem;
}

/* Sub-track contextual note banner (m/paliad#58). Renders above the
   timeline body when the picked proceeding is a sub-track of another
   proceeding (e.g. UPC CCR rendered standalone). Plain-text content;
   white-space: pre-line preserves paragraph breaks if server copy
   ever uses them. */
.timeline-context-note {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: rgba(198, 244, 28, 0.10);
    border-left: 3px solid var(--brand-lime, #c6f41c);
    border-radius: 4px;
    color: var(--color-text, #222);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-line;
}

.timeline {
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 0.75rem;
    /* t-paliad-293: tighter min-height. Previously 4rem — too much
       vertical air per card on long projections. Title row + meta row
       fits comfortably in 2.75rem; longer cards (with notes expanded
       or adjusted-date banners) still grow naturally. */
    min-height: 2.75rem;
}

.timeline-item:last-child .timeline-line {
    display: none;
}

.timeline-dot-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 14px;
    flex-shrink: 0;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 2px var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.dot-root {
    width: 14px;
    height: 14px;
    margin-top: 0.2rem;
}

.timeline-line {
    width: 2px;
    flex: 1;
    background: var(--color-border);
    margin: 0.25rem 0;
}

.timeline-content {
    flex: 1;
    /* t-paliad-293: tighter inter-card gutter. Was 1rem; 0.6rem keeps
       the dotted-connector line readable without bloating long
       projections. */
    padding-bottom: 0.6rem;
    min-width: 0;
}

.timeline-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    /* t-paliad-293: allow shrink + wrap so a long title plus the state
       icons + caret never push the card past its column. Combined with
       min-width:0 on the name, no inline child can blow the row width
       on 375/414/768 viewports. */
    flex-wrap: wrap;
    min-width: 0;
}

.timeline-name {
    font-size: 0.88rem;
    font-weight: 500;
    /* min-width:0 lets the name shrink and wrap inside its flex parent
       — otherwise overflow:hidden in an ancestor would clip it but the
       flex item would still demand its intrinsic width. */
    min-width: 0;
    /* Word-break on long German compounds (Vertraulichkeitswiderklage …)
       so they wrap mid-word rather than pushing the date column off-
       screen. (t-paliad-293) */
    overflow-wrap: anywhere;
}

.timeline-date {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.timeline-court-set {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: right;
}

/* t-paliad-131: click-to-edit on timeline / column dates. Lets the user
   override the calculated date (court extension) or fill in a court-set
   placeholder once the real decision date is known. Subtle hover hint —
   the affordance must be discoverable without dominating the layout.
   The inline editor input replaces the span on click and commits on
   blur / Enter. */
.frist-date-edit {
    cursor: pointer;
    border-bottom: 1px dashed transparent;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.frist-date-edit:hover,
.frist-date-edit:focus-visible {
    border-bottom-color: var(--color-text-muted);
    outline: none;
}

.timeline-date--overridden {
    color: var(--color-accent-fg, #4d7c0f);
    border-bottom: 1px solid var(--color-accent, #c6f41c);
}

.frist-date-edit-input {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--color-accent, #c6f41c);
    border-radius: 3px;
    background: var(--color-bg);
    color: var(--color-text);
}

.timeline-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.party-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
}

.party-claimant {
    background: var(--status-blue-bg);
    color: var(--status-blue-fg);
}

.party-defendant {
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

.party-court {
    background: var(--status-blue-soft-bg);
    color: var(--status-blue-soft-fg);
}

.party-both {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg-3);
}

/* t-paliad-293 — compact state icons in the card title row. They
 * replace the legacy `.optional-badge` text chip and add a uniform
 * language for the per-card decision state ("cut the tree of
 * possibilities"). Each icon carries its own modifier so the tint
 * matches the state semantic. The glyph itself is the primary signal;
 * the i18n tooltip on the span carries the accessible description. */
.timeline-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: help;
    user-select: none;
    /* Cancel the wrapper fade so the marker stays legible inside
       .timeline-item--hidden which fades the whole content panel. */
    opacity: 1;
}

.timeline-state-icon--optional {
    color: var(--status-amber-fg);
}

.timeline-state-icon--hidden {
    color: var(--color-text-muted);
}

/* t-paliad-265 — per-event-card optional choices. The caret sits in
 * the card header next to the date; the chip surfaces the active pick
 * inline with the title; the popover is body-attached and positioned
 * by the JS module. Skipped rows fade to 50% opacity. */
.event-card-choices-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 0.4rem;
    border: 1px solid var(--color-border, #d4d4d4);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    line-height: 1;
}

.event-card-choices-caret:hover,
.event-card-choices-caret:focus-visible {
    background: var(--color-accent-bg, rgba(198, 244, 28, 0.18));
    color: var(--color-text);
}

.event-card-choices-chip {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.4rem;
}

.event-card-choices-chip[data-empty="true"] {
    display: none;
}

.event-card-choices-chip-part {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.05rem 0.4rem;
    border-radius: 99px;
    background: var(--color-accent-bg, rgba(198, 244, 28, 0.22));
    color: var(--color-text);
}

.event-card-choices-chip-part--skipped {
    background: var(--color-bg-soft, #f1f1f1);
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.timeline-item--skipped {
    opacity: 0.55;
}

/* t-paliad-290 (m/paliad#122) — re-surfaced "hidden" cards. The user
 * has previously marked these optional events as "Überspringen"; the
 * "Ausgeblendete anzeigen" toggle on /tools/verfahrensablauf returns
 * them with a faded + dotted-border treatment so they're visually
 * distinct from the active timeline. The inline "Wieder einblenden"
 * chip cancels the skip on click. */
.timeline-item--hidden .timeline-content,
.fr-col-item--hidden {
    opacity: 0.55;
    border: 1px dotted var(--color-border, #d4d4d4);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
}

/* t-paliad-293 — prominent "Wieder einblenden" entry inside the caret
 * popover. Surfaced only when the caret is opened on a hidden card
 * (data-is-hidden="1"). Used to be an inline chip in the card header,
 * but that caused horizontal scroll on narrow viewports (m/paliad#125)
 * because its German label is wide ("Wieder einblenden") and the
 * card header is a non-wrapping flex row. Moving it into the popover
 * removes the surface entirely and matches m's "actions live in the
 * caret menu" framing. */
.event-card-choices-block--unhide {
    /* No top border separator — this block sits at the top of the
       popover with the highest visual priority. */
    padding-top: 0;
    border-top: 0;
    margin-top: 0;
}

.event-card-choices-unhide-btn {
    display: block;
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid var(--color-accent, #c6f41c);
    background: var(--color-accent, #c6f41c);
    /* Match the active-option pin (lime fg → midnight text) so the
       button reads against the lime in both light and dark themes
       (m/paliad#123). */
    color: var(--color-accent-dark);
    cursor: pointer;
    transition: background 120ms ease;
}

.event-card-choices-unhide-btn:hover,
.event-card-choices-unhide-btn:focus-visible {
    background: var(--color-bg, #fff);
    color: var(--color-text);
    outline: none;
}

.show-hidden-count {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-left: 0.4rem;
}

/* t-paliad-289: rules whose anchor is uncertain (court-set ancestor
   without override, backward-anchor with unset forward date, optional
   event not recorded). The "abhängig von <parent>" chip on the date
   column makes the conditional state explicit; the dotted border on
   the content panel + slight desaturation reinforces it at glance so
   the row reads as "pending an upstream input" rather than as a real
   scheduled item. The frist-date-edit affordance on the chip still
   wires through — the user can pin a concrete date once the anchor
   resolves. */
.timeline-item--conditional .timeline-content,
.fr-col-item--conditional {
    border: 1px dashed var(--color-border, #d4d4d4);
    border-radius: 4px;
    padding: 0.35rem 0.55rem;
    background: var(--color-bg-soft, #fafafa);
}

.timeline-item--conditional .timeline-name,
.fr-col-item--conditional .timeline-name {
    opacity: 0.85;
}

.timeline-conditional {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: right;
}


.event-card-choices-popover {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #d4d4d4);
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.6rem 0.7rem;
    min-width: 240px;
    max-width: 320px;
}

.event-card-choices-block + .event-card-choices-block {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border-soft, #ececec);
}

.event-card-choices-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.4rem;
}

.event-card-choices-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.event-card-choices-option {
    font-size: 0.78rem;
    padding: 0.25rem 0.55rem;
    border-radius: 4px;
    border: 1px solid var(--color-border, #d4d4d4);
    background: var(--color-bg, #fff);
    color: var(--color-text);
    cursor: pointer;
}

.event-card-choices-option:hover,
.event-card-choices-option:focus-visible {
    background: var(--color-bg-soft, #f1f1f1);
}

.event-card-choices-option--active {
    background: var(--color-accent, #c6f41c);
    border-color: var(--color-accent, #c6f41c);
    /* Foreground stays midnight in both themes — --color-text would flip
       to cream in dark mode and leave the active "Berufung durch …"
       chip unreadable on lime (m/paliad#123). */
    color: var(--color-accent-dark);
    font-weight: 600;
}

.event-card-choices-reset {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.event-card-choices-reset:hover {
    color: var(--color-text);
}

.event-card-choices-error {
    margin-top: 0.5rem;
    font-size: 0.74rem;
    color: var(--status-red-fg, #b00020);
}

.timeline-rule {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

/* Per-rule duration label rendered inline in the meta row when
   "Dauern anzeigen" is on (m/paliad#133, t-paliad-302). Matches the
   sibling .timeline-rule weight so the meta line reads as one band of
   secondary metadata; non-mono so the value reads as prose ("2 Mo. nach")
   rather than a code reference. */
.timeline-duration {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.timeline-adjusted {
    font-size: 0.78rem;
    color: var(--status-amber-fg-2);
    margin-top: 0.2rem;
}

.timeline-notes {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: 0.15rem;
}

/* Fristenrechner — view toggle (timeline vs. columns; t-paliad-127) */

.fristen-view-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 0.85rem;
}

.fristen-view-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.fristen-view-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    color: var(--color-text);
}

.fristen-view-option input[type=radio] {
    margin: 0;
    cursor: pointer;
}

/* Notes toggle — checkbox affordance in the view-toggle bar that flips
   per-card descriptive notes between compact (ⓘ tooltip icon) and
   expanded (timeline-notes block). Sits with a leading separator so it
   reads as a distinct control from the radio view picker. */
.fristen-notes-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    color: var(--color-text);
    margin-left: auto;
    padding-left: 0.75rem;
    border-left: 1px solid var(--color-border);
}

.fristen-notes-option input[type=checkbox] {
    margin: 0;
    cursor: pointer;
}

/* Verfahrensablauf — perspective strip (side + appellant selectors,
   t-paliad-250 / m/paliad#81). Two rows so the labels stack cleanly on
   narrow viewports; each row reuses .fristen-view-toggle for the
   chip-radio cluster so the visual language matches the view-toggle
   above it. The appellant row hides for proceedings without an
   appellant axis (Inf / Rev first-instance). */
.verfahrensablauf-perspective {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.verfahrensablauf-perspective-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.verfahrensablauf-perspective-row .fristen-view-toggle {
    margin-bottom: 0;
}

/* Visual divider between the perspective block (side + appellant)
   and the date / court / flag knobs below. t-paliad-279 reorder put
   the most-defining inputs (side, appellant) at the top of step-2; the
   divider keeps the date block from reading as a continuation of the
   perspective rows. */
.verfahrensablauf-step2-divider {
    height: 1px;
    margin: 1rem 0;
    background: var(--color-border, #e5e5e5);
    border: 0;
}

/* "Pick a side" hint that sits next to the side-radio cluster while
   currentSide is null (m/paliad#120). Both columns still render every
   rule in that state — the chip just nudges the user that picking a
   side focuses their column. Hidden by JS once a side is picked. */
.side-radio-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.side-hint {
    color: var(--color-text-muted, #666);
    font-size: 0.85rem;
    font-style: italic;
}

/* Read-only auto-fill chip for #side-row. Renders when ?project=<id>
   resolves a project whose our_side is set: shows the inferred side
   with a small "Andere Seite wählen" override link that swaps the row
   back to the radio cluster. t-paliad-279 / m/paliad#111. */
.side-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 0.5rem;
    background: var(--color-bg-subtle, #fafafa);
    font-size: 0.95rem;
}
.side-chip-tag {
    color: var(--color-text-muted, #666);
    font-size: 0.85rem;
}
.side-chip-value {
    color: var(--color-text, #222);
}
.side-chip-override {
    margin-left: 0.3rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 9999px;
    background: var(--color-bg, #fff);
    color: var(--color-text-muted, #555);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.side-chip-override:hover {
    background: var(--color-bg-subtle, #f4f4f4);
    border-color: var(--color-text-muted, #aaa);
}
.side-chip-override:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

/* Compact note hint — sits in the timeline-meta line when the notes
   toggle is off. Native browser tooltip via title= attribute carries
   the full text on hover; tabindex=0 + aria-label make it
   keyboard / screen-reader accessible. */
.timeline-note-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    cursor: help;
    user-select: none;
}

.timeline-note-hint:hover,
.timeline-note-hint:focus-visible {
    color: var(--color-text);
    outline: none;
}

/* Fristenrechner — three-column lane view (Proactive | Court | Reactive).
   Each lane is independently date-ordered; party=both rows render below
   as full-width spans because they apply to all sides. */

/* Columns view: a CSS grid timeline. The first three children are sticky
   header cells (Proactive / Court / Reactive). After that, each distinct
   dueDate produces three sibling cells (one per column) so deadlines on the
   same day line up across columns. party=both deadlines appear in BOTH the
   proactive and reactive cell of their row, marked with .fr-col-mirror. */

.fr-columns-view {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-top: 0.5rem;
    align-items: stretch;
}

.fr-col-header {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
}

.fr-col-header.fr-col-ours {
    background: var(--status-blue-bg);
    color: var(--status-blue-fg);
}

.fr-col-header.fr-col-court {
    background: var(--status-blue-soft-bg);
    color: var(--status-blue-soft-fg);
}

.fr-col-header.fr-col-opponent {
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

.fr-col-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 0;
}

.fr-col-cell--empty {
    /* No content: still occupies its grid track so siblings stay aligned. */
}

.fr-col-item {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
}

.fr-col-root {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent) inset;
}

.fr-col-mirror {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-style: italic;
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .fr-columns-view {
        grid-template-columns: 1fr;
    }
    .fr-col-header {
        position: static;
    }
}

/* Drucken / Print button — used by the procedure and event Fristenrechner
   tabs. Tertiary action: hairline border, accent on hover, printer glyph. */

.print-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.print-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.print-btn:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-light);
}

.print-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.print-btn-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: color 0.15s ease;
}

.print-btn:hover .print-btn-icon {
    color: var(--color-accent-fg);
}

/* --- Responsive: Sidebar --- */

@media (max-width: 1023px) {
    .sidebar {
        width: var(--sidebar-expanded);
        transform: translateX(-100%);
        transition: transform 150ms ease;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar .sidebar-label {
        opacity: 1;
    }

    .sidebar .sidebar-pin {
        display: none;
    }

    .sidebar-resize-handle {
        display: none;
    }

    .sidebar-hamburger {
        display: flex;
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-overlay-modal);
        z-index: 35;
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease;
    }

    .sidebar-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .has-sidebar,
    .has-sidebar.sidebar-pinned,
    :root.sidebar-pinned .has-sidebar {
        padding-left: 0;
    }
}

/* --- Glossar --- */

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

.btn-suggest {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.btn-suggest:hover {
    background: var(--color-accent-light);
}

.btn-suggest-icon {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.glossar-controls {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.glossar-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.glossar-search-icon {
    position: absolute;
    left: 0.75rem;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-text-muted);
    pointer-events: none;
}

.glossar-search {
    width: 100%;
    padding: 0.65rem 4.5rem 0.65rem 2.5rem;
    font-size: 0.92rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s ease;
}

.glossar-search:focus {
    border-color: var(--color-accent);
}

.glossar-count {
    position: absolute;
    right: 0.75rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

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

.filter-pill {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 99px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}

.filter-pill:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.filter-pill.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

.glossar-table-wrap {
    overflow-x: auto;
}

.glossar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.glossar-table thead th {
    text-align: left;
    padding: 0.7rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.glossar-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s ease;
}

.glossar-table tbody tr:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.04);
}

.glossar-table td {
    padding: 0.65rem 0.75rem;
    vertical-align: top;
}

.glossar-de {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.glossar-en {
    color: var(--color-text);
}

.glossar-def {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    line-height: 1.5;
    max-width: 380px;
}

.glossar-no-def {
    color: var(--color-border);
}

.glossar-col-actions {
    width: 2.5rem;
}

.glossar-actions {
    text-align: center;
}

.glossar-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    opacity: 0.4;
}

.glossar-table tbody tr:hover .glossar-feedback-btn {
    opacity: 1;
}

.glossar-feedback-btn:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.1);
    color: var(--color-accent-fg);
    opacity: 1;
}

.glossar-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* --- Unified modal primitive (t-paliad-217) ---
   Native <dialog>-backed. Layered on top of the legacy .modal-overlay /
   .modal-card / .modal-content / .modal classes below; those stay in
   place until each call site migrates to openModal(). The new BEM-style
   .modal__* selectors avoid colliding with the legacy class hierarchy. */

dialog.modal {
    border: none;
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow-xl);
    padding: 0;
    background: var(--color-surface);
    color: var(--color-text);
    width: 100%;
    max-width: min(90vw, var(--modal-max-w, 480px));
    max-height: min(90vh, 40rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

dialog.modal[data-size="sm"]   { --modal-max-w: 380px; }
dialog.modal[data-size="lg"]   { --modal-max-w: 640px; }
dialog.modal[data-size="full"] {
    --modal-max-w: 100vw;
    max-height: 100vh;
    border-radius: 0;
}

dialog.modal::backdrop {
    background: var(--color-overlay-modal);
}

/* Phone breakpoint — full-screen takeover ABOVE the PWA bottom-nav.
   m's 2026-05-20 lock-in: the modal must not cover the bottom-nav and
   must close via the browser back-button (handled in modal.ts). */
@media (max-width: 32rem) {
    dialog.modal {
        --modal-max-w: 100vw;
        border-radius: 0;
        max-height: calc(100vh - var(--bottom-nav-height, 56px));
        margin-bottom: var(--bottom-nav-height, 56px);
    }
}

.modal__header {
    flex-shrink: 0;
    padding: 1.25rem 1.5rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.modal__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    padding: 0.25rem 0.5rem;
    line-height: 1;
    border-radius: var(--radius);
}

.modal__close:hover {
    color: var(--color-text);
    background: var(--color-surface-muted);
}

.modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    color: var(--color-text);
}

.modal__footer {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem 1.25rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

/* --- approval-suggest modal body (t-paliad-217) ---
   The body is laid out as three sections (editable / context /
   comment), separated by light rules. Reuses the existing .form-field
   shapes so input typography matches /deadlines/new + views editor. */

.approval-suggest-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.approval-suggest-intro {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.approval-suggest-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.approval-suggest-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0;
}

.approval-suggest-section--context {
    border-top: 1px dashed var(--color-border);
    padding-top: 1rem;
}

.approval-suggest-context-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.88rem;
}
.approval-suggest-context-grid dt {
    color: var(--color-text-muted);
    font-weight: 600;
}
.approval-suggest-context-grid dd {
    margin: 0;
    color: var(--color-text);
}

.approval-suggest-prehint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.approval-suggest-section--note {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
}

.approval-suggest-event-type-picker {
    /* Picker styles its own internals (.event-type-picker). */
}


/* Legacy modal classes follow — kept until the other ~7 modals migrate. */

/* --- Modal (legacy) --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal-card {
    background: var(--color-surface);
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0.75rem;
}

.modal-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
    line-height: 1;
    padding: 0.25rem;
}

.modal-close:hover {
    color: var(--color-text);
}

#suggest-form {
    padding: 1.25rem 1.5rem 1.5rem;
}

/* .form-section is the fieldset wrapper used by the views editor and
   any other long-form entity-form. Browser defaults give fieldsets
   almost no padding which made the views/new page feel cramped against
   its borders (m's dogfood feedback 2026-05-08 20:32). */
.form-section {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem 1.5rem;
    margin: 0 0 1.25rem;
    background: var(--color-surface);
}

.form-section > legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.form-section > .form-hint {
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.form-section > .form-field:last-child,
.form-section > *:last-child {
    margin-bottom: 0;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: var(--color-text);
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    /* Form fields render on --color-input-bg, which is #ffffff in light
       mode (m: 2026-04-30 — the cream `--color-bg` made inputs blur into
       the body; white reads as a proper input well) and a value below
       --color-surface in dark mode so the well is depressed below the
       card panel rather than merging into it. */
    background: var(--color-input-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: var(--color-accent);
}

/* Checkboxes and radios must not inherit the text-input width:100% / padding
   that the rule above sets — without this, the visual checkbox stretches to
   fill the form column and the label text wraps below it. */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
    width: auto;
    padding: 0;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.btn-cancel {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: border-color 0.15s ease;
}

.btn-cancel:hover {
    border-color: var(--color-text-muted);
}

.btn-submit {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-dark);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.15s ease;
}

.btn-submit:hover {
    background: var(--color-accent-light);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-msg {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    min-height: 1.25rem;
}

.form-msg-error {
    color: #dc2626;
}

.form-msg-success {
    color: var(--color-accent-fg);
}

/* Inline warning shown above Save in the project edit modal when changing
   the project type clears existing type-specific fields (t-paliad-056). */
.form-warn {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--status-amber-border);
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.form-warn strong {
    display: block;
    margin-bottom: 0.2rem;
}

/* --- Responsive: General --- */

/* --- Downloads --- */

.downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.download-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.download-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.download-card:hover .download-btn {
    background: var(--color-accent);
    color: var(--color-accent-dark);
}

.download-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-accent-fg);
}

.download-icon svg {
    width: 100%;
    height: 100%;
}

.download-info {
    flex: 1;
    min-width: 0;
}

.download-info h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    letter-spacing: -0.01em;
}

.download-info p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.download-action {
    flex-shrink: 0;
}

.download-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-accent-fg);
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .hero {
        padding: 3.5rem 0 3rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .grid, .grid-2 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .office-list {
        gap: 1.25rem;
    }

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

    .tool-results {
        position: static;
    }

    .nav-right {
        gap: 0.75rem;
    }

    .proceeding-btns {
        flex-direction: column;
    }

    .date-field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .timeline-item-header {
        flex-direction: column;
        gap: 0.25rem;
    }

    .glossar-header-row {
        flex-direction: column;
    }

    .glossar-de {
        white-space: normal;
    }

    .glossar-def {
        max-width: none;
    }

    .glossar-table {
        font-size: 0.82rem;
    }

    .glossar-table td,
    .glossar-table thead th {
        padding: 0.5rem;
    }

    .download-card {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

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

    .links-header-row {
        flex-direction: column;
        gap: 1rem;
    }

    .links-header-actions {
        align-self: flex-start;
    }

    .links-category-grid {
        grid-template-columns: 1fr;
    }

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

    .result-actions {
        flex-direction: column;
    }
}

/* --- Links --- */

.links-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.links-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    padding-top: 0.25rem;
}

.links-pending-badge {
    font-size: 0.78rem;
    color: var(--color-accent-fg);
    background: rgb(var(--hlc-lime-rgb) / 0.1);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

.links-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.links-suggest-btn:hover {
    background: var(--color-accent-light);
}

.links-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.links-filter-btn {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.links-filter-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.links-filter-btn.active {
    background: var(--color-accent);
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
}

.links-category-heading {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 2rem 0 0.75rem;
    color: var(--color-text);
}

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

.links-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.link-card {
    display: flex;
    align-items: stretch;
    padding: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.link-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.link-card-placeholder {
    opacity: 0.55;
    pointer-events: auto;
}

.link-card-body {
    flex: 1;
    min-width: 0;
}

.link-card-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 0.3rem;
}

.link-card-external {
    flex-shrink: 0;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.link-card:hover .link-card-external {
    color: var(--color-accent-fg);
    opacity: 1;
}

.link-card-desc {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.link-card-feedback {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding: 0.25rem;
    margin-left: 0.5rem;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.link-card:hover .link-card-feedback {
    opacity: 0.5;
}

.link-card-feedback:hover {
    opacity: 1 !important;
    color: var(--color-accent-fg);
}

.links-empty {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    padding: 2rem 0;
}

/* --- Modals --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-content {
    background: var(--color-surface);
    border-radius: calc(var(--radius) * 1.5);
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-xl);
}

.modal-content-sm {
    max-width: 380px;
}

.modal-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: 0.3rem;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    font-size: 0.9rem;
    font-family: var(--font-sans);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    /* See .entity-form input rule above for the --color-input-bg rationale. */
    background: var(--color-input-bg);
    color: var(--color-text);
    transition: border-color 0.15s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-field textarea {
    resize: vertical;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.btn-primary {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-primary:hover {
    background: var(--color-accent-light);
}

.btn-secondary {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.btn-secondary:hover {
    border-color: var(--color-text-muted);
}

.form-message {
    font-size: 0.82rem;
    margin-top: 0.75rem;
    min-height: 1.2em;
}

.form-message-success {
    color: var(--color-accent-fg);
}

.form-message-error {
    color: #dc2626;
}

/* --- Print --- */

@media print {
    .header, .footer, .sidebar, .sidebar-hamburger, .sidebar-overlay,
    .tool-input, .result-actions, .reset-btn, #step-1, #step-2,
    .calculate-btn, .modal-overlay, .glossar-feedback-btn, .btn-suggest,
    .comparison-header button, .comparison-container {
        display: none !important;
    }

    .print-header, .print-footer {
        display: block !important;
    }

    .print-header {
        padding: 1.5rem 0 1rem;
        border-bottom: 2px solid var(--color-accent);
        margin-bottom: 1.5rem;
    }

    .print-header-brand {
        font-size: 1.2rem;
        color: var(--hlc-midnight);
    }

    .print-header-brand strong {
        color: var(--color-accent-fg);
        font-size: 1.4rem;
    }

    .print-header-meta {
        margin-top: 0.75rem;
        font-size: 0.85rem;
        color: #64647a;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }

    .print-footer {
        margin-top: 2rem;
        padding-top: 1rem;
        border-top: 1px solid #e5e5ed;
        font-size: 0.75rem;
        color: #64647a;
        display: flex;
        justify-content: space-between;
    }

    .has-sidebar {
        padding-left: 0 !important;
    }

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

    .tool-results {
        position: static;
    }

    .tool-header {
        display: none;
    }

    .result-card {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    body {
        font-size: 11pt;
        color: #000;
    }
}

/* --- Geb\u00fchrentabellen --- */

.gebuehren-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.gebuehren-lookup {
    margin-bottom: 1.5rem;
}

.gebuehren-lookup label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.gebuehren-lookup-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 480px;
}

.gebuehren-currency {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.875rem;
}

.gebuehren-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    background: var(--color-surface);
    transition: border-color 0.15s;
}

.gebuehren-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.15);
}

.btn-lookup {
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    border: none;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.btn-lookup:hover {
    background: var(--color-accent-light);
}

/* Lookup result cards */
.gebuehren-lookup-result {
    margin-bottom: 1.5rem;
}

.gebuehren-lookup-cards {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.gebuehren-lookup-card {
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
}

.gebuehren-lookup-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.gebuehren-lookup-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-accent-fg);
}

/* Tabs */
.gebuehren-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.gebuehren-tab {
    padding: 0.625rem 1.25rem;
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.gebuehren-tab:hover {
    color: var(--color-text);
}

.gebuehren-tab.active {
    /* Canonical active-tab pattern (F-20) — see .login-tab.active. */
    color: var(--color-text);
    border-bottom-color: var(--hlc-lime);
    font-weight: 600;
}

/* Panels */
.gebuehren-panel {
    min-height: 200px;
}

.gebuehren-versions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gebuehren-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: var(--color-text);
}

.gebuehren-section-title:first-child {
    margin-top: 0;
}

/* Fee tables */
.gebuehren-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: auto;
    max-height: 520px;
}

.gebuehren-table-wrap-short {
    max-height: none;
}

.gebuehren-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.gebuehren-table th,
.gebuehren-table td {
    padding: 0.5rem 0.875rem;
    text-align: right;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.gebuehren-table th {
    background: var(--color-bg);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
}

.gebuehren-table th:first-child,
.gebuehren-table td:first-child {
    text-align: left;
}

.gebuehren-table tbody tr:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.04);
}

.gebuehren-table tbody tr.highlight {
    background: rgb(var(--hlc-lime-rgb) / 0.12);
    font-weight: 600;
}

.gebuehren-table tbody tr.highlight td {
    border-bottom-color: var(--color-accent);
}

.gebuehren-table-compact th,
.gebuehren-table-compact td {
    padding: 0.375rem 0.625rem;
    font-size: 0.8rem;
}

/* UPC summary cards */
.gebuehren-upc-cards {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.gebuehren-upc-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    min-width: 160px;
    flex: 1;
}

.gebuehren-upc-card-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.gebuehren-upc-card-value {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text);
}

/* Multipliers section */
.gebuehren-multipliers {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.gebuehren-multipliers h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.gebuehren-multipliers-desc {
    font-size: 0.825rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

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

/* Responsive */
@media (max-width: 640px) {
    .gebuehren-lookup-row {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .gebuehren-input {
        min-width: 0;
    }

    .gebuehren-lookup-cards {
        flex-direction: column;
    }

    .gebuehren-upc-cards {
        flex-direction: column;
    }

    .gebuehren-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .gebuehren-table th,
    .gebuehren-table td {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
}

@media print {
    .gebuehren-lookup,
    .gebuehren-tabs,
    .gebuehren-versions,
    .btn-suggest,
    .gebuehren-lookup-result,
    .modal-overlay {
        display: none !important;
    }

    .gebuehren-panel {
        display: block !important;
    }

    .gebuehren-table-wrap {
        max-height: none;
        overflow: visible;
        border: 1px solid #ccc;
    }
}

/* --- Checklisten --- */

.checklist-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

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

.checklist-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.checklist-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.checklist-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.checklist-card-count {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.checklist-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.checklist-card-desc {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
}

.checklist-card-court {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: 0;
    font-style: italic;
}

.checklist-card-progress {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.checklist-regime {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgb(var(--hlc-lime-rgb) / 0.12);
    color: var(--color-accent-fg);
}

.checklist-regime-UPC {
    background: rgb(var(--hlc-lime-rgb) / 0.12);
    color: var(--color-accent-fg);
}

.checklist-regime-DE {
    background: rgba(26, 54, 93, 0.08);
    color: #1b365d;
}

.checklist-regime-EPA {
    background: rgba(100, 100, 122, 0.12);
    color: var(--color-text-muted);
}

.checklist-empty {
    color: var(--color-text-muted);
    text-align: center;
    padding: 2rem 1rem;
    grid-column: 1 / -1;
}

/* --- Add-checklist template picker (t-paliad-239) ------------------
   Modal shown from the project Checklists tab. Vertical scrollable
   list of clickable template rows; each row is a full-width <button>
   with title + regime chip + optional description. */
.add-checklist-list {
    margin-top: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 0.25rem;
}

.add-checklist-row {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    font: inherit;
    color: inherit;
}

.add-checklist-row:hover:not(:disabled) {
    background: rgb(var(--hlc-lime-rgb) / 0.06);
    border-color: rgb(var(--hlc-lime-rgb) / 0.45);
}

.add-checklist-row:disabled {
    opacity: 0.55;
    cursor: progress;
}

.add-checklist-row-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.add-checklist-row-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.add-checklist-row-desc {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* --- Checklist detail --- */

.checklist-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 1rem;
    transition: color 0.15s ease;
}

.checklist-back:hover {
    color: var(--color-accent-fg);
}

.checklist-back-arrow {
    font-size: 1rem;
}

.checklist-detail-header {
    margin-bottom: 1.5rem;
}

.checklist-detail-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.checklist-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font-sans);
}

.btn-ghost:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.checklist-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-top: 0.85rem;
    font-size: 0.82rem;
}

.checklist-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.checklist-meta-item dt {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.checklist-meta-item dd {
    color: var(--color-text);
    margin: 0;
}

.checklist-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.checklist-progress-bar {
    flex: 1;
    height: 0.4rem;
    background: var(--color-border);
    border-radius: 99px;
    overflow: hidden;
}

.checklist-progress-fill {
    height: 100%;
    background: var(--color-accent);
    border-radius: 99px;
    transition: width 0.2s ease;
    width: 0%;
}

.checklist-progress-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Checklist instance list (on template detail page) */
.checklist-instances-section {
    margin-top: 2rem;
}

.checklist-instances-section h2 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.checklist-progress-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 9rem;
}

.checklist-progress-inline .checklist-progress-bar {
    width: 5.5rem;
    flex: 0 0 auto;
}

.checklist-instance-name {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}

.checklist-instance-name:hover {
    color: var(--color-accent-fg);
}

.checklist-instance-akte-link {
    color: var(--color-accent-fg);
    text-decoration: none;
}

.checklist-instance-akte-link:hover {
    text-decoration: underline;
}

/* Submissions panel — t-paliad-215 Slice 1. */
.submission-row td {
    vertical-align: middle;
}

.submission-name {
    color: var(--color-text);
    font-weight: 500;
    display: block;
}

.submission-code {
    color: var(--color-text-muted);
    font-size: 0.85em;
    font-family: var(--font-mono, monospace);
    display: block;
    margin-top: 0.1rem;
}

.submission-action-cell {
    text-align: right;
    white-space: nowrap;
}

.submission-no-template {
    color: var(--color-text-muted);
    font-size: 0.9em;
    font-style: italic;
}

/* t-paliad-242 — grouped Schriftsätze catalog. The Schriftsätze tab
   shows filing rules from every proceeding the platform knows about,
   grouped by proceeding (DE LG vs UPC CFI vs EPO Opposition etc.).
   .entity-table-group-header is a <tr> spanning all columns that
   labels each block; the --own modifier picks out the project's own
   proceeding with a lime border so the lawyer sees their primary
   context at a glance. */
.entity-table-group-header th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.entity-table tbody tr.entity-table-group-header,
.entity-table--readonly tbody tr.entity-table-group-header {
    cursor: default;
}

.entity-table tbody tr.entity-table-group-header:hover,
.entity-table--readonly tbody tr.entity-table-group-header:hover {
    background: transparent;
}

.entity-table-group-header--own th {
    background: var(--color-bg-lime-tint);
    color: var(--color-text);
    border-left: 3px solid var(--color-accent-fg);
}

.entity-table-group-header__name {
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: var(--color-text);
}

.entity-table-group-header__code {
    font-family: var(--font-mono, monospace);
    color: var(--color-text-muted);
    margin-left: 0.5rem;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: 0;
}

.submission-template-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.submissions-hint {
    margin-top: 1rem;
}

/* t-paliad-238 — dedicated draft editor page. */
.submission-draft-page {
    padding-top: 1rem;
}

.submission-draft-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.submission-draft-header-text h1 {
    margin: 0 0 0.25rem 0;
}

.submission-draft-header-actions {
    flex: 0 0 auto;
}

.submission-draft-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

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

.submission-draft-sidebar {
    position: sticky;
    top: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    background: var(--color-surface, #fff);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

/* t-paliad-260 — at single-column widths, drop the sticky/max-height
   constraints on the variable editor so it reflows above the preview
   and scrolls away naturally instead of overlaying the preview pane
   (sticky + calc(100vh - 2rem) keep the form pinned at the top of the
   viewport while the user scrolls down to read the preview). Must come
   after the unscoped .submission-draft-sidebar block to win source
   order at equal specificity. */
@media (max-width: 900px) {
    .submission-draft-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.submission-draft-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.submission-draft-switcher select {
    flex: 1 1 auto;
}

.submission-draft-name-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.submission-draft-name-row input {
    flex: 1 1 auto;
}

.submission-draft-savestatus {
    font-size: 0.85em;
    color: var(--color-text-muted);
    min-height: 1.2em;
    margin: 0.25rem 0 0.75rem 0;
}

.submission-draft-savestatus--error {
    color: var(--color-danger, #c00);
}

/* t-paliad-276 — DE/EN language toggle on the draft editor. Same look
   as the rest of the sidebar mini-controls; muted label + inline radios
   so it doesn't compete with the editor's primary inputs. */
/* t-paliad-313 (m/paliad#141) Composer Slice A — base picker + section list. */
.submission-draft-base-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0.5rem 0;
}

.submission-draft-base-row label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85em;
}

.submission-draft-base-row select {
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-elev-1);
    font-size: 0.95em;
}

.submission-draft-base-hint {
    margin: 0;
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.submission-draft-sections-wrap {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-elev-1);
}

.submission-draft-sections-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.submission-draft-sections-header h2 {
    margin: 0;
    font-size: 1.05em;
}

.submission-draft-sections-hint {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.submission-draft-sections-list {
    list-style: decimal inside;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.submission-draft-section {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg-elev-2, var(--color-bg));
}

.submission-draft-section--excluded {
    opacity: 0.55;
    background: var(--color-bg-subtle, transparent);
}

.submission-draft-section-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.submission-draft-section-title {
    display: inline;
    margin: 0;
    font-size: 0.95em;
    font-weight: 600;
}

.submission-draft-section-kind {
    font-size: 0.75em;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle, transparent);
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
}

.submission-draft-section-excluded-badge {
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-style: italic;
}

.submission-draft-section-body {
    margin: 0.5rem 0 0 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.88em;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--color-text);
}

/* t-paliad-313 Slice B — inline editor per section. */
.submission-draft-section-toggle {
    margin-left: auto;
}

.submission-draft-section-toolbar {
    display: flex;
    gap: 0.25rem;
    margin: 0.4rem 0 0.3rem 0;
}

.submission-draft-section-toolbar-btn {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg-elev-1);
    font-weight: 600;
    font-size: 0.85em;
    cursor: pointer;
    line-height: 1;
}

.submission-draft-section-toolbar-btn:hover {
    background: var(--color-bg-subtle, var(--color-bg-elev-2));
}

.submission-draft-section-editor {
    min-height: 3rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-bg-elev-1);
    font-family: inherit;
    font-size: 0.92em;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    outline: none;
}

.submission-draft-section-editor:focus {
    border-color: var(--color-accent-fg, var(--color-text));
    box-shadow: 0 0 0 2px var(--color-bg-lime-tint, transparent);
}

.submission-draft-section-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-muted);
    pointer-events: none;
}

.submission-draft-section--editing {
    background: var(--color-bg-elev-2, var(--color-bg-elev-1));
}

/* t-paliad-318 Slice F — drag-and-drop reorder + add / delete affordances. */
.submission-draft-section-handle {
    cursor: grab;
    user-select: none;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: 0 0.35rem;
    margin-right: 0.4rem;
    border-radius: 3px;
}

.submission-draft-section-handle:hover {
    background: var(--color-bg-subtle, var(--color-bg-elev-2));
}

.submission-draft-section-handle:active {
    cursor: grabbing;
}

.submission-draft-section--dragging {
    opacity: 0.5;
}

.submission-draft-section--drop-target {
    border-top: 2px solid var(--color-accent-fg, var(--color-text));
}

.submission-draft-section-delete {
    margin-left: 0.35rem;
}

.submission-draft-sections-trailer {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.submission-draft-add-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.7rem;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-elev-1);
}

.submission-draft-add-section-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.submission-draft-add-section-row > span {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.submission-draft-add-section-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

/* t-paliad-315 Slice C — building-block picker modal */
.submission-draft-section-bb-btn {
    margin-left: auto;
}

.submission-bb-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.submission-bb-picker {
    background: var(--color-bg, white);
    border-radius: 6px;
    padding: 1rem;
    width: min(720px, 92vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.submission-bb-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.submission-bb-picker-head h2 {
    margin: 0;
    font-size: 1.1em;
}

.submission-bb-picker-search {
    width: 100%;
}

.submission-bb-picker-sectioninfo {
    margin: 0;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.submission-bb-picker-list {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.submission-bb-picker-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-elev-1);
    cursor: pointer;
}

.submission-bb-picker-row:hover {
    background: var(--color-bg-lime-tint, var(--color-bg-elev-2));
}

.submission-bb-picker-row-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.submission-bb-picker-row-desc {
    margin: 0.25rem 0;
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.submission-bb-picker-row-preview {
    margin: 0.25rem 0 0 0;
    padding: 0;
    font-family: inherit;
    font-size: 0.8em;
    color: var(--color-text-muted);
    white-space: pre-wrap;
    max-height: 4em;
    overflow: hidden;
}

.submission-bb-picker-vis {
    font-size: 0.7em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: var(--color-bg-subtle, transparent);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.submission-bb-picker-vis--private { background: #fde2e2; color: #8a2a2a; }
.submission-bb-picker-vis--team    { background: #fff4d6; color: #7a5d12; }
.submission-bb-picker-vis--firm    { background: #def5e2; color: #266e34; }
.submission-bb-picker-vis--global  { background: #dce8fb; color: #1f437a; }

.submission-bb-picker-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1rem;
}

/* t-paliad-315 Slice C — /admin/submission-building-blocks editor */
.admin-bb-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr minmax(180px, 240px);
    gap: 1rem;
}

.admin-bb-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 70vh;
    overflow-y: auto;
}

.admin-bb-list-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.7rem;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-elev-1);
    cursor: pointer;
}

.admin-bb-list-row--active {
    background: var(--color-bg-lime-tint, var(--color-bg-elev-2));
    border-color: var(--color-accent-fg, var(--color-text));
}

.admin-bb-list-title {
    font-weight: 600;
    font-size: 0.95em;
}

.admin-bb-list-meta {
    display: flex;
    gap: 0.3rem;
    font-size: 0.7em;
    color: var(--color-text-muted);
}

.admin-bb-list-section {
    background: var(--color-bg-subtle, transparent);
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
}

.admin-bb-list-vis {
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
}

.admin-bb-list-vis--private { background: #fde2e2; color: #8a2a2a; }
.admin-bb-list-vis--team    { background: #fff4d6; color: #7a5d12; }
.admin-bb-list-vis--firm    { background: #def5e2; color: #266e34; }
.admin-bb-list-vis--global  { background: #dce8fb; color: #1f437a; }

.admin-bb-list-draft {
    font-style: italic;
    color: var(--color-text-muted);
}

.admin-bb-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.admin-bb-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.admin-bb-form-row--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
}

.admin-bb-form-row > span {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.admin-bb-form-hint {
    font-size: 0.75em;
    color: var(--color-text-muted);
}

.admin-bb-form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.admin-bb-versions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 70vh;
    overflow-y: auto;
}

.admin-bb-version-row {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.4rem 0.55rem;
    font-size: 0.78em;
}

.admin-bb-version-meta {
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

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

.submission-draft-language-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 0.5rem 0;
    font-size: 0.9em;
}

.submission-draft-language-label {
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85em;
}

.submission-draft-language-option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
}

.submission-draft-language-fallback {
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem 0;
    padding: 0.4rem 0.6rem;
    border-left: 2px solid var(--color-warning, #d4a017);
    background: var(--color-warning-bg, rgba(212, 160, 23, 0.08));
}

.submission-draft-variables {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.submission-draft-var-group {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
}

.submission-draft-var-group-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.submission-draft-var-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.6rem;
}

.submission-draft-var-label {
    font-size: 0.9em;
    color: var(--color-text);
    font-weight: 500;
}

.submission-draft-var-input {
    font-family: inherit;
}

.submission-draft-var-hint {
    font-size: 0.8em;
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.submission-draft-var-hint code {
    font-family: var(--font-mono, monospace);
    font-size: 0.95em;
}

.submission-draft-var-marker {
    color: var(--color-warning, #b27800);
    font-style: italic;
}

.submission-draft-var-was {
    color: var(--color-text-muted);
}

.submission-draft-var-reset {
    align-self: flex-start;
}

.submission-draft-preview-wrap {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface, #fff);
    overflow: hidden;
}

.submission-draft-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-2);
    flex-wrap: wrap;
    gap: 0.5rem;
}

.submission-draft-preview-header h2 {
    margin: 0;
    font-size: 1.1em;
}

.submission-draft-preview-hint {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

.submission-draft-preview {
    padding: 1.5rem 2rem;
    line-height: 1.6;
    font-family: var(--font-serif, Georgia, serif);
    min-height: 60vh;
}

.submission-draft-preview p {
    margin: 0 0 0.75rem 0;
}

.submission-draft-preview .preview-error {
    color: var(--color-danger, #c00);
    font-style: italic;
}

/* t-paliad-261 / t-paliad-274 — substituted variables in the preview
   are wrapped in <span class="draft-var" data-var="…"> by the Go HTML
   renderer for BOTH filled values and missing-marker text. The lawyer
   can click any wrapped span and jump to the matching sidebar input;
   conversely, focusing a sidebar input lights up every matching span in
   the preview via .draft-var--active.

   Visual contract:
     .draft-var                — invisible by default (prose stays clean
                                  per t-paliad-274 m's request).
     .draft-var--has-input     — pointer cursor; dotted underline on
                                  hover so the click affordance reveals
                                  itself, plus a brighter lime tint.
     .draft-var--active        — sticky lime highlight applied while the
                                  matching sidebar input is focused
                                  (t-paliad-274 reverse direction).
     [KEIN WERT: …] / [NO VALUE: …] markers carry their own warning
     style via .submission-draft-var-marker on the sidebar hint; in the
     preview they read as obvious gap text, so .draft-var itself doesn't
     need an always-on visual to flag them. */
.draft-var {
    border-radius: 2px;
    padding: 0 2px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color 0.15s ease;
}

.draft-var--has-input {
    cursor: pointer;
}

.draft-var--has-input:hover,
.draft-var--has-input:focus-visible {
    background-color: rgba(198, 244, 28, 0.45);
    text-decoration: underline dotted rgba(198, 244, 28, 0.85);
    text-underline-offset: 2px;
    outline: none;
}

/* t-paliad-274 (B) — sticky highlight while the matching sidebar input
   is focused. Brighter than the hover tint so the user's eye lands on
   every occurrence at once when they click into a field. Applies to ALL
   .draft-var spans for that data-var, not just one. */
.draft-var--active,
.draft-var--has-input.draft-var--active {
    background-color: rgba(198, 244, 28, 0.55);
    box-shadow: 0 0 0 1px rgba(198, 244, 28, 0.85);
}

/* t-paliad-261 (B) — brief lime flash on the sidebar row after a
   click-jump from the preview, so the user's eye lands on the right
   input even after the smooth-scroll motion. Animation restarts on
   each click via class-remove + reflow + class-add. */
.submission-draft-var-row--flash {
    animation: paliad-var-flash 1.2s ease;
    border-radius: 4px;
}

@keyframes paliad-var-flash {
    0% {
        background-color: rgba(198, 244, 28, 0.55);
        box-shadow: 0 0 0 4px rgba(198, 244, 28, 0.25);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 4px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .submission-draft-var-row--flash {
        animation: paliad-var-flash-still 1.2s steps(1, end);
    }
    @keyframes paliad-var-flash-still {
        0%, 99% { background-color: rgba(198, 244, 28, 0.55); }
        100% { background-color: transparent; }
    }
    .draft-var {
        transition: none;
    }
}

.submission-edit-btn {
    margin-right: 0.4rem;
}

/* t-paliad-243 — global Schriftsätze picker (/submissions/new) +
   project-less editor banner + assign-project modal styling. */

.submissions-index-headline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.submissions-index-no-project {
    color: var(--color-text-muted);
    font-style: italic;
}

.submissions-new-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.submissions-new-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.submissions-new-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--color-text);
}

.submissions-new-chip:hover {
    background: var(--color-surface-muted);
}

.submissions-new-chip--active {
    background: var(--color-accent, #c6f41c);
    border-color: var(--color-accent, #c6f41c);
    color: #000;
    font-weight: 600;
}

.submissions-new-chip-code {
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    opacity: 0.7;
    margin-left: 0.35rem;
}

.submissions-new-project-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.submissions-new-project-item {
    padding: 0.6rem 0.85rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}

.submissions-new-project-item:last-child {
    border-bottom: none;
}

.submissions-new-project-item:hover {
    background: var(--color-surface-muted);
}

.submissions-new-project-title {
    font-weight: 500;
}

.submission-draft-noproject-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent, #c6f41c);
    border-radius: 6px;
}

.submission-draft-noproject-banner-msg {
    margin: 0;
    color: var(--color-text);
    font-size: 0.92rem;
}

/* t-paliad-277 — "Aus Projekt importieren" row + multi-select party
   picker block on the submission draft editor sidebar. */

.submission-draft-import-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.75rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.submission-draft-import-stamp {
    font-size: 0.8em;
    color: var(--color-text-muted);
}

.submission-draft-parties {
    border-top: 1px solid var(--color-border);
    padding-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.submission-draft-parties-hint {
    font-size: 0.85em;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
}

.submission-draft-parties-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.submission-draft-parties-group {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem 0.5rem;
    margin: 0;
}

.submission-draft-parties-group > legend {
    padding: 0 0.4rem;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.submission-draft-party-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.25rem 0;
    cursor: pointer;
}

.submission-draft-party-check {
    margin: 0;
    accent-color: var(--color-accent, #c6f41c);
}

.submission-draft-party-name {
    font-size: 0.92em;
    color: var(--color-text);
}

.submission-draft-party-chip {
    font-size: 0.72em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1em 0.5em;
    border-radius: 999px;
    background: var(--color-bg-lime-tint, #f0fac6);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.submission-draft-party-rep {
    font-size: 0.78em;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
}

/* t-paliad-287 — collapsible variable-group section (Frist + Parteien
   override). The toggle button is the section header; clicking it
   flips state.collapsedGroups[id] and re-renders. The visible caret
   rotates via the parent's --collapsed class. */
.submission-draft-var-group--collapsible > .submission-draft-var-group-toggle {
    all: unset;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0;
    margin: 0 0 0.5rem 0;
    cursor: pointer;
    color: var(--color-text-muted);
}

.submission-draft-var-group--collapsible > .submission-draft-var-group-toggle:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 2px;
}

.submission-draft-var-group-caret {
    display: inline-block;
    transition: transform 120ms ease;
    font-size: 0.85em;
    line-height: 1;
}

.submission-draft-var-group--collapsible:not(.submission-draft-var-group--collapsed)
    .submission-draft-var-group-caret {
    transform: rotate(90deg);
}

.submission-draft-var-group--collapsed .submission-draft-var-group-body {
    display: none;
}

/* t-paliad-287 — Add Party affordance per side. */
.submission-draft-addparty {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.submission-draft-addparty-panel {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.6rem;
    background: var(--color-bg-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.submission-draft-addparty-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.25rem;
}

.submission-draft-addparty-tab {
    all: unset;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    font-size: 0.85em;
    border-radius: 4px 4px 0 0;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
}

.submission-draft-addparty-tab--active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent, #c6f41c);
    background: var(--color-bg-lime-tint, #f0fac6);
}

.submission-draft-addparty-form {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.submission-draft-addparty-form--busy {
    opacity: 0.6;
    pointer-events: none;
}

.submission-draft-addparty-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.submission-draft-addparty-field > span {
    font-size: 0.82em;
    color: var(--color-text-muted);
}

.submission-draft-addparty-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.submission-draft-addparty-search {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.submission-draft-addparty-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface, #fff);
}

.submission-draft-addparty-search-row {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.submission-draft-addparty-search-row:last-child {
    border-bottom: none;
}

.submission-draft-addparty-search-row:hover {
    background: var(--color-bg-lime-tint, #f0fac6);
}

.submission-draft-addparty-search-empty {
    padding: 0.6rem;
    font-size: 0.85em;
    color: var(--color-text-muted);
    text-align: center;
}

.submission-draft-addparty-search-name {
    font-weight: 500;
    color: var(--color-text);
}

.submission-draft-addparty-search-rep {
    font-size: 0.78em;
    color: var(--color-text-muted);
}

.submission-draft-addparty-search-projwrap {
    font-size: 0.78em;
    color: var(--color-text-muted);
    width: 100%;
}

.submission-draft-addparty-search-proj {
    color: var(--color-text);
}

.submission-draft-addparty-search-projref {
    margin-left: 0.3rem;
    padding: 0 0.4em;
    border-radius: 3px;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

.submission-draft-addparty-search-hint {
    font-size: 0.78em;
    color: var(--color-text-muted);
    margin: 0;
}

.submission-draft-parties-empty {
    font-size: 0.82em;
    color: var(--color-text-muted);
    margin: 0.2rem 0;
}

.checklist-instance-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    white-space: nowrap;
}

.checklist-instance-titles {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.checklist-instance-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.entity-muted {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.85rem;
}

.btn-small {
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
}

.checklist-groups {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.checklist-group-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
}

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

.checklist-item {
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius);
    transition: background 0.15s ease;
}

.checklist-item:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.04);
}

.checklist-item.checked .checklist-item-text {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.checklist-item-label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
}

.checklist-checkbox {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
    accent-color: var(--color-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.checklist-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.checklist-item-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.checklist-item-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-text);
}

.checklist-item-rule {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 99px;
    background: rgba(26, 54, 93, 0.06);
    color: #1b365d;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.checklist-item-note {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
}

.checklist-print-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.checklist-disclaimer {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .checklist-detail-head-row {
        flex-direction: column;
    }

    .checklist-actions {
        width: 100%;
    }
}

@media print {
    .checklist-back,
    .checklist-actions,
    .checklist-filters,
    .checklist-card-progress {
        display: none !important;
    }

    .checklist-item {
        break-inside: avoid;
        border-bottom: 1px dotted #ccc;
        padding: 0.3rem 0;
    }

    .checklist-item:hover {
        background: none;
    }

    .checklist-checkbox {
        /* Keep checkbox visible with actual state */
        accent-color: #000;
    }

    .checklist-group {
        break-inside: avoid-page;
        margin-bottom: 1rem;
    }

    .checklist-progress {
        margin-top: 0.5rem;
    }

    .checklist-progress-bar {
        display: none;
    }
}

/* --- Gerichtsverzeichnis --- */

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

.gerichte-controls {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.gerichte-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.gerichte-filter-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 3rem;
}

.gerichte-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.gericht-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gericht-card:hover {
    border-color: rgb(var(--hlc-lime-rgb) / 0.4);
}

.gericht-card.open {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.gericht-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    user-select: none;
}

.gericht-title {
    flex: 1;
    min-width: 0;
}

.gericht-name {
    font-weight: 600;
    font-size: 0.97rem;
    color: var(--color-text);
    line-height: 1.35;
    margin-bottom: 0.25rem;
}

.gericht-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.gericht-meta svg {
    vertical-align: -2px;
    margin-right: 0.15rem;
}

.gericht-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 99px;
    background: rgb(var(--hlc-lime-rgb) / 0.1);
    color: var(--color-accent-fg);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gericht-city {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.gericht-langs {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.05rem 0.35rem;
}

.gericht-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.gericht-feedback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.45;
    transition: all 0.15s ease;
    font-size: 0.85rem;
}

.gericht-card:hover .gericht-feedback-btn {
    opacity: 1;
}

.gericht-feedback-btn:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.1);
    color: var(--color-accent-fg);
}

.gericht-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 600;
    transition: all 0.15s ease;
}

.gericht-card.open .gericht-toggle {
    background: var(--color-accent);
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
}

.gericht-details {
    display: none;
    padding: 0.25rem 1.1rem 1.1rem;
    border-top: 1px solid var(--color-border);
    grid-template-columns: 1fr;
    gap: 0.85rem;
}

.gericht-card.open .gericht-details {
    display: grid;
}

@media (min-width: 720px) {
    .gericht-card.open .gericht-details {
        grid-template-columns: 160px 1fr;
    }

    .gericht-card.open .gericht-field {
        display: contents;
    }
}

.gericht-field {
    display: grid;
    gap: 0.25rem;
}

.gericht-field-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding-top: 0.85rem;
}

.gericht-field-value {
    font-size: 0.88rem;
    color: var(--color-text);
    line-height: 1.55;
    padding-top: 0.85rem;
}

.gericht-contacts {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gericht-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
}

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

.gericht-contact a:hover {
    text-decoration: underline;
}

@media print {
    .sidebar,
    .sidebar-hamburger,
    .sidebar-overlay,
    .gerichte-controls,
    .gericht-feedback-btn,
    .gericht-toggle,
    .btn-suggest,
    .modal-overlay,
    body.has-sidebar main {
        /* keep main visible — only specific controls hidden */
    }

    .sidebar,
    .sidebar-hamburger,
    .sidebar-overlay,
    .gerichte-controls,
    .gericht-feedback-btn,
    .gericht-toggle,
    .btn-suggest,
    .modal-overlay,
    .footer {
        display: none !important;
    }

    body.has-sidebar main {
        padding-left: 0 !important;
    }

    .gericht-card {
        break-inside: avoid;
        border: 1px solid #ccc !important;
        margin-bottom: 0.5rem;
        box-shadow: none !important;
    }

    /* Expand all cards in print */
    .gericht-card .gericht-details {
        display: grid !important;
        grid-template-columns: 150px 1fr !important;
    }

    .gericht-card .gericht-field {
        display: contents !important;
    }
}

/* ============================================================================
   Phase D — Akten (Mandate) UI
   ============================================================================ */

/* --- Sidebar groups --- */
.sidebar-group {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--sidebar-border);
}

.sidebar-group:first-of-type {
    border-top: none;
    padding-top: 0.25rem;
}

.sidebar-group-label {
    padding: 0 0.5rem 0.25rem 1.5rem;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sidebar-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar.expanded .sidebar-group-label,
.sidebar.pinned .sidebar-group-label,
.sidebar.mobile-open .sidebar-group-label,
:root.sidebar-pinned .sidebar .sidebar-group-label {
    opacity: 0.75;
}

.sidebar-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: auto;
}

.sidebar-item-disabled:hover {
    background: transparent !important;
}

/* --- Entity list/detail patterns ---
   Generic UI primitives reused by projects, deadlines, appointments,
   checklists, admin pages. Naming convention (post t-paliad-093 rename
   sweep, F-7 of t-paliad-074): generic table/tabs/form/empty/controls/
   detail/events/status/type/suggestion/chip/col/ref/search-wrap/select/
   soon/loading/muted/unavailable/row/header-row/title-input primitives
   live under the .entity-* prefix. Truly generic widgets carry no
   prefix at all: .multi-* (multi-select panel), .filter-*, .collab-*
   (collaborator picker, bare class .collab-picker), .firmwide-*,
   .office-*, .back-link. Project-specific patterns keep specific
   names: .party-form/-controls/-table (parties on a project),
   .checklists-hint, .netdocs-link. Page-scoped IDs in projects.tsx
   are projects-search/-count/-body; in projects-new.tsx,
   project-new-form/-msg.
*/
.entity-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.btn-cta-lime {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hlc-midnight);
    background: var(--hlc-lime);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.05s ease;
}

.btn-cta-lime:hover {
    background: var(--color-accent-light);
}

.btn-cta-lime:active {
    transform: translateY(1px);
}

.btn-cta-lime.btn-outline {
    background: transparent;
    color: var(--color-accent-fg);
    border: 1.5px solid var(--color-accent);
}

.btn-cta-lime.btn-outline:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.1);
}

.entity-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.entity-search-wrap {
    max-width: 460px;
}

.filter-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}

/* Each filter is a label-above-control cell so the caption sits on top of
   its select / button. The whole filter-row stays a horizontal flex-wrap
   of these column-cells (t-paliad-117).

   min-width: 0 + max-width: 100% lets the cell shrink to fit its flex
   container and prevents a native <select> with long option text from
   blowing the cell wider than the viewport (t-paliad-255). */
.filter-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
}

.filter-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

@media (max-width: 480px) {
    /* Single-column stack on narrow viewports — F-24. */
    .filter-row { flex-direction: column; align-items: stretch; }
    .filter-group .entity-select { width: 100%; }
}

/* max-width: 100% caps the intrinsic width of a native <select> at its
   parent — without it, browsers size the select to the longest <option>
   text and a very long project title overflows the viewport on tablet
   widths above the 480px breakpoint (t-paliad-255). */
.entity-select {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}

.entity-select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.entity-unavailable {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
    margin-bottom: 1rem;
}

.entity-table-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    overflow-x: auto;
    box-shadow: var(--shadow);
}

.entity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.entity-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}

/* .entity-table contract: every row must EITHER carry a row-level click
   handler that navigates to a detail page (skipping clicks on inner <a>
   and <button> so nested controls still work) OR the table must wear the
   `.entity-table--readonly` modifier (defined below) to opt out of the
   pointer cursor and hover highlight. The default rule below primes every
   row to look clickable; if your rows don't navigate, the cursor lies. */
.entity-table tbody tr {
    cursor: pointer;
    transition: background 0.08s ease;
    border-bottom: 1px solid var(--color-border);
}

.entity-table tbody tr:last-child {
    border-bottom: none;
}

.entity-table tbody tr:hover {
    background: var(--color-bg-lime-tint);
}

/* t-paliad-099: opt-out for tables whose rows do NOT navigate. The default
   .entity-table styling primes every row with cursor: pointer and a hover
   highlight, which lies for read-only summary tables (audit log, CalDAV
   sync log) and for admin tables where all actions live in inline buttons
   (admin-team, admin-event-types, admin-partner-units). Apply this modifier
   on the <table> to neutralise the row-level click affordance. */
.entity-table--readonly tbody tr {
    cursor: default;
}

.entity-table--readonly tbody tr:hover {
    background: transparent;
}

.entity-table td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.entity-col-title {
    font-weight: 600;
}

.entity-col-ref {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.entity-col-updated {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.office-chip,
.entity-status-chip,
.firmwide-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

/* Office chips matched the type-chip per-type palette and fell out of F-16
   for the same reason — the colours don't rank or group. Neutralised to the
   same midnight-tint as .entity-type-chip; the office name carries the
   information. Per-office classes stay on the markup for future signal use. */
.office-chip {
    background: rgb(var(--hlc-midnight-rgb) / 0.06);
    color: var(--color-text);
}

.entity-status-chip {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg-3);
}

/* F-23: hide STATUS column when every visible row shares the same value.
   Toggled at render time by deadlines.ts / projects.ts. The header and cell
   stay in the DOM so the column reappears the moment filters re-introduce
   variety. */
.entity-table--hide-status .entity-col-status {
    display: none;
}

.entity-status-active {
    background: var(--status-green-bg);
    color: var(--status-green-fg);
}

.entity-status-completed {
    background: var(--status-blue-bg);
    color: var(--status-blue-fg);
}

.entity-status-archived {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
}

.firmwide-chip {
    background: var(--hlc-lime);
    color: var(--hlc-midnight);
}

.firmwide-dot {
    color: var(--color-accent-fg);
    font-size: 0.95em;
    margin-left: 0.4rem;
}

.entity-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.entity-empty h2 {
    font-size: 1.15rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.entity-empty .btn-cta-lime {
    margin-top: 1rem;
}

.entity-empty-filtered {
    padding: 2rem 1.5rem;
}

/* --- Project tree view (Baumansicht) --- */
.projekt-tree-wrap {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    padding: 0.5rem 0.75rem;
}

.projekt-tree-loading,
.projekt-tree-error,
.projekt-tree-empty,
.projekt-tree-unavailable {
    padding: 1.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.projekt-tree-error,
.projekt-tree-unavailable {
    color: #92400e;
}

.projekt-tree-root,
.projekt-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.projekt-tree-children {
    padding-left: 1.5rem;
    border-left: 1px dashed var(--color-border);
    margin-left: 1.1rem;
}

.projekt-tree-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.08s ease;
}

.projekt-tree-row:hover {
    background: var(--color-bg-lime-tint);
}

.projekt-tree-row:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
    background: var(--color-bg-lime-tint);
}

.projekt-tree-toggle {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 3px;
    transition: transform 0.15s ease, background 0.1s ease;
}

.projekt-tree-toggle svg {
    width: 0.9rem;
    height: 0.9rem;
}

.projekt-tree-toggle:hover {
    background: rgb(var(--hlc-lime-rgb) / 0.18);
    color: var(--color-text);
}

.projekt-tree-toggle.is-open svg {
    transform: rotate(90deg);
}

.projekt-tree-toggle.is-leaf {
    cursor: default;
    pointer-events: none;
}

.projekt-tree-icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.projekt-tree-icon svg {
    width: 100%;
    height: 100%;
}

.projekt-tree-icon-client      { color: var(--tree-icon-client); }
.projekt-tree-icon-litigation  { color: var(--tree-icon-litigation); }
.projekt-tree-icon-patent      { color: var(--tree-icon-patent); }
.projekt-tree-icon-case        { color: var(--tree-icon-case); }
.projekt-tree-icon-project     { color: var(--tree-icon-project); }

.projekt-tree-title {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 28rem;
}

.projekt-tree-type-chip {
    flex: 0 0 auto;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg-2);
    font-weight: 600;
}

/* Project-type chips were per-type saturated random colours — lavender,
   pink-red, cyan, salmon, neutral-green — that carried no semantic ranking
   and made /projects feel alarming. F-16 collapses them to one calm
   midnight-tint chip and lets the type label inside the chip carry the
   differentiation. The per-type modifier classes are kept on the markup so
   future signal-use (e.g. highlighting Mandant roots) can re-introduce a
   colour for one specific type without re-adding the random palette. */
.entity-type-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
    background: rgb(var(--hlc-midnight-rgb) / 0.06);
    color: var(--color-text);
}

.projekt-tree-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.projekt-tree-spacer {
    flex: 1 1 auto;
}

.projekt-tree-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.projekt-tree-badge-overdue {
    background: var(--status-red-bg);
    color: var(--status-red-fg);
}

.projekt-tree-badge-open {
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

.projekt-tree-status {
    flex: 0 0 auto;
}

.projekt-tree-node[aria-current="true"] > .projekt-tree-row {
    background: rgb(var(--hlc-lime-rgb) / 0.2);
    border-left: 3px solid var(--color-accent);
    padding-left: calc(0.5rem - 3px);
}

@media (max-width: 720px) {
    .projekt-tree-meta,
    .projekt-tree-status {
        display: none;
    }
    .projekt-tree-title {
        max-width: 14rem;
    }
}

/* --- Akten create form --- */
.container-narrow {
    max-width: 680px;
}

.back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-decoration: none;
}

.back-link:hover {
    color: var(--color-accent-fg);
}

.entity-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.form-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .form-field-row {
        grid-template-columns: 1fr;
    }
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.form-checkbox input {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
}

.form-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.collab-picker {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    background: var(--color-surface);
}

.collab-picker input {
    flex: 1;
    min-width: 160px;
    border: none !important;
    padding: 0.3rem 0.5rem !important;
    outline: none !important;
    background: transparent !important;
}

.collab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.entity-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    background: var(--status-blue-soft-bg);
    color: var(--status-blue-soft-fg);
    border-radius: 999px;
}

.entity-chip-x {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0;
}

/* `.collab-suggestions` is absolute-positioned with top: 100% — needs a
   positioned ancestor or it falls back to the viewport's initial
   containing block and renders off-screen (text is in the DOM, but
   visually invisible — m hit this on the project team-add picker after
   t-141 made the dropdown content-visible but still let it float to
   nowhere). Scoped via :has() so we only flip the parent's position
   where it actually contains a suggestions dropdown. */
.form-field:has(> .collab-suggestions) {
    position: relative;
}

.collab-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    max-height: 240px;
    overflow-y: auto;
    display: none;
    z-index: 10;
}

/* Visibility is content-driven: when innerHTML is "" the div has no children
   and stays hidden; the moment a consumer renders <.collab-suggestion> rows
   the dropdown shows. Keeps the JS sites (project team-add, project parent
   picker, partner-units member-add) from each having to toggle display. */
.collab-suggestions:not(:empty) {
    display: block;
}

.collab-suggestion {
    display: block;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}

.collab-suggestion:last-child {
    border-bottom: none;
}

.collab-suggestion:hover,
.collab-suggestion.is-active {
    background: var(--color-bg-lime-tint);
}

.collab-suggestion strong {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.collab-suggestion .form-hint {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

/* Inline "invite this user instead" affordance shown beneath an empty
   .collab-suggestions when the typed query has no matches. */
.collab-invite-hint {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-lime-tint);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.collab-invite-hint button {
    flex-shrink: 0;
}

.entity-suggestion {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: none;
    background: var(--color-surface);
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
}

.entity-suggestion:hover {
    background: var(--color-bg-lime-tint);
}

.entity-suggestion-meta {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    margin-left: 0.75rem;
}

/* --- Akten detail --- */
.entity-detail-header {
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}

.entity-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.entity-detail-title-col h1 {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}

.entity-title-input {
    font-size: 1.6rem;
    font-weight: 700;
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
}

.entity-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.4rem;
}

.entity-ref {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-right: 0.25rem;
}

.entity-ref-select {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    max-width: 100%;
}

/* Auto-derived project code badge (t-paliad-222 / m/paliad#50).
   Distinct from the user's manual reference badge — same mono shape,
   subtly bracketed so the reader knows it's a derived/computed value
   rather than something typed by hand. Renders only when distinct
   from the manual reference (see renderHeader in projects-detail.ts). */
.entity-ref-code {
    opacity: 0.75;
}
.entity-ref-code::before { content: "[ "; }
.entity-ref-code::after { content: " ]"; }

.entity-detail-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: border-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-fg);
}

.entity-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
}

.entity-tab {
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.entity-tab:hover {
    color: var(--color-text);
}

.entity-tab.active {
    color: var(--color-text);
    border-bottom-color: var(--hlc-lime);
    font-weight: 600;
}

.entity-tab-panel {
    padding: 0.5rem 0 2rem;
}

/* Verwaltung tab — rare admin actions (export, archive) live here as
   stacked sections. No accent, no oversized buttons (t-paliad-245). */
.settings-section {
    margin-bottom: 2rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section .tool-subtitle {
    margin-bottom: 0.75rem;
}

.entity-events {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.entity-event {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

@media (max-width: 640px) {
    .entity-event {
        grid-template-columns: 1fr;
    }
}

/* Card-wide affordance when the event has a deep-link (deadline/appointment/
   note/checklist). Cursor + hover-lift telegraph "clickable row"; the actual
   navigation is wired by a row-level click handler in projects-detail.ts that
   skips inner <a>/<button> so the title link, action buttons, and text
   selection all keep working — same pattern as .entity-table (t-098/099).
   Replaces the t-102 ::before overlay, which captured pointer events on the
   text and broke select-to-copy (t-paliad-103). */
.entity-event:has(.entity-event-link) {
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.entity-event:has(.entity-event-link):hover,
.entity-event:has(.entity-event-link:focus-visible) {
    border-color: var(--color-accent-fg);
    box-shadow: var(--shadow-hover, var(--shadow));
}

.entity-event-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.entity-event-title {
    font-weight: 600;
    font-size: 0.9rem;
}

/* When the event title is wrapped in a link (checklist/deadline/appointment/
   note_created — see wrapEventTitleLink in projects-detail.ts), the title text
   inherits the parent's weight/colour. The link is the canonical, keyboard-
   reachable target; the surrounding .entity-event card grows the click surface
   via a row-level handler in projects-detail.ts (t-103). */
.entity-event-link {
    color: inherit;
    text-decoration: none;
}

.entity-event-link:hover {
    color: var(--color-accent-fg);
    text-decoration: underline;
}

/* Link's own focus ring is suppressed — the card-level rule above
   (.entity-event:has(.entity-event-link:focus-visible)) lifts the whole card
   instead, which matches the row-click click surface. */
.entity-event-link:focus-visible {
    outline: none;
}

.entity-event-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.entity-events-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.entity-empty-card {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.entity-empty-card p {
    margin: 0;
}

.entity-events-loadmore {
    margin-top: 1rem;
    text-align: center;
}

.party-controls {
    margin-bottom: 1rem;
}

.btn-small {
    padding: 0.4rem 0.9rem;
    font-size: 0.82rem;
}

/* t-paliad-139 — subtree aggregation toggle (Inkl. Unterprojekte / Nur direkt).
   Lives in .party-controls beside the section CTA. The active state shows
   "Nur direkt" with a darker chrome so the user can see at a glance that
   they've narrowed the view. Default (subtree) keeps standard secondary
   styling. */
.subtree-toggle {
    margin-left: 0.5rem;
}
.subtree-toggle--active {
    background: var(--color-accent-soft, var(--color-surface));
    border-color: var(--color-accent, var(--color-border));
    color: var(--color-text);
}

/* Attribution chip — shows the descendant project a row anchors on when
   the project detail page is aggregating. Inline-flush with the title cell;
   readable on both light and dark themes. */
.aggregation-chip {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.04));
    color: var(--color-text-muted, #555);
    font-size: 0.75rem;
    font-weight: normal;
    vertical-align: baseline;
    white-space: nowrap;
}

/* t-paliad-139 Phase 2 — Team-tab subsection headings. */
.entity-section-heading {
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

/* Derived-membership badges. */
.derived-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 9999px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.04));
    color: var(--color-text-muted, #555);
    font-size: 0.72rem;
    font-weight: 500;
    vertical-align: baseline;
}
.derived-badge--authority {
    background: var(--color-accent-soft, rgba(198, 244, 28, 0.18));
    color: var(--color-text);
}

/* t-paliad-148 — profession (firm-tier, read-only) and responsibility
   (per-project, editable inline) badges in the Team-tab table. Pattern
   mirrors .derived-badge but slightly larger so the values are
   first-class glanceable signal alongside the user's name. */
.projekt-team-profession {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    background: var(--color-bg-muted, rgba(0, 0, 0, 0.04));
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: help;
}
.projekt-team-profession--none {
    color: var(--color-text-muted, #777);
    font-style: italic;
    background: transparent;
    border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.12));
}
.projekt-team-responsibility {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    background: var(--color-accent-soft, rgba(198, 244, 28, 0.18));
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 500;
}

/* Warning variant of .form-hint — yellow tint, used by the team-add
   profession-hint when the picked user has no profession set. */
.form-hint--warning {
    color: #8a6d00;
    background: rgba(255, 213, 79, 0.12);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border-left: 2px solid #b88800;
}

/* t-paliad-251 — Auto-derived hint variant. Lime-tint, sibling of the
   yellow warning variant. Carries a small pill-badge in front (the
   "Auto" label) followed by the derived rule name. */
.form-hint--auto {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-bg-lime-tint);
    color: var(--color-text);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border-left: 2px solid var(--color-accent);
}
.form-hint-badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* t-paliad-251 — label row that hosts both the form label and an
   inline action (Standardtitel button, Rule-sort dropdown). The label
   keeps growing to push the action to the right edge. */
.form-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.form-field-label-row > label {
    margin: 0;
}

/* Inline action button rendered next to a form label (Standardtitel).
   Text-link styling so it doesn't compete with the primary CTA. */
.btn-link-action {
    background: transparent;
    border: none;
    color: var(--color-link, var(--color-text));
    padding: 0;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.btn-link-action:hover {
    color: var(--color-accent);
}

/* t-paliad-258 — Auto/Custom Rule editor (m/paliad#89).
   Replaces the t-paliad-251 catalog dropdown + sort selector with a
   binary toggle:
     .rule-mode-auto   — read-only display, lime-tint chip + label.
     .rule-mode-custom — free-text input, full-width.
   Toggle button reuses .btn-link-action for the inline link styling.
   t-paliad-267 / m/paliad#98 — the auto display is now a block-level
   row of its own so the resolved rule name sits on its own line
   beneath the toggle, not crammed beside it. Width is content-sized
   (align-self:flex-start within form-field's block flow keeps the
   chip from spanning the whole form column gratuitously). */
.rule-mode-auto {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.55rem;
    background: var(--color-bg-lime-tint);
    border-left: 2px solid var(--color-accent);
    border-radius: var(--radius-sm, 4px);
    min-height: 2rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
}
.rule-auto-text {
    color: var(--color-text);
    font-size: 0.95rem;
}
.rule-auto-text--empty {
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
}
.form-field input.rule-mode-custom,
input.rule-mode-custom {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.95rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text);
    font-family: var(--font-sans);
}

/* t-paliad-258 addendum — canonical rule label display:
   Name primary, Citation muted secondary ("Name · Citation").
   Custom rules use a "Custom" pill instead of a citation. */
.rule-label-name {
    color: var(--color-text);
}
.rule-label-sep,
.rule-label-cite {
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9em;
}
.rule-label-cite {
    margin-left: 0.15rem;
}
.rule-label-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    background: var(--color-bg-lime-tint);
    color: var(--color-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid var(--color-accent);
}

/* Inline checkbox label inside the attach-unit form. */
.form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    font-size: 0.9rem;
}

.party-form {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    gap: 0.75rem;
}

.party-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-surface);
}

.party-table thead th {
    text-align: left;
    padding: 0.6rem 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
}

.party-table td {
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.party-table tr:last-child td {
    border-bottom: none;
}

/* t-paliad-231 — checkbox column for the project-detail Team tab's
   "Mail an Auswahl" mailto: selection. Narrow, centred, accent-coloured. */
.party-table .team-col-select {
    width: 2.4rem;
    text-align: center;
    padding-left: 0.6rem;
    padding-right: 0.4rem;
}

.team-mail-select,
#team-select-master {
    accent-color: var(--color-primary, #c6f41c);
    cursor: pointer;
}

.team-mail-select:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.team-mailto-controls {
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.entity-col-actions {
    text-align: right;
}

.btn-link-danger {
    background: none;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0.2rem 0.5rem;
}

.btn-link-danger:hover {
    text-decoration: underline;
}

.btn-danger {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: #dc2626;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.15s ease;
}

.btn-danger:hover {
    background: #b91c1c;
}

/* t-paliad-252 — withdraw warning modal body. The destructive button sits
   inside the body (above the footer's Cancel + Edit primary) so the safe
   "Edit event" path stays visually primary. The intro paragraph leads,
   the muted sub-line explains consequences, then the red row makes the
   destructive option discoverable without competing with the CTA. */
.withdraw-warning-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.withdraw-warning-intro {
    margin: 0;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.45;
}
.withdraw-warning-sub {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}
.withdraw-warning-destructive-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--color-border);
}
.withdraw-warning-destructive-btn {
    /* Inherits .btn .btn-danger, but bump the font size down a touch so
       the body button doesn't crowd the footer's primary CTA. */
    font-size: 0.82rem;
    padding: 0.4rem 1rem;
}

.entity-soon {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.entity-soon h2 {
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.entity-soon p {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.entity-detail-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

.entity-loading {
    text-align: center;
    padding: 3rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ========================================================================
   Phase E — Fristen (persistent deadlines)
   Traffic-light: red overdue, amber soon, green later. Done = grey.
   ======================================================================== */

:root {
    --frist-red:    #ef4444;
    --frist-amber:  #f59e0b;
    --frist-green:  #22c55e;
    --frist-grey:   #9ca3af;

    /* 5-bucket deadline-summary palette (t-paliad-108). Drives both the
       Dashboard "Fristen auf einen Blick" cards (.dashboard-card-*) and
       the /deadlines summary cards (.frist-card-*) so the urgency
       hierarchy reads identically on both surfaces:
         red → orange → yellow → green → grey
       Each bucket is visually distinct from its neighbours. Light values
       pass WCAG AA-large (3:1+) on the white surface for the colored
       count (1.6–2.25rem, 600–700 weight = large text). The Überfällig
       alarm rule (saturated red bg + white text) overrides this when
       overdue > 0; see the .dashboard-card-alarm block below. */
    --bucket-overdue:   #ef4444;
    --bucket-today:     #c2410c;
    --bucket-week:      #a16207;
    --bucket-next-week: #16a34a;
    --bucket-later:     #1d4ed8;
    --bucket-done:      #6b7280;
}
:root[data-theme="dark"] {
    --bucket-overdue:   #fca5a5;
    --bucket-today:     #fb923c;
    --bucket-week:      #fbbf24;
    --bucket-next-week: #4ade80;
    --bucket-later:     #60a5fa;
    --bucket-done:      #9ca3af;
}

.fristen-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.frist-summary-cards {
    /* auto-fit so the row re-flows when a card is hidden (Überfällig is
       hidden when the count is zero — see t-paliad-105). With explicit
       `repeat(4, …)` a hidden card leaves an empty 4th column. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.frist-summary-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, transform 0.12s ease;
    font: inherit;
}

.frist-summary-card:hover {
    background: var(--color-bg-subtle);
    transform: translateY(-1px);
}

.frist-summary-card .frist-summary-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.65;
}

.frist-summary-count {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
}

.frist-summary-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.frist-card-overdue   { border-left-color: var(--bucket-overdue);   color: var(--bucket-overdue); }
.frist-card-today     { border-left-color: var(--bucket-today);     color: var(--bucket-today); }
.frist-card-week      { border-left-color: var(--bucket-week);      color: var(--bucket-week); }
.frist-card-next-week { border-left-color: var(--bucket-next-week); color: var(--bucket-next-week); }
.frist-card-upcoming  { border-left-color: var(--bucket-next-week); color: var(--bucket-next-week); }
.frist-card-later     { border-left-color: var(--bucket-later);     color: var(--bucket-later); }
.frist-card-completed { border-left-color: var(--bucket-done);      color: var(--bucket-done); }

.fristen-table .frist-col-check {
    width: 28px;
    padding-right: 0;
}

.fristen-table .frist-col-due {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.fristen-table .frist-col-rule {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.frist-due-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
    background: var(--frist-grey);
}

.frist-urgency-overdue { color: var(--frist-red); }
.frist-urgency-overdue .frist-due-dot { background: var(--frist-red); }
.frist-urgency-soon    { color: var(--frist-amber); }
.frist-urgency-soon .frist-due-dot    { background: var(--frist-amber); }
.frist-urgency-later   { color: var(--frist-green); }
.frist-urgency-later .frist-due-dot   { background: var(--frist-green); }
.frist-urgency-done    { color: var(--frist-grey); text-decoration: line-through; }
.frist-urgency-done .frist-due-dot    { background: var(--frist-grey); }

.frist-title-done {
    text-decoration: line-through;
    color: var(--color-text-muted);
}

.frist-reopen-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.frist-reopen-btn:hover {
    color: var(--color-accent-fg);
    border-color: var(--color-accent, var(--color-accent));
    background: rgb(var(--hlc-lime-rgb) / 0.08);
}

.frist-reopen-btn:disabled {
    cursor: default;
    opacity: 0.5;
}

.entity-ref-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
}

.entity-ref-link:hover {
    text-decoration: underline;
}

.frist-project-title {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22rem;
}

.frist-due-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--status-neutral-bg);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
}

.frist-due-chip.frist-urgency-overdue { background: var(--status-red-bg); color: var(--status-red-fg); }
.frist-due-chip.frist-urgency-soon    { background: var(--status-amber-bg); color: var(--status-amber-fg); }
.frist-due-chip.frist-urgency-later   { background: var(--status-green-bg); color: var(--status-green-fg); }
.frist-due-chip.frist-urgency-done    { background: var(--status-neutral-bg); color: var(--status-neutral-fg); text-decoration: none; }

/* t-paliad-160 §C — pending-approval badge on the entity detail header
 * (and entity rows). Surfaces approval_status='pending' so the user
 * sees why the action buttons are hidden. Hover-tooltip carries
 * requested_at + required_role + requester. */
.approval-pending-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
    border: 1px solid var(--status-amber-fg);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: help;
}

.entity-status-chip.entity-status-pending   { background: var(--status-amber-bg); color: var(--status-amber-fg); }
.entity-status-chip.entity-status-cancelled { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.entity-status-chip.entity-status-waived    { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }

.frist-detail-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    background: var(--color-surface);
}

.frist-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    row-gap: 0.75rem;
    margin: 0;
}

.frist-detail-list dt {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.frist-detail-list dd {
    margin: 0;
    color: var(--color-text);
}

.frist-detail-list textarea,
.frist-detail-list input[type="date"] {
    width: 100%;
    max-width: 22rem;
}

/* Calendar view styles live in .views-calendar-* (search for that
   prefix). The /events Kalender tab and Custom Views shape=calendar
   both mount the same component (frontend/src/client/calendar/
   mount-calendar.ts, t-paliad-224). */

/* Fristenrechner save-to-Akte modal */

.fristen-result-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.frist-save-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.frist-save-row {
    border-bottom: 1px solid var(--color-border);
}

.frist-save-row:last-child {
    border-bottom: none;
}

.frist-save-row label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    margin: 0;
}

.frist-save-row input[type="checkbox"]:disabled + .frist-save-title {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.frist-save-title {
    flex: 1;
    color: var(--color-text);
}

.frist-save-meta {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

/* m's 2026-05-08 Determinator redesign — Step 1 (Akte picker) + Step 2
 * (Do/Happened bifurcation) sit where the legacy "Was möchten Sie tun?"
 * fork used to be. */

.fristen-step-heading {
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
    color: var(--color-text, #222);
}

.fristen-step1 {
    margin: 0.5rem 0 1.25rem;
}

.fristen-step1-search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 0.5rem;
    background: var(--color-bg, #fff);
}

.fristen-step1-search-row .fristen-search-icon {
    position: static;
    color: var(--color-muted, #666);
    flex-shrink: 0;
}

.fristen-akte-search {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-text, #222);
    font-size: 0.95rem;
    padding: 0.25rem 0;
}

.fristen-akte-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 0.5rem;
    background: var(--color-bg, #fff);
}

.fristen-akte-list li {
    border-bottom: 1px solid var(--color-border, #f0f0f0);
}

.fristen-akte-list li:last-child {
    border-bottom: 0;
}

.fristen-akte-list-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--color-text, #222);
    font-size: 0.92rem;
    cursor: pointer;
}

.fristen-akte-list-item:hover {
    background: var(--color-bg-subtle, #f7f7f7);
}

.fristen-akte-list-item:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: -2px;
}

.fristen-akte-list-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--color-muted, #666);
}

.fristen-akte-list-title {
    color: var(--color-text, #222);
}

.fristen-akte-list-empty {
    padding: 0.7rem 0.85rem;
    color: var(--color-muted, #666);
    font-size: 0.9rem;
    font-style: italic;
}

.fristen-step1-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 1rem 0 0.5rem;
    color: var(--color-muted, #666);
    font-size: 0.85rem;
}

.fristen-step1-divider::before,
.fristen-step1-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border, #e5e5e5);
}

.fristen-step1-new {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 0.5rem;
    background: var(--color-bg, #fff);
    color: var(--color-text, #222);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 120ms, border-color 120ms;
}

.fristen-step1-new:hover {
    background: var(--color-bg-subtle, #f4f4f4);
    border-color: var(--color-text-muted, #aaa);
}

.fristen-adhoc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fristen-adhoc-chip {
    padding: 0.35rem 0.85rem;
    border: 1px dashed var(--color-border, #c5c5c5);
    border-radius: 9999px;
    background: var(--color-bg, #fff);
    color: var(--color-text-muted, #555);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}

.fristen-adhoc-chip:hover {
    background: var(--color-bg-subtle, #f4f4f4);
    border-style: solid;
    color: var(--color-text, #222);
}

.fristen-adhoc-chip:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

.fristen-step1-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 0.5rem;
    background: var(--color-bg-subtle, #fafafa);
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.fristen-step1-summary-label {
    color: var(--color-muted, #666);
    font-size: 0.85rem;
}

.fristen-step1-summary-name {
    color: var(--color-text, #222);
}

.fristen-step1-summary-meta {
    color: var(--color-muted, #666);
    font-size: 0.85rem;
    font-style: italic;
}

.fristen-step1-summary-reselect {
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 9999px;
    background: var(--color-bg, #fff);
    color: var(--color-text-muted, #555);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}

.fristen-step1-summary-reselect:hover {
    background: var(--color-bg-subtle, #f4f4f4);
    border-color: var(--color-text-muted, #aaa);
}

.fristen-step1-summary-reselect:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

.fristen-step2 {
    margin: 0.75rem 0 1.25rem;
}

.fristen-step2-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .fristen-step2-cards { grid-template-columns: 1fr; }
}

.fristen-step2-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 0.6rem;
    background: var(--color-bg, #fff);
    color: var(--color-text, #222);
    text-align: left;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, transform 120ms;
}

.fristen-step2-card:hover {
    background: var(--color-bg-subtle, #fafafa);
    border-color: var(--color-text-muted, #aaa);
    transform: translateY(-1px);
}

.fristen-step2-card:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 2px;
}

.fristen-step2-card-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.fristen-step2-card-title {
    font-weight: 600;
    font-size: 1rem;
}

.fristen-step2-card-desc {
    color: var(--color-muted, #666);
    font-size: 0.85rem;
}

.fristen-step2-shortcut {
    margin-top: 1rem;
}

/* Step 3a draft card — disabled placeholder for the future drafting
 * surface. Greyed out, no hover lift, "kommt bald" pill on the card. */
.fristen-step2-card--soon {
    opacity: 0.55;
    cursor: not-allowed;
}
.fristen-step2-card--soon:hover {
    background: var(--color-bg, #fff);
    border-color: var(--color-border, #ddd);
    transform: none;
}
.fristen-step2-card-soon {
    align-self: flex-end;
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--color-bg-subtle, #f4f4f4);
    color: var(--color-muted, #666);
    font-size: 0.7rem;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Compact one-line summary that replaces the four proceeding-group
 * blocks once the user picks a Verfahren. m's 2026-05-08 18:26 ask. */
.proceeding-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 0.5rem;
    background: var(--color-bg-subtle, #fafafa);
    font-size: 0.95rem;
}
.proceeding-summary-label {
    color: var(--color-muted, #666);
    font-size: 0.85rem;
}
.proceeding-summary-name {
    color: var(--color-text, #222);
}
.proceeding-summary-reselect {
    margin-left: 0.4rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 9999px;
    background: var(--color-bg, #fff);
    color: var(--color-text-muted, #555);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 120ms, border-color 120ms;
}
.proceeding-summary-reselect:hover {
    background: var(--color-bg-subtle, #f4f4f4);
    border-color: var(--color-text-muted, #aaa);
}
.proceeding-summary-reselect:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

/* "auf Antrag" pill on optional rows in the save-to-project modal —
 * signals that the row is opt-in (m's 2026-05-08 batch Item 2). */
.frist-save-optional {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--color-bg-subtle, #f4f4f4);
    color: var(--color-muted, #666);
    font-size: 0.7rem;
    font-style: italic;
    letter-spacing: 0.02em;
}

.form-msg-ok {
    color: #166534;
}

@media (max-width: 700px) {
    .frist-summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========================================================================
   Dashboard (Phase G — logged-in landing)
   ======================================================================== */

.dashboard-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.dashboard-greeting {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
}

.dashboard-greeting-name {
    color: var(--color-accent-fg);
}

.dashboard-subline {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.dashboard-office-chip {
    margin-right: 0.25rem;
}

.dashboard-date {
    text-transform: capitalize;
}

.dashboard-section-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.dashboard-unavailable {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
}

/* --- Traffic-light summary cards --- */

.dashboard-summary {
    margin-bottom: 2rem;
}

.dashboard-summary-grid {
    /* auto-fit so the row re-flows when a card is hidden (Überfällig is
       hidden when the count is zero — see t-paliad-105). */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.dashboard-card {
    display: block;
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    box-shadow: var(--shadow);
}

.dashboard-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dashboard-card-count {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.dashboard-card-label {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* 5-bucket urgency cards — palette shared with .frist-card-* via the
   --bucket-* tokens (t-paliad-108). The .dashboard-card-amber class name
   is historical (was amber-only pre-t-paliad-106); it now drives the
   "Diese Woche" yellow bucket. */
.dashboard-card-red .dashboard-card-count   { color: var(--bucket-overdue); }
.dashboard-card-red                         { border-left: 3px solid var(--bucket-overdue); }
.dashboard-card-today .dashboard-card-count { color: var(--bucket-today); }
.dashboard-card-today                       { border-left: 3px solid var(--bucket-today); }
.dashboard-card-amber .dashboard-card-count { color: var(--bucket-week); }
.dashboard-card-amber                       { border-left: 3px solid var(--bucket-week); }
.dashboard-card-green .dashboard-card-count { color: var(--bucket-next-week); }
.dashboard-card-green                       { border-left: 3px solid var(--bucket-next-week); }
.dashboard-card-done .dashboard-card-count  { color: var(--bucket-done); }
.dashboard-card-done                        { border-left: 3px solid var(--bucket-done); }
/* Später bucket on the Fristen rail — muted blue (t-paliad-110). */
.dashboard-card-later .dashboard-card-count { color: var(--bucket-later); }
.dashboard-card-later                       { border-left: 3px solid var(--bucket-later); }
/* Termine rail uses the same urgency token family — keep the palette
   consistent across rails so users read both at the same glance. */
.dashboard-card-appt-today .dashboard-card-count { color: var(--bucket-today); }
.dashboard-card-appt-today                       { border-left: 3px solid var(--bucket-today); }
.dashboard-card-appt-week  .dashboard-card-count { color: var(--bucket-week); }
.dashboard-card-appt-week                        { border-left: 3px solid var(--bucket-week); }
.dashboard-card-appt-later .dashboard-card-count { color: var(--bucket-later); }
.dashboard-card-appt-later                       { border-left: 3px solid var(--bucket-later); }

/* Überfällig alarm — see t-paliad-105 / t-paliad-106.
   When overdue > 0 the card flips from a calm border-left accent to a
   saturated red surface with bold white text and a pulsing ring. The matching
   JS toggles `.dashboard-card-alarm` (Dashboard) and `.frist-card-alarm`
   (Fristen); when overdue === 0 the card is hidden entirely. Uses the pulse
   animation only (no static glow) to stay below the visual-noise threshold
   the spec calls for. */
@keyframes paliad-alarm-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgb(220 38 38 / 0.55); }
    50%      { box-shadow: 0 0 0 12px rgb(220 38 38 / 0);    }
}

.dashboard-card-red.dashboard-card-alarm,
.frist-summary-card.frist-card-overdue.frist-card-alarm {
    background: #dc2626;
    color: #ffffff;
    border-color: #991b1b;
    border-left-color: #7f1d1d;
    animation: paliad-alarm-pulse 1.8s ease-in-out infinite;
}

.dashboard-card-red.dashboard-card-alarm .dashboard-card-count,
.dashboard-card-red.dashboard-card-alarm .dashboard-card-label,
.frist-summary-card.frist-card-overdue.frist-card-alarm .frist-summary-count,
.frist-summary-card.frist-card-overdue.frist-card-alarm .frist-summary-label {
    color: #ffffff;
    font-weight: 700;
}

.frist-summary-card.frist-card-overdue.frist-card-alarm .frist-summary-dot {
    background: #ffffff;
    opacity: 1;
}

.dashboard-card-overdue-hidden,
.frist-card-overdue-hidden {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-card-red.dashboard-card-alarm,
    .frist-summary-card.frist-card-overdue.frist-card-alarm {
        animation: none;
    }
}

:root[data-theme="dark"] .dashboard-card-red.dashboard-card-alarm,
:root[data-theme="dark"] .frist-summary-card.frist-card-overdue.frist-card-alarm {
    background: #ef4444;
    border-color: #f87171;
    border-left-color: #fca5a5;
}

/* --- Matter summary card --- */

.dashboard-matters {
    margin-bottom: 2rem;
}

.dashboard-matter-card {
    display: block;
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.12s ease;
}

.dashboard-matter-card:hover {
    color: var(--color-accent-fg);
}

.dashboard-matter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.dashboard-matter-header h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-matter-arrow {
    color: var(--color-accent-fg);
    font-size: 1.1rem;
}

.dashboard-matter-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.dashboard-matter-num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
}

.dashboard-matter-lbl {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

/* --- Configurable widget grid (t-paliad-227 overhaul) --- */

/* All dashboard widgets live as direct children of .dashboard-grid.
   Inline grid-column / grid-row from applyLayout drive placement;
   grid-auto-flow:dense fills any holes left by the explicit positions
   so the grid stays compact even with sparse layouts. */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: minmax(min-content, auto);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* On narrow viewports the 12-col grid collapses to a single stack
   regardless of the per-widget x/w/y/h — explicit positions are a
   desktop affordance, not a mobile contract. The breakpoint matches
   the existing .dashboard-columns rule below so the same screen
   widths see consistent behaviour. */
@media (max-width: 720px) {
    .dashboard-grid > [data-widget-key] {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* --- Two-column lists (legacy, kept for any non-dashboard usage) --- */

.dashboard-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.dashboard-col {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
    /* Grid items default to min-width: auto, which sizes to min-content.
       Without this, the nowrap title/ref strings inside .dashboard-list-link
       force the column wider than its grid track and overflow the page on
       narrow viewports. */
    min-width: 0;
}

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

.dashboard-list-item {
    border-bottom: 1px solid var(--color-border);
}

.dashboard-list-item:last-child {
    border-bottom: none;
}

.dashboard-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.1s ease;
}

.dashboard-list-link:hover {
    color: var(--color-accent-fg);
}

.dashboard-list-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dashboard-list-title {
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-ref {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-list-meta {
    flex-shrink: 0;
}

.dashboard-urgency-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-urgency-overdue { background: var(--status-red-bg);         color: var(--status-red-fg); }
.dashboard-urgency-today   { background: var(--status-amber-bg);       color: var(--status-amber-fg); }
.dashboard-urgency-urgent  { background: var(--status-amber-bg);       color: var(--status-amber-fg-2); }
.dashboard-urgency-soon    { background: var(--status-green-soft-bg);  color: var(--status-green-soft-fg); }

.dashboard-appt-time {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.dashboard-termin-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #94a3b8;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.dashboard-termin-hearing         { background: #b91c1c; }
.dashboard-termin-meeting         { background: #2563eb; }
.dashboard-termin-consultation    { background: var(--color-accent); }
.dashboard-termin-deadline_hearing { background: #b45309; }

.dashboard-empty {
    padding: 1.5rem 0.5rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-style: italic;
}

/* --- Activity feed --- */

.dashboard-activity {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
    margin-bottom: 3rem;
}

.dashboard-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Whole row is the click surface (row-handler in dashboard.ts t-paliad-103);
   inner .dashboard-activity-project link still wins for Cmd-click and keyboard
   tabbing, and text selection works because there's no overlay. */
.dashboard-activity-item {
    display: grid;
    grid-template-columns: 8.5rem 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.08s ease;
}

.dashboard-activity-item:hover {
    background: var(--color-bg-lime-tint);
}

.dashboard-activity-item:last-child {
    border-bottom: none;
}

.dashboard-activity-time {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.dashboard-activity-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dashboard-activity-summary {
    margin: 0;
    color: var(--color-text);
    line-height: 1.35;
}

.dashboard-activity-summary strong {
    font-weight: 600;
    margin-right: 0.3rem;
}

.dashboard-activity-detail {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.dashboard-activity-project {
    font-family: var(--font-mono);
    color: var(--color-accent-fg);
    text-decoration: none;
    margin-right: 0.4rem;
}

.dashboard-activity-project:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Collapsible sections (t-paliad-162)
   --------------------------------------------------------------------------- */

/* The .dashboard-section is the wrapper rendered by CollapsibleSection in
   dashboard.tsx. SSR emits aria-expanded="true" on both the section and the
   inner toggle button; client-side hydration in client/dashboard.ts restores
   the persisted state from localStorage and toggles aria-expanded on click.
   The body stays in the DOM (display:none on collapse) so screen readers
   reach the content via the focused toggle's controls without a re-render.

   Inside .dashboard-columns each section also gets the card chrome that
   .dashboard-col used to carry — same border/shadow/padding so the rails
   visually match what users had pre-reorg. */
.dashboard-section {
    margin-bottom: 2rem;
}

/* Inside the grid the gap handles inter-widget spacing — the legacy
   per-section margin would double up and push every widget down. */
.dashboard-grid > .dashboard-section {
    margin-bottom: 0;
}

/* Every grid widget gets the card chrome that .dashboard-columns >
   .dashboard-section already gave the deadlines / appointments pair.
   Without this, widgets like deadline-summary / matter-summary lose the
   surface + border + padding that visually separated them from the
   page background. */
.dashboard-grid > .dashboard-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
    min-width: 0;
    /* Stretch widgets to the full row height of their grid row so two
       neighbouring widgets with different content heights still align
       to a tidy bottom edge. */
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

.dashboard-grid > .dashboard-section > .dashboard-section-body {
    flex: 1;
    min-height: 0;
}

/* Hide the legacy duplicate-card-chrome rule when the new grid is
   active so we don't get a doubled border on the deadlines/appointments
   pair (which legacy CSS targeted via .dashboard-columns >
   .dashboard-section). */
.dashboard-grid .dashboard-columns > .dashboard-section {
    box-shadow: none;
    border: 0;
    padding: 0;
}

.dashboard-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.dashboard-section-toggle .dashboard-section-heading {
    /* Override the default heading bottom margin — the .dashboard-section-body
       owns vertical spacing now, so the toggle row sits flush against its
       content when expanded. */
    margin-bottom: 0;
}

.dashboard-section-toggle:hover .dashboard-section-heading,
.dashboard-section-toggle:focus-visible .dashboard-section-heading {
    color: var(--color-accent-fg);
}

.dashboard-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}

.dashboard-section-chevron svg {
    width: 1rem;
    height: 1rem;
}

.dashboard-section[aria-expanded="true"] .dashboard-section-chevron {
    transform: rotate(90deg);
}

.dashboard-section[aria-expanded="false"] .dashboard-section-chevron {
    transform: rotate(0deg);
}

.dashboard-section-body {
    margin-top: 0.75rem;
}

.dashboard-section[aria-expanded="false"] .dashboard-section-body {
    display: none;
}

/* Two-column rails inherit the prior .dashboard-col card chrome — kept the
   .dashboard-col selector elsewhere for any direct usages, but the dashboard
   markup now uses .dashboard-section inside .dashboard-columns. */
.dashboard-columns > .dashboard-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.4rem;
    box-shadow: var(--shadow);
    margin-bottom: 0;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Dashboard edit mode (t-paliad-219 Slice B)
   ---------------------------------------------------------------------------
   The Anpassen toggle in the dashboard header flips body.dashboard-editing.
   In view mode every .dashboard-widget__* selector is a no-op (chrome is
   only injected dynamically by client/dashboard.ts on toggle-on). Footer
   + reset are CSS-hidden until editing.
   --------------------------------------------------------------------------- */
.dashboard-edit-toggle {
    align-self: flex-start;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.dashboard-edit-footer {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-muted, var(--color-surface));
    flex-wrap: wrap;
}

body.dashboard-editing .dashboard-edit-footer {
    display: flex;
}

.dashboard-edit-add {
    font-size: 0.9rem;
}

.dashboard-edit-reset-link {
    background: none;
    border: 0;
    padding: 0.2rem 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}

.dashboard-edit-reset-link:hover,
.dashboard-edit-reset-link:focus-visible {
    color: var(--color-text);
}

/* Every [data-widget-key] needs position:relative so the resize handle
   (absolute bottom-right) and gear popover (absolute) anchor correctly.
   Apply outside edit mode too — the resize handle only renders in edit
   mode, but having a stable positioning context is cheap and keeps the
   layout calculation consistent. */
[data-widget-key] {
    position: relative;
}

/* Chrome strip injected on every [data-widget-key] when editing. */
body.dashboard-editing [data-widget-key].dashboard-widget {
    outline: 1px dashed var(--color-border);
    outline-offset: 4px;
    border-radius: var(--radius);
    transition: outline-color 0.12s ease;
}

body.dashboard-editing [data-widget-key].dashboard-widget--hidden {
    opacity: 0.45;
}

body.dashboard-editing [data-widget-key].dashboard-widget--dragging {
    opacity: 0.5;
}

body.dashboard-editing [data-widget-key].dashboard-widget--dragover {
    outline-color: var(--color-accent-fg);
    outline-style: solid;
    outline-width: 2px;
}

.dashboard-widget__chrome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    margin: 0 0 0.6rem;
    background: var(--color-surface-muted, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.dashboard-widget__handle {
    cursor: grab;
    color: var(--color-text-muted);
    letter-spacing: -0.1em;
    user-select: none;
}

.dashboard-widget__handle:active {
    cursor: grabbing;
}

.dashboard-widget__label {
    flex: 1;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-widget__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dashboard-widget__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.dashboard-widget__btn:hover,
.dashboard-widget__btn:focus-visible {
    border-color: var(--color-accent-fg);
    color: var(--color-accent-fg);
}

.dashboard-widget__hide:hover {
    color: var(--status-red-fg, #b91c1c);
    border-color: currentColor;
}

/* Gear popover — absolutely positioned inside the .dashboard-widget. */
.dashboard-widget__gear-popover {
    min-width: 180px;
    padding: 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dashboard-widget__gear-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.dashboard-widget__gear-label {
    color: var(--color-text-muted);
}

.dashboard-widget__gear-select {
    min-width: 80px;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
}

/* Combo row: label on the left, multiple controls on the right (e.g.
   the count row's preset dropdown alongside the custom numeric input). */
.dashboard-widget__gear-row--combo {
    flex-wrap: wrap;
}

.dashboard-widget__gear-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dashboard-widget__gear-mini {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dashboard-widget__gear-number {
    width: 4.2rem;
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    text-align: right;
}

/* View segmented control — one button per view option. The active
   variant gets the accent fill so the current choice is obvious. */
.dashboard-widget__view-group {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.dashboard-widget__view-btn {
    padding: 0.25rem 0.55rem;
    background: var(--color-surface);
    border: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    border-right: 1px solid var(--color-border);
}

.dashboard-widget__view-btn:last-child {
    border-right: 0;
}

.dashboard-widget__view-btn:hover,
.dashboard-widget__view-btn:focus-visible {
    color: var(--color-text);
    background: var(--color-surface-muted, var(--color-surface));
}

.dashboard-widget__view-btn--active {
    background: var(--color-accent-fg, var(--color-text));
    color: var(--color-surface);
    font-weight: 600;
}

.dashboard-widget__view-btn--active:hover,
.dashboard-widget__view-btn--active:focus-visible {
    background: var(--color-accent-fg, var(--color-text));
    color: var(--color-surface);
}

/* Resize handle (bottom-right corner). Hidden in view mode; the
   pointerdown handler in client/dashboard.ts converts pointer drag
   into a snap-to-grid resize gesture. */
.dashboard-widget__resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 50%, var(--color-text-muted) 50%, var(--color-text-muted) 60%, transparent 60%, transparent 70%, var(--color-text-muted) 70%, var(--color-text-muted) 80%, transparent 80%);
    border-bottom-right-radius: var(--radius);
    opacity: 0.6;
    touch-action: none;
    z-index: 5;
}

.dashboard-widget__resize:hover {
    opacity: 1;
}

body.dashboard-editing [data-widget-key].dashboard-widget--resizing {
    outline-color: var(--color-accent-fg);
    outline-style: solid;
    outline-width: 2px;
    user-select: none;
}

/* Mini calendar — used by the upcoming-deadlines / upcoming-
   appointments widgets when view="calendar". Each month is a 7×N grid
   of day cells with up to 3 colored dots per day plus a "+N" overflow. */
.dashboard-calendar {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.dashboard-cal-month {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dashboard-cal-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

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

.dashboard-cal-day {
    padding: 0.2rem 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.dashboard-cal-cell {
    min-height: 3.4rem;
    padding: 0.25rem;
    background: var(--color-surface-muted, var(--color-surface));
    border: 1px solid var(--color-border);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    font-size: 0.75rem;
}

.dashboard-cal-cell--blank {
    background: transparent;
    border: 0;
}

.dashboard-cal-cell--today {
    background: var(--color-surface);
    border-color: var(--color-accent-fg);
    box-shadow: 0 0 0 1px var(--color-accent-fg) inset;
}

.dashboard-cal-cell--has-items {
    background: var(--color-surface);
}

.dashboard-cal-num {
    font-size: 0.75rem;
    color: var(--color-text);
}

.dashboard-cal-dots {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    align-items: center;
}

.dashboard-cal-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent-fg, var(--color-text-muted));
    display: inline-block;
}

.dashboard-cal-dot--overdue { background: var(--status-red-fg, #b91c1c); }
.dashboard-cal-dot--today   { background: var(--status-amber-fg, #d97706); }
.dashboard-cal-dot--urgent  { background: var(--status-amber-fg, #d97706); }
.dashboard-cal-dot--soon    { background: var(--status-green-fg, #16a34a); }

.dashboard-cal-more {
    font-size: 0.65rem;
    color: var(--color-text-muted);
}

/* Compact activity view: collapse each row to a single line. */
.dashboard-activity-list--compact .dashboard-activity-detail {
    display: none;
}

.dashboard-activity-list--compact .dashboard-activity-item {
    padding-block: 0.3rem;
}

/* Widget picker modal body */
.widget-picker__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.widget-picker__empty {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 1rem 0;
    text-align: center;
}

.widget-picker__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.widget-picker__btn {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.widget-picker__btn:hover:not([disabled]),
.widget-picker__btn:focus-visible:not([disabled]) {
    background: var(--color-surface-muted, var(--color-surface));
}

.widget-picker__btn[disabled] {
    cursor: default;
    opacity: 0.7;
}

.widget-picker__title {
    grid-column: 1;
    font-weight: 600;
    color: var(--color-text);
}

.widget-picker__desc {
    grid-column: 1;
    grid-row: 2;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.widget-picker__pill {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.widget-picker__pill--active {
    background: var(--status-green-bg, rgba(110, 220, 130, 0.18));
    color: var(--status-green-fg, #166534);
}

.widget-picker__pill--hidden {
    background: var(--status-amber-bg, rgba(255, 200, 110, 0.18));
    color: var(--status-amber-fg, #92400e);
}

.widget-picker__pill--absent {
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.06));
    color: var(--color-text-muted);
}

/* Autosave toast */
.dashboard-save-toast {
    position: fixed;
    right: 1.5rem;
    bottom: calc(var(--bottom-nav-height, 1rem) + 1rem);
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 0.85rem;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 60;
}

.dashboard-save-toast--show {
    opacity: 1;
    transform: translateY(0);
}

.dashboard-save-toast--err {
    border-color: var(--status-red-fg, #b91c1c);
    color: var(--status-red-fg, #b91c1c);
}

/* Mobile fallback (design §6.8) — single column already collapses via the
   .dashboard-columns media query. The toggle becomes a wider tappable
   button; drag handle is hidden in favor of the ↑/↓ buttons since
   touch DnD is unreliable. The picker modal goes full-screen via the
   modal primitive's existing @media (max-width: 32rem) rule. */
@media (max-width: 32rem) {
    .dashboard-edit-toggle {
        align-self: stretch;
        width: 100%;
        padding: 0.6rem 0.8rem;
    }

    body.dashboard-editing .dashboard-widget__handle {
        display: none;
    }

    .dashboard-save-toast {
        left: 1rem;
        right: 1rem;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
   Slice C: pinned-projects + quick-actions widgets (t-paliad-219)
   --------------------------------------------------------------------------- */
.dashboard-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dashboard-quick-btn {
    flex: 1 1 auto;
    text-align: center;
    min-width: 8rem;
}

.dashboard-edit-promote {
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
}

/* ---------------------------------------------------------------------------
   Inline Agenda on the dashboard (t-paliad-162)
   --------------------------------------------------------------------------- */
.dashboard-agenda {
    /* The shared .agenda-* classes inside the timeline already carry their
       own spacing; this wrapper just hosts the "open full agenda" link. */
}

.dashboard-agenda-link {
    margin: 1rem 0 0;
    text-align: right;
    font-size: 0.85rem;
}

.dashboard-agenda-link a {
    color: var(--color-accent-fg);
    text-decoration: none;
    font-weight: 600;
}

.dashboard-agenda-link a:hover,
.dashboard-agenda-link a:focus-visible {
    text-decoration: underline;
}

/* --- Responsive --- */

@media (max-width: 900px) {
    .dashboard-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dashboard-columns {
        grid-template-columns: 1fr;
    }
    .dashboard-matter-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    .dashboard-activity-item {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

/* ============================================================================
 * Phase F — Termine + CalDAV
 * ============================================================================ */

/* Type colours match the dashboard set so dots/chips/badges stay coherent.
   Keyed by termin_type so adding a new type only needs one block. */
.termin-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #94a3b8;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.termin-type-hearing          { background: #b91c1c; color: #b91c1c; }
.termin-type-meeting          { background: #2563eb; color: #2563eb; }
.termin-type-consultation     { background: var(--color-accent); color: var(--color-accent-fg); }
.termin-type-deadline_hearing { background: #b45309; color: #b45309; }
.termin-type-default          { background: #94a3b8; color: #64748b; }

.termin-type-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--color-overlay-faint);
    color: inherit;
}
.termin-type-chip.termin-type-hearing          { background: rgba(185, 28, 28, 0.10); }
.termin-type-chip.termin-type-meeting          { background: rgba(37, 99, 235, 0.10); }
.termin-type-chip.termin-type-consultation     { background: rgb(var(--hlc-lime-rgb) / 0.10); }
.termin-type-chip.termin-type-deadline_hearing { background: rgba(180, 83, 9, 0.12); }

.termin-type-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--color-overlay-subtle);
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}
.termin-type-badge.termin-type-hearing          { background: rgba(185, 28, 28, 0.12); color: #b91c1c; }
.termin-type-badge.termin-type-meeting          { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.termin-type-badge.termin-type-consultation     { background: rgb(var(--hlc-lime-rgb) / 0.12); color: var(--hlc-midnight); }
.termin-type-badge.termin-type-deadline_hearing { background: rgba(180, 83, 9, 0.14); color: #92400e; }

.termin-personal-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    background: var(--color-overlay-faint);
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

/* Summary cards reuse .frist-summary-card; just colour them appropriately. */
.termin-card-today  { border-left-color: #b45309; color: #b45309; }
.termin-card-week   { border-left-color: #2563eb; color: #2563eb; }
.termin-card-later  { border-left-color: #475569; color: #475569; }
.termin-card-today  .frist-summary-dot { background: #b45309; }
.termin-card-week   .frist-summary-dot { background: #2563eb; }
.termin-card-later  .frist-summary-dot { background: #475569; }

/* CalDAV settings page */
.caldav-status-card {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
}
.caldav-status-row {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}
.caldav-status-label {
    color: #64748b;
    font-size: 0.85rem;
    min-width: 11rem;
}
.caldav-status-value {
    font-weight: 500;
}
.caldav-status-error {
    color: #b91c1c;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    word-break: break-word;
}
.caldav-toggle-field {
    margin-top: 0.5rem;
}
label.caldav-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.caldav-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.caldav-log-card {
    margin-top: 2rem;
}
.caldav-log-card h2 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.caldav-log-table th,
.caldav-log-table td {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

/* ===== Settings page (t-paliad-022) ===== */
.settings-subhead {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.settings-sub-group {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
    border-left: 2px solid var(--color-border);
    padding-left: 0.8rem;
    transition: opacity 0.15s ease;
}
.settings-sub-group .form-field {
    margin-bottom: 0.3rem;
}

/* ===== Notizen (polymorphic notes — Phase I) ===== */
.notiz-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.notiz-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.notiz-form-editing {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgb(var(--hlc-lime-rgb) / 0.15);
}

.notiz-textarea {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg);
    resize: vertical;
    min-height: 3.5rem;
}

.notiz-textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgb(var(--hlc-lime-rgb) / 0.2);
}

.notiz-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.notiz-form-hint {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

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

.notiz-card {
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    position: relative;
}

.notiz-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.notiz-author {
    font-weight: 600;
    color: var(--color-text);
}

.notiz-time {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.notiz-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}

.notiz-action-btn {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}

.notiz-action-btn:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.notiz-action-btn.notiz-action-danger:hover {
    color: #dc2626;
}

.notiz-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.notiz-body a {
    color: var(--color-accent-fg);
    text-decoration: underline;
    word-break: break-all;
}

.notiz-edited {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.notiz-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.frist-notes-section,
.termin-notes-section {
    margin-top: 2rem;
}

.frist-section-heading {
    font-size: 1.1rem;
    margin: 0 0 0.75rem 0;
    color: var(--color-text);
}

/* --- Invitation modal (sidebar) --- */

.invite-modal-body {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

#invite-modal .modal-card {
    max-width: 480px;
}

#invite-modal textarea {
    font-family: var(--font-sans);
    resize: vertical;
    min-height: 5rem;
}

/* --- Global search (t-paliad-026) --------------------------------------- */

.sidebar-search {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    margin-bottom: 0.35rem;
    overflow: hidden;
}

.sidebar-search-icon {
    color: var(--sidebar-text-muted);
    pointer-events: none;
}

.sidebar-search-input {
    flex: 1;
    min-width: 0;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    font-family: var(--font-sans);
    color: var(--sidebar-text);
    background: var(--sidebar-input-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 6px;
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: border-color 150ms ease, opacity 150ms ease;
    margin-right: 0.75rem;
}

.sidebar.expanded .sidebar-search-input,
.sidebar.pinned .sidebar-search-input,
.sidebar.mobile-open .sidebar-search-input,
:root.sidebar-pinned .sidebar .sidebar-search-input {
    opacity: 1;
    pointer-events: auto;
}

.sidebar-search-input:focus {
    border-color: var(--sidebar-text-active);
}

.sidebar-search-input::-webkit-search-cancel-button {
    cursor: pointer;
}

.sidebar-search-kbd {
    position: absolute;
    right: 1.25rem;
    font-family: var(--font-mono, monospace);
    font-size: 0.7rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--sidebar-border);
    border-radius: 3px;
    color: var(--sidebar-text-muted);
    background: var(--sidebar-input-bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}

.sidebar.expanded .sidebar-search-kbd,
.sidebar.pinned .sidebar-search-kbd,
.sidebar.mobile-open .sidebar-search-kbd,
:root.sidebar-pinned .sidebar .sidebar-search-kbd {
    opacity: 1;
}

.sidebar-search-input:focus + .sidebar-search-kbd {
    opacity: 0;
}

/* Results overlay: fixed to viewport, anchored just below the sidebar header
   so it covers the nav items while results are visible. Width matches the
   expanded sidebar on desktop and spills over slightly to fit long titles. */
.search-overlay {
    position: fixed;
    top: 6.75rem;
    left: 0.5rem;
    width: calc(var(--sidebar-width) - 1rem);
    max-width: 420px;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    z-index: 55;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.15));
    padding: 0.35rem 0;
    font-size: 0.88rem;
}

.search-group + .search-group {
    border-top: 1px solid var(--color-border);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}

.search-group-header {
    padding: 0.35rem 0.85rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.search-result {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.85rem;
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease;
    border-left: 3px solid transparent;
}

.search-result:hover,
.search-result.active {
    background: var(--color-overlay-faint);
    border-left-color: var(--color-accent);
}

.search-result-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-icon svg {
    width: 16px;
    height: 16px;
}

.search-result-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.search-result-title {
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result mark {
    background: transparent;
    color: inherit;
    font-weight: 700;
    padding: 0;
}

.search-empty {
    padding: 1rem 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    font-size: 0.85rem;
}

/* Command palette (t-paliad-044) — actions render as buttons styled like
   entity results, footer carries kbd hints. */
.palette-action {
    width: 100%;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    font: inherit;
}

.palette-action:hover,
.palette-action.active {
    background: var(--color-overlay-faint);
    border-left-color: var(--color-accent);
}

.search-group-actions .search-result-icon {
    color: var(--color-accent-fg);
}

.palette-footer {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0.85rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.palette-footer kbd {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--color-text);
    background: var(--color-surface);
    margin-right: 0.25rem;
}

@media (max-width: 480px) {
    .palette-footer {
        display: none;
    }
}

/* Mobile: full-width overlay below the hamburger-triggered drawer. When the
   sidebar is closed on mobile the search input is hidden inside the drawer;
   the overlay is still fixed-positioned so a focus-via-shortcut (no "/" on
   phones, but theoretically) or tap-in-drawer would render correctly. */
@media (max-width: 1023px) {
    .search-overlay {
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        max-width: none;
        top: 6.75rem;
    }

    .sidebar-search-kbd {
        display: none;
    }
}

/* --- Changelog / What's New (t-paliad-027) --- */

.sidebar-changelog {
    position: relative;
}

.sidebar-badge {
    position: absolute;
    top: 0.4rem;
    left: calc(var(--sidebar-collapsed) - 1rem);
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--sidebar-bg);
    pointer-events: none;
    transition: left 150ms ease;
}

.sidebar.expanded .sidebar-badge,
.sidebar.pinned .sidebar-badge,
:root.sidebar-pinned .sidebar .sidebar-badge {
    left: auto;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.changelog-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-width: 44rem;
}

.changelog-entry {
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    padding-bottom: 1.75rem;
}

.changelog-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.changelog-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.changelog-date {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.changelog-tag {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}

.changelog-tag-feature {
    background: rgb(var(--hlc-lime-rgb) / 0.14);
    color: var(--color-accent-fg);
}

.changelog-tag-content {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.changelog-tag-fix {
    background: rgba(180, 83, 9, 0.14);
    color: #92400e;
}

.changelog-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    letter-spacing: -0.01em;
}

.changelog-body {
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
    font-size: 0.92rem;
}

.changelog-empty {
    color: var(--color-text-muted);
    font-style: italic;
    padding: 1.5rem 0;
}

/* ============================================================
 * Agenda — unified timeline across projects
 * ============================================================ */

.agenda-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    align-items: flex-start;
    margin: 1.5rem 0 1.25rem 0;
}

.agenda-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.agenda-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #6b7280);
}

.agenda-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.agenda-chip {
    appearance: none;
    background: var(--color-surface-muted);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.agenda-chip:hover { background: var(--color-overlay-subtle); }
.agenda-chip-active {
    background: var(--color-accent);
    border-color: var(--color-border);
    color: var(--color-accent-dark);
}

.agenda-loading {
    padding: 1rem 0;
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
}

.agenda-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 0.5rem;
}

.agenda-day { }

.agenda-day-heading {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.6rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.agenda-day-relative { color: var(--color-text, #111827); }
.agenda-day-full {
    color: var(--color-text-muted, #6b7280);
    font-weight: 400;
    font-size: 0.95rem;
}

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

.agenda-item-link {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.agenda-item-link:hover {
    background: var(--color-bg-lime-tint);
    border-color: var(--color-border-strong);
}

.agenda-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
}
.agenda-item-icon svg { width: 1.1rem; height: 1.1rem; }

.agenda-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.agenda-item-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    font-size: 0.95rem;
}
.agenda-item-type-label {
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.agenda-item-title {
    font-weight: 600;
    color: var(--color-text, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
}

.agenda-item-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--color-text-muted, #6b7280);
}
.agenda-item-project {
    color: var(--color-text-muted, #6b7280);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.agenda-item-project:hover {
    color: var(--color-text, #111827);
}
.agenda-item-time { font-variant-numeric: tabular-nums; }
.agenda-item-location::before { content: "· "; }

.agenda-item-meta {
    display: flex;
    align-items: center;
}

.agenda-item-urgency {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Urgency colour system — shares the red/amber/green vocabulary with the
 * Fristen page (--frist-red / --frist-amber / --frist-green) so a user who
 * learned the traffic lights there reads the agenda without relearning.
 * Pulls from the shared --status-* tokens so dark mode swap is automatic. */
.agenda-item-overdue  .agenda-item-urgency { background: var(--status-red-bg);   color: var(--status-red-fg); }
.agenda-item-overdue  .agenda-item-icon    { background: var(--status-red-bg);   color: var(--status-red-fg); }
.agenda-item-overdue  .agenda-item-link    { border-left: 3px solid var(--frist-red); }

.agenda-item-today    .agenda-item-urgency { background: var(--status-red-bg);   color: var(--status-red-fg); }
.agenda-item-today    .agenda-item-icon    { background: var(--status-red-bg);   color: var(--status-red-fg); }
.agenda-item-today    .agenda-item-link    { border-left: 3px solid var(--frist-red); }

.agenda-item-tomorrow .agenda-item-urgency { background: var(--status-amber-bg); color: var(--status-amber-fg); }
.agenda-item-tomorrow .agenda-item-icon    { background: var(--status-amber-bg); color: var(--status-amber-fg); }
.agenda-item-tomorrow .agenda-item-link    { border-left: 3px solid var(--frist-amber); }

.agenda-item-this_week .agenda-item-urgency { background: var(--status-amber-bg); color: var(--status-amber-fg-2); }
.agenda-item-this_week .agenda-item-icon    { background: var(--status-amber-bg); color: var(--status-amber-fg-2); }
.agenda-item-this_week .agenda-item-link    { border-left: 3px solid var(--frist-amber); }

.agenda-item-later    .agenda-item-urgency { background: var(--status-green-soft-bg); color: var(--status-green-soft-fg); }
.agenda-item-later    .agenda-item-icon    { background: var(--status-green-soft-bg); color: var(--status-green-soft-fg); }
.agenda-item-later    .agenda-item-link    { border-left: 3px solid var(--frist-green); }

/* ---------------------------------------------------------------------------
 * Team directory (/team) — t-paliad-029
 * Browsable list of all Paliad colleagues, grouped by office or department.
 * --------------------------------------------------------------------------- */

.team-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.team-controls .glossar-search-wrap {
    flex: 1 1 280px;
    min-width: 240px;
}

.team-toggle {
    display: inline-flex;
    gap: 0.5rem;
}

.team-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.team-group {
    margin-bottom: 2rem;
}

.team-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border, #e5e5ed);
}

.team-group-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--color-text, var(--hlc-midnight));
}

.team-group-sub {
    font-size: 0.85rem;
    color: var(--color-text-muted, #64647a);
    margin-top: 0.15rem;
}

.team-dept-lead {
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #64647a);
}

.team-dept-lead strong {
    color: var(--color-text, var(--hlc-midnight));
}

.team-dept-lead a {
    color: var(--color-accent-fg);
    text-decoration: none;
}

.team-dept-lead a:hover {
    text-decoration: underline;
}

.team-group-count {
    flex-shrink: 0;
    background: var(--color-surface-muted);
    color: var(--color-text-muted, #64647a);
    border-radius: 999px;
    padding: 0.15rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 600;
    align-self: center;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}

.team-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border, #e5e5ed);
    border-radius: 12px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.team-card:hover {
    border-color: var(--color-accent, var(--color-accent));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* t-paliad-223 (#53) — selected card highlight. */
.team-card[data-selected="true"] {
    border-color: var(--color-accent, var(--hlc-lime));
    background: var(--color-bg-lime-tint, rgba(198, 244, 28, 0.08));
    box-shadow: 0 0 0 1px var(--color-accent, var(--hlc-lime)) inset;
}

.team-card-select {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding-top: 0.15rem;
}

.team-card-select-input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-accent, var(--hlc-lime));
}

/* Master "select all visible" row, sits above the team list. */
.team-select-master-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    color: var(--color-text-muted, #64647a);
}

.team-select-master-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.team-select-master-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent, var(--hlc-lime));
}

/* Sticky footer that takes over the broadcast action when ≥ 1 row is
   selected. z-index 150 sits above the mobile bottom-nav (100) and well
   below modal overlays (1000+), per t-paliad-223 design §4.5. */
.team-selection-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.8rem 1.25rem;
    background: var(--color-surface, #ffffff);
    border-top: 2px solid var(--color-accent, var(--hlc-lime));
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

.team-selection-count {
    flex: 1;
    font-weight: 600;
    color: var(--color-text, var(--hlc-midnight));
}

/* Reserve a small bottom margin on the main content while the footer is
   visible so the last row of cards doesn't tuck under the bar. */
body.team-has-selection main {
    padding-bottom: 4.5rem;
}

@media (max-width: 600px) {
    .team-selection-footer {
        flex-wrap: wrap;
        padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0));
    }
    .team-selection-count {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

.team-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent-light, var(--color-accent-light));
    color: var(--hlc-midnight);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.team-card-body {
    min-width: 0;
    flex: 1;
}

.team-card-name {
    font-weight: 600;
    color: var(--color-text, var(--hlc-midnight));
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.team-card-role {
    font-size: 0.85rem;
    color: var(--color-text-muted, #64647a);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.team-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    align-items: center;
}

.team-office-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: var(--status-green-soft-bg);
    color: var(--status-green-soft-fg);
    border-radius: 999px;
    font-weight: 500;
}

.team-office-badge svg {
    flex-shrink: 0;
}

.team-office-extra {
    color: var(--color-text-muted, #64647a);
}

.team-dept-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--color-surface-muted);
    color: var(--color-text-muted, #64647a);
    border-radius: 999px;
}

.team-card-email {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--color-accent-fg);
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.team-card-email:hover {
    text-decoration: underline;
}

.team-card-email svg {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    .team-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .team-toggle {
        justify-content: stretch;
    }
    .team-toggle .filter-pill {
        flex: 1 1 0;
        text-align: center;
    }
}

/* --- BottomNav (mobile, <768px) --- */

.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform 200ms ease-out;
}

.bottom-nav-slot {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    height: var(--bottom-nav-height);
    color: var(--color-text-muted);
    text-decoration: none;
    background: none;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.1rem 0.35rem;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-slot.active {
    color: var(--color-accent-fg);
}

.bottom-nav-slot.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: var(--color-accent);
    border-radius: 0 0 2px 2px;
}

.bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bottom-nav-icon svg {
    width: 22px;
    height: 22px;
}

.bottom-nav-label {
    line-height: 1;
    letter-spacing: 0.01em;
}

.bottom-nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
}

.bottom-nav-badge-overdue {
    background: #dc2626;
    animation: bn-pulse 1800ms ease-in-out infinite;
}

@keyframes bn-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--color-surface); }
    50%      { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 5px rgba(220, 38, 38, 0.25); }
}

/* Center [+] slot — visually elevated lime circle */
.bottom-nav-add {
    color: var(--color-text-muted);
}

.bottom-nav-add-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    margin-top: -10px;
    box-shadow: var(--shadow-md);
    transition: background 150ms ease, transform 100ms ease;
}

.bottom-nav-add:active .bottom-nav-add-circle {
    background: var(--color-accent-light);
    transform: scale(0.95);
}

.bottom-nav-add-circle svg {
    width: 22px;
    height: 22px;
}

/* Hide BottomNav when keyboard is open (visualViewport watcher) */
body.keyboard-open .bottom-nav {
    transform: translateY(120%);
}

/* --- Quick-Add slide-up sheet --- */

dialog.quick-add-sheet {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--color-text);
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
}

dialog.quick-add-sheet[open] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

dialog.quick-add-sheet::backdrop {
    background: var(--color-overlay-modal);
}

.quick-add-card {
    width: 100%;
    max-width: 480px;
    background: var(--color-surface);
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-md);
    padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transform: translateY(100%);
    transition: transform 220ms ease-out;
}

.quick-add-sheet.is-open .quick-add-card {
    transform: translateY(0);
}

.quick-add-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border);
    margin: 0.5rem auto 0.75rem;
}

.quick-add-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0.25rem 0.25rem;
}

.quick-add-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.5rem;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms ease;
}

.quick-add-row:hover,
.quick-add-row:active {
    background: var(--color-overlay-faint);
}

.quick-add-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(var(--hlc-lime-rgb) / 0.1);
    color: var(--color-accent-fg);
    flex-shrink: 0;
}

.quick-add-icon svg {
    width: 20px;
    height: 20px;
}

.quick-add-row-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.quick-add-row-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.quick-add-row-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.quick-add-cancel {
    margin-top: 0.5rem;
    padding: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.quick-add-cancel:hover {
    background: var(--color-overlay-faint);
}

/* --- Phone breakpoint (<768px): show BottomNav, hide legacy hamburger --- */

@media (max-width: 767px) {
    .bottom-nav {
        display: flex;
    }

    .sidebar-hamburger {
        display: none !important;
    }

    body.has-sidebar main {
        /* The center FAB pokes ~10px above the bottom-nav (margin-top: -10px on
           .bottom-nav-add-circle), so 1rem gap left content overlapping the
           circle on /dashboard at 375px. 1.75rem gives the FAB a safe gutter. */
        padding-bottom: calc(var(--bottom-nav-height) + 1.75rem + env(safe-area-inset-bottom));
    }
}

/* --- PWA install banner ---------------------------------------------------
   Slides in from the bottom on mobile, pinned bottom-right on desktop.
   Both Chromium beforeinstallprompt and the iOS Safari hint share this UI;
   pwa-install.ts toggles content + behaviour. */

.pwa-install-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(env(safe-area-inset-bottom) + 1rem);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
    animation: pwa-banner-in 220ms ease-out;
}

@media (max-width: 767px) {
    /* Sit above the BottomNav so it never covers it. */
    .pwa-install-banner {
        bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 0.75rem);
    }
}

@media (min-width: 768px) {
    .pwa-install-banner {
        left: auto;
        right: 1.5rem;
        bottom: 1.5rem;
        max-width: 22rem;
    }
}

.pwa-install-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    display: grid;
    place-items: center;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
}

.pwa-install-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pwa-install-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;
}

.pwa-install-sub {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.pwa-install-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -4px;
    margin: 0 0.15rem;
    color: var(--color-accent-fg);
}

.pwa-install-cta {
    flex: 0 0 auto;
    padding: 0.55rem 0.95rem;
    border: none;
    border-radius: 10px;
    background: var(--color-accent);
    color: var(--color-accent-dark);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
}

.pwa-install-cta:hover {
    background: var(--hlc-midnight);
}

.pwa-install-dismiss {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.pwa-install-dismiss:hover {
    background: var(--color-overlay-subtle);
    color: var(--color-text);
}

@keyframes pwa-banner-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
/* =========================================================================
   Admin team-management page (t-paliad-050)
   ========================================================================= */

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

.admin-team-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-team-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-team-table-wrap {
    margin-top: 0.5rem;
}

.admin-team-table {
    font-size: 0.85rem;
}

.admin-team-table tbody tr {
    cursor: default;
}

.admin-team-table tbody tr:hover {
    background: var(--color-bg-lime-tint);
}

.admin-team-loading {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem 1rem;
}

.admin-team-muted {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

.admin-team-actions-cell {
    white-space: nowrap;
    text-align: right;
}

.admin-team-actions-cell .btn-link {
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.82rem;
    padding: 0.2rem 0.5rem;
}

.admin-team-actions-cell .btn-link:hover {
    text-decoration: underline;
}

.admin-team-actions-cell .admin-team-delete {
    color: #b91c1c;
}

.admin-team-edit-row {
    background: var(--color-bg-lime-tint);
}

/* /admin/partner-units member modal — list of (display_name, role-select,
   remove) rows. The role-select is wired to PATCH …/members/{user}/role
   (t-paliad-143). */
.partner-unit-member-list {
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}

.partner-unit-member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
}

.partner-unit-member-item:last-child {
    border-bottom: none;
}

.partner-unit-member-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pu-role-select {
    padding: 0.25rem 0.4rem;
    font-size: 0.82rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.admin-team-input {
    width: 100%;
    padding: 0.3rem 0.45rem;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.admin-team-multi {
    max-width: 220px;
}

.admin-team-multi-opt {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0.1rem 0.4rem 0.1rem 0;
    font-size: 0.78rem;
}

.admin-team-edit-row .btn-primary,
.admin-team-edit-row .btn-cancel {
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
    margin-left: 0.3rem;
}

.sidebar-admin-group .sidebar-group-label {
    color: var(--color-accent-fg);
}

/* --- Admin Event-Types moderation panel (t-paliad-089) ----------------- */
.aet-col-check {
    width: 2.4rem;
    text-align: center;
}

.aet-archived-badge {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-right: 0.4rem;
    border-radius: 999px;
    background: var(--color-surface-muted, #f0f0f0);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: middle;
}

.aet-row-archived td {
    opacity: 0.65;
}

.aet-label-en,
.aet-slug {
    font-size: 0.72rem;
    margin-top: 0.1rem;
}

.aet-merge-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem;
}

.aet-merge-option {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

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

.aet-merge-option input[type="radio"] {
    margin-top: 0.2rem;
}

.aet-merge-option-body {
    flex: 1;
}

.aet-merge-option-label {
    font-weight: 500;
    color: var(--color-text);
}

.aet-merge-option-meta {
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

/* --- Project breadcrumb (t-paliad-049) ---------------------------------
   Pill-style breadcrumbs with type icons, chevron separators and a hover
   lime accent. Horizontal-scroll fallback on narrow screens; the trailing
   current crumb stays bolder/non-link. */
.projekt-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    margin: 0.25rem 0 1rem;
    font-size: 0.82rem;
    line-height: 1.2;
}

.projekt-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    text-decoration: none;
    font-weight: 500;
    max-width: 16rem;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.projekt-crumb-link:hover,
.projekt-crumb-link:focus-visible {
    border-color: var(--color-accent, var(--hlc-lime));
    background: rgb(var(--hlc-lime-rgb) / 0.12);
    color: var(--color-text, var(--hlc-midnight));
    outline: none;
}

.projekt-crumb-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.projekt-crumb-link:hover .projekt-crumb-icon,
.projekt-crumb-link:focus-visible .projekt-crumb-icon {
    color: var(--color-text, var(--hlc-midnight));
}

.projekt-crumb-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.projekt-crumb-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.projekt-crumb-current {
    color: var(--color-text, var(--hlc-midnight));
    font-weight: 700;
    background: var(--color-bg-subtle);
    border-color: #d4d4d8;
}

.projekt-breadcrumb-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    opacity: 0.55;
}

/* Projektbaum tab inside /projects/<id> reuses the /projects tree
   component (client/project-tree.ts) — see initProjectTree(root) in
   client/projects-detail.ts. The earlier inline mini-tree CSS at this
   block was dead code that also accidentally overrode .projekt-tree-title,
   so it was removed when m's "should be the same as the Tree in
   Projects" landed (2026-05-08 21:28). The current-node highlight
   already lives at .projekt-tree-node[aria-current="true"] above. */

@media (max-width: 640px) {
    .projekt-breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }
    .projekt-crumb {
        max-width: 10rem;
        flex-shrink: 0;
    }
}

/* --- Wide modal variant for the project edit form ------------------- */
.modal-card.modal-card-wide {
    max-width: 720px;
    padding: 1.5rem 1.75rem;
}

.modal-card-wide .entity-form {
    margin-top: 0.5rem;
}

/* --- Modal danger zone (t-paliad-236) -------------------------------
   Destructive action separated from the form's Save / Cancel row so a
   rare action (Projekt archivieren) doesn't sit next to the primary CTA.
   Top border + muted padding mark it as a distinct, lower-priority area. */
.modal-danger-zone {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

/* --- Standardised tab toolbar action buttons (t-paliad-049) ----------
   The .party-controls toolbar above each project sub-tab table
   used a mix of <a class="btn-cta-lime btn-small"> and <button>; pin them
   to a single shape so heights, paddings and hover states match across
   tabs. Mehr laden's btn-secondary gets the same compact size. */
.party-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.party-controls .btn-primary,
.party-controls .btn-secondary,
.party-controls .btn-cta-lime,
.party-controls a.btn-primary,
.party-controls a.btn-cta-lime,
.entity-events-loadmore .btn-secondary {
    display: inline-flex;
    align-items: center;
    height: 2.1rem;
    padding: 0 0.95rem;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius);
    line-height: 1;
    text-decoration: none;
}

/* --- Admin landing page (t-paliad-054) ------------------------------
   /admin index reuses the standard .grid + .card pattern from the
   public landing page. The "Geplant" section uses .admin-card-soon
   to dim placeholder cards and add a "Kommt bald" badge so they
   read as a roadmap rather than broken links. */
.admin-section-planned {
    margin-top: 2.5rem;
}

.admin-card-soon {
    position: relative;
    opacity: 0.6;
    cursor: default;
}

.admin-card-soon:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

.admin-soon-badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

/* Admin audit log (t-paliad-071) */

.admin-audit-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-audit-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}

.admin-audit-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-audit-field label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-audit-input {
    padding: 0.4rem 0.55rem;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
}

.admin-audit-search-field {
    flex: 1 1 16rem;
}

.admin-audit-search-field .admin-audit-input {
    width: 100%;
}

.admin-audit-counter-field {
    margin-left: auto;
    align-self: flex-end;
}

.admin-audit-counter {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.admin-audit-custom-range {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.admin-audit-custom-range label {
    margin-bottom: 0;
}

.admin-audit-table-wrap {
    margin-top: 0.5rem;
}

.admin-audit-table {
    font-size: 0.85rem;
}

.admin-audit-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.admin-audit-event {
    font-size: 0.78rem;
    background: var(--color-surface-muted);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius);
}

.admin-audit-desc {
    color: var(--color-text-muted);
}

.admin-audit-loading {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem 1rem;
}

.admin-audit-source {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.admin-audit-source-project {
    background: var(--status-blue-soft-bg);
    border-color: var(--status-blue-soft-bg);
    color: var(--status-blue-soft-fg);
}

.admin-audit-source-caldav {
    background: var(--status-blue-bg);
    border-color: var(--status-blue-bg);
    color: var(--status-blue-fg);
}

.admin-audit-source-reminder {
    background: var(--status-amber-bg);
    border-color: var(--status-amber-border);
    color: var(--status-amber-fg);
}

.admin-audit-pagination {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

@media (max-width: 720px) {
    .admin-audit-control-row {
        flex-direction: column;
        align-items: stretch;
    }
    .admin-audit-counter-field {
        margin-left: 0;
    }
    .admin-audit-custom-range {
        flex-wrap: wrap;
    }
}

/* /admin/email-templates — list + editor (t-paliad-072) */

.admin-et-loading {
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

.admin-et-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-et-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-et-card-header h2 {
    margin: 0;
    font-size: 1.1rem;
}

.admin-et-card-key {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    padding: 2px 6px;
    border-radius: 4px;
}

.admin-et-card-langs {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
}

.admin-et-card-lang-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    text-decoration: none;
    color: inherit;
    transition: border-color 120ms, background 120ms;
}

.admin-et-card-lang-btn:hover {
    border-color: var(--hlc-lime, #BFF355);
    background: var(--color-surface-muted);
}

.admin-et-card-lang-flag {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

.admin-et-card-lang-status {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* Editor layout */

.admin-et-edit-container {
    max-width: 1400px;
}

.admin-et-back {
    display: inline-block;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.admin-et-back:hover {
    color: var(--color-text);
    text-decoration: underline;
}

.admin-et-lang-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.admin-et-lang-btn {
    padding: 0.4rem 0.9rem;
    border: 0;
    background: var(--color-bg);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-muted);
}

.admin-et-lang-btn[aria-pressed="true"],
.admin-et-lang-btn.active {
    background: var(--hlc-lime, #BFF355);
    color: #1c1917;
}

.admin-et-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.admin-et-editor-form,
.admin-et-editor-preview {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-et-subject-input,
.admin-et-note-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 0.95rem;
    box-sizing: border-box;
}

.admin-et-body-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    box-sizing: border-box;
    resize: vertical;
    min-height: 320px;
}

.admin-et-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-et-variables {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem;
}

.admin-et-variables summary {
    cursor: pointer;
    font-weight: 600;
}

.admin-et-variables-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.85rem;
}

.admin-et-variable-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-et-variable-name {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: #1c1917;
}

.admin-et-variable-type {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    padding: 1px 6px;
    border-radius: 3px;
}

.admin-et-variable-desc {
    color: var(--color-text);
}

.admin-et-variable-sample {
    color: var(--color-text-muted);
    font-style: italic;
    margin-left: auto;
    text-align: right;
}

.admin-et-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-et-preview-header h2 {
    margin: 0;
    font-size: 1rem;
}

.admin-et-preview-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-et-slot-select {
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-size: 0.85rem;
}

.admin-et-preview-subject {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-muted);
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-word;
}

.admin-et-preview-frame {
    width: 100%;
    height: 600px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-2);
}

.admin-et-versions {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem;
}

.admin-et-versions summary {
    cursor: pointer;
    font-weight: 600;
}

.admin-et-versions-list {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-et-version-row {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
}

.admin-et-version-row:hover {
    background: var(--color-surface-muted);
}

.admin-et-version-date {
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.admin-et-version-note {
    color: var(--color-text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-et-version-empty {
    color: var(--color-text-muted);
    font-style: italic;
}

@media (max-width: 1024px) {
    .admin-et-editor {
        grid-template-columns: 1fr;
    }
    .admin-et-preview-frame {
        height: 480px;
    }
}

/* ===================================================================
   Dark mode — class-level overrides for sites that still hold their
   own hardcoded colours (status pills, dashboard cards, agenda urgency,
   termin types). The bulk of the swap is handled by the token redef
   at :root[data-theme="dark"] earlier in this file; this block targets
   the long-tail of class-scoped colour pairs that are too local to
   warrant a full token. Keeping them in one section makes the dark-
   mode palette greppable when tweaking contrast.
   =================================================================== */
:root[data-theme="dark"] {
    /* Surface elevations — tables/alt-rows/code-blocks read flat against
       the body background otherwise. */
}

/* Soft amber surfaces (warning callouts, entity-unavailable, etc) */
:root[data-theme="dark"] .entity-unavailable {
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
}

/* Dashboard cards + urgency chips read --status-* tokens directly now
   (see .dashboard-card-*, .dashboard-urgency-* rules above). The dark
   swap is automatic via the token redef. */

/* Dashboard termin dots */
:root[data-theme="dark"] .dashboard-termin-hearing          { background: var(--status-red-fg); }
:root[data-theme="dark"] .dashboard-termin-meeting          { background: var(--status-blue-fg-2); }
:root[data-theme="dark"] .dashboard-termin-deadline_hearing { background: var(--status-amber-fg-2); }

/* Termin type colour-codes (card border-left + dot) */
:root[data-theme="dark"] .termin-type-hearing          { background: var(--status-red-fg);    color: var(--status-red-fg); }
:root[data-theme="dark"] .termin-type-meeting          { background: var(--status-blue-fg-2); color: var(--status-blue-fg-2); }
:root[data-theme="dark"] .termin-type-deadline_hearing { background: var(--status-amber-fg-2); color: var(--status-amber-fg-2); }
:root[data-theme="dark"] .termin-type-default          { background: var(--status-neutral-fg-2); color: var(--status-neutral-fg-2); }

/* Termin pill badges */
:root[data-theme="dark"] .termin-type-badge.termin-type-hearing          { background: var(--status-red-bg);   color: var(--status-red-fg); }
:root[data-theme="dark"] .termin-type-badge.termin-type-meeting          { background: var(--status-blue-bg);  color: var(--status-blue-fg-2); }
:root[data-theme="dark"] .termin-type-badge.termin-type-deadline_hearing { background: var(--status-amber-bg); color: var(--status-amber-fg); }

/* Termin pill chips (Termin-Typ column on /events). Without this block the
   chip would inherit the bare .termin-type-XYZ rule above, which paints
   text the same colour as the swatch background → invisible. */
:root[data-theme="dark"] .termin-type-chip.termin-type-hearing          { background: var(--status-red-bg);   color: var(--status-red-fg); }
:root[data-theme="dark"] .termin-type-chip.termin-type-meeting          { background: var(--status-blue-bg);  color: var(--status-blue-fg-2); }
:root[data-theme="dark"] .termin-type-chip.termin-type-consultation     { background: rgb(var(--hlc-lime-rgb) / 0.18); color: var(--hlc-lime); }
:root[data-theme="dark"] .termin-type-chip.termin-type-deadline_hearing { background: var(--status-amber-bg); color: var(--status-amber-fg); }

/* Termin card border-left colour cues */
:root[data-theme="dark"] .termin-card-today  { border-left-color: var(--status-amber-fg-2); color: var(--status-amber-fg-2); }
:root[data-theme="dark"] .termin-card-week   { border-left-color: var(--status-blue-fg-2);  color: var(--status-blue-fg-2); }
:root[data-theme="dark"] .termin-card-later  { border-left-color: var(--status-neutral-fg-2); color: var(--status-neutral-fg-2); }
:root[data-theme="dark"] .termin-card-today  .frist-summary-dot { background: var(--status-amber-fg-2); }
:root[data-theme="dark"] .termin-card-week   .frist-summary-dot { background: var(--status-blue-fg-2); }
:root[data-theme="dark"] .termin-card-later  .frist-summary-dot { background: var(--status-neutral-fg-2); }

/* Frist due-date chips, entity-status chips, agenda urgency markers all
   read --status-*-{bg,fg} tokens directly now (see .frist-due-chip,
   .entity-status-chip, .agenda-item-* rules above). The dark-mode swap
   happens automatically via the token redef at :root[data-theme="dark"]
   — no per-class override needed here. */

/* Tab-style selection borders (gebuehren-tab, entity-tab, etc.) read on
   the lime accent in both themes — no override needed. */

/* Code blocks / soft alt-row backgrounds — these specific Tailwind-grey
   shades land too washed-out on midnight; pin them to surface-2 instead. */
:root[data-theme="dark"] .entity-table thead th,
:root[data-theme="dark"] .gebuehren-table th {
    background: var(--color-bg-subtle);
}

/* Project breadcrumb pill (was background: #eef2ff; color: #4338ca;) */
:root[data-theme="dark"] .projekt-breadcrumb-pill,
:root[data-theme="dark"] .projekt-tree-pill {
    background: var(--status-blue-soft-bg);
    color: var(--status-blue-soft-fg);
}

/* Generic .frist-card hover/alt rows — neutralize the rgba(0,0,0,...)
   stripes and dividers so the dark surface doesn't get a black wash. */
:root[data-theme="dark"] .frist-card:hover,
:root[data-theme="dark"] .entity-table tbody tr:hover {
    background: var(--color-bg-lime-tint);
}

/* t-paliad-099: readonly opt-out also wins in dark mode. The generic
   dark-theme hover rule above outranks the .entity-table--readonly base
   rule on specificity, so re-state the override here scoped to dark. */
:root[data-theme="dark"] .entity-table--readonly tbody tr:hover {
    background: transparent;
}

/* Sidebar scrollbar tinting is handled via --sidebar-scrollbar-thumb /
   -hover (see :root + dark block at top), so it tracks the sidebar
   surface in either theme. On the body in dark mode the browser-default
   scrollbar is dark via color-scheme, so no per-element override is
   needed here. */

/* ============================================================================
   t-paliad-088 — Event Types: picker, multi-select filter, add modal
   ============================================================================ */

/* (t-paliad-258 — the .event-type-collapsed* "vorgegeben durch Regel"
   collapsed view from t-paliad-165 was retired with the catalog
   dropdown. The Auto/Custom rule editor took its place; styles for
   that live under .rule-mode-auto / .rule-mode-custom above.) */

/* Picker host — chip cluster + search + suggest dropdown */
.event-type-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.5rem;
    background: var(--color-bg-subtle);
}

.event-type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.event-type-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.35rem 0.15rem 0.55rem;
    background: var(--color-bg-lime-tint);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.875rem;
    line-height: 1.2;
}
.event-type-chip-label { white-space: nowrap; }
.event-type-chip-remove {
    background: transparent;
    border: 0;
    padding: 0 0.25rem;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--color-text-muted);
}
.event-type-chip-remove:hover { color: var(--color-text); }

.event-type-search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.event-type-search-row .event-type-search { min-width: 8rem; }
.event-type-search {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: var(--color-bg);
    font-size: 0.875rem;
}
.event-type-add-btn,
.event-type-browse-btn {
    padding: 0.4rem 0.75rem;
    border: 1px dashed var(--color-border);
    border-radius: 0.375rem;
    background: transparent;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text);
    white-space: nowrap;
}
.event-type-add-btn:hover,
.event-type-browse-btn:hover { background: var(--color-bg-subtle); }
.event-type-browse-btn { border-style: solid; }

.event-type-suggest {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: var(--color-bg);
    max-height: 14rem;
    overflow-y: auto;
}
.event-type-suggest-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    text-align: left;
    font-size: 0.875rem;
    color: var(--color-text);
}
.event-type-suggest-row:last-child { border-bottom: 0; }
.event-type-suggest-row:hover { background: var(--color-bg-lime-tint); }
.event-type-suggest-cat {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-left: 0.5rem;
}
.event-type-suggest-empty {
    padding: 0.5rem 0.6rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Multi-select filter — trigger button + popover panel.
   The .multi-anchor wraps trigger+panel so the absolutely-positioned panel
   lands directly under the trigger button (t-paliad-117). */
.multi-anchor {
    position: relative;
    display: inline-flex;
}
.multi-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
    min-width: 12rem;
}
.multi-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.multi-chevron {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.multi-panel {
    position: absolute;
    z-index: 50;
    margin-top: 0.25rem;
    width: 22rem;
    max-width: calc(100vw - 1rem);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 28rem;
}
/* Scoped anchor: pin the panel under its trigger only when wrapped in
   .multi-anchor. Agenda's multi-select renders the panel as a sibling
   inside a column flex group and relies on auto-positioning, so leave
   that path alone. */
.multi-anchor > .multi-panel {
    top: 100%;
    left: 0;
}
.multi-panel[hidden] { display: none; }
.multi-search-row { display: flex; }
.multi-search {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background: var(--color-bg-subtle);
    font-size: 0.875rem;
}
.multi-specials {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border);
}
.multi-list {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 4rem;
    min-width: 0;
}
.multi-group { padding: 0.25rem 0; }
.multi-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.4rem;
}
.multi-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.multi-option:hover { background: var(--color-bg-lime-tint); }
.multi-option input[type="checkbox"] { margin: 0; }
.multi-special { font-weight: 500; }
.multi-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
}

/* Typ pill in the deadlines table — compact, neutral. */
.entity-event-type-pill {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    margin-right: 0.2rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--color-text);
    white-space: nowrap;
}

/* Hide-on-uniform: when no row has any event_type, hide the column. */
.entity-table--hide-event-type .entity-col-event-type { display: none; }

/* t-paliad-110 — column hiders for the unified EventsPage. The shared
   table renders the union of deadline + appointment columns; each
   `events-table--hide-*` modifier collapses one column when no visible
   row supplies the matching field, mirroring the t-073 pattern. */
.events-table--hide-row-type        .events-col-row-type        { display: none; }
.events-table--hide-rule            .events-col-rule            { display: none; }
.events-table--hide-location        .events-col-location        { display: none; }
.events-table--hide-appointment-type .events-col-appointment-type { display: none; }

/* Type chip rendered in the leftmost data column when the table mixes
   deadlines + appointments — at-a-glance type signal that survives
   monochrome printing. */
.events-row-type-chip {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.events-row-type-frist  { color: var(--bucket-today);     border-color: var(--bucket-today); }
.events-row-type-termin { color: var(--bucket-next-week); border-color: var(--bucket-next-week); }

/* Type chip toggle row (Fristen / Termine / Beides) above the bucket
   cards — reuses the agenda-chip visuals so users get muscle-memory
   parity with /agenda. */
.event-type-chip-row {
    margin: 0;
}

/* View ⊥ filter (t-paliad-115). The type-chip row is the FILTER axis;
   the view selector is the VIEW axis (cards / list / calendar). The two
   live side-by-side in `events-axis-row` so users can scan them as
   independent controls. On narrow viewports they stack and the view
   selector wraps below the chips. */
.events-axis-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0 1rem;
}

.events-view-selector {
    display: inline-flex;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 2px;
    gap: 0;
}

.events-view-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.events-view-btn:hover {
    color: var(--color-text);
}

.events-view-btn-active {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Calendar host — mountCalendar() (t-paliad-224) builds the toolbar +
   grid into this wrapper when the user picks the Kalender chip. All
   internal styling lives in .views-calendar-* (search for that prefix). */
.events-calendar-wrap {
    margin: 0.25rem 0 1rem;
}

/* Add-modal styling — extends the existing .modal-overlay/.modal pattern. */
.event-type-add-modal {
    width: 28rem;
    max-width: calc(100vw - 2rem);
}
.event-type-add-modal .form-field-row { display: flex; gap: 0.75rem; }
.event-type-add-modal .form-field-row > .form-field { flex: 1; }
.event-type-suggest-warn {
    padding: 0.5rem 0.6rem;
    background: var(--status-amber-soft-bg);
    color: var(--status-amber-soft-fg);
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.event-type-suggest-pill {
    display: inline-block;
    margin: 0 0.2rem;
    padding: 0.05rem 0.4rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.75rem;
}

/* Generic .modal surface — shared by the event-type add and browse modals.
   Both render as `<div class="modal …">` inside a `.modal-overlay`; the
   modifier class layers width/layout overrides on top. Mirrors `.modal-card`
   so the surface reads consistently with the rest of the app. */
.modal {
    background: var(--color-surface);
    border-radius: calc(var(--radius) * 1.5);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Browse-all modal (t-paliad-107) — companion to the picker's
   search-as-you-type. Fixed header (title + sticky search), scrollable
   category-grouped list, footer actions. */
.event-type-browse-modal {
    width: 36rem;
    max-width: calc(100vw - 2rem);
    max-height: min(80vh, 40rem);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
.event-type-browse-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
}
.event-type-browse-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}
.event-type-browse-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-input-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease;
}
.event-type-browse-search:focus { border-color: var(--color-accent); }
/* t-paliad-251 — jurisdiction filter chips inside the browse modal
   header. Sits below the search input, between the search and the
   results list. Active chip uses the lime-tint chip palette. */
.event-type-browse-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.event-type-browse-chip {
    padding: 0.2rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.event-type-browse-chip:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}
.event-type-browse-chip--active {
    background: var(--color-bg-lime-tint);
    border-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}
.event-type-browse-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.5rem 0;
}
.event-type-browse-group { padding: 0.5rem 0; }
.event-type-browse-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.25rem 1.5rem;
    margin: 0;
}
.event-type-browse-options {
    list-style: none;
    margin: 0;
    padding: 0;
}
.event-type-browse-options li { margin: 0; }
.event-type-browse-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-text);
}
.event-type-browse-option:hover { background: var(--color-bg-lime-tint); }
.event-type-browse-option:focus-within { background: var(--color-bg-lime-tint); }
.event-type-browse-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.event-type-browse-option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-type-browse-jurisdiction {
    flex-shrink: 0;
    padding: 0.05rem 0.5rem;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.event-type-browse-empty {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.event-type-browse-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    flex-shrink: 0;
}
.event-type-browse-count {
    flex: 1;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* Mobile: filter row already wraps; the multi-panel becomes a bottom-anchored
   sheet on narrow viewports. The browse modal does the same so it
   doesn't scroll-clip on small screens. */
@media (max-width: 640px) {
    .multi-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 0.75rem 0.75rem 0 0;
        margin: 0;
    }
    .event-type-browse-modal {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 0.75rem 0.75rem 0 0;
        align-self: flex-end;
    }
}

/* ============================================================================
   t-paliad-135 — Universal print stylesheet
   Print only the result content. Hides site chrome (sidebar / top header /
   bottom-nav / footer / modals / breadcrumbs), all forms, filter rows,
   search bars, the Fristenrechner pathway fork + decision tree + view toggle,
   and every <button>. Result panels (timeline, columns view, cost breakdown,
   gericht cards, entity tables, glossar entries, checklist items) print as-is.
   Per-page print rules above this block handle their specific tweaks; this
   block is the catch-all for chrome that those rules miss.

   Orientation strategy (t-paliad-233):
     - Default `@page` is A4 portrait. The CSS `@page` rule is *global*
       even when nested inside `@media print` — so prior to t-paliad-233
       a stray `@page { size: A4 landscape }` in the smart-timeline-chart
       block was leaking landscape onto every printed surface.
     - Surfaces that genuinely need width opt into the named
       `paliad-landscape` page via a `page: paliad-landscape` declaration
       on a per-page body class. Wired below: Kostenrechner, projects
       chart, Custom Views calendar / timeline, /events Kalender,
       Verfahrensablauf timeline view.
   ============================================================================ */
@page {
    size: A4 portrait;
    margin: 1.5cm 1.2cm;
}

@page paliad-landscape {
    size: A4 landscape;
    margin: 1.5cm;
}

@media print {
    body.page-kostenrechner,
    body.page-projects-chart,
    body.events-view-calendar,
    body.views-shape-active-calendar,
    body.views-shape-active-timeline,
    body.verfahrensablauf-view-timeline {
        page: paliad-landscape;
    }

    .header,
    .footer,
    .sidebar,
    .sidebar-hamburger,
    .sidebar-overlay,
    .bottom-nav,
    .modal-overlay,
    .modal,
    .quick-add-sheet,
    .projekt-breadcrumb,
    .nav-lang,
    .tool-input,
    .filter-row,
    .entity-controls,
    .gerichte-controls,
    .checklist-filters,
    .gebuehren-lookup,
    .gebuehren-tabs,
    .gebuehren-versions,
    .glossar-search-wrap,
    .entity-search-wrap,
    .team-filter-row,
    .admin-team-filter-row,
    .fristen-pathway-fork,
    .fristen-pathway-back,
    .fristen-row-stack-header,
    .fristen-row-stack,
    .fristen-search,
    .fristen-search-chips,
    .fristen-view-toggle,
    .fristen-result-actions,
    .fristen-header-actions,
    .event-picker-row,
    .date-input-group,
    .wizard-step-hint,
    .fab,
    .fab-button,
    .edit-mode-handle,
    .paliadin-widget,
    [data-print-hide],
    #step-1,
    #step-2,
    #event-step-1,
    #event-step-2,
    button {
        display: none !important;
    }

    .has-sidebar,
    body.has-sidebar,
    body.has-sidebar.sidebar-pinned,
    :root.sidebar-pinned .has-sidebar {
        padding-left: 0 !important;
    }

    main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Re-expose page heading + subtitle on pages that don't ship a dedicated
       .print-header (Kostenrechner has one and hides .tool-header in its
       page-specific block above; everywhere else the .tool-header h1/p
       identifies the print). */
    body:not(:has(.print-header)) .tool-header {
        display: block !important;
    }

    .print-header,
    .print-footer {
        display: block !important;
    }

    .tool-results,
    .sidebar,
    .bottom-nav {
        position: static !important;
    }

    .timeline,
    .timeline-item,
    .fr-columns-view,
    .gericht-card,
    .entity-table,
    .result-card,
    .checklist-group {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Tables: repeat headers on each printed page, keep rows intact. */
    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    tr,
    th,
    td {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    /* Orphans / widows defensive defaults. */
    p, h1, h2, h3, h4, h5, h6, li {
        orphans: 3;
        widows: 3;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        break-after: avoid;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    /* Brand-coloured headers and status pills keep their fill in print
       instead of losing background colour to the default print bleach. */
    .print-header,
    .checklist-regime,
    .gebuehren-table th,
    .entity-status-pill,
    .fr-col-header,
    [data-print-color="exact"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* External hyperlinks: print the URL after the link text so the
       printed page remains traceable. Skip same-page fragment anchors
       and javascript: pseudo-links; skip links whose text already *is*
       the URL (avoids duplicates like "https://… (https://…)"). */
    a[href^="http"]:not([href*="#"])::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
        word-break: break-all;
    }

    a[href^="http"][data-print-url="hide"]::after {
        content: none;
    }
}

/* ============================================================================
 * Approval workflow (t-paliad-138).
 * ========================================================================== */

.inbox-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inbox-row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inbox-row-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-row-title {
    font-weight: 600;
    color: var(--fg);
    font-size: 15px;
}

.inbox-row-meta {
    font-size: 13px;
    color: var(--fg-muted);
}

.inbox-row-diff {
    background: var(--bg-soft);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inbox-row-diff-line {
    display: flex;
    gap: 8px;
}

.inbox-row-diff-key {
    font-weight: 600;
    color: var(--fg-muted);
    min-width: 110px;
}

.inbox-row-diff-values {
    color: var(--fg);
    font-family: var(--font-mono, ui-monospace, monospace);
}

.inbox-row-note {
    font-size: 13px;
    color: var(--fg-muted);
    font-style: italic;
}

.inbox-row-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
}

.inbox-row-action {
    padding: 6px 14px;
    font-size: 13px;
}

/* Greyed-out variant for actions the current viewer can't grant —
 * approve/reject without authority, revoke when not the requester
 * (t-paliad-202). Click is suppressed by the disabled attribute; the
 * tooltip on `title` explains why. The neutral background/colour pair
 * overrides .btn-primary/.btn-danger/.btn-secondary so all three
 * variants look the same when disabled. */
.inbox-row-action:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    background: var(--color-surface-2);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}
.inbox-row-action:disabled:hover {
    background: var(--color-surface-2);
    border-color: var(--color-border);
}

.inbox-row-decided {
    color: var(--fg-muted);
    font-size: 12px;
    margin-left: 4px;
}

/* Pending-approval pill — shown on every entity surface where a row is
 * approval_status='pending'. Soft amber background, ⚠ leader. */
.approval-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(146, 64, 14, 0.12);
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.approval-pill::before { content: "⚠"; }

/* Icon-only variant — 👀 glyph signals "preliminary, awaiting approval"
 * without consuming row width. Hover (title attr) reveals the full
 * lifecycle label. m's 2026-05-08 ask: smaller pill, two-eye glyph,
 * tooltip. */
.approval-pill--icon {
    width: auto;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    cursor: help;
}
.approval-pill--icon::before { content: ""; }

/* Agent-drafted variant — sparkle ✨ glyph signals "Paliadin suggested
 * this row" (t-paliad-161). Renders alongside (not in place of) the
 * eye-pill 👀: the two questions ("needs approval?" / "drafted by an
 * agent?") are orthogonal axes, so the visual taxonomy stays
 * decomposable for any future autopilot mode where 👀 disappears but
 * ✨ stays.
 */
.approval-pill--agent {
    width: auto;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    cursor: help;
    background: var(--color-bg-lime-tint, var(--color-surface-2));
    color: var(--color-text);
}
.approval-pill--agent::before { content: ""; }

.approval-pill--historic {
    background: var(--bg-soft);
    color: var(--fg-muted);
}
.approval-pill--historic::before { content: ""; }

[data-theme="dark"] .approval-pill {
    background: rgba(252, 211, 77, 0.18);
    color: #fcd34d;
}

/* Pending-state row modifiers — soft tint per lifecycle so an approver can
 * scan a list of pending entities at a glance. Write-then-approve means
 * the row is "live" already; the tint is the only visual flag. */
.entity-row--pending-create {
    background: rgba(146, 64, 14, 0.05);
}
.entity-row--pending-update {
    background: rgba(146, 64, 14, 0.04);
}
.entity-row--pending-complete {
    background: rgba(34, 197, 94, 0.05);
}
.entity-row--pending-delete {
    background: rgba(220, 38, 38, 0.05);
    text-decoration: line-through;
    text-decoration-color: rgba(220, 38, 38, 0.4);
    text-decoration-thickness: 1px;
}

/* Sidebar inbox badge — orange when something needs the user's
 * attention; matches the changelog-badge shape but distinct color. */
#sidebar-inbox-badge {
    background: #92400e;
    color: #fff;
}
[data-theme="dark"] #sidebar-inbox-badge {
    background: #fcd34d;
    color: #0a0a0a;
}

/* Approval policies authoring table on /projects/{id}/settings/approvals. */
.approval-policies-table th,
.approval-policies-table td {
    padding: 10px 12px;
    text-align: left;
}
.approval-policies-table .entity-select {
    min-width: 180px;
}



/* ============================================================================
 * t-paliad-144 Phase A2 — Custom Views shell + Meine Sichten sidebar group
 *                        + render-shape components (list / cards / calendar).
 * ============================================================================ */

/* Sidebar — Meine Sichten group. Mirrors .sidebar-admin-group spacing. */
.sidebar-views-group .sidebar-views-items {
    display: flex;
    flex-direction: column;
}
.sidebar-views-group .sidebar-views-new {
    color: var(--color-text-muted);
    font-style: italic;
}
.sidebar-views-group .sidebar-user-view-item {
    /* Inherits .sidebar-item; nothing override-worthy yet. */
}
.sidebar-user-view-badge {
    /* Reuses .sidebar-badge styles; this keeps the selector available
       for future tweaks. */
}

/* Views shell page — toolbar + states. */
.views-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}
.views-toolbar-spacer {
    flex: 1 1 auto;
}
.views-loading,
.views-error,
.views-empty,
.views-onboarding {
    margin: 24px 0;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-muted);
    color: var(--color-text);
}
.views-onboarding-actions {
    margin-top: 12px;
}
.views-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--color-bg-lime-tint);
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    color: var(--color-text);
}
.views-toast[hidden] {
    display: none;
}
.views-toast-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: inherit;
}
.views-shape-host {
    margin-top: 16px;
}

/* Header actions — edit / delete buttons. */
.views-header-actions {
    display: flex;
    gap: 8px;
}

/* shape=list (compact density). */
.views-list--compact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.views-list-row {
    display: grid;
    grid-template-columns: 90px 110px 1fr auto auto;
    gap: 12px;
    align-items: baseline;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    font-size: 14px;
    color: var(--color-text);
}
.views-list-row:hover {
    background: var(--color-bg-subtle);
}
.views-list-time {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.views-list-kind {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.views-list-title {
    font-weight: 500;
}
.views-list-project,
.views-list-actor {
    font-size: 13px;
    color: var(--color-text-muted);
}
.views-list-subtitle {
    grid-column: 3 / -1;
    color: var(--color-text-muted);
    font-size: 13px;
}

/* shape=cards. */
.views-cards-day {
    margin-top: 24px;
}
.views-cards-day-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 8px 0;
}
.views-cards-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* On narrow viewports (mobile portrait, ~320-360px), the 280px floor
       would force each card past the screen width and produce horizontal
       scroll. min(280px, 100%) collapses the floor to the available width
       so the card spans full-width on mobile and only goes back to the
       280px-min, auto-fill, 1fr layout once there's room (m, 2026-05-08). */
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
}
.views-card {
    padding: 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}
.views-card-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.views-card-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.views-card-title {
    font-size: 16px;
    margin: 0;
}
.views-card-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.views-card-meta > * + *::before {
    content: "·";
    margin-right: 8px;
    color: var(--color-text-muted);
}
.views-card-subtitle {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: var(--color-text-muted);
}

/* shape=calendar. month / week / day views share .views-calendar wrapper;
   the variant class .views-calendar--<view> drives any per-view tweaks. */
.views-calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.views-calendar-view-switcher {
    display: inline-flex;
    gap: 4px;
}
.views-calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.views-calendar-nav-btn {
    min-width: 32px;
    padding: 4px 8px;
}
.views-calendar-nav-label {
    font-weight: 600;
    min-width: 12ch;
    text-align: center;
}
.views-calendar-back-to-month {
    background: transparent;
    border: none;
    color: var(--color-link, var(--color-accent));
    cursor: pointer;
    padding: 4px 8px;
    font-size: 13px;
    text-decoration: underline;
}
.views-calendar-back-to-month:hover {
    color: var(--color-link-hover, var(--color-accent));
}

.views-calendar-month-label {
    font-size: 18px;
    margin: 0 0 12px 0;
}

/* Month view — one grid contains both the weekday header row and the day
   cells, so they share the same column template (no drift). */
.views-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.views-calendar-weekday {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: 4px;
    text-align: center;
}
.views-calendar-cell {
    min-height: 80px;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.views-calendar-cell--out {
    background: transparent;
    border: 1px dashed var(--color-border);
}
.views-calendar-cell--today {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}
.views-calendar-cell-day {
    font-size: 12px;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    align-self: flex-start;
    font-weight: 600;
}
.views-calendar-cell-day:hover,
.views-calendar-cell-day:focus-visible {
    color: var(--color-text);
    text-decoration: underline;
}
.views-calendar-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.views-calendar-pill {
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
    background: var(--color-surface-muted);
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-decoration: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
.views-calendar-pill:hover {
    background: var(--color-surface-hover, var(--color-surface-muted));
}
.views-calendar-pill--more {
    color: var(--color-text-muted);
    text-align: center;
    background: transparent;
}

/* Week view — 7 columns, scrollable per column when overflowing. */
.views-calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.views-calendar-week-column {
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    max-height: 70vh;
    overflow: hidden;
}
.views-calendar-week-column--today {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}
.views-calendar-week-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: 12px;
}
.views-calendar-week-dow {
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
}
.views-calendar-week-dnum {
    font-weight: 600;
    color: var(--color-text);
}
.views-calendar-week-list {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.views-calendar-week-empty {
    margin: 0;
    padding: 12px 8px;
    color: var(--color-text-muted);
    font-size: 12px;
    text-align: center;
}

/* Day view — single chronological list. */
.views-calendar-day-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.views-calendar-day-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.views-calendar-day-empty {
    margin: 0;
    padding: 16px;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

/* Row anchors used by both week and day views. */
.views-calendar-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
}
.views-calendar-row:hover {
    background: var(--color-surface-hover, var(--color-surface-muted));
}
.views-calendar-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex: 0 0 8px;
    background: var(--color-text-muted);
}
.views-calendar-row-dot--deadline      { background: var(--color-accent); }
.views-calendar-row-dot--appointment   { background: #3b82f6; }
.views-calendar-row-dot--project_event { background: #a855f7; }
.views-calendar-row-dot--approval_request { background: #f59e0b; }
.views-calendar-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.views-calendar-row-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.views-calendar-row-meta {
    font-size: 12px;
    color: var(--color-text-muted);
}
.views-calendar-row--week .views-calendar-row-title {
    white-space: normal;
}

.views-calendar-mobile-notice {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* === Bulk team-email broadcast (t-paliad-147) === */

/* Project multi-select filter on /team. */
.team-filter-row-project {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-bottom: 8px;
}
.team-project-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.team-project-summary {
    font-weight: 500;
}
.team-project-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 280px;
    max-width: 420px;
    max-height: 360px;
    overflow-y: auto;
    margin-top: 4px;
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.team-project-panel.hidden {
    display: none;
}
.team-project-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}
.team-project-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.team-project-options .filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.team-project-options .filter-checkbox:hover {
    background: var(--color-bg-muted);
}
.team-broadcast-wrap {
    margin: 12px 0 0 0;
}
.team-broadcast-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* Broadcast compose modal body styling. The shell (width, modal-body
   padding, base form-field rules) is owned by the unified modal
   primitive — these rules below cover only the broadcast-specific
   content. Textarea gets a code-monospace face so the placeholder
   syntax reads correctly. (Migrated onto openModal in t-paliad-217.) */
.broadcast-body [data-broadcast-body] {
    resize: vertical;
    min-height: 200px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
}
.broadcast-recipient-summary {
    padding: 10px 12px;
    background: var(--color-bg-muted);
    border-radius: 4px;
    font-size: 13px;
}
.broadcast-recipient-preview {
    margin-top: 4px;
    color: var(--color-text-muted);
}
.broadcast-recipient-list {
    margin-top: 8px;
    max-height: 200px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 8px 12px;
}
.broadcast-recipient-list.hidden {
    display: none;
}
.broadcast-recipient-list ul {
    margin: 0;
    padding-left: 18px;
}
.broadcast-recipient-list li {
    margin: 4px 0;
    font-size: 13px;
}
.broadcast-recip-email {
    color: var(--color-text-muted);
    font-size: 12px;
}
.broadcast-recip-role {
    margin-left: 6px;
    padding: 0 6px;
    background: var(--color-bg-muted);
    border-radius: 3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.broadcast-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.broadcast-error {
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(220, 38, 38, 0.08);
    color: rgb(185, 28, 28);
    border-radius: 4px;
    font-size: 13px;
}
.broadcast-error.hidden,
.broadcast-success.hidden {
    display: none;
}
.broadcast-success {
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(34, 197, 94, 0.1);
    color: rgb(21, 128, 61);
    border-radius: 4px;
    font-size: 13px;
}
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-link, #2563eb);
    cursor: pointer;
    text-decoration: underline;
    font-size: inherit;
}

/* /admin/broadcasts viewer */
.broadcasts-table td {
    vertical-align: top;
    padding: 10px 12px;
}
.broadcast-detail-body {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--color-bg-muted);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
}
.broadcast-detail-recipients ul {
    margin: 8px 0;
    padding-left: 18px;
    columns: 2;
}
.broadcast-detail-recipients li {
    break-inside: avoid;
    font-size: 13px;
    margin: 2px 0;
}
@media (max-width: 640px) {
    .broadcast-detail-recipients ul {
        columns: 1;
    }
}


/* ============================================================================
 * t-paliad-146 — Paliadin in-app AI buddy (PoC).
 * ========================================================================== */

.paliadin-page {
    padding-bottom: 0;
}

.paliadin-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--page-chrome-h, 80px));
    max-height: calc(100vh - 80px);
}

.paliadin-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
}

.paliadin-tagline {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.paliadin-reset {
    flex-shrink: 0;
}

.paliadin-stream {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 200px;
}

.paliadin-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem;
}

.paliadin-empty p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.paliadin-starters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 480px;
}

.paliadin-starter {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
}

.paliadin-starter:hover {
    background: var(--color-surface-2);
    border-color: var(--color-accent);
}

.paliadin-bubble {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    line-height: 1.5;
    word-wrap: break-word;
    color: var(--color-text);
}

.paliadin-bubble--user {
    align-self: flex-end;
    margin-left: auto;
    background: var(--color-bg-lime-tint);
    border: 1px solid var(--color-accent);
}

.paliadin-bubble--assistant {
    align-self: flex-start;
    margin-right: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.paliadin-bubble--error {
    color: var(--status-red-fg);
    border-color: var(--status-red-border);
    background: var(--status-red-bg);
}

/* late-pending: SSE timed out, late poller still waiting on the
   Janitor to patch the row. Slight pulse so m sees we haven't
   forgotten the turn. */
.paliadin-bubble--late-pending {
    opacity: 0.85;
}

/* late: response arrived after the SSE error closed. Same look as
   normal assistant bubbles; the marker in .paliadin-bubble-meta does
   the talking. */
.paliadin-bubble--late {
    color: inherit;
    border-color: var(--color-border);
    background: var(--color-surface);
}

.paliadin-bubble-late-tag {
    color: var(--color-text-muted);
    font-style: italic;
}

/* lost: backend confirmed the turn is unrecoverable (t-paliad-235).
   Different from error: the upstream had a chance to finish but the
   conversation lookup didn't find a response — show the honest
   "verloren" copy. */
.paliadin-bubble--lost {
    color: var(--status-red-fg);
    border-color: var(--status-red-border);
    background: var(--status-red-bg);
    opacity: 0.9;
}

/* Thinking indicator (t-paliad-235) — proof-of-life pulse + elapsed
   counter while the upstream is alive but no content has streamed
   yet. Lives as a sibling node inside the assistant bubble; removed
   once the first chunk arrives. */
.paliadin-thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: monospace;
}

.paliadin-thinking-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-bg-lime);
    animation: paliadin-thinking-pulse 1.4s ease-in-out infinite;
}

.paliadin-thinking-elapsed {
    font-variant-numeric: tabular-nums;
}

@keyframes paliadin-thinking-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50%      { opacity: 1.0; transform: scale(1.1); }
}

.paliadin-bubble-role {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.paliadin-bubble-text {
    white-space: pre-wrap;
}

.paliadin-bubble-meta {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-family: monospace;
}

.paliadin-chip {
    display: inline-block;
    background: var(--color-bg-lime-tint);
    border: 1px solid var(--color-accent);
    color: var(--color-text);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    margin: 0 0.15rem;
    cursor: pointer;
}

.paliadin-chip:hover {
    background: var(--color-accent);
}

.paliadin-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
}

.paliadin-input {
    flex: 1;
    resize: vertical;
    min-height: 2.5rem;
    max-height: 12rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;
}

.paliadin-input:focus {
    outline: none;
    border-color: var(--color-accent);
}

/* /admin/paliadin dashboard. */

.paliadin-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}

.paliadin-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.paliadin-stat-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.paliadin-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text);
}

.paliadin-classifier {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 2rem;
    max-width: 600px;
}

.paliadin-classifier-row {
    display: grid;
    grid-template-columns: 6rem 1fr 3rem;
    align-items: center;
    gap: 0.75rem;
}

.paliadin-classifier-label {
    font-size: 0.9rem;
    color: var(--color-text);
}

.paliadin-classifier-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    height: 1.25rem;
    border-radius: 4px;
    overflow: hidden;
}

.paliadin-classifier-fill {
    height: 100%;
    background: var(--color-accent);
}

.paliadin-classifier-count {
    font-family: monospace;
    text-align: right;
    color: var(--color-text-muted);
}

.paliadin-spark {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 60px;
    margin: 1rem 0 2rem;
    padding: 0 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.paliadin-spark-bar {
    flex: 1;
    background: var(--color-accent);
    min-height: 1px;
    max-width: 12px;
}

/* ============================================================================
   /projects redesign (t-paliad-149) — toolbar, chips, pin star, search match
   ============================================================================ */

/* Toolbar: search input + view-mode segment-control on one row.
   Wraps on narrow viewports so the segment control drops below the search. */
.projects-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 1rem 0 0.5rem 0;
}

.projects-search-wrap {
    position: relative;
    flex: 1 1 320px;
    min-width: 240px;
}

.projects-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.projects-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
}

.projects-search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgb(var(--hlc-lime-rgb) / 0.25);
}

.projects-search-count {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}

/* View-mode segment-control */
.projects-view-segment {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-surface);
}

.projects-view-btn {
    padding: 0.4rem 0.85rem;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
    border-right: 1px solid var(--color-border);
}

.projects-view-btn:last-child { border-right: 0; }

.projects-view-btn:hover { background: var(--color-surface-muted); }

.projects-view-btn.is-active {
    background: rgb(var(--hlc-lime-rgb) / 0.2);
    color: var(--color-text);
    font-weight: 600;
}

/* Chip filter row */
.projects-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin: 0.25rem 0 1rem 0;
}

.projects-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.projects-chip::-webkit-details-marker { display: none; }

.projects-chip:hover {
    background: var(--color-surface-muted);
    border-color: var(--color-border-strong, var(--color-border));
}

.projects-chip.is-active {
    background: rgb(var(--hlc-lime-rgb) / 0.25);
    border-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}

.projects-chip-multi {
    position: relative;
}

.projects-chip-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
    gap: 0.35rem;
}

.projects-chip-panel label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Pin star — always-visible (touch-friendly), per design §4.6.
   Stars are drawn via inline SVG; this rule sizes the button hit-target. */
.projekt-tree-pin {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    margin-left: 0.4rem;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.projekt-tree-pin svg {
    width: 18px;
    height: 18px;
}

.projekt-tree-pin:hover {
    background: var(--color-surface-muted);
    color: var(--color-accent);
}

.projekt-tree-pin.is-pinned {
    color: var(--color-accent);
}

.projekt-tree-pin:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Greyed-ancestor look for Scope=Mine / Scope=Pinned. The row stays
   clickable but reads as "context" rather than "your project." */
.projekt-tree-row.is-inherited {
    opacity: 0.55;
}

.projekt-tree-row.is-inherited .projekt-tree-pin {
    visibility: hidden;
}

/* Search match highlighting. Self-matches get a faint lime backdrop;
   ancestors / descendants stay neutral so the eye finds the actual hit. */
.projekt-tree-row.is-match-self {
    background: rgb(var(--hlc-lime-rgb) / 0.15);
}

/* Filtered-empty view gets an inline reset button. */
.entity-empty-filtered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

@media (max-width: 600px) {
    .projects-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .projects-view-segment { align-self: flex-start; }
}

/* ============================================================================
   /projects Cards view (t-paliad-149 PR 2)
   ============================================================================ */

.projects-cards-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0.5rem 0;
}

.projects-cards-layout-picker {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.projects-cards-layout-label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.projects-cards-show-all-levels {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.9rem;
    margin-left: auto;
}

.projects-cards-edit-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
    margin: 0.5rem 0;
    background: rgb(var(--hlc-lime-rgb) / 0.15);
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius-md);
}

.projects-cards-edit-controls,
.projects-cards-edit-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.projects-cards-edit-actions {
    margin-left: auto;
}

/* Cards grid */
.projects-cards-grid {
    display: grid;
    gap: 1rem;
    /* min(320px, 100%): on viewports narrower than 320px the floor
       collapses to the available width so cards span full-width and
       don't force horizontal scroll on mobile.
       minmax(0, 1fr) on the explicit-N-column variants below: 1fr is
       shorthand for minmax(auto, 1fr), and "auto" resolves to max-content,
       so any card with content wider than the track expands the track and
       blows past the parent's right edge. minmax(0, 1fr) clamps the floor
       to zero so the track always stays inside the grid container — cards
       become genuinely compact and overflow goes to wrap/clip rather than
       page-overflow (m, 2026-05-08 15:02). */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    margin-top: 0.5rem;
}

.projects-cards-grid.is-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projects-cards-grid.is-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.projects-cards-grid.is-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.projects-cards-grid.is-density-compact .projects-card {
    padding: 0.6rem 0.75rem;
    gap: 0.35rem;
}

.projects-cards-grid.is-density-compact .projects-card-section {
    margin-top: 0.25rem;
}

.projects-cards-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: var(--color-text-muted);
}

/* One card */
.projects-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.projects-card.is-edit-mode {
    border-style: dashed;
    border-color: var(--color-accent);
}

.projects-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.projects-card-icon {
    color: var(--color-accent);
}

.projects-card-title {
    flex: 1;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projects-card-title:hover {
    text-decoration: underline;
}

.projects-card-pin {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.25rem;
}

.projects-card-pin.is-pinned {
    color: var(--color-accent);
}

.projects-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.projects-card-cm {
    font-family: var(--font-mono, monospace);
    font-size: 0.8rem;
}

.projects-card-section {
    margin-top: 0.25rem;
}

.projects-card-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}

.projects-card-empty {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.projects-card-event-row {
    display: grid;
    grid-template-columns: 80px auto 1fr auto auto;
    gap: 0.4rem;
    align-items: center;
    padding: 0.2rem 0.3rem;
    margin: 0.1rem 0;
    text-decoration: none;
    color: var(--color-text);
    border-radius: 4px;
    font-size: 0.85rem;
}

.projects-card-event-row:hover {
    background: var(--color-surface-muted);
}

.projects-card-event-date {
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.projects-card-event-kind {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.projects-card-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projects-card-team {
    margin-top: 0.4rem;
}

.projects-card-team-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-surface-muted);
    font-size: 0.7rem;
    font-weight: 600;
    margin-right: -4px;
    border: 2px solid var(--color-surface);
}

.projects-card-team-overflow {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Edit-mode fact list inside each card */
.projects-cards-edit-facts {
    list-style: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-top: 1px dashed var(--color-border);
    padding-top: 0.5rem;
}

.projects-cards-edit-fact {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
    background: var(--color-surface-muted);
    cursor: grab;
}

.projects-cards-edit-fact.is-dragging {
    opacity: 0.4;
}

.projects-cards-edit-fact.is-drop-target {
    outline: 2px dashed var(--color-accent);
    outline-offset: -2px;
}

.projects-cards-edit-handle {
    color: var(--color-text-muted);
    cursor: grab;
    user-select: none;
}

.projects-cards-edit-label {
    flex: 1;
    font-size: 0.85rem;
}

.projects-cards-edit-count {
    width: 50px;
    padding: 0.15rem 0.3rem;
    font-size: 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
}

@media (max-width: 600px) {
    .projects-cards-grid {
        grid-template-columns: 1fr !important;
    }
    .projects-cards-edit-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================================
 * t-paliad-154 — admin /admin/approval-policies page.
 * ========================================================================== */

.ap-units-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.ap-unit-block {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.ap-unit-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    list-style: none;
    user-select: none;
}

.ap-unit-summary::-webkit-details-marker {
    display: none;
}

.ap-unit-summary::before {
    content: "▸";
    color: var(--color-text-muted);
    transition: transform 120ms ease;
}

.ap-unit-block[open] > .ap-unit-summary::before {
    transform: rotate(90deg);
}

.ap-unit-block[open] > .ap-unit-summary {
    border-bottom: 1px solid var(--color-border);
}

.ap-unit-name {
    flex: 1;
    font-weight: 600;
    color: var(--color-text);
}

.ap-unit-body {
    padding: 1rem;
    background: var(--color-bg-subtle);
}

/* Project picker. */
.ap-project-picker {
    margin-bottom: 1rem;
}

.ap-project-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--color-input-bg);
    color: var(--color-text);
}

.ap-project-results {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 240px;
    overflow-y: auto;
}

.ap-project-result {
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--color-text);
}

.ap-project-result:hover {
    background: var(--color-bg-lime-tint);
}

.ap-project-result-title {
    flex: 1;
}

.ap-project-result-ref {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.ap-project-matrix {
    margin-top: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.ap-project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.ap-project-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
}

.ap-matrix-host {
    margin-top: 0.5rem;
}

/* Matrix table — desktop. */
.ap-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ap-matrix thead th {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-weight: 500;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
}

.ap-matrix-rowhead {
    font-weight: 600;
    color: var(--color-text);
    padding: 0.5rem 0.6rem;
    width: 8rem;
    background: var(--color-bg-subtle);
    border-right: 1px solid var(--color-border);
}

.ap-matrix-cell {
    padding: 0.4rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-border);
}

.ap-cell-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ap-cell-select {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 5px;
    background: var(--color-input-bg);
    color: var(--color-text);
    font-size: 0.85rem;
}

/* t-paliad-160 §A — split-grammar 2-control cell. Checkbox + role select
 * + clear button. The checkbox is the gate (requires_approval); the role
 * select is the threshold (min_role) and disables when the checkbox is
 * off. The clear button explicitly drops the cell back to inheritance. */
.ap-cell-controls {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ap-cell-toggle {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--color-text);
    cursor: pointer;
}

.ap-cell-toggle-label {
    user-select: none;
}

.ap-cell-role {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 5px;
    background: var(--color-input-bg);
    color: var(--color-text);
    font-size: 0.85rem;
}

.ap-cell-role[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ap-cell-clear {
    align-self: flex-end;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    cursor: pointer;
}

.ap-cell-clear:hover:not([disabled]) {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

.ap-cell-clear[disabled] {
    opacity: 0.4;
    cursor: default;
}

.ap-source-chip {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    color: var(--color-text-muted);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
}

.ap-source-chip.ap-source-project {
    background: var(--color-bg-lime-tint);
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
}

.ap-source-chip.ap-source-ancestor {
    background: var(--status-blue-soft-bg);
    color: var(--status-blue-soft-fg);
    border-color: var(--status-blue-bg);
}

.ap-source-chip.ap-source-unit_default {
    background: var(--status-neutral-bg);
    color: var(--status-neutral-fg);
    border-color: var(--color-border);
}

/* Mobile stacked sections — hidden on desktop, shown < 700px. */
.ap-matrix-stacked {
    display: none;
}

@media (max-width: 700px) {
    .ap-matrix {
        display: none;
    }
    .ap-matrix-stacked {
        display: block;
    }
    .ap-matrix-section {
        margin-bottom: 1.25rem;
    }
    .ap-matrix-section h4 {
        margin: 0 0 0.5rem 0;
        font-size: 1rem;
        color: var(--color-text);
    }
    .ap-matrix-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--color-border);
        gap: 0.5rem;
    }
    .ap-matrix-row-label {
        flex: 1;
        font-size: 0.9rem;
        color: var(--color-text);
    }
    .ap-matrix-row .ap-cell-select {
        width: 50%;
    }
    .ap-matrix-row .ap-cell-wrap {
        width: 50%;
    }
    .ap-matrix-row .ap-cell-controls {
        width: 50%;
    }
}

/* Bulk-apply modal — list of affected descendants. */
.ap-bulk-target-list {
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background: var(--color-bg-subtle);
}

.ap-bulk-target-list li {
    padding: 0.3rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text);
}

.ap-bulk-target-list li:last-child {
    border-bottom: none;
}

.ap-bulk-target-ref {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.ap-loading {
    color: var(--color-text-muted);
    padding: 0.75rem 1rem;
    font-style: italic;
}

/* Form-time 4-eye hint above Speichern on /projects/{id}/deadlines/new + appointments/new. */
.approval-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0.75rem 0;
    background: var(--status-amber-bg);
    color: var(--status-amber-fg);
    border: 1px solid var(--status-amber-border);
    border-radius: 6px;
    font-size: 0.85rem;
}

.approval-hint-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--status-amber-fg);
}

.approval-hint-icon svg {
    width: 100%;
    height: 100%;
}

/* Inbox empty-state admin nudge. */
.inbox-admin-nudge {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border-strong);
    border-radius: 8px;
    text-align: center;
}

.inbox-admin-nudge h3 {
    margin: 0 0 0.4rem 0;
    font-size: 1.05rem;
    color: var(--color-text);
}

.inbox-admin-nudge p {
    margin: 0 0 0.75rem 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* ============================================================
 * Paliadin inline widget (t-paliad-161)
 * ============================================================
 * Floating trigger at bottom-right + slide-out drawer from the
 * right edge. Hidden by default; revealed by paliadin-widget.ts
 * after /api/me confirms the caller is the Paliadin owner.
 * Mobile (≤640px): drawer goes full-screen.
 * Phone breakpoint (≤767px, matches .bottom-nav): trigger lifts
 * above the bottom-nav slots so it doesn't collide with the
 * navbar on PWA standalone (t-paliad-269).
 */

.paliadin-widget-trigger {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-accent);
    /* Lime is a light-background colour: foreground must be midnight in
       both light + dark themes, otherwise the SVG glyph (currentColor)
       washes out to white-on-lime in dark mode. */
    color: var(--hlc-midnight);
    border: 1px solid var(--color-border-strong);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1100;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.paliadin-widget-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.paliadin-widget-trigger:focus-visible {
    outline: 3px solid var(--color-accent-strong, var(--color-accent));
    outline-offset: 2px;
}

.paliadin-widget-trigger-glyph {
    display: inline-flex;
    width: 24px;
    height: 24px;
}

.paliadin-widget-trigger-glyph svg {
    width: 100%;
    height: 100%;
}

.paliadin-widget-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0;
    transition: opacity 200ms ease;
    z-index: 1190;
    pointer-events: none;
}

.paliadin-widget-scrim--visible {
    opacity: 1;
    pointer-events: auto;
}

.paliadin-widget-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 420px;
    max-width: 100vw;
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 220ms ease;
    color: var(--color-text);
}

.paliadin-widget-drawer--visible {
    transform: translateX(0);
}

@media (max-width: 640px) {
    .paliadin-widget-drawer {
        width: 100vw;
    }
}

/* Lift the trigger above the BottomNav at the same breakpoint where
   the nav appears (<768px in global.css ".bottom-nav"). The navbar is
   --bottom-nav-height tall plus the iOS safe-area inset; 16px gap
   keeps the bubble clear without crowding the nav slots. Bubble sits
   at the right edge so the center FAB-circle (margin-top: -10px) is
   not in its column.
   t-paliad-269: previously this rule was scoped to <=640px, but the
   .bottom-nav shows at <=767px, leaving phones in landscape and small
   tablets with an overlapping bubble. */
@media (max-width: 767px) {
    .paliadin-widget-trigger {
        bottom: calc(var(--bottom-nav-height, 56px) + 16px + env(safe-area-inset-bottom, 0px));
    }
}

.paliadin-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.paliadin-widget-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text);
}

.paliadin-widget-title-glyph {
    display: inline-flex;
    width: 18px;
    height: 18px;
    color: var(--color-accent);
}

.paliadin-widget-title-glyph svg {
    width: 100%;
    height: 100%;
}

.paliadin-widget-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.paliadin-widget-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.paliadin-widget-action-btn:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.paliadin-widget-action-btn svg {
    width: 16px;
    height: 16px;
}

.paliadin-widget-context-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-bg-lime-tint, var(--color-surface-2));
    border-bottom: 1px solid var(--color-border);
    font-size: 0.825rem;
}

.paliadin-widget-context-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

.paliadin-widget-context-value {
    color: var(--color-text);
    font-weight: 600;
}

.paliadin-widget-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.paliadin-widget-empty {
    margin: 1rem 0;
    text-align: center;
    color: var(--color-text-muted);
}

.paliadin-widget-empty-prompt {
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
}

.paliadin-widget-starters {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
}

.paliadin-widget-starter {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.paliadin-widget-starter:hover {
    background: var(--color-bg-lime-tint, var(--color-surface));
    border-color: var(--color-accent);
}

.paliadin-widget-bubble {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text);
    word-wrap: break-word;
    white-space: pre-wrap;
}

.paliadin-widget-bubble--user {
    align-self: flex-end;
    margin-left: auto;
    background: var(--color-bg-lime-tint, var(--color-surface-2));
}

.paliadin-widget-bubble--assistant {
    align-self: flex-start;
    margin-right: auto;
    background: var(--color-surface-2);
    /* Assistant bubbles render markdown HTML (paliadin-render.ts) — pre-wrap
       on the parent would force every newline in the source to a literal
       break and clash with <p>/<h2>/<ul> spacing. User bubbles keep
       pre-wrap from the base rule above. */
    white-space: normal;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text > *:first-child {
    margin-top: 0;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text > *:last-child {
    margin-bottom: 0;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.6rem 0 0.3rem;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0.5rem 0 0.25rem;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text p {
    margin: 0.4rem 0;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text ul.paliadin-list {
    margin: 0.4rem 0;
    padding-left: 1.25rem;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text ul.paliadin-list li {
    margin: 0.15rem 0;
}

.paliadin-widget-bubble--assistant .paliadin-widget-bubble-text hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 0.75rem 0;
}

.paliadin-widget-bubble--error {
    background: var(--status-red-bg, var(--color-surface-2));
    color: var(--status-red-fg, var(--color-text));
    border: 1px solid var(--status-red-border, var(--color-border));
}

/* late-pending: stream dropped, recovery endpoint still polling. */
.paliadin-widget-bubble--late-pending {
    opacity: 0.85;
}

/* late: response arrived after the stream closed. */
.paliadin-widget-bubble--late {
    color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.paliadin-widget-bubble-late-tag {
    color: var(--color-text-muted);
    font-style: italic;
    margin-left: 0.25rem;
}

/* lost: backend confirmed the turn is unrecoverable (t-paliad-235). */
.paliadin-widget-bubble--lost {
    background: var(--status-red-bg, var(--color-surface-2));
    color: var(--status-red-fg, var(--color-text));
    border: 1px solid var(--status-red-border, var(--color-border));
    opacity: 0.9;
}

/* Thinking indicator inside widget bubbles (t-paliad-235). */
.paliadin-widget-thinking {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: monospace;
}

.paliadin-widget-thinking-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-bg-lime);
    animation: paliadin-thinking-pulse 1.4s ease-in-out infinite;
}

.paliadin-widget-thinking-elapsed {
    font-variant-numeric: tabular-nums;
}

.paliadin-widget-form {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.paliadin-widget-input {
    flex: 1;
    resize: none;
    min-height: 44px;
    max-height: 160px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
}

.paliadin-widget-input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
    border-color: var(--color-accent);
}

.paliadin-widget-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 1px solid var(--color-border-strong);
    background: var(--color-accent);
    color: var(--color-accent-dark);
    cursor: pointer;
    transition: background 120ms ease;
}

.paliadin-widget-send-btn:hover:not(:disabled) {
    background: var(--color-accent-strong, var(--color-accent));
}

.paliadin-widget-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.paliadin-widget-send-btn svg {
    width: 16px;
    height: 16px;
}

/* ----------------------------------------------------------------------
   Universal FilterBar — t-paliad-163.

   Mounts on every list-shaped surface (starting with /inbox in Phase 1).
   Reuses .agenda-chip + .filter-group + .entity-select for legacy
   parity; wraps them with .filter-bar* scoping so the bar can be
   styled independently if a surface needs to override.
   ---------------------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.85rem 1.1rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.75rem;
}

.filter-bar-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
}

.filter-bar-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #6b7280);
}

.filter-bar-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.filter-bar-chip-row.filter-bar-segment {
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.15rem;
    background: var(--color-surface-muted, #f5f5f5);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 999px;
}
.filter-bar-segment .filter-bar-chip {
    background: transparent;
    border: 1px solid transparent;
}
.filter-bar-segment .filter-bar-chip.agenda-chip-active {
    background: var(--color-segment-active-bg);
    color: var(--color-segment-active-fg);
    border-color: var(--color-segment-active-border);
}

.filter-bar-chip-pending {
    opacity: 0.55;
    cursor: not-allowed;
}

.filter-bar-select {
    min-width: 8rem;
}

.filter-bar-trailing {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 768px) {
    .filter-bar {
        gap: 0.6rem 0.7rem;
        padding: 0.6rem;
        margin: 0 0 0.75rem 0;
    }
    .filter-bar-trailing {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    .filter-bar-chip-row {
        flex-wrap: wrap;
    }
}

/* Save-as-view modal — anchored as a native <dialog>. */
.filter-bar-save-modal::backdrop {
    background: rgba(15, 23, 42, 0.4);
}

.filter-bar-save-modal {
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.85rem;
    padding: 0;
    max-width: 28rem;
    width: calc(100% - 2rem);
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #111827);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.filter-bar-save-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem 1.25rem;
    margin: 0;
}

.filter-bar-save-form h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1.15rem;
}

.filter-bar-save-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.filter-bar-save-field span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
}
.filter-bar-save-field input {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 0.4rem;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #111827);
    font: inherit;
}
.filter-bar-save-field small {
    font-size: 0.7rem;
    color: var(--color-text-muted, #6b7280);
}

.filter-bar-save-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.filter-bar-save-error {
    margin: 0;
    color: var(--status-red-fg, #c54);
    font-size: 0.85rem;
}

.filter-bar-save-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ========================================================================
   SmartTimeline (t-paliad-171, Slice 1).
   Vertical two-column timeline replacing the legacy <ul.entity-events>
   on the Verlauf tab. Past chronological → "Heute →" rule → Future
   chronological. Status icon + kind chip per row, deep-link via a
   row-level click handler on .smart-timeline-row--clickable (NOT a
   ::before overlay — text selection must stay intact, project CLAUDE.md
   "Whole-card click → use a JS row handler").
   ======================================================================== */

.smart-timeline-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.smart-timeline-controls #smart-timeline-add-btn {
    margin-left: auto;
}

.smart-timeline {
    display: block;
}

.smart-timeline-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.smart-timeline-flow {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.smart-timeline-section {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.smart-timeline-heading {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
    font-weight: 600;
}

/* "Heute →" horizontal rule. Anchors past vs future visually even when
   one side is empty, so the user always has a temporal reference. */
.smart-timeline-today-rule {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-accent-fg);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0.25rem 0;
}

.smart-timeline-today-rule::before,
.smart-timeline-today-rule::after {
    content: "";
    flex: 1;
    height: 0;
    border-top: 2px solid var(--hlc-lime, var(--color-accent-fg));
    border-radius: 1px;
}

.smart-timeline-today-label {
    flex: 0 0 auto;
    padding: 0 0.4rem;
}

.smart-timeline-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    align-items: start;
}

@media (max-width: 640px) {
    .smart-timeline-row {
        grid-template-columns: 1fr;
    }
}

.smart-timeline-row--clickable {
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.smart-timeline-row--clickable:hover {
    border-color: var(--color-accent-fg);
    box-shadow: var(--shadow-hover, var(--shadow));
}

.smart-timeline-date {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    padding-top: 0.15rem;
}

.smart-timeline-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.smart-timeline-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.smart-timeline-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.smart-timeline-row--done .smart-timeline-status-icon {
    background: var(--hlc-lime, #c6f41c);
    color: #1a1a1a;
}

.smart-timeline-row--overdue .smart-timeline-status-icon {
    background: #f8d7da;
    color: #842029;
}

.smart-timeline-row--off_script .smart-timeline-status-icon {
    background: #fff3cd;
    color: #664d03;
}

.smart-timeline-row--court_set .smart-timeline-status-icon {
    background: transparent;
    border: 1px dashed var(--color-text-muted);
}

.smart-timeline-title {
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1 1 auto;
    min-width: 0;
}

.smart-timeline-link {
    color: inherit;
    text-decoration: none;
}

.smart-timeline-link:hover {
    color: var(--color-accent-fg);
    text-decoration: underline;
}

.smart-timeline-link:focus-visible {
    outline: none;
}

.smart-timeline-kind-chip,
.smart-timeline-rule-chip {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.smart-timeline-kind-chip--deadline {
    background: #e0ecff;
    color: #1a4a8a;
}

.smart-timeline-kind-chip--appointment {
    background: #e7f5ee;
    color: #2c6b46;
}

.smart-timeline-kind-chip--milestone {
    background: #fdecd2;
    color: #7a4f15;
}

.smart-timeline-kind-chip--projected {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-style: italic;
}

.smart-timeline-rule-chip {
    font-family: var(--font-mono);
}

.smart-timeline-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.2rem;
}

/* Modal — minimal scrim + centred card. The new-entry CTA opens this;
   "Eigener Meilenstein" expands the form inline, every other choice
   is a plain link / disabled button. */
.smart-timeline-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.smart-timeline-modal-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 480px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.smart-timeline-modal-card h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
}

.smart-timeline-add-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.smart-timeline-add-choice {
    display: block;
    text-align: left;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
    cursor: pointer;
}

.smart-timeline-add-choice:hover:not(:disabled) {
    border-color: var(--color-accent-fg);
    background: var(--color-surface-2);
}

.smart-timeline-add-choice--primary {
    border-color: var(--hlc-lime, var(--color-accent-fg));
    font-weight: 600;
}

.smart-timeline-add-choice--disabled,
.smart-timeline-add-choice:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.smart-timeline-modal-close-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* ----------------------------------------------------------------------
   SmartTimeline Slice 2 (t-paliad-173) — projected rows, depends-on
   footer, click-to-anchor inline editor, lookahead toggle.
   ---------------------------------------------------------------------- */

/* Predicted future rows fade so the eye reads "not yet real". */
.smart-timeline-row--projected {
    opacity: 0.78;
}

.smart-timeline-row--projected .smart-timeline-status-icon,
.smart-timeline-row--predicted .smart-timeline-status-icon {
    color: var(--color-text-muted, #777);
}

/* Court-set rows: dashed border on the left rail to read "the court
   binds the date, not us". */
.smart-timeline-row--court_set {
    border-left: 2px dashed var(--color-border-strong, #aaa);
    padding-left: 0.5rem;
}

/* Predicted-overdue rows: amber-faded so the user notices the projection
   should have happened by now. */
.smart-timeline-row--predicted_overdue {
    opacity: 0.85;
    border-left: 2px solid var(--color-status-amber, #d68a1a);
    padding-left: 0.5rem;
}
.smart-timeline-row--predicted_overdue .smart-timeline-status-icon {
    color: var(--color-status-amber, #d68a1a);
}

/* Status pill on projected rows — small, low-key, sits next to the kind
   chip. */
.smart-timeline-status-pill {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-surface-2);
    color: var(--color-text-muted, #555);
    line-height: 1.3;
}
.smart-timeline-status-pill--court_set {
    border: 1px dashed var(--color-border-strong, #999);
    background: transparent;
}
.smart-timeline-status-pill--predicted_overdue {
    background: var(--color-bg-amber-tint, #fff5e0);
    color: var(--color-status-amber, #b56a00);
}

/* Depends-on footer — quiet line under the row title, "Folgt aus: …". */
.smart-timeline-depends-on {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #555);
}
.smart-timeline-depends-on-expand {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-link, #1a6dc5);
    cursor: pointer;
    font-size: 0.8rem;
    text-decoration: underline dotted;
}
.smart-timeline-depends-on-expand:hover {
    text-decoration: underline;
}
.smart-timeline-depends-on-path {
    flex-basis: 100%;
    margin-top: 0.2rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border, #ddd);
    font-size: 0.8rem;
}
.smart-timeline-depends-on-hint {
    font-style: italic;
    color: var(--color-text-muted, #777);
}

/* Click-to-anchor — editor lives inline under the row body. The trigger
   is a low-emphasis link button; the editor flips into a small flex row
   with a date input + Speichern / Abbrechen. */
.smart-timeline-anchor {
    margin-top: 0.4rem;
}
.smart-timeline-anchor-btn {
    background: transparent;
    border: 1px solid var(--color-border, #ddd);
    color: var(--color-link, #1a6dc5);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}
.smart-timeline-anchor-btn:hover {
    background: var(--color-bg-lime-tint, #f4fdd1);
    border-color: var(--color-accent, #c6f41c);
}
.smart-timeline-anchor-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.smart-timeline-anchor-date {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 4px;
    font-size: 0.9rem;
}
.smart-timeline-anchor-submit {
    background: var(--color-accent, #c6f41c);
    border: 1px solid var(--color-accent, #c6f41c);
    color: var(--color-accent-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}
.smart-timeline-anchor-submit:disabled,
.smart-timeline-anchor-cancel:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.smart-timeline-anchor-cancel {
    background: transparent;
    border: 1px solid var(--color-border, #ddd);
    color: var(--color-text-muted, #555);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
}
.smart-timeline-anchor-msg {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--color-text-muted, #555);
}
.smart-timeline-anchor-msg--error {
    color: var(--status-red-fg, #b03030);
}
.smart-timeline-anchor-msg--predecessor {
    background: var(--status-red-bg, #fde8e8);
    border: 1px solid var(--status-red-border, #f0bcbc);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}
.smart-timeline-anchor-msg--predecessor p {
    margin: 0 0 0.4rem 0;
}
.smart-timeline-anchor-predecessor-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-link, #1a6dc5);
    cursor: pointer;
    text-decoration: underline;
    font-size: 0.85rem;
}
.smart-timeline-anchor-msg--cross-proceeding {
    background: var(--status-red-bg, #fde8e8);
    border: 1px solid var(--status-red-border, #f0bcbc);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
}
.smart-timeline-anchor-msg--cross-proceeding p {
    margin: 0 0 0.4rem 0;
}
.smart-timeline-anchor-parent-link {
    color: var(--color-link, #1a6dc5);
    text-decoration: underline;
    font-size: 0.85rem;
}

/* Lookahead toggle row — small, centred under the future section. */
.smart-timeline-lookahead {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
}
.smart-timeline-lookahead-btn {
    background: transparent;
    border: 1px dashed var(--color-border, #ccc);
    color: var(--color-text-muted, #555);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
}
.smart-timeline-lookahead-btn:hover {
    border-style: solid;
    border-color: var(--color-accent, #c6f41c);
    background: var(--color-bg-lime-tint, #f4fdd1);
}

/* SmartTimeline Slice 3 — counterclaim parallel tracks (t-paliad-174).
   .smart-timeline-tracks is the grid wrapper. Each .smart-timeline-track
   is a self-contained column with its own past/today/future flow. CSS
   Grid handles the side-by-side layout on desktop and collapses to a
   single column on mobile (≤640px) per the existing Paliad breakpoint
   convention. */
.smart-timeline-tracks {
    display: grid;
    grid-template-columns: repeat(var(--smart-timeline-track-count, 2), minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}
.smart-timeline-track {
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    padding: 0.75rem 0.85rem 1rem;
    background: var(--color-surface, #fff);
    min-width: 0;
}
.smart-timeline-track--parent {
    border-left: 3px solid var(--color-accent, #c6f41c);
}
.smart-timeline-track--counterclaim {
    border-left: 3px solid var(--color-text-muted, #999);
    background: var(--color-surface-2, #f7f7f7);
}
.smart-timeline-track--parent-context {
    border-left: 3px dashed var(--color-text-muted, #999);
    background: var(--color-surface-2, #f7f7f7);
    opacity: 0.85;
}
.smart-timeline-track-header {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted, #555);
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    padding-bottom: 0.4rem;
}
.smart-timeline-track-empty {
    color: var(--color-text-muted, #888);
    font-size: 0.85rem;
    padding: 0.75rem 0;
    font-style: italic;
}
@media (max-width: 640px) {
    .smart-timeline-tracks {
        grid-template-columns: 1fr;
    }
}

/* Track-selector chip — sits above the timeline. Style follows the
   existing chip-row affordances. */
.smart-timeline-track-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}
.smart-timeline-track-chip-label {
    font-size: 0.85rem;
    color: var(--color-text-muted, #555);
    font-weight: 500;
}
.smart-timeline-track-chip-select {
    border: 1px solid var(--color-border, #ccc);
    background: var(--color-surface, #fff);
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.85rem;
    cursor: pointer;
}
.smart-timeline-track-chip-select:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 1px;
}

/* SmartTimeline Slice 4 — parent-node lane aggregation (t-paliad-175).
   .smart-timeline-lanes is the grid wrapper; .smart-timeline-lane is
   each direct-child column. Layout mirrors .smart-timeline-tracks but
   carries its own modifier so the visual treatment can diverge as the
   product evolves (lane widths can become richer with sub-headers).
   Mobile collapse to single-column at ≤640px. */
.smart-timeline-lanes-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.smart-timeline-lanes {
    display: grid;
    grid-template-columns: repeat(var(--smart-timeline-lane-count, 2), minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.smart-timeline-lane {
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    padding: 0.75rem 0.85rem 1rem;
    background: var(--color-surface, #fff);
    min-width: 0;
    transition: opacity 120ms ease-out;
}
.smart-timeline-lane--primary {
    border-left: 3px solid var(--color-accent, #c6f41c);
}
.smart-timeline-lane--dimmed {
    opacity: 0.35;
}
.smart-timeline-lane-header {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted, #555);
    border-bottom: 1px solid var(--color-border, #e0e0e0);
    padding-bottom: 0.4rem;
}
.smart-timeline-lane-header-link {
    color: inherit;
    text-decoration: none;
}
.smart-timeline-lane-header-link:hover {
    color: var(--color-link, #1a8aff);
    text-decoration: underline;
}
.smart-timeline-lane-empty {
    color: var(--color-text-muted, #888);
    font-size: 0.85rem;
    padding: 0.75rem 0;
    font-style: italic;
}
@media (max-width: 640px) {
    .smart-timeline-lanes {
        grid-template-columns: 1fr;
    }
}

/* Lane filter chip-row — multiselect chips above the strip. Mirrors the
   FilterBar chip pattern; "Alle" pseudo-chip is highlighted when every
   lane is selected. */
.smart-timeline-lane-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin: 0.25rem 0 0.5rem;
}
.smart-timeline-lane-filter-label {
    font-size: 0.85rem;
    color: var(--color-text-muted, #555);
    font-weight: 500;
}
.smart-timeline-lane-chip {
    border: 1px solid var(--color-border, #ccc);
    background: var(--color-surface, #fff);
    color: var(--color-text, #222);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}
.smart-timeline-lane-chip:hover {
    border-color: var(--color-accent, #c6f41c);
}
.smart-timeline-lane-chip.is-active {
    background: var(--color-bg-lime-tint, #f4fdd1);
    border-color: var(--color-accent, #c6f41c);
}
.smart-timeline-lane-chip--all {
    font-weight: 500;
}

/* Client-level matter-list (Slice 4 default at type=client). Simple
   list, slot for each direct child litigation. The Timeline-Ansicht
   toggle in the Verlauf controls flips between this and the lane view. */
.smart-timeline-matter-list {
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    background: var(--color-surface, #fff);
}
.smart-timeline-matter-list-heading {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 600;
}
.smart-timeline-matter-list-items {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.smart-timeline-matter-list-item {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    background: var(--color-surface-2, #f7f7f7);
}
.smart-timeline-matter-list-item a {
    color: inherit;
    text-decoration: none;
    display: block;
}
.smart-timeline-matter-list-item a:hover {
    text-decoration: underline;
}

/* Counterclaim form layout follow-ups — inherits .entity-form, just
   tightens the optional checkbox row + hint. */
.form-field--checkbox {
    align-items: flex-start;
}
.form-field--checkbox .form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}
.form-field--checkbox .form-field-hint {
    color: var(--color-text-muted, #777);
    font-size: 0.8rem;
    margin-top: 0.35rem;
    display: block;
    line-height: 1.4;
}

/* ============================================================
   Smart Timeline Chart (t-paliad-177 Slice 1)
   Horizontal SVG Gantt renderer mounted on /projects/{id}/chart.
   Token surface lets future palette / density slices override
   colour and lane height purely via CSS-var swap — see
   docs/design-project-chart-2026-05-09.md §5 + §6.
   ============================================================ */
.smart-timeline-chart-page {
    padding: 1rem 0 3rem;
}
.smart-timeline-chart-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}
.smart-timeline-chart-header h1 {
    margin: 0;
    font-size: 1.5rem;
}
.smart-timeline-chart-meta {
    color: var(--color-text-muted, #777);
    font-size: 0.9rem;
}
.smart-timeline-chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.smart-timeline-chart-controls .chip-inert {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-bg-subtle, #f7f7f7);
    color: var(--color-text-muted, #777);
    font-size: 0.85rem;
    cursor: not-allowed;
}
.smart-timeline-chart-host {
    position: relative;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    background: var(--chart-bg, var(--color-bg, #fff));
    padding: 0;
    min-height: 200px;
}
.smart-timeline-chart-message {
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-text-muted, #777);
}
.smart-timeline-chart-message--error {
    color: #c0392b;
}
.smart-timeline-chart {
    /* Default palette tokens — kept here so Slice 3 can swap them via
       [data-palette="..."] selectors without touching the renderer.
       Reference --color-* family so dark mode flips for free. */
    --chart-mark-deadline: var(--color-accent, #c6f41c);
    --chart-mark-appointment: #f5a623;
    --chart-mark-milestone: var(--hlc-midnight, #1a2233);
    --chart-mark-projected: var(--color-text-subtle, #999);
    --chart-mark-overdue: #d62828;
    --chart-mark-done: var(--color-accent, #c6f41c);
    --chart-today-rule: var(--color-accent, #c6f41c);
    --chart-grid-line: var(--color-border, #e0e0e0);
    --chart-lane-label: var(--color-text-muted, #777);
    --chart-tick-label: var(--color-text-muted, #777);

    display: block;
    width: 100%;
    color: var(--chart-mark-projected);
    font-family: inherit;
}
.smart-timeline-chart .chart-tick {
    stroke: var(--chart-grid-line);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}
.smart-timeline-chart .chart-tick--year {
    stroke: var(--chart-grid-line);
    stroke-width: 1.5;
    stroke-dasharray: none;
}
.smart-timeline-chart .chart-tick-label {
    font-size: 0.75rem;
    fill: var(--chart-tick-label);
}
.smart-timeline-chart .chart-lane-separator {
    stroke: var(--chart-grid-line);
    stroke-width: 1;
}
.smart-timeline-chart .chart-lane-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--chart-lane-label);
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}
.smart-timeline-chart .chart-today-rule {
    stroke: var(--chart-today-rule);
    stroke-width: 2;
}
.smart-timeline-chart .chart-today-label {
    font-size: 0.75rem;
    font-weight: 600;
    fill: var(--chart-today-rule);
}
.smart-timeline-chart .chart-mark {
    cursor: pointer;
}
.smart-timeline-chart .chart-mark:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 2px;
}
.smart-timeline-chart .chart-mark-dot {
    fill: var(--chart-mark-deadline);
    stroke: var(--chart-mark-deadline);
    stroke-width: 1.5;
}
.smart-timeline-chart .chart-mark--deadline.chart-mark--status-open .chart-mark-dot {
    fill: var(--chart-bg, #fff);
    stroke: var(--chart-mark-deadline);
}
.smart-timeline-chart .chart-mark--deadline.chart-mark--status-overdue .chart-mark-dot {
    fill: var(--chart-mark-overdue);
    stroke: var(--chart-mark-overdue);
}
.smart-timeline-chart .chart-mark--deadline.chart-mark--status-done .chart-mark-dot {
    fill: var(--chart-mark-done);
    stroke: var(--chart-mark-done);
}
.smart-timeline-chart .chart-mark--appointment .chart-mark-dot {
    fill: var(--chart-mark-appointment);
    stroke: var(--chart-mark-appointment);
}
.smart-timeline-chart .chart-mark-diamond {
    fill: var(--chart-mark-milestone);
    stroke: var(--chart-mark-milestone);
    stroke-width: 1;
}
.smart-timeline-chart .chart-mark-hatched {
    color: var(--chart-mark-projected); /* drives the pattern stroke via currentColor */
    stroke: var(--chart-mark-projected);
    stroke-width: 1;
    opacity: 0.7;
}
.smart-timeline-chart .chart-mark--projected.chart-mark--status-predicted_overdue .chart-mark-hatched {
    color: var(--chart-mark-overdue);
    stroke: var(--chart-mark-overdue);
}
.smart-timeline-chart .chart-mark-dashed {
    fill: none;
    stroke: var(--chart-mark-projected);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
}
.smart-timeline-chart .chart-mark--undated .chart-mark-dot,
.smart-timeline-chart .chart-mark--undated .chart-mark-diamond,
.smart-timeline-chart .chart-mark--undated .chart-mark-hatched,
.smart-timeline-chart .chart-mark--undated .chart-mark-dashed {
    opacity: 0.55;
}
.smart-timeline-chart-undated-hint {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text-muted, #777);
}

/* Mobile — design §9: force a vertical-only fallback notice below 640px
   instead of trying to render horizontal Gantt at phone width. Slice 3
   wires the actual layout flip; Slice 1 just nudges the user. */
@media (max-width: 640px) {
    .smart-timeline-chart-host {
        overflow-x: auto;
    }
}

/* CV-timeline caveat banner — design §13.4. Shown once per session on
   first open of a Custom View with shape="timeline". sessionStorage
   dismiss flag handled in client/views.ts. */
.views-timeline-caveat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--color-bg-lime-tint, #ecfbb6);
    border: 1px solid var(--color-accent, #c6f41c);
    border-radius: 8px;
    font-size: 0.9rem;
}
.views-timeline-caveat-close {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.35rem;
    margin-left: auto;
}
.views-timeline-caveat-close:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 2px;
}

/* Custom Views timeline toolbar (t-paliad-211) — zoom controls above the
   chart canvas. Stays in flow so it doesn't overlap the SVG date axis. */
.views-timeline-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.views-timeline-zoom-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.views-timeline-zoom-label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.views-timeline-zoom-btn {
    min-width: 32px;
    padding: 4px 10px;
    font-weight: 600;
}
.views-timeline-zoom-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.views-timeline-zoom-chips {
    display: inline-flex;
    gap: 4px;
}
.views-timeline-chart-host-inner {
    /* Reserve a min-height so the loading placeholder doesn't collapse
       and the toolbar/chart stack stays predictable. */
    min-height: 200px;
}

/* ---- Palette presets (t-paliad-177 Slice 2, design §5.1) ----
   Each palette is a pure data-attribute swap of the --chart-* tokens.
   Renderer code never reads palette state — it just emits classed SVG
   nodes and the tokens flow in from these blocks. */
.smart-timeline-chart[data-palette="kind-coded"] {
    /* Kind dominates; track tokens stay neutral. */
    --chart-mark-deadline: #2f6fb5;       /* blue */
    --chart-mark-appointment: #f5a623;    /* amber */
    --chart-mark-milestone: var(--color-accent, #c6f41c);
    --chart-mark-projected: var(--color-text-subtle, #999);
    --chart-mark-overdue: #d62828;
    --chart-mark-done: #2f6fb5;
}
.smart-timeline-chart[data-palette="track-coded"] {
    /* Three distinct hues per track tag; kind drives shape only. */
    --chart-mark-deadline: var(--color-accent, #c6f41c);
    --chart-mark-appointment: var(--color-accent, #c6f41c);
    --chart-mark-milestone: #6e8a8c;
    --chart-mark-projected: #6e8a8c;
    --chart-mark-done: var(--color-accent, #c6f41c);
    --chart-mark-overdue: #d62828;
}
.smart-timeline-chart[data-palette="high-contrast"] {
    /* Status drives saturation; deadline / appointment / milestone all
       collapse to the same hue per status. Accessibility-first. */
    --chart-mark-deadline: #0a3d62;
    --chart-mark-appointment: #0a3d62;
    --chart-mark-milestone: #0a3d62;
    --chart-mark-projected: #aaa;
    --chart-mark-overdue: #c0392b;
    --chart-mark-done: #1f7a3e;
    --chart-today-rule: #0a3d62;
}
.smart-timeline-chart[data-palette="print"] {
    /* B&W only; redactable / faxable. Projected uses the hatch pattern
       from <defs> so a colourless print still distinguishes prediction
       from actual. */
    --chart-mark-deadline: #000;
    --chart-mark-appointment: #555;
    --chart-mark-milestone: #000;
    --chart-mark-projected: #777;
    --chart-mark-overdue: #000;
    --chart-mark-done: #000;
    --chart-today-rule: #000;
    --chart-grid-line: #ccc;
    --chart-lane-label: #000;
    --chart-tick-label: #000;
}
.smart-timeline-chart[data-palette="print"] .chart-mark--deadline.chart-mark--status-open .chart-mark-dot {
    /* Open deadlines in print mode keep the ring affordance — fill
       with white so the dot is hollow regardless of background. */
    fill: #fff;
}

/* Export dropdown — uses native <details>/<summary> so it's keyboard-
   accessible without JS. The menu only renders when open=true, which
   the <details> element manages itself. */
.smart-timeline-chart-export {
    position: relative;
    display: inline-block;
}
.smart-timeline-chart-export > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-bg, #fff);
    cursor: pointer;
    list-style: none;
    font-size: 0.85rem;
}
.smart-timeline-chart-export > summary::-webkit-details-marker {
    display: none;
}
.smart-timeline-chart-export[open] > summary {
    background: var(--color-bg-subtle, #f5f5f5);
    border-color: var(--color-accent, #c6f41c);
}
.smart-timeline-chart-export-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 100;
    min-width: 240px;
}
.smart-timeline-chart-export-menu li {
    margin: 0;
}
.smart-timeline-chart-export-menu button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.45rem 1rem;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.smart-timeline-chart-export-menu button:hover,
.smart-timeline-chart-export-menu button:focus-visible {
    background: var(--color-bg-subtle, #f5f5f5);
    outline: none;
}
.smart-timeline-chart-export-divider {
    height: 1px;
    background: var(--color-border, #e0e0e0);
    margin: 0.35rem 0.5rem;
}

/* Palette picker chip group on the chart page. */
.smart-timeline-chart-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-bg, #fff);
    font-size: 0.85rem;
}
.smart-timeline-chart-picker label {
    color: var(--color-text-muted, #777);
}
.smart-timeline-chart-picker select {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
}
.smart-timeline-chart-picker select:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 2px;
}
.smart-timeline-chart-range-custom input[type="date"] {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 0 0.25rem;
}

/* Lane filter chip group — rendered dynamically after the chart fetches
   lanes from the server. Hidden when the projection has 0-1 lanes. */
.smart-timeline-chart-lanes-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0.75rem;
}
.smart-timeline-chart-lanes-label {
    color: var(--color-text-muted, #777);
    font-size: 0.85rem;
    margin-right: 0.25rem;
}
.smart-timeline-chart-lane-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-bg-subtle, #f5f5f5);
    color: var(--color-text-muted, #777);
    font-size: 0.8rem;
    cursor: pointer;
}
.smart-timeline-chart-lane-chip[aria-pressed="true"] {
    background: var(--color-bg-lime-tint, #ecfbb6);
    border-color: var(--color-accent, #c6f41c);
    color: var(--hlc-midnight, #1a2233);
    font-weight: 500;
}
.smart-timeline-chart-lane-chip:focus-visible {
    outline: 2px solid var(--color-accent, #c6f41c);
    outline-offset: 2px;
}

/* Permalink copy button — sits alongside palette / density / range
   selects on the control row. Flash green for success / amber for
   failure for 1.8s after a click. */
.smart-timeline-chart-copylink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 999px;
    background: var(--color-bg, #fff);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.smart-timeline-chart-copylink:hover,
.smart-timeline-chart-copylink:focus-visible {
    background: var(--color-bg-subtle, #f5f5f5);
    outline: none;
}
.smart-timeline-chart-copylink.is-success {
    background: var(--color-bg-lime-tint, #ecfbb6);
    border-color: var(--color-accent, #c6f41c);
}
.smart-timeline-chart-copylink.is-error {
    background: #fff4e5;
    border-color: #f5a623;
}

/* ---- Print stylesheet (t-paliad-177 Slice 2, design §7.4) ----
   When the user hits "PDF (Drucken)", the browser invokes print() and
   reads these rules. Strategy:
     - Force the print palette regardless of the user's screen choice
       (B&W shows nothing the user didn't intend, redactable).
     - Hide chrome (sidebar, footer, header, bottom-nav, control chips).
     - Let the chart fill landscape A4 width via the named `paliad-landscape`
       page declared in the universal print block (t-paliad-233).
     - Add a printed header with project meta on the chart page. */
@media print {
    body.has-sidebar > aside.sidebar,
    body.has-sidebar > .bottom-nav,
    body.has-sidebar > footer,
    body.has-sidebar .paliadin-widget,
    .smart-timeline-chart-page .back-link,
    .smart-timeline-chart-controls,
    .smart-timeline-chart-page .entity-loading,
    .smart-timeline-chart-undated-hint {
        display: none !important;
    }
    .smart-timeline-chart-page main,
    .smart-timeline-chart-page .container {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .smart-timeline-chart-host {
        border: none !important;
        overflow: visible !important;
    }
    .smart-timeline-chart {
        /* Force the print palette tokens regardless of data-palette. */
        --chart-mark-deadline: #000 !important;
        --chart-mark-appointment: #555 !important;
        --chart-mark-milestone: #000 !important;
        --chart-mark-projected: #777 !important;
        --chart-mark-overdue: #000 !important;
        --chart-mark-done: #000 !important;
        --chart-today-rule: #000 !important;
        --chart-grid-line: #ccc !important;
        --chart-lane-label: #000 !important;
        --chart-tick-label: #000 !important;
    }
    .smart-timeline-chart .chart-mark--deadline.chart-mark--status-open .chart-mark-dot {
        fill: #fff !important;
        stroke: #000 !important;
    }
    .smart-timeline-chart-header h1 {
        font-size: 1.2rem;
    }
}

/* ============================================================================
   t-paliad-192 Slice 11b — Admin rule-editor UI.
   List page + edit page + export page. Uses paliad's existing token set
   (--color-bg-*, --color-text-*) so the styling matches the rest of the
   admin surface automatically across light/dark/auto themes.
   ============================================================================ */

.admin-rules-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.admin-rules-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border, #d4d4d8);
  margin: 1rem 0 1.5rem 0;
}

.admin-rules-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font: inherit;
  color: var(--color-text-muted, #71717a);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-rules-tab.active {
  color: var(--color-text, inherit);
  border-bottom-color: var(--color-accent, #BFF355);
  font-weight: 500;
}

.admin-rules-tab-badge {
  display: inline-block;
  background: var(--status-red-bg, #fee2e2);
  color: var(--status-red-fg, #991b1b);
  border-radius: 999px;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
}

.admin-rules-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.admin-rules-filter label,
.admin-rules-filter-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-select,
.admin-rules-input {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: 4px;
  background: var(--color-bg, #fff);
  color: var(--color-text, inherit);
  font: inherit;
  box-sizing: border-box;
}

.admin-rules-filter-chips .admin-rules-chips {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.admin-rules-chip {
  background: transparent;
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-chip.active {
  background: var(--color-accent, #BFF355);
  border-color: var(--color-accent, #BFF355);
  color: var(--color-accent-dark);
}

.admin-rules-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.admin-rules-pill-draft {
  background: #fef3c7;
  color: #92400e;
}

.admin-rules-pill-published {
  background: #dcfce7;
  color: #166534;
}

.admin-rules-pill-archived {
  background: #f1f5f9;
  color: #475569;
}

.admin-rules-priority {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.admin-rules-priority-mandatory { color: #b91c1c; }
.admin-rules-priority-recommended { color: #b45309; }
.admin-rules-priority-optional { color: #475569; }
.admin-rules-priority-informational { color: #64748b; font-style: italic; }

.admin-rules-table-wrap {
  margin-top: 0.5rem;
}

.admin-rules-col-code code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.85em;
}

.admin-rules-col-modified {
  white-space: nowrap;
  font-size: 0.85em;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-loading {
  color: var(--color-text-muted, #71717a);
  font-style: italic;
  padding: 1rem;
  text-align: center;
}

/* Orphan cards */

.admin-rules-orphans {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-rules-orphan-card {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: 6px;
  padding: 1rem;
}

.admin-rules-orphan-header {
  margin-bottom: 0.75rem;
}

.admin-rules-orphan-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.admin-rules-orphan-metas {
  font-size: 0.85rem;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-orphan-meta + .admin-rules-orphan-meta::before {
  content: " · ";
  margin: 0 0.25rem;
}

.admin-rules-orphan-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-rules-orphan-pick {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--color-bg-subtle, #f4f4f5);
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-width: 160px;
}

.admin-rules-orphan-pick:hover {
  background: var(--color-bg-hover, #e4e4e7);
  border-color: var(--color-accent, #BFF355);
}

.admin-rules-orphan-pick-name {
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.admin-rules-orphan-empty {
  font-size: 0.9rem;
  color: var(--color-text-muted, #71717a);
  font-style: italic;
}

/* Hints */

.admin-rules-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted, #71717a);
  margin-top: 0.25rem;
}

.admin-rules-hint-error {
  color: #b91c1c;
}

.admin-rules-hint-ok {
  color: #166534;
}

/* Edit page */

.admin-rules-edit-header h1 {
  margin: 0.25rem 0;
}

.admin-rules-breadcrumb {
  font-size: 0.85rem;
  margin: 0 0 0.5rem 0;
}

.admin-rules-edit-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.admin-rules-edit-uuid {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media (max-width: 1000px) {
  .admin-rules-edit-grid {
    grid-template-columns: 1fr;
  }
}

.admin-rules-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.admin-rules-fieldset {
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.admin-rules-fieldset legend {
  padding: 0 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.admin-rules-edit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

.admin-rules-edit-row:last-child {
  margin-bottom: 0;
}

.admin-rules-edit-form .form-field {
  display: flex;
  flex-direction: column;
}

.admin-rules-edit-form .form-field label {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-checkbox-field {
  justify-content: flex-end;
}

.admin-rules-checkbox-field label {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text, inherit) !important;
  font-size: 0.9rem !important;
  margin: 0 !important;
}

.admin-rules-code-input {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
}

.admin-rules-duration-row {
  display: flex;
  gap: 0.5rem;
}

.admin-rules-duration-row input {
  flex: 1 1 60%;
}

.admin-rules-duration-row select {
  flex: 1 1 40%;
}

/* Side cards */

.admin-rules-edit-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-rules-edit-card {
  background: var(--color-bg-subtle, #f9fafb);
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: 6px;
  padding: 1rem;
}

.admin-rules-edit-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

.admin-rules-preview-result {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.admin-rules-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-rules-preview-list li {
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--color-border, #e4e4e7);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.admin-rules-preview-name {
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.admin-rules-preview-date {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.85em;
  color: var(--color-text-muted, #71717a);
}

/* Audit timeline */

.admin-rules-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow-y: auto;
}

.admin-rules-audit-entry {
  border-left: 3px solid var(--color-accent, #BFF355);
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-bg, #fff);
  border-radius: 0 4px 4px 0;
}

.admin-rules-audit-action-publish { border-left-color: #16a34a; }
.admin-rules-audit-action-archive { border-left-color: #64748b; }
.admin-rules-audit-action-restore { border-left-color: #2563eb; }
.admin-rules-audit-action-delete { border-left-color: #b91c1c; }

.admin-rules-audit-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-rules-audit-action {
  font-weight: 500;
  font-size: 0.85rem;
  text-transform: capitalize;
}

.admin-rules-audit-time {
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-audit-badge {
  background: #dbeafe;
  color: #1e40af;
  font-size: 0.7rem;
  padding: 0 0.4rem;
  border-radius: 4px;
}

.admin-rules-audit-actor {
  font-size: 0.8rem;
  color: var(--color-text-muted, #71717a);
}

.admin-rules-audit-reason {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  font-style: italic;
}

.admin-rules-audit-empty {
  padding: 1rem;
  text-align: center;
  color: var(--color-text-muted, #71717a);
  font-style: italic;
}

/* Action bar */

.admin-rules-actionbar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border, #d4d4d8);
}

/* Date-range picker (t-paliad-248) ------------------------------------
   Symmetric past/future chip fan around an ALLES centre, in a popover
   anchored under a closed-state trigger button. Reuses .agenda-chip /
   .agenda-chip-active for the fan chips so the active state lights up
   with the same lime accent as every other paliad filter-chip. The
   popover scaffold reuses .multi-panel for shadow + border + z-index,
   and .multi-anchor for the top:100% / left:0 positioning anchor. */

.date-range-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.date-range-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.date-range-trigger:hover {
  background: var(--color-overlay-subtle);
  border-color: var(--color-accent-light);
}
.date-range-trigger:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.date-range-trigger[aria-expanded="true"] {
  background: var(--color-bg-lime-tint);
  border-color: var(--color-accent);
}

.date-range-trigger-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.date-range-trigger-label {
  white-space: nowrap;
}

.date-range-trigger-chev {
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
  margin-left: 0.1rem;
}

.date-range-panel {
  /* Inherits .multi-panel positioning + border + shadow. Sized so the
     3-column grid holds the widest chip text ("Ganze Vergangenheit")
     without wrapping while staying within the viewport on tablets. */
  width: 34rem;
  max-width: calc(100vw - 1rem);
  top: 100%;
  left: 0;
  padding: 0.75rem;
  gap: 0.75rem;
}

.date-range-grid {
  /* Past / NOW / Future as three equal vertical columns. Each column
     is a top-aligned chip stack so closeness-to-NOW (closest at top,
     farthest at bottom) reads spatially. */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

.date-range-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.date-range-col--now {
  align-items: stretch;
}

.date-range-col-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #71717a);
  text-align: center;
  padding-bottom: 0.15rem;
}

.date-range-col-heading--glyph {
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted, #71717a);
}

.date-range-chip {
  /* .agenda-chip provides bg/border/radius/typography; in the
     3-column stack each chip fills its column so the closeness-to-NOW
     ordering reads as a single vertical column rather than a ragged
     row. */
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  width: 100%;
  text-align: center;
}

.date-range-chip--custom {
  margin-top: 0.25rem;
}

.date-range-custom {
  border-top: 1px solid var(--color-border);
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.date-range-custom-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
}

.date-range-custom-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8rem;
  color: var(--color-text);
}

.date-range-custom-label {
  font-weight: 500;
  color: var(--color-text-muted, #71717a);
}

.date-range-custom-from,
.date-range-custom-to {
  appearance: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  color: var(--color-text);
  color-scheme: light dark;
}
.date-range-custom-from:focus-visible,
.date-range-custom-to:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.date-range-custom-apply,
.date-range-custom-cancel {
  appearance: none;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.date-range-custom-apply {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}
.date-range-custom-apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.date-range-custom-apply:hover:not(:disabled) {
  background: var(--color-accent-light);
}
.date-range-custom-cancel:hover {
  background: var(--color-overlay-subtle);
}

.date-range-custom-error {
  width: 100%;
  font-size: 0.75rem;
  color: var(--status-red-fg, #b91c1c);
}

/* Mobile: stack the 3 columns vertically (one column per row),
   preserving the closeness-to-NOW sort within each column. */
@media (max-width: 540px) {
  .date-range-panel {
    width: calc(100vw - 1rem);
  }
  .date-range-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}

/* === Fristenrechner overhaul (t-paliad-323 Slice S2) =================
 *
 * Result-view surface mounted under `?overhaul=1`. Sticky trigger card
 * on top, four priority groups of follow-up rules, write-back footer
 * conditional on `?project=<uuid>`. See
 * docs/design-fristenrechner-overhaul-2026-05-26.md §4.
 * ==================================================================== */

.fristen-overhaul-root {
  display: block;
  margin-top: 1.5rem;
}

.fristen-overhaul-loading,
.fristen-overhaul-error,
.fristen-overhaul-empty,
.fristen-overhaul-nudge {
  padding: 0.9rem 1.1rem;
  border-radius: 0.6rem;
  margin: 0.5rem 0;
  background: #f4f4f0;
  border: 1px solid #e3e3da;
  color: #444;
  font-size: 0.95rem;
}

.fristen-overhaul-error {
  background: #fde9e7;
  border-color: #f0b8b1;
  color: #732f25;
}

.fristen-overhaul-nudge {
  background: #f8fbe8;
  border-color: #d2e08b;
  color: #4d5a2a;
}

.fristen-overhaul-trigger {
  background: #fff;
  border: 1px solid #d8d8cf;
  border-radius: 0.8rem;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.fristen-overhaul-trigger-header {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.fristen-overhaul-kind-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.fristen-overhaul-trigger-title {
  margin: 0;
  font-size: 1.25rem;
  color: #1f1f1f;
}

.fristen-overhaul-trigger-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #555;
}

.fristen-overhaul-trigger-code,
.fristen-overhaul-trigger-pt,
.fristen-overhaul-trigger-juris {
  padding: 0.15rem 0.55rem;
  border-radius: 0.4rem;
  background: #f1f1eb;
  color: #555;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem;
}

.fristen-overhaul-trigger-juris {
  background: #d3edb7;
  color: #38531a;
  font-family: inherit;
  font-weight: 600;
}

.fristen-overhaul-trigger-date {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.fristen-overhaul-trigger-date-label {
  font-size: 0.9rem;
  color: #555;
}

.fristen-overhaul-trigger-date-input {
  padding: 0.35rem 0.55rem;
  font-size: 0.95rem;
  border: 1px solid #c8c8be;
  border-radius: 0.4rem;
  background: #fff;
}

.fristen-overhaul-groups {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.fristen-overhaul-group {
  background: #fff;
  border: 1px solid #e2e2d6;
  border-radius: 0.7rem;
  padding: 0.9rem 1.1rem;
}

.fristen-overhaul-group--mandatory   { border-left: 4px solid #c6f41c; }
.fristen-overhaul-group--recommended { border-left: 4px solid #99c4e3; }
.fristen-overhaul-group--optional    { border-left: 4px solid #d4d4cc; }
.fristen-overhaul-group--conditional { border-left: 4px solid #f5b66a; }

.fristen-overhaul-group-title {
  margin: 0 0 0.6rem 0;
  font-size: 1rem;
  color: #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fristen-overhaul-rule-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fristen-overhaul-rule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  background: #fafaf6;
  border: 1px solid #ececde;
  border-radius: 0.5rem;
}

.fristen-overhaul-rule.is-disabled {
  opacity: 0.7;
}

.fristen-overhaul-rule-check {
  display: flex;
  align-items: center;
  height: 1.4rem;
  cursor: pointer;
}

.fristen-overhaul-rule-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.fristen-overhaul-rule-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.fristen-overhaul-rule-title {
  font-weight: 600;
  color: #1f1f1f;
}

.fristen-overhaul-rule-spawn,
.fristen-overhaul-rule-cond {
  font-size: 0.75rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.35rem;
  background: #f3e5cf;
  color: #6e4a1d;
  white-space: nowrap;
}

.fristen-overhaul-rule-cond {
  background: #fff2d6;
  color: #7a570e;
}

.fristen-overhaul-rule-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #555;
}

.fristen-overhaul-rule-duration {
  color: #2a2a2a;
}

.fristen-overhaul-rule-party {
  padding: 0.05rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.75rem;
  background: #eef2e3;
  color: #4a5d2a;
}

.fristen-overhaul-rule-party--claimant  { background: #d2e9ff; color: #1c4567; }
.fristen-overhaul-rule-party--defendant { background: #ffe2d7; color: #6e2c14; }
.fristen-overhaul-rule-party--court     { background: #f0e2f7; color: #4f2c66; }

.fristen-overhaul-rule-source {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.8rem;
  color: #444;
}

a.fristen-overhaul-rule-source {
  color: #2d4f1a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fristen-overhaul-rule-notes {
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #555;
}

.fristen-overhaul-rule-notes summary {
  cursor: pointer;
  color: #666;
}

.fristen-overhaul-rule-date-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.95rem;
  min-width: 6.5rem;
}

.fristen-overhaul-rule-date {
  font-weight: 600;
  color: #1f1f1f;
}

.fristen-overhaul-rule-date--unknown {
  color: #999;
  font-weight: 400;
}

.fristen-overhaul-rule-court-set {
  color: #6e4a1d;
  font-style: italic;
  font-size: 0.85rem;
}

.fristen-overhaul-rule-date-input {
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
  border: 1px solid #c8c8be;
  border-radius: 0.3rem;
  background: #fff;
}

.fristen-overhaul-rule-edit-date {
  border: 0;
  background: transparent;
  color: #4a6f1f;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 0.3rem;
}

.fristen-overhaul-rule-edit-date:hover {
  background: #eef4dd;
}

.fristen-overhaul-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2rem;
  padding: 0.9rem 1.1rem;
  background: #f7fbe6;
  border: 1px solid #d3e08b;
  border-radius: 0.7rem;
}

.fristen-overhaul-footer-count {
  font-size: 0.95rem;
  color: #3d501c;
  font-weight: 500;
}

.fristen-overhaul-footer-cta {
  /* leans on btn-primary / btn-cta-lime classes from global */
}

.fristen-overhaul-msg {
  margin-top: 0.8rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 0.4rem;
}

.fristen-overhaul-msg.form-msg-ok    { background: #e7f4d6; color: #3a5113; }
.fristen-overhaul-msg.form-msg-error { background: #fde9e7; color: #732f25; }

@media (max-width: 600px) {
  .fristen-overhaul-rule {
    grid-template-columns: auto 1fr;
  }
  .fristen-overhaul-rule-date-cell {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    min-width: 0;
  }
}

/* === Fristenrechner overhaul Mode A + mode tabs (t-paliad-323 S3) ===
 *
 * Mode tab pair + filter strip + search box + result list per
 * docs/design-fristenrechner-overhaul-2026-05-26.md §3.1.
 * Section-split visual hierarchy per m §11.Q3: filter strip on top
 * ("Filter (eingrenzen)" header), result list below (clicking a row
 * IS the qualifier commit).
 * ==================================================================== */

.fristen-mode-tabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem 0;
  border-bottom: 2px solid #e3e3da;
}

.fristen-mode-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: #555;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: 0.4rem 0.4rem 0 0;
}

.fristen-mode-tab:hover {
  background: #f5f5ef;
  color: #1f1f1f;
}

.fristen-mode-tab.is-active {
  color: #2a2a2a;
  border-bottom-color: #c6f41c;
  background: #fbfdf3;
}

.fristen-mode-tab-icon {
  font-size: 1.1rem;
}

.fristen-mode-tab-label {
  font-weight: 500;
}

.fristen-mode-a-root {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fristen-mode-a-filters {
  background: #f7f8f2;
  border: 1px solid #e2e3d7;
  border-radius: 0.7rem;
  padding: 0.8rem 1rem;
}

.fristen-mode-a-filters-header {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #6e7256;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.fristen-mode-a-chip-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.fristen-mode-a-axis-label {
  font-size: 0.85rem;
  color: #555;
  min-width: 7rem;
  font-weight: 500;
}

.fristen-mode-a-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.fristen-mode-a-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid #d4d4c9;
  background: #fff;
  color: #2a2a2a;
  border-radius: 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.fristen-mode-a-chip:hover {
  border-color: #b9c98f;
  background: #f6fae5;
}

.fristen-mode-a-chip.is-active {
  background: #d8ed90;
  border-color: #98b545;
  color: #2c3d10;
  font-weight: 600;
}

.fristen-mode-a-chip-icon {
  font-size: 0.95rem;
}

.fristen-mode-a-chip-loading,
.fristen-mode-a-chip-empty {
  color: #888;
  font-size: 0.85rem;
  font-style: italic;
}

.fristen-mode-a-inbox {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #d8d8cd;
}

.fristen-mode-a-inbox-summary {
  cursor: pointer;
  color: #5f664a;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  user-select: none;
}

.fristen-mode-a-inbox-summary:hover {
  color: #2a2a2a;
}

.fristen-mode-a-search {
  background: #fff;
  border: 1px solid #d8d8ce;
  border-radius: 0.7rem;
  padding: 0.6rem 0.9rem;
}

.fristen-mode-a-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.fristen-mode-a-search-icon {
  color: #888;
}

.fristen-mode-a-search-input {
  flex: 1 1 auto;
  border: 0;
  outline: none;
  font-size: 1rem;
  background: transparent;
  padding: 0.3rem 0;
  color: #1f1f1f;
}

.fristen-mode-a-results {
  background: #fff;
  border: 1px solid #e0e0d4;
  border-radius: 0.7rem;
  padding: 0.7rem 0.9rem;
}

.fristen-mode-a-results-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.fristen-mode-a-results-title {
  font-weight: 600;
  color: #2a2a2a;
}

.fristen-mode-a-results-count {
  font-size: 0.85rem;
  color: #777;
}

.fristen-mode-a-result-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 60vh;
  overflow-y: auto;
}

.fristen-mode-a-result {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  background: #fafaf6;
  border: 1px solid #ececde;
  border-radius: 0.5rem;
  cursor: pointer;
}

.fristen-mode-a-result:hover,
.fristen-mode-a-result:focus {
  background: #f1f7d8;
  border-color: #c2d182;
  outline: none;
}

.fristen-mode-a-result-icon {
  font-size: 1.3rem;
}

.fristen-mode-a-result-body {
  min-width: 0;
}

.fristen-mode-a-result-title {
  font-weight: 600;
  color: #1f1f1f;
}

.fristen-mode-a-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.8rem;
  color: #555;
  margin-top: 0.2rem;
}

.fristen-mode-a-result-pt {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  padding: 0.05rem 0.45rem;
  background: #efefe6;
  border-radius: 0.3rem;
}

.fristen-mode-a-result-pt-name {
  color: #555;
}

.fristen-mode-a-result-juris {
  padding: 0.05rem 0.45rem;
  background: #d3edb7;
  color: #38531a;
  border-radius: 0.3rem;
  font-weight: 600;
}

.fristen-mode-a-result-followups {
  color: #4a6f1f;
  font-weight: 500;
}

.fristen-mode-a-result-cta {
  color: #88a554;
  font-size: 1.2rem;
}

.fristen-mode-a-result-loading,
.fristen-mode-a-result-empty,
.fristen-mode-a-result-error {
  list-style: none;
  padding: 0.7rem 0.5rem;
  color: #888;
  font-style: italic;
  font-size: 0.9rem;
}

.fristen-mode-a-result-error {
  color: #732f25;
}

@media (max-width: 600px) {
  .fristen-mode-a-axis-label {
    min-width: 0;
    width: 100%;
  }
  .fristen-mode-a-result {
    grid-template-columns: auto 1fr;
  }
  .fristen-mode-a-result-cta {
    grid-column: 1 / -1;
    text-align: right;
  }
}

/* === Fristenrechner overhaul Mode B — wizard (t-paliad-323 S4) ======
 *
 * 3-5 row stack landing on a procedural_event. Row badge "Filter" vs
 * "Qualifier" per m §11.Q3; "aus Akte" / "implizit" annotations per
 * §11.Q10 (preserve compatible downstream picks on back-nav).
 * ==================================================================== */

.fristen-wizard-root {
  background: #fff;
  border: 1px solid #e0e0d4;
  border-radius: 0.7rem;
  padding: 1rem 1.1rem;
}

.fristen-wizard-header {
  margin-bottom: 0.7rem;
}

.fristen-wizard-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.15rem;
  color: #2a2a2a;
}

.fristen-wizard-hint {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}

.fristen-wizard-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.fristen-wizard-row {
  background: #fafaf6;
  border: 1px solid #e0e0d4;
  border-radius: 0.6rem;
  padding: 0.55rem 0.7rem;
}

.fristen-wizard-row.is-active {
  border-color: #b1c468;
  box-shadow: 0 0 0 2px rgba(198, 244, 28, 0.15);
}

.fristen-wizard-row.is-from-project {
  background: #f4f8e0;
}

.fristen-wizard-row.is-implicit {
  opacity: 0.85;
}

.fristen-wizard-row-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fristen-wizard-row-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #c6f41c;
  color: #2a2a2a;
  font-weight: 600;
  font-size: 0.85rem;
}

.fristen-wizard-row-badge {
  font-size: 0.7rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

.fristen-wizard-row-badge--filter    { background: #d6e4f0; color: #1c4567; }
.fristen-wizard-row-badge--qualifier { background: #f5e1a8; color: #6c4905; }

.fristen-wizard-row-label {
  font-weight: 500;
  color: #2a2a2a;
}

.fristen-wizard-row-anno {
  font-size: 0.75rem;
  color: #5d6e2a;
  background: #ebf4c9;
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
}

.fristen-wizard-row-answer {
  margin-left: auto;
  color: #1f1f1f;
  font-weight: 500;
}

.fristen-wizard-row-edit {
  background: transparent;
  border: 0;
  color: #4a6f1f;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.3rem;
}

.fristen-wizard-row-edit:hover {
  background: #eef4dd;
}

.fristen-wizard-row-body {
  margin-top: 0.55rem;
}

.fristen-wizard-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.fristen-wizard-empty,
.fristen-wizard-probe {
  font-size: 0.85rem;
  color: #888;
  font-style: italic;
}

@media (max-width: 600px) {
  .fristen-wizard-row-answer {
    margin-left: 0;
    width: 100%;
  }
}