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

/* The loudness checker (/loudness-checker.html): its row of figures, the verdict table's
   groups, the fixes under it and the quoted targets. Everything else is funnels.css. */
.loud-progress { width:min(100%,380px); }
.loud-progress progress { display:block; width:100%; height:4px; accent-color:var(--accent); }
.loud-result p { margin:4px 0 0; }

/* The numbers: two to a row on a phone, more as the panel widens. */
.loud-figures { display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:14px 18px; margin:18px 0 6px; }
.loud-figures div { min-width:0; padding-top:10px; border-top:1px solid #ffffff14; }
.loud-figures dt { color:var(--snow-3); font-size:13px; line-height:1.4; }
.loud-figures dd { margin:3px 0 0; color:var(--snow); font-size:20px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }

/* Each check names its target underneath, so the table needs only three columns. */
.loud-target { display:block; margin-top:2px; color:var(--snow-3); font-size:13px; font-weight:400; }
.tool-table .loud-group th { padding-top:20px; color:var(--snow); font-size:15px; font-weight:650; }
/* Each group's name is a link standing alone, so it gets the 44 px touch height. */
.loud-table .loud-group a { display:inline-flex; align-items:center; min-height:44px; }
/* Short words: break them only at spaces, so "Not measured" never splits mid-word. */
.loud-table td { overflow-wrap:normal; }

/* Links inside sentences are underlined; on the dark panel they take the gold link colour. */
.loud-result a:not(.pill):not(.more-link) { color:var(--accent-glow); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.questions-list p a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.loud-fixes { margin:6px 0 0; padding-left:20px; color:var(--snow-2); font-size:14px; line-height:1.5; }
.loud-fixes li + li { margin-top:8px; }
.loud-fixes strong { color:var(--snow); font-weight:600; }
.loud-result #loud-limiter,.loud-result #loud-bridge { margin-top:12px; }
/* The bridge: the music sentence, then the speech button or the long-file note. */
.loud-bridge .more-link { margin-top:4px; }
.loud-bridge #loud-speech,.loud-result #loud-long { margin-top:10px; }

/* The quoted targets on the light band. */
.workflow-steps .loud-quote { margin-bottom:10px; }
.loud-youtube { margin-top:24px; }
.loud-related.section { padding:96px 0; }

@media (max-width:480px) {
  .loud-table .tool-verdict { white-space:normal; }
  .loud-related.section { padding:72px 0; }
}