/* === Sleek Industrial Theme with Dark Mode === */

/* Typography: Geist Sans + Geist Mono from jsDelivr CDN */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-sans/Geist-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-sans/Geist-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-sans/Geist-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-sans/Geist-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/geist@1.4.1/dist/fonts/geist-mono/GeistMono-Bold.woff2") format("woff2");
}

/* --- CSS Custom Properties (Light Mode Default) --- */
:root {
  --bg: #fafafa;
  --bg-secondary: #f2f2f2;
  --text: #1a1a1a;
  --text-secondary: #555;
  --text-muted: #999;
  --heading: #0a0a0a;
  --link: #1a1a1a;
  --link-hover: #555;
  --border: #e0e0e0;
  --code-bg: #f5f5f5;
  --code-border: #e0e0e0;
  --blockquote-border: #d0d0d0;
  --toggle-bg: #ddd;
  --toggle-knob: #fff;
}

/* --- Dark Mode --- */
html[data-theme="dark"] {
  --bg: #111;
  --bg-secondary: #191919;
  --text: #d4d4d4;
  --text-secondary: #999;
  --text-muted: #666;
  --heading: #e5e5e5;
  --link: #e5e5e5;
  --link-hover: #999;
  --border: #262626;
  --code-bg: #191919;
  --code-border: #2a2a2a;
  --blockquote-border: #333;
  --toggle-bg: #333;
  --toggle-knob: #d4d4d4;
}

/* Auto dark mode for users without JS / before toggle loads */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #111;
    --bg-secondary: #191919;
    --text: #d4d4d4;
    --text-secondary: #999;
    --text-muted: #666;
    --heading: #e5e5e5;
    --link: #e5e5e5;
    --link-hover: #999;
    --border: #262626;
    --code-bg: #191919;
    --code-border: #2a2a2a;
    --blockquote-border: #333;
    --toggle-bg: #333;
    --toggle-knob: #d4d4d4;
  }
}

/* --- Base --- */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

body#collection, body#post, body#me,
article, article p, article li, article td,
#wrapper, .e-content, .e-content p,
.content-container, .content-container p {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--text) !important;
}

/* Normalize font size across reader and collection pages */
#wrapper {
  font-size: 1.1em !important;
}

/* Content width */
article, #wrapper, body#collection header, .content-container,
body#post article {
  max-width: 42rem;
}

/* --- Dark Mode Toggle --- */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
.theme-toggle:hover {
  border-color: var(--heading);
  background: var(--bg-secondary);
}
/* Sun icon for dark mode, moon for light */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: inline; }
/* Auto mode: show based on prefers-color-scheme */
html:not([data-theme]) .theme-toggle .icon-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .icon-moon { display: none; }
  html:not([data-theme]) .theme-toggle .icon-sun { display: inline; }
}

/* --- Header: TT Initials Box --- */
/* Replaces the site name in the top-left navigation with a styled "TT" monogram.
   Targets the site name link across all page types:
   - Collection index + Post pages (multi-user nav): nav#full-nav .left-side h1 a
   - Reader page: nav#full-nav h2 a
   - Collection header (blog title when nav is absent): #blog-title a */
nav#full-nav .left-side h1 a,
nav#full-nav h2 a,
#blog-title a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace;
  font-weight: 500;
  font-size: 0;
  color: transparent !important;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  margin-left: 1rem;
}
nav#full-nav .left-side h1 a::after,
nav#full-nav h2 a::after,
#blog-title a::after {
  content: "TT";
  position: absolute;
  font-size: 14px;
  color: var(--text-muted);
  opacity: 1;
  transform: translateY(0);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
nav#full-nav .left-side h1 a:hover,
nav#full-nav h2 a:hover,
#blog-title a:hover {
  border-color: var(--heading);
  background: var(--bg-secondary);
}
nav#full-nav .left-side h1 a:hover::after,
nav#full-nav h2 a:hover::after,
#blog-title a:hover::after {
  color: var(--heading);
  font-weight: 700;
  transform: scale(1.1);
}
/* On collection and post pages with user-navigation, hide the redundant
   #blog-title to avoid two TT boxes. The nav header (.multiuser/.singleuser)
   comes first; the collection header with #blog-title follows as a sibling. */
header.multiuser ~ header #blog-title,
header.singleuser ~ header #blog-title {
  display: none;
}
header p.description {
  color: var(--text-muted) !important;
  font-size: 0.85em;
  margin-top: 0.5em;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* Remove opacity fade on post pages */
body#post header {
  opacity: 1 !important;
}
body#post header:hover {
  opacity: 1 !important;
}

