/* Ask & Answer's default panel. Every colour, face and text size is a variable,
 * so a site restyles all of it by setting them on its own :root; the rules
 * name nothing else.
 *
 * The names are the documents viewer's (--doc-*), so one block of values themes
 * both, plus --ask-* only where the viewer has nothing to say: the panel's own
 * ground, its input wells, a fourth text tone, the colour of text on the
 * accent, the Sent box, its base size, and one hue per project
 * (--ask-hue-<key>, falling back to --ask-hue).
 *
 * The defaults sit at :where(:root), which has no specificity: any :root rule
 * a site writes wins, in whatever order the stylesheets load. The --doc-*
 * defaults repeat the viewer's exactly — test/client.test.mjs holds them to it.
 * Sizes are em of --ask-size, so one variable scales the panel's type.
 */
:where(:root) {
  --doc-color-scheme: light;
  --doc-fg: #1f2328;
  --doc-muted: #5e6570;
  --doc-faint: #8b9199;
  --doc-rule: #e2dfd9;
  --doc-rule-soft: #ebe8e3;
  --doc-rule-strong: #cdc8c0;
  --doc-code-bg: #f2f0ec;
  --doc-accent: #2f6690;
  --doc-accent-hover: #1f4e70;
  --doc-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --doc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ask-bg: #ffffff;
  --ask-field-bg: #f7f5f2;
  --ask-dim: #767c84;
  --ask-on-accent: #ffffff;
  --ask-ok-bg: #eef7f1;
  --ask-ok-rule: #b9dcc6;
  --ask-ok-fg: #1f7a4a;
  --ask-hue: var(--doc-accent);
  --ask-size: 14px;
}
@media (prefers-color-scheme: dark) {
  :where(:root) {
    --doc-color-scheme: dark;
    --doc-fg: #e3e1dc;
    --doc-muted: #a0a6ae;
    --doc-faint: #6e747c;
    --doc-rule: #2c3036;
    --doc-rule-soft: #23262b;
    --doc-rule-strong: #3b4047;
    --doc-code-bg: #1c1f23;
    --doc-accent: #86b3d9;
    --doc-accent-hover: #a9c9e6;

    --ask-bg: #1a1c20;
    --ask-field-bg: #15171a;
    --ask-dim: #868c94;
    --ask-on-accent: #15171a;
    --ask-ok-bg: #12201a;
    --ask-ok-rule: #2a4a3a;
    --ask-ok-fg: #5fd39e;
  }
}

.ask-panel { background: var(--ask-bg); border: 1px solid var(--doc-rule); padding: 34px 38px;
  color: var(--doc-fg); font-family: var(--doc-font-sans); font-size: var(--ask-size); box-sizing: border-box; }
.ask-panel *, .ask-panel *::before, .ask-panel *::after { box-sizing: border-box; }
.ask-panel .grid { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 52px; align-items: start; }
.ask-panel.single .grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ask-panel.single .corpus { display: none; }
.ask-panel .hd { font-size: 1.64em; font-weight: 600; margin: 0 0 12px; }
.ask-panel .lede { font-size: 1em; color: var(--doc-muted); line-height: 1.62; margin: 0 0 18px; }
.ask-panel .klabel { font-family: var(--doc-font-mono); font-size: .72em; letter-spacing: .12em; color: var(--doc-faint); margin: 0 0 9px; }

/* The project list does two jobs at once, so it uses two independent channels:
   the SWATCH says what the system did (solid = cited, hollow = read and had
   nothing, bar = never read) and the SWITCH says what the reader did, in
   neutral tones, never a hue. */
.ask-panel .corpushead { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 26px; gap: 12px;
  align-items: baseline; margin: 0 0 9px;
  font-family: var(--doc-font-mono); font-size: .72em; letter-spacing: .12em; color: var(--doc-faint); }
.ask-panel .corpushead .nm { color: var(--ask-dim); font-weight: 400; }
.ask-panel .corpushead .len { text-align: right; white-space: nowrap; }
.ask-panel .srcrow { display: grid; grid-template-columns: 10px minmax(0,1fr) auto 26px; gap: 12px;
  align-items: center; padding: 8px 0; border-top: 1px solid var(--doc-rule-soft); min-height: 44px; }
.ask-panel .sw { width: 10px; height: 10px; display: block; }
.ask-panel .sw.never { display: flex; align-items: center; }
.ask-panel .swbar { width: 10px; height: 2px; display: block; }
.ask-panel .srcrow .n { font-size: .93em; color: var(--doc-muted); line-height: 1.25; }
.ask-panel .srcrow.on .n { color: var(--doc-fg); font-weight: 500; }
.ask-panel .srcrow.off .n, .ask-panel .srcrow.gone .n { color: var(--ask-dim); }
.ask-panel .srcrow .len { font-family: var(--doc-font-mono); font-size: .68em; letter-spacing: .02em;
  color: var(--doc-faint); font-variant-numeric: tabular-nums; text-align: right; margin-right: 4px; }
