/* ==========================================================================
   EVAL · css/curtains/task.css — the TASK curtain: one decision, everything
   needed to make it, and the contract that tomorrow's data will check it by.
   Owner: task curtain agent. Tokens only; primitives from components.css.
   The band, pull tab, scrim and entrance belong to the engine.
   ========================================================================== */

/* ---------- section rhythm (host children) ------------------------------ */
.tk-s + .tk-s { margin-top: 16px; }

/* ---------- nothing to show: the empty state owns the whole curtain ----- */
.tk-void { display: flex; align-items: center; justify-content: center; min-height: 58vh; }
.tk-void .empty { width: 100%; max-width: 460px; }

/* ---------- head -------------------------------------------------------- */
/* identity, then the title, then the decision as its subtitle, then who holds
   it and what will judge it. Four lines, each answering one question. */
.tk-head { display: flex; flex-direction: column; gap: 11px; }

.tk-eye { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.tk-head h2 {
  font-family: var(--font-head); font-size: var(--fs-h1); font-weight: 800;
  letter-spacing: var(--ls-tight); line-height: 1.2; color: var(--ink);
}

/* the decision the GM is here to answer: the title's subtitle, not a callout
   box — it is the same thought, one step down in weight */
.tk-dec { display: block; margin-top: -4px; }
.tk-dec .dtx {
  display: block;
  font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 600;
  letter-spacing: -.2px; line-height: 1.45; color: var(--ink2);
}

.tk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.tk-owner {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 12px 0 9px; border-radius: var(--r-pill);
  background: var(--surf2); border: 1px solid var(--line);
  transition: transform var(--dur-liftUp) var(--ease), border-color 200ms var(--ease);
}
.tk-owner .nm {
  font-family: var(--font-head); font-size: var(--fs-row); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink); white-space: nowrap;
}
.tk-owner .cv { display: flex; color: var(--muted2); opacity: .85; }

/* ---------- why --------------------------------------------------------- */
.tk-why p {
  margin-top: 10px;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink2);
}
.tk-why p .num { font-weight: 800; }
/* the stake pill in the head is a control; its pop-up carries the arithmetic */
.tk-basis { margin-top: 10px; }

/* ---------- the three figures ------------------------------------------- */
.tk-ev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* ---------- plans ------------------------------------------------------- */
.tk-plist { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
.tk-plan {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform var(--dur-liftUp) var(--ease),
    border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.tk-plan.on { border-color: var(--pur); background: var(--lav2); }

.tk-radio {
  width: 22px; height: 22px; flex: 0 0 auto; margin-top: 3px;
  border-radius: var(--r-pill); border: 2px solid var(--line3);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 200ms var(--ease);
}
.tk-radio > i {
  width: 11px; height: 11px; border-radius: var(--r-pill); background: var(--grad);
  transform: scale(0); transition: transform 200ms var(--ease);
}
.tk-plan.on .tk-radio { border-color: var(--pur); }
.tk-plan.on .tk-radio > i { transform: none; }

.tk-pb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-p1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-p1 b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.25px; color: var(--ink);
}
.tk-p2 { font-size: var(--fs-sub); font-weight: 450; line-height: 1.4; color: var(--muted); }
.tk-p3 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
/* the effect can run long ("Every in-transit unit delivered this week"); it
   wraps inside its own pill instead of pushing the cost off the card */
.tk-p3 .pill { white-space: normal; text-align: left; }

/* ---------- the evidence list ------------------------------------------- */
.tk-list { margin-top: 6px; }
/* the row's trailing cell is its figure — the count against a rep, the age of a
   unit — so it carries the weight of one, in ink, with the tone on nothing */
.tk-list .row .who {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.2px; color: var(--ink);
}
/* the list is the content here, so a long line wraps to two instead of clipping */
.tk-list .row .t2 { align-items: flex-start; }
.tk-list .row .t2 .det {
  white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.tk-more {
  margin-top: 9px; padding: 11px 13px; border-radius: var(--r-sm);
  background: var(--surf2); border: 1px solid var(--line2);
  font-size: var(--fs-row); font-weight: 700; color: var(--muted);
  letter-spacing: -.1px;
}

/* ---------- verify ------------------------------------------------------ */
/* the contract: the report EVAL reads back, when, the sentence that has to be
   true, and the two figures the verdict is measured between */
.tk-proof {
  display: flex; flex-direction: column; gap: 9px; margin-top: 10px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--lav2), var(--peachBg));
  border: 1px solid var(--line2);
}
.tk-vline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 7px; }
.tk-vline .ic {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--line); color: var(--green);
  display: flex; align-items: center; justify-content: center;
}
.tk-vline b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.2px; color: var(--ink);
}
/* the report named on the line above has stopped arriving, so the check cannot happen
   on the day the line promises. fmt.ABSENT's own toneless word, plus the day it last
   landed — the same thing the Follow-ups curtain writes for these rows. */
