/* Shared app controls. Keep selectors inside main: browser annotation UI is not ours. */
:root {
  --control-height: 40px;
  --control-gap: 12px;
  --field-gap: 6px;
}
main form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main form select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  min-height: var(--control-height);
  margin: 0;
  padding: 0 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fbf8ef;
}
main form textarea {
  min-width: 0;
  min-height: 100px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
}
main form label { font-size: 13px; line-height: 20px; }
main form label > :is(input, select, textarea):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  margin-top: var(--field-gap);
}
main button,
main .filter-reset,
main .visit-filters > a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
main :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
main .photo-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 16px;
  margin: 8px 0 20px;
}
main .photo-filters > label,
main .visit-filters > label,
main .family-actionbar > label,
main #relation-form > label {
  min-width: 0;
  margin: 0;
}
main .photo-filters > button,
main .photo-filters > .filter-reset {
  height: var(--control-height);
  min-height: var(--control-height);
  margin: 0;
  padding: 0 16px;
}
main .photo-toolbar {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px 0 16px;
  gap: var(--control-gap);
}
main .photo-panel { padding: 20px; margin: 20px 0; }
main .photo-panel form > label { margin: 12px 0; }
main .photo-panel form > label:first-of-type { margin-top: 0; }
main .photo-panel form > :is(select, button) { margin-top: 12px; }
main .photo-panel form > select:first-child { margin-top: 0; }
main .pagination { align-items: center; flex-wrap: wrap; gap: 16px; }
main .pagination button { margin: 0; }
main .family-tabs { gap: 10px; margin: 8px 0 20px; }
main .family-tabs button { margin: 0; }
main .tree-heading > div { display: flex; flex-wrap: wrap; gap: 10px; }
main .tree-heading button { margin: 0; }
main .tree-toolbar { gap: 10px; margin-top: 16px; }
main .tree-toolbar :is(button, input, #tree-scale, #tree-name-search) {
  height: var(--control-height);
  min-height: var(--control-height);
  margin: 0;
}
main .tree-toolbar #tree-find { gap: 10px; }
main .family-actionbar { gap: var(--control-gap); align-items: center; }
main .family-actionbar button { margin: 0; }
main #assignment > label { display: flex; align-items: center; gap: 8px; margin: 16px 0; }
main #assignment > label input { margin: 0; }
main .visit-filters { gap: var(--control-gap); margin: 20px 0; }
main .visit-filters select,
main .family-actionbar select {
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.4;
}
main .visit-filters > a {
  height: var(--control-height);
  border: 1px solid var(--line);
  background: #fbf8ef;
}
main .visit-filters > button { height: var(--control-height); margin: 0; }
main .account-panel { width: 100%; }
main .account-panel form label { margin: 12px 0 6px; }
main .account-panel button { margin-top: 16px; }
main.place-view #place-editor form { gap: var(--control-gap); align-items: center; }
main.place-view #place-editor form > label { margin: 0; }
main.place-view #place-editor input:not([type="hidden"]),
main.place-view #place-editor button { height: var(--control-height); margin: 0; }

@media (max-width: 850px) {
  main .photo-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :root { --control-height: 44px; }
  main .photo-filters { gap: 12px; }
  main .photo-filters > label:first-of-type { grid-column: 1 / -1; }
  main .photo-filters > label:last-of-type { grid-column: 1 / -1; }
  main .photo-panel { padding: 16px; }
  main .tree-toolbar #tree-find { flex: 1 1 100%; }
  main .tree-toolbar #tree-name-search { flex: 1; width: auto; }
  main .family-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main .family-tabs button:last-child { grid-column: 1 / -1; }
  main .family-actionbar strong { flex-basis: 100%; }
  main .family-actionbar button { flex: 1 1 0; }
  main .family-actionbar #remove-selection { flex-basis: 100%; }
  main .visit-filters > :is(button, a) { flex: 1 1 auto; }
  main.place-view #place-editor form { grid-template-columns: minmax(0, 1fr); }
  main.place-view #place-editor button { grid-column: 1; grid-row: 2; }
}