/* ──────────────────────────────────────────────────────────────────────────
 * Side panes that make room for the calendar — feature_sched_side_panes.
 * js/scheduler/panes.js sets the state on <body class="sched-app">:
 *
 *   .spanes-on     the flag is on and the window is 961–1600px wide
 *   .spanes-pin    the rail is pinned open beside the board (as before)
 *   .spanes-fly    the rail is out as a flyout over the board
 *   [data-spanes-show]  which part the flyout shows: day | rail
 *
 * The inspector column needs no class of its own: inspector.js already sets
 * .spane-right.is-open while a job is open (the phone sheet's switch), and the
 * board reads it with :has().
 *
 * Every rule is scoped :not(.jsheet-open): while the job sheet is open its own
 * fold (canon-jobsheet.css) is the only one. Below 961px nothing here applies
 * and the phone sheets are untouched.
 * ────────────────────────────────────────────────────────────────────────── */

.sched-app .spanes-strip,
.sched-app .spanes-head { display: none; }

@media (min-width: 961px) {
  /* ── The board: strip | calendar | inspector-when-open ──────────────── */
  .sched-app.spanes-on:not(.jsheet-open) .sboard {
    position: relative;
    column-gap: 0;
    grid-template-columns: 52px minmax(0, 1fr) 0;
  }
  .sched-app.spanes-on:not(.jsheet-open) .sboard:has(> .spane-right.is-open) { grid-template-columns: 52px minmax(0, 1fr) 330px; }
  .sched-app.spanes-on.spanes-pin:not(.jsheet-open) .sboard { grid-template-columns: 292px minmax(0, 1fr) 0; }
  .sched-app.spanes-on.spanes-pin:not(.jsheet-open) .sboard:has(> .spane-right.is-open) { grid-template-columns: 292px minmax(0, 1fr) 330px; }
  /* column-gap is 0 so a closed column leaves no gutter; the gaps are margins. */
  .sched-app.spanes-on:not(.jsheet-open) #schedulerCalendar.sched-main { margin-left: var(--sp-3); }

  /* The ≤1280 Queue button opens the phone-style sheet; the strip replaces it. */
  .sched-app.spanes-on:not(.jsheet-open) .squeue-btn { display: none; }

  /* ── The strip: the rail folded to its icons ────────────────────────── */
  .sched-app.spanes-on:not(.jsheet-open):not(.spanes-pin) .spanes-strip {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
    min-height: 0; padding: var(--sp-2) 0; overflow-y: auto;
    background: var(--c-card); border: 1px solid var(--c-border); border-radius: 10px;
    box-shadow: var(--lift), var(--lift-edge);
  }
  .sched-app .spanes-strip button {
    position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0; cursor: pointer;
    border: 0; border-radius: 8px; background: none; color: var(--c-muted); font-size: 18px;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .sched-app .spanes-strip button:hover,
  .sched-app .spanes-strip button.is-on { background: var(--c-card-2); color: var(--c-text); }
  .sched-app .spanes-strip button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  /* A board job dragged over the To book icon: the same wash the tab gets. */
  .sched-app .spanes-strip button.sched-drop-active { background: var(--c-accent-soft); color: var(--c-on-wash-accent); }
  .sched-app .spanes-strip small {
    position: absolute; bottom: var(--sp-px); font-family: 'Inter', system-ui, sans-serif; font-size: 9px; font-weight: 600; color: var(--c-text-2);
  }
  .sched-app .spanes-n {
    position: absolute; top: var(--sp-px); right: var(--sp-px); display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 calc(var(--sp-1) - var(--sp-px));
    border-radius: 999px; background: var(--c-cta); color: var(--c-cta-fg);
    font-family: 'Inter', system-ui, sans-serif; font-size: 9.5px; font-weight: 700;
  }
  .sched-app .spanes-sep { flex: none; width: 24px; height: 1px; margin: var(--sp-1) 0; background: var(--c-border); }

  /* ── The rail ───────────────────────────────────────────────────────── */
  /* One rail at every laptop width: undo the ≤1280 bottom sheet. */
  .sched-app.spanes-on:not(.jsheet-open) .spane-left {
    position: static; inset: auto; width: auto; max-height: none; z-index: auto;
    transform: none; visibility: visible; transition: none;
    padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
    gap: var(--sp-3); overflow: hidden;
  }
  .sched-app.spanes-on:not(.jsheet-open) .spane-left .sinsp-sheet-head { display: none; }
  .sched-app.spanes-on:not(.jsheet-open) .spane-left > .cr-rail { flex: 1 1 auto; min-height: 0; }
  .sched-app.spanes-on:not(.jsheet-open) .spane-left .cr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

  /* Folded: out of the board. */
  .sched-app.spanes-on:not(.jsheet-open):not(.spanes-pin):not(.spanes-fly) .spane-left { display: none; }

  /* Out: floats over the board beside the strip; the board keeps its width. */
  .sched-app.spanes-on.spanes-fly:not(.jsheet-open):not(.spanes-pin) .spane-left {
    display: flex; position: absolute; z-index: 40;
    top: var(--sp-3); bottom: var(--sp-3); left: calc(var(--sp-12) + var(--sp-1) + var(--sp-3) * 2); width: 292px;
    padding: var(--sp-2); background: var(--c-bg);
    border: 1px solid var(--c-border-2); border-radius: 12px;
    box-shadow: 0 18px 48px -16px color-mix(in srgb, var(--c-ink-deep) 45%, transparent), var(--lift-edge);
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* One part at a time: the day (weather + briefing) or the rail's tabs. */
  .sched-app.spanes-on.spanes-fly:not(.jsheet-open):not(.spanes-pin)[data-spanes-show="day"] .spane-left > :not(.spanes-head, .cr-weather, .cr-brief) { display: none; }
  .sched-app.spanes-on.spanes-fly:not(.jsheet-open):not(.spanes-pin)[data-spanes-show="day"] .spane-left { bottom: auto; }
  .sched-app.spanes-on.spanes-fly:not(.jsheet-open):not(.spanes-pin)[data-spanes-show="rail"] .spane-left > :not(.spanes-head, .cr-rail) { display: none; }

  /* The rail's own head: pin it, fold it, close it. order: the rail's cards
     can be mounted after this was added (canon-rail.js inserts them after the
     sheet head), so DOM order can't be relied on to keep it on top. */
  .sched-app.spanes-on:not(.jsheet-open) .spanes-head {
    order: -1;
    display: flex; flex: none; align-items: center; justify-content: flex-end; gap: var(--sp-1);
    margin-bottom: calc(var(--sp-2) * -1);
  }

  /* ── The inspector: only there while a job is open ──────────────────── */
  .sched-app.spanes-on:not(.jsheet-open) .sboard:not(:has(> .spane-right.is-open)) > .spane-right { display: none; }
  .sched-app.spanes-on:not(.jsheet-open) .spane-right { position: relative; margin-left: var(--sp-3); }
  .sched-app.spanes-on:not(.jsheet-open) .spane-right .sinsp-sheet-head {
    display: block; position: absolute; top: var(--sp-2); right: var(--sp-2); z-index: 5;
    margin: 0; padding: 0; border: 0; background: none;
  }
  .sched-app.spanes-on:not(.jsheet-open) .spane-right .sinsp-grab { display: none; }
  .sched-app.spanes-on:not(.jsheet-open) .spane-right .sinsp-sheet-x {
    position: static; transform: none; width: 30px; height: 30px; border-radius: 6px; font-size: 17px;
  }
  .sched-app.spanes-on:not(.jsheet-open) .spane-right .sinsp-sheet-x:hover { background: var(--c-card-2); color: var(--c-text); }
  /* Room for the ✕ beside the status pill. */
  .sched-app.spanes-on:not(.jsheet-open) .spane-right .sched-insp-top { padding-right: var(--sp-10); }

  /* The panes arrive; the board's width changes at once (a width animation
     would re-fit the timeline on every frame — views.js). */
  @media (prefers-reduced-motion: no-preference) {
    .sched-app.spanes-on:not(.jsheet-open) .spane-right.is-open { animation: spanes-in-r .22s var(--ease-out, ease-out); }
    .sched-app.spanes-on.spanes-fly:not(.jsheet-open):not(.spanes-pin) .spane-left { animation: spanes-in-l .2s var(--ease-out, ease-out); }
  }
}
@keyframes spanes-in-r { from { opacity: 0; transform: translateX(12px); } }
@keyframes spanes-in-l { from { opacity: 0; transform: translateX(-10px); } }