/* projects.css: project mode pages (p20, part W1, 2026-09-24).
   The Projects list (#/projects), the project page (#/projects/<id>), its item sheet and the approval view
   (#/projects/<id>/ok), drawn exactly as the approved mockup (p20/mockup, dark). Loaded after chats.css.
   Every rule is under html[data-look="chats"] or uses a proj-* class that only chats-projects.js makes, so the
   classic look never sees it. The live app is dark only (Albert, 2026-09-24): there is no light twin here.
   The mockup's pj-* page classes are proj-* here; its .pj-facts is .proj-sfacts because the chat card (part W2)
   has its own .proj-facts. The shared small parts (tokens, chip, dot, meter, bar, budget chips, switch) are
   defined once here so the chat card, strip and sidebar card (W2) can use them without redefining. */

/* ------------------------------------------------------------------ tokens */
html[data-look="chats"]{
  --proj-card:#141414; --proj-card-line:#262626;
  --proj-ask:#161616; --proj-ask-line:#2e2e2e;
  --proj-sunk:#0f0f0f; --proj-sunk-line:#1c1c1c;
  --proj-row-line:#1b1b1b; --proj-row-hover:#151515; --proj-row-on:#1d1d1d;
  --proj-hi:#f4f4f4; --proj-text:#ececec; --proj-muted:#a8a8a8; --proj-faint:#7c7c7c;
  --proj-green:#7ee0a8; --proj-green-bg:rgba(126,224,168,.13);
  --proj-amber:#f5b73b; --proj-amber-bg:rgba(245,183,59,.15); --proj-amber-line:rgba(245,183,59,.40); --proj-amber-card:#17150f;
  --proj-red:#ff6b63; --proj-red-bg:rgba(255,95,87,.13);
  --proj-blue:#8aa4ff; --proj-blue-bg:rgba(107,140,255,.14);
  --proj-violet:#c9a7ff; --proj-violet-bg:rgba(170,130,255,.14);
  --proj-focus:#6b8cff;
  --proj-track:#262626; --proj-seg:#333; --proj-now:#ececec;
  --proj-chip:#1c1c1c; --proj-chip-line:#2c2c2c; --proj-chip-on:#2b2b2b;
  --proj-sheet:#0e0e0e; --proj-sheet-line:#222; --proj-scrim:rgba(0,0,0,.55);
  --proj-shadow:0 24px 70px rgba(0,0,0,.6);
  --proj-rec:#f2f2f2; --proj-rec-text:#0a0a0a;
  --proj-field:#101010; --proj-field-line:#2a2a2a;
}

/* ------------------------------------------------------------------ glyphs and small parts */
.proj-g{display:inline-block;flex:none;width:16px;height:16px;vertical-align:-3px}
.proj-g.sm{width:13px;height:13px;vertical-align:-2px}
.proj-g.lg{width:18px;height:18px}
.proj-eyebrow{margin:0;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--proj-faint)}
.proj-num{font-variant-numeric:tabular-nums}
.proj-amber{color:var(--proj-amber)}
.proj-green{color:var(--proj-green)}
.proj-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--proj-green)}
.proj-dot.run{animation:talk-beat 2s ease-in-out infinite}
.proj-dot.need{background:var(--proj-amber)}
.proj-dot.off{background:var(--proj-faint)}
.proj-meter{position:relative;display:block;height:3px;border-radius:2px;background:var(--proj-track);overflow:hidden}
.proj-meter>b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--proj-muted);transition:width .24s ease-out}
.proj-meter>i{position:absolute;top:0;bottom:0;border-left:1.5px solid var(--proj-faint)}
.proj-meter.amber>b{background:var(--proj-amber)}
.proj-chip{display:inline-flex;align-items:center;gap:5px;flex:none;height:22px;padding:0 9px;border-radius:999px;background:var(--proj-chip);
  color:var(--proj-muted);font-size:12px;font-weight:500;line-height:1;white-space:nowrap;transition:background-color .12s,color .12s}
.proj-chip[data-kind="work"]{background:var(--proj-blue-bg);color:var(--proj-blue)}
.proj-chip[data-kind="ok"]{background:var(--proj-green-bg);color:var(--proj-green)}
.proj-chip[data-kind="need"]{background:var(--proj-amber-bg);color:var(--proj-amber)}
.proj-chip[data-kind="bad"]{background:var(--proj-red-bg);color:var(--proj-red)}
.proj-chip[data-kind="wait"]{background:transparent;color:var(--proj-faint);box-shadow:inset 0 0 0 1px var(--proj-chip-line)}
.proj-chip[data-kind="practice"]{background:var(--proj-violet-bg);color:var(--proj-violet)}
.proj-chip .proj-dot{width:6px;height:6px;background:currentColor}
.proj-who{color:var(--proj-faint);font-size:12.5px;white-space:nowrap}
.proj-src{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:2px 9px 2px 3px;border-radius:999px;background:var(--proj-chip);
  color:var(--proj-muted);font-size:12px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.proj-src>i{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--proj-chip-on);color:var(--proj-text);
  font-style:normal;font-size:10px;font-weight:700}
.proj-src>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
a.proj-src:hover{color:var(--proj-text)}
.proj-iconbtn{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border:0;border-radius:9px;background:none;color:var(--proj-muted);cursor:pointer}
.proj-iconbtn:hover{background:var(--proj-chip);color:var(--proj-text)}
.proj-link{border:0;padding:0;background:none;color:var(--proj-muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;
  text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:3px}
.proj-link:hover{color:var(--proj-text)}
.proj-link:disabled{cursor:default;opacity:.5}
html[data-look="chats"] .proj-iconbtn:focus-visible,html[data-look="chats"] .proj-link:focus-visible,html[data-look="chats"] .proj-seg:focus-visible,
html[data-look="chats"] .proj-row:focus-visible,html[data-look="chats"] .proj-filter:focus-visible,html[data-look="chats"] .proj-bchip:focus-visible,
html[data-look="chats"] .proj-okrow:focus-visible,html[data-look="chats"] .proj-oksend:focus-visible,html[data-look="chats"] .proj-crumb:focus-visible,
html[data-look="chats"] .proj-lcard:focus-visible,html[data-look="chats"] .proj-oktoggle:focus-visible,html[data-look="chats"] .proj-htitle:focus-visible{
  outline:2px solid var(--proj-focus);outline-offset:2px}
.proj-switch{position:relative;display:inline-block;flex:none;width:34px;height:20px;border-radius:999px;background:var(--proj-seg);transition:background .15s}
.proj-switch::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.proj-switch[aria-checked="true"]{background:var(--proj-green)}
.proj-switch[aria-checked="true"]::after{transform:translateX(14px)}
.proj-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the one main action on a page is the white pill (I.2: never more than one per card) */
html[data-look="chats"] .proj-page .talk-opt.rec,html[data-look="chats"] .proj-okpage .talk-opt.rec,html[data-look="chats"] .proj-sheet .talk-opt.rec,
html[data-look="chats"] .proj-lpage .talk-opt.rec{background:var(--proj-rec);color:var(--proj-rec-text);border-color:var(--proj-rec)}

/* the stage bar: .talk-planbar's geometry, one segment per step, each filled as far as it has got */
.proj-bar{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:4px}
.proj-bar>i{position:relative;height:4px;border-radius:2px;background:var(--proj-seg);overflow:hidden}
.proj-bar>i>b{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--proj-green);transition:width .24s ease-out}
.proj-bar>i.now>b{background:var(--proj-now)}
.proj-bar>i.need>b{background:var(--proj-amber)}
.proj-bar.mini{gap:3px}
.proj-bar.mini>i{height:3px}

/* the budget chips (plan card, page, cap card: one control everywhere, F.2) */
.proj-bchip{height:32px;padding:0 14px;border:1px solid var(--proj-chip-line);border-radius:999px;background:var(--proj-chip);color:var(--proj-text);
  font:inherit;font-size:13.5px;cursor:pointer;font-variant-numeric:tabular-nums;white-space:nowrap}
.proj-bchip small{font-size:11.5px;color:var(--proj-faint);margin-left:4px}
.proj-bchip:hover{border-color:var(--proj-seg)}
.proj-bchip[aria-checked="true"]{border:1.5px solid var(--proj-text);background:var(--proj-chip-on);font-weight:600;padding:0 13.5px}
.proj-bchip[aria-checked="true"] small{color:var(--proj-muted)}
.proj-bchip.other{border-style:dashed;background:none;color:var(--proj-muted)}
.proj-bchip:disabled{cursor:default;opacity:.5}
.proj-field{height:32px;padding:0 10px;border:1px solid var(--proj-field-line);border-radius:10px;background:var(--proj-field);color:var(--proj-text);
  font:inherit;font-size:13.5px;outline:none;min-width:0}
