/*
  The fake browser chrome: the tab strip, the tabs themselves and the
  bookmarks bar with its inline icons.
*/

.browser {
  background: linear-gradient(
    rgba(255, 255, 255, 0.75),
    rgba(225, 242, 252, 0.55)
  );
  border-bottom: 1px solid var(--glass-line);
}

.tabstrip {
  align-items: flex-end;
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 8px 12px 0;
}

.btab {
  align-items: center;
  background: linear-gradient(
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.25)
  );
  border-radius: 12px 12px 0 0;
  border: 1px solid var(--glass-line);
  border-bottom: 0;
  color: var(--muted);
  display: flex;
  /* Grow to share the strip, but never past a real browser tab's width. The
     basis is what each tab gets before growing; min-width keeps a short label
     from collapsing the tab around its text. */
  flex: 1 1 240px;
  font-size: 15px;
  gap: 8px;
  height: 38px;
  max-width: 320px;
  min-width: 180px;
  padding: 0 16px 0 18px;
}

a.btab {
  cursor: pointer;
  text-decoration: none;
}

a.btab:hover {
  background: linear-gradient(
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.5)
  );
  color: var(--ink);
}

.btab.on {
  background: linear-gradient(#fff, rgba(255, 255, 255, 0.9));
  box-shadow: 0 -2px 8px rgba(0, 90, 140, 0.12);
  color: var(--ink);
  font-weight: 600;
}

.btab .tt {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .btab .tt {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.btab .fav {
  background: radial-gradient(
    circle at 35% 30%,
    #fff 0 12%,
    #ff9ab8 40%,
    #e0507a
  );
  border-radius: 4px;
  height: 16px;
  width: 16px;
}

/* On narrow screens the shared "Richard Pires - " prefix is dropped so the two
   tabs stay apart ("web developer" / "game developer") instead of truncating
   alike. Both tabs stay visible: the inactive one is the link to the game
   portfolio, and hiding it would lose that link. */

@media (max-width: 560px) {
  .btab .pre {
    display: none;
  }

  .btab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 10px;
  }
}

.bookmarks a {
  color: inherit;
  text-decoration: none;
}

.bookmarks a:hover {
  text-decoration: underline;
}

.bookmarks {
  background: rgba(255, 255, 255, 0.9);
  border-top: 1px solid #e3f1f9;
  color: var(--aqua-dk);
  display: flex;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  gap: 20px;
  padding: 8px 18px 10px;
}

/* Each bookmark is an icon plus its label, kept on one line together. */
.bookmarks a {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

/* The inline icons. `currentColor` lets them take the link's color, including
   on hover, and `em` sizing keeps them in step with the label's font size. */
.bi {
  fill: currentColor;
  flex: none;
  height: 1em;
  width: 1em;
}