/* =========================
   THEME VARIABLES
   ========================= */
:root {
  /* Panel Loader theme vars (LIGHT defaults) */
  --insert-heading: #fff44f;
  --internal: #FB2C36;

  /* Global palette you were using */
  --light1: #fff; --dark1: #000; --dark2: #2d2d2d; --dark3: #424949;
  --blue1: #003366; --blue2: #0067a5; --blue3: #4997d0; --blue4: #98AFC7;
  --green0: #003300; --green1: #186a3b; --green2: #27ae60; --green3: #C4D600;
  --orange1: #ff4500; --orange2: #ffa500; --coral1: #FF7F50; --red1: #C0392B; --red2: #943126;
  --yellow1: #F4D03F; --yellow2: #fff44f; --yellow3: #e8f48c; --yellow4: #f4d03f;
  --cyan1: #b9dcd2; --gray1: #53565A; --gray2: #aaa; --gray3: #e5e4e2;
  --olive0: #336600; --olive1: #558b2f; --olive2: #669933; --purple1: #af7ac5;

  --text-shadow-light: #fff 1px 1px 1px; --text-shadow-dark: #000 1px 1px 1px;
}

/* Auto dark (when user hasn't set a manual theme) */
@media (prefers-color-scheme: dark) {
  :root {
    --pl-bg: #0f0f10;
    --pl-fg: #ffffff;
  }
}

:root[data-theme="dark"] {
  --pl-bg: #00853E; 
  --pl-fg: #FFF;
  --pl-text-shadow: #000 1px 1px 1px;
  --pl-fg-hover: #53EAFD;
  --pl-fg-active: #FF5722;
  --pl-modal-bg: #2E7D32;
  --pl-modal-fg: #FAFAFA;
  --pl-modal-text-shadow: #000 1px 1px 1px;

  --panel-bg: #90A1B9;

  --pl-item-bg: #546E7A; 
  --pl-item-bg-hover: #FFF176; 
  --pl-item-bg-active: #FF5722;
  --pl-item-fg: #fff; 
  --pl-item-fg-hover: #000; 
  --pl-item-fg-active: #FFF; 
  --pl-item-text-shadow: #000 1px 1px 1px;
  --pl-item-text-shadow-fg-hover: #fff 1px 1px 1px;
  --pl-item-text-shadow-fg-active: #000 1px 1px 1px;
  
  --pl-item-brd: rgba(255,255,255,0.25);
  --pl-backdrop: rgba(0,0,0,0.55);
  --pl-modal-fg-shadow: #000 1px 1px 1px;

  --pl-text-shadow-fg-hover: #000 1px 1px 1px;
  --pl-text-shadow-fg-active: #000 1px 1px 1px;
  --pl-theme-toggle-bg: #FFF;
  --pl-theme-toggle-fg: #FFA000;
  --pl-theme-toggle-brd: #99A3A4;
  --pl-theme-toggle-box: rgba(0,0,0,0.25);
  --pl-theme-toggle-hover: #5D6D7E;
  --pl-theme-toggle-fg-active: #FFF176;
  --pl-theme-toggle-active: #FF5722;
}

/* Manual override via data-theme (set by JS) */
:root[data-theme="light"] {
  --pl-bg: #FFF;
  --pl-fg: #00853E;    
  --pl-text-shadow: #FFF 1px 1px 1px;
  --pl-fg-hover: #53EAFD;
  --pl-fg-active: #FB2C36;
  --pl-modal-bg: #EEE;
  --pl-modal-fg: #424242;
  --pl-modal-text-shadow: #FFF 1px 1px 1px;

  --panel-bg: #90A1B9;

  --pl-item-bg: #546E7A; /*#90A1B9; */
  --pl-item-bg-hover: #FFF176; /* #42D3F2; */
  --pl-item-bg-active: #FB2C36;
  --pl-item-fg: #fff; /*#90A1B9; */
  --pl-item-fg-hover: #000; /*#90A1B9; */
  --pl-item-fg-active: #FFF; /*#90A1B9; */
  --pl-item-text-shadow: #000 1px 1px 1px;
  --pl-item-text-shadow-fg-hover: #fff 1px 1px 1px;
  --pl-item-text-shadow-fg-active: #000 1px 1px 1px;
  
  --pl-item-brd: rgba(255,255,255,0.25);
  --pl-backdrop: rgba(0,0,0,0.55);
  --pl-modal-fg-shadow: #000 1px 1px 1px;

  --pl-text-shadow-fg-hover: #000 1px 1px 1px;
  --pl-text-shadow-fg-active: #000 1px 1px 1px;
  --pl-theme-toggle-bg: #000;
  --pl-theme-toggle-fg: #FFA000;
  --pl-theme-toggle-brd: #99A3A4;
  --pl-theme-toggle-box: rgba(0,0,0,0.25);
  --pl-theme-toggle-hover: #5D6D7E;
  --pl-theme-toggle-fg-active: #FFF176;
  --pl-theme-toggle-active: #FF5722;
}

