/* ============================================================
   site.css — JTDM project styles
   ============================================================ */

/* ── Infinite-grid landing page ─────────────────────────── */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body { user-select: none; -webkit-user-select: none; background: var(--bg, #0b0f17); }

/* Let the orb layer pan with the grid; promote to compositor layer */
.bgOrbs { will-change: transform; }

/* Grid viewport — fills the screen behind everything */
#gridViewport {
	position: fixed; inset: 0;
	overflow: hidden;
	cursor: grab;
	z-index: 0;
	touch-action: none;
}
body.dragging, body.dragging * { cursor: grabbing !important; }

/*
   Seamless grid lines via an inline SVG data-URI.
   60×60 cell with 1 px lines — tiles infinitely.
*/
#gridSurface {
	position: absolute;
	inset: -5000%;
	will-change: transform;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0H60V60' fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 60px 60px;
}

/* Cursor-proximity glow — brighter grid lines masked by radial gradient */
#gridCursorGlow {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0H60V60' fill='none' stroke='%2300ffff' stroke-opacity='0.35' stroke-width='1'/%3E%3C/svg%3E");
	background-size: 60px 60px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
	-webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, transparent 70%);
	        mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, transparent 70%);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: var(--glow-diameter, 360px) var(--glow-diameter, 360px);
	        mask-size: var(--glow-diameter, 360px) var(--glow-diameter, 360px);
	will-change: mask-position, -webkit-mask-position;
}

/* Radial glow at the grid origin (visual anchor) */
#gridGlow {
	position: absolute;
	width: 520px; height: 520px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle, rgba(0,255,255,0.08) 0%, transparent 70%);
	transform: translate(-50%, -50%);
	will-change: left, top;
}

/* Crosshair at the origin */
#gridOrigin {
	position: absolute;
	width: 24px; height: 24px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
#gridOrigin::before,
#gridOrigin::after {
	content: "";
	position: absolute;
	background: rgba(255,255,255,0.18);
	border-radius: 1px;
}
#gridOrigin::before { width: 1px; height: 100%; left: 50%; top: 0; }
#gridOrigin::after  { height: 1px; width: 100%; top: 50%; left: 0; }

/* Floating content layer on top of grid */
#gridContent {
	/* Set to 10px above bottom of viewport */
	position: fixed;
	bottom: 10px; left: 50%;
	transform: translateX(-50%);
	display: flex; flex-direction: column;
	pointer-events: none;
	z-index: 1;
}

/* Centre hero — lives on the grid surface, pans with drag */
.hero {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	padding: 0 24px;
	pointer-events: none;
	gap: 8px;
	z-index: 1;
}
.hero h1 {
	font-size: clamp(1.6rem, 5vw, 2.6rem);
	font-weight: 900; letter-spacing: -0.02em;
	color: var(--text, #eef1f6);
	margin: 0;
}
.hero .sub {
	font-size: 0.95rem;
	color: var(--muted, #5a6070);
	font-weight: 600;
}
.hero .versionBadge {
	margin-top: 6px;
	pointer-events: auto;
}

/* Coordinate readout */
#coordPill {
	position: fixed;
	top: 16px; left: 50%;
	transform: translateX(-50%);
	font-family: monospace;
	font-size: 0.75rem;
	color: var(--muted, #5a6070);
	background: rgba(11,15,23,0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,0.06);
	padding: 4px 14px;
	border-radius: 20px;
	z-index: 2;
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transition: opacity .25s;
}
#coordPill.visible { opacity: 1; }

/* Tab bar sits on top */
.tabsBar { position: relative; z-index: 3; pointer-events: auto; }

/* ── Add button (morphing circle → dropdown) ──────────── */
#addBtnWrap {
	position: fixed;
	top: 16px; right: 16px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

#addBtn {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(20,24,36,0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #eef1f6;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: transform .25s, border-radius .3s, width .3s, height .3s, background .25s;
	display: flex; align-items: center; justify-content: center;
	pointer-events: auto;
}
#addBtn:hover { background: rgba(30,36,54,0.95); }
#addBtnWrap.open #addBtn {
	transform: rotate(45deg);
	background: rgba(255,60,80,0.25);
	border-color: rgba(255,60,80,0.35);
}

