/* Leesbare instellingen op desktop en mobiel. De knoppen wijzigen de basis-em. */
html{font-size:1em}
body{font-size:1.125em;overflow-x:hidden;overflow-wrap:anywhere}
button,input,select,output,small{font-size:1em}
header{height:auto;min-height:4.5em;gap:1em;flex-wrap:wrap;padding:0.75em 2em}
header>*{min-width:0}
.header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:1em}
.header-actions nav{display:flex;flex-wrap:wrap}
.font-controls{display:flex;align-items:center;gap:0.35em;white-space:nowrap}
.font-controls button{width:2.4em;height:2.4em;border:1px solid #35d1ef;border-radius:0.35em;background:#102a35;color:#fff;font-weight:800;cursor:pointer}
.font-controls button:disabled{opacity:0.45;cursor:not-allowed}
.font-controls output{min-width:4.5em;text-align:center;font-weight:800}
main{width:100%;max-width:none;padding:1.5em 2em 3em}
main,section,.sound-card,.camera-settings,.temperature-rules,.sound-grid{min-width:0}
.page-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:2em}
.page-intro>div:first-child{min-width:0}
#saveStatus{display:block;width:fit-content;margin-top:0.75em}
#saveStatus:empty{display:none}
.tailnet-access{display:block}
.tailnet-access[hidden]{display:none}
.tailnet-access img{display:block;width:7em;height:7em;padding:0.35em;border-radius:0.25em;background:#fff}
.camera-settings{grid-template-columns:minmax(0,1fr) auto}
.camera-settings>*{min-width:0}
.temperature-rules,.sound-grid{width:65vw;max-width:100%;margin-inline:auto;grid-template-columns:minmax(0,1fr)}
.temperature-rule{grid-template-columns:repeat(2,minmax(0,1fr))}
.temperature-rule>strong{font-size:1.25em}
.temperature-rule label,.camera-values,.temperature-rule>small{font-size:1em}
.temperature-rule input{font-size:1.1em}
.rule-buttons{grid-template-columns:repeat(auto-fit,minmax(min(100%,11em),1fr))}
.rule-buttons button{font-size:1em;min-width:0;white-space:normal}
.sound-card h3{font-size:1em}
.sound-card header small,.toggle,.filename,.repeat-setting>label,.upload,.volume-label,.unit-button,.buttons button{font-size:1em}
.sound-card .filename{height:auto;min-height:1.5em;white-space:normal;overflow-wrap:anywhere}
.sound-card button{white-space:normal}
.repeat-setting>div{grid-template-columns:minmax(5em,7em) repeat(2,minmax(0,1fr))}
.repeat-setting input{width:100%}
aside{font-size:1em}
@media(max-width:900px){
  main{padding:1.25em 1em 2em}
  .page-intro{flex-direction:column}
  .temperature-rules,.sound-grid{width:100%}
}
@media(max-width:600px){
  header{align-items:flex-start;padding:0.75em 1em}
  .header-actions{justify-content:flex-start;width:100%}
  .header-actions nav{width:100%}
  .page-intro h2{font-size:1.5em}
  .tailnet-access img{width:6em;height:6em}
  .camera-settings{grid-template-columns:minmax(0,1fr)}
  .camera-settings>#refreshCamera,.camera-address,#cameraStatus,.subsection-label,.temperature-rules{grid-column:1}
  .camera-address{grid-template-columns:minmax(0,1fr)}
  .temperature-rule{grid-template-columns:minmax(0,1fr)}
  .temperature-rule>strong,.temperature-rule label,.camera-values,.rule-buttons,.temperature-rule>small{grid-column:1}
  .rule-buttons{grid-template-columns:minmax(0,1fr)}
  .sound-card{padding:1em}
  .sound-card header{gap:0.65em}
  .repeat-setting>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .repeat-setting .repeat-value{grid-column:1/-1}
  .buttons{grid-template-columns:minmax(0,1fr)}
}