/* Benerra Academy: Admin (A.8). Frame, filters and tables, forms, permission matrix, media library, person card,
   dashboard, roles, view-as, topics, ratings, settings. Working tokens only (no colour values here), frames not
   shadows, radius <= 14 px, logical properties. Symmetry (C4.7): rows of one table or list share one height. */

/* =================================================================== frame: left column + content */
.adm { display: grid; grid-template-columns: var(--admin-nav) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
.adm-main { min-width: 0; }
.adm-body { display: flex; flex-direction: column; min-width: 0; }
.adm-head.page-head { margin-block-end: var(--space-6); }
.adm-head .page-lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 100%; }

.adm-nav {
  position: sticky; inset-block-start: calc(var(--topbar-h) + var(--space-4));
  max-block-size: calc(100dvh - var(--topbar-h) - var(--space-8)); overflow-y: auto; padding-block-end: var(--space-4);
}
.adm--viewas .adm-nav { inset-block-start: calc(var(--topbar-h) + var(--viewas-h) + var(--space-4)); max-block-size: calc(100dvh - var(--topbar-h) - var(--viewas-h) - var(--space-8)); }
.adm-nav__toggle { display: none; }
.adm-nav__list { display: flex; flex-direction: column; gap: 2px; }
.adm-nav__group { display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--space-5); }
.adm-nav__heading { padding-inline: 12px; margin-block-end: var(--space-1); }
.adm-nav__item {
  position: relative; display: flex; align-items: center; gap: 10px; min-block-size: var(--row-nav); padding-inline: 12px;
  border-radius: var(--radius-control); color: var(--text-2); font-weight: var(--fw-medium); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.adm-nav__item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.adm-nav__item.is-active { background: var(--surface-2); color: var(--text); }
.adm-nav__item.is-active::before { content: ""; position: absolute; inset-block: 8px; inset-inline-start: 0; inline-size: 3px; border-radius: 2px; background: var(--accent); }
.adm-nav__icon { flex: none; color: var(--text-muted); }
.adm-nav__item.is-active .adm-nav__icon { color: var(--accent-text); }
.adm-nav__label { min-width: 0; }

.adm-banner { display: none; }
@media (max-width: 1023px) {
  .adm { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .adm-nav { position: static; max-block-size: none; overflow: visible; padding: 0; }
  .adm-nav__toggle {
    display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: var(--control-h); padding-inline: var(--space-4);
    border: 0; border-radius: var(--radius-control); background: var(--surface); color: var(--text); box-shadow: var(--frame-strong); font-weight: var(--fw-medium); text-align: start;
  }
  .adm-nav__current { flex: 1 1 auto; min-width: 0; }
  .adm-nav__chev { flex: none; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease-out); }
  .adm-nav.is-open .adm-nav__chev { transform: rotate(180deg); }
  .adm-nav__list { display: none; margin-block-start: var(--space-2); padding: var(--space-2); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
  .adm-nav.is-open .adm-nav__list { display: flex; }
  .adm-nav__group { margin-block-start: var(--space-3); }
  .adm-banner {
    display: flex; align-items: flex-start; gap: var(--space-3); margin-block-end: var(--space-5); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card); background: var(--brand-soft); color: var(--text);
  }
  .adm-banner__icon { flex: none; margin-block-start: 2px; color: var(--text-2); }
  .adm-banner__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
  .adm-banner__title { font-weight: var(--fw-semibold); }
  .adm-head .page-lead { white-space: normal; }
}

/* =================================================================== filters and paged tables */
.adm-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); margin-block-end: var(--space-5); }
.adm-search { position: relative; flex: 1 1 260px; max-inline-size: 380px; min-width: 0; }
.adm-search__icon { position: absolute; inset-block-start: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.adm-search__input { padding-inline-start: 42px; }
.adm-filter { display: flex; flex-direction: column; gap: 6px; flex: 0 1 190px; min-width: 0; }
.adm-filter--date { flex-basis: 168px; }
.adm-filter--seg { flex: 0 0 auto; }
.adm-filter--seg .seg { flex-wrap: nowrap; }
.adm-filters__extra { margin-inline-start: auto; }
.adm-date { min-inline-size: 140px; }

.adm-table { min-width: 0; }
.adm-table__body { min-width: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.adm-table.is-loading .adm-table__body { opacity: .55; }
.adm-table__foot, .adm-picker__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-5); }
.adm-table__foot:empty { display: none; }
.adm-table__foot .pagination, .adm-picker__foot .pagination, .adm-media__foot .pagination { margin: 0; }
.adm-table__total { font-size: var(--fs-sm); }
.dt__cell > .dt__link { display: block; min-width: 0; max-inline-size: 100%; }
.dt__cell { max-inline-size: none; }
@media (min-width: 1024px) { .dt__cell { max-inline-size: var(--cell-max, none); } }
.dt__cell > .badge, .dt__cell > .adm-icons, .dt__cell > .adm-avg, .dt__cell > .btn { align-self: flex-start; }
.dt__end .dt__cell > .badge, .dt__end .dt__cell > .adm-icons, .dt__end .dt__cell > .btn { align-self: flex-end; }
.dt__cell > .adm-two, .dt__cell > .person { max-inline-size: 100%; }
.adm-link { color: var(--brand-text); font-weight: var(--fw-medium); }
.adm-namebtn {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: var(--fw-medium); text-align: start;
}
.adm-namebtn:hover { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
/* C4.7.6 visible focus: a cell clips its content (.dt__cell overflow: hidden, components.css), so a ring drawn
   outside the control lost its top and bottom. In a table cell the ring lies inside the control, as the row link
   (.dt__link::after) and the tabs draw theirs. */
.adm .dt__cell :focus-visible { outline-offset: -2px; }

/* person chip, two-line cells, small cell parts */
.person { display: flex; align-items: center; gap: 10px; min-width: 0; max-inline-size: 100%; color: inherit; text-decoration: none; }
.person__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 1px; }
.person__name { font-weight: var(--fw-medium); line-height: 1.3; }
.person__sub { font-size: var(--fs-xs); line-height: 1.3; color: var(--text-muted); }
.person--sm .avatar { inline-size: 28px; block-size: 28px; font-size: 11px; }
.person--link:hover .person__name { text-decoration: underline; text-underline-offset: 3px; }
.adm-two { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-inline-size: 100%; }
.adm-two__first { font-weight: var(--fw-medium); line-height: 1.3; }
.adm-two__second { font-size: var(--fs-xs); line-height: 1.3; }
.adm-two__second .adm-link { font-weight: var(--fw-regular); }
.adm-progress-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-progress-cell .progress { flex: 1 1 auto; min-inline-size: 40px; }
.adm-progress-cell__value { flex: none; min-inline-size: 40px; font-size: var(--fs-sm); text-align: end; white-space: nowrap; }
/* one audit change ("Field: was → now") is its own direction run: the lines and the " · " between them stay in order */
.adm-change { unicode-bidi: isolate; }
.adm-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm-who > .person { flex: 1 1 auto; }
.adm-who > .badge { flex: none; }
.adm-icons { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.adm-icons .btn { flex: none; }
.adm-slot { display: inline-block; flex: none; inline-size: var(--icon-btn-sm); block-size: var(--icon-btn-sm); }
.adm-slot--wide { inline-size: 120px; }
.adm-avg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.adm-avg .stars { flex: none; }
.adm-avg__count { font-size: var(--fs-xs); }

/* =================================================================== forms */
.adm-form { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.adm-row { display: grid; grid-template-columns: minmax(160px, 280px) minmax(0, 1fr); gap: var(--space-2) var(--space-8); align-items: start; min-width: 0; }
.adm-row__label { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-block-start: 12px; }
.adm-row__hint { font-size: var(--fs-sm); color: var(--text-muted); }
.adm-row__control { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; max-inline-size: 560px; }
.adm-row__error { margin: 0; }
.adm-row__control .adm-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.adm-row__control .adm-row__label { padding-block-start: 0; }
.adm-form > .btn, .adm-role-editor .adm-form > .btn { align-self: flex-start; }
.adm-row--switch { display: block; }
.adm-row--switch .check { max-inline-size: 720px; }
.adm-row.has-error .input, .adm-row.has-error .select { box-shadow: var(--frame-danger); }
.adm-form .adm-langblock { display: flex; flex-direction: column; gap: var(--space-4); padding-block-end: var(--space-5); box-shadow: inset 0 -1px 0 var(--line-soft); }
.adm-form .adm-langblock:last-of-type { box-shadow: none; padding-block-end: 0; }
.adm-titles { display: flex; flex-direction: column; gap: var(--space-3); }
.adm-checks, .adm-checklist { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.adm-checklist { max-block-size: 260px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--frame-strong); }
.adm-numwrap { display: flex; align-items: center; gap: 10px; }
.adm-numwrap .input { max-inline-size: 160px; }
.adm-pw { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.adm-pw__input { flex: 1 1 180px; font-family: var(--font-mono); letter-spacing: .06em; }
.adm-derived { display: flex; flex-direction: column; gap: var(--space-2); }
.adm-matrix-host { min-width: 0; }

.adm-savebar {
  position: sticky; inset-block-end: var(--space-3); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-4); margin-block-start: var(--space-6); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame-strong);
}
.adm-savebar.is-dirty { box-shadow: var(--frame-brand-2); }
.adm-savebar__status { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.adm-savebar__status.is-warn { color: var(--warn-text); }
.adm-savebar__status.is-danger { color: var(--danger-text); }
.adm-savebar__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-inline-start: auto; }
@media (max-width: 719px) {
  .adm-row { grid-template-columns: minmax(0, 1fr); }
  .adm-row__label { padding-block-start: 0; }
  .adm-savebar__actions { inline-size: 100%; flex-direction: column-reverse; }
  .adm-savebar__actions .btn { inline-size: 100%; }
}
@media (max-width: 719px) {
  .adm-filters { gap: var(--space-3); }
  .adm-search { flex-basis: 100%; max-inline-size: none; }
  .adm-filter { flex: 1 1 140px; }
  .adm-filters__extra { margin-inline-start: 0; }
}

/* =================================================================== permission matrix (22 ticks, 5 groups) */
.adm-matrix { display: flex; flex-direction: column; gap: var(--space-5); }
.adm-matrix__group { padding: var(--space-4) var(--space-5) var(--space-3); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame); }
.adm-matrix__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-2); }
.adm-matrix__title { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.adm-matrix__count { font-size: var(--fs-sm); color: var(--text-muted); }
.adm-matrix__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); column-gap: var(--space-8); margin: 0; padding: 0; }
.adm-perm {
  display: flex; align-items: center; gap: var(--space-3); block-size: var(--row-list-2); min-width: 0; box-shadow: inset 0 -1px 0 var(--line-soft);
}
.adm-perm__no { flex: none; inline-size: 22px; font-size: var(--fs-xs); color: var(--text-faint); text-align: end; }
.adm-perm .check { flex: 1 1 auto; min-width: 0; align-items: center; }
.adm-perm .check__text { min-width: 0; gap: 1px; }
.adm-perm .check__label, .adm-perm .check__hint { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.adm-perm .check__label { font-weight: var(--fw-medium); }
.adm-perm .check__hint { font-size: var(--fs-xs); }
.adm-perm.is-inactive .check__label { color: var(--text-faint); }
.adm-perm__lock { flex: none; color: var(--text-muted); }

/* =================================================================== media library */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--space-4); }
.adm-tile {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border: 0; border-radius: var(--radius-card);
  background: var(--surface); color: inherit; box-shadow: var(--frame); text-align: start;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.adm-tile:hover { background: var(--surface-hover); }
.adm-tile.is-selected { box-shadow: var(--frame-brand-2); }
.adm-tile__name { padding-inline: 4px; font-weight: var(--fw-medium); line-height: 1.3; }
.adm-tile__meta { padding-inline: 4px; font-size: var(--fs-xs); }
.adm-thumb { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-2); color: var(--text-muted); }
.adm-thumb__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.adm-thumb__icon { display: grid; place-items: center; }
.adm-thumb--row { flex: none; inline-size: 56px; aspect-ratio: 1; }
.adm-media__results { min-width: 0; }
.adm-media__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: var(--space-5); }
.adm-media__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.adm-media__space { font-size: var(--fs-sm); }
.adm-media-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.adm-media-detail__img, .adm-media-detail__video { inline-size: 100%; max-block-size: 340px; object-fit: contain; border-radius: var(--radius-control); background: var(--surface-2); }
.adm-media-detail__icon { display: grid; place-items: center; padding: var(--space-6); border-radius: var(--radius-control); background: var(--surface-2); }
.adm-media-detail__icon .adm-thumb { inline-size: 160px; }
.adm-media-detail__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3) var(--space-5); margin: 0; }
.adm-media-detail__fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-media-detail__fact dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.adm-media-detail__fact dd { margin: 0; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.adm-media-detail__used { margin-block-start: var(--space-2); }
.adm-media-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; }
.adm-usage { display: flex; flex-direction: column; margin: 0; padding: 0; }
.adm-usage__row { display: flex; align-items: center; block-size: var(--row-nav); min-width: 0; box-shadow: inset 0 -1px 0 var(--line-soft); }

