/*
 * enhancements.css - acaeumblue
 *
 * Additive styling layer for the usability enhancements. Loaded from
 * overall_header.html AFTER stylesheet.css so it can override.
 *
 * Two sections:
 *   1. New UI components. Every class is prefixed .ax- so it cannot collide
 *      with anything in the existing stylesheet.
 *   2. Responsive layer. stylesheet.css already has a mobile block at
 *      max-width:580px covering the index/viewforum tables; this file does NOT
 *      restate that work. It adds a tablet breakpoint and covers the areas that
 *      block does not: the posting form, the editor, viewtopic posts and quick
 *      reply.
 *
 * NOTE: the 580px block in stylesheet.css was previously inert on real phones,
 * because the document had no viewport meta tag and mobile browsers therefore
 * laid out at a ~980px virtual width. That tag now exists, so those rules are
 * live for the first time.
 */

/* ==========================================================================
   1. NEW UI COMPONENTS
   ========================================================================== */

/* --- Editor toolbar ---------------------------------------------------- */

.ax-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	align-items: center;
	padding: 4px;
	margin: 0 0 4px 0;
	background: var(--color-beige-alt);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-sizing: border-box;
}

/* input[type=button] is included deliberately: the legacy colour-palette
   control and every custom BBCode button are <input> elements carried over from
   #format-buttons, not <button>s. Without this they keep browser-default
   chrome and look out of place next to the rebuilt buttons. */
.ax-toolbar button,
.ax-toolbar select,
.ax-toolbar input[type="button"],
.ax-toolbar input[type="submit"] {
	font-family: var(--font-family);
	font-size: 12px;
	line-height: 1;
	color: var(--color-text);
	background: var(--color-beige);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 5px 8px;
	min-width: 30px;
	min-height: 30px;
	width: auto;              /* legacy buttons carry inline width: 40px etc. */
	cursor: pointer;
	transition: var(--transition-fast);
	box-sizing: border-box;
	vertical-align: middle;
}

.ax-toolbar button:hover,
.ax-toolbar select:hover,
.ax-toolbar input[type="button"]:hover {
	background: var(--color-brown-light);
	border-color: var(--color-brown-medium);
}

.ax-toolbar button:active,
.ax-toolbar button.ax-active,
.ax-toolbar input[type="button"]:active {
	background: var(--color-brown-medium);
	color: var(--color-white);
}

.ax-toolbar button:focus-visible,
.ax-toolbar select:focus-visible,
.ax-toolbar input[type="button"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
}

/* --- Colour picker ------------------------------------------------------ */

.ax-color-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
}

.ax-color-chip {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	border-radius: 2px;
	background: #c00;
	flex: 0 0 auto;
}

.ax-color-caret {
	font-size: 9px;
	line-height: 1;
	opacity: 0.7;
}

.ax-colorpop {
	position: absolute;
	z-index: 960;
	padding: 8px;
	background: var(--color-beige);
	border: 1px solid var(--color-brown-medium);
	border-radius: 5px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.ax-color-grid {
	display: grid;
	grid-template-columns: repeat(10, 18px);
	gap: 3px;
}

.ax-swatch {
	width: 18px;
	height: 18px;
	padding: 0;
	min-width: 0;
	min-height: 0;
	border: 1px solid rgba(0, 0, 0, 0.28);
	border-radius: 2px;
	cursor: pointer;
	transition: transform 0.08s ease;
}

.ax-swatch:hover,
.ax-swatch:focus-visible {
	transform: scale(1.18);
	outline: 1px solid var(--color-black);
	position: relative;
	z-index: 1;
}

.ax-color-custom {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--color-border);
}

.ax-color-custom input[type="color"] {
	width: 30px;
	height: 26px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background: none;
	cursor: pointer;
}

.ax-color-custom button {
	font-family: var(--font-family);
	font-size: 11px;
	padding: 5px 8px;
	min-height: 26px;
	cursor: pointer;
	background: var(--color-beige);
	border: 1px solid var(--color-border);
	border-radius: 3px;
}

.ax-color-custom button:hover {
	background: var(--color-brown-light);
}

.ax-tb-b { font-weight: bold; }
.ax-tb-i { font-style: italic; }
.ax-tb-u { text-decoration: underline; }

.ax-toolbar .ax-sep {
	width: 1px;
	align-self: stretch;
	margin: 0 3px;
	background: var(--color-border);
}

/* Keep the legacy toolbar reachable but out of the way once JS upgrades it. */
#format-buttons.ax-legacy-hidden {
	display: none;
}

/* --- Autosave indicator ------------------------------------------------ */

