/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles */
  .modal-content {
    /* Prevent iOS chrome from hiding */
    max-height: 100vh;
    max-height: -webkit-fill-available;
  }
  
  .modal-content.fullscreen {
    height: 100vh;
    height: -webkit-fill-available;
    position: fixed;
  }
  
  .canvas-viewport {
    /* Fix iOS rendering issues */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .sketch-canvas,
  .upper-canvas,
  .lower-canvas {
    /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}/* ========== DESIGN TOKENS & CONTROL VARIABLES ========== */
:root{
  --bg-img: none;
  --bg-col: #fff;
  --txt: #000;
  --h1: #ff0000;
  --h1-shadow: #ffff00;
  --link: #00f;
  --visited: #808;

  --section-border: #00f;
  --card-border: #008;
  --card-bg: #ffffe8;

  --aside-bg: #f5f5f5;
  --nav-bg: #e0e0e0;
  --footer-bg: #e4e4e4;

  --uc-bg: #fff0f0;
  --uc-border: #f00;
  --passage-bg: #fff;

  /* Whiteboard control bar variables */
  --controls-gap: 0.5rem;
  --controls-padding-y: 10px;
  --slider-track-width: 4rem;
  --slider-track-height: 6px;
  
  /* Modal dimensions */
  --modal-header-height: 52px;
  
  /* iOS status bar */
  --apple-status-bar: default;
  
  /* Safe area insets for iOS */
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
}
html.theme-dark{
  --bg-img: none;
  --bg-col: #000;
  --txt: #e0e0e0;
  --h1: #ff7373;
  --h1-shadow: #ff0000;
  --link: #5ab9ff;
  --visited: #c78bff;

  --section-border: #5ab9ff;
  --card-border: #5ab9ff;
  --card-bg: #111;

  --aside-bg: #1a1a1a;
  --nav-bg: #1f1f1f;
  --footer-bg: #1a1a1a;

  --uc-bg: #330000;
  --uc-border: #ff7373;
  --passage-bg: #111;
  
  /* iOS status bar */
  --apple-status-bar: black;
}

/* ===== MOBILE TOUCH & ZOOM FIXES ===== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection in articles */
article.markdown-body,
article.markdown-body p,
article.markdown-body h1,
article.markdown-body h2,
article.markdown-body h3,
article.markdown-body h4,
article.markdown-body h5,
article.markdown-body h6,
article.markdown-body li,
article.markdown-body blockquote {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

/* Fix MathJax zoom issues */
.MathJax_Display,
mjx-container[jax="CHTML"][display="true"],
mjx-container:not([display="true"]) {
  touch-action: manipulation !important;
  /* pointer-events: none; */
  -webkit-user-select: none;
  user-select: none;
}

.MathJax_Display *,
mjx-container[jax="CHTML"][display="true"] *,
mjx-container:not([display="true"]) * {
  pointer-events: auto;
  touch-action: manipulation !important;
}

/* Images */
article.markdown-body img {
  touch-action: manipulation;
  pointer-events: none;
}

/* Interactive elements */
a, button, input, textarea, select,
.float-btn, .sketch-controls button,
details summary {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  min-height: 44px;
  min-width: 44px;
}

/* Global box sizing for more predictable layouts */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body { 
  height: 100%;
  margin: 0;
  padding: 0;
}

/* iOS status bar fix */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  body {
    /* Add padding for safe area at the top */
    padding-top: env(safe-area-inset-top, 0);
    /* Ensure body background extends properly */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  body.article {
    /* Make sure article body doesn't have a blue background near status bar */
    padding-top: max(env(safe-area-inset-top, 20px), 20px);
  }
  
  /* Ensure main content starts below the status bar */
  main.content {
    margin-top: 10px;
  }
  
  /* Enhanced iOS touch fixes */
  * {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Re-enable for text content */
  article.markdown-body {
    -webkit-touch-callout: default;
  }
}

/* ========== GLOBAL ========== */
body {
  background: var(--bg-img) repeat, var(--bg-col);
  color: var(--txt);
  font-family:
      "Comic Sans MS",
      "Comic Sans",
      "Comic Neue",
      "Trebuchet MS",
      Tahoma,
      sans-serif;
  text-align: center;
  transition: background-color .25s ease, color .25s ease;
  overflow-x: hidden; /* Prevent horizontal scrollbar */
}

a { color: var(--link); transition: color .15s ease, background-color .15s ease; }
a:visited { color: var(--visited); }
a:hover { background: var(--h1-shadow); }

h1 {
  margin: .5em 0;
  font-size: 2.5rem;
  color: var(--h1);
  text-shadow: 2px 2px 0 var(--h1-shadow);
  transition: color .25s ease, text-shadow .25s ease;
}
h2 {
  margin: 0 0 .5em;
  font-size: 1.5rem;
  color: var(--link);
  transition: color .25s ease;
}

/* ========== LAYOUT ========== */
#wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: left;
  /* max-width: 800px; */
}

/* ARTICLE CONTENT CONTAINER - Match wrapper styling */
main.content {
  width: 70%; /* Match landing page wrapper width */
  margin: 1rem auto;
  /* max-width: 800px; */
}

/* ========== COLLAPSIBLE SECTIONS ========== */
details.section {
  margin: 1rem 0;
  border: 3px double var(--section-border);
  background: var(--passage-bg);
  padding: 1rem;
  transition: background-color .25s ease, border-color .25s ease;
}
details.section summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--link);
  font-size: 1.25rem;
  padding: .5rem 0;
  transition: color .25s ease;
}
details.section summary::-webkit-details-marker { display: none; }
details.section summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .2s;
}
details.section[open] summary::before { transform: rotate(90deg); }
details.section > div { margin-top: 1rem; }

