/* Appeals: the staff queue and detail (/admin/appeals), the player's form (/scpsl/appeal) and "Mis apelaciones"
   (/scpsl/my-appeals). Built on the report pieces (reports.css: layout, chips, context tiles, "hay cambios" bar),
   the report form (report-form.css: stepper, cards, review) and the profile blocks (profile.css). Prefix pn-ap-;
   palette variables only, so light and dark both work. */

/* ---------- Shared bits ---------- */

.pn-ap-dot {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-info);
    box-shadow: 0 0 0 3px rgba(var(--mud-palette-info-rgb), .18);
}

.pn-ap-dot--inline { margin-left: 6px; vertical-align: middle; }

.pn-ap-subtitle {
    margin: 18px 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.pn-ap-pre { white-space: pre-line; overflow-wrap: anywhere; }

.pn-ap-form-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* ---------- Queue ---------- */

.pn-ap-row {
    grid-template-columns: minmax(260px, 2.6fr) minmax(150px, 1fr) minmax(130px, .9fr) auto;
}

.pn-ap-row.is-aging { border-left-color: var(--mud-palette-warning); }
.pn-ap-row.is-stale { border-left-color: var(--mud-palette-error); }
.pn-ap-row.is-waiting { border-left-color: var(--mud-palette-secondary); }
.pn-ap-row.is-done { border-left-color: var(--mud-palette-lines-default); }
.pn-ap-row.is-mine { background: rgba(var(--mud-palette-primary-rgb), 0.04); }
.pn-ap-row.is-unread .pn-rep-player a { font-weight: 700; }

.pn-ap-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pn-ap-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pn-ap-kind, .pn-ap-reason-chip, .pn-ap-reason {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.pn-ap-kind { font-weight: 600; }
.pn-ap-kind .mud-icon-root, .pn-ap-reason-chip .mud-icon-root, .pn-ap-reason .mud-icon-root { font-size: 1rem; }

.pn-ap-reason-chip, .pn-ap-reason {
    padding: 1px 8px 1px 6px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.pn-ap-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 1100px) {
    .pn-ap-row { grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) auto; }
    .pn-ap-row .pn-rep-when { display: none; }
}

@media (max-width: 700px) {
    .pn-ap-row { grid-template-columns: 1fr auto; gap: 6px; }
    .pn-ap-row .pn-ap-main { grid-column: 1; grid-row: 1; }
    .pn-ap-row .pn-dir-actions { grid-column: 2; grid-row: 1; align-self: start; }
    .pn-ap-row .pn-rep-owner { grid-column: 1 / -1; grid-row: 2; }
    .pn-ap-row .pn-rep-when { display: flex; grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; gap: 2px 10px; }
    .pn-ap-summary { white-space: normal; }
}

/* ---------- Conversation ---------- */

.pn-ap-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-ap-msg {
    display: flex;
    max-width: 88%;
    animation: pn-rise var(--pn-dur) var(--pn-ease-out) both;
}

.pn-ap-msg.is-player { align-self: flex-start; }
.pn-ap-msg.is-staff { align-self: flex-end; }

.pn-ap-bubble {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
}

.pn-ap-msg.is-player .pn-ap-bubble { border-top-left-radius: 4px; }

.pn-ap-msg.is-staff .pn-ap-bubble {
    border-top-right-radius: 4px;
    border-color: rgba(var(--mud-palette-primary-rgb), .35);
    background: rgba(var(--mud-palette-primary-rgb), .06);
}

.pn-ap-msg.is-question .pn-ap-bubble {
    border-color: rgba(var(--mud-palette-warning-rgb), .5);
    background: rgba(var(--mud-palette-warning-rgb), .08);
}

.pn-ap-msg.is-internal .pn-ap-bubble {
    border-style: dashed;
    border-color: rgba(var(--mud-palette-secondary-rgb), .55);
    background: rgba(var(--mud-palette-secondary-rgb), .06);
}

.pn-ap-msg.is-opening { max-width: 100%; align-self: stretch; }

.pn-ap-msg.is-opening .pn-ap-bubble {
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: var(--pn-radius-md);
}

.pn-ap-msg-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-size: 0.85rem;
}

