/* P5 part B, Users (HANDOFF §8): the values of frames/kit/p5.css 53-56, 87-93, 112-117, 214-225 and 519-583, p5-prefixed, plus the page-state field (36-41).
   Generic rules (.lt, .pres, .p5-card, .p5-stack, .p5-empty) are copied as is from the kit; part A (p5-spend.css) holds the same text: identical rules, no conflict. */
.pres{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%}
.pres.now{background:var(--green)}
.pres.recent{box-shadow:inset 0 0 0 1.5px var(--text-3)}
.pres.away{box-shadow:var(--edge-strong)}
.p5-pres .pres.recent,.p5-pres .pres.away{box-shadow:inset 0 0 0 1.5px var(--text-3)}   /* FX-10 UI-SETUP-11b: one ring beside «Seen …»; the words carry the time, the dot no longer has two unexplained strengths */
.p5-head{align-items:center;justify-content:space-between;margin-bottom:var(--s-4)}
.p5-head-r{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.p5-tabs{margin:0}
.p5-bar{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);flex-wrap:wrap}
.p5-bar .grow{flex:1}
.p5-card{position:relative;min-width:0;padding:var(--s-5) var(--s-6);border-radius:var(--r-4);border:1px solid var(--line);background:linear-gradient(160deg,rgb(var(--p-mist) / .05),transparent 45%),var(--surface);box-shadow:var(--hl-top)}
.p5-card > h2,.p5-ch h2{margin:0;font:600 var(--fs-4)/22px var(--font);letter-spacing:-.01em}
.p5-ch{display:flex;align-items:center;gap:var(--s-3);min-height:28px;margin-bottom:var(--s-4)}
.p5-ch .sub{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p5-ch .grow{flex:1}
.p5-stack{display:grid;gap:var(--s-4)}
.lt{width:100%;border-collapse:collapse;font-size:var(--fs-3);line-height:20px}
.lt th{height:32px;padding:0 var(--s-3);color:var(--text-3);font:500 var(--fs-2)/18px var(--font);text-align:left;border-bottom:1px solid var(--line)}
.lt td{height:64px;padding:0 var(--s-3);border-bottom:1px solid var(--line);vertical-align:middle;font-variant-numeric:tabular-nums}
.lt tr:last-child td{border-bottom:0}
.lt .r{text-align:right}
.lt tr.hov td{background:var(--raised)}
.lt .gc{display:flex;align-items:center;gap:var(--s-3);min-width:0}
.lt .gc b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt .gc small{display:flex;align-items:center;gap:6px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.lt .cw{width:56px;text-align:center}
.lt td.cw > *{vertical-align:middle}
.lt.dense td{height:56px}
.lt .zero{color:var(--text-3)}
.p5-empty{position:relative;isolation:isolate;display:grid;place-items:center;min-height:max(360px,min(520px,calc(100vh - 240px)));padding:var(--s-7) 0}
.p5-empty::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--dots) 50% 50%/22px 22px;-webkit-mask-image:radial-gradient(ellipse 42% 52% at 50% 50%,#000 10%,transparent 100%);mask-image:radial-gradient(ellipse 42% 52% at 50% 50%,#000 10%,transparent 100%)}
.p5-tbl{padding:var(--s-1) var(--s-2) var(--s-2)}
.p5-you{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--r-1);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-1)/1 var(--font)}
.p5-role{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;line-height:24px;height:24px;padding:0 10px;box-sizing:border-box;border-radius:var(--pill);background:var(--raised);box-shadow:var(--edge);color:var(--text-2);font:500 var(--fs-2)/24px var(--font)}
.p5-pres{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p5-today{color:var(--text);font-size:var(--fs-3);font-variant-numeric:tabular-nums}
.p5-fold-row{display:flex;align-items:center;gap:var(--s-2);height:40px;width:100%;padding:0 var(--s-1);color:var(--text-2);font:500 var(--fs-2)/1 var(--font)}
.p5-fold-row .i{width:var(--icon-md);height:var(--icon-md);rotate:-90deg;transition:rotate var(--dur-2) var(--ease)}
.p5-fold-row[aria-expanded=true] .i{rotate:0deg}
.p5-fold-row .n{color:var(--text-3)}
.p5-who4 dl{margin:0;display:grid}
.p5-who4 dl > div{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;min-height:32px;border-top:1px solid var(--line)}
.p5-who4 dl > div:first-child{border-top:0}
.p5-who4 dt{margin:0}
.p5-who4 dd{margin:0;color:var(--text);font-size:var(--fs-3);line-height:20px}
/* activity log */
.p5-logf{margin:0 0 var(--s-2)}
.p5-cf{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.p5-cf .grow{flex:1}
.p5-logd{margin:0 0 var(--s-2)}
.p5-logl{margin:0;padding:0;list-style:none;border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface);overflow:hidden}
.p5-logr{display:grid;grid-template-columns:24px minmax(0,1fr) 140px 64px 56px;align-items:center;gap:var(--s-4);min-height:48px;padding:var(--s-1) var(--s-4);border-top:1px solid var(--line)}   /* FX-10 UI-SETUP-13: a list people scan, 48 px rows (two text lines 40 + 4 + 4) */
.p5-logr:first-child{border-top:0}
.p5-logr .tx{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:var(--fs-3);line-height:20px;color:var(--text-2)}
.p5-logr .tx b{color:var(--text);font-weight:500}
.p5-logr .tx small{color:var(--text-2);font-size:var(--fs-2);line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p5-lb{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--text-2);font-size:var(--fs-2)}
.p5-picslot{display:flex;justify-content:center}
.p5-lt2{text-align:right;color:var(--text-3);font-size:var(--fs-2);font-variant-numeric:tabular-nums}
/* dialogs */
.p5-g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);align-items:start}
.p5-g2 .p5-field{margin-top:var(--s-4)}
.p5-radios{display:grid;gap:var(--s-2)}
.p5-radio{display:flex;align-items:flex-start;gap:var(--s-3);padding:10px var(--s-3);border-radius:var(--r-3);box-shadow:var(--edge-strong);cursor:pointer}
.p5-radio.on{box-shadow:var(--edge-accent);background:var(--accent-soft)}
.p5-radio .dot{flex:none;width:16px;height:16px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.p5-radio.on .dot{box-shadow:inset 0 0 0 5px var(--accent)}
.p5-radio b{display:block;font:500 var(--fs-3)/20px var(--font);color:var(--text)}
.p5-radio small{display:block;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p5-avs5{display:flex;gap:var(--s-3)}
.p5-avs5 .p5av{width:48px;height:48px}
.p5-avs5 .p5av.on{box-shadow:var(--ring-gap),0 0 0 4px var(--accent)}
.p5-in-head{display:flex;align-items:center;gap:var(--s-4);margin:0 0 var(--s-4)}
.p5-in-head :is(h2,h3){margin:0 0 var(--s-1);font:600 var(--fs-4b)/24px var(--font)}
.p5-in-head p{margin:0;color:var(--text-2);font-size:var(--fs-3);line-height:20px}
.p5-dlg .dh .grow{flex:1}
.p5-kvbox{padding:var(--s-1) var(--s-3);border-radius:var(--r-3);background:var(--bg);box-shadow:var(--edge-strong)}
.p5-kvbox .kvr{height:44px}
.p5-kvbox .kvr:first-child{border-top:0}
.p5-kvbox .kvr .k{flex:none;width:88px;color:var(--text-2)}
.p5-kvbox .kvr .v{flex:1;text-align:left}
.mono{font-family:var(--mono)}
.p5-kvbox + .p5-hint{margin:var(--s-3) 0 0}
.p5-drawer .dh .p5av{margin-right:-4px}
.p5-selin .grow{flex:1}
.p5-limrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.p5-limrow .p5-in.sm{height:var(--ctl-s);width:64px}
/* the app's own dialog and drawer shells carry the frame's content */
.p5-sub{color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.p5-hint{color:var(--text-3);font-size:var(--fs-2);line-height:18px;text-wrap:balance}
.p5-limrow .num-in{width:72px;height:var(--ctl-s);padding:0 var(--s-2);text-align:right;font-size:var(--fs-2)}   /* FX-10 UI-SETUP-10: the number field is S 36 (DR-64), level with the No limit / Number group beside it */
.p5-limrow .p5-unit{color:var(--text-3);font-size:var(--fs-2);line-height:18px}
.kvr{display:flex;align-items:center;gap:var(--s-2);height:28px;border-top:1px solid var(--line);font-size:var(--fs-3);line-height:20px;font-variant-numeric:tabular-nums}
.kvr .k{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.kvr .k small{margin-left:var(--s-2);color:var(--text-3);font-size:var(--fs-2)}
.kvr .v{flex:none;text-align:right}
.p5-todayln{display:flex;gap:var(--s-3);margin:var(--s-2) 0 var(--s-6);padding:10px var(--s-3);border-radius:var(--r-3);background:var(--raised);font-size:var(--fs-3);line-height:20px;color:var(--text-2)}
.p5-todayln b{color:var(--text);font-weight:600}
.p5-sess{margin:0 0 var(--s-1)}
.p5-sess .p5-ch{padding:0;margin:0 0 var(--s-1)}
.p5-sess h2{margin:0;font:600 var(--fs-4)/20px var(--font)}
.p5-fields .field{margin:0 0 var(--s-4)}
.p5-newdlg .dlg-body .field + .field,.p5-newdlg .p5-g2{margin-top:var(--s-4)}
.p5-newdlg .dlg-body .p5-g2 .field{margin:0}   /* beats «.field + .field»: the two fields of a pair start on one line */
.p5-newdlg .hint:empty{display:none}
.p5-newdlg .in.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.p5-newdlg .hint.err{color:var(--red)}
.p5-av48 .av{width:48px;height:48px}
.p5-detdlg .p5-hint{margin:var(--s-3) 0 0}
.p5-view-only{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--text-2);font:500 var(--fs-2)/1 var(--font)}
.p5-view-only .i{width:var(--icon-sm);height:var(--icon-sm)}
.p5-logr .av{width:24px;height:24px}
.p5-logr.warn .tx > span:first-child{color:var(--amber, var(--text))}
.p5-rowmenu .menu-item.danger{color:var(--red)}
.p5-newdlg .p5-radios .rcard{padding:var(--s-2) var(--s-3)}
.p5-newdlg .dlg-body{padding-bottom:var(--s-5)}   /* the form's last row stands 20 px above the footer divider */
.p5-lgh{display:flex;align-items:center;gap:var(--s-2);height:36px;margin:0;font:600 var(--fs-2)/18px var(--font);color:var(--text)}
.p5-lgh .n{color:var(--text-3);font-weight:500;font-variant-numeric:tabular-nums}
.p5-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.p5-picslot .p5-pic{position:relative;display:grid;place-items:center;width:30px;height:40px;padding:0;border-radius:var(--r-1);overflow:hidden;background:var(--raised);color:var(--text-3);cursor:pointer}   /* FX-10 UI-SETUP-13: 30 x 40 so a row with a cover is 48 too */
.p5-picslot .p5-pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--edge);pointer-events:none;transition:box-shadow var(--dur-2) var(--ease)}   /* the rim over the picture */
.p5-picslot .p5-pic.wide{width:40px;height:30px}
.p5-picslot .p5-pic img{display:block;width:100%;height:100%;object-fit:cover}
.p5-picslot .p5-pic:hover::after{box-shadow:var(--edge-strong)}
.p5-picslot .p5-pic:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.p5-kvbox .kvr .v.mono{min-width:0;font:500 var(--fs-2)/18px var(--mono);letter-spacing:.02em;color:var(--text);overflow-wrap:anywhere;user-select:all}
.p5-kvbox + .dlg-text{margin:var(--s-3) 0 0}
.dlg.p5-newdlg{width:min(480px,calc(100vw - 32px))}   /* HANDOFF §8: New user 480, Sign-in details 440 */
.dlg.p5-detdlg{width:min(440px,calc(100vw - 32px))}
/* the drawer's Role select reads as a field, like the Name and Login inputs (frame tm-edit), not as a filter pill */
.p5-fields .select{display:block}
.p5-fields .select select{width:100%;height:var(--ctl-m);padding:0 36px 0 var(--s-3);border-radius:var(--r-2);background:var(--bg);font-size:var(--fs-3);font-weight:400}
.p5-fields .select select:disabled{color:var(--text-3);cursor:not-allowed}
.p5-fields .select .i{top:12px}
/* FX-10 UI-SETUP-14: one dialog shape (CF-DS 3.12). New user has the shared head 64 with its line and the shared footer 72 with its divider; Sign-in details has no title to underline (an avatar and «Anna is in»), so only its footer is the shared one, as on the brand confirms */
.p5-newdlg .dlg-body .p5-g2 + .field{margin-top:var(--s-4)}   /* Role follows the Name/Login pair, not a .field */
.p5-newdlg .hint.err{display:flex;align-items:center;gap:6px}
.p5-newdlg .hint.err .i{flex:none;width:var(--icon-sm);height:var(--icon-sm)}
.p5-keyin{position:relative;display:block}
.p5-keyin .i{position:absolute;left:12px;top:12px;width:var(--icon-md);height:var(--icon-md);color:var(--text-3);pointer-events:none}
.p5-keyin .in{width:100%;padding-left:36px}
.p5-newdlg .p5-limrow .p5-seg{flex:1 1 100%}
.p5-newdlg .p5-limrow .p5-seg button{flex:1}
.p5-rowmenu{width:200px}
.dlg.p5-detdlg .m-head{padding:var(--s-4) var(--s-4) 0 var(--s-6);min-height:0;border-bottom:0;background:none}   /* the frame: a title-less ✕ row (52 in all: 16 + the 36 ✕ of CF-DS, was 20 + 32), no band, no line */
.dlg.p5-detdlg .dlg-body{padding:var(--s-4) var(--s-6) var(--s-5)}   /* 20 px of air above the footer divider */
/* the title-less ✕ row of Sign-in details is flat on the dialog surface: no band, no blur, no top hairline */
.dlg.p5-detdlg .m-head{-webkit-backdrop-filter:none;backdrop-filter:none}
.dlg.p5-detdlg .m-head::before{display:none}
/* MINOR 3: radios draw rings as the frame's .p5-radio .dot (1.5px --text-3 ring, 5px --accent when on) */
.p5-newdlg .rcard input[type=radio]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--text-3)}
.p5-newdlg .rcard input[type=radio]:checked{box-shadow:inset 0 0 0 5px var(--accent)}
.in-sel{position:relative;display:block}   /* CF-DS.md:863: the Role field is a form .in M 44 with the native list; the chevron sits at the right */
.in-sel .i{position:absolute;right:12px;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--text-3);pointer-events:none}

