/* ─────────────────────────────────────────────────────────────────────────
   Roots Academy — install pop-up and per-device install guide.

   Both are BUILT by static/js/pwa-install.js, on every page that includes
   templates/pwa_head.html — which is where this sheet is linked. They used to
   be styled from student_portal.css, so on the sign-in page (which loads none
   of the portal's sheets) the guide was appended as unstyled text below the
   fold: tapping "Install the Roots app" on an iPad appeared to do nothing.

   TWO RULES FOR EDITING THIS FILE

   1. Every selector starts with the component's #id. assignments.css carries
      `body.assignments-page button { border:none; background:none; color:inherit }`
      at (0,1,2), which outranks any single-class rule whichever sheet loads
      last — it stripped the purple fill off "Install app" and "Got it" on most
      student pages. An id is (1,0,0) and settles it.

   2. Colours come from the --rp-* tokens declared on the component itself,
      never from the host page's tokens. The portal, the sign-in page and the
      staff pages each name their palette differently (--surface / --cream /
      --acad-*), and a token the host never defines fails silently.
   ───────────────────────────────────────────────────────────────────────── */

/* ───────────────────────────── Install pop-up ─────────────────────────────
   z-index 760 sits BELOW the student mobile drawer (810), its scrim (800) and
   the offline bar (820), and far below the onboarding tour, so none of those
   is ever trapped underneath it. */
#roots-pwa-popup {
  --rp-surface: #ffffff;
  --rp-ink: #1b2130;
  --rp-ink-2: #586173;
  --rp-line: #e8e6df;
  --rp-hover: #f4f2ec;
  --rp-brand: #4D3E77;
  --rp-brand-2: #5f4f8f;
  --rp-brand-soft: #EDE8F5;
  --rp-ok: #159a57;

  position: fixed;
  inset: 0;
  z-index: 760;
  display: flex;
  align-items: flex-end;            /* phones: a bottom sheet, thumb-reachable */
  justify-content: center;
  box-sizing: border-box;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(27, 33, 48, .5);
  opacity: 0;
  transition: opacity .26s ease;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html[data-theme="dark"] #roots-pwa-popup {
  --rp-surface: #2b2f35;
  --rp-ink: #e7eaee;
  --rp-ink-2: #b2b9c4;
  --rp-line: #3d434b;
  --rp-hover: #33373e;
  --rp-brand: #6d59a8;              /* white label on it measures ~6:1 */
  --rp-brand-2: #7d68bd;
  --rp-brand-soft: #33373e;
  --rp-ok: #5fd39a;
  background: rgba(0, 0, 0, .6);
}
#roots-pwa-popup.show { opacity: 1; }

/* Tablets and desktops: a centred dialog. A sheet pinned to the bottom edge of
   a 27" monitor reads as a cookie notice, and is the first thing people close. */
@media (min-width: 600px) {
  #roots-pwa-popup { align-items: center; padding: 24px; }
}

#roots-pwa-popup .roots-pwa-popup-card {
  position: relative;
  box-sizing: border-box;
  width: min(420px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 26px 22px 18px;
  /* The brand wash behind the icon is what makes it read as "the app", not one
     more notice. Dark mode is flat (no gradients) — see the override below. */
  background: linear-gradient(180deg, var(--rp-brand-soft) 0, var(--rp-surface) 132px);
  border: 1px solid var(--rp-line);
  border-top: 4px solid var(--rp-brand);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(27, 33, 48, .3);
  text-align: center;
  transform: translateY(22px);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
}
#roots-pwa-popup.show .roots-pwa-popup-card { transform: none; }
html[data-theme="dark"] #roots-pwa-popup .roots-pwa-popup-card { background: var(--rp-surface); }

#roots-pwa-popup .roots-pwa-popup-close {
  position: absolute; top: 8px; right: 8px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 10px;
  font: inherit; font-size: 26px; line-height: 1;
  color: var(--rp-ink-2); cursor: pointer;
}
#roots-pwa-popup .roots-pwa-popup-close:hover { background: var(--rp-hover); color: var(--rp-ink); }

#roots-pwa-popup .roots-pwa-popup-icon {
  display: block;
  width: 72px; height: 72px;
  margin: 2px auto 14px;
  border: 1px solid var(--rp-line);   /* the tile is cream; on a white card it needs an edge */
  border-radius: 18px;
  object-fit: contain;
}

