/* File: styles/style.css */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

body{font-family:'Roboto',sans-serif;line-height:1.6;color:#333;max-width:1200px;margin:0 auto;padding:20px;background:#f0f0f0}
.container{background:#fff;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.1);padding:30px}

/* ---------- header row ---------- */
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.app-title{
  font-size:20px;
  line-height:1.1;
  word-break:break-word;
  max-width:110px;
  min-width: 190px; /* Prevent wrapping on expressive themes */
  margin:0;
}
.theme-select{
  flex:0 0 auto;
  width:110px;
  padding:6px 8px;
  font-family:'Roboto',sans-serif;
  font-size:15px;
  border-radius:5px;
}

/* ---------- tabulation controls ---------- */
.tabulation-controls fieldset{border:1px solid #bdc3c7;border-radius:5px;padding:10px 15px}
.tabulation-controls legend{padding:0 5px;font-weight:bold;color:#2c3e50}
.radio-group{display:flex;gap:20px}
.radio-group label{display:flex;align-items:center;gap:5px;cursor:pointer}

/* ---------- widget area ---------- */
.widget-area{background-color:#ecf0f1;border-radius:5px;padding:20px;margin-bottom:30px;min-height:300px}

/* ---------- textarea & buttons ---------- */
.controls{
  display:flex;
  align-items:center;
  gap:8px;                /* small space between buttons */
  margin-bottom:20px;
}
select,button{
  font-family:'Roboto',sans-serif;
  font-size:16px;
  padding:10px;
  border-radius:5px;
  border:1px solid #bdc3c7;
}
#ballotSelector{flex:1 1 auto;}
button{background-color:#3498db;color:#fff;border:none;cursor:pointer;transition:background-color .3s}
button:disabled{background-color:#cccccc}
button:hover:not(:disabled){background-color:#2980b9}
textarea{
  width:100%;height:200px;font-family:'Roboto',sans-serif;font-size:14px;
  padding:10px;border-radius:5px;border:1px solid #bdc3c7;resize:vertical
}

/* ---------- media query ---------- */
@media (min-width:768px){
  .content-area{display:flex;justify-content:space-between}
  .text-container{width:400px}
  textarea{height:300px}
}

/* ---------- pairwise widget tweaks that never change ---------- */
.pmwRadioGroup input[type="radio"]{margin-right:4px;width:12px;height:12px;position:relative;top:-1px}
.pmwRadioGroup input[type="radio"]:checked::before{
  content:"";display:block;width:6px;height:6px;margin:2px;background:#3498db;border-radius:50%
}

/* hide obsolete description box */
.description{display:none}