/* =========================================================================
   kakol.dev — okno terminala na pulpicie Hyprland (Catppuccin Mocha / Latte)
   ========================================================================= */

/* ---- Catppuccin Mocha (domyślny, ciemny) ---- */
:root, :root[data-theme="mocha"] {
	--base:    #1e1e2e;
	--mantle:  #181825;
	--crust:   #11111b;
	--surface0:#313244;
	--surface1:#45475a;
	--text:    #cdd6f4;
	--subtext: #a6adc8;
	--overlay: #6c7086;
	--mauve:   #cba6f7;
	--blue:    #89b4fa;
	--sapphire:#74c7ec;
	--teal:    #94e2d5;
	--green:   #a6e3a1;
	--yellow:  #f9e2af;
	--peach:   #fab387;
	--red:     #f38ba8;
	--wall1: #181825;
	--wall2: #1e1e2e;
	--wall-glow-a: rgba(116,199,236,.30); /* sapphire */
	--wall-glow-b: rgba(137,180,250,.26); /* blue     */
	--wall-glow-c: rgba(148,226,213,.20); /* teal     */
	--win-shadow: 0 24px 70px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.45);
}

/* ---- Catppuccin Latte (jasny) ---- */
:root[data-theme="latte"] {
	--base:    #eff1f5;
	--mantle:  #e6e9ef;
	--crust:   #dce0e8;
	--surface0:#ccd0da;
	--surface1:#bcc0cc;
	--text:    #4c4f69;
	--subtext: #5c5f77;
	--overlay: #8c8fa1;
	--mauve:   #8839ef;
	--blue:    #1e66f5;
	--sapphire:#209fb5;
	--teal:    #179299;
	--green:   #40a02b;
	--yellow:  #df8e1d;
	--peach:   #fe640b;
	--red:     #d20f39;
	--wall1: #dce0e8;
	--wall2: #e6e9ef;
	--wall-glow-a: rgba(32,159,181,.18);
	--wall-glow-b: rgba(30,102,245,.16);
	--wall-glow-c: rgba(23,146,153,.14);
	--win-shadow: 0 24px 60px rgba(108,112,134,.30), 0 4px 14px rgba(108,112,134,.22);
}

/* Alpine: ukryj elementy z x-cloak zanim framework się załaduje. */
[x-cloak] { display: none !important; }
.only-latte { display: none; }
:root[data-theme="latte"] .only-latte { display: inline; }
:root[data-theme="latte"] .only-mocha { display: none; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* ---- Pulpit / tapeta ---- */
.desktop {
	margin: 0;
	/* Dokładnie wysokość ekranu — układ flex sam dopasowuje okno i stopkę,
	   więc strona nie dostaje własnego scrolla (przewija się tylko .term). */
	height: 100dvh;
	min-height: 100dvh;
	overflow: hidden;
	padding: 56px 20px 24px; /* góra: miejsce na Waybar */
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--text);
	font: 15px/1.65 "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
	background:
		radial-gradient(60vw 60vw at 12% 8%, var(--wall-glow-a), transparent 60%),
		radial-gradient(55vw 55vw at 88% 18%, var(--wall-glow-b), transparent 60%),
		radial-gradient(70vw 70vw at 70% 100%, var(--wall-glow-c), transparent 60%),
		linear-gradient(145deg, var(--wall1), var(--wall2));
	background-attachment: fixed;
}

/* =========================  Waybar (górny pasek)  ======================== */
.bar {
	position: fixed; top: 10px; left: 12px; right: 12px; z-index: 20;
	display: flex; align-items: center; gap: 10px;
	height: 34px;
}
.bar__group { display: flex; align-items: center; gap: 8px; }
.bar__center { position: absolute; left: 50%; transform: translateX(-50%); }
.bar__group:last-child { margin-left: auto; }
.bar__pill {
	display: inline-flex; align-items: center; gap: 6px;
	background: color-mix(in srgb, var(--mantle) 82%, transparent);
	border: 1px solid var(--surface0);
	backdrop-filter: blur(10px);
	border-radius: 999px; padding: 4px 12px;
	font-size: .8rem; color: var(--subtext); white-space: nowrap;
}
.bar__btn { cursor: pointer; }
.bar__btn:hover { border-color: var(--blue); color: var(--text); }
/* Wskaźnik workspace'ów — czysto dekoracyjny (nie klikalny). */
.ws-indicator { gap: 7px; cursor: default; user-select: none; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--surface1); }
.dot--active { width: 18px; background: var(--blue); }

