/* =====================================================================
   Placement warm-up card. Owner: agent A7.
   Loaded only on the practice page, alongside placement.js.

   Kept out of speak.css on purpose: that file styles the live conversation,
   which is governed by the no-ad, no-clutter rule, and it should not carry a
   panel that exists for about ninety seconds on a first visit.

   Palette is the site's: navy #1B3A6B, gold #E8A020, white. Colours are
   written out rather than read from custom properties so the card looks right
   whatever else did or did not load.
   ===================================================================== */

.spg-warm {
  background: #fff;
  border: 1px solid #dfe4ec;
  border-left: 4px solid #E8A020;
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 18px;
  box-shadow: 0 2px 14px rgba(20, 40, 80, .06);
}

.spg-warm-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.spg-warm-h h2 { margin: 0; font-size: 1.12rem; color: #12294c; line-height: 1.3; }

/* Legal: the AI disclosure sits beside the tutor's name for as long as the
   card is on screen, and there is no control that removes it. */
.spg-warm-ai {
  background: #E8A020; color: #16294a;
  border-radius: 5px; padding: 2px 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}

.spg-warm-lede { margin: 0 0 14px; color: #55607a; line-height: 1.65; max-width: 66ch; }

.spg-warm-log { max-height: 260px; overflow-y: auto; margin: 4px 0 14px; }
.spg-warm-msg { margin-bottom: 11px; }
.spg-warm-msg .w {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: #8a93a3; margin-bottom: 2px;
}
.spg-warm-msg.you .w { color: #a86c07; }
.spg-warm-msg p { margin: 0; color: #26324c; line-height: 1.6; }

.spg-warm-status { margin: 0 0 12px; color: #55607a; font-size: .9rem; }

.spg-warm-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.spg-warm-form textarea {
  flex: 1 1 260px; min-width: 0; resize: vertical;
  padding: 10px 13px; font: inherit; font-size: .95rem; line-height: 1.5;
  color: #12294c; background: #fff;
  border: 1px solid #d5dce8; border-radius: 9px;
}
.spg-warm-form textarea:focus { outline: 2px solid #1B3A6B; outline-offset: 1px; }

.spg-warm-acts { display: flex; flex-wrap: wrap; gap: 9px; }

.spg-warm-btn {
  cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.3;
  padding: 10px 16px; border-radius: 9px;
  border: 1px solid #d5dce8; background: #fff; color: #1B3A6B;
}
.spg-warm-btn:hover { border-color: #1B3A6B; }
.spg-warm-btn:focus-visible { outline: 2px solid #1B3A6B; outline-offset: 2px; }
.spg-warm-btn[disabled] { opacity: .55; cursor: default; }
/* The two choices are the SAME visual weight in structure — only the colour
   differs — because "skip" must never read as the reluctant option. */
.spg-warm-btn.go { background: #1B3A6B; border-color: #1B3A6B; color: #fff; }
.spg-warm-btn.go:hover { background: #16305a; }

.spg-warm-picker {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid #eef1f6;
  font-size: .86rem; color: #6a748a;
}
.spg-warm-pill {
  cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid #d5dce8; background: #f7f9fc; color: #1B3A6B;
}
.spg-warm-pill:hover { border-color: #1B3A6B; }
.spg-warm-pill:focus-visible { outline: 2px solid #1B3A6B; outline-offset: 2px; }

.spg-warm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .spg-warm { padding: 16px; border-radius: 12px; }
  .spg-warm-btn { width: 100%; text-align: center; }
}