/* /cybersecurity/css/my-ip.css — "What is my IP?" page. Builds on the suite's own pieces:
   .cy-tiles (directory.css), .cy-checklist (tools.css), .cy-info (report.css).
   Theme-aware, no inline styles (CSP). */

.cy-iptiles { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 18px 0 14px; }
.cy-iptiles .cy-tile { padding: 18px 14px; }
.cy-iptiles .cy-tile__v { font-size: 1.45rem; overflow-wrap: anywhere; }

/* Values js/my-ip.js has not filled (yet), or that the browser does not offer. */
.cy-tile__v.is-muted { color: var(--text-mute); font-size: 1.1rem; font-weight: 600; }
.cy-checklist .v.is-muted { color: var(--text-mute); font-weight: 400; font-style: italic; }

/* Long values (user agents, GPU strings, header lists): label above, value below. */
.cy-checklist li.wide { flex-direction: column; gap: 4px; }
.cy-checklist li.wide .v { text-align: left; font-weight: 400; overflow-wrap: anywhere;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.cy-checklist li.wide .v.is-muted { font-family: inherit; font-size: 14px; }
.cy-ipline { display: block; }

/* Browser cards in balanced columns, not a grid: their heights differ a lot. */
.cy-ipcards { columns: 2 340px; column-gap: 14px; margin-top: 8px; }
.cy-ipcards .cy-info { break-inside: avoid; margin: 0 0 14px; }
.cy-ipcards .cy-checklist { margin-top: 0; }
.cy-ipcards .cy-checklist li { background: var(--panel); }