@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Nunito:wght@400;600;700;800&display=swap');

/* Tokens — Manual da marca UP Núcleo Terapêutico (v1, 12/11/2026) */
:root {
  --marca-roxo: #AE5AE4; --marca-amarelo: #F6E460; --marca-verde: #A8DE84; --marca-verde-claro: #D0F0B0; --marca-azul: #ACD0F8; --marca-coral: #EA8A66;
  --fundo: #FBFAF6; --superficie: #FFFFFF; --superficie-rebaixada: #F4F2EC; --neutro-suave: #EFECE4; --linha: #E6E2D8; --linha-campo: #8E8797;
  --tinta: #1F1B24; --tinta-suave: #5E5866; --tinta-inversa: #FFFFFF;
  --acao: #8E3FC8; --acao-forte: #7C35B3; --acao-suave: #F3E8FC; --foco: #8E3FC8;
  --fono: var(--marca-azul); --fono-suave: #E3F0FD; --fono-tinta: #1F5C99;
  --to: var(--marca-verde); --to-suave: #E6F6DA; --to-tinta: #2D6A1F;
  --psico: var(--marca-roxo); --psico-suave: #F3E8FC; --psico-tinta: #6A2A9C;
  --psicoped: var(--marca-amarelo); --psicoped-suave: #FCF6D0; --psicoped-tinta: #7A5A00;
  --anamnese: var(--marca-coral); --anamnese-suave: #FCE9E0; --anamnese-tinta: #A8461F;
  --sucesso: #1E6B4A; --sucesso-suave: #E3F4EC; --atencao: #8A5200; --atencao-suave: #FFF1D6;
  --erro: #B42318; --erro-suave: #FDECEA; --info: #2B4F8A; --info-suave: #E6EDF8;
  --raio-pequeno: 6px; --raio-medio: 10px; --raio-grande: 16px; --raio-pilula: 999px;
  --sombra-cartao: 0 1px 2px rgba(31,27,36,.06), 0 1px 1px rgba(31,27,36,.04);
  --sombra-flutuante: 0 8px 24px rgba(31,27,36,.12);
  --sans: Nunito, "Segoe UI", system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-family: var(--sans); color: var(--tinta); background: var(--fundo); font-synthesis: none; color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { opacity: .55; cursor: wait; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex-shrink: 0; }
code { font-size: 12px; background: var(--superficie-rebaixada); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.muted { color: var(--tinta-suave); }

/* Menu lateral */
aside { width: 248px; background: var(--superficie); border-right: 1px solid var(--linha); position: fixed; inset: 0 auto 0 0; padding: 26px 18px; display: flex; flex-direction: column; z-index: 3; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 6px 30px; }
.brand img { width: 66px; height: auto; }
.brand strong, .brand small { display: block; font-family: var(--sans); line-height: 1.15; }
.brand strong { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--tinta); } .brand small { font-size: 15px; font-weight: 700; color: var(--tinta-suave); }
.label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 800; margin: 8px 12px 10px; }
.nav { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 42px; padding: 9px 12px; border-radius: var(--raio-medio); font-size: 14px; margin: 2px 0; color: var(--tinta-suave); font-weight: 600; }
.nav:hover { background: var(--superficie-rebaixada); color: var(--tinta); }
.nav.active { background: var(--acao-suave); color: var(--acao-forte); font-weight: 800; }
.bottom { margin-top: auto; padding-top: 20px; display: grid; gap: 14px; }
.sol { border: 1px solid var(--linha); padding: 14px; border-radius: var(--raio-medio); font-size: 13px; background: var(--fundo); }
.sol strong { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; } .sol .ico { width: 16px; color: var(--psicoped-tinta); }
.sol p { margin: 0; color: var(--tinta-suave); font-size: 13px; }
.account { display: flex; gap: 10px; align-items: center; font-size: 13px; }
.account > div { flex: 1; min-width: 0; } .account b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account small { display: block; color: var(--tinta-suave); }
.avatar { background: var(--acao-suave); color: var(--psico-tinta); border-radius: var(--raio-pilula); width: 36px; height: 36px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0; }
.avatar.soft { background: var(--neutro-suave); color: var(--tinta-suave); } .avatar.lg { width: 52px; height: 52px; font-size: 16px; }
.icon-btn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--raio-medio); color: var(--tinta-suave); flex-shrink: 0; }
.icon-btn:hover { background: var(--superficie-rebaixada); color: var(--tinta); }

