/*
* Guider (/guider): the hub and the guide pages.
*
* The same markup is served in two layouts: the public (black) one for visitors and the
* app one for signed-in users, in whatever theme they picked. So every colour here is a
* Bootstrap or app token, never a literal.
*/

.guides {
  --guide-surface: var(--app-surface, var(--bs-secondary-bg));
  --guide-accent-text: var(--app-accent-text, var(--bs-primary));
}
.guides-public {
  max-width: 1120px;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

.guides h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.guides-eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.guides-lead {
  color: var(--bs-secondary-color);
  font-size: 1.1rem;
  max-width: 60ch;
}
.guides-meta {
  font-family: "JetBrains Mono", var(--bs-font-monospace);
  font-size: .8rem;
  color: var(--bs-secondary-color);
}

/* ---------- Hub ---------- */
.guides-category {
  margin-top: 2.5rem;
}
.guides-category-head {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: .6rem;
}
.guides-category-head h2 {
  font-size: 1.25rem;
  margin: 0;
}
.guides-category-blurb {
  color: var(--bs-secondary-color);
  font-size: .95rem;
  margin: .6rem 0 1rem;
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.guides-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  padding: 1.25rem;
  background: var(--guide-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
  color: var(--bs-body-color);
  text-decoration: none;
}
.guides-card:hover,
.guides-card:focus-visible {
  border-color: var(--bs-primary);
  color: var(--bs-body-color);
  text-decoration: none;
}
.guides-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--bs-emphasis-color);
}
.guides-card p {
  flex: 1;
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--bs-secondary-color);
}

/* ---------- Guide page: one column, contents at the top ---------- */
.guide {
  max-width: 68ch;
  margin: 0 auto;
  line-height: 1.65;
}
.guide > h1 {
  font-size: clamp(1.7rem, 3.6vw, 2.3rem);
}
.guide-crumb {
  font-size: .9rem;
  color: var(--bs-secondary-color);
  margin-bottom: 1rem;
}
.guide-byline {
  margin: .75rem 0 0;
}
.guide-short {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--bs-primary-bg-subtle);
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: 12px;
}
.guide-short .guides-eyebrow {
  color: var(--guide-accent-text);
  margin-bottom: .25rem;
}
.guide-short p {
  margin: 0;
}
.guide-toc {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
.guide-toc ul {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
}
.guide-toc li {
  padding: .2rem 0;
}
.guide-toc a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.guide-toc a:hover {
  color: var(--guide-accent-text);
}

.guide-body h2,
.guide-related h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 .75rem;
  scroll-margin-top: 5rem;
}
.guide-body h3 {
  font-size: 1.05rem;
  margin: 1.5rem 0 .5rem;
}
.guide-body li {
  margin-bottom: .35rem;
}
.guide-body li a,
.guide-body td a {
  text-decoration: underline;
}

/* A table scrolls inside its own box; the page never does. */
.guide-table {
  overflow-x: auto;
  margin: 1.25rem 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
.guide-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: .92rem;
}
.guide-table th {
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.guide-table td {
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--bs-border-color);
  vertical-align: top;
}
.guide-table tr:last-child td {
  border-bottom: 0;
}
.guide-table td:first-child {
  font-weight: 600;
  color: var(--bs-emphasis-color);
}
.guide-table .num {
  font-family: "JetBrains Mono", var(--bs-font-monospace);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.guide-table th.num {
  font-family: inherit;
  font-size: .75rem;
}

/* "Ur vår data": figures measured on our own database. */
.guide-data {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--guide-surface);
  border-left: 3px solid var(--bs-primary);
  border-radius: 0 12px 12px 0;
}
.guide-data .guides-eyebrow {
  margin-bottom: .5rem;
}
.guide-figures {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.5rem;
}
.guide-figures b {
  display: block;
  font-family: "JetBrains Mono", var(--bs-font-monospace);
  font-size: 1.6rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bs-emphasis-color);
}
.guide-figures span {
  font-size: .9rem;
  color: var(--bs-secondary-color);
}
.guide-data small {
  display: block;
  margin-top: .75rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--bs-secondary-color);
}

.guide-note {
  margin: 1.25rem 0;
  padding: .85rem 1.1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
.guide-note p:last-child {
  margin-bottom: 0;
}

.guide-faq {
  padding: .75rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.guide-faq summary {
  font-weight: 600;
  color: var(--bs-emphasis-color);
  cursor: pointer;
}
.guide-faq p {
  margin: .5rem 0 0;
  color: var(--bs-secondary-color);
}
.guide-sources {
  font-size: .9rem;
  color: var(--bs-secondary-color);
}
.guide-disclaimer {
  margin-top: 2rem;
  font-size: .85rem;
  color: var(--bs-secondary-color);
}

.guide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--guide-surface);
  border: 1px solid var(--bs-border-color);
  border-radius: 16px;
}
.guide-cta p {
  margin: 0;
  max-width: 44ch;
}

/* ---------- Signed-in layout ---------- */
/* The page title sits at the left edge there, so the article does too. */
.guides:not(.guides-public) .guide {
  margin-left: 0;
}
/* Guide titles are longer than any other sidebar entry: let them wrap, not clip. */
.guides-nav .nav-link {
  white-space: normal;
  line-height: 1.3;
}