/*
---------------------------------------------------------------------------
KIRZEN
---------------------------------------------------------------------------
Project      : Kirzen 4.2
Organization : Kirzen
License      : Proprietary
Copyright    : © 2026 Kirzen. All rights reserved.

This source file is proprietary software developed and maintained by
Kirzen as part of the Kirzen 4.2 project.

Unauthorized copying, redistribution, modification, publication,
or reproduction of this file or any portion of its contents is strictly
prohibited without prior written authorization from Kirzen.
---------------------------------------------------------------------------
*/

/* ============================================================================
   ABOUT HUB
   Five chapters (About, Terms, Privacy, Guidelines, Documentation) that read
   as one book. There is a single navigation element, the chapter strip below,
   and the thread under it doubles as the reading progress. The legal pages
   keep their text and their URLs: only the reading layout is shared here.
   hub.js moves the thread.
   ============================================================================ */

.hub-page {
  max-width: 880px;
}

/* ----------------------------------------------------------------------------
   Chapter strip
   ---------------------------------------------------------------------------- */

.hub {
  position: sticky;
  z-index: 20;

  top: calc(var(--navbar-height) + var(--hub-offset, 0px));

  margin: 0 -32px 36px;
  padding: 14px 32px 0;

  background: rgba(9, 9, 11, 0.82);
  backdrop-filter: blur(10px);
}

.hub-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;

  margin: 0;
  padding: 0 0 14px;

  list-style: none;
}

.hub-link {
  display: block;

  padding: 2px 2px 0;

  border-radius: var(--radius-sm);

  color: var(--text-muted);
  text-decoration: none;

  transition: color var(--transition-fast);
}

.hub-n {
  display: block;

  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.hub-t {
  display: block;

  overflow: hidden;

  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-link:hover {
  color: var(--text-primary);
}

.hub-link[aria-current="page"] {
  color: var(--text-primary);
}

.hub-link[aria-current="page"] .hub-n {
  color: #818cf8;
}

.hub-link[aria-current="page"] .hub-t {
  font-weight: 600;
}

.hub-link:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
}

/* The thread: grey rail, light fill, a head that leads. */
.hub-thread {
  position: relative;

  display: block;

  height: 1px;

  background: var(--border-color);
}

.hub-thread-fill {
  position: absolute;
  inset: 0 auto 0 0;

  width: 100%;

  background: linear-gradient(90deg, #5865f2, #cfd4ff);

  transform: scaleX(var(--hub-fill, 0.2));
  transform-origin: left;
}

.hub-thread-head {
  position: absolute;

  top: -2px;
  left: 0;

  width: 5px;
  height: 5px;

  margin-left: -2.5px;

  border-radius: 50%;

  background: #cfd4ff;
  box-shadow: 0 0 8px 1px rgba(129, 140, 248, 0.8);

  transform: translateX(var(--hub-head, 0px));
}

/* ----------------------------------------------------------------------------
   Reading layout shared by Terms, Privacy and Guidelines
   One column, numbered sections, hairlines instead of a boxed card.
   ---------------------------------------------------------------------------- */

.hub-page .page-header {
  margin-bottom: 8px;
}

.hub-page .legal-meta {
  margin-top: 16px;
}

.hub-page .legal-card {
  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  overflow: visible;
}

.hub-page .legal-section {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);

  padding: 26px 0;

  border-top: 1px solid var(--border-subtle);
}

.hub-page .legal-section + .legal-section {
  border-top: 1px solid var(--border-subtle);
}

.hub-page .legal-section > * {
  grid-column: 2;
}

.hub-page .legal-section > .panel-eyebrow {
  display: block;

  margin: 0 0 6px;

  color: var(--text-muted);

  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* A number sits in the left column, beside the title. A word sits above it.
   hub.js tells them apart. */
.hub-page .legal-section > .panel-eyebrow.is-num {
  grid-column: 1;

  margin: 3px 0 0;

  font-size: 12px;
}

.hub-page .legal-section h2 {
  margin: 0 0 12px;

  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

/* The opening note has no number: it gets a rule instead. */
.hub-page .legal-note {
  display: block;

  padding: 22px 0 22px 20px;

  border-top: 0;
  border-left: 2px solid rgba(88, 101, 242, 0.6);
  border-radius: 0;

  background: transparent;
}

.hub-page .legal-note > .panel-eyebrow {
  display: block;

  margin: 0 0 6px;

  color: #818cf8;
}

.hub-page .legal-section p,
.hub-page .legal-section li {
  color: var(--text-secondary);

  font-size: 14px;
  line-height: 1.8;
}

/* ----------------------------------------------------------------------------
   Next chapter
   ---------------------------------------------------------------------------- */

.hub-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-top: 40px;
  padding: 16px 20px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);

  background: var(--bg-surface);

  color: var(--text-primary);
  text-decoration: none;

  transition:
    border-color var(--transition-normal),
    background-color var(--transition-normal);
}

.hub-next:hover,
.hub-next:focus-visible {
  border-color: rgba(88, 101, 242, 0.5);
  background: var(--bg-surface-hover);

  outline: none;
}

.hub-next-k {
  display: block;

  color: var(--text-muted);

  font-size: 11px;
}

.hub-next-t {
  display: block;

  margin-top: 2px;

  font-size: 15px;
  font-weight: 600;
}

.hub-next svg {
  flex-shrink: 0;

  color: #818cf8;

  transition: transform var(--transition-normal);
}

.hub-next:hover svg,
.hub-next:focus-visible svg {
  transform: translateX(3px);
}

/* ----------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .hub {
    margin: 0 -18px 28px;
    padding: 12px 18px 0;
  }

  .hub-list {
    gap: 4px;
  }

  .hub-t {
    font-size: 11.5px;
  }

  .hub-page .legal-section {
    grid-template-columns: 34px minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .hub-t {
    font-size: 10.5px;
  }
}

/* ----------------------------------------------------------------------------
   Documentation
   A name on the left, what it does on the right. No cards, no pills.
   ---------------------------------------------------------------------------- */

.hub-page .legal-section h3 {
  margin: 22px 0 8px;

  color: var(--text-primary);

  font-size: 14px;
  font-weight: 600;
}

.hub-page .legal-section p + .doc-list,
.hub-page .legal-section .doc-list + p {
  margin-top: 14px;
}

.doc-list {
  display: grid;

  margin: 0;
}

.doc-list > div {
  display: grid;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  gap: 4px 18px;

  padding: 9px 0;

  border-top: 1px solid var(--border-subtle);
}

.doc-list > div:first-child {
  border-top: 0;
}

.doc-list dt {
  margin: 0;

  color: var(--text-primary);

  font-size: 13px;
  font-weight: 500;
}

.doc-list dt code {
  padding: 0;

  background: transparent;
  color: #a5b4fc;

  font-size: 12.5px;
}

.doc-list dd {
  margin: 0;

  color: var(--text-secondary);

  font-size: 13.5px;
  line-height: 1.6;
}

.doc-list-num dd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
}

