/* ── The recording copyright undertaking (StudentRecordingConsent.vue) ──────

   The card a student reads and signs before a meeting's recording link is
   revealed. It appears in exactly two places and never in both at once: the
   after-the-meeting card on /sessions/:id, and the recording tab on
   /materials.

   WHAT THIS FILE DELIBERATELY DOES NOT STYLE:

   - The signature pad. `.signature-pad`, `.signature-pad__canvas`,
     `.signature-pad__hint`, `.signature-pad__clear` and the
     `.signature-pad--error` modifier all belong to contract-sign-view.css,
     which is in this same public bundle. The contract page and the enrolment
     page draw the identical box from those rules, so a redefinition here would
     silently restyle two signing surfaces that have nothing to do with the
     student area.
   - The field kit. `.stu-form`, `.stu-field`, `.stu-field__label`,
     `.stu-field__input`, `.stu-form__error` and `.stu-form__submit` are
     student.css's, and the account and login forms use the same ones. Only the
     error OUTLINE on an input is added below, because student.css has no
     `--error` modifier for that class and inventing one there would change
     every student form at once.
   - The card shell. `.stu-card` supplies the glass panel and `.stu-section-title`
     the heading; this file adjusts spacing around them and nothing else.

   Linked after student-documents.css in index.html, i.e. after every student
   sheet whose vocabulary it borrows and before contract-sign-view.css, whose
   signature rules must keep winning. */

.stu-consent__title {
    margin-bottom: var(--space-sm);
}

.stu-consent__intro {
    margin: 0 0 var(--space-lg);
    max-inline-size: 66ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* The undertaking itself.

   This is legal Hebrew and a reader has to be able to get through it, so it is
   set at reading size on a measured column rather than as the small grey block
   the contract page uses for its terms - and it is NOT put in a scroll box.
   A max-height with an inner scrollbar hides how much is left, and a clause
   somebody never scrolled to is a clause they did not read. */

.stu-consent__clauses {
    margin: 0 0 var(--space-xl);
    /* RTL: the marker column sits on the right, so the indent is padding-right. */
    padding: 0;
    padding-right: 26px;
    max-inline-size: 68ch;
    list-style: decimal;
}

.stu-consent__clause {
    margin-bottom: var(--space-md);
    font-size: 15px;
    line-height: 1.85;
    color: var(--text-color);
}

.stu-consent__clause::marker {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.stu-consent__clause:last-child {
    margin-bottom: 0;
}

/* THE ACCESS NOTE. It is one of the clauses rather than a second sentence
   beside the button (see the component's header), so it is drawn a shade
   louder instead of being repeated: a flat tint of the primary and a solid
   2px rule down its leading edge.

   Solid `--primary-color`, never the brand gradient: the ramp reads as the
   brand only on a hairline, and this is a filled block. */

.stu-consent__clause--access {
    padding: 12px 14px;
    /* Pull the wash back under the number so the block does not look inset. */
    margin-right: -14px;
    border-radius: var(--radius-md);
    border-right: 2px solid var(--primary-color);
    background: var(--primary-light);
}

.stu-consent__form {
    max-inline-size: 46ch;
}

/* student.css has no error modifier for `.stu-field__input`, and adding one
   there would touch the account and login forms too. */

.stu-consent__input--error,
.stu-consent__input--error:focus {
    border-color: var(--alert-color);
}

.stu-consent__sign-hint {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.stu-consent__server {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(190, 18, 60, 0.28);
    background: rgba(190, 18, 60, 0.06);
    font-size: 14px;
    line-height: 1.6;
    color: var(--alert-color);
}

.stu-consent__server svg {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

/* NO TABLET OVERRIDE OF THE 68ch READING CAP, deliberately.

   Lifting the cap under `max-width: 1024px` looks harmless, because a phone is
   narrower than 68ch anyway. But that rule also covers the 768px to 1024px band,
   where the card really is wider than the cap, and measuring at 1024 gave a
   934px line: roughly 117 Hebrew characters, well past the width anybody reads a
   paragraph of legal text at. `max-inline-size` is a MAXIMUM and never forces
   width onto a narrower container, so the cap is already right at every width
   and needs no breakpoint of its own. */

@media (max-width: 767px) {
    /* The legal text keeps its reading size on a phone - shrinking it is the
       one change that would make the undertaking harder to read on the device
       most of these signatures are given on. Only the indent and the accent
       block's negative pull come in, because a 390px column has no width to
       spare. */
    .stu-consent__clauses {
        padding-right: 20px;
    }

    .stu-consent__clause--access {
        margin-right: -10px;
        padding: 10px;
    }

    .stu-consent__form {
        max-inline-size: none;
    }
}