/* users — page-scoped styles. Owned by this page only.
   Shared primitives live in planner/planner.css and are READ-ONLY from here.
   Scope every rule under [data-view="users"] so it cannot leak to another page.

   This screen is the security surface of the app, so it is laid out for
   certainty rather than density: one card per account, each capability on its
   own line in words, and the destructive action visibly apart from the rest.

   What it is NOT is a form. It inherited --w-form (760px) from the form pages
   and spent the right-hand 45% of a wide window on nothing. A list of accounts
   is a list: it takes the width, wraps into columns when there is room, and the
   two genuinely narrow blocks — the role key and the create form — sit beside
   it instead of above and below it. */

/* ── page shape ────────────────────────────────────────────────────────────
   One column by default. Above 1200px the list keeps the flexible track and
   the aside takes a fixed-ish reading column: never below 20rem (the role
   table stops making sense) and never above 26rem (a four-field form does not
   earn more). 1200 rather than 1024 because the 216px rail is still parked on
   the left up to 1023px, so a split at 1024 leaves the list ~400px wide. */
[data-view="users"] .ugrid{display:grid;gap:var(--s6);align-items:start}
@media (min-width:1200px){
  [data-view="users"] .ugrid{grid-template-columns:minmax(0,1fr) clamp(20rem,22vw,26rem)}
}
[data-view="users"] .uside{display:flex;flex-direction:column;gap:var(--s6)}
/* The create form is already inside a narrow column; capping it again at
   --w-form would leave a gutter inside a gutter. The member view keeps the cap
   — over there the panel really is the only thing on the page. */
[data-view="users"] .uside .panel--form{max-width:none}

/* ── the role / capability key ─────────────────────────────────────────────
   Two roles × two capabilities. As a sentence it was a matrix the reader had
   to rebuild in their head; as a table the mapping is on the page. The caption
   is the panel's heading — a second <h2> saying the same words above it would
   be one title too many. */
[data-view="users"] .rolekey{width:100%;border-collapse:collapse;font-size:var(--ft-meta);
  line-height:var(--lh-ui)}
[data-view="users"] .rolekey caption{text-align:left;font-family:var(--display);font-weight:400;
  font-size:var(--ft-h2);line-height:1.2;color:var(--ink);
  margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
[data-view="users"] .rolekey th,
[data-view="users"] .rolekey td{text-align:left;vertical-align:top;padding:.4rem var(--s3) .4rem 0;
  border-bottom:1px solid var(--line)}
[data-view="users"] .rolekey thead th{font-size:var(--ft-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:700;white-space:normal}
[data-view="users"] .rolekey tbody th{font-weight:700;color:var(--ink);white-space:nowrap;
  padding-right:var(--s2);width:1%}
[data-view="users"] .rolekey td{color:var(--muted)}
[data-view="users"] .rolekey tr > :last-child{padding-right:0}
[data-view="users"] .rolekey tbody tr:last-child th,
[data-view="users"] .rolekey tbody tr:last-child td{border-bottom:0}

/* ── the account list ──────────────────────────────────────────────────────
   Cards, not rows: each one carries two sentences and an action row, which a
   table cell cannot hold honestly. They wrap into as many ~25rem columns as
   fit, so a wide window shows the whole list at once instead of one 1200px-
   wide card per screenful. min() keeps the track from outgrowing a phone.

   Separators are borders on the card rather than a gap-with-background grid:
   an incomplete last row would otherwise paint a solid block where a cell is
   missing. The -1px margins let the outer edges land on the panel's own
   border instead of doubling it. */
[data-view="users"] .accts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(25rem,100%),1fr));
  list-style:none;margin:0 0 -1px;padding:0;border-top:1px solid var(--line)}
[data-view="users"] .accts .empty{grid-column:1/-1}
[data-view="users"] .acct{display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);margin-right:-1px}
[data-view="users"] .acct:hover{background:var(--row-hover)}

[data-view="users"] .acct__top{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
  align-items:baseline;justify-content:space-between}
[data-view="users"] .acct__id b{display:block;font-family:var(--display);font-weight:400;
  font-size:var(--ft-name);line-height:1.2}
[data-view="users"] .acct__id span{display:block;font-size:var(--ft-meta);color:var(--muted)}
[data-view="users"] .acct__seen{font-size:var(--ft-meta);color:var(--muted);white-space:nowrap}
[data-view="users"] .acct__seen b{font-weight:400;color:var(--ink)}

/* Role and budget are two different things, so they get two lines, each with
   its own words. Colour is never the only signal — the pill says which. */
[data-view="users"] .acct__cap{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s2) var(--s3);margin:0}
[data-view="users"] .acct__cap .pill{margin:0}
[data-view="users"] .acct__what{font-size:var(--ft-meta);color:var(--muted);
  line-height:var(--lh-ui);min-width:0}

