/* Бумага и чернила — переносимая выжимка для проектов без Tailwind.
   Эталон: Dev/Активные/BAHUR/Доставка/Databotdelivery (src/index.css, layout/sidebar.tsx). */

:root {
  --bg: #f1ede4; --fg: #1d1d1f; --card: #ffffff; --popover: #ffffff;
  --ink: #1d1d1f; --ink-fg: #ffffff;
  --secondary: #f2eee6; --muted: #ece8de; --accent: #efebe2;
  --muted-fg: #7c776c; --border: #e6e1d6; --danger: #e0532c;
  --st-new: #1d1d1f; --st-pending: #f3c64b; --st-work: #2f5e50; --st-error: #e0532c;
  --chart-1: #e0532c; --chart-2: #2f5e50; --chart-3: #f3c64b; --chart-4: #1d1d1f; --chart-5: #9a8f78;
  --rail: #1d1d1f;
  --shadow-warm: 0 1px 2px rgb(60 50 30 / .04), 0 10px 30px -14px rgb(60 50 30 / .16);
  --shadow-rail: 0 18px 40px -12px rgb(30 25 15 / .45);
}
.dark {
  --bg: #121110; --fg: #f5f3ee; --card: #1c1b19; --popover: #22211e;
  --ink: #f5f3ee; --ink-fg: #1d1d1f;
  --secondary: #262521; --muted: #262521; --accent: #2a2925;
  --muted-fg: #9d978b; --border: #302e2a;
  --st-new: #2c2c2e;
  --chart-1: #ff7a50; --chart-2: #5aa58e; --chart-3: #f3c64b; --chart-4: #f5f3ee; --chart-5: #b4a98f;
  --rail: #262521;
  --shadow-warm: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px -14px rgb(0 0 0 / .6);
}

body {
  background-color: var(--bg); color: var(--fg);
  background-image:
    radial-gradient(900px 520px at 12% -8%, #f8f0db 0%, transparent 62%),
    linear-gradient(180deg, #f1ecdf 0%, #efede4 48%, #e4ebe1 100%);
  background-attachment: fixed;
}
.dark body {
  background-image:
    radial-gradient(900px 520px at 12% -8%, #221f17 0%, transparent 62%),
    linear-gradient(180deg, #151411 0%, #121110 50%, #0f120f 100%);
}

/* Карточка на бумаге */
.surface {
  background: var(--card); border-radius: 20px;
  border: 1px solid rgb(0 0 0 / .04); box-shadow: var(--shadow-warm);
}
.dark .surface { border-color: rgb(255 255 255 / .05); }

/* Капсула навигации слева (от 768px) */
.rail-wrap { position: fixed; inset: 16px auto 16px 16px; z-index: 40; display: none; align-items: center; }
@media (min-width: 768px) { .rail-wrap { display: flex; } }
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 12px; max-height: 100%; overflow-y: auto;
  padding: 8px; border-radius: 30px; background: var(--rail); box-shadow: var(--shadow-rail);
}
.rail nav { position: relative; display: flex; flex-direction: column; gap: 4px; }
.rail a, .rail button {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
  color: rgb(255 255 255 / .5); transition: color .2s, background-color .2s;
}
.rail a:hover, .rail button:hover { color: #fff; background: rgb(255 255 255 / .1); }
.rail a[aria-current="page"] { color: #1d1d1f; background: transparent; }
/* Белый круг, который ездит за активным: top задаётся из JS как index * 48px (+16px за разделителем) */
.rail .pill {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 999px;
  background: #fff; box-shadow: 0 4px 10px rgb(0 0 0 / .15);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.dark .rail .pill { background: #f5f3ee; }
.rail .sep { width: 24px; height: 1px; margin: 5.5px auto; background: rgb(255 255 255 / .12); }

/* Нижний док (до 768px) */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40;
  max-width: 448px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 6px; border-radius: 999px; background: var(--rail); box-shadow: var(--shadow-rail);
}
@media (min-width: 768px) { .dock { display: none; } }
.dock a {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px;
  border-radius: 999px; color: rgb(255 255 255 / .55); font: 500 13px/1 inherit; transition: all .3s ease-out;
}
.dock a[aria-current="page"] { background: #fff; color: #1d1d1f; padding: 0 16px; }

/* Шапка */
.page-title { margin-top: 28px; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.page-sub { margin-top: 8px; font-size: 14px; color: var(--muted-fg); }
@media (max-width: 639px) { .page-title { margin-top: 20px; font-size: 32px; } }

/* Кнопки, поля, переключатель */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 500; transition: transform .15s, background-color .2s; }
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--ink); color: var(--ink-fg); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.btn-outline { background: var(--card); border: 1px solid var(--border); }
.input { height: 36px; padding: 0 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); }
.input:focus { outline: none; border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.segmented { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--muted); }
.segmented > button { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted-fg); }
.segmented > [aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }

/* Плашки статусов */
.plaque { border-radius: 16px; padding: 14px; transition: transform .3s ease-out, box-shadow .3s; }
.plaque:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgb(60 50 30 / .35); }
@starting-style { .plaque { transform: translateY(8px); opacity: 0; } }
.plaque.new { background: var(--st-new); color: #fff; }
.plaque.pending { background: var(--st-pending); color: #1d1d1f; }
.plaque.work { background: var(--st-work); color: #fff; }
.plaque.error { background: var(--st-error); color: #fff; }
.plaque.done { background: var(--card); border: 1px solid var(--border); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }