/* Spec 113: one look for hovered, pressed and selected elements in the signed-in app and the demo.
   The rules are written down in docs/UI_GUIDELINES.md. This sheet loads last and its selectors start
   with .page:is(.theme-dark, .theme-light), so they win over the older per-page theme overrides. */

.page.theme-light {
    --ui-accent: var(--tt-accent);
    --ui-accent-soft: var(--tt-accent-soft);
    --ui-text: var(--tt-ink);
}

.page.theme-dark {
    --ui-accent: var(--tt-accent);
    --ui-accent-soft: var(--tt-accent-soft);
    --ui-text: var(--tt-ink);
}

/* Touch screens: no blue tap flash; the pressed state below shows the tap instead. */
html {
    -webkit-tap-highlight-color: transparent;
}

/* 1. Buttons. Hover: the frame turns to the accent; nothing moves, fades or underlines. */
.page:is(.theme-dark, .theme-light) :is(.game-card-btn, .game-pager-btn, .home-cta, .pricing-btn, .pricing-btn-secondary,
    .upload-btn, .upload-file-action-btn, .chat-warning-btn, .chat-restore-btn, .pdf-note-open-btn, .pdf-setup-open-btn,
    .pdf-override-open-btn, .pdf-override-replace-btn, .pdf-dice-btn, .pdf-score-pad-btn, .pdf-note-page-btn, .pdf-note-delete-btn,
    .pdf-bgg-btn, .news-settings-btn, .news-mobile-filters-toggle):hover:not(:disabled) {
    transform: none;
    opacity: 1;
    border-color: var(--ui-accent);
    text-decoration: none;
}

/* Outlined (secondary) buttons also take the accent for their text, like the chat suggestions. */
.page:is(.theme-dark, .theme-light) :is(.game-card-btn-secondary, .home-cta-secondary, .game-pager-btn,
    .pricing-btn-secondary):hover:not(:disabled) {
    color: var(--ui-accent);
}

/* Filled (primary) buttons brighten a little instead. */
.page:is(.theme-dark, .theme-light) :is(.game-card-btn:not(.game-card-btn-secondary), .home-cta-primary,
    .pricing-btn):hover:not(:disabled) {
    filter: brightness(1.05);
}

/* Pressed: a short darkening while the pointer is down. */
.page:is(.theme-dark, .theme-light) :is(.game-card-btn, .game-pager-btn, .home-cta, .pricing-btn, .pricing-btn-secondary,
    .upload-btn, .pdf-note-open-btn, .pdf-setup-open-btn, .pdf-override-open-btn, .pdf-override-replace-btn,
    .pdf-dice-btn, .pdf-score-pad-btn):active:not(:disabled) {
    transform: none;
    filter: brightness(0.94);
}

/* Danger: outlined for the first step (delete a friend), filled only for the confirming step. */
.page.theme-light {
    --ui-danger: var(--tt-danger);
}

.page.theme-dark {
    --ui-danger: var(--tt-danger);
}

.page:is(.theme-dark, .theme-light) .game-card-btn.game-card-btn-secondary.is-danger {
    color: var(--ui-danger);
    border-color: color-mix(in srgb, var(--ui-danger) 55%, transparent);
}

.page:is(.theme-dark, .theme-light) .game-card-btn.game-card-btn-secondary.is-danger:hover:not(:disabled) {
    color: var(--ui-danger);
    border-color: var(--ui-danger);
}

.page:is(.theme-dark, .theme-light) .game-card-btn.game-card-btn-danger {
    background: var(--tt-danger-fill);
    border: 1px solid var(--tt-danger);
    color: #fff;
    box-shadow: none;
}

.page:is(.theme-dark, .theme-light) .game-card-btn.game-card-btn-danger:hover:not(:disabled) {
    border-color: var(--ui-danger);
    filter: brightness(1.08);
}

/* 2. Chips, tabs, tiles and rows you pick from. Hover: the accent frame. */
.page:is(.theme-dark, .theme-light) :is(.chat-suggestion, .ranking-tab-btn, .ranking-history-btn, .upload-lang-tab, .pdf-tab,
    .pdf-reader-tool, .news-type-btn, .news-lang-btn, .news-sources-toggle, .news-source-chip, .news-digest-calendar-day, .planner-day, .planner-date-picker-day,
    .planner-player-chip, .planner-winner-btn, .planner-email-chip, .planner-vote-btn, .planner-coming-up-row,
    .search-history-item, .chat-history-item, .chat-player-option, .home-summary-period):hover:not(:disabled) {
    transform: none;
    border-color: var(--ui-accent);
    text-decoration: none;
}

