/* 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;
  --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; }
.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); }
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 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.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; }
}

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-size: .72rem; line-height: 1.15rem; text-align: center; font-weight: 600; }
.grid3 { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: .8rem; } .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; }
/* 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; }
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; 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 3.4rem 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; } .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, .jrow.check { grid-template-columns: 1.6rem minmax(0, 1fr) 6rem auto; } .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, .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 */
nav .links details.more .menu.grouped { display: grid; grid-template-columns: repeat(3, 14rem); gap: .2rem .6rem; padding: .55rem .5rem .35rem; width: max-content; max-width: calc(100vw - 2rem); grid-auto-flow: row dense; align-items: start; }
nav .links details.more .menu.grouped .mgroup h4 a { display: inline-block; padding: .1rem 0 .15rem; margin: 0; font: inherit; color: inherit; letter-spacing: 0; text-transform: none; border-bottom: 1px solid transparent; } nav .links details.more .menu.grouped .mgroup h4 a:hover, nav .links details.more .menu.grouped .mgroup h4 a.on { background: none; color: #fff; border-bottom-color: var(--gold-lt); }
nav .links details.more .mgroup.lone h4 { margin-bottom: .15rem; }
@media (max-width: 1100px) { nav .links details.more .menu.grouped { grid-template-columns: repeat(2, 14rem); } }
nav .links details.more .mgroup { display: flex; flex-direction: column; }
nav .links details.more .mgroup h4 { margin: .3rem 1rem .1rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--gold-lt); }
nav .links details.more .menu.grouped a { padding: .34rem 1rem; white-space: normal; line-height: 1.2; }
nav .links details.more .mfoot { grid-column: 1 / -1; border-top: 1px solid var(--moss); margin-top: .35rem; padding-top: .3rem; display: flex; flex-wrap: wrap; }
.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(--muted); 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; }
.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(--muted); } .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(--muted); } .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(--muted); } 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; }
.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.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; }