/* Estrutura */
main { margin-left: 248px; min-width: 0; }
header { height: 68px; padding: 0 40px; background: var(--superficie); border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--tinta-suave); }
.crumb span { margin: 0 10px; color: var(--linha-campo); }
.header-right { display: flex; gap: 12px; align-items: center; } .date::first-letter { text-transform: uppercase; }
.workspace { padding: 32px 40px; max-width: 1560px; margin: auto; }
.eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .06em; font-weight: 800; color: var(--tinta-suave); }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.title-row > div { min-width: 0; } .title-row > .primary { flex-shrink: 0; }
h1 { font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -.01em; margin: 4px 0 6px; }
h2 { font-size: 18px; line-height: 26px; font-weight: 700; margin: 0; }
h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
p { font-size: 14px; line-height: 1.6; color: var(--tinta-suave); margin: 0; }

/* Botões */
.primary, .secondary { border-radius: var(--raio-medio); min-height: 42px; padding: 10px 16px; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.primary { background: var(--acao); color: var(--tinta-inversa); } .primary:hover { background: var(--acao-forte); }
.secondary { background: var(--superficie); border: 1px solid var(--linha-campo); color: var(--tinta); } .secondary:hover { background: var(--acao-suave); }
.primary.danger { background: var(--erro); } .primary.danger:hover { background: var(--erro); filter: brightness(.88); }
.secondary.danger { color: var(--erro); border-color: var(--erro); } .secondary.danger:hover { background: var(--erro-suave); }
.sm { min-height: 36px; padding: 6px 12px; font-size: 13px; } .block { width: 100%; }
.text-btn { font-size: 13px; color: var(--acao); font-weight: 800; padding: 8px 6px; border-radius: var(--raio-pequeno); white-space: nowrap; }
.text-btn:hover { background: var(--acao-suave); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* Selos e chips */
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: var(--raio-pilula); background: var(--neutro-suave); color: var(--tinta-suave); white-space: nowrap; }
.badge.ok { background: var(--sucesso-suave); color: var(--sucesso); } .badge.warn { background: var(--atencao-suave); color: var(--atencao); }
.badge.err { background: var(--erro-suave); color: var(--erro); } .badge.info { background: var(--info-suave); color: var(--info); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 4px 10px 4px 8px; border-radius: var(--raio-pilula); white-space: nowrap; }
.chip i { width: 8px; height: 8px; border-radius: 50%; }
.tone-fono { background: var(--fono-suave); color: var(--fono-tinta); --dot: var(--fono); }
.tone-to { background: var(--to-suave); color: var(--to-tinta); --dot: var(--to); }
.tone-psico { background: var(--psico-suave); color: var(--psico-tinta); --dot: var(--psico); }
.tone-psicoped { background: var(--psicoped-suave); color: var(--psicoped-tinta); --dot: var(--psicoped); }
.tone-anamnese { background: var(--anamnese-suave); color: var(--anamnese-tinta); --dot: var(--anamnese); }
.tone-neutro { background: var(--neutro-suave); color: var(--tinta-suave); --dot: var(--linha-campo); }
.chip i { background: var(--dot); }

/* Avisos */
.banner { display: flex; justify-content: space-between; align-items: center; background: var(--atencao-suave); color: var(--atencao); border-radius: var(--raio-medio); font-size: 13px; font-weight: 600; padding: 10px 14px; margin-bottom: 22px; gap: 10px; }
.banner .text-btn { color: var(--atencao); } .error-box { background: var(--erro-suave); color: var(--erro); }
.error { color: var(--erro); font-size: 13px; line-height: 1.5; } .error:empty { display: none; }
.note { background: var(--info-suave); color: var(--info); border-radius: var(--raio-medio); padding: 12px 14px; font-size: 13px; margin-top: 14px; }

/* Painéis */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat { background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-cartao); border-radius: var(--raio-grande); padding: 20px; min-width: 0; }
.stat-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--tinta-suave); font-size: 13px; font-weight: 600; }
.stat strong { font-size: 32px; font-weight: 800; display: block; margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.stat small { font-size: 13px; color: var(--tinta-suave); }
.stat-icon { background: var(--acao-suave); color: var(--acao); padding: 8px; border-radius: var(--raio-medio); display: grid; }
.grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; } .grid > div { min-width: 0; }
.panel { background: var(--superficie); border: 1px solid var(--linha); box-shadow: var(--sombra-cartao); border-radius: var(--raio-grande); overflow: hidden; margin-bottom: 22px; }
.panel-head { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--linha); }
.panel-head small { display: block; color: var(--tinta-suave); font-size: 13px; margin-top: 2px; }
.list-item { padding: 14px 22px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--linha); width: 100%; text-align: left; }
.list-item:last-child { border-bottom: 0; } .as-btn:hover { background: var(--fundo); }
.list-item .detail { flex: 1; min-width: 0; overflow-wrap: anywhere; } .list-item strong { font-size: 14px; font-weight: 700; display: block; }
.list-item small { display: block; font-size: 13px; color: var(--tinta-suave); margin-top: 2px; }
.list-item .go { color: var(--linha-campo); display: grid; }
.time { font-size: 14px; font-weight: 800; width: 46px; font-variant-numeric: tabular-nums; }
.journey { padding: 22px; display: grid; gap: 16px; }
.journey-row { display: flex; align-items: center; gap: 12px; font-size: 14px; } .journey-row span:first-child { width: 140px; }
.bar { background: var(--superficie-rebaixada); border-radius: var(--raio-pilula); height: 10px; flex: 1; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: var(--raio-pilula); }
.fill-to { background: var(--to); } .fill-psicoped { background: var(--psicoped); } .fill-anamnese { background: var(--anamnese); } .fill-psico { background: var(--psico); }
.journey-row b { width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
/* Grafismo da marca (bolinhas do P) — permitido em áreas de marca, não em tabelas */
.callout { background: var(--marca-verde-claro); border-radius: var(--raio-grande); padding: 24px; position: relative; overflow: hidden; }
.callout h2 { margin: 10px 0 8px; } .callout p { color: var(--tinta); max-width: 330px; margin-bottom: 16px; } .callout .eyebrow { color: var(--to-tinta); }
.callout::after { content: ''; position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; border-radius: 50%; background: var(--marca-amarelo) radial-gradient(circle, var(--marca-coral) 6px, transparent 7px) 0 0 / 30px 30px; opacity: .9; pointer-events: none; }
.callout button { position: relative; z-index: 1; }

/* Filtros e campos */
.filters, .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
input, select, textarea { border: 1px solid var(--linha-campo); background: var(--superficie); padding: 10px 12px; min-height: 42px; border-radius: var(--raio-medio); outline: none; min-width: 0; width: 100%; }
.filters input { flex: 1; min-width: 220px; } .filters select, .toolbar select { width: auto; }
input:focus, select:focus, textarea:focus { border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-suave); }
textarea { min-height: 84px; resize: vertical; }
.inline { display: flex; gap: 8px; }

