/* ==========================================================================
   THE PROOF BAND OF THE SHOPIFY APP PAGE  (.ccxp, post 1977)

   Four subjects, one at a time, on the open page ground.

   WHAT THE PAGE DATA GIVES AND WHAT THIS FILE GIVES

   The page data holds four containers under each other, each with a numeral,
   a hidden short name, a headline, a paragraph and an evidence block. That is
   already a readable section and it is what a reader without scripting gets.

   This file gives it the shape: two columns inside a panel, a hair line
   between them, a ghost numeral at the outer right edge, and the deck the
   script needs. Nothing here carries a fill, a frame or a corner radius: the
   band follows the reference blocks of the home page and the tools block
   beside them, where the only lines on the screen are hair lines.

   TWO STATES

   .ccxp-deck            all four panels under each other, hair line between
                         them. No scripting, or scripting that never finished.
   .ccxp-deck.ccxp-on    all four panels in one grid cell, one of them visible.
                         The class is set by assets/ccx-appproof28.js at the
                         moment the row of names stands in the document.

   The second state is a single grid cell rather than display switching, so
   the deck is always as tall as its tallest panel and the hair line under it
   does not move while a reader switches.

   ORDER OF THE CHILDREN INSIDE A PANEL

   numeral, short name, headline, paragraph, evidence. The first two are taken
   out of the flow, the last three are placed by name in the grid, so a widget
   added later lands wherever the builder puts it without disturbing the three
   that are placed.

   All four containers are e-con-full, so they hold their children directly and
   there is no inner wrapper to reach through. Verified in the rendered markup,
   not assumed: a boxed container would need .e-con-inner in every selector.
   ========================================================================== */

.ccxp {
  /* The hair line of the whole site: a line that fades out at both ends, so
   * it reads as a rule under a block and not as the edge of a box. Read off
   * the tools block of the home page. */
  --ccxp-rule: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0) 100%);
  /* A vertical one for the divider between the two columns of a panel. */
  --ccxp-vrule: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.13) 18%,
    rgba(255, 255, 255, 0.13) 82%,
    rgba(255, 255, 255, 0) 100%);
  --ccxp-inset: 20px;   /* outer inset of the block, as the tools block has */
  --ccxp-gap: 56px;     /* between the two columns of a panel */
  --ccxp-lane: 190px;   /* kept free on the right for the ghost numeral */
  --ccxp-num: 250px;
  --ccxp-numtop: -18px;
  --ccxp-orange: #ff8e2b;
}

/* ==================================================================
   1. THE ROW OF NAMES

   Four buttons on the page ground, no fill, no frame: the short name of a
   panel with its numeral in front of it. The active one is white with an
   orange numeral and an orange bar under it that lies on the hair line, so
   the line reads as the rail the names sit on.

   The values are the ones the tools row of the home page uses. They are
   repeated here rather than shared, because that row belongs to another
   module and a shared rule between two sections is a rule neither of them
   can change.
   ================================================================== */

.ccxp-nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 34px;
  width: 100%;
  align-self: stretch;
  padding: 0 var(--ccxp-inset);
  margin: 0 0 30px;
  box-sizing: border-box;
}

.ccxp-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ccxp-rule);
  pointer-events: none;
}

.ccxp-tabbtn {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 0 15px;
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  /* A second press on the same name would otherwise mark its label, and the
   * page paints a selection in a warm pink that sits badly on the rail. */
  -webkit-user-select: none;
  user-select: none;
  transition: color .25s ease;
}

/* The theme paints a background and an underline on anything that looks like
 * a control. Written out for the three states it uses. */
.ccxp-tabbtn.ccxp-tabbtn:hover,
.ccxp-tabbtn.ccxp-tabbtn:focus,
.ccxp-tabbtn.ccxp-tabbtn:active {
  background-color: transparent;
  text-decoration: none;
}

.ccxp-tabbtn.ccxp-tabbtn:hover,
.ccxp-tabbtn.ccxp-tabbtn:focus-visible { color: rgba(255, 255, 255, 0.86); }