#roots-pwa-popup .roots-pwa-popup-title {
  margin: 0 0 8px; padding: 0;
  font-family: inherit; font-size: 20px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;               /* no single word stranded on line two */
  color: var(--rp-ink);
}
#roots-pwa-popup .roots-pwa-popup-text {
  margin: 0 0 18px;
  font-size: 14.5px; font-weight: 500; line-height: 1.5;
  color: var(--rp-ink-2);
}

/* Three reasons, ticked. Left-aligned inside the centred card: centred bullet
   text with ticks reads as ragged. */
#roots-pwa-popup .roots-pwa-popup-perks {
  list-style: none; margin: 0 auto 18px; padding: 0;
  display: inline-flex; flex-direction: column; gap: 7px;
  text-align: left;
}
#roots-pwa-popup .roots-pwa-popup-perks li {
  position: relative; margin: 0; padding-left: 26px;
  font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--rp-ink);
}
#roots-pwa-popup .roots-pwa-popup-perks li::before {
  content: ''; position: absolute; left: 0; top: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--rp-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 12.5 10.5 17 18 8' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}

#roots-pwa-popup .roots-pwa-popup-actions { display: flex; flex-direction: column; gap: 8px; }
#roots-pwa-popup .roots-pwa-popup-cta,
#roots-pwa-popup .roots-pwa-popup-later {
  display: block; width: 100%;
  box-sizing: border-box;
  min-height: 46px;                 /* comfortable touch target on an iPad */
  margin: 0; padding: 12px 16px;
  border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3;
  text-align: center; cursor: pointer;
}
#roots-pwa-popup .roots-pwa-popup-cta {
  background: var(--rp-brand); border: 1px solid var(--rp-brand); color: #fff;
}
#roots-pwa-popup .roots-pwa-popup-cta:hover { background: var(--rp-brand-2); border-color: var(--rp-brand-2); }
#roots-pwa-popup .roots-pwa-popup-later {
  background: transparent; border: 1px solid var(--rp-line); color: var(--rp-ink-2);
}
#roots-pwa-popup .roots-pwa-popup-later:hover { background: var(--rp-hover); color: var(--rp-ink); }
#roots-pwa-popup button:focus-visible { outline: 2px solid var(--rp-brand); outline-offset: 2px; }

/* "Step-by-step for: Windows · iPhone · iPad · Android · Mac" — each opens that
   device's sheet in the guide, whatever device the student is holding. */
#roots-pwa-popup .roots-pwa-popup-devices {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rp-line);
}
#roots-pwa-popup .roots-pwa-popup-devices span {
  flex-basis: 100%; margin-bottom: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--rp-ink-2);
}
#roots-pwa-popup .roots-pwa-popup-devices button {
  margin: 0; padding: 6px 11px; min-height: 32px;
  background: var(--rp-surface); color: var(--rp-brand);
  border: 1px solid var(--rp-line); border-radius: 99px;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
#roots-pwa-popup .roots-pwa-popup-devices button:hover { background: var(--rp-hover); border-color: var(--rp-brand); }
html[data-theme="dark"] #roots-pwa-popup .roots-pwa-popup-devices button { color: #c9bdf0; }

@media (prefers-reduced-motion: reduce) {
  #roots-pwa-popup,
  #roots-pwa-popup .roots-pwa-popup-card { transition: none; transform: none; }
}

/* ─────────────────────── Per-device install guide ────────────────────────
   Safari / iPad / Android / Windows steps — guideContent() in pwa-install.js.
   Deliberately a dark card in both themes; it sits above everything, the
   pop-up included, because it is always the direct answer to a tap. */
