/*
  Temuliquid product suite (products.css). products.js renders it.
  Two homes: #products on the landing (styles.css tokens: a datasheet of
  paper cards with hairline borders and square corners) and
  #tl-product-view on the terminal (trade.css tokens: white panels with
  rounded corners). The terminal doesn't load styles.css, so every token
  below has a fallback, and every rule is scoped under one of the two.
  No shadows, no gradients, no motion: every state change is a text swap.
*/

:is(#products, #tl-product-view) {
  --pr-paper: var(--paper, var(--panel, #FFFFFF));
  --pr-ink: var(--ink, #000000);
  --pr-graphite: var(--graphite, #3B4148);
  --pr-muted: var(--muted, #5E6670);
  --pr-line: var(--hairline, #CDD2D7);
  --pr-tape: var(--tape, #F7C600);
  --pr-tape-deep: var(--tape-deep, #E3B500);
  --pr-ours: var(--ours, var(--tape-soft, #FFF6CC));
  --pr-led: var(--led, var(--buy, #1FB44B));
  --pr-yes: var(--buy, #0B9F5B);
  --pr-no: var(--sell, #E5372B);
  --pr-display: var(--font-display, var(--font-big, "Big Shoulders Display", "Arial Narrow", sans-serif));
  --pr-text: var(--font-text, var(--font-ui, "Instrument Sans", system-ui, sans-serif));
  --pr-mono: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --pr-r: 0px;
  --pr-pill-r: 0px;
  --pr-gap: 12px;
}

#tl-product-view {
  --pr-r: var(--radius, 12px);
  --pr-pill-r: 999px;
}

:is(#products, #tl-product-view) [hidden] {
  display: none !important;
}

/* The landing's card and TIP row ids (#product-temuunit, ...). The nav's
   Products menu lands them below the header itself (app.js); these margins
   do the same for a plain #product-... link or a reload. Below 1,280 px the
   header scrolls away and temu.js's --tm-top clears its pinned bars. */
#products [id^="product-"] {
  scroll-margin-top: calc(var(--tm-top, 8px) + 16px);
}

@media (min-width: 1280px) {
  #products [id^="product-"] {
    scroll-margin-top: 132px;
  }
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

:is(#products, #tl-product-view) .pr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 20px 20px 22px;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: var(--pr-paper);
  color: var(--pr-graphite);
}

:is(#products, #tl-product-view) .pr-main {
  min-width: 0;
}

:is(#products, #tl-product-view) .pr-kicker {
  max-width: none;
  margin: 0 0 8px;
  color: var(--pr-muted);
  font-family: var(--pr-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
}

:is(#products, #tl-product-view) .pr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

:is(#products, #tl-product-view) .pr-name {
  margin: 0;
  color: var(--pr-ink);
  font-family: var(--pr-display);
  font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.25rem);
  font-weight: 800;
  line-height: 0.95;
  text-wrap: balance;
}

:is(#products, #tl-product-view) .pr-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 3px 8px 2px;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-pill-r);
  background: var(--pr-paper);
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

/* The Status section's operational dot. */
:is(#products, #tl-product-view) .pr-pill-live::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pr-led);
}

:is(#products, #tl-product-view) .pr-tag {
  width: fit-content;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 3px 8px 2px;
  background: var(--pr-ink);
  color: var(--pr-tape);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

:is(#products, #tl-product-view) .pr-tagline {
  max-width: 60ch;
  margin: 12px 0 0;
  color: var(--pr-graphite);
  font-size: 1rem;
  line-height: 1.5;
}

/* The joke: the most readable line on the card. */
:is(#products, #tl-product-view) .pr-deadpan {
  max-width: 40ch;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--pr-line);
  color: var(--pr-ink);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: pretty;
}

:is(#products, #tl-product-view) .pr-action {
  margin-top: auto;
  padding-top: 20px;
}

/* Links */

:is(#products, #tl-product-view) .pr-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pr-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:is(#products, #tl-product-view) .pr-link:hover {
  text-decoration-thickness: 2px;
}

:is(#products, #tl-product-view) .pr-arrow {
  flex: none;
  width: 16px;
  height: 16px;
}

/* A plain link card is one big link. */
:is(#products, #tl-product-view) .pr-card-link .pr-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

:is(#products, #tl-product-view) .pr-card-link:hover {
  border-color: var(--pr-ink);
}

/* ------------------------------------------------------------------ */
/* Buttons and interactions                                            */
/* ------------------------------------------------------------------ */

:is(#products, #tl-product-view) .pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 9px 16px;
  border: 2px solid var(--pr-ink);
  border-radius: var(--pr-pill-r);
  background: var(--pr-paper);
  color: var(--pr-ink);
  font: 600 0.9375rem/1.2 var(--pr-text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

:is(#products, #tl-product-view) .pr-btn:hover {
  background: var(--pr-ours);
}

:is(#products, #tl-product-view) .pr-btn-primary {
  background: var(--pr-tape);
}

:is(#products, #tl-product-view) .pr-btn-primary:hover {
  background: #FFD633;
}

:is(#products, #tl-product-view) .pr-btn-yes {
  border-color: var(--pr-yes);
  background: #E9F7F0;
  color: #05613A;
}

:is(#products, #tl-product-view) .pr-btn-no {
  border-color: var(--pr-no);
  background: #FDEEED;
  color: #A1231A;
}

:is(#products, #tl-product-view) .pr-btn-yes:hover {
  background: #D3F0E2;
}

:is(#products, #tl-product-view) .pr-btn-no:hover {
  background: #FADAD7;
}

/* I-1's two seconds: it keeps focus, so aria-disabled and no `disabled`. */
:is(#products, #tl-product-view) .pr-btn[aria-disabled="true"],
:is(#products, #tl-product-view) .pr-btn[aria-disabled="true"]:hover {
  border-color: var(--pr-line);
  background: var(--pr-paper);
  color: var(--pr-muted);
  cursor: not-allowed;
}

:is(#products, #tl-product-view) .pr-act > * + * {
  margin-top: 10px;
}

:is(#products, #tl-product-view) .pr-act > .pr-status:empty {
  margin-top: 0;
}

:is(#products, #tl-product-view) .pr-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:is(#products, #tl-product-view) .pr-q {
  max-width: 46ch;
  margin: 0;
  color: var(--pr-ink);
  font-weight: 600;
  line-height: 1.4;
}

:is(#products, #tl-product-view) .pr-caption {
  max-width: none;
  margin: 0;
  color: var(--pr-muted);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

:is(#products, #tl-product-view) .pr-status {
  color: var(--pr-ink);
  font-weight: 600;
  line-height: 1.4;
}

:is(#products, #tl-product-view) .pr-status p {
  max-width: 46ch;
  margin: 0;
}

:is(#products, #tl-product-view) .pr-status p + p {
  margin-top: 4px;
}

/* I-4: the u arrives like a parcel. */
:is(#products, #tl-product-view) .pr-status .pr-received {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 8px;
}

:is(#products, #tl-product-view) .pr-u {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  padding-top: 10px;
  border: 2px solid var(--pr-ink);
  background: var(--pr-paper);
  color: var(--pr-ink);
  font-family: var(--pr-display);
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 0.8;
}

:is(#products, #tl-product-view) .pr-u::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 10px;
  border-bottom: 2px solid var(--pr-ink);
  background: var(--pr-tape);
}

/* ------------------------------------------------------------------ */
/* Unified margin: the featured card and its diagram                   */
/* ------------------------------------------------------------------ */

:is(#products, #tl-product-view) .pr-featured {
  border-color: var(--pr-ink);
  background: var(--pr-ours);
}

:is(#products, #tl-product-view) .pr-featured .pr-name {
  font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4rem);
}

:is(#products, #tl-product-view) .pr-featured .pr-pill {
  border-color: var(--pr-ink);
}

:is(#products, #tl-product-view) .pr-featured .pr-deadpan {
  border-top-color: var(--pr-ink);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}

:is(#products, #tl-product-view) .pr-diagram {
  margin-top: 24px;
}

/* Five chips standing on one bar. */
:is(#products, #tl-product-view) .pr-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
}

:is(#products, #tl-product-view) .pr-chips li {
  min-width: 0;
  padding: 12px 2px 10px;
  border: 1px solid var(--pr-ink);
  border-bottom: 0;
  background: var(--pr-paper);
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

:is(#products, #tl-product-view) .pr-bar {
  max-width: none;
  margin: 0;
  padding: 10px 12px;
  background: var(--pr-ink);
  color: var(--pr-tape);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Groups and grids                                                    */
/* ------------------------------------------------------------------ */

/* A small eyebrow with a rule running out to the edge. */
:is(#products, #tl-product-view) .pr-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}

:is(#products, #tl-product-view) .pr-group-title span {
  flex: none;
  padding: 3px 8px 2px;
  background: var(--pr-ink);
  color: var(--pr-tape);
}

:is(#products, #tl-product-view) .pr-group-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--pr-ink);
}

:is(#products, #tl-product-view) .pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pr-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------------------ */
/* The stack: an L1 frame (Core and EVM on BFT) and the bridge          */
/* ------------------------------------------------------------------ */

:is(#products, #tl-product-view) .pr-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

:is(#products, #tl-product-view) .pr-l1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pr-gap);
  padding: 12px;
  border: 1px solid var(--pr-ink);
  border-radius: var(--pr-r);
}

/* TemuBFT is the floor the other two stand on. */
:is(#products, #tl-product-view) .pr-l1 > .pr-s-bft {
  border-top: 2px solid var(--pr-ink);
}

/* The bridge's cable: down from the frame on narrow screens. */
:is(#products, #tl-product-view) .pr-stack > .pr-s-unit::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  height: 24px;
  border-left: 2px dashed var(--pr-ink);
}

/* ------------------------------------------------------------------ */
/* Governance: the TIP table                                           */
/* ------------------------------------------------------------------ */

:is(#products, #tl-product-view) .pr-tips {
  overflow: hidden;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: var(--pr-paper);
}

:is(#products, #tl-product-view) .pr-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

:is(#products, #tl-product-view) .pr-table caption {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--pr-ink);
  color: var(--pr-ink);
  font-family: var(--pr-display);
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);
  font-weight: 800;
  line-height: 1.05;
  text-align: left;
}

:is(#products, #tl-product-view) .pr-table th,
:is(#products, #tl-product-view) .pr-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--pr-line);
  text-align: left;
  vertical-align: top;
}

:is(#products, #tl-product-view) .pr-table tr > :first-child {
  padding-left: 20px;
}

:is(#products, #tl-product-view) .pr-table tr > :last-child {
  padding-right: 20px;
}

:is(#products, #tl-product-view) .pr-table thead th {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: var(--pr-ink);
  color: var(--pr-muted);
  font-family: var(--pr-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

:is(#products, #tl-product-view) .pr-table tbody tr:last-child > * {
  border-bottom: 0;
}

:is(#products, #tl-product-view) .pr-td-num {
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;
  white-space: nowrap;
}

:is(#products, #tl-product-view) .pr-td-title {
  color: var(--pr-ink);
  font-weight: 600;
  line-height: 1.4;
}

:is(#products, #tl-product-view) .pr-td-status,
:is(#products, #tl-product-view) .pr-td-votes {
  white-space: nowrap;
}

:is(#products, #tl-product-view) .pr-td-status .pr-pill {
  margin-top: 0;
}

:is(#products, #tl-product-view) .pr-votes {
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.8;
}

:is(#products, #tl-product-view) .pr-sum {
  max-width: 58ch;
  margin: 0;
  color: var(--pr-graphite);
  line-height: 1.5;
}

/* L-1 */
:is(#products, #tl-product-view) .pr-queue {
  max-width: none;
  margin: 10px 0 0;
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

:is(#products, #tl-product-view) .pr-td-sum .pr-act {
  margin-top: 14px;
}

:is(#products, #tl-product-view) .pr-btn-tip {
  min-width: 64px;
}

:is(#products, #tl-product-view) .pr-foot {
  max-width: none;
  margin: 0;
  padding: 12px 20px 14px;
  border-top: 1px solid var(--pr-ink);
  color: var(--pr-ink);
  font-family: var(--pr-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Phones and narrow tablets: each proposal stacks as a card. */
@media (max-width: 759px) {
  :is(#products, #tl-product-view) .pr-table,
  :is(#products, #tl-product-view) .pr-table caption,
  :is(#products, #tl-product-view) .pr-table tbody,
  :is(#products, #tl-product-view) .pr-table tr,
  :is(#products, #tl-product-view) .pr-table th,
  :is(#products, #tl-product-view) .pr-table td {
    display: block;
  }

  :is(#products, #tl-product-view) .pr-table caption {
    padding: 16px 16px 12px;
  }

  :is(#products, #tl-product-view) .pr-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  :is(#products, #tl-product-view) .pr-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--pr-line);
  }

  :is(#products, #tl-product-view) .pr-table tbody tr:last-child {
    border-bottom: 0;
  }

  /* :nth-child(n) outranks the desktop first and last cell padding. */
  :is(#products, #tl-product-view) .pr-table tbody tr > :nth-child(n) {
    padding: 0;
    border: 0;
  }

  :is(#products, #tl-product-view) .pr-table tbody .pr-td-num,
  :is(#products, #tl-product-view) .pr-table tbody .pr-td-title,
  :is(#products, #tl-product-view) .pr-table tbody .pr-td-sum {
    flex: 1 0 100%;
  }

  :is(#products, #tl-product-view) .pr-table tbody .pr-td-title {
    font-family: var(--pr-display);
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1;
  }

  :is(#products, #tl-product-view) .pr-table tbody .pr-td-sum {
    margin-top: 4px;
  }

  :is(#products, #tl-product-view) .pr-votes {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px 2px;
    border: 1px solid var(--pr-line);
    border-radius: var(--pr-pill-r);
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  :is(#products, #tl-product-view) .pr-foot {
    padding-inline: 16px;
  }
}

/* ------------------------------------------------------------------ */
/* Landing layout                                                      */
/* ------------------------------------------------------------------ */

#products .pr-featured {
  margin-top: var(--space-block, 40px);
  padding: 24px;
}

#products .pr-group {
  margin-top: var(--space-block, 40px);
}

@media (min-width: 640px) {
  :is(#products, #tl-product-view) .pr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #products .pr-grid-trade > :nth-child(5) {
    grid-column: 1 / -1;
  }

  :is(#products, #tl-product-view) .pr-l1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(#products, #tl-product-view) .pr-l1 > .pr-s-bft {
    grid-column: 1 / -1;
  }
}

/* Three columns from about 1000 px: a 6-track grid, so Trade's five cards
   fill two rows (three, then two) and Earn's loan card runs full width over
   its three link cards. */
@media (min-width: 1000px) {
  #products .pr-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #products .pr-grid > * {
    grid-column: span 2;
  }

  #products .pr-grid-trade > :nth-child(n + 4) {
    grid-column: span 3;
  }

  #products .pr-grid > .pr-wide {
    grid-column: 1 / -1;
  }

  #products .pr-featured,
  #products .pr-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
  }

  #products .pr-featured {
    align-items: end;
    padding: 28px 28px 30px;
  }

  #products .pr-wide {
    align-items: start;
  }

  #products .pr-featured .pr-diagram,
  #products .pr-wide .pr-action {
    margin-top: 0;
    padding-top: 0;
  }

  #products .pr-stack {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }

  /* The cable runs sideways, from the frame to the bridge. */
  #products .pr-stack > .pr-s-unit::before {
    top: 50%;
    right: 100%;
    bottom: auto;
    left: auto;
    width: 24px;
    height: 0;
    border-top: 2px dashed var(--pr-ink);
    border-left: 0;
  }
}

@media (max-width: 639px) {
  #products .pr-card {
    padding: 16px 16px 18px;
  }

  #products .pr-featured {
    padding: 18px 16px 20px;
  }

  :is(#products, #tl-product-view) .pr-l1 {
    padding: 8px;
  }

  :is(#products, #tl-product-view) .pr-chips {
    gap: 4px;
    padding: 0 4px;
  }

  :is(#products, #tl-product-view) .pr-chips li {
    padding-inline: 0;
    font-size: 0.625rem;
  }
}

/* ------------------------------------------------------------------ */
/* Terminal views                                                      */
/* ------------------------------------------------------------------ */

#tl-product-view .pr-view {
  flex: none;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 28px;
  color: var(--pr-ink);
  font-family: var(--pr-text);
  font-size: 14px;
  line-height: 1.45;
}

#tl-product-view .pr-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--pr-line);
}

#tl-product-view .pr-view-id {
  min-width: 0;
  max-width: 760px;
}

#tl-product-view .pr-view-titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

#tl-product-view .pr-view-title {
  margin: 0;
  color: var(--pr-ink);
  font-family: var(--pr-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 0.95;
}

/* Focus lands here when a view opens; it isn't a control. */
#tl-product-view .pr-view-title:focus {
  outline: none;
}

#tl-product-view .pr-view-head .pr-tagline {
  margin-top: 8px;
}

/* TemuUnit's line, right under its title. */
#tl-product-view .pr-view-head .pr-subtitle {
  max-width: 60ch;
  margin: 10px 0 0;
  color: var(--pr-ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

#tl-product-view .pr-view-head .pr-subtitle + .pr-tagline {
  margin-top: 6px;
}

#tl-product-view .pr-view-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

#tl-product-view .pr-all {
  color: var(--pr-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#tl-product-view .pr-view-body {
  display: flex;
  flex-direction: column;
  gap: var(--pr-gap);
  margin-top: 16px;
}

#tl-product-view .pr-hero {
  padding: 22px 24px 24px;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: var(--pr-paper);
}

#tl-product-view .pr-hero > * + * {
  margin-top: 20px;
}

#tl-product-view .pr-hero .pr-deadpan {
  max-width: 34ch;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 24px;
  line-height: 1.25;
}

#tl-product-view .pr-market {
  padding: 18px;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: var(--pr-paper);
}

#tl-product-view .pr-market .pr-q {
  font-size: 16px;
}

#tl-product-view .pr-group-title {
  margin: 12px 0 2px;
}

/* Terminal type and controls: denser, rounded, its own pills. */
#tl-product-view .pr-card {
  padding: 18px 18px 20px;
}

#tl-product-view .pr-name {
  font-size: 30px;
}

#tl-product-view .pr-featured .pr-name {
  font-size: 40px;
}

#tl-product-view .pr-tagline {
  font-size: 14px;
}

#tl-product-view .pr-deadpan {
  font-size: 17px;
}

#tl-product-view .pr-featured .pr-deadpan {
  font-size: 19px;
}

#tl-product-view .pr-btn {
  min-height: 36px;
  padding: 7px 16px;
  border-width: 1px;
  border-color: var(--pr-line);
  font-size: 13px;
}

#tl-product-view .pr-btn:hover {
  border-color: var(--pr-graphite);
  background: var(--pr-paper);
}

#tl-product-view .pr-btn-primary,
#tl-product-view .pr-btn-primary:hover {
  border-color: var(--pr-tape);
  background: var(--pr-tape);
  font-weight: 700;
}

#tl-product-view .pr-btn-primary:hover {
  border-color: var(--pr-tape-deep);
  background: var(--pr-tape-deep);
}

#tl-product-view .pr-btn-yes,
#tl-product-view .pr-btn-yes:hover {
  border-color: transparent;
  background: rgba(11, 159, 91, 0.12);
  color: #05613A;
}

#tl-product-view .pr-btn-no,
#tl-product-view .pr-btn-no:hover {
  border-color: transparent;
  background: rgba(229, 55, 43, 0.12);
  color: #A1231A;
}

#tl-product-view .pr-btn-yes:hover,
#tl-product-view .pr-btn-no:hover {
  border-color: currentColor;
}

#tl-product-view .pr-btn[aria-disabled="true"],
#tl-product-view .pr-btn[aria-disabled="true"]:hover {
  border-color: var(--pr-line);
  background: var(--pr-paper);
  color: var(--pr-muted);
}

#tl-product-view .pr-table caption {
  font-size: 24px;
}

