/* บัญชี ห้องเรียน กลุ่ม และหน้าอาจารย์ — ใช้ token และระดับเงาตาม DESIGN.md */
.account {
  display: inline-flex;
}
.account-btn {
  min-height: 40px;
  font-size: var(--text-meta);
  padding: 6px 10px;
}
a.account-btn:has(.avatar) {
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
}
.avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-small);
}
a.account-btn .avatar {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--line);
}
.account-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(18px, 3vw, 28px);
  margin: 0 0 20px;
  box-shadow: var(--shadow-2);
}
.account-card h2 {
  font-size: var(--text-lead);
  margin: 0 0 4px;
}
.account-card h3 {
  font-size: var(--text-body);
  margin: 0;
}
.benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 24px;
}
.benefits li {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  background: linear-gradient(var(--blue), var(--blue)) no-repeat 0 0 / 28px 2px;
}
.benefits span {
  color: var(--muted);
  font-size: var(--text-small);
}
.google-btn {
  min-height: 48px;
  padding: 10px 22px;
  font-size: var(--text-body);
  font-weight: 600;
  gap: 12px;
  box-shadow: var(--shadow-1);
}
.google-btn:hover:not(:disabled) {
  box-shadow: var(--shadow-2);
}
.profile-card {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.profile-card > div:nth-child(2) {
  flex: 1;
  min-width: 200px;
  display: grid;
}
.profile-card small {
  color: var(--muted);
}
.profile-card .tool-actions {
  margin: 0;
}
.role-chip {
  justify-self: start;
  margin-top: 4px;
  background: var(--soft);
  color: var(--blue);
  border-radius: 99px;
  padding: 1px 10px;
  font-size: var(--text-meta);
  font-weight: 600;
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px 32px;
  margin-top: 16px;
}
.split form {
  align-content: start;
}
.split button {
  justify-self: start;
}
.code-input {
  font-size: 1.25rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.group-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.group-head p {
  margin: 0;
}
.code-box {
  display: grid;
  justify-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 10px 16px;
}
.code-box small {
  color: var(--muted);
  font-size: var(--text-meta);
}
.code-box b {
  font-size: 1.75rem;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.code-box button {
  font-size: var(--text-meta);
  padding: 4px 10px;
}
.member-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.member-list li {
  display: flex;
  gap: 10px;
  align-items: center;
}
.member-list li > span {
  display: grid;
  min-width: 0;
}
.member-list small,
small.sub {
  color: var(--muted);
  font-size: var(--text-meta);
  font-weight: 400;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- หน้าอาจารย์ ---------- */
.teacher-group {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 12px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--duration-lift) var(--ease-out);
}
.teacher-group[open] {
  box-shadow: var(--shadow-2);
}
.teacher-group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.teacher-group summary::-webkit-details-marker {
  display: none;
}
.teacher-group summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform var(--duration-fast);
  flex: none;
}
.teacher-group[open] summary::after {
  transform: rotate(225deg);
}
.tg-name {
  display: grid;
  flex: 1;
}
.tg-name small,
.tg-meta {
  color: var(--muted);
  font-size: var(--text-meta);
}
.teacher-group > .table-wrap,
.teacher-group > .project-grid,
.teacher-group > .empty-state {
  margin: 0 18px 18px;
}
.teacher-group td .bar {
  width: 120px;
  margin: 6px 0 0;
}
.teacher-group .project-card h3 {
  margin: 0;
  font-size: var(--text-body);
}
.teacher-group .project-head small {
  color: var(--muted);
  font-size: var(--text-meta);
}
/* ---------- ห้องเรียน ---------- */
button.sm {
  min-height: 36px;
  padding: 4px 12px;
  font-size: var(--text-meta);
}
.muted-chip {
  background: var(--bg);
  color: var(--muted);
}
.cls-facts,
.cls-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 28%), 1fr));
  gap: 14px 24px;
  margin: 14px 0 6px;
}
.cls-facts dt,
.cls-stats dt {
  color: var(--muted);
  font-size: var(--text-meta);
}
.cls-facts dd,
.cls-stats dd {
  margin: 2px 0 0;
  font-weight: 600;
}
.cls-stats dd b {
  font-size: var(--text-h2);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cls-stats .bar {
  max-width: 180px;
}
.cls-join {
  grid-template-columns: minmax(0, 220px) auto;
  align-items: end;
  justify-content: start;
  margin-top: 14px;
}
.cls-teachers {
  margin: 6px 0 8px;
}
.cls-visibility {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: var(--text-small);
}
.cls-visibility summary,
.work-snapshot > summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 600;
  min-height: 32px;
}
.cls-visibility ul {
  margin: 8px 0;
  padding-left: 22px;
}
.cls-visibility p {
  margin: 0;
}
.cls-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.cls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--duration-lift) var(--ease-out), border-color var(--duration-fast);
}
.cls-row:hover {
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
}
.cls-row-name {
  display: grid;
  min-width: 0;
}
.cls-row-name b {
  color: var(--blue);
}
.cls-row-name small,
.cls-row-meta {
  color: var(--muted);
  font-size: var(--text-meta);
}
.cls-new summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cls-new summary::-webkit-details-marker {
  display: none;
}
.cls-new summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--soft);
  color: var(--blue);
  font-weight: 700;
  transition: transform var(--duration-fast);
}
.cls-new[open] summary::before {
  transform: rotate(45deg);
}
.cls-new summary h2 {
  margin: 0;
  color: var(--blue);
}
.cls-new form {
  margin-top: 16px;
}
.cls-inline {
  grid-template-columns: minmax(0, 320px) auto;
  align-items: end;
  justify-content: start;
}
.nowrap {
  white-space: nowrap;
}
.form-actions {
  grid-column: 1 / -1;
  margin: 0;
}
.member-list li > button {
  margin-left: auto;
}
.code-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.cls-detail-head > div:first-child {
  flex: 1;
  min-width: 240px;
}
.cls-detail-head .callout {
  margin: 8px 0 0;
}
.cls-card .callout {
  margin: 16px 0 0;
}

