/* The cloud version only: the login card, money, the account list. Same tokens as app.css. */

/* before logging in there is nothing to navigate to */
body.gate .tabbar { display: none !important; }
body.gate #view { padding-bottom: 40px; }
.login { max-width: 440px; margin: 7vh auto 0; }
.login-say { min-height: 1.3em; color: var(--z1); }

/* money is a quantity like time: figures in Red Hat Mono, the used part of the allowance as a hatch */
.field.took b small { font: 600 15px var(--sans); letter-spacing: 0; margin-left: 2px; color: var(--z3); }
.money-bar { height: 8px; border: 1px solid var(--z7); background: var(--z10); position: relative; margin: 4px 0 2px; }
.money-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--hatch); min-width: 0; }

/* one account per row; a switched-off account is struck through, the grammar for "unavailable" */
.acct {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 10px; width: 100%;
  padding: 12px 14px; border: 0; border-bottom: 1px dashed var(--z8); background: none; text-align: left; color: inherit;
}
.acct:active { background: var(--z9); }
.acct .who b { font-size: 16px; font-weight: 600; }
.acct .who small { margin-left: 8px; font-size: 12px; color: var(--z3); border: 1px solid var(--z7); padding: 1px 5px; vertical-align: 1px; }
.acct .left { font-size: 14px; }
.acct .sub { grid-column: 1 / 3; font-size: 12.5px; color: var(--z4); }
.acct.off .who b { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--z5); }
.sec-head .note { letter-spacing: 0; }

/* the password shown once */
.pw-card { display: grid; gap: 10px; margin-bottom: 14px; }
.pw-card .kv { border: 1px solid var(--z8); }
.pw-card .url { padding: 4px 6px; }
dialog.dlg form .field:first-child { border-top: 1px solid var(--z8); }

@media (min-width: 900px) {
  body.gate #app { display: block; }
  body.gate #view { max-width: 560px; }
}