/* ===== Achievement badge rail (about page) =====
   Data: _data/achievements.yml · Markup: _includes/achievements.html
   Wide screens: fixed rail in the right margin, mirroring the TOC on the left.
   Narrow screens: inline bordered section. */

.ach-rail {
  font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
  margin: 2.5em 0;
  padding: 1em 1.2em;
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Same type grid as the main pane's .tp-cmd (0.875rem) — both halves of the
   split must share terminal metrics. */
.ach-cmd {
  font-size: 0.875rem;
  margin-bottom: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach-section {
  margin-bottom: 1.2em;
}

.ach-section-head {
  font-size: 0.875rem;
  color: var(--text);
  font-weight: bold;
  margin-bottom: 0.35em;
}

.ach-group {
  margin-bottom: 0.7em;
}

.ach-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 0.875rem;
  margin-bottom: 0.35em;
}

.ach-branch {
  color: var(--text-faint);
  flex-shrink: 0;
}

.ach-dir {
  color: var(--ach-color, var(--accent));
}

.ach-count {
  color: var(--text-dim);
  flex-shrink: 0;
  margin-left: auto;
}

/* grids sit under the tree rail: the │ continues past ├── entries */
.ach-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  margin-left: 0.55em;
  border-left: 1px solid var(--ach-color, var(--border));
  padding-left: 1em;
}

.ach-grid-last {
  border-left-color: transparent;
}

.ach-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Visually hidden, but present for text extraction (AI fetchers) and
   screen readers. Deliberately not display:none — extractors skip that. */
.ach-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* .ach-grid prefix outranks the page's generic `.tp-page-content img`
   margins regardless of stylesheet load order */
.ach-grid .ach-item img {
  width: 44px;
  height: 44px;
  margin: 0;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.ach-item:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.ach-item:hover img {
  box-shadow: 0 0 0 1px var(--ach-color, var(--accent));
}

.ach-chip {
  font-size: 0.6875rem;
  color: var(--ach-color, var(--accent));
  border: 1px solid color-mix(in srgb, var(--ach-color, #888) 45%, transparent);
  background: color-mix(in srgb, var(--ach-color, #888) 10%, transparent);
  border-radius: 3px;
  padding: 0.25em 0.55em;
  line-height: 1.4;
}

.ach-chip:hover,
.ach-chip:visited {
  color: var(--ach-color, var(--accent));
}

.ach-chip:hover {
  border-color: var(--ach-color, var(--accent));
}

.ach-foot {
  font-size: 0.875rem;
  margin-top: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ach-total {
  color: var(--text);
}

.ach-hint {
  font-size: 0.625rem;
  color: var(--text-faint);
  margin-top: 0.5em;
}

/* tmux-style status line */
.ach-status {
  display: flex;
  gap: 0.7em;
  margin-top: 1.1em;
  padding: 0.15em 0.5em;
  font-size: 0.6875rem;
  background: var(--accent);
  color: var(--bg);
  white-space: nowrap;
  overflow: hidden;
}

.ach-status-session {
  font-weight: bold;
}

.ach-status-win {
  opacity: 0.75;
}

.ach-status-active {
  opacity: 1;
  font-weight: bold;
}

/* The intern (Turbo Vision) theme rebuilds the page inside its own frame —
   the split-pane geometry (absolute rail, sticky pane, tmux status bar)
   must not leak into it. Render as a plain inline section instead.
   body.intern-mode outranks the wide-screen rules below at any width. */
body.intern-mode .ach-rail {
  position: static !important;
  height: auto !important;
  width: auto !important;
  margin: 2em 0;
  padding: 1em 1.2em;
  border: 1px dashed currentColor;
  border-radius: 0;
}

body.intern-mode .ach-pane {
  position: static;
  height: auto;
  display: block;
}

body.intern-mode .ach-scroll {
  overflow: visible;
}

body.intern-mode .ach-status {
  display: none;
}

/* the TV theme stamps ↗ after external links — noise on badge tiles */
body.intern-mode .ach-grid .ach-item::after {
  content: none;
}

/* Wide screens: render as the right pane of a vertical terminal split.
   The article (.terminal-post) is the positioning context; the dashed
   divider runs its full height, and the pane content sticks while the
   about "pane" scrolls. */
@media screen and (min-width: 1400px) {
  .ach-rail {
    position: absolute;
    left: calc(720px + 2.5em);
    top: 0;
    right: 0;              /* span the remaining wrapper width */
    height: 100%;
    margin: 0;
    padding: 0 0 0 1.5em;
    border: none;
    border-left: 1px dashed var(--border);
    border-radius: 0;
  }

  /* The pane fills the visible column height: content scrolls in the
     middle, tmux status line pinned to the pane's bottom edge. */
  .ach-pane {
    position: sticky;
    top: 4.5em;
    height: calc(100vh - 6em);
    display: flex;
    flex-direction: column;
  }

  .ach-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .ach-pane .ach-status {
    flex-shrink: 0;
    margin-top: 0.6em;
  }

  .ach-grid .ach-item img {
    width: 38px;
    height: 38px;
  }
}