/* ---------- งานที่มอบหมาย ---------- */
.status-chip {
  display: inline-block;
  border-radius: 99px;
  padding: 1px 10px;
  font-size: var(--text-meta);
  font-weight: 600;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.status-chip.info {
  background: var(--soft);
  color: var(--blue);
  border-color: transparent;
}
.status-chip.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-line);
}
.status-chip.ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: transparent;
}
.callout.ok {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}
.new-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 10px;
  color: var(--blue);
  font-weight: 600;
}
.new-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.work-row.overdue .cls-row-name small {
  color: var(--danger);
}
.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--muted);
}
.work-head p {
  margin: 0;
}
.work-details {
  white-space: pre-line;
  max-width: var(--measure);
}
.work-tools {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.work-tools li {
  display: grid;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.work-tools li.has {
  border-style: solid;
}
.work-tools small {
  color: var(--muted);
  font-size: var(--text-meta);
}
.work-tools li.has small {
  color: var(--ok);
}
.work-submit {
  max-width: var(--measure);
}
.work-snapshot {
  margin-top: 16px;
}
.work-pick {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 14px 4px;
  margin: 0;
}
.work-pick legend {
  padding: 0 6px;
}
.work-pick .switch {
  margin-right: 18px;
  font-weight: 400;
}
.cls-new summary h3 {
  margin: 0;
  color: var(--blue);
  font-size: var(--text-body);
}
.tg-body {
  margin: 0 18px 18px;
}
.tg-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* ---------- เธรดความเห็น ---------- */
.thread {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  max-width: var(--measure);
}
.thread h3 {
  font-size: var(--text-body);
  margin: 0 0 10px;
}
.thread-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  gap: 10px;
}
.thread-item {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--bg);
}
.thread-item.from-teacher {
  background: var(--soft);
}
.thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: var(--text-meta);
}
.thread-meta .role-chip {
  margin: 0;
}
.thread-meta time {
  color: var(--muted);
}
.thread-meta .linkish {
  margin-left: auto;
}
.thread-body {
  margin: 4px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.thread .empty-state {
  margin: 0 0 12px;
}

@media (max-width: 760px) {
  .cls-join,
  .cls-inline,
  #newClass,
  #editClass {
    grid-template-columns: 1fr;
  }
  .teacher-group summary {
    flex-wrap: wrap;
  }
  .code-box {
    width: 100%;
  }
}