/* Pinned posts nav */
header nav .pinned {
  color: var(--text-muted) !important;
  font-family: "Geist Mono", "SF Mono", monospace;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  padding-bottom: 2px;
}
header nav .pinned:hover {
  color: var(--heading) !important;
  border-bottom-color: var(--border);
}
header nav .pinned.selected {
  color: var(--heading) !important;
  border-bottom-color: var(--heading);
}

/* Hide view counts */
header nav .views,
footer .views {
  display: none;
}

/* --- Post Titles on Index --- */
.post-title {
  margin-bottom: 0.25em;
}
.post-title h2 {
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
}
.post-title a {
  color: var(--heading) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.post-title a:hover {
  color: var(--text-muted) !important;
}
.post-title a:visited {
  color: var(--heading) !important;
}
time, time.dt-published {
  color: var(--text-muted) !important;
  font-family: "Geist Mono", "SF Mono", monospace;
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Single post title */
h2#title {
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--heading) !important;
  margin-bottom: 0.2em;
}

/* Post spacing on index */
body#collection article {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid var(--border);
}
body#collection article:last-of-type {
  border-bottom: none;
}

/* --- Content Styling --- */
.e-content {
  font-size: 1.05em;
}
.e-content a {
  color: var(--text) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.e-content a:hover {
  color: var(--heading) !important;
  border-bottom-color: var(--heading);
}

/* Read more link */
a.read-more {
  color: var(--text-muted) !important;
  font-family: "Geist Mono", "SF Mono", monospace;
  font-weight: 400;
  font-size: 0.8em;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
a.read-more:hover {
  color: var(--heading) !important;
}

/* Headings in content */
.e-content h1, .e-content h2, .e-content h3,
.e-content h4, .e-content h5, .e-content h6 {
  color: var(--heading) !important;
  letter-spacing: -0.02em;
}

/* --- Blockquotes --- */
article blockquote {
  border-left: 2px solid var(--border) !important;
  margin-left: 0;
  padding: 0.5em 0 0.5em 1.5em;
  color: var(--text-secondary) !important;
  font-style: normal;
}

/* --- Code --- */
article pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 3px;
  padding: 1em 1.25em;
  overflow-x: auto;
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace;
  font-size: 0.85em;
  line-height: 1.6;
  color: var(--text) !important;
}
article pre code {
  background: none !important;
  border: none !important;
  padding: 0;
  color: inherit !important;
  font-family: inherit;
}
article code {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  border-radius: 2px;
  padding: 0.12em 0.35em;
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace;
  font-size: 0.85em;
  color: var(--text) !important;
}

/* --- Horizontal Rules --- */
article hr, footer hr {
  border: none !important;
  border-top: 1px solid var(--border) !important;
  margin: 3em 0;
}

/* --- Images --- */
article img {
  border-radius: 2px;
  max-width: 100%;
  height: auto;
}

/* --- Tables --- */
article table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
  font-size: 0.95em;
}
article table th {
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid var(--border);
  padding: 0.6em 0.75em;
  color: var(--heading);
}
article table td {
  border-bottom: 1px solid var(--border);
  padding: 0.6em 0.75em;
}

/* --- Pagination --- */
nav#paging a {
  color: var(--text-muted) !important;
  font-family: "Geist Mono", "SF Mono", monospace;
  font-weight: 400;
  font-size: 0.8em;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
nav#paging a:hover {
  color: var(--heading) !important;
}

/* --- Footer --- */
footer {
  margin-top: 3em;
}
footer nav {
  color: var(--text-muted) !important;
}
footer nav a {
  color: var(--text-muted) !important;
  font-size: 0.85em;
}
footer nav a:hover {
  color: var(--text-secondary) !important;
}
footer nav a.home {
  color: var(--text-secondary) !important;
}
footer p {
  color: var(--text-muted) !important;
}

/* --- Site nav (top bar when logged in, base.tmpl pages) --- */
header nav a, header nav.tabs a {
  color: var(--text-secondary) !important;
  transition: color 0.15s ease;
}
header nav a:hover, header nav.tabs a:hover {
  color: var(--heading) !important;
}
header nav a.selected {
  color: var(--heading) !important;
  font-weight: 600;
}
header h2 a {
  color: var(--heading) !important;
}
header h2 a:hover {
  color: var(--text-secondary) !important;
}

