/* FREE SAILING — org-deals.css. The deals workspace, and the completion
   checklist that shares its vocabulary.

   NO NEW PALETTE. Everything here is built from the tokens dash.css and
   site.css already define, the same rule org-ui.css states for itself — the
   dashboard's look is the part of this product that was already right, and a
   sixth blue would only make the estate harder to read.

   TWO FILES USE THIS ONE STYLESHEET, on purpose. org-deals.js and org-page.js
   both mount on dashboard pages neither of them owns and neither can be edited
   to add a <link>, so each injects this once and the first one wins. Keeping
   the completion list's rules here rather than in a second file means a board
   that has one has the other. */

/* ─────────────────────────────────────────────────────────── deal states.
   Four pills beyond the two org-ui.css already has (ws-pill-live for on your
   page, ws-pill for finished). Each state carries a different meaning about
   WHOSE move it is, so they must not be four shades of the same grey:

     being checked     ours       neutral, patient
     changes asked for THEIRS     warm — this is the only one that needs a person
     approved          nobody's   settled, waiting on a date */
.fd-pill-wait     { background: #EEF1F6; color: #4A5468; }
.fd-pill-changes  { background: #FCEDE6; color: #9A4318; }
.fd-pill-approved { background: #E7EEFB; color: #1F4FA8; }

/* The reviewer's own words, wherever they appear — above the composer's fields
   and at the top of the drawer. Deliberately quoted rather than styled as an
   error: somebody read the deal and asked for something, which is a
   conversation, not a rejection. */
.fd-note {
  border-left: 3px solid #E08A4E;
  background: #FFF8F2;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 20px;
}
.fd-note b { display: block; font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #9A4318; margin-bottom: 5px; }
.fd-note p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }

/* The one line in a drawer that says what this state actually means, before any
   button. A person should be able to close the drawer having read only this. */
.fd-state {
  font-size: 14px; line-height: 1.55; color: var(--ink-60);
  margin: 0 0 16px; max-width: 56ch;
}

.fd-acts { margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Two dates side by side, stacking on a narrow board rather than squeezing —
   a date input that is 90px wide is unusable on a phone. */
.fd-dates { display: flex; gap: 14px; flex-wrap: wrap; }
.fd-dates > div { flex: 1 1 170px; min-width: 0; }
.fd-dates input {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font: inherit; font-size: 14.5px; background: var(--white);
  color: var(--ink);
}

/* ─────────────────────────────────────────── the completion checklist.
   Extends org-ui.css's .ws-check rather than replacing it. What is added is the
   THIRD state: an item nobody could check. It must not read as a dimmer kind of
   undone, because it is not the organisation's failure — so it takes a hollow,
   dashed tick and its own explanatory line, and it is not counted anywhere. */
.fp-check li { align-items: flex-start; gap: 12px; }
.fp-check .lbl { padding-right: 10px; }
.fp-check .tick { margin-top: 2px; }

.fp-check .is-unknown .tick {
  border-style: dashed;
  border-color: var(--ink-25, #B9C2CF);
  background: transparent;
}
.fp-check .is-unknown .lbl b { color: var(--ink-60); }

.fp-note {
  display: block; font-size: 12.5px; color: var(--ink-40);
  margin-top: 3px; line-height: 1.5; max-width: 60ch;
}
/* WHY this one matters, shown only while it is undone. Once it is done the
   argument for doing it is noise, and a checklist that keeps arguing after you
   have complied is a checklist people stop reading. */
.fp-why {
  display: block; font-size: 12.5px; color: var(--ink-60);
  margin-top: 5px; line-height: 1.5; max-width: 60ch;
  border-left: 2px solid var(--line); padding-left: 9px;
}

/* A read that BROKE, as opposed to one that came back empty. Warm rather than
   red: it is our fault, it is recoverable, and it is not an alarm about the
   organisation's own page. */
.fp-fault {
  margin: 18px 0 0; padding: 11px 13px; border-radius: 9px;
  background: #FFF8F2; color: #9A4318;
  font-size: 13px; line-height: 1.55; max-width: 62ch;
}

/* The one sentence naming what this animal's page cannot carry at all. Set
   quietly, at the bottom, with room around it — it is context, not a task, and
   the moment it looks like a task it becomes the unticked box it exists to
   avoid being. */
.fp-nohome { margin-top: 22px; }

@media (max-width: 640px) {
  .fd-acts .btn { flex: 1 1 auto; }
  .fp-check li { flex-wrap: wrap; }
  .fp-check .btn { margin-left: 30px; }
}