/* The site talking back to the reader, in one hand on every page: the note
   that says what just happened, the question asked before something can't be
   undone, and a form that has been sent. Paired with atlantis.js and linked by
   every page, admin included, so none of them invents its own. */

/* ------------------------------------------------------------------ notes */

/* Brown slips that hang from the top of the window, newest at the bottom.
   The host is only a column; each note is its own slip and leaves on its own
   clock. A note about something that went wrong is rust rather than brown and
   stays a good while longer — the one you most need to read used to look like
   all the others and be gone in two seconds. */

.messages {
    position: fixed;
    left: 50%;
    top: clamp(10px, 1.4vw, 22px);
    /* Above the sidebar and the slips, so a note is never half-covered by
       whatever the page happens to have open. */
    z-index: 1100;
    translate: -50% 0;
    width: min(92vw, 420px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* The empty column mustn't swallow clicks meant for the page under it. */
    pointer-events: none;
}

.message {
    margin: 0;
    padding: 0.3em 0.8em 0.4em;
    border-radius: 9px;
    background-color: rgba(53, 39, 15, 0.92);
    color: #FBEFD6;
    text-align: center;
    font-size: clamp(13px, 0.9vw, 16px);
    box-shadow: 0 14px 34px rgba(40, 26, 10, 0.3);
    cursor: pointer;
    pointer-events: auto;
    animation: message-in 0.3s ease-out;
    transition: opacity 0.45s ease-out, translate 0.45s ease-out;
}

.message.is-bad {
    background-color: rgba(122, 36, 22, 0.95);
    color: #FFE9DF;
    box-shadow: 0 14px 34px rgba(80, 18, 8, 0.35);
}

.message.leaving {
    opacity: 0;
    translate: 0 -14px;
    pointer-events: none;
}

@keyframes message-in {
    from { opacity: 0; translate: 0 -10px; }
}

/* ------------------------------------------------------------- the question */

/* Atlantis.confirm(), and every `data-confirm`. Same brown and cream as the
   notes so it reads as the site asking rather than the browser. */

.atl-confirm {
    width: min(92vw, 380px);
    /* On the form inside, not here: a click on the dialog itself is how a
       click on the backdrop is told apart, and padding would count as one. */
    padding: 0;
    border: none;
    border-radius: 12px;
    background: #FBEFD6;
    color: #35270F;
    box-shadow: 0 24px 60px rgba(40, 26, 10, 0.35);
    font-size: 15px;
    line-height: 1.45;
}

.atl-confirm form {
    padding: 18px 20px 16px;
}

.atl-confirm::backdrop {
    background: rgba(25, 18, 6, 0.45);
}

.atl-confirm[open] {
    animation: atl-confirm-in 0.18s ease-out;
}

@keyframes atl-confirm-in {
    from { opacity: 0; translate: 0 8px; }
}

.atl-confirm-text {
    margin: 0 0 16px;
    white-space: pre-line;
}

.atl-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.atl-confirm-actions button {
    font: inherit;
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(53, 39, 15, 0.35);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.atl-confirm-actions .atl-confirm-yes {
    border-color: transparent;
    background: #35270F;
    color: #FBEFD6;
}

.atl-confirm-actions .atl-confirm-yes.is-danger {
    background: #8A2A1A;
}

.atl-confirm-actions button:focus-visible {
    outline: 2px solid #C98A2B;
    outline-offset: 2px;
}

/* On the staff pages every dialog is the admin theme's dark panel
   (admin.css), and the question follows suit rather than being the one
   cream box in the building. */
.root-page .atl-confirm-actions button {
    border-color: var(--oc-line-2);
}

.root-page .atl-confirm-actions .atl-confirm-yes {
    background: var(--oc-btn);
    color: var(--oc-on-accent);
}

.root-page .atl-confirm-actions .atl-confirm-yes.is-danger {
    background: var(--oc-bad);
    color: var(--oc-abyss);
}

.root-page .atl-confirm-actions button:focus-visible {
    outline-color: var(--oc-tide);
}

/* -------------------------------------------------------------- busy forms */

/* A form that has been sent (atlantis.js) dims its buttons and shows it is
   working, so the second click that used to come back as "too fast" doesn't
   happen. */

form.is-busy button[type="submit"],
form.is-busy button:not([type]),
form.is-busy input[type="submit"] {
    opacity: 0.6;
    cursor: progress;
}

/* -------------------------------------------------------------- uploads */

/* The bar a `data-upload` form draws while its files go up. */

.atl-progress {
    display: block;
    width: 100%;
    margin-top: 8px;
}

.atl-progress-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(53, 39, 15, 0.15);
    overflow: hidden;
}

.atl-progress-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: #35270F;
    transition: width 0.2s linear;
}

.atl-progress.is-processing .atl-progress-fill {
    width: 100%;
    animation: atl-progress-pulse 1.2s ease-in-out infinite;
}

.atl-progress-label {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: 0.8;
}

.root-page .atl-progress-track { background: var(--oc-line); }
.root-page .atl-progress-fill { background: var(--oc-tide); }

@keyframes atl-progress-pulse {
    50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .message,
    .atl-confirm[open] { animation: none; }
    .message { transition: none; }
    .atl-progress.is-processing .atl-progress-fill { animation: none; }
}

/* ----------------------------------------------------------- live filters */

/* Results a `data-live-filter` form is fetching afresh: still readable, just
   plainly not the final word yet. */
[aria-busy="true"].live-results,
.live-results.is-loading {
    opacity: 0.55;
    transition: opacity 0.15s ease-out;
}