/* What the dashboard needs on top of theme.css.

   theme.css is a copy of design/assets/theme.css and is not edited here: a
   change to the design system is made there and copied across. This file
   holds only what the static prototype had no use for. */

/* --------------------------------------------------------------------------
   messages — the two panels the prototype did not need a class for
   -------------------------------------------------------------------------- */
.panel-ok  { background: color-mix(in srgb, rgb(var(--ok-rgb)) 8%, var(--surface));
             border-color: color-mix(in srgb, rgb(var(--ok-rgb)) 30%, var(--edge)); }
.panel-err { background: color-mix(in srgb, rgb(var(--err-rgb)) 8%, var(--surface));
             border-color: color-mix(in srgb, rgb(var(--err-rgb)) 30%, var(--edge)); }

/* --------------------------------------------------------------------------
   forms — what a field says when it is refused
   -------------------------------------------------------------------------- */
.field-error { color: rgb(var(--err-rgb)); margin-top: 4px; line-height: 1.45; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid {
  border-color: rgb(var(--err-rgb));
}
/* a page that is one form: the fields, then its buttons */
.form { max-width: 560px; }
.form .field + .field { margin-top: 20px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
/* a choice among a few, each with a line saying what it means */
.option { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; cursor: pointer; }
.option input { margin-top: 4px; accent-color: var(--accent); }
/* a form that is only a button, sitting in a row of other buttons */
.inline-form { display: inline-flex; margin: 0; }
button.link, button.link-quiet { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* --------------------------------------------------------------------------
   signed-out pages — one card in the middle of the paper
   -------------------------------------------------------------------------- */
body.auth { display: flex; flex-direction: column; min-height: 100vh; }
body.auth main { flex: 1; display: grid; place-items: center; padding: 48px 24px; }
.auth-card {
  width: 100%; max-width: 432px; padding: 36px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.auth-card .mark { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth-card .mark i { font-size: 20px; color: var(--accent); }
.auth-card h1 { margin: 0; font-size: 26px; }
.auth-card .field { margin-top: 20px; }
.auth-card .btn { width: 100%; justify-content: center; margin-top: 24px; }
.auth-card .panel { margin-top: 20px; }
.auth-foot { padding: 0 24px 32px; text-align: center; }
.auth-foot a { margin: 0 10px; }

/* --------------------------------------------------------------------------
   two-factor setup
   -------------------------------------------------------------------------- */
/* black on white in both schemes: a phone camera reads nothing else reliably */
.qr { display: inline-block; padding: 8px; background: #fff; border-radius: 8px; line-height: 0; }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; max-width: 340px; }

/* --------------------------------------------------------------------------
   the site switcher — every site someone reaches, so it scrolls, and finds
   one by name once there are more than a few
   -------------------------------------------------------------------------- */
.menu-sites { max-height: min(480px, calc(100vh - 140px)); overflow-y: auto; }
/* a flex column with a height squeezes what it holds instead of scrolling */
.menu-sites > * { flex-shrink: 0; }
.menu-filter { margin-bottom: 4px; }
/* beats the UA rule .menuitem's display would win against */
.menuitem[hidden] { display: none; }