/* ========== CARD ========== */
.card {
  border: 2px ridge var(--card-border);
  background: var(--card-bg);
  padding: 1rem;
  margin: 1rem 0;
  transition: background-color .25s ease, border-color .25s ease;
}
.card h3 { margin-top: 0; color: var(--card-border); transition: color .25s ease; }

/* ========== UNDER CONSTRUCTION ========== */
.uc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .6rem 1rem;
  font-weight: bold;
  font-size: .95rem;
  border: 3px dashed var(--uc-border);
  background: var(--uc-bg);
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color .15s ease, border-color .15s ease;
}
.uc img { flex: 0 0 auto; }
.uc:hover { background: var(--uc-bg); cursor: default; }

/* ========== BLOCKQUOTE ========== */
blockquote {
  margin: 1rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--section-border);
  font-style: italic;
  transition: border-color .25s ease;
}
.attribution {
  text-align: right;
  font-style: normal;
  margin-top: 1rem;
  color: var(--visited);
  transition: color .25s ease;
}

/* ========== MOOD BOARD ========== */
.mood-item {
  border: 2px ridge var(--card-border);
  background: var(--card-bg);
  padding: 1rem;
  margin: 1.5rem 0;
  text-align: left;
  transition: background-color .25s ease, border-color .25s ease;
}
.mood-item h3 { margin-top: 0; color: var(--card-border); font-size: 1.1rem; transition: color .25s ease; }
.mood-image { text-align: center; padding: 1rem; }
.mood-image img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--section-border);
  display: block;
  margin: 0 auto;
  transition: border-color .25s ease;
}

/* ========== MOOD BOARD – Scrollable long posts ========== */
.scroll-pane {
  max-height: 400px;            /* adjust window height */
  overflow-y: auto;
  border-left: 4px solid var(--card-border);   /* matches cards */
  padding-left: 0.75rem;
  margin: 0.5rem 0 1.25rem;
  transition: border-color .25s ease;
}

/* optional: nicer dark-mode scrollbar (WebKit/Blink) */
html.theme-dark .scroll-pane::-webkit-scrollbar {
  width: 8px;
}
html.theme-dark .scroll-pane::-webkit-scrollbar-track {
  background: #111;
}
html.theme-dark .scroll-pane::-webkit-scrollbar-thumb {
  background: #555;
}

/* ========== WHITEBOARD MODAL ========== */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  touch-action: none; /* Prevent scrolling when modal is open */
  /* Prevent iOS rubber-band scrolling */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
  /* Optimize rendering */
  will-change: opacity;
  contain: layout style paint;
}

.modal-content {
  background-color: var(--card-bg);
  position: fixed;
  border: 3px double var(--section-border);
  width: 90%;
  max-width: 1200px;
  height: 80%;
  max-height: 800px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  touch-action: none;
  transition: width 0.2s ease-out, height 0.2s ease-out, max-width 0.2s ease-out, max-height 0.2s ease-out, background-color .25s ease, border-color .25s ease;
}

