// screens-detail.jsx — Task detail + Apply modal
const { useState: useS2 } = React;

const withdrawLink = { display: "block", width: "100%", marginTop: 10, background: "none", border: "none", cursor: "pointer", color: "var(--ink-2)", fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600, textAlign: "center", padding: "6px 0", textDecoration: "underline" };

function TaskDetail({ task, go, onApply, applied, openTask, allTasks, currentUserId,
  taskMeta, taskApplicants, onAccept, onReject, onRelease, onReview, onSubmitProof,
  saved, onSave, onMessage, onViewProfile, verification, onNeedVerify, onBoost, onCancel, onReviewPoster, onWithdraw, onEdit }) {
  const [showApply, setShowApply] = useS2(false);
  const [showProof, setShowProof] = useS2(false);
  const p = PEOPLE[task.poster] || task.posterProfile || { name: "Someone", handle: "@user", city: "", verified: false, rating: 0, jobs: 0 };
  const c = CAT[task.cat];
  const related = allTasks.filter((t) => t.cat === task.cat && t.id !== task.id).slice(0, 3);
  const meta = taskMeta || {};
  const dl = deadlineInfo(task.deadline);
  const worker = meta.assignedTo
    ? (PEOPLE[meta.assignedTo] || { name: typeof meta.assignedTo === "string" ? "Assigned worker" : "Worker", city: "", rating: 0, jobs: 0, verified: false })
    : null;

  const isPoster = task.poster === "__me" || task.poster === currentUserId;
  const isAssignedToMe = !isPoster && meta.status === "assigned" && (meta.assignedTo === "__me" || meta.assignedTo === currentUserId);
  const isProofSubmitted = !isPoster && meta.status === "proof_submitted" && (meta.assignedTo === "__me" || meta.assignedTo === currentUserId);
  const isCompleted = meta.status === "completed";

  return (
    <Wrap style={{ paddingTop: 24, paddingBottom: 20 }}>
      <button onClick={() => go("browse")} style={{ display: "inline-flex", alignItems: "center", gap: 7, background: "none", border: "none", cursor: "pointer", color: "var(--ink-2)", fontFamily: "var(--sans)", fontSize: 14.5, fontWeight: 600, padding: "8px 0", marginBottom: 8 }}>
        <Icon name="back" size={17} /> Back to tasks
      </button>

      <div className="detail-grid">
        {/* ---- main content ---- */}
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 700, color: "var(--clay)", background: "color-mix(in srgb, var(--clay) 10%, transparent)", padding: "6px 13px", borderRadius: 999 }}>
              <Icon name={c.icon} size={15} stroke={1.9} /> {c.label}
            </span>
            {task.urgent && (
              <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 12.5, fontWeight: 700, color: "var(--clay)", padding: "6px 12px", borderRadius: 999, border: "1px solid var(--clay)" }}>
                <Icon name="bolt" size={13} fill stroke={0} /> Urgent
              </span>
            )}
            {meta.status && meta.status !== "open" && <StatusBadge status={meta.status} />}
          </div>

          <h1 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: "clamp(28px,4vw,44px)", lineHeight: 1.08, letterSpacing: "-0.03em", color: "var(--ink)", margin: 0, textWrap: "balance" }}>
            {task.title}
          </h1>

          <div style={{ display: "flex", gap: 20, marginTop: 18, color: "var(--ink-2)", fontSize: 14.5, fontWeight: 500, flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name={task.remote ? "bolt" : "pin"} size={16} /> {task.city}{task.remote ? " · Remote" : ""}</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="users" size={16} /> {task.applicants + (taskApplicants?.length || 0)} applied</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="clock" size={16} /> Posted {task.posted} ago</span>
            {dl && (
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: dl.overdue ? "var(--clay)" : dl.soon ? "var(--amber-dk)" : "var(--ink-2)", fontWeight: dl.overdue || dl.soon ? 700 : 500 }}>
                <Icon name="bolt" size={16} fill={dl.overdue || dl.soon} stroke={dl.overdue || dl.soon ? 0 : 1.7} /> {dl.text}
              </span>
            )}
          </div>

          <div style={{ height: 1, background: "var(--line)", margin: "26px 0" }} />

          <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", margin: 0, fontWeight: 450 }}>{task.blurb}</p>

          {task.details?.length > 0 && (
            <>
              <h3 style={detailH}>What you'll do</h3>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
                {task.details.map((d, i) => (
                  <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 15.5, lineHeight: 1.5, color: "var(--ink)" }}>
                    <span style={{ flexShrink: 0, marginTop: 1, width: 22, height: 22, borderRadius: "50%", background: "var(--green-3)", color: "var(--green)", display: "grid", placeItems: "center" }}>
                      <Icon name="check" size={13} stroke={2.6} />
                    </span>
                    {d}
                  </li>
                ))}
              </ul>
            </>
          )}

          {task.proof && (
            <>
              <h3 style={detailH}>Proof of completion</h3>
              <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 14, padding: "16px 18px", display: "flex", gap: 12, alignItems: "flex-start" }}>
                <span style={{ color: "var(--clay)", flexShrink: 0, marginTop: 1 }}><Icon name="doc" size={20} /></span>
                <span style={{ fontSize: 15, lineHeight: 1.5, color: "var(--ink)" }}>{task.proof}</span>
              </div>
            </>
          )}



          {related.length > 0 && (
            <>
              <h3 style={detailH}>Similar tasks</h3>
              <div className="grid-3" style={{ gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))" }}>
                {related.map((t) => <TaskCard key={t.id} task={t} onClick={() => openTask(t.id)} />)}
              </div>
            </>
          )}
        </div>

        {/* ---- sidebar ---- */}
        <aside>
          {isPoster ? (
            <ManageTask
              task={task}
              meta={meta}
              taskApplicants={taskApplicants}
              onAccept={onAccept}
              onReject={onReject}
              onRelease={onRelease}
              onReview={onReview}
              onMessage={onMessage}
              onBoost={onBoost}
              onCancel={onCancel}
              onEdit={onEdit}
            />
          ) : (
            <WorkerSidebar
              task={task}
              meta={meta}
              applied={applied}
              isAssignedToMe={isAssignedToMe}
              isProofSubmitted={isProofSubmitted}
              isCompleted={isCompleted}
              saved={saved}
              p={p}
              verification={verification}
              onApply={() => setShowApply(true)}
              onNeedVerify={onNeedVerify}
              onSubmitProof={() => setShowProof(true)}
              onMessage={() => onMessage(task.poster)}
              onViewProfile={() => onViewProfile && onViewProfile(task.poster)}
              onReviewPoster={onReviewPoster}
              onWithdraw={onWithdraw}
              onSave={() => onSave(task.id)}
            />
          )}
        </aside>
      </div>

      {showApply && (
        <ApplyModal
          task={task}
          onClose={() => setShowApply(false)}
          onSubmit={(data) => { onApply(task.id, data); setShowApply(false); }}
        />
      )}
      {showProof && (
        <ProofSubmitModal
          task={task}
          onClose={() => setShowProof(false)}
          onSubmit={async (data) => { await onSubmitProof(task.id, data); setShowProof(false); }}
        />
      )}
    </Wrap>
  );
}

