/* =============================================================
   Reading Orders — browse / index. Token-driven (theme.css), light
   + dark aware. Coheres with the "THE RUN" view page. Scoped to .rob.
   ============================================================= */

.rob {
  --rob-accent: var(--action);
  --rob-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --rob-grain: .5;
  --rob-spot: color-mix(in srgb, var(--page-accent) 9%, transparent);
  --rob-dot:  color-mix(in srgb, var(--text) 4%, transparent);
  --rob-hover: color-mix(in srgb, var(--text) 5%, transparent);

  position: relative; min-height: 100vh;
  color: var(--text); background-color: var(--bg);
  background-image:
    radial-gradient(110% 70% at 90% -10%, var(--rob-spot), transparent 60%),
    radial-gradient(var(--rob-dot) 1px, transparent 1.4px);
  background-size: auto, 18px 18px;
  padding: 0 0 120px;
}
[data-theme="light"] .rob { --rob-grain: .2; }
.rob::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--rob-grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rob > * { position: relative; z-index: 1; }

.rob-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Masthead and primary action compose shared pm-* / cc-btn primitives. */

/* ---- section bands -------------------------------------------------- */
.rob-band { padding-top: 38px; }
.rob-band-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.rob-band-title { font-family: var(--rob-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; }
.rob-band-rule { height: 1px; background: var(--border); flex: 1; }
.rob-count { font-family: var(--rob-mono); font-size: .72rem; color: var(--text-dim); }
.rob-count-explainer { max-width: 70ch; font-size: .82rem; color: var(--text-muted); }
.rob-count-explainer summary { cursor: pointer; }
.rob-count-explainer p { margin: 8px 0 0; line-height: 1.5; }
.rob-count-scope { margin: 0; font-size: .75rem; color: var(--text-muted); }

.rob-filter {
  width: 100%; max-width: 360px; margin-bottom: 22px;
  font-family: var(--font-body); font-size: .9rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; transition: border-color .2s;
}
.rob-filter::placeholder { color: var(--text-dim); }
.rob-filter:focus { outline: none; border-color: var(--rob-accent); }

/* ---- grid + cards -------------------------------------------------- */
.rob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.rob-card {
  --cc-fan-card-accent: var(--rob-accent);
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}

/* fanned cover stack */
.rob-fan {
  position: relative; height: 150px; display: flex; align-items: center; justify-content: center;
  padding: 18px 0 14px; background:
    radial-gradient(80% 120% at 50% 0%, var(--surface-2), var(--surface));
  border-bottom: 1px solid var(--border); overflow: hidden;
}
.rob-fan img {
  width: 76px; height: 114px; object-fit: cover; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); outline: 1px solid var(--glass-border); outline-offset: -1px;
  margin: 0 -16px; background: var(--surface-2);
  transform: rotate(var(--r,0deg)) translateY(var(--y,0));
}
.rob-fan--empty { color: var(--text-dim); font-family: var(--rob-mono); font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; }

.rob-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rob-title { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; line-height: 1.22;
  color: var(--text); margin: 0; }
.rob-byline { margin-top: -4px; font-size: .82rem; color: var(--text-muted); }
.rob-byline-name { color: var(--text); font-weight: 600; }
.rob-byline-handle { margin-left: .35em; font-family: var(--rob-mono); font-size: .72rem; }
.rob-meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rob-stat { font-family: var(--rob-mono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); }
.rob-stat b { color: var(--text); font-weight: 700; }
.rob-stat .sep { color: var(--border); margin: 0 6px; }
.rob-vis { margin-left: auto; font-family: var(--rob-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border);
  padding: 3px 7px; border-radius: var(--radius-sm); }
.rob-vis.is-public { color: var(--rob-accent); border-color: color-mix(in srgb, var(--rob-accent) 45%, transparent); }

/* ---- skeleton loading --------------------------------------------- */
.rob-skeleton-card { pointer-events: none; }
.rob-skeleton-card .rob-fan { min-height: 150px; }
.rob-skel-line {
  display: block; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--surface-2) 86%, var(--text) 14%),
    color-mix(in srgb, var(--surface-2) 70%, var(--text) 30%),
    color-mix(in srgb, var(--surface-2) 86%, var(--text) 14%));
  background-size: 220% 100%;
  animation: rob-skeleton-shimmer 1.25s ease-in-out infinite;
}
.rob-skel-title { width: 72%; height: 16px; }
.rob-skel-meta { width: 48%; }
@keyframes rob-skeleton-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* ---- empty --------------------------------------------------------- */
.rob-empty { color: var(--text-muted); padding: 48px 0; text-align: center; font-family: var(--rob-mono);
  font-size: .8rem; letter-spacing: .08em; }

/* ---- reveal -------------------------------------------------------- */
@keyframes rob-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rob-band { opacity: 0; animation: rob-rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
.rob-band { animation-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  .rob-band { animation: none; opacity: 1; }
  .rob-skel-line { animation: none; }
}

@media (max-width: 640px) {
  .rob-wrap { padding: 0 18px; }
  .rob-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
  .rob-fan { height: 124px; } .rob-fan img { width: 60px; height: 90px; }
}