/* Modos de uso e Ajustes */
body.no-figma label[for="staff-figma"],body.no-figma #staff-figma{display:none!important}
body.no-climate label[for="staff-climate"],body.no-climate #staff-climate,body.no-climate #staff-climate+.note,body.no-climate .di-mood,body.no-climate .staff-mood{display:none!important}
body.no-gains label[for="staff-gains"],body.no-gains #staff-gains,body.no-gains #staff-gains+.note{display:none!important}
body.no-dev #journey-dev-fields{display:none!important}
body.mode-equipe label[for="sent"]{display:none!important}

/* Ajustes */
html body .mode-section{margin:0 0 24px}
html body .mode-section h2{margin:0 0 8px}
html body .mode-section>.muted{margin:0 0 16px}
html body .mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
html body .mode-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:0;padding:20px;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);text-align:left;font-size:14px;line-height:20px;cursor:pointer;transition:border-color .15s,background .15s}
html body .mode-card:hover{border-color:color-mix(in srgb,var(--p) 50%,var(--line))}
html body .mode-card.is-on,html body .mode-card:has(input:checked){border-color:var(--p);background:var(--accent-container)}
html body .mode-card b{font-size:16px}
html body .mode-card>span:not(.mode-icon){color:var(--muted)}
html body .mode-card.is-on>span:not(.mode-icon),html body .mode-card:has(input:checked)>span:not(.mode-icon){color:var(--on-accent)}
html body .mode-card input{position:absolute;opacity:0;pointer-events:none}
html body .mode-card em{position:absolute;top:16px;right:16px;padding:2px 10px;border-radius:999px;background:var(--p);color:var(--on-primary);font-size:12px;font-style:normal;font-weight:650}
html body .mode-icon{font-size:28px;line-height:36px}
html body .mode-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line-soft)}
html body .mode-switch>div{display:flex;flex-direction:column;gap:2px}
html body .mode-switch span{color:var(--muted);font-size:13px}
html body .mode-switch button{position:relative;flex:none;width:52px;height:32px;min-height:32px;padding:0;border:2px solid var(--line);border-radius:999px;background:var(--surface-3);cursor:pointer;transition:background .15s,border-color .15s}
html body .mode-switch button>span{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
html body .mode-switch button[aria-checked="true"]{border-color:var(--p);background:var(--p)}
html body .mode-switch button[aria-checked="true"]>span{transform:translateX(20px);background:var(--on-primary)}

/* Boas-vindas */
html body dialog.mode-welcome{width:min(640px,calc(100vw - 32px));padding:32px;border:1px solid var(--line-soft);border-radius:24px;background:var(--surface);color:var(--ink)}
html body .mode-welcome h2{margin:0 0 8px;font-size:24px;line-height:32px}
html body .mode-welcome label[for="mode-name"]{display:block;margin:24px 0 8px;font-weight:600}
html body .mode-welcome #mode-name{width:100%;min-height:48px;font-size:16px}
html body .mode-welcome .mode-q{margin:24px 0 0;font-weight:600}
html body .mode-welcome .auth-fine{margin:16px 0 0;color:var(--muted);font-size:12px}
html body .mode-welcome .actions{display:flex;justify-content:flex-end;margin-top:24px}
html body .mode-welcome .actions .primary{min-height:48px;padding:0 32px;font-size:15px}

@media (max-width:760px){
  html body aside nav#nav{grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important}
  html body aside nav#nav .nav>span{width:56px}
  html body aside nav#nav .nav{font-size:11px}
  html body dialog.mode-welcome{padding:24px}
}

body.mode-equipe .person-kind,body.mode-equipe label[for="decision-kind"],body.mode-equipe #decision-kind{display:none!important}