.ccxp-tabbtn.ccxp-tabbtn.is-active,
.ccxp-tabbtn.ccxp-tabbtn.is-active:hover,
.ccxp-tabbtn.ccxp-tabbtn.is-active:focus { color: #FFFFFF; }

.ccxp-tabbtn:focus-visible {
  outline: 2px solid rgba(255, 142, 43, 0.75);
  outline-offset: 4px;
  border-radius: 4px;
}

.ccxp-tabn {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, 0.26);
  transition: color .25s ease;
}

.ccxp-tabbtn.is-active .ccxp-tabn { color: var(--ccxp-orange); }

/* The bar of the active name. It grows out of the left edge rather than
 * fading in, so switching reads as a move along the rail. */
.ccxp-tabbtn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #FF8E2B 0%, #CE5904 100%);
  box-shadow: 0 0 14px rgba(255, 142, 43, 0.45);
  opacity: 0;
  transform: scaleX(.28);
  transform-origin: left center;
  transition: opacity .26s ease, transform .32s cubic-bezier(.2, .85, .3, 1);
  pointer-events: none;
}

/* A third of the bar under the pointer. The pointer of this site is a dot
 * with corner brackets that snap to anything pressable, and that list lives
 * in cc-fx.php, which this module does not own; the names are therefore a
 * control the brackets do not reach, and they answer the pointer themselves. */
.ccxp-tabbtn:hover::after,
.ccxp-tabbtn:focus-visible::after { opacity: .34; transform: scaleX(1); }

/* The hovered state of the active name written out: a pseudo class counts the
 * same as a class, so :hover::after and .is-active::after weigh the same and
 * the later one would win. Under the pointer the bar of the name a reader is
 * already on would then drop to a third. */
.ccxp-tabbtn.ccxp-tabbtn.is-active::after,
.ccxp-tabbtn.ccxp-tabbtn.is-active:hover::after,
.ccxp-tabbtn.ccxp-tabbtn.is-active:focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ==================================================================
   2. THE DECK
   ================================================================== */

.ccxp-deck {
  position: relative;
  width: 100%;
}

/* The closing line under the block, the counterpart of the rail over it. */
.ccxp-deck::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  width: auto;
  height: 1px;
  border: 0;
  background: var(--ccxp-rule);
  pointer-events: none;
}

/* One cell, four panels in it. Three class names, because the builder writes
 * the display of a container through a custom property on .e-con and the
 * flex class sits on the element itself. */
.ccxp-deck.ccxp-on.ccxp-on {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}

.ccxp-deck.ccxp-on > .ccxp-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .34s ease, transform .42s cubic-bezier(.2, .85, .3, 1),
              visibility 0s linear .34s;
  pointer-events: none;
}

.ccxp-deck.ccxp-on > .ccxp-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .34s ease, transform .42s cubic-bezier(.2, .85, .3, 1),
              visibility 0s linear 0s;
  pointer-events: auto;
}

/* ==================================================================
   3. A PANEL

   Two columns: what the work demands on the left, what answers it in our
   own apps on the right, with a hair line between them. The numeral stands
   outside the copy at the right edge, the way a reference block puts it.
   ================================================================== */

/* Two columns, and two rows in which only the first is measured by its
 * content. Without the second row taking the rest, the headline and the
 * paragraph would be pushed apart by whatever height the evidence column
 * beside them happens to have, because that column spans both rows. */
.ccxp-panel.ccxp-panel.ccxp-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: var(--ccxp-gap);
  row-gap: 14px;
  box-sizing: border-box;
}

/* Without scripting the four panels stand under each other and need a line
 * between them. The deck draws the one below the last of them. */
.ccxp-deck:not(.ccxp-on) > .ccxp-panel + .ccxp-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ccxp-h  { grid-column: 1; grid-row: 1; }
.ccxp-p  { grid-column: 1; grid-row: 2; }
.ccxp-ev { grid-column: 2; grid-row: 1 / span 2; position: relative; }

/* Everything a reader sees stands over the numeral. */
.ccxp-panel > .elementor-element { position: relative; z-index: 1; }

/* ---- the ghost numeral -------------------------------------------------
 * Same treatment as a reference block: the top right corner of the panel,
 * a large glyph at five hundredths of white, outside the copy rather than
 * behind the middle of it. The right hand column keeps a lane free for it,
 * so the evidence rows end before the ink of the glyph begins.
 *
 * The numeral is a real heading widget and not a pseudo element. The pseudo
 * element of an Elementor container carries the frame and the height of that
 * container, and every round that used one for a numeral had to undo those
 * two first; a widget the builder shows in the tree does not have the
 * problem and can be edited by a person. */
