/* Layered over the bundle's own stylesheet.
 *
 * The bundle's CSS is machine-generated from source we no longer have, so it is
 * never edited directly — corrections live here instead, loaded after it.
 *
 * Most of this file fixes the narrow layout. The bundle collapses its sidebar
 * at 900px by turning it into a flex row, but the <nav> inside carries an
 * inline `display:grid`, which an ordinary rule cannot beat. The nav therefore
 * stayed a tall vertical column sitting next to the logo, and everything marked
 * `only-wide` — including the account block and sign-out — disappeared
 * entirely. The result was unusable rather than merely cramped.
 */

/* --------------------------------------------------------------------------
 * Logo
 * -------------------------------------------------------------------------- */

.hh-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The artwork is a cat's head on transparency; nudge it so the ears do not
     kiss the top of the ring. */
  transform: translateY(1px) scale(0.94);
}

/* --------------------------------------------------------------------------
 * Sidebar extras
 * -------------------------------------------------------------------------- */

/* The foot holds share, the account block and the version line. It used to be
   `only-wide`, i.e. hidden exactly when the window got small enough that you
   most needed a way to reach them. */
/* `min-width: 0` on both, for the third time in this stylesheet and the same
   reason each time: a flex or grid item defaults to `min-width: auto`, which
   refuses to shrink below its content. The account row's content — avatar, a
   long email, Edit, Sign out — measured 283px inside a 236px sidebar, so Sign
   out rendered 61px past the right edge where it could not be clicked. It
   looked exactly like a broken button. */
