/* The side panel: a native modal dialog that slides in from the right, with a dark head and soft blocks.
   Everything about one record type, one connection or one permission lives in one of these. */

.sidepanel {
  position: fixed; inset: 12px 12px 12px auto; width: min(640px, calc(100vw - 24px)); max-width: none; height: auto; max-height: none;
  margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-2xl); background: var(--bg); color: var(--ink); box-shadow: var(--sh-float);
}
.sidepanel[open] { display: flex; flex-direction: column; animation: sidepanel-in .26s var(--ease); }
.sidepanel::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@keyframes sidepanel-in { from { transform: translateX(calc(100% + 24px)); } to { transform: none; } }

.sidepanel-head { display: flex; align-items: center; gap: 14px; flex: none; padding: 20px 22px; background: var(--stage-bg); color: var(--stage-ink); }
.sidepanel-head .ic.rtc { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-l); background: var(--paper); }
.sidepanel-head .ic.rtc svg { width: 19px; height: 19px; }
.sidepanel-head .brandmark { width: 104px; }
.sidepanel-title { flex: 1; min-width: 0; }
.sidepanel-title h2 { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--stage-ink); overflow-wrap: anywhere; }
.sidepanel-title p { margin: 2px 0 0; font-size: var(--fs-s); color: var(--stage-muted); }
.sidepanel-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: var(--r-m); background: none; color: var(--stage-muted); cursor: pointer; }
.sidepanel-close:hover { background: var(--stage-fill-hover); color: var(--stage-ink); }
.sidepanel-close svg { width: 17px; height: 17px; }

.sidepanel-body { flex: 1; min-height: 0; display: grid; align-content: start; gap: 10px; padding: 12px; overflow-y: auto; overscroll-behavior: contain; }
.sidepanel-body > form { display: contents; }
.sidepanel-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.sidepanel-body fieldset.bare { display: contents; }
.sidepanel-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 10px 18px; background: var(--panel); font-size: var(--fs-xs); color: var(--ink-4); }

.panel-block { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.panel-block > h3 { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--fs-s); font-weight: 600; }
.panel-block > .hint { margin: -6px 0 12px; font-size: var(--fs-s); color: var(--ink-4); }
.panel-block .field { margin-bottom: 14px; }
.panel-block .field:last-child { margin-bottom: 0; }
.panel-block .dirpick { margin-bottom: 0; }
.panel-block .dirpick + .trignote, .panel-block .trignote { margin-top: 10px; }
.panel-block .mark-row:last-child { margin-bottom: 0; }

.panel-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 8px 0; }
.panel-line:first-child { padding-top: 0; }
.panel-line b { display: block; font-size: var(--fs-s); font-weight: 600; }
.panel-line small { display: block; font-size: var(--fs-xs); color: var(--ink-4); }
.panel-line .grow { flex: 1; min-width: 200px; }
.panel-fixed { padding: 10px 12px; border-radius: var(--r-l); background: var(--panel-2); }
.panel-fixed b { display: block; font-size: var(--fs-s); font-weight: 600; }
.panel-fixed span { font-size: var(--fs-xs); color: var(--ink-4); }
.panel-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.panel-facts div { min-width: 0; }
.panel-facts dt { font-size: var(--fs-xs); color: var(--ink-4); }
.panel-facts dd { margin: 0; font-size: var(--fs-s); font-weight: 600; overflow-wrap: anywhere; }
.panel-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: var(--fs-s); color: var(--ink-2); }
.panel-list li { display: flex; align-items: flex-start; gap: 9px; }
.panel-list svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--ok); }
.panel-list.quiet svg { color: var(--ink-4); }

/* The fields table: the example column needs more room than a panel has. */
.sidepanel .fieldrows col:nth-child(4), .sidepanel .fieldrows th:nth-child(4), .sidepanel .fieldrows td:nth-child(4) { display: none; }
.sidepanel .table-wrap { overflow-x: auto; }
.sidepanel .fmpanel { gap: 10px; }

@media (max-width: 680px) {
  .sidepanel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
  .sidepanel-head { padding: 14px 16px; }
  .sidepanel-body { padding: 10px; }
  .sidepanel-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .panel-block { padding: 14px; }
  .panel-line .grow { min-width: 100%; }
  .panel-facts { grid-template-columns: minmax(0, 1fr); }
  .sidepanel .seg { display: flex; width: 100%; }
  .sidepanel .seg label { flex: 1; justify-content: center; text-align: center; }
}