/* ==========================================================================
   Launch-Pad design tokens
   Palette is taken from the reference timeline: ink blue = active work,
   amber = paused. Everything else stays quiet so those two colours carry meaning.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
  --lp-ink: #1f3a68;          /* active work, primary actions */
  --lp-ink-strong: #152a4d;
  --lp-amber: #e08a00;        /* paused periods */
  --lp-moss: #2e7d5b;         /* completed */
  --lp-rail: #13233f;         /* navigation rail */
  --lp-rail-text: #c9d3e6;
  --lp-rail-active: #ffffff;
  --lp-bg: #f2f4f7;
  --lp-surface: #ffffff;
  --lp-line: #dde2ea;
  --lp-text: #1b2333;
  --lp-muted: #5b6577;
  --lp-focus: #e08a00;
  --lp-radius-sm: 4px;
  --lp-radius: 8px;
  --lp-rail-width: 248px;
  --lp-rail-collapsed: 64px;
  --lp-font: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

[data-bs-theme="dark"] {
  --lp-ink: #5b84cc;
  --lp-ink-strong: #7a9fe0;
  --lp-amber: #f0a43a;
  --lp-moss: #4fae86;
  --lp-rail: #0a111e;
  --lp-rail-text: #a9b6cc;
  --lp-bg: #0f1624;
  --lp-surface: #172133;
  --lp-line: #29354a;
  --lp-text: #e4e9f2;
  --lp-muted: #95a1b6;
}

html, body {
  font-family: var(--lp-font);
  background: var(--lp-bg);
  color: var(--lp-text);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.btn-primary {
  --bs-btn-bg: var(--lp-ink);
  --bs-btn-border-color: var(--lp-ink);
  --bs-btn-hover-bg: var(--lp-ink-strong);
  --bs-btn-hover-border-color: var(--lp-ink-strong);
  --bs-btn-active-bg: var(--lp-ink-strong);
  --bs-btn-disabled-bg: var(--lp-ink);
  --bs-btn-disabled-border-color: var(--lp-ink);
}
.btn-outline-primary {
  --bs-btn-color: var(--lp-ink);
  --bs-btn-border-color: var(--lp-ink);
  --bs-btn-hover-bg: var(--lp-ink);
  --bs-btn-hover-border-color: var(--lp-ink);
}
.btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 38px; }

/* Visible, consistent keyboard focus everywhere. */
:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus {
  outline: 3px solid var(--lp-focus);
  outline-offset: 2px;
  box-shadow: none;
}
h1:focus { outline: none; }

.lp-skip-link {
  position: absolute; left: .5rem; top: -3rem; z-index: 1100;
  background: var(--lp-surface); color: var(--lp-text); padding: .5rem .75rem; border-radius: var(--lp-radius-sm);
}
.lp-skip-link:focus { top: .5rem; }

.lp-icon { flex: none; }
.lp-muted { color: var(--lp-muted); }
.lp-small { font-size: .85rem; }
.lp-strong { font-weight: 600; }
.lp-strong-link { font-weight: 600; color: var(--lp-text); text-decoration: none; }
.lp-strong-link:hover { color: var(--lp-ink); text-decoration: underline; }

/* ---------- Brand mark ---------- */
.lp-brandmark-active { fill: var(--lp-ink); }
.lp-brandmark-paused { fill: var(--lp-amber); }
.lp-rail .lp-brandmark-active { fill: #8fb0ea; }

/* ==========================================================================
   Shell: rail + topbar + content. CSS-only toggle (#lp-nav-toggle).
   ========================================================================== */
.lp-shell { min-height: 100vh; display: flex; }
.lp-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

.lp-rail {
  width: var(--lp-rail-width);
  background: var(--lp-rail);
  color: var(--lp-rail-text);
  flex: none;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
  transition: width .18s ease;
  z-index: 1040;
}
.lp-scrim { display: none; }
.lp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.lp-rail-brand { padding: 1rem 1rem .75rem; }
.lp-brand-link { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.lp-brand-name { font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }

.lp-nav { display: flex; flex-direction: column; gap: 2px; padding: .25rem .5rem 1rem; }
.lp-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-nav-section { font-size: .78rem; color: #8492ab; margin: 1rem .75rem .35rem; }

.lp-nav .lp-nav-link {
  display: flex; align-items: center; gap: .7rem;
  min-height: 40px; padding: .4rem .75rem;
  border-radius: var(--lp-radius-sm);
  color: var(--lp-rail-text); text-decoration: none;
  border-left: 3px solid transparent;
}
.lp-nav .lp-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lp-nav .lp-nav-link.active {
  background: rgba(255, 255, 255, .09);
  color: var(--lp-rail-active);
  border-left-color: var(--lp-amber);
}
.lp-nav-create { margin-top: .5rem; color: #8fb0ea !important; }
.lp-ws-initial {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center;
  border-radius: 4px; background: #2a4170; color: #fff; font-size: .75rem; font-weight: 600;
}

.lp-topbar {
  display: flex; align-items: center; gap: .75rem;
  height: 56px; padding: 0 1rem;
  background: var(--lp-surface); border-bottom: 1px solid var(--lp-line);
  position: sticky; top: 0; z-index: 1030;
}
.lp-topbar-search { flex: 1; max-width: 520px; }
.lp-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.lp-icon-button {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: var(--lp-radius-sm); background: transparent; color: var(--lp-text); cursor: pointer;
}
.lp-icon-button:hover { background: var(--lp-bg); }
.lp-user-chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; min-height: 40px;
  color: var(--lp-text); text-decoration: none; border-radius: var(--lp-radius-sm);
}
.lp-user-chip:hover { background: var(--lp-bg); }
.lp-user-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lp-content { padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; max-width: 1280px; width: 100%; }

/* Desktop: checkbox collapses the rail to icons. */
@media (min-width: 992px) {
  .lp-nav-toggle:checked ~ .lp-rail { width: var(--lp-rail-collapsed); }
  .lp-nav-toggle:checked ~ .lp-rail .lp-rail-label { display: none; }
  .lp-nav-toggle:checked ~ .lp-rail .lp-nav-link { justify-content: center; padding-inline: 0; }
}

/* Tablet & mobile: rail becomes off-canvas. */
@media (max-width: 991.98px) {
  .lp-rail {
    position: fixed; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .lp-nav-toggle:checked ~ .lp-rail { transform: none; }
  .lp-nav-toggle:checked ~ .lp-scrim {
    display: block; position: fixed; inset: 0; background: rgba(8, 14, 26, .5); z-index: 1035;
  }
  .lp-user-name { display: none; }
  .lp-topbar-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-rail { transition: none; }
}

/* ==========================================================================
   Page furniture
   ========================================================================== */
.lp-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.lp-page-title { font-size: 1.6rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.lp-page-subtitle { margin: .25rem 0 0; color: var(--lp-muted); max-width: 70ch; }
.lp-page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.lp-panel {
  background: var(--lp-surface); border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius); padding: 1.25rem;
}
.lp-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lp-panel-title { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; margin: 0; }
.lp-subheading { font-size: .95rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.lp-form-panel { max-width: 640px; }
.lp-form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.lp-alert { border-radius: var(--lp-radius-sm); }

.lp-overview { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1099.98px) { .lp-overview { grid-template-columns: 1fr; } }

.lp-table-wrap { overflow-x: auto; }
.lp-table { --bs-table-bg: transparent; margin-bottom: 0; }
.lp-table thead th { font-size: .82rem; font-weight: 600; color: var(--lp-muted); border-bottom-color: var(--lp-line); }
.lp-table td { border-color: var(--lp-line); }
.lp-desc { max-width: 48ch; font-size: .88rem; }
.lp-role-select { width: auto; min-width: 9.5rem; }

.lp-role {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 500;
  border: 1px solid var(--lp-line); color: var(--lp-muted);
}
.lp-role-owner { border-color: var(--lp-ink); color: var(--lp-ink); }
.lp-role-administrator { border-color: var(--lp-ink); color: var(--lp-ink); border-style: dashed; }

.lp-tier-pill {
  padding: .15rem .65rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--lp-ink); color: #fff;
}
.lp-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 0; }
.lp-facts dt { font-weight: 500; color: var(--lp-muted); }
.lp-facts dd { margin: 0; }
.lp-entitlements { list-style: none; margin: 0; padding: 0; }
.lp-entitlements li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-bottom: 1px solid var(--lp-line);
}
.lp-entitlements li:last-child { border-bottom: 0; }
.lp-entitlement-value { font-weight: 500; }

.lp-add-member { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--lp-line); }
.lp-add-member-fields { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.lp-add-member-submit { padding-top: 2rem; }
.lp-sim-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.lp-sim-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.lp-loading { display: flex; align-items: center; gap: .5rem; color: var(--lp-muted); padding: 1rem 0; }

.lp-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  padding: 2.5rem; background: var(--lp-surface); border: 1px dashed var(--lp-line); border-radius: var(--lp-radius);
  max-width: 640px;
}
.lp-empty-title { font-size: 1.2rem; font-weight: 600; margin: .5rem 0 0; }
.lp-empty-message { color: var(--lp-muted); margin: 0 0 .75rem; max-width: 60ch; }

.lp-ws-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.lp-ws-tile {
  display: flex; flex-direction: column; gap: .75rem; min-height: 110px; padding: 1rem 1.1rem;
  background: var(--lp-surface); border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-ink);
  border-radius: var(--lp-radius-sm); color: var(--lp-text); text-decoration: none;
}
.lp-ws-tile:hover { border-color: var(--lp-ink); }
.lp-ws-tile-name { font-weight: 600; font-size: 1.05rem; }
.lp-ws-tile-meta { margin-top: auto; display: flex; gap: .75rem; align-items: center; color: var(--lp-muted); font-size: .88rem; }