.ccxp-num.ccxp-num {
  position: absolute;
  right: 0;
  top: var(--ccxp-numtop);
  z-index: 0;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Five class names on the widget and two on the title. The builder writes the
 * type of a widget as ".elementor-<post> .elementor-element.elementor-element-<id>
 * .elementor-heading-title", which is four, and it wrote a twelve pixel pill
 * label there for the card this band used to be. */
.ccxp-num.ccxp-num.ccxp-num.ccxp-num .elementor-heading-title.elementor-heading-title {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: var(--ccxp-num);
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.05);
  text-align: right;
  /* The pill the numeral used to sit in belonged to the card layout. */
  background: none;
  border: 0;
  min-width: 0;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
}

/* The 1 carries less ink than any other digit at the same size, so it is
 * given a little more, exactly as the tools block does. */
.ccxp-panel:first-child .ccxp-num.ccxp-num.ccxp-num.ccxp-num .elementor-heading-title {
  color: rgba(255, 255, 255, 0.065);
}

/* The short name is only there for the row of names to read. */
.ccxp-tab { display: none !important; }

/* ---- the two columns -------------------------------------------------- */

.ccxp-h.ccxp-h { margin: 0; }

/* The headline of a panel was set for a quarter of a two by two grid, 21 on
 * 28, which is a card title. It is now the one headline of a block that fills
 * the width of the section, so it is given the size that rank has, the same
 * step down from the section headline the tools block of the home page keeps.
 * Five class names on the widget and two on the title, because the builder
 * writes the type of a widget with four. */
.ccxp-h.ccxp-h.ccxp-h.ccxp-h .elementor-heading-title.elementor-heading-title {
  font-size: 27px;
  line-height: 35px;
}

.ccxp-p.ccxp-p { margin: 0; padding-right: 8px; }

.ccxp-p.ccxp-p.ccxp-p.ccxp-p .elementor-heading-title.elementor-heading-title {
  font-size: 17px;
  line-height: 28px;
}

.ccxp-ev.ccxp-ev { margin: 0; padding-left: 0; }

/* The divider between the columns. Drawn on the evidence block and not on
 * the panel, so it starts and ends with the column it separates however
 * long either of them turns out to be. */
.ccxp-ev::before {
  content: "";
  position: absolute;
  left: calc(var(--ccxp-gap) / -2);
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--ccxp-vrule);
  pointer-events: none;
}

/* ==================================================================
   4. THE EVIDENCE BLOCK

   A label, then three lines, each with a hair line over it and a small
   orange mark in front of it. Written as a text block in the page data so
   the lines can be edited by a person; everything below is the shape.
   ================================================================== */

.ccxp-ev .elementor-widget-container { padding-right: var(--ccxp-lane); }

.ccxp-evh {
  margin: 0 0 4px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 20px;
  color: var(--ccxp-orange);
}

.ccxp-ev ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ccxp-ev li {
  position: relative;
  margin: 0;
  padding: 13px 0 13px 22px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 25px;
  color: rgba(255, 255, 255, 0.76);
  border-top: 1px solid rgba(255, 255, 255, 0.085);
}

.ccxp-ev li:first-child { border-top-color: rgba(255, 255, 255, 0.12); }
.ccxp-ev li:last-child { padding-bottom: 0; }

/* The mark in front of a line: a small orange disc with a faint bloom, the
 * quiet member of the family the live badge of this page belongs to. It has
 * no animation of its own; a pulse is the signal that something is running,
 * and these are statements, not states. */
.ccxp-ev li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FF8E2B 0%, #CE5904 100%);
  box-shadow: 0 0 10px rgba(255, 142, 43, 0.42);
}

/* The one link in the band. It stands inside a line of evidence, so it is
 * marked as a link and nothing more: no pill, no glint, no travelling light.
 * Those belong to a button and this is a word in a sentence. */
.ccxp-ev a {
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: inset 0 -1px 0 0 rgba(255, 142, 43, 0.8);
  transition: box-shadow .22s ease, color .22s ease;
}

