:root{--ink:#26312f;--soft:#4f5d59;--line:#dfe5e2;--bg:#f6f7f5;--accent:#3f7d6e;--warm:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 "Iowan Old Style",Georgia,serif}
header.top{padding:2.5rem 1.25rem 1rem;max-width:820px;margin:0 auto}
header.top h1{margin:0;font-size:1.9rem;letter-spacing:.01em}
.intro{color:var(--soft);max-width:52ch}
main{max-width:820px;margin:0 auto;padding:0 1.25rem 3rem}
.card{background:var(--warm);border:1px solid var(--line);border-radius:10px;padding:1.25rem;margin:0 0 1.25rem}
h2{font-size:1.25rem;margin:0 0 .75rem}
h3{font-size:1.05rem;margin:1.5rem 0 .5rem}
.picker{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.field{display:flex;flex-direction:column;gap:.25rem;flex:1 1 220px}
label{font-size:.85rem;color:var(--soft);letter-spacing:.02em}
input,select,textarea{font:inherit;padding:.55rem .6rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.roomdesc{color:var(--soft);margin:-.5rem 0 1.25rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.5rem}
.slot{display:flex;flex-direction:column;align-items:center;gap:.15rem;border:1px solid var(--line);border-radius:8px;padding:.55rem .3rem;cursor:pointer;background:#fff;transition:.12s}
.slot span{font-size:1.02rem}
.slot small{color:var(--soft);font-size:.8rem;letter-spacing:.02em}
.slot input{margin:0 0 .1rem}
.slot:hover:not(.off){border-color:var(--accent)}
.slot:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff}
.slot:has(input:checked) small{color:#eef7f4}
/* ⚠ NOT opacity. opacity:.45 faded the border and the label together, which is why a
   past hour was almost invisible rather than merely inactive. A disabled control still
   has to be READABLE — the person needs to see that 10:00 exists and has gone. */
.slot.off{cursor:not-allowed;background:#eceeeb;border-color:#dbe0dd;color:#5f6d69}
.slot.off small{color:#6b7a77}
.btn{display:inline-block;margin-top:1.25rem;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:.7rem 1.3rem;font:inherit;cursor:pointer;text-decoration:none}
.btn:hover{background:#356a5e}
.hint{color:var(--soft);font-size:.88rem}
.errors{border-color:#c96a5c;background:#fdf3f1}
.errors ul{margin:0;padding-left:1.2rem}
.done .ref{font-size:1.1rem}
.summary{border-collapse:collapse;width:100%;margin:.75rem 0}
.summary th{text-align:left;color:var(--soft);font-weight:400;padding:.35rem .75rem .35rem 0;vertical-align:top;width:11rem}
.summary td{padding:.35rem 0}
.instructions{white-space:normal;background:#f3f6f4;border-left:3px solid var(--accent);padding:.85rem 1rem;border-radius:0 6px 6px 0}
footer{max-width:820px;margin:0 auto;padding:0 1.25rem 3rem;color:var(--soft);font-size:.9rem}
table.admin{width:100%;border-collapse:collapse;font-size:.92rem}
table.admin th,table.admin td{border-bottom:1px solid var(--line);padding:.5rem .4rem;text-align:left}