/* ---------- Signed-out hero: the timeline is the hero ---------- */
.lp-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 3rem; align-items: center; padding: 2rem 0; }
.lp-hero-title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 16ch; }
.lp-hero-lead { font-size: 1.1rem; color: var(--lp-muted); max-width: 46ch; margin-bottom: 1.5rem; }
.lp-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.lp-hero-timeline {
  margin: 0; padding: 1.25rem; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  display: flex; flex-direction: column; gap: .5rem;
}
.lp-demo-row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: .75rem; }
.lp-demo-id { font-size: .85rem; color: var(--lp-muted); }
.lp-demo-track {
  display: grid; grid-template-columns: repeat(25, 1fr); gap: 2px; height: 22px;
  background-image: linear-gradient(to right, var(--lp-line) 1px, transparent 1px);
  background-size: calc(100% / 25) 100%;
}
.lp-seg { height: 100%; border-radius: 2px; }
.lp-seg-active { background: var(--lp-ink); }
/* Paused uses colour AND a hatch pattern, so it never relies on colour alone. */
.lp-seg-paused {
  background-color: var(--lp-amber);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px);
}
.lp-demo-legend { display: flex; gap: 1.25rem; margin-top: .5rem; font-size: .85rem; color: var(--lp-muted); }
.lp-demo-legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.lp-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
@media (max-width: 899.98px) { .lp-hero { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Dialog ---------- */
.lp-dialog-backdrop { position: fixed; inset: 0; background: rgba(8, 14, 26, .55); z-index: 1060; }
.lp-dialog {
  position: fixed; z-index: 1061; left: 50%; top: 20vh; transform: translateX(-50%);
  width: min(440px, calc(100vw - 2rem));
  background: var(--lp-surface); color: var(--lp-text);
  border-radius: var(--lp-radius); padding: 1.5rem; border: 1px solid var(--lp-line);
}
.lp-dialog-title { font-size: 1.15rem; font-weight: 600; margin: 0 0 .5rem; }
.lp-dialog-body { color: var(--lp-muted); }
.lp-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* ---------- Toasts ---------- */
.lp-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; width: min(380px, calc(100vw - 2rem)); }
.lp-toast {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .75rem 1rem; border-radius: var(--lp-radius-sm);
  background: var(--lp-surface); color: var(--lp-text); border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-ink);
}
.lp-toast-success { border-left-color: var(--lp-moss); }
.lp-toast-error { border-left-color: #c0392b; }

/* ---------- Blazor framework UI (kept from the template, restyled) ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--lp-moss); }
.invalid { outline: 1px solid #c0392b; }
.validation-message { color: #c0392b; font-size: .88rem; margin-top: .25rem; }
.blazor-error-boundary { padding: 1rem; background: #c0392b; color: #fff; border-radius: var(--lp-radius-sm); }
.blazor-error-boundary::after { content: "Something went wrong in this part of the page."; }
#blazor-error-ui {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1090;
  padding: .75rem 1.25rem; background: #fff3cd; color: #3d2f00; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ==========================================================================
   Phase 2.1 — plans, buckets, profile
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --lp-plan-ink: #1f3a68;  --lp-plan-teal: #1c7c7d; --lp-plan-moss: #2e7d5b; --lp-plan-amber: #c77700;
  --lp-plan-rose: #b8456a; --lp-plan-plum: #6b4a9b; --lp-plan-slate: #56657a; --lp-plan-sand: #a07c3f;
}
[data-bs-theme="dark"] {
  --lp-plan-ink: #6f95d8;  --lp-plan-teal: #3fb3b0; --lp-plan-moss: #57b48b; --lp-plan-amber: #f0a43a;
  --lp-plan-rose: #e07b9c; --lp-plan-plum: #a98ad8; --lp-plan-slate: #93a3b8; --lp-plan-sand: #d2ac6b;
}
.lp-plan-ink { --lp-plan: var(--lp-plan-ink); }       .lp-plan-teal { --lp-plan: var(--lp-plan-teal); }
.lp-plan-moss { --lp-plan: var(--lp-plan-moss); }     .lp-plan-amber { --lp-plan: var(--lp-plan-amber); }
.lp-plan-rose { --lp-plan: var(--lp-plan-rose); }     .lp-plan-plum { --lp-plan: var(--lp-plan-plum); }
.lp-plan-slate { --lp-plan: var(--lp-plan-slate); }   .lp-plan-sand { --lp-plan: var(--lp-plan-sand); }
.lp-plan-border-ink { border-left-color: var(--lp-plan-ink) !important; }     .lp-plan-border-teal { border-left-color: var(--lp-plan-teal) !important; }
.lp-plan-border-moss { border-left-color: var(--lp-plan-moss) !important; }   .lp-plan-border-amber { border-left-color: var(--lp-plan-amber) !important; }
.lp-plan-border-rose { border-left-color: var(--lp-plan-rose) !important; }   .lp-plan-border-plum { border-left-color: var(--lp-plan-plum) !important; }
.lp-plan-border-slate { border-left-color: var(--lp-plan-slate) !important; } .lp-plan-border-sand { border-left-color: var(--lp-plan-sand) !important; }

.lp-plan-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--lp-plan, var(--lp-ink)); vertical-align: middle; }
.lp-plan-dot-lg { width: 18px; height: 18px; border-radius: 4px; }

/* Navigation: plans nested under their workspace */
.lp-nav-plans { padding-left: 1.6rem; margin: 2px 0 4px; }
.lp-nav .lp-nav-plan { min-height: 34px; font-size: .9rem; gap: .55rem; }
@media (min-width: 992px) {
  .lp-nav-toggle:checked ~ .lp-rail .lp-nav-plans { padding-left: 0; }
}

/* Workspace overview: plans */
.lp-plans-panel { margin-bottom: 1.25rem; }
.lp-plan-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.lp-plan-tile {
  display: flex; flex-direction: column; gap: .4rem; min-height: 96px; padding: .85rem 1rem;
  border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-ink); border-radius: var(--lp-radius-sm);
  background: var(--lp-surface); color: var(--lp-text); text-decoration: none;
}
.lp-plan-tile:hover { border-color: var(--lp-ink); }
.lp-plan-tile-name { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.lp-plan-tile-desc { color: var(--lp-muted); font-size: .88rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lp-plan-tile-meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: .75rem; color: var(--lp-muted); font-size: .82rem; }
.lp-plan-archived { opacity: .7; border-style: dashed; }

/* Plan header and view tabs */
.lp-plan-header { margin-bottom: 1rem; }
.lp-breadcrumb { font-size: .88rem; margin-bottom: .25rem; }
.lp-breadcrumb a { color: var(--lp-muted); text-decoration: none; }
.lp-breadcrumb a:hover { color: var(--lp-ink); text-decoration: underline; }
.lp-plan-title { display: flex; align-items: center; gap: .6rem; }
.lp-plan-dates { margin: .25rem 0 0; font-size: .9rem; }
.lp-view-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--lp-line); margin-bottom: 1.25rem; overflow-x: auto; }
.lp-view-tab {
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem; min-height: 40px; white-space: nowrap;
  color: var(--lp-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.lp-view-tab:hover { color: var(--lp-text); }
.lp-view-tab.active { color: var(--lp-text); font-weight: 600; border-bottom-color: var(--lp-amber); }
.lp-view-tab-disabled { opacity: .5; cursor: not-allowed; }
.lp-view-tab-end { margin-left: auto; }

/* Board */
.lp-board { display: flex; gap: .85rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.lp-bucket {
  flex: 0 0 280px; scroll-snap-align: start;
  background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); padding: .75rem;
}
.lp-bucket-header { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.lp-bucket-title { font-size: 1rem; font-weight: 600; margin: 0; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.lp-bucket-actions { display: flex; align-items: center; gap: .1rem; }
.lp-bucket-actions .btn-link { padding-inline: .35rem; text-decoration: none; }
.lp-icon-button-sm { width: 32px; height: 32px; font-size: 1.2rem; line-height: 1; }
.lp-icon-button:disabled { opacity: .35; cursor: default; }
.lp-bucket-body { display: flex; flex-direction: column; gap: .5rem; }
.lp-bucket-empty { margin: 0; padding: 1rem .5rem; color: var(--lp-muted); font-size: .85rem; text-align: center; border: 1px dashed var(--lp-line); border-radius: var(--lp-radius-sm); }
.lp-bucket-new { background: transparent; border-style: dashed; }
@media (max-width: 575.98px) {
  .lp-bucket { flex-basis: 86vw; }
}

/* Forms */
.lp-date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 575.98px) { .lp-date-pair { grid-template-columns: 1fr; } }
.lp-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.lp-swatch-option { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--lp-radius-sm); border: 2px solid transparent; cursor: pointer; }
.lp-swatch-option:has(.lp-swatch-input:checked) { border-color: var(--lp-text); }
.lp-swatch-option:has(.lp-swatch-input:focus-visible) { outline: 3px solid var(--lp-focus); outline-offset: 2px; }
.lp-settings-grid, .lp-profile { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1099.98px) { .lp-settings-grid, .lp-profile { grid-template-columns: 1fr; } }

/* ==========================================================================
   Phase 2.2 — tasks
   ========================================================================== */
:root, [data-bs-theme="light"] { --lp-danger: #b3261e; --lp-danger-bg: #fbe9e7; --lp-warn-bg: #fdf1dc; --lp-chip-bg: #eef1f5; }
[data-bs-theme="dark"] { --lp-danger: #f2a49d; --lp-danger-bg: #3a1d1b; --lp-warn-bg: #3a2c12; --lp-chip-bg: #222d40; }

.lp-board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.lp-bucket { background: var(--lp-bg); }
.lp-bucket-count { font-weight: 500; font-size: .8rem; color: var(--lp-muted); margin-left: .35rem; }

.lp-quick-add { display: flex; gap: .4rem; }
.lp-quick-add .form-control { min-height: 36px; }

.lp-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.lp-task-card {
  width: 100%; text-align: left; display: flex; flex-direction: column; gap: .45rem;
  padding: .65rem .75rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm);
  background: var(--lp-surface); color: var(--lp-text); cursor: pointer;
}
.lp-task-card:hover { border-color: var(--lp-ink); }
.lp-task-card-title { font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.lp-task-card-badges:empty { display: none; }
.lp-task-card-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.lp-task-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8rem; color: var(--lp-muted); }
.lp-task-card-meta .lp-avatars { margin-left: auto; }
.lp-task-card-archived { opacity: .65; border-style: dashed; }
.lp-task-card-done .lp-task-card-title { text-decoration: line-through; color: var(--lp-muted); }
.lp-meta-item { white-space: nowrap; }

.lp-priority, .lp-status, .lp-deadline {
  display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .45rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; background: var(--lp-chip-bg); color: var(--lp-text); white-space: nowrap;
}
.lp-priority-urgent { background: var(--lp-danger-bg); color: var(--lp-danger); }
.lp-priority-important { background: var(--lp-warn-bg); color: var(--lp-amber); }
.lp-priority-low { color: var(--lp-muted); font-weight: 500; }
.lp-status-paused { background: var(--lp-warn-bg); color: var(--lp-amber); }
.lp-status-inprogress { background: var(--lp-chip-bg); color: var(--lp-ink); }
.lp-status-completed { color: var(--lp-moss); }
.lp-deadline { font-weight: 500; }
.lp-deadline-overdue { background: var(--lp-danger-bg); color: var(--lp-danger); font-weight: 600; }
.lp-deadline-duesoon { background: var(--lp-warn-bg); color: var(--lp-amber); font-weight: 600; }

.lp-progress { display: block; height: 4px; border-radius: 2px; background: var(--lp-chip-bg); overflow: hidden; }
.lp-progress-bar { display: block; height: 100%; background: var(--lp-ink); }

.lp-avatars { display: inline-flex; }
.lp-avatar {
  display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--lp-ink); color: #fff; font-size: .68rem; font-weight: 600; border: 2px solid var(--lp-surface);
}
.lp-avatars .lp-avatar + .lp-avatar { margin-left: -6px; }
.lp-avatar-more { background: var(--lp-slate, #56657a); }

/* Task detail panel: side sheet on desktop, full screen on phones */
.lp-panel-backdrop { position: fixed; inset: 0; background: rgba(8, 14, 26, .35); z-index: 1050; }
.lp-task-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1055;
  width: min(520px, 100vw); display: flex; flex-direction: column;
  background: var(--lp-surface); color: var(--lp-text); border-left: 1px solid var(--lp-line);
}
.lp-task-panel-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--lp-line); }
.lp-task-panel-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.lp-task-panel-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem 1.5rem; }
.lp-task-panel-footer { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--lp-line); }
.lp-task-panel fieldset[disabled] .form-control, .lp-task-panel fieldset[disabled] .form-select { background-color: var(--lp-bg); }
.lp-task-section { padding: .75rem 0; border-top: 1px solid var(--lp-line); }
.lp-task-section .lp-subheading { margin-top: 0; display: flex; align-items: baseline; gap: .5rem; }
.lp-task-meta p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.lp-assignees { display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-assignee {
  display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem .25rem .4rem; min-height: 36px;
  border: 1px solid var(--lp-line); border-radius: 999px; cursor: pointer; font-size: .88rem;
}
.lp-assignee-on { border-color: var(--lp-ink); }
.lp-assignee .form-check-input { margin: 0; }

.lp-checklist { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.lp-checklist-item { display: flex; align-items: center; gap: .35rem; }
.lp-checklist-item .form-check-input { flex: none; margin: 0 .25rem 0 0; width: 1.15rem; height: 1.15rem; }
.lp-checklist-title { flex: 1; min-width: 0; }
.lp-checklist-title.lp-checked { text-decoration: line-through; color: var(--lp-muted); }

.lp-markdown { overflow-wrap: anywhere; }
.lp-markdown > :last-child { margin-bottom: 0; }
.lp-markdown table { border-collapse: collapse; margin-bottom: 1rem; }
.lp-markdown th, .lp-markdown td { border: 1px solid var(--lp-line); padding: .25rem .5rem; }
.lp-markdown pre { background: var(--lp-bg); padding: .75rem; border-radius: var(--lp-radius-sm); overflow-x: auto; }

@media (max-width: 575.98px) {
  .lp-task-panel { border-left: 0; }
  .lp-task-panel-body { padding-inline: 1rem; }
}

/* ==========================================================================
   Phase 2.3 — labels
   Chip = tinted background + coloured swatch + the label's name in normal text colour,
   so labels stay readable in both themes and never depend on colour alone.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --lp-l-red: #c62828; --lp-l-orange: #e65100; --lp-l-amber: #c77700; --lp-l-yellow: #a68b00; --lp-l-lime: #6f8f0e;
  --lp-l-green: #2e7d32; --lp-l-teal: #00796b; --lp-l-cyan: #00838f; --lp-l-blue: #1f5fbf; --lp-l-indigo: #3949ab;
  --lp-l-purple: #7b1fa2; --lp-l-pink: #c2185b; --lp-l-brown: #6d4c41; --lp-l-gray: #616161;
}
[data-bs-theme="dark"] {
  --lp-l-red: #ef7b7b; --lp-l-orange: #ffa25e; --lp-l-amber: #f3b54a; --lp-l-yellow: #e8d25c; --lp-l-lime: #b7d65a;
  --lp-l-green: #72c47a; --lp-l-teal: #4fc1b1; --lp-l-cyan: #59cdd8; --lp-l-blue: #7aa7f0; --lp-l-indigo: #9aa6f0;
  --lp-l-purple: #c58ae0; --lp-l-pink: #f08bb4; --lp-l-brown: #c29b8c; --lp-l-gray: #b0b0b0;
}
.lp-label-red { --lp-label: var(--lp-l-red); }       .lp-label-orange { --lp-label: var(--lp-l-orange); }
.lp-label-amber { --lp-label: var(--lp-l-amber); }   .lp-label-yellow { --lp-label: var(--lp-l-yellow); }
.lp-label-lime { --lp-label: var(--lp-l-lime); }     .lp-label-green { --lp-label: var(--lp-l-green); }
.lp-label-teal { --lp-label: var(--lp-l-teal); }     .lp-label-cyan { --lp-label: var(--lp-l-cyan); }
.lp-label-blue { --lp-label: var(--lp-l-blue); }     .lp-label-indigo { --lp-label: var(--lp-l-indigo); }
.lp-label-purple { --lp-label: var(--lp-l-purple); } .lp-label-pink { --lp-label: var(--lp-l-pink); }
.lp-label-brown { --lp-label: var(--lp-l-brown); }   .lp-label-gray { --lp-label: var(--lp-l-gray); }

.lp-label {
  display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
  padding: .1rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; line-height: 1.4;
  color: var(--lp-text);
  background: color-mix(in srgb, var(--lp-label, var(--lp-ink)) 16%, var(--lp-surface));
  border: 1px solid color-mix(in srgb, var(--lp-label, var(--lp-ink)) 40%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-label::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--lp-label, var(--lp-ink)); }
.lp-label-swatch { display: inline-block; width: 22px; height: 22px; border-radius: 4px; background: var(--lp-label); }

.lp-task-card-labels { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Picker in the task panel: off = outlined, on = filled + check mark (aria-pressed carries state) */
.lp-label-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.lp-label-toggle { cursor: pointer; min-height: 32px; font-size: .82rem; background: transparent; }
.lp-label-toggle.lp-label-on { background: color-mix(in srgb, var(--lp-label) 28%, var(--lp-surface)); border-color: var(--lp-label); }
.lp-label-toggle:disabled { cursor: default; opacity: .7; }

/* Plan settings: label management */
.lp-labels-panel { margin-top: 1.25rem; }
.lp-meter { height: 6px; border-radius: 3px; background: var(--lp-chip-bg); overflow: hidden; }
.lp-meter-bar { display: block; height: 100%; background: var(--lp-ink); }
.lp-meter-over { background: var(--lp-amber); }
.lp-label-list { list-style: none; margin: 0; padding: 0; }
.lp-label-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--lp-line); }
.lp-label-row:last-child { border-bottom: 0; }
.lp-label-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; flex: 1 1 260px; min-width: 0; }
.lp-label-row-actions { display: flex; align-items: center; gap: .1rem; }
.lp-label-row-actions .btn-link { text-decoration: none; padding-inline: .35rem; }
.lp-label-add { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--lp-line); }
.lp-label-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: .75rem; margin-bottom: .5rem; }
@media (max-width: 575.98px) { .lp-label-form { grid-template-columns: 1fr; } }
.lp-swatches-sm { gap: .3rem; }
.lp-swatch-option-sm { width: 34px; height: 34px; }