.adm-upload { display: flex; flex-direction: column; gap: var(--space-3); margin-block-end: var(--space-5); }
.adm-upload__zone { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--frame-strong); color: var(--text-2); transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.adm-upload__zone.is-over { background: var(--brand-soft); box-shadow: var(--frame-brand-2); }
.adm-upload__hint { flex: 1 1 200px; min-width: 0; }
.adm-upload--compact .adm-upload__zone { padding: var(--space-3) var(--space-4); }
.adm-upload__queue { display: flex; flex-direction: column; margin: 0; padding: 0; }
.adm-upload__queue:empty { display: none; }
.adm-upload__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 160px) minmax(0, 220px); align-items: center; gap: var(--space-3); block-size: 44px; box-shadow: inset 0 -1px 0 var(--line-soft); }
.adm-upload__bar { display: block; min-width: 0; }
.adm-upload__status { font-size: var(--fs-sm); color: var(--text-muted); }
.adm-upload__row.is-failed .adm-upload__status { color: var(--danger-text); }
.adm-upload__row.is-failed .adm-upload__bar { color: var(--danger); }
.adm-upload__row.is-duplicate .adm-upload__status { color: var(--text-2); }
.adm-picker { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.adm-picker .adm-filters { margin-block-end: 0; }
.adm-picker .adm-upload { margin-block-end: 0; }
.adm-picker__scroll { min-block-size: 220px; max-block-size: 50dvh; padding: 2px; }
.adm-picker__foot { margin-block-start: 0; }
.adm-picker__empty { padding-block: var(--space-8); }
.adm-picker__notice:empty { display: none; }

/* cover field */
.adm-cover { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; max-inline-size: 420px; }
.adm-cover__preview { display: grid; place-items: center; inline-size: 100%; aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-control); background: var(--surface-2); box-shadow: var(--frame); color: var(--text-muted); }
.adm-cover__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.adm-cover__caption { font-size: var(--fs-sm); }
.adm-cover__hint { margin-block-start: calc(-1 * var(--space-2)); font-size: var(--fs-sm); }
.adm-cover__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* invitation card */
.adm-invite { display: flex; flex-direction: column; gap: var(--space-4); }
.adm-invite__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.adm-invite__facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-invite__facts dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.adm-invite__facts dd { margin: 0; font-weight: var(--fw-medium); }
.adm-invite__text { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.55; resize: none; }
.adm-invite__hint { margin: 0; }
@media (max-width: 519px) { .adm-invite__facts { grid-template-columns: minmax(0, 1fr); } }

