/* POSTS — News (public) and Contests & Events (agents). Site colours, light and dark. */
.px-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 18px; }
.px-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.px-fchip{ border:1px solid var(--line,#D9E1E8); background:var(--panel,#fff); color:var(--ink-soft,#55636F); border-radius:999px;
  padding:0 14px; height:36px; font:500 13.5px Inter,system-ui,sans-serif; cursor:pointer; transition:all .15s ease; }
.px-fchip span{ font-weight:600; color:var(--ink-faint,#8996A3); margin-left:2px; }
.px-fchip:hover{ border-color:var(--brass,#A97C2E); color:var(--ink,#16212B); }
.px-fchip.on{ background:var(--navy,#12283B); border-color:var(--navy,#12283B); color:#fff; }
.px-fchip.on span{ color:rgba(255,255,255,.7); }
html[data-theme="midnight"] .px-fchip.on{ background:var(--brass,#C79A45); border-color:var(--brass,#C79A45); color:#14100A; }
.px-new{ border:0; border-radius:999px; background:var(--brass,#A97C2E); color:#fff; font:600 14px Inter,system-ui,sans-serif; height:40px; padding:0 20px; cursor:pointer;
  box-shadow:0 8px 20px -12px rgba(169,124,46,.9); transition:transform .15s ease, filter .15s ease; }
html[data-theme="midnight"] .px-new{ color:#14100A; }
.px-new:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.px-list{ display:flex; flex-direction:column; gap:16px; max-width:820px; }
.px-empty{ color:var(--ink-faint,#8996A3); font-size:15px; padding:30px 0; }

.px-card{ position:relative; background:var(--panel,#fff); border:1px solid var(--line,#D9E1E8); border-radius:16px; padding:20px 22px;
  box-shadow:0 1px 2px rgba(16,40,60,.04), 0 12px 28px -22px rgba(16,40,60,.35); animation:pxIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pxIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.px-card.pinned{ border-color:color-mix(in srgb, var(--brass,#A97C2E) 45%, transparent); }
.px-card.pinned::before{ content:''; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:0 3px 3px 0; background:var(--brass,#A97C2E); }
.px-card.draft{ border-style:dashed; opacity:.92; }
.px-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 10px; font-size:12.5px; color:var(--ink-faint,#8996A3); }
.px-tag, .px-pin, .px-draft{ font-weight:700; font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.px-tag{ background:var(--panel-alt,#EEF2F6); color:var(--ink-soft,#55636F); }
.px-pin{ background:var(--brass-soft,#F0E5CC); color:var(--brass-ink,#85601F); }
.px-draft{ background:color-mix(in srgb, var(--alert,#A03A24) 12%, transparent); color:var(--alert,#A03A24); }
html[data-theme="midnight"] .px-pin{ background:color-mix(in srgb,var(--brass,#C79A45) 20%,transparent); color:var(--brass-hi,#C79A45); }
.px-head{ display:flex; gap:16px; align-items:flex-start; }
.px-date{ flex:none; width:58px; border-radius:12px; overflow:hidden; text-align:center; border:1px solid var(--line,#D9E1E8); background:var(--panel,#fff); }
.px-mon{ display:block; background:var(--navy,#12283B); color:#fff; font:700 11px Inter,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:4px 0; }
.px-day{ display:block; font:500 24px 'IBM Plex Serif',Georgia,serif; color:var(--ink,#16212B); padding:4px 0 6px; }
html[data-theme="midnight"] .px-mon{ background:var(--brass,#C79A45); color:#14100A; }
.px-ht{ min-width:0; flex:1; }
.px-title{ margin:0; font:500 21px/1.25 'IBM Plex Serif',Georgia,serif; color:var(--ink,#16212B); letter-spacing:-.01em; }
.px-when{ margin:6px 0 0; font-size:14px; color:var(--ink-soft,#55636F); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.px-state{ font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--panel-alt,#EEF2F6); color:var(--ink-soft,#55636F); }
.px-state.live{ background:color-mix(in srgb,var(--moss,#3F7A5F) 16%,transparent); color:var(--moss,#3F7A5F); }
.px-state.live::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px; animation:pxPulse 1.8s ease-out infinite; }
@keyframes pxPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--moss,#3F7A5F) 55%,transparent); } 80%,100%{ box-shadow:0 0 0 7px transparent; } }
.px-state.soon{ background:var(--brass-soft,#F0E5CC); color:var(--brass-ink,#85601F); }
html[data-theme="midnight"] .px-state.soon{ background:color-mix(in srgb,var(--brass,#C79A45) 20%,transparent); color:var(--brass-hi,#C79A45); }
.px-loc{ margin:4px 0 0; font-size:14px; color:var(--ink-soft,#55636F); }
.px-loc::before{ content:'\1F4CD\00a0'; }
.px-body{ margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--ink,#16212B); white-space:pre-wrap; overflow-wrap:anywhere; }
.px-body a{ color:var(--brass-ink,#85601F); text-decoration:underline; text-underline-offset:2px; }
html[data-theme="midnight"] .px-body a{ color:var(--brass-hi,#C79A45); }
.px-body.clamp{ max-height:9.6em; overflow:hidden; -webkit-mask-image:linear-gradient(#000 65%,transparent); mask-image:linear-gradient(#000 65%,transparent); }
.px-more{ border:0; background:none; color:var(--brass-ink,#85601F); font:600 13.5px Inter,system-ui,sans-serif; padding:4px 0; cursor:pointer; }
.px-imgs{ display:grid; gap:6px; margin:14px 0 0; border-radius:12px; overflow:hidden; }
.px-imgs.n1{ grid-template-columns:1fr; } .px-imgs.n2{ grid-template-columns:1fr 1fr; }
.px-imgs.n3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; } .px-imgs.n3 .px-img:first-child{ grid-row:span 2; }
.px-imgs.n4{ grid-template-columns:1fr 1fr; }
.px-img{ border:0; padding:0; margin:0; cursor:zoom-in; background:var(--panel-alt,#EEF2F6); aspect-ratio:16/10; overflow:hidden; }
.px-imgs.n1 .px-img{ aspect-ratio:auto; max-height:520px; }
.px-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.px-imgs.n1 .px-img img{ object-fit:contain; max-height:520px; background:#0D1F2E; }
.px-img:hover img{ transform:scale(1.03); }
.px-links{ display:flex; flex-direction:column; gap:8px; margin:14px 0 0; }
.px-link{ display:flex; justify-content:space-between; gap:12px; align-items:center; padding:11px 14px; border-radius:12px; text-decoration:none;
  border:1px solid var(--line,#D9E1E8); background:var(--panel-alt,#F3F6F9); transition:border-color .15s ease, transform .15s ease; }
.px-link:hover{ border-color:var(--brass,#A97C2E); transform:translateY(-1px); }
.px-lt{ font-weight:600; font-size:14px; color:var(--ink,#16212B); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.px-lh{ flex:none; font-size:12.5px; color:var(--ink-faint,#8996A3); }
.px-acts{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; }
.px-join{ display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:999px; background:var(--navy,#12283B); color:#fff !important;
  font:600 14px Inter,system-ui,sans-serif; text-decoration:none; transition:transform .15s ease, filter .15s ease; }
.px-join.live{ background:var(--moss,#3F7A5F); box-shadow:0 0 0 0 rgba(63,122,95,.5); animation:pxJoin 2s ease-out infinite; }
@keyframes pxJoin{ 0%{ box-shadow:0 0 0 0 rgba(63,122,95,.5); } 80%,100%{ box-shadow:0 0 0 10px rgba(63,122,95,0); } }
html[data-theme="midnight"] .px-join:not(.live){ background:var(--brass,#C79A45); color:#14100A !important; }
.px-join:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.px-chip{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line,#D9E1E8); background:var(--panel,#fff); color:var(--ink,#16212B); font:500 13.5px Inter,system-ui,sans-serif; transition:border-color .15s ease; }
.px-chip span{ color:var(--ink-faint,#8996A3); font-size:12px; }
.px-chip b{ font-family:'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.04em; }
.px-chip:hover{ border-color:var(--brass,#A97C2E); }
.px-disc{ margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line-soft,#E7EDF3); font-size:12px; line-height:1.5; color:var(--ink-faint,#8996A3); }
.px-tools{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line,#D9E1E8); }
.px-tool{ border:1px solid var(--line,#D9E1E8); background:none; border-radius:8px; height:32px; padding:0 12px; font:500 13px Inter,system-ui,sans-serif; color:var(--ink-soft,#55636F); cursor:pointer; }
.px-tool:hover{ border-color:var(--brass,#A97C2E); color:var(--ink,#16212B); }
.px-tool.strong{ background:var(--brass,#A97C2E); border-color:var(--brass,#A97C2E); color:#fff; }
.px-tool.danger:hover{ border-color:var(--alert,#A03A24); color:var(--alert,#A03A24); }

/* lightbox */
.px-lb{ position:fixed; inset:0; z-index:9998; background:rgba(8,14,20,.88); display:grid; place-items:center; padding:24px; cursor:zoom-out; animation:pxFade .2s ease both; }
.px-lb.out{ animation:pxFadeOut .2s ease forwards; }
.px-lb img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); }
@keyframes pxFade{ from{ opacity:0; } to{ opacity:1; } } @keyframes pxFadeOut{ to{ opacity:0; } }

/* the posting form */
.px-back{ position:fixed; inset:0; z-index:9997; background:rgba(8,18,28,.55); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  display:flex; align-items:flex-start; justify-content:center; padding:5vh 16px; overflow-y:auto; animation:pxFade .2s ease both; }
.px-back.out{ animation:pxFadeOut .2s ease forwards; }
.px-modal{ width:100%; max-width:680px; background:var(--panel,#fff); border-radius:18px; border:1px solid var(--line,#D9E1E8);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.55); animation:pxIn .3s cubic-bezier(.2,.8,.2,1) both; }
.px-mh{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line,#D9E1E8); }
.px-mh h3{ margin:0; font:500 20px 'IBM Plex Serif',Georgia,serif; color:var(--ink,#16212B); }
.px-x{ width:36px; height:36px; border-radius:50%; border:0; background:none; cursor:pointer; position:relative; transition:background .15s ease, transform .2s ease; }
.px-x::before,.px-x::after{ content:''; position:absolute; left:50%; top:50%; width:14px; height:1.8px; border-radius:2px; background:var(--ink-soft,#55636F); transform:translate(-50%,-50%) rotate(45deg); }
.px-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.px-x:hover{ background:var(--panel-alt,#EEF2F6); transform:rotate(90deg); }
.px-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; padding:20px 22px; }
.px-f{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.px-f.wide{ grid-column:1 / -1; }
.px-fl{ font-size:13px; font-weight:600; color:var(--ink-soft,#55636F); }
.px-fh{ font-size:12.5px; color:var(--ink-faint,#8996A3); line-height:1.45; }
.px-form input:not([type=checkbox]):not([type=file]), .px-form select, .px-form textarea{
  font:inherit; font-size:15px; color:var(--ink,#16212B); background:var(--panel,#fff); border:1px solid var(--line,#D9E1E8);
  border-radius:10px; padding:10px 12px; min-height:42px; width:100%; box-sizing:border-box; }
.px-form textarea{ resize:vertical; line-height:1.5; }
.px-form input:focus, .px-form select:focus, .px-form textarea:focus{ outline:none; border-color:var(--brass,#A97C2E); box-shadow:0 0 0 3px color-mix(in srgb,var(--brass,#A97C2E) 22%,transparent); }
.px-file{ display:none; }
.px-add{ align-self:flex-start; border:1px dashed var(--line,#D9E1E8); background:none; border-radius:10px; height:38px; padding:0 14px;
  font:600 13.5px Inter,system-ui,sans-serif; color:var(--brass-ink,#85601F); cursor:pointer; }
.px-add:hover{ border-color:var(--brass,#A97C2E); }
.px-strip{ display:flex; flex-wrap:wrap; gap:8px; }
.px-thumb{ position:relative; width:92px; height:72px; border-radius:10px; overflow:hidden; background:var(--panel-alt,#EEF2F6); display:grid; place-items:center; font-size:11px; color:var(--ink-faint,#8996A3); }
.px-thumb img{ width:100%; height:100%; object-fit:cover; }
.px-thumb.loading{ animation:pxPulseBg 1.2s ease-in-out infinite; }
@keyframes pxPulseBg{ 50%{ opacity:.55; } }
.px-rm{ position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(8,14,20,.7); cursor:pointer; }
.px-rm::before,.px-rm::after{ content:''; position:absolute; left:50%; top:50%; width:10px; height:1.6px; background:#fff; transform:translate(-50%,-50%) rotate(45deg); }
.px-rm::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.px-lrows{ display:flex; flex-direction:column; gap:8px; }
.px-lrow{ display:grid; grid-template-columns:1.4fr 1fr 32px; gap:8px; align-items:center; }
.px-lrow .px-rm{ position:static; background:var(--panel-alt,#EEF2F6); }
.px-lrow .px-rm::before,.px-lrow .px-rm::after{ background:var(--ink-soft,#55636F); }
.px-check{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink,#16212B); }
.px-check input{ width:18px; height:18px; accent-color:var(--brass,#A97C2E); }
.px-mf{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 22px 20px; border-top:1px solid var(--line,#D9E1E8); flex-wrap:wrap; }
.px-msg{ margin:0 auto 0 0; font-size:13.5px; color:var(--ink-soft,#55636F); }
.px-msg.err{ color:var(--alert,#A03A24); }
.px-btn{ border:0; border-radius:999px; height:42px; padding:0 22px; font:600 14px Inter,system-ui,sans-serif; cursor:pointer; background:var(--brass,#A97C2E); color:#fff; }
html[data-theme="midnight"] .px-btn:not(.ghost){ color:#14100A; }
.px-btn.ghost{ background:none; border:1px solid var(--line,#D9E1E8); color:var(--ink,#16212B); }
.px-btn:disabled{ opacity:.6; cursor:default; }
.px-toast{ position:fixed; left:50%; bottom:26px; z-index:9999; transform:translate(-50%,16px); opacity:0; pointer-events:none; padding:10px 18px; border-radius:999px;
  background:#12283B; color:#fff; font:500 13.5px Inter,system-ui,sans-serif; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); transition:opacity .22s ease, transform .22s ease; }
.px-toast.on{ opacity:1; transform:translate(-50%,0); }
@media (max-width:640px){
  .px-card{ padding:16px; } .px-title{ font-size:19px; } .px-form{ grid-template-columns:1fr; } .px-lrow{ grid-template-columns:1fr 32px; } .px-lrow input:nth-child(2){ grid-column:1; }
  .px-join,.px-chip{ height:42px; }
}
@media (prefers-reduced-motion:reduce){ .px-card,.px-modal,.px-back,.px-lb,.px-state.live::before,.px-join.live,.px-thumb.loading{ animation:none !important; } }

/* the agent pages style every h3 inside #page; post titles must still look like post titles */
#page .px-card .px-title, .px-card h3.px-title{ font:500 21px/1.25 'IBM Plex Serif',Georgia,serif !important; letter-spacing:-.01em !important;
  color:var(--ink,#16212B) !important; margin:0 !important; text-transform:none !important; }
@media (max-width:640px){ #page .px-card .px-title, .px-card h3.px-title{ font-size:19px !important; } }
.px-imgs.n1 .px-img, .px-imgs.n1 .px-img img{ max-height:420px; }
.px-signin{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:999px; font:600 13.5px Inter,system-ui,sans-serif;
  color:var(--brass-ink,#85601F); background:var(--brass-soft,#F0E5CC); text-decoration:none; }
.px-signin:hover{ filter:brightness(.97); }
.px-diag{ max-width:560px; padding:12px 14px; border-radius:12px; background:var(--brass-soft,#F0E5CC); color:var(--brass-ink,#85601F); }
.px-diag-h{ margin:0 0 6px; font:600 13.5px/1.45 Inter,system-ui,sans-serif; }
.px-diag-d{ margin:0 0 8px; font:500 12px/1.5 'IBM Plex Mono',ui-monospace,monospace; opacity:.85; word-break:break-word; }
.px-diag .px-signin{ background:var(--panel,#fff); }

/* ---- WHEN: days, times and length as taps ---- */
.pxw{ display:flex; flex-direction:column; gap:10px; }
.pxw-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pxw-chip{ position:relative; height:40px; padding:0 14px; border-radius:10px; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line,#D9E1E8); background:var(--panel,#fff); color:var(--ink,#16212B);
  font:500 13.5px Inter,system-ui,sans-serif; transition:border-color .15s ease, background .15s ease, transform .12s ease; }
.pxw-chip:hover{ border-color:var(--brass,#A97C2E); }
.pxw-chip:active{ transform:scale(.97); }
.pxw-chip.on{ background:var(--navy,#12283B); border-color:var(--navy,#12283B); color:#fff; }
html[data-theme="midnight"] .pxw-chip.on{ background:var(--brass,#C79A45); border-color:var(--brass,#C79A45); color:#14100A; }
.pxw-chip.pxw-clear{ margin-left:auto; border-style:dashed; color:var(--ink-faint,#8996A3); }
.pxw-date{ position:absolute; inset:0; opacity:0; width:100%; height:100%; border:0; padding:0; cursor:pointer; }
.pxw-date-lone{ height:44px; border-radius:10px; border:1px solid var(--line,#D9E1E8); background:var(--panel,#fff); padding:0 12px; font:500 15px Inter,system-ui,sans-serif; color:var(--ink,#16212B); }
.pxw-fine{ display:none; align-items:center; gap:8px; }
.pxw.pxw-open .pxw-fine{ display:flex; }
.pxw-sel{ height:44px; min-width:74px; border-radius:10px; border:1px solid var(--line,#D9E1E8); background:var(--panel,#fff);
  font:600 16px 'IBM Plex Mono',ui-monospace,monospace; color:var(--ink,#16212B); padding:0 10px; }
.pxw-colon{ font:600 16px 'IBM Plex Mono',ui-monospace,monospace; color:var(--ink-faint,#8996A3); }
.pxw-ap{ height:44px; padding:0 16px; border-radius:10px; cursor:pointer; border:1px solid var(--line,#D9E1E8);
  background:var(--panel-alt,#EEF2F6); color:var(--ink,#16212B); font:600 14px 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.06em; }
.pxw-ap:hover{ border-color:var(--brass,#A97C2E); }
.pxw-sum{ margin:0; font:500 13.5px Inter,system-ui,sans-serif; color:var(--ink-faint,#8996A3); }
.pxw.pxw-has .pxw-sum{ color:var(--brass-ink,#85601F); font-weight:600; }
html[data-theme="midnight"] .pxw.pxw-has .pxw-sum{ color:var(--brass-hi,#C79A45); }
.px-f[hidden]{ display:none !important; }
@media (max-width:640px){ .pxw-chip{ height:44px; } .pxw-chips{ gap:6px; } }

/* posts waiting for review, shown instead of an empty page */
.px-waiting{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.px-waiting p{ margin:0; }

/* Telegram feed not arriving: shown to posters under an empty board */
.px-tg-off{ color:#9B3B2E; opacity:1; }