/* Product-specific light workbench tokens from llmPMS/docs/frontend/design-system.md. */
.pms-shell {
  --pms-canvas: #f4f6f8;
  --pms-surface: #fff;
  --pms-sidebar: #eef2f6;
  --pms-text: #1f2933;
  --pms-muted: #4b5563;
  --pms-line: #d9e1ea;
  --pms-accent: #1d5fd1;
  --pms-warn: #8f5400;
  container: pms / inline-size;
  border: 1px solid var(--pms-line);
  border-radius: 2px;
  background: var(--pms-canvas);
  color: var(--pms-text);
  overflow: hidden;
  font: 400 14px/1.6 var(--wb-sans);
  letter-spacing: 0;
}
.pms-appbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: var(--pms-surface); border-bottom: 1px solid var(--pms-line); }
.pms-brand { font-size: 20px; font-weight: 500; }
.pms-appbar span:last-child { font-size: 13px; color: var(--pms-muted); }
.pms-layout { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
.pms-nav { display: flex; flex-direction: column; gap: 8px; padding: 20px 12px; border-right: 1px solid var(--pms-line); background: var(--pms-sidebar); }
.pms-shell button { border: 0; border-radius: 2px; padding: 10px 12px; min-height: 44px; font: 500 14px/1.5 var(--wb-sans); letter-spacing: 0; color: var(--pms-text); background: transparent; text-align: left; }
.pms-shell button:hover { background: var(--pms-sidebar); }
.pms-nav button[aria-selected="true"] { color: var(--pms-accent); background: var(--pms-surface); box-shadow: inset 0 0 0 1px var(--pms-line); }
.pms-shell :focus-visible { outline: 2px solid var(--pms-accent); outline-offset: 2px; }
.pms-panel { min-width: 0; padding: 24px; min-height: 540px; }
.pms-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; }
.pms-panel h4 { font: 500 21px/1.4 var(--wb-sans); margin: 0; color: var(--pms-text); }
.pms-media-label { color: var(--pms-muted); font-size: 13px; }
.pms-review-state { color: var(--pms-warn); font-size: 13px; }
.pms-intro { color: var(--pms-muted); margin-bottom: 20px; }
.pms-candidates { border-top: 1px solid var(--pms-line); }
.pms-shell .pms-candidate { width: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px 12px; border-bottom: 1px solid var(--pms-line); border-radius: 0; }
.pms-candidate[aria-pressed="true"] { background: var(--color-accent-wash); }
.pms-candidate span:nth-child(2) { font-weight: 400; color: var(--pms-muted); }
.pms-candidate span:last-child { font-size: 12px; color: var(--pms-accent); }
.pms-reference { background: var(--pms-surface); padding: 20px; margin-top: 24px; border: 1px solid var(--pms-line); }
.pms-reference h5 { font: 500 14px/1.5 var(--wb-sans); margin: 0 0 10px; }
.pms-clause { font-size: 16px; overflow-wrap: anywhere; }
.pms-shell a { color: var(--pms-accent); }
.pms-source-link { display: inline-flex; min-height: 44px; align-items: center; margin-top: 8px; font-size: 13px; }
.pms-strip { margin: 0 0 20px; }
.pms-strip a { display: flex; align-items: center; min-height: 44px; }
.pms-strip figcaption { margin-top: 8px; color: var(--pms-muted); font-size: 12px; }
.pms-video-frame { background: var(--pms-text); position: relative; }
.pms-video-frame video { display: block; width: 100%; height: 300px; object-fit: contain; }
.pms-video-error { padding: 24px; background: var(--pms-surface); border: 1px solid var(--pms-line); }
.pms-video-error button { border: 1px solid var(--pms-line); margin-top: 12px; }
.pms-footer { padding: 12px 20px; border-top: 1px solid var(--pms-line); background: var(--pms-surface); color: var(--pms-muted); font-size: 13px; }
.pms-shell:not(.pms-ready) .pms-nav { display: none; }
.pms-shell:not(.pms-ready) .pms-layout { grid-template-columns: minmax(0, 1fr); }
@container pms (max-width: 560px) {
  .pms-layout { grid-template-columns: minmax(0, 1fr); }
  .pms-nav { flex-direction: row; padding: 8px; border-right: 0; border-bottom: 1px solid var(--pms-line); }
  .pms-nav button { flex: 1; text-align: center; }
  .pms-panel { padding: 20px 16px; min-height: 545px; }
  .pms-panel-head { align-items: flex-start; }
  .pms-panel h4 { font-size: 20px; }
  .pms-shell .pms-candidate { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 8px; padding-inline: 10px; }
  .pms-candidate span:last-child { font-size: 0; }
  .pms-candidate span:last-child::after { content: '›'; font-size: 20px; }
  .pms-reference { padding: 16px; }
  .pms-appbar { padding: 14px 16px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pms-shell button { transition: background-color .16s ease; }
}