/* topbar.css — the app's top-bar buttons (Learn, Tests, Consult, Community,
   Install, language switch, icon buttons).

   What was wrong: 1px coloured outlines over a near-black wash, with the label
   in the same tinted colour, so every button read faintly; three colour codes
   (gold, grey, glowing red) that meant nothing in particular; "Installed"
   looked disabled but took a full button's room; the white dot was unexplained.

   What this does:
     - solid surfaces and high-contrast labels — colour lives in a small icon
       tile, one accent per destination, so buttons are told apart at a glance
     - one primary button (Community), solid, in the same colour as the selected
       language, no glow
     - the "something new" dot is a proper corner badge and does not pulse
     - "Installed" is a status, so it shrinks to a green check icon
     - the language switch is a segmented control with an inset pill

   Visual properties only. Sizes, padding and the phone/tablet layouts (icon-only
   buttons, the dropdown menu) are left to the existing rules, so nothing moves
   or breaks at any width. Loaded last, so it wins without !important. */

/* ---- tokens ---------------------------------------------------------------- */
html[data-theme="dark"] {
  --tb-bg: rgba(255, 255, 255, .055);
  --tb-bg-h: rgba(255, 255, 255, .10);
  --tb-line: rgba(255, 255, 255, .13);
  --tb-line-h: rgba(255, 255, 255, .28);
  --tb-ink: #EEF0FA;
  --tb-ink-2: #C3C7E0;
  --tb-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --tb-learn: #F4B860;   --tb-learn-t: rgba(244, 184, 96, .16);
  --tb-tests: #4FD1C5;   --tb-tests-t: rgba(79, 209, 197, .15);
  --tb-consult: #B39DFF; --tb-consult-t: rgba(179, 157, 255, .16);
  --tb-ok: #3FB984;      --tb-ok-t: rgba(63, 185, 132, .16);
  --tb-badge: #FFC24B;
}
html:not([data-theme="dark"]) {
  --tb-bg: #FFFFFF;
  --tb-bg-h: #F6F4FB;
  --tb-line: rgba(35, 10, 77, .14);
  --tb-line-h: rgba(35, 10, 77, .32);
  --tb-ink: #1C1440;
  --tb-ink-2: #4A4468;
  --tb-shadow: 0 1px 2px rgba(35, 10, 77, .08);
  --tb-learn: #A86A12;   --tb-learn-t: rgba(214, 150, 40, .16);
  --tb-tests: #0E8178;   --tb-tests-t: rgba(14, 129, 120, .12);
  --tb-consult: #6B3FD4; --tb-consult-t: rgba(107, 63, 212, .12);
  --tb-ok: #1F8F5F;      --tb-ok-t: rgba(31, 143, 95, .12);
  --tb-badge: #E8590C;
}

/* ---- the destination buttons ---------------------------------------------- */
html .tb-right .learn-btn {
  --tb-acc: var(--tb-learn); --tb-acc-t: var(--tb-learn-t);
  position: relative;
  background: var(--tb-bg);
  border: 1px solid var(--tb-line);
  color: var(--tb-ink);
  font-weight: 600;
  letter-spacing: -.005em;
  box-shadow: var(--tb-shadow);
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .12s;
}
html .tb-right .tests-btn.learn-btn   { --tb-acc: var(--tb-tests);   --tb-acc-t: var(--tb-tests-t); }
html .tb-right .consult-btn.learn-btn { --tb-acc: var(--tb-consult); --tb-acc-t: var(--tb-consult-t); }
html .tb-right .install-btn.learn-btn { --tb-acc: var(--tb-ok);      --tb-acc-t: var(--tb-ok-t); }

/* the icon sits in a small tinted tile in its own colour */
html .tb-right .learn-btn .ic {
  box-sizing: content-box;
  padding: 3px;
  border-radius: 7px;
  background: var(--tb-acc-t);
  color: var(--tb-acc);
}
html .tb-right .learn-btn:hover {
  background: var(--tb-bg-h);
  border-color: var(--tb-acc);
  color: var(--tb-ink);
  box-shadow: var(--tb-shadow);
  transform: translateY(-1px);
}
html .tb-right .learn-btn:active { transform: translateY(0) scale(.98); }
html .tb-right .learn-btn:focus-visible { outline: 2px solid var(--tb-acc); outline-offset: 2px; }

