/* ============================================================
   Nanmayil — Component Library
   ------------------------------------------------------------
   Reusable UI primitives. Reads from tokens.css + base.css.
   Class-based, BEM-ish (.component, .component--variant,
   .component__part). Zero framework dependencies.
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    --btn-bg:        var(--color-brand);
    --btn-bg-hover:  var(--color-brand-strong);
    --btn-color:     var(--color-ink-inverse);
    --btn-border:    transparent;
    --btn-shadow:    var(--shadow-sm);
    --btn-shadow-h:  var(--shadow-brand);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height-md);
    padding: 0 var(--space-6);
    border-radius: var(--control-radius);
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--btn-shadow);
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
    box-shadow: var(--btn-shadow-h);
    transform: translateY(-1px);
    text-decoration: none;
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--btn-shadow), var(--shadow-focus);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--shadow-xs);
}

/* Variants */

.btn--primary {
    --btn-bg:       var(--color-brand);
    --btn-bg-hover: var(--color-brand-strong);
    --btn-color:    var(--color-ink-inverse);
}

.btn--secondary {
    --btn-bg:       var(--color-surface);
    --btn-bg-hover: var(--color-canvas-alt);
    --btn-color:    var(--color-ink);
    --btn-border:   var(--color-border-strong);
    --btn-shadow:   var(--shadow-xs);
    --btn-shadow-h: var(--shadow-sm);
}

.btn--ghost {
    --btn-bg:       transparent;
    --btn-bg-hover: var(--color-brand-tint);
    --btn-color:    var(--color-brand);
    --btn-border:   transparent;
    --btn-shadow:   none;
    --btn-shadow-h: none;
}

.btn--outline {
    --btn-bg:       transparent;
    --btn-bg-hover: var(--color-brand);
    --btn-color:    var(--color-brand);
    --btn-border:   var(--color-brand);
    --btn-shadow:   none;
    --btn-shadow-h: var(--shadow-sm);
}
.btn--outline:hover { color: var(--color-ink-inverse); }

.btn--gold {
    --btn-bg:       var(--color-accent);
    --btn-bg-hover: var(--color-accent-deep);
    --btn-color:    var(--color-ink);
}
.btn--gold:hover { color: var(--color-ink-inverse); }

.btn--danger {
    --btn-bg:       var(--color-danger);
    --btn-bg-hover: #8C2218;
    --btn-color:    #fff;
}

.btn--link {
    --btn-bg:       transparent;
    --btn-bg-hover: transparent;
    --btn-color:    var(--color-brand);
    --btn-border:   transparent;
    --btn-shadow:   none;
    --btn-shadow-h: none;
    height: auto;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.btn--link:hover { transform: none; color: var(--color-brand-strong); }

/* Sizes */

.btn--sm {
    height: var(--control-height-sm);
    padding: 0 var(--space-4);
    font-size: var(--text-xs);
}

.btn--lg {
    height: var(--control-height-lg);
    padding: 0 var(--space-8);
    font-size: var(--text-base);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--pill { border-radius: var(--radius-pill); }

.btn--icon {
    padding: 0;
    width: var(--control-height-md);
    aspect-ratio: 1 / 1;
}

/* Loading state — add .is-loading and optionally disabled */
.btn.is-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.btn.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: 0.6;
    animation: spin 0.7s linear infinite;
    color: var(--color-ink-inverse);
}
.btn--secondary.is-loading::after,
.btn--ghost.is-loading::after,
.btn--outline.is-loading::after { color: var(--color-brand); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   CARDS
   ============================================================ */

.card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
    overflow: hidden;
}

.card--hover:hover,
.card.is-interactive:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}

.card--flat {
    box-shadow: none;
    background: var(--color-canvas-alt);
    border-color: transparent;
}

.card--editorial {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.card__body {
    padding: var(--space-6);
}

.card__header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-canvas);
}

.card__media {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--color-canvas-alt);
    overflow: hidden;
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-editorial);
}
.card--hover:hover .card__media img,
.card.is-interactive:hover .card__media img {
    transform: scale(1.04);
}

/* Product card — most important commerce card */
.card--product {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
}

.card--product .card__media {
    aspect-ratio: 1 / 1;
    background: var(--color-canvas);
}

.card--product .card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
    flex: 1;
}

.card--product .card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    color: var(--color-ink);
}

.card--product .card__category {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-mute);
}

.card--product .card__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}
.card--product .price {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
}
.card--product .price__original {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-ink-mute);
    text-decoration: line-through;
}
.card--product .price__discount {
    font-size: var(--text-xs);
    color: var(--color-success);
    font-weight: var(--weight-semibold);
}

