/* The sign-in page (templates/courses/_signin.html), used by /login/ and /accounts/login/. Ink outlines and hard
   offset shadows like the rest of the site, flat colours only. */
.si { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 2rem; align-items: center; max-width: 1040px;
  margin: clamp(1rem, 6vh, 4rem) auto; padding: 0 clamp(0px, 2vw, 16px); }

.si-side { padding: clamp(1.4rem, 3vw, 2.4rem); border: 2px solid var(--fg); border-radius: 22px; background: var(--accent-soft); }
.si-kicker { margin: 0; font: 700 .78rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.si-side h1 { margin: .7rem 0 .6rem; font: 800 clamp(2rem, 4.4vw, 3rem)/1.05 var(--display); letter-spacing: -.02em; }
.si-lede { margin: 0 0 1.4rem; color: var(--muted); font-size: 1.05rem; max-width: 30rem; }
.si-points { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.si-points li { display: grid; gap: .1rem; padding: .75rem 1rem; border: 2px solid var(--fg); border-radius: 14px; background: #fff; }
.si-points li:nth-child(2) { background: #fff4d6; }
.si-points li:nth-child(3) { background: #e6f6ee; }
.si-points b { font: 800 1rem/1.2 var(--display); }
.si-points span { color: var(--muted); font-size: .9rem; }
.si-courses { font-weight: 700; color: var(--fg); }

.si-card { padding: clamp(1.4rem, 3vw, 2.2rem); border: 2px solid var(--fg); border-radius: 22px; background: var(--card); box-shadow: 8px 8px 0 var(--fg); }
.si-card h2 { margin: 0; font: 800 1.9rem/1.1 var(--display); }
.si-sub { margin: .35rem 0 1.4rem; color: var(--muted); }

.si-google { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; padding: .8rem 1rem; cursor: pointer;
  border: 2px solid var(--fg); border-radius: 14px; background: #fff; color: var(--fg); box-shadow: 4px 4px 0 var(--fg);
  font: 800 1.02rem/1 var(--display); transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.si-google:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--fg); background: #f8fafc; }
.si-google:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.si-g { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1.5px solid var(--line); }

.si-or { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0 1rem; color: var(--muted); font-size: .85rem; }
.si-or::before, .si-or::after { content: ""; flex: 1; border-top: 1.5px solid var(--line); }

.si-form { display: grid; gap: .3rem; }
.si-form label { font-weight: 700; font-size: .9rem; }
.si-form input[type="email"], .si-form input[type="password"] { width: 100%; box-sizing: border-box; margin-bottom: .6rem; padding: .7rem .85rem;
  font: inherit; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--fg); }
.si-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.si-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.si-row a { font-size: .85rem; font-weight: 600; }
.si-submit { justify-content: center; margin-top: .7rem; width: 100%; box-sizing: border-box; }
.si-error { margin: 0 0 .6rem; padding: .6rem .8rem; border: 1.5px solid #fecaca; border-radius: 10px; background: #fef2f2; color: #991b1b; font-size: .9rem; font-weight: 600; }

.si-note { display: grid; gap: .2rem; margin: 1.4rem 0 0; padding: .85rem 1rem; border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft); font-size: .92rem; }
.si-fine { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; text-align: center; }

@media (max-width: 820px) {
  .si { grid-template-columns: minmax(0, 1fr); }
  .si-card { order: -1; box-shadow: 5px 5px 0 var(--fg); }  /* the form first on phones */
  .si-points { display: none; }
}
@media (prefers-reduced-motion: reduce) { .si-google { transition: none; } }
.si-solo { grid-template-columns: minmax(0, 460px); justify-content: center; }