@charset "utf-8";

/* ==========================================================================
   ui.css | AssafMedia — ספריית הרכיבים
   פיצול מותר לפי תקנון הקידוד: main.css = Layout, ui.css = קומפוננטות.
   כל רכיב כאן אגנוסטי למיקומו במסך. אין סלקטורי #id, אין ערכים קשיחים.
   הווריאציות מגיעות ממחלקות ה-theme* שב-theme.css דרך --tone_*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   כפתור ראשי
   -------------------------------------------------------------------------- */
.main_button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space_5);
	padding-block: var(--space_8);
	padding-inline: var(--space_11);
	letter-spacing: var(--letter_spacing_loose);
	border: var(--width_border) solid transparent;
	border-radius: var(--radius_button);
	background-color: var(--tone_main);
	color: var(--tone_ink);
	font-family: var(--font_main);
	font-size: var(--text_md);
	font-weight: var(--weight_bold);
	line-height: var(--line_height_tight);
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--shadow_button);
	margin-block-end: var(--space_4);	
}

.main_button:hover {
	background-color: var(--color3_soft);
	box-shadow: var(--shadow_button_hover);
	transform-origin: center center;
	transform: translateY( calc( var(--shift_hover) * -1 ) ) scale(1.1);
	rotate: -2deg;
}

.main_button.sm{
	gap: var(--space_5);
	padding-block: var(--space_5);
	padding-inline: var(--space_9);
	font-size: var(--text_sm);
}

.main_button:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.main_button:disabled,
.main_button[aria-disabled="true"] {
	background-color: var(--color_text_soft);
	box-shadow: none;
	cursor: not-allowed;
	opacity: 0.65;
	transform: none;
}

/* --------------------------------------------------------------------------
   כפתור מסגרת
   -------------------------------------------------------------------------- */
.outline_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space_3);
	padding-block: var(--space_6);
	padding-inline: var(--space_12);
	border: var(--width_pixel) solid var(--tone_main);
	border-radius: var(--radius_button);
	background-color: transparent;
	color: var(--tone_main);
	font-family: var(--font_main);
	font-size: var(--text_lg);
	font-weight: var(--weight_regular);
	line-height: var(--line_height_base);
	text-decoration: none;
	cursor: pointer;
}

.outline_button:hover {
	background-color: var(--tone_main);
	color: var(--tone_ink);
	transform: translateY(calc(var(--shift_hover) * -1));
}

.outline_button:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.outline_button:disabled,
.outline_button[aria-disabled="true"] {
	border-color: var(--color_text_soft);
	color: var(--color_text_soft);
	cursor: not-allowed;
	opacity: 0.65;
	transform: none;
}

.button_icon {
	display: block;
	inline-size: var(--size_icon_glyph);
	block-size: auto;
	image-rendering: pixelated;
}

/* --------------------------------------------------------------------------
   אייקון עגול (קישורי רשת חברתית)
   -------------------------------------------------------------------------- */
.round_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--size_icon_round);
	block-size: var(--size_icon_round);
	border: none;
	border-radius: var(--radius_pill);
	background-color: var(--tone_main);
	color: var(--tone_ink);
	cursor: pointer;
}

.round_icon:hover {
	background-color: var(--tone_deep);
	transform: translateY(calc(var(--shift_hover) * -1));
}

.round_icon:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.round_icon svg {
	inline-size: var(--size_icon_glyph);
	block-size: var(--size_icon_glyph);
	fill: currentcolor;
}

/* --------------------------------------------------------------------------
   אייקון ריבוע מעוגל (יצירת קשר) — טקסט פיקסלי בתוך ריבוע צבעוני
   -------------------------------------------------------------------------- */
.square_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--size_icon_square);
	block-size: var(--size_icon_square);
	border-radius: var(--radius_icon);
	background-color: var(--tone_main);
	color: var(--tone_ink);
	font-family: var(--font_pixel);
	font-size: var(--text_lg);
	line-height: var(--line_height_tight);
	text-decoration: none;
}

.square_icon:hover {
	background-color: var(--tone_deep);
	box-shadow: var(--shadow_card_hover);
	transform: translateY(calc(var(--shift_hover) * -1)) rotate(var(--tilt_rpg));
}

.square_icon:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.icon_caption {
	display: block;
	margin-block-start: var(--space_2);
	color: var(--color1);
	font-size: var(--text_xs);
	font-weight: var(--weight_medium);
	text-align: center;
}

