/* ===============================
   Pylite link styling
   =============================== */
.pylite-link{
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

.pylite-link:hover,
.pylite-link:focus{
  text-decoration: underline;
  opacity: 0.85;
}


/* ===============================
   Base / Layout
   =============================== */

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Editor shell */
.editor-container {
  display: flex;
  align-items: stretch;

  /* VS Code–style monospace stack */
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.4;

  border: 1px solid #ccc;
  resize: both;
  overflow: hidden;

  height: 250px;
  max-width: 100%;
  box-sizing: border-box;
}


/* MAX-visibility editor focus ring (still layout-safe) */
.editor-container:focus-within {
  border-color: rgba(51,118,206,0.95);

  box-shadow:
    /* crisp inner edge */
    inset 0 0 0 2px rgba(51,118,206,1.0),

    /* bright halo */
    inset 0 0 0 5px rgba(51,118,206,0.35),

    /* soft glow */
    inset 0 0 0 8px rgba(51,118,206,0.18);
}

body.dark-mode .editor-container:focus-within {
  border-color: rgba(120,180,255,1.0);

  box-shadow:
    inset 0 0 0 2px rgba(120,180,255,1.0),
    inset 0 0 0 5px rgba(120,180,255,0.40),
    inset 0 0 0 8px rgba(120,180,255,0.22);
}

/* Shared text metrics */
#gutter,
#code {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  padding: 6px 0;
}

/* ===============================
   Gutter (line numbers)
   =============================== */

#gutter {
  display: block;
  margin: 0;

  padding: 6px 8px;
  text-align: right;
  user-select: none;

  overflow: hidden;
  white-space: pre;

  position: relative; /* anchor the highlight bar */
  overscroll-behavior: none;
}

/* Extra scroll room so gutter matches textarea overscroll */
#gutter::after {
  content: "";
  display: block;
  height: 180px; /* must match #code padding-bottom */
}

/* Highlight bar (single moving line) */
#gutter_highlight {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;

  /* Put highlight behind the text */
  z-index: -1;
}

/* Light / dark highlight colors */
#gutter_highlight {
  background: rgba(0, 0, 0, 0.08);
}

body.dark-mode #gutter_highlight {
  background: rgba(255, 255, 255, 0.10);
}

/* ===============================
   Code (textarea)
   =============================== */

#code {
  display: block;
  margin: 0;

  padding: 6px 8px;
  padding-bottom: 180px; /* keep in sync with #gutter::after */
  border: none;
  outline: none;

  width: 100%;
  height: 100%;

  overflow: auto;
  white-space: pre;
  resize: none;

  box-sizing: border-box;

  /* execution-state border via inset shadow */
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow 0.12s ease;
}

/* ===============================
   Console Input
   =============================== */
.console-input {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.console-input input {
  flex: 1;
  font-family: monospace;
}

/* Hard guarantee: hidden means hidden */
#console_input_row[hidden] { 
  display: none !important; 
}


/* ===============================
   Output / Errors
   =============================== */

/* Output: shadow-based frame (matches #code model) */
#output_pre {
  background: #fdfdfd;
  padding: 10px;

  /* Match editor exactly */
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  font-size: 13px;
  line-height: 1.4;

  white-space: pre;
  height: 250px;
  overflow: auto;

  resize: both;
  box-sizing: border-box;
  max-width: 100%;
}

/* Errors: keep the normal bordered panel */
#errors_pre {
  background: #fdfdfd;
  border: 1px solid #ccc;
  padding: 10px;

  /* Match editor exactly */
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Monaco,
               Consolas, "Liberation Mono", "Courier New", monospace;

  font-size: 13px;
  line-height: 1.4;

  white-space: pre;
  height: 250px;
  overflow: auto;

  resize: both;
  box-sizing: border-box;
  max-width: 100%;
}


/* Errors (light mode accent) */
#errors_pre {
  background: #fff8f8;
  border-color: #e0b4b4;
}

/* Hide Errors pane unless a run-error state is active */
#errors_pre[hidden] {
  display: none !important;
}

/* Optional: collapse the "Errors" header when hidden */
#errors_section[hidden] {
  display: none !important;
}



/* ===============================
   Wrap toggle button
   =============================== */

