/* =========================================================================
   Техническая поддержка сайта (F02): /uslugi/razrabotka-i-dorabotka-sajtov/podderzhka-sajta/
   Первый экран — журнал работ за месяц: строки отмечаются по очереди, растёт счётчик часов
   пакета, полоса доступности заполняется днями. Ниже — состав работ, пакеты, сравнение
   с разовыми доработками. Без JS и при «уменьшить движение» журнал в конечном состоянии.
   Поведение — assets/js/scenes/supportlog.js.
   ========================================================================= */

/* ---------- журнал поддержки ---------- */
.slog { display: grid; gap: 16px; width: 100%; max-width: 520px; margin-left: auto; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24, 38, 74, 0.72), rgba(17, 28, 51, 0.92)); border: 1px solid var(--night-line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.slog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.slog-top b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; color: #eef2fb; }
.slog-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--fog-dim); font-size: 0.85rem; }
.slog-tag::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1.5px dashed currentColor; }
.slog-meter { display: grid; gap: 8px; }
.slog-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--fog); font-size: 0.9rem; }
.slog-meter-top .num { color: #eef2fb; font-size: var(--step-1); }
.slog-bar { position: relative; height: 10px; border-radius: 5px; background: var(--night-line); overflow: hidden; }
.slog-bar i { --p: 0%; display: block; height: 100%; width: var(--p); border-radius: 5px; background: linear-gradient(90deg, var(--flow), var(--signal)); transition: width 0.6s var(--ease-out); }
.slog-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.slog-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--night-2); border: 1px solid transparent; transition: border-color 0.35s, background-color 0.35s; }
.slog-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--night-3); }
.slog-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--flow-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.3s; }
.slog-list b { display: block; color: #eef2fb; font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.slog-list small { display: block; color: var(--fog); font-size: 0.8rem; line-height: 1.35; }
.slog-h { color: var(--fog); font-size: 0.85rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slog-list li.is-done { border-color: rgba(47, 191, 138, 0.35); }
.slog-list li.is-done .slog-ico { background: rgba(47, 191, 138, 0.16); }
.slog-list li.is-done .slog-ico svg { stroke: #7fe0bb; }
.slog.is-armed .slog-list li:not(.is-done) { background: transparent; border-color: var(--night-line); }
.slog.is-armed .slog-list li:not(.is-done) b, .slog.is-armed .slog-list li:not(.is-done) .slog-h { color: var(--fog-dim); }
.slog-up { display: grid; gap: 8px; color: var(--fog); font-size: 0.85rem; }
.slog-up-top { display: flex; justify-content: space-between; gap: 12px; }
.slog-up-top b { color: #7fe0bb; font-weight: 600; }
.slog-days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; }
.slog-days i { display: block; height: 16px; border-radius: 3px; background: var(--ok); opacity: 0.85; transition: background-color 0.3s; }
.slog.is-armed .slog-days i:not(.is-on) { background: var(--night-line); }
.slog-note { margin: 0; color: var(--fog-dim); font-size: var(--step--1); }

/* ---------- что входит каждый месяц ---------- */
.sup-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.sup-grid li { display: grid; gap: 10px; align-content: start; padding: clamp(20px, 2.4vw, 26px); border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.sup-grid svg { width: 32px; height: 32px; fill: none; stroke: var(--signal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sup-grid h3 { font-size: var(--step-1); font-weight: 650; line-height: 1.25; }
.sup-grid p { margin: 0; color: var(--fg-soft); font-size: 0.97rem; line-height: 1.5; }
.sup-report { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; padding: 18px 22px; border-radius: var(--radius-md); border: 1.5px dashed var(--line); color: var(--fg-soft); }
.sup-report b { color: var(--fg); font-weight: 650; }

/* ---------- разовые доработки или поддержка ---------- */
.vs-wrap { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.vs-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; line-height: 1.45; }
.vs-table caption { padding: 16px 20px 4px; text-align: left; color: var(--fg-dim); font-size: 0.88rem; caption-side: top; }
.vs-table th, .vs-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.vs-table thead th { border-top: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
.vs-table thead th:first-child { width: 24%; }
.vs-table thead th.is-here { color: var(--flow-ink); }
.vs-table tbody th { color: var(--fg-dim); font-size: 0.88rem; font-weight: 600; }
.vs-table td { color: var(--fg-soft); }
.vs-table td.is-here { color: var(--fg); background: rgba(76, 125, 255, 0.05); }
.vs-more { margin: 18px 0 0; color: var(--fg-soft); }

/* ---------- адаптив ---------- */
@media (max-width: 1080px) {
  .slog { margin: 0 auto; }
  .sup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .vs-table, .vs-table tbody, .vs-table tr, .vs-table td { display: block; }
  .vs-table thead { display: none; }
  .vs-table tbody tr { border-top: 1px solid var(--line); padding: 4px 0; }
  .vs-table tbody th { display: block; padding: 14px 18px 4px; border: 0; color: var(--fg); font-size: 1rem; }
  .vs-table td { display: grid; gap: 2px; padding: 8px 18px; border: 0; }
  .vs-table td.is-here { background: none; }
  .vs-table td::before { content: attr(data-label); color: var(--fg-dim); font-size: 0.85rem; font-weight: 600; }
}
@media (max-width: 640px) {
  .sup-grid { grid-template-columns: minmax(0, 1fr); }
  .sup-grid li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 18px; }
  .sup-grid svg { grid-row: span 2; }
  .slog-list li { grid-template-columns: 26px minmax(0, 1fr); padding: 9px 10px; }
  .slog-ico { width: 26px; height: 26px; }
  .slog-h { grid-column: 2; }
  .slog-days i { height: 12px; }
}