/* base */
:root{--accent:#1E6B34}
html{font-size:125%}
:root{--ink:#1F2340;--page:#FFFFFF;--muted:#4A4F68;--line:#D5D8E2;--surface:#F3F4F8;--on-accent:#FFFFFF;--radius:8px;--space:1rem;--column:46rem;--heading-weight:700;--heading-spacing:normal;--row:.6rem}
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.5}
body{margin:0;background:var(--page);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
main{display:block;width:min(100%, var(--column));margin:0 auto;padding:var(--space)}
h1,h2,h3{font-weight:var(--heading-weight);letter-spacing:var(--heading-spacing);line-height:1.2;margin:1.25em 0 .5em}
h1{font-size:1.75rem}
h2{font-size:1.3rem}
h3{font-size:1.1rem}
p,ul,ol,dl,table,form,fieldset{margin:0 0 var(--space)}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:.15em}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem var(--space);margin:0 0 var(--space)}
header h1{margin:0}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem var(--space)}
nav form,header form{margin:0}
section{margin:0 0 calc(var(--space) * 1.5)}
section>:first-child,section>:first-child>:first-child{margin-top:0}
section>:last-child{margin-bottom:0}
ul,ol{padding-left:1.25rem}
li{padding:.2rem 0}
label{display:block;margin:0 0 .75rem;font-weight:600}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space)}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{display:block;width:100%;margin-top:.3rem;padding:.5rem .75rem;border:1px solid var(--muted);border-radius:var(--radius);background:#FFFFFF;color:var(--ink);font-weight:400}
textarea{min-height:6rem}
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0 .5rem 0 0;vertical-align:middle;accent-color:var(--accent)}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.5rem 1.1rem;border:2px solid var(--accent);border-radius:var(--radius);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;cursor:pointer}
button:hover,.button:hover{filter:brightness(.9)}
table{width:100%;border-collapse:collapse}
th,td{padding:var(--row) .75rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:700}
small,.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin:calc(var(--space) * 1.5) 0}
img,svg,video{max-width:100%;height:auto}
code,pre{font-family:ui-monospace,Consolas,Menlo,monospace;font-size:.9em}
pre{overflow-x:auto;padding:var(--space);background:var(--surface);border-radius:var(--radius)}
@media (max-width:40rem){table{display:block;overflow-x:auto}}
@media (min-width:48rem){main{padding:calc(var(--space) * 2) calc(var(--space) * 1.5)}}
/* floor: the kit keeps these */
html{font-size:125% !important;-webkit-text-size-adjust:100% !important;text-size-adjust:100% !important}
body{font-size:1rem !important;overflow-x:hidden !important;overflow-wrap:break-word !important}
body,main,header,nav,footer,section,article,aside,form,fieldset,div,table,pre{max-width:100% !important;min-width:0 !important}
img,svg,video,canvas,iframe,input,select,textarea{max-width:100% !important}
button,select,textarea,.button,input:not([type=checkbox]):not([type=radio]):not([type=hidden]){min-height:44px !important}
input[type=checkbox],input[type=radio]{width:1.5rem !important;height:1.5rem !important}
:focus-visible{outline:3px solid #1E6B34 !important;outline-offset:2px !important;box-shadow:0 0 0 5px #FFFFFF !important}
/* look */
/* Snack Rota: the builder's own rules for this app's screens. Written for parents reading on a phone at the side
   of the pitch, often in bright light: one column, big rows, strong contrast. The creator's demo style follows at
   the end of this file (its colours, type, corners and buttons); these rules only lay the rows out. */
body{margin:0;padding:0 1rem 3rem}
main{margin:0 auto;padding-top:1rem}
h1{margin:0 0 .25rem}
h2{margin:0 0 .75rem}
header{margin-bottom:1.25rem}
header nav{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;align-items:center;margin-top:.75rem}
nav a{padding:.25rem 0}
nav form.inline{display:inline;margin:0}
nav form.inline button{padding:.35rem 1rem;min-height:44px}
section{margin:0 0 1.25rem}
p.bring{margin:0 0 1.25rem;padding:1rem 1.25rem;border-left:.4rem solid var(--accent);font-weight:600}
ul.rows{list-style:none;margin:0;padding:0}
ul.rows li{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
ul.rows li:last-child{border-bottom:0}
span.date{font-weight:700;font-size:1.15em}
span.venue{margin-left:.35rem;color:var(--muted)}
span.note{display:block;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
span.free{font-weight:700;color:var(--accent)}
strong.family{display:inline-block;margin-top:.25rem;overflow-wrap:anywhere}
p.up-next{margin:0;font-size:1.1em}
p.up-next strong{display:block;margin-top:.35rem;font-size:1.35em;overflow-wrap:anywhere}
form.api{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end;margin-top:.5rem}
form.api label{display:flex;flex-direction:column;gap:.25rem;flex:1 1 12rem}
form.api input,form.api select{width:100%;box-sizing:border-box;padding:.6rem .9rem;min-height:44px}
form.api button{flex:0 0 auto}
form.remove{display:inline-flex;margin:0 0 0 .5rem}
form.remove button{padding:.3rem .9rem;border-width:1px;color:var(--muted);border-color:var(--muted)}
form.remove button:hover{background:var(--muted);border-color:var(--muted);color:var(--surface)}
p.form-error{flex:1 1 100%;margin:.25rem 0 0;padding:.5rem .75rem;color:var(--ink);background:var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse}
input[type=date]{min-width:11rem}
select{appearance:auto}

:root{--page:#FAF7F2;--surface:#FFFFFF;--ink:#2E2A27;--muted:#5C554E;--line:#E7E0D6;--accent:#1F7A3A;--on-accent:#FFFFFF;--band:#1E3B2A;--on-band:#FAF7F2}
:root{--radius:16px;--space:1.4rem;--row:.8rem;--column:46rem;--heading-weight:600;--shadow:none}
html{line-height:1.65;background:var(--page)}
body{background:var(--page);color:var(--ink);font-family:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif}
main{width:min(100%,var(--column))}
h1,h2,h3{font-family:Seravek,"Gill Sans Nova",Ubuntu,Calibri,"DejaVu Sans",source-sans-pro,sans-serif;font-weight:var(--heading-weight);text-transform:none;letter-spacing:normal}
h1{font-size:2rem;line-height:1.15}
h2{font-size:1.4rem;line-height:1.2}
a{color:var(--accent);text-decoration:underline}
a:hover{text-decoration:underline;text-decoration-thickness:.15em}
header{padding:var(--space);background:var(--surface);border-radius:var(--radius)}
nav a{font-weight:600}
section{padding:var(--space);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
fieldset{border-color:var(--line);border-radius:var(--radius)}
input,select,textarea{background:var(--surface);color:var(--ink);border:1px solid var(--muted);border-radius:var(--radius)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
button,.button{background:transparent;border:2px solid var(--accent);color:var(--accent);border-radius:999px;box-shadow:var(--shadow)}
button:hover,.button:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);filter:none}
table{border:0;}
th,td{border:0;border-bottom:1px solid var(--line)}
th{background:var(--surface);color:var(--ink)}
tbody tr:nth-child(even){background:transparent;}
li{padding:calc(var(--row) / 2) 0}
small,.muted{color:var(--muted);letter-spacing:normal}
hr{border-top-color:var(--line)}
pre{background:var(--surface);border-radius:var(--radius)}
/* f2b style v1 sg-c46ee48595ee */
/* look: builder */
