/* PostWatch Icon Language v4
   Load last, after every v4 route stylesheet. Icons clarify meaning; they do
   not turn static cards, statuses, or empty states into false affordances. */

:root {
  --pwil4-focus: var(--focus, var(--primary, #2457d6));
  --pwil4-surface: var(--surface, #ffffff);
  --pwil4-text: var(--text, #10243a);
  --pwil4-muted: var(--text-muted, #52657a);
  --pwil4-border: var(--border, #cbd7e3);
}

/* Global affordance floor. A semantic interactive element is an action even
   when a route has not received an icon yet; static cards never match this
   selector. Busy and disabled states override this rule below. */
:where(
  button:not(:disabled):not([aria-disabled="true"]),
  a[href]:not([aria-disabled="true"]),
  select:not(:disabled):not([aria-disabled="true"]),
  input[type="checkbox"]:not(:disabled):not([aria-disabled="true"]),
  input[type="radio"]:not(:disabled):not([aria-disabled="true"]),
  input[type="file"]:not(:disabled):not([aria-disabled="true"]),
  summary,
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"])
) {
  cursor: pointer !important;
  touch-action: manipulation;
}

:where(
  button:disabled,
  select:disabled,
  input:disabled,
  [aria-disabled="true"]
) {
  cursor: not-allowed !important;
}

/* Real actions keep a visible text label and receive one stable semantic icon. */
.pwil4-icon-label:is(button, a, [role="button"]),
.pwil4-icon-only:is(button, a, [role="button"]) {
  min-block-size: 44px;
  touch-action: manipulation;
  cursor: pointer;
}

.pwil4-icon-only:is(button, a, [role="button"]) {
  min-inline-size: 44px;
}

.pwil4-icon-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-inline-size: 0;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.pwil4-icon-label > .pwil4-action-glyph,
.pwil4-icon-label > svg,
.pwil4-icon-label > i[data-lucide],
.pwil4-icon-only > svg,
.pwil4-icon-only > i[data-lucide] {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  flex: 0 0 auto;
}

.pwil4-action-glyph,
.pwil4-busy-icon,
.pwil4-status-glyph,
.pwil4-feedback-icon,
.pwil4-state-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: inherit;
}

.pwil4-action-glyph > svg,
.pwil4-action-glyph > i,
.pwil4-busy-icon > svg,
.pwil4-busy-icon > i,
.pwil4-status-glyph > svg,
.pwil4-status-glyph > i,
.pwil4-feedback-icon > svg,
.pwil4-feedback-icon > i {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.pwil4-icon-label:is(button, a, [role="button"]):not(:disabled):not([aria-disabled="true"]):hover {
  filter: brightness(0.96) saturate(1.04);
}

.pwil4-icon-label:is(button, a, [role="button"]):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(1px) scale(0.985);
}

.pwil4-icon-label:is(button, a, [role="button"]):focus-visible,
.pwil4-icon-only:is(button, a, [role="button"]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pwil4-focus) 78%, white);
  outline-offset: 3px;
}

.pwil4-icon-label:is(button, [role="button"]):disabled,
.pwil4-icon-label[aria-disabled="true"],
.pwil4-icon-only:is(button, [role="button"]):disabled,
.pwil4-icon-only[aria-disabled="true"] {
  cursor: not-allowed;
  filter: none;
  opacity: 0.52;
}

.pwil4-is-busy {
  cursor: progress !important;
}

.pwil4-busy-icon {
  margin-inline-end: 0.1rem;
  animation: pwil4-spin 720ms linear infinite;
}

@keyframes pwil4-spin {
  to { transform: rotate(1turn); }
}

/* Statuses stay visibly informational: no pointer, lift, chevron, or hover. */
.pwil4-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-inline-size: 100%;
  min-block-size: 28px;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--pwil4-border);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: inherit;
  box-shadow: none;
}

.pwil4-status > span:empty:not([data-pwil4-generated]) {
  display: none !important;
}

/* People rows already pair a plain-language status with their own dot cue.
   Do not let a stale enhancer glyph compete with the Review label. */
.people-status > .pwil4-status-glyph {
  display: none !important;
}

.pwil4-status[data-pwil4-tone="success"] {
  color: #166534 !important;
  background-color: #ecfdf3 !important;
  border-color: #86efac !important;
}

.pwil4-status[data-pwil4-tone="warning"] {
  color: #7c2d12 !important;
  background-color: #fff7ed !important;
  border-color: #fdba74 !important;
}

.pwil4-status[data-pwil4-tone="danger"] {
  color: #991b1b !important;
  background-color: #fff1f2 !important;
  border-color: #fda4af !important;
}

.pwil4-status[data-pwil4-tone="info"] {
  color: #1e3a5f !important;
  background-color: #eff6ff !important;
  border-color: #93c5fd !important;
}

.pwil4-status[data-pwil4-tone="neutral"] {
  color: #334155 !important;
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

:root.dark .pwil4-status[data-pwil4-tone="success"],
:root[data-theme="dark"] .pwil4-status[data-pwil4-tone="success"] {
  color: #dcfce7 !important;
  background-color: #153f2c !important;
  border-color: #4ade80 !important;
}

:root.dark .pwil4-status[data-pwil4-tone="warning"],
:root[data-theme="dark"] .pwil4-status[data-pwil4-tone="warning"] {
  color: #ffedd5 !important;
  background-color: #4a2a12 !important;
  border-color: #fb923c !important;
}

:root.dark .pwil4-status[data-pwil4-tone="danger"],
:root[data-theme="dark"] .pwil4-status[data-pwil4-tone="danger"] {
  color: #ffe4e6 !important;
  background-color: #4c1620 !important;
  border-color: #fb7185 !important;
}

:root.dark .pwil4-status[data-pwil4-tone="info"],
:root[data-theme="dark"] .pwil4-status[data-pwil4-tone="info"] {
  color: #dbeafe !important;
  background-color: #173555 !important;
  border-color: #60a5fa !important;
}

:root.dark .pwil4-status[data-pwil4-tone="neutral"],
:root[data-theme="dark"] .pwil4-status[data-pwil4-tone="neutral"] {
  color: #e2e8f0 !important;
  background-color: #27374a !important;
  border-color: #64748b !important;
}

/* Empty and system states communicate what happened without looking tappable. */
.pwil4-state:not(a):not(button):not([role="button"]) {
  cursor: default;
  box-shadow: none;
}

.pwil4-state > .pwil4-state-icon {
  inline-size: 44px;
  block-size: 44px;
  margin-block-end: 0.75rem;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, currentColor 9%, var(--pwil4-surface));
}

.pwil4-state > .pwil4-state-icon > svg,
.pwil4-state > .pwil4-state-icon > i {
  inline-size: 1.35rem;
  block-size: 1.35rem;
}

.pwil4-state--compact {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-inline-size: 0;
}

.pwil4-state--compact > .pwil4-state-icon {
  inline-size: 32px;
  block-size: 32px;
  margin: 0;
  border-radius: 10px;
}

.pwil4-state[data-pwil4-tone="success"] > .pwil4-state-icon { color: #15803d; }
.pwil4-state[data-pwil4-tone="danger"] > .pwil4-state-icon { color: #b91c1c; }
.pwil4-state[data-pwil4-tone="info"] > .pwil4-state-icon { color: #1d4ed8; }
.pwil4-state[data-pwil4-tone="neutral"] > .pwil4-state-icon { color: var(--pwil4-muted); }
.pwil4-state[data-pwil4-tone="loading"] > .pwil4-state-icon { color: var(--pwil4-focus); }

.pwil4-state[data-pwil4-tone="loading"] > .pwil4-state-icon > svg,
.pwil4-state[data-pwil4-tone="loading"] > .pwil4-state-icon > i {
  animation: pwil4-spin 720ms linear infinite;
}

:root.dark .pwil4-state[data-pwil4-tone="success"] > .pwil4-state-icon,
:root[data-theme="dark"] .pwil4-state[data-pwil4-tone="success"] > .pwil4-state-icon { color: #86efac; }
:root.dark .pwil4-state[data-pwil4-tone="danger"] > .pwil4-state-icon,
:root[data-theme="dark"] .pwil4-state[data-pwil4-tone="danger"] > .pwil4-state-icon { color: #fda4af; }
:root.dark .pwil4-state[data-pwil4-tone="info"] > .pwil4-state-icon,
:root[data-theme="dark"] .pwil4-state[data-pwil4-tone="info"] > .pwil4-state-icon { color: #93c5fd; }

/* Inline feedback always includes readable text; the icon is secondary. */
.pwil4-feedback {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.pwil4-feedback[data-pwil4-tone="danger"] { color: var(--danger, #b42318); }
.pwil4-feedback[data-pwil4-tone="warning"] { color: var(--warning-text, #854d0e); }
.pwil4-feedback[data-pwil4-tone="success"] { color: var(--success-text, #166534); }
.pwil4-feedback[data-pwil4-tone="info"] { color: var(--pwil4-muted); }
.pwil4-feedback[data-pwil4-tone="loading"] { color: var(--pwil4-focus); }
.pwil4-feedback[data-pwil4-tone="loading"] > .pwil4-feedback-icon { animation: pwil4-spin 720ms linear infinite; }

:root.dark .pwil4-feedback[data-pwil4-tone="danger"],
:root[data-theme="dark"] .pwil4-feedback[data-pwil4-tone="danger"] { color: #fecaca; }
:root.dark .pwil4-feedback[data-pwil4-tone="warning"],
:root[data-theme="dark"] .pwil4-feedback[data-pwil4-tone="warning"] { color: #ffedd5; }
:root.dark .pwil4-feedback[data-pwil4-tone="success"],
:root[data-theme="dark"] .pwil4-feedback[data-pwil4-tone="success"] { color: #dcfce7; }
:root.dark .pwil4-feedback[data-pwil4-tone="info"],
:root[data-theme="dark"] .pwil4-feedback[data-pwil4-tone="info"] { color: #dbeafe; }

@media (max-width: 767px) {
  .pwil4-icon-label:is(button, a, [role="button"]) {
    max-inline-size: 100%;
  }

  .pwil4-status {
    line-height: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pwil4-icon-label,
  .pwil4-busy-icon,
  .pwil4-state-icon,
  .pwil4-feedback-icon {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .pwil4-icon-label:is(button, a, [role="button"]):active {
    transform: none;
  }
}