/* =============================================================================================
   Marketplace Alerts (Components/Marketplace/Alerts): the alert card, the list's states and the
   New/Edit alert sheet. Plain CSS on the sw.css tokens (Tailwind does not compile this file, so
   no app.min.css rebuild is needed for it). Linked after sw.css by Supwell/wwwroot/index.html and
   Supwell.Web/Components/App.razor. Values are MJ's (STYLE_GUIDE §7): white cards on cream, one
   olive, warm hairlines, the canonical card shadow. Base styles are the final state; motion only
   adds a "from", and the reduced-motion switch at the end of sw.css flattens all of it.
   ============================================================================================= */

/* ---- list ---------------------------------------------------------------------------------- */
.sw-alerts { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  /* Desktop web: two up inside the 672 column (Alerts_Web). */
  .sw-alerts.is-web { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 672px; align-items: start; }
}

/* ---- card: the app's one card shell (.sw-surface in sw.css) plus the alert's layout ---------- */
.alert-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px; letter-spacing: var(--sw-tracking); color: var(--sw-ink);
  font-family: var(--sw-font-ui); transition: box-shadow var(--sw-dur) ease, opacity var(--sw-dur) ease;
}
.alert-card.is-new { animation: alert-ring calc(2400ms / var(--sw-tempo)) var(--sw-out) backwards; }
@keyframes alert-ring {
  from, 40% { box-shadow: var(--sw-shadow-tile), 0 0 0 1.5px var(--sw-olive); }
}
.alert-card.is-busy { opacity: .6; pointer-events: none; }

/* Whole-card open: a stretched button under the switch and the pencil (no nested controls). */
.alert-card__open {
  position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--sw-dur-fast) ease;
}
.alert-card__open:active { background: rgba(55, 60, 43, .04); }
.alert-card__open:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
@media (hover: hover) { .alert-card__open:hover { background: rgba(55, 60, 43, .025); } }

.alert-card__row { display: flex; align-items: center; gap: 10px; }
.alert-card__thumb {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 8px;
  background: var(--sw-ground-2); color: var(--sw-ink-2);
}
.alert-card__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.alert-card__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.alert-card__brand, .alert-card__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sw-ink); }
.alert-card__brand { font: 700 12px/16px var(--sw-font-mono); text-transform: uppercase; }
.alert-card__title { font: 600 16px/20px var(--sw-font-ui); }
.alert-card .sw-switch { z-index: 2; }
.alert-card .sw-switch::before { transition-duration: var(--sw-dur-fast); transition-timing-function: var(--sw-pop); }

.alert-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.alert-tag {
  border-radius: 6px; background: var(--sw-ground-2); padding: 4px 8px; white-space: nowrap; letter-spacing: 0;
  font: 500 11px/13px var(--sw-font-mono); color: var(--sw-ink);
}

.alert-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 8px;
  border-top: .5px solid var(--sw-line-2);
}
.alert-card__status { display: flex; align-items: center; min-width: 0; font: 500 12px/15px var(--sw-font-ui); letter-spacing: 0; color: var(--sw-ink-2); }
/* Counts update in place: the new text cross-fades in (re-keyed span), never a spinner. */
.alert-card__count { animation: sw-fade var(--sw-dur-fast) ease backwards; }
.alert-badge {
  margin-left: 8px; border-radius: 10px; background: var(--sw-olive); padding: 3px 8px; white-space: nowrap;
  font: 600 11px/13px var(--sw-font-ui); color: #fff; animation: sw-pop var(--sw-dur) var(--sw-pop) backwards;
}
.alert-card__edit {
  position: relative; z-index: 2; display: grid; place-items: center; flex: none; width: 44px; height: 36px; margin: -10px -10px -10px 0;
  padding: 0; border: 0; border-radius: 10px; background: none; color: #9ea796; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.alert-card__edit:active { background: var(--sw-ground-2); }
.alert-card__edit:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 0; }

/* First-load skeleton in the same shell: #EFEAE6 blocks on white. */
.alert-card--skel { pointer-events: none; }
.alert-card--skel .sw-skel { background-image: linear-gradient(90deg, var(--sw-ground) 25%, var(--sw-ground-2) 50%, var(--sw-ground) 75%); }

