/* ==========================================================================
   TutorSuite — additions for the Laravel-rendered public pages
   (order form, sign-in, sign-up). Builds only on site.css tokens, so it follows
   the same palette, dark mode and spacing as the static pages.
   ========================================================================== */

.icon { flex: none; vertical-align: middle; }

.callout--danger {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger-text) 30%, transparent);
  color: var(--danger-text);
}
.callout--danger p, .callout--danger li { color: inherit; }
.form-flash { margin-bottom: var(--sp-4); }
.form-flash p { margin: 0; }
.form-flash p + p { margin-top: var(--sp-1); }

.signed-in-as {
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--brand-soft);
  font-size: var(--step--1);
}

/* File picker: a large, thumb-friendly target that also accepts drops. */
.dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: var(--sp-5) var(--sp-4);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--brand); background: var(--brand-soft); color: var(--text); }
.dropzone:focus-within { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.dropzone__text { font-size: var(--step-0); color: var(--text); }
.dropzone__text strong { color: var(--brand-text); }
.dropzone__hint { font-size: var(--step--1); }
.dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.dropzone__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: var(--sp-1); }
.dropzone__list:empty { display: none; }
.dropzone__list li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--step--1);
  min-width: 0;
}
.dropzone__list li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone__list li.is-too-big { color: var(--danger-text); background: var(--danger-soft); }

/* One-time code */
.code-input {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.code-form__resend { margin-top: var(--sp-3); }
.code-form__remember { margin-bottom: var(--sp-4); }
.auth__hint { display: block; margin-top: var(--sp-3); text-align: center; }

/* "What happens next" on the order-received page */
.received-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.received-steps li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-muted); }
.received-steps li > span {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--border-strong); font-weight: 800; font-size: var(--step--1);
}
.received-steps b { display: block; color: var(--text); }
.received-steps small { display: block; font-size: var(--step--1); }
.received-steps .is-done > span { background: var(--success); border-color: var(--success); color: var(--on-success); }
.received-steps .is-current > span { border-color: var(--brand); color: var(--brand-text); }

.btn[disabled] { opacity: .7; cursor: progress; }

/* ==========================================================================
   Sign-in, sign-up and code pages, student and staff (.auth--glass): liquid
   glass matching the panels (requested 30 Oct 2026). Only the card area is
   dressed; the site header, footer and words are untouched. The buttons are
   the site-wide physical keys (site.css).
   ========================================================================== */
.auth--glass {
  --spring-soft: cubic-bezier(.3, 1.55, .55, 1);
  overflow: clip;
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(96, 118, 190, .3), transparent 70%),
    radial-gradient(60% 45% at 0% 30%, rgba(143, 174, 226, .4), transparent 70%),
    radial-gradient(55% 40% at 100% 80%, rgba(178, 207, 239, .5), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(18, 163, 102, .12), transparent 70%),
    var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .auth--glass {
    background:
      radial-gradient(70% 50% at 100% 0%, rgba(96, 118, 190, .32), transparent 70%),
      radial-gradient(60% 45% at 0% 30%, rgba(57, 74, 148, .42), transparent 70%),
      radial-gradient(55% 40% at 100% 80%, rgba(143, 174, 226, .12), transparent 70%),
      radial-gradient(60% 40% at 0% 100%, rgba(18, 163, 102, .12), transparent 70%),
      var(--bg);
  }
}
:root[data-theme='dark'] .auth--glass {
  background:
    radial-gradient(70% 50% at 100% 0%, rgba(96, 118, 190, .32), transparent 70%),
    radial-gradient(60% 45% at 0% 30%, rgba(57, 74, 148, .42), transparent 70%),
    radial-gradient(55% 40% at 100% 80%, rgba(143, 174, 226, .12), transparent 70%),
    radial-gradient(60% 40% at 0% 100%, rgba(18, 163, 102, .12), transparent 70%),
    var(--bg);
}

.auth--glass .auth__panel { position: relative; isolation: isolate; }
/* The card: frosted glass with a lit top-left edge, a darker far edge, light
   caught in its thickness and a soft highlight across the top. */
.auth--glass .auth__card {
  position: relative; z-index: 1;
  background:
    radial-gradient(120% 55% at 30% -10%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 55%),
    color-mix(in srgb, var(--surface) 74%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
  border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .35), inset 0 0 30px rgba(255, 255, 255, .35), var(--e4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .auth--glass .auth__card {
    background: radial-gradient(120% 55% at 30% -10%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--surface) 74%, transparent);
    border-color: rgba(178, 207, 239, .16);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), inset -1px -1px 0 rgba(255, 255, 255, .05), inset 0 0 30px rgba(143, 174, 226, .08), var(--e4);
  }
}
:root[data-theme='dark'] .auth--glass .auth__card {
  background: radial-gradient(120% 55% at 30% -10%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--surface) 74%, transparent);
  border-color: rgba(178, 207, 239, .16);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), inset -1px -1px 0 rgba(255, 255, 255, .05), inset 0 0 30px rgba(143, 174, 226, .08), var(--e4);
}

/* Reassurance icons become small jewels. */
.auth--glass .auth__point-icon {
  color: #fff; border: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(150deg, #8EA2F0 0%, #4D5FB8 50%, #24306A 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .2), 0 8px 16px -6px rgba(57, 74, 148, .5);
}

/* Buttons: the site-wide physical keys (site.css), a little taller on the
   card, and the outline button a pane of the same glass. */
.auth--glass .btn { min-height: 52px; }
.auth--glass .btn--ghost { background-color: color-mix(in srgb, var(--surface) 75%, transparent); }

@media (prefers-reduced-transparency: reduce) {
  .auth--glass .auth__card { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}