/* ============================================================
   GP Team Hub - theme.css

   The theme picker and the switch under it. Its own file because
   base.css had reached its size ceiling, and because this is one
   control: the button in the bar, the panel it opens, the four small
   pictures of the looks, and the switch that decides whether the look
   wears the three splash hues.

   The colours the pictures are painted in are tokens in base.css, in
   the one place literal values are allowed.
   ============================================================ */

/* ---------------- Theme picker ----------------
   Four named looks rather than one switch, because "dark or light" was
   never the real question: the same person wants a dark shell on a
   bright desk and true black in a car at night. Sits on the shell, so
   it reads from the shell tokens like everything else up there. */
.theme-pick{position:relative;flex-shrink:0;}
.theme-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 11px;
  border-radius:var(--radius);
  border:1px solid var(--shell-line);
  background:transparent;
  color:var(--shell-ink-soft);
  font-size:.85rem;font-weight:600;
}
.theme-btn:hover{background:var(--shell-raised);color:var(--shell-ink);border-color:var(--shell-line-strong);}
.theme-btn:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);outline:none;}
.theme-ic{font-size:.82rem;}
.theme-caret{font-size:.7rem;opacity:.75;}
.theme-now{white-space:nowrap;}

/* The panel hangs off the button's right edge, because the button is
   at the right end of the bar and a panel opening leftwards from there
   would run off the screen. */
.theme-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:60;
  /* Named rather than shrink-to-fit: an absolute box sizes itself to
     its content, and two fixed tiles inside a grid it had not been
     given room for landed on top of each other. The ceiling is the
     screen, because on a phone the button this hangs from sits close
     enough to the left edge that 242px ran off it and took a column of
     tiles with it. */
  width:242px;
  padding:9px;
  background:var(--shell-raised);
  border:1px solid var(--shell-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);
}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}

/* On a phone the button this hangs from sits far enough left that a
   242px panel anchored to its right edge ran off the side of the screen
   and took a column of tiles with it. There it hangs from the bar
   instead: the bar carries a backdrop filter, which makes it the box a
   fixed child measures from, so this is the bar's right edge rather
   than the button's. Keep the filter and this keeps working. */
@media (max-width:640px){
  .theme-menu{
    position:fixed;
    top:calc(var(--topbar-h) - 5px);
    right:10px;
    left:auto;
    max-width:calc(100vw - 20px);
  }
}

.theme-opt{
  display:flex;flex-direction:column;align-items:stretch;gap:7px;
  min-width:0;
  padding:8px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--shell-ink-soft);
  font-size:.79rem;font-weight:600;
  text-align:left;
}
.theme-opt:hover{background:var(--shell-high);color:var(--shell-ink);}
.theme-opt[aria-pressed="true"]{border-color:var(--accent);color:var(--shell-ink);}
.theme-opt:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}

/* A small picture of the theme: its page, its shell across the top and
   the accent that sits on both. */
.theme-sw{
  position:relative;
  display:block;
  height:42px;
  border-radius:6px;
  border:1px solid var(--sw-edge);
  overflow:hidden;
}
.theme-sw-bar{position:absolute;top:0;left:0;right:0;height:13px;}
.theme-sw-dot{
  position:absolute;left:7px;bottom:7px;
  width:13px;height:13px;
  border-radius:var(--radius-pill);
  background:var(--sw-accent);
}
.theme-sw-dark{background:var(--sw-dark-page);}

/* ---- The switch under the four looks ----
   A row rather than a fifth tile, because it does not replace a theme,
   it decides what the chosen theme is wearing. It sits on the shell, so
   its track and its knob take the shell's surfaces rather than the
   page's. */
.theme-splash{
  display:flex;align-items:center;gap:10px;
  width:100%;
  margin-top:9px;
  padding:9px 8px 7px;
  border:none;
  border-top:1px solid var(--shell-line);
  border-radius:0;
  background:transparent;
  color:var(--shell-ink-soft);
  text-align:left;
}
.theme-splash:hover{color:var(--shell-ink);}
.theme-splash:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.theme-splash-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.theme-splash-n{font-size:.82rem;font-weight:600;color:var(--shell-ink);}
.theme-splash-h{font-size:.72rem;color:var(--shell-ink-faint);}
.theme-splash .sw{
  margin:0;flex-shrink:0;
  background:var(--shell-high);
  border-color:var(--shell-line);
}
.theme-splash .sw-dot{background:var(--shell-raised);}
.theme-splash .sw-on{background:var(--accent);border-color:var(--accent);}

.theme-sw-dark .theme-sw-bar{background:var(--sw-dark-shell);}
.theme-sw-light{background:var(--sw-light-page);}
.theme-sw-light .theme-sw-bar{background:var(--sw-light-shell);}
.theme-sw-white{background:var(--sw-white-page);}
.theme-sw-white .theme-sw-bar{background:var(--sw-white-shell);}
.theme-sw-black{background:var(--sw-black-page);}
.theme-sw-black .theme-sw-bar{background:var(--sw-black-shell);}

@media (max-width:760px){
  .theme-now,
  .theme-caret{display:none;}
  .theme-btn{padding:7px 9px;}
}