html, body {
    margin:0;
    padding-left: 10%;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-sans);
    line-height: 1.05;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.item-lsidebar{
    grid-area: sidebar;
    /* background-color: inherit;
    background-clip: border-box;
    border-end-end-radius: 50px;
    border-style: groove;
    padding-right: 10px;
    padding-left: 10px; */
}

.infoPanel{
    background-color: inherit;
    background-clip: border-box;
    border-end-end-radius: 25px;
    border-style: groove;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 15px;
    padding-top: 0px;
}

.item-lplt{
    grid-area: main-left;
    /* background: #eef; */
}

.rplt-top{
    grid-area: main-right-t;    
}

.rplt-btm{
    grid-area: main-right-b;    
}

.item-foot{
    grid-area: footer;    
    display: grid;
    font-size: 0.75rem;
}

.item-head{
    grid-area: header;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "note-grid";
}

.container{
    display: grid;
    /* min-height: 50vh; */
    padding: 1rem;
    gap: 1rem;
    box-sizing: border-box;
    grid-template-columns: 300px 500px 400px;
    grid-template-rows: 400px 400px 300px;
    column-gap: 5px;
    row-gap: 5px;
    grid-template-areas:
        "sidebar header main-left"
        "sidebar header main-right-t" 
        "sidebar footer main-right-b";
}

@media (max-width: 1024px) {
    html, body {
      margin: 0;
      padding-left: 0;
    }
  
    .container {
      display: grid;
      column-gap: 5px;
      row-gap: 5px;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      grid-template-areas:
        "header"
        "footer"
        "sidebar"
        "main-left"
        "main-right-t"
        "main-right-b"
    }
  
    .item-lsidebar {
      /* Ensure it doesn’t push the whole page */
      max-height: 100vh;   /* full viewport height */
      overflow-y: auto;    /* vertical scroll if needed */
      -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
      align-self: start;

    }
}
  

/* controls*/  
#controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  /* Slider groups */
  .slider-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  label {
    font-size: 0.75rem;
    color: #3c4043;
  }
  
  input[type="range"] {
    width: 100%;
    accent-color: #1a73e8; /* blue slider thumb/track */
  }
  
/* Buttons */
  .btn {
    background: #1a73e8;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btnalg{
    font-size: 0.7rem !important;
  }
  
  .btn:disabled {
    background: #dadce0;
    cursor: default;
  }
  
  .btn:hover:not(:disabled) {
    background: #1765cc;
  }
  
  .status {
    font-weight: 500;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 0.75rem;
    margin-left: 8px;
    color: #188038; /* green for stable */
  }
  
/* Footer */
  footer {
    max-width: 1200px;
    margin: 32px auto;
    padding: 16px 24px;
    font-size: 0.85rem;
    color: #5f6368;
    text-align: center;
  }
/* System Info formatting */
.sys-info {
    margin: 0;
    padding: 0;
  }
  
  .sys-info dt {
    font-weight: 500;
    color: #3c4043;
    margin-top: 5px;
    font-size: 0.75rem;
  }
  
  .sys-info dd {
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 8px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem;
    color: #202124;
  }
  
  /* Highlight values */
  .sys-info .value {
    color: #1a73e8;       /* Google blue */
    font-weight: 600;
    background: #e8f0fe;  /* light blue highlight */
    padding: 2px 4px;
    border-radius: 4px;
  }

.cred{
    color: red !important;
}      

.cgreen{
    color: green !important;
}   

.cgray{
  color: gray !important;
}   

.note-container {
  grid-area: note-grid;
  display: grid;
  column-gap: 1px;
  row-gap: 2px;
  grid-template-rows: 15px auto 25px;
  grid-template-columns: 1fr 50px;
  grid-template-areas:
      "note-top note-top"
      "main-note main-note"
      "note-controls note-controls";
  border: 1px solid #ccc;
  padding: 0.75rem;
  overflow: hidden;
  background: #f9f9f9;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f9fafb;
  box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}

.note-header {
  grid-area: note-top;
  align-content: flex-end;
  place-self: flex-end;
  padding: 0rem 0rem;
}
.note-title { margin: 0; font-size: 1rem; }
.note-progress { font-weight: 600; font-size: 0.875rem; color: rgb(84 124 255); }

.note-viewport {
  grid-area: main-note;
  overflow: hidden;
  padding: 0 0.75rem;
  margin-top: -50px;
}


.note-controls {
  grid-area: note-controls; 
  align-content: flex-end;
  place-self: flex-end;
  /* position: absolute; */
  /* bottom: 2%;
  right: 2%; */
}

