/* ============================================================
   Lexica — AI Book Translation
   Quiet tech-tool aesthetic. Linear/Notion DNA.
   ============================================================ */

:root {
  /* Base palette */
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-2: #f4f4f3;
  --surface-3: #ededeb;
  --hairline: #e7e7e4;
  --hairline-2: #efefec;
  --rule: #d9d9d6;

  /* Type */
  --ink: #0a0a0a;
  --ink-2: #3a3a39;
  --ink-3: #6b6b6a;
  --ink-4: #9a9a98;
  --ink-5: #bcbcb9;

  /* Accents */
  --accent: #2a6fdb;
  --accent-tint: #e8f0fc;
  --accent-deep: #1d52a8;
  --sage: #5a6b52;
  --sage-tint: #eaeee5;
  --warm: #c97a4a;
  --warm-tint: #f6e7da;
  --crimson: #b54034;
  --crimson-tint: #f7e4e1;
  --moss: #4a7a4f;
  --moss-tint: #e3edda;

  /* Diff */
  --diff-ins: #4a7a4f;
  --diff-ins-bg: #e6f0dc;
  --diff-del: #b54034;
  --diff-del-bg: #f7e1dd;

  /* Type stacks */
  --ui: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: "Newsreader", "Source Serif Pro", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --han: "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif;

  /* Density */
  --pad: 16px;
  --pad-lg: 24px;

  /* Misc */
  --radius: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
}

button { font: inherit; color: inherit; cursor: default; }

/* ========== App shell ========== */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sb-head {
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
}
.sb-mark {
  width: 22px; height: 22px;
  background: var(--ink);
  border-radius: 5px;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.04em;
}
.sb-brand {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.sb-brand small {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: 2px;
}

.sb-project {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--hairline);
}
.sb-project .label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.sb-project .title {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
}
.sb-project .meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.sb-nav {
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sb-group {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  text-transform: uppercase;
  padding: 12px 8px 4px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--ink-2);
  font-size: 13px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
.sb-item:hover { background: rgba(0,0,0,0.04); }
.sb-item.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hairline);
}
.sb-item .num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  width: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sb-item.active .num { color: var(--accent); }
.sb-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-5);
  margin-left: auto;
}
.sb-item .dot.done { background: var(--moss); }
.sb-item .dot.active { background: var(--accent); }
.sb-item .dot.pending { background: var(--ink-5); }

.sb-foot {
  border-top: 1px solid var(--hairline);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #d9d6c8, #b8b0a0);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  display: grid; place-items: center;
}
.sb-foot .name { font-size: 12px; color: var(--ink-2); }
.sb-foot .role { font-size: 10.5px; color: var(--ink-4); font-family: var(--mono); }

/* ========== Main area ========== */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}

