/* ============================================================
   articles.css  —  SEO landing/article page fixes
   Loads LAST (after slug-polish, ui-polish, console-base) so
   its !important rules win at equal specificity by document
   order. Scope is the 21 static article/tool pages only.
   Owns: responsive comparison tables, calculator + split-sheet
   tool chrome, two-tone H1, guide-card panels, residual purple,
   tap targets. Tokens mirror the Console system.
   ============================================================ */
:root{
  --a-bg:#0a0a0a; --a-panel:#0f0f0f; --a-raised:#161616;
  --a-line:#232323; --a-line-2:#2e2e2e;
  --a-text:#c9c9cf; --a-muted:#9a9a9a; --a-white:#fff;
  --a-green:#4ade80; --a-red:#f87171; --a-amber:#fbbf24;
}

/* ------------------------------------------------------------
   0. LSA-01 — quirks-mode immunity: an article container can
      never be flex-centred / height-collapsed again.
   ------------------------------------------------------------ */
.section > .new-container{height:auto!important;display:block!important}

/* ------------------------------------------------------------
   1. TWO-TONE H1 (Stripe/Apple brief) — qualifier clause in a
      muted second colour at identical size & weight.
   ------------------------------------------------------------ */
h1 .muted{
  color:var(--a-muted)!important;-webkit-text-fill-color:var(--a-muted)!important;
  font-weight:inherit!important;letter-spacing:inherit;
}

/* ------------------------------------------------------------
   2. COMPARISON TABLES — one responsive pattern for every
      .vs-table (LSA-03 / LSB-11 / LSB-12).
      >=768: real table inside a scroll box, sticky first col.
      <768 : each row becomes a labelled card (thead hidden,
             "Column  value" via data-col).
   ------------------------------------------------------------ */
.vs-table-wrap{position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (min-width:768px){
  .vs-table th:first-child,.vs-table td:first-child{
    position:sticky;left:0;z-index:1;background:var(--a-panel)!important;
  }
  .vs-table th:first-child{background:var(--a-raised)!important}
}

/* residual purple on the "OneSync" header column (head <style>) */
.vs-table th:nth-child(3),.vs-table th:nth-child(2){
  background:var(--a-raised)!important;background-image:none!important;color:var(--a-white)!important;
}

/* keep money / status colours (slug-polish flattens td colour) */
.vs-table td[style*="4ade80"],.rate-table td[style*="4ade80"],
table[style] td[style*="4ade80"]{color:var(--a-green)!important}
.vs-table td[style*="f87171"],table[style] td[style*="f87171"]{color:var(--a-red)!important}
.vs-table td[style*="fbbf24"],table[style] td[style*="fbbf24"]{color:var(--a-amber)!important}

@media (max-width:767px){
  .vs-table{
    display:block!important;width:100%!important;min-width:0!important;
    border:0!important;background:transparent!important;overflow:visible!important;
    border-radius:0!important;border-collapse:collapse!important;
  }
  .vs-table thead{display:none!important}
  .vs-table tbody{display:block!important}
  .vs-table tr{
    display:block!important;background:var(--a-panel)!important;
    border:1px solid var(--a-line-2)!important;border-radius:8px!important;
    margin:0 0 10px!important;padding:8px 14px!important;overflow:hidden!important;
  }
  .vs-table td{
    display:flex!important;justify-content:space-between!important;align-items:baseline;
    gap:14px!important;text-align:right!important;border:0!important;
    border-bottom:1px solid var(--a-line)!important;padding:8px 0!important;
    font-size:14px!important;line-height:1.4;min-width:0!important;
  }
  .vs-table td:last-child{border-bottom:0!important}
  .vs-table td::before{
    content:attr(data-col);text-align:left;color:var(--a-muted)!important;
    font-weight:600;font-size:13px;flex:0 0 auto;white-space:nowrap;
  }
  .vs-table td:first-child{
    display:block!important;text-align:left!important;font-weight:700!important;
    color:var(--a-white)!important;font-size:15px!important;
    border-bottom:1px solid var(--a-line)!important;
    padding:0 0 8px!important;margin-bottom:4px!important;position:static!important;
  }
  .vs-table td:first-child::before{display:none!important}
}

/* ------------------------------------------------------------
   3. RATE TABLE (calculator, LSA-16) — scroll box + compact,
      wrapping cells so it never becomes an offender at 375.
   ------------------------------------------------------------ */
.rate-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0}
.rate-table{margin:0!important}
@media (max-width:767px){
  .rate-table th,.rate-table td{padding:10px 10px!important;font-size:14px!important}
}

/* ------------------------------------------------------------
   4. CALCULATOR CHROME (LSA-02 / LSA-16)
   ------------------------------------------------------------ */
