/* Bluewood Hub. Same palette and typefaces as the Bluewood website pages
   (forest / moss / cream / gold; Cormorant Garamond for headings, Jost for text). */
@font-face { font-family: "Jost"; font-weight: 400; font-display: swap; src: url("/static/fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-display: swap; src: url("/static/fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-display: swap; src: url("/static/fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: italic; font-display: swap; src: url("/static/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); }

/* The hidden attribute always wins, whatever display an element's own rule sets (a flex row hidden by script stays hidden). */
[hidden] { display: none !important; }

:root {
  --forest: #1C2B1E; --moss: #4A6741; --sage: #7A9E76; --mist: #C8D8C4;
  --cream: #F5F0E8; --warm: #E8DFD0; --gold: #B8975A; --gold-lt: #D4AF72; --stone: #6B6458;
  --card: #FFFDF8; --line: #E2D8C6; --field: #CFC4AE;
  --red: #8B2020; --red-bg: #F6E4E0; --green-bg: #E2ECDF; --green-ink: #2F4A2A; --amber-bg: #F7EBCF; --amber: #7A5A12;
  --ink: #1C2B1E; --muted: #6B6458; /* 1.89.0: two names a few older rules used without their ever being set */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Jost", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--forest); font: 400 16px/1.55 var(--sans); }
h1, h2, .brand { font-family: var(--serif); font-weight: 600; letter-spacing: .005em; }
h1 { font-size: 1.7rem; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; line-height: 1.2; margin: 0 0 .55rem; }
h3 { font: 600 .72rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 .45rem; color: var(--amber); }
a { color: var(--moss); }
.muted { color: var(--stone); font-weight: 400; } .small { font-size: .85rem; } .right { text-align: right; }

nav.top { background: var(--forest); color: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; flex-wrap: wrap; border-bottom: 2px solid var(--gold); }
.brand { color: var(--cream); text-decoration: none; font-size: 1.5rem; display: inline-flex; align-items: center; gap: .6rem; }
.brand span, .login h1 span { font-style: italic; color: var(--gold-lt); }
nav .links { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
nav .links a { color: var(--mist); text-decoration: none; padding: .2rem 0; border-bottom: 2px solid transparent; }
nav .links a.on, nav .links a:hover { color: #fff; border-color: var(--gold-lt); }
nav form { margin: 0; } .linkish { background: none; border: 0; color: var(--mist); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.linkish:hover { color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 1.1rem 1rem 4rem; }
main.centred { display: grid; place-items: center; min-height: 100vh; padding-top: 0; }
main.wide { max-width: none; padding-left: 1.2rem; padding-right: 1.2rem; } /* pages that are a grid of the whole park: every pixel of width is a day */
.head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .2rem 0 .8rem; flex-wrap: wrap; }
.back { text-decoration: none; font-size: .95rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .85rem 1rem; margin-bottom: .75rem; }
.card.narrow, .login { max-width: 420px; } .login { width: 100%; border-top: 3px solid var(--gold); }
.login h1 { font-size: 2.3rem; color: var(--forest); } .login h1 span { color: var(--gold); }
label { display: block; font-weight: 500; font-size: .9rem; margin: .55rem 0 0; }
input, textarea, select { display: block; width: 100%; margin-top: .25rem; padding: .45rem .6rem; font: inherit; font-size: .95rem; font-weight: 400; color: var(--forest); background: #fff; border: 1px solid var(--field); border-radius: 4px; }
textarea { line-height: 1.6; resize: vertical; }
input:focus, textarea:focus, select:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--gold-lt); outline-offset: 1px; }

.btn { display: inline-block; font: 500 .9rem/1.3 var(--sans); padding: .5rem .9rem; border-radius: 4px; border: 1px solid var(--field); background: #fff; color: var(--forest); cursor: pointer; margin-top: .7rem; text-decoration: none; }
.btn:hover { background: var(--warm); }
.btn.primary { background: var(--moss); border-color: var(--moss); color: #fff; font-weight: 600; letter-spacing: .03em; } .btn.primary:hover { background: var(--forest); border-color: var(--forest); }
.btn.quiet { border-color: transparent; background: none; color: var(--stone); } .btn.quiet:hover { color: var(--red); background: none; text-decoration: underline; }
.btn.wide { width: 100%; } .btn.small { padding: .25rem .6rem; margin: 0; font-size: .85rem; }
.btn[disabled] { opacity: .6; cursor: progress; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; } form.gap { margin-top: .25rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 .9rem; align-items: end; margin-top: .9rem; padding-top: .4rem; border-top: 1px solid var(--line); }

.flash { padding: .7rem .9rem; border-radius: 4px; margin: 0 0 1rem; font-size: .95rem; overflow-wrap: anywhere; border-left: 3px solid transparent; }
.flash.good { background: var(--green-bg); color: var(--green-ink); border-color: var(--sage); } .flash.bad { background: var(--red-bg); color: var(--red); border-color: var(--red); }
main.centred .flash { margin-top: .8rem; }

.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: .9rem; flex-wrap: wrap; overflow: visible; }
.tab { padding: .55rem .85rem; text-decoration: none; color: var(--stone); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab.on { color: var(--forest); border-color: var(--gold); font-weight: 600; } .tab.warn { color: var(--red); }
.tab b { background: var(--moss); color: #fff; border-radius: 99px; padding: .05rem .5rem; font-size: .8rem; margin-left: .2rem; }
.tab.warn b { background: var(--red); }

.row { display: flex; justify-content: space-between; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--mist); border-radius: 6px; padding: .85rem 1rem; margin-bottom: .55rem; text-decoration: none; color: inherit; }
.row:hover { border-color: var(--gold); border-left-color: var(--gold); }
.row-main { min-width: 0; } .row-top { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row-top strong { font-weight: 600; }
.row-subject { overflow-wrap: anywhere; } .row-summary { color: var(--stone); font-size: .92rem; overflow-wrap: anywhere; }
.row-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: .85rem; white-space: nowrap; flex-shrink: 0; }
.empty { color: var(--stone); padding: 2rem 1rem; text-align: center; max-width: 34rem; margin: 0 auto; }

.badge { display: inline-block; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .5rem; border-radius: 99px; background: var(--warm); color: var(--forest); white-space: nowrap; }
.badge.red { background: var(--red-bg); color: var(--red); } .badge.green { background: var(--green-bg); color: var(--green-ink); }
.status { font-size: .88rem; padding: .25rem .75rem; border-radius: 99px; background: var(--warm); color: var(--forest); }
.status.sent { background: var(--green-bg); color: var(--green-ink); } .status.error { background: var(--red-bg); color: var(--red); }
.status.rejected, .status.skipped { background: #ECE6DA; color: var(--stone); }

.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
dl.meta { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; margin: 0 0 .8rem; font-size: .92rem; }
dl.meta dt { color: var(--stone); } dl.meta dd { margin: 0; overflow-wrap: anywhere; }
.summary { background: #E9EFE6; border-left: 3px solid var(--sage); border-radius: 4px; padding: .55rem .75rem; margin: 0 0 .8rem; font-size: .95rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; }
pre.mail { border-top: 1px solid var(--line); padding-top: .8rem; max-height: 34rem; overflow: auto; }
pre.avail { font: .84rem/1.55 ui-monospace, Menlo, Consolas, monospace; }
.notes { background: var(--amber-bg); border-left: 3px solid var(--gold); border-radius: 4px; padding: .7rem .9rem; } .notes ul { margin: 0; padding-left: 1.1rem; } .notes li { margin: .15rem 0; }
ul.history, ul.plain { list-style: none; padding: 0; margin: 0; font-size: .9rem; } ul.history li, ul.plain li { padding: .25rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; } th, td { text-align: left; padding: .45rem .5rem .45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
th { color: var(--stone); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } tr.off td { color: var(--stone); } td.right { text-align: right; }
.card ul.plain { margin-top: .7rem; }

fieldset.attach { border: 1px solid var(--line); border-radius: 4px; margin: .9rem 0 0; padding: .5rem .8rem .7rem; }
fieldset.attach legend { font-weight: 500; font-size: .92rem; padding: 0 .3rem; }
label.tick { font-weight: 400; margin: .35rem 0 0; display: flex; gap: .45rem; align-items: baseline; flex-wrap: wrap; }
label.tick input { width: auto; margin: 0; display: inline; accent-color: var(--moss); } label.tick .tl { flex: 1 1 0; min-width: 9rem; } /* a long line of words stays beside its box */
input[type=file] { padding: .4rem; background: #fff; }

img.logo { height: 32px; width: auto; max-width: 120px; border-radius: 3px; }
img.logo-login { display: block; height: 76px; width: auto; max-width: 100%; margin: 0 0 .8rem; }
img.logo-preview { height: 64px; width: auto; max-width: 240px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }

@media (max-width: 820px) {
  h1 { font-size: 1.7rem; }
  .two { grid-template-columns: 1fr; }
  .row { flex-direction: column; gap: .3rem; } .row-meta { flex-direction: row; gap: .7rem; align-items: center; }
  .actions .btn.primary { width: 100%; }
  nav .links { gap: .9rem; font-size: .76rem; }
}

/* ---- Changeovers ---- */
h1 .day { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--stone); margin-left: .6rem; letter-spacing: 0; }
.btn.current { border-color: var(--gold); background: var(--amber-bg); }
.head .actions .btn { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.tile { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--mist); border-radius: 6px; padding: .45rem .7rem; }
.tile b { display: block; font: 600 1.55rem/1.1 var(--serif); font-variant-numeric: lining-nums; } .tile span { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); overflow-wrap: anywhere; line-height: 1.25; } .tile { min-width: 0; }
.tile.allgood { border-top-color: var(--moss); background: var(--green-bg); }
table.co td { padding: .4rem .6rem .4rem 0; line-height: 1.4; font-size: .93rem; vertical-align: middle; } table.co td .badge { font-size: .62rem; padding: .08rem .4rem; vertical-align: middle; } table.co td .note { font-size: .85rem; } table.co td.do .btn { margin: 0; padding: .3rem .65rem; font-size: .82rem; } table.co td.do .tick { font-size: .9rem; } table.co form.closure { display: inline-flex; gap: .3rem; margin: .15rem 0 0 .4rem; } table.co form.closure select { margin: 0; width: auto; padding: .2rem .4rem; font-size: .8rem; } table.co form.closure .btn { margin: 0; }
table.co td.lodge { white-space: nowrap; width: 1%; padding-right: 1.1rem; }
.num { display: inline-block; min-width: 2rem; font: 600 1.35rem/1 var(--serif); font-variant-numeric: lining-nums; vertical-align: middle; }
.lodge-name { color: var(--stone); font-size: .88rem; }
.badge.gold { background: var(--amber-bg); color: var(--amber); }
.badge.kind-changeover { background: var(--forest); color: var(--cream); } .badge.kind-departure { background: var(--warm); } .badge.kind-arrival { background: var(--green-bg); color: var(--green-ink); }
.extras { margin-top: .3rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.note { margin-top: .35rem; padding: .3rem .5rem; background: var(--amber-bg); border-left: 3px solid var(--gold); font-size: .9rem; }
td.do { white-space: nowrap; } .tick { color: var(--green-ink); font-weight: 600; } tr.isdone td { background: #F4F8F2; }
table.co.quiet td { padding: .35rem .7rem .35rem 0; } table.co.quiet .num { font-size: 1.2rem; min-width: 1.9rem; }
details.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::before { content: '▸'; color: var(--stone); font-size: .95rem; line-height: 1; flex: none; } details.card[open] > summary::before { content: '▾'; } details.card summary h2 { display: inline; font-size: 1.2rem; margin: 0; }
details.card[open] summary { margin-bottom: .6rem; }
form.foot { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; } form.foot .btn { margin: 0; }
.printbox { display: none; }
@media (max-width: 820px) {
  table.co thead { display: none; } table.co tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  table.co td { display: block; border: 0; padding: .15rem 0; width: auto !important; }
  table.co td[data-label] { margin-top: .35rem; } table.co td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); } table.co.quiet tr { display: flex; gap: .6rem; align-items: baseline; }
}
@media print {
  nav.top, .noprint, .flash, form.inline, details.card:not([open]) summary::marker, details.card > summary::before { display: none !important; }
  body { background: #fff; font-size: 11pt; } main { max-width: none; padding: 0; }
  .card, .tile { border-color: #999; background: #fff; break-inside: avoid; } tr { break-inside: avoid; }
  .printbox { display: inline-block; width: 16pt; height: 16pt; border: 1.5pt solid #333; }
  .badge { border: 1px solid #666; background: #fff !important; color: #000 !important; }
  details.card > *:not(summary) { display: block; }
  /* The changeovers sheet on one side: smaller type, tight rows, the links and buttons gone, the lodge number kept big. */
  table.co { font-size: 9.5pt; } table.co td { padding: .12rem .45rem .12rem 0; line-height: 1.25; font-size: 9.5pt; } table.co td .note { font-size: 8.5pt; } table.co td .small, table.co .small { font-size: 8pt; }
  table.co td.do, table.co .btn, table.co a.small, table.co form, table.co .tick-form { display: none !important; } table.co .num { font-size: 12pt; min-width: 1.4rem; }
  table.co td.lodge { padding-right: .5rem; } table.co .badge { font-size: 7pt; padding: 0 .25rem; } table.co br + a { display: none; }
  .tiles { display: none; } h1 { font-size: 16pt; margin: 0 0 .3rem; } .card { padding: .4rem .6rem; margin: 0 0 .4rem; } .head { margin: 0; }
  @page { margin: 10mm; }
}

form.closure { display: flex; gap: .4rem; align-items: center; margin-top: .4rem; flex-wrap: wrap; }
form.closure select { width: auto; max-width: 100%; margin: 0; padding: .25rem .4rem; font-size: .85rem; } form.closure .btn { margin: 0; }

/* ---- Knowledge ---- */
input.finder { max-width: 26rem; margin: 0; }
h2.between { margin: 1rem 0 .45rem; }
details.ksec summary h2 { font-size: 1.25rem; }
details.ksec[open] { border-color: var(--gold); }
/* Places we recommend: one light row per place (the class was .place, which is the lodge-number block: dark green rows, Harvey 25 Oct) */
form.placeform { display: grid; grid-template-columns: auto minmax(9rem, 1.1fr) auto minmax(14rem, 2.4fr) auto auto auto auto; gap: .45rem .6rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
form.placeform input, form.placeform select { width: 100%; min-width: 0; margin: 0; padding: .35rem .5rem; font-size: .92rem; }
form.placeform input[name=name] { font-weight: 500; } form.placeform input[type=date] { width: 9.2rem; }
form.placeform .btn { margin: 0; } form.placeform label.tick { margin: 0; font-size: .82rem; white-space: nowrap; color: var(--stone); }
form.placeform.off input[name=name], form.placeform.off input.wide { color: var(--stone); background: #F3EEE4; }
form.placeform.add { border-bottom: 0; padding-top: .9rem; grid-template-columns: auto minmax(9rem, 1.1fr) auto minmax(14rem, 3fr) auto; }
@media (max-width: 900px) { form.placeform, form.placeform.add { display: flex; flex-wrap: wrap; } form.placeform input, form.placeform select { width: auto; } form.placeform input[name=name] { flex: 1 1 11rem; } form.placeform input.wide { flex: 3 1 18rem; } }

.notes { margin-bottom: 1rem; }

form.question { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .65rem 0; border-top: 1px solid var(--line); }
form.question .q { flex: 1 1 100%; } form.question input[name=answer] { flex: 1 1 18rem; width: auto; margin: 0; padding: .4rem .55rem; } form.question .btn { margin: 0; }
details#lodges form { margin-top: .6rem; } details#lodges .btn { margin: 0; }

/* reviews */
.links b.count { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 99px; background: var(--gold); color: #fff; font: 600 .72rem/1.15rem var(--sans); font-style: normal; letter-spacing: 0; text-align: center; vertical-align: middle; }
.grid3 { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: .8rem; } .grid4 { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .8rem; align-items: end; } @media (max-width: 760px) { .grid4 { grid-template-columns: 1fr; } } .pair { display: flex; gap: .4rem; } .pair input { width: 5rem; } .pair select { flex: 1; }
ol.steps { margin: .9rem 0; padding-left: 1.3rem; } ol.steps li { margin: .5rem 0; } ol.steps .btn { margin: 0 .35rem 0 0; }
details.card form { margin-top: .7rem; }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr; } }

#mailboxes details { margin-top: .8rem; } #mailboxes td form { margin: 0; } #mailboxes h2 { margin-top: 1.4rem; }

.pair.end { align-items: flex-end; } #wix form { margin-bottom: .7rem; } textarea.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }

/* learning and lodge notes */
form.lesson { display: flex; gap: .6rem; align-items: flex-start; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--line); } form.lesson .btn { margin: 0; flex: none; }
#learning details { margin-top: .6rem; }
table.lodges tr.lodge-note td { padding-top: 0; border-top: 0; } table.lodges tr.lodge-note form { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .5rem; } table.lodges tr.lodge-note textarea { flex: 1; margin: 0; padding: .35rem .5rem; font-size: .88rem; min-height: 0; } table.lodges tr.lodge-note .btn { margin: 0; }

.days { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .4rem 0 .8rem; }

form.exception .days { margin-top: .2rem; } form.inline { display: inline; } form.inline .btn { margin: 0 0 0 .4rem; }

/* manage */
.tile.bad { border-top: 3px solid var(--red); } .tile.allgood { border-top: 3px solid var(--moss); } .tile.warm { border-top: 3px solid var(--gold); } .tile .tnote { display: block; font-style: normal; font-size: .8rem; margin-top: .25rem; line-height: 1.3; } .tile .tnote.good { color: var(--green-ink); }
details.section { margin-bottom: .6rem; } details.section > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .8rem; padding: .3rem 0; } details.section > summary h2 { margin: 0; } details.section > summary::-webkit-details-marker { display: none; }
.row.job { border-left-color: var(--moss); } .row.job.now { border-left-color: var(--gold); } .row.job.late { border-left-color: var(--red); } .red { color: var(--red); font-weight: 600; }
.links b.count.red { background: var(--red); }
form.jobform .pair { align-items: center; } form.jobform .pair input[name=every] { width: 3.2rem; } form.jobform .pair select { flex: 1; }
.empty { color: var(--stone); padding: 1.2rem 0; }

/* orders and people */
.order { display: flex; justify-content: space-between; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--mist); border-radius: 6px; padding: .5rem .8rem; margin-bottom: .4rem; }
.order.ordered { border-left-color: var(--gold); } .order .order-main { flex: 1; min-width: 0; } .order .order-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; flex: none; max-width: 40rem; }
.order form.stack { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; } .order form.stack input { margin: 0; padding: .3rem .5rem; font-size: .85rem; width: 9.5rem; } .order form .btn { margin: 0; }
.order form.inline { display: inline; } .grid3 .span2 { grid-column: span 2; }
table.people td { vertical-align: top; } table.people .depts { display: flex; flex-wrap: wrap; gap: .1rem .7rem; max-width: 22rem; } table.people .tick.small { font-size: .85rem; }
.topic code { font-size: 1.05rem; background: var(--warm); padding: .25rem .5rem; border-radius: 4px; } ol.steps.plain { margin: .6rem 0 .3rem 1.2rem; } ol.steps.plain li { margin: .3rem 0; }
@media (max-width: 760px) { .order { flex-direction: column; } .order .order-actions { justify-content: flex-start; max-width: none; } .grid3 .span2 { grid-column: auto; } }

.dayline form.inline { margin-left: .5rem; } .dayline .btn { margin: 0; vertical-align: middle; }

/* maintenance */
.row.issue { align-items: center; } .row.issue.materials { border-left-color: var(--gold); }
.place { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; border-radius: 6px; background: var(--forest); color: var(--cream); font: 600 1.05rem/1 var(--sans); flex: none; }
.place.big { vertical-align: middle; margin-right: .4rem; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-top: .8rem; } .photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
form.stackform { margin: 0 0 1rem; } form.stackform .btn { margin-top: .5rem; }
ul.timeline { list-style: none; padding: 0; margin: 0; } ul.timeline li { padding: .5rem 0; border-top: 1px solid var(--line); } ul.timeline li:first-child { border-top: 0; }
.head .btn { margin: 0; }

/* navigation */
nav .links details.more { position: relative; } nav .links details.more > summary { list-style: none; cursor: pointer; color: var(--mist); padding: .2rem 0; border-bottom: 2px solid transparent; } nav .links details.more > summary::-webkit-details-marker { display: none; }
nav .links details.more > summary.on, nav .links details.more > summary:hover { color: #fff; border-color: var(--gold-lt); }
nav .links details.more .menu { position: absolute; right: 0; top: 2.1rem; background: var(--forest); border: 1px solid var(--moss); border-radius: 6px; padding: .5rem 0; min-width: 13rem; display: flex; flex-direction: column; z-index: 20; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
nav .links details.more .menu a { padding: .55rem 1rem; border: 0; } nav .links details.more .menu a:hover, nav .links details.more .menu a.on { background: var(--moss); color: #fff; }
nav .links a.who { color: var(--gold-lt); }
nav.bottom { display: none; }
/* home */
.hometiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.hometile { display: flex; gap: 1rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem 1.05rem; text-decoration: none; color: inherit; min-height: 7.4rem; transition: transform .15s ease, box-shadow .15s ease; border-top: 3px solid var(--line); }
.hometile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(28,43,30,.08); }
.hometile .n { font: 500 2.2rem/1 var(--serif); color: var(--forest); min-height: 2.2rem; font-variant-numeric: lining-nums; } .hometile .l { font-weight: 600; display: block; } .hometile .s { color: var(--stone); font-size: .86rem; display: block; }
.hometile .tile-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
.hometile:not(.has-ring) { flex-direction: column; gap: .15rem; } .hometile:not(.has-ring) .l { margin-top: .35rem; }
.hometile.bad { border-top-color: var(--red); } .hometile.bad .n { color: var(--red); } .hometile.warm { border-top-color: var(--gold); } .hometile.good { border-top-color: var(--moss); } .hometile.plain { border-top-color: var(--line); }
.hometiles.settings .hometile { min-height: 5.6rem; }
/* rings */
.ringwrap { position: relative; width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.ringwrap .n { position: absolute; font-size: 1.75rem; min-height: 0; }
.ring { width: 92px; height: 92px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.2; stroke-linecap: butt; }
.ring.none circle { stroke: var(--warm); }
.ring .seg { animation: segin .7s cubic-bezier(.3,.7,.3,1) both; transition: stroke-width .15s ease, opacity .15s ease; }
@keyframes segin { from { stroke-dasharray: 0 100; } }
.ring .seg:hover, .ring .seg.hot { stroke-width: 4.6; } .ring.dim .seg:not(.hot) { opacity: .35; }
.seg.bad, .dot.bad { stroke: var(--red); background: var(--red); } .seg.warm, .dot.warm { stroke: var(--gold); background: var(--gold); } .seg.good, .dot.good { stroke: var(--moss); background: var(--moss); }
.seg.moss, .dot.moss { stroke: var(--sage); background: var(--sage); } .seg.sage, .dot.sage { stroke: var(--mist); background: var(--mist); } .seg.plain, .dot.plain { stroke: var(--field); background: var(--field); }
.legend { display: flex; flex-wrap: wrap; gap: .15rem .7rem; margin-top: .4rem; font-size: .78rem; color: var(--stone); }
.legend .lg { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; } .legend .lg b { color: var(--forest); font-weight: 600; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; }
/* on the park today */
.park .park-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.park-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.park-col h3 { margin-bottom: .5rem; } .chips { display: flex; flex-direction: column; gap: .4rem; }
.chip { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); border-left: 3px solid var(--mist); }
.chip:hover { border-color: var(--gold); } .chip.jobs { border-left-color: var(--gold); } .chip.urgent { border-left-color: var(--red); } .chip .chip-text { min-width: 0; line-height: 1.3; }
.chip .place { min-width: 2.2rem; height: 2.2rem; font-size: .95rem; }
.amber { color: var(--amber); } .team { margin: .9rem 0 0; font-size: .9rem; color: var(--stone); } .team b { color: var(--forest); font-weight: 600; } .team b.red { color: var(--red); }
/* viewing as someone */
form.viewing { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--gold); color: var(--forest); padding: .5rem 1.25rem; font-size: .92rem; }
form.viewing .btn { margin: 0; }
/* A restore drill copy (hub-site drill): unmistakable on every page, printed or not */
.drillbar { background: var(--red); color: #fff; padding: .55rem 1.25rem; font-size: .92rem; text-align: center; position: sticky; top: 0; z-index: 60; }
/* page transitions */
@view-transition { navigation: auto; }
main { animation: pagein .22s ease-out; } @keyframes pagein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main { animation: none; } .hometile { transition: none; } }
/* phones and tablets: a bottom bar instead of the long top row */
@media (max-width: 760px) {
  nav.top .links { display: none; }
  nav.bottom { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--forest); border-top: 1px solid var(--moss); padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom)); justify-content: space-around; }
  nav.bottom a { color: var(--mist); text-decoration: none; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .3rem .5rem; position: relative; min-width: 3.6rem; }
  nav.bottom a.on { color: #fff; } nav.bottom a .count { position: absolute; top: -.1rem; right: .1rem; }
  main { padding-bottom: 5.5rem; }
  .hometiles { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .hometile { min-height: 6.4rem; padding: .85rem .9rem; } .hometile .n { font-size: 1.9rem; }
}
.row.issue .row-main { flex: 1; min-width: 0; text-align: left; } .row.issue.late { border-left-color: var(--red); } .row.issue.open:not(.late) { border-left-color: var(--moss); }

/* maintenance: lodge state, scheduling */
form.filters { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; } form.filters label { margin: 0; font-size: .82rem; } form.filters select { margin-top: .2rem; width: auto; min-width: 11rem; padding: .4rem .5rem; font-size: .9rem; } form.filters .btn { margin: 0; }
.lodgecard h3 a { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: .5rem; }
.lodge-state { display: inline-block; margin-top: .3rem; font-size: .85rem; padding: .1rem .55rem; border-radius: 99px; background: var(--warm); color: var(--forest); }
.lodge-state.free { background: var(--green-bg); color: var(--green-ink); } .lodge-state.bad { background: var(--red-bg); color: var(--red); font-weight: 600; } .lodge-state.busy { background: #ECE6DA; color: var(--stone); }
.lodgecard { border-left: 3px solid var(--sage); } .lodgecard.warn { border-left-color: var(--red); background: #FBF3F1; } .lodgecard h3 { margin-bottom: .3rem; }
.btn.danger { border-color: var(--red); color: var(--red); } .btn.danger:hover { background: var(--red-bg); }
table.slots td { vertical-align: middle; } form.handpick { margin-top: .6rem; align-items: end; } form.handpick label { margin-top: 0; }
.card.sched { border-left: 3px solid var(--gold); } .card.slots { border-left: 3px solid var(--gold); }
.stackform .pair input { width: auto; flex: 1; } .stackform .pair input[name=days] { flex: 0 0 5rem; }
/* orders */
.order .order-actions { flex-direction: column; align-items: flex-end; gap: .35rem; max-width: 30rem; }
.order .order-actions form.stack { justify-content: flex-end; } .order .order-actions form.inline .btn { margin: 0; }
.quiet-lodges { margin: .5rem 0 0; line-height: 1.9; } .numlink { display: inline-block; min-width: 1.9rem; text-align: center; padding: .05rem .3rem; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--forest); text-decoration: none; font-weight: 600; font-size: .82rem; } .numlink:hover { border-color: var(--gold); }
.ref { display: inline-block; font: 600 .78rem/1.3 ui-monospace, Menlo, Consolas, monospace; background: var(--forest); color: var(--cream); padding: .12rem .45rem; border-radius: 4px; margin-right: .3rem; letter-spacing: .04em; }
form.find { display: flex; gap: .4rem; align-items: center; } form.find input { margin: 0; width: 22rem; max-width: 60vw; padding: .45rem .6rem; } form.find .btn { margin: 0; }
.order.urgent { border-left-color: var(--red); }
table.stock input { margin: 0; padding: .3rem .5rem; font-size: .88rem; width: 12rem; } table.stock form.stack { display: flex; gap: .3rem; align-items: center; } table.stock .btn { margin: 0; flex: none; white-space: nowrap; } /* 1.88.1: the Save button was squeezed until its word broke in two */
h3.gap { margin-top: 1.1rem; }
/* leave grid */
.scroll { overflow-x: auto; }
table.leave { border-collapse: separate; border-spacing: 2px; font-size: .78rem; } table.leave th { padding: .15rem .3rem; border: 0; white-space: nowrap; text-align: center; font-size: .7rem; }
table.leave th span { display: block; color: var(--stone); font-weight: 400; } table.leave tbody th { text-align: left; } table.leave th.wk { color: var(--stone); }
table.leave td { width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 3px; background: var(--green-bg); }
table.leave td.day-off { background: #ECE6DA; } table.leave td.holiday { background: var(--gold-lt); } table.leave td.sick { background: var(--red); } table.leave td.other { background: #9FB6C8; }
table.leave td.today, table.leave th.today { outline: 2px solid var(--forest); } table.leave tr.cover td { background: transparent; text-align: center; font-weight: 700; color: var(--red); } table.leave tr.cover td.thin { background: var(--red-bg); }
@media (max-width: 760px) {
  .park-cols { grid-template-columns: 1fr; } .hometiles { grid-template-columns: 1fr; } .hometile { min-height: 0; }
  .ringwrap, .ring { width: 76px; height: 76px; } .ringwrap .n { font-size: 1.5rem; }
  form.find input { width: 100%; max-width: none; } .head form.find { width: 100%; }
  .order .order-actions { align-items: flex-start; } .order .order-actions form.stack { justify-content: flex-start; }
}

/* team */
.chips.inline { flex-direction: row; flex-wrap: wrap; gap: .4rem; } .chip-in { display: inline-flex; gap: .4rem; align-items: baseline; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); } .chip-in a { text-decoration: none; color: inherit; }
table.rota { border-collapse: separate; border-spacing: 3px; font-size: .85rem; } table.rota th { border: 0; padding: .2rem .4rem; text-align: center; white-space: nowrap; } table.rota thead th span { display: block; font-weight: 400; color: var(--stone); } table.rota tbody th { text-align: left; min-width: 7rem; } table.rota tbody th a { text-decoration: none; color: inherit; } table.rota tbody th span { display: block; font-weight: 400; }
table.rota td { border: 0; border-radius: 6px; padding: .45rem .5rem; text-align: center; min-width: 4.6rem; white-space: nowrap; position: relative; font-variant-numeric: tabular-nums; }
table.rota td.in { background: var(--green-bg); color: var(--green-ink); font-weight: 600; } table.rota td.off { background: #ECE6DA; color: var(--stone); } table.rota td.holiday { background: var(--gold-lt); color: var(--forest); font-weight: 600; } table.rota td.sick { background: var(--red); color: #fff; font-weight: 600; } table.rota td.other { background: #9FB6C8; color: var(--forest); }
table.rota td.today, table.rota th.today { outline: 2px solid var(--forest); outline-offset: -1px; } .dot-rota { position: absolute; top: .3rem; right: .3rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--forest); }
table.cover { border-collapse: separate; border-spacing: 2px; font-size: .78rem; } table.cover th { padding: .15rem .3rem; border: 0; white-space: nowrap; text-align: center; font-size: .7rem; } table.cover thead th span { display: block; color: var(--stone); font-weight: 400; } table.cover tbody th { text-align: left; } table.cover th.wk { color: var(--stone); }
table.cover td { width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 3px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
table.cover td.c-ok { background: var(--green-bg); color: var(--green-ink); } table.cover td.c-thin { background: var(--amber-bg); color: var(--amber); } table.cover td.c-none { background: var(--red); color: #fff; } table.cover td.c-rest { background: #F1ECE2; }
table.cover td.today, table.cover th.today { outline: 2px solid var(--forest); outline-offset: -1px; }
table.balances td { vertical-align: middle; } table.balances th { white-space: nowrap; } table.balances td:first-child { white-space: nowrap; } table.balances td:nth-child(2) { max-width: 34rem; color: var(--stone); }
.tiles.small { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); } .tiles.small .tile b { font-size: 1.5rem; }
.weeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: .5rem 0 .8rem; } .weekblock h3 { margin-bottom: .3rem; }
table.patt td { padding: .2rem .35rem .2rem 0; vertical-align: middle; } table.patt input { margin: 0; padding: .3rem .4rem; font-size: .9rem; } table.patt input[type=checkbox] { width: auto; accent-color: var(--moss); }
label.module { padding: .5rem 0; border-top: 1px solid var(--line); align-items: baseline; } label.module b { min-width: 11rem; }
.today-card .flash { margin: .6rem 0 0; }

/* ---- the dashboard (1.13) ---- */
.dash { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .85rem; align-items: start; margin-bottom: 1.2rem; grid-auto-flow: row dense; }
.dash.packed { grid-auto-rows: 8px; align-items: stretch; } .dash.packed .panel { overflow: hidden; }
.panel { grid-column: span 2; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .95rem 1.1rem 1rem; min-width: 0; border-top: 3px solid var(--line); animation: panelin .35s ease-out both; }
.panel.half { grid-column: span 3; } .panel.twothirds { grid-column: span 4; } .panel.wide { grid-column: span 6; }
.panel.tone-bad { border-top-color: var(--red); } .panel.tone-warm { border-top-color: var(--gold); } .panel.tone-good { border-top-color: var(--moss); }
@keyframes panelin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel:nth-child(2) { animation-delay: .04s; } .panel:nth-child(3) { animation-delay: .08s; } .panel:nth-child(4) { animation-delay: .12s; } .panel:nth-child(5) { animation-delay: .16s; } .panel:nth-child(n+6) { animation-delay: .2s; }
.phead { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .55rem; }
.phead h2 { font-size: 1.25rem; margin: 0; } .phead h2 a { color: inherit; text-decoration: none; } .phead h2 a:hover { color: var(--moss); }
.pmeta { font-size: .82rem; color: var(--stone); } .pmeta b { color: var(--forest); } .pmeta a { color: var(--moss); }
.pbody h3 { margin: .7rem 0 .3rem; } .pbody h3:first-child { margin-top: 0; }
.allclear { color: var(--green-ink); background: var(--green-bg); border-radius: 6px; padding: .55rem .75rem; margin: 0; font-size: .92rem; }
.plines { list-style: none; margin: .4rem 0 0; padding: 0; font-size: .92rem; } .plines li { padding: .32rem 0 .32rem .75rem; border-top: 1px solid var(--line); border-left: 3px solid var(--mist); margin-top: 2px; line-height: 1.35; overflow-wrap: anywhere; }
.plines li:first-child { border-top: 0; } .plines li a { color: var(--forest); text-decoration: none; font-weight: 500; } .plines li a:hover { color: var(--moss); text-decoration: underline; }
.plines li.bad { border-left-color: var(--red); } .plines li.warm { border-left-color: var(--gold); } .plines li.good { border-left-color: var(--moss); } .plines li.moss { border-left-color: var(--sage); } .plines li.plain { border-left-color: var(--line); }
.plines.tight li { padding: .2rem 0 .2rem .6rem; font-size: .86rem; } .plines.deliveries .ref { margin-right: .4rem; }
/* big ring */
.bigring { display: flex; align-items: center; gap: 1rem; } .ringwrap.big, .ringwrap.big .ring { width: 124px; height: 124px; } .ringwrap.big .n { font-size: 2.3rem; }
.ringwrap.mid, .ringwrap.mid .ring { width: 84px; height: 84px; } .ringwrap.mid .n { font-size: 1.6rem; }
.ringlabel { display: flex; flex-direction: column; line-height: 1.25; } .ringlabel b { font: 600 1.2rem/1.2 var(--serif); } .ringlabel span { color: var(--stone); font-size: .85rem; }
.plegend { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--stone); }
.plegend li { display: inline-flex; align-items: center; gap: .35rem; } .plegend li a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .plegend li b { color: var(--forest); }
.dot.a-in { background: var(--sage); } .dot.a-sent { background: var(--moss); } .dot.a-jobs { background: var(--gold); }
/* jobs strip */
.strip { display: flex; gap: 1.1rem; align-items: flex-start; } .stripbody { flex: 1; min-width: 0; }
.joblist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .3rem .9rem; }
.jobrow a { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; color: inherit; padding: .38rem .5rem; border-radius: 6px; border: 1px solid var(--line); background: #fff; border-left: 3px solid var(--mist); }
.jobrow a:hover { border-color: var(--gold); } .jobrow.bad a { border-left-color: var(--red); } .jobrow.warm a { border-left-color: var(--gold); } .jobrow.moss a { border-left-color: var(--sage); }
.jobrow .jt { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; } .jobrow .jm { white-space: nowrap; }
.jk { width: .55rem; height: .55rem; border-radius: 2px; flex: none; background: var(--moss); align-self: center; } .jk.maintenance { background: var(--forest); border-radius: 50%; } .jk.list { background: var(--gold); }
/* park narrative */
.parklines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.parkline { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; border-left: 3px solid var(--mist); line-height: 1.35; font-size: .92rem; }
.parkline.bad { border-left-color: var(--red); } .parkline.warm { border-left-color: var(--gold); } .parkline.good { border-left-color: var(--moss); }
.parkline .place { min-width: 2.2rem; height: 2.2rem; font-size: .95rem; } .pl-text { min-width: 0; } .pl-what { color: var(--stone); } .pl-jobs { color: var(--amber); font-size: .88rem; } .parkline.bad .pl-jobs { color: var(--red); }
/* deliveries chart */
.dchart { display: flex; align-items: flex-end; gap: 3px; height: 92px; padding: .9rem 0 1.3rem; border-bottom: 1px solid var(--line); margin-bottom: .4rem; position: relative; box-sizing: content-box; }
.tbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 64px; position: relative; min-width: 0; }
.tbar svg { display: block; width: 70%; max-width: 26px; height: 64px; } .tbar rect { fill: var(--mist); } .tbar.has rect { fill: var(--moss); } .tbar.today rect { fill: var(--gold); } .tbar.late.has rect { fill: var(--red); } .tbar.nodate.has rect { fill: var(--field); }
.tbar i { position: absolute; bottom: -1.2rem; font: 500 .62rem/1 var(--sans); color: var(--stone); font-style: normal; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .tbar.late, .tbar.nodate { flex: 1.3; } .tbar.late { margin-right: .35rem; border-right: 1px dashed var(--line); padding-right: .35rem; } .tbar.nodate { margin-left: .35rem; border-left: 1px dashed var(--line); padding-left: .35rem; }
.tbar b { position: absolute; top: -1rem; font-size: .72rem; color: var(--forest); } .tbar.late b { color: var(--red); }
/* KPIs */
.kpis { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: .55rem; } .kpi { display: flex; flex-direction: column; min-width: 4.2rem; padding: .35rem .6rem; border-radius: 8px; background: var(--cream); } .kpi b { font: 600 1.45rem/1.1 var(--serif); font-variant-numeric: lining-nums; } .kpi span { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.kpi.bad { background: var(--red-bg); } .kpi.bad b { color: var(--red); } .kpi.warm { background: var(--amber-bg); } .kpi.warm b { color: var(--amber); }
svg.bar { display: block; width: 100%; height: 8px; margin: .25rem 0 .45rem; } svg.bar .track { fill: var(--warm); } svg.bar .fill { fill: var(--moss); } svg.bar .fill.warm { fill: var(--gold); } svg.bar .fill.plain { fill: var(--sage); }
/* team week dots */
.weekdots { display: flex; gap: .35rem; margin-top: .6rem; } .wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem 0; border-radius: 6px; background: var(--cream); text-decoration: none; color: inherit; font-size: .8rem; } .wd i { font-style: normal; color: var(--stone); font-size: .66rem; text-transform: uppercase; } .wd b { font: 600 1rem/1 var(--serif); } .wd.thin { background: var(--red-bg); } .wd.thin b { color: var(--red); } .wd.today { outline: 2px solid var(--forest); }
/* venue progress lines */
.shiftline { display: grid; grid-template-columns: 6.5rem 1fr 3rem; gap: .5rem; align-items: center; font-size: .85rem; } .shiftline svg.bar { margin: 0; } .shiftline .sn { text-align: right; } .venue-area + .venue-area { margin-top: .6rem; }
/* activity chart */
.actchart { height: 110px; } .actbars { display: flex; align-items: flex-end; gap: 4px; height: 84px; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); box-sizing: content-box; }
.actday { flex: 1; height: 84px; display: flex; align-items: flex-end; justify-content: center; position: relative; } .actday svg { display: block; width: 90%; max-width: 28px; height: 84px; } .actday .a-in { fill: var(--sage); } .actday .a-sent { fill: var(--moss); } .actday .a-jobs { fill: var(--gold); }
.actday i { position: absolute; bottom: -1.05rem; font: .62rem/1 var(--sans); font-style: normal; color: var(--stone); } .actday.today { background: linear-gradient(to top, var(--amber-bg), transparent); border-radius: 4px; }
/* week grid */
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; } .wday { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; min-height: 5rem; } .wday h3 { margin-bottom: .1rem; color: var(--forest); } .wday.today { border-color: var(--gold); background: #FFFBF2; } .wday.off { background: var(--cream); } .wday.past { opacity: .7; } .wday p { margin: 0 0 .3rem; }
/* customise */
.prows { list-style: none; margin: .8rem 0; padding: 0; } .prow { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); } .prow label.tick { flex: 1; margin: 0; } .prow select { width: auto; margin: 0; padding: .3rem .4rem; font-size: .88rem; } .prow .moves { display: flex; gap: .2rem; } .prow .moves .btn { margin: 0; padding: .15rem .5rem; } .prow:not(.on) label { color: var(--stone); }
.head .btn.quiet { margin: 0; }
/* certificates grid */
table.certgrid { min-width: 100%; } table.certgrid th, table.certgrid td { white-space: nowrap; } table.certgrid td.cert { min-width: 5.4rem; } table.certgrid tbody th { position: sticky; left: 0; background: var(--card); z-index: 1; } table.certgrid thead th:first-child { position: sticky; left: 0; background: var(--card); z-index: 2; }
table.certgrid th { font-size: .68rem; } table.certgrid thead th span { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--stone); } table.certgrid tbody th { white-space: nowrap; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var(--forest); }
table.certgrid td.cert { padding: .2rem .25rem; } table.certgrid td.cert a { display: block; text-align: center; padding: .3rem .25rem; border-radius: 5px; text-decoration: none; font-size: .82rem; font-weight: 600; background: var(--green-bg); color: var(--green-ink); }
table.certgrid td.soon a, table.certgrid td.late a { background: var(--amber-bg); color: var(--amber); } table.certgrid td.late a { box-shadow: inset 0 0 0 1.5px var(--amber); } table.certgrid td.overdue a { background: var(--red); color: #fff; } table.certgrid td.missing a { background: var(--cream); color: var(--stone); font-weight: 400; } table.certgrid td.na a { background: transparent; min-height: 1.6rem; } table.certgrid td.cert .badge { display: block; margin: .15rem auto 0; width: max-content; font-size: .58rem; }
tr.overdue th { color: var(--red); } tr.expired td:first-child { color: var(--red); }
/* deep cleans grid */
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .45rem; } .dcell { display: flex; flex-direction: column; align-items: center; padding: .5rem .3rem; border-radius: 8px; text-decoration: none; color: var(--forest); background: var(--green-bg); border: 1px solid transparent; position: relative; line-height: 1.2; }
.dcell b { font: 600 1.35rem/1 var(--serif); } .dcell span { font-size: .68rem; color: var(--stone); text-align: center; } .dcell.warm { background: var(--amber-bg); } .dcell.bad { background: var(--red-bg); } .dcell.bad span { color: var(--red); } .dcell.never { background: var(--cream); } .dcell.free { border-color: var(--forest); } .dcell i { font: 600 .56rem/1.4 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--forest); } .dcell:hover { border-color: var(--gold); }
table.deep tr.overdue td, table.deep tr.never td { background: #FDF6F4; } table.deep td.do { width: 1%; } table.deep label.tick { margin: 0; }
form.inlineform { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } form.inlineform input, form.inlineform select { width: auto; margin: 0; padding: .3rem .45rem; font-size: .88rem; } form.inlineform input[name=title] { flex: 1 1 14rem; } form.inlineform .btn { margin: 0; }
/* venue lists */
.shifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; } .shift h3 { margin-bottom: .3rem; } .shift.complete h3 { color: var(--green-ink); }
.citems { list-style: none; margin: 0; padding: 0; } .citem { padding: .3rem 0; border-top: 1px solid var(--line); font-size: .92rem; display: flex; gap: .4rem; align-items: flex-start; } .citem label.tick { margin: 0; flex: 1; flex-wrap: nowrap; align-items: flex-start; gap: .5rem; } .citem label.tick input { margin-top: .3rem; } .citem .ctext { flex: 1; min-width: 0; } .citem .reading { width: 6.5rem; flex: none; margin: 0; padding: .25rem .4rem; font-size: .85rem; } .citem.isdone { color: var(--stone); } .citem .tick { flex: none; } .citem form.inline { flex: none; } .citem form.inline .btn { margin: 0; }
.card.venue .head { margin-bottom: .6rem; } .card.venue .head .btn { margin: 0; }
/* personal lists */
ul.todos .row { align-items: flex-start; } .row.todo.late { border-left-color: var(--red); } .row.todo.now { border-left-color: var(--gold); } .row.todo.check { border-left-color: var(--sage); background: #F6F8F4; }
.row.todo form.inline .btn { margin: 0 .3rem 0 0; } .answer { margin-top: .35rem; padding: .4rem .6rem; background: var(--green-bg); border-radius: 6px; font-size: .9rem; }
details.ask summary { list-style: none; cursor: pointer; } details.ask summary::-webkit-details-marker { display: none; } details.ask form { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; } details.ask form input, details.ask form select { width: auto; margin: 0; padding: .3rem .45rem; font-size: .85rem; } details.ask form .btn { margin: 0; }
details.edit summary { list-style: none; cursor: pointer; display: inline-block; } details.edit summary::-webkit-details-marker { display: none; } details.edit[open] { display: block; margin-top: .4rem; }
details.work summary { cursor: pointer; color: var(--moss); margin-top: .8rem; }
table.health th { white-space: nowrap; width: 1%; padding-right: 1rem; text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--forest); }
.login.setup { max-width: 520px; } .login.setup h2 { margin: 1.2rem 0 .2rem; font-size: 1.3rem; }
form.filters select[data-autosubmit] { max-width: 16rem; }
.order form.stack select { margin: 0; padding: .3rem .45rem; font-size: .85rem; width: auto; max-width: 11rem; } .order form.stack input[type=file] { width: 9rem; padding: .15rem; font-size: .75rem; }
table.stock select { margin: 0; padding: .3rem .45rem; font-size: .85rem; width: auto; }
@media (max-width: 1000px) { .panel { grid-column: span 3; } .panel.half, .panel.twothirds { grid-column: span 3; } .weekgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dash { grid-template-columns: 1fr; gap: .7rem; } .panel, .panel.half, .panel.twothirds, .panel.wide { grid-column: span 1; } .strip { flex-direction: column; } .joblist { grid-template-columns: 1fr; } .park-cols { grid-template-columns: 1fr; } .weekgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ringwrap.big, .ringwrap.big .ring { width: 104px; height: 104px; } .shiftline { grid-template-columns: 5.5rem 1fr 2.6rem; } .head .btn.quiet { order: 3; } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } .ring .seg { animation: none; } }
input.inl, select.inl { display: inline-block; width: auto; margin: 0 .35rem; } input.w5 { width: 5rem; } input.w12 { width: 12rem; } .selfend { align-self: end; }
@media print { .panel { break-inside: avoid; border-color: #999; } .dash { display: block; } .panel { margin-bottom: .6rem; } }

/* week plan */
.wday.tight { border-color: var(--red); background: #FBF3F1; } .suggest { padding: .5rem 0; border-top: 1px solid var(--line); } .suggest + .suggest { margin-top: .2rem; } .pair select { flex: 1; margin: 0; }
/* dense job lists (maintenance) and the bulk-action bar */
.jobs { background: var(--card); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 1rem; overflow: hidden; }
.jhead { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem .4rem; background: var(--warm); border-bottom: 1px solid var(--line); }
.jhead h2 { margin: 0; font-size: 1.1rem; } .jhead .jsub { margin-left: auto; font-size: .82rem; color: var(--stone); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jobs > p.muted { margin: .3rem .7rem; }
.jrow { display: grid; grid-template-columns: 1.3rem auto minmax(0, 1fr) 5.5rem 5rem; gap: .25rem .55rem; align-items: center; padding: .22rem .6rem; border-top: 1px solid var(--line); border-left: 3px solid var(--mist); min-height: 2.1rem; }
.jrow:first-of-type { border-top: 0; } .jrow:hover { background: var(--warm); }
.jrow.open { border-left-color: var(--moss); } .jrow.progress { border-left-color: var(--green-ink); } .jrow.materials { border-left-color: var(--gold); } .jrow.scheduled, .jrow.scheduling { border-left-color: var(--sage); } .jrow.late { border-left-color: var(--red); }
.jrow.late .jtitle { color: var(--red); } .jrow.guide-late { border-left-color: var(--gold); } .jrow.guide-late .jtitle { color: var(--amber); }
.pick { display: inline-flex; align-items: center; justify-content: center; margin: 0; } .pick input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--forest); cursor: pointer; }
.place.sm { min-width: 2.1rem; max-width: 7rem; height: 1.7rem; font-size: .85rem; border-radius: 5px; padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.7rem; text-align: center; }
.jmain { display: flex; align-items: center; gap: .5rem; min-width: 0; white-space: nowrap; overflow: hidden; }
.jtitle { font-weight: 600; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto; max-width: 62%; } a.jtitle:hover { text-decoration: underline; }
.jchips { display: inline-flex; gap: .3rem; flex: 0 1 auto; min-width: 0; overflow: hidden; } .jchips:empty { display: none; } .jchips .badge { font-size: .66rem; padding: .12rem .45rem; } .badge.quiet { background: transparent; border: 1px solid var(--line); color: var(--stone); }
.jstate { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--stone); font-size: .82rem; } .jstate .lodge-state { background: none; padding: 0; margin: 0; font-size: inherit; border: 0; }
.jstate .lodge-state.bad { color: var(--red); } .jstate .lodge-state.busy { color: var(--amber); }
.jwho { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jage { text-align: right; white-space: nowrap; }
.bulkbar { position: sticky; bottom: .6rem; z-index: 5; display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; margin: 1rem 0; padding: .55rem .8rem; background: var(--forest); color: var(--cream); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.bulkbar[hidden] { display: none; } .bulkbar .bcount { font-size: .9rem; margin-right: .3rem; } .bulkbar .bcount b { font-size: 1.05rem; }
.bulkbar .btn { margin: 0; } .bulkbar .btn:not(.primary) { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.45); } .bulkbar .btn.quiet { border-color: transparent; }
.bulkbar .pair { display: inline-flex; gap: .3rem; align-items: center; } .bulkbar select { width: auto; max-width: 11rem; padding: .3rem .4rem; font-size: .85rem; margin: 0; }
form.filters input[type=search] { margin-top: .2rem; width: 12rem; padding: .4rem .5rem; font-size: .9rem; }
@media (max-width: 700px) {
  .jrow { grid-template-columns: 1.3rem auto minmax(0, 1fr) 4.2rem; } .place.sm { max-width: 4.5rem; } .jage { display: none; } .jstate { display: none; } .jmain { flex-wrap: wrap; white-space: normal; } .jtitle { min-width: 0; }
  .bulkbar { bottom: calc(3.6rem + env(safe-area-inset-bottom)); border-radius: 10px; margin: 1rem 0 0; }
  form.filters { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; align-items: end; } form.filters select { width: 100%; min-width: 0; } form.filters input[type=search] { width: 100%; } form.filters label:first-child { grid-column: span 2; }
}
.order > .pick { align-self: center; margin-right: .2rem; } h2.between .pick { vertical-align: middle; margin-right: .2rem; } h2.between .pick input { width: 1.05rem; height: 1.05rem; }
.bulkbar input[type=text], .bulkbar input:not([type]), .bulkbar input[type=date] { width: auto; max-width: 11rem; padding: .3rem .4rem; font-size: .85rem; margin: 0; }
.scstate { padding: .5rem .7rem; border-radius: 6px; background: var(--warm); font-size: .95rem; } .scstate.good { background: var(--green-bg); } .scstate.bad { background: var(--red-bg); } .scstate.warm { background: var(--amber-bg); }
.scstate .badge { margin-right: .3rem; vertical-align: middle; } div.inl { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } div.inl form { margin: 0; }
details.card.slots > summary { cursor: pointer; } details.card.slots > summary h2 { display: inline; }
/* orders as one line each */
.jrow.orow { grid-template-columns: 1.3rem minmax(3.4rem, auto) minmax(0, 1fr) 8.5rem 11rem auto; }
.jrow.orow.ordered { border-left-color: var(--gold); } .jrow.orow.requested { border-left-color: var(--mist); } .jrow.orow.late { border-left-color: var(--red); }
.oref .ref { font-size: .7rem; white-space: nowrap; margin-right: 0; } .owho, .osup { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oact { display: inline-flex; gap: .3rem; justify-content: flex-end; } .oact form { margin: 0; } .oact .btn { margin: 0; padding: .22rem .55rem; font-size: .78rem; }
.jmain .jtitle { font-weight: 600; } .jchips a.badge { text-decoration: none; }
@media (max-width: 700px) { .jrow.orow { grid-template-columns: 1.3rem auto minmax(0, 1fr); } .jrow.orow .owho, .jrow.orow .osup { display: none; } .jrow.orow .oact { grid-column: 1 / -1; justify-content: flex-start; padding-left: 1.6rem; flex-wrap: wrap; } .jrow.orow .jmain { flex-wrap: wrap; white-space: normal; } .jrow.orow .jtitle { max-width: 100%; } .jrow.orow .jstate { display: none; } .bulkbar .pair { flex-wrap: wrap; } .bulkbar input, .bulkbar select { max-width: 100%; } }
/* documents library */
table.library tr.lhead th { background: var(--warm); text-align: left; padding: .4rem .6rem; font-family: var(--serif); font-weight: 500; font-size: 1rem; } table.library tr.lsub td { padding: .2rem .6rem 0; border: 0; } table.library td { padding: .3rem .6rem; }
form.find select { margin: 0; width: auto; max-width: 14rem; padding: .4rem .5rem; font-size: .9rem; }
/* my jobs: to-do lines, tick buttons, one-line add */
.jrow.todo { grid-template-columns: 1.3rem 1.6rem minmax(0, 1fr) 6rem auto; } .jrow.check { grid-template-columns: 1.6rem minmax(0, 1fr) 6rem auto; } .jrow.todo .sel { display: flex; align-items: center; } .jrow.todo .sel input { margin: 0; width: auto; accent-color: var(--moss); }
.bulkbar select { padding: .25rem .4rem; font-size: .85rem; max-width: 12rem; } .jrow.todo.done .jtitle { text-decoration: line-through; }
.jrow.todo.late { border-left-color: var(--red); } .jrow.todo.now { border-left-color: var(--gold); } .jrow.todo.check { border-left-color: var(--sage); } .jrow.check { border-left-color: var(--gold); }
.tickbtn { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid var(--moss); background: var(--card); color: transparent; font-size: .75rem; line-height: 1; cursor: pointer; padding: 0; } .tickbtn:hover { color: var(--forest); background: var(--green-bg); } .tickbtn.on { background: var(--moss); color: var(--cream); border-color: var(--moss); }
.addline { display: flex; gap: .4rem; align-items: center; padding: .4rem .6rem .5rem; border-top: 1px solid var(--line); background: var(--warm); } .addline input { margin: 0; padding: .4rem .55rem; font-size: .9rem; } .addline input[name=title] { flex: 1; min-width: 0; } .addline input[type=date] { width: 10rem; } .addline .btn { margin: 0; }
details.ask { display: inline-block; } details.ask summary { list-style: none; display: inline-block; } details.ask summary::-webkit-details-marker { display: none; } details.ask[open] form.inline { display: inline-flex; gap: .3rem; margin-left: .3rem; } details.ask input, details.ask select { margin: 0; padding: .25rem .4rem; font-size: .85rem; width: auto; } details.ask input { width: 12rem; }
.oact.answerline { display: flex; gap: .3rem; align-items: center; } .oact.answerline input { margin: 0; padding: .3rem .5rem; font-size: .9rem; width: 18rem; max-width: 40vw; }
details.donelist { padding: .3rem .6rem .5rem; } details.donelist summary { cursor: pointer; }
@media (max-width: 700px) { .jrow.todo { grid-template-columns: 1.3rem 1.6rem minmax(0, 1fr) auto; } .jrow.check { grid-template-columns: 1.6rem minmax(0, 1fr) auto; } .jrow.todo .oact, .jrow.check .oact { grid-column: 1 / -1; padding-left: 1.9rem; } .oact.answerline input { max-width: none; flex: 1; } .addline { flex-wrap: wrap; } .addline input[name=title] { flex-basis: 100%; } }
/* routine job lines */
a.jrow.jobline { grid-template-columns: 1.6rem minmax(0, 1fr) 8rem; text-decoration: none; color: inherit; } a.jrow.jobline:hover .jtitle { text-decoration: underline; }
.jrow.jobline.late { border-left-color: var(--red); } .jrow.jobline.now { border-left-color: var(--gold); } .jrow.jobline .jk { width: .6rem; height: .6rem; border-radius: 50%; background: var(--moss); display: inline-block; } .jrow.jobline .jk.hs { background: var(--red); border-radius: 2px; }
details.jobs > summary.jhead { cursor: pointer; list-style: none; } details.jobs > summary.jhead::-webkit-details-marker { display: none; } details.jobs > summary.jhead h2::before { content: '▸ '; color: var(--stone); font-size: .9rem; } details.jobs[open] > summary.jhead h2::before { content: '▾ '; }
.jrow.check { grid-template-columns: 1.6rem minmax(0, 1fr) 5rem auto; align-items: start; padding-top: .45rem; padding-bottom: .45rem; } .jrow.check .jmain { flex-wrap: wrap; white-space: normal; } .jrow.check .jtitle { max-width: 100%; } .jrow.check .jstate { flex-basis: 100%; white-space: normal; overflow: visible; }
/* search */
form.navsearch { margin: 0; } form.navsearch input { margin: 0; width: 8.5rem; padding: .3rem .55rem; font-size: .8rem; letter-spacing: 0; text-transform: none; border-radius: 99px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1); color: var(--cream); } form.navsearch input::placeholder { color: rgba(255,255,255,.6); } form.navsearch input:focus { background: #fff; color: var(--forest); width: 13rem; }
a.jrow.hit { grid-template-columns: .4rem minmax(0, 1fr) 6rem; text-decoration: none; color: inherit; } a.jrow.hit:hover .jtitle { text-decoration: underline; } .head .actions form.find { display: inline-flex; }
@media (max-width: 700px) { form.navsearch { display: none; } }
/* certificate grid: book links and booked cells */
table.certgrid td.cert { position: relative; } table.certgrid td.cert a.booklink { display: inline-block; position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); width: auto; margin: 0; font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .45rem; border-radius: 99px; background: var(--card); color: var(--forest); border: 1px solid var(--line); } table.certgrid td.cert a.booklink:hover { background: var(--warm); }
table.certgrid td.cert.hasbooking a:not(.booklink) { background: var(--green-bg); color: var(--green-ink); } table.certgrid td.cert .badge.green { font-size: .6rem; padding: .05rem .4rem; background: var(--moss); color: var(--cream); }
.jrow.followup { grid-template-columns: .4rem minmax(0, 1fr) 11rem auto; border-left-color: var(--gold); }
.lodge-state.free { color: var(--green-ink); background: var(--green-bg); }
/* enquiries as an inbox: a tight list on the left, the open email on the right */
.inbox { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: .9rem; align-items: start; }
.inbox-list { background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
a.mail { display: block; padding: .4rem .7rem .45rem; border-top: 1px solid var(--line); border-left: 3px solid var(--moss); text-decoration: none; color: inherit; }
a.mail:first-child { border-top: 0; } a.mail:hover { background: var(--warm); } a.mail.on { background: var(--warm); border-left-color: var(--gold); } a.mail.urgent { border-left-color: var(--red); } a.mail.trouble { border-left-color: var(--amber); }
.mtop { display: flex; align-items: center; gap: .35rem; min-width: 0; } .mtop strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; font-size: .95rem; } .mtop .badge { font-size: .6rem; padding: .05rem .4rem; flex: none; } .mwhen { margin-left: auto; font-size: .78rem; color: var(--stone); white-space: nowrap; flex: none; }
.mline { display: flex; gap: .5rem; min-width: 0; font-size: .86rem; line-height: 1.35; margin-top: .1rem; } .msubject { flex: 0 1 auto; max-width: 48%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--forest); font-weight: 500; } .msummary { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--stone); } .mbox { flex: none; font-size: .75rem; }
.inbox-pane { position: sticky; top: .8rem; max-height: calc(100vh - 1.6rem); overflow: auto; background: var(--cream); border-radius: 8px; min-height: 12rem; } .inbox-pane .pane-empty { padding: 2rem 1rem; text-align: center; font-size: .95rem; } .inbox-pane.loading { opacity: .6; }
.inbox-pane .embedded > .head h1 { font-size: 1.3rem; } .inbox-pane .embedded .back { display: none; } .inbox-pane .embedded .two { grid-template-columns: 1fr; } .inbox-pane .card { margin-bottom: .6rem; }
@media (max-width: 999px) { .inbox { grid-template-columns: 1fr; } .inbox-pane { display: none; } }
/* contacting a contractor */
.contactrow { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; } .contactrow form.inline { margin: 0; } .contactrow .btn { margin: 0; }
details.emailask { display: inline-block; } details.emailask summary { list-style: none; } details.emailask summary::-webkit-details-marker { display: none; } details.emailask[open] { display: block; flex-basis: 100%; } details.emailask form.stack { margin: .4rem 0 0; padding: .6rem .7rem; background: var(--warm); border-radius: 6px; max-width: 40rem; } details.emailask textarea { font-size: .9rem; }
ul.plines.contractors li { display: block; } ul.plines.contractors li > div { margin-bottom: .1rem; }
/* Deep cleans: one job across every lodge */
table.bytask td, table.bytask th { padding: .3rem .6rem; } table.bytask tr.overdue td:first-child a { color: var(--red); } table.bytask tr.free td:first-child { background: var(--green-bg); } table.bytask .badge.quiet { font-size: .72rem; }
/* The More menu in groups, two columns */
/* The More menu is a map of the hub: areas flow into balanced columns (no tall gaps beside a short area), each
   page listed once, sentence case so fifty pages read as a list rather than a wall of capitals. */
nav.top { position: relative; } nav .links details.more:has(.menu.grouped) { position: static; }
nav .links details.more .menu.grouped { display: block; columns: 4 12rem; column-gap: 1.6rem; column-fill: balance; padding: .8rem 1.1rem .5rem; width: min(58rem, calc(100vw - 2rem)); top: calc(100% + 2px); right: 1rem; border-top-left-radius: 0; border-top-right-radius: 0; letter-spacing: 0; text-transform: none; }
nav .links details.more .mgroup { display: block; break-inside: avoid; page-break-inside: avoid; margin: 0 0 1rem; }
nav .links details.more .mgroup h4 { margin: 0 0 .3rem; padding: 0 0 .22rem; border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .98rem; letter-spacing: 0; text-transform: none; color: var(--gold-lt); display: flex; align-items: center; gap: .4rem; }
nav .links details.more .menu.grouped .mgroup h4 a { display: inline-flex; align-items: center; gap: .4rem; padding: 0; margin: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; border: 0; border-radius: 0; background: none; } nav .links details.more .menu.grouped .mgroup h4 a.on { background: none; color: #fff; } nav .links details.more .menu.grouped .mgroup h4 a:hover { background: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
nav .links details.more .mgroup.lone h4 { border-bottom-color: transparent; margin-bottom: 0; }
nav .links details.more .menu.grouped a { display: flex; align-items: center; gap: .45rem; padding: .22rem .4rem; margin: 0 -.4rem; border-radius: 4px; font-size: .87rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.25; white-space: normal; color: var(--mist); } nav .links details.more .menu.grouped a .badge { font-size: .62rem; padding: .06rem .4rem; }
nav .links details.more .mfoot { column-span: all; border-top: 1px solid var(--moss); margin-top: .1rem; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .1rem 1rem; }
nav .links details.more .mfoot a { margin: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1180px) { nav .links details.more .menu.grouped { columns: 3 12rem; } }
@media (max-width: 900px) { nav .links details.more .menu.grouped { columns: 2 12rem; } }
.pagegroups { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .4rem 1rem; } .pagegroup h4 { margin: .2rem 0 .1rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1rem; color: var(--moss); } .pagegroup p { margin: 0 0 .3rem; display: flex; flex-wrap: wrap; gap: .3rem; }

/* Website and members */
.candidate { padding: .5rem .65rem; border-left: 3px solid var(--moss); margin-bottom: .45rem; background: #fff; border-radius: 0 6px 6px 0; }
.candidate.invited { border-left-color: var(--stone); opacity: .85; }
.candidate .cname { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: 1rem; }
.candidate .why-list { display: flex; flex-wrap: wrap; gap: .25rem .35rem; margin: .3rem 0 .45rem; }
.candidate .why { font-size: .8rem; background: var(--warm); border-radius: 99px; padding: .08rem .55rem; color: var(--forest); }
.candidate .cact { display: flex; flex-wrap: wrap; gap: .35rem; }
form.tierform { display: inline-flex; gap: .3rem; align-items: center; } form.tierform select { margin: 0; padding: .3rem .4rem; }
table.webrows input, table.webrows select { margin: 0; } table.webrows td { padding: .25rem .35rem; vertical-align: middle; }

/* Facts pulled out of a notice (To look at) */
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: .4rem 0 .6rem; font-size: .92rem; } dl.facts dt { color: var(--stone); } dl.facts dd { margin: 0; }
.tab b.red { background: var(--red); color: #fff; }
/* planning overview: headers stay on one line; the Needs column takes what is left */
table.plan th, table.plan td:first-child { white-space: nowrap; } table.plan td:last-child { min-width: 9rem; } table.plan td { vertical-align: top; }
/* compact registers (Equipment, Parts): one short line per item, group rows for the place */
table.compact th, table.compact td { padding: .32rem .5rem; vertical-align: middle; line-height: 1.3; } table.compact thead th { white-space: nowrap; } table.compact td.clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.compact td.nowrap, table.compact th.nowrap { white-space: nowrap; }
table.compact tr.grp th { background: var(--cream); font: 600 .95rem/1.2 var(--serif); text-transform: none; letter-spacing: 0; color: var(--forest); padding: .5rem .5rem .35rem; border-top: 1px solid var(--line); } table.compact tr.grp th a { text-decoration: none; }
table.compact tr.editing td { background: var(--amber-bg); } table.compact .btn.small { padding: .15rem .5rem; margin: 0; } table.compact form.inline { display: inline; }
table.history td { vertical-align: top; } table.history td:nth-child(1), table.history td:nth-child(2), table.history td:nth-child(4), table.history td:nth-child(5), table.history th { white-space: nowrap; } table.history td:nth-child(3) { min-width: 16rem; } table.history input.w6 { width: 5.5rem; }
.plines li form.inline { display: inline-flex; gap: .4rem; align-items: center; margin-left: .4rem; flex-wrap: wrap; } .plines li form.inline select { width: auto; max-width: 22rem; margin: 0; padding: .25rem .5rem; font-size: .9rem; } .plines li form.inline .btn { margin: 0; }
form.placeform label.tick { flex-wrap: nowrap; } table.history tr.h-record td:nth-child(2) b { color: var(--forest); } table.history tr.h-deep td:nth-child(2) b, table.history tr.h-part td:nth-child(2) b, table.history tr.h-cert td:nth-child(2) b { font-weight: 500; } table.history td.nowrap { white-space: nowrap; }
table.plan td:last-child .badge { white-space: normal; text-align: left; margin: 0 .25rem .25rem 0; line-height: 1.3; }
form.find { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } form.find label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; } form.find input.w5 { width: 4.5rem; max-width: 4.5rem; }
.badge.kind-midstay { background: #e8e4f3; color: #4a3f7a; }
input.w6 { width: 7rem; display: inline-block; }
td.nowrap { white-space: nowrap; }
.days.breaks { gap: .4rem .8rem; } .days.breaks label { display: flex; flex-direction: column; font-size: .85rem; } .days.breaks input { margin-top: .15rem; }
.pair.due { display: flex; gap: .4rem; } .pair.due input[type=date] { flex: 1 1 10rem; min-width: 9.5rem; } .pair.due input[type=time] { flex: 0 0 7rem; width: 7rem; }

.emailframe { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 6px; background: #f4f1ea; }
fieldset.section { margin: .6rem 0; } fieldset.section legend { font-weight: 600; }
table.temps input { width: 5.5rem; display: inline-block; margin-right: .3rem; } table.temps input.action { width: 11rem; }
table.allergens th.rot { height: 8.5rem; vertical-align: bottom; white-space: nowrap; width: 1.6rem; padding: 0 .1rem .3rem; } table.allergens th.rot span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 500; font-size: .72rem; line-height: 1.4rem; max-height: 8rem; overflow: hidden; text-overflow: ellipsis; } table.allergens td.alnotes { min-width: 10rem; white-space: normal; }
table.allergens td.al { text-align: center; width: 1.6rem; } table.allergens td.al.yes { background: var(--red-bg); color: var(--red); font-weight: 700; } table.allergens td.al.may { color: var(--amber); }
table.pack td, table.pack th { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media print { .noprint, nav, .topbar, .flash, form.noprint { display: none !important; } body { background: #fff; } .card { break-inside: avoid; box-shadow: none; } }
table.temps th { white-space: nowrap; } table.temps td:first-child { min-width: 9rem; } table.temps td:nth-child(2) { min-width: 6rem; white-space: nowrap; }
table.temps input, table.temps input.action { display: block; width: 100%; min-width: 7rem; max-width: 14rem; margin: .15rem 0; } table.temps input.action { font-size: .8rem; }
.two > section, .two > div, .two > form { min-width: 0; } .scroll { max-width: 100%; }
.card.legal h1 { font-size: 1.5rem; } .card.legal h2 { font-size: 1.1rem; margin-top: 1.2rem; } .card.legal p, .card.legal li { font-size: .95rem; line-height: 1.5; } .card.legal ul { padding-left: 1.2rem; }
.card.start h2 { margin-bottom: .3rem; }
.mailrow { display: flex; align-items: stretch; gap: 0; position: relative; } .mailrow .pick { display: flex; align-items: center; padding: 0 .45rem 0 .3rem; cursor: pointer; } .mailrow .pick input { width: 1rem; height: 1rem; margin: 0; }
.mailrow a.mail { flex: 1; min-width: 0; } .mailrow button.quick { align-self: center; margin-right: .4rem; font: inherit; font-size: .72rem; padding: .25rem .5rem; border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--stone); cursor: pointer; opacity: 0; transition: opacity .12s; white-space: nowrap; }
.mailrow:hover button.quick, .mailrow:focus-within button.quick, .mailrow a.mail.on ~ button.quick { opacity: 1; } .mailrow button.quick:hover { color: var(--forest); border-color: var(--forest); }
@media (hover: none) { .mailrow button.quick { opacity: 1; } }
.mailhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .6rem; border-bottom: 1px solid var(--line); background: var(--cream); } .mailhead label.tick { margin: 0; } .mailhead .keys b { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 600; padding: 0 .15rem; border: 1px solid var(--line); border-radius: 3px; }
@media (max-width: 999px) { .mailhead .keys { display: none; } }
details.reply summary { cursor: pointer; } details.reply summary h2 { display: inline; }

/* The conversation so far: earlier emails in the exchange, folded; ours sit on a green edge. */
.card.convo details.turn { border-left: 3px solid var(--line); padding: .25rem .6rem; margin: .3rem 0; }
.card.convo details.turn.ours { border-left-color: var(--forest); background: color-mix(in srgb, var(--forest) 6%, transparent); }
.card.convo details.turn summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: baseline; }
.card.convo details.turn summary::-webkit-details-marker { display: none; }
.card.convo details.turn summary::before { content: '▸'; color: var(--stone); font-size: .8em; } .card.convo details.turn[open] summary::before { content: '▾'; }
.card.convo details.turn .tsubj { flex: 1 1 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.convo details.turn pre.mail { margin: .4rem 0 .2rem; max-height: 18rem; overflow: auto; }
.badge.convo { font-variant-numeric: tabular-nums; }
/* 1.84.0 the meter round: the boxes a reading is typed in, on a clean and on the office's page; the email as it will go */
.meterform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .45rem .7rem; margin: .45rem 0 .2rem; } .meterform label.small:not(.tick) { display: flex; flex-direction: column; gap: .15rem; } .meterform input[inputmode] { width: 7.5rem; margin: 0; } .meterform label.tick { margin: 0 0 .5rem; flex: 0 1 auto; flex-wrap: nowrap; } .meterform .btn { margin: 0; }
/* 1.85.0: the inventory price list, and "how many" beside a replaced item in an owner's home */
.inv .irow .howmany { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin: 0; } .inv .irow .howmany input { width: 4.5rem; margin: 0; }
@supports selector(:has(a)) { .inv .irow .howmany { display: none; } .inv .irow:has(input[value=replaced]:checked) .howmany { display: flex; } }
.pricerow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem .6rem; padding: .45rem 0; border-top: 1px solid var(--line); max-width: none; } .pricerow label { margin: 0; font-size: .82rem; display: flex; flex-direction: column; gap: .12rem; } .pricerow input, .pricerow select { margin: 0; } .pricerow .pname { flex: 1 1 14rem; min-width: 0; } .pricerow label.pname input { width: 100%; } .pricerow input.money, .pricerow span.money { width: 6.5rem; } .pricerow select, .pricerow span.pvat { width: 6.6rem; } .pricerow input.proom, .pricerow span.proom { width: 8rem; } .pricerow input.pcode, .pricerow span.pcode { width: 6.5rem; } .pricerow .btn { margin: 0; } .pricerow .what { flex: 1 1 14rem; margin: 0; align-self: center; }
.pricerow.tight { align-items: center; padding: .3rem 0; } .pricerow.tight input, .pricerow.tight select { padding-top: .3rem; padding-bottom: .3rem; } .pricerow.pricehead { border-top: none; padding-bottom: .1rem; } .pricerow.pricehead .pbtns { width: 8.1rem; } .pricerow.pricehead + .pricerow { border-top: none; }
@media (max-width: 760px) { .pricerow.pricehead { display: none; } .pricerow.tight .pname { flex-basis: 100%; } }
details.meterline { margin-left: 0; } details.meterline[open] { display: block; margin-top: .45rem; } .hkrow details.meterline { grid-column: 1 / -1; justify-self: start; } .hkrow details.meterline[open] { justify-self: stretch; }
.emailprev { white-space: pre-wrap; font: inherit; font-size: .88rem; background: var(--cream); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; margin: .4rem 0 .7rem; }
/* 1.83.0 Booking colours by source: a stay's bar, the grid's key and the swatches on Settings, Booking colours */
.bar.stay.c-teal, .legendrow .key.c-teal, .swatch.c-teal { background: #1F6F78; color: #fff; } .bar.stay.c-blue, .legendrow .key.c-blue, .swatch.c-blue { background: #2563A8; color: #fff; } .bar.stay.c-indigo, .legendrow .key.c-indigo, .swatch.c-indigo { background: #4B4FA6; color: #fff; } .bar.stay.c-purple, .legendrow .key.c-purple, .swatch.c-purple { background: #6B4A9E; color: #fff; } .bar.stay.c-plum, .legendrow .key.c-plum, .swatch.c-plum { background: #8E3B6D; color: #fff; } .bar.stay.c-rust, .legendrow .key.c-rust, .swatch.c-rust { background: #A2401F; color: #fff; } .bar.stay.c-brown, .legendrow .key.c-brown, .swatch.c-brown { background: #7A5A2E; color: #fff; } .bar.stay.c-olive, .legendrow .key.c-olive, .swatch.c-olive { background: #5E6B1F; color: #fff; } .bar.stay.c-charcoal, .legendrow .key.c-charcoal, .swatch.c-charcoal { background: #3F4347; color: #fff; }
.colrow { border-top: 1px solid var(--line); padding: .7rem 0 .6rem; } .colrow .what { margin: 0 0 .4rem; } .swatches { display: flex; flex-wrap: wrap; gap: .35rem .45rem; } .swatchpick { display: inline-flex; align-items: center; cursor: pointer; position: relative; } .swatchpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch { display: inline-block; padding: .22rem .7rem; border-radius: 6px; font-size: .84rem; line-height: 1.4; border: 2px solid transparent; } .swatch.asnow { background: var(--moss); color: var(--cream); } .swatchpick input:checked + .swatch { border-color: var(--forest); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold); } .swatchpick input:focus-visible + .swatch { outline: 2px solid var(--gold); outline-offset: 3px; }
/* 1.82.0 Home: the other hub's day in four numbers, for someone linked at more than one */
.otherhubs h2 { margin-bottom: .2rem; } .otherhub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .5rem 0; border-top: 1px solid var(--line); } .otherhubs h2 + .otherhub { border-top: 0; }
.otherhub .name { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; min-width: 7rem; } .otherhub .nums { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1 1 18rem; } .otherhub form { margin: 0 0 0 auto; }
.otherhub .num { display: inline-flex; align-items: baseline; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .88rem; background: #F1EBDD; white-space: nowrap; } .otherhub .num b { font-size: 1rem; } .otherhub .num.none { background: var(--green-bg); color: var(--green-ink); } .otherhub .num.bad { background: var(--red-bg); color: var(--red); }
/* 1.81.0 Your parks: the step to a person's other hub, in the More menu and on the phone's menu sheet */
nav .links details.more .menu.grouped .mgroup form { margin: 0; } nav .links details.more .menu.grouped .mgroup button.hop { display: flex; align-items: center; width: calc(100% + .8rem); text-align: left; background: none; border: 0; cursor: pointer; padding: .22rem .4rem; margin: 0 -.4rem; border-radius: 4px; font: inherit; font-size: .87rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.25; color: var(--mist); }
nav .links details.more .menu.grouped .mgroup button.hop:hover, nav .links details.more .menu.grouped .mgroup button.hop:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.sheet .pagegroup.hopgroup { border-bottom: 1px solid var(--line, #e3e0d8); padding-bottom: .5rem; margin-bottom: .2rem; } .sheet .pagegroup.hopgroup form { margin: 0; }
/* 1.80.0 Settings, Who does what: one block for each alert, the ticks under its words, who it reaches under those */
.whorow { border-top: 1px solid var(--line, #E3DDD0); padding: .7rem 0 .55rem; } .whorow .what { margin: 0 0 .35rem; line-height: 1.4; } .whorow .reach { margin: .3rem 0 0; }
.tickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .2rem .8rem; } .tickgrid label.tick { margin: 0; } .tickgrid label.muted { opacity: .6; }

/* The lodge page: tabs over panes */
.btn b.count { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 99px; background: var(--gold); color: #fff; font-size: .72rem; line-height: 1.15rem; text-align: center; margin-left: .25rem; vertical-align: middle; }
.tabs.lodgetabs { margin: .2rem 0 1rem; } .tabs.lodgetabs .tab b { display: inline-block; min-width: 1.15rem; padding: 0 .3rem; border-radius: 99px; background: var(--gold); color: #fff; font-size: .72rem; line-height: 1.15rem; text-align: center; margin-left: .2rem; } .tabs.lodgetabs .tab b.red { background: var(--red); }
.pane[hidden] { display: none; }
a.tile { text-decoration: none; color: inherit; } a.tile:hover { border-color: var(--gold); }
/* The park map */
.parkcard { padding: .6rem .8rem .8rem; } .parkwrap { width: 100%; overflow: hidden; border-radius: 10px; position: relative; }
/* the pop-up over a pin: today's line and the two or three things worth knowing; app.js places it by the pin */
.parkwrap .pop { position: absolute; z-index: 5; width: 15.5rem; max-width: calc(100% - 1rem); background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: .55rem .7rem .5rem; font-size: .85rem; pointer-events: none; }
.parkwrap .pop b { display: block; font-family: var(--serif); font-size: 1.05rem; } .parkwrap .pop b .muted { font-family: var(--sans); font-size: .8rem; font-weight: 400; }
.parkwrap .pop .popline { display: block; margin: .1rem 0 .3rem; } .parkwrap .pop ul.plines { margin: 0 0 .3rem; } .parkwrap .pop ul.plines li { padding: .15rem .5rem; font-size: .82rem; } .parkwrap .pop em { display: block; font-style: normal; margin-top: .2rem; }
.parkwrap .pop::after { content: ''; position: absolute; left: var(--arrow, 50%); bottom: -7px; width: 12px; height: 12px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-50%) rotate(45deg); } .parkwrap .pop.below::after { bottom: auto; top: -7px; transform: translateX(-50%) rotate(225deg); }
@media (hover: none) { .parkwrap .pop { display: none !important; } }
svg.parkmap { width: 100%; height: auto; display: block; background: var(--cream); border-radius: 10px; touch-action: none; }
svg.parkmap .ground { fill: #e9ecdf; stroke: var(--line); }
svg.parkmap .pin { cursor: pointer; } svg.parkmap .pin rect { fill: #cfd6c4; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.18)); } svg.parkmap .pin text { font: 600 15px/1 'Jost', ui-sans-serif, system-ui, sans-serif; fill: #1b2a1b; text-anchor: middle; pointer-events: none; }
svg.parkmap .pin:hover rect, svg.parkmap .pin:focus rect { stroke: var(--gold); stroke-width: 3; }
svg.parkmap .pin.kind-staying rect, svg.parkmap .pin.kind-longstay rect { fill: #3f6b47; } svg.parkmap .pin.kind-staying text, svg.parkmap .pin.kind-longstay text { fill: #fff; }
svg.parkmap .pin.kind-changeover rect { fill: #b88a2a; } svg.parkmap .pin.kind-changeover text { fill: #fff; }
svg.parkmap .pin.kind-arrival rect { fill: #d9b25f; } svg.parkmap .pin.kind-departure rect { fill: #e7d6a6; }
svg.parkmap .pin.kind-closed rect, svg.parkmap .pin.kind-unseen rect { fill: #9a9a93; } svg.parkmap .pin.kind-closed text, svg.parkmap .pin.kind-unseen text { fill: #fff; }
svg.parkmap .pin.kind-empty rect { fill: #f3f1e8; stroke: #c9cbbd; }
svg.parkmap .pin.is-done rect { stroke: #3f6b47; stroke-width: 3; }
svg.parkmap .dot { stroke: #fff; stroke-width: 1.5; } svg.parkmap .dot.urgent, svg.parkmap .dot.cert { fill: var(--red); } svg.parkmap .dot.jobs, svg.parkmap .dot.deep, svg.parkmap .dot.tub { fill: var(--gold); }
svg.parkmap.moving .pin { cursor: grab; } svg.parkmap.moving .pin.dragging { cursor: grabbing; } svg.parkmap.moving .pin rect { stroke-dasharray: 4 3; }
.legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .6rem 0 .2rem; color: var(--stone); } .legend .lg::before { content: ''; display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -.1rem; background: #cfd6c4; border: 1px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.legend .kind-staying::before { background: #3f6b47; } .legend .kind-changeover::before { background: #b88a2a; } .legend .kind-arrival::before { background: #d9b25f; } .legend .kind-departure::before { background: #e7d6a6; } .legend .kind-empty::before { background: #f3f1e8; } .legend .kind-closed::before { background: #9a9a93; }
.legend .dot-urgent, .legend .dot-jobs, .legend .dot-cert, .legend .dot-deep, .legend .dot-tub { color: var(--stone); } .legend [class*="dot-"]::before { display: none; } .legend .dot-urgent, .legend .dot-cert { color: var(--red); } .legend .dot-jobs, .legend .dot-deep, .legend .dot-tub { color: var(--gold); }
table.parklist tr.kind-staying td:first-child b { color: #3f6b47; }
a.lodgelink { color: inherit; text-decoration: none; display: inline-flex; flex-direction: column; } a.lodgelink:hover .num { color: var(--gold); }

/* Hot tubs */
.tubin { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; } .tubin input:not([type=checkbox]) { width: 5.2rem; padding: .3rem .4rem; } .tubin input.tubnote { width: 11rem; } .tubin label.tick { margin: 0; }
table.tubs td { vertical-align: top; } .tubtest { margin-bottom: .25rem; } table.tubs tr.warm td:nth-child(2) b { color: var(--gold); } table.tubs tr.bad td { background: var(--red-bg, #fbebeb); }
.packunit { break-inside: avoid; margin-top: 1rem; } .packunit h3 { margin: 0 0 .3rem; }
.tile.tileform { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; } .tile.tileform button { margin-top: .1rem; }
.parkwrap.mini svg.parkmap .pin text { font-size: 17px; }
table.arrivals td.when { white-space: nowrap; width: 6rem; } table.arrivals tr.warm td.when b { color: var(--gold); } table.arrivals .note { margin-top: .25rem; }

/* Owner statements */
.card.statement .sthead { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
table.stmt { width: 100%; } table.stmt td.right, table.stmt th.right { text-align: right; font-variant-numeric: tabular-nums; } table.stmt tr.sechead th { text-align: left; padding-top: .8rem; font-family: var(--serif); font-weight: 400; font-size: 1rem; border-bottom: 1px solid var(--line); }
table.stmt tr.sub td { color: var(--stone); } table.stmt tr.total td { border-top: 1px solid var(--line); font-weight: 600; } table.stmt tr.grand td { border-top: 2px solid var(--forest); padding-top: .5rem; }
@media print { .card.statement { border: 0; box-shadow: none; } }
svg.parkmap .pin.kind-owner rect { fill: #cdd5e3; stroke: #fff; } svg.parkmap .pin.kind-owner text { fill: #2b3a55; } .legend .kind-owner::before { background: #cdd5e3; }
.ownerstmt { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1rem; align-items: start; } @media (max-width: 1000px) { .ownerstmt { grid-template-columns: 1fr; } }
table.stmt td, table.stmt th { white-space: nowrap; } table.stmt td:first-child, table.stmt th:first-child { white-space: normal; width: 100%; } table.stmt th { font-size: .7rem; }
@media print { .ownerstmt { grid-template-columns: 1fr; } .ownerstmt section + section { display: none; } }
.stat { display: flex; flex-direction: column; justify-content: center; padding: .4rem .8rem; border-radius: .5rem; background: var(--warm); border: 1px solid var(--line); } .stat b { font-size: 1.2rem; font-family: var(--serif); } .stat span { font-size: .75rem; color: var(--stone); } .stat.good { background: var(--green-bg); } .stat.warm { background: var(--amber-bg); } .stat.bad { background: var(--red-bg); }
.btn.warn { border-color: var(--red); color: var(--red); }
table.library td:last-child { white-space: nowrap; }

/* the calendar */
.cal .chead { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding: 0 .2rem .3rem; }
.cgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cday .more { font-size: .7rem; color: var(--forest); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; } .cday .morelist { display: flex; flex-direction: column; gap: .15rem; }
.cday { min-height: 6.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: .25rem .3rem; font-size: .78rem; display: flex; flex-direction: column; gap: .15rem; }
.cday.pad { background: transparent; border-color: transparent; } .cday.wk { background: var(--cream); } .cday.today { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cnum { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--serif); font-size: 1rem; } .cnum .cadd { color: var(--stone); text-decoration: none; font-size: .9rem; opacity: 0; } .cday:hover .cadd { opacity: 1; }
.evt { display: block; padding: .1rem .35rem; border-radius: 3px; border-left: 3px solid var(--moss); background: var(--green-bg); color: var(--forest); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evt.k-training { border-left-color: var(--gold); background: var(--amber-bg); } .evt.k-visit { border-left-color: var(--sage); background: var(--mist); } .evt.k-inspection { border-left-color: var(--red); background: var(--red-bg); } .evt.k-other { border-left-color: var(--stone); background: var(--warm); } .evt.isdone { opacity: .55; text-decoration: line-through; }
.hubitem { display: block; color: var(--stone); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .35rem; border-left: 2px dotted var(--field); }
.hubitem.i-work { border-left-color: var(--moss); } .hubitem.i-renewal { border-left-color: var(--gold); } .hubitem.i-review { border-left-color: var(--red); } .hubitem.i-away { border-left-color: var(--stone); }
.hubitem.i-cert, .hubitem.i-routine { border-left: 2px solid var(--red); } .hubitem.i-guide { border-left: 2px dashed var(--amber); color: var(--amber); } .hubitem.i-visit { border-left: 2px solid var(--moss); } .hubitem.i-change { border-left: 2px solid var(--forest); font-weight: 600; color: var(--forest); } .hubitem.i-deep { border-left-color: var(--gold); } .hubitem.i-lapse { border-left: 2px solid var(--amber); }
.viewswitch { display: flex; flex-wrap: wrap; gap: .35rem; margin: -.2rem 0 .3rem; } .viewswitch .vw { display: inline-block; padding: .3rem .8rem; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--forest); text-decoration: none; font-size: .85rem; font-weight: 600; } .viewswitch .vw:hover { border-color: var(--gold); } .viewswitch .vw.on { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.legend .evt, .legend .hubitem { display: inline-block; margin-right: .3rem; }
.who legend { font-weight: 600; font-size: .85rem; } .who .chips.wrap { display: flex; flex-wrap: wrap; gap: .2rem .8rem; margin: .3rem 0; } .evlist td.nowrap { white-space: nowrap; }
@media (max-width: 700px) { .cday { min-height: 3.2rem; font-size: .7rem; } .evt, .hubitem { font-size: .65rem; } .cal .chead div { font-size: .6rem; } }
@media print { .cday { min-height: 5rem; } .cnum .cadd { display: none; } }
.notepad textarea { font-family: var(--sans); line-height: 1.5; min-height: 20rem; }

/* ---- the phone pass (1.40.0) ---- */
.phone-only { display: none; }
.sheet { position: fixed; inset: 0; z-index: 40; background: var(--cream); overflow-y: auto; padding: .8rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
.sheet[hidden] { display: none; } .sheet-bar { display: flex; gap: .6rem; align-items: center; margin-bottom: .8rem; } .sheet-search { flex: 1; margin: 0; } .sheet-search input { margin: 0; width: 100%; }
.sheet .pagegroups { grid-template-columns: 1fr; gap: .2rem; } .sheet .pagegroup h4 { font-size: 1.05rem; margin-top: .6rem; } .sheet .pagegroup p { gap: .4rem; } .sheet .pagegroup .btn { font-size: .85rem; padding: .45rem .7rem; }
.sheet-foot { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
@media (min-width: 761px) { .sheet { display: none !important; } }
@media (max-width: 760px) {
  main { padding: .8rem .8rem 5.5rem; }
  h1 { font-size: 1.55rem; } h1 .day { display: block; margin: .15rem 0 0; font-size: .9rem; }
  .head { align-items: flex-start; } .head .actions { flex-wrap: wrap; gap: .35rem; } .head .actions .btn { margin-top: 0; padding: .35rem .6rem; font-size: .8rem; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .tile { padding: .35rem .5rem; min-width: 0; }
  .tile b { font-size: 1.2rem; } .tile span { display: block; font-size: .58rem; letter-spacing: .04em; line-height: 1.15; max-height: 2.3em; overflow: hidden; }
  .tabs.lodgetabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); } .tabs.lodgetabs::-webkit-scrollbar { display: none; } .tabs.lodgetabs .tab { flex: none; }
  .card { padding: .8rem .8rem; }
  .card table:not(.co):not(.leave):not(.cover):not(.rota) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .card table:not(.co) th { white-space: nowrap; }
  a.jrow.jobline { grid-template-columns: 1.6rem minmax(0, 1fr); } a.jrow.jobline .jage { display: inline; grid-column: 2; font-size: .72rem; }
  .jrow .jmain { white-space: normal; } .jrow .jtitle { max-width: 100%; white-space: normal; }
  /* the calendar as a list of the days that have something */
  .cal .chead { display: none; } .cgrid { display: block; } .cday { min-height: 0; margin-bottom: .4rem; padding: .4rem .6rem; font-size: .85rem; } .cday.pad, .cday:not(.has) { display: none; }
  .cnum { font-size: .95rem; } .cday .cnum span { display: none; } .cday::before { content: attr(data-label); display: block; font-family: var(--serif); font-size: 1rem; margin-bottom: .15rem; } .cday.today::before { color: var(--gold); font-weight: 600; } .cday .cnum { position: absolute; top: .35rem; right: .5rem; } .cday { position: relative; }
  .cday .cnum .cadd { opacity: 1; font-size: 1rem; }
  .evt, .hubitem { font-size: .82rem; white-space: normal; padding: .2rem .45rem; }
  .legend { display: none; } .phone-only { display: block; }
  form.filters select { min-width: 0; width: 100%; } form.filters label { width: calc(50% - .35rem); }
  .cnum { position: relative; }
}
body.sheet-open { overflow: hidden; }

@media (max-width: 760px) {
  .card table.stackable { display: block; overflow: visible; } table.stackable thead { display: none; } table.stackable tbody, table.stackable tr { display: block; } table.stackable tr { border-bottom: 1px solid var(--line); padding: .5rem 0; } table.stackable td { display: block; border: 0; padding: .15rem 0; width: auto !important; white-space: normal; }
  table.stackable td.lodge .num { font-size: 1.5rem; } table.stackable details.work summary { display: inline-block; }
}
.hubfoot { display: flex; justify-content: center; align-items: center; gap: .35rem; font-size: .72rem; color: #6B6458; padding: .4rem 0 1.2rem; } .hubfoot a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .hubfoot .pkword { letter-spacing: .08em; text-transform: uppercase; } .hubfoot .pkmark { width: 16px; height: 16px; margin: 0 .15rem; vertical-align: middle; } .hubfoot .pkname { font-weight: 600; color: #1B211E; letter-spacing: 0; font-size: .8rem; } @media (max-width: 760px) { .hubfoot { padding-bottom: 6rem; } }
.pk-login { margin: 1.2rem 0 0; text-align: center; opacity: .85; } .pk-login img { width: 136px; height: 20px; } .pk-sheet { margin-left: auto; opacity: .85; }

/* ask the hub */
.card.ask .chat { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; } .turn { padding: .6rem .9rem; border-radius: 10px; max-width: 46rem; } .turn.me { background: var(--warm); align-self: flex-end; } .turn.hub { background: var(--green-bg); border-left: 3px solid var(--moss); align-self: flex-start; } .turn p { margin: 0 0 .4rem; } .turn p:last-child { margin: 0; } .turn ol, .turn ul { margin: .2rem 0 .3rem 1.2rem; } .turn li { margin: .15rem 0; }
.askform textarea { font-family: var(--sans); } .askform .actions { align-items: center; } .askform.small textarea { margin-top: .2rem; } .askform.small .btn { margin-top: .4rem; } .asklast { margin-bottom: .5rem; font-size: .9rem; } .asklast ol, .asklast ul { margin: .2rem 0 .3rem 1.2rem; }
a.eg { display: inline-block; margin: .15rem .3rem .15rem 0; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 99px; font-size: .82rem; text-decoration: none; color: var(--forest); background: var(--card); } a.eg:hover { background: var(--warm); }
.thinking { display: flex; align-items: center; gap: .5rem; color: var(--stone); font-size: .9rem; margin: .4rem 0 .6rem; } .thinking .dots { width: 1rem; height: 1rem; border: 2px solid var(--mist); border-top-color: var(--moss); border-radius: 50%; animation: spin .8s linear infinite; flex: none; } @keyframes spin { to { transform: rotate(360deg); } }
.eglist form.inline { display: inline; } button.eg { display: inline-block; margin: .15rem .3rem .15rem 0; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 99px; font-size: .82rem; color: var(--forest); background: var(--card); cursor: pointer; font-family: inherit; } button.eg:hover { background: var(--warm); }

/* Report a problem: one line at the top of Maintenance; the rest unfolds once someone starts typing (or focuses it). */
.report.compact { padding: .55rem .8rem; }
.report .rline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.report .rline .grow { flex: 1 1 14rem; margin: 0; } .report .rline label { margin: 0; } .report .rline input, .report .rline select { margin: 0; }
.report .rline select { max-width: 12rem; }
.report .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.report.compact:not(.open):not(:focus-within) .more { display: none; }
.report .more { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .report .rline select { max-width: 100%; flex: 1 1 8rem; } }

/* Money and Laundry: the printable sheet (an invoice, a collection note) and the counting tables. */
.print-sheet { max-width: 52rem; } .print-sheet .sign { margin-top: 1.5rem; } .print-sheet .sign p { margin: .9rem 0; } .print-sheet table.compact th { text-align: left; width: 12rem; vertical-align: top; font-weight: 600; }
th.amt, td.amt { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { table.stackable td.amt { text-align: left; } }
.inv-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .inv-title { margin: 0 0 .3rem; } .inv-from { text-align: right; } .inv-to { margin: .6rem 0 1rem; }
.inv-lines { width: 100%; } .inv-lines th, .inv-lines td { padding: .35rem .5rem; } .inv-lines tfoot td { border-top: 1px solid var(--line); } .inv-lines tr.total td { border-top: 2px solid var(--forest); font-size: 1.05rem; }
.paid-stamp { display: inline-block; margin-top: .8rem; padding: .3rem .8rem; border: 2px solid var(--moss); color: var(--moss); border-radius: 6px; font-weight: 600; transform: rotate(-3deg); }
table.count td { padding: .2rem .5rem .2rem 0; vertical-align: middle; } table.count input { width: 5.5rem; margin: 0; padding: .3rem .5rem; } table.count input[name=reject_reason] { width: 100%; min-width: 9rem; }
.print-only { display: none; }
@media print { .print-only { display: block; } .print-sheet { box-shadow: none; border: 0; } .inv-from { text-align: right; } }
@media (max-width: 640px) { .inv-head { flex-direction: column; } .inv-from { text-align: left; } table.count input { width: 4rem; } }

/* Housekeeping: one row per lodge with big one-press state buttons. Its own grid: lodge, the words, the buttons. */
.jrow.hkrow { grid-template-columns: 4.6rem minmax(0, 1fr) auto; padding: .5rem .7rem; align-items: center; }
.hkrow .hklodge { display: inline-flex; flex-direction: column; text-decoration: none; color: inherit; } .hkrow .hklodge .num { font-size: 1.6rem; } .hkrow .hklodge .lodge-name { font-size: .78rem; color: var(--stone); }
.hkrow .jmain { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; white-space: normal; overflow: visible; text-align: left; } .hkrow .jstate { display: block; flex: none; white-space: normal; overflow: visible; font-size: .88rem; color: var(--ink); } .hkrow .jtitle { white-space: normal; }
.hkrow .note { display: block; font-size: .88rem; color: var(--stone); background: color-mix(in srgb, var(--gold) 12%, transparent); border-left: 3px solid var(--gold); padding: .2rem .5rem; margin: .15rem 0; }
/* 1.75.0: whose clean it is, and handing one clean to someone else for the day */
.handto { display: flex; gap: .3rem .9rem; flex-wrap: wrap; align-items: baseline; margin-top: .1rem; } .handto details.inl { margin-left: 0; } .handto summary { cursor: pointer; color: var(--stone); } .handto details[open] summary { margin-bottom: .3rem; } .handto form { margin: 0; display: inline-flex; gap: .3rem; align-items: center; } .handto select { width: auto; padding: .2rem .4rem; font-size: .85rem; margin: 0; }
a.tile.current { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); } .whocard .tiles { margin-bottom: .3rem; } .whocard .tile span { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--ink); }
.hkbtns { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; } .hkbtns form { margin: 0; } .hkbtns .btn { margin: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .jrow.hkrow { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .hkrow .jstate { display: block; }
  .hkbtns { grid-column: 1 / -1; justify-content: flex-start; } .hkbtns .btn:not(.small) { flex: 1 1 10rem; padding: .7rem 1rem; font-size: 1rem; }
}

/* Training: the matrix (people down, courses across) and the role chips on a course. */
table.matrix th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .72rem; padding: .3rem .25rem; vertical-align: bottom; } table.matrix th.rot a { color: inherit; text-decoration: none; }
table.matrix td.mcell { text-align: center; font-size: 1rem; padding: .3rem .25rem; line-height: 1.1; } table.matrix td.mcell .tiny { font-size: .65rem; }
table.matrix td.lapsed, table.matrix td.overdue { background: color-mix(in srgb, var(--red) 10%, transparent); } table.matrix td.soon, table.matrix td.said, table.matrix td.booked { background: color-mix(in srgb, var(--gold) 14%, transparent); } table.matrix td.ok, table.matrix td.done { background: color-mix(in srgb, var(--moss) 10%, transparent); }
fieldset.roles { border: 1px solid var(--line); border-radius: 8px; padding: .4rem .8rem; margin: .6rem 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; } fieldset.roles legend { font-size: .85rem; color: var(--stone); padding: 0 .3rem; } fieldset.roles label.tick { margin: 0; }
.w8 { width: 9rem; }

/* Courses built in the hub: the editor blocks, the lesson page, the test, the certificate. */
.builder fieldset.block { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .9rem .8rem; margin: .6rem 0; } .builder legend { font-weight: 600; color: var(--forest); padding: 0 .3rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; } @media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.lesson-progress { height: 6px; background: var(--mist); border-radius: 3px; margin: .2rem 0 .8rem; overflow: hidden; } .lesson-progress div { height: 100%; background: var(--moss); }
.lesson { max-width: 46rem; font-size: 1.05rem; line-height: 1.6; } .lesson h2 { margin-top: 0; } .lesson .lede { font-size: 1.1rem; color: var(--stone); } .lesson ul, .lesson ol { margin: .4rem 0 .8rem 1.3rem; } .lesson li { margin: .25rem 0; } .lesson-img { max-width: 100%; border-radius: 8px; }
/* the pictures and boxes inside a lesson (1.52.0): a drawn figure with its caption, Remember and On-the-park boxes, numbered steps as steps */
.lesson .lesson-fig { margin: .4rem 0 1rem; padding: .6rem .6rem .4rem; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; } .lesson .lesson-fig img { display: block; width: 100%; height: auto; border-radius: 6px; background: #fff; } .lesson .lesson-fig figcaption { font-size: .85rem; color: var(--stone); margin-top: .4rem; text-align: center; }
.lesson .callout { margin: .9rem 0; padding: .7rem .9rem .7rem 1rem; border-left: 4px solid var(--gold); background: var(--amber-bg); border-radius: 0 8px 8px 0; font-size: 1rem; } .lesson .callout.eg { border-left-color: var(--moss); background: var(--green-bg); } .lesson .callout-tag { display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); margin-bottom: .15rem; }
.lesson ol { counter-reset: step; list-style: none; padding-left: 0; } .lesson ol li { counter-increment: step; position: relative; padding-left: 2.4rem; margin: .45rem 0; } .lesson ol li::before { content: counter(step); position: absolute; left: 0; top: .1rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--forest); color: var(--cream); font: 600 .9rem/1.7rem var(--sans); text-align: center; }
@media (max-width: 640px) { .lesson { font-size: 1rem; } .lesson .lesson-fig { margin-left: -.4rem; margin-right: -.4rem; } }
.video { position: relative; padding-top: 56.25%; margin: .8rem 0; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.learn-nav { display: flex; justify-content: space-between; align-items: center; gap: .6rem; max-width: 46rem; }
.test fieldset.question { border: 0; border-top: 1px solid var(--line); padding: .8rem 0; margin: 0; } .test legend { font-weight: 600; padding: 0 0 .3rem; } .test .opt { display: flex; flex-direction: row; gap: .6rem; align-items: flex-start; justify-content: flex-start; text-align: left; padding: .35rem .5rem; border-radius: 6px; margin: .15rem 0; cursor: pointer; font-weight: 400; } .test .opt span { flex: 1 1 auto; } .test .opt input { width: auto; margin: .25rem 0 0; flex: none; } .test .opt:hover { background: var(--warm); } .test .opt input { margin-top: .25rem; }
.result h2 { margin-top: 0; } .wrong { border-top: 1px solid var(--line); padding: .6rem 0; } .wrong p { margin: .2rem 0; }
.cert { max-width: 46rem; margin: 0 auto; text-align: center; border: 2px solid var(--gold); padding: 2.2rem 2rem; background: var(--card); }
.cert-brand { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.6rem; } .cert-kind { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); }
.cert-lead { color: var(--stone); margin: .4rem 0; } .cert-name { font-family: var(--serif); font-size: 2.2rem; margin: .2rem 0 .6rem; color: var(--forest); } .cert-course { font-family: var(--serif); font-size: 1.5rem; margin: .2rem 0 .8rem; }
.cert-meta { margin: .4rem 0 1.2rem; } .cert-number { font-size: .9rem; margin: 1rem 0 .4rem; } .cert-small { font-size: .74rem; color: var(--stone); max-width: 36rem; margin: .6rem auto 0; } .cert-revoked { color: var(--red); font-weight: 600; }
.cert-check { margin: 2rem auto; } .cert-check .big { font-size: 1.6rem; font-weight: 600; margin: .4rem 0 .8rem; } .cert-check .big.good { color: var(--moss); } .cert-check .big.bad { color: var(--red); } .centred { text-align: center; }
@media print { .cert { border-width: 3px; box-shadow: none; } }

/* ---- phones: tables that wrapped a letter to a line (Iga, 1.51.0) ---- */
@media (max-width: 640px) {
  table.deep thead { display: none; }
  table.deep tr { display: grid; grid-template-columns: 1.7rem repeat(3, minmax(0, 1fr)); gap: 0 .4rem; padding: .45rem 0; border-bottom: 1px solid var(--line); align-items: start; }
  table.deep td { display: block; border: 0; padding: 0; width: auto !important; white-space: normal; }
  table.deep td.do { grid-row: 1 / span 2; grid-column: 1; }
  table.deep td:nth-child(2) { grid-column: 2 / span 3; font-weight: 500; line-height: 1.3; }
  table.deep td:nth-child(3), table.deep td:nth-child(4), table.deep td:nth-child(5) { font-size: .78rem; line-height: 1.3; margin-top: .15rem; }
  table.deep td:nth-child(3) { grid-column: 2; } table.deep td:nth-child(4) { grid-column: 3; } table.deep td:nth-child(5) { grid-column: 4; text-align: right; }
  table.deep td:nth-child(3)::before { content: 'last '; color: var(--stone); } table.deep td:nth-child(4)::before { content: 'due '; color: var(--stone); }
  table.deep td:nth-child(4) .small { display: block; }
  table.stock thead { display: none; }
  table.stock tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  table.stock td { display: block; border: 0; padding: .1rem 0; width: auto !important; white-space: normal; }
  table.stock td:first-child { font-weight: 500; }
  table.stock form.stack { flex-wrap: wrap; } table.stock input, table.stock select { width: auto; flex: 1 1 8rem; max-width: 100%; }
  table.stock form.inline { margin-top: .2rem; }
  table.certgrid td.cert a.booklink { position: static; display: block; transform: none; margin: .15rem auto 0; width: max-content; }
}


/* 1.54.0: the compliance packs and the Office set */
.badge.hz { background: var(--cream); color: var(--forest); border: 1px solid var(--line); } .badge.hz-flammable, .badge.hz-explosive { border-color: var(--red); color: var(--red); } .badge.hz-corrosive, .badge.hz-toxic, .badge.hz-health { border-color: var(--amber); color: var(--amber); } .badge.hz-environment { border-color: var(--moss); color: var(--green-ink); }
table.coshh td { vertical-align: top; }
.rgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .rgrid .card { margin: 0; } table.report th { text-align: left; font-weight: 500; width: 55%; vertical-align: top; text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--forest); } table.report th a { text-decoration: none; border-bottom: 1px dotted var(--line); } table.report td { font-size: .9rem; } table.report tr.bad th a, table.report tr.bad td { color: var(--red); } table.report tr.warm td { color: var(--amber); }
@media (max-width: 800px) { .rgrid { grid-template-columns: 1fr; } }
.occbar { display: inline-block; width: 8rem; height: .6rem; background: var(--cream); border-radius: 99px; overflow: hidden; vertical-align: middle; } .occbar span { display: block; height: 100%; background: var(--moss); } .occbar span.low { background: var(--amber); } .occbar span.mid { background: var(--gold); } .occbar span.high { background: var(--moss); }
table.compact tr.now td { background: var(--warm); }
table.budget th.now { background: var(--warm); } table.budget tbody th { text-transform: none; letter-spacing: 0; font-size: .85rem; min-width: 11rem; white-space: normal; } table.budget td.b { min-width: 3.8rem; padding: .25rem .2rem; } table.budget td.b input { width: 3.8rem; padding: .15rem .25rem; text-align: right; font-size: .78rem; } table.budget .act { display: block; font-size: .68rem; color: var(--stone); } table.budget .act.over { color: var(--red); font-weight: 600; } table.budget td.tot { background: var(--cream); font-weight: 600; } table.budget tfoot td, table.budget tfoot th { border-top: 2px solid var(--line); font-weight: 600; }
@media print { .rgrid { grid-template-columns: repeat(2, 1fr); } .tabs, .viewswitch { display: none; } }
.card.law.recent { border-left: 4px solid var(--gold); } .card.law.off { opacity: .6; } .card.law h2 { font-size: 1.05rem; }
/* Widths in steps of five, because the page's CSP keeps inline styles out: a bar's fill is a class. */
.w0 { width: 0% !important; } .w5 { width: 5% !important; } .w10 { width: 10% !important; } .w15 { width: 15% !important; } .w20 { width: 20% !important; } .w25 { width: 25% !important; } .w30 { width: 30% !important; } .w35 { width: 35% !important; } .w40 { width: 40% !important; } .w45 { width: 45% !important; } .w50 { width: 50% !important; } .w55 { width: 55% !important; } .w60 { width: 60% !important; } .w65 { width: 65% !important; } .w70 { width: 70% !important; } .w75 { width: 75% !important; } .w80 { width: 80% !important; } .w85 { width: 85% !important; } .w90 { width: 90% !important; } .w95 { width: 95% !important; } .w100 { width: 100% !important; }
input.short { width: 5rem; } label.short { max-width: 14rem; }
/* 1.68.7: the bar-fill widths above also caught inputs called w5/w12 (a 5% box nobody could read a number in); inputs keep their own widths. */
input.w5, select.w5 { width: 5rem !important; min-width: 5rem; } input.w12 { width: 12rem !important; }

/* 1.55: words for screen readers only, anywhere */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.askform .actions { align-items: center; } .askform .actions .btn { margin-top: 0; } .askform .actions { margin-top: .7rem; } .askform .askline { flex: 1 1 14rem; line-height: 1.35; }
.askpast .turnset { margin: .4rem 0; } .askpast .turnset summary { cursor: pointer; } .askpast .chat { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0 .8rem; }
.btn.tiny { padding: .1rem .4rem; font-size: .72rem; margin: 0 0 0 .3rem; vertical-align: middle; }
.pagegroup.foot { border-top: 1px solid var(--line, #e3e0d8); padding-top: .5rem; margin-top: .4rem; } .pagegroup h4.also { color: var(--muted, #6b6b6b); font-style: normal; font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.sheet .pagegroup.foot { margin-top: .9rem; padding-top: .8rem; }
/* 1.55: the contractors list and the park list on a phone */
@media (max-width: 700px) {
  table.contractors thead { display: none; } table.contractors, table.contractors tbody, table.contractors tr, table.contractors td { display: block; width: 100%; box-sizing: border-box; }
  table.contractors tr { padding: .5rem 0 .6rem; border-bottom: 1px solid var(--line); } table.contractors td { border: 0; padding: .1rem 0; } table.contractors td:first-child a { font-weight: 600; font-size: 1rem; }
  table.contractors td:nth-child(4)::before { content: "Insurance: "; color: var(--stone); font-size: .85rem; }
  table.parklist tr { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); } table.parklist td { display: block; border: 0; padding: 0; } table.parklist td:nth-child(3) { display: flex; flex-wrap: wrap; gap: .25rem; }
}
table.parklist td { vertical-align: top; } table.parklist td:nth-child(3) .badge { white-space: nowrap; }
/* 1.56: the agency bridge */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; word-break: break-all; }

/* 1.58.0: the agency calendar (units down, nights across) and the connection card. */
.agcal-bar { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin: .4rem 0 .6rem; } .agcal-bar .seg { display: inline-flex; flex-wrap: wrap; gap: .25rem; } .agcal-bar .btn.small { margin: 0; }
.agcal-bar .legend { font-size: .78rem; color: var(--stone); display: inline-flex; gap: .35rem .5rem; align-items: center; flex-wrap: wrap; } .agcal-bar .legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: middle; border: 1px solid var(--line); }
.agcal-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
table.agcal { border-collapse: separate; border-spacing: 0; font-size: .74rem; width: max-content; min-width: 100%; }
table.agcal th, table.agcal td { padding: 0; border-bottom: 1px solid var(--line); }
table.agcal th.u { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; padding: .25rem .6rem; min-width: 9rem; max-width: 13rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 1px solid var(--line); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: .8rem; color: var(--ink); }
table.agcal thead th.u { background: var(--cream); } table.agcal th.m { text-align: left; padding: .2rem .4rem; font-size: .72rem; color: var(--stone); letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid var(--line); background: var(--cream); }
table.agcal th.d { width: 1.35rem; min-width: 1.35rem; text-align: center; font-weight: 500; color: var(--stone); font-size: .66rem; line-height: 1.1; padding: .15rem 0 .2rem; background: var(--cream); } table.agcal th.d span { display: block; font-size: .58rem; opacity: .7; } table.agcal th.d.we { background: #efece4; } table.agcal th.d.today { color: var(--forest); font-weight: 700; }
table.agcal td.c { width: 1.35rem; min-width: 1.35rem; height: 1.6rem; border-right: 1px solid #f0ede6; position: relative; }
table.agcal td.c.free, .agcal-bar .legend i.free { background: #fff; } table.agcal td.c.taken, .agcal-bar .legend i.taken { background: #cfcac0; }
table.agcal td.c.agency, .agcal-bar .legend i.agency { background: var(--forest); } table.agcal td.c.agency.first { border-left: 2px solid var(--gold-lt); }
table.agcal td.c.agency a { position: absolute; left: .25rem; top: 0; line-height: 1.6rem; color: #fff; text-decoration: none; font-size: .64rem; font-weight: 600; white-space: nowrap; z-index: 1; pointer-events: auto; letter-spacing: .02em; }
table.agcal td.c.past, .agcal-bar .legend i.past { background: repeating-linear-gradient(135deg, #f4f1ea 0 3px, #e9e5db 3px 5px); } table.agcal td.c.unknown, .agcal-bar .legend i.unknown { background: #fff; background-image: radial-gradient(#d8d3c8 1px, transparent 1.2px); background-size: 6px 6px; }
table.agcal tbody tr:hover th.u { background: var(--cream); }
label.tick.block { display: grid; grid-template-columns: auto 1fr; gap: .1rem .5rem; margin: .35rem 0; align-items: baseline; } label.tick.block input { margin: 0; } label.tick.block b { white-space: nowrap; } label.tick.block .muted { grid-column: 2; }
input.code { font-family: var(--mono, ui-monospace, Menlo, monospace); font-size: .95rem; letter-spacing: .02em; } .w100 { width: 100%; }
p.lead.small { margin: 0 0 .8rem; color: var(--ink); }
details.card > summary { cursor: pointer; list-style: none; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::before { content: '▸ '; color: var(--stone); } details[open].card > summary::before { content: '▾ '; }
/* Long spans (six months to three years): a thin column a night, a tick each Monday; and a colour per agency. */
table.agcal.long th.d { width: 5px; min-width: 5px; padding: 0; height: .5rem; border-left: 0; } table.agcal.long th.d.wk { border-left: 1px solid #cfc9bd; } table.agcal.long th.d.today { border-left: 2px solid var(--forest); }
table.agcal.long td.c { width: 5px; min-width: 5px; height: 1.1rem; border-right: 0; } table.agcal.long td.c.agency a { position: absolute; inset: 0; } table.agcal.long th.m { font-size: .62rem; padding: .1rem .25rem; white-space: nowrap; overflow: hidden; text-overflow: clip; max-width: 0; }
table.agcal td.c.agency.c0, .agcal-bar .legend i.agency.c0 { background: var(--forest); } table.agcal td.c.agency.c1, .agcal-bar .legend i.agency.c1 { background: #8e5fd2; } table.agcal td.c.agency.c2, .agcal-bar .legend i.agency.c2 { background: #0b5fa5; } table.agcal td.c.agency.c3, .agcal-bar .legend i.agency.c3 { background: #d2862d; } table.agcal td.c.agency.c4, .agcal-bar .legend i.agency.c4 { background: #d24f6b; } table.agcal td.c.agency.c5, .agcal-bar .legend i.agency.c5 { background: #2fa2b3; }
.agcal-bar form.range { display: inline-flex; align-items: center; gap: .3rem; } .agcal-bar form.range input[type=date] { margin: 0; padding: .2rem .35rem; font-size: .8rem; width: auto; } .agcal-bar form.range .btn { margin: 0; }

/* Steps on a booking system's side (the bridge's per-system recipes) */
ol.steps { margin: .4rem 0 .4rem 1.2rem; padding: 0; }
ol.steps li { margin: 0 0 .3rem; }

/* 1.62.0 polish: one style of count everywhere (tabs, group headings, summaries) */
.tab .count, h2 > .count, summary .count, .jhead h2 .count { display: inline-block; min-width: 1.2rem; padding: 0 .4rem; border-radius: 99px; background: var(--mist); color: var(--forest); font: 600 .72rem/1.2rem var(--sans); text-align: center; vertical-align: middle; margin-left: .3rem; letter-spacing: 0; }
.tab.on .count { background: var(--gold); color: #fff; } .tab .count.red, h2 > .count.red { background: var(--red); color: #fff; }
/* long codes and addresses wrap instead of pushing a phone sideways */
code, input.code, .code { overflow-wrap: anywhere; }
/* a quicker, quieter page entrance */
main { animation-duration: .12s; } @keyframes pagein { from { opacity: 0; transform: none; } to { opacity: 1; transform: none; } }
.head h2.ash1 { font-size: 1.55rem; margin: 0; } h1.ash2 { font-size: 1.25rem; margin: 0 0 .4rem; }
table.people th { white-space: nowrap; } table.people select { max-width: 11rem; }
.agcal-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .sthead { flex-direction: column; align-items: flex-start; } .sthead .right { text-align: left; } .card.rsect { overflow-x: auto; } }
.self-end { align-self: end; }
/* grouped legend on the Needs attention panel */
.plegend.grouped { display: block; column-count: 2; column-gap: 1rem; } .plegend.grouped li { display: flex; break-inside: avoid; padding: .08rem 0; }
.plegend.grouped li.lg { display: block; font: 600 .72rem/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--stone); margin-top: .45rem; column-span: all; }
.plegend.grouped li.lg:first-child { margin-top: 0; }
/* the availability check as a list */
.avail .availhead { margin: .5rem 0 .2rem; } .avail .availhead:first-child { margin-top: 0; }
ul.availlist { list-style: none; margin: 0 0 .4rem; padding: 0; } ul.availlist li { display: flex; gap: .5rem; align-items: baseline; padding: .15rem 0; border-bottom: 1px solid var(--line); }
ul.availlist li:last-child { border-bottom: 0; } ul.availlist li.taken { color: var(--stone); } ul.availlist li.good { font-weight: 600; } ul.availlist li .dot { flex: none; position: relative; top: -.05rem; }
/* phone: the enquiry list rows put the name on its own line; the toolbar sits in two rows, not four */
@media (max-width: 640px) {
  .mtop { flex-wrap: wrap; row-gap: .15rem; } .mtop strong { max-width: 100%; flex: 1 0 100%; } .mtop .mwhen { margin-left: 0; }
  .head .actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } .head .actions form.find { flex: 1 1 100%; } .head .actions form.find input { width: auto; flex: 1; }
  .head .actions > .btn, .head .actions > form:not(.find) { flex: 1 1 45%; } .head .actions > form:not(.find) .btn { width: 100%; }
  /* changeovers and arrivals: the far day buttons give way to a calmer row */
  .daynav .far { display: none; }
  /* maintenance: the report form starts folded on a phone; the header button opens it */
  details.report-fold > summary { display: block; cursor: pointer; }
}
@media (max-width: 640px) { .head .actions a[href="#report"] { display: none; } }
h2.group-title { font: 600 .78rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--stone); margin: 1.1rem 0 .5rem; } h2.group-title:first-of-type { margin-top: .2rem; }
.hometiles.settings { margin-bottom: .4rem; }
.ownerstmt > section { min-width: 0; } .card.statement .scroll { overflow-x: auto; max-width: 100%; }
/* an undo-style button inside page content (not the nav) */
main button.linkish { color: var(--stone); text-decoration: underline; text-underline-offset: 2px; padding: 0; } main button.linkish.small { font-size: .8rem; }
/* ---- Parks: Park Keeper's onboarding desk, and the facts sheet a park fills in ---- */
.badge.stage { font-size: .66rem; vertical-align: middle; } .badge.warm { background: var(--amber-bg); color: var(--amber); } .badge.good { background: var(--green-bg); color: var(--green-ink); } .badge.bad { background: var(--red-bg); color: var(--red); } .badge.grey { background: #ECE6DA; color: var(--stone); }
.row.urgent { border-left-color: var(--red); } .tile.bad { border-top-color: var(--red); } .tile.bad b { color: var(--red); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; } .offscreen { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.grid2.top { align-items: start; } .grid2.top .card { margin-bottom: .75rem; }
ol.stageline { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .2rem; padding: 0; margin: .3rem 0 .8rem; counter-reset: st; }
ol.stageline li { font-size: .8rem; padding: .2rem .6rem; border-radius: 99px; background: var(--warm); color: var(--stone); position: relative; }
ol.stageline li.done { background: var(--green-bg); color: var(--green-ink); } ol.stageline li.now { background: var(--forest); color: var(--cream); font-weight: 600; }
.newlink { background: var(--amber-bg); border: 1px solid #E8D7A8; border-radius: 6px; padding: .6rem .8rem .8rem; margin-bottom: .6rem; } .newlink .topic code { overflow-wrap: anywhere; display: inline-block; max-width: 100%; } .newlink textarea { margin: .5rem 0 .3rem; }
.factsheet .sheetsec { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .7rem 1rem .4rem; margin-bottom: .6rem; } .factsheet .sheetsec h2 { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
dl.facts { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: .25rem .9rem; margin: 0 0 .6rem; } dl.facts dt { color: var(--stone); font-size: .88rem; padding-top: .1rem; } dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } dl.facts dd.missing { color: var(--red); font-style: italic; }
@media (max-width: 640px) { dl.facts { grid-template-columns: 1fr; gap: 0 } dl.facts dd { margin-bottom: .45rem; } }
table.plain.files td { padding: .35rem .6rem .35rem 0; border-top: 1px solid var(--line); } table.plain.files td .btn { margin: 0; }
.prow .btn { margin: 0; min-width: 3.6rem; } .prow.isdone { opacity: .8; } .prow .btn.quiet { background: var(--green-bg); border-color: var(--green-bg); color: var(--green-ink); }
/* the facts sheet */
main.plain { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.join .joinhead { display: flex; gap: 1.2rem; align-items: flex-start; margin: .4rem 0 1rem; } .join .pklockup { height: 22px; width: auto; margin-top: .5rem; flex-shrink: 0; } .join .joinhead h1 { font-size: 1.9rem; }
.joinbody { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.joinnav ol { list-style: none; margin: 0; padding: 0; counter-reset: js; position: sticky; top: .5rem; }
.joinnav li { counter-increment: js; } .joinnav li a { display: flex; gap: .55rem; align-items: baseline; padding: .45rem .6rem; border-radius: 6px; color: var(--forest); text-decoration: none; font-size: .95rem; }
.joinnav li a::before { content: counter(js); font-size: .72rem; color: var(--stone); min-width: 1.1rem; font-variant-numeric: tabular-nums; }
.joinnav li.saved a::before { content: "✓"; color: var(--green-ink); font-weight: 700; } .joinnav li.now a { background: var(--card); border: 1px solid var(--line); font-weight: 600; } .joinnav li.send a::before { content: "→"; }
.joinnav li.send { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.joinsec h2 { font-size: 1.45rem; } .joinsec label { margin-top: .9rem; } .joinsec .hint { display: block; font-weight: 400; margin-top: .05rem; } .joinsec .need { color: var(--amber); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-left: .3rem; }
fieldset.choice { border: 0; padding: 0; margin: .9rem 0 0; } fieldset.choice legend { font-weight: 500; font-size: .9rem; padding: 0; margin-bottom: .2rem; } fieldset.choice label.tick { margin: .25rem 0 0; } fieldset.choice input { width: auto; display: inline; margin: 0; }
fieldset.choice.checks { display: block; } fieldset.choice.checks label.tick { display: inline-flex; margin: .25rem 1rem .1rem 0; }
.joinsec .actions { margin-top: 1rem; } .joinsec .actions .btn { margin-top: 0; }
.joinsec.uploads h3 { margin-top: .4rem; } .upload-block { padding: .5rem 0 .7rem; border-top: 1px solid var(--line); } .upload-block:first-child { border-top: 0; padding-top: 0; }
.plainlist { list-style: none; margin: .2rem 0 .4rem; padding: 0; } .plainlist li { padding: .2rem 0; }
.filepick { display: inline-block; margin: 0; font-weight: 400; } .filepick input[type=file] { position: absolute; left: -9999px; } .filepick .btn { margin: 0; } form.upload.inline .btn { margin: 0 0 0 .4rem; }
.missinglist { margin: .3rem 0 .8rem 1.2rem; padding: 0; } .missinglist li { margin: .2rem 0; }
.joinfoot { margin-top: 1.4rem; }
@media (max-width: 760px) { .joinbody { grid-template-columns: 1fr; } .joinnav ol { position: static; display: flex; flex-wrap: wrap; gap: .2rem; } .joinnav li a { padding: .3rem .5rem; font-size: .85rem; border: 1px solid var(--line); background: var(--card); } .joinnav li.send { margin: 0; border: 0; padding: 0; } .join .joinhead { flex-direction: column; gap: .4rem; } .join .joinhead h1 { font-size: 1.5rem; } }
.card.built { border-left: 4px solid var(--moss); } table.plain.logins td, table.plain.logins th { padding: .3rem .8rem .3rem 0; text-align: left; border-top: 1px solid var(--line); } table.plain.logins code { background: var(--warm); padding: .1rem .35rem; border-radius: 3px; }
/* the Park Keeper desk: Park Keeper's own admin portal, not a park's hub */
.login.desk, .setup.desk { text-align: left; } .desk-mark { margin: .2rem 0 1rem; } .desk-mark img { width: 204px; height: 30px; display: block; }
.login.desk h1, .setup.desk h1 { font-size: 2rem; margin-bottom: .2rem; } .login.desk .muted, .setup.desk > .muted { margin: 0 0 .6rem; }
nav.top .brand img.deskmark { width: 22px; height: 22px; }
/* the facts sheet: tables the park adds lines to, date tick-boxes, needed marks */
.req { color: var(--red); font-weight: 700; margin-left: .15rem; }
.rowsfield { margin-top: .3rem; } table.rows { width: 100%; border-collapse: collapse; margin: .2rem 0 .3rem; } table.rows th { font: 600 .68rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--stone); text-align: left; padding: .2rem .3rem .3rem 0; white-space: nowrap; }
table.rows td { padding: .15rem .3rem .15rem 0; vertical-align: top; } table.rows td input, table.rows td select { margin: 0; padding: .35rem .45rem; font-size: .9rem; min-width: 4.5rem; } table.rows td.wide { width: 26%; } table.rows td.k-num input { width: 4.2rem; min-width: 0; } table.rows td.k-yesno select { width: 5rem; min-width: 0; }
table.rows .days { display: inline-flex; gap: .3rem; flex-wrap: nowrap; } table.rows .day { display: inline-flex; flex-direction: column; align-items: center; font-size: .66rem; margin: 0; cursor: pointer; line-height: 1.1; } table.rows .day input { margin: 0 0 .15rem; width: auto; min-width: 0; padding: 0; } table.rows td.k-days { white-space: nowrap; padding-top: .3rem; } table.rows td.k-select select { min-width: 9.5rem; }
.rowsfield .btn { margin-top: .2rem; } fieldset.rowsset { margin-top: 1rem; }
.unitdates { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .3rem 1rem; } .unitdates .ud { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 400; min-width: 0; } .unitdates .ud span { flex: 0 0 4.8rem; } .unitdates .ud input { margin: 0; flex: 1 1 auto; width: auto; min-width: 0; padding: .3rem .45rem; }
fieldset.checkdates .cd { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .15rem 0; } fieldset.checkdates .cd input[type=date] { width: 11rem; margin: 0; padding: .3rem .45rem; } fieldset.checkdates .cd label.tick { flex: 1 1 16rem; margin: 0; }
fieldset.checkdates .others { margin-top: .6rem; } fieldset.checkdates .others p { margin: 0 0 .1rem; }
.otherbox { display: block; width: 100%; margin-top: .5rem; font-weight: 500; font-size: .9rem; } .otherbox textarea { margin-top: .25rem; }
.plainlist.tight li { padding: .05rem 0; } table.plain.facts-rows th, table.plain.facts-rows td { padding: .15rem .7rem .15rem 0; text-align: left; font-size: .9rem; } table.plain.facts-rows th { color: var(--stone); font-weight: 500; }
form.busy { opacity: .6; pointer-events: none; }
@media (max-width: 760px) { table.rows thead { display: none; } table.rows tr.r { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .5rem; padding: .5rem 0; border-top: 1px solid var(--line); } table.rows td { padding: 0; } table.rows td.wide { grid-column: 1 / -1; width: auto; } table.rows td::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--stone); } table.rows td input, table.rows td select { width: 100%; min-width: 0; } table.rows td.k-days { grid-column: 1 / -1; } }
.resetform label { font-weight: 500; } .resetform .pair { display: flex; gap: .4rem; align-items: center; margin-top: .25rem; max-width: 28rem; } .resetform .pair input { margin: 0; } .resetform .pair .btn { margin: 0; white-space: nowrap; }
.sortrow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .2rem 0 .5rem; } .sortrow .segs { display: inline-flex; flex-wrap: wrap; gap: .25rem; } .sortrow .seg { font-size: .8rem; padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 99px; text-decoration: none; color: var(--forest); background: var(--card); } .sortrow .seg.on { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.btn.danger { color: var(--red); border-color: var(--red-bg); } .btn.danger:hover { background: var(--red-bg); }
.notes-list { list-style: none; margin: 0; padding: 0; } .notes-list li { padding: .5rem 0; border-top: 1px solid var(--line); } .notes-list li:first-child { border-top: 0; } .notes-list .pre { display: block; margin-top: .15rem; }
.job-title-edit summary { cursor: pointer; font-size: .85rem; color: var(--stone); } .job-title-edit form { margin-top: .4rem; }
.topwarn { margin: 0 0 .8rem; }
/* ---- the bookings grid ---- */
.bgridwrap { padding: .6rem .6rem .8rem; }
.bgrid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.bgridt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .8rem; }
table.bgridt th, table.bgridt td { border-bottom: 1px solid var(--line); border-right: 1px solid #efe8da; padding: 0; height: 1.9rem; }
table.bgridt th.u { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; padding: 0 .6rem 0 .3rem; min-width: 7.5rem; max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-right: 2px solid var(--line); }
table.bgridt th.u a { color: inherit; text-decoration: none; } table.bgridt th.u a:hover b { text-decoration: underline; }
table.bgridt thead th { position: sticky; top: 0; z-index: 1; background: var(--card); font-weight: 500; text-align: center; min-width: 2.1rem; }
table.bgridt thead th.u { z-index: 3; }
table.bgridt tr.bands th { height: 1.3rem; font-size: .72rem; color: var(--stone); text-align: left; padding-left: .3rem; border-right: 2px solid var(--line); letter-spacing: .03em; white-space: nowrap; overflow: hidden; }
table.bgridt thead th .dow { display: block; font-size: .62rem; color: var(--stone); line-height: 1; margin-top: .2rem; } table.bgridt thead th .dom { display: block; line-height: 1.2; }
table.bgridt thead th.we { background: #F6F1E7; } table.bgridt thead th.today { background: var(--forest); color: var(--cream); } table.bgridt thead th.today .dow { color: var(--mist); }
table.bgridt thead th.far { color: var(--stone); font-style: italic; }
table.bgridt tr.occ th { height: 1.4rem; font-size: .7rem; color: var(--stone); font-weight: 400; } table.bgridt tr.occ th .full { color: var(--green-ink); font-weight: 600; } table.bgridt tr.occ th.today { background: #2F4A2A; color: var(--cream); }
table.bgridt td.n { background: var(--card); } table.bgridt td.n.past { background: #F3EFE6; } table.bgridt td.n.today { box-shadow: inset 2px 0 0 var(--forest); }
table.bgridt td.n.taken { background: repeating-linear-gradient(135deg, #E6E0D4 0 4px, #F3EFE6 4px 8px); } table.bgridt td.n.unknown { background: #FBF8F2; }
table.bgridt td.b { padding: .2rem .15rem; vertical-align: middle; }
table.bgridt td.b a { color: inherit; text-decoration: none; display: block; }
.bar { display: flex; align-items: center; gap: .25rem; height: 1.45rem; padding: 0 .4rem; border-radius: 4px; background: var(--moss); color: var(--cream); white-space: nowrap; overflow: clip; font-weight: 500; }
/* The name sticks to the left edge of the scrolling area (just right of the unit column) while a long bar scrolls past, so it is never lost under the lodge names. overflow: clip (not hidden) keeps the bar from becoming the sticky's container. */
/* 1.68.8: the name is moved along by a little script as the grid scrolls (public/app.js, "bar names"), and hidden when the visible part of the bar is too narrow for it, so no half-names appear at the edge. */
.bar .stick { position: relative; display: inline-flex; align-items: center; gap: .25rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; will-change: transform; }
table.bgridt th.u { width: 11rem; min-width: 11rem; max-width: 11rem; }
.bar.first { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .bar.last { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.bar .lbl { overflow: hidden; text-overflow: ellipsis; } .bar .nts { margin-left: auto; font-size: .66rem; opacity: .8; font-weight: 400; padding-left: .3rem; } .bar .dog { font-size: .75rem; }
.bar.resident { background: #4B5F7A; } .bar.prov { background: var(--card); color: var(--forest); border: 1.5px dashed var(--gold); } .bar.block { background: repeating-linear-gradient(135deg, #D9D2C4 0 5px, #E8E2D6 5px 10px); color: var(--stone); font-weight: 400; }
table.bgridt td.b a:hover .bar { filter: brightness(1.08); }
.legendrow { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin: .7rem 0 .3rem; } .legendrow .key { display: inline-block; padding: .1rem .6rem; border-radius: 6px; font-size: .74rem; background: var(--moss); color: var(--cream); line-height: 1.5; }
.legendrow .key.resident { background: #4B5F7A; } .legendrow .key.prov { background: var(--card); color: var(--forest); border: 1.5px dashed var(--gold); } .legendrow .key.block { background: repeating-linear-gradient(135deg, #D9D2C4 0 5px, #E8E2D6 5px 10px); color: var(--stone); } .legendrow .key.taken { background: repeating-linear-gradient(135deg, #E6E0D4 0 4px, #F3EFE6 4px 8px); color: var(--stone); } .legendrow .key.free { background: var(--card); color: var(--stone); border: 1px solid var(--line); }
table.bgridt { width: 100%; } table.bgridt thead th { min-width: 3.3rem; } /* a real width per day: the grid is wider than most screens, so the slider is there, and fills a big one */
.gridnav { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .gridnav form.inline { display: inline-flex; gap: .3rem; align-items: center; } .gridnav form.inline input, .gridnav form.inline select { padding: .25rem .4rem; font-size: .85rem; }
@media (max-width: 700px) { table.bgridt th.u { width: 4.5rem; min-width: 4.5rem; max-width: 4.5rem; } table.bgridt th.u .muted { display: none; } .bar .stick { left: 5rem; } }
.card.good { border-left: 4px solid var(--moss); background: #F7FAF5; } .card.warm { border-left: 4px solid var(--gold); background: #FBF7EE; } .card.attention { border-left: 4px solid var(--gold); }
/* ---- guest feedback ---- */
.jrow.fb { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: start; }
.jrow.fb.problem { border-left-color: var(--red); } .jrow.fb.praise { border-left-color: var(--moss); } .jrow.fb.suggestion { border-left-color: var(--gold); } .jrow.fb.note { border-left-color: var(--mist); }
.jrow.fb.fresh { background: #FBF7EE; } .jrow.fb.mixed { border-left-color: var(--gold); } .jrow.fb.bad { border-left-color: var(--red); }
.jrow.fb .jtitle { white-space: normal; font-weight: 400; } .jrow.fb .jtitle b { font-weight: 600; } .jrow.fb .jstate { white-space: normal; }
.jrow.fb .oact { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.staffpick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 .6rem; } .staffchips { display: inline-flex; flex-wrap: wrap; gap: .25rem .7rem; align-items: center; } .staffchips label.tick { display: inline-flex; align-items: center; gap: .25rem; margin: 0; } .staffpick input { width: 9rem; padding: .25rem .4rem; font-size: .85rem; }
.jrow.fb.rec { grid-template-columns: minmax(0, 1fr) auto; padding: .45rem .6rem; } .jrow.fb.rec .jmain { display: block; white-space: normal; overflow: visible; } .jrow.fb.rec .jchips { margin-left: .4rem; } .jrow.fb.rec .jstate { display: block; margin-top: .2rem; font-size: .84rem; color: var(--stone); }
.jrow.fb .jmain { white-space: normal; overflow: visible; flex-wrap: wrap; } .jrow.fb .jtitle { font-weight: 400; }
@media (max-width: 700px) { .jrow.fb .jstate { display: block; } }
[data-guess] { font-weight: 400; font-size: .78rem; }
@media (max-width: 700px) { .jrow.fb { grid-template-columns: minmax(0, 1fr) auto; } .jrow.fb .jage { grid-column: 1 / -1; } }
/* ---- deposits and the arrival pack ---- */
input.w4 { width: 5rem; display: inline-block; }
.inline-details { display: inline-block; } .inline-details summary { list-style: none; cursor: pointer; } .inline-details summary::-webkit-details-marker { display: none; } .inline-details[open] summary { margin-bottom: .3rem; }
table.deposits td { vertical-align: top; } table.deposits td.nowrap form.inline { margin-top: .2rem; }
.packs { max-width: 880px; margin: 0 auto; }
.pack { margin-bottom: 2rem; } .packhead { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; background: var(--warm); padding: .5rem .9rem; border-radius: 6px; margin: 1rem 0 .6rem; } .packhead h2 { margin: 0; font-size: 1.05rem; }
/* A printed form: a white sheet, a header band with the business and the form's name, boxes with small labels. */
.psheet { background: #fff; color: #111; border: 1px solid #d8d2c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 4px; padding: 1.6rem 2rem 1.8rem; margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.45; page-break-after: always; break-after: page; }
.phead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; border-bottom: 2px solid #111; padding-bottom: .5rem; margin-bottom: 1rem; }
.phead .pbiz { display: flex; align-items: center; gap: .6rem; } .phead .plogo { height: 34px; width: auto; max-width: 120px; object-fit: contain; } .phead .pname { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: .01em; }
.phead .ptitle { text-align: right; } .phead .ptitle h2 { margin: 0; font-family: inherit; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; } .phead .psub { display: block; font-size: .78rem; color: #555; margin-top: .1rem; }
.frow { display: flex; gap: .6rem; margin: .55rem 0; align-items: stretch; flex-wrap: nowrap; }
.fld { display: flex; flex-direction: column; border: 1px solid #333; border-radius: 3px; padding: .25rem .5rem .3rem; min-height: 2.6rem; flex: 1 1 0; min-width: 0; background: #fff; }
.fld .fl { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fld .fv { font-size: 1rem; font-weight: 600; line-height: 1.3; padding-top: .15rem; min-height: 1.3rem; }
.fld.w2 { flex-basis: 16.66%; flex-grow: 2; } .fld.w3 { flex-basis: 25%; flex-grow: 3; } .fld.w4 { flex-basis: 33.33%; flex-grow: 4; } .fld.w5 { flex-basis: 41.66%; flex-grow: 5; } .fld.w6 { flex-basis: 50%; flex-grow: 6; } .fld.w7 { flex-basis: 58.33%; flex-grow: 7; } .fld.w9 { flex-basis: 75%; flex-grow: 9; } .fld.w12 { flex-basis: 100%; flex-grow: 12; }
.fld.tickfld .fv { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; font-weight: 400; } .fld.tickfld .fnote { font-size: .78rem; color: #444; }
.fld.lines { border: none; padding: .3rem 0 0; min-height: 0; } .fld.lines .fl { margin-bottom: .15rem; white-space: normal; } .fld.lines .wl { display: block; border-bottom: 1px solid #333; height: 1.7rem; }
.frow.ticks { align-items: center; gap: 1.2rem; margin: .7rem 0; flex-wrap: wrap; } .frow.ticks .fq { font-weight: 500; } .frow.ticks .fnote { font-size: .8rem; color: #444; flex-basis: 100%; }
.frow.ticks.hs { gap: .6rem; align-items: flex-start; border: 1px solid #333; border-radius: 3px; padding: .5rem .6rem; } .frow.ticks.hs .tk { margin-top: .1rem; } .frow.ticks.hs .fq { font-weight: 400; flex: 1; }
.tk { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; letter-spacing: .04em; } .tbox { display: inline-block; width: 1.05rem; height: 1.05rem; border: 1.5px solid #222; border-radius: 2px; text-align: center; line-height: 1rem; font-size: .85rem; background: #fff; } .tbox.on { background: #222; color: #fff; }
.sigrow { margin-top: 1.1rem; } .fld.sig { min-height: 3.6rem; flex-grow: 9; flex-basis: 75%; } .fld.sig .fv { min-height: 2.2rem; }
.psheet .fine { font-size: .74rem; color: #444; margin: .5rem 0; line-height: 1.4; } .psheet .intro { margin: 0 0 .8rem; }
table.ptable { width: 100%; border-collapse: collapse; margin: .4rem 0 1.1rem; } table.ptable th, table.ptable td { border: 1px solid #333; padding: .38rem .55rem; text-align: center; font-size: .9rem; } table.ptable th { background: #f0ede6; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } table.ptable td:first-child, table.ptable th:first-child { text-align: left; width: 58%; } table.ptable tr.sub td { font-weight: 600; background: #f6f4ee; text-align: left; } table.ptable td.indent { padding-left: 1.4rem; } table.ptable.yn td:first-child, table.ptable.yn th:first-child { width: 76%; } table.ptable.yn td:not(:first-child), table.ptable.yn th:not(:first-child) { width: 12%; } table.ptable .tbox { vertical-align: middle; }
.psheet .terms { margin: .9rem 0; text-align: justify; } .psheet .terms p { margin: .5rem 0; }
.psheet .office { margin-top: 1.2rem; border-top: 1px dashed #777; padding-top: .5rem; } .psheet .office > .fl { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #555; } .psheet .office .fld { min-height: 2.3rem; } .psheet .office .fld .fv { font-weight: 400; }
@media (max-width: 700px) { .frow { flex-wrap: wrap; } .fld.w2, .fld.w3 { flex-basis: 45%; } .psheet { padding: 1rem; } .phead { flex-direction: column; align-items: flex-start; } .phead .ptitle { text-align: left; } }
/* The A5 sheets (How did we do, the deposit forms) sit two to a landscape A4 with a cut line between, on screen as in print. */
.a5pairs { margin-top: 1.2rem; } .a5pair { display: flex; align-items: stretch; background: #fff; border: 1px solid #d8d2c4; box-shadow: 0 2px 10px rgba(0,0,0,.06); border-radius: 4px; margin: 0 0 1.2rem; }
.a5pair .psheet { flex: 1 1 50%; min-width: 0; border: none; box-shadow: none; border-radius: 0; margin: 0; padding: 1.2rem 1.4rem; font-size: .84rem; } .a5pair .psheet:first-child { border-right: 1.5px dashed #777; } .a5pair .psheet.blank { background: repeating-linear-gradient(135deg, #fff 0 12px, #f6f3ec 12px 24px); }
.a5pair .phead { margin-bottom: .6rem; padding-bottom: .35rem; } .a5pair .phead .pname { font-size: 1.1rem; } .a5pair .ptitle h2 { font-size: .95rem; }
.a5pair table.ptable th, .a5pair table.ptable td { padding: .25rem .4rem; font-size: .8rem; } .a5pair .tbox { width: .9rem; height: .9rem; } .a5pair .fld { min-height: 2.2rem; } .a5pair .fld .fv { font-size: .95rem; } .a5pair .terms { font-size: .82rem; }
.packs.allA4 .psheet.survey, .packs.allA4 .psheet.deposit { max-width: 640px; margin-left: auto; margin-right: auto; }
/* Printing: the Guest Stay form fills an A4 page (the signature sits at the foot); How did we do and the deposit forms are A5 pages,
   as the park's paper ones are, unless the pack is opened with "everything on A4". */
/* 1.66.8: every page of the pack is A4 portrait, so the print window needs nothing set and no printer turns a page.
   The two A5 sheets are laid side by side (a landscape pair, 285 x 198mm) and the pair is turned through 90 degrees
   onto the portrait page by a transform: on paper the pair fills the sheet with the cut line across the middle, and
   each half is an A5 read with the sheet turned. 6mm all round keeps every edge inside what a printer can reach. */
@page a4 { size: A4 portrait; margin: 13mm 14mm; }
@page a5 { size: A5 portrait; margin: 9mm 10mm; }
@page a5pair { size: A4 portrait; margin: 6mm; }
@media print {
  .packs { max-width: none; } .pack { margin: 0; } main { padding: 0; }
  .psheet { border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none; }
  /* The stay form is exactly one page: a column of rows that grow to fill it, so the boxes are as tall as the page allows for handwriting, whatever the wording. */
  .psheet.stay { page: a4; display: flex; flex-direction: column; height: 268mm; overflow: hidden; box-sizing: border-box; font-size: 12pt; break-inside: avoid; }
  .psheet.stay .frow:not(.ticks) { flex: 1 1 auto; margin: .7rem 0; } .psheet.stay .fld { min-height: 3.6rem; padding: .4rem .65rem .45rem; } .psheet.stay .fld .fv { font-size: 1.15rem; } .psheet.stay .fine { font-size: .82rem; margin: .5rem 0; flex: 0 0 auto; }
  .psheet.stay .frow.ticks { margin: .8rem 0; flex: 0 0 auto; } .psheet.stay .frow.ticks.hs { padding: .8rem .9rem; } .psheet.stay .sigrow { flex: 1.6 1 auto; padding-top: .3rem; } .psheet.stay .fld.sig { min-height: 5rem; } .psheet.stay .sigrow .fld { min-height: 5rem; }
  .a5pairs { margin: 0; } .a5pair { page: a5pair; width: 285mm; height: 198mm; transform: rotate(90deg) translateY(-198mm); transform-origin: 0 0; overflow: hidden; border: none; box-shadow: none; border-radius: 0; margin: 0; display: flex; break-inside: avoid; } .a5pair + .a5pair { break-before: page; page-break-before: always; }
  .a5pair .psheet { flex: 0 0 142.5mm; width: 142.5mm; height: 198mm; box-sizing: border-box; padding: 7mm 8mm; overflow: hidden; page: a5pair; break-after: avoid; page-break-after: avoid; break-inside: avoid; font-size: 9pt; } .a5pair .psheet:first-child { border-right: 1px dashed #666; }
  .a5pair table.ptable th, .a5pair table.ptable td { padding: .18rem .3rem; font-size: 8.3pt; } .a5pair table.ptable th { font-size: 6.4pt; letter-spacing: .03em; padding: .2rem .15rem; } .a5pair table.ptable.rate td:first-child, .a5pair table.ptable.rate th:first-child { width: 54%; } .a5pair .intro { font-size: 8.5pt; } .a5pair .fld.lines .wl { height: 1.15rem; } .a5pair .fine { font-size: 7.5pt; } .a5pair table.ptable { margin: .3rem 0 .7rem; }
  .a5pairs .noprint { display: none; } .a5pair .psheet.blank { background: none; }
  .packs.allA4 .psheet.survey, .packs.allA4 .psheet.deposit { page: a4; font-size: 11pt; max-width: none; }
  .a5all .psheet.survey, .a5all .psheet.deposit { page: a4; }
  .psheet.survey, .psheet.deposit { font-size: 9.5pt; line-height: 1.35; }
  .psheet.survey .phead, .psheet.deposit .phead { margin-bottom: .6rem; padding-bottom: .35rem; } .psheet.survey .phead .pname, .psheet.deposit .phead .pname { font-size: 1.1rem; } .psheet.survey .ptitle h2, .psheet.deposit .ptitle h2 { font-size: .95rem; }
  .psheet.survey table.ptable th, .psheet.survey table.ptable td { padding: .22rem .4rem; font-size: 8.8pt; } .psheet.survey table.ptable th { font-size: 7.5pt; } .psheet.survey .tbox { width: .85rem; height: .85rem; } .psheet.survey .intro { font-size: 9pt; margin-bottom: .4rem; } .psheet.survey .fld.lines .wl { height: 1.3rem; }
  .psheet.deposit .fld { min-height: 2.2rem; padding: .2rem .4rem; } .psheet.deposit .fld .fv { font-size: .95rem; } .psheet.deposit .frow { margin: .4rem 0; } .psheet.deposit .terms { margin: .6rem 0; font-size: 9pt; } .psheet.deposit .fld.lines .wl { height: 1.4rem; } .psheet.deposit .fld.sig { min-height: 2.8rem; } .psheet.deposit .office { margin-top: .6rem; }
  .pack:last-of-type .psheet:last-child { page-break-after: auto; break-after: auto; }
  .fld, .tbox, table.ptable th, table.ptable td, .frow.ticks.hs { border-color: #000; } table.ptable th { background: #eee; }
}
/* ---- modules across parks (the desk) ---- */
table.modmatrix { border-collapse: collapse; font-size: .85rem; } table.modmatrix th, table.modmatrix td { border: 1px solid var(--line); padding: .25rem .35rem; text-align: center; } table.modmatrix th.u { text-align: left; white-space: nowrap; min-width: 9rem; }
table.modmatrix th .rot { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; white-space: nowrap; font-weight: 500; font-size: .74rem; max-height: 9rem; }
table.modmatrix button.cell { border: none; background: transparent; cursor: pointer; width: 1.9rem; height: 1.6rem; border-radius: 4px; font-weight: 600; } table.modmatrix button.cell.on { color: var(--green-ink); background: var(--green-bg); } table.modmatrix button.cell.off { color: var(--stone); } table.modmatrix button.cell:hover { outline: 2px solid var(--gold); }
table.modmatrix td { min-width: 2.3rem; } table.modmatrix tr.all td form.stack { display: flex; flex-direction: column; gap: .2rem; align-items: center; } .btn.tiny { padding: .1rem .45rem; font-size: .68rem; white-space: nowrap; line-height: 1.3; min-width: 2.1rem; letter-spacing: .02em; }
/* 1.66.6: the brake and the address list on a connection (the park's Connection tab, the desk's Their hub card and Agencies across parks). */
/* 1.67.0: the sign-in book. Kind buttons sized for a thumb, the contractor check, the roll call's tick column. */
.kinds { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .2rem; } .kindbtn { position: relative; } .kindbtn input { position: absolute; opacity: 0; width: 0; height: 0; } .kindbtn span { display: inline-block; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 500; } .kindbtn input:checked + span { background: var(--forest); color: #fff; border-color: var(--forest); } .kindbtn input:focus-visible + span { outline: 2px solid var(--gold); }
.btn.big { font-size: 1.05rem; padding: .7rem 1.4rem; }
.checklines { list-style: none; margin: .4rem 0; padding: 0; } .checklines li { padding: .35rem 0; border-top: 1px solid var(--line); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; } .checklines li:first-child { border-top: none; } .checklines li.stop b { color: var(--red); }
.override { margin: .6rem 0; padding: .6rem .8rem; background: var(--red-bg); border: 1px solid var(--red); border-radius: 6px; } .override label { font-weight: 600; } .override input { background: #fff; }
.rollcall table.rc td.tickcell { width: 2rem; } .rollcall .tbox { display: inline-block; width: 1.1rem; height: 1.1rem; border: 1.5px solid #222; border-radius: 2px; } .rollcall h2 { margin-top: 1.1rem; }
@media print { .rollcall { font-size: 12pt; } .rollcall table.rc td { padding: .5rem .4rem; border-bottom: 1px solid #999; } }
/* 1.66.10: tables that stack on a phone (a label per cell from data-l), the alarm round's lodge buttons, the register lines. */
@media (max-width: 700px) {
  .scroll table.compact th, .scroll table.compact td { min-width: 5.5rem; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; min-width: 0; box-sizing: border-box; }
  table.stack thead { display: none; } table.stack tr { border-bottom: 1px solid var(--line); padding: .45rem 0 .5rem; } table.stack tr:last-child { border-bottom: none; }
  table.stack td { border: none; padding: .15rem 0; text-align: left; } table.stack td[data-l]::before { content: attr(data-l); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--stone); margin-top: .3rem; }
  table.stack td.act { padding-top: .4rem; } table.stack td.amt, table.stack td.right { text-align: left; }
}
.unitgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; margin: .5rem 0; } .unitgrid form { display: block; }
.unitbtn { width: 100%; min-height: 3.6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; cursor: pointer; font: inherit; color: inherit; } .unitbtn b { font-size: 1.15rem; } .unitbtn small { font-size: .68rem; color: var(--stone); }
.unitbtn.ok { background: var(--green-bg); border-color: var(--sage); } .unitbtn.today { background: var(--green-bg); border-color: var(--green-ink); opacity: .75; } .unitbtn.late { background: var(--amber-bg); border-color: var(--amber); } .unitbtn.fault { background: var(--red-bg); border-color: var(--red); } .unitbtn:disabled { cursor: default; }
.alarmline { display: grid; grid-template-columns: 7.5rem minmax(6rem, 1fr) 13rem auto; gap: .2rem .8rem; align-items: center; font-size: .9rem; padding: .15rem 0; } .alarmrows .alarmline + .alarmline { border-top: 1px dashed var(--line); } .alarmline .aby { white-space: nowrap; } .alarmline .aact { display: inline-flex; gap: .3rem; justify-content: flex-end; } .alarmline .aact form { display: inline; }
@media (max-width: 700px) { .alarmline { grid-template-columns: 1fr auto; } .alarmline .aplace { grid-column: 1 / -1; } .alarmline .aby { grid-column: 1; } } .alarmline.due b { color: var(--red); } .alarmline form { margin-left: .2rem; } .tile b .of { font-size: .55em; color: var(--stone); font-weight: 400; }
/* 1.66.9: attendance. The year as a strip, a row per month, a cell per day. */
.ystrip { margin: .6rem 0 .3rem; } .yrow { display: flex; align-items: center; gap: .15rem; margin: 0 0 .15rem; } .yrow .ym { width: 2.4rem; font-size: .72rem; color: var(--stone); text-transform: uppercase; letter-spacing: .05em; flex: 0 0 auto; } .yrow .ydays { display: flex; gap: .12rem; flex-wrap: nowrap; }
.yd { display: inline-block; width: .78rem; height: .78rem; border-radius: 2px; background: #E7EFE4; flex: 0 0 auto; } .yd.in { background: #E7EFE4; } .yd.off { background: #F1EDE4; } .yrow .pad { display: inline-block; width: .78rem; height: .78rem; flex: 0 0 auto; }
.yd.k-holiday { background: #5F8A62; } .yd.k-sick { background: #B8463A; } .yd.k-unauthorised { background: #5A1F1F; } .yd.k-unpaid { background: #8F8A80; } .yd.k-compassionate { background: #7A5F9E; } .yd.k-other { background: #C9A227; } .yd.part { background-image: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.7) 50%); }
.ykey { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; margin: .2rem 0 .6rem; } .ykey .yd { width: .7rem; height: .7rem; } .ykey .yk { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
table.attendance td, table.attendance th { white-space: nowrap; } table.attendance td.amber { color: var(--amber); font-weight: 600; }
@media (max-width: 700px) { .yd, .yrow .pad { width: .55rem; height: .55rem; } .yrow .ym { width: 2rem; } }
.lockrow { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line, #e6e2d8); } .lockrow > b { min-width: 6.5rem; } .lockrow input[name="why"] { max-width: 15rem; padding: .3rem .5rem; font-size: .9rem; } .lockrow label.tick { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .35rem; margin: 0; flex: 1 1 12rem; }
.lockrow textarea.code { flex: 1 1 16rem; min-height: 2.6rem; font-size: .85rem; } .lockrow select, .lockrow input[name="name"] { width: auto; max-width: 18rem; padding: .3rem .4rem; font-size: .9rem; } td.agact { min-width: 16rem; } td.agact form.inline { display: block; margin: 0 0 .3rem; } td.agact form.pauseform { display: flex; }
.pauseform { display: inline-flex; flex-wrap: wrap; gap: .35rem .6rem; align-items: center; } .pauseform input[name="why"] { max-width: 13rem; padding: .25rem .45rem; font-size: .9rem; } .pauseform label.tick { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: .3rem; margin: 0; }
table.agmatrix th.u { text-align: left; vertical-align: top; } table.agmatrix td { vertical-align: top; }
.modchips { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .2rem 0 .5rem; } .modchips label.tick { display: inline-flex; align-items: center; gap: .3rem; margin: 0; white-space: nowrap; } .modchips label.tick.off { color: var(--stone); }
.chat .turn { scroll-margin-top: 4.5rem; }
/* 1.67.1: jobs done together (a band on the list, the group page) and the inspection sheet before a closure */
section.jobs.band { border-left: 4px solid var(--gold); } section.jobs.band .jhead { background: var(--cream); } section.jobs.band .jhead h2 a { text-decoration: none; color: inherit; } section.jobs.band .jhead h2 a:hover { text-decoration: underline; }
.bulkbar .pair.together input { width: 13rem; max-width: 100%; } .bulkbar .pair.together select { max-width: 16rem; }
.bandcard { border-left: 4px solid var(--gold); }
.insp .irow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .6rem; align-items: center; padding: .4rem 0; border-top: 1px solid var(--line); } .insp .irow:first-of-type { border-top: none; }
.insp .irow input[name^=w_], .insp .irow input[name^=words_] { grid-column: 1 / -1; font-size: .9rem; margin: 0; } .insp .ilabel { font-weight: 500; } .insp h3.gap { margin-bottom: .2rem; }
.iseg { display: inline-flex; gap: .3rem; } .iseg label { position: relative; margin: 0; } .iseg input { position: absolute; opacity: 0; width: 0; height: 0; } .iseg span { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: .85rem; white-space: nowrap; } .iseg input:checked + span { background: var(--forest); color: #fff; border-color: var(--forest); } .iseg label:last-child input:checked + span { background: var(--gold); color: var(--forest); border-color: var(--gold); } .iseg input:focus-visible + span { outline: 2px solid var(--gold); }
@media (max-width: 640px) { .insp .irow { grid-template-columns: 1fr; } .iseg { width: 100%; } .iseg label { flex: 1; } .iseg span { display: block; text-align: center; } }
@media (max-width: 640px) { section.jobs.band .jhead, section.jobs.lodgeband .jhead { flex-wrap: wrap; } section.jobs.band .jhead .jsub, section.jobs.lodgeband .jhead .jsub { white-space: normal; flex-basis: 100%; margin-left: 1.8rem; } section.jobs.lodgeband .jhead h2 { white-space: nowrap; } }
@supports selector(:has(a)) { .insp .irow input[name^=w_], .insp .irow input[name^=words_] { display: none; } .insp .irow:has(input[value=found]:checked) input[name^=w_], .insp .irow:has(input[value=work]:checked) input[name^=words_] { display: block; } }
.iseg label:nth-child(2):not(:last-child) input:checked + span { background: var(--line); color: var(--ink); border-color: var(--line); }
/* 1.67.2: holiday requests */
.reqrow { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; padding: .6rem 0; border-top: 1px solid var(--line); } .reqrow:first-of-type { border-top: none; } .reqrow.short { border-left: 3px solid var(--red); padding-left: .6rem; }
.reqrow .reqmain { min-width: 0; flex: 1 1 auto; line-height: 1.5; } .reqrow .reqact { flex: 0 0 auto; display: flex; flex-direction: column; gap: .4rem; align-items: flex-end; } .reqrow .refuse { display: flex; gap: .3rem; } .reqrow .refuse input { width: 14rem; max-width: 100%; margin: 0; }
@media (max-width: 640px) { .reqrow { flex-direction: column; } .reqrow .reqact { align-items: stretch; width: 100%; } .reqrow .refuse input { width: auto; flex: 1; } }

/* 1.67.5: "Sure? Press again" instead of the browser's dialog; the phone's bulk bar shows a few actions until More */
.btn.armed, .bulkbar .btn.armed { background: var(--gold) !important; color: var(--forest) !important; border-color: var(--gold) !important; }
.confirmnote { display: block; font-size: .82rem; color: var(--stone); margin: .25rem 0 .4rem; max-width: 36rem; } .bulkbar .confirmnote { color: var(--cream); flex-basis: 100%; margin: 0; } form.inline .confirmnote, .inl .confirmnote { display: inline-block; margin: 0 0 0 .5rem; vertical-align: middle; }
.bulkbar [data-barmore] { display: none; } .bulkbar .secondary { display: contents; }
@media (max-width: 700px) { .bulkbar { max-height: calc(100vh - 8rem); overflow: auto; } .bulkbar [data-barmore] { display: inline-block; } .bulkbar .secondary { display: none; } .bulkbar.open .secondary { display: contents; } }
/* 1.68.0: rounds, inventories and counts */
.insp details.room summary h3 { display: inline; margin: 0; } .insp details.room { margin-top: .6rem; }
table.count input[type=number] { width: 4.2rem; min-width: 4.2rem; padding-left: .4rem; padding-right: .2rem; } table.count td:nth-child(2), table.count td:nth-child(3) { white-space: nowrap; } table.count label.tick { white-space: nowrap; } table.count td { vertical-align: middle; }
.drillonly[hidden] { display: none; }
@media (min-width: 900px) { ul.shutlist { column-count: 2; column-gap: 1.5rem; } ul.shutlist li { break-inside: avoid; } }
/* 1.68.2: find a booking, above the grid */
form.find.bookingfind { margin: -.3rem 0 .8rem; } form.find.bookingfind input { width: 34rem; max-width: 70vw; }
details.inl { display: inline-block; margin-left: .5rem; vertical-align: middle; } details.inl > summary { display: inline; cursor: pointer; } details.inl form.foot { margin-top: .3rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; } details.inl form.foot select { width: auto; }
ul.ticks.cols { list-style: none; padding: 0; margin: .4rem 0 1rem; columns: 2; column-gap: 1.5rem; } ul.ticks.cols li { break-inside: avoid; padding: .15rem 0; } @media (max-width: 700px) { ul.ticks.cols { columns: 1; } }
.bar .pay { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; font-size: .68rem; font-weight: 700; line-height: 1; flex: 0 0 auto; } .bar .pay.part, .key .pay.part { background: var(--gold); color: var(--forest); } .bar .pay.unpaid, .key .pay.unpaid { background: var(--cream); color: var(--forest); } .bar .pay.late, .key .pay.late { background: #b3261e; color: #fff; } .key .pay { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; font-size: .68rem; font-weight: 700; margin: 0 .15rem; vertical-align: middle; } .key.paykey::before { display: none; }
.legendrow .key.paykey { background: transparent; color: var(--stone); padding-left: 0; }
.photos figure.photo { margin: 0; position: relative; } .photos figure.photo form.inline { position: absolute; right: .25rem; bottom: .25rem; } .photos figure.photo .btn.quiet { background: rgba(255,255,255,.85); }
.evt.k-person { border-left-color: var(--sage); background: var(--mist); font-style: italic; } .kindpick legend { font-weight: 600; } .kindopt input { margin-right: .25rem; }

/* 1.68.8: six months or a year on the grid: narrow days, the month bands carry the dates, weekday names go. */
table.bgridt.dense thead th { min-width: 1.15rem; font-size: .6rem; padding: 0; } table.bgridt.dense thead th .dow { display: none; } table.bgridt.dense th, table.bgridt.dense td { height: 1.5rem; }
table.bgridt.dense .bar { padding: 0 .2rem; font-size: .7rem; height: 1.2rem; } table.bgridt.dense .bar .nts { display: none; } table.bgridt.dense tr.occ th { font-size: .58rem; }
table.bgridt td.n { position: relative; } table.bgridt td.n a.freecell { position: absolute; inset: 0; display: block; } table.bgridt td.n a.freecell:hover { background: rgba(122, 139, 94, .18); box-shadow: inset 0 0 0 1px var(--sage); }
table.quote { width: auto; min-width: 22rem; } table.quote td, table.quote th { padding: .35rem .8rem; }
.kindpick .chips { display: flex; flex-wrap: wrap; gap: .3rem 1rem; } .kindpick label.kindopt { display: inline-flex; align-items: center; margin: 0; padding: .2rem .4rem; border-radius: 6px; } .kindpick label.kindopt:has(input:checked) { background: var(--mist); font-weight: 600; }

/* 1.69.0: a free day's link keeps no ring once pressed (the browser put focus back on it after the quote page); the keyboard still gets one. */
table.bgridt td.n a.freecell:focus { outline: none; box-shadow: none; } table.bgridt td.n a.freecell:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }

/* 1.69.0: the Maintenance list by the calendar */
h2.calhead { margin: 1.4rem 0 .4rem; font-size: 1.15rem; border-bottom: 1px solid var(--line); padding-bottom: .25rem; } h2.calhead .muted { font-weight: 400; font-family: var(--sans); }
section.jobs.lodgeband { margin-top: .5rem; } section.jobs.lodgeband .jhead h2 { font-size: 1rem; } section.jobs.lodgeband a.lodgelink { text-decoration: none; border-bottom: 1px dotted var(--stone); }
section.jobs.lodgeband .jrow .jstate { display: none; } /* the band head says where the lodge stands */ section.jobs.lodgeband.band-arriving { border-left: 4px solid var(--gold); } section.jobs.lodgeband.band-busy { opacity: .9; }
.flash.quiet { background: var(--mist); color: var(--forest); border-color: var(--gold); }

/* 1.69.0: Settings, Modules: closed for a while */
.closerow { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); } .closerow > b { min-width: 9rem; } .closerow form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 0 auto; } .closerow form label { display: flex; align-items: center; gap: .3rem; margin: 0; } .closerow form input { width: auto; margin: 0; } .closerow form input[name=note] { width: 14rem; max-width: 100%; }
@media (max-width: 640px) { .closerow form { margin-left: 0; flex-basis: 100%; } }

/* 1.69.1: guests who never arrived */
.bar.noshow { background: repeating-linear-gradient(135deg, #f3e2e2 0 6px, #fbf1f1 6px 12px); color: var(--red, #9b2c2c); border: 1px dashed #c98a8a; } tr.noshow td { opacity: .75; } details.inl.expected { display: inline-block; vertical-align: middle; }

/* 1.69.4: the contractor doubles table stacks on a phone (Iga: the merge buttons were a couple of letters per line) */
@media (max-width: 640px) { #duplicates table, #duplicates tbody, #duplicates tr, #duplicates td { display: block; width: 100%; box-sizing: border-box; } #duplicates tr { border-top: 1px solid var(--line); padding: .4rem 0; } #duplicates td { border: 0; padding: .15rem 0; } #duplicates td.actions form { display: inline-block; margin: .25rem .4rem 0 0; } #duplicates td.actions .btn { white-space: nowrap; } }

/* 1.69.5: routine jobs with tick boxes (several done in one go) */
.jrow.jobline.selrow { grid-template-columns: 1.3rem 1.6rem minmax(0, 1fr) 8rem; } .jrow.jobline.selrow .sel { display: flex; align-items: center; } .jrow.jobline.selrow .sel input { margin: 0; width: 1rem; height: 1rem; } .jrow.jobline.selrow a.jtitle { color: inherit; text-decoration: none; } .jrow.jobline.selrow a.jtitle:hover { text-decoration: underline; } .jobs.section summary.jhead label.pick { display: inline-flex; align-items: center; margin-right: .3rem; } .jobs.section summary.jhead label.pick input { margin: 0; }
@media (max-width: 640px) { .jrow.jobline.selrow { grid-template-columns: 1.3rem 1.6rem minmax(0, 1fr); } .jrow.jobline.selrow .jage { display: inline; grid-column: 3; font-size: .72rem; } }
.bulkbar input[name=note] { flex: 1 1 14rem; min-width: 8rem; margin: 0; }

/* 1.69.6: the Move form on a list item is a card of its own, select and button on one line */
form.moveline { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; } form.moveline select { width: auto; max-width: 100%; margin: 0; }

/* 1.69.6: the Done list under a team list: four cells (tick, title, when, Put back), the title gets the room */
.jrow.done { grid-template-columns: 1.6rem minmax(0, 1fr) 6rem auto; } .jrow.done .jmain { min-width: 0; white-space: normal; } .jrow.done .jmain .jtitle { white-space: normal; max-width: 100%; color: var(--stone); font-weight: 500; }
@media (max-width: 700px) { .jrow.done { grid-template-columns: 1.6rem minmax(0, 1fr) auto; } .jrow.done .jage { display: none; } }

/* Settings, Booking system (1.73.0): the list of the booking system's properties, ticked for this hub to read */
.bookgrid { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .bookgrid > section { min-width: 0; }
@media (max-width: 900px) { .bookgrid { grid-template-columns: 1fr; } }
.propbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 .6rem; } .propbar .finder { flex: 1 1 16rem; margin: 0; } .propbar .btn { margin: 0; }
table.props th { white-space: nowrap; } table.props td { vertical-align: middle; } table.props td.proptick { width: 2.2rem; } table.props td.proptick input { width: 1.25rem; height: 1.25rem; margin: 0; display: block; accent-color: var(--forest); cursor: pointer; }
table.props td.propnum { white-space: nowrap; } table.props td.propnum input { width: 5.5rem; margin: 0; padding: .3rem .5rem; display: inline-block; vertical-align: middle; }

/* Settings, Every hub (1.74.0): the board the server's watch keeps */
table.hubs th { white-space: nowrap; } table.hubs td { vertical-align: top; } table.hubs td .badge { white-space: nowrap; }
/* On a phone (where the alert's link lands) each hub is a block: its name and state on top, the rest labelled beneath. */
@media (max-width: 760px) {
  table.hubs, table.hubs tbody { display: block; } table.hubs thead { display: none; }
  table.hubs tr { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .8rem; padding: .7rem 0; border-top: 1px solid var(--line); } table.hubs tr:first-child { border-top: 0; }
  table.hubs td { display: block; border: 0; padding: .1rem 0; min-width: 0; } table.hubs td.hubname, table.hubs td.hubstate, table.hubs td.hubsaid { grid-column: 1 / -1; } table.hubs td.hubsaid:empty, table.hubs td.hubrel:empty { display: none; }
  table.hubs td[data-l]::before { content: attr(data-l); display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--stone); margin-top: .35rem; }
  table.hubs tr.off td[data-l], table.hubs tr.nodetail td[data-l]:not(.hubrel) { display: none; }
}

/* 1.88.0: the Photo button beside a meter's box (the picker itself is out of sight; the label is the button) */
.photopick { display: inline-flex; align-items: center; gap: .35rem; }
.photopick label.btn { position: relative; overflow: hidden; margin: 0; cursor: pointer; }
.photopick input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* 1.89.0: Search's page cards: where it is, its name, what it is for, one live line, Open */
.pagegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; margin: .2rem 0 1.4rem; }
a.pagehit { display: flex; flex-direction: column; gap: .2rem; padding: .85rem 1rem .8rem; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--mist); border-radius: 6px; text-decoration: none; color: inherit; }
a.pagehit:hover, a.pagehit:focus-visible { border-color: var(--gold); border-left-color: var(--gold); }
a.pagehit .pwhere { font-size: .82rem; color: var(--stone); }
a.pagehit .pname { font: 600 1.3rem/1.2 var(--serif); font-variant-numeric: lining-nums; }
a.pagehit .pabout { font-size: .92rem; color: var(--stone); line-height: 1.45; }
a.pagehit .plive { font-size: .9rem; margin-top: .25rem; padding-top: .35rem; border-top: 1px solid var(--line); }
a.pagehit .pgo { margin-top: auto; padding-top: .5rem; font-size: .9rem; font-weight: 500; color: var(--moss); } a.pagehit:hover .pgo { text-decoration: underline; }
.flash a { color: inherit; font-weight: 600; }

/* 1.89.0: a small tile is wide enough for its longest word, so a label is never broken in the middle of a word */
.tiles.small { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } .tiles.small .tile span { overflow-wrap: break-word; }
.actions.roundacts { margin: .2rem 0 .4rem; } .actions.roundacts .btn { margin: 0; } label.tick select.inl { padding: .25rem .5rem; max-width: 100%; }
/* 1.89.0: holiday on the calendar: time away is a band you cannot miss; holiday asked for and not yet agreed is dashed. */
.hubitem.i-away { background: var(--warm); color: var(--forest); font-weight: 500; border-left: 3px solid var(--stone); border-radius: 2px; padding: .05rem .35rem; margin: 1px 0; }
.hubitem.i-asked { background: var(--amber-bg); color: var(--amber); font-weight: 500; border: 1px dashed var(--gold); border-radius: 2px; padding: 0 .3rem; margin: 1px 0; }
.calholiday { display: flex; gap: .5rem .8rem; align-items: center; flex-wrap: wrap; margin: 0 0 .8rem; } .calholiday .btn { margin: 0; }
/* 1.89.0: a button's words stay on one line. A row of buttons wraps as whole buttons; a button in a table cell is never
   squeezed into a column of letters. */
.btn.small, .head .btn, td .btn { white-space: nowrap; }
h1, h2, .rn-big, .sr-name { font-variant-numeric: lining-nums; } /* 1.89.0: a 1 in a heading reads as a 1, not as a capital I */
/* 1.89.0: Owners, Prices. Four sections in place of the one rate card: a list of the sections, a switch, a box with
   what it is measured in beside it, an even grid of boxes, and the round's standing in one panel. */
.setlist { padding: 0; overflow: hidden; }
a.setrow { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) auto auto; gap: .25rem 1.1rem; align-items: center; padding: 1rem 1.1rem; text-decoration: none; color: inherit; border-top: 1px solid var(--line); }
a.setrow:first-child { border-top: 0; } a.setrow:hover { background: #FAF6EC; } a.setrow:hover .sr-go { text-decoration: underline; }
.setrow .sr-name { font: 600 1.3rem/1.2 var(--serif); } .setrow .sr-line { color: var(--stone); font-size: .93rem; line-height: 1.45; }
.setrow .sr-state { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; } .setrow .sr-go { color: var(--moss); font-weight: 500; font-size: .9rem; }
@media (max-width: 760px) { a.setrow { grid-template-columns: minmax(0, 1fr) auto; } .setrow .sr-line { grid-column: 1 / -1; grid-row: 2; } .setrow .sr-state { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; } .setrow .sr-go { grid-column: 2; grid-row: 1; } }
.tabs.pricetabs { margin: .1rem 0 1rem; }

.switch { display: flex; gap: .85rem; align-items: flex-start; margin: 0; cursor: pointer; font-weight: 400; position: relative; }
.switch input { position: absolute; opacity: 0; width: 2.9rem; height: 1.6rem; margin: 0; left: 0; top: .15rem; cursor: pointer; }
.switch .track { flex: none; width: 2.9rem; height: 1.6rem; border-radius: 99px; background: #BDB5A3; position: relative; transition: background .15s; margin-top: .15rem; }
.switch .track::after { content: ''; position: absolute; top: .18rem; left: .18rem; width: 1.24rem; height: 1.24rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(28, 43, 30, .3); transition: transform .15s; }
.switch input:checked + .track { background: var(--moss); } .switch input:checked + .track::after { transform: translateX(1.3rem); }
.switch input:focus-visible + .track { outline: 3px solid var(--gold-lt); outline-offset: 2px; }
.switch .swt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; } .switch .swt b { font: 600 1.3rem/1.2 var(--serif); } .switch .swt .muted { font-size: .93rem; line-height: 1.45; }
.switch .swword { flex: none; font-size: .8rem; font-weight: 600; padding: .15rem .6rem; border-radius: 99px; margin-top: .15rem; background: #ECE6DA; color: var(--stone); }
.switch .swword .won { display: none; } .switch input:checked ~ .swword { background: var(--green-bg); color: var(--green-ink); } .switch input:checked ~ .swword .won { display: inline; } .switch input:checked ~ .swword .woff { display: none; }
@media (prefers-reduced-motion: reduce) { .switch .track, .switch .track::after { transition: none; } }
.swcard { padding: 1.05rem 1.15rem; } .swcard .swbody { margin-top: 1rem; padding-top: .2rem; border-top: 1px solid var(--line); } .swcard .swoff { display: none; margin: .8rem 0 0 3.75rem; }
@supports selector(:has(a)) { .swcard:not(:has(.switch input:checked)) .swbody { display: none; } .swcard:not(:has(.switch input:checked)) .swoff { display: block; } }

.grouph { font: 600 .98rem/1.3 var(--sans); margin: 1.15rem 0 .5rem; color: var(--forest); } .card > .grouph:first-child { margin-top: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: .9rem 1.2rem; align-items: start; margin-bottom: .6rem; }
label.pfld { margin: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 500; } label.pfld input, label.pfld select { margin: 0; }
.affix { display: flex; align-items: stretch; border: 1px solid var(--field); border-radius: 4px; background: #fff; overflow: hidden; }
.affix:focus-within { outline: 3px solid var(--gold-lt); outline-offset: 1px; }
.affix input { border: 0; margin: 0; min-width: 4.6rem; flex: 1 1 4.6rem; width: 100%; text-align: right; font-variant-numeric: tabular-nums lining-nums; border-radius: 0; } .affix input:focus { outline: none; }
.affix i { font-style: normal; display: flex; align-items: center; padding: 0 .65rem; color: var(--stone); background: var(--cream); font-size: .85rem; font-weight: 400; white-space: nowrap; }
.affix i:first-child { border-right: 1px solid var(--line); } .affix input + i { border-left: 1px solid var(--line); }
.tickrow { display: flex; gap: .4rem 1.6rem; flex-wrap: wrap; } .tickrow label.tick { margin: 0; }
details.morechoices { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .7rem; } details.morechoices > summary { cursor: pointer; color: var(--moss); font-weight: 500; font-size: .93rem; }
.startrow { display: flex; gap: .9rem 1.2rem; flex-wrap: wrap; align-items: flex-end; margin-top: 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); } .startrow label.pfld { flex: 0 0 12rem; } .startrow label.pfld.grow { flex: 1 1 16rem; } .startrow + p { margin: .5rem 0 0; }
.swcard .actions.savebar { margin: .9rem 0 0; } .pricerow.addrow { border-top: 0; padding-top: 0; }
.actions.savebar { margin: .2rem 0 1.4rem; } .actions.savebar .btn { margin: 0; min-width: 7rem; }

.roundnow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1.4rem; align-items: center; border-left: 4px solid var(--moss); padding: 1rem 1.15rem; }
.roundnow.due { border-left-color: var(--gold); } .roundnow.off { border-left-color: var(--mist); }
.roundnow p { margin: 0; } .roundnow .rn-k { font-size: .9rem; color: var(--stone); } .roundnow .rn-big { font: 600 1.75rem/1.15 var(--serif); margin: .05rem 0 .25rem; font-variant-numeric: lining-nums; } .roundnow.off .rn-big { font-size: 1.35rem; }
.roundnow .actions .btn { margin: 0; } .roundnow details.rn-move { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .3rem; } .roundnow details.rn-move > summary { cursor: pointer; color: var(--moss); font-weight: 500; font-size: .93rem; }
.moveform { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; margin: .7rem 0 .5rem; } .moveform label.pfld { flex: 0 0 12rem; } .moveform .btn { margin: 0; }
@media (max-width: 640px) { .roundnow { grid-template-columns: 1fr; } }

.svcrow { display: grid; grid-template-columns: minmax(12rem, 2.4fr) 8.5rem 7.2rem minmax(8rem, 1.5fr) 4.6rem; gap: .45rem .6rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--line); }
.svcrow input, .svcrow select { margin: 0; } .svcrow .btn { margin: 0; justify-self: end; } .svcrow.svchead { border-top: 0; font-size: .82rem; color: var(--stone); padding-bottom: .15rem; } .svcrow.svchead + .svcrow { border-top: 0; }
.svcrow.blank input::placeholder { color: #9A927F; }
@media (max-width: 760px) { .svcrow { grid-template-columns: 1fr 1fr; padding: .7rem 0; } .svcrow .svn, .svcrow .svnote { grid-column: 1 / -1; } .svcrow.svchead { display: none; } .svcrow .btn { grid-column: 1 / -1; justify-self: start; } }

/* 1.90.0: Settings, Roles and access. A row for each kind of login, a grid of what each team opens, a block for each team's lead. */
.rolerow { display: grid; grid-template-columns: 14rem 6rem minmax(0, 1fr); gap: .3rem 1rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); } .rolerow:first-of-type { border-top: 0; }
.rolerow .rr-name { font-weight: 600; margin: 0; } .rolerow .rr-name input { margin: 0; font-weight: 600; } .rolerow .rr-what { font-size: .92rem; }
@media (max-width: 700px) { .rolerow { grid-template-columns: minmax(0, 1fr) auto; } .rolerow .rr-what { grid-column: 1 / -1; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.rolegrid { width: 100%; border-collapse: collapse; } table.rolegrid th, table.rolegrid td { padding: .45rem .7rem; border-top: 1px solid var(--line); text-align: left; }
table.rolegrid thead th { border-top: 0; font: 600 .95rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--forest); } table.rolegrid thead th:not(:first-child), table.rolegrid td.rg-tick, table.rolegrid td.rg-none { text-align: center; width: 9.5rem; }
table.rolegrid td.rg-tick input { width: 1.25rem; height: 1.25rem; margin: 0; display: inline-block; accent-color: var(--moss); } table.rolegrid td.rg-none { color: var(--field); } table.rolegrid tbody tr:hover { background: #FAF6EC; }
.rankgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .4rem 1.6rem; } .rankblock .grouph { margin-top: .6rem; } .rankblock .rankname { max-width: 18rem; } .rankblock .rankwho { margin: .8rem 0 .2rem; } .rankblock .tickrow { gap: .2rem 1.2rem; }
.setlist.wide a.setrow { grid-template-columns: 17.5rem minmax(0, 1fr) auto auto; } @media (max-width: 760px) { .setlist.wide a.setrow { grid-template-columns: minmax(0, 1fr) auto; } }
table.rolegrid thead th .asitcame { display: block; font-weight: 400; }
/* 1.90.0: something on this page that needs putting right (a team relied on for a duty it can no longer open) */
.putright { background: var(--red-bg); color: var(--red); border-left: 3px solid var(--red); border-radius: 4px; padding: .6rem .8rem; margin: 0 0 .8rem; font-size: .95rem; }

/* ================= 1.90.0: the clean-up =================
   Eight things agreed after a sweep of every page: forms that line up, one Set up button per section, the long grey
   print behind "How this works", long pages folded, one switch for on and off, plain headings, one button, and a
   person's page in tabs. Everything here comes after the rules it replaces, so it wins without !important. */

/* 1. Forms line up: three even boxes (they were 1 : 1.4 : 1.2), level with each other whatever the labels' lengths */
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.grid2 { align-items: end; } .grid2.top { align-items: start; }
.grid2 > label, .grid3 > label, .grid4 > label { margin-top: 0; }
.grid3 > .card, .grid3 > section, .grid3 > div.tile, .grid2 > .card, .grid2 > section { align-self: start; }
@media (max-width: 760px) { .grid3 { grid-template-columns: 1fr; } }

/* 6. Plain headings: no small amber capitals. A heading inside a card, and the head of a table, read as words. */
h3 { font: 600 1rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--forest); margin: 0 0 .45rem; }
th, table.rows th { font: 600 .82rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--stone); }
h2.group-title { font: 600 1rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--forest); }
table.co td[data-label]::before, table.rows td::before, table.stack td[data-l]::before, table.hubs td[data-l]::before { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; }

/* 7. One button. The quiet one (Remove, Undo, Change) has an edge, so it reads as something to press and not as a
      word; on a phone every small button is a thumb high. */
.btn.quiet { border-color: var(--line); background: transparent; color: var(--forest); }
.btn.quiet:hover { background: var(--warm); color: var(--forest); text-decoration: none; }
.btn.quiet.danger, .btn.danger.quiet { color: var(--red); border-color: var(--red-bg); }
@media (max-width: 760px) {
  .btn.small, .btn.tiny, td .btn, .head .btn { min-height: 2.75rem; padding: .5rem .85rem; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
  .btn.tiny { margin-left: 0; }
}

/* 5. One switch for anything that is simply on or off: class="sw" on the tick box. Drawn without ::after, which
      some browsers do not paint on a form control. */
input[type="checkbox"].sw { -webkit-appearance: none; appearance: none; flex: none; width: 2.6rem; height: 1.45rem; margin: 0; padding: 0; border: 0; border-radius: 99px; cursor: pointer; vertical-align: middle;
  background: #BDB5A3 radial-gradient(circle at center, #fff 0 .5rem, rgba(28, 43, 30, .18) .53rem, transparent .6rem) no-repeat left center / 1.45rem 1.45rem; transition: background-position .15s, background-color .15s; }
input[type="checkbox"].sw:checked { background-color: var(--moss); background-position: right center; }
input[type="checkbox"].sw:focus-visible { outline: 3px solid var(--gold-lt); outline-offset: 2px; }
input[type="checkbox"].sw:disabled { opacity: .55; cursor: default; }
label.tick:has(> input.sw) { align-items: center; gap: .7rem; }
@media (prefers-reduced-motion: reduce) { input[type="checkbox"].sw { transition: none; } }

/* 3. One sentence at the top; the rest behind "How this works" */
details.how { margin: .1rem 0 1rem; }
details.how > summary { cursor: pointer; color: var(--moss); font-weight: 500; font-size: .93rem; display: inline-block; list-style: none; }
details.how > summary::-webkit-details-marker { display: none; }
details.how > summary::after { content: ' ▸'; font-size: .8rem; } details.how[open] > summary::after { content: ' ▾'; }
details.how > .howbody { margin-top: .5rem; padding: .7rem .9rem; background: var(--cream); border-left: 3px solid var(--line); border-radius: 4px; color: var(--ink); font-size: .93rem; line-height: 1.55; max-width: 78ch; }
details.how > .howbody > :first-child { margin-top: 0; } details.how > .howbody > :last-child { margin-bottom: 0; }
.card > details.how:last-child { margin-bottom: 0; }

/* 2. Set up: one button, top right of every section, in the same place on every page */
.setupline { display: flex; justify-content: flex-end; margin: -.35rem 0 .35rem; min-height: 0; }
.setupline .btn { margin: 0; }
@media print { .setupline { display: none; } }
.head > .setupbtn { margin: 0 0 0 -.5rem; align-self: center; } .head > h1 + .setupbtn { margin-left: 0; } .head > :not(h1):has(+ .setupbtn) { margin-left: auto; }

/* 4. Hot tubs: what is left to test first; a tub tested and in range is one line */
ul.tubdonelist { list-style: none; margin: 0 0 .4rem; padding: 0; border-top: 1px solid var(--line); }
li.tubdone { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--line); }
li.tubdone .td-lodge .num { font-weight: 600; margin-right: .3rem; }
li.tubdone details.td-again { justify-self: end; } li.tubdone details.td-again > summary { list-style: none; cursor: pointer; margin: 0; } li.tubdone details.td-again > summary::-webkit-details-marker { display: none; }
li.tubdone details.td-again[open] { grid-column: 1 / -1; justify-self: stretch; } li.tubdone details.td-again[open] > summary { display: none; } li.tubdone .td-in { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .2rem 0 .3rem; }
@media (max-width: 760px) { li.tubdone { grid-template-columns: minmax(0, 1fr) auto; } li.tubdone .td-test { grid-column: 1 / -1; grid-row: 2; } }
.grouph .count { display: inline-block; min-width: 1.3rem; padding: 0 .4rem; border-radius: 99px; background: var(--mist); color: var(--forest); font-size: .78rem; line-height: 1.3rem; text-align: center; margin-left: .3rem; vertical-align: middle; font-weight: 600; }

/* 5. a list of switches, one under the other, each with a quieter second line */
.swlist { display: flex; flex-direction: column; gap: .75rem; margin: .3rem 0 .6rem; }
label.tick.swline { margin: 0; flex-wrap: nowrap; align-items: flex-start; gap: .75rem; } label.tick.swline > input.sw { margin-top: .1rem; }
label.tick.swline .tl { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } label.tick.swline .swsub { line-height: 1.45; }
.modlist label.tick.swline.module { padding: .7rem 0; border-top: 1px solid var(--line); } .modlist label.tick.swline.module:first-child { border-top: 0; } .modlist label.module b { min-width: 0; }
details.whogroup { border-top: 1px solid var(--line); } details.whogroup:first-of-type { margin-top: .6rem; }
details.whogroup > summary { cursor: pointer; list-style: none; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .75rem 0; } details.whogroup > summary::-webkit-details-marker { display: none; }
details.whogroup > summary::before { content: '▸'; color: var(--stone); font-size: .9rem; flex: none; } details.whogroup[open] > summary::before { content: '▾'; }
details.whogroup .wg-name { font: 600 1rem/1.3 var(--sans); color: var(--forest); } details.whogroup[open] { padding-bottom: .4rem; }
@media print { details.how > summary { display: none; } details.how > .howbody { background: none; border: 0; padding: 0; } }
label.tick.swline .tl.swrow { flex-direction: row; align-items: center; gap: .5rem; flex-wrap: wrap; } .grid3 > label.tick.swline { align-self: end; padding-bottom: .55rem; }

/* 1.90.0: Give to a contractor: a switch, then who and when */
.tocontractor { margin: .7rem 0 .2rem; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--cream); }
.tocontractor .tc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .7rem; align-items: end; } .tocontractor .tc-fields label { margin: 0; }
@supports selector(:has(a)) { .tocontractor:not(:has(input[name="to_contractor"]:checked)) .tc-fields { display: none; } }
@media (max-width: 760px) { .tocontractor .tc-fields { grid-template-columns: 1fr; } }
.stackform .tocontractor .tc-fields { grid-template-columns: 1fr; }
.bulkbar .bulkfirm input[type="date"] { width: auto; }
.bulkbar .btn.quiet { border-color: rgba(255, 255, 255, .28); } .bulkbar .btn.quiet:hover { background: rgba(255, 255, 255, .1); color: var(--cream); }
.head .actions > .setupbtn { margin: 0; } label > .pair { align-items: center; } label > .pair > input, label > .pair > select { margin-top: 0; } label > .pair { margin-top: .25rem; }
@media (max-width: 760px) { .jchips { flex-wrap: wrap; overflow: visible; row-gap: .25rem; } .jchips .badge { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } }

/* 1.90.0: a contractor's own page. Big rows to press on a phone; nothing that leads anywhere else. */
.firmjobs { padding-bottom: .3rem; }
a.firmjob { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; min-height: 3.2rem; }
a.firmjob:hover .fj-go { text-decoration: underline; } .firmjob .fj-what { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .firmjob .fj-what b { font-size: 1.02rem; } .firmjob .fj-what .muted { font-size: .9rem; }
.firmjob .fj-go { color: var(--moss); font-weight: 500; font-size: .9rem; white-space: nowrap; } .firmjob.said .fj-go { color: var(--stone); }
@media (max-width: 760px) { a.firmjob { grid-template-columns: minmax(0, 1fr) auto; } .firmjob .fj-day { grid-column: 1 / -1; } }
.firmdetail { margin: .8rem 0 0; line-height: 1.55; } .firmphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin-top: .8rem; } .firmphotos img { width: 100%; height: 9rem; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
#saysdone { margin-bottom: .7rem; }
.btn.wrapok { white-space: normal; text-align: left; height: auto; } form.inline:has(> .btn.wrapok) { max-width: 100%; }

/* 1.91.0: inspection reports. The report reads as one page: where it stands, what was found, what guests had said. */
ol.inssteps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .35rem; margin: .2rem 0 1rem; padding: 0; }
ol.inssteps li { margin: 0; border-top: 3px solid var(--mist); padding-top: .35rem; color: var(--stone); min-width: 0; }
ol.inssteps li b { display: block; font-weight: 500; font-size: .86rem; overflow-wrap: anywhere; } ol.inssteps li .muted { display: block; font-size: .74rem; line-height: 1.3; overflow-wrap: anywhere; }
ol.inssteps li.done { border-top-color: var(--moss); color: var(--ink); } ol.inssteps li.done b::before { content: "\2713\00a0"; color: var(--moss); }
ol.inssteps li.on { border-top-color: var(--gold); color: var(--ink); } ol.inssteps li.on b { font-weight: 600; }
.insmeta { color: var(--stone); font-size: .9rem; margin: -.3rem 0 .8rem; }
ul.inslist { list-style: none; margin: .3rem 0 0; padding: 0; }
li.insline { display: grid; grid-template-columns: minmax(8rem, 1.1fr) 8.5rem minmax(0, 2fr) auto; gap: .2rem .8rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); } li.insline:first-child { border-top: 0; }
li.insline .il-lodge a { font-weight: 500; text-decoration: none; color: inherit; } li.insline .il-lodge .num { display: inline-block; min-width: 1.6rem; font-variant-numeric: lining-nums; color: var(--forest); font-weight: 600; }
li.insline .il-go { justify-self: end; } li.insline .il-go .btn, li.insline .il-go form { margin: 0; }
table.insall td, table.insall th { vertical-align: middle; } table.insall .num { display: inline-block; min-width: 1.6rem; font-weight: 600; font-variant-numeric: lining-nums; } table.insall td.right { text-align: right; } table.insall td .btn, table.insall td form { margin: 0; }
ul.insfoundlist { list-style: none; margin: .2rem 0 0; padding: 0; }
li.insfound { border-top: 1px solid var(--line); border-left: 3px solid var(--gold); padding: .6rem 0 .65rem .75rem; margin: 0; } li.insfound:first-child { border-top: 0; }
li.insfound.fixed { border-left-color: var(--moss); } li.insfound.notfixed { border-left-color: var(--red); }
li.insfound .if-head b { display: block; font-weight: 600; } li.insfound p { margin: .3rem 0 0; } li.insfound .photos { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: .5rem; max-width: 34rem; }
li.insfound .if-acts form, .if-acts form { margin: 0; } form.upload.inline .filepick .btn { margin: 0; }
.insnote { border-left: 3px solid var(--mist); padding-left: .75rem; margin: .4rem 0 .15rem; line-height: 1.55; } #general .photos { max-width: 40rem; }
.insp .irow input.rcwords { grid-column: 1 / -1; font-size: .9rem; margin: 0; }
@supports selector(:has(a)) { .insp .irow input.rcwords { display: none; } .insp .irow:has(input[value=not]:checked) input.rcwords { display: block; } }
details.rcphotos { margin: .2rem 0 .6rem; } details.rcphotos li { display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; } details.rcphotos li > span:first-child { flex: 1 1 12rem; min-width: 0; }
.lodgeinsp { margin: -.3rem 0 .8rem; font-size: .9rem; color: var(--stone); }
@media (max-width: 700px) {
  ol.inssteps { gap: .25rem; } ol.inssteps li b { font-size: .74rem; } ol.inssteps li .muted { display: none; } ol.inssteps li.on .muted { display: block; }
  li.insline { grid-template-columns: minmax(0, 1fr) auto; } li.insline .il-what { grid-column: 1 / -1; grid-row: 2; } li.insline .il-go { grid-column: 2; grid-row: 1 / span 1; } li.insline .il-state { grid-column: 1; grid-row: 3; }
  table.insall th:nth-child(3), table.insall td:nth-child(3) { display: none; }
}
@media print { ol.inssteps li .muted { display: block; } li.insfound { break-inside: avoid; } li.insfound .photos { grid-template-columns: repeat(4, 1fr); } }
li.insfound figure.photo form, #general figure.photo form { margin: .15rem 0 0; text-align: center; } table.insall td a, table.insall td a:hover { text-decoration: none; } table.insall td:first-child a { color: inherit; font-weight: 500; } table.insall td:first-child a:hover { text-decoration: underline; }
@media (max-width: 700px) { main .head .actions .btn.insprint, main .btn.insprint { display: none !important; } }
@media (max-width: 700px) { table.insall td:first-child a { display: inline-flex; gap: .3rem; align-items: baseline; } table.insall .num { min-width: 1.3rem; } table.insall td, table.insall th { padding-right: .4rem; } table.insall td .btn { padding-left: .65rem; padding-right: .65rem; } }

/* 1.92.0: deep cleans, made for a phone. A job across the park has a button of its own and opens as a list: what is
   owing first, one thumb-size Done each. A lodge's list is rows you press, with the up-to-date ones folded away. */
.jobbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; margin: .5rem 0 .2rem; }
a.jobbtn { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .95rem; border: 1px solid var(--line); border-left: 4px solid var(--moss); border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; }
a.jobbtn:hover, a.jobbtn:focus-visible { border-color: var(--forest); border-left-color: var(--forest); text-decoration: none; }
a.jobbtn b { font-weight: 600; font-size: 1.02rem; line-height: 1.3; } a.jobbtn .jb-state { font-size: .92rem; color: var(--forest); } a.jobbtn .muted { font-size: .78rem; }
a.jobbtn.bad { border-left-color: var(--red); } a.jobbtn.bad .jb-state { color: var(--red); font-weight: 500; } a.jobbtn.warm { border-left-color: var(--gold); } a.jobbtn.warm .jb-state { color: #8A6417; }
form.jobpick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: .8rem 0 0; } form.jobpick label { margin: 0; } form.jobpick select { margin: 0; max-width: 100%; flex: 1 1 14rem; }
.tabs.jobtabs { margin: 0 0 .3rem; } .tabs.jobtabs .tab b { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 99px; background: var(--mist); color: var(--ink); font-size: .74rem; line-height: 1.25rem; text-align: center; font-weight: 600; } .tabs.jobtabs .tab.on b { background: var(--gold); color: #fff; }
ul.dcjobs { list-style: none; margin: 0; padding: 0; }
li.dcrow { display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(0, 2fr) auto; gap: .2rem .9rem; align-items: center; padding: .55rem 0 .55rem .7rem; margin: 0; border-top: 1px solid var(--line); border-left: 3px solid transparent; } li.dcrow:first-child { border-top: 0; }
li.dcrow.today { padding-right: .7rem; } li.dcrow.today .jr-go .linkish { padding: .5rem .2rem; }
li.dcrow.overdue { border-left-color: var(--red); } li.dcrow.soon { border-left-color: var(--gold); } li.dcrow.today { border-left-color: var(--moss); background: var(--green-bg); }
li.dcrow .jr-lodge { display: flex; gap: .45rem; align-items: baseline; color: inherit; text-decoration: none; min-width: 0; } li.dcrow .jr-lodge .num { font: 600 1.15rem/1.2 var(--serif); min-width: 1.5rem; color: var(--forest); } li.dcrow .jr-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; } li.dcrow .jr-lodge:hover .jr-name { text-decoration: underline; }
li.dcrow .jr-when { display: flex; flex-wrap: wrap; gap: .1rem .7rem; align-items: baseline; min-width: 0; } li.dcrow .jr-due { font-weight: 500; } li.dcrow .jr-due.red { color: var(--red); } li.dcrow .jr-due.amber { color: #8A6417; } li.dcrow .jr-due.good { color: var(--forest); }
li.dcrow .jr-go { justify-self: end; } li.dcrow .jr-go form, li.dcrow .jr-go .btn { margin: 0; } li.dcrow .jr-go .btn { min-width: 4.6rem; }
.jobfoot { margin: .7rem 0 0; }
ul.deeplist { list-style: none; margin: 0; padding: 0; }
li.dl-row { display: flex; align-items: center; gap: .6rem; margin: 0; padding: 0; border-top: 1px solid var(--line); } ul.deeplist li.dl-row:first-child { border-top: 0; }
li.dl-row .dl-tick { flex: 1 1 auto; display: flex; align-items: flex-start; gap: .7rem; margin: 0; padding: .6rem 0; min-width: 0; font-weight: 400; cursor: pointer; } li.dl-row .dl-tick.dl-plain { cursor: default; padding-left: 2.05rem; }
li.dl-row .dl-tick input[type=checkbox] { flex: none; width: 1.35rem; height: 1.35rem; margin: .1rem 0 0; accent-color: var(--forest); }
li.dl-row .dl-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } li.dl-row .dl-title { font-weight: 500; line-height: 1.3; } li.dl-row .dl-meta { line-height: 1.35; }
li.dl-row .dl-side { flex: none; display: flex; align-items: center; gap: .5rem; } li.dl-row .dl-side .btn { margin: 0; }
li.dl-row:has(input:checked) { background: var(--green-bg); box-shadow: -.6rem 0 0 var(--green-bg), .6rem 0 0 var(--green-bg); }
details.dl-later { border-top: 1px solid var(--line); margin-top: .2rem; padding-top: .2rem; } details.dl-later.first { border-top: 0; margin-top: .4rem; } details.dl-later .tickbtns { display: flex; gap: .4rem; margin: .1rem 0 .4rem; } details.dl-later > summary { padding: .6rem 0; font-weight: 500; cursor: pointer; } details.dl-later > summary .count { margin-left: .2rem; }
.deepform .head { align-items: center; } .tickbtns .btn { margin: 0; }
.deepform .dl-day { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .1rem 0 .5rem; font-weight: 400; font-size: .9rem; } .deepform .dl-day input { margin: 0; width: auto; } .actions.savebar.dl-save { margin: .9rem 0 .3rem; }
.dl-save .btn[disabled], .dl-save .btn.idle { opacity: .55; }
details.card.free > summary .muted { font-weight: 400; }
a.badge.deepchip { text-decoration: none; }
@media (max-width: 700px) {
  .jobbtns { grid-template-columns: 1fr; }
  li.dcrow { grid-template-columns: minmax(0, 1fr) auto; padding-left: .6rem; } li.dcrow .jr-lodge { grid-column: 1; grid-row: 1; } li.dcrow .jr-when { grid-column: 1; grid-row: 2; font-size: .9rem; } li.dcrow .jr-go { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  li.dl-row { flex-wrap: wrap; gap: 0 .5rem; } li.dl-row .dl-tick { flex-basis: calc(100% - 6.5rem); padding: .7rem 0; } li.dl-row .dl-tick input[type=checkbox] { width: 1.6rem; height: 1.6rem; margin-top: 0; } li.dl-row .dl-tick.dl-plain { padding-left: 2.3rem; }
  .deepform .tickbtns { display: flex; flex-wrap: nowrap; gap: .4rem; width: 100%; } .deepform .tickbtns .btn { flex: 1 1 0; width: auto; min-width: 0; padding-left: .3rem; padding-right: .3rem; white-space: nowrap; font-size: .8rem; }
  .deepform .actions.savebar.dl-save { position: sticky; bottom: calc(3.6rem + env(safe-area-inset-bottom)); z-index: 5; background: #FFFDF9; border-top: 1px solid var(--line); margin: .5rem -.2rem 0; padding: .55rem .2rem; } .deepform .dl-save .btn { width: 100%; }
}
@media print { .tickbtns, .dl-save, .jr-go, .jobtabs { display: none !important; } details.dl-later > summary { display: none; } }

/* 1.92.1: the same deep-clean job under two names, side by side, with one press to keep either */
ul.replist { list-style: none; margin: .4rem 0 0; padding: 0; } li.rp-row { margin: 0; padding: .7rem 0; border-top: 1px solid var(--line); } li.rp-row:first-child { border-top: 0; }
.rp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1.2rem; } .rp-job { display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding-left: .7rem; border-left: 3px solid var(--mist); } .rp-job:first-child { border-left-color: var(--moss); } .rp-job b { font-weight: 600; overflow-wrap: anywhere; }
.rp-acts { margin: .55rem 0 0; gap: .4rem .5rem; } .rp-acts form, .rp-acts .btn { margin: 0; }
form.mergeform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; } form.mergeform label { margin: 0; } form.mergeform select { max-width: 18rem; }
@media (max-width: 700px) { .rp-pair { grid-template-columns: 1fr; } }
/* 1.92.1: N/A on a lodge's deep-clean row: this lodge does not have it */
li.dl-row .dl-na { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .3rem .1rem; font-size: .8rem; font-weight: 400; color: var(--stone); cursor: pointer; white-space: nowrap; } li.dl-row .dl-na input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--stone); }
li.dl-row:has(.dl-na input:checked) { background: var(--mist); box-shadow: -.6rem 0 0 var(--mist), .6rem 0 0 var(--mist); } li.dl-row:has(.dl-na input:checked) .dl-title { text-decoration: line-through; color: var(--stone); } li.dl-row:has(.dl-na input:checked) .dl-tick input { opacity: .35; }
li.dl-row.na .dl-title { color: var(--stone); } li.dcrow.na { opacity: .75; } details.dl-nalist > summary { font-weight: 500; }
@media (max-width: 700px) { li.dl-row .dl-side { flex-direction: column; align-items: flex-end; gap: .15rem; } li.dl-row .dl-na { padding: .45rem .1rem; } li.dl-row .dl-na input { width: 1.25rem; height: 1.25rem; } }
form.rp-all { margin: .5rem 0 .2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; } form.rp-all .btn { margin: 0; }
/* 1.93.0: the cleaning day. Key in door, the shutdown asked for on a finished lodge, quick deep-clean jobs on a clean, ready-by groups */
.hkrow .hkextra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .35rem; padding: .5rem .7rem; border-radius: 8px; background: color-mix(in srgb, var(--gold) 9%, transparent); }
.hkrow .hkextra form { margin: 0; } .hkrow .hkextra .btn { margin: 0; } .hkx-label { font-size: .9rem; font-weight: 500; display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.hkshut details.hkx-steps { flex-basis: 100%; margin: 0; } .hkshut details.hkx-steps summary { cursor: pointer; color: var(--stone); } .hkshut details.hkx-steps ol { margin: .35rem 0 0 1.2rem; }
.hkquick { background: var(--warm); } .hkquick .hkx-label { flex-basis: 100%; color: var(--stone); font-weight: 400; font-size: .84rem; }
ul.hkq { list-style: none; margin: 0; padding: 0; flex-basis: 100%; display: flex; flex-direction: column; } ul.hkq li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem 0; border-top: 1px solid var(--line); } ul.hkq li:first-child { border-top: 0; }
ul.hkq .hkq-t { min-width: 0; overflow-wrap: anywhere; } ul.hkq li.done .hkq-t { color: var(--stone); } ul.hkq .btn { min-width: 4.2rem; }
.btn.keybtn { background: #2f7d8c; border-color: #2f7d8c; color: #fff; } .btn.keybtn:hover { background: #276b78; border-color: #276b78; } .badge.keychip.green { background: #dcefee; color: #1f5a66; }
.hkbtns .hkundo, .jchips .hkundo { padding: .1rem .5rem; font-size: .76rem; } .jchips form.inline { display: inline; margin: 0; }
h3.hkby { margin: .9rem .7rem .2rem; font-size: .92rem; font-weight: 600; color: var(--forest); display: flex; align-items: center; gap: .45rem; } section.jobs h3.hkby:first-of-type { margin-top: .5rem; } h3.hkby + .jrow { border-top: 0; }
@media (max-width: 700px) { .hkrow .hkextra .btn.primary { flex: 1 1 10rem; padding: .7rem 1rem; font-size: 1rem; } ul.hkq .btn { padding: .55rem .9rem; font-size: .95rem; } ul.hkq li { padding: .4rem 0; } }
/* 1.93.0: the map takes the colour of a lodge's clean, and a park chooses its own colours */
svg.parkmap a.pin.st-key rect { fill: #2f7d8c; } svg.parkmap a.pin.st-cleaning rect { fill: #d07a2d; } svg.parkmap a.pin.st-cleaned rect { fill: #a9cf9a; } svg.parkmap a.pin.st-ready rect { fill: #5fa55a; } svg.parkmap a.pin.st-shut rect { fill: #6f7f93; }
svg.parkmap a.pin.st-key text, svg.parkmap a.pin.st-cleaning text, svg.parkmap a.pin.st-ready text, svg.parkmap a.pin.st-shut text { fill: #fff; } svg.parkmap a.pin.st-cleaned text { fill: #1b2a1b; }
.legend .st-key::before { background: #2f7d8c; } .legend .st-cleaning::before { background: #d07a2d; } .legend .st-cleaned::before { background: #a9cf9a; } .legend .st-ready::before { background: #5fa55a; } .legend .st-shut::before { background: #6f7f93; } .legend.stagelegend { margin-top: .1rem; }
.mapcols { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin: .3rem 0 .6rem; } label.mapcol { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 400; cursor: pointer; } label.mapcol input[type=color] { width: 2.4rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
/* 1.94.0: an area's home page: what needs someone, then a card a topic */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .7rem; margin: .2rem 0 .8rem; }
a.card.topic { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: .85rem 1rem .9rem; text-decoration: none; color: inherit; border-left: 3px solid var(--mist); transition: border-color .12s, box-shadow .12s; }
a.card.topic:hover, a.card.topic:focus-visible { border-left-color: var(--gold); box-shadow: 0 2px 10px rgba(0,0,0,.07); } a.card.topic:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.topic-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; } .topic-name { font: 500 1.25rem/1.2 var(--serif); color: var(--forest); } .topic-go { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); white-space: nowrap; } a.card.topic:hover .topic-go { color: var(--gold); }
.topic-about { font-size: .86rem; line-height: 1.4; color: var(--stone); }
.tfacts { display: flex; flex-wrap: wrap; gap: .3rem .45rem; margin-top: .15rem; } .tfact { display: inline-flex; align-items: baseline; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .84rem; background: var(--warm); color: var(--ink); } .tfact b { font-weight: 600; font-variant-numeric: lining-nums; }
.tfact.bad { background: var(--red-bg); color: var(--red); } .tfact.warm { background: #F3E2B8; color: #654a12; } .tfact.good { background: var(--green-bg); color: var(--green-ink); }
.tiles.areatiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } a.tile { text-decoration: none; color: inherit; } .areatiles .tile .tnote { color: var(--stone); } p.areaclear { margin-bottom: .8rem; } p.areanote { margin-top: .2rem; }
.menu.grouped h4 a.arealink::after { content: ' \203A'; color: var(--gold-lt); } .pagegroup h4 a.arealink { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: .5rem; } .pagegroup h4 .areago { font: 400 .72rem/1 var(--sans, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid currentColor; border-radius: 999px; padding: .12rem .5rem; }
/* 1.94.0: the linen stock take on its own page */
form.stocktake table.count td.amt input { text-align: right; } form.stocktake .savebar { margin-top: .7rem; }
@media (max-width: 700px) { .topics { grid-template-columns: 1fr; } form.stocktake .savebar { position: sticky; bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px)); background: var(--card); padding: .5rem 0; } form.stocktake .savebar .btn { flex: 1; padding: .75rem 1rem; font-size: 1rem; } }
/* 1.94.0: arrival codes. The page a guest's phone opens, and the sheet of codes to print */
.card.checkin { margin: 2.2rem auto 1rem; max-width: 26rem; text-align: center; padding: 1.6rem 1.4rem 1.2rem; } .card.checkin h1 { margin: .2rem 0 .6rem; font-size: 2rem; line-height: 1.15; }
.ck-park { margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); } .ck-lead { font-size: 1.08rem; margin: .4rem 0 .8rem; } .ck-done { color: var(--green-ink); } .ck-from { margin: 0 0 .8rem; }
.card.checkin form { margin: 1rem 0 .6rem; } .btn.ck-btn { display: block; width: 100%; padding: 1.05rem 1rem; font-size: 1.2rem; border-radius: 10px; } .ck-note { margin: 1.1rem 0 0; }
.qrsample svg.qr { width: 9rem; height: 9rem; display: block; }
.qrsheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; } .qrcard { background: #fff; border: 1px dashed #b9b9ad; border-radius: 6px; padding: .9rem .9rem .8rem; text-align: center; break-inside: avoid; }
.qrcard svg.qr { width: 100%; max-width: 11.5rem; height: auto; display: block; margin: .3rem auto .4rem; } .qr-park { margin: 0; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #555; } .qr-unit { margin: .1rem 0 0; font: 600 1.7rem/1.1 var(--serif); color: #111; } .qr-ask { margin: .2rem 0 .15rem; font-size: .92rem; line-height: 1.35; color: #111; } .qr-small { margin: 0; font-size: .78rem; color: #555; }
@media print { .qrsheet { grid-template-columns: repeat(2, 1fr); gap: 0; } .qrcard { border-radius: 0; margin: -1px 0 0 -1px; padding: 6mm 6mm 5mm; height: 68mm; } .qrcard svg.qr { max-width: 34mm; } .qr-unit { font-size: 16pt; } .qr-ask { font-size: 9.5pt; } .qr-small, .qr-park { font-size: 8pt; } }
/* 1.95.0: an order's reference stays on one line */
.ref { white-space: nowrap; } table.stock td:first-child { white-space: nowrap; }
/* 1.95.0: Stock. Each count is a row: its name, where it stands, and the button; the ones past their time first */
ul.stocklists { list-style: none; margin: .3rem 0 .7rem; padding: 0; }
li.sl { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; flex-wrap: wrap; padding: .75rem .3rem .75rem .9rem; border-left: 3px solid var(--moss); border-top: 1px solid var(--line); }
li.sl:first-child { border-top: 0; } li.sl.due { border-left-color: var(--gold); background: linear-gradient(90deg, #FBF4E2, transparent 55%); }
.sl-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 18rem; } a.sl-name { font: 500 1.3rem/1.2 var(--serif); color: var(--forest); text-decoration: none; } a.sl-name:hover { text-decoration: underline; }
.sl-state { font-size: .95rem; } .sl-due { color: var(--amber); font-weight: 600; } .sl-ok { color: var(--green-ink); }
.sl-acts { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .sl-acts .btn { min-width: 6.5rem; text-align: center; } details.sl-change > summary { cursor: pointer; } details.sl-change[open] { flex-basis: 100%; }
details.sl-change form.foot { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-top: .4rem; } details.sl-change form.foot label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; } details.sl-change select { width: auto; margin: 0; }
#counts details form.foot label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; } #counts details form.foot select { width: auto; margin: 0; }
@media (max-width: 700px) { li.sl { padding-right: 0; } .sl-acts { width: 100%; } .sl-acts .btn { flex: 1; padding: .7rem 1rem; font-size: 1rem; } }
/* 1.95.0: linen by type of lodge: the sheet of what one clean uses, and each day's list */
table.usesgrid { width: auto; min-width: 100%; } table.usesgrid th, table.usesgrid td { padding: .25rem .5rem; vertical-align: middle; } table.usesgrid th.amt, table.usesgrid td.amt { text-align: center; }
table.usesgrid thead th { vertical-align: bottom; font-weight: 500; } table.usesgrid th .ut { display: block; font-weight: 600; color: var(--forest); line-height: 1.2; } table.usesgrid th .muted { display: block; font-size: .74rem; font-weight: 400; white-space: nowrap; }
table.usesgrid input { width: 3.6rem; margin: 0; padding: .3rem .35rem; text-align: center; } table.usesgrid input::placeholder { color: #a39a88; } table.usesgrid td:first-child { white-space: nowrap; padding-right: 1rem; }
table.usesgrid th.own, table.usesgrid td.own { background: #FBF4E2; } table.usesgrid tbody tr:hover td { background: #F8F3E8; } table.usesgrid tbody tr:hover td.own { background: #F6ECD2; }
#uses .savebar { margin-top: .7rem; } .ownrow { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); } .ownrow form.foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; } .ownrow form.foot select { width: auto; margin: 0; } .ownrow form.foot label { margin: 0; } .ownrow p { margin: .6rem 0 0; }
form.commonrow { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; margin-top: .8rem; }
details.linenday { border-top: 1px solid var(--line); padding: .5rem 0; } details.linenday:first-of-type { border-top: 0; } details.linenday > summary { cursor: pointer; display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; } details.linenday > summary b { font: 500 1.15rem/1.2 var(--serif); color: var(--forest); }
table.linengrid { width: auto; min-width: 100%; margin-top: .5rem; } table.linengrid th.amt, table.linengrid td.amt { text-align: center; padding: .25rem .45rem; } table.linengrid thead th { vertical-align: bottom; font-weight: 500; font-size: .78rem; line-height: 1.15; max-width: 5.2rem; } table.linengrid td:first-child { white-space: nowrap; } table.linengrid tfoot td { border-top: 2px solid var(--line); }
table.usesgrid input:not(:placeholder-shown) { border-color: var(--moss); background: #fff; font-weight: 600; color: var(--forest); }
table.usesgrid th:first-child, table.usesgrid td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; } table.usesgrid tbody tr:hover td:first-child { background: #F8F3E8; }
table.linengrid th, table.linengrid td { padding: .25rem .45rem; } table.linengrid th:first-child, table.linengrid td:first-child { padding-left: 0; text-align: left; }
table.linengrid thead th.amt { white-space: normal; width: 5.6rem; }
table.linengrid thead th { overflow-wrap: normal; word-break: normal; hyphens: none; } table.linengrid thead th.amt { min-width: 4.6rem; } table.linengrid th:first-child, table.linengrid td:first-child { position: sticky; left: 0; background: var(--card); z-index: 1; padding-right: .7rem; }
.sl-acts { justify-content: flex-end; margin-left: auto; } details.sl-change[open] { text-align: right; } details.sl-change[open] form.foot { justify-content: flex-end; }
@media (max-width: 700px) { details.sl-change[open] { text-align: left; } details.sl-change[open] form.foot { justify-content: flex-start; } }
/* 1.96.0: wheels on an area's home page: the home screen's own tile and ring, a little narrower so four sit in a row */
.hometiles.areawheels { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); margin-bottom: .9rem; } .hometile.areawheel { min-height: 6.6rem; align-items: center; }
/* 1.96.0: Stock and Where things are kept, as the same rows Maintenance and Orders use */
.jrow.srow { grid-template-columns: minmax(0, 1fr) auto; padding: .35rem .6rem; } .jrow.srow.due { border-left-color: var(--gold); } .jrow.srow.ok { border-left-color: var(--moss); } .jrow.srow.lowrow { border-left-color: var(--red); } .jrow.srow.askrow { border-left-color: var(--sage); }
.jrow.srow .oact, .jrow.krow .oact { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; } .jrow.srow .oact .btn { min-width: 4.6rem; text-align: center; }
.jrow.krow { grid-template-columns: 1.3rem minmax(3.4rem, auto) minmax(0, 1fr) 6.5rem auto; } .jrow.krow.jobdone { border-left-color: var(--gold); } .jrow .jstate[href] { text-decoration: none; } .jrow .jstate[href]:hover { text-decoration: underline; }
details.kplace { background: var(--card); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; } details.kplace > summary { cursor: pointer; list-style: none; } details.kplace > summary::-webkit-details-marker { display: none; } details.kplace > summary h2::after { content: ' ▸'; color: var(--stone); font-size: .8em; } details.kplace[open] > summary h2::after { content: ' ▾'; }
form.ktidy { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .5rem .7rem; background: #FBF4E2; border-top: 1px solid var(--line); }
table.setlists select { width: auto; margin: 0; } table.setlists td { vertical-align: middle; } #setup form.foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } #setup form.foot select { width: auto; margin: 0; } #setup form.foot input[name=title] { flex: 1 1 16rem; margin: 0; }
.storeline { display: flex; align-items: center; gap: .5rem .7rem; flex-wrap: wrap; padding: .35rem 0; border-top: 1px solid var(--line); } .storeline .sl-what { flex: 1 1 12rem; min-width: 0; } .storeline form.inline { display: inline-flex; align-items: center; gap: .3rem; } input.qty { width: 3.6rem !important; margin: 0; padding: .25rem .3rem; text-align: center; }
#store details form.foot { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .4rem; } #store details form.foot select { flex: 1 1 14rem; width: auto; margin: 0; }
@media (max-width: 700px) { .jrow.krow { grid-template-columns: 1.3rem auto minmax(0, 1fr) auto; } .jrow.krow .kwhen { display: none; } .jrow.srow .jmain, .jrow.krow .jmain { flex-wrap: wrap; white-space: normal; gap: .2rem .45rem; } .jrow.srow .jtitle, .jrow.krow .jtitle { max-width: 100%; } .jrow.srow .jstate, .jrow.krow .jstate { display: block; flex: 1 1 100%; white-space: normal; overflow: visible; } .jrow.srow { padding: .5rem .6rem; } #low .jhead, #jobs .jhead, #counts .jhead, .kplace .jhead { flex-wrap: wrap; } #low .jsub, #jobs .jsub, #counts .jsub, .kplace .jsub { white-space: normal; flex-basis: 100%; margin-left: 0; } }
.hometile .legend .lg::before { content: none; } .hometile .legend { margin: .4rem 0 0; gap: .15rem .7rem; }
h2.areaall { font: 500 1.15rem/1.2 var(--serif); color: var(--forest); margin: 1.1rem 0 .5rem; } .dash.areadash { margin-bottom: .2rem; }
/* 1.96.0: a page's parts as buttons in its top corner, not a row of tabs under the heading (Laundry is the first) */
.headtabs { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; align-items: center; } .headtabs .btn.on { background: var(--forest); border-color: var(--forest); color: #fff; } .headtabs .btn .count { display: inline-block; min-width: 1.2rem; padding: 0 .4rem; border-radius: 99px; background: var(--gold); color: #fff; font: 600 .72rem/1.2rem var(--sans); text-align: center; vertical-align: middle; margin-left: .35rem; letter-spacing: 0; }
/* 1.97.0: guest records. A marked record carries its colour down the left edge, on the record, on the booking and on an enquiry. */
.gcard.no, .gmark.no { border-left: 4px solid var(--red); } .gcard.care, .gmark.care { border-left: 4px solid var(--gold); }
.gcard .head h2 .badge, .gmark .head h2 .badge { font-family: var(--sans); font-size: .72rem; vertical-align: middle; } .gmark p, .gcard p { margin: .3rem 0; }
p.where { margin: 0 0 .7rem; } p.gnote { margin: -.2rem 0 .8rem; } .gposs { border-top: 1px solid var(--line); margin-top: .55rem; padding-top: .5rem; } .gposs form.inline { margin-left: .2rem; }
b.reg { letter-spacing: .06em; } input.reg { text-transform: uppercase; letter-spacing: .06em; max-width: 9rem; }
a.gchips { text-decoration: none; } .note.gworth { margin-top: .2rem; }
ul.gnotes li > div { margin-bottom: .1rem; } p.pad { padding: .5rem .7rem; margin: 0; }
.jrow.alertrow .oact form.answer { display: flex; gap: .3rem; align-items: center; justify-content: flex-end; } form.answer input { margin: 0; width: 11rem; padding: .25rem .5rem; font-size: .85rem; }
.gsheet h2 { margin-top: 1.1rem; }
@media (max-width: 700px) { .jrow.alertrow { grid-template-columns: minmax(0, 1fr); } .jrow.alertrow .oact form.answer { justify-content: flex-start; flex-wrap: wrap; } form.answer input { flex: 1 1 100%; width: auto; } }
form.gposs.answer { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; } form.gposs.answer input { width: 16rem; max-width: 100%; }
@media (max-width: 700px) { .gsec .jhead { flex-wrap: wrap; } .gsec .jsub { white-space: normal; flex-basis: 100%; margin-left: 0; } .gsec .jrow.srow .jmain { flex-wrap: wrap; white-space: normal; gap: .2rem .45rem; } .gsec .jrow.srow .jstate { display: block; flex: 1 1 100%; white-space: normal; overflow: visible; } }

/* 1.97.2: a job given to someone is said on every page until they open it, and is first on My jobs and on Maintenance */
.newforyou { display: flex; flex-wrap: wrap; gap: .15rem .55rem; align-items: baseline; padding: .55rem .8rem; margin: 0 0 1rem; background: var(--amber-bg); border-left: 4px solid var(--gold); border-radius: 4px; font-size: .95rem; color: var(--forest); }
.newforyou a { font-weight: 600; color: var(--forest); } .newforyou .by { color: var(--stone); font-size: .85rem; } .newforyou .nfmore { font-weight: 500; } .newforyou .badge { vertical-align: baseline; }
.jrow.gvrow { grid-template-columns: auto minmax(0, 1fr) 6.5rem 5.5rem; padding: .3rem .6rem; } .jrow.gvrow.fresh { background: #FBF7EE; } .jrow.gvrow.fresh .jtitle { font-weight: 600; }
.jobs.given .jsub b { color: var(--amber); } .jobs.given .givenfoot { margin: .35rem .7rem .5rem; }
@media (max-width: 700px) { .jrow.gvrow { grid-template-columns: auto minmax(0, 1fr) auto; padding: .45rem .6rem; } .jobs.given .jhead { flex-wrap: wrap; } }