/* =================================================================== person card */
.adm-user { display: flex; flex-direction: column; gap: var(--space-10); min-width: 0; }
.adm-user-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gutter); align-items: stretch; }
.adm-user-account { min-width: 0; }
.adm-user-activity { min-block-size: 380px; min-width: 0; }
.adm-act-wrap { position: relative; flex: 1 1 0; min-block-size: 0; }
.adm-act-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.adm-act { margin: 0; padding: 0; }
.adm-act__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: var(--space-3); block-size: var(--row-list); box-shadow: inset 0 -1px 0 var(--line-soft); }
.adm-act__when { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-act__empty { display: flex; align-items: center; block-size: var(--row-list); }
.adm-act__more { display: flex; justify-content: center; padding-block: var(--space-4); }
.adm-act__more:empty { display: none; }
.adm-kv { display: flex; flex-direction: column; margin: 0; }
.adm-kv__row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; column-gap: var(--space-4); block-size: var(--row-list); box-shadow: inset 0 -1px 0 var(--line-soft); }
.adm-kv__label { font-size: var(--fs-sm); color: var(--text-muted); }
.adm-kv__value { margin: 0; min-width: 0; font-weight: var(--fw-medium); }
.adm-kv__value .badge { vertical-align: middle; }
.adm-pwrow { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--fw-regular); }
.adm-pwrow > .btn { flex: none; }
.adm-pwrow > .ell { flex: 1 1 auto; }
.adm-pwrow__mask { flex: 1 1 auto; min-width: 0; letter-spacing: .12em; color: var(--text-muted); overflow: hidden; }
/* a shown password is never cut (C4.8.3 #5): the row grows while it is shown, the value keeps its whole width (a very
   long one breaks between characters), Copy and Hide follow it and wrap under it when the column is narrow, and the
   countdown takes a line of its own */