/* ==========================================================================
   Phase 2.4 — filters, drag-and-drop, grid
   ========================================================================== */
.lp-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.lp-filter-search { flex: 1 1 200px; max-width: 280px; }
.lp-filter-menu { position: relative; }
.lp-filter-menu > summary { list-style: none; }
.lp-filter-menu > summary::-webkit-details-marker { display: none; }
.lp-filter-menu > summary::after { content: "▾"; margin-left: .3rem; font-size: .75rem; }
.lp-filter-menu[open] > summary { background: var(--lp-chip-bg); }
.lp-filter-popover {
  position: absolute; z-index: 1020; top: calc(100% + 4px); left: 0;
  min-width: 220px; max-height: 320px; overflow-y: auto; padding: .5rem;
  background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm);
  box-shadow: 0 6px 20px rgba(8, 14, 26, .12);
}
.lp-filter-option { display: flex; align-items: center; gap: .5rem; padding: .3rem .35rem; min-height: 36px; border-radius: 4px; cursor: pointer; }
.lp-filter-option:hover { background: var(--lp-bg); }
.lp-filter-option .form-check-input { margin: 0; flex: none; }
.lp-filter-group { display: flex; align-items: center; gap: .4rem; }
.lp-filter-group .form-select { width: auto; }
.lp-board-status { margin: 0 0 .75rem; }

