.s5-wall-host {
  height: 100%;
  overflow: hidden;
}

.s5-wall {
  display: grid;
  grid-template-rows: 44px 78px minmax(0, 1fr);
  gap: 3px;
  height: 100%;
  overflow: hidden;
  color: #d6ddd5;
  background: #020302;
  font-size: clamp(9px, calc(10px * var(--wall-scale, 1)), 12px);
}

.s5-wall-head,
.s5-wall-panel {
  border: 1px solid #263026;
  border-top: 2px solid #ff9d00;
  background: #060806;
}

.s5-wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
}

.s5-wall-head > div {
  min-width: 180px;
}

.s5-wall-head b {
  color: #ff9d00;
  font-size: 1.2em;
}

.s5-wall-head strong {
  display: block;
  font-size: 1.05em;
  letter-spacing: .08em;
}

.s5-wall-head nav {
  display: flex;
  min-width: 0;
  overflow-x: auto;
}

.s5-wall button {
  min-height: 26px;
  border: 1px solid #394539;
  border-radius: 0;
  color: #9eb09e;
  background: #030403;
  font: 900 1em ui-monospace, monospace;
}

.s5-wall button[aria-pressed="true"],
.s5-wall button:hover,
.s5-wall button:focus-visible {
  color: #050400;
  background: #ff9d00;
}

.s5-wall-clocks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
  min-width: 0;
}

.s5-wall-clocks div {
  display: grid;
  place-content: center;
  gap: 2px;
  min-width: 0;
  padding: 5px;
  border: 1px solid #263026;
  background: #060806;
  text-align: center;
}

.s5-wall-clocks b {
  color: #ff9d00;
  font-size: 1em;
}

.s5-wall-clocks strong {
  font-size: 1.7em;
  font-variant-numeric: tabular-nums;
}

.s5-wall-clocks small,
.s5-wall-panel header span,
.s5-wall-panel small {
  color: #778877;
  font-size: .9em;
}

.s5-wall-clocks [data-session-state="OPEN"] small {
  color: #35cf78;
}

.s5-wall-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr 1fr;
  gap: 3px;
  min-height: 0;
}

.s5-wall-panel {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.s5-wall-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 7px;
  border-bottom: 1px solid #263026;
}

.s5-wall-panel > header b {
  color: #ff9d00;
  font-size: 1em;
}

.s5-wall-rows,
.s5-wall-news > div {
  overflow: auto;
}

.s5-wall-rows button {
  display: grid;
  grid-template-columns: 1fr .9fr .7fr 36px;
  align-items: center;
  width: 100%;
  min-height: 23px;
  padding: 0 6px;
  border-width: 0 0 1px;
  color: #d6ddd5;
  text-align: left;
}

.s5-wall-rows b { color: #ff9d00; }
.s5-wall-rows span,
.s5-wall-rows i,
.s5-wall-rows small { text-align: right; font-style: normal; }
.positive { color: #35cf78 !important; }
.negative { color: #ff5757 !important; }

.s5-wall-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  overflow: auto;
}

.s5-wall-rates > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px;
  padding: 6px;
  border-right: 1px solid #263026;
  border-bottom: 1px solid #263026;
}

.s5-wall-rates b { color: #9eb09e; }
.s5-wall-rates strong { color: #fff; }
.s5-wall-rates small { grid-column: 1 / -1; }

.s5-wall-news-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 3px;
  width: 100%;
  padding: 6px;
  border-width: 0 0 1px;
  text-align: left;
}

.s5-wall-news-row time { color: #ff9d00; }
.s5-wall-news-row strong {
  overflow: hidden;
  color: #d6ddd5;
  font-size: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s5-wall-news-row small { grid-column: 2; }

.s5-wall[data-mode="CLASSIC"] .s5-wall-grid { grid-template-columns: 1fr .72fr 1.15fr; }
.s5-wall[data-mode="WORLD"] .s5-wall-grid { grid-template-columns: .78fr .78fr 1.44fr; }
.s5-wall[data-mode="MINIMAL"] .s5-wall-news { display: none; }
.s5-wall[data-mode="MINIMAL"] .s5-wall-grid { grid-template-columns: 1fr 1fr; }
.s5-wall-host[data-font="CONDENSED"] { font-family: "Arial Narrow", ui-monospace, monospace; }
.s5-wall-host[data-font="SANS"] { font-family: system-ui, sans-serif; }

@media (min-width: 1700px) {
  .s5-wall { grid-template-rows: 48px 96px minmax(0, 1fr); }
  .s5-wall-clocks strong { font-size: 2.15em; }
  .s5-wall-rows button { min-height: 26px; }
}

@media (max-width: 760px) {
  .s5-wall { grid-template-rows: 66px 66px minmax(0, 1fr); }
  .s5-wall-head { align-items: flex-start; padding: 4px; }
  .s5-wall-head > div { min-width: 94px; padding-top: 3px; }
  .s5-wall-head strong { font-size: .9em; }
  .s5-wall-head nav { align-self: stretch; max-width: calc(100vw - 106px); }
  .s5-wall-head nav button { flex: 0 0 auto; min-height: 44px; }
  .s5-wall-clocks { grid-template-columns: repeat(6, 92px); overflow-x: auto; }
  .s5-wall-clocks strong { font-size: 1.45em; }
  .s5-wall-grid { grid-template-columns: 1fr; overflow-y: auto; }
  .s5-wall-panel { grid-template-rows: 44px minmax(0, 1fr); min-height: 250px; }
  .s5-wall-panel > header button { min-height: 40px; }
  .s5-wall-rows button,
  .s5-wall-news-row { min-height: 44px; }
  .s5-wall[data-mode="MINIMAL"] .s5-wall-grid { grid-template-columns: 1fr; }
  .s5-wall[data-mode="MINIMAL"] .s5-wall-news { display: grid; }

  .s5-wall-host .s5-wall .s5-wall-head nav > button,
  .s5-wall-host .s5-wall .s5-wall-panel > header button,
  .s5-wall-host .s5-wall .s5-wall-rows > button,
  .s5-wall-host .s5-wall .s5-wall-news-row {
    min-height: 44px !important;
  }
}