/* SJT practice on the GROW member portal (public/portal-sjt.js).

   The practice's layout is the one it was ported with: the groups as an
   accordion, a group under way filling the window with the scenario, the
   options and the member's ranking side by side, and the review's score
   cards and sections. Its paint is GROW's: the owner's mockup's white cards
   with their 1px lines and 18px corners, pill buttons, the light blue card
   with the GROW character, GROW blue for what can be pressed and Jost
   throughout. Colours come only from the palette in portal.css, as
   var(--p-...): see the note there. */

/* ---------- the groups ---------- */
.sjt-lede { max-width: 780px; }
.sjt-groups-card .portal-card-head { flex-wrap: wrap; }
.sjt-groups-count { color: var(--p-muted); font-size: 13.5px; white-space: nowrap; }
.sjt-group-list { list-style: none; margin: 0; padding: 0; }
.sjt-group + .sjt-group { border-top: 1px solid var(--p-sep); }
.sjt-group-toggle {
  width: 100%; min-height: 78px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 14px; align-items: center;
  gap: 14px; margin: 0; padding: 14px 4px; border: 0; background: none; color: var(--p-ink); font: inherit;
  text-align: left; cursor: pointer;
}
.sjt-group-toggle:hover .sjt-group-name { color: var(--p-blue); }
.sjt-group-number { color: var(--p-blue); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.sjt-group-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sjt-group-name { font-size: 17px; line-height: 1.3; color: var(--p-ink); -webkit-text-stroke: 0.25px currentColor; }
.sjt-group-sub { font-size: 14px; line-height: 1.4; color: var(--p-muted); }
.sjt-group-count { font-size: 13.5px; color: var(--p-muted); white-space: nowrap; }
.sjt-chevron {
  width: 9px; height: 9px; margin-top: -4px; justify-self: center;
  border-right: 2px solid var(--p-blue); border-bottom: 2px solid var(--p-blue);
  transform: rotate(45deg); transition: transform 0.18s ease;
}
.sjt-group.is-open .sjt-chevron, .sjt-review.is-open .sjt-chevron { margin-top: 4px; transform: rotate(225deg); }
/* The open group's body lines up with its name. */
.sjt-group-body { display: grid; gap: 16px; padding: 0 4px 20px 62px; }
.sjt-label { font-size: 11.5px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-blue); }
.sjt-group-setting { display: flex; flex-direction: column; gap: 4px; }
.sjt-group-setting p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--p-ink); }
.sjt-group-cast { display: flex; flex-direction: column; gap: 6px; }
.sjt-group-cast ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sjt-group-cast li { display: flex; flex-direction: column; padding-left: 10px; border-left: 2px solid var(--p-sep); font-size: 14px; }
.sjt-group-cast li span { color: var(--p-muted); }
.sjt-group-cast strong { font-weight: 400; color: var(--p-ink); }
.sjt-group-start {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px;
  padding: 14px 18px; border-radius: 14px; background: var(--p-bg);
}
.sjt-group-start > div { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.sjt-group-start strong { font-weight: 400; font-size: 15px; color: var(--p-ink); -webkit-text-stroke: 0.25px currentColor; }
.sjt-group-start span { font-size: 14px; line-height: 1.45; color: var(--p-muted); }
.sjt-group-start .portal-pill { min-height: 44px; padding: 0 22px; font-size: 14.5px; }

/* Your recent scores, as the account keeps them: the group and the day,
   the score beside them in GROW blue, and the way to clear them. */
.sjt-history .portal-card-head { flex-wrap: wrap; }
.sjt-history .portal-card-title[tabindex="-1"]:focus { outline: none; }
.sjt-history-row { gap: 12px; }
.sjt-history-row .portal-row-main { gap: 2px; }
.sjt-history-row .portal-row-title { overflow-wrap: anywhere; }
.sjt-history-score { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.sjt-history-score strong { font-weight: 400; font-size: 17px; line-height: 1.2; color: var(--p-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sjt-history-score span { font-size: 13px; line-height: 16px; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.sjt-history-foot { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--p-sep); }
.sjt-history-clear { margin-right: -10px; padding: 0 10px; font-size: 13.5px; }
.sjt-history-clear:hover { color: var(--p-danger); }
.sjt-history-empty { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--p-muted); }

/* How it works: the mockup's light blue card, with the GROW character. */
.sjt-how { padding-bottom: 92px; }
.sjt-how .portal-card-title { padding-bottom: 12px; }
.sjt-how-steps { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--p-ink); }
.sjt-how-note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--p-sky-line);
  font-size: 14px; line-height: 1.5; color: var(--p-sky-ink);
}
.sjt-how-note + .sjt-how-note { margin-top: 8px; padding-top: 0; border-top: 0; }