/* Dropdown nav */
nav.dropdown-nav a {
  color: var(--text) !important;
}
nav.dropdown-nav ul ul {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
}
nav.dropdown-nav ul ul li a {
  color: var(--text) !important;
}
nav.dropdown-nav ul ul li a:hover {
  background: var(--bg-secondary) !important;
}

/* --- Reader page (compact layout) --- */
.content-container.snug > h1,
.content-container.snug > p {
  display: none !important;
}
.content-container.snug {
  margin-bottom: 0 !important;
}
.attention-box p {
  color: var(--text-secondary) !important;
}
p.source {
  color: var(--text-muted) !important;
  font-size: 0.8em !important;
  margin-top: 0.15em !important;
  margin-bottom: 0 !important;
}
p.source a {
  color: var(--text-muted) !important;
}
p.source a:hover {
  color: var(--text-secondary) !important;
}

/* Compact article spacing on reader */
body#collection #wrapper article,
#wrapper article {
  margin-bottom: 1.5em !important;
  padding-bottom: 1.5em !important;
}

/* Tighter time/date display */
body#collection #wrapper time,
#wrapper time.dt-published {
  margin-top: 0.1em !important;
  margin-bottom: 0 !important;
}

/* Reader preview overlay - adapt gradient for dark mode */
.preview .over {
  background: linear-gradient(to bottom, rgba(250,250,250,0) 0%, var(--bg) 100%) !important;
}

/* --- User nav (top bar when logged in) --- */
nav#manage {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border);
}
nav#manage ul {
  font-size: 0.9em;
}
nav#manage a {
  color: var(--text-secondary) !important;
}
nav#manage a:hover {
  color: var(--heading) !important;
}

/* --- Lists --- */
.e-content ul, .e-content ol {
  color: var(--text);
}

/* --- Selections --- */
::selection {
  background: rgba(0, 0, 0, 0.08);
}
html[data-theme="dark"] ::selection {
  background: rgba(255, 255, 255, 0.12);
}

/* --- Marketing section (footer on non-single-user) --- */
.marketing-section {
  color: var(--text-muted) !important;
}
.marketing-section h3 a {
  color: var(--text-secondary) !important;
}
.marketing-section a {
  color: var(--text-muted) !important;
}
.marketing-section a:hover {
  color: var(--text-secondary) !important;
}

/* --- Dashboard: Blog list page (pager buttons, collection titles) --- */
.pager a {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.pager a:hover {
  background: var(--bg-secondary) !important;
  color: var(--heading) !important;
}
.pager a.selected {
  background: var(--border) !important;
  color: var(--heading) !important;
}
.pager a.btn.gentlecta {
  color: var(--text) !important;
}

/* Collection titles and metadata in blog list */
#official-writing ul.collections li.collection a.title:link,
#official-writing ul.collections li.collection a.title:visited,
#wrapper ul.collections li.collection a.title:link,
#wrapper ul.collections li.collection a.title:visited {
  color: var(--heading) !important;
}
#official-writing ul.collections li.collection a.title:hover,
#wrapper ul.collections li.collection a.title:hover {
  color: var(--link) !important;
}
.atoms h3 .electron,
body#pad-sub #posts h3 .electron {
  color: var(--text-muted) !important;
}
#official-writing ul.collections li a.create,
#wrapper ul.collections li a.create {
  color: var(--text-secondary) !important;
}
#official-writing h1, #official-writing h2, #official-writing h3, #official-writing h4,
#wrapper h2, #wrapper h3, #wrapper h4,
.content-container h1 {
  color: var(--heading) !important;
}

/* New Post button in header */
nav#full-nav a.simple-btn,
.tool button {
  color: var(--text) !important;
  border-color: var(--border) !important;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
nav#full-nav a.simple-btn:hover,
.tool button:hover {
  background: var(--bg-secondary) !important;
  color: var(--heading) !important;
}

/* Form inputs (new blog form, settings, etc.) */
#official-writing input[type="text"],
#official-writing input[type="email"],
#official-writing input[type="password"],
#official-writing textarea,
.content-container input[type="text"],
.content-container input[type="email"],
.content-container input[type="password"],
.content-container textarea {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
input[type="submit"] {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* New blog link */
#new-collection {
  color: var(--link) !important;
}
#new-collection:hover {
  color: var(--link-hover) !important;
}

/* --- Dashboard: Settings, stats, subscribers pages --- */
.content-container {
  color: var(--text) !important;
}
.content-container p {
  color: var(--text) !important;
}
.content-container a {
  color: var(--link) !important;
}
.content-container a:hover {
  color: var(--link-hover) !important;
}

/* Admin pager tabs (Dashboard/Settings/Users/Pages/Monitor) */
header.admin nav.pager a {
  color: var(--text) !important;
  border-color: var(--border) !important;
}
header.admin nav.pager a:hover {
  background: var(--bg-secondary) !important;
}
header.admin nav.pager a.selected {
  background: var(--border) !important;
  color: var(--heading) !important;
}

/* Dropdown arrow icon - invert in dark mode only */
html[data-theme="dark"] nav.dropdown-nav img.ic-18dp {
  filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) nav.dropdown-nav img.ic-18dp {
    filter: invert(1);
  }
}

