/* Forced-planning panel — the RIGHT-slot sidebar that appears while the clock
   sits outside every block on today's grid.

   ── Why it moved to the right (2026-08-10) ────────────────────────────
   It was on the left, and the left is where MONDAY is. A panel that opens over
   today's column to tell you to block time in today's column is asking for the
   one thing it is covering. Every other side panel in this app docks right
   against the rail, so that is where this one belongs too — both because it is
   the convention and because the far edge of the week is the part of the grid
   you are least likely to be dragging on.

   Geometry is `.chat-panel`'s, restated rather than reused: same dock, same
   rail offsets, same behind-the-strip z-index. Not the same class, because
   these are separate features with separate off switches and sharing one would
   mean a tweak to the chat drawer silently resizing the thing that gates the
   app. Same reason the width is its own variable rather than a reuse of
   --reflection-blocker-width.

   The reflection blocker joined this edge on 2026-08-14, and the two still
   close each other — over `delta-sidebar-panel-open` now, the contract every
   panel on this dock shares, rather than the left-slot handshake that outlived
   the left slot. They are one feature with one pair of switches, and only one
   of them should ever be asking a question. */

:root {
  --forced-planning-width: min(360px, 90vw);
}

/* .app-shell already transitions padding-left/right (today-calendar-sidebar.css). */
.app-shell-forced-planning-open {
  padding-right: var(--forced-planning-width);
}

.forced-planning-panel {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--forced-planning-width);
  overflow: hidden;
  color: var(--text-primary);
  background: var(--card);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateX(0);
  transition: transform 180ms ease;
}

.forced-planning-panel-hidden {
  transform: translateX(100%);
  pointer-events: none;
}

/* ── Room for the panel rail ───────────────────────────────────────────────
   The four things styles/panel-rail.css moves together for `.chat-panel`, moved
   together here for the same reasons and with the same numbers: dock inside the
   strip, sit BEHIND it rather than sliding across the icons, pad the shell for
   both, and slide fully clear of the strip when hidden rather than parking
   behind it. Scoped to `[data-panel-rail='on']` because on a phone there is no
   strip and the rules above are already right. */
html[data-panel-rail='on'] .forced-planning-panel {
  right: calc(var(--panel-rail-width) + var(--panel-rail-outboard));
  z-index: 40;
}

html[data-panel-rail='on'] .forced-planning-panel-hidden {
  transform: translateX(calc(100% + var(--panel-rail-width) + var(--panel-rail-outboard)));
}

html[data-panel-rail='on'] .app-shell.app-shell-forced-planning-open {
  padding-right: calc(
    var(--forced-planning-width) + var(--panel-rail-width) + var(--panel-rail-outboard)
  );
}

/* Both drawers open at once: pad for the WIDER one. Two rules each setting
   padding-right would otherwise resolve by source order, and the loser is a
   panel sitting on top of content the shell thinks it has already cleared. */
.app-shell-forced-planning-open.app-shell-chat-open {
  padding-right: max(var(--forced-planning-width), var(--chat-panel-width));
}

html[data-panel-rail='on'] .app-shell.app-shell-forced-planning-open.app-shell-chat-open {
  padding-right: calc(
    max(var(--forced-planning-width), var(--chat-panel-width))
    + var(--panel-rail-width) + var(--panel-rail-outboard)
  );
}

.forced-planning-topbar-button[hidden] {
  display: none;
}

.forced-planning-topbar-button {
  color: var(--accent);
  border-color: var(--accent);
}

.forced-planning-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.forced-planning-title {
  flex: 1 1 auto;
  font-weight: 600;
}

.forced-planning-close {
  padding: 0 6px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: 0;
}

.forced-planning-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}

.forced-planning-when {
  margin: 0;
  font-weight: 600;
}

.forced-planning-ask,
.forced-planning-hint {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.forced-planning-decisions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.forced-planning-decision {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.forced-planning-decision:has(input:checked) {
  border-color: var(--accent);
}

.forced-planning-text {
  /* Grows into whatever height is left rather than scrolling inside a fixed
     box: this is the only field on the screen and the screen exists for it. */
  flex: 1 1 auto;
  min-height: 120px;
  padding: 8px;
  font: inherit;
  color: inherit;
  resize: vertical;
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.forced-planning-count {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: right;
}

.forced-planning-count.is-met {
  color: var(--accent);
}

.forced-planning-message {
  margin: 0;
  font-size: 12px;
  color: var(--danger, #d9534f);
}

.forced-planning-message:empty {
  display: none;
}

.forced-planning-submit {
  padding: 8px 12px;
  font: inherit;
  color: #0b0f16;
  cursor: pointer;
  background: var(--accent);
  border: 0;
  border-radius: 6px;
}

.forced-planning-submit:disabled {
  cursor: default;
  opacity: 0.5;
}

/* A refused tab click blinks the panel rather than raising a dialog — the point
   is to put the unplanned hour in front of the user, not to make them read a
   second thing before they can get back to the first. Restarting the animation
   needs the class off for a frame; forced_planning_gate.js does that. */
@keyframes forced-planning-flash {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 3px var(--accent); }
}

.forced-planning-flash {
  animation: forced-planning-flash 420ms ease 0s 3;
}

@media (prefers-reduced-motion: reduce) {
  .forced-planning-panel { transition: none; }
  .forced-planning-flash { animation: none; }
}