/* AV3-A (DR-153, DR-70): People as cards */
.p5-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(296px,1fr));gap:var(--s-4);list-style:none;margin:0;padding:0}
.p5-people[hidden]{display:none}
.p5-pc{display:grid;grid-template-columns:40px minmax(0,1fr) 36px;grid-template-rows:auto minmax(0,1fr);column-gap:var(--s-3);row-gap:var(--s-1);align-items:center;min-height:80px;padding:var(--s-4);border-radius:var(--r-4);border:1px solid var(--line);background:var(--surface);transition:background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}   /* FX-10 UI-SETUP-11a: the name row keeps its own height and the second row takes the rest, so a card without the «today» line starts its name and role where its neighbours do; the avatar stays centred on the card */
.p5-pc > .av{grid-row:1 / span 2;grid-column:1}
.p5-pc-name{grid-column:2;grid-row:1;display:flex;align-items:center;gap:var(--s-2);min-width:0;font:600 var(--fs-4)/20px var(--font)}
.p5-pc-name b{font-weight:600;min-width:0}
.p5-pc-name .p5-you{flex:none}
.p5-pc > .icon-btn,.p5-pc > span:not(.av){grid-column:3;grid-row:1;align-self:center}
.p5-pc > .icon-btn{margin:-8px 0}   /* the 36 px button never makes row 1 taller than the name line */
.p5-pc-meta{grid-column:2 / span 2;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s-2);align-self:start;min-height:24px;min-width:0;font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
.p5-pc-meta .p5-role{flex:0 0 auto;min-width:64px}
.p5-pc-meta .p5-pres,.p5-pc-meta .p5-today{min-width:0;white-space:nowrap}   /* UI-B-1: a fact wraps to the next line whole, never cut */
.p5-pc-meta .p5-today{flex:1 1 100%;color:var(--text-2);font-size:var(--fs-2);line-height:18px;font-variant-numeric:tabular-nums}
.p5-pc .icon-btn.on{background:var(--active);box-shadow:var(--edge-strong)}
.p5-pc.click{cursor:pointer}
@media (hover:hover){.p5-pc.click:hover{background:var(--raised);border-color:var(--line-hover)}}
.p5-pc.click:has(.icon-btn.on){background:var(--raised);border-color:var(--line-hover)}
.p5-pc.click:active:not(:has(.icon-btn:active)){transform:scale(var(--m-press))}   /* DS-7: the one press of CF-DS 1.6; pressing the row's ⋯ button moves the button only */
.p5-people.p5-off .av,.p5-people.p5-off .p5-pc-name{opacity:.64}
.p5-pc-note{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;gap:var(--s-1);min-height:80px;padding:var(--s-4) 0}   /* FA-508: text, no plate: nothing here is framed */
.p5-pc-note h3{margin:0;font:600 var(--fs-4)/20px var(--font)}
.p5-pc-note p{margin:0;font:400 var(--fs-2)/18px var(--font);color:var(--text-2)}
.p5-people.skel .p5-pc{pointer-events:none}
@media (prefers-reduced-motion:reduce){.p5-pc{transition:none}}

