/* Ravenism reader — shell chrome.
   The chrome recedes; the report dominates. All chrome colours come from a
   small palette that adapts to light/dark via light-dark(). Report bodies
   carry their own bespoke styling (scoped to .report-body), so the centre
   reads as a dark editorial "card" regardless of the shell theme. */

:root {
  color-scheme: light dark;

  --color-text-primary:   light-dark(#1c1c1f, #e7e6e3);
  --color-text-secondary: light-dark(#6b6b72, #9a9aa2);

  --color-background:        light-dark(#fbfbfa, #131318);
  --color-background-panel:  light-dark(#f4f4f2, #17171d);
  --color-background-hover:  light-dark(#ececea, #20202a);
  --color-border:            light-dark(#e0e0dd, #2a2a33);

  /* active = info-blue */
  --color-background-info: light-dark(#e6efff, #1c2740);
  --color-border-info:     light-dark(#3b76e0, #4f82e6);
  --color-text-info:       light-dark(#1f4fa8, #9cc0ff);

  /* connected = warning-amber */
  --color-background-warning: light-dark(#fdf2dc, #3a2f17);
  --color-border-warning:     light-dark(#c98a16, #d9a13a);
  --color-text-warning:       light-dark(#8a5d05, #e6c074);

  --font-chrome: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font-chrome);
  background: var(--color-background);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

.explorer {
  display: grid;
  grid-template-columns: minmax(180px, 20%) 1fr minmax(180px, 20%);
  height: 100vh;
  overflow: hidden;
}

/* ---- panels ---- */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-left  { border-right: 1px solid var(--color-border); background: var(--color-background-panel); }
.panel-right { border-left:  1px solid var(--color-border); background: var(--color-background-panel); }
.panel-centre { background: var(--color-background); }

.panel-head {
  flex: 0 0 auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.panel-head h2 {
  margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--color-text-secondary);
}
.sort-toggle {
  font-family: var(--font-chrome); font-size: .68rem;
  background: none; border: none; cursor: pointer; padding: .15rem .25rem;
  color: var(--color-text-secondary); white-space: nowrap;
}
.sort-toggle:hover { color: var(--color-text-primary); }

.panel-list { flex: 1 1 auto; overflow-y: auto; padding: .4rem; }

/* ---- list entries ---- */
.entry {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: 6px;
  background: none; color: inherit; font-family: var(--font-chrome);
  padding: .5rem .6rem; margin-bottom: .25rem;
}
.entry:hover { background: var(--color-background-hover); }
.entry .e-date {
  font-size: .68rem; color: var(--color-text-secondary);
  display: flex; align-items: center; gap: .4rem;
}
.entry .e-title { font-size: .86rem; line-height: 1.3; margin-top: .15rem; }
.entry .e-meta { font-size: .66rem; color: var(--color-text-secondary); margin-top: .2rem; }
.entry.truncate .e-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.approx { opacity: .6; }

/* referenced-by-a-digest marker on left entries */
.ref-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-border-warning); flex: 0 0 auto;
}

/* active (blue) */
.entry.active {
  background: var(--color-background-info);
  border-color: var(--color-border-info);
}
.entry.active .e-title { color: var(--color-text-info); font-weight: 600; }

/* connected (amber) */
.entry.connected {
  background: var(--color-background-warning);
  border-color: var(--color-border-warning);
}
.entry.connected.active { /* active wins the border, amber tints bg */
  border-color: var(--color-border-info);
}

/* ---- centre viewer ---- */
.viewer-scroll { flex: 1 1 auto; overflow-y: auto; }

.report-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  padding: .7rem 1.2rem; max-width: 900px; margin: 0 auto;
  font-size: .74rem; color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.badge {
  font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: 99px; border: 1px solid currentColor;
}
.badge.deep   { color: var(--color-text-info); }
.badge.digest { color: var(--color-text-warning); }
.report-header .post-link { color: var(--color-text-primary); text-decoration: none; border-bottom: 1px solid var(--color-border); }
.report-header .post-link:hover { border-bottom-color: currentColor; }
.report-header .spacer { flex: 1 1 auto; }

/* report body container: the scoped report CSS paints inside this. */
.report-body { display: block; }
.report-body:empty { display: none; }

.viewer-placeholder {
  max-width: 520px; margin: 14vh auto 0; padding: 0 2rem; text-align: center;
  color: var(--color-text-primary);
}
.viewer-placeholder .muted { color: var(--color-text-secondary); font-size: .9rem; }

/* a cross-reference chip injected into report bodies for in-explorer links */
.xref-chip {
  display: inline; border-bottom: 1px dotted var(--color-border-info);
  cursor: pointer;
}

/* ---- narrow viewports: collapse side panels (stretch-goal minimal) ---- */
@media (max-width: 768px) {
  .explorer { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .panel-left, .panel-right { max-height: 22vh; }
  .panel-left  { border-right: none; border-bottom: 1px solid var(--color-border); }
  .panel-right { border-left:  none; border-top:    1px solid var(--color-border); }
}