/* Shared layout, loaded after the original page styles. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 0; }
img, iframe, canvas { max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, input, select { min-height: 44px; }
input, select, textarea { max-width: 100%; font-size: 16px; }
button { white-space: normal; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid #c68b22; outline-offset: 3px;
}
.site-header { background: #003f86; color: white; }
#menu-toggle { display: none; }
#site-navigation { display: block; padding: 8px 16px; border-radius: 0; }
#site-navigation ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
#site-navigation ul li { display: block; margin: 0; padding: 0; border: 0; }
#site-navigation a { display: block; min-height: 44px; padding: 10px 14px; border-radius: 6px; }
#site-navigation a::after { content: none; }
#site-navigation a[aria-current="page"] { background: #285d98; }
.page-content { display: block; }
.container { min-width: 0; width: 100%; }
.calculator-container { min-height: 0; padding-bottom: 24px; overflow: visible; }
.calculator, .character-statistics { min-width: 0; }
#ac-cmb-cmd-calculator { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
#ac-cmb-cmd-calculator > .container { gap: 24px; align-items: flex-start; }
#ac-cmb-cmd-calculator .calculator { flex: 2; margin: 0; }
#ac-cmb-cmd-calculator .character-statistics { flex: 1; margin: 0; padding: 20px; }
#craft-dc-calculator { max-width: 760px; margin: 24px auto; padding: 0 20px; }
#craft-dc-calculator > .calculator { width: 100%; margin: 0; }
#craft-dc-calculator select { width: 100%; }
.ability-page .container { display: block; max-width: 1120px; padding: 24px; }
.ability-page .calculator-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 24px; }
.ability-page .calculator { grid-column: 1 / -1; width: 100%; }
.ability-page .ability-score { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 104px; align-items: center; gap: 12px; width: 100%; padding: 0; margin-top: 16px; }
.ability-page .ability-score label { margin: 0; }
.ability-page .ability-score select { width: 100%; }
.ability-page .ability-score .input-container { min-width: 0; margin: 0; }
.ability-page .ability-score .button-container { display: flex; gap: 8px; margin: 0; }
.ability-page .button-container button { width: 48px; min-width: 44px; margin: 0; padding: 8px; font-size: 20px; }
.ability-page #point-allocation { display: flex; flex-wrap: wrap; gap: 8px; }
.ability-page #point-allocation button { width: auto; font-size: 16px; }
.ability-page #modifiers, .ability-page #race-modifiers, .ability-page #actual-scores { width: 100%; min-width: 0; padding: 16px; font-size: 16px; text-align: left; }
.ability-page #modifiers h2, .ability-page #race-modifiers h2, .ability-page #actual-scores h2 { font-size: 21px; line-height: 1.3; margin-bottom: 12px; }
.disclaimer { position: static; height: auto; width: 100%; padding: 20px; margin: 24px auto 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.ability-page .disclaimer { grid-column: 1 / -1; }
.charactersheet-page > h1, .charactersheet-page > p, #pdf-container { margin: 20px auto; padding: 0 16px; max-width: 1100px; }
.charactersheet-page > button:not(#menu-toggle) { width: auto; max-width: calc(100% - 32px); margin: 8px 16px 24px; }
@media (max-width: 768px) {
  .site-header { padding: 8px 12px; }
  .site-header #menu-toggle { width: 100%; margin: 0; padding: 10px 14px; border-radius: 6px; background: #003f86; color: #fff; font-size: 18px; text-align: left; }
  .site-header.menu-ready #menu-toggle { display: block; }
  #site-navigation { padding: 4px 0; }
  .site-header.menu-ready #site-navigation { display: none; }
  .site-header.menu-ready #site-navigation.is-open { display: block; }
  #site-navigation ul { display: flex; flex-direction: column; gap: 4px; }
  #site-navigation ul li { display: block; width: 100%; }
  #site-navigation a { border-radius: 4px; text-align: left; }
  .text-container { width: 100%; padding: 20px 16px; }
  .text-container h1 { font-size: clamp(26px, 7vw, 36px); line-height: 1.25; }
  h1 { overflow-wrap: anywhere; }
  .image-container { padding: 20px 16px; }
  .container, #ac-cmb-cmd-calculator > .container { display: block; }
  #ac-cmb-cmd-calculator, #craft-dc-calculator { display: block; margin: 20px auto; padding: 0 12px; }
  .calculator { margin: 0; padding: 16px; width: 100%; }
  #ac-cmb-cmd-calculator .character-statistics { padding: 20px 4px; }
  #calculator-form { text-align: left; }
  #calculator-form input, #craft-dc-calculator input { width: 100%; padding: 10px; }
  .ability-page .container { padding: 20px 12px; }
  .ability-page .calculator-container { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .ability-page .ability-score { grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
  .ability-page .ability-score label { grid-column: 1 / -1; text-align: left; }
  .ability-page .ability-score:not(:has(.button-container)) .input-container { grid-column: 1 / -1; }
  .ability-page #modifiers, .ability-page #race-modifiers, .ability-page #actual-scores { padding: 12px 0; }
  .disclaimer { padding: 16px; }
}