/* WORK — two groups, one task, one AI (2026-09-28: "needs to be super simple").
   Layout comes from process-runtime.css (list | task | side column); this sheet is the
   list's groups, the quiet header actions, and the AI in the side column. */

/* ConForm's shared top bar (theme.css .bridgeconnect-shell-topbar): 68px, 60px from 900px down */
:root { --work-topbar-h: 68px; }
@media (max-width: 900px) { :root { --work-topbar-h: 60px; } }

/* the side column is the AI panel, edge to edge */
@media (min-width: 1151px) {
  .runtime-shell { grid-template-columns: var(--bb-rail-w) 340px minmax(420px, 1fr) 360px; }
}
.work-ai-rail { padding: 0; overflow: hidden; display: flex; background: #fff; }
.work-ai-rail > .conform-ai { flex: 1; }

/* header: the title; Your AI only where the side column is hidden; settings, quietly */
.runtime-page-actions { display: flex; align-items: center; gap: 10px; }
.work-ai-toggle { display: none; white-space: nowrap; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.work-settings-link { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; padding: 6px 4px; }
.work-settings-link:hover { color: var(--brand); text-decoration: underline; }
.work-ai-close { display: none; margin-left: 8px; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
@media (max-width: 1150px) {
  /* the side column is hidden here (process-runtime.css); the AI opens over the page */
  .work-ai-rail { display: none; }
  .work-ai-toggle { display: inline-flex; align-items: center; gap: 6px; }
  body.work-ai-open .work-ai-rail { display: flex !important; position: fixed; top: var(--work-topbar-h, 68px); right: 0; bottom: 0; width: min(400px, 100vw); z-index: 40; border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(16, 24, 40, .14); }
  body.work-ai-open .work-ai-close { display: inline-block; }
}
@media (max-width: 760px) {
  /* The list sat in the RAIL's column here (process-runtime.css puts .task-inbox in column 1
     at this width), 53px wide under the navigation — hidden only because the page used to
     open the first task over it. The list is now what a phone shows first. */
  .task-inbox, .task-work { grid-column: 2; grid-row: 2; }
  /* An open task covers the list — below ConForm's top bar, not under it (its first line,
     the way back and the thing's name, sat hidden behind the bar). */
  .task-inbox.task-open + .task-work { top: var(--work-topbar-h, 60px); }
  /* process-runtime.css turns header actions into a generic "Manage" label here; ours say what they are */
  .runtime-page-actions .header-action.work-ai-toggle { display: inline-flex; font-size: 12px; }
  .runtime-page-actions .header-action.work-ai-toggle:after { content: none; }
  .work-settings-link { display: none; }
}

/* the list: search only when there is a lot; two groups */
.work-search { grid-template-columns: 1fr; }
.work-search[hidden] { display: none; }
.work-list { padding-bottom: 12px; }
.work-group { padding: 14px 0 4px; }
.work-group h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 16px; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.work-count { border-radius: 999px; background: color-mix(in srgb, var(--brand) 10%, #fff); color: var(--brand); padding: 1px 7px; font-size: 11px; letter-spacing: 0; }
.work-group-hint { margin: -2px 0 8px; padding: 0 16px; color: var(--muted); font-size: 12px; }
.work-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; width: 100%; border: 0; border-top: 1px solid var(--line); background: #fff; padding: 13px 16px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.work-group .work-row:last-of-type { border-bottom: 1px solid var(--line); }
.work-row:hover { background: color-mix(in srgb, var(--brand) 4%, #fff); }
.work-row.selected { background: color-mix(in srgb, var(--brand) 7%, #fff); box-shadow: inset 3px 0 var(--brand); }
.work-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: -3px; }
.work-row-main { display: grid; gap: 3px; min-width: 0; }
.work-row-main strong { font-size: 13.5px; font-weight: 650; overflow-wrap: anywhere; }
/* Darker than --muted: at 12px on a selected row's tint, --muted falls under 4.5:1 (axe). */
.work-row-main span { color: #475467; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.work-row-main .work-row-who { color: var(--ink); }
.work-due { padding-top: 1px; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.work-due.warning { color: var(--warning); font-weight: 600; }
.work-due.danger { color: var(--danger); font-weight: 600; }
.work-empty { margin: 0; padding: 4px 16px 14px; color: var(--muted); font-size: 12.5px; }
.work-all-runs { display: block; padding: 12px 16px 18px; color: var(--brand); font-size: 12px; text-decoration: none; }
.work-all-runs:hover { text-decoration: underline; }

/* the open task: a way back on a phone; one primary action, one quiet one */
/* The way back to the list, on every screen: the list is the page (tasks.js showWhatIsOpen). */
.work-back { display: inline-block; margin: 0 0 8px; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 12px; padding: 0; cursor: pointer; }

/* NOTHING OPEN: one list, like the home page — no empty task pane beside it. */
.runtime-shell.work-nothing-open .task-work { display: none; }
@media (min-width: 761px) {
  .runtime-shell.work-nothing-open .task-inbox { grid-column: 2 / 4; }
  .runtime-shell.work-nothing-open .task-inbox > * { width: 100%; max-width: 820px; margin-left: auto; margin-right: auto; }
}
.task-form footer button.quiet { border-color: transparent; background: transparent; color: var(--muted); font-weight: 600; }
.task-form footer button.quiet:hover { color: var(--brand); }

/* Give to someone else */
.give-dialog { width: min(420px, calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: 0 24px 60px rgba(16, 24, 40, .18); }
.give-dialog::backdrop { background: rgba(16, 24, 40, .35); }
.give-dialog h2 { margin: 0 0 6px; font-size: 16px; }
.give-dialog p { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; }
.give-dialog label span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; }
.give-dialog select { width: 100%; height: 40px; border: 1px solid #d0d5dd; border-radius: 8px; padding: 0 10px; background: #fff; }
.give-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.give-actions button { height: 38px; padding: 0 14px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; font-weight: 650; cursor: pointer; }
.give-actions .primary { border-color: var(--brand); background: var(--brand); color: #fff; }