/* The still screens in "Not just an SSH terminal app.": the terminal, the
   notice, split panes and Port Bridge. Like the key chords and files
   pictures (chords.css, files.css), each is a crop of the phone's screen at
   the shared --mini-height, edge to edge, with the same 9px terminal type. */

.mini.screen {
  display: block;
  height: var(--mini-height);
  padding: 0;
}

/* Lines sit on the bottom edge, the way a terminal fills. */
.screen-term {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 12px 10px;
  overflow: hidden;
  color: #cccccc;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
}

.screen-term .line {
  min-height: 1.6em;
  overflow: hidden;
  white-space: pre;
}

/* Campbell's dev-server colours. */
.ansi-green {
  color: #16c60c;
}

.ansi-cyan {
  color: #61d6d6;
}

/* --------------------------------------------------------------- notice --- */

/* The run that raised the notice stays behind it, dimmed and softened, so
   the notice arrives over a session rather than an empty frame. */
.notice-history {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 12px 10px;
  overflow: hidden;
  color: #cccccc;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.6;
  opacity: 0.55;
  filter: blur(1.4px);
}

.notice-history .line {
  overflow: hidden;
  white-space: pre;
}

.mini.notice {
  justify-items: center;
}

.mini.notice .toast {
  z-index: 1;
}

/* ---------------------------------------------------------- split panes --- */

/* Two copies of the app side by side on a tablet, as the apps draw a split:
   each pane its own rounded well with a hairline rim, and a strip of the
   frame between them carrying the grip. In the picture's own pixels the
   corners are 8px and the strip 4px, which the inspector draws at about the
   apps' 12px and 6px. */
.mini.split-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4px minmax(0, 1fr);
  grid-template-rows: 100%;
  gap: 0;
  align-content: stretch;
  padding: 4px;
  background: var(--base)
}

.split-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 8px;
  background: var(--term-bg);
  overflow: hidden
}

/* The well's rim, drawn over its edge like the apps'. */
.split-pane::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--hairline);
  content: "";
  pointer-events: none;
}

.split-head {
  display: flex;
  flex: none;
  gap: 5px;
  align-items: baseline;
  padding: 8px 10px 7px;
  background: var(--base);
  box-shadow: 0 0.5px 0 var(--hairline);
  white-space: nowrap;
}

.split-head b {
  color: var(--label);
  font-size: 9.5px;
  font-weight: 600;
}

.split-head small {
  overflow: hidden;
  color: var(--label-2);
  font-size: 7.5px;
  text-overflow: ellipsis;
}

/* Running or idle, as the app's tab marks it. */
.split-head i {
  width: 5px;
  height: 5px;
  flex: none;
  align-self: center;
  margin-left: auto;
  border: 1px solid var(--label-2);
  border-radius: 50%;
}

.split-head i.is-live {
  border: 0;
  background: var(--green);
}

.split-pane .screen-term {
  position: relative;
  inset: auto;
  flex: 1;
  min-height: 0;
  padding: 0 9px 9px;
  font-size: 8px;
}

/* The strip between the wells, with the grip a finger drags. */
.split-divider {
  position: relative;
  z-index: 1
}

.split-divider::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--label-3);
  content: "";
  translate: -50% -50%
}

/* ---------------------------------------------------------- port bridge --- */

/* The phone's browser on a page the desktop is serving: the address bar,
   marked as bridged, and the top of the page, in the app's theme. */
.mini.bridge {
  background: var(--base);
}

.bridge-bar {
  padding: 8px 10px;
  background: var(--material);
  box-shadow: 0 0.5px 0 var(--hairline);
}

.bridge-url {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 20px;
  padding: 0 4px 0 8px;
  border-radius: 7px;
  background: var(--fill);
  color: var(--label);
  font-size: 8.5px;
}

.bridge-url svg {
  width: 9px;
  height: 9px;
  color: var(--green-ink);
}

.bridge-page {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
}

.bridge-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 2px;
}

.bridge-nav b {
  margin-right: auto;
  color: var(--label);
  font-size: 9px;
  font-weight: 600;
}

.bridge-nav i,
.bridge-text {
  height: 4px;
  border-radius: 2px;
  background: var(--fill);
}

.bridge-nav i {
  width: 18px;
}

.bridge-title {
  color: var(--label);
  font-size: 13px;
  font-weight: 700;
}

.bridge-text {
  width: 86%;
}

.bridge-text.is-short {
  width: 58%;
}

.bridge-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}

.bridge-cards span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 5px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--highlight), 0 0 0 0.5px var(--hairline);
}

.bridge-cards i {
  grid-row: span 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.bridge-cards i.is-ok {
  background: var(--green);
}

.bridge-cards b {
  color: var(--label);
  font-size: 8.5px;
  font-weight: 600;
}

.bridge-cards small {
  overflow: hidden;
  color: var(--label-2);
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where the page came from, at the end of the address bar. */
.bridge-tag {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: var(--tint-fill);
  color: var(--tint);
  font-size: 7px;
  font-weight: 600;
}

.bridge-tag i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}