/* Tabelas */
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; text-align: left; }
th { font-weight: 800; color: var(--tinta-suave); background: var(--superficie-rebaixada); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
td, th { padding: 14px 20px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
td small { color: var(--tinta-suave); display: block; margin-top: 3px; font-size: 13px; }
tr.inactive td { color: var(--tinta-suave); } .row-actions { white-space: nowrap; text-align: right; }
.empty { text-align: center; padding: 40px; color: var(--tinta-suave); font-size: 14px; }

/* Jornada */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.column { background: var(--superficie-rebaixada); padding: 12px; border-radius: var(--raio-grande); }
.column > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 4px 14px; justify-content: space-between; color: var(--tinta-suave); }
.card { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-medio); padding: 14px; margin-bottom: 10px; box-shadow: var(--sombra-cartao); }
.card h3 { margin: 10px 0 2px; } .card p { font-size: 13px; margin-bottom: 6px; }

/* Agenda semanal */
.week-nav { display: flex; align-items: center; gap: 6px; } .week-nav b { margin-left: 8px; font-size: 15px; }
.sync { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--sucesso); background: var(--sucesso-suave); border-radius: var(--raio-pilula); padding: 2px 4px 2px 12px; }
.sync .ico { width: 16px; height: 16px; } .sync .icon-btn { width: 34px; height: 34px; color: inherit; }
.sync.bad { color: var(--erro); background: var(--erro-suave); }
.legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.legend .hint { font-size: 13px; color: var(--tinta-suave); margin-left: 6px; }
.agenda-panel { overflow-x: auto; }
.week { min-width: 760px; }
.week-head, .week-body { display: grid; grid-template-columns: 56px repeat(var(--days), minmax(0, 1fr)); }
.week-head { border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: var(--superficie); z-index: 2; }
.week-head > div { padding: 10px 8px; text-align: center; border-left: 1px solid var(--linha); display: grid; gap: 4px; justify-items: center; align-content: start; }
.week-head small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--tinta-suave); }
.week-head b { font-size: 20px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--raio-pilula); font-variant-numeric: tabular-nums; }
.week-head .today b { background: var(--acao); color: var(--tinta-inversa); }
.allday { font-size: 12px; font-weight: 700; background: var(--neutro-suave); color: var(--tinta-suave); border-radius: var(--raio-pequeno); padding: 3px 6px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hours { display: grid; grid-template-rows: repeat(var(--rows), var(--hpx)); }
.hours span { font-size: 12px; color: var(--tinta-suave); text-align: right; padding-right: 8px; transform: translateY(-8px); font-variant-numeric: tabular-nums; }
.hours span:first-child { transform: none; }
.day-col { position: relative; border-left: 1px solid var(--linha); height: calc(var(--rows) * var(--hpx)); background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--hpx) - 1px), var(--linha) calc(var(--hpx) - 1px) var(--hpx)); }
.day-col.today { background-color: var(--fundo); }
.ev { position: absolute; top: var(--top); height: var(--h); left: calc(var(--lane) * 100% / var(--lanes) + 2px); width: calc(100% / var(--lanes) - 4px); border-radius: var(--raio-pequeno); border-left: 4px solid var(--dot); padding: 4px 6px; text-align: left; overflow: hidden; font-size: 12px; line-height: 1.3; display: flex; flex-direction: column; gap: 1px; }
.ev:hover { box-shadow: var(--sombra-flutuante); z-index: 1; }
.ev b { font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev span, .ev small { color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev small { color: var(--tinta-suave); }
.ev.cancelled { opacity: .6; } .ev.cancelled span { text-decoration: line-through; }
.ev.pending { border-style: dashed; border-left-style: solid; outline: 1px dashed var(--dot); }
.now { position: absolute; left: 0; right: 0; top: var(--top); border-top: 2px solid var(--erro); z-index: 1; pointer-events: none; }
.now::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--erro); }
.day-title { padding: 12px 18px 6px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); background: var(--superficie-rebaixada); }
.day-title.today { color: var(--acao-forte); }
.mobile-only { display: none; }

