/* COSIGNA · info-toggle.css — the « i » (v0.613.0 P-14; behaviour in info-toggle.js). Generalised from slice M's control (v0.611.0 S-M-b2).
   .info-btn   a real button, a 44 x 44 px target, the glyph (.ci) 20 px; it stays live while an ancestor is pointer-events:none (an inert setup card).
   .info-btn--inline   a button that sits in a line of text or a table cell: the 44 px target is kept, negative margins keep it from making the line taller.
   .info-btn--label    the folds that had a visible summary: the summary text is INSIDE the button, then the glyph (one big target, no second label).
   .info-panel the short text it opens; the hidden attribute decides, never a display rule of its own. */
.info-btn {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  background: none; border: 0; border-radius: 50%; color: var(--text-muted); cursor: pointer; font: inherit;
  pointer-events: auto;
}
.info-btn .ci { width: 20px; height: 20px; flex: 0 0 auto; }
.info-btn[hidden] { display: none; }   /* the button's own display would beat the UA's [hidden] rule */
.info-btn:hover, .info-btn[aria-expanded="true"] { color: var(--text); }
.info-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 0; }
.info-btn--inline { margin: -14px -10px; }
.info-btn--inline .ci { width: 16px; height: 16px; }
.info-btn--label {
  width: auto; min-height: 44px; padding: 0 var(--s2, 8px); gap: var(--s2, 8px); border-radius: 8px; text-align: left;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--text-muted);
}
.info-btn--label .ci { width: 16px; height: 16px; }
.info-panel {
  margin: 0 0 var(--s3, 12px); padding: var(--s3, 12px); border-radius: var(--ag-radius-md, 12px); background: var(--surface-2, rgba(128, 128, 128, .1));
  font-size: 13px; line-height: 1.5; color: var(--text); text-align: left;
}
.info-panel[hidden] { display: none; }
.info-panel p { margin: 0 0 var(--s2, 8px); overflow-wrap: anywhere; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel .info-panel__note { font-size: 12px; color: var(--text-muted); }
/* The red-tinted « How to fix this » box under a blocked PDF (the initiator's setup screen and the signer's Act 0): the fold became a label-form « i ». */
.info-howto { margin-top: var(--s2, 8px); padding: var(--s3, 12px); border-radius: var(--ag-radius-md, 12px); background: rgba(200, 40, 40, .06); border: 1px solid rgba(200, 40, 40, .30); font-size: 13px; line-height: 1.6; color: var(--text); }
.info-howto .info-btn--label { color: var(--text); padding-left: 0; min-height: 32px; }
.info-howto .info-panel { margin: var(--s2, 8px) 0 0; padding: 0; background: none; }
.info-howto ol { margin: 0 0 0 var(--s4, 16px); padding: 0; display: flex; flex-direction: column; gap: var(--s1, 4px); }