/* ============================================================================
   IMAPAC Download Tab — standalone edge tab for one PDF.
   Geometry and behaviour mirror the edge tab inside imapac-navbar.module; this copy exists because a
   page without the navbar (the APAC Calendar of Events) cannot load that module's stylesheet.
   Own .idt- prefix, so the two can never collide if a page ever carries both.
   ============================================================================ */

.idt {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 8900;              /* under a navbar (9000) and its drawer, above page content */
  display: flex;
  flex-direction: row;        /* card first in the DOM, tab last, so the card sits to its left */
  align-items: center;
  gap: 12px;
  transform: translateY(-50%);
  font-family: inherit;
  visibility: hidden;
  transition: visibility 0s linear 0.42s;
}
.idt.idt-on,
.idt.idt-has-card {
  visibility: visible;
  transition: visibility 0s;
}
.idt *,
.idt *::before,
.idt *::after { box-sizing: border-box; }

.idt-tab {
  position: relative;                /* carries the halo ring below */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  /* Roohi and Ana both asked for a more prominent button: bigger, and glowing.
     Was 22px 11px 26px, a 20px icon and a 14px label. */
  padding: 28px 15px 30px;
  background: var(--idt-bg, #C8221A);
  color: var(--idt-ink, #FFFFFF);
  text-decoration: none;
  border-radius: var(--idt-radius, 18px) 0 0 var(--idt-radius, 18px);
  box-shadow: var(--idt-glow), -6px 0 24px rgba(15, 18, 28, 0.30);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(calc(100% + 10px));
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease, filter 0.2s ease;
}
.idt.idt-on .idt-tab { opacity: 1; transform: none; }
/* ---------- prominence: a glow in the tab's own colour, and a halo ring ----------
   KEEP IN SYNC with .in-et-tab in imapac-navbar.module: same geometry, same effect. */
.idt { --idt-glow: 0 0 20px rgba(15, 18, 28, 0.30); }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  /* the coloured glow is added to the dark one, never a replacement: a pale accent glowing on a
     pale page shows nothing, and the dark ambient shadow is what lifts the tab off the page */
  .idt {
    --idt-glow: 0 0 26px 2px color-mix(in srgb, var(--idt-solid, #C8221A) 62%, transparent),
                0 0 16px rgba(15, 18, 28, 0.22);
  }
}
/* three sides only: the tab is flush to the viewport edge and must not widen the page */
.idt-tab::after {
  content: '';
  position: absolute;
  inset: -4px 0 -4px -4px;
  border-radius: inherit;
  border: 2.5px solid var(--idt-ink, #FFFFFF);
  border-right: 0;
  opacity: 0.5;
  pointer-events: none;
  filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.45));
}
.idt.idt-on .idt-tab::after { animation: idt-halo 1.6s ease-in-out 3; }
@keyframes idt-halo {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.95; }
}

/* ---------- the gradient ----------
   KEEP IN SYNC with .in-et-tab: the same relative-colour hue rotation, which gives the tab a ramp
   inside the page's own hue family with nothing to fill in. It reads --idt-solid, not --idt-bg,
   because --idt-bg may already hold a whole linear-gradient() string and a gradient function
   cannot be an argument to a colour function.

   The rotation runs one way, toward the warm end: gold sits at OKLCH hue 85, so rotating the
   other way turns the gold pages olive. The far stop darkens rather than lightens, because the
   ink colour is fixed per page and lightening a mid fill erodes the label.

   A harder version was tried and reverted on Joyboy's call, 24 Sep 2026: a narrow hot band at the
   head at 3.4x chroma measured fine but read as two colours butted together rather than as a
   ramp. The ramp has to stay inside one hue family to read as one object.

   .idt-autograd is written by the markup only when the page has NOT set its own gradient, so an
   explicit accent-to-accent_end ramp chosen in the editor still wins. */
@supports (background: linear-gradient(oklch(from red l c h), red)) {
  .idt-autograd .idt-tab {
    background: linear-gradient(168deg,
                oklch(from var(--idt-solid, #C8221A) l c calc(h - 42)) 0%,
                var(--idt-solid, #C8221A) 52%,
                oklch(from var(--idt-solid, #C8221A) calc(l - 0.07) c h) 100%);
  }
  .idt {
    --idt-glow: 0 0 30px 3px oklch(from var(--idt-solid, #C8221A) l c calc(h - 42) / 0.68),
                0 0 16px rgba(15, 18, 28, 0.22);
  }
}
.idt-tab:hover { filter: brightness(1.08); transform: translateX(-3px); }
.idt-tab:focus { outline: none; }
.idt-tab:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.92); outline-offset: -6px; }

.idt-ico { display: block; width: 24px; height: 24px; flex: none; }
.idt-ico svg { width: 100%; height: 100%; display: block; }

/* vertical-rl + rotate(180deg) makes the words read bottom to top */
.idt-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

/* The foot of the tab: the one inversion in the object, so it reads as the terminal rather than as
   a second control. Two classes, because the tab is an <a> and the page theme's own link colour
   beats a single class; see the note at the foot of this file. --idt-solid, not --idt-bg, since
   --idt-bg may hold a gradient function and a gradient is not a colour. */
.imapac-download-tab .idt-cue {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--idt-ink, #FFFFFF);
  color: var(--idt-solid, #C8221A);
}
.imapac-download-tab .idt-cue svg { width: 14px; height: 14px; display: block; }

/* ---------- the pointer ----------
   KEEP IN SYNC with .in-et-ptr in imapac-navbar.module: same geometry, same pacing, same reasons.
   Three chevrons to the LEFT of the tab, travelling into it. Left, because the tab is welded to
   the right edge and anything past it forces a horizontal scrollbar on the whole page.

   Each chevron is stroked twice, a fat pass in the accent under a thin one in the ink, so the
   arrow body is the INK with an accent rim. One accent-coloured chevron measured too faint on a
   pale hero, and the ink is the safer body colour: a tab's ink is picked to contrast with its
   fill, and a fill is picked to sit on its page, so the ink contrasts with the page too.
   --idt-solid, not --idt-bg, since --idt-bg may hold a gradient and a gradient is not a stroke.

   The three chevrons are graduated, faintest at the far end and full strength against the tab, so
   direction is carried by the ramp as well as the shape - and so the arrow still POINTS during the
   two seconds of each cycle when nothing is moving.

   Positioned OUT OF FLOW, and that is not cosmetic: as an in-flow flex item it widened .idt well
   past the tab, and .idt has no pointer-events of its own, so the container hit-tested over a
   column of the page beside the tab. pointer-events:none on the cue is not enough when the
   assembly around it still catches the click. right:100% measures the tab's own box rather than
   hardcoding a width. It points for the whole visit, not only over the hero, and stops only when
   the reader takes the file. */
.imapac-download-tab .idt-ptr {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 7px;
  transform: translateY(-50%);   /* out of flow, so align-items no longer centres it */
  display: none;
  align-items: center;
  gap: 0;
  pointer-events: none;
}
.idt.idt-on .idt-ptr { display: flex; }
.idt.idt-has-card .idt-ptr,
.idt.idt-pointed .idt-ptr { display: none; }  /* the card is louder; taking the file ends it */

.imapac-download-tab .idt-chev {
  display: block;
  width: 15px;
  height: 24px;
  flex: none;
  opacity: var(--idt-chev-base, 1);
  animation: idt-travel 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.imapac-download-tab .idt-chev:nth-child(1) { --idt-chev-base: 0.42; }
.imapac-download-tab .idt-chev:nth-child(2) { --idt-chev-base: 0.7; animation-delay: 0.15s; }
.imapac-download-tab .idt-chev:nth-child(3) { --idt-chev-base: 1;   animation-delay: 0.3s; }
.imapac-download-tab .idt-chev path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.imapac-download-tab .idt-chev-o { stroke: var(--idt-solid, #C8221A); stroke-width: 8; }
.imapac-download-tab .idt-chev-i { stroke: var(--idt-ink, #FFFFFF); stroke-width: 4.2; }

/* a wave toward the tab over the first 30 %, then 2.1s at rest with the arrow still drawn */
@keyframes idt-travel {
  0%        { opacity: var(--idt-chev-base, 1); transform: none; }
  12%       { opacity: 1;                       transform: translateX(5px); }
  30%, 100% { opacity: var(--idt-chev-base, 1); transform: none; }
}

@keyframes idt-nudge {
  0%, 100% { transform: none; }
  50%      { transform: translateX(-7px); }
}
.idt.idt-on .idt-tab.idt-nudge { animation: idt-nudge 1.1s ease-in-out 2; }

.idt-card {
  position: relative;
  width: 326px;
  max-width: calc(100vw - 108px);
  padding: 18px 18px 16px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 18, 28, 0.26);
  opacity: 0;
  transform: translateX(26px) scale(0.98);
  transition: opacity 0.3s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.idt-card[hidden] { display: none; }
.idt-card.idt-card-on { opacity: 1; transform: none; }

.idt-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-family: inherit;
  font-size: 22px;
  line-height: 1;
  color: #8A8F9C;
  cursor: pointer;
}
.idt-x:hover { background: rgba(0, 0, 0, 0.06); color: #1F1F1F; }
.idt-x:focus-visible { outline: 2px solid var(--idt-solid, #C8221A); outline-offset: 2px; }

.idt-eyebrow {
  margin: 0 34px 6px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--idt-solid, #C8221A);
}
.idt-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  color: #16233D;
}
.idt-note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #4B5263;
}
.idt-go {
  display: block;
  width: 100%;
  padding: 11px 16px;
  /* the solid accent, not the tab's gradient: white on the gradient's light end measured only 4.0:1 */
  background: var(--idt-solid, #C8221A);
  color: var(--idt-ink, #FFFFFF);
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.idt-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.idt-go:focus-visible { outline: 3px solid var(--idt-solid, #C8221A); outline-offset: 2px; }

@media (max-width: 900px) {
  .idt {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    transform: none;
  }
  .idt-tab {
    width: 100%;
    min-height: 52px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 15px 18px;
    /* the HubSpot chat launcher parks on the right end of the bar */
    padding-right: 92px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    font-size: 15px;
    letter-spacing: 0.1em;
    transform: translateY(100%);
    box-shadow: 0 -6px 24px rgba(15, 18, 28, 0.26);
  }
  .idt.idt-on .idt-tab { transform: none; }
  .idt-tab:hover { transform: none; }
  /* a bar welded to the bottom edge has no outline to glow around */
  .idt-tab::after { display: none; }
  .idt.idt-on .idt-tab.idt-nudge { animation: none; }
  .idt-label { writing-mode: horizontal-tb; transform: none; }
  /* Nothing to point at: the bar spans the whole width. Same selector shape as the rule that
     shows it, or it loses on specificity and the arrow survives onto the phone bar. */
  .idt.idt-on .idt-ptr { display: none; }

  /* no navbar on this page, so the card sits just below the top edge where nothing competes */
  .idt-card {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 12px;
    bottom: auto;
    width: auto;
    max-width: none;
    transform: translateY(-14px);
  }
  .idt-card.idt-card-on { transform: none; }

  /* the bar never eats the last line of the page */
  body.idt-barpad { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .idt, .idt-tab, .idt-card, .idt-go { transition: none !important; }
  .idt-tab, .idt-card { transform: none !important; opacity: 1 !important; }
  .idt-tab:hover { transform: none !important; }
  .idt.idt-on .idt-tab.idt-nudge { animation: none !important; }
  .idt.idt-on .idt-tab::after { animation: none !important; opacity: 0.5; }
  /* the arrow still points, it just stops moving */
  .imapac-download-tab .idt-chev {
    animation: none !important;
    opacity: 0.92;
    transform: none !important;
  }
}

/* The page theme colours every link (a rule that beats a single class), which turned the tab label and
   the card button into violet-on-violet: measured rgb(103,37,159) on both. These selectors carry two
   classes plus a link pseudo-class, so the module's own ink wins wherever it is dropped. */
.imapac-download-tab .idt-tab,
.imapac-download-tab .idt-tab:link,
.imapac-download-tab .idt-tab:visited,
.imapac-download-tab .idt-tab:hover,
.imapac-download-tab .idt-go,
.imapac-download-tab .idt-go:link,
.imapac-download-tab .idt-go:visited,
.imapac-download-tab .idt-go:hover {
  color: var(--idt-ink, #FFFFFF);
  text-decoration: none;
}