/* GreenWareTech Academy portal — mobile first, brand green used sparingly. */

.gwta {
  --gw-green: #29B24A;
  --gw-mid: #6FC983;
  --gw-pale: #B4E3BF;
  --gw-yt: #FF0000;
  --gw-ink: #0E1012;
  --gw-text: #1D2124;
  --gw-text2: #5A6166;
  --gw-text3: #8A9196;
  --gw-line: #E3E6E8;
  --gw-wash: #F4F6F7;

  max-width: 780px;
  margin: 0 auto;
  padding: 0 4px 48px;
  color: var(--gw-text);
  font-size: 15px;
  line-height: 1.6;
  box-sizing: border-box;
}

.gwta *, .gwta *::before, .gwta *::after { box-sizing: inherit; }

.gwta-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--gw-ink); border-radius: 10px;
}
.gwta-brand { color: #fff; font-weight: 600; font-size: 13px; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.gwta-g { color: var(--gw-green); }
.gwta-mark { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--gw-green); border-right-color: transparent; display: inline-block; }
.gwta-who { color: #B9BCBE; font-size: 12px; }

.gwta-hero { background: var(--gw-ink); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.gwta-kicker { font-size: 11px; color: var(--gw-green); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.gwta-hero-title { font-size: 18px; font-weight: 600; color: #fff; line-height: 1.35; margin-bottom: 4px; }
.gwta-hero-sub { font-size: 13px; color: #8E9295; margin-bottom: 15px; }

.gwta-btn {
  display: inline-block; background: var(--gw-green); color: #fff;
  border: none; border-radius: 8px; padding: 10px 20px;
  font-size: 14px; font-family: inherit; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.gwta-btn:hover, .gwta-btn:focus { background: #23a043; color: #fff; }
.gwta-btn[disabled] { opacity: .55; cursor: default; }
.gwta-ghost { background: #fff; color: var(--gw-text); border: 1px solid var(--gw-line); }
.gwta-ghost:hover { background: var(--gw-wash); color: var(--gw-text); }

.gwta-stats { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.gwta-stat { flex: 1 1 140px; background: var(--gw-wash); border-radius: 9px; padding: 12px 14px; }
.gwta-stat-l { font-size: 12px; color: var(--gw-text2); margin-bottom: 4px; }
.gwta-stat-v { font-size: 20px; font-weight: 600; }

.gwta-bar { height: 12px; border-radius: 6px; background: #E8EBED; overflow: hidden; display: flex; }
.gwta-bar i { display: block; height: 100%; }
.gwta-seg-full { background: var(--gw-green); }
.gwta-seg-mid { background: var(--gw-mid); }
.gwta-seg-pale { background: var(--gw-pale); }
.gwta-seg-yt { background: var(--gw-yt); }

.gwta-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 20px; font-size: 12px; color: var(--gw-text2); }
.gwta-legend span { display: flex; align-items: center; gap: 6px; }
.gwta-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.gwta-alert { background: #FDF3E3; color: #8A5A00; border-radius: 8px; padding: 11px 14px; font-size: 13px; margin-bottom: 20px; }

.gwta-h3 { font-size: 15px; font-weight: 600; margin: 24px 0 10px; }

.gwta-outline { border: 1px solid var(--gw-line); border-radius: 12px; overflow: hidden; }
.gwta-grp { padding: 9px 15px; background: var(--gw-wash); font-size: 12px; color: var(--gw-text2); font-weight: 500; }
.gwta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 15px; border-top: 1px solid var(--gw-line);
  text-decoration: none; color: var(--gw-text);
}
.gwta-row:hover { background: #FAFBFB; color: var(--gw-text); }
.gwta-row-t { flex: 1; }
.gwta-row-s { font-size: 12px; color: var(--gw-text3); white-space: nowrap; }
.gwta-ok .gwta-row-s { color: #186C34; }
.gwta-warn .gwta-row-s { color: #8A5A00; }
.gwta-mid .gwta-row-s { color: var(--gw-text2); }
.gwta-lock { color: var(--gw-text3); cursor: default; }
.gwta-lock .gwta-row-t { color: var(--gw-text3); }

.gwta-back { display: inline-block; font-size: 13px; color: var(--gw-text2); text-decoration: none; margin-bottom: 12px; }
.gwta-title { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0 0 14px; }

.gwta-player { position: relative; padding-bottom: 56.25%; height: 0; background: #17191B; border-radius: 10px; overflow: hidden; }
.gwta-player iframe, .gwta-player > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.gwta-watchstate { font-size: 13px; color: var(--gw-text2); margin: 10px 0 18px; }
.gwta-watchstate.is-done { color: #186C34; font-weight: 500; }

.gwta-content { margin-bottom: 20px; }
.gwta-task { border-top: 1px solid var(--gw-line); padding-top: 6px; }
.gwta-brief { font-size: 14px; color: var(--gw-text2); margin-bottom: 14px; }

.gwta-sub-state { border-radius: 8px; padding: 11px 14px; font-size: 13px; margin-bottom: 14px; }
.gwta-submitted { background: var(--gw-wash); color: var(--gw-text2); }
.gwta-approved { background: #E8F6EC; color: #186C34; }
.gwta-changes_requested { background: #FDF3E3; color: #8A5A00; }

.gwta-form { display: block; }
.gwta-drop {
  display: block; border: 1px dashed #C8CDD1; border-radius: 8px;
  padding: 18px; text-align: center; color: var(--gw-text2);
  font-size: 13px; cursor: pointer; margin-bottom: 10px;
}
.gwta-drop input { display: none; }
.gwta-filelist { font-size: 12px; color: var(--gw-text2); margin-bottom: 10px; }
.gwta-filelist div { padding: 4px 0; }

.gwta-link, .gwta-text, .gwta-feedback {
  width: 100%; border: 1px solid var(--gw-line); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  margin-bottom: 10px; background: #fff; color: var(--gw-text);
}
.gwta-locked-note { font-size: 13px; color: var(--gw-text3); font-style: italic; }

.gwta-msg { font-size: 13px; margin-top: 8px; min-height: 18px; }
.gwta-msg.is-error { color: #B32D2E; }
.gwta-msg.is-ok { color: #186C34; }

.gwta-empty { text-align: center; padding: 40px 20px; color: var(--gw-text2); }
.gwta-qhead { font-size: 13px; color: var(--gw-text2); margin-bottom: 12px; }

.gwta-card { border: 1px solid var(--gw-line); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.gwta-card.is-done { opacity: .5; }
.gwta-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gwta-name { font-weight: 600; }
.gwta-meta { font-size: 12px; color: var(--gw-text2); }
.gwta-age { font-size: 12px; color: var(--gw-text3); white-space: nowrap; }
.gwta-age.is-late { color: #B32D2E; }

.gwta-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.gwta-chip { background: var(--gw-wash); border-radius: 6px; padding: 5px 10px; font-size: 12px; color: var(--gw-text2); text-decoration: none; }
.gwta-chip:hover { background: #ECEEEF; color: var(--gw-text); }

.gwta-quote { background: var(--gw-wash); border-radius: 8px; padding: 11px 13px; font-size: 13px; color: var(--gw-text2); margin-bottom: 11px; }
.gwta-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .gwta-title { font-size: 19px; }
  .gwta-hero { padding: 16px; }
  .gwta-btn { width: 100%; text-align: center; }
  .gwta-actions .gwta-btn { width: auto; flex: 1; }
}

/* Notifications */
.gwta-notes { margin-bottom: 16px; }
.gwta-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: #E8F6EC; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px;
}
.gwta-note-body { flex: 1; min-width: 0; }
.gwta-note-subject { font-weight: 600; font-size: 14px; color: #186C34; }
.gwta-note-text { font-size: 13px; color: #2C6B41; margin-top: 3px; }
.gwta-note-x {
  background: none; border: none; font-size: 20px; line-height: 1;
  color: #4E8A62; cursor: pointer; padding: 0 2px;
}

/* Fee summary — informative, not an alarm, and below the course */
.gwta-balance {
  margin-top: 20px; padding: 12px 14px;
  background: var(--gw-wash); border-radius: 8px;
  font-size: 13px; color: var(--gw-text2);
}
.gwta-balance strong { color: var(--gw-text); }

.gwta-card { transition: opacity .3s ease; }

/* Payments */
.gwta-balance-link { margin-left: 8px; color: var(--gw-green); text-decoration: none; font-weight: 500; }
.gwta-balance-link:hover { text-decoration: underline; }
.gwta-sub-meta { display: block; font-size: 12px; color: var(--gw-text3); margin-top: 2px; }
.gwta-row-note {
  padding: 8px 15px 12px; font-size: 12px; color: #8A5A00;
  background: #FDF3E3; border-top: 1px solid var(--gw-line);
}
.gwta-payform { margin-bottom: 8px; }
.gwta-pay-amount, .gwta-pay-ref {
  width: 100%; border: 1px solid var(--gw-line); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; font-family: inherit;
  margin-bottom: 10px; background: #fff; color: var(--gw-text);
}
.gwta-pay-filelist { font-size: 12px; color: var(--gw-text2); margin-bottom: 10px; }
.gwta-none .gwta-row-s { color: var(--gw-text3); }

/* Join and register */
.gwta-join { max-width: 460px; }
.gwta-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: var(--gw-text); }
.gwta-join .gwta-link { margin-bottom: 14px; }
.gwta-join select.gwta-link { height: 42px; }
.gwta-btn.wide { width: 100%; text-align: center; }
.gwta-joinerror {
  background: #FDECEA; color: #B32D2E; border-radius: 8px;
  padding: 11px 14px; font-size: 13px; margin-bottom: 14px;
}
.gwta-fineprint { font-size: 12px; color: var(--gw-text3); line-height: 1.6; margin: 4px 0 16px; }

.gwta-note-ok {
  background: #E8F6EC; color: #186C34; border-radius: 8px;
  padding: 11px 14px; font-size: 13px; margin-bottom: 14px; line-height: 1.5;
}

/* Certificate verification */
.gwta-verify-ok, .gwta-verify-bad { border-radius: 10px; padding: 16px 18px; margin-top: 18px; }
.gwta-verify-ok { background: #E8F6EC; }
.gwta-verify-bad { background: #FDECEA; color: #8A2F2C; }
.gwta-verify-head { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.gwta-verify-ok .gwta-verify-head { color: #186C34; }
.gwta-verify-table { width: 100%; font-size: 13px; border-collapse: collapse; }
.gwta-verify-table th {
  text-align: left; font-weight: 500; color: #2C6B41;
  padding: 5px 12px 5px 0; white-space: nowrap; vertical-align: top; width: 110px;
}
.gwta-verify-table td { padding: 5px 0; color: #14532A; }

/* Live class */
.gwta-live {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--gw-ink); color: #fff;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
}
.gwta-live.is-live { box-shadow: 0 0 0 2px rgba(41,178,74,.5); }
.gwta-live-main { flex: 1; min-width: 200px; }
.gwta-live-tag {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--gw-green); margin-bottom: 6px;
}
.gwta-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gw-green);
  animation: gwta-blip 1.8s ease-in-out infinite;
}
@keyframes gwta-blip { 50% { opacity: .35; } }
.gwta-live-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.gwta-live-when { font-size: 12px; color: #92989B; }
.gwta-live-note { font-size: 12px; color: #92989B; margin-top: 6px; }
.gwta-live-soon { font-size: 12px; color: #92989B; }

/* Panels and collapsible forms */
.gwta-panel { border: 1px solid var(--gw-line); border-radius: 12px; padding: 16px; margin-bottom: 18px; }
.gwta-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.gwta-collapse { display: none; padding: 14px 0 4px; border-top: 1px solid var(--gw-line); margin-top: 10px; }
.gwta-collapse.is-open { display: block; }
.gwta-btn.gwta-small { padding: 7px 14px; font-size: 13px; }
.gwta-btn.gwta-ghost { background: #fff; color: var(--gw-text); border: 1px solid var(--gw-line); }
.gwta-btn.gwta-ghost:hover { background: var(--gw-wash); color: var(--gw-text); }

/* Messages */
.gwta-headlink { color: var(--gw-green); text-decoration: none; font-size: 12px; margin-right: 12px; }
.gwta-headlink:hover { color: #fff; }
.gwta-badge { background: var(--gw-green); color: #06210E; border-radius: 9px; padding: 1px 7px; font-size: 11px; font-weight: 600; }
.gwta-unread .gwta-row-t { font-weight: 600; }
.gwta-thread { margin-bottom: 18px; }
.gwta-msg { margin-bottom: 14px; max-width: 86%; }
.gwta-msg.is-mine { margin-left: auto; }
.gwta-msg-meta { font-size: 11px; color: var(--gw-text3); margin-bottom: 4px; }
.gwta-msg.is-mine .gwta-msg-meta { text-align: right; }
.gwta-msg-body {
  background: var(--gw-wash); border-radius: 12px; padding: 11px 14px;
  font-size: 14px; line-height: 1.6;
}
.gwta-msg-body p { margin: 0 0 8px; }
.gwta-msg-body p:last-child { margin: 0; }
.gwta-msg.is-mine .gwta-msg-body { background: #E8F6EC; color: #14532A; }
.gwta-link.gwta-tall { height: auto; min-height: 150px; }
select.gwta-link { width: 100%; border: 1px solid var(--gw-line); border-radius: 8px; padding: 10px 12px; font-size: 14px; font-family: inherit; margin-bottom: 10px; background: #fff; }

.gwta-who { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.gwta-signout { color: #8E9295; }
.gwta-signout:hover { color: #fff; }

/* ------------------------------------------------------------------ register

   Marking a register happens on a phone, standing up, right after a class.
   The rows are tall and the options are large enough to hit without aiming. */

.gwta-reg-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--gw-line, #E4E7E9);
	flex-wrap: wrap;
}

.gwta-reg-row:last-child { border-bottom: 0; }

.gwta-reg-name { font-weight: 600; flex: 1 1 auto; min-width: 140px; }

.gwta-reg-opts { display: flex; gap: 6px; flex-wrap: wrap; }

.gwta-reg-opt {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 11px;
	border: 1px solid var(--gw-line, #E4E7E9);
	border-radius: 999px;
	font-size: 13px;
	cursor: pointer;
	user-select: none;
	background: #fff;
}

.gwta-reg-opt input { margin: 0; }

/* The chosen option carries the colour, so a filled register can be read
   down the page at a glance rather than inspected radio by radio. */
.gwta-reg-opt:has(input:checked) {
	border-color: #29B24A;
	background: #EDF7F0;
	font-weight: 600;
}

.gwta-reg-opt:has(input[data-status="absent"]:checked) {
	border-color: #b32d2e;
	background: #FCEBEA;
}

.gwta-reg-opt:has(input[data-status="late"]:checked) {
	border-color: #dba617;
	background: #FCF9E8;
}

.gwta-reg-opt input:focus-visible { outline: 2px solid #29B24A; outline-offset: 2px; }

@media (max-width: 540px) {
	.gwta-reg-row { align-items: flex-start; }
	.gwta-reg-opts { width: 100%; }
}

/* Excused is neither credit nor blame, so it should not look like either. */
.gwta-reg-opt:has(input[data-status="excused"]:checked) {
	border-color: #8E9295;
	background: #F2F4F5;
}