/* The connector's pages (connect.css) from 390 px phones to 2560 px screens, and the two pictures
 * that are not a step's bridge: a message's (the cube alone, its ice melted short and dripping)
 * and the landing page's fan of apps. Positions mirror the service's connect-scene.ts and
 * connect-picture.ts. */
.cc-connect-scene--melted {
  --cube-x: 250;
}
/* It looks down at what dripped. */
.cc-connect-scene--melted .cc-connect-cube {
  --cc-look-x: 0.45;
  --cc-look-y: 0.6;
}
.cc-connect-drops {
  fill: var(--cn-frost-edge);
  opacity: 0.9;
}
.cc-connect-drops--puddle {
  fill: var(--cn-lane);
  opacity: 0.35;
}
.cc-connect-scene--melted :is(.cc-connect-lane, .cc-connect-tip) {
  display: none;
}
.cc-connect-scene--melted .cc-connect-ground--tile {
  display: none;
}
/* The email's button, posting on: the cube waits without the melted ice. */
.cc-link-go .cc-connect-scene--melted :is(.cc-connect-ice, .cc-connect-drops, .cc-connect-lane) {
  visibility: hidden;
}

.cc-connect-scene--fan {
  --cube-x: 118;
  --cube-s: 184;
  --tile-s: 76;
}
.cc-connect-scene--fan .cc-connect-span:nth-of-type(2) {
  --cn-stagger: 140ms;
}
.cc-connect-scene--fan .cc-connect-span:nth-of-type(3) {
  --cn-stagger: 280ms;
}
.cc-connect-tile--fan {
  filter: drop-shadow(0 calc(12 * var(--u)) calc(14 * var(--u)) rgb(12 23 59 / 0.24));
}
.cc-connect-tile--1 {
  --tile-x: 572;
  --tile-y: 2;
}
.cc-connect-tile--2 {
  --tile-x: 656;
  --tile-y: 92;
}
.cc-connect-tile--3 {
  --tile-x: 572;
  --tile-y: 182;
}

/* Phones: the same picture, the objects bigger and closer; the controls full width. */
@media (max-width: 560px) {
  .cc-connect-page {
    padding-top: max(32px, calc(50vh - 290px), env(safe-area-inset-top));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(48px, env(safe-area-inset-bottom));
    padding-left: max(20px, env(safe-area-inset-left));
  }
  .cc-connect-scene {
    --h: 330;
    --cube-x: 6;
    --cube-y: 34;
    --cube-s: 262;
    --tile-x: 566;
    --tile-y: 62;
    --tile-s: 216;
    --tag-y: 314;
  }
  .cc-connect-bridge--wide {
    display: none;
  }
  .cc-connect-bridge--narrow {
    display: block;
  }
  .cc-connect-tag {
    font-size: 13px;
  }
  .cc-connect-host {
    font-size: 11px;
  }
  .cc-connect-panel {
    margin-top: 34px;
  }
  .cc-connect-sub {
    font-size: 15px;
  }
  .cc-connect-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: auto;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .cc-connect-field:focus-within,
  [data-wrong] .cc-connect-field {
    box-shadow: none;
  }
  .cc-connect-input {
    flex: none;
    height: 56px;
    padding: 0 18px;
    border-radius: 16px;
    background: rgb(255 255 255 / 0.9);
    box-shadow: inset 0 0 0 1px var(--cn-line);
  }
  .cc-connect-input:focus {
    box-shadow:
      inset 0 0 0 1.5px var(--cn-blue),
      0 0 0 4px var(--cn-ring);
  }
  [data-wrong] .cc-connect-input {
    box-shadow: inset 0 0 0 1.5px var(--cn-wrong);
  }
  .cc-connect-field .cc-connect-button {
    height: 54px;
    border-radius: 16px;
  }
  .cc-connect-code {
    --slot: 47px;
    --gap: 7px;
    height: 60px;
    font-size: 26px;
  }
  .cc-connect-slots > span {
    border-radius: 14px;
  }
  .cc-js .cc-connect-slots > span:nth-child(4) {
    margin-left: 8px;
  }
  .cc-js .cc-connect-code {
    width: calc(6 * var(--slot) + 5 * var(--gap) + 8px);
  }
  .cc-connect-scope li {
    font-size: 14px;
  }
  .cc-connect-answer {
    flex-direction: column-reverse;
    gap: 6px;
    width: 100%;
  }
  .cc-connect-answer .cc-connect-button {
    width: 100%;
    height: 54px;
  }
  .cc-connect-scene--melted {
    --cube-x: 228;
  }
  .cc-connect-scene--fan {
    --cube-x: 20;
    --cube-y: 52;
    --cube-s: 250;
    --tile-s: 100;
  }
  .cc-connect-tile--1 {
    --tile-x: 560;
    --tile-y: 6;
  }
  .cc-connect-tile--2 {
    --tile-x: 660;
    --tile-y: 115;
  }
  .cc-connect-tile--3 {
    --tile-x: 560;
    --tile-y: 224;
  }
}
@media (max-width: 360px) {
  .cc-connect-code {
    --slot: 41px;
    --gap: 6px;
    height: 54px;
    font-size: 23px;
  }
}
/* Big screens: the words and the controls grow with the picture. */
@media (min-width: 1800px) {
  .cc-connect {
    --cn-panel: min(100%, 700px);
    font-size: 18px;
  }
  .cc-connect-sub,
  .cc-connect-scope li {
    font-size: 18px;
  }
  .cc-connect-tag,
  .cc-connect-small {
    font-size: 15.5px;
  }
  .cc-connect-host {
    font-size: 13px;
  }
  .cc-connect-field {
    width: 500px;
    height: 68px;
  }
  .cc-connect-input {
    font-size: 19px;
  }
  .cc-connect-button {
    height: 52px;
    font-size: 17px;
  }
  .cc-connect-field .cc-connect-button {
    height: 54px;
  }
  .cc-connect-code {
    --slot: 64px;
    --gap: 12px;
    height: 78px;
    font-size: 34px;
  }
  .cc-connect-answer .cc-connect-button {
    min-width: 150px;
    height: 56px;
    font-size: 17px;
  }
}