/* Level10ai shared UI — the button system.
 *
 * Matched to qpionline.com, measured off the live site rather than eyeballed:
 *   primary    gold #c9a84c fill, navy #04152d text, 3px radius,
 *              DM Sans 500, 0.88rem, uppercase, 0.05em tracking,
 *              padding 0.85rem 2.2rem
 *   secondary  transparent, white text, 1px solid rgba(255,255,255,0.35),
 *              same geometry, weight 400
 *   nav        the primary treatment at 0.82rem / 0.45rem 1.1rem
 *
 * Gold carries the call to action again, so it means "act here" as well as
 * "brand". The rule that keeps that readable: exactly one gold button per view.
 * Everything competing with it is the outline variant.
 *
 * Loaded from a <link> placed last in <head>, so it comes after each page's
 * inline <style>. Class names are unchanged, so no markup had to move; the page
 * rules are outranked by source order at equal specificity, which is what
 * finally makes every stray border-radius and `border: none` agree.
 */

/* --------------------------------------------------------------- shared */

.nav-cta,
.nav-cta-out,
.nav-cta-outline,
.m-cta,
.cta,
.cta-buy,
.buy,
.btn,
.btn-gold,
.btn-primary,
.btn-outline,
.btn-ghost,
.btn-home,
.btn-start,
.btn-start-eval,
.btn-next,
.btn-back,
.btn-download,
.btn-discuss,
.topic-btn,
.tool-link,
.nav-item,
.starter-q,
.send-btn,
.copy-btn,
.checkout-btn,
.checkout-btn-sec,
.stripe-direct-btn,
.gate-btn,
.quiz-next,
.print-btn,
.name-submit,
.back-to-top,
.back-btn,
.access-link,
.sub-btn {
  font-family: 'DM Sans', sans-serif;
  border-radius: 3px !important;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  /* Labels wrapping to two lines was the main reason adjacent buttons looked
     ragged. They are short enough to hold one line. */
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease,
              color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* ------------------------------------------------------------- primary */
/* The action the page wants you to take. Gold fill, navy label. */

.nav-cta,
.m-cta,
.cta,
.cta-buy,
.buy,
.btn,
.btn-gold,
.btn-primary,
.btn-start,
.btn-start-eval,
.btn-next,
.send-btn,
.checkout-btn,
.stripe-direct-btn,
.gate-btn,
.quiz-next,
.print-btn,
.name-submit {
  background: #c9a84c;
  border: 1px solid #c9a84c;
  color: #04152d !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85rem 2.2rem;
  font-size: 0.88rem;
}

.nav-cta:hover,
.m-cta:hover,
.cta:hover,
.cta-buy:hover,
.buy:hover,
.btn:hover,
.btn-gold:hover,
.btn-primary:hover,
.btn-start:hover,
.btn-start-eval:hover,
.btn-next:hover,
.send-btn:hover,
.checkout-btn:hover,
.stripe-direct-btn:hover,
.gate-btn:hover,
.quiz-next:hover,
.print-btn:hover,
.name-submit:hover {
  background: #f0d48a;
  border-color: #f0d48a;
  color: #04152d !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.28);
}

/* ----------------------------------------------------------- secondary */
/* Everything that sits beside the gold button without competing with it. */

.nav-cta-out,
.nav-cta-outline,
.btn-outline,
.btn-ghost,
.btn-home,
.btn-back,
.btn-download,
.btn-discuss,
.checkout-btn-sec,
.copy-btn,
.back-to-top,
.back-btn,
.access-link {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85rem 2.2rem;
  font-size: 0.88rem;
}

.nav-cta-out:hover,
.nav-cta-outline:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-home:hover,
.btn-back:hover,
.btn-download:hover,
.btn-discuss:hover,
.checkout-btn-sec:hover,
.copy-btn:hover,
.back-to-top:hover,
.back-btn:hover,
.access-link:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------- nav */
/* The header buttons are the same treatment, smaller. */

.nav-cta,
.nav-cta-out,
.nav-cta-outline,
.access-link,
.copy-btn {
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

/* Utility buttons inside toolbars and cards sit between the two sizes. */
.btn-back,
.btn-download,
.btn-discuss,
.btn-home,
.back-to-top,
.back-btn,
.btn-next,
.send-btn,
.quiz-next,
.name-submit {
  padding: 0.65rem 1.5rem;
  font-size: 0.82rem;
}

/* The pulsing glow was built for a different button and reads as a warning. */
.btn-start-eval {
  animation: none;
}

/* ------------------------------------------------------------ centring */
/* Standalone page CTAs centre in their container. Buttons that live in a row or
   a toolbar are left alone — their parent already lays them out. */

.cta,
.cta-buy,
.buy,
.m-cta,
.btn-start-eval,
.btn-start,
.checkout-btn,
.checkout-btn-sec,
.stripe-direct-btn,
.gate-btn,
.print-btn {
  margin-left: auto;
  margin-right: auto;
}

.cta-wrap,
.center-cta {
  text-align: center;
}

/* --------------------------------------------------- sidebar / topic nav */
/* Topic names are content, not calls to action: uppercase would shout and the
   longer ones would wrap. They keep sentence case and align left, because a
   centred column of topics reads as decoration rather than navigation. */

/* Matched to the evaluation-report panel on the right: same #0a2744 fill and
   same gold-tinted hairline, so the two rails read as one interface rather than
   as an outlined column facing a filled one. */
.topic-btn,
.tool-link,
.nav-item,
.starter-q {
  display: block;
  width: 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 400;
  background: #0a2744;
  border: 1px solid rgba(201, 168, 76, 0.28);
  /* Body blue, the same as the labels in the report panel opposite. Hover takes
     it to white, so brightening the text is part of the light-up. */
  color: var(--blue-200, #b5d4f4) !important;
  /* Tightened so the whole rail fits without scrolling — the Log Into Your
     Accounts block sits below eleven of these and was falling off the bottom.
     white-space stays normal: nowrap would overflow the 260px rail instead. */
  padding: 0.42rem 0.9rem;
  font-size: 0.84rem;
  line-height: 1.35;
  margin-bottom: 5px;
  white-space: normal;
}

/* Hover has to be unmistakable and fully reversible — it lifts to the next navy
   up with a gold edge, then drops straight back. */
.topic-btn:hover,
.tool-link:hover,
.nav-item:hover,
.starter-q:hover {
  background: #103860;
  border-color: var(--gold, #c9a84c);
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(2, 12, 27, 0.5);
}

/* The section you are in keeps the same navy as its neighbours and is marked by
   a gold left edge — the same device the evaluation-report cards use, so the
   two rails stay consistent. A solid gold fill shouted once the buttons around
   it became filled rather than outlined. */
.topic-btn.active,
.nav-item.active {
  background: #0a2744;
  border-color: rgba(201, 168, 76, 0.28);
  border-left: 3px solid var(--gold, #c9a84c);
  color: var(--blue-200, #b5d4f4) !important;
  font-weight: 500;
}

.sub-btn {
  margin-bottom: 6px;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------ close buttons */
/* Icon-only ✕ controls are buttons, but a bordered box around a single glyph
   looks like a mistake. */

.close-x {
  background: none;
  border: none;
  color: #ffffff !important;
  font-size: 17px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.close-x:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

/* ----------------------------------------------------------- keyboard */
/* Tab used to move through the page with nothing to show for it. */

.nav-cta:focus-visible,
.nav-cta-out:focus-visible,
.m-cta:focus-visible,
.cta:focus-visible,
.buy:focus-visible,
.btn:focus-visible,
.btn-gold:focus-visible,
.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-start-eval:focus-visible,
.btn-next:focus-visible,
.btn-back:focus-visible,
.btn-download:focus-visible,
.btn-discuss:focus-visible,
.topic-btn:focus-visible,
.tool-link:focus-visible,
.nav-item:focus-visible,
.starter-q:focus-visible,
.send-btn:focus-visible,
.checkout-btn:focus-visible,
.gate-btn:focus-visible,
.quiz-next:focus-visible,
.name-submit:focus-visible,
.close-x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.45);
}

/* ----------------------------------------------------------- mobile */
/* white-space:nowrap keeps labels on one line, which tidies desktop rows but
   gives a long label no way out on a phone — "Didn't receive your access
   email? Resend it" ran off the right edge of the screen. Below 640px labels
   may wrap again and buttons are capped at the width of their container. */

@media (max-width: 640px) {
  .nav-cta, .nav-cta-out, .nav-cta-outline, .m-cta, .cta, .cta-buy, .buy,
  .btn, .btn-gold, .btn-primary, .btn-outline, .btn-ghost, .btn-home,
  .btn-start, .btn-start-eval, .btn-next, .btn-back, .btn-download,
  .btn-discuss, .send-btn, .copy-btn, .checkout-btn, .checkout-btn-sec,
  .stripe-direct-btn, .gate-btn, .quiz-next, .print-btn, .name-submit,
  .back-to-top, .back-btn, .access-link {
    white-space: normal;
    max-width: 100%;
    padding: 0.75rem 1.3rem;
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* The login screen centres its content vertically. Once that content is
     taller than a phone viewport, centring pushes the top — the logo — above
     the top of the screen, where it cannot be scrolled back into view. */
  #gate {
    justify-content: flex-start !important;
    padding-top: 28px !important;
  }
}

/* --------------------------------------------------------- disabled */

.btn:disabled,
.btn-gold:disabled,
.btn-primary:disabled,
.btn-next:disabled,
.btn-start-eval:disabled,
.btn-discuss:disabled,
.btn-download:disabled,
.send-btn:disabled,
.quiz-next:disabled,
.checkout-btn:disabled,
.gate-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── My Library drawers ─────────────────────────────────────────────────
   The drawer carries its own scrollbar, separate from the page scrollbar on
   the far right. The header is a fixed row and only the list beneath it
   scrolls, so the track begins under "My Library" and plainly belongs to it.
   Always drawn (scroll, not auto): the browser default is dark on dark and
   invisible against the navy, which made a scrollable list look like it had
   simply ended. The panels are switched to display:flex when opened. */
#saved-chats-panel,
#cm-saved-chats-panel,
[id^="saved-panel-"]{flex-direction:column;}
#saved-chats-panel > div:first-child,
#cm-saved-chats-panel > div:first-child,
[id^="saved-panel-"] > div:first-child{flex:0 0 auto;}
#saved-chats-list,
#cm-saved-chats-list,
[id^="saved-list-"]{flex:1 1 auto;min-height:0;overflow-y:scroll;}
/* Firefox only. Chromium ignores every ::-webkit-scrollbar rule on an element
   that also sets scrollbar-width or scrollbar-color -- the standard properties
   put it on the standard path, which has no arrows and no settable width. That
   is why the arrows below appeared to have no effect: they were never used.
   -moz-appearance gates this to the one engine that needs it. */
@supports (-moz-appearance:none){
  #saved-chats-list,
  #cm-saved-chats-list,
  [id^="saved-list-"]{scrollbar-width:thin;scrollbar-color:#c9a84c #04152d;}
}
#saved-chats-list::-webkit-scrollbar,
#cm-saved-chats-list::-webkit-scrollbar,
[id^="saved-list-"]::-webkit-scrollbar{width:22px;}
#saved-chats-list::-webkit-scrollbar-track,
#cm-saved-chats-list::-webkit-scrollbar-track,
[id^="saved-list-"]::-webkit-scrollbar-track{background:#04152d;border-left:1px solid rgba(201,168,76,0.25);}
#saved-chats-list::-webkit-scrollbar-thumb,
#cm-saved-chats-list::-webkit-scrollbar-thumb,
[id^="saved-list-"]::-webkit-scrollbar-thumb{background:#c9a84c;border-radius:8px;border:4px solid #04152d;}
/* The up/down arrows. Chrome draws none once a scrollbar is custom-styled, so
   they are supplied here as SVG triangles sized to the 16px track rather than
   left at the browser's default 6px glyph. Both ends of each direction exist —
   the redundant pair is hidden so there is one arrow at the top and one at the
   bottom. Firefox has no scrollbar buttons at all; nothing to draw there. */
#saved-chats-list::-webkit-scrollbar-button:vertical:start:increment,
#cm-saved-chats-list::-webkit-scrollbar-button:vertical:start:increment,
[id^="saved-list-"]::-webkit-scrollbar-button:vertical:start:increment,
#saved-chats-list::-webkit-scrollbar-button:vertical:end:decrement,
#cm-saved-chats-list::-webkit-scrollbar-button:vertical:end:decrement,
[id^="saved-list-"]::-webkit-scrollbar-button:vertical:end:decrement{display:none;}
#saved-chats-list::-webkit-scrollbar-button:vertical:start:decrement,
#cm-saved-chats-list::-webkit-scrollbar-button:vertical:start:decrement,
[id^="saved-list-"]::-webkit-scrollbar-button:vertical:start:decrement,
#saved-chats-list::-webkit-scrollbar-button:vertical:end:increment,
#cm-saved-chats-list::-webkit-scrollbar-button:vertical:end:increment,
[id^="saved-list-"]::-webkit-scrollbar-button:vertical:end:increment{
  height:28px;background-color:#0a2744;background-repeat:no-repeat;
  background-position:center;background-size:20px 20px;
  border:1px solid rgba(201,168,76,0.45);
}
#saved-chats-list::-webkit-scrollbar-button:vertical:start:decrement,
#cm-saved-chats-list::-webkit-scrollbar-button:vertical:start:decrement,
[id^="saved-list-"]::-webkit-scrollbar-button:vertical:start:decrement{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1.6 L11.6 10.4 L0.4 10.4 Z' fill='%23c9a84c'/></svg>");
}
#saved-chats-list::-webkit-scrollbar-button:vertical:end:increment,
#cm-saved-chats-list::-webkit-scrollbar-button:vertical:end:increment,
[id^="saved-list-"]::-webkit-scrollbar-button:vertical:end:increment{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 10.4 L0.4 1.6 L11.6 1.6 Z' fill='%23c9a84c'/></svg>");
}

/* ── The Advisor rail ───────────────────────────────────────────────────
   Same treatment as the Library drawer so the two scrollbars in view read as
   one system rather than one gold and one Windows grey. Narrower than the
   drawer's: this one sits beside a 260px rail, not a full-width list. */
.sidebar::-webkit-scrollbar,
.advisor-sidebar::-webkit-scrollbar{width:14px;}
.sidebar::-webkit-scrollbar-track,
.advisor-sidebar::-webkit-scrollbar-track{background:#04152d;}
.sidebar::-webkit-scrollbar-thumb,
.advisor-sidebar::-webkit-scrollbar-thumb{background:#c9a84c;border-radius:7px;border:3px solid #04152d;}
.sidebar::-webkit-scrollbar-button:vertical:start:increment,
.advisor-sidebar::-webkit-scrollbar-button:vertical:start:increment,
.sidebar::-webkit-scrollbar-button:vertical:end:decrement,
.advisor-sidebar::-webkit-scrollbar-button:vertical:end:decrement{display:none;}
.sidebar::-webkit-scrollbar-button:vertical:start:decrement,
.advisor-sidebar::-webkit-scrollbar-button:vertical:start:decrement,
.sidebar::-webkit-scrollbar-button:vertical:end:increment,
.advisor-sidebar::-webkit-scrollbar-button:vertical:end:increment{
  height:20px;background-color:#0a2744;background-repeat:no-repeat;
  background-position:center;background-size:13px 13px;
  border:1px solid rgba(201,168,76,0.45);
}
.sidebar::-webkit-scrollbar-button:vertical:start:decrement,
.advisor-sidebar::-webkit-scrollbar-button:vertical:start:decrement{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 1.6 L11.6 10.4 L0.4 10.4 Z' fill='%23c9a84c'/></svg>");
}
.sidebar::-webkit-scrollbar-button:vertical:end:increment,
.advisor-sidebar::-webkit-scrollbar-button:vertical:end:increment{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M6 10.4 L0.4 1.6 L11.6 1.6 Z' fill='%23c9a84c'/></svg>");
}
/* Firefox again: setting these anywhere Chromium can see them would disable
   every ::-webkit-scrollbar rule above. See the note on the Library drawer. */
@supports (-moz-appearance:none){
  .sidebar,
  .advisor-sidebar{scrollbar-width:thin;scrollbar-color:#c9a84c #04152d;}
}

/* ── My Library drawer footer ───────────────────────────────────────────
   The Library is one browser's localStorage, so the drawer says so and
   offers a way out. Sits below the scrolling list, not inside it. */
.lib-footer{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 20px 12px;border-top:1px solid rgba(201,168,76,0.2);background:#04152d;
}
.lib-note{flex:1 1 200px;font-family:Arial,sans-serif;font-size:11px;color:#8ca4be;line-height:1.4;}
.lib-act{
  background:none;border:1px solid rgba(201,168,76,0.5);color:#c9a84c;
  font-family:Georgia,serif;font-size:11.5px;padding:5px 12px;cursor:pointer;
  white-space:nowrap;border-radius:2px;
}
.lib-act:hover{border-color:#c9a84c;background:rgba(201,168,76,0.1);}

/* ── Tool rows ──────────────────────────────────────────────────────────
   My Research Library and the other tool rows take the rail's own treatment:
   same navy, same border, same body blue as the advisors around them. An
   outline, then white lettering, were both tried and both read as a different
   kind of control rather than a quieter one. Marked when active the way the
   advisors mark theirs, with a gold left edge rather than a fill. */
.tool-link.active {
  border-left: 3px solid var(--gold, #c9a84c);
}
