/**
 * Don't Flock — Live Ledger
 *
 * Inherits the theme's custom properties where present, and falls back to the
 * Don't Flock palette so the widget looks right on any theme or inside an
 * iframe on someone else's site.
 */

.dfl{
  --_paper:var(--df-paper,#F4EDDF);
  --_card:#FFFCF5;
  --_ink:var(--df-ink,#16293C);
  --_ink2:var(--df-ink-2,#2C4A69);
  --_slate:var(--df-slate,#67788A);
  --_orange:var(--df-orange,#CF5B18);
  --_op:var(--df-opposes,#2E6B4E);
  --_su:var(--df-supports,#B23A2A);
  --_warn:#B07A18;
  --_line:var(--df-line,rgba(22,41,60,.16));
  --_soft:var(--df-line-soft,rgba(22,41,60,.08));
  --_display:var(--df-display,"Archivo",system-ui,sans-serif);
  --_body:var(--df-body,"Public Sans",system-ui,sans-serif);
  --_mono:var(--df-mono,"IBM Plex Mono",ui-monospace,monospace);

  background:var(--_card);
  border:1px solid var(--_line);
  border-radius:3px;
  overflow:hidden;
  font-family:var(--_body);
  color:var(--_ink);
}

.dfl-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 15px;background:var(--_paper);
  border-bottom:1px solid var(--_line);
  font-family:var(--_mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--_ink2);
}
.dfl-head-meta{color:var(--_slate)}
.dfl-dot{
  width:6px;height:6px;border-radius:50%;background:var(--_orange);
  display:inline-block;margin-right:8px;vertical-align:1px;
}

.dfl-body{display:flex;flex-direction:column}

.dfl-row{
  display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;
  padding:11px 15px;border-bottom:1px solid var(--_soft);
  text-decoration:none;color:inherit;
}
.dfl-row:last-child{border-bottom:0}
.dfl-row:hover{background:var(--_paper)}
.dfl-row.is-new{animation:dfl-in .45s ease-out}
@keyframes dfl-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.dfl-stamp{
  font-family:var(--_display);font-weight:800;font-size:16px;
  letter-spacing:-.01em;color:var(--_slate);
  font-variant-numeric:tabular-nums;
}
.dfl-row--op .dfl-stamp{color:var(--_op)}
.dfl-row--su .dfl-stamp{color:var(--_su)}
.dfl-row--warn .dfl-stamp{color:var(--_warn)}

.dfl-text{min-width:0;display:block}
.dfl-title{
  display:block;font-weight:600;font-size:14.5px;line-height:1.3;
  color:var(--_ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dfl-row:hover .dfl-title{color:var(--_orange)}
.dfl-detail{
  display:block;font-family:var(--_mono);font-size:11px;
  color:var(--_slate);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dfl-date{
  font-family:var(--_mono);font-size:10.5px;color:var(--_slate);
  white-space:nowrap;
}

.dfl-foot{
  display:flex;gap:20px;flex-wrap:wrap;
  padding:11px 15px;background:var(--_paper);
  border-top:1px solid var(--_line);
  font-family:var(--_mono);font-size:11px;color:var(--_slate);
}
.dfl-foot strong{color:var(--_ink);font-weight:600}
.dfl-foot-win strong{color:var(--_op)}

.dfl-empty{
  padding:22px 15px;margin:0;font-size:14px;color:var(--_slate);line-height:1.55;
}

.dfl--embed{border-radius:4px}

@media(max-width:520px){
  .dfl-row{grid-template-columns:46px 1fr;gap:11px}
  .dfl-date{display:none}
  .dfl-stamp{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  .dfl-row.is-new{animation:none}
}