.ax-autosave {
	font-size: 11px;
	color: var(--color-gray);
	margin-left: auto;
	padding: 0 6px;
	white-space: nowrap;
}

.ax-autosave.ax-saved { color: var(--color-brown-dark); }

/* The storage-full case is the only one the user can act on, so it is the
   only one allowed to be loud - and it does not auto-fade. */
.ax-autosave.ax-err {
	color: #a12;
	font-weight: bold;
}

.ax-restore {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 8px 10px;
	margin: 0 0 6px 0;
	font-size: 12px;
	background: #fff8d5;
	border: 1px solid var(--color-brown-light);
	border-radius: 4px;
}

.ax-restore button {
	font-family: var(--font-family);
	font-size: 12px;
	padding: 4px 10px;
	min-height: 28px;
	cursor: pointer;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background: var(--color-beige);
}

/* --- Live preview pane -------------------------------------------------- */

.ax-preview {
	margin: 6px 0 0 0;
	padding: 10px;
	background: var(--color-beige);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	min-height: 3em;
}

.ax-preview-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: bold;
	color: var(--color-brown-dark);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 6px;
}

.ax-preview-head button {
	font-family: var(--font-family);
	font-size: 11px;
	text-transform: none;
	letter-spacing: 0;
	padding: 3px 8px;
	cursor: pointer;
	background: var(--color-beige-alt);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	color: var(--color-text);
}

.ax-preview-head button:hover { background: var(--color-brown-light); }

.ax-preview-body { font-size: 13px; line-height: 1.5; }
.ax-preview-body img { max-width: 100%; height: auto; }

/* Dim while a refresh is in flight rather than blanking - the previous render
   stays readable instead of the pane flickering on every keystroke pause. */
.ax-preview.ax-stale { opacity: 0.55; }

.ax-preview.ax-collapsed { min-height: 0; padding-bottom: 6px; }
.ax-preview.ax-collapsed .ax-preview-body { display: none; }
.ax-preview.ax-collapsed .ax-preview-head { margin-bottom: 0; }

.ax-preview-empty { color: var(--color-gray); }

/* --- Drag & drop upload ------------------------------------------------- */

.ax-dropzone {
	position: relative;
	border: 2px dashed transparent;
	border-radius: 6px;
	transition: var(--transition-fast);
}

.ax-dropzone.ax-dragover {
	border-color: var(--color-brown-medium);
	background: rgba(190, 156, 84, 0.12);
}

.ax-drop-hint {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	color: var(--color-brown-dark);
	background: rgba(255, 254, 240, 0.85);
	border-radius: 6px;
	pointer-events: none;
	z-index: 5;
}

.ax-dropzone.ax-dragover .ax-drop-hint { display: flex; }

.ax-uploads { margin: 6px 0 0 0; font-size: 12px; }

.ax-upload-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border-bottom: 1px solid var(--color-beige-border);
}

.ax-upload-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ax-upload-bar {
	flex: 0 0 90px;
	height: 6px;
	background: var(--color-beige-alt);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	overflow: hidden;
}

.ax-upload-bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-brown-medium);
	transition: width 0.2s linear;
}

.ax-upload-row.ax-error .ax-upload-name { color: #a12; }

/* --- @-mention autocomplete --------------------------------------------- */

.ax-mentions {
	position: absolute;
	z-index: 900;
	min-width: 180px;
	max-width: 280px;
	max-height: 210px;
	overflow-y: auto;
	background: var(--color-beige);
	border: 1px solid var(--color-brown-medium);
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
	font-size: 13px;
}

.ax-mention-item {
	display: block;
	padding: 6px 10px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ax-mention-item.ax-sel,
.ax-mention-item:hover {
	background: var(--color-brown-light);
}

/* --- Reactions ----------------------------------------------------------- */

.ax-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	padding: 6px 8px;
	font-size: 12px;
}

.ax-react-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-family);
	font-size: 12px;
	line-height: 1;
	padding: 5px 9px;
	min-height: 28px;
	cursor: pointer;
	background: var(--color-beige);
	border: 1px solid var(--color-border);
	border-radius: 14px;
	transition: var(--transition-fast);
}

.ax-react-btn:hover { background: var(--color-brown-light); }

.ax-react-btn.ax-mine {
	background: var(--color-brown-light);
	border-color: var(--color-brown-dark);
	font-weight: bold;
}

.ax-react-btn[disabled] { opacity: 0.5; cursor: default; }
.ax-react-count { font-variant-numeric: tabular-nums; }
.ax-react-who { color: var(--color-gray); font-size: 11px; }

