/* Article-specific details. Shared layout is in article.css. */
.title-line { display: block; }
.hero-figure img { object-position: 45% center; }
.energy-terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid #d8dbd1; padding-block: 22px; gap: 22px; margin-block: 26px; }
.energy-terms dt { color: var(--banner); font-size: 23px; font-weight: 650; letter-spacing: -.035em; margin-bottom: 10px; }
.energy-terms dd { margin: 0; font-size: 13px; line-height: 1.8; }
.energy-worksheet { border: 1px solid #cbd7dc; border-radius: 7px; background: #e8eef0; padding: 27px; margin-block: 26px; }
.worksheet-label { color: var(--banner); text-transform: uppercase; font-size: 10px; font-weight: 650; letter-spacing: .12em; margin-bottom: 9px !important; }
.energy-worksheet > p { font-size: 14px; line-height: 1.8; }
.energy-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 25px; }
.energy-inputs label { display: block; color: #17313d; font-size: 13px; line-height: 1.6; font-weight: 600; margin-bottom: 9px; }
.energy-inputs label span { display: block; font-size: 11px; color: #4e606a; font-weight: 400; }
.energy-inputs input { width: 100%; min-width: 0; min-height: 48px; border: 1px solid #849aa5; border-radius: 5px; background: #fff; color: #17313d; padding: 10px 13px; font-size: 17px; }
.energy-inputs input[aria-invalid='true'] { border: 2px solid #934121; }
.worksheet-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 18px 24px; }
.calculate-button { background: var(--button); color: white; border: 1px solid var(--button); border-radius: 5px; padding: 11px 15px; font-size: 13px; font-weight: 600; min-height: 44px; }
.calculate-button:hover { background: #0a3648; }
.reset-button { background: transparent; border: 1px solid transparent; color: var(--banner); font-size: 12px; padding: 11px 6px; min-height: 44px; }
.reset-button:hover { text-decoration: underline; }
.energy-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 21px 17px; border-top: 1px solid #c2d0d5; }
.energy-result strong { color: var(--banner); font-size: 43px; font-weight: 650; line-height: 1.15; letter-spacing: -.05em; overflow-wrap: anywhere; }
.energy-result span { font-size: 13px; line-height: 1.75; }
.energy-bar { height: 8px; border-radius: 10px; background: #c6d2d7; overflow: hidden; margin-bottom: 21px; }
.energy-bar span { display: block; height: 100%; background: var(--banner); border-radius: inherit; }
.energy-limit { font-size: 12px !important; line-height: 1.85 !important; margin: 22px 0 0 !important; }
.energy-overage, .energy-pending, .energy-error { font-size: 13px; line-height: 1.8; padding: 13px 15px; margin-block: 12px 0; background: #f7f3eb; border-left: 3px solid var(--olive); }
.energy-error { color: #7c321b; border-color: #934121; }
.energy-static p { font-size: 14px; }
.energy-static p:last-child { font-size: 12px; }
.connection-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block: 25px; }
.connection-options > div { background: #edf0e6; border: 1px solid #d6dcc9; border-radius: 6px; padding: 23px; }
.option-label { display: block; color: #526343; font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.connection-options h3 { font-size: 18px; }
.connection-options p { font-size: 13px; line-height: 1.9; margin-bottom: 0; }
.quote-table-wrap { margin-block: 24px 19px; }
.quote-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.85; table-layout: fixed; }
.quote-table caption { text-align: left; font-size: 12px; color: #526343; margin-bottom: 12px; font-weight: 500; }
.quote-table th, .quote-table td { text-align: left; vertical-align: top; padding: 17px; border: 1px solid #d4d7cc; }
.quote-table thead th { color: var(--banner); background: #e8eeed; font-weight: 650; font-size: 12px; }
.quote-table thead th:first-child, .quote-table tbody th { width: 29%; }
.quote-table tbody th { font-weight: 600; color: #17313d; }
.quote-table tbody tr:nth-child(even) { background: #f0f0e7; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 800px) {
  .connection-options { gap: 15px; }
}

@media (max-width: 620px) {
  .contents a { font-size: 12px; padding-left: 7px; min-height: 44px; display: flex; align-items: center; }
  .article-hero .breadcrumbs { flex-wrap: wrap; }
  .energy-terms { grid-template-columns: 1fr; gap: 17px; padding-block: 20px; }
  .energy-terms > div { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; }
  .energy-terms dt { font-size: 21px; margin: 0; }
  .energy-terms dd { font-size: 13px; }
  .energy-worksheet { padding: 21px 17px; }
  .energy-inputs { grid-template-columns: 1fr; gap: 18px; }
  .energy-result { gap: 15px; }
  .energy-result strong { font-size: 38px; }
  .energy-result span { font-size: 12px; }
  .connection-options { grid-template-columns: 1fr; }
  .connection-options > div { padding: 21px 17px; }
  .quote-table { font-size: 12px; }
  .quote-table th, .quote-table td { padding: 12px 9px; overflow-wrap: anywhere; }
  .quote-table thead th:first-child, .quote-table tbody th { width: 35%; }
}

@media print {
  .energy-worksheet { background: white; border-color: #aaa; break-inside: avoid; }
  .energy-worksheet input { border: 1px solid #777; }
  .worksheet-actions, .energy-bar { display: none !important; }
  .connection-options { display: block; }
  .connection-options > div { break-inside: avoid; margin-bottom: 16px; background: white; }
  .quote-table thead { display: table-header-group; }
  .quote-table tr { break-inside: avoid; }
  .quote-table th, .quote-table td { padding: 10px; }
}