.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
@media (max-width:1023px){.calc-grid{grid-template-columns:minmax(0,1fr)!important}}
.calc-card{min-width:0!important}
.platform-row input{min-width:0!important;width:100%!important}
.platform-name{display:block!important}
.platform-name small{display:block!important;margin-top:2px}
@media (max-width:767px){
  .calc-card{padding:20px!important}
  .platform-row{grid-template-columns:minmax(0,1fr) 96px!important;gap:8px!important}
}
/* commission comparison — legible at 14px min */
.cmp-row{font-size:14px!important;grid-template-columns:minmax(0,1fr) 74px 86px!important}
.cmp-row.head{font-size:12px!important;letter-spacing:0!important}
.cmp-row .name{white-space:normal!important;min-width:0}
.cmp-row.head span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* copy button must not sit on the first line of embed code */
.embed-box{padding-top:48px!important}
.copy-btn{min-height:32px}

/* ------------------------------------------------------------
   5. PANELS — cards that still blend into the canvas
      (guide-card / rank-card / calc-card, LSA-07).
   ------------------------------------------------------------ */
.guide-card,.rank-card,.calc-card,.totals,.commission-cmp{
  background:var(--a-panel)!important;background-image:none!important;
  border:1px solid var(--a-line)!important;border-radius:10px!important;box-shadow:none!important;
}
.guide-card:hover{border-color:var(--a-line-2)!important;transform:none!important}

/* ------------------------------------------------------------
   6. SPLIT-SHEET GENERATOR (LSB-01 / LSB-02 / LSB-21)
   ------------------------------------------------------------ */
/* unify + enlarge inputs (16px, 44px rows, number/date match text) */
.ss-table input,.ss-table select,.field input,.field textarea{
  font-size:16px!important;min-height:44px!important;
  background:rgba(255,255,255,.04)!important;border:1px solid var(--a-line-2)!important;
  border-radius:8px!important;padding:11px 12px!important;color:var(--a-white)!important;
}
/* tablet: table fits without the 760px min-width */
@media (min-width:768px) and (max-width:991px){
  .ss-table{min-width:600px!important}
  .ss-table th,.ss-table td{padding:8px 8px!important}
}
/* tfoot totals — real row, aligns/scrolls with columns */
#collabTable tfoot .val{color:var(--a-green)!important;font-variant-numeric:tabular-nums;font-weight:700}
#collabTable tfoot .val.bad{color:var(--a-red)!important}
#collabTable tfoot td{font-weight:700}
#collabTable tfoot .ss-total-label{color:var(--a-white)!important}
.ss-table td .rm-txt{display:none}
@media (min-width:768px){
  #collabTable tfoot .totals-tr td{background:var(--a-raised)!important;border-top:1px solid var(--a-line-2)!important}
  #collabTable tfoot .num{text-align:right!important}
}

/* phones: whole table (incl. tfoot) becomes labelled cards */
@media (max-width:767px){
  #collabTable,#collabTable tbody,#collabTable tfoot,#collabTable tr,#collabTable td{
    display:block!important;width:auto!important;
  }
  #collabTable{min-width:0!important;border:0!important;background:transparent!important;overflow:visible!important}
  #collabTable thead{display:none!important}
  #collabTable tbody tr,#collabTable tfoot tr{
    background:var(--a-panel)!important;border:1px solid var(--a-line-2)!important;
    border-radius:8px!important;padding:12px 14px!important;margin:0 0 12px!important;
  }
  #collabTable td{border:0!important;padding:8px 0 0!important}
  #collabTable td::before{
    content:attr(data-label);display:block;font-size:12px;color:var(--a-muted)!important;
    font-weight:600;margin-bottom:4px;
  }
  #collabTable td.actions::before,#collabTable .ss-total-label::before{display:none!important}
  #collabTable td.ss-empty,#collabTable td:empty{display:none!important}
  #collabTable td .rm-x{display:none}
  #collabTable td.actions .icon-btn{
    display:flex!important;width:100%;min-height:44px;align-items:center;justify-content:center;
    border:1px solid var(--a-line-2)!important;border-radius:6px;color:var(--a-muted)!important;font-size:14px;
  }
  #collabTable td.actions .rm-txt{display:inline!important}
  #collabTable tfoot .ss-total-label{
    font-weight:700;color:var(--a-white)!important;font-size:15px;
    border-bottom:1px solid var(--a-line)!important;padding-bottom:8px!important;
  }
  #collabTable tfoot .num{display:flex!important;justify-content:space-between;align-items:baseline}
}

/* ------------------------------------------------------------
   7. TAP TARGETS (LSA-19 / LSB-15)
   ------------------------------------------------------------ */
.guide-card a{
  display:inline-flex!important;align-items:center;gap:6px;min-height:44px;
  padding:8px 0!important;font-weight:600!important;color:var(--a-white)!important;
}
.article-content p a,.article-content li a,.article-content .highlight-box a,
.content-section p a,.content-section li a,.step-content a{
  padding:6px 0;
}