/*
 * The base every signed-in page needs: the ground, the ink, the type.
 *
 * It was the same seven lines copied into dashboard.html, optimize.html and
 * video-detail.html, and absent from account.html, which is why that page
 * shipped as black text on white. theme.css is not this: it holds the design
 * tokens and the app-nav component, and styles no page element at all, which
 * makes it easy to link and believe a page is covered.
 *
 * Only the identical part moved. The rest of each page's styling is genuinely
 * per-page and stays there.
 */

body {
  background: var(--bg-glow);
  background-attachment: fixed;
  color: var(--color-ink);
  font-family: var(--font-body);
  margin: 0;
  font-size: 14px;
}

/*
 * Make [hidden] mean hidden.
 *
 * The browser's own rule is `[hidden] { display: none }`, and any author rule
 * that sets display beats it, because author styles outrank the user agent's
 * regardless of specificity. So a component with `display: inline-block` or
 * `display: flex` quietly ignores the attribute, and every piece of JavaScript
 * that sets `el.hidden = true` silently does nothing.
 *
 * That shipped: an Install button hidden because there is no store listing yet
 * appeared anyway, with no href, next to a Connect button it was meant to
 * replace. The bug is invisible in review, since the markup says hidden and
 * the code says hidden.
 */
[hidden] {
  display: none !important;
}

/*
 * TubeAmplify's own figures, marked as ours.
 *
 * YouTube's API policies require any figure worked out from its data, such as
 * views per hour, the outlier ratio, the keyword opportunity and our scores,
 * to be told apart from YouTube's own statistics. The mark sits on the
 * figure's label and the note under each group says what it means, so the
 * difference is on the page and not only in a tooltip.
 */
.ta-mark {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: none;
  vertical-align: 1px;
  opacity: 0.8;
}

.ta-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-muted);
}