/* jarchi settings (settings.js): «تنظیمات من» and «تنظیمات کلاس» — a sheet on a phone (sheet.js), a side panel beside
   the lesson on a laptop; the prep room's «این کلاس» card. Rows: an icon, the name and its one sentence, one control.
   Tokens only (style.css); type in rem. */

/* ---------- the person's display choices on <html> ---------- */
html[data-text="115"] { font-size: 115%; }
html[data-text="130"] { font-size: 130%; }
/* «حرکت کمتر» is the device's reduced motion (C3, style.css's :root[data-motion="reduce"]): nothing travels
   (--move: 0), fades stay short so a change is still seen. Here only what the tokens can't reach: a loop plays
   once and stops, and scrolling jumps instead of gliding. */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-iteration-count: 1 !important; scroll-behavior: auto !important;
}
/* Left-handed: the bar's groups swap ends, so a student's one button and the tools sit under the left thumb. */
html[data-hand="left"] .room .cbar { flex-direction: row-reverse; }
html[data-hand="left"] .room .cbar-group { flex-direction: row-reverse; }

/* ---------- the panel ---------- */
.set-panel {
  display: flex; flex-direction: column;
  background: var(--surface-raised); color: var(--ink);
  min-height: 0;
}
.set-panel .set-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
.set-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 8px;
}
.set-head h2 { flex: 1 1 auto; margin: 0; font-size: var(--fs-heading); font-weight: var(--fw-x); }
.set-x { flex: none; }
.lay-sheet .set-x { display: none; }

/* A laptop: beside the lesson, where the people and the chat sit, between the top bar and the bar. */
.set-panel.set-side {
  position: fixed; z-index: 24;
  top: calc(var(--rbar-h, 56px) + 8px); bottom: calc(var(--cbar-h, 64px) + 8px);
  inset-inline-end: 8px;
  width: min(400px, 40vw);
  border: 1px solid var(--line); border-radius: var(--r-pop);
  box-shadow: var(--shadow-2);
  animation: kit-pop var(--t-med) var(--ease);
}
/* Outside the class (the prep room) or a narrow screen without sheet.js: a card at the bottom / in the middle. */
.set-panel.set-bottom {
  position: fixed; z-index: 30;
  inset-inline: 0; bottom: 0; max-height: 82dvh;
  border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-3);
  animation: kit-pop var(--t-med) var(--ease);
}
body:not(.in-room) > .set-panel.set-side, .prep ~ .set-panel.set-side { top: 16px; bottom: 16px; }

/* «کلاس | من» */
.set-tabs { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-sunken); }
.set-tab {
  appearance: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 4px 14px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-b); cursor: pointer;
}
.set-tab .ic { width: 18px; height: 18px; }
.set-tab[aria-selected="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-1); }

/* ---------- sections and rows ---------- */
.set-sec { padding: 4px 0 6px; }
.set-sec + .set-sec { border-top: 1px solid var(--line); }
.set-sec-h {
  display: flex; align-items: center; gap: 8px; margin: 10px 4px 2px;
  color: var(--muted); font-size: var(--fs-meta); font-weight: var(--fw-b);
}
.set-sec-h .ic { width: 18px; height: 18px; }
.set-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 6px 4px;
}
.set-row + .set-row { border-top: 1px solid var(--line); }
.set-row-wide { flex-wrap: wrap; }
.set-row-wide > .set-txt { flex: 1 1 0; }
.set-row-wide > .set-seg { flex: 1 1 100%; margin-inline-start: 48px; }
.set-ic {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-sunken); color: var(--icon);
}
.set-ic .ic { width: 20px; height: 20px; }
.set-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.5; }
.set-txt b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-label); font-weight: var(--fw-b); }
.set-txt small { color: var(--muted); font-size: var(--fs-meta); }
.set-dim .set-txt, .set-dim .set-ic { opacity: .55; }
.set-row-act .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.set-row-act .btn .ic { width: 16px; height: 16px; }

/* A few choices side by side (an icon each for the theme). */
.set-seg { flex: none; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--bg-sunken); }
.set-seg > button {
  appearance: none; flex: 1 1 auto;
  min-height: 38px; min-width: 44px; padding: 4px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-m); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.set-seg > button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); font-weight: var(--fw-b); box-shadow: var(--shadow-1); }
.set-seg > button:disabled { cursor: default; opacity: .55; }
.set-seg > button[aria-pressed="true"]:disabled { opacity: .8; }
.set-seg-ic > button { padding: 4px 8px; }
.set-seg-ic .ic { width: 20px; height: 20px; }
.set-select {
  flex: none; max-width: 52%;
  min-height: var(--tap); padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-meta);
}
.set-select:disabled { opacity: .55; }
.set-range { flex: none; width: min(150px, 38%); accent-color: var(--accent); min-height: var(--tap); }
.set-panel .switch:disabled, .set-prep .switch:disabled { cursor: default; }

/* «مدرسه بسته» */
.set-lock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--bg-sunken); color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-b);
}
.set-lock .ic, .set-lock-dot .ic { width: 14px; height: 14px; }
.set-lock-dot { flex: none; display: inline-grid; place-items: center; color: var(--muted); }

