/* ==========================================================================
   KOBIL — Resources/E-Books — Tab bar + list
   Figma 6201:91858 (desktop 1440) · 6201:92539 (phone 393)

   Rebuilt from the Aug-2026 frames on the `--wN` / `--mN` scale.

   The frame insets this page's white block 40 from the page edges and rounds it 16
   (measured: row y=520 is #ffffff from x=40 to 1399, and the corner insets trace
   r=16), with the pills inside it. That made three list pages with three different
   treatments, and the design was wrong about it: on request all three now follow the
   insights list — pills on the page background above the block, the white full-width
   with no rounding at the top, and the extra height above it that buys. The reading
   column stays 1068, now centred in 1440 rather than in 1360.

   Inside it the reading column is 1068 centred, and each e-book is a horizontal row:
   a 302x435 portrait cover beside a text column, rows separated by a 1px rule. The
   phone frame stacks the same component — a 234x337 cover centred above the text.

   Desktop rhythm: card 494..2800, 40 of padding, pills 534, first row 630, 48 to the
   rule and 48 from it to the next row, pagination 80 under the list, 20 to the footer.
   Phone: card from 444 with radius 8, pills 460 (inset 8), rows 560, 48 between,
   pagination 52 under them, 16 of padding, 20 to the footer.
   ========================================================================== */

.sec-e-books-browser {
  /* 70 under the pill row, and nothing under the block: the white runs straight into
     the footer, as on the insights list. The frame's 20 there read as a seam once the
     block went full-bleed, so it is gone on all three. The rhythm above is the
     insights list's: hero ends 414, pills 484..532, white from 602, first row 650.
     186 of padding centres the 1068 column in the full 1440 (it was 146 inside a
     1360-wide block). */
  margin-top: var(--w70);
  padding: var(--w48) var(--w186) var(--w40);
  background: var(--white);
  scroll-margin-top: var(--w132);
}

/* ---- Tab bar ---------------------------------------------------------- */

/* 70 under the hero puts the pills on the page background. The horizontal inset is
   the page's own 100, the same as the Insights and Case Studies bars
   (css/resources/insights/browser.css, css/resources/case-studies/browser.css).
   It used to be 186 — the e-books frame aligns its pill row with the reading column
   rather than the page inset — but the three lists share one tab bar, so a different
   inset here made the row jump sideways every time a visitor switched to this tab.
   Content owner's call: match the other two. */
.ebk-browser__tabs {
  display: flex;
  gap: var(--w8);
  padding: var(--w70) var(--w100) 0;
}

.ebk-browser__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--w48);
  padding: var(--w8) var(--w32);
  border: 1px solid var(--navy);
  border-radius: var(--w40);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  white-space: nowrap;
  color: var(--navy);
  background: transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ebk-browser__tab:hover {
  background: var(--navy);
  color: var(--white);
}

.ebk-browser__tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  cursor: default;
}

.ebk-browser__tab.is-disabled {
  cursor: default;
  opacity: 0.45;
}

.ebk-browser__tab.is-disabled:hover {
  background: transparent;
  color: var(--navy);
}

/* ---- List ------------------------------------------------------------- */

.ebk-browser__list {
  /* The 48 above the first row is the block's own padding-top now. */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rule between rows, and the 48 either side of it (frame: row ends 1065, rule
   1113, next row 1161). Solving the rendered ink gives (225, 231, 241) — System/40%,
   the token described as "lines, borders" — at a full 1px rather than the half-pixel
   hairlines the other pages use. */
.ebk-browser__item + .ebk-browser__item {
  margin-top: var(--w48);
  padding-top: var(--w48);
  border-top: 1px solid var(--navy-40);
}

/* ---- Card (frame 6201:91870) ------------------------------------------ */

.ebk-browser__card {
  display: flex;
  align-items: center;
  gap: var(--w40);
}

/* 302x435 portrait, radius 6. As a ratio rather than fixed attributes so the cover
   rides the fluid scale — and it is a *portrait* PDF cover now: the pre-redesign
   uploads were landscape screenshots (1024x768), the frames are 302x435. */
.ebk-browser__cover {
  display: block;
  flex: 0 0 auto;
  width: var(--w302);
  aspect-ratio: 302 / 435;
  object-fit: cover;
  border-radius: var(--w6);
}

.ebk-browser__body {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--w16);
}

