/* DouxProcess Directory: the ask box (dir-ask.js) and the /ask page. Luma Night tokens from dir.css, each with its
   value as a fallback so the box still reads right on a page without dir.css. The box itself (.ask, .askf, .ask-try)
   is styled by dir.css; this file adds the thread: the question, the streamed answer, the cards, the follow-ups and
   the consented request form. No star ratings, no "best": the cards are the published order and nothing else. */

/* ---- the box, when dir.css is absent (:where keeps these weaker than dir.css) ---- */
:where(.ask){display:grid;gap:14px;min-width:0;color:var(--soft,#A9B4BF);font-family:var(--sans,"Manrope","Helvetica Neue",Arial,sans-serif)}
:where(.ask) :where(.askf,.ask-form){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0}
:where(.ask) :where(.askf,.ask-form)>label{grid-column:1/-1}
:where(.ask) :where(input[name=q]){min-width:0;width:100%;background:#000;color:var(--fg,#EEF3F7);border:1px solid var(--edge,#4D6680);
  border-radius:14px;padding:14px 16px;font:500 18px var(--sans,"Manrope",Arial,sans-serif)}
:where(.ask) :where(.ask-try,.ask-examples){display:flex;flex-wrap:wrap;gap:8px}
:where(.ask-try,.ask-examples) a{font:500 13px var(--mono,"JetBrains Mono",ui-monospace,Consolas,monospace);color:var(--soft,#A9B4BF);
  border:1px solid var(--line,#16222E);border-radius:999px;padding:8px 13px;text-decoration:none}
:where(.ask-try,.ask-examples) a:hover{border-color:var(--cyan,#24B6FF);color:var(--cyan,#24B6FF)}

/* ---- the stop button takes the Ask button's place while an answer streams ---- */
.ask-stop{display:none;align-items:center;justify-content:center;gap:9px;cursor:pointer;min-height:52px;padding:0 22px;border-radius:14px;
  font:600 15px var(--sans,"Manrope",Arial,sans-serif);color:var(--fg,#EEF3F7);background:#000;border:1px solid var(--cyan,#24B6FF);
  box-shadow:0 0 24px -8px var(--cyan,#24B6FF)}
.ask-stop i{width:10px;height:10px;border-radius:2px;background:var(--cyan,#24B6FF)}
.ask.is-live .ask-stop{display:inline-flex}
.ask.is-live :where(.askf,.ask-form) button[type=submit]{display:none}

/* ---- the thread ---- */
.ask-thread{display:grid;gap:22px;min-width:0}
.ask-thread:empty{display:none}
.ask-turn{display:grid;gap:12px;min-width:0;padding-top:20px;border-top:1px solid var(--line,#16222E);scroll-margin-top:96px}  /* clear the sticky header */
.ask-turn:first-child{padding-top:6px;border-top:0}
.ask-you{justify-self:end;max-width:min(88%,640px);color:var(--fg,#EEF3F7);font-size:16px;line-height:1.45;overflow-wrap:anywhere;
  background:rgba(36,182,255,.08);border:1px solid rgba(36,182,255,.32);border-radius:16px 16px 4px 16px;padding:10px 15px}
.ask-intent{display:flex;align-items:center;gap:10px;font:500 13px/1.4 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan,#24B6FF)}
.ask-intent::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}
.ask-turn.is-live .ask-intent::before{animation:askpulse 1.1s ease-in-out infinite}
.ask-text{color:var(--soft,#A9B4BF);font-size:17px;line-height:1.62;max-width:72ch;overflow-wrap:break-word}
.ask-text:empty{display:none}
.ask-text p{margin:0}
.ask-turn.is-live .ask-text p::after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:3px;vertical-align:-.16em;
  background:var(--cyan,#24B6FF);box-shadow:0 0 10px var(--cyan,#24B6FF);animation:askblink 1s steps(2,start) infinite}
.ask-stopped{font:500 13px var(--mono,"JetBrains Mono",ui-monospace,monospace);color:var(--muted,#8593A1)}
.ask-err{color:var(--hot,#FF6B6B);border:1px solid rgba(255,107,107,.4);border-radius:12px;padding:11px 14px;font-size:15px}
.ask-err a{color:inherit}
.ask-lookup{font-size:15px;color:var(--soft,#A9B4BF)}
.ask-lookup:empty{display:none}
.ask-lookup a{color:var(--cyan,#24B6FF);font-weight:600}

/* ---- the cards: the published order, numbered ---- */
.ask-cards{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.ask-cards:empty{display:none}
.ask-card{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:6px 16px;align-items:start;padding:16px 18px;min-width:0;
  border:1px solid var(--line,#16222E);border-radius:var(--r-tile,14px);background:rgba(5,7,10,.92);transition:border-color .2s}
/* a host page's own list styles (dir.css ".wf ol li{display:flex}" and its counter) must not reach the cards */
.ask .ask-cards,[data-ask] .ask-cards{max-width:none;gap:10px;counter-reset:none}
.ask .ask-cards>.ask-card,[data-ask] .ask-cards>.ask-card{display:grid;gap:6px 16px;align-items:start;font-size:15px;counter-increment:none}
.ask .ask-cards>.ask-card::before,[data-ask] .ask-cards>.ask-card::before{content:none}
.ask-card:hover,.ask-card.is-open{border-color:var(--edge,#4D6680)}
.ask-card.is-new{animation:askin .38s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.ask-n{font:500 14px var(--mono,"JetBrains Mono",ui-monospace,monospace);color:var(--muted,#8593A1);padding-top:3px}
.ask-body{display:grid;gap:7px;min-width:0}
.ask-body h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.ask-body h3 a{color:var(--fg,#EEF3F7);text-decoration:none}
.ask-body h3 a:hover{color:var(--cyan,#24B6FF)}
.ask-meta{margin:0;color:var(--muted,#8593A1);font-size:14px}
.ask-aff{justify-self:start;margin:0;font:500 12.5px var(--mono,"JetBrains Mono",ui-monospace,monospace);color:var(--amber,#FFB547);
  border:1px dashed rgba(255,181,71,.5);border-radius:999px;padding:4px 11px}
.ask-chips{display:flex;flex-wrap:wrap;gap:6px}
.ask-chip{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1.35 var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.01em;
  color:var(--soft,#A9B4BF);border:1px solid var(--line,#16222E);border-radius:999px;padding:5px 11px;text-decoration:none;overflow-wrap:anywhere}
a.ask-chip:hover{border-color:var(--cyan,#24B6FF);color:var(--fg,#EEF3F7)}
.ask-chip.ask-lic{color:var(--good,#4ADE80);border-color:rgba(74,222,128,.4)}
.ask-chip.ask-lic::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}
.ask-chip.ask-lic.is-stated{color:var(--soft,#A9B4BF);border-color:var(--line,#16222E)}
.ask-chip.ask-lic.is-stated::before{background:var(--muted,#8593A1);box-shadow:none}
.ask-chip.ask-when{color:var(--muted,#8593A1);border-style:dashed}
.ask-chip.ask-claimed{color:var(--cyan,#24B6FF);border-color:rgba(36,182,255,.45)}
.ask-act{display:grid;gap:8px;justify-items:end;align-content:start}
.ask-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:var(--r-btn,40px);
  font:600 14px var(--sans,"Manrope",Arial,sans-serif);white-space:nowrap;text-decoration:none;cursor:pointer}
.ask-call{color:var(--fg,#EEF3F7);background:none;border:1px solid var(--edge,#4D6680)}
.ask-call:hover{border-color:var(--cyan,#24B6FF)}
.ask-req{color:#001421;background:var(--cyan,#24B6FF);border:0;box-shadow:0 0 24px -6px var(--cyan,#24B6FF)}
.ask-req[aria-expanded=true]{background:#000;color:var(--cyan,#24B6FF);box-shadow:inset 0 0 0 1px var(--cyan,#24B6FF)}
.ask-why{margin:0;max-width:30ch;text-align:right;color:var(--muted,#8593A1);font-size:13.5px;line-height:1.45}
.ask-rank{color:var(--muted,#8593A1);font-size:14px}
.ask-rank summary{cursor:pointer;font:500 13px var(--mono,"JetBrains Mono",ui-monospace,monospace);letter-spacing:.04em;width:max-content;max-width:100%}
.ask-rank summary:hover{color:var(--fg,#EEF3F7)}
.ask-rank p{margin:8px 0 0;color:var(--soft,#A9B4BF);max-width:72ch}
.ask-rank a,.ask-more a{color:var(--cyan,#24B6FF)}
.ask-more{margin:0;font-size:15px}
.ask-more:empty{display:none}
.ask-more-wrap{display:grid;gap:8px}
.ask-more-wrap:empty{display:none}
.ask-foot{margin:0;font:500 12.5px var(--mono,"JetBrains Mono",ui-monospace,monospace);color:var(--muted,#8593A1);letter-spacing:.03em}

/* ---- follow-ups ---- */
.ask-follow{display:flex;flex-wrap:wrap;gap:8px}
.ask-follow:empty{display:none}
.ask-fu{display:inline-flex;align-items:center;gap:8px;min-height:40px;cursor:pointer;font:500 14px var(--sans,"Manrope",Arial,sans-serif);
  color:var(--fg,#EEF3F7);background:rgba(36,182,255,.06);border:1px solid rgba(36,182,255,.3);border-radius:999px;padding:7px 15px;text-decoration:none}
.ask-fu::before{content:"\21B3";color:var(--cyan,#24B6FF);font-family:var(--mono,"JetBrains Mono",ui-monospace,monospace)}
.ask-fu:hover{border-color:var(--cyan,#24B6FF)}
.ask-fu:disabled{opacity:.5;cursor:default}

/* ---- the request form: only on a card that routes; consent is never pre-ticked ---- */
.ask-reqf{grid-column:1/-1;display:grid;gap:12px;margin-top:10px;padding-top:16px;border-top:1px dashed var(--line,#16222E);min-width:0}
.ask-reqf[hidden]{display:none}
.ask-reqh{margin:0;color:var(--fg,#EEF3F7);font-size:16px;font-weight:600}
.ask-reqf .ask-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ask-reqf label.ask-f{display:grid;gap:6px;font-size:14px;color:var(--soft,#A9B4BF);min-width:0}
.ask-reqf input:not([type=checkbox]),.ask-reqf textarea{width:100%;min-width:0;background:#000;color:var(--fg,#EEF3F7);border:1px solid var(--edge,#4D6680);
  border-radius:12px;padding:12px 14px;font:16px var(--sans,"Manrope",Arial,sans-serif)}
.ask-reqf textarea{resize:vertical;min-height:92px;line-height:1.5}
.ask-reqf input:focus,.ask-reqf textarea:focus{border-color:var(--cyan,#24B6FF);outline:none}
.ask-reqf input::placeholder,.ask-reqf textarea::placeholder{color:#8593A1}
.ask-consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line,#16222E);
  border-radius:12px;color:var(--fg,#EEF3F7);font-size:15px;line-height:1.5;cursor:pointer}
.ask-consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--cyan,#24B6FF);cursor:pointer}
.ask-consent:has(input:checked){border-color:rgba(36,182,255,.55)}
.ask-reqgo{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ask-send{min-height:46px;padding:0 22px;border:0;border-radius:var(--r-btn,40px);cursor:pointer;font:600 15px var(--sans,"Manrope",Arial,sans-serif);
  color:#001421;background:var(--cyan,#24B6FF);box-shadow:0 0 24px -6px var(--cyan,#24B6FF)}
.ask-send:disabled{opacity:.6;cursor:progress}
.ask-cancel{min-height:46px;padding:0 18px;border-radius:var(--r-btn,40px);cursor:pointer;font:600 14px var(--sans,"Manrope",Arial,sans-serif);
  color:var(--fg,#EEF3F7);background:none;border:1px solid var(--line,#16222E)}
.ask-cancel:hover{border-color:var(--edge,#4D6680)}
.ask-reqmsg{margin:0;font-size:15px;color:var(--soft,#A9B4BF)}
.ask-reqmsg:empty{display:none}
.ask-reqmsg.is-bad{color:var(--hot,#FF6B6B)}
.ask-reqmsg a{color:var(--cyan,#24B6FF)}
.ask-ok{grid-column:1/-1;margin:10px 0 0;padding:12px 14px;border:1px solid rgba(74,222,128,.4);border-radius:12px;color:var(--good,#4ADE80);font-size:15px}
.ask-fine{margin:0;color:var(--muted,#8593A1);font-size:13.5px}
.ask-fine a{color:inherit}

/* ---- screen-reader only ---- */
.ask-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- the /ask page ---- */
.ask-page{display:grid;gap:clamp(18px,2.4vw,28px);max-width:900px}
.ask-page .ask{scroll-margin-top:96px}
.ask-solo{margin:0;background:var(--bg,#000);color:var(--fg,#EEF3F7);font-family:var(--sans,"Manrope",Arial,sans-serif)}
.ask-solo main{max-width:900px;margin:0 auto;padding:32px 16px 64px}

@keyframes askpulse{50%{opacity:.3}}
@keyframes askblink{to{visibility:hidden}}
@keyframes askin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .ask-card{grid-template-columns:26px minmax(0,1fr);padding:14px}
  .ask-body{grid-column:2}  /* placed before the action, or auto-placement pushes it into an implicit third column */
  .ask-act{grid-column:2;justify-items:start;grid-auto-flow:row}
  .ask-why{text-align:left;max-width:none}
  .ask-reqf{grid-column:1/-1}
  .ask-reqf .ask-row{grid-template-columns:1fr}
  .ask-you{max-width:94%}
  .ask-text{font-size:16.5px}
  .ask-stop{min-height:50px}
}
@media (prefers-reduced-motion:reduce){
  .ask-card.is-new,.ask-turn.is-live .ask-intent::before,.ask-turn.is-live .ask-text p::after{animation:none}
  .ask-card{transition:none}
}
@media (forced-colors:active){
  .ask-chip,.ask-card,.ask-fu,.ask-consent{border:1px solid CanvasText}
  .ask-turn.is-live .ask-text p::after{background:CanvasText}
}