/* FA-501 (P6-1): the Edit drawer is a grid whose column was auto: a 60-character name made it as wide as the title. One fixed column, the title cuts (its tooltip carries the name). */
#side.side[open]{grid-template-columns:minmax(0,1fr)}

/* FX-10 part 2 (UI-SETUP-1, 11c, 12) */
.p5-newdlg .field > .form-err{margin:0}   /* the error is the field's own last line, the look of the login's line (UI-SETUP-1) */
.p5-newdlg .form-err.p5-formerr{margin:var(--s-3) 0 0;font-size:var(--fs-2);line-height:18px}   /* a server answer with no field: under the form */
.p5-newdlg .form-err .i{flex:none;width:var(--icon-sm);height:var(--icon-sm)}
.p5-bar-r{display:flex;align-items:center}
.p5-who-btn[aria-expanded=true]{background:var(--raised);color:var(--text)}
.p5-whopop{width:min(460px,calc(100vw - 32px));padding:var(--s-4) var(--s-4) var(--s-2);transform-origin:top right}   /* UI-SETUP-11c: the roles behind the (i) */
.p5-whopop h2{margin:0 0 var(--s-2);font:600 var(--fs-3)/20px var(--font);letter-spacing:-.01em}
.p5-whopop dl > div{min-height:36px}
.p5-whopop dd{font-size:var(--fs-2);line-height:18px;color:var(--text-2)}
.p5-loaderr{display:flex;align-items:center;gap:var(--s-2)}   /* UI-SETUP-12: Sessions didn't load · Retry */
.p5-loaderr .i{flex:none;width:var(--icon-sm);height:var(--icon-sm);color:var(--amber)}
.p5-loaderr .link{margin-left:auto}