/* iOS-specific modal fixes */
@supports (-webkit-touch-callout: none) {
  .modal-content {
    /* Account for safe areas on all sides */
    width: calc(90% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
    height: calc(80% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
  }
}

.modal-content.fullscreen {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  transform: none;
  border: none;
  border-radius: 0;
}

.modal-header {
  height: var(--modal-header-height);
  padding: 10px;
  background: var(--nav-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid var(--section-border);
  user-select: none;
  position: relative;
  transition: background-color .25s ease, border-color .25s ease;
}
.modal-header h2 { margin: 0; font-size: 1.2rem; text-align: center; }

.window-controls {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 10px;
}
.window-controls button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--txt);
  padding: 0 5px;
  min-width: 30px;
  min-height: 30px;
}
.window-controls button:hover { color: var(--link); }

.modal-body {
  padding: 10px;
  height: calc(100% - var(--modal-header-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ========== WHITEBOARD CANVAS CONTAINER ========== */
.sketch-container {
  text-align: center;
  user-select: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Canvas viewport - Updated for better iOS handling */
.canvas-viewport {
  flex: 1;
  position: relative;
  border: 2px solid var(--section-border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  /* Prevent iOS bounce and ensure touch events work */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  /* Optimize rendering */
  contain: strict;
  /* Ensure the viewport respects its boundaries */
  isolation: isolate;
  transition: background-color .25s ease, border-color .25s ease;
}

.theme-dark .canvas-viewport {
  background: #222;
}

/* Canvas element */
.sketch-canvas {
  display: block;
  cursor: crosshair;
  position: relative;
  /* iOS touch handling */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  /* Performance optimizations */
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Ensure canvas doesn't overflow */
  max-width: 100%;
  max-height: 100%;
}

/* Fabric.js canvas wrapper styles */
.canvas-container {
  position: relative !important;
  display: block !important;
  margin: 0 auto;
  /* GPU acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Ensure container respects viewport bounds */
  max-width: 100%;
  max-height: 100%;
}

/* Fabric.js canvas elements */
.canvas-container canvas {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  /* Optimize rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Ensure canvases don't exceed container */
  max-width: 100%;
  max-height: 100%;
}

/* Upper canvas (drawing layer) should be on top */
.upper-canvas {
  z-index: 2;
  cursor: crosshair !important;
}

/* Lower canvas (objects layer) */
.lower-canvas {
  z-index: 1;
}

/* ========== WHITEBOARD CONTROLS ========== */
.sketch-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--controls-gap);
  flex-wrap: wrap;
  padding: var(--controls-padding-y) 0;
  min-height: 50px;
  position: relative;
}

/* Slider group positioning */
.slider-group {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

#strokeSizeSlider {
  width: var(--slider-track-width);
  height: var(--slider-track-height);
  cursor: ew-resize;
}

/* Control buttons */
.sketch-controls button {
  padding: 0.3rem 0.8rem;
  border: 2px outset #c0c0c0;
  background: var(--nav-bg);
  font-family: inherit;
  cursor: pointer;
  font-weight: bold;
  min-width: 44px;
  min-height: 35px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sketch-controls button:hover {
  background: var(--card-bg);
}

.sketch-controls button:active {
  border-style: inset;
}

/* Color buttons */
.color-btn {
  width: 35px;
  height: 35px;
  padding: 0 !important;
  border: 2px outset #c0c0c0;
  border-radius: 4px;
}

.color-btn.active {
  border-style: inset;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
}

/* White color button - special border for visibility */
.color-btn[data-color="#ffffff"] {
  border-color: #888;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}

/* Eraser button */
.eraser-btn {
  color: var(--txt);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.eraser-btn.active {
  background: var(--link) !important;
  color: white !important;
  border-style: inset;
}

/* Undo button */
#undoBtn {
  color: var(--txt);
  transition: color .15s ease;
}

/* ========== CODE MODAL ========== */
#codeArea {
  background: white;
  color: black;
  transition: background-color .25s ease, color .25s ease;
}

html.theme-dark #codeArea {
  background: #222;
  color: #e0e0e0;
}

/* ========== FOOTER ========== */
footer {
  margin-top: auto;
  border-top: 2px solid #000;
  padding: 1rem;
  font-size: .9rem;
  background: var(--footer-bg);
  transition: background-color .25s ease;
}

/* ========== FLOATING BUTTONS ========== */
.float-btn {
  position: fixed;
  bottom: 1rem;
  padding: .6rem 1.1rem;
  font-weight: bold;
  border: 2px outset #c0c0c0;
  background: var(--nav-bg);
  color: var(--txt);
  cursor: pointer;
  z-index: 900;
  font-size: 1.05rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.float-btn:hover {
  background-color: var(--bg-col);
  border-color: var(--link);
}

/* Menu button positioning */
#menuBtn,
#toggleDark,
#sketchBtn,
#codeBtn,
.back-btn { right: 1rem; }

/* Hide buttons by default */
#toggleDark,
#sketchBtn,
#codeBtn,
.back-btn {
  opacity: 0;
  transform: translateY(0);
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}

/* Show buttons when menu is open */
body.menu-open #toggleDark { transform: translateY(-4.4rem); opacity: 1; pointer-events: auto; }
body.menu-open #sketchBtn  { transform: translateY(-8.8rem); opacity: 1; pointer-events: auto; }
body.menu-open #codeBtn    { transform: translateY(-13.2rem); opacity: 1; pointer-events: auto; }
body.menu-open .back-btn   { transform: translateY(-4.4rem); opacity: 1; pointer-events: auto; }

/* Menu button rotation */
#menuBtn { right: 1rem; }
body.menu-open #menuBtn { transform: rotate(45deg); transition: transform .25s; }

/* ========== QUICK LINKS ========== */
.quick-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.quick-links a {
  padding: .5rem 1rem;
  border: 2px outset #c0c0c0;
  background: var(--nav-bg);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}

.quick-links a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: .9;
}

.quick-links a.uc {
  border: 3px dashed var(--uc-border);
  background: var(--uc-bg);
  transition: background-color .15s ease, border-color .15s ease;
}

.quick-links a.uc:hover { background: var(--uc-bg); }

/* ========== RESPONSIVE DESIGN ========== */
/* Tablet - Wider content on iPads */
@media (min-width: 769px) and (max-width: 1024px) {
  #wrapper,
  main.content {
    width: 85%;
  }
}

/* Mobile - Enhanced iOS handling */
@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  
  #wrapper,
  main.content {
    width: 95%;
  }
  
  /* Modal adjustments with safe area handling */
  .modal-content {
    width: 98%;
    height: 90%;
    /* Account for safe areas on mobile */
    width: calc(98% - var(--safe-area-inset-left) - var(--safe-area-inset-right));
    height: calc(90% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
  }
  
  /* Mood board */
  .mood-item,
  .mood-image {
    padding: 0.5rem;
  }
  
  .mood-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  
  /* Whiteboard controls */
  .sketch-controls {
    gap: 0.3rem;
    padding: var(--controls-padding-y) 5px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .sketch-controls button {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    min-height: 44px;
  }
  
  .color-btn {
    width: 36px;
    height: 36px;
  }
  
  /* Slider on mobile - move to its own row */
  .slider-group {
    position: static;
    transform: none;
    order: -1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  #strokeSizeSlider {
    width: 60%;
    max-width: 200px;
  }
  
  /* Better touch targets */
  .float-btn,
  .eraser-btn,
  #undoBtn {
    padding: 0.8rem 1.2rem;
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Prevent iOS zoom on inputs */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  textarea {
    font-size: 16px !important;
  }
  
  /* Math display */
  .MathJax_Display,
  mjx-container[jax="CHTML"][display="true"] {
    margin: 1em 0 !important;
    font-size: 0.9em !important;
  }
  
  /* Prevent horizontal scroll */
  article.markdown-body {
    overflow-x: hidden;
  }
  
  article.markdown-body table {
    font-size: 0.85em;
  }
}

/* ---- Phones in LANDSCAPE ------------------------------------ */
/* Treat short, touch devices like the portrait/mobile layout    */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
  /* reuse your portrait control‑bar layout */
  .sketch-controls {
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* put the slider on its own row so it never covers the colours */
  .slider-group {
    position: static;
    transform: none;
    order: -1;                 /* first row */
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }

  #strokeSizeSlider {
    width: 60%;
    max-width: 200px;
  }

  /* keep the white canvas border clear of the notch / home bar */
  /* .canvas-viewport {
    margin-left:  env(safe-area-inset-left);
    margin-right: env(safe-area-inset-right);
  } */
}

/* iOS specific fixes - Enhanced for orientation changes */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles */
  .modal-content {
    /* Prevent iOS chrome from hiding */
    height: 100vh;
    height: -webkit-fill-available;
  }
  
  /* Fullscreen modal on iOS */
  .modal-content.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    max-width: none !important;
    max-height: none !important;
    transform: none !important;
  }
  
  /* Canvas viewport iOS optimization */
  .canvas-viewport {
    /* Fix iOS rendering issues */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure proper sizing */
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  /* Force GPU acceleration for canvases */
  .sketch-canvas,
  .upper-canvas,
  .lower-canvas,
  .canvas-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000;
  }
  
  /* iOS landscape mode fixes */
  @media (orientation: landscape) {
    .modal-content {
      /* Account for notch and safe areas in landscape */
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

/* ========== PAGE LAYOUT - Footer at bottom ========== */
body {
  display: flex;
  flex-direction: column;
}

main.content,
#wrapper {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}