/* css/info.css - THE LITTLE "i" outside Link (owner 2026-10-03): "We always
   need to show the little i on anything that needs to be explained - what they
   are looking at and how the numbers got there."

   The same round button and the same box as Link and Challenge 250, for any
   page that loads js/crm/info.js. Colours come from the page's own tokens where
   it has them, with a plain fallback where it does not. A page on a dark band
   adds .info-dark to the band. */
.ln-info{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted,#6b7280);background:transparent;color:var(--muted,#6b7280);font:800 11px/1 Georgia,serif;font-style:italic;cursor:pointer;padding:0;margin-left:6px;vertical-align:1px;text-transform:none;letter-spacing:0;flex:none}
.ln-info:hover,.ln-info[aria-expanded="true"]{border-color:var(--navy,#1f2f4a);background:var(--navy,#1f2f4a);color:#fff}
.ln-how{margin:10px 0;border-top:1px solid var(--line,#e5e7eb);padding-top:10px;font-size:12.5px;line-height:1.55;color:var(--text,var(--ink,#1f2937));text-align:left;white-space:normal;font-weight:400;text-transform:none;letter-spacing:0}
.ln-how[hidden]{display:none!important}
.ln-how-h{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted,#6b7280);margin-bottom:4px}
.ln-how ol,.ln-how ul{margin:0 0 8px;padding-left:18px}
.ln-how li{margin:3px 0}
.ln-how p{margin:4px 0 0;color:var(--muted,#6b7280);font-size:12px}
.ln-hide{display:block;margin:8px 0 0 auto;border:1px solid var(--line,#e5e7eb);background:var(--surface,#fff);border-radius:8px;padding:4px 12px;font:700 11.5px 'DM Sans',sans-serif;color:var(--muted,#6b7280);cursor:pointer}
.ln-hide:hover{color:var(--text,#1f2937);border-color:var(--gold,#b08d57)}
.info-dark .ln-info{border-color:#9fb0c8;color:#ccd4e2}
.info-dark .ln-info:hover,.info-dark .ln-info[aria-expanded="true"]{border-color:#fff;background:#fff;color:var(--navy,#1f2f4a)}
.info-dark .ln-how{color:#e6ebf3;border-color:rgba(255,255,255,.18)}
.info-dark .ln-how p,.info-dark .ln-how-h{color:#b9c4d6}
.ln-how{position:relative;padding-right:30px}
.ln-x{position:absolute;top:6px;right:0;width:26px;height:26px;border:1px solid var(--line,#e5e7eb);background:var(--surface,#fff);border-radius:50%;font:700 16px/1 'DM Sans',sans-serif;color:var(--muted,#6b7280);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ln-x:hover{color:var(--text,#1f2937);border-color:#c9ced8}
@media print{.ln-info,.ln-hide,.ln-x{display:none!important}}