:root, [data-theme] { color-scheme: dark light; }

/* =========================
   PAGE BASICS
   ========================= */
html, body {
  background-color: var(--pl-bg);
  color: var(--pl-fg);
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  margin: 0;
  padding: 0;
  height: auto;
}

body { display: block; width: 100%; max-width: none; overflow-y: auto; overflow-x: hidden; -webkit-font-smoothing: auto; -webkit-text-size-adjust: 100%; 
  -moz-osx-font-smoothing: auto; font-optical-sizing: auto; font-style: normal; }

.container {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  box-sizing: border-box; margin: auto; width: 90%; 
  height: auto;              /* was: height: 100% (or 100vh in older versions) */
  min-height: 100vh;         /* keep full-viewport minimum without forcing a cap */
  
  }

/* Panel grid root */
#panel {
  --col-gap: 1rem;
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;
  gap: 1rem var(--col-gap); box-sizing: border-box; width: 100%; margin: 2rem 0;
}

/* =========================
   PANEL CARDS
   ========================= */
.panel_container {
  display: flex;
  flex: 0 0 calc((100% - (9 * var(--col-gap))) / 10);
  width: calc((100% - (9 * var(--col-gap))) / 10);
  max-width: calc((100% - (9 * var(--col-gap))) / 10);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 0; margin: 0; gap: .5rem 0; box-sizing: border-box; color: var(--pl-fg);
  z-index: 1;
  min-width: 0; /* allow children to shrink */
}

/* Phones */
@media (max-width: 599.98px) {
  .panel_container {
    /* 2 columns → 1 gap across the row */
    flex: 0 0 calc((100% - (1 * var(--col-gap))) / 2);
    max-width: calc((100% - (1 * var(--col-gap))) / 2);
    min-width: 0; /* keep text from overflowing */
  }
}

/* Tablets (all iPads + most Android tablets) */
@media (min-width: 600px) and (max-width: 1400px) {
  .panel_container {
    /* 5 columns → 4 gaps across the row */
    flex: 0 0 calc((100% - (4 * var(--col-gap))) / 5);
    max-width: calc((100% - (4 * var(--col-gap))) / 5);
    min-width: 0;
  }
}

/* Large screens remain at your current 10 columns (no change needed) */

.panel_image_container {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 1rem 1rem; margin: 0; border-radius: 10px;
  background-color: var(--panel-bg); color: var(--panel-fg); text-shadow: var(--pl-modal-fg-shadow); 
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; cursor: pointer;
}
.panel_image_container:hover { background-color: var(--pl-fg-hover); }
.panel_image_container:active { background-color: var(--pl-fg-active); }
/* link-mode keeps appearance */
.panel_image_container a { display: inline-block; }

.panel_image {
  display: block;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 10px; background-clip: padding-box;
}

.panel_name_container {
  text-align: center; width: 100%; max-width: 100%; margin: .25rem auto .5rem;
  min-width: 0;
}
.panel_name {
  margin: 0;
  /* Responsive, won’t overflow */
  font-size: clamp(0.75rem, 0.9vw + 0.5rem, .85rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  text-shadow: var(--pl-text-shadow);
  font-weight: 400;
}

/* =========================
   MODAL
   ========================= */
.panel_modal-backdrop {
  position: fixed; inset: 0; background: var(--pl-backdrop);
  z-index: 9998; opacity: 0; transition: opacity 180ms ease-out;
}
.panel_modal-backdrop--visible { opacity: 1; }

/* BEFORE
.panel_modal {
  position: fixed;
  z-index: 9999;
  background: var(--pl-modal-bg);
  color: var(--pl-modal-fg);
  border-radius: 12px;
  overflow: auto;                 <-- change this
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
  border: 1px solid var(--pl-item-brd);
}
*/

/* AFTER */
.panel_modal {
  position: fixed;
  z-index: 9999;
  background: var(--pl-modal-bg);
  color: var(--pl-modal-fg);
  text-shadow: var(--pl-modal-text-shadow);
  border-radius: 12px;
  /* key changes ↓ */
  display: flex;
  flex-direction: column;
  overflow: hidden;               /* was: auto */
  /* keep your existing styles */
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
  border: 1px solid var(--pl-item-brd);
  border-top: none;  
}


/* Add or augment this block */
.panel_modal-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-sizing: border-box;
  padding: 0 1rem 1rem 1rem;

  /* key additions ↓ */
  flex: 1 1 auto;   /* fill the modal */
  overflow: auto;   /* the content scrolls */
  min-height: 0;    /* prevents flex overflow clipping in some browsers */
}

/* Keep your existing sticky header; no change needed */
.panel_modal-header {
  padding: 0.5rem 0rem 0.25rem 0;      /* ensure the header itself has space */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pl-modal-bg);
  border-top: 1px solid var(--pl-item-brd); /* header draws the top line */
  box-sizing: border-box;
  width: 100%; max-width: 100%;

  }