.sidebar-foot {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sidebar-account {
  border-top: 1px solid var(--dark-line);
  padding-top: 10px;
  gap: 9px;
  min-width: 0;
  /* And if a name is long enough to squeeze them anyway, the buttons drop to
     their own line rather than off the edge. */
  flex-wrap: wrap;
  row-gap: 8px;
}

.sidebar-account .sidebar-who {
  flex: 1 1 60px;
  min-width: 0;
}

.sidebar-account .btn {
  flex: none;
}

.sidebar-version {
  font-size: 10px;
  color: #6b6452;
  padding: 0 6px;
}

/* --------------------------------------------------------------------------
 * Wide: the sidebar is pinned
 * --------------------------------------------------------------------------
 *
 * The bundle uses `position: sticky`, which drifts here: scrolling 151px moved
 * the sidebar from top:0 to top:-10. Sticky positions against the nearest
 * scrolling ancestor and is sensitive to the height of its grid area, so an
 * element exactly as tall as the viewport does not reliably hold still.
 *
 * `fixed` is unambiguous. Taking it out of flow does not disturb the layout,
 * because the grid's first column is a fixed 236px track and stays that width
 * whether or not anything occupies it — so the column reserves the space and
 * the fixed sidebar sits exactly over it.
 */

@media (min-width: 901px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 236px;
    height: 100vh;
    /* dvh accounts for mobile browser chrome that comes and goes; the vh above
       stays as the fallback for anything that does not know dvh. */
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Taking the sidebar out of flow leaves `.main` as the only grid item, and it
     auto-placed itself into the FIRST column — sliding under the fixed sidebar.
     Naming the column keeps it where it belongs; the empty first track still
     reserves the 236px. */
  .main {
    grid-column: 2;
  }
}

/* --------------------------------------------------------------------------
 * Narrow: the sidebar becomes a top bar
 * -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* `minmax(0, 1fr)`, not `1fr`. A `1fr` track carries an automatic `min-content`
   * floor, and this track's min-content is the sidebar — whose own min-content is
   * the full width of all ten nav items laid end to end. The track therefore grew
   * to ~1100px inside an 865px viewport, giving the page a horizontal scrollbar
   * and pushing the account block off the right edge. Allowing the track to be
   * narrower than its contents is what lets the nav scroll instead of pushing. */
  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    overflow: visible;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 9px 14px;
    border-bottom: 1px solid #2c2a1e;
  }

  /* Beat the inline `display:grid` the bundle sets on <nav>.
   *
   * `min-width: 0` is load-bearing. A flex item defaults to `min-width: auto`,
   * which refuses to shrink below its content — so the ten nav items pushed the
   * sidebar wider than the viewport, gave the whole page a horizontal scroll,
   * and shoved the account block off the right-hand edge. `overflow-x: auto`
   * alone does not help until the item is allowed to be narrower than what is
   * inside it. */
  .sidebar > nav {
    display: flex !important;
    order: 3;
    flex: 1 0 100%;
    min-width: 0;
    gap: 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding-bottom: 2px;
    /* Fade the right edge so it reads as scrollable rather than clipped. */
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  }

  .sidebar > nav .navitem {
    width: auto;
    flex: none;
    padding: 6px 9px;
    white-space: nowrap;
  }

  /* Logo block shrinks but stays legible. */
  .sidebar > .row:first-child {
    order: 1;
    padding: 0 !important;
    gap: 9px;
  }

  .sidebar > .row:first-child > div:first-child {
    width: 32px !important;
    height: 32px !important;
  }

  .sidebar > .row:first-child .serif {
    font-size: 20px !important;
  }

  .sidebar > .row:first-child .eyebrow {
    display: none;
  }

  /* Account and sign-out move to the right of the logo instead of vanishing. */
  .sidebar-foot {
    order: 2;
    margin-left: auto;
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .sidebar-account {
    border-top: none;
    padding-top: 0;
    max-width: 46vw;
  }

  .sidebar-version {
    display: none;
  }

  /* These two sit beside the logo now, so they must not wrap onto three lines.
     The icon carries the meaning once the label is this tight. */
  .sidebar-share,
  .sidebar-assistant,
  .sidebar-settings {
    width: auto !important;
    padding: 6px 8px !important;
    white-space: nowrap;
    flex: none;
  }

  /* The member card and the spacer are genuinely surplus at this width. */
  .sidebar .only-wide {
    display: none !important;
  }

  /* --- top bar ---------------------------------------------------------- */

  /* The sidebar is now the sticky bar at the top. The topbar is sticky too, at
   * the same offset, so the two overlapped and the page title was clipped
   * behind the nav. Only one of them can own `top: 0`; the topbar scrolls away
   * instead, which also buys back vertical room on a phone. */
  .topbar {
    position: static;
    padding: 12px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Title takes its own line; the controls sit together underneath, so the
     month stepper and the lens switch stop being pushed onto separate rows. */
  .topbar > div:first-child {
    flex: 1 0 100%;
  }

  .topbar .spacer {
    display: none;
  }

  .page {
    padding: 16px 16px 60px;
  }
}

/* --------------------------------------------------------------------------
 * Phone
 * -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  /* Collapse the name and address, never the buttons. Hiding the whole account
     row here removed the only way to sign out on a phone — the avatar still
     says who is signed in, and Edit and Sign out stay reachable. */
  .sidebar-who {
    display: none;
  }

  .sidebar-account {
    max-width: none;
    gap: 6px;
  }

  /* Icon only: the words do not fit beside an avatar and two buttons. */
  .sidebar-share,
  .sidebar-assistant,
  .sidebar-settings {
    font-size: 0 !important;
    padding: 6px !important;
  }

  .sidebar-share span,
  .sidebar-assistant span,
  .sidebar-settings span {
    font-size: 14px;
  }

  .topbar .seg {
    order: 3;
  }

  /* Multi-column dashboards get a single column rather than squeezing. */
  .page .grid[style*='grid-template-columns'] {
    grid-template-columns: 1fr !important;
  }

  .modal,
  .modal.wide {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
 * Card headers with controls
 * --------------------------------------------------------------------------
 *
 * The calendar's header now carries month arrows alongside the lens chips, and
 * on a narrow card that extra width squeezed the title until "November 2026
 * calendar" broke across three lines. Letting the head wrap puts the controls
 * on their own row instead, and the controls themselves never wrap mid-group.
 */

.card-head {
  flex-wrap: wrap;
  row-gap: 8px;
}

.card-head > .row {
  flex: none;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
 * Modals
 * --------------------------------------------------------------------------
 *
 * The bundle already pins `.modal-foot` with position:sticky, so Done stays put
 * while the body scrolls. The header was left to scroll away with the content —
 * and the entry composer is tall enough that reaching the category list puts the
 * title, the amount and the merchant out of sight. You end up looking at a wall
 * of chips with no indication of what you are filling in.
 *
 * Making the head sticky too means the modal always says what it is, however far
 * down you have scrolled. It mirrors the footer's existing treatment rather than
 * inventing a new one.
 */

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  /* The bundle's 1px bottom border disappears against scrolled content; a soft
     shade underneath makes the join read as an edge while the body moves. */
  box-shadow: 0 6px 12px -8px rgba(23, 21, 15, 0.28);
}

/* The sticky footer sits over the body too, so give it the higher layer it
   needs once the header is also claiming one. */
.modal-foot {
  z-index: 2;
}