/* Govern panel (UI preview). Uses the shared tokens from style.css. */
.govern {
  width: min(640px, calc(100vw - 32px));
  max-height: min(86vh, 820px);
  padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-xl);
  background: var(--bg-1); color: var(--text);
  box-shadow: 0 24px 80px oklch(0 0 0 / 0.45);
}
.govern::backdrop { background: oklch(0.1 0.02 280 / 0.6); backdrop-filter: blur(3px); }
.govern-card { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
.govern-head { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6) var(--s-4); border-bottom: 1px solid var(--line-1); }
.govern-head h2 { margin: 0; font-size: var(--t-lg); color: var(--text-strong); }
.govern-sub { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.govern-x { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: var(--s-1); border-radius: var(--r-sm); height: fit-content; }
.govern-x:hover { color: var(--text); background: var(--bg-3); }
.govern-x .icon { width: 20px; height: 20px; }
.govern-body { overflow-y: auto; padding: var(--s-4) var(--s-6); display: grid; gap: var(--s-5); }
.govern-sec h3 { margin: 0 0 var(--s-2); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.govern textarea, .govern input[type="text"], .govern select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: var(--t-sm); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.govern textarea { resize: vertical; min-height: 88px; }
.govern textarea:focus, .govern input[type="text"]:focus, .govern select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.govern-inline { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }
.govern-inline label, .govern-block { display: grid; gap: var(--s-1); font-size: var(--t-xs); color: var(--text-muted); }
.govern-block { margin-top: var(--s-3); }
.govern-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden; }
.govern-list li + li { border-top: 1px solid var(--line-1); }
.govern-check, .govern-toggle { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); cursor: pointer; }
.govern-check:hover, .govern-toggle:hover { background: var(--bg-2); }
.govern-check input { accent-color: var(--accent); width: 18px; height: 18px; flex: none; }
.gc-main { display: grid; flex: 1; min-width: 0; }
.gc-name { font-size: var(--t-sm); color: var(--text); }
.gc-hint { font-size: var(--t-xs); color: var(--text-dim); }
.gc-count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-muted); white-space: nowrap; }
.govern-toggle input {
  appearance: none; flex: none; width: 36px; height: 20px; border-radius: var(--r-pill);
  background: var(--bg-3); border: 1px solid var(--line-2); position: relative; cursor: pointer; transition: background .15s;
}
.govern-toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-muted); transition: transform .15s var(--ease-out), background .15s; }
.govern-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.govern-toggle input:checked::after { transform: translateX(16px); background: var(--accent-on); }
.govern-toggle input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.govern-term { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); color: var(--text-dim); }
.govern-term input { flex: 1; min-width: 0; }
.govern-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-6); border-top: 1px solid var(--line-1); }
.govern-note { margin-right: auto; font-size: var(--t-xs); color: var(--text-dim); }
@media (max-width: 480px) {
  .govern-head, .govern-body, .govern-foot { padding-left: var(--s-4); padding-right: var(--s-4); }
  .govern-inline { grid-template-columns: 1fr; }
  .govern-note { flex-basis: 100%; }
  .govern-foot { flex-wrap: wrap; }
}
.govern .btn { flex: none; width: auto; }
/* In the stream URL row, stay compact so the URL field keeps its width. */
.url-row [data-govern] { flex: none; }