/*
================================================================================
  SynGen .msg Designer
  styles.css

  Copyright (c) 2026 Mark Stephen Day. All Rights Reserved.

  PROPRIETARY AND CONFIDENTIAL

  This source code and all associated files are the exclusive intellectual
  property of Mark Stephen Day and are protected by copyright law.

  UNAUTHORISED USE, REPRODUCTION, OR DISTRIBUTION PROHIBITED.
  No part of this software may be copied, reproduced, modified, merged,
  published, distributed, sublicensed, reverse-engineered, decompiled, or
  transmitted in any form without the express prior written permission of
  Mark Stephen Day.
================================================================================
*/

:root {
	--apptext:#F5F5F5;
	--brblue:#24BBFF;
	--btnborder:#8691A1;
	--canvascolor:#20262D;
	--cardcolor:#4B5463;
	--claudecolor:#d97757;
	--dialog-title:#272D37;
	--editcolor:#2C3340;
	--githubcolor:#1f2328;
	--iconclose:#9CA8B7;
	--lane-error-bd:rgba(240,96,96,1);
	--lane-error-bg:rgba(240,96,96,0.1);
	--lanehint:#8290ba;
	--lane-success-bd:rgba(94,255,115,1);
	--lane-success-bg:rgba(94,255,115,0.1);
	--palgrp:#8290ba;
	--palgrpbg:#4B5463;
	--prborder:#262D39;
	--prcolor:#2C3340;
	--resizer:#1B2027;
	--scrollbarcolor:#20262D;
	--scrollbarhover:#677281;
	--sidepanel:#3B4453;
	--statuscolor:#2E3440;
	--tbtncolor:#3B4453;
	--tbtnhover:#2C3440;
	--tbtnhoverborder:#252D38;
	--tbtntext:#D9D9D9;
	--toolbar:#3B4453;
	
	--sans:'Inter',system-ui,sans-serif;
  	--mono:'JetBrains Mono',monospace
	  
  	--s0:#222933; 
	--s1:#171b26; 
	--s2:#3B4453; 
	--s3:#252c3f; 
	--s4:#1F252E; 
	--s5:#3d4a6b;
  	
	--t0:#e8ecf4; 
	--t1:#8b92a8; 
	--t2:#525b75;
  	
  	--a:#6c8aff; 
	--a-bg:rgba(108,138,255,.12); 
	--a-bd:rgba(108,138,255,.4);
  	
	--d:#f06060;  
	--d-bg:rgba(240,96,96,.12);
  	
	--lh:#9d8cff; 
	--lt:#52c98a; 
	--lk:#f4a44a; 
	--lc:#f07070; 
	--le:#70a8d8; 
	--ls:#60c8c0;
  	
	--success:#52c98a; 
	--warn:#f4a44a;
  
	--r1:4px; 
	--r2:8px; 
	--r3:12px;	
}

