// ─────────────────────────────────────────────────────────────────────────────
// Page: Blob viewer  (.blob2-* layout)
// File:      src/scss/pages/_blob.scss
//
// STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
// Visual rules live in components/_blob.scss.
// Covers: blob.html, blame.html
// ─────────────────────────────────────────────────────────────────────────────

// ── Two-column layout ─────────────────────────────────────────────────────────

.blob2-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;

  &.blob2-panel-open {
    grid-template-columns: 1fr 280px;
  }

  @media (max-width: 960px) {
    &.blob2-panel-open { grid-template-columns: 1fr; }
  }
}

.blob2-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

// ── Header bar ────────────────────────────────────────────────────────────────

.blob2-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 14px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.blob2-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.blob2-lang-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.blob2-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.blob2-meta-pill { padding: 2px 8px; }

.blob2-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

// ── Last-modified bar ─────────────────────────────────────────────────────────

.blob2-lastmod {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  flex-wrap: wrap;
}

.blob2-lastmod-sha { padding: 1px 6px; }

// ── Content area ──────────────────────────────────────────────────────────────

.blob2-content {
  position: relative;
  overflow: hidden;
}

.blob2-viewer { overflow-x: auto; }

.blob2-markdown { padding: var(--space-6) var(--space-7); }

// ── Code line table ───────────────────────────────────────────────────────────

.blob2-line-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.blob2-ln {
  padding: 0 12px;
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
  user-select: none;
}

.blob2-code {
  padding: 0 16px 0 12px;
  white-space: pre;
  width: 100%;
}

.blob2-binary-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

.blob2-empty { padding: var(--space-4) var(--space-4); }

.blob2-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}

// ── MIDI banner ───────────────────────────────────────────────────────────────

.blob2-midi-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

// ── Permalink float ───────────────────────────────────────────────────────────

.blob2-permalink-btn {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  z-index: var(--z-raised);
}

// ── File history timeline ─────────────────────────────────────────────────────

.blob2-history { margin-top: var(--space-4); }

.blob2-history-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
}

.blob2-history-count { padding: 1px 7px; }

.blob2-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  flex-wrap: wrap;
}

.blob2-history-sha { padding: 1px 6px; }

.blob2-history-prov {
  display: flex;
  align-items: center;
  gap: 5px;
}

.blob2-history-time { margin-left: auto; }

// ── Outline panel ─────────────────────────────────────────────────────────────

.blob2-panel {
  position: sticky;
  top: calc(var(--sticky-offset, 80px) + var(--space-4));
  max-height: calc(100vh - var(--sticky-offset, 80px) - var(--space-8));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.blob2-panel-tabs {
  display: flex;
  align-items: center;
  padding: 0 4px;
  flex-shrink: 0;
}

.blob2-panel-tab {
  padding: 8px 12px;
  flex-shrink: 0;
}

.blob2-panel-pane {
  overflow-y: auto;
  flex: 1;
}

.blob2-panel-empty { padding: var(--space-4); }

// ── Outline rows ──────────────────────────────────────────────────────────────

.blob2-outline-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  cursor: pointer;
}

.blob2-outline-op   { padding: 1px 5px; }
.blob2-outline-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blob2-outline-count { padding: 1px 5px; flex-shrink: 0; }
.blob2-outline-time  { flex-shrink: 0; }

// ── Info tab rows ─────────────────────────────────────────────────────────────

.blob2-info-section--sep { padding-top: var(--space-3); margin-top: var(--space-3); }

.blob2-info-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 3px 12px;
}

.blob2-info-label { min-width: 64px; flex-shrink: 0; }

.blob2-info-value { flex: 1; min-width: 0; }

.blob2-info-label-block { padding: var(--space-2) 12px 2px; }

.blob2-info-addr {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
}

.blob2-copy-addr {
  display: flex;
  align-items: center;
  padding: 2px;
}