/* --- Inline post editing -------------------------------------------------- */

.ax-inline-edit { margin: 6px 0; }

.ax-inline-edit textarea {
	width: 100%;
	min-height: 160px;
	box-sizing: border-box;
	font-family: var(--font-family);
	font-size: 13px;
	padding: 6px;
	border: 1px solid var(--color-border);
	border-radius: 3px;
}

.ax-inline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 6px;
}

.ax-inline-actions button {
	font-family: var(--font-family);
	font-size: 12px;
	padding: 6px 14px;
	min-height: 30px;
	cursor: pointer;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background: var(--color-beige);
}

.ax-inline-actions button.ax-primary {
	background: var(--color-brown-medium);
	color: var(--color-white);
	border-color: var(--color-brown-dark);
	font-weight: bold;
}

.ax-msg { font-size: 12px; }
.ax-msg.ax-err { color: #a12; }
.ax-msg.ax-ok  { color: var(--color-brown-dark); }

/* --- Quote-selected-text floating button ---------------------------------- */

.ax-quotesel {
	position: absolute;
	z-index: 950;
	display: none;
	font-family: var(--font-family);
	font-size: 12px;
	padding: 6px 12px;
	min-height: 30px;
	cursor: pointer;
	color: var(--color-white);
	background: var(--color-brown-dark);
	border: 1px solid var(--color-black);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.ax-quotesel:hover { background: var(--color-brown-medium); }

/* --- Lightbox -------------------------------------------------------------- */

.ax-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.85);
	box-sizing: border-box;
}

.ax-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 3px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.ax-lightbox-close {
	position: absolute;
	top: 10px;
	right: 14px;
	font-size: 30px;
	line-height: 1;
	color: var(--color-white);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 8px 12px;
}

.ax-zoomable { cursor: zoom-in; }

/* --- Unread indicator emphasis --------------------------------------------- */

.ax-unread-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: bold;
	padding: 3px 7px;
	border-radius: 10px;
	background: var(--color-brown-light);
	color: var(--color-brown-dark) !important;
	text-decoration: none;
	white-space: nowrap;
}

.ax-unread-link:hover {
	background: var(--color-brown-medium);
	color: var(--color-white) !important;
}

/* A disabled "all read" control should not be a link to nowhere. */
.ax-noop {
	display: inline-block;
	opacity: 0.45;
	cursor: default;
}

/* --- Search results -------------------------------------------------------- */

.ax-search-excerpt {
	display: block;
	margin: 3px 0 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--color-text);
}

.ax-search-excerpt .ax-hit {
	background: #ffef9f;
	font-weight: bold;
	padding: 0 1px;
}

.ax-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 8px 0;
	font-size: 12px;
}

.ax-chip {
	display: inline-block;
	padding: 4px 10px;
	min-height: 26px;
	line-height: 18px;
	border: 1px solid var(--color-border);
	border-radius: 13px;
	background: var(--color-beige);
	cursor: pointer;
	text-decoration: none;
	color: var(--color-text);
}

.ax-chip:hover,
.ax-chip.ax-on {
	background: var(--color-brown-light);
	border-color: var(--color-brown-medium);
}

/* --- Transient action feedback ---------------------------------------------- */

.ax-flash {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	font-size: 11px;
	font-family: var(--font-family);
	white-space: nowrap;
	vertical-align: middle;
	border-radius: 10px;
	background: var(--color-brown-light);
	color: var(--color-brown-dark);
}

.ax-flash.ax-err {
	background: #f7d7d2;
	color: #a12;
}

/* --- Smiley picker ----------------------------------------------------------
   The 18% floated sidebar from stylesheet.css is kept as-is - the width is
   right. The only problem is depth: 129 smilies at ~26px effective spacing runs
   to roughly 14 rows, far taller than the textarea beside it.

   So it scrolls, matched to the height of the posting textarea. The exact
   height is applied by editor_enhanced.js (syncSmileyHeight), because the
   textarea auto-grows as you type and a static value would drift out of
   alignment. Everything below is the no-JS / pre-sync fallback.
   -------------------------------------------------------------------------- */

#smiley-box {
	overflow-y: auto;
	overflow-x: hidden;
	/* Roughly a rows="15" textarea. Replaced by the JS-measured value as soon
	   as the editor initialises; only visible if JS never runs. */
	max-height: 320px;
	/* Room for the scrollbar so the last column is never clipped. */
	padding-right: 2px;
	box-sizing: border-box;
}

/* Keep the "Smilies" caption in view while the list scrolls under it. Sticky
   avoids restructuring the template, which emits the caption as a plain
   <strong> sibling of the smiley links. */