/* ===========================  Okno terminala  =========================== */
.viewport { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.window {
	position: relative;
	width: min(820px, 100%);
	/* Okno kurczy się do dostępnej wysokości (flex-shrink); treść przewija się
	   WEWNĄTRZ (.term), więc strona nie dostaje własnego scrolla. */
	flex: 0 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border-radius: 14px;
	background: var(--base);
	box-shadow: var(--win-shadow);
	overflow: hidden;
}
/* Gradientowa ramka aktywnego okna (sygnatura Hyprland). */
.window::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: 14px;
	padding: 2px;
	background: linear-gradient(135deg, var(--sapphire), var(--blue) 45%, var(--teal));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}

/* Pasek tytułu */
.titlebar {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px;
	background: var(--mantle);
	border-bottom: 1px solid var(--surface0);
}
.titlebar__title { color: var(--subtext); font-size: .82rem; }
.titlebar__title--left { margin-right: auto; } /* przyciski lecą na prawo (jak w KDE) */
.titlebar__shell { color: var(--overlay); font-size: .72rem; border: 1px solid var(--surface0); border-radius: 6px; padding: 1px 7px; }

/* Przyciski okna w stylu KDE Breeze (dekoracyjne, po prawej). */
.winbtns { display: flex; align-items: center; gap: 4px; }
.winbtn {
	width: 20px; height: 20px; border-radius: 5px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--subtext); cursor: default;
	transition: background .12s, color .12s;
}
.winbtn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.winbtn:hover { background: var(--surface0); color: var(--text); }
/* „Zamknij" — czerwone kółko z białym X (Breeze). */
.winbtn--close { background: #e64b3c; color: #fff; border-radius: 999px; }
.winbtn--close:hover { background: #f0604f; color: #fff; }

/* ===========================  Ciało terminala  ========================== */
/* Ciało terminala to wewnętrzny kontener przewijania (okno ma max-height). */
.term {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 22px 24px;
	scrollbar-width: thin;
	scrollbar-color: var(--surface1) transparent;
}
.term::-webkit-scrollbar { width: 9px; }
.term::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 999px; border: 2px solid var(--base); }
.term::-webkit-scrollbar-track { background: transparent; }

.promptline { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 14px; }
.promptline:first-child { margin-top: 0; }

/* ---- Efekt wpisywania ----
   Z JS: ukryj wszystkie linie poza pierwszą oraz wszystkie wyniki, a potem
   odsłaniaj je po kolei (JS ustawia opacity:1). Bez JS: wszystko widoczne. */
.term .promptline, .term .out { transition: opacity .3s ease; }
/* ukrycie do animacji tylko dla terminala „bootującego" (strona główna) */
html.js .term--boot .promptline ~ .promptline,
html.js .term--boot .out { opacity: 0; }
/* Treść komendy: dla wyłączonego JS pokaż ją przez ::after; z JS „wpisze" ją skrypt. */
.cmd[data-cmd]::after { content: attr(data-cmd); color: var(--text); }
html.js .cmd[data-cmd]::after { content: none; }
.ps1 { white-space: nowrap; }
.ps1__user   { color: var(--green); font-weight: 700; }
.ps1__sep    { color: var(--overlay); }
.ps1__path   { color: var(--blue); font-weight: 700; }
.ps1__dollar { color: var(--blue); margin-left: 6px; }
.cmd { color: var(--text); }

/* Interaktywny prompt (htmx) — wygląd terminala */
.runform { position: relative; align-items: baseline; cursor: text; }
/* Prawdziwe pole jest niewidoczne, ale łapie klawiaturę. */
.cmd-input {
	position: absolute; left: 0; top: 0;
	width: 1px; height: 1px; padding: 0; margin: 0;
	border: 0; outline: 0; opacity: 0;
	font: inherit;
}
.run-hint { color: var(--overlay); margin-left: 8px; }
.run-out {
	margin: 4px 0 2px; padding: 0;
	color: var(--text); font: inherit;
	white-space: pre; overflow-x: auto;
}
.run-out::-webkit-scrollbar { height: 6px; }
.run-out::-webkit-scrollbar-thumb { background: var(--surface1); border-radius: 999px; }
/* lista kandydatów Tab-completion */
.run-complete { color: var(--subtext); }

.out { margin: 6px 0 4px; padding-left: 2px; }
.muted { color: var(--subtext); }

.banner {
	margin: 2px 0 0;
	font-size: clamp(1.9rem, 6vw, 2.8rem);
	font-weight: 700; letter-spacing: -0.02em;
	line-height: 1.1;
	background: linear-gradient(120deg, var(--blue), var(--sapphire), var(--teal));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { margin: 0; color: var(--text); max-width: 60ch; }

/* dostępność — zielony, pulsujący wskaźnik */
.avail { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 0; color: var(--green); font-size: .92rem; }
.avail::before {
	content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--green);
	animation: pulse 2.2s infinite;
}
@keyframes pulse {
	0%   { box-shadow: 0 0 0 0 rgba(166,227,161,.5); }
	70%  { box-shadow: 0 0 0 7px rgba(166,227,161,0); }
	100% { box-shadow: 0 0 0 0 rgba(166,227,161,0); }
}

/* cat experience.txt — doświadczenie (z CV) */
.exp { display: grid; gap: 15px; margin-top: 4px; }
.exp__head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.exp__period { color: var(--sapphire); white-space: nowrap; font-size: .86rem; }
.exp__where { color: var(--text); font-weight: 700; }
.exp__points { margin: 6px 0 0; padding-left: 20px; color: var(--subtext); }
.exp__points li { margin: 3px 0; }
.exp__edu { margin-top: 4px; }

/* ls services/ — „pliki" */
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 6px; }
.file {
	display: flex; flex-direction: column; gap: 3px;
	background: var(--mantle); border: 1px solid var(--surface0);
	border-left: 3px solid var(--blue);
	border-radius: 10px; padding: 12px 14px;
	transition: border-color .15s, transform .15s;
}
.file:hover { border-color: var(--blue); border-left-color: var(--blue); transform: translateY(-2px); }
.file__name  { color: var(--sapphire); font-size: .82rem; }
.file__title { color: var(--text); font-weight: 700; font-size: .96rem; }
.file__desc  { color: var(--subtext); font-size: .84rem; }

