/* The auction explorer, on app.css and the tokens in styles.css. */

.top h1 .home { color: inherit; text-decoration: none; }
.top h1 .sub { color: var(--color-text-secondary); font-weight: 400; }

table.xauction { border-collapse: collapse; width: 100%; max-width: 28rem; margin: .5rem 0; table-layout: fixed; }
table.xauction th { font-size: .8rem; font-weight: 600; text-align: center; padding: .2rem; background: #334155; color: #fff; }
table.xauction th .side { display: block; font-weight: 400; font-size: .7rem; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.xauction td { text-align: center; padding: .15rem; border-bottom: 1px solid var(--color-border-tertiary); height: 2.1rem; }
table.xauction td.next { color: var(--color-text-info); font-weight: 600; background: var(--color-background-info); }

button.xc { border: none; background: none; padding: .15rem .4rem; font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: var(--border-radius-md); }
button.xc:hover, button.xc:focus-visible { background: var(--color-background-secondary); }
button.xc.unknown { color: var(--color-text-tertiary); }

table.xcalls { border-collapse: collapse; width: 100%; }
table.xcalls th { text-align: left; font-size: .8rem; font-weight: 500; color: var(--color-text-secondary); padding: .2rem .4rem; border-bottom: 1px solid var(--color-border-secondary); }
table.xcalls td { padding: .2rem .4rem; border-bottom: 1px solid var(--color-border-tertiary); vertical-align: top; }
table.xcalls td.call { width: 4.5rem; white-space: nowrap; }
table.xcalls td.meaning { font-size: .92rem; }
table.xcalls tr.unknown td { color: var(--color-text-tertiary); }
table.xcalls .reason { font-size: .8rem; color: var(--color-text-secondary); margin-top: .1rem; }
table.xcalls .reason code { font-size: .75rem; }

.flag { display: inline-block; font-size: .7rem; padding: 0 .35rem; border-radius: 4px; vertical-align: middle; }
.flag.alert { background: var(--color-background-warning); color: var(--color-text-warning); }
.flag.announce { background: var(--color-background-info); color: var(--color-text-info); }

.diag { margin: .2rem 0; }
.diag.error { color: var(--color-text-danger); }
.diag.warning { color: var(--color-text-warning); }

@media (max-width: 860px) {
  table.xauction { max-width: none; }
}