/* Loading the bank, and a bank that would not come. */
.sjt-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 27px; max-width: 720px; }
.sjt-status strong { font-weight: 400; font-size: 19px; color: var(--p-ink); }
.sjt-status span { font-size: 15px; line-height: 1.5; color: var(--p-muted); }
.sjt-status .portal-pill { min-height: 44px; margin-top: 10px; padding: 0 22px; }
.sjt-status-error { border-color: var(--p-danger-pale); }
.sjt-status-error strong { color: var(--p-danger); }

/* ---------- a group under way: the practice fills the window ---------- */
/* Above the portal's top bar (z-index 10) and its account menu (30), below
   the toast (60). It scrolls by itself, so the page behind is held still;
   its header, with the progress bar, stays at its top. */
body.portal-sjt-open { overflow: hidden; }
.sjt-experience {
  position: fixed; inset: 0; z-index: 50; overflow: auto; overscroll-behavior: contain;
  background: var(--p-bg); color: var(--p-ink);
}
.sjt-head { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid var(--p-line); }
.sjt-bar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px;
  min-height: 76px; box-sizing: border-box;
  padding: 12px max(40px, calc((100% - 1160px) / 2));
}
.sjt-brand { padding-right: 24px; border-right: 1px solid var(--p-sep); }
.sjt-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sjt-identity span, .sjt-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sjt-identity span { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-blue); }
.sjt-identity strong { font-weight: 400; font-size: 17px; color: var(--p-ink); }
.sjt-actions { display: flex; align-items: center; gap: 8px; }
.sjt-email-toggle, .sjt-bar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px;
  border: 1px solid var(--p-line); border-radius: 999px; background: #fff; color: var(--p-ink);
  font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer;
}
.sjt-email-toggle { border-color: var(--p-blue); color: var(--p-blue); }
.sjt-email-toggle:hover { background: var(--p-hover); }
.sjt-email-toggle[aria-expanded="true"] { background: var(--p-blue-pale); }
.sjt-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sjt-bar-btn:hover { border-color: var(--p-blue); color: var(--p-blue); }
.sjt-bar-btn.sjt-exit:hover { border-color: var(--p-danger); background: var(--p-danger-pale); color: var(--p-danger); }
.sjt-progress { height: 5px; background: var(--p-sep); }
.sjt-progress > span { display: block; width: 0; height: 100%; border-radius: 0 3px 3px 0; background: var(--p-blue); transition: width 0.2s ease; }
.sjt-progress[data-done="1"] > span { width: 20%; }
.sjt-progress[data-done="2"] > span { width: 40%; }
.sjt-progress[data-done="3"] > span { width: 60%; }
.sjt-progress[data-done="4"] > span { width: 80%; }
.sjt-progress[data-done="5"] > span { width: 100%; }

.sjt-stage { width: min(1080px, 100%); box-sizing: border-box; margin: 0 auto; padding: 28px 20px 56px; }
.sjt-card {
  overflow: hidden; background: #fff; border: 1px solid var(--p-line); border-radius: 18px;
  box-shadow: 0 12px 40px var(--p-shadow);
}
.sjt-card-head { display: flex; flex-direction: column; gap: 4px; padding: 22px 26px 16px; border-bottom: 1px solid var(--p-sep); }
.sjt-card-head h2, .sjt-hero h2 { margin: 0; font-weight: 400; font-size: 26px; line-height: 1.3; color: var(--p-ink); }
.sjt-experience h2[tabindex="-1"]:focus { outline: none; }

/* The group's initial email, opened from the header. */
.sjt-email { display: grid; gap: 14px; padding: 18px 26px; background: var(--p-wash); border-bottom: 1px solid var(--p-sep); }
.sjt-email-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sjt-email-meta span {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 12px;
  background: #fff; border: 1px solid var(--p-line); border-radius: 10px;
  font-size: 14px; line-height: 1.35; color: var(--p-ink); overflow-wrap: anywhere;
}
.sjt-email-meta strong { font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted); }
.sjt-email .sjt-context { padding: 0; }

.sjt-context { display: grid; gap: 12px; max-width: 880px; padding: 20px 26px; }
.sjt-context p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--p-ink); }
.sjt-context ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.sjt-context li { font-size: 15px; line-height: 1.6; color: var(--p-ink); }
.sjt-context strong { font-weight: 700; }

