/* Teacher Fernanda – Blog: GPA calculator ([tf_gpa]).
   White and light grey surfaces, navy text, red only for thin accents and the big result.
   Nunito, weight 700 minimum, nothing under 16px. Computers: each subject is a card on two lines;
   phones and tablets (below 1024px): every field is full width, one under the other. */
.tf-gpa {
	--tg-navy: #1A1C2A; --tg-red: #C4090A; --tg-text: #1f1f24; --tg-pt: #5c5f6b; --tg-grey: #EAEBEC; --tg-grey-2: #F6F6F7; --tg-line: #E1E3E6;
	margin: 0 0 1.8em; padding: 24px; border: 1px solid var(--tg-line); border-radius: 10px; background: #fff;
	color: var(--tg-text); font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.55;
}
.tf-gpa *, .tf-gpa *::before, .tf-gpa *::after { box-sizing: border-box; }
.tf-gpa p { margin: 0; }
.tf-gpa [hidden] { display: none !important; }
.tf-gpa .tf-gpa__pt { color: var(--tg-pt); font-weight: 700; }
.tf-gpa .tf-gpa__pt--block { display: block; margin-top: 6px; }

/* Labels: English first, Portuguese under it */
.tf-gpa .tf-gpa__label { display: block; margin: 0 0 6px; color: var(--tg-navy); font-size: 16px; font-weight: 900; line-height: 1.35; }
.tf-gpa .tf-gpa__label .tf-gpa__pt { display: block; font-weight: 800; }
.tf-gpa .tf-gpa__label .tf-gpa__sep { display: none; }