/* Drag-and-drop */
.lp-bucket-handle { cursor: grab; color: var(--lp-muted); padding: 0 .2rem; user-select: none; letter-spacing: -2px; }
.lp-card-list { min-height: 48px; }
.lp-card-list-empty {
  display: grid; place-items: center; border: 1px dashed var(--lp-line); border-radius: var(--lp-radius-sm);
}
.lp-card-list-empty::after { content: attr(data-empty-text); color: var(--lp-muted); font-size: .85rem; padding: .75rem; }
.lp-drag-ghost { opacity: .35; }
.lp-drag-chosen .lp-task-card { border-color: var(--lp-ink); box-shadow: 0 4px 14px rgba(8, 14, 26, .18); }
.lp-move-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Grid */
.lp-grid-wrap { overflow-x: auto; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); background: var(--lp-surface); }
.lp-grid { margin: 0; min-width: 1100px; }
.lp-grid thead th { position: sticky; top: 0; background: var(--lp-surface); z-index: 2; white-space: nowrap; }
.lp-grid th:first-child, .lp-grid td:first-child { position: sticky; left: 0; background: var(--lp-surface); z-index: 1; }
.lp-grid thead th:first-child { z-index: 3; }
.lp-grid-title { min-width: 220px; max-width: 320px; font-weight: 500; }
.lp-grid-open { border: 0; background: none; padding: 0; color: var(--lp-text); text-align: left; font-weight: 500; }
.lp-grid-open:hover { color: var(--lp-ink); text-decoration: underline; }
.lp-grid-people { display: inline-flex; align-items: center; gap: .4rem; }
.lp-grid-progress { min-width: 120px; }
.lp-grid-progress .lp-progress { display: inline-block; width: 64px; vertical-align: middle; margin-right: .35rem; }
.lp-grid-archived { opacity: .6; }
.lp-nowrap { white-space: nowrap; }
.lp-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.lp-sort:hover { color: var(--lp-text); }
.lp-sort-icon { font-size: .7rem; }

