/* Set up (#/setup) and Accounts (#/admin).

   Every class here carries the `acc` prefix, for the reason dashboard.css gives for
   `.setsec` and `.prow`: every stylesheet loads on every page, so a top-level class
   defined in two files is one rule silently overriding another, and a unit test fails
   on it (web/unit/css-collisions.test.js). The two screens borrow the settings card
   (`.setsec`, `.setrow`, `.facts`, `.nothing`, `table.dtable`) rather than restating it. */

.setup,.accounts{max-width:1240px}

/* ---------------------------------------------------------------------- your keys */
/* A key, what is known about it and the way to forget it, as one block: the state
   sentence is the input's own description, so it must stay next to the input at every
   width rather than becoming a column of its own. */
.acckey{display:grid;gap:var(--sp-2);justify-items:start}
.acckey .fieldrow{width:100%}
.acckey .hint b{font-weight:500;color:var(--ink)}
.acckey .err{color:var(--rec-t);font-size:13px;line-height:19px;display:flex;gap:7px;
  align-items:baseline}

.accchoices{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* A native select, dressed as a field. Native because the options are a short closed
   list the platform already knows how to present on a phone, and because a listbox
   built by hand is a keyboard contract to re-implement for nothing. */
.accsel{width:100%;height:36px;padding:0 var(--sp-2);border:1px solid var(--line-2);
  border-radius:var(--r-3);background:var(--surface);color:var(--ink);
  font:14px/20px var(--sans);transition:border-color var(--t) var(--ease)}
.accsel:hover{border-color:var(--ink-2)}
.accsel[aria-invalid="true"]{border-color:var(--rec)}

/* --------------------------------------------------------------------- your phone */
/* The same white plate the pairing QR gets, and for the same reason: the modules are
   near-black and a phone has to read them on a dark card as well as a light one. */
.accqr{background:#fff;padding:12px;border-radius:var(--r-4);justify-self:start;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.accqr-img{display:block;width:240px;height:240px;max-width:100%}
.accwarn{display:grid;gap:var(--sp-2);justify-items:start}
.accwarn h3{font-size:15px;line-height:20px}
.acccmd{margin:0;padding:10px var(--sp-3);border-radius:var(--r-2);background:var(--glass-2);
  border:1px solid var(--line);font-size:12px;line-height:18px;overflow-x:auto;max-width:100%}

/* ----------------------------------------------------------------------- accounts */
/* The 503: one line at the top of the page, because every row would otherwise repeat
   the same sentence about the same file. */
.accbanner{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:10px var(--sp-3);margin-bottom:var(--sp-3);border-radius:var(--r-4);
  border:1px solid var(--line-2);background:var(--glass-2);color:var(--rec-t);
  font-size:13px;line-height:19px}
.accbanner .btn{margin-left:auto}

.acclink{padding:var(--sp-3);margin-bottom:var(--sp-3);border-radius:var(--r-4);
  border:1px solid var(--line-2);background:var(--glass-2);display:grid;gap:var(--sp-2)}
.acclink .field{font-size:12px}

.acclist{display:grid;gap:2px}
.accrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  padding:8px;margin-inline:-8px;border-radius:var(--r-2)}
.accrow:hover{background:var(--glass-2)}
.accrow .nm{flex:1 1 140px;min-width:0;font-size:13px;font-weight:500}
.accrow .n{font:11px/16px var(--mono);white-space:nowrap}
.accmsg{flex:1 0 100%;margin:0;color:var(--ink-2);font-weight:300;font-size:13px;
  line-height:19px;max-width:62ch}

/* The status, as a word rather than a colour alone: `--ok` and `--rec-t` carry meaning
   here, and the word carries it for anybody who cannot see the difference. */
.accpill{font:500 11px/14px var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap}
.accpill.active{color:var(--ok)}
.accpill.suspended{color:var(--rec-t)}
.accpill.approved{color:var(--warn)}

.accdo{display:flex;gap:var(--sp-2);flex-wrap:wrap}

@media (max-width:699px){
  /* The only control here the shared 40 px rules do not already reach: components.css
     raises `.btn`, `.chip` and `.field`, and a `<select>` is none of the three. */
  .accsel{height:40px}
}