.sjt-rank-prompt {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  padding: 12px 26px; background: var(--p-bg); border-top: 1px solid var(--p-sep); border-bottom: 1px solid var(--p-sep);
}
.sjt-rank-prompt strong { font-weight: 400; font-size: 15px; -webkit-text-stroke: 0.25px currentColor; }
.sjt-rank-prompt span { font-size: 14px; color: var(--p-muted); }

/* The options still to place, and the member's ranking beside them. */
.sjt-answer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sjt-available, .sjt-ranking { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 20px 22px 24px; }
.sjt-available { border-right: 1px solid var(--p-sep); }
.sjt-available h3, .sjt-ranking-head h3 {
  margin: 0; font-weight: 400; font-size: 12.5px; line-height: 32px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-muted);
}
.sjt-options { display: grid; gap: 8px; }
.sjt-option {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin: 0; padding: 10px 12px; border: 1px solid var(--p-line); border-radius: 12px; background: #fff; color: var(--p-ink);
  font: inherit; text-align: left; cursor: pointer; transition: border-color 0.16s ease, background 0.16s ease;
}
.sjt-option:hover { border-color: var(--p-blue); background: var(--p-hover); }
.sjt-option-text { font-size: 14.5px; line-height: 1.5; }
.sjt-option small { font-size: 13px; color: var(--p-blue); white-space: nowrap; }
/* The darker blue on the pale blue: GROW blue there is 4.4:1, under the
   4.5:1 a 14px letter needs. */
.sjt-letter {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px;
  border-radius: 8px; background: var(--p-blue-pale); color: var(--p-blue-dark); font-size: 14px; font-weight: 700;
}
.sjt-ranking-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
/* A text link to look at, a full 44px to press: the negative margins keep
   the heading row at 32px, so the ranking does not move down when Reset
   appears, and the word where it was. */
.sjt-reset {
  min-width: 44px; min-height: 44px; margin: -6px -4px -6px 0; padding: 0 10px; border: 0; border-radius: 10px;
  background: none; color: var(--p-danger); font: inherit; font-size: 14px; cursor: pointer;
}
.sjt-reset:hover { text-decoration: underline; }
.sjt-ranked-empty, .sjt-all-ranked {
  margin: 0; padding: 18px; border: 1px dashed var(--p-box); border-radius: 12px; background: var(--p-bg);
  color: var(--p-muted); font-size: 14.5px; line-height: 1.5;
}
.sjt-ranked-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sjt-ranked {
  display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--p-line); border-radius: 12px; background: #fff;
}
.sjt-rank-number {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--p-blue); color: #fff; font-size: 14px; font-weight: 700;
}
.sjt-ranked-text { font-size: 14px; line-height: 1.45; color: var(--p-ink); }
.sjt-rank-actions { display: flex; gap: 4px; }
.sjt-rank-actions button {
  min-width: 44px; min-height: 44px; margin: 0; padding: 4px 8px; border: 1px solid var(--p-line); border-radius: 10px;
  background: #fff; color: var(--p-ink); font: inherit; font-size: 13px; cursor: pointer;
}
.sjt-rank-actions button:not(:disabled):hover { border-color: var(--p-blue); background: var(--p-hover); color: var(--p-blue); }
.sjt-rank-actions .sjt-remove { color: var(--p-danger); }
.sjt-rank-actions .sjt-remove:not(:disabled):hover { border-color: var(--p-danger); background: var(--p-danger-pale); color: var(--p-danger); }
.sjt-rank-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.sjt-submit {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 14px 22px; background: var(--p-bg); border-top: 1px solid var(--p-sep);
}
.sjt-submit span { font-size: 14px; color: var(--p-muted); }
.sjt-submit .portal-pill, .sjt-review-actions .portal-pill { min-height: 44px; padding: 0 22px; font-size: 14.5px; }

/* ---------- the review ---------- */
.sjt-review-stage { width: min(1040px, 100%); }
.sjt-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px;
  padding-bottom: 22px; border-bottom: 1px solid var(--p-line);
}
.sjt-hero-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sjt-hero h2 { font-size: 30px; }
.sjt-hero p { margin: 0; max-width: 640px; font-size: 15.5px; line-height: 1.55; color: var(--p-muted); }
.sjt-scores { display: grid; grid-template-columns: repeat(3, minmax(120px, 168px)); gap: 10px; }
.sjt-scores > div {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px;
  background: #fff; border: 1px solid var(--p-line); border-radius: 14px;
}
.sjt-scores strong { font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--p-blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sjt-scores span { font-size: 12px; line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-muted); }
.sjt-score-explain {
  margin: 16px 0; padding: 12px 16px; border-radius: 14px; background: var(--p-sky); color: var(--p-sky-ink);
  font-size: 14.5px; line-height: 1.5;
}
/* Whether the score is on their account: a quiet line under the scores, in
   red only if it could not be saved. Empty, it takes no room. */