#smiley-box strong {
	position: sticky;
	top: 0;
	z-index: 1;
	display: block;
	padding: 2px 0;
	background: var(--color-beige);
}

/* Four of the 129 smilies exceed 30px (largest 57x40) and break the grid
   rhythm. Constrain them in the PICKER only - posts still render full size. */
#smiley-box img {
	max-width: 28px;
	max-height: 28px;
	width: auto;
	height: auto;
	object-fit: contain;
	vertical-align: middle;
}

/* Hover target. Worth having in a 129-item scrolling grid: it confirms which
   smiley is under the cursor before you click, since many differ only slightly.
   Padding lives on the anchor rather than the image so the highlight is a
   consistent rectangle regardless of the smiley's own dimensions. */
#smiley-box a {
	display: inline-block;
	padding: 2px;
	border-radius: 3px;
	line-height: 0;
	transition: var(--transition-fast);
}

#smiley-box a:hover,
#smiley-box a:focus-visible {
	background: var(--color-brown-light);
	outline: none;
}

html.dark-mode #smiley-box strong { background: #2a2118; }
html.dark-mode #smiley-box a:hover,
html.dark-mode #smiley-box a:focus-visible { background: #4a3a28; }

@media (prefers-reduced-motion: reduce) {
	#smiley-box a { transition: none; }
}

/* --- Posting panel tabs ------------------------------------------------------
   stylesheet.css styles #tabs with sprite GIFs (bg_tabs1.gif / bg_tabs2.gif)
   and #6f6f6f -> #333 grey text: prosilver-era chrome inside a warm parchment
   theme, with a weak active/inactive distinction.

   Restyled as segmented buttons in the same visual language as the editor
   toolbar, so they read as three things you can DO rather than filing tabs.
   The sprite backgrounds are switched off rather than the rules deleted, since
   they live in the base stylesheet.
   -------------------------------------------------------------------------- */

#tabs.ax-tabs {
	/* posting_editor.html closes postingbox's wrapper divs partway through the
	   file (the "</div></div>" under IF not S_SHOW_DRAFTS), so the tab strip
	   renders OUTSIDE .panel and misses its `padding: 0 10px`, while
	   #message-box above it is still inside. Matching that inset lines the tabs
	   up with the textarea and preview pane. */
	padding-left: 10px;
	/* Breathing room before the Load / Save / Submit row below. */
	margin: 10px 0 18px 0;
	line-height: normal;

	/* Same width and box model as the panels, so the wrapping line meets them
	   edge to edge. */
	max-width: 80%;
	box-sizing: border-box;
}

/* --- Tab strip joined to its open panel --------------------------------------
   editor_enhanced.js adds .ax-open while a panel is showing. Only then does the
   strip grow a bottom border, so a closed tab row stays clean.
   -------------------------------------------------------------------------- */

#tabs.ax-tabs.ax-open {
	border-bottom: 1px solid var(--color-brown-medium);
	margin-bottom: 0;        /* meet the panel with no gap */
}

/* The active tab overlaps that border by 1px and hides it, so the tab appears
   to open into the panel below rather than sit above a closed line. */
#tabs.ax-tabs.ax-open .activetab a span {
	margin-bottom: -1px;
	border-bottom-color: var(--color-brown-medium);
	border-radius: 4px 4px 0 0;
}

/* No gap on the panel side either. */
#tabs.ax-tabs.ax-open + #options-panel,
.ax-panel-joined {
	margin-top: 0;
}

#tabs.ax-tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#tabs.ax-tabs li {
	float: none;
	margin: 0;
	padding: 0;
	background: none;
	font-weight: normal;
}

#tabs.ax-tabs a,
#tabs.ax-tabs a:hover,
#tabs.ax-tabs .activetab a,
#tabs.ax-tabs .activetab a:hover {
	display: block;
	background-image: none;   /* kill the sprite */
	background-position: 0 0;
	padding: 0;
	text-decoration: none;
}

#tabs.ax-tabs a span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-image: none;   /* kill the sprite */
	padding: 7px 14px;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: bold;
	line-height: 1.2;
	color: var(--color-text);
	background-color: var(--color-beige);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	white-space: nowrap;
	transition: var(--transition-fast);
}

#tabs.ax-tabs a:hover span {
	color: var(--color-text);
	background-color: var(--color-brown-light);
	border-color: var(--color-brown-medium);
}

/* A clearly-selected state, unlike the original grey-on-grey shift. */
#tabs.ax-tabs .activetab a span,
#tabs.ax-tabs .activetab a:hover span {
	color: var(--color-white);
	background-color: var(--color-brown-medium);
	border-color: var(--color-brown-dark);
}

