/* ============================================================
   Users, redesigned (session 379). Daniel, 22 October 2026: "i want you to redesign the USERS page with updated styling also."
   The list (#users), one person's page (#users/<id>) and Add a user (#users/new), in the Settings redesign's look (session 377,
   settings-hub.css: the breadcrumb, the header card, the section list, sentences at 16px). Values from tokens.css only.
   ============================================================ */
.usr{ max-width:1320px; margin:0 auto; color:var(--ink); min-width:0 }
.usr.narrow{ max-width:920px }
.usr .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
.usr a{ color:var(--teal-dark) }
.usr-add{ all:unset; box-sizing:border-box; cursor:pointer; height:44px; padding:0 20px; border-radius:var(--b-radius-ctl, 10px); background:linear-gradient(180deg, var(--yellow), var(--yellow-deep)); color:var(--yellow-ink); font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap }
.usr-add:hover{ background:var(--yellow-hover) }
.usr-add:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.usr-add[disabled]{ opacity:.55; cursor:default }
.usr .stg-phero .usr-hact{ margin-left:auto; display:flex; gap:var(--s2); align-items:flex-start; flex-wrap:wrap }

/* Gaps (amber): what needs a look, each with its count; gone when there is nothing */
.usr-look{ margin:0 0 var(--s5) }
.usr-look .stg-look-row .btn{ margin-left:auto }

/* Tabs with counts, and the search box */
.usr-bar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin:0 0 var(--s4); min-width:0 }
.usr-bar > *{ min-width:0 }
.usr-tabs{ display:inline-flex; max-width:100%; min-width:0; overflow-x:auto; gap:4px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:4px }
.usr-tab{ all:unset; box-sizing:border-box; cursor:pointer; white-space:nowrap; flex:none; padding:8px 14px; border-radius:var(--radius); font-size:14px; font-weight:550; color:var(--ink); display:inline-flex; gap:8px; align-items:center }
.usr-tab:hover{ background:var(--line-soft) }
.usr-tab:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:1px }
.usr-tab.on{ background:var(--teal-dark); color:var(--white) }
.usr-tab .n{ font-size:12px; font-weight:600; background:var(--line-soft); color:var(--text); border-radius:999px; padding:1px 8px; font-variant-numeric:tabular-nums }
.usr-tab.on .n{ background:rgba(255,255,255,.2); color:var(--white) }
.usr-search{ position:relative; display:flex; align-items:center; margin-left:auto }
.usr-search svg{ position:absolute; left:12px; color:var(--muted); pointer-events:none }
.usr-search input{ width:300px; max-width:100%; padding-left:36px }
.usr-filter{ font-size:13.5px; color:var(--text); margin:0 0 var(--s3); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap }

/* The table: scrolls sideways in its own box at phone width */
.usr-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin:0 0 var(--s5) }
.usr-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; contain:inline-size; max-width:100%; position:relative }   /* the table's width never widens the page */
.usr-tbl{ width:100%; min-width:1000px; table-layout:auto; border-collapse:collapse; font-size:14px }
.usr-tbl th{ text-align:left; font-size:12px; font-weight:550; color:var(--muted); padding:10px 16px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--white) }
.usr-tbl thead tr.grp th{ padding-bottom:2px; border-bottom:0; color:var(--teal-deep); font-size:12px; text-align:center }
.usr-tbl thead tr.grp th.g{ border-bottom:2px solid var(--teal-pale) }
.usr-tbl th.c, .usr-tbl td.c{ text-align:center }
/* the Hub's tables cut a cell short with an ellipsis (tokens.css); this one never does: it scrolls sideways instead */
.usr-tbl th, .usr-tbl td{ max-width:none; overflow:visible; text-overflow:clip }
.usr-tbl td{ white-space:normal }
.usr-tbl th.c{ white-space:normal; min-width:72px; line-height:1.3 }
.usr-tbl th.c, .usr-tbl td.c{ padding-left:8px; padding-right:8px }
.usr-tbl td.usr-role, .usr-tbl td.usr-when, .usr-tbl td.usr-open{ white-space:nowrap }
.usr a.btn{ text-decoration:none; display:inline-flex; align-items:center }
.usr-tbl td{ padding:14px 16px; border-top:1px solid var(--line-soft); vertical-align:middle }
.usr-tbl tbody tr{ cursor:pointer }
.usr-tbl tbody tr:hover td{ background:var(--line-soft) }
.usr-tbl tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--yellow) }
.usr-tbl tbody tr:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:-2px }
.usr-tbl tbody tr.dim td{ color:var(--text) }
.usr-who{ display:flex; align-items:center; gap:12px; min-width:220px; max-width:290px }
.usr-av{ width:36px; height:36px; border-radius:50%; background:var(--teal-pale); color:var(--teal-deep); display:inline-flex; align-items:center; justify-content:center; font-weight:650; font-size:13px; flex:none; letter-spacing:.02em }
.usr-av.lg{ width:64px; height:64px; font-size:22px }
.usr-nm{ font-weight:600; color:var(--ink); font-size:14.5px; overflow-wrap:anywhere }
.usr-em{ font-size:12.5px; color:var(--muted); overflow-wrap:anywhere }
.usr-you{ font-size:12px; color:var(--muted); font-weight:500 }
.usr-pills{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px }
.usr-ck{ color:var(--teal-dark); display:inline-flex }
.usr-dash{ color:var(--muted); opacity:.55 }
.usr-no{ display:inline-block; width:12px; height:2px; border-radius:2px; background:var(--muted); opacity:.5; vertical-align:middle }
.usr-role{ font-weight:550; white-space:nowrap }
.usr-when{ white-space:nowrap; color:var(--text) }
.usr-open{ white-space:nowrap }
.usr-empty{ padding:var(--s5); color:var(--muted); font-size:14px }
.usr-quiet{ font-size:13px; color:var(--muted); padding:var(--s3) var(--s5); border-top:1px solid var(--line-soft) }
.usr-quiet summary{ cursor:pointer; color:var(--teal-dark); text-decoration:underline; text-underline-offset:2px }
.usr-quiet ul{ margin:var(--s2) 0 0; padding-left:18px }

/* The Host sign-ins card */
.usr-host{ display:flex; gap:var(--s4); align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--s4) var(--s5); margin:0 0 var(--s5) }
.usr-host .n{ font-size:28px; font-weight:650; color:var(--teal-dark); font-variant-numeric:tabular-nums; min-width:40px; text-align:center }
.usr-host .t{ font-size:14px; color:var(--text); line-height:1.5 }
.usr-host .t b{ color:var(--ink); font-weight:600 }

/* One person's page */
.usr-hero{ align-items:center }
.usr-hero h1{ overflow-wrap:anywhere }
.usr-facts{ display:flex; flex-wrap:wrap; gap:6px var(--s5); margin-top:var(--s2); font-size:13.5px; color:var(--text) }
.usr-facts a{ text-decoration:underline; text-underline-offset:2px }
.usr-panel{ background:var(--white); border:1px solid var(--teal-dark); box-shadow:0 0 0 3px var(--teal-pale); border-radius:var(--radius-lg); padding:var(--s4) var(--s5); margin:0 0 var(--s5) }
.usr-panel h2{ font-size:17px; font-weight:600; margin:0 0 var(--s2) }
.usr-panel p{ font-size:14px; color:var(--text); margin:0 0 var(--s3); line-height:1.5 }
.usr-prow{ display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap }
.usr-prow input{ width:320px; max-width:100%; font-variant-numeric:tabular-nums; letter-spacing:.02em }
.usr-pfoot{ display:flex; gap:var(--s2); justify-content:flex-end; align-items:center; margin-top:var(--s3); flex-wrap:wrap }
.usr-pfoot .stg-msg{ margin-right:auto; font-size:13px }
.usr-confirm{ margin:0 var(--s5) var(--s4); border:1px solid var(--line); border-left:4px solid var(--amber-dot); background:var(--warn-bg); border-radius:0 var(--radius) var(--radius) 0; padding:var(--s3) var(--s4) }
.usr-confirm p{ margin:0 0 var(--s3); font-size:14.5px; color:var(--ink); line-height:1.5 }
.usr-confirm .usr-prow{ justify-content:flex-end }
.usr-saved{ font-size:12.5px; color:var(--green-text); white-space:nowrap }
.usr-lockline{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); padding:var(--s3) var(--s5) 0 }

