/* Entering the weekly trial.
 *
 * Its own file because the panel has two homes -- the trial on the Fury
 * Calendar and the Trials tab on a Profile Hub -- and js/trial-entry.js is
 * shared between them. These rules lived in calendar.css, which the profile
 * never loads, so the panel arrived there with no styles at all: the
 * screenshot at whatever size Discord happened to serve it, and the form as a
 * plain stack of inputs.
 */

.te { display: grid; gap: 12px; }
.te-title { margin: 0; font-size: 1.05rem; }

.te-body {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.te-image,
.te-preview {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
    background: var(--panel-2);
}

.te-how {
    padding: 12px 16px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: var(--panel-2);
    font-size: 0.86rem;
}
.te-how ol { margin: 8px 0; padding-left: 20px; line-height: 1.6; }
.te-how p { margin: 8px 0 0; }

.te-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.te-counts .pill {
    padding: 3px 10px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.76rem;
}

.te-form { display: grid; gap: 12px; }
.te-form label { display: grid; gap: 5px; font-size: 0.85rem; font-weight: 600; }
.te-upload { display: flex; gap: 8px; }
.te-upload .ghost { flex-shrink: 0; }
.te-form .primary { justify-self: start; }