/**
 * TamRank Notifications
 *
 * Provides:
 *  - .tr-alert  inline alert component (4 semantic states + legacy aliases)
 *  - .tam-toast-* toast notification styles (migrated from admin.css)
 *
 * DO NOT @import variables.css here — tokens are already available via the
 * tamrank-admin-global.css cascade (same pattern as common/tabs.css).
 */

/* ======================================================
   INLINE ALERT (.tr-alert)
   ====================================================== */

.tr-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-3);
    padding: var(--tr-space-3) var(--tr-space-4);
    border-radius: var(--tr-radius-sm);
    font-size: var(--tr-text-sm);
    line-height: var(--tr-leading-normal);
    margin-bottom: var(--tr-space-4);
    position: relative;
}

.tr-alert[hidden] {
    display: none;
}

/* Icon slot */
.tr-alert__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

/* Content slot */
.tr-alert__content {
    flex: 1;
    min-width: 0;
}

/* Title */
.tr-alert__title {
    font-weight: 600;
    margin: 0 0 2px 0;
}

/* Description */
.tr-alert__desc {
    margin: 0;
    color: var(--tr-color-slate-600);
}

/* Dismiss button — JS: onclick="this.closest('.tr-alert').remove()" */
.tr-alert__close {
    position: absolute;
    top: var(--tr-space-2);
    right: var(--tr-space-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--tr-space-1);
    color: var(--tr-color-slate-400);
    border-radius: var(--tr-radius-sm);
    transition: color 0.15s ease;
}

.tr-alert__close:hover {
    color: var(--tr-color-slate-600);
}

/* ── Semantic state modifiers (BEM double-dash) ── */

.tr-alert--error {
    background: var(--tr-color-error-bg);
    color: var(--tr-color-slate-700);
}

.tr-alert--error .tr-alert__icon {
    color: var(--tr-color-error);
}

.tr-alert--warning {
    background: var(--tr-color-warning-bg);
    color: var(--tr-color-slate-700);
}

.tr-alert--warning .tr-alert__icon {
    color: var(--tr-color-warning);
}

.tr-alert--success {
    background: var(--tr-color-success-bg);
    color: var(--tr-color-slate-700);
}

.tr-alert--success .tr-alert__icon {
    color: var(--tr-color-success);
}

.tr-alert--info {
    background: var(--tr-color-info-bg);
    color: var(--tr-color-slate-700);
}

.tr-alert--info .tr-alert__icon {
    color: var(--tr-color-info);
}

/* ── Structured variant (with title, desc, action button) ── */

.tr-alert--structured {
    padding: var(--tr-space-4);
    border-radius: var(--tr-radius-md);
}

.tr-alert--structured .tr-alert__title {
    font-weight: 700;
    color: var(--tr-color-warning);
    margin: 0 0 var(--tr-space-2) 0;
    font-size: var(--tr-text-sm);
}

.tr-alert--structured .tr-alert__desc {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    margin: 0 0 var(--tr-space-4) 0;
    line-height: 1.5;
}

.tr-alert--structured .tr-btn {
    margin-top: 0;
}

/* ── Legacy aliases (single-dash) — remove after Phase 9 JS migration ── */
.tr-alert-error   { background: var(--tr-color-error-bg);   color: var(--tr-color-slate-700); }
.tr-alert-warning { background: var(--tr-color-warning-bg); color: var(--tr-color-slate-700); }
.tr-alert-success { background: var(--tr-color-success-bg); color: var(--tr-color-slate-700); }
.tr-alert-info    { background: var(--tr-color-info-bg);    color: var(--tr-color-slate-700); }

/* ======================================================
   TOAST (TamRankToast)
   Migrated from admin.css. Do NOT rename classes here —
   Phase 8 handles the TamRankToast refactor.
   ====================================================== */

.tam-toast-container {
    position: fixed;
    top: 50px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tam-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: tam-toast-slide-in 0.3s ease-out;
    max-width: 320px;
}

