/* The «Cuentas» staff tools at tool volume: the people search (/admin/users, /scpsl/players), the roles
   (/admin/roles: rows, the role form, the permission matrix and the permissions dialog) and the account sections
   of the staff profile (/admin/profile/{id}). Built on the Sistema tools pieces (admin-tools.css, pn-tool-): a status
   line, hairline rows on the page (never cards), forms in place. Tokens only, so light and dark both work.
   The toolbar, hint, summary, badge, copy and pager pieces are shared with the other staff lists (appeals, reports,
   sanctions, alerts). */

/* ---------- Toolbar (shared) ---------- */

.pn-dir-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 16px;
}

.pn-dir-toolbar .pn-search {
    flex: 1 1 320px;
    min-width: 0;
}

.pn-dir-selects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pn-dir-selects .mud-input-control {
    width: 180px;
    margin: 0;
}

.pn-dir-hint {
    margin: 6px 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.pn-dir-hint code,
.pn-dir-hint kbd {
    padding: 0 4px;
    border-radius: var(--pn-radius-sm);
    background: var(--mud-palette-background-gray);
    font-family: var(--pn-font-mono);
    font-size: .75rem;
    color: var(--mud-palette-text-primary);
}

.pn-dir-hint kbd { border: 1px solid var(--pn-line); }

/* The "/" shortcut means nothing on a touch screen. */
@media (hover: none), (pointer: coarse) {
    .pn-dir-keyhint { display: none; }
}

.pn-dir-filters {
    margin-top: 12px;
}

.pn-chip-count {
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-background-gray);
    font-size: .75rem;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pn-chip-filter[aria-pressed="true"] .pn-chip-count { background: var(--mud-palette-surface); }

/* The live dot of the «En directo» chip and of «Jugando ahora». */
.pn-dir-livedot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pn-data);
}

.pn-dir-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 8px;
    margin: 12px 0 4px;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-dir-summary .pn-tool-count { margin: 0; }

.pn-dir-summary strong {
    color: var(--mud-palette-text-primary);
}

/* The order toggle beside the selects: a 40px target (44px on touch). */
.pn-dir-order.mud-icon-button { width: 40px; height: 40px; }

@media (pointer: coarse) {
    .pn-dir-order.mud-icon-button { width: 44px; height: 44px; }
}

/* ---------- Status pills of the other staff lists (shared) ---------- */

.pn-dir-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--pn-radius-pill);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.pn-dir-badge .mud-icon-root { font-size: .9rem; }

/* ---------- People rows ---------- */

.pn-dir {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--pn-line);
    transition: opacity var(--pn-dur-fast) ease;
}

.pn-dir[aria-busy="true"] {
    opacity: .55;
}

.pn-dir-row {
    display: grid;
    grid-template-columns: minmax(240px, 2.2fr) minmax(140px, 1.4fr) minmax(120px, 1.1fr) minmax(130px, 1fr) auto;
    grid-template-areas: "who roles status when actions" "extra extra extra extra extra";
    align-items: center;
    gap: 0 16px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--pn-line);
    transition: background-color var(--pn-dur-fast) ease;
}

/* The person an id search named exactly: a quiet wash, the pill says why. */
.pn-dir-row[data-exact] { background: var(--pn-brand-soft); }

@media (hover: hover) and (pointer: fine) {
    .pn-dir-row:hover { background: var(--mud-palette-action-default-hover); }
}

.pn-dir-who { grid-area: who; display: flex; align-items: center; gap: 12px; min-width: 0; }
.pn-dir-roles { grid-area: roles; }
.pn-dir-status { grid-area: status; }
.pn-dir-when { grid-area: when; }
.pn-dir-actions { grid-area: actions; }
.pn-dir-extra { grid-area: extra; min-width: 0; }

.pn-dir-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.pn-dir-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pn-dir-live {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--mud-palette-surface);
    border-radius: 50%;
    background: var(--pn-data);
}

.pn-dir-name {
    min-width: 0;
}

.pn-dir-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    margin: 0;
}

