/* market.css — the pieces every $ANGEL page shares (market.js mounts them): the trade panel, the stats, the chart,
   the lists, the details. White paper; green and red only where the market moved. */
:root { --up: #12a150; --down: #e5484d; }
.up { color: var(--up); } .down { color: var(--down); }
/* the trade panel */
.trade { border: 1px solid var(--ink); padding: 0 18px 16px; margin: 0 0 14px; }
.trade .tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--rule); margin: 0 -18px 16px; padding: 0 18px; }
.trade .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 13px 0 11px; color: var(--dim); font: 400 11px/1 var(--gmono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.trade .tabs button:hover { color: var(--ink); background: none; }
.trade .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.trade .tabs .spacer { flex: 1; }
.trade .tabs .slip { align-self: center; font: 400 10px/1 var(--gmono); letter-spacing: .08em; color: var(--dim); text-transform: none; }
.trade .tabs .slip button { padding: 4px 3px; font-size: 10px; letter-spacing: .04em; text-transform: none; border: 0; }
.trade .tabs .slip button.on { color: var(--ink); border-bottom: 1px solid var(--ink); }
.amount { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--ink); padding: 2px 0 8px; margin: 0 0 10px; cursor: text; }
.amount input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0; background: none; font: 300 30px/1.1 var(--sans); letter-spacing: -.01em; font-feature-settings: "tnum"; color: var(--ink); }
.amount input:focus { outline: 0; }
.amount .unit { font: 400 12px/1 var(--gmono); letter-spacing: .08em; color: var(--dim); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.chips button { font: 400 10.5px/1 var(--gmono); letter-spacing: .06em; padding: 6px 9px; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 999px; }
.chips button:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.quote { list-style: none; margin: 0 0 12px; padding: 0; font: 400 11.5px/1.5 var(--gmono); min-height: 70px; }
.quote li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: #555; }
.quote li b { font-weight: 400; color: var(--ink); text-align: right; }
.quote li.main { font: 400 14px/1.45 var(--sans); color: var(--ink); padding-bottom: 5px; }
.quote li.main b { font-weight: 500; }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #444; cursor: pointer; }
.consent input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--ink); flex: none; cursor: pointer; }
.consent a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.consent.nudge { color: var(--ink); animation: nudge .35s; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#act { width: 100%; height: 48px; font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; background: var(--ink); color: #fff; border: 1px solid var(--ink); cursor: pointer; }
#act:hover { background: #fff; color: var(--ink); }
#act.sell { background: var(--down); border-color: var(--down); } #act.sell:hover { background: #fff; color: var(--down); }
#act.burn { background: #fff; color: var(--ink); } #act.burn:hover, #act.burn.armed { background: var(--ink); color: #fff; }
#act:disabled { background: var(--soft); border-color: var(--soft); color: var(--dim); cursor: default; opacity: 1; }
.bal { margin: 10px 0 0; font: 400 11px/1.5 var(--gmono); color: var(--dim); }
.bal a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.stats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--rule); margin: 0 0 18px; }
.stats > div { padding: 0 12px 14px 0; min-width: 0; }
.stats dt { font: 400 10px/1.4 var(--gmono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
.stats dd { margin: 0; font: 400 15px/1.3 var(--sans); font-feature-settings: "tnum"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats dd small { display: block; font: 400 11px/1.4 var(--gmono); color: var(--dim); margin-top: 2px; }
.chartbox { position: relative; margin: 0 0 8px; }
.chartbar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.tf { display: flex; gap: 4px; }
.tf button { font: 400 10.5px/1 var(--gmono); letter-spacing: .1em; padding: 5px 8px; background: #fff; color: var(--dim); border: 1px solid transparent; }
.tf button:hover { color: var(--ink); background: #fff; }
.tf button.on { color: var(--ink); border-color: var(--ink); }
#chart { display: block; width: 100%; height: 340px; cursor: crosshair; }
.chartnote { min-height: 18px; margin: 4px 0 26px; font: 400 11px/1.5 var(--gmono); color: var(--dim); }
.list { list-style: none; margin: 10px 0 0; padding: 0; font: 400 11.5px/1.4 var(--gmono); max-height: 460px; overflow: auto; border-top: 1px solid var(--ink); }
.list li { display: grid; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.list li.empty { display: block; color: var(--dim); }
.list a { color: var(--ink); border-bottom: 0; }
.list a:hover { text-decoration: underline; }
.acts li { grid-template-columns: 34px 38px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr) 14px; }
.acts .when, .acts .tx { color: var(--dim); }
.acts .verb { text-transform: uppercase; letter-spacing: .08em; color: inherit; } /* not the site's blue .verb */
.acts li.buy { color: var(--up); } .acts li.sell { color: var(--down); } .acts li.burn { color: var(--ink); } .acts li.send { color: var(--dim); } /* the site's old .buy/.sell/.burn colours stop here */
.acts .num, .holds .num { text-align: right; font-feature-settings: "tnum"; }
.holds li { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 62px; }
.holds .rank { color: var(--dim); }
.tag.mini { font: 400 9px/1 var(--gmono); padding: 2px 5px; margin-left: 6px; vertical-align: 1px; }
.tag.art { background: var(--ink); color: #fff; }
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin: 34px 0 0; border-top: 1px solid var(--ink); }
.details > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.details dt { font: 400 10px/1.4 var(--gmono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.details dd { margin: 0; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.details dd a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.histnote { font: 400 11px/1.5 var(--gmono); color: var(--dim); }
/* while the history loads: a short line runs along the list's top rule, and a dot breathes by the note, so an empty
   list never reads as an empty market */
.list li.loading { position: relative; padding: 16px 0 14px; border-bottom: 0; color: var(--ink); }
.list li.loading::before { content: ""; position: absolute; top: 0; left: 0; width: 24%; height: 2px; background: var(--ink); animation: sweep 1.3s cubic-bezier(.6, 0, .4, 1) infinite alternate; }
@keyframes sweep { to { left: 76%; } }
#histNote.busy { color: var(--ink); }
#histNote.busy::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 0 0; border-radius: 50%; background: var(--ink); vertical-align: 1px; animation: breathe 1.1s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .list li.loading::before, #histNote.busy::before { animation: none; } }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .details { grid-template-columns: 1fr; } #chart { height: 260px; } }
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acts li { grid-template-columns: 30px 34px minmax(0, 1fr) minmax(0, 1fr) 14px; }
  .acts .who { display: none; }
}