/*
 * QEVORK v0.3 — Gear Calculator (Tier 1, embeddable widget)
 * Stylesheet — scoped entirely under #qevork-calc-root.
 *
 * DEPLOYMENT: enqueue this file via WordPress (functions.php or a
 * site-specific plugin) using wp_enqueue_style(), OR upload via
 * Elementor's custom CSS/JS manager if using one. Do NOT rename the
 * #qevork-calc-root selector without also updating index.html / the
 * Elementor HTML widget markup and script.js (they share this contract).
 *
 * SCOPE: supports exactly ONE widget instance per page — see script.js
 * header for the reason (duplicate-id limitation of the Selectors API).
 */

  #qevork-calc-root {
    --bg:       #0a0a0a;
    --panel:    #111111;
    --border:   #2a2a2a;
    --text:     #e8e8e8;
    --text-dim: #8a8a8a;
    --accent:   #00ff66;
    --danger:   #ff3b30;
    --warn:     #ffb800;
    --mono:     'IBM Plex Mono', 'JetBrains Mono', 'Courier New', monospace;

    background:   var(--bg)     !important;
    color:        var(--text)   !important;
    font-family:  var(--mono)   !important;
    border:       1px solid var(--border) !important;
    max-width:    980px;
    margin:       0 auto !important;
    box-sizing:   border-box !important;
    display:      block !important;
  }

  /* sub/sup inside widget: browser default 'font-size: smaller' is too
     aggressive on monospace at 12px. Fix at 0.72em (typographic standard
     for subscript legibility) and ensure font inheritance is not broken. */
  #qevork-calc-root sub {
    font-size:      0.72em !important;
    vertical-align: sub    !important;
    line-height:    0      !important;
    font-family:    var(--mono) !important;
  }

  /* Universal reset scoped to widget — prevents theme bleed on ALL descendants */
  #qevork-calc-root * {
    box-sizing:  border-box !important;
    font-family: var(--mono) !important;
  }

  /* ── Layout ── */
  #qevork-calc-root .qv-header {
    display:         flex !important;
    justify-content: space-between !important;
    align-items:     baseline !important;
    padding:         14px 20px !important;
    border-bottom:   1px solid var(--border) !important;
    background:      transparent !important;
  }

  #qevork-calc-root .qv-header .qv-title {
    font-size:      13px !important;
    letter-spacing: 0.04em !important;
    color:          var(--text) !important;
    text-transform: uppercase !important;
  }

  #qevork-calc-root .qv-header .qv-version {
    font-size: 11px !important;
    color:     var(--text-dim) !important;
  }

  #qevork-calc-root .qv-body {
    display:               grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   0 !important;
    background:            transparent !important;
    width:                 100% !important;
  }

  @media (max-width: 720px) {
    #qevork-calc-root .qv-body {
      grid-template-columns: 1fr !important;
    }
  }

  #qevork-calc-root .qv-col {
    padding:    20px !important;
    background: transparent !important;
  }

  #qevork-calc-root .qv-col + .qv-col {
    border-left: 1px solid var(--border) !important;
  }

  @media (max-width: 720px) {
    #qevork-calc-root .qv-col + .qv-col {
      border-left: none !important;
      border-top:  1px solid var(--border) !important;
    }
  }

  #qevork-calc-root .qv-section-label {
    font-size:      11px !important;
    color:          var(--text-dim) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom:  14px !important;
    border-bottom:  1px solid var(--border) !important;
    padding-bottom: 8px !important;
    background:     transparent !important;
  }

  /* ── Input fields ── */
  #qevork-calc-root .qv-field {
    display:               grid !important;
    grid-template-columns: 110px 1fr !important;
    align-items:           center !important;
    gap:                   10px !important;
    margin-bottom:         10px !important;
    min-height:            28px !important;
    background:            transparent !important;
  }

  #qevork-calc-root .qv-field label {
    font-size:   12px !important;
    color:       var(--text-dim) !important;
    margin:      0 !important;
    padding:     2px 0 !important;
    line-height: normal !important;
    overflow:    visible !important;
    display:     flex !important;
    align-items: center !important;
    min-height:  28px !important;
    align-self:  center !important;
  }

  #qevork-calc-root .qv-field input,
  #qevork-calc-root .qv-field select {
    background:    var(--panel)  !important;
    border:        1px solid var(--border) !important;
    color:         var(--text)   !important;
    font-size:     13px          !important;
    padding:       6px 8px       !important;
    width:         100%          !important;
    max-width:     none          !important;
    min-width:     0             !important;
    height:        auto          !important;
    margin:        0             !important;
    outline:       none          !important;
    box-shadow:    none          !important;
    border-radius: 0             !important;
  }

  #qevork-calc-root .qv-field input:focus,
  #qevork-calc-root .qv-field select:focus {
    border-color: var(--accent) !important;
  }

  #qevork-calc-root .qv-field input.qv-invalid,
  #qevork-calc-root .qv-field select.qv-invalid {
    border-color: var(--danger) !important;
  }

  /* ── Custom spinner (replaces native browser arrows) ── */
  #qevork-calc-root .qv-number-wrap {
    position: relative !important;
  }

  #qevork-calc-root .qv-number-wrap input[type="number"] {
    padding-right:    22px !important;
    -moz-appearance:  textfield;
  }

  #qevork-calc-root .qv-number-wrap input[type="number"]::-webkit-outer-spin-button,
  #qevork-calc-root .qv-number-wrap input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  #qevork-calc-root .qv-spin-buttons {
    position:       absolute !important;
    top:            1px      !important;
    right:          1px      !important;
    bottom:         1px      !important;
    width:          18px     !important;
    display:        flex     !important;
    flex-direction: column   !important;
    border-left:    1px solid var(--border) !important;
  }

  #qevork-calc-root .qv-spin-btn {
    flex:            1              !important;
    background:      var(--bg)      !important;
    border:          none           !important;
    color:           var(--text-dim)!important;
    cursor:          pointer        !important;
    padding:         0              !important;
    margin:          0              !important;
    display:         flex           !important;
    align-items:     center         !important;
    justify-content: center         !important;
    font-size:       0              !important;
    line-height:     1              !important;
  }

  #qevork-calc-root .qv-spin-btn:first-child {
    border-bottom: 1px solid var(--border) !important;
  }

  #qevork-calc-root .qv-spin-btn:hover {
    background: var(--panel)  !important;
    color:      var(--accent) !important;
  }

  #qevork-calc-root .qv-spin-btn::before {
    content:      ''  !important;
    width:        0   !important;
    height:       0   !important;
    border-left:  3px solid transparent !important;
    border-right: 3px solid transparent !important;
  }

  #qevork-calc-root .qv-spin-btn[data-dir="up"]::before {
    border-bottom: 4px solid currentColor !important;
    border-top:    none !important;
  }

  #qevork-calc-root .qv-spin-btn[data-dir="down"]::before {
    border-top:    4px solid currentColor !important;
    border-bottom: none !important;
  }

  /* ── Results panel ── */
  #qevork-calc-root .qv-result-row {
    display:               grid !important;
    grid-template-columns: 1fr auto !important;
    align-items:           baseline !important;
    padding:               8px 0 !important;
    border-bottom:         1px solid var(--border) !important;
    overflow:              visible !important;
    background:            transparent !important;
  }

  #qevork-calc-root .qv-result-row:last-child {
    border-bottom: none !important;
  }

  #qevork-calc-root .qv-result-label {
    font-size:   12px !important;
    color:       var(--text-dim) !important;
    line-height: normal !important;
    overflow:    visible !important;
  }

  #qevork-calc-root .qv-result-value {
    font-size:   18px !important;
    color:       var(--accent) !important;
    font-weight: 600 !important;
  }

  #qevork-calc-root .qv-result-value.qv-fail {
    color: var(--danger) !important;
  }

  #qevork-calc-root .qv-result-value.qv-marginal {
    color: var(--warn) !important;
  }

  #qevork-calc-root .qv-result-sub {
    font-size: 11px !important;
    color:     var(--text-dim) !important;
  }

  /* ── Gear profile box ── */
  #qevork-calc-root .qv-profile-box {
    border:      1px solid var(--border) !important;
    padding:     12px !important;
    margin-top:  12px !important;
    text-align:  center !important;
    background:  transparent !important;
    overflow:    visible !important;
  }

  #qevork-calc-root .qv-profile-caption {
    font-size:   11px !important;
    color:       var(--text-dim) !important;
    margin-top:  8px !important;
    line-height: normal !important;
  }

  /* ── Tier badge + upsell ── */
  #qevork-calc-root .qv-tier-badge {
    display:        inline-block !important;
    font-size:      10px !important;
    letter-spacing: 0.05em !important;
    padding:        3px 8px !important;
    border:         1px solid var(--border) !important;
    color:          var(--text-dim) !important;
    margin-top:     10px !important;
    background:     transparent !important;
  }

  #qevork-calc-root .qv-upsell {
    margin-top:  16px !important;
    padding:     12px !important;
    border:      1px solid var(--border) !important;
    background:  var(--panel) !important;
  }

  #qevork-calc-root .qv-upsell-title {
    font-size:      11px !important;
    color:          var(--warn) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom:  6px !important;
  }

  #qevork-calc-root .qv-upsell-text {
    font-size:   12px !important;
    color:       var(--text-dim) !important;
    line-height: 1.5 !important;
  }

  #qevork-calc-root .qv-upsell a {
    color:           var(--accent) !important;
    text-decoration: none !important;
  }

  #qevork-calc-root .qv-upsell a:hover {
    text-decoration: underline !important;
  }

  /* ── Footer + error ── */
  #qevork-calc-root .qv-footnote {
    font-size:   10px !important;
    color:       var(--text-dim) !important;
    padding:     12px 20px !important;
    border-top:  1px solid var(--border) !important;
    line-height: 1.5 !important;
    background:  transparent !important;
  }

  #qevork-calc-root .qv-error-banner {
    font-size: 12px !important;
    color:     var(--danger) !important;
    padding:   8px 0 !important;
    display:   none;
    /* display is toggled by JS — intentionally NOT !important so JS can override */
  }

  /* ── MathJax isolation ──
     Prevents theme line-height / overflow:hidden from clipping rendered math.
     vertical-align is deliberately NOT overridden — MathJax sets its own
     baseline alignment (-0.5ex) and overriding it causes the symbol to drop. */
  #qevork-calc-root mjx-container {
    overflow:    visible !important;
    line-height: normal  !important;
  }

  #qevork-calc-root mjx-container * {
    overflow: visible !important;
  }