/* Modais e formulários */
dialog { border: 0; border-radius: var(--raio-grande); width: min(580px, calc(100vw - 32px)); padding: 28px; box-shadow: var(--sombra-flutuante); color: inherit; max-height: calc(100vh - 32px); }
dialog::backdrop { background: rgba(31,27,36,.4); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 6px; } dialog > p { margin: 8px 0 0; }
dialog form, .settings { display: grid; gap: 16px; }
dialog label, .settings label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.no-pro .pro-only, .no-pro label:has([name=google_tag]) { display: none; }
.actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.detail-modal h2 { margin: 12px 0 14px; }
.detail-modal dl { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; margin: 0; font-size: 14px; }
.detail-modal dt { color: var(--tinta-suave); font-weight: 700; } .detail-modal dd { margin: 0; }
.pw { font: 800 20px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .06em; background: var(--superficie-rebaixada); border-radius: var(--raio-medio); padding: 12px; text-align: center; color: var(--tinta); margin-top: 14px; user-select: all; }
.settings { padding: 22px; max-width: 760px; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.6; }
#toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--tinta); color: var(--tinta-inversa); padding: 12px 20px; border-radius: var(--raio-medio); z-index: 20; font-size: 14px; max-width: calc(100vw - 32px); transition: .2s; box-shadow: var(--sombra-flutuante); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.footer { font-size: 12px; color: var(--tinta-suave); display: flex; justify-content: space-between; margin-top: 18px; }