.sjt-saved { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--p-muted); }
.sjt-saved:empty { display: none; }
.sjt-saved[data-state="failed"] { color: var(--p-danger); }
.sjt-review-list { display: grid; gap: 10px; }
/* Nothing in a section is clipped to its corners: a section that clipped
   would hold the commentary still instead of the window. */
.sjt-review { background: #fff; border: 1px solid var(--p-line); border-radius: 18px; }
.sjt-review.is-open { box-shadow: 0 12px 40px var(--p-shadow); }
.sjt-review-toggle {
  width: 100%; min-height: 76px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 14px; align-items: center;
  gap: 14px; margin: 0; padding: 12px 20px; border: 0; background: none; color: var(--p-ink); font: inherit;
  text-align: left; cursor: pointer;
}
.sjt-review-toggle:hover strong { color: var(--p-blue); }
.sjt-review-number { color: var(--p-blue); font-size: 18px; font-variant-numeric: tabular-nums; }
.sjt-review-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sjt-review-copy small { font-size: 13px; color: var(--p-muted); }
.sjt-review-copy strong { font-weight: 400; font-size: 16px; line-height: 1.4; -webkit-text-stroke: 0.25px currentColor; }
.sjt-review-score {
  padding: 3px 12px; border-radius: 999px; background: var(--p-blue-pale); color: var(--p-sky-ink);
  font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sjt-review-body { display: grid; gap: 18px; padding: 18px 20px 22px; border-top: 1px solid var(--p-sep); }
/* The initial email, opened in the review: a card of its own at the top,
   whichever section is open. */
.sjt-review-stage > .sjt-email { margin-bottom: 22px; border: 1px solid var(--p-line); border-radius: 18px; }
.sjt-review-scenario { border-radius: 14px; background: var(--p-bg); }
.sjt-review-scenario .sjt-context { padding: 16px 18px; }
.sjt-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sjt-compare > div { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--p-line); border-radius: 14px; }
.sjt-compare .sjt-label { color: var(--p-muted); }
.sjt-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sjt-order > b { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 700; color: var(--p-ink); }
.sjt-order i {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--p-blue-pale); color: var(--p-blue); font-size: 11px; font-style: normal; font-weight: 400;
}
.sjt-order-arrow { color: var(--p-muted); font-size: 13px; }
.sjt-feedback-intro { display: flex; flex-direction: column; gap: 2px; }
.sjt-feedback-intro strong { font-weight: 400; font-size: 16px; -webkit-text-stroke: 0.25px currentColor; }
.sjt-feedback-intro span { font-size: 14px; color: var(--p-muted); }

/* Each option in the intended order, its wording to press for the reason,
   green where the member placed it there and orange where they did not. */
.sjt-feedback { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr); align-items: start; gap: 16px; }
.sjt-feedback-options { display: grid; gap: 8px; }
.sjt-feedback-option {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 56px; overflow: hidden;
  background: #fff; border: 1px solid var(--p-line); border-radius: 12px;
}
.sjt-feedback-option.is-aligned { border-left: 4px solid var(--p-green); }
.sjt-feedback-option.is-shifted { border-left: 4px solid var(--p-orange); }
.sjt-correct-rank, .sjt-your-rank {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; text-align: center;
}
.sjt-correct-rank { border-right: 1px solid var(--p-sep); }
.sjt-your-rank { border-left: 1px solid var(--p-sep); }
.sjt-correct-rank small, .sjt-your-rank small { font-size: 10.5px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--p-muted); }
.sjt-correct-rank strong, .sjt-your-rank strong { font-weight: 400; font-size: 20px; color: var(--p-ink); }
.sjt-feedback-mark {
  display: grid; gap: 5px; min-height: 64px; margin: 0; padding: 10px 12px; border: 0; background: #fff; color: var(--p-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.sjt-feedback-mark:hover, .sjt-feedback-mark[aria-pressed="true"] { background: var(--p-hover); }
.sjt-feedback-mark > span { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-blue); }
.sjt-feedback-mark mark {
  padding: 1px 3px; border-radius: 3px; background: var(--p-note); color: var(--p-ink); font-size: 14px; line-height: 1.55;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sjt-feedback-mark[aria-pressed="true"] mark { background: var(--p-sky); }
.sjt-feedback-mark > small { font-size: 12px; color: var(--p-muted); }
/* Beside the options, held under the header as the page scrolls. */
.sjt-commentary {
  position: sticky; top: 96px; display: grid; gap: 10px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--p-line); border-top: 4px solid var(--p-blue); border-radius: 14px;
}
.sjt-commentary h4 { margin: 0; font-weight: 400; font-size: 15px; line-height: 1.5; -webkit-text-stroke: 0.25px currentColor; }
.sjt-commentary p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--p-ink); }
.sjt-commentary-compare { padding-top: 10px; border-top: 1px solid var(--p-sep); font-size: 14px; color: var(--p-muted); }
.sjt-principle { display: grid; gap: 4px; padding: 14px 18px; border-radius: 14px; background: var(--p-sky); color: var(--p-sky-ink); }
.sjt-principle strong { font-weight: 400; font-size: 16px; -webkit-text-stroke: 0.25px currentColor; }
.sjt-principle p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.sjt-review-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* A focus ring inside a box that clips its edges is drawn inside. */
.sjt-group-toggle:focus-visible, .sjt-review-toggle:focus-visible, .sjt-feedback-mark:focus-visible { outline-offset: -2px; }

