@layer base {
/**
 * modals.css — Guide-x
 * Modal system: backdrop, box, inputs, buttons.
 * Includes delete-project modal and new-project modal.
 * Depends on: layout.css, theme.css (tokens).
 *
 * Pass 2: re-themed to parchment + ink per design/unified-ui.html. Class
 * names and DOM hooks unchanged — including .modal-backdrop.open and the
 * body.gf-modal-open hook used by the bottom-aurora suppressor.
 */

/* ── Modal backdrop ── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 18, 14, 0.55);
    backdrop-filter: blur(14px) saturate(1.05);
    -webkit-backdrop-filter: blur(14px) saturate(1.05);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}
.modal-backdrop.open { display: flex; }

/* These confirm dialogs sit ABOVE the plan-form modal (which is
   itself at --z-modal). They're stacked one tier higher so the user can
   confirm "discard / save anyway / unnamed rooms" without the underlying
   plan form catching their click first.

   NOTE: This @layer base rule is defeated by guide-x-adapter.css's
   unlayered `.modal-backdrop { z-index: 100 }`, so the effective stacking
   for these modals is set by an unlayered defensive block in
   guide-x-adapter.css (around line 3142). Kept here for documentation
   intent only. */
#planDiscardModal,
#planNoSpacesModal,
#planUnnamedRoomsModal {
    z-index: calc(var(--z-modal) + 100);
}

/* The "brief required" prompt opens from the topbar's Initial Assessment
   button while a plan-form may already be open — sits above the confirm
   tier so it's always the topmost interactive surface. */
#assessRequiresBriefModal {
    z-index: calc(var(--z-modal) + 400);
}

/* When any modal is open, kill the bottom aurora so it doesn't bleed
   through under a translucent modal box. Toggled via body.gf-modal-open
   from a MutationObserver in JS. */
body.gf-modal-open .chat-area::before,
body.gf-modal-open .chat-area::after { opacity: 0; animation: none; }

/* ── Modal box ── */
.modal-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 26px;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow-3);
    color: var(--ink);
}

.modal-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ink);
}

.modal-input {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--ink);
    font-size: 13px;
    padding: 11px 14px;
    outline: none;
    width: 100%;
    font-family: var(--font);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.modal-input:focus {
    background: var(--bg);
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.modal-input::placeholder { color: var(--ink-3); }

/* ── Modal action buttons ── */
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 9px 16px;
    border-radius: var(--r);
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0;
    font-family: var(--font);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.modal-btn.cancel {
    background: var(--bg);
    color: var(--ink);
    border-color: var(--border);
    box-shadow: var(--shadow-1);
}
.modal-btn.cancel:hover { background: var(--hover); }

.modal-btn.confirm {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.modal-btn.confirm:hover { background: #222; }
.modal-btn.confirm:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-btn.danger {
    background: #fff;
    color: var(--red);
    border-color: rgba(212,77,77,0.35);
}
.modal-btn.danger:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}
.modal-btn.danger:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-warning {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.55;
}
.modal-warning strong { color: var(--ink); }

}