/* ------------------------------------------------------------------
   lagstyr — AI-native guide page styles. References tokens.css only.
   Loaded after styles.css; adds only what the guide page introduces.
------------------------------------------------------------------ */

/* ---- hero signature: the document-set listing (each row downloads) ---- */
.docset {
  background: linear-gradient(180deg, var(--substrate), var(--void-2));
  border: 1px solid var(--spine); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  font-family: var(--font-mono); font-size: var(--t-mono);
}
.docset-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--spine);
  background: color-mix(in srgb, var(--substrate-2) 60%, transparent);
}
.docset-title { color: var(--mist); letter-spacing: 0.04em; }
.docset-title .log-dot { color: var(--indigo); margin-inline: 3px; }
.docset-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--tier-read); letter-spacing: 0.05em; }
.docset-list { list-style: none; margin: 0; padding: 6px 0; }
.docset-list a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center;
  gap: 12px; padding: 10px 16px; white-space: nowrap;
  border-left: 2px solid var(--indigo);
  transition: background .2s var(--ease);
}
.docset-list a:hover { background: var(--substrate-2); }
.docset-list .doc-no { color: var(--indigo); }
.docset-list .doc-name { color: var(--ink-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.docset-list .doc-size { color: var(--mist-2); }
.docset-list .doc-dl { color: var(--indigo); opacity: 0; transition: opacity .2s var(--ease); }
.docset-list a:hover .doc-dl { opacity: 1; }
.docset-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--spine);
  background: color-mix(in srgb, var(--substrate-2) 40%, transparent);
  color: var(--mist); letter-spacing: 0.04em;
}

/* ---- download affordances ---- */
.btn-download {
  border-color: var(--spine-2); color: var(--ink); background: transparent;
  padding: 10px 18px; font-size: 0.9rem;
}
.btn-download:hover { border-color: var(--indigo); color: var(--indigo-bright); }
.btn-download .dl-arrow { color: var(--indigo); }
.doc-meta { font-family: var(--font-mono); font-size: var(--t-mono); color: var(--mist-2); letter-spacing: 0.06em; }

/* each document section closes with its own download row */
.section-get {
  margin-top: var(--s-7); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
}

/* ---- the closing downloads band ---- */
.dl-all {
  display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap;
  background: var(--substrate); border: 1px solid var(--spine); border-radius: var(--radius);
  padding: var(--s-7);
}
.dl-all .dl-copy { flex: 1 1 34ch; }
.dl-all h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.dl-all p { color: var(--ink-dim); }
.dl-all .doc-get { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.dl-files { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* a card split that follows another component inside the same band */
.split-follow { margin-top: var(--s-7); }

/* the four program phases: one column per phase, no empty auto-fill cells */
.domains-phases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .domains-phases { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .domains-phases { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
  .docset { max-width: 520px; }
}
@media (max-width: 680px) {
  .docset-list a { grid-template-columns: auto minmax(0, 1fr); }
  .docset-list .doc-size, .docset-list .doc-dl { display: none; }
}