/* „Trimite o părere”: the window opened by comun/parere.js, on the page (pricep.css) and in the exercises
   (antrenor.css). It styles itself from the tokens both sheets define (--paper, --sheet, --ink, --ink2, --rubric,
   --frame), with the exercises' own (--frame2, --btn-bg, --btn-fg, --acc-t, --sans, --serif) where they exist.
   The send button is the exercises' button; on the page it is the teacher's red with the paper's colour on it,
   which holds in both schemes (dark red and paper by day, salmon and dark paper by night). */
dialog.parere {
  --p-bg: var(--btn-bg, var(--rubric)); --p-fg: var(--btn-fg, var(--paper)); --p-inel: var(--acc-t, var(--rubric));
  --p-rama: var(--frame2, var(--frame));
  width: min(100% - 24px, 36rem); max-height: min(92vh, 52rem); padding: 0; overflow: auto;
  border: 1px solid var(--p-rama); background: var(--sheet); color: var(--ink);
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5);
  font-family: var(--sans, inherit); font-size: 1.0625rem; line-height: 1.45;
}
/* phones: the window stops short of the servos buttons on the right, as the settings do */
@media (max-width: 699px) { dialog.parere { width: calc(100% - 64px - 12px); max-width: none; margin: auto auto auto 12px; } }
dialog.parere::backdrop { background: rgba(25, 20, 15, .45); }
.parere-cap {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .45rem .5rem .45rem 1rem;
  border-bottom: 1px solid var(--frame); position: sticky; top: 0; background: var(--sheet); z-index: 1;
}
.parere-cap h2 { margin: 0; font-family: var(--serif, inherit); font-weight: 500; font-size: 1.375rem; line-height: 1.2; }
.parere-x { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink2); cursor: pointer; flex: none; }
.parere-x:hover { color: var(--ink); background: var(--paper); }
.parere-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.parere-f, .parere-gata { display: grid; gap: 1.1rem; padding: 1rem; }
.parere-tip { border: 0; margin: 0; padding: 0; min-width: 0; }
.parere-tip legend { padding: 0; margin-bottom: .45rem; font-weight: 500; }
.parere-tip legend .opt { font-weight: 400; font-style: italic; color: var(--ink2); }
/* from a question's flag: the question, so nobody has to say which one; three lines at most */
.parere-q { padding: .05rem 0 .1rem .8rem; border-left: 2px solid var(--p-rama); }
.parere-q p { margin: 0; }
.parere-q:focus { outline: none; }
.parere-q .k { font-size: .9375rem; color: var(--ink2); }
.parere-q .t { margin-top: .15rem; font-family: var(--serif, inherit); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: break-word; }
.parere-f.cu-q textarea { min-height: 3.6rem; }
/* the send row stays at the bottom of the window while the rest scrolls (a phone shows the question, the reasons
   and „Trimite” at once); the hint over it shows there too */
.parere-f { padding-bottom: 0; }
.parere-jos { position: sticky; bottom: 0; z-index: 1; display: grid; gap: .5rem; margin: 0 -1rem; padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); background: var(--sheet); border-top: 1px solid var(--frame); }
@media (max-width: 699px) {
  .parere-q .t { -webkit-line-clamp: 2; line-clamp: 2; }
  .parere-f.cu-q { gap: .9rem; }
  .parere-f.cu-q .parere-tipuri { gap: .35rem; }
}
.parere-tipuri { display: flex; flex-wrap: wrap; gap: .4rem; }
.parere-tipuri label { position: relative; display: inline-flex; }
.parere-tipuri input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.parere-tipuri span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem; cursor: pointer;
  border: 1px solid var(--p-rama); border-radius: 3px; background: var(--paper); color: var(--ink2);
}
.parere-tipuri input:checked + span { color: var(--ink); border-color: var(--ink2); box-shadow: inset 0 0 0 1px var(--ink2); background: var(--sheet); }
/* the reasons on a question's flag can be several: a small box on each, ticked in place, so nothing moves */
.parere-tipuri input[type="checkbox"] + span { position: relative; padding-left: 2.2rem; }
.parere-tipuri input[type="checkbox"] + span::before { content: ""; position: absolute; left: .8rem; top: 50%; width: 15px; height: 15px; margin-top: -8.5px; border: 1.5px solid currentColor; border-radius: 2px; box-sizing: content-box; }
.parere-tipuri input[type="checkbox"]:checked + span::before { background: var(--ink); border-color: var(--ink); }
.parere-tipuri input[type="checkbox"]:checked + span::after { content: ""; position: absolute; left: calc(.8rem + 5.5px); top: 50%; width: 4px; height: 8px; margin-top: -6.5px; border: solid var(--sheet); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.parere-tipuri input:focus-visible + span { outline: 2px solid var(--p-inel); outline-offset: 2px; }
.parere-camp { display: grid; gap: .35rem; }
.parere-camp .et { font-weight: 500; }
.parere-camp .opt { font-weight: 400; font-style: italic; color: var(--ink2); }
.parere-camp textarea, .parere-camp input {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--p-rama); border-radius: 3px; padding: .6rem .7rem; min-height: 44px;
}
.parere-camp textarea { resize: vertical; min-height: 7.5rem; }
.parere-camp textarea:focus-visible, .parere-camp input:focus-visible { outline: 2px solid var(--p-inel); outline-offset: 1px; }
.parere-capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.parere-ce { color: var(--ink2); font-size: .9375rem; }
.parere-ce summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.parere-ce summary::-webkit-details-marker { display: none; }
.parere-ce summary::before { content: "+"; display: inline-block; width: 1.1em; color: var(--rubric); font-weight: 600; } /* the page's fold: a plus that turns into a minus */
.parere-ce[open] summary::before { content: "\2212"; }
.parere-ce ul { margin: 0 0 .3rem; padding-left: 1.2rem; }
.parere-ce p { margin: .2rem 0 0; }
.parere-stare { margin: 0; min-height: 1.45em; color: var(--rubric); }
.parere-stare:empty { display: none; }
.parere-fin { display: flex; flex-wrap: wrap; gap: .6rem; }
.parere-trimite, .parere-renunta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem;
  font: inherit; font-weight: 500; border-radius: 3px; cursor: pointer;
}
.parere-trimite { color: var(--p-fg); background: var(--p-bg); border: 1px solid var(--p-bg); }
.parere-trimite:hover { background: color-mix(in srgb, var(--p-bg) 88%, #000); }
.parere-trimite:disabled { opacity: .7; cursor: progress; }
.parere-renunta { color: var(--ink); background: none; border: 1px solid var(--p-rama); }
.parere-renunta:hover { background: var(--paper); }
.parere-trimite:focus-visible, .parere-renunta:focus-visible, .parere-x:focus-visible, .parere-ce summary:focus-visible { outline: 2px solid var(--p-inel); outline-offset: 2px; }
.parere-gata p { margin: 0; }
.parere-gata .mare { font-family: var(--serif, inherit); font-size: 1.375rem; }
@media (forced-colors: active) { .parere-tipuri input:checked + span { outline: 2px solid CanvasText; } }