/*
 * emptyStates.css — unified empty-state upgrade (Superhuman audit #5).
 *
 * Pattern in verbatim: every tool has its own `.{prefix}-empty` class with
 * (mostly) the same shape — centered text, optional SVG icon, optional h3
 * heading, optional hint paragraph. Sizes/opacities vary tool-to-tool, all
 * feel anemic (44-56px icons at 0.2-0.5 opacity, 0.82-0.88rem text).
 *
 * This overlay applies a unified, more confident treatment to every known
 * empty-state class at once. Same TOKEN/CASCADE override pattern as
 * motion/accent/elevation — zero edits to verbatim _ported/*. Loaded last
 * so it wins.
 *
 * Treatment:
 *   - More vertical breathing room (96px top/bottom vs ~60px)
 *   - Icon container: 80px square, soft mint-tinted backdrop, vivid stroke
 *   - Heading: 1.15rem weight 700, primary text colour (was 1.0rem t2)
 *   - Paragraph: 0.9rem, max-width 360px for line-length comfort, t3
 *   - Hint paragraphs: italicised feel (lighter weight, t3, smaller)
 */

/* Common container: every X-empty centered block. */
.mb-empty,
.ad-empty,
.ad-history-empty,
.ap-empty,
.ap-history-empty,
.as-empty,
.as-aplus-empty,
.kd-empty,
.lo-empty,
.lo-history-empty,
.si-empty,
.ra-empty,
.ds-empty,
.at-empty {
  text-align: center !important;
  padding: 96px 32px !important;
  color: var(--t3) !important;
}

/* Single-line / tiny variants (e.g. reverse-asin in-table message) keep
   their original tight layout — too tall and they break table flow. */
.mb-portfolio-empty {
  text-align: center;
  padding: 28px 20px;
  color: var(--t3);
  font-size: 0.85rem;
  border: 1px dashed rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
}
html[data-theme="light"] .mb-portfolio-empty {
  border-color: rgba(26, 39, 64, 0.08);
  background: rgba(26, 39, 64, 0.015);
}

/* Icon container — round-square soft mint backdrop. */
.mb-empty-icon,
.ad-empty-icon,
.ap-empty-icon,
.as-empty-icon,
.kd-empty-icon,
.lo-empty-icon,
.si-empty-icon,
.ra-empty-icon,
.at-empty-icon,
.ds-empty-icon {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--mint-a10, rgba(46, 216, 168, 0.10)) !important;
  border-radius: 18px !important;
  color: var(--mint, #2ed8a8) !important;
  opacity: 1 !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--mint-a20, rgba(46, 216, 168, 0.20));
}

/* Make sure any inner <svg> inside the icon container scales nicely and
   inherits the mint stroke colour. Verbatim icons are mostly stroked
   shapes (rect/line/circle) using `currentColor`. */
.mb-empty-icon svg,
.ad-empty-icon svg,
.ap-empty-icon svg,
.as-empty-icon svg,
.kd-empty-icon svg,
.lo-empty-icon svg,
.si-empty-icon svg,
.ra-empty-icon svg,
.at-empty-icon svg,
.ds-empty-icon svg {
  width: 36px !important;
  height: 36px !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}

/* Some empty-icons ARE the svg (no wrapper container, e.g. .mb-empty-icon is
   the svg itself per my-books.iife.js). Apply the box treatment directly
   when the element is an svg. */
svg.mb-empty-icon,
svg.lo-empty-icon,
svg.ad-empty-icon {
  padding: 20px !important;
  box-sizing: content-box !important;
}

/* History-tile emoji-style icon (.lo-history-empty-icon is plain text like
   "📚" — no svg wrap). Bump size + tint. */
.lo-history-empty-icon,
.ad-history-empty-icon,
.ap-history-empty-icon {
  font-size: 2.6rem !important;
  margin-bottom: 18px !important;
  opacity: 0.7 !important;
  line-height: 1 !important;
}

/* Headings — primary text colour, slightly larger, more weight. */
.mb-empty h3,
.ad-empty h3,
.ad-history-empty h3,
.ap-empty h3,
.ap-history-empty h3,
.as-empty h3,
.kd-empty h3,
.lo-empty h3,
.lo-history-empty h3,
.si-empty h3,
.ra-empty h3,
.ds-empty h3,
.at-empty h3 {
  font-family: var(--fd, var(--fb)) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.005em !important;
}

/* Primary paragraphs — the "explain what's empty" line. */
.mb-empty p,
.ad-empty p,
.ad-history-empty p,
.ap-empty p,
.ap-history-empty p,
.as-empty p,
.kd-empty p,
.lo-empty p,
.lo-history-empty p,
.si-empty p,
.ra-empty p,
.ds-empty p,
.at-empty p {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--t2) !important;
  max-width: 360px !important;
  margin: 0 auto 4px !important;
}

/* The "hint" line (CTA-style guidance) — slightly smaller, lighter, gets a
   bit of breathing room from the main paragraph. */
.mb-empty-hint,
.ad-empty-hint,
.ap-empty-hint,
.as-empty-hint,
.kd-empty-hint,
.lo-empty-hint,
.si-empty-hint,
.ra-empty-hint {
  font-size: 0.85rem !important;
  color: var(--t3) !important;
  margin-top: 10px !important;
  opacity: 0.85 !important;
}

/* For empty states that mention an action ("Click XYZ to add" / "Track a
   Book"), give the keyword visual weight via a kbd-like chip pattern. This
   activates if verbatim text wraps an action term in <strong> — most don't
   today, but it's harmless when absent. */
.mb-empty strong,
.ad-empty strong,
.ap-empty strong,
.lo-empty strong,
.si-empty strong,
.ra-empty strong,
.kd-empty strong {
  color: var(--mint) !important;
  font-weight: 600 !important;
}