/* 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:#2c2d30; --proj-card-line:#393a3d;
  --proj-ask:#2e2f32; --proj-ask-line:#404144;
  --proj-sunk:#28292c; --proj-sunk-line:#323336;
  --proj-row-line:#313235; --proj-row-hover:#2d2e31; --proj-row-on:#333437;
  --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:#393a3d; --proj-seg:#434447; --proj-now:#ececec;
  --proj-chip:#323336; --proj-chip-line:#3e3f42; --proj-chip-on:#3d3e41;
  --proj-sheet:#28292c; --proj-sheet-line:#36373a; --proj-scrim:rgba(0,0,0,.55);
  --proj-shadow:0 24px 70px rgba(0,0,0,.6);
  --proj-rec:#f2f2f2; --proj-rec-text:#27282b;
  --proj-field:#28292c; --proj-field-line:#3d3e41;
}

/* ------------------------------------------------------------------ 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 #292a2d}
.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:#303134;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:#2c2d30}
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}
/* p21 final fixes (the final look, item 12): the column names in normal case, as the rest of the page */
.proj-thead{height:36px;font-size:12.5px;font-weight:600;letter-spacing:0;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(#26272a 60%,transparent);mask-image:linear-gradient(#26272a 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 #292a2d}
.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:#343538;
  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,#26272a) 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:#434447}
.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:#303134}
.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 (I.3; p21 P1, SPEC 4.1: a message) */
/* The chief's reply, drawn as a bubble like any other (#36373a, r18, 14/20, at most 640 wide): the name 14/600, the goal in
   three lines (two on a phone) with its "more", two grey lines 13/20, then the buttons. Everything else is in Details (the
   side panel, below). No amber on it, no capitalised label. */
.proj-plan{display:flex;flex-direction:column;align-self:flex-start;box-sizing:border-box;min-width:0;max-width:var(--bub,min(640px,85%));
  padding:8px 12px 12px;border:0;border-radius:18px;background:var(--c-agent,#36373a);color:var(--c-bubtext,#fff);font-size:14px;line-height:20px}
/* joined to the chief's line above it, as his own bubbles are (SPEC 3.2: 5 px on the speaker's side) */
html[data-look="chats"] .emp-feed>.proj-plan[data-gap="same"]{border-top-left-radius:5px}
html[data-look="chats"] .emp-feed>:is(.talk-reply,.emp-from):has(+.proj-plan[data-gap="same"])>:is(.talk-body,.emp-body){border-bottom-left-radius:5px}
.proj-planhead{position:relative;display:flex;flex-direction:column}
.proj-titlerow{display:flex;align-items:center;gap:4px;min-width:0}
.proj-titlerow .proj-iconbtn{width:24px;height:24px;color:#8a8a8a}
.proj-plan .proj-title{margin:0;min-width:0;font-size:14px;font-weight:600;line-height:20px;color:#fff;overflow-wrap:anywhere}
.proj-plan .proj-renamable{cursor:text}
/* the pencil shows where a pointer is (a tap on the name renames it on a touch screen) */
.proj-plan .proj-pen{opacity:0;transition:opacity .12s}
.proj-plan .proj-titlerow:hover .proj-pen,.proj-plan .proj-pen:focus-visible{opacity:1}
@media (hover:none){.proj-plan .proj-pen{display:none}}
.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:20px;color:#ececec;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
/* p21 final fixes: the plan's goal is cut by its words (talk_pjGoal fit in proj_planNode) with "… more" right after them */
.proj-plan .proj-goal{display:block;-webkit-line-clamp:unset;overflow:visible}
.proj-plan .proj-goal .proj-goalmore{display:inline;margin-left:6px;padding:0;background:none;line-height:20px}
.proj-plan .proj-goal .proj-goalmore[hidden]{display:none}
.proj-goal.open{display:block}
.proj-goalmore{align-self:flex-start;font-size:13px}
/* "more" at the end of the goal's last line (a line of its own cost the room), with a finger's hit area */
.proj-plan .proj-goalmore{position:relative;color:#a0a0a0}
.proj-plan .proj-goalmore:hover{color:#fff}
.proj-plan .proj-goalmore::before{content:"";position:absolute;inset:-12px -8px}
/* the two grey lines: who sends and when he is asked; the cost, when, what is left out */
.proj-facts{display:flex;flex-direction:column;margin-top:6px;font-size:13px;line-height:20px;color:#9a9a9a;overflow-wrap:anywhere}
.proj-fact{min-width:0}
/* p24 projux: the reading card — the plan as three or four plain numbered lines, then the time and the money in grey */
.proj-planlines{display:flex;flex-direction:column;gap:4px;margin:6px 0 0;padding:0;list-style:none;counter-reset:pjl}
.proj-planlines>li{position:relative;min-width:0;padding-left:20px;font-size:14px;line-height:20px;color:#ececec;overflow-wrap:anywhere;counter-increment:pjl}
.proj-planlines>li::before{content:counter(pjl);position:absolute;left:0;top:0;width:12px;text-align:right;font-size:13px;color:#8a8a8a;font-variant-numeric:tabular-nums}
.proj-plancost{margin:8px 0 0;font-size:13px;line-height:20px;color:#9a9a9a;overflow-wrap:anywhere}
/* what Change something… opens: one grey line, "Budget and more ›" the way into the side panel */
.proj-changeline{margin:8px 0 0;font-size:13px;line-height:20px;color:#9a9a9a}
.proj-changeline .proj-link{position:relative;color:#d6d6d6;text-decoration:none;white-space:nowrap}
.proj-changeline .proj-link:hover{color:#fff}
.proj-changeline .proj-link::before{content:"";position:absolute;inset:-12px -6px}
/* Details: the inputs nobody gave are offers under the list, never empty fields */
.proj-details .proj-adds{display:flex;flex-wrap:wrap;gap:6px 4px}
.proj-details .proj-adds [hidden]{display:none}
/* the buttons: Start (primary) and Change something… (secondary) */
.proj-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.proj-plan .talk-opt{background:#404144;border-color:#404144}
.proj-plan .talk-opt:hover:not(:disabled){background:#48494c;border-color:#48494c}
.proj-plan .talk-opt.no{background:none;border-color:transparent;padding-left:8px;padding-right:8px}
.proj-plan .talk-opt.no:hover:not(:disabled){background:none;border-color:transparent}
.proj-plan .proj-detailsbtn{margin-left:auto}
.proj-plannote{margin:8px 0 0;font-size:13px;line-height:20px;color:var(--proj-amber)}
.proj-plannote.quiet{color:#9a9a9a}
/* Not now: one line at its own time, "Plan not started · Start it" (SPEC 2.7 lines: 28 px, 13/20, #9a9a9a) */
.proj-planfold{display:flex;align-items:center;gap:8px;align-self:flex-start;box-sizing:border-box;max-width:min(100%,640px);min-height:28px;min-width:0;
  font-size:13px;line-height:20px;color:#9a9a9a;white-space:nowrap}
.proj-planfold b{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#d6d6d6;font-weight:600}
.proj-planfold .proj-g{color:#8a8a8a}
.proj-planfold .proj-link{flex:none;padding:4px 6px}

/* ---- Details (p21 P1, SPEC 4.2): the plan's parts in the side panel, one section under the other, sentence-case heads */
.proj-details{display:flex;flex-direction:column;padding:4px 0 8px;font-size:13.5px;line-height:1.5;color:var(--proj-text)}
.proj-details .proj-sect{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-top:1px solid #36373a}
.proj-details>.proj-sect:first-child,.proj-details>.proj-plannote+.proj-sect{border-top:0;padding-top:8px}
.proj-details .proj-sect.proj-dswitch{padding:10px 0}
.proj-details .proj-sect.proj-dswitch+.proj-sect.proj-dswitch{border-top:0;padding-top:0}
.proj-details>.proj-plannote{margin:8px 0 0}
.proj-dhead{margin:0;font-size:13.5px;font-weight:600;line-height:20px;color:#f4f4f4}
.proj-flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 3px}
.proj-flowstep{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px 0 7px;border-radius:999px;background:var(--proj-chip);
  box-shadow:inset 0 0 0 1px var(--proj-chip-line);color:var(--proj-text);font-size:12.5px;white-space:nowrap}
.proj-flowstep .proj-g{color:var(--proj-muted)}
/* amber is for what waits for him now (SPEC 0, 4.1): the step that will is marked white, not amber */
.proj-flowstep.you{background:#3d3e41;box-shadow:inset 0 0 0 1px #48494c;color:#fff}
.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}
.proj-flowgrp{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.proj-details .proj-chip[data-kind="need"]{background:#3d3e41;color:#d6d6d6}
/* the inputs: the name over its value (the panel is narrow), the About text in a box of at least four lines */
.proj-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:0;font-size:13.5px;line-height:1.5}
.proj-fields dt{color:var(--proj-faint);font-size:12.5px}
.proj-fields dd{margin:0 0 8px;min-width:0;color:var(--proj-text);overflow-wrap:anywhere}
.proj-fields dd:last-child{margin-bottom:0}
.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;min-height:6.5em;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}
/* an input nobody gave: "not set" in grey, and Add; never amber (it does not hold Start back) */
.proj-missing{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:#9a9a9a}
.proj-add{height:28px;padding:0 12px;border:1px solid #404144;border-radius:999px;background:#3d3e41;color:#fff;
  font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.proj-add.quiet{border-color:transparent;background:none;color:var(--c-quiet,#a0a0a0);padding:0 6px}
.proj-add:hover{background:#444548}
.proj-add.quiet:hover{background:none;color:#fff}
.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)}
/* the budget: the chips, then what it buys and "AI work only…" */
.proj-budget{display:flex;flex-direction:column;gap:8px}
.proj-budgetrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.proj-budgetrow .proj-bchip{padding:0 11px}
.proj-budgetrow .proj-bchip[aria-checked="true"]{padding:0 10.5px}
.proj-budget>.proj-inline{padding-left:0}
.proj-bnote{display:flex;flex-direction:column;gap:2px;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:nowrap;align-items:flex-start;gap:10px;font-size:13.5px;line-height:20px;color:var(--proj-text)}
.proj-notify>.proj-switch{margin-top:0}
.proj-notify>.proj-swlabel{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
.proj-notify small{color:var(--proj-faint);font-size:12.5px}
.proj-notify>.proj-inline{flex-basis:100%;padding-left:44px}
.proj-practiceopt{flex-wrap:wrap}
.proj-practicehow{color:var(--proj-muted)}
button.proj-switch{border:0;padding:0;cursor:pointer}
button.proj-switch:disabled{cursor:default;opacity:.6}
.proj-practiceaddr{font-size:13px;padding:0}
.proj-steplist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.proj-steplist[hidden]{display:none}
.proj-steplist li{display:grid;grid-template-columns:18px 18px minmax(0,1fr);gap:2px 8px;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-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-msg .talk-opt.rec,html[data-look="chats"] .talk-pjask .talk-opt.rec,
html[data-look="chats"] .proj-actcard .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"] .talk-pjline :focus-visible,html[data-look="chats"] .proj-msg :focus-visible,
html[data-look="chats"] .talk-pjask :focus-visible,html[data-look="chats"] .chats-proj:focus-visible{
  outline:2px solid var(--proj-focus);outline-offset:2px}

/* ---- p21 P2: the running card, its needs box and its lanes are gone (the project is one live line, its needs are asks in
   the slot: css/chats.css "p21 P2"); these parts of it stay: the Stop confirm, the footnote, "Since you last looked" */
.proj-since{margin:0;font-size:13px;color:var(--proj-muted)}
.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-footnote{font-size:12.5px;color:var(--proj-faint)}

/* ---- a milestone message: the chief's bubble, then its one button (I.4) */
/* p21 F1: the row is the column's width, so its bubble wraps at the chat's bubble width (--bub, 85 % of the column, at
   most 640), not at a share of its own shrunk width; what hangs under the bubble stops at the card width */
.proj-msg{display:flex;flex-direction:column;gap:8px;align-self:stretch;animation:proj-in .16s ease-out}
.proj-msg>*{max-width:min(100%,640px)}
.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-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 #393a3d;border-radius:16px;background:#2e2f32;overflow:hidden}
/* p24 projux: where the list was found, under the list (it stood between the line and the list, letters without a word) */
.proj-msg>.talk-under.proj-listsrc{margin-top:6px}
.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)}
/* p21 final fixes (the final look, item 13): "Show all" on one line (it broke into "Show" / "all" on a phone) */
.proj-listmore .proj-link{flex:none;white-space:nowrap}
.proj-actcard{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;align-self:flex-start;max-width:min(100%,640px);padding:10px 12px 10px 14px;
  border:1px solid #393a3d;border-radius:16px;background:#2e2f32;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 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 #393a3d;border-radius:14px;background:#2f3033;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:#353639;border-color:#414245}
html[data-look="chats"] .chats-proj[aria-current="page"]{background:#3c3d40;border-color:#47484b}
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:#26272a}
.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}
.proj-panelname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (max-width:800px){
  .proj-actions .talk-opt,.proj-cardfoot .talk-opt,.proj-msgbtns .talk-opt,.talk-pjask .proj-trayopts .talk-opt,.proj-actcard .talk-opt{min-height:44px}
  .proj-bchip{height:40px}
  .proj-listrow{grid-template-columns:22px minmax(0,1fr) 28px}
  .proj-listrow .why{display:none}
}
@media (prefers-reduced-motion:reduce){
  .proj-plan,.proj-msg{animation:none}
  .proj-flash,.proj-plan .proj-pen{transition:none}
}
/* ---- 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{align-self:flex-start;max-width:var(--bub,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, "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-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'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}
  /* Details' "Add" (round size, 28 px) and the practice mailbox link: 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}
}
/* ---- p21 P1 on a phone (SPEC 3.7, 4.1, 4.2; L19) ----
   The plan is a bubble the width of the column (it carries its buttons, like the slot's asks), its goal in two lines with
   "more" at the end of the second, its buttons 44 px to tap: his line and Start are on one screen (proj-plan-phone-fold 6).
   Details is the bottom sheet, its About box at least four lines. (The webfix of 2026-09-24 folded "What every email will
   say" into one line in the card for the same room; the section lives in Details now.) */
@media (max-width:800px){
  /* Start and Change something… are 44 px; the quiet Not now and Details › are 32 px words with a 44 px hit area, so the
     bubble stays within 240 px when Details › takes a row of its own */
  .proj-plan{padding-bottom:10px}
  .proj-plan .proj-actions{margin-top:8px;row-gap:0}
  .proj-plan .proj-actions .talk-opt.no{position:relative;min-height:32px}
  .proj-plan .proj-actions .talk-opt.no::before{content:"";position:absolute;inset:-4px 0 -8px}
  /* two rows: Start and Change something…, then Not now and, at the right, Details › (a flex break between them) */
  .proj-plan .proj-actions>.talk-opt.no{order:3;margin-top:4px}
  .proj-plan .proj-actions::after{content:"";flex-basis:100%;height:0;order:2}
  .proj-plan .proj-goalmore::before{inset:-12px -8px}
  .proj-details .proj-about{min-height:6.5em}
}
@media (max-width:420px){
  html[data-look="chats"] .emp-feed>.proj-plan{max-width:100%}
}
/* 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}

/* ---- p21 P2 (SPEC 4.7, V12): the project page opens calm. The title and its head buttons; a grey line for a practice run;
   one bar (the work done over all of it); one status line; what waits for him as one line that leads to the chat; the
   budget, the steps and how each is checked folded under "How it runs"; then the table. */
.proj-top{display:flex;flex-direction:column;align-items:stretch;gap:10px;grid-template-columns:none}
.proj-practiceline{margin:0;font-size:13px;line-height:20px;color:var(--proj-faint)}
.proj-bar.one{display:flex;gap:0;height:6px}
.proj-bar.one>i{flex:1 1 auto;height:6px;border-radius:3px;background:var(--proj-track);overflow:hidden}
.proj-bar.one>i>b{display:block;height:100%;border-radius:3px;background:var(--proj-now)}
.proj-top .proj-now{font-size:16px;font-weight:500;letter-spacing:0;line-height:24px}
/* p24 projux: the page leads with what he asked for — his own words in his chat bubble's grey, "You asked · 22:48" over
   them — then the progress line, with what waits for him at its end ("· 2 need you ›") and the next moment in grey */
.proj-asked{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;min-width:0}
.proj-askedhead{margin:0;font-size:13px;line-height:20px;color:var(--proj-faint)}
.proj-askedtext{margin:0;max-width:min(760px,100%);box-sizing:border-box;padding:10px 14px;border-radius:18px;background:var(--c-person,#58595c);
  color:#fff;font-size:15px;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere}
.proj-asked.goal .proj-askedtext{padding:0;border-radius:0;background:none;color:var(--proj-text)}
.proj-asked.long:not(.open) .proj-askedtext{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.proj-askedmore{position:relative}
.proj-askedmore::before{content:"";position:absolute;inset:-12px -8px}
.proj-top .proj-now .sep{margin:0 6px}
.proj-nowneed{display:inline-flex;align-items:center;gap:6px;margin:0;padding:0;border:0;background:none;color:var(--proj-amber);font:inherit;cursor:pointer;
  position:relative;white-space:nowrap}
.proj-nowneed::before{content:"";position:absolute;inset:-10px -6px}
.proj-nowneed:hover{color:#ffd27a}
.proj-nowneed.view{cursor:default;color:var(--proj-muted)}
.proj-nowneed .proj-dot{width:7px;height:7px}
.proj-nownext{margin:-6px 0 0;font-size:13px;line-height:20px;color:var(--proj-muted)}
.proj-pausebox .proj-hint{margin:0;padding:0 16px 12px;font-size:12.5px;color:var(--proj-muted)}
.proj-waitline{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;min-height:36px;margin:0;padding:0 12px 0 10px;border:1px solid var(--proj-card-line);
  border-radius:18px;background:var(--proj-card);color:var(--proj-text);font:inherit;font-size:14px;line-height:20px;text-align:left;cursor:pointer}
.proj-waitline:hover{background:#323336;border-color:#434447}
.proj-waitline.view{cursor:default}
.proj-waitline .proj-dot{width:7px;height:7px}
.proj-how{border:1px solid var(--proj-card-line);border-radius:16px;background:var(--proj-card)}
.proj-how[hidden]{display:none}
.proj-howsum{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--proj-text)}
.proj-howsum::-webkit-details-marker{display:none}
.proj-howchev{color:var(--proj-faint);transition:transform .15s ease}
.proj-how[open] .proj-howchev{transform:rotate(90deg)}
.proj-howbody{display:flex;flex-direction:column;gap:14px;padding:0 14px 14px}
.proj-howbody .proj-when{margin:0;font-size:13px;color:var(--proj-muted)}
.proj-hownote{margin:0;font-size:13px;line-height:1.45;color:var(--proj-muted)}
.proj-howbody .proj-railwrap{background:transparent}
@media (max-width:800px){
  .proj-waitline{min-height:44px;align-self:stretch}
  .proj-top .proj-now{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.proj-howchev{transition:none}}