.tam-toast.tam-toast-xp {
    background: linear-gradient(135deg, var(--tr-color-warning-light) 0%, var(--tr-color-white) 100%);
}

.tam-toast-error .tam-toast-icon {
    background: var(--tr-color-error-light);
    color: var(--tr-color-error);
}

.tam-toast-warning .tam-toast-icon {
    background: var(--tr-color-warning-light);
    color: var(--tr-color-warning);
}

.tam-toast-info .tam-toast-icon {
    background: var(--tr-color-info-light);
    color: var(--tr-color-info);
}

.tam-toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.tam-toast-success .tam-toast-icon {
    background: var(--tr-color-success-light);
    color: var(--tr-color-primary);
}

.tam-toast-xp .tam-toast-icon {
    background: var(--tr-color-warning-light);
    color: var(--tr-color-warning);
}

.tam-toast-content {
    flex: 1;
}

.tam-toast-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--tr-color-slate-900);
    margin: 0 0 2px 0;
}

.tam-toast-message {
    font-size: 13px;
    color: var(--tr-color-slate-500);
    margin: 0;
}

.tam-toast-action {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-primary);
    text-decoration: none;
}

.tam-toast-action:hover {
    color: var(--tr-color-primary-hover);
    text-decoration: underline;
}

.tam-toast-close {
    background: none;
    border: none;
    color: var(--tr-color-slate-400);
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    line-height: 1;
}

.tam-toast-close:hover {
    color: var(--tr-color-slate-500);
}

/* Animations */
@keyframes tam-toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes tam-toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.tam-toast.tam-toast-hiding {
    animation: tam-toast-slide-out 0.3s ease-in forwards;
}

/* ======================================================
   CONFIRM DIALOG (TamRank.confirm + [data-tr-confirm])
   ====================================================== */

.tr-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--tr-z-modal, 100000);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tr-space-4);
    animation: tr-confirm-fade-in 0.15s ease-out;
}

.tr-confirm-overlay[hidden] {
    display: none;
}

.tr-confirm-dialog {
    background: var(--tr-color-white);
    border-radius: var(--tr-radius-xl);
    width: 440px;
    max-width: 100%;
    box-shadow: var(--tr-shadow-xl);
    animation: tr-confirm-pop-in 0.18s ease-out;
    overflow: hidden;
    font-family: var(--tr-font-sans, 'Plus Jakarta Sans', sans-serif);
}

/* Icon and title share a row; the copy spans the full width underneath, so
   the heading reads as one unit instead of hanging under a floating badge. */
.tr-confirm-body {
    padding: var(--tr-space-6);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon  title"
        "msg   msg";
    align-items: center;
    column-gap: var(--tr-space-3);
    row-gap: var(--tr-space-4);
}

/* 32px, not the old 44px: that size belonged to the icon sitting alone above
   the title. Beside a 17px heading it now forms one unit with it, and the
   tinted disc is what makes the colour signal readable at a glance. */
.tr-confirm-icon {
    grid-area: icon;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Explicit reset, not redundant: this file is pulled in via @import from
       tamrank-admin-global.css, and @import URLs inherit no ?ver= from their
       parent. A browser holding the previous version can therefore serve the
       old rule (which set margin-bottom) alongside the new markup, growing the
       grid row to 40px and pushing the icon 4px above the title. */
    margin: 0;
}

.tr-confirm-icon svg {
    width: 18px;
    height: 18px;
}

