/* The site bar.
 *
 * Every page wears it: the reading pages, the editor, the front page, the
 * simulation, the calculator and the lexicon. Those last three are separate
 * apps with stylesheets of their own and no knowledge of the book's, so this
 * file carries its own colours rather than inheriting them, and everything
 * is scoped under .pc-sitebar so it cannot reach into the page below it.
 */
.pc-sitebar {
    --sb-bg:    rgba(10, 11, 13, .82);
    --sb-line:  #23262e;
    --sb-text:  #c9cdd6;
    --sb-bright:#eef1f6;
    --sb-teal:  #35e8e0;
    --sb-pink:  #ff3366;

    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 12px clamp(16px, 4vw, 40px);
    background: var(--sb-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sb-line);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
}

.pc-sitebar a { text-decoration: none; }

.pc-sitebar .sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--sb-bright);
}
.pc-sitebar .sb-mark {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--sb-teal), var(--sb-pink));
    box-shadow: 0 0 26px rgba(53, 232, 224, .5);
    animation: sb-pulse 2.6s ease-in-out infinite;
}
@keyframes sb-pulse {
    0%, 100% { transform: scale(1);    opacity: 1;  }
    50%      { transform: scale(1.28); opacity: .7; }
}
@media (prefers-reduced-motion: reduce) {
    .pc-sitebar .sb-mark { animation: none; }
}
.pc-sitebar .sb-name { font-size: 1.05rem; letter-spacing: .02em; font-weight: 400; }
.pc-sitebar .sb-name strong { font-weight: 700; }

.pc-sitebar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pc-sitebar nav a {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .92rem;
    color: var(--sb-text);
    border: 1px solid transparent;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.pc-sitebar nav a:hover { color: var(--sb-bright); background: rgba(255, 255, 255, .06); }

/* Where you are now. */
.pc-sitebar nav a[aria-current="page"] {
    color: var(--sb-teal);
    border-color: rgba(53, 232, 224, .35);
    background: rgba(53, 232, 224, .08);
}

.pc-sitebar .sb-cta {
    color: var(--sb-teal);
    border-color: rgba(53, 232, 224, .45);
}
.pc-sitebar .sb-cta:hover { background: rgba(53, 232, 224, .12); }

@media print { .pc-sitebar { display: none; } }