/* Liora's golden emblems: her own icons in place of emojis, so they look the same on every phone (Bliss, 2026-10-01).
   The drawings are in templates/_emblems.svg; a page includes that once and draws one with
   <svg class="ico" aria-hidden="true"><use href="#i-home"/></svg>. Shared by the dashboard, the Library and the
   document pages. Load this before the page's own stylesheet, so a page can move the gold for its themes. */
:root {
    /* the gold, highlight to shadow, plus the soft inner fill */
    --emblem-1: #fff0b8; --emblem-2: #ffcf4a; --emblem-3: #ffb000; --emblem-4: #d98200;
    --emblem-soft-1: rgba(255, 215, 106, 0.32); --emblem-soft-2: rgba(255, 154, 0, 0.14);
    --emblem-glow: rgba(255, 184, 0, 0.55);
}
:root[data-theme="light"] {   /* deeper gold to show on white */
    --emblem-1: #f5b400; --emblem-2: #e09a00; --emblem-3: #c47f00; --emblem-4: #9c5c00;
    --emblem-soft-1: rgba(255, 184, 0, 0.26); --emblem-soft-2: rgba(224, 130, 0, 0.12);
}
:root[data-theme="abyss"] {   /* the Abyss swaps gold for violet */
    --emblem-1: #e6d4ff; --emblem-2: #b98aff; --emblem-3: #8b3ff5; --emblem-4: #5d22c4;
    --emblem-soft-1: rgba(185, 138, 255, 0.3); --emblem-soft-2: rgba(108, 43, 217, 0.14);
    --emblem-glow: rgba(139, 63, 245, 0.6);
}

.ico {
    width: 1.25em; height: 1.25em; flex-shrink: 0; vertical-align: -0.28em; overflow: visible;
    fill: none; stroke: url(#emblem-gold); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ico .f { fill: url(#emblem-soft); }
.ico .solid { fill: url(#emblem-gold); stroke: none; }
/* on a gold or coloured button or badge: drawn in its own text colour */
.ico-ink { stroke: currentColor; }
.ico-ink .f { fill: currentColor; fill-opacity: 0.2; }
.ico-ink .solid { fill: currentColor; }

/* Liora's motion for things that drop open (Bliss, 2026-10-03: "smooth, the way the sidebar tabs pop down"):
   opening glides out and settles gently; closing folds away evenly. Shared by the site notice and the sidebar. */
:root {
    --glide: cubic-bezier(0.22, 1, 0.36, 1);  --glide-ms: 560ms;
    --fold: cubic-bezier(0.65, 0, 0.35, 1);   --fold-ms: 440ms;
}

/* The site notice at the top of every page (templates/_site_notice.html). Lives here because every page loads this file.
   A slim bar holds its place in the page; the message drops down OVER the page (so nothing below jumps) on hover,
   on tap, or by itself for 5 seconds once per visit (static/js/site-notice.js). */
/* flex-shrink: 0, or the dashboard's full-height column squashes its slot and the top bar slides up under the bar */
.site-notice { position: relative; z-index: 50; height: 30px; flex-shrink: 0; font-size: 0.92rem; line-height: 1.5; }
.site-notice-card {
    position: absolute; top: 0; left: 0; right: 0;
    background-color: var(--bg-2, var(--bg-secondary, #1e1f22));
    background-image: linear-gradient(rgba(255, 184, 0, 0.13), rgba(255, 184, 0, 0.13));
    border-bottom: 1px solid rgba(255, 184, 0, 0.35);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: box-shadow var(--fold-ms) var(--fold);
}
.site-notice-bar {
    display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box;
    width: 100%; height: 30px; padding: 0 16px; margin: 0; border: 0; background: none; color: inherit;
    font: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer;
}
/* immune to a page's general button styles (the dashboard's blue hover, lift and phone min-height) */
.site-notice .site-notice-bar, .site-notice .site-notice-bar:hover, .site-notice .site-notice-bar:active {
    background: none; color: inherit; transform: none; box-shadow: none; min-height: 0; border-radius: 0;
}
.site-notice-bar:focus-visible { outline: 2px solid var(--emblem-2); outline-offset: -4px; border-radius: 6px; }
.site-notice .ico { width: 15px; height: 15px; }
.site-notice-chev {
    width: 6px; height: 6px; margin-left: 2px; opacity: 0.7; flex-shrink: 0;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--fold-ms) var(--fold);
}
.site-notice-body {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows var(--fold-ms) var(--fold), opacity calc(var(--fold-ms) * 0.7) var(--fold);
}
.site-notice-inner { min-height: 0; overflow: hidden; }
.site-notice-inner p {
    margin: 0 auto; max-width: 760px; padding: 2px 20px 14px; text-align: center;
    transform: translateY(-8px); transition: transform var(--fold-ms) var(--fold);
}
.site-notice-until { font-weight: 700; white-space: nowrap; }

/* open: by tap or peek (.open), by a resting mouse (only where there's a real mouse, so a tap on a phone can close
   it again), or by keyboard focus */
.site-notice.open .site-notice-body,
.site-notice:has(:focus-visible) .site-notice-body { grid-template-rows: 1fr; opacity: 1; }
.site-notice.open .site-notice-inner p,
.site-notice:has(:focus-visible) .site-notice-inner p { transform: none; }
.site-notice.open .site-notice-chev,
.site-notice:has(:focus-visible) .site-notice-chev { transform: translateY(1px) rotate(-135deg); }
.site-notice.open .site-notice-card,
.site-notice:has(:focus-visible) .site-notice-card { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.5); }
.site-notice.open .site-notice-body,
.site-notice.open .site-notice-inner p,
.site-notice.open .site-notice-chev,
.site-notice.open .site-notice-card {
    transition-duration: var(--glide-ms); transition-timing-function: var(--glide); transition-delay: 0ms;
}
@media (hover: hover) and (pointer: fine) {
    .site-notice:hover .site-notice-body { grid-template-rows: 1fr; opacity: 1; }
    .site-notice:hover .site-notice-inner p { transform: none; }
    .site-notice:hover .site-notice-chev { transform: translateY(1px) rotate(-135deg); }
    .site-notice:hover .site-notice-card { box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.5); }
    /* a short pause before opening, so sweeping the mouse past it doesn't flash it open */
    .site-notice:hover .site-notice-body,
    .site-notice:hover .site-notice-inner p,
    .site-notice:hover .site-notice-chev,
    .site-notice:hover .site-notice-card {
        transition-duration: var(--glide-ms); transition-timing-function: var(--glide); transition-delay: 90ms;
    }
    .site-notice.open:hover .site-notice-body,
    .site-notice.open:hover .site-notice-inner p,
    .site-notice.open:hover .site-notice-chev,
    .site-notice.open:hover .site-notice-card { transition-delay: 0ms; }
}
@media (prefers-reduced-motion: reduce) {
    .site-notice *, .site-notice-card { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}