#roots-pwa-guide {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: flex-end; justify-content: center;
  box-sizing: border-box;
  padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(27, 33, 48, .5);
}
@media (min-width: 600px) {
  #roots-pwa-guide { align-items: center; padding: 24px; }
}
#roots-pwa-guide .roots-pwa-guide-card {
  position: relative;
  box-sizing: border-box;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 16px 16px;
  background: #1b2130; color: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  text-align: left;
}
#roots-pwa-guide .roots-pwa-guide-close {
  position: absolute; top: 6px; right: 6px;
  width: 40px; height: 40px;
  margin: 0; padding: 0;
  background: none; border: 0; border-radius: 10px;
  color: #fff; font: inherit; font-size: 24px; line-height: 1;
  opacity: .7; cursor: pointer;
}
#roots-pwa-guide .roots-pwa-guide-close:hover { opacity: 1; }
/* Device tabs. The student's own device carries a small dot ("This device"). */
#roots-pwa-guide .roots-pwa-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 36px 14px 0;              /* clear of the close button */
}
#roots-pwa-guide .roots-pwa-tab {
  position: relative;
  margin: 0; padding: 6px 11px; min-height: 32px;
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 99px;
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
#roots-pwa-guide .roots-pwa-tab:hover { background: rgba(255, 255, 255, .16); }
#roots-pwa-guide .roots-pwa-tab.on { background: #6C5BA8; border-color: #6C5BA8; }
#roots-pwa-guide .roots-pwa-tab.own::after {
  content: ''; position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #5fd39a; box-shadow: 0 0 0 2px #1b2130;
}

#roots-pwa-guide .roots-pwa-guide-brand {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 14px; padding-right: 32px;
}
#roots-pwa-guide .roots-pwa-guide-brand img {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
}
#roots-pwa-guide .roots-pwa-guide-brand strong {
  display: block; margin-bottom: 4px;
  font-size: 16px; font-weight: 700; color: #fff;
}
#roots-pwa-guide .roots-pwa-guide-brand span {
  display: block; font-size: 13px; line-height: 1.4; color: #fff; opacity: .82;
}

/* "Where is that button?" — a picture of the Safari toolbar with Share ringed.
   iPhone puts it at the bottom, iPad and Mac at the top, so the illustration is
   built per platform in toolbarHint() rather than shipped as an image. */
#roots-pwa-guide .roots-pwa-hint {
  margin: 0 0 14px; padding: 8px 10px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
}
#roots-pwa-guide .roots-pwa-hint svg { display: block; }
#roots-pwa-guide .roots-pwa-hint figcaption {
  margin-top: 2px;
  font-size: 12.5px; text-align: center; color: #fff; opacity: .8;
}
#roots-pwa-guide .roots-pwa-hint figcaption b { opacity: 1; font-weight: 700; }
#roots-pwa-guide .roots-pwa-hint-ring {
  animation: rootsPwaPulse 1.8s ease-in-out infinite; transform-origin: center;
}
@keyframes rootsPwaPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  #roots-pwa-guide .roots-pwa-hint-ring { animation: none; }
}

#roots-pwa-guide .roots-pwa-steps {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
#roots-pwa-guide .roots-pwa-steps.numbered { counter-reset: rootspwastep; }
#roots-pwa-guide .roots-pwa-steps.numbered .roots-pwa-step { counter-increment: rootspwastep; }
/* The step number rides the icon tile, so the title stays a plain instruction
   ("Tap Share") instead of carrying a hand-written "2." that drifts out of
   order whenever a step is added or skipped. */
#roots-pwa-guide .roots-pwa-steps.numbered .roots-pwa-step-ico::after {
  content: counter(rootspwastep);
  position: absolute; top: -5px; left: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px; background: #6C5BA8; color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #1b2130;
}
#roots-pwa-guide .roots-pwa-step {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 10px 12px;
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
}
#roots-pwa-guide .roots-pwa-step-ico {
  position: relative;
  flex-shrink: 0; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255, 255, 255, .1);
  color: #EDE9F4;
}
#roots-pwa-guide .roots-pwa-step-text { flex: 1; min-width: 0; }
#roots-pwa-guide .roots-pwa-step-text strong {
  display: block; margin-bottom: 2px;
  font-size: 14px; font-weight: 700; color: #fff;
}
#roots-pwa-guide .roots-pwa-step-text em {
  display: block; font-style: normal; font-size: 12.5px; color: #fff; opacity: .75;
}
#roots-pwa-guide .roots-pwa-guide-done {
  display: block; width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  margin: 0; padding: 12px 16px;
  background: #5b4a8c; color: #fff;
  border: 0; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 700; text-align: center;
  cursor: pointer;
}
#roots-pwa-guide .roots-pwa-guide-done:hover { background: #6C5BA8; }
#roots-pwa-guide button:focus-visible { outline: 2px solid #b6a4e8; outline-offset: 2px; }