/* the deskbar (haiku's, laid flat): a raised bar beside the tab, floating just above the
window. the leaf menu on the left, a sunken tray on the right. */
.tabrow { display: flex; align-items: flex-end; gap: 12px; }
.deskbar {
position: relative; margin-left: auto; margin-bottom: 5px; anchor-name: --deskbar;
display: flex; align-items: stretch; gap: 4px; padding: 2px;
background: var(--grad-bar);
border: 1px solid var(--edge); border-radius: var(--r-box);
box-shadow: var(--raised-soft), var(--drop);
}
/* the leaf: flat until pointed at, sunk while its menu is open */
.leaf {
all: unset; display: grid; place-items: center; padding: 1px 6px; cursor: pointer;
border: 1px solid transparent; border-radius: var(--r-box);
}
.leaf:hover { background: var(--chrome-hover); }
.deskbar:has(#leaf-menu:popover-open) .leaf, .deskbar:has(#look-menu:popover-open) [data-look-btn] { background: var(--grad-pressed); border-color: var(--edge); box-shadow: var(--sunken); }
.leaf:focus-visible { outline: 1px dotted var(--text); outline-offset: -3px; }
#leaf-menu { min-width: 260px; }
#look-menu { min-width: 200px; }
.deskbar:has(#about:popover-open) [popovertarget="about"] { background: var(--grad-pressed); box-shadow: var(--sunken); }
@supports (anchor-name: --a) {
#leaf-menu, #look-menu, #about { inset: auto; margin: 0; top: calc(anchor(--deskbar bottom) + 3px); right: anchor(--deskbar right); }
}
/* the about box, a small panel of chrome with the credits engraved in it */
.about {
z-index: 20; margin: auto; width: min(360px, calc(100vw - 16px)); padding: 12px 14px;
color: var(--text-2); font-size: 12px; text-shadow: var(--emboss);
background: var(--grad-bar);
border: 1px solid var(--edge); border-radius: var(--r-box);
box-shadow: var(--raised-soft), var(--drop);
}
.about-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--etch); box-shadow: 0 1px 0 var(--hi); }
.about-head b { display: block; font-size: 14px; color: var(--text); }
.about-head span { font-size: 11px; color: var(--dim); }
.about ul { margin: 0; padding: 0; list-style: none; }
.about li { padding: 3px 0; }
.about a { color: var(--link-chrome); text-decoration: none; border-bottom: 1px dotted var(--link-chrome); }
.about a:hover { background: var(--hover); border-bottom-style: solid; }
/* a palette's chip: its desk with a corner of its selection */
.swatch {
flex: none; display: block; width: 14px; height: 14px;
background: linear-gradient(135deg, var(--sw-desk) 58%, var(--sw-select) 58%);
border: 1px solid var(--edge); border-radius: var(--r-box);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35);
}
/* the look chip shows the page as it is, or its day and night halves while it follows the system */
.look-chip { --sw-desk: var(--desk); --sw-select: var(--select-mid); }
:root[data-theme-pick="auto"] .look-chip {
background: linear-gradient(135deg, var(--chip-day) calc(50% - 1px), #fff calc(50% - 1px) calc(50% + 1px), var(--chip-night) calc(50% + 1px));
}
.tray {
display: flex; align-items: center; gap: 6px; padding: 0 8px 0 3px;
background: var(--chrome);
border-radius: var(--r-box);
box-shadow: var(--well-edge);
}
.tray-btn { all: unset; display: grid; place-items: center; padding: 1px 3px; cursor: pointer; border-radius: var(--r-box); }
.tray-btn:hover { background: var(--chrome-hover); }
/* tray items stay flat like haiku's, but whatever's pointed at lifts off the tray and sets
back down when pressed, the same way the home page's icons say they're clickable */
:is(.tray-btn, .leaf) :is(.icon, .swatch) { transition: transform 0.08s, filter 0.08s; }
:is(.tray-btn, .leaf):hover :is(.icon, .swatch) { transform: translate(-1px, -1px); filter: var(--icon-rim) drop-shadow(1px 2px 0 var(--icon-shadow)); }
:is(.tray-btn, .leaf):active :is(.icon, .swatch) { transform: translate(1px, 1px); filter: var(--icon-rim); }
.tray-btn:focus-visible { outline: 1px dotted var(--text); outline-offset: -2px; }
/* without js nothing could pick a theme or a palette */
:root:not([data-js]) [data-js-only] { display: none; }
.ver { font-size: 11.5px; color: var(--text); text-shadow: var(--emboss); white-space: nowrap; }
@media (max-width: 760px) {
.ver { display: none; }
.tray { padding-right: 3px; }
}