/* --------------------------------------------------------------------------
   כפתור אייקון שקוף (סגירת חלונות)
   -------------------------------------------------------------------------- */
.icon_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--space_7);
	block-size: var(--space_7);
	padding: 0;
	border: none;
	border-radius: var(--radius_pill);
	background-color: transparent;
	color: currentcolor;
	font-family: var(--font_pixel);
	font-size: var(--text_xs);
	cursor: pointer;
}

.icon_button:hover {
	background-color: var(--color_line);
}

.icon_button:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

/* --------------------------------------------------------------------------
   תגית (chip / pill)
   -------------------------------------------------------------------------- */
.chip {
	display: inline-flex;
	align-items: center;
	padding-block: var(--space_2);
	padding-inline: var(--space_6);
	border: var(--width_border) solid transparent;
	border-radius: var(--radius_pill);
	background-color: var(--tone_soft);
	color: var(--tone_deep);
	font-size: var(--font_size_-10);
	font-weight: var(--weight_thin);
	line-height: var(--line_height_base);
	text-decoration: none;
}

.chip.solid {
	background-color: var(--tone_main);
	color: var(--tone_ink);
}

a.chip:hover {
	background-color: var(--tone_main);
	color: var(--tone_ink);
}

a.chip:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

/* --------------------------------------------------------------------------
   מטבע
   -------------------------------------------------------------------------- */
.coin {
	display: inline-block;
	flex: none;
	inline-size: var(--size_coin);
	block-size: var(--size_coin);
	background-image: url("../images/coin.png?v=2");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	image-rendering: pixelated;
	vertical-align: middle;
}

.coin.big {
	inline-size: var(--size_coin_lg);
	block-size: var(--size_coin_lg);
}

.coin_button {
	padding: var(--space_1);
	border: none;
	border-radius: var(--radius_pill);
	background-color: transparent;
	cursor: pointer;
	line-height: 0;
}

.coin_button:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.coin_counter {
	display: inline-flex;
	align-items: center;
	gap: var(--space_4);
	color: var(--color1);
	font-family: var(--font_pixel);
	font-size: var(--text_md_larger)
}

.coin_badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space_2);
	padding-block: var(--space_2);
	padding-inline: var(--space_3);
	border-radius: var(--radius_pixel);
	background-color: var(--color_badge);
	color: var(--color1);
	font-size: var(--font_size_-9);
	font-weight: var(--weight_medium);
	
/* 	-webkit-backdrop-filter: blur(var(--blur_glass));
	backdrop-filter: blur(var(--blur_glass));
	
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000;
	transform: translate3d(0,0,0);
	transform: translateZ(0); */	
}

/* --------------------------------------------------------------------------
   כותרות סקשן ותוויות פיקסליות
   -------------------------------------------------------------------------- */
.section_title {
	margin: 0;
	color: var(--color_text);
	font-size: var(--text_2xl);
	font-weight: var(--weight_bold);
	line-height: var(--line_height_tight);
}

.pixel_label {
	display: inline-block;
	color: var(--tone_main);
	font-family: var(--font_pixel);
	font-size: var(--text_base_larger);
	letter-spacing: var(--tracking_pixel);
	line-height: var(--line_height_base);
	text-transform: uppercase;
	width: 100%;
	text-align: center;
	margin-block-start: var(--space_1);
	margin-block-end: var(--space_1);
}

.pixel_label.big {
	font-size: var(--text_lg);
}

/* --------------------------------------------------------------------------
   טקסט כתב-יד
   -------------------------------------------------------------------------- */
.hand_text {
	display: block;
	margin: 0;
	color: var(--tone_deep);
	font-family: var(--font_hand);
	font-weight: var(--weight_regular);
	line-height: var(--line_height_base);
	letter-spacing: var(--letter_spacing_loose);
}

.hand_text .en{
	font-family: var(--font_hand_eng);
}

.hand_text.theme1{
	color: var(--color1);	
}

.hand_text.theme1_deep{
	color: var(--color1_deep);	
}

.hand_text.theme2{
	color: var(--color3_soft);	
}

.hand_text.theme2_soft{
	color: var(--color3_soft);	
}


.hand_text.theme2_softer{
	color: var(--color3_soft);	
}

.hand_text.theme3{
	color: var(--color2);	
}

.hand_text.theme3_soft{
	color: var(--color3_soft);	
}

.hand_text.theme4{
	color: var(--color2_deep);	
}

.hand_text.muted{
	color: var(--color_text_muted);	
}