.wrap-btn {
  color: #aaa;              /* off */
  opacity: 0.7;
  background: none;
  border: 1px solid transparent;
  font-size: 16px;
  line-height: 1;
}

/* active = wrap ON */
.wrap-btn.on {
  color: #3376CE;           /* VS Code blue */
  opacity: 1;
  background: rgba(51,118,206,0.15);
  border-color: rgba(51,118,206,0.35);
  border-radius: 6px;
}

/* hover polish */
.wrap-btn:hover {
  background: rgba(51,118,206,0.08);
}

/* ===============================
   Ask-AI icon button
   =============================== */

.ask-btn {
  background: none !important;
  border: 1px solid transparent;
  padding: 3px 8px;      /* match wrap icon size */
  font-size: 16px;
  line-height: 1;
  opacity: 0.85;
}

/* Hover polish */
.ask-btn:hover {
  background: rgba(51,118,206,0.08);
  border-color: rgba(51,118,206,0.20);
  opacity: 1;
}

/* Keyboard focus */
.ask-btn:focus-visible {
  outline: 1px solid rgba(51,118,206,0.6);
  outline-offset: 2px;
}

/* Dark mode tweak */
body.dark-mode .ask-btn:hover {
  background: rgba(120,180,255,0.22);
}


/* ===============================
   Clear output icon button
   =============================== */

.clear-btn {
  background: none !important;
  border: 1px solid transparent;
  padding: 3px 8px;
  font-size: 16px;
  line-height: 1;
  opacity: 0.8;
}

/* Hover */
.clear-btn:hover {
  background: rgba(51,118,206,0.08);
  border-color: rgba(51,118,206,0.20);
  opacity: 1;
}

/* Keyboard focus */
.clear-btn:focus-visible {
  outline: 1px solid rgba(51,118,206,0.6);
  outline-offset: 2px;
}

/* Dark mode tweak */
body.dark-mode .clear-btn:hover {
  background: rgba(120,180,255,0.22);
}

/* ===============================
   ANSI colors
   =============================== */

.ansi-bold { font-weight: 700; }

