/* --- For landing page and log in --- */
html, body {font-family: Arial, Helvetica, sans-serif;}

/* --- Sticky footer -------------------------------------------------
   #footer relies on Bootstrap's "mt-auto" (margin-top: auto) to get
   pushed to the bottom of the page, but that only works when its
   parent is a flex container. body wasn't one, so on short pages
   (e.g. "Choose a science") the footer just sat wherever the content
   ended, leaving a gap of body's plain white background between the
   content and the footer - the "white line" that got more visible
   the more you zoomed out, since more of that gap came into view. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto; /* grow to fill leftover space, pushing footer down */
}

#navbar {
  background-color: #9112BC !important;
  width: 100% !important;
}
#navbar .nav-link,
#navbar a,
#navbar label {
  color: #ffffff !important;
}
/* The search input keeps its normal white background (it's not meant
   to blend into the purple navbar the way nav links/labels/anchors
   do), so its placeholder needs a readable dark/grey color instead of
   the white above — white-on-white was making "Search..." invisible.
   Kept as its own rule (rather than folded into the group above) so
   this distinction doesn't get re-merged by accident later. */
#navbar input::placeholder {
  color: #6c757d !important;
}
/* To this completely normal, uniform link styling: */
#navbar .nav-link.active {
  color: #ffffff !important;
  font-weight: normal !important; /* Forces it back to normal weight */
}
#footer {
  background-color: #9112BC !important;
  color: #ffffff !important;
  width: 100% !important; display: flex;
  flex-direction: column; flex: 0 0 auto;
}
#footer footer {
  background-color: #9112BC !important;
  margin: 0 !important;
}

/* Ensures text and privacy links inside your footer display clearly in white */
#footer .nav-link, 
#footer a, 
#footer p, 
#footer li {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Updates the separator line color so it doesn't stay black against the purple */
#footer .border-bottom {
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}
.entireloginpage {height: 70vh;}
.text-center {color: white;}
.text-rgb-145-18-188 {color: #9112BC;}
.likelybutton{color: #9112BC; background-color: white; border: #9112BC solid 1px; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding-left: 5%; padding-right: 5%; padding-top: 1%; padding-bottom: 1%; font-size: larger; gap: 50px; text-decoration: none;}
.logonbutton {display: flex; flex-direction: row; justify-content: center; margin-left: 50px; margin-right: 50px;} 
#welcomepage {margin:50px;padding: 50px; height: 50vh;}
.welcometolikely {display: flex; justify-content: center;}

.donthaveaccount {text-align: center; color: #9112BC;}

.welcomemessages {display: flex; justify-content: space space-between; gap: 20px;}
.welcomevideo {display: flex; flex-shrink: 1; flex-grow: 0; justify-content: right; aspect-ratio: 16 / 9; width: 600px;}
.welcometext {font-size: large;}

.likelybutton{ background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}


.page-title {
  font-size: 40px; 
  
  margin-top: 30px;
  margin-bottom: 10px; 
  padding-top: 10px; 
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  flex-grow: 0;
  flex-shrink: 2;
  width: 100%;
  letter-spacing: 10%;
  font-family: Arial, Helvetica, sans-serif;
  color: #9112BC;
}





.loginpage {display: flex; flex-direction: row; justify-content: center; align-items: center;}
.signinbutton {display: flex; flex-direction: row; justify-content: center;}


@media (max-width: 1000px) {.sciences {display: grid; grid-template-columns: 200px 200px; grid-template-rows: 30vh; place-items: center; column-gap: 50px; justify-content: center;}}

/* --- For selecting sciences --- */

.text-2322 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: 25px;
  padding: 10px;
  margin-bottom: 50px;
  text-decoration: none;
  text-transform: none;
  color: #9112BC;
  border: #9112BC solid 1px;
}


:root {
  --purple: #8e24aa; 
  --circle-size: 40px;
  --line-thickness: 3px;
}

.progress-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1000px; 
  margin: 50px auto;
  margin-bottom: 50px;
  position: relative;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* Makes all steps take up equal space */
}

/* The Connector Line */
.step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -50%; /* Center the line between circles */
  width: 100%;
  height: var(--line-thickness);
  background-color: var(--purple);
  transform: translateY(-50%);
  z-index: 0;
}

/* Hide the line for the very first circle */
.step:first-child::before {
  display: none;
}

/* The Circles */
.step-circle {
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  border: 1px solid var(--purple); /* Thin outline for inactive steps */
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1; /* Sits on top of the line */
  color: white;
  font-family: sans-serif;
  font-weight: bold;
}

/* Active/Completed State */
.step.active .step-circle {
  background-color: var(--purple);
}

#progressbar {margin-top: 30px; margin-bottom: 30px;}
.chooseoption {max-width: 1000px;}
/* Container for the 3 science options */
.scienceoptions {
  display: flex;
  flex-direction: row;      /* Horizontal layout by default */
  justify-content: center; /* Center options horizontally */
  align-items: center;     /* Align items vertically */
  gap: 20px;               /* Add spacing between options */
  flex-wrap: wrap;         /* Allows stacking on smaller screens */
}

/* Ensure links maintain their structure in flex layout */
.scienceoptions > a {
  text-decoration: none;
  display: block;
}

/* Media Query: Stack items vertically on screens narrower than 768px */
@media (max-width: 768px) {
  .scienceoptions {
    flex-direction: column; /* Switches from horizontal to vertical */
  }
}
/* ==========================================
   1. FLEXIBLE GRID OUTER CONTAINER
   ========================================== */
.sciences {
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  align-items: center; 
  flex-grow: 1; 
  flex-shrink: 1; 
  margin-top: 3%; 
  margin-bottom: 3%;
}

/* ==========================================
   2. SHARED INTERACTIVE SCIENCE CARD RULES
   ========================================== */
