/* Magic and Mudpies – colours taken from the logo */
:root {
  --white: #ffffff;
  --ink: #2b2a26;
  --muted: #5f6458;
  --moss: #5e6a53;       /* logo circle, darkened for contrast */
  --sage: #8a9878;       /* logo background */
  --cream: #edd9a8;      /* logo lettering */
  --cap: #7a5458;        /* mushroom cap */
  --gill: #f4a79a;       /* mushroom gills */
  --stem: #fcd5b8;       /* mushroom stem */
  --forest: #2f5a41;     /* paper form green */
  --tint: #f1f3ec;
  --line: #d5dbcd;
  --danger: #a3392b;
  --radius-lg: 22px;
  --radius: 12px;
  --font-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 17px/1.5 var(--font-body);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { max-width: 100%; height: auto; }
a { color: var(--forest); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; }
:focus-visible { outline: 3px solid var(--cap); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- buttons & fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.4rem;
  border: 0; border-radius: 999px;
  background: var(--forest); color: var(--white);
  font: 600 1.05rem/1 var(--font-display); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; }
.btn-wide { width: 100%; }
.btn-quiet { background: var(--tint); color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-small { min-height: 44px; padding: 0 1.1rem; font-size: .98rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0; }
.link-btn { background: none; border: 0; padding: .5rem; font: 700 .95rem var(--font-body); color: var(--forest); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn.danger { color: var(--danger); }

.field { display: flex; flex-direction: column; gap: .35rem; margin: 0; border: 0; padding: 0; min-width: 0; }
.field > span, .field > legend { font-weight: 700; font-size: .95rem; padding: 0; }
input:not([type=checkbox]), select, textarea {
  width: 100%; min-height: 50px;
  padding: .7rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink);
  font: 400 1rem/1.4 var(--font-body);   /* 16px+ stops iOS zooming */
  font-size: max(16px, 1rem);
}
textarea { resize: vertical; min-height: 4.4rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(47,90,65,.18); }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.tick-row { display: flex; align-items: center; gap: .7rem; min-height: 44px; font-weight: 600; }
.tick-row input { width: 22px; height: 22px; accent-color: var(--forest); flex: none; }

.alert { background: #fbeae6; color: #7a2a1f; border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 1rem; font-weight: 600; }
.alert p { margin: 0; }
.alert p + p { margin-top: .4rem; }
.flashes { position: sticky; top: 0; z-index: 30; padding: .5rem 1rem 0; max-width: 720px; margin: 0 auto; }
.flash { margin: 0; padding: .75rem 1rem; border-radius: var(--radius); font-weight: 700; background: #e3eee4; color: var(--forest); }
.flash-error { background: #fbeae6; color: #7a2a1f; }

/* ---------- login ---------- */
.is-login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.login { width: 100%; max-width: 380px; padding: 2rem 1.4rem calc(2rem + env(safe-area-inset-bottom, 0px)); text-align: center; }
.login-logo { width: min(240px, 64vw); display: block; margin: 0 auto 2rem; }
.login-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.login-form .btn { margin-top: .4rem; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(.55rem + env(safe-area-inset-top, 0px)) 1rem .55rem;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid #eef0ea;
}
.topbar-logo { width: 48px; height: 48px; display: block; }
.topbar-back { display: inline-flex; align-items: center; gap: .2rem; min-height: 48px; font-weight: 700; text-decoration: none; color: var(--forest); margin-left: -.4rem; }
.topbar-actions { display: flex; align-items: center; gap: .3rem; }
.topbar-actions form { margin: 0; }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--moss); }
.icon-btn:active { background: var(--tint); }

/* ---------- page shells ---------- */
.page { max-width: 720px; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; }
.narrow { max-width: 440px; }
.center { text-align: center; }
.center h1 { margin: 1rem 0 .4rem; }
.lede { color: var(--muted); margin: .4rem 0 1.4rem; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }
.empty { background: var(--tint); border-radius: var(--radius); padding: 1.2rem; color: var(--muted); }
.page-foot { margin-top: 2.4rem; font-size: .95rem; }
.prewrap { white-space: pre-wrap; margin: .3rem 0 0; }

/* ---------- home: location buttons ---------- */
.hello { font-size: 2.1rem; color: var(--forest); }
.locations { display: grid; gap: .9rem; }
.loc {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  min-height: 132px; padding: 1.2rem 1.3rem;
  border-radius: var(--radius-lg);
  text-decoration: none; color: var(--cream); background: var(--moss);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.loc:active { transform: scale(.985); }
/* the mushroom-cap spots */
.loc::before {
  content: ""; position: absolute; right: -26px; top: -44px; width: 112px; height: 112px; border-radius: 50%;
  background:
    radial-gradient(circle at 26% 66%, rgba(255,255,255,.9) 0 7px, transparent 8px),
    radial-gradient(circle at 54% 56%, rgba(255,255,255,.9) 0 10px, transparent 11px),
    radial-gradient(circle at 42% 84%, rgba(255,255,255,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,.9) 0 6px, transparent 7px),
    var(--spot-cap, var(--cap));
  opacity: .95;
}
.loc-name { position: relative; font: 600 1.75rem/1.1 var(--font-display); }
.loc-status { position: relative; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-size: .95rem; opacity: .95; }
.loc-1 { background: var(--moss); color: var(--cream); --spot-cap: var(--cap); }
.loc-2 { background: var(--cap); color: var(--stem); --spot-cap: var(--moss); }
.loc-3 { background: var(--forest); color: var(--stem); --spot-cap: var(--gill); }
.loc.is-locked { filter: grayscale(.85); opacity: .55; }

.recent { margin-top: 2.4rem; }
.recent h2, .sub-section h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { border-top: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 1px solid var(--line); }
.plain-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem .1rem; text-decoration: none; color: var(--ink); }
.plain-list a span { color: var(--muted); }

/* ---------- risk form ---------- */
.form-title { font-size: 2rem; color: var(--forest); }
.form-sub { margin: .1rem 0 0; font: 600 1.05rem var(--font-display); color: var(--cap); }
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 0 1.4rem; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.meta div { background: var(--tint); padding: .7rem .9rem; }
.meta dt { font-size: .82rem; font-weight: 800; color: var(--muted); }
.meta dd { margin: .1rem 0 0; font-weight: 700; }
@media (max-width: 380px) { .meta { grid-template-columns: 1fr; } }

.checks { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .75rem; }
.check-item { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); transition: border-color .15s, background-color .15s; }
.check-item.is-done { border-color: #9fb59f; background: #f6f9f4; }
.check-head { display: flex; align-items: flex-start; gap: .9rem; padding: 1rem 1rem .6rem; cursor: pointer; margin: 0; }
.check-head input[type=checkbox], .fake-box {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 34px; height: 34px; margin: 0; border-radius: 9px;
  border: 2px solid var(--forest); background: var(--white);
  display: grid; place-items: center; cursor: pointer;
}
.check-head input[type=checkbox]:checked, .fake-box.on {
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/22px no-repeat;
}
.fake-box.on { background-image: none; color: var(--white); }
.fake-box svg { width: 22px; height: 22px; }
.check-text { display: flex; flex-direction: column; gap: .15rem; padding-top: .15rem; }
.check-title { font: 600 1.15rem/1.25 var(--font-display); }
.check-desc { color: var(--muted); font-size: .93rem; line-height: 1.4; }
.notes { display: flex; flex-direction: column; gap: .3rem; padding: 0 1rem 1rem calc(1rem + 34px + .9rem); }
.notes span, .notes-read span { font-size: .82rem; font-weight: 800; color: var(--muted); }
.notes textarea { min-height: 3.2rem; }
@media (max-width: 420px) { .notes { padding-left: 1rem; } }

.field-block, .signoff { margin: 0 0 1.4rem; padding: 1.1rem; border-radius: var(--radius); background: var(--tint); border: 1px solid var(--line); }
.block-title { display: block; font: 600 1.15rem var(--font-display); margin-bottom: .5rem; color: var(--ink); }
.signoff p { margin: 0 0 .8rem; }
.signoff .check-head { padding: .2rem 0 .6rem; align-items: center; }
.stamp { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; color: var(--muted); }
.stamp strong { color: var(--ink); font-size: 1.1rem; }
.stamp small { flex-basis: 100%; }

.submitbar {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 -1.1rem; padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.progress { font-weight: 800; color: var(--muted); font-size: .95rem; }
.progress.complete { color: var(--forest); }

/* read-only record */
.notes-read { margin: 0; padding: 0 1rem 1rem calc(1rem + 34px + .9rem); white-space: pre-wrap; }
.notes-read span { display: block; }
.is-readonly .check-head { cursor: default; }
.print-head { display: none; }
.danger-zone { margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* confirmation */
.done { text-align: center; padding-top: 3rem; }
.done-mark { width: 84px; height: 84px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: var(--white); }
.done-mark svg { width: 44px; height: 44px; }
.done .btn-row { justify-content: center; }

/* ---------- admin ---------- */
.admin-title { font-size: 1.9rem; color: var(--forest); margin-bottom: .9rem; }
.sub-title { font-size: 1.4rem; margin: .4rem 0 1rem; }
.tabs { display: flex; gap: .3rem; overflow-x: auto; margin: 0 -1.1rem 1.3rem; padding: 0 1.1rem; scrollbar-width: none; }
.tabs a { flex: none; padding: .55rem .8rem; font-size: .92rem; border-radius: 999px; text-decoration: none; font-weight: 800; color: var(--muted); background: var(--tint); }
.tabs a[aria-current=page] { background: var(--moss); color: var(--cream); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.section-head p { margin: 0; color: var(--muted); font-weight: 700; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.card { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); }
.card-row { display: flex; align-items: stretch; }
.card-link { flex: 1; display: flex; flex-direction: column; gap: .1rem; padding: .85rem 1rem; text-decoration: none; color: var(--ink); min-width: 0; }
.card-title { font: 600 1.1rem var(--font-display); }
.card-line { font-size: .93rem; }
.card-action { display: grid; place-items: center; padding: 0 1.1rem; border-left: 1.5px solid var(--line); font-weight: 800; text-decoration: none; }
.badge { display: inline-block; vertical-align: middle; margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--cream); color: #5c4a1c; font: 800 .72rem/1.6 var(--font-body); }
.badge-warn { background: #fbe1d9; color: #7a2a1f; }
.narrow-form { max-width: 480px; }
.sub-section { margin-top: 2.2rem; }
.log-list li { display: flex; flex-wrap: wrap; gap: .1rem 1rem; padding: .7rem .1rem; font-size: .93rem; }
.log-list .ok { color: var(--forest); font-weight: 700; }
.log-list .bad { color: var(--danger); font-weight: 700; }
.filters { display: grid; gap: .9rem; padding: 1rem; background: var(--tint); border-radius: var(--radius); margin-bottom: 1rem; }
.filters .btn-row { margin: 0; }
.filters-inline { max-width: 360px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.result-count { font-weight: 800; color: var(--muted); margin: 0 0 .6rem; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; font-weight: 700; }

@media (min-width: 760px) {
  .locations { grid-template-columns: repeat(3, 1fr); }
  .loc { min-height: 190px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .tick-row, .filters .btn-row { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- print ---------- */
@media print {
  @page { size: A4; margin: 14mm; }
  body { font-size: 11pt; }
  .topbar, .no-print, .flashes, .danger-zone, .submitbar { display: none !important; }
  .page { max-width: none; padding: 0; }
  .print-head { display: flex; align-items: center; gap: .6rem; font: 600 1.3rem var(--font-display); color: var(--forest); margin-bottom: .6rem; }
  .print-head img { width: 48px; height: 48px; }
  .check-item, .field-block, .signoff { break-inside: avoid; }
  .check-head input[type=checkbox]:checked, .fake-box.on, .meta div, .field-block, .signoff { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.login-back { margin-top: 1.6rem; font-size: .95rem; }