function WorkerSidebar({ task, meta, applied, isAssignedToMe, isProofSubmitted, isCompleted, saved, p, verification, onApply, onNeedVerify, onSubmitProof, onMessage, onViewProfile, onSave, onReviewPoster, onWithdraw }) {
  const [showReview, setShowReview] = useS2(false);
  const isPaid = task.pay.kind === "fixed";
  const dl = deadlineInfo(task.deadline);
  const needsVerify = isPaid && verification !== "verified";
  let actionArea;
  if (isCompleted) {
    actionArea = (
      <>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "14px", borderRadius: 12, background: "var(--green-3)", color: "var(--green)", fontWeight: 700, fontSize: 15 }}>
          <Icon name="check" size={18} stroke={2.4} /> Task completed
        </div>
        {onReviewPoster && (meta.workerReview ? (
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 7, marginTop: 10, fontSize: 14, fontWeight: 600, color: "var(--ink-2)" }}>
            <Icon name="star" size={15} fill stroke={0} style={{ color: "var(--amber)" }} /> You rated {p.name.split(" ")[0]} {meta.workerReview.stars}★
          </div>
        ) : (
          <Button size="md" full icon="star" style={{ marginTop: 10 }} onClick={() => setShowReview(true)}>Rate {p.name.split(" ")[0]}</Button>
        ))}
      </>
    );
  } else if (isProofSubmitted) {
    actionArea = (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "14px", borderRadius: 12, background: "color-mix(in srgb, var(--amber) 15%, transparent)", color: "var(--amber-dk)", fontWeight: 700, fontSize: 14.5 }}>
        <Icon name="clock" size={17} /> Proof submitted — awaiting payment
      </div>
    );
  } else if (isAssignedToMe) {
    actionArea = (
      <>
        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 14px", borderRadius: 12, background: "color-mix(in srgb, var(--blue) 10%, transparent)", color: "var(--blue)", fontWeight: 700, fontSize: 14.5, marginBottom: 10 }}>
          <Icon name="bolt" size={16} fill stroke={0} /> You're on this task!
        </div>
        <Button size="lg" full icon="doc" onClick={onSubmitProof}>Submit proof of completion</Button>
        {onWithdraw && <button onClick={onWithdraw} style={withdrawLink}>Can't do this anymore? Withdraw</button>}
      </>
    );
  } else if (applied) {
    actionArea = (
      <>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "14px", borderRadius: 999, background: "var(--green-3)", color: "var(--green)", fontWeight: 700, fontSize: 15.5 }}>
          <Icon name="check" size={18} stroke={2.4} /> Application sent
        </div>
        {onWithdraw && <button onClick={onWithdraw} style={withdrawLink}>Withdraw application</button>}
      </>
    );
  } else if (needsVerify && verification === "pending") {
    actionArea = (
      <div style={{ padding: "13px 14px", borderRadius: 12, background: "color-mix(in srgb, var(--amber) 14%, transparent)", color: "var(--amber-dk)", fontWeight: 700, fontSize: 14, display: "flex", alignItems: "center", gap: 8, lineHeight: 1.35 }}>
        <Icon name="clock" size={17} /> Verification under review — you can apply once approved.
      </div>
    );
  } else if (needsVerify) {
    actionArea = (
      <>
        <div style={{ display: "flex", gap: 9, alignItems: "flex-start", padding: "12px 14px", borderRadius: 12, background: "var(--ink-3)", marginBottom: 10 }}>
          <span style={{ color: "var(--clay)", flexShrink: 0, marginTop: 1 }}><Icon name="shield" size={17} /></span>
          <span style={{ fontSize: 13.5, color: "var(--ink)", lineHeight: 1.4 }}>Paid tasks need a verified identity. It's a one-time check.</span>
        </div>
        <Button size="lg" full icon="shield" onClick={onNeedVerify}>Verify to apply</Button>
      </>
    );
  } else {
    actionArea = (
      <Button size="lg" full icon="bolt" onClick={onApply}>Apply for this task</Button>
    );
  }

  return (
    <div style={{ position: "sticky", top: 84, display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 18, padding: 24, boxShadow: "0 4px 16px -10px rgba(40,30,15,.18)" }}>
        <div style={{ marginBottom: 6 }}><PayTag pay={task.pay} size="lg" /></div>
        {task.pay.kind === "fixed" && task.pay.amount > 0 && (
          <div style={{ background: "var(--ink-3)", borderRadius: 12, padding: "12px 14px", marginTop: 12, fontSize: 13.5 }}>
            <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink)", marginBottom: 6 }}>
              <span>Task budget</span>
              <span style={{ fontWeight: 600 }}>{task.pay.cur}{task.pay.amount.toLocaleString()}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", color: "var(--ink-2)", marginBottom: 6 }}>
              <span>Platform fee (10%)</span>
              <span>−{task.pay.cur}{Math.round(task.pay.amount * 10 / 100).toLocaleString()}</span>
            </div>
            <div style={{ height: 1, background: "var(--line)", margin: "4px 0 6px" }} />
            <div style={{ display: "flex", justifyContent: "space-between", color: "var(--green)", fontWeight: 700 }}>
              <span>You will receive</span>
              <span>{task.pay.cur}{(task.pay.amount - Math.round(task.pay.amount * 10 / 100)).toLocaleString()}</span>
            </div>
          </div>
        )}
        {task.pay.kind === "favor" && <p style={{ margin: "2px 0 0", fontSize: 14, color: "var(--ink-2)" }}>{task.pay.note}</p>}
        {dl && !isCompleted && (
          <div style={{ marginTop: 14, display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, fontWeight: 700, color: dl.overdue ? "var(--clay)" : "var(--amber-dk)", background: dl.overdue ? "color-mix(in srgb, var(--clay) 10%, transparent)" : "color-mix(in srgb, var(--amber) 14%, transparent)", padding: "10px 13px", borderRadius: 11 }}>
            <Icon name="clock" size={15} /> {dl.overdue ? "Deadline has passed" : `Due ${dl.label} · ${dl.rel} left`}
          </div>
        )}
        <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 10 }}>
          {actionArea}
          {(!isPaid || verification === "verified") && (
            <Button size="md" full variant="ghost" icon="chat" onClick={onMessage}>
              Message {p.name.split(" ")[0]}
            </Button>
          )}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, color: "var(--ink-2)", fontSize: 13 }}>
            <Icon name="shield" size={14} />
            {(() => {
              if (isCompleted) {
                if (isPaid) {
                  const payInfo = meta?.paymentInfo;
                  if (payInfo?.payout_amount) {
                    return `${task.pay.cur}${payInfo.payout_amount.toLocaleString()} sent to worker`;
                  }
                  return "Payment released";
                }
                return "Task complete";
              }
              if (meta?.paymentStatus === "refunded") return "Payment refunded to poster";
              if (meta?.paymentStatus === "releasing") return "Payment being processed…";
              return isPaid ? `${task.pay.cur}${task.pay.amount?.toLocaleString() || ""} held safely until done` : "A favor — no payment involved";
            })()}
          </div>
          <button onClick={onSave} style={{ display: "flex", alignItems: "center", gap: 5, background: "none", border: "none", cursor: "pointer", color: saved ? "var(--clay)" : "var(--ink-2)", fontFamily: "var(--sans)", fontSize: 13, fontWeight: 600, padding: 0 }}>
            <Icon name="heart" size={14} fill={saved} stroke={saved ? 0 : 1.7} />
            {saved ? "Saved" : "Save"}
          </button>
        </div>
      </div>

      {showReview && (
        <ReviewModal targetName={p.name} onClose={() => setShowReview(false)}
          onSubmit={(review) => { onReviewPoster && onReviewPoster(review); setShowReview(false); }} />
      )}

      {/* poster card */}
      {(() => {
        const canViewPoster = !isPaid || verification === "verified";
        const clickHandler = canViewPoster ? onViewProfile : undefined;
        return (
          <div onClick={clickHandler} style={{ background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 18, padding: 20, cursor: clickHandler ? "pointer" : "default", transition: "border-color .15s" }}
            onMouseEnter={(e) => { if (clickHandler) e.currentTarget.style.borderColor = "var(--line-dk)"; }}
            onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--line)"}>
            <div style={{ fontSize: 12.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--ink-2)", marginBottom: 14 }}>Posted by</div>
            <div style={{ display: "flex", gap: 13, alignItems: "center" }}>
              <Avatar name={p.name} size={50} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontWeight: 700, fontSize: 16.5, color: "var(--ink)", whiteSpace: "nowrap" }}>{p.name}</span>
                  {p.verified && <VerifiedTick size={16} />}
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 3, fontSize: 13.5, color: "var(--ink-2)" }}>
                  <Stars value={p.rating} /> <span>· {p.jobs} tasks</span>
                </div>
              </div>
              {clickHandler && <Icon name="arrow" size={18} style={{ color: "var(--ink-2)", flexShrink: 0 }} />}
            </div>
            {p.phone && (isAssignedToMe || isProofSubmitted || isCompleted) && (
              <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 12px", borderRadius: 12, background: "var(--ink-3)", color: "var(--ink)", fontSize: 14, fontWeight: 600, marginTop: 14 }}>
                <Icon name="phone" size={15} /> Phone: <a href={`tel:${p.phone}`} style={{ color: "var(--clay)", textDecoration: "underline" }}>{p.phone}</a>
              </div>
            )}
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6, marginTop: 14, fontSize: 13.5, color: "var(--ink-2)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="pin" size={15} /> {p.city}</span>
              {clickHandler && <span style={{ fontWeight: 600, color: "var(--clay)" }}>View profile</span>}
              {!canViewPoster && <span style={{ fontWeight: 600, color: "var(--ink-2)", fontSize: 12.5 }}>Verify to contact</span>}
            </div>
          </div>
        );
      })()}
    </div>
  );
}

