/* Ask the archive (ask.js): the header button, the chat panel (right panel; a bottom sheet on phones) and the collection
   pages. Uses the reader's own colour tokens from style.css, so light, dark and text size follow What to show. */

.askbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 2px solid #e3c56d; border-radius: 22px;
  background: transparent; color: var(--headink); font: bold 15px Arial, sans-serif; white-space: nowrap; margin-left: 4px; }
.askbtn:hover { background: var(--navy2); }
.askbtn[aria-expanded="true"] { background: #e3c56d; color: #1b1916; }
.askbtn[hidden] { display: none; }
@media (max-width: 1060px) { .askbtn { order: 2; } }
/* phones: the header has one line for the name and the buttons, so Ask shows its icon only (the word stays for screen readers) */
@media (max-width: 640px) {
  .askbtn { min-width: 44px; padding: 0 10px; margin-left: auto; justify-content: center; }
  .askbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.askpanel { position: fixed; z-index: 45; right: 0; top: var(--hh, 52px); bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -6px 0 26px rgba(0, 0, 0, .28);
  font: calc(15px * var(--fs, 1))/1.45 Arial, sans-serif; }
.askpanel[hidden] { display: none; }
.ask-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.ask-head h2 { flex: 1; margin: 0; font: normal calc(22px * var(--fs, 1)) Georgia, "Times New Roman", serif; }
.ask-new { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; background: none; color: var(--accent); font: calc(14px * var(--fs, 1)) Arial, sans-serif; }
.ask-close { min-width: 44px; min-height: 44px; border: 0; border-radius: 22px; background: none; color: var(--ink); font-size: 26px; line-height: 1; }
.ask-new:hover, .ask-close:hover { background: var(--hover); }
.ask-note { margin: 0; padding: 8px 16px; background: var(--tint); color: var(--ink2); font-size: calc(13.5px * var(--fs, 1)); border-bottom: 1px solid var(--line); }
.ask-log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px; }
.ask-log:focus-visible { outline-offset: -3px; }
.ask-hello { color: var(--soft); }
.ask-turn { margin: 10px 0 16px; }
.ask-q { margin-left: 18%; padding: 8px 12px; border-radius: 12px 12px 2px 12px; background: var(--navy); color: var(--headink); overflow-wrap: anywhere; }
.ask-a { margin-top: 8px; padding: 2px 2px; font-family: Georgia, "Times New Roman", serif; font-size: calc(16px * var(--fs, 1)); overflow-wrap: anywhere; }
.ask-a p { margin: 6px 0; }
.ask-a ul { margin: 6px 0; padding-left: 20px; }
.ask-msg { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-family: Arial, sans-serif; font-size: calc(15px * var(--fs, 1)); }
.ask-wait { color: var(--soft); font-family: Arial, sans-serif; }
.ask-dots { display: inline-block; width: 26px; height: 8px; vertical-align: middle; background: radial-gradient(circle, var(--soft) 3px, transparent 3.5px) 0 0 / 9px 8px repeat-x; animation: askdots 1.2s steps(3) infinite; }
@keyframes askdots { from { width: 8px; } to { width: 26px; } }
@media (prefers-reduced-motion: reduce) { .ask-dots { animation: none; } }
.ask-chip { display: inline-block; padding: 0 7px; margin: 1px 0; border: 1px solid var(--line2, var(--line)); border-radius: 12px; background: var(--card); color: var(--accent);
  text-decoration: none; font-family: Arial, sans-serif; font-size: .88em; line-height: 1.7; }
.ask-chip:hover { background: var(--hover); text-decoration: underline; }
.ask-coll { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin: 4px 0; border-radius: 20px; background: var(--btn); color: var(--btnink);
  text-decoration: none; font: bold calc(14px * var(--fs, 1)) Arial, sans-serif; }
.ask-coll:hover { filter: brightness(1.1); }
.ask-cites { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--line); font-family: Arial, sans-serif; }
.ask-cites h3 { margin: 0 0 4px; font: bold calc(12px * var(--fs, 1)) Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ask-cites ul, .ask-colls { list-style: none; margin: 0; padding: 0; }
.ask-cite { display: block; min-height: 40px; padding: 4px 6px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: calc(14px * var(--fs, 1)); }
.ask-cite:hover { background: var(--hover); }
.ask-cite .when { display: block; font-size: calc(13px * var(--fs, 1)); }
.ask-sugg { padding: 0 16px 6px; }
.ask-sugg[hidden] { display: none; }
/* 2026-10-18 (UX G8): the heading says what a tap does, so it is a plain sentence, not small capitals */
.ask-k { margin: 4px 0; font: calc(13px * var(--fs, 1)) Arial, sans-serif; color: var(--soft); }
.ask-sugg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask-s { min-height: 40px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-align: left; font: calc(14px * var(--fs, 1)) Arial, sans-serif; }
.ask-s:hover { background: var(--hover); border-color: var(--accent); }
.ask-paused { margin: 0 16px 6px; padding: 8px 12px; border-radius: 8px; background: var(--flash); color: var(--ink); }
.ask-paused[hidden] { display: none; }
.ask-form { display: flex; gap: 8px; align-items: flex-end; padding: 8px 12px 4px 16px; border-top: 1px solid var(--line); background: var(--card); }
.ask-form textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 30vh; resize: vertical; padding: 10px; border: 1px solid var(--line2, var(--line)); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 16px Arial, sans-serif; }
.ask-send { min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--btn); color: var(--btnink); font: bold 15px Arial, sans-serif; }
.ask-send:disabled, .ask-form textarea:disabled { opacity: .55; cursor: not-allowed; }
.ask-small { margin: 0; padding: 2px 16px 10px; background: var(--card); color: var(--soft); font-size: calc(12.5px * var(--fs, 1)); }

