/* /sermon/archive.css — Sermon Archive (Phase 7).
   Styles for the functional archive served at /sermon/.
   Uses the shared design tokens with sensible fallbacks so the page also
   renders correctly if tokens.css fails to load. */

.sa-wrap{
  max-width:1040px;
  margin:0 auto;
  padding:var(--s-5,20px) var(--s-4,16px) 96px;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.sa-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--s-4,16px);
  flex-wrap:wrap;
  margin:8px 0 var(--s-5,20px);
}
.sa-hero h1{
  font-family:var(--font-serif,'Iowan Old Style',Georgia,serif);
  font-size:clamp(1.6rem,3vw,2.1rem);
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0 0 6px;
  color:var(--ink,#27272a);
}
.sa-hero p{
  margin:0;
  max-width:620px;
  color:var(--ink-2,#52525b);
  font-size:var(--t-md,.9375rem);
  line-height:1.55;
}
.sa-hero-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}

/* ── Buttons ────────────────────────────────────────────────────── */
.sa-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:var(--r-md,10px);
  border:1px solid transparent;
  font-size:var(--t-sm,.8125rem);
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:background var(--dur-1,100ms) var(--ease,ease),
             border-color var(--dur-1,100ms) var(--ease,ease),
             color var(--dur-1,100ms) var(--ease,ease),
             transform var(--dur-1,100ms) var(--ease,ease);
}
.sa-btn-primary{background:var(--accent,#7a1f2b);color:#fff}
.sa-btn-primary:hover{background:var(--accent-hover,#661820);transform:translateY(-1px)}
.sa-btn-ghost{background:transparent;border-color:var(--border,#e4e4e7);color:var(--ink-2,#52525b)}
.sa-btn-ghost:hover{border-color:var(--accent,#7a1f2b);color:var(--accent,#7a1f2b)}

/* ── Controls ───────────────────────────────────────────────────── */
.sa-controls{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 var(--s-3,12px)}
.sa-controls input,
.sa-controls select{
  padding:10px 12px;
  border:1px solid var(--border,#e4e4e7);
  border-radius:var(--r-md,10px);
  background:var(--surface,#fff);
  color:var(--ink,#27272a);
  font-size:var(--t-md,.9375rem);
  min-width:0;
}
.sa-controls input:focus,
.sa-controls select:focus{outline:none;border-color:var(--accent,#7a1f2b);box-shadow:var(--focus)}
#sa-q{flex:1 1 260px}
#sa-topic{flex:1 1 170px}
.sa-controls select{flex:0 1 165px}

/* ── Topic chips ────────────────────────────────────────────────── */
.sa-topics{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-4,16px)}
.sa-chip{
  padding:5px 11px;
  border-radius:var(--r-pill,999px);
  border:1px solid var(--border,#e4e4e7);
  background:var(--surface,#fff);
  color:var(--ink-2,#52525b);
  cursor:pointer;
  font:500 var(--t-xs,.72rem) var(--font-sans,'Inter',sans-serif);
}
.sa-chip:hover{border-color:var(--accent,#7a1f2b);color:var(--accent,#7a1f2b)}
.sa-chip.is-active{background:var(--accent,#7a1f2b);color:#fff;border-color:var(--accent,#7a1f2b)}
.sa-chip .n{opacity:.65;margin-left:5px}

.sa-count{color:var(--ink-3,#71717a);font-size:var(--t-sm,.8125rem);margin:0 0 var(--s-3,12px)}

/* ── Deep-link / notice banners ─────────────────────────────────── */
.sa-deeplink{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  background:var(--accent-tint,rgba(122,31,43,.08));
  border:1px solid var(--accent-soft,rgba(122,31,43,.2));
  color:var(--ink,#27272a);
  border-radius:var(--r-md,10px);
  padding:10px 14px;
  margin:0 0 var(--s-4,16px);
  font-size:var(--t-sm,.8125rem);
}
.sa-deeplink a{color:var(--accent,#7a1f2b);font-weight:600}

/* ── List ───────────────────────────────────────────────────────── */
.sa-list{display:flex;flex-direction:column;gap:10px}
.sa-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--s-4,16px);
  background:var(--surface,#fff);
  border:1px solid var(--border,#e4e4e7);
  border-radius:var(--r-lg,14px);
  padding:14px 16px;
  transition:border-color var(--dur-1,100ms),box-shadow var(--dur-1,100ms);
}
.sa-row:hover{border-color:var(--border-strong,#d4d4d8)}
.sa-row.is-highlight{
  border-color:var(--accent,#7a1f2b);
  box-shadow:0 0 0 3px var(--accent-tint,rgba(122,31,43,.12));
}
.sa-row-main{min-width:0;flex:1}
.sa-title{
  margin:0 0 5px;
  font-family:var(--font-serif,'Iowan Old Style',Georgia,serif);
  font-size:1.15rem;
  line-height:1.3;
  color:var(--ink,#27272a);
}
.sa-title a{color:inherit}
.sa-title a:hover{color:var(--accent,#7a1f2b)}

.sa-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
  color:var(--ink-3,#71717a);
  font-size:var(--t-sm,.8125rem);
  margin-bottom:8px;
}
.sa-badge{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  padding:2px 8px;
  border-radius:var(--r-pill,999px);
  background:var(--accent-tint,rgba(122,31,43,.1));
  color:var(--accent,#7a1f2b);
}
.sa-badge.is-study{background:var(--surface-2,#f4f4f5);color:var(--ink-2,#52525b)}

.sa-refs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.sa-ref{
  font-size:var(--t-xs,.72rem);
  padding:2px 8px;
  border-radius:var(--r-sm,6px);
  background:var(--surface-2,#f4f4f5);
  color:var(--ink-2,#52525b);
  border:1px solid transparent;
}
a.sa-ref:hover{border-color:var(--accent,#7a1f2b);color:var(--accent,#7a1f2b)}

.sa-tags{display:flex;flex-wrap:wrap;gap:6px}
.sa-tag{
  font-size:11px;
  color:var(--ink-3,#71717a);
  background:transparent;
  border:1px dashed var(--border,#e4e4e7);
  border-radius:var(--r-pill,999px);
  padding:1px 8px;
  cursor:pointer;
}
.sa-tag:hover{border-color:var(--accent,#7a1f2b);color:var(--accent,#7a1f2b)}

.sa-row-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}
.sa-more{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:var(--r-md,10px);
  border:1px solid var(--border,#e4e4e7);
  background:transparent;
  color:var(--ink-3,#71717a);
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}
.sa-more:hover,.sa-more:focus-visible{border-color:var(--accent,#7a1f2b);color:var(--accent,#7a1f2b)}

/* ── Empty / no-match ───────────────────────────────────────────── */
.sa-empty{
  text-align:center;
  padding:44px 20px;
  color:var(--ink-3,#71717a);
  background:var(--surface,#fff);
  border:1px dashed var(--border,#e4e4e7);
  border-radius:var(--r-lg,14px);
}
.sa-empty h2{
  font-family:var(--font-serif,'Iowan Old Style',Georgia,serif);
  color:var(--ink,#27272a);
  font-size:1.3rem;
  margin:0 0 8px;
}
.sa-empty p{margin:0 auto 16px;max-width:470px;line-height:1.6}
.sa-empty .sa-btn{margin:0 auto}

@media (max-width:560px){
  .sa-row{flex-direction:column}
  .sa-row-actions{width:100%}
  .sa-row-actions .sa-btn-primary{flex:1;justify-content:center}
  .sa-controls select{flex:1 1 140px}
}