/* Assignments — Create / Edit Assignment (Figma 22316:141824, 143443, 143028 …). Prefix ac-.
   Reuses .an-field (floating label), .an-foot / .an-next (sticky footer), .nm-* (To: chips, people rows), .m-chip. */

.screen.ac { display: flex; flex-direction: column; overflow: hidden; background: var(--gohan); }
.screen.ac::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--sb-dash); background: var(--gohan); z-index: 2; pointer-events: none; }
.ac-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: calc(var(--sb-dash) + 24px) 20px 40px; }
.ac-body::-webkit-scrollbar { display: none; }
.ac-head { display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 24px; }
.ac-head h1 { flex: 1; min-width: 0; }
.ac-icon32 { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; }
.ac-icon24 { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.ac-icon32:hover, .ac-icon24:hover { background: var(--heles); }
.ac-foot { position: relative; z-index: 1; }
.ac-form { display: flex; flex-direction: column; gap: 24px; }

/* Title / Notes (floating label) */
.ac .an-field:not(.is-filled) { padding: 16px; }
.ac .an-field { position: relative; }
.ac-notes { min-height: 56px; }
.ac-notes textarea { min-height: 24px; }
.ac-scaling { position: absolute; right: 7px; bottom: 7px; pointer-events: none; }

/* Description (opens the editor) */
.ac-desc-wrap { display: flex; flex-direction: column; gap: 8px; }
.ac-desc {
  position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 88px; padding: 15px; text-align: left;
  border: 1px solid var(--beerus); border-radius: var(--radius-s-sm); background: var(--gohan);
}
.ac-desc:hover { border-color: #CFCFCF; }
.ac-desc.is-filled { padding: 12px 16px 8px; }
.ac-desc .ph { font: 400 16px/24px var(--font); color: var(--trunks); }
.ac-desc small { font: 400 12px/12px var(--font); color: var(--trunks); }
.ac-desc-text { font: 400 16px/24px var(--font); color: var(--bulma); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.ac-help { font: 400 12px/16px var(--font); color: var(--trunks); }

/* Attachments (Figma 22316:143443) */
.ac-attach { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); }
.ac-attach-head { display: flex; align-items: center; gap: 8px; }
.ac-attach-title { flex: 1; min-width: 0; display: flex; flex-direction: column; font: 400 16px/24px var(--font); color: var(--trunks); }
.ac-attach-title.on { color: var(--bulma); }
.ac-attach-title small { font: 400 12px/16px var(--font); color: var(--trunks); }
.ac-files { border: 1px solid var(--beerus); border-radius: 8px; }
.ac-file { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; }
.ac-file + .ac-file { border-top: 1px solid var(--beerus); }
.ac-file-row { display: flex; align-items: center; gap: 12px; height: 32px; }
.ac-file-row .ac-icon32 + .ac-icon32 { margin-left: -8px; }
.ac-thumb { flex: none; border: 0.5px solid rgba(0, 0, 0, 0.25); border-radius: 4px; object-fit: cover; }
.ac-cap { flex: 1; min-width: 0; text-align: left; font: 400 14px/24px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 4px; }
.ac-cap.has { color: var(--bulma); }
.ac-cap:hover { background: var(--heles); }
.ac-cap-input { flex: 1; min-width: 0; height: 32px; padding: 0 8px; border: 1px solid var(--piccolo); border-radius: 6px; outline: 0; font: 400 14px/24px var(--font); color: var(--bulma); background: var(--gohan); }
.ac-file-meta { font: 400 12px/16px var(--font); color: var(--trunks); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-add { align-self: flex-end; display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: var(--radius-i-sm); background: var(--piccolo); font: 700 14px/24px var(--font); color: var(--goten); }
.ac-add:hover { filter: brightness(1.08); }

/* Select fields (Subject / Category), Figma MDS text input with floating label */
.ac-select {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 58px; padding: 0 16px; text-align: left;
  border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan);
}
.ac-select.is-filled { gap: 16px; }
.ac-select:hover { border-color: #CFCFCF; }
.ac-select > img { flex: none; }
.ac-select-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ac-select-text .ph { font: 400 16px/24px var(--font); color: var(--trunks); }
.ac-select-text small { padding-top: 12px; font: 400 12px/12px var(--font); color: var(--trunks); }
.ac-select-text small + span { padding-bottom: 8px; font: 400 16px/24px var(--font); color: var(--bulma); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-select.small { min-height: 56px; }

/* Audience field (Figma 22316:143060) */
.ac-aud { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); }
.ac-aud-row { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: 400 16px/24px var(--font); color: var(--trunks); }
.ac-aud-row span { flex: 1; }
.ac-aud-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 32px; }
.ac-tag { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border-radius: 4px; background: var(--beerus); font: 400 12px/16px var(--font); color: var(--bulma); white-space: nowrap; }
.ac-tag button { display: flex; border-radius: 50%; }
.ac-tag button:hover { background: rgba(0, 0, 0, 0.08); }
.ac-tag.more { padding: 4px 8px; background: var(--jiren); color: var(--piccolo); }
.ac-tag.more:hover { background: rgba(78, 70, 180, 0.2); }

/* Toggle boxes */
.ac-box { display: flex; flex-direction: column; gap: 16px; padding: 16px; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); }
.ac-box-row { display: flex; align-items: center; gap: 8px; }
.ac-box-row > img { flex: none; }
.ac-box-row span { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: rgba(0, 0, 0, 0.25); }
.ac-box-row.on span { color: var(--bulma); }
.ac-toggle { flex: none; width: 45px; height: 24px; display: flex; align-items: flex-start; border-radius: 12px; }
.ac-toggle:disabled { cursor: default; }
.ac-toggle:focus-visible { outline: 2px solid var(--piccolo); outline-offset: 2px; }
.ac-sub { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-i-sm); background: var(--heles); }
.ac-sub-row { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.ac-sub-row span { flex: 1; font: 400 14px/24px var(--font); color: var(--bulma); }
.ac-sub.is-off .ac-sub-row span { color: rgba(0, 0, 0, 0.25); }
.ac-when { display: flex; border: 1px solid var(--beerus); border-radius: var(--radius-i-sm); background: var(--gohan); overflow: hidden; }
.ac-when-part { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; max-height: 48px; padding: 12px; text-align: left; }
.ac-when-part:not(:disabled):hover { background: var(--goku); }
.ac-when-part:disabled { cursor: default; }
.ac-when-part span { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: var(--bulma); white-space: nowrap; }
.ac-when.is-off .ac-when-part span { color: rgba(0, 0, 0, 0.25); }
.ac-when-div { width: 1px; background: var(--beerus); }

/* ---------- Layers ---------- */
.ac-layer { position: absolute; inset: 0; z-index: 55; }
.ac-layer.sheet-layer { display: flex; flex-direction: column; justify-content: flex-end; }
.ac-layer.ac-full { z-index: 60; background: var(--gohan); animation: ac-in .22s ease-out both; }
@keyframes ac-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet.ac-sheet { padding-bottom: 0; gap: 0; }
.ac-sheet-body { padding: 24px 0; }
.ac-sheet-foot {
  position: sticky; bottom: 0; display: flex; gap: 16px; margin: 0 -20px; padding: 12px 20px 24px; background: var(--gohan);
  border-top: 1px solid var(--beerus); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.ac-clear { flex: 1; font: 700 18px/28px var(--font); color: var(--piccolo); border-radius: 8px; }
.ac-clear:hover { background: var(--jiren); }
.ac-apply { flex: 1; font-size: 18px; line-height: 28px; font-weight: 700; }

/* List sheets (Figma 22316:141939 Select Class) */
.ac-list-sheet .ac-sheet-body { padding-bottom: 32px; }
.ac-opts { display: flex; flex-direction: column; gap: 8px; }
.ac-opt {
  display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 12px 16px; border: 1px solid var(--beerus); border-radius: 8px;
  background: var(--gohan); text-align: left; font: 400 20px/32px var(--font); color: var(--trunks);
}
.ac-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-opt small { flex: none; font: 400 12px/16px var(--font); color: var(--trunks); }
.ac-opt:hover { background: var(--goku); }
.ac-opt.is-on { border-color: var(--piccolo); color: var(--piccolo); background: var(--jiren); }

/* Audience sheet (Figma 22316:141954 …) */
.ac-aud-opts { display: flex; flex-direction: column; gap: 8px; }
.ac-aud-opt { border: 1px solid var(--beerus); border-radius: 8px; background: var(--gohan); overflow: hidden; }
.ac-aud-opt.is-on { background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); }
.ac-aud-opt-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 16px; text-align: left; }
.ac-aud-opt.is-open .ac-aud-opt-row { padding: 8px 12px; }
.ac-aud-ico { flex: none; display: flex; padding: 8px; }
.ac-aud-ico.flip img { transform: scaleX(-1); }
.ac-aud-label { flex: 1; min-width: 0; font: 400 20px/32px var(--font); color: var(--bulma); }
.ac-aud-count { font-size: 14px; color: var(--trunks); }
.ac-aud-trail { flex: none; display: flex; padding: 4px; border-radius: 6px; }
.ac-aud-opt-row:hover .ac-aud-trail { background: var(--heles); }
.ac-aud-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.ac-ctags { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-ctag { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 12px; border: 1px solid var(--goku); border-radius: 8px; background: var(--jiren); font: 400 12px/16px var(--font); color: var(--bulma); white-space: nowrap; }
.ac-ctag button { display: flex; border-radius: 50%; }
.ac-continue { font-size: 16px; }

/* Wheel picker (Figma "Date and Time - Wheels") */
.ac-wheel-sheet .ac-sheet-body { display: flex; justify-content: center; padding: 24px 0; }
.ac-wheel {
  position: relative; display: flex; justify-content: center; gap: 4px; width: 297px; height: 213px; padding: 18px 20px; border-radius: 13px;
  background: var(--gohan); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden;
}
.ac-wheel-band { position: absolute; left: 0; right: 0; top: 89px; height: 35px; border-radius: 7px; background: rgba(120, 120, 128, 0.12); pointer-events: none; }
.ac-wheel-col {
  position: relative; flex: 1; min-width: 0; height: 177px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none;
  padding: 71px 0; outline: 0; overscroll-behavior: contain;
}
.ac-wheel-col.wide { flex: 2.2; }
.ac-wheel-col::-webkit-scrollbar { display: none; }
.ac-wheel-col:focus-visible { box-shadow: inset 0 0 0 1px var(--piccolo); border-radius: 6px; }
.ac-wheel-item {
  height: 35px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none;
  font: 400 17px/22px var(--font); color: rgba(60, 60, 67, 0.35); white-space: nowrap; transition: color .1s, font-size .1s;
}
.ac-wheel-item.is-near { color: rgba(60, 60, 67, 0.6); font-size: 19px; }
.ac-wheel-item.is-sel { color: #000; font-size: 22px; }
.ac-wheel-fade { position: absolute; left: 0; right: 0; height: 60px; pointer-events: none; }
.ac-wheel-fade.top { top: 0; background: linear-gradient(#fff, rgba(255, 255, 255, 0)); }
.ac-wheel-fade.bottom { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }

/* Dialog (Figma 22316:143105 / 143154) */
.ac-dialog-layer { display: grid; place-items: center; }
.ac-scrim { position: absolute; inset: 0; background: var(--zeno); animation: fade-in .2s ease-out both; }
.ac-dialog { position: relative; width: 312px; max-width: calc(100% - 40px); border-radius: 16px; background: var(--gohan); overflow: hidden; display: flex; flex-direction: column; animation: fade-in .18s ease-out both; }
.ac-dialog-text { display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 20px; text-align: center; }
.ac-dialog-title { font: 400 24px/32px var(--font); color: #1D1B20; }
.ac-dialog-msg { font: 400 14px/20px var(--font); color: #49454F; }
.ac-dialog-msg b { font-weight: 700; }
.ac-dialog-btn { height: 56px; border-top: 1px solid var(--beerus); font: 700 16px/24px var(--font); color: var(--trunks); text-align: center; }
.ac-dialog-btn.primary { font-weight: 600; color: var(--piccolo); }
.ac-dialog-btn.danger { font-weight: 600; color: var(--dodoria); }
.ac-dialog-btn:hover { background: var(--goku); }

/* Description editor (Figma 22316:145140 / 145162) */
.ac-ed { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ac-ed-head { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; margin: calc(var(--sb-dash) + 24px) 20px 24px; }
.ac-ed-head h1 { flex: 1; min-width: 0; }
.ac-ed-save { font: 600 16px/24px var(--font); color: var(--piccolo); padding: 4px 6px; margin-right: -6px; border-radius: 6px; }
.ac-ed-save:hover { background: var(--jiren); }
.ac-ed-area { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 24px; outline: 0; font: 400 16px/24px var(--font); color: var(--bulma); overflow-wrap: anywhere; }
.ac-ed-area:empty::before { content: attr(data-placeholder); color: var(--trunks); pointer-events: none; }
.ac-ed-area h1 { font: 700 24px/32px var(--font); margin: 8px 0; }
.ac-ed-area h2 { font: 700 20px/28px var(--font); margin: 8px 0; }
.ac-ed-area ul, .ac-ed-area ol { padding-left: 24px; margin: 4px 0; }
.ac-ed-area ul { list-style: disc; }
.ac-ed-area ol { list-style: decimal; }
.ac-ed-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 20px calc(12px + 21px); background: var(--goku); box-shadow: inset 0 1px 0 #EAEAEA; }
.ac-ed-left { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ac-ed-btn { flex: none; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 8px; border-radius: 9999px; font: 400 14px/24px var(--font); color: var(--trunks); }
.ac-ed-btn.white { background: var(--gohan); }
.ac-ed-btn.more { min-width: 32px; width: 32px; height: 32px; padding: 0; border-radius: 6px; }
.ac-ed-btn.txt { width: 40px; font-weight: 700; }
.ac-ed-btn.head { letter-spacing: 0.5px; }
.ac-ed-btn.aa.is-on, .ac-ed-btn.txt.is-on { background: var(--heles); border-radius: 12px; }
.ac-ed-btn.round.is-on { background: var(--jiren); }
.ac-ed-btn.close { padding: 8px 12px; border-radius: 8px; background: var(--gohan); }
.ac-ed-btn:hover { background: rgba(0, 0, 0, 0.06); }
.ac-ed-btn.white:hover, .ac-ed-btn.close:hover { background: #FAFAFA; }
.ac-ed-sep { flex: none; width: 1px; height: 28px; background: var(--trunks); }

/* Individual Student (Figma 22316:145757 / 145210 / 145587) */
.ac-ind { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--goku); }
.ac-ind-top { flex: none; background: var(--gohan); }
.ac-ind-head { display: flex; align-items: center; gap: 16px; min-height: 62px; padding: calc(var(--sb-dash) + 8px) 24px 12px; }
.ac-ind-head h1 { flex: 1; min-width: 0; }
.ac-ind-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.ac-ind-back img { transform: rotate(180deg); }
.ac-ind-back:hover { background: var(--heles); }
.ac-ind-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding: 12px 20px 16px; }
.ac-ind-body::-webkit-scrollbar { display: none; }
.ac-ind-chips { flex: none; margin: 0 -20px; }
.ac-ind-chips .m-chip { border-color: transparent; }
.ac-ind-chips .m-chip.is-on { border-color: var(--piccolo); }
.ac-ind-all { flex: none; display: flex; align-items: center; gap: 10px; }
.ac-ind-selall { flex: 1; display: flex; align-items: center; gap: 10px; font: 400 16px/24px var(--font); color: var(--piccolo); text-align: left; }
.ac-ind-selall .nm-check:not(.is-on)::before { border-color: var(--trunks); }
.ac-ind-count { flex: 1; text-align: right; font: 400 16px/24px var(--font); color: var(--trunks); }
.ac-ind-sub { font: 400 11px/normal var(--font); color: #5D626C; }
.ac-ind-list { flex: none; }
.ac-ind-foot { flex: none; padding: 12px 20px 0; background: var(--gohan); border-top: 1px solid var(--beerus); filter: drop-shadow(0 -2px 8px rgba(0, 0, 0, 0.08)); }
.ac-ind-foot .home-indicator { height: 21px; }