/* ============================================================================
   F42  PROFIT FOR EACH SIDE OF THE BUSINESS, IN XERO
   Tokens only, from app.css, so both themes work without a second set of
   colours. The note's own edge colour carries the state (warn: Judy needs
   to do something in Xero; good: on).
   ============================================================================ */

/* ---------------------------------------------------------- Settings box */
.f42-box{margin:4px 0 10px}
.f42-box .note{margin:0}
.f42-box .note.good{border-left-color:var(--good)}
.f42-box .f42-title{display:block;color:var(--ink)}
.f42-box .f42-line{display:block;margin-top:6px;color:var(--ink-2);line-height:1.45}
.f42-box .f42-line b{color:var(--ink)}
.f42-box .f42-found{font-size:12px;color:var(--ink-3)}
.f42-box .f42-sides{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.f42-box .f42-sides li{display:flex;gap:10px;justify-content:space-between;font-size:12px;
  border-top:1px solid var(--line-soft);padding-top:4px}
.f42-box .f42-sides li span{color:var(--ink-3)}
.f42-box .f42-sides li b{color:var(--ink);font-weight:500;text-align:right}
.f42-box .f42-foot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:10px}
.f42-box .f42-when{font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------------- the job */
.f42-job{margin:6px 0 0;font-size:12px;color:var(--ink-3)}

@media(max-width:700px){
  .f42-box .f42-sides li{flex-direction:column;gap:0}
  .f42-box .f42-sides li b{text-align:left}
  .f42-box .f42-foot .btn{min-height:40px}
  .f42-job{font-size:13px}
}