/* Site addition: the Ask dialog (js/ask.js, _includes/ask.html). Colour tokens only, so both themes follow the
   switch; native <dialog> as the photo viewer. Behind it the page lies under the menus' milky glass (--menu-glass,
   blur 14px, saturate 110%; DESIGN-GUIDE "Glass and shadow colours"), dimmed instead where blur is unavailable; the
   dialog itself stays opaque paper, so the results read cleanly. On a phone the dialog fills the screen. */
.ask-toggle { min-height: 44px; padding: 5px 0; border: 0; background: transparent; cursor: pointer; font-family: var(--accent-font); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); }
.ask-toggle:hover { color: var(--link); }
.ask-toggle[hidden] { display: none; }

.ask-dialog { width: min(680px, calc(100vw - 32px)); max-width: none; max-height: min(78dvh, 760px); margin: 11vh auto auto; padding: 0; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); box-shadow: var(--menu-shadow); }
.ask-dialog[open] { display: flex; flex-direction: column; }
.ask-dialog::backdrop { background: rgba(32, 35, 40, .28); }
:root[data-theme="dark"] .ask-dialog::backdrop { background: rgba(0, 0, 0, .45); }
@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .ask-dialog::backdrop, :root[data-theme="dark"] .ask-dialog::backdrop { background: var(--menu-glass); -webkit-backdrop-filter: blur(14px) saturate(110%); backdrop-filter: blur(14px) saturate(110%); }
}

.ask-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px 8px; border-bottom: 1px solid var(--rule); }
.ask-title { margin: 0; font-family: var(--accent-font); font-size: 10px; line-height: 1.4; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.ask-title .red-dot { --dot-size: 4px; margin-left: 1px; vertical-align: -.016em; }
.ask-close { min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: var(--accent-font); font-size: 11px; color: var(--ink); }
.ask-close::after { content: ' −'; color: var(--muted); }

.ask-log { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 24px 18px; }
.ask-log:empty { min-height: 0; padding: 0; }
.ask-turn + .ask-turn { border-top: 1px solid var(--rule); }
.ask-q { margin: 20px 0 10px; font-family: var(--accent-font); font-size: 12px; line-height: 1.6; color: var(--muted); }
.ask-q::before { content: '— '; }
.ask-text, .ask-none { margin: 0 0 10px; font-size: 17px; line-height: 1.6; letter-spacing: -.2px; }
.ask-dates { margin: 0 0 10px; padding: 0; list-style: none; font-size: 17px; line-height: 1.6; letter-spacing: -.2px; }
.ask-dates li + li { margin-top: 4px; }
.ask-partial { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ask-wait { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.ask-source { margin: 0 0 14px; font-family: var(--accent-font); font-size: 11px; line-height: 1.7; color: var(--muted); }
.ask-a a { color: var(--link); text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; }
.ask-result + .ask-result { margin-top: 18px; }
.ask-more { margin: 0 0 6px; }
.ask-more__label { margin: 0 0 4px; font-family: var(--accent-font); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ask-more ul { margin: 0; padding: 0; list-style: none; }
.ask-more li { padding: 3px 0; font-size: 14px; line-height: 1.5; }
.ask-more__kicker { font-family: var(--accent-font); font-size: 10px; color: var(--muted); }

.ask-form { display: flex; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--rule); }
.ask-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.ask-input::placeholder { color: var(--muted); }
/* no frame and no focus ring: the field is focused whenever the dialog is open, and the caret marks it (Thomas, 2026-11-14) */
.ask-input:focus, .ask-input:focus-visible { outline: none; }
.ask-submit { min-height: 44px; padding: 0 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); cursor: pointer; font-family: var(--accent-font); font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.ask-submit:hover { background: var(--link); border-color: var(--link); }
.ask-status { margin: 0; padding: 0 24px 12px; font-family: var(--accent-font); font-size: 10px; line-height: 1.6; color: var(--ink); }
.ask-status[hidden] { display: none; }

@media (max-width: 640px) {
  .ask-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .ask-head, .ask-form { padding-left: 16px; padding-right: 16px; }
  .ask-log { padding: 4px 16px 18px; }
  .ask-status { padding: 0 16px 12px; }
}