/* answer-sheet.css — The pull-up answer sheet shown after a feed answer.
   Split from app.module.css; load order in app.html preserves the original cascade. */

/* ---------- answer sheet ---------- */

/* #reel is position:fixed and forms its own stacking context, and the FAB must
   outrank the reel to float over opaque cards — so no z-index here can lift the
   sheet above it, and a bottom inset fails too because sheet content scrolls
   under the FAB. The FAB is tucked away instead (see below). */
.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: var(--panel);
  max-height: 50dvh;
  overflow-y: auto;
  /* The nav is fixed at z-index 30 and this sheet is at 3, so without the
     clearance the last thing in here — the explanation, and the prompt to
     swipe on — sits underneath it. That is the one line a wrong answer exists
     to deliver, so it gets the same clearance the caption uses. */
  padding: 24px 16px calc(96px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  transform: translateY(108%);
  transition: transform 0.36s cubic-bezier(0.3, 1.18, 0.4, 1);
}

.sheet.show {
  transform: none;
}

/* The verdict colours the whole sheet, the way the kit floods the bottom of
   the screen green or red. */
.sheet:has(.sticker.good) {
  background: var(--green-soft);
}

.sheet:has(.sticker.bad) {
  background: var(--wrong-soft);
}

.sheet .in {
  max-width: 540px;
  margin: 0 auto;
}

.vrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.why {
  border: 1.5px solid var(--line-2);
  border-radius: var(--r);
  padding: 8px 14px;
  background: var(--paper);
  color: var(--ink-2);
  box-shadow: 0 3px 0 var(--lip);
  flex: none;
  transition:
    transform 0.08s var(--ease),
    box-shadow 0.08s var(--ease);
}

.why:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--lip);
}

.more {
  margin-top: 14px;
}

/* Verdict reads as a headline with the kit's circle icon in front of it. The
   icon is a mask filled with the text colour, so it needs no extra markup. */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.sticker::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: currentcolor;
  -webkit-mask: var(--verdict-icon) center / contain no-repeat;
  mask: var(--verdict-icon) center / contain no-repeat;
}

.sticker.good {
  color: var(--green-ink);
  --verdict-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 3.34C18.5083 4.21085 19.7629 5.46053 20.6398 6.9653C21.5167 8.47007 21.9854 10.1778 21.9994 11.9193C22.0135 13.6609 21.5725 15.376 20.72 16.8947C19.8676 18.4134 18.6332 19.6832 17.1392 20.5783C15.6452 21.4734 13.9434 21.9628 12.2021 21.9981C10.4608 22.0333 8.74055 21.6132 7.21155 20.7792C5.68256 19.9453 4.39787 18.7265 3.48467 17.2435C2.57146 15.7605 2.06141 14.0647 2.005 12.324L2 12L2.005 11.676C2.061 9.94899 2.56355 8.26596 3.46364 6.79099C4.36373 5.31602 5.63065 4.09945 7.14089 3.25988C8.65113 2.42031 10.3531 1.9864 12.081 2.00044C13.8089 2.01448 15.5036 2.476 17 3.34ZM15.707 9.293C15.5348 9.12082 15.3057 9.01739 15.0627 9.00211C14.8197 8.98683 14.5794 9.06075 14.387 9.21L14.293 9.293L11 12.585L9.707 11.293L9.613 11.21C9.42058 11.0609 9.18037 10.987 8.9374 11.0024C8.69444 11.0177 8.46541 11.1211 8.29326 11.2933C8.12112 11.4654 8.01768 11.6944 8.00235 11.9374C7.98702 12.1804 8.06086 12.4206 8.21 12.613L8.293 12.707L10.293 14.707L10.387 14.79C10.5624 14.9261 10.778 14.9999 11 14.9999C11.222 14.9999 11.4376 14.9261 11.613 14.79L11.707 14.707L15.707 10.707L15.79 10.613C15.9393 10.4206 16.0132 10.1803 15.9979 9.93732C15.9826 9.69429 15.8792 9.46519 15.707 9.293Z'/%3E%3C/svg%3E");
}

.sticker.bad {
  color: var(--wrong-ink);
  --verdict-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 0 0 20a10 10 0 1 0 0-20zM14.83 7.47L16.53 9.17L13.7 12L16.53 14.83L14.83 16.53L12 13.7L9.17 16.53L7.47 14.83L10.3 12L7.47 9.17L9.17 7.47L12 10.3Z'/%3E%3C/svg%3E");
}

.sheet .ans {
  font-weight: 600;
  font-size: 1rem;
  color: var(--wrong-ink);
  margin: 12px 0 0;
}

.sheet .exp {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
}

.sheet .note,
.miss .note {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--amber-line);
  border-radius: var(--r);
  color: var(--amber-ink);
  background: var(--amber-soft);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* The continue button takes the verdict's colour, like the kit's Next. */
.sheet:has(.sticker.good) .big {
  background: var(--green);
  box-shadow: var(--drop) var(--green-lip);
}

.sheet:has(.sticker.good) .big:active {
  box-shadow: 0 0 0 var(--green-lip);
}

.sheet:has(.sticker.bad) .big {
  background: var(--wrong);
  box-shadow: var(--drop) var(--wrong-lip);
}

.sheet:has(.sticker.bad) .big:active {
  box-shadow: 0 0 0 var(--wrong-lip);
}