/* Team brands — the logo tile, the Team page hero, the editor sheet, the sidebar chip and the Agency settings table.
   Kit tokens only (no new colours). Markup: app/team-brand.js brandTile · pages/my-team/team-brand-hero.js · app/team-brand-editor.js ·
   app/team-brand-chip.js · pages/agency-settings/team-brands-section.js. */

/* ---------- the logo tile: the logo as a square, else the initials ---------- */
.tb-tile{position:relative;display:inline-grid;place-items:center;flex:none;overflow:hidden;border-radius:var(--r-ctl);background:linear-gradient(150deg,var(--sky-3),var(--sky-2));color:var(--accent-ink);font:600 .75rem/1 var(--font-ui);box-shadow:inset 0 0 0 .5px rgb(29 106 208/.22)}
.tb-tile.has-logo{background:#fff;box-shadow:inset 0 0 0 .5px rgb(16 30 42/.12)}
.tb-tile img{display:block;width:100%;height:100%;object-fit:cover}
.tb-s{width:20px;height:20px;border-radius:var(--r-tag);font-size:.5625rem}
.tb-m{width:32px;height:32px;font-size:.75rem}
.tb-l{width:56px;height:56px;border-radius:var(--r-card);font-size:1.0625rem}
.tb-xl{width:88px;height:88px;border-radius:var(--r-panel);font-size:1.75rem;letter-spacing:-.01em}
.tb-tile.is-add{background:none;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.tb-tile.is-add .i{width:22px;height:22px}

/* ---------- the Team page hero: flush, hairline below, like the page's other sections ---------- */
.tb-slot{display:block}
.tb-hero{display:flex;align-items:center;gap:20px;padding:20px 20px 20px 16px;border-bottom:1px solid var(--hair-2);background:linear-gradient(90deg,var(--accent-tint),transparent 70%)}
.tb-hero.is-empty{background:none}
.tb-hero-text{display:grid;gap:6px;min-width:0;flex:1}
.tb-name{font:var(--t-title);letter-spacing:-.012em;color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:var(--t-small);color:var(--ink-2)}
.tb-leader{font:var(--t-section);color:var(--ink-2)}
.tb-hero-act{flex:none}
.is-phone .tb-hero{flex-wrap:wrap;gap:12px 14px;padding:16px}
.is-phone .tb-xl{width:64px;height:64px;font-size:1.375rem}
.is-phone .tb-name{white-space:normal;font:var(--t-section)}
.is-phone .tb-hero-act{flex:1 1 100%}
.is-phone .tb-hero-act .btn{width:100%}

/* ---------- the editor sheet ---------- */
.tb-sheet .tb-edit{display:grid;gap:18px}
.tb-preview{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-card);background:rgb(16 30 42/.04)}
.tb-preview-text{display:grid;gap:2px;min-width:0}
.tb-preview-text b{font:var(--t-section);color:var(--ink-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-preview-text span{font:var(--t-small);color:var(--ink-2)}
.tb-drop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--hair-2);transition:background-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
.tb-drop.is-over{background:var(--accent-tint);box-shadow:inset 0 0 0 1.5px var(--accent)}
.tb-drop-text{display:grid;gap:2px;flex:1;min-width:140px;font:var(--t-body);color:var(--ink-1)}
.tb-drop-text small{font:var(--t-small);color:var(--ink-2)}
.tb-drop .lnk{padding:0;border:0;background:none;font:inherit;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}

/* ---------- the sidebar chip, above the account card ---------- */
.side .tb-chip-slot:empty{display:none}
.side .tb-chip-slot{margin-bottom:8px}
.side .tb-chip{display:flex;align-items:center;gap:8px;min-width:0;padding:0 4px}
.side .tb-chip .tb-tile{width:24px;height:24px}
.side .tb-chip-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 14.5px/19px var(--font-ui);color:var(--side-fg)}

/* ---------- Agency settings → Team brands ---------- */
.tb-tablewrap{overflow-x:auto}
.tb-table td,.tb-table th{vertical-align:middle}
.tb-cell{display:flex;align-items:center;gap:10px;min-width:0}
.tb-cell b{font:var(--t-strong);color:var(--ink-1)}
.tb-muted{color:var(--ink-2)}
.tb-flag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:var(--r-tag);background:rgb(16 30 42/.07);color:var(--ink-1);font:600 11px/1 var(--font-ui);white-space:nowrap}
.tb-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.tb-acts .btn[hidden]{display:none}
.tb-state{padding:16px;font:var(--t-body);color:var(--ink-2)}

/* the editor is as tall as its content (the centred sheet's default is a tall fixed box) */
dialog.center-sheet.tb-sheet{max-width:520px;height:fit-content;max-height:calc(100dvh - 32px)}
.tb-sheet .sheet-body{padding-top:12px}
.side>.brand .tb-tile{width:32px;height:32px;border-radius:8px}
.side>.brand:is([data-tb-name="on"],[data-tb-name="long"],[data-tb-name="max"]) .nm{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;font-size:17px;line-height:1.15}
.side>.brand[data-tb-name="long"] .nm{font-size:14px;line-height:1.2}
.side>.brand[data-tb-name="max"] .nm{font-size:12.5px;line-height:1.2}