/* ============================================================================
   F29  MONEY THAT KEEPS ITSELF UP TO DATE
   Tokens only, from app.css, so both themes work without a second set of
   colours. The "as of" line sits beside the title: a dot that is green while
   the figures are fresh, amber when they are getting old (or the last read
   failed), red when they should not be trusted, grey before the first read.
   The reason is written out under it, never shown by colour alone.
   ============================================================================ */

/* ---------------------------------------------------------- the as-of line */
.f29-asof{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 0 0 14px;vertical-align:middle;font-size:12.5px;color:var(--ink-2);max-width:100%
}
.f29-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);flex:none}
.f29-asof.ok .f29-dot{background:var(--good);box-shadow:0 0 0 3px var(--good-bg)}
.f29-asof.amber .f29-dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}
.f29-asof.red .f29-dot{background:var(--crit);box-shadow:0 0 0 3px var(--crit-bg)}
.f29-main b{font-weight:700;color:var(--ink)}
.f29-asof.amber .f29-main b{color:var(--warn)}
.f29-asof.red .f29-main b{color:var(--crit)}
.f29-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.f29-asof .btn{flex:none}
.f29-why{flex:1 1 100%;font-size:12px;line-height:1.45;color:var(--ink-3)}
.f29-asof.amber .f29-why,.f29-asof.red .f29-why{color:var(--ink-2)}

/* ------------------------------------------------------------ the strips */
.f29-wrap{margin:0 0 18px}
.f29-wrap .sec-h{margin-top:0}
.f29-big{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:2px 0 10px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.f29-big.neg,.f29-dl dd.neg,.f29-last b.neg{color:var(--crit)}
.f29-dl{display:grid;grid-template-columns:1fr auto;gap:5px 14px;margin:0;font-size:12.5px}
.f29-dl dt{color:var(--ink-3);min-width:0;overflow-wrap:anywhere}
.f29-dl dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.f29-dl dd small{display:block;color:var(--ink-3);font-size:11px}
.f29-last{margin:10px 0 0;font-size:12px;color:var(--ink-3)}
.f29-last b{color:var(--ink);font-variant-numeric:tabular-nums}
.f29-empty{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-3)}
/* Why a card was not brought up to date by the last try: written out, with
   the warn colour only on the edge, so it reads the same in both themes. */
.f29-miss{margin:10px 0 0;padding:6px 0 6px 10px;border-left:3px solid var(--warn);
  font-size:12px;line-height:1.45;color:var(--ink-2)}
.f29-miss:first-child{margin-top:0}

/* ------------------------------------------------------------ the phone */
@media(max-width:700px){
  /* The header stays on screen as you scroll on a phone, so the line is kept
     to one row there: the explanation stays one tap away on Money's own info. */
  .f29-asof{display:flex;margin:6px 0 0;font-size:12px;gap:4px 8px}
  .f29-asof .ihelp{display:none}
  .f29-asof .btn.sm{padding:3px 8px}
  .f29-why{font-size:11.5px}
  .f29-big{font-size:23px}
}