/* X Post Factory: only the few classes its app.js builds by hand.
   Every colour, font and radius is a Mythox token from codex-site.css. */

.app-label .note{ display:block; margin-top:6px; font-family:var(--sans); font-size:12.5px;
  letter-spacing:0; text-transform:none; color:var(--muted); font-weight:400; line-height:1.55; }

.app-area.out{ min-height:230px; white-space:pre; overflow-x:auto; }
.app-area.out.short{ min-height:150px; }
.app-area.out.tiny{ min-height:84px; white-space:pre-wrap; }

.counter{ margin-top:10px; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--dim); }
.counter.over{ color:var(--accent); }

/* the checklists app.js builds */
.checkitem{ display:flex; gap:13px; align-items:flex-start; padding:13px 0;
  border-bottom:1px solid var(--border); color:var(--muted); font-size:13.5px; line-height:1.6;
  cursor:pointer; }
.checkitem:last-child{ border-bottom:0; }
.checkitem input[type="checkbox"]{ width:17px; height:17px; flex:0 0 auto; margin-top:2px;
  accent-color:var(--accent); cursor:pointer; }
.checkitem input[type="checkbox"]:checked + span{ opacity:.5; text-decoration:line-through; }
.checkitem.switch{ border-top:1px solid var(--border); border-bottom:0; margin-top:16px; padding-top:16px; }

/* the money box app.js builds */
.money{ margin-top:16px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface-2); overflow:hidden; }
.money .line{ display:flex; justify-content:space-between; gap:14px; padding:13px 16px;
  border-bottom:1px solid var(--border); font-size:13.5px; }
.money .line:last-child{ border-bottom:0; }
.money .line span.k{ color:var(--muted); }
.money .line span.v{ color:var(--text); font-family:var(--mono); font-size:13px;
  font-variant-numeric:tabular-nums; }
.money .line.big span.v{ color:var(--accent); font-size:15px; }
.money .line.warn span.v{ color:var(--text); opacity:.8; }

.status{ margin-top:12px; min-height:18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); line-height:1.6; }

.rowbtns{ margin-top:18px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }