/* Kokoushuoneiden varaus. Koot suhteellisina yksikköinä, reunukset loogisina
   ominaisuuksina. */
body { font-family: system-ui, sans-serif; font-size: 1rem; line-height: 1.5;
       margin: 0; padding: 0 1rem 3rem; }
header { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
         justify-content: space-between; border-block-end: 1px solid #ccc; }
header h1 { font-size: 1.6rem; }
header form, header form p { display: inline; margin: 0; }
.kayttaja { display: flex; gap: 0.5rem; align-items: baseline; }
h2 { font-size: 1.2rem; margin-block-start: 1.5rem; }
ul.varaukset { list-style: none; padding-inline-start: 0; }
ul.varaukset li { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline;
                  padding-block: 0.4rem; border-block-end: 1px solid #eee; }
.aika { font-variant-numeric: tabular-nums; min-inline-size: 14rem; }
.huone { min-inline-size: 11rem; color: #444; }
.varaus-otsikko { font-weight: bold; }
.varaaja { color: #555; font-size: 0.9em; }
.virhe { color: #a00; margin-inline-start: 0.5em; }
form p { margin-block: 0.4rem; }
#varauslomake label { display: inline-block; min-inline-size: 20rem; }
#liikenneloki { margin-block-start: 2.5rem; border: 1px solid #ccc; padding: 0.5rem 1rem; }
#liikenneloki .ohje, #liikenneloki .kokeilut { font-size: 0.9em; }
#loki { display: flex; flex-direction: column-reverse; }
.viesti { font-family: "DejaVu Sans Mono", monospace; font-size: 0.8rem; white-space: pre-wrap;
          border-inline-start: 0.25rem solid #888; padding: 0.3rem 0.6rem; margin-block: 0.3rem; }
.viesti.pyynto { border-color: #357; background: #f4f7fb; }
.viesti.vastaus { border-color: #573; background: #f6fbf4; }
#viesti.onnistui { color: #060; }

.tekniikka { font-size: 0.6em; color: #555; vertical-align: middle; }
#viesti.onnistui { color: #060; }
details { margin-block-start: 2rem; border: 1px solid #ccc; padding: 0.5rem 1rem; font-size: 0.9em; }