/* date · "-" · size · page count · downloads, all Body/Small in System/70% except
   the dash, which the frame sets in System/100%. */
.ebk-browser__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--w12);
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
}

.ebk-browser__dash {
  color: var(--navy);
}

.ebk-browser__metrics {
  display: inline-flex;
  align-items: center;
  gap: var(--w6);
}

.ebk-browser__metrics > span {
  display: inline-flex;
  align-items: center;
  gap: var(--w6);
}

/* 3px, smaller than the 4px dots on the insights cards. */
.ebk-browser__dot {
  flex: 0 0 auto;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: currentColor;
}

.ebk-browser__group {
  display: flex;
  flex-direction: column;
  gap: var(--w32);
}

.ebk-browser__text {
  display: flex;
  flex-direction: column;
  gap: var(--w8);
}

/* Header/Desktop/H4 — Bold 28/36. */
.ebk-browser__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w28);
  font-weight: 700;
  line-height: var(--w36);
  color: var(--navy);
}

.ebk-browser__desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-70);
}

/* ---- The download trigger --------------------------------------------
   "Download E-Book" in Primary/Dark Blue with the 18px link glyph — Inter SemiBold
   16/20, which is the design system's Button Big. A button, not a link: the PDF is
   private and only ever reachable through the 24-hour URL the modal has us e-mail. */

.ebk-browser__download {
  display: inline-flex;
  align-items: center;
  gap: var(--w8);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--blue-dark);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.ebk-browser__download:hover {
  color: var(--blue);
}

.ebk-browser__download-icon {
  display: block;
  flex: 0 0 auto;
  width: var(--w18);
  height: var(--w18);
}

/* ---- Phone (Figma 6201:92539) ---------------------------------------- */
@media (max-width: 768px) {
  /* 35 under the hero (which ends at y=409) — the frame's card starts at 444. */
  /* The phone keeps the frame's arrangement: the pills are the white card's first
     row, so the bar carries the fill and the top corners and the panel the bottom. */
  .sec-e-books-browser {
    margin: 0 var(--m12) var(--m20);
    padding: var(--m20) var(--m16) var(--m16);
    border-radius: 0 0 var(--m8) var(--m8);
    scroll-margin-top: var(--m88);
  }

  /* The frame insets the pill row 8 from the card edge while the rows sit at 16, so
     the row is pulled back out of the section's own padding. It overflows its 353 of
     width (118+159+122+221 plus three 8s = 644) and scrolls sideways rather than
     wrapping into a second line the design does not have. */
  .ebk-browser__tabs {
    gap: var(--m8);
    /* 35 under the hero (which ends at 409) — the frame's card starts at 444. */
    margin: var(--m35) var(--m12) 0;
    padding: var(--m16) 0 0 var(--m8);
    background: var(--white);
    border-radius: var(--m8) var(--m8) 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ebk-browser__tabs::-webkit-scrollbar {
    display: none;
  }

  .ebk-browser__tab {
    height: var(--m48);
    padding: var(--m8) var(--m28);
    border-radius: var(--m40);
    font-size: var(--m16);
    line-height: var(--m20);
  }

  /* Still 52 from the pill row to the first card: 20 of that is the panel's own
     padding-top now that the bar is a sibling. */
  .ebk-browser__list {
    margin-top: var(--m32);
  }

  /* No rule between rows on the phone — just 48 of space. */
  .ebk-browser__item + .ebk-browser__item {
    margin-top: var(--m48);
    padding-top: 0;
    border-top: 0;
  }

  /* The card stacks, and the cover is centred and narrower than the row: 234 of the
     337 available, still 302:435. */
  .ebk-browser__card {
    flex-direction: column;
    align-items: center;
    gap: var(--m32);
  }

  .ebk-browser__cover {
    width: var(--m234);
    border-radius: var(--m6);
  }

  .ebk-browser__body {
    width: 100%;
    gap: var(--m16);
  }

  /* The date drops onto its own line above the metrics, so the row becomes a column
     and the dash the frame shows between them on desktop is not drawn. */
  .ebk-browser__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m8);
    font-size: var(--m12);
    line-height: var(--m18);
  }

  .ebk-browser__dash {
    display: none;
  }

  .ebk-browser__metrics,
  .ebk-browser__metrics > span {
    gap: var(--m6);
  }

  .ebk-browser__dot {
    width: var(--m3);
    height: var(--m3);
  }

  .ebk-browser__group {
    gap: var(--m24);
  }

  .ebk-browser__text {
    gap: var(--m8);
  }

  /* Header/Mobile/H4 — Bold 24/32. */
  .ebk-browser__title {
    font-size: var(--m24);
    line-height: var(--m32);
  }

  .ebk-browser__desc {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  /* Button Big holds its 16/20 at both breakpoints. */
  .ebk-browser__download {
    gap: var(--m8);
    font-size: var(--m16);
    line-height: var(--m20);
  }

  .ebk-browser__download-icon {
    width: var(--m18);
    height: var(--m18);
  }
}

