plan-card.css

/* Plan cards (propose_plan) and the brief at the top of a task a plan started. System cards: the .gu-sys surface, type and
   buttons from genui-cards.css; markup in src/plan-card.ts. Shared by the app (v3.css) and the card page inside Messages (card.css). */
.gu-plan{gap:8px}
.pl-sec{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.pl-h{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);padding:0 2px}
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pl-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 14px;border-radius:16px;background:var(--sheet);box-shadow:0 0 0 1px var(--line2);color:var(--ink);text-decoration:none;font:inherit;transition:box-shadow .12s,opacity .12s,transform .12s;min-height:52px}
button.pl-item{cursor:pointer}button.pl-item:hover{box-shadow:0 0 0 1px var(--ink2)}button.pl-item:active{transform:scale(.99)}
button.pl-item:focus-visible,a.pl-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.pl-item[disabled]{pointer-events:none}
.pl-box{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line2);color:transparent;transition:background .12s,box-shadow .12s,color .12s}
.pl-item.on .pl-box,.pl-item.done .pl-box{background:var(--ink);box-shadow:none;color:var(--sheet)}
.pl-item.done .pl-box{background:var(--live)}
.pl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pl-t b{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.pl-l{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--mute);line-height:1.35;overflow-wrap:anywhere}.pl-l svg{flex:none}
.pl-item:not(.on):not(.done) .pl-t b{color:var(--ink2)}
.gu-plan:not(.locked) .pl-item:not(.on){opacity:.72}
.pl-tag{flex:none;font-style:normal;font-size:11.5px;font-weight:650;color:var(--mute);background:var(--hover);padding:2px 9px;border-radius:999px;white-space:nowrap}
.pl-tag.ok{background:color-mix(in srgb,var(--live) 14%,transparent);color:var(--live)}.pl-tag.bad{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.pl-go{flex:none;color:var(--faint,var(--mute));display:grid;place-items:center}
a.pl-item.done:hover{box-shadow:0 0 0 1px var(--ink2)}a.pl-item.done:hover .pl-go{color:var(--ink)}
.pl-item.off{opacity:.55;box-shadow:0 0 0 1px var(--line)}
.gu-plan.locked .gu-sl{color:var(--mute)}
.gu-plan .gu-btns .gu-b.primary[disabled]{opacity:.3}
/* Questions first: above the items; chips (genui .gu-chip) + a type-your-own box; read-only once decided */
.pl-q{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:16px;background:var(--sheet);box-shadow:0 0 0 1px var(--line2)}
.pl-q-t{display:flex;align-items:flex-start;gap:7px}.pl-q-t svg{flex:none;margin-top:3px;color:var(--accent)}.pl-q-t b{font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.pl-q-c .gu-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-q-in{height:42px;border-radius:13px;border:1px solid var(--line2);padding:0 13px;background:var(--sheet);color:var(--ink);outline:0;font:inherit;font-size:16px;width:100%;box-sizing:border-box}.pl-q-in:focus{border-color:var(--ink2)}
.pl-q-a{margin:0 0 0 21px;color:var(--ink2);overflow-wrap:anywhere}.pl-q-a.open{color:var(--mute);font-style:italic}
.pl-q-note{margin:0;padding:0 2px;font-size:13px;color:var(--mute)}
.gu-plan.locked .pl-q{box-shadow:0 0 0 1px var(--line)}
/* The brief at the top of a task a plan started */
.m.brief{align-items:stretch;max-width:560px}
.pl-brief{gap:8px}
.pl-quote{margin:0;padding:2px 0 2px 12px;border-left:3px solid var(--line2);color:var(--ink2);font-size:14.5px;line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pl-bb{background:var(--hover);border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:4px}
.pl-bl{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.pl-bb p{margin:0;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}.pl-bb p b{font-weight:600}
.pl-from{margin:0;font-size:13.5px}.pl-brief .pl-from a{color:var(--accent);font-weight:600;text-decoration:none}.pl-brief .pl-from a:hover{text-decoration:underline}
@media (max-width:767px){.pl-item{padding:11px 12px;gap:10px}.m.brief{max-width:100%}
  .gu-plan .gu-btns{flex-wrap:nowrap;gap:6px}.gu-plan .gu-btns .gu-b{flex:1 1 auto;padding-left:12px;padding-right:12px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.pl-item,.pl-box{transition:none}}