/*
  site-chrome.css: the sjakkpass.no page frame, reproduced.

  Source: the live repo's html/main.at (structure) and
  style/public/core/main.css (header + nav.icons + footer). The department has
  to sit inside the SAME frame as every other page on the site, so this file
  copies that frame rather than inventing a bots-department one:

      header  -> a.logo  +  nav.icons (home + the five trinn)  +  .user-widget
      main    -> the page
      footer  -> the plum bar

  Two deliberate differences from the live CSS, both marked below:

  1. Asset paths are relative (assets/site/...) instead of absolute
     (/res/svg/...), because the MVP must also run from file://. On the port,
     that is a find-and-replace, nothing more.
  2. The live nav swaps in a second icon file for hover/active
     (parts/<trinn>-light.svg). Those files are 400-600 KB each, 2.5 MB for
     the set, because they carry an embedded raster. Here the same plain icon
     is inverted to white in CSS, which lands on the same look (white glyph,
     transparent tile, white border) for ~4 KB. Swap the two rules back on the
     port if the light files are wanted verbatim.
*/

/* ===== header ============================================================ */

.site-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--plum);
  padding: 8px 16px;
  min-height: 64px;
}

.site-header .logo { flex: none; display: block; }
.site-header .logo img { display: block; width: 150px; }

/* nav.icons, from style/public/core/main.css */
.site-header nav.icons {
  flex: 1;
  padding: 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.site-header nav.icons a {
  position: relative;
  transition: all .4s;
}

.site-header nav.icons a:not(.home) {
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  background-color: #fff;
  padding: 5px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 0 4px #1c1c1c8a;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 32px;
}

.site-header nav.icons a.home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-position: center;
  background-size: 32px;
  background-repeat: no-repeat;
  background-image: url("../assets/site/home.svg");
}

@media screen and (min-width: 768px) {
  .site-header nav.icons a.home { margin-right: 16px; }
}

/* the tooltip label under a trinn tile */
.site-header nav.icons a span {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  width: fit-content;
  text-wrap: nowrap;
  text-align: center;
  display: none;
  border: 1px solid var(--plum);
  background-color: var(--bg);
  color: var(--plum);
  padding: 4px 6px;
  font-size: 10px;
  text-transform: capitalize;
  border-radius: var(--radius-sm);
  transition: all .3s;
  z-index: 2;
}
.site-header nav.icons a:is(:hover, :focus) span { display: block; opacity: 1; }

/* The live CSS carries one rule per trinn slug here
   (a.helt { background-image: ... } and so on). This build sets the icon from
   js/levels.js instead, so that shipping another edition is a data change and
   not a stylesheet edit (canon Decision F2: one design, two icon sets). The
   tile styling below is unchanged either way. */

/* difference (2): white glyph on a transparent tile, in place of the -light files */
.site-header nav.icons a:is(:hover, .active, :focus):not(.home) {
  background-color: transparent;
  border: 1px solid #fff;
  filter: brightness(0) invert(1);
}
.site-header nav.icons a:is(:hover, .active, :focus) { transform: scale(1.3); }

/* the user chip: name, coins, avatar */
.site-header .user-widget {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 17px;
}
.site-header .user-widget .coins { display: flex; align-items: center; gap: 6px; }
.site-header .user-widget .coins img { width: 26px; height: 26px; display: block; }
.site-header .user-widget .uname { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header .user-widget .avatar {
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform .1s;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--plum);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: bold;
  flex: none;
}

/* Phones: the logo and the username are the first things to go, the trinn
   tiles are the point of the bar. */
@media (max-width: 640px) {
  .site-header { padding: 6px 10px; gap: 6px; min-height: 56px; }
  .site-header .logo img { width: 104px; }
  .site-header nav.icons { gap: 10px; padding: 0 4px; }
  .site-header .user-widget .uname { display: none; }
}
@media (max-width: 420px) {
  .site-header .logo { display: none; }
}