/* ==========================================================================
   The e-mail gate
   Figma 6320:17523 (form) · 6323:37586 (sent) · phone 6323:37698 / 6323:37987

   Two things about this design are easy to get wrong from a description: on
   desktop the submit sits **beside** the input (the phone stacks them), and there
   is no field label — the 24/32 title *is* the instruction.

   The shell is a fixed 805x581 on desktop for both states, with the content block
   centred in it: the form's content is 369 tall and the sent state's 177, and the
   frame pads each to the same 581. The phone hand-sizes the two instead — 581 for
   the form, 443 for the sent state — which `min-height` plus symmetric padding
   reproduces exactly: the form's 443 of content plus 2x69 lands on 581, and the
   sent state's 181 falls under the 443 floor.
   ========================================================================== */

.ebk-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* System/100% at 15% — the frame's flat navy scrim. */
  background: rgba(17, 36, 74, 0.15);
}

.ebk-modal {
  position: fixed;
  z-index: 101;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w805);
  height: var(--w581);
  padding: 0 var(--w60);
  border-radius: var(--w24);
  background: var(--white);
  overflow: hidden;
}

.ebk-modal__close {
  position: absolute;
  top: var(--w20);
  right: var(--w20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--w40);
  height: var(--w40);
  padding: var(--w8);
  border: 0;
  border-radius: var(--w4);
  background: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.ebk-modal__close:hover {
  background: var(--navy-20);
}

/* The exported icons are the **glyphs**, not the 18x18 boxes the frame draws them
   in: `icon-close.svg` is 10.5 square (the frame insets the Union 20.83% of 18),
   `icon-arrow-white.svg` is 12 (inset 16.67%), and the mail glyph is 16.5x13.5.
   Drawing any of them at 18 blew them up — the cross by 71%, the arrow by 50% — and
   stretched the envelope out of shape. `calc(var(--w1) * N)` is one frame-pixel times
   N, which keeps the half-pixels the fluid scale cannot emit on its own. */
.ebk-modal__close img {
  display: block;
  width: calc(var(--w1) * 10.5);
  height: calc(var(--w1) * 10.5);
}

/* ---- Shared head: the 83 tile and the instruction ---------------------- */

.ebk-modal__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w24);
  text-align: center;
}

.ebk-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--w83);
  height: var(--w83);
  border-radius: var(--w16);
  background: var(--navy-20);
}

.ebk-modal__icon img {
  display: block;
  width: var(--w42);
  height: var(--w42);
}

/* Title/Desktop/Title 1 — SemiBold 24/32. */
.ebk-modal__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w24);
  font-weight: 600;
  line-height: var(--w32);
  color: var(--navy);
}

/* ---- Form state ------------------------------------------------------- */

.ebk-modal__form {
  display: flex;
  flex-direction: column;
  /* 80 between the instruction and the form on desktop, 40 on the phone. */
  gap: var(--w80);
  width: 100%;
}

.ebk-modal__fields {
  display: flex;
  flex-direction: column;
  gap: var(--w22);
}

.ebk-modal__row {
  display: flex;
  align-items: center;
  gap: var(--w8);
}

/* h56, radius 44, a System/50% hairline, and 20 of padding on the left against 9
   on the right — the frame leaves that much room for the submit beside it. */