.panel_modal-header h1,
.panel_modal-header h2,
.panel_modal-header h3,
.panel_modal-header h4,
.panel_modal-header h5,
.panel_modal-header h6 {
  margin: 0;
  padding: 0;
}

.panel_modal-title {
  margin: 0;                 /* make sure no margin leaks in */
  padding: 0.5rem 1rem;      /* controlled spacing inside header */
  border-top: none;   
  font-weight: 700;
  font-size: clamp(1.1rem, 1.8vw + 0.6rem, 1.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.model_close {
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  padding: 0.15rem 0.65rem 0.15rem 0.55rem;
  background: var(--red1);
  color: var(--light1);

  /* Responsive font size */
  font-size: clamp(1.25rem, 1.5vw + 0.5rem, 2rem);
  line-height: 1;
  text-shadow: var(--text-shadow-dark);
}

.model_close:hover { background: var(--yellow4); color: var(--dark1); text-shadow: var(--text-shadow-light); }

/* Modal items grid */
.panel_modal-items {
  display: grid; grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0;
}
@media (min-width: 640px) { .panel_modal-items { grid-template-columns: 1fr 1fr; } .panel_modal {width: 900%; max-width: 90%;}}
@media (min-width: 960px) { .panel_modal-items { grid-template-columns: 1fr 1fr 1fr;} panel_modal {width: 900%; max-width: 90%;}}

/* =========================
   CLONE TILES (LINK ITEMS)
   ========================= */
.item_clone {
  background: var(--pl-item-bg);
  color:  var(--pl-item-fg);
  border: 1px solid var(--pl-item-brd);
  border-radius: 10px; overflow: hidden; transition: transform 120ms ease;
  text-shadow: var(--pl-item-text-shadow); font-weight: 400; font-size: 1rem;
}
.item_clone:hover { background: var(--pl-item-bg-hover); color: var(--pl-item-fg-hover); text-shadow: var(--pl-item-text-shadow-fg-hover)}
.item_clone:active { background: var(--pl-item-bg-active); color: var(--pl-item-fg-active); text-shadow: var(--pl-item-text-shadow-fg-active)}

.item_clone a { display: block; text-decoration: none; color: inherit; padding: 0.75rem; }
.item_url { display: block; }
.item_name {
  font-weight: 600;
  word-break: break-word;

  /* Responsive text size, matches .panel_name style */
  font-size: clamp(0.75rem, 0.9vw + 0.5rem, .85rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Headings/paras inside inserts: tidy margins */
.panel_modal-items h1,
.panel_modal-items h2,
.panel_modal-items h3,
.panel_modal-items h4,
.panel_modal-items h5,
.panel_modal-items h6 { line-height: 1; margin: .25rem 0; padding: 0; }
.panel_modal-items p { line-height: 1; margin: .5rem 0 .5rem 0; padding: 0; }
.panel_modal-items hr { line-height: 1; margin: .5rem 0 0 0; padding: 0; }

/* =========================
   INSERT BLOCKS
   ========================= */
/* Full-row wrapper for both <INSERT> and <INSERT-INLINE> */
.item_insert {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 100%;
  background: transparent; border: none; padding: 0; margin: 0;
}
/* Inline variant: children side-by-side inside this full row */
.item_insert-inline {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
/* Optional helpers for your content tags */
.item_insert .standard { color: var(--insert-heading); }
.item_insert .internal { color: var(--internal); }
.item_insert .heavy    { font-weight: 600; }

/* =========================
   THEME TOGGLE BUTTON
   ========================= */
.pl-theme-toggle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 10010;
  padding: 0.6rem;
  border-radius: 999px;
  font-size: 1.25rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  border: 1px solid var(--pl-theme-toggle-brd);
  background: var(--pl-theme-toggle-bg);
  color: var(--pl-theme-toggle-fg);
  box-shadow: 0 4px 18px var(--pl-theme-toggle-box); 

}
/* Icon control */
/* Default (no data-theme set yet) – assume we'll switch to dark */
/* Default: assume dark is active → show sun (tap = go light) */
.pl-theme-toggle::before {
  display: inline-block;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  content: "🔆︎";
  color: var(--pl-theme-toggle-fg);
}

/* When LIGHT is active → show moon (tap = go dark) */
:root[data-theme="light"] .pl-theme-toggle::before {
  content: "🔆︎";
  color: var(--pl-theme-toggle-fg);
}

/* When we're in DARK mode: show SUN (click → light) */
:root[data-theme="dark"] .pl-theme-toggle::before {
  content: "🔆︎";
  color: var(--pl-theme-toggle-fg);
}

.pl-theme-toggle:hover { background: var(--pl-theme-toggle-hover); }
.pl-theme-toggle:active { background: var(--pl-theme-toggle-active); color: var(--pl-theme-toggle-fg-active); }
/*{ filter: brightness(1.05); }*/