/* The ADCOIN Wall — a classifieds page that happens to be onchain. */

:root{
  --paper:#f4efe4;
  --paper-2:#efe8da;
  --ink:#1a1712;
  --ink-2:#5d564a;
  --ink-3:#8c8371;
  --rule:#c9bfa8;
  --rule-soft:#ded5c0;
  --red:#a3231d;
  --gold:#8a6a12;
  --green:#3f6b33;
  --shadow:0 1px 0 #fff, 0 2px 14px rgba(60,45,20,.10);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(190,170,130,.16), transparent 55%),
    radial-gradient(circle at 88% 92%, rgba(190,170,130,.13), transparent 55%);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Inter,system-ui,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- masthead ---------- */
.masthead{max-width:1440px;margin:0 auto;padding:26px 22px 0}
.rule-double{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);height:5px}
.rule-thin{border-top:1px solid var(--rule);margin:10px 0}
.masthead-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:14px 0 6px}
.masthead-row h1{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:900;
  font-size:clamp(30px,6.2vw,66px);
  letter-spacing:-.02em;
  margin:0;
  text-align:center;
  flex:1;
}
.masthead-side{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.dateline{
  margin:0 0 10px;text-align:center;color:var(--ink-2);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  font-family:"IBM Plex Mono",monospace;
}

/* ---------- ledger strip ---------- */
.ledger{
  max-width:1440px;margin:16px auto 0;padding:0 22px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
}
.ledger-cell{
  padding:14px 16px;text-align:center;border-left:1px solid var(--rule-soft);
}
.ledger-cell:first-child{border-left:0}
.ledger-cell b{
  display:block;font-family:"Playfair Display",Georgia,serif;
  font-size:clamp(20px,2.6vw,30px);line-height:1.1;
}
.ledger-cell span{
  display:block;margin-top:3px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- layout ---------- */
.sheet{max-width:1580px;margin:22px auto 0;padding:0 22px}
.columns{max-width:1580px;margin:22px auto 40px;padding:0 22px}
.column{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:1040px){
  .column{grid-template-columns:1fr}
  .ledger{grid-template-columns:repeat(2,1fr)}
}

/* ---------- the wall ---------- */
.wall-frame{
  background:var(--paper-2);
  border:1px solid var(--ink);
  box-shadow:var(--shadow);
  padding:10px;
}
.wall-caption,.wall-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.wall-caption{padding:2px 2px 8px;border-bottom:1px solid var(--rule-soft);margin-bottom:8px}
.wall-caption span:first-child{color:var(--ink);font-weight:600}
.wall-foot{padding-top:8px;border-top:1px solid var(--rule-soft);margin-top:8px}
.wall-scroll{overflow-x:auto;position:relative;background:#fbf7ee;border:1px solid var(--rule-soft)}
#wall{display:block;cursor:crosshair}
.wall-legend{display:flex;gap:12px;align-items:center}
.cap-right{display:flex;align-items:center;gap:14px}
.zoom{display:inline-flex;border:1px solid var(--rule)}
.zbtn{
  background:transparent;border:0;border-left:1px solid var(--rule);
  padding:3px 9px;cursor:pointer;color:var(--ink-2);
  font:500 10px/1.6 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
}
.zbtn:first-child{border-left:0}
.zbtn.is-on{background:var(--ink);color:var(--paper)}
.wall-legend i{display:inline-block;width:9px;height:9px;margin-right:4px;vertical-align:-1px;border:1px solid var(--rule)}
.sw-taken{background:#e4d9be}.sw-grace{background:#e8c98b}.sw-free{background:#fbf7ee}

.ghost{
  position:absolute;pointer-events:none;
  border:1.5px dashed var(--red);background:rgba(163,35,29,.10);
}

/* ---------- panels ---------- */
.panel{
  background:var(--paper-2);border:1px solid var(--ink);box-shadow:var(--shadow);padding:16px 16px 18px;
}
.panel.compact{padding-bottom:14px}
.panel h2{
  font-family:"Playfair Display",Georgia,serif;font-size:19px;margin:0 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--rule-soft);
}
.muted{color:var(--ink-2)}
.fineprint{font-size:11.5px;color:var(--ink-3);margin:7px 0 0;line-height:1.45}

label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:12px 0 0}
input,textarea,select{
  width:100%;margin-top:5px;padding:9px 10px;
  background:#fbf7ee;border:1px solid var(--rule);color:var(--ink);
  font-family:"IBM Plex Mono",monospace;font-size:13px;border-radius:0;
}
textarea{resize:vertical;line-height:1.45}
input:focus,textarea:focus,select:focus{outline:2px solid var(--gold);outline-offset:-2px}
.counter{display:block;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);margin-top:4px}

.btn{
  display:inline-block;padding:10px 16px;margin-top:14px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  font:600 13px/1 Inter,sans-serif;letter-spacing:.04em;cursor:pointer;
  transition:background .15s,color .15s;
}
.btn:hover{background:var(--red);border-color:var(--red)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.ghost-btn{background:transparent;color:var(--ink)}
.btn.ghost-btn:hover{background:var(--ink);color:var(--paper)}
.btn.wide{display:block;width:100%;text-align:center;text-decoration:none}
.btn-row{display:flex;gap:8px}
.btn-row .btn{flex:1;text-align:center}

.linklike{
  background:none;border:0;padding:0;margin-top:12px;cursor:pointer;
  font:500 12px Inter,sans-serif;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;
}
.linklike:hover{color:var(--ink)}
.linklike.danger:hover{color:var(--red)}

.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 4px;font-size:13px}
.facts dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);align-self:center}
.facts dd{margin:0;font-family:"IBM Plex Mono",monospace;text-align:right}

