/*
  app-shell.css: Loftet's own chrome (js/app-shell.js). Two forms, one set of
  elements: under 768 px the phone shell (top bar, bottom tabs), from 768 px
  the web chrome (header, footer). Sizes from Standalone App/01_SCREENS.md and
  the drafts in Standalone App/drafts/ (app-drafts.html, web-chrome.html).
  Tokens are the site's, from css/tokens.css; nothing new is invented.

  Page model: the one the site-chrome pages already use (css/site-chrome.css,
  ".has-site-chrome"): the document scrolls, nothing is sized off the viewport
  height. The phone top bar sticks to the top and the tabs are fixed to the
  bottom, so the page underneath keeps the layout it has today.
*/

:root {
  --ashell-bar-h: 56px;
  --ashell-tabs-h: 64px;
  --ashell-web-h: 64px;
  --ashell-bar-text: #fff;
  --ashell-tab-idle: #c9b9d0;   /* the drafts' idle tab ink on plum */
}

.app.has-app-shell {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}
.app.has-app-shell > .scroll,
.app.has-app-shell > .play {
  overflow: visible;
}

/* ================================================================ phone */

.ashell-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  flex: none;
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr minmax(48px, auto);
  align-items: center;
  gap: 4px;
  min-height: calc(var(--ashell-bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));
  background: var(--plum);
  color: var(--ashell-bar-text);
}
.ashell-lead,
.ashell-trail { display: flex; align-items: center; gap: 2px; min-width: 48px; }
.ashell-trail { justify-content: flex-end; }
.ashell-title {
  min-width: 0;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-weight-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ashell-ib {
  width: var(--tap-min);
  height: var(--tap-min);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: inherit;
  transition: transform .1s, background-color .1s;
}
.ashell-ib svg { width: 22px; height: 22px; stroke-width: 2.4; }
.ashell-ib:active { transform: scale(var(--press-scale)); }
.ashell-ib:hover { background: rgba(255, 255, 255, .08); }
/*
  THE NAME IN THE CORNER (BOT-160). Not a round icon button: it is a word, so
  it takes the width the word needs and no more, and it never pushes the gear
  off the bar. A name too long for a phone is already cut to its first word in
  js/app-shell.js; this caps whatever is left.
*/
.ashell-name {
  width: auto;
  min-width: var(--tap-min);
  max-width: 40vw;
  gap: 4px;
  grid-auto-flow: column;
  padding: 0 8px;
  font-weight: var(--font-weight-heading);
  font-size: var(--text-sm);
}
.ashell-name svg { width: 18px; height: 18px; }
.ashell-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ashell-name.is-nameless .ashell-name-text { font-weight: 400; opacity: .85; }

.ashell-flag .flag {
  width: 28px;
  height: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
  overflow: hidden;
}

/* The bottom tabs: 64 px plus the home indicator, the orange tick above the
   active one, an icon and a short word each. */
.ashell-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  min-height: calc(var(--ashell-tabs-h) + env(safe-area-inset-bottom));
  background: var(--plum);
}
.ashell-tab {
  position: relative;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--radius-sm);
  color: var(--ashell-tab-idle);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.ashell-tab svg { width: 24px; height: 24px; }
.ashell-tab.is-active { color: #fff; }
.ashell-tab.is-active::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22%;
  right: 22%;
  height: 3px;
  border-radius: 2px;
  background: var(--orange);
}
.ashell-tab:active { transform: scale(var(--press-scale)); }

/* Room under the page for the fixed tabs. */
.app.has-app-shell.has-tabs {
  padding-bottom: calc(var(--ashell-tabs-h) + env(safe-area-inset-bottom));
}

/* The web page bar (back arrow, page actions) lives in the content column and
   is shown only from 768 px; on the phone the same things sit in the top bar. */
.ashell-pagebar { display: none; }

/* The web header and footer are hidden on the phone. */
.ashell-web,
.ashell-foot { display: none; }

/* ================================================================== web */

