:root,.embed{--accent:#66298e;--on-accent:#fff;--ink:#1F1A2E;--muted:#6B6477;--border:#E8E3DC;--paper:#FBF9F6;--tint:#F7F2FB;--tint2:#EFE8F5;--line:#D9D3CC;--danger:#8A1C1C;--ok:#1E6B3A;--page:#F3F0EB}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.4}
a{color:var(--accent)}
h1,h2{font-family:Fraunces,Georgia,serif}
h1{font-weight:700;font-size:26px;margin:0 0 6px}
.lede{color:var(--muted);font-size:14px;margin:0 0 22px;line-height:1.5}
.hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
/* Dashboard pages run as wide as the header's content (.top-in, 1300px) plus this box's own 32px side padding (border-box), so the edges line up. */
.body{padding:28px 32px 32px;min-width:0;max-width:1364px;margin:0 auto}
/* dashboard chrome */
.dash{background:#fff}
/* Bars are flex rows at both levels: public HTML is edge-cached ~10 min, so markup from before a deploy must still lay out with the new CSS. */
.top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border);background:var(--paper)}
.top-in{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;flex:1;max-width:1300px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:17px}
.hat{width:26px;height:26px;display:inline-block;vertical-align:middle}
.crumbs{font-size:13px;color:var(--muted)}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .pub{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs .pub:hover{color:var(--accent);border-color:var(--accent)}
.crumbs .ext{flex:none}
.nav{display:flex;gap:18px;font-size:13px;color:var(--muted);align-items:center}
.nav a{color:var(--muted);text-decoration:none}
.nav .on{color:var(--accent);font-weight:600}
.nav form{margin:0}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--muted);cursor:pointer}
.switch{margin:0}
.switch select{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff}
/* auth */
.authpage{background:var(--page)}
.auth{max-width:420px;margin:20px auto;text-align:center}
.auth .hat{width:52px;height:52px;margin:0 auto 14px;display:block}
.auth .f{text-align:left}
.auth .btn{width:100%;margin-top:4px}
.auth .foot{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.6;background:none;border:0;padding:0;display:block}
.auth .foot a{font-weight:600}
.auth .swap{font-size:13px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.auth .swap a{font-weight:600}
.sent{border:1px solid #D9C7E8;background:var(--tint);border-radius:10px;padding:14px;font-size:13px;line-height:1.5;text-align:left}
.sent a{font-weight:600}
/* buttons */
.btn{display:inline-block;border-radius:8px;padding:9px 14px;font:inherit;font-size:14px;font-weight:600;border:1px solid var(--accent);color:var(--accent);background:#fff;text-align:center;white-space:nowrap;text-decoration:none;cursor:pointer}
.btn.solid{background:var(--accent);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink)}
.btn.danger{border-color:var(--line);color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:12px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
/* flash */
.flash{border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:14px;line-height:1.5}
.flash.ok{border:1px solid #B9DDC4;background:#E6F4EA;color:var(--ok)}
.flash.err{border:1px solid #E8B4B4;background:#FBE9E9;color:var(--danger)}
.field-err{border:1px solid #E8B4B4;background:#FBE9E9;border-radius:8px;padding:8px 11px;font-size:12px;color:var(--danger);margin-bottom:14px;text-align:left}
/* fields */
.f{margin-bottom:14px;min-width:0}
.f label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.f label small{font-weight:400;color:var(--muted)}
.f input:not([type=checkbox]):not([type=radio]),.f select,.f textarea,.f .in{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;background:#fff;color:var(--ink);min-height:38px;min-width:0;overflow-wrap:anywhere}
.f textarea,.f .in.area{min-height:72px;line-height:1.45}
.f .in{display:flex;align-items:center;gap:8px}
.f .in.area{align-items:flex-start}
.f .in.rich{min-height:120px;flex-direction:column;align-items:stretch;padding:0}
.rich .bar{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--border);background:var(--paper);font-size:12px;color:var(--muted)}
.rich .bar span{padding:2px 7px;border-radius:4px;border:1px solid var(--border);background:#fff}
.rich .txt{padding:10px 12px;font-size:14px;line-height:1.5}
.f .ai{border-color:#B48BD1!important;background:#FBF8FD!important}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row .f{flex:1;min-width:140px}
.chk{display:flex;align-items:center;gap:8px;font-size:13px}
.cost{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.cost .in{flex:1}
.cost .in.price{flex:0 0 90px}
/* Save row: sticks to the bottom of the viewport while its form (Settings, or the event editor's main column) runs past the fold. */
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;position:sticky;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--border);padding:12px 0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.actions .muted{font-size:12px;color:var(--muted);margin-right:auto}
.note{font-size:12px;color:var(--muted);background:var(--paper);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:14px;line-height:1.5}
.banner{display:flex;align-items:center;gap:12px;background:var(--tint);border:1px solid #D9C7E8;border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:18px}
/* tags + status */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;margin-left:8px;vertical-align:middle;text-decoration:none;color:var(--accent);background:var(--tint2)}
.tag.ai{color:var(--accent);background:var(--tint2)}
.tag.warn{color:#8A4B00;background:#FFF1DF}
.tag.ch{color:var(--accent);background:var(--tint2)}
.tag.sk{color:var(--muted);background:#F0ECE6}
.tag.add{color:var(--ok);background:#E6F4EA}
.tag.cx{color:var(--danger);background:#FBE9E9}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;background:#E6F4EA;color:var(--ok)}
.status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
/* doors */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.door{border:1.5px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.door.primary{border-color:var(--accent);background:var(--tint)}
.door .ic{width:40px;height:40px;border-radius:10px;background:var(--tint2);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:20px}
.door h3{margin:0;font-size:16px;font-weight:600}
.door p{margin:0;font-size:13px;color:var(--muted);line-height:1.45;flex:1}
.door textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:13px;min-height:58px;resize:none}
/* event form */
.form{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
@media(max-width:1100px){.form{grid-template-columns:1fr}.form>div:last-child{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form>div:last-child .sec{margin-bottom:0}}
.sec{border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:18px}
.sec h3{margin:0 0 12px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.sec h3 a{font-size:12px;text-transform:none;letter-spacing:0;font-weight:600}
/* schedule */
.sched{border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px;background:var(--paper)}
.sched .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:600}
.sched .hd a{color:var(--muted);font-weight:500;font-size:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px}
.seg span{padding:7px 12px;background:#fff}
.seg span.on{background:var(--accent);color:#fff;font-weight:600}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pill{width:38px;height:34px;border-radius:8px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;background:#fff}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.preview{margin-top:10px;font-size:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{border:1px solid var(--border);background:#fff;border-radius:999px;padding:3px 9px;font-size:12px}
.chip.more{color:var(--muted);border-style:dashed}
.addlink{font-size:13px;color:var(--accent);font-weight:600}
/* flyer */
.flyer{width:100%;aspect-ratio:2/3;border-radius:8px;background:linear-gradient(160deg,#E7B5A6,#B65D45);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:Fraunces,Georgia,serif;text-align:center;padding:16px;overflow:hidden}
.flyer img{width:100%;height:100%;object-fit:cover}
/* upcoming dates */
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.head .meta{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.6}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;font-size:14px}
.tabs span,.tabs a{padding:10px 14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.tabs .on{color:var(--accent);border-color:var(--accent);font-weight:600}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
@media(max-width:1000px){.layout{grid-template-columns:1fr}}
/* /events once live: Share the link gets a wide right column, so the Subscribe and RSS URLs show in full. */
.layout.share-side{grid-template-columns:minmax(0,1fr) 460px}
@media(max-width:1000px){.layout.share-side{grid-template-columns:1fr}}
/* An event's page and its Upcoming dates tab: a roomier right column for the image, the QR code and the links. */
.layout.event-side{grid-template-columns:minmax(0,1fr) 360px}
@media(max-width:1000px){.layout.event-side{grid-template-columns:1fr}}
.qrsec .qr-img{width:240px;height:auto;aspect-ratio:1;max-width:100%;margin-bottom:0}
.qrsec p{overflow-wrap:anywhere}
.rule{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:14px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--paper);margin-bottom:8px}
.mh{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;margin:14px 0 6px}
.occ{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 8px;border-bottom:1px solid #F0ECE6}
.occ:last-child{border-bottom:none}
.occ .d{text-align:center;line-height:1.1}
.occ .d .dow{font-size:11px;color:var(--muted);text-transform:uppercase}
.occ .d .num{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px}
.occ .t{font-size:14px;min-width:0}
.occ .t .sub{font-size:12px;color:var(--muted);margin-top:2px}
.occ .a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.occ.skipped{opacity:.55}
/* only the title is struck: a decoration on .t would carry into its .sub line */
.occ.skipped .ttl{text-decoration:line-through}
.occ.changed .d .num{color:var(--accent)}
.links{font-size:13px;line-height:1.9}
.kv{font-size:13px;line-height:1.7}
.mh:first-child{margin-top:0}
.sec h3 .aside{font-size:12px;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.rule .r{margin-left:auto;font-size:12px;color:var(--accent);font-weight:600}
.occ .a form{margin:0}
.addrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 8px 0;font-size:13px}
.addrow input,.addrow select{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;background:#fff;color:var(--ink);min-width:0;max-width:100%}
@media(max-width:560px){.occ{grid-template-columns:48px minmax(0,1fr);gap:10px}.occ .a{grid-column:2;justify-content:flex-start}}
/* "Edit this one": the mockup's dialog, as a page */
.scrim{background:var(--page);border-radius:12px;padding:28px}
.modal{background:#fff;border-radius:12px;max-width:640px;margin:0 auto;border:1px solid var(--border);box-shadow:0 12px 40px rgba(31,26,46,.15);overflow:hidden}
.modal .mh2{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal .mh2 h2{margin:0;font-size:19px;font-weight:700}
.modal .mh2 a{color:var(--muted);text-decoration:none;font-size:16px}
.modal .mb{padding:18px 22px}
.modal .mf{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;align-items:center;flex-wrap:wrap}
.modal .mf .muted{font-size:12px;color:var(--muted);margin-right:auto}
.f ::placeholder{color:var(--muted);opacity:1}
/* a field still following the series reads greyed until the producer types */
.f input.inherit:placeholder-shown,.f textarea.inherit:placeholder-shown,.f input[type=time].inherit{background:var(--paper)}
.ovimg{display:flex;gap:12px;align-items:center}
.ovimg img{width:48px;height:60px;object-fit:cover;border-radius:4px;flex:none}
.ovimg .imgctl{margin-top:6px}
@media(max-width:560px){.scrim{padding:0;background:none}.modal .mh2,.modal .mb,.modal .mf{padding-left:16px;padding-right:16px}}
/* public chrome */
.pub .hdr{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--border)}
/* The public header, in the haunt's choice of layout: inline (logo and name left, links right, centered on one line)
   or stacked (logo and name centered on a row of their own, over a centered row of links). */
.pub .hdr-in{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;flex:1;min-width:0;max-width:1300px;margin:0 auto}
.hdr-stacked .hdr-in{flex-direction:column;justify-content:flex-start}
.hdr-stacked .hnav{justify-content:center}
.org{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:20px;min-width:0;max-width:100%}
.hdr-stacked .org{justify-content:center;text-align:center}
.org>*{min-width:0;max-width:100%}
.org a{text-decoration:none;color:var(--ink)}
/* A logo is never cropped: the whole image at the chosen height (logo-{size} below), scaled down rather than
   trimmed when a wide banner meets a narrow screen, and no rounded corners shaving its own. */
.org .logo{display:block;height:36px;width:auto;max-width:100%;object-fit:contain}
.hnav{display:flex;flex-wrap:wrap;gap:18px;font-size:14px}
.hnav a{color:var(--ink);text-decoration:none}
.hnav a.on{color:var(--accent);font-weight:600}
/* The public page fills the viewport so the footer sits at the bottom on short pages. */
body.pub{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.pub .wrap{flex:1 0 auto;width:100%}
.wrap{max-width:900px;margin:0 auto;padding:28px 32px 36px;min-width:0}
/* The haunt page, and event pages on the sidebar layout, run as wide as the header above (.hdr-in); the single layout keeps the 900px reading width. */
/* 1300px of content like .hdr-in, plus this box's own 32px side padding (border-box), so the edges line up with the header's. */
.pub .wrap.wide{max-width:1364px}
.back{font-size:13px;margin-bottom:18px}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px}
.kicker a{font-weight:600}
.hero{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px}
.tile{width:72px;border:1px solid var(--border);border-radius:10px;overflow:hidden;text-align:center}
.tile .m{background:var(--accent);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:4px 0;font-weight:600}
.tile .n{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:30px;line-height:1.1;padding:6px 0 2px}
.tile .w{font-size:11px;color:var(--muted);padding-bottom:6px}
.pub h1{font-size:30px;line-height:1.15}
.when{font-size:16px;margin-bottom:14px}
.when span{color:var(--muted)}
/* Event pages: the hero heads the main column, so the sidebar (300px, like the About column on the haunt page) starts level
   with the title, and its flyer fills it. Below 900px everything stacks: hero, body, then the sidebar's blocks. */
.layout.detail .hero{margin-bottom:26px}
.detail-sidebar .layout.detail{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
.detail-sidebar .side .flyer-zoom,.detail-sidebar .side .flyer-img{max-width:none}
.detail-single .layout.detail{grid-template-columns:1fr;gap:32px}
@media(max-width:900px){.detail-sidebar .layout.detail{grid-template-columns:1fr;gap:32px}.detail-sidebar .side .flyer-zoom,.detail-sidebar .side .flyer-img{max-width:240px}.flyer{max-width:240px}}
.summary{font-size:17px;line-height:1.5;margin:0 0 14px;font-weight:500}
.bodytxt{font-size:15px;line-height:1.6;color:#2A2438;overflow-wrap:anywhere}
.bodytxt p{margin:0 0 12px}
.series{margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.series h2{font-size:19px;margin:0 0 4px}
.series .sub{font-size:13px;color:var(--muted);margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.gi{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;text-decoration:none;color:var(--ink);display:block}
.gi.now{border-color:var(--accent);background:var(--tint)}
.gi .d{font-weight:600}
.gi .t{color:var(--muted);margin-top:2px;line-height:1.35}
.gi.cx .d{text-decoration:line-through;color:var(--muted)}
.side .blk{margin-bottom:22px}
.side h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 8px;font-weight:600}
.side .v{font-size:14px;line-height:1.55}
.also a{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-size:13px;padding:8px 0;border-top:1px solid #F0ECE6}
.also .mini{text-align:center;border:1px solid var(--border);border-radius:6px;font-size:10px;line-height:1.1;padding:3px 0}
.also .mini b{display:block;font-size:15px;font-family:Fraunces,Georgia,serif}
.pub .foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:16px 32px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);background:var(--paper)}
.pub .foot-in{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;flex:1;max-width:1300px;margin:0 auto}
.cancel{display:inline-block;font-size:12px;font-weight:600;color:var(--danger);background:#FBE9E9;border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle}
/* landing list toggles */
.layout-tiles .thumb-only{display:none}
.layout-thumbnails .tile-only{display:none}
.field-err.note{background:var(--tint);border-color:#D9C7E8;color:var(--ink)}
.auth .inline{display:inline;margin:0}
.auth .inline .linkbtn,.auth .sent .linkbtn{display:inline;width:auto;margin:0;padding:0;font-size:inherit;font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;text-decoration:underline}
.auth .btn[disabled]{opacity:.5;cursor:default}
/* haunt setup / settings / people */
.steps{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.steps b{color:var(--accent)}
.steps i{font-style:normal;color:#D9D3CC}
.split2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:start}
.url{font-size:13px;color:var(--muted)}
.url b{color:var(--ink);font-weight:600}
.tz{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tz select{flex:1}
.navrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px;margin-bottom:8px}
.navrow input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:inherit;font-size:13px;min-height:36px;min-width:0}
.lay{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.layopt{border:1.5px solid var(--border);border-radius:10px;padding:10px;font-size:12px;text-align:center;color:var(--muted);cursor:pointer;display:block}
.layopt:has(input:checked){border-color:var(--accent);background:var(--tint);color:var(--ink)}
.layopt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.layopt input{position:absolute;opacity:0;pointer-events:none}
.layopt .pic{height:64px;border-radius:6px;background:var(--paper);border:1px solid var(--border);margin-bottom:8px;display:flex;flex-direction:column;gap:5px;padding:7px}
.layopt .pic .l{display:flex;gap:6px;align-items:center}
.layopt .pic .l i{display:block;background:#D9D3CC;border-radius:2px;height:7px;flex:1}
.layopt .pic .l .dt{width:16px;height:16px;background:var(--accent);border-radius:3px;flex:none;opacity:.7}
.layopt .pic .l .th{width:12px;height:15px;background:#B65D45;border-radius:2px;flex:none;opacity:.8}
.layopt .pic .l .th.wd{width:29px}
.layopt .pic.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;align-content:center}
.layopt .pic.cal i{display:block;height:14px;border-radius:2px;background:#D9D3CC}
.layopt .pic.cal i.on{background:var(--accent);opacity:.7}
.layopt .pic.detail{flex-direction:row}
.layopt .pic.detail .main{flex:2;display:flex;flex-direction:column;gap:4px}
.layopt .pic.detail .side{flex:1;display:flex;flex-direction:column;gap:4px}
.layopt .pic.detail i{display:block;background:#D9D3CC;border-radius:2px;height:6px}
.layopt .pic.detail .side i{background:#C9B9DA}
/* Header layout pictures: a logo mark and name, then the links (a spacer pushes them right on one line). */
.layopt .pic.hdrpic{justify-content:center}
.layopt .pic.hdrpic .l .lg{width:22px;height:11px;background:var(--accent);border-radius:2px;flex:none;opacity:.7}
.layopt .pic.hdrpic .l i.nm{flex:0 0 26px;background:#9C93A8}
.layopt .pic.hdrpic .l i.sp{flex:1;background:none}
.layopt .pic.hdrpic .l i.ln{flex:0 0 10px;height:5px}
.layopt .pic.hdrpic.stacked .l{justify-content:center}
.f .err{color:var(--danger);font-size:12px;margin-top:5px}
.people{list-style:none;margin:0 0 14px;padding:0}
.people li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}
.people form{margin:0}
.people .acts{display:flex;gap:8px;align-items:center}
.people .acts .hint{margin:0}
/* Settings › Categories: each row is its name field, how many events carry it, and Remove; the add row is the same
   shape. A row whose Remove asks to confirm is tinted, its question wrapping above the buttons when narrow. */
.cats{list-style:none;margin:0;padding:0}
.catrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.catrow input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font:inherit;font-size:13px;min-height:36px;background:#fff;color:var(--ink)}
.catrow .n{font-size:12px;color:var(--muted);white-space:nowrap}
.catrow.ask{flex-wrap:wrap;background:var(--tint);border-radius:8px;padding:8px 10px;font-size:13px}
.catrow.ask .q{flex:1 1 160px;overflow-wrap:anywhere}
.sec .catrow+.err{color:var(--danger);font-size:12px;margin:-3px 0 8px}
/* event form controls: real radios/checkboxes drawn as the mockup's segments and pills */
[hidden]{display:none!important}
.f .lbl{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.f .seg label,.f .pills label{display:block;position:relative;margin:0;font-size:inherit;font-weight:400;cursor:pointer}
.seg input,.pills input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg span{display:block}
.seg input:checked+span{background:var(--accent);color:#fff;font-weight:600}
.pills input:checked+.pill{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.seg input:focus-visible+span,.pills input:focus-visible+.pill{outline:2px solid var(--accent);outline-offset:2px}
.f label.chk{display:flex;font-weight:400;margin:0;min-height:38px}
.mrow{display:flex;gap:8px}
.cnt{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.cnt input{max-width:90px}
.sched .hd .linkbtn{font-size:12px;font-weight:500}
.sched .row{align-items:flex-start}
.sched .f.every,.sched .f.ad{min-width:0}
.sched .f.days{min-width:min(302px,100%)}
.sched .f.tm{min-width:120px}
.sched .f.ad,.sched .f.ev{align-self:flex-end}
.addlink.linkbtn{color:var(--accent);font-size:13px;font-weight:600}
.defsubmit{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* a block shows only the fields its Repeats / Ends / All day choices use (everything shows without :has) */
.sched:has(.kind input[value=once]:checked) :is(.wk,.mo,.rep),
.sched:has(.kind input[value=weekly]:checked) :is(.mo,.once),
.sched:has(.kind input[value=monthly]:checked) :is(.wk,.once),
.sched:has(.endk input[value=date]:checked) .ev.c,
.sched:has(.endk input[value=count]:checked) .ev.d,
.sched:has(.endk input[value=never]:checked) .ev,
.sched:has(.allday input:checked) .tm{display:none}
/* Image pickers (the doors' Upload a flyer, and every image upload in the dashboard): the whole box is the file
   input, invisible over it, so a click or a dropped file both land on it. Without an image it's a dashed drop box;
   beside an image it's a small Replace button (.drop.btn). The .f rule keeps the form fields' input styles off it. */
.drop{position:relative;display:block;overflow:hidden;border:1.5px dashed #C9B9DA;border-radius:8px;padding:12px;text-align:center;font-size:13px;line-height:1.4;color:var(--accent);background:#fff;cursor:pointer}
.drop:hover{border-color:var(--accent)}
.drop u{text-underline-offset:2px}
.drop input[type=file],.f .drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.drop.over{border-style:solid;background:var(--tint2)}
.drop.busy{border-style:solid;color:var(--muted);pointer-events:none}
.drop.busy input{pointer-events:none}
.drop .spin,.btn.busy .spin{display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-2px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.drop.btn{display:inline-block;border:1px solid var(--accent);padding:5px 10px;font-size:12px;line-height:inherit}
.drop.btn.busy{border-color:var(--line)}
.f label.drop{margin-bottom:0;font-weight:400}
.f label.drop.btn{font-weight:600}
.hint+.drop,.flyer-img+.drop{margin-top:10px}
.sec>.drop{padding:22px 12px}
[aria-busy=true] button{opacity:.6}
@keyframes spin{to{transform:rotate(360deg)}}
/* AI extraction: the banner over a prefilled form, "What we read", and the doors' field error */
.banner .thumb{width:38px;height:48px;object-fit:cover;border-radius:3px;flex:none}
.readtext{font-size:12px;color:var(--muted);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere;max-height:420px;overflow:auto}
.readnotes{margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.readnotes h3{margin:0 0 4px}
.readnotes p{margin:0;white-space:pre-line}
.readnotes ul{margin:0;padding-left:18px}
.door .err{color:var(--danger);font-size:12px}
/* an AI-marked day that is ticked stays a solid pill (.f .ai's tint would hide its white label) */
.pills input:checked+.pill.ai{background:var(--accent)!important;border-color:var(--accent)!important}
/* event form, What › Categories: checkbox chips drawn like the weekday pills, then the dashed + New. Scoped to labels and
   .chip.new: the schedule preview's date chips share .chips/.chip. */
.f .lbl small{font-weight:400;color:var(--muted)}
.f .lbl+.chips{margin-top:0}
.f .chips label{display:block;position:relative;margin:0;font-size:inherit;font-weight:400;cursor:pointer;max-width:100%}
.chips label input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chips label .chip,.chips .chip.new{display:flex;align-items:center;min-height:34px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font-size:13px;background:#fff;color:var(--ink)}
.chips label .chip{overflow-wrap:anywhere}
.chips input:checked+.chip{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.chips input:focus-visible+.chip{outline:2px solid var(--accent);outline-offset:2px}
/* the AI's pick, while ticked: ✦ and the AI tint (as .tag.ai; white on the tint would vanish). Unticked, a chip like any other. */
.chips input:checked+.chip.ai{background:var(--tint2)!important;border-color:#B48BD1!important;color:var(--accent)}
.chips input:checked+.chip.ai::before{content:"✦";margin-right:5px}
.chips input:not(:checked)+.chip.ai{background:#fff!important;border-color:var(--line)!important}
.chips .chip.new{gap:6px;padding:0 8px 0 10px;border-style:dashed;max-width:100%}
.chips .chip.new:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.f .chips .chip.new input{width:9em;min-width:0;min-height:0;flex:1 1 auto;border:0;border-radius:0;padding:4px 0;background:transparent;font-size:13px;outline:none}
.chips .chip.new .linkbtn{flex:none;white-space:nowrap;color:var(--accent);font-size:13px;font-weight:600;padding:4px 2px}
/* multi-event chooser (dashboard-multi-event-chooser mockup); scoped: .ev also names schedule-block fields */
.chooser .layout{grid-template-columns:minmax(0,1fr) 260px}
@media(max-width:1000px){.chooser .layout{grid-template-columns:1fr}}
.chooser .found{display:flex;align-items:center;gap:12px;background:var(--tint);border:1px solid #D9C7E8;border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:16px;flex-wrap:wrap}
.chooser .found .n{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px;color:var(--accent)}
.chooser .found .from{color:var(--muted)}
.chooser .found .from b{color:var(--ink)}
.chooser .prog{height:6px;border-radius:3px;background:var(--border);flex:1;min-width:120px;overflow:hidden}
.chooser .prog i{display:block;height:100%;background:var(--accent)}
.chooser .ev{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;background:#fff}
.chooser .ev.done{background:#F6FBF7;border-color:#CFE6D6}
.chooser .ev.cur{border-color:var(--accent);box-shadow:0 0 0 2px var(--tint2)}
.chooser .ev.skipped{opacity:.55}
.chooser .ev .d{text-align:center;line-height:1.1}
.chooser .ev .d .mon{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;min-height:11px}
.chooser .ev .d .num{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px}
.chooser .ev .d .rep{font-size:10px;color:var(--accent);font-weight:600;margin-top:2px}
.chooser .ev .t{min-width:0;font-size:14px}
.chooser .ev .t .sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.chooser .ev .a{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.chooser .ev .a form{margin:0}
.chooser .foot{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.chooser .foot .muted{font-size:12px;color:var(--muted);margin-right:auto;line-height:1.5}
.chooser .sec .flyer-img{margin-bottom:4px}
@media(max-width:560px){.chooser .ev{grid-template-columns:48px minmax(0,1fr);gap:10px}.chooser .ev .a{grid-column:2;justify-content:flex-start}}
/* events list */
.evlist{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:12px}
.evlist li{border-bottom:1px solid #F0ECE6;font-size:14px}
.evlist li:last-child{border-bottom:none}
.evlist li:first-child .evrow{border-radius:12px 12px 0 0}
.evlist li:last-child .evrow{border-radius:0 0 12px 12px}
.evlist .evrow{display:flex;gap:14px;align-items:center;padding:12px 16px;color:inherit;text-decoration:none}
.evlist .evrow:hover{background:var(--paper)}
.evlist .evrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.evlist .ttl{font-weight:600;color:var(--ink)}
.evlist .evrow:hover .ttl{color:var(--accent)}
.evlist .th{flex:0 0 48px;width:48px;height:60px;border-radius:6px;overflow:hidden;background:var(--paper)}
.evlist .th img{display:block;width:100%;height:100%;object-fit:cover}
.evlist .ebody{min-width:0}
.evlist .sub{font-size:12px;color:var(--muted);margin-top:3px}
.head .cta form{margin:0}
/* rich body editor: Quill snow theme (public/js/rich.js) dressed to match the form */
main .ql-toolbar.ql-snow{border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;background:var(--paper);font-family:inherit}
main .rich-editor.ql-container.ql-snow{border:1px solid var(--border);border-radius:0 0 8px 8px;background:#fff;font-family:inherit;font-size:14px}
.rich-editor .ql-editor{min-height:120px;line-height:1.45;overflow-wrap:anywhere}
.rich-editor .ql-editor p,.rich-editor .ql-editor h3{margin:0 0 .6em}
.rich-editor:focus-within{outline:2px solid var(--accent);outline-offset:1px}
/* uploaded images: flyers stay upright, never cropped */
.flyer-img{display:block;width:100%;max-width:240px;height:auto;border-radius:8px}
.imgctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.sec>.err{color:var(--danger);font-size:12px;margin-top:5px;width:100%}
/* Settings: the square logo and the banner side by side, each previewed whole (contain, padded inside its frame so
   the frame's rounded corners never reach the image) with Replace and Remove; an empty slot is a drop box. */
.slots{display:flex;gap:16px 20px;flex-wrap:wrap;align-items:flex-start}
.slot{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.slot-img,.slot>.drop{height:72px;border-radius:10px;flex:none;box-sizing:border-box}
.slot-logo .slot-img{width:72px}
.slot-logo>.drop{width:120px}
.slot-banner .slot-img,.slot-banner>.drop{width:240px;max-width:100%}
.slot-img{object-fit:contain;border:1px solid var(--border);background:var(--paper);padding:6px}
.f .slot>.drop{display:flex;align-items:center;justify-content:center;margin:0;padding:8px;font-size:12px;font-weight:400;line-height:1.35}
.f .slot .drop.btn{margin:0;font-weight:600}
.slot-btns{display:flex;gap:6px;flex-wrap:wrap}
.slot .err{color:var(--danger);font-size:12px;max-width:240px}
/* public: haunt page (live-landing mockups) */
.lhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:16px 0 28px}
.lhead h1{margin:0;font-size:36px;line-height:1.1}
.lhead .feed-url,.share .feed-url,.copyrow .feed-url{flex:1 1 100%;width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;color:var(--ink);min-height:38px;min-width:0}
.lhead .btn{display:inline-flex;align-items:center;gap:6px;min-height:40px}
.cards{display:flex;flex-direction:column;gap:20px}
/* Without an About column the heading row, the cards and the empty-state line are the wide page's direct children: cap them at a reading width and center them, so the cards don't stretch to the header's 1300px. */
.pub .wrap.wide>.lhead,.pub .wrap.wide>.cards,.pub .wrap.wide>.lede{max-width:800px;margin-left:auto;margin-right:auto}
.card{display:flex;gap:20px;padding:22px;border:1px solid #ECE7E0;border-radius:12px}
.card .dt{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:flex-start;background:var(--tint2);border-radius:10px;padding:10px 0;color:#3F1D73}
.card .dt .w{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.card .dt .n{font-family:Fraunces,Georgia,serif;font-size:30px;font-weight:700;line-height:1}
.card .dt .m{font-size:12px;font-weight:500}
.layout-thumbnails .card .dt{flex-basis:144px;width:144px;height:180px;padding:0}
.layout-thumbnails .card .dt .n{font-size:44px}
.card .th{display:block;flex:0 0 144px;width:144px;height:180px;align-self:flex-start;border-radius:10px;overflow:hidden;background:var(--paper);cursor:zoom-in}
.card .th:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card .th img{display:block;width:100%;height:100%;object-fit:cover}
.card .cb{display:flex;flex-direction:column;gap:6px;min-width:0}
.card .ck{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.card .sk{font-size:13px;color:var(--muted)}
.card h2{margin:0;font-family:Inter,system-ui,sans-serif;font-size:20px;font-weight:600;line-height:1.3}
.card h2 a{color:inherit;text-decoration:none}
.card h2 a:hover{color:var(--accent);text-decoration:underline}
.card .meta{font-size:14px;color:#4A4458}
.card p{margin:2px 0 0;font-size:14px;line-height:1.5;color:#4A4458}
.card .lnk{display:flex;gap:14px;margin-top:4px;font-size:13px}
.card .lnk a{font-weight:500}
/* Phones: a card stacks. The flyer runs the full width over the text, whole up to 440px tall (a taller one shows its
   top, and a tap opens all of it); it holds a 4:5 space until it loads. The date tile goes, as the event hero's does:
   the card's own text carries the date. */
@media(max-width:560px){.card{flex-direction:column;gap:14px;padding:16px}.card .dt{display:none}.card .th{flex:none;width:100%;height:auto}.card .th img{height:auto;aspect-ratio:auto 4/5;max-height:440px;object-position:top}.lhead h1{font-size:30px}}
/* The wide layout (list_layout "wide", views/public.jsx): the same cards with wide pictures, 1.91:1 (a made image's
   wide picture) at the flyer box's 180px height, in a column widened to 1000px so the text keeps its width. A picture
   not about that shape (.whole) shows uncropped over a blurred, enlarged copy of itself. On a phone the card stacks
   as above, the box across its width. */
.layout-wide .card .th,.layout-wide .card .dt{flex-basis:344px;width:344px;height:180px}
.layout-wide .card .dt{padding:0}
.layout-wide .card .dt .n{font-size:44px}
.card .th.whole{position:relative}
.card .th.whole img{position:relative;object-fit:contain}
.card .th.whole img.blur{position:absolute;inset:0;object-fit:cover;filter:blur(14px);transform:scale(1.2)}
.pub.layout-wide .wrap.wide>.lhead,.pub.layout-wide .wrap.wide>.cards,.pub.layout-wide .wrap.wide>.lede{max-width:1000px}
@media(max-width:560px){.layout-wide .card .th{flex:none;width:100%;height:auto;aspect-ratio:1.91}.layout-wide .card .th img{height:100%;aspect-ratio:auto;max-height:none;object-position:center}}/* public: event and occurrence pages (live-occurrence-page mockup) */
.gi .t b{color:var(--ink);font-weight:500}
.series .sub.after{margin:10px 0 0}
.side .fine{color:var(--muted);font-size:13px}
.side div.fine{margin-top:6px}
.side .crow{display:flex;justify-content:space-between;gap:12px}
.side .crow b{font-weight:600}
.side .tix{display:inline-flex;align-items:center;gap:6px;margin-top:12px}
.side .tix svg{flex:none}
.side .flyer-img{margin-bottom:22px}
.qr-img{display:block;width:120px;height:120px;border:1px solid var(--border);border-radius:6px;background:#fff;margin-bottom:8px}
/* dashboard: the share panel on /events. The QR code keeps its page link and PNG/SVG links beside it (just under it on
   a narrow phone); the feeds and the embed snippet run full width below, where they can't push those links away. */
.share-row{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.share-row .qr-img{flex:none;margin:0}
.share-row .kv{flex:1 1 150px;min-width:0;overflow-wrap:anywhere}
.share-label{display:block;margin-top:10px}
.share .feed-url{margin:4px 0 8px}
.share textarea.feed-url{resize:vertical;font-size:12px;line-height:1.4}
.qrl{font-size:12px}
.pres{display:flex;gap:10px;align-items:center;font-size:14px}
.pres .logo{width:34px;height:34px;object-fit:contain;flex:none}
.pres small{display:block;color:var(--muted);font-size:12px}
.also small{color:var(--muted)}
.morelink{font-size:14px;margin:0 0 12px}
.hero .cta button.btn{font-family:inherit}

/* admin */
.scroll{overflow-x:auto;margin-bottom:18px}
.tbl{border-collapse:collapse;width:100%;font-size:13px}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .sub{color:var(--muted);font-size:12px}
.tbl .acts{white-space:nowrap}
.tbl form.inl{display:inline-flex;gap:6px;align-items:center;margin:0 6px 4px 0}
form.stack{display:grid;gap:10px;max-width:480px;margin-bottom:18px}
/* Subscribe dialog (public pages) */
.subdlg{border:1px solid var(--border);border-radius:12px;padding:0;max-width:520px;width:calc(100% - 32px);box-shadow:0 12px 40px rgba(31,26,46,.15);color:var(--ink);font-family:Inter,system-ui,sans-serif}
.subdlg::backdrop{background:rgba(31,26,46,.35)}
.subdlg .mh2{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
.subdlg .mh2 h2{margin:0;font-size:18px;font-weight:700}
.subdlg .mh2 .linkbtn{font-size:16px}
.subdlg .mb{padding:18px 22px}
.subrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.subrow .btn{white-space:normal}
.sublabel{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 4px}
.copyrow{display:flex;gap:8px;align-items:stretch}
.copyrow .feed-url{flex:1 1 auto}
.copyrow .btn.sm{flex:none}
.foot .linkbtn.sub{color:var(--accent);font-weight:600}
.cta .btn[hidden],.foot .linkbtn[hidden]{display:none}
/* Flyer zoom and the QR dialog (public event pages) */
.flyer-zoom{display:block;cursor:zoom-in;max-width:240px}
.side .flyer-zoom{margin-bottom:22px}
.side .flyer-zoom .flyer-img{margin-bottom:0}
.zoomdlg{border:0;background:transparent;padding:0;max-width:min(96vw,960px);max-height:96vh;cursor:zoom-out}
.zoomdlg::backdrop{background:rgba(31,26,46,.82)}
.zoomdlg img{display:block;max-width:100%;max-height:92vh;width:auto;height:auto;margin:0 auto;border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.zoomdlg.haslink img{max-height:84vh}
.zoomdlg .zpage{display:block;width:max-content;margin:14px auto 0;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.zoomdlg .zpage:hover{background:rgba(255,255,255,.28)}
.zoomdlg .zpage:focus-visible{outline:2px solid #fff;outline-offset:2px}
.qrdlg{max-width:320px;text-align:center}
.qrdlg .qr-img{width:200px;height:200px;margin:0 auto 10px}
.qrdlg .qr-dl{font-size:13px;color:var(--muted)}
/* The event hero's buttons and the footer's Subscribe: an icon beside the words */
.hero .cta .btn,.foot .linkbtn.sub{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.hero .cta svg,.foot .linkbtn.sub svg{flex:none}
.m-only,.lbl-s{display:none}
/* Phones: narrower gutters; the event hero drops its date tile and fits its buttons on one row (Share and QR code
   go icon-only, and beside a tickets link the worded two show short labels; the full words stay for screen
   readers); the footer's Subscribe becomes a full-width button. */
@media(max-width:560px){
.wrap{padding:20px 16px 28px}
.pub .hdr{padding:14px 16px}
.pub .foot{padding:16px}
.subdlg .mh2,.subdlg .mb{padding-left:16px;padding-right:16px}
.hero{grid-template-columns:1fr}
.hero .tile{display:none}
.hero .cta{gap:8px}
.hero .cta .btn{padding:9px 12px}
.hero .cta .btn.solid{flex:1 0 auto}
.hero .cta .ico:not(.said){width:40px;padding-left:0;padding-right:0}
.hero .cta .lbl-s{display:inline}
.hero .cta .ico:not(.said) .lbl,.hero .cta .lbl-s+.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.m-only{display:inline}
.foot .subw{flex:1 1 100%}
.foot .linkbtn.sub{width:100%;padding:11px 14px;border-radius:8px;background:var(--accent);color:var(--on-accent,#fff);font-size:15px}
}

/* personality: brand color, logo size, the About box */
/* A haunt's brand color arrives as --accent/--on-accent on <body style> (on the .embed frame's style in a fragment); the tints follow it. Default pages carry no style attribute and keep the purple above. */
body.pub[style],.embed[style]{--tint:color-mix(in srgb,var(--accent) 6%,#fff);--tint2:color-mix(in srgb,var(--accent) 12%,#fff)}
.pub[style] .card .dt{color:color-mix(in srgb,var(--accent) 70%,#000)}
.pub .btn.solid,.pub .tile .m{color:var(--on-accent,#fff)}
.pub.logo-medium .org .logo{height:56px}
.pub.logo-large .org .logo{height:84px}
@media(max-width:560px){.pub.logo-large .org .logo{height:64px}}
.pub .layout.list{grid-template-columns:minmax(0,1fr) 300px;gap:40px}
@media(max-width:1000px){.pub .layout.list{grid-template-columns:1fr}}
/* The About box is a panel with the weight of a card, not a sidebar label: tinted in the brand color, a Fraunces title,
   body text at the cards' size. It starts level with the list's heading row. */
.pub .layout.list>.side{margin-top:16px}
.pub .layout.list .about,.cal-about .about{background:var(--tint);border:1px solid var(--border);border-radius:12px;padding:22px 24px 16px;margin:0}
.pub .layout.list .about>h3,.cal-about .about>h3{font-family:Fraunces,Georgia,serif;font-size:24px;line-height:1.15;font-weight:700;text-transform:none;letter-spacing:0;color:var(--ink);margin:0 0 12px}
/* calendar layout (views/calendar.jsx): a month grid with flyers on the days. Every month is in the markup; without a
   script they stack under their own headings, and once CAL_SCRIPT (or embed.js) adds .js only the .on month shows. */
.pub .wrap.wide>.lhead:has(.cal-nav),.embed .lhead:has(.cal-nav){max-width:none}
.cal-nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.cal-nav[hidden]{display:none}
.cal-nav button{width:36px;height:36px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--accent);font:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer}
.cal-nav button:disabled{color:var(--line);cursor:default}
.cal-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cal-now{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:20px;min-width:170px;text-align:center}
.cal-m+.cal-m{margin-top:40px}
.cal.js .cal-m{margin-top:0}
.cal.js .cal-m:not(.on){display:none}
.cal.js .cal-mh{display:none}
.cal-mh{font-family:Fraunces,Georgia,serif;font-size:22px;margin:0 0 12px}
.cal-none{margin:0 0 12px;font-size:14px;color:var(--muted)}
.cal-none a{font-weight:600}
.cal-g{width:100%;table-layout:fixed;border-collapse:collapse;border:1px solid var(--border)}
.cal-g th{padding:7px 8px;border:1px solid var(--border);background:var(--paper);text-align:left;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cal-g td{height:136px;padding:6px 7px 9px;border:1px solid var(--border);vertical-align:top}
.cal-g td .n{font-size:12px;font-weight:600;color:var(--muted)}
.cal-g td.today .n{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
.cal-g td.past{background:var(--paper)}
.cal-g td.past .n{color:#C9C3BB}
.cal-g td.out .n{color:#DDD7CF}
.cal .mk{display:none}
.cal .fl{display:grid;grid-template-columns:repeat(2,minmax(0,84px));gap:8px;margin-top:5px}
.cal .ev{min-width:0}
.cal .cf{display:block;border-radius:5px;overflow:hidden;background:var(--paper);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.cal .cf img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.cal .ct{display:block;margin-top:3px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
/* Below about 900px of calendar (a blog column), two flyers side by side would be slivers with their times wrapping: one per row instead. */
@media(max-width:900px){.cal .fl{grid-template-columns:minmax(0,1fr)}.cal .ev{max-width:72px}}
.embed.snug .cal .fl{grid-template-columns:minmax(0,1fr)}.embed.snug .cal .ev{max-width:72px}
.cal .chip{grid-column:1/-1;display:block;min-width:0;padding:4px 6px;border-radius:5px;background:var(--tint2);color:var(--accent);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.cal a.chip:hover{text-decoration:underline}
.cal .ls{list-style:none;margin:5px 0 0;padding:0;font-size:12px;line-height:1.35}
.cal .ls li{padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ls a{color:var(--ink);text-decoration:none}
.cal .ls a:hover{color:var(--accent);text-decoration:underline}
.cal .ls b{font-weight:600;color:var(--accent)}
.cal a.cf:focus-visible,.cal a.chip:focus-visible,.cal .ls a:focus-visible,.cal-none a:focus-visible,.cal-ag a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cal .was{opacity:.4;filter:grayscale(.7)}
.cal .ls li.cx{text-decoration:line-through}
.cal .cx b,.cal .ev.cx .ct,.cal-ag .cx small{color:var(--danger)}
/* Below about 900px of calendar (a blog column, an upright tablet) one line would hold the time and a few letters: the time takes its own line and the title up to two under it. */
@media(max-width:900px){.cal .chip{padding-bottom:0;border-bottom:4px solid var(--tint2)}.cal .chip b,.cal .ls b{display:block}.cal .chip,.cal .ls li{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:normal;overflow-wrap:anywhere}}
.embed.snug .cal .chip{padding-bottom:0;border-bottom:4px solid var(--tint2)}.embed.snug .cal .chip b,.embed.snug .cal .ls b{display:block}.embed.snug .cal .chip,.embed.snug .cal .ls li{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;white-space:normal;overflow-wrap:anywhere}
.cal-ag{display:none}
.cal-ag h4{font-family:Fraunces,Georgia,serif}
.cal-about{max-width:800px;margin:36px auto 0}
/* Under 700px the same table is a mini month (a * or (n) under each date) with the agenda below it; embed.js keys this on the element's own width (.narrow), the page on the viewport. The two blocks match. */
@media(max-width:700px){.lhead .cal-nav{flex-basis:100%;order:3;margin-left:0}.cal-now{flex:1;min-width:0;font-size:18px}.cal-g{border:0}.cal-g th{padding:0 0 6px;border:0;background:none;text-align:center;font-size:10px;letter-spacing:.04em}.cal-g td{height:auto;padding:5px 0 3px;border:0;border-radius:8px;text-align:center}.cal-g td .n{font-size:13px;color:var(--ink)}.cal-g td.past .n{color:#C9C3BB}.cal-g td.out .n{color:#DDD7CF}.cal-g td.past{background:none}.cal-g td.today{outline:2px solid var(--accent);outline-offset:-2px}.cal-g td.today .n{display:inline;padding:0;background:none;color:inherit}.cal-g td[data-cal-day]{background:var(--tint);cursor:pointer}.cal .fl,.cal .ls{display:none}.cal .mk{display:block;height:12px;font-size:10px;font-weight:700;line-height:12px;color:var(--accent)}.cal-g td.past .mk{color:#C9C3BB}.cal-ag{display:block}.cal .cal-ag{margin-top:14px;border-top:1px solid var(--border)}.cal-ag h4{margin:14px 0 4px;font-size:15px}.cal-ag ul{list-style:none;margin:0;padding:0}.cal-ag a{display:flex;gap:10px;align-items:center;padding:5px 0;color:var(--ink);text-decoration:none}.cal-ag img,.cal-ag .nf{display:block;flex:none;width:32px;height:40px;border-radius:4px;object-fit:cover;background:var(--tint2)}.cal-ag .t{min-width:0;font-size:14px;font-weight:600}.cal-ag small{display:block;font-size:12px;font-weight:400;color:var(--muted)}}
.side .about .bodytxt{font-size:15px;line-height:1.6;color:#2A2438}
.side .about .bodytxt p{margin:0 0 10px}
.side .about .bodytxt h3{font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);margin:14px 0 4px}
.side .about .bodytxt ul,.side .about .bodytxt ol{margin:0 0 10px;padding-left:20px}
.side .about .bodytxt li{margin:2px 0}
/* settings: the color field with its picker */
.colorrow{display:flex;gap:8px;align-items:center}
.f .colorrow input[type=color]{width:42px;height:38px;padding:3px;flex:none;cursor:pointer}
.f .colorrow .btn{flex:none}

/* embed: the fragment frame the <haunts-events> component puts in a shadow root */
/* Inherited text styles stop here, so the host's centering, letter-spacing or capitals don't leak in; the font is inherited on purpose. */
.embed{display:block;color:var(--ink);line-height:1.4;background:transparent;text-align:left;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;font-style:normal;white-space:normal}
.embed,.embed h1,.embed h2,.embed h3,.embed .tile .n,.embed .card .dt .n,.embed .also .mini b,.embed .card h2,.embed .occ .d .num,.embed .flyer,.embed .about>h3,.embed .cal-now,.embed .cal-ag h4,.embed button,.embed input{font-family:inherit}
.embed .lhead,.embed .cards,.embed .lede{max-width:800px;margin-left:auto;margin-right:auto}
.embed.layout-wide .lhead,.embed.layout-wide .cards,.embed.layout-wide .lede{max-width:1000px}
.embed .lhead h2{margin:0;font-size:32px;line-height:1.1}
.embed .hero h2{font-size:30px;line-height:1.15;margin:0 0 6px}
.embed .powered{margin:28px 0 0;padding-top:14px;border-top:1px solid var(--border);font-size:12px;color:var(--muted);text-align:center}
.embed .powered a{font-weight:600}
/* The back link heads the frame on someone else's page: an arrow, larger and bolder than the hosted pages' 13px, with
   room above it. Padding, not margin: a top margin would collapse out of the frame into the host's layout. */
.embed .back{font-size:15px;font-weight:600;padding-top:16px;margin-bottom:20px}
.embed .back a{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.embed .back a:hover{text-decoration:underline}
/* embed.js moves focus to a heading (tabindex="-1") on a deep link and after a swap back to the list, so keyboard and
   screen-reader users start there. A heading is a starting point, not a control: no focus ring. */
.embed h2[tabindex="-1"]:focus{outline:none}
/* .narrow: embed.js sets it while the element is under 700px wide (a ResizeObserver; a container query would collapse the embed in shrink-to-fit hosts). */
.embed.narrow.detail-sidebar .layout.detail{grid-template-columns:1fr;gap:32px}
.embed.narrow .side .flyer-zoom,.embed.narrow .side .flyer-img{max-width:240px}
/* the calendar's narrow rules (see the @media(max-width:700px) block by the calendar's), keyed on .narrow */
/* A narrow embed doesn't stack its cards as a phone does, so its flyer (and the date tile in its place) stays small. */
@media(min-width:561px){.embed.narrow .card .th,.embed.narrow.layout-thumbnails .card .dt{flex-basis:96px;width:96px;height:120px}.embed.narrow.layout-thumbnails .card .dt .n{font-size:34px}}
/* The wide layout in a narrow embed: the card stacks as on a phone, since a wide box beside the text would leave the
   text a sliver. */
.embed.narrow.layout-wide .card{flex-direction:column;gap:14px}
.embed.narrow.layout-wide .card .dt{display:none}
.embed.narrow.layout-wide .card .th{flex:none;width:100%;height:auto;aspect-ratio:1.91}
/* The wide layout's event page: beside the text (over 900px, and not in a snug or narrow embed) the sidebar widens to
   400px for a wide picture (.wd), and a tall flyer keeps the 300px it has on the other layouts. Where the page stacks,
   a wide picture runs up to 480px (a tall one keeps its 240px cap); on a phone, the full width (the last rule). */
@media(min-width:901px){.layout-wide.detail-sidebar:not(.snug) .layout.detail{grid-template-columns:minmax(0,1fr) 400px}.layout-wide.detail-sidebar:not(.narrow) .side .flyer-zoom:not(.wd){max-width:300px}}
.layout-wide .side .flyer-zoom.wd{max-width:480px}
.layout-wide .side .flyer-zoom.wd .flyer-img{max-width:none}
.embed.narrow .lhead .cal-nav{flex-basis:100%;order:3;margin-left:0}.embed.narrow .cal-now{flex:1;min-width:0;font-size:18px}.embed.narrow .cal-g{border:0}.embed.narrow .cal-g th{padding:0 0 6px;border:0;background:none;text-align:center;font-size:10px;letter-spacing:.04em}.embed.narrow .cal-g td{height:auto;padding:5px 0 3px;border:0;border-radius:8px;text-align:center}.embed.narrow .cal-g td .n{font-size:13px;color:var(--ink)}.embed.narrow .cal-g td.past .n{color:#C9C3BB}.embed.narrow .cal-g td.out .n{color:#DDD7CF}.embed.narrow .cal-g td.past{background:none}.embed.narrow .cal-g td.today{outline:2px solid var(--accent);outline-offset:-2px}.embed.narrow .cal-g td.today .n{display:inline;padding:0;background:none;color:inherit}.embed.narrow .cal-g td[data-cal-day]{background:var(--tint);cursor:pointer}.embed.narrow .cal .fl,.embed.narrow .cal .ls{display:none}.embed.narrow .cal .mk{display:block;height:12px;font-size:10px;font-weight:700;line-height:12px;color:var(--accent)}.embed.narrow .cal-g td.past .mk{color:#C9C3BB}.embed.narrow .cal-ag{display:block}.embed.narrow .cal .cal-ag{margin-top:14px;border-top:1px solid var(--border)}.embed.narrow .cal-ag h4{margin:14px 0 4px;font-size:15px}.embed.narrow .cal-ag ul{list-style:none;margin:0;padding:0}.embed.narrow .cal-ag a{display:flex;gap:10px;align-items:center;padding:5px 0;color:var(--ink);text-decoration:none}.embed.narrow .cal-ag img,.embed.narrow .cal-ag .nf{display:block;flex:none;width:32px;height:40px;border-radius:4px;object-fit:cover;background:var(--tint2)}.embed.narrow .cal-ag .t{min-width:0;font-size:14px;font-weight:600}.embed.narrow .cal-ag small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
/* .snug: under 960px (embed.js), as in a blog's 720-760px column, the event hero's buttons would wrap beside the date
   tile, so they take a row of their own across the main column, under the tile and the title. The text column's box
   steps aside (display:contents) so .htitle and .cta are the grid's items. Keyed on .hcol and .htitle, so a fragment
   cached from before them keeps its old layout. */
.embed.snug .hero{row-gap:14px}
.embed.snug .hero .hcol{display:contents}
.embed.snug .htitle .when{margin-bottom:0}
.embed.snug .hcol>.cta{grid-column:1/-1}
/* demo preview wrapper (views/demo.jsx): the chrome is Haunts purple whatever the haunt's brand color, which reaches only the list in the frame */
body.pub.pv-demo{background:var(--paper)}
.pv-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:14px 32px;background:#66298e;color:#fff;font-size:15px;line-height:1.4}
.pv-banner a{color:#fff}
.pv-banner .pv-go{background:#fff;color:#3F1D73;font-weight:600;font-size:14px;padding:10px 16px;border-radius:999px;text-decoration:none;white-space:nowrap}
@media(max-width:560px){.pv-banner{padding:12px 16px}}
.pv-hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;margin:8px 0 32px}
.pv-head{max-width:680px;min-width:0}
.pv-kick{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#66298e}
.pv-hero h1{font-size:44px;line-height:1.05;margin:10px 0 0;overflow-wrap:anywhere}
.pv-intro{font-size:18px;line-height:1.5;color:#4A4458;margin:10px 0 0;overflow-wrap:anywhere}
.pv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;color:var(--muted);text-align:right}
.pv-cap{font-size:14px;font-weight:600;color:#4A4458;margin-bottom:10px}
.pv-frame{background:#fff;border:1px solid var(--border);border-radius:16px;padding:8px 28px 28px}
.pv-frame>.lhead,.pv-frame>.cards,.pv-frame>.lede,.pv-frame>.pv-next{max-width:800px;margin-left:auto;margin-right:auto}
.pv-frame .lhead h2{margin:0;font-size:32px;line-height:1.1}
.pv-next{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px;border:1px dashed var(--line);border-radius:12px;font-size:14px;color:var(--muted);margin-top:20px;text-align:center}
.pv-next svg{flex:none}
.pv-gets,.pv-feeds{margin-top:40px}
.pv-gets>h2{font-size:26px;margin:0 0 14px}
/* Three across at most, however wide the page: a column is at least 300px and at least a third of the row (less the two
   12px gaps); min(100%, …) lets a phone narrower than 300px take one column. */
.pv-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(300px,calc((100% - 24px)/3))),1fr));gap:12px}
.pv-block{background:#fff;border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.pv-block h3{font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;margin:0 0 4px}
.pv-block p{font-size:14px;line-height:1.5;color:#4A4458;margin:0;overflow-wrap:anywhere}
.pv-qr{display:block;width:96px;height:96px;border:1px solid #ECE7E0;border-radius:6px;padding:3px;background:#fff;box-sizing:content-box}
.pv-dl{font-size:13px;color:var(--muted)}
.pv-ftext{font-size:14px;line-height:1.5;color:#4A4458;margin:0;overflow-wrap:anywhere}
.pv-block.pv-pub{background:#F2EDF9;border-color:#DCCFF0}
.pv-pub h3,.pv-pub p{color:#3F1D73}
.pv-fhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:14px}
.pv-fhead h2{font-size:24px;margin:0}
.pv-sub{font-size:13px;color:var(--muted)}
.pv-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(300px,calc((100% - 24px)/3))),1fr));gap:12px}
.pv-feed{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.pv-flabel{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pv-feed .feed-url{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:#fff;color:var(--ink);min-width:0;resize:none}
.pv-feed .btn{align-self:flex-start}
.pv-claim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin:40px 0 8px;padding:44px 40px;border-radius:20px;background:#1F1A2E;color:#fff}
.pv-cb{max-width:620px}
.pv-claim h2{font-size:34px;line-height:1.1;margin:0 0 10px;color:#fff}
.pv-claim p{font-size:16px;line-height:1.55;color:#D8D2E4;margin:0 0 10px}
.pv-claim .pv-fine{font-size:13px;color:#A99FBF;margin:0}
/* Under the dark closing section, quieter than it: one line for whoever wants to read up before claiming. */
.pv-more{margin:36px 0 12px;text-align:center}
.pv-more h2{font-size:22px;margin:0 0 6px}
.pv-more a{font-size:16px;font-weight:600;color:#66298e}
.pv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:12px;background:#fff;color:#1F1A2E;font-weight:700;font-size:16px;text-decoration:none;text-align:center}
@media(max-width:560px){.pv-hero h1{font-size:30px}.pv-meta{align-items:flex-start;text-align:left}.pv-frame{padding:8px 16px 20px}.pv-claim{padding:28px 22px}}
/* claim pages (views/claim.jsx): the auth box, a little wider, with the three lines of what claiming gives */
.auth.claim{max-width:520px}
.claim p:not(.lede){text-align:left;font-size:14px;line-height:1.5}
.claim .gets{text-align:left;margin:0 0 22px;padding-left:20px;font-size:14px;line-height:1.5}
.claim .gets li+li{margin-top:6px}
/* Phones: an event page's flyer runs the column's full width, whole (the event's own page never crops it), as the list
   cards' flyers do. Last, and as specific as the 240px caps above (.detail-sidebar under 900px, .embed.narrow), so it
   outranks them on a page and in an embed alike. */
@media(max-width:560px){.layout.detail .side .flyer-zoom,.layout.detail .side .flyer-img{max-width:none}}
/* The Image box's way into the image maker: under the drop box, "or" and Make an image; under an uploaded image's
   Replace and Remove, a link. A made image that shows old details gets a flag with Redraw. */
.sec>.or{text-align:center;font-size:12px;color:var(--muted);margin:10px 0 8px}
.sec>.or+.btn{display:block;width:max-content;max-width:100%;margin:0 auto}
.sec>.or+.btn+.hint{text-align:center}
.mklink{font-size:13px;font-weight:600;margin-top:10px}
.stale{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-top:10px;padding:8px 10px;border-radius:8px;background:#FFF4E0;border:1px solid #EBCB8B;font-size:13px;color:#6B4A00}
/* The image maker (views/image-maker.jsx): controls left, the preview right (above them on a phone), the buttons
   under both. Each choice is a real radio drawn as a tile or swatch; without the script the photo panels stack
   under their own headings, with it they are tabs. */
.maker{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:20px 32px;align-items:start;border:1px solid var(--border);border-radius:12px;padding:20px}
.mk-ctl{min-width:0}
.mk-sec{border:0;margin:0 0 20px;padding:0;min-width:0}
.mk-sec legend,.mk-lb{display:block;padding:0;margin:0 0 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mk-lb small{font-weight:400;text-transform:none;letter-spacing:0}
.mk-in{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:14px;min-height:38px;color:var(--ink);background:#fff}
.mk-lays{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mk-lay{position:relative;display:block;cursor:pointer;text-align:center}
.mk-lay input,.mk-bg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.mk-pic{position:relative;display:block;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#4A4458;box-shadow:0 0 0 1px var(--border)}
.mk-pic i{position:absolute;display:none;border-radius:2px;background:#fff}
.mk-pic .ph{background:#C9C3BB;border-radius:0}
.mk-pic .t,.mk-pic .t2{opacity:.9;height:8%}
.mk-pic .l{opacity:.55;height:5%}
.mk-pic.a .ph{display:block;left:0;right:0;top:0;height:56%}
.mk-pic.a .t{display:block;left:12%;right:24%;top:63%}
.mk-pic.a .l{display:block;left:12%;right:44%;top:77%}
.mk-pic.e .ph{display:block;left:0;top:0;bottom:0;width:46%}
.mk-pic.e .t{display:block;left:56%;right:8%;top:30%}
.mk-pic.e .t2{display:block;left:56%;right:20%;top:42%}
.mk-pic.e .l{display:block;left:56%;right:14%;top:58%}
.mk-pic.b .ph{display:block;left:27%;width:46%;top:12%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px #fff}
.mk-pic.b .t{display:block;left:16%;right:16%;top:58%}
.mk-pic.b .l{display:block;left:28%;right:28%;top:73%}
.mk-pic.c .ph{display:block;inset:0}
.mk-pic.c .fd{display:block;left:0;right:0;bottom:0;height:55%;border-radius:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent)}
.mk-pic.c .t{display:block;left:12%;right:24%;top:66%}
.mk-pic.c .l{display:block;left:12%;right:44%;top:80%}
.mk-pic.d .t{display:block;left:12%;right:12%;top:26%;height:11%}
.mk-pic.d .t2{display:block;left:12%;right:38%;top:41%;height:11%}
.mk-pic.d .l{display:block;left:12%;right:40%;top:62%}
.mk-name{display:block;margin-top:5px;font-size:11px;line-height:1.3;color:var(--muted)}
.mk-lay:has(input:checked) .mk-pic{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.mk-lay:has(input:checked) .mk-name{color:var(--accent);font-weight:600}
.mk-lay:has(input:focus-visible) .mk-pic{outline:2px solid var(--accent);outline-offset:5px}
.mk-tabs{display:flex;gap:4px;margin-bottom:10px}
.mk-tabs button{font:inherit;font-size:13px;padding:5px 11px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
.mk-tabs button[aria-selected=true]{background:var(--tint2);border-color:#C9A9DF;color:var(--accent);font-weight:600}
.mk-ph{font-size:13px;font-weight:600;margin:12px 0 6px}
.mk-tabs+.mk-panel .mk-ph{margin-top:0}
.mk-photo.tabbed .mk-ph{display:none}
.mk-panel .hint{margin-top:0}
.mk-search{display:flex;gap:6px}
.mk-search input{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;min-height:34px;background:#fff;color:var(--ink)}
.mk-panel>.err{color:var(--danger);font-size:12px;margin-top:6px}
.mk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mk-results{max-height:min(38vh,340px);overflow-y:auto;margin-top:8px}
.mk-results:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mk-none{margin:8px 0 0;font-size:13px;color:var(--muted)}
.mk-hit{position:relative;display:block;padding:0;border:0;border-radius:6px;overflow:hidden;aspect-ratio:1;background:var(--paper);cursor:pointer}
.mk-hit img{display:block;width:100%;height:100%;object-fit:cover}
.mk-hit .by{position:absolute;left:0;right:0;bottom:0;padding:8px 5px 3px;font-size:10px;color:#fff;text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.65));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-hit:hover,.mk-hit:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mk-hit.busy{opacity:.5;outline:2px solid var(--accent)}
@media(max-width:560px){.mk-results{max-height:min(30vh,240px)}}
.mk-credit{font-size:11px;color:var(--muted);margin:6px 0 0}
.mk-credit a{color:var(--muted)}
.mk-bgs{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.mk-bg{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.mk-bg .sw{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);flex:none}
.mk-bg .sw.custom{background:conic-gradient(#e53935,#fdd835,#43a047,#1e88e5,#8e24aa,#e53935)}
.mk-bg .sw.none{background:linear-gradient(135deg,#fff calc(50% - 1px),#b3261e calc(50% - 1px),#b3261e calc(50% + 1px),#fff calc(50% + 1px))}
.mk-bg:has(input:checked) .sw{box-shadow:0 0 0 2px var(--accent)}
.mk-bg:has(input:checked){font-weight:600}
.mk-bg:has(input:focus-visible) .sw{outline:2px solid var(--accent);outline-offset:3px}
.mk-color{width:38px;height:28px;padding:1px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.mk-pv{min-width:0;position:sticky;top:16px}
.mk-wide{position:relative;aspect-ratio:2400/1260;border-radius:8px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--border)}
.mk-wide img{display:block;width:100%;height:100%;transition:opacity .2s}
.mk-wide.loading img{opacity:.55}
.mk-cap{font-size:12px;color:var(--muted);margin:6px 0 16px;line-height:1.5}
/* The Logo section: the square logo or the banner, then its two checkboxes. */
.mk-marks{display:flex;flex-wrap:wrap;gap:4px 18px;margin-bottom:4px}
.mk-check{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:14px;cursor:pointer}
.mk-check input{margin:0;accent-color:var(--accent)}
.mk-list{display:flex;gap:14px;align-items:flex-end}
.mk-list .mk-cap{margin:0}
/* The list's flyer box: the 4:5 picture at 96x120. */
.mk-mini{display:block;flex:none;width:96px;height:120px;object-fit:cover;border-radius:6px;background:var(--paper);box-shadow:0 0 0 1px var(--border)}
.mk-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;border-top:1px solid var(--border);padding:14px 0;position:sticky;bottom:0;z-index:2;background:#fff;box-shadow:0 -8px 12px -8px rgba(31,26,46,.18)}
.mk-foot .mk-why{margin:0 auto 0 0}
.mk-foot .btn:disabled{opacity:.5;cursor:not-allowed}
/* Use this image while the picture is drawn (public/js/image-maker.js): its spinner in white on the accent. */
.mk-foot .btn.busy,.mk-foot .btn.busy:disabled{opacity:.8;cursor:progress}
.btn.solid.busy .spin{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@media(max-width:860px){.maker{grid-template-columns:minmax(0,1fr);padding:16px}.mk-pv{position:static;order:-1}}