/* planflow-hints.css — round 21 track B — hints: the "i" hint button, the tooltip, plain-language error cards, the report mode badge.
   Owned by that track alone; loaded after planflow-inspector.css. */

/* ---- the "i" hint button (planflow-inspector.js hintBtn): after a field
   label, inside a section title, after a toggle's title. Quiet but always
   there — a new user has to find it without hovering first — and at full
   strength on hover / focus. Modelled on the nav's .wf-hint (sidebar-nav.css):
   a 13px glyph, the muted colour, a round hover backing. ---- */
.pfi-root .wf-hintb{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
  width:16px;height:16px;margin:0 0 0 5px;padding:0;border:0;border-radius:50%;background:transparent;
  color:var(--muted,#6E8077);opacity:.5;cursor:help;flex:none;line-height:0;letter-spacing:0;text-transform:none;
  transition:opacity .14s,color .12s,background .12s}
.pfi-root .wf-hintb svg{width:13px;height:13px;display:block}
.pfi-root .wf-hintb:hover,.pfi-root .wf-hintb:focus-visible{opacity:1;color:var(--label-hover,#27543C);background:var(--row-hover,rgba(60,74,67,.06));outline:none}
.pfi-root .wf-hintb:focus-visible{box-shadow:0 0 0 2px var(--focus-ring,rgba(60,120,92,.45))}
.pfi-root .wf-sec__h .wf-hintb{margin-top:-2px}
.pfi-root .wf-toggle__tx .wf-hintb{margin-left:4px}
.pfi-root .wf-pw__ctll .wf-hintb{width:14px;height:14px;margin-left:3px}
.pfi-root .wf-pw__ctll .wf-hintb svg{width:11px;height:11px}
.pfi-root .wf-insp.is-run-locked .wf-hintb{opacity:.5}   /* hints stay readable on a locked block */

/* ---- the tooltip: the nav's design (sidebar-nav.css .wf-tip: fixed, 12px,
   radius 7, dark green on white), ONE element for every [data-hint] outside
   the nav, placed by the engine in planflow-inspector.js. ---- */
.wf-tip.wf-tip--hint{background:rgba(24,40,32,.94);color:#FFFFFF;max-width:260px;font-size:12px;line-height:1.4;
  border-radius:7px;padding:7px 10px;font-family:inherit;font-weight:400;letter-spacing:0;text-transform:none;
  white-space:normal;overflow-wrap:break-word;
  /* review fix 2: topbar.css caps every .wf-tip at z-index 899 (!important) for the
     legacy modals; the hint tooltip must sit above the PlanFlow windows it serves
     (review modal 9500, toast 9600, chat window 8800, planning widget 8700) */
  z-index:9700!important}

/* ---- plain-language errors (the history record, the step-failure card):
   the sentence, the "what to do" line, the provider's own text one fold away ---- */
.pfi-root .wf-hrun__err .wf-err{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.pfi-root .wf-err__t{font-weight:600}
.pfi-root .wf-err__do{color:rgba(155,59,40,.9)}
.pfi-root .wf-err__raw{margin-top:3px;font-size:11px;color:rgba(155,59,40,.85)}
.pfi-root .wf-err__raw summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;opacity:.85;user-select:none}
.pfi-root .wf-err__raw summary::-webkit-details-marker{display:none}
.pfi-root .wf-err__raw summary::before{content:"";width:0;height:0;border:4px solid transparent;border-left-color:currentColor;margin-right:1px;transition:transform .12s}
.pfi-root .wf-err__raw[open] summary::before{transform:rotate(90deg)}
.pfi-root .wf-err__rawtx{margin:5px 0 0;font:11px/1.45 "JetBrains Mono",ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;
  color:rgba(31,45,38,.8);background:rgba(255,255,255,.45);border-radius:6px;padding:6px 8px;max-height:160px;overflow:auto}

/* ---- the report mode badge (planflow-report-mode.js): 2 s near the pointer ---- */
.wf-report-badge{position:fixed;z-index:10000;pointer-events:none;font-family:inherit;font-size:12px;font-weight:500;line-height:1.3;
  padding:6px 10px;border-radius:7px;background:rgba(24,40,32,.94);color:#FFFFFF;box-shadow:0 6px 22px rgba(0,0,0,.2);
  opacity:0;transform:translateY(4px);transition:opacity .14s,transform .14s;white-space:nowrap}
.wf-report-badge.is-on{opacity:1;transform:none}

/* Owner 2026-10-17 ("constantly showing hint icon in the details panel is a
   little bit messy. Maybe these should be revealed only upon hover?"): the "i"
   is invisible at rest and appears when the pointer or the keyboard focus is on
   its row — the field, the toggle, the section header, the control row. It is
   still in the DOM and hoverable (spec 31 reads it), so nothing else changes. */
.pfi-root .wf-hintb{opacity:0;transition:opacity .14s}
.pfi-root .wf-field:hover .wf-hintb,.pfi-root .wf-field:focus-within .wf-hintb,
.pfi-root .wf-toggle:hover .wf-hintb,.pfi-root .wf-toggle:focus-within .wf-hintb,
.pfi-root .wf-sec__hd:hover .wf-hintb,.pfi-root .wf-sec:hover > .wf-sec__h .wf-hintb,
.pfi-root .wf-pw__ctlf:hover .wf-hintb,.pfi-root .wf-pw__ctlf:focus-within .wf-hintb,
.pfi-root .wf-env__card:hover .wf-hintb,.pfi-root .wf-exec__top:hover .wf-hintb,
.pfi-root .wf-cnx__row:hover .wf-hintb,.pfi-root .wf-upload:hover .wf-hintb,
.pfi-root .wf-hintb:hover,.pfi-root .wf-hintb:focus-visible{opacity:1}