/* ==========================================================================
   Phase 3 — work tracking and planned schedule
   ========================================================================== */
.lp-work-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem .75rem; margin: 0 0 .75rem; }
.lp-work-summary > div { display: flex; flex-direction: column; gap: .1rem; }
.lp-work-summary dt { font-size: .78rem; font-weight: 500; color: var(--lp-muted); }
.lp-work-summary dd { margin: 0; font-weight: 600; font-size: .9rem; }
.lp-work-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.lp-work-actions .btn-warning { --bs-btn-bg: var(--lp-amber); --bs-btn-border-color: var(--lp-amber); --bs-btn-color: #1b1300; }
.lp-work-options > summary, .lp-work-block > summary { cursor: pointer; font-size: .88rem; color: var(--lp-ink); padding: .25rem 0; }
.lp-work-options-body { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .5rem 0; }
@media (max-width: 575.98px) { .lp-work-options-body { grid-template-columns: 1fr; } }
.lp-work-block { margin-top: .5rem; }

.lp-periods, .lp-history { list-style: none; margin: .35rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.lp-period { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; }
.lp-period-kind { flex: none; width: 14px; height: 14px; margin-top: .2rem; border-radius: 3px; }
.lp-period-text { display: flex; flex-wrap: wrap; gap: .3rem; }
.lp-period-reason, .lp-history-reason { color: var(--lp-muted); font-style: italic; }
.lp-history-item { padding: .4rem .5rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm); font-size: .86rem; }
.lp-history-main { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.lp-correction { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.lp-correction > :last-child, .lp-correction > .d-flex { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .lp-correction { grid-template-columns: 1fr; } }

/* Planned schedule: outlined segments distinguish a forecast from recorded work (never colour alone). */
.lp-plan-track { display: flex; gap: 2px; height: 18px; margin-bottom: .4rem; }
.lp-seg-planned { border-radius: 3px; min-width: 4px; }
.lp-seg-planned.lp-seg-active { background: transparent; border: 2px solid var(--lp-ink); }
.lp-seg-planned.lp-seg-paused {
  background-color: transparent; border: 2px dashed var(--lp-amber);
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--lp-amber) 35%, transparent) 0 3px, transparent 3px 7px);
}
.lp-plan-editor { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.lp-plan-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; align-items: end; }

/* ==========================================================================
   Phase 4 — timeline and live updates
   One scroll container (both axes): header sticks to the top, task names stick to the left.
   ========================================================================== */
.lp-tl {
  --lp-tl-label: 260px; --lp-tl-row: 44px;
  position: relative; overflow: auto; max-height: calc(100vh - 300px); min-height: 280px;
  border: 1px solid var(--lp-line); border-radius: var(--lp-radius); background: var(--lp-surface);
}
@media (max-width: 767.98px) { .lp-tl { --lp-tl-label: 132px; max-height: calc(100vh - 220px); } }
.lp-tl-canvas { position: relative; }

.lp-tl-head { position: sticky; top: 0; z-index: 4; display: flex; background: var(--lp-surface); border-bottom: 1px solid var(--lp-line); }
.lp-tl-corner {
  position: sticky; left: 0; z-index: 5; flex: none; width: var(--lp-tl-label);
  padding: .4rem .6rem; font-size: .8rem; font-weight: 600; color: var(--lp-muted);
  background: var(--lp-surface); border-right: 1px solid var(--lp-line);
}
.lp-tl-scale { position: relative; flex: none; }
.lp-tl-scale-row { position: relative; height: 24px; }
.lp-tl-scale-cell {
  position: absolute; top: 0; height: 100%; overflow: hidden; white-space: nowrap;
  padding: 0 .3rem; font-size: .75rem; line-height: 24px; color: var(--lp-muted); border-left: 1px solid var(--lp-line);
}
.lp-tl-scale-minor .lp-tl-scale-cell { text-align: center; padding: 0; }
.lp-tl-weekend-head { background: var(--lp-bg); }
.lp-tl-today-head { color: var(--lp-amber); font-weight: 700; }

.lp-tl-body { position: relative; }
.lp-tl-layer { position: absolute; top: 0; bottom: 0; left: var(--lp-tl-label); pointer-events: none; z-index: 0; }
.lp-tl-weekend { position: absolute; top: 0; bottom: 0; background: var(--lp-bg); }
.lp-tl-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--lp-amber); }

.lp-tl-row { position: relative; z-index: 1; display: flex; height: var(--lp-tl-row); border-bottom: 1px solid var(--lp-line); }
.lp-tl-label {
  position: sticky; left: 0; z-index: 3; flex: none; width: var(--lp-tl-label);
  display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 0 .6rem;
  background: var(--lp-surface); border-right: 1px solid var(--lp-line); min-width: 0;
}
.lp-tl-group { background: var(--lp-bg); }
.lp-tl-group .lp-tl-label { flex-direction: row; align-items: center; justify-content: flex-start; gap: .5rem; background: var(--lp-bg); }
.lp-tl-title { display: flex; align-items: center; gap: .4rem; min-width: 0; border: 0; background: none; padding: 0; color: var(--lp-text); text-align: left; font-weight: 500; font-size: .88rem; }
.lp-tl-title:hover .lp-tl-title-text { text-decoration: underline; color: var(--lp-ink); }
.lp-tl-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-tl-status { flex: none; width: 1.1rem; text-align: center; font-size: .7rem; color: var(--lp-muted); }
.lp-tl-status-inprogress { color: var(--lp-ink); }
.lp-tl-status-paused { color: var(--lp-amber); }
.lp-tl-status-completed { color: var(--lp-moss); font-weight: 700; }
.lp-tl-meta { display: flex; gap: .5rem; font-size: .72rem; color: var(--lp-muted); padding-left: 1.5rem; }
@media (max-width: 767.98px) { .lp-tl-meta { display: none; } }
.lp-tl-archived .lp-tl-label, .lp-tl-archived .lp-tl-track { opacity: .6; }

.lp-tl-track { position: relative; flex: none; }
.lp-tl-lane { position: absolute; left: 0; right: 0; top: 10px; height: 22px; }
.lp-tl-two-lanes .lp-tl-lane-planned { top: 5px; height: 12px; }
.lp-tl-two-lanes .lp-tl-lane-actual { top: 21px; height: 16px; }
.lp-tl-seg {
  position: absolute; top: 0; height: 100%; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
}
.lp-tl-seg:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 1px; z-index: 2; }
.lp-tl-seg.lp-seg-planned.lp-seg-active { border-width: 2px; }
.lp-tl-done, .lp-tl-due {
  position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: .8rem; line-height: 1; pointer-events: none;
}
.lp-tl-done { color: var(--lp-moss); font-weight: 700; margin-left: 6px; }
.lp-tl-due { color: var(--lp-muted); z-index: 2; }
.lp-tl-due-overdue { color: var(--lp-danger); }
.lp-tl-due-duesoon { color: var(--lp-amber); }

.lp-tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin: .25rem 0 .6rem; font-size: .8rem; color: var(--lp-muted); }
.lp-tl-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.lp-tl-legend .lp-swatch { width: 22px; height: 10px; }
.lp-tl-legend-mark { font-weight: 700; color: var(--lp-moss); }
.lp-tl-due-mark { color: var(--lp-muted); }
.lp-tl-legend-today { display: inline-block; width: 2px; height: 14px; background: var(--lp-amber); }
.lp-tl-details { top: 12vh; }

