/* Recent documents list. Neutral by design: it inherits --accent from
   whichever page it is on, so it reads as indigo on / and orange on /ai
   without a second stylesheet. */
.recents { max-width: var(--max-w, 760px); margin: 40px auto 0; padding: 0 20px; }
.recents[hidden] { display: none; }

.rc-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.rc-head h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text, #1f1d1a); letter-spacing: -.008em; }
.rc-more { margin-left: auto; font-size: 13px; color: var(--accent, #4f46e5); text-decoration: none; }
.rc-more:hover { text-decoration: underline; }

.rc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rc-item {
  display: flex; align-items: stretch; gap: 4px;
  background: var(--card, #fff);
  border: 1px solid var(--rule, #ebe7df);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: border-color .16s ease-out;
}
.rc-item:hover { border-color: var(--accent, #4f46e5); }

.rc-open {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  color: inherit;
}
.rc-thumb {
  flex: none; width: 44px; height: 58px; border-radius: 4px; overflow: hidden;
  background: var(--surface, #f7f6f3); border: 1px solid var(--rule, #ebe7df);
  display: grid; place-items: center;
}
.rc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.rc-thumb-blank { width: 60%; height: 70%; border-radius: 2px; background: var(--rule, #ebe7df); }

.rc-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-name {
  font-size: 14px; font-weight: 600; color: var(--text, #1f1d1a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-sub { font-size: 12.5px; color: var(--text-3, #78716c); }
.rc-dim { opacity: .8; }

.rc-del {
  flex: none; width: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-left: 1px solid transparent;
  color: var(--text-3, #78716c); cursor: pointer;
  transition: color .16s ease-out, background .16s ease-out;
}
.rc-del svg { width: 17px; height: 17px; }
.rc-del:hover { color: #b91c1c; background: #fef2f2; }
.rc-item:focus-within { border-color: var(--accent, #4f46e5); }
.rc-open:focus-visible, .rc-del:focus-visible { outline: 2px solid var(--accent, #4f46e5); outline-offset: -2px; }

/* The full page shows the same card with room for a third line. */
.rc-detail .rc-thumb { width: 58px; height: 76px; }
.rc-detail .rc-open { padding: 14px; }

@media (prefers-reduced-motion: reduce) {
  .rc-item, .rc-del { transition: none; }
}
@media (max-width: 520px) {
  .recents { padding: 0 16px; }
  .rc-thumb { width: 38px; height: 50px; }
}

/* Landing-only: the working state (editor or /ai) hides it, same hook
   landing.css uses for the marketing sections. */
body.is-working .recents { display: none; }