/* THE RAIL — master + contextual panel for the host folder. The master
   surface keeps ~two-thirds; context slides into a paper panel on the
   right with a back chevron. Turbo Frame target: id="rail". Drill-ins
   dim the master. Replaces the modal habit inside host surfaces.
   From plans/gather-design-evolution.md §1. */

.g-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
.g-split.has-rail { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.g-split.has-rail .g-master { opacity: 0.92; }

.g-rail {
  background: var(--paper);
  background-image: var(--paper-texture);
  border: 1px solid var(--paper-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-paper);
  padding: 18px 20px;
  align-self: start;
  position: sticky; top: 16px;
}
.g-rail-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-faint); font-size: 13px; text-decoration: none;
  margin-bottom: 12px;
}
.g-rail-back::before { content: "‹"; font-size: 16px; }
.g-rail-title { font-weight: var(--weight-bold); color: var(--ink); font-size: 18px; margin-bottom: 10px; }

@media (max-width: 900px) {
  .g-split.has-rail { grid-template-columns: 1fr; }
  .g-rail { position: static; }
}

/* ── THE FOLDER RAIL ─────────────────────────────────────────────
   The host folder's drill-in panel. #folder-rail is a Turbo Frame
   sibling of the master; when a card is present, :has() opens the
   split and dims the master. No JS owns any of this state — the
   server renders the card (deep links included) or it doesn't. */

/* The rail FLOATS over the full-width master (Neal, Jul 16 night —
   opening an editor must not collapse the page into columns). */
.folder-split { display: block; position: relative; }
.folder-split #folder-rail .folder-rail-card {
  /* FIXED, not absolute (Jul 17): the editor opens where you ARE, not
     at the top of a page you've scrolled past. */
  position: fixed;
  top: 88px;
  right: max(24px, calc((100vw - 1240px) / 2));
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  z-index: 6;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 16px 40px rgba(0, 0, 0, 0.28),
    0 32px 72px rgba(0, 0, 0, 0.16);
}
.folder-split #folder-rail .folder-rail-card--wide { width: min(560px, calc(100vw - 48px)); }

/* Drill-ins dim the master. It stays interactive — clicking another
   row swaps the rail; hovering lifts the fog a little. */
.folder-master { transition: opacity 0.18s ease; }
.folder-split:has(.folder-rail-card) .folder-master { opacity: 0.45; }
.folder-split:has(.folder-rail-card) .folder-master:hover { opacity: 0.7; }

/* The board stretches to make room for the rail. */
.host-shell .stay-board:has(.folder-rail-card) { max-width: 1260px; }

.folder-rail-card {
  position: sticky;
  top: 76px;                       /* clears the fixed nav */
  max-height: calc(100vh - 96px);  /* the rail scrolls itself */
  overflow-y: auto;
  padding: 24px 26px 26px;
}
/* STICKY, not absolute (Aug 19).
   The card scrolls its own content (overflow-y: auto above), and an
   absolutely-positioned ✕ scrolls away with it. On a long form — the
   basics editor, which carries title, dates, co-hosts, a photo and the
   whole recent-photo grid — you scroll to the field you came for and the
   only way out is off the top of the panel. Neal hit exactly that while
   removing a co-host on production and had no way to close.
   Sticky pins it to the top of the SCROLL CONTAINER instead, so it is
   where you expect it no matter how far down the form you are. */
.folder-rail-close {
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  /* Pulled into the card's own padding so it sits in the corner rather
     than indenting the first line of content beside it. */
  margin: -8px -6px 0 0;
  color: var(--ink-faint);
  font-size: 15px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 999px;
  text-decoration: none;
  /* Content scrolls UNDER it, so it needs a ground of its own or the
     text passes through the glyph. */
  background: var(--paper);
  box-shadow: 0 0 10px 6px var(--paper);
}
.folder-rail-close:hover { color: var(--ink); text-decoration: none; }

.folder-rail-alert {
  background: color-mix(in srgb, var(--required) 9%, var(--paper));
  color: var(--required);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13px;
  margin: 0 0 14px;
}

