/* ============================================================
   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; }
}

/* ---- Period picker -----------------------------------------------------
   The panel outgrew inline styles once it carried a preset ladder: it needs a
   media query to collapse to one column on a phone, and an inline style cannot
   hold one. Colours stay on the theme tokens, so each platform's picker is its
   own colour with no per-platform rule. */
.dp-pp { position: relative; margin-bottom: 16px; }

.dp-pp-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
  width: 580px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0, 0, 0, .10); padding: 16px;
}
.dp-pp-cols { display: grid; grid-template-columns: 1fr 250px; gap: 18px; }
.dp-pp-ladder { max-height: 344px; overflow-y: auto; padding-right: 6px; }

.dp-pp-group {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  font-weight: 700; color: var(--ink4); margin: 12px 0 5px;
}
.dp-pp-group:first-child { margin-top: 0; }

.dp-pp-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 6px 9px; border: 1px solid transparent; border-radius: 7px;
  background: none; cursor: pointer; font-family: inherit; text-align: left;
  color: var(--ink2); font-size: 12.5px; transition: background .1s, border-color .1s;
}
.dp-pp-opt:hover { background: var(--rule2); }
.dp-pp-opt.is-on {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--ink); font-weight: 600;
}
.dp-pp-opt .dp-pp-cov {
  font-size: 11px; color: var(--ink4); white-space: nowrap; font-weight: 400;
}

@media (max-width: 700px) {
  .dp-pp-panel { width: auto; left: 0; right: 0; }
  .dp-pp-cols { grid-template-columns: 1fr; gap: 12px; }
  .dp-pp-ladder { max-height: 210px; }
}

/* ---- Chart boxes -------------------------------------------------------
   Every chart sets maintainAspectRatio:false and used to sit in a div with a
   hardcoded pixel height, so the height stayed put while the width collapsed:
   at 390px a 1074x360 landscape chart became 276x360 portrait. 22 of 26
   charts across the product rendered taller than wide on a phone.

   Height now comes from a token, so a media query can replace it with a shape.
   Four steps replace the twelve ad-hoc values (200 220 260 280 300 320 360
   380 400 460) that had no rule behind them. */
.dp-chart,
.swg-chart,
.zp-chart { position: relative; height: var(--chart-h, 360px); }

.dp-chart--sm { --chart-h: 220px; }   /* sparkline-ish, paired cards */
.dp-chart--md { --chart-h: 280px; }   /* a supporting cut */
.dp-chart--lg { --chart-h: 360px; }   /* the board's main series */
.dp-chart--xl { --chart-h: 440px; }   /* a chart carrying many categories */

@media (max-width: 700px) {
  /* Shape, not height: the box follows the width down so a time series stays
     landscape. 4:3 at a 276px card is ~207px tall, which keeps the x labels
     drawable rather than forcing Chart.js to start dropping them. */
  .dp-chart,
  .swg-chart,
  .zp-chart { height: auto; aspect-ratio: 4 / 3; }

  /* A cell holding two drawings stacks them at this width, so it needs the
     height of two — 4:3 left each doughnut 130px wide and 207 tall. */
  .dp-chart-pair .dp-chart { aspect-ratio: 3 / 4; }
}

/* ---- Small multiples ---------------------------------------------------
   The style guide's answer to several measures that belong together: show
   them side by side rather than one at a time behind a tab bar. A reader
   comparing spend against sales should not have to remember the other chart.

   auto-fit means the row decides its own count: three across a full board,
   two on a narrow one, one on a phone — no breakpoint list to maintain.
   12px gap because the pack is explicit that panels are separated by a 12px
   gap and nothing else. */
.dp-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}
/* A cell is a third the width, so it takes the short rung: 350x260 stays
   landscape where the full-width 360 would not. */
.dp-chart-grid .dp-chart { --chart-h: 260px; }

.dp-chart-cap {
  font-family: var(--sans, inherit);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); font-weight: 600; margin-bottom: 8px;
}

/* ---- Chart zoom --------------------------------------------------------
   A small multiple is 350x260, which is where a crowded axis stops being
   readable. Clicking a cell opens the same chart at the size it needs. */
