/* The Work tab: category columns, the list, and the docked accordion.
   Cards are rounded boxes with an even outline; status shows through the
   symbol, the label on its tint and the bar, never an accent stripe down one
   side. Narrow layout follows the width of .page, like views.css. */

.work { display: flex; flex-direction: column; gap: 14px; min-height: 100%; width: 100%; min-width: 0; }
.work > .wattn, .work > .wattn-none, .work > .switcher { flex: none; }
.page:has(> .work-columns) { padding-bottom: 12px; display: flex; flex-direction: column; }
.page > .work-columns { flex: 1 1 auto; min-height: 560px; }

/* ------------------------------------------------------ board attention */

.wattn { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.wattn-none { padding: 8px 4px; color: var(--ink-2); }
.wattn-strip { display: flex; align-items: stretch; gap: 0; padding: 10px 6px 10px 16px; }
.wa-count { align-self: center; flex: none; padding-right: 18px; font-size: 15px; max-width: 150px; line-height: 1.25; }
.wa-cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); flex: 1; min-width: 0; }
.wa-cell { display: flex; align-items: center; gap: 12px; padding: 4px 16px; min-width: 0; border-left: 1px solid var(--line-soft); border-radius: 0; }
.wa-cell:hover { background: var(--surface-2); }
.wa-text { display: grid; min-width: 0; gap: 2px; }
.wa-line1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; }
.wa-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-kind { font-weight: 650; flex: none; }
.kind-blocked .wa-kind { color: var(--st-orange-text); }
.kind-failed .wa-kind { color: var(--st-red-text); }
.kind-overdue .wa-kind { color: var(--warn); }
.kind-stale .wa-kind { color: var(--ink); }
.wa-line2 { color: var(--muted); font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wa-more { flex: none; font-size: 12px; font-weight: 650; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); }
.wa-all { align-self: center; flex: none; }
.wattn-list { border-top: 1px solid var(--line-soft); padding: 4px 8px; }
.wattn-list li + li { border-top: 1px solid var(--line-soft); }
.wa-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 8px; }
.wa-row:hover { background: var(--surface-2); }
.wa-row .wa-text { flex: 1; }
.wa-chev { color: var(--blue); flex: none; }

/* The attention strip stacks its entries when three side by side leave each one a few characters. */
@container page (max-width: 900px) {
  .wattn-strip { flex-wrap: wrap; padding: 10px 12px; row-gap: 6px; }
  .wa-count { max-width: none; flex: 1 1 auto; padding-right: 8px; }
  .wa-cells { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); flex: 1 1 100%; order: 3; }
  .wa-cell { padding: 8px 6px; border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* -------------------------------------------------------------- switcher */

.switcher { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: thin; }
.chip { flex: none; height: 40px; padding: 0 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink-2); font-size: 15px; font-weight: 500; }
.chip:hover { border-color: var(--blue); color: var(--ink); }
.chip.is-active { background: var(--blue-wash); border-color: var(--blue); color: var(--blue-strong); font-weight: 650; }

/* --------------------------------------------------------------- columns */

.columns { display: flex; align-items: stretch; gap: 12px; flex: 1 1 auto; min-height: 480px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 12px; scrollbar-width: thin; outline: none; }
.wcol { flex: 1 1 300px; min-width: min(300px, 100%); display: flex; flex-direction: column; min-height: 0; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.wcol.is-picked { border-color: var(--blue); }
.wcol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px 10px; }
.wcol-head h2 { font-size: 21px; font-weight: 750; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wcol-count { color: var(--blue-strong); font-size: 14px; flex: none; text-align: right; }
.wcol-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-content: start; align-items: start; gap: 10px; padding: 0 10px 10px; }
.wcol-empty { color: var(--muted); padding: 10px 6px; }
.wcol-foot { padding: 0 10px 10px; }

.wadd { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--blue-strong); font-size: 15px; font-weight: 500; }
.wadd:hover { border-color: var(--blue); background: var(--blue-wash); }
.wadd-dashed { border-style: dashed; background: transparent; margin-top: 4px; }
.wadd-link { width: auto; min-height: 36px; border: 0; background: transparent; margin-left: auto; }

/* ----------------------------------------------------------------- cards */