.ask-panel .tot { border-top: 1px solid var(--doc-rule-soft); padding-top: 9px; display: block; min-height: 0;
  font-family: var(--doc-font-mono); font-size: .68em; letter-spacing: .1em; color: var(--doc-faint); }
.ask-panel .srcrow .unread { grid-column: 2 / -1; font-family: var(--doc-font-mono); font-size: .68em;
  letter-spacing: .06em; color: var(--ask-dim); margin-top: 2px; }
.ask-panel .srcrow .unread button { background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit; color: var(--ask-dim);
  border-bottom: 1px solid var(--doc-rule-strong); }
.ask-panel .srcrow .unread button:hover { color: var(--doc-accent); border-bottom-color: var(--doc-accent); }

.ask-panel .tgl { width: 26px; height: 16px; border: 1px solid var(--doc-rule); background: var(--ask-field-bg);
  display: flex; align-items: center; padding: 1px; justify-self: end; cursor: pointer; }
.ask-panel .tgl i { width: 10px; height: 10px; display: block; background: var(--doc-faint); transition: margin-left .12s ease; }
.ask-panel .tgl.up { border-color: var(--ask-dim); }
.ask-panel .tgl.up i { background: var(--doc-fg); margin-left: 12px; }

/* ASK sits level with the LAST line of the question, where the caret is. */
.ask-panel .askform { display: flex; gap: 10px; align-items: flex-end; }
.ask-panel .field { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: 11px;
  background: var(--ask-field-bg); border: 1px solid var(--doc-rule); min-height: 46px; max-height: 143px;
  padding: 13px 14px; font-size: .93em; line-height: 1.5; }
.ask-panel .field:focus-within { border-color: var(--ask-dim); }
.ask-panel .field svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--doc-faint); margin-top: 2px; }
.ask-panel .field textarea { flex: 1 1 auto; min-width: 0; min-height: 0; height: 20px;
  background: none; border: 0; padding: 0; color: var(--doc-fg);
  font-family: var(--doc-font-sans); font-size: 1em; line-height: 1.5;
  resize: none; overflow-y: auto; max-height: 115px; }
.ask-panel .field textarea:focus { outline: none; }
.ask-panel .field textarea::placeholder { color: var(--doc-faint); }
.ask-panel .askbtn { display: flex; align-items: center; gap: 8px; min-height: 46px;
  border: 1px solid var(--doc-rule-strong); background: none; padding: 0 20px; color: var(--doc-fg);
  font-family: var(--doc-font-mono); font-size: .79em; letter-spacing: .1em; cursor: pointer; white-space: nowrap; }
.ask-panel .askbtn:hover { border-color: var(--ask-dim); }
.ask-panel .askbtn[disabled] { color: var(--doc-faint); border-color: var(--doc-rule); cursor: default; }

/* Before the manifest lands, and when it never does. The panel says which of
   the two it is under the field, where the reader is looking, because the rail
   is a sidebar a single-project site does not show at all. */
.ask-panel .astate:not([hidden]) { margin-top: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ask-panel .astate p { margin: 0; font-family: var(--doc-font-mono); font-size: .79em;
  letter-spacing: .04em; color: var(--ask-dim); }
.ask-panel .retry { min-height: 44px; background: none; border: 1px solid var(--doc-rule-strong);
  padding: 0 16px; color: var(--doc-fg); font-family: var(--doc-font-mono); font-size: .79em;
  letter-spacing: .1em; cursor: pointer; }
.ask-panel .retry:hover { border-color: var(--ask-dim); }
.ask-panel.loading .field textarea, .ask-panel.unavailable .field textarea { color: var(--doc-muted); }

.ask-panel .sugg { margin-top: 22px; }
.ask-panel .chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ask-panel .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  background: var(--ask-field-bg); border: 1px solid var(--doc-rule); color: var(--doc-muted);
  font-family: var(--doc-font-sans); font-size: .89em; line-height: 1.3; text-align: left; cursor: pointer; }
.ask-panel .chip:hover { border-color: var(--ask-dim); color: var(--doc-fg); }

/* In flight: the question uses the answer's .qecho, so it does not change
   costume when the reply lands. */
