/* FN4R1.20 · Digital Hub person-access grid + central Colloq AI connection.
   Additive layer: accepted Hub CSS remains byte-identical. */

/* PERSON > App access: deterministic responsive contract.
   Wide: four decisions per row. Compact/tablet/phone: two decisions per row.
   Deliberately never three columns and never one column. */
.access-modal{width:min(68rem,calc(100vw - 2rem))!important}
.access-role-picker{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:.58rem!important;
  align-items:stretch!important;
}
.access-role-option{min-width:0!important;width:100%!important}

/* Hub Settings > Colloq AI connection. */
.ai-connection-panel{padding:1.15rem 1.2rem;display:grid;gap:1rem}
.ai-connection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem}
.ai-connection-head h2{margin:.12rem 0 .25rem}
.ai-connection-head p{margin:0;color:var(--muted);max-width:56rem;line-height:1.5}
.ai-enabled-toggle{display:flex;align-items:center;gap:.5rem;min-height:2.35rem;padding:.45rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--surface-sunken);font-weight:760;white-space:nowrap}
.ai-enabled-toggle input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.ai-connection-status{display:flex;align-items:center;gap:.7rem;padding:.72rem .82rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface-sunken)}
.ai-connection-status .status-dot{width:.68rem;height:.68rem;border-radius:50%;background:var(--muted);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--muted) 12%,transparent);flex:none}
.ai-connection-status>div{display:grid;gap:.1rem}
.ai-connection-status small{color:var(--muted)}
.ai-connection-status.is-ready{border-color:color-mix(in srgb,var(--success) 35%,var(--line));background:color-mix(in srgb,var(--success-soft) 46%,var(--surface-raised))}
.ai-connection-status.is-ready .status-dot{background:var(--success);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--success) 14%,transparent)}
.ai-connection-status.is-off .status-dot{background:var(--muted)}
.ai-connection-status.is-error{border-color:color-mix(in srgb,var(--danger) 34%,var(--line));background:color-mix(in srgb,var(--danger-soft) 42%,var(--surface-raised))}
.ai-connection-status.is-error .status-dot{background:var(--danger);box-shadow:0 0 0 .22rem color-mix(in srgb,var(--danger) 12%,transparent)}
.ai-connection-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .85rem}
.ai-connection-form .field{min-width:0}
.ai-connection-form .field input{width:100%}
.ai-connection-form .field small{color:var(--muted);font-size:.72rem;line-height:1.35}
.ai-span-2{grid-column:1/-1}
.ai-connection-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding-top:.15rem}
.ai-connection-note{display:grid;gap:.12rem;max-width:54rem}
.ai-connection-note span,.ai-connection-note small{color:var(--muted);line-height:1.45}
.ai-connection-note small{font-size:.72rem;margin-top:.15rem}
.ai-connection-actions{display:flex;gap:.55rem;flex:none}

@media (max-width:1180px){
  .access-role-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:720px){
  .access-modal{width:min(42rem,calc(100vw - .7rem))!important}
  .access-role-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.48rem!important}
  .access-role-option{min-height:5rem!important;padding:.62rem .64rem!important;gap:.45rem!important}
  .access-role-copy strong{font-size:.76rem!important}
  .access-role-copy small{font-size:.64rem!important;line-height:1.32!important}
  .ai-connection-panel{padding:.9rem}
  .ai-connection-head,.ai-connection-foot{display:grid;grid-template-columns:1fr}
  .ai-enabled-toggle{width:max-content}
  .ai-connection-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .ai-connection-actions .btn{width:100%;justify-content:center}
}

@media (max-width:480px){
  .access-role-picker{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .access-role-option{min-height:5.35rem!important;padding:.58rem .55rem!important}
  .access-role-check{width:1.12rem!important;height:1.12rem!important}
  .access-role-copy strong{font-size:.72rem!important}
  .access-role-copy small{font-size:.6rem!important}
  .ai-connection-form{grid-template-columns:1fr}
  .ai-span-2{grid-column:auto}
  .ai-connection-actions{grid-template-columns:1fr}
}