/* =========================================================
   RBAI31 v5.4 — Compact RBAI Article Design System
   SINGLE VIEW / ONE DOM / RESPONSIVE / ADSENSE-CONSCIOUS

   v5.4 focus:
   - tighter vertical rhythm
   - better horizontal alignment
   - shorter component headers
   - compact cards without cramped text
   - no artificial numbering on normal content
   - no content duplication
   ========================================================= */

.rbai31-article.rbai31-single-view{
  --r31-ink:#14213d;
  --r31-text:#172b4d;
  --r31-muted:#64748b;
  --r31-cyan:#08b8d8;
  --r31-blue:#3b82f6;
  --r31-purple:#7c3aed;
  --r31-line:#dbe4f0;
  --r31-soft:#f7faff;
  --r31-soft-2:#fbf9ff;
  --r31-white:#fff;
  --r31-shadow:0 10px 28px rgba(20,33,61,.055);
  --r31-shadow-soft:0 5px 16px rgba(20,33,61,.045);
  --r31-radius:18px;
  --r31-content:1060px;

  width:100%;
  max-width:var(--r31-content);
  margin-inline:auto;
  color:var(--r31-ink);
  box-sizing:border-box;
}

#rbai31.rbai31-engine{
  display:block;
  width:100%;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}

.rbai31-article.rbai31-single-view > *,
.rbai31-article.rbai31-single-view *{
  box-sizing:border-box;
}

.rbai31-article.rbai31-single-view p{
  color:var(--r31-text);
  font-size:17px;
  line-height:1.64;
  margin:0 0 17px;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view a{
  color:#2167d5;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view strong{
  color:#122344;
}

.rbai31-article.rbai31-single-view img{
  max-width:100%;
  height:auto;
}

.rbai31-article.rbai31-single-view blockquote{
  margin:20px 0;
  padding:16px 20px;
  border:1px solid #dbe6f3;
  border-left:4px solid var(--r31-blue);
  border-radius:14px;
  background:linear-gradient(135deg,#f8fcff,#fbf9ff);
}

/* =========================================================
   SECTION RHYTHM
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-section{
  position:relative;
  margin:0 0 38px;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
}

.rbai31-article.rbai31-single-view .r31-section::after{
  content:"";
  display:block;
  width:92px;
  height:2px;
  margin:24px auto 0;
  border-radius:99px;
  background:linear-gradient(90deg,var(--r31-cyan),var(--r31-blue),var(--r31-purple));
  opacity:.9;
}

.rbai31-article.rbai31-single-view .r31-section:last-child{
  margin-bottom:12px;
}

.rbai31-article.rbai31-single-view .r31-section:last-child::after{
  display:none;
}

/* =========================================================
   UNIVERSAL COMPONENT HEADER
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-component__heading{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;

  min-height:62px;
  margin:0 0 15px;
  padding:9px 22px;

  border:1px solid #d9e4f2;
  border-radius:18px;

  background:
    radial-gradient(circle at 94% 15%,rgba(124,58,237,.065),transparent 28%),
    radial-gradient(circle at 7% 85%,rgba(8,184,216,.065),transparent 25%),
    linear-gradient(135deg,#fff,#f8fbff 58%,#fbf9ff);

  box-shadow:var(--r31-shadow-soft);

  color:var(--r31-ink);
  font-size:clamp(27px,2.65vw,36px);
  line-height:1.13;
  font-weight:800;
  letter-spacing:-.025em;

  overflow-wrap:anywhere;
  word-break:normal;
}

.rbai31-article.rbai31-single-view .r31-component__heading::before{
  content:"";
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  height:4px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,var(--r31-cyan),var(--r31-blue),var(--r31-purple));
}

.rbai31-article.rbai31-single-view .r31-component__heading::after{
  content:none!important;
  display:none!important;
}

.rbai31-article.rbai31-single-view .r31-heading-icon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:1.08em;
  height:1.08em;
  font-size:.88em;
  line-height:1;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(8,184,216,.10),rgba(59,130,246,.09),rgba(124,58,237,.10));
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.07);
}

/* =========================================================
   INTRODUCTION
   ========================================================= */

/* Divider between article metadata and the Introduction section */
.rbai31-article.rbai31-single-view .r31-component--introduction::before{
  content:"";
  display:block;
  width:92px;
  height:2px;
  margin:0 auto 18px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--r31-cyan),var(--r31-blue),var(--r31-purple));
  opacity:.9;
}

