/* EPUB Viewer Online — welcome page.
   Palette mirrors the extension's light theme (app/extension/src/shared/tokens.css)
   so the first screen after install looks like the product, not like an ad. */

:root {
  --ink: #1b1a18;
  --ink-soft: rgba(27, 26, 24, 0.62);
  --ink-faint: rgba(27, 26, 24, 0.3);
  --paper: #faf9f7;
  --canvas: #efece6;
  --surface: #f2f0ec;
  --line: rgba(27, 26, 24, 0.12);
  --line-strong: rgba(27, 26, 24, 0.22);
  --accent: #2f5d7c;
  --accent-strong: #1d3d54;

  /* Step markers. The lecture asks for red arrows: they have to win against
     the browser chrome greys, and nothing else on the page is this colour. */
  --marker: #c8321c;

  --ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* The page hides its own controls until the extension shows them, and a class
   that sets `display` outranks the browser's `[hidden]` rule. Without this the
   button is visible to someone who does not have the extension at all. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
}

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

/* ---------- hero ---------- */

.hero {
  text-align: center;
  margin-bottom: 48px;
}

/* The hero is the only thing on the page that moves. The instructional half —
   numbers, arrows, mockups — stays dead still on purpose: an animated pointer
   is exactly what the lecture warns about, because the eye follows the motion
   and the click lands on whatever icon happens to be under it. */
.hero__logo {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  isolation: isolate;
}

.hero__logo-img {
  display: block;
  width: 88px;
  height: 88px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 10px 24px rgba(255, 87, 34, 0.24));
  animation: logoIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes logoIn {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Each piece flies out along its own angle (--a) to its own distance (--d),
   turning as it goes, then fades. One shot, no loop: it marks the install and
   gets out of the way. */
.confetti span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: 1.5px;
  transform-origin: center;
  opacity: 0;
  animation: burst 1.3s cubic-bezier(0.18, 0.7, 0.25, 1) var(--t) forwards;
}

@keyframes burst {
  0% {
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(0);
    opacity: 0;
  }
  12% {
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1);
    opacity: 1;
  }
  70% { opacity: 1; }
  100% {
    transform: translate(-50%, -50%) rotate(calc(var(--a) + 90deg))
               translateY(calc(var(--d) * -1)) scale(0.6);
    opacity: 0;
  }
}

/* The text and the two shots settle in behind the burst. A shot animates as a
   whole, so an arrow never moves relative to the icon it points at. */
.hero__title,
.hero__lede,
.step,
.foot {
  animation: riseIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero__title { animation-delay: 0.10s; }
.hero__lede  { animation-delay: 0.18s; }
.step:nth-of-type(1) { animation-delay: 0.30s; }
.step:nth-of-type(2) { animation-delay: 0.40s; }
.foot { animation-delay: 0.50s; }

@keyframes riseIn {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }

  .hero__logo-img,
  .hero__title,
  .hero__lede,
  .step,
  .foot {
    animation: none;
  }
}

.hero__title {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.hero__lede {
  margin: 12px auto 0;
  max-width: 30em;
  font-size: 17px;
  color: var(--ink-soft);
}

.cta {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 26px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease;
}

.cta:hover {
  background: var(--accent-strong);
}

/* ---------- pin nudge ---------- */

/* Takes the button's place once the reader has been to the library. Same slot,
   so the page keeps one thing to do at a time; the guide underneath is on show
   either way. */
.pin-cta {
  margin-top: 28px;
}

.pin-cta__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.pin-cta__lede {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--ink-soft);
}

/* It arrives on a click, not at load, so it needs an entrance of its own —
   the load-time animations have long finished by then. */