/* Count / tick shown on a CLOSED panel, so it is obvious something is in it. */
.ax-tab-badge {
	display: none;
	min-width: 16px;
	padding: 1px 5px;
	font-size: 10px;
	font-weight: bold;
	font-style: normal;
	line-height: 14px;
	text-align: center;
	border-radius: 8px;
	background: var(--color-brown-dark);
	color: var(--color-white);
}

.ax-tab-badge.ax-on { display: inline-block; }

#tabs.ax-tabs .activetab .ax-tab-badge {
	background: var(--color-white);
	color: var(--color-brown-dark);
}

/* --- The panels the tabs reveal ---------------------------------------------
   stylesheet.css gives these a light blue box:
       .bg1, .bg4 { background-color: #cadceb; width: 40%; white-space: nowrap }
   (#options-panel uses bg1, #attach-panel bg4). That blue belongs to an older
   scheme and the 40% width made the contents cramped, while the poll panel had
   no width at all and ran the full page.

   All three now share the editor's own surface and width.
   -------------------------------------------------------------------------- */

#options-panel,
#attach-panel,
#poll-panel {
	background-color: transparent;
	background-image: none;
	width: auto;
	max-width: 80%;          /* right edge lines up with #message-box */
	white-space: normal;     /* .bg1 sets nowrap, which clipped long labels */
	box-sizing: border-box;
	/* Keep .panel's own 10px inset. Padding sits INSIDE the border, so the
	   panel's border box starts at x=0 - which is what lets the tab strip's
	   bottom border line up with it exactly. */
	padding-left: 10px;
	padding-right: 10px;

	/* The line that wraps from the tab strip around the open panel. No top
	   border: the tab strip's own bottom border forms that edge, so the two
	   read as one shape. */
	border: 1px solid var(--color-brown-medium);
	border-top: 0;
	border-radius: 0 0 4px 4px;
}

/* Uniform type across all three panel bodies.
   The Post options panel is plain <div><label> and rendered at the right size;
   Attach files and Add a poll use dl/dt/dd, which picked up a mix of sizes from
   the base stylesheet's list and label rules. Everything is pinned to the same
   value so all three read identically. */
#options-panel,
#attach-panel,
#poll-panel,
#options-panel div,
#attach-panel div,
#poll-panel div,
#options-panel dl, #options-panel dt, #options-panel dd,
#attach-panel dl, #attach-panel dt, #attach-panel dd,
#poll-panel dl,   #poll-panel dt,   #poll-panel dd,
#options-panel label,
#attach-panel label,
#poll-panel label,
#options-panel span,
#attach-panel span,
#poll-panel span {
	font-family: var(--font-family);
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text);
}

#options-panel label,
#attach-panel label,
#poll-panel label {
	cursor: pointer;
}

/* Consistent breathing room inside all three, and between their rows. */
#options-panel,
#attach-panel,
#poll-panel {
	padding-top: 12px;
	padding-bottom: 12px;
}

#options-panel div,
#attach-panel dl,
#poll-panel dl {
	margin-bottom: 10px;
}

#options-panel div:last-child,
#attach-panel dl:last-of-type,
#poll-panel dl:last-of-type {
	margin-bottom: 0;
}

/* The poll options box ran to the full page width. Fill the row it is in and
   stop at the same right edge as everything else. */
#poll-panel textarea,
#poll-panel input[type="text"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

#poll-panel input.autowidth,
#poll-panel input[size="3"] {
	width: 5em;              /* "max options" / "run for days" are 3 chars */
}

/* The poll rows sat flush against one another. Space them and separate each
   field group. */
#poll-panel dl {
	margin: 0 0 14px 0;
	padding: 0 0 12px 0;
	border-bottom: 1px solid var(--color-beige-border);
}

#poll-panel dl:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

#poll-panel dd {
	margin-bottom: 5px;
}

/* Field labels are bold; the explanatory text beside them stays the SAME size
   and is distinguished by colour instead, so nothing in these panels renders
   smaller than anything else. */
#poll-panel dt label,
#attach-panel dt label {
	font-weight: bold;
}

#poll-panel dt span,
#attach-panel dt span {
	display: block;
	margin-top: 3px;
	font-weight: normal;
	color: var(--color-gray);
}

html.dark-mode #poll-panel dl { border-bottom-color: #4a3a28; }
html.dark-mode #poll-panel dt span,
html.dark-mode #attach-panel dt span { color: #9b8a72; }