.ebk-modal__field {
  display: flex;
  align-items: center;
  gap: var(--w8);
  flex: 1 1 0;
  min-width: 0;
  height: var(--w56);
  padding: 0 var(--w9) 0 var(--w20);
  border: 1px solid var(--navy-50);
  border-radius: var(--w44);
  background: var(--white);
}

.ebk-modal__field img {
  display: block;
  flex: 0 0 auto;
  width: calc(var(--w1) * 16.5);
  height: calc(var(--w1) * 13.5);
}

.ebk-modal__field[data-invalid='true'] {
  border-color: var(--blue);
}

.ebk-modal__input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy);
}

.ebk-modal__input::placeholder {
  color: var(--navy-70);
}

/* Chrome paints its own background behind an autofilled value — a grey-blue band
   sitting inside the rounded field, which is what showed up once the address was
   filled in. There is no property that switches it off; the standing trick is an
   inset shadow large enough to cover the field, since the shadow paints over the
   UA background while `background-color` does not. `-webkit-text-fill-color` is
   needed too, or the text keeps the UA's colour. */
.ebk-modal__input:-webkit-autofill,
.ebk-modal__input:-webkit-autofill:hover,
.ebk-modal__input:-webkit-autofill:focus,
.ebk-modal__input:-webkit-autofill:active {
  box-shadow: inset 0 0 0 100px var(--white);
  -webkit-text-fill-color: var(--navy);
  caret-color: var(--navy);
  transition: background-color 100000s;
}

.ebk-modal__input:autofill {
  box-shadow: inset 0 0 0 100px var(--white);
}

.ebk-modal__input:focus {
  outline: 0;
}

.ebk-modal__field:focus-within {
  border-color: var(--blue);
}

/* Go Blue, h56, radius 32 — 24 of padding on the left against 20 on the right,
   which is the design system's asymmetric button padding (the label leads, the
   glyph trails). */
.ebk-modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  flex: 0 0 auto;
  height: var(--w56);
  padding: 0 var(--w20) 0 var(--w24);
  border: 0;
  border-radius: var(--w32);
  background: var(--btn-blue);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.ebk-modal__submit:hover:not(:disabled) {
  background: var(--blue-dark);
}

.ebk-modal__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.ebk-modal__submit img {
  display: block;
  width: var(--w12);
  height: var(--w12);
}

/* ---- The opt-in ------------------------------------------------------
   The frame draws a 32 hit area with the box itself inset 16.67% of it — a 21.3
   square with a 1.5px System/70% border at radius 3.6. Ticking it is what sends
   the address to `email_list`; leaving it alone means the address is used for the
   one message and dropped. */

.ebk-modal__optin {
  display: flex;
  align-items: flex-start;
  gap: var(--w16);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--navy-70);
  cursor: pointer;
}

.ebk-modal__optin input {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: var(--w32);
  height: var(--w32);
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.ebk-modal__optin input::before {
  content: '';
  position: absolute;
  inset: 16.67%;
  border: 1.5px solid var(--navy-70);
  border-radius: var(--w4);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* The tick is a centred glyph in the box's own background rather than the usual
   two-borders-of-a-rotated-square trick. That trick has to be nudged into place with
   hand-picked offsets, and those offsets do not survive the box changing size on the
   fluid scale — which is exactly how it ended up sitting off-centre. A background
   image centred in the same box cannot drift. */
.ebk-modal__optin input:checked::before {
  border-color: var(--blue);
  background: var(--blue) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2.5%206.3l2.4%202.4L9.6%203.6'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 60% 60%;
}

.ebk-modal__optin input:focus-visible::before {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.ebk-modal__optin a {
  color: inherit;
  text-decoration: underline;
}

.ebk-modal__optin a:hover {
  color: var(--blue);
}

/* ---- Sent state ------------------------------------------------------
   Icon, 24, then the pair: SemiBold 24/32 over Body/xLarge 20/26 in System/70%,
   12 apart. The head already ends with the title, so the 12 is this container's
   own gap. */

.ebk-modal__sent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w12);
  width: 100%;
  text-align: center;
}

.ebk-modal__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--w20);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-70);
}