/* ---------- the class: presets, drift, folds ---------- */
.set-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 6px; }
.set-preset {
  appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-height: 92px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink); font: inherit; text-align: center; cursor: pointer;
}
.set-preset .ic { width: 24px; height: 24px; color: var(--icon); }
.set-preset b { font-size: var(--fs-label); font-weight: var(--fw-b); }
.set-preset small { color: var(--muted); font-size: var(--fs-micro); line-height: 1.5; }
.set-preset[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.set-preset[aria-pressed="true"] .ic { color: var(--accent-ink); }
.set-preset:disabled { cursor: default; opacity: .6; }
.set-preset[aria-pressed="true"]:disabled { opacity: .85; }
.set-presets-c .set-preset { min-height: 68px; }
@media (hover: hover) { .set-preset:not(:disabled):not([aria-pressed="true"]):hover, .set-seg > button:not(:disabled):not([aria-pressed="true"]):hover { background: var(--hover); } }

.set-drift { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 2px 6px; color: var(--muted); font-size: var(--fs-meta); }
.set-drift-n { padding: 1px 8px; border-radius: var(--r-pill); background: var(--hand-soft); color: var(--hand-ink); font-weight: var(--fw-b); }
.set-link {
  appearance: none; border: 0; background: transparent; padding: 4px 8px; min-height: var(--tap); min-width: var(--tap); /* a finger-size target (qa-play, 360 px) */
  color: var(--accent-ink); font: inherit; font-size: var(--fs-meta); font-weight: var(--fw-b); cursor: pointer; border-radius: var(--r-sm);
}
.set-link:hover { text-decoration: underline; }
.set-school { display: flex; align-items: center; gap: 6px; margin: 2px 2px 8px; color: var(--muted); font-size: var(--fs-meta); }
.set-school .ic { width: 16px; height: 16px; flex: none; }

.set-group { border-top: 1px solid var(--line); }
.set-fold {
  appearance: none; display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 60px; padding: 6px 4px; border: 0; background: transparent; color: var(--ink);
  font: inherit; text-align: start; cursor: pointer; border-radius: 10px;
}
@media (hover: hover) { .set-fold:hover { background: var(--hover); } }
.set-fold small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-chev { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform var(--t-fast) var(--ease); }
.set-fold[aria-expanded="true"] .set-chev { transform: rotate(180deg); }
.set-fold-body { padding: 0 0 6px; }
.set-fold-body .set-row { padding-inline-start: 12px; }

/* «تاریخچه» */
.set-log { list-style: none; margin: 0; padding: 0 4px 8px; }
.set-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 0; }
.set-log li + li { border-top: 1px solid var(--line); }
.set-log-who { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); }
.set-log-who small { padding: 0 6px; border-radius: var(--r-pill); background: var(--bg-sunken); color: var(--muted); font-size: var(--fs-micro); }
.set-log-at { grid-row: 1; grid-column: 2; color: var(--muted); font-size: var(--fs-micro); justify-self: end; align-self: center; }
.set-log-what { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-meta); }
.set-log-ch { color: var(--muted); }
.set-log-new { color: var(--accent-ink); font-weight: var(--fw-b); }
.set-empty, .set-wait { color: var(--muted); font-size: var(--fs-meta); margin: 8px 4px; }

.set-said { min-height: 0; margin: 6px 4px; color: var(--hand-ink); font-size: var(--fs-meta); }
.set-said:empty { display: none; }
.set-foot { display: flex; align-items: center; gap: 6px; margin: 10px 4px 4px; color: var(--muted); font-size: var(--fs-micro); }
.set-foot .ic { width: 14px; height: 14px; flex: none; }
.set-panel[aria-busy="true"], .set-pane[aria-busy="true"] { cursor: progress; }

/* ---------- «بیشتر» › تنظیمات ---------- */
.more-set { flex: none; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }

/* ---------- the prep room ---------- */
.set-prep-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.set-prep-h h2 { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; margin: 0; }
.set-prep .set-row { padding-inline: 0; }
.set-mine-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.set-mine-btn .ic { width: 18px; height: 18px; }

@media (max-width: 599px) {
  .set-presets { gap: 6px; }
  .set-preset { min-height: 84px; padding: 8px 4px; }
  .set-preset small { display: none; }
  .set-row-wide > .set-seg { margin-inline-start: 0; }
  /* A choice from a list goes under its words (the words keep their width, the select shows its whole name),
     lined up with the words past the icon. */
  .set-row:has(> .set-select) { flex-wrap: wrap; row-gap: 6px; }
  .set-row:has(> .set-select) > .set-txt { flex: 1 1 0; }
  .set-row > .set-select { flex: 1 1 100%; max-width: none; margin-inline-start: 48px; }
}

/* A laptop teacher's bar: «تنظیمات» (sliders) beside «بیشتر»; a phone keeps it under «بیشتر». */
.cb-set { display: none; }
@media (min-width: 960px) { .cb-set { display: inline-flex; } }
.room[data-settings="1"] .cb-set { color: var(--accent-ink); background: var(--accent-soft); }
/* A class tool the school locked (under «بیشتر»). */
.set-locked .tool-ic, .set-locked > .ic, .set-locked .tool-txt small { opacity: .55; }
.set-locked .set-lock { margin-inline-start: 6px; }
/* sounds.js's own controls hosted in «تنظیمات من» › صداها و لرزش. */
.set-snd .snd-box { overflow: visible; padding: 2px 4px 4px; }