/*
 * munchterm plus: cancel pages (cancel). Owned by the CANCEL flow agent.
 *
 * Linked on every page after base.css (app/root.tsx), so every class in here is prefixed
 * `cancel-` to keep it from touching another flow's pages. Anything a second flow needs belongs
 * in base.css (raise it with the orchestrator). Tokens, buttons, forms, notices, cards, the pass, chips,
 * tiles, rails, menus and the action bar are all in base.css already.
 *
 * Markup: app/components/cancel/CancelPage.tsx. Mobile first: designed at 375px, widened at 900px.
 * Calm on purpose. No red anywhere on this page: cancelling is a normal thing to do, and the
 * page should read like a receipt of what happens, not a warning.
 */

.cancel-page .back-link {
  margin-bottom: var(--s3);
}

.cancel-form {
  gap: var(--s6);
}

/* --- cancel_keep: what they keep, until when ------------------------------------------ */

.cancel-keep .section-head {
  margin-bottom: var(--s4);
}

/* The date is the answer to "what happens", so it is the biggest thing in the card. */
.cancel-keep__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--ink);
  padding: var(--s5) var(--s4) var(--s4);
}

.cancel-keep__until {
  display: grid;
  gap: var(--s1);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.cancel-keep__label {
  color: var(--ink-muted);
  font-size: var(--size-small);
}

.cancel-keep__date {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--size-h2);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.cancel-keep__ticks {
  margin-bottom: 0;
}

.cancel-keep__ticks .icon {
  color: var(--ink);
}

/* --- held drops: listed as facts ------------------------------------------------------- */

.cancel-drops {
  margin-top: var(--s6);
}

.cancel-drops__heading {
  margin-bottom: var(--s1);
  font-size: var(--size-h3);
}

.cancel-drops__intro {
  margin: 0 0 var(--s3);
  color: var(--ink-muted);
  font-size: var(--size-small);
}

.cancel-drops__list {
  background: var(--surface);
  border: 1px solid var(--line);
}

.cancel-drop {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
}

.cancel-drop + .cancel-drop {
  border-top: 1px solid var(--line);
}

.cancel-drop__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--surface-sunk);
  color: var(--ink-muted);
}

.cancel-drop__thumb img:where(:not(.icon)) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cancel-drop__text {
  flex: 1;
  display: grid;
  gap: var(--s1);
  min-width: 0;
}

.cancel-drop__title {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.cancel-drop__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  color: var(--ink-muted);
  font-size: var(--size-small);
}

/* --- cancel_reason: optional chips, and the one quiet alternative ----------------------- */

.cancel-reason .fieldset__hint {
  margin-bottom: var(--s3);
}

/* Hidden until the drops reason is picked: the alternative only answers that reason, so it is
   never in the way of someone who is simply leaving. No JavaScript: `:has()` on the form. A
   browser without `:has()` never shows it, which costs nothing. */
.cancel-alt {
  display: none;
  margin: var(--s4) 0 0;
}

.cancel-form:has(input[name="reason"][value="not using the drops"]:checked) .cancel-alt {
  display: block;
  animation: cancel-fade var(--slow) var(--ease);
}

.cancel-alt a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap-min);
  color: var(--ink);
  font-size: var(--size-small);
  text-underline-offset: 3px;
}

.cancel-alt a:hover {
  color: var(--pink-deep);
}

@keyframes cancel-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- the action bar: two equal buttons ------------------------------------------------- */

/* "keep it" and "cancel membership" share the bar half and half on a phone: the same size, the
   same weight, a real choice. */
.cancel-form .actionbar__actions > * {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--s3);
}

/* --- already cancelled, or nothing to cancel ------------------------------------------ */

.cancel-status {
  padding: var(--s6) 0 var(--s5);
}

.cancel-status__icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--s5);
  background: var(--surface-sunk);
  color: var(--ink);
}

.cancel-status--ending .cancel-status__icon {
  background: var(--ink);
  color: #fff;
}

.cancel-status p {
  max-width: 44ch;
  margin: 0 0 var(--s5);
}

/* --- bigger screens -------------------------------------------------------------------- */

@media (min-width: 600px) {
  .cancel-keep__card {
    padding-inline: var(--s5);
  }
}

@media (min-width: 900px) {
  .cancel-keep__date {
    font-size: var(--size-h1);
  }

  /* Back in the page: the two buttons sit side by side at their own width. */
  .cancel-form .actionbar__actions > * {
    flex: 0 0 auto;
    padding-inline: var(--s5);
  }
}