/* Filming tips (public/filming-tips.js): four cards in a square. The drawings
   are on the paper colour they were drawn on (#f4f0e8), so the whole card is that colour. */
.tips{width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 24px);box-sizing:border-box;padding:30px 28px 22px;border:0;border-radius:24px;background:#f4f0e8;color:#14241f;text-align:center;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-shadow:0 35px 100px rgba(16,33,27,.3);overflow:auto}
.tips::backdrop{background:rgba(11,24,19,.55)}
.tips[open]{animation:tips-in .22s ease-out}
@keyframes tips-in{from{opacity:0;transform:translateY(10px) scale(.985)}}
.tips-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:none;color:#5b6660;cursor:pointer}
.tips-close:hover{background:rgba(20,36,31,.08);color:#14241f}
.tips-sparkles{position:absolute;top:18px;left:22px;width:52px;height:auto;pointer-events:none}
.tips-kicker{display:block;color:#3a6a28;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tips h2{margin:6px 0 0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
/* The pencil underline sits under the one word. */
.tips-mark{display:inline-block;padding:0 .08em .34em;margin:0 -.08em;background:url(/public/art/tips-underline.webp) center bottom/100% .3em no-repeat}
.tips-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0 0;padding:0;list-style:none;text-align:left}
.tips-grid li{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;border:1.5px solid rgba(20,36,31,.12);border-radius:18px}
.tips-grid img{display:block;width:auto;height:104px;max-width:100%;margin:0 auto 8px;object-fit:contain}
.tips-grid b{font-size:16px;line-height:1.25;font-weight:750;letter-spacing:-.015em}
.tips-grid span{font-size:13.5px;line-height:1.45;color:#46524b}
.tips-go{display:block;width:100%;min-height:52px;margin:18px 0 0;border:0;border-radius:12px;background:#14241f;color:#fffdf8;font:700 15.5px/1.1 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.tips-go:hover{background:#1f352c}
.tips-foot{margin:12px 0 0;font-size:13px;line-height:1.45;color:#5b6660}
.tips :focus-visible{outline:3px solid #5f7f16;outline-offset:3px}
/* The quiet link that opens it again. */
.tips-link{appearance:none;padding:0;border:0;background:none;color:#2f4a31;font:600 13px Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.tips-link[hidden]{display:none}
/* Inside a sentence it takes the sentence's colour and size. */
.filming-tip .tips-link,.nt-steps .tips-link,.lounge-bottom .tips-link{color:inherit;font-size:inherit}
/* The waiting card styles its buttons as round arrows; this one is text. */
.lounge-bottom .tips-link{display:inline;width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;white-space:nowrap}
.upload-tips{display:block;margin:10px auto 0}
@media (max-width:560px){
  .tips{padding:24px 14px 16px;border-radius:20px}
  .tips h2{font-size:21px;padding:0 30px}
  .tips-sparkles{display:none}
  .tips-grid{gap:8px;margin-top:14px}
  .tips-grid li{padding:10px 11px 12px;border-radius:14px}
  .tips-grid img{height:64px;margin-bottom:4px}
  .tips-grid b{font-size:14px}
  .tips-grid span{font-size:12.5px;line-height:1.4}
  .tips-go{margin-top:14px;min-height:48px}
  .tips-foot{margin-top:10px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.tips[open]{animation:none}}