/************* Alerts *************/

/* The Alerts page (account/index.html, assets/js/account/alerts.js): the title
   row with its count and New alert, then one card per alert (title, conditions,
   Edit, the switch, then its matches), the usage line and Recently sent. */
#alerts {
}

#alertsHeader {
}

#alertsHeaderText {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
}

#alertsHeaderTextTitle {
}

#alertsHeaderTextCount {
    color: var(--muted);
    font-size: 15px;
}

/* the empty state carries its own primary button, so this one steps aside */
#alertsHeaderNew.hidden,
#alertsIntro.hidden {
    display: none;
}

#alertsIntro {
}

/* "Alert created." after the form */
#alertsFlash {
    display: none;
    margin-top: 20px;
    padding: 12px 16px;
    border-left: 3px solid var(--positive);
    border-radius: var(--radius-small);
    background-color: var(--surface);
    font-size: 15px;
    line-height: 1.5;
}

#alertsFlash.active {
    display: block;
}

/* Free plan: the daily limit, a meter of the last 24 hours and the upgrade */
#alertsPlan {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 24px;
    padding: 18px 20px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    background-color: var(--surface);
}

#alertsPlan.active {
    display: flex;
}

/* at the limit the panel takes the pale maroon wash, so it can't be missed */
#alertsPlan.full {
    border-color: var(--tint-border);
    background-color: var(--tint);
}

#alertsPlanText {
    flex: 1 1 320px;
    min-width: 0;
}

#alertsPlanTextTitle {
    font-size: var(--font-size-h3);
    font-weight: 700;
}

#alertsPlanTextNote {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

#alertsPlan.full #alertsPlanTextNote {
    color: var(--black);
}

/* the share of today's limit used */
#alertsPlanMeter {
    flex: 0 0 140px;
    height: 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background-color: var(--track);
}

#alertsPlanMeterFill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    background-color: var(--primary);
}

#alertsPlanUpgrade {
    flex: none;
}

#alertsPlanUpgrade.hidden {
    display: none;
}

/************* Loading *************/

/* the skeletons sit on the same tinted band as the list, so nothing jumps when it loads */
#alertsLoading {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
    padding: 16px;
    border-radius: var(--radius-card);
    background-color: var(--tint);
}

#alertsLoading.active {
    display: flex;
}

/* skeleton cards in the shape of the real ones: title and conditions, the switch */
.alertsLoadingRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 20px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--tint-border);
    border-radius: var(--radius-card);
    background-color: #FFF;
}

.alertsLoadingRowSwitch {
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    height: 26px;
}

.alertsLoadingRowText {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alertsLoadingRowTextTitle {
    width: 70%;
    height: 18px;
}

.alertsLoadingRowTextMeta {
    width: 40%;
}

.alertsLoadingRowPrice {
    display: none;
}

/************* Empty state *************/

#alertsEmpty {
    display: none;
    margin-top: 40px;
}

#alertsEmpty.active {
    display: block;
}

#alertsEmptyPitch {
    max-width: 560px;
}

#alertsEmptyPitchTitle {
}

#alertsEmptyPitchText {
    margin-top: 10px;
    font-size: var(--font-size-body);
    line-height: 1.6;
}

#alertsEmptyPitchButton {
    margin-top: 24px;
}

#alertsEmptyIdeas {
    margin-top: 64px;
}

#alertsEmptyIdeasTitle {
}

#alertsEmptyIdeasList {
    margin-top: 12px;
    border-top: 1px solid var(--hairline);
}

.alertsEmptyIdeasListItem {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
}

.alertsEmptyIdeasListItemText {
    flex: 1 1 auto;
    min-width: 0;
}

.alertsEmptyIdeasListItemTextTitle {
    font-size: var(--font-size-body);
    font-weight: 700;
    line-height: 1.4;
}

.alertsEmptyIdeasListItemTextNow {
    margin-top: 4px;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.alertsEmptyIdeasListItemTextNowPrice {
}

.alertsEmptyIdeasListItemUse {
    flex: none;
}

#alertsEmptyIdeasNote {
    margin-top: 16px;
    color: var(--muted);
    font-size: 14px;
}