.science-card {
  height: 100px;
  width: 200px;
  background-color: #ffffff !important;
  border: #9112BC solid 1px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  
  /* Your original clean transitions bundled together */
  transition: background-color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

/* Ensure child vector images smooth-scale correctly */
.science-card .vector {
  transition: filter 0.3s ease;
}

/* Ensure inner text properties transition smooth-scale */
.science-card .text-rgb-145-18-188 {
  transition: color 0.3s ease;
}

/* ==========================================
   3. INDIVIDUAL ICON SPECIFIC METRICS
   ========================================== */
/* .biology-icon, .chemistry-icon, .physics-icon: no dedicated rules —
   these inherit their structural layout/sizing entirely from
   .science-card, they're just used as identifying classes. */

/* ==========================================
   4. INTERNAL CARD ELEMENT ALIGNMENTS
   ========================================== */
.scienceicon {
  height: 50px; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  margin-top: 10px;
}

.science-title {
  display: flex; 
  justify-content: center; 
  align-items: center;
}

/* ==========================================
   5. UNIFIED HOVER STATES OVERLAYS
   ========================================== */
.science-card:hover {
  background-color: #9112BC !important;
  border-color: #9112BC;
  transform: scale(1.1);
}

/* Changes all label element tags to white simultaneously */
.science-card:hover .text-rgb-145-18-188 {
  color: #ffffff !important;
}

/* Inverts the dark svg vector images into clean, crisp white icons */
.science-card:hover .vector {
  filter: brightness(0) invert(1);
}

.likelybutton {transition: background-color 0.3s ease, transform 0.2s ease;}
.likelybutton:hover {background-color: #9112BC; transform: scale(1.1); color: white;}


.emphasisbutton {
  margin-inline: auto;
 flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-decoration: none;
  text-transform: none;
  color: #9112BC;
  background-color: #C8F7C5;
  padding: 20px;
  border: #9112BC solid 1px;
  max-width: fit-content;
  margin-top: 30px;
  margin-bottom: 30px;
}

.emphasisbutton:hover {
  background-color: #9112BC;
  transform: scale(1.1);
}
.emphasisbutton:hover .text-rgb-145-18-188 {color: white;}



.optionbutton 
{color: #9112BC; 
  text-align: center;
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  align-items: center;
  background-color: white; 
  border: #9112BC solid 1px; 
  margin-inline: auto;
  padding: 16px 20px; 
  font-size: larger; 
  gap: 50px; 
  width: 100%; 
  height: 100%;
  min-height: 100px;
  box-sizing: border-box;}

  /* Make every card in a task-grid row match the height of the
     tallest card in that row, so short titles don't leave a card
     visibly smaller than a neighbour with a longer title. */
  .task-grid {
  align-items: stretch;
  grid-auto-rows: 1fr;}

  .task-grid > a,
  .task-grid > .task-card {
  display: flex;
  height: 100%;}

  .task-card {
  width: 100%;
  height: 100%;}

  .topic-grid {
  display: grid;
  /* Creates 4 equal columns */
  grid-template-columns: repeat(4, 1fr); 
  /* The space between the boxes */
  gap: 15px; 
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;}

  .task-grid {
  display: grid;
  /* Creates 4 equal columns */
  grid-template-columns: repeat(4, 1fr); 
  /* The space between the boxes */
  gap: 15px; 
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;}


  @media (max-width: 1000px) {.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; 
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;}}

   @media (max-width: 1000px) {.task-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px; 
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;}}


  .optionbutton:hover {
  background-color: #9112BC;
  transform: scale(1.1);
}
.optionbutton:hover .text-rgb-145-18-188 {color: white;}

.getstartedbutton 
{background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
  text-align: center;}

.get-button-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%; margin: 3%;}

  .getstartedbutton:hover {background-color: #9112BC; color: #fff; transform: scale(1.1)}



  .contact-container {
  font-family: Arial, Helvetica, sans-serif, sans-serif;
  text-align: left;
  max-width: 600px;
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: auto;
  margin-right: auto;
}

/* The Message Box */
textarea {
  width: 100%;
  height: 150px;
  border: 1px solid var(--purple);
  padding: 15px;
  font-size: 16px;
  resize: vertical; /* Allows user to pull it down, but not sideways */
  margin-bottom: 20px;
  box-sizing: border-box; /* Ensures padding doesn't make it wider than 100% */
}

/* Placeholder text styling */
textarea::placeholder {
  color: #bbb;
  text-align: center;
  line-height: 120px; /* Vertically centers the placeholder text */
}

/* The Submit Button */
.submit-btn {
  background: #C8F7C5;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.button-wrapper {
  display: flex;
  justify-content: flex-end; /* This pushes the child to the right */
  width: 100%;}


.submit-btn:hover {
  background-color: var(--purple);
  color: white;
}

/* Remove default focus ring and add a slight glow */
textarea:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(142, 36, 170, 0.3);
}


