/*
 * Game-server backups components (`backups`, `restorepoints`; lib/backups-explorer.mjs).
 * Loaded after news.css, only on pages that use them. Reuses the shared segmented control
 * (.c-seg) from news.css; behaviour in backups-explorer.js.
 */

.c-backups,
.c-restorepoints {
  --bx-keep: #8ab4ff;
  --bx-keep-bg: rgba(138, 180, 255, 0.1);
  --bx-skip: #6b7380;
}

/* ------------------------------------------------------------ Explorer */

.c-backups {
  padding: clamp(1.1rem, 0.8rem + 1.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: clamp(16px, 0.8rem + 1vw, 22px);
  background: var(--surface);
}

.bx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.25rem;
}

.prose .bx-title {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
}

.prose .bx-legend {
  display: flex;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}

.prose .bx-legend > li + li { margin-top: 0; }

.bx-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.c-backups .c-seg {
  margin-bottom: 1.25rem;
}

@media (max-width: 479px) {
  .c-backups .c-seg { display: flex; width: 100%; }
  .c-backups .c-seg-btn { flex: 1 1 auto; padding: 0 0.5rem; font-size: 0.8rem; }
}

.bx-panel + .bx-panel {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.c-backups.is-live .bx-panel + .bx-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.bx-panel:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
  border-radius: 8px;
}

.prose .c-backups .bx-game {
  margin: 0 0 0.75rem;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
}

/* The heading repeats the selected tab, so it is only for screen readers once the tabs exist. */
.c-backups.is-live .bx-game {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.prose .bx-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .bx-tree > li + li { margin-top: 0; }

.bx-row {
  display: grid;
  grid-template-columns: 16px minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  min-height: 34px;
  padding: 0.3rem 0.5rem 0.3rem calc(0.5rem + var(--d, 0) * 1.15rem);
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.bx-row[data-d="1"] { --d: 1; }
.bx-row[data-d="2"] { --d: 2; }

.bx-row + .bx-row {
  box-shadow: 0 -1px 0 var(--line);
}

.prose .bx-name {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.bx-mark {
  width: 16px;
  height: 16px;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bx-why {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem 0.6rem;
  min-width: 0;
  text-align: right;
}

.bx-note {
  font-size: 0.82rem;
  color: var(--ink-2);
}

.bx-tag {
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--muted);
}

.is-keep .bx-mark { stroke: var(--bx-keep); }
.is-keep .bx-mark circle { fill: var(--bx-keep-bg); }
.prose .is-keep .bx-name { color: var(--ink); }

.is-skip .bx-mark { stroke: var(--bx-skip); }
.prose .is-skip .bx-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(255, 255, 255, 0.22);
}
.is-skip .bx-note { color: var(--muted); }

.is-dir .bx-mark { stroke: var(--muted); }
.prose .is-dir .bx-name { color: var(--ink-2); }

.bx-legend .is-keep .bx-mark { stroke: var(--bx-keep); }
.bx-legend .is-skip .bx-mark { stroke: var(--bx-skip); }

/* Phones: one line per item where it fits; skipped items show only their reason. */
@media (max-width: 479px) {
  .bx-row {
    gap: 0.5rem;
    min-height: 32px;
    padding: 0.25rem 0.15rem 0.25rem calc(0.15rem + var(--d, 0) * 0.8rem);
  }
  .prose .bx-name { font-size: 0.8rem; }
  .bx-note { font-size: 0.78rem; }
  .bx-tag { font-size: 0.72rem; padding: 0.05rem 0.45rem; }
  .is-skip .bx-note { display: none; }
}

/* Size bar (Garry's Mod only: the one real measurement). */
.bx-size {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.prose .bx-size-label {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.bx-bar-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
}

.bx-bar-row + .bx-bar-row { margin-top: 0.55rem; }

.bx-bar-name { color: var(--ink-2); }
.bx-bar-val { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

.bx-bar {
  position: relative;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.bx-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: inherit;
  transform-origin: left center;
}

.bx-bar-fill.is-full { background: #4a515c; }
.bx-bar-fill.is-kept { background: var(--bx-keep); transform: scaleX(var(--share)); }

@media (max-width: 479px) {
  .bx-bar-row { grid-template-columns: 5.6rem minmax(0, 1fr) 5.4rem; gap: 0.5rem; font-size: 0.82rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .c-backups.is-live .bx-bar-fill.is-kept {
    transition: transform 0.9s var(--ease-expo);
  }
  .c-backups.is-live .bx-panel.is-enter .bx-bar-fill.is-kept {
    transform: scaleX(1);
    transition: none;
  }
  .c-backups.is-live .bx-row {
    transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 22ms);
  }
  .c-backups.is-live .bx-panel.is-enter .bx-row {
    opacity: 0;
    transform: translateY(4px);
    transition: none;
  }
}

/* ------------------------------------------------------ Restore points */

.rp-grid {
  display: grid;
  gap: 1rem;
}

/* Stacked: the 680px reading column is too narrow for both groups side by side. */
@media (min-width: 480px) {
  .prose ul.rp-list { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .rp-group.is-manual .rp-sub { margin-top: 0.75rem; }
}

.rp-group {
  padding: 1.1rem 1.2rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.rp-group.is-manual {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
}

.prose .rp-title {
  margin: 0 0 0.9rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
}

.prose .rp-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prose .rp-list > li + li { margin-top: 0; }

@media (min-width: 480px) {
  .prose ol.rp-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rp-point {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  line-height: 1.3;
}

.rp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bx-keep);
}

.rp-point.is-oldest .rp-dot { background: rgba(138, 180, 255, 0.45); }
.rp-point.is-manual .rp-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

.rp-when {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

.rp-note {
  grid-column: 2;
  font-size: 0.8rem;
  color: var(--muted);
}

.prose .rp-sub {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
}