/* Screens rendered from Posting's own output (see docs/scripts/home_screens.py),
   shared by the homepage and the guide pages that embed them. */

.tui {
  container-type: inline-size;
  background: var(--bg);
}

.tui-grid {
  /* 130 columns of a 0.6em-wide monospace cell fill the container. */
  font-family: var(--font-grid);
  font-size: calc(100cqi / (var(--cols) * var(--grid-adv)));
  font-variant-ligatures: none;
  line-height: 1.25;
  padding-block: 0.3em;
  user-select: text;
}

.tui .r {
  display: flex;
  height: 1.25em;
  white-space: pre;
  overflow: hidden;
}

.tui .r > span {
  flex: none;
  height: 100%;
}

.tui .B { font-weight: 700; }
.tui .I { font-style: italic; }

.tui .g,
.tui .g2 {
  display: inline-block;
  width: 1ch;
  text-align: center;
  overflow: visible;
}

.tui .g2 { width: 2ch; }

.tui .d {
  --t: max(1px, 0.09em);
  position: relative;
  background-repeat: no-repeat;
}

.tui .h,
.tui .hh {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% var(--t);
  background-position: 0 50%;
}

.tui .hh {
  background-size: 100% max(2px, 0.28em);
}

.tui .v {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: var(--t) 100%;
  background-position: 50% 0;
}

.tui .tl::before,
.tui .tr::before,
.tui .bl::before,
.tui .br::before {
  content: "";
  position: absolute;
  border: var(--t) solid currentColor;
}

.tui .tl::before { left: calc(50% - var(--t) / 2); top: calc(50% - var(--t) / 2); right: 0; bottom: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 0.45em; }
.tui .tr::before { left: 0; top: calc(50% - var(--t) / 2); right: calc(50% - var(--t) / 2); bottom: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 0.45em; }
.tui .bl::before { left: calc(50% - var(--t) / 2); top: 0; right: 0; bottom: calc(50% - var(--t) / 2); border-right: 0; border-top: 0; border-bottom-left-radius: 0.45em; }
.tui .br::before { left: 0; top: 0; right: calc(50% - var(--t) / 2); bottom: calc(50% - var(--t) / 2); border-left: 0; border-top: 0; border-bottom-right-radius: 0.45em; }

.tui .q1 { background-image: linear-gradient(to right, currentColor 25%, transparent 25%); }
.tui .q2 { background-image: linear-gradient(to right, currentColor 50%, transparent 50%); }
.tui .l2 { background-image: linear-gradient(to top, currentColor 25%, transparent 25%); }
.tui .l3 { background-image: linear-gradient(to top, currentColor 37.5%, transparent 37.5%); }
.tui .l4 { background-image: linear-gradient(to top, currentColor 50%, transparent 50%); }
.tui .l5 { background-image: linear-gradient(to top, currentColor 62.5%, transparent 62.5%); }
.tui .l6 { background-image: linear-gradient(to top, currentColor 75%, transparent 75%); }
.tui .l7 { background-image: linear-gradient(to top, currentColor 87.5%, transparent 87.5%); }

/* A screen embedded in a guide page. */
.md-typeset figure.screen {
  display: block;
  width: 100%;
  margin: 1.5em 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0.4em;
}

.md-typeset figure.screen .tui {
  width: 100%;
  margin: 0;
}

.md-typeset figure.screen figcaption {
  max-width: none;
  margin: 0;
  padding: 0.5em 1em;
  font-size: 0.75rem;
  font-style: normal;
  text-align: left;
  color: var(--muted);
  border-top: 1px solid var(--border);
}