.proj-field:focus{border-color:var(--proj-focus)}
textarea.proj-field{height:auto;min-height:64px;padding:8px 10px;line-height:1.45;resize:vertical;width:100%;box-sizing:border-box}
.proj-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.proj-inline>.proj-field{flex:1 1 220px}
.proj-inline .proj-hint{flex-basis:100%;font-size:12px;color:var(--proj-faint)}
.proj-err{font-size:12.5px;line-height:1.45;color:var(--proj-red)}

/* ============================================================ the page frame (list, project, approval) */
.surf-pane[data-surf="projects"]{position:relative}
.tpage.proj-page,.tpage.proj-lpage{position:relative;overflow-y:auto;height:100%;border-top:1px solid #111}
.proj-wrap{display:flex;flex-direction:column;gap:18px;max-width:1080px;margin:0 auto;padding:18px 28px 56px}
html[data-look="chats"] .proj-crumb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:28px;margin-left:-6px;padding:0;border:0;
  border-radius:8px;background:none;color:#8c8c8c;font:inherit;cursor:pointer}
html[data-look="chats"] .proj-crumb:hover{background:#1a1a1a;color:#ececec}
.proj-crumb .proj-g{width:14px;height:14px}
html[data-look="chats"] .page-title-row #view-title.proj-htitle{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text;border-radius:6px}
html[data-look="chats"] .page-title-row #view-title.proj-htitle:hover{background:#141414}
html[data-look="chats"] #view-caption.proj-headcap{display:inline-flex;align-items:center;gap:6px;flex:none}
html[data-look="chats"] #view-caption.proj-okcap{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-rename{height:30px;max-width:420px;width:40vw;padding:0 8px;border:1px solid var(--proj-focus);border-radius:8px;background:var(--proj-field);color:var(--proj-hi);
  font:inherit;font-size:17px;font-weight:600;outline:none}
html[data-look="chats"] .proj-headbtn{display:inline-flex;align-items:center;gap:6px}
html[data-look="chats"] .proj-headbtn .proj-g{width:13px;height:13px}
/* banners on top of a page: the box is silent, stop confirm, load failed */
.proj-banner{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:11px 14px;border:1px solid var(--proj-card-line);border-radius:14px;background:var(--proj-card);
  font-size:13.5px;line-height:1.5;color:var(--proj-muted)}
.proj-banner>.proj-g{color:var(--proj-faint)}
.proj-banner>span{flex:1 1 300px;min-width:0}
.proj-banner.amber{border-color:var(--proj-amber-line);background:var(--proj-amber-card);color:var(--proj-text)}
.proj-banner.amber>.proj-g{color:var(--proj-amber)}
.proj-banner.bad{border-color:rgba(255,95,87,.35);background:rgba(255,95,87,.06);color:var(--proj-text)}
.proj-banner .talk-opt{padding:6px 12px;font-size:13px}
.proj-practice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 14px;border:1px solid rgba(170,130,255,.35);border-radius:14px;
  background:rgba(170,130,255,.06);font-size:13.5px;line-height:1.5;color:var(--proj-text)}
.proj-practice b{font-weight:600}
.proj-practice span{color:var(--proj-muted)}

/* the top: where it stands in one line, then the clock and the money */
.proj-top{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch}
.proj-status{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0}
.proj-now{margin:0;font-size:24px;font-weight:600;letter-spacing:-.3px;line-height:1.25;color:var(--proj-hi);font-variant-numeric:tabular-nums}
.proj-now .need{color:var(--proj-amber)}
.proj-now .sep{color:var(--proj-seg);font-weight:400;margin:0 4px}
.proj-when{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13.5px;color:var(--proj-muted)}
.proj-when>span{display:inline-flex;align-items:center;gap:6px}
.proj-when .proj-g{color:var(--proj-faint)}
.proj-when b{font-weight:600;color:var(--proj-text)}
.proj-money{display:flex;flex-direction:column;gap:9px;padding:13px 15px;border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card)}
.proj-moneyrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums}
.proj-moneyrow b{font-size:18px;font-weight:600;color:var(--proj-hi)}
.proj-moneyrow b small{font-size:13px;font-weight:400;color:var(--proj-faint)}
.proj-moneyrow span{font-size:12.5px;color:var(--proj-faint)}
.proj-money .proj-meter{height:5px;border-radius:3px}
.proj-money .proj-meter>b{background:var(--proj-text);border-radius:3px}
.proj-money .proj-meter.amber>b{background:var(--proj-amber)}
.proj-money .proj-meter>i{border-left-color:var(--proj-muted)}
.proj-moneychips{display:flex;flex-wrap:wrap;gap:6px}
.proj-moneychips .proj-bchip{height:28px;padding:0 11px;font-size:12.5px}
.proj-moneychips .proj-bchip[aria-checked="true"]{padding:0 10.5px}
.proj-moneynote{font-size:12px;color:var(--proj-faint)}
.proj-moneymore{display:none}
/* the tray: only while something waits for him */
.proj-tray{display:flex;flex-direction:column;border:1px solid var(--proj-amber-line);border-radius:16px;background:var(--proj-amber-card);overflow:hidden}
.proj-trayhead{display:flex;align-items:center;gap:8px;padding:11px 16px 4px}
.proj-trayhead .proj-eyebrow{color:var(--proj-amber)}
.proj-trayhead .proj-dot{width:7px;height:7px}
.proj-trayrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:11px 16px 12px;border-top:1px solid var(--proj-amber-bg);
  animation:proj-in .16s ease-out}
.proj-trayhead+.proj-trayrow{border-top:0}
.proj-trayq{margin:0;min-width:0;font-size:14px;line-height:1.45;color:var(--proj-hi)}
.proj-trayq b{font-weight:600}
.proj-trayq small{display:block;font-size:12.5px;color:var(--proj-faint);margin-top:1px}
.proj-trayopts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}
.proj-trayopts .talk-opt{padding:6px 12px;font-size:13px}
.proj-trayrow.done{grid-template-columns:minmax(0,1fr)}
.proj-trayrow.done .proj-trayq{color:var(--proj-muted);font-size:13px}
.proj-trayrow .proj-inline{grid-column:1/-1}
.proj-traymore{padding:9px 16px 11px;border-top:1px solid var(--proj-amber-bg);font-size:13px;color:var(--proj-muted)}
@keyframes proj-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* the rail: one stop per step, the one he is looking at lit */
.proj-railwrap{display:flex;flex-direction:column;gap:0;border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card);overflow:hidden}
.proj-rail{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));padding:14px 10px 10px}
.proj-seg{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:8px 10px 9px;border:0;border-radius:12px;
  background:none;color:var(--proj-muted);font:inherit;text-align:left;cursor:pointer}
.proj-seg:hover{background:var(--proj-row-hover)}
.proj-seg[aria-pressed="true"]{background:var(--proj-row-on)}
.proj-segtop{display:flex;align-items:center;gap:8px;width:100%}
.proj-node{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--proj-chip);color:var(--proj-faint);
  box-shadow:inset 0 0 0 1px var(--proj-chip-line)}
