/* lab.css: the Label it pages. Plain, wide enough for an exchange beside a result. */
body { background: rgb(230, 230, 230); font-family: system-ui, sans-serif; margin: 0; }
main { background: white; border-radius: 8px; box-sizing: border-box; margin: 4vh auto; max-width: 1100px; padding: 30px; width: 95%; }
h1 { margin: 0; }
.kicker { color: #3366bb; font-weight: 700; margin: 4px 0 16px; }
.lede { font-size: 1.1rem; line-height: 1.5; }
code { background: rgb(232, 232, 232); border-radius: 4px; padding: 1px 6px; }
a, a:visited { color: #3366bb; }
.card { border-top: 1px solid #ddd; display: grid; gap: 12px 24px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: 20px 0; }
.card h2 { font-size: 1.15rem; grid-column: 1 / -1; margin: 0; }
.result iframe { background: #fff; border: 1px solid #ccc; border-radius: 6px; height: 140px; width: 100%; }
.note { color: #555; font-size: 0.95rem; }
nav { border-top: 1px solid #ddd; display: flex; justify-content: space-between; padding-top: 16px; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: top; }
@media (max-width: 760px) { .card { grid-template-columns: 1fr; } }
.lab-form { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: end; margin-block: 16px; }
.lab-form label { display: grid; gap: 4px; font-weight: 600; }
.lab-form select, .lab-form button { font: inherit; padding: 6px 10px; }
.spacer { margin-block-start: 3200px; } /* past Chrome's lazy-loading distance (about 1,250 to 2,500 px) */
.spacer img { display: block; height: auto; margin-block: 16px; max-width: 100%; }
#cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.policy-card { border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; }
.policy-card h2 { font-size: 1.1rem; margin: 0 0 4px; }
.policy-card li.cache { color: #1f7a4d; } .policy-card li.revalidated { color: #9a6700; } .policy-card li.downloaded { color: #3366bb; }
.size-row { border-top: 1px solid #ddd; padding-block: 8px; }
.bar { block-size: 14px; border-radius: 4px; box-sizing: border-box; margin-block: 4px; max-inline-size: 100%; }
.bar.full { background: #9db8dd; inline-size: 100%; } .bar.wire { background: #3366bb; }