/* Occupancy tool only. Uses the colour tokens from /assets/style.css. */
.check { display: flex; align-items: center; gap: .55rem; }
.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); margin: 0; }
.check label { margin: 0; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .8rem .9rem; margin: 0; display: grid; gap: .6rem; }
fieldset[hidden] { display: none; }
legend { font-weight: 700; padding: 0 .3rem; }
fieldset .hint { margin: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem 1rem; }
input[type="number"] { width: 100%; font: inherit; padding: .7rem .8rem; border: 2px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
input[type="number"]:focus { outline: none; border-color: var(--accent); }
.area-row { display: grid; grid-template-columns: 1fr 6rem; gap: .4rem; }

.gchip { display: inline-block; min-width: 2.6rem; text-align: center; font-weight: 800; font-size: .95rem; padding: .15rem .45rem; border-radius: 4px; border: 2px solid var(--ink); letter-spacing: -0.01em; }
.gchip.big { min-width: 4.2rem; font-size: 1.6rem; padding: .45rem .7rem; }
.opt-title { display: flex; align-items: center; gap: .6rem; }
.picked { display: flex; gap: 1rem; align-items: center; }
.picked p { margin: 0; }
.ex summary { font-weight: 500; font-size: .9rem; color: var(--muted); }
.note.small { font-size: .88rem; margin: .4rem 0; }

.fromto { display: flex; align-items: flex-start; gap: 1rem; margin: .4rem 0 1rem; }
.fromto .arrow { font-size: 1.8rem; font-weight: 800; color: var(--muted); align-self: center; }
.cb { min-width: 0; flex: 0 1 16rem; }
.cb p { margin: .2rem 0; }
.cb-what { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cb-name { font-weight: 700; }

.permit { border-left: 4px solid var(--accent); background: var(--cond-bg); border-radius: 4px; padding: .7rem .9rem; margin: 0 0 1rem; }
.permit p { margin: .25rem 0; }
.permit-head { font-weight: 800; font-size: 1.1rem; }
.permit-maybe { border-left-color: var(--line); background: var(--grey-bg); }

.flags h3, .block h3, .sprinklers h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.flags ul { margin: .2rem 0; padding-left: 1.2rem; }
.flags li { margin: .35rem 0; }
.flags li.warn::marker { color: var(--warn); }
.block { margin: 1rem 0; }
details.block > summary { font-size: 1.02rem; }
table.sep { border-collapse: collapse; font-size: .9rem; margin: .4rem 0; width: 100%; }
table.sep th, table.sep td { text-align: left; padding: .3rem .6rem .3rem 0; border-top: 1px solid var(--line); vertical-align: top; }
table.sep th { color: var(--muted); font-weight: 600; }
td.strong, .strong { font-weight: 700; }

.sprinklers { border-top: 1px solid var(--line); padding-top: .4rem; }
.spr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .8rem; margin: .6rem 0; }
.spr { border-radius: 6px; padding: .8rem .9rem; }
.spr p { margin: .25rem 0; }
.spr .vlabel { font-size: 1.15rem; }
.spr ul { padding-left: 1.1rem; margin: .4rem 0; }
.spr-what { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.row.next { margin-top: 1rem; }
a.button { display: inline-block; font-weight: 700; padding: .6rem 1.1rem; border-radius: 6px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; }
a.button:hover { filter: brightness(1.08); }
@media (max-width: 34rem) {
  .fromto { gap: .6rem; }
  .gchip.big { font-size: 1.3rem; min-width: 3.4rem; }
}