/* ==========================================================================
   EVAL · css/delegate.css — DELEGATION: the "Send to" control in the task
   curtain, the people pop-up behind it, and the "Sent to …" pill it leaves
   on a task row, a follow-up row and the curtain's own head.
   Owner: delegation UI agent.  Tokens only; every shape is a primitive from
   components.css (pill, avatar, empty, and the .fld/.fl/.fi field settings.css
   already draws) — nothing here invents a parallel look.
   ========================================================================== */

/* ---------- the control: a gradient pill beside the done button ---------
   task.css makes the done button the full width of the bar; with a second
   control in it the bar becomes a row — the done button keeps the slack and
   Send to takes exactly what it needs. The class is on the bar, so the rule
   outranks task.css's own width whichever stylesheet the shell loads first. */
.tk-donebar.dg-row { display: flex; align-items: center; gap: 10px; }
.tk-donebar.dg-row > .btn { width: auto; flex: 1 1 auto; min-width: 0; }

.dg-open {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  height: 56px; padding: 0 13px 0 17px; border-radius: var(--r-pill);
  background: var(--grad); color: var(--onGrad);
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -.2px; white-space: nowrap;
  transition: transform var(--dur-liftUp) var(--ease);
}
/* the done button carries the glow; two floating purple controls side by side
   read as one control drawn twice, so this one sits flat and is told apart by
   its glyph and its width. It carried a disclosure chevron too, which promised a
   drawer of more rather than the act it is — gone with it. */
.dg-open > svg { opacity: .92; }
.dg-open { padding: 0 19px 0 17px; }

/* ---------- the pill the send leaves behind -----------------------------
   Three places, one pill: beside the evidence on a panel row (the .det there is
   flex:1 and ellipses), on its own line inside the body at 393px (where the
   evidence has no slack to give), and in the curtain head, where .tk-meta wraps
   and it can carry the name as it is typed. */
.dg-sent, .dg-marked { flex: 0 0 auto; max-width: 100%; }
/* the rule belongs to the DESCENT, not to one path through it: `.row > .body`
   is only true on Home, where the body is the row's own child. On the Tasks
   page the row wraps its body in `.pgtk-main`, so the pill fell back to the
   column's stretch and drew a 233px grey bar around 139px of text. */
.row .body > .dg-sent,
.row .body > .dg-marked { align-self: flex-start; }
/* a follow-up row in the Tasks page's narrow side column already carries its
   verdict pill: a third and fourth pill beside it has to be allowed to drop to
   the next line instead of running off the card. Scoped with :has() to the rows
   that actually carry one of these pills, so no other row in the app moves. */
.row .t1:has(.dg-sent), .row .t1:has(.dg-marked), .row .t2:has(.dg-sent) {
  flex-wrap: wrap; row-gap: 6px;
}

/* ---------- the pop-up: people, the missing email, preview, note -------- */
/* who it goes to, as one row — and the row is the picker (the chevron says so) */
.dg-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: 56px; padding: 6px 10px 6px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: transform var(--dur-liftUp) var(--ease), border-color 200ms var(--ease);
}
.dg-pick .nm {
  flex: 1; min-width: 0;
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-pick .pill { flex: 0 0 auto; }
/* the name is the row. When the address is missing, that flag is the actionable
   fact and the role is decoration, so the role steps aside rather than letting
   "Nana Prempeh" come out as "Na…" (the directory still shows both). */
/* the "No email" flag is toneless now (fmt.ABSENT), so the rule follows the flag's
   own class rather than a colour it no longer wears */
.dg-pick:has(.pill.peach) .pill.lav,
.dg-pick:has(.dg-nomail) .pill.lav { display: none; }
.dg-pick .cv { display: flex; flex: 0 0 auto; color: var(--muted2); opacity: .85; }

/* the directory, when the row is tapped: the pop-up's whole body is the list */
.dg-list { display: flex; flex-direction: column; margin: 0 -2px; }
.dg-person {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: 52px; padding: 7px 2px;
  transition: transform var(--dur-liftUp) var(--ease);
}
.dg-person + .dg-person { border-top: 1px solid var(--line2); }
.dg-person .nm {
  flex: 1; min-width: 0;
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dg-person .pill { flex: 0 0 auto; }
.dg-person .mk { display: flex; flex: 0 0 auto; color: var(--green); opacity: 0; transition: opacity 200ms var(--ease); }
.dg-person.on .mk { opacity: 1; }
.dg-person.on .nm { color: var(--purInk); }
/* the picked person's missing address is answered by the field right below, so
   the flag steps aside and gives the check mark its room */
.dg-person.on .dg-nomail { display: none; }

/* a field: the same box settings.css draws, so the app has one field */
.dg-note { margin-top: 12px; }
.dg-lab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dg-lab .fl { flex: 1; min-width: 0; }
.dg-lab .pill { flex: 0 0 auto; }

/* the preview: what lands in their inbox — the subject and who it goes to. It
   is the last block and it fits: the pop-up carries a picker row, a note and
   this, never a list as well (the list is the pop-up's other state), so nothing
   has to float over anything. */
.dg-prev { margin-top: 12px; }
.dg-prev .dg-card {
  position: relative; overflow: hidden;
  padding: 12px 12px 10px; border-radius: var(--r-md);
  background: var(--surf); border: 1px solid var(--line);
}
/* The card carried a 4px band of --gradR across its top. Two things were wrong
   with it. It is the CURTAIN BAND's signature at small size (laws §1: a 40px
   purple band is how you know which curtain you are in), and a pop-up is not a
   curtain — it borrowed the identity of a surface it is not. And the card clips
   to a 16px radius, so the bar's square ends were cut back to ~5px of the corner
   and left a visible notch at both ends, clearest in the dark render. The
   preview is told apart by what is in it — a subject and a To line — not by a
   stripe. The element stays in the markup until delegate.js drops it; nothing is
   drawn for it. */
.dg-prev .dg-edge { display: none; }
.dg-prev .dg-sub {
  display: block; margin-bottom: 9px;
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.2px; line-height: 1.3; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the To line: the label, the face, then the address — or the field for the one
   the store has not got yet, typed exactly where it will print */
.dg-to { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dg-to .k { flex: 0 0 auto; font-size: var(--fs-row); font-weight: 500; color: var(--muted); }
.dg-to .v {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-head); font-size: var(--fs-row); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink);
}
.dg-to .v .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the address never ellipses: it is the line the send is judged on. A long one
   wraps inside the card rather than hiding its own domain. */
.dg-to .v .ad { font-weight: 500; overflow-wrap: anywhere; }
.dg-to .fi { flex: 1; min-width: 0; height: 44px; background: var(--card); }
.dg-to .fi.dg-bad { border-color: var(--peach); }

/* the send failed: honest, inline, one line, and the action becomes Retry */
.dg-fail {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--peachBg); border: 1px solid var(--peach);
}
.dg-fail .ic { display: flex; flex: 0 0 auto; color: var(--peachInk); align-self: flex-start; margin-top: 2px; }
.dg-fail .ft {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-head); font-size: var(--fs-row); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink);
}
/* the reason is a SENTENCE ("The server answered 503", "Only your own address
   until delegation is open"), so it sits on the message line under the verdict
   instead of wearing a status pill it is not */
