/* Dorax Finance — the status page's news at the top of the app (v254, js/features/status/status-bar.js). Built like the install banner
   (install.css): one line with what it is, a way to the status page, and a way to hide it. The dot says the level in the app's own colours (its
   amber for trouble, its red for a problem, the brand's green for a maintenance), never alone: the bold line says it in words. */
.st-bar { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink-strong); }
.st-bar-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); }
.st-bar.outage .st-bar-dot { background: var(--crit); box-shadow: 0 0 0 4px var(--crit-bg); }
.st-bar.maintenance .st-bar-dot { background: var(--brand); box-shadow: 0 0 0 4px var(--good-bg); }
.st-bar .grow { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; color: inherit; text-decoration: none; }
.st-bar-t:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.st-bar b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.st-bar small { font-size: 12.5px; color: var(--ink-2); line-height: 1.3; }
.st-bar .st-bar-go { flex: none; min-height: 40px; padding: 0 14px; text-decoration: none; display: inline-flex; align-items: center; }
.st-bar .x { flex: none; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; }
.st-bar .x svg { width: 15px; height: 15px; }
@media (min-width: 921px) { .topbar > .st-bar { order: -2; flex: 1 0 100%; margin: -6px 0 6px; border: 1px solid var(--line); border-radius: var(--r-mid); } }
@media (max-width: 920px) {
  .st-bar { padding-top: calc(var(--safe-t) + 10px); }
  .st-bar ~ .install-bar { padding-top: 10px; }      /* the notice took the room at the very top */
  .st-bar ~ .navbar { padding-top: 16px; }
  .st-bar .st-bar-go { display: none; }      /* a phone: the words are the way to the page, and keep the room */
  .st-bar .x, .st-bar-t { min-height: 44px; min-width: 44px; justify-content: center; }
}
/* the look every person has: on the forest, as the install banner */
:root.land .st-bar { background: var(--lk-deep); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #FFFFFF; }
:root.land .st-bar b { color: #FFFFFF; } :root.land .st-bar small { color: var(--lk-soft); }
:root.land .st-bar .st-bar-go { border-radius: 999px; background: var(--lk-lime); border-color: var(--lk-lime); color: var(--lk-deep); box-shadow: none; }
:root.land .st-bar .x { color: var(--lk-soft); }
:root.land .st-bar.maintenance .st-bar-dot { background: var(--lk-lime); box-shadow: 0 0 0 4px rgba(214, 236, 108, .2); }