/* Task detail: header, next action, chips, disclosures and the Steps/Activity
 * columns. Loaded after views.css so these override the older detail rules. */

/* widen the page (padding/narrow fallbacks stay in views.css / stage.css) */
.detail{max-width:1100px}

/* ── header action row ── */
.d-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.d-actions .ibtn.danger{margin-left:auto;color:var(--muted)}
.d-actions .ibtn.danger:hover{color:var(--danger);background:var(--hover)}
.d-actions .ibtn.danger:focus-visible{outline:2px solid var(--accent);outline-offset:1px;color:var(--danger)}
.detail .d-title{font-size:30px;font-weight:650;line-height:1.2}

/* ── property chips ── */
.d-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0 16px}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--side);color:var(--text)}
.chip:hover{border-color:var(--faint)}
.chip.none{color:var(--faint)}
.chip .pill{pointer-events:none}
.chip .ic{width:12px;height:12px;color:var(--faint)}

/* ── next-action panel ── */
.next{margin:0 0 16px}
.na-h{font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 8px}
.na-card{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line-soft);border-left:3px solid var(--accent);border-radius:var(--r3);background:var(--raised)}
.na-text{font-size:20px;line-height:1.35;font-weight:500;overflow-wrap:anywhere;min-width:0}
.na-card .btn{flex:none;margin-left:auto}
textarea.na-field{flex:1;min-width:180px;font-size:20px;line-height:1.35;font-weight:500;min-height:30px;background:transparent;border:1px solid transparent;border-radius:var(--r2);padding:4px 8px;margin:-4px -8px;width:auto;resize:none;overflow:hidden;outline:0;color:var(--text)}
textarea.na-field:hover{background:var(--hover)}
textarea.na-field:focus{border-color:var(--accent);background:var(--stage)}
.na-card .btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.na-then{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 2px 0;color:var(--faint);font-size:12px}
.na-then .then{color:var(--muted)}
.next.done .na-card{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,var(--stage))}
.next.waiting .na-card{border-left-color:var(--warn)}
.next.none .na-card{border-left-color:var(--line);background:var(--side)}
.waiting-list{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wlabel{color:var(--faint);font-size:12px}
.wnote{display:inline-flex;align-items:center;min-height:24px;height:auto;padding:3px 10px;border:1px dashed var(--line);border-radius:999px;color:var(--muted);font-size:12px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.waiting-list .lnk{max-width:100%;overflow-wrap:anywhere}

/* ── question cue ── */
.qcue{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r3);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.qcue .qtext{flex:1;min-width:0;color:var(--text);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qbadge{display:none;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;place-items:center}

/* ── Details & notes disclosure ── */
.ddisc{margin:0 0 18px}
.disc-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid var(--line-soft);border-radius:var(--r3);background:var(--side);color:var(--muted);text-align:left}
.disc-btn:hover{background:var(--hover);color:var(--text)}
.disc-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.disc-btn .ic{width:13px;height:13px;flex:none;color:var(--faint);transition:transform .12s}
.disc-btn[aria-expanded="true"] .ic{transform:rotate(90deg)}
.disc-btn > span:first-of-type{font-weight:600;color:var(--text)}
.disc-sum{color:var(--faint);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:auto}
.ddet{margin-top:8px}
textarea.det-notes{width:100%;margin:0;min-height:70px}

/* step result disclosure */
.dres-wrap{margin:0 0 6px 34px}
.disc-btn.sm{width:auto;padding:2px 6px;border:0;background:transparent;color:var(--accent);font-size:11px}
.disc-btn.sm:hover{background:none;color:var(--text)}
.dresult{margin-top:4px;padding:6px 10px;border-left:2px solid var(--med);background:var(--side);border-radius:0 6px 6px 0;color:var(--muted);font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}

/* ── Steps / Activity columns ── */
.detail-cols{display:flex;flex-direction:column;gap:18px;margin-top:4px}
.dcol{min-width:0}
.detail-cols{min-width:0}
.stepsbox,.actbox{min-width:0}
.detail .d-h{font-size:18px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text);margin:0 0 8px}
.detail .d-h .count{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint)}
.stepsbox,.actbox{border:1px solid var(--line-soft);border-radius:var(--r3);padding:12px 14px;background:color-mix(in srgb,var(--side) 55%,transparent)}
.dcol > .d-h{margin-top:0}
.stepsbox .dstep.cur{background:var(--sel-off);box-shadow:inset 2px 0 0 var(--accent)}
.stepsbox .dstep .pin{min-width:0}
.detail .props .pin,.detail .props select.pin,.detail .props textarea.pin{min-width:0}
.na-card{min-width:0}
.waiting-list{max-width:100%}
.actbox .act{margin-top:4px}
.actbox .ae time{color:var(--faint)}
/* one flat conversation: neutral borders, no per-sender edge, no indent;
   the accent edge is reserved for the current live question (.q) */
.actbox .ab{border-color:var(--line-soft)}
.actbox .ab.agent{border-left:0}
.actbox .ab.you{margin-left:0}
.actbox .ab.agent.q{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--side))}

/* two columns only when the stage itself is wide (the sidebar resizes) */
@container stage (min-width:880px){
  .detail-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px;align-items:start}
}

/* ── narrow stage ── */
@container stage (max-width:520px){
  .qcue{position:relative;flex-wrap:wrap;padding-right:36px}
  .qbadge{display:grid;position:absolute;top:6px;right:8px}
  .qcue .qtext{flex:1 1 100%;white-space:normal;overflow:visible;text-overflow:clip}
  .qcue .lnk{flex:none}
  .detail .d-title{font-size:24px}
  .na-text{font-size:18px}
  .na-card .btn{margin-left:0}
  .stepsbox,.actbox{padding:10px 10px}
  .dstep{display:flex;flex-wrap:nowrap;gap:6px;padding:4px;min-height:0}
  .dstep > .chk{flex:none}
  .stepsbox .dstep > input[data-f="label"]{flex:1 1 auto;min-width:110px}
  .dstep > select.pin,.dstep > input.est{display:none}   /* assignee and estimate stay editable on a wide stage */
  .dstep > .del{flex:none;opacity:1}
  .dres-wrap{margin-left:0}
  .dadd{row-gap:6px}
  .dadd input{min-width:0}
  .dadd input.ph{width:110px}
  .wnote,.waiting-list .lnk{max-width:100%;overflow-wrap:anywhere}
  .dresult{max-width:100%}
}