/* roles widget: a role picker and a phone tab bar. Selectors are all under .w-roles. */
.w-roles{display:grid;gap:12px}
.w-roles-list{margin:0;padding-left:1.2em;font:400 17px/1.4 var(--serif)}
.w-roles-ui{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:center}
.w-roles-ui[hidden]{display:none}
.w-roles-pick{display:grid;gap:8px}
.w-roles-r{min-height:48px;border:3px solid var(--ink);border-radius:6px;background:var(--card);color:var(--ink);font:700 17px var(--sans);text-align:left;padding:0 14px;cursor:pointer;transition:transform var(--t-fast) var(--ease-snap),box-shadow var(--t-fast)}
.w-roles-r[aria-checked=true]{background:var(--ink);color:var(--paper-hi);box-shadow:4px 4px 0 var(--warm)}
.w-roles-r:active{transform:scale(.97)}
.w-roles-phone{border:3px solid var(--ink);border-radius:22px;background:var(--paper-hi);box-shadow:var(--shadow);overflow:hidden;display:grid}
.w-roles-title{margin:0;padding:8px;text-align:center;font:600 13px var(--sans);border-bottom:3px solid var(--ink)}
.w-roles-screen{display:grid;gap:8px;padding:14px;min-height:150px;align-content:start}
.w-roles-screen i{display:block;height:14px;border:2px solid var(--ink);background:var(--card)}
.w-roles-screen i:nth-child(2){width:80%}.w-roles-screen i:nth-child(3){width:55%}
.w-roles-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:3px solid var(--ink)}
.w-roles-tabs span{display:grid;place-items:center;min-height:52px;padding:0 2px;font:700 12px var(--sans);border-left:1.5px solid rgba(23,35,46,.4)}
.w-roles-tabs span:first-child{border-left:0}
.w-roles-tabs span:nth-child(1){box-shadow:inset 0 -5px 0 var(--warm)}.w-roles-tabs span:nth-child(2){box-shadow:inset 0 -5px 0 var(--spark)}.w-roles-tabs span:nth-child(3){box-shadow:inset 0 -5px 0 var(--go)}.w-roles-tabs span:nth-child(4){box-shadow:inset 0 -5px 0 var(--water)}.w-roles-tabs span:nth-child(5){box-shadow:inset 0 -5px 0 var(--ink2)}
.w-roles-tabs span.team{background:var(--spark)}
.w-roles-tabs span.slide{animation:w-roles-in var(--t-base) var(--ease)}
@keyframes w-roles-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:520px){.w-roles-ui{grid-template-columns:minmax(0,1fr)}.w-roles-pick{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.w-roles-r{transition:none}.w-roles-tabs span.slide{animation:none}}