/* #region zone:desk.style.paper — หน้าเทรดจำลอง: กล่องกลางจอ การ์ดสรุป กราฟเส้น ตาราง (ใช้ token ล้วน) */
.desk-dialog.paper-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: var(--sp-4);
  container-type: inline-size;
}
.paper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.paper-h2 {
  margin: 0;
  font-size: var(--fs-2xl);
  min-width: 0;
  overflow-wrap: anywhere;
}
.paper-close {
  flex: none;
  font-size: var(--fs-2xl);
}
.paper-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.paper-disclaimer {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--amber);
  border-radius: var(--r-control);
  background: var(--amber-soft);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
}
.paper-market {
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.paper-basis {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
}
.paper-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.paper-skeleton {
  height: 240px;
  border-radius: var(--r-control);
  background: var(--panel2);
  border: 1px solid var(--line);
}
.paper-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--r-control);
  color: var(--muted);
}
.paper-message p {
  margin: 0;
}
.paper-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.paper-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel2);
}
.paper-card-label,
.paper-card-note {
  color: var(--muted);
  font-size: var(--fs-sm);
}
.paper-card-value {
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.paper-tone.paper-up {
  color: var(--up-text);
}
.paper-tone.paper-down {
  color: var(--down-text);
}
.paper-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.paper-h3 {
  margin: 0;
  font-size: var(--fs-lg);
}
.paper-note,
.paper-none {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.paper-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.paper-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.paper-swatch {
  display: inline-block;
  width: 16px;
  height: 3px;
  border-radius: var(--r-pill);
}
.paper-swatch.is-portfolio,
.paper-line.is-portfolio {
  background: var(--accent);
  stroke: var(--accent);
}
.paper-swatch.is-bench,
.paper-line.is-bench {
  background: var(--muted);
  stroke: var(--muted);
}
.paper-curve {
  position: relative;
  width: 100%;
  min-height: 160px;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--panel2);
  overflow: hidden;
}
.paper-curve svg {
  display: block;
}
.paper-line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.paper-line.is-bench {
  stroke-dasharray: 4 3;
}
.paper-zero {
  stroke: var(--line);
  stroke-width: 1;
}
.paper-cross {
  stroke: var(--faint);
  stroke-width: 1;
}
.paper-tip {
  position: absolute;
  inset-inline: var(--sp-2);
  top: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-control);
  background: var(--tip-bg);
  color: var(--tip-fg);
  font-size: var(--fs-sm);
  pointer-events: none;
  width: fit-content;
  max-width: calc(100% - var(--sp-4));
}
.paper-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}
.paper-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-md);
}
.paper-table th,
.paper-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--text);
}
.paper-table thead th {
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.paper-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* #region zone:desk.style.paper.prices — ป้ายความสดและตัวเลขไม่ดันหน้าขณะอัปเดต */
.paper-freshness {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  width: 100%;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.paper-freshness > span {
  flex: 0 1 auto;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: var(--sp-1) var(--sp-2);
  background: var(--panel);
}
.paper-price-retry {
  flex: none;
  min-height: 36px;
}
.paper-price-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-pos-pnl {
  flex: 0 0 16ch;
}
.pp-held .pp-section-head {
  flex-wrap: wrap;
}
.paper-open .paper-table {
  table-layout: fixed;
}
/* #endregion */
.paper-reason {
  display: block;
  min-width: 14ch;
  max-width: 44ch;
  color: var(--muted);
}
.paper-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* #region zone:desk.style.paper.thinking — บันทึกเหตุผลและสถานะ AI ในหน้าพอร์ตจำลอง */
.paper-thinking-live {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-inner);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-md);
}
.paper-thinking-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start; /* a card is as tall as its own content: opening one never stretches its neighbours */
  gap: var(--sp-3);
}
.paper-thinking-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start; /* rows keep their natural height; spare height is never spread between them */
  gap: var(--sp-1) var(--sp-2);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-inner); /* the kit makes --r-control a pill, which turns a tall card into an oval */
  background: var(--panel2);
}
.paper-thinking-symbol {
  grid-column: 1;
  font-size: var(--fs-lg);
}
.paper-thinking-meta,
.paper-thinking-detail,
.paper-thinking-reason {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.paper-thinking-outcome {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding: 1px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.paper-thinking-outcome.is-take {
  color: var(--up-text);
}
.paper-thinking-outcome.is-skip {
  color: var(--down-text);
}
.paper-thinking-meta {
  grid-column: 1 / -1;
}
.paper-thinking-reason,
.paper-thinking-detail,
.paper-thinking-inputs,
.paper-context {
  grid-column: 1 / -1;
}
.paper-thinking-label {
  display: block;
  color: var(--faint);
  font-size: var(--u-text-xs);
  font-weight: 600;
}
.paper-context {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* A quiet text toggle with a chevron (like the other Desk disclosures): no box, ring only for the keyboard.
   Always a 44px touch target: scripts/paper-context-browser.mjs pins that at every width. */
.paper-context > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap-min);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  list-style: none;
  cursor: pointer;
}
.paper-context > summary::-webkit-details-marker {
  display: none;
}
.paper-context > summary::before {
  content: '▸';
  color: var(--muted);
}
.paper-context[open] > summary::before {
  content: '▾';
}
.paper-context > summary:focus:not(:focus-visible) {
  outline: 0;
}
.paper-context > summary:focus-visible,
.paper-context-ref:focus-visible {
  outline: 2px solid var(--acc-ring);
  outline-offset: 2px;
}
.paper-context-items {
  display: grid;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: var(--sp-1) 0 var(--sp-2);
  font-size: var(--fs-sm);
}
.paper-context-row {
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: start;
  min-width: 0;
}
.paper-context-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--u-radius-pill);
  font-size: var(--u-text-xs);
  font-weight: 700;
  white-space: nowrap;
}
.paper-context-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.paper-context-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
}
.paper-context-day {
  color: var(--muted);
  font-size: var(--u-text-xs);
  font-variant-numeric: tabular-nums;
}
.paper-context-line {
  min-width: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}
.paper-context-missing {
  margin: 0 0 var(--sp-2);
  color: var(--muted);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}
.paper-context-ref {
  height: 24px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--u-radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--u-text-xs);
  cursor: pointer;
}
@media (max-width: 600px), (any-pointer: coarse) {
  .paper-context-ref {
    min-height: var(--tap-min);
  }
}
.paper-thinking-inputs {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.paper-thinking-inputs li {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 24px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--u-radius-pill);
  font-size: var(--u-text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paper-thinking-more {
  align-self: start;
}
/* #endregion */
/* Narrow: each row becomes a labelled card, so nothing needs sideways scrolling. */
@container (max-width: 920px) {
  .paper-table thead {
    display: none;
  }
  .paper-table,
  .paper-table tbody,
  .paper-table tr,
  .paper-table td {
    display: block;
    width: 100%;
  }
  .paper-table tr {
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-control);
    background: var(--panel2);
  }
  .paper-table td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
    border-bottom: 0;
    text-align: right;
  }
  .paper-table td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    text-align: left;
  }
  .paper-reason {
    max-width: none;
    text-align: right;
  }
}
@media (max-width: 600px) {
  .desk-dialog.paper-dialog {
    width: calc(100vw - 32px);
    padding: var(--sp-3);
  }
}
/* #endregion */