/*
 * Copyright © OurGroceries, Inc. All rights reserved.
 */

:root {
    --dialog-body-side-padding: 0px;
    --list-desktop-width: 495px;
    /* Different for mobile and desktop because the latter needs space for drag handles: */
    --list-item-left-padding: 15px;
}

body {
    --list-width: 100vw;

    /* Changed in JS. 0 means the initial position (scrolled to the top), 1 means
    scrolled up enough that the header title is no longer visible. Always within
    those bounds. See configureAppBarNameScroll(). */
    --list-name-position: 0;

    /* On mobile we animate the title. This is overridden for desktop. */
    --list-name-animate: var(--list-name-position);

    /* Updated in JS, see configureStickyHeaders(). */
    --app-bar-height: 0;

    font-weight: 400;
    font-size: 16px;
    background-color: var(--your-lists-background-color);
}

body.list-type-METALIST {
    /* Always show title in app bar in metalist. */
    --list-name-animate: 1;
}

/* Generic "hidden" class to use as a mix-in. */
.hidden {
    display: none !important;
}

h1 {
    margin-top: 15px;
}

/* Ad stuff */

.ad {
    position: sticky;
    top: 25px;
    height: fit-content;
}

@media screen and (max-width: 899px) {
    /* Hide ads on narrow screens. */
    .ad {
        display: none;
    }
}

/* End ad stuff */

/* hide these things, we fold the menu into the overflow menu. */
.mobile-page-header-branding, .hamburger-button {
    display: none;
}

#your-lists {
    background: var(--your-lists-primary-background);
    padding-bottom: 80px;
    flex-grow: 1;
}

.configuring-initial-page :is(#your-lists, footer) {
    display: none;
}

.ui-button,
.ui-widget .ui-button {
    font-size: 14px;
}

.page-header {
    position: static;
    top: unset;
}

body:not(.list-type-MASTER) .list-type-MASTER-only {
    display: none;
}

/* App bar */

.app-bar-outer-container {
    position: sticky;
    top: 0;
    z-index: var(--list-top-header-z-index);
    color: white;
    background-color: var(--your-lists-top-nav-background);
}

.app-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--list-item-left-padding);

    .list-name {
        flex-grow: 1;
        font-size: 24px;
        font-family: var(--display-font-family);
        text-align: center;

        /* Don't allow multiple lines here, it can look bad for long list names.
        The user can see the full name by scrolling to the top of the list. */
        overflow: hidden;
        text-wrap: nowrap;
        text-overflow: ellipsis;

        /* Without this, its own min width will be its natural width, which may be
        too wide if the list name is too long. This will push the Add button over.
        Set the min width to zero to let it overflow. */
        min-width: 0;

        /* Move it down so it's invisible, we'll scroll it up when the user
        scrolls the list up. */
        transform: translateY(calc((1 - var(--list-name-animate)) * 1em));
        opacity: var(--list-name-animate);
    }
}

:where(.list-type-SHOPPING, .list-type-RECIPE) .app-bar .list-name {
    font-size: 20px;
}

.metalistIcon img {
    max-height: 34px;
    display: block;
}

.addItemButton {
    background: var(--icon-dark-green);
    color: white;
    border-radius: 10px;
    padding: 8px;
    border: none;
    cursor: pointer;
    min-width: 36px;
    min-height: 36px;
}

.addItemButton > i {
    font-size: 20px;
}

.backLink {
    display: flex;
    align-items: center;

    cursor: pointer;
    color: white;
    background: none;
    text-decoration: none;
    border: none;
    outline: none;

    .backLabel {
        font-size: 20px;
        position: relative;
        top: 1px;
    }
}

.menuButton, .backButton {
    --button-size: 38px;

    width: var(--button-size);
    min-width: var(--button-size);
    height: var(--button-size);
    display: grid;
    place-content: center;

    cursor: pointer;
    color: white;
    background: none;
    text-decoration: none;
    border: none;
    outline: none;
}

