.kanban-page { --kanban-gutter: 30px; --kanban-canvas: var(--surface-raised); }
.kanban-workspace { grid-template-columns: minmax(0, 1fr) 240px; }
.kanban-workspace .docs-main-pane { min-width: 0; background: var(--kanban-canvas); container: kanban-pane / inline-size; }
.kanban-heading { padding: 24px var(--kanban-gutter) 20px; }
.kanban-heading .breadcrumbs { display: flex; align-items: center; gap: 10px; color: var(--subtle); font-size: .7rem; }
.kanban-heading .breadcrumbs a { color: #b5b1ff; }
.kanban-heading h1 { margin: 16px 0 10px; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; letter-spacing: -.045em; }
.kanban-heading p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; font-size: .86rem; }
.kanban-heading #kanban-help { color: var(--subtle); font-size: .72rem; }
.kanban-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 0 var(--kanban-gutter); padding: 14px; border: 1px solid rgb(0 0 0 / .22); border-radius: 7px; background: var(--surface); }
.kanban-toolbar label { display: flex; flex-direction: column; gap: 8px; color: var(--subtle); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kanban-toolbar label:first-child { flex: 1 1 240px; }
.kanban-toolbar label:nth-child(2) { flex: 0 1 180px; }
.kanban-toolbar input, .kanban-toolbar select, .kanban-move select { min-height: 44px; min-width: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 4px; background: var(--bg); color: var(--text); font: inherit; font-size: .8rem; font-weight: 400; letter-spacing: normal; text-transform: none; }
.kanban-toolbar button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-bright); border-radius: 5px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .75rem; }
.kanban-board-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 18px var(--kanban-gutter) 0; padding-top: 12px; border-top: 1px solid var(--line-bright); }
#kanban-count { color: var(--subtle); font: .62rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
#kanban-feedback { min-width: 0; margin: 0; color: var(--subtle); font-size: .7rem; overflow-wrap: anywhere; }
#kanban-feedback[data-error="true"] { color: #f08a8a; }
#kanban-jumps { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; margin: 0 var(--kanban-gutter); }
#kanban-jumps button { min-height: 44px; padding: 8px 12px; white-space: nowrap; border: 0; border-radius: 5px; background: transparent; color: var(--subtle); font: inherit; font-size: .7rem; cursor: pointer; }
/* Lanes reflow within the available pane, never into a sideways strip.
   One vertical scroll surface keeps each row's headings sticky. */