#addDropdown {
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	opacity: 0;
	transform: translateY(-8px) scale(0.95);
	pointer-events: none;
	transition: opacity .2s, transform .25s;
}
#addBtnWrap.open #addDropdown {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

#addDropdown button {
	padding: 8px 18px;
	border-radius: 10px;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(20,24,36,0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #eef1f6;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background .15s;
}
#addDropdown button:hover { background: rgba(40,48,72,0.95); }

/* ── Board items (entries & sections on grid) ─────────── */
.board-entry, .board-section {
	position: absolute;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.board-entry.dragging { cursor: grabbing; z-index: 12 !important; }
.board-section.dragging { cursor: grabbing; }

/* Entries — rectangular bubbles */
.board-entry {
	z-index: 5;
	min-width: 180px;
	max-width: 340px;
	background: rgba(22,28,42,0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 14px;
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.board-entry .entry-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: #eef1f6;
	border: none; background: transparent;
	outline: none;
	padding: 0;
	font-family: inherit;
	cursor: text;
	user-select: text;
	-webkit-user-select: text;
}
.board-entry .entry-text {
	font-size: 0.8rem;
	color: #9ca3b4;
	border: none; background: transparent;
	outline: none;
	resize: none;
	padding: 0;
	font-family: inherit;
	min-height: 22px;
	cursor: text;
	user-select: text;
	-webkit-user-select: text;
}

/* Sections — color-customizable resizable containers */
.board-section {
	z-index: 2;
	min-width: 160px;
	min-height: 80px;
	background: rgba(0,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.board-section .section-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: rgba(238,241,246,0.7);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border: none; background: transparent;
	outline: none;
	padding: 0;
	font-family: inherit;
	cursor: text;
	user-select: text;
	-webkit-user-select: text;
}

/* Color-cycle button */
.board-color {
	position: absolute;
	top: 6px; right: 30px;
	width: 20px; height: 20px;
	border: none; background: transparent;
	color: rgba(255,255,255,0.3);
	font-size: 1rem;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	transition: color .15s;
	opacity: 0;
	pointer-events: none;
}
.board-section:hover .board-color { opacity: 1; pointer-events: auto; }
.board-color:hover { color: rgba(255,255,255,0.7); }

/* ── Resize handles (invisible, all sides) ────────────── */
.resize-handle {
	position: absolute;
	z-index: 3;
}
.resize-t  { top: 0; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.resize-b  { bottom: 0; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.resize-l  { left: 0; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.resize-r  { right: 0; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.resize-tl { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; z-index: 4; }
.resize-tr { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; z-index: 4; }
.resize-bl { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; z-index: 4; }
.resize-br { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; z-index: 4; }

/* ── Section cursor-proximity border glow ─────────────── */
.section-glow {
	position: absolute;
	inset: -1px;
	border: 1.5px solid rgba(255,255,255,0.35);
	border-radius: 18px;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
	-webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 100%);
	        mask-image: radial-gradient(circle at center, black 0%, transparent 100%);
	-webkit-mask-size: 80px 80px;
	        mask-size: 80px 80px;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: -100px -100px;
	        mask-position: -100px -100px;
	will-change: mask-position, -webkit-mask-position;
}

/* Delete button on items */
.board-delete {
	position: absolute;
	top: 6px; right: 8px;
	width: 20px; height: 20px;
	border: none; background: transparent;
	color: rgba(255,255,255,0.25);
	font-size: 0.85rem;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	transition: color .15s, background .15s;
	opacity: 0;
	pointer-events: none;
}
.board-entry:hover .board-delete,
.board-section:hover .board-delete {
	opacity: 1;
	pointer-events: auto;
}
.board-delete:hover {
	color: #ff3c50;
	background: rgba(255,60,80,0.12);
}