.backButton i {
    font-size: 22px;
    transform: translateX(-8%) translateY(1px);
}

.menuButton i {
    font-size: 22px;
    transform: translateY(4%);
}

/* End top header */

.nativeAppNotice {
    position: relative;
    background-color: rgb(0 0 0 / 15%);
    color: white;
    padding: 10px 35px 10px 15px;
    margin-block: 15px;
    display: none; /* flex when desktop */
    gap: 15px;
    align-items: center;
    border-radius: 5px;
    box-shadow: var(--shadow);
}

.nativeAppNoticeText {
    font-size: 16px;
    font-family: var(--display-font-family);
    font-weight: 100;
}

.nativeAppNoticeClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    user-select: none;
    color: #ddd;
}

.nativeAppNoticeClose:hover {
    color: white;
}

.contentArea {
    flex-grow: 1;
}

.your-lists-non-list-content {
    width: auto;
    margin: 0 var(--page-margin);
}

.add-rename-prompt-container {
    display: flex;
    align-items: baseline;
    gap: 10px;

    label {
        white-space: nowrap;
    }

    input {
        flex-grow: 1;
        min-width: 100px;
    }
}

.add-rename-error {
    font-weight: bold;
}

#addItemDialog {
    --settings-panel-animation: .15s ease-out;
}

#addItemDialogBody {
    input[type=checkbox] + label {
        margin-left: 5px;
    }
    input[type=radio] {
        margin-inline: 5px;
    }
}

.add-item-input-section {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 2;

    .add-item-input-wrapper {
        flex-grow: 1;

        > input {
            width: 100%;
            border: none;
            outline: none;
        }
    }
}

.add-item-settings-button {
    color: white;
    cursor: pointer;

    .fa {
        transition: transform var(--settings-panel-animation);
    }
}

.add-item-settings-section {
    /* grid so we can animate the height */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--settings-panel-animation);
}

.add-item-settings-section-inner {
    overflow: hidden;

    /* I'd like to add this padding to .add-item-settings-section-inner, but
    that prevents the grid-template-row from collapsing completely to 0fr. */
    > div {
        padding-inline: var(--dialog-padding);
    }

    > div:first-child {
        padding-top: 10px;
    }

    > div:last-child {
        padding-bottom: 10px;
    }
}

#addItemDialog:has(#addItemSettingsCheckbox:checked) {
    /* Make cog spin */
    .add-item-settings-button .fa {
        transform: rotateZ(90deg);
    }

    /* Show settings */
    .add-item-settings-section {
        grid-template-rows: 1fr;
    }
}

.add-item-rows-container {
    box-shadow: var(--shadow);

    /* so that the shadow is visible on the section headers */
    z-index: 1;
    position: relative;
}

#addItemError {
    display: none;
    margin: 1em 0;
    font-weight: bold;
}

#addItemMasterList {
    /*margin-top: 10px;*/

    /* Set this to relative so that when we get the position() of the rows, it's within
       this div. */
    position: relative;
}

#addItemMasterList .add-item-row {
    cursor: default;
    user-select: none;
    display: flex;
    align-items: center;
    background-color: var(--your-lists-list-row-background);
    gap: 8px;

    /* When using the up/down arrow keys to navigate the list, we
    scroll the newly highlighted item into view, but this can put it
    under the sticky header at the top. So add a scroll margin to avoid
    it. The height is a guess, slightly larger than the actual header. */
    scroll-margin-block-start: 25px;
}

#addItemMasterList .no-suggestions {
    cursor: default;
    user-select: none;
    text-align: center;
    padding: 50px 20px 0;
    color: gray;
    font-style: italic;
    text-wrap: balance;
}

#addItemMasterList .masterItemText {
    flex-grow: 1;
}

#addItemMasterList .masterItemNote,
#addItemMasterList .masterItemOnList {

    color: var(--your-lists-light-text-color);
    font-size: 14px;
    margin-top: 2px;
}

#addItemMasterList .masterItemDelete {
    cursor: pointer;
}

#addItemMasterList .disclosure-icon {
    --horizontal-pad: 7px; /* any more than this and it interferes with the photo thumbnail */
    --vertical-pad: 7px;

    color: var(--your-lists-placeholder-color);

    /* Increase the hit area */
    padding-inline: var(--horizontal-pad);
    padding-block: var(--vertical-pad);
    margin-inline: calc(-1 * var(--horizontal-pad));
    margin-block: calc(-1 * var(--vertical-pad));
    transition: color 100ms ease-in-out;

    &:hover {
        color: var(--body-color);
    }
}

@media (hover: hover) {
    #addItemMasterList .add-item-row:not(.highlighted):hover {
        background: var(--your-lists-list-row-hover-background);
    }
}

#addItemMasterList .add-items-from-recipe {
    color: gray;
    font-style: italic;
}

#addItemMasterList .highlighted {
    background: var(--your-lists-crossed-off-section-background);
    box-shadow: inset 0 0 2px 0 var(--dark-green-background);
}

/* ----------------------------------------------------------------------------------------------- */

.add-recipe-items-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.add-recipe-items-text {
    flex-grow: 1;
}

.add-recipe-items-note,
.add-recipe-items-description {

    color: var(--your-lists-light-text-color);
    font-size: 85%;
}

.import-items-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    input[type=file] {
        display: none;
    }

    .import-items-select-files-button {
        align-self: start;
    }

    .preview-table-container {
        max-height: 20ex;
        overflow: auto;

        .import-items-preview-header {
            font-weight: bold;
            margin-bottom: 10px;
        }

        table {
            background: rgb(0 0 0 / 5%);
            border: 1px solid rgb(0 0 0 / 10%);
            border-radius: 5px;
            border-collapse: separate;
            /* puts space to the sides too: */
            border-spacing: 10px 0;
            padding: 8px 0;
        }

        th {
            text-align: left;
            font-weight: bold;
        }

        th, td {
            white-space: nowrap;
            vertical-align: top;
        }
    }

    .import-error-message {
        font-weight: bold;
    }
}

.list-header {
    color: white;
    background: var(--your-lists-top-nav-background);
    padding: 10px var(--list-item-left-padding);
    width: var(--list-width);

    .list-name {
        font-size: 24pt;

        opacity: calc(1 - var(--list-name-animate));
    }
}

#masterListInstructions {
    margin-block: 20px;
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
}

.header-line {
    margin-bottom: 30px;
}

#listDiv {
    padding: 0;
    font-size: 16px;
    cursor: default;
    /*overflow: clip;*/ /* TODO why was this here? it clips the botton drop shadow */
}

.list-item + .list-item,
.item-list + .item-list,
.command-item {
    border-top: 1px solid var(--your-lists-separator-color);
}

.loading-list {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.add-an-item-container {
    --top-color: var(--your-lists-list-row-background);
    --bottom-color: var(--your-lists-crossed-off-section-background);

    height: 60px;
    background: linear-gradient(var(--top-color) 50%, var(--bottom-color) 50%);

    /* center .add-an-item */
    display: flex;
    align-items: center;
    justify-content: center;
}

body:not(.list-type-RECIPE) .inner-list-div:not(.crossed-off-items-present) .add-an-item-container {
    --bottom-color: var(--top-color);
    height: 28px;
    position: relative;

    .add-an-item {
        position: absolute;
        bottom: 0;
        transform: translateY(50%);
    }
}

.inner-list-div.crossed-off-items-present:not(.active-items-present) .add-an-item-container {
    /* If we have crossed off items but no active items, show the normal crossed-off background. */
    --top-color: var(--bottom-color);
}

body.list-type-RECIPE .add-an-item-container {
    --bottom-color: var(--your-lists-list-row-background);
}

.add-an-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: calc(100% - 20px);
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--your-lists-button-border-color);
    color: var(--your-lists-placeholder-color);
    background-color: var(--your-lists-list-row-background);
    box-shadow: var(--shadow);
}

