/* Page layout only. Every control is a design system component; every value here is a token. */
body { background: var(--neutral-bg); color: var(--neutral-text); }

.page {
  min-height: 100vh; box-sizing: border-box;
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  padding: var(--space-10) var(--space-4) var(--space-16);
}
.page-drill { padding-top: var(--space-6); }
@media (min-width: 480px) { .page { padding-left: var(--space-6); padding-right: var(--space-6); } }

.column { max-width: var(--container-drill); margin: 0 auto; display: flex; flex-direction: column; }
.column-auth { max-width: 400px; }   /* as in the sign-in screens; the system has no token for it */

.top-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); }
/* Split screens: one header row of the same height everywhere, so the lake starts at the same place. */
.head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-md); }
.head .title { margin: 0; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.title-row > .title { margin: 0; }
.title-start { margin: var(--space-8) 0 var(--space-6); }
.title-auth { margin: calc(var(--space-12) + var(--space-2)) 0 var(--space-8); }
.verb { margin: var(--space-10) 0 var(--space-6); }

.fields { display: flex; flex-direction: column; gap: var(--space-4); }
.actions { margin-top: var(--space-6); }
.retype-option { margin-top: var(--space-2); }
.round-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); }
.round-row > .actions { margin-top: 0; }
@media (max-width: 479px) { .round-row > .actions { flex: 1 0 100%; } }   /* on phones the primary button is full width, under the picker */
.deck { margin-top: var(--space-12); }
.lake { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.lake-summary { margin: var(--space-6) 0 0; }
.drill-lake { margin-top: var(--space-6); }
/* From bp-lg the lake (and the week) on the left, the rest on the right, in container-wide.
   Below bp-lg the screens keep the stacked order. */
.split { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .column-split { max-width: var(--container-wide); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; margin-top: var(--space-6); }
  .split-side { position: sticky; top: var(--space-6); }
  .split-side > .drill-lake, .split-side > .lake-summary { margin-top: 0; }
  .split-side > .lake { margin-bottom: 0; }
  .split-side > .week { margin-top: var(--space-8); }
  .split-main > :first-child { margin-top: 0; }
}
.week { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-10); }
.notice { margin-bottom: var(--space-6); }
.drill-notice { margin-top: var(--space-6); }

.section-heading { margin: var(--space-8) 0 0; }
.section-heading-later { margin: var(--space-10) 0 0; }
.loading { color: var(--neutral-text-muted); margin: 0; }