.pin-cta.is-revealed {
  animation: riseIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------- steps ---------- */

.step + .step {
  margin-top: 44px;
}

.step__title {
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- browser mockup ----------
   Drawn in CSS rather than screenshotted: it stays sharp on any display, and a
   change to the popup is a change here, not a new round of screenshots. */

.shot {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  /* Wide top and right gutters: the numbers live outside the browser window,
     so nothing they point at is hidden under them. */
  padding: 58px 92px 36px;
}

.browser {
  position: relative;
  border-radius: 10px 10px 8px 8px;
  background: #dee1e6;
  box-shadow: 0 8px 24px rgba(27, 26, 24, 0.14);
  font-size: 13px;
  user-select: none;
}

.browser__tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
}

.browser__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 16px;
  min-width: 190px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.browser__tab-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c8ccd1;
  flex: none;
}

.browser__newtab {
  color: #5f6368;
  font-size: 16px;
  line-height: 1;
  padding-bottom: 8px;
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  background: #fff;
}

.browser__nav {
  display: flex;
  gap: 14px;
  color: #5f6368;
  flex: none;
}

.browser__omnibox {
  flex: 1;
  height: 28px;
  border-radius: 14px;
  background: #f1f3f4;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #5f6368;
  font-size: 12px;
}

.browser__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Neutral stand-ins for whatever else the user has installed. */
.browser__ext {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #dadce0;
}

.browser__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #cdd2d8;
}

.browser__kebab {
  color: #5f6368;
  letter-spacing: 1px;
  font-size: 14px;
  line-height: 1;
}

/* The two toolbar slots the steps point at. Both are anchors for the
   panel / popup that hangs under them, hence position: relative. */
.slot {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 5px;
}

.slot--lit {
  background: #e8f0fe;
  outline: 2px solid var(--marker);
  outline-offset: 1px;
}

.slot__icon {
  width: 18px;
  height: 18px;
  display: block;
}

.browser__viewport {
  height: 208px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* A plain search page: enough to read as "a normal tab" without borrowing
   anyone's wordmark. */
.viewport__mark {
  width: 132px;
  height: 12px;
  border-radius: 6px;
  background: #e8eaed;
}

.viewport__search {
  width: 54%;
  max-width: 380px;
  height: 34px;
  border-radius: 17px;
  border: 1px solid #dfe1e5;
}

.viewport__row {
  display: flex;
  gap: 12px;
}

.viewport__pill {
  width: 68px;
  height: 12px;
  border-radius: 6px;
  background: #f1f3f4;
}

/* ---------- extensions dropdown (step 2) ---------- */

.panel {
  position: absolute;
  top: calc(100% + 8px);
  right: -6px;
  width: 268px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 10px 0 8px;
  text-align: left;
  z-index: 3;
}

.panel__title {
  padding: 0 14px 8px;
  font-size: 13px;
  font-weight: 600;
  color: #202124;
}

.panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 12px;
  color: #3c4043;
}

.panel__row--ours {
  background: #f1f3f4;
}

.panel__row img {
  width: 18px;
  height: 18px;
  flex: none;
}

.panel__ghost {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #dadce0;
  flex: none;
}

.panel__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel__ghost-name {
  flex: 1;
  height: 9px;
  border-radius: 5px;
  background: #e8eaed;
}

.panel__pin {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: #5f6368;
}

.panel__pin--lit {
  color: var(--marker);
  outline: 2px solid var(--marker);
  outline-offset: 0;
}

/* ---------- extension popup (step 3) ---------- */

.popup {
  position: absolute;
  top: calc(100% + 8px);
  right: -6px;
  width: 268px;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 28px rgba(0, 0, 0, 0.18);
  text-align: left;
  overflow: hidden;
  z-index: 3;
}

.popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 11px 8px;
}

.popup__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
}

.popup__brand img {
  width: 17px;
  height: 17px;
}

.popup__theme {
  color: var(--ink-soft);
  display: grid;
  place-items: center;
}

.popup__section {
  padding: 0 11px 10px;
}

