/* ATLAS V6 — Documents page augmentation (re-skins docs5-* DOM)
 * V5→V6 polish 2026-06-23. Loads after v5-docs.css. Single locked theme. */

#view-documents { background: var(--bg); }

/* Header */
.docs5-head {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 22px 28px 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.docs5-eyebrow {
  font: 900 11px/1 var(--font-ui); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px; display: inline-block;
}
.docs5-title {
  font: 850 28px/1.18 var(--font-display); color: var(--ink);
  letter-spacing: -0.005em; margin: 0 0 6px;
}
.docs5-sub { font: 400 14px/1.45 var(--font-ui); color: var(--muted); margin: 0; }

.docs5-upload-btn {
  background: var(--gold); color: #fff; border: none;
  padding: 9px 16px; border-radius: 8px;
  font: 600 13px/1 var(--font-ui); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.docs5-upload-btn:hover { filter: brightness(1.04); box-shadow: 0 4px 12px rgba(193,138,37,.28); }

/* Filter / sort bar */
.docs5-filterbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 12px 28px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.docs5-cat {
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
  font: 600 11px/1 var(--font-ui); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.docs5-cat:hover { color: var(--ink); border-color: var(--line-strong); }
.docs5-cat.is-on {
  background: var(--champagne-soft); color: var(--gold);
  border-color: var(--gold);
}

.docs5-search {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 10px; border-radius: 8px;
  min-width: 220px;
}
.docs5-search input {
  background: transparent; border: none; outline: none;
  color: var(--ink); font: 400 12px/1 var(--font-ui);
  flex: 1; min-width: 0;
}
.docs5-search input::placeholder { color: var(--muted); }
.docs5-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--champagne-soft); }

.docs5-sort-lab { color: var(--muted); }
.docs5-sort-btn {
  background: transparent; border: 1px solid transparent;
  padding: 3px 7px; border-radius: 6px;
  font: 600 11px/1 var(--font-ui); color: var(--muted); cursor: pointer;
}
.docs5-sort-btn:hover { color: var(--ink); border-color: var(--line); }
.docs5-sort-btn.is-on { color: var(--gold); border-color: var(--champagne-soft); }

/* Sections */
.docs5-section-h {
  margin: 22px 28px 10px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.docs5-section-title { font: 600 13px/1 var(--font-display); color: var(--ink); }
.docs5-section-sub   { font: 400 12px/1.4 var(--font-ui); color: var(--muted); }

/* Loop card with progress ring */
.docs5-loops { display: grid; gap: 12px; padding: 0 28px 22px; }
.docs5-loop {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(16,23,34,.04);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.docs5-loop:hover { box-shadow: 0 6px 18px rgba(16,23,34,.08); transform: translateY(-1px); border-color: var(--line-strong); }
.docs5-loop-name { font: 600 15px/1.25 var(--font-display); color: var(--ink); }
.docs5-loop-meta { font: 400 12px/1.4 var(--font-ui); color: var(--muted); margin-top: 3px; }
.docs5-loop-folder { font-size: 18px; flex: none; }
.docs5-loop-type { color: var(--muted); }

.docs5-ring-track { stroke: var(--surface-2); }
.docs5-ring-fill { stroke: var(--gold); transition: stroke-dashoffset .6s ease; }

.docs5-doclist { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.docs5-docrow {
  background: transparent;
  padding: 7px 9px; border-radius: 6px;
  transition: background-color .15s ease;
}
.docs5-docrow:hover { background: var(--bg2); }