.add-an-item i {
    color: var(--icon-dark-green);
}

/* TODO revisit */
/* make up for lack of drop shadow */
@media not print {
    @media (max-width: 899px) {
        #listDiv {
            /*border-bottom: 1px solid var(--your-lists-separator-color);*/
        }

        .list-item:first-child:not(.crossed-off),
        .item-list:first-child {
            /*border-top: 1px solid var(--your-lists-separator-color);*/
        }
    }
}

.list-row {
    box-sizing: border-box;
    width: 100%;
    padding: 7px var(--list-item-left-padding);
}

.list-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 0 0 var(--list-item-left-padding);
    position: relative;
    background-color: var(--your-lists-list-row-background);
}

.list-item .value-note {
    flex-grow: 1;
    padding: 7px 0;
    margin-right: 10px;
}

.list-item .value-count {
    opacity: 40%;
    font-size: 80%;
    margin-left: 0.3em;
}

:is(.list-item, .add-item-row, .add-recipe-items-row) .photo-thumbnail {
    width: 28px;
    min-width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
}

.list-item .star-icon {
    /* Total line is 28px, and icon is 20px. */
    padding: 4px;
}

.item-list {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-list .value {
    flex-grow: 1;
}

.list-is-empty {
    font-style: italic;
    color: #555;
}

.item-header, .dialog-box-select-header-minor {
    background-color: var(--your-lists-minor-row-background-color);
    color: white;
    font-weight: normal;
}

.item-header {
    padding: 3px var(--list-item-left-padding);
}

.major-item-header {
    background-color: var(--your-lists-major-row-background-color);
}

.metalist-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--icon-dark-green);
    font-family: var(--display-font-family);
    font-size: 22pt;
    font-weight: bold;
    line-height: 1.2;
    padding: 3px 20px;
    margin-top: 1em;
    margin-bottom: 0.3em;

    .metalist-add-button {
        cursor: pointer;
    }
}

.metalist-section-body {
    background-color: var(--your-lists-list-row-background);
    border-radius: 10px;
    box-shadow: var(--shadow);
    overflow: clip;
}

@media not print {
    .item-header {
        position: sticky;
        z-index: var(--item-header-z-index);
        top: var(--app-bar-height);
    }
}

:is(#addItemDialog, #addRecipeDialog) .item-header {
    padding-left: 5px;
    padding-right: 5px;
}

.tag-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 70%;
    margin-inline: auto;
    user-select: none;

    > div {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        color: var(--your-lists-command-text-color);
        background: var(--your-lists-tag-buttons-background);
        padding-block: 6px;
        cursor: pointer;
        border-left: 0.5px solid var(--your-lists-tag-buttons-border);
        border-right: 0.5px solid var(--your-lists-tag-buttons-border);

        &:last-child {
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border-bottom: 0.5px solid var(--your-lists-tag-buttons-border);
        }
    }
}

.command-item {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    color: var(--your-lists-command-text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
}

.drag-handle {
    cursor: grab;
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    font-size: 90%;
    color: var(--your-lists-drag-handle-color);
}

.item .edit {
    cursor: pointer;
    padding: 6px 15px 6px 10px;
    color: var(--icon-dark-green);
}

.drag-item .edit {
    display: none;
}

@media (hover: hover) {
    .item:hover .drag-handle,
    .drag-item .drag-handle {
        /* Only show the drag handle when hovering over the row. */
        visibility: visible;
    }

    .item:hover,
    .drag-item {
        background-color: var(--your-lists-list-row-hover-background);
    }
}

.drag-item {
    border: none !important;
}

.item .note {
    display: block;
    color: var(--your-lists-light-text-color);
    font-size: 85%;
    margin-top: 2px;
}

.item .value,
.item .note {
    line-height: 1.3;
}

.category-header, .dialog-box-select-header-minor {
    text-shadow: 0 2px 2px rgb(0 0 0 / 30%);
}

.crossed-off .value {
    /* Don't use single text-decoration property, it's not well supported in Safari: */
    text-decoration-line: line-through;
    text-decoration-color: var(--your-lists-item-crossed-off-line-color);
    text-decoration-thickness: 2px;

    /* Back up over the nbsp we use to extend the line-through. */
    text-indent: -.25em;
}

.crossed-off-category-header {
    color: white;
    background-color: var(--your-lists-crossed-off-category-headers);
}

.list-row.crossed-off {
    background-color: var(--your-lists-crossed-off-section-background);
}

.capsule {
    color: white;
    background-color: var(--your-lists-capsule-background-color);
    font-weight: bold;
    font-size: 15px;
    padding: 1px 13px;
    border-radius: 999px;
}

#listNotes {
    margin-block: 10px;
}

