/* Dutchino - learner app and auth pages (shares the building blocks of samin.css). Mobile first:
   bottom tab bar on phones, right sidebar on desktop. Author: SPSDEVNIC.NET */
.app { background: var(--delft-50); }
.app-shell { display: flex; min-height: calc(100vh - 9px); }
.app-side { display: none; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-bottom: 72px; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); }
.app-top__brand { gap: var(--s2); }
.app-top__brand b { font-size: 1.15rem; color: var(--nl-navy); }
.app-top__brand b i { font-style: normal; color: var(--oranje-600); }
.app-top__user { display: inline-flex; align-items: center; gap: 6px; color: #475467; font-size: var(--fs-sm); font-weight: 600; }
.app-content { padding: var(--s5) var(--gutter); flex: 1; width: 100%; max-width: 1180px; margin-inline: auto; }
.app-tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: var(--surface);
  border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px -18px rgba(20, 44, 92, .45);
}
.app-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 12px; text-decoration: none; color: #667085; font-size: var(--fs-xs); font-weight: 700; }
.app-tabbar a[aria-current="page"] { color: var(--nl-blue); background: var(--delft-50); }
.app-tabbar .ic { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .app-side { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; width: 256px; flex: none; padding: var(--s4); background: var(--surface); border-inline-end: 1px solid var(--line); }
  .app-side .brand { padding: var(--s2) var(--s2) var(--s5); }
  .app-side .sm-nav { flex: 1; }
  .app-main { padding-bottom: 0; }
  .app-top__brand { visibility: hidden; }
  .app-tabbar { display: none; }
  .app-content { padding: var(--s6); }
}

/* hero banner (reference: blue welcome card) */
.app-hero {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5);
  background: linear-gradient(135deg, var(--nl-blue), var(--nl-navy)); color: #eaf0fb; border-radius: var(--radius-lg); padding: var(--s5) var(--s5);
  position: relative; overflow: hidden;
}
.app-hero::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -80px; width: 170px; height: 170px; border-radius: 50%; border: 16px solid var(--oranje); opacity: .45; pointer-events: none; }
.app-hero > * { position: relative; z-index: 1; }
.app-hero h1 { color: var(--white); font-size: var(--fs-2xl); margin-bottom: var(--s2); }
.app-hero h1 .nl { color: var(--oranje); font-size: .8em; }
.app-hero p { margin: 0; max-width: 60ch; }
.app-hero__mark { width: 84px; height: 84px; flex: none; background: var(--white); border-radius: 24px; padding: 10px; position: relative; z-index: 1; display: none; }
.app-hero--slim { display: block; }
@media (min-width: 640px) { .app-hero__mark { display: block; } .app-hero { padding: var(--s6); } }

/* onboarding choices */
.choice { border: 0; padding: 0; margin: 0 0 var(--s4); }
.choice legend { font-weight: 700; font-size: var(--fs-sm); color: #344054; margin-bottom: var(--s2); }
.choice .req { color: var(--danger); }
.choice__item { display: flex; align-items: center; gap: var(--s3); padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 6px; cursor: pointer; background: var(--surface); }
.choice__item:has(input:checked) { border-color: var(--nl-blue); background: var(--nl-blue-100); }
.choice__item input { width: 18px; height: 18px; accent-color: var(--nl-blue); flex: none; }
.choice.has-error .choice__item { border-color: #f1c6c1; }
.choice .err { color: var(--danger); font-size: var(--fs-xs); font-weight: 600; }
@media (min-width: 720px) { .choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; } .choice legend, .choice .err { grid-column: 1 / -1; } }

/* auth pages */
.auth { background: var(--delft-50); min-height: 100vh; display: flex; flex-direction: column; }
.auth__wrap { flex: 1; display: grid; gap: var(--s6); align-items: center; width: 100%; max-width: 1080px; margin-inline: auto; padding: var(--s5) var(--gutter); }
.auth__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6) var(--s5); box-shadow: var(--shadow); width: 100%; max-width: 460px; margin-inline: auto; }
.auth__card .brand { margin-bottom: var(--s5); text-decoration: none; }
.auth__title { font-size: var(--fs-xl); margin-bottom: var(--s4); }
.auth__soon { font-size: var(--fs-sm); color: #6b4c00; }
.auth__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sm); }
.auth__alt { text-align: center; margin: var(--s4) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.auth__art { display: none; }
.auth__quote { text-align: center; color: var(--nl-navy); font-size: var(--fs-lg); margin-top: var(--s4); }
.auth__quote .nl { font-weight: 700; color: var(--nl-blue); }
.auth__quote small { color: var(--muted); font-size: var(--fs-sm); }
.auth__foot { text-align: center; padding: var(--s4); color: var(--muted); }
.btn-block { width: 100%; }
.seg { display: flex; gap: 4px; background: var(--delft-50); border-radius: 12px; padding: 4px; margin-bottom: var(--s4); }
.seg a { flex: 1; text-align: center; padding: 8px; border-radius: 9px; text-decoration: none; font-weight: 700; font-size: var(--fs-sm); color: #475467; }
.seg a[aria-current="page"] { background: var(--surface); color: var(--nl-blue); box-shadow: var(--shadow-sm); }
.otp-field input { font-family: var(--font-nl); letter-spacing: .5em; text-align: center; font-size: 1.3rem; font-weight: 700; }
@media (min-width: 900px) {
  .auth__wrap { grid-template-columns: 460px 1fr; }
  .auth__card { margin: 0; }
  .auth__art { display: block; }
}