/* ── actions: severity made visible ────────────────────────────────────────
   Setting a key and removing an account used to sit inline next to each other
   as two identical little links. Now they are on their own rule-separated row,
   at opposite ends: the key is behind a closed disclosure (two deliberate
   actions before anything is written), Remove is a bordered danger button that
   still goes through confirm(). `margin-top:auto` pins the row to the bottom
   of the card so it lines up across a row of side-by-side accounts. */
[data-view="users"] .acct__acts{display:flex;flex-wrap:wrap;gap:var(--s3);
  align-items:flex-start;justify-content:space-between;
  margin-top:auto;padding-top:var(--s3);border-top:1px dashed var(--line)}
[data-view="users"] .acct__self{font-size:var(--ft-meta);color:var(--muted);
  align-self:center;margin:0}

[data-view="users"] .keybox{min-width:0}
[data-view="users"] .keybox summary{display:inline-flex;align-items:center;gap:.4rem;
  min-height:var(--h-ctl);padding:0 .7rem;font-size:var(--ft-meta);color:var(--mocha);
  background:transparent;border:1px solid var(--line-strong);border-radius:2px;
  cursor:pointer;list-style:none;user-select:none;width:auto}
[data-view="users"] .keybox summary::-webkit-details-marker{display:none}
/* A drawn chevron, not a glyph: ▸ renders at half the size of its em box in
   Lato and reads as a stray bullet. */
[data-view="users"] .keybox summary::before{content:"";flex:none;width:.38rem;height:.38rem;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  rotate:-45deg;translate:0 -1px}
[data-view="users"] .keybox[open] summary::before{rotate:45deg;translate:0 -2px}
[data-view="users"] .keybox summary:hover{background:var(--sand);border-color:var(--taupe);
  color:var(--ink)}
[data-view="users"] .keybox[open] summary{background:var(--sand);border-color:var(--taupe);
  color:var(--ink)}
/* Open, the form is the width of the card, not of the summary that opened it. */
[data-view="users"] .keybox[open]{flex:1 1 100%}

/* ── the key form ──────────────────────────────────────────────────────────
   Write-only by design: there is no current key anywhere in the app to show,
   so the form only ever asks for a new one and says what happens to it. */
/* The closed state is stated explicitly. A closed <details> hides its children
   with a UA `display:none`, but planner.css's legacy `.key-form{display:flex}`
   outranks the UA sheet and puts the field back on screen for every account —
   a write-only credential permanently visible. This is the rule that shuts it. */
[data-view="users"] .keybox:not([open]) .key-form{display:none}
[data-view="users"] .key-form{flex-wrap:wrap;gap:var(--s3);align-items:flex-end;
  margin-top:var(--s3);padding:var(--s4);background:var(--surface-2);
  border:1px solid var(--line);border-radius:2px}
[data-view="users"] .keybox[open] .key-form{display:flex}
[data-view="users"] .key-form--self{display:flex;margin-top:0;padding:0;background:none;border:0}
[data-view="users"] .key-form .field{flex:1 1 14rem;max-width:22rem}
/* Fields top-align so every label sits on one line and every control on the
   next; the submit button drops to the bottom edge instead. Baseline-aligning
   a field that contains a control PAIR (input + Show) against fields that
   contain one control is what put the Key label 9px above its neighbours. */
[data-view="users"] .form{align-items:flex-start}
/* one label line, whether or not the label carries an "optional" marker */
[data-view="users"] .form .field > span{min-height:1.05rem;align-items:flex-end}
[data-view="users"] .form > .btn{align-self:flex-end}
[data-view="users"] .keyrow{display:flex;gap:var(--s2);align-items:stretch;min-width:0}
[data-view="users"] .keyrow input{flex:1 1 auto;min-width:0}
[data-view="users"] .keyrow .chip{flex:0 0 auto;height:auto;min-height:var(--h-ctl-md)}
[data-view="users"] .keynote{flex:1 0 100%;margin:0;max-width:var(--w-prose)}

/* ── the member's own screen ───────────────────────────────────────────────
   No list and no controls a member isn't allowed to use, so there is nothing
   here to spread sideways — one panel at reading width is the right answer. */
[data-view="users"] .acct-self{display:flex;flex-direction:column;gap:var(--s3)}
[data-view="users"] .keyfoot{display:block}

/* ── phones ────────────────────────────────────────────────────────────────
   Controls are already 44px from planner.css's token override; what changes
   here is the axis. Everything stacks, and the two actions stop sharing a
   line so Remove can never be hit while reaching for the key disclosure. */
@media (max-width:639px){
  [data-view="users"] .acct{padding:var(--s4)}
  [data-view="users"] .acct__top{gap:var(--s1)}
  [data-view="users"] .acct__seen{width:100%}
  [data-view="users"] .acct__acts{flex-direction:column;align-items:stretch;gap:var(--s4)}
  [data-view="users"] .keybox summary{min-height:var(--h-ctl-lg);justify-content:center}
  [data-view="users"] .acct__acts .btn--danger{align-self:flex-end}
  [data-view="users"] .key-form .field{flex-basis:100%;max-width:none}
  [data-view="users"] .rolekey th,
  [data-view="users"] .rolekey td{padding-right:var(--s2)}
}