/* ---- text button (the alert sheet's footer) ------------------------------------------------ */
.alert-text-btn:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 2px; }
.alert-text-btn {
  margin-top: 2px; padding: 10px; border: 0; border-radius: 25px; background: none; color: var(--sw-olive); cursor: pointer;
  font: 600 14px/16px var(--sw-font-ui); letter-spacing: var(--sw-tracking); text-transform: uppercase;
}
.alert-text-btn.is-danger { color: #b84c41; }

/* ---- sheet --------------------------------------------------------------------------------- */
.alert-sheet .sw-sheet__body { position: relative; }
.alert-main { display: flex; flex-direction: column; gap: 10px; max-width: 378px; margin: 0 auto; padding: 10px 12px 20px; letter-spacing: var(--sw-tracking); color: var(--sw-ink); font-family: var(--sw-font-ui); }
.alert-sub { max-width: 378px; margin: 0 auto; padding: 10px 12px 20px; font-family: var(--sw-font-ui); color: var(--sw-ink); }
.alert-sub--flush { max-width: none; padding: 0; }
.alert-view { animation: sw-step-in calc(260ms / var(--sw-tempo)) var(--sw-glide) backwards; }
.alert-view.is-back { animation-name: sw-step-back; }
@media (min-width: 768px) {
  .alert-main, .alert-sub { max-width: none; padding: 10px 20px 20px; }
  .alert-sub--flush { padding: 0; }
}

.alert-label { display: block; margin: 0; font: 700 12px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); text-transform: uppercase; color: var(--sw-ink-2); }

.alert-picker {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 10px; margin: 0;
  border: 1px solid var(--sw-line); border-radius: 12px; background: var(--sw-card); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color var(--sw-dur-fast) ease, background-color var(--sw-dur-fast) ease;
}
.alert-picker:active { background: var(--sw-ground-2); }
.alert-picker:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }
.alert-picker__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); }
.alert-picker__value.is-placeholder { color: var(--sw-ink-3); }
.alert-picker__chev { flex: none; color: #a4a49d; }

.alert-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.alert-rchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 25px; background: var(--sw-line);
  font: 500 12px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); color: var(--sw-ink); animation: sw-pop var(--sw-dur-fast) var(--sw-pop) backwards;
}
.alert-rchip__x {
  position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--sw-ink); cursor: pointer;
}
.alert-rchip__x::after { content: ""; position: absolute; inset: -6px; }

.alert-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.alert-input {
  display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--sw-line); border-radius: 12px; background: var(--sw-card);
  transition: border-color var(--sw-dur-fast) ease;
}
.alert-input:focus-within { border-color: var(--sw-ink-2); }
.alert-input input {
  flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--sw-ink);
  font: 500 16px/24px var(--sw-font-ui); letter-spacing: var(--sw-tracking); -webkit-appearance: none; appearance: none;
}
.alert-input input::placeholder { color: var(--sw-ink-3); }
.alert-input input::-webkit-outer-spin-button, .alert-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (min-width: 768px) { .alert-input input { font-size: 14px; line-height: 26px; } }
.alert-usd { flex: none; font: 500 10px/1 var(--sw-font-mono); color: var(--sw-ink-2); }

.alert-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.alert-choice {
  padding: 9px 2px; border: 1px solid var(--sw-line); border-radius: 12px; background: var(--sw-card); color: var(--sw-ink-3); cursor: pointer;
  font: 500 14px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sw-dur-fast) ease, color var(--sw-dur-fast) ease, scale var(--sw-dur-fast) ease;
}
.alert-choice:active { scale: .96; }
.alert-choice[aria-pressed="true"] { border-color: var(--sw-olive); background: var(--sw-olive); color: #fff; }
.alert-choice:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }

.alert-count { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border-radius: 12px; background: var(--sw-ground-2); }
.alert-count__text { display: flex; flex-direction: column; min-width: 0; }
.alert-count__n { font: 600 14px/18px var(--sw-font-ui); color: var(--sw-ink); transition: opacity var(--sw-dur-fast) ease; }
.alert-count__n.is-pending { opacity: .6; }
.alert-count__sub { font: 500 12px/16px var(--sw-font-ui); letter-spacing: 0; color: var(--sw-ink-2); }
.alert-count__see {
  flex: none; padding: 8px 2px; border: 0; background: none; color: var(--sw-olive); cursor: pointer;
  font: 600 13px/16px var(--sw-font-ui); letter-spacing: 0; text-decoration: underline; text-underline-offset: 2px;
}
.alert-count__see:disabled { color: var(--sw-ink-3); cursor: default; }

