/* ============================================================================
   Paste the mess.

   The preview is the whole feature, so it is built to be read quickly and
   corrected in place: one line per thing, the kind on a dropdown you can
   change, and every row switch-offable. Nothing here is decorative.
   ========================================================================== */

.v10p{display:grid;gap:12px}
.v10p-in{
  width:100%;min-height:132px;resize:vertical;font:inherit;font-size:14px;line-height:1.55;
  padding:13px 15px;border-radius:12px;border:1px solid var(--line,#dce7eb);
  background:var(--surface,#fff);color:var(--text,#12263F);
}
.v10p-in:focus{outline:2px solid color-mix(in srgb,var(--accent,#1E7FD0) 45%,transparent);outline-offset:1px}
.v10p-hint{font-size:12.5px;line-height:1.5;color:var(--muted,#8894ab)}
.v10p-hint em{font-style:normal;font-weight:600;color:var(--text,#12263F)}

.v10p-out{
  display:grid;gap:12px;max-height:min(46vh,430px);overflow:auto;
  padding:2px;border-radius:12px;
}
.v10p-out .empty{
  padding:26px 14px;text-align:center;font-size:13.5px;color:var(--muted,#8894ab);
  border:1px dashed var(--line,#dce7eb);border-radius:12px;
}

/* ------------------------------------------------------------- one project */
.v10p-group{
  border:1px solid var(--line,#dce7eb);border-radius:13px;overflow:hidden;
  background:var(--surface,#fff);
}
.v10p-group.off{opacity:.45}
.v10p-group-head{
  display:flex;align-items:center;gap:9px;padding:9px 11px;
  background:var(--sunken,#f3f7fa);border-bottom:1px solid var(--line,#dce7eb);
}
.v10p-loose{justify-content:flex-start}
.v10p-title{
  flex:1;min-width:0;font:inherit;font-size:14px;font-weight:620;
  border:1px solid transparent;background:none;border-radius:7px;padding:4px 7px;
  color:var(--text,#12263F);
}
.v10p-title:hover{border-color:var(--line,#dce7eb)}
.v10p-title:focus{border-color:var(--accent,#1E7FD0);outline:none;background:var(--surface,#fff)}
.v10p-badge{
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted,#8894ab);white-space:nowrap;
}

/* ----------------------------------------------------------------- one row */
.v10p-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) 116px 140px minmax(0,auto);
  align-items:center;gap:9px;padding:7px 11px;
  border-bottom:1px solid color-mix(in srgb,var(--line,#dce7eb) 55%,transparent);
  border-left:3px solid var(--k,#8894ab);
}
.v10p-row:last-child{border-bottom:0}
.v10p-row.off{opacity:.42}
.v10p-row.k-task{--k:#2FA96B}
.v10p-row.k-waiting{--k:#F0A52B}
.v10p-row.k-commitment{--k:#C2567F}
.v10p-row.k-note{--k:#7C5CE7}
.v10p-row.k-skip{--k:#c3cddb}
.v10p-check{display:flex;align-items:center}
.v10p-check input{width:16px;height:16px;cursor:pointer;accent-color:var(--accent,#1E7FD0)}
.v10p-text{
  font:inherit;font-size:13.5px;min-width:0;padding:5px 7px;border-radius:7px;
  border:1px solid transparent;background:none;color:var(--text,#12263F);
}
.v10p-text:hover{border-color:var(--line,#dce7eb)}
.v10p-text:focus{border-color:var(--accent,#1E7FD0);outline:none;background:var(--surface,#fff)}
.v10p-kind,.v10p-date{
  font:inherit;font-size:12.5px;padding:5px 7px;border-radius:7px;
  border:1px solid var(--line,#dce7eb);background:var(--surface,#fff);color:var(--text,#12263F);
  min-width:0;
}
.v10p-people{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.v10p-people i{
  font-style:normal;font-size:11px;font-weight:620;padding:2px 8px;border-radius:999px;
  white-space:nowrap;
}
/* Somebody you already have, against somebody who will be created. The
   difference matters more than either name does. */
.v10p-people i.known{background:color-mix(in srgb,#2FA96B 14%,transparent);color:#1d7a4c}
.v10p-people i.new{background:color-mix(in srgb,#1E7FD0 13%,transparent);color:#15618f}

.v10p-tally{font-size:12.5px;color:var(--muted,#66748F)}
.v10p-tally b{font-weight:700;color:var(--text,#12263F)}

@media(max-width:720px){
  .v10p-row{grid-template-columns:auto minmax(0,1fr);gap:6px 9px}
  .v10p-kind,.v10p-date{grid-column:2}
  .v10p-people{grid-column:2;justify-content:flex-start}
  .v10p-out{max-height:none}
}