/* ============================================================
   Shell structure — rail navigation and jump bar.

   Platform-agnostic: every colour here comes from a token, so a platform
   picks up its own palette from platform-themes.css. Geometry is shared on
   purpose — the product should feel like one system even though each platform
   keeps its own colours.
   ============================================================ */

/* ============================================================
   Rail navigation (nav="rail")
   Base geometry is platform-agnostic and lives here only because Amazon is
   the only opted-in platform today; move it to datum.css if a second one
   adopts it. Colour comes from the tokens, so the rail is forest inside
   .amz-theme and whatever the platform's accent is elsewhere.
   ============================================================ */

.dp-shell-rail { display: flex; align-items: flex-start; gap: 0; }

.dp-rail {
  width: 236px;
  flex: 0 0 236px;
  position: sticky;
  top: 64px;                 /* clears the global app header */
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: var(--accent-dark);
  padding: 4px 0 24px;
  border-right: 1px solid rgba(0, 0, 0, .12);
}

.dp-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 18px 14px;
  font-family: var(--serif);
  font-size: 15px;
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 6px;
}
.dp-rail-dot { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }

.dp-rail-band { padding: 6px 0; }
.dp-rail-band + .dp-rail-band { border-top: 1px solid rgba(255, 255, 255, .07); }

/* The band heading is a real <button>: it collapses its group. Styled to sit
   flush with the rail rather than look like a form control. */
.dp-rail-band-label {
  display: flex; align-items: center; gap: 7px;
  width: 100%;
  padding: 10px 18px 6px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  /* The platform's mark names the band. It is the only place the mark
     appears in the rail, so the headings read as structure rather than as
     four more links. */
  color: var(--mark);
}
.dp-rail-band-label:hover { color: #FFFFFF; }
.dp-rail-band-label:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }

.dp-rail-caret {
  display: inline-block; font-size: 9px; line-height: 1;
  transition: transform .15s;
}
.dp-rail-caret.is-open { transform: rotate(90deg); }

/* Collapsed bands show how many links are folded away, so nothing feels lost. */
.dp-rail-count {
  margin-left: auto;
  font-size: 9.5px; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75);
}

@media (prefers-reduced-motion: reduce) { .dp-rail-caret { transition: none; } }

.dp-rail-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 18px;
  /* The rail is a control, not a heading — it stays in the sans face. */
  font-family: var(--sans);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.dp-rail-link:hover { background: rgba(255, 255, 255, .07); color: #FFFFFF; }
.dp-rail-link.is-active {
  background: rgba(255, 255, 255, .11);
  color: #FFFFFF;
  border-left-color: var(--mark);
}
.dp-rail-link:focus-visible { outline: 2px solid var(--mark); outline-offset: -2px; }

.dp-rail-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 8px;
  background: rgba(255, 255, 255, .16); color: #FFFFFF;
  text-transform: uppercase; letter-spacing: .4px;
}

.dp-rail-main { flex: 1; min-width: 0; padding: 20px 4px 48px 20px; }

/* Narrow screens: the rail lies down above the content rather than eating
   half the width. Bands stay, so the grouping survives. */
@media (max-width: 900px) {
  /* Column layout: the main axis is now vertical, so `min-width: 0` on the
     pane no longer constrains its WIDTH — a wide table inside would stretch
     the pane, and with it the rail, the jump bar and the page. Both children
     are pinned to the container width explicitly, and anything wider has to
     scroll inside its own box. */
  .dp-shell-rail { flex-direction: column; max-width: 100%; }
  .dp-shell-rail > * { max-width: 100%; min-width: 0; }
  .dp-rail-main { width: 100%; }
  .dp-rail {
    width: auto; flex: none; position: static; max-height: none;
    display: flex; flex-wrap: wrap; gap: 4px 0;
    overflow-x: auto;
    border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .12);
    padding-bottom: 10px;
  }
  .dp-rail-head { width: 100%; }
  .dp-rail-band { padding: 4px 8px; }
  .dp-rail-band + .dp-rail-band { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .07); }
  .dp-rail-link { padding: 6px 12px; border-left: 0; border-bottom: 2px solid transparent; }
  .dp-rail-link.is-active { border-left-color: transparent; border-bottom-color: var(--mark); }
  .dp-rail-main { padding: 16px 4px 40px; }
}

/* ============================================================
   Jump bar (SectionSidebar layout="bar")
   Sits under the hero, above the board. Replaces the second left column,
   which competed with the platform rail for the same edge.
   ============================================================ */
.dp-jumpbar {
  position: sticky;
  z-index: 40;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  margin: 0 0 18px;
  padding: 7px 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  /* The board scrolls under this, so it needs to be opaque, not translucent. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.dp-jumpbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }

.dp-jumpbar-sep {
  width: 1px; height: 18px; margin: 0 8px;
  background: var(--rule);
}

.dp-jumpbar-label {
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--mark-deep);
  padding: 0 8px 0 2px;
}

.dp-jumpbar-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  border: 0; border-radius: 5px;
  background: transparent;
  font-family: var(--sans); font-size: 12px;
  color: var(--ink2);
  cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.dp-jumpbar-link:hover { background: var(--accent-bg); color: var(--ink); }
.dp-jumpbar-link.is-active {
  background: var(--accent, #16583A);
  color: #FFFFFF;
}
.dp-jumpbar-link:focus-visible { outline: 2px solid var(--mark); outline-offset: 1px; }

/* On a narrow screen the bar scrolls sideways in its own track rather than
   growing to five rows and pushing the board off the first screen. */
@media (max-width: 700px) {
  .dp-jumpbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; max-width: 100%; }
  .dp-jumpbar-group { flex-wrap: nowrap; }
}