/* Ideas left on a public deck: visitor page (suggest) and deck editor (answer). Colours come from the theme variables. */

/* An idea: author, cards out and in, note, answers. */
.deck-suggestion-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:1rem;margin-top:.75rem}
.deck-suggestion{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:var(--mt-surface);border:1px solid var(--mt-border);border-radius:.75rem;transition:border-color .15s ease,box-shadow .15s ease}
.deck-suggestion.is-unseen{border-color:var(--mt-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--mt-primary) 35%,transparent),0 8px 24px rgba(0,0,0,.3)}
.deck-suggestion.is-status-accepted,.deck-suggestion.is-status-declined{background:var(--mt-bg-secondary)}
.deck-suggestion-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.875rem}
.deck-suggestion-author{display:inline-flex;align-items:center;gap:.5rem;color:var(--mt-text);font-weight:600;text-decoration:none;margin-right:auto}
.deck-suggestion-author:hover span{text-decoration:underline}
.deck-suggestion-head time{color:var(--mt-text-secondary);font-size:.8rem}
.deck-suggestion-kind,.deck-suggestion-new,.deck-suggestion-status{display:inline-flex;align-items:center;padding:.15rem .55rem;border-radius:999px;font-size:.75rem;font-weight:600;line-height:1.4;border:1px solid var(--mt-border);color:var(--mt-text)}
.deck-suggestion.is-add .deck-suggestion-kind{border-color:color-mix(in srgb,var(--mt-success) 60%,transparent);color:var(--mt-success)}
.deck-suggestion.is-remove .deck-suggestion-kind{border-color:color-mix(in srgb,var(--mt-danger) 60%,transparent);color:var(--mt-danger)}
.deck-suggestion.is-replace .deck-suggestion-kind{border-color:color-mix(in srgb,var(--mt-info) 60%,transparent);color:var(--mt-info)}
.deck-suggestion-new{background:var(--mt-primary);border-color:var(--mt-primary);color:var(--mt-bg)}
.deck-suggestion-status.is-accepted{color:var(--mt-success);border-color:color-mix(in srgb,var(--mt-success) 60%,transparent)}
.deck-suggestion-status.is-kept{color:var(--mt-warning);border-color:color-mix(in srgb,var(--mt-warning) 60%,transparent)}
.deck-suggestion-status.is-declined{color:var(--mt-text-secondary)}
.deck-suggestion-cards{display:flex;align-items:center;justify-content:center;gap:.75rem}
.deck-suggestion-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:min(140px,40%);color:var(--mt-text);text-decoration:none;text-align:center;font-size:.8rem;line-height:1.25}
.deck-suggestion-card img{display:block;width:100%;height:auto;border-radius:4.75%/3.5%;box-shadow:0 6px 16px rgba(0,0,0,.35);transition:transform .15s ease}
.deck-suggestion-card:hover img,.deck-suggestion-card:focus-visible img{transform:translateY(-3px)}
.deck-suggestion-card:focus-visible{outline:2px solid var(--mt-primary);outline-offset:3px;border-radius:.4rem}
.deck-suggestion-card.is-out img{filter:grayscale(.75) brightness(.7)}
.deck-suggestion-side{position:absolute;top:.4rem;left:50%;transform:translateX(-50%);z-index:1;padding:.1rem .5rem;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--mt-bg);border:1px solid var(--mt-border)}
.is-out>.deck-suggestion-side{color:var(--mt-danger);border-color:color-mix(in srgb,var(--mt-danger) 60%,transparent)}
.is-in>.deck-suggestion-side{color:var(--mt-success);border-color:color-mix(in srgb,var(--mt-success) 60%,transparent)}
.deck-suggestion-arrow{font-size:1.5rem;color:var(--mt-primary);flex:none}
.deck-suggestion-note{position:relative;margin:0;padding:.65rem .85rem;background:var(--mt-bg-secondary);border:1px solid var(--mt-border);border-radius:.6rem;color:var(--mt-text);font-size:.9rem;white-space:normal;overflow-wrap:anywhere}
.deck-suggestion-note::before{content:"";position:absolute;top:-6px;left:1.25rem;width:10px;height:10px;background:inherit;border-left:1px solid var(--mt-border);border-top:1px solid var(--mt-border);transform:rotate(45deg)}
.deck-suggestion-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:auto}
.deck-suggestion-report{margin-left:auto;color:var(--mt-text-secondary);font-size:.8rem;padding-inline:0}
.deck-suggestion-report:hover{color:var(--mt-danger)}

/* Owner: header note, counters, groups. */
.deck-suggestion-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1rem;padding:.6rem .9rem;background:color-mix(in srgb,var(--mt-primary) 12%,var(--mt-surface));border:1px solid color-mix(in srgb,var(--mt-primary) 55%,transparent);border-radius:.75rem;animation:deck-suggestion-arrive .5s ease-out}
.deck-suggestion-banner-text{flex:1 1 14rem;color:var(--mt-text);font-weight:600}
.deck-suggestion-banner[hidden]{display:none}
.deck-suggestion-tally{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 .5rem;padding:0}
.deck-suggestion-tally li{padding:.3rem .75rem;border-radius:999px;background:var(--mt-bg-secondary);border:1px solid var(--mt-border);font-size:.85rem;font-weight:600}
.deck-suggestion-tally li.is-adopted{color:var(--mt-success)}
.deck-suggestion-group{margin:1.25rem 0 0;font-size:1.05rem}
.deck-suggestion-history{margin-top:1.5rem}
.deck-suggestion-history summary{cursor:pointer;font-weight:600}
.deck-nav-suggestions{background:var(--mt-primary);color:var(--mt-bg)}
@keyframes deck-suggestion-arrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.deck-suggestion-banner{animation:none}.deck-suggestion-card img{transition:none}}

