.app-body {
  font-size:17px
}
.app-header {
  padding:17px 2.2%;
  display:flex;
  align-items:center;
  gap:40px
}
.app-header .brand {
  font-size:38px
}
.app-header .back-link {
  border-left:1px solid var(--rule);
  padding-left:36px;
  font-size:21px
}
.app-header>span {
  margin-left:auto;
  font-size:20px
}
.demo-notice {
  padding:14px 3%;
  background:var(--sage);
  font-size:19px
}
.demo-notice strong {
  margin-right:7px
}
.app-layout {
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:725px
}
.app-sidebar {
  padding:32px 12px;
  border-right:1px solid var(--rule)
}
.app-sidebar h2 {
  font-family:var(--sans);
  font-size:27px;
  letter-spacing:0;
  margin:0 15px 30px
}
.app-sidebar nav {
  display:grid;
  gap:12px
}
.app-sidebar a {
  padding:14px 16px;
  text-decoration:none;
  border-radius:7px;
  font-size:20px;
  display:flex;
  align-items:center;
  gap:17px
}
.app-sidebar svg {
  width:25px;
  height:25px;
  flex-shrink:0
}
.app-sidebar a[aria-current="page"] {
  background:var(--sage);
  font-weight:700
}
.app-sidebar a:hover {
  background:#e7ece5
}
.app-main {
  padding:43px 35px 50px;
  min-width:0
}
.app-main h1 {
  font-size:58px;
  margin-bottom:12px
}
.app-lead {
  font-size:23px;
  margin-bottom:25px
}
.app-main h2 {
  font-size:36px
}
.counts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:37px 0 34px;
  padding-bottom:33px;
  border-bottom:1px solid var(--rule)
}
.counts>div {
  display:flex;
  flex-direction:column;
  padding-left:30px;
  border-left:1px solid var(--rule)
}
.counts>div:first-child {
  padding-left:0;
  border:0
}
.counts dd {
  font:700 46px var(--serif);
  margin:0;
  order:-1;
  line-height:1.2
}
.counts dt {
  font-size:19px
}
.overview-columns {
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:25px
}
.record-row {
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr auto;
  gap:14px;
  align-items:center;
  border-top:1px solid var(--rule);
  padding:17px 0;
  font-size:16px
}
.record-row:last-child {
  border-bottom:1px solid var(--rule)
}
.record-row button {
  font-size:15px;
  padding:6px 11px;
  min-height:38px
}
.record-row .record-title {
  font-weight:700;
  display:flex;
  align-items:center;
  gap:16px;
}
.record-title svg {
  width:24px;
  height:27px;
  flex-shrink:0;
}
.next-steps {
  border-left:1px solid var(--rule);
  padding-left:24px
}
.next-steps h3 {
  font:700 19px/1.3 var(--sans);
  margin-top:20px
}
.task-check {
  display:flex;
  align-items:flex-start;
  gap:13px;
  font-size:18px;
  font-weight:400;
  margin:19px 0;
  line-height:1.4
}
.task-check input {
  width:22px;
  height:22px;
  flex-shrink:0;
  margin:2px 0 0;
  accent-color:var(--ink)
}
.app-footer {
  border-top:1px solid var(--rule);
  margin:0 20px;
  padding:15px 10px 25px;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  gap:20px
}
.event-form {
  max-width:850px;
  display:grid;
  gap:19px
}
.event-form p {
  margin-bottom:0
}
.form-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px
}
.event-form textarea {
  min-height:145px
}
.timeline-toolbar {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:25px;
  margin:30px 0
}
.timeline-toolbar label {
  width:min(460px,100%)
}
.full-records .record-row {
  grid-template-columns:1.4fr 1fr 1fr auto;
  padding:20px 0
}
.question-form {
  display:grid;
  grid-template-columns:2fr 1fr auto;
  align-items:end;
  gap:18px;
  margin:30px 0
}
.question-form .button {
  font-size:17px;
  padding:12px 18px
}
.question-list {
  padding:0;
  list-style:none
}
.question-list li {
  border-top:1px solid var(--rule);
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  gap:25px
}
.question-list small {
  display:block;
  margin-top:8px;
  color:var(--muted)
}
.question-list button {
  align-self:start
}
.storage-plan {
  max-width:850px;
  border-top:1px solid var(--rule);
  padding:24px 0 30px
}
.storage-plan li {
  margin:13px 0
}
.storage-plan+h2 {
  font-size:32px
}
.app-view>ul li {
  margin:14px 0
}
#record-dialog {
  width:min(800px,calc(100% - 32px))
}
#record-dialog h3 {
  font-size:24px;
  margin-top:28px
}
#detail-amendments p {
  border-top:1px solid var(--rule);
  padding-top:13px
}
#amendment-form {
  display:grid;
  gap:18px
}
.empty-result {
  padding:30px 0
}
.app-view {
  scroll-margin-top:20px
}
.back-link svg,.app-main .button svg {
  width:25px;
  height:25px;
  vertical-align:middle
}
.back-link {
  display:flex;
  align-items:center;
  gap:12px
}
@media(min-width:1500px) {
  .app-main {
    padding:45px 40px
  }
  .app-layout {
    grid-template-columns:315px 1fr
  }
  .app-main h1 {
    font-size:65px
  }
  .record-row {
    font-size:18px
  }
  .app-header {
    padding-top:16px;
    padding-bottom:20px
  }
  .app-sidebar a {
    font-size:21px;
    padding:15px
  }
  .app-sidebar {
    padding-top:36px
  }
  .demo-notice {
    padding-top:15px;
    padding-bottom:15px;
    font-size:21px
  }
  .overview-columns {
    margin-top:10px
  }
  .app-layout {
    min-height:780px
  }
}
@media(max-width:1150px) {
  .app-header {
    gap:22px
  }
  .app-header .brand {
    font-size:29px
  }
  .app-header .back-link {
    font-size:17px;
    padding-left:20px
  }
  .app-header>span {
    font-size:16px
  }
  .app-layout {
    grid-template-columns:230px 1fr
  }
  .app-sidebar a {
    font-size:17px;
    gap:12px
  }
  .app-main {
    padding:35px 25px
  }
  .app-main h1 {
    font-size:48px
  }
  .app-lead {
    font-size:20px
  }
  .overview-columns {
    grid-template-columns:1fr
  }
  .next-steps {
    border-left:0;
    border-top:1px solid var(--rule);
    padding:25px 0 0
  }
  .question-form {
    grid-template-columns:1fr 1fr
  }
  .question-form>label:first-child {
    grid-column:1/-1
  }
}
@media(max-width:720px) {
  .app-header {
    padding:18px 6%;
    flex-wrap:wrap;
    gap:12px
  }
  .app-header .brand {
    font-size:26px
  }
  .app-header .brand span {
    font-size:14px
  }
  .app-header .back-link {
    border:0;
    padding:0;
    font-size:15px
  }
  .app-header>span {
    font-size:13px
  }
  .demo-notice {
    padding:14px 6%;
    font-size:15px
  }
  .app-layout {
    display:block;
    min-height:0
  }
  .app-sidebar {
    padding:14px 6%;
    border-right:0;
    border-bottom:1px solid var(--rule)
  }
  .app-sidebar h2 {
    font-size:19px;
    margin:0 0 10px
  }
  .app-sidebar nav {
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:0 3px 8px
  }
  .app-sidebar a {
    white-space:nowrap;
    padding:10px 12px;
    font-size:15px;
    gap:7px
  }
  .app-sidebar svg {
    width:18px;
    height:18px
  }
  .app-main {
    padding:28px 6% 45px
  }
  .app-main h1 {
    font-size:41px
  }
  .app-lead {
    font-size:18px
  }
  .app-main h2 {
    font-size:30px
  }
  .counts {
    margin-top:28px;
    padding-bottom:25px;
    gap:0
  }
  .counts>div {
    padding-left:12px
  }
  .counts dd {
    font-size:32px
  }
  .counts dt {
    font-size:13px
  }
  .record-row,.full-records .record-row {
    grid-template-columns:1fr auto;
    gap:7px 14px;
    font-size:15px;
    padding:16px 0
  }
  .record-row .record-title {
    grid-column:1
  }
  .record-row button {
    grid-column:2;
    grid-row:1/4
  }
  .record-row .record-basis {
    font-size:13px;
    color:var(--muted)
  }
  .app-footer {
    display:block;
    margin:0 6%;
    padding:17px 0 25px;
    font-size:14px
  }
  .app-footer a {
    display:block;
    margin-top:12px
  }
  .form-columns {
    grid-template-columns:1fr;
    gap:19px
  }
  .timeline-toolbar {
    display:grid;
    gap:20px
  }
  .timeline-toolbar label {
    width:100%
  }
  .timeline-toolbar button {
    justify-self:start
  }
  .question-form {
    grid-template-columns:1fr;
    gap:18px
  }
  .question-form button {
    justify-self:start
  }
  .question-form>label:first-child {
    grid-column:auto
  }
  .question-list li {
    font-size:16px
  }
  .event-form .actions {
    align-items:flex-start
  }
  .task-check {
    font-size:17px
  }
}