/* The forum's own rules, only where css.css and /css/app.css have nothing that fits; dark counterparts at the end as css-dk.css does. [hidden] and
   the f-fadein animation come from /css/editor.css, which every forum page loads with this */

.f-actions {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1ex; margin:2ex 0;}

/* Category and topic lists, on /css/app.css's .f-list */
.f-list .f-num {width:9ex;}
.f-list .f-latest {width:38%;}
.f-catcell {display:flex; align-items:center; gap:1.8ex;}
a.f-cat {font-size:large;}
/* The leading icon, the speech balloon or the lock, level with the title's first line */
.f-list .f-ricon {width:1px; padding-right:0; vertical-align:top;}
.f-ricon .ic {width:20px; height:20px; margin:-0.1em 0 0;}

/* Avatars: staff the company icon, guests one silhouette, accounts their initials on Avatar::COLOURS */
.f-av.guest {background:#C8C8C8 url("/forum/guest.svg") center/76% no-repeat;}
.f-av.c0 {background:#1F6F8B;} .f-av.c1 {background:#7A4E9A;} .f-av.c2 {background:#B04A2A;} .f-av.c3 {background:#2F7A4C;}
.f-av.c4 {background:#A23B6B;} .f-av.c5 {background:#56636F;} .f-av.c6 {background:#7F6500;} .f-av.c7 {background:#3B5BA9;}
.f-av.small {width:22px; height:22px; font-size:x-small;}

/* A post's foot */
.f-foot {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1ex; padding:0.8ex 1.5ex; border-top:1px solid #EEE; background:#FFF;}
.f-links {display:flex; flex-wrap:wrap; gap:0.5ex 2ex; margin-left:auto;}
.f-links a {white-space:nowrap;}
.f-links .ic.line {opacity:0.75;}

/* The author's own words before the proofread, for staff, on .colouredbox */
.f-original {padding:1ex 1.5ex; border-radius:6px;}
.f-original summary {cursor:pointer; font-size:small; font-weight:bold;}

/* A refused reply to a closed topic, kept to copy */
.f-kept {display:block; width:100%; min-height:12ex;}

.f-tips ul {margin-top:0;}
.f-row {display:flex; flex-wrap:wrap; gap:0 3ex;}
.f-row .formfields {flex:1; min-width:26ex;}
.f-row .smalltext {margin-top:0.5ex;}
/* An edited post's files, each with its Remove box */
.f-keep {border:0; padding:0; margin:2ex 0 0; min-width:0;}
.f-keep legend {padding:0;}
.f-keep .f-check {margin:0.6ex 0;}
.f-check {display:flex; align-items:center; gap:1ex; font-size:small; margin:1.5ex 0 1ex;}

.f-avpick {border:0; padding:0; margin:0;}
.f-avpick .field {display:flex; flex-wrap:wrap; gap:1.2ex;}
.f-avpick label {cursor:pointer;}
.f-avpick input {position:absolute; opacity:0; width:1px; height:1px;}
.f-avpick input:checked + .f-av {outline:3px solid #00668E; outline-offset:2px;}
.f-avpick input:focus-visible + .f-av {outline:3px dotted #00668E; outline-offset:2px;}
.f-danger {margin-top:3ex;}

/* Staff: the moderation strips, unseen posts and list rows, the draft note */
.f-mod {display:flex; flex-wrap:wrap; align-items:center; gap:0.5ex 2.5ex; padding:0.8ex 1.5ex; background:#FFFDF0; border-top:1px dashed #D8CFA0;}
.f-modtopic {margin:-1ex 0 3ex; border:1px dashed #D8CFA0; border-radius:6px;}
.f-mod summary, .f-mod .f-linkbutton {color:#7A5B00;}
.f-mod summary {display:inline-flex; align-items:center; cursor:pointer; text-decoration:underline; list-style:none;}
.f-mod summary::-webkit-details-marker {display:none;}
.f-mod details[open] {order:1; flex-basis:100%;}
.f-mod details form {display:flex; flex-wrap:wrap; align-items:center; gap:1ex; margin:1ex 0 0.5ex;}
.f-mod details .inputfield {flex:1; width:auto; min-width:24ex;}
.f-post.unseen {border-left:4px solid #6AA800;}
.f-unseen .f-topic a {font-weight:bold;}
.f-unseen td:first-child {box-shadow:inset 4px 0 0 #6AA800;}
.f-new {font-weight:bold; color:#3C7A00;}
.f-markseen {display:flex; flex-wrap:wrap; align-items:center; gap:0.5ex;}

/* The category logos, as <img> */
.ic-cat {width:40px; height:40px; margin:0;}

@media screen and (prefers-color-scheme: dark) {
.f-av.guest {background-color:#5A5A5A;}
.f-foot {background:#222; border-top-color:#333;}
.f-avpick input:checked + .f-av, .f-avpick input:focus-visible + .f-av {outline-color:#00A8CC;}
.f-mod {background:#2E2B1E; border-color:#5A5132;}
.f-mod summary, .f-mod .f-linkbutton {color:#E5C76B;}
.f-new {color:#8FD14F;}
}