#alertsEmptyPlan {
    display: none;
    margin-top: 56px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

#alertsEmptyPlan.active {
    display: block;
}

#alertsEmptyPlanLink {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/************* List *************/

/* Each alert is its own white card on a pale maroon band, so one alert and its
   matches can't run into the next. The same treatment as the wine page's store rows
   (wines.css) and the wine lists (wine-list.css). */
#alertsList {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
    padding: 16px;
    border-radius: var(--radius-card);
    background-color: var(--tint);
}

#alertsList.active {
    display: flex;
}

/* One alert's card: the head (title and conditions, Edit, the switch), then what
   matches now, then an error line when a pause fails */
.alertsListItem {
    padding: 20px 24px;
    border: 1px solid var(--tint-border);
    border-radius: var(--radius-card);
    background-color: #FFF;
}

/* a paused alert steps back to the grey surface, so the live ones stand out */
.alertsListItem.paused {
    border-color: var(--hairline);
    background-color: var(--surface);
}

.alertsListItemHead {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.alertsListItemHeadText {
    flex: 1 1 auto;
    min-width: 0;
}

.alertsListItemHeadTextTitle {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.alertsListItem.paused .alertsListItemHeadTextTitle {
    color: var(--muted);
}

/* the conditions the user set, one quiet line */
.alertsListItemHeadTextConditions {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.alertsListItemHeadEdit {
    flex: none;
}

.alertsListItemHeadSwitch {
    flex: none;
    align-self: center;
}

/* nothing to list: one line, under a rule */
.alertsListItemStatus {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    color: var(--muted);
    font-size: 14px;
}

/* what matches now: a small heading, the cheapest few, then "Show N more" and the sent line */
.alertsListItemMatches {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

.alertsListItemMatchesTitle {
    font-size: 15px;
    font-weight: 700;
}

.alertsListItemMatchesList {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.alertsListItemMatchesListItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 96px;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
}

/* rows past the first few wait for "Show N more" */
.alertsListItemMatchesListItem.folded {
    display: none;
}

.alertsListItemMatchesListItemInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alertsListItemMatchesListItemInfoName {
    color: var(--black);
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.alertsListItemMatchesListItemInfoName[href]:hover {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.alertsListItemMatchesListItemInfoMeta {
    color: var(--muted);
    font-size: var(--font-size-meta);
}

.alertsListItemMatchesListItemDeal {
    justify-self: end;
}

.alertsListItemMatchesListItemPrice {
    font-size: 17px;
    font-weight: 800;
    text-align: right;
}

.alertsListItemMatchesFoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
}

.alertsListItemMatchesFootMore {
    min-height: var(--control-height);
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
}

.alertsListItemMatchesFootSent {
    margin-left: auto;
    color: var(--muted);
    font-size: var(--font-size-meta);
}

/* a failed pause or delete, under its own card */
.alertsListItemError {
    color: var(--danger);
    font-size: 14px;
}

.alertsListItemError:not(:empty) {
    margin-top: 12px;
}

/* what a delete leaves: "Alert deleted. Undo" */
.alertsListItemDeleted {
    padding: 12px 24px;
    border: 1px dashed var(--tint-border);
    border-radius: var(--radius-card);
}

.alertsListItemDeletedText {
    color: var(--muted);
    font-size: 15px;
}

.alertsListItemDeletedUndo {
    min-height: var(--control-height);
    padding: 0 8px;
    border: 0;
    background-color: transparent;
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/************* Usage *************/

#alertsUsage {
    display: none;
    margin-top: 20px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

#alertsUsage.active {
    display: block;
}

/* the sent count opens a tooltip about the rolling window on hover and focus */
#alertsUsageSent {
    position: relative;
}

#alertsUsageSentButton {
    padding: 0;
    border: 0;
    border-bottom: 1px dotted var(--muted);
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    cursor: help;
}

#alertsUsageSentTip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: var(--z-dropdown);
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    border-radius: var(--radius);
    background-color: var(--black);
    color: #FFF;
    font-size: var(--font-size-meta);
    line-height: 1.45;
}

#alertsUsageSent:hover #alertsUsageSentTip,
#alertsUsageSentButton:focus-visible + #alertsUsageSentTip {
    display: block;
}

#alertsUsageUpgrade {
    color: var(--primary);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/************* Recently sent *************/

#alertsHistory {
    margin-top: 48px;
}