*,*::before,*::after{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html,body{
	height:100%;
	font-family:var(--sans);
	font-size:13px;
	background:var(--s0);
	color:var(--t0);
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
}

body{
	background: radial-gradient(circle, #3B4250, #252B37);
	display:flex;
	flex-direction:column;
}

/* ── Titlebar ── */
.titlebar{display:flex;align-items:center;gap:8px;padding:0 14px;height:70px;background:var(--toolbar);border-bottom:3px solid var(--resizer);flex-shrink:0}
.tl-logo{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--t0);letter-spacing:-.01em;margin-right:6px}
.tl-logo i{font-size:25px;background:var(--brblue);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.tl-logo span{color:var(--brblue)} .tl-sep{flex:1}
.vsep{width:1px;height:18px;background:var(--s4);margin:0 2px}

.icon {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}

.iconclose {
  width: 15px;
  height: 15px;
  stroke: var(--iconclose);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: var(--iconclose);
  display: inline-block;
  vertical-align: middle;
}

.tbtn {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 200;
  padding: 12px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tbtntext);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tbtn i {
  font-size: 32px;
}

.tbtn:hover {
  background: var(--tbtnhover);
  border-color: var(--tbtnhoverborder);
  color: var(--tbtntext);
}

.tbtn.hi{
  background:var(--a-bg);
  border-color:var(--brblue);
  color:var(--a);
}

.tbtn.hi:hover{
  background:rgba(108,138,255,.2);
}

/* ── App grid — resizable via CSS vars ── */
#app{display:grid;grid-template-columns:var(--pal-w,190px) 4px 1fr 4px var(--insp-w,240px);flex:1;min-height:0;position:relative}

/* ── Resize handles ── */
.resizer{background:var(--resizer);cursor:col-resize;transition:background .15s;z-index:10;touch-action:none}
.resizer:hover,.resizer.active{background:var(--brblue)}

/* ── Sidebar / Inspector panels ── */
.sidebar,.insp{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sidebar{background:var(--sidepanel);}
.insp{background:var(--sidepanel);}

.panel-hd{
	font-size:12px;
	font-weight:600;
	color:var(--apptext);
	letter-spacing:.1em;
	text-transform:uppercase;
	padding:10px 12px 8px;
	flex-shrink:0;
	background:var(--dialog-title);
	margin-bottom: -12px;
}

.pal-list{
	padding:9px 8px;
	display:flex;
	flex-direction:column;
	gap:4px;
	overflow-y:auto;
	flex:1;
}

.pal-group {
	font-size: 10px;
	font-weight: 600;
	height: 28px;
	color: var(--apptext);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 8px;
	background: var(--palgrpbg);
	margin: 4px -8px 4px -8px;
	padding-left: 8px;
}

/* ── Palette cards ── */
.pc{
	padding:8px 10px;
	border-radius:var(--r1);
	border:1.5px solid var(--btnborder);
	cursor:grab;user-select:none;
	background:var(--sidepanel);
	transition:border-color .15s,background .15s,transform .1s;position:relative}

.pc:hover{
  border-color:var(--brblue);
  background:var(--cardcolor);
  /*transform:translateY(-1px);*/
}

.pc:active{cursor:grabbing;opacity:.7;transform:translateY(0)}

.pc-name{
	font-size:11px;
	font-weight:500;
	color:var(--apptext);
	display:flex;
	align-items:center;
	gap:6px;
}
.pc-name i{font-size:14px}
.pc-hint{font-size:10px;color:var(--brblue);margin-top:2px;padding-left:20px}
.pc-once{font-size:9px;font-weight:600;padding:1px 5px;border-radius:20px;background:var(--a-bg);color:var(--a);border:1px solid var(--a-bd);margin-left:auto;flex-shrink:0;letter-spacing:.02em}

/* ── Canvas ── */
.canvas-col{
	display:flex;
	flex-direction:column;
	min-height:0;
}
.canvas{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px;align-items:stretch}

/* ── Lanes ── */
.lane{
	border:2px solid #171A21;
	background:var(--dialog-title);
	flex-shrink:0;
	transition:border-color .15s;
}

.lane-hd{
	display:flex;
	align-items:center;
	gap:9px;
	padding:9px 13px;
	cursor:pointer;
	transition:background .15s;
}

.lane-hd.has-cards{
  border-bottom-color:var(--s4);
}

.lane-hd.over{
  background:var(--lane-success-bg);
  outline:1.5px dashed var(--lane-success-bd);
  outline-offset:-2px;
}

.lane-hd.reject{
  background:var(--lane-error-bg);
  outline:1.5px dashed var(--lane-error-bd);
  outline-offset:-2px;
}
.lane-ico{width:26px;height:26px;border-radius:var(--r1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.lane-title{font-size:12px;font-weight:600;color:var(--t0);flex:1;letter-spacing:-.01em}

.lane-badge{
  font-size:12px;
  font-weight:500;
  color:var(--brblue);
  font-family:var(--mono);
}
.lane-add-hint{
  font-size:12px;
  color:var(--brblue);
  font-style:italic;
}

.lane-body{
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:0;
  background:var(--toolbar);
}
/* body drop zone (secondary fallback) */
.lane-body.over{background:var(--lane-success-bg);outline:1.5px dashed var(--lane-success-bd);outline-offset:-2px;min-height:44px}
.lane-body.reject{background:var(--lane-error-bg);outline:1.5px dashed var(--lane-error-bd);outline-offset:-2px;min-height:44px}
.lane-empty{font-size:12px;color:var(--brblue);padding:6px 4px;text-align:center;font-style:italic}

/* ── Cards ── */
.card{
  border-radius:var(--r1);
  border:1px solid var(--btnborder);
  background:var(--cardcolor);
  cursor:pointer;
  transition:border-color .15s,background .15s;
  user-select:none;
}
.card:hover{
  border-color:var(--brblue);
  background:var(--cardcolor);
}

.card.sel{
  border-color:var(--brblue);
  background:var(--cardcolor);
  box-shadow:0 0 0 2px var(--a-bg);
}

.card-hd{display:flex;align-items:center;gap:7px;padding:7px 10px}
.card-ico{font-size:13px;flex-shrink:0}
.card-lbl{font-size:12px;font-weight:500;color:var(--t0);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.card-rm{
  font-size:12px;
  color:var(--t2);
  opacity:.4;
  cursor:pointer;
  padding:2px 4px;
  border-radius:4px;
  line-height:1;
  flex-shrink:0;
  transition:opacity .12s,color .12s;
}

.card-rm:hover{
  opacity:1;
  color:var(--d);
}

.card-body{padding:1px 10px 8px;display:flex;flex-direction:column;gap:3px}

.cr{
  font-size:11px;
  color:var(--brblue);
  display:flex;
  gap:5px;
  align-items:baseline;
  flex-wrap:wrap;
}
.cr b{color:var(--t0);font-weight:500} .cr .mn{font-family:var(--mono);font-size:10px;color:var(--t0)}
.chips{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px}
.chip{font-size:10px;padding:1px 6px;border-radius:20px;border:1px solid var(--s4);color:var(--t1);background:var(--s0);font-family:var(--mono)}

/* ── Inspector ── */
.insp-body{padding:12px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px}
.insp-nil{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:7px;opacity:.3}
.insp-nil i{font-size:26px} .insp-nil p{font-size:12px;text-align:center;line-height:1.5}

.isec{
  font-size:11px;
  font-weight:600;
  color:var(--apptext);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:10px;
  margin:0px -10px 0px -10px;
  background:var(--palgrpbg);
}
.fg{display:flex;flex-direction:column;gap:4px}
.fl{
  font-size:11px;
  font-weight:300;
  color:var(--apptext);
}
.fhint{
  font-size:11px;
  color:var(--brblue);
  margin-top:-1px;
}
.fi{
  font-family:var(--sans);
  font-size:12px;padding:6px 9px;
  border:1px solid var(--s4);
  background:var(--editcolor);color:var(--apptext);
  width:100%;outline:none;
  transition:border-color .15s;
}
.fi:focus{
  border-color:var(--brblue);
} 
.fi:disabled{opacity:.3;cursor:not-allowed}
.fi.mn{font-family:var(--mono);font-size:11px}
.fi[readonly]{opacity:.55;cursor:default;border-style:dashed}
.fta{min-height:64px;resize:vertical;line-height:1.55}
.crow{display:flex;align-items:center;gap:7px}
.stb{font-family:var(--sans);font-size:11px;padding:3px 8px;border-radius:var(--r1);border:1px solid var(--s4);cursor:pointer;background:var(--s2);color:var(--t1);transition:all .15s}
.stb.on{background:var(--a-bg);color:var(--a);border-color:var(--a-bd)}
.kw-chips{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:5px;min-height:20px}
.kwc{font-size:10px;padding:2px 7px;border-radius:20px;background:var(--s2);border:1px solid var(--s4);color:var(--t1);cursor:pointer;font-family:var(--mono);transition:border-color .1s,color .1s}
.kwc:hover{border-color:var(--d);color:var(--d)}
.kwr{display:flex;gap:5px} .kwr .fi{flex:1}
.addb{font-family:var(--sans);font-size:11px;padding:6px 10px;border-radius:var(--r1);border:1px solid var(--s4);background:transparent;color:var(--t1);cursor:pointer;white-space:nowrap;transition:all .15s}
.addb:hover{background:var(--s2);border-color:var(--s5);color:var(--t0)}
.cn-preview{font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:var(--r1);background:var(--prcolor);border:1px solid var(--prborder);color:var(--t0);display:flex;align-items:center;margin-top:2px}
.cn-fixed{color:var(--t2)} .cn-core{color:var(--brblue);font-weight:500}
input[type="checkbox"]{width:14px;height:14px;accent-color:var(--a);cursor:pointer;flex-shrink:0}


/* ── Sample source live preview ── */
.sp-preview {
  border-radius: var(--r2);
  border: 1px solid var(--s4);
  background: var(--s0);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-all;
  min-height: 80px;
  max-height: 260px;
  overflow-y: auto;
  resize: both;
}

.sp-comment   { font-style: italic; }
.sp-string    { }
.sp-keyword   { font-weight: 600; }
.sp-space     { }
.sp-default   { }
.sp-label     { font-size:10px; font-weight:600; color:var(--t2);
  letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:4px; display:block; }
/* ── Colour editor ── */
.ce-wrap{display:flex;flex-direction:column;gap:8px}
.ce-disabled{opacity:.35;pointer-events:none}

/* Large preview swatch */
.ce-swatch-bar{display:flex;align-items:stretch;gap:0;border-radius:var(--r2);overflow:hidden;border:1px solid var(--s5);height:38px}
.ce-swatch-preview{flex:1;min-width:0;position:relative;cursor:pointer;transition:filter .15s}
.ce-swatch-preview:hover{filter:brightness(1.12)}
.ce-swatch-preview input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}
.ce-swatch-hex{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);padding:0 10px;display:flex;align-items:center;letter-spacing:.04em;pointer-events:none;flex-shrink:0;text-shadow:0 1px 2px rgba(0,0,0,.6)}

/* RGB sliders */
.ce-sliders{display:flex;flex-direction:column;gap:5px}
.ce-slider-row{display:flex;align-items:center;gap:7px}
.ce-slider-label{font-size:10px;font-weight:600;width:10px;flex-shrink:0;text-align:center}
.ce-slider{flex:1;height:6px;border-radius:3px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;border:none}
.ce-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--s5);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.ce-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--s5);cursor:pointer}
.ce-slider-val{font-family:var(--mono);font-size:11px;color:var(--t0);width:28px;text-align:right;flex-shrink:0}



/* Format buttons + output */
.ce-fmt-row{display:flex;gap:4px;align-items:center}
.ce-fmt-btn{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:20px;border:1px solid var(--s4);background:transparent;color:var(--t1);cursor:pointer;transition:all .12s;white-space:nowrap}
.ce-fmt-btn.on{background:var(--a-bg);border-color:var(--a-bd);color:var(--a)}
.ce-output-box{flex:1;font-family:var(--mono);font-size:11px;color:var(--success);padding:4px 8px;background:var(--s0);border-radius:var(--r1);border:1px solid var(--s4);word-break:break-all;min-width:0;letter-spacing:.02em}


/* ── Lane validation error state ── */
.lane.lane-err { border-color:var(--d); box-shadow:0 0 0 2px var(--d-bg); }
.lane.lane-err .lane-hd { background:var(--d-bg); }
.lane.lane-err .lane-title { color:var(--d); }
.lane-err-badge { font-size:12px; font-weight:600; color:var(--d);
  background:var(--d-bg); border:1px solid var(--d);
  padding:1px 6px; border-radius:20px; margin-left:4px; }
.lane-err-list { margin:0 8px 8px;
  background:rgba(240,96,96,.07); border:1px solid rgba(240,96,96,.25);
  border-radius:var(--r1); padding:7px 10px;
  display:flex; flex-direction:column; gap:3px; }
.lane-err-item { font-size:11px; color:var(--d);
  display:flex; align-items:baseline; gap:5px; }
.lane-err-item::before { content:'!'; font-weight:700;
  width:13px; flex-shrink:0; }
/* card error highlight */
.card.card-err { border-color:var(--d) !important;
  background:rgba(240,96,96,.06) !important; }
/* ── Modal ── */
.modal-wrap{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(3px)}

.modal{
  background:var(--dialog-title);
  border-radius:var(--r1);
  border:1px solid var(--dialog-title);
  width:560px;
  max-height:590px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}

.modal-hd{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 16px;
	flex-shrink: 0;
}

.modal-hd h3{
  font-size:13px;
  font-weight:600;
  color:var(--apptext);
}
.modal-cl{
  font-size:17px;
  cursor:pointer;
  color:var(--t1);
  padding:2px 5px;
  border-radius:4px;
  transition:color .12s;
}
.modal-cl:hover{
  color:var(--t0);
}
  
.modal-body {
	padding: 15px;
	overflow-y: auto;
	flex: 1;
	background: var(--sidepanel);
}

.msg-pre{
	font-family:var(--mono);
	font-size:11px;
	line-height:1.9;
	color:var(--t0);
	white-space:pre-wrap;
	word-break:break-all;
	background:var(--editcolor);
	padding:12px 14px;
	border-radius:var(--r1);
	border:1px solid var(--s4);
}
.t-delim{color:var(--a)} .t-kw{color:var(--warn)} .t-val{color:var(--success)} .t-body{color:var(--t2)}
.modal-btns{display:flex;gap:6px;margin-top:12px}
.modal-btns .tbtn{flex:1;justify-content:center}

::-webkit-scrollbar{
  width:5px;
  height:5px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  color:var(--scrollbarcolor);
  border-radius:3px;
}

::-webkit-scrollbar-thumb:hover{
  color:var(--scrollbarhover);
}

/* ── Intro overlay ── */
.intro-overlay{
	position:fixed;
	inset:0;
	z-index:200;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(26,31,37,.92);
	backdrop-filter:blur(6px);
}

.intro-box {
	background: var(--sidepanel);
	border: 1px solid var(--dialog-title);
	border-radius: var(--r1);
	width: 600px;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	filter: drop-shadow(0 0 8px #101010);
}

.intro-hero {
	padding: 10px 36px 10px;
	background: var(--dialog-title);
}

.intro-hero-logo{font-size:22px;font-weight:700;color:var(--t0);letter-spacing:-.02em;margin-bottom:4px}

.intro-hero-logo span {
	background: var(--brblue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.intro-hero-sub{font-size:13px;color:var(--t1);line-height:1.6}

.intro-body{padding:24px 36px;display:flex;flex-direction:column;gap:20px}

.intro-section-title {
	font-size: 11px;
	font-weight: 600;
	color: var(--apptext);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.intro-steps{display:flex;flex-direction:column;gap:10px}

.intro-step{display:flex;gap:12px;align-items:flex-start}

.intro-step-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--brblue);
	color: var(--brblue);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.intro-step-text{font-size:12px;color:var(--t1);line-height:1.55}
.intro-step-text b{color:var(--t0);font-weight:500}
.intro-links{display:flex;gap:8px;flex-wrap:wrap}
.intro-link{font-size:12px;padding:6px 12px;border-radius:var(--r1);border:1px solid var(--s4);color:var(--t1);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:all .15s;background:var(--s2)}
.intro-link:hover{border-color:var(--a-bd);color:var(--a);background:var(--a-bg)}
.intro-link i{font-size:13px}
.intro-footer{padding:16px 36px;border-top:1px solid var(--s4);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}

.intro-copy {
	font-size: 11px;
	color: var(--apptext);
}
.intro-start-btn{font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 22px;border-radius:var(--r2);border:none;background:linear-gradient(135deg,var(--lh),var(--a));color:#fff;cursor:pointer;letter-spacing:-.01em;transition:opacity .15s;box-shadow:0 4px 16px rgba(108,138,255,.3)}
.intro-start-btn:hover{opacity:.88}

/* ── Help panel (slide-in from right) ── */
.help-panel{position:fixed;top:0;right:-520px;width:500px;height:100vh;z-index:150;background:var(--s1);border-left:1px solid var(--s5);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.5);transition:right .25s cubic-bezier(.4,0,.2,1)}
.help-panel.open{right:0}
.help-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--s4);flex-shrink:0}
.help-hd h2{font-size:14px;font-weight:600;color:var(--t0)}
.help-cl{font-size:18px;cursor:pointer;color:var(--t1);padding:3px 6px;border-radius:4px;transition:color .12s}
.help-cl:hover{color:var(--t0)}
.help-body{overflow-y:auto;flex:1;padding:20px 22px;display:flex;flex-direction:column;gap:24px}
.help-section{}
.help-section h3{font-size:12px;font-weight:600;color:var(--a);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--s4)}
.help-section p{font-size:12px;color:var(--t1);line-height:1.65;margin-bottom:8px}
.help-section p:last-child{margin-bottom:0}
.help-section b{color:var(--t0);font-weight:500}
.help-table{width:100%;border-collapse:collapse;margin-bottom:6px}
.help-table th{font-size:10px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:4px 8px;border-bottom:1px solid var(--s4)}
.help-table td{font-size:11px;color:var(--t1);padding:5px 8px;border-bottom:1px solid var(--s4);vertical-align:top;line-height:1.5}
.help-table td:first-child{color:var(--t0);font-weight:500;font-family:var(--mono);white-space:nowrap}
.help-table tr:last-child td{border-bottom:none}
.help-kbd{display:inline-block;font-family:var(--mono);font-size:10px;background:var(--s2);border:1px solid var(--s4);border-radius:3px;padding:1px 5px;color:var(--t0)}
.help-tip{background:var(--a-bg);border:1px solid var(--a-bd);border-radius:var(--r2);padding:8px 12px;font-size:11px;color:var(--t1);line-height:1.55;margin-top:4px}
.help-tip i{color:var(--a);margin-right:4px}
.help-scrim{position:fixed;inset:0;z-index:140;display:none}
.help-scrim.open{display:block}


/* ── In-place card title editing ── */
.card-lbl-input {
  font-size:12px; font-weight:500; color:var(--t0);
  background:transparent; border:none; outline:none;
  border-bottom:1px solid var(--a); padding:0 2px;
  width:100%; min-width:60px; font-family:var(--sans);
}
.card-lbl-input:focus { background:var(--s2); border-radius:3px; }

/* ── Palette preset buttons ── */
.pal-preset-grid { 
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:4px;
  padding:0 0 4px; 
}

.pal-preset {
  	font-size:11px; 
	font-weight:500; 
	padding:5px 6px;
  	border-radius:var(--r1); 
	border:1px solid var(--btnborder);
  	background:var(--sidepanel); 
	color:var(--t0);
  	cursor:pointer; 
	text-align:left;
  	display:flex; 
	align-items:center; 
	gap:5px;
  	transition:all .15s; 
	white-space:nowrap; 
	overflow:hidden;
}

.pal-preset i { 
  font-size:12px;            
  flex-shrink:0; 
}

.pal-preset:hover { 
  border-color:var(--brblue); 
  background:var(--cardcolor); 
  color:var(--t0);
}

.footer-panel {
  background: var(--statuscolor);          /* dark panel */
  color: var(--apptext);                  /* soft text */
  padding: 10px 30px;           /* breathing room */
  border-top:3px solid var(--resizer);   /* subtle separation */
  font-size: 0.9rem;            /* slightly smaller text */
  line-height: 2;
  margin-top: 0px;             /* space above panel */
}

.footer-panel p {
  margin: 0;
}

.msg-color {
  color: var(--brblue);
}

.claude-color{
  color: var(--claudecolor);
}

.github-color{
  color: var(--githubcolor);
}

.intro {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  background-color: var(--sidepanel);
  color: var( --apptext);
  text-align: center;
  padding: 5px 10px;
  position: absolute;
  z-index: 16; /* Ensure tooltip is displayed above content */
  top: 116.5%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.25s ease;

  white-space: nowrap; /* prevents wrapping */
  /*margin-left: -65px;*/
}

/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}