/* --- Alignment --------------------------------------------------------------
   Browsers give <fieldset> a default inline padding (~0.75em), so anything
   inside one is inset relative to a sibling outside one. #message-box lives in
   fieldset.fields1 while the tab strip and submit row do not, which is why they
   did not line up. Zeroing it inside the posting flow puts every element on the
   same left edge - the 10px inset from .panel.
   -------------------------------------------------------------------------- */

#postingbox fieldset,
fieldset.submit-buttons {
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* --- Drag-and-drop hint ------------------------------------------------------ */

.ax-drop-note {
	margin: 4px 0 0 0;
	font-size: 11px;
	color: var(--color-gray);
}

html.dark-mode #tabs.ax-tabs a span {
	color: #e8dcc8;
	background-color: #362a1e;
	border-color: #4a3a28;
}

html.dark-mode #tabs.ax-tabs a:hover span {
	color: #fff;
	background-color: #4a3a28;
}

html.dark-mode #tabs.ax-tabs .activetab a span,
html.dark-mode #tabs.ax-tabs .activetab a:hover span {
	color: #fff;
	background-color: var(--color-brown-medium);
	border-color: var(--color-brown-light);
}

html.dark-mode .ax-drop-note { color: #9b8a72; }

/* --- Submit button row -------------------------------------------------------
   stylesheet.css already centres these (fieldset.submit-buttons has
   text-align: center), but the row spans the full editor width while the
   textarea is only 80% (#smiley-box takes the remaining 18% as a right float).
   Centring across 100% therefore puts the buttons under the midpoint of
   "textarea + smiley sidebar" rather than under the text itself.

   Matching the row to the message box lines them up beneath the textarea and
   preview pane. clear: both keeps it below the floated sidebar.
   -------------------------------------------------------------------------- */

fieldset.submit-buttons {
	width: auto;
	text-align: left;        /* base stylesheet centres these */
	box-sizing: border-box;
	clear: both;
	/* Separate the commit action from the panels above it. */
	margin-top: 16px;
}

/* An open panel should not sit flush against the submit row either. */
#options-panel,
#attach-panel,
#poll-panel {
	margin-bottom: 14px;
}

.ax-submit-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Shared shape, matching the editor toolbar buttons. The base stylesheet's
   `input.button1, input.button2 { width: auto !important }` keeps them from
   stretching, so only the skin is set here. */
.ax-submit-row input.button1,
.ax-submit-row input.button2 {
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: bold;
	line-height: 1;
	padding: 9px 18px;
	min-height: 36px;
	border: 1px solid;
	border-radius: 4px;
	cursor: pointer;
	transition: var(--transition-fast);

	/* MUST clear the image. The base rule is
	     background: #fafafa repeat-x top left;
	     background-image: url(./images/bg_button.gif);
	   a short repeat-x gradient strip anchored to the top. Setting only
	   background-color leaves that grey strip painted over the top of the
	   button - so the colour showed as a band UNDER the text while the text
	   itself sat on grey. */
	background-image: none;
	background-repeat: no-repeat;
}

/* Load Draft / Save Draft - light blue */
.ax-submit-row input.button2 {
	background-color: #cadceb;
	border-color: #8ab0d0;
	color: #1c3a52;
}

.ax-submit-row input.button2:hover {
	background-color: #b3cce4;
	border-color: #5f8fb5;   /* base rule turns this maroon on hover */
	color: #10293b;
}

/* Submit - green */
.ax-submit-row input.button1 {
	background-color: #4a7c3f;
	border-color: #3a6231;
	color: var(--color-white);
}

.ax-submit-row input.button1:hover {
	background-color: #58924b;
	border-color: #2f5228;   /* base rule turns this maroon on hover */
	color: var(--color-white);
}

.ax-submit-row input.button1:focus-visible,
.ax-submit-row input.button2:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

html.dark-mode .ax-submit-row input.button2 {
	background-color: #2f4b63;
	border-color: #46708f;
	color: #dceaf5;
}

html.dark-mode .ax-submit-row input.button2:hover {
	background-color: #3b5f7d;
	border-color: #5f8fb5;
}

html.dark-mode .ax-submit-row input.button1 {
	background-color: #3f6a36;
	border-color: #2f5228;
}

html.dark-mode .ax-submit-row input.button1:hover {
	background-color: #4d8142;
}

/* --- Auction countdown ------------------------------------------------------ */

/* Fixed digits stop the row jittering as the countdown ticks. */
.ax-countdown {
	font-variant-numeric: tabular-nums;
}

/* --- Shared utility --------------------------------------------------------- */