const detailH = { fontFamily: "var(--display)", fontWeight: 600, fontSize: 23, letterSpacing: "-0.02em", color: "var(--ink)", margin: "34px 0 16px" };

/* ===== APPLY MODAL ===== */
function ApplyModal({ task, onClose, onSubmit }) {
  const paid = task.pay.kind === "fixed";
  const [msg, setMsg] = useS2("");
  const [price, setPrice] = useS2(paid ? String(task.pay.amount) : "");
  const [when, setWhen] = useS2("asap");
  const [err, setErr] = useS2("");
  const [sent, setSent] = useS2(false);

  const submit = () => {
    if (sent) return;
    if (msg.trim().length < 15) { setErr("Tell the poster a little more — at least a sentence."); return; }
    setSent(true);
    onSubmit({ msg, price: paid ? Number(price) : null, when });
  };

  return (
    <div onClick={onClose} style={modalOverlay}>
      <div onClick={(e) => e.stopPropagation()} style={{ ...modalCard, maxWidth: 520 }}>
        <div style={{ padding: "22px 26px", borderBottom: "1px solid var(--line)", display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 14 }}>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700, color: "var(--clay)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Apply</div>
            <h2 style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 23, letterSpacing: "-0.02em", margin: "6px 0 0", color: "var(--ink)", lineHeight: 1.15 }}>{task.title}</h2>
          </div>
          <button onClick={onClose} style={closeBtn}>✕</button>
        </div>

        <div style={{ padding: "22px 26px", display: "flex", flexDirection: "column", gap: 20 }}>
          <Field label="Your message to the poster" hint="Why are you a good fit? When can you do it?">
            <textarea value={msg} onChange={(e) => { setMsg(e.target.value); setErr(""); }} rows={4}
              placeholder="Hi! I'm 10 minutes from there and free this afternoon — happy to grab the photos and pricing for you…"
              style={{ ...inputStyle, resize: "vertical", lineHeight: 1.5 }} />
          </Field>

          {paid && (
            <Field label="Your offer" hint={`Poster's budget is ${task.pay.cur}${task.pay.amount.toLocaleString()}`}>
              <div style={{ position: "relative", display: "flex", alignItems: "center", maxWidth: 200 }}>
                <span style={{ position: "absolute", left: 15, fontWeight: 700, color: "var(--ink-2)", fontSize: 16 }}>{task.pay.cur}</span>
                <input value={price} onChange={(e) => setPrice(e.target.value.replace(/[^\d]/g, ""))} inputMode="numeric"
                  style={{ ...inputStyle, paddingLeft: 32, fontWeight: 700, fontSize: 17 }} />
              </div>
            </Field>
          )}

          <Field label="When can you do it?">
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {[["asap", "ASAP"], ["today", "Today"], ["this-week", "This week"], ["flexible", "Flexible"]].map(([v, l]) => (
                <button key={v} onClick={() => setWhen(v)} style={{
                  padding: "9px 15px", borderRadius: 999, cursor: "pointer", fontFamily: "var(--sans)", fontSize: 14, fontWeight: 600,
                  border: "1px solid " + (when === v ? "var(--ink)" : "var(--line)"),
                  background: when === v ? "var(--ink)" : "var(--surface)", color: when === v ? "var(--paper)" : "var(--ink)",
                }}>{l}</button>
              ))}
            </div>
          </Field>

          {err && (
            <div style={{ color: "var(--clay)", fontSize: 14, fontWeight: 600, display: "flex", gap: 7, alignItems: "center" }}>
              <Icon name="bolt" size={15} /> {err}
            </div>
          )}
        </div>

        <div style={{ padding: "18px 26px", borderTop: "1px solid var(--line)", display: "flex", gap: 10, justifyContent: "flex-end" }}>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
          <Button icon="check" onClick={submit} disabled={sent}>{sent ? "Sending…" : "Send application"}</Button>
        </div>
      </div>
    </div>
  );
}