.pn-ap-lock, .pn-ap-ask {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pn-ap-lock { color: var(--mud-palette-secondary); }
.pn-ap-ask { color: var(--mud-palette-warning); }
.pn-ap-lock .mud-icon-root, .pn-ap-ask .mud-icon-root { font-size: .9rem; }

.pn-ap-text {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.pn-ap-evidence {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pn-ap-evidence-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pn-ap-evidence-label .mud-icon-root { font-size: .95rem; }

/* A status change: a line across with a pill in the middle. The tone class only colours the icon. */
.pn-ap-event {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none !important;
    text-align: center;
    animation: pn-rise var(--pn-dur) var(--pn-ease-out) both;
}

.pn-ap-event-line {
    position: absolute;
    top: 15px;
    right: 0;
    left: 0;
    height: 1px;
    background: currentColor;
    opacity: .3;
}

.pn-ap-event-body {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    padding: 4px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    font-size: 0.82rem;
}

.pn-ap-event-body strong { color: var(--mud-palette-text-primary); }

.pn-ap-event-note {
    max-width: 90%;
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: 0.9rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.pn-ap-system {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

.pn-ap-system .mud-icon-root { font-size: .9rem; }


/* ---------- Composer (staff) and reply (player) ---------- */

.pn-ap-composer {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pn-ap-composer-tabs { margin-bottom: 8px; }
.pn-ap-composer-tabs .pn-tab { display: inline-flex; align-items: center; gap: 6px; }
.pn-ap-composer-tabs .pn-tab .mud-icon-root { font-size: 1rem; }

.pn-ap-composer-help {
    margin: 0 0 8px;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.pn-ap-quick { margin: 0 0 10px; }

.pn-ap-reply { border-color: rgba(var(--mud-palette-warning-rgb), .5) !important; }

.pn-ap-question {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--mud-palette-warning);
    border-radius: 0 10px 10px 0;
    background: rgba(var(--mud-palette-warning-rgb), .08);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* ---------- Decision (staff) ---------- */

.pn-ap-claim {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pn-ap-waiting, .pn-ap-conflict {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--pn-radius-md);
    font-size: 0.85rem;
}

.pn-ap-waiting {
    background: rgba(var(--mud-palette-secondary-rgb), .1);
    color: var(--mud-palette-text-primary);
}

.pn-ap-conflict {
    background: rgba(var(--mud-palette-warning-rgb), .12);
    color: var(--mud-palette-text-primary);
}

.pn-ap-waiting > .mud-icon-root { color: var(--mud-palette-secondary); }
.pn-ap-conflict > .mud-icon-root { color: var(--mud-palette-warning); }

.pn-ap-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pn-ap-outcome {
    --pn-ap-tone: var(--mud-palette-primary);
    --pn-ap-tone-rgb: var(--mud-palette-primary-rgb);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease,
        transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-ap-outcome--accept { --pn-ap-tone: var(--mud-palette-success); --pn-ap-tone-rgb: var(--mud-palette-success-rgb); }
.pn-ap-outcome--reject { --pn-ap-tone: var(--mud-palette-error); --pn-ap-tone-rgb: var(--mud-palette-error-rgb); }

.pn-ap-outcome .mud-icon-root { color: var(--pn-ap-tone); }
.pn-ap-outcome:active:not(:disabled) { transform: scale(.97); }
.pn-ap-outcome:disabled { opacity: .45; cursor: not-allowed; }

.pn-ap-outcome:focus-visible {
    outline: 2px solid var(--pn-ap-tone);
    outline-offset: 2px;
}

.pn-ap-outcome.is-on {
    border-color: var(--pn-ap-tone);
    background: rgba(var(--pn-ap-tone-rgb), .1);
    box-shadow: 0 0 0 1px var(--pn-ap-tone) inset;
}

@media (hover: hover) and (pointer: fine) {
    .pn-ap-outcome:not(:disabled):not(.is-on):hover { border-color: rgba(var(--pn-ap-tone-rgb), .6); }
}

.pn-ap-why { margin: 8px 0 0; font-size: 0.8rem; }

.pn-ap-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--mud-palette-lines-default);
    animation: pn-rise var(--pn-dur) var(--pn-ease-out) both;
}

.pn-ap-form-help { margin: 0; font-size: 0.85rem; color: var(--mud-palette-text-secondary); }

.pn-ap-reduce { display: flex; flex-direction: column; gap: 8px; }
.pn-ap-reduce-label { font-size: 0.8rem; font-weight: 600; }
.pn-ap-reduce .pn-chips { margin: 0; }
.pn-ap-reduce .pn-chip-filter { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.2; }
.pn-ap-reduce-left { color: var(--mud-palette-text-secondary); font-size: .7rem; font-weight: 400; }
.pn-ap-reduce-when { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; }

.pn-ap-reduce-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    color: var(--mud-palette-error);
    font-size: .82rem;
}

.pn-ap-reduce-error > .mud-icon-root { flex: none; margin-top: 1px; }

.pn-ap-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border-radius: var(--pn-radius-md);
    background: rgba(var(--mud-palette-primary-rgb), .07);
    font-size: 0.85rem;
}

.pn-ap-preview > span { display: flex; flex-direction: column; }
.pn-ap-preview small { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

/* ---------- Context (staff) ---------- */

.pn-ap-sanction-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.pn-ap-summary-was {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    font-size: 0.82rem;
}

.pn-ap-summary-was small { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

/* The reports that led to the appealed sanction (AppealEvidence). */
.pn-ap-linked {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-ap-linked > li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.85rem;
}

.pn-ap-linked > li:last-child { padding-bottom: 0; border-bottom: 0; }

.pn-ap-linked-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.pn-ap-linked-head a { color: inherit; text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
    .pn-ap-linked-head a:hover { color: var(--pn-brand-text); text-decoration: underline; }
}

.pn-ap-linked-reply {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
}

.pn-ap-linked-reply small { font-size: 0.72rem; color: var(--mud-palette-text-secondary); }

.pn-ap-context-help { margin: 6px 0 0; font-size: 0.75rem; text-align: center; }

.pn-ap-alts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-size: 0.85rem;
    text-decoration: none;
}

.pn-ap-alts.is-hot { background: rgba(var(--mud-palette-warning-rgb), .14); }
.pn-ap-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }

.pn-ap-sanction-appeal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    text-decoration: none;
}

/* Phones: the decision comes right after the header, like the report detail. */
@media (max-width: 960px) {
    .pn-ap-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Statistics ---------- */

.pn-ap-weeks {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
    align-items: end;
    height: 170px;
}

.pn-ap-week {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    min-width: 0;
}

.pn-ap-week-bars {
    display: flex;
    flex: 1;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.pn-ap-week-bar {
    width: 42%;
    max-width: 16px;
    height: var(--h);
    min-height: 1px;
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
}

.pn-ap-week-bar.is-in, .pn-ap-legend i.is-in { background: rgba(var(--mud-palette-info-rgb), .75); }
.pn-ap-week-bar.is-out, .pn-ap-legend i.is-out { background: rgba(var(--mud-palette-success-rgb), .75); }

.pn-ap-week-label {
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-ap-legend {
    display: flex;
    gap: 14px;
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.pn-ap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pn-ap-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

@media (max-width: 600px) {
    .pn-ap-week-label { writing-mode: vertical-rl; transform: rotate(180deg); }
}

/* ---------- Canned answers ---------- */

.pn-ap-templates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.pn-ap-templates .pn-section { height: auto; }

.pn-ap-tpl-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-ap-tpl {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
}

.pn-ap-tpl-body { flex: 1; min-width: 0; }
.pn-ap-tpl-body p { margin: 4px 0 0; font-size: 0.85rem; color: var(--mud-palette-text-secondary); white-space: pre-line; }
.pn-ap-tpl-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.pn-ap-tpl-editor { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* ---------- Appeal form (player) ---------- */

.pn-ap-stepper ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pn-ap-stepper ol::before,
.pn-ap-stepper ol::after { left: 16.667%; right: 16.667%; }

.pn-ap-howto {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-ap-howto li { display: flex; gap: 12px; align-items: flex-start; }
.pn-ap-howto li > div { display: flex; flex-direction: column; gap: 2px; }
.pn-ap-howto small { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }

.pn-ap-howto li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(var(--mud-palette-primary-rgb), .14);
    color: var(--mud-palette-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

/* The sanction being appealed. */
.pn-ap-target {
    --pn-ap-tone: var(--mud-palette-error);
    --pn-ap-tone-rgb: var(--mud-palette-error-rgb);
    display: flex;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--pn-ap-tone-rgb), .35);
    border-left: 4px solid var(--pn-ap-tone);
    border-radius: var(--pn-radius-md);
    background: rgba(var(--pn-ap-tone-rgb), .05);
}

.pn-ap-target--mute { --pn-ap-tone: var(--mud-palette-warning); --pn-ap-tone-rgb: var(--mud-palette-warning-rgb); }
.pn-ap-target--warn { --pn-ap-tone: var(--mud-palette-warning); --pn-ap-tone-rgb: var(--mud-palette-warning-rgb); }
.pn-ap-target--restriction { --pn-ap-tone: var(--mud-palette-secondary); --pn-ap-tone-rgb: var(--mud-palette-secondary-rgb); }

.pn-ap-target-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--pn-radius-md);
    background: rgba(var(--pn-ap-tone-rgb), .14);
    color: var(--pn-ap-tone);
}

.pn-ap-target-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pn-ap-target-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pn-ap-target-reason { margin: 0; overflow-wrap: anywhere; }

.pn-ap-target-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

.pn-ap-target-facts li { display: inline-flex; align-items: center; gap: 4px; }
.pn-ap-target-facts .mud-icon-root { font-size: .95rem; }

/* ---------- "Mis apelaciones" ---------- */

.pn-ap-ask-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .5);
    border-radius: var(--pn-radius);
    background: rgba(var(--mud-palette-warning-rgb), .1);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    animation: pn-rise var(--pn-dur) var(--pn-ease-out) both;
    transition: transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-ap-ask-banner > .mud-icon-root:first-child { color: var(--mud-palette-warning); }
.pn-ap-ask-banner > span { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.pn-ap-ask-banner small { font-size: 0.82rem; color: var(--mud-palette-text-secondary); }
.pn-ap-ask-banner:active { transform: scale(.98); }

.pn-ap-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
    gap: 16px;
    margin-top: 16px;
}

.pn-ap-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    scroll-margin-top: 90px;
}

.pn-ap-card.is-asking { border-color: rgba(var(--mud-palette-warning-rgb), .6); }
.pn-ap-card.is-unread { box-shadow: 0 0 0 1px rgba(var(--mud-palette-info-rgb), .45); }

.pn-ap-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.pn-ap-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--pn-radius-md);
}

.pn-ap-card-title { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }

.pn-ap-card-title small {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .pn-ap-card-head:hover strong { color: var(--mud-palette-primary); }
}

.pn-ap-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    font-size: 0.82rem;
}

.pn-ap-card-meta > span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.pn-ap-card-meta .mud-icon-root { font-size: 1rem; }

.pn-ap-sent { padding: 28px 24px; }

@media (prefers-reduced-motion: reduce) {
    .pn-ap-msg, .pn-ap-event, .pn-ap-form, .pn-ap-ask-banner { animation: none; }
}