.g-suggest {
    margin-top: 1rem;
}

.g-suggest__button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    opacity: 0.8;
}

.g-suggest__button:hover,
.g-suggest__button:focus-visible {
    opacity: 1;
}

.g-suggest__hint {
    margin: 0 0 0.75rem;
}

.g-suggest__text {
    box-sizing: border-box;
    width: 100%;
    min-height: 10rem;
    font: inherit;
}

/* Errors are red in every theme (the --g-danger tokens), never the accent colour. */
.g-suggest__error {
    margin: 0.5rem 0 0;
    color: var(--g-danger, #b3261e);
}

/* A form dialog (a new book, a new author) */
.g-suggest__field { margin: 0 0 12px; }
.g-suggest__label { display: block; margin: 0 0 4px; font-weight: 600; font-size: 14px; }
.g-suggest__req { color: var(--g-danger, #b3261e); }
.g-suggest__input { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid #c2c2c2; border-radius: 8px; font: inherit; font-size: 15px; background: #fff; color: #222; }
.g-suggest__input:focus { outline: none; border-color: #5b7a99; box-shadow: 0 0 0 2px rgba(91, 122, 153, .25); }
.g-suggest__help { margin: 4px 0 0; font-size: 13px; opacity: .75; }
.g-suggest__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.g-suggest__matches { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #d9c88a; border-radius: 8px; background: #fff9e5; color: #3a3320; font-size: 14px; }
.g-suggest__matches p { margin: 0 0 6px; }
.g-suggest__matches ul { margin: 0; padding-left: 18px; list-style: disc; }
.g-suggest__by { opacity: .7; }
/* An empty-state prompt: "Can't find your book? Suggest it" */
.g-suggest--link { margin: 16px 0; text-align: center; }
.g-suggest--link .g-suggest__button { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; color: inherit; }

/* The dialog is wide on a desktop: two columns of fields, and the photographs side by side. */
@media (min-width: 861px) {
    .modal-popup.g-dialog.g-suggest-dialog .modal-inner-wrap {
        width: min(1040px, calc(100vw - 48px));
        margin-top: 5vh;
    }
}
.g-suggest__grid { display: grid; grid-template-columns: 1fr; column-gap: 20px; }
.g-suggest__field--notice { grid-column: 1 / -1; }
@media (min-width: 860px) {
    .g-suggest__grid { grid-template-columns: 1fr 1fr; }
    .g-suggest__grid > .g-suggest__field { grid-column: 1 / -1; }
    .g-suggest__grid > .g-suggest__field--half { grid-column: auto; }
    .g-suggest__hint { max-width: 70ch; }
}
.g-suggest__badge { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fff0c2; color: #6b4b00; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.g-suggest__notice { padding: 10px 12px; border: 1px solid #d9c88a; border-radius: 8px; background: #fff9e5; color: #3a3320; font-size: 14px; }
.g-suggest__photo { display: flex; flex-direction: column; gap: 8px; }
.g-suggest__file { font: inherit; font-size: 14px; max-width: 100%; }
.g-suggest__thumb { display: flex; align-items: flex-end; gap: 12px; }
.g-suggest__thumb[hidden] { display: none; }
.g-suggest__thumb img { max-height: 140px; max-width: 110px; border: 1px solid #c2c2c2; border-radius: 6px; object-fit: contain; background: #fff; }
.g-suggest__remove { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; font: inherit; font-size: 13px; color: inherit; }
.g-suggest__photo-status { margin: 0; font-size: 13px; min-height: 1em; }
.g-suggest__photo-status.g-suggest__error { color: var(--g-danger, #b3261e); }

/* The modal's content wrapper is a flex item that would otherwise shrink to what is in it. */
.g-suggest-dialog .modal-content > div { flex: 1 1 100%; min-width: 0; }
.g-suggest-dialog .g-dialog__text { width: 100%; }