/* The Tasks page, drawn by app/tasks-page.js: the My tasks | Task plan tabs,
   the four controls, the count line, the groups and their rows, the row's
   '…' menu, Manage lists and the Task plan sections. Loaded after
   extensions.css; nothing here restyles another page. */
.tasks-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* My tasks | Task plan */
.tasks-tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tasks-tabs button{margin-bottom:-1px;padding:9px 12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:600 13.5px "Bricolage Grotesque",sans-serif;white-space:nowrap;cursor:pointer}
.tasks-tabs button[aria-selected="true"]{border-bottom-color:#ff2365;color:var(--ink)}
.tasks-tabs button:focus-visible{border-radius:4px;outline:2px solid #ff2365;outline-offset:-2px}

/* Controls and the count line */
.tasks-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.tasks-controls-end{display:flex;align-items:center;gap:8px;margin-left:auto}
.tasks-field{display:inline-flex;align-items:center;gap:7px;min-width:0;height:34px;margin:0;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);font:500 12.5px "Bricolage Grotesque",sans-serif;letter-spacing:0;text-transform:none}
.tasks-field:focus-within{border-color:#c9c6bb;outline:2px solid #ff2365;outline-offset:1px}
.tasks-field>span{white-space:nowrap}
.tasks-field select,.tasks-field input{min-width:0;height:auto;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;box-shadow:none;color:var(--ink);font:600 13px "Bricolage Grotesque",sans-serif}
.tasks-field select{width:auto;max-width:200px;padding-right:2px;cursor:pointer}
.tasks-search{flex:1 1 200px;min-width:170px;max-width:300px}
.tasks-search input{width:100%;font-weight:500}
.tasks-search input::placeholder{color:var(--muted)}
.tasks-add{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tasks-countline{display:flex;flex-wrap:wrap;gap:4px 12px;margin:-4px 0 14px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.tasks-summary{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin:-4px 0 14px}
.tasks-summary .tasks-countline{margin:0}
.tasks-countline-filter{color:var(--ink);font-weight:600}
.tasks-link{display:inline;margin:0;padding:0;border:0;background:none;color:#b3123f;font-family:inherit;font-size:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tasks-link:focus-visible{border-radius:3px;outline:2px solid #ff2365;outline-offset:2px}

/* Manage lists */
.tasks-manage{position:relative}
.tasks-manage>summary{list-style:none;cursor:pointer}
.tasks-manage>summary::-webkit-details-marker{display:none}
.tasks-manage-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:8px;width:min(360px,calc(100vw - 32px));padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 12px 32px rgba(45,45,47,.16)}
.tasks-manage-pop p{margin:0;color:var(--muted);font-size:12.5px}
.tasks-manage-list{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;padding-top:8px;border-top:1px solid #eeecf0}
.tasks-manage-list span{display:grid;min-width:0}
.tasks-manage-list strong{overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.tasks-manage-list small{color:var(--muted);font-size:12px}

/* Groups */
.tasks-groups{display:grid;gap:12px}
.tasks-group{padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tasks-group h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 6px}
.tasks-group-head,.tasks-group-quiet{display:flex;align-items:baseline;gap:8px;min-width:0;border:0;background:none;padding:0;color:var(--ink);font:600 14px "Poppins",sans-serif;text-align:left;cursor:pointer}
.tasks-group-head::before,button.tasks-group-quiet::before{content:"▾";color:var(--muted);font-size:11px}
button.tasks-group-quiet::before{content:"▸"}
.tasks-count{color:var(--muted);font:500 12.5px "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums}
.tasks-group-quiet{width:100%;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--muted);font:600 13.5px "Bricolage Grotesque",sans-serif}
.tasks-group-quiet .tasks-count{margin-left:auto}
button.tasks-group-quiet:hover{background:#faf8fa}
.tasks-group-quiet.is-empty{cursor:default}
.tasks-group-head:focus-visible,.tasks-group-quiet:focus-visible{border-radius:6px;outline:2px solid #ff2365;outline-offset:2px}
.tasks-group-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding-right:16px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tasks-group-line .tasks-group-quiet{flex:1 1 320px;width:auto;border:0}
.tasks-group-name{color:var(--ink)}
.tasks-group-date,.tasks-group-producer{color:var(--muted);font:500 12.5px "Bricolage Grotesque",sans-serif}
.tasks-group-counts{margin-left:auto;color:var(--muted);font:500 12.5px "Bricolage Grotesque",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.tasks-group h3 .tasks-link,.tasks-group-line .tasks-link{font-size:12.5px}
.tasks-dot{display:inline-block;width:8px;height:8px;flex:none;border-radius:50%;background:var(--branch-color,#6b6b70)}
.tasks-dot.is-general{background:#6b6b70}
.tasks-hidden-note{margin:8px 0 0;color:var(--muted);font-size:12.5px}
.tasks-more{display:block;margin-top:8px;font-size:13px}

/* Rows */
.tasks-row{display:grid;grid-template-columns:18px minmax(0,1fr) 160px 110px 32px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #eeecf0;font-size:13.5px}
.tasks-rows .tasks-row:first-child{border-top:0}
.tasks-tick{width:16px;height:16px;margin:0;accent-color:#2fb872;cursor:pointer}
.tasks-row-main{display:grid;min-width:0}
.tasks-row-name{font-weight:500;overflow-wrap:anywhere}
.tasks-row.is-done .tasks-row-name{color:var(--muted);text-decoration:line-through}
.tasks-row-sub{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--muted);font-size:12px;font-weight:400}
.tasks-row-sub .tasks-dot{width:7px;height:7px}
.tasks-mark{display:inline-flex;margin-left:6px;padding:1px 6px;border-radius:999px;background:#ecebef;color:#4f4f55;font:600 10.5px "Bricolage Grotesque",sans-serif;vertical-align:1px}
.tasks-mark.is-priority{background:#ffe3ec;color:#b3123f}
.tasks-owner{max-width:100%;min-width:0;overflow:hidden;color:var(--muted);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap}
/* The owner reads as quiet text, as in the approved mockup; an event task's
   owner is still the assign button, so it shows its hover. */
.tasks-row .tasks-owner,.tasks-plan-task .tasks-owner{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:3px 8px 3px 3px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--muted);font:500 12.5px "Bricolage Grotesque",sans-serif}
.tasks-plan-task .tasks-owner{padding-left:0}
.tasks-row .tasks-owner .task-avatar-group{display:inline-flex;flex:none}
.tasks-row .tasks-owner>span:last-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tasks-row button.tasks-owner:hover{background:#ecebef;color:var(--ink)}
.tasks-row button.tasks-owner:focus-visible{outline:2px solid #ff2365;outline-offset:1px}
.tasks-owner.is-unassigned span{font-style:italic}
.tasks-due{color:var(--muted);font-size:12.5px;font-weight:600;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tasks-due.is-late{color:#c8102e}
.tasks-due.is-soon{color:#9a6817}
.tasks-due.is-done{color:#17613c}

/* The row's … menu */
.tasks-row-menu{position:relative;justify-self:end}
.tasks-row-menu>summary{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:var(--muted);list-style:none;cursor:pointer}
.tasks-row-menu>summary::-webkit-details-marker{display:none}
.tasks-row-menu>summary:hover,.tasks-row-menu[open]>summary{background:#ecebef;color:var(--ink)}
.tasks-row-menu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:30;display:grid;gap:6px;width:260px;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 12px 32px rgba(45,45,47,.16)}
.tasks-row-menu-pop>button{padding:6px 8px;border:0;border-radius:7px;background:none;color:var(--ink);font:600 13px "Bricolage Grotesque",sans-serif;text-align:left;cursor:pointer}
.tasks-row-menu-pop>button:hover{background:#faf8fa}
.tasks-menu-status{display:grid;gap:3px;margin:0;padding:0 8px;color:var(--muted);font-size:12px;letter-spacing:0;text-transform:none}
.tasks-menu-status select{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);font:500 13px "Bricolage Grotesque",sans-serif}
.tasks-row-menu-pop .task-app-actions{margin:4px 0 0;padding:8px 8px 0;border-top:1px solid #eeecf0}
.tasks-foot{margin:18px 0 0;font-size:13px}

/* Empty states */
.tasks-empty{padding:34px 20px;border:1px dashed var(--line);border-radius:12px;background:var(--paper);text-align:center}
.tasks-empty strong{display:block;margin-bottom:4px;font:600 16px "Poppins",sans-serif}
.tasks-empty p{margin:0 0 12px;color:var(--muted)}
.tasks-empty p:last-child{margin-bottom:0}

/* Task plan */
.tasks-plan-note{max-width:72ch;margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:13.5px;line-height:1.5}
.tasks-plan-readonly{margin:-4px 0 14px;color:var(--muted);font-size:12.5px}
.tasks-plan-sections{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tasks-plan-section+.tasks-plan-section{border-top:1px solid #eeecf0}
.tasks-plan-head{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;background:transparent;color:var(--ink);font:500 14px "Bricolage Grotesque",sans-serif;text-align:left;cursor:pointer}
.tasks-plan-head:hover{background:#faf8fa}
.tasks-plan-head:focus-visible{outline:2px solid #ff2365;outline-offset:-2px}
.tasks-plan-section-name{flex:1;font-weight:600}
.tasks-plan-head .tasks-icon{color:var(--muted);transition:transform .15s}
.tasks-plan-head[aria-expanded="true"] .tasks-icon{transform:rotate(180deg)}
.tasks-plan-tasks{padding:0 16px 8px}
.tasks-plan-task{display:grid;grid-template-columns:minmax(0,1fr) 150px 230px auto;gap:12px;align-items:center;padding:9px 0;border-top:1px solid #eeecf0;font-size:13.5px}
.tasks-plan-name{display:grid;gap:3px;min-width:0}
.tasks-plan-name small{color:var(--muted);font-size:12px}
.tasks-plan-name .blueprint-branch-badge{justify-self:start}
.tasks-plan-when{color:var(--muted);font-size:12.5px}
.tasks-plan-task .blueprint-actions{display:flex;gap:6px}

@media(max-width:760px){
  .tasks-field{flex:1 1 auto}
  .tasks-field select{max-width:none;flex:1}
  .tasks-search{flex:1 1 100%;max-width:none}
  .tasks-controls-end{flex:1 1 100%;margin-left:0}
  .tasks-manage{position:static}
  .tasks-manage-pop{left:0;right:0;width:auto}
  .tasks-row{grid-template-columns:18px minmax(0,1fr) 32px;row-gap:2px}
  .tasks-row .tasks-owner,.tasks-row .tasks-due{grid-column:2;text-align:left}
  .tasks-row .tasks-row-menu{grid-column:3;grid-row:1}
  .tasks-plan-task{grid-template-columns:1fr;gap:4px}
  .tasks-group-counts{margin-left:0}
}