/* Fare News Feed – follows the Fare brand brief: Arial, Fare black and red, greys. */
:root{--black:#18161B;--red:#E10023;--dg:#4A4850;--mg:#9C9AA1;--lg:#D6D4D9;--pg:#F1F0F2;--w:#FFFFFF}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Arial,"Liberation Sans",Helvetica,sans-serif;color:var(--black);background:var(--w);font-size:15px;line-height:1.45;
  padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--black)}
h1{font-size:28px;line-height:1.2}
.h2{font-size:18px;margin:28px 0 10px}
.sub{color:var(--dg);font-size:14px;margin-top:6px}
.hint{font-size:12px;color:var(--dg);margin-top:10px}
/* header */
.hd{display:flex;align-items:center;min-height:64px;padding:env(safe-area-inset-top,0px) 32px 0;border-bottom:1px solid var(--lg);gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:30px}
.app{margin-left:14px;padding-left:14px;border-left:1px solid var(--lg);font-size:15px;color:var(--dg)}
.nav{display:flex;gap:26px;margin-left:30px;align-self:stretch}
.nav a{display:flex;align-items:center;font-size:15px;color:var(--dg);text-decoration:none;border-bottom:3px solid transparent;padding-top:3px}
.nav a.on{color:var(--black);font-weight:bold;border-bottom-color:var(--red)}
.who{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px}
.av{width:32px;height:32px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px;text-decoration:none}
/* layout */
main.page{padding:26px 32px 40px;max-width:1280px}
main.centre{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--pg);padding:24px}
.titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.tt{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tag{display:inline-block;background:var(--red);color:#fff;font-weight:bold;font-size:14px;padding:5px 14px;transform:skewX(-12deg)}
.tag span{display:inline-block;transform:skewX(12deg)}
.two{display:flex;gap:28px;align-items:flex-start}
.addpanel{width:340px;flex:none}
.listcol{flex:1;min-width:0}
.narrow{max-width:640px}
.grid2{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.panel{background:var(--pg);padding:20px}
.empty{border:1px dashed var(--lg);padding:28px;color:var(--dg);text-align:center}
/* forms */
label{display:block;font-size:13px;font-weight:bold;margin:14px 0 6px}
label:first-of-type{margin-top:0}
input,textarea,select{width:100%;font:inherit;font-size:15px;color:var(--black);background:#fff;border:1px solid var(--lg);padding:10px;border-radius:0}
textarea{resize:vertical}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--black);outline-offset:1px}
details{margin-top:14px;font-size:13px}
summary{cursor:pointer;color:var(--dg);text-decoration:underline}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.check{display:inline-flex;align-items:center;gap:8px;font-weight:normal;font-size:14px;margin:0}
.check input{width:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--black);color:#fff;font:inherit;font-weight:bold;font-size:15px;padding:12px 20px;border:2px solid var(--black);cursor:pointer;text-decoration:none;margin-top:16px}
.titlerow .btn{margin-top:0}
.btn.big{padding:14px 24px}
.btn.wide{width:100%}
.btn.out{background:#fff;color:var(--black)}
.linkbtn{background:none;border:none;font:inherit;font-size:13px;color:var(--dg);text-decoration:underline;cursor:pointer;padding:0}
.actions{display:flex;justify-content:flex-end;align-items:center;gap:18px}
/* messages */
.flashes{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.msg{border-left:4px solid var(--black);background:var(--pg);padding:10px 14px;font-size:14px}
.msg.error{border-left-color:var(--red)}
.msg.dup{background:#fff;border:1px solid var(--red);border-left:4px solid var(--red)}
tr.hl td{background:#FCE6A4}
.msg.tip{margin-top:28px;font-size:13px}
.callout{background:var(--pg);padding:18px 20px;margin-top:16px;font-size:15px;line-height:1.9}
.pw{font-size:20px;letter-spacing:1px;color:var(--red)}
/* link tables */
table{border-collapse:collapse;width:100%}
th{background:var(--black);color:#fff;text-align:left;font-size:12px;font-weight:bold;padding:9px 12px}
td{border-bottom:1px solid var(--lg);padding:11px 12px;font-size:13px;vertical-align:top}
.dom{font-size:12px;color:var(--dg)}
.ttl{font-weight:bold;display:block;margin-top:2px;text-decoration:none;word-break:break-word}
.ttl:hover{text-decoration:underline}
.note{font-size:12px;color:var(--dg);margin-top:4px;font-style:italic}
.c-who{width:120px;white-space:nowrap}
.c-st{width:130px}
.c-act{width:190px}
.c-act form{display:block}
.act{display:block;font-size:12px;color:var(--dg);margin-bottom:4px}
.st{font-size:12px;white-space:nowrap}
.st i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--black)}
.st.wait{color:var(--dg)} .st.wait i{background:var(--mg)}
tr.off td{color:var(--mg)}
.sessions a{display:inline-block;margin:0 14px 8px 0;font-size:13px}
ul.plain{margin:12px 0 0 18px;font-size:14px}
/* login */
.loginbox{background:#fff;border:1px solid var(--lg);width:100%;max-width:420px;padding:36px}
.loginlogo{height:44px;margin-bottom:24px}
.loginbox h1{font-size:24px}
.loginbox form{margin-top:22px}
/* phones */
@media (max-width:760px){
  .hd{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 0;gap:8px}
  .app{display:none}
  .nav{order:3;width:100%;margin:0;gap:20px;min-height:42px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;white-space:nowrap}
  main.page{padding:18px 16px 32px}
  h1{font-size:24px}
  .two{flex-direction:column}
  .addpanel{width:100%}
  .grid2{grid-template-columns:1fr}
  table.links thead{display:none}
  table.links tr{display:block;border-bottom:1px solid var(--lg);padding:10px 0}
  table.links td{display:block;border:none;padding:3px 0;width:auto}
  table.links td.c-act{display:flex;flex-wrap:wrap;gap:4px 16px;padding-top:6px}
  table.links td.c-act .act{margin:0}
  .loginbox{padding:26px 20px;border:none}
  table.links table.tagtab td{display:table-cell;padding:2px 14px 2px 0}
  main.centre{background:#fff;align-items:flex-start;padding-top:calc(48px + env(safe-area-inset-top,0px))}
}
/* stage 2.1: summaries */
.st.bad{color:var(--red)} .st.bad i{background:var(--red)}
.why{font-size:12px;color:var(--dg);margin-top:3px}
.act.fix{display:block;margin-top:5px;color:var(--black)}
details.sum{margin-top:8px}
details.sum>summary{font-size:12px}
.post{border:1px solid var(--lg);background:#fff;padding:12px 14px;margin-top:8px;max-width:560px}
.post .pc{font-weight:bold;font-size:13px}
.post p{font-size:13px;margin:6px 0}
.count{font-size:12px;color:var(--dg);margin-top:6px}
.count.bad,.warn{color:var(--red)}
.warn{font-size:12px;margin-top:4px}
table.tagtab{width:auto;margin-top:8px}
table.tagtab td{border:none;padding:2px 14px 2px 0;font-size:12px}
table.tagtab td:first-child{color:var(--dg)}
details.gen{margin-top:8px}
details.gen p{font-size:13px;margin-top:6px;max-width:560px}
table.info{width:auto}
table.info td{padding:7px 18px 7px 0;font-size:14px}
table.info td:first-child{color:var(--dg)}
/* stage 2.2: flags, the editing board and the editing panel */
img.flag{width:18px;height:18px;vertical-align:-3px;display:inline-block}
.nocountry{color:var(--mg);font-weight:normal}
.msg.dup .which{font-size:12px;color:var(--dg);margin-bottom:3px;word-break:break-word}
.sendbox{text-align:right}
.sendbox .hint{margin-top:6px}
.btn:disabled{background:var(--lg);border-color:var(--lg);color:var(--dg);cursor:not-allowed}
.boardbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--pg);padding:12px 14px;margin-bottom:16px}
.counts{display:flex;gap:8px;flex-wrap:wrap}
.cnt{font-size:13px;background:#fff;border:1px solid var(--lg);padding:4px 10px}
.cnt.red{color:var(--red);border-color:var(--red)}
.board{display:flex;flex-direction:column;gap:12px}
.story{display:flex;gap:14px;border:1px solid var(--lg);border-left:4px solid var(--lg);padding:14px;scroll-margin-top:16px}
.story.alert{border-left-color:var(--red)}
.story:target{outline:2px solid var(--black)}
.snum{font-weight:bold;width:22px;flex:none;padding-top:12px}
.smain{flex:1;min-width:0}
.smain .post{margin-top:0;max-width:none}
.post .pc{font-weight:bold;font-size:13px}
a.dom{text-decoration:none;display:block;word-break:break-all}
a.dom:hover{text-decoration:underline}
.nosum{color:var(--mg)}
.meta{font-size:12px;color:var(--dg);margin-top:6px}
.sside{width:280px;flex:none;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--pg);border:1px solid var(--lg);font-size:12px;padding:2px 7px}
.sside .warn,.sside .quiet{margin:0 0 6px}
.quiet{font-size:12px;color:var(--dg);margin-top:4px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.check.ready{font-weight:bold;font-size:14px}
.check.ready.off{color:var(--mg)}
.check input:disabled{cursor:not-allowed}
.editlink{font-size:13px;margin:0}
.pull{font-size:13px}
/* the editing panel (a drawer on the right; full screen on phones) */
.shade{position:fixed;inset:0;background:rgba(24,22,27,.35);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(600px,100%);background:#fff;z-index:21;overflow-y:auto;
  padding:calc(22px + env(safe-area-inset-top,0px)) 26px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:-6px 0 24px rgba(0,0,0,.15)}
.dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dhead h2{font-size:22px}
.drawer label{margin-top:16px}
.drawer .post{max-width:none}
.lite{font-weight:normal;color:var(--dg)}
.lite.red{color:var(--red)}
.btnrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btnrow .btn{margin-top:10px;padding:9px 14px;font-size:14px}
.btnrow details.gen{margin:10px 0 0 auto}
.btnrow details.gen[open]{flex-basis:100%;margin-left:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.fields .wide{grid-column:1 / -1}
details.multi{margin:0;font-size:14px}
details.multi>summary{list-style:none;text-decoration:none;color:var(--black);border:1px solid var(--lg);padding:7px 30px 7px 8px;min-height:42px;position:relative}
details.multi>summary::-webkit-details-marker{display:none}
details.multi>summary::after{content:"\25BE";position:absolute;right:10px;top:10px;color:var(--dg)}
.mchips{display:flex;flex-wrap:wrap;gap:4px}
.mchips .ph{color:var(--dg);padding:3px 2px}
.chip .x{background:none;border:none;font:inherit;font-size:14px;line-height:1;cursor:pointer;color:var(--dg);padding:0 2px}
.mlist{border:1px solid var(--lg);border-top:none;padding:8px 10px;display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}
.mlist .check{margin:0}
.flagrow{display:flex;gap:28px;margin-top:18px}
.flagrow .check{margin:0}
.further{margin-top:8px;padding-left:4px}
.dfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding-top:16px;border-top:1px solid var(--lg)}
.dfoot .btn{margin-top:0}
.dfoot .check.ready{margin:0}
.dlinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px}
.enterkey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){
  .story{flex-direction:column;gap:8px}
  .snum{padding-top:0}
  .sside{width:auto}
  .sendbox{text-align:left}
  .drawer{padding-left:16px;padding-right:16px}
  .fields{grid-template-columns:1fr}
}
/* stage 2.3: grouping, threads and dragging */
.topbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.topbtns .btn{margin-top:0}
.topbtns form{margin:0}
.btn.out:disabled{background:#fff;color:var(--dg);border-color:var(--lg)}
.snum{display:flex;align-items:flex-start;gap:6px;width:auto;min-width:22px}
.drag{cursor:grab;color:var(--mg);letter-spacing:-2px;user-select:none;-webkit-user-select:none;touch-action:none;padding:0 4px}
.drag:hover{color:var(--black)}
.sortable-ghost{opacity:.4}
.sortable-chosen{background:var(--pg)}
.board.saving{opacity:.7}
.divider{background:var(--pg);border-left:4px solid var(--mg);padding:10px 14px;font-size:13px;color:var(--dg)}
.divider b{color:var(--black);margin-right:6px}
.story.loose{border-style:dashed}
.thead{font-weight:bold;font-size:13px;margin-bottom:6px}
.tposts{border-left:3px solid var(--black);padding-left:12px;display:flex;flex-direction:column;gap:12px}
.tpost{scroll-margin-top:16px}
.tpost:target{outline:2px solid var(--black);outline-offset:4px}
.tlabel{font-size:12px;font-weight:bold;color:var(--dg)}
.tlabel .editlink{font-weight:normal;color:var(--black)}
.tposts .post{margin-top:4px;max-width:none}
.tinfo .warn,.tinfo .quiet{margin:4px 0 0}
details.also{margin-top:6px;font-size:12px}
details.also>summary{color:var(--dg)}
details.also ul{margin:6px 0 0 18px}
details.also li{margin-top:3px}
.struct{margin-top:24px;padding-top:16px;border-top:1px solid var(--lg)}
.struct h3{font-size:14px;margin:16px 0 6px}
.struct h3:first-child{margin-top:0}
.struct .hint{margin-top:4px}
ul.lab{list-style:none;margin-top:8px;font-size:13px}
ul.lab li{display:flex;gap:8px;margin-top:8px}
ul.lab .dot{flex:none;width:12px}
ul.lab .dot.on{color:var(--black)}
.lacts{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:6px}
.btn.small{margin-top:0;padding:7px 12px;font-size:13px}
details.xsum{margin-top:4px;font-size:12px}
details.xsum p{margin-top:4px}
.struct select{margin-bottom:8px}
@media (max-width:760px){
  .topbtns{justify-content:flex-start}
  .tposts{padding-left:10px}
}
/* Update 2.3.1: tick all / untick all */
.tickall{display:inline-flex;align-items:center;gap:14px;margin-left:6px}
.tickall form{margin:0}
/* stage 3.1: approval */
.badge{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:bold;line-height:1;padding:3px 6px;margin-left:6px;border-radius:9px}
a.cnt{color:var(--red);border-color:var(--red);text-decoration:none}
.story.sent{background:#FAFAFB}
.apst{display:flex;flex-direction:column;font-size:13px}
.apst span{font-size:12px;color:var(--dg)}
.apst.approved b{color:var(--black)}
.apst.delayed b{color:var(--red)}
.takeback{margin-top:6px}
p.delayed{font-size:12px;font-weight:bold;color:var(--red);margin-bottom:6px}
/* Update 4.1.1: stories brought in from an earlier board, never sent there */
p.carried{font-size:12px;font-weight:bold;color:var(--dg);margin-bottom:6px}
.msg.unsent{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:16px}
.msg.unsent p{flex:1 1 360px}
.msg.unsent form{flex:none}
details.rejected{margin-top:22px;font-size:14px}
details.rejected>summary{font-size:14px}
.rej{border:1px solid var(--lg);border-left:4px solid var(--red);padding:12px 14px;margin-top:10px}
.rej .warn{font-size:13px;margin:0 0 6px}
/* the approval screens, phone first (IMG_PL_07) */
.appr{max-width:520px;margin:0 auto}
.ahead{display:flex;justify-content:space-between;align-items:baseline;font-size:15px}
.ahead a{font-size:14px}
.abar{height:4px;background:var(--pg);margin:8px 0 14px}
.abar i{display:block;height:4px;background:var(--black)}
.appr .post{max-width:none;margin-top:0}
.appr .chips{margin:8px 0 0}
.appr .tposts .post{margin-top:4px}
.astory,.tpost{margin-bottom:6px}
.aflags{display:flex;gap:28px;margin-top:10px}
.aflags .check{margin:0}
.appr .further{margin:8px 0 4px}
.abtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.abtns .btn{margin-top:0;padding:13px 10px}
.abtns .btn.wide{grid-column:1 / -1}
.btn.reject{color:var(--red);border-color:var(--red)}
.rejectbox{margin-top:12px;padding:12px;background:var(--pg)}
.rejectbox label{margin-top:0}
.btn.rejectgo{background:var(--red);border-color:var(--red);margin-top:10px}
.acomment{margin-top:14px}
.anav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px}
.anav .linkbtn{font-size:15px;color:var(--black);padding:6px 0}
.anav .hint{margin:0;text-align:center}
.adone{font-size:26px;margin-top:22px}
table.atotals{margin:18px 0 6px}
table.atotals td{font-size:14px;padding:10px 4px}
table.atotals td:last-child{text-align:right;font-weight:bold}
.arev{border-bottom:1px solid var(--lg);padding:12px 0}
.arevh{font-size:13px;margin-bottom:6px}
.arev .post{margin-top:6px}
/* Update 3.1.1: filters and putting rejected stories back */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 14px}
.flab{font-size:13px;color:var(--dg);margin-right:2px}
.fbtn{font:inherit;font-size:13px;background:#fff;color:var(--black);border:1px solid var(--lg);padding:5px 11px;cursor:pointer;text-decoration:none}
.fbtn.on{background:var(--black);color:#fff;border-color:var(--black);font-weight:bold}
.fbtn.red{color:var(--red);border-color:var(--red)}
#filterhint{margin:-8px 0 12px}
.board .item[hidden],.board .divider[hidden]{display:none}
.board.filtered .drag{visibility:hidden}
.rej form{margin-top:8px}
/* Update 3.2: questions, approvers' edits and changes after sending */
.story.question{border-color:var(--red);border-left-color:var(--red)}
.apst.question b{color:var(--red)}
.qbox{margin-top:10px;font-size:13px}
.qtag{display:inline-block;background:var(--black);color:#fff;font-size:12px;font-weight:bold;padding:3px 8px}
.qbox p{margin:6px 0 4px}
.qbox label{margin-top:8px;font-size:13px}
.qbox textarea{font-size:14px}
.qbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.qbtns .btn{margin-top:0}
.qa{font-size:12px;margin:0 0 8px;border-left:3px solid var(--mg);padding-left:10px}
.qa div{margin-top:3px}
.qa .q b{color:var(--red)}
.appr .qa{font-size:13px;margin:0 0 12px}
.chg{font-size:12px;background:var(--pg);border-left:3px solid var(--black);padding:6px 10px;margin-top:6px;max-width:560px}
.chg.red{border-left-color:var(--red)}
.chg.red>b{color:var(--red)}
.chg div{margin-top:3px}
.chg .old span{color:var(--dg)}
ins{text-decoration:none;background:#FFE3E9;color:var(--black)}
del{color:var(--red);text-decoration:line-through}
.kept{font-size:13px;background:var(--pg);border-left:3px solid var(--red);padding:8px 10px;margin-top:8px}
.kept p{margin-top:4px}
.msg.sentnote{margin:0 0 12px}
.sentacts{display:flex;flex-direction:column;gap:2px}
.qother{margin-bottom:12px}
.btn.asave{margin-top:10px}
.appr .tlabel .linkbtn{font-size:12px;color:var(--black)}
.qbox.rejectbox{margin-top:12px}
/* Update 3.2.1: approval history */
p.putback{font-size:12px;font-weight:bold;color:var(--red);margin-bottom:6px}
details.hist{margin-top:6px;font-size:12px}
details.hist>summary{color:var(--dg)}
details.hist ul{margin:6px 0 0 18px}
details.hist li{margin-top:3px}
.appr details.hist{margin:0 0 12px;font-size:13px}
.appr p.putback{font-size:13px}

/* Posting (Update 4.1, IMG_PL_08) */
.chg.fix{border-left-color:var(--mg)}
.ptop{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end}
.ptop .btn{margin-top:0}
.ptop form{margin:0}
.pexport{display:flex;gap:8px;align-items:stretch}
.pexport select{width:auto;max-width:230px;font-size:13px;padding:8px}
.ptopnote{margin:-10px 0 14px;text-align:right}
.dlform.inline{display:inline}
.dlform.inline .linkbtn{font-size:12px}
.ptable{border-top:0}
.phead,.prow{display:grid;grid-template-columns:42px minmax(0,1fr) 130px 150px 170px;gap:16px;align-items:start}
.phead{background:var(--black);color:#fff;font-size:12px;font-weight:bold;padding:9px 12px}
.prow{border-bottom:1px solid var(--lg);padding:14px 12px;scroll-margin-top:16px}
.prow:target{outline:2px solid var(--black);outline-offset:-2px}
.prow.done .ppost,.prow.done .pimg,.prow.done .pcopy{opacity:.55}
.prow.fixing{background:var(--pg)}
.plabel{font-weight:bold;padding-top:10px}
.ppost .post{margin-top:0;max-width:none}
.pimg{font-size:12px}
.imgbox{width:110px;height:68px;background:var(--pg);border:1px solid var(--lg);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--mg);font-size:11px;margin-bottom:6px}
.imgbox img{width:100%;height:100%;object-fit:cover;display:block}
.imgbox[hidden]{display:none}
.copyimg{font-size:12px;color:var(--black)}
.imgnone{margin:0}
.pcopy .btn{margin:0 0 6px}
.pcopy .quiet,.pcopy .warn{margin:0 0 2px;font-size:12px}
.pcopy .act{margin-top:6px;color:var(--black)}
.pdone .quiet{margin:4px 0 0;font-size:12px}
.pday{font-weight:bold;font-size:13px;padding:14px 12px 6px;color:var(--red);border-bottom:1px solid var(--lg)}
.pthread{font-weight:bold;font-size:13px;padding:12px 12px 0 70px}
#fixform textarea{margin-top:4px}
#fixform .post{margin-top:8px}
.fixbtns{display:flex;gap:8px;margin-top:10px}
@media (max-width:900px){
  .phead{display:none}
  .prow{grid-template-columns:34px minmax(0,1fr);gap:8px 12px}
  .pimg,.pcopy,.pdone{grid-column:2}
  .pcopy{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
  .pcopy .btn{margin:0}
  .pthread{padding-left:58px}
  .ptopnote{text-align:left;margin-top:0}
  .ptop{justify-content:stretch;width:100%}
  .ptop form,.ptop .btn{width:100%}
  .pexport select{max-width:none;flex:1}
  .pexport .btn{width:auto;flex:2}
}
/* Update 5.1: the archive screen (IMG_PL_09) and an archive story */
.aexport{max-width:340px;text-align:right}
.aexport .btn{margin-top:0}
.aexport .hint{margin-top:6px}
.asearch{display:flex;gap:10px;margin-bottom:22px}
.asearch input{flex:1;padding:12px}
.asearch .btn{margin-top:0}
.arch{display:flex;gap:28px;align-items:flex-start}
.afilters{width:260px;flex:none}
.afilters label{margin-top:14px}
.afilters label:first-child{margin-top:0}
.afilters .ashow{display:flex;flex-direction:column;gap:8px}
.aresults{flex:1;min-width:0}
.acount{margin:0 0 12px}
.atable{width:100%;border-collapse:collapse;font-size:14px}
.atable th{background:var(--black);color:#fff;text-align:left;font-size:13px;padding:9px 12px}
.atable td{border-bottom:1px solid var(--lg);padding:12px;vertical-align:top}
.atable .adate{white-space:nowrap;width:100px}
.atable .acountry{width:150px}
.atable .acountry .flag{vertical-align:-3px}
.atable .astatus{width:190px;font-size:12px;color:var(--dg)}
.atable .astatus p{margin-top:6px}
.aopen{text-decoration:none;display:block;margin-bottom:8px}
.aopen:hover{text-decoration:underline}
.chip.strong{font-weight:bold;border-color:var(--black)}
.ast{display:inline-block;font-size:12px;font-weight:bold;padding:2px 7px;border:1px solid var(--black);background:var(--black);color:#fff}
.ast.rejected{background:#fff;color:var(--red);border-color:var(--red)}
.ast.check{background:var(--pg);color:var(--black);border-color:var(--lg)}
.ast.big{font-size:14px;padding:4px 10px}
.apages{display:flex;align-items:center;gap:16px;margin-top:18px;font-size:14px}
.apages .btn{margin-top:0}
.aback{font-size:14px;margin-bottom:14px}
.afoot{margin-top:20px}
#aform .msg{margin-bottom:18px}
#aform .fields label{margin-top:14px}
.afoot .btn{margin-top:0}
.arej{margin-top:12px}
.agen{font-size:14px;margin-bottom:10px}
/* Filters fold away on phones (a "Filters" button); on a computer they are always open. */
.afold>summary{display:none}
@media (max-width:900px){
  .afold>summary{display:block;list-style:none;text-decoration:none;color:var(--black);font-weight:bold;font-size:15px;border:2px solid var(--black);padding:10px 14px;text-align:center;margin-bottom:14px}
  .afold>summary::-webkit-details-marker{display:none}
  .arch{flex-direction:column}
  .afilters{width:100%}
  .aexport{text-align:left;max-width:none}
  .atable thead{display:none}
  .atable,.atable tbody,.atable tr,.atable td{display:block;width:auto}
  .atable tr{border-bottom:1px solid var(--lg);padding:10px 0}
  .atable td{border:none;padding:2px 0}
  .atable .adate,.atable .acountry{display:inline-block;width:auto;margin-right:12px;font-size:13px;color:var(--dg)}
}
/* Update 5.2: notes about stories posted on earlier days, and story lines */
.earlier{font-size:13px;line-height:1.4;padding:8px 10px;margin-bottom:8px;background:var(--pg);border-left:4px solid var(--dg)}
.earlier.repeat{background:#fff;border:1px solid var(--red);border-left:4px solid var(--red)}
.earlier.repeat b{color:var(--red)}
.earlier a{margin-left:6px;font-size:12px;color:var(--dg)}
.earlier .eline{display:block;margin-top:4px;font-weight:bold}
.earlier form{display:block;margin-top:6px}
.msg.aline{margin-bottom:12px}
.aline-box{margin-top:34px;border-top:1px solid var(--lg);padding-top:6px}
.aline-form{margin-top:12px}
.aline-row{display:flex;gap:10px}
.aline-row .btn{margin-top:0;flex:none}
.aline-box .linkbtn{margin-top:12px}
/* Update 5.2.1: tick-lists in the archive filters */
.afilters details.apick{margin:0}
.afilters .apick .mlist{max-height:260px}
.afilters .apick .mlist .check{font-size:13px}
.msg.aline .arename{margin-top:8px}
.msg.aline .aline-row{margin-top:8px}
/* Update 5.3: add stories in bulk */
.bulk .btable{width:100%;border-collapse:collapse;font-size:14px;margin-top:10px}
.bulk .btable td{border-bottom:1px solid var(--lg);padding:8px 10px;vertical-align:top}
.bulk .btable td:last-child{text-align:right;white-space:nowrap}
.bulk .btable.small td{font-size:13px}
.bulk .btable.small td:last-child{text-align:left;white-space:normal}
.bulk .bactions{margin-top:24px;justify-content:flex-start;gap:24px}
.bulk .bactions .btn{margin-top:0}
.bulk .msg.tip p{margin-bottom:8px}