/* QuikSEO on Cloudflare: the few rules of this app's own markup, after the Obsidian kit */

/* The account initial in the app sidebar footer, sized as PHP's avatar image (.app-sidebar-avatar) */
.qs-avatar-initial {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--ob-accent, #10b981);
    color: #04140d;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

/* Log out is a form button styled as a dropdown item */
.app-sidebar-footer form .dropdown-item { cursor: pointer; }

/* partials/usage_meters.php: the bar's height (PHP: an inline style) */
.qs-usage-progress { height: .4rem; }

/* views/account-plan/index.php: the suggested plan's card (PHP: an inline style) */
.qs-suggested-plan { border-width: 2px; }

/* A section heading that PHP prints as one more H1 of the page: an H2 here (one H1 per page), with the H1's look */
body.qs-app main .qs-display-heading, body.qs-public.qs-app main .container h2.qs-display-heading:not(.ob-h2):not(.ob-h3):not(.h-h2) { font-family: var(--ob-font-display); font-weight: 300; letter-spacing: -.02em; color: var(--ob-fg-1); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }

/* views/pay-thank-you/index.php: the illustration's height (PHP: style="max-height: 350px;" through sprintf()) */
.qs-thank-you-illustration { max-height: 350px; }

/* The read-only status of a Worker secret (src/ui/secret-status.tsx): the box grows and the sentence wraps at any width */
.qs-secret-status {
  height: auto;
  min-height: calc(1.5em + 0.75rem + 2px);
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: default;
}