function Field({ label, hint, children }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ fontSize: 14.5, fontWeight: 700, color: "var(--ink)", marginBottom: hint ? 3 : 8 }}>{label}</div>
      {hint && <div style={{ fontSize: 13, color: "var(--ink-2)", marginBottom: 9 }}>{hint}</div>}
      {children}
    </label>
  );
}

const inputStyle = { width: "100%", padding: "12px 15px", borderRadius: 11, border: "1px solid var(--line)", background: "var(--paper)", fontFamily: "var(--sans)", fontSize: 15.5, color: "var(--ink)", outline: "none", boxSizing: "border-box" };
const modalOverlay = { position: "fixed", inset: 0, background: "rgba(28,22,12,.45)", backdropFilter: "blur(3px)", zIndex: 100, display: "flex", alignItems: "center", justifyContent: "center", padding: 20 };
const modalCard = { background: "var(--surface)", borderRadius: 22, width: "100%", maxHeight: "90vh", overflowY: "auto", boxShadow: "0 30px 70px -20px rgba(30,20,10,.5)" };
const closeBtn = { background: "var(--ink-3)", border: "none", width: 34, height: 34, borderRadius: "50%", cursor: "pointer", fontSize: 15, color: "var(--ink-2)", flexShrink: 0 };

Object.assign(window, { TaskDetail, WorkerSidebar, ApplyModal, Field, inputStyle, modalOverlay, modalCard, closeBtn });