.pn-dir-title a {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pn-dir-title a:hover { color: var(--pn-brand-text); text-decoration: underline; text-underline-offset: 2px; }

.pn-dir-title a:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

.pn-dir-id {
    font-family: var(--pn-font-mono);
    font-size: .75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.pn-dir-alias {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pn-dir-alias .mud-icon-root { font-size: 1rem; }

.pn-dir-ids {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
    margin-top: 2px;
}

/* An id to copy: the id itself in mono, a 32px target (44px on touch). Shared with the report pane. */
.pn-dir-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 6px;
    margin: 0 -6px;
    border: 0;
    border-radius: var(--pn-radius-sm);
    background: none;
    color: var(--mud-palette-text-secondary);
    font-family: var(--pn-font-mono);
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-dir-copy + .pn-dir-copy { margin-left: 4px; }

.pn-dir-copy .mud-icon-root { font-size: 1rem; }

.pn-dir-copy:active { transform: scale(.97); }

.pn-dir-copy:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
    .pn-dir-copy:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
}

@media (pointer: coarse) {
    .pn-dir-copy { min-height: 44px; }
}

.pn-dir-muted {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pn-dir-muted .mud-icon-root { font-size: 1rem; }

.pn-dir-roles,
.pn-dir-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.pn-dir-rolelist {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A role as a quiet pill: its own colour only as a dot (staff data), so any colour reads. */
.pn-dir-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px 0 8px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-pill);
    background: var(--mud-palette-surface);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}

.pn-dir-role .mud-icon-root { font-size: .9rem; color: var(--mud-palette-text-secondary); }

.pn-dir-more {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 4px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

a.pn-dir-alerts { text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
    a.pn-dir-alerts:hover { text-decoration: underline; text-underline-offset: 2px; }
}

.pn-dir-history {
    display: inline-flex;
    gap: 8px;
}

.pn-dir-n {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-dir-n .mud-icon-root { font-size: 1rem; }
.pn-dir-n[data-on="bad"] { color: var(--mud-palette-error); font-weight: 600; }
.pn-dir-n[data-on="warn"] { color: var(--mud-palette-warning); font-weight: 600; }
.pn-dir-n[data-on="info"] { color: var(--mud-palette-info); font-weight: 600; }

.pn-dir-when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .8125rem;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.pn-dir-when small {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

.pn-dir-online {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--pn-data);
}

.pn-dir-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* «Más acciones» stays a 40px target beside a small outlined button (44px on touch). */
.pn-dir-more-actions .mud-icon-button { width: 40px; height: 40px; }

@media (pointer: coarse) {
    .pn-dir-more-actions .mud-icon-button { width: 44px; height: 44px; }
}

.pn-dir-pager {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

.pn-tool-pager { overflow-x: auto; }

/* Tablets: roles and status share a column. */
@media (max-width: 1099.98px) {
    .pn-dir-row {
        grid-template-columns: minmax(220px, 2fr) minmax(160px, 1.6fr) minmax(120px, 1fr) auto;
        grid-template-areas:
            "who roles when actions"
            "who status when actions"
            "extra extra extra extra";
        gap: 4px 16px;
    }
}

/* Phones: one stacked row per person, the actions under the name. */
@media (max-width: 599.98px) {
    .pn-dir-row {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "who" "roles" "status" "when" "actions" "extra";
        gap: 8px;
        padding: 12px 4px;
    }

    .pn-dir-status:empty { display: none; }
    .pn-dir-when { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
    .pn-dir-actions { justify-content: flex-start; }
    .pn-dir-selects { width: 100%; }
    .pn-dir-selects .mud-input-control { width: auto; flex: 1 1 calc(50% - 4px); min-width: 140px; }
}

/* ---------- Roles ---------- */

.pn-role-dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* The weight in the row's mark, on a wash of the role's colour (staff data, --pn-role). */
.pn-tool-mark.pn-role-weight {
    width: auto;
    min-width: 44px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--pn-role) 40%, transparent);
    background: color-mix(in srgb, var(--pn-role) 12%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

.pn-tool-subhead + .pn-tool-list { margin-top: 0; }

/* The role form's preview line. */
.pn-role-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 16px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* The roles of one person (UserRolesForm): one checklist per kind, a changed role marked by a violet dot. */
.pn-role-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pn-role-count {
    margin-left: 8px;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-role-check { position: relative; }

.pn-role-check[data-changed]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.pn-role-check-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-role-check-weight {
    font-size: .75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-role-check-help {
    display: flex;
    flex-direction: column;
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pn-role-check-lock {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.pn-role-check-lock .mud-icon-root { font-size: 1rem; margin-top: 1px; }

.pn-role-diff {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    margin: 12px 0 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-role-diff strong { color: var(--mud-palette-text-primary); }

.pn-role-missing { margin: 12px 0 0; }

/* The restriction form is the one destructive form: its block takes the error tone's border. */
.pn-tool-form[data-tone="bad"] {
    border-color: rgba(var(--mud-palette-error-rgb), .4);
}

/* ---------- Permission matrix ---------- */

.pn-matrix-intro {
    margin: 0 0 12px;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-matrix-pick { display: none; }

.pn-matrix {
    overflow-x: auto;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
}

.pn-matrix:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.pn-matrix table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.pn-matrix th,
.pn-matrix td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--pn-line);
    text-align: center;
    white-space: nowrap;
}

.pn-matrix thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    font-weight: 600;
    vertical-align: bottom;
}

.pn-matrix thead th:first-child,
.pn-matrix tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    background: var(--mud-palette-surface);
    font-weight: 400;
}

.pn-matrix thead th:first-child { z-index: 3; font-weight: 600; }

.pn-matrix-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pn-matrix-perm {
    display: block;
    color: var(--mud-palette-text-primary);
    white-space: normal;
    min-width: 180px;
}

.pn-matrix tbody th[scope="row"] .pn-tool-mono { display: block; }

.pn-matrix tr.pn-matrix-group th {
    padding-top: 14px;
    background: var(--mud-palette-background-gray);
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: left;
}

.pn-matrix td { color: var(--mud-palette-text-disabled); }
.pn-matrix td[data-on] { color: var(--mud-palette-success); }

@media (hover: hover) and (pointer: fine) {
    .pn-matrix tbody tr:not(.pn-matrix-group):hover td,
    .pn-matrix tbody tr:not(.pn-matrix-group):hover th { background: var(--mud-palette-action-default-hover); }
}

/* Phones: one role at a time (the select above), the permission keys left out. */
@media (max-width: 599.98px) {
    .pn-matrix-pick { display: block; margin-bottom: 12px; }
    .pn-matrix-pick .mud-input-control { margin: 0; }
    .pn-matrix table:not([data-one]) th:nth-child(n+3),
    .pn-matrix table:not([data-one]) td:nth-child(n+3) { display: none; }
    .pn-matrix tbody th[scope="row"] .pn-tool-mono { display: none; }
    .pn-matrix-perm { min-width: 0; }
}

/* ---------- Permissions dialog ---------- */

.pn-perm-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pn-perm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.pn-perm-search { flex: 1 1 240px; }

.pn-perm-count {
    margin: 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-perm-groups {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    border-top: 1px solid var(--pn-line);
}

.pn-perm-group {
    margin: 0;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid var(--pn-line);
}

.pn-perm-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 0 4px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-perm-group-head small {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-perm-group-head .mud-button-root { margin-left: auto; }

.pn-perm-item {
    position: relative;
    padding: 2px 0;
}

.pn-perm-item[data-changed]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.pn-perm-item .mud-checkbox { align-items: flex-start; }

.pn-perm-text {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
    min-width: 0;
    line-height: 1.4;
}

.pn-perm-text strong {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-perm-text > span {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

.pn-perm-lock {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

.pn-perm-lock .mud-icon-root { font-size: 1rem; margin-top: 1px; }

.pn-perm-diff p {
    margin: 12px 0 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-perm-diff strong { color: var(--mud-palette-text-primary); }

/* ---------- Colour swatches (shared with ColorField) ---------- */

.pn-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--mud-palette-surface);
    border-radius: 50%;
    background: var(--pn-swatch);
    color: var(--pn-swatch-ink, var(--pn-on-dark));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--pn-dur-press) var(--pn-ease-out), outline-color var(--pn-dur-fast) ease;
}

.pn-swatch:active { transform: scale(.94); }

/* The chosen one: a ring in its own colour outside a surface gap (an outline, not a shadow). */
.pn-swatch.is-on {
    outline: 2px solid var(--pn-swatch);
    outline-offset: 1px;
}

.pn-swatch:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

@media (pointer: coarse) {
    .pn-swatch { width: 40px; height: 40px; }
}

/* ---------- Account sections (staff profile, «Mi cuenta») ---------- */

.pn-acct-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 32px;
}

@media (min-width: 1280px) {
    .pn-acct-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pn-acct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pn-acct-section .pn-tool-confirm { margin: 0 0 12px; }

.pn-acct-empty {
    margin: 0;
    padding: 12px 8px;
    border-top: 1px solid var(--pn-line);
    border-bottom: 1px solid var(--pn-line);
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-acct-card .pn-acct-empty { border: 0; padding: 4px 0; }

/* Inside the bordered section of «Mi cuenta» the hairline list loses its outer lines. */
.pn-acct-card .pn-tool-list { border-top: 0; }
.pn-acct-card .pn-tool-row:last-child { border-bottom: 0; }

.pn-acct-facts { margin-top: 0; }

.pn-acct-reason {
    margin: 2px 0 0;
    font-size: .875rem;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.pn-acct-more {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.pn-acct-timeline time { font-variant-numeric: tabular-nums; }

/* Key and value pairs (the player, the email): hairline rows, the label in the secondary colour. */
.pn-acct-kv {
    margin: 12px 0 0;
    border-top: 1px solid var(--pn-line);
}

.pn-acct-kv > div {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 4px 16px;
    min-height: 44px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--pn-line);
}

.pn-acct-kv dt {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.pn-acct-kv dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
}

.pn-acct-kv dd .pn-tool-mono { font-size: .8125rem; color: var(--mud-palette-text-primary); }

@media (max-width: 599.98px) {
    .pn-acct-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- Open sessions (/admin/sessions) ---------- */

.pn-sess-name {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    text-decoration: none;
}

.pn-sess-name:hover { color: var(--pn-brand-text); text-decoration: underline; text-underline-offset: 2px; }

.pn-sess-name:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

.pn-sess-device {
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

/* ---------- "Ver como rol" dialog ---------- */

.pn-preview-role-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: .875rem;
}

.pn-preview-role-label .mud-text-secondary {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .pn-dir,
    .pn-dir-row,
    .pn-dir-copy,
    .pn-swatch { transition: none; }
}