/* ── Ride booking (the writable Shuttle Board) ─────────────────── */
.ride-riders {
  border: 1px solid var(--hover-edge);
  border-radius: var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
}
.ride-rider-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
}
.ride-rider-row + .ride-rider-row { border-top: 1px solid var(--hover-edge); }
.ride-rider-row:hover { background: var(--hover-wash); }
.ride-rider-row input { margin-top: 3px; }
.ride-rider-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ride-rider-name { font-weight: var(--weight-semibold); font-size: 14px; color: var(--ink); }
.ride-rider-line { font-size: 12px; color: var(--ink-soft); }
.ride-times input { min-width: 0; }
.ride-locked-check {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 13px; color: var(--ink-soft); cursor: pointer;
}
.ride-locked-check input[type="checkbox"] { margin-top: 2px; }

/* Under 900px the drill-in takes the page — the master steps aside
   the way a phone-width detail view should. */
@media (max-width: 900px) {
  .folder-split:has(.folder-rail-card),
  .folder-split:has(.folder-rail-card--wide) { grid-template-columns: 1fr; }
  .folder-split:has(.folder-rail-card) .folder-master { display: none; }
  .folder-rail-card { position: static; max-height: none; }
}

/* Toasts — three words, green check, bottom-left, one at a time. */
.g-toast {
  position: fixed; left: 20px; bottom: 20px; z-index: 200;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--paper-edge); border-radius: 999px;
  padding: 9px 16px 9px 12px; font-size: 14px; font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-paper);
  display: flex; align-items: center; gap: 8px;
  animation: g-toast-in .25s ease, g-toast-out .3s ease 2.7s forwards;
}
.g-toast::before { content: "✓"; color: var(--paid); font-weight: 700; }

/* The alert — the toast's opposite number, for the things that went wrong.
   Bottom-left like the toast so the eye already knows where to look, but it
   stays put: a failure has to be readable, and a flash is consumed on read so
   it only ever shows once. Warm clay, never a saturated alarm red. */
.g-alert {
  position: fixed; left: 20px; bottom: 20px; z-index: 200;
  max-width: min(420px, calc(100vw - 40px));
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--pink); border-left-width: 3px;
  border-radius: var(--radius-md);
  padding: 12px 16px; font-size: 14.5px; line-height: 1.45;
  box-shadow: var(--shadow-paper);
  display: flex; align-items: flex-start; gap: 10px;
  animation: g-toast-in .25s ease;
}
.g-alert-mark {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; background: var(--pink); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
}
.g-alert-body { margin: 0; }
/* The same alert, sitting in the page rather than fixed to the corner — for
   a state that belongs to the content (a dead welcome link) rather than to
   the last thing the person did. */
.g-alert--inline {
  position: static; max-width: 46ch;
  margin: 0 auto 22px; text-align: left;
  animation: none;
}
@media (max-width: 600px) {
  .g-alert { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
@keyframes g-toast-in { from { transform: translateY(8px); opacity: 0; } }
@keyframes g-toast-out { to { transform: translateY(8px); opacity: 0; } }

/* ── THE MODAL SCRIM (Aug 19) ────────────────────────────────────────
   Neal, on the co-host editor: "it's very natural for people like me to
   assume that when I'm editing that setting somehow it would click me
   out. Or maybe it should be a pop-up. It overlays the screen but when
   you click away from it, it can click out of it."

   Before this the page behind was dimmed with opacity but stayed live,
   so clicking away closed the panel over empty space and swapped it over
   a link — the same gesture doing two things depending on what happened
   to be underneath. The scrim makes the page genuinely unreachable, so
   there is one rule: outside closes. */
.folder-rail-scrim {
  position: fixed;
  inset: 0;
  z-index: 5;                        /* under the card (6), over everything else */
  background: rgba(0, 0, 0, 0.28);
  animation: rail-scrim-in 0.14s ease-out;
}
@keyframes rail-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .folder-rail-scrim { animation: none; } }

/* The scrim carries the dimming now, so the master must not double-dim —
   two layers of fog made the page behind unreadable rather than quiet. */
.folder-split:has(.folder-rail-card) .folder-master,
.folder-split:has(.folder-rail-card) .folder-master:hover { opacity: 1; }

/* SAVE, ALWAYS IN VIEW.
   It was the last row of a 186-line form inside a scrolling panel, so from
   the field you came to edit it was two panel-heights below. Pinned to the
   foot of the card, it is the one thing you can always reach. */
.host-modal-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 20px;
  padding: 14px 0 4px;
  background: var(--paper);
  box-shadow: 0 -10px 14px -6px var(--paper);
}

/* The co-host menu's rows are buttons now — picking a name IS the save —
   so they need to look like the list rows they replaced, not like buttons. */
.host-picker-option-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.host-picker-option-btn:hover { background: var(--hover-wash); }