.alert-switchrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--sw-line); border-radius: 12px; background: var(--sw-ground-2); }
.alert-switchrow__text { display: flex; flex-direction: column; min-width: 0; font-size: 14px; color: var(--sw-ink); }
.alert-switchrow__title { font: 700 14px/18px var(--sw-font-ui); letter-spacing: var(--sw-tracking); }
.alert-switchrow__sub { font: 400 14px/18px var(--sw-font-ui); letter-spacing: 0; }

.alert-error {
  margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(184, 76, 65, .10); color: #b84c41;
  font: 500 13px/18px var(--sw-font-ui); animation: sw-shake calc(360ms / var(--sw-tempo)) linear;
}

/* Footer: optional hint over a text button + primary, 30 apart (MJ's sheet footer). */
.alert-foot { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.alert-foot__hint { margin: 0; padding: 0 2px; text-align: center; font: 500 12px/18px var(--sw-font-ui); color: var(--sw-ink-2); }
.alert-foot__row { display: flex; align-items: center; gap: 30px; }
.alert-foot__row > .sw-btn--primary { flex: 1 1 0; }
.alert-foot__row > .alert-text-btn { margin: 0; padding: 14px 10px; }

/* Model view */
.alert-search {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--sw-line); border-radius: 12px;
  background: var(--sw-card); color: #9ea796; transition: border-color var(--sw-dur-fast) ease;
}
.alert-search:focus-within { border-color: var(--sw-ink-2); }
.alert-search input {
  flex: 1 1 auto; min-width: 0; padding: 0; border: 0; outline: 0; background: none; color: var(--sw-ink);
  font: 500 16px/26px var(--sw-font-ui); letter-spacing: var(--sw-tracking); -webkit-appearance: none; appearance: none;
}
.alert-search input::placeholder { color: var(--sw-ink-3); }
.alert-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.alert-search__clear { display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--sw-ground-2); color: var(--sw-ink); cursor: pointer; }
.alert-picks { display: flex; flex-direction: column; gap: 8px; }
.alert-pick {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--sw-line); border-radius: 12px;
  background: var(--sw-card); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color var(--sw-dur-fast) ease, scale var(--sw-dur-fast) ease; animation: sw-fade var(--sw-dur-fast) ease backwards;
}
.alert-pick:active { scale: .99; }
.alert-pick[aria-checked="true"] { border-color: var(--sw-olive); }
.alert-pick:focus-visible { outline: 2px solid var(--sw-olive); outline-offset: 1px; }
.alert-pick__thumb { display: grid; place-items: center; flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: 8px; background: var(--sw-ground-2); color: var(--sw-ink-2); }
.alert-pick__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.alert-pick__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; letter-spacing: var(--sw-tracking); }
.alert-pick__brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px/16px var(--sw-font-mono); text-transform: uppercase; color: var(--sw-ink); }
.alert-pick__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px/20px var(--sw-font-ui); color: var(--sw-ink); }
.alert-pick__sub { font: 500 12px/15px var(--sw-font-ui); letter-spacing: 0; color: var(--sw-ink-2); }
.alert-pick__box { flex: none; }
.alert-note { margin: 0; padding: 10px 2px; font: 500 13px/19px var(--sw-font-ui); color: var(--sw-ink-2); }

/* Android back inside a sub-view: a 1px target sw-native.js picks over the scrim (deeper z). */
.alert-backcatch { position: absolute; top: 0; left: 0; z-index: 1; width: 1px; height: 1px; padding: 0; border: 0; opacity: .01; pointer-events: none; }

/* The sheet itself slides up, so the first view doesn't slide in on top of that. */
.alert-view.is-first { animation: none; }

/* Skeleton block shapes: thumb, switch track, tag chips. */
.alert-card--skel .alert-skel-thumb { border-radius: 8px; flex: none; }
.alert-card--skel .alert-skel-switch { border-radius: 25px; flex: none; }
.alert-card--skel .alert-card__tags .sw-skel { border-radius: 6px; }