/* CaptureTech Authentication on top of portal.css, suite-shell.css and suite-auth.css: the signed-in
   page's rail-less shell and its compact lists. The sign-in scene itself is shared. */
html[data-ui="next"] .id-signout{margin:0;}
html[data-ui="next"] .id-list{list-style:none;margin:0;padding:0;}
html[data-ui="next"] .id-list li + li{border-top:1px solid var(--line-soft);}
html[data-ui="next"] .id-row{display:flex;align-items:center;gap:12px;padding:11px 16px;}
html[data-ui="next"] .id-row > svg{width:16px;height:16px;color:var(--ink-4);flex-shrink:0;}
html[data-ui="next"] .id-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
html[data-ui="next"] .id-main b{font-weight:600;font-size:13.5px;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
html[data-ui="next"] .id-main span{font-size:12px;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-ui="next"] .id-devices li{display:flex;align-items:center;gap:12px;padding:12px 16px;}
html[data-ui="next"] .id-devices li > svg{width:18px;height:18px;color:var(--ink-4);flex-shrink:0;}
html[data-ui="next"] .id-devices form{margin:0;}
/* Demo mode's sign-in (Endpoints/DemoSignIn.cs): the quiet link under the staff button, and the account to continue as
   (AccountChooser): a search over a list of rows, the chosen one tinted; the radio itself stays for the keyboard. */
html[data-ui="next"] .auth-quiet{display:block;margin-top:12px;text-align:center;font-size:12.5px;}
html[data-ui="next"] .auth-choose-search{max-width:none;min-width:0;height:36px;margin-bottom:10px;}
html[data-ui="next"] .auth-choose-list{display:flex;flex-direction:column;gap:6px;max-height:min(58vh,430px);overflow-y:auto;margin:0 0 16px;padding:2px;}
html[data-ui="next"] .auth-choice{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);cursor:pointer;transition:border-color .15s ease, background .15s ease;}
html[data-ui="next"] .auth-choice[hidden]{display:none;}
html[data-ui="next"] .auth-choice:hover{border-color:var(--blue);}
html[data-ui="next"] .auth-choice:has(input:checked){border-color:var(--blue);background:var(--tint);box-shadow:inset 0 0 0 1px var(--blue);}
html[data-ui="next"] .auth-choice:has(input:focus-visible){box-shadow:var(--focus-ring);}
html[data-ui="next"] .auth-choice input{position:absolute;opacity:0;pointer-events:none;}
html[data-ui="next"] .auth-choice-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--tint);color:var(--blue);font-weight:700;font-size:12.5px;}
html[data-ui="next"] .auth-choice:has(input:checked) .auth-choice-avatar{background:var(--blue);color:var(--surface);}
html[data-ui="next"] .auth-choice-main{display:flex;flex-direction:column;gap:2px;min-width:0;}
html[data-ui="next"] .auth-choice-main b{font-weight:600;font-size:13.5px;color:var(--ink);}
html[data-ui="next"] .auth-choice-main span{font-size:12px;color:var(--ink-4);overflow-wrap:anywhere;}
html[data-ui="next"] .auth-choose-none{margin:-8px 0 14px;text-align:center;}

/* The administration (/admin/…): customers, sign-ins, staff and apps. A switched-off row is faded. */
html[data-ui="next"] .cpa-off td{opacity:.55;}
html[data-ui="next"] .cpa-inline{display:flex;align-items:flex-end;gap:10px 14px;flex-wrap:wrap;}
html[data-ui="next"] :is(.cpa-inline,.cpa-edit) > .field{margin:0;}
html[data-ui="next"] .cpa-grow{flex:1 1 220px;}
html[data-ui="next"] .cpa-addrow td{background:var(--field);}
html[data-ui="next"] .cpa-addrow input:not([type=checkbox]){width:100%;}
/* Narrow inputs (country, order, icon, BC contact no.); after the width:100% rules above and in suite-ui.css. */
html[data-ui="next"] .field input.cpa-w-xs{width:80px;}
html[data-ui="next"] .field input.cpa-w-md{width:110px;}
html[data-ui="next"] .picker.cpa-w-md{width:120px;}
html[data-ui="next"] .cpa-chip{margin:0 4px 4px 0;}
/* The customers a sign-in acts for, as links in a row. */
html[data-ui="next"] .cpa-company + .cpa-company::before{content:"·";margin:0 6px;color:var(--ink-4);}
/* The add-a-contact row in a customer's contacts panel foot: fields level with the button. */
html[data-ui="next"] .cpa-contact{width:100%;}
html[data-ui="next"] .cpa-edit{display:flex;flex-direction:column;gap:10px;padding:6px 0;}
/* The app editor's audience switches: setting rows flush with the fields above them. */
html[data-ui="next"] .cpa-settings .set-row{padding-left:0;padding-right:0;}
html[data-ui="next"] .cpa-langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
html[data-ui="next"] .cpa-lang{display:flex;flex-direction:column;gap:5px;}
html[data-ui="next"] .cpa-lang b{font-size:11px;color:var(--ink-4);}

/* The customer administrator's Users page (/team, NFR-001): each app a switch with its name, wrapping in the cell. */
html[data-ui="next"] .team-apps{display:flex;flex-wrap:wrap;gap:6px 14px;}

/* A phone (below 640px): the details of a device, a passkey or an invitation wrap instead of being cut off, the row's
   actions go to a line of their own, and an opened confirm (Remove, Revoke) takes the full width. */
@media (max-width:640px){
  html[data-ui="next"] .id-main span{white-space:normal;overflow:visible;}
  html[data-ui="next"] :is(.id-devices li, .id-list > li){flex-wrap:wrap;}
  html[data-ui="next"] :is(.id-devices li, .id-list > li) > .id-main{flex-basis:calc(100% - 40px);}
  html[data-ui="next"] .mfa-confirmed[open]{flex-basis:100%;}
  html[data-ui="next"] .mfa-confirmed[open] > form{max-width:none;}
}