/* =========================================================
   ACE Course Codes: the Add a course box
   ---------------------------------------------------------
   On the Dashboard the box is this file's (.acc--dash). On the
   registration form page it is drawn with the Registration
   plugin's own classes and only the few lines at the foot of
   this file are added.

   Colours come from the theme's variables where it has them,
   with the values it uses today as the fallback. The filled
   button is a shade deeper than the theme's accent so that
   white text on it reads at 5.3:1; the field's edge is light
   enough to be seen against the panel (3:1).
   ========================================================= */

.acc {
  --acc-surface: var(--color-bg-alt, #30302e);
  --acc-line: rgba(255, 255, 255, .08);
  --acc-edge: rgba(255, 255, 255, .4);
  --acc-text: var(--color-text, #e8e6dc);
  --acc-heading: var(--color-heading, #f5f4ef);
  --acc-muted: var(--color-text-muted, #a39e93);
  --acc-fill: #007870;
  --acc-fill-hover: #00655e;
  --acc-teal: #61b6b1;
}

.acc--dash {
  container: acc / inline-size;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--acc-surface);
  border: 1px solid var(--acc-line);
  border-radius: 10px;
  color: var(--acc-text);
  /* After a code is sent the page comes back to this box. Leave room above
     it for the section's heading. */
  scroll-margin-top: 64px;
}

.acc--dash .acc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

@container acc (min-width: 680px) {
  .acc--dash .acc-body {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
    align-items: end;
    gap: 32px;
  }
}

.acc--dash .acc-lead {
  margin: 0;
  max-width: 62ch;
  align-self: center;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--acc-text);
}
.acc--dash .acc-lead b,
.acc--dash .acc-note b { color: var(--acc-heading); font-weight: 600; }

.acc--dash .acc-form { margin: 0; }

.acc--dash .acc-label {
  display: block;
  margin: 0 0 6px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--acc-muted);
}

.acc--dash .acc-field { display: flex; gap: 8px; }

.acc--dash .acc-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 44px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 13px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--acc-edge);
  border-radius: 8px;
  color: var(--acc-heading);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.acc--dash .acc-input::placeholder {
  color: var(--acc-muted);
  font-weight: 400;
  opacity: 1;
}
.acc--dash .acc-input[aria-invalid="true"] { border-color: #ee9a9a; }

.acc--dash .acc-btn {
  flex: none;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--acc-fill);
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.acc--dash .acc-btn:hover { background: var(--acc-fill-hover); }

.acc--dash .acc-input:focus-visible,
.acc--dash .acc-btn:focus-visible,
.acc.acc--dash .acc-note a.acc-open:focus-visible,
.acc-page .acc-fine a:focus-visible {
  outline: 2px solid var(--acc-teal, #61b6b1);
  outline-offset: 2px;
}

/* The confirmation takes the keyboard when the page comes back. It is not
   something to act on: after a keyboard submit it wears this plugin's ring,
   so the next Tab is seen to start from it, and after a click none. On the
   registration form page it is a heading, which is left without one. */
.acc--dash .acc-note[data-acc-focus]:focus-visible {
  outline: 2px solid var(--acc-teal, #61b6b1);
  outline-offset: 2px;
}
.acc [data-acc-focus]:focus:not(:focus-visible),
.acc-page h3[data-acc-focus]:focus { outline: 0; }

/* Sent, and waiting for the page to change. The second selector is the
   Registration plugin's own forms, which the script watches over as well. */
.acc-form.is-busy .acc-btn,
.rc-form.is-busy [data-acc-pressed] { opacity: .75; cursor: progress; }

/* ---------------- What happened ---------------- */

.acc--dash .acc-note {
  margin: 0 0 14px;
  padding: 10px 13px;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.5;
}
.acc--dash .acc-note:last-child { margin-bottom: 0; }

/* Tick, sentence, link: side by side where there is room; where there is
   not, the link goes under the sentence and the tick stays beside it. */
.acc--dash .acc-note.is-ok {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  background: rgba(111, 168, 125, .1);
  border: 1px solid rgba(111, 168, 125, .36);
  color: var(--acc-text);
}
.acc--dash .acc-note.is-ok svg { margin-top: 3px; color: #86c796; }

.acc--dash .acc-note.is-error {
  background: rgba(224, 75, 75, .1);
  border: 1px solid rgba(224, 75, 75, .4);
  color: #f5bcbc;
}

/* The theme colours every link in the app's content area with a selector
   of three classes and an element; this one has to outweigh it. */
.acc.acc--dash .acc-note a.acc-open {
  color: var(--acc-teal);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@container acc (max-width: 560px) {
  .acc--dash .acc-note.is-ok { grid-template-columns: auto minmax(0, 1fr); }
  .acc.acc--dash .acc-note a.acc-open { grid-column: 2; justify-self: start; }
}

@container acc (max-width: 420px) {
  .acc--dash .acc-field { flex-direction: column; }
  .acc--dash .acc-btn { width: 100%; }
}

/* ---------------- On the registration form page ---------------- */

/* The site's header stays at the top of the window, 85px tall. When the page
   comes back to this box, what it says must land below that, not under it. */
.acc-page { scroll-margin-top: 109px; }

.acc-page .acc-fine { text-align: center; }
.acc-page .acc-fine a {
  color: #61b6b1;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Two links after a code is accepted: side by side, or one under the other
   where they do not fit, never broken in the middle. */
.acc-page .rc-card-success .acc-fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}
.acc-page .rc-card-success .acc-fine a { white-space: nowrap; }
.acc-page .rc-card-head b,
.acc-page .rc-card-success p b { color: var(--rc-heading, #f5f4ef); font-weight: 600; }
.acc-page .rc-card-success .acc-fine { margin: 14px 0 0; }