/* The plain tables under Spot, Options and Prop AMM, drawn like the
   terminal's own positions table. */
#tl-product-view .pr-board {
  overflow: hidden;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: var(--pr-paper);
}

#tl-product-view .pr-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pr-line);
}

#tl-product-view .pr-board-title {
  margin: 0;
  color: var(--pr-ink);
  font-family: var(--pr-text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

#tl-product-view .pr-board-note {
  margin: 0;
  color: var(--pr-muted);
  font-size: 12px;
  line-height: 1.3;
}

/* A table wider than a phone scrolls inside its panel, never the page. */
#tl-product-view .pr-board-scroll {
  overflow-x: auto;
}

#tl-product-view .pr-board table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

#tl-product-view .pr-board th,
#tl-product-view .pr-board td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--pr-line);
  color: var(--pr-ink);
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
}

#tl-product-view .pr-board thead th {
  padding-block: 8px;
  color: var(--pr-muted);
  font-size: 12px;
}

#tl-product-view .pr-board tbody th {
  font-weight: 700;
}

#tl-product-view .pr-board tbody tr:last-child > * {
  border-bottom: 0;
}

#tl-product-view .pr-board .pr-num {
  text-align: right;
}

/* The dark Yes and No greens and reds: readable at 13 px. */
#tl-product-view .pr-board .pr-up {
  color: #05613A;
}

