/* The ask screens' own styles: AskView (the reports card, the answer cards, the question field),
   ReportView and Today's ReportTeaser. */

/* Room under the last card for the field, which sits over the page above the tab bar. */
.ask-view .content.ask { padding-bottom: 76px; }

/* ReportsSection: the eyebrow, the picker to its right (at most 200 wide), the reports. */
.ask-reports-header { gap: var(--s); }
.ask-reports-header .segmented { width: 200px; max-width: 60%; flex: none; }
.ask-reports-header .segmented button { font-size: 15px; min-height: 28px; }
.ask-report-link { display: flex; align-items: center; gap: var(--s); width: 100%; text-align: left; line-height: 18px; }
.ask-report-link .secondary { font-variant-numeric: tabular-nums; }
button.ask-report-link:active { opacity: 0.5; }

/* Buttons in the card, as SwiftUI draws a plain Button's title: aqua, left-aligned. */
.ask-question { color: var(--aqua); text-align: left; line-height: 18px; align-self: flex-start; }
.ask-question:active { opacity: 0.5; }

/* AnswerCardView. */
.ask-card .body { line-height: 22px; }
.ask-swim { display: flex; align-items: center; gap: var(--m); width: 100%; text-align: left; }
.ask-swim:active { opacity: 0.5; }
.ask-unanswered { color: var(--secondary); padding: var(--m) var(--l); border-radius: 18px; line-height: 20px;
  background: color-mix(in srgb, var(--aqua) 10%, transparent); }
.answer-chart { display: flex; flex-direction: column; gap: var(--s); }
.answer-chart-link:empty { display: none; }
.ask-link { display: inline-flex; align-items: center; gap: 6px; color: var(--aqua); min-height: 28px; text-align: left; }
.ask-link svg { width: 11px; height: 11px; flex: none; }

/* DisclosureGroup: the label in aqua, the chevron turning down when open. */
.ask-disclosure { display: flex; align-items: center; justify-content: space-between; width: 100%; color: var(--aqua);
  min-height: 28px; text-align: left; }
.ask-disclosure svg { width: 13px; height: 13px; transition: transform 0.2s; }
.ask-disclosure svg.open { transform: rotate(90deg); }
.ask-workings-body { display: flex; flex-direction: column; gap: var(--s); padding-top: var(--s); }
.ask-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ask-table { white-space: pre-wrap; line-height: 15px; }

.ask-more { color: var(--aqua); align-self: center; min-height: 44px; }

/* The question field: glass, over the page above the tab bar (safeAreaInset), as AskView's field. */
.ask-field { position: absolute; left: 8px; right: 8px; bottom: 88px; z-index: 15; padding: var(--s) var(--l);
  border-radius: var(--radius-card); background: var(--glass); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  border: 0.5px solid color-mix(in srgb, var(--label) 8%, transparent);
  backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); }
.ask-field-row { display: flex; align-items: center; gap: var(--s); }
.ask-input { flex: 1; min-width: 0; height: 36px; padding: 0 var(--m); border: 0; border-radius: 18px; outline: none;
  background: var(--surface); color: var(--label); font: inherit; font-size: 17px; }
.ask-input::placeholder { color: var(--tertiary); }
.ask-input:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--aqua) 50%, transparent); }
.ask-mic, .ask-send { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.ask-mic { color: var(--aqua); }
.ask-mic svg { width: 26px; height: 26px; }
.ask-send { color: var(--aqua); }
.ask-send svg { width: 26px; height: 26px; }
.ask-send[disabled] { color: var(--tertiary); cursor: default; }
.ask-voice { color: var(--aqua); }
.ask-voice svg { width: 34px; height: 34px; }

/* ReportTeaser on Today: the whole card is the button. */
.ask-teaser { text-align: left; width: 100%; cursor: pointer; }
.ask-teaser:active { opacity: 0.7; }