/* The bar and the tabs that stick to the top of the window, and the
   readouts in them: streak, XP, energy, plan. */

#chrome{position:sticky;top:var(--sat);z-index:20;background:var(--panel);}
#topbar{display:flex;align-items:center;
  justify-content:space-between;gap:8px;
  padding:14px 13px;border-bottom:1px solid var(--line);
  background:var(--panel);}
.brand{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;
  font-family:'Space Grotesk',sans-serif;min-width:0;flex-shrink:1;overflow:hidden;}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.brand svg{width:21px;height:21px;flex-shrink:0;}
/* The name used to be hidden below 400px because "Electronics Path" did not
   fit beside the stats. "Ohmmy" is five characters and fits at any phone
   width, and a bare lightning bolt does not tell anyone what they opened. */
#stats{display:flex;gap:11px;align-items:center;flex-shrink:0;}
.stat{display:flex;align-items:center;gap:5px;font-family:'IBM Plex Mono',monospace;font-size:14.5px;font-weight:600;}
.stat svg{width:18px;height:18px;}
.streak{color:var(--amber-text);} .xp{color:var(--blue-deep);} 
/* Energy reads as the budget it is: amber while there is some, coral when
   there is none. It was five heart outlines; fifteen of anything is a number,
   not a row of shapes. */
.energy{color:var(--amber-text);flex-shrink:0;}
.energy.spent{color:var(--coral-text);}
.tier-badge{font-size:11px;font-weight:700;letter-spacing:.6px;padding:5px 9px;border-radius:7px;
  background:var(--ink);color:var(--on-ink);cursor:pointer;border:none;flex-shrink:0;
  font-family:'IBM Plex Sans',sans-serif;}
/* Three counters and a badge is a lot of bar. On a narrow phone
   the larger sizes would push the app's own name into an ellipsis, which is
   the one thing on this bar that has already had to be rescued once — so the
   stats step back down rather than the name giving way. */
@media(max-width:390px){
  #stats{gap:8px;}
  .stat{font-size:13px;gap:4px;} .stat svg{width:16px;height:16px;}
  .energy svg{width:15px;height:15px;}
  .tier-badge{font-size:10px;padding:4px 7px;}
}
.tier-badge.pro{background:var(--blue);} .tier-badge.max{background:var(--amber-deep);}

.ad-banner{margin:9px 16px 0;border:1px dashed var(--locked);border-radius:9px;padding:9px 11px;
  font-size:10.5px;color:var(--ink-soft);display:flex;justify-content:space-between;
  /* Two hardcoded near-whites drew these stripes, which meant the one strip in
     the app that is meant to look cheap looked cheap in light mode and was a
     white card in dark mode with light grey text on it. The colour is a
     background-color so it can be resolved rather than guessed at, and the
     stripes are transparent gaps cut out of it. */
  background-color:var(--surface-2);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 8px,
    var(--bg) 8px,var(--bg) 16px);}

/* ---- Placement ---- */
/* The front door. Sits under the emailed-link screen, because arriving from
   a link is a more specific intent than simply opening the app. */
/* Fixed to the viewport, not to #app. `position:absolute; inset:0` sizes an
   overlay to its containing block, and #app is as tall as the path screen
   behind it — so the form was centred in a box far taller than the window and
   sat below the fold. Adding twenty-one skills to the path made it worse.

   align-items:flex-start with margin:auto 0 on the box is the safe way to
   centre something that might not fit: plain align-items:center puts the top
   of an overflowing box above the scroll origin, where it cannot be reached. */