/* dash-sim.v1.css -- the live dashboard simulation inside the #interface
 * tablet (2026-09-26), paired with dash-sim.v1.js and the bundle from
 * sections71.dashsim.js on.
 *
 * WHAT THIS IS. The tablet used to hold a screenshot of the member dashboard
 * (img/interface25*.png). It now holds a small copy of the dashboard itself,
 * drawn by dash-sim.v1.js out of the product's own pieces: the rail, the
 * toolbar with its layout switch and lane pills, the three feed layouts
 * (Stream, Grid, Columns), the grid tile and the stream card as feed.js draws
 * them, the Buy pill with its throbber and its Bought verdict, and the right
 * column (the connected account, Purchases, Chat). Items land in the feed while the
 * section is on screen; Light / Dark and Stream / Grid / Columns can be
 * switched from the pills under the tablet or from the controls inside it.
 *
 * THE LOOK IS THE APP'S. Every value below was read off the real dashboard
 * (templates/jp + static/jp, rendered at 1440x800 in the "Clean minimalist"
 * scheme that every member gets by default): the tokens of theme.css +
 * theme-flat.css, the rims and lifts of skin.css, the tile of refine
 * 2026-09, the Buy pill of buybtn-shimmer.css. Nothing here is a landing-page
 * invention; where the two disagree the dashboard wins.
 *
 * SIZE. The dashboard is laid out at a fixed 1440x800 (.jd) and fitted into
 * the tablet's screen with CSS `zoom` (transform: scale where zoom is not
 * supported), so it is the same picture at every viewport, exactly as the
 * screenshot was. Under 1100px it becomes the same horizontally scrollable
 * window the screenshot was (1100px wide); under 769px the phones keep the
 * static phone screenshot and the simulation is never built.
 *
 * COST. Motion is transform and opacity only (arrivals and the FLIP moves are
 * Web Animations; the throbber and the live dot are CSS keyframes gated on
 * .is-live so they run only while the section is on screen). Photos are the
 * hero backdrop's own files (img/hero/*-t.webp), already in the cache by the
 * time this section is reached.
 *
 * To remove: delete this <link> and the dash-sim.v1.js <script> from
 * index.html and point the bundle tag back at sections70 (the screenshot
 * tablet). */

/* ---------------------------------------------------------------- host */
/* The host is what React renders: <div class="jp-dash" data-theme data-lay>
   inside .ss-screen.ss-live. The screen keeps the screenshot's picture as a
   sibling for the phone rules; on anything wider than a phone the picture is
   never drawn (and, being loading="lazy", never fetched). */
