.answer-shell { width: min(1180px, calc(100% - 44px)); margin: 35px auto 64px; color: #eee8d6; font-family: Inter, sans-serif; }
.answer-shell *, .answer-shell *::before, .answer-shell *::after { box-sizing: border-box; }
.answer-shell [hidden] { display: none !important; }
.answer-shell a { color: #acdcc3; text-underline-offset: 4px; }
.answer-shell a:hover { color: #e9d28d; }
.answer-shell :is(a, input, select):focus-visible { outline: 2px solid #e9d28d; outline-offset: 4px; }
.answer-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; margin: 0 0 25px; color: #b4bfb7; }
.answer-heading { max-width: 870px; margin-bottom: 28px; padding: 25px 30px; border-left: 3px solid #86ba9b; background: linear-gradient(90deg, rgba(5, 16, 14, .94), rgba(5, 16, 14, .62)); }
.answer-heading h1 { font-family: 'Marcellus SC', serif; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.22; margin: 12px 0 18px; color: #f1dfab; text-wrap: balance; }
.answer-heading p { line-height: 1.7; }
.answer-category { display: inline-block; font-size: .76rem; color: #a4d4bd; letter-spacing: .04em; font-weight: 700; }
.answer-byline { font-size: .79rem; color: #b5c1b9; }
.answer-shell time { white-space: nowrap; }
.answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.answer-card { padding: 24px; background: rgba(5, 15, 13, .94); border: 1px solid #34483e; border-top: 3px solid #72b897; border-radius: 9px; box-shadow: 0 10px 30px #0004; }
.answer-card.answer-forever { border-top-color: #cc9c5d; }
.answer-forever .answer-category { color: #e9b876; }
.answer-card h2 { font-size: 1.14rem; line-height: 1.5; margin: 14px 0; }
.answer-card h2 a { display: block; color: #eee4c9; text-decoration: none; }
.answer-card h2 a:hover { text-decoration: underline; }
.answer-card p { color: #c6cec8; line-height: 1.7; font-size: .9rem; }
.answer-card small { color: #98aaa0; font-size: .73rem; }
.answer-search { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 20px; background: #071310e8; border: 1px solid #34483e; border-radius: 8px; margin-bottom: 22px; }
.answer-search label { font-size: .85rem; color: #d7ddcd; }
.answer-search input { flex: 1; min-width: 160px; }
.answer-search :is(input, select) { border-radius: 5px; border: 1px solid #506659; background: #0c201a; color: #f0eedf; padding: 10px; font: inherit; }
.answer-topic-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.answer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: start; gap: 22px; }
.answer-body { padding: 28px; background: rgba(5, 15, 13, .96); border: 1px solid #34483e; border-radius: 10px; }
.answer-body section { margin-top: 32px; }
.answer-body h2, .answer-sidebar h2 { color: #ecdcad; font-family: 'Marcellus SC', serif; font-size: 1.25rem; line-height: 1.5; }
.answer-body p { font-size: .98rem; line-height: 1.85; color: #d3d9d2; margin: 12px 0; }
.answer-direct { padding: 22px; border-radius: 8px; background: #163b2b73; border: 1px solid #5b9373; }
.answer-direct p { margin-top: 0; font-size: 1.09rem; color: #f4efdc; }
.answer-citations { display: block; font-size: .75rem; margin-top: 12px; }
.answer-sidebar section { padding: 20px; background: #081511ee; border: 1px solid #34483e; border-radius: 9px; margin-bottom: 18px; }
.answer-sidebar h2 { margin-top: 0; }
.answer-tool, .answer-related { display: block; padding: 13px 12px; border: 1px solid #3b6652; border-radius: 7px; background: #16392988; margin-top: 12px; text-decoration: none; font-size: .86rem; line-height: 1.6; }
.answer-related { background: #19291d88; border-color: #48573d; }
.answer-tool small { display: block; color: #b4b7a7; }
.answer-dungeons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 25px; padding-left: 24px; font-size: .9rem; line-height: 1.6; }
.answer-body h3 { font-size: .85rem; font-weight: 600; color: #abbcb1; margin-top: 24px; }
.answer-table-wrap { max-width: 100%; margin: 22px 0; }
.answer-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .88rem; line-height: 1.5; }
.answer-table caption { text-align: left; color: #ecdcad; font-weight: 700; padding-bottom: 14px; }
.answer-table th, .answer-table td { padding: 12px 10px; text-align: center; border-bottom: 1px solid #34483e; overflow-wrap: anywhere; }
.answer-table thead { color: #b9e4ce; background: #163529; }
.answer-table tbody th { font-weight: 600; color: #ddd6bf; }
.answer-table tbody tr:nth-child(even) { background: #10281d66; }
.answer-table .answer-table-highlight { background: #31552c88; outline: 1px solid #779952; outline-offset: -1px; }
.answer-sources { border-top: 1px solid #34483e; padding-top: 16px; }
.answer-sources li { line-height: 1.7; margin: 12px 0; font-size: .85rem; overflow-wrap: anywhere; }
.answer-sources small { display: block; color: #94ab9c; }
.answer-sources p, .answer-editorial-note { font-size: .78rem; color: #afbeb3; line-height: 1.8; }
.answer-editorial-note { background: #081511df; padding: 18px 24px; margin-top: 24px; border-radius: 7px; }
.answer-notice { background: #342819f2; color: #efcf96; border: 1px solid #a17a45; padding: 14px 18px; border-radius: 7px; font-size: .85rem; line-height: 1.7; }
@media (min-width: 1800px) { .answer-shell { margin-left: max(48px, calc((100vw - 1740px) / 2)); margin-right: 48px; } }
@media (max-width: 1100px) { .answer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .answer-layout { grid-template-columns: minmax(0, 1fr) 235px; } }
@media (max-width: 760px) { .answer-shell { width: calc(100% - 24px); margin-top: 20px; } .answer-heading { padding: 18px; } .answer-layout { grid-template-columns: minmax(0, 1fr); } .answer-body { padding: 18px; } .answer-direct { padding: 16px; } .answer-grid { grid-template-columns: minmax(0, 1fr); } .answer-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .answer-sidebar section { padding: 15px; } .answer-search select { max-width: 100%; } }
@media (max-width: 480px) { .answer-sidebar { grid-template-columns: 1fr; } .answer-dungeons { grid-template-columns: 1fr; } .answer-heading h1 { font-size: 1.75rem; } .answer-search { align-items: stretch; } .answer-search label { width: 100%; } .answer-search input, .answer-search select { width: 100%; } }
/* On small reading pages anchor header dropdowns to the header, not the
   individual icon; the offscreen hidden Gear menu otherwise widens the page. */
@media (max-width: 760px) {
  body:has(.answer-shell) .calculator-nav-group { position: static; }
  body:has(.answer-shell) .calculator-nav-menu { left: 8px; right: auto; width: min(350px, calc(100vw - 36px)); transform: translate(0, -5px) scale(.98); }
  body:has(.answer-shell) .calculator-nav-group:is(:hover, :focus-within) .calculator-nav-menu { transform: translate(0, 0) scale(1); }
}