/* The side panel (shared/workspace/_side_panel): a modal dialog against the
 * right edge, over the backdrop, with the same soft left side as the table
 * filters drawer. Rounded corners and a wide, soft shadow mark its left side. The left border (--panel-edge) is transparent in the light
 * theme and faint in the dark theme, where the shadow can't show; forced
 * colors, which remove shadows, always draw it. It scrolls on its own, and the
 * page beneath stays still. The Close button sits at the top right, beside the
 * page's heading. */
.workspace:has(> .side-panel:modal) { overflow: hidden; }
.workspace .side-panel { position: fixed; inset: 0 0 0 auto; width: min(36rem, 100%); max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--panel-edge); border-radius: 1rem 0 0 1rem; color: var(--ink); background: var(--canvas); box-shadow: var(--panel-shadow); overflow-y: auto; overscroll-behavior: contain; }
.workspace .side-panel::backdrop { background: var(--backdrop); }
.workspace .side-panel turbo-frame { display: block; }
.workspace .side-panel-page { padding: 1.5rem 1.5rem 3rem; }
.workspace .side-panel-page h1 { margin-right: 3rem; font-size: 1.375rem; }
.workspace .side-panel-page .form { max-width: none; }
/* Back links duplicate Close and Escape in the panel. A form's Cancel link
 * stays, and closes the panel (side_panel_controller.js#cancel). */
.workspace .side-panel-page .back-link { display: none; }
.workspace .side-panel-close { position: absolute; top: .75rem; right: .75rem; }
.workspace .side-panel-close button { width: 2.75rem; padding: .625rem; border: 0; color: var(--ink); background: transparent; }
.workspace .side-panel-close button:hover { color: var(--ink); background: var(--surface); }
.workspace .side-panel-close .icon { width: 1.5rem; height: 1.5rem; }

/* A form page (docs/runbooks/forms.md) fills the panel in three parts. Its
 * heading, and any introduction before the form, form a bar at the top beside
 * Close; the form's .actions form a bar at the bottom; and the input card
 * (.form-body) scrolls whole, on the panel's background, between them. The
 * form is the scroller, so the Save bar sticks to its bottom, and scroll
 * padding keeps a focused field clear of it. A line and a soft shadow
 * (--scroll-shadow, darker in the dark theme) mark each bar while fields
 * scroll beneath it, using scroll-driven animations where supported;
 * elsewhere the lines always show, without shadows. On short screens, such as
 * a phone on its side or zoomed text, the bars unpin and the whole panel
 * scrolls. */
@keyframes side-panel-bar-line { from { border-color: transparent; } to { border-color: var(--line); } }
@keyframes side-panel-bar-shadow { from { opacity: 0; } to { opacity: 1; } }
@media (height >= 30rem) {
  .workspace .side-panel[open]:has(.side-panel-page > .form > .form-body) { display: flex; flex-direction: column; overflow: hidden; }
  .workspace .side-panel:has(.side-panel-page > .form > .form-body) turbo-frame,
  .workspace .side-panel-page:has(> .form > .form-body),
  .workspace .side-panel-page > .form:has(> .form-body) { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .workspace .side-panel-page:has(> .form > .form-body) { padding: 0; }
  .workspace .side-panel-page:has(> .form > .form-body) > :not(h1, .form) { flex: none; margin: 0; padding: 0 1.5rem .75rem; }
  .workspace .side-panel-page:has(> .form > .form-body) > h1 { flex: none; margin: 0; padding: 1.125rem 4.25rem .75rem 1.5rem; }
  .workspace .side-panel-page > .form:has(> .form-body) { border-top: 1px solid transparent; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block-end: 6rem; scroll-timeline: --side-panel-body block; }
  .workspace .side-panel-page > .form > .form-body { flex: none; margin: .5rem 1.5rem 1rem; padding: 1.5rem; }
  .workspace .side-panel-page > .form > .actions { position: sticky; bottom: 0; flex: none; margin: auto 0 0; padding: 1rem 1.5rem; border-top: 1px solid transparent; background: var(--surface); }
  .workspace .side-panel-page > .form:has(> .form-body)::before { position: sticky; top: 0; z-index: 1; flex: none; height: .75rem; margin-bottom: -.75rem; background: linear-gradient(var(--scroll-shadow), transparent); content: ""; opacity: 0; pointer-events: none; }
  .workspace .side-panel-page > .form > .actions::before { position: absolute; inset: auto 0 calc(100% + 1px); height: .75rem; background: linear-gradient(to top, var(--scroll-shadow), transparent); content: ""; opacity: 0; pointer-events: none; }
  @supports (animation-timeline: scroll()) {
    .workspace .side-panel-page > .form:has(> .form-body), .workspace .side-panel-page > .form > .actions { animation: side-panel-bar-line linear both; animation-timeline: --side-panel-body; }
    .workspace .side-panel-page > .form:has(> .form-body)::before, .workspace .side-panel-page > .form > .actions::before { animation: side-panel-bar-shadow linear both; animation-timeline: --side-panel-body; }
    .workspace .side-panel-page > .form:has(> .form-body), .workspace .side-panel-page > .form:has(> .form-body)::before { animation-range: 0 1rem; }
    .workspace .side-panel-page > .form > .actions, .workspace .side-panel-page > .form > .actions::before { animation-direction: reverse; animation-range: calc(100% - 1rem) 100%; }
  }
  @supports not (animation-timeline: scroll()) {
    .workspace .side-panel-page > .form:has(> .form-body), .workspace .side-panel-page > .form > .actions { border-color: var(--line); }
  }
  @media (width < 30rem) {
    .workspace .side-panel-page:has(> .form > .form-body) > :not(.form) { padding-left: 1rem; }
    .workspace .side-panel-page > .form > .form-body { margin-inline: 1rem; }
    .workspace .side-panel-page > .form > :is(.form-body, .actions) { padding-inline: 1rem; }
  }
}

/* While a link loads a page into the panel. */
.workspace:has(#side-panel[busy]) { cursor: progress; }

/* The panel slides in and out, and the backdrop fades. Browsers without
 * @starting-style or transitions on display show and hide them at once. */
@media (prefers-reduced-motion: no-preference) {
  .workspace .side-panel, .workspace .side-panel::backdrop { transition: transform .25s ease-out, opacity .25s ease-out, display .25s allow-discrete, overlay .25s allow-discrete; }
  .workspace .side-panel:not([open]) { transform: translateX(100%); }
  .workspace .side-panel:not([open])::backdrop { opacity: 0; }
  @starting-style {
    .workspace .side-panel[open] { transform: translateX(100%); }
    .workspace .side-panel[open]::backdrop { opacity: 0; }
  }
}

/* At full width there is no left side to soften. */
@media (width <= 36rem) {
  .workspace .side-panel { border-radius: 0; }
}

@media (width < 30rem) {
  .workspace .side-panel-page { padding: 1rem 1rem 3rem; }
}