.msg{margin:10px 0 0;font-size:12.5px;min-height:1em}
.msg.err{color:var(--red)}
.msg.good{color:var(--green)}

.ticker{list-style:none;margin:0;padding:0;font-size:12.5px}
.ticker li{padding:6px 0;border-bottom:1px dotted var(--rule-soft);display:flex;gap:8px;align-items:baseline}
.ticker li:last-child{border-bottom:0}
.ticker .k{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:1px 5px;border:1px solid var(--rule);color:var(--ink-2);white-space:nowrap;
}
.ticker .k.evicted,.ticker .k.grace{border-color:var(--red);color:var(--red)}
.ticker .k.claim{border-color:var(--green);color:var(--green)}

.rules{margin:0;padding-left:18px;font-size:13px;color:var(--ink-2)}
.rules li{margin-bottom:7px}
.ca{margin:10px 0 0;font-size:10.5px;color:var(--ink-3);word-break:break-all;font-family:"IBM Plex Mono",monospace}
.ca code{font-size:10.5px}

/* ---------- hover popup ---------- */
.pop{
  position:fixed;z-index:60;max-width:min(330px, calc(100vw - 24px));
  background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 6px 26px rgba(45,35,15,.24);padding:12px 13px;
}
.pop[hidden]{display:none}
/* Pinned by a click, so the link and report button can be reached. */
.pop.is-pinned{border-width:2px;box-shadow:0 10px 34px rgba(45,35,15,.34)}
.pop-x{
  position:absolute;top:4px;right:6px;display:none;
  background:none;border:0;cursor:pointer;color:var(--ink-3);
  font-size:18px;line-height:1;padding:2px 4px;
}
.pop.is-pinned .pop-x{display:block}
.pop.is-pinned .pop-body{padding-right:16px}
.pop-link{
  display:inline-block;padding:5px 10px;border:1px solid var(--red);
  text-decoration:none !important;
}
.pop-link:hover{background:var(--red);color:#fff !important}
.pop-body{font-size:13.5px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}
.pop-meta{
  display:flex;justify-content:space-between;gap:10px;margin-top:9px;padding-top:7px;
  border-top:1px solid var(--rule-soft);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--ink-3);
}
.pop-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.pop-actions a{font-size:12px;color:var(--red);text-decoration:none;font-weight:600}
.pop-actions a:hover{text-decoration:underline}
.pop-actions .linklike{margin-top:0}

.foot{max-width:1440px;margin:0 auto;padding:0 22px 34px;text-align:center}
.foot p{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin:10px 0 0;
}