/* Selected: the accent frame and a soft accent background; the text keeps the heading colour. */
.page:is(.theme-dark, .theme-light) :is(.ranking-tab-btn.active, .ranking-history-btn.active,
    .ranking-selection-actions .home-cta-secondary.active, .upload-lang-tab.active, .pdf-tab-active,
    .pdf-reader-tool[aria-pressed="true"], .news-type-btn.active, .news-source-chip.active,
    .news-digest-calendar-day.active, .planner-day.planner-day-selected, .planner-date-picker-day.active,
    .planner-duration-picker-scroll button.active, .planner-winner-btn.active, .planner-player-chip.active,
    .planner-email-chip.active, .planner-vote-btn-active, .search-history-item.is-active, .chat-history-item-active,
    .chat-player-option-active, .game-shelf-toggle-btn.is-active) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-text);
    box-shadow: none;
    text-shadow: none;
}

/* 3. Cards. Hover frames the card; titles never underline (the whole card is the target). */
.page:is(.theme-dark, .theme-light) :is(.game-card:not(.game-card-disabled), .news-card):hover {
    transform: none;
    border-color: var(--ui-accent);
}

/* A bar that opens a panel ("Add friend") frames its card on hover like a clickable card. */
.page:is(.theme-dark, .theme-light) .friends-add-panel:has(.friends-add-toggle:hover) {
    border-color: var(--ui-accent);
}

.page:is(.theme-dark, .theme-light) .game-card-title-link:hover,
.page:is(.theme-dark, .theme-light) .news-card:hover .news-card-title {
    text-decoration: none;
}

/* 4. Light theme surfaces (spec 120): a warm page, white cards with one warm frame, and a very light cream
   for what sits inside a card (tiles, rows, filter groups, empty states). Gradients and textures on cards
   are dropped so every page reads the same. :not(#ui-surfaces) lifts these few background rules above
   the older page-specific light overrides without !important. */
.page.theme-light {
    --ui-page: var(--tt-page);
    --ui-card: var(--tt-field);
    --ui-card-border: var(--tt-line);
    --ui-inset: var(--tt-surface);
    --ui-inset-border: var(--tt-line);
}

.page.theme-light main {
    background: var(--ui-page);
}

.page.theme-light .home-auth-shell {
    --hd-surface: var(--tt-surface);
    --hd-tile-bg: var(--tt-field);
    --hd-tile-border: var(--tt-line);
    --hd-border: var(--tt-line);
}

/* Spec 134 rule 4: a game header with a cover keeps its picture (planner.css). */
.page.theme-light:not(#ui-surfaces) :is(.game-library-header:not(.planner-header-with-cover), .planner-card, .game-card,
    .news-header, .news-card, .news-digest-card, .pricing-card, .home-app-header, .home-app-card, .upload-card,
    .chat-panel-pending) {
    background: var(--ui-card);
}

/* Frames at ordinary weight, so the hover and selected frames of spec 113 still win. */
.page.theme-light :is(.game-library-header, .planner-card, .game-card, .news-header, .news-card, .news-digest-card,
    .pricing-card:not(.pricing-card-current), .home-app-header, .home-app-card, .upload-card) {
    border-color: var(--ui-card-border);
}

.page.theme-light:not(#ui-surfaces) :is(.planner-overview-kpi, .planner-overview-top-btn, .home-dash-stat, .home-dash-list,
    .home-shortcut, .ranking-row, .friends-item, .planner-empty-block, .news-lang-group, .news-type-group,
    .news-card-picture, .planner-coming-up-row) {
    background: var(--ui-inset);
}

/* 5. Admin pages (spec 121): Bootstrap's list groups, cards, tables, fields and buttons take the app's
   cards, warm frames and button family instead of Bootstrap blue. */
.page.theme-dark .admin-page {
    --admin-surface: var(--tt-area);
    --admin-frame: var(--tt-line);
    --admin-row: var(--tt-line);
    --admin-field: var(--tt-field);
    --admin-field-text: var(--tt-ink);
    --admin-muted: var(--tt-muted);
}