.card-header {background-color: white; border: #9112BC 2px solid; color: #9112BC; font-size: large; border-radius: 0;}
.list-unstyled {font-family: Arial, Helvetica, sans-serif;}
/* NOTE: .w-100 used to carry background-color/color/hover styling
   here. That's Bootstrap's plain "width: 100%" utility class, reused
   50+ times across the site for completely unrelated elements — so
   the color styling was leaking onto every one of them, including
   #mainNavCollapse in header.ejs (white text forced by
   #navbar .nav-link, combined with :hover flipping the background
   to white too, made it look like an invisible blank band). If a
   specific button was meant to have that purple/white-hover look,
   give it its own dedicated class instead of using w-100 for it. */
.card-body {border: #9112BC 1px solid;}
.revcard-body {border: #9112BC 1px solid; padding: 3%;}
.card {border: #9112BC 1px solid;}


.free-trial {color: black}
.tryoutforfree {border: #9112BC solid 2px; padding: 2%;}
.freetrialfeatures {color: black; list-style-type: none;}

.button-wrapper2 {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}

  .contact-us {display: flex;
  justify-content: center; font-size: 120%; padding-left: 2%; padding-right: 2%; text-align: center;}

  .pricings {display: grid; grid-template-columns: 1fr 1fr; gap: 100px; height: 50vh; align-items: center}
  .student-pricing {background-color: white;}
  .teacher-pricing {background: white;}

  .section-title {
  font-size: 30px; 
  margin-top: 10px; 
  margin-bottom: 10px; 
  padding-top: 10px; 
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  flex-grow: 0;
  flex-shrink: 2;
  width: 100%;
  letter-spacing: 20%;
  font-family: Arial, Helvetica, sans-serif;
  color: #9112BC;
}

.revmat-title {color: #9112BC; text-decoration: none; text-align: center; display: flex; justify-content: center; font-size: larger; text-align: center;}

#revisionpage {display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;}
.revisiontext {grid-column: span 2; grid-row: span 2; padding-right: 5%;}
.revisionvideo {grid-column-start: 3; width: 100%; aspect-ratio: 16 / 9;}
.revisiongraphic {grid-column-start: 3; grid-row-start: 2; display: flex; justify-content: center; align-items: center;}

@media (max-width: 1000px) {#revisionpage {display: grid; grid-template-rows: 1fr 2fr; grid-template-columns: 1fr 1fr 1fr;}}
@media (max-width: 1000px) {.revisiontext {grid-column-start: 2; grid-column: span 3} }
@media (max-width: 1000px) {.revisionvideo {grid-column-start: 1 ;grid-row-start: 1; grid-column: span 2}}
@media (max-width: 1000px) {.revisiongraphic {grid-column-start: 3; grid-row-start: 1}}


.h3 {
  display: flex; 
  justify-content: center;
  color: #9112BC;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 10%;
  font-size: 18px;
}

/* Target both text inputs and the select dropdown */
input[type="text"], 
select {
  width: 100%;             /* Make it fill the container width */
  padding: 15px;           /* Adjust this to match the height of your others */
  border: 1px solid #ccc;  /* Light gray border */
  border-radius: 8px;      /* Rounded corners (or 0 for sharp) */
  font-size: 16px;         /* Standard readable size */
  background-color: #fff;  /* White background */

 /* These two lines are the most important for <select> */
  appearance: none;        /* Removes the default browser styling */
  -webkit-appearance: none;
}

  input[type="email"], 
select {
  width: 100%;             /* Make it fill the container width */
  padding: 15px;           /* Adjust this to match the height of your others */
  border: 1px solid #ccc;  /* Light gray border */
  border-radius: 8px;      /* Rounded corners (or 0 for sharp) */
  font-size: 16px;         /* Standard readable size */
  background-color: #fff;  /* White background */
/* These two lines are the most important for <select> */
  appearance: none;        /* Removes the default browser styling */
  -webkit-appearance: none;

}
  
  input[type="password"], 
select {
  width: 100%;             /* Make it fill the container width */
  padding: 15px;           /* Adjust this to match the height of your others */
  border: 1px solid #ccc;  /* Light gray border */
  border-radius: 8px;      /* Rounded corners (or 0 for sharp) */
  font-size: 16px;         /* Standard readable size */
  background-color: #fff;  /* White background */
/* These two lines are the most important for <select> */
  appearance: none;        /* Removes the default browser styling */
  -webkit-appearance: none;

}
 

/* Optional: Add a custom arrow if you use 'appearance: none' */
.form-group {
  position: relative;
}

/* This adds a custom arrow icon back since 'appearance: none' hides the default one */
.form-group::after {
  content: "▼";
  font-size: 12px;
  position: absolute;
  right: 15px;
  top: 40%;
  pointer-events: none; /* Allows user to click "through" the arrow to open menu */
}

.selectschool {padding-bottom: 10%;}

#selectscience {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* Forces this section to expand and fill available height */
}

.role-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px; /* Space between the "I am a" and the options */
  font-family: sans-serif;
  color: #9112BC;
}

.option {
  display: flex;
  align-items: center;
  gap: 15px; /* Space between the box and the text */
  cursor: pointer;
}

/* Hide the actual ugly default radio circle */
.option input {
  display: none;
}

/* Create the square box */
.custom-box {
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  display: inline-block;
  background-color: white;
}

/* Style for when it is SELECTED */
.option input:checked + .custom-box {
  background-color: #9112BC;
  border-color: #9112BC;
}

.main-label {font-size: 20px;}

.label-text {
  font-size: 20px; color: #9112BC;
}

.answerinput {height: 50px;}

.answer-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #333; /* This creates the underline */
  padding: 10px 0;
  font-size: 16px;
  outline: none; /* Removes the blue box when clicking */
  background: transparent;
}

.markscheme {
  margin-top: 10px;
  color: #8a2be2; /* Purple to match your theme */
  font-style: italic;
  border-bottom: 1px dashed #8a2be2; /* Visual indicator for the answer key */
  padding-bottom: 5px;
}


.tasktitle {margin-top: 5%; color: #9112BC; background-color: #fff; border: #9112BC solid 1px; text-align: center;  padding-top: 10px; padding-bottom: 10px; justify-content: center; font-size: large;}

.question-blurb {padding-top: 2%; padding-bottom: 2%;}


.submission-options input{
  display: none;
}

.submission-options {display: flex; flex-direction: column; align-items: left; padding-left: 35%; column-gap: 20%;}


.submission-options input:checked + .custom-box {
  background-color: #9112BC;
  border-color: #9112BC;
}
.tickone {font-size: 20px; color: #9112BC; margin-bottom: 2%; margin-top: 5%;}

.option2 {
  display: flex;
  align-items: center;
  gap: 15px; /* Space between the box and the text */
  cursor: pointer;
  margin-bottom: 2%;
}

.question-container {margin-top: 2%;}

.task-button-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%; margin: 3%;}


.taskview {display: grid; grid-template-columns: 1fr 2fr;}
.tasksettings {padding-left: 2%; padding-right: 2%; padding-top: 30px; margin-top: 5px;}
.taskpreview {padding-left: 2%; padding-right: 2%;}


/* 1. Main Outer Window Frame Wrapper */
.calendar {
  font-family: Arial, Helvetica, sans-serif; 
  font-size: medium; 
  border: 1px solid rgba(145, 18, 188, 0.2) !important;
  background-color: #ffffff !important;
  border-radius: 8px;
  padding: 12px !important;
  box-sizing: border-box;
  width: 340px !important; 
  
  /* FIXED DESIGN BOUNDS: Prevents layout elements from bouncing downwards */
  min-height: 295px !important; 
  display: flex !important;
  flex-direction: column !important;
}

.cal {
  background-color: #ffffff !important;
  width: 100% !important;
}

/* 2. Month Layout Header Area */
.cal-month {
  display: flex !important; 
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

/* 3. Weekday Column Header Alignment */
.cal-weekdays {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  color: #718096 !important;
  font-size: 12px !important;
}

/* 4. GRID RECOVERY BLOCK */
.cal-days {
  min-height: 240px; 
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  align-content: start;
}

/* 5. OVERRIDE BUTTON INVISIBILITY CAUSES */
.cal-days button.cal-btn,
.cal-days .cal-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Force system color values */
  color: #2d3748 !important;
  background: transparent !important;
  border: none !important;
  
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  
  /* Break through forced width collapses */
  width: 34px !important;
  height: 34px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  
  visibility: visible !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
}

/* Style for disabled dates belonging to previous padding months */
.cal-days button.cal-btn:disabled,
.cal-days .cal-btn:disabled {
  color: #cbd5e1 !important;
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  background: transparent !important;
}

/* Hover accent look */
.cal-days button.cal-btn:not([disabled]):hover {
  background-color: #f3e8ff !important;
  border-radius: 50% !important;
  color: #8b008b !important;
}

.locked-div {
  pointer-events: none; /* Disables all clicking/typing */
  opacity: 0.7;         /* Makes it look "grayed out" */
  user-select: none;    /* Prevents highlighting text */
}

.locked-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0); /* Transparent but blocks clicks */
}

/* Styling for any calendar day that has an active task deadline */
.has-deadline {
  background-color: #f3e8ff !important; /* Soft purple background fill */
  border: 2px solid #8b008b !important;  /* Sharp purple outer ring */
  color: #8b008b !important;             /* Dark purple text color */
  font-weight: bold !important;
  
  /* Change this to 4px if you want a permanent square instead of a circle */
  border-radius: 50% !important;         
  
  box-shadow: 0 2px 4px rgba(139, 0, 139, 0.15); /* Soft permanent glow */
}


.view-button{ background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 20px;
    margin-top: 5%;
  margin-bottom: 5%;
    width: 250px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.view-button-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}


  .view-button:hover {
  background-color: var(--purple);
  color: white;}

  .edit-button{ background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 20px;
    margin-top: 5%;
  margin-bottom: 5%;
    width: 250px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.edit-button-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}


  .edit-button:hover {
  background-color: var(--purple);
  color: white;}


  .assign-button{ background: #C8F7C5;
  color: #9112BC;
  border: 1px solid #9112BC;
   margin-top: 5%;
  margin-bottom: 5%;
  padding: 10px 40px;
  font-size: 20px;
  width: 250px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.assign-button-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}


  .assign-button:hover {
  background-color: var(--purple);
  color: white;}


  .markscheme-edit {border: #9112BC 1px solid;}

  input[type="correction"], 
select {
  width: 100%;             /* Make it fill the container width */
  padding: 15px;           /* Adjust this to match the height of your others */
  border: 1px solid #9112BC;  /* Light gray border */
  border-radius: 8px;      /* Rounded corners (or 0 for sharp) */
  font-size: 16px;         /* Standard readable size */
  background-color: #fff;  /* White background */
  
  /* These two lines are the most important for <select> */
  appearance: none;        /* Removes the default browser styling */
  -webkit-appearance: none;
}


  .edit-button-active{ background: #9112BC;
  color: white;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 20px;
  margin-bottom: 5%;
    width: 250px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.edit-button-active-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}

  .markscheme-edit {width: 250px; border: #9112BC solid 2px;}


  .resetmarkscheme { background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 20px;
    margin-top: 5%;
  margin-bottom: 5%;
    width: 250px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.resetmarkscheme {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}


  .resetmarkscheme:hover {
  background-color: var(--purple);
  color: white;}


    .confirmchanges { background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 20px;
    margin-top: 5%;
    width: 250px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.confirmchanges {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}


  .confirmchanges:hover {
  background-color: var(--purple);
  color: white;}


  .markscheme-edit-wrapper {display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%; margin-bottom: 5%;}

  .selectdate {color: #9112BC; display: flex; justify-content: center; border: #9112BC solid 1px; margin: 0%; padding: 3%; font-size: large;}

  .text-2323 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  font-size: 25px;
  padding: 10px;
  text-decoration: none;
  text-transform: none;
  color: #9112BC;
  border: #9112BC solid 1px;
}


:root {
  --purple: #8e24aa; 
  --circle-size: 40px;
  --line-thickness: 3px;
}

.studentfeedback {border: #9112BC 2px solid; margin-bottom: 10%;}
.feedbackheader {
  text-align: center;
  background-color: #9112BC; 
  color: white; 
  padding: 10px 40px;
  font-size: 20px;
  width: 100%;}
  .comments {margin: 2%; margin-top: 5%; margin-bottom: 5%;}


  .class-container {
  display: flex;
  align-items: center;    /* Vertically centers arrows with the box */
  justify-content: center; /* Centers the whole thing on the page */
  gap: 20px;              /* Space between arrows and the box */
  margin-top: 2%;
  margin-bottom: 2%;
}

.subject-box {
  border: 1px solid #9112BC; /* Purple border */
  padding: 15px 40px;        /* Space inside the box */
  color: #9112bc;            /* Purple text */
  font-size: 24px;
  font-family: sans-serif;
  min-width: 200px;
  text-align: center;
  
}

.arrow-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  transition: transform 0.2s;
}

.arrow-btn:hover {
  transform: scale(1.2); /* Makes arrows grow slightly when hovered */
}

  .student-container {
  display: flex;
  align-items: center;    /* Vertically centers arrows with the box */
  justify-content: center; /* Centers the whole thing on the page */
  gap: 20px;              /* Space between arrows and the box */
  margin-top: 2%;
}

.student-name {
  border: 1px solid #9112BC; /* Purple border */
  padding: 15px 40px;        /* Space inside the box */
  color: #9112bc;            /* Purple text */
  font-size: 24px;
  font-family: sans-serif;
  min-width: 200px;
  text-align: center;
  
}



.completion { width: 100%; padding-top: 10%;}
.progression {width: 100%; padding-top: 10%; margin-top: 5%;}
.completion2 { width: 100%; padding-top: 5%;}
.progression2 {width: 100%; padding-top: 5%;}


.graphtitle {border: #9112BC solid 1px; color: #9112bc; background-color: white; width: 100%; margin-bottom: 0%; padding-bottom: 3%; padding-top: 3%; text-align: center; font-size: x-large;}
.fullpage-graphtitle {border: #9112BC solid 1px; color: #9112bc; background-color: white; width: 100%; margin-bottom: 0%; padding-bottom: 1%; padding-top: 1%; text-align: center; font-size: x-large;}

.subtitle {
  font-size: 30px; 
  margin-top: 10px; 
  margin-bottom: 10px; 
  padding-top: 10px; 
  padding-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-grow: 0;
  flex-shrink: 2;
  width: 100%;
  letter-spacing: 5%;
  font-family: Arial, Helvetica, sans-serif;
  color: #9112BC;
}


.form-entry {
  display: flex;
  flex-direction: column;
  gap: 5px;                /* Creates the space between label and box */
  margin-bottom: 15px;      /* Spacing between rows */
}

label {
  color: #9112BC; display: flex; justify-content: flex-start;
}

input[readonly], input:disabled {
  background-color: #dcdcdc; /* The gray fill */
  border: 1px solid #000;    /* The thin black outline */
  cursor: not-allowed;       /* Changes the mouse icon to a 'stop' sign */
  color: #000;               /* Ensures text stays black/visible */
}

.settings-button-wrapper {display: flex; justify-content: center; align-items: center; padding-top: 10%;}


.class-title {color: #9112BC; text-decoration: none; text-align: center; display: flex; justify-content: center; font-size: larger; text-align: center;}
.class-body {border: #9112BC 1px solid; padding: 2%;}


.classinfo {width: 400px;}
.classpreview {grid-column: span 2;}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal columns */
  gap: 20px;                             /* Space between cards */
  max-width: 600px;                      /* Limits the overall width */
  margin: 0 auto;                        /* Centers the grid on the page */
}

.stat-card {
  background-color: #9112BC;             /* Purple background */
  color: white;
  padding: 20px 10px;
  text-align: center;
  border-radius: 4px;                    /* Tiny rounding as seen in image */
}

.stat-label {
  font-size: 12px;
  margin: 0 0 10px 0;                    /* Spacing below label */
}

.stat-value {
  font-size: 16px;                       /* Large text for the numbers */
  margin: 0;
}


.summary-grid {display: grid; grid-template-columns: 1fr 1fr;}
.individualfeedback {margin-left: 10%; margin-top: 10%; border: #9112BC 1px solid;}
.classfeedback {margin-left: 10%; margin-top: 10%; border: #9112BC 1px solid;}
.stats {margin-right: 10%; margin-top: 10%;}
.stats2 {display: flex; align-items: center;}


.graphs {display: flex; justify-content: space-between; gap: 10px;}


table {
  display: table;
  width: 100%;
  border-collapse: collapse; /* Prevents "double" borders between cells */
  font-family: sans-serif;
  border: black 1px solid;
}

th, td {
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  border-bottom: 1px solid black; /* Creates clean horizontal lines */
}

thead {
  background-color: #9112BC; /* Purple header to match your theme */
  color: white;
}

/* Optional: Zebra stripes for better readability */
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}


.dashboardpreview {display: grid; grid-template-columns: 1fr 1fr;}

.profilepreview {margin-top: 5%; margin-bottom: 5%;}


.form-check-label {color: #000;}


.showresults {margin-top: 2%; margin-bottom: 0%;}


.export-button {
  background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.export-button-wrapper {
  display: flex;
  justify-content: center; /* This pushes the child to the right */
  width: 100%;}


.export-button:hover {
  background-color: var(--purple);
  color: white;}


  .task-blurb-active {display: flex; flex-direction: column; border: #9112BC solid 3px; font-size: small; flex-wrap: wrap; width: 150px; min-width: 150px; height: 120px; text-align: center; padding: 10px; justify-content: space-around; }
    .task-blurb {display: flex; flex-direction: column; border: gray solid 3px; font-size: small; flex-wrap: wrap; width: 150px; min-width: 150px; height: 120px; text-align: center; padding: 10px; justify-content: space-around;}

  .taskdue-blurb {display: flex; flex-direction: column; }

  .taskhighlights {display: flex; gap: 20px; padding: 20px; border: #000 solid 1px; margin-top: 16px; margin-bottom: 16px; justify-content: flex-start; box-sizing: border-box; overflow: scroll;}

  #buttoncarousel * {width: 200px; font-size: medium;}

  #buttoncarousel {display: flex; gap: 20px; justify-content: center;}

  #buttoncarousel-teacher {display: flex; gap: 20px; justify-content: center;}
#buttoncarousel-teacher * {width: 200px; font-size: medium;}


  @media (max-width: 1000px) {#buttoncarousel {display: grid; gap: 20px; grid-template-columns: 1fr 1fr; text-align: center; place-items: center;
  height: 100px; margin-bottom: 20px;}} 
@media (max-width: 1000px) { #buttoncarousel * {display: flex; flex-direction: row; justify-content: center; align-items: center;}}

  @media (max-width: 1000px) {#buttoncarousel-teacher {display: grid; gap: 20px; grid-template-columns: 1fr 1fr; text-align: center; place-items: center;
  height: 100px; margin-bottom: 20px;}} 
@media (max-width: 1000px) { #buttoncarousel-teacher * {display: flex; flex-direction: row; justify-content: center; align-items: center;}}







.homepagehero {
  display: grid; 
  grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 2.5fr; gap: 5px;}
/* Container reset to layout items as a vertical list stack */
.taskblurbs {
  border: 1px solid rgba(145, 18, 188, 0.15) !important;
  background-color: #ffffff;
  border-radius: 12px;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 16px !important;
  box-sizing: border-box;
  max-height: 400px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
}

/* Individual list row tracking element framework */
.teacher-task-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;
  padding: 12px 16px;
  gap: 15px;
  width: 100% !important;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.teacher-task-row:hover {
  border-color: #9112BC !important;
  background-color: #faf5ff;
}

/* Flex-link that stretches across the whole row area */
.card-click-wrapper-link {
  display: flex !important;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  text-decoration: none !important;
  color: #2d3748 !important;
  gap: 20px;
}

/* Keeps Title text on left */
.task-info-content {
  display: flex;
  flex-direction: column;
  text-align: left !important;
}

.task-title-text {
  font-weight: 600;
  font-size: 14px;
  color: #1a202c;
}

.task-meta-tag {
  font-size: 12px;
  color: #9112BC;
  font-weight: 500;
}

/* Clean date badge wrapper */
.task-date-badge {
  font-size: 12px;
  background-color: #f3e8ff;
  color: #6b21a8;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* Dedicated delete button container and styles */
.delete-deadline-form {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
}

.delete-x-btn {
  background: transparent !important;
  border: none !important;
  color: #ef4444 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer;
  padding: 0 4px !important;
  transition: transform 0.1s ease;
}

.delete-x-btn:hover {
  transform: scale(1.25);
}

/* Smooth wrapper transition styling */
.card-click-wrapper {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.card-click-wrapper:hover {
  transform: translateY(-2px);
}
/* Update the styles for your two card wrappers */
.homepagecalendar, 
.taskhighlights2 {
  min-height: 250px !important;    /* Swapped from 380px to create a sleek rectangle profile */
  background-color: #ffffff;       
  border: 1px solid #8b008b;       
  border-radius: 8px;              
  padding: 15px 25px !important;   /* Narrower vertical spacing, wider horizontal space */
  display: flex;
  flex-direction: column;
}
.homepagecalendar .w-340px {
  width: 100% !important;          /* Let the inner grid stretch horizontally to match sizes */
  max-width: 100%;
}

/* Compact the calendar day grid area */
#calendarDaysGridStudent {
  min-height: 150px !important;    /* Compressed slightly to pull up the bottom layout floor */
  display: grid; 
  grid-template-columns: repeat(7, 1fr); 
  gap: 2px; 
  align-content: start;
}

/* Adjust the inner dashed state box in the right card */
.taskblurbs-container {
  min-height: 150px !important;    /* Keeps the right box precisely level with the calendar grid */
  border: 1px dashed #e0b0ff; 
  background-color: #faf8ff;
}

.calendardates {text-align: center; font-size: x-large;  padding-top: 10px; margin-bottom: 5px; margin-top: 20px;  letter-spacing: 20%;
  font-family: Arial, Helvetica, sans-serif;
  color: #9112BC;}
.currenttaskstitle {text-align: center; font-size: x-large; padding-top: 10px; margin-bottom: 5px; margin-top: 20px;  letter-spacing: 20%;
  font-family: Arial, Helvetica, sans-serif;
  color: #9112BC;} 

#buttoncarousel-homepage {display: flex; gap: 30px; justify-content: space-between; margin-top: 5%; margin-bottom: 5%;}

#buttoncarousel-homepage * {width: 300px; display: flex; justify-content: center;}


  .task-blurb-teacher {display: flex; flex-direction: column; border: #9112BC solid 3px; font-size: medium; flex-wrap: wrap; width: 200px; height: 200px; text-align: center; padding: 10px; justify-content: space-between; margin-bottom: 30px;}
  .ratecompleted {font-size: x-large; color: #9112BC; font-weight: bold; border: #9112BC 1px solid;}

  .classblurb {border: #000 solid 1px; display: flex; flex-direction: column; column-gap: 30px; flex-grow: 1; flex-shrink: 1;}
  .blurbwrapper {display: flex; justify-content: center; align-items: center; flex-direction: column;}

  .blurbtitle {text-align: center; font-size: xx-large; color: white; background-color: #9112BC;}

  .classeslist {display: flex; justify-content: space-between; gap: 80px;}

.taskbox {border: #9112BC solid 1px; margin-bottom: 50px;}
.tasktitle2 {border: #9112BC solid 1px; color: #9112BC; background-color: #fff; border: #9112BC solid 1px; text-align: center;  padding-top: 10px; padding-bottom: 10px; justify-content: center; font-size: large;}

.view-further-buttons {display: flex; justify-content: flex-start; gap: 20px; padding-left: 3%;}
.view-further-buttons * {font-size: medium; padding-top: 3%;padding-top: 3%; padding-bottom: 3%; padding-left: 10px; text-align: center; width: 200px;}

.student-table {font-size: small;}

.assignmentpage {
  display: table;
  width: 100%;
  border-collapse: collapse; /* Prevents "double" borders between cells */
  margin: 10px 5px;
  font-family: sans-serif;
  border: black 1px solid;
}


.emphasisbutton2 {background-color: #C8F7C5; color: #9112BC; border: #9112BC solid 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.emphasisbutton2:hover {
  background-color: #9112BC;
  color: white;
  transform: scale(1.1);
}


@media (max-width: 770px) {.view-further-buttons {display: flex; flex-direction: column; justify-content: flex-start; padding-left: 3%; gap: 2%;}}
@media (max-width: 770px) {.view-further-buttons * {font-size: medium; padding-left: 10px; text-align: center; width: 200px;}}


.export-button2 {
  background: white;
  color: #9112BC;
  border: 1px solid #9112BC;
  padding: 10px 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: medium;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Adds that slight lift seen in the image */
}

.export-button-wrapper2 {
  display: flex;
  justify-content: flex-end; /* This pushes the child to the right */
  width: 100%;}


.export-button2:hover {
  background-color: var(--purple);
  color: white;}

    .card-click-wrapper {
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.card-click-wrapper:hover {
  transform: translateY(-2px);
  cursor: pointer;
}


/* ============================================================
   MOBILE / RESPONSIVE FIXES
   Everything below patches fixed-width, no-wrap, and
   percentage-padding layouts that were cutting off content
   on phones and small tablets. Kept separate from the rules
   above so existing desktop styling is untouched.
   ============================================================ */

/* --- Global safety net -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  overflow-x: hidden;   /* stops any leftover fixed-width element from
                            forcing a horizontal scrollbar / cut-off */
  max-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

/* Fixes the white sliver that appears below the footer, especially
   when the page is zoomed out. That gap is caused by sub-pixel
   rounding: at non-100% zoom, the browser's computed viewport height
   doesn't land on a whole pixel, leaving a tiny strip of the page's
   default white background exposed below the last element. You can't
   reliably eliminate that rounding gap, but you can make it invisible
   by giving <html> the same background color as the footer, so any
   gap that appears is purple-on-purple instead of purple-on-white. */
html {
  background-color: #9112BC;
}

img, svg { max-width: 100%; }

table { max-width: 100%; }

/* --- Headings that use large font-size + letter-spacing ------ */
@media (max-width: 600px) {
  .page-title   { font-size: 28px; letter-spacing: normal; margin-top: 15px; }
  .section-title{ font-size: 22px; letter-spacing: normal; }
  .subtitle     { font-size: 22px; letter-spacing: normal; }
}

/* --- Landing page: welcome text + video ----------------------- */
@media (max-width: 768px) {
  .welcomemessages {
    flex-direction: column;
  }
  .welcomevideo {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin-top: 25px;
  }
}

/* NOTE: the old mobile .science-card width rule that used to live
   here has been replaced by the dedicated "SCIENCE SELECTOR CARDS"
   section further down this file, which keeps the cards in one
   row instead of stacking/overflowing. */

/* --- Science/topic/task option grids --------------------------- */
@media (max-width: 600px) {
  .topic-grid, .task-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 10px;
  }
  .sciences {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 400px) {
  .topic-grid, .task-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Revision page (video + text + graphic grid) --------------- */
@media (max-width: 600px) {
  #revisionpage {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .revisiontext, .revisionvideo, .revisiongraphic {
    grid-column: 1 !important;
    grid-row: auto !important;
    padding-right: 0;
  }
}

/* --- Homepage hero: calendar + tasks side-by-side -> stacked --- */
@media (max-width: 900px) {
  .homepagehero {
    display: flex !important;
    flex-direction: column !important;
  }
  .homepagecalendar, .taskhighlights2 {
    min-height: unset !important;
  }
}

/* Calendar widget itself: drop the fixed pixel width */
.calendar {
  width: 100% !important;
  max-width: 340px;
}
.cal-wrapper { max-width: 100% !important; }

@media (max-width: 400px) {
  .cal-days button.cal-btn, .cal-days .cal-btn {
    width: 100% !important;
    height: 30px !important;
    font-size: 12px !important;
  }
}

/* --- Quick-nav button carousels --------------------------------- */
@media (max-width: 700px) {
  #buttoncarousel-homepage {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  #buttoncarousel-homepage * {
    width: 100% !important;
    max-width: 320px;
  }
}
@media (max-width: 480px) {
  #buttoncarousel, #buttoncarousel-teacher {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  #buttoncarousel *, #buttoncarousel-teacher * {
    width: 100% !important;
  }
}

/* --- Generic pill/action buttons: let them fill width on phones - */
@media (max-width: 480px) {
  .likelybutton, .getstartedbutton, .view-button, .edit-button,
  .assign-button, .edit-button-active, .resetmarkscheme,
  .confirmchanges, .export-button, .export-button2, .submit-btn,
  .optionbutton {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* --- Pricing / class lists / dashboard grids --------------------- */
@media (max-width: 768px) {
  .pricings {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    height: auto !important;
  }
  .classeslist {
    flex-direction: column !important;
    gap: 30px !important;
  }
  .dashboardpreview, .summary-grid {
    grid-template-columns: 1fr !important;
  }
  /* .taskview also carries Bootstrap's "d-flex align-items-start" inline
     classes, and Bootstrap's display utilities are !important — so it
     was always laid out as a flex row, never actually as CSS grid, and
     grid-template-columns had no effect. Override the flex behaviour
     directly instead: stack tasksettings above the task preview, and
     stretch both to full width instead of shrink-wrapping. */
  .taskview {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .classinfo { width: 100% !important; }
  .classpreview { grid-column: span 1 !important; }
}

/* --- Role selector / submission options: avoid % padding cutoff -- */
@media (max-width: 600px) {
  .role-selector {
    flex-direction: column;
    gap: 15px;
  }
  .submission-options {
    padding-left: 5% !important;
  }
}

/* --- View-further-buttons already has a 770px query; tidy widths - */
@media (max-width: 480px) {
  .view-further-buttons * { width: 100% !important; }
}

/* --- Edit-class roster grid: stacked "card" rows on phones ------- */
.roster-mobile-label {
  display: none;
  font-size: 11px;
  font-weight: 600;
  color: #9112BC;
  text-transform: uppercase;
  margin-right: 6px;
}

@media (max-width: 700px) {
  .roster-mobile-label { display: inline-block; }

  .roster-grid-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 14px;
  }
  .roster-grid-row > div { width: 100%; }
  .roster-grid-row .text-center,
  .roster-grid-row .text-end {
    text-align: left !important;
    display: flex;
    align-items: center;
  }
  .roster-grid-row .text-center input,
  .roster-grid-row .text-end input {
    margin: 0 !important;
  }
}

/* --- About page cards: tighten padding on very small screens ----- */
@media (max-width: 480px) {
  .about-card { padding: 1.25rem 1rem; }
  .founder-box { padding: 1.5rem 1rem !important; }
}


/* ============================================================
   TASK / PREVIEW-TASK / VIEW-SUBMISSION PAGES — RESPONSIVE
   ============================================================
   These rules key off class names that are reused identically
   across every task_<subject><n>.ejs, preview_task_<subject><n>.ejs
   and view_submission_<subject><n>.ejs file (question-blurb,
   sketch-grid-*, fab-tool-btn, carousel-row / nav-pill-box, etc).
   As long as new question pages keep using the same class names,
   they get this responsive behaviour automatically — nothing to
   add per-question. Some rules use !important because each page
   also carries its own <style> block (loaded after this file),
   so this is what wins the override without editing every page.
   ============================================================ */

/* Question figures/diagrams: never let a wide fixed-width image
   overflow the reading column; centre it like its caption.
   (img/svg are already capped to max-width:100% globally above —
   this just centres them and applies to any width="" attribute.)
   height:auto is set here too — scoped to .question-blurb only,
   so it can never touch the navbar logo — meaning any future
   question image scales proportionally even if whoever writes
   the EJS forgets to add style="height: auto;" by hand. */
.question-blurb img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 100%;
}

/* Long question titles next to the teacher's mark-override chip:
   wrap onto their own line instead of squeezing together. */
@media (max-width: 700px) {
  .question-container > .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
}

/* --- XY sketch/graph tool (used for every "graph/sketch" question) */
@media (max-width: 600px) {
  .sketch-grid-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .sketch-axis-y-input {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    width: 100% !important;
    height: 36px !important;
    text-align: left !important;
    padding-left: 10px !important;
  }
  .sketch-grid-canvas,
  .sketch-axis-x-input {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sketch-grid-canvas { height: 200px !important; }
  .sketch-clear-btn { align-self: center !important; }
}

/* --- Floating tool buttons (calculator / ruler / periodic table) */
@media (max-width: 480px) {
  .fab-tool-btn {
    width: 48px !important;
    height: 48px !important;
  }
  .fab-tool-btn img { width: 22px !important; height: 22px !important; }
  #openCalculatorFAB { bottom: 15px !important;  right: 15px !important; }
  #toggleRulerFAB     { bottom: 70px !important;  right: 15px !important; }
  #openPeriodicFAB    { bottom: 125px !important; right: 15px !important; }
}

/* --- Draggable screen ruler: keep it fully on-screen on phones -- */
@media (max-width: 480px) {
  #screenRuler {
    left: 10px !important;
    top: 140px !important;
    width: min(320px, calc(100vw - 20px)) !important;
  }
}

/* --- view_submission navigator pills (class / student / task) --- */
@media (max-width: 600px) {
  .carousel-row {
    gap: 10px !important;
  }
  .nav-pill-box {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
    white-space: normal !important;
  }
}


/* ============================================================
   SCIENCE SELECTOR CARDS (Biology / Chemistry / Physics)
   ============================================================
   Covers both the landing page's cards (wrapped in .science-row —
   see landing_page.ejs) and the "Choose a science" step's cards
   (wrapped in .scienceoptions), since both reuse the same
   .science-card box. On request: these stay in ONE ROW at every
   screen size — they never stack into a column — and shrink to
   fit instead of overflowing/getting clipped.
   ============================================================ */

.science-row,
.scienceoptions {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

.science-row > a,
.scienceoptions > a {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px; /* stops cards from stretching too wide on tablets/desktop */
}

/* The card fills whatever width its <a> resolves to, replacing
   the old fixed 200px width so it can shrink cleanly on narrow
   screens instead of overflowing (the cause of the clipped/
   "squished" look). */
.science-row .science-card,
.scienceoptions .science-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  .science-row,
  .scienceoptions {
    gap: 8px !important;
  }
  .science-row .science-card,
  .scienceoptions .science-card {
    height: 90px;
    padding: 4px;
  }
  .science-row .scienceicon,
  .scienceoptions .scienceicon {
    height: 30px;
    margin-top: 6px;
  }
  .science-row .science-card .vector,
  .scienceoptions .science-card .vector {
    width: 26px;
    height: 26px;
  }
  .science-row .science-title,
  .science-row .science-card .text-rgb-145-18-188,
  .scienceoptions .science-title,
  .scienceoptions .science-card .text-rgb-145-18-188 {
    font-size: 12px;
    line-height: 1.15;
  }
}

@media (max-width: 380px) {
  .science-row .science-card,
  .scienceoptions .science-card {
    height: 80px;
  }
  .science-row .science-card .vector,
  .scienceoptions .science-card .vector {
    width: 22px;
    height: 22px;
  }
  .science-row .science-title,
  .science-row .science-card .text-rgb-145-18-188,
  .scienceoptions .science-title,
  .scienceoptions .science-card .text-rgb-145-18-188 {
    font-size: 11px;
  }
}


/* ============================================================
   DASHBOARD RESULTS TABLES (teacher + student)
   ============================================================
   Both wrapper divs (.student-table on dashboard_teacher,
   .student-results-table on dashboard_student) carry Bootstrap's
   .overflow-hidden utility, which is !important and was clipping
   the table's later columns on narrow screens instead of letting
   them scroll into view. Give them a horizontal scroll on mobile
   instead, and keep the inner table wide enough that its columns
   stay legible rather than getting squashed illegibly thin.
   ============================================================ */
@media (max-width: 900px) {
  .student-table,
  .student-results-table {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .student-table table,
  .student-results-table table {
    min-width: 640px;
  }
}


/* ============================================================
   NAV ARROW ICONS (calendar prev/next, carousel pills, etc.)
   ============================================================
   These used to be ◀ / ▶ text characters, which can render like
   emoji depending on the device/font. They're now inline SVG
   chevrons (class="arrow-icon") — this just makes sure they align
   nicely with surrounding text and pick up hover feedback.
   ============================================================ */
.arrow-icon {
  vertical-align: middle;
  display: inline-block;
}
.carousel-arrow {
  transition: opacity 0.15s ease;
}
.carousel-arrow:hover:not(.opacity-25) {
  opacity: 0.65;
}