.hand_text.extra_loose_letter_spaicing{
	letter-spacing: var(--letter_spacing_extra_loose);
}

.hand_text.inline {
	display: inline;
}

.hand_text.xsmall {
}

.hand_text.small {
}

.hand_text.underline {
	position: relative;
}

.hand_text.underline:after{
	position: absolute;
	content: "";
	width: 91%;
	height: 2px;
	background-color: var(--color1_deep);
	top: calc( 100% - var(--space_4) );
	right: 0;
	z-index: -1;
}

/* --------------------------------------------------------------------------
   קישור חץ ("<< לקריאה")
   -------------------------------------------------------------------------- */
.link_arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space_2);
	color: var(--tone_main);
	font-family: var(--font_hand);
	font-size: var(--text_hand_sm);
	text-decoration: none;
	margin-inline-end: var(--space_3);
}

.link_arrow:after{
	content: "\f100";
	font-family: FontAwesome;
	font-size: var(--text_hand_xs);
	zoom: 0.8;
	translate: 0 8%;
	margin-inline-start: 11px;
}

.link_arrow:hover {
	color: var(--color1);
	text-decoration: none;
}

.link_arrow:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

/* --------------------------------------------------------------------------
   שורת סטטוס חיה
   -------------------------------------------------------------------------- */
.status_line {
	display: inline-flex;
	align-items: center;
	gap: var(--space_4);
	padding-block-start: var(--space_7);
	color: var(--color_text_muted);
	font-size: var(--text_base);
	margin-block-end: calc( var(--space_5) * -1);
}

.status_dot {
	display: inline-block;
	flex: none;
	inline-size: var(--size_status_dot);
	block-size: var(--size_status_dot);
	border-radius: var(--radius_pill);
	background-color: var(--color5);
}

.status_dot[data-status="online"]{
	background: var(--color5);
}

.status_dot[data-status="busy"]{
	background: var(--color3);
}

.status_dot[data-status="offline"]{
	background: var(--color_line);
}

.glass_panel{
	--borderColor1: rgba(255,255,255,0.9);
	--borderColor2: rgba(0,0,0,0.63);
	
	padding: clamp(var(--space_11), 4.2vw, var(--space_11));
	border: var(--width_border) solid var(--color_line);
	border-radius: var(--radius_panel);
	background-color: var(--color_glass);
	font-size: var(--text_3xl);
	margin-block-end: var(--space_12);
	
	box-shadow: 
		0 -4px var(--borderColor1),
		0 -8px var(--borderColor2),
		4px 0 var(--borderColor1),
		4px -4px var(--borderColor2),
		8px 0 var(--borderColor2),
		0 4px var(--borderColor1),
		0 8px var(--borderColor2),
		-4px 0 var(--borderColor1),
		-4px 4px var(--borderColor2),
		-8px 0 var(--borderColor2),
		-4px -4px var(--borderColor2),
		4px 4px var(--borderColor2);
		
	border-radius: 0;	
}



.glass_panel.flat {
	background-color: var(--color_glass_strong);
	box-shadow: 0 -4px #fff, 0 -8px #000, 4px 0 #fff, 4px -4px #000, 8px 0 #000, 0 4px #fff, 0 8px #000, -4px 0 #fff, -4px 4px #000, -8px 0 #000, -4px -4px #000, 4px 4px #000 !important;	
	border-radius: 0;
	
}

.glass_panel .story_body{
	--tilt: var(--tilt_story);
	transform: rotate(var(--tilt));
}


.rpg_panel{
	--tilt: var(--tilt_rpg);
	--my_font_size: calc( var(--font_size) * 1 );
	
	font-size: var(--my_font_size);
	
	--borderColor1: rgba(0,0,0,0.63);	
	--borderColor2: rgba(255,255,255,0.9);
	
	padding: clamp(var(--space_11), 4.2vw, var(--space_11));
	border-radius: var(--radius_panel);
	background-color: var(--color2);
	
	color: var(--color_base);

	line-height: var(--line_height_extra_loose);

	transform: rotate(var(--tilt));
	translate: 6.3% 7.2%;
	scale: 1;
}

.rpg_head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space_4);
	align-items: center;	
}

.rpg_subhead {
	display: flex;
	justify-content: space-between;
	gap: var(--space_4);
	padding-block-end: var(--space_8);
	border-block-end: var(--width_border) solid var(--color_line_invert);	
	align-items: center;	
}

.rpg_name {
	margin: 0;
	color: var(--color6);
	font-family: var(--font_pixel);
	font-size: calc( var(--my_font_size) * 1.8 );
	letter-spacing: var(--tracking_pixel);
}

