/*
  Log in / Sign up: the blue brand panel beside the form (public/login.html, public/signup.html).

  The panel is an inline-styled dc template, so this sheet themes it from one class
  (.pc-auth-panel) plus one decorative element (.pc-auth-art), which keeps the page diffs to a
  few lines. !important appears only where an inline style inside the panel has to be beaten
  (the checklist dividers and the small print colour).

  The art is the two-tone mark from /assets/pc-mark-duo.svg, drawn with CSS masks (the data:
  URIs below are its two paths, so no extra requests). The whole mark sits large in the top
  right corner, cropped by the panel edges so the S-shaped channel between the pieces is the
  focus: piece A in navy, piece B in the light brand tint, each with a fine light edge, and a
  soft light where the channel opens out. The art fades out towards the bottom left, where the
  text sits.

  Text is white (small print 80%). Every area behind text, edges included, keeps WCAG AA
  contrast at 980 to 1920px wide and through the drift; re-check if you change the gradients,
  the opacities, the fade or where the mark sits.
*/

.pc-auth-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0B1B3F;
  color: #FFFFFF;
}

/* Checklist: white text, faint white dividers, ticks in a soft disc. */
.pc-auth-panel h2 + div > div { border-color: rgba(255, 255, 255, .16) !important; }
.pc-auth-panel h2 + div svg {
  flex: none;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  padding: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.pc-auth-panel h2 + div path { stroke: #C4D5FF; stroke-width: 2; }

/* Regulatory small print. */
.pc-auth-panel > p { color: rgba(255, 255, 255, .8) !important; }

/* ---- Background art ---- */
.pc-auth-art {
  /* One box for the whole mark: --s is its size and (--cx, --cy) its centre, which is also the
     middle of the channel. Sized from the panel width (height on tall panels) and tied to the
     top right corner, so the crop looks the same at every size. */
  --s: max(108cqw, 64cqh);
  --cx: calc(100cqw - var(--s) * .17);
  --cy: calc(var(--s) * .21);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
}
.pc-auth-art > i {
  position: absolute;
  left: calc(var(--cx) - var(--s) / 2);
  top: calc(var(--cy) - var(--s) / 2);
  width: var(--s);
  height: var(--s);
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
  mask: var(--m) center / 100% 100% no-repeat;
}
/* A fine light line on each piece's edge, so it moves with the piece. */
.pc-auth-art > i::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: var(--e) center / 100% 100% no-repeat;
  mask: var(--e) center / 100% 100% no-repeat;
}
/* Piece A (navy in the logo). */
.pc-auth-art-a {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 248'%3E%3Cpath d='M4.05 92.04C4.06 82.04 3.36 71.46 6.21 61.79C7.75 56.56 10.12 51.67 13.04 47.08C20.78 34.92 33.39 26.48 47.37 23.28C55 21.54 63.03 22.11 70.79 22.13H106.3L140.31 22.09C147.72 22.1 154.7 21.78 160.35 27.5C166.03 33.26 165.15 39.16 165.18 46.58C165.23 59.41 165.38 72.27 165.09 85.09C165.05 86.89 165.14 88.8 164.78 90.57C162.94 99.55 156.3 106.69 147.54 109.17C146.57 109.45 145.66 109.8 144.66 109.93C140.93 110.4 136.92 110.03 133.16 110.01H112.65C107.86 109.99 102.92 109.66 98.15 110.13C89.49 111 81.05 114.41 74.1 119.65C67.34 124.72 61.66 133.46 59.19 141.48C58.31 144.35 57.85 147.28 57.3 150.22C56.52 154.35 57.7 162.11 56.91 165.18C56.7 166 56.25 166.63 55.62 167.19C53.52 169.07 50.63 168.75 48.03 168.77L32.52 168.8L14.02 168.76C11.34 168.79 8.06 169.37 5.89 167.45C3.92 165.7 4.05 163.48 4.05 161.06V148.05V92.04Z'/%3E%3C/svg%3E");
  --e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 248'%3E%3Cpath d='M4.05 92.04C4.06 82.04 3.36 71.46 6.21 61.79C7.75 56.56 10.12 51.67 13.04 47.08C20.78 34.92 33.39 26.48 47.37 23.28C55 21.54 63.03 22.11 70.79 22.13H106.3L140.31 22.09C147.72 22.1 154.7 21.78 160.35 27.5C166.03 33.26 165.15 39.16 165.18 46.58C165.23 59.41 165.38 72.27 165.09 85.09C165.05 86.89 165.14 88.8 164.78 90.57C162.94 99.55 156.3 106.69 147.54 109.17C146.57 109.45 145.66 109.8 144.66 109.93C140.93 110.4 136.92 110.03 133.16 110.01H112.65C107.86 109.99 102.92 109.66 98.15 110.13C89.49 111 81.05 114.41 74.1 119.65C67.34 124.72 61.66 133.46 59.19 141.48C58.31 144.35 57.85 147.28 57.3 150.22C56.52 154.35 57.7 162.11 56.91 165.18C56.7 166 56.25 166.63 55.62 167.19C53.52 169.07 50.63 168.75 48.03 168.77L32.52 168.8L14.02 168.76C11.34 168.79 8.06 169.37 5.89 167.45C3.92 165.7 4.05 163.48 4.05 161.06V148.05V92.04Z' fill='none' stroke='%23000' stroke-width='0.9'/%3E%3C/svg%3E");
  background: #142B66;
}
.pc-auth-art-a::after { background: transparent; }
/* Piece B (brand blue in the logo): the lit one. */
.pc-auth-art-b {
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 248'%3E%3Cpath d='M83.47 172.27C83.48 165.56 82.97 158.39 85.22 151.97C88.32 143.14 96.84 137.56 105.82 136.24C109.54 135.69 113.56 136.06 117.32 136.08L139.33 136.12C143.94 136.1 148.75 136.44 153.34 135.93C154.35 135.81 155.26 135.47 156.24 135.24L158.68 134.81C164.97 133.14 170.94 129.57 175.87 125.39C177.95 123.64 179.58 121.63 181.2 119.47C185.95 113.15 188.54 107.16 190.19 99.47L190.9 96.57C191.44 92.61 190.35 84.85 191.15 81.59C191.46 80.33 192.29 79.16 193.45 78.55C195.7 77.35 202.54 78.03 205.33 78.03L233.35 78C237.35 78 243.09 77.24 243.92 82.6C244.4 85.73 243.98 92.13 243.98 95.6V121.62V154.64C243.99 161.22 244.5 168.68 243.75 175.15C242.12 189.32 236.12 202.46 225.47 212.15C217.25 219.63 206.5 224.42 195.48 225.74C189.96 226.4 178.62 225.87 172.47 225.88L120.44 225.91H95.92C92.4 225.92 88.25 226.49 85.51 223.76C82.54 220.81 83.47 213.73 83.47 209.79V172.27Z'/%3E%3C/svg%3E");
  --e: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 248'%3E%3Cpath d='M83.47 172.27C83.48 165.56 82.97 158.39 85.22 151.97C88.32 143.14 96.84 137.56 105.82 136.24C109.54 135.69 113.56 136.06 117.32 136.08L139.33 136.12C143.94 136.1 148.75 136.44 153.34 135.93C154.35 135.81 155.26 135.47 156.24 135.24L158.68 134.81C164.97 133.14 170.94 129.57 175.87 125.39C177.95 123.64 179.58 121.63 181.2 119.47C185.95 113.15 188.54 107.16 190.19 99.47L190.9 96.57C191.44 92.61 190.35 84.85 191.15 81.59C191.46 80.33 192.29 79.16 193.45 78.55C195.7 77.35 202.54 78.03 205.33 78.03L233.35 78C237.35 78 243.09 77.24 243.92 82.6C244.4 85.73 243.98 92.13 243.98 95.6V121.62V154.64C243.99 161.22 244.5 168.68 243.75 175.15C242.12 189.32 236.12 202.46 225.47 212.15C217.25 219.63 206.5 224.42 195.48 225.74C189.96 226.4 178.62 225.87 172.47 225.88L120.44 225.91H95.92C92.4 225.92 88.25 226.49 85.51 223.76C82.54 220.81 83.47 213.73 83.47 209.79V172.27Z' fill='none' stroke='%23000' stroke-width='0.9'/%3E%3C/svg%3E");
  background: #1C3F99;
}
.pc-auth-art-b::after { background: transparent; }

/* A slow drift: the two pieces ease apart and back together. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .pc-auth-art-a { animation: pcAuthDriftA 24s ease-in-out infinite alternate; }
  .pc-auth-art-b { animation: pcAuthDriftB 24s ease-in-out infinite alternate; }
}
@keyframes pcAuthDriftA { to { transform: translate(-.8%, -.8%); } }
@keyframes pcAuthDriftB { to { transform: translate(.8%, .8%); } }