/* What a move or a need asks, and what its card shows beside it (ask.js; Chris, 5 Nov). Its own file: style.css is past its
   ceiling. Plain and calm: one field a row, the choices as buttons a finger can hit, the words of a letter set apart. */

.ask-blocks { display: grid; gap: 8px; margin: 8px 0 2px; }
.ask-quote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, 0.035); border-radius: 0 8px 8px 0; }
.ask-quote p { margin: 0; white-space: pre-wrap; color: var(--text); font-size: 14px; line-height: 1.45; }
.ask-quote cite { display: block; margin-top: 4px; color: var(--faint); font-size: 12px; font-style: normal; }
.ask-list { margin: 0; padding-left: 18px; color: var(--text); font-size: 14px; line-height: 1.45; }
.ask-table-wrap { overflow-x: auto; }
.ask-table { border-collapse: collapse; font-size: 13px; min-width: 60%; }
.ask-table th { text-align: left; color: var(--faint); font-weight: 600; padding: 3px 10px 3px 0; border-bottom: 1px solid var(--line); }
.ask-table td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); color: var(--text); font-variant-numeric: tabular-nums; }
.ask-metrics { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ask-metric { display: grid; }
.ask-metric-v { font-size: 20px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }
.ask-metric-u { font-size: 13px; font-weight: 500; color: var(--muted); }
.ask-metric-l { font-size: 12px; color: var(--faint); }
.ask-link { color: var(--gold); font-size: 14px; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

.ask-form { display: grid; gap: 12px; margin-top: 10px; }
.ask-field { display: grid; gap: 6px; }
.ask-label { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ask-opt { font-weight: 400; color: var(--faint); }
.ask-box { display: flex; align-items: flex-start; gap: 4px; }
.ask-box > .voice-btn { margin-top: 4px; }
.ask-text { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; }
.ask-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-choice { min-height: 40px; min-width: 64px; }
.ask-choice[aria-pressed="true"] { border-color: var(--gold); color: var(--on-gold, #1a130e); background: var(--gold); }
.ask-inline { display: flex; align-items: center; gap: 8px; }
.ask-input {
  min-height: 40px; padding: 6px 10px; box-sizing: border-box; max-width: 200px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
}
.ask-unit { color: var(--muted); font-size: 14px; }
.ask-actions { align-items: center; }
.ask-msg { color: var(--muted); font-size: 13px; }
button.ask-go { font-weight: 650; }

.ask-sent { margin-top: 10px; display: grid; gap: 4px; }
.ask-sent-answer {
  white-space: pre-wrap; color: var(--text); font-size: 14px; line-height: 1.45; padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.answered-move .title { margin-bottom: 6px; }
/* Nestor's medallion keeps the card's lower right corner (desk-more.css): what is said there stops short of it. */
.item.move.has-nestor .ask-sent, .item.move.has-nestor .ask-form { margin-right: 44px; }
.ask-state { margin-top: 6px; }
.ask-state.acked { color: var(--ok); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .ask-quote, :root:not([data-theme="dark"]) .ask-sent-answer { background: rgba(0, 0, 0, 0.035); }
}