/* Owner's deck list: decks with ideas waiting. */
.deck-preview-ideas{display:inline-flex;align-items:center;align-self:flex-start;padding:.15rem .6rem;border-radius:999px;background:var(--mt-primary);color:var(--mt-bg);font-size:.78rem;font-weight:700;text-decoration:none}
.deck-preview-ideas:hover,.deck-preview-ideas:focus-visible{background:var(--mt-primary-hover);color:var(--mt-bg)}

/* Visitor: invitation, own ideas, card buttons. */
.deck-suggestions-public{margin:1.5rem 0;padding:1.25rem;background:linear-gradient(135deg,color-mix(in srgb,var(--mt-primary) 9%,var(--mt-surface)),var(--mt-surface));border:1px solid var(--mt-border);border-radius:1rem}
.deck-suggestions-public-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.deck-suggestions-public-head h2{margin:0 0 .25rem;font-size:1.35rem}
.deck-suggestions-public-head p,.deck-suggestions-login{margin:0;color:var(--mt-text-secondary)}
.deck-suggestions-login{margin-top:.5rem;font-size:.9rem}
.deck-suggestions-mine h3{margin:1.25rem 0 0;font-size:1.05rem}
.deck-public-grid>li{position:relative}
.deck-public-suggest{border:1px solid var(--mt-border);background:var(--mt-bg);color:var(--mt-text);border-radius:999px;padding:.15rem .6rem;font-size:.75rem;font-weight:600;line-height:1.4;cursor:pointer}
.deck-public-suggest:hover,.deck-public-suggest:focus-visible{background:var(--mt-primary);border-color:var(--mt-primary);color:var(--mt-bg)}
.deck-public-suggest:focus-visible{outline:2px solid var(--mt-primary);outline-offset:2px}
.deck-public-grid .deck-public-suggest{position:absolute;bottom:.5rem;left:50%;transform:translateX(-50%);opacity:0;transition:opacity .15s ease;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.deck-public-grid>li:hover .deck-public-suggest,.deck-public-grid .deck-public-suggest:focus-visible{opacity:1}
.deck-public-list .deck-public-suggest{margin-left:auto}
@media(hover:none){.deck-public-grid .deck-public-suggest{opacity:1}}

/* Visitor: the idea window. */
.deck-suggest-kinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;margin:0 0 1rem;padding:0;border:0}
.deck-suggest-kinds legend{float:none;width:100%;font-size:1rem;font-weight:600}
.deck-suggest-kind{position:relative;cursor:pointer}
.deck-suggest-kind input{position:absolute;opacity:0;inset:0;cursor:pointer}
.deck-suggest-kind span{display:block;padding:.6rem .75rem;border:1px solid var(--mt-border);border-radius:.6rem;background:var(--mt-bg-secondary);text-align:center;font-weight:600;transition:border-color .15s ease,background .15s ease}
.deck-suggest-kind:hover span{background:var(--mt-surface-hover)}
.deck-suggest-kind input:checked+span{border-color:var(--mt-primary);background:color-mix(in srgb,var(--mt-primary) 14%,var(--mt-surface));color:var(--mt-text)}
.deck-suggest-kind input:focus-visible+span{outline:2px solid var(--mt-primary);outline-offset:2px}
.deck-suggest-kind input:disabled+span{color:var(--mt-text-disabled);cursor:not-allowed}
.deck-suggest-preview{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem;padding:1rem;background:var(--mt-bg-secondary);border:1px dashed var(--mt-border);border-radius:.75rem}
.deck-suggest-preview[hidden],.deck-suggest-slot[hidden],.deck-suggest-preview [data-slot-arrow][hidden]{display:none}
.deck-suggest-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;width:min(150px,40%);min-height:7rem;text-align:center;font-size:.8rem}
.deck-suggest-slot img{display:block;width:100%;height:auto;border-radius:4.75%/3.5%;box-shadow:0 6px 16px rgba(0,0,0,.35);animation:deck-suggestion-arrive .25s ease-out}
.deck-suggest-slot.is-out img{filter:grayscale(.75) brightness(.7)}
.deck-suggest-slot p{margin:2rem 0 0;color:var(--mt-text-secondary)}
.deck-suggest-field{margin-bottom:1rem}
.deck-suggest-field[hidden]{display:none}
.deck-suggest-hint{margin:.35rem 0 0;color:var(--mt-text-secondary);font-size:.85rem}
.deck-suggest-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem;margin-top:.75rem;max-height:22rem;overflow-y:auto}
.deck-suggest-result{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.3rem;border:2px solid transparent;border-radius:.6rem;background:none;color:var(--mt-text);font-size:.75rem;line-height:1.2;text-align:center;cursor:pointer}
.deck-suggest-result img{display:block;width:100%;height:auto;border-radius:4.75%/3.5%}
.deck-suggest-result:hover{background:var(--mt-surface-hover)}
.deck-suggest-result.is-chosen{border-color:var(--mt-primary);background:color-mix(in srgb,var(--mt-primary) 12%,transparent)}
.deck-suggest-result:focus-visible{outline:2px solid var(--mt-primary);outline-offset:2px}
.deck-suggest-count{display:block;text-align:right;color:var(--mt-text-secondary)}
.deck-suggest-error{margin:0;color:var(--mt-danger);font-weight:600}
@media(max-width:575.98px){.deck-suggestions-public{padding:1rem}.deck-suggestions-public-head .btn{width:100%}.deck-suggest-preview{gap:.5rem;padding:.75rem}}