/* The form keeps its original height: the canvas expands about that same center. */
.hero, .search-widget { --drawing-height: 360px; --drawing-growth: calc((var(--drawing-height) - 66px) / 2); }
.hero #title { transform-origin: center bottom; transition: transform 420ms ease; }
.search-widget .search-form { position: relative; height: 66px; }
.search-widget .search-box { position: absolute; width: 100%; height: 66px; top: 50%; transform: translateY(-50%); transition: height 420ms ease, border-color 120ms, box-shadow 120ms; }
.search-widget .search-box > input { padding-right: 210px; }
.search-actions { display: flex; align-items: center; gap: 8px; position: absolute; right: 9px; top: 50%; transform: translateY(-50%); z-index: 2; transition: top 420ms ease; }
.mosaic-area { position: absolute; inset: 0; overflow: hidden; border-radius: 12px; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
#mosaic-canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: crosshair; }
#mosaic-help { position: absolute; left: 9px; bottom: 9px; max-width: calc(100% - 230px); margin: 0; padding: 4px 6px; background: var(--surface); color: var(--muted); font-size: 11px; line-height: 1.35; text-align: left; pointer-events: none; }
.search-widget .search-icon, .search-widget #search { transition: opacity 180ms ease; }
.search-widget .examples, .search-widget .search-feedback { position: relative; transition: transform 420ms ease; }
.search-widget .examples { min-height: 48px; }
.hero.is-drawing #title { transform: translateY(calc(-1 * var(--drawing-growth))) scale(.68); }
.search-widget.is-drawing .search-box { height: var(--drawing-height); }
.search-widget.is-drawing .search-icon, .search-widget.is-drawing #search { opacity: 0; visibility: hidden; pointer-events: none; }
.search-widget.is-drawing .mosaic-area { opacity: 1; pointer-events: auto; }
.search-widget.is-drawing .search-actions { top: calc(100% - 33px); }
.search-widget--home.is-drawing .examples, .search-widget--home.is-drawing .search-feedback { transform: translateY(var(--drawing-growth)); }
.mosaic-example { gap: 8px; background: var(--surface); }
.mosaic-example svg { width: 38px; height: 38px; }
@media (max-width: 600px) {
    .search-widget .search-box > input { padding-right: 125px; }
    .search-actions { right: 7px; gap: 6px; }
    .draw-toggle { padding: 0 10px; }
    #mosaic-help { max-width: calc(100% - 147px); font-size: 10px; }
    .search-widget .examples { min-height: 128px; align-content: center; }
}

/* On results pages the same widget expands in document flow, above the data. */
.search-widget--results .search-form { margin-top: 12px; transition: height 420ms ease; }
.search-widget--results.is-drawing .search-form { height: var(--drawing-height); }
.search-widget--results .examples { justify-content: flex-start; }
.search-widget.is-restoring, .search-widget.is-restoring * { transition: none !important; }

.mosaic-expand { position: absolute; z-index: 3; top: 9px; right: 9px; display: grid; place-items: center; width: 36px; height: 36px; padding: 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--deep-blue); }
.mosaic-expand:hover { background: #edf3f5; border-color: var(--deep-blue); }
.mosaic-expand svg { width: 20px; height: 20px; }
.mosaic-expand .collapse-icon, .is-expanded .mosaic-expand .expand-icon { display: none; }
.is-expanded .mosaic-expand .collapse-icon { display: block; }
.search-widget .search-box.is-expanded { position: fixed; z-index: 30; transform: none; border-radius: 0; transition: none; }
.search-widget .search-box.is-resizing { transition: none; }
.search-box.is-expanded .mosaic-area { border-radius: 0; }
body.mosaic-expanded { overflow: hidden; }
body.mosaic-expanded > .unified-nav { position: fixed; z-index: 40; top: 0; left: 0; right: 0; background: var(--paper); }
body.mosaic-expanded > .site-footer { position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; margin: 0; background: var(--paper); }