#tl-product-view .pr-board .pr-down {
  color: #A1231A;
}

#tl-product-view .pr-board .pr-expired {
  color: var(--pr-muted);
}

@media (min-width: 640px) and (max-width: 999px) {
  #tl-product-view .pr-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  #tl-product-view .pr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #tl-product-view .pr-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #tl-product-view .pr-grid > .pr-span2 {
    grid-column: span 2;
  }

  #tl-product-view .pr-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    column-gap: 32px;
  }

  #tl-product-view .pr-featured .pr-diagram {
    margin-top: 0;
  }
}

@media (max-width: 639px) {
  #tl-product-view .pr-view {
    padding: 14px 12px 28px;
  }

  #tl-product-view .pr-view-title {
    font-size: 34px;
  }

  #tl-product-view .pr-hero {
    padding: 18px 16px 20px;
  }

  #tl-product-view .pr-hero .pr-deadpan {
    font-size: 21px;
  }

  #tl-product-view .pr-card,
  #tl-product-view .pr-market {
    padding: 16px;
  }

  #tl-product-view .pr-featured .pr-name {
    font-size: 34px;
  }

  #tl-product-view .pr-board-head {
    padding-inline: 12px;
  }

  #tl-product-view .pr-board th,
  #tl-product-view .pr-board td {
    padding-inline: 8px;
  }

  #tl-product-view .pr-board th:first-child,
  #tl-product-view .pr-board td:first-child {
    padding-left: 12px;
  }

  #tl-product-view .pr-board th:last-child,
  #tl-product-view .pr-board td:last-child {
    padding-right: 12px;
  }
}