.adm-kv__row--password.is-revealed { block-size: auto; min-block-size: var(--row-list); padding-block: var(--space-2); }
.adm-pwrow.is-revealed { flex-wrap: wrap; row-gap: 6px; }
.adm-pwrow__secret {
  flex: none; max-inline-size: 100%; padding: 4px 8px; white-space: normal; overflow-wrap: anywhere; word-break: break-all;
  border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-body);
  letter-spacing: .04em; user-select: all; -webkit-user-select: all;
}
/* Copy and Hide stay on the value's line when they fit; otherwise they take the next line, never wider than the
   column, and Hide wraps under Copy (the fr and es labels crossed the card border at 1024 px while this was flex: none) */
.adm-pwrow__btns { display: inline-flex; flex: 0 1 auto; max-inline-size: 100%; flex-wrap: wrap; gap: var(--space-2); }
.adm-pwrow__btns > .btn { flex: none; max-inline-size: 100%; }
.adm-pwrow__count { flex: 1 0 100%; min-width: 0; font-size: var(--fs-xs); line-height: 1.4; }
.adm-user-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.adm-sub { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-6); }
.adm-rows { display: flex; flex-direction: column; margin: 0; padding: 0; }
.adm-rows__row { display: flex; align-items: center; gap: var(--space-3); block-size: var(--row-list); min-width: 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
.adm-rows__row > .ell { flex: 1 1 auto; }
.adm-rows__row > .badge, .adm-rows__row > .btn, .adm-rows__row > .adm-slot { flex: none; }
.adm-rows__end { flex: none; margin-inline-start: auto; font-size: var(--fs-sm); }
.adm-rows__row--attempt { block-size: var(--row-table); }
.adm-listbox { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.adm-listbox .adm-rows { inline-size: 100%; }
.adm-qa { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-4) 0 0; padding: 0; counter-reset: qa; }
.adm-qa__q { display: flex; flex-direction: column; gap: var(--space-2); counter-increment: qa; }
.adm-qa__text { font-weight: var(--fw-semibold); }
.adm-qa__text::before { content: counter(qa) ". "; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.adm-qa__opts { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
.adm-qa__opt { display: flex; align-items: center; gap: var(--space-3); padding: 8px 12px; border-radius: var(--radius-control); background: var(--surface-2); }
.adm-qa__opt.is-correct { box-shadow: var(--frame-brand-2); }
.adm-qa__opt.is-chosen:not(.is-correct) { box-shadow: var(--frame-danger); }
.adm-qa__mark { flex: none; color: var(--text-muted); }
.adm-qa__opt.is-correct .adm-qa__mark { color: var(--brand); }
.adm-qa__opt.is-chosen:not(.is-correct) .adm-qa__mark { color: var(--danger); }
.adm-qa__label { flex: 1 1 auto; min-width: 0; }
@media (max-width: 1023px) {
  .adm-user-top { grid-template-columns: minmax(0, 1fr); }
  .adm-act-wrap { flex: none; block-size: 360px; }
  .adm-user-activity { min-block-size: 0; }
}
@media (max-width: 639px) {
  .adm-kv__row { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 0; block-size: var(--row-list-2); }
  .adm-act__row { grid-template-columns: minmax(0, 1fr); align-content: center; row-gap: 0; block-size: var(--row-list-2); }
}

/* =================================================================== dashboard, roles, view as, topics, ratings, settings */
.adm-dash { display: flex; flex-direction: column; gap: var(--space-10); }
.adm-dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.adm-dash-card { min-block-size: 200px; }
.adm-dash-card .card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.adm-dash-card__icon { order: -1; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--text-2); box-shadow: var(--frame); }
/* one line: the number keeps its width, a unit too long for the card (counts in the millions) ends in "…" with a tooltip,
   so no figure wraps and the figures of one row stay level (C4.7.1) */
.adm-dash-card__figure { display: inline-flex; align-items: baseline; gap: var(--space-2); min-width: 0; max-inline-size: 100%; }
.adm-dash-card__figure > .num { flex: none; }
.adm-dash-card__unit { min-width: 0; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.adm-roles, .adm-topics, .adm-viewas, .adm-ratings { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; }
.adm-role-editor { display: flex; flex-direction: column; gap: var(--space-6); }
.adm-viewas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.adm-viewas-card .card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; line-height: 1.55; min-block-size: calc(3 * 1.55em); }
.adm-viewas-card .card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.3; min-block-size: calc(2 * 1.3em); }
.adm-viewas-card .btn { max-inline-size: 100%; min-width: 0; overflow: hidden; }
.adm-viewas-card .btn__label { overflow: hidden; text-overflow: ellipsis; }
.adm-viewas-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.adm-viewas-card__meta .badge { flex: 0 1 auto; min-width: 0; }
.adm-viewas-card__count { flex: none; white-space: nowrap; }
.adm-viewas-tab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); }
.adm-ratings { gap: var(--space-5); }
.adm-ratings__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.adm-ratings__h { margin-block-start: var(--space-4); }
.adm-ratings__tabs { margin-block-end: var(--space-5); }
.adm-feedback { display: flex; flex-direction: column; gap: var(--space-3); }
.adm-feedback__when { font-size: var(--fs-sm); }
.adm-feedback__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-settings { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.adm-fixed { display: flex; flex-direction: column; margin: 0; padding: 0; }
.adm-fixed__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); block-size: var(--row-list); min-width: 0; box-shadow: inset 0 -1px 0 var(--line-soft); }
.adm-fixed__row:last-child { box-shadow: none; }
.adm-fixed__row .badge { flex: none; }

/* full text on tap (core/tap-title.js) */
.tap-title {
  position: fixed; z-index: var(--z-dropdown); max-inline-size: min(320px, calc(100% - 16px)); padding: 8px 12px;
  border-radius: var(--radius-control); background: var(--surface); color: var(--text); box-shadow: var(--frame-strong);
  font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-line; pointer-events: none;
}