/* Shared top bar for experiment pages: home icon on the left, the page's name on the right.
   Same sizes as the Music page header (.page-header in styles.css).

   Each page links this file and IBM Plex Mono, then puts the bar first in <body>:

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&display=swap">
   <link rel="stylesheet" href="/site-bar.css">

   <div class="site-bar">
       <a href="/" class="site-bar-home" aria-label="Back to Home"><svg>…house…</svg></a>
       <span class="site-bar-title">Page name</span>
   </div>

   Class names are prefixed so the experiments' own styles don't reach in.
   The bar has no background of its own, so it takes each page's colour.
   A page with a dark theme sets --site-bar-line, --site-bar-ink and
   --site-bar-muted in its dark-mode rules (see physio/); --site-bar-bg is there
   if a page ever needs a solid bar. */

.site-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--site-bar-bg, transparent);
    border-bottom: 1px solid var(--site-bar-line, rgba(0, 0, 0, 0.1));
    font-family: 'IBM Plex Mono', monospace;
    line-height: normal;
}

.site-bar-home {
    display: inline-flex;
    color: var(--site-bar-muted, #555);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-bar-home:hover {
    color: #0c7792;
}

.site-bar-home svg {
    display: block;
    width: 24px;
    height: 24px;
}

.site-bar-title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--site-bar-ink, #333);
}

@media (max-width: 480px) {
    .site-bar {
        padding: 15px 20px;
    }
}

/* A page saved to the home screen (the Physio Timer) opens as its own app with
   no back button, so a link out to the site would strand it there. */
@media (display-mode: standalone) {
    .site-bar {
        display: none;
    }
}