/* =========================================== */
/* --- Base Styles (Keep Existing) --- */
/* =========================================== */
html {
    /* Ensure the root element itself doesn't block scrolling */
     height: 100%; /* Setting height on html can help % heights on body */
     overflow: auto; /* Allow scrolling if body overflows */
     box-sizing: border-box;
}

body {
  background-color: rgb(226, 230, 231);
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  padding: 0;
  margin: 0;
 
 /* Ensure body takes at least viewport height BUT CAN GROW */
 min-height: 100%; /* Use 100% relative to html */
 height: auto;      /* Allow height to be determined by content */

 /* Define how overflow should be handled */
 overflow-y: auto;  /* Show vertical scrollbar ONLY when needed */
 overflow-x: hidden;/* Prevent horizontal scroll */
 
 /* For smoother scrolling on iOS/WebKit */
 -webkit-overflow-scrolling: touch;

 /* Ensure body stays in the normal document flow */
 position: relative; /* Use relative instead of static, often better */
 box-sizing: border-box; /* Include padding/border in height calc */
}

body.questions-container {
    overflow: auto;
}

*, ::after, ::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container-fluid {
  width: 1100px;
  margin-right: auto;
  margin-left: auto;
   /* NEW: Make container responsive by default */
  max-width: 100%;
  padding-left: 10px; /* Add some padding */
  padding-right: 10px;
}

/* (Keep other base styles like inputs, buttons, header, filter, etc. as they were) */
/* ... [Rest of your existing base styles] ... */

/* Ensure the main container doesn't interfere */
.qblock {
    background: #ffffff;
    margin-top: 10px;
    padding: 15px 20px;
    box-sizing: border-box; /* Include padding in width/height */
    /* Explicitly allow content to determine its size */
    height: auto;
    overflow: visible; /* Don't let the qblock itself hide overflow */
}
form, table {
    height: auto;
    overflow: visible;
}

.qblock p {
  margin: 0 0 10px 0; /* Add some bottom margin to paragraphs */
  text-indent: 0;
}

.qblock, .qblock p  {
  font-size: 18px;
  text-align: justify;
  font-family: 'Times New Roman', 'Times New Roman', serif; /* Add serif fallback */
  font-weight: 400;
  font-style: normal;
  line-height: 1.5; /* Improve readability */
}

/* Ensure images don't overflow their containers */
.qblock img {
    max-width: 100%;
    height: auto; /* Maintain aspect ratio */
    display: block; /* Prevent extra space below image */
    margin: 10px auto; /* Center images with some margin */
}

/* Fix potential background color issues within question block */
.qblock table[bgcolor], .qblock td[bgcolor] {
    background-color: transparent !important; /* Override inline bgcolor */
}

/* Improve table layout within questions */
.qblock table {
    border-collapse: collapse;
    width: 100%; /* Make tables responsive by default */
    margin-bottom: 15px;
}
.qblock td, .qblock th {
    padding: 5px;
    vertical-align: top; /* Align content to the top */
    text-align: left; /* Default alignment */
}

/* Style form elements consistently */
.qblock select, .qblock input[type="text"], .qblock input[type="number"]  {
    background: #f0f2f2; /* Slightly softer background */
    border: 1px solid #ccc; /* Use standard border */
    padding: 6px 8px;
    margin: 1px 0;
    border-radius: 3px;
    font-size: 16px; /* Make form input text slightly larger */
    box-sizing: border-box; /* Include padding/border in width */
    max-width: 100%; /* Prevent overflow */
}

.qblock input[type="text"]:focus, .qblock input[type="number"]:focus, .qblock select:focus {
    background: #e9eded;
    border-color: #005d65; /* Use theme color for focus */
    outline: none;
}

.qblock input[type="radio"], .qblock input[type="checkbox"] {
  margin: 0 5px 0 2px; /* Adjust spacing */
  vertical-align: middle; /* Align with text */
  position: relative; /* Allow slight adjustment */
  top: -1px;
}

/* Specific table layouts (like the assertion list) */
.varinats-block, .alternatives { /* These often contain the choices */
  padding: 0;
}
.varinats-block > br, .alternatives > br { /* Remove potentially disruptive line breaks */
  display: none;
}