/* phones and tablets (up to 860 px, main session 2026-10-18): a modal sheet from the bottom, over a dimmed page; it never
   covers the letters without being modal (ask.js sets aria-modal and keeps the focus inside) */
@media (max-width: 860px) {
  .askpanel { top: auto; left: 0; width: 100%; height: min(86vh, calc(100vh - 40px)); border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -6px 26px rgba(0, 0, 0, .35); }
  .ask-head { border-radius: 14px 14px 0 0; }
  .ask-q { margin-left: 10%; }
  body.ask-open { overflow: hidden; }
  body.ask-open::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .35); }
}
@media (min-width: 641px) and (max-width: 860px) {
  .askpanel { left: 50%; width: min(760px, 100%); transform: translateX(-50%); }  /* a tablet: a centred sheet, not edge to edge */
}
@media (max-width: 640px) { .ask-new { padding: 0 10px; } }
@media print { .askbtn, .askpanel { display: none !important; } }

/* collection pages (#/collection/..., #/collections) */
.askc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; font-family: Arial, sans-serif; }
.askc-btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--line2, var(--line)); border-radius: 22px; background: var(--card); color: var(--ink); font: calc(15px * var(--fs, 1)) Arial, sans-serif; }
.askc-btn:hover { background: var(--hover); }
.askc-btn[aria-pressed="true"] { background: var(--btn); color: var(--btnink); border-color: transparent; }
.askc-small { min-height: 36px; padding: 0 12px; font-size: calc(14px * var(--fs, 1)); }
.askc-link { display: inline-flex; align-items: center; min-height: 44px; }
.askc-said { color: var(--soft); font-size: calc(14px * var(--fs, 1)); }
.askc-who { font: calc(14px * var(--fs, 1)) Arial, sans-serif; color: var(--soft); }
.askc-note { font-style: italic; }
.askc-miss { margin: 10px 0; padding: 10px 16px; border: 1px dashed var(--line); border-radius: 6px; color: var(--soft); }
.askc-saved { list-style: none; padding: 0; }
.askc-saved li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.askc-saved a { display: inline-flex; align-items: center; min-height: 44px; font-size: calc(17px * var(--fs, 1)); }
.askc-n { color: var(--soft); font: calc(14px * var(--fs, 1)) Arial, sans-serif; }
@media print { .askc-tools { display: none; } }

/* 2026-10-16: waiting (a light progress line; 10 seconds is normal now), Try again, and the work done */
.ask-wait { display: flex; flex-direction: column; gap: 6px; }
.ask-wait-t { font-weight: bold; color: var(--ink2); }
.ask-wait-n { font-size: calc(13px * var(--fs, 1)); color: var(--soft); }
/* 2026-10-18: the connection dropped and the panel is fetching the kept answer */
.ask-wait-n.ask-reconnect { color: var(--ink2); font-style: italic; }
.ask-bar { position: relative; display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ask-bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; border-radius: 2px; background: var(--accent); animation: askbar 1.6s ease-in-out infinite; }
@keyframes askbar { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .ask-bar span { animation: none; width: 100%; opacity: .45; } }
.ask-retry { min-height: 40px; margin-left: 6px; padding: 0 16px; border: 0; border-radius: 20px; background: var(--btn); color: var(--btnink); font: bold calc(14px * var(--fs, 1)) Arial, sans-serif; }
.ask-work { margin: 6px 0 0; font: calc(13px * var(--fs, 1)) Arial, sans-serif; color: var(--soft); }
@media (min-width: 641px) and (max-width: 1060px) { .askbtn { order: 4; } }