/* THE HONEST RUG. A screener on the loom: the dark base of the rug, ivory thread, the dyes of the kilim, stitched
   patches like the RUGGED label, knot buttons with stepped corners, woven 3x5 glyphs for everything that shouts.
   Three columns like a trading terminal: the rug and its clock, the chart and the tape, the trade and the wallet. */
:root {
  --base: #15100b;
  --cloth: #1e1711;
  --cloth2: #291f17;
  --line: #3b2d21;
  --ivory: #e8dcc0;
  --paper: #f4ecd8;
  --muted: #a89a80;
  --dim: #6e6252;
  --madder: #b8382a;
  --madder2: #8f2a1f;
  --green: #5f9a6b;
  --green2: #3f6b4a;
  --ochre: #c9962b;
  --ochre2: #a97a1f;
  --indigo: #3a4f7a;
  --indigo2: #23365a;
  --linen: #d6cec0;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
  background: var(--base) repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px);
  color: var(--ivory);
  font: 12.5px/1.5 var(--mono);
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
}
a { color: var(--ochre); text-decoration: none; }
a:hover { color: var(--paper); }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }
.up { color: var(--green); }
.down { color: var(--madder); }
.gold { color: var(--ochre); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.woven { display: inline-block; vertical-align: middle; }
.k, .lbl { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; }
b { font-weight: 500; color: var(--ivory); }

/* tooltips: the explanations live here and in the document, not on the face of the terminal */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--paper); color: #2a1d12; padding: 8px 10px; font: 400 12px/1.45 var(--mono);
  width: max-content; max-width: min(250px, 80vw); white-space: normal; text-transform: none; letter-spacing: 0;
  display: none; pointer-events: none;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip].tipon::after { display: block; }
[data-tip].tipr::after { left: auto; right: 0; }
[data-tip].tipup::after { top: auto; bottom: calc(100% + 8px); }

/* patches of cloth with a running stitch inside the edge */
.patch {
  background: var(--cloth);
  border: 1px solid var(--line);
  outline: 1px dashed rgba(201, 150, 43, 0.3);
  outline-offset: -5px;
  padding: 14px 16px;
  position: relative;
}

/* knot buttons: stepped corners like knots on the grid, a darker thread inside */
.knot {
  border: 0;
  padding: 9px 14px;
  background: var(--indigo);
  color: var(--ivory);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.1);
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
  transition: filter 0.12s, transform 0.05s;
}
.knot:hover { filter: brightness(1.12); }
.knot:active { transform: translateY(1px); }
.knot:disabled { filter: grayscale(0.6) brightness(0.7); cursor: not-allowed; }
.knot.buy { background: var(--green2); }
.knot.sell { background: var(--madder2); }
.knot.gold { background: var(--ochre2); color: #1a120a; }
.knot.ivory { background: var(--ivory); color: var(--madder2); }
.knot.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line), inset 0 0 0 3px transparent; outline: 1px dashed rgba(201, 150, 43, 0.35); outline-offset: -4px; }
.knot.big { padding: 13px 16px; width: 100%; }
.knot.small { padding: 5px 9px; font-size: 11.5px; }
.knot .woven { fill: currentColor; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25); } }