.rbai31-article.rbai31-single-view .r31-component--introduction{
  margin-top:4px;
}

.rbai31-article.rbai31-single-view .r31-component--introduction .r31-component__heading{
  min-height:64px;
  font-size:clamp(29px,3vw,40px);
}

.rbai31-article.rbai31-single-view .r31-component--introduction > p:first-of-type{
  font-size:18px;
  line-height:1.68;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-component--summary{
  padding-bottom:0;
}

.rbai31-article.rbai31-single-view .r31-component--summary .r31-summary-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  list-style:none;
  margin:0;
  padding:10px;
  border:1px solid #dbe5f0;
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#fbfcff);
  box-shadow:var(--r31-shadow-soft);
}

.rbai31-article.rbai31-single-view .r31-summary-item{
  position:relative;
  min-width:0;
  margin:0;
  padding:14px 18px 14px 22px;
  border:1px solid #dce7f4;
  border-radius:15px;
  background:linear-gradient(135deg,#fff,#f9fbff);
  box-shadow:0 4px 13px rgba(20,33,61,.035);
  font-size:17px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view .r31-summary-item::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  bottom:13px;
  width:3px;
  border-radius:0 99px 99px 0;
  background:linear-gradient(180deg,var(--r31-cyan),var(--r31-blue),var(--r31-purple));
}

.rbai31-article.rbai31-single-view .r31-summary-grid > li::marker{
  content:""!important;
}

/* =========================================================
   STEPS / TASKS
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-list--steps,
.rbai31-article.rbai31-single-view .r31-list--tasks{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  list-style:none;
  margin:14px 0 18px;
  padding:0;
}

.rbai31-article.rbai31-single-view .r31-list--steps::before,
.rbai31-article.rbai31-single-view .r31-list--tasks::before{
  display:none;
}

.rbai31-article.rbai31-single-view .r31-list--steps > .r31-list-item,
.rbai31-article.rbai31-single-view .r31-list--tasks > .r31-list-item{
  position:relative;
  min-width:0;
  margin:0;
  padding:14px 17px 14px 54px;
  border:1px solid #dbe5f1;
  border-radius:15px;
  background:#fff;
  box-shadow:var(--r31-shadow-soft);
  font-size:17px;
  line-height:1.52;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view .r31-list--steps > .r31-list-item::before,
.rbai31-article.rbai31-single-view .r31-list--tasks > .r31-list-item::before{
  content:attr(data-r31-item);
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  color:#fff;
  font-size:12px;
  font-weight:800;
  background:linear-gradient(135deg,var(--r31-cyan),var(--r31-blue) 55%,var(--r31-purple));
  box-shadow:0 5px 12px rgba(59,130,246,.16);
  z-index:2;
}

/* =========================================================
   REQUIREMENTS / SKILLS / CATEGORIES
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-list--requirements,
.rbai31-article.rbai31-single-view .r31-list--skills,
.rbai31-article.rbai31-single-view .r31-list--categories{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  list-style:none;
  margin:14px 0 18px;
  padding:0;
}

.rbai31-article.rbai31-single-view .r31-list--requirements > .r31-list-item,
.rbai31-article.rbai31-single-view .r31-list--skills > .r31-list-item,
.rbai31-article.rbai31-single-view .r31-list--categories > .r31-list-item{
  position:relative;
  min-width:0;
  margin:0;
  padding:15px 18px 15px 52px;
  border:1px solid #dbe6f2;
  border-radius:15px;
  background:linear-gradient(135deg,#fff,#fafcff);
  box-shadow:0 4px 13px rgba(20,33,61,.035);
  font-size:16.5px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view .r31-list--requirements > .r31-list-item::before{
  content:"✓";
}

.rbai31-article.rbai31-single-view .r31-list--skills > .r31-list-item::before{
  content:"✦";
}

.rbai31-article.rbai31-single-view .r31-list--categories > .r31-list-item::before{
  content:"•";
}

.rbai31-article.rbai31-single-view .r31-list--requirements > .r31-list-item::before,
.rbai31-article.rbai31-single-view .r31-list--skills > .r31-list-item::before,
.rbai31-article.rbai31-single-view .r31-list--categories > .r31-list-item::before{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border-radius:50%;
  color:#fff;
  font-size:14px;
  font-weight:900;
  background:linear-gradient(135deg,var(--r31-cyan),var(--r31-purple));
}

/* =========================================================
   METRIC SECTIONS
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-metric-section > p:first-of-type{
  margin-bottom:18px;
  padding:17px 20px;
  border:1px solid #dbe6f2;
  border-radius:16px;
  background:linear-gradient(135deg,#f8fffd,#f8fbff,#fbf9ff);
  box-shadow:var(--r31-shadow-soft);
}

.rbai31-article.rbai31-single-view .r31-component--earnings strong{
  color:#0d8f78;
}

/* =========================================================
   PROS / CONS
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-component--proscons .r31-proscons-list{
  margin:10px 0;
  padding:14px 19px 14px 39px;
  border:1px solid #dce6f1;
  border-radius:15px;
  background:#fff;
}

.rbai31-article.rbai31-single-view .r31-component--proscons .r31-proscons-list li{
  margin:7px 0;
  padding-left:3px;
  line-height:1.58;
  overflow-wrap:anywhere;
}

/* =========================================================
   FAQ
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-faq-question{
  position:relative;
  margin:17px 0 8px;
  padding:12px 16px 12px 45px;
  border:1px solid #dce6f1;
  border-radius:14px;
  background:linear-gradient(135deg,#f8fbff,#fbf9ff);
  color:var(--r31-ink);
  font-size:19px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view .r31-faq-question::before{
  content:"?";
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--r31-cyan),var(--r31-purple));
  font-size:14px;
  font-weight:800;
}

/* =========================================================
   TABLES
   ========================================================= */

.rbai31-article.rbai31-single-view table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:16px 0;
  border:1px solid #dce6f1;
  border-radius:15px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--r31-shadow-soft);
}

