/* Should I Do It? Layout comes from tool.css (.tool grid); this file adds the
   gut check panel, the lean box and the Do it / Don't card. */

/* Phones: the card and Flip button first so the main action stays above the
   fold, then the result, then the gut check. Desktop puts the gut check on
   the left beside the card. */
.tool-should .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "stage" "controls" "result" "checks"; }
@media (min-width: 900px) {
  .tool-should .wrap {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-areas:
      "copy   stage"
      "checks controls"
      "checks result";
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
}
.t-stage { grid-area: stage; position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
.t-checks { grid-area: checks; }

/* ---------- The card ---------- */

.flip-stage { position: relative; width: 100%; display: grid; place-items: center; padding: 18px 0 6px; perspective: 900px; }
.flip-card {
  position: relative; width: min(62vw, 260px); aspect-ratio: 1; padding: 0;
  background: none; border: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 899px) { .flip-card { width: min(52vw, 200px); } }
.flip-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 6px; border-radius: var(--r-lg); }
.flip-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 3px solid var(--foreground); box-shadow: 6px 6px 0 0 var(--foreground);
  font-family: var(--font-display); font-weight: 800; color: var(--foreground);
  font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; letter-spacing: -0.01em;
  transition: transform var(--t-bounce);
}
.flip-face span { position: relative; z-index: 1; }
.face-idle { background: var(--card); border-radius: var(--r-lg); border-style: dashed; box-shadow: 6px 6px 0 0 var(--border); font-size: clamp(3rem, 10vw, 5rem); color: var(--accent); transform: rotate(-4deg); }
.face-yes { background: var(--yes); border-radius: var(--r-full); transform: rotate(-8deg); }
.face-no {
  background-color: var(--no); border-radius: var(--r-lg); transform: rotate(6deg);
  background-image: repeating-linear-gradient(45deg, transparent 0 9px, rgba(255, 255, 255, 0.28) 9px 13px);
}
.flip-card:hover .face-idle { transform: rotate(2deg) scale(1.04); }
.t-stage.is-idle .face-idle { animation: card-bob 1.4s var(--bounce) infinite alternate; }
@keyframes card-bob { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(-1deg) translateY(-6px); } }

.flip-card.is-flipping { animation: card-flip 1000ms cubic-bezier(0.3, 0.7, 0.4, 1) both; }
@keyframes card-flip {
  0%   { transform: rotateY(0) scale(1); }
  45%  { transform: rotateY(90deg) scale(1.08); }
  55%  { transform: rotateY(-90deg) scale(1.08); }
  80%  { transform: rotateY(12deg) scale(1.02); }
  100% { transform: rotateY(0) scale(1); }
}
.t-stage.is-stopped .flip-card { opacity: 0.35; cursor: not-allowed; }

.flip-hint { margin: 14px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--muted-fg); }
@media (max-width: 899px) { .flip-hint { display: none; } }

/* ---------- Gut check ---------- */

.t-checks { padding: 18px 18px 16px; }
.t-checks .t-question { margin-bottom: 14px; }
.t-checks .t-question .input { min-height: 46px; }
.checks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.checks-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 800; }
.checks-sub { margin: 0 0 12px; font-size: 0.88rem; color: var(--muted-fg); }
.check-reset { padding: 0; border: 0; background: none; font: 600 0.85rem var(--font-body); color: var(--muted-fg); text-decoration: underline; cursor: pointer; }

.check { margin: 0 0 12px; padding: 0; border: 0; min-width: 0; }
.check legend { padding: 0; margin-bottom: 7px; font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.check-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check label {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px;
  background: var(--card); border: var(--bw) solid var(--foreground); border-radius: var(--r-full);
  font-size: 0.9rem; font-weight: 700; cursor: pointer;
  transition: background var(--t-bounce), transform var(--t-bounce);
}
.check label:hover { background: var(--muted); }
.check input:checked + label { background: var(--tertiary); box-shadow: var(--pop-active); }
.check input:focus-visible + label { outline: 3px solid var(--ring); outline-offset: 2px; }

/* The lean box sits under the questions and updates as they are answered. */
.lean { margin-top: 6px; padding: 12px 14px; border: var(--bw) dashed var(--foreground); border-radius: var(--r-md); background: var(--background); font-size: 0.92rem; line-height: 1.5; }
.lean p { margin: 0; }
.lean p + p, .lean ul + p { margin-top: 6px; }
.lean ul { margin: 6px 0 0; padding-left: 18px; }
.lean-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.lean-idle { color: var(--muted-fg); }
.lean-do { border-style: solid; background: var(--yes); }
.lean-dont { border-style: solid; background: var(--no); }
.lean-toss { border-style: solid; background: var(--maybe); }
.lean-stop { border-style: solid; border-width: 3px; background: var(--card); }

/* ---------- Controls and result ---------- */

.edit-checks { display: none; }
@media (max-width: 899px) { .edit-checks { display: inline-flex; order: 2; } }
.t-result .agree { margin: 6px 0 0; font-weight: 600; }