.tk-vstale { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 6px; }
.tk-vstale > .pill { flex: 0 0 auto; }
.tk-vstale .tx {
  font-family: var(--font-head); font-size: var(--fs-row); font-weight: 600;
  letter-spacing: -.1px; color: var(--ink2);
}
.tk-vline .ic.clockic { color: var(--amber); }
.tk-proof .pf { font-size: var(--fs-body); line-height: 1.5; color: var(--ink2); }

.tk-arc { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.tk-arc .tile { background: var(--card); border-color: var(--line); }
.tk-arc .tile b { font-size: var(--fs-d3); }
.tk-arc .ar { display: flex; color: var(--muted2); }

/* ---------- the done control ------------------------------------------- */
.tk-donebar { margin-top: 18px; }
.tk-donebar .btn { width: 100%; height: 56px; font-size: var(--fs-h2); }
.tk-donebar .btn.on {
  background: var(--goodBg); color: var(--goodInk);
  border: 1px solid var(--green); box-shadow: none;
}

/* ---------- a compliance nudge ------------------------------------------
   Housekeeping the store owes somebody, not a decision about money: the same
   shape, one step quieter everywhere — smaller title, lighter subtitle, smaller
   figures, flat option rows and a flat contract card. */
.tk-nudge .tk-s + .tk-s { margin-top: 13px; }
.tk-nudge .tk-head { gap: 9px; }
.tk-nudge .tk-head h2 { font-size: 19px; line-height: 1.24; }
.tk-nudge .tk-dec .dtx { font-size: var(--fs-h3); font-weight: 650; line-height: 1.4; }
.tk-nudge .tk-why p { margin-top: 8px; font-size: var(--fs-row); line-height: 1.55; }
.tk-nudge .tk-ev { gap: 9px; }
.tk-nudge .tk-ev .tile { padding: 11px 12px; }
.tk-nudge .tk-ev .tile b { font-size: var(--fs-d3); }
.tk-nudge .tk-plist { gap: 8px; }
.tk-nudge .tk-plan { box-shadow: none; background: var(--surf); padding: 11px 13px; }
.tk-nudge .tk-plan.on { background: var(--lav2); }
.tk-nudge .tk-proof { background: var(--surf2); }
.tk-nudge .tk-arc .tile b { font-size: var(--fs-h1); }
/* the commit does NOT shrink here: the Send-to control beside it is a fixed
   height the delegation agent owns, and two controls in one bar at two heights
   is a worse tell than a loud button on a quiet card */
.tk-nudge .tk-donebar { margin-top: 14px; }

/* ---------- the owner pop-up ------------------------------------------- */
.tk-pick { display: flex; flex-direction: column; padding-bottom: 8px; }
.tk-pick button {
  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);
}
.tk-pick button + button { border-top: 1px solid var(--line2); }
.tk-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;
}
.tk-pick .mk { display: flex; flex: 0 0 auto; color: var(--green); opacity: 0; transition: opacity 200ms var(--ease); }
.tk-pick button.on .mk { opacity: 1; }
.tk-pick button.on .nm { color: var(--purInk); }

/* ==========================================================================
   Phone frame: the sheet is 361px wide inside the gutters, so the three
   figures go two-up with the third across, and the big type steps down once.
   ========================================================================== */
@media (max-width: 999px) {
  .tk-head h2 { font-size: 19px; }
  .tk-dec .dtx { font-size: var(--fs-h3); }
  .tk-ev { grid-template-columns: 1fr 1fr; }
  .tk-ev > .tile:nth-child(3) { grid-column: 1 / -1; }
  .tk-ev .tile b { font-size: var(--fs-d3); }
  /* 333px of card cannot hold "EVAL checks" + a report's full name + "tomorrow"
     on one line, and an orphaned "tomorrow" under the pill reads like a mistake.
     The sentence keeps its words together and the report takes the second line —
     a deliberate two-line block, not a wrap that happened to land there. The DOM
     order is untouched, so the sentence a screen reader gets is the sentence. */
  .tk-vline b + .pill { order: 2; }
  .tk-vline .pill + b { order: 1; }
  /* the two words are one sentence, so the space between them is a word space,
     not the gap that holds the chip off the glyph */
  .tk-vline { column-gap: 5px; }
  .tk-vline .ic { margin-right: 3px; }
  .tk-arc { gap: 8px; }
  .tk-arc .tile { padding: 10px 11px; }
  .tk-donebar .btn { height: 54px; }
  .tk-nudge .tk-head h2 { font-size: 17px; }
  .tk-nudge .tk-dec .dtx { font-size: var(--fs-row); }
}