:root {
  --rpc-indigo: #4f46e5;
  --rpc-indigo-dark: #4338ca;
  --rpc-slate-900: #0f172a;
}

html { scroll-behavior: smooth; }
body.rpc-theme {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: #334155;
  background: #f8fafc;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 9999px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--rpc-indigo);
  cursor: pointer;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.15), 0 2px 4px -2px rgba(0,0,0,.15);
  transition: transform .15s ease, background-color .15s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--rpc-indigo);
  cursor: pointer;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.15), 0 2px 4px -2px rgba(0,0,0,.15);
  transition: transform .15s ease, background-color .15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); background: var(--rpc-indigo-dark); }
input[type="range"]::-moz-range-thumb:hover { transform: scale(1.15); background: var(--rpc-indigo-dark); }

.rpc-prose h2,
.rpc-prose h3,
.rpc-prose h4 { color: #0f172a; font-weight: 800; letter-spacing: -0.015em; }
.rpc-prose h2 { font-size: 1.55rem; margin-top: 1.8rem; margin-bottom: .8rem; }
.rpc-prose h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: .6rem; }
.rpc-prose h4 { font-size: 1rem; margin-top: 1rem; margin-bottom: .4rem; }
.rpc-prose p { margin: .85rem 0; }
.rpc-prose ul,
.rpc-prose ol { margin: 1rem 0 1rem 1.25rem; }
.rpc-prose ul { list-style: disc; }
.rpc-prose ol { list-style: decimal; }
.rpc-prose li { margin: .45rem 0; }
.rpc-prose strong { color: #1e293b; }
.rpc-prose table { border-collapse: collapse; }

.rpc-ad {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  color: #64748b;
  overflow: hidden;
}
.rpc-ad:empty { display: none; }
.rpc-ad iframe { max-width: 100%; }

.rpc-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: .75rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  padding: .55rem .8rem;
  font-size: .75rem;
  line-height: 1;
  font-weight: 800;
  transition: all .16s ease;
  cursor: pointer;
}
.rpc-share-btn:hover { border-color: #c7d2fe; color: #4f46e5; background: #eef2ff; }

.rpc-mobile-menu { display: none; }
.rpc-mobile-menu.is-open { display: block; }
.rpc-search-results { display: none; }
.rpc-search-results.is-open { display: block; }
.line-clamp-1,.line-clamp-2,.line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.rpc-calculator-card input,
.rpc-calculator-card select {
  min-height: 42px;
}
.rpc-mode-btn.is-active,
.rpc-unit-btn.is-active,
.rpc-roof-btn.is-active {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}
.rpc-floating-share { transform: translateY(110%); opacity: 0; pointer-events: none; transition: all .25s ease; }
.rpc-floating-share.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.rpc-floating-panel { display: none; }
.rpc-floating-panel.is-open { display: block; }

.comment-respond,
.comments-area .comment-list {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.comment-respond input,
.comment-respond textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: .75rem;
  padding: .75rem;
}
.comment-respond .submit {
  width: auto;
  background: #4f46e5;
  color: #fff;
  border: 0;
  font-weight: 800;
  cursor: pointer;
}

@media print {
  .no-print, .rpc-site-header, .rpc-site-footer, .rpc-floating-share { display: none !important; }

  body.rpc-printing-calculator .rpc-force-print-hide { display: none !important; }
  body.rpc-printing-calculator .rpc-print-target {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    break-inside: avoid;
  }
  body.rpc-printing-calculator .rpc-print-target .no-print { display: none !important; }
  body.rpc-printing-calculator .rpc-print-target .hidden.print\:block { display: block !important; }
  body.rpc-printing-calculator .rpc-print-target .rpc-live-diagram { break-inside: avoid; page-break-inside: avoid; }
  body { background: white !important; }
  .rpc-article, .rpc-calculator-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

@media (max-width: 1023px) {
  .rpc-sticky-sidebar { position: static !important; }
}

@media (max-width: 640px) {
  .rpc-brand-icon { padding: .35rem; }
  .rpc-prose h2 { font-size: 1.35rem; }
  .rpc-prose h3 { font-size: 1.1rem; }
  .rpc-share-btn { flex: 1 1 auto; }
}

/* Match the uploaded React design more closely after removing the Tailwind CDN dependency. */
.rpc-unit-btn.is-active,
.rpc-mode-btn.is-active {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: transparent !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.08) !important;
}
.rpc-unit-btn:not(.is-active),
.rpc-mode-btn:not(.is-active) {
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}
.rpc-roof-btn.is-active {
  background: #eef2ff !important;
  border-color: #6366f1 !important;
  color: #4338ca !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.05) !important;
}
.rpc-roof-btn:not(.is-active) {
  background: transparent !important;
  color: #475569 !important;
}
.rpc-live-diagram svg text { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.rpc-calculator-card select,
.rpc-calculator-card input[type="number"],
.rpc-calculator-card input[type="search"],
.rpc-calculator-card input[type="text"] { background-color: #ffffff; }
.rpc-calculator-card .hidden { display: none !important; }
.rpc-site-header .custom-logo { max-height: 38px; width: auto; }

/* Mobile overflow guard: keep the original design intact while preventing sideways scrolling. */
html,
body.rpc-theme {
  max-width: 100%;
  overflow-x: hidden;
}
body.rpc-theme #page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body.rpc-theme main,
body.rpc-theme .rpc-site-header,
body.rpc-theme .rpc-site-footer,
body.rpc-theme .rpc-calculator-card,
body.rpc-theme .rpc-article,
body.rpc-theme .rpc-share-block,
body.rpc-theme .rpc-ad {
  max-width: 100%;
}
body.rpc-theme .grid > *,
body.rpc-theme .flex > * {
  min-width: 0;
}
.rpc-site-brand {
  min-width: 0;
  max-width: calc(100vw - 5.5rem);
}
.rpc-site-brand-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpc-site-brand .rpc-logo,
.rpc-site-header .custom-logo {
  max-width: min(220px, calc(100vw - 6rem));
  height: auto;
}
.rpc-top-promo > .truncate {
  min-width: 0;
  max-width: 100%;
}
.rpc-ad iframe,
.rpc-ad ins,
.rpc-ad div,
.rpc-prose iframe,
.rpc-prose embed,
.rpc-prose object {
  max-width: 100% !important;
}
.rpc-prose pre,
.rpc-prose code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rpc-prose table {
  max-width: 100%;
}

@media (max-width: 640px) {
  body.rpc-theme {
    overflow-x: hidden;
  }
  body.rpc-theme main {
    width: 100%;
  }
  .rpc-site-brand {
    font-size: 1rem;
  }
  .rpc-site-brand .rpc-logo,
  .rpc-site-header .custom-logo {
    max-height: 34px;
    max-width: min(180px, calc(100vw - 6rem));
  }
  .rpc-top-promo {
    justify-content: flex-start;
  }
  .rpc-top-promo a {
    white-space: nowrap;
  }
  .rpc-calculator-card {
    max-width: calc(100vw - 2rem);
  }
  .rpc-mode-btn,
  .rpc-roof-btn {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rpc-live-diagram .rpc-blueprint-svg {
    min-width: 0;
  }
  .rpc-floating-share {
    right: 1rem;
    bottom: 1rem;
    max-width: calc(100vw - 2rem);
  }
  .rpc-floating-panel {
    width: min(18rem, calc(100vw - 2rem)) !important;
    max-width: calc(100vw - 2rem);
  }
  .rpc-floating-url {
    min-width: 0;
  }
  .rpc-share-block .flex,
  .rpc-site-footer .flex {
    max-width: 100%;
  }
}

/* v1.0.4: compact sticky mobile promoted-resource bar. */
.rpc-promo-mobile-title,
.rpc-promo-cta-mobile {
  display: none;
}

@media (max-width: 640px) {
  .rpc-top-promo {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid !important;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap: .28rem !important;
    padding: .62rem .85rem .7rem !important;
    line-height: 1.15;
  }
  .rpc-top-promo .absolute {
    inset: 0;
  }
  .rpc-top-promo .rpc-promo-badge,
  .rpc-top-promo .rpc-promo-mobile-title,
  .rpc-top-promo .rpc-promo-link {
    position: relative;
    z-index: 1;
  }
  .rpc-top-promo .rpc-promo-full,
  .rpc-top-promo .rpc-promo-cta-full {
    display: none !important;
  }
  .rpc-top-promo .rpc-promo-mobile-title,
  .rpc-top-promo .rpc-promo-cta-mobile {
    display: inline !important;
  }
  .rpc-top-promo .rpc-promo-badge {
    max-width: 100%;
    white-space: nowrap;
  }
  .rpc-top-promo .rpc-promo-mobile-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
  }
  .rpc-top-promo .rpc-promo-link {
    margin-left: 0 !important;
    max-width: 100%;
    white-space: nowrap;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  .rpc-site-header {
    top: var(--rpc-mobile-promo-height, 72px) !important;
  }
}


.rpc-tools-pagination {
  align-items: stretch;
}

.rpc-page-control,
.rpc-page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  border: 1px solid rgb(226 232 240);
  border-radius: 0.75rem;
  background: #fff;
  color: rgb(51 65 85);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.rpc-page-control {
  padding: 0 0.9rem;
}

.rpc-page-number {
  width: 2.25rem;
}

.rpc-page-control:hover,
.rpc-page-number:hover {
  border-color: rgb(129 140 248);
  color: rgb(67 56 202);
  background: rgb(238 242 255);
}

.rpc-page-number.is-current {
  border-color: rgb(79 70 229);
  background: rgb(79 70 229);
  color: #fff;
}

.rpc-page-control.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: rgb(248 250 252);
}

.rpc-page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.rpc-page-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  color: rgb(148 163 184);
  font-weight: 900;
}

@media (max-width: 640px) {
  .rpc-tools-pagination,
  .rpc-tools-pagination > div:first-child {
    width: 100%;
  }

  .rpc-page-control {
    flex: 1;
  }

  .rpc-page-numbers {
    justify-content: center;
  }
}