/* The home page's own rules, on top of relayout.css, pages-base.css and brand.css. Layout is Relayout's classes in
   the markup; what is here is what they don't cover. */

/* Read by screen readers, not shown: the title's word for them, in place of the cycling slot */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── The hero's word ──
   Every word sits in the same grid cell, centred in it. home.js sets the slot's width to the current word's, in em
   so it holds as the title's size follows the window, and the rest of the title slides to fit as the width changes.
   Without the script the slot is as wide as the longest word. The current word fades and rises in, and the others
   are out of sight. In the mark's magenta: at this size the 3:1 of a graphic is the bar, as for large text. */
.word-slot {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    transition: width 0.4s;
}

.word-slot .word {
    grid-area: 1 / 1;
    color: var(--brand);
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.4s, transform 0.4s;
}

.word-slot .word.is-current {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .word-slot,
    .word-slot .word {
        transition: none;
    }
}

/* ── Layout demo ──
   The page's half of <relayout-demo> (assets/js/demo.js): the buttons, the source view and the hint. The preset
   itself is styled inside its shadow root, by demo-preset.css. */
/* The frame (inside the shadow root, demo-preset.css) and the source view read the same height, so the toggle swaps
   one for the other in place */
relayout-demo {
    --demo-height: 32rem;
    display: block;
}

/* ── The window ──
   Round the preview and the source, so the demo reads as a demo and not as part of the page: a title bar with
   window dots, the preset as a file name and a Live demo badge (pages-base.css's code window title bar and badge),
   over a recessed body that shows beside a narrowed frame. The code window's border, corners and shadow. */
.demo-window {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-alt);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .demo-window {
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 8px 16px -4px rgba(0, 0, 0, 0.3);
}

/* Decoration, in the colours windows use for them */
.demo-window .code-dot:nth-child(1) {
    background: #ff5f57;
}

.demo-window .code-dot:nth-child(2) {
    background: #febc2e;
}

.demo-window .code-dot:nth-child(3) {
    background: #28c840;
}

.demo-window .badge {
    padding: 1px 8px;
    font-size: 0.75rem;
}

/* The chosen preset and view, in the brand's tone, as the Documentation button is at rest */
relayout-demo .btn[aria-pressed="true"] {
    border-color: color-mix(in oklab, var(--brand) 50%, var(--border));
    color: var(--brand-text);
}

/* Hidden until the preset's styles have loaded, so it never shows unstyled. It keeps its height meanwhile. */
.demo-stage.is-loading {
    visibility: hidden;
}

/* The padding counts inside the height, so it matches the frame's */
.demo-source {
    box-sizing: border-box;
    height: var(--demo-height);
    margin: 0;
    overflow: auto;
    background: var(--bg-elev);
}

/* pages-base.css draws inline code as a chip; a block of source is one piece of text */
.demo-source code {
    padding: 0;
    border: 0;
    background: none;
    font-size: inherit;
}

/* One line under either view, its text set by demo.js, so it holds its place when the view changes */
.demo-hint {
    margin: 0;
    color: var(--text-subtle);
    font-size: 0.8125rem;
    text-align: center;
}

/* A touch screen has no corner to drag. The line keeps its space, so the page still holds still. */
@media (hover: none), (pointer: coarse) {
    .demo-hint[data-view="preview"] {
        visibility: hidden;
    }
}

/* ── Highlights ──
   A class name or an element is read whole, so a chip doesn't break at its hyphens */
.doc-card-body code {
    white-space: nowrap;
}