/* Member app layout (after welly-design/ui_kits/app). Phones: top bar, content, fixed tab bar.
   From 768px: a sidebar replaces the tab bar and the content gets a grid. Tokens only. */

html, body { min-height: 100%; }
body { background: var(--surface-page); color: var(--text-primary); }

/* One logo per theme. Both <img>s are in the markup; exactly one may be displayed. Never set
   `display` on these images elsewhere (a more specific rule would show both and double the
   gold mark) - the !important makes sure. */
img.ap-logo-dark { display: none !important; }
[data-theme="dark"] img.ap-logo-light { display: none !important; }
[data-theme="dark"] img.ap-logo-dark { display: block !important; }
/* a reseller's sidebar colour (data-side-bg on .ap-side and .ap-top, layouts/shell.html.twig) decides their logo in both themes */
.ap-side[data-side-bg="dark"] img.ap-logo-light, .ap-side[data-side-bg="light"] img.ap-logo-dark,
.ap-top[data-side-bg="dark"] img.ap-logo-light, .ap-top[data-side-bg="light"] img.ap-logo-dark { display: none !important; }
.ap-side[data-side-bg="dark"] img.ap-logo-dark, .ap-side[data-side-bg="light"] img.ap-logo-light,
.ap-top[data-side-bg="dark"] img.ap-logo-dark, .ap-top[data-side-bg="light"] img.ap-logo-light { display: block !important; }

.ap-eyebrow { margin: 0; font: var(--type-eyebrow); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.ap-eyebrow-gold { color: var(--gold-300); }

/* ---------- login ---------- */
.ap-login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-8); padding: calc(var(--space-10) + env(safe-area-inset-top)) var(--gutter-mobile) calc(var(--space-8) + env(safe-area-inset-bottom)); }
.ap-login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-8); }
.ap-login-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.ap-login-hero img { width: var(--space-12); height: auto; }
/* a reseller's logo is any shape: fit it to the height instead (sizes only - see the logo rule above) */
.ap-login-brand img { width: auto; max-width: 100%; height: var(--space-10); object-fit: contain; }
.ap-login-hero p { margin: 0; font: var(--type-body); color: var(--text-secondary); }
.ap-login-hero h1 { margin: 0; font: var(--type-h1); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.ap-wordmark { font: var(--type-wordmark); font-size: var(--text-2xl); letter-spacing: var(--tracking-wordmark); color: var(--text-primary); }
.ap-login-form { display: flex; flex-direction: column; gap: var(--space-4); }
.ap-login-foot { margin: var(--space-2) 0 0; text-align: center; font: var(--type-caption); color: var(--text-secondary); line-height: var(--leading-normal); }
.ap-login-theme { display: flex; justify-content: center; }
.ap-login-card > .wl-alert[data-tone="info"] { background: var(--info-soft); color: var(--info-fg); }

/* "Continue with Vipps": Vipps MobilePay's brand button, the one exception to "tokens only".
   Orange and white in both themes, as the Vipps brand guidelines require. */
.ap-login-card { --vipps-orange: #ff5b24; --vipps-orange-dark: #db460f; --vipps-on-orange: #fff; }
.ap-vipps-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%;
  height: var(--control-h-lg); padding: 0 var(--space-6); border-radius: var(--radius-pill);
  background: var(--vipps-orange); color: var(--vipps-on-orange); font: var(--weight-semibold) var(--text-md)/1 var(--font-body);
  text-decoration: none; transition: var(--transition-color), transform var(--dur-fast) var(--ease-standard); }
.ap-vipps-btn:hover, .ap-vipps-btn:active { background: var(--vipps-orange-dark); color: var(--vipps-on-orange); text-decoration: none; }
.ap-vipps-btn:active { transform: scale(var(--press-scale)); }
.ap-vipps-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ap-vipps-logo { width: auto; height: 1.15em; margin-top: .2em; }

/* "or" between the Vipps button and the password form */
.ap-login-or { display: flex; align-items: center; gap: var(--space-4); font: var(--type-caption); color: var(--text-secondary); }
.ap-login-or::before, .ap-login-or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
@media (min-width: 768px) {
  .ap-login { background: var(--surface-sunken); }
  .ap-login-card { max-width: 440px; padding: var(--space-10); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); background: var(--surface-card); }
}

/* ---------- shell ---------- */
.ap-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.ap-side { display: none; }

/* a reseller's sidebar colour, on the sidebar and the phone's top bar: the same in both themes; text,
   hover and borders mixed from it (the colours are set in layouts/base.html.twig) */
.ap-side[data-side-bg], .ap-top[data-side-bg] { color: var(--text-primary);
  --text-primary: var(--side-fg); --text-secondary: color-mix(in oklch, var(--side-fg) 72%, var(--side-bg)); --text-muted: color-mix(in oklch, var(--side-fg) 50%, var(--side-bg));
  --surface-card: color-mix(in oklch, var(--side-fg) 10%, var(--side-bg)); --surface-sunken: color-mix(in oklch, var(--side-fg) 6%, var(--side-bg));
  --border-subtle: color-mix(in oklch, var(--side-fg) 14%, var(--side-bg)); --border-strong: color-mix(in oklch, var(--side-fg) 24%, var(--side-bg));
  --surface-inverse: var(--side-fg); --text-inverse: var(--side-bg); }
/* the accent marks the current page: a lighter step on a dark sidebar, a darker one on a light sidebar */
.ap-side[data-side-bg="dark"], .ap-top[data-side-bg="dark"] { --accent: var(--gold-300); }
.ap-side[data-side-bg="light"], .ap-top[data-side-bg="light"] { --accent: var(--gold-700); }