.proj-seg.done .proj-node{background:var(--proj-green-bg);color:var(--proj-green);box-shadow:none}
.proj-seg.now .proj-node{background:var(--proj-now);color:var(--proj-card);box-shadow:none}
.proj-seg.you .proj-node{background:var(--proj-amber-bg);color:var(--proj-amber);box-shadow:none}
.proj-segline{flex:1;height:2px;border-radius:1px;background:var(--proj-seg);position:relative;overflow:hidden}
.proj-segline>b{position:absolute;left:0;top:0;bottom:0;background:var(--proj-green);transition:width .24s ease-out}
.proj-seg:last-child .proj-segline{visibility:hidden}
.proj-segtxt{display:flex;flex-direction:column;gap:1px;min-width:0;max-width:100%}
.proj-segname{font-size:13.5px;font-weight:600;color:var(--proj-text);white-space:nowrap}
.proj-segcount{font-size:12.5px;color:var(--proj-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.proj-seg.now .proj-segcount{color:var(--proj-muted)}
.proj-segcount .need{color:var(--proj-amber);font-weight:600}
.proj-stepinfo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;padding:12px 20px 14px;border-top:1px solid var(--proj-row-line);font-size:13px;line-height:1.5}
.proj-stepinfo dt{color:var(--proj-faint)}
.proj-stepinfo dd{margin:0;color:var(--proj-muted)}
.proj-stepinfo dd b{color:var(--proj-text);font-weight:600}
/* the items */
.proj-items{display:flex;flex-direction:column;gap:10px}
.proj-filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.proj-filter{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--proj-chip-line);border-radius:999px;background:none;
  color:var(--proj-muted);font:inherit;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.proj-filter b{font-weight:600;color:var(--proj-text)}
.proj-filter:hover{background:var(--proj-chip)}
.proj-filter[aria-pressed="true"]{background:var(--proj-chip-on);border-color:var(--proj-chip-on);color:var(--proj-text)}
.proj-filter.need b{color:var(--proj-amber)}
.proj-search{margin-left:auto;display:flex;align-items:center;gap:7px;width:220px;height:32px;padding:0 11px;border-radius:10px;background:var(--proj-chip);color:var(--proj-faint);box-sizing:border-box}
.proj-search input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--proj-text);font:inherit;font-size:13.5px}
.proj-search input::placeholder{color:var(--proj-faint)}
.proj-table{display:flex;flex-direction:column;border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card);overflow:hidden}
.proj-thead,.proj-row{display:grid;grid-template-columns:44px minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.55fr) 24px;align-items:center;gap:12px;padding:0 14px 0 16px}
.proj-thead{height:36px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--proj-faint);border-bottom:1px solid var(--proj-row-line)}
.proj-row{min-height:58px;border:0;border-top:1px solid var(--proj-row-line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;width:100%;
  box-sizing:border-box;animation:proj-in .16s ease-out}
.proj-thead+.proj-row{border-top:0}
.proj-row:hover{background:var(--proj-row-hover)}
.proj-row[aria-current="true"]{background:var(--proj-row-on)}
.proj-row .n{font-size:12.5px;color:var(--proj-faint);font-variant-numeric:tabular-nums}
.proj-row .t{display:flex;flex-direction:column;gap:1px;min-width:0}
.proj-row .t b{font-size:14px;font-weight:600;color:var(--proj-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-row .t span{font-size:12.5px;color:var(--proj-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-row .w{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.proj-row .w .proj-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.proj-row .r{min-width:0;font-size:13px;line-height:1.45;color:var(--proj-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.proj-row .r q{quotes:"\201C" "\201D";color:var(--proj-text)}
.proj-row .go{color:var(--proj-faint);opacity:.6}
.proj-row:hover .go{opacity:1}
.proj-row.dropped .t b{text-decoration:line-through;text-decoration-color:var(--proj-faint);color:var(--proj-muted)}
.proj-row.spare{opacity:.8}
.proj-spares{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--proj-row-line);font-size:13px;color:var(--proj-faint)}
.proj-tempty{padding:22px 16px;font-size:13.5px;color:var(--proj-faint);text-align:center}
.proj-viewer{padding:16px 18px;border:1px dashed var(--proj-card-line);border-radius:16px;font-size:13.5px;line-height:1.5;color:var(--proj-muted)}

/* ============================================================ the item sheet (I.7) */
.proj-scrim{position:absolute;inset:0;z-index:20;background:var(--proj-scrim);opacity:0;pointer-events:none;transition:opacity .18s}
.proj-sheet{position:absolute;top:0;right:0;bottom:0;z-index:21;width:min(480px,100%);display:flex;flex-direction:column;background:var(--proj-sheet);
  border-left:1px solid var(--proj-sheet-line);box-shadow:var(--proj-shadow);transform:translateX(104%);transition:transform .2s ease-out;visibility:hidden;box-sizing:border-box}
.surf-pane[data-sheet="open"] .proj-scrim{opacity:1;pointer-events:auto}
.surf-pane[data-sheet="open"] .proj-sheet{transform:none;visibility:visible}
.proj-sheethead{flex:none;display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px 20px;border-bottom:1px solid var(--proj-sheet-line)}
.proj-sheettop{display:flex;align-items:flex-start;gap:10px}
.proj-sheettop h3{flex:1;margin:0;font-size:18px;font-weight:600;line-height:1.3;color:var(--proj-hi);min-width:0;overflow-wrap:anywhere}
.proj-sheetsub{margin:0;font-size:13.5px;color:var(--proj-muted)}
.proj-sheetstate{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.proj-sheetbody{flex:1;min-height:0;overflow-y:auto;padding:4px 20px 24px}
.proj-sec{padding:16px 0;border-top:1px solid var(--proj-sheet-line)}
.proj-sec:first-child{border-top:0}
.proj-sec>.proj-eyebrow{margin-bottom:10px}
.proj-sec>.proj-tray{margin-top:2px}
.proj-sfacts{display:grid;grid-template-columns:100px minmax(0,1fr);gap:7px 12px;margin:0;font-size:13.5px;line-height:1.5}
.proj-sfacts dt{color:var(--proj-faint)}
.proj-sfacts dd{margin:0;color:var(--proj-text);min-width:0;overflow-wrap:anywhere}
.proj-sfacts dd sup{margin-left:3px;font-size:10px;color:var(--proj-faint)}
.proj-sfacts dd.gap{color:var(--proj-faint);font-style:italic}
.proj-summary{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--proj-text)}
.proj-summary .md p{margin:0 0 8px}
.proj-quotes{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.proj-quote{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid var(--proj-card-line);border-radius:12px;background:var(--proj-card)}
.proj-quote blockquote{margin:0;padding-left:10px;border-left:2px solid var(--proj-green);font-size:13.5px;line-height:1.5;color:var(--proj-text)}
.proj-quote.unv blockquote{border-left-color:var(--proj-amber)}
.proj-quotefoot{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px;color:var(--proj-faint)}
.proj-quotefoot .proj-src{flex:0 1 auto}
.proj-quotefoot .ok{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex:none;color:var(--proj-green)}
.proj-quotefoot .no{display:inline-flex;align-items:center;gap:4px;margin-left:auto;flex:none;color:var(--proj-amber)}
.proj-mini .talk-mailpaper{max-height:170px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);
  font-size:14px;margin-bottom:6px}
.proj-mini .talk-mailmeta{margin-top:0}
/* ux 2026-09-24: "Show the whole email" in the item sheet opens the faded preview */
.proj-mini.open .talk-mailpaper{max-height:none;-webkit-mask-image:none;mask-image:none}
.proj-mini .proj-mailmore{margin-right:14px}
.proj-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:var(--proj-text)}
.proj-checks li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;line-height:1.45}
.proj-checks li>.proj-g{color:var(--proj-green);margin-top:2px}
.proj-checks li.no>.proj-g{color:var(--proj-amber)}
.proj-checks small{color:var(--proj-faint);font-size:12.5px}
.proj-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:13px;color:var(--proj-muted)}
.proj-hist li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:5px 0;line-height:1.45}
.proj-hist time{color:var(--proj-faint);font-variant-numeric:tabular-nums}
.proj-reply{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--proj-sunk);border:1px solid var(--proj-sunk-line);font-size:13.5px;line-height:1.5;color:var(--proj-text)}
.proj-reply small{color:var(--proj-faint);font-size:12.5px}
.proj-sheetfoot{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--proj-sheet-line);background:var(--proj-sheet)}
.proj-sheetfoot .talk-opt{padding:7px 13px;font-size:13px}
.proj-sheetfoot small{flex-basis:100%;font-size:12px;color:var(--proj-faint)}
.proj-sheetfoot .proj-inline{flex-basis:100%}

/* ============================================================ the approval view (I.8) */
.tpage.proj-okpage{display:flex;flex-direction:column;height:100%;overflow:hidden;border-top:1px solid #111}
.proj-oktop{flex:none;display:flex;flex-direction:column;gap:8px;padding:16px 28px 14px;border-bottom:1px solid var(--proj-row-line)}
.proj-oktoprow{display:flex;align-items:center;gap:12px}
.proj-okcount{margin:0;font-size:22px;font-weight:600;letter-spacing:-.3px;color:var(--proj-hi);font-variant-numeric:tabular-nums}
.proj-okcount .need{color:var(--proj-amber)}
.proj-okcount .auto{color:var(--proj-green)}
.proj-okcount .sep{color:var(--proj-seg);font-weight:400;margin:0 4px}
.proj-oktoprow .grow{flex:1}
.proj-oktrust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:13px;line-height:1.5;color:var(--proj-muted)}
.proj-oktrust>.proj-g{color:var(--proj-green)}
.proj-oktrust .c{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:0;border-radius:999px;background:var(--proj-green-bg);color:var(--proj-green);font:inherit;font-size:13px}
.proj-oktrust .c.amber{background:var(--proj-amber-bg);color:var(--proj-amber);cursor:pointer}
.proj-okauto{margin:0;font-size:13px;line-height:1.5;color:var(--proj-muted)}
.proj-okauto b{color:var(--proj-green);font-weight:600}
.proj-oksplit{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr)}
.proj-oklist{min-height:0;overflow-y:auto;padding:10px 10px 20px 16px;border-right:1px solid var(--proj-row-line);outline:none}
.proj-okgroup{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 10px 6px}
.proj-okgroup .proj-eyebrow.need{color:var(--proj-amber)}
.proj-okgroup .proj-eyebrow.auto{color:var(--proj-green)}
.proj-okgroup .proj-link{font-size:12px;text-decoration:none}
.proj-okrow{display:grid;grid-template-columns:22px minmax(0,1fr);gap:2px 10px;width:100%;padding:9px 10px;border:0;border-radius:12px;background:none;
  color:inherit;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
.proj-okrow:hover{background:var(--proj-row-hover)}
.proj-okrow[aria-current="true"]{background:var(--proj-row-on);box-shadow:inset 0 0 0 1px var(--proj-chip-line)}
.proj-oktick{grid-row:1/3;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--proj-seg);color:transparent}
.proj-okrow[data-on="1"] .proj-oktick{background:var(--proj-text);box-shadow:none;color:var(--proj-card)}
.proj-okrow[data-lock="1"] .proj-oktick{background:var(--proj-green-bg);box-shadow:none;color:var(--proj-green)}
.proj-oktick svg{width:12px;height:12px}
.proj-okname{display:flex;align-items:baseline;gap:7px;min-width:0;font-size:14px}
.proj-okname b{font-weight:600;color:var(--proj-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.proj-okname span{color:var(--proj-faint);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-oksub{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;color:var(--proj-faint)}
.proj-oksub>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-oksub .proj-chip{height:20px;font-size:11.5px;padding:0 8px}
.proj-okmore{padding:8px 10px;font-size:12.5px;color:var(--proj-faint)}
.proj-okempty{padding:40px 28px;font-size:14px;line-height:1.55;color:var(--proj-muted);text-align:center}
.proj-okview{min-height:0;overflow-y:auto;padding:18px 32px 28px}
.proj-okmail{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.proj-okmeta{display:grid;grid-template-columns:62px minmax(0,1fr);gap:5px 12px;margin:0;font-size:13.5px;line-height:1.45}
.proj-okmeta dt{color:var(--proj-faint)}
.proj-okmeta dd{margin:0;min-width:0;color:var(--proj-text);overflow-wrap:anywhere}
.proj-okmeta dd small{display:block;color:var(--proj-faint);font-size:12.5px}
.proj-okmeta dd small .proj-g{color:var(--proj-green)}
.proj-okmeta dd strong{font-weight:600;color:var(--proj-hi)}
.proj-okmeta dd .pr{color:var(--proj-violet)}
.proj-okpaper .talk-mailpaper{margin:0;padding:18px 22px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.proj-okpaper .foot{margin-top:18px;padding-top:12px;border-top:1px solid #e8e8e8;font-size:12.5px;color:#8a8a8a;white-space:pre-line}
.proj-okpaper mark{background:none;color:inherit;text-decoration:underline wavy #e0a020;text-decoration-thickness:1.5px;text-underline-offset:4px}
.proj-okpaper textarea{display:block;width:100%;min-height:260px;box-sizing:border-box;padding:18px 22px;border:2px solid var(--proj-focus);border-radius:14px;background:#fff;color:#1f1f1f;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;resize:vertical;outline:none}
.proj-okflag{display:flex;gap:10px;padding:10px 12px;border:1px solid var(--proj-amber-line);border-radius:12px;background:var(--proj-amber-card);font-size:13.5px;line-height:1.5;color:var(--proj-text)}
.proj-okflag>.proj-g{color:var(--proj-amber);margin-top:2px}
.proj-okflag b{color:var(--proj-amber);font-weight:600}
.proj-okflag.auto{border-color:rgba(126,224,168,.3);background:rgba(126,224,168,.05)}
.proj-okflag.auto>.proj-g,.proj-okflag.auto b{color:var(--proj-green)}
.proj-okwhy{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:12px;background:var(--proj-sunk);border:1px solid var(--proj-sunk-line);font-size:13.5px;line-height:1.5;color:var(--proj-muted)}
.proj-okwhy q{color:var(--proj-text)}
.proj-okwhy .proj-eyebrow{font-size:10.5px}
.proj-okbtns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.proj-okview .proj-okbtns{position:sticky;bottom:-28px;z-index:2;margin:0 -8px -28px;padding:12px 8px 18px;background:linear-gradient(to bottom,transparent,var(--bg,#050505) 14px)}
.proj-okbtns .talk-opt{padding:7px 14px;font-size:13.5px}
.proj-okbtns .proj-inline{flex-basis:100%}
.proj-okfoot{flex:none;display:flex;align-items:center;gap:16px;padding:12px 28px;border-top:1px solid var(--proj-row-line);background:var(--proj-sheet)}
.proj-oksend{height:40px;padding:0 20px;border:0;border-radius:999px;background:var(--proj-rec);color:var(--proj-rec-text);font:inherit;font-size:14.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;font-variant-numeric:tabular-nums}
.proj-oksend:hover:not(:disabled){filter:brightness(.92)}
.proj-oksend:disabled{cursor:default;opacity:.4}
.proj-okfoot .proj-link{white-space:nowrap}
.proj-oktiming{flex:1;min-width:0;display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45;color:var(--proj-faint)}
.proj-oktiming .proj-g{color:var(--proj-faint);margin-top:1px}
.proj-oktiming b{color:var(--proj-muted);font-weight:600}
.proj-oktiming.amber,.proj-oktiming.amber b{color:var(--proj-amber)}
.proj-okfoot .talk-opt{padding:7px 14px;font-size:13.5px}
.proj-okfeed{display:none}
.proj-okfoot .phone-note{display:none}
.proj-okkeys{position:absolute;right:28px;top:62px;z-index:5;padding:10px 12px;border:1px solid var(--proj-card-line);border-radius:12px;background:var(--proj-sheet);
  box-shadow:var(--proj-shadow);font-size:12.5px;line-height:1.8;color:var(--proj-muted)}
.proj-okkeys kbd{display:inline-block;min-width:18px;padding:0 5px;margin-right:4px;border-radius:5px;background:var(--proj-chip);box-shadow:inset 0 0 0 1px var(--proj-chip-line);
  color:var(--proj-text);font:11px/18px ui-monospace,monospace;text-align:center}

/* ============================================================ the Projects list (I.6) */
.proj-lwrap{display:flex;flex-direction:column;gap:22px;max-width:1080px;margin:0 auto;padding:18px 28px 56px}
.proj-lsec{display:flex;flex-direction:column;gap:10px}
.proj-lsec>.proj-eyebrow.need{color:var(--proj-amber)}
.proj-lgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.proj-lcard{display:flex;flex-direction:column;gap:9px;min-width:0;padding:14px 16px;border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card);
  color:inherit;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box;animation:proj-in .16s ease-out}
.proj-lcard:hover{border-color:#333}
.proj-lcard.need{border-color:var(--proj-amber-line)}
.proj-lhead{display:flex;align-items:center;gap:10px;min-width:0}
.proj-lhead b{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--proj-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-lline{font-size:13.5px;color:var(--proj-text);font-variant-numeric:tabular-nums}
.proj-lline .need{color:var(--proj-amber);font-weight:600}
.proj-lmeta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--proj-faint);font-variant-numeric:tabular-nums}
.proj-lacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.proj-lacts .talk-opt{padding:6px 13px;font-size:13px}
.proj-lempty{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px;margin:48px auto 0;text-align:center}
.proj-lempty h3{margin:0;font-size:18px;font-weight:600;color:var(--proj-hi)}
.proj-lempty p{margin:0;font-size:14px;line-height:1.55;color:var(--proj-muted)}
.proj-lempty .proj-robot{width:48px;height:48px;display:grid;place-items:center}
.proj-lempty .proj-robot svg{width:48px;height:48px}
.proj-skel{display:flex;flex-direction:column;gap:12px}
.proj-skel i{display:block;height:18px;border-radius:8px;background:#1a1a1a}
.proj-skel i.big{height:72px;border-radius:16px}
.proj-skel small{font-size:13px;color:var(--proj-faint)}
.proj-note{padding:28px;font-size:14px;line-height:1.55;color:var(--proj-muted);text-align:center}

/* ============================================================== phone (I.10), <= 800 */
@media (max-width:800px){
  .proj-wrap,.proj-lwrap{gap:14px;padding:12px 14px 40px}
  .proj-lgrid{grid-template-columns:minmax(0,1fr)}
  .proj-top{grid-template-columns:minmax(0,1fr);gap:12px}
  .proj-now{font-size:20px}
  .proj-when{flex-direction:column;gap:3px}
  .proj-money{gap:8px;padding:11px 14px}
  .proj-moneyrow{align-items:center}
  .proj-moneyrow>span{flex:1;text-align:right}
  .proj-moneymore{display:inline-flex;align-items:center;min-height:44px;font-size:13px}
  .proj-money:not([data-open]) .proj-moneychips,.proj-money:not([data-open]) .proj-moneynote{display:none}
  .proj-moneychips .proj-bchip{height:44px;padding:0 14px}
  .proj-trayrow{grid-template-columns:minmax(0,1fr);padding:12px 14px}
  .proj-trayopts{justify-content:flex-start}
  .proj-trayopts .talk-opt,.proj-banner .talk-opt,.proj-lacts .talk-opt,.proj-sheetfoot .talk-opt,.proj-okbtns .talk-opt{min-height:44px}
  .proj-oktrust{gap:3px 8px}
  .proj-oktrust .c{padding:0;background:none;color:var(--proj-muted)}
  .proj-oktrust .c.amber{background:none;color:var(--proj-amber)}
  .proj-oktrust .c .proj-g{color:var(--proj-green)}
  .proj-oktrust>span:not(.c){flex-basis:calc(100% - 30px)}
  .proj-rail{display:flex;gap:6px;overflow-x:auto;padding:10px;scrollbar-width:none}
  .proj-rail::-webkit-scrollbar{display:none}
  .proj-seg{flex:none;flex-direction:row;align-items:center;gap:8px;min-height:44px;padding:6px 12px 6px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--proj-chip-line);box-sizing:border-box}
  .proj-seg[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--proj-text)}
  .proj-segtop{width:auto}
  .proj-segline{display:none}
  .proj-node{width:26px;height:26px}
  .proj-seg>.proj-segtxt{display:flex;flex-direction:column;gap:0}
  .proj-segname{font-size:13px}
  .proj-segcount{font-size:12px}
  .proj-stepinfo{grid-template-columns:minmax(0,1fr);padding:10px 14px 12px}
  .proj-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
  .proj-filters::-webkit-scrollbar{display:none}
  .proj-filter{flex:none;height:44px}
  .proj-search{display:none}
  .proj-thead{display:none}
  .proj-table{background:none;border:0;border-radius:0;gap:8px;overflow:visible}
  .proj-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t w" "r r";gap:6px 10px;padding:12px 14px;min-height:0;
    border:1px solid var(--proj-card-line);border-radius:14px;background:var(--proj-card)}
  .proj-thead+.proj-row,.proj-row{border-top:1px solid var(--proj-card-line)}
  .proj-row .n,.proj-row .go{display:none}
  .proj-row .t{grid-area:t}
  .proj-row .w{grid-area:w;align-items:flex-end}
  .proj-row .w .proj-who{display:none}
  .proj-row .r{grid-area:r;-webkit-line-clamp:1}
  .proj-spares{border:1px dashed var(--proj-card-line);border-radius:14px}
  .proj-spares .proj-link{min-height:44px}
  .proj-sheet{width:100%;border-left:0}
  .proj-sheettop .proj-iconbtn{width:44px;height:44px}
  /* the approval: a feed of whole emails, a toggle each, the one button stuck at the bottom */
  .proj-oktop{padding:12px 14px 12px}
  .proj-okcount{font-size:19px}
  .proj-oktoprow .talk-opt,.proj-oktoprow .proj-iconbtn{display:none}
  .proj-oksplit{display:none}
  .proj-okfeed{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:12px 12px 20px}
  .proj-okcard{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card)}
  .proj-okcard.need{border-color:var(--proj-amber-line)}
  .proj-okcardhead{display:flex;align-items:flex-start;gap:10px}
  .proj-okcardhead .proj-okname{flex:1;flex-direction:column;gap:0}
  .proj-okcardhead .proj-okname span{font-size:12.5px}
  .proj-oktoggle{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 10px;border:0;background:none;color:var(--proj-muted);font:inherit;font-size:13px;cursor:pointer}
  .proj-oktoggle:disabled{cursor:default;opacity:.6}
  .proj-okcard .proj-okmeta{grid-template-columns:minmax(0,1fr);gap:0;font-size:13px}
  .proj-okcard .proj-okmeta dt{display:none}
  .proj-okcard .proj-okpaper .talk-mailpaper{padding:14px 15px;font-size:14px;border-radius:12px}
  .proj-okcard .proj-okwhy{font-size:13px}
  .proj-okfoot{flex-wrap:wrap;gap:8px 14px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .proj-oksend{flex:1 1 100%;height:46px;font-size:15.5px}
  .proj-okfoot .proj-link{font-size:13px;min-height:32px}
  .proj-oktiming{display:none}
  .proj-oktiming.amber{display:flex;flex-basis:100%}
  .proj-okfoot .phone-note{display:block;flex:1;text-align:right;font-size:12px;color:var(--proj-faint)}
}
@media (max-width:1180px) and (min-width:801px){
  .proj-top{grid-template-columns:minmax(0,1fr) 300px}
  .proj-oksplit{grid-template-columns:320px minmax(0,1fr)}
}

/* motion (I.11): nothing moves for a reader who asked for less */
@media (prefers-reduced-motion:reduce){
  .proj-dot.run{animation:none}
  .proj-sheet,.proj-scrim,.proj-bar>i>b,.proj-meter>b,.proj-segline>b,.proj-chip{transition:none}
  .proj-trayrow,.proj-row,.proj-lcard{animation:none}
}

/* ==================================================================================================================
   the chat's project parts (p20 W2, 2026-09-24): the plan card (I.3), the running card (I.4), the milestone messages,
   the strip above the message box and its needs sheet (I.5), the Projects card in the list and the panel head (I.6,
   mockup-changes 5/6). The mockup's own rules in this file's tokens; dark only, like the live app. W1's classes above
   are reused, never redefined (interfaces-w §7); every name here is W2's (the mockup's chat classes).
   ================================================================================================================== */
/* ---- the plan card (I.3) */
.proj-plan{display:flex;flex-direction:column;gap:11px;align-self:flex-start;width:min(100%,700px);box-sizing:border-box;
  padding:16px 18px 16px;border:1px solid var(--proj-ask-line);border-radius:18px;background:var(--proj-ask);animation:proj-in .16s ease-out}
.proj-planhead{display:flex;flex-direction:column;gap:5px}
.proj-titlerow{display:flex;align-items:center;gap:6px;min-width:0}
.proj-titlerow>.proj-eyebrow{margin-left:auto;padding-left:12px;white-space:nowrap}
.proj-titlerow .proj-iconbtn{width:26px;height:26px}
.proj-title{margin:0;min-width:0;font-size:17px;font-weight:600;line-height:1.3;color:var(--proj-hi);overflow-wrap:anywhere}
.proj-titlefield{flex:1;height:30px;font-size:15px;font-weight:600}
.proj-goal{margin:0;font-size:14px;line-height:1.5;color:var(--proj-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.proj-goal.open{display:block}
.proj-goalmore{align-self:flex-start;font-size:12.5px}
.proj-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px}
.proj-flowstep{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:999px;background:var(--proj-chip);
  box-shadow:inset 0 0 0 1px var(--proj-chip-line);color:var(--proj-text);font-size:13px;white-space:nowrap}
.proj-flowstep .proj-g{color:var(--proj-muted)}
.proj-flowstep.you{background:var(--proj-amber-bg);box-shadow:none;color:var(--proj-amber)}
.proj-flowstep.you .proj-g{color:currentColor}
.proj-flowstep em{font-style:normal;color:var(--proj-faint)}
.proj-flowstep .proj-n{margin:0;padding:0;border:0;border-bottom:1px dashed var(--proj-faint);background:none;color:inherit;font:inherit;font-weight:600;cursor:text}
.proj-flowstep .proj-nfield{width:58px;height:22px;padding:0 6px;font-size:13px}
.proj-arrow{color:var(--proj-faint);font-size:12px;padding:0 1px}
.proj-facts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:13.5px;color:var(--proj-muted)}
.proj-facts>span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.proj-facts b{font-weight:600;color:var(--proj-text)}
.proj-facts .proj-g{color:var(--proj-faint)}
.proj-facts>.proj-chip .proj-g{color:currentColor}
.proj-sect{display:flex;flex-direction:column;gap:7px;padding-top:11px;border-top:1px solid var(--proj-card-line)}
.proj-fields{display:grid;grid-template-columns:118px minmax(0,1fr);gap:6px 14px;margin:0;font-size:13.5px;line-height:1.5}
.proj-fields dt{color:var(--proj-faint);padding-top:1px}
.proj-fields dd{margin:0;min-width:0;color:var(--proj-text);overflow-wrap:anywhere}
.proj-fields .proj-inline{margin-top:6px}
.proj-fields textarea.proj-field{height:auto;min-height:64px;padding:6px 10px;line-height:1.5;resize:vertical}
.proj-about{display:block;width:100%;box-sizing:border-box;padding:6px 11px;border:1px solid var(--proj-field-line);border-radius:10px;background:var(--proj-field);
  color:var(--proj-text);font:inherit;font-size:13.5px;line-height:1.5;resize:vertical;cursor:text}
.proj-about:hover{border-color:var(--proj-seg)}
.proj-about:focus{outline:none;border-color:var(--proj-focus)}
.proj-check{display:flex;align-items:flex-start;gap:8px}
.proj-check+.proj-check{margin-top:4px}
.proj-box{flex:none;display:grid;place-items:center;width:16px;height:16px;margin-top:2px;padding:0;border:0;border-radius:4px;background:var(--proj-text);color:var(--proj-card);cursor:pointer}
button.proj-box:disabled{cursor:default}
.proj-box.off{background:none;box-shadow:inset 0 0 0 1.5px var(--proj-faint);color:transparent}
.proj-box.fixed{background:var(--proj-seg);color:var(--proj-muted);cursor:default}
.proj-box svg{width:11px;height:11px}
.proj-check small{color:var(--proj-faint);font-size:12.5px}
.proj-missing{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--proj-amber)}
.proj-add{height:26px;padding:0 11px;border:1px solid var(--proj-amber-line);border-radius:999px;background:var(--proj-amber-bg);color:var(--proj-amber);
  font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.proj-add.quiet{border-color:var(--proj-chip-line);background:none;color:var(--proj-muted);font-weight:500}
.proj-add:hover{filter:brightness(1.12)}
.proj-modeline{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;line-height:1.45;color:var(--proj-muted)}
.proj-modeline .proj-g{margin-top:1px;color:var(--proj-green)}
.proj-modeline.need{color:var(--proj-amber)}
.proj-budget{display:flex;flex-direction:column;gap:8px}
.proj-budgetrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.proj-budgetrow>.proj-eyebrow{width:118px;margin-right:6px}
.proj-budget>.proj-inline{padding-left:132px}
.proj-bnote{display:flex;flex-direction:column;gap:2px;padding-left:132px;font-size:13px;line-height:1.45;color:var(--proj-muted)}
.proj-bnote small{font-size:12.5px;color:var(--proj-faint)}
.proj-notify{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--proj-text)}
.proj-notify small{color:var(--proj-faint);font-size:12.5px}
.proj-notify>.proj-inline{flex-basis:100%;padding-left:44px}
button.proj-switch{border:0;padding:0;cursor:pointer}
button.proj-switch:disabled{cursor:default;opacity:.6}
.proj-practiceaddr{font-size:12.5px}
.proj-steplist{list-style:none;margin:0;padding:4px 0 0;display:flex;flex-direction:column;border-top:1px solid var(--proj-card-line)}
.proj-steplist[hidden]{display:none}
.proj-steplist li{display:grid;grid-template-columns:24px 20px minmax(0,1fr);gap:2px 10px;padding:9px 0;border-top:1px solid var(--proj-row-line)}
.proj-steplist li:first-child{border-top:0}
.proj-steplist .n{font-size:12px;color:var(--proj-faint);padding-top:1px;font-variant-numeric:tabular-nums}
.proj-steplist .proj-g{color:var(--proj-muted);margin-top:1px}
.proj-steplist b{font-size:13.5px;font-weight:600;color:var(--proj-text)}
.proj-steplist p{grid-column:3;margin:0;font-size:13px;line-height:1.5;color:var(--proj-muted)}
.proj-steplist .meta{grid-column:3;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.proj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px}
.proj-actions .talk-opt{padding:8px 16px;font-size:14px}
.proj-fold{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:6px 4px;border:0;background:none;color:var(--proj-muted);font:inherit;font-size:13px;cursor:pointer}
.proj-fold::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.proj-fold[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.proj-fold:hover{color:var(--proj-text)}
.proj-plannote{margin:0;font-size:13px;line-height:1.45;color:var(--proj-amber)}
.proj-plannote.quiet{color:var(--proj-faint)}
.proj-planfold{display:flex;flex-wrap:wrap;align-items:center;gap:8px;align-self:flex-start;max-width:700px;padding:9px 14px;border:1px solid var(--proj-card-line);
  border-radius:14px;background:var(--proj-card);font-size:13.5px;color:var(--proj-muted)}
.proj-planfold b{color:var(--proj-text);font-weight:600}
.proj-planfold .proj-g{color:var(--proj-faint)}
.proj-skelcard{gap:12px}
.proj-skelbar{display:block;height:12px;border-radius:6px;background:#1a1a1a;animation:proj-skel 1.4s ease-in-out infinite}
.proj-skelbar:first-child{height:16px}
@keyframes proj-skel{0%,100%{opacity:.6}50%{opacity:1}}
.proj-flash{box-shadow:0 0 0 2px var(--proj-focus);transition:box-shadow .3s}
html[data-look="chats"] .proj-plan .talk-opt.rec,html[data-look="chats"] .proj-card .talk-opt.rec,html[data-look="chats"] .proj-msg .talk-opt.rec,
html[data-look="chats"] .proj-actcard .talk-opt.rec,html[data-look="chats"] .proj-nsheet .talk-opt.rec{background:var(--proj-rec);color:var(--proj-rec-text);border-color:var(--proj-rec)}
html[data-look="chats"] .talk-opt.danger{border-color:rgba(255,95,87,.45);color:var(--proj-red);background:var(--proj-red-bg)}
html[data-look="chats"] .proj-plan :focus-visible,html[data-look="chats"] .proj-card :focus-visible,html[data-look="chats"] .proj-msg :focus-visible,
html[data-look="chats"] .proj-strip:focus-visible,html[data-look="chats"] .proj-nsheet :focus-visible,html[data-look="chats"] .chats-proj:focus-visible{
  outline:2px solid var(--proj-focus);outline-offset:2px}

/* ---- the running card (I.4): the plan card turned into it where Start was pressed; patched in place, never pinned */
.proj-card{display:flex;flex-direction:column;gap:12px;align-self:flex-start;width:min(100%,700px);box-sizing:border-box;
  padding:14px 16px 14px;border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card);animation:proj-in .2s ease-out}
.proj-cardhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:3px 10px}
.proj-cardhead>.proj-dot{margin-top:1px}
.proj-cardtitle{min-width:0;font-size:14.5px;font-weight:600;color:var(--proj-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-cardmoney{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:12.5px;color:var(--proj-faint);font-variant-numeric:tabular-nums}
.proj-cardmoney b{color:var(--proj-text);font-weight:600}
.proj-cardmoney .proj-meter{width:92px}
.proj-cardmenu{width:26px;height:26px;margin-right:-6px}
.proj-cardnext{grid-column:2/-1;font-size:12.5px;color:var(--proj-faint)}
.proj-cardmenurow{display:flex;justify-content:flex-end}
.proj-lines{display:flex;flex-direction:column;gap:2px}
.proj-line{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:28px;font-size:14px;color:var(--proj-text)}
.proj-line>.proj-g{color:var(--proj-faint)}
.proj-line.done>.proj-g{color:var(--proj-green)}
.proj-line.now>.proj-g{color:var(--proj-text)}
.proj-line.later{color:var(--proj-faint)}
.proj-line .what{min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-line .what>span{color:var(--proj-faint);font-size:13px;font-variant-numeric:tabular-nums}
.proj-line.now .what>span{color:var(--proj-muted)}
.proj-line .side{font-size:12.5px;color:var(--proj-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.proj-line .side.need{color:var(--proj-amber);font-weight:600}
.proj-since{margin:0;font-size:13px;color:var(--proj-muted)}
.proj-need{display:flex;flex-direction:column;gap:8px;padding:11px 13px 12px;border:1px solid var(--proj-amber-line);border-radius:14px;background:var(--proj-amber-card)}
.proj-needhead{display:flex;align-items:center;gap:8px}
.proj-needhead .proj-eyebrow{color:var(--proj-amber)}
.proj-needhead .proj-dot{width:7px;height:7px}
.proj-needhead .proj-link{margin-left:auto;font-size:12.5px;text-decoration:none;color:var(--proj-muted)}
/* W1's Needs-you row (proj_needNode), laid out as the mockup's live need */
.proj-need .proj-trayrow{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:0;border:0;background:none}
.proj-need .proj-trayq{font-size:14.5px;line-height:1.5}
.proj-need .proj-trayopts{justify-content:flex-start;gap:8px}
.proj-need .proj-trayopts .talk-opt{padding:6px 13px;font-size:13px}
.proj-need .talk-ask,.proj-need .talk-askcard{margin:0;padding:0;border:0;background:none;box-shadow:none}
.proj-lanes{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.proj-lane{display:flex;align-items:center;gap:4px;padding:2px 0;border:0;background:none;color:var(--proj-faint);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
.proj-lane b{color:var(--proj-text);font-weight:500}
.proj-lane:hover{color:var(--proj-text)}
.proj-confirm{display:flex;flex-direction:column;gap:8px;padding:11px 13px;border:1px solid var(--proj-card-line);border-radius:12px;background:var(--proj-sunk)}
.proj-confirm p{margin:0;font-size:13.5px;line-height:1.45;color:var(--proj-hi)}
.proj-cardfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.proj-cardfoot .talk-opt{padding:7px 15px;font-size:13.5px}
.proj-footnote{font-size:12.5px;color:var(--proj-faint)}

/* ---- a milestone message: the chief's bubble, then its one button (I.4) */
.proj-msg{display:flex;flex-direction:column;gap:8px;align-self:flex-start;max-width:min(94%,700px);animation:proj-in .16s ease-out}
.proj-msg .talk-body{align-self:flex-start}
.proj-msgbtns{display:flex;flex-wrap:wrap;gap:8px}
.proj-msgbtns .talk-opt{padding:6px 13px;font-size:13px;text-decoration:none}
.proj-msgdone{margin:8px 0 0;font-size:13px;color:var(--proj-muted)}
.proj-time{align-self:flex-start;margin-top:-2px;font-size:11.5px;color:var(--proj-faint)}
.proj-firstmail{max-width:640px}
.proj-firstmail .proj-msgbtns{margin-top:10px}
.proj-summary-msg{max-width:100%}
.proj-list{display:flex;flex-direction:column;width:min(100%,640px);border:1px solid var(--proj-card-line);border-radius:14px;background:var(--proj-card);overflow:hidden}
.proj-listrow{display:grid;grid-template-columns:22px minmax(0,1.1fr) minmax(0,1fr) 28px;align-items:center;gap:10px;min-height:38px;padding:0 6px 0 12px;
  border-top:1px solid var(--proj-row-line);font-size:13.5px}
.proj-listrow:first-child{border-top:0}
.proj-listrow .n{font-size:11.5px;color:var(--proj-faint);font-variant-numeric:tabular-nums}
.proj-listrow .firm{min-width:0;color:var(--proj-text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-listrow .firm span{font-weight:400;color:var(--proj-faint)}
.proj-listrow .why{min-width:0;color:var(--proj-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-listrow .proj-iconbtn{width:26px;height:26px;color:var(--proj-faint);opacity:.7}
.proj-listrow .proj-iconbtn:hover{opacity:1}
.proj-listmore{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-top:1px solid var(--proj-row-line);font-size:13px;color:var(--proj-faint)}
.proj-actcard{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;align-self:flex-start;max-width:min(100%,700px);padding:10px 12px 10px 14px;
  border:1px solid var(--proj-ask-line);border-radius:14px;background:var(--proj-ask);font-size:13.5px;color:var(--proj-muted)}
.proj-acttitle{font-weight:600;color:var(--proj-text)}
.proj-actdone{color:var(--proj-faint)}
.proj-actcard .proj-confirm{flex-basis:100%}
.proj-mirror em{font-style:italic;color:var(--proj-text)}

/* ---- the strip above the message box (I.5): one line, 36 px */
html[data-look="chats"] .emp-dock>.proj-strip{display:flex;align-items:center;gap:10px;width:100%;max-width:820px;height:36px;margin:0 auto 8px;padding:0 6px 0 12px;
  box-sizing:border-box;border:1px solid var(--proj-card-line);border-radius:12px;background:#101010;color:var(--proj-muted);font:inherit;font-size:13px;
  text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
html[data-look="chats"] .emp-dock>.proj-strip[hidden]{display:none}
.proj-strip:hover{border-color:var(--proj-seg)}
.proj-strip>.proj-g{color:var(--proj-text)}
.proj-strip b{font-weight:600;color:var(--proj-text)}
.proj-strip .sep{color:var(--proj-seg)}
.proj-strip .need{color:var(--proj-amber);font-weight:600}
.proj-strip .t{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.proj-strip .l,.proj-strip .m{flex:none}
.proj-strip .more{flex:none;color:var(--proj-faint)}
.proj-strip .open{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:8px;background:var(--proj-chip);color:var(--proj-text);font-weight:500}
/* the needs sheet: a popover over the message box; a bottom sheet on the phone */
.proj-nscrim{position:fixed;inset:0;z-index:60;background:var(--proj-scrim)}
.proj-nsheet{position:fixed;z-index:61;left:50%;bottom:96px;transform:translateX(-50%);width:min(680px,calc(100vw - 32px));max-height:min(70vh,640px);display:flex;flex-direction:column;
  border:1px solid var(--proj-sheet-line);border-radius:18px;background:var(--proj-sheet);box-shadow:var(--proj-shadow);overflow:hidden;animation:proj-in .18s ease-out}
.proj-nshead{display:flex;align-items:center;gap:10px;padding:12px 12px 8px 18px;color:var(--proj-hi);font-size:14.5px}
.proj-nshead b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-nsbody{flex:1;min-height:0;overflow:auto;padding:0 12px 12px}
.proj-nsfoot{display:flex;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--proj-sheet-line)}

/* ---- the Projects card in the list (I.6) and the panel head (mockup-changes 6) */
html[data-look="chats"] .chats-proj{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:9px 12px 9px 10px;margin-bottom:6px;
  border:1px solid #262626;border-radius:14px;background:#181818;color:#f4f4f4;font:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:background .12s ease,border-color .12s ease}
html[data-look="chats"] .chats-proj:hover{background:#202020;border-color:#303030}
html[data-look="chats"] .chats-proj[aria-current="page"]{background:#292929;border-color:#383838}
html[data-look="chats"] .chats-proj[hidden]{display:none}
.chats-projtile{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#fff;color:#000}
.chats-projtxt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chats-projname{font-size:14.5px;font-weight:600;line-height:1.3;color:#f4f4f4}
.chats-projline{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.35;color:#8f8f8f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chats-projline .proj-dot{width:7px;height:7px}
.chats-proj[data-need="1"] .chats-projline{color:#c9c9c9}
.chats-workh.proj-panelhead{display:flex;align-items:center;gap:8px;min-width:0}
.proj-panelname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chats-workh.proj-panelhead .proj-link{flex:none;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--proj-text)}

@media (max-width:800px){
  .proj-plan{padding:14px}
  .proj-fields{grid-template-columns:minmax(0,1fr);gap:2px}
  .proj-fields dd{margin-bottom:8px}
  .proj-budgetrow>.proj-eyebrow{width:100%}
  .proj-bnote,.proj-budget>.proj-inline{padding-left:0}
  .proj-titlerow{flex-wrap:wrap}
  .proj-titlerow>.proj-eyebrow{order:-1;flex-basis:100%;margin-left:0;padding-left:0}
  .proj-actions .talk-opt,.proj-cardfoot .talk-opt,.proj-msgbtns .talk-opt,.proj-need .proj-trayopts .talk-opt,.proj-actcard .talk-opt{min-height:44px}
  .proj-bchip{height:40px}
  .proj-fold{margin-left:0;min-height:44px}
  .proj-cardhead{grid-template-columns:auto minmax(0,1fr) auto}
  .proj-cardmenu{grid-row:1;grid-column:3}
  .proj-cardmoney{grid-column:2/-1;grid-row:3;justify-self:start;flex-direction:row;align-items:center;gap:10px}
  html[data-look="chats"] .emp-dock>.proj-strip{margin:0 0 8px;height:40px}
  .proj-strip .m,.proj-strip .sep:has(+.m){display:none}
  .proj-nsheet{left:0;right:0;bottom:0;transform:none;width:auto;max-height:82vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .proj-listrow{grid-template-columns:22px minmax(0,1fr) 28px}
  .proj-listrow .why{display:none}
  .proj-facts>span{white-space:normal;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .proj-plan,.proj-card,.proj-msg,.proj-nsheet,.proj-skelbar{animation:none}
  .proj-fold::after,.proj-flash{transition:none}
}
.proj-switches{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.proj-switches>.proj-notify{flex:0 1 auto}
@media (max-width:480px){
  /* the strip on a phone: its line and who waits; the name is on the card and the sheet */
  .proj-strip .t,.proj-strip .t+.sep{display:none}
}
.proj-cardtitle .proj-cardchip{margin-left:8px;height:20px;font-size:11.5px;vertical-align:1px}
/* ---- ux breaker (2026-09-24): what Albert trips over, looked at on 1440×900 and 390×844 ---- */
/* the rail's counts wrap rather than cut ("10 ready · 1 needs a look"); a step a practice run skips is dim, not ticked */
.proj-segcount{white-space:normal}
.proj-seg.skipped .proj-node{opacity:.5}
.proj-seg.skipped .proj-segname{color:var(--proj-muted)}
/* a need inside the item sheet or the email preview is narrow: the question on top, its answers under it (the sheet
   squeezed the question into one word per line beside three buttons) */
.proj-sheet .proj-trayrow,.proj-okbtns .proj-trayrow{grid-template-columns:minmax(0,1fr)}
.proj-sheet .proj-trayopts,.proj-okbtns .proj-trayopts{justify-content:flex-start}
/* a milestone's bubble wrapped at 88% of its own shrunk width ("10 emails are ready for / your OK."): a fixed cap instead */
.proj-msg>.talk-reply{max-width:640px}
/* the plan card's switches and tick: their words switch them too, and the small controls get a finger-sized hit area */
.proj-swlabel{cursor:pointer}
button.proj-box{position:relative}
button.proj-switch::before,button.proj-box::before{content:"";position:absolute;inset:-12px -8px}
/* the Undo toast after Send sits above the approval footer, not over its timing line and the preview's buttons */
html:has(.proj-okpage) #toast{bottom:80px !important}
/* the footer line with a button in it ("… then it asks you. [Raise to $20]"): the clock sat above the words */
.proj-oktiming:has(.talk-opt){align-items:center}
.proj-oktiming:has(.talk-opt) .proj-g{margin-top:0}
@media (max-width:800px){
  html:has(.proj-okpage) #toast{bottom:120px !important}
  .proj-segcount{white-space:nowrap}
  /* 44 px to tap on a phone: the back arrow, the head's buttons, the card's ⋯, Next ›, the workers' lines, the strip,
     "Don't send the other N" */
  html[data-look="chats"] .proj-crumb{width:44px;height:44px;margin-left:-12px}
  html[data-look="chats"] .proj-headbtn,#head-tools .proj-headbtn~.chats-iconbtn{min-height:44px;min-width:44px}
  .proj-cardmenu{width:44px;height:44px;margin:-9px -15px -9px 0}
  .proj-needhead .proj-link{min-height:44px;padding:0 8px;margin:-12px -8px -12px auto}
  .proj-lane{min-height:44px}
  html[data-look="chats"] .emp-dock>.proj-strip{height:44px}
  .proj-okfoot .proj-link{min-height:44px}
  /* the footer's own "Raise to $X" / "Resume" beside the money or pause line (it was 36 px) */
  .proj-oktiming .talk-opt{min-height:44px}
  /* the list's ✕ per row, "Show all", the plan's pencil and its number */
  .proj-listrow .proj-iconbtn,.proj-titlerow .proj-iconbtn{width:44px;height:44px;margin:-9px}
  .proj-list .proj-link,.proj-listmore .proj-link{min-height:44px}
  .proj-flowstep .proj-n{position:relative}
  .proj-flowstep .proj-n::before{content:"";position:absolute;inset:-12px -12px}
  .proj-bchip{height:44px}
  /* the plan card's "Tell me when you're needed (browser notifications)" dropped under its own switch on a phone (the
     row wraps for the practice mailbox field): the words stay beside the switch and wrap in their own column */
  .proj-notify>.proj-swlabel{flex:1 1 200px;min-width:0}
  /* the plan card's "Add" (round size, 26 px) and the practice mailbox link (18 px): a finger-sized hit area, same look */
  .proj-add,.proj-practiceaddr{position:relative}
  .proj-add::before{content:"";position:absolute;inset:-9px -4px}
  .proj-practiceaddr::before{content:"";position:absolute;inset:-13px -4px}
  /* the item sheet's source chips ("1 glimmerhaus.vc/about", 24 px) and its links */
  a.proj-src{position:relative;overflow:visible}   /* its words keep their own ellipsis; the chip no longer clips the hit area */
  a.proj-src::before{content:"";position:absolute;inset:-10px -2px}
  .proj-sheet .proj-link{min-height:44px}
}
/* ---- webfix (2026-09-24) ---- */
/* the plan card's "What every email will say" on a phone: one line that opens in place, so Start is on the first screen
   (Albert's call on break-ux's first question: the card was 1,250 px tall there). A desktop keeps the eyebrow and the
   fields open. */
.proj-sayfold,.proj-bai{display:none}
@media (max-width:800px){
  .proj-saysect>.proj-eyebrow{display:none}
  .proj-sayfold{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:-10px 0;padding:0;border:0;background:none;
    color:var(--proj-text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
  .proj-sayfold .chev{color:var(--proj-faint);font-size:17px;line-height:1;transition:transform .15s}
  .proj-sayfold .miss{margin-left:auto;color:var(--proj-amber);font-size:13px;white-space:nowrap}
  .proj-saysect.open .proj-sayfold .chev{transform:rotate(90deg)}
  .proj-saysect.open .proj-sayfold{margin-bottom:0}
  .proj-saysect:not(.open)>.proj-fields{display:none}
  /* ...and the rest of the card a little tighter there, so Start shows under his task line at 390×844: the budget's
     four chips on one row, About and the employees on one line (the clock line under them), the flow's chips on two
     rows, the goal in two lines with its "more", no PROJECT PLAN over the name (the chief's line above names the plan)
     and no "(browser notifications)" after the switch's words; every control keeps its 44 px */
  .proj-plan{gap:7px;padding-top:12px}
  .proj-plan .proj-facts{row-gap:2px}
  .proj-plan .proj-switches>.proj-notify{flex:1 1 100%}
  .proj-plan .proj-titlerow>.proj-eyebrow{display:none}
  .proj-plan .proj-notify .proj-nhow{display:none}
  .proj-plan .proj-goal:not(.open){-webkit-line-clamp:2}
  /* its "more" sits at the end of the second line (a line of its own cost the room Start needs), with a finger's hit area */
  .proj-plan .proj-planhead{position:relative}
  .proj-plan .proj-goalmore{position:relative}
  .proj-plan .proj-goal:not(.open)+.proj-goalmore{position:absolute;right:0;bottom:0;padding:0 0 0 30px;line-height:21px;
    background:linear-gradient(90deg,transparent,var(--proj-ask) 26px)}
  .proj-plan .proj-goalmore::before{content:"";position:absolute;inset:-12px -8px}
  .proj-plan .proj-budgetrow{gap:6px 8px}
  .proj-plan .proj-budgetrow .proj-bchip{padding:0 11px}
  .proj-plan .proj-budgetrow .proj-bchip[aria-checked="true"]{padding:0 10.5px}
  .proj-plan .proj-facts>span:nth-child(2){order:1}
  .proj-plan .proj-flow{gap:6px 3px}
  .proj-plan .proj-flowstep{gap:5px;padding:0 8px 0 7px;font-size:12.5px}
  .proj-plan .proj-arrow{padding:0}
  .proj-plan .proj-saysect{padding-top:3px}
  .proj-plan .proj-budget{padding-top:8px}
  /* "AI work only: never used to buy anything." beside BUDGET (the row had room), so the money line is one line */
  .proj-plan .proj-budgetrow>.proj-eyebrow{width:auto}
  .proj-plan .proj-bai{display:block;flex:1 0 70%;min-width:0;font-size:12.5px;line-height:1.35;color:var(--proj-faint)}
  .proj-plan .proj-bnote .proj-baionly{display:none}
}
@media (prefers-reduced-motion:reduce){
  .proj-sayfold .chev{transition:none}
}
/* the Undo notice after Send on a desktop is the approval footer's own line for 8 s (proj_okFoot), never a toast over
   the preview's buttons: it reads as the notice it is, with its Undo beside the words */
.proj-oktiming.proj-okundo{align-items:center;font-size:13.5px;color:var(--proj-text)}
.proj-okundo .proj-g{margin-top:0}
.proj-okundo .proj-undo{margin-left:6px}