/* Akratis styles (was formerly inlined in ui.py as CSS_STYLES) */
:root { --bg: #fff; --sidebar-bg: #f7f7f7; --text: #333; --border: #ddd; --primary: #0066cc; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
h1 { font-size: 2rem; margin: 0 0 12px 0; letter-spacing: -0.01em; color: #6f3e3e;}
h2 { clear: both; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.6em; color: #d00000;	margin-top: 45px;
	margin-bottom: 14px; font-weight: normal; line-height: 25px; border-bottom: 1px dotted #d00000;}
h3 { margin: 35px 0px 0px 0px; padding: 0px 2px 0px 0px; font-family: sans-serif, Arial, Arial CE, Verdana, sans-serif; font-size: 1.4em; color: #622;	font-weight: bold;}a { color: var(--primary); }
a:hover { filter: brightness(0.9); }

.app-container { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; height: auto; }
.sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.app-brand a { font-size: 1.2em; font-weight: bold; text-decoration: none; color: #000; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.nav-section-title { font-size: 0.75rem; letter-spacing: 0.08em; color: #777; margin: 8px 0 4px 0; }
.nav-item { text-decoration: none; color: #444; padding: 6px 8px; border-radius: 0; display: block; line-height: 1.15; font-size: 0.95rem; }
.nav-item:hover { background: #e0e0e0; color: #000; }
.btn-new { background: var(--primary); color: white; text-align: center; padding: 10px; border-radius: 4px; text-decoration: none; font-weight: bold; margin-bottom: 10px; }
.main-content { padding: 0; overflow-y: auto; width: 100%; box-sizing: border-box; min-height: 0; display: flex; flex-direction: column; }
.content-wrap { max-width: 900px; width: 100%; margin: 0 auto; padding: 22px 22px 32px 22px; box-sizing: border-box; }

/* Top bar - full width, minimalist */
.topbar { flex: 0 0 auto; background: #444; color: #fff; border-bottom: 4px solid #333; }
.topbar-inner { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 6px 16px; width: 100%; box-sizing: border-box; }

.topbar-left { display: flex; gap: 12px; align-items: center; }
.topbar-right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font-size: 0.95rem; }
.topbar-brand { font-weight: 700; color: #e70000; text-decoration: none; font-size: 1.2rem; }
.topbar-brand:hover { color: #ddd; }
.topbar-text { color: #ddd; }
.topbar-text b { color: #fff; font-weight: 600; }
.topbar-sep { color: #888; margin: 0 2px; }
.topbar-link { color: #ccc; text-decoration: none; padding: 4px; }
.topbar-link:hover { color: #fff; text-decoration: underline; }
.topbar-menu-btn { display: none; border: none; background: transparent; color: #fff; padding: 4px 8px; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.topbar-menu-btn:hover { background: rgba(255,255,255,0.1); }

/* Dropdown */
.topbar-dropdown { position: relative; display: inline-block; cursor: pointer; padding: 4px; color: #ccc; }
.topbar-dropdown:hover { color: #fff; }
.topbar-dropdown-content { display: none; position: absolute; right: 0; top: 100%; background-color: #fff; min-width: 140px; border: 1px solid #ccc; box-shadow: 0px 4px 8px rgba(0,0,0,0.1); z-index: 1000; }
.topbar-dropdown:hover .topbar-dropdown-content { display: block; }
.topbar-dropdown-content a { color: #333; padding: 10px 16px; text-decoration: none; display: block; font-size: 0.9rem; }
.topbar-dropdown-content a:hover { background-color: #f5f5f5; color: #000; filter: none; }

.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }

/* Mobile: sidebar must NOT stack above content; make it an off-canvas drawer. */
@media (max-width: 900px) {
	.app-container { grid-template-columns: 1fr; }

	.sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 260px;
		z-index: 1001;
		transform: translateX(-105%);
		transition: transform 0.2s ease;
		box-sizing: border-box;
		overflow-y: auto;
	}
	body.sidebar-open .sidebar {
		transform: translateX(0);
	}

	.sidebar-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.25);
		z-index: 1000;
	}
	body.sidebar-open .sidebar-overlay {
		display: block;
	}

	.content-wrap { padding: 16px; }
	.topbar-menu-btn { display: inline-flex; }
}

.item-row { padding: 10px 0; border-bottom: 1px solid #eee; }
.item-title { font-size: 1.1em; font-weight: 500; text-decoration: none; color: var(--primary); margin-bottom: 4px; }
.item-title:hover { text-decoration: underline; }

/* Children list (consolidated) */
.children-section {background: #fafafa; border: 1px solid #eee; border-radius: 12px; padding: 6px 12px 18px 12px; margin: 20px 0; }
.children-section ul { margin-top: 0; margin-bottom: 16px; padding: 0; }
.children-list { list-style: none; padding: 0; margin: 0 0 16px 0; }
.children-list li { padding: 0px 0; border-bottom: 1px solid #eee; }
.children-list li a { display: block; padding: 6px 4px; color: var(--primary); font-weight: 600; text-decoration: none; }
.add-child-bar { margin-top: 10px; }

input[type=text], input[type=password], textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
select { padding: 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
button { padding: 8px 12px; border: 1px solid #ccc; background: #fff; border-radius: 8px; cursor: pointer; font-weight: 650; }
button:hover { background: #f5f5f5; }
.form-group { margin: 10px 0; }
.form-group label { display: block; font-size: 0.9rem; color: #666; margin-bottom: 6px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 200px; gap: 12px; }
@media (max-width: 700px) { .form-grid-2 { grid-template-columns: 1fr; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid #ddd; background: #fff; text-decoration: none; color: #222; font-weight: 650; }
.btn:hover { background: #f5f5f5; }
.btn-sm { padding: 6px 10px; border-radius: 10px; font-weight: 650; }
.btn-danger { border-color: #f1c0c0; background: #fff5f5; color: #a00; }
.btn-danger:hover { background: #ffecec; }

/* Legacy class used by a few templates */
.btn-primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; border-radius: 10px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { filter: brightness(0.95); }

.notice { border: 1px solid #dbeafe; background: #eff6ff; color: #1e3a8a; padding: 10px 12px; border-radius: 12px; margin: 10px 0; }
.error-msg { border: 1px solid #fecaca; background: #fff1f2; color: #991b1b; padding: 10px 12px; border-radius: 12px; margin: 10px 0; }

.card { border: 1px solid #eee; background: #fff; border-radius: 14px; padding: 12px 14px; }

.table { border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid #eee; border-radius: 14px; background: #fff; }
.table thead th { text-align: left; font-size: 0.85rem; color: #666; padding: 10px 12px; border-bottom: 1px solid #eee; background: #fafafa; }
.table tbody td { padding: 10px 12px; border-bottom: 1px solid #f2f2f2; vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-main { font-weight: 650; color: #222; }
.cell-sub { font-size: 0.85rem; color: #777; margin-top: 2px; }
.cell-actions { text-align: right; white-space: nowrap; }
.select-sm { padding: 6px 10px; border-radius: 10px; }
.form-full { width: 100%; }
.editor-area { height: 400px; font-family: monospace; line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; margin-bottom: 15px; }

/* Breadcrumbs */
.breadcrumbs { margin: 8px 0 14px 0; font-size: 0.95rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-link { color: var(--primary); text-decoration: none; }
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-sep { color: #999; margin: 0 6px; }
.breadcrumb-current { color: #666; }

.btn-small { display: inline-block; padding: 5px 10px; background: #eee; border-radius: 4px; text-decoration: none; color: #333; font-size: 0.9em; }
.btn-small:hover { background: #ddd; }

/* Parents / Children */
.parent-link, .child-link { display: inline-block; background: #eef; color: #444; padding: 3px 6px; border-radius: 3px; text-decoration: none; margin-right: 4px;
	margin-bottom: 4px; font-size: 0.85em; line-height: 1.2;
}
.parent-link:hover, .child-link:hover { background: #dde; }
.parents-bar, .children-bar { margin-bottom: 10px; }
.add-child-bar { margin-top: 10px; }
.detail-header { margin-bottom: 15px; }
.detail-header-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.detail-actions { display: flex; gap: 10px; }
.detail-action { font-size: 0.9rem; color: #666; text-decoration: none; padding: 4px 8px; border-radius: 6px; border: 1px solid #eee; }
.detail-action:hover { color: #333; background: #f5f5f5; }

/* Learn header */
.learn-bar { border: 1px solid #eee; border-radius: 10px; padding: 10px 12px; margin: 10px 0 16px 0; background: #fff; }
.learn-bar-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.learn-bar-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.learn-bar-label { color: #666; font-size: 0.9em; }
.learn-bar-stats { color: #777; font-size: 0.9em; }
.learn-link { display: inline-block; font-size: 0.9rem; color: #666; text-decoration: none; padding: 4px 10px; border-radius: 999px; border: 1px solid #eee; }
.learn-link:hover { color: #333; background: #f5f5f5; }
.learn-link-active { font-weight: 600; color: #333; background: #eef; border-color: #dde; }

/* Per-heading study links inside markdown headings */
.hx-study { display: inline-block; margin-left: 10px; font-size: 0.85rem; color: #666; text-decoration: none; padding: 2px 8px; border-radius: 999px; border: 1px solid #eee; }
.hx-study:hover { color: #333; background: #f5f5f5; }

.learn-cta { display: inline-block; text-decoration: none; font-weight: 700; border-radius: 10px; padding: 10px 14px; border: 1px solid transparent; }
.learn-cta-primary { background: var(--primary); color: #fff; }
.learn-cta-primary:hover { filter: brightness(0.95); }
.learn-cta-secondary { background: var(--primary); color: #fff; opacity: 0.9; }
.learn-cta-secondary:hover { opacity: 1.0; }

/* Per-document inline small counts (same line as H2) */
.doc-inline { color: #666; font-size: 0.9em; font-weight: 400; margin-left: 8px; }
.learn-docblock h2, .main-content > h2 { margin: 44px 0 8px 0; }

.learn-context { color: #666; font-size: 0.95em; margin: 4px 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Study overview lines */
.learn-line { display: flex; gap: 12px; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f2f2f2; }
.learn-line:last-child { border-bottom: 0; }
.learn-qtext { color: #333; }
.learn-unlearned .learn-qtext { color: #a00; }
.learn-qmeta { color: #777; font-size: 0.9em; white-space: nowrap; }
.learn-doclink { color: #666; text-decoration: none; }
.learn-doclink:hover { text-decoration: underline; }
.learn-docblock { margin: 10px 0 16px 0; }

/* H2 link styling: look like headings (inherit color), no underline by default */
.main-content > h2 a, .learn-docblock h2 a { color: inherit; text-decoration: none; }
.main-content > h2 a:visited, .learn-docblock h2 a:visited { color: inherit; }
.main-content > h2 a:hover, .learn-docblock h2 a:hover { text-decoration: underline; }
.learn-doctitle { margin: 12px 0 8px 0; font-size: 1.05em; }
.markdown-body { margin-bottom: 0px; }
.edit-icon { margin-left: 10px; color: #888; text-decoration: none; font-size: 1em; }
.edit-icon:hover { color: #555; }

/* Feed Styles - Compact & Twitter-like */
.feed-container { margin-top: 20px; border-top: 1px solid #eee; }
.feed-row { display: flex; padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
.feed-time { flex: 0 0 60px; font-size: 0.85em; color: #888; text-align: right; padding-right: 15px; line-height: 1.4; }
.ft-time { display: block; font-weight: bold; color: #555; }
.ft-date { display: block; font-size: 0.8em; color: #aaa; }

.feed-content { flex: 1; min-width: 0; position: relative; }
.feed-item-title { font-weight: bold; margin-bottom: 4px; padding-right: 60px; }
.feed-item-title a { color: #000; text-decoration: none; }
.feed-item-title a:hover { text-decoration: underline; }

.feed-body p { margin: 0 0 5px 0; line-height: 1.4; }
.feed-body p:last-child { margin-bottom: 0; }

/* Actions - Absolute Top Right */
.feed-actions { position: absolute; top: 0; right: 0; background: #fff; padding-left: 10px; font-size: 0.85em;
	opacity: 0; transition: opacity 0.2s;
}
.feed-row:hover .feed-actions { opacity: 1; }
.feed-actions a { color: #999; margin-right: 10px; text-decoration: none; }
.feed-actions a:hover { color: #0066cc; }

/* Questions / Cloze */
.q-block { border: 1px solid #eee; border-radius: 8px; padding: 12px; margin: 14px 0; }
.q-tags { margin-bottom: 8px; font-size: 0.9em; }
.q-tag { display: inline-block; margin-right: 8px; color: #666; text-decoration: none; }
.q-tag:hover { text-decoration: underline; }
.q-meta { margin-bottom: 8px; font-size: 0.85em; color: #777; }
.q-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.q-actions button { padding: 6px 10px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; }
.q-actions button:hover { background: #f3f3f3; }
.q-status { color: #777; font-size: 0.9em; }

.learn-progress { color: #777; font-size: 0.9em; margin: -2px 0 8px 0; }
.learn-header-extra { color: #666; font-size: 0.9em; margin: 0 0 8px 0; }

.cloze-slot { display: inline-flex; gap: 8px; align-items: center; padding: 2px 4px; border-radius: 6px; }
.cloze-input { width: auto; min-width: 3ch; }
.cloze-slot.ok { outline: 2px solid #2ecc71; }
.cloze-slot.bad { outline: 2px solid #e74c3c; }
.cloze-expected { color: #a00; font-size: 0.9em; }
.cloze-given { color: #333; font-size: 0.9em; }

/* Quick Add Form */
.quick-add-form { margin: 20px 0; background: #f9f9f9; padding: 10px; border-radius: 8px; }
.quick-add-form textarea {
	width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 8px;
	resize: vertical; font-family: inherit; box-sizing: border-box;
}
.quick-add-form button {
	margin-top: 5px; background: #0066cc; color: white; border: none;
	padding: 6px 12px; border-radius: 4px; cursor: pointer; font-weight: bold;
}
.quick-add-form button:hover { background: #0055aa; }

/* children-list styles consolidated earlier in file */

/* Make images responsive, slightly reduced on desktop to avoid overly large media
   and allow full-width on small screens. */
.content-wrap img,
.markdown-body img,
.feed-body img,
.card img {
	max-width: 70%;
	height: auto;
	display: block;
	margin: 12px auto;
}

/* Mobile: allow images to use full container width */
@media (max-width: 900px) {
	.content-wrap img,
	.markdown-body img,
	.feed-body img,
	.card img {
		max-width: 100%;
	}
}

/* Prevent very large media from breaking layout inside flexible containers */
.content-wrap, .feed-content, .card {
	min-width: 0;
}