/* Shared look for the flex/grid conformance fixtures (flex1/flex2/grid1/grid2).
 *
 * Nothing here may use flex or grid: the page furniture has to survive the
 * very features under test, so the cards are inline-block and the test
 * containers are marked out with `outline` (which takes no layout space) so
 * every measured geometry is the naked box. */

body { font: 12px/1.35 sans-serif; margin: 8px; background: #fff; color: #111; }
h1 { font-size: 16px; margin: 0 0 4px; }
h1 .sub { font: 11px sans-serif; color: #666; }
h2.sec { font: bold 12px sans-serif; margin: 10px 0 4px; padding: 2px 4px;
	background: #eaeaea; }
nav { font: 11px monospace; margin-bottom: 6px; }

#banner { padding: 6px 10px; font: bold 14px monospace; background: #999;
	color: #fff; margin: 4px 0 8px; }
#banner.ok { background: #0a7d28; }
#banner.bad { background: #c00; }

.case { display: inline-block; vertical-align: top; width: 254px;
	margin: 0 6px 6px 0; padding: 4px; outline: 1px solid #ddd; }
.case.failed { outline: 2px solid #c00; background: #fff2f2; }
.case h3 { font: bold 11px/1.2 monospace; margin: 0 0 3px; color: #036; }
.case .desc { font: 10px/1.2 monospace; color: #777; margin: 0 0 3px;
	height: 12px; overflow: hidden; }

.box { width: 240px; background: #eef2f7; outline: 1px solid #9ab; }
.i { width: 40px; height: 20px; line-height: 20px; background: #39c;
	color: #fff; font: 10px/20px monospace; text-align: center;
	overflow: hidden; }
.i.b { background: #c63; }
.i.c { background: #693; }
.i.d { background: #939; }
.i.e { background: #099; }

.badge { display: inline-block; margin-top: 3px; padding: 1px 5px;
	font: bold 10px monospace; background: #bbb; color: #fff; }
.badge.ok { background: #0a7d28; }
.badge.bad { background: #c00; }

#log { font: 11px/1.4 monospace; white-space: pre-wrap; margin: 10px 0;
	padding: 6px; background: #fafafa; outline: 1px solid #ddd; }