.page.theme-light .admin-page {
    --admin-surface: var(--tt-area);
    --admin-frame: var(--tt-line);
    --admin-row: var(--tt-line);
    --admin-field: var(--tt-field);
    --admin-field-text: var(--tt-ink);
    --admin-muted: var(--tt-muted);
}

.page:is(.theme-dark, .theme-light) .admin-page :is(.list-group, .card) {
    background: var(--admin-surface);
    border: 1px solid var(--admin-frame);
    border-radius: 0;
    overflow: hidden;
    color: inherit;
}

.page:is(.theme-dark, .theme-light) .admin-page .list-group {
    margin-bottom: 1rem;
}

.page:is(.theme-dark, .theme-light) .admin-page .list-group-item {
    background: transparent;
    color: inherit;
    border: 0;
    border-bottom: 1px solid var(--admin-row);
    padding: .75rem 1rem;
}

.page:is(.theme-dark, .theme-light) .admin-page .list-group-item:last-child {
    border-bottom: 0;
}

.page:is(.theme-dark, .theme-light) .admin-page .list-group-item-action:hover {
    background: var(--ui-accent-soft);
    color: inherit;
}

.page:is(.theme-dark, .theme-light) .admin-page :is(.text-muted, .form-text) {
    color: var(--admin-muted) !important;
    opacity: 1;
}

.page:is(.theme-dark, .theme-light) .admin-page :is(.form-control, .form-select) {
    background-color: var(--admin-field);
    color: var(--admin-field-text);
    border-color: var(--admin-frame);
    border-radius: 0;
}

.page:is(.theme-dark, .theme-light) .admin-page :is(.form-control, .form-select):focus {
    border-color: var(--ui-accent);
    box-shadow: none;
}

.page:is(.theme-dark, .theme-light) .admin-page .form-check-input:checked {
    background-color: var(--tt-accent);
    border-color: var(--tt-accent);
}

.page:is(.theme-dark, .theme-light) .admin-page .table > :not(caption) > * > * {
    border-color: var(--admin-row);
}

/* Bootstrap's table text and hover colours stay dark on the dark theme; the cells take the page ink instead. */
.page:is(.theme-dark, .theme-light) .admin-page .table {
    --bs-table-striped-color: var(--tt-ink);
    --bs-table-active-color: var(--tt-ink);
    --bs-table-hover-color: var(--tt-ink);
    --bs-table-hover-bg: var(--tt-accent-soft);
    color: var(--tt-ink);
}

.page:is(.theme-dark, .theme-light) .admin-page .table thead th {
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--admin-muted);
}

.page:is(.theme-dark, .theme-light) .admin-page .btn {
    border-radius: 0;
    font-weight: 600;
}

.page:is(.theme-dark, .theme-light) .admin-page .btn-primary {
    background: linear-gradient(135deg, var(--tt-accent-from), var(--tt-accent-to));
    border-color: var(--tt-line);
    color: var(--on-accent);
}

.page:is(.theme-dark, .theme-light) .admin-page :is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-success) {
    background: transparent;
    border-color: color-mix(in srgb, var(--ui-accent) 55%, transparent);
    color: var(--ui-accent);
}

.page:is(.theme-dark, .theme-light) .admin-page :is(.btn-outline-danger, .btn-danger) {
    background: transparent;
    border-color: color-mix(in srgb, var(--ui-danger) 55%, transparent);
    color: var(--ui-danger);
}

.page:is(.theme-dark, .theme-light) .admin-page .btn:hover:not(:disabled) {
    border-color: var(--ui-accent);
    filter: brightness(1.05);
}

.page:is(.theme-dark, .theme-light) .admin-page .btn-outline-danger:hover:not(:disabled),
.page:is(.theme-dark, .theme-light) .admin-page .btn-danger:hover:not(:disabled) {
    border-color: var(--ui-danger);
}

.page:is(.theme-dark, .theme-light) .admin-page .alert-info {
    background: var(--ui-accent-soft);
    border-color: var(--admin-frame);
    color: inherit;
}

.page:is(.theme-dark, .theme-light) .admin-page .badge {
    background: var(--ui-accent-soft) !important;
    color: var(--ui-accent) !important;
    border: 1px solid var(--admin-frame);
}

.admin-page .admin-waitlist {
    margin-top: 1rem;
}

.admin-page .admin-waitlist h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.admin-page .game-library-header {
    margin-left: 0;
    margin-right: 0;
}