/* installed on a phone the page runs under the status bar: the top bar grows by the safe area.
   It has the sidebar's background, Welly's or the reseller's. */
.ap-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--space-2) 0 var(--gutter-mobile);
  background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); }
.ap-top[data-side-bg] { background: var(--side-bg); }
.ap-top-logo img { height: var(--space-5); width: auto; }
.ap-top-right { display: flex; align-items: center; gap: var(--space-1); }
.ap-top-right form { margin: 0; }

.ap-main { flex: 1; padding-bottom: calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom)); }
.ap-page { max-width: 640px; margin: 0 auto; padding: var(--space-5) var(--gutter-mobile); display: flex; flex-direction: column; gap: var(--space-5); }

/* tab bar (phones) */
.ap-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in oklch, var(--surface-page) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle); }
.ap-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  color: var(--text-muted); font: var(--type-caption); font-weight: var(--weight-medium); text-decoration: none; transition: var(--transition-color); }
.ap-tab:hover { color: var(--text-primary); text-decoration: none; }
.ap-tab[aria-current="page"] { color: var(--text-primary); }
.ap-tab[aria-current="page"] .wl-icon { color: var(--accent); }
.ap-tab[aria-disabled="true"] { opacity: .45; }
.ap-tab:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

/* ---------- home ---------- */
.ap-greet { display: flex; flex-direction: column; gap: var(--space-1); }
.ap-greet h1 { margin: 0; font: var(--type-h1); font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); }
.ap-grid { display: flex; flex-direction: column; gap: var(--space-5); }
.ap-course { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.ap-course h2 { margin: 0; font: var(--type-h2); letter-spacing: var(--tracking-tight); }
.ap-course p:last-child { margin: 0; font: var(--type-body); color: var(--grey-400); }
[data-theme="dark"] .ap-course p:last-child { color: var(--grey-600); }
[data-theme="dark"] .ap-course .ap-eyebrow-gold { color: var(--gold-700); } /* the card is white in dark mode */
.ap-section-title { margin: 0 0 var(--space-3); font: var(--type-h3); }
.ap-steps { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.ap-step { display: flex; gap: var(--space-4); padding: var(--space-4); }
.ap-step-icon { flex: none; display: grid; place-items: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--accent-soft-fg); }
.ap-step h3 { margin: 0 0 var(--space-1); font: var(--type-label); font-size: var(--text-md); }
.ap-step p { margin: 0; font: var(--type-body-sm); color: var(--text-secondary); }
.ap-legal { margin: var(--space-4) 0 0; font: var(--type-caption); color: var(--text-muted); text-align: center; line-height: var(--leading-normal); }

/* ---------- tablet and desktop: sidebar instead of the tab bar ---------- */
@media (min-width: 768px) {
  .ap-shell { flex-direction: row; }
  .ap-top, .ap-tabbar { display: none; }
  .ap-side { position: sticky; top: 0; display: flex; flex-direction: column; flex: none; width: calc(var(--space-16) * 4); height: 100vh; height: 100dvh;
    border-right: 1px solid var(--border-subtle); background: var(--surface-sunken); }
  .ap-side[data-side-bg] { background: var(--side-bg); border-right-color: var(--border-subtle); }
  .ap-side-logo { display: block; padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) var(--space-4); }
  .ap-side-logo img { height: var(--space-6); width: auto; }
  /* a reseller's logo is any shape: fill the width, up to twice Welly's height (sizes only - see the logo rule above) */
  .ap-side-logo img.ap-logo-brand { width: 100%; height: auto; max-height: var(--space-12); object-fit: contain; object-position: left center; }
  .ap-side-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); }
  .ap-side-nav a, .ap-side-nav > span { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch-min);
    padding: 0 var(--space-3); border-radius: var(--radius-control); font: var(--type-label); color: var(--text-secondary); text-decoration: none; transition: var(--transition-color); }
  .ap-side-nav a:hover { background: var(--surface-card); color: var(--text-primary); text-decoration: none; }
  .ap-side-nav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ap-side-nav a[aria-current="page"] { background: var(--surface-card); color: var(--text-primary); }
  .ap-side-nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2); width: 3px; border-radius: var(--radius-xs); background: var(--accent); }
  .ap-side-nav a[aria-current="page"] .wl-icon { color: var(--accent); }
  .ap-side-nav > span[aria-disabled="true"] { color: var(--text-muted); }
  .ap-side-nav > span .wl-badge { margin-left: auto; }
  .ap-side-foot { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--border-subtle); }
  .ap-user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .ap-avatar { flex: none; display: grid; place-items: center; width: var(--control-h-sm); height: var(--control-h-sm); border-radius: 50%;
    background: var(--surface-inverse); color: var(--text-inverse); font: var(--type-label); }
  .ap-user-txt { display: flex; flex-direction: column; min-width: 0; }
  .ap-user-txt strong { font: var(--type-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-user-txt span { font: var(--type-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ap-side-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
  .ap-side-actions form { margin: 0; }

  .ap-main { flex: 1; min-width: 0; padding-bottom: 0; }
  .ap-page { max-width: var(--content-max); padding: var(--space-10) var(--gutter-desktop) var(--space-16); gap: var(--space-8); }
  .ap-greet h1 { font-size: var(--text-3xl); }
  .ap-course { padding: var(--space-8); }
  .ap-steps { gap: var(--space-4); }
  .ap-step { padding: var(--space-5); }
  .ap-legal { text-align: left; }
}

/* wide screens: the course card and what to expect side by side */
@media (min-width: 1100px) {
  .ap-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; }
}