/* Tela de login (tela de marca) */
.login { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--fundo) radial-gradient(circle, var(--marca-amarelo) 2px, transparent 2.5px) 0 0 / 28px 28px; }
.login-card { width: min(420px, 100%); background: var(--superficie); border-radius: var(--raio-grande); box-shadow: var(--sombra-flutuante); padding: 40px 32px 28px; display: grid; gap: 18px; justify-items: center; text-align: center; }
.login-card form { display: grid; gap: 14px; width: 100%; text-align: left; }
.login-card label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tinta-suave); }
.brand-title { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 1100px) {
  aside { width: 210px; padding: 22px 12px; } main { margin-left: 210px; }
  .workspace { padding: 26px; } header { padding: 0 26px; }
  .grid { grid-template-columns: 1fr; } .board, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .title-row { flex-wrap: wrap; } .sync { margin-left: 0; }
}
@media (max-width: 760px) {
  aside { position: static; width: 100%; padding: 10px 16px; display: flex; flex-direction: column; border-right: 0; border-bottom: 1px solid var(--linha); overflow: visible; }
  .brand { margin: 4px 0 8px; } .brand img { width: 48px; } .label, .sol { display: none; }
  nav { display: flex; overflow-x: auto; gap: 4px; margin: 0 -16px; padding: 0 16px; }
  .nav { width: auto; white-space: nowrap; } .nav .ico { display: none; }
  .bottom { padding-top: 8px; }
  main { margin-left: 0; } header { height: auto; min-height: 52px; padding: 8px 16px; flex-wrap: wrap; }
  .header-right .date, .crumb { display: none; }
  .workspace { padding: 20px 16px; }
  .stats { gap: 10px; } .stat { padding: 14px; } .stat strong { font-size: 26px; }
  h1 { font-size: 24px; line-height: 30px; }
  .board, .form-grid { grid-template-columns: 1fr; }
  .footer { display: none; } .banner { flex-direction: column; align-items: flex-start; }
  .panel-head { padding: 16px; } .list-item { padding: 12px 16px; flex-wrap: wrap; }
  .desktop-only { display: none; } .mobile-only { display: block; }
  .toolbar { gap: 10px; } .toolbar select { width: 100%; } .sync { width: 100%; justify-content: space-between; }
  .legend .hint { display: none; } .detail-modal dl { grid-template-columns: 1fr; gap: 2px; } .detail-modal dd { margin-bottom: 8px; }
  td, th { padding: 12px 14px; }
}
.row-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .row-top .chip { padding: 2px 8px 2px 6px; }
.inline .secondary { white-space: nowrap; }