/* Ready-to-copy prompt cards inside articles.
   Two faces of the same component: a Persian prompt reads as a quoted card on warm paper,
   real LTR code gets the dark editor treatment where a monospace face belongs. */

.hy-code {
	--hyc-ink: #1E1C26; --hyc-soft: #6F7480; --hyc-line: #E6E9F0; --hyc-accent: #EE6B65;
	position: relative; margin: 26px 0; border-radius: 18px; overflow: hidden;
	background: linear-gradient(180deg, #FFFDFC 0%, #F7F8FA 100%);
	border: 1px solid var(--hyc-line);
	box-shadow: 0 14px 30px -26px rgba(20, 24, 40, .55);
}
/* the accent rail that marks the card as "something to take with you" */
.hy-code::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: linear-gradient(180deg, var(--hyc-accent), #F6A14C); }

.hy-code-bar { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--hyc-line); background: rgba(255, 255, 255, .55); }
.hy-code-mark { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: rgba(238, 107, 101, .1); color: var(--hyc-accent); }
.hy-code-mark svg { width: 16px; height: 16px; }
.hy-code-label { font-size: 12.5px; font-weight: 700; color: var(--hyc-soft); letter-spacing: .01em; }
.hy-code-copy { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border: 0; border-radius: 999px; background: var(--hyc-ink); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .16s, transform .12s; }
.hy-code-copy:hover { background: #33313E; transform: translateY(-1px); }
.hy-code-copy:focus-visible { outline: 2px solid var(--hyc-accent); outline-offset: 2px; }
.hy-code-copy.is-done { background: #2E9E68; }
.hy-code-i-done { display: none; }
.hy-code-copy.is-done .hy-code-i-copy { display: none; }
.hy-code-copy.is-done .hy-code-i-done { display: inline-block; }

/* the browser's monospace mangles Persian: keep the site's own face, just quieter and roomier */
.hy-code pre { margin: 0 !important; padding: 18px 20px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: var(--hyc-ink) !important;
	font-family: inherit !important; font-size: 14.5px !important; line-height: 2.15 !important; white-space: pre-wrap !important; word-break: break-word; overflow-wrap: anywhere; max-height: 430px; overflow: auto; }
.hy-code pre code { font: inherit !important; background: none !important; padding: 0 !important; color: inherit !important; }
.hy-code pre::-webkit-scrollbar { width: 10px; }
.hy-code pre::-webkit-scrollbar-thumb { background: rgba(30, 28, 38, .16); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

/* real code: dark panel, monospace, left to right */
.hy-code--mono { --hyc-line: rgba(255,255,255,.08); background: linear-gradient(180deg, #23212E 0%, #191722 100%); border-color: rgba(255,255,255,.09); }
.hy-code--mono::before { background: linear-gradient(180deg, #5BC97F, #3B9AE0); }
.hy-code--mono .hy-code-bar { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.08); }
.hy-code--mono .hy-code-mark { background: rgba(91, 201, 127, .14); color: #7FE0A3; }
.hy-code--mono .hy-code-label { color: #9AA0B4; }
.hy-code--mono .hy-code-copy { background: rgba(255,255,255,.1); color: #E6E9F2; }
.hy-code--mono .hy-code-copy:hover { background: rgba(255,255,255,.18); }
.hy-code--mono pre { color: #E8EAF2 !important; font-family: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 13.5px !important; line-height: 1.95 !important; text-align: left; }
.hy-code--mono pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border: 3px solid transparent; background-clip: content-box; }

/* inline code in the prose: a quiet chip, never a monospace mess */
.entry-content code:not(pre code), .l-section code:not(pre code) { font-family: inherit; font-size: .94em; padding: 2px 7px; border-radius: 7px; background: #F1F2F6; color: #1E1C26; border: 1px solid #E6E9F0; }

@media (max-width: 600px) {
	.hy-code { margin: 20px 0; border-radius: 16px; }
	.hy-code pre { padding: 15px 16px !important; font-size: 14px !important; }
	.hy-code-bar { padding: 10px 13px; }
	.hy-code-copy { padding: 7px 13px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .hy-code-copy { transition: none; } .hy-code-copy:hover { transform: none; } }

html.hy-dark .hy-code, body.hy-dark .hy-code { background: linear-gradient(180deg, #20212B 0%, #1B1C24 100%); border-color: #2A2B36; --hyc-line: #2A2B36; }
html.hy-dark .hy-code-bar, body.hy-dark .hy-code-bar { background: rgba(255,255,255,.03); }
html.hy-dark .hy-code-label, body.hy-dark .hy-code-label { color: #9AA0B4; }
html.hy-dark .hy-code pre, body.hy-dark .hy-code pre { color: #F3F4F8 !important; }
html.hy-dark .hy-code-copy, body.hy-dark .hy-code-copy { background: rgba(255,255,255,.12); color: #EDEFF5; }