/* --- Editor --- */
body#pad {
  background: var(--bg) !important;
}
textarea#writer {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 0.9em !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
/* Respect WriteFreely's font selection dropdown (.norm=serif, .sans=sans-serif, .code/.mono=monospace).
   The textarea gets these classes toggled dynamically by JS when the user picks a font. */
textarea#writer.sans {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
textarea#writer.code, textarea#writer.mono {
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace !important;
}
textarea#writer.norm, textarea#writer.wrap {
  font-family: "Lora", Georgia, "Times New Roman", serif !important;
}
textarea#editor {
  background: var(--bg) !important;
  color: var(--text) !important;
}
input#title {
  background: var(--bg) !important;
  color: var(--heading) !important;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* Editor toolbar — always visible (upstream fades to 0.2 opacity on idle) */
body#pad header#tools {
  background: var(--bg) !important;
  border-bottom-color: var(--border) !important;
  opacity: 1 !important;
}
/* Keep all toolbar items visible, not just on hover. Upstream uses .hidden
   class on some items (word count, font picker, theme toggle) that only
   appear at full opacity on toolbar hover. Override to always show them. */
body#pad header#tools .hidden,
body#pad header#tools .tool.hidden {
  opacity: 1 !important;
}
body#pad header#tools #belt a {
  opacity: 0.75 !important;
}
body#pad header#tools #belt a:hover {
  opacity: 1 !important;
}
body#pad header#tools, body#pad header#tools a, body#pad header#tools nav a {
  color: var(--text-secondary) !important;
}
body#pad header#tools a:hover, body#pad header#tools nav a:hover {
  color: var(--heading) !important;
}
/* Hide upstream editor theme toggle — we use the site-wide theme-toggle.js
   button (fixed bottom-right) instead. The upstream toggle uses a separate
   localStorage key and body class system that conflicts with our data-theme
   attribute approach. */
#toggle-theme {
  display: none !important;
}

/* --- Drafts / posts list (pad-sub) --- */
.atoms h3 a, .atoms h4 a,
body#pad-sub #posts h3 a, body#pad-sub #posts h4 a {
  color: var(--heading) !important;
}
.atoms h3 a:hover, .atoms h4 a:hover,
body#pad-sub #posts h3 a:hover, body#pad-sub #posts h4 a:hover {
  color: var(--link) !important;
}
.atoms .electron, .atoms date,
body#pad-sub #posts .electron, body#pad-sub #posts date {
  color: var(--text-muted) !important;
}
.atoms p, body#pad-sub #posts p {
  color: var(--text-secondary) !important;
}

/* --- Markdown Preview Pane --- */
#preview-pane {
  max-width: 42rem;
  margin: 0 auto;
  padding: 1.5em 2em;
  min-height: calc(100vh - 80px);
  overflow-y: auto;
  color: var(--text);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.7;
  letter-spacing: -0.01em;
  font-size: 1.1em;
}
#preview-pane h2#title {
  font-size: 1.6em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.3;
  color: var(--heading);
  margin-bottom: 0.5em;
}
#preview-pane.sans {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#preview-pane.norm, #preview-pane.wrap {
  font-family: "Lora", Georgia, "Times New Roman", serif;
}
#preview-pane.code, #preview-pane.mono {
  font-family: "Geist Mono", "SF Mono", "Fira Code", monospace;
}
.preview-empty, .preview-loading, .preview-error {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  margin-top: 4em;
}
.preview-error {
  color: #e21d27;
}
/* Preview toggle button active state */
#preview-toggle.active {
  color: var(--heading) !important;
}
/* Match upstream img.ic-24dp alignment (vertical-align: bottom in pad.less) */
#preview-toggle svg.ic-24dp {
  width: 24px;
  height: 24px;
  vertical-align: bottom;
}

/* --- Error / status messages --- */
ul.errors li.urgent {
  color: #e21d27;
}

/* --- Overlay for menus --- */
#overlay {
  background: var(--bg) !important;
}