/* ============================================================
   Capability panel: "Add tasks" (#cap-task).
   Human-in-the-loop SPLIT flow (mirrors the Book-appointments demo):
     LEFT  — a RECEIVED email flagging missing paperwork (reuses the
             Log-data email skin: hsd-mail-* / hsd-panel-head).
     RIGHT — a stage that switches between an ASK/CONFIRM popup (reuses
             the unc-* / hiw-btn approval vocabulary, over a faded desktop)
             and a TRELLO BOARD (reuses the hsd-board-* styling from
             hero-split-demo-v2.css) where the new card drops into "To do".
   Driven by js/cap-task.js. Gated by an IntersectionObserver; restarts
   on tab click via cshow:restart; auto-advances via cshow:done.
   ============================================================ */
.cap-task {
    --ct-accent: #4c6cff;
    --ct-ok: #10b981;
    --ct-ok-deep: #047857;
    --ct-ink: #1f2937;
    --ct-muted: #6b7280;
    --ct-border: #d1d5db;
    --ct-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ct-ease-out: cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* The split frame reuses .hsd-frame / .hsd-left / .hsd-right (loaded from
   hero-split-demo-v2.css). Align the card border to the showcase's. */
.cap-task .hsd-left,
.cap-task .hsd-right { --hsd-border: var(--ct-border); }

/* connector overlay — a blue line flies from the detected email phrase to
   the right box as it opens (fireDetectArrow, pointed at #ct-connectors). */
#ct-connectors path {
    fill: none;
    stroke: url(#ct-line-grad);
    stroke-width: 2;
    stroke-linecap: round;
}
#ct-connectors .ct-pulse-dot { fill: var(--ct-accent); }
/* The persistent grey connector line (.hsd-frame::after, from
   hero-split-demo-v2.css) bridges the two cards on desktop — matching the
   Send-messages demo — and the animated blue arrow above rides over it during
   the sequence. On MOBILE the cards stack and the left card grows past the
   line's fixed 320px offset, so suppress it there only. */
@media (max-width: 879px) {
    .cap-task .hsd-frame::after { display: none !important; }
}

/* ---- right side: flatten the inherited .hsd-right card ----
   The right side's TWO scenes each provide their own frame: the ask scene
   is a faded DESKTOP (.ct-desk, its own border/shadow) and the board is a
   .ct-board-card. So the inherited .hsd-right card chrome (border, shadow,
   white fill) must be stripped, otherwise we render a frame-inside-a-frame.
   Mirrors #unc-demo .hsd-right / .cap-book .hsd-right. */
.cap-task .hsd-right {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    transition: opacity 0.45s var(--ct-ease), transform 0.5s var(--ct-ease-out);
}
/* the right side appears AFTER the email: hidden to start, pops in (fade +
   scale). With no card chrome, only opacity+transform animate. */
.cap-task .hsd-right.is-empty {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    pointer-events: none;
}

/* ---- heights ----
   Mobile: left email auto-grows; right stage gets a sensible height.
   Desktop (>=880px): lock both to one height so the row reads as a pair. */
.cap-task .hsd-left  { height: auto; min-height: 320px; }
.cap-task .hsd-right { height: 520px; }   /* fits the ask popup on mobile */
@media (min-width: 880px) {
    .cap-task .hsd-left,
    .cap-task .hsd-right { height: 480px; min-height: 0; }
}

/* ===================== LEFT: received email ===================== */
.cap-task .ct-mail { overflow: hidden; }
/* the email body appears whole (it's received), with a soft fade+lift reveal.
   Starts hidden, reveals via .is-shown (set by the sequencer). */
#ct-mail-body {
    white-space: normal;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s var(--ct-ease), transform 0.5s var(--ct-ease-out);
}
#ct-mail-body.is-shown { opacity: 1; transform: none; }

/* ===================== RIGHT: stage (ask popup <-> board) ===================== */
/* transparent — each scene (faded desktop / board card) carries its own
   frame + background, so the stage adds no chrome of its own. */
.ct-stage {
    position: relative;
    overflow: visible;
    background: transparent;
    display: flex;
    flex-direction: column;
}
.ct-scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(5%);
    transition: opacity 0.4s var(--ct-ease), transform 0.5s var(--ct-ease-out);
    pointer-events: none;
}
.ct-scene.is-active { position: relative; flex: 1 1 auto; opacity: 1; transform: none; pointer-events: auto; }
.ct-scene.is-past { opacity: 0; transform: translateX(-4%); }

