/* Assignments — submissions review (js/assignments/review.js). Prefix ar-.
   List 22316:143894 / 144094 / 144181 / 144310, review 144413 / 144486 / 144577 / 144650 / 144719 / 144791,
   Description container 145918, viewer 145191. */

.ar [hidden] { display: none !important; }

/* ---------- Shared header ---------- */
.ar-head { display: flex; align-items: center; gap: 8px; height: 40px; }
.ar-head h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-back { flex: none; width: 31.69px; height: 31.69px; display: grid; place-items: center; border-radius: 6px; }
.ar-back img { transform: rotate(180deg); }
.ar-icon-btn { flex: none; width: 40px; height: 40px; padding: 4px; display: grid; place-items: center; border-radius: var(--radius-i-sm); }
.ar-back:hover, .ar-icon-btn:hover { background: var(--heles); }

/* =====================================================================
   1. Submissions list
   ===================================================================== */
.ar-list { background: var(--goku); }
.ar-sticky { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 16px; padding-bottom: 16px; background: var(--goku); }
.ar-top { display: flex; flex-direction: column; gap: 16px; padding-top: calc(var(--sb-dash) + 24px); background: var(--gohan); }
.ar-list .ar-head { padding: 0 20px; }
.ar-search { margin: 0 20px; background: var(--goku); }
.ar-search input { font-weight: 400; }
.ar-tabs { margin-top: 0; }
.ar-tools { display: flex; flex-direction: column; gap: 16px; }

