/* Channel details belong beside their row, not in a full-height sidebar. */
.channel-popover .channel-row.is-active {
  background:var(--sand); color:var(--copper-dark);
  box-shadow:inset -3px 0 0 var(--copper);
}
.channel-row:focus-visible, .channel-flyout button:focus-visible,
.channel-flyout summary:focus-visible {
  outline:2px solid var(--copper); outline-offset:2px;
}
.channel-sheet.channel-flyout:not([hidden]) {
  position:fixed; inset:auto; z-index:70; display:block;
  width:380px; max-width:calc(100vw - 24px); padding:0; gap:0;
  border:1px solid var(--line); border-radius:17px; background:#fff;
  box-shadow:0 14px 42px #1414131a,0 2px 8px #14141308;
  overflow:visible; transform:none; opacity:1; transition:none;
  animation:channel-flyout-in .16s ease-out;
  font-family:var(--font); direction:rtl;
}
.channel-flyout::before {
  content:""; position:absolute; width:12px; height:12px; background:#fff;
  border:1px solid var(--line); transform:rotate(45deg); pointer-events:none;
}
.channel-flyout[data-side=left]::before {
  right:-7px; top:calc(var(--channel-arrow-y) - 6px); border-left:0; border-bottom:0;
}
.channel-flyout[data-side=right]::before {
  left:-7px; top:calc(var(--channel-arrow-y) - 6px); border-right:0; border-top:0;
}
.channel-flyout[data-side=below]::before {
  top:-7px; left:calc(var(--channel-arrow-x) - 6px); border-right:0; border-bottom:0;
}
.channel-flyout[data-side=above]::before {
  bottom:-7px; left:calc(var(--channel-arrow-x) - 6px); border-left:0; border-top:0;
}
.channel-flyout-scroll {
  padding:18px; overflow:auto; overscroll-behavior:contain; border-radius:inherit;
  scrollbar-width:thin; scrollbar-color:#d5d1ca transparent;
}
.channel-flyout .panel-back {
  float:left; width:30px; height:30px; margin:0 8px 4px 0; background:var(--paper);
}
.channel-flyout .panel-head { margin-bottom:14px; }
.channel-flyout .panel-head .eyebrow { font-size:10px; color:var(--stone); letter-spacing:0; }
.channel-flyout .panel-head h2 { font-size:21px; line-height:1.4; margin:3px 0 9px; }
.channel-flyout .panel-head p { font-size:12px; line-height:1.85; margin:0; color:var(--ink-2); }
.channel-flyout .channel-form { gap:11px; max-width:none; }
.channel-flyout .channel-field { gap:5px; min-width:0; }
.channel-flyout .channel-field span { font-size:12px; }
.channel-flyout .channel-field input {
  width:100%; min-width:0; height:38px; border-radius:9px; padding:8px 10px;
  font-size:13px; background:var(--paper);
}
.channel-flyout .channel-field small { font-size:11px; line-height:1.7; }
.channel-flyout .channel-actions { gap:8px; padding-top:3px; }
.channel-flyout .primary-button,.channel-flyout .secondary-button,.channel-flyout .ghost-button {
  min-height:36px; height:auto; padding:8px 13px; border-radius:9px;
  font-family:var(--font); font-size:12px; line-height:1.5;
}
.channel-flyout .primary-button { background:var(--copper); color:#fff; }
.channel-flyout .channel-grid { gap:9px; grid-template-columns:1fr 1fr; }
.channel-flyout .channel-result { font-size:12px; line-height:1.8; padding:10px 12px; overflow-wrap:anywhere; }
.channel-flyout .channel-note { padding:11px 12px; margin-bottom:0; background:var(--paper); }
.channel-flyout .channel-note b,.channel-flyout .channel-note p { font-size:12px; line-height:1.8; }
.channel-flyout .channel-steps { font-size:12px; line-height:1.85; margin-bottom:0; }
.channel-flyout .channel-foot { padding-top:12px; font-size:11px; line-height:1.8; }
.channel-flyout .channel-foot:empty { display:none; }
.channel-flyout .channel-foot p { margin:0 0 7px; }
.channel-flyout .channel-loading { margin:12px 0 4px; font-size:12px; color:var(--stone); }
@keyframes channel-flyout-in { from { opacity:0; translate:0 4px; } to { opacity:1; translate:0 0; } }
@media(max-width:420px) {
  .channel-flyout-scroll { padding:14px; }
  .channel-flyout .panel-head h2 { font-size:19px; }
  .channel-flyout .channel-field input { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .channel-sheet.channel-flyout:not([hidden]) { animation:none; } }