.ccxp-ev a:hover,
.ccxp-ev a:focus-visible {
  color: #FFD9B4;
  box-shadow: inset 0 -1px 0 0 rgba(255, 142, 43, 0.95);
}

.ccxp-ev a:focus-visible {
  outline: 2px solid rgba(255, 142, 43, 0.75);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==================================================================
   5. ARRIVAL

   The panel that is switched to brings its parts in one after the other,
   left column first, then the three lines of evidence. Short, and only on
   the panel that has just become the active one, so nothing moves while a
   reader is reading.
   ================================================================== */

@keyframes ccxp-rise {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-h,
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-p,
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-evh,
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-ev li {
  animation: ccxp-rise .46s cubic-bezier(.2, .85, .3, 1) both;
}

.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-p    { animation-delay: .05s; }
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-evh  { animation-delay: .07s; }
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-ev li:nth-child(1) { animation-delay: .11s; }
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-ev li:nth-child(2) { animation-delay: .16s; }
.ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-ev li:nth-child(3) { animation-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .ccxp-deck.ccxp-on > .ccxp-panel,
  .ccxp-deck.ccxp-on > .ccxp-panel.is-active { transform: none; transition: opacity .01s linear; }
  .ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-h,
  .ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-p,
  .ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-evh,
  .ccxp-deck.ccxp-on > .ccxp-panel.is-active .ccxp-ev li { animation: none; }
  .ccxp-tabbtn::after { transition: opacity .01s linear; transform: none; }
}

/* ==================================================================
   6. NARROWER WINDOWS
   ================================================================== */

@media (max-width: 1279px) {
  .ccxp {
    --ccxp-gap: 44px;
    --ccxp-lane: 140px;
    --ccxp-num: 190px;
    --ccxp-numtop: -12px;
  }
}

/* Below 1025 the two columns become one. The divider turns into a line over
 * the evidence, which is the same statement in the direction the block now
 * reads. */
@media (max-width: 1024px) {
  .ccxp {
    --ccxp-inset: 16px;
    --ccxp-lane: 0px;
    --ccxp-num: 190px;
    --ccxp-numtop: -8px;
  }

  .ccxp-panel.ccxp-panel.ccxp-panel {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  .ccxp-h  { grid-column: 1; grid-row: auto; }
  .ccxp-p  { grid-column: 1; grid-row: auto; }
  .ccxp-ev { grid-column: 1; grid-row: auto; margin-top: 22px; }

  .ccxp-ev::before { display: none; }

  .ccxp-p.ccxp-p { padding-right: 96px; }

  .ccxp-h.ccxp-h.ccxp-h.ccxp-h .elementor-heading-title.elementor-heading-title {
    font-size: 24px;
    line-height: 32px;
  }

  .ccxp-nav { margin-bottom: 24px; gap: 6px 26px; }
}

@media (max-width: 767px) {
  .ccxp {
    --ccxp-inset: 12px;
    --ccxp-num: 132px;
    --ccxp-numtop: -2px;
  }

  /* The row wraps here, so every name is given its own piece of rail and the
   * line under the row would otherwise sit under the last of them only. */
  .ccxp-nav {
    gap: 0;
    margin-bottom: 20px;
    flex-direction: column;
    align-items: stretch;
  }

  .ccxp-nav::after { display: none; }

  .ccxp-tabbtn {
    padding: 11px 0;
    font-size: 15px;
    justify-content: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }

  .ccxp-tabbtn:first-child { border-top: 0; }

  .ccxp-tabbtn::after { height: 2px; bottom: -1px; }

  .ccxp-p.ccxp-p { padding-right: 0; }

  .ccxp-h.ccxp-h.ccxp-h.ccxp-h .elementor-heading-title.elementor-heading-title {
    font-size: 21px;
    line-height: 29px;
  }

  .ccxp-p.ccxp-p.ccxp-p.ccxp-p .elementor-heading-title.elementor-heading-title {
    font-size: 16px;
    line-height: 26px;
  }

  .ccxp-ev li {
    padding: 11px 0 11px 20px;
    font-size: 15px;
    line-height: 24px;
  }

  .ccxp-ev li::before { top: 20px; }
}