/* Target the table likely containing the numbered options */
.qblock form table table { /* Select tables nested within the form's main table */
     margin-top: 10px;
}
.qblock form table table td:first-child { /* Style the number cell (e.g., "1)") */
    width: 25px; /* Fixed width */
    font-weight: bold;
    padding-right: 5px;
    vertical-align: top;
    text-align: right;
}
.qblock form table table td:last-child { /* Style the option text cell */
    width: auto; /* Take remaining space */
    vertical-align: top;
    text-align: left; /* Ensure left alignment */
}
.qblock form table table tr { /* Add space between options */
    margin-bottom: 8px; /* Use margin if display is block, or rely on padding */
}
/* Ensure options are vertically aligned if they wrap */
.qblock form table table td{
    padding-bottom: 8px; /* Add padding for spacing */
}


/* Hint styling */
.qblock .hint {
  margin-bottom: 15px;
  line-height: 1.4;
  font-family: 'Times New Roman Bold', 'Times New Roman', serif;
  font-weight: 700;
  font-style: normal;
  font-size: 18px;
  color: #333333;
}

/* Answer input and Submit button */
#answer {
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
    padding: 6px 8px; /* Match other inputs */
    margin: 0 10px 10px 0; /* Add spacing */
    min-height: 34px; /* Ensure minimum height */
    display: inline-block;
    vertical-align: middle; /* Align with button */
    border: 1px solid #ccc;
    background: #f0f2f2;
     font-size: 16px;
}
#submit {
  display: inline-block;
  padding: 6px 15px;
  margin-bottom: 10px; /* Match input margin */
  font-size: 14px;
  font-weight: bold;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid #055154; /* Use theme color */
  border-radius: 4px;
  color: #055154; /* Use theme color */
  background-color: #ffffff; /* White background */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
}

#submit:hover {
  color: #ffffff;
  background-color: #43a39f; /* Lighter theme color on hover */
  border-color: #43a39f;
}

#submit:focus {
  color: #ffffff;
  background-color: #005d65; /* Darker theme color on focus */
  border-color: #00474d;
  outline: 2px solid #43a39f; /* Focus ring */
  outline-offset: 1px;
}

/* --- MathJax Horizontal Scrolling --- */
.MathJax_Display,
.MJXp-math {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 5px;
    text-align: center;
    box-sizing: border-box;
    margin: 1em 0;
}
span.MathJax, span.MJXp-math[id^="MJXp-Span"] {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
    padding: 0 2px;
    text-align: left;
    margin: 0;
}

/* =========================================== */
/* --- Media Queries (Mobile Adjustments) --- */
/* =========================================== */

