/* This warm local background distinguishes the copy from the live program. */
body { background: #fbf1e4; }

.rolling-area {
  margin: 18px 0 20px;
  padding: 14px;
  border: 1px solid #cdb9e6;
  border-left: 6px solid #8d62c8;
  border-radius: 16px;
  background: #faf7ff;
}

.rolling-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.rolling-heading h2 { margin: 0; color: #55357b; }
.rolling-heading p { margin: 4px 0 0; color: #72598d; font-size: 13px; }
.rolling-description[hidden] { display: none; }
.rolling-heading-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.rolling-heading-actions button { white-space: nowrap; background: #e7d7f8; color: #55357b; }
.rolling-heading-actions button.rolling-primary { background: #8d62c8; color: #fff; }
.rolling-position {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eee4fb;
  color: #67438f;
  font-size: 12px;
  font-weight: 800;
}

.rolling-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.rolling-stat {
  min-height: 66px;
  padding: 9px 10px;
  border: 1px solid #d9c9ef;
  border-radius: 11px;
  background: #f4edff;
  color: #5a377f;
}

.rolling-stat small { display: block; color: #7d6497; font-weight: 700; }
.rolling-stat b { display: block; margin-top: 3px; font-size: 18px; }

.rolling-quote {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: end;
  padding: 10px;
  margin: 10px 0;
  border-radius: 11px;
  background: #f0e7fb;
}

.rolling-quote label { display: grid; gap: 4px; color: #6a4b86; font-size: 12px; font-weight: 800; }
.rolling-quote input { max-width: 160px; }
.rolling-quote small { color: #775d8e; font-size: 12px; }

.rolling-grid-dialog {
  width: min(500px, calc(100% - 32px));
  max-width: 500px;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.rolling-form {
  display: block;
}

.rolling-form h2 { margin: 0; color: #55357b; }
.rolling-form > .sub { margin: 5px 0 12px; }
.rolling-form label { display: block; margin: 13px 0 5px; color: var(--sub); font-size: 13px; font-weight: 400; }
.rolling-form .rolling-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.rolling-form .rolling-form-actions button { white-space: nowrap; background: #e7d7f8; color: #55357b; }
.rolling-form .rolling-form-actions button.rolling-primary { background: #8d62c8; color: #fff; }
.rolling-form-note { margin: 13px 0 0; padding: 10px 12px; border-radius: 10px; background: #f4edff; color: #755b8e; font-size: 12px; line-height: 1.45; }

.rolling-list { display: grid; gap: 7px; margin-top: 11px; }
.rolling-area.collapsed .rolling-list,
.rolling-area.collapsed .rolling-mode-note { display: none; }
.rolling-card {
  border-color: #d7c6ec;
}

.rolling-card .rolling-id { background: #efe5fb; border-color: #c6a7e7; }
.rolling-card .order-trace { background: #f1eafb; border-color: #d8c7e9; }
.rolling-profit-stack .metric-half { padding-left: 6px; padding-right: 6px; }
.rolling-profit-stack .metric-half small { letter-spacing: -.45px; }
.rolling-profit-stack .rolling-conversion-detail {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: #52705a;
  font-size: 8px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rolling-empty { padding: 18px; text-align: center; color: #78678a; background: #fff; border-radius: 11px; }
.rolling-mode-note { margin: 10px 2px 0; color: #6d567f; font-size: 12px; }
.rolling-error { min-height: 17px; margin: 8px 0 0; color: #9a2e2e; font-size: 12px; }
.rolling-error:empty { display: none; }
.rolling-sales { margin-top: 9px; color: #6d567f; font-size: 12px; }

@media (max-width: 900px) {
}

/* The ordinary card has one additional investment column.  Rolling cards do
   not use that metric, so span the conversion-profit box across the freed
   space and keep switch/order/actions in the same final columns. */
@media (min-width: 1000px) {
  .rolling-card > .rolling-profit-stack { grid-column: 4 / 6; }
  .rolling-card > .quantity-box { grid-column: 6; }
  .rolling-card > .switch { grid-column: 7; }
  .rolling-card > .order-trace { grid-column: 8; }
  .rolling-card > .grid-actions,
  .rolling-card > .grid-delete { grid-column: 9; }
}

@media (min-width: 761px) and (max-width: 999px) {
  .rolling-card > .order-trace { grid-column: 1 / -1; grid-row: 2; }
  .rolling-card > .grid-actions { grid-column: 1 / 6; grid-row: 3; }
  .rolling-card > .grid-delete { grid-column: 6; grid-row: 3; }
}

@media (max-width: 620px) {
  .rolling-heading { flex-direction: column; }
  .rolling-heading-actions { justify-content: flex-start; }
  .rolling-summary { grid-template-columns: 1fr 1fr; }
  .rolling-quote label { width: 100%; }
  .rolling-quote input { max-width: none; width: 100%; }
}

@media (max-width: 760px) {
  .rolling-card > .order-trace { grid-column: 1 / -1; grid-row: 4; }
  .rolling-card > .grid-actions { grid-column: 1 / 3; grid-row: 5; }
  .rolling-card > .grid-delete { grid-column: 3; grid-row: 5; }
}