#kanban-board { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: 20px 12px; align-items: stretch; align-content: start; overflow-x: hidden; overflow-y: auto; height: clamp(320px, 64vh, 760px); height: clamp(320px, 64dvh, 760px); margin: 0 var(--kanban-gutter) 24px; scroll-padding: 58px 4px 8px; scrollbar-color: #5c606a var(--kanban-canvas); }
/* The columns are layout lanes, not panels. Only their headings carry a rule. */
.kanban-column { min-width: 0; min-height: 0; border: 0; background: transparent; }
.kanban-column > h2 { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; min-height: 48px; padding: 8px 2px; border-bottom: 1px solid var(--line-bright); background: var(--kanban-canvas); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.kanban-column[data-status="in_progress"] > h2 { color: #b5b1ff; }
.kanban-column[data-status="finished"] > h2 { color: #79bd97; }
.kanban-column-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 4px; background: var(--surface); color: var(--subtle); font: .65rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: normal; }
.kanban-cards { display: grid; gap: 10px; padding: 12px 2px 16px; }
.kanban-card { position: relative; min-width: 0; padding: 12px 14px 0; border: 1px solid rgb(0 0 0 / .24); border-radius: 7px; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .13); overflow-wrap: anywhere; transition: border-color .2s ease, box-shadow .2s ease; }
.kanban-card:has(.kanban-grip) :is(.kanban-card-top, h3) { padding-right: 30px; }
.kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kanban-source-link { color: #b5b1ff; font-size: .7rem; }
.kanban-card .kanban-source-link { color: #b5b1ff; font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.kanban-card h3 { margin: 0; font-size: .88rem; font-weight: 650; line-height: 1.45; }
.kanban-open-note { display: block; width: 100%; min-height: 44px; padding: 5px 0; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.kanban-open-note span, .kanban-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.kanban-card .kanban-excerpt { margin: 0 0 10px; color: var(--subtle); white-space: pre-wrap; font-size: .75rem; line-height: 1.5; }
.kanban-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -14px; padding: 0 6px; border-top: 1px solid rgb(255 255 255 / .045); }
.kanban-move { display: flex; align-items: center; flex: 1; min-width: 0; gap: 6px; color: var(--subtle); font-size: .7rem; }
.kanban-move select { flex: 1; width: 0; padding: 6px; font-size: .72rem; }
.kanban-card .kanban-move { position: relative; flex: 0 0 auto; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 4px; color: var(--muted); font-size: .7rem; cursor: pointer; }
.kanban-card .kanban-move::after, .kanban-signin-move::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); }
/* Keep the platform's native picker without a repeated form field on every card. */
.kanban-card .kanban-move select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kanban-card .kanban-move:focus-within { outline: 2px solid var(--accent-bright); outline-offset: -2px; }
.kanban-signin-move, .kanban-card-read { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: .7rem; cursor: pointer; }
.kanban-card-read { color: var(--subtle); }
.kanban-card-read::after { content: '↗'; font-size: .85rem; }
.kanban-grip { position: absolute; top: 3px; right: 3px; width: 44px; height: 44px; border: 0; border-radius: 5px; background: transparent; color: var(--subtle); font-size: 20px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.kanban-card.is-dragging { opacity: .55; outline: 2px solid var(--accent); }
.kanban-column.is-drop-target > h2 { color: #c2bfff; border-bottom-color: var(--accent-bright); box-shadow: 0 2px 0 var(--accent-bright); }
.kanban-column.is-drop-target .kanban-cards { outline: 1px dashed var(--accent-bright); outline-offset: -2px; border-radius: 7px; }
.kanban-empty { margin: 10px 12px; color: var(--subtle); font-size: .72rem; }
.kanban-page button:disabled { opacity: .5; cursor: wait; }
.kanban-page :is(button, select, input, a, [tabindex]):focus-visible { outline: 2px solid #b5b1ff; outline-offset: 3px; }
.kanban-page :is(button, select) { -webkit-tap-highlight-color: transparent; }
#kanban-note-dialog { width: min(580px, calc(100% - 32px)); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); box-sizing: border-box; margin: auto; padding: 0; border: 1px solid #41434a; border-radius: 7px; background: #2b2d31; color: var(--text); }
#kanban-note-dialog[open] { display: flex; flex-direction: column; }
#kanban-note-dialog::backdrop { background: rgb(0 0 0 / .65); }
.kanban-dialog-header { display: flex; align-items: start; gap: 12px; flex-shrink: 0; padding: 16px 16px 12px; border-bottom: 1px solid #41434a; }
.kanban-dialog-header h2 { flex: 1; min-width: 0; margin: 0; align-self: center; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; max-height: 22vh; overflow-y: auto; }
#kanban-note-close { flex: 0 0 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.kanban-dialog-content { padding: 16px; overflow-y: auto; overscroll-behavior: contain; }
#kanban-note-meta { margin: 0 0 12px; color: var(--subtle); font-size: .75rem; }
#kanban-note-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.65; }
.kanban-dialog-footer { flex-shrink: 0; padding: 12px 16px; border-top: 1px solid #41434a; }
.kanban-dialog-footer .kanban-move { max-width: 300px; }
.kanban-dialog-footer select { font-size: .85rem; }
#kanban-note-actions p, #kanban-note-feedback { margin: 0 0 8px; font-size: .78rem; line-height: 1.5; color: var(--muted); }
#kanban-note-feedback:empty { display: none; }
#kanban-note-feedback:not(:empty) { margin: 10px 0 0; }
#kanban-note-feedback[data-error="true"] { color: #f08a8a; }
.kanban-dialog-sign-in { min-height: 44px; padding: 8px 12px; border: 1px solid #41434a; border-radius: 4px; background: #383a40; color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .kanban-card:hover { border-color: #4e5058; box-shadow: 0 4px 12px rgb(0 0 0 / .14); }
  .kanban-grip:hover, .kanban-card .kanban-move:hover, .kanban-card-read:hover, .kanban-signin-move:hover, #kanban-note-close:hover, #kanban-jumps button:hover, .kanban-toolbar button:hover { background: var(--surface-hover); color: var(--text); }
  .kanban-open-note:hover { color: #b5b1ff; }
}
/* Give ordinary laptops the full canvas. Page notes remain below the board. */
@media (max-width: 1600px) {
  .kanban-page .app-main { height: auto; overflow: visible; }
  .kanban-workspace { height: auto; overflow: visible; }
  .kanban-workspace .docs-main-pane { overflow: visible; height: auto; }
  .kanban-workspace { grid-template-columns: minmax(0, 1fr); }
  .kanban-workspace .notes-sidebar { border-top: 1px solid #41434a; border-left: 0; }
}
@container kanban-pane (min-width: 560px) {
  #kanban-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container kanban-pane (min-width: 880px) {
  #kanban-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container kanban-pane (min-width: 1360px) {
  #kanban-board { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.kanban-page [hidden] { display: none !important; }
@media (max-width: 620px) {
  .kanban-page { --kanban-gutter: 16px; }
  .kanban-heading { padding: 20px var(--kanban-gutter) 18px; }
  .kanban-toolbar { padding: 12px; gap: 10px; }
  .kanban-toolbar label, .kanban-toolbar label:first-child, .kanban-toolbar label:nth-child(2) { flex: 1 1 110px; min-width: 0; }
  .kanban-board-meta { gap: 6px; }
  /* Native phone pickers stay readable without triggering iOS input zoom. */
  .kanban-toolbar input, .kanban-toolbar select, .kanban-move select { font-size: 16px; }
  #kanban-note-dialog { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .kanban-dialog-footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}