.dp-zoom-back {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 20, 36, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.dp-zoom-panel {
  background: var(--card); border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  width: min(1200px, 94vw); height: min(760px, 88vh);
  display: flex; flex-direction: column; overflow: hidden;
}
.dp-zoom-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule); flex-shrink: 0;
}
.dp-zoom-title {
  font-family: var(--serif, inherit); font-size: 16px;
  color: var(--ink); margin: 0; flex: 1; min-width: 0;
}
.dp-zoom-close {
  border: 1px solid var(--rule); background: var(--card); color: var(--ink2);
  border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 15px; line-height: 1; font-family: inherit; flex-shrink: 0;
}
.dp-zoom-close:hover { background: var(--rule2); color: var(--ink); }
/* Fills the panel rather than taking a rung off the height scale — the whole
   point is the room it gets. No aspect-ratio here, so the phone rule for
   .dp-chart does not apply. */
.dp-zoom-body { flex: 1; min-height: 0; padding: 16px 18px 18px; position: relative; }

/* the cell itself */
.dp-chart-zoomable { position: relative; cursor: zoom-in; }
.dp-chart-expand {
  position: absolute; top: 0; right: 0; z-index: 2;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink3);
  border-radius: 6px; width: 24px; height: 24px; cursor: zoom-in;
  font-size: 12px; line-height: 1; font-family: inherit;
  opacity: 0; transition: opacity .12s;
}
.dp-chart-zoomable:hover .dp-chart-expand,
.dp-chart-expand:focus-visible { opacity: 1; }
.dp-chart-expand:hover { background: var(--rule2); color: var(--ink); }
/* Touch has no hover, so the affordance has to be permanent there. */
@media (hover: none) {
  .dp-chart-expand { opacity: 1; }
}

/* ============================================================
   Pack components — the lede/takeaway box, signal cards, the
   "what it means" line, and the closing read.

   These four are the parts of the design pack's board that the
   dashboard did not have. Tokens come from the platform theme
   (.amz-theme carries Forest and Gold), with the pack's own hex
   as a fallback so the components still read correctly if they
   are used on a board that has no theme class yet.
   ============================================================ */

/* --- Lede and takeaway: one component, two names ------------
   Cream ground, gold hairline, 12px radius, Libre Caslon at
   15.5px on an 80 character measure, figures in deep gold.
   The size and the measure are the rule, not the face: this was
   once set at 13.5px across 88ch and was a display face doing
   body work. Gold as text ships at #7F6111 for 4.5:1 on cream. */
