a:link, a:link font, a:active, a:active font, a:visited, a:visited font{font-family: Arial; color:#666; text-decoration: none;} /*font-size: .5em !important; */

    .btn { background: var(--codeGB); color: var(--LNC); border: 1px solid #444; padding: 2.5px; font-size: 11px; cursor: pointer; border-radius: 4px; transition: 0.2s; }
    .btn:hover { background: var(--LNHover); color: #fff; }

body {/*When the editor would expand, causing the Browsers Scrollbar to become visible, this would cause the editor to shrink in width by a few px.
        This resolves the issue. Having the Scrollbar visible at all times.*/
  scrollbar-gutter: stable;
  overflow-y: scroll;
  /*color: var(--bc);*/
  /*color: #939e9e;*/
  color: #496969;
  font-size: 13pt;
}






a:link, a:link font, a:active, a:active font, a:visited, a:visited font{font-family: Arial; font-size: .9em !important; color:#666; text-decoration: none;}

    /* ... Header & Button Styles ... */
    .PreHeader { background-color: #1d1d1d; overflow:auto; margin:0 0 1em; padding:.5em 1em; width: 100%; border-bottom: 1px double #A3044C; display: block; list-style-type: none; }
    .CarrzSyntitle { color: #999; margin-right: 10px; }
    .controls { float: right; display: flex; gap: 8px; }


/* THE WRAPPER: Remove the fixed height so it can shrink */

	.CarrzSynEdit{
	width: 99% !important;
    position: relative;
    background: var(--panel) !important;
    border: var(--border-style) !important;
    border-radius: 8px;
	margin: 10px 10px 1px 5px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.7);
	
	}
	
	.CarrzSynEdit .EditorTitle{color: var(--EditorTitle);}
	.CarrzSynEdit .status-pulse{color: var(--status-pulse);}
	.CarrzSynEdit .CarrzSyntitle{color: var(--CarrzSyntitle);}
	.CarrzSynEdit .btn{color: var(--btn);}
	
	
	
pre {
    white-space: pre-wrap;
    /* 2. Constrain the parent's width */
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;        /* 🔥 THIS is the missing piece */
    padding: 0;       /* optional, but recommended */
}
	

/* 1. THE WRAPPER: Limits height and handles ALL scrollbars */
.code-block-wrapper {
    margin: 2.5px; /*margin: 10px;*/
	padding: 0;
    background-color: var(--CBWBG);
    border-radius: 6px;
    border: 1px solid var(--CBWBC); /*#333*/
    height: auto;           /* Shrinks to 1 line */
    max-height: 250px;      /* Caps at 12 lines */
    overflow: auto;         /* Vertical and Horizontal scrollbars live here */
    display: block; 
}


        .line-row.active-line { background-color: rgba(0, 120, 215, 0.3) !important; }
		
		.line-row.active-line .line-number {
        color: #ffffff;                       /* Make the number white */
        font-weight: bold; /* Added this for you */
        border-right: 1px solid #0078d7;      /* Match the blue theme */
        }

        /* 2. Optional: Subtle highlight on the number track when hovering */
        .line-row:hover .line-number {
            background-color: var(--LNHover); 
            color: var(--LNC);
        }
		
		


/*
		.line-row:hover > .line-number {
            background-color: var(--LNHover); 
            color: var(--LNC);
}
.line-row:hover {
    background-color: var(--LNHover);
}

.line-row:hover > .line-number,
.line-row:hover > .line-content {
    background-color: rgba(255, 0, 0, 0.2);
}
*/


/* 2. THE INNER BLOCK: Must be inline-flex to shrink-wrap the width */
.code-block {
    display: inline-flex;   /* FIX: Only as wide as the longest line */
    flex-direction: column;
      /* 3. CRITICAL: Allows the flex item to be smaller than its content */
  min-width: 0; 
  width: 100%;
  /* 4. The actual wrapping logic */
  white-space: pre-wrap;
  word-break: break-all;      /* Forces breaks in long strings (URLs/Base64) */
  overflow-wrap: anywhere;    /* Extra insurance for modern browsers */
    /* color: #d4d4d4;*/
	color: var(--codeFC);
    /*background-color: var(--codeGB);*/
   /* color: var(--codeFC);*/
	font-size: var(--codeFS);
    font-family: 'Consolas', monospace;
    padding: 2px 0; /*  padding: 10px 0;*/
    margin: 0;
}

/* 3. THE ROWS: Standard flex rows */
.line-row {
    display: flex;
    width: 100%;            /* Spans full width of the inline-flex parent */
    cursor: pointer;
}

/* 4. THE NUMBER: Fixed width, no more "Huge" bar */
.line-number {
    position: sticky;
    left: 0;
    z-index: 10;
    background: var(--LNBG);x
    color: var(--LNC);
    padding: 0 12px;
    text-align: right;
    border-right: 1px solid var(--LNBC);
    user-select: none;
    
    /* FIX: Force exactly 40px width */
    width: 20px;            
    min-width: 20px;
    flex-shrink: 0;         /* Prevents squishing */
}

.line-content {
    padding-left: 10px;
    padding-right: 30px;
}

/* 5. EXPANDED STATE */
.code-block-wrapper.expanded {
    max-height: none !important;
    height: auto !important;	
}





        .line-row.active-line { background-color: rgba(0, 120, 215, 0.3) !important; }
		
		.line-row.active-line .line-number {
        color: #ffffff;                       /* Make the number white */
        font-weight: bold; /* Added this for you */
        border-right: 1px solid #0078d7;      /* Match the blue theme */
        }

        /* 2. Optional: Subtle highlight on the number track when hovering */
        .line-row:hover .line-number {
            background-color: var(--LNHover); 
            color: var(--LNC);
        }

    /* Custom Scrollbar */
    .code-block-wrapper::-webkit-scrollbar { height: 12px; width: 12px; }
    .code-block-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
    .code-block-wrapper::-webkit-scrollbar-track { background: #201f23; }
	
	
	/* CORNER BRACKETS */
.corner { position: absolute; width: 15px; height: 15px; border: 2px solid var(--accent); z-index: 5; display: var(--corner-display);}
.tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; }
.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.window-bar {
    background: var(--WBBG);
    padding: 8px 20px; /* reduce if needed */
    margin: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}

.status-pulse {
    height: 8px; width: 8px;
    background: var(--SPBG);
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    box-shadow: 0 0 10px var(--SPBS);
}
.EditorTitle{
color: var(--ETC);
}

/* Apply this to your button */
.download-btn {
  transition: opacity 0.2s ease-in-out;
  opacity: 1;
}

/* When this class is added, the button disappears */
.is-hidden {
  opacity: 0;
}


 /*▼Expanding Toggle For Code and Live Preview▼*/
  .CFFToggle{
      display: flex;
      justify-content: center; /* Centers horizontally */
}
  /*▲Expanding Toggle For Code and Live Preview▲*/