// ─────────────────────────────────────────────────────────────────────────────
// Component: Blob viewer  (.blob2-* prefix)
// File:      src/scss/components/_blob.scss
//
// Visual rules only — colors, typography, backgrounds, borders, animations.
// Structural layout lives in pages/_blob.scss.
// Covers: blob.html, blame.html
// ─────────────────────────────────────────────────────────────────────────────

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

.blob2-header {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-bottom: none;
}

.blob2-filename {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.blob2-lang-badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  line-height: 18px;
}

.blob2-meta-pill {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
}

// ── Language colour dots ──────────────────────────────────────────────────────

.blob2-lang-dot {
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.blob2-ld-py   { background: #3572A5; }
.blob2-ld-ts   { background: #2b7489; }
.blob2-ld-js   { background: #f1e05a; }
.blob2-ld-rs   { background: #dea584; }
.blob2-ld-go   { background: #00ADD8; }
.blob2-ld-md   { background: #6f42c1; }
.blob2-ld-toml,
.blob2-ld-yaml,
.blob2-ld-yml  { background: #cb171e; }
.blob2-ld-json { background: #292929; border: 1px solid var(--border-subtle); }
.blob2-ld-css  { background: #563d7c; }
.blob2-ld-scss { background: #c6538c; }
.blob2-ld-html { background: #e34c26; }
.blob2-ld-sh,
.blob2-ld-bash { background: #89e051; }
.blob2-ld-mid,
.blob2-ld-midi { background: var(--color-accent); }

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

.blob2-lastmod {
  font-size: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
}

.blob2-lastmod-sha {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-link);
  text-decoration: none;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  &:hover { border-color: var(--color-accent); }
}

.blob2-lastmod-msg    { color: var(--text-secondary); }
.blob2-lastmod-author { color: var(--text-muted); font-size: 11px; }
.blob2-lastmod-time   { color: var(--text-muted); font-size: 11px; }

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

.blob2-content {
  border: 1px solid var(--border-default);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  background: var(--bg-surface);
}

// ── Code viewer ───────────────────────────────────────────────────────────────

.blob2-line-table {
  font-size: 13px;
  font-family: var(--font-mono);
  tab-size: 4;
}

.blob2-line {
  scroll-margin-top: calc(var(--sticky-offset, 80px) + 16px);
  &:target,
  &:hover { background: var(--bg-hover); }
}

.blob2-ln {
  color: var(--text-muted);
  font-size: 11px;
  user-select: none;
  border-right: 1px solid var(--border-subtle);
}

.blob2-ln-link {
  color: inherit;
  text-decoration: none;
  &:hover { color: var(--text-primary); }
}

.blob2-code {
  color: var(--text-primary);
  line-height: 1.6;
}

.blob2-empty {
  color: var(--text-muted);
  font-size: 13px;
}

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

.blob2-midi-banner {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-surface) 100%);
}

.blob2-midi-filename { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.blob2-midi-sub      { font-size: 12px; color: var(--text-muted); }

// ── Binary / 404 states ───────────────────────────────────────────────────────

.blob2-binary-notice {
  color: var(--text-muted);
  font-size: 13px;
}

.blob2-not-found {
  color: var(--text-muted);
  h2   { color: var(--text-secondary); font-size: 18px; }
  p    { font-size: 13px; }
  code {
    font-family: var(--font-mono);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
  }
}

// ── Provenance pill ───────────────────────────────────────────────────────────

.blob2-prov-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;

  &--human {
    color: var(--color-success);
    border-color: color-mix(in srgb, var(--color-success) 40%, transparent);
    background: color-mix(in srgb, var(--color-success) 8%, transparent);
  }
  &--agent {
    color: var(--color-accent);
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  }
}

// ── Sem-ver bump badge ────────────────────────────────────────────────────────

.blob2-bump-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;

  &--patch   { color: var(--text-muted);      border-color: var(--border-subtle);                                         background: var(--bg-overlay); }
  &--minor   { color: var(--color-warning);   border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);   background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
  &--major   { color: var(--color-danger);    border-color: color-mix(in srgb, var(--color-danger)  40%, transparent);   background: color-mix(in srgb, var(--color-danger)  8%,  transparent); }
  &--breaking{ color: var(--color-warning);   border-color: color-mix(in srgb, var(--color-warning) 35%, transparent);   background: color-mix(in srgb, var(--color-warning) 8%,  transparent); }
}

// ── Line selection ────────────────────────────────────────────────────────────

.blob2-line--selected {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent) !important;
  .blob2-ln { color: var(--color-accent); }
}

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

.blob2-permalink-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  border-radius: var(--radius-full);
  &:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
}

.blob2-outline-toggle { font-size: 11px; }

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

.blob2-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
}

.blob2-panel-tabs  { border-bottom: 1px solid var(--border-default); }

.blob2-panel-tab {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);

  &:hover     { color: var(--text-primary); }
  &--active   { color: var(--text-primary); border-bottom-color: var(--color-accent); }
}

.blob2-panel-empty {
  font-size: 12px;
  color: var(--text-muted);
}

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

.blob2-outline-row {
  font-size: 11px;
  &:hover { background: var(--bg-hover); }
}

.blob2-outline-op {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  border: 1px solid;

  &--add    { color: var(--color-success);     border-color: color-mix(in srgb, var(--color-success)     35%, transparent); background: color-mix(in srgb, var(--color-success)     8%, transparent); }
  &--modify { color: var(--color-accent-link); border-color: color-mix(in srgb, var(--color-accent-link) 35%, transparent); background: color-mix(in srgb, var(--color-accent-link) 8%, transparent); }
  &--delete { color: var(--color-danger);      border-color: color-mix(in srgb, var(--color-danger)      35%, transparent); background: color-mix(in srgb, var(--color-danger)      8%, transparent); }
  &--rename { color: var(--color-warning);     border-color: color-mix(in srgb, var(--color-warning)     35%, transparent); background: color-mix(in srgb, var(--color-warning)     10%, transparent); }
  &--patch  { color: var(--text-muted);        border-color: var(--border-subtle);                                          background: var(--bg-overlay); }
  &--fn     { color: var(--color-purple);      border-color: color-mix(in srgb, var(--color-purple)      30%, transparent); background: color-mix(in srgb, var(--color-purple)      8%, transparent); }
  &--class  { color: var(--color-orange);      border-color: color-mix(in srgb, var(--color-orange)      30%, transparent); background: color-mix(in srgb, var(--color-orange)      8%, transparent); }
  &--sym    { color: var(--text-muted);        border-color: var(--border-subtle);                                          background: var(--bg-overlay); }
}

.blob2-outline-addr  { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.blob2-outline-count { font-size: 9px; color: var(--text-muted); background: var(--bg-elevated); border-radius: var(--radius-full); }
.blob2-outline-time  { font-size: 10px; color: var(--text-muted); }

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

.blob2-info-section--sep { border-top: 1px solid var(--border-subtle); }
.blob2-info-row          { font-size: 11px; }
.blob2-info-label        { color: var(--text-muted); }
.blob2-info-value        { color: var(--text-secondary); }
.blob2-info-mono         { font-family: var(--font-mono); font-size: 10px; }

.blob2-info-label-block {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.blob2-info-addr code    { color: var(--text-secondary); }

.blob2-copy-addr {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  &:hover { color: var(--text-primary); }
}

.blob2-info-commit-link {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-link);
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

.blob2-info-commit-msg  { font-size: 11px; color: var(--text-secondary); }
.blob2-info-commit-time { font-size: 10px; color: var(--text-muted); }

.blob2-info-link {
  font-size: 11px;
  color: var(--color-accent-link);
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

// ── Intelligence signal pills ─────────────────────────────────────────────────

.blob2-signal-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: default;

  &--hotspot {
    color: var(--color-orange);
    border-color: color-mix(in srgb, var(--color-orange) 40%, transparent);
    background: color-mix(in srgb, var(--color-orange) 10%, transparent);
  }
  &--cold {
    color: var(--color-accent-link);
    border-color: color-mix(in srgb, var(--color-accent-link) 35%, transparent);
    background: color-mix(in srgb, var(--color-accent-link) 8%, transparent);
  }
  &--blast {
    color: var(--color-warning);
    border-color: color-mix(in srgb, var(--color-warning) 40%, transparent);
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
  }
}

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

.blob2-history {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-base);
  background: var(--bg-surface);
  overflow: hidden;
}

.blob2-history-header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-default);
}

.blob2-history-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border-radius: var(--radius-full);
}

.blob2-history-row {
  font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
  &:last-child { border-bottom: none; }
  &:hover      { background: var(--bg-hover); }
}

.blob2-history-sha {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-accent-link);
  text-decoration: none;
  background: var(--bg-overlay);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  &:hover { border-color: var(--color-accent); }
}

.blob2-history-msg  { color: var(--text-secondary); }
.blob2-history-time { font-size: 11px; color: var(--text-muted); }

// ── Rendered Markdown ─────────────────────────────────────────────────────────

.blob2-markdown {
  color: var(--text-primary);
  line-height: var(--line-height-normal);

  h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    &:first-child { margin-top: 0; }
    a { color: inherit; text-decoration: none; }

    .blob2-md-anchor {
      opacity: 0;
      color: var(--text-muted);
      text-decoration: none;
      margin-left: 0.4em;
      font-weight: 400;
      font-size: 0.85em;
      transition: opacity 0.15s;
    }
    &:hover .blob2-md-anchor { opacity: 1; }
  }
  h1 { font-size: var(--text-xl); border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.3em; }
  h2 { font-size: var(--text-lg); border-bottom: 1px solid var(--border-subtle); padding-bottom: 0.25em; }
  h3 { font-size: var(--text-md); }
  h4 { font-size: var(--text-base); }
  h5, h6 { font-size: var(--text-sm); color: var(--text-secondary); }

  p { margin: 0 0 1em; }

  a {
    color: var(--color-accent-link);
    text-decoration: none;
    &:hover { text-decoration: underline; }
  }

  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--color-accent-link);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.15em 0.4em;
  }

  pre {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 0 0 1em;

    code {
      background: none;
      border: none;
      padding: 0;
      color: var(--text-primary);
      font-size: var(--text-sm);
      line-height: 1.6;
    }
  }

  blockquote {
    border-left: 3px solid var(--border-strong);
    color: var(--text-secondary);
    margin: 0 0 1em;
    padding-left: 1em;
    font-style: italic;

    p { margin-bottom: 0; }
  }

  ul, ol {
    margin: 0 0 1em;
    padding-left: 1.75em;
    li { margin-bottom: 0.25em; }
    ul, ol { margin-bottom: 0; }
  }

  table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 1em;
    font-size: var(--text-sm);

    th {
      background: var(--bg-elevated);
      color: var(--text-secondary);
      font-weight: 600;
      border: 1px solid var(--border-default);
    }
    td { border: 1px solid var(--border-subtle); }
    tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-elevated) 40%, transparent); }
  }

  hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 1.5em 0;
  }

  img {
    max-width: 100%;
    border-radius: var(--radius-md);
  }
}