/* v0.17.4: the pet's daily suggested-task card, mounted twice by Home.razor (a desktop sibling
   of the create modal, and again at the top of .create-modal-body for narrower viewports) and
   gated to exactly one visible copy purely with this media query - see the comment on both mount
   points in Home.razor. Self-contained .suggest-* namespace over the base --chronos-* tokens, so
   this sheet is safe anywhere after 00-tokens-base.css and before 24-theme-dark.css, which must
   stay last. Owner rule: fixed sizing, no internal scroll - the card always holds exactly 3 rows
   or fewer, so it never needs one. */

.suggest-card {
    width: min(300px, calc(100vw - 32px));
    padding: 14px 16px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--chronos-violet) 6%, var(--chronos-card-bg));
    border: 1px solid color-mix(in srgb, var(--chronos-violet) 22%, var(--chronos-outline));
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.14);
    align-self: center;
    cursor: default;
}

/* Desktop mount. v0.17.11.3 (owner: "не меняй центрирование модалки - пусть питомец просто
   левее будет"): the card used to be a FLEX sibling of .modal-card, and a second flex child in
   a justify-content:center backdrop shoves the modal off-centre by half the card's width. Now
   it is OUT OF FLOW - absolute against the fixed backdrop, its right edge pinned to where the
   centred 640px modal's left edge lands (50% - 320px) minus a 20px gap - so the modal sits
   dead-centre whether the card is there or not, and the card popping in after its async load
   moves nothing. The breakpoint moved 1100 -> 1280: out of flow the card no longer borrows the
   modal's slack, so it needs the full 320px to the LEFT of the centred modal to fit on screen
   (640/2 + 300 + 20 = 640 per half-viewport). Between 1100 and 1279 the top mount inside the
   modal body serves instead. */
.suggest-card-side { display: none; }
@media (min-width: 1280px) {
    .suggest-card-side {
        display: block;
        position: absolute;
        right: calc(50% + 320px + 20px);
        top: 50%;
        transform: translateY(-50%);
    }
}

/* Mobile/narrow mount: a compact section at the very top of the scrolling modal body, so the
   fixed-height card (29-friends.css .modal-card.create-modal) never resizes. */
.suggest-card-top {
    width: 100%;
    margin-bottom: 14px;
}
@media (min-width: 1280px) {
    .suggest-card-top { display: none; }
}

.suggest-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    color: var(--chronos-fg-secondary);
    margin-bottom: 10px;
}
.suggest-card-glyph { font-size: 20px; line-height: 1; }

.suggest-card-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.suggest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--chronos-outline);
    border-radius: 10px;
    background: var(--chronos-card-bg);
    color: var(--chronos-fg-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.suggest-row:hover {
    border-color: color-mix(in srgb, var(--hover-ink) var(--hover-lift), var(--chronos-outline));  /* house hover (00-tokens-base.css): the rim lifts, nothing moves. */
}
.suggest-row-title {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.suggest-row-prio {
    flex: 0 0 auto;
    font-size: 10px;
}

/* Free teaser: dimmed fake rows behind a lock, same locked-egg idiom as the topbar pet slot.
   v0.17.11.5: back by owner order after the .3 removal - the reversal is logged in
   CHANGELOG.md. (.suggest-card-empty stayed gone: an empty result still renders no card.) */
.suggest-card-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.suggest-lock-glyph {
    position: relative;
    display: inline-flex;
    font-size: 26px;
    margin-bottom: 2px;
}
.suggest-locked-title {
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--chronos-fg-primary);
}
.suggest-locked-body {
    font-size: 12px;
    margin: 0;
}
.suggest-locked-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 4px 0 2px;
    filter: blur(2.5px);
    opacity: 0.5;
    pointer-events: none;
}
.suggest-locked-row {
    height: 30px;
    border-radius: 10px;
    background: var(--chronos-outline);
}
.suggest-upgrade-btn {
    margin-top: 4px;
}

@media (max-width: 480px) {
    .suggest-card { padding: 12px 14px; }
}