.dg-fail .ft > .rs { font-weight: 500; font-size: var(--fs-row); color: var(--ink2); }
.dg-fail .pill { flex: 0 0 auto; background: var(--card); }
/* A failed send is the one state whose stack is taller than the 46vh a pop-up
   is allowed (laws §1). At 1024x768 — 353px of pop-up — the body overflowed by
   13px and the cut landed on the preview's "To <name> · <address>" line, which
   is exactly what the GM has to read before he taps Retry. The blocks give back
   more than the failure line costs rather than the law moving, and only while
   the failure is on screen: the composing state keeps its own rhythm. */
.popup-body:has(.dg-fail) .dg-fail { margin-bottom: 8px; padding: 8px 12px; }
.popup-body:has(.dg-fail) .dg-note,
.popup-body:has(.dg-fail) .dg-prev { margin-top: 8px; }

/* …and the NEEDS-AN-ADDRESS state is the second one, which the rule above never
   covered because it is scoped to `.dg-fail` alone. Send with nobody's address
   on file adds the "Needed to send" row (`.dg-lab`, 22px) to the same stack, and
   at 1024x768 — 353px of pop-up, 231px of body — the block runs 261px: 30px past
   the fold, on the one state whose whole purpose is a field the GM has to fill.
   Measured there, the body auto-scrolls to the focused field and slices the
   RECIPIENT row off the top instead, so the pop-up cannot be read whole in
   either direction. At 1180 the same state is 6px over.

   The margins give back 8px. The other 28 come from the preview's subject line:
   in this state the card is not a preview of a finished mail, it is the one
   blank line of it, and the task's own title is already the headline of the
   curtain this pop-up belongs to. It comes back the moment the address does. */
.popup-body:has(.dg-lab) .dg-note,
.popup-body:has(.dg-lab) .dg-prev { margin-top: 8px; }
.popup-body:has(.dg-lab) .dg-prev .dg-sub { display: none; }

/* nobody to send to yet */
.dg-void { padding: 6px 0 4px; }

/* the send landed. SAME row grammar as every other state of this pop-up: the
   recipient row the picker draws, then the verdict. It used to centre everything,
   stack a second pill for the time and set the address as a small grey caption —
   two layout systems in one pop-up, at the moment the GM most wants confirmation. */
.dg-done { display: flex; flex-direction: column; gap: 12px; padding: 2px 0 4px; }
.dg-done > .dg-to {
  padding: 12px; border-radius: var(--r-md);
  background: var(--surf); border: 1px solid var(--line);
}
.dg-verdict { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dg-verdict > .pill { flex: 0 0 auto; }
.dg-verdict .at {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-head); font-size: var(--fs-row); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink);
}

/* ==========================================================================
   Phone: the task sheet is 361px inside the gutters and the pop-up is 88vw of
   393, so three things in a row become two — the name always survives.
   ========================================================================== */
@media (max-width: 999px) {
  .dg-open { height: 56px; padding: 0 11px 0 14px; font-size: var(--fs-row); gap: 7px; }
  .dg-to .k { display: none; }          /* 346px: the face and the address are the line */
  /* 346px again: a name, a role and a flag do not fit, and the name is the row.
     Which of the other two goes is the same trade the COMPOSE row makes 130
     lines up, and it has to be made the same way: the missing address is the
     ACTIONABLE fact and the role is decoration. The phone used to drop the flag
     instead, so a directory where the store holds no address for anybody drew
     eleven identical rows — Desk, Used manager, Recon, Lot / photos all reading
     "Salesperson" or nothing at all — and the GM learned which ones he would
     have to type an address for only after picking one and reaching the compose
     row. He picks blind once per person, every morning, for a fact the row was
     holding and hiding. The role steps aside; the flag stays. */
  .dg-person:has(.dg-nomail) .pill.lav { display: none; }
}

/* The marks block the sweep makes for a row that has none of its own (Home and
   the Tasks page draw a follow-up without a footer). Same shape as the
   Follow-ups curtain's `.fu-marks`, so provenance reads the same everywhere and
   never crowds onto a title line. */
.dg-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.dg-marks:empty { display: none; margin: 0; }
.dg-marks > .pill { flex: 0 0 auto; max-width: 100%; }