/* Feedback form and the moderators' feedback inbox: cosmas.gingygames.com/feedback (on top of /cosmas/site.css)
   and gingygames.com/kosmas/feedback (on top of the main site's /assets/style.css). */
.cs-tag { display: inline-block; font: 800 .8rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em; padding: 5px 7px 3px; border: 2px solid var(--warn); color: var(--warn); }
.cs-msg { margin: 0; font-weight: 600; }
.cs-msg.ok { color: var(--ok); }
.cs-msg.bad { color: var(--bad); }
.cs-fbwrap { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
.cs-fbwrap h2 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); }
.cs-fbwrap section + section { margin-top: clamp(40px, 6vw, 72px); }
/* feedback form */
.cs-form { display: grid; gap: 22px; max-width: 760px; }
.cs-form label, .cs-form legend { display: grid; gap: 8px; font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; color: var(--white); }
.cs-form small, .cs-form .hint { font: 400 .92rem/1.45 var(--body); text-transform: none; letter-spacing: 0; color: var(--grey); }
.cs-form fieldset { border: 0; padding: 0; margin: 0; }
.cs-form input[type="email"], .cs-form input[type="text"], .cs-form textarea { width: 100%; }
.cs-form textarea { min-height: 200px; }
.cs-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cs-kinds label { display: block; position: relative; }
.cs-kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-kinds span { display: inline-block; padding: 11px 16px 9px; border: 2px solid var(--line); font: 800 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; color: var(--grey); }
.cs-kinds input:checked + span { border-color: var(--red); background: var(--red); color: var(--red-ink); }
.cs-kinds input:focus-visible + span { outline: 3px solid var(--white); outline-offset: 2px; }
.cs-form input[type="file"] { font: 500 .95rem var(--body); color: var(--grey); padding: 8px; }
.cs-check { display: flex !important; align-items: center; gap: 10px !important; text-transform: none !important; letter-spacing: 0 !important; font: 500 1rem/1.4 var(--body) !important; color: var(--grey) !important; }
.cs-check input { width: 18px; height: 18px; accent-color: var(--red); }
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: oklch(0.72 0 0); }

/* feedback inbox (moderators) */
.cs-inbox { border-top: 2px solid var(--white); }
.cs-fb { padding: 20px 0; border-bottom: 2px solid var(--line); scroll-margin-top: 90px; }
.cs-fb header { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 8px; color: var(--grey); font-size: .95rem; }
.cs-fb header b { color: var(--white); font: 800 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.cs-fb .msg { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 10px; }
.cs-fb .meta { color: var(--grey); font-size: .9rem; margin: 0 0 10px; overflow-wrap: anywhere; }
.cs-fb .shot img { max-width: min(520px, 100%); border: 2px solid var(--line); margin: 0 0 10px; }
.cs-tag.st-new { border-color: var(--red); color: var(--red); }
.cs-tag.st-seen { border-color: var(--warn); color: var(--warn); }
.cs-tag.st-done { border-color: var(--ok); color: var(--ok); }
.cs-fb .acts { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.cs-filter a { text-decoration: none; padding: 8px 12px 6px; border: 2px solid var(--line); font: 800 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--grey); }
.cs-filter a[aria-current] { border-color: var(--white); color: var(--white); }