@charset "UTF-8";

body{
    transition: all 1s ease-out;
}
content {
    background-color: inherit;
}

table{
    width:100%;
}

/* .tag { */
/*     text-shadow: none; */
/*     background-color: darkorchid; */
/* } */
/* .tag:hover{ */
/*     background-color: goldenrod; */
/* } */
/* .tag:visited{ */
/*     color: goldenrod; */
/* } */
.tag{
    text-shadow: none;
}
.oxtf {
    /* background-color: darkorchid; /\* Green *\/ */
    /* border: none; */
    /* color: inherit; */
    /* padding: 15px 32px; */
    /* text-align: center; */
    /* text-decoration: none; */
    /* display: inline-block; */
    /* font-size: 16px; */
}
#table-of-contents {
    /* overflow: visible; */
    /* background-color: inherit; */
    /* position: sticky; */
    /* top: 0px; */
    /* padding-top: 1%; */
    /* padding-left: 3%; */
    /* border-bottom: goldenrod; */
    /* border-bottom-style: groove; */
    /* border-width: thin; */
    /* box-shadow: 0px 10px 20px rgba(218, 165, 32, 0.1); */
}

/* Links: replicate underline that clears descenders */
a:link {
    color: blue;
}

a:visited {
        color: goldenrod;
}

/* nav > ul li{ */
/*     color: goldenrod; */
/* } */
/* nav > ul li:hover{ */
/*     color: goldenrod; */
/* } */

a:hover{
    color: goldenrod;
}

/* .sidenote-number > .numeral{ */
/*     color: goldenrod; */
/* } */

/* .sidenote > .numeral{ */
/*     color: goldenrod; */
/* } */

/* td { */
/*     text-align: center; */
/* } */

.title{
    /* margin-bottom: 2em; */
}

.tag{
    color: inherit;
    background-color: inherit;
    font-size: 40%;
}

h1{
    /* margin-top: 0px; */
}

.iframe-wrapper-x3d {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.iframe-wrapper-x3d iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A simple, Tufte-style separator for log posts */
.log-post {
      border-bottom: 1px solid #ccc;
      padding-bottom: 2rem;
      margin-bottom: 2rem;
}

/* Remove the border from the very last post on the page */
.log-post:last-child {
      border-bottom: none;
      margin-bottom: 0;
}

/* --- Advanced Zoomable Lightbox --- */

/* The dark background overlay */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: lightbox-fade-in 0.3s ease-in-out;
  overflow: hidden; /* Hide parts of the image that are panned off-screen */
}

/* A wrapper for the image that handles panning (translate) */
.lightbox-image-wrapper {
  transition: transform 0.1s ease-out;
}

/* The image itself, which handles scaling (zoom) */
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  cursor: grab;
  transition: transform 0.2s ease-in-out;
}

.lightbox-overlay img.panning {
  cursor: grabbing;
}

/* The 'close' button (an 'X') */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  color: #fff;
  font-family: sans-serif;
  cursor: pointer;
  text-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 1010;
}

/* Container for the zoom controls */
.lightbox-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
  padding: 5px;
  display: flex;
  gap: 5px;
  z-index: 1010;
}

.lightbox-controls button {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 30px;
  height: 30px;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes lightbox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* --- Collapsible H3 Sections --- */

/* Style the clickable heading */
h3.collapsible-heading {
  cursor: pointer;
  position: relative;
  padding-left: 1.5rem; /* Make space for the icon */
}

/*
 * Add the expand/collapse icon before the heading text.
 * Using flexbox for alignment provides a more robust and
 * cross-browser-consistent result than older methods,
 * fixing alignment issues in Safari.
*/
h3.collapsible-heading::before {
  content: '►'; /* Right-pointing triangle for collapsed state */
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  font-size: 0.9rem;
  color: #666;
  transition: transform 0.2s ease-in-out;
  /* Flexbox for perfect vertical centering */
  display: flex;
  align-items: center;
}

/* Rotate the icon for the expanded state */
h3.collapsible-heading.active::before {
  transform: rotate(90deg);
}

/* Style the content that will be hidden/shown */
.collapsible-content {
  /* Smooth transition for expand/collapse */
  transition: max-height 0.3s ease-in-out;
  overflow: hidden;
}

/* The class that hides the content */
.collapsible-content.collapsed {
  max-height: 0;
  /* We also need to hide any margin/padding when collapsed */
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}
/* --- Responsive Table Wrapper --- */

@media (max-width: 760px) {
  .table-scroll-wrapper {
    overflow-x: auto; /* This enables horizontal scrolling */
    width: 100%;
  }

  /* Ensure the table inside the wrapper uses its full required width */
  .table-scroll-wrapper table {
    min-width: 100%; /* Prevents the table from collapsing smaller than the screen */
  }
}

/* --- Definitive Fix for Source Blocks & Copy Button --- */

/*
 * 1. The .org-src-container is the main wrapper.
 * The !important flag is necessary to win the specificity battle
 * with ox-tufte.css and force the container to a sane width.
 * This is the key to fixing the widescreen clipping issue.
*/
.org-src-container {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 1.4rem 0 !important;
  padding-top: 2.5em; /* Make space for the button */
}

/*
 * 2. The <pre> element is the scrollable "viewport".
*/
.org-src-container > pre.src {
  overflow-x: auto;
  width: 100%;
  margin: 0;
  padding: 1em;
  box-sizing: border-box;
}

/*
 * 3. Position and style the copy button.
*/
.copy-code-button {
  position: absolute;
  top: 0; /* Position it in the padded area */
  right: 0;
  background: #f7f7f7;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0.25em 0.5em;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  font-size: 1.1rem;
  color: #666;
  cursor: pointer;
  z-index: 10;
  opacity: 0.6; /* Visible but subtle by default */
  transition: opacity 0.2s, color 0.2s, background-color 0.2s;
}

/* Make the button more prominent on hover */
.org-src-container:hover .copy-code-button,
.copy-code-button:hover {
  opacity: 1;
  color: #111;
  background-color: #efefef;
}

/* Style for the button after the content has been copied */
.copy-code-button.copied {
  color: #155724; /* A pleasant green */
  background-color: #d4edda;
  opacity: 1;
}