/* Угода (workers/web/src/lens/deal.ts): one deal as a row of stages, and the list of deals with
   the same stages as a strip. PixelKit, charcoal theme, the tokens of src/css.ts: square corners,
   no shadows, no gradients. A stage's state is a small square and a word; the colour is the
   mark, never the text. The one line on the screen runs along the stages: the deal moves along it. */

/* Who and how: the terms of the deal in one row. */
.deal-head{display:flex;flex-wrap:wrap;gap:12px 40px;margin:0 0 28px;padding:12px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--hair);max-width:1180px}
.deal-head dt{font:500 12px var(--mono);color:var(--faint)}
.deal-head dd{margin:2px 0 0}

/* The stages, left to right. Each column is as wide as its neighbours; the row scrolls in its own frame when the window is narrower than the stages. */
.deal-stages{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(176px,1fr);gap:0 20px;overflow-x:auto;max-width:100%}
.deal-stage{position:relative;min-width:0;padding:14px 0 16px;border-top:2px solid var(--rule)}
.deal-stage.is-done{border-top-color:var(--ok)}
.deal-stage.is-now{border-top-color:var(--info)}
.deal-stage.is-blocked{border-top-color:var(--crit)}
.deal-stage.is-wait,.deal-stage.is-stopped{border-top-color:var(--hair)}
/* The line from one stage to the next. */
.deal-stage+.deal-stage::before{content:"";position:absolute;top:-2px;left:-20px;width:20px;border-top:2px solid var(--hair)}
.deal-no{margin:0;font:500 12px var(--mono);color:var(--faint)}
.deal-stage h3{margin:2px 0 6px;font:600 15px/1.3 var(--sans)}
.deal-state{margin:0}
.deal-when{margin:6px 0 0;min-height:20px;font:500 12px/1.5 var(--mono);color:var(--muted)}
.deal-when .by{display:block;color:var(--faint);white-space:normal;overflow-wrap:anywhere}
.deal-why{margin:8px 0 0;padding:8px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.deal-stage.is-wait h3,.deal-stage.is-stopped h3{color:var(--muted)}
.deal-recs{margin:10px 0 0;font-size:14px}
.deal-recs p{margin:0 0 4px}
.deal-recs ul{list-style:none;margin:0;padding:0}
.deal-recs li{padding:4px 0;border-top:1px solid var(--hair);overflow-wrap:anywhere}
.deal-recs .mono{white-space:normal}
.deal-acts{display:grid;gap:10px;margin:12px 0 0}
.deal-acts .btn{width:100%;white-space:normal;text-align:center}
.deal-act{display:grid;gap:8px;margin:0}
.deal-act label{display:grid;gap:2px;font:500 12px var(--mono);color:var(--faint)}
.deal-act input,.deal-act select{min-height:44px;width:100%;padding:8px 10px;background:var(--card);color:var(--ink);border:1px solid var(--rule);border-radius:0;font:14px var(--sans)}

/* The list: one deal per row, the strip of its stages in the middle. */
.deals{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--rule);max-width:1180px}
.deals a{display:grid;grid-template-columns:132px minmax(0,1fr) auto minmax(0,1.6fr);gap:4px 20px;align-items:center;min-height:52px;padding:10px 0;border-bottom:1px solid var(--hair);text-decoration:none}
.deals a:hover{background:var(--card)}
.deals .party{min-width:0}
.deals .kind{display:block;font:500 12px var(--mono);color:var(--faint)}
.deals .at{display:grid;gap:2px;min-width:0}
.deals .why{color:var(--muted);font-size:14px}
.deal-strip,.deal-key{display:inline-flex;gap:4px;align-items:center}
:is(.deal-strip,.deal-key) .sq{position:relative;width:14px;height:14px;background:var(--hair)}
/* A stage's square differs by its shape too, so the strip reads without colour: done is full,
   in work is a frame, standing is full with a bar across, ahead is a thin outline. */
:is(.deal-strip,.deal-key) .sq.ok{background:var(--ok)}
:is(.deal-strip,.deal-key) .sq.info{background:transparent;border:4px solid var(--info)}
:is(.deal-strip,.deal-key) .sq.crit{background:var(--crit)}
:is(.deal-strip,.deal-key) .sq.crit::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;background:var(--paper)}
:is(.deal-strip,.deal-key) .sq.muted{background:transparent;outline:1px solid var(--rule);outline-offset:-1px}
.deal-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 28px;font:500 12px var(--mono);color:var(--faint)}
.deal-legend span{display:inline-flex;align-items:center;gap:7px}

/* The step a refusal offers stays on one line next to it. */
.fix{white-space:nowrap}

/* Phone width: the stages stack, one under another, the line runs down the left edge. */
@media (max-width:960px){
  .deal-stages{grid-auto-flow:row;grid-auto-columns:auto;gap:0;overflow-x:visible}
  .deal-stage{padding:14px 0 18px 16px;border-top:0;border-left:2px solid var(--rule)}
  .deal-stage.is-done{border-left-color:var(--ok)}
  .deal-stage.is-now{border-left-color:var(--info)}
  .deal-stage.is-blocked{border-left-color:var(--crit)}
  .deal-stage.is-wait,.deal-stage.is-stopped{border-left-color:var(--hair)}
  .deal-stage+.deal-stage::before{display:none}
  .deals a{grid-template-columns:1fr;gap:6px}
}