.rpg_nickname {
	margin: 0;
	color: var(--color6);
	font-family: var(--font_pixel);
	font-size: calc( var(--my_font_size) * 1.3 );
	letter-spacing: var(--tracking_pixel);
}

.rpg_role {
	margin: 0;
	font-family: var(--font_pixel);
	color: var(--color_footer_text);
	font-size: calc( var(--my_font_size) * 0.91 );
}

.rpg_level {
	margin: 0;
	color: var(--color_base);
	font-family: var(--font_pixel);
	font-size: calc( var(--my_font_size) * 1.8 );
	line-height: var(--line_height_base);
	text-align: left;
}

.rpg_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_4);
	margin-block-start: var(--space_5);
	padding-block-start: var(--space_4);
	border-block-start: var(--width_border) solid var(--color_line_invert);
	color: var(--color_footer_text);
	font-size: calc( var(--my_font_size) * 2 );
	justify-content: left;
	width: 100%;	
}

.bar_row {
	margin-block-start: var(--space_8);
}

.bar_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space_6);
	margin-block-start: var(--space_5);
	margin-block-end: 0;
	color: var(--color_footer_text);
	font-family: var(--font_pixel);
	font-size: var(--text_lg);
	letter-spacing: var(--tracking_pixel);
}

.rpg_panel .sarcastic_sentence{
	display: inline;
	padding-inline-start: var(--space_3);
	font-size: calc( var(--my_font_size) * 1.1 );
	font-family: var(--font_hand);
	color: var(--tone_main);
	letter-spacing: 2%;
}

.bar {
	--fill: 50%;
	block-size: var(--size_bar);
	border-radius: var(--radius_pixel);
	background-color: var(--color2_deep);
	overflow: hidden;
}

.bar_fill {
	display: block;
	inline-size: var(--fill);
	block-size: 100%;
	border-radius: var(--radius_pixel);
	background-color: var(--tone_main);
	background-image: linear-gradient(
		135deg,
		color-mix(in srgb, var(--color_base) 26%, transparent) 25%,
		transparent 25%,
		transparent 50%,
		color-mix(in srgb, var(--color_base) 26%, transparent) 50%,
		color-mix(in srgb, var(--color_base) 26%, transparent) 75%,
		transparent 75%
	);
	background-size: var(--space_5) var(--space_5);
}

.skill_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_4);
	font-family: var(--font_pixel);
	margin-block-start: var(--space_3);
	color: var(--color_base);
	font-size: var(--text_lg);
}

.skill_pixels {
	display: inline-flex;
	gap: var(--space_1);
}

.skill_pixel {
	display: inline-block;
	inline-size: var(--size_skill_pixel);
	block-size: var(--size_skill_pixel);
	background-color: var(--color2_deep);
}

.skill_pixel.on {
	background-color: var(--color1);
}

/* --------------------------------------------------------------------------
   כרטיס פוסט
   -------------------------------------------------------------------------- */
.post_card {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	border-radius: var(--radius_card);
	background-color: var(--color_surface);
	box-shadow: var(--shadow_card);
	overflow: hidden;
}

.post_card:hover {
	box-shadow: var(--shadow_card_hover);
	transform: translateY(calc(var(--shift_hover) * -1));
}

.post_card:focus-within {
	box-shadow: var(--shadow_card_hover);
}

.post_media {
	position: relative;
	display: block;
	block-size: var(--size_post_image);
	background-color: var(--color2_softer);
	overflow: hidden;
}

.post_media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	image-rendering: pixelated;
}

.post_media .coin_badge {
	position: absolute;
	inset-block-end: var(--space_4);
	inset-inline-end: var(--space_4);
}

.post_body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space_8);
	padding: var(--space_8);
}

.post_title {
	margin: 0;
	color: var(--color_text);
	font-size: var(--text_md);
	font-weight: var(--weight_bold);
	line-height: var(--line_height_base);
}

.post_title a {
	color: inherit;
	text-decoration: none;
}

.post_title a:hover {
	color: var(--color1);
}

.post_title a:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.post_excerpt {
	flex: 1;
	margin: 0;
	color: var(--color_text_muted);
	font-size: var(--text_md);
	line-height: var(--line_height_base);
	
	font-size: var(--font_size);
	font-weight: var(--weight_thin);	
}

.post_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_3);
	margin-block-start: var(--space_2);
}

.chip_group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_2);
}