/* Ribbon — decorative label on product card */
.card__ribbon {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: var(--color-ink);
    color: var(--color-ink-inverse);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    z-index: var(--z-raised);
}
.card__ribbon--gold { background: var(--color-accent); color: var(--color-ink); }
.card__ribbon--danger { background: var(--color-danger); color: #fff; }

/* ============================================================
   FORM INPUTS
   ============================================================ */

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

.field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
}
.field__label .required {
    color: var(--color-danger);
    margin-left: 2px;
}

.field__help {
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
}

.field__error {
    font-size: var(--text-xs);
    color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.field__error::before {
    content: '⚠';
    font-size: var(--text-sm);
}

.input,
.textarea,
.select {
    width: 100%;
    min-height: var(--control-height-md);
    padding: 0 var(--space-4);
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--control-radius);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-ui);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}

.textarea {
    padding: var(--space-3) var(--space-4);
    min-height: 120px;
    resize: vertical;
    line-height: var(--leading-relaxed);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-ink-faint);
}

.input:hover,
.textarea:hover,
.select:hover {
    border-color: var(--color-neutral-400);
}

.input:focus,
.textarea:focus,
.select:focus,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--shadow-focus);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
    background: var(--color-canvas-alt);
    color: var(--color-ink-mute);
    cursor: not-allowed;
}

.input--error,
.textarea--error,
.select--error,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}
.input--error:focus,
.textarea--error:focus,
.select--error:focus {
    box-shadow: 0 0 0 3px rgba(179, 45, 34, 0.22);
}

/* Select — custom chevron */
.select {
    padding-right: var(--space-10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231A1A1A' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 12px;
    cursor: pointer;
}

/* Input with leading / trailing slot */
.input-group {
    position: relative;
    display: flex;
    align-items: stretch;
}
.input-group .input {
    flex: 1;
    min-width: 0;
}
.input-group__addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
    background: var(--color-canvas-alt);
    border: 1px solid var(--color-border-strong);
    color: var(--color-ink-mute);
    font-size: var(--text-sm);
}
.input-group__addon:first-child {
    border-right: 0;
    border-radius: var(--control-radius) 0 0 var(--control-radius);
}
.input-group__addon:last-child {
    border-left: 0;
    border-radius: 0 var(--control-radius) var(--control-radius) 0;
}
.input-group .input:not(:first-child) { border-radius: 0 var(--control-radius) var(--control-radius) 0; }
.input-group .input:not(:last-child)  { border-radius: var(--control-radius) 0 0 var(--control-radius); }

/* Checkbox & radio */
.checkbox,
.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-ink);
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border-strong);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
    position: relative;
    flex-shrink: 0;
}
.checkbox input[type="checkbox"] { border-radius: var(--radius-xs); }
.radio input[type="radio"] { border-radius: var(--radius-pill); }

.checkbox input[type="checkbox"]:checked,
.radio input[type="radio"]:checked {
    background: var(--color-brand);
    border-color: var(--color-brand);
}
.checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 10px;
    height: 6px;
    border: 2px solid #fff;
    border-top: 0;
    border-right: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}
.radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}
.checkbox input[type="checkbox"]:focus-visible,
.radio input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* ============================================================
   BADGES, TAGS, CHIPS
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    background: var(--color-canvas-alt);
    color: var(--color-ink);
    line-height: 1.4;
}

.badge--brand   { background: var(--color-brand-tint); color: var(--color-brand-strong); }
.badge--success { background: var(--color-success-bg); color: var(--color-success); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--info    { background: var(--color-info-bg); color: var(--color-info); }
.badge--gold    { background: var(--color-accent-soft); color: var(--color-ink); }
.badge--solid   { background: var(--color-ink); color: var(--color-ink-inverse); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 32px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.chip:hover { border-color: var(--color-brand); color: var(--color-brand); }
.chip[aria-pressed="true"],
.chip.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-ink-inverse);
}
.chip__close {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    opacity: 0.75;
}
.chip__close:hover { opacity: 1; background: rgba(255,255,255,0.2); }

/* ============================================================
   NAV + MENU PRIMITIVES
   ============================================================ */

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast), background var(--duration-fast);
    position: relative;
}
.nav-link:hover {
    color: var(--color-brand);
    background: transparent;
    text-decoration: none;
}
.nav-link[aria-current="page"],
.nav-link.is-active {
    color: var(--color-brand);
}
.nav-link[aria-current="page"]::after,
.nav-link.is-active::after {
    content: '';
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 4px;
    height: 1px;
    background: var(--color-accent);
}

/* ============================================================
   MODAL + DIALOG + DRAWER
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
}
.modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    width: min(520px, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-editorial);
}
.modal.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

.modal__header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.modal__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
}
.modal__close {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.modal__close:hover {
    background: var(--color-canvas-alt);
    color: var(--color-ink);
}

.modal__body {
    padding: var(--space-6);
    overflow-y: auto;
}

.modal__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-canvas);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Drawer — slide from right */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 92vw);
    background: var(--color-surface);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-drawer);
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-editorial);
    display: flex;
    flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer--left {
    right: auto;
    left: 0;
    transform: translateX(-100%);
}
.drawer--left.is-open { transform: translateX(0); }