/* ---- Community: the one primary ------------------------------------------- */
html .tb-right .community-btn.learn-btn {
  background: var(--sel);
  border-color: transparent;
  color: var(--on-sel, #fff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
html .tb-right .community-btn.learn-btn .ic {
  background: rgba(255, 255, 255, .18);
  color: inherit;
}
html .tb-right .community-btn.learn-btn:hover {
  background: var(--sel);
  border-color: transparent;
  color: var(--on-sel, #fff);
  filter: brightness(1.08);
  box-shadow: 0 4px 12px -4px var(--sel);
}
html .tb-right .community-btn.learn-btn:focus-visible { outline-color: var(--sel); }

/* "something new in Community": a corner badge, still, not a pulsing dot */
html .tb-right .community-btn .cb-live {
  position: absolute;
  top: -3px; right: -3px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--tb-badge);
  box-shadow: 0 0 0 2px var(--bg, #0b0b1a);
  animation: none;
}
html:not([data-theme="dark"]) .tb-right .community-btn .cb-live { box-shadow: 0 0 0 2px var(--bg, #fff); }

/* ---- Install: an invitation until installed, then a quiet green check ----- */
html .tb-right .install-btn.learn-btn.done {
  width: var(--ctl-h, 34px); min-width: var(--ctl-h, 34px);
  padding: 0; gap: 0;
  justify-content: center;
  background: var(--tb-ok-t);
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  transform: none;
}
html .tb-right .install-btn.learn-btn.done span,
html .tb-right .install-btn.learn-btn.done .ic { display: none; }
html .tb-right .install-btn.learn-btn.done::before {
  content: "";
  width: 16px; height: 16px;
  background: var(--tb-ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- language: a segmented control --------------------------------------- */
html .tb-right .lang {
  box-sizing: border-box;
  align-items: stretch;
  padding: 3px;
  gap: 2px;
  background: var(--tb-bg);
  border: 1px solid var(--tb-line);
  box-shadow: var(--tb-shadow);
}
html .tb-right .lang button {
  /* Fill the switch's inside height exactly. On phones the switch is a fixed
     34px and its buttons were forced to min-height 34px; with the inset
     padding they overflowed, and the selected pill was cut off at the bottom. */
  min-height: 0;
  height: auto;
  align-self: stretch;
  border-radius: 999px;
  color: var(--tb-ink-2);
  font-weight: 600;
}
html .tb-right .lang button:hover { color: var(--tb-ink); background: var(--tb-bg-h); }
html .tb-right .lang button[aria-pressed="true"] {
  background: var(--sel);
  color: var(--on-sel, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* ---- the round icon buttons, made to match ------------------------------- */
html .tb-right .theme-toggle,
html .tb-right .tb-burger:not([aria-expanded="true"]) {
  background: var(--tb-bg);
  border-color: var(--tb-line);
  color: var(--tb-ink-2);
  box-shadow: var(--tb-shadow);
}
html .tb-right .theme-toggle:hover,
html .tb-right .tb-burger:hover {
  background: var(--tb-bg-h);
  border-color: var(--tb-line-h);
  color: var(--tb-ink);
}

/* ---- the phone menu (the same buttons, stacked, under 700px) ---------------
   The menu's own rules use !important; these match them with higher
   specificity so the menu gets the same design as the bar. */
@media (max-width: 700px) {
  html .tb-right .tb-more .learn-btn {
    background: var(--tb-bg) !important;
    border: 1px solid var(--tb-line) !important;
    color: var(--tb-ink) !important;
    box-shadow: none !important;
  }
  html .tb-right .tb-more .learn-btn:hover {
    background: var(--tb-bg-h) !important;
    border-color: var(--tb-acc) !important;
    color: var(--tb-ink) !important;
  }
  html .tb-right .tb-more .community-btn.learn-btn,
  html .tb-right .tb-more .community-btn.learn-btn:hover {
    background: var(--sel) !important;
    border-color: transparent !important;
    color: var(--on-sel, #fff) !important;
  }
  /* new in Community: sits at the end of the row instead of the corner */
  html .tb-right .tb-more .community-btn .cb-live {
    position: static;
    margin-left: auto;
    box-shadow: none;
  }
  /* already installed: nothing to press, so not in the menu */
  html .tb-right .tb-more .install-btn.done { display: none !important; }
}

/* ---- phone header spacing ----------------------------------------------------
   The header sat 9px from the top of the page, pressed against the browser
   bar, while an 8px row gap plus a 10px margin left an empty band above the
   tab strip. More room above, less below, so the header reads as one block. */
@media (max-width: 600px) {
  html #appbar { padding-top: 14px; row-gap: 6px; }
  html #appbar > .modes { margin-top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html .tb-right .learn-btn, html .tb-right .learn-btn:hover { transform: none; transition: none; }
}