/* The loading card of the web version, over the page until the engine is ready. It uses the page's own colours (style.css). */
.boot{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--paper);font-family:var(--sans)}
.boot[hidden]{display:none}
.bootcard{width:min(620px,calc(100vw - 32px));padding:18px 20px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink)}
.bootcard b{display:block;margin-bottom:8px;font-size:20px;color:var(--plum)}
.bootcard b i{font-style:normal;color:var(--idc)}
#boot-text{color:var(--ink2);font-size:14px}
#boot-rows{margin-top:12px;display:grid;gap:7px}
.brow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n z s" "b b b";align-items:baseline;gap:3px 10px;font-size:13px;color:var(--ink2)}
.bn{grid-area:n;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz{grid-area:z}
.bs{grid-area:s;min-width:5.6em;text-align:right}
.bb{grid-area:b}
@media (min-width:600px){.brow{grid-template-columns:14.5em 1fr 4.4em 6em;grid-template-areas:"n b z s";align-items:center;gap:10px}}
.bb{height:6px;border-radius:3px;background:var(--rule2);overflow:hidden}
.bb i{display:block;height:100%;width:0;background:var(--bar)}
.bz{text-align:right;font-variant-numeric:tabular-nums}
.bs{font-variant-numeric:tabular-nums}
.brow.ok .bs{color:var(--plum);font-weight:600}
.bootgo{margin-top:14px;display:flex;justify-content:flex-end}
.bootgo[hidden]{display:none}
#boot-go{padding:7px 26px;border:0;border-radius:6px;background:var(--plum);color:var(--panel);font:600 15px var(--sans);cursor:pointer}
#boot-go:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
#boot-note{margin-top:12px;font-size:12px;line-height:1.45;color:var(--ink2)}
.bootclear{text-transform:none;letter-spacing:normal;font-weight:400;display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12px;line-height:1.4;color:var(--ink2);cursor:pointer}
.bootclear input{margin-top:2px}
#boot-err{margin-top:10px;padding:7px 10px;border-radius:6px;background:var(--bad);color:var(--badink);font-size:14px}
#busy{position:fixed;left:12px;bottom:12px;z-index:40;width:min(300px,calc(100vw - 24px));padding:8px 12px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink2);font-family:var(--sans);font-size:13px}
#busy[hidden]{display:none}
#busy i{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--rule2);overflow:hidden}
#busy b{display:block;height:100%;width:0;background:var(--bar)}
/* the kit's link to the TabLab-Hub (site-kit/header/site-hub.html: its look, a small grey chip that follows the theme, is the kit's, in site-footer.css). Only where it sits is the page's: in the header row after the
   badge, level with the buttons, never squeezed. */
.top .site-hub{--site-hub-h:calc(12.5px * 1.55 + 10px); flex:none; align-self:baseline}          /* the height of the buttons it sits among (style.css `.top button`: font-size 12.5px, the body's line-height 1.55, 4px of padding and 1px of border above and below), so that
   its top and bottom are theirs; on the same baseline as them (the header row aligns its items by baseline: `center` left it 4.5px high), never stretched to the two-line badge. tests/test_hub_link.py computes both heights from the two files and holds them equal. */
@media (max-width:520px){ .top .site-hub{order:1; margin-left:auto} }                     /* on a phone: with the buttons, at the end of their row, so that the badge keeps the first row's width */

/* the one <h1> of the page is the header's mark (webtab/discover.py makes it of what was a span): it looks as it did */
h1.brand{margin:0}
/* the block of text below the page (webtab/discover.py): for people and crawlers that read before they run anything; muted, in the page's own tokens, out of the printed report */
.about{max-width:1360px; margin:0 auto; padding:0 20px 40px; color:var(--ink2); font-size:13.5px; line-height:1.55}
.about h2{margin:0 0 8px; font-family:var(--cond); font-size:19px; font-weight:600; color:var(--ink2)}
.about p{margin:0 0 8px; max-width:78ch}
.about details{margin:0 0 4px; max-width:78ch}
.about summary{padding:2px 0; font-weight:600; color:var(--body); cursor:pointer}
.about details p{margin:2px 0 8px 14px}
@media print{ .about{display:none} }