/* css/ds-missions.css: the visitor, mission and campaign chits (app/ui/missions.js, screens/placement.js, screens/kit/chits.js, screens/play/chits.js). Written against tokens.css and core.css.
   The chits have no printed art here, so each is a round counter with two letters; the kind is always said in a word beside it (Visitor, Mission, Campaign), never by colour alone. */
.ms-chit { flex: none; box-sizing: border-box; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; border: 3px solid var(--ms-edge, var(--gold-lo)); background: var(--counter-face); color: var(--counter-ink); font: 700 calc(14px * var(--ts, 1))/1 var(--font-display); letter-spacing: .02em; box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.ms-chit.visitor { --ms-edge: #5aa3ad; } .ms-chit.mission { --ms-edge: var(--gold-lo); } .ms-chit.campaign { --ms-edge: #b4546f; }
.ms-chit.sm { width: 28px; height: 28px; border-width: 2px; font-size: calc(12px * var(--ts, 1)); }
.ms-chit.dim { opacity: .55; }
.ms-chit.back { margin-left: -14px; opacity: .88; transform: scale(.9); }          /* the side underneath: fainter, letters still 4.5:1 */
.ms-chit.empty { background: transparent; border: 2px dashed var(--st-illegal); box-shadow: none; }
.ds-row .art2 { flex: none; display: flex; align-items: center; min-width: 44px; justify-content: center; }
.ms-kind { margin-left: 8px; } .ms-kind.visitor { color: #86c6cf; } .ms-kind.mission { color: var(--gold-hi); } .ms-kind.campaign { color: #e48aa3; }
.ds-row .main b .ds-tag { vertical-align: 1px; }

/* the placement (a sheet at setup) */
.ms-dots { display: flex; gap: 6px; margin: 2px 0 10px; } .ms-dots i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-4); } .ms-dots i.done { background: var(--gold); } .ms-dots i.now { background: var(--gold-lo); }
.ms-chits, .ms-sides, .ms-chart { display: flex; flex-direction: column; gap: 8px; }
.ms-chart { margin: 2px 0 10px; }
.ms-chart .ms-box { min-height: 56px; }
.ms-chart .ms-box.full { border-color: var(--line-2); }
.ms-chart .ms-box .end b { color: var(--ink); font-size: calc(15px * var(--ts, 1)); } .ms-chart .ms-box .end small { color: var(--ink-3); }
button.ms-box:not(.sel) .end small { color: var(--ink-2); }
.ms-extra { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; } .ms-extra .ds-btn { flex: 1 1 auto; }
.ms-placerow { margin-top: 8px; } .ms-placerow .main span { color: var(--ink-2); }
.ds-sheet-foot .sum .bad { color: var(--danger); }

/* the Take chips of the phase tray */
.ms-takes { margin-top: 2px; }
.ds-tray .ds-chip.ms-take { gap: 8px; padding: 0 12px 0 8px; flex: 1 1 auto; min-width: 0; }
.ms-take .ms-take-t { font-weight: 700; }
.ms-take .ms-cost { font: 500 calc(12px * var(--ts, 1))/1 var(--font-ui); color: var(--ink-2); margin-left: auto; white-space: nowrap; }
.ms-take.is-dim .ms-cost { color: var(--ink-3); }

/* a notice: the week's flip, a delivery, a win, a failure */
.ms-notice { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line-gold); background: var(--gold-wash); }
.ms-notice .ms-ico { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--gold-hi); } .ms-notice .ms-ico .ds-i { width: 22px; height: 22px; }
.ms-notice .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ms-notice .main b { font: 700 calc(15px * var(--ts, 1))/1.2 var(--font-ui); color: var(--ink); } .ms-notice .main span { font: 400 calc(14px * var(--ts, 1))/1.3 var(--font-voice); color: var(--ink-2); }
.ms-notice .main b ~ b { margin-top: 4px; }
.ms-notice .ds-btn { flex: none; min-width: 56px; min-height: 44px; }
.ms-notice.failed, .ms-notice.putdown { border-color: var(--danger); background: var(--danger-wash); } .ms-notice.failed .ms-ico, .ms-notice.putdown .ms-ico { color: var(--danger); }
.ms-notice.delivered, .ms-notice.won { border-color: var(--success); background: var(--success-wash); } .ms-notice.delivered .ms-ico, .ms-notice.won .ms-ico { color: var(--success); }

/* the Chits room of the Kit */
.ms-cards { display: flex; flex-direction: column; gap: 10px; }
.ms-card .hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ms-card .hd b { flex: 1; min-width: 0; font: 700 calc(17px * var(--ts, 1))/1.2 var(--font-ui); }
.ms-card .ms-goal { margin: 6px 0 4px; } .ms-card .ms-kv { margin: 4px 0; }
.ms-card .ds-meta { margin: 4px 0; }
.ms-card .ms-abandon { margin-top: 6px; } .ms-card .ms-nogiveup { margin-top: 6px; }
.ms-ask { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--danger); background: var(--danger-wash); }
.ms-ask .row2 { display: flex; gap: 8px; } .ms-ask .row2 .ds-btn { flex: 1 1 0; min-width: 0; }
.ms-where { min-height: 56px; }
.ms-row .ds-btn { flex: none; min-height: 44px; min-width: 64px; }
.ms-foe { margin: 4px 0 8px; }
.ms-kv { grid-template-columns: max-content 1fr; }
.ms-rule { font-style: italic; }