/* ================= FLAT ACTIONS =================
   Vote and repost controls. Kept in a separate file from buttons.css on
   purpose: buttons.css is the 3D system (the Post button, the gate, the
   comment count), this is the flat one. Nothing here has a shadow,
   a lift, or a press animation — hover and active states are just
   color changes. */

.flat-btn{
  border:none;background:none;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;font-family:var(--font-display);
}
.flat-btn .face{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 13px;border-radius:999px;font-weight:600;font-size:.8rem;
  color:var(--ink-200);background:var(--glass-fill);border:1px solid var(--glass-border);
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.flat-btn:hover .face{background:var(--glass-fill-strong);color:var(--ink-0);}
.flat-btn:disabled{cursor:not-allowed;}
.flat-btn:disabled .face{opacity:.42;}

/* the up/down arrows sit inside .vote-group, which already draws the
   pill shell (see feed.css) — so these two are borderless inside it */
.vote-group .flat-btn .face{
  background:none;border:none;padding:6px 10px;font-size:.85rem;
}
.vote-group .flat-btn:hover .face{background:var(--glass-fill-strong);}
.vote-group .flat-btn.up.is-active .face{color:var(--blue-400);}
.vote-group .flat-btn.down.is-active .face{color:var(--amber-400);}

/* retweet gets its own pill, colored the way most feeds color a
   repost — green, and distinct from both the blue upvote and the
   amber downvote so the three never get mistaken for each other */
.retweet-btn.is-active .face{
  color:var(--success);
  background:color-mix(in srgb, var(--success) 15%, transparent);
  border-color:color-mix(in srgb, var(--success) 45%, transparent);
}

/* ---------- new variants: post ownership (edit/delete/save) ---------- */

/* icon-only pills for the edit/delete buttons on your own posts —
   same face as any other flat-btn, just tighter padding and no label */
.flat-btn.icon-only .face{padding:7px 9px;gap:0;}

/* the delete button's "are you sure?" state — one click arms it, a
   second click within a few seconds confirms; see feed.js armDeleteConfirm */
.flat-btn.icon-only.danger .face{
  color:var(--danger);font-family:var(--font-mono);font-size:.68rem;padding:7px 10px;
  background:color-mix(in srgb, var(--danger) 15%, transparent);
  border-color:color-mix(in srgb, var(--danger) 45%, transparent);
}
.flat-btn.icon-only.danger:hover .face{
  background:color-mix(in srgb, var(--danger) 25%, transparent);color:var(--ink-0);
}

/* the Save button when editing a post — filled, like a small btn3d
   without the lift, so it reads as the primary action next to Cancel */
.flat-btn.primary .face{
  color:#0c1226;font-weight:700;border-color:transparent;
  background:var(--blue-400);
}
.flat-btn.primary:hover .face{background:var(--blue-300);color:#0c1226;}