#alertsHistoryTitle {
}

#alertsHistorySubtitle {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
}

#alertsHistorySubtitle.hidden {
    display: none;
}

#alertsHistoryEmpty {
    display: none;
    margin-top: 6px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

#alertsHistoryEmpty.active {
    display: block;
}

#alertsHistoryList {
    display: none;
    margin-top: 16px;
    border-top: 1px solid var(--hairline);
}

#alertsHistoryList.active {
    display: block;
}

.alertsHistoryListItem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 110px;
    gap: 20px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
}

.alertsHistoryListItemMain {
    min-width: 0;
}

.alertsHistoryListItemMainName {
    color: var(--black);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.alertsHistoryListItemMainName[href]:hover {
    color: var(--primary);
    text-decoration: underline;
}

.alertsHistoryListItemMainStore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    color: var(--muted);
    font-size: var(--font-size-meta);
    font-weight: 600;
}

/* linked to the listing when the notification carries its url */
.alertsHistoryListItemMainStore[href] {
    color: var(--primary);
}

.alertsHistoryListItemMainStoreIcon {
    flex: none;
    width: 14px;
    height: 14px;
}

.alertsHistoryListItemPrice {
    text-align: right;
}

.alertsHistoryListItemPriceValue {
    font-size: var(--font-size-body);
    font-weight: 800;
}

.alertsHistoryListItemTime {
    color: var(--muted);
    font-size: var(--font-size-meta);
    text-align: right;
}

/************* Phone *************/

@media (max-width: 800px) {
    #alertsHeaderTextCount {
        font-size: 14px;
    }

    /* the title row keeps New alert beside the title, smaller gap */
    #alertsHeaderNew {
        padding: 0 14px;
    }

    /* the band runs to the screen edges (the account page's 16px phone gutter is
       pulled back), as on the wine page and the wine lists */
    #alertsLoading,
    #alertsList {
        margin: 24px -16px 0;
        gap: 12px;
        border-radius: 0;
    }

    #alertsPlan {
        padding: 16px;
    }

    #alertsPlanMeter {
        flex: 1 1 100%;
    }

    #alertsPlanUpgrade {
        flex: 1 1 100%;
    }

    .alertsLoadingRow {
        padding: 16px;
    }

    /* the card tightens; Edit drops under the conditions so the title keeps the width */
    .alertsListItem {
        padding: 16px;
    }

    .alertsListItemHead {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0 12px;
    }

    .alertsListItemHeadTextTitle {
        font-size: 18px;
    }

    .alertsListItemHeadTextConditions {
        font-size: var(--font-size-meta);
    }

    .alertsListItemHeadEdit {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: start;
        margin-top: 12px;
    }

    .alertsListItemHeadSwitch {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    /* a match is the name over its store and price, the pill under them */
    .alertsListItemMatchesListItem {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }

    .alertsListItemMatchesListItemDeal {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .alertsListItemMatchesListItemDeal:empty {
        display: none;
    }

    .alertsListItemMatchesListItemPrice {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    .alertsEmptyIdeasListItem {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    #alertsHistory {
        margin-top: 40px;
    }

    .alertsHistoryListItem {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 16px;
    }

    .alertsHistoryListItemMain {
        grid-column: 1 / -1;
    }

    .alertsHistoryListItemMainStore {
        display: flex;
        margin: 4px 0 0;
    }

    .alertsHistoryListItemPrice {
        text-align: left;
    }
}