/* Granka Design System */

:root {
  --font-heading: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

body {
  font-family: var(--font-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  text-wrap: balance;
}

article p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid #b45a3c;
  outline-offset: 2px;
}

::selection {
  background: #e8d5c4;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

.thin-scroll::-webkit-scrollbar { width: 6px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb { background: #ddd8ce; border-radius: 3px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background: #c8c0b4; }

textarea:focus { outline: none; }

button, a { transition: color 150ms, background-color 150ms, border-color 150ms; }

pre code { font-size: 0.8125rem; line-height: 1.6; }

/* ── Motion tokens ───────────────────────────────────────────────── */
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
}

:focus-visible {
  outline: 2px solid #b45a3c;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Measure column: one width for toolbar + editor + counter so their
   left edges align. ~72ch @17px ≈ 48rem; font-size-independent (rem). ── */
.gr-measure { max-width: 48rem; width: 100%; }

/* ── Editor surface (contenteditable / textarea share metrics) ─────── */
.gr-editor {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: #1c1917;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  caret-color: #b45a3c;
  min-height: 60vh;
  outline: none;
}
.gr-editor.is-empty::before {
  content: attr(data-placeholder);
  color: #a8a29e;
  pointer-events: none;
  position: absolute;
}
textarea.gr-editor { resize: none; width: 100%; background: transparent; border: 0; }

/* ── Инлайн-подсветка: <span class="gr-mark"> прямо в поле ───────────
   Метки — реальные элементы DOM (как у Литеры), не CSS Custom Highlight API:
   Custom Highlights в Safari/WebKit ГАСЛИ после первого ввода в поле (латч), а
   на реальных span text-decoration рендерится во всех браузерах. Волнистое
   подчёркивание + лёгкая категорийная заливка по типу находки. */
/* Контраст подбит выше (Слава: «плохо видно, что подсвечено» на части экранов):
   заливка плотнее + подчёркивание толще 2px. */
.gr-mark { text-decoration-skip-ink: none; text-decoration-thickness: 2px; border-radius: 2px; }
.gr-mark.gr-spelling,
.gr-mark.gr-grammar     { background-color: rgba(199, 62, 62, .22);  text-decoration: underline wavy #c73e3e; }
.gr-mark.gr-punctuation { background-color: rgba(196, 144, 48, .26); text-decoration: underline wavy #c49030; }
.gr-mark.gr-style,
.gr-mark.gr-whitespace  { background-color: rgba(95, 116, 128, .20); text-decoration: underline wavy #5f7480; }
.gr-mark.gr-norm        { background-color: rgba(124, 92, 191, .20); text-decoration: underline wavy #7c5cbf; }
/* Мягкий уровень Госязыка «Возможно, заимствование»: тише норм-канала —
   пунктир вместо волны, приглушённый серо-синий, лёгкая заливка. */
.gr-mark.gr-norm-soft   { background-color: rgba(107, 122, 143, .12); text-decoration: underline dashed #6b7a8f; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
/* Активная (выбранная) метка — заметно выделяется: насыщенная заливка + обводка. */
.gr-mark.is-active      { background-color: #f2c79e; color: #1c1917; box-shadow: 0 0 0 1px #b45a3c inset; }

/* ── Overview ruler (issue map on editor edge) ────────────────────── */
.gr-ruler {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 10px;
  z-index: 5;
}
.gr-tick {
  position: absolute;
  right: 2px;
  width: 6px;
  height: 3px;
  border-radius: 1px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease-standard), width var(--dur-fast) var(--ease-standard);
}
.gr-tick:hover, .gr-tick.is-active { opacity: 1; width: 9px; }
.gr-tick.is-stale { cursor: default; opacity: 0.3; }
.gr-tick-high   { background: #c73e3e; }
.gr-tick-medium { background: #c49030; }
.gr-tick-low    { background: #5f7480; }
/* Мягкая находка Госязыка — самая тихая засечка: приглушённый серо-синий, прозрачнее. */
.gr-tick-soft   { background: #6b7a8f; opacity: 0.45; }

/* ── Pulse overlay (arrival / jump flash, both editor modes) ──────── */
.gr-pulse {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border-radius: 3px;
  background: #b45a3c;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .gr-pulse { animation: gr-pulse-anim var(--dur-slow) var(--ease-decelerate) forwards; }
  @keyframes gr-pulse-anim {
    0%   { opacity: 0.32; transform: scaleY(1.4); }
    100% { opacity: 0;    transform: scaleY(1); }
  }
}

/* ── Cards / list motion ──────────────────────────────────────────── */
.gr-card { transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.gr-card.is-selected { border-color: #b45a3c; box-shadow: 0 0 0 1px #b45a3c inset; background: #fdf6f1; }
@media (prefers-reduced-motion: no-preference) {
  .gr-card-enter { animation: gr-fade-up var(--dur-base) var(--ease-decelerate) both; }
  @keyframes gr-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ── Skeleton (async grammar loading) ─────────────────────────────── */
.gr-skel {
  background: linear-gradient(90deg, #e8e4dc 25%, #f2efea 37%, #e8e4dc 63%);
  background-size: 400% 100%;
  border-radius: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .gr-skel { animation: gr-shimmer 1.4s ease-in-out infinite; }
  @keyframes gr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
}

/* ── Toast ────────────────────────────────────────────────────────── */
.gr-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  background: #1c1917; color: #faf8f5;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex; align-items: center; gap: 12px;
}
.gr-toast button { color: #e8d5c4; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .gr-toast { animation: gr-toast-in var(--dur-base) var(--ease-decelerate); }
  @keyframes gr-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ── Inline hint tooltip (rich editor only) ───────────────────────── */
.gr-tip {
  position: fixed;
  z-index: 45;
  max-width: 280px;
  width: max-content;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: #1c1917;
}
.gr-tip[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gr-tip { animation: gr-tip-in var(--dur-fast) var(--ease-decelerate); }
  @keyframes gr-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* Score ring count-up handled in JS; ring uses SVG stroke transitions. */
.gr-ring-fg { transition: stroke-dashoffset var(--dur-slow) var(--ease-decelerate), stroke var(--dur-slow) var(--ease-standard); }

/* Проверка идёт: кольцо оценки крутится «спиннером» (четверть дуги). */
.gr-ring-fg.is-checking {
  stroke-dasharray: 53.4 160.2;
  stroke-dashoffset: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: gr-ring-spin 1s linear infinite;
  transition: none;
}
@keyframes gr-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gr-ring-fg.is-checking { animation: none; stroke-dasharray: 213.6; stroke-dashoffset: 160; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-ring-fg { transition: none; }
  * { scroll-behavior: auto !important; }
}