/* --------------------------------------------------------------------------
   כרטיס ניווט לפוסט הבא
   -------------------------------------------------------------------------- */
.next_card {
	display: block;
	block-size: 100%;
	padding: var(--space_5);
	border-radius: var(--radius_card);
	background-color: var(--color_glass_strong);
	box-shadow: var(--shadow_card);
	color: var(--color_text);
	text-decoration: none;
}

.next_card:hover {
	box-shadow: var(--shadow_card_hover);
	transform: translateY(calc(var(--shift_hover) * -1));
}

.next_card:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

#speech_bubble{
	display: none;
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	max-inline-size: unset;
	padding-block: var(--space_3);
	padding-inline: var(--space_4);
	background-color: var(--color_base);
	color: var(--color_text);
	font-size: var(--text_sm);
	line-height: var(--line_height_base);
	opacity: 0;
	visibility: hidden;
		
	text-align: center;
	
	font-size: var(--text_lg);
	box-shadow: 0 -4px #fff, 0 -8px #000, 4px 0 #fff, 4px -4px #000, 8px 0 #000, 0 4px #fff, 0 8px #000, -4px 0 #fff, -4px 4px #000, -8px 0 #000, -4px -4px #000, 4px 4px #000 !important;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;		
}

#speech_bubble::after {
	content: "";
	display: block;
	position: absolute;
	box-sizing: border-box;
	
	height: 4px;
	width: 4px;
	top: 20px;
	left: -8px;
	
	background: white;
	box-shadow: -4px -4px #fff, -4px 0 #fff, -8px 0 #fff, 0 -8px #fff, -4px 4px #000, -8px 4px #000, -12px 4px #000, -16px 4px #000, -12px 0 #000, -8px -4px #000, -4px -8px #000, 0 -4px #fff;
}

#speech_bubble.shown{
	display: block;
	opacity: 1;
	visibility: visible;
	z-index: 20;
	font-family: var(--font_pixel_he);
	font-size: var(--text_lg);
	padding: var(--space_3) var(--space_10);
	letter-spacing: var(--letter_spacing_extra_loose);	
}

/* --------------------------------------------------------------------------
   בלוק קוד
   -------------------------------------------------------------------------- */
.code_block {
	direction: ltr;
	margin-block: var(--space_5);
	padding: var(--space_5);
	border-radius: var(--radius_card);
	background-color: var(--color_code_bg);
	color: var(--color_code_text);
	font-family: var(--font_code);
	font-size: var(--text_sm);
	line-height: var(--line_height_base);
	text-align: start;
	overflow-x: auto;
}

.code_block code {
	color: inherit;
	font-family: inherit;
	white-space: pre;
}

/* --------------------------------------------------------------------------
   טוסט
   -------------------------------------------------------------------------- */
.toast {
	position: fixed;
	inset-block-start: var(--space_9);
	inset-inline-start: 50%;
	z-index: var(--z_toast);
	padding-block: var(--space_3);
	padding-inline: var(--space_12);
	background-color: var(--color2_deep);
	color: var(--color4);
	font-family: var(--font_pixel);
	font-size: var(--text_lg);
	opacity: 0;
	visibility: hidden;
	transform: translateX(50%);

	text-align: center;
	letter-spacing: var(--letter_spacing_tight);
	word-spacing: 42%;
	top: unset;
	bottom: 2dvh;
	opacity: 0.91;
	font-weight: bolder;
	
/* 	backdrop-filter: blur(var(--blur_glass));
	-webkit-backdrop-filter: blur(var(--blur_glass));

	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	backface-visibility: hidden;
	perspective: 1000; */
}

.toast.shown {
	opacity: 1;
	visibility: visible;
	display: block;
}

.toast.shown:not(.show){
	display: block;
}

.terminal {
	position: fixed;
	inset: 0;
	z-index: var(--z_terminal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space_5);
	background-color: var(--color_overlay);
	opacity: 0;
	visibility: hidden;
}

.terminal.shown {
	opacity: 1;
	visibility: visible;
}

.terminal_window {
	direction: ltr;
	inline-size: 100%;
	max-inline-size: var(--size_terminal);
	border: var(--width_pixel) solid var(--color_terminal_text);
	border-radius: var(--radius_pixel);
	background-color: var(--color_terminal_bg);
	color: var(--color_terminal_text);
	font-family: var(--font_code);
	font-size: var(--text_sm);
	box-shadow: var(--shadow_terminal);
	text-align: start;
}