/* Live indicator */
.lp-live { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--lp-muted); margin-left: auto; }
.lp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-moss); }
.lp-live-flash { color: var(--lp-moss); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .lp-live-flash .lp-live-dot { animation: lp-pulse 1s ease-out 1; }
  @keyframes lp-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lp-moss) 60%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
}

/* ==========================================================================
   Phase 5 — calendar, charts, dashboard, my tasks, search, reports
   ========================================================================== */
.lp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.lp-stat { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; background: var(--lp-surface);
  border: 1px solid var(--lp-line); border-left: 4px solid var(--lp-ink); border-radius: var(--lp-radius-sm); }
.lp-stat-value { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.lp-stat-label { font-size: .8rem; color: var(--lp-muted); }
.lp-stat-good { border-left-color: var(--lp-moss); }
.lp-stat-warn { border-left-color: var(--lp-amber); }
.lp-stat-danger { border-left-color: var(--lp-danger); }
.lp-stat-danger .lp-stat-value { color: var(--lp-danger); }

.lp-chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.lp-bars { width: 100%; border-collapse: collapse; font-size: .86rem; }
.lp-bars caption { caption-side: top; font-weight: 600; font-size: .95rem; color: var(--lp-text); padding: 0 0 .5rem; }
.lp-bars th { font-weight: 500; text-align: left; padding: .25rem .5rem .25rem 0; width: 34%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.lp-bars-bar { padding: .25rem 0; }
.lp-bars-num { text-align: right; padding-left: .5rem; width: 3rem; font-weight: 600; }
.lp-bar { display: block; height: 14px; min-width: 2px; border-radius: 2px; background: var(--lp-ink); }
.lp-bar-good, .lp-bar-status-completed { background: var(--lp-moss); }
.lp-bar-danger, .lp-bar-priority-urgent { background: var(--lp-danger); }
.lp-bar-status-paused, .lp-bar-priority-important {
  background-color: var(--lp-amber);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px);
}
.lp-bar-status-notstarted, .lp-bar-priority-low { background: var(--lp-plan-slate); }
.lp-bar-status-cancelled { background: var(--lp-line); }

/* Calendar */
.lp-cal-nav { display: flex; align-items: center; gap: .4rem; margin: .5rem 0; flex-wrap: wrap; }
.lp-cal-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 0 .5rem; }
.lp-cal-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .5rem; }
.lp-cal-legend > span { display: inline-flex; align-items: center; gap: .3rem; }
.lp-cal { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; background: var(--lp-surface); }
.lp-cal th { padding: .4rem; font-size: .78rem; font-weight: 600; color: var(--lp-muted); text-align: left; border-bottom: 1px solid var(--lp-line); }
.lp-cal td { vertical-align: top; height: 112px; padding: 0; border: 1px solid var(--lp-line); }
.lp-cal-week td { height: 360px; }
.lp-cal-day { display: flex; flex-direction: column; gap: .2rem; padding: .3rem; height: 100%; }
.lp-cal-num { font-size: .8rem; font-weight: 600; color: var(--lp-muted); }
.lp-cal-today .lp-cal-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lp-amber); color: #1b1300; }
.lp-cal-outside { background: var(--lp-bg); }
.lp-cal-outside .lp-cal-num { opacity: .5; }
.lp-cal-weekend { background: color-mix(in srgb, var(--lp-bg) 60%, var(--lp-surface)); }
.lp-cal-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lp-cal-entry {
  width: 100%; display: flex; align-items: center; gap: .3rem; padding: .1rem .35rem; border: 0; border-radius: 3px;
  font-size: .76rem; text-align: left; color: var(--lp-text); background: var(--lp-chip-bg); cursor: pointer;
}
.lp-cal-entry:hover { outline: 1px solid var(--lp-ink); }
.lp-cal-entry-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-cal-entry-due { background: color-mix(in srgb, var(--lp-ink) 18%, var(--lp-surface)); font-weight: 600; }
.lp-cal-entry-scheduled { background: transparent; border: 1px solid color-mix(in srgb, var(--lp-ink) 40%, transparent); }
.lp-cal-entry-scheduled.lp-cal-entry-paused { border-style: dashed; border-color: var(--lp-amber); }
.lp-cal-mark { font-weight: 700; }
.lp-cal-due { color: var(--lp-ink); }

/* My tasks, search, reports */
.lp-my { display: grid; gap: 1rem; }
.lp-search-form { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1rem; }
.lp-search-main { display: flex; gap: .5rem; max-width: 640px; }
.lp-search-filters { display: flex; flex-wrap: wrap; gap: .75rem; }
.lp-search-filters .form-select { min-width: 150px; }
.lp-report-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1099.98px) { .lp-report-layout { grid-template-columns: 1fr; } }
.lp-report-kinds { display: flex; flex-direction: column; gap: .35rem; }
.lp-report-kind { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm); cursor: pointer; }
.lp-report-kind .form-check-input { margin-top: .2rem; flex: none; }
.lp-report-kind-on { border-color: var(--lp-ink); background: color-mix(in srgb, var(--lp-ink) 6%, var(--lp-surface)); }
.lp-report-filters { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; }
.lp-report-table { max-height: 70vh; overflow: auto; }
.lp-report-table th { position: sticky; top: 0; background: var(--lp-surface); white-space: nowrap; }
.lp-report-table td { white-space: nowrap; font-size: .84rem; }
.lp-topbar-search { flex: 1; max-width: 520px; margin: 0; }

/* ==========================================================================
   Phase 6 — collaboration
   ========================================================================== */
.lp-bell { position: relative; }
.lp-bell > summary { list-style: none; position: relative; }
.lp-bell > summary::-webkit-details-marker { display: none; }
.lp-bell-badge {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--lp-danger); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
}
.lp-bell-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1045; width: min(360px, 92vw); max-height: 70vh; overflow-y: auto;
  background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius); box-shadow: 0 8px 28px rgba(8, 14, 26, .18);
}
.lp-bell-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem .75rem; border-bottom: 1px solid var(--lp-line); }
.lp-bell-list { list-style: none; margin: 0; padding: 0; }
.lp-bell-item {
  width: 100%; display: flex; flex-direction: column; gap: .1rem; text-align: left; border: 0; background: none;
  padding: .55rem .75rem; border-bottom: 1px solid var(--lp-line); color: var(--lp-text); font-size: .86rem;
}
.lp-bell-item:hover { background: var(--lp-bg); }
.lp-bell-unread { border-left: 3px solid var(--lp-amber); font-weight: 500; }

.lp-comments { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.lp-comment { padding: .5rem .6rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm); }
.lp-comment-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-bottom: .25rem; font-size: .86rem; }
.lp-comment-head .btn-link { padding: 0 .25rem; text-decoration: none; }
.lp-comment-body { font-size: .9rem; }
.lp-comment-deleted { background: var(--lp-bg); }
.lp-comment-new { margin-top: .25rem; }

.lp-files { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.lp-file { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem .4rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm); }
.lp-file-name { font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.lp-upload { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.lp-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; font-size: .86rem; }
.lp-activity li { padding-bottom: .4rem; border-bottom: 1px solid var(--lp-line); }
.lp-activity li:last-child { border-bottom: 0; }

/* Phase 7 — billing */
.lp-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.lp-plan-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); }
.lp-plan-card-current { border-color: var(--lp-ink); background: color-mix(in srgb, var(--lp-ink) 6%, var(--lp-surface)); }

/* Plan views (board, grid, timeline, calendar, charts) use the full window width; other pages keep
   the 1280px reading width. Plan settings stay narrow because they are forms. */
.lp-content:has(.lp-view-tabs):not(:has(.lp-view-tab-end.active)) { max-width: none; }

/* The view-tab strip scrolls sideways on small screens only; never show a vertical scrollbar on it. */
.lp-view-tabs { overflow-y: hidden; }

/* The app shell never scrolls sideways: wide content (board, grid, timeline, calendar, tables) has its
   own horizontal scroll area. position: relative makes the shell the reference box for absolutely
   positioned elements inside it, so `clip` contains those too. `clip` (unlike `hidden`) creates no
   scroll container, so the sticky rail, sticky headers and fixed panels keep working. */
