@import url('./funnels.css');

/* Audio file info (/audio-file-info.html). funnels.css draws the drop zone, the panel and
   its rows; this lays out the report's groups as rows of figures, two to a row on a phone,
   and the notice of what the page runs, under the related tools. */
.info-result { width:min(100%,760px); }
.info-result h2:focus { outline:none; }
.info-result h2:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.info-result .info-file { margin:6px 0 0; color:var(--snow); font-size:15px; overflow-wrap:anywhere; }
.info-group { margin-top:20px; }
.info-group h3 { margin:0; color:var(--snow); font-size:16px; font-weight:650; letter-spacing:-.01em; }
.info-figures { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px 18px; margin:10px 0 0; }
.info-figures div { min-width:0; padding-top:10px; border-top:1px solid #ffffff14; }
.info-figures dt { color:var(--snow-3); font-size:13px; line-height:1.4; }
/* Codec strings and long titles break anywhere rather than push the panel sideways. */
.info-figures dd { margin:3px 0 0; color:var(--snow); font-size:16px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.info-result .tool-row p { margin:0; }
.info-copied:empty { display:none; }
.info-result .tool-result p { margin:6px 0 0; }
.info-result .tool-result a:not(.pill) { color:var(--snow); text-decoration:underline; text-underline-offset:3px; }
.tool-drop[aria-disabled="true"] { opacity:.6; }

/* What this page runs: plain words with inline links. */
.info-notice { max-width:46em; margin-top:72px; padding-top:28px; border-top:1px solid var(--hair); }
.info-notice h3 { margin:0 0 10px; font-size:19px; font-weight:650; letter-spacing:-.01em; }
.info-notice p { margin:0; color:var(--coal-2); font-size:16px; line-height:1.55; text-wrap:pretty; }
.info-notice a { color:var(--coal); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.info-notice a:hover { text-decoration-thickness:2px; }

@media (max-width:480px) {
  .info-figures { grid-template-columns:1fr 1fr; }
}
@media (max-width:700px) {
  .info-notice { margin-top:56px; }
}