.topbar {
  height: 44px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  background: var(--bg);
  flex-shrink: 0;
}
.crumbs {
  font-size: 12px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.crumbs .sep { color: var(--ink-5); }
.crumbs .here { color: var(--ink); }
.topbar .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Top toolbar buttons */
.tb-btn {
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tb-btn:hover { background: var(--surface-2); }
.tb-btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.tb-btn.primary:hover { background: #1d1d1d; }
.tb-btn.ghost { border-color: transparent; background: transparent; }
.tb-btn.ghost:hover { background: rgba(0,0,0,0.05); }
.kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-4);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 1px 4px;
  background: var(--surface);
}

.screen {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* Common */
.section-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.h1 {
  font-family: var(--serif);
  font-size: 32px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 500;
  color: var(--ink);
}
.h2 {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--ink);
}
.h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.tabular { font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--hairline);
}
.pill.accent { background: var(--accent-tint); color: var(--accent-deep); border-color: transparent; }
.pill.sage   { background: var(--sage-tint); color: #3d4a36; border-color: transparent; }
.pill.warm   { background: var(--warm-tint); color: #8b4f29; border-color: transparent; }
.pill.moss   { background: var(--moss-tint); color: #34552f; border-color: transparent; }
.pill.crimson{ background: var(--crimson-tint); color: var(--crimson); border-color: transparent; }
.pill .ddot  { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.9; }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}

/* Progress bar */
.bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.bar .fill { height: 100%; background: var(--accent); border-radius: 2px; }
.bar .fill.sage { background: var(--moss); }
.bar .fill.warm { background: var(--warm); }

/* Mini bar (chapter) */
.mbar {
  height: 3px; background: var(--surface-3); border-radius: 999px; overflow: hidden;
}
.mbar .fill { height: 100%; background: var(--accent); }

/* Pulse dot */
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(42,111,219,0.6); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(42,111,219,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(42,111,219,0); }
  100% { box-shadow: 0 0 0 0 rgba(42,111,219,0); }
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(42,111,219,0.08), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reading typography */
.read-zh {
  font-family: var(--han);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.read-en {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  letter-spacing: -0.003em;
}

/* Diff styling — inline track-changes */
.diff-ins { background: var(--diff-ins-bg); color: var(--diff-ins);
  text-decoration: underline; text-decoration-color: rgba(74,122,79,0.5);
  text-underline-offset: 3px; padding: 0 1px; }
.diff-del { background: var(--diff-del-bg); color: var(--diff-del);
  text-decoration: line-through; text-decoration-color: rgba(181,64,52,0.6);
  padding: 0 1px; }

/* Comment / highlight */
.hl {
  background: linear-gradient(transparent 55%, rgba(201,122,74,0.28) 55%);
  cursor: text;
  border-radius: 1px;
  padding: 0 1px;
}
.hl.blue {
  background: linear-gradient(transparent 55%, rgba(42,111,219,0.22) 55%);
}
.hl.commented {
  background: linear-gradient(transparent 55%, rgba(255,224,130,0.6) 55%);
  border-bottom: 1px dotted #c9a44d;
}

/* Tooltip caret on hover */
.cmnt-pin {
  position: relative;
  display: inline-block;
  width: 14px; height: 14px;
  background: var(--warm);
  color: #fff;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  vertical-align: 1px;
  margin: 0 1px;
}

/* Glossary chip in reading area */
.gl-tok {
  border-bottom: 1px dashed var(--ink-5);
  cursor: help;
}

/* Scrollbar polish */
.screen::-webkit-scrollbar, .sb-nav::-webkit-scrollbar { width: 10px; height: 10px; }
.screen::-webkit-scrollbar-thumb, .sb-nav::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.08); border-radius: 5px; border: 2px solid transparent; background-clip: content-box;
}
.screen::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.18); background-clip: content-box; border: 2px solid transparent; }

/* Inputs */
.input {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  border-radius: 5px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,111,219,0.15); }
textarea.input { resize: vertical; min-height: 64px; line-height: 1.45; }

.field-label {
  font-size: 11.5px;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}
.field-hint {
  font-size: 11px;
  color: var(--ink-4);
  margin-top: 4px;
}

/* Segmented */
.segmented {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  padding: 2px;
  gap: 1px;
}
.segmented > button {
  border: 0;
  background: transparent;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--ink-3);
}
.segmented > button.on { background: var(--ink); color: #fff; }

/* Checkbox row */
.check {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--surface);
  cursor: default;
}
.check.on { border-color: var(--ink); }
.check .box {
  width: 16px; height: 16px; border: 1.5px solid var(--ink-5); border-radius: 4px;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.check.on .box { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Status colors mapping */
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.status-dot.done { background: var(--moss); }
.status-dot.translating { background: var(--accent); }
.status-dot.review { background: var(--warm); }
.status-dot.pending { background: var(--ink-5); }
.status-dot.flagged { background: var(--crimson); }

/* Subtle dotted divider for agent timeline */
.timeline-line {
  position: absolute; left: 11px; top: 16px; bottom: 0; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--ink-5) 0 2px, transparent 2px 5px);
}

/* Sample image-block placeholder for cover */
.cover-tile {
  background: repeating-linear-gradient(135deg, #ededeb 0 6px, #f4f4f3 6px 12px);
  border: 1px solid var(--hairline);
}