/* ---- SCENE A: ask / confirm popup over a faded desktop ----
   Popup floats OVER a faded desktop backdrop (reused unc-desk / hiw-wf /
   hiw-dock mockup), like the "Ask when unsure" + Book-appointments demos.
   The desk fills the scene; the popup is absolutely centred above it. */
.ct-scene-ask {
    display: block;
    padding: 0;
    background: transparent;      /* the desk below is the only frame */
}
.ct-desk.unc-desk {
    position: absolute;
    inset: 0;
    margin: 0;
    min-height: 0;
    border: 1px solid var(--ct-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.ct-desk .hiw-menubar { border-radius: 16px 16px 0 0; }
/* the popup floats above the desk, centred */
.ct-ask {
    position: absolute;
    top: 50%; left: 50%;
    z-index: 3;
    width: min(340px, 86%);
    background: #fff;
    border: 1px solid #e6e8f0;
    border-radius: 14px;
    box-shadow: 0 36px 70px -26px rgba(17, 24, 39, 0.42), 0 2px 6px -2px rgba(17, 24, 39, 0.12);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.97);
    transition: opacity 0.4s var(--ct-ease), transform 0.45s var(--ct-ease-out);
}
.ct-scene-ask.is-shown .ct-ask { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* window title bar — traffic-lights left, window title centred, spacer right */
.ct-ask-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 13px;
    border-bottom: 1px solid #eef0f5;
    background: linear-gradient(180deg, #fbfcfe, #f6f8fc);
}
.ct-ask-bar .hiw-tl { width: 9px; height: 9px; flex: none; }
.ct-ask-title {
    flex: 1 1 auto; text-align: center;
    font-size: 12px; font-weight: 600; color: #475569;
}
.ct-ask-bar-spacer { width: 41px; flex: none; }
.ct-ask-body { padding: 14px 15px 15px; }
/* tighten the reused unc title/message inside this card */
.ct-ask-body .unc-q-title { font-size: 13.5px; font-weight: 700; color: #0f172a; margin: 0 0 5px; line-height: 1.3; }
.ct-ask-need {
    display: inline-block; margin-left: 2px;
    font-size: 10.5px; font-weight: 600; color: var(--ct-accent);
    letter-spacing: 0.01em;
}
.ct-ask-body .unc-msg { font-size: 12px; line-height: 1.5; color: #4b5563; margin: 0 0 12px; }
.ct-ask-body .unc-form { display: flex; flex-direction: column; gap: 8px; }
.ct-ask-body .unc-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px; }

/* ===================== SCENE B: the Trello board ===================== */
.ct-scene-board {
    padding: 0;
    background: #fff;
}
/* the board scene's own card frame (the .hsd-right chrome is flattened), so
   it casts a per-card shadow like the email + calendar — not a merged blob. */
.ct-board-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ct-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, 0.18), 0 1px 2px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.ct-board-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px; border-bottom: 1px solid #f3f4f6;
    flex: 0 0 auto;
}
.ct-board-head-title { font-size: 13.5px; font-weight: 600; color: var(--ct-ink); display: inline-flex; align-items: center; gap: 8px; }
.ct-board-head-sub { font-size: 11.5px; font-weight: 500; color: var(--ct-muted); }
.ct-board-badge {
    margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 9999px;
    border: 1px solid #a7f3d0; background: #ecfdf5; color: var(--ct-ok-deep);
    opacity: 0; transform: translateY(-4px); transition: opacity 0.4s ease, transform 0.4s ease;
}
.ct-board-badge svg { width: 11px; height: 11px; }
.cap-task .ct-board-card.is-added .ct-board-badge { opacity: 1; transform: none; }

/* the board body reuses hsd-board-* (loaded from hero-split-demo-v2.css);
   just let it fill the card + centre vertically like the calendar body. */
.ct-scene-board .hsd-board-body {
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
}
/* the new card is hidden until Askpilot adds it on confirm */
.ct-board-card .hsd-board-card.ct-new-card { display: none; }
.cap-task .ct-board-card.is-added .hsd-board-card.ct-new-card { display: flex; }

/* Mobile: only 2 columns fit — hide the Done column. (The shared rule in
   hero-split-demo-v2.css is overridden by a later .hsd-board-col base rule,
   so re-assert it here with panel scope + higher specificity.) */
@media (max-width: 879px) {
    .cap-task .hsd-board-col.hsd-board-col-done { display: none; }
}

/* ===================== responsive ===================== */
@media (max-width: 480px) {
    .ct-ask { max-width: 100%; }
    .ct-scene-ask { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-scene, .ct-ask, .ct-board-badge { transition: none; animation: none; }
    .ct-board-card .hsd-board-card.ct-new-card { animation: none; }
}