/* The board review site. Colour values copied from the website's
   src/assets/css/mvsa.css; nothing is loaded from the website. */
:root {
  --green: #015E37;
  --green-dark: #053D26;
  --green-pale: #EDF3EF;
  --navy: #0B3C7A;
  --sand: #F6E6C9;
  --sand-line: #E3D2AC;
  --sand-ink: #745F33;
  --ink: #16211D;
  --body: #4B5951;
  --muted: #5A6861;
  --line: #E4EBE6;
  --ground: #FAFBF9;
  --danger: #A12622;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1.25rem; padding-bottom: 3rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .5rem 0 1rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 .75rem; }
a { color: var(--green); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--navy); outline-offset: 2px;
}
.small { font-size: .9rem; color: var(--muted); }
.strong { font-weight: 700; color: var(--ink); }

.top { background: var(--green-dark); color: #fff; padding: .6rem 0; border-top: 4px solid var(--green); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.brand { margin: 0; font-weight: 700; }
.brand span { font-weight: 400; opacity: .85; margin-left: .35rem; }
.signed-in { margin: 0; font-size: .9rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.signed-in .link { color: #fff; }

.menu { background: var(--green-pale); border-bottom: 1px solid var(--line); }
.menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; padding-top: .5rem; padding-bottom: .5rem; margin: 0 auto; }
.menu a { font-weight: 600; text-decoration: none; }
.menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }

.box { background: #fff; border: 1px solid var(--line); border-radius: .875rem; padding: 1rem 1.25rem; margin: 1rem 0; }
label, legend { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
fieldset { border: 0; padding: 0; margin: 0; }
label.choice { font-weight: 400; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin: .35rem 0; }
input[type="email"], input[type="text"], select, textarea {
  width: 100%; font: inherit; color: inherit; padding: .55rem .7rem;
  border: 1px solid #8C9A93; border-radius: .5rem; background: #fff;
}
input[type="radio"] { width: 1.1rem; height: 1.1rem; accent-color: var(--green); }
textarea { resize: vertical; }
button, .button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  padding: .5rem 1rem; margin-top: .75rem; border-radius: .5rem;
  border: 1px solid var(--green); background: #fff; color: var(--green);
}
.box button[type="submit"], button.primary, .button.primary { background: var(--green); color: #fff; }
button:hover, .button:hover { filter: brightness(.92); }
button.danger, .box button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.link { border: 0; background: none; padding: 0; margin: 0; text-decoration: underline; font-weight: 400; }
.error { color: var(--danger); font-weight: 600; margin: .25rem 0; }
.page-shown { background: var(--sand); border: 1px solid var(--sand-line); border-radius: .5rem; padding: .6rem .8rem; overflow-wrap: anywhere; }
.page-shown .label { color: var(--sand-ink); font-weight: 600; }

.filters { display: grid; gap: .25rem 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.filters label { margin-top: .25rem; }
.filters .actions button { margin-top: 0; }
.group h2 { border-bottom: 2px solid var(--line); padding-bottom: .25rem; overflow-wrap: anywhere; }
.items { list-style: none; padding: 0; margin: 0; }
.item { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: .5rem; padding: .75rem 1rem; margin: .75rem 0; overflow-wrap: anywhere; }
.item.done { border-left-color: #B7C2BC; background: #F4F6F5; }
.item form button { margin-top: .25rem; }
.meta { margin: 0 0 .35rem; }
.kind, .status { display: inline-block; font-size: .8rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--green-pale); color: var(--green-dark); }
.kind-problem { background: #FBE3E2; color: #7A1D1A; }
.kind-question { background: var(--navy); color: #fff; }
.message { white-space: pre-wrap; margin: .35rem 0; color: var(--ink); }
.pager { display: flex; gap: 1.5rem; align-items: center; margin-top: 1.5rem; }
.people { padding-left: 1.2rem; }
.people li { margin: .4rem 0; overflow-wrap: anywhere; }
form.inline { display: inline; }
form.inline button { margin: 0 0 0 .5rem; padding: .15rem .6rem; font-size: .9rem; }
button + a, .actions a { margin-left: .75rem; }