/* =============================================
	 Notebook Page Styles
	 Extracted from global style.css to keep base
	 styles lean. Scoped to notebook-related
	 classes to avoid bleeding into other pages.
	 ============================================= */

/* --- Layout Grid (content + optional sidebars) --- */
.notebook-layout {
	display: grid;
	grid-template-columns: 200px 1fr 200px; /* left spacer / content / dataset sidebar */
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 20px 3rem;
	align-items: start;
}

@media (max-width: 1024px) {
	.notebook-layout { grid-template-columns: 1fr 240px; gap: 2rem; }
	.notebook-layout > .left-sidebar { display:none; }
}
@media (max-width: 768px) {
	.notebook-layout { grid-template-columns: 1fr; gap: 1.25rem; padding: 0 1rem 2.5rem; }
	.notebook-layout > .left-sidebar { display:none; }
	.sidebar-sticky { position: static; padding: 0.75rem 0 0; }
	.sidebar-datasets .dataset-card h3 { font-size:1rem; -webkit-line-clamp:1; line-clamp:1; }
	.sidebar-datasets .dataset-card p { font-size:0.85rem; -webkit-line-clamp:2; line-clamp:2; }
	.sidebar-datasets .dataset-card .card-image { height:120px; }
}

.notebook-content { min-width:0; line-height:1.5; opacity:0; animation: notebookFade .4s ease-out forwards; }
@keyframes notebookFade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

.left-sidebar { position:relative; }
.dataset-sidebar { position:relative; }
.sidebar-sticky { position:sticky; top:6rem; padding:1.5rem 0; }
.sidebar-sticky h3 { font-family: var(--font-condensed, var(--font-sans)); font-size:1.25rem; font-weight:600; margin:0 0 1rem; color: var(--text-primary); border-bottom:2px solid var(--primary); padding-bottom:0.5rem; }