/* ---------- sticky top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,228,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink);
}
.topbar-inner{
  max-width:1580px;margin:0 auto;padding:9px 22px;
  display:flex;align-items:center;gap:18px;
}
.brand{
  text-decoration:none;color:var(--ink);white-space:nowrap;
  font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;
}
.brand b{font-weight:600}
.topbar-stats{
  display:flex;gap:8px;align-items:center;margin-left:6px;
  font:400 11.5px/1 "IBM Plex Mono",monospace;color:var(--ink-3);white-space:nowrap;
}
.topbar-stats b{color:var(--ink);font-weight:600}
.topbar-stats .dot{opacity:.5}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:9px}

.btn-cta{
  background:var(--red);color:#fff;border:1px solid var(--red);
  padding:9px 16px;cursor:pointer;white-space:nowrap;
  font:600 13px/1 Inter,sans-serif;letter-spacing:.02em;
  transition:background .15s,border-color .15s,transform .08s;
}
.btn-cta:hover{background:#8c1c17;border-color:#8c1c17}
.btn-cta:active{transform:translateY(1px)}
.btn-cta[disabled]{opacity:.5;cursor:not-allowed}
.btn-cta.big{padding:13px 26px;font-size:15px}
.btn-cta.wide{display:block;width:100%;margin-top:14px}

.btn-wallet{
  background:transparent;color:var(--ink);border:1px solid var(--ink);
  padding:9px 15px;cursor:pointer;white-space:nowrap;
  font:600 13px/1 Inter,sans-serif;
}
.btn-wallet:hover{background:var(--ink);color:var(--paper)}

.wallet-chip{
  display:flex;align-items:center;gap:9px;padding:6px 8px 6px 11px;
  border:1px solid var(--rule);background:#fbf7ee;
  font:500 12px/1 "IBM Plex Mono",monospace;
}
.chip-cells{color:var(--red);font-weight:600}
.chip-x{background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:16px;line-height:1;padding:0 2px}
.chip-x:hover{color:var(--red)}

@media (max-width:860px){
  .topbar-stats{display:none}
  .btn-cta{padding:9px 12px;font-size:12px}
}

/* ---------- hero ---------- */
.hero{text-align:center;padding:20px 0 6px}
.hero-line{margin:0 0 14px;font-size:16px;color:var(--ink-2)}
.hero-sub{
  margin:11px 0 0;font:400 11.5px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:80;background:rgba(30,24,14,.44);
  display:flex;align-items:flex-start;justify-content:center;padding:5vh 18px 18px;
  overflow-y:auto;
}
/* a display rule beats the UA's [hidden]{display:none}, so restate it */
.modal-backdrop[hidden],.wallet-chip[hidden],.btn-wallet[hidden],
.ghost[hidden],#stepConnect[hidden],#stepClaim[hidden]{display:none}
.modal{
  width:100%;max-width:440px;background:var(--paper);
  border:1px solid var(--ink);box-shadow:0 18px 60px rgba(35,25,10,.4);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--ink);
}
.modal-head h2{font-family:"Playfair Display",Georgia,serif;font-size:21px;margin:0}
.modal-x{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--ink-3);padding:0 2px}
.modal-x:hover{color:var(--red)}
.modal-body{padding:16px}
.lead{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--ink-2)}
.steps li{margin-bottom:7px}
.steps b{color:var(--ink)}

.notice{
  margin:12px 0 0;padding:9px 11px;border:1px solid var(--red);
  background:rgba(163,35,29,.07);font-size:12.5px;color:var(--ink);
}
.notice a{color:var(--red);font-weight:600}

.target{
  margin:13px 0 0;padding:8px 11px;border:1px dashed var(--red);
  background:rgba(163,35,29,.06);
  font:500 12px "IBM Plex Mono",monospace;color:var(--ink);
}
.modal .btn-row{margin-top:4px}
.modal .btn-row .btn-cta,.modal .btn-row .btn{margin-top:14px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  z-index:90;max-width:min(460px,92vw);
  background:var(--ink);color:var(--paper);
  padding:12px 18px;font:500 13.5px/1.45 Inter,sans-serif;
  box-shadow:0 10px 34px rgba(30,22,8,.34);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- contract bar ---------- */
.contract{max-width:1580px;margin:18px auto 0;padding:0 22px}
.contract-inner{
  border:2px solid var(--ink);background:var(--paper-2);
  padding:11px 14px 13px;box-shadow:var(--shadow);
}
.contract-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:8px;
}
.contract-label{
  font:600 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);
}
.contract-pair{font-size:12.5px;color:var(--ink-2)}
.contract-pair b{color:var(--red)}
.contract-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.contract-row code{
  flex:1 1 320px;min-width:0;
  font:500 clamp(11px,1.35vw,15px)/1.35 "IBM Plex Mono",monospace;
  letter-spacing:.01em;color:var(--ink);
  background:#fbf7ee;border:1px solid var(--rule);
  padding:9px 11px;overflow-wrap:anywhere;user-select:all;
}
.btn-copy,.btn-buy{
  flex:0 0 auto;padding:10px 16px;cursor:pointer;white-space:nowrap;
  font:600 13px/1 Inter,sans-serif;text-decoration:none;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  transition:background .15s,border-color .15s;
}
.btn-copy:hover{background:var(--red);border-color:var(--red)}
.btn-copy.done{background:var(--green);border-color:var(--green)}
.btn-buy{background:transparent;color:var(--ink)}
.btn-buy:hover{background:var(--red);border-color:var(--red);color:#fff}
@media (max-width:620px){
  .contract-row code{flex-basis:100%}
  .btn-copy,.btn-buy{flex:1 1 0}
}

/* ---------- pre-launch ---------- */
.contract-inner.is-soon{border-style:dashed}
.contract-row code.soon{
  text-align:center;letter-spacing:.42em;font-weight:600;
  font-size:clamp(15px,2.4vw,22px);color:var(--red);
  background:rgba(163,35,29,.05);border-color:var(--red);
  padding:12px 11px;user-select:none;
}
.soon-note{margin:14px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
#notLaunched .lead{font-size:16px;font-weight:600;color:var(--ink)}
#notLaunched .muted{font-size:13.5px;margin:0 0 10px;line-height:1.55}
#notLaunched b{color:var(--red)}
.contract-warn{
  margin:9px 0 0;padding:8px 11px;
  border-left:3px solid var(--red);background:rgba(163,35,29,.05);
  font-size:12.5px;line-height:1.5;color:var(--ink-2);
}
.contract-warn b{color:var(--red)}