/*
  Underspire kit: the forum's frame.
  The header, the banner and the footer are the Hall's (hall.css and gump.css), so a person who steps
  from the game site to the forum stays in one place. What is here is what only a forum has: the tabs
  of its own places under the banner, the breadcrumb bar with its search field, the reading area, and
  the legend of the lamps.
*/

.forum-frame { padding-top: 1.4rem; padding-bottom: 2.4rem; }
.forum-tabs { margin-bottom: 1rem; }
.forum-tabs a .spr { margin-right: -.1rem; }

.crumbbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  margin: 0 0 1.4rem;
}
.crumbbar .crumbs ol { margin: 0; }
.quicksearch { display: flex; align-items: center; gap: .4rem; margin: 0; }
.quicksearch .input { width: min(16rem, 52vw); padding-block: .4rem; }

main { position: relative; min-height: 24rem; }

/* The banner of the forum is its own picture, drawn in one piece, so it is not tiled. It is as wide
   as it was drawn and fades into the dark at its two ends. */
.banner-forum { min-height: 12.5rem; padding-top: 4.2rem; }

/* The foot: the account's clock, the lamps and the credit. */
.colophon-time p { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.4rem; padding-top: .9rem; border-top: 2px solid var(--brass-deep); font: 400 16px/1.3 var(--pixel); color: var(--ink-faint); }
.legend span { display: inline-flex; align-items: center; gap: .5rem; }

/* The account block of the header, when the person is a member or a guest. */
.acct-meta { color: var(--ink-faint); }
.acct-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 .7rem; }
.acct-links a { display: inline-block; padding-block: .25rem; }
.acct-guest { padding-top: calc(var(--drop) + .5rem); }

@media (max-width: 860px) {
  .forum-frame { padding-top: 1rem; }
  .banner-forum { min-height: 10.5rem; padding-top: 2rem; }
  .crumbbar { margin-bottom: 1rem; }
}
@media (max-width: 560px) {
  .quicksearch { display: none; }
}