.ax-hidden { display: none !important; }

.ax-spin {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid var(--color-border);
	border-top-color: var(--color-brown-dark);
	border-radius: 50%;
	animation: ax-spin 0.7s linear infinite;
	vertical-align: -2px;
}

@keyframes ax-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.ax-spin { animation: none; }
	.ax-toolbar button,
	.ax-react-btn,
	.ax-dropzone { transition: none; }
}

/* ==========================================================================
   1b. DARK MODE
   --------------------------------------------------------------------------
   The style toggles a `dark-mode` class on <html> from JS (overall_header.html)
   and stylesheet.css carries matching `html.dark-mode ...` overrides. Every new
   component needs a dark variant or it renders as a bright panel on a dark page.
   ========================================================================== */

html.dark-mode .ax-toolbar {
	background: #2a2118;
	border-color: #4a3a28;
}

html.dark-mode .ax-toolbar button,
html.dark-mode .ax-toolbar select,
html.dark-mode .ax-toolbar input[type="button"],
html.dark-mode .ax-toolbar input[type="submit"] {
	background: #362a1e;
	border-color: #4a3a28;
	color: #e8dcc8;
}

html.dark-mode .ax-toolbar button:hover,
html.dark-mode .ax-toolbar select:hover,
html.dark-mode .ax-toolbar input[type="button"]:hover {
	background: #4a3a28;
}

html.dark-mode .ax-colorpop {
	background: #2a2118;
	border-color: var(--color-brown-medium);
}

html.dark-mode .ax-color-custom {
	border-top-color: #4a3a28;
}

html.dark-mode .ax-color-custom button {
	background: #362a1e;
	border-color: #4a3a28;
	color: #e8dcc8;
}

html.dark-mode .ax-color-custom button:hover {
	background: #4a3a28;
}

html.dark-mode .ax-swatch:hover,
html.dark-mode .ax-swatch:focus-visible {
	outline-color: var(--color-white);
}

html.dark-mode .ax-toolbar button:active,
html.dark-mode .ax-toolbar button.ax-active {
	background: var(--color-brown-medium);
	color: #fff;
}

