/* UX refinements shared by the marketing site, sign-in, workspace and client view. */
brick-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.05em;height:1.05em;flex:none;vertical-align:-.14em;color:inherit;
}
brick-icon svg{width:100%;height:100%;overflow:visible}

.btn{
  min-height:36px;
  padding:calc(8px * var(--density)) calc(13px * var(--density));
  font-size:.88rem;line-height:1.1;
}
.btn-sm{
  min-height:30px;
  padding:calc(5px * var(--density)) calc(9px * var(--density));
  font-size:.8rem;
}
.btn-lg{
  min-height:42px;
  padding:calc(10px * var(--density)) calc(18px * var(--density));
  font-size:.94rem;border-radius:var(--r-2);
}
.btn-icon{width:36px;min-width:36px;min-height:36px;padding:0}
.btn-sm.btn-icon{width:30px;min-width:30px;min-height:30px;padding:0}

.list-row .grow{display:grid;gap:2px}
.list-row .tt,.list-row .dd{display:block}
.list-row .dd{line-height:1.4}
.section-picker{display:grid;gap:0}
.section-picker .list-row{min-height:58px}
.section-picker .avatar{color:var(--accent-text);background:var(--accent-soft)}
.section-picker .btn{min-width:72px}
.section-picker .is-added{color:var(--text-3);background:var(--surface-2);border-color:var(--border)}
.field-note{display:flex;align-items:flex-start;gap:7px;font-size:.78rem;line-height:1.45;color:var(--text-3)}
.field-note brick-icon{margin-top:.17em}

.identity{display:inline-grid;place-items:center;overflow:hidden;text-transform:uppercase;font-weight:700;letter-spacing:.01em}
.identity img{width:100%;height:100%;object-fit:cover}
.identity[data-tone="0"]{background:#e9efff;color:#3155c6}
.identity[data-tone="1"]{background:#f4eafe;color:#7650a8}
.identity[data-tone="2"]{background:#e5f6ef;color:#167052}
.identity[data-tone="3"]{background:#fff1dc;color:#9a5b00}
.identity[data-tone="4"]{background:#fdebea;color:#a63e42}
.identity[data-tone="5"]{background:#e8f2f8;color:#336b85}

.auth .form{padding:clamp(24px,5vw,42px)}
.auth .prov .btn{min-height:42px}
.auth .prov .provider-icon{width:18px;height:18px}
.auth .tabsrow button{min-height:38px}
.password-label{display:flex;align-items:center;justify-content:space-between;gap:12px}
.password-label a{font-size:.78rem;font-weight:600}
.auth-status{padding:10px 12px;border-radius:var(--r-2);background:var(--surface-2);color:var(--text-2);font-size:.8rem;line-height:1.45}
.auth-status.good{background:var(--st-good-soft);color:var(--st-good-text)}
.auth-status.warn{background:var(--st-warn-soft);color:var(--st-warn-text)}
.auth-status.danger{background:var(--st-danger-soft);color:var(--st-danger-text)}
.form-heading{margin-bottom:4px}
.form-intro{margin-bottom:18px}

.compact-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.icon-label{display:inline-flex;align-items:center;gap:7px}
.modal-foot .btn{min-width:78px}

@media (max-width:640px){
  .modal-head{padding:18px 18px 0}
  .modal-body{padding:14px 18px}
  .modal-foot{padding:0 18px 18px}
  .section-picker .list-row{align-items:flex-start;display:grid;grid-template-columns:auto 1fr auto;gap:10px}
  .section-picker .badge{grid-column:2}
  .section-picker .btn{grid-column:3;grid-row:1}
  .auth .form{padding:24px 20px}
  .modeswitch{top:12px;right:12px}
}