/* Spec 126: the admin overview - number lists, the activation funnel and links. */
.admin-overview-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-bottom: 1rem;
}

.admin-overview-section h3 {
    font-size: 1rem;
    margin: 0 0 .6rem;
}

.admin-overview-numbers {
    display: grid;
    gap: .2rem;
    margin: 0;
}

.admin-overview-number {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--admin-row, var(--tt-line));
}

.admin-overview-number dt {
    font-weight: 500;
    color: var(--admin-muted, var(--tt-muted));
}

.admin-overview-number dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.admin-funnel {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
    display: grid;
    gap: .55rem;
}

.admin-funnel-label {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .9rem;
}

.admin-funnel-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-funnel-bar {
    height: 8px;
    margin-top: .2rem;
    border-radius: 0;
    background: var(--admin-row, var(--tt-field));
    overflow: hidden;
}

.admin-funnel-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--tt-accent-from), var(--tt-accent-to));
}

.admin-overview-links {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .6rem 0 0;
}

/* Spec 212: the overview's ways on are buttons, not underlined links. */
.admin-overview-links .game-card-btn {
    width: auto;
    margin: 0;
    padding: .45rem .9rem;
    text-decoration: none;
}

.admin-overview-page .admin-overview-reload {
    width: auto;
    margin-top: .5rem;
}

/* Spec 128: a generated key pair on the admin overview. */
.admin-overview-page .admin-overview-keys-btn {
    width: auto;
    margin-top: .6rem;
}

.admin-overview-keys {
    margin: .6rem 0 .3rem;
    padding: .6rem .75rem;
    border-radius: 0;
    border: 1px solid var(--admin-frame, var(--tt-line));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .78rem;
}

/* Spec 137: publisher applications and official rulebooks on the admin page. */
.admin-publisher-head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
}

.admin-publisher-status {
    font-size: .8rem;
    color: var(--admin-muted);
}

.admin-publisher-note {
    margin: .35rem 0;
    white-space: pre-line;
}

.admin-publisher-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .5rem;
}