.ar-chips { display: flex; gap: 4px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.ar-chips::-webkit-scrollbar { display: none; }
.ar-chip {
  flex: none; display: flex; align-items: center; gap: 4px; height: 32px; padding: 4px 8px;
  border: 1px solid transparent; border-radius: 4px; background: var(--gohan);
  font: 400 14px/24px var(--font); color: var(--bulma); white-space: nowrap;
}
.ar-chip:hover { background: #FAFAFA; }
.ar-chip.is-on { padding-left: 12px; border-color: var(--piccolo); color: var(--piccolo); background: linear-gradient(var(--jiren), var(--jiren)), var(--gohan); }
.ar-chip-x { display: grid; place-items: center; width: 16px; height: 16px; }

.ar-sort { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 24px; padding: 0 20px; }
.ar-sort-key { display: flex; align-items: center; gap: 10px; border-radius: 6px; font: 400 16px/24px var(--font); color: var(--trunks); }
.ar-sort-div { width: 1px; align-self: stretch; background: var(--beerus); }
.ar-sort-dir { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; }
.ar-sort-dir.is-asc img { transform: rotate(180deg); }
.ar-sort-key:hover, .ar-sort-dir:hover { background: var(--heles); }

.ar-cards { display: flex; flex-direction: column; gap: 12px; padding: 0 20px 24px; }
.ar-card {
  width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px;
  border-radius: 8px; background: var(--gohan); text-align: left; transition: box-shadow .15s;
}
.ar-card:hover { box-shadow: var(--shadow-small); }
.ar-card-top { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.ar-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ar-card-name { flex: 1; min-width: 0; font: 700 16px/24px var(--font); color: var(--bulma); }
.ar-card-name span { font-weight: 600; }
.ar-badge {
  flex: none; padding: 4px 8px; border-radius: 8px; font: 700 10px/16px var(--font); letter-spacing: 0.5px;
  text-transform: uppercase; white-space: nowrap;
}
.ar-badge.pending { background: var(--krillin-10); color: var(--krillin); }
.ar-badge.approved { background: var(--roshi-10); color: var(--roshi); }
.ar-badge.rejected { background: rgba(211, 48, 48, 0.12); color: var(--dodoria); }
.ar-badge.none { background: var(--beerus); color: var(--trunks); }
.ar-card-div { display: block; width: 100%; height: 1px; background: var(--beerus); }
.ar-card-body { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.ar-line { display: flex; align-items: center; gap: 4px; height: 16px; }
.ar-line img { flex: none; }
.ar-line-text { font: 400 12px/16px var(--font); color: var(--trunks); white-space: nowrap; }
.ar-ord { font-size: 7.74px; line-height: 0; vertical-align: 3px; }
.ar-dot { flex: none; width: 4px; height: 4px; margin: 0 4px; border-radius: 50%; background: rgba(0, 0, 0, 0.25); }
.ar-tag { font: 700 10px/16px var(--font); letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.ar-tag.late { color: var(--dodoria); }
.ar-tag.ontime { color: var(--whis); }
.ar-tag.grey { color: var(--trunks); }
.ar-note { display: flex; align-items: flex-start; gap: 4px; font: 400 12px/16px var(--font); color: var(--trunks); }
.ar-note-ic { flex: none; width: 16px; height: 16px; padding: 3px 0 0 3.25px; }
.ar-note-ic img { display: block; }

/* =====================================================================
   2. Submission review
   ===================================================================== */
.ar-review { background: var(--goku); display: flex; flex-direction: column; }
.ar-page { flex: none; display: flex; flex-direction: column; gap: 24px; padding: calc(var(--sb-dash) + 24px) 20px 24px; }
.ar-stack { display: flex; flex-direction: column; gap: 24px; }

/* Photo panel (dark, with the submitted page) */
.ar-photo {
  position: relative; height: 734px; padding: 16px; border-radius: 16px;
  display: flex; flex-direction: column; justify-content: space-between; touch-action: pan-y; user-select: none;
}
.ar-photo-bg { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: #222; }
.ar-photo-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.ar-photo-bg img.is-in { animation: fade-in .25s ease-out both; }
.ar-photo-bg i { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.64); }
.ar-photo-top { position: relative; display: flex; flex-direction: column; gap: 40px; pointer-events: none; }
.ar-photo-titles { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ar-subject {
  display: inline-flex; align-items: center; height: 24px; min-width: 20px; padding: 0 8px; border: 0.4px solid var(--bulma);
  border-radius: 4px; background: var(--zeno); font: 400 14px/24px var(--font); color: var(--goku); text-transform: uppercase;
}
.ar-photo-head { display: flex; flex-direction: column; align-items: center; }
.ar-photo-title { font: 700 20px/32px var(--font); color: var(--gohan); }
.ar-photo-when { font: 400 14px/24px var(--font); color: var(--goku); }
.ar-pill-row { display: flex; justify-content: center; }
.ar-pill { padding: 4px 12px; border-radius: 8px; font: 700 14px/24px var(--font); white-space: nowrap; }
.ar-pill.pending { background: var(--krillin); color: var(--bulma); }
.ar-pill.approved { background: var(--roshi); color: var(--gohan); }
.ar-pill.rejected { background: var(--dodoria); color: var(--gohan); }
.ar-pill.none { background: var(--beerus); color: var(--trunks); }
.ar-photo-bottom { position: relative; display: flex; flex-direction: column; gap: 16px; }
.ar-counter { text-align: center; font: 700 12px/16px var(--font); color: var(--gohan); pointer-events: none; }
.ar-nav {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); display: flex; padding: 8px;
  border-radius: 16px; background: var(--zeno); transition: opacity .15s, filter .15s;
}
.ar-nav.prev { left: -12px; }
.ar-nav.next { right: -12px; }
.ar-nav:not(:disabled):hover { filter: brightness(1.3); }
.ar-nav:disabled { opacity: 0.35; cursor: default; }
/* Not received: no photo, dark text on the page background (22316:144650) */
.ar-photo.is-plain { height: auto; justify-content: flex-start; }
.ar-photo.is-plain .ar-photo-title { color: var(--bulma); }
.ar-photo.is-plain .ar-photo-when { color: var(--trunks); }

/* Student card */
.ar-student { display: flex; flex-direction: column; gap: 16px; padding: 16px 20px; border-radius: 12px; background: var(--gohan); }
.ar-student-top { display: flex; align-items: center; gap: 16px; }
.ar-student-text { flex: 1; min-width: 0; }
.ar-student-name { font: 700 18px/28px var(--font); color: var(--bulma); }
.ar-student-sub { font: 400 14px/24px var(--font); color: var(--trunks); }
.ar-student-av { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ar-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px 8px 8px;
  border-radius: 8px; background: var(--piccolo); font: 700 14px/24px var(--font); color: var(--goten); white-space: nowrap;
}
.ar-btn:hover { filter: brightness(1.08); }
.ar-btn.ghost { padding: 7px 15px 7px 7px; border: 1px solid var(--trunks); background: var(--jiren); color: var(--bulma); }
.ar-btn.ghost:hover { filter: brightness(0.97); }
.ar-btn[aria-disabled="true"] { cursor: default; filter: none; }
.ar-remind-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ar-link { font: 400 14px/24px var(--font); color: var(--piccolo); text-decoration: underline; text-underline-position: from-font; }

/* White section cards */
.ar-box { display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 16px; background: var(--gohan); }
.ar-box-title { font: 700 18px/28px var(--font); color: var(--bulma); }
.ar-note-input {
  display: block; width: 100%; min-height: 88px; padding: 15px; border: 1px solid var(--beerus); border-radius: var(--radius-s-sm);
  background: var(--gohan); font: 400 16px/24px var(--font); color: var(--bulma); resize: vertical; outline: 0; overflow: hidden;
}
.ar-note-input::placeholder { color: var(--trunks); }
.ar-note-input:focus { border-color: var(--piccolo); }
.ar-desc { padding: 12px 16px; border-radius: 8px; background: var(--heles); }
.ar-desc-text { font: 400 16px/24px var(--font); color: var(--bulma); overflow-wrap: anywhere; }
.ar-more { font: 700 16px/24px var(--font); color: var(--piccolo); padding: 0 0 0 4px; }
.ar-more.block { display: block; margin-top: 8px; padding: 0; }
.ar-more:hover { text-decoration: underline; }
.ar-box .nd-thumb { width: 40px; height: 40px; }
.ar-kv { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px; border-radius: 8px; background: var(--heles); }
.ar-kv div { display: flex; gap: 2px; font: 400 12px/16px var(--font); }
.ar-kv b { flex: 1; min-width: 0; font-weight: 500; color: var(--bulma); }
.ar-kv span { flex: 1; min-width: 0; color: var(--trunks); }
.ar-hist { display: flex; gap: 12px; padding: 8px; border-radius: 8px; background: var(--heles); }
.ar-hist-n { flex: none; width: 24px; padding: 4px 0; border-radius: 8px; background: var(--jiren); text-align: center; font: 700 12px/16px var(--font); color: var(--bulma); }
.ar-hist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px 0; font: 400 12px/16px var(--font); }
.ar-hist-text b { font-weight: 500; color: var(--bulma); }
.ar-hist-text span { color: var(--trunks); }

/* Sticky decision bar (pending / editing) */
.ar-bar {
  position: sticky; bottom: 0; z-index: 3; flex: none; margin-top: auto; display: flex; gap: 8px; padding: 12px 20px 24px;
  background: var(--gohan); border-top: 1px solid var(--beerus); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}
.ar-bar-btn { flex: 1; padding: 16px 24px; border-radius: 8px; font: 600 16px/24px var(--font); color: var(--gohan); text-align: center; }
.ar-bar-btn.reject { background: var(--dodoria); }
.ar-bar-btn.approve { background: var(--roshi); }
.ar-bar-btn:hover { filter: brightness(1.08); }

/* Reject reason sheet */
.ar-reason-body { display: flex; flex-direction: column; gap: 16px; }
.ar-reason-text { color: var(--trunks); }
.ar-reason textarea { min-height: 72px; max-height: 200px; overflow-y: auto; }
.btn.ar-btn-reject { background: var(--dodoria); color: var(--gohan); }
.btn.ar-btn-reject:not(:disabled):hover { filter: brightness(1.08); }
.btn.ar-btn-reject:disabled { background: #BDBDBD; color: rgba(255, 255, 255, 0.72); cursor: default; }

/* First-time swipe hint (22316:144486) */
.ar-onboard {
  position: absolute; inset: 0; z-index: 95; cursor: pointer; background: var(--zeno);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); animation: fade-in .2s ease-out both;
}
.ar-onboard.is-closing { animation: fade-out .18s ease-in both; }
.ar-onboard-x { position: absolute; top: 20px; right: 20px; display: flex; padding: 6.154px; border-radius: 50%; background: var(--goten); }
.ar-onboard-mid {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 44px;
}
.ar-onboard-tips { display: flex; flex-direction: column; gap: 54px; width: 100%; }
.ar-onboard-tip { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 0 60px; }
.ar-onboard-tip p { font: 400 20px/32px var(--font); color: var(--gohan); text-align: center; }
.ar-onboard-ok { padding: 12px 16px; border: 1px solid var(--trunks); border-radius: 8px; font: 700 18px/28px var(--font); color: var(--gohan); }
.ar-onboard-ok:hover { background: rgba(255, 255, 255, 0.08); }
.ar-onboard-hint { position: absolute; left: 60px; right: 60px; bottom: 119px; text-align: center; font: 400 16px/24px var(--font); color: var(--beerus); }

/* =====================================================================
   3. Document viewer (22316:145191) — view-only
   ===================================================================== */
.ar-viewer { display: flex; flex-direction: column; overflow: hidden; background: var(--popo); color: var(--goten); }
.phone:has(.ar-viewer) .statusbar { color: var(--goten); }
.phone:has(.ar-viewer) .statusbar img { filter: invert(1); }
.ar-v-top { flex: none; display: flex; align-items: center; gap: 6px; height: calc(var(--sb) + 64px); padding: var(--sb) 12px 0; }
.ar-v-back { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; }
.ar-v-back img { transform: rotate(180deg); }
.ar-v-spacer { flex: 1; }
.ar-v-act { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-radius: 8px; font: 500 17px/24px var(--font); color: var(--goten); }
.ar-v-act.muted { color: #9E9E9E; margin-left: 12px; }
.ar-v-back:hover, .ar-v-act:hover, .ar-v-pg:not(:disabled):hover, .ar-v-tool:hover { background: rgba(255, 255, 255, 0.1); }
.ar-v-dec { flex: none; padding: 6px 10px; border-radius: 8px; font: 700 14px/20px var(--font); color: var(--goten); }
.ar-v-dec.reject { background: var(--dodoria); }
.ar-v-dec.approve { background: var(--roshi); }
.ar-v-dec:hover { filter: brightness(1.1); }
.ar-v-page { flex: none; aspect-ratio: 1080 / 1527; max-height: calc(100% - var(--sb) - 64px - 48px - 76px); background: var(--gohan); touch-action: pan-y; user-select: none; }
.ar-v-page img { display: block; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.ar-v-pager { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 12px; }
.ar-v-pg { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; font: 400 14px/20px var(--font); color: var(--goten); }
.ar-v-pg:disabled { color: #757575; cursor: default; }
.ar-v-count { font: 700 14px/20px var(--font); }
.ar-v-tools { margin-top: auto; flex: none; display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 4px 8px; }
.ar-v-tool { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 8px; font: 400 12px/16px var(--font); color: #BDBDBD; }
.ar-v-tool svg { width: 22px; height: 22px; }
.ar-v-hi { flex: none; position: relative; height: 24px; }
.ar-v-hi::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 100px; background: var(--goten); }
.ar-tabs .n-tab { padding: 8px 0; white-space: nowrap; }