/* The switches on Users: 46 by 26, saving the moment they are flipped */
.usr .tg{ width:46px; height:26px }
.usr .tg.on .knob{ animation:usr-on .55s var(--spring) forwards }
.usr .tg:not(.on) .knob{ animation:usr-off .55s var(--spring) forwards }
@keyframes usr-on{ 0%{ transform:translateX(0) } 45%{ transform:translateX(10px) scaleX(1.55) scaleY(.82) } 100%{ transform:translateX(20px) } }
@keyframes usr-off{ 0%{ transform:translateX(20px) } 45%{ transform:translateX(10px) scaleX(1.55) scaleY(.82) } 100%{ transform:translateX(0) } }
.usr button.tg{ border:0; padding:0; cursor:pointer }
.usr button.tg[disabled]{ cursor:default; opacity:.45 }
.usr button.tg:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.usr .stg-swv{ align-items:center }
.usr-sw{ display:inline-flex; align-items:center; gap:var(--s2); flex:none; padding-top:2px; font-size:13px; color:var(--text) }

/* Recent changes */
.usr-chg{ list-style:none; margin:0; padding:0 }
.usr-chg li{ display:flex; gap:var(--s4); padding:12px var(--s5); border-top:1px solid var(--line-soft); font-size:14px; align-items:baseline; flex-wrap:wrap }
.usr-chg li:first-child{ border-top:0 }
.usr-chg .w{ flex:1 1 280px; color:var(--ink) }
.usr-chg .v{ color:var(--text) }
.usr-chg .by{ font-size:12.5px; color:var(--muted); white-space:nowrap }
.usr-foot{ padding:var(--s3) var(--s5) var(--s4); border-top:1px solid var(--line-soft); font-size:13.5px }

/* Add a user: three steps */
.usr-step{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); margin:0 0 var(--s5) }
.usr-step .stg-shead .k{ width:28px; height:28px; border-radius:50%; background:var(--teal-dark); color:var(--white); font-weight:650; font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex:none }
.usr-sbody{ padding:var(--s4) var(--s5) var(--s5) }
.usr-people{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:var(--s3) }
.usr-pcard{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s4); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white) }
.usr-pcard:hover{ border-color:var(--teal-dark) }
.usr-pcard:focus-visible{ outline:2px solid var(--teal-dark); outline-offset:2px }
.usr-pcard.on{ border-color:var(--teal-dark); box-shadow:0 0 0 3px var(--teal-pale); background:var(--teal-pale) }
.usr-pcard .r{ font-size:12.5px; color:var(--muted) }
.usr-fields{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) }
.usr-fields label{ display:block; font-size:13px; font-weight:550; color:var(--ink); margin:0 0 6px }
.usr-fields input{ width:100% }
.usr-hint{ font-size:13px; color:var(--muted); margin-top:var(--s3); line-height:1.5 }
.usr-roles{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 var(--s4) }
.usr-sws{ border:1px solid var(--line-soft); border-radius:var(--radius-lg) }
.usr-sws .stg-rule:first-child{ border-top:0 }
.usr-sgh{ font-size:12.5px; font-weight:550; color:var(--teal-deep); padding:var(--s3) var(--s5) 0 }
.usr-actions{ display:flex; gap:var(--s3); align-items:center; justify-content:flex-end; flex-wrap:wrap; margin:0 0 var(--s7) }
.usr-actions .stg-msg{ margin-right:auto; font-size:13.5px }

@media (max-width:900px){
  .usr-search{ margin-left:0; width:100% }
  .usr-search input{ width:100% }
}
@media (max-width:760px){
  .usr .stg-phero .usr-hact{ margin-left:0 }
  .usr-tabs{ width:100%; overflow-x:auto }
  .usr-tab{ padding:8px 10px }
  .usr-fields{ grid-template-columns:1fr }
  .usr-host{ padding:var(--s4) }
  .usr-chg li, .usr-foot, .usr-sbody, .usr-quiet{ padding-left:var(--s4); padding-right:var(--s4) }
  .usr-confirm{ margin-left:var(--s4); margin-right:var(--s4) }
  .usr-lockline, .usr-sgh{ padding-left:var(--s4); padding-right:var(--s4) }
  .usr-tbl td, .usr-tbl th{ padding-left:12px; padding-right:12px }
}