/* Spec 238: the admin analytics - range chips, headline tiles, one chart per measure, ranked lists. */
.analytics-range,
.analytics-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.analytics-date {
    display: grid;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.analytics-headlines {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.analytics-tile {
    display: grid;
    gap: 0.2rem;
}

.analytics-tile-label,
.analytics-note,
.analytics-tile-change {
    font-size: 0.85rem;
    color: var(--tt-muted);
}

.analytics-tile-value {
    font-size: 1.8rem;
    line-height: 1.1;
}

.analytics-tile-change.is-up {
    color: var(--tt-ok);
}

.analytics-tile-change.is-down {
    color: var(--tt-danger);
}

.analytics-charts,
.analytics-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.analytics-chart {
    margin: 0;
}

.analytics-chart-title {
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.analytics-chart-svg {
    display: block;
    width: 100%;
    height: auto;
}

.analytics-chart-grid {
    stroke: var(--tt-line);
    stroke-width: 1;
}

.analytics-chart-axis {
    fill: var(--tt-muted);
    font-size: 14px;
}

.analytics-chart-bar {
    fill: var(--tt-accent);
}

.analytics-chart-hit {
    fill: transparent;
}

.analytics-chart-hit:hover {
    fill: var(--tt-accent-soft);
}

.analytics-list-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.analytics-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
}

.analytics-list-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-list-track {
    height: 8px;
    background: var(--tt-field);
}

.analytics-list-bar {
    display: block;
    height: 100%;
    background: var(--tt-accent);
}

.analytics-list-value {
    font-variant-numeric: tabular-nums;
}

.analytics-table-view summary {
    cursor: pointer;
    font-weight: 700;
}

.analytics-table-scroll {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.analytics-table th,
.analytics-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--tt-line);
    text-align: right;
}

.analytics-table th:first-child,
.analytics-table td:first-child {
    text-align: left;
}

.analytics-subscriptions .admin-overview-numbers {
    margin-top: 0.75rem;
}

html.tabletop:not(#tabletop) .analytics-custom .game-card-btn {
    width: auto;
    min-height: 40px;
    padding: 0.5rem 1.1rem;
}

/* Spec 297: the admin health page - the day and area tables and the error groups with their stack. */
.health-section {
    margin-bottom: 1rem;
}

.health-section h3 {
    font-size: 1rem;
    margin: 0 0 0.6rem;
}

.health-area {
    min-width: 12rem;
    overflow-wrap: anywhere;
}

.analytics-table .health-change.is-up {
    color: var(--tt-danger);
    font-weight: 700;
}

.health-error-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.health-error {
    padding: 0.5rem 0.6rem;
    background: var(--tt-field);
}

.health-error summary {
    cursor: pointer;
    overflow-wrap: anywhere;
}

.health-error-count {
    margin-right: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.health-error-site {
    display: block;
    font-size: 0.85rem;
    color: var(--tt-muted);
}

.health-error-facts .admin-overview-number {
    flex-direction: column;
    gap: 0.1rem;
}

.health-error-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.health-error-stack {
    margin: 0.5rem 0 0;
    padding: 0.5rem;
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
    background: var(--tt-area, transparent);
    color: var(--tt-ink, inherit);
}

/* Spec 258: the admin user search, its account blocks and dialogs, and the publisher export page. */
.admin-users-search {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.admin-users-search .form-input {
    flex: 1 1 14rem;
    min-width: 0;
}

.admin-users-page .admin-users-list,
.admin-users-page .admin-users-hint,
.admin-users-page .admin-users-empty {
    margin-top: 1rem;
}

.admin-users-list {
    display: grid;
    gap: 1rem;
}

.admin-user-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.admin-user-email {
    overflow-wrap: anywhere;
}

.admin-user-nickname,
.admin-user-note {
    color: var(--admin-muted, var(--tt-muted));
}

.admin-user-badge {
    font-size: 0.78rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--admin-frame, var(--tt-line));
    color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.admin-user-reason {
    margin: 0.6rem 0 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.admin-user-note {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
}

.admin-user-actions,
.publisher-export-actions,
.game-catalog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

html.tabletop:not(#tabletop) :is(.admin-users-search, .admin-user-actions, .publisher-export-actions, .game-catalog-actions) .game-card-btn {
    width: auto;
    min-height: 40px;
    margin: 0;
    padding: 0.5rem 1.1rem;
    text-decoration: none;
}

.admin-users-dialog .planner-modal-body .form-input {
    display: block;
    width: 100%;
    margin: 0.25rem 0 0.75rem;
}

.admin-users-dialog .planner-modal-body p {
    overflow-wrap: anywhere;
}

.admin-users-check {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 0 0.75rem;
}

.admin-publisher-export-page .planner-card {
    margin-top: 1rem;
}

/* Spec 318: the message to all players - the form and the mail preview. */
.admin-broadcast-page .planner-card {
    margin-top: 1rem;
}

.admin-broadcast-form .form-input {
    display: block;
    width: 100%;
    margin: 0.25rem 0 0.75rem;
}

.admin-broadcast-hint {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--admin-muted, var(--tt-muted));
}

.admin-broadcast-version {
    margin: 0 0 0.75rem;
    padding: 0.75rem 0.9rem 0;
    border: 1px solid var(--admin-frame, var(--tt-line));
}

.admin-broadcast-version legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
}

.admin-broadcast-preview h3 {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

.admin-broadcast-frame {
    display: block;
    width: 100%;
    height: 32rem;
    border: 1px solid var(--admin-frame, var(--tt-line));
    background: #eeebe5;
}

.admin-publisher-export-page .planner-card h3 {
    font-size: 1.05rem;
    margin: 0 0 0.6rem;
}

.publisher-export-sheet-list {
    margin: 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.35rem;
}

/* Spec 260: the moderation page, the owner's hidden-page banner and the member's note. */
.admin-moderation-part {
    margin: 1.25rem 0 0;
    font-size: 1.1rem;
}

.admin-moderation-flags {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.admin-moderation-flag {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--admin-frame, var(--tt-line));
}

.admin-moderation-flag.is-severe {
    border-color: var(--ui-danger, var(--admin-frame, var(--tt-line)));
}

.admin-moderation-flag-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: baseline;
}

.admin-moderation-flag-words,
.admin-moderation-flag-context {
    margin: 0.4rem 0 0;
    overflow-wrap: anywhere;
}

.club-own-hidden p,
.club-membership-unavailable {
    overflow-wrap: anywhere;
}

.club-membership-unavailable {
    margin: 0.4rem 0 0;
    font-weight: 600;
}