/* ============================================================
   JK RESOURCES SECTION — resources.css
   CANONICAL SOURCE. This file is deployed to two surfaces:
     A) jk-buyer-portal  /public/resources.css
     B) jk-seller-portal /public/resources.css
   Edit here first, copy byte-identical to both repos. Do not
   fork per-surface — drift between the two copies is a defect.

   Design authority: portal styles.css design system. No rounded
   corners, no shadows, no gradients. KW Red as accent only.
   Faces: Cormorant Garamond (display), Libre Baskerville (body),
   Helvetica Neue / Arial (utility sans). Mobile-first.
   ============================================================ */

/* ---------- subsection headings ---------- */
.rs-sub-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--near-black);
  margin: 40px 0 4px;
}
.rs-sub-note {
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 15px;
  color: color-mix(in srgb, var(--near-black) 75%, transparent);
  margin: 8px 0 20px;
}

/* ---------- accordion (mirrors the buyer FAQ pattern; self-contained
   so the seller portal, which has no FAQ styles, renders identically) */
.rs-item {
  border-bottom: 1px solid color-mix(in srgb, var(--near-black) 10%, transparent);
}
.rs-item:first-of-type { border-top: 1px solid color-mix(in srgb, var(--near-black) 10%, transparent); }
.rs-q {
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 16px;
  color: var(--near-black);
  padding: 16px 32px 16px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.rs-q::-webkit-details-marker { display: none; }
.rs-q::after {
  content: '\002B';
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 18px;
  color: color-mix(in srgb, var(--near-black) 45%, transparent);
}
.rs-item[open] .rs-q::after { content: '\2212'; color: #A92D2F; }
.rs-a {
  padding: 4px 0 24px;
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--near-black);
}
.rs-a p { margin: 0 0 14px; }
.rs-a p:last-child { margin-bottom: 0; }
.rs-a ul { margin: 0 0 14px; padding-left: 20px; }
.rs-a li { margin-bottom: 10px; }
.rs-a li:last-child { margin-bottom: 0; }

.rs-kicker {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--near-black) 55%, transparent);
  margin: 0 0 10px;
}

/* ---------- calculator fields (mirrors mc- field pattern) ---------- */
.rs-form { margin: 4px 0 0; }
.rs-field { display: block; margin-bottom: 14px; }
.rs-label {
  display: block;
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--near-black) 70%, transparent);
  margin-bottom: 6px;
}
.rs-input, .rs-select {
  width: 100%;
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 15px;
  color: var(--near-black);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--near-black) 35%, transparent);
  padding: 10px 12px;
}
.rs-input:focus, .rs-select:focus { outline: none; border-color: color-mix(in srgb, var(--near-black) 65%, transparent); }
.rs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Calculate button — mirrors .mc-toggle (the portal's bordered secondary) */
.rs-btn {
  background: none;
  border: 1px solid color-mix(in srgb, var(--near-black) 50%, transparent);
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--near-black);
  padding: 12px 28px;
  cursor: pointer;
  margin-top: 4px;
  transition: opacity 150ms ease;
}
.rs-btn:hover { opacity: 0.85; }
.rs-btn:active { opacity: 0.70; }

.rs-err {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 12px;
  color: #A92D2F;
  margin: 10px 0 0;
}

/* calculator output block */
.rs-output {
  border: 1px solid color-mix(in srgb, var(--near-black) 50%, transparent);
  padding: 18px 20px;
  margin-top: 18px;
}
.rs-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  font-size: 14px;
}
.rs-row:last-of-type { border-bottom: none; }
.rs-row-l { flex: 1 1 auto; }
.rs-row-v { text-align: right; white-space: nowrap; font-weight: 400; }
.rs-out-note {
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 13px;
  font-style: italic;
  color: color-mix(in srgb, var(--near-black) 65%, transparent);
  margin: 12px 0 0;
  line-height: 1.6;
}

/* ---------- info panel (LRV block) — distinct, KW-red left stripe ---------- */
.rs-info {
  border-left: 3px solid #A92D2F;
  background: color-mix(in srgb, var(--near-black) 3%, transparent);
  padding: 18px 20px;
  margin: 0 0 18px;
}
.rs-info-title {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--near-black);
  margin: 0 0 10px;
}
.rs-info p { margin: 0 0 12px; }
.rs-info ol { margin: 0; padding-left: 20px; }
.rs-info li { margin-bottom: 10px; }
.rs-info li:last-child { margin-bottom: 0; }

/* ---------- content cards (paint recs, lighting layers, tools) ---------- */
.rs-card {
  border: 1px solid color-mix(in srgb, var(--near-black) 15%, transparent);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.rs-card:last-child { margin-bottom: 0; }
.rs-card-name {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 21px;
  line-height: 1.25;
  color: var(--near-black);
  margin: 0 0 4px;
}
.rs-card-meta {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--near-black) 60%, transparent);
  margin: 0 0 10px;
}
.rs-card-body {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}
.rs-card-best {
  font-size: 13px;
  font-style: italic;
  color: color-mix(in srgb, var(--near-black) 70%, transparent);
  margin: 10px 0 0;
}

/* Visit button on tool cards — bordered secondary; the black full-width
   primary reads too heavy beside the no-affiliation disclaimer */
.rs-visit {
  display: inline-block;
  background: none;
  border: 1px solid color-mix(in srgb, var(--near-black) 50%, transparent);
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--near-black);
  text-decoration: none;
  padding: 10px 22px;
  margin-top: 14px;
  transition: opacity 150ms ease;
}
.rs-visit:hover { opacity: 0.85; }
.rs-visit:active { opacity: 0.70; }

/* ---------- disclaimer ---------- */
.rs-disclaim {
  font-family: 'Libre Baskerville', 'Georgia', serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.65;
  color: color-mix(in srgb, var(--near-black) 60%, transparent);
  margin: 0 0 20px;
}

/* ---------- reference table (rug guide) ---------- */
.rs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rs-table th {
  font-family: 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: color-mix(in srgb, var(--near-black) 70%, transparent);
  text-align: left;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--near-black) 35%, transparent);
}
.rs-table td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--near-black) 8%, transparent);
  vertical-align: top;
  line-height: 1.55;
}
.rs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- desktop refinements ---------- */
@media (min-width: 768px) {
  .rs-sub-title { font-size: 30px; margin-top: 48px; }
  .rs-form { max-width: 440px; }
}