/*-----------------------------------
  RESET & GLOBAL
------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

html, body {
  height: 100%;
  margin: 0;
  overflow-y: auto;   /* allow the page itself to scroll vertically */
  overflow-x: hidden;
}
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Noto Sans', sans-serif;
  background: #eeffff;
  /* no display:flex here */
}

/*-----------------------------------
  APP WRAPPER
------------------------------------*/
.river-app {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;    /* center horizontally */
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: #eeffff;
}

/*-----------------------------------
  HEADER
------------------------------------*/
.river-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.river-logo {
  height: 60px;
}
.download-btn {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: #0353bf; color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s;
}
.download-btn:hover { background: #023a9e; }

/*-----------------------------------
  INTRO TEXT
------------------------------------*/
.intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #333;
}
.intro a {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: #0353bf;
  text-decoration: none;
  font-size: 0.85rem;
}

/*-----------------------------------
  INPUT FORM
------------------------------------*/
.river-form {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;    /* wrap columns only on narrow screens */
}
.river-col {
  flex: 1 1 170px;    /* grow/shrink with minimum 170px, so 5 fit on most desktops */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 170px;
}
.river-col label {
  font-size: 0.9rem;
  color: #333;
}
.river-col input {
  width: 100%;
  padding: 0.4rem;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/*-----------------------------------
  RIVER CONTAINER (white box)
------------------------------------*/
.river-container {
  border: 1px solid #ccc;
  background: #fff;
  position: relative;

  /* only horizontal scrollbar if SVG is wider than this box */
  overflow-x: auto;
  
  /* no vertical overflow rule here—let it grow vertically */
  padding: 1rem;
  margin-bottom: 1rem;
}

/*-----------------------------------
  SVG RIVER
------------------------------------*/
#riverSVG {
  display: block;
  width: max-content;        /* allow horizontal scroll when needed */
  overflow: visible;         /* arrowhead can poke out */
}
#riverSVG text {
  pointer-events: none;
  text-anchor: middle;
  /* multi-line wrap for very long role names */
  white-space: pre-wrap;
  word-break: break-word;
}

/*-----------------------------------
  FOOTER
------------------------------------*/
.river-footer {
  text-align: right;
  font-size: 0.8rem;
  color: #666;
  margin-top: auto;
}

p {
  margin-top: 1rem;
}