/* Ask my documents (ix-ask.js), design language v2: a ruled list of questions, a serif italic answer revealed line by line,
   plain small-caps citations and a paper column whose cited lines carry a blue wash. Shared look comes from ix-skin.css.
   Finished state is the default; animation is opt-in under no-preference. */

[data-ask] {
  --ask-doc-max: 26rem;
  --ask-wash: color-mix(in srgb, var(--accent-solid) 20%, transparent);
  --ask-number-col: 2.75rem;
  display: block;
}

.ix-ask__label {
  display: block;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--ix-hair);
}

.ix-ask__grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 900px) {
  .ix-ask__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.ix-ask__qa {
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}

.ix-ask__title { margin-bottom: var(--s-3); }

/* Question rows share hairlines; the number is a counter so the button text stays the question alone. */
.ix-ask__list { counter-reset: ask-q; margin: 0; }

.ix-ask__list > li { position: relative; counter-increment: ask-q; }

.ix-ask__list > li::before {
  content: counter(ask-q, decimal-leading-zero);
  position: absolute;
  top: 50%;
  left: var(--s-3);
  z-index: 1;
  transform: translateY(-50%);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  color: var(--text-3);
  pointer-events: none;
}

.ix-ask__list .ix-ask__q {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--ask-number-col);
  border: 0;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}

.ix-ask__list .ix-ask__q[aria-pressed="true"] { color: var(--text-1); }

.ix-ask__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ix-ask__form[hidden] { display: none; }

.ix-ask__form label {
  flex-basis: 100%;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.ix-ask__form input {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 1px solid var(--ix-hair);
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-small);
  transition: border-color var(--ix-t-fast) var(--ix-ease);
}

.ix-ask__form input:hover { border-color: var(--ix-rule); }
.ix-ask__form input:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 3px; border-color: var(--ix-blue); }

.ix-ask__form button {
  min-height: 44px;
  padding: 0 var(--s-5);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
}

.ix-ask__note {
  min-height: 1.4em;
  font-size: var(--fs-small);
  color: var(--text-2);
}

.ix-ask__thread {
  display: grid;
  gap: var(--s-4);
  padding: var(--ix-pad);
}

.ix-ask__asked { font-size: var(--fs-small); color: var(--text-1); }
.ix-ask__asked-lbl { margin-right: var(--s-3); }

.ix-ask__answer {
  display: grid;
  gap: var(--s-4);
  min-height: 7.5rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ix-hair);
}

.ix-ask__answer p {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  line-height: 1.2;
  color: var(--text-1);
}

/* The answer appears one sentence at a time, by opacity only. Without the class every sentence is simply visible. */
.ix-ask__answer p.is-revealing .ix-ask__line {
  opacity: 0;
  transition: opacity var(--ix-t-swap) var(--ix-ease);
}

.ix-ask__answer p.is-revealing .ix-ask__line.is-in { opacity: 1; }

.ix-ask__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
}

.ix-ask__chips[hidden] { display: none; }

/* A citation: small caps, bracketed, underlined, still a real button. */
.ix-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: underline solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color var(--ix-t-fast) var(--ix-ease);
}

button.ix-chip::before { content: "[" / ""; margin-right: 0.25em; }
button.ix-chip::after { content: "]" / ""; margin-left: 0.25em; }

.ix-chip:hover { color: var(--ix-blue); }
.ix-chip:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 3px; }

.ix-chip--none {
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px dashed var(--ix-rule);
  color: var(--text-2);
  text-decoration: none;
  cursor: default;
}

/* The mock document: a paper column with a hairline left rule. In dark theme cream paper would glow, so the page
   itself becomes the paper: a faint ink wash with page-coloured text. */
[data-theme="dark"] .ix-doc {
  --paper: color-mix(in srgb, var(--text-1) 5%, transparent);
  --paper-ink: var(--text-1);
  --paper-muted: var(--text-3);
  --paper-line: var(--ix-hair);
}

.ix-doc {
  position: relative;
  max-height: var(--ask-doc-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ix-pad) var(--ix-pad) var(--ix-pad) var(--s-6);
  border: 0;
  border-left: 1px solid var(--paper-line);
  border-radius: 0;
  background: var(--paper);
  color: var(--paper-ink);
}

.ix-doc:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 3px; }

.ix-doc__title {
  margin-bottom: var(--s-4);
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper-ink);
}

.ix-doc__title em { color: var(--paper-muted); }

.ix-doc__sec { padding: var(--s-4) 0; border-top: 1px solid var(--paper-line); }

.ix-doc__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  margin-bottom: var(--s-2);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

.ix-doc__flag {
  color: var(--paper-ink);
  text-decoration: underline solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.ix-doc__flag[hidden] { display: none; }

.ix-doc__sec p { margin: 0; font-size: var(--fs-small); color: var(--paper-ink); }

/* Cited line: a blue wash fading from the left. The underline is the cue that does not rely on colour. */
.ix-doc__hl {
  position: relative;
  display: block;
  isolation: isolate;
  margin-inline: calc(var(--s-3) * -1);
  padding: var(--s-1) var(--s-3);
}

mark.ix-doc__hl {
  background: none;
  color: var(--paper-ink);
  text-decoration: underline solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

mark.ix-doc__hl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, var(--ask-wash) 0%, transparent 90%);
}

@media (prefers-reduced-motion: no-preference) {
  mark.ix-doc__hl.is-fresh::before { animation: ix-ask-wash var(--ix-t-swap) var(--ix-ease) both; }
}

@keyframes ix-ask-wash {
  from { opacity: 0; }
  to { opacity: 1; }
}