/*
 * oohost-cli — per-page styly (načítá se přes options.css stránky /cli).
 * Terminálový vzhled: tmavé pozadí, monospace a chladné brandové akcenty.
 */

/* Tmavší pozadí celé stránky + jemný "grid" podklad (cli.css se načítá jen na /cli). */
html, body { background-color: #07080b; }

body {
	background-image:
		radial-gradient(900px 460px at 14% -6%, #38b5f814, transparent 70%),
		radial-gradient(720px 400px at 92% 0%, #9569e914, transparent 70%),
		linear-gradient(#ffffff06 1px, transparent 1px),
		linear-gradient(90deg, #ffffff06 1px, transparent 1px);
	background-size: auto, auto, 46px 46px, 46px 46px;
	background-attachment: fixed, fixed, fixed, fixed;
}

footer { border-top: 1px solid #14161d; }

.cli {

	--term-bg: #08090d;
	--term-bar: #101218;
	--term-border: #21232c;
	--term-text: #c7cad3;
	--term-dim: #646879;

	/* chladná paleta pro zbytek stránky; terminál si drží klasickou zelenou */
	--term-accent: #3fb6ff;
	--term-green: #4ade80;
	--term-amber: #f2c14e;
	--term-rose: #ff7a90;

	font-family: var(--font-mono);
}

.cli h1, .cli h2, .cli h3, .cli h4 { font-family: var(--font-mono); letter-spacing: -.02em; }

/* ============ Společné prvky ============ */

.cli .cli-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-mono); font-size: 82%; font-weight: 700;
	letter-spacing: .1em; color: var(--term-accent);
}

.cli .cli-eyebrow svg { flex: none; width: 15px; height: 15px; display: block; }

.cli .cli-head { max-width: 780px; }
.cli .cli-head h2 { font-size: 36px; }
.cli .cli-head .subtitle { margin-top: 0; }

.cli .cli-section .inner { margin: 70px auto; }

/* Při skoku na kotvu (#instalace, #prikazy, …) nenecháme sekci nalepit
   na úplný horní okraj – přidáme odstup. */
.cli .cli-section { scroll-margin-top: 44px; }

.cli code { font-size: 92%; color: var(--c-brand-2); }

/* Blikající kurzor */
.cli-cursor {
	display: inline-block; width: 4px; height: 1.05em; margin-left: 3px;
	vertical-align: -2px; background-color: var(--term-accent);
	animation: cli-blink 1.1s steps(1) infinite;
}

@keyframes cli-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ============ Hero ============ */

.cli-hero { position: relative; overflow: hidden; }

.cli-hero-inner {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center;
}

.cli-hero h1 { font-size: 50px; margin: 22px 0 16px; font-weight: 800; }

.cli-install {
	display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
	margin: 0 0 4px; padding: 14px 20px; overflow-x: auto;
	font-family: var(--font-mono); color: var(--term-text);
	background-color: var(--term-bg); border: 1px solid var(--term-border); border-radius: 10px;
	box-shadow: 0 1px 0 #ffffff0a inset, 0 14px 30px -26px #000;

	code { color: var(--term-text); font-size: 108%; white-space: nowrap; }
	.cli-prompt { color: var(--term-accent); font-weight: 700; }
}

/* přepínač správce balíčků */
.cli-pm {
	display: inline-flex; gap: 4px; padding: 4px; margin: 26px 0 10px;
	background-color: #0a0b10; border: 1px solid var(--term-border); border-radius: 10px;
}

.cli-pm-tab {
	font: inherit; font-family: var(--font-mono); font-size: 88%; line-height: 1;
	color: var(--term-dim); background: transparent; border: 0; border-radius: 7px;
	padding: 6px 13px; cursor: pointer; transition: color .15s, background-color .15s;
}

.cli-pm-tab:hover { color: var(--term-text); }
.cli-pm-tab.active { color: #eef0f6; background-color: #191c25; }

/* kopírování příkazu */
.cli-copy {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 30px; height: 30px; padding: 0; margin-left: 2px;
	color: var(--term-dim); background: transparent;
	border: 1px solid transparent; border-radius: 8px; cursor: pointer;
	transition: color .15s, background-color .15s, border-color .15s;
}

.cli-copy:hover { color: var(--term-text); background-color: #ffffff0a; border-color: var(--term-border); }
.cli-copy svg { width: 16px; height: 16px; display: block; }
.cli-copy .icon-check { display: none; }
.cli-copy.copied { color: var(--term-green); border-color: #4ade8040; background-color: #4ade8012; }
.cli-copy.copied .icon-copy { display: none; }
.cli-copy.copied .icon-check { display: inline; }

/* ============ Terminálové okno ============ */

.terminal {
	position: relative;
	background-color: var(--term-bg); border: 1px solid var(--term-border); border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 1px 0 #ffffff0a inset, 0 22px 48px -30px #000, 0 4px 12px -6px #000a;
}

/* jemný zářez světla u horní hrany */
.terminal::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 3;
	background: linear-gradient(90deg, transparent, #ffffff14, transparent);
}

/* jemné "scanlines" přes obsah terminálu */
.terminal::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
	background-image: repeating-linear-gradient(#ffffff00 0 2px, #ffffff04 2px 3px);
	background-size: 100% 3px;
}

.terminal-bar {
	position: relative; z-index: 3;
	display: flex; align-items: center; gap: 8px; padding: 12px 16px;
	background-color: var(--term-bar); border-bottom: 1px solid var(--term-border);
}

.terminal-bar i { width: 11px; height: 11px; border-radius: 50%; background: #353846; }
.terminal-bar i:nth-child(1) { background: #ff5f57; }
.terminal-bar i:nth-child(2) { background: #febc2e; }
.terminal-bar i:nth-child(3) { background: #28c840; }

.terminal-bar em {
	margin-left: 10px; font-style: normal; font-family: var(--font-mono);
	font-size: 82%; color: var(--term-dim);
}

.terminal-body {
	position: relative; z-index: 1;
	margin: 0; padding: 16px 16px; overflow-x: auto;
	font-family: var(--font-mono); font-size: clamp(11px, 1.55vw, 13.5px); line-height: 1.65;
	color: var(--term-text); white-space: pre;
	-moz-tab-size: 4; tab-size: 4;
}

.cli-hero-terminal { transform: perspective(1500px) rotateY(-6deg) rotateX(2deg); }

/* Na desktopu necháme terminál o kus vyšší (na mobilu ne). */
@media (min-width: 951px) {
	.cli-hero-terminal .terminal-body { min-height: 230px; }
}

/* Terminálové tokeny */
.t-prompt { color: var(--term-green); font-weight: 700; }
.t-cmd, .t-bold { color: #eef0f6; font-weight: 700; }
.t-dim { color: var(--term-dim); }
.t-added { color: var(--term-green); }
.t-changed { color: var(--term-amber); }
.t-deleted { color: var(--term-rose); }
.t-success { color: var(--term-green); font-weight: 700; }

/* ============ Instalace ============ */

.cli-install-grid {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px;
	align-items: center; margin-top: 40px;
}

.cli-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.cli-notes li { position: relative; padding-left: 24px; line-height: 1.55; }

.cli-notes li::before {
	content: "$"; position: absolute; left: 0; top: 0;
	color: var(--term-accent); font-weight: 700;
}

.cli-notes b { color: #eef0f6; }

.cli-notes code {
	font-family: var(--font-mono); color: var(--term-text);
	background-color: #101218; border: 1px solid var(--term-border);
	border-radius: 5px; padding: 1px 6px; font-size: 88%;
}

/* ============ Příkazy ============ */

.cli-cmdlist { margin-top: 34px; border-top: 1px solid var(--term-border); }

.cli-cmdrow {
	display: grid; grid-template-columns: minmax(240px, 330px) 1fr; gap: 28px;
	align-items: baseline; padding: 16px 4px;
	border-bottom: 1px solid var(--term-border);
}

.cli-cmdrow code { font-family: var(--font-mono); font-size: 100%; font-weight: 700; color: #eef0f6; white-space: nowrap; }
.cli-cmdrow code::before { content: "$ "; color: var(--term-accent); }
.cli-cmdrow .cli-arg { color: var(--term-accent); }
.cli-cmdrow p { margin: 0; color: var(--c-text); }

@media (max-width: 700px) {
	.cli-cmdrow { grid-template-columns: 1fr; gap: 6px; }
	.cli-cmdrow code { white-space: normal; }
}

/* ============ Konfigurace ============ */

.cli-two {
	display: grid; grid-template-columns: 1.15fr .85fr; gap: 26px;
	align-items: center; margin-top: 40px;
}

.cli-table { width: 100%; border-collapse: collapse; font-size: 92%; }

.cli-table th, .cli-table td {
	text-align: left; vertical-align: top; padding: 12px;
	border-bottom: 1px solid var(--term-border);
}

.cli-table th { width: 40%; font-weight: 700; }
.cli-table th code { color: var(--term-accent); }
.cli-table td code { color: #eef0f6; }
.cli-table tr:last-child th, .cli-table tr:last-child td { border-bottom: none; }

.cli-hint { font-size: 88%; color: var(--term-dim); margin-top: 16px; }
.cli-hint code { color: #eef0f6; }

/* ============ Jak to funguje ============ */

.cli-steps {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px;
}

.cli-step {
	background-color: #0a0b10; border: 1px solid var(--term-border); border-radius: 10px;
	padding: 24px; box-shadow: 0 1px 0 #ffffff08 inset, 0 16px 34px -30px #000;
}

.cli-step > span {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; margin-bottom: 14px; border-radius: 8px;
	font-family: var(--font-mono); font-weight: 700; color: var(--term-accent);
	background-color: #3fb6ff12; border: 1px solid #3fb6ff3d;
}

.cli-step h3 { margin: 0 0 8px; font-size: 19px; }
.cli-step p { margin: 0; color: var(--c-text); }

/* ============ CTA ============ */

.cli-cta-panel {
	border: 1px solid var(--term-border); border-radius: 16px; padding: 55px 30px;
	background-color: #0a0b10;
	background-image: radial-gradient(closest-side, #38b5f812, transparent);
	background-position: 50% 0; background-size: 700px 400px; background-repeat: no-repeat;
	box-shadow: 0 1px 0 #ffffff08 inset, 0 30px 60px -45px #000;
}

.cli-cta-panel h2 { margin-top: 0; }
.cli-cta-panel .btn-row { margin-bottom: 0; }

/* ============ Responzivita ============ */

@media (max-width: 950px) {
	.cli-hero h1 { font-size: 38px; }
	.cli-hero-inner { grid-template-columns: 1fr; gap: 35px; }
	.cli-hero-terminal { transform: none; }
	.cli-install-grid { grid-template-columns: 1fr; }
	.cli-two { grid-template-columns: 1fr; }
	.cli-steps { grid-template-columns: 1fr; }
	.cli .cli-head h2 { font-size: 29px; }

	/* Mobil: pevná minimální výška terminálu, aby animace nehýbala stránkou.
	   6 řádků × line-height 1.65em + svislý padding (32px). */
	.cli-hero-terminal .terminal-body { min-height: calc(6 * 1.65em + 32px); }
}

@media (max-width: 500px) {
	.cli-hero h1 { font-size: 31px; }
	.cli-cta-panel { padding: 35px 20px; }
}