/* --- Layout Stacking for Graph/Assertions (Tablets and Phones) --- */
@media (max-width: 768px) {

    /* Target the *outer* layout table holding graph and assertions */
    /* Making selector more specific: Assuming it's the first direct table in the form */
    .qblock > form > table:first-of-type > tbody > tr,
    .qblock > form > table:first-of-type > tbody > tr > td {
        display: block; /* Stack the main layout cells (graph cell, assertion cell) */
        width: 100% !important; /* Force cells to take full width */
        text-align: left; /* Reset alignment if needed */
        box-sizing: border-box; /* Ensure padding doesn't break layout */
    }

    /* Add space between the stacked graph/assertion sections */
    .qblock > form > table:first-of-type > tbody > tr > td {
       margin-bottom: 20px;
       padding-left: 0; /* Reset padding if needed */
       padding-right: 0;
    }
     .qblock > form > table:first-of-type > tbody > tr > td:last-child {
       margin-bottom: 0; /* No margin after the last stacked item */
    }


    /* Style potential headers (like "ГРАФИКИ", "УТВЕРЖДЕНИЯ") */
    /* This selector assumes the header is direct text/content within the stacked TD */
    /* Or if it's in its own paragraph/div inside */
     .qblock > form > table:first-of-type > tbody > tr > td > p:first-child, /* If header is in first <p> */
     .qblock > form > table:first-of-type > tbody > tr > td > div:first-child { /* If header is in first <div> */
         font-weight: bold;
         text-decoration: none; /* <<< REMOVE unwanted underline */
         text-align: center !important; /* Force center alignment for headers */
         margin-bottom: 15px;
         padding-top: 10px;
         font-size: 1.1em; /* Slightly larger header */
     }

     /* Crucially, target the rule that was causing the underline on the *first assertion* and remove the underline */
     /* This targets the cells (td) within the first row (tr:first-child) of a *nested* table */
    .qblock > form table table > tbody > tr:first-child > td {
        font-weight: normal; /* Reset font weight unless it's the number */
        text-decoration: none !important; /* <<< ENSURE NO UNDERLINE HERE */
        text-align: left; /* Reset alignment */
        margin-bottom: 0;
        padding-top: 0; /* Reset padding */
        padding-bottom: 8px; /* Keep bottom padding for spacing */
    }
    /* Re-apply bold to the number cell specifically if needed */
    .qblock > form table table > tbody > tr:first-child > td:first-child {
        font-weight: bold;
        text-align: right;
    }


     /* Adjust assertion list table within its stacked container */
      .qblock > form > table:first-of-type > tbody > tr > td table { /* Target tables *inside* the stacked cells */
           width: 100%;
           margin-top: 10px;
      }
       /* Ensure inner assertion list cells behave normally */
       .qblock > form table table td {
            display: table-cell; /* Keep inner table cells as table cells */
            width: auto;
            padding: 5px;
            padding-bottom: 8px; /* Spacing below each option row */
            text-align: left;
            vertical-align: top;
            border: none; /* Remove borders if any were added */
       }
        /* Style the assertion number cell (1), 2) etc.) */
        .qblock > form table table td:first-child {
           width: 25px; /* Small fixed width */
           font-weight: bold;
           padding-right: 5px;
           text-align: right;
           vertical-align: top;
       }
        /* Style the assertion text cell */
       .qblock > form table table td:last-child {
           width: auto; /* Take remaining space */
           vertical-align: top;
           text-align: left;
       }

       /* Adjust font sizes for readability */
       .qblock p, .qblock td, .qblock li { /* Apply to common text containers */
           font-size: 16px;
           line-height: 1.6; /* Increase line height slightly */
       }
       .qblock .hint {
            font-size: 17px;
       }

       /* Ensure images are centered within their block */
       .qblock img {
           margin-left: auto;
           margin-right: auto;
       }
}


/* --- Further Adjustments for Smaller Screens --- */

/* Medium screens and below (Tablets, Laptops) */
@media screen and (max-width: 1100px) {
 /* Container is already responsive */
 /* Filter panel is likely handled by its own logic/JS */

 /* Adjust columns if using Bootstrap-like classes */
 .col-xs-6 { width: 50%; text-align: center; }
 .col-md-10 { width: 100%; }
 .col-xs-12 {width: 100%; text-align: center;  }
 .col-xs-6 img { max-width: 100%; } /* Let images be full width of their column */
}

/* Smaller screens (Large Phones / Small Tablets) */
@media screen and (max-width: 760px) {
  .status-title-text { display: none }
  .pager-n-panel { display: none }
  .task-header-panel .eye-button { margin-left: 5px; }
  .task-header-panel .answer-button { width: auto; padding-left: 15px; padding-right: 15px; }
}

/* Medium Phones */
@media screen and (max-width: 620px) {
  .task-header-panel .answer-button {
      display: block;
      float: none;
      margin: 10px auto 5px auto;
      width: 90%; /* Make button wider */
      max-width: 250px; /* Limit max width */
  }
   /* Adjust task header spacing */
   .task-header-panel { padding: 10px; }
   .task-header-panel .id-text { margin-left: 5px; margin-right: 5px; }
   .task-header-panel .eye-button { margin-left: 10px; }

   /* Stack answer input and button */
   #answer {
       display: block;
       width: 90%;
       max-width: 300px;
       margin: 0 auto 10px auto; /* Center input */
   }
   #submit {
       display: block;
       width: 90%;
       max-width: 250px; /* Match button above */
       margin: 0 auto 10px auto; /* Center button */
   }
}

