/* Feature 034 — the read-only demo bar and its brand editor (spec §11, §13).
   Linked from partials/head.html under `demo_mode` only, so a real tenant
   downloads none of it. Same fixed-bar-plus-spacer pattern as the super-admin
   "view as" banner in main.css: 44px, z-index above every overlay (the lightbox
   is 20000, the toasts 20001) but below that banner's 21000, which nothing else
   may reach — the two can never coincide anyway, there is no session in the
   demo. The spacer gives the height back to the flow and the sibling
   combinator pins the sticky navbar underneath. Colours come from main.css
   variables only: the bar is the page's ink on the page's paper, INVERTED,
   which reads as foreign chrome in both themes without a single literal
   colour. */
.demo-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 20500; height: 44px;
    background: var(--text-primary);
    color: var(--card-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.demo-bar-spacer { height: 44px; flex-shrink: 0; }
.demo-bar ~ .navbar { top: 44px; }

/* The visitor's own logo, any shape. main.css sizes `.nav-logo img` at 150px
   tall for Oskoole's and the tenants' SVGs, which carry their own padding; a
   square PNG at that height spills out of the 60px bar. `.nav-logo` is the
   36px box the navbar reserves for it, so this fills that height and no more,
   keeps the aspect ratio, and caps the width. Only ever set by demo-brand.js. */
.nav-logo img.demo-logo {
    height: 100%; max-height: 100%;
    width: auto; max-width: 220px;
    object-fit: contain;
}

.demo-bar-inner {
    max-width: 1280px; margin: 0 auto; height: 100%;
    padding: 0 0 0 2rem;
    display: flex; align-items: center; gap: .65rem;
}
.demo-bar-icon { flex-shrink: 0; }
.demo-bar-text {
    flex: 1; min-width: 0; margin: 0;
    font-size: .85rem; line-height: 1.25; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.demo-bar-toggle {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: 0 1.1rem; border: 0;
    background: var(--orange); color: var(--brand-on-primary);
    font-family: inherit; font-size: .82rem; font-weight: 700;
    cursor: pointer; transition: background .2s;
}
.demo-bar-toggle:hover { background: var(--orange-hover); }
.demo-bar-toggle[aria-expanded="true"] { background: var(--card-bg); color: var(--text-primary); }
.demo-bar-toggle:focus-visible { outline: 3px solid var(--card-bg); outline-offset: -4px; }
.demo-bar-toggle[aria-expanded="true"]:focus-visible { outline-color: var(--orange); }
.demo-bar-toggle svg { flex-shrink: 0; }

.demo-panel {
    position: absolute; top: 44px; left: 0; right: 0;
    max-height: calc(100vh - 44px); overflow-y: auto;
    background: var(--card-bg); color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--card-shadow-hover);
    animation: demo-panel-in .18s ease;
}
.demo-panel[hidden] { display: none; }
.demo-panel-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 1rem 2rem 1.25rem;
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem;
}
.demo-panel-colours {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin: 0; padding: 0; border: 0; min-width: 0;
}
.demo-panel-legend {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.demo-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.demo-label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.demo-hint { font-size: .72rem; color: var(--text-muted); }
.demo-colour-row { display: flex; gap: .5rem; align-items: stretch; }
.demo-swatch {
    width: 44px; height: 44px; padding: 0;
    border: 1px solid var(--input-border); border-radius: 10px;
    background: var(--input-bg); cursor: pointer;
}
.demo-swatch::-webkit-color-swatch-wrapper { padding: 4px; }
.demo-swatch::-webkit-color-swatch { border: 0; border-radius: 6px; }
.demo-swatch::-moz-color-swatch { border: 0; border-radius: 6px; }
.demo-hex, .demo-input {
    min-height: 44px; padding: 0 .75rem;
    border: 1px solid var(--input-border); border-radius: 10px;
    background: var(--input-bg); color: var(--text-primary);
    font-family: inherit; font-size: .95rem;
}
.demo-hex {
    width: 7.5em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}
.demo-hex[aria-invalid="true"] { border-color: var(--red-error); }
.demo-field--name .demo-input { width: 16rem; max-width: 100%; }
.demo-input--file { padding: .55rem .75rem; max-width: 100%; }
.demo-reset, .demo-copy {
    min-height: 44px; padding: 0 1.1rem;
    border: 1.5px solid var(--border-color); border-radius: 10px;
    background: transparent; color: var(--text-primary);
    font-family: inherit; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: background .2s;
}
.demo-reset:hover, .demo-copy:hover { background: var(--sidebar-item-hover); }
.demo-reset:disabled { opacity: .6; cursor: progress; }
.demo-copy { align-self: flex-start; }
.demo-swatch:focus-visible, .demo-hex:focus-visible, .demo-input:focus-visible, .demo-reset:focus-visible, .demo-copy:focus-visible {
    outline: 3px solid var(--orange); outline-offset: 2px;
}

/* The level-3 note (spec §12): inline in the tutorial view where the
   "Generating next steps" indicator was, once the playthrough completes.
   Card colours and the page's own accent, so it reads as part of the guide
   in both themes. */
.demo-note {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .9rem;
    margin: 1.5rem 0 0; padding: 1rem 1.25rem;
    background: var(--orange-light); color: var(--text-primary);
    border: 1px solid var(--border-color); border-left: 4px solid var(--orange);
    border-radius: 12px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.demo-note-icon { display: inline-flex; flex-shrink: 0; color: var(--orange); }
.demo-note-icon svg { width: 20px; height: 20px; }
.demo-note-text { flex: 1 1 16rem; margin: 0; font-size: .95rem; line-height: 1.4; }
.demo-note-link {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 1.1rem;
    background: var(--orange); color: var(--brand-on-primary);
    border-radius: 40px; font-size: .9rem; font-weight: 700;
    text-decoration: none; transition: background .2s;
}
.demo-note-link:hover { background: var(--orange-hover); }
.demo-note-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@keyframes demo-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .demo-panel { animation: none; }
    .demo-bar-toggle, .demo-reset, .demo-copy, .demo-note-link { transition: none; }
}

@media (max-width: 600px) {
    .nav-logo img.demo-logo { max-width: 140px; }
    /* The demo's visitor is signed in (spec §6.3), so the navbar carries the
       bell, the avatar pill and the hamburger next to the logo: at 390px that
       row is ~30px too wide in main.css. Demo host only: a slimmer pill and a
       narrower logo cap keep the page from scrolling sideways. */
    .demo-bar ~ .navbar .nav-logo img { max-width: 110px; }
    .demo-bar ~ .navbar .nav-user-trigger { padding: .25rem; gap: 0; }
    .demo-bar ~ .navbar .nav-user-trigger .chevron { display: none; }
    .demo-bar-inner { padding-left: 1rem; gap: .5rem; }
    .demo-bar-icon { display: none; }
    .demo-bar-text {
        font-size: .76rem; line-height: 1.2;
        white-space: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .demo-bar-toggle { padding: 0 .85rem; font-size: .78rem; }
    .demo-panel-inner { padding: .85rem 1rem 1rem; gap: .85rem; }
    .demo-panel-colours { flex-direction: column; width: 100%; gap: .6rem; }
    .demo-field--colour { flex-direction: row; align-items: center; justify-content: space-between; }
    .demo-field--name, .demo-field--logo, .demo-field--share, .demo-field--reset { flex: 1 1 100%; }
    .demo-field--name .demo-input { width: 100%; }
    .demo-reset, .demo-copy { width: 100%; }
    .demo-copy { align-self: stretch; }
    .demo-note { padding: .85rem 1rem; }
    .demo-note-link { width: 100%; justify-content: center; }
}