/* Fill the theme's content column instead of the base 720px calculator
   cap, so the widget matches the width of the article sections around it
   (theuniquery.com's .post-content is ~1019px, wider than 720). The double
   class (.uqtool.uqtool--gpa) outranks base.css's single-class
   `.uqtool { max-width: 720px }`. Content inside stays readable because the
   subject rows, results and tables are all fluid; only the outer cap moves. */
.uqtool.uqtool--gpa {
  max-width: 100%;
}

.uqtool--gpa .uqtool__gpa-subjects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
}
/* The native `hidden` attribute is a UA-stylesheet `display:none`, and ANY
   author-stylesheet rule that also sets `display` beats it regardless of
   specificity (author origin always outranks UA origin) -- so every class
   below that sets its own `display` needs an explicit [hidden] override or
   toggling .hidden via JS silently does nothing. Same bug/fix pattern as
   base.css's .uqtool__grid[hidden] etc. block; repeated here because these
   are tool-local classes base.css has no way to know about. */
.uqtool--gpa .uqtool__gpa-subjects[hidden],
.uqtool--gpa .uqtool__gpa-custom-wrap[hidden] {
  display: none;
}
/* The 4th-subject slot gets its own highlighted panel with a cyan accent
   edge -- it plays by different rules (bonus, not divided, an F here
   doesn't fail the result) so it should look visually set apart, not
   just separated by a rule. */
.uqtool--gpa .uqtool__gpa-subjects--fourth {
  margin-top: .9rem;
  padding: .9rem .9rem .5rem;
  background: var(--uq-panel);
  border: 1px dashed var(--uq-accent);
  border-radius: var(--uq-radius-sm);
}
/* Named grid areas (not bare column order) so the SAME markup can be
   reflowed from "one row" (desktop) to "name on top, controls below"
   (mobile) purely in the media query, without JS or duplicate markup. */
.uqtool--gpa .uqtool__gpa-row {
  display: grid;
  grid-template-columns: 1fr auto 40px;
  grid-template-areas: "name ctrl rm";
  gap: 8px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--uq-line);
  border-radius: var(--uq-radius-sm);
  padding: 6px;
}
.uqtool--gpa .uqtool__gpa-subjects--fourth .uqtool__gpa-row {
  background: #fff;
}
.uqtool--gpa .uqtool__gpa-row[data-uq-row="fourth"] {
  grid-template-columns: 1fr auto;
  grid-template-areas: "name ctrl";
}
.uqtool--gpa .uqtool__gpa-name { grid-area: name; }
.uqtool--gpa .uqtool__gpa-row select,
.uqtool--gpa .uqtool__gpa-row > input[type="number"],
.uqtool--gpa .uqtool__gpa-custom-wrap { grid-area: ctrl; }
.uqtool--gpa .uqtool__gpa-remove { grid-area: rm; }

.uqtool--gpa .uqtool__gpa-row select,
.uqtool--gpa .uqtool__gpa-row input[type="number"] {
  width: 110px;
}
.uqtool--gpa .uqtool__gpa-custom-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: start;
}
.uqtool--gpa .uqtool__gpa-custom-wrap input[type="number"] {
  width: 62px;
}
.uqtool--gpa .uqtool__gpa-slash {
  color: var(--uq-mute);
  font-weight: 700;
}
.uqtool--gpa .uqtool__gpa-name {
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
}
.uqtool--gpa .uqtool__gpa-name:focus {
  box-shadow: none !important;
}
.uqtool--gpa .uqtool__gpa-row select,
.uqtool--gpa .uqtool__gpa-row input[type="number"] {
  padding: 10px 32px 10px 12px;
  height: 42px;
}
.uqtool--gpa .uqtool__gpa-row input[type="number"] {
  padding: 10px 12px;
  text-align: center;
}
.uqtool--gpa .uqtool__gpa-remove {
  appearance: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--uq-line);
  background: var(--uq-panel);
  color: var(--uq-soft);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.uqtool--gpa .uqtool__gpa-remove:hover {
  border-color: var(--uq-danger);
  color: #fff;
  background: var(--uq-danger);
}

/* Below ~560px, three side-by-side controls (name + grade/marks + remove)
   don't fit without crushing the subject name to 1-2 visible characters --
   confirmed on a real device (name field showed "বাং" for "বাংলা"). Reflow
   to two rows instead of shrinking further: name (full width) + remove on
   top, the grade/marks/custom control on its own row below with room to
   breathe. Same markup, same JS -- only which grid area each child sits in
   changes. */
@media (max-width: 560px) {
  .uqtool--gpa .uqtool__gpa-row {
    grid-template-columns: 1fr 40px;
    grid-template-areas:
      "name rm"
      "ctrl ctrl";
    row-gap: 6px;
  }
  .uqtool--gpa .uqtool__gpa-row[data-uq-row="fourth"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "ctrl";
  }
  .uqtool--gpa .uqtool__gpa-row select,
  .uqtool--gpa .uqtool__gpa-row input[type="number"] {
    width: 130px;
  }
  .uqtool--gpa .uqtool__gpa-custom-wrap input[type="number"] {
    width: 70px;
  }
}