/* The editor the forum and the helpdesk share (editor.js), and the card shown while its form is sent; dark counterparts at the end as css-dk.css does */

/* hidden hides, whatever display a rule here or in css.css gives the element */
[hidden] {display:none !important;}

.f-editor {border:1px solid #666; border-radius:6px; overflow:hidden; background:#FFF;}
.f-tabs {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; border-bottom:1px solid #CCC; background:#F2F2F2;}
/* Tabs with rounded tops, inset from the editor's own rounded corner; the open one stands on the line below */
.f-tablist {display:flex; gap:0.4ex; padding:0.6ex 0.6ex 0;}
.f-tablist button {font:inherit; font-size:small; padding:0.6ex 2ex 0.7ex; margin-bottom:-1px; border:1px solid transparent; border-radius:5px 5px 0 0;
	background:transparent; color:#555; cursor:pointer;}
.f-tablist button.on {background:#FFF; color:#000; font-weight:bold; border-color:#CCC; border-bottom-color:#FFF;}
.f-tools {display:flex; flex-wrap:wrap; padding:0.4ex;}
.f-tools button {display:inline-flex; align-items:center; justify-content:center; min-width:4ex; min-height:28px; padding:0.4ex 0.8ex; margin:0 1px; border:1px solid transparent; border-radius:3px; background:transparent; color:#333; cursor:pointer;}
.f-tools button:hover {border-color:#BBB; background:#FFF;}
.f-tools .sep {width:1px; background:#CCC; margin:0.3ex 0.6ex;}
.f-tools .ic.line {width:18px; height:18px; margin:0;}
/* Without editor.js the tabs and toolbar would do nothing, so they wait for it */
.f-editor:not(.f-live) .f-tabs {display:none;}
/* With it, the chosen files are listed and the link and the toolbar open the picker, so the browser's own file box has nothing to add */
.f-live .f-drop input[type="file"] {display:none;}
.f-previewing .f-tools {visibility:hidden;}
.f-over {outline:2px dashed #00668E; outline-offset:-2px;}
.f-emoji {display:flex; flex-wrap:wrap; gap:2px; padding:0.6ex; border-bottom:1px solid #CCC; background:#FAFAFA;}
.f-emoji button {width:2.2em; height:2.2em; padding:0; border:0; border-radius:3px; background:none; font-size:large; cursor:pointer;}
.f-emoji button:hover {background:#E6E6E6;}
.f-preview {min-height:20ex;}
.f-editor textarea {display:block; width:100%; min-height:20ex; border:0; padding:1.5ex; resize:vertical; background:#FFF; line-height:1.5;}
/* The frame clips the text box's own focus ring at the sides, so the frame takes it, as a field's border would */
@supports selector(:has(*)) {
	.f-editor textarea:focus {outline:none;}
	.f-editor:has(textarea:focus) {outline:auto;}
}
.f-drop {padding:1.2ex 1.5ex; color:#666; border-top:1px dashed #CCC; background:#FCFCFC;}
/* Remove (an .f-linkbutton) looks like "choose files", as taking off a file not yet sent is undone by adding it again */
.f-drop label, .f-files .f-linkbutton {color:#00668E; text-decoration:underline; cursor:pointer;}
.f-drop input[type="file"] {display:block; margin-top:1ex;}
.f-files {list-style:none; margin:1ex 0 0; padding:0;}
.f-files li {margin:0.4ex 0; overflow-wrap:anywhere;}
.f-files .f-linkbutton {margin-left:1ex;}

/* The wait while a form is sent and the model reads it (editor.js): a card over the page, a sheet being read and the steps beside it */
.f-wait {position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(242, 242, 242, 0.82);
	animation:f-fadein 0.25s ease-out;}
.f-card {display:flex; align-items:center; gap:26px; padding:20px 26px; background:#FFF; border:1px solid #BBB; border-radius:6px; box-shadow:0 8px 30px rgba(0, 0, 0, 0.12);}
.f-sheet {width:90px; height:108px; flex:none;}
.f-paper {fill:#FFF; stroke:#BBB;}
.f-line {fill:#D6D6D6;}
.f-mark {fill:#92C900; opacity:0.25; animation:f-read 6s steps(1) infinite;}
.f-steps {display:flex; flex-direction:column; gap:14px; margin:0; padding:0; list-style:none; font-size:small; color:#888;}
.f-steps li {display:flex; align-items:center; gap:8px; margin:0;}
.f-steps li::before {content:""; width:14px; height:14px; border-radius:50%; border:2px solid #BBB; box-sizing:border-box; flex:none;}
.f-steps li.now {color:#000; font-weight:bold;}
.f-steps li.now::before {border-color:#6AA800; border-top-color:transparent; animation:f-spin 0.8s linear infinite;}
.f-steps li.done {color:#3C7A00;}
.f-steps li.done::before {background:#6AA800; border-color:#6AA800;}
@keyframes f-fadein {from {opacity:0;} to {opacity:1;}}
@keyframes f-spin {to {transform:rotate(360deg);}}
@keyframes f-read {0% {transform:translateY(0);} 16.6% {transform:translateY(18px);} 33.3% {transform:translateY(36px);} 50% {transform:translateY(54px);}
	66.6% {transform:translateY(72px);} 83.3% {transform:translateY(90px);}}
@media (prefers-reduced-motion: reduce) {
.f-wait, .f-mark, .f-steps li.now::before {animation:none;}
}

@media screen and (prefers-color-scheme: dark) {
.f-editor {border-color:#7E7E7E; background:#222;}
.f-tabs {background:#333; border-bottom-color:#515151;}
.f-tablist button {color:#BBB;}
.f-tablist button.on {background:#222; color:#FFF; border-color:#515151; border-bottom-color:#222;}
.f-tools button {color:#DDD;}
.f-tools button:hover {background:#444; border-color:#666;}
.f-tools .sep {background:#515151;}
.f-editor textarea {background:#222;}
.f-drop {background:#262626; border-top-color:#515151; color:#AAA;}
.f-drop label, .f-files .f-linkbutton {color:#5CC6E0;}
.f-over {outline-color:#00A8CC;}
.f-emoji {background:#262626; border-bottom-color:#515151;}
.f-emoji button:hover {background:#444;}
.f-wait {background:rgba(34, 34, 34, 0.85);}
.f-card {background:#2A2A2A; border-color:#515151;}
.f-paper {fill:#333; stroke:#666;}
.f-line {fill:#555;}
.f-steps li::before {border-color:#666;}
.f-steps li.now {color:#FFF;}
.f-steps li.done {color:#8FD14F;}
}