/* Basic Reset for demonstration */
:root {
    --page-bg: #ece3fc;
    --text-color: #111;
    --accent: #2c7be5;
    --muted-border: rgba(0,0,0,0.06);
    --outline-color: #000; /* black outline for labels and boxes */
}

body {
    margin: 0;
    font-size: 18px; /* make base font larger */
    line-height: 2;   /* double-spaced lines */
    /* use a monospace stack for site-wide monospaced text */
    font-family: "SFMono-Regular", Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", "Courier New", monospace;
    background-color: var(--page-bg);
    color: var(--text-color);
}

/* Smoothly animate background color changes (respect reduced motion) */
body, .page-section, .top-ui-bar, .scroll-item, .filler-box {
    transition: background-color 360ms ease, color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    body, .page-section, .top-ui-bar, .scroll-item, .filler-box {
        transition: none !important;
    }
}

/* Smooth scrolling and offset for sticky header */
html {
    scroll-behavior: auto; /* disable smooth CSS scrolling to avoid programmatic conflicts */
    scroll-padding-top: 80px; /* ensure targets aren't hidden under the sticky header */
}

/* --- Header/UI Bar Styles --- */
.top-ui-bar {
    background-color: var(--page-bg);
    color: var(--text-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex; 
    align-items: center;
    padding: 0 5px;
    border-bottom: 1px solid var(--muted-border);
}

/* The container that enables horizontal scrolling */
.scroll-container {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden; 
    padding: 10px 0;
    flex-grow: 1;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scroll-behavior: smooth; /* For smooth JS scroll */
}
    
/* Webkit browsers (Chrome, Safari) scrollbar hide */
.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Style for the individual elements inside the scrollable bar */
.scroll-item {
    display: inline-block;
    flex-shrink: 0; 
    min-width: 150px; 
    height: 48px;
    line-height: 48px;
    text-align: center;
    background-color: var(--page-bg);
    border: 1px solid var(--outline-color);
    margin-right: 10px; 
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 0 15px;
    color: var(--text-color);
    text-decoration: none;  /* remove underline */
}

/* Make buttons and other controls inherit the same monospace font */
button, input, textarea, select, .scroll-arrow {
    font-family: inherit;
}

.scroll-item:hover {
    background-color: rgba(0,0,0,0.02);
    border-color: var(--outline-color);
}

.scroll-item.active {
    background-color: var(--accent); /* subtle highlight */
    color: #fff;
    border-color: var(--outline-color); /* keep outline black even when active */
}

.scroll-item:focus {
    outline: 2px solid var(--outline-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06); /* subtle halo to aid visibility */
}
.scroll-item[aria-current="page"] {
    font-weight: 700;
}

/* --- Arrow Button Styles --- */
.scroll-arrow {
    flex-shrink: 0; 
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 26px;
    cursor: pointer;
    padding: 12px 18px;
    height: 68px;
    transition: background-color 0.2s;
    line-height: 0;
    display: flex;
    align-items: center;
}

.scroll-arrow:hover {
    background-color: rgba(0,0,0,0.06);
}

/* Main content styles remain the same */
.main-content {
    padding: 20px;
}

/* Page section visibility control for single-file pages */
.page-section {
    display: block;
    max-width: 760px;
    margin: 240px auto; /* increased vertical space between sections */
    padding: 72px 24px; /* larger padding for more breathing room */
    background: var(--page-bg);
    border: 1px solid var(--outline-color);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Section inner layout: image + text */
    /* thumbnails removed; no section badges */

/* Reduce spacing on small screens to avoid excessive gaps */
@media (max-width: 640px) {
    .page-section {
        margin: 80px 12px;
        padding: 32px 12px;
    }
}
.page-section h1 { margin-top: 0; }

/* Animated reveal: default transform and opacity, transitions when .revealed is added */
.page-section h1,
.page-section p,
.page-section li {
    --i: 0; /* fallback index */
    transform: translateX(20px);
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes slideInFromRight {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.page-section.revealed h1,
.page-section.revealed p,
.page-section.revealed li {
    animation-name: slideInFromRight;
    animation-duration: 480ms;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
    animation-fill-mode: both;
    animation-delay: calc(var(--i) * 0.08s);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .page-section h1,
    .page-section p,
    .page-section li {
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
}

.filler-box {
    height: 800px;
    background-color: var(--page-bg);
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

/* Styles for document preview in bibliography */
.doc-preview { margin-top: 12px; }

.gdoc-embed {
    border: 1px solid var(--outline-color);
    border-radius: 6px;
}