/* Panel typography, layout and controls. */
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Regular.woff2) format('woff2'); }
@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Bold.woff2) format('woff2'); }

/* Base */
body { font-family: 'Fira Sans', Arial, sans-serif; margin: 0; padding: 0; font-size: 1.2rem; }
input, textarea, button { font: inherit; padding: 4px 6px; box-sizing: border-box; vertical-align: middle; }
input, textarea { width: 100%; min-width: 0; }
textarea { resize: vertical; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #aaa; padding: 3px 6px; text-align: left; }
th { background: #f5f5f5; }
tbody tr:nth-child(even) { background: #f5f5f5; }
button { cursor: pointer; }
button:disabled { cursor: default; color: #888; }
a { text-decoration: none; overflow-wrap: anywhere; }
/* A form button that looks like the links around it. */
.link { padding: 0; border: 0; background: none; text-align: left; }
a, .link { color: #1e4ea3; }
a:hover, .link:hover { color: green; }
a, button, input, textarea { outline: none; }
h1, h2 { font-size: 1.2rem; }
hr { margin-top: 20px; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #aaa; }

/* Layout */
.wrapper { max-width: 800px; margin: 0 auto; padding: 20px; }
nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 1em 0; }
/* Pushed to the right edge of the row, also when it wraps onto a line of its own. */
.posting-control, .report-control { margin-left: auto; }
.post-buttons, .account-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#post-image-name { overflow-wrap: anywhere; }
/* The toggle keeps its colour while disabled and on hover. */
#posting-toggle.ok { color: green; }
#posting-toggle.err { color: red; }
#posting-toggle:disabled { cursor: wait; }

/* Login */
.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; }
.login-box { box-sizing: border-box; padding: 20px; width: 100%; max-width: 360px; text-align: center; }
.login-box h1 { font-size: 1.4rem; margin: 0 0 14px; }
.login-box p { margin: 0 0 14px; }
.login-box p:last-child { margin-bottom: 0; }
.login-box .err { overflow-wrap: anywhere; }

/* Publication and settings content */
.post-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.post-image { display: block; max-width: 100px; max-height: 100px; }
/* A div, not a p: it holds the inline delete form. Keeps the paragraph spacing. */
.account-head { margin: 1em 0; }
.publications-table { table-layout: fixed; }
.publications-table th:last-child { width: 120px; }
.publications-table th.image-cell { width: 100px; }
th.count, td.count { width: 65px; text-align: right; white-space: nowrap; }
.act { white-space: nowrap; }
.ok { color: green; }
.err { color: red; }
.q { color: #888; }
.inline-form { display: inline; }
/* A one-button form spaced like the paragraphs around it. */
.spaced { margin: 1em 0; }

/* Responsive */
@media (max-width: 768px) {
    body { font-size: 1rem; }
    .wrapper { padding: 10px; }
    nav { gap: 14px; overflow-x: auto; white-space: nowrap; margin-bottom: 10px; scrollbar-width: none; -ms-overflow-style: none; }
    nav::-webkit-scrollbar { display: none; }
    nav a { flex-shrink: 0; }
    .publications-table th:last-child { width: 90px; }
}