html.dark-mode .ax-toolbar .ax-sep { background: #4a3a28; }

html.dark-mode .ax-preview,
html.dark-mode .ax-mentions,
html.dark-mode .ax-inline-edit textarea {
	background: #2a2118;
	border-color: #4a3a28;
	color: #e8dcc8;
}

html.dark-mode .ax-preview-head { color: var(--color-brown-light); }

html.dark-mode .ax-preview-head button {
	background: #362a1e;
	border-color: #4a3a28;
	color: #e8dcc8;
}

html.dark-mode .ax-preview-head button:hover { background: #4a3a28; }
html.dark-mode .ax-preview-empty { color: #9b8a72; }

html.dark-mode .ax-restore {
	background: #3a2f1a;
	border-color: var(--color-brown-medium);
	color: #e8dcc8;
}

html.dark-mode .ax-restore button,
html.dark-mode .ax-inline-actions button,
html.dark-mode .ax-react-btn,
html.dark-mode .ax-chip {
	background: #362a1e;
	border-color: #4a3a28;
	color: #e8dcc8;
}

html.dark-mode .ax-react-btn:hover,
html.dark-mode .ax-chip:hover,
html.dark-mode .ax-chip.ax-on,
html.dark-mode .ax-mention-item.ax-sel,
html.dark-mode .ax-mention-item:hover {
	background: #4a3a28;
}

html.dark-mode .ax-react-btn.ax-mine {
	background: var(--color-brown-medium);
	border-color: var(--color-brown-light);
	color: #fff;
}

html.dark-mode .ax-autosave,
html.dark-mode .ax-react-who { color: #9b8a72; }

html.dark-mode .ax-autosave.ax-saved { color: var(--color-brown-light); }
html.dark-mode .ax-autosave.ax-err { color: #ff9a8a; }

html.dark-mode .ax-flash {
	background: var(--color-brown-medium);
	color: #fff;
}

html.dark-mode .ax-flash.ax-err {
	background: #6b2320;
	color: #ff9a8a;
}

html.dark-mode .ax-upload-row { border-bottom-color: #4a3a28; }
html.dark-mode .ax-upload-bar { background: #2a2118; border-color: #4a3a28; }

html.dark-mode .ax-dropzone.ax-dragover {
	background: rgba(190, 156, 84, 0.18);
}

html.dark-mode .ax-drop-hint {
	background: rgba(42, 33, 24, 0.88);
	color: var(--color-brown-light);
}

html.dark-mode .ax-unread-link {
	background: var(--color-brown-medium);
	color: #fff !important;
}

html.dark-mode .ax-search-excerpt .ax-hit {
	background: #6b5a1f;
	color: #fff;
}

html.dark-mode .ax-msg.ax-ok { color: var(--color-brown-light); }
html.dark-mode .ax-msg.ax-err { color: #ff9a8a; }

/* ==========================================================================
   2. RESPONSIVE LAYER
   ========================================================================== */

/* --- Always-on: never let media overflow its container -------------------- */

.postbody img,
.ax-preview-body img {
	max-width: 100%;
	height: auto;
}

/* --- Tablet / narrow desktop ---------------------------------------------- */

@media screen and (max-width: 1024px) {
	#wrapcentre,
	.bodyline {
		box-sizing: border-box;
	}

	/* Wide content scrolls inside its own box rather than the page body. */
	.ax-scroll-x {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	textarea#message,
	textarea#signature {
		width: 100% !important;
		box-sizing: border-box;
	}
}

/* --- Phone / small tablet -------------------------------------------------- */

@media screen and (max-width: 768px) {

	/* Posting form: the layout uses <dl><dt>/<dd> pairs that assume a wide
	   two-column arrangement. Stack them. */
	fieldset.fields1 > dl,
	fieldset.fields2 > dl {
		display: block;
		margin: 0 0 8px 0;
	}

	fieldset.fields1 > dl > dt,
	fieldset.fields1 > dl > dd,
	fieldset.fields2 > dl > dt,
	fieldset.fields2 > dl > dd {
		display: block;
		float: none;
		width: auto;
		margin-left: 0;
		text-align: left;
	}

	input.inputbox,
	input#subject,
	input#username {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* The message textarea is sized with cols/rows attributes. */
	textarea#message,
	textarea#signature {
		width: 100% !important;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Quick reply carries inline width:700px, so !important is required. */
	.ax-qr-form textarea,
	form[action*="posting"] textarea[name="message"] {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.ax-qr-form input[type="text"][name="subject"] {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Smiley box sits beside the textarea on desktop; move it below. */
	#smiley-box,
	#message-box {
		float: none;
		width: auto;
		margin: 0 0 8px 0;
	}

	#smiley-box { font-size: 12px; }

	/* Toolbar: allow wrapping and give buttons real tap targets. */
	.ax-toolbar { gap: 4px; }

	.ax-toolbar button {
		min-width: 38px;
		min-height: 38px;
		font-size: 13px;
	}

	/* Legacy toolbar, if JS did not run. */
	#format-buttons input[type="button"],
	#format-buttons select {
		min-height: 36px;
		margin: 2px 1px;
	}

	/* Submit row. The desktop rule narrows this to 80% to sit under the
	   textarea; here the sidebar has stacked and the textarea is full width, so
	   the row should be too. */
	fieldset.submit-buttons {
		width: auto;
		text-align: center;
	}

	fieldset.submit-buttons input {
		min-height: 40px;
		padding: 0 14px;
		margin: 3px 2px;
	}

	/* viewtopic: the author column and post body sit in one wide table row.
	   Let the body take full width and shrink the author cell. */
	.postbody {
		font-size: 13px;
		line-height: 1.5;
	}

	.postbody blockquote {
		margin-left: 6px;
		padding-left: 6px;
	}

	/* Long unbroken strings (URLs, IDs) must not force horizontal scroll. */
	.postbody,
	.postbody a,
	.ax-preview-body {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* Code blocks scroll rather than stretching the page. */
	.postbody .codecontent,
	.postbody pre {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Reactions and inline edit get roomier targets. */
	.ax-react-btn {
		min-height: 34px;
		padding: 7px 12px;
	}

	.ax-inline-actions button { min-height: 38px; }

	.ax-mentions { max-width: 78vw; }

	/* Unread control is a primary action on mobile. */
	.ax-unread-link {
		min-height: 32px;
		padding: 5px 10px;
	}
}

/* --- Very small phones ------------------------------------------------------ */

@media screen and (max-width: 420px) {
	.ax-toolbar button { min-width: 36px; padding: 5px 6px; }
	.ax-toolbar .ax-tb-optional { display: none; }
	.ax-preview { padding: 7px; }
	.ax-react-who { display: none; }
}

/* --- Print ------------------------------------------------------------------ */

@media print {
	.ax-toolbar,
	.ax-reactions,
	.ax-quotesel,
	.ax-autosave,
	.ax-restore,
	.ax-dropzone .ax-drop-hint,
	.ax-lightbox { display: none !important; }
}