/* home: a control panel. an info banner on top that follows the pointer, then each section's
pages as icons in a group box. */
.home { padding: 2px 16px 6px; }
.banner {
position: sticky; top: var(--head-h); z-index: 3;
display: grid; padding: 10px 14px; margin-bottom: 10px;
background: var(--grad-banner);
border: 1px solid var(--edge); border-radius: var(--r-box);
box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--paper-edge), var(--drop);
}
/* every description is in the page, stacked in one cell, so the banner is always as tall as
the longest and nothing below it moves */
.banner .layer { grid-area: 1 / 1; display: flex; gap: 14px; align-items: center; visibility: hidden; }
.banner .layer.on { visibility: visible; animation: swapin 0.16s ease-out; }
/* without hover only the intro ever shows, so the others shouldn't hold space open */
@media (hover: none) { .banner .layer:not([data-for=""]) { display: none; } }
.banner p { margin: 0; font-size: 13px; color: var(--text-2); }
.banner b { display: block; margin-bottom: 2px; font-size: 16px; color: var(--heading); }
.banner code { padding: 0 3px; font-family: var(--mono); font-size: 0.9em; background: var(--code-bg); border: 1px solid var(--code-edge); border-radius: var(--r-box); }
.banner a { color: inherit; text-decoration: none; }
.banner .where { display: block; margin: -1px 0 3px; font-size: 11px; color: var(--muted); }
.banner .stack { position: relative; flex: none; width: 72px; height: 56px; }
.banner .stack .icon { position: absolute; filter: var(--icon-rim) drop-shadow(2px 2px 0 var(--icon-shadow)); }
.banner .stack .icon:nth-child(2) { left: 16px; top: 8px; }
.banner .stack .icon:nth-child(3) { left: 32px; top: 16px; }
/* group box (haiku's BBox): an etched border with its label in the line */
fieldset.box {
min-width: 0; margin: 0 0 8px; padding: 2px 10px 6px;
border: 1px solid var(--etch); border-radius: var(--r-box);
box-shadow: inset 1px 1px 0 var(--hi), 1px 1px 0 var(--hi);
transition: background 0.12s;
}
fieldset.box > legend { padding: 0 5px; font-weight: 700; font-size: 12px; text-shadow: var(--emboss); }
fieldset.box:hover, fieldset.box:target { background: var(--chrome-hover); }
.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 2px 4px; }
/* each icon is a link, and says so: its label is in link colour with the site's dotted
underline. pointing lifts the icon off the panel, pressing sets it back down */
.ico {
display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 4px 3px;
text-align: center; font-size: 12px; line-height: 1.25; color: var(--link-chrome); text-decoration: none;
}
.ico .icon { filter: var(--icon-rim) drop-shadow(2px 2px 0 var(--icon-shadow)); transition: transform 0.08s, filter 0.08s; }
.ico span { padding: 1px 4px; overflow-wrap: anywhere; text-decoration: underline dotted; text-underline-offset: 3px; }
.ico:hover .icon { transform: translate(-1px, -2px); filter: var(--icon-rim) drop-shadow(3px 4px 1px var(--icon-shadow)); }
.ico:hover span { background: var(--ico-hover); text-decoration-style: solid; }
.ico:focus-visible { outline: none; }
.ico:focus-visible span, .ico.last span { background: var(--grad-select); color: var(--on-select); text-shadow: var(--emboss-select); text-decoration: none; }
.ico:active .icon { transform: translate(1px, 1px); filter: var(--icon-rim) drop-shadow(1px 1px 0 var(--icon-shadow)); }
@media (max-width: 760px) {
.banner { position: static; }
.icons { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}