.lp-shell { position: relative; overflow-x: clip; }
.lp-main { min-width: 0; }
.lp-content { min-width: 0; }

/* Plan views (board, grid, timeline, calendar) fill the rest of the window and scroll inside themselves:
   one vertical scrollbar, and the horizontal scrollbar stays at the bottom of the window.
   Charts and plan Settings are left alone (no scroll area). Tablets and desktops only. */
@media (min-width: 768px) {
  .lp-main:has(.lp-view-tabs):not(:has(.lp-view-tab-end.active)):has(.lp-content > :is(.lp-board, .lp-tl, .lp-table-wrap, .lp-grid-wrap)) {
    height: 100vh; height: 100dvh;
  }
  .lp-content:has(> .lp-view-tabs):not(:has(.lp-view-tab-end.active)):has(> :is(.lp-board, .lp-tl, .lp-table-wrap, .lp-grid-wrap)) {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-bottom: .75rem;
  }
  .lp-content:has(> .lp-view-tabs):not(:has(.lp-view-tab-end.active)) > * { flex: none; }
  .lp-content:has(> .lp-view-tabs):not(:has(.lp-view-tab-end.active)) > :is(.lp-board, .lp-tl, .lp-table-wrap, .lp-grid-wrap) {
    flex: 1 1 auto; min-height: 320px; max-height: none; overflow: auto; overscroll-behavior: contain;
  }
}


/* Pages that hold lists, cards and tables (Home, Dashboard, My tasks, Reports, Search, All workspaces)
   use the full window width, like the plan views. Forms and settings keep the 1280px reading width. */
.lp-content:has(.lp-wide-page) { max-width: none; }

/* Card previews ("Show on card": description or checklist, as in Planner).
   The card is a container; its title button is stretched over the whole card so a click anywhere
   opens the task, while the checklist sits above it and can be ticked in place. */
.lp-task-card { position: relative; }
.lp-task-card-open {
  border: 0; background: none; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer;
}
.lp-task-card-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lp-task-card-open:focus-visible { outline: none; }
.lp-task-card:has(.lp-task-card-open:focus-visible) { outline: 3px solid var(--lp-focus); outline-offset: 2px; }
.lp-card-description {
  margin: 0; font-size: .82rem; line-height: 1.4; color: var(--lp-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.lp-card-checklist { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: .84rem; cursor: default; }
.lp-card-checklist li { display: flex; align-items: flex-start; gap: .45rem; }
.lp-card-checklist .form-check-input { flex: none; margin-top: .15rem; cursor: pointer; }
.lp-card-checklist label { cursor: pointer; overflow-wrap: anywhere; }
.lp-card-check-done label { text-decoration: line-through; color: var(--lp-muted); }
.lp-card-checklist .form-check-input:disabled + label { cursor: default; }

/* Sub-tasks */
.lp-label-inherited { opacity: .6; }
.lp-label-inherited .lp-label { border-style: dashed; }
.lp-subtasks { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.lp-subtask { display: flex; align-items: center; gap: .25rem; }
.lp-subtask-open {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; text-align: left; border: 1px solid var(--lp-line);
  border-radius: var(--lp-radius-sm); background: var(--lp-surface); color: var(--lp-text); padding: .35rem .5rem;
}
.lp-subtask-open:hover { border-color: var(--lp-ink); }
.lp-subtask-title { font-weight: 500; overflow-wrap: anywhere; }
.lp-subtask-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.lp-subtask-done .lp-subtask-title { text-decoration: line-through; color: var(--lp-muted); }

.lp-grid-tree { display: inline-flex; align-items: center; gap: .3rem; }
.lp-tree-toggle {
  flex: none; width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--lp-radius-sm); background: none; color: var(--lp-muted); cursor: pointer;
}
.lp-tree-toggle:hover { background: var(--lp-bg); color: var(--lp-text); }
.lp-tree-branch { color: var(--lp-muted); flex: none; }
.lp-grid-sub > th, .lp-grid-sub > td { background: color-mix(in srgb, var(--lp-bg) 55%, var(--lp-surface)); }
.lp-grid-sub .lp-grid-tree { padding-left: 1.4rem; }
.lp-grid-sub .lp-grid-open { font-weight: 400; }

/* Timeline: the expand toggle sits in the label's left gutter; sub-task rows are indented. */
.lp-tl-parent .lp-tl-label { padding-left: 1.7rem; }
.lp-tl-toggle { position: absolute; left: .2rem; top: 50%; transform: translateY(-50%); }
.lp-tl-sub .lp-tl-label { padding-left: 2.2rem; }
.lp-tl-sub .lp-tl-title { font-weight: 400; }
.lp-tl-parent .lp-tl-title { font-weight: 600; }
.lp-tl-summary {
  background: transparent; border-top: 3px solid var(--lp-ink); border-radius: 0; height: 9px !important; top: 2px;
}
.lp-tl-summary::before, .lp-tl-summary::after {
  content: ""; position: absolute; top: -3px; width: 3px; height: 9px; background: var(--lp-ink);
}
.lp-tl-summary::before { left: 0; }
.lp-tl-summary::after { right: 0; }

/* Sub-tasks shown on a board card: round status markers on a tree rail (checklist items use square boxes).
   Only the markers take clicks; the rest of the row lets clicks through to the card, which opens the parent. */
.lp-card-subtree { position: relative; z-index: 1; list-style: none; margin: .1rem 0 0 .35rem; padding: 0; font-size: .84rem; pointer-events: none; }
.lp-card-sub { position: relative; display: flex; align-items: center; gap: .4rem; padding: .18rem 0 .18rem .85rem; min-height: 26px; }
.lp-card-sub::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid var(--lp-line); }
.lp-card-sub::after { content: ""; position: absolute; left: 0; top: 50%; width: .6rem; border-top: 1.5px solid var(--lp-line); }
.lp-card-sub:last-child::before { bottom: 50%; }
.lp-card-sub-more { color: var(--lp-muted); font-size: .78rem; }
.lp-card-sub-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
.lp-card-sub-done .lp-card-sub-title { text-decoration: line-through; color: var(--lp-muted); }
.lp-card-sub-cancelled .lp-card-sub-title { text-decoration: line-through; color: var(--lp-muted); font-style: italic; }
.lp-card-sub-meta { flex: none; display: inline-flex; align-items: center; gap: .3rem; }
.lp-card-sub-meta .lp-avatar { width: 20px; height: 20px; font-size: .6rem; border-width: 1px; }
.lp-card-sub-due { font-size: .72rem; padding: 0 .3rem; border-radius: var(--lp-radius-sm); color: var(--lp-muted); white-space: nowrap; }
.lp-card-sub-due.lp-deadline-overdue, .lp-card-sub-due.lp-deadline-duesoon { font-weight: 600; }

.lp-sub-marker {
  pointer-events: auto; flex: none; width: 18px; height: 18px; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: .62rem; font-weight: 700; line-height: 1;
  border: 1.5px solid var(--lp-muted); background: var(--lp-surface); color: #fff; cursor: pointer;
}
.lp-sub-marker:disabled { cursor: default; }
.lp-sub-marker:not(:disabled):hover { box-shadow: 0 0 0 3px var(--lp-chip-bg); }
.lp-sub-marker:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; }
.lp-sub-marker-inprogress {
  border-color: var(--lp-ink);
  background: conic-gradient(var(--lp-ink) var(--lp-sub-p, 0%), var(--lp-surface) 0);
}
.lp-sub-marker-paused { border-color: var(--lp-amber); background: var(--lp-warn-bg); color: var(--lp-amber); font-size: .5rem; letter-spacing: -1px; }
.lp-sub-marker-completed { border-color: var(--lp-moss); background: var(--lp-moss); }
.lp-sub-marker-cancelled { border-color: var(--lp-muted); background: var(--lp-chip-bg); color: var(--lp-muted); }

