/* ===========================================================================
   Phone navigation
   ===========================================================================
   On a desktop the sections are reachable from the sidebar and the
   breadcrumb trail. Neither survives a phone: the sidebar is hidden at that
   width, and the trail wrapped onto two lines of small type that told you
   where you were without letting you go anywhere.

   So below the breakpoint the header becomes three things - a menu button,
   the practice name, the light/dark switch - with the greeting under them,
   and everything else moves into a drawer: the sections, the calendar, the
   dashboard, and the account links that used to crowd the bar.

   Above the breakpoint none of this exists; the header is django's.
   =========================================================================== */

.mnav-open {
  display: none;
}

@media (max-width: 767px) {
  /* --- Header ----------------------------------------------------------- */

  /* Three rows' worth of content in two: the name centred between the two
     buttons, the greeting beneath it. #branding and #user-tools are
     siblings django stacks in a column at this size, so the centring is
     done by leaving symmetrical room for the buttons, which are lifted out
     of the flow. */
  #header {
    position: relative;
    display: block;
    padding: 10px 52px 9px;
    text-align: center;
  }

  #branding {
    display: block;
    padding: 0;
  }

  #branding #site-name {
    display: block;
    margin: 0;
  }

  #branding #site-name a {
    display: inline-block;
    font-size: 1.15rem;
    line-height: 1.25;
  }

  #branding .practice-logo {
    max-height: 26px;
    max-width: 120px;
    margin: 0 auto 4px;
    display: block;
  }

  /* Only the greeting stays in the bar. The links it used to sit with are
     in the drawer's footer instead. */
  #user-tools {
    display: block;
    /* django floats this right. Left floating it shrinks to its own text
       and centring happens inside that shrunken box, so the greeting sat
       against the right edge instead of under the name. */
    float: none;
    margin: 3px 0 0;
    padding: 0;
    font-size: 0.66rem;
    line-height: 1.4;
    text-align: center;
  }

  #user-tools .user-links {
    display: none;
  }

  /* The trail is replaced by the drawer, which is a better answer to the
     same question: it says where everything is, not just where you are. */
  .breadcrumbs {
    display: none;
  }

  /* --- The two header buttons ------------------------------------------- */

  .mnav-open,
  #user-tools .theme-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

  #user-tools .theme-toggle {
    right: 10px;
  }

  .mnav-open {
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--header-link-color, #fff);
    cursor: pointer;
  }

  .mnav-open:hover,
  .mnav-open[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
  }

  /* The button is centred in the header by "top: 50%" plus a -50% pull
     UP, and that pull lives in the transform property. brand.css gives
     every <button> a "transform: translateY(1px)" press cue - which
     doesn't add to the pull, it replaces it, so pressing the menu button
     dropped it half its own height (19px) before the drawer opened.

     Restating the pull here keeps it in place, and the press reads as a
     squeeze instead of a nudge - the right cue anyway for a round icon
     button that has nowhere to travel to. */
  .mnav-open:active {
    transform: translateY(-50%) scale(0.9);
  }

  /* Three bars drawn from one element: a middle rule plus two shadows. One
     box to position instead of three, and it inherits the header's colour
     like the theme switch beside it. */
  .mnav-bars,
  .mnav-bars::before,
  .mnav-bars::after {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .mnav-bars {
    position: relative;
  }

  .mnav-bars::before,
  .mnav-bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .mnav-bars::before {
    top: -6px;
  }

  .mnav-bars::after {
    top: 6px;
  }
}

/* --- The drawer ---------------------------------------------------------- */

/* Rendered on every page but only ever opened below the breakpoint - the
   script does not bind above it. Kept out of the way with [hidden] so it
   costs nothing on a desktop. */
.mnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0, 0, 0, 0);
  transition: background-color 0.2s ease;
}

.mnav-backdrop.is-open {
  background: rgba(0, 0, 0, 0.42);
}

.mnav-backdrop[hidden] {
  display: none;
}

.mnav {
  position: fixed;
  z-index: 1310;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(310px, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--body-bg);
  border-right: 1px solid var(--border-color);
  box-shadow: 8px 0 34px rgba(0, 0, 0, 0.28);
  transform: translateX(-100%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}

.mnav[hidden] {
  display: none;
}

.mnav.is-open {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .mnav,
  .mnav-backdrop {
    transition: none;
  }
}

.mnav-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px 18px;
  /* Carries the header's own colour, so opening the drawer reads as pulling
     the top bar sideways rather than as arriving somewhere else. */
  background: var(--header-bg);
  color: var(--header-color);
}

.mnav-title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--header-branding-color);
}

.mnav-close {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--header-link-color, #fff);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
}

.mnav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 0 16px;
}

.mnav-section {
  margin: 16px 0 4px;
  padding: 0 18px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-quiet-color);
}

/* Buttons and links share the row shape: in this list they do the same job,
   and a 46px row is what a thumb expects either way. */
.mnav-link,
.mnav-link:link,
.mnav-link:visited {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 18px;
  border: none;
  background: none;
  color: var(--body-fg);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mnav-link:hover,
.mnav-link:focus {
  background: var(--darkened-bg);
  color: var(--body-fg);
}

.mnav-link.mnav-strong,
.mnav-link.mnav-strong:link,
.mnav-link.mnav-strong:visited {
  font-weight: 600;
  color: var(--link-fg);
}

/* Where you already are. */
.mnav-link.is-current,
.mnav-link.is-current:link,
.mnav-link.is-current:visited {
  background: var(--selected-bg);
  box-shadow: inset 3px 0 0 var(--link-fg);
  font-weight: 600;
}

.mnav-foot {
  flex: none;
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline-color);
  background: var(--md-surface-sunken);
}

.mnav-foot .mnav-link {
  font-size: 0.82rem;
  color: var(--body-quiet-color);
}

.mnav-logout {
  color: var(--error-fg);
}

/* --- Form rows ----------------------------------------------------------- */

/* Not strictly navigation, but the same class of problem: django's
   responsive.css sets ".form-row { padding: 15px 0 }" below the breakpoint,
   so every control sat flush against - and a pixel over - the border of the
   card holding it. Inset to match the card's own rhythm. */
@media (max-width: 1024px) {
  fieldset.module .form-row {
    /* border-box is the load-bearing half. The row is width:100% and
       content-box, so padding added to it lands OUTSIDE that 100% - the
       first attempt at this pushed every row 32px wider than the card it
       sits in, which is the same fault one level up. */
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }

  fieldset.module .form-row > div,
  fieldset.module .form-row .flex-container,
  fieldset.module .form-row .related-widget-wrapper {
    min-width: 0;
    max-width: 100%;
  }
}