/* =====================================================================================================
   Dragon Mountain website admin: the "News & Events" screen and its fun add-in system (Addendum B rev 2, B14).
   Loaded after admin.css on every admin page (dmr_head). From the approved admin mockup's assets/fun.css
   (dev/reference/admin-fun.css), in the admin's own language: paper tickets, 3 px navy borders, offset shadows,
   Barlow labels, Alfa Slab headings. Touch targets >= 48 px, inputs >= 16 px. Motion only where it means something
   (the sticker peel, the publish celebration, the upload rider, the New story road); the reduced-motion rules at the
   end switch all of it off. No inline styles anywhere (CSP): every per-element value is set through the CSSOM.
   Not taken from the mockup: its strip that marks the mockup pages, and its client-side ticket (ticket.css): the live
   ticket is drawn by the website's own renderer (B14.4).
   ===================================================================================================== */
:root{--asphalt:#1B2A42;--site-pine:#14261C;--b2:#4F7496}

/* the phone tab bar: the screen's full name, on two lines (only this tab wraps; the bar grows 6 px, B14.13) */
.tab-2l{gap:2px}
.tab-2l span{white-space:nowrap;overflow:visible;text-align:center;line-height:1}
.tab-2l span+span{margin-top:-1px}
@media (max-width:1023px){:root{--tabbar-h:74px}}

/* the riders drawn with the site's own bikes (their colours; the admin CSP allows no style="") */
.rd-red{color:#D8342C;--jk:#6B3820;--hm:#F6ECD6;--hs:#D8342C;--sf:#F7B733;--js:#F7B733}
.rd-gold{color:#F7B733;--ts:#D8342C;--jk:#3F6B4A;--hm:#F26B2B;--hs:#101C2E;--sf:#D8342C;--js:#F6ECD6}

/* ---------------------------------------------------------------- the News & Events home */
.ne-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.ne-head .greet{margin:0}
.ne-intro{margin:0 0 14px}
.ne-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 18px}
.ne-tabs a{justify-content:center;gap:10px;min-height:56px;font-size:18px;border-width:3px;box-shadow:3px 3px 0 var(--navy)}
.ne-tabs a .ic{width:24px;height:24px}
.ne-tabs a[aria-current="page"]{background:var(--navy);color:var(--cream);box-shadow:3px 3px 0 var(--orange)}
.ne-tabs a[aria-current="page"] .bl-count{border-color:var(--cream)}
.ne-add{flex:0 1 auto}
.ns-tabs{margin-top:-4px}

/* the empty states: an illustration and ONE big button */
.ne-empty{text-align:center;padding:20px 16px 22px}
.ne-empty-art{display:block;width:100%;max-width:460px;height:auto;margin:0 auto 12px}
.ticket.ne-empty .ne-empty-h{display:block;font:400 27px/1.15 var(--f-display);margin:0 0 8px}
.ne-empty p{max-width:44ch;margin:0 auto 18px}
.ne-big{width:100%;max-width:440px;min-height:64px;font-size:21px;gap:12px;border-radius:12px}
.ne-big .ic{width:28px;height:28px}
.ne-empty .hint{margin:12px auto 0;max-width:40ch}

/* "On the website right now": the letter board the visitors see until there is an event */
.ne-now p{margin-bottom:10px}
.lb-board{display:inline-flex;flex-wrap:wrap;gap:6px 12px;margin:2px 0 12px;padding:10px 12px;background:#FFF9EA;border:3px solid var(--gold);border-radius:6px;
  box-shadow:inset 0 0 0 2px var(--navy),3px 3px 0 rgba(0,0,0,.25);max-width:100%}
.lb-w{display:flex;gap:3px}
.lb-w i{display:flex;align-items:center;justify-content:center;width:1.04em;height:1.26em;font:400 20px/1 var(--f-display);font-style:normal;color:var(--navy);
  background:linear-gradient(#FFFDF6,#EFE6D0);border:1.5px solid rgba(16,28,46,.35);border-radius:3px}
.lb-w i:nth-child(odd){transform:rotate(-1.5deg)}
.lb-w i.red{color:var(--red-d)}
.lb-night{display:inline-block;padding:12px;border-radius:10px;background:#1A2A45;box-shadow:3px 3px 0 var(--red-d)}
.lb-night .lb-board{margin:0}
.ne-now-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 14px}
.ne-now-row .lb-night{flex:0 1 auto;min-width:0;max-width:100%}
.ne-mini-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ne-mini-btns span{display:inline-flex;align-items:center;min-height:30px;padding:0 10px;border:2px solid var(--cream);border-radius:6px;background:var(--red-d);color:var(--cream);
  font:700 13px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.ne-mini-btns span+span{background:transparent}

/* the photo roll (the film strip at the bottom of the website page) */
.ne-film{position:relative;margin:6px 0 14px;padding:24px 0 26px;background:#17120F;border-radius:6px;box-shadow:5px 5px 0 var(--orange)}
.ne-film::before,.ne-film::after{content:"";position:absolute;left:8px;right:8px;height:10px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Crect x='6' y='1' width='12' height='8' rx='2.2' fill='%23F6ECD6' opacity='.9'/%3E%3C/svg%3E") 0 0/24px 10px repeat-x}
.ne-film::before{top:7px}.ne-film::after{bottom:7px}
.ne-film ol{list-style:none;margin:0;padding:0 12px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--gold) #17120F}
.ne-film li{flex:0 0 132px;position:relative}
.ne-film img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;outline:1px solid rgba(246,236,214,.25);filter:sepia(.12) saturate(1.08) contrast(1.05)}
.ne-film li::after{content:attr(data-n);position:absolute;left:3px;bottom:-17px;font:700 10px/1 var(--f-label);letter-spacing:.2em;color:#F7B733}
.ne-film-empty{margin:0;padding:18px 16px;color:var(--cream);text-align:center;font:700 16px/1.3 var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.ne-roll .btn-row .btn{flex:1 1 200px}
.ne-roll-note{margin:-4px 0 12px}

/* the list rows: countdown chips, the sticker on the stub, the PAST stamp */
.evm-stubw{position:relative;flex:none;margin-right:10px}
.evm-stubw .evm-stk{position:absolute;z-index:2;top:-13px;right:-15px;width:38px;height:38px;transform:rotate(9deg);filter:drop-shadow(1px 2px 0 rgba(16,28,46,.5))}
.evm-stubw .evm-stk svg{width:100%;height:100%}
.chip .ic{width:15px;height:15px;margin:0 5px 0 -3px}
.cd{background:var(--gold)}
.cd-today{background:var(--pine);border-color:var(--pine);color:var(--white)}
.cd-far{background:var(--cream)}
.cat-chip svg{width:16px;height:16px;margin:0 5px 0 -4px;flex:none}
.past-stamp{position:absolute;z-index:3;left:-4px;top:20px;padding:3px 7px 2px;border:3px solid var(--red-d);border-radius:6px;background:rgba(255,246,223,.72);
  color:var(--red-d);font:400 18px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;transform:rotate(-16deg);box-shadow:inset 0 0 0 1.5px rgba(194,43,36,.35);pointer-events:none}
.evm-row.is-new{background:linear-gradient(90deg,rgba(247,183,51,.28),rgba(247,183,51,0) 70%);border-radius:10px}
.ns-label{background:var(--gold)}
@media (max-width:719px){
  .events-mgr .ne-add{position:fixed;right:16px;bottom:calc(var(--tabbar-h) + 18px + var(--safe-b));z-index:35;min-height:var(--fab-h);border-radius:999px;
    padding:6px 22px;box-shadow:4px 4px 0 var(--orange)}
  .events-mgr .toasts{bottom:calc(var(--tabbar-h) + 90px + var(--safe-b))}
}

/* the Dashboard's quick tiles: 2 x 2 on a phone, one row on a computer */
.tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles-4 .tile{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:76px;padding:10px 14px}
.tile-fun{position:relative;overflow:visible}
.tile-fun .tile-stk{position:absolute;top:-12px;right:-8px;width:40px;height:40px;transform:rotate(10deg);filter:drop-shadow(1px 2px 0 rgba(16,28,46,.5))}
.tile-fun .tile-stk svg{width:100%;height:100%}
@media (min-width:720px){.tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------------------------------------------------------------- the event sheet (the M3 sheet, made fun) */
.fx-top{position:sticky;top:0;z-index:4;margin:0 calc(var(--gut) * -1);padding:0 var(--gut);background:var(--paper)}
.fx-top .ev-sh-head{position:static;margin:0}
/* the live peek (phones): the ticket in miniature, always in view while you type */
.peek{position:relative;display:flex;align-items:center;gap:10px;margin:0 calc(var(--gut) * -1);padding:8px var(--gut) 10px;background:var(--cream);border-bottom:2px solid rgba(16,28,46,.2)}
.peek-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:58px;height:58px;border:2px solid var(--navy);border-radius:8px;
  background:repeating-linear-gradient(135deg,rgba(16,28,46,.08) 0 7px,transparent 7px 14px),var(--gold);text-align:center}
.peek-stub b{font:400 19px/1 var(--f-display);color:var(--red-d);white-space:nowrap}
.peek-stub b.q{color:#6B6455}
.peek-stub b.rng{font-size:15px;letter-spacing:-.02em}
.peek-stub span{font:700 11px/1.1 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.peek-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.peek-t{font:400 17px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peek-t.ghost{color:#6B6455}
.peek-w{font:700 13px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--rust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peek-stk{flex:none;width:44px;height:44px;transform:rotate(8deg);filter:drop-shadow(1px 2px 0 rgba(16,28,46,.5))}
.peek-stk svg{width:100%;height:100%}
.peek-go{flex:none;padding:4px 12px;box-shadow:none;font-size:15px}
/* numbered steps, like the post editor's sections */
.fx-step{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font:400 21px/1.2 var(--f-display)}
.fx-step:first-child{margin-top:6px}
.fx-step .acc-n{width:30px;height:30px;font-size:16px}
.fx-step small{margin-left:auto;font:700 13px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
/* the date button: shows the road-sign stub */
.dt-btn{display:flex;align-items:center;gap:14px;width:100%;min-height:92px;padding:8px 14px 8px 8px;margin:0;border:3px solid var(--navy);border-radius:12px;background:var(--white);
  box-shadow:3px 3px 0 var(--navy);color:var(--navy);font:inherit;text-align:left;cursor:pointer}
.dt-btn:hover{background:var(--cream)}
.dt-btn[aria-invalid="true"]{border-color:var(--red-d);box-shadow:3px 3px 0 var(--red-d)}
.dt-btn .evm-stub{width:76px;min-height:72px}
.evm-stub-day.q{color:#6B6455}
.dt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.dt-txt b{font:400 19px/1.2 var(--f-display)}
.dt-txt span{font-size:15px;color:var(--ink-2)}
.dt-btn>.ic{color:var(--rust)}
.fx-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin-top:14px}
.fx-times .field{min-width:0}
.fx-times input{min-width:0;width:100%}
/* the category chips ("What's on", "What's it about?") */
.cat-grid{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.cat{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:6px 16px 6px 10px;margin:0;border:2px solid var(--navy);border-radius:999px;
  background:var(--white);color:var(--navy);font:700 16px/1 var(--f-label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cat:hover{background:var(--cream)}
.cat svg{width:24px;height:24px;flex:none}
.cat[aria-pressed="true"],.cat[aria-checked="true"]{background:var(--navy);color:var(--cream);border-color:var(--navy);box-shadow:3px 3px 0 var(--orange)}
.cat[aria-pressed="true"] svg,.cat[aria-checked="true"] svg,.cat[aria-pressed="true"][data-c] svg,.cat[aria-checked="true"][data-c] svg{color:var(--gold)}
.cat[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.cat-main{position:absolute;top:-11px;right:-6px;padding:3px 6px 2px;border:2px solid var(--navy);border-radius:999px;background:var(--gold);color:var(--navy);
  font:700 11px/1 var(--f-label);letter-spacing:.12em}
.cat-make{position:absolute;top:-11px;right:-6px;padding:3px 6px 2px;border:2px solid var(--navy);border-radius:999px;background:var(--cream);color:var(--navy);
  font:700 11px/1 var(--f-label);letter-spacing:.1em}
.cat-more{border-style:dashed;background:var(--cream)}
.cat-more svg{color:var(--navy)}
.cat-more[aria-expanded="true"]{border-style:solid}
.cat-more[aria-expanded="true"] svg{transform:rotate(45deg)}
.cat-x{display:contents}
.cat-x[hidden]{display:none}
.cat-mains{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.cat-mains .btn{box-shadow:none;font-size:15px}
/* the sticker on the ticket */
.stk-field{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.stk-slot{position:relative;flex:none;display:grid;place-items:center;width:104px;height:104px;padding:0;margin:0;border:2px dashed rgba(16,28,46,.35);border-radius:50%;
  background:var(--white);cursor:pointer}
.stk-slot svg.stk-art{width:92px;height:92px;transform:rotate(-7deg);filter:drop-shadow(2px 3px 0 rgba(16,28,46,.5))}
.stk-slot .stk-empty{width:34px;height:34px;color:var(--ink-2)}
.stk-slot .stk-pen{position:absolute;right:-2px;bottom:2px;display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--navy);border-radius:50%;background:var(--gold)}
.stk-slot .stk-pen .ic{width:17px;height:17px}
.stk-slot.is-new svg.stk-art{animation:stkland .42s cubic-bezier(.2,1.4,.4,1) both}
@keyframes stkland{0%{transform:rotate(-30deg) scale(1.4);opacity:0}100%{transform:rotate(-7deg) scale(1);opacity:1}}
.stk-side{flex:1 1 180px;min-width:0}
.stk-side .btn{width:100%}
.stk-why{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.stk-why b{color:var(--navy)}
/* segmented choices (kind of stay, one or more days, where the preview shows) */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg>button,.seg>label{flex:1 1 0;min-width:72px}
.seg .btn{box-shadow:none;padding:6px 10px;font-size:16px}
.seg .btn[aria-checked="true"],.seg .btn[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.fx-sw{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;padding:12px 0;border-top:2px dashed rgba(16,28,46,.22)}
.fx-step + .fx-sw{border-top:0}
.fx-sw-txt{flex:1 1 200px;min-width:0}
.fx-sw-txt b{display:block;font:700 18px/1.2 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.fx-sw-txt .hint{margin-top:2px}
.fx-sw .switch{min-width:0}
.fx-sub{margin:-2px 0 10px;padding:12px;border:2px dashed rgba(16,28,46,.3);border-radius:10px;background:var(--white)}
.fx-sub .field-label{margin-bottom:8px}
.fx-sub .field:last-child{margin-bottom:0}
.fx-more{margin:2px 0 6px;border-top:2px dashed rgba(16,28,46,.22)}
.fx-more summary{display:flex;align-items:center;gap:10px;min-height:48px;cursor:pointer;font:700 16px/1.2 var(--f-label);letter-spacing:.08em;text-transform:uppercase;list-style:none}
.fx-more summary::-webkit-details-marker{display:none}
.fx-more summary .ic{transition:transform .15s}
.fx-more[open] summary .ic{transform:rotate(180deg)}
.fx-story-pick{margin:0 0 10px}
.fx-story-pick select{width:100%}
/* the photo */
.fx-photo{margin:0 0 6px;padding:12px;border:2px dashed rgba(16,28,46,.35);border-radius:10px}
.ph-pick{display:flex;flex-wrap:wrap;gap:10px}
.ph-pick .btn{flex:1 1 160px;box-shadow:none}
.ph-empty{display:flex;align-items:center;gap:12px;margin:0 0 12px;color:var(--ink-2)}
.ph-empty .ic{width:40px;height:40px;flex:none}
.ph-chosen{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;margin:0 0 12px}
.ph-print{flex:none;width:150px;padding:6px 6px 0;background:#FFF9EA;border:2px solid var(--navy);box-shadow:3px 4px 0 rgba(16,28,46,.82);transform:rotate(-2deg)}
.ph-print img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;outline:1.5px solid rgba(16,28,46,.55)}
.ph-print span{display:block;min-height:26px;padding:4px 2px 6px;font:600 18px/1 var(--f-hand);color:#1d2a40;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ph-chosen .ph-btns{flex:1 1 160px;display:flex;flex-direction:column;gap:8px}
.ph-chosen .ph-btns .btn{box-shadow:none}
/* the upload, with a motorcycle riding the progress road to the checkered flag (B14.8) */
.rp-item{margin:0 0 12px;padding:10px 12px 12px;border:2px solid var(--navy);border-radius:10px;background:var(--white)}
.rp-name{display:flex;justify-content:space-between;gap:10px;margin:0 0 4px;font-weight:600;word-break:break-all}
.rp-pct{flex:none;font:700 16px/1.4 var(--f-label);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.rp{--p:0;position:relative;height:58px;margin:0 22px 0 4px}
.rp-road{position:absolute;left:0;right:0;bottom:6px;height:16px;border:2px solid var(--navy);border-radius:8px;background:var(--cream);overflow:hidden}
.rp-done{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 1%);background:repeating-linear-gradient(90deg,#F7B733 0 10px,transparent 10px 18px) 0 50%/100% 2px no-repeat,var(--asphalt)}
.rp-rider{position:absolute;left:calc(var(--p) * 1%);bottom:12px;width:66px;height:42px;margin-left:-50px;transition:left .25s linear}
.rp-rider svg{width:100%;height:100%;overflow:visible}
.rp-rider .rp-bob{animation:rpbob .5s ease-in-out infinite alternate}
@keyframes rpbob{from{transform:translateY(0)}to{transform:translateY(-1.5px)}}
.rp-flag{position:absolute;right:-20px;bottom:8px;width:22px;height:40px}
.rp-msg{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
.rp-item[data-state="done"],.mq[data-state="done"] .rp-road{border-color:var(--pine)}
.rp-item[data-state="done"]{background:var(--ok-bg);border-color:var(--pine)}
.mq .rp{margin-bottom:4px}
/* the preview pane */
.fx-pv-rows{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.fx-pv-rows .seg{flex-wrap:nowrap}
.fx-pv-rows .seg .btn{min-width:0}
.fx-pv-rows .seg .btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-pv .ev-pv-h{display:flex;align-items:center;gap:8px}
.live-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--red-d);box-shadow:0 0 0 3px rgba(194,43,36,.25)}
.fx-pv-note{margin:8px 0 0}
.ev-pv-wrap{background:var(--cream)}
.ev-pv-wrap .ev-pv-frame{background:transparent}
.ev-pv-frame.is-back{position:absolute;left:0;top:0;visibility:hidden}
@media (min-width:1024px){.peek{display:none}}

/* ---------------------------------------------------------------- the friendly date picker (B14.7) */
dialog.sheet.dp-sheet .sheet-body{padding-top:16px}
.dp-top{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.dp-top .evm-stub{width:84px;min-height:80px}
.dp-top .evm-stub-day{font-size:26px}
.dp-sum{margin:0;display:flex;flex-direction:column;gap:2px}
.dp-sum b{font:400 20px/1.2 var(--f-display)}
.dp-sum span{font:700 15px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}
.dp-mode{margin:0 0 10px}
.dp-quick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dp-quick .btn{flex:1 1 120px;box-shadow:none;font-size:16px}
.dp-cal{padding:8px 6px 10px;border:3px solid var(--navy);border-radius:12px;background:var(--white)}
.dp-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.dp-nav .btn{box-shadow:none;padding:4px 10px}
.dp-month{font:400 20px/1.2 var(--f-display);margin:0;text-align:center}
.dp-dow,.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dp-dow span{padding:4px 0;font:700 13px/1 var(--f-label);letter-spacing:.12em;text-align:center;color:var(--ink-2)}
.dp-grid{row-gap:6px}
.dp-d{position:relative;min-width:0;min-height:48px;padding:0;margin:0;border:0;border-radius:8px;background:none;color:var(--navy);font:600 18px/1 var(--f-body);cursor:pointer;
  font-variant-numeric:tabular-nums}
.dp-d:hover{background:var(--cream)}
.dp-d.is-past:not(.is-start):not(.is-end):not(.in-range){color:#5D6573;background:none}
.dp-d.is-today{box-shadow:inset 0 0 0 2px var(--rust)}
.dp-d.in-range{border-radius:0;color:var(--cream);background:repeating-linear-gradient(90deg,#F7B733 0 7px,transparent 7px 12px) 0 86%/100% 2.5px no-repeat,var(--asphalt);
  box-shadow:inset 0 3px 0 var(--cream),inset 0 -3px 0 var(--cream)}
.dp-d.is-start,.dp-d.is-end{color:var(--red-d);font:400 20px/1 var(--f-display);border:2px solid var(--navy);
  background:repeating-linear-gradient(135deg,rgba(16,28,46,.09) 0 6px,transparent 6px 12px),var(--gold);box-shadow:none}
.dp-d.is-start{border-radius:10px 0 0 10px}
.dp-d.is-end{border-radius:0 10px 10px 0}
.dp-d.is-start.is-end{border-radius:10px}
.dp-d.is-end:not(.is-start)::after{content:"";position:absolute;right:3px;top:3px;width:11px;height:8px;
  background:conic-gradient(var(--navy) 25%,var(--white) 0 50%,var(--navy) 0 75%,var(--white) 0) 0 0/5.5px 4px;outline:1px solid var(--navy)}
.dp-hint{margin:8px 0 0}
/* release review (ux-news-events-3): Cancel / Use these dates stay in view at the bottom of the sheet (it scrolls on short
   phones), like the save bars of the other sheets; its height is the sheet's scroll-padding (fun.js padSheet) */
dialog.sheet.dp-sheet .dp-acts{position:sticky;bottom:0;z-index:2;margin:18px calc(var(--gut) * -1) calc(-20px - var(--safe-b));
  padding:10px var(--gut) calc(10px + var(--safe-b));background:var(--paper);border-top:2px solid rgba(16,28,46,.2)}
dialog.sheet.dp-sheet{scroll-padding-bottom:calc(var(--sh-bar,70px) + 12px)}
/* release review (ux-news-events-8): on narrow phones the calendar runs from edge to edge, so each day is about 49 px wide at
   360 px, with a small gap between neighbours (320 px: 43 px, a documented exception; "Type the dates instead" is there) */
.dp-grid{column-gap:2px}
@media (max-width:400px){
  dialog.sheet.dp-sheet .dp-cal{margin:0 calc(var(--gut) * -1);border-left:0;border-right:0;border-radius:0;padding:8px 2px 10px}
}
.dp-type{margin-top:4px}
.dp-typed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;margin-top:8px}
.dp-typed input{min-width:0;width:100%}

/* ---------------------------------------------------------------- the sticker sheet: peel one off, tap to stick (B14.5) */
dialog.sheet.stk-sheet .sheet-body>h2{margin-bottom:4px}
.stk-shelves{display:flex;gap:8px;overflow-x:auto;margin:0 calc(var(--gut) * -1) 12px;padding:4px var(--gut) 8px;scrollbar-width:thin}
.stk-shelves .btn{flex:none;box-shadow:none;font-size:16px;padding:4px 14px}
.stk-shelves .btn[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.stk-paper{position:relative;padding:18px 8px 26px;border:2px solid rgba(16,28,46,.3);border-radius:14px;
  background:radial-gradient(rgba(16,28,46,.07) 1px,transparent 1.4px) 0 0/14px 14px,#FFFDF6;box-shadow:4px 4px 0 rgba(16,28,46,.16)}
.stk-paper::after{content:"";position:absolute;right:-2px;bottom:-2px;width:46px;height:46px;border-radius:0 0 14px 0;
  background:linear-gradient(315deg,var(--paper) 0 47%,#E9DCBF 48% 60%,#FFFDF6 61%);box-shadow:-3px -3px 6px rgba(16,28,46,.12);pointer-events:none}
.stk-paper-label{position:absolute;left:14px;top:-12px;padding:2px 10px;border:2px solid var(--navy);border-radius:4px;background:var(--gold);
  font:700 12px/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase}
.stk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}
.stk-b{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:124px;padding:8px 2px 6px;margin:0;border:0;border-radius:12px;background:none;
  color:var(--navy);font:inherit;cursor:pointer}
.stk-b:hover{background:rgba(247,183,51,.18)}
.stk-c{position:relative;display:block;width:96px;height:96px}
.stk-c::before{content:"";position:absolute;inset:-5px;border:2px dashed rgba(16,28,46,.3);border-radius:50%}
.stk-c svg{position:relative;width:100%;height:100%;filter:drop-shadow(1px 1px 0 rgba(16,28,46,.3));transition:transform .18s,filter .18s}
.stk-b:hover .stk-c svg{transform:rotate(-7deg) translate(-1px,-3px);filter:drop-shadow(2px 4px 0 rgba(16,28,46,.4))}
.stk-b[aria-pressed="true"]{background:rgba(247,183,51,.32);box-shadow:inset 0 0 0 3px var(--navy)}
.stk-b[aria-pressed="true"] .stk-c svg{transform:rotate(-9deg) translate(-2px,-5px) scale(1.05);filter:drop-shadow(3px 6px 0 rgba(16,28,46,.45))}
.stk-tick{position:absolute;z-index:2;right:-6px;bottom:-4px;display:none;place-items:center;width:28px;height:28px;border:2px solid var(--navy);border-radius:50%;background:var(--pine);color:var(--white)}
.stk-tick .ic{width:17px;height:17px}
.stk-b[aria-pressed="true"] .stk-tick{display:grid}
.stk-name{font:700 13.5px/1.15 var(--f-label);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.stk-sug{display:block;font:600 17px/1 var(--f-hand);color:var(--rust);text-transform:none;letter-spacing:0}
.stk-b.is-peeling .stk-c svg{animation:peel .3s ease-in forwards}
@keyframes peel{0%{transform:none}35%{transform:rotate(-16deg) translate(-3px,-12px) scale(1.08)}100%{transform:rotate(-24deg) translate(0,-34px) scale(.5);opacity:0}}
.stk-b.stk-none .stk-c{display:grid;place-items:center;border-radius:50%;background:var(--white)}
.stk-b.stk-none .stk-c .ic{width:30px;height:30px;color:var(--ink-2)}

/* ---------------------------------------------------------------- the photo roll sheet */
.roll-list{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.roll-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 12px;align-items:center;padding:8px;border:2px solid var(--navy);border-radius:10px;background:var(--white)}
.roll-item[data-err="1"]{border-color:var(--red-d);box-shadow:3px 3px 0 var(--red-d)}
.roll-item img{display:block;width:96px;height:72px;object-fit:cover;border:2px solid var(--navy);border-radius:4px}
.roll-item .roll-t{margin:0;font-size:15px;line-height:1.3}
.roll-item .roll-t.ghost{color:var(--red-d);font-weight:600}
.roll-acts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px}
.roll-acts .btn{flex:1 1 90px;box-shadow:none;font-size:15px;padding:4px 8px}
.roll-pv{margin:4px 0 12px}
.roll-pick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.roll-pick button{position:relative;display:block;width:100%;min-height:48px;padding:0;margin:0;border:3px solid transparent;border-radius:8px;background:none;cursor:pointer}
.roll-pick img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:5px}
.roll-pick button[aria-pressed="true"]{border-color:var(--navy);box-shadow:3px 3px 0 var(--orange)}
.roll-pick .roll-tick{position:absolute;right:4px;top:4px;display:none;place-items:center;width:28px;height:28px;border:2px solid var(--navy);border-radius:50%;background:var(--pine);color:var(--white)}
.roll-pick button[aria-pressed="true"] .roll-tick{display:grid}
.roll-pick button[disabled]{opacity:.45;cursor:not-allowed}
@media (min-width:720px){.roll-pick{grid-template-columns:repeat(4,minmax(0,1fr))}dialog.sheet.roll-sheet,dialog.sheet.rp-sheet{width:min(720px,calc(100vw - 48px))}}

/* ---------------------------------------------------------------- the publish celebration (B14.9) */
.fx-canvas{position:fixed;inset:0;z-index:70;width:100vw;height:100vh;pointer-events:none}
.toast .fx-toast-ic{width:30px;height:30px;flex:none;color:var(--gold);margin-left:-4px}
.toast-party{flex-wrap:wrap;justify-content:flex-end;gap:4px 8px;padding:10px 6px 6px 14px;border-color:var(--gold);box-shadow:4px 4px 0 var(--gold)}
.toast-party p{flex:1 1 calc(100% - 44px);font-size:18px}
@media (min-width:720px){.toast-party{flex-wrap:nowrap;padding:6px 6px 6px 16px}.toast-party p{flex:1 1 auto}}
.toast-party p small{display:block;font-weight:400;font-size:15px;opacity:.9}

/* ---------------------------------------------------------------- New story: look, sticker & category, write (B14.12) */
dialog.sheet.ns-sheet{inset:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border:0;border-radius:0;box-shadow:none;overflow:auto}
.ns-sheet>.sheet-body{padding:0 var(--gut);min-height:100%;display:flex;flex-direction:column}
.ns-body{flex:1;padding:4px 0 20px}
/* the three steps as mile markers on a little road, with the motorcycle at the current one */
.ns-road{position:relative;height:104px;margin:4px 2px 12px}
.ns-road-line{position:absolute;left:12px;right:12px;top:47px;height:14px;border:2px solid var(--navy);border-radius:7px;
  background:repeating-linear-gradient(90deg,#F7B733 0 9px,transparent 9px 16px) 0 50%/100% 2px no-repeat,var(--asphalt)}
.ns-steps{position:absolute;left:0;right:0;top:40px;list-style:none;margin:0;padding:0;display:flex;justify-content:space-between}
.ns-steps li{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;font:700 14px/1.1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.ns-steps li:first-child{align-items:flex-start}.ns-steps li:last-child{align-items:flex-end}
.ns-steps b{display:grid;place-items:center;width:28px;height:28px;margin-top:2px;border:2px solid var(--navy);border-radius:50%;background:var(--cream);color:var(--navy);font:700 15px/1 var(--f-label)}
.ns-steps li[aria-current="step"]{color:var(--navy)}
.ns-steps li[aria-current="step"] b{background:var(--gold)}
.ns-steps li.done b{background:var(--pine);color:var(--white);border-color:var(--pine)}
.ns-moto{position:absolute;top:2px;left:0;width:58px;height:38px;transition:left .5s cubic-bezier(.5,0,.3,1)}
.ns-moto svg{width:100%;height:100%;overflow:visible}
/* the banner looks: big thumbnails of the story page's banner, showing your title */
.lk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lk{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px 6px 8px;border:2px solid var(--navy);border-radius:12px;background:var(--white);cursor:pointer}
.lk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.lk:has(input:checked){background:var(--gold);box-shadow:3px 3px 0 var(--navy)}
.lk:has(input:focus-visible){outline:3px solid var(--red-d);outline-offset:3px}
.lk-name{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:22px;font:700 14px/1.15 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.lk-name .ic{display:none;width:20px;height:20px;padding:2px;border-radius:50%;background:var(--pine);color:var(--white);flex:none}
.lk:has(input:checked) .lk-name .ic{display:block}
.lk-thumb{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;border:2px solid var(--navy);border-radius:7px;container-type:inline-size;background:var(--navy)}
.lk-art{position:absolute;inset:0;width:100%;height:100%}
.lk-over{position:absolute;left:6%;right:22%;top:9%;display:flex;flex-direction:column;align-items:flex-start;gap:3cqw}
.lk-sign{display:flex;align-items:center}
.lk-sign i{display:grid;place-items:center;width:7.5cqw;height:8.6cqw;font:400 4.4cqw/1 var(--f-display);font-style:normal;color:var(--navy);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 74'%3E%3Cpath d='M32 3C42 3 50 7 60 7L60 40C60 58 47 68 32 72C17 68 4 58 4 40L4 7C14 7 22 3 32 3Z' fill='%23F6ECD6' stroke='%23101C2E' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;padding-bottom:1cqw}
.lk-sign span{margin-left:-1cqw;padding:1cqw 2cqw 1cqw 2.4cqw;border:.5cqw solid var(--cream);border-radius:1cqw;background:var(--site-pine);color:var(--cream);
  font:700 2.9cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.lk-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font:400 7.4cqw/1.04 var(--f-display);color:var(--cream);text-shadow:.6cqw .6cqw 0 var(--red-d);
  overflow-wrap:anywhere}
.lk-meta{font:700 2.8cqw/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ns-sec{margin:0 0 18px}
.ns-sec>h3,.ns-h{display:flex;align-items:center;gap:10px;font:400 21px/1.2 var(--f-display);margin:0 0 10px}
.ns-two{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.ns-label-picks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.ns-label-picks .btn{box-shadow:none;font-size:16px;padding:4px 14px}
.ns-label-picks .btn[aria-pressed="true"]{background:var(--navy);color:var(--cream)}
.ns-card-pv{padding:14px 10px 18px;border:3px solid var(--navy);border-radius:12px;background:#F2E6CA}
.ns-card-pv .ev-pv-h{margin:0 0 6px}
.ns-card-wrap{position:relative;overflow:hidden;border:2px solid rgba(16,28,46,.3);border-radius:10px;background:var(--cream)}
.ns-card-frame{display:block;width:100%;border:0;background:transparent}
.ns-bar{position:sticky;bottom:0;z-index:3;display:flex;gap:10px;justify-content:space-between;margin:auto calc(var(--gut) * -1) 0;padding:10px var(--gut) calc(10px + var(--safe-b));
  background:var(--navy);border-top:3px solid var(--orange)}
.ns-bar .btn{flex:1 1 0;max-width:280px;border-color:var(--cream);box-shadow:none}
.ns-bar .btn-gold{margin-left:auto}
.ns-bar .btn[disabled]{opacity:.55}
@media (min-width:720px){
  dialog.sheet.ns-sheet{inset:0;margin:auto;width:min(1060px,calc(100vw - 48px));height:calc(100vh - 48px);border:3px solid var(--navy);border-radius:14px;box-shadow:6px 6px 0 var(--orange)}
  .lk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .ns-two{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
}

/* ---------------------------------------------------------------- the story editor: the chosen look, kept in view */
.ed-kind{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 15px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.ed-look{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0 0 16px;padding:12px;background:var(--paper);border:3px solid var(--navy);border-radius:12px;box-shadow:4px 4px 0 var(--orange)}
.ed-look .lk-thumb{width:200px;flex:none}
.ed-look-stk{position:relative;width:64px;height:64px;flex:none;transform:rotate(-8deg);filter:drop-shadow(2px 3px 0 rgba(16,28,46,.5))}
.ed-look-stk svg{width:100%;height:100%}
.ed-look-txt{flex:1 1 160px;min-width:0}
.ed-look-txt h2{font:400 20px/1.2 var(--f-display);margin:0 0 6px}
.ed-look-txt .row-chips{margin:0 0 8px}
.ed-look .btn{box-shadow:none}
.ed-lk-grid .lk{flex:none}
.ed-stk-more{margin:12px 0 0}
.ed-stk-more .btn{flex:none}
.ed-stk-more .hint{flex:1 1 160px;margin:0}
.ed-pv-more{margin-top:10px}

@media (min-width:720px){
  .ne-empty{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:8px 28px;text-align:left;padding:22px 24px}
  .ne-empty-art{grid-row:1 / span 2;margin:0}
  .ne-empty p,.ne-empty .hint{margin-left:0}
  .ne-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start}
  .ne-pair.ne-pair-one{grid-template-columns:minmax(0,1fr)}
  dialog.sheet.dp-sheet{width:min(520px,calc(100vw - 48px))}
  dialog.sheet.stk-sheet{width:min(820px,calc(100vw - 48px));max-height:calc(100vh - 48px)}
  .stk-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:1024px){
  .stk-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ne-empty{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:380px){.cat{font-size:15px;padding-right:12px}.stk-c{width:84px;height:84px}}

/* reduced motion: nothing moves (the celebration is never started either: fun.js checks first) */
@media (prefers-reduced-motion:reduce){
  .fx-canvas{display:none}
  .rp-rider{transition:none}
  .rp-rider .rp-bob,.stk-b.is-peeling .stk-c svg,.stk-slot.is-new svg.stk-art{animation:none}
  .ns-moto,.stk-c svg,.fx-more summary .ic{transition:none}
}