/* ---- Error toast -----------------------------------------------------
   Not in the frames: the design has no error state, and the request was for the
   message to rise from the bottom centre of the page rather than sit inside the
   modal. Fixed and rendered outside the dialog on purpose — Radix centres its
   content with a transform, and a `position: fixed` child of a transformed box is
   positioned against that box, not the viewport. */

.ebk-toast {
  position: fixed;
  z-index: 120;
  bottom: var(--w40);
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--w12);
  max-width: min(90vw, var(--w560));
  padding: var(--w16) var(--w24);
  border-radius: var(--w12);
  background: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--white);
  box-shadow: 0 var(--w8) var(--w24) rgba(17, 36, 74, 0.24);
  transform: translateX(-50%);
  animation: ebk-toast-in var(--dur) var(--ease);
}

@keyframes ebk-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, var(--w16));
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ebk-toast {
    animation: none;
  }
}

/* ---- Phone (Figma 6323:37698 / 6323:37987) ---------------------------- */
@media (max-width: 768px) {
  .ebk-modal {
    width: var(--m345);
    height: auto;
    /* 581 for the form (443 of content + 2x69), 443 for the sent state, which
       falls under the floor. */
    min-height: var(--m443);
    padding: var(--m69) var(--m20);
    border-radius: var(--m24);
  }

  .ebk-modal__close {
    top: var(--m16);
    right: var(--m16);
    width: var(--m40);
    height: var(--m40);
    padding: var(--m8);
    border-radius: var(--m4);
  }

  .ebk-modal__close img {
    width: calc(var(--m1) * 10.5);
    height: calc(var(--m1) * 10.5);
  }

  .ebk-modal__field img {
    width: calc(var(--m1) * 16.5);
    height: calc(var(--m1) * 13.5);
  }

  .ebk-modal__submit img {
    width: var(--m12);
    height: var(--m12);
  }

  .ebk-modal__head {
    gap: var(--m24);
  }

  .ebk-modal__icon {
    width: var(--m83);
    height: var(--m83);
    border-radius: var(--m16);
  }

  .ebk-modal__icon img {
    width: var(--m42);
    height: var(--m42);
  }

  /* Title/Mobile/Title 1 — 20/26, three lines in the frame. */
  .ebk-modal__title {
    font-size: var(--m20);
    line-height: var(--m26);
  }

  .ebk-modal__form {
    gap: var(--m40);
  }

  .ebk-modal__fields {
    gap: var(--m22);
  }

  /* The submit drops under the input rather than sitting beside it. */
  .ebk-modal__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--m12);
  }

  /* `flex: 0 0 auto` is load-bearing: the desktop rule sets `flex: 1 1 0` to share
     the row with the submit, and once the row becomes a column that basis applies to
     the *height* — the field collapsed to 25px instead of 56. */
  .ebk-modal__field {
    flex: 0 0 auto;
    height: var(--m56);
    padding: 0 var(--m20);
    border-radius: var(--m44);
    gap: var(--m8);
  }

  .ebk-modal__input {
    font-size: var(--m16);
    line-height: var(--m23);
  }

  .ebk-modal__submit {
    height: var(--m56);
    padding: 0 var(--m20) 0 var(--m24);
    border-radius: var(--m32);
    font-size: var(--m16);
    line-height: var(--m20);
  }

  /* 12 between the box and its label on the phone, 16 on desktop. */
  .ebk-modal__optin {
    gap: var(--m12);
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .ebk-modal__optin input {
    width: var(--m32);
    height: var(--m32);
  }

  .ebk-modal__optin input::before {
    border-radius: var(--m4);
  }


  /* 8 between the two lines in the sent state, against 12 on desktop. */
  .ebk-modal__sent {
    gap: var(--m8);
  }

  .ebk-modal__body {
    font-size: var(--m14);
    line-height: var(--m20);
  }

  .ebk-toast {
    bottom: var(--m24);
    max-width: calc(100% - 2 * var(--m16));
    padding: var(--m12) var(--m16);
    border-radius: var(--m12);
    font-size: var(--m14);
    line-height: var(--m20);
  }

  @keyframes ebk-toast-in {
    from {
      opacity: 0;
      transform: translate(-50%, var(--m12));
    }
    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }
}