/* Teacher welcome flow (/mystudents/welcome; teacher-welcome.js), in the family home's look. */

.tw {
  --tw-action: #0b63c7;
  --tw-action-hover: #0a52a6;
  --tw-ink: #1d232b;
  --tw-muted: #5b6470;
  --tw-line: #e1e4e8;
  --tw-soft: #f2f8ff;
  max-width: 760px;
  margin: 32px auto 64px;
  padding: 0 16px;
  color: var(--tw-ink);
  font-family: "Onest", system-ui, sans-serif;
}
.tw__loading { color: var(--tw-muted); }
/* The site's stylesheets give some elements a display that beats [hidden]. */
.tw [hidden] { display: none !important; }

.tw-head { margin-bottom: 20px; }
.tw-kicker { margin: 0 0 4px; font-weight: 700; color: var(--tw-action); }
.tw-title { margin: 0 0 16px; font-size: 2em; outline: none; text-wrap: balance; }

.tw-stepper { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.tw-stepper__item { display: inline-flex; align-items: center; gap: 8px; color: var(--tw-muted); font-weight: 600; }
.tw-stepper__n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #eef1f4; color: var(--tw-muted); font-size: 0.9em;
}
.tw-stepper__n .material-icons { font-size: 18px; }
.tw-stepper__item.is-current { color: var(--tw-ink); }
.tw-stepper__item.is-current .tw-stepper__n { background: var(--tw-action); color: #fff; }
.tw-stepper__item.is-done .tw-stepper__n { background: #e7f5ee; color: #1a7f4b; }

.tw-card {
  background: #fff; border: 1px solid var(--tw-line); border-radius: 24px; padding: 28px;
  box-shadow: 0 1px 2px rgba(16, 40, 80, 0.04), 0 8px 24px rgba(16, 40, 80, 0.07);
}
.tw-form { display: flex; flex-direction: column; gap: 16px; }
.tw-lede { margin: 0 0 4px; color: var(--tw-muted); font-size: 1.05em; }
.tw-row { display: flex; flex-wrap: wrap; gap: 16px; }
.tw-row > .tw-field { flex: 1 1 240px; }
.tw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tw-field__label { font-weight: 700; font-size: 0.95em; }
.tw-field__hint { color: var(--tw-muted); font-size: 0.88em; }
.tw-field__err { color: #b3261e; font-size: 0.88em; min-height: 0; }
.tw-field__err:empty { display: none; }
.tw-input {
  width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 12px;
  border: 1.5px solid #c9ced6; border-radius: 12px; font: inherit; background: #fff; color: var(--tw-ink);
}
.tw-input:focus-visible { outline: 3px solid var(--tw-action); outline-offset: 1px; }
.tw-input[aria-invalid="true"] { border-color: #b3261e; }
.tw-textarea { resize: vertical; }

.tw-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
.tw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px;
  border-radius: 999px; border: 2px solid var(--tw-action); background: #fff; color: var(--tw-action);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.tw-btn .material-icons { font-size: 20px; }
.tw-btn--primary { background: var(--tw-action); color: #fff !important; }
.tw-btn--primary:hover { background: var(--tw-action-hover); opacity: 1; }
.tw-btn--secondary:hover { background: var(--tw-soft); opacity: 1; }
.tw-btn--ghost { border-color: transparent; background: transparent; color: var(--tw-muted); }
.tw-btn--ghost:hover { color: var(--tw-ink); text-decoration: underline; }
.tw-btn:focus-visible { outline: 3px solid var(--tw-action); outline-offset: 2px; }
.tw-btn:disabled { opacity: 0.6; cursor: default; }

.tw-error { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fdecec; color: #a61b1b; border: 1px solid #f3c2c2; }
.tw-warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff7e6; border: 1px solid #f5d79a; }
.tw-ok { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-weight: 600; color: #1a7f4b; }
.tw-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 14px; background: #f4f6f9; color: var(--tw-ink); }
.tw-note .material-icons { color: var(--tw-action); }

.tw-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 0.95em; }
.tw-table th, .tw-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--tw-line); }
.tw-table th { color: var(--tw-muted); font-weight: 700; }

.tw-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 4px 0 16px; padding: 16px 18px; border-radius: 16px; background: var(--tw-soft); }
.tw-code__label { font-weight: 700; color: var(--tw-muted); }
.tw-code__value { font-size: 1.8em; font-weight: 800; letter-spacing: 0.04em; color: var(--tw-action); }
.tw-how { margin: 0 0 16px; padding-left: 22px; line-height: 1.7; }

/* "Choose your own password" (views/includes/createPasswordForm.pug), on its own page and on /subscribe/success. */
.tw--narrow { max-width: 560px; }
.tw--embed { margin: 0 auto; padding: 0; width: 100%; max-width: 480px; text-align: left; }
.tw-check { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; cursor: pointer; color: var(--tw-muted); }
.tw-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--tw-action); }
.tw-foot { margin: 16px 0 0; text-align: center; color: var(--tw-muted); }
.tw-foot a { color: var(--tw-action); font-weight: 600; }
.tw-linkbtn { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tw-action); text-decoration: underline; cursor: pointer; }
.tw-linkbtn:focus-visible { outline: 3px solid var(--tw-action); outline-offset: 2px; }
/* The parent PIN on the password form (includes/createPasswordForm.pug, family accounts). */
.tw-pin { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--tw-line); min-width: 0; }
/* Floated so the fieldset's top border runs above it, not through it. */
.tw-pin__title { float: left; width: 100%; padding: 0; font-weight: 700; font-size: 1.1em; }
.tw-pin .tw-field { flex: 0 1 200px; }
.tw-input--pin { -webkit-text-security: disc; font-size: 1.3em; letter-spacing: 0.4em; }
.tw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

@media (max-width: 600px) {
  .tw-card { padding: 20px 16px; border-radius: 20px; }
  .tw-title { font-size: 1.6em; }
  .tw-actions { justify-content: stretch; }
  .tw-actions .tw-btn { flex: 1 1 100%; }
}

/* Step 2: Class list / One student, the learning path, and the editable preview. */
.tw-tabs { display: inline-flex; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 14px; background: #eef1f4; }
.tw-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 10px;
  background: transparent; color: var(--tw-muted); font: inherit; font-weight: 600; cursor: pointer;
}
.tw-tab .material-icons { font-size: 18px; }
.tw-tab[aria-selected="true"] { background: #fff; color: var(--tw-action); box-shadow: 0 1px 4px rgba(4, 16, 35, 0.12); }
.tw-tab:focus-visible { outline: 3px solid var(--tw-action); outline-offset: 1px; }
.tw-fieldset { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.tw-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tw-path { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--tw-line); border-radius: 14px; cursor: pointer; }
.tw-path:has(input:checked) { border-color: var(--tw-action); background: var(--tw-soft); }
.tw-path input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--tw-action); }
.tw-path__body { display: flex; flex-direction: column; gap: 2px; }
.tw-path__title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tw-path__title .material-icons { font-size: 18px; color: var(--tw-action); }
.tw-path__desc { color: var(--tw-muted); font-size: 0.9em; }
.tw-path-level .tw-field { max-width: 320px; }
.tw-table--edit td { padding: 6px 8px; vertical-align: middle; }
.tw-input--cell { min-height: 38px; padding: 6px 10px; border-radius: 10px; }
@media (max-width: 600px) {
  .tw-table--edit th:first-child, .tw-table--edit td:first-child { display: none; }
}