/* header: wordmark, the coin, the blocks, the wallet; the numbers sit on their own row under it */
.top {
  display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 16px; align-items: center;
  padding: 10px 22px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), transparent);
}
.brand { display: inline-flex; align-items: center; color: var(--ivory); }
.coinpill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--cloth2); border: 1px solid var(--line); }
.coinpill .addr { color: var(--dim); font-size: 11px; }
.dot { display: inline-block; width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.dead { background: var(--madder); box-shadow: 0 0 6px var(--madder); }
.dot.live { animation: blink 1.6s steps(2) infinite; }
.statsbar { display: flex; gap: 0; padding: 0 22px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.18); overflow-x: auto; scrollbar-width: none; }
.statsbar::-webkit-scrollbar { display: none; }
.stat { display: flex; flex-direction: column; padding: 7px 18px 7px 0; margin-right: 18px; border-right: 1px solid var(--line); min-width: 84px; }
.stat:last-child { border-right: 0; }
.stat .k { white-space: nowrap; }
.stat .v { color: var(--ivory); font-size: 13px; white-space: nowrap; }
.stat .v small { color: var(--muted); font-size: 11px; }
.blocks { color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; white-space: nowrap; justify-self: end; }
.blocks .tick { display: inline-block; width: 6px; height: 6px; background: var(--ochre); }
.blocks.beat .tick { animation: beat 0.6s ease-out; }
@keyframes beat { 0% { transform: scale(2); background: var(--paper); } 100% { transform: scale(1); } }
@keyframes blink { 50% { opacity: 0.25; } }
.nav { display: flex; gap: 14px; }
.navlink { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; font-size: 11px; letter-spacing: 0.08em; }
.navlink.on, .navlink:hover { color: var(--ivory); border-bottom-color: var(--ochre); }
.connectwrap { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; background: var(--cloth); border: 1px solid var(--line); padding: 8px; display: grid; gap: 6px; min-width: 220px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.menu .knot { width: 100%; }
.menu .addrline { color: var(--muted); font-size: 11px; padding: 4px 2px; word-break: break-all; }

/* notice: preview or testnet */
.notice { margin: 10px 22px 0; padding: 6px 12px; border: 1px dashed var(--ochre); color: var(--ochre); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.notice .knot.small { padding: 3px 8px; letter-spacing: 0.04em; }

/* the terminal: three columns */
.view { padding: 16px 22px 40px; max-width: 1500px; margin: 0 auto; }
.term { display: grid; grid-template-columns: 316px minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rugbox { padding: 10px; background: var(--linen); border-color: #b9ad9a; outline-color: rgba(60, 40, 20, 0.35); }
.rug { display: flex; justify-content: center; }
.rug svg { display: block; height: auto; }
.weaving { height: 300px; display: flex; align-items: center; justify-content: center; }
.rugcap { color: #4a3a2a; margin-top: 6px; display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.say { padding: 0 2px; display: flex; flex-direction: column; gap: 8px; }
.say .headline .woven { color: var(--ivory); width: 100%; height: auto; max-width: 340px; }
.say .subline { margin: 0; color: var(--muted); line-height: 1.55; }

/* the clock */
.clock { display: flex; flex-direction: column; gap: 8px; }
.clock .phase { color: var(--muted); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.clock .big .woven { color: var(--ivory); }
.clock.open .big .woven { color: var(--ochre); }
.clock.landed .big .woven { color: var(--paper); }
.clock.dead .big .woven { color: var(--madder); }
.clock .small { color: var(--muted); font-size: 11.5px; }
.bar { height: 8px; display: grid; grid-template-columns: var(--bar-cols, 1fr 1fr 2fr); gap: 2px; margin-top: 4px; }
.bar span { display: block; height: 100%; background: var(--cloth2); }
.bar .done { background: var(--ochre2); }
.bar .now { background: repeating-linear-gradient(90deg, var(--madder2) 0 6px, var(--madder) 6px 12px); }
.bar .ahead { background: var(--cloth2); }
.barcap { display: flex; justify-content: space-between; color: var(--dim); font-size: 10px; letter-spacing: 0.04em; }
.pullrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.blink { display: inline-block; width: 8px; height: 8px; background: var(--madder); animation: blink 1s steps(2) infinite; }

/* the chart */
.chartbox { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; }
.charthead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.charthead .pair { display: inline-flex; gap: 8px; align-items: center; }
.charthead .pricebig { font-size: 19px; color: var(--ivory); }
.badge { padding: 1px 6px; font-size: 11px; background: var(--cloth2); border: 1px solid var(--line); white-space: nowrap; }
.badge.up { color: var(--green); border-color: var(--green2); }
.badge.down { color: var(--madder); border-color: var(--madder2); }
.badge .k { margin-right: 4px; font-size: 9.5px; }
.seg { display: inline-flex; gap: 2px; margin-left: auto; }
.seg button { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 2px 8px; font-size: 11px; }
.seg button.on { color: var(--ivory); border-color: var(--ochre); background: var(--cloth2); }
.seg button:hover { color: var(--ivory); }
.chart { height: 380px; position: relative; width: 100%; }
.chart canvas { display: block; }
.chartfoot { display: flex; gap: 14px; color: var(--dim); font-size: 11px; min-height: 16px; flex-wrap: wrap; }
.chartfoot b { color: var(--muted); }

/* tabs: the tape, the holders, the graveyard, the cards */
.tabs { display: flex; flex-direction: column; }
.tabbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: -1px; }
.tabbar button {
  background: var(--cloth2); border: 1px solid var(--line); border-bottom: 0; color: var(--muted); padding: 7px 12px;
  display: inline-flex; gap: 8px; align-items: center; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.tabbar button.on { color: var(--ivory); background: var(--cloth); }
.tabbar .count { color: var(--dim); }
.tabpane { min-height: 160px; padding: 10px 12px; }
.tape { display: grid; grid-template-columns: 64px 46px minmax(70px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr) 100px 24px; gap: 4px 10px; font-size: 12px; }
.tape .th { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.tape > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.tape .new { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: rgba(201, 150, 43, 0.35); } 100% { background: transparent; } }
.tape .you { color: var(--ochre); }
.holdrows { display: grid; gap: 3px; }
.holdrow { display: grid; grid-template-columns: 28px minmax(110px, 1fr) minmax(90px, 1fr) 60px minmax(90px, 1fr); gap: 10px; padding: 4px 8px; position: relative; font-size: 12px; align-items: center; }
.holdrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pct, 0%); background: rgba(58, 79, 122, 0.35); pointer-events: none; }
.holdrow span { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.holdrow.th { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.holdrow .you { color: var(--ochre); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.tile { background: var(--linen); padding: 7px; color: #3a2a1c; cursor: pointer; border: 1px solid #b9ad9a; min-height: 120px; }
.tile:hover { border-color: var(--ochre); }
.tile .tsvg { min-height: 304px; display: flex; justify-content: center; align-items: flex-start; }
.tile svg { width: 192px; height: auto; display: block; }
.tile .t1 { margin-top: 6px; display: flex; justify-content: space-between; font-weight: 500; font-size: 11.5px; }
.tile .t2 { color: #6b5a44; font-size: 10.5px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.card { background: var(--linen); padding: 7px; border: 1px solid #b9ad9a; }
.card svg { width: 192px; height: auto; display: block; margin: 0 auto; }
.card .c1 { color: #3a2a1c; margin-top: 6px; display: flex; justify-content: space-between; font-size: 11px; }
.card .c1.dim { color: #6b5a44; }
.empty { color: var(--dim); padding: 16px 0; }

/* the trade */
.trade { display: flex; flex-direction: column; gap: 10px; }
.tradehead { display: flex; gap: 6px; align-items: center; }
.side {
  background: var(--cloth2); border: 1px solid var(--line); color: var(--muted); padding: 6px 14px; letter-spacing: 0.08em; font-size: 11.5px;
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
.side.on { color: var(--ivory); background: var(--indigo2); border-color: var(--indigo); }
.side[data-side="buy"].on { background: var(--green2); }
.side[data-side="sell"].on { background: var(--madder2); }
.mine { margin-left: auto; color: var(--muted); font-size: 11px; }
.field { display: block; }
.fieldname { display: block; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.field input { width: 100%; background: var(--base); color: var(--ivory); border: 1px solid var(--line); padding: 9px 12px; font-size: 18px; outline: none; }
.field input:focus { border-color: var(--ochre); }
.quick { display: flex; gap: 6px; }
.quick button { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 2px 8px; font-size: 11px; }
.quick button:hover { color: var(--ivory); border-color: var(--ochre); }
.quote { min-height: 40px; color: var(--muted); line-height: 1.55; display: grid; gap: 2px; }
.quote .ql { display: flex; justify-content: space-between; gap: 10px; }
.quote .warn { color: var(--madder); }
.fine { color: var(--dim); font-size: 11px; min-height: 0; }
.toast { padding: 8px 10px; background: var(--cloth2); border-left: 3px solid var(--ochre); color: var(--ivory); font-size: 12px; }
.toast.bad { border-left-color: var(--madder); }

/* wallet panels */
.panel { display: flex; flex-direction: column; gap: 8px; }
.panelhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rows { display: grid; gap: 6px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; background: var(--cloth2); }
.row .v { font-size: 13px; }
.row .actions { display: flex; gap: 6px; }
.reflink { display: flex; gap: 8px; align-items: center; background: var(--base); border: 1px solid var(--line); padding: 7px 10px; word-break: break-all; font-size: 12px; }
.reflink code { flex: 1; color: var(--ivory); }

/* the label as a document */
.read { display: grid; grid-template-columns: 200px 1fr; gap: 30px; max-width: 1100px; margin: 0 auto; }
.readnav { position: sticky; top: 20px; align-self: start; display: flex; flex-direction: column; gap: 6px; }
.readnav a { color: var(--muted); padding: 4px 0; border-left: 2px solid transparent; padding-left: 10px; }
.readnav a:hover { color: var(--ivory); border-left-color: var(--ochre); }
.doc { max-width: 760px; font-size: 13px; }
.doc section { padding: 22px 0 8px; border-bottom: 1px solid var(--line); }
.doc h2 { margin: 0 0 12px; }
.doc p { margin: 0 0 12px; color: var(--ivory); line-height: 1.65; }
.doc .code, .doc .num { background: var(--cloth); border: 1px solid var(--line); padding: 12px 14px; color: var(--muted); overflow-x: auto; }
.doc pre { margin: 0 0 12px; white-space: pre; }
.doc table { border-collapse: collapse; width: 100%; }
.doc td, .doc th { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: right; }
.doc th:first-child, .doc td:first-child { text-align: left; }
.doc th { color: var(--muted); font-weight: 500; }

/* coin page */
.coinpage { display: grid; grid-template-columns: minmax(280px, 36%) 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; }
.coinpage .labelbox { display: flex; flex-direction: column; gap: 14px; }
.coinpage .coinline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.coinpage .share { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.coinpage .share code { background: var(--base); padding: 8px 10px; border: 1px solid var(--line); }

/* footer */
.foot { padding: 16px 22px 36px; border-top: 1px solid var(--line); color: var(--dim); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 11px; align-items: center; }
.foot b { color: var(--muted); font-weight: 500; }

@media (max-width: 1240px) {
  .term { grid-template-columns: 316px minmax(0, 1fr); }
  .col.right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}
@media (max-width: 900px) {
  .top { grid-template-columns: 1fr auto; gap: 10px 14px; padding: 10px 14px; }
  .coinpill { grid-column: 1 / -1; }
  .blocks { display: none; }
  .statsbar { padding: 0 12px; }
  .term, .read, .coinpage { grid-template-columns: 1fr; }
  .col.right { grid-template-columns: 1fr; }
  .view { padding: 12px 12px 30px; }
  .notice { margin: 10px 12px 0; }
  .readnav { position: static; flex-direction: row; flex-wrap: wrap; }
  .chart { height: 300px; }
  .chartbox { padding: 10px 8px; }
  .tabpane { padding: 10px 8px; }
  .patch { padding: 12px 12px; }
  .clock .big .woven { max-width: 100%; height: auto; }
  .tape { grid-template-columns: 52px 40px 1fr 1fr 70px; }
  .tape .c6, .tape .c7 { display: none; }
}

/* the room */
.chatroom { display: flex; flex-direction: column; gap: 8px; }
.chatlist { max-height: 380px; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding-right: 4px; scrollbar-width: thin; }
.msg { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 6px; font-size: 12.5px; line-height: 1.5; }
.msg:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
.msg.mine { background: rgba(58, 79, 122, 0.2); }
.msg .mt { color: var(--dim); font-size: 11px; }
.msg .mn, .chatbar .mn { color: var(--ochre); }
.msg .mn a { color: var(--ochre); }
.mb { color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid var(--line); padding: 0 4px; line-height: 1.5; }
.mb.mod { color: var(--madder); border-color: var(--madder2); }
.msg .mx { color: var(--ivory); word-break: break-word; flex: 1 1 auto; }
.msg .mdel { margin-left: auto; background: transparent; border: 0; color: var(--dim); padding: 0 4px; line-height: 1; }
.msg .mdel:hover { color: var(--madder); }
.chatbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 8px; }
.chatbar input { flex: 1; min-width: 160px; background: var(--base); color: var(--ivory); border: 1px solid var(--line); padding: 7px 10px; outline: none; }
.chatbar input:focus { border-color: var(--ochre); }