.popup__label {
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.popup__card {
  display: flex;
  gap: 9px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.popup__cover {
  width: 34px;
  height: 48px;
  flex: none;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, #f8e6d3, #eecfae);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 5px;
}

/* Two bands stand in for a cover: a real title here would be a specific book
   the user does not have yet. */
.popup__cover span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(180, 85, 31, 0.55);
}

.popup__cover span:first-child { width: 82%; }
.popup__cover span:last-child { width: 54%; }

.popup__meta {
  min-width: 0;
  flex: 1;
}

.popup__title {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup__author {
  font-size: 10px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup__bar {
  margin-top: 7px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
}

.popup__bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

.popup__button {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

/* The mockups are built from spans so nothing inside them is focusable or
   selectable; these are the ones that are not already flex or grid items. */
.panel__title,
.popup__section,
.popup__label,
.popup__title,
.popup__author,
.popup__bar,
.popup__button {
  display: block;
}

/* ---------- numbered markers and arrows ---------- */

.marker {
  position: absolute;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--marker);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(200, 50, 28, 0.4);
}

.arrow {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}

.arrow path {
  fill: none;
  stroke: var(--marker);
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* Placement is per-shot; the mockup itself knows nothing about the markers.
   Offsets are measured from the shot's right edge, so they track the toolbar
   icons rather than the page width. The number sits directly above its target
   and the arrow drops onto it — no ambiguity about which icon is meant. */
.shot--pin .marker--1 { top: 12px; right: 156px; }
.shot--pin .arrow--1  { top: 46px; right: 155px; width: 30px; height: 66px; }
.shot--pin .marker--2 { top: 178px; right: 40px; }
.shot--pin .arrow--2  { top: 185px; right: 74px; width: 105px; height: 18px; }

.shot--open .marker--3 { top: 12px; right: 188px; }
.shot--open .arrow--3  { top: 46px; right: 187px; width: 30px; height: 66px; }

/* ---------- footer ---------- */

.foot {
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--ink-soft);
}

.foot a {
  color: var(--ink-soft);
}

.foot a:hover {
  color: var(--ink);
}

.foot__credit {
  flex-basis: 100%;
  text-align: center;
  font-size: 12px;
  color: var(--ink-faint);
}

.foot__credit a {
  color: inherit;
}

/* ---------- narrow screens ---------- */

/* The mockups are one rigid drawing: the markers are positioned against the
   toolbar icons in pixels, so the whole shot scales as a unit rather than
   reflowing. `zoom` reflows layout, so no height compensation is needed. */
@media (max-width: 880px) { .shot { zoom: 0.82; } }
@media (max-width: 720px) { .shot { zoom: 0.64; } }
@media (max-width: 560px) { .shot { zoom: 0.48; } }

@media (max-width: 720px) {
  .page { padding: 40px 16px 56px; }
  .hero__title { font-size: 27px; }
  .step__title { font-size: 18px; }
}

/* ---------- uninstall page ---------- */

.page--uninstall {
  max-width: 700px;
}

.bye {
  text-align: center;
  margin-bottom: 32px;
}

.bye__logo {
  display: block;
  margin: 0 auto 18px;
}

.bye__title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.bye__lede {
  margin: 10px 0 0;
  color: var(--ink-soft);
}

.bye-form__frame {
  display: block;
  width: 100%;
  border: 0;
}

/* ---------- legal pages ---------- */

.page--legal {
  max-width: 760px;
}

.legal-header {
  margin-bottom: 32px;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 500;
}

.legal-back:hover {
  color: var(--ink);
}

.legal-title {
  margin: 24px 0 4px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal-effective {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.legal {
  font-size: 15px;
}

.legal h2 {
  margin: 34px 0 10px;
  font-size: 20px;
  font-weight: 600;
}

.legal h3 {
  margin: 22px 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.legal p,
.legal li {
  color: rgba(27, 26, 24, 0.82);
}

.legal a {
  color: var(--accent);
}

.legal ul {
  padding-left: 22px;
}

.legal li {
  margin-bottom: 6px;
}

.legal-footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.legal-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

.legal-footer a:hover {
  color: var(--ink);
}