/* Ask about my work. Site tokens only: paper, ink, graphite, muted, rule, red, ok, fonts. */
.ask__box {
  --k: var(--red-deep, var(--red));
  position: relative; max-width: 46rem; padding: clamp(16px, 3vw, 28px);
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px;
  font: 1.0625rem/1.55 var(--f-body);
}
.ask__box::before, .ask__box::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--ink); pointer-events: none; }
.ask__box::before { top: -9px; left: -9px; border-width: 1px 0 0 1px; }
.ask__box::after { right: -9px; bottom: -9px; border-width: 0 1px 1px 0; }
.ask__box :focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }
.ask__box p { margin: 0; }

.ask__l, .ask__k {
  display: block; margin-bottom: 6px; font: 600 .75rem/1.3 var(--f-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.ask__l { font-size: .8125rem; }

.ask__row { display: flex; gap: 8px; }
.ask__in, .ask__f {
  min-width: 0; min-height: 52px; padding: 0 14px; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 2px;
}
.ask__in { flex: 1; }
.ask__in::placeholder { color: var(--muted); opacity: 1; }

.ask__b {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  font: 600 .875rem/1.2 var(--f-label); letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 2px; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ask__b:hover { background: var(--ink); color: var(--paper); }
.ask__go { color: var(--paper); background: var(--ink); }
.ask__go:hover { background: var(--graphite); border-color: var(--graphite); }
.ask__row .ask__go { min-height: 52px; padding: 0 22px; }
.ask__b[aria-disabled="true"] { opacity: .55; cursor: progress; }

.ask__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask__c {
  min-height: 44px; padding: 0 14px; font: 600 .8125rem/1.2 var(--f-label); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--rule-strong); border-radius: 2px; cursor: pointer;
}
.ask__c:hover { background: var(--paper-2); border-color: var(--ink); }

/* newest on top, so the form never moves */
.ask__x { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
.ask__q { font-weight: 600; overflow-wrap: anywhere; }
.ask__a { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--red); }
.ask__x[aria-busy] .ask__a { min-height: 6rem; }
.ask__body > p { max-width: 62ch; }
.ask__body > p + p { margin-top: 10px; }
.ask__w { font: 600 .8125rem/1.3 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ask__bar {
  height: 2px; margin-top: 10px; animation: ask-s 1.1s linear infinite;
  background: linear-gradient(90deg, transparent, var(--ink), transparent) -30% 0 / 30% 100% no-repeat, var(--rule);
}
@keyframes ask-s { to { background-position: 130% 0, 0 0; } }

.ask__src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.ask__src .ask__k { margin: 0 2px 0 0; }
.ask__s {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  font: 600 .8125rem/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule-strong); border-radius: 2px;
}
.ask__s b { color: var(--k); }
.ask__s:hover { border-color: var(--ink); }

.ask__d { margin-top: 16px; padding: 14px; background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 2px; }
.ask__d .ask__dk { margin-bottom: 12px; font-size: .8125rem; color: var(--k); }
.ask__d label { margin-bottom: 4px; }
.ask__f { display: block; width: 100%; margin-bottom: 12px; padding: 10px 12px; font-size: 1rem; border-width: 1px; border-color: var(--rule-strong); }
textarea.ask__f { min-height: 11rem; line-height: 1.5; resize: vertical; }
.ask__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ask__body > .ask__acts { margin-top: 12px; }
.ask__ok { font: 600 .8125rem/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }

.ask__n { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-top: 20px; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.ask__n p { flex: 1 1 22rem; }
.ask__m {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink);
  text-decoration: underline var(--k) 2px; text-underline-offset: 4px;
}

/* a cited section's ruler flashes when its chip is clicked (the class is removed after about 2s) */
.ask-hl .sheet::before { animation: ask-f 1.5s ease .5s both; }
.ask-hl:not(:has(.sheet)) { animation: ask-g 1.5s ease .5s both; }
@keyframes ask-f { 0%, 100% { box-shadow: 0 1.5px 0 transparent; } 20%, 65% { box-shadow: 0 1.5px 0 var(--red); border-top-color: var(--red); } }
@keyframes ask-g { 0%, 100% { box-shadow: inset 0 0 0 transparent; } 20%, 65% { box-shadow: inset 0 3px 0 var(--red); } }

@media (max-width: 480px) { .ask__c { flex: 1 1 100%; justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) {
  .ask__bar { animation: none; background: var(--rule); }
  .ask__b { transition: none; }
  .ask-hl .sheet::before { animation: none; box-shadow: 0 1.5px 0 var(--red); border-top-color: var(--red); }
  .ask-hl:not(:has(.sheet)) { animation: none; box-shadow: inset 0 3px 0 var(--red); }
}
@media print { .ask__box { display: none; } }