.ansi-black { color: #000; }
.ansi-red { color: #c00; }
.ansi-green { color: #0a0; }
.ansi-yellow { color: #aa0; }
.ansi-blue { color: #06c; }
.ansi-magenta { color: #a0a; }
.ansi-cyan { color: #0aa; }
.ansi-white { color: #ddd; }

.ansi-bright-black { color: #666; }
.ansi-bright-red { color: #f55; }
.ansi-bright-green { color: #5f5; }
.ansi-bright-yellow { color: #ff5; }
.ansi-bright-blue { color: #5af; }
.ansi-bright-magenta { color: #f5f; }
.ansi-bright-cyan { color: #5ff; }
.ansi-bright-white { color: #fff; }

/* ===============================
   Buttons (shared)
   =============================== */

:root {
  /* VS Code–style blues */
  --btn-blue:        #0E639C;
  --btn-blue-hover:  #1177BB;
  --btn-blue-active: #094771;

  /* Softer toolbar blue */
  --btn-blue-soft:        #2B5F8A;
  --btn-blue-soft-hover:  #3576AD;
}

button {
  background: var(--btn-blue);
  color: #fff;

  font-weight: 500;
  font-size: 13px;

  padding: 4px 14px;
  border-radius: 3px;

  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: none;

  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

button:hover {
  background: var(--btn-blue-hover);
  border-color: rgba(255,255,255,0.16);
}

button:active {
  background: var(--btn-blue-active);
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* VS Code-like focus ring */
button:focus-visible {
  outline: 1px solid rgba(255,255,255,0.35);
  outline-offset: 2px;
}

/* Small / toolbar buttons */
button.btn-small {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  margin-left: 10px;

  background: var(--btn-blue-soft);
  border: 1px solid rgba(255,255,255,0.10);
}

button.btn-small:hover {
  background: var(--btn-blue-soft-hover);
  border-color: rgba(255,255,255,0.16);
}

#share_row button.icon-only {
    width: 30px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#share_row button.icon-only .share-icon{
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Make icon-only buttons truly icon-only (override btn-small padding/line box) */
#share_row button.btn-small.icon-only{
  padding: 0 !important;         /* overrides button.btn-small padding */
  box-sizing: border-box;
  line-height: 0;                 /* prevents baseline weirdness */
  vertical-align: middle;         /* keeps it aligned with neighbor buttons */
}

/* Force the SVG to the intended size */
#share_row button.btn-small.icon-only svg.share-icon{
  width: 24px !important;
  height: 24px !important;
  display: block;                 /* avoids inline SVG baseline issues */
}

/* Share icon sizing (force it, even if other button rules interfere) */
#share.icon-only{
  padding: 0 !important;
  width: 36px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#share.icon-only svg.share-icon{
  width: 22px !important;
  height: 22px !important;
  display: block;
}


/* ============================
   Run Button Execution States
   ============================ */

.theme-toggle::before {
  content: "☀️";
  font-size: 1.3rem;
}

body.dark-mode .theme-toggle::before {
  content: "🌙";
}

button.theme-toggle {
  background: none;
  border: none;
  padding: 4px 6px;   /* keep a decent hit area */
  color: inherit;     /* optional: matches text color */
}
button.theme-toggle:hover {
  background: none;
}

button.run-running {
  background: #6b7280;
  border-color: #6b7280;
  color: #ffffff;
  cursor: wait;
  position: relative;
}

button.run-ok {
  background: #3fa76a;
  border-color: #3fa76a;
  color: #ffffff;
}

button.run-error {
  background: #d73a49;
  border-color: #d73a49;
  color: #ffffff;
}

button.run-running::after {
  content: " ⏳";
  font-size: 0.9em;
}

button.run-running:disabled {
  cursor: wait;
  opacity: 0.75;
}

button.btn-small.run-running { background: #6b7280; color:#fff; cursor: wait; }
button.btn-small.run-ok      { background: #3fa76a; color:#fff; }
button.btn-small.run-error   { background: #d73a49; color:#fff; }

button.btn-small.run-running:hover { background: #7b8190; }
button.btn-small.run-ok:hover      { background: #36b24d; }
button.btn-small.run-error:hover   { background: #e5535f; }


/* Wrap toggle: always a pill, with stronger contrast in both themes */
button.btn-small.wrap-btn {
  background: rgba(128,128,128,0.10);   /* OFF pill */
  border: 1px solid rgba(128,128,128,0.22);
  border-radius: 999px;                 /* pill */
  padding: 3px 10px;
  line-height: 1;
  font-size: 16px;
  color: rgba(255,255,255,0.78);        /* dark-mode default */
}

/* Light mode tweaks */
body:not(.dark-mode) button.btn-small.wrap-btn {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.72);
}

/* Hover */
button.btn-small.wrap-btn:hover {
  background: rgba(51,118,206,0.12);
  border-color: rgba(51,118,206,0.28);
}

/* ON state */
button.btn-small.wrap-btn.on {
  background: rgba(51,118,206,0.22);
  border-color: rgba(51,118,206,0.55);
  color: #cfe3ff;
}

/* Light mode ON */
body:not(.dark-mode) button.btn-small.wrap-btn.on {
  background: rgba(51,118,206,0.16);
  border-color: rgba(51,118,206,0.45);
  color: rgba(0,0,0,0.80);
}



/* Code container (execution border) */
#code.run-error   { box-shadow: inset 0 0 0 2px #d73a49; }
#code.run-ok      { box-shadow: inset 0 0 0 2px #3fa76a; }
#code.run-running { box-shadow: inset 0 0 0 2px #6b7280; }

#output_pre {
  border: 1px solid transparent;          /* keep layout stable */
  border-radius: 4px;
  padding: 8px;
  transition: box-shadow 0.12s ease;
  box-shadow: inset 0 0 0 2px #ccc;       /* light mode default */
}

body.dark-mode #output_pre {
  box-shadow: inset 0 0 0 2px #555;       /* dark mode default */
}

/* State colors (mirror #code.run-*) */
#output_pre.run-error   { box-shadow: inset 0 0 0 2px #d73a49; }
#output_pre.run-ok      { box-shadow: inset 0 0 0 2px #3fa76a; }
#output_pre.run-running { box-shadow: inset 0 0 0 2px #6b7280; }



/* ============================================
   Focus rings for code + output panes
   (non-destructive to run-* state borders)
   ============================================ */

/* Code editor focus */
#code:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),   /* blue outer focus ring */
    inset 0 0 0 2px transparent;      /* preserve base slot */
}

/* If a run-* class is present, keep its inset color */
#code.run-ok:focus-visible {
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #3fa76a;
}
#code.run-error:focus-visible {
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #d73a49;
}
#code.run-running:focus-visible {
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #6b7280;
}


/* Output pane focus */
#output_pre:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #ccc;
}

body.dark-mode #output_pre:focus {
  box-shadow:
    0 0 0 2px rgba(120,180,255,0.85),
    inset 0 0 0 2px #555;
}

/* Preserve state colors while focused */
#output_pre.run-ok:focus {
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #3fa76a;
}
#output_pre.run-error:focus {
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #d73a49;
}
#output_pre.run-running:focus {
  box-shadow:
    0 0 0 2px rgba(51,118,206,0.75),
    inset 0 0 0 2px #6b7280;
}




/* ===============================
   Tab spacing spinner (dark mode)
   =============================== */

body.dark-mode input[type="number"] {
  background: #1f1f1f;
  color: #d4d4d4;

  border: 1px solid #3c3c3c;
  border-radius: 3px;

  padding: 4px 6px;
  font-size: 12px;
  font-weight: 400;

  outline: none;
}

body.dark-mode input[type="number"]:hover {
  border-color: #4f4f4f;
}

body.dark-mode input[type="number"]:focus {
  border-color: #3376CE;
  box-shadow: 0 0 0 1px rgba(51,118,206,0.45);
}

body.dark-mode input[type="number"]:disabled {
  opacity: 0.5;
  background: #252526;
}

/* ===============================
   Section headers / toolbar
   =============================== */

header {
  height: 48px;   /* optional if you want fixed math */
}

main {
  padding-top: 48px;
}

.section-title {
  display: flex;
  align-items: center;
}

.title-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.toolbar-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.toolbar-spin {
  width: 56px;
}

/* Toolbar select sizing */
.toolbar-select {
  width: auto;        /* let browser size to selected option */
  min-width: 0;      /* allow shrinking */
  max-width: none;   /* prevent legacy clamping */
  height: 26px;
  font-size: 12px;
  font-weight: 400;
  flex: 0 0 auto;    /* don't let flexbox stretch or squeeze it */
} 

/* Dark mode: match the input[type="number"] look */
body.dark-mode select.toolbar-select {
  background: #1f1f1f;
  color: #d4d4d4;

  border: 1px solid #3c3c3c;
  border-radius: 3px;

  padding: 4px 28px 4px 6px;  /* room for native arrow */
  outline: none;
}

body.dark-mode select.toolbar-select:hover {
  border-color: #4f4f4f;
}

body.dark-mode select.toolbar-select:focus {
  border-color: #3376CE;
  box-shadow: 0 0 0 1px rgba(51,118,206,0.45);
}

body.dark-mode select.toolbar-select:disabled {
  opacity: 0.5;
  background: #252526;
}



/*===============================
   Top sticky header bar
   =============================== */

header {
  position: sticky;
  top: 0;
  z-index: 100;   /* above content, below popups */
  
  /* Visual backing so text stays readable while scrolling */
  backdrop-filter: blur(6px);
}

/* Theme-aware background so it looks like a real bar */
body.dark-mode header {
  background: rgba(20,20,20,0.92);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

body:not(.dark-mode) header {
  background: rgba(250,250,250,0.92);
  border-bottom: 1px solid rgba(0,0,0,0.12);
}


/*-=============================
   Bottom configuration bar
   =============================== */

.config-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(128,128,128,0.25);
  backdrop-filter: blur(6px);
}

/* Slightly different surface per theme */
body.dark-mode .config-bar {
  background: rgba(20,20,20,0.92);
}
body:not(.dark-mode) .config-bar {
  background: rgba(250,250,250,0.92);
}

.config-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.config-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* If your tab menu list is absolute-positioned, this helps anchor it nicely */
.config-bar .tabmenu {
  position: relative;
}

#share_row {
  flex: 1 1 auto;
  min-width: 0;
}

.config-group {
  margin-left: auto;
}


/* ===============================
   Undo / Redo icon buttons (toolbar)
   =============================== */

.undo-redo{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-btn{
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", sans-serif;

  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 3px;
  color: rgba(0,0,0,0.78);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body.dark-mode .icon-btn{
  background: #1f1f1f;
  border-color: #3c3c3c;
  color: #d4d4d4;
}


body.dark-mode .icon-btn{
  background: #1f1f1f;
  border-color: #3c3c3c;
  color: #d4d4d4;
}

.icon-btn:hover{
  background: rgba(51,118,206,0.12);
  border-color: rgba(51,118,206,0.28);
}

body.dark-mode .icon-btn:hover{
  background: rgba(120,180,255,0.22);
  border-color: rgba(120,180,255,0.35);
}

.icon-btn:active{
  transform: translateY(0.5px);
}

.icon-btn:focus-visible{
  outline: 1px solid rgba(51,118,206,0.6);
  outline-offset: 2px;
}



/* ===============================
   Tab menu (dropdown)
   =============================== */

.tabmenu { position: relative; display: inline-flex; }

.tabmenu-btn {
  height: 26px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.78);
}

body.dark-mode .tabmenu-btn {
  background: #1f1f1f;
  color: #d4d4d4;
  border: 1px solid #3c3c3c;
}

.tabmenu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 1000;
}

body.dark-mode .tabmenu-list {
  background: #1f1f1f;
  border-color: #3c3c3c;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.tabmenu-list button[role="menuitem"]{
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
}

.tabmenu-list button[role="menuitem"]:hover,
.tabmenu-list button[role="menuitem"]:focus{
  outline: none;
  background: rgba(51,118,206,0.12);
}

.tabmenu-sep{
  height: 1px;
  margin: 6px 4px;
  background: rgba(0,0,0,0.12);
}
body.dark-mode .tabmenu-sep{
  background: rgba(255,255,255,0.14);
}



/* ===============================
   Dark mode
   =============================== */

body.dark-mode {
  background: #111;
  color: #eee;
}

body.dark-mode .editor-container {
  border-color: #555;
}

body.dark-mode #gutter {
  background: #1e1e1e;
  color: #aaa;
  border-right: 1px solid #333;
}

body.dark-mode #code {
  background: #1e1e1e;
  color: #eee;
}

body.dark-mode #output_pre {
  background: #181818;
  color: #eee;
  border-color: #555;
}

body.dark-mode #errors_pre {
  background: #1a1414;
  color: #f2dede;
  border-color: #703030;
}


/* ===============================
   Language-specific styling
   =============================== */
.lang-menu {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: none;
  border: none;
  cursor: pointer;

  /* size tuning */
  font-size: 0.85rem;      /* smaller than normal buttons */
  font-weight: 600;
  line-height: 1;

  padding: 2px 6px;        /* tighter than btn-small */
  border-radius: 4px;

  color: inherit;
}

/* Hover / focus */
.lang-btn:hover,
.lang-btn:focus-visible {
  background: rgba(0, 120, 215, 0.18);  /* lighter than default blue */
}

/* Visible badge text (EN / ES / etc.) */
#langLabel {
  display: inline-block;
  min-width: 1.6em;        /* keeps button from jittering */
  text-align: center;
}

.lang-list {
  position: absolute;
  top: 110%;
  right: 0;
  min-width: 170px;
  background: var(--panel-bg, #fff);
  border: 1px solid var(--border-color, #ccc);
  border-radius: 6px;
  padding: 6px;
  z-index: 2000;
}

.lang-list button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
}

.lang-list button:hover,
.lang-list button:focus-visible {
  background: rgba(0,0,0,0.08);
}

/* Dark mode tweak */
body.dark-mode .lang-btn:hover,
body.dark-mode .lang-btn:focus-visible {
  background: rgba(120, 180, 255, 0.22);
}


body.dark-mode .lang-list {
  background: var(--panel-bg, #1e1e1e);
  border-color: var(--border-color, #555);
}
body.dark-mode .lang-list button:hover,
body.dark-mode .lang-list button:focus-visible {
  background: rgba(255,255,255,0.12);
}

/* Screen-reader-only (but still accessible to assistive tech) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip link: hidden by default (via sr-only), visible when focused */
.skip-link:focus,
.skip-link:active {
  position: fixed !important;
  top: 12px;
  left: 12px;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  z-index: 10000;
  border-radius: 8px;
  outline: 2px solid currentColor;
  background: #fff;
  color: #000;
}

/* ===============================
   Mobile: Pattern 2 (overlay gutter)
   Desktop remains unchanged.
   =============================== */

@media (max-width: 768px) {

  /* prevent horizontal page scrolling */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* helps avoid “width creep” from padding/borders */
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* mobile: don’t show resize handles; also give iOS a REAL height reference */
  .editor-container {
    resize: none;

    /* IMPORTANT: iOS percent heights behave poorly when parent height is auto.
       svh is more stable with the browser chrome than vh. */
    height: 30svh;      /* try 38–48 */
    min-height: 30svh;
  }


  /* overlay gutter on the left (still a flex sibling, fixed width) */
  #gutter {
    position: relative;   /* not absolute */
    left: auto;
    top: auto;
    bottom: auto;

    flex: 0 0 4ch;        /* fixed gutter width for 3 digits */
    width: 4ch;
    max-width: 4ch;

    padding: 8px 6px;
    border-right: 1px solid #ccc;

    /* IMPORTANT: make gutter fill the same height as the textarea */
    height: 100%;
    min-height: 0;

    /* Avoid the two-tone “gutter extends past code” look */
    background: inherit;

    z-index: auto;
  }

  body.dark-mode #gutter {
    border-right-color: #333;
    background: #1e1e1e;  /* match dark textarea background */
  }

  /* IMPORTANT: keep the end-of-file “breathing room” symmetric */
  #gutter::after {
    height: 180px; /* MUST match #code padding-bottom (desktop uses 180px) */
  }

  /* textarea fills remaining space and fills container height */
  #code {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;

    padding-left: 8px;

    /* keep long-line behavior */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  /* 1) remove default page margin that can cause horizontal overflow */
  body {
    margin: 0;
  }

  /* 2) lock main boxes to the viewport width */
  .editor-container,
  #output_pre,
  #errors_pre {
    width: 100%;
    max-width: 100%;
    resize: none;          /* prevents accidental wide boxes on touch */
    box-sizing: border-box;
  }

  /* mobile output panes: avoid fixed height */
  #output_pre,
  #errors_pre {
    height: auto;
    min-height: 25vh;
    max-height: 60vh;
    resize: none;
    font-size: 14px;
    line-height: 1.5;
  }

  /* mobile buttons: thumb-friendly */
  button,
  button.btn-small {
    padding: 4px 8px;     /* smaller button box */
    font-size: inherit;   /* keep text size unchanged */
    line-height: 1.2;     /* tightens vertical feel slightly */
  }

  /* 3) ensure long lines scroll INSIDE, not by widening the box */
  #code,
  #output_pre,
  #errors_pre {
    overflow-x: auto;
  }

  /* Prevent iOS Safari from auto-zooming on focus */
  #code,
  #gutter {
    font-size: 16px;
    line-height: 1.4; /* keep your existing rhythm */
  }

}


/* Desktop: make Ask-AI icon more prominent */
@media (min-width: 769px) {
  button.btn-small.ask-btn,
  button.btn-small.clear-btn {
    font-size: 24px;
    padding: 2px 8px;
  }
}


/* Force wrap modes to win on output pane */
#output_pre.wrap {
  white-space: pre-wrap !important;
  overflow-x: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#output_pre.no-wrap {
  white-space: pre !important;
  overflow-x: auto !important;
}



/* Share group can wrap to 2 lines (buttons then URL row) */
.config-group-share{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* Keep the buttons row compact */
.share-row-bottom{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* When revealed, the URL row takes a full “second line” */
.share-url-bottom{
  flex: 1 1 100%;
  margin-top: 6px;
}

.share-url-title{
  margin: 4px 0;
  font-size: 12px;
  font-weight: 600;
}

.share-url-input{
  width: min(720px, 100%);
  font-size: 14px;
  padding: 4px;
}

/* Replace the old inline style on urlWarning */
#urlWarning{
  margin-left: 10px;
  font-size: 12px;
  color: #c0392b;
}