/* Exact route UI stylesheet from rust_app/templates/tasks.html.tera. Keep in sync. */
:root {
      --task-bg: #101217;
      --task-panel: #171b24;
      --task-panel-2: #202634;
      --task-line: rgba(148, 163, 184, .22);
      --task-line-2: rgba(148, 163, 184, .34);
      --task-text: #edf2ff;
      --task-muted: #a6b1c5;
      --task-soft: #718096;
      --task-accent: #6d7dff;
      --task-green: #21b981;
      --task-red: #ef5368;
      --task-yellow: #d99a22;
      --task-radius: 8px;
    }

    @media (prefers-color-scheme: light) {
      :root {
        --task-bg: #f6f8fb;
        --task-panel: #ffffff;
        --task-panel-2: #eef2f7;
        --task-line: rgba(15, 23, 42, .12);
        --task-line-2: rgba(15, 23, 42, .18);
        --task-text: #162033;
        --task-muted: #596579;
        --task-soft: #8792a5;
        --task-accent: #3347d4;
        --task-green: #0f9f73;
        --task-red: #dc3d52;
        --task-yellow: #b7791f;
      }
    }

    * { box-sizing: border-box; }
    body.tasks-page {
      min-height: 100vh;
      margin: 0;
      background: var(--task-bg);
      color: var(--task-text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    button, input, textarea, select { font: inherit; }
    button {
      min-height: 36px;
      border: 0;
      border-radius: var(--task-radius);
      padding: 8px 12px;
      background: var(--task-accent);
      color: #ffffff;
      font-weight: 760;
      cursor: pointer;
    }
    button.secondary {
      border: 1px solid var(--task-line-2);
      background: var(--task-panel-2);
      color: var(--task-text);
    }
    button.danger { background: var(--task-red); }
    button:disabled { opacity: .55; cursor: not-allowed; }
    .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
    input, textarea, select {
      width: 100%;
      border: 1px solid var(--task-line);
      border-radius: var(--task-radius);
      padding: 9px 10px;
      background: color-mix(in srgb, var(--task-panel-2) 88%, black 12%);
      color: var(--task-text);
    }
    textarea { min-height: 80px; resize: vertical; }
    label { display: grid; gap: 6px; color: var(--task-muted); font-size: .82rem; font-weight: 760; }

    .tasks-shell {
      width: min(1440px, 100%);
      margin: 0 auto;
      padding: clamp(12px, 2vw, 22px);
      display: grid;
      gap: 14px;
    }
    .tasks-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 16px;
      border-bottom: 1px solid var(--task-line);
      padding-bottom: 12px;
    }
    .tasks-head h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: 0; }
    .tasks-head p { margin: 5px 0 0; color: var(--task-muted); }
    .tasks-status { min-height: 24px; color: var(--task-yellow); font-size: .88rem; font-weight: 760; text-align: right; }
    .tasks-head-tools { display: grid; justify-items: end; gap: 8px; }
    .planning-switcher { display: inline-flex; padding: 3px; border: 1px solid var(--task-line-2); border-radius: 12px; background: var(--task-panel); }
    .planning-switcher a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 13px; border-radius: 9px; color: var(--task-muted); font-weight: 850; text-decoration: none; }
    .planning-switcher a[aria-current="page"] { color: #fff; background: var(--task-accent); }
    .task-card a,
    .event-card a { color: var(--task-accent); }

    .tasks-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      align-items: start;
    }
    .tasks-setup-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(260px, 1fr));
      gap: 12px;
      min-width: 0;
      align-items: start;
    }
    .tasks-main { display: grid; gap: 12px; min-width: 0; }
    .task-panel {
      border: 1px solid var(--task-line);
      border-radius: var(--task-radius);
      background: var(--task-panel);
      padding: 14px;
      min-width: 0;
    }
    .task-panel h2, .task-panel h3 {
      margin: 0 0 10px;
      font-size: .98rem;
      letter-spacing: 0;
    }
    .task-panel-note { margin: -4px 0 12px; color: var(--task-muted); font-size: .84rem; line-height: 1.4; }
    details.task-expander {
      padding: 0;
      overflow: clip;
    }
    details.task-expander > summary {
      list-style: none;
    }
    details.task-expander > summary::-webkit-details-marker {
      display: none;
    }
    .task-expander-summary {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
      cursor: pointer;
      color: var(--task-text);
    }
    .task-expander-title {
      font-size: .98rem;
      font-weight: 850;
      letter-spacing: 0;
    }
    .task-expander-toggle {
      inline-size: 1.8rem;
      block-size: 1.8rem;
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      border: 1px solid var(--task-line-2);
      border-radius: 999px;
      background: color-mix(in srgb, var(--task-panel-2) 72%, transparent);
      color: var(--task-text);
      font-size: 1.15rem;
      line-height: 1;
    }
    .task-expander-toggle::before { content: "+"; }
    details.task-expander[open] .task-expander-toggle::before { content: "−"; }
    details.task-expander > .task-form {
      padding: 0 14px 14px;
    }
    details.task-expander > .label-editor {
      padding: 0 14px 14px;
    }
    details.task-expander > .task-form + .label-editor {
      margin-top: -4px;
    }
    details.task-expander[open] .task-expander-summary {
      border-bottom: 1px solid var(--task-line);
      margin-bottom: 12px;
    }
    .task-form { display: grid; gap: 10px; }
    .task-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .task-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .task-schedule-link { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--task-line-2); border-radius: var(--task-radius); color: var(--task-text) !important; background: var(--task-panel-2); font-weight: 760; text-decoration: none; }
    .task-schedule-link:hover { border-color: var(--task-accent); text-decoration: none; }
    .task-list { display: grid; gap: 10px; }
    .empty { padding: 18px; color: var(--task-soft); border: 1px dashed var(--task-line); border-radius: var(--task-radius); }

    .task-board-panel { padding: 0; overflow: hidden; }
    .task-board-toolbar {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border-bottom: 1px solid var(--task-line);
      background: linear-gradient(135deg, color-mix(in srgb, var(--task-accent) 10%, var(--task-panel)), var(--task-panel));
    }
    .task-board-toolbar h2 { margin: 0; }
    .task-board-toolbar p { margin: 4px 0 0; color: var(--task-muted); font-size: .84rem; }
    .task-board-tools { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; align-items: center; }
    .task-board-tools input,
    .task-board-tools select { width: auto; min-width: min(100%, 150px); }
    .task-board-tools button { white-space: nowrap; }
    .lan-plugin-handoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid color-mix(in srgb, var(--task-green) 30%, var(--task-line)); background: linear-gradient(135deg, color-mix(in srgb, var(--task-green) 13%, var(--task-panel)), color-mix(in srgb, var(--task-accent) 7%, var(--task-panel))); }
    .lan-plugin-handoff p { margin: 3px 0 0; color: var(--task-muted); font-size: .8rem; line-height: 1.35; }
    .lan-plugin-handoff strong { display: inline-flex; align-items: center; gap: 7px; }
    .kanban-board {
      display: grid;
      grid-template-columns: repeat(4, minmax(220px, 1fr));
      gap: 12px;
      padding: 14px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: inline proximity;
      scrollbar-color: var(--task-line-2) transparent;
    }
    .kanban-column {
      --kanban-color: var(--task-accent);
      display: grid;
      grid-template-rows: auto minmax(180px, 1fr);
      min-width: 0;
      border: 1px solid color-mix(in srgb, var(--kanban-color) 32%, var(--task-line));
      border-radius: calc(var(--task-radius) + 2px);
      background: color-mix(in srgb, var(--task-panel-2) 44%, var(--task-panel));
      overflow: clip;
      scroll-snap-align: start;
    }
    .kanban-column[data-kanban-status="open"] { --kanban-color: var(--task-accent); }
    .kanban-column[data-kanban-status="in_progress"] { --kanban-color: var(--task-yellow); }
    .kanban-column[data-kanban-status="done"] { --kanban-color: var(--task-green); }
    .kanban-column[data-kanban-status="cancelled"] { --kanban-color: var(--task-red); }
    .kanban-column-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 11px 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--kanban-color) 28%, var(--task-line));
      background: color-mix(in srgb, var(--kanban-color) 10%, var(--task-panel));
    }
    .kanban-column-title { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 850; }
    .kanban-column-title::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--kanban-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kanban-color) 15%, transparent); }
    .kanban-count { min-width: 1.7rem; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--kanban-color) 38%, var(--task-line)); border-radius: 999px; color: var(--task-text); background: color-mix(in srgb, var(--kanban-color) 13%, transparent); font-size: .76rem; font-variant-numeric: tabular-nums; text-align: center; }
    .kanban-dropzone {
      display: grid;
      align-content: start;
      gap: 9px;
      min-height: 190px;
      padding: 10px;
      transition: background .16s ease, box-shadow .16s ease;
    }
    .kanban-dropzone.is-drag-over { background: color-mix(in srgb, var(--kanban-color) 14%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kanban-color) 62%, transparent); }
    .kanban-empty { min-height: 106px; display: grid; place-items: center; padding: 14px; border: 1px dashed color-mix(in srgb, var(--kanban-color) 42%, var(--task-line)); border-radius: var(--task-radius); color: var(--task-soft); font-size: .84rem; text-align: center; }
    .board-task-card {
      position: relative;
      gap: 11px;
      overflow: clip;
      border-color: color-mix(in srgb, var(--kanban-color) 44%, var(--task-line));
      border-inline-start: 4px solid color-mix(in srgb, var(--kanban-color) 82%, transparent);
      background: linear-gradient(145deg, color-mix(in srgb, var(--kanban-color) 12%, var(--task-panel-2)), var(--task-panel-2) 54%) !important;
      box-shadow: 0 9px 20px color-mix(in srgb, var(--kanban-color) 10%, transparent);
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .board-task-card::before {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      block-size: 3px;
      background: linear-gradient(90deg, var(--kanban-color), transparent 72%);
      opacity: .74;
      pointer-events: none;
    }
    .board-task-card:not(.is-dragging):hover,
    .board-task-card:focus-within {
      border-color: color-mix(in srgb, var(--kanban-color) 72%, var(--task-line));
      box-shadow: 0 14px 28px color-mix(in srgb, var(--kanban-color) 18%, transparent);
      transform: translateY(-2px);
    }
    .task-card[draggable="true"] { cursor: grab; }
    .task-card[draggable="true"]:active { cursor: grabbing; }
    .task-card.is-dragging { opacity: .46; transform: scale(.985); }
    .kanban-delete-bin {
      position: fixed;
      z-index: 75;
      inset-inline-start: 50%;
      inset-block-end: max(7rem, 12vh);
      display: flex;
      align-items: center;
      gap: 11px;
      inline-size: min(310px, calc(100vw - 32px));
      min-block-size: 78px;
      padding: 12px 16px;
      border: 2px dashed color-mix(in srgb, var(--task-red) 86%, white 4%);
      border-radius: 16px;
      color: #fff4f4;
      background: color-mix(in srgb, var(--task-red) 82%, #351720);
      box-shadow: 0 18px 42px rgb(0 0 0 / .4), 0 0 0 5px color-mix(in srgb, var(--task-red) 17%, transparent);
      pointer-events: auto;
      transform: translateX(-50%);
      transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
    }
    .kanban-delete-bin[hidden] { display: none; }
    .kanban-delete-bin.is-drag-over {
      border-style: solid;
      background: color-mix(in srgb, var(--task-red) 94%, #2a0d15);
      box-shadow: 0 20px 46px rgb(0 0 0 / .46), 0 0 0 8px color-mix(in srgb, var(--task-red) 26%, transparent);
      transform: translateX(-50%) scale(1.045);
    }
    .kanban-delete-bin-icon {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      inline-size: 44px;
      block-size: 44px;
      border-radius: 12px;
      background: rgb(255 255 255 / .14);
      font-size: 1.35rem;
    }
    .kanban-delete-bin-copy { display: grid; gap: 3px; }
    .kanban-delete-bin-copy strong { font-size: .94rem; }
    .kanban-delete-bin-copy small { color: rgb(255 244 244 / .86); font-size: .75rem; line-height: 1.3; }
    .kanban-drag-ghost {
      position: fixed;
      z-index: 76;
      inset-block-start: 0;
      inset-inline-start: 0;
      margin: 0;
      pointer-events: none;
      opacity: .92;
      box-shadow: 0 18px 38px rgb(0 0 0 / .42);
    }
    body.is-kanban-touch-dragging { overscroll-behavior: contain; user-select: none; }
    .task-status-control { display: grid; gap: 4px; min-width: 130px; }
    .task-status-control label { font-size: .72rem; }
    .task-status-control select { padding: 6px 8px; font-size: .82rem; }
    .task-priority { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--task-line); border-radius: 999px; padding: 4px 8px; color: var(--task-muted); background: color-mix(in srgb, var(--task-panel) 66%, transparent); font-size: .75rem; font-weight: 820; text-transform: capitalize; }
    .task-priority.high { color: var(--task-red); border-color: color-mix(in srgb, var(--task-red) 48%, var(--task-line)); }
    .task-priority.low { color: var(--task-soft); }
    .task-scheduled { display: inline-flex; align-items: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--task-accent) 42%, var(--task-line)); border-radius: 999px; padding: 4px 8px; color: color-mix(in srgb, var(--task-accent) 84%, var(--task-text)); background: color-mix(in srgb, var(--task-accent) 12%, transparent); font-size: .75rem; font-weight: 820; font-variant-numeric: tabular-nums; }
    .task-scheduled::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--task-accent) 18%, transparent); }
    details.task-editor { border-top: 1px solid var(--task-line); padding-top: 9px; }
    details.task-editor summary { cursor: pointer; color: var(--task-muted); font-weight: 800; }
    .task-editor-form { display: grid; gap: 8px; margin-top: 9px; }
    .task-editor-form .task-row { align-items: end; }

    .task-card {
      display: grid;
      gap: 10px;
      border: 1px solid var(--task-line);
      border-radius: var(--task-radius);
      background: color-mix(in srgb, var(--task-panel-2) 62%, var(--task-panel));
      padding: 12px;
    }
    .task-card.done { opacity: .72; }
    .task-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
    .board-task-card .task-card-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .task-card-toggle {
      display: flex;
      flex: 1 1 auto;
      align-items: start;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: inherit;
      background: transparent;
      box-shadow: none;
      text-align: left;
    }
    .board-task-card .task-card-toggle {
      inline-size: 100%;
      min-block-size: 96px;
      padding: 12px;
      border: 1px solid color-mix(in srgb, var(--kanban-color) 42%, var(--task-line));
      border-radius: calc(var(--task-radius) + 3px);
      color: var(--task-text) !important;
      background: linear-gradient(135deg, color-mix(in srgb, var(--kanban-color) 27%, var(--task-panel-2)), color-mix(in srgb, var(--kanban-color) 8%, var(--task-panel))) !important;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 5px 13px color-mix(in srgb, var(--kanban-color) 13%, transparent);
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease, transform .16s ease;
    }
    .board-task-card .task-card-toggle:hover {
      color: var(--task-text) !important;
      border-color: color-mix(in srgb, var(--kanban-color) 72%, var(--task-line));
      background: linear-gradient(135deg, color-mix(in srgb, var(--kanban-color) 38%, var(--task-panel-2)), color-mix(in srgb, var(--kanban-color) 14%, var(--task-panel))) !important;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 8px 17px color-mix(in srgb, var(--kanban-color) 20%, transparent);
      transform: translateY(-1px);
    }
    .task-card-toggle:focus-visible { outline: 2px solid var(--kanban-color, var(--task-accent)); outline-offset: 3px; }
    .task-card-toggle-content { display: grid; align-content: start; gap: 8px; min-width: 0; }
    .task-card-toggle-indicator {
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      inline-size: 28px;
      block-size: 28px;
    }
    .task-card-toggle-icon { display: block; inline-size: 28px; block-size: 28px; object-fit: contain; }
    .task-card-toggle-icon--expand { filter: invert(1); }
    .task-card-toggle-icon--collapse { display: none; }
    .task-card.is-expanded .task-card-toggle-icon--expand { display: none; }
    .task-card.is-expanded .task-card-toggle-indicator { border: 1px solid color-mix(in srgb, var(--kanban-color, var(--task-accent)) 46%, var(--task-line)); border-radius: 999px; color: var(--task-text); background: color-mix(in srgb, var(--kanban-color, var(--task-accent)) 17%, transparent); }
    .task-card.is-expanded .task-card-toggle-icon--collapse { display: block; inline-size: 16px; block-size: 16px; }
    .task-title { display: block; margin: 0; font-size: 1.04rem; font-weight: 850; letter-spacing: .005em; line-height: 1.24; overflow-wrap: anywhere; }
    .task-meta { color: var(--task-muted); font-size: .78rem; display: flex; flex-wrap: wrap; gap: 6px 8px; }
    .board-task-card .task-actions { justify-content: space-between; padding-inline: 2px; }
    .task-event-link { color: var(--task-muted); font-size: .82rem; }
    .task-card-expanded { display: grid; gap: 10px; }
    .task-card-expanded[hidden] { display: none; }
    .task-card-expanded-actions { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; padding-block: 2px; }
    .task-card-expanded-actions .task-status-control { flex: 1 1 140px; }
    .task-description { color: var(--task-muted); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
    .task-description-empty { font-style: italic; }
    .label-strip { display: flex; gap: 6px; flex-wrap: wrap; }
    .task-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid color-mix(in srgb, var(--label-color) 55%, transparent);
      border-radius: 999px;
      padding: 4px 8px;
      color: var(--task-text);
      background: color-mix(in srgb, var(--label-color) 18%, transparent);
      font-size: .8rem;
      font-weight: 800;
    }
    .label-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--label-color); }

    details.task-details {
      border-top: 1px solid var(--task-line);
      padding-top: 9px;
    }
    details.task-details summary { cursor: pointer; color: var(--task-muted); font-weight: 800; }
    .checklist { display: grid; gap: 6px; margin-top: 8px; }
    .check-item { display: flex; gap: 8px; align-items: center; color: var(--task-muted); }
    .check-item input { width: auto; }
    .check-item.done span { text-decoration: line-through; color: var(--task-soft); }

    .label-editor { display: grid; gap: 8px; }
    .label-edit-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
    .label-edit-row input[type="color"] { padding: 0; min-height: 36px; }

    .event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
    .event-card {
      display: grid;
      gap: 8px;
      border: 1px solid var(--task-line);
      border-radius: var(--task-radius);
      padding: 12px;
      color: inherit;
      text-decoration: none;
      background: color-mix(in srgb, var(--task-panel-2) 54%, var(--task-panel));
    }
    .event-card:hover { border-color: color-mix(in srgb, var(--task-accent) 48%, var(--task-line)); }
    .event-card strong { overflow-wrap: anywhere; }
    .event-card span { color: var(--task-muted); font-size: .82rem; }

    .poll-box {
      display: grid;
      gap: 8px;
      border: 1px solid var(--task-line);
      border-radius: var(--task-radius);
      padding: 10px;
      background: color-mix(in srgb, var(--task-panel) 72%, black 6%);
    }
    .poll-fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
    .poll-fieldset legend { color: var(--task-muted); font-size: .86rem; font-weight: 850; }
    .poll-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
    .poll-option input { width: auto; }
    .poll-label { overflow-wrap: anywhere; }
    .poll-stat { color: var(--task-muted); font-size: .82rem; white-space: nowrap; }

    @media (max-width: 860px) {
      .tasks-setup-grid { grid-template-columns: 1fr; }
      .tasks-head { align-items: start; flex-direction: column; }
      .tasks-head-tools { width: 100%; justify-items: stretch; }
      .planning-switcher { width: 100%; }
      .planning-switcher a { flex: 1 1 50%; }
      .tasks-status { text-align: left; }
      .task-row { grid-template-columns: 1fr; }
      .task-board-toolbar { align-items: stretch; flex-direction: column; }
      .task-board-tools { justify-content: stretch; }
      .task-board-tools input,
      .task-board-tools select,
      .task-board-tools button { flex: 1 1 150px; }
      .lan-kanban-summary { grid-template-columns: minmax(0, 1fr) auto auto; }
      .lan-kanban-panel { grid-template-columns: 1fr; }
      .lan-kanban-actions { justify-content: start; }
      .lan-kanban-pairing { grid-template-columns: 1fr; }
      .kanban-board { grid-auto-flow: column; grid-auto-columns: minmax(84vw, 1fr); grid-template-columns: none; padding: 12px; }
      .kanban-column { min-height: 390px; }
      .task-card-head { align-items: stretch; flex-direction: column; }
      .task-status-control { width: 100%; }
      .kanban-delete-bin { inset-block-end: max(4.75rem, calc(8vh + env(safe-area-inset-bottom))); }
    }
    @media (pointer: coarse) {
      .task-card[data-task-draggable="true"] { touch-action: none; }
    }