/* TERRA · Nicoya: styles owned by ask.js. Square corners, 44 px targets, gold focus (engine.css). */

/* the question as read */
.aq-read { display: flex; flex-direction: column; gap: 6px; }
.aq-q { font-size: 14px; line-height: 1.6; color: var(--sand); }
.aq-ok { color: var(--sand); border-bottom: 1px solid var(--teal); }
.aq-no { color: var(--rust); text-decoration: line-through; text-decoration-color: rgba(201,138,108,.7); }
.aq-aside { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aq-aside li { font-size: 12.5px; line-height: 1.5; color: var(--sand-2); padding-left: 10px; border-left: 2px solid var(--rust); }
.aq-edited[hidden], #aqCredit[hidden] { display: none; }

/* conditions: one row each, every control inline */
.aq-build { display: flex; flex-direction: column; gap: 8px; }
.aq-conds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.aq-cond { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start; border: 1px solid rgba(52,178,148,.55); background: var(--forest-deep); }
.aq-cond.aside { border-style: dashed; border-color: rgba(232,226,214,.3); }
.aq-cond.aside .aq-ctl { opacity: .6; }
.aq-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 8px; min-height: 44px; font-size: 13px; }
.aq-ctl .t { color: var(--sand-2); }
.aq-cnote { grid-column: 1 / -1; padding: 0 8px 6px; font: 400 11.5px/1.45 var(--sans); color: var(--sand-3); }
.aq-cnote.nr { color: var(--rust); }
.aq-x { width: 44px; height: 44px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--sand-3); font-size: 18px; cursor: pointer; }
.aq-x:hover { color: var(--gold); }

.aq-ctl select, .aq-add select, .aq-rank select {
  min-height: 44px; padding: 0 26px 0 8px; border: 1px solid rgba(232,226,214,.28); border-radius: 0;
  -webkit-appearance: none; appearance: none;
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c6a76a' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 9px center;
  color: var(--sand); font: 400 13px var(--sans); cursor: pointer;
}
.aq-ctl select:hover, .aq-add select:hover, .aq-rank select:hover { border-color: var(--sand); }
.aq-num { display: inline-flex; align-items: center; border: 1px solid rgba(232,226,214,.28); background: var(--forest); }
.aq-num:focus-within { border-color: var(--gold); outline: 2px solid var(--gold); outline-offset: 2px; }
.aq-num input { width: 68px; min-height: 42px; padding: 0 4px 0 8px; border: 0; border-radius: 0; background: transparent; color: var(--teal); font: 300 18px var(--serif); }
.aq-num input:focus-visible { outline: none; }
.aq-num .u { padding: 0 8px 0 2px; font: 500 11px var(--mono); color: var(--sand-3); }
.aq-tag { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0 0 8px; border: 1px solid rgba(52,178,148,.55); color: var(--teal); font-size: 12.5px; }
.aq-tag:not(:has(button)) { padding-right: 8px; }
.aq-tagx { min-width: 44px; min-height: 42px; border: 0; background: transparent; color: var(--sand-3); cursor: pointer; }
.aq-tagx:hover { color: var(--gold); }
.aq-add { display: block; }
.aq-add select { width: 100%; color: var(--gold); border-color: rgba(198,167,106,.55); }

/* the funnel */
.aq-out { display: flex; flex-direction: column; gap: 10px; }
.aq-funnel { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.aq-funnel li { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.aq-fl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--sand-2); }
.aq-fl b { flex: none; font: 300 17px var(--serif); color: var(--sand); }
.aq-fs { font: 400 11.5px/1.45 var(--mono); color: var(--sand-3); }
.aq-bar { position: relative; display: block; height: 6px; background: rgba(232,226,214,.08); }
.aq-bar i, .aq-bar b { position: absolute; left: 0; top: 0; bottom: 0; }
.aq-bar i { background: rgba(52,178,148,.28); }
.aq-bar b { background: var(--teal); }
.aq-last .aq-fl span { color: var(--gold); }
.aq-last .aq-bar b { background: var(--gold); }

/* nothing answers: why, and what one change would give */
.aq-why { display: flex; flex-direction: column; gap: 8px; }
.aq-relax { display: flex; flex-direction: column; gap: 6px; }
.aq-rx { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 44px; padding: 8px 10px; text-align: left; border: 1px solid rgba(198,167,106,.5); background: transparent; color: var(--sand); cursor: pointer; }
.aq-rx small { font: 500 11px var(--mono); letter-spacing: .04em; color: var(--teal); }
.aq-rx:hover { border-color: var(--gold); color: var(--gold); }

/* ranking and the places */
.aq-rank { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.aq-rank select { flex: 1; min-width: 0; }
.aq-results .aq-go { min-height: 44px; }
.aq-place details { border-bottom: 1px solid var(--line-2); }
.aq-place summary { display: flex; align-items: center; min-height: 44px; padding-left: 34px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sand-3); cursor: pointer; list-style: none; }
.aq-place summary::-webkit-details-marker { display: none; }
.aq-place summary::before { content: "+"; width: 16px; color: var(--gold); }
.aq-place details[open] summary::before { content: "−"; }
.aq-place summary:hover { color: var(--gold); }
.aq-place .rows { border-top: 0; margin: 0 0 8px 34px; }
.aq-place .row { font-size: 12.5px; padding: 6px 0; }
.aq-more { width: 100%; min-height: 44px; }

/* nothing read: examples to click */
.aq-ex { display: flex; flex-direction: column; gap: 6px; }
.aq-exb { width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; border: 1px solid var(--line); background: transparent; color: var(--sand); font-size: 13px; line-height: 1.45; cursor: pointer; }
.aq-exb:hover { border-color: var(--gold); color: var(--gold); }

.aq-back { align-self: flex-start; min-height: 44px; }