.ss-screen.ss-live { aspect-ratio: 1440 / 800; }
.ss-screen.ss-live > .jp-dash {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #FAFAFB;
  flex: 1 1 auto;
}
.ss-screen.ss-live > .jp-dash[data-theme="dark"] { background: #111112; }
@media (min-width: 769px) {
  .ss-screen.ss-live > picture { display: none; }
}
@media (max-width: 1099px) {
  /* The scroll window the screenshot had: 1100px wide, swipe to see the rest. */
  .ss-screen.ss-live { aspect-ratio: auto; }
  .ss-screen.ss-live > .jp-dash { flex: 0 0 auto; width: 1100px; height: auto; }
}
@media (max-width: 768px) {
  /* Phones keep the phone screenshot; the host is never laid out, so the
     script's IntersectionObserver never fires and nothing is built. */
  .ss-screen.ss-live > .jp-dash { display: none !important; }
}

/* ------------------------------------------------------------- tokens */
/* The "Clean minimalist" scheme, light half (theme.css + theme-flat.css). */
.jp-dash {
  --paper: #FAFAFB; --paper-2: #FFFFFF; --paper-3: #F3F4F6;
  --raise: #FFFFFF; --tint: #F5F6F7;
  --ink: #161513; --ink-2: #35332E; --ink-3: #656259;
  --rule: #EDEEF0; --rule-2: #E3E5E8;
  --positive: #2C6446; --danger: #8C2F22; --gold: #8A6D1F;
  --rim-lg: linear-gradient(150deg, #FCFCFD 0%, #D6D8DE 22%, #FCFCFD 38%, #E7E9EE 58%, #FCFCFD 74%, #D6D8DE 100%);
  --rim-wide: linear-gradient(168deg, #FCFCFD 0%, #D6D8DE 22%, #FCFCFD 38%, #E7E9EE 58%, #FCFCFD 74%, #D6D8DE 100%);
  --rim-tall: linear-gradient(196deg, #FCFCFD 0%, #D6D8DE 22%, #FCFCFD 38%, #E7E9EE 58%, #FCFCFD 74%, #D6D8DE 100%);
  --rim-sm: linear-gradient(180deg, #ECEEF1, #DFE1E6);
  --lift-lg: 0 1px 2px rgba(0, 0, 0, .03), 0 6px 16px rgba(0, 0, 0, .045);
  --lift-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --spec: rgba(255, 255, 255, .95);
  --well: inset 0 1px 2px rgba(0, 0, 0, .05);
  --box-bg: linear-gradient(#FFFFFF, #FFFFFF);
  --box-rim: rgba(22, 21, 19, .10);
  --box-cast: 0 1px 2px rgba(22, 21, 19, .06);
  --mk-all: #E3E5E8;
  --buy-bg: #FFFFFF; --buy-ink: #111111; --buy-edge: rgba(0, 0, 0, .10);
  --buy-cast: 0 1px 2px rgba(0, 0, 0, .06);
  --solid-a: rgba(30, 29, 27, .97); --solid-b: rgba(22, 21, 19, .97); --solid-ink: #FFFFFF;
  --solid-rim: rgba(255, 255, 255, .16);
  --wm-filter: none;
  --chat-log: #F8F9FA;
}
/* ...and the dark half. */
.jp-dash[data-theme="dark"] {
  --paper: #111112; --paper-2: #141415; --paper-3: #1A1A1C;
  --raise: #18181A; --tint: #19191B;
  --ink: #F2F3F5; --ink-2: #D2D3D7; --ink-3: #8E8F95;
  --rule: #202023; --rule-2: #29292C;
  --positive: #5FB98A; --danger: #E2705C; --gold: #D9B65C;
  --rim-lg: linear-gradient(150deg, #343434 0%, #0A0A0A 22%, #343434 38%, #1E1E1E 58%, #343434 74%, #0A0A0A 100%);
  --rim-wide: linear-gradient(168deg, #343434 0%, #0A0A0A 22%, #343434 38%, #1E1E1E 58%, #343434 74%, #0A0A0A 100%);
  --rim-tall: linear-gradient(196deg, #343434 0%, #0A0A0A 22%, #343434 38%, #1E1E1E 58%, #343434 74%, #0A0A0A 100%);
  --rim-sm: linear-gradient(180deg, #2C2C30, #1D1D20);
  --lift-lg: 0 1px 2px rgba(0, 0, 0, .44), 0 6px 16px rgba(0, 0, 0, .38);
  --lift-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --spec: rgba(255, 255, 255, .055);
  --well: inset 0 1px 2px rgba(0, 0, 0, .5);
  --box-bg: linear-gradient(#1A1A1D, #161618);
  --box-rim: rgba(255, 255, 255, .10);
  --box-cast: 0 1px 2px rgba(0, 0, 0, .45);
  --mk-all: #3A3B40;
  --buy-bg: #28282D; --buy-ink: #FFFFFF; --buy-edge: rgba(255, 255, 255, .10);
  --buy-cast: 0 0 0 transparent;
  --solid-a: rgba(250, 251, 253, .97); --solid-b: rgba(232, 234, 238, .93); --solid-ink: #131315;
  --solid-rim: rgba(0, 0, 0, .26);
  --wm-filter: invert(1);
  --chat-log: #121213;
}

/* ------------------------------------------------------------ the app */
.jp-dash .jd {
  position: relative;
  width: 1440px;
  height: 800px;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink-2);
  font: 14px/1.55 "Noto Sans", Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: 0 0;
}
.jp-dash .jd *, .jp-dash .jd *::before, .jp-dash .jd *::after { box-sizing: border-box; }
.jp-dash .jd img { display: block; max-width: none; }
.jp-dash :where(.jd button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.jp-dash .jd button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.jp-dash .jd button { -webkit-appearance: none; appearance: none; }
.jp-dash .jd .num { font-variant-numeric: tabular-nums; }
.jp-dash .jd svg { display: block; flex: none; }

/* The two materials everything is made of: a raised object (the rail rows,
   the pills, the small boxes) and a panel (the rail, the tiles, the cards,
   the side boxes). Both are the app's: a 1px gradient rim masked to the
   border, a lift, a lit top edge. */
.jp-dash .jd-obj {
  border: 1px solid transparent;
  background: linear-gradient(var(--raise), var(--raise)) padding-box, var(--rim-sm) border-box;
  box-shadow: var(--lift-sm), inset 0 1px var(--spec);
}
.jp-dash .jd-pane {
  border: 1px solid transparent;
  background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--rim-lg) border-box;
  box-shadow: var(--lift-lg), inset 0 1px var(--spec);
}

/* --------------------------------------------------------------- rail */
.jp-dash .jd-rail {
  position: relative;
  flex: none;
  width: 176px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 14px 0;
  border: 1px solid transparent;
  border-radius: 16px;
  background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--rim-tall) border-box;
  box-shadow: var(--lift-lg), inset 0 1px var(--spec);
}
.jp-dash .jd-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin: 6px 10px 0;
  border-radius: 16px;
}
.jp-dash .jd-brand img {
  height: 22px;
  width: auto;
  filter: var(--wm-filter);
}
.jp-dash .jd-fold {
  position: absolute;
  top: 50%;
  right: 7px;
  z-index: 3;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  box-shadow: var(--lift-sm);
}
.jp-dash .jd-fold svg { width: 14px; height: 14px; }
.jp-dash .jd-sec, .jp-dash .jd-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 0 15px;
}
.jp-dash .jd-foot { margin-top: auto; }
.jp-dash .jd-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px 0 54px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.jp-dash .jd-ic {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  border: 1px solid transparent;
  background: linear-gradient(var(--raise), var(--raise)) padding-box, var(--rim-sm) border-box;
  box-shadow: var(--lift-sm), inset 0 1px var(--spec);
}
.jp-dash .jd-ic svg { width: 18px; height: 18px; }
.jp-dash .jd-row.is-on { color: var(--ink); }
.jp-dash .jd-row.is-on .jd-ic {
  color: var(--solid-ink);
  background: linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box, var(--rim-sm) border-box;
  border-color: var(--solid-rim);
  box-shadow: var(--lift-sm), inset 0 1px rgba(255, 255, 255, .26);
}
.jp-dash .jd-row.is-locked, .jp-dash .jd-row.is-locked .jd-ic { color: var(--ink-3); }
/* The appearance switch: the row is a track, the knob carries the side that
   is on. Sun left, moon right, like the rail's own. */
.jp-dash .jd-thm { position: relative; height: 44px; border-radius: 9999px; display: block; }
.jp-dash .jd-thm-k {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 5px);
  height: 36px;
  border-radius: 9999px;
  transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.jp-dash[data-theme="dark"] .jd-thm-k { transform: translateX(calc(100% + 4px)); }
.jp-dash .jd-thm svg {
  position: absolute;
  top: 13px;
  width: 18px;
  height: 18px;
  color: var(--ink-3);
}
.jp-dash .jd-thm .jd-sun { left: calc(25% - 9px); color: var(--ink); }
.jp-dash .jd-thm .jd-moon { left: calc(75% - 9px); }
.jp-dash[data-theme="dark"] .jd-thm .jd-sun { color: var(--ink-3); }
.jp-dash[data-theme="dark"] .jd-thm .jd-moon { color: var(--ink); }
.jp-dash .jd-you .jd-ic {
  color: var(--solid-ink);
  background: linear-gradient(180deg, var(--solid-a), var(--solid-b)) padding-box, var(--rim-sm) border-box;
  border-color: var(--solid-rim);
  font-size: 16px;
  font-weight: 700;
}
.jp-dash .jd-you .jd-chev { position: absolute; right: 12px; top: 15px; width: 12px; height: 12px; color: var(--ink-3); }

/* --------------------------------------------------------------- main */
.jp-dash .jd-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0 20px;
  overflow: hidden;
}
/* The toolbar and the work surface share one grid: the feed column and the
   side column, 4:1 (the app's --cols-main / --cols-side). The stream keeps
   its cards at 665px and gives the side the rest, as the app does at this
   window size. */
.jp-dash .jd-bar, .jp-dash .jd-work {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr);
  column-gap: 14px;
}
.jp-dash[data-lay="stream"] .jd-bar, .jp-dash[data-lay="stream"] .jd-work {
  grid-template-columns: 665px minmax(0, 1fr);
}
.jp-dash .jd-bar {
  flex: none;
  row-gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.jp-dash[data-lay="columns"] .jd-bar { margin-bottom: 18px; }
.jp-dash .jd-bar-l { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jp-dash .jd-box {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 13px;
  border-radius: 9999px;
  border: 1px solid var(--box-rim);
  background: var(--box-bg);
  box-shadow: inset 0 1px var(--spec), var(--box-cast);
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.jp-dash .jd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); position: relative; flex: none; }
.jp-dash .jd-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--positive);
  animation: jd-pulse 2.6s cubic-bezier(.25, .6, .35, 1) infinite;
  animation-play-state: paused;
}
.jp-dash .jd.is-live .jd-dot::after { animation-play-state: running; }
@keyframes jd-pulse { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.jp-dash .jd-q { flex: 1 1 160px; min-width: 120px; gap: 8px; padding: 0 12px 0 13px; color: var(--ink-3); font-size: 13px; }
.jp-dash .jd-q svg { width: 14px; height: 14px; opacity: .6; color: var(--ink); }
.jp-dash .jd-pick {
  display: none;
  gap: 9px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.jp-dash:not([data-lay="columns"]) .jd-pick { display: inline-flex; }
.jp-dash .jd-pick svg { width: 20px; height: 20px; }
.jp-dash .jd-pick .jd-chev { width: 13px; height: 13px; color: var(--ink-3); }
.jp-dash .jd-pick .jd-allm rect { fill: var(--mk-all); }

/* The layout switch: a well with three segments, the chosen one raised. */
.jp-dash .jd-lay {
  display: flex;
  gap: 2px;
  height: 36px;
  padding: 3px;
  border-radius: 9999px;
  background: var(--paper-3);
  box-shadow: var(--well);
}
.jp-dash .jd-lay button {
  flex: 1 1 0;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  border: 1px solid transparent;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.jp-dash .jd-lay button svg { width: 15px; height: 15px; }
.jp-dash[data-lay="stream"] .jd-lay [data-lay="stream"],
.jp-dash[data-lay="grid"] .jd-lay [data-lay="grid"],
.jp-dash[data-lay="columns"] .jd-lay [data-lay="columns"] {
  color: var(--ink);
  background: linear-gradient(var(--raise), var(--raise)) padding-box, var(--rim-sm) border-box;
  box-shadow: var(--lift-sm), inset 0 1px var(--spec);
}

/* The lane pills of the Columns layout, one over each lane. */
.jp-dash .jd-cols {
  display: none;
  grid-column: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-right: 16px;
}
.jp-dash[data-lay="columns"] .jd-cols { display: grid; }
.jp-dash .jd-col { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; }
.jp-dash .jd-mk {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.jp-dash .jd-mk img { width: 16px; height: 16px; border-radius: 4px; }
.jp-dash .jd-mk .jd-chev { width: 9px; height: 9px; color: var(--ink-3); }
.jp-dash .jd-pause {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.jp-dash .jd-pause svg { width: 12px; height: 12px; }
.jp-dash .jd-pause .jd-play { display: none; }
.jp-dash .jd-pause.is-on .jd-play { display: block; }
.jp-dash .jd-pause.is-on .jd-pausei { display: none; }
.jp-dash .jd-pause.is-on { color: var(--ink); }
.jp-dash .jd-pause .jd-held {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  display: none;
}
.jp-dash .jd-pause.is-on[data-n]:not([data-n="0"]) .jd-held { display: block; }

/* --------------------------------------------------------- the feed */
.jp-dash .jd-work { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.jp-dash .jd-feed {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: opacity .16s ease;
}
.jp-dash .jd-feed.is-switching { opacity: 0; }
.jp-dash .jd-lanes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.jp-dash .jd-lane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding-right: 22px;
}
.jp-dash .jd-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.jp-dash .jd-stream {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jp-dash .jd-fi { will-change: transform; }

/* ------------------------------------------------------------- the tile
   feed.js's .jcc: a 3:4 photograph with the caption on a gradient at its
   foot, a strip of the other photos beside it, the age chip top left, the
   Lens disc top right, Buy wide and Open beside it. */
.jp-dash .jt {
  position: relative;
  display: flex;
  gap: 3px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid transparent;
  background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--rim-wide) border-box;
  box-shadow: var(--lift-lg), inset 0 1px var(--spec);
}
.jp-dash .jt-shot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 3 / 4;
  background: var(--paper-3);
  box-shadow: var(--well);
  overflow: hidden;
}
.jp-dash .jt-shot > img { width: 100%; height: 100%; object-fit: cover; }
.jp-dash .jt-chip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(22, 21, 15, .62);
  color: #fff;
  font-size: 10.5px;
  line-height: 20px;
  white-space: nowrap;
}
.jp-dash .jt-mk { top: 33px; padding: 0 8px 0 6px; display: none; }
.jp-dash .jt-mk img { width: 14px; height: 14px; border-radius: 3px; }
.jp-dash .jt.jt-g .jt-mk { display: inline-flex; }
.jp-dash .jt-lens {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(22, 21, 15, .62);
  border: 1px solid rgba(255, 255, 255, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .28);
}
.jp-dash .jt-lens svg { width: 17px; height: 17px; }
.jp-dash .jt-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 64px 12px 11px;
  color: #fff;
  background: linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(12, 11, 8, .12) 18px, rgba(12, 11, 8, .38) 40px, rgba(12, 11, 8, .68) 64px, rgba(12, 11, 8, .86) 98px, rgba(12, 11, 8, .92) 100%);
}
.jp-dash .jt-title, .jp-dash .jt-price, .jp-dash .jt-sub { text-shadow: 0 1px 2px rgba(8, 7, 5, .62); }
.jp-dash .jt-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  color: #fff;
}
.jp-dash .jt-price { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; }
.jp-dash .jt-eur { font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.jp-dash .jt-jpy { font-size: 11px; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; }
.jp-dash .jt-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0 0;
  font-size: 11px;
  line-height: 17px;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  overflow: hidden;
}
.jp-dash .jt-sub .hair { flex: none; width: 1px; height: 11px; background: rgba(255, 255, 255, .45); }
.jp-dash .jt-brand { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
.jp-dash .jt-flag { flex: none; width: 14px; height: 10px; border-radius: 1.5px; }
.jp-dash .jt-act { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.jp-dash .jt-open {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 12px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 2px rgba(0, 0, 0, .16);
}
.jp-dash .jt-flagbtn {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .72);
}
.jp-dash .jt-flagbtn svg { width: 15px; height: 15px; }
/* the strip: a column of thumbs beside the photo, the first one marked */
.jp-dash .jt-strip {
  flex: 0 0 calc(16% - 2.64px);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.jp-dash .jt-th, .jp-dash .jt-pad {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: var(--well);
}
.jp-dash .jt-th { border: 1px solid var(--rule); }
.jp-dash .jt-th.is-on { border-color: var(--ink); }
.jp-dash .jt-th:first-child { border-top-right-radius: 13px; }
.jp-dash .jt-th img { width: 100%; height: 100%; object-fit: cover; }
.jp-dash .jt-th img.c1 { object-position: 50% 30%; transform: scale(2.2); transform-origin: 50% 30%; }
.jp-dash .jt-th img.c2 { object-position: 50% 72%; transform: scale(1.9); transform-origin: 50% 72%; }
/* the grid's tile: the same, with the wider fixed strip on a tinted ground */
.jp-dash .jt.jt-g .jt-strip {
  flex: 0 0 58px;
  padding: 3px 3px 3px 0;
  background: var(--tint);
  border-radius: 0 12px 12px 0;
}
.jp-dash .jt.jt-g .jt-th, .jp-dash .jt.jt-g .jt-pad { flex: none; width: 55px; height: 55px; border-radius: 6px; }
.jp-dash .jt.jt-g .jt-th:first-child { border-top-right-radius: 6px; }

/* ---------------------------------------------------------- Buy pill
   buybtn-shimmer.css at rest; the throbber while the order runs; the
   verdict panel that rises with a green wash and stays (every verdict is
   permanent in the app). */
.jp-dash .jd-buy {
  position: relative;
  flex: 1 1 auto;
  min-width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  padding: 0 15px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--buy-ink);
  background: var(--buy-bg);
  border: 1px solid var(--buy-edge);
  box-shadow: var(--buy-cast);
  overflow: hidden;
  isolation: isolate;
  transition: transform .16s ease, background-color .2s ease;
}
.jp-dash .jd-buy.is-press { transform: scale(.94); }
.jp-dash .jd-buy .jb-t { transition: opacity .16s ease; }
.jp-dash .jd-buy .jb-p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--buy-ink);
  transform: translateY(70%);
  opacity: 0;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}
.jp-dash .jd-buy .jb-p svg { width: 13px; height: 13px; color: var(--positive); }
.jp-dash .jd-buy .jb-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  border: 2px solid rgba(128, 128, 128, .3);
  border-top-color: var(--buy-ink);
  opacity: 0;
  animation: jd-spin .8s linear infinite;
  animation-play-state: paused;
}
.jp-dash .jd-buy.is-working .jb-t { opacity: 0; }
.jp-dash .jd-buy.is-working .jb-spin { opacity: 1; animation-play-state: running; }
.jp-dash .jd-buy.is-done { background: linear-gradient(180deg, rgba(44, 100, 70, .10), rgba(44, 100, 70, .17)), var(--buy-bg); cursor: default; }
.jp-dash .jd-buy.is-done .jb-t { opacity: 0; }
.jp-dash .jd-buy.is-done .jb-p { transform: none; opacity: 1; }
@keyframes jd-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------- stream card
   feed.js's .jc: the photo at Listing size with its thumbs, the facts
   beside it, Buy on the bottom line. */
.jp-dash .js {
  position: relative;
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 18px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--rim-wide) border-box;
  box-shadow: var(--lift-lg), inset 0 1px var(--spec);
}
.jp-dash .js-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc((100% - 24px) * 4 / 19);
  gap: 6px;
  align-items: start;
}
.jp-dash .js-shot {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-3);
}
.jp-dash .js-shot > img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--well); }
.jp-dash .js-count {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 21px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(22, 21, 15, .72);
  color: #fff;
  font-size: 11px;
  line-height: 21px;
  letter-spacing: .04em;
}
.jp-dash .js-thumbs { display: flex; flex-direction: column; gap: 6px; }
.jp-dash .js-th {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper-3);
}
.jp-dash .js-th.is-on { border-color: var(--ink); }
.jp-dash .js-th img { width: 100%; height: 100%; object-fit: cover; }
.jp-dash .js-th img.c1 { object-position: 50% 30%; transform: scale(2.2); transform-origin: 50% 30%; }
.jp-dash .js-th img.c2 { object-position: 50% 72%; transform: scale(1.9); transform-origin: 50% 72%; }
.jp-dash .js-body { display: flex; flex-direction: column; min-width: 0; }
.jp-dash .js-top { display: flex; align-items: flex-start; gap: 12px; }
.jp-dash .js-title { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-dash .js-mkb { flex: none; width: 34px; height: 34px; border-radius: 8px; object-fit: contain; }
.jp-dash .js-brand { margin-top: 3px; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink); }
.jp-dash .js-meta { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.jp-dash .js-price { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.jp-dash .js-eur { font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.jp-dash .js-jpy { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.jp-dash .js-facts { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.jp-dash .js-flag { flex: none; width: 18px; height: 12.6px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(22, 21, 19, .14); }
.jp-dash .js-cond {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  font-size: 11.5px;
  color: var(--ink-2);
}
.jp-dash .js-act { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.jp-dash .js-act .jd-buy { flex: 0 0 132px; height: 38px; padding: 0 26px; font-size: 14px; }
.jp-dash .js-lens {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jp-dash .js-lens svg { width: 20px; height: 20px; }
.jp-dash .js-flagbtn {
  flex: none;
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--danger);
  border: 1px solid var(--danger);
}
.jp-dash .js-flagbtn svg { width: 15px; height: 15px; }

/* -------------------------------------------------------- side column */
.jp-dash .jd-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.jp-dash[data-lay="columns"] .jd-side { margin-top: -48px; }
.jp-dash .jd-side > section { flex: none; border-radius: 12px; overflow: hidden; }
.jp-dash .jd-side > .jd-chat { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; }
.jp-dash .jd-ph {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 18px 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.jp-dash .jd-ph .jd-dot { width: 6px; height: 6px; }
.jp-dash .jd-acct { display: flex; align-items: center; gap: 12px; padding: 20px 18px 24px; }
.jp-dash .jd-acct-av {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-3);
  border: 1px solid var(--rule-2);
}
.jp-dash .jd-acct-av img { width: 22px; height: 22px; border-radius: 6px; opacity: .55; }
.jp-dash .jd-acct-av i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--paper-2);
}
.jp-dash .jd-acct-t { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.jp-dash .jd-acct-t b { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.jp-dash .jd-acct-t span { display: block; font-size: 12px; color: var(--ink-3); }
.jp-dash .jd-acct > svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
/* Purchases */
.jp-dash .jd-rh { padding: 14px 18px 4px; }
.jp-dash .jd-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--tint);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}
.jp-dash .jd-tab {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 26px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-3);
}
.jp-dash .jd-tab svg { width: 15px; height: 15px; }
.jp-dash .jd-tab.is-on { flex: 1 1 auto; padding: 0 9px; font-weight: 600; color: var(--ink); }
.jp-dash .jd-rlist { display: flex; flex-direction: column; gap: 8px; padding: 8px 11px 11px; min-height: 124px; position: relative; }
.jp-dash .jd-rempty { margin: auto; padding: 0 10px; font-size: 12px; color: var(--ink-2); text-align: center; }
.jp-dash .jd-rlist:has(.jd-rit) .jd-rempty { display: none; }
.jp-dash .jd-rit {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 5px 9px 5px 5px;
  border-radius: 14px;
  min-width: 0;
}
.jp-dash .jd-rit-sh { flex: none; width: 38px; height: 38px; border-radius: 10px; overflow: hidden; background: var(--paper-3); border: 1px solid var(--rule); }
.jp-dash .jd-rit-sh img { width: 100%; height: 100%; object-fit: cover; }
.jp-dash .jd-rit-tx { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.jp-dash .jd-rit-n { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-dash .jd-rit-b { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.jp-dash .jd-rit-p { font-size: 12px; font-weight: 500; font-style: italic; color: var(--ink); font-variant-numeric: tabular-nums; }
.jp-dash .jd-rit-v { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--positive); }
.jp-dash .jd-rit-v svg { width: 11px; height: 11px; }
.jp-dash .jd-rit-mk { flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; }
/* Chat */
.jp-dash .jd-ch { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; flex: none; }
.jp-dash .jd-ch h2 { margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.jp-dash .jd-ch .jd-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.jp-dash .jd-ch .jd-dot { width: 6px; height: 6px; }
.jp-dash .jd-clog {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 13px;
  background: var(--chat-log);
  overflow: hidden;
}
.jp-dash .jd-cm { display: flex; align-items: flex-end; gap: 8px; }
.jp-dash .jd-cav {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-3);
  border: 1px solid var(--rule-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}
.jp-dash .jd-cb {
  position: relative;
  max-width: 86%;
  padding: 5px 10px 6px;
  border-radius: 13px;
  border-bottom-left-radius: 5px;
  background: var(--raise);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 6px 14px -8px rgba(0, 0, 0, .18);
}
.jp-dash .jd-cm.is-me { flex-direction: row-reverse; }
.jp-dash .jd-cm.is-me .jd-cav { display: none; }
.jp-dash .jd-cm.is-me .jd-cb {
  border-bottom-left-radius: 13px;
  border-bottom-right-radius: 5px;
  border-color: transparent;
  background: color-mix(in srgb, var(--ink) 9%, var(--paper-2));
}
.jp-dash .jd-cm.is-me .jd-cwho { color: var(--ink-2); }
.jp-dash .jd-cmeta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.jp-dash .jd-cwho { font-size: 12px; font-weight: 600; color: var(--ink); }
.jp-dash .jd-ctag { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.jp-dash .jd-cbody { font-size: 12.5px; line-height: 1.4; color: var(--ink); padding-right: 34px; }
.jp-dash .jd-ctime { position: absolute; right: 10px; bottom: 6px; font-size: 9.5px; line-height: 1; color: var(--ink-3); }
.jp-dash .jd-cform { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; background: var(--raise); }
.jp-dash .jd-cin {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  font-size: 12.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
}
.jp-dash .jd-csend {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
}
.jp-dash .jd-csend svg { width: 15px; height: 15px; }

/* ------------------------------------------- the pills under the tablet */
/* Stream / Grid / Columns beside Light / Dark: one row, wrapping on narrow
   screens. shot-callouts.v14.css stacks .ss-controls as a column; this
   makes it a row of pills, same gap. */
#interface .ss-controls { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .6rem; }
#interface .ss-view .ss-theme-btn svg { width: 14px; height: 14px; }
#interface .ss-note {
  max-width: 44rem;
  margin: .9rem auto 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.6;
  color: hsl(var(--fg-subtle));
}
@media (max-width: 768px) { #interface .ss-note { display: none; } }

/* ------------------------------------------------------------- no motion */
@media (prefers-reduced-motion: reduce) {
  .jp-dash .jd-thm-k, .jp-dash .jd-feed, .jp-dash .jd-buy, .jp-dash .jd-buy .jb-p { transition: none; }
  .jp-dash .jd-dot::after, .jp-dash .jd-buy .jb-spin { animation: none; }
}