/*
 * Additions for the server-rendered PHP portal, on top of app.css (the JavaScript demo's design,
 * shared so both demos look alike): <details>-based dialogs, native <progress> bars (the CSP allows
 * no inline style attributes), inline forms and the inspector panel.
 */
.inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.page-flash:empty { display: none; }
.page-flash { padding: 20px 32px 0; max-width: 1280px; }
.page-flash .notice, .page-flash .error-note { margin: 0; }
@media (max-width: 640px) { .page-flash { padding: 16px 16px 0; } }

summary.btn { list-style: none; user-select: none; }
summary.btn::-webkit-details-marker { display: none; }
.lifecycle-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin: 4px 0 14px; }
.action-disclosure { position: relative; }
.action-disclosure[open] > summary { box-shadow: inset 0 0 0 2px rgba(30, 28, 23, 0.25); }
.action-form {
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  max-width: 560px;
  box-shadow: var(--shadow);
  white-space: normal;
  text-align: left;
}
.action-right .action-form { min-width: 320px; }
.action-form p { margin: 0 0 8px; }

/* native progress bars */
progress.progress-bar, progress.usage-bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #ece3d1;
  color: var(--brand);
}
progress.progress-bar { height: 10px; margin-bottom: 18px; }
progress.usage-bar { height: 8px; }
progress.progress-bar::-webkit-progress-bar, progress.usage-bar::-webkit-progress-bar { background: #ece3d1; border-radius: 999px; }
progress.progress-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--brand), #3f8f73); border-radius: 999px; transition: width 0.6s ease; }
progress.progress-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--brand), #3f8f73); border-radius: 999px; }
progress.progress-failed::-webkit-progress-value { background: var(--danger); }
progress.progress-failed::-moz-progress-bar { background: var(--danger); }
progress.usage-ok::-webkit-progress-value { background: var(--ok); }
progress.usage-ok::-moz-progress-bar { background: var(--ok); }
progress.usage-warn::-webkit-progress-value { background: var(--amber); }
progress.usage-warn::-moz-progress-bar { background: var(--amber); }
progress.usage-danger::-webkit-progress-value { background: var(--danger); }
progress.usage-danger::-moz-progress-bar { background: var(--danger); }

.live-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* events payloads */
.payload summary { cursor: pointer; }
.payload pre { background: var(--code-bg); color: var(--code-ink); padding: 12px; border-radius: 10px; overflow: auto; max-height: 420px; font: 12px/1.45 var(--mono); margin: 6px 0 0; }

/* inspector: a floating tab when closed, a side column when open */
.inspector-panel { background: #20252b; color: var(--code-ink); min-width: 0; }
.inspector-panel > summary { cursor: pointer; list-style: none; padding: 10px 16px; font: 600 13px var(--mono); color: #f3d08a; }
.inspector-panel > summary::-webkit-details-marker { display: none; }
.inspector-count { color: #a9b0b8; font-weight: 400; margin-left: 6px; }
.inspector-panel:not([open]) { position: fixed; right: 16px; bottom: 16px; z-index: 30; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.inspector-panel[open] { border-left: 1px solid #111; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.shell:has(> .inspector-panel[open]) { grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); }
@media (max-width: 1100px) {
  .shell:has(> .inspector-panel[open]) { grid-template-columns: minmax(0, 1fr); }
  .inspector-panel[open] { position: fixed; inset: 0 0 0 auto; width: min(100vw, 520px); z-index: 40; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.3); }
}
.inspector-body { padding: 0 10px 20px; }
.inspector-intro { margin: 0 8px 8px; font-size: 12px; color: #a9b0b8; }
.inspector-intro a { color: #a8dcc4; }
.inspector-page { background: #20252b; border-radius: var(--radius); padding: 10px; }
.call > summary { list-style: none; }
.call > summary::-webkit-details-marker { display: none; }
.call-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; }