@media (min-width: 768px) {
  .ashell-bar,
  .ashell-tabs { display: none; }
  .app.has-app-shell.has-tabs { padding-bottom: 0; }

  .ashell-web {
    display: block;
    background: var(--plum);
    color: #fff;
    min-height: var(--ashell-web-h);
    padding: 0 24px;
  }
  .ashell-web-in {
    max-width: var(--content-max);
    min-height: var(--ashell-web-h);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .ashell-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: var(--font-weight-wordmark, 900);
    font-size: 24px;   /* 22 until 2026-09-16 (Fleur: the header's text a bit larger) */
    letter-spacing: -.01em;
  }
  /* The mark: Lars, the owner's one-colour drawing (assets/Loftet logo/),
     white on the plum bar; the wordmark is the word itself (2026-09-14). */
  .ashell-mark {
    width: 40px;
    height: 40px;
    display: block;
  }
  .ashell-mark img { width: 100%; height: 100%; display: block; }
  .ashell-web-tabs { display: flex; gap: 6px; margin-left: 12px; }
  .ashell-web-tabs .ashell-tab {
    flex-direction: row;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 17px;   /* 15 until 2026-09-16 */
    color: #d9cde0;
  }
  .ashell-web-tabs .ashell-tab svg { width: 20px; height: 20px; }
  .ashell-web-tabs .ashell-tab.is-active { color: #fff; background: rgba(255, 255, 255, .1); }
  .ashell-web-tabs .ashell-tab.is-active::before { display: none; }
  .ashell-web-tabs .ashell-tab.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 3px;
    border-radius: 2px;
    background: var(--orange);
  }
  .ashell-web-tabs .ashell-tab:hover { color: #fff; }
  .ashell-web-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .ashell-web-right .ashell-flag .flag { width: 30px; height: 22px; }
  .ashell-web-right .ashell-name { font-size: 17px; }

  .ashell-pagebar:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--tap-min);
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
  }
  .ashell-pagebar-lead,
  .ashell-pagebar-trail { display: flex; align-items: center; gap: 4px; }
  .ashell-pagebar .ashell-ib { color: var(--plum); }
  .ashell-pagebar .ashell-ib:hover { background: #f1ecf3; }

  .ashell-foot {
    display: block;
    margin-top: auto;
    background: var(--plum);
    color: #fff;
    padding: 18px 24px;
  }
  .ashell-foot-in {
    max-width: var(--content-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    font-size: 17px;   /* the header tabs' size; 13 until 2026-09-16 (Fleur: too small) */
  }
  .ashell-made { font-weight: 700; }
  .ashell-made a { color: #ffb35c; font-weight: var(--font-weight-heading); text-decoration: none; }
  .ashell-made a:hover { text-decoration: underline; }
  /* Sjakkpass's dragon before the word, inside the same link, in the word's
     own colour (the white drawing used as a mask) and sitting a little high,
     the way the site sets it (Fleur, 2026-09-16) */
  .ashell-made-link { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
  .ashell-made-logo {
    display: block;
    width: 17px;
    height: 20px;
    position: relative;
    top: -3px;
    background: currentColor;
    -webkit-mask: url("../assets/site/sjakkpass-dragon-white.svg") center / contain no-repeat;
    mask: url("../assets/site/sjakkpass-dragon-white.svg") center / contain no-repeat;
  }
  .ashell-foot-links { display: flex; gap: 22px; font-weight: 700; }
  .ashell-foot-links a,
  .ashell-linkbtn { color: #fff; text-decoration: none; font: inherit; font-weight: 700; padding: 0; }
  .ashell-foot-links a:hover,
  .ashell-linkbtn:hover { text-decoration: underline; }
}

/* ================================================== the language dialog */

.ashell-lang .ashell-lang-card { max-width: 380px; padding: 22px 16px 14px; }
.ashell-lang-close svg { width: 18px; height: 18px; stroke-width: 2.6; color: var(--ink); }
.ashell-lang-title {
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 6px 10px;
}
.ashell-lang-list { display: grid; gap: 2px; max-height: 70dvh; overflow-y: auto; }
.ashell-lang-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--tap-min);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.ashell-lang-row:hover { background: #f1ecf3; }
.ashell-lang-row.is-current { background: #eef0fb; }
.ashell-lang-row .flag {
  width: 30px;
  height: 22px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.ashell-lang-name { flex: 1; min-width: 0; }
.ashell-lang-check { width: 24px; height: 24px; flex: none; color: var(--royal); }
.ashell-lang-check svg { width: 24px; height: 24px; stroke-width: 2.8; }

/* ============================================================ the tagline
   app.tagline (BOT-161, owner's pick 2026-09-12): "Spill sjakk. Slå bamsene."
   Two places. On the phone, under the word Loftet in the Voktere top bar,
   the one root page whose title is the app's own name. On the web, next to
   the wordmark in the header, the lockup, from 1024 px; under that the
   header has the tabs and the flag to fit and the line waits. */
.ashell-title-stack {
  display: grid;
  line-height: 1.15;
}
.ashell-sub {
  font-size: 12px;
  font-weight: var(--font-weight-normal, 400);
  opacity: .88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ashell-tag { display: none; }
@media (min-width: 1024px) {
  .ashell-tag {
    display: inline;
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    font-size: 15px;
    font-weight: var(--font-weight-normal, 400);
    letter-spacing: 0;
    color: #d9cde0;
    white-space: nowrap;
  }
}