/* ExamStudyAid: one text field, sitewide (owner, 2026-10-23, of the login page's outlined fields, the day the buttons went
   tinted: "do the same with the text feields make it the same style").

   THE RULE, the buttons' (nb-buttons.css) in a field's form: a field is a soft wash of the ink (6%), no edge, a rounded
   rectangle; under the pointer the wash deepens a little; in use it takes the pen's blue as a crisp two-pixel ring, never a
   glow; a field with a mistake takes the error's red ring over a red wash. Its icons, its placeholder, its words and its
   size stay as each page drew them.

   NOT FIELDS, SO NOT HERE: the tutors' boxes (the dashboard's composer, the notes sheet's "Ask a question"), which are
   places to write rather than form fields, a question's answer box (already a wash, the answer marker's own design), the
   tools' table cells and graph inputs, and the dashboard's subject picker inside its composer.

   Loaded by the three base templates beside nb-buttons.css, after every page's own sheets. Where a page's rule is stronger
   (the onboarding wizard, the Premium dialog by night), the rule here restates that page's own context. Audited by
   scratchpad btn_audit.py with field_scan.js on 2026-10-23. Tokens only, both themes. */

:root {
  --nb-field: color-mix(in srgb, var(--nb-ink, #111C34) 6%, transparent);
  --nb-field-on: color-mix(in srgb, var(--nb-ink, #111C34) 9%, transparent);
  --nb-field-bad: color-mix(in srgb, var(--nb-error, #9B3028) 7%, transparent);
}

/* ── At rest: the wash, no edge ── */
html body :is(
  .auth-page.auth-page--login .lg-control,
  .ra-control,
  .asu-page .asu-control input,
  .prf-page .prf-field input,
  .prc-page .prc-input,
  .rpk-page .rpk-input,
  .aps-page .aps-input,
  .obn-form .obn-input,
  .obd-select,
  .nb-password-page .auth-field input,
  .auth-field input,
  .auth-field select,
  .nb-input,
  .nb-select,
  .nb-textarea,
  .nb-gate .nb-gate-field .nb-input,
  .nb-min-ctl,
  .pv-field input,
  .pv-field select,
  .pv-select--sm select,
  .pp-search-field input
),
html:is(.theme-dark, .theme-light) body .ob-body :is(.auth-field input, .ob-select, .ob-number, .ob-field .ob-date),
html:not([class~="theme-light"]) body .nb-gate .nb-gate-field .nb-input {
  border-color: transparent;
  background-color: var(--nb-field);
  box-shadow: none;
}
@media (hover: hover) {
  html body :is(
    .auth-page.auth-page--login .lg-control,
    .ra-control,
    .asu-page .asu-control input,
    .prf-page .prf-field input,
    .prc-page .prc-input,
    .rpk-page .rpk-input,
    .aps-page .aps-input,
    .obn-form .obn-input,
    .obd-select,
    .nb-password-page .auth-field input,
    .auth-field input,
    .auth-field select,
    .nb-input,
    .nb-select,
    .nb-textarea,
    .nb-gate .nb-gate-field .nb-input,
    .nb-min-ctl,
    .pv-field input,
    .pv-field select,
    .pv-select--sm select,
    .pp-search-field input
  ):hover:not(:focus, :focus-within, :disabled),
  html:is(.theme-dark, .theme-light) body .ob-body :is(.auth-field input, .ob-select, .ob-number, .ob-field .ob-date):hover:not(:focus) {
    border-color: transparent;
    background-color: var(--nb-field-on);
  }
}

/* ── In use: the pen's blue ring, crisp ── */
html body :is(.auth-page.auth-page--login .lg-control, .ra-control):focus-within,
html body :is(
  .asu-page .asu-control input,
  .prf-page .prf-field input,
  .prc-page .prc-input,
  .rpk-page .rpk-input,
  .aps-page .aps-input,
  .obn-form .obn-input,
  .obd-select,
  .nb-password-page .auth-field input,
  .auth-field input,
  .auth-field select,
  .nb-input,
  .nb-select,
  .nb-textarea,
  .nb-gate .nb-gate-field .nb-input,
  .nb-min-ctl,
  .pv-field input,
  .pv-field select,
  .pv-select--sm select,
  .pp-search-field input
):is(:focus, :focus-visible),
html:is(.theme-dark, .theme-light) body .ob-body :is(.auth-field input, .ob-select, .ob-number, .ob-field .ob-date):focus,
html:not([class~="theme-light"]) body .nb-gate .nb-gate-field .nb-input:focus {
  border-color: var(--nb-blue, #175BE8);
  background-color: var(--nb-field);
  box-shadow: inset 0 0 0 1px var(--nb-blue, #175BE8);
  outline: none;
}

/* ── A mistake: the error's red ring over a red wash, as each page already marks one ── */
html body :is(
  .auth-page.auth-page--login .auth-field:has(.auth-error) .lg-control,
  .auth-page.auth-page--login .auth-card:has(.auth-error--block) .lg-control:not(:focus-within),
  .ra-form:has(.ra-error) .ra-control:not(:focus-within),
  .obn-field.is-invalid .obn-input,
  .aps-field.is-invalid .aps-input,
  .prc-field.is-invalid .prc-input,
  .rpk-field.is-invalid .rpk-input
) {
  border-color: var(--nb-error, #9B3028);
  background-color: var(--nb-field-bad);
}
/* the profile and the dashboard mark a field that needs another look in amber, "needs you", not red (DESIGN.md) */
html body .nb-min-ctl[data-ui-invalid="true"] {
  border-color: var(--nb-m-amber, #9A5B00);
  background-color: color-mix(in srgb, var(--nb-m-amber, #9A5B00) 8%, transparent);
}

/* ── No scrollbar in any box you write in (owner, 2026-10-25, of the dashboard composer showing a scrollbar beside one line:
   "I dont want any scrollbars in any text field globally") ──
   Every field, the places to write named at the top included: the tutors' boxes, a question's answer box, the tools' cells.
   A box still scrolls (wheel, keys, touch and the caret all move it); it only draws no bar. */
html body :is(textarea, input, [contenteditable]:not([contenteditable="false"])) {
  scrollbar-width: none;
}
html body :is(textarea, input, [contenteditable]:not([contenteditable="false"]))::-webkit-scrollbar {
  display: none;
}