/* Formatting help: an (i) icon with a tooltip; clicking it opens the Markdown quick reference as a pop-over
   below the surrounding .lp-md-anchor row (as wide as that row, so it stays inside the task panel). */
.lp-md-anchor { position: relative; display: flex; align-items: baseline; gap: .35rem; }
.lp-md-anchor > .form-label { margin-bottom: .5rem; }
.lp-md-help { position: relative; display: inline-block; vertical-align: middle; }
.lp-md-help-icon {
  display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--lp-muted); background: transparent; color: var(--lp-muted);
  font: italic 700 .65rem/1 Georgia, "Times New Roman", serif; cursor: pointer;
}
.lp-md-help-icon:hover, .lp-md-help-icon[aria-expanded="true"] { border-color: var(--lp-ink); color: var(--lp-ink); }
.lp-md-help-icon:focus-visible { outline: 2px solid var(--lp-focus); outline-offset: 2px; }
/* Tooltip: on hover or keyboard focus, hidden while the pop-over is open. */
.lp-md-help-icon::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: .2rem .45rem; border-radius: var(--lp-radius-sm); background: var(--lp-text); color: var(--lp-surface);
  font: 500 .72rem/1.2 var(--lp-font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s;
  z-index: 30;
}
.lp-md-help-icon:hover::after, .lp-md-help-icon:focus-visible::after { opacity: 1; }
.lp-md-help-icon[aria-expanded="true"]::after { opacity: 0; }
.lp-md-help-backdrop { position: fixed; inset: 0; z-index: 40; }
.lp-md-help-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 41; max-width: 440px;
  padding: .6rem .75rem; font-size: .8rem; font-style: normal; line-height: 1.4; color: var(--lp-text); text-align: left;
  background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
  box-shadow: 0 8px 24px rgba(8, 14, 26, .18);
}
.lp-md-help-panel:focus { outline: none; }
.lp-md-help-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.lp-md-help-table { width: 100%; border-collapse: collapse; }
.lp-md-help-table th { font-weight: 600; color: var(--lp-muted); text-align: left; padding: .15rem .4rem; border-bottom: 1px solid var(--lp-line); }
.lp-md-help-table td { padding: .2rem .4rem; border-bottom: 1px solid var(--lp-line); vertical-align: top; }
.lp-md-help-table tr:last-child td { border-bottom: 0; }
.lp-md-help-table td:first-child { white-space: nowrap; }
.lp-md-help-table code, .lp-md-help-notes code { font-size: .78rem; color: var(--lp-text); background: var(--lp-chip-bg); padding: 0 .25rem; border-radius: var(--lp-radius-sm); }
.lp-md-help-block { display: inline-block; white-space: pre; line-height: 1.35; }
.lp-md-help-heading { font-weight: 700; font-size: .95rem; }
.lp-md-help-link { color: var(--bs-link-color, var(--lp-ink)); text-decoration: underline; }
.lp-md-help-quote { border-left: 3px solid var(--lp-line); padding-left: .4rem; color: var(--lp-muted); }
.lp-md-help-notes { margin: .45rem 0 0; padding-left: 1.1rem; color: var(--lp-muted); }

/* Workspace settings: own email server */
.lp-email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
.lp-email-wide { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .lp-email-grid { grid-template-columns: 1fr; } }
.lp-email-grid ~ .lp-form-actions { flex-wrap: wrap; }

/* Billing: per-member plans */
.lp-plan-price { font-size: 1.05rem; font-weight: 600; color: var(--lp-text); }
.lp-plan-card > .btn { margin-top: auto; align-self: flex-start; }
.lp-plan-features { list-style: none; margin: .25rem 0; padding: 0; display: grid; gap: .15rem; }
.lp-plan-features li { position: relative; padding-left: 1.2rem; }
.lp-plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--lp-ink); font-weight: 600; }

/* Advanced timeline: dependency arrows (drawn under the rows) and baseline bars */
.lp-tl-links { position: absolute; top: 0; left: 0; overflow: visible; }
.lp-tl-link { fill: none; stroke: var(--lp-muted); stroke-width: 1.5; }
.lp-tl-arrowhead { fill: var(--lp-muted); stroke: none; }
.lp-tl-link.lp-tl-link-conflict { stroke: var(--lp-danger); stroke-dasharray: 4 3; }
.lp-tl-arrowhead.lp-tl-link-conflict { fill: var(--lp-danger); }
.lp-tl-legend-link { font-weight: 700; color: var(--lp-muted); }
.lp-tl-legend-link.lp-tl-link-conflict { color: var(--lp-danger); }
.lp-tl-baseline { position: absolute; bottom: 2px; height: 4px; border-radius: 2px; background: var(--lp-muted); opacity: .45; min-width: 4px; pointer-events: auto; }
.lp-tl-baseline-swatch { height: 4px !important; background: var(--lp-muted); opacity: .45; border: 0; }
.lp-dep-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.lp-dep-list li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.lp-dep-warning { font-size: .72rem; font-weight: 600; color: var(--lp-danger); background: var(--lp-danger-bg); border-radius: var(--lp-radius-sm); padding: 0 .3rem; }
.lp-api-key { display: block; padding: .4rem .5rem; background: var(--lp-surface); border: 1px solid var(--lp-line); border-radius: var(--lp-radius-sm); overflow-wrap: anywhere; user-select: all; }
.lp-api-help pre { background: var(--lp-bg); padding: .75rem; border-radius: var(--lp-radius-sm); overflow-x: auto; font-size: .82rem; }

/* @mentions in comments */
.lp-mention { font-weight: 600; color: var(--lp-ink-strong); background: color-mix(in srgb, var(--lp-ink) 10%, transparent); border-radius: var(--lp-radius-sm); padding: 0 .15rem; }
.lp-mention-list { list-style: none; margin: .25rem 0 0; padding: .25rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); background: var(--lp-surface); max-width: 22rem; }
.lp-mention-option { display: flex; align-items: center; gap: .45rem; width: 100%; border: 0; background: none; padding: .25rem .4rem; border-radius: var(--lp-radius-sm); text-align: left; color: var(--lp-text); font-size: .875rem; }
.lp-mention-option:hover, .lp-mention-option:focus-visible { background: color-mix(in srgb, var(--lp-ink) 8%, transparent); }

/* Repeating tasks */
.lp-repeat-form { display: grid; gap: .25rem; }
.lp-repeat-interval { width: 4.5rem; }
.lp-repeat-unit { width: auto; }
.lp-repeat-end { width: auto; }
.lp-repeat-days { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; }
.lp-repeat-days .btn { min-width: 2rem; padding-inline: .4rem; }

/* Workspace danger zone */
.lp-danger-zone { border-color: color-mix(in srgb, var(--lp-danger) 45%, var(--lp-line)); }
.lp-danger-select { max-width: 22rem; }

/* Operator area */
.lp-admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.lp-admin-stat { display: flex; flex-direction: column; padding: .75rem 1rem; border: 1px solid var(--lp-line); border-radius: var(--lp-radius); background: var(--lp-surface); }
.lp-admin-stat-value { font-size: 1.6rem; font-weight: 600; color: var(--lp-ink-strong); line-height: 1.2; font-variant-numeric: tabular-nums; }
.lp-admin-stat-label { font-size: .8rem; color: var(--lp-muted); }
.lp-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.lp-admin-grid > .lp-panel { margin: 0; }
.lp-admin-bars { display: flex; align-items: flex-end; gap: 2px; height: 7rem; padding-top: .25rem; }
.lp-admin-bar { flex: 1; min-width: 3px; background: var(--lp-ink); border-radius: 2px 2px 0 0; opacity: .75; }
.lp-admin-deleted td { color: var(--lp-muted); }
.lp-table-compact > :not(caption) > * > * { padding: .35rem .5rem; font-size: .875rem; }