/* Fields */
.tf-gpa .tf-gpa__field {
	display: block; width: 100%; min-height: 48px; margin: 0; padding: 10px 14px;
	border: 2px solid var(--tg-grey); border-radius: 8px; background: #fff;
	color: var(--tg-navy); font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.3;
	transition: border-color .2s, box-shadow .2s;
}
.tf-gpa select.tf-gpa__field {
	appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%231A1C2A' d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E") right 16px center / 10px no-repeat;
}
.tf-gpa select.tf-gpa__field option, .tf-gpa select.tf-gpa__field optgroup { color: var(--tg-navy); font-weight: 800; }
.tf-gpa .tf-gpa__field::placeholder { color: #8a8d97; font-weight: 700; opacity: 1; }
.tf-gpa .tf-gpa__field:hover { border-color: #C9CBD0; }
.tf-gpa .tf-gpa__field:focus { outline: none; border-color: var(--tg-navy); box-shadow: 0 0 0 3px rgba(26, 28, 42, .12); }
.tf-gpa .tf-gpa__field[aria-invalid="true"] { border-color: var(--tg-red); box-shadow: 0 0 0 3px rgba(196, 9, 10, .1); }

/* Grading system and its table */
.tf-gpa__setup { margin: 0 0 22px; }
.tf-gpa__custom { margin-top: 16px; padding: 18px; border-radius: 10px; background: var(--tg-grey-2); }
.tf-gpa .tf-gpa__hint { margin: 0 0 14px; color: var(--tg-navy); font-weight: 800; }
.tf-gpa .tf-gpa__hint .tf-gpa__pt { display: block; margin-top: 2px; }
.tf-gpa__custom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.tf-gpa__custom .tf-gpa__msg { margin-top: 14px; }
.tf-gpa__bands { margin-top: 16px; padding: 18px; border-radius: 10px; background: var(--tg-grey-2); }
.tf-gpa__bands:empty { display: none; }
.tf-gpa .tf-gpa__bands-title { margin: 0 0 12px; color: var(--tg-navy); font-size: 17px; font-weight: 900; }
.tf-gpa .tf-gpa__bands-title .tf-gpa__pt { display: block; font-weight: 800; }
.tf-gpa .tf-gpa__bands-title .tf-gpa__sep { display: none; }
.tf-gpa ul.tf-gpa__bandlist { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tf-gpa .tf-gpa__band { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 8px; background: #fff; border-left: 3px solid var(--tg-red); }
.tf-gpa .tf-gpa__band::before { content: none; }
.tf-gpa .tf-gpa__band-range { color: var(--tg-text); font-size: 16px; font-weight: 800; white-space: nowrap; }
.tf-gpa .tf-gpa__band-us { color: var(--tg-navy); font-size: 17px; font-weight: 800; }
.tf-gpa .tf-gpa__band-us strong { color: var(--tg-navy); font-size: 20px; font-weight: 900; }
.tf-gpa .tf-gpa__src { margin-top: 12px; color: var(--tg-text); font-size: 16px; font-weight: 700; }
.tf-gpa .tf-gpa__src a { color: var(--tg-navy); font-weight: 900; text-decoration: none; border-bottom: 2px solid var(--tg-red); }
.tf-gpa .tf-gpa__src a:hover { color: var(--tg-red); }

/* Subject rows: one card each */
.tf-gpa ol.tf-gpa__rows { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: none; }
.tf-gpa .tf-gpa__row {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; align-items: end;
	margin: 0; padding: 18px; border: 1px solid var(--tg-line); border-left: 3px solid var(--tg-navy); border-radius: 10px; background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.tf-gpa .tf-gpa__row::before { content: none; }
.tf-gpa .tf-gpa__row:focus-within { box-shadow: 0 8px 22px rgba(26, 28, 42, .08); }
.tf-gpa .tf-gpa__row.is-bad { border-left-color: var(--tg-red); }
.tf-gpa .tf-gpa__item { min-width: 0; }
.tf-gpa .tf-gpa__item--subject, .tf-gpa .tf-gpa__item--year { grid-column: span 2; }
.tf-gpa .tf-gpa__badge {
	display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; border-radius: 8px;
	background: var(--tg-grey-2); color: #8a8d97; font-size: 18px; font-weight: 900; white-space: nowrap;
}
.tf-gpa .tf-gpa__badge.is-on { color: var(--tg-navy); background: var(--tg-grey); }
.tf-gpa .tf-gpa__err { grid-column: 1 / -1; margin: -2px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--tg-grey-2); border-left: 3px solid var(--tg-red); color: var(--tg-navy); font-size: 16px; font-weight: 800; }
.tf-gpa .tf-gpa__err-line { display: block; }
.tf-gpa .tf-gpa__err-line + .tf-gpa__err-line { margin-top: 6px; }
.tf-gpa .tf-gpa__err .tf-gpa__pt { display: block; }
.tf-gpa .tf-gpa__err .tf-gpa__sep { display: none; }
.tf-gpa .tf-gpa__empty { margin: 0 0 16px; padding: 16px 18px; border-radius: 10px; background: var(--tg-grey-2); color: var(--tg-navy); font-weight: 800; }

/* Buttons */
.tf-gpa .tf-gpa__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tf-gpa .tf-gpa__confirm .tf-gpa__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
.tf-gpa .tf-gpa__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin: 0; padding: 10px 18px;
	border: 2px solid var(--tg-grey); border-radius: 8px; background: var(--tg-grey); color: var(--tg-navy);
	font-family: inherit; font-size: 16px; font-weight: 900; line-height: 1.25; text-align: center; cursor: pointer;
	transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tf-gpa .tf-gpa__btn-pt { display: block; font-weight: 800; opacity: .85; }
.tf-gpa .tf-gpa__btn-pt .tf-gpa__sep { display: none; }
.tf-gpa .tf-gpa__btn { flex-direction: column; gap: 0; }
.tf-gpa .tf-gpa__btn--del { flex-direction: row; gap: 6px; }
.tf-gpa .tf-gpa__btn--del .tf-gpa__btn-pt { display: inline; }
.tf-gpa .tf-gpa__src .tf-gpa__pt { display: block; }
.tf-gpa .tf-gpa__src .tf-gpa__sep { display: none; }
.tf-gpa .tf-gpa__btn:hover, .tf-gpa .tf-gpa__btn:focus-visible { background: var(--tg-navy); border-color: var(--tg-navy); color: #fff; transform: translateY(-2px); }
.tf-gpa .tf-gpa__btn:focus-visible { outline: 3px solid var(--tg-red); outline-offset: 2px; }
.tf-gpa .tf-gpa__btn--main { background: var(--tg-navy); border-color: var(--tg-navy); color: #fff; }
.tf-gpa .tf-gpa__btn--main:hover, .tf-gpa .tf-gpa__btn--main:focus-visible { background: var(--tg-red); border-color: var(--tg-red); }
.tf-gpa .tf-gpa__btn--del { width: 100%; background: #fff; border-color: var(--tg-grey); }
.tf-gpa .tf-gpa__btn--del:hover, .tf-gpa .tf-gpa__btn--del:focus-visible { background: #fff; border-color: var(--tg-red); color: var(--tg-navy); }
.tf-gpa .tf-gpa__confirm { margin-top: 14px; padding: 16px 18px; border-radius: 10px; background: var(--tg-grey-2); border-left: 3px solid var(--tg-red); }
.tf-gpa .tf-gpa__confirm-text { margin: 0 0 12px; color: var(--tg-navy); font-weight: 900; }
.tf-gpa .tf-gpa__confirm-text .tf-gpa__pt { display: block; font-weight: 800; }
.tf-gpa .tf-gpa__msg { margin-top: 14px; padding: 12px 16px; border-radius: 8px; background: var(--tg-grey-2); border-left: 3px solid var(--tg-navy); color: var(--tg-navy); font-size: 16px; font-weight: 800; }
.tf-gpa .tf-gpa__msg .tf-gpa__pt { display: block; }
.tf-gpa .tf-gpa__msg .tf-gpa__sep { display: none; }

/* Result */
.tf-gpa .tf-gpa__result { margin-top: 22px; padding: 22px; border-radius: 10px; background: var(--tg-grey-2); }
.tf-gpa .tf-gpa__wait { color: var(--tg-navy); font-weight: 800; }
.tf-gpa .tf-gpa__wait + .tf-gpa__wait { margin-top: 10px; }
.tf-gpa .tf-gpa__wait .tf-gpa__pt, .tf-gpa .tf-gpa__count .tf-gpa__pt, .tf-gpa .tf-gpa__top-label .tf-gpa__pt { display: block; }
.tf-gpa .tf-gpa__wait .tf-gpa__sep, .tf-gpa .tf-gpa__count .tf-gpa__sep, .tf-gpa .tf-gpa__top-label .tf-gpa__sep { display: none; }
.tf-gpa .tf-gpa__top-label { color: var(--tg-navy); font-size: 18px; font-weight: 900; }
.tf-gpa .tf-gpa__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 10px; }
.tf-gpa .tf-gpa__big-num { color: var(--tg-red); font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.tf-gpa .tf-gpa__big-of { color: var(--tg-navy); font-size: 18px; font-weight: 900; }
.tf-gpa .tf-gpa__meaning { color: var(--tg-navy); font-weight: 800; }
.tf-gpa .tf-gpa__count { margin-top: 10px; color: var(--tg-text); font-size: 16px; font-weight: 800; }
.tf-gpa .tf-gpa__years-title { margin: 20px 0 10px; padding-top: 18px; border-top: 2px solid var(--tg-grey); color: var(--tg-navy); font-size: 17px; font-weight: 900; }
.tf-gpa .tf-gpa__years-title .tf-gpa__pt { display: block; font-weight: 800; }
.tf-gpa .tf-gpa__years-title .tf-gpa__sep { display: none; }
.tf-gpa ul.tf-gpa__years { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tf-gpa .tf-gpa__year { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 16px; border-radius: 8px; background: #fff; }
.tf-gpa .tf-gpa__year::before { content: none; }
.tf-gpa .tf-gpa__year-name { color: var(--tg-navy); font-weight: 900; }
.tf-gpa .tf-gpa__year-val { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.tf-gpa .tf-gpa__year-val strong { color: var(--tg-navy); font-size: 22px; font-weight: 900; }
.tf-gpa .tf-gpa__year-n { color: var(--tg-pt); font-size: 16px; font-weight: 800; }
.tf-gpa .tf-gpa__simple { margin-top: 18px; padding: 16px 18px; border-radius: 8px; background: #fff; border-left: 3px solid var(--tg-navy); }
.tf-gpa .tf-gpa__simple-title { margin: 0 0 6px; color: var(--tg-navy); font-size: 18px; font-weight: 900; }
.tf-gpa .tf-gpa__simple-title .tf-gpa__pt { display: block; font-weight: 900; }
.tf-gpa .tf-gpa__simple-title .tf-gpa__sep, .tf-gpa .tf-gpa__check .tf-gpa__sep { display: none; }
.tf-gpa .tf-gpa__simple-text { color: var(--tg-text); font-size: 16px; font-weight: 700; }

/* Checkbox */
.tf-gpa .tf-gpa__check { display: flex; align-items: flex-start; gap: 12px; margin: 16px 0 0; color: var(--tg-navy); font-size: 16px; font-weight: 900; cursor: pointer; }
.tf-gpa .tf-gpa__check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--tg-navy); cursor: pointer; }
.tf-gpa .tf-gpa__check .tf-gpa__pt { display: block; font-weight: 800; }

/* Honest note */
.tf-gpa .tf-gpa__note { margin-top: 22px; padding: 18px 20px; border-radius: 10px; background: #fff; border: 2px solid var(--tg-grey); }
.tf-gpa .tf-gpa__note-title { margin: 0 0 6px; color: var(--tg-red); font-size: 18px; font-weight: 900; }
.tf-gpa .tf-gpa__note p:not(.tf-gpa__note-title) { color: var(--tg-text); font-size: 16px; font-weight: 700; }

/* Phones and tablets: every field full width, one under the other; buttons full width */
@media (max-width: 1023px) {
	.tf-gpa { padding: 18px 16px; }
	.tf-gpa__custom-grid { grid-template-columns: minmax(0, 1fr); }
	.tf-gpa .tf-gpa__row { grid-template-columns: minmax(0, 1fr); padding: 16px; }
	.tf-gpa .tf-gpa__item--subject, .tf-gpa .tf-gpa__item--year { grid-column: auto; }
	.tf-gpa .tf-gpa__actions, .tf-gpa .tf-gpa__confirm .tf-gpa__actions { grid-template-columns: minmax(0, 1fr); max-width: none; }
	.tf-gpa .tf-gpa__btn { width: 100%; }
	.tf-gpa ul.tf-gpa__bandlist { flex-direction: column; }
	.tf-gpa .tf-gpa__year { flex-direction: column; align-items: flex-start; gap: 4px; }
	.tf-gpa .tf-gpa__result { padding: 18px 16px; }
	.tf-gpa .tf-gpa__big-num { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) { .tf-gpa .tf-gpa__btn:hover { transform: none; } }