/* cat stack.txt — stos technologiczny (z CV) */
.stack { display: grid; gap: 7px; margin-top: 4px; }
.stack__row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: baseline; }
.stack__label { color: var(--sapphire); }
.stack__items { color: var(--subtext); }
@media (max-width: 560px) {
	.stack__row { grid-template-columns: 1fr; gap: 0; margin-bottom: 6px; }
	.stack__label { color: var(--blue); }
}

/* cat contact.txt */
.contact { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 0; }
.contact__key { color: var(--peach); }
.contact__eq  { color: var(--overlay); }
.contact__val { color: var(--blue); font-weight: 700; text-decoration: none; }
.contact__val:hover { text-decoration: underline; }
.copy {
	background: transparent; color: var(--overlay);
	border: 1px solid var(--surface0); border-radius: 6px;
	padding: 2px 9px; font: inherit; font-size: .78rem; cursor: pointer;
}
.copy:hover { border-color: var(--green); color: var(--green); }

/* Migający kursor w ostatniej linii */
/* Blokowy kursor terminala: stały i przygaszony, gdy brak fokusu;
   jaskrawy i migający, gdy prompt ma fokus (jak w prawdziwej powłoce). */
.cursor {
	display: inline-block; width: 9px; height: 1.05em;
	background: var(--overlay); translate: 0 2px;
}
.runform:focus-within .cursor {
	background: var(--blue);
	animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* =======================  Klasyczna stopka (pod oknem)  ================== */
.site-footer {
	flex: 0 0 auto;
	width: min(820px, 100%);
	margin: 18px auto 0;
	padding: 0 8px;
	text-align: center;
	color: var(--subtext);
	font-size: .8rem;
	line-height: 1.75;
}
.site-footer__name { margin: 0 0 2px; color: var(--text); font-weight: 700; }
.site-footer__meta { margin: 0; color: var(--subtext); }
.site-footer__fine { margin: 8px 0 0; color: var(--overlay); font-size: .74rem; }

/* ===============================  Mobile  =============================== */
@media (max-width: 560px) {
	.desktop { padding-top: 52px; }
	.bar__center { display: none; }
	.bar__pill, .ws { font-size: .72rem; }
	.term { padding: 16px 16px 6px; }
	.files { grid-template-columns: 1fr; }
}