@media (max-width: 560px) {
  .doc-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.hub-page .legal-section ul + p,
.hub-page .legal-section p + ul {
  margin-top: 12px;
}

/* ----------------------------------------------------------------------------
   Keep scrolling: past the end of a chapter the next card fills up, past the
   start a pill with the previous chapter does. hub.js sets --pull from 0 to 1.
   ---------------------------------------------------------------------------- */

.hub-next {
  position: relative;

  overflow: hidden;
}

.hub-next::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(90deg, rgba(88, 101, 242, 0.26), rgba(129, 140, 248, 0.1));

  transform: scaleX(var(--pull, 0));
  transform-origin: left;

  pointer-events: none;
}

.hub-next > * {
  position: relative;
}

.hub-prev {
  position: fixed;
  z-index: 30;

  top: calc(var(--navbar-height) + var(--hub-offset, 0px) + 122px);
  left: 50%;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 18px;

  overflow: hidden;

  border: 1px solid rgba(88, 101, 242, 0.5);
  border-radius: var(--radius-full);

  background: rgba(17, 17, 19, 0.92);
  backdrop-filter: blur(10px);

  color: var(--text-primary);
  text-decoration: none;

  opacity: 0;
  transform: translate(-50%, -8px);

  pointer-events: none;
}

.hub-prev.is-pulling {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hub-prev::before {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(90deg, rgba(88, 101, 242, 0.34), rgba(129, 140, 248, 0.12));

  transform: scaleX(var(--pull, 0));
  transform-origin: left;
}

.hub-prev > * {
  position: relative;
}

.hub-prev .hub-next-t {
  margin: 0;

  font-size: 13px;
}

.hub-page .legal-section > .panel-eyebrow:not(.is-num)::first-letter {
  text-transform: uppercase;
}