.tr-confirm-icon--default {
    background: var(--tr-color-primary-50, #ecfdf5);
    color: var(--tr-color-primary, #10b981);
}

.tr-confirm-icon--danger {
    background: #fee2e2;
    color: #dc2626;
}

/* Amber: something was stopped before it could break anything. Deliberately
   not brand-green — that colour means "this succeeded" everywhere else. */
.tr-confirm-icon--caution {
    background: #fef3c7;
    color: #d97706;
}

.tr-confirm-title {
    grid-area: title;
    margin: 0;
    font-size: var(--tr-text-lg, 17px);
    font-weight: var(--tr-font-bold, 700);
    color: var(--tr-color-slate-900, #0f172a);
    line-height: 1.3;
}

.tr-confirm-msgs {
    grid-area: msg;
}

.tr-confirm-message {
    margin: 0;
    font-size: var(--tr-text-sm, 14px);
    color: var(--tr-color-slate-600, #475569);
    line-height: var(--tr-leading-normal, 1.5);
}

.tr-confirm-message + .tr-confirm-message {
    margin-top: 10px;
}

/* Opening statement carries the weight: what is wrong, in one line. */
.tr-confirm-message--lead {
    color: var(--tr-color-slate-900, #0f172a);
    font-weight: var(--tr-font-medium, 500);
}

/* Diagnostics ("usually a typo") sit one step back from the main story. */
.tr-confirm-message--detail {
    font-size: 13px;
    color: var(--tr-color-slate-500, #64748b);
}

.tr-confirm-actions {
    padding: var(--tr-space-4) var(--tr-space-6) var(--tr-space-6);
    display: flex;
    gap: var(--tr-space-3);
    justify-content: flex-end;
    align-items: center;
}

.tr-confirm-btn {
    appearance: none;
    border: none;
    font-family: inherit;
    font-size: var(--tr-text-sm, 14px);
    font-weight: var(--tr-font-bold, 600);
    padding: 10px 20px;
    border-radius: var(--tr-radius-full, 999px);
    cursor: pointer;
    transition: background var(--tr-transition-fast, 0.15s), transform 0.08s, box-shadow var(--tr-transition-fast, 0.15s);
    line-height: 1.2;
}

.tr-confirm-btn:focus-visible {
    outline: 2px solid var(--tr-color-primary, #10b981);
    outline-offset: 2px;
}

.tr-confirm-btn--cancel {
    background: var(--tr-color-slate-100, #f1f5f9);
    color: var(--tr-color-slate-700, #334155);
}

.tr-confirm-btn--cancel:hover {
    background: var(--tr-color-slate-200, #e2e8f0);
}

.tr-confirm-btn--confirm {
    background: var(--tr-color-primary, #10b981);
    color: var(--tr-color-white, #fff);
}

.tr-confirm-btn--confirm:hover {
    background: var(--tr-color-primary-600, #059669);
}

.tr-confirm-btn--confirm.is-danger {
    background: #dc2626;
    color: #fff;
}

.tr-confirm-btn--confirm.is-danger:hover {
    background: #b91c1c;
}

/* ── Flipped hierarchy (recommend: 'cancel') ──────────────────────────
   For dialogs where declining is the answer we expect most people to want:
   a blocked save that would take the site down. The recommended way out
   gets the weight; the risky action stays reachable but has to be sought. */
.tr-confirm-btn--recommended {
    background: var(--tr-color-primary, #10b981);
    color: var(--tr-color-white, #fff);
}

.tr-confirm-btn--recommended:hover {
    background: var(--tr-color-primary-600, #059669);
}

.tr-confirm-btn--quiet {
    background: transparent;
    color: var(--tr-color-slate-600, #475569);
    text-decoration: underline;
    padding-left: var(--tr-space-2, 8px);
    padding-right: var(--tr-space-2, 8px);
}

.tr-confirm-btn--quiet:hover {
    color: var(--tr-color-slate-900, #0f172a);
}

.tr-confirm-spacer {
    flex: 1;
}

.tr-confirm-btn:active {
    transform: translateY(1px);
}

@keyframes tr-confirm-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tr-confirm-pop-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tr-confirm-overlay.is-closing {
    animation: tr-confirm-fade-out 0.12s ease-in forwards;
}

@keyframes tr-confirm-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ======================================================
   FORM DIALOG (TamRank.dialog)
   Wider variant of confirm dialog with header, form body,
   inline validation errors, and primary/danger actions.
   ====================================================== */

.tr-dialog {
    width: 520px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--tr-space-8));
}

.tr-dialog--sm { width: 400px; }
.tr-dialog--md { width: 520px; }
.tr-dialog--lg { width: 720px; }

.tr-dialog-header {
    padding: var(--tr-space-5) var(--tr-space-6) var(--tr-space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tr-space-3);
    border-bottom: 1px solid var(--tr-color-slate-100, #f1f5f9);
}

.tr-dialog-title {
    margin: 0;
    font-size: var(--tr-text-lg, 17px);
    font-weight: var(--tr-font-bold, 700);
    color: var(--tr-color-slate-900, #0f172a);
    line-height: 1.3;
}

.tr-dialog-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--tr-color-slate-500, #64748b);
    width: 32px;
    height: 32px;
    border-radius: var(--tr-radius-md, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--tr-transition-fast, 0.15s), color var(--tr-transition-fast, 0.15s);
}

.tr-dialog-close:hover {
    background: var(--tr-color-slate-100, #f1f5f9);
    color: var(--tr-color-slate-900, #0f172a);
}

.tr-dialog-close:focus-visible {
    outline: 2px solid var(--tr-color-primary, #10b981);
    outline-offset: 2px;
}

.tr-dialog-body {
    padding: var(--tr-space-5) var(--tr-space-6);
    overflow-y: auto;
}

.tr-dialog-body form {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-4);
}

.tr-dialog-field {
    display: flex;
    flex-direction: column;
    gap: var(--tr-space-2);
}

.tr-dialog-field label {
    font-size: var(--tr-text-sm, 13px);
    font-weight: var(--tr-font-bold, 600);
    color: var(--tr-color-slate-700, #334155);
    line-height: 1.3;
}

.tr-dialog-field input[type="text"],
.tr-dialog-field input[type="url"],
.tr-dialog-field select,
.tr-dialog-field textarea {
    font-family: inherit;
    font-size: var(--tr-text-sm, 14px);
    line-height: 1.4;
    height: 42px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--tr-color-slate-200, #e2e8f0);
    border-radius: var(--tr-radius-md, 8px);
    background: var(--tr-color-white, #fff);
    color: var(--tr-color-slate-900, #0f172a);
    transition: border-color var(--tr-transition-fast, 0.15s), box-shadow var(--tr-transition-fast, 0.15s);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: none;
}

.tr-dialog-field textarea {
    height: auto;
    min-height: 84px;
    padding: 10px 12px;
    resize: vertical;
}

.tr-dialog-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    cursor: pointer;
}

.tr-dialog-field select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.tr-dialog-field input:focus,
.tr-dialog-field select:focus,
.tr-dialog-field textarea:focus {
    outline: none;
    border-color: var(--tr-color-primary, #10b981);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.tr-dialog-field.has-error input,
.tr-dialog-field.has-error select,
.tr-dialog-field.has-error textarea {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.tr-dialog-field-hint {
    font-size: var(--tr-text-xs, 12px);
    color: var(--tr-color-slate-500, #64748b);
    margin: 0;
}

.tr-dialog-error {
    margin: 0 0 var(--tr-space-3);
    padding: var(--tr-space-3) var(--tr-space-4);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--tr-radius-md, 8px);
    color: #991b1b;
    font-size: var(--tr-text-sm, 13px);
    line-height: 1.4;
    display: none;
}

.tr-dialog-error.is-visible {
    display: block;
}

.tr-dialog-actions {
    border-top: 1px solid var(--tr-color-slate-100, #f1f5f9);
}

.tr-dialog-btn--primary {
    background: var(--tr-color-primary, #10b981);
    color: var(--tr-color-white, #fff);
}

.tr-dialog-btn--primary:hover {
    background: var(--tr-color-primary-600, #059669);
}

.tr-dialog-btn--default {
    background: var(--tr-color-slate-900, #0f172a);
    color: var(--tr-color-white, #fff);
}

.tr-dialog-btn--default:hover {
    background: var(--tr-color-slate-800, #1e293b);
}

.tr-confirm-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ======================================================
   PAGE-LEVEL BANNERS (.tr-warning-banner / .tr-info-banner)

   Use these for page-wide notices that need visual presence
   (admin notices, page-top warnings) — heavier than `.tr-alert`,
   with an amber title to draw the eye.

   Toggle visibility with the `.is-visible` modifier.
   ====================================================== */

.tr-warning-banner {
    display: none;
    background: var(--tr-color-warning-bg);
    border-radius: var(--tr-radius-md);
    padding: 14px var(--tr-space-4);
    margin-bottom: var(--tr-space-4);
}

.tr-warning-banner.is-visible {
    display: flex;
    gap: 10px;
}

.tr-warning-icon {
    color: var(--tr-color-warning);
    font-size: var(--tr-text-base);
    flex-shrink: 0;
    margin-top: 1px;
}

.tr-warning-title {
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    color: var(--tr-color-warning);
    margin-bottom: var(--tr-space-1);
}

.tr-warning-text {
    font-size: var(--tr-text-sm);
    color: var(--tr-color-slate-600);
    line-height: 1.5;
}

/* ======================================================
   CARD-STYLE BANNER (.tr-banner)

   Page-level banner with title + body + action-row layout.
   Uses a white card with a slate border; the variants tint the background
   and the border instead of carrying a coloured left edge.

   Variants:
     .tr-banner            — info (neutral white card)
     .tr-banner--warning   — amber tint
     .tr-banner--error     — red tint

   Slots:
     .tr-banner__title    — bold slate-900 heading
     .tr-banner__body     — slate-700 description (supports inline <code>)
     .tr-banner__actions  — flex row for buttons + secondary links
   ====================================================== */

.tr-banner,
.notice.tr-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--tr-space-3);
    background: #ffffff;
    border: 1px solid var(--tr-color-slate-200);
    border-radius: var(--tr-radius-lg);
    box-shadow: var(--tr-shadow-sm);
    padding: var(--tr-space-4) var(--tr-space-5);
    /* Match WP admin notice horizontal margins so the card spans the full
       content width (matches .tr-redirect-prompt placement on edit.php). */
    margin: var(--tr-space-4) 20px var(--tr-space-4) 2px;
    box-sizing: border-box;
}

.tr-banner--warning,
.notice.tr-banner--warning {
    background: var(--tr-color-warning-bg);
    border-color: rgba(245, 158, 11, 0.25);
}

.tr-banner--error,
.notice.tr-banner--error {
    background: var(--tr-color-error-bg);
    border-color: rgba(244, 63, 94, 0.25);
}

.tr-banner__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--tr-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tr-banner--warning .tr-banner__icon {
    color: var(--tr-color-warning);
}

.tr-banner--error .tr-banner__icon {
    color: var(--tr-color-error);
}

.tr-banner__content {
    flex: 1;
    min-width: 0;
}

.tr-banner__title {
    margin: 0 0 var(--tr-space-2);
    color: var(--tr-color-slate-900);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    line-height: 1.5;
}

.tr-banner--warning .tr-banner__title {
    color: var(--tr-color-warning);
}

.tr-banner--error .tr-banner__title {
    color: var(--tr-color-error);
}

.tr-banner__body {
    margin: 0 0 var(--tr-space-2);
    color: var(--tr-color-slate-700);
    font-size: var(--tr-text-sm);
    line-height: 1.5;
}

.tr-banner__body:last-child {
    margin-bottom: 0;
}

.tr-banner__body code {
    background: var(--tr-color-slate-100);
    color: var(--tr-color-slate-700);
    padding: 2px 6px;
    border-radius: var(--tr-radius-sm);
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.tr-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tr-space-2);
    margin-top: var(--tr-space-3);
}

/* WP-admin's `.notice a` (and `#wpbody-content .notice a:hover` with ID-prefix)
   forces blue + underline on any anchor inside a notice. Override here for
   anchor-buttons inside `.tr-banner` so primary stays white, secondary stays slate. */
.notice.tr-banner a.tr-btn--primary,
.notice.tr-banner a.tr-btn--primary:link,
.notice.tr-banner a.tr-btn--primary:visited,
.notice.tr-banner a.tr-btn--primary:hover,
.notice.tr-banner a.tr-btn--primary:focus,
.notice.tr-banner a.tr-btn--primary:active {
    color: var(--tr-color-white) !important;
    text-decoration: none !important;
}

.notice.tr-banner a.tr-btn--secondary,
.notice.tr-banner a.tr-btn--secondary:link,
.notice.tr-banner a.tr-btn--secondary:visited,
.notice.tr-banner a.tr-btn--secondary:hover,
.notice.tr-banner a.tr-btn--secondary:focus,
.notice.tr-banner a.tr-btn--secondary:active {
    text-decoration: none !important;
}

/* ======================================================
   ADMIN NOTICE CARD (.tr-notice-card)

   The TamRank card for the three dashboard banners that go out
   through core's admin_notices hook: migration complete, and the
   two coexistence states ("another SEO plugin is active"). Those
   have to keep `notice` and `is-dismissible`, because core renders
   the dismiss button from them and the banner's own click handler
   listens for it. So the markup keeps the core classes and this
   component overrides the look instead:

     - core's coloured left stripe (`.notice { border-left: 4px }`)
       becomes an even 1px slate border, the same outcome the stripe
       sweep gave every other TamRank notice;
     - core's beige `.notice-warning` / `.notice-success` fill
       becomes a white card with radius and shadow;
     - the card lines up exactly with the dashboard cards underneath it
       instead of with the raw notice area, which sits 24px wider on every
       side (84px at 1680, where the column stops growing). The two values
       below come straight from .tam-focus-dashboard in
       tamrank-dashboard.css: max-width 1400px with --tr-space-6 padding,
       so the card is that box minus its gutters;
     - the title and body are capped so the reading line does not grow
       with the screen. On a 2560 monitor an uncapped body runs some
       2300px, which is the thing that started this.

   VORM, ronde 3 (29 aug). Sam vroeg de kaart naar de vorm van de
   custom-schema-waarschuwing (.tr-warning-banner in
   tamrank-schema-builder.css): een lichte, compacte strook met een inline
   outline-icoon in plaats van een zware kaart met een gevulde tegel. Van de
   drie varianten in docs/coex-banner-ronde3-mockup.html is C gekozen.
   Gemeten kaarthoogte op de dashboardkolom van 1352px:
     --warning  164 -> 133px    --info  183 -> 153px    --success  106 -> 82px

   Twee dingen die daarmee veranderen, en waarom:

   1. De 40x40-tegel wordt een inline icoon van 20px. Die tegel was tot nu
      toe de betekenisdrager ("meaning travels through the tile"). Nu hij
      weg is moet het signaal ergens anders heen, dus tinten alle drie de
      standen hun kaart in plaats van alleen de waarschuwing. De tint blijft
      de tien procent die .tr-alert--* en .tr-banner--* al gebruiken, en een
      getinte kaart scheidt zich zonder rand van de warme grijze pagina, dus
      alle drie laten border en schaduw vallen.

   2. De titel blijft slate-900 en wordt niet de accentkleur, en dat is het
      hele verschil tussen variant C en de referentie. De oranje titel op de
      oranje tint die .tr-warning-banner kenmerkt meet namelijk 1,82:1, waar
      4,5:1 de ondergrens is. Geen enkele amber in variables.css haalt het
      daar; slate-900 haalt 15,16:1. Het icoon draagt de kleur nog wel, en
      draait daarvoor op de --tr-color-*-on-bg-tokens: de gewone
      accentkleuren zakken op hun eigen tint naar 1,82 / 2,11 / 3,85:1.

   Only the warning state tints its card. It is the one message on this
   screen that asks for something right now; the other two are white cards
   whose tile carries the colour. The tint is --tr-color-warning-bg, the
   same ten percent amber that .tr-alert--warning and .tr-banner--warning
   already use, and a tinted card separates itself from the warm grey page
   without a border, so it drops the border and the shadow.

   Slots:
     .tr-notice-card__icon     inline outline-icoon, 20px, accent-on-bg
     .tr-notice-card__content  title + body + actions column
     .tr-notice-card__title    slate-900 heading
     .tr-notice-card__body     slate-600 description
     .tr-notice-card__actions  button row (knoppen op .tr-btn--sm)
     .tr-notice-card__link     secondary link beside the button

   The card selector carries `.wp-core-ui` because core's own
   `.wp-core-ui .notice.is-dismissible` padding rule is (0,3,0);
   a plain `.notice.tr-notice-card` (0,2,0) would lose to it.
   ====================================================== */

.wp-core-ui .notice.tr-notice-card {
    display: flex;
    align-items: flex-start;
    /* 10px en 14px/space-4 komen van .tr-warning-banner, het component
       waar deze vorm op teruggaat. */
    gap: 10px;
    box-sizing: border-box;
    /* Same box as the dashboard content column: min(available, 1400px)
       minus the 24px gutters that .tam-focus-dashboard carries as padding.
       Measured, that puts the card's left edge on the dashboard cards at
       every width: 184px at 1280 and 1512, 244px at 1680, 684px at 2560. */
    width: calc(100% - var(--tr-space-6) * 2);
    max-width: calc(1400px - var(--tr-space-6) * 2);
    margin: var(--tr-space-4) auto;
    /* 48px on the right is the lane core parks the dismiss button in
       (.notice-dismiss is 24px wide, 12px from the top right corner). Die
       baan blijft ook in de compacte vorm staan, dus de strook is rechts
       niet zo krap als .tr-warning-banner, die geen dismiss-X heeft. */
    padding: 14px var(--tr-space-12) 14px var(--tr-space-4);
    /* Alle drie de standen zijn getint (zie punt 1 hierboven); de tint van
       --info staat hier als terugval voor een kaart zonder modifier. */
    background: var(--tr-color-info-bg);
    border: 1px solid transparent;
    border-radius: var(--tr-radius-md);
    box-shadow: none;
}

.wp-core-ui .notice.tr-notice-card--warning { background: var(--tr-color-warning-bg); }
.wp-core-ui .notice.tr-notice-card--info    { background: var(--tr-color-info-bg); }
.wp-core-ui .notice.tr-notice-card--success { background: var(--tr-color-success-bg); }

/* Het icoon draagt als enige nog de accentkleur, dus het moet op de tint
   leesbaar zijn: vandaar de -on-bg-tokens en niet de gewone accentkleur.
   De 1px topmarge zet de eerste tekstregel optisch op het icoon, net als
   .tr-warning-icon doet. */
.tr-notice-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--tr-color-info-on-bg);
}

.tr-notice-card--success .tr-notice-card__icon {
    color: var(--tr-color-success-on-bg);
}

.tr-notice-card--info .tr-notice-card__icon {
    color: var(--tr-color-info-on-bg);
}

.tr-notice-card--warning .tr-notice-card__icon {
    color: var(--tr-color-warning-on-bg);
}

.tr-notice-card__content {
    flex: 1;
    min-width: 0;
}

/* Core styles the paragraphs inside a notice (`.notice p`, 0,1,1),
   so every slot below is written as (0,2,0) to win that.

   The 680px cap on the title and the body is what keeps the card readable
   now that it spans the full width: measured, 70 characters of the 13px
   body is 666px and of the 15px title 752px, so one value for both lands
   them on the same edge instead of two ragged ones. The action row is not
   capped; it is left aligned and never that wide. */
.tr-notice-card .tr-notice-card__title {
    margin: 0 0 var(--tr-space-1);
    padding: 0;
    max-width: 680px;
    color: var(--tr-color-slate-900);
    /* 13px semibold, de maat van .tr-warning-title. Slate-900 en niet de
       accentkleur: zie punt 2 in het blok bovenaan. Gemeten 15,16:1 op de
       amber-tint en 14,45:1 op de slate-tint. */
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-semibold);
    line-height: var(--tr-leading-tight);
}

.tr-notice-card .tr-notice-card__title strong {
    font-weight: inherit;
}

/* Slate-600 voor alle drie de standen, niet alleen de getinte waarschuwing:
   nu elke kaart een tint draagt geldt de meting van ronde 2 overal. Gemeten
   6,44 / 6,13 / 6,32:1 op respectievelijk de amber-, slate- en groene tint;
   slate-500 zou daar rond 4,4:1 uitkomen. De 680px-cap blijft: die houdt de
   leesregel op 70 tekens, ongeacht hoe breed het scherm wordt. */
.tr-notice-card .tr-notice-card__body {
    margin: 0;
    padding: 0;
    max-width: 680px;
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-sm);
    line-height: var(--tr-leading-normal);
}

.tr-notice-card .tr-notice-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tr-space-2);
    margin: var(--tr-space-3) 0 0;
    padding: 0;
}

/* The warning state is the only tinted card. Same specificity as the base
   rule (0,3,0) and it sits after it, so it wins. Body and secondary link go
   one step darker here: slate-500 on this tint measures 4,4:1, just under
   the 4,5:1 line it still clears on white, and slate-600 measures 7,1:1. */
.wp-core-ui .notice.tr-notice-card--warning {
    background: var(--tr-color-warning-bg);
    border-color: transparent;
    box-shadow: none;
}

.tr-notice-card--warning .tr-notice-card__body,
.tr-notice-card--warning a.tr-notice-card__link,
.tr-notice-card--warning a.tr-notice-card__link:link,
.tr-notice-card--warning a.tr-notice-card__link:visited {
    color: var(--tr-color-slate-600);
}

/* Core paints every anchor inside a notice in the admin theme colour with
   an underline (`div.notice a`, 0,1,1). These take the card's own button
   and secondary link back, at (0,2,1), without !important. */
.tr-notice-card a.tr-btn--primary,
.tr-notice-card a.tr-btn--primary:link,
.tr-notice-card a.tr-btn--primary:visited,
.tr-notice-card a.tr-btn--primary:hover,
.tr-notice-card a.tr-btn--primary:focus {
    color: var(--tr-color-white);
    text-decoration: none;
}

/* Slate-600, niet slate-500: sinds ronde 3 draagt elke stand een tint, dus
   de correctie die ronde 2 alleen voor de waarschuwing maakte geldt overal. */
.tr-notice-card a.tr-notice-card__link,
.tr-notice-card a.tr-notice-card__link:link,
.tr-notice-card a.tr-notice-card__link:visited {
    color: var(--tr-color-slate-600);
    font-size: var(--tr-text-sm);
    font-weight: var(--tr-font-medium);
    text-decoration: none;
}

.tr-notice-card a.tr-notice-card__link:hover,
.tr-notice-card a.tr-notice-card__link:focus {
    color: var(--tr-color-slate-800);
    text-decoration: underline;
}

/* Below WP's admin breakpoint the sidebar folds and the content column is
   narrow, so the card drops its outer breathing room. Core narrows the
   dismiss lane to 46px here; the padding follows it. */
@media screen and (max-width: 782px) {
    .wp-core-ui .notice.tr-notice-card {
        gap: var(--tr-space-2);
        padding: var(--tr-space-3) var(--tr-space-12) var(--tr-space-3) var(--tr-space-3);
    }
}