.ask-panel .working { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ask-panel .wtext { font-family: var(--doc-font-mono); font-size: .79em; color: var(--ask-dim); }
.ask-panel .elapsed { margin-left: auto; font-family: var(--doc-font-mono); font-size: .79em; color: var(--ask-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask-panel .sw.live { animation: ask-swpulse 1.4s ease-in-out infinite; }
@keyframes ask-swpulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.ask-panel .dots i { font-style: normal; opacity: .25; animation: ask-dot 1.4s ease-in-out infinite; }
.ask-panel .dots i:nth-child(2) { animation-delay: .2s; }
.ask-panel .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ask-dot { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .ask-panel .sw.live, .ask-panel .dots i { animation: none; opacity: 1; }
}

.ask-panel .ans { position: relative; margin-top: 26px; border-top: 1px solid var(--doc-rule); padding-top: 22px; }
.ask-panel .ansx { position: absolute; top: 10px; right: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: flex-end;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--doc-faint); }
.ask-panel .ansx:hover { color: var(--doc-fg); }
.ask-panel .ansx:focus-visible { outline: 1px solid var(--doc-accent); outline-offset: 2px; }
.ask-panel .ans > .qecho { padding-right: 34px; }
.ask-panel .qecho { display: flex; gap: 11px; align-items: baseline; margin: 0 0 16px; }
.ask-panel .qecho .q { font-family: var(--doc-font-mono); font-size: .72em; letter-spacing: .12em; color: var(--doc-faint); flex: 0 0 auto; }
.ask-panel .qecho .t { font-size: 1.04em; font-weight: 600; color: var(--doc-fg); line-height: 1.4; text-wrap: pretty; }

/* One section per document, because one call read one document. */
.ask-panel .psec + .psec { margin-top: 26px; border-top: 1px solid var(--doc-rule-soft); padding-top: 24px; }
.ask-panel .phead { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
.ask-panel .phead .pname { font-size: .96em; font-weight: 600; color: var(--doc-fg); letter-spacing: -.01em; }
.ask-panel .phead .ppage { font-family: var(--doc-font-mono); font-size: .72em; letter-spacing: .02em;
  color: var(--doc-faint); min-width: 0; overflow-wrap: anywhere; }
.ask-panel .prose { max-width: 68ch; }
.ask-panel .prose p { font-size: .96em; color: var(--doc-muted); line-height: 1.62; margin: 0 0 13px; text-wrap: pretty; }
.ask-panel .prose p:last-child { margin: 0; }
.ask-panel .prose code { font-family: var(--doc-font-mono); font-size: .89em; color: var(--doc-fg);
  background: var(--ask-field-bg); border: 1px solid var(--doc-rule-soft); padding: 1px 5px; }
.ask-panel .prose strong { color: var(--doc-fg); font-weight: 600; }
.ask-panel .prose pre { margin: 0 0 13px; padding: 11px 13px; background: var(--ask-field-bg);
  border: 1px solid var(--doc-rule-soft); overflow-x: auto; }
.ask-panel .prose pre code { border: 0; background: none; padding: 0; color: var(--doc-muted); white-space: pre; }
.ask-panel .gap { border-left: 2px solid var(--doc-rule-strong); padding-left: 14px; margin-top: 16px; }
.ask-panel .gap p { color: var(--ask-dim); font-size: .89em; margin: 0; }

/* The line the answer rests on, found in the document by search before it was
   allowed here. Its rule takes the project's hue: this is the one element
   whose whole claim is where it came from. */
.ask-panel .cite { margin: 16px 0 0; padding: 11px 14px; background: var(--ask-field-bg);
  border-left: 2px solid var(--doc-rule-strong); }
.ask-panel .cite blockquote { margin: 0; color: var(--doc-muted); font-size: .89em; line-height: 1.55; overflow-wrap: anywhere; }
.ask-panel .cite blockquote::before { content: '\201c'; }
.ask-panel .cite blockquote::after { content: '\201d'; }
.ask-panel .cite figcaption { margin-top: 7px; font-family: var(--doc-font-mono); font-size: .68em;
  letter-spacing: .1em; color: var(--doc-faint); }
.ask-panel .cite .open { color: var(--doc-accent); text-decoration: none; border-bottom: 1px solid var(--doc-rule-strong); }
.ask-panel .cite .open:hover { color: var(--doc-accent-hover); border-bottom-color: var(--doc-accent-hover); }
/* The pictures the cited section refers to: a strip of thumbnails, each the
   picture itself, opening it in the documents site. */
.ask-panel .cite .ill { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ask-panel .cite .illpic { display: block; width: 112px; max-width: 100%; border: 1px solid var(--doc-rule); border-radius: 4px;
  overflow: hidden; background: var(--doc-code-bg); }
.ask-panel .cite .illpic:hover { border-color: var(--doc-accent); }
.ask-panel .cite .illpic img { display: block; width: 100%; height: 70px; object-fit: cover; object-position: top left; }
.ask-panel .cite .illname { font-family: var(--doc-font-mono); font-size: .72em; color: var(--doc-faint); }

/* Not covered: what gets sent, and Get help. */
.ask-panel .route { margin-top: 22px; border-top: 1px solid var(--doc-rule-soft); padding-top: 18px; }
.ask-panel .ticket { margin: 0 0 22px; display: flex; flex-direction: column; gap: 5px; max-width: 64ch; }
.ask-panel .ticket div { font-family: var(--doc-font-mono); font-size: .75em; line-height: 1.55; color: var(--doc-muted); }
.ask-panel .ticket .tier { color: var(--doc-faint); letter-spacing: .1em; }
.ask-panel .sendrow { display: flex; gap: 10px; flex-wrap: wrap; }
.ask-panel .who { display: grid; grid-template-columns: 160px minmax(0,1fr); flex: 1 1 320px; min-width: 0;
  background: var(--ask-field-bg); border: 1px solid var(--doc-rule); }
.ask-panel .who input { min-height: 46px; padding: 13px 14px; min-width: 0; background: none; border: 0;
  font-family: var(--doc-font-sans); font-size: .93em; color: var(--doc-fg); }
.ask-panel .who input:focus { outline: none; }
.ask-panel .who input::placeholder { color: var(--doc-faint); }
.ask-panel .who input + input { border-left: 1px solid var(--doc-rule); }
.ask-panel .sendbtn { min-height: 46px; background: var(--doc-accent); color: var(--ask-on-accent); border: 0; padding: 0 30px;
  font-family: var(--doc-font-sans); font-weight: 600; font-size: .96em; cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap; }
.ask-panel .sendbtn:hover { background: var(--doc-accent-hover); }
.ask-panel .sendbtn[disabled] { background: var(--doc-rule-strong); color: var(--ask-dim); cursor: default; }
.ask-panel .sendnote { margin: 10px 0 0; font-size: .89em; color: var(--ask-dim); }
.ask-panel .sendnote:empty { display: none; }
.ask-panel .sent { background: var(--ask-ok-bg); border: 1px solid var(--ask-ok-rule); padding: 16px 18px; margin-top: 22px; max-width: 64ch; }
.ask-panel .sent .lab { font-family: var(--doc-font-mono); font-size: .72em; letter-spacing: .12em; color: var(--ask-ok-fg); margin-bottom: 11px; }
.ask-panel .sent p { font-size: .96em; color: var(--doc-muted); line-height: 1.62; margin: 0; text-wrap: pretty; }

/* The reader's own recent questions: rows with a time, not chips — a thing
   with a timestamp is something that happened. */
.ask-panel .recent { margin-top: 22px; }
.ask-panel .ans + .recent { margin-top: 30px; }
.ask-panel .rq { display: grid; grid-template-columns: 14px minmax(0,1fr) auto auto; gap: 11px;
  align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--doc-rule-soft); }
/* Removes the row from this browser's list. Faint until the row is under the
   pointer or the button has focus; a full 44px target either way. */
.ask-panel .rq .x { font-family: var(--doc-font-sans); font-size: 1.1em; line-height: 1; color: var(--doc-faint);
  background: none; border: 0; padding: 0; width: 28px; min-height: 44px; cursor: pointer; opacity: .55; }
.ask-panel .rq:hover .x, .ask-panel .rq .x:focus-visible { opacity: 1; }
.ask-panel .rq .x:hover { color: var(--doc-fg); }
.ask-panel .rq .q { font-family: var(--doc-font-mono); font-size: .72em; letter-spacing: .12em; color: var(--doc-faint); }
.ask-panel .rq .t { font-size: .93em; color: var(--doc-muted); line-height: 1.45; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--doc-font-sans); }
.ask-panel .rq .when { font-family: var(--doc-font-mono); font-size: .68em; letter-spacing: .04em; color: var(--doc-faint); white-space: nowrap; }
.ask-panel .rq:hover .t { color: var(--doc-fg); }
.ask-panel .rq.cur .t { color: var(--doc-fg); font-weight: 500; }

@media (max-width: 900px) {
  .ask-panel { padding: 24px 20px; }
  .ask-panel .grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .ask-panel .who { grid-template-columns: minmax(0, 1fr); }
  .ask-panel .who input + input { border-left: 0; border-top: 1px solid var(--doc-rule); }
}