/* public/micro.css -- 2026-11-01 (microinteractions pass): feedback states for the details in
   micro.js and site.js. Loaded after light.css so state colours win in both themes. Every motion
   here is a short transform/colour change and is switched off under prefers-reduced-motion. */

/* press feedback: every button visibly reacts to the press itself, not only to hover */
.btn, .copy, .copy-button, .filter-pill, .demo-tab, .demo-controls button {
  transition: transform .08s ease-out, background-color .15s, border-color .15s, color .15s; }
.btn:active:not([disabled]), .copy:active, .copy-button:active, .filter-pill:active,
.demo-tab:active, .demo-controls button:active { transform: scale(.97); }

/* copy success: the button itself confirms (green, check). Opaque, because .copy sits over code;
   !important because a state must beat the per-context .copy colours in light.css. */
.copy.is-copied, .copy-button.is-copied { border-color: var(--ok) !important; color: #80edb1 !important; background: #0f2a22 !important;
  white-space: nowrap; }
.copy.is-copied::before, .copy-button.is-copied::before { content: "✓ "; }
.copy.is-failed, .copy-button.is-failed { border-color: #f5d981 !important; color: #f5d981 !important; background: #2a2412 !important; white-space: nowrap; }
@media (prefers-color-scheme: light) {
  .copy.is-copied, .copy-button.is-copied { color: #136c43 !important; background: #e6f6ee !important; border-color: #2e9e6a !important; }
  .copy.is-failed, .copy-button.is-failed { color: #7a5a00 !important; background: #fff6dc !important; border-color: #c99a1a !important; }
}

/* two-step confirm: armed destructive button turns solid red until it reverts */
button[data-confirm].is-armed { background: #c9363c !important; border-color: #c9363c !important;
  color: #fff !important; animation: micro-nudge .25s ease-out; }
@keyframes micro-nudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(-3px); }
  65% { transform: translateX(3px); } }

/* submit in flight: the clicked button shows progress immediately; the full-page overlay only
   appears if the server is slow (site.js delays it), with a fade so it never flashes */
.form-loading-overlay { animation: micro-fade .2s ease-out; }
@keyframes micro-fade { from { opacity: 0; } to { opacity: 1; } }

/* "/" to search hint, sits inside the glass search bar */
.search-glass { position: relative; }
.slash-hint { align-self: center; flex: none; margin-left: -44px; margin-right: 12px; pointer-events: none;
  font: 500 12px/1 var(--font-mono); color: var(--text-muted); padding: 4px 7px; border-radius: 6px;
  border: 1px solid var(--border-secondary); background: rgba(255, 255, 255, .04); }
.slash-hint[hidden] { display: none; }
@media (max-width: 720px) { .slash-hint { display: none; } }

/* landing filter pills: honest empty state instead of a blank grid */
.preview-empty { color: var(--text-secondary); font-size: 14px; border: 1px dashed var(--border-secondary);
  border-radius: 12px; padding: 18px 20px; margin: 0; }
.preview-empty[hidden] { display: none; }
.preview-empty a { color: var(--link-green); }

/* admin table filter: empty row */
tr.filter-empty td { color: var(--text-muted); text-align: center; padding: 18px; font-style: italic; }

/* docs/blog heading anchors: quiet until the heading is hovered or the link is focused */
.doc h2[id], .doc h3[id] { position: relative; }
.h-anchor { margin-left: 10px; font: 500 .7em var(--font-mono); color: var(--text-muted); text-decoration: none;
  opacity: 0; transition: opacity .15s; vertical-align: middle; }
.doc h2:hover .h-anchor, .doc h3:hover .h-anchor, .h-anchor:focus-visible, .h-anchor.is-copied { opacity: 1; }
.h-anchor:hover { color: var(--link-green); }
.h-anchor.is-copied { color: var(--ok); }
@media (hover: none) { .h-anchor { opacity: .5; } }

/* free-tools cards: the whole card is a link, so say so (arrow that moves on hover) */
.tool-cards a.card { position: relative; padding-right: 44px; transition: border-color .15s, transform .15s; }
.tool-cards a.card::after { content: "→"; position: absolute; right: 18px; top: 20px; color: var(--text-muted);
  transition: transform .15s, color .15s; }
.tool-cards a.card:hover { transform: translateY(-2px); }
.tool-cards a.card:hover::after { transform: translateX(4px); color: var(--link-green); }

@media (prefers-reduced-motion: reduce) {
  .btn, .copy, .copy-button, .filter-pill, .demo-tab, .demo-controls button, .tool-cards a.card,
  .tool-cards a.card::after, .h-anchor { transition: none; }
  .btn:active:not([disabled]), .copy:active, .copy-button:active, .filter-pill:active,
  .demo-tab:active, .demo-controls button:active, .tool-cards a.card:hover,
  .tool-cards a.card:hover::after { transform: none; }
  button[data-confirm].is-armed, .form-loading-overlay { animation: none; }
}

/* landing filter pills: result count beside each label (server-rendered) */
.pill-count { display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px; border-radius: 99px;
  font: 500 11px/1.5 var(--font-mono); text-align: center; background: rgba(112, 157, 224, .16); color: inherit; }
.filter-pill[aria-pressed="true"] .pill-count { background: rgba(7, 20, 42, .18); }

/* signup: resend confirmation + countdown button */
.resent-note { color: var(--ok); font-size: 14px; margin: 0 0 12px; animation: micro-fade .25s ease-out; }
.resend-form button[disabled] { cursor: not-allowed; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .resent-note { animation: none; } }