/* ===== v97 · Developer hand-off (ui/handoff.js) — the card "Your developer" on Health issues, Pages records, Experience stuck points and an
   action's page, the strip under an Agent Readiness check, the chip on an Actions board card, the sheet (an issue or a pull request, exactly as it
   will be filed), and the counts on a project tool's Integrations page. No new colours: every colour is a token, in light and dark.
   The card system (W8): the card's own padding (22 px on these detail pages' cards, 26 px on wide ones); a hand-off's logo sits at the icon
   column (+23 from the card's edge with the header icon) and its words on the title column (+56): 28 px logo + 12 px gap + the 6 px rule bleed. ===== */

/* ---------- the card ---------- */
.ho-card .ho-bd{gap:0;padding-top:4px}
.ho-card .sec-hd.pt-hd > .n{white-space:normal}
.ho-card .sec-hd.pt-hd > .menu-btn{flex:none}

/* ---------- one hand-off ---------- */
.ho-t{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:9px;padding:16px 0;border-top:1px solid var(--ln-3)}
.ho-bd > .ho-t:first-child{border-top:0;padding-top:10px}
.ho-lg{display:flex;align-items:flex-start;padding-top:1px}
.ho-t-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.ho-t-hd{display:flex;align-items:center;gap:10px;min-width:0;min-height:26px}
.ho-key{flex:none;font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.ho-tt{min-width:0;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);overflow-wrap:break-word;text-wrap:pretty}
.ho-t-hd > .grow{flex:1 1 0;min-width:8px}
.ho-t-hd > .lbl{flex:none}
.ho-who{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);white-space:nowrap}
.ho-who.is-none{color:var(--fg-4)}
.ho-av{display:inline-grid;place-items:center;flex:none;border-radius:var(--r-full);background:var(--bg-4);color:var(--on-fill);font-size:9px;line-height:1;font-weight:var(--w-semibold);letter-spacing:.01em}
.ho-av.is-ext{background:var(--bg-4);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--bd)}
.ho-mb{flex:none;width:28px;height:28px;margin:-2px -6px -2px 0}
.ho-meta{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ho-own.is-tile{display:inline-grid;place-items:center;border-radius:var(--r-6);background:var(--bg-3);color:var(--fg-2);box-shadow:inset 0 0 0 1px var(--bd)}
.ho-own.is-bare{display:inline-grid;place-items:center;color:var(--fg-3)}

/* the steps: Filed → In progress → In review → Done / Merged → Live on the site (Landed check) → Being measured */
.ho-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin:4px 0 2px;padding:0;list-style:none}
.ho-steps li{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:24px;min-width:0}
.ho-steps li::before{content:"";position:absolute;left:20px;right:-6px;top:8px;height:2px;border-radius:2px;background:var(--ln-2)}
.ho-steps li:last-child::before{display:none}
.ho-steps li.is-done::before{background:var(--fg-4)}
.ho-dot{position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--ln);background:var(--lvl-0);display:grid;place-items:center;color:var(--lvl-0)}
.ho-steps li.is-done .ho-dot{background:var(--fg-3);border-color:var(--fg-3)}
.ho-steps li.is-now .ho-dot{border-color:var(--fg);box-shadow:inset 0 0 0 3px var(--lvl-0),inset 0 0 0 9px var(--fg)}
.ho-steps li.is-now::before{background:var(--ln-2)}
.ho-steps li.is-next .ho-dot{border-color:var(--fg-3);border-style:dashed}   /* loop fix (A11Y-C7): the step after the current one — "next", never the ring */
.ho-steps li.is-next .ho-sl{color:var(--fg-2)}
.ho-steps li.is-bad .ho-dot{background:var(--warn);border-color:var(--warn);color:var(--on-fill)}
.ho-steps li.is-part .ho-dot{border-color:var(--fg-3);background:linear-gradient(90deg,var(--fg-3) 50%,var(--lvl-0) 50%)}
.ho-steps li.is-res .ho-dot{background:var(--fg-2);border-color:var(--fg-2)}
.ho-sl{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3);text-wrap:balance}
.ho-steps li.is-done .ho-sl,.ho-steps li.is-now .ho-sl,.ho-steps li.is-part .ho-sl,.ho-steps li.is-res .ho-sl{color:var(--fg)}
.ho-steps li.is-bad .ho-sl{color:var(--warn)}
.ho-sd{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-4);font-variant-numeric:tabular-nums}
.ho-ss{font-size:12px;line-height:16px;color:var(--fg-4)}
.ho-steps li.is-done:has(+ li.is-bad)::before{background:var(--ln-2)}
.ho-steps li.is-skip .ho-sl{color:var(--fg-4)}

