/* ============================================
   FONTS
   ============================================ */
@font-face {
	font-family: "JetBrainsMono Nerd Font";
	src: url("/fonts/JetBrainsMonoNerdFont-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: "JetBrainsMono Nerd Font";
	src: url("/fonts/JetBrainsMonoNerdFont-Bold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: "JetBrainsMono Nerd Font";
	src: url("/fonts/JetBrainsMonoNerdFont-Italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
}

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
	/* Base unit for spacing - 4px grid */
	--spacing-unit: 4px;

	/* Spacing - multipliers of base unit */
	--spacing-0: 0;
	--spacing-1: calc(var(--spacing-unit) * 0.25); /* 1px */
	--spacing-2: calc(var(--spacing-unit) * 0.5); /* 2px */
	--spacing-3: calc(var(--spacing-unit) * 1.5); /* 6px */
	--spacing-4: calc(var(--spacing-unit) * 2.5); /* 10px */
	--spacing-5: calc(var(--spacing-unit) * 3); /* 12px */
	--spacing-6: calc(var(--spacing-unit) * 3.5); /* 14px */
	--spacing-7: calc(var(--spacing-unit) * 4); /* 16px */
	--spacing-8: calc(var(--spacing-unit) * 4.5); /* 18px */
	--spacing-9: calc(var(--spacing-unit) * 5); /* 20px */
	--spacing-10: calc(var(--spacing-unit) * 6); /* 24px */
	--spacing-11: calc(var(--spacing-unit) * 7); /* 28px */
	--spacing-12: calc(var(--spacing-unit) * 8); /* 32px */
	--spacing-15: calc(var(--spacing-unit) * 15); /* 60px */

	/* Low-level colors - Greys */
	--grey-0: hsl(0 0% 0%);
	--grey-40: hsl(0 0% 3.9%);
	--grey-60: hsl(0 0% 6%);
	--grey-80: hsl(0 0% 8%);
	--grey-100: hsl(0 0% 10%);
	--grey-149: hsl(0 0% 14.9%);
	--grey-200: hsl(0 0% 20%);
	--grey-300: hsl(0 0% 30%);
	--grey-400: hsl(0 0% 40%);
	--grey-450: hsl(0 0% 45%);
	--grey-639: hsl(0 0% 63.9%);
	--grey-700: hsl(0 0% 70%);
	--grey-850: hsl(0 0% 85%);
	--grey-900: hsl(0 0% 90%);
	--grey-980: hsl(0 0% 98%);

	/* Low-level colors - Semantic */
	--yellow-500: hsl(47.9 95.8% 53.1%);
	--blue-500: hsl(217.2 91.2% 59.8%);
	--red-500: hsl(0 84.2% 60.2%);
	--green-500: hsl(142.1 76.2% 36.3%);

	/* Functional colors - Backgrounds */
	--bg-base: var(--grey-40);
	--bg-hover: var(--grey-80);
	--bg-active: var(--grey-100);
	--bg-unread: var(--grey-60);
	--bg-elevated: var(--grey-80);
	--bg-input: var(--grey-80);
	--bg-input-focus: var(--grey-100);
	--bg-overlay: hsl(0 0% 0% / 0.8);

	/* Functional colors - Borders */
	--border-default: var(--grey-149);
	--border-hover: var(--grey-200);
	--border-active: var(--grey-980);
	--border-subtle: var(--grey-80);

	/* Functional colors - Text */
	--text-primary: var(--grey-980);
	--text-secondary: var(--grey-850);
	--text-tertiary: var(--grey-639);
	--text-muted: var(--grey-450);
	--text-disabled: var(--grey-400);

	/* Functional colors - Actions */
	--color-highlight: var(--yellow-500);
	--color-highlight-bg: hsl(47.9 95.8% 53.1% / 0.15);
	--color-highlight-bg-active: hsl(47.9 95.8% 53.1% / 0.2);
	--color-marked: var(--blue-500);
	--color-marked-bg: hsl(217.2 91.2% 59.8% / 0.15);
	--color-marked-bg-active: hsl(217.2 91.2% 59.8% / 0.2);
	--color-delete: var(--red-500);
	--color-delete-bg: hsl(0 84.2% 60.2% / 0.15);
	--color-add: var(--green-500);
	--color-add-bg: hsl(142.1 76.2% 36.3% / 0.15);

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-full: 10px;

	/* Transitions */
	--transition-fast: all 0.15s;

	/* Typography - Font sizes */
	--font-size-xs: 10px;
	--font-size-sm: 12px;
	--font-size-base: 12px;
	--font-size-md: 14px;
	--font-size-lg: 18px;

	/* Typography - Line heights */
	--line-height-tight: 1.3;
	--line-height-base: 1.5;
	--line-height-relaxed: 1.6;

	/* Typography - Font weights */
	--font-weight-normal: 400;
	--font-weight-semibold: 600;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

button {
	all: unset;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	background: transparent;
	border: none;
	padding: 0;
}

body {
	background: var(--bg-base);
	color: var(--text-primary);
	font-family:
		"JetBrainsMono Nerd Font", "JetBrains Mono", "Fira Code", "SF Mono", Monaco,
		monospace;
	font-feature-settings:
		"liga" 1,
		"calt" 1;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-base);
}

ul,
ol,
menu {
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
	margin: 0;
}

input,
select {
	background: var(--bg-input);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	font-family: inherit;
	font-size: var(--font-size-sm);
	padding: var(--spacing-4) var(--spacing-5);
	transition: var(--transition-fast);
}

input:focus,
select:focus {
	background: var(--bg-input-focus);
	border-color: var(--border-hover);
	outline: none;
}

input::placeholder {
	color: var(--text-muted);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.h1 {
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
}

.h2 {
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
}

.h3 {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	line-height: var(--line-height-tight);
	text-transform: uppercase;
}

.text-sm {
	font-size: var(--font-size-sm);
}

/* ============================================
   LAYOUT
   ============================================ */
.app {
	display: grid;
	grid-template-columns: 280px 380px 1fr;
	height: 100vh;
	overflow: hidden;
	background: var(--bg-base);
}

/* ============================================
   ICON BUTTON COMPONENT
   ============================================ */
.icon-btn {
  all: unset;
	appearance: none;
  user-select: none;
  /* align-items: center; */
	/* background: transparent; */
	/* border: none; */
	/* border-radius: var(--radius-sm); */
	color: var(--text-tertiary);
	cursor: pointer;
	/* display: flex; */
	/* flex-shrink: 0; */
	font-family: "JetBrainsMono Nerd Font", monospace;
	/* font-size: 13px; */
	/* height: 24px; */
	/* justify-content: center; */
	/* line-height: 1; */
	/* padding: 0; */
  position: relative;
	/* transition: var(--transition-fast); */
	/* width: 24px; */
  text-align: center;

  /* background: blue; */
}

.icon-btn span {
  display: block;
  /* height: 16px;
  width: 16px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: -1px; */
}

.icon-btn:hover {
	/* background: var(--bg-hover); */
	color: var(--text-primary);
}

/* Icon button variants */
.icon-btn--highlight:hover {
	color: var(--color-highlight);
	background: var(--color-highlight-bg);
}

.icon-btn--highlight.active {
	color: var(--color-highlight);
	background: var(--color-highlight-bg-active);
}

.icon-btn--marked:hover {
	color: var(--color-marked);
	background: var(--color-marked-bg);
}

.icon-btn--marked.active {
	color: var(--color-marked);
	background: var(--color-marked-bg-active);
}

.icon-btn--delete:hover {
	color: var(--color-delete);
	background: var(--color-delete-bg);
}

.icon-btn--add:hover {
	color: var(--color-add);
	background: var(--color-add-bg);
}

.icon-btn--edit:hover {
	color: var(--color-marked);
	background: var(--color-marked-bg);
}

/* Small icon buttons */
.icon-btn--sm {
	font-size: var(--font-size-sm);
	/* height: 20px; */
	width: 20px;
}

.icon-btn--lg {
	font-size: 15px;
	/* height: 24px; */
	width: 24px;
}

/* ============================================
   BASIC COMPONENTS
   ============================================ */

.count-badge {
	color: var(--text-secondary);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	padding: var(--spacing-2) var(--spacing-3);
}

/* ============================================
   SIDEBAR COMPONENTS
   ============================================ */

.logo {
  font-size: var(--font-size-lg);
}

.sidebar {
	background: var(--bg-base);
	border-right: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
}

.sidebar-header {
	align-items: center;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	gap: var(--spacing-5);
	justify-content: space-between;
	padding: var(--spacing-5) var(--spacing-7);
  position: relative;
}

.sidebar-header__actions {
  position: absolute;
  right: var(--spacing-7);
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-header h1 {
	color: var(--text-primary);
}

/* Sidebar scrollable list */
.sidebar__content {
	flex: 1;
	overflow-y: auto;
}


/* Sidebar section - group of items */
.sidebar__section {
	border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--spacing-4);
}

.sidebar__section menu,
.sidebar__section ul {
	width: 100%;
}

.sidebar__section li {
	width: 100%;
}

/* ============================================
   NAVIGATION HEADERS
   ============================================ */

.navigation-header {
	align-items: center;
	color: var(--text-muted);
	display: flex;
	gap: var(--spacing-2);
	justify-content: space-between;
	padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
}

.navigation-header__title {
  font-size: 11px;
	font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   NAVIGATION ITEMS
   ============================================ */

/* Sidebar navigation item - clickable item (feed, folder, etc) */
.navigation-item {
	align-items: center;
	border-left: 2px solid transparent;
	cursor: pointer;
	display: flex;
	gap: var(--spacing-2);
	justify-content: space-between;
	padding: var(--spacing-2) var(--spacing-3);
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.navigation-item:hover {
	background: var(--bg-hover);
	border-left-color: var(--border-hover);
}

.navigation-item.active {
	background: var(--bg-active);
	border-left-color: var(--border-active);
}

/* Sidebar sub-navigation item - nested item under a group */
.navigation-item.small {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
}

.navigation-item.grouped {
  color: var(--text-muted);
  padding-left: var(--spacing-12);
}

.navigation-item.grouped.active {
  color: var(--text-primary);
}

.navigation-item.grouped:hover {
  color: var(--text-primary);
}

.navigation-item.primary {
  padding: var(--spacing-2) var(--spacing-5);
}

.navigation-item.small:hover {
	background: var(--bg-hover);
	border-left-color: var(--border-hover);
}

.navigation-item.small.active {
	background: var(--bg-active);
	border-left-color: var(--border-active);
}

.navigation-item__title {
	align-items: center;
	display: flex;
	flex: 1;
	gap: var(--spacing-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.navigation-item__actions {
	align-items: center;
  justify-content: end;
	display: flex;
	gap: var(--spacing-1);
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
  visibility: hidden;
}

.navigation-item__count {
  position: absolute;
  right: var(--spacing-3);
  top: 50%;
  transform: translateY(-50%);
}

/* Hide count badge and show action buttons on hover */
.navigation-item:hover .navigation-item__count {
	visibility: hidden;
}

.navigation-item:hover .navigation-item__actions {
	visibility: visible;
}

.navigation-item.active .navigation-item__count {
	background: var(--border-hover);
	color: var(--text-primary);
}

/* ============================================
   PREVIEW LIST COMPONENTS
   ============================================ */
.preview-list {
	background: var(--bg-base);
	border-right: 1px solid var(--border-default);
	display: flex;
	flex-direction: column;
}

.preview-list__header {
	align-items: center;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	gap: var(--spacing-5);
	justify-content: space-between;
	padding: var(--spacing-6) var(--spacing-7);
}

.preview-list__header h2 {
	flex: 1;
}

.preview-list__header span {
	color: var(--text-muted);
}

.preview-list__action {
	background: var(--bg-active);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--text-primary);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--font-size-sm);
	padding: var(--spacing-1) var(--spacing-4);
	transition: var(--transition-fast);
}

.preview-list__action:hover {
	background: var(--border-default);
	border-color: var(--border-hover);
}

.preview-list__container {
	overflow-y: auto;
	flex: 1;
}

.preview-list__container::-webkit-scrollbar {
	width: 8px;
}

.preview-list__container::-webkit-scrollbar-track {
	background: transparent;
}

.preview-list__container::-webkit-scrollbar-thumb {
	background: var(--border-default);
	border-radius: var(--radius-sm);
}

.preview-list__container::-webkit-scrollbar-thumb:hover {
	background: var(--border-hover);
}

.loading-spinner {
	align-items: center;
	color: var(--text-secondary);
	display: flex;
	font-size: var(--text-sm);
	gap: var(--spacing-4);
	justify-content: center;
	padding: var(--spacing-10);
}

.loading-spinner__icon {
	font-family: monospace;
	font-size: 14px;
	line-height: 1;
}

.loading-spinner__text {
	font-family: monospace;
}

.preview-card {
	border-bottom: 1px solid var(--border-default);
	border-left: 2px solid transparent;
	transition: var(--transition-fast);
}

.preview-card__button {
	background: transparent;
	border: none;
	cursor: pointer;
	display: block;
	padding: var(--spacing-5) var(--spacing-7);
	text-align: left;
	transition: var(--transition-fast);
	width: 100%;
}

.preview-card:hover {
	background: var(--bg-hover);
	border-left-color: var(--border-hover);
}

.preview-card.active {
	background: var(--bg-active);
	border-left-color: var(--border-active);
}

.preview-card--unread {
	background: var(--bg-unread);
	border-left-color: var(--border-active);
}

.preview-card--unread .preview-card__title {
	font-weight: 600;
	color: var(--text-primary);
}

.preview-card--saved {
	border-left-color: var(--color-highlight);
}

.preview-card--saved .preview-card__title::before {
	content: "\uf005";
	display: inline;
	margin-right: var(--spacing-2);
	color: var(--color-highlight);
	font-family: "JetBrainsMono Nerd Font", monospace;
}

.preview-card__title {
	color: var(--text-secondary);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-tight);
	margin-bottom: var(--spacing-1);
}

.preview-card__meta {
	color: var(--text-muted);
	font-size: var(--font-size-xs);
}

/* ============================================
   ARTICLE VIEW COMPONENTS
   ============================================ */
.article-view {
	background: var(--bg-base);
	overflow-y: auto;
	padding: var(--spacing-10) var(--spacing-12);
}

.article-view::-webkit-scrollbar {
	width: 8px;
}

.article-view::-webkit-scrollbar-track {
	background: transparent;
}

.article-view::-webkit-scrollbar-thumb {
	background: var(--border-default);
	border-radius: var(--radius-sm);
}

.article-view::-webkit-scrollbar-thumb:hover {
	background: var(--border-hover);
}

.article-view__empty {
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	padding: var(--spacing-15) var(--spacing-9);
	text-align: center;
}

.article-view__header {
	align-items: flex-start;
	border-bottom: 1px solid var(--border-default);
	display: flex;
	gap: var(--spacing-7);
	justify-content: space-between;
	margin-bottom: var(--spacing-7);
	padding-bottom: var(--spacing-7);
}

.article-view__header h2 {
	color: var(--text-primary);
	flex: 1;
}

.article-view__actions {
	display: flex;
	flex-shrink: 0;
	gap: var(--spacing-2);
}

.article-view__link {
	align-items: center;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	color: var(--text-tertiary);
	display: flex;
	flex-shrink: 0;
	font-family: "JetBrainsMono Nerd Font", monospace;
	font-size: var(--font-size-md);
	height: 28px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	text-decoration: none;
	transition: var(--transition-fast);
	width: 28px;
}

.article-view__link:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.article-view__meta {
	border-bottom: 1px solid var(--border-default);
	color: var(--text-muted);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-10);
	padding-bottom: var(--spacing-7);
}

.article-view__author {
	margin-right: var(--spacing-7);
}

/* Article body - typography styles */
.article-view__body {
	color: var(--text-secondary);
	font-size: var(--font-size-md);
	line-height: var(--line-height-relaxed);
	margin: 0 auto;
	max-width: 720px;
}

.article-view__body img {
	max-width: 100%;
	height: auto;
	margin: var(--spacing-9) 0;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-default);
}

.article-view__body a {
	color: var(--text-primary);
	text-decoration: underline;
	text-decoration-color: var(--text-muted);
	transition: var(--transition-fast);
}

.article-view__body a:hover {
	text-decoration-color: var(--text-primary);
}

.article-view__body p {
	margin-bottom: var(--spacing-7);
}

.article-view__body h1,
.article-view__body h2,
.article-view__body h3,
.article-view__body h4,
.article-view__body h5,
.article-view__body h6 {
	color: var(--text-primary);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-5);
	margin-top: var(--spacing-11);
}

.article-view__body h1 {
	font-size: var(--font-size-lg);
}
.article-view__body h2 {
	font-size: var(--font-size-lg);
}
.article-view__body h3 {
	font-size: var(--font-size-md);
}
.article-view__body h4 {
	font-size: var(--font-size-md);
}

.article-view__body ul,
.article-view__body ol {
	margin-left: var(--spacing-10);
	margin-bottom: var(--spacing-7);
}

.article-view__body li {
	margin-bottom: var(--spacing-3);
}

.article-view__body pre {
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	font-size: var(--font-size-sm);
	margin-bottom: var(--spacing-7);
	overflow-x: auto;
	padding: var(--spacing-7);
}

.article-view__body code {
	background: var(--bg-elevated);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: var(--font-size-sm);
	padding: var(--spacing-2) var(--spacing-3);
}

.article-view__body pre code {
	background: transparent;
	border: none;
	padding: 0;
}

.article-view__body blockquote {
	border-left: 3px solid var(--border-hover);
	padding-left: var(--spacing-7);
	margin: var(--spacing-7) 0;
	color: var(--text-tertiary);
	font-style: italic;
}

.article-view__body hr {
	border: none;
	border-top: 1px solid var(--border-default);
	margin: var(--spacing-10) 0;
}

/* ============================================
   MODAL COMPONENTS
   ============================================ */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--bg-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	backdrop-filter: blur(4px);
}

.modal {
	background: var(--bg-base);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 32px hsl(0 0% 0% / 0.5);
	min-width: 420px;
	padding: var(--spacing-10);
}

.modal h3 {
	color: var(--text-primary);
	margin-bottom: var(--spacing-8);
}

.modal input,
.modal select {
	margin-bottom: var(--spacing-5);
	width: 100%;
}

.form-actions {
	display: flex;
	gap: var(--spacing-2);
	justify-content: flex-end;
	margin-top: var(--spacing-8);
}

.form-btn {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--font-size-sm);
	padding: var(--spacing-2) var(--spacing-7);
	transition: var(--transition-fast);
}

.form-btn--secondary {
	background: transparent;
	color: var(--text-tertiary);
}

.form-btn--secondary:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.form-btn--primary {
	background: var(--text-primary);
	border-color: var(--text-primary);
	color: var(--bg-base);
}

.form-btn--primary:hover {
	background: var(--text-secondary);
	border-color: var(--text-secondary);
}

/* ============================================
   UTILITY COMPONENTS
   ============================================ */
.loading {
	align-items: center;
	color: var(--text-muted);
	display: flex;
	font-size: var(--font-size-sm);
	height: 100vh;
	justify-content: center;
}