/* Ask Lantern use cases: a request, then what Lantern does with it.
   Built from the same pieces as lantern-cards.css. */
.ln-grid--asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-grid--asks .ln-scene { height: 230px; }
.ln-grid--asks .ln-card__copy h3 { font-size: 23px; }
.ln-grid--asks .ln-card__copy p { font-size: 13px; }
.ln-ask-tone--amber { background: #f5ebda; }
.ln-ask-tone--sage { background: #edf1e9; }
.ln-ask-tone--rose { background: #f3e4de; }
.ln-ask-tone--slate { background: #e8ebec; }
.ln-ask-tone--lilac { background: #eeedf1; }
.ln-ask-tone--paper { background: #f4eddf; }
.ln-scene--ask { background-image: radial-gradient(#0000001a .7px, transparent .8px); background-size: 17px 17px; }

.ln-ask-box { position: absolute; top: 46px; left: 7%; right: 7%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #a99c82; border-radius: 22px; background: #fffdf7; box-shadow: 0 4px 0 #dccfb680; font-size: 12px; }
.ln-ask-box .ln-mascot { width: 26px; height: 26px; }
.ln-ask-box span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.ln-ask-answer { position: absolute; top: 112px; left: 11%; right: 7%; display: flex; align-items: flex-start; gap: 9px; padding: 12px 13px; border: 1px solid #b6a988; border-radius: 2px 9px 9px; background: #fffef9; box-shadow: 0 3px 0 #dcd3bf; }
.ln-ask-answer p { margin: 0; font-size: 11px; line-height: 1.5; color: #4d5145; }
.ln-ask-answer strong { font-weight: 600; color: #282d27; }
.ln-ask-answer--card { top: auto; bottom: 18px; left: 7%; border-radius: 9px; }
.ln-ask-answer--card .ln-mascot { width: 26px; height: 26px; }

.ln-ask-start { position: absolute; top: 112px; left: 7%; right: 7%; padding: 12px 13px 14px; border: 1px solid #98a588; border-radius: 9px; background: #fffef9; box-shadow: 0 4px 0 #ccd5c4; overflow: hidden; }
.ln-ask-start__head { display: flex; align-items: center; gap: 8px; }
.ln-ask-start__head img { width: 18px; height: 18px; }
.ln-ask-start__head strong { font-size: 11px; font-weight: 600; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ln-ask-cancel { margin-left: auto; padding: 3px 8px; border: 1px solid #c9cdbd; border-radius: 4px; color: #6f735f; font-size: 9px; }
.ln-ask-start > span { display: block; margin-top: 8px; color: #7d8370; font-size: 10px; }
.ln-ask-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #bd6b32; transform-origin: left; }

.ln-ask-popup { position: absolute; top: 48px; left: 9%; right: 9%; padding: 13px 14px; border: 1px solid #c79a8a; border-radius: 7px; background: #fbefea; outline: 1px dashed #c98549; outline-offset: 5px; transform: rotate(-2deg); }
.ln-ask-popup strong, .ln-ask-popup span { display: block; }
.ln-ask-popup strong { color: #9b3b26; font-size: 12px; font-weight: 600; }
.ln-ask-popup span { margin-top: 5px; color: #9a6a5c; font-size: 10px; }

.ln-ask-terminal { position: absolute; top: 44px; left: 7%; right: 7%; transform: rotate(-1.5deg); }
.ln-ask-terminal .ln-window__body { padding: 11px 13px; outline: 1px dashed #c98549; outline-offset: -5px; }
.ln-ask-error { color: #f0a58c; white-space: normal; }

.ln-ask-result { position: absolute; top: 112px; left: 7%; right: 7%; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid #a4a2ab; border-radius: 8px; background: #fffefa; box-shadow: 0 4px 0 #d0cdd8; }
.ln-ask-result strong, .ln-ask-result div > span { display: block; }
.ln-ask-result strong { font-size: 11px; font-weight: 600; }
.ln-ask-result div > span { margin-top: 3px; color: #8e8994; font-size: 9px; }
.ln-ask-result > svg { margin-left: auto; color: #8c9c77; width: 15px; }

.ln-ask-footnote { max-width: 620px; margin: 26px auto 0; color: #74705f; font-size: 12px; line-height: 1.6; text-align: center; }

[data-card-motion='playing'] .ln-ask-progress, [data-card-motion='paused'] .ln-ask-progress { animation: ln-ask-progress 3000ms 600ms linear both; }
[data-card-motion] .ln-ask-answer--card { animation-delay: 900ms; }
@keyframes ln-ask-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1100px) {
  .ln-grid--asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-grid--asks .ln-card__copy { padding: 21px; }
}
@media (max-width: 760px) {
  .ln-grid--asks { grid-template-columns: minmax(0, 1fr); }
  .ln-grid--asks .ln-card__copy h3 { font-size: 24px; }
  .ln-ask-footnote { padding-inline: 4px; }
}