/* ============================================================
   TOAST
   ============================================================ */

.toast-region {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
    max-width: 380px;
}
.toast {
    pointer-events: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-brand);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    animation: toast-in var(--duration-base) var(--ease-editorial);
}
.toast--success { border-left-color: var(--color-success); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--danger  { border-left-color: var(--color-danger); }
.toast--info    { border-left-color: var(--color-info); }
.toast__title { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-ink); }
.toast__body  { font-size: var(--text-sm); color: var(--color-ink-soft); margin-top: 2px; }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   TABLE — data
   ============================================================ */

.table {
    width: 100%;
    font-size: var(--text-sm);
    border-collapse: collapse;
    background: var(--color-surface);
}
.table thead th {
    text-align: left;
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    padding: var(--space-3) var(--space-4);
    background: var(--color-canvas-alt);
    border-bottom: 1px solid var(--color-border);
}
.table tbody td {
    padding: var(--space-4);
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: middle;
}
.table tbody tr:hover {
    background: var(--color-canvas);
}
.table tbody tr:last-child td { border-bottom: 0; }

.table--hover tbody tr { cursor: pointer; }

/* ============================================================
   SKELETON — loading placeholder
   ============================================================ */

.skeleton {
    background: linear-gradient(90deg,
        var(--color-neutral-100) 0%,
        var(--color-neutral-200) 50%,
        var(--color-neutral-100) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: var(--radius-sm);
    color: transparent;
    user-select: none;
}
.skeleton--text {
    height: 0.85em;
    border-radius: var(--radius-xs);
    margin: 0.2em 0;
}
.skeleton--line-sm { width: 60%; }
.skeleton--line-md { width: 80%; }
.skeleton--line-lg { width: 100%; }
.skeleton--block {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
}
.skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-6);
    gap: var(--space-3);
    color: var(--color-ink-soft);
}
.empty-state__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-canvas-alt);
    color: var(--color-ink-mute);
    margin-bottom: var(--space-2);
}
.empty-state__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
}
.empty-state__body {
    max-width: 40ch;
    color: var(--color-ink-mute);
}

/* ============================================================
   STATUS PILL — order status, role
   ============================================================ */

.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    line-height: 1.6;
}
.status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status--pending  { background: var(--color-warning-bg); color: var(--color-warning); }
.status--paid     { background: var(--color-success-bg); color: var(--color-success); }
.status--shipped  { background: var(--color-info-bg);    color: var(--color-info); }
.status--delivered{ background: var(--color-brand-tint); color: var(--color-brand-strong); }
.status--cancelled{ background: var(--color-danger-bg);  color: var(--color-danger); }
.status--draft    { background: var(--color-neutral-100); color: var(--color-neutral-700); }

/* ============================================================
   DIVIDER — editorial gold rule
   ============================================================ */

.rule-gold {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-accent);
    margin: var(--space-4) 0;
}
.rule-gold--center { margin-inline: auto; }

/* ============================================================
   BREADCRUMB
   ============================================================ */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
    list-style: none;
    padding: 0;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumb li + li::before {
    content: '/';
    color: var(--color-neutral-400);
    margin-right: var(--space-1);
}
.breadcrumb a {
    color: var(--color-ink-mute);
    text-decoration: none;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.breadcrumb a:hover { color: var(--color-brand); text-decoration: underline; }
.breadcrumb [aria-current="page"] {
    color: var(--color-ink);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

/* ============================================================
   ALERT / INLINE MESSAGE
   ============================================================ */

.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-canvas-alt);
    color: var(--color-ink);
    font-size: var(--text-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.alert--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-bg);  border-color: var(--color-danger);  color: var(--color-danger); }
.alert--info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }
.alert__icon { flex-shrink: 0; }
.alert__title { font-weight: var(--weight-semibold); }
.alert__body  { margin-top: 2px; color: inherit; opacity: 0.9; }

/* ============================================================
   TRUST STRIP (row of small value-props)
   ============================================================ */

.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}
.trust-item__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-brand-tint);
    color: var(--color-brand);
    flex-shrink: 0;
}
.trust-item__title {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    display: block;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
    padding: var(--space-6) 0;
}
.pagination__item {
    min-width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: background var(--duration-fast), color var(--duration-fast);
}
.pagination__item:hover { background: var(--color-canvas-alt); }
.pagination__item[aria-current="page"] {
    background: var(--color-brand);
    color: var(--color-ink-inverse);
    font-weight: var(--weight-semibold);
}
.pagination__item:disabled,
.pagination__item[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}