.note-btn {
  padding: 0.35rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 0.75rem;
  color: rgb(84 124 255);
}

.note-btn:focus{
  outline: 1px solid #2563eb;
  outline-offset: 0px;
}

/* lay notes side by side */
/* smooth slide */
.note-track {
  display: flex;           
  transition: transform 0.5s ease; 
  height: 100%;
  will-change: transform;
}

/* each note takes full container width */
.note {
  min-width: 100%;         
  padding: 0.85rem; /*0.75rem;*/
  box-sizing: border-box;
  font-size: 0.75rem;
}

.note p { margin: 0.4rem 0; }
details { margin-top: 0.4rem; }
summary { cursor: pointer; 
  font-weight: 600; 
}

.foot-ol1{
  padding-left: 1rem;
  text-align: justify;
}
.foot-ol1 li{
  padding-bottom: 0.25rem;
}
.foot-sec1{
  place-items: center;
}
.teaser{
  border-left: 2px solid #4CAF50;
  padding-left: 0.25rem;
  /* padding-right: 50px; */
  margin-top: 15px;
  margin-left: 2px;
  background-color: rgb(255, 255, 255);
}

.teaser2{
  border-left: 2px solid #4CAF50;
  padding-left: 0.25rem;
  margin-top: 5px;
  margin-left: 2px;
  background-color: rgb(255, 255, 255);
}

.coverteaser{
  border-left: 1px solid #4CAF50;
  padding-left: 0.25rem;
  margin-top: 10px;
  margin-left: 0px;
  background-color: rgb(255, 255, 255);
  font-style: normal;
}

.boxeq{
  display: inline-block;
  border: 1px #ccc; 
  border-style: groove;
  margin: 5px 0;
}

.clist1{
  padding-left: 1rem;
  text-align: justify;
}

.cover{
  text-align: justify;
  /* padding: 6rem 2rem;
  margin-top: 2rem; */
}

.hero-banner {
  /* background: linear-gradient(135deg, #1a1f4d, #0f9ba8); */
  background: border-box;
  text-align: center;
  place-content: center;
  padding: 1rem 1rem;
  /* position: relative; */    
}

.hero-banner h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.hero-banner h2 {
  font-size: 1.8rem;
  font-weight: 400;
}

.hero-banner .highlight {
  color: #ffb347; /* accent highlight */
  font-weight: 600;
}

.hero-banner .tagline {
  margin-top: 1rem;
  font-size: 1.2rem;
  opacity: 0.9;
}
.hero-content{
margin-top : -1.75rem !important;
}
.tagline{
margin-top: -0.5rem !important;
}
/* .cta-buttons {
  margin-top: 2rem;
}

.btn {
  padding: 0.8rem 1.5rem;
  margin: 0 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.btn.primary {
  background: #ffb347;
  color: #1a1f4d;
}

.btn.secondary {
  border: 2px solid #fff;
  color: #fff;
} */

/* TOC container */
#toc {
  background: #f9f9f9;
  border: 1px solid #ddd;
  padding: 1rem;
  /* max-width: 280px; */
  font-family: system-ui, sans-serif;
  /* font-size: 0.95rem; */
  /* line-height: 1.4;
  border-radius: 6px;
  position: sticky; /* stays visible while scrolling */
  /* top: 1rem;  */
}

/* TOC heading */
#toc::before {
  content: "Contents";
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #333;
}

/* TOC list */
#toc ul {
  list-style: decimal;
  margin: 0;
  padding: 0;
}

/* TOC items */
#toc li {
  margin: 0.25rem 0;
}

/* TOC links */
#toc a {
  text-decoration: none;
  color: #0366d6;
  padding: 0.2rem 0.4rem;
  display: block;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

/* Hover/active states */
#toc a:hover {
  background: #e6f0ff;
  color: #024ea2;
}

/* Indentation for nested levels */
#toc li {
  margin-left: 0px;
}
#toc li[data-level="2"] { margin-left: 0px; }
#toc li[data-level="3"] { margin-left: 0px; }
#toc li[data-level="4"] { margin-left: 0px !important; }

/*mathjax*/
.mathjax-hidden { visibility: hidden; }

/*audio*/

.audioleg {
  font-family: cursive;
  font-size: 8px;
  font-weight: bold;
  padding: 0 10px;
}
.audioel {
  width: 70%;
  height: 20px;
}
.audiofield {
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
  text-align: center;
  margin-top: -10px;
}

.no-underline {
  text-decoration: none;
}