/* ---------- narrower windows, a phone ---------- */
@media (max-width: 900px) {
  .sjt-answer { grid-template-columns: minmax(0, 1fr); }
  .sjt-available { border-right: 0; border-bottom: 1px solid var(--p-sep); }
  .sjt-email-meta { grid-template-columns: minmax(0, 1fr); }
  .sjt-feedback { grid-template-columns: minmax(0, 1fr); }
  .sjt-commentary { position: static; }
  .sjt-hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 760px) {
  .sjt-group-toggle { grid-template-columns: 34px minmax(0, 1fr) 14px; gap: 10px; padding: 14px 0; }
  .sjt-group-number { font-size: 19px; }
  .sjt-group-count { display: none; }
  .sjt-group-body { padding: 0 0 18px; }
  .sjt-group-start { padding: 14px; }
  .sjt-group-start .portal-pill { width: 100%; }
  .sjt-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; min-height: 64px; padding: 10px 16px; }
  .sjt-brand { display: none; }
  .sjt-identity strong { font-size: 15.5px; }
  .sjt-stage { padding: 16px 12px 40px; }
  .sjt-card-head { padding: 18px 16px 14px; }
  .sjt-card-head h2 { font-size: 22px; }
  .sjt-email { padding: 16px; }
  .sjt-context { padding: 16px; }
  .sjt-context p { font-size: 15px; }
  .sjt-rank-prompt { flex-direction: column; gap: 2px; padding: 11px 16px; }
  .sjt-available, .sjt-ranking { padding: 16px; }
  .sjt-option { grid-template-columns: 30px minmax(0, 1fr); }
  .sjt-option small { grid-column: 2; white-space: normal; }
  .sjt-ranked { grid-template-columns: 30px 30px minmax(0, 1fr); }
  .sjt-rank-actions { grid-column: 1 / -1; }
  .sjt-rank-actions button { flex: 1 1 0; }
  .sjt-submit { justify-content: space-between; padding: 12px 16px; }
  .sjt-hero h2 { font-size: 24px; }
  .sjt-scores { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sjt-scores > div { flex-direction: row; align-items: baseline; gap: 12px; padding: 10px 14px; }
  .sjt-scores strong { font-size: 20px; }
  .sjt-review-toggle { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: 6px 10px; padding: 12px 14px; }
  .sjt-review-number { grid-row: 1 / span 2; }
  .sjt-review-score { grid-column: 2; justify-self: start; }
  .sjt-review-toggle > .sjt-chevron { grid-column: 3; grid-row: 1 / span 2; }
  .sjt-review-body { padding: 14px 12px 16px; }
  .sjt-compare { grid-template-columns: minmax(0, 1fr); }
  .sjt-feedback-option { grid-template-columns: 52px minmax(0, 1fr) 48px; }
  .sjt-feedback-mark { padding: 9px 10px; }
  .sjt-review-actions { flex-direction: column; align-items: stretch; }
  .sjt-review-actions .portal-pill { white-space: normal; }
}
/* The email button keeps its name for a screen reader, and shows only its
   envelope, beside End practice, on a small phone. */
@media (max-width: 560px) {
  .sjt-email-toggle { width: 44px; padding: 0; }
  .sjt-email-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .sjt-bar-btn { padding: 0 14px; }
  .sjt-wide { display: none; }
}