/* Platform 4.2.2 — unified accessible button system */
:root{
  --p422-primary-bg:#B87333;
  --p422-primary-text:#111318;
  --p422-primary-hover:#8A4B1E;
  --p422-secondary-bg:#FFFFFF;
  --p422-secondary-text:#1C1F26;
  --p422-secondary-border:#1C1F26;
  --p422-dark-bg:#1C1F26;
  --p422-dark-text:#FFFFFF;
  --p422-focus:#F3D2B2;
}

/* Shared shape and readable default. */
html body :is(a,button).btn,
html body :is(a,button).cp31-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.45rem!important;
  min-height:46px!important;
  padding:12px 21px!important;
  border:2px solid var(--p422-primary-bg)!important;
  border-radius:999px!important;
  background:var(--p422-primary-bg)!important;
  color:var(--p422-primary-text)!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-align:center!important;
  text-decoration:none!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:none!important;
  cursor:pointer!important;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease!important;
}
html body :is(a,button).btn:hover,
html body :is(a,button).btn:focus-visible,
html body :is(a,button).cp31-btn:hover,
html body :is(a,button).cp31-btn:focus-visible{
  background:var(--p422-primary-hover)!important;
  border-color:var(--p422-primary-hover)!important;
  color:#FFFFFF!important;
  transform:translateY(-1px)!important;
}

/* Secondary actions are always white with dark text, regardless of section background. */
html body :is(a,button).btn:is(.ghost,.outline,.secondary,.btn-outline-light),
html body :is(a,button).cp31-btn.cp31-btn-outline{
  background:var(--p422-secondary-bg)!important;
  border-color:var(--p422-secondary-border)!important;
  color:var(--p422-secondary-text)!important;
}
html body :is(a,button).btn:is(.ghost,.outline,.secondary,.btn-outline-light):hover,
html body :is(a,button).btn:is(.ghost,.outline,.secondary,.btn-outline-light):focus-visible,
html body :is(a,button).cp31-btn.cp31-btn-outline:hover,
html body :is(a,button).cp31-btn.cp31-btn-outline:focus-visible{
  background:#F3EEE8!important;
  border-color:var(--p422-primary-bg)!important;
  color:#111318!important;
}

/* Explicit dark action. */
html body :is(a,button).btn.dark{
  background:var(--p422-dark-bg)!important;
  border-color:var(--p422-dark-bg)!important;
  color:var(--p422-dark-text)!important;
}
html body :is(a,button).btn.dark:hover,
html body :is(a,button).btn.dark:focus-visible{
  background:#343942!important;
  border-color:#343942!important;
  color:#FFFFFF!important;
}

/* Bootstrap-like primary aliases and custom primary aliases. */
html body :is(a,button).btn.btn-primary,
html body :is(a,button).cp31-btn.cp31-btn-primary{
  background:var(--p422-primary-bg)!important;
  border-color:var(--p422-primary-bg)!important;
  color:var(--p422-primary-text)!important;
}

/* Header compact action stays compact but follows the same contrast rules. */
html body header :is(a,button).btn.small{
  min-height:42px!important;
  padding:9px 17px!important;
  font-size:.78rem!important;
}

/* Strong, consistent keyboard focus. */
html body :is(a,button).btn:focus-visible,
html body :is(a,button).cp31-btn:focus-visible{
  outline:3px solid var(--p422-focus)!important;
  outline-offset:3px!important;
}

/* Fixed mobile actions are deliberately separate from content buttons. */
html body .mobilebar a:first-child{
  background:#FFFFFF!important;
  color:#111318!important;
}
html body .mobilebar a:last-child{
  background:var(--p422-primary-bg)!important;
  color:#111318!important;
}
html body .mobilebar a:hover,
html body .mobilebar a:focus-visible{
  background:var(--p422-primary-hover)!important;
  color:#FFFFFF!important;
}

@media(max-width:620px){
  html body .actions :is(.btn,.cp31-btn),
  html body .micro-actions :is(.btn,.cp31-btn),
  html body .p42-result-actions :is(.btn,.cp31-btn){
    width:100%!important;
  }
}