/* ─────────────────────────────────────────────────────────────────────────────
   Pro portal feedback surfaces — Claude Design turn 14.

   14a/14b  toasts   · 14c  retry card

   THE ONE INVERSION: 14a draws the toast dark (#111 surface, white text). The
   owner asked for the opposite, so the surface is white and the text is #111.
   A dark shadow alone does not separate white from a white page, so a 1px
   hairline is added — everything else (radius 10, 12/14 padding, the 30×30
   tinted tile at radius 8, Inter 500 12.5/1.45, the 2-line clamp, the 78px
   clearance over the bottom nav) is the wireframe's, unchanged.
   ───────────────────────────────────────────────────────────────────────── */

#pt-wrap {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  /* 14b — clear of the phone's bottom nav */
  bottom: calc(env(safe-area-inset-bottom) + 78px);
  z-index: 1300;
  display: flex; flex-direction: column; gap: 8px;
  width: calc(100% - 24px);
  max-width: 420px;
  pointer-events: none;
}
@media (min-width: 768px) {
  #pt-wrap { bottom: calc(env(safe-area-inset-bottom) + 24px); }
}

.pt {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  background: #fff;                 /* inverted from 14a's #111 */
  color: #111;
  border: 1px solid #E5E7EB;        /* white needs an edge; #111 did not */
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, .14);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.pt.in { opacity: 1; transform: none; }

/* the 30×30 tinted tile — unchanged from 14a, it already reads on either surface */
.pt-ic {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px 'Inter', system-ui, sans-serif;
}
/* A tint TRIPLE each — tint fill, tint border, the hue's dark value for the glyph
   (38e). The borders matter here in a way they do not on a grey page: this toast is
   white-on-white, and #DCFCE7 / #FEE2E2 / #E5E7EB were three fills invented for this
   file (the third being the system's hairline colour used as a background). */
.pt.ok   .pt-ic { background: var(--xw-green-tint, #f0fdf4); border: 1px solid var(--xw-green-border, #bbf7d0); color: var(--xw-green-dark, #166534); }
.pt.err  .pt-ic { background: var(--xw-red-tint,   #fef2f2); border: 1px solid var(--xw-red-border,   #fecaca); color: var(--xw-red-dark,   #b91c1c); }
.pt.info .pt-ic { background: var(--xw-ink-tint,   #f8f9fa); border: 1px solid var(--xw-ink-border,   #e5e7eb); color: var(--xw-text,       #374151); }

/* server messages are unbounded — clamp at two lines, per 14a */
.pt-msg {
  flex: 1; min-width: 0;
  font: 500 12.5px/1.45 'Inter', system-ui, sans-serif;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* sm — 34px, 9px/14px, 7px radius, 600 11.5px (38c). A row action hugs its label
   rather than going full width (38f), which is what this already did; the padding
   and radius were simply a size the system does not have. Ink because Undo reverses
   something rather than committing to it. */
.pt-undo {
  flex: none;
  background: #111; color: #fff;
  border: 1px solid #111; border-radius: 7px;
  padding: 9px 14px;
  font: 600 11.5px 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
@media (hover: hover) { .pt-undo:hover { background: #242424; border-color: #242424; } }

/* Same 7px radius as the Undo beside it — rule 6, one radius per group. The glyph
   was rgba(17,17,17,.4), a translucent ink this file mixed for itself; #9ca3af is
   the defined colour for a quiet mark like this. */
.pt-x {
  flex: none;
  background: none; border: 0;
  color: #9ca3af;
  font: 400 13px 'Inter', system-ui, sans-serif;
  cursor: pointer; line-height: 1; padding: 4px;
  border-radius: 7px;
  transition: color .15s ease, background .15s ease;
}
@media (hover: hover) { .pt-x:hover { color: #111; background: #f3f4f6; } }

@media (prefers-reduced-motion: reduce) {
  .pt { transition: none; }
}

/* ── 14c · retry card ─────────────────────────────────────────────────────
   The failure state for every fetched section in the portal. Inline, never a
   dialog: the thing that failed is a panel, so the recovery belongs in it. */
.pt-retry {
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  padding: 40px 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 11px;
  text-align: center;
}
.pt-retry-ic {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #F8F9FA;
  border: 1px solid #E5E7EB;
  color: #6B7280;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px 'Inter', system-ui, sans-serif;
}
.pt-retry-t {
  font: 600 16px 'Manrope', system-ui, sans-serif;
  letter-spacing: -.3px;
  color: #111;
}
.pt-retry-b {
  font: 400 11.5px/1.55 'Inter', system-ui, sans-serif;
  color: #6B7280;
  max-width: 300px;
}
/* md, and INK SOLID — 42px, 12px/18px, 8px radius, 600 12.5px (38c). It is the one
   control on the card ("one solid per card", rule 1) and it is the way out of a
   failure, so it should look pressable rather than optional. It was an outline in
   #111, which is not the outline border the system defines (#e5e7eb), inverting to
   a solid on hover — a button that changes KIND under the cursor. */
.pt-retry-btn {
  border: 1px solid #111;
  background: #111;
  border-radius: 8px;
  padding: 12px 18px;
  font: 600 12.5px 'Inter', system-ui, sans-serif;
  color: #fff;
  margin-top: 2px;
  cursor: pointer;
  min-height: 42px;
  transition: background .15s ease, border-color .15s ease;
}
@media (hover: hover) { .pt-retry-btn:hover { background: #242424; border-color: #242424; } }
/* hue-blind disabled (38b) — "Retrying…" carries no meaning, so it carries no colour */
.pt-retry-btn[disabled] {
  background: #f3f4f6; border-color: #e5e7eb; color: #9ca3af;
  cursor: default; opacity: 1;
}

/* Compact variant — 14c puts ONE card across the whole 3-across stat row
   rather than three broken tiles. */
.pt-retry.compact {
  grid-column: 1 / -1;
  padding: 22px 18px;
}
.pt-retry.compact .pt-retry-ic { width: 32px; height: 32px; }
.pt-retry.compact .pt-retry-t  { font-size: 14px; }