/* ===== Base ===== */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: "VT-100", fixedsys, System, monospace;
  font-size: 13px;
  background: #f7d5f7 url(plaid.jpg) center/cover fixed no-repeat;
}
body {
  display: flex;                 /* left pane + right pane */
  /* don't hide horizontal overflow so shadows aren't clipped */
  overflow-x: hidden;
  overflow-y: hidden;            /* page itself doesn't scroll */
}
a { color: #3c5832; }
center { text-align: center; }

/* ===== Shared “window” look ===== */
.sidebar, .mini-sidebar, .wide-sidebar, .box {
  background: #dff7d5;
  border: 1px solid #618a50;
  border-radius: 5px;
  box-shadow: 2px 2px #3c5832;
}
.sidebar img, .mini-sidebar img, .wide-sidebar img, .box img {
  max-width: 100%; height: auto;
}

.sidebar-column > .mini-sidebar + .mini-sidebar {
  margin-top: 20px;   /* adjust number to taste */
}

/* inside your left grid */
.sidebar-column > .sidebar-box {
  grid-column: 2;
  grid-row: 1 / span 2;  /* occupies the same two-row area */
}


/* stack Profile and Title Bar with a gap */
.sidebar-box {
  display: grid;
  grid-auto-rows: min-content;
  gap: 20px;   /* <— adjust to taste (e.g., 12px, 24px) */
}


.inner { padding: 10px 10px 5px; }
.title-bar, .box-title-bar { background: #7aa469; color: #fff; font-weight: bold; padding: 5px; }
.box-title-bar { padding: 7px 5px; }
.right { float: right; margin-right: 5px; font-family: Arial, sans-serif; line-height: 12px; }
.icon { border: 2px solid #80aa6f; border-radius: 50%; }

/* ===== LEFT PANE (grid) ===== */
/* LEFT PANE — no horizontal scrolling */
.sidebar-column{
  /* add a little extra width to absorb borders/shadows */
  width: 560px;                /* was 540px */
  padding: 20px;
  flex-shrink: 0;
  height: 100dvh;

  /* kill sideways scroll cold */
  overflow-y: auto;
  overflow-x: hidden;          /* <- key fix */
  scrollbar-gutter: stable;

  /* grid layout matching your screenshot */
  display: grid;
  grid-template-columns: 260px 260px;  /* two cards */
  gap: 20px;
  grid-auto-rows: min-content;
  align-content: start;
}

/* safety: never let cards force the grid wider */
.sidebar-column > .sidebar,
.sidebar-column > .mini-sidebar,
.sidebar-column > .wide-sidebar{
  max-width: 100%;
  overflow-wrap: anywhere;     /* long words won’t push width */
}

/* images can’t blow the width either */
.sidebar-column img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* ===== RIGHT PANE (scrollable) ===== */
.content-column{
  flex: 1;
  min-width: 0;                   /* allow flex child to shrink */
  height: 100dvh;                 /* fill viewport */
  overflow-y: auto;               /* this pane scrolls */
  overflow-x: visible;            /* keep shadows visible */
  padding: 20px;
  padding-right: 32px;            /* extra space so scrollbar never overlaps */
  scrollbar-gutter: stable both-edges; /* permanently reserve scrollbar space */
  -webkit-overflow-scrolling: touch;
}

.box{
  margin: 20px auto;
  width: 100%;
  max-width: 880px;               
}