/* Small Phones */
@media screen and (max-width: 525px) {
  .header-title { width: auto; display: block; text-align: center; margin-bottom: 5px; }
  .header-icon { display: none; }
  .header-panel { height: auto; padding: 10px 0; }
  .header-block { display: block; text-align: center; }

  .filter-title-text-right {
      display: block;
      margin: 0 0 10px 0;
      text-align: center;
      line-height: 25px;
      float: none;
  }
  .filter-title-inner { line-height: 1.3; }
  #top_pager { margin-top: 20px; }

  .qblock { padding: 10px; }
  .qblock p, .qblock td, .qblock li, .qblock .hint {
      font-size: 15px; /* Further reduce font size */
      line-height: 1.5;
   }

  /* Make submit full width on very small screens */
  #submit, #answer {
      width: 100%;
      max-width: none; /* Remove max-width */
      padding: 10px 15px;
      box-sizing: border-box;
  }
  #answer {
      margin-bottom: 15px; /* More space between input and button */
  }
}

/* =========================================== */
/* --- Base Styles (Include Previous Fixes) --- */
/* =========================================== */
/* ... (Keep all previously added CSS rules) ... */

/* NEW/ADJUSTED: Style for A / Б labels */
/* Try a general approach first. If they are in specific tags like <th> or <span>, adjust the selector */
.qblock /* Target within the question block */ {
    /* You might need a more specific selector if A/B are inside a table header or specific span */
}
/* Assuming A and B might be bold or have specific spacing needs */
.qblock b, /* If they are using <b> tags */
.qblock strong, /* If they are using <strong> tags */
.qblock .figure-label /* Add this class to the A and B elements in HTML if possible */
{
    font-size: 1em; /* Ensure size is relative and consistent */
    font-weight: bold; /* Make sure both are bold (or normal if desired) */
    margin: 0 5px; /* Add consistent horizontal margin */
    display: inline; /* Ensure they behave as inline elements */
    vertical-align: baseline; /* Align with surrounding text */
}
/* If A and B are the *only* content in table cells, style the cells */
.qblock td.label-cell, /* Add class="label-cell" to the TDs containing only A or B */
.qblock th.label-cell /* Or THs */
{
    font-size: 1em;
    font-weight: bold;
    text-align: center; /* Center align the labels */
    width: 30px; /* Give them a small, consistent width if needed */
    padding: 5px;
}


/* --- ADJUSTMENT to existing mobile rules --- */
/* It's often better to use left-alignment on mobile generally */
@media (max-width: 768px) {
    /* ... (Keep other rules like stacking) ... */

    .qblock p, .qblock td, .qblock li {
        font-size: 16px; /* Base mobile font size */
        line-height: 1.6;
        text-align: left !important; /* USE LEFT ALIGNMENT for better wrapping */
    }

     /* ... (Keep other rules for 768px) ... */
}


/* --- NEW: Specific Adjustments for Landscape Mobile --- */
@media (orientation: landscape) and (max-height: 500px) { /* Target landscape phones/small devices */
    .qblock {
        padding: 10px 15px; /* Adjust padding if needed */
    }

    .qblock p, .qblock td, .qblock li {
        font-size: 14px; /* Slightly smaller font might be needed */
        line-height: 1.5; /* Adjust line height */
        text-align: left !important; /* DEFINITELY use left alignment here */
    }

    /* You might need to adjust specific container widths or display properties
       if the layout itself is forcing the bad wrapping */
    /* Example: If a container is too narrow */
    /* .qblock .text-container { max-width: none; width: 100%; } */

    /* Adjust form elements if needed */
     #answer {
        max-width: 200px;
        margin-right: 5px;
        vertical-align: middle;
     }
      #submit {
         padding: 6px 10px;
         vertical-align: middle;
     }
}

/* --- Ensure left alignment overrides in smaller screen portrait views too --- */
@media screen and (max-width: 620px) {
     /* ... other 620px rules ... */
      .qblock p, .qblock td, .qblock li {
           text-align: left !important; /* Reinforce left alignment */
      }
}
@media screen and (max-width: 525px) {
     /* ... other 525px rules ... */
     .qblock p, .qblock td, .qblock li {
           font-size: 15px;
           text-align: left !important; /* Reinforce left alignment */
     }
}