/* Students writing on the board (boardperm.js): the pen beside a name, the teacher's line at the top of the
   participants (who writes; pick several), «همه بتونن بنویسن» among the class tools, the writer's name beside
   their ink, the student's toast. A student with the pen gets the board's toolbar like the teacher's (stage.js). */

/* The pen beside a name. */
.badge.pen { display: inline-grid; place-items: center; padding: 1px 6px; background: var(--accent-soft); color: var(--accent-ink); }
.badge.pen .ic { width: 13px; height: 13px; stroke-width: 2.2; }

/* The teacher's line in the participants: who writes, «انتخاب چند نفر برای نوشتن», «گرفتن از همه». */
.pen-box {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 8px; padding: 6px 10px 8px;
  border-radius: var(--r); background: var(--bg-sunken);
}
.pen-box[hidden] { display: none; }
.pen-box[data-pick="1"] { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.pen-line { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-meta); font-weight: 700; color: var(--ink); line-height: 1.6; }
.pen-line .ic { flex: none; width: 18px; height: 18px; color: var(--accent-ink); }
.pen-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pen-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pen-acts:empty { display: none; }

/* A tick before each student while the teacher picks several: a 44px target with a 22px box drawn in it. */
.pen-pick { flex: none; display: grid; place-items: center; margin-inline-end: -6px; }
.pen-pick input {
  appearance: none; -webkit-appearance: none;
  position: relative; display: block;
  width: 44px; height: 44px; margin: 0; border-radius: 10px;
  background: transparent; cursor: pointer;
}
.pen-pick input::before {
  content: ""; position: absolute; inset: 11px;
  border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface);
}
.pen-pick input:checked::before { border-color: var(--accent); background: var(--accent); }
.pen-pick input:checked::after {
  content: ""; position: absolute; left: 18px; top: 14px; width: 7px; height: 12px;
  border: solid var(--on-accent); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
/* While picking, a row is the tick and the name: the row's own buttons step aside. */
.room-side:has(#pen-box[data-pick="1"]) .people .acts { display: none; }

/* «همه بتونن بنویسن»: on is the brand colour, not a warning. */
.tool.pen-all[data-on="1"] { background: var(--accent-soft); }
.tool.pen-all[data-on="1"] .tool-ic { background: var(--accent); color: var(--on-accent); }
.tool.pen-all[data-on="1"] small { color: var(--accent-ink); }
.tool.pen-all[data-on="1"] .switch[aria-pressed="true"]::before { background: var(--accent); }
#clear-students:disabled { opacity: .45; cursor: default; }

/* The writer's name beside their ink, while they write. */
.pen-name {
  position: absolute; z-index: 2;
  transform: translate(10px, -130%);
  max-width: 40%; padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--stage-chip-strong); color: var(--stage-ink);
  font-size: var(--fs-micro); font-weight: 700; line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.pen-name[data-on="1"] { opacity: 1; transition: opacity .08s; }

/* A student's toast: «معلم اجازه داد روی تخته بنویسی». */
.pen-toast {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2);
  font-size: var(--fs-meta); font-weight: 700;
}
.pen-toast[hidden] { display: none; }
.pen-toast .ic { width: 20px; height: 20px; color: var(--muted); }
.pen-toast[data-on="1"] { box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.pen-toast[data-on="1"] .ic { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .pen-name { transition: none; }
}