/* the acceptance check, the failed read-back, the early-ticket note */
.ho-chk{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ho-chk > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ho-chk b{font-weight:var(--w-semibold);color:var(--fg)}
.ho-chk .is-ok{color:var(--pos);font-weight:var(--w-medium)}
.ho-chk .is-bad{color:var(--warn);font-weight:var(--w-medium)}
.ho-warn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-12);background:color-mix(in srgb,var(--c-orange) 9%,var(--lvl-0));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-orange) 28%,transparent);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.ho-warn > svg{flex:none;color:var(--warn)}
.ho-warn b{font-weight:var(--w-semibold)}
.ho-warn > .btn{flex:none}
.ho-note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ho-note > svg{flex:none;margin-top:2px}
.ho-note b{color:var(--fg-2);font-weight:var(--w-semibold)}
.ho-note.is-wait{color:var(--fg-2)}
.ho-acts{display:flex;gap:8px;flex-wrap:wrap}
.ho-empty{margin:4px 0 2px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);text-wrap:pretty}
.ho-cn{display:inline-flex;align-items:center;gap:5px;vertical-align:baseline}
.ho-cn .bl{transform:translateY(1px)}

/* all updates */
.ho-upd{display:flex;flex-direction:column;gap:6px}
.ho-upd-b{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:var(--t-co);line-height:var(--lh-co)}
.ho-ul{display:flex;flex-direction:column;gap:6px;margin:2px 0 0;padding:10px 12px;list-style:none;border-radius:var(--r-12);background:var(--bg-2)}
.ho-ul li{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:12px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ho-ut{color:var(--fg-4);font-variant-numeric:tabular-nums;white-space:nowrap}

/* a prepared pull request */
.ho-t.is-prep .ho-key{font-family:inherit;color:var(--fg-3)}

/* ---------- Agent Readiness: the strip under a check's row (the text column, as the pages under it) ---------- */
.ag .ho-strip{display:flex;flex-direction:column;gap:6px;margin:-2px 0 10px 164px}
.ho-sr{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ho-sr > .bl{flex:none}
.ho-sr .ho-key{font-weight:var(--w-semibold);color:var(--fg)}
.ho-srw{min-width:0;color:var(--fg-3);text-wrap:pretty}
.ho-sro{margin-left:auto;flex:none}
.ho-strip.is-offer{flex-direction:row;align-items:center;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ho-strip.is-offer > svg{flex:none}
@media (max-width:1320px){.ag .ho-strip{margin-left:144px}}

/* ---------- the Actions board: the tool's logo, the key and its state, one line above the card's footer ---------- */
.ho-kr{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ho-kw{min-width:0;overflow-wrap:break-word}
.ho-kw.is-green{color:var(--pos)}
.ho-kw.is-orange{color:var(--warn)}
.ho-kc{display:inline-flex;align-items:center;gap:4px;flex:none;height:20px;padding:0 7px 0 5px;border-radius:var(--r-full);background:var(--bg-3);font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--t-sh);line-height:1;font-weight:var(--w-medium);color:var(--fg-2);white-space:nowrap}
.ho-kc .bl.is-bare{color:var(--bl,var(--fg-2))}
.ho-kc .bl.is-bare.is-dk{color:var(--fg)}

/* ---------- the menu: a product's logo in the icon slot ---------- */
.menu-ic.is-brand .bl.is-bare{color:var(--bl,var(--fg-2))}
.menu-ic.is-brand .bl.is-bare.is-dk{color:var(--fg)}

/* ---------- the sheet ---------- */
.rs-sheet.ho-sheet{width:min(760px,100%)}
.ho-sec{gap:10px}
.ho-where{display:flex;align-items:center;gap:12px;min-width:0}
.ho-where > .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.ho-where b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ho-where span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);text-wrap:pretty}
.ho-sel{max-width:260px;flex:none}
.ho-prev{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding:14px 16px;border-radius:var(--r-12);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ln-3);font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ho-prev h4{margin:8px 0 0;font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-semibold);color:var(--fg)}
.ho-prev h4:first-child{margin-top:0}
.ho-prev h4 span{font-weight:var(--w-regular);color:var(--fg-3)}
.ho-prev p{margin:0;text-wrap:pretty}
.ho-prev ul,.ho-prev ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px}
.ho-prev ul{list-style:disc}.ho-prev ol{list-style:decimal}
.ho-prev li{display:list-item;word-break:break-word}
.ho-prev li::marker{color:var(--fg-4)}
.ho-url{font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;color:var(--fg-2);word-break:break-all}
.ho-ta{width:100%;min-height:260px;height:auto;padding:12px 14px;border-radius:var(--r-12);font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;line-height:18px;resize:vertical}
.ho-btools{display:flex;gap:14px;flex-wrap:wrap}
.ho-btools .lk{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-co);line-height:var(--lh-co)}
.ho-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.ho-grid .stg-in{width:100%;max-width:none}
.ho-date{max-width:200px}
.ho-ro{font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.ho-fh2{font-size:var(--t-co);line-height:var(--lh-co)}
.ho-apv{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-12);background:color-mix(in srgb,var(--accent) 7%,var(--lvl-0));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent)}
.ho-apv > svg{flex:none;margin-top:2px;color:var(--accent)}
.ho-apv b{display:block;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ho-apv p{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ho-apv.is-blocked{background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--ln-3)}
.ho-apv.is-blocked > svg{color:var(--fg-3)}
.ho-foot-n{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ho-sheet .rs-ft .btn[disabled]{opacity:.55;cursor:not-allowed}

/* the diff: what the pull request changes, file by file */
.ho-diff{display:flex;flex-direction:column;gap:10px;min-width:0}
.ho-diff-hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ho-diff-hd b{font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-weight:var(--w-medium);color:var(--fg)}
.ho-diff-hd > .grow{flex:1 1 auto}
.ho-add{color:var(--pos);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.ho-del{color:var(--neg);font-weight:var(--w-semibold);font-variant-numeric:tabular-nums}
.ho-file{border-radius:var(--r-12);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ln-3);background:var(--lvl-0)}
.ho-file-hd{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--ln-3);background:var(--bg-2);font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;line-height:16px;color:var(--fg-2)}
.ho-file-hd svg{color:var(--fg-3);flex:none}
.ho-code{margin:0;padding:8px 0;overflow-x:auto;font-family:var(--mono,"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12px;line-height:19px;color:var(--fg-2);white-space:pre}
.ho-code > span{display:block;padding:0 12px;min-width:max-content}
.ho-code > .ho-hunk{color:var(--fg-4)}
.ho-code > .is-add{background:var(--st-green-bg);color:var(--fg)}
.ho-code > .is-del{background:var(--st-red-bg);color:var(--fg)}

/* ---------- Integrations → a project tool: the hand-offs ---------- */
.ho-tline{margin:0 0 4px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.ho-tline b{color:var(--fg);font-weight:var(--w-semibold)}
.ho-tl{display:flex;flex-direction:column;margin-top:6px}
.ho-tlr{display:grid;grid-template-columns:16px auto minmax(0,1fr) auto auto 12px;align-items:center;column-gap:10px;padding:9px 8px;margin:0 -8px;border:0;border-radius:var(--r-8);background:none;text-align:left;font:inherit;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);cursor:pointer}
@media (hover:hover){.ho-tlr:hover{background:var(--hover)}}
.ho-tlr .ho-key{color:var(--fg)}
.ho-tlt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg)}
.ho-tlr .u{color:var(--fg-3);white-space:nowrap}
.ho-tlr > svg{color:var(--fg-4)}

/* ---------- 1280 · 900 ---------- */
@media (max-width:1100px){
  .ho-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .ho-steps li:nth-child(3n)::before{display:none}
}
/* Oct 7 review: a pull request's 7 steps (…, Deployed, Landed) — 4 + 3 between 901 and 1100px, so one step never sits alone on a row */
@media (min-width:901px) and (max-width:1100px){
  .ho-steps:has(> li:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .ho-steps:has(> li:nth-child(7)) li:nth-child(3n):not(:last-child)::before{display:block}
  .ho-steps:has(> li:nth-child(7)) li:nth-child(4n)::before{display:none}
}
@media (max-width:900px){
  .ho-t{grid-template-columns:24px minmax(0,1fr);column-gap:9px}
  .ho-t-hd{flex-wrap:wrap;row-gap:6px}
  .ho-tt{flex:1 1 100%;order:5;white-space:normal}
  .ho-steps{grid-template-columns:1fr;gap:10px}
  .ho-steps li{padding:0 0 0 28px}
  .ho-steps li::before{display:none}
  .ho-ul li{grid-template-columns:1fr;row-gap:2px}
  .ho-warn{flex-wrap:wrap}
  .ho-grid{grid-template-columns:1fr}
  .ag .ho-strip{margin-left:0}
  .ho-tlr{grid-template-columns:16px auto minmax(0,1fr) 12px}
  .ho-tlr > .lbl,.ho-tlr > .u{display:none}
  .ho-where{flex-wrap:wrap}
  .ho-sel{max-width:100%;flex:1 1 100%}
}
/* Oct 7 review (§4.9): the 7-field summary in the 720px sheet — two columns, and "Smallest change this window can tell" wraps inside its column */
.ho-sheet .ap-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.ap-facts .fd-k{white-space:normal}
@media (prefers-reduced-motion:reduce){.ho-tlr{transition:none}}
/* loop fix (round 1, Oct 8): the sheet's footer — the lock note on its own line, then Cancel and the primary together on the right; on a phone the
   buttons stack full width, the primary first and Cancel last */
.ho-sheet .rs-ft .ho-foot-n{flex:1 1 100%}
@media (max-width:640px){.ho-sheet .rs-ft .grow{display:none}.ho-sheet .rs-ft .btn{flex:1 1 100%;justify-content:center}.ho-sheet .rs-ft #ho-file{order:-1}.ho-sheet .rs-ft .ho-foot-n{order:-2}}