/* ============================================================
   Pipezoom - theme.css

   The theme picker and the switch under it, 1 control in its own file
   (base.css is at its size ceiling): the button in the bar, the panel
   it opens, the 4 small pictures of the looks, and the switch that
   decides whether the look wears the 3 splash hues.

   The colors the pictures are painted in are tokens in base.css, in
   :root, the only place literal values are allowed.
   ============================================================ */

/* Theme picker
   4 named looks: the same rep wants a dark shell on a bright desk and
   true black in a car at night. On the shell, it reads the shell tokens
   like everything else in the bar. */
.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;}

/* Because the button is at the right end of the bar, the panel hangs
   off the button's right edge and opens leftward. */
.theme-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:60;
  /* A named width: an absolute box sizes itself to its content. The
     screen width is the ceiling for a phone. */
  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;}

/* Because the button is far enough left on a phone for a 242px panel to
   run off the screen, the panel hangs from the bar there. The bar's
   backdrop filter makes the bar the containing box of a fixed child,
   and this right edge is the bar's. The panel's position depends on
   that filter. */
@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 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 4 looks
   A row of its own: it sets what the chosen theme wears. On the shell,
   its track and its knob take the shell's backgrounds. */
.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;}
}