.rbai31-article.rbai31-single-view th,
.rbai31-article.rbai31-single-view td{
  padding:11px 13px;
  border-right:1px solid #e5ebf3;
  border-bottom:1px solid #e5ebf3;
  text-align:left;
  vertical-align:top;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.rbai31-article.rbai31-single-view th{
  background:linear-gradient(135deg,#f3fbff,#f8f4ff);
  color:#162746;
  font-weight:800;
}

.rbai31-article.rbai31-single-view tr:last-child td{
  border-bottom:0;
}

.rbai31-article.rbai31-single-view th:last-child,
.rbai31-article.rbai31-single-view td:last-child{
  border-right:0;
}

/* =========================================================
   AUTHOR
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-component--author{
  padding-bottom:4px;
}

.rbai31-article.rbai31-single-view .r31-component--author > *:not(.r31-component__heading){
  color:#52627a;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:760px){
  .rbai31-article.rbai31-single-view{
    max-width:100%;
  }

  .rbai31-article.rbai31-single-view p{
    font-size:17px;
    line-height:1.65;
    margin-bottom:16px;
  }

  .rbai31-article.rbai31-single-view .r31-section{
    margin-bottom:23px;
  }

  .rbai31-article.rbai31-single-view .r31-section::after{
    width:72px;
    height:2px;
    margin:20px auto 0;
  }

  .rbai31-article.rbai31-single-view .r31-component__heading{
    min-height:54px;
    margin-bottom:12px;
    padding:8px 17px;
    border-radius:16px;
    font-size:clamp(24px,6.8vw,31px);
    line-height:1.14;
  }

  .rbai31-article.rbai31-single-view .r31-component__heading::after{
    content:none!important;
    display:none!important;
  }

  .rbai31-article.rbai31-single-view .r31-summary-grid,
  .rbai31-article.rbai31-single-view .r31-list--steps,
  .rbai31-article.rbai31-single-view .r31-list--tasks,
  .rbai31-article.rbai31-single-view .r31-list--requirements,
  .rbai31-article.rbai31-single-view .r31-list--skills,
  .rbai31-article.rbai31-single-view .r31-list--categories{
    grid-template-columns:1fr;
  }

  .rbai31-article.rbai31-single-view .r31-summary-grid{
    padding:9px;
    gap:9px;
  }

  .rbai31-article.rbai31-single-view .r31-summary-item{
    padding:15px 17px 15px 20px;
    font-size:16.5px;
  }

  .rbai31-article.rbai31-single-view .r31-list--steps,
  .rbai31-article.rbai31-single-view .r31-list--tasks{
    gap:9px;
    margin-top:13px;
    margin-bottom:17px;
  }

  .rbai31-article.rbai31-single-view .r31-list--steps > .r31-list-item,
  .rbai31-article.rbai31-single-view .r31-list--tasks > .r31-list-item{
    padding:14px 15px 14px 53px;
  }

  .rbai31-article.rbai31-single-view .r31-list--requirements > .r31-list-item,
  .rbai31-article.rbai31-single-view .r31-list--skills > .r31-list-item,
  .rbai31-article.rbai31-single-view .r31-list--categories > .r31-list-item{
    padding:14px 15px 14px 50px;
  }

  .rbai31-article.rbai31-single-view table{
    display:block;
    overflow-x:auto;
    white-space:normal;
  }
}

@media (max-width:430px){
  .rbai31-article.rbai31-single-view .r31-component__heading{
    gap:10px;
    padding:8px 14px;
    font-size:24px;
  }

  .rbai31-article.rbai31-single-view .r31-component__heading::after{
    content:none!important;
    display:none!important;
  }

  .rbai31-article.rbai31-single-view .r31-component--introduction > p:first-of-type{
    font-size:18px;
  }

  .rbai31-article.rbai31-single-view .r31-section::after{
    width:62px;
    margin:18px auto 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .rbai31-article.rbai31-single-view *,
  .rbai31-article.rbai31-single-view *::before,
  .rbai31-article.rbai31-single-view *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}
/* =========================================================
   RBAI31 — INTRODUCTION DIVIDER
   EXACT SAME RHYTHM AS NORMAL SECTION DIVIDERS
   ========================================================= */

.rbai31-article.rbai31-single-view .r31-component--introduction{
  margin-top:0;
}

.rbai31-article.rbai31-single-view .r31-component--introduction::before{
  content:"";
  display:block;
  width:92px;
  height:2px;
  margin:0 auto 38px;
  padding:0;
  border-radius:99px;
  background:linear-gradient(
    90deg,
    var(--r31-cyan),
    var(--r31-blue),
    var(--r31-purple)
  );
  opacity:.9;
}

/* =========================================================
   RBAI31 — MOBILE COMPARISON TABLE FIX
   ONLY: prevent table columns from becoming too narrow
   ========================================================= */

@media (max-width:760px){
  .rbai31-article.rbai31-single-view table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:normal;
    -webkit-overflow-scrolling:touch;
  }

  .rbai31-article.rbai31-single-view table th,
  .rbai31-article.rbai31-single-view table td{
    min-width:120px;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
  }

  .rbai31-article.rbai31-single-view table th:first-child,
  .rbai31-article.rbai31-single-view table td:first-child{
    min-width:145px;
  }
}



/* RBAI31 — FORCE ARTICLE LINK BLUE
   Only affects links and linked strong text. */
.rbai31-article.rbai31-single-view a,
.rbai31-article.rbai31-single-view a strong,
.rbai31-article.rbai31-single-view .r31-component--earnings a,
.rbai31-article.rbai31-single-view .r31-component--earnings a strong,
.rbai31-article.rbai31-single-view .r31-component--earnings strong a{
    color:#2167d5 !important;
}