.terminal_bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space_4);
	padding-block: var(--space_2);
	padding-inline: var(--space_4);
	border-block-end: var(--width_border) solid var(--color_terminal_dim);
	font-family: var(--font_pixel);
	font-size: var(--text_micro);
	letter-spacing: var(--tracking_pixel);
}

.terminal_body {
	block-size: var(--size_terminal_body);
	padding: var(--space_4);
	line-height: var(--line_height_base);
	white-space: pre-wrap;
	overflow-y: auto;
}

.terminal_prompt {
	display: flex;
	align-items: center;
	gap: var(--space_2);
	padding-block: var(--space_3);
	padding-inline: var(--space_4);
	border-block-start: var(--width_border) solid var(--color_terminal_dim);
}

.terminal_input {
	flex: 1;
	border: none;
	background-color: transparent;
	color: var(--color_terminal_text);
	font-family: var(--font_code);
	font-size: var(--text_sm);
}

.terminal_input:focus-visible {
	outline: var(--width_focus) solid var(--color_terminal_text);
	outline-offset: var(--space_1);
}

.terminal_cursor {
	border: none;
	background-color: transparent;
	color: var(--color6);
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

.terminal_cursor:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

/* --------------------------------------------------------------------------
   פירורי לחם
   -------------------------------------------------------------------------- */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space_2);
	margin: 0;
	padding: 0;
	color: var(--color_text_muted);
	font-size: var(--text_sm);
	list-style: none;
}

.breadcrumbs a {
	color: var(--color1);
	text-decoration: none;
}

.breadcrumbs a:hover {
	text-decoration: underline;
}

.breadcrumbs a:focus-visible {
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

/* --------------------------------------------------------------------------
   שורת מחבר
   -------------------------------------------------------------------------- */
.author_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space_4);
	color: var(--color_text_muted);
	font-size: var(--text_sm);
}

.author_avatar {
	inline-size: var(--size_avatar);
	block-size: var(--size_avatar);
	border-radius: var(--radius_pill);
	background-color: var(--color_base2);
	image-rendering: pixelated;
	object-fit: cover;
}

.author_name {
	color: var(--color_text);
	font-weight: var(--weight_bold);
}

/* --------------------------------------------------------------------------
   פס התקדמות קריאה
   -------------------------------------------------------------------------- */
.reading_bar {
	position: fixed;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: var(--z_reading);
	block-size: var(--size_reading_bar);
	background-color: var(--color2_deep);
}

.reading_track {
	position: relative;
	block-size: 100%;
	max-inline-size: var(--desktop_max);
	margin-inline: auto;
}

.reading_runner {
	--progress: 0%;
	position: absolute;
	inset-block-end: var(--space_2);
	inset-inline-start: var(--progress);
	inline-size: var(--size_runner);
	block-size: var(--size_runner);
	image-rendering: pixelated;
	transform: translateX(50%);
}

.reading_coin {
	--progress: 0%;
	position: absolute;
	inset-block-end: var(--space_3);
	inset-inline-start: var(--progress);
	transform: translateX(50%);
}

.reading_coin.taken {
	opacity: 0;
}

/* --------------------------------------------------------------------------
   שדות טופס (מוצגים ב-ui_kit לצורך תיעוד המצבים)
   -------------------------------------------------------------------------- */
.field {
	display: block;
	margin-block-end: var(--space_4);
}

.field_label {
	display: block;
	margin-block-end: var(--space_2);
	color: var(--color_text);
	font-size: var(--text_sm);
	font-weight: var(--weight_medium);
}

.field_input {
	inline-size: 100%;
	padding-block: var(--space_3);
	padding-inline: var(--space_4);
	border: var(--width_pixel) solid var(--color_line_strong);
	border-radius: var(--radius_button);
	background-color: var(--color_base);
	color: var(--color_text);
	font-family: var(--font_main);
	font-size: var(--text_base);
}

.field_input:hover {
	border-color: var(--color1_soft);
}

.field_input:focus-visible {
	border-color: var(--color1);
	outline: var(--width_focus) solid var(--color_focus);
	outline-offset: var(--space_1);
}

.field_input:invalid {
	border-color: var(--color3);
	box-shadow: 0 0 0 var(--width_border) var(--color3);
}

.field_input:disabled {
	border-color: var(--color_line);
	background-color: var(--color_base2);
	color: var(--color_text_soft);
	cursor: not-allowed;
}

.field_hint {
	display: block;
	margin-block-start: var(--space_2);
	color: var(--color_text_muted);
	font-size: var(--text_xs);
}