/* The help centre (/help/ and /help/<guide>/), on top of occasion.css; built by scripts/build_help_pages.py */
:root { --gold-soft: #f3e8d2; --plum-soft: #f4e3e9; --sage: #5f7a56; --sage-soft: #e5ecdf; --red: #b4413f;
  --t-blue: #3f6fb0; --t-purple: #7a52b3; --t-green: #4f8a5b; --t-pink: #c4577f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold-soft: #2e2819; --plum-soft: #34202a; --sage: #9db291; --sage-soft: #1d2a20; --red: #f19d9d;
  --t-blue: #7fa6e0; --t-purple: #ad8ce6; --t-green: #86c08f; --t-pink: #ec8fb1; } }
:root[data-theme="dark"] { --gold-soft: #2e2819; --plum-soft: #34202a; --sage: #9db291; --sage-soft: #1d2a20; --red: #f19d9d;
  --t-blue: #7fa6e0; --t-purple: #ad8ce6; --t-green: #86c08f; --t-pink: #ec8fb1; }
html { overflow-x: clip; }
.hhero { padding-block: 40px 18px; display: grid; gap: 14px; }
.hhero h1 em { color: var(--plum); }
.search { position: relative; max-width: 560px; display: block; }
.search input { width: 100%; padding: 14px 16px 14px 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 15.5px; box-shadow: var(--shadow); }
.search input:focus { outline: 2px solid color-mix(in srgb, var(--gold) 45%, transparent); border-color: var(--gold); }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.chips button.on { border-color: var(--plum); color: var(--plum); background: var(--plum-soft); }
.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; padding-block: 18px 40px; }
.gcard { text-decoration: none; border: 1px solid var(--line); background: var(--card); border-radius: 18px; padding: 18px; display: grid; gap: 10px; align-content: start; }
.gcard:hover { border-color: color-mix(in srgb, var(--plum) 40%, var(--line)); }
.gcard .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.gcard h2 { font-size: 23px; margin: 0; } .gcard p { font-size: 14px; color: var(--muted); }
.gmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--plum-soft); color: var(--plum); letter-spacing: .04em; }
.tag.gold { background: var(--gold-soft); color: var(--gold); }
.nores { padding: 26px; border: 1px dashed var(--line); border-radius: 16px; text-align: center; color: var(--muted); grid-column: 1 / -1; }
.ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; margin-bottom: 48px; }
.ask h2 { font-size: 26px; margin: 0 0 4px; }
@media (max-width: 560px) { .ask { grid-template-columns: 1fr; } }
/* a guide */
.crumb { font-size: 13.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; padding-top: 28px; }
.crumb a { color: var(--plum); font-weight: 600; }
.ghead { display: grid; gap: 12px; padding-block: 12px 10px; }
.ghead .lead { font-size: 17px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-block: 28px; border-top: 1px solid var(--line); }
.step:nth-of-type(even) .pic { order: -1; }
.step .n { width: 40px; height: 40px; border-radius: 50%; background: var(--plum); color: var(--plum-ink); display: grid; place-items: center; font-family: "Cormorant Garamond", serif; font-size: 22px; font-weight: 600; }
.step .txt { display: grid; gap: 12px; justify-items: start; }
.step h2 { font-size: 30px; margin: 0; } .step .txt > p { color: var(--muted); max-width: 54ch; }
.tipbox { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-soft); border-radius: 12px; padding: 10px 13px; font-size: 14px; }
.pic { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 18px; box-shadow: var(--shadow); min-height: 240px; display: grid; place-items: center; position: relative; overflow: hidden; min-width: 0; }
.replay { position: absolute; top: 10px; right: 10px; font-size: 11.5px; padding: 4px 9px; }
@media (max-width: 780px) { .step { grid-template-columns: minmax(0, 1fr); gap: 16px; } .step:nth-of-type(even) .pic { order: 0; } }
.gend { display: grid; gap: 14px; padding-block: 28px 10px; border-top: 1px solid var(--line); }
.related { display: flex; gap: 8px; flex-wrap: wrap; }
.related a { border: 1px solid var(--line); background: var(--card); border-radius: 99px; padding: 7px 13px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
/* the drawn pictures: small pieces put together per step */
.ui { width: 100%; max-width: 330px; display: grid; gap: 8px; font-size: 13px; }
.ui .bar { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow: hidden; }
.ui .bar span { padding: 5px 10px; border-radius: 6px; font-weight: 600; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ui .bar .on { background: var(--card); color: var(--ink); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); }
.row > span:first-child { min-width: 0; } .row b { font-size: 13.5px; display: block; } .row small { display: block; color: var(--muted); font-size: 11.5px; }
.row .r { display: grid; justify-items: end; gap: 3px; flex: none; text-align: right; font-variant-numeric: tabular-nums lining-nums; }
.chip { display: inline-flex; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.chip.ok { background: var(--sage-soft); color: var(--sage); } .chip.warn { background: rgba(168, 107, 20, .14); color: #a86b14; }
.chip.bad { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); } .chip.idle { background: var(--bg-2); color: var(--muted); }
.chip.ev { background: var(--plum-soft); color: var(--plum); }
.btnx { display: inline-flex; padding: 5px 10px; border-radius: 6px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); background: var(--card); white-space: nowrap; }
.btnx.wa { background: #1f9d55; border-color: #1f9d55; color: #fff; } .btnx.plum { background: var(--plum); border-color: var(--plum); color: var(--plum-ink); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; background: var(--bg); }
.tile small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile b { font-family: "Cormorant Garamond", serif; font-size: 30px; line-height: 1.1; font-variant-numeric: lining-nums; }
.tile.y b { color: var(--sage); } .tile.n b { color: var(--red); } .tile.w b { color: #a86b14; }
.field { display: grid; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.field span { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 7px 9px; font-size: 13px; color: var(--ink); font-weight: 500; min-height: 33px; }
.opts { display: flex; gap: 6px; flex-wrap: wrap; }
.opt { border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; font-size: 12px; font-weight: 600; background: var(--bg); }
.opt.on { border-color: var(--plum); color: var(--plum); background: var(--plum-soft); }
.minis { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.mini { width: 92px; aspect-ratio: 3 / 4.4; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); display: grid; place-content: center; justify-items: center; gap: 4px; padding: 8px; text-align: center; }
.mini i { font-style: normal; font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mini b { font-family: "Cormorant Garamond", serif; font-size: 17px; line-height: 1.1; }
.mini.on { border: 2px solid var(--plum); box-shadow: 0 0 0 4px color-mix(in srgb, var(--plum) 14%, transparent); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tier { border: 1px solid var(--line); border-radius: 11px; padding: 8px; background: var(--bg); display: grid; gap: 2px; }
.tier b { font-size: 12px; } .tier span { font-family: "Cormorant Garamond", serif; font-size: 20px; font-variant-numeric: lining-nums; }
.tier.on { border: 2px solid var(--plum); }
.prog { height: 7px; border-radius: 99px; background: var(--bg-2); overflow: hidden; display: block; } .prog i { display: block; height: 100%; background: var(--sage); }
.money { display: flex; height: 12px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .money i { display: block; height: 100%; }
.tick { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: transparent; flex: none; background: var(--card); }
.tick.on { background: var(--sage); border-color: var(--sage); color: #fff; }
/* WhatsApp-style chat */
.chat { width: 100%; max-width: 300px; border-radius: 16px; background: #e5ddd5; padding: 12px; display: grid; gap: 8px; }
:root[data-theme="dark"] .chat { background: #0b141a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chat { background: #0b141a; } }
.bub { justify-self: end; max-width: 88%; background: #d9fdd3; color: #111; border-radius: 10px 10px 2px 10px; padding: 8px 10px; font-size: 12.5px; display: grid; gap: 6px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.bub .card { border-radius: 8px; background: #fbf6ee; border-left: 3px solid #a9823f; padding: 7px 9px; }
.bub .card b { font-family: "Cormorant Garamond", serif; font-size: 16px; display: block; color: #2a221d; } .bub .card small { color: #75685d; font-size: 11px; }
.bub .lnk { color: #027eb5; word-break: break-all; }
/* phone + invitation */
.phone { width: 176px; border-radius: 28px; background: #1f1e24; padding: 7px; box-shadow: var(--shadow); flex: none; }
.phone .s { border-radius: 22px; background: #fbf6ee; color: #2a221d; min-height: 270px; padding: 16px 12px; display: grid; gap: 8px; align-content: start; text-align: center; overflow: hidden; }
.phone .s small.k { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a9823f; }
.phone .s .nm { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; line-height: 1.05; }
.phone .s .tn { font-family: "Cormorant Garamond", serif; font-size: 34px; color: #74384f; line-height: 1; font-variant-numeric: lining-nums; }
.phone .s .sx { font-size: 11px; color: #75685d; }
.phone .inp { border: 1px solid #e4d9c9; border-radius: 8px; padding: 7px 8px; font-size: 12px; text-align: left; background: #fff; min-height: 30px; }
.phone .pbtn { border-radius: 6px; background: #74384f; color: #fff; padding: 7px; font-size: 11.5px; font-weight: 700; }
.phone .ev { border: 1px solid #e4d9c9; border-radius: 9px; padding: 6px; font-size: 11px; display: flex; justify-content: space-between; gap: 6px; align-items: center; background: #fff; }
.phone .ev b { font-size: 11.5px; } .phone .yn { display: flex; gap: 4px; } .phone .yn span { border: 1px solid #e4d9c9; border-radius: 5px; padding: 2px 6px; font-size: 10px; font-weight: 700; }
.phone .yn .y { background: #5f7a56; color: #fff; border-color: #5f7a56; }
.langsw { display: inline-flex; gap: 3px; padding: 3px; border-radius: 99px; background: #fff; border: 1px solid #e4d9c9; justify-self: center; }
.langsw span { padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #75685d; }
.langsw .on { background: #74384f; color: #fff; }
[lang="ur"] { font-family: "Noto Nastaliq Urdu", serif; line-height: 2; } [lang="pa"] { font-family: "Noto Serif Gurmukhi", serif; }
.duo { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
/* seating pieces */
.floor { position: relative; width: 100%; max-width: 330px; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line); }
.tb { position: absolute; width: 24%; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--c) 15%, var(--card)); border: 2px solid var(--c); }
.tb b { font-family: "Cormorant Garamond", serif; font-size: 22px; line-height: 1; font-variant-numeric: lining-nums; } .tb small { font-size: 9.5px; color: var(--muted); }
.drag { position: absolute; left: 6%; top: 8%; padding: 5px 10px; border-radius: 99px; background: var(--plum); color: var(--plum-ink); font-size: 11.5px; font-weight: 700; box-shadow: var(--shadow); white-space: nowrap; }
.sheet { position: relative; width: 210px; height: 210px; }
.sheet .t { position: absolute; inset: 50px; border-radius: 50%; background: color-mix(in srgb, var(--t-green) 15%, var(--card)); border: 2px solid var(--t-green); display: grid; place-content: center; text-align: center; }
.sheet .t b { font-family: "Cormorant Garamond", serif; font-size: 26px; font-variant-numeric: lining-nums; }
.ch { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--t-green); background: var(--card); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); transform: translate(-50%, -50%); }
.ch.y { background: var(--t-green); color: #fff; }
.sign { width: 148px; border-radius: 14px; background: #fffdf9; color: #2a221d; border: 1px solid #e4d9c9; padding: 14px 12px; display: grid; gap: 6px; justify-items: center; text-align: center; box-shadow: var(--shadow); }
.sign b { font-family: "Cormorant Garamond", serif; font-size: 19px; } .sign small { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #75685d; }
.sign svg { width: 86px; height: 86px; shape-rendering: crispEdges; }
.scan { position: relative; }
.beam { position: absolute; left: 0; right: 0; height: 2px; background: #b4413f; box-shadow: 0 0 10px #b4413f; top: 30%; opacity: 0; }
/* each picture plays once as it scrolls into view (help.js adds .go); nothing moves for people who prefer less motion */
@media (prefers-reduced-motion: no-preference) {
  .go .a-in { animation: hIn .5s ease-out both; animation-delay: var(--d, 0s); }
  .go .a-grow { animation: hGrow .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); transform-origin: left center; }
  .go .a-pop { animation: hPop .45s ease-out both; animation-delay: var(--d, 0s); }
  .go .a-drag { animation: hDrag 1.6s ease-in-out .3s both; }
  .go .a-seat { animation: hSeat .5s ease-out 1.7s both; }
  .go .a-ch { animation: hChair .35s ease-out both; animation-delay: var(--d); }
  .go .a-beam { animation: hBeam 1.2s ease-in-out .3s 2 both; }
  .go .a-type::after { content: ""; display: inline-block; width: 1px; height: 13px; background: #2a221d; vertical-align: -2px; animation: hBlink .7s steps(1) 4; }
  .go .a-res { animation: hIn .5s ease-out 2.6s both; }
  @keyframes hIn { from { opacity: 0; transform: translateY(8px); } }
  @keyframes hGrow { from { transform: scaleX(0); } }
  @keyframes hPop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } }
  @keyframes hDrag { 0% { left: 6%; top: 8%; } 70% { left: 60%; top: 30%; opacity: 1; } 100% { left: 60%; top: 30%; opacity: 0; } }
  @keyframes hSeat { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-green) 50%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
  @keyframes hChair { from { background: var(--card); color: var(--muted); transform: translate(-50%, -50%) scale(.6); } }
  @keyframes hBeam { 0% { top: 22%; opacity: 1; } 50% { top: 70%; opacity: 1; } 100% { top: 22%; opacity: 0; } }
  @keyframes hBlink { 50% { opacity: 0; } }
}