/* ===== VARIABLES ===== */
:root {
  --bg-color: #fdfdfd;
  --text-color: #1e1e1e;
  --accent1: #ff6b6b;
  --accent2: #5f6cff;
  --accent3: #ffa552;

  --content-max: 1200px;

  --pad: 1rem;
  --radius: 14px;
  --shadow: 0px 3px 15px rgba(0, 0, 0, 0.1);
}

html.dark {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --accent1: #ff8c00;
  --accent2: #1e90ff;
  --accent3: #36aa36;
  --shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* ===== GLOBAL ===== */
body {
  margin: 0;
  padding: 2rem;
  font-family: "Inter", sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
  display: flex;
  justify-content: center;
}


h1, h2 {
  margin: 0.25rem 0;   /* top/bottom, left/right */
  padding: 0;           /* remove any padding if present */
  line-height: 1.2;     /* optional: tighter line spacing */
}

.button, .text-bubble{
  background: white;
  border-radius: var(--radius);
  padding: 0.75rem;
  color: black;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;
  border: none;
  outline: none;
  
}

.button:hover {
  transform: scale(1.03);
  cursor: pointer;       /* recommended for buttons */
}



/* ===== HOME ===== */
.home-grid {
  display: grid;
  grid-template-columns: 320px 800px;
  gap: 2rem;       /* adds 2rem horizontal & vertical spacing between grid items */

  align-items: start;              /* prevents stretching */
}

.left-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


.profile-pic-box {
  position: relative;       /* establishes positioning context */
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.profile-pic {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
  object-fit: cover;
}

.profile-text {
  position: absolute;         /* overlays the image */
  top: 10px;                  /* distance from top of image */
  left: 50%;                  /* horizontally center */
  transform: translateX(-50%);
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.3);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  font-size: 1rem;
  
  white-space: nowrap;        /* prevents text from breaking into multiple lines */
  text-decoration: none;      /* removes underline by default */
}
.profile-text:hover {
  background-color: rgba(0,0,0,0.6);
  color: #fff;
}

.contact-box {
  padding: var(--pad);
  background: var(--accent3);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.contact-box a {
  color: black;
  font-weight: bold;
}

.right-column {
  display: flex;
  flex-direction: column;
  gap: 2rem;       /* space between about-box and projects-box */
}
.about-box {
  padding: var(--pad);
  background: var(--accent2);
  border-radius: var(--radius);
  color: white;
  box-shadow: var(--shadow);
}

.projects-box {
  padding: var(--pad);
  background: var(--accent1);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: white;
}


.projects-grid {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;        /* allows tiles to wrap to next row */
  gap: 1rem;              /* spacing between tiles */
  justify-content: flex-start; /* align tiles to the left */
}

.project-tile {
  background: white;
  border-radius: var(--radius);
  padding: 0.75rem;
  color: black;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease;

  width: 220px;            /* fixed width */
  height: 300px;           /* fixed height */
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* prevent overflow from text or images */
}

.project-tile:hover {
  transform: scale(1.03);
}

.project-tile img {
  width: 100%;
  height: 150px;           /* fixed image height */
  object-fit: cover;       /* crop if necessary */
  border-radius: var(--radius);
  flex-shrink: 0;
}
@media (max-width: 800px) {
  .home-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .profile-pic-box,
  .profile-pic {
    max-width: 180px; /* smaller column on mobile */
  }
  .contact-box,
  .about-box,
  .projects-box {
    grid-column: 1;
    grid-row: auto;
  }
  .projects-grid {
    grid-template-columns: 1fr; /* stack tiles on mobile */
  }
  .project-tile {
    width: 100%;           /* tiles take full width on mobile */
    height: auto;           /* adjust height to content */
  }
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */

.project-page {
  width: 1200px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Banner image */
.project-banner img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.project-title {
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--text-color);
}

.project-subtitle {
  font-size: 1.2rem;
  opacity: 0.85;
}

/* Sections */
.project-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.project-section {
  padding: 1.5rem;
  border-radius: var(--radius);
  background: white;
  box-shadow: var(--shadow);
}

.project-section h2 {
  margin-top: 0;
  color: var(--accent2);
}

/* Demo box */
.demo-box {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--accent3);
  box-shadow: var(--shadow);
}

/* Back button */
.back-button {
  margin-top: 1rem;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  color: var(--accent1);
  transition: opacity 0.2s ease;
}

.back-button:hover {
  opacity: 0.7;
}

/* ============================================================
   PROJECT: DIGIT PREDICT
   ============================================================ */

/* Layout: canvas left, bar chart right */
#main-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

#demo-left-column,
#demo-right-column {
  flex: 1;        /* equal growth */
  min-width: 0;   /* prevents flex overflow issues */
}
/* Canvas styling */

#predict, #erase, #result  {
  margin-bottom: 0.75rem;
}

#predict {
  color: white;
  background-color: var(--accent1);
}

#erase {
  color: white;
  background-color: var(--accent2);
}


#canvas, #chart-container {
  width: 100%;
  height: auto;   /* keep aspect ratio */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
}

#chart-container {
  background-color: var(--bg-color);
}



/* ========== BASIC TABLE RESET ========== */
#prob-chart {
  width: 100%;
  max-width: 400px;
  --color: steelblue;            /* bar color */
  margin:0;
  padding: 2rem;
}

#prob-chart td {
  position: relative;
  background-color: steelblue;
  overflow: visible;   /* allow label outside bar */
  transition: width 0.3s ease;
  
}

/* value box */
#prob-chart .bar-value {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /*left: calc(var(--size) * 100% + 6px);  /* just outside bar */
  right: -50px;
  font-size: 0.9rem;
  white-space: nowrap;
  color: black;
  pointer-events: none;
}

/* Make label digits large */
#prob-chart th {
  font-size: 2rem;
  padding-right: 10px;
  text-align: right;

}

/* ========== CONTROL GAP BETWEEN BARS ========== */
#prob-chart tr {
  --bar-height: 80px;     /* <-- change this for thicker or thinner bars */
  height: var(--bar-height);
}

#prob-chart {
  --data-spacing: 15px;    /* <-- change this for larger/smaller gaps */
}

/* Optional highlight for max bar */
#prob-chart td.highlight {
  background-color: dodgerblue;
}