#listNotes.editing #listNotesView,
#listNotes:not(.editing) #listNotesEdit {

    display: none;
}

#listNotesView {
    cursor: pointer;
}

#listNotesView div {
    white-space: pre-wrap;
    font-size: 14px;
    overflow-wrap: break-word;

    a {
        color: white;
    }
}

#listNotesEdit textarea {
    width: 100%;
}

#listNotesEditButtons {
    margin-top: 10px;
}

/* Item details */

.item-details-top-button-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.item-details-star {
    display: flex;
    align-items: center;
}

.item-details-star img {
    width: 16px;
    height: 16px;
}

.item-details-star[data-star="0"] > :not(:nth-child(1)),
.item-details-star[data-star="1"] > :not(:nth-child(2)) {
    display: none;
}

.item-details-labeled-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.item-details-photo-section {
    --photo-section-gap: 8px;
    display: flex;
    flex-direction: column;
    gap: var(--photo-section-gap);

    .tag-buttons {
        /* no space between tab and photo */
        margin-top: calc(-1 * var(--photo-section-gap));
    }
}

.item-details-photo-section:not([data-photo-id=""]) .item-details-add-photo {
    display: none;
}

.item-details-photo-section[data-photo-id=""] :is(.item-details-remove-photo, .item-details-photo-image) {
    display: none;
}

.item-details-photo-image {
    cursor: pointer;
    border-radius: 5px;
}

.item-details-photo-error-message {
    color: var(--icon-red);
    font-weight: bold;
}

#itemDetailsPhotoFile {
    display: none;
}

.item-details-photo-progress-bar {
    display: none;
}

#containingList, #itemCategory {
    font-size: 1.1em;
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#itemName {
    margin: 10px 0 15px;
}

#itemName, #itemNote {
    width: 100%;
    box-sizing: border-box;
}

#listNotesEditButtons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0.5em;
}

.share-link-body {
    .share-link-radio-buttons {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: baseline;

        input[type=radio] {
            margin-inline: 10px 8px;
        }
    }

    .share-link-link-bar {
        display: flex;
        gap: 10px;
        align-items: baseline;

        input[type=url] {
            flex-grow: 1;
            font-size: 14px;
        }
    }

    &:not([data-shown-message="copied"]) .share-link-message-copied,
    &:not([data-shown-message="not-sharing"]) .share-link-message-not-sharing,
    &:not([data-shown-message="copy-failed"]) .share-link-message-copy-failed {

        display: none;
    }
}

/* --------------------------------------------------------------------------------- */
/* Category chooser. */

.chooseCategoryDialogNew {
    color: #888;
    font-size: small;
}

.dialog-box-select {
    --dialog-box-select-horizontal-padding: 15px;

    overflow: auto;
    flex-grow: 1;
    /* We specify a tabindex so that the text field does not have focus by default
    (which would bring up the keyboard), but we don't like the outline. */
    outline: none;
    /* Avoid scrolling the main page. */
    overscroll-behavior: contain;
}

.dialog-box-select-header-minor {
    padding: 3px var(--dialog-box-select-horizontal-padding);
    user-select: none;
    position: sticky;
    top: 0;
}

