:root{
  --bg:#ffffff;
  --fg:#222;
  --grey-light:#f4f4f4;
  --grey-mid:#999;
  --grey-dark:#444;
}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;margin:2rem;background:var(--bg);color:var(--fg)}
main{max-width:1100px;margin:auto}

h1{font-size:2rem;margin-bottom:1.3rem;font-weight:700;color:#000}

/* ------- Form layout (3 columns) ------- */
form{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:900px){form{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){form{grid-template-columns:1fr}}

fieldset{border:none;padding:0;margin:0;display:flex;flex-direction:column}
label.field-title{margin-bottom:.3rem;font-weight:600;color:var(--grey-dark);font-size:.9rem}

/* borderless inputs (underline style) */
input,select{width:100%;padding:0.55rem 0;font-size:1rem;border:none;border-bottom:1px solid var(--grey-mid);background:transparent;color:var(--fg);border-radius:0}
input:focus{outline:none;border-bottom-color:#000}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* ------- Autocomplete containers ------- */
.autocomplete-container{position:relative;width:100%}
.autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--bg);border:1px solid var(--grey-mid);border-top:none;max-height:200px;overflow-y:auto;z-index:10;display:none}
.autocomplete-option{padding:0.5rem;cursor:pointer;border-bottom:1px solid var(--grey-light);font-size:0.9rem}
.autocomplete-option:hover,.autocomplete-option.highlighted{background:var(--grey-light)}
.autocomplete-option:last-child{border-bottom:none}

/* ------- Button ------- */
button{padding:0.6rem 1.1rem;font-size:1rem;border:1px solid #000;background:#000;color:#fff;cursor:pointer;transition:filter .15s;border-radius:0}
button:hover{filter:brightness(1.15)}

/* ------- Theme buttons (square, auto‑width) ------- */
.checkbox-group{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.3rem}
.checkbox-group input{display:none}
.checkbox-group span{display:inline-block;border:1px solid var(--grey-mid);border-radius:4px;padding:.35rem .7rem;font-size:.8rem;text-align:center;cursor:pointer;background:transparent;color:var(--grey-dark);transition:background .15s,border-color .15s;user-select:none;line-height:1.1}
.checkbox-group input:checked+span{background:#000;color:#fff;border-color:#000}
.checkbox-group span:hover{border-color:#000}

/* ------- Results table ------- */
#results-count{margin:1.1rem 0 .8rem;font-weight:600}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:var(--grey-light);font-weight:700;padding:0.7rem;border-bottom:2px solid var(--grey-mid);text-align:left;user-select:none;transition:background-color 0.15s}
thead th[data-sort]{cursor:pointer}
thead th[data-sort]:hover{background:var(--grey-mid)}

.sort-indicator {
  margin-left: 0.4rem;
  font-size: 0.8rem;
  opacity: 0.3; /* Always visible but subtle */
  transition: opacity 0.15s;
  display: inline-block;
}

.sort-indicator:after {
  content: '↕'; /* Double arrow for unsorted columns */
}

.sort-indicator.asc {
  opacity: 1;
}
.sort-indicator.asc:after {
  content: '↑';
}

tbody td{padding:0.65rem;border-bottom:1px solid var(--grey-light);vertical-align:top;font-size:.95rem}
tbody tr:hover{background:var(--grey-light)}

/* Column width adjustments */
thead th:nth-child(7), /* Themes header */
tbody td:nth-child(7) { /* Themes cells */
  max-width: 200px;
  word-wrap: break-word;
}

thead th:nth-child(6) { /* Year header - give it more breathing room */
  white-space: nowrap;
  padding-right: 2rem;
}

/* ------- Error ------- */
#error{color:#b00;font-weight:600;margin:0.8rem 0}