/* Sidebar dataset cards (compact variant on notebook pages) */
.sidebar-datasets .dataset-card { border-radius: var(--radius-lg, 1rem); transition:.2s; margin-bottom: 3rem; }
.sidebar-datasets .dataset-card:hover { transform:translateY(-2px); }
.sidebar-datasets .dataset-card .card-image { height:100px; }
.sidebar-datasets .dataset-card .card-content { padding:1rem; }
.sidebar-datasets .dataset-card h3 { font-size:0.95rem; line-height:1.2; margin:0 0 0.5rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sidebar-datasets .dataset-card p { font-size:0.8rem; line-height:1.3; margin:0 0 0.75rem; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sidebar-datasets .dataset-card .card-downloads { font-size:0.75rem; margin-bottom:0.75rem; }
.sidebar-datasets .dataset-card .card-btn { font-size:0.8rem; padding:0.5rem 1rem; border-radius:0 0 var(--radius, .5rem) var(--radius, .5rem); }

.no-datasets { text-align:center; padding:2rem 1rem; color: var(--text-secondary); }
.no-datasets p { font-size:0.95rem; margin:0; }

/* --- Code toggle switch (only present on notebook pages) --- */
#code-toggle-container { display:flex; flex-direction:row; gap:1rem; justify-content:end; }
.switch { position:relative; display:inline-block; width:60px; height:34px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; border-radius:34px; background: var(--syntax-highlight-line,#444); transition:.4s; }
.slider:before { content:""; position:absolute; height:26px; width:26px; left:4px; bottom:4px; border-radius:50%; background:#fff; transition:.4s; }
input:checked + .slider { background: var(--primary); }
input:focus + .slider { box-shadow:0 0 1px var(--primary); }
input:checked + .slider:before { transform:translateX(26px); }

/* --- Typography refinements within notebook content --- */
.notebook-content h1, .notebook-content h2, .notebook-content h3,
.notebook-content h4, .notebook-content h5, .notebook-content h6 {
	font-family: var(--font-sans); letter-spacing:-0.02em; color: var(--text-primary); line-height:1.25; margin:2.2rem 0 1rem; text-transform:none;
}
/* Markdown Table Styling for Notebook Cells */
.notebook-content table {
	width: 100%;
	margin: 1rem;
	background: rgba(255,255,255,0.95);
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
	border-radius: 6px;
	overflow: hidden;
}
.notebook-content th, .notebook-content td {
	border: 1px solid #e0e0e0;
	padding: 0.5em 1em;
	text-align: left;
}
.notebook-content th {
	background: #f7f7fa;
	font-weight: 600;
	color: #333;
}
.notebook-content tr:nth-child(even) td {
	background: #fafbfc;
}
.notebook-content tr:hover td {
	background: #f0f6ff;
}
.notebook-content h1 { font-size: clamp(1.9rem, 2.4vw, 2.4rem); margin-top:0; }
.notebook-content h2 { font-size: clamp(1.45rem, 2vw, 1.9rem); }
.notebook-content h3 { font-size:1.25rem; margin:1.8rem 0 0.75rem; }
.notebook-content a { font-size:1.05rem; letter-spacing:-0.2px; color: #089289; }
.notebook-content p { margin:0.85rem 0; font-size:1.05rem; letter-spacing:-0.2px; }
.notebook-content ul, .notebook-content ol { margin:1rem 0 1.3rem 1.4rem; }
.notebook-content li { margin:0.35rem 0; }
.notebook-content code { background:#f4f6f8; padding:0.15em 0.4em; border-radius:4px; font-size:0.92em; }
.notebook-content pre { padding:1rem 1.1rem; overflow:auto; border-radius:6px; font-size:0.85rem; line-height:1.4; }
.notebook-content pre code { background:none; padding:0; font-size:inherit; }
.notebook-content img { max-width:100%; height:auto; display:block; margin:1.2rem auto; border-radius:4px; }
.notebook-content iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0.5rem; }
.notebook-content hr { border:none; height:1px; background:linear-gradient(90deg,transparent,#ccc,transparent); margin:2.5rem 0; }
.notebook-content .callout { border-left:4px solid var(--primary); background:#f0fbf9; padding:0.9rem 1rem; border-radius:4px; margin:1.4rem 0; }
.notebook-content .callout strong { color:var(--primary); }

/* Plotly tweaks */
.notebook-content .plotly, .notebook-content .js-plotly-plot { margin:1.4rem 0 2.1rem; }
.notebook-content .plotly text { font-family:inherit !important; }


/* --- Jupyter (nbconvert) cell structure styles --- */
.jp-Cell { margin:2rem auto; }
.jp-Cell:first-child { display:none; }
.jp-MarkdownCell { padding:0 1rem; }
.jp-MarkdownCell code { background: var(--syntax-highlight-bg); color: var(--syntax-highlight-fg); padding:.25rem .5rem; border-radius:8px; }
.jp-InputPrompt, .jp-OutputPrompt, .anchor-link { display:none; }
.jp-CodeCell .jp-Cell-inputWrapper { background: var(--syntax-highlight-bg); color: var(--syntax-highlight-fg); border-radius:1rem 1rem 0 0; font-family: var(--font-mono); width:100%; max-height:0; overflow:hidden; transition:max-height 1s ease-in-out; }
.jp-CodeCell .jp-Cell-outputWrapper { background: var(--background-light); padding:1rem; border-radius:1rem; overflow-x:auto; }
.jp-CodeCell.code-visible .jp-Cell-inputWrapper { max-height:3000px; }
.jp-CodeCell.code-visible .jp-Cell-outputWrapper { border-radius:0 0 1rem 1rem; }
.jp-CodeCell .jp-Cell-inputWrapper .jp-InputArea { padding:1rem; }

/* Syntax highlight tokens */
.c1 { color: var(--syntax-highlight-comment); font-style:italic; }
.k, .kn, .kc { color: var(--syntax-highlight-pink); }
.s1, .s2 { color: var(--syntax-highlight-green); }
.mi, .mf { color: var(--syntax-highlight-orange); }
.o, .ow { color: var(--syntax-highlight-purple); }
.p { color: var(--syntax-highlight-cyan); }

/* Output styling overrides */
.jp-OutputArea img { width:100%; border-radius: var(--radius, .5rem); }
.jp-OutputArea table { border:none !important; min-width:100%; overflow-x:auto; }
.jp-OutputArea td, .jp-OutputArea th { padding:8px; text-align:left; border:none; color: var(--text-primary); }
.jp-OutputArea table tr > th:first-child { font-weight:600; font-size:.75rem; font-family: var(--font-condensed, var(--font-sans)); text-align:right; width:1rem; color: var(--text-secondary); }
.jp-OutputArea table thead th { font-size:.75rem; font-weight:600; font-family: var(--font-condensed, var(--font-sans)); text-align:left; color: var(--text-primary); }

/* Debug details on notebook pages */
.notebook-layout details { background:#f8f9fa; padding:0.6rem 0.8rem 0.8rem; border-radius:6px; border:1px solid #e4e7ea; }
.notebook-layout details summary { cursor:pointer; font-weight:600; margin-bottom:0.55rem; }

/* ===== Notebook Navigation in Aside ===== */
aside.notebook-nav {
  position: sticky;
  top: 12rem;
  margin-bottom: 2rem;
  transition: all 0.2s ease;
}

aside.notebook-nav.collapsed .notebook-nav-list {
  max-height: 0;
  overflow: hidden;
}

aside.notebook-nav .notebook-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

aside.notebook-nav .notebook-nav-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Keep header visible even when collapsed */
aside.notebook-nav.collapsed .notebook-nav-header h3 {
  opacity: 1;
  pointer-events: auto;
}

aside.notebook-nav .notebook-nav-toggle {
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

aside.notebook-nav .notebook-nav-toggle:hover {
  background: #f0f0f0;
  color: var(--text-primary);
}

aside.notebook-nav .nav-toggle-icon {
  font-size: 12px;
  font-weight: normal;
}

aside.notebook-nav .notebook-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: max-height 0.2s ease;
}

aside.notebook-nav .notebook-nav-link {
  display: block;
  padding: 0.25rem 0;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8rem;
  line-height: 1.3;
  transition: all 0.15s ease;
}

aside.notebook-nav .notebook-nav-link:hover {
  color: var(--text-primary);
  text-decoration: none;
}

aside.notebook-nav .notebook-nav-link.active {
  color: var(--primary);
  font-weight: 500;
}

/* Responsive Design for Notebook Navigation */
@media (max-width: 1024px) {
  aside.notebook-nav {
    display: none; /* Hide in sidebar when sidebar is collapsed */
  }
}

@media (max-width: 768px) {
  aside.notebook-nav {
    position: relative;
    top: auto;
    display: block;
    margin: 1rem 0;
    order: -1; /* Show at top on mobile */
  }
  
  aside.notebook-nav .notebook-nav-header {
    padding: 0.75rem 1rem;
  }
  
  aside.notebook-nav .notebook-nav-list {
    max-height: 250px;
  }
}