.wcard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 12px 12px; display: grid; gap: 8px; cursor: pointer; }
.wcard:hover { border-color: var(--blue); }
.wcard.is-selected { border: 2px solid var(--blue); padding: 11px; }
.wc-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title pct" "icon status status"; align-items: center; gap: 6px 10px; }
.wcard:not(.has-icon) .wc-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title pct" "status status"; }
.wc-icon { grid-area: icon; align-self: start; }
.wc-title { grid-area: title; font-size: 16px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.wc-title:hover { color: var(--blue-strong); }
.wc-pct { grid-area: pct; font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wc-status { grid-area: status; display: flex; align-items: center; gap: 8px; min-width: 0; }
.wc-due { display: flex; align-items: center; gap: 8px; color: var(--warn); font-weight: 600; font-size: 15px; }
.wbar { display: block; height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.wbar > i { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.wc-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 13px; color: var(--muted); min-width: 0; }
.wc-who { color: var(--ink-2); }
.wc-meta .wr-link { margin-left: auto; }
.wc-reason { color: var(--ink-2); font-size: 14px; }
.dot { color: var(--muted); }

.wr-link { display: inline-flex; align-items: center; gap: 5px; color: var(--blue-strong); font-size: 13px; }
.wr-link-text { display: none; text-decoration: underline; }

/* subtask rows: plain, indented, with tree lines */
.wchildren { display: grid; margin: 4px 0 0 10px; padding-left: 16px; }
.wchildren-root { margin: 0; padding: 0; }
.wnode { position: relative; }
.wnode::before { content: ""; position: absolute; left: -16px; top: 0; height: 26px; width: 14px; border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); border-bottom-left-radius: 8px; }
.wnode:not(:last-child)::after { content: ""; position: absolute; left: -16px; top: 26px; bottom: 0; border-left: 2px solid var(--line); }
.wchildren-root > .wnode::before, .wchildren-root > .wnode::after { display: none; }
.wrow { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "sym title" "sym meta"; align-items: center; column-gap: 10px; row-gap: 1px; padding: 6px 4px; min-height: 52px; border-radius: 8px; }
.wrow:hover { background: var(--surface-2); }
.wrow.is-selected { outline: 2px solid var(--blue); outline-offset: -2px; }
.wr-sym { grid-area: sym; display: inline-flex; color: var(--muted); }
.wr-title { grid-area: title; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.wr-title:hover { color: var(--blue-strong); }
.wr-meta { grid-area: meta; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; min-width: 0; }
.wr-pct { color: var(--ink-2); }
.wr-reason { grid-column: 2; color: var(--ink-2); font-size: 13px; }
.wrow > .wr-link { grid-area: meta; justify-self: end; }
.wrow-note .wr-title { font-weight: 400; color: var(--ink-2); }
.wrow-note { grid-template-areas: "sym title"; min-height: 40px; }

/* ------------------------------------------------------------------ list */

.list { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
/* Not a scroll box and not clipped: the columns drop out as the page narrows so it never overflows sideways, and any clip (the rounded corners count) would cut off a category menu that hangs below the last group. */
.lhead, .lrow { display: grid; grid-template-columns: minmax(240px, 1.5fr) minmax(250px, 1.5fr) minmax(190px, .9fr) 120px minmax(190px, .8fr) 28px; align-items: center; column-gap: 16px; padding: 0 16px; }
.lhead { min-height: 44px; color: var(--ink-2); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line-soft); }
/* Created by goes first, then Updated, then the progress bar and the reason, as the page narrows, so the list fits
   without scrolling sideways down to the window's 430 px minimum. Children are: Work, Status, Progress, Updated,
   Created by, the arrow. */
@container page (max-width: 1160px) {
  .lhead, .lrow { grid-template-columns: minmax(220px, 1.5fr) minmax(210px, 1.3fr) minmax(170px, .9fr) 110px 28px; }
  .lhead > :nth-child(5), .lrow > :nth-child(5) { display: none; }
}
@container page (max-width: 860px) {
  .lhead, .lrow { grid-template-columns: minmax(150px, 1.6fr) minmax(190px, 1.2fr) minmax(140px, .9fr) 24px; column-gap: 12px; }
  .lhead > :nth-child(4), .lrow > :nth-child(4) { display: none; }
}
@container page (max-width: 640px) {
  .lhead, .lrow { grid-template-columns: minmax(0, 1fr) auto auto 20px; column-gap: 10px; padding: 0 10px; }
  .lrow .lr-reason, .lrow .lr-progress .wbar { display: none; }
}
.lgroup { border-bottom: 1px solid var(--line-soft); }
.lgroup:last-child { border-bottom: 0; }
.lgroup-head { display: flex; align-items: center; min-height: 44px; padding: 0 8px; }
.lg-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; background: transparent; border-radius: 8px; }
.lg-toggle h2 { font-size: 17px; font-weight: 650; }
.lg-hidden { margin-left: 4px; color: var(--muted); font-size: 14px; }
.lg-chev { display: inline-flex; transform: rotate(-90deg); color: var(--ink-2); transition: transform .12s; }
.lg-chev.is-open { transform: none; }
.lrow { min-height: 46px; border-top: 1px solid var(--line-soft); cursor: pointer; }
.lrow:hover { background: var(--surface-2); }
.lrow.is-selected { outline: 2px solid var(--blue); outline-offset: -2px; }
.lr-work { display: flex; align-items: center; gap: 12px; min-width: 0; padding-left: calc(var(--depth, 0) * 28px); }
.lr-gap { display: inline-block; width: 24px; flex: none; }
.lr-title { font-size: 15.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow:not(.is-child) .lr-title { font-weight: 600; }
.lr-title:hover { color: var(--blue-strong); }
.lr-status { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lr-status .pill { flex: none; }
.lr-reason { color: var(--muted); font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-progress { display: flex; align-items: center; gap: 12px; }
.lr-progress b { min-width: 38px; font-weight: 650; font-size: 14.5px; }
.lr-progress .wbar { flex: 1; max-width: 140px; }
.lr-upd, .lr-who { font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-chev { color: var(--ink-2); }
.lgroup-foot { display: flex; padding: 0 12px 6px; }
.lgroup-foot .wadd-link { margin-left: auto; }

/* ------------------------------------------------------ docked accordion */

.accordions { display: grid; border-top: 1px solid var(--line); }
.acc { position: relative; border-bottom: 1px solid var(--line); }
.acc > .cat-menu { position: absolute; right: 0; top: 11px; }
.acc-head.has-menu { padding-right: 48px; }
.acc-head { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 0 4px; border: 0; background: transparent; text-align: left; }
.acc-head h2 { flex: 1; font-size: 24px; font-weight: 750; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-chev { display: inline-flex; color: var(--ink-2); transition: transform .12s; }
.acc.is-open .acc-chev { transform: rotate(90deg); }
.acc-count { flex: none; padding: 5px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.acc-body { display: grid; gap: 12px; padding: 4px 0 16px; }

.wattn-stack { background: var(--attention-bg); border-color: var(--attention-line); padding: 12px 10px 6px; box-shadow: none; border-radius: 12px; }
.wattn-stack h2 { font-size: 22px; padding: 0 4px 10px; }
.wattn-stack ul { display: grid; gap: 8px; }
.wattn-stack .wa-row { align-items: center; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.wattn-stack .kind-failed { background: var(--st-red-tint); border-color: transparent; }
.wattn-stack .kind-blocked, .wattn-stack .kind-overdue { background: var(--st-orange-tint); border-color: transparent; }
.wattn-stack .kind-stale { background: var(--st-slate-tint); border-color: transparent; }
.wattn-stack .wa-line2 { -webkit-line-clamp: 3; }

.app[data-mode="docked"] .work { gap: 12px; }
@container page (max-width: 720px) {
  .wr-link-text { display: inline; }
  .wcard { padding: 14px; }
  .wc-main, .wcard:not(.has-icon) .wc-main { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon title status" "icon title pct"; align-items: start; }
  .wcard:not(.has-icon) .wc-main { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title status" "title pct"; }
  .wc-pct { justify-self: end; font-size: 16px; }
  .wc-title { font-size: 20px; font-weight: 700; }
}

.chip-add { display: inline-flex; align-items: center; gap: 6px; color: var(--blue-strong); border-style: dashed; }
.add-category { align-self: flex-start; }

/* ------------------------------------------------------ reordering categories */

.wcol-head .cat-menu, .lgroup-head .cat-menu { margin-left: 6px; align-self: center; }
.cat-more { width: 34px; height: 34px; }
.menu-cat { top: calc(100% + 4px); right: 0; left: auto; min-width: 180px; z-index: 60; }
.menu-item:disabled { color: var(--muted); opacity: .6; cursor: default; }
.menu-item:disabled:hover { background: transparent; }
.is-draggable { cursor: grab; }
.chip[draggable="true"], .wcol-head[draggable="true"] { -webkit-user-select: none; user-select: none; }
.is-dragging { opacity: .45; }
/* The drop marker: a bar on the side the dragged category would land. */
.chip, .wcol, .lgroup { position: relative; }
.chip.drop-before::before, .chip.drop-after::before, .wcol.drop-before::before, .wcol.drop-after::before,
.lgroup.drop-before::before, .lgroup.drop-after::before { content: ""; position: absolute; background: var(--blue); border-radius: 2px; pointer-events: none; z-index: 5; }
.chip.drop-before::before { left: 0; top: 0; bottom: 0; width: 4px; }
.chip.drop-after::before { right: 0; top: 0; bottom: 0; width: 4px; }
.wcol.drop-before::before { left: 0; top: 0; bottom: 0; width: 5px; }
.wcol.drop-after::before { right: 0; top: 0; bottom: 0; width: 5px; }
.lgroup.drop-before::before { left: 0; right: 0; top: 0; height: 4px; }
.lgroup.drop-after::before { left: 0; right: 0; bottom: 0; height: 4px; }