/*
 * 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);
}

/* --- 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-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 */
	fieldset.submit-buttons { 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; }
}