.dialog-box-select-header-major {
    font-family: var(--display-font-family);
    font-size: 16pt;
    color: var(--icon-dark-green);
    background: var(--your-lists-primary-background);
    padding: 16px 15px 8px;
    user-select: none;

    /* TODO removing this because it's not clear what it means for something that's
    visually "underneath" to be sticky. */
    /*position: sticky;*/
    /*top: 0;*/
}

.dialog-box-select-non-header {
    padding: 4px var(--dialog-box-select-horizontal-padding);
    user-select: none;
}

.dialog-box-select-non-header + .dialog-box-select-non-header {
    border-top: 1px solid var(--your-lists-separator-color);
}

.dialog-box-select-non-header:last-child {
    border-bottom: 1px solid var(--your-lists-separator-color);
}

@media (hover: hover) {
    .dialog-box-select-non-header:hover {
        background-color: var(--your-lists-list-row-hover-background);
    }
}

.dialog-box-select-non-header[data-selected="true"] {
    color: white;
    background-color: var(--icon-light-green);
}

.choose-category-dialog-form {
    padding: var(--dialog-padding);
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px;

    > input {
        flex-grow: 1;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------------- */
/* Pop up menu */

.popupMenu {
    position: absolute;
    inset: auto;
    margin: 0;

    background: var(--your-lists-popup-menu-background);
    border: 0;
    padding: 0 0 4px;
    border-radius: 5px;
    overflow: clip;
    text-align: left;
    z-index: var(--popup-menu-z-index);
    box-shadow: var(--your-lists-popup-menu-shadow);
    user-select: none;
}

.popupMenu::backdrop {
    background: var(--your-lists-dialog-backdrop-color);
    /*backdrop-filter: blur(10px);*/
}

.popupMenuItem {
    padding: 6px 13px;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.popupMenuSeparator {
    padding: 0;
    margin-block: 2px;
    height: 1px;
    background-color: var(--your-lists-separator-color);
}

.popupMenuText {
    text-align: center;
    margin: 4px auto;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--your-lists-light-text-color);
    cursor: default;
}

.popupMenuHeader {
    color: white;
    background: var(--icon-dark-green);
    text-transform: uppercase;
    font-size: 14px;
    cursor: default;
    margin-bottom: 2px;
}

.popupMenuAction {
    color: var(--your-lists-popup-action-text-color);
    font-size: 16px;
    cursor: pointer;
}

.popupMenuAction > .fa {
    margin-right: 7px;
}

.popupMenuAction > span > .fa {
    margin-left: 7px;
}

.popupMenuDangerAction {
    background-color: var(--icon-red);
    color: white;
}

@media (hover: hover) {
    .popupMenuAction:hover {
        background-color: var(--your-lists-popup-hover-color);
    }

    .popupMenuDangerAction:hover {
        background-color: var(--icon-red);
        color: white;
    }
}

/* --------------------------------------------------------------------------------- */
/* Nice checkmark to replace the default HTML one. */

.nice-checkmark {
    input {
        display: none;

        &:checked ~ .nice-checkmark-unchecked,
        &:not(:checked) ~ .nice-checkmark-checked {

            display: none;
        }
    }

    .nice-checkmark-checked, .nice-checkmark-unchecked {
        color: var(--icon-dark-green);
    }
}

/* --------------------------------------------------------------------------------- */
/* Full-screen modal spinner. */

.spinner {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: rgb(0 0 0 / 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: wait;

    .spinner-icon {
        color: var(--icon-dark-green);
        font-size: 50pt;
    }
}

/* --------------------------------------------------------------------------------- */
/* Printable version of Your Lists. */

#printCredits {
    display: none;
    border-top: 1px solid #ccc;
    padding-top: 3px;
}

@media print {
    :root {
        --your-lists-background-color: transparent;
        --your-lists-list-row-background: transparent;
    }

    #main-header-image, .tabs-container, #follow-us, .footer,
        .drag-handle, .app-bar-outer-container, .nativeAppNotice,
        #masterListInstructions, .ad, .popover-notice, #listNotesEdit,
        .hamburger-button, nav, header, footer, h1, .mobile-page-header-branding, .header-line,
        .add-an-item-container, .tag-buttons
    {
        display: none;
    }

    #printCredits {
        display: block;
    }

    .list-header .list-name {
        border-bottom: 1px solid #ccc;
        color: black;
        font-size: 20pt;
        margin: 1em 0 0 0;
        padding-bottom: 3px;
    }

    #listDiv {
        columns: 2;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        margin-left: var(--page-margin);
        margin-right: var(--page-margin);
    }

    .list-row {
        padding-left: 0;
    }

    /* Make headers more visible. */
    .category-header {
        background-color: transparent;
        color: black;
        border: none;
        margin-top: 1em;
        padding-left: 0;
        padding-right: 0;
    }

    .ui-widget-header {
        display: none;
    }
    .item {
        border: none !important;
        padding-left: 10px;
    }
    .item .value::before {
        content: "\2610\00A0\00A0";
    }
    .item .note {
        padding-left: 22px;
    }
    .item .edit,
    .item .photo-thumbnail {
        display: none;
    }

    /* Don't display crossed-off section, not useful on paper. */
    .crossed-off-category-header,
    .crossed-off-section-header,
    .command-item,
    .crossed-off {
        display: none;
    }

    #listNotes {
        padding: 0;
        border: 0;
        margin: 20px var(--page-margin);
        box-shadow: none;
    }

    #listNotesView {
        display: block !important;
    }
}

@media not print {
    @media (width >= 900px) {
        /* desktop mods */
        :root {
            --dialog-body-side-padding: var(--dialog-padding);
            --list-item-left-padding: 20px;
        }

        body {
            --list-width: var(--list-desktop-width);
        }

        .mobile-only {
            display: none !important;
        }

        .main-content {
            width: var(--single-column-width);
            margin: 0 auto;
        }

        .app-bar-inner-container {
            /* Page width container */
            width: var(--single-column-width);
            margin-inline: auto;
        }

        body:not(.show-ads) .app-bar-inner-container {
            width: var(--list-desktop-width);
        }

        .app-bar {
            width: var(--list-desktop-width);
            padding: 10px 0;
        }

        #listName {
            font-size: 32px;
        }

        .metalistIcon {
            /* no need for this on desktop site */
            display: none;
        }

        .contentArea {
            margin-inline: auto;
            display: flex;
            justify-content: space-between;
            width: var(--single-column-width);
            padding-bottom: 10vh;
        }

        .popupMenuHeader {
            font-size: 10px;
        }

        .popupMenuAction {
            font-size: 14px;
        }

        .popupMenuMobileOnly {
            display: none;
        }

        .your-lists-non-list-content {
            margin: 0;
        }

        #listDiv {
            width: var(--list-desktop-width);
            border-radius: 10px;
        }

        .inner-list-div {
            box-shadow: var(--shadow);
        }

        body:not(.show-ads) .non-ad {
            width: fit-content;
            margin: 0 auto;
            max-width: var(--list-desktop-width);
        }

        .nativeAppNotice {
            display: flex;
        }

        .dialog-box-select {
            border-bottom: 1px solid var(--your-lists-separator-color);
        }
    }

    @media (width < 900px) {
        /* mobile mods */
        .desktop-only {
            display: none !important;
        }

        .dialog-mobile-full-screen {
            width: 100dvw;
            height: 100dvh;
            max-width: 100dvw;
            max-height: 100dvh;
            border-radius: 0;
            box-shadow: none;

            .dialog-title {
                display: none;
            }

            /* hide the button panel if all its buttons are hidden on mobile. */
            .dialog-button-panel:not(:has(.ui-button:not(.desktop-only))) {
                display: none;
            }
        }
    }
}

@media (any-pointer: coarse) {
    .list-item, .item-list {
        /* match iOS app */
        min-height: 44px;
    }
}