.dp-take {
  background: var(--mark-ground, #FAF6EC);
  border: 1px solid var(--mark-line, #EDE3CC);
  border-radius: 12px;
  padding: 15px 19px 17px;
  margin-bottom: 16px;
}
/* The label is a line of its own above the sentence, not run in beside it —
   measured off the style guide's own rendering of this box. */
.dp-take-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mark-deep, #7F6111);
  margin: 0 0 6px;
}
.dp-take-body {
  font-family: var(--serif);
  font-size: 15.5px; line-height: 1.55;
  max-width: 80ch; color: var(--ink2);
}
.dp-take-body strong { color: var(--mark-deep, #7F6111); font-weight: 700; }

/* --- Signal cards: exactly four, in a 4 / 2 / 1 ladder -------
   The column count has to divide the card count or the fourth
   orphans onto a row of its own — which is why this is a fixed
   ladder and not an auto-fit. State reads off the dot and the
   ground, never a left edge bar. */
.dp-sig-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 1280px) { .dp-sig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .dp-sig-grid { grid-template-columns: minmax(0, 1fr); } }
/* The card carries its state in the ground and the border, both a wash of the
   state's own colour. Values measured off the style guide's rendering: the
   ground is that colour at 4-7% and the border at 22-30%, which reads as
   state without competing with the figure. A card with nothing to say stays
   on paper. */
.dp-sig {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 8px; padding: 12px 14px 13px; min-width: 0;
}
.dp-sig--warn { background: rgba(201, 150, 47, .07);  border-color: rgba(201, 150, 47, .30); }
.dp-sig--bad  { background: rgba(185, 28, 28, .043);  border-color: rgba(185, 28, 28, .22); }
.dp-sig--good { background: rgba(4, 120, 87, .043);   border-color: rgba(4, 120, 87, .22); }
.dp-sig-head { display: flex; align-items: center; gap: 8px; }
.dp-sig-dot  { width: 8px; height: 8px; border-radius: 50%; flex: none; }
/* The title is set in the serif, as the guide sets it. */
.dp-sig-title { font-family: var(--serif); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dp-sig-body { font-size: 10.5px; line-height: 1.6; color: var(--ink-4, #475569); margin-top: 6px; }
.dp-sig-body strong { color: var(--ink); font-weight: 700; }
/* When the cards read a different source from the strip above them. */
.dp-sig-note { font-size: 11px; color: var(--ink3); margin: -20px 0 26px; }

/* --- "What it means", one computed line under a small multiple */
.dp-wim {
  background: var(--mark-ground, #FAF6EC);
  border-top: 1px solid var(--mark-line, #EDE3CC);
  font-size: 12px; line-height: 1.5; color: var(--ink2);
  padding: 8px 11px; border-radius: 0 0 8px 8px;
  margin-top: 8px;
}
.dp-wim strong { color: var(--mark-deep, #7F6111); font-weight: 700; }
.dp-zoom-body .dp-wim { margin-top: 12px; }

/* --- The closing read, and the basis line -------------------
   Six items in a grid, each a label, a figure, a qualifier and a
   sentence. It was a numbered single column; the reference lays
   them out side by side, which is what lets a reader compare the
   six figures instead of scrolling past them one at a time. */
/* Six items on a 3 / 2 / 1 ladder. Not auto-fit: at four across, six items
   leave two orphans on a row of their own, which is the same fault the guide
   names for signal cards. The column count has to divide the item count. */
.dp-read {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 26px;
  list-style: none;        /* an ordered list for the semantics, not the marks */
  margin: 0; padding: 0;
}
@media (max-width: 1100px) { .dp-read { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dp-read { grid-template-columns: minmax(0, 1fr); } }
.dp-read-item { min-width: 0; }
.dp-read-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
  margin-bottom: 4px;
}
.dp-read-fig {
  font-family: var(--serif); font-weight: 700;
  font-size: 26px; line-height: 1.1; letter-spacing: -.5px;
  color: var(--mark-deep, #7F6111);
}
/* The qualifier sits inside the figure, on its own line under it. */
.dp-read-fig span {
  display: block;
  font-family: var(--sans); font-weight: 400;
  font-size: 12px; letter-spacing: 0; line-height: 1.4;
  color: var(--ink3); margin-top: 3px;
}
.dp-read-say { font-size: 12.5px; line-height: 1.55; color: var(--ink2); margin: 6px 0 0; }

/* The read panel carries its own eyebrow and heading. */
.dp-ins-title {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: var(--ink); margin: 0 0 14px;
}

.dp-basis {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule);
  font-size: 11px; line-height: 1.6; color: var(--ink3);
}
.dp-basis b { color: var(--ink2); font-weight: 600; }

/* What the rows cannot carry, stated where the reader would look for it. */
.dp-notin {
  font-size: 12px; line-height: 1.55; color: var(--ink3);
  border-top: 1px solid var(--rule); padding-top: 10px; margin: -14px 0 28px;
}
.dp-notin b { color: var(--ink2); font-weight: 600; }

/* Segmented control — the page's metric switch.
   Pill labels name the cut in a word or two; they never repeat the panel
   title. Wraps rather than scrolls, so no option is hidden off an edge. */
.dp-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dp-seg button {
  font-family: var(--sans); font-size: 12px; line-height: 1;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink2);
  border: 1px solid var(--rule);
}
.dp-seg button:hover { background: var(--hover); }
.dp-seg button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.dp-seg button:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }

/* The headline row: two panels, and they get more height than a small
   multiple because they are the charts the board leads with. */
.dp-headline .dp-chart-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.dp-headline .dp-chart-grid .dp-chart { --chart-h: 340px; }

/* Section eyebrow — "Read this first", "More detail". Names what the reader
   is about to be given, above the section's own title. */
.dp-eyebrow {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--mark-deep, #7F6111); margin-bottom: 3px;
}

/* ============================================================
   THE AMAZON RAIL, measured against the prototype.

   Scoped to `.amz-theme` on purpose. RailNav is shared with Zepto, Swiggy,
   Blinkit and Nykaa, and each of those keeps its own palette and its own
   proportions — a forest rail on the Zepto board would be Amazon's identity
   on someone else's platform.

   The colour was already right: `.amz-theme` sets --accent-dark to #0B3D28,
   which is the pack's green-900. What differed was the geometry, and one
   rule the pack states outright.

   Wrapped in the same breakpoint the vertical rail lives above. Under 900px
   the rail turns into a horizontal strip, and a band wash with side margins
   on a horizontal strip is furniture for a shape that is no longer there.
   ============================================================ */
@media (min-width: 901px) {

.amz-theme .dp-rail {
  width: 248px; flex-basis: 248px;
  /* The app bar is gone on these pages, so the rail starts at the top of the
     viewport and runs its whole height. */
  top: 0;
  max-height: 100vh;
  padding-top: 0;
}

/* The wordmark replaces the platform-dot head: with no app bar above, this is
   where the product names itself. */
.amz-theme .dp-rail-mark {
  padding: 20px 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: 4px;
}
.amz-theme .dp-rail-mark img { height: 21px; width: auto; display: block; }

/* A flat group: cross-platform links above the bands, other platforms and the
   admin group below them. No wash — the wash marks the platform's own views,
   and giving it to everything would stop it marking anything. */
.amz-theme .dp-rail-group { padding: 10px 10px 2px; }
.amz-theme .dp-rail-group-label {
  padding: 0 8px 6px 10px;
  font-family: var(--sans);
  font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #7FBFA0; opacity: .85;
}

/* One dot per link, which is what the reference gives them. It names the
   destination — a platform's own mark on the platform links — and never the
   state: state is the ground, per the pack. */
.amz-theme .dp-rail-idot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(127, 191, 160, .85);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .08);
}
.amz-theme .dp-rail-label { flex: 1; min-width: 0; }
.amz-theme .dp-rail-link { justify-content: flex-start; gap: 10px; }

/* A destination that does not exist yet says so, rather than being left out. */
.amz-theme .dp-rail-link.is-soon {
  color: rgba(255, 255, 255, .42);
  cursor: default;
}
.amz-theme .dp-rail-link.is-soon .dp-rail-idot {
  background: rgba(255, 255, 255, .18); box-shadow: none;
}
.amz-theme .dp-rail-link.is-soon:hover { background: none; color: rgba(255, 255, 255, .42); }
.amz-theme .dp-rail-link.is-soon i {
  font-style: normal; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255, 255, 255, .34);
}

/* Each band sits on its own soft wash rather than being divided by a
   hairline: that is what groups the four bands in the reference, and it is
   what makes a band read as a container for its links. */
.amz-theme .dp-rail-band {
  background: rgba(251, 248, 239, .075);
  border-radius: 9px;
  padding: 8px 6px 9px;
  margin: 6px 10px 0;
}
.amz-theme .dp-rail-band + .dp-rail-band { border-top: 0; }

/* The band heading recedes: it is structure, not a fifth link. Small,
   letterspaced, in the muted green the pack pairs with forest — not the
   platform mark, which was making four headings compete with the content. */
.amz-theme .dp-rail-band-label {
  padding: 0 8px 5px 10px;
  margin-top: 6px;
  font-size: 8px;
  letter-spacing: 1.44px;
  color: rgba(127, 182, 155, .72);
}
.amz-theme .dp-rail-band-label:hover { color: #FFFFFF; }

/* State reads off the ground, never a left edge bar. The pack says so in as
   many words, and the rail was carrying one. */
.amz-theme .dp-rail-link {
  padding: 7px 10px 7px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, .86);
  border-left: 0;
  border-radius: 7px;
}
.amz-theme .dp-rail-link:hover { background: rgba(255, 255, 255, .08); color: #FFFFFF; }
.amz-theme .dp-rail-link.is-active {
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  font-weight: 700;
  border-left-color: transparent;
}

/* The report basis lives at the foot of the rail: it is chrome, not content,
   and every board would otherwise repeat it in its own header. */
.amz-theme .dp-rail-meta {
  margin-top: 18px;
  padding: 16px 18px 4px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex; flex-direction: column; gap: 0;
}
.amz-theme .dp-rail-meta span {
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}
.amz-theme .dp-rail-meta span:first-child { padding-top: 0; border-top: 0; }
.amz-theme .dp-rail-meta i {
  font-style: normal;
  font-size: 8px; letter-spacing: 1.28px; text-transform: uppercase;
  color: #7FBFA0; opacity: .65;
}
.amz-theme .dp-rail-meta b {
  font-family: var(--serif);
  font-weight: 700; font-size: 11.5px; letter-spacing: -.1px; line-height: 1.25;
  color: rgba(255, 255, 255, .9);
}
}

/* ============================================================
   THE BLINKIT RAIL. Same forest rail as Amazon (the shell carries
   `amz-theme`); the platform's own bands wear Blinkit yellow rather than the
   cream wash, so the platform you are on is legible from the rail alone.
   Values are the prototype's `#bkGrp` rules.
   ============================================================ */
@media (min-width: 901px) {
.amz-theme.bk-board .dp-rail-band {
  background: rgba(255, 225, 65, .085);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 65, .10);
}
.amz-theme.bk-board .dp-rail-band[data-band="0"] .dp-rail-band-label { color: rgba(248, 203, 70, .78); }
.amz-theme.bk-board .dp-rail-band[data-band="1"] .dp-rail-band-label { color: rgba(248, 203, 70, .66); }
.amz-theme.bk-board .dp-rail-band[data-band="2"] .dp-rail-band-label { color: rgba(248, 203, 70, .60); }
.amz-theme.bk-board .dp-rail-band[data-band="3"] .dp-rail-band-label { color: rgba(248, 203, 70, .54); }
.amz-theme.bk-board .dp-rail-band-label:hover { color: #FFFFFF; }
}

/* The rail-only boards draw their own `.pulse .main` padding; the rail-main
   gutter is set so each board's -20/-28/-60 margin cancels it exactly, which
   puts the board 36px off the rail as the prototype does. */
@media (min-width: 901px) {
.amz-theme .dp-rail-main, .zp-board .dp-rail-main, .sw-board .dp-rail-main { padding: 20px 28px 60px 28px; }
}

/* The prototype's rail is transparent and its forest column is painted on the
   body, so the dark ground runs the full height of a long page rather than
   stopping where the sticky rail ends. The rail-only shell paints it instead. */
@media (min-width: 901px) {
.amz-theme.dp-shell-rail, .zp-board.dp-shell-rail, .sw-board.dp-shell-rail {
  background: linear-gradient(to right, #0B3D28 0, #0B3D28 248px, #F4F5F8 248px, #F4F5F8 100%);
}
}
@media (max-width: 900px) {
.amz-theme .pulse .rail, .zp-board .pulse .rail, .sw-board .pulse .rail { background: #0B3D28; position: static; width: auto; height: auto; }
}

/* THE ZEPTO RAIL. Forest, like the others; Zepto's own bands wear lilac, the
   way Blinkit's wear yellow, so the platform is legible from the rail alone. */
.pulse #zpGrp .sgrp.trading, .pulse #zpGrp .sgrp.catalogue,
.pulse #zpGrp .sgrp.ads, .pulse #zpGrp .sgrp.planning {
  background: rgba(201, 166, 255, .085); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, .12);
}
.pulse #zpGrp .gl.glbtn { color: #C9A6FF; }
.pulse #zpGrp .sgrp.trading .gsl { color: rgba(201, 166, 255, .80); }
.pulse #zpGrp .sgrp.catalogue .gsl { color: rgba(201, 166, 255, .70); }
.pulse #zpGrp .sgrp.ads .gsl { color: rgba(201, 166, 255, .62); }
.pulse #zpGrp .sgrp.planning .gsl { color: rgba(201, 166, 255, .56); }
.pulse #zpGrp .sgrp .gsl:hover { color: #fff; }

/* Rail-only boards have no app bar above them, so a sticky jump bar that
   cleared the bar's 64px now floats over the page head instead. */
.zp-board .dp-jumpbar, .sw-board .dp-jumpbar, .amz-theme .dp-jumpbar { top: 0 !important; }

/* The product table carries twelve columns; without a floor the name column
   is the one that gives, and a product wraps a word to a line. */
.pulse #pdTable td.nm, .pulse #pdTable th:first-child { min-width: 250px; }

/* THE SWIGGY RAIL. Forest like the others; Swiggy's own bands wear orange. */
.pulse #swGrp .sgrp.trading, .pulse #swGrp .sgrp.catalogue,
.pulse #swGrp .sgrp.ads, .pulse #swGrp .sgrp.planning {
  background: rgba(252, 128, 25, .085); box-shadow: inset 0 0 0 1px rgba(252, 128, 25, .12);
}
.pulse #swGrp .gl.glbtn { color: #FDBA74; }
.pulse #swGrp .sgrp.trading .gsl { color: rgba(253, 186, 116, .82); }
.pulse #swGrp .sgrp.catalogue .gsl { color: rgba(253, 186, 116, .72); }
.pulse #swGrp .sgrp.ads .gsl { color: rgba(253, 186, 116, .64); }
.pulse #swGrp .sgrp.planning .gsl { color: rgba(253, 186, 116, .58); }
.pulse #swGrp .sgrp .gsl:hover { color: #fff; }

/* THE FLIPKART RAIL. Forest like the others; Flipkart's own bands wear its
   blue, the way Blinkit's wear yellow, so the platform is legible from the rail. */
.pulse #fkGrp .sgrp.trading, .pulse #fkGrp .sgrp.catalogue,
.pulse #fkGrp .sgrp.ads, .pulse #fkGrp .sgrp.planning {
  background: rgba(40, 116, 240, .10); box-shadow: inset 0 0 0 1px rgba(40, 116, 240, .16);
}
.pulse #fkGrp .gl.glbtn { color: #A8C7FA; }
.pulse #fkGrp .sgrp.trading .gsl { color: rgba(168, 199, 250, .85); }
.pulse #fkGrp .sgrp.catalogue .gsl { color: rgba(168, 199, 250, .75); }
.pulse #fkGrp .sgrp.ads .gsl { color: rgba(168, 199, 250, .67); }
.pulse #fkGrp .sgrp.planning .gsl { color: rgba(168, 199, 250, .60); }
.pulse #fkGrp .sgrp .gsl:hover { color: #fff; }

/* THE NYKAA RAIL. Forest like the others; Nykaa's own bands wear its pink. */
.pulse #nkGrp .sgrp.trading, .pulse #nkGrp .sgrp.catalogue,
.pulse #nkGrp .sgrp.ads, .pulse #nkGrp .sgrp.planning {
  background: rgba(252, 39, 121, .085); box-shadow: inset 0 0 0 1px rgba(252, 39, 121, .14);
}
.pulse #nkGrp .gl.glbtn { color: #F9C3D9; }
.pulse #nkGrp .sgrp.trading .gsl { color: rgba(249, 195, 217, .85); }
.pulse #nkGrp .sgrp.catalogue .gsl { color: rgba(249, 195, 217, .75); }
.pulse #nkGrp .sgrp.ads .gsl { color: rgba(249, 195, 217, .67); }
.pulse #nkGrp .sgrp.planning .gsl { color: rgba(249, 195, 217, .60); }
.pulse #nkGrp .sgrp .gsl:hover { color: #fff; }

/* THE CROSS-PLATFORM RAIL. The boards above a single platform wear the pack's
   gold on their own bands, since no platform owns them. */
.pulse #xpGrp .sgrp.trading, .pulse #xpGrp .sgrp.planning {
  background: rgba(201, 150, 47, .10); box-shadow: inset 0 0 0 1px rgba(201, 150, 47, .16);
}
.pulse #xpGrp .gl.glbtn { color: #EDE3CC; }
.pulse #xpGrp .sgrp.trading .gsl { color: rgba(237, 227, 204, .85); }
.pulse #xpGrp .sgrp.planning .gsl { color: rgba(237, 227, 204, .70); }
.pulse #xpGrp .sgrp .gsl:hover { color: #fff; }
@media (min-width: 901px) { .xp-board .dp-rail-main { padding: 20px 28px 60px 28px; } }
@media (min-width: 901px) {
.xp-board.dp-shell-rail {
  background: linear-gradient(to right, #0B3D28 0, #0B3D28 248px, #F4F5F8 248px, #F4F5F8 100%);
}
}

/* The product search-select on Product compare: the keyboard cursor needs a
   ground of its own, since `.on` is reserved for the chosen row. */
.pulse .pop .pset button.cur { background: var(--ground); color: var(--ink-1); }
.pulse .pop .pset button small { color: var(--ink-5); font-size: 10px; margin-left: 6px; }

/* The product picker carries whole listing titles — 200 characters is normal
   on Amazon — so the pill clips its label and the popup wraps instead of
   pushing the board sideways. */
.pulse .picker.prodpick { max-width: 100%; min-width: 0; }
.pulse .picker.prodpick .pill { max-width: min(460px, 100%); }
.pulse .picker.prodpick .pill .plab {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pulse .picker.prodpick .pop { min-width: min(460px, calc(100vw - 48px)); max-width: calc(100vw - 48px); }
.pulse .picker.prodpick .pop .pcol { min-width: 0; }
.pulse .picker.prodpick .pop .pset button { white-space: normal; line-height: 1.35; }

/* LONG TEXT IN A TABLE COLUMN. A product title runs to 130 characters on
   Zepto and a warehouse reads "Mumbai M12 - Feeder Warehouse", so without a
   cap one name sets the table's width and pushes the figures out of sight.
   `DTab long={[i]}` marks those columns: the cell caps at --txtw, wraps, and
   clamps to two lines, which holds nearly every name in full. The whole
   string stays in the DOM, so it shows on hover and exports to Excel intact.
   Specificity has to clear pulse.css's `table.dtab td{white-space:nowrap}`
   and `.dtab.compact td.nm{white-space:normal}`, which load after this file. */
.pulse table.dtab td.txt, .pulse .pnl table.dtab td.txt {
  white-space: normal; text-align: left; max-width: var(--txtw, 34ch);
}
.pulse table.dtab td.txt .tx, .pulse .pnl table.dtab td.txt .tx {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere; line-height: 1.35;
}
/* a header over a text column reads from the left, like the cells under it */
.pulse table.dtab th.txth, .pulse .pnl table.dtab th.txth,
.pulse .pnl table.dtab.exec thead th.txth, .pulse .pnl table.dtab.v1 thead th.txth {
  text-align: left;
}
/* the floor matters as much as the cap: on a narrow screen the table layout
   squeezes a wrapping column down to a few characters, so hold a readable
   minimum and let .tscroll scroll the table inside its panel instead. */
.pulse table.dtab td.txt, .pulse .pnl table.dtab td.txt { min-width: 15ch; }
@media (max-width: 720px) {
  .pulse table.dtab td.txt, .pulse .pnl table.dtab td.txt { max-width: 22ch; }
}

/* THE MORE ROW ON A RAW TABLE. The prototype's `.morerow` centres a single
   button; these carry two plus the note about what the export will take, so
   they need a gap and permission to wrap on a narrow board. */
.pulse .morerow { gap: 10px; flex-wrap: wrap; align-items: center; }
.pulse .morerow .pkn { flex: 0 1 auto; }