/* ===== footer ============================================================ */

.site-footer {
  flex: none;
  background: var(--plum);
  color: #d9d2dd;
  padding: 14px 16px;
  font-size: var(--text-xs);
  text-align: center;
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 8px;
}

.site-header .user-widget .avatar:active { transform: scale(var(--press-scale)); }

/* ---------- Tab row (sits under the banner) ------------------------------- */

/*
  The site's own nav.tabs, ported from style/public/units/tabs.css: a stacked
  full-width list on a phone, a centred row of pills from 768px, the back arrow
  as a borderless 28px arrowback.svg pinned to a 50px first column. Measured
  against the live page rather than guessed: on a 375px screen the live rows
  are 40px tall with a 30px back row above them and a 10px gap.

  Ours carries four tabs where the live pages carry three, so the stacked phone
  version is about 230px tall. That is the pattern the owner asked for, and the
  page scrolls, but it is the one number to revisit if the phone screens start
  feeling top heavy.
*/
.tabs {
  display: grid;
  gap: 10px;
  align-items: center;
  margin: 10px 0 4px;
}

.tabs > .tab {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  background: var(--card);
  box-shadow: 0 0 4px #958f8f8a;
  border-radius: 8px;
  font-weight: var(--font-weight-heading);
  font-size: var(--text-sm);
  color: var(--ink);
  text-decoration: none;
  transition: color .2s, transform .1s;
}
.tabs > .tab.active { color: var(--sky-ink); }
.tabs > .tab:active { transform: scale(var(--press-scale)); }

.tabs > .tab .icon {
  flex: none;
  display: block;
  width: 28px;
  height: 28px;
}
.tabs > .tab .icon svg { width: 100%; height: 100%; display: block; }

.tabs > .backmenu {
  height: 30px;
  background: url("../assets/site/arrowback.svg") no-repeat center;
  background-size: 28px;
  transition: transform .2s;
}
.tabs > .backmenu:hover { transform: scale(1.25); }
.tabs > .backmenu:active { transform: scale(var(--press-scale)); }

@media screen and (min-width: 768px) {
  .tabs {
    grid-auto-flow: column;
    grid-auto-columns: minmax(auto, 320px);
    justify-content: center;
  }
  /* The back arrow keeps its own narrow column so the tabs stay the same
     width whether or not a screen has one. */
  .tabs:has(.backmenu) { grid-template-columns: 50px; }
  .tabs > .backmenu { grid-column: 1; }
  .tabs > .tab {
    justify-content: center;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tabs > .backmenu,
  .tabs > .tab { transition: none; }
  .tabs > .backmenu:hover { transform: none; }
}

/* ---------- Page model: the document scrolls, not a pane inside it -------- */

/*
  The live site is plain document flow: header, then a 1000px column that is as
  tall as its content, then the footer under it, and the window scrolls. See
  sjakkpass.no/trussel/test, where the section illustration sits on top at full
  size and the widget below it keeps its own size; scrolling moves the
  illustration off the top and leaves the board in the middle.

  The MVP started as an app shell instead: .app was locked to 100dvh and the
  content pane scrolled inside it. That model has no room to give, so adding
  the banner could only be paid for by shrinking the board and the bot window.
  Wrong trade (owner, 2026-08-22). Pages that mount the site chrome get the
  site's model, and nothing on them is sized off the viewport height.

  Scoped to .has-site-chrome, which siteChrome.mount() sets, so the screens
  that still run the old plum topbar (profil, resultat, soemmen) keep their
  own behaviour until they are converted too.
*/
.app.has-site-chrome {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
.app.has-site-chrome > .scroll,
.app.has-site-chrome > .play {
  overflow: visible;
}

/* An empty tab page, until it has something to show. */
.page-empty {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  padding: 32px 16px;
  color: var(--muted);
}
.page-empty h2 { color: var(--ink); }
.page-empty p { max-width: 46ch; font-size: var(--text-sm); }