/*
 * FAXAT — front-end styles
 *
 * Everything below is driven by CSS custom properties, listed together in the :root
 * block at the top. Nothing else in this file contains a hardcoded colour, radius or
 * border width, so you can restyle the whole plugin by redefining tokens rather than
 * by overriding rules.
 *
 * Nine of these tokens are re-printed in the page head with values read from your
 * theme's colour palette, so Faxat picks up the site's own colours with no setting
 * touched. The values here are the fallback for a theme with no palette.
 *
 * To override any of them, put a :root block in Appearance > Customize > Additional
 * CSS. That loads after everything below and after the head block, so it always wins.
 */

:root {
	/* --- Base. These nine are overridden in the head from the theme palette. --- */
	--faxat-color-accent: #2f6f8f;
	--faxat-color-accent-text: #ffffff;
	--faxat-color-text: #1d2327;
	--faxat-color-border: #dcdcde;
	--faxat-color-muted: #646970;
	--faxat-color-card-bg: #ffffff;
	--faxat-color-subtle-bg: #f6f7f7;
	/* No fallback to a card colour any more — an empty Background follows the theme, which
	   is what every other empty colour does. */
	--faxat-form-field-bg: transparent;
	--faxat-form-field-text: var(--faxat-color-text);

	/* --- Layout --- */
	--faxat-max-width: 1200px;
	--faxat-gap: 16px;
	--faxat-mobile-side-padding: 16px;
	--faxat-font-body: inherit;

	/* --- Radius --- */
	--faxat-radius-btn: 4px;
	--faxat-radius-form-fields: 4px;
	--faxat-radius-cards: 4px;

	/* --- Borders --- */
	--faxat-border-card-color: var(--faxat-color-border);
	--faxat-border-card-size: 1px;
	--faxat-border-form-color: var(--faxat-color-border);
	--faxat-border-form-size: 1px;

	/* --- Primary button --- */
	--faxat-btn-primary-bg: var(--faxat-color-accent);
	--faxat-btn-primary-text: var(--faxat-color-accent-text);
	--faxat-btn-primary-text-hover: var(--faxat-color-accent-text);
	/* Two declarations on purpose: the first is the plain fallback, the second wins
	   wherever color-mix() is supported. Deriving the hover shade rather than filtering
	   the element means an explicitly mapped hover colour is used as given. */
	--faxat-btn-primary-bg-hover: var(--faxat-color-accent);
	--faxat-btn-primary-bg-hover: color-mix(in srgb, var(--faxat-color-accent) 88%, #000);

	/* --- Secondary button --- */
	--faxat-btn-secondary-bg: transparent;
	--faxat-btn-secondary-text: var(--faxat-color-text);
	--faxat-btn-secondary-bg-hover: var(--faxat-table-row-even);
	--faxat-btn-secondary-text-hover: var(--faxat-color-text);
	--faxat-btn-secondary-border-color: var(--faxat-color-border);
	--faxat-btn-secondary-border-size: 1px;

	/* --- Both buttons --- */
	--faxat-btn-font-size: 14px;
	--faxat-btn-line-height: 1.2;
	--faxat-btn-padding: 10px 18px;

	/* --- Ticket ageing. Overridden from settings; the stage a ticket has reached is
	   applied as a class on the row in the desk queue only. --- */
	--faxat-stale-1: #8c8f94;
	--faxat-stale-2: #dba617;
	--faxat-stale-3: #d98500;
	--faxat-stale-4: #d63638;
	--faxat-stale-5: #000000;

	/* --- Table --- */
	--faxat-table-text-font-size: 14px;
	--faxat-table-text-line-height: normal;
	--faxat-table-text-color: inherit;
	--faxat-table-border-color: var(--faxat-color-border);
	--faxat-table-header-bg: transparent;
	--faxat-table-header-text: var(--faxat-color-muted);
	--faxat-table-row-odd: transparent;
	--faxat-table-row-even: transparent;
}

/* Breaks the plugin's own screens out of the side padding many block-editor-compatible
   themes add around normal page content — the same technique WordPress's own `alignfull`
   class uses, so it reliably matches native full-width blocks placed on the same page.
   The var() fallback keeps this a safe no-op on themes that don't define the variable. */
.faxat-full-bleed {
	max-width: none !important;
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}



.faxat-wrap {
	font-family: var(--faxat-font-body);
	color: var(--faxat-color-text);
	max-width: var(--faxat-max-width, 1200px);
	margin: 0 auto;
}

.faxat-wrap .faxat-heading {
	margin: 0;
	font-size: 22px;
	line-height: 1.3;
}

.faxat-wrap .faxat-icon {
	vertical-align: -0.15em;
}

/* ---------- Notices ---------- */

.faxat-wrap .faxat-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--faxat-table-row-even);
	border: var(--faxat-border-card-size) solid var(--faxat-color-border);
	border-radius: var(--faxat-form-field-radius, var(--faxat-radius-form-fields));
	margin-bottom: var(--faxat-gap);
}
.faxat-wrap .faxat-notice-text { flex: 1 1 auto; }

/*
 * The button that puts it away. Quiet until it is wanted: it is the least important thing
 * in a notice and should not compete with the words for attention.
 */
.faxat-wrap .faxat-notice-close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--faxat-color-muted);
	cursor: pointer;
	line-height: 1;
}
.faxat-wrap .faxat-notice-close:hover,
.faxat-wrap .faxat-notice-close:focus-visible { color: var(--faxat-color-text); }

/*
 * A failure says so in its border and its words rather than with a stripe down one side.
 * The stripe was the only thing separating the two kinds, which put the whole distinction
 * in four pixels of colour at one edge — easy to miss, and invisible to anyone who cannot
 * tell the two colours apart.
 */
.faxat-wrap .faxat-notice-error {
	border-color: #b3413a;
	color: #b3413a;
}

/* ---------- Forms ---------- */

.faxat-wrap .faxat-form {
	margin: 0 0 var(--faxat-gap);
}

.faxat-wrap .faxat-field {
	margin-bottom: var(--faxat-gap);
}

/* Field labels, matching Blogano's: small, uppercase, muted and unbold. */
.faxat-wrap .faxat-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: inherit;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--faxat-color-muted);
}

.faxat-wrap .faxat-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--faxat-form-field-text);
	background: var(--faxat-form-field-bg);
	border: var(--faxat-border-form-size) solid var(--faxat-color-border);
	border-radius: var(--faxat-form-field-radius, var(--faxat-radius-form-fields));
}

.faxat-wrap .faxat-input:focus {
	outline: 2px solid var(--faxat-color-accent);
	outline-offset: 1px;
	border-color: var(--faxat-color-accent);
}

.faxat-wrap .faxat-textarea {
	min-height: 120px;
	resize: vertical;
}

.faxat-wrap .faxat-hint {
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--faxat-color-muted);
}


.faxat-wrap .faxat-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Pushed to the far end of the action row rather than making the row space-between: the
   same row is used elsewhere with a single button, where space-between would do nothing
   but the auto margin still behaves. */
.faxat-wrap .faxat-btn-end {
	margin-left: auto;
}

/* Holds only hidden fields — its button lives in the reply form's action row — so it
   must not occupy any vertical space of its own. */
.faxat-wrap .faxat-status-form {
	margin: 0;
}

/* ---------- Buttons ---------- */

.faxat-wrap .faxat-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--faxat-btn-padding);
	font: inherit;
	font-size: var(--faxat-btn-font-size);
	/* Weight, tracking and case copied from Blogano's buttons so the two plugins read as
	   one product on a site running both. A bold button beside a non-bold one is the
	   difference you notice first. */
	font-weight: inherit;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: var(--faxat-btn-line-height);
	text-decoration: none;
	border: 0 solid transparent;
	border-radius: var(--faxat-radius-btn);
	cursor: pointer;
}

.faxat-wrap .faxat-btn-primary {
	background: var(--faxat-btn-primary-bg);
	color: var(--faxat-btn-primary-text);
}

.faxat-wrap .faxat-btn-primary:hover, .faxat-wrap .faxat-btn-primary:focus {
	background: var(--faxat-btn-primary-bg-hover);
	color: var(--faxat-btn-primary-text-hover);
}

.faxat-wrap .faxat-btn-secondary {
	background: var(--faxat-btn-secondary-bg);
	color: var(--faxat-btn-secondary-text);
	/* Width and colour are set with the rest of this button's measurements further down,
	   where the other Normal Button settings are read. Two places setting one property is
	   how the setting came to be overwritten in the first place. */
}

.faxat-wrap .faxat-btn-secondary:hover, .faxat-wrap .faxat-btn-secondary:focus {
	background: var(--faxat-btn-secondary-bg-hover);
	color: var(--faxat-btn-secondary-text-hover);
}

.faxat-wrap .faxat-btn-link {
	background: none;
	border: none;
	padding: 0;
	font-weight: inherit;
	color: var(--faxat-color-muted);
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- Toolbar and filters ---------- */

.faxat-wrap .faxat-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: var(--faxat-gap);
}

.faxat-wrap .faxat-filters {
	display: flex;
	/* Stretch, not centre. The search box and the pickers take their height from their own
	   padding and text, the button from the Normal Button settings — so the two drifted
	   apart the moment either was changed. Stretched, the tallest sets the height and the
	   rest match it, whatever anybody sets afterwards.

	   That is why this is not done by giving the input the button's padding: a copied number
	   agrees until one of them changes. */
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: var(--faxat-gap);
}

/* The search takes the room the other controls do not.
   A search box sized like the pickers beside it fits about three words, which is not enough
   to search a subject line with. */
.faxat-wrap .faxat-filters input[type="search"] {
	flex: 1 1 220px;
	min-width: 0;
}

.faxat-wrap .faxat-filters .faxat-input {
	width: auto;
	min-width: 180px;
}

/* ---------- Table ---------- */

.faxat-wrap .faxat-table-wrap {
	overflow-x: auto;
}

.faxat-wrap .faxat-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--faxat-table-text-font-size);
	line-height: var(--faxat-table-text-line-height);
	color: var(--faxat-color-text);
}

.faxat-wrap .faxat-table th, .faxat-wrap .faxat-table td {
	padding: 10px 12px;
	text-align: left;
	border: 1px solid var(--faxat-color-border);
	vertical-align: top;
}

.faxat-wrap .faxat-table th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: var(--faxat-table-header-bg);
	color: var(--faxat-table-header-text);
	white-space: nowrap;
}

.faxat-wrap .faxat-table tbody tr:nth-child(odd) {
	background: var(--faxat-table-row-odd);
}

.faxat-wrap .faxat-table tbody tr:nth-child(even) {
	background: var(--faxat-table-row-even);
}

.faxat-wrap .faxat-cell-number {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	/* On the same line as the rest of the row. A cell defaults to the top of a row, which
	   only shows once another cell in it runs to two lines — then the number sits up by
	   itself while everything beside it is centred. */
	vertical-align: middle;
}
.faxat-wrap .faxat-table td { vertical-align: middle; }

.faxat-wrap .faxat-cell-age {
	white-space: nowrap;
	color: var(--faxat-color-muted);
}

/* A subject reads as ordinary text. It is already a link and already in the accent colour;
   bold and an underline on top of that is three signals for one thing. */
.faxat-wrap .faxat-ticket-link {
	font-weight: inherit;
	text-decoration: none;
	color: var(--faxat-color-accent);
}
.faxat-wrap .faxat-ticket-link:hover {
	text-decoration: underline;
}

/* ---------- Ticket ageing ---------- */


/* ---------- Badges ---------- */

.faxat-wrap .faxat-badge {
	display: inline-block;
	padding: 2px 9px;
	font-size: 11px;
	/* The page's own weight. A badge is a small word in a ring, and the ring is what makes
	   it a badge — weight on top of that is a third way of saying the same thing. */
	font-weight: inherit;
	text-transform: uppercase;
	letter-spacing: .03em;
	border-radius: 999px;
	background: var(--faxat-table-row-even);
	border: 1px solid var(--faxat-color-border);
	color: var(--faxat-color-muted);
	white-space: nowrap;
}

.faxat-wrap .faxat-badge-open {
	border-color: var(--faxat-color-accent);
	color: var(--faxat-color-accent);
}

.faxat-wrap .faxat-badge-staff {
	background: var(--faxat-color-accent);
	border-color: var(--faxat-color-accent);
	color: var(--faxat-color-accent-text);
}

/* ---------- Pagination ---------- */

.faxat-wrap .faxat-pagination {
	margin-top: var(--faxat-gap);
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* .current is generated by WordPress's own paginate_links() and cannot be renamed, so it is scoped inside .faxat-pagination rather than left as a bare selector. */
.faxat-wrap .faxat-pagination a, .faxat-wrap .faxat-pagination span {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	text-decoration: none;
	border: var(--faxat-border-card-size) solid var(--faxat-color-border);
	border-radius: var(--faxat-radius-btn);
	color: var(--faxat-color-text);
}

.faxat-wrap .faxat-pagination a:hover {
	background: var(--faxat-btn-secondary-bg-hover);
}

.faxat-wrap .faxat-pagination .current {
	background: var(--faxat-btn-primary-bg);
	border-color: var(--faxat-btn-primary-bg);
	color: var(--faxat-btn-primary-text);
}

/* ---------- Single ticket ---------- */

.faxat-wrap .faxat-back {
	margin: 0 0 12px;
}

.faxat-wrap .faxat-ticket-header {
	/* The line belongs to the row, so only one of them carries the space above it. The row
	   had its own bottom margin as well, which left it floating well clear of the rule that
	   is meant to underline it. */
	padding-bottom: 8px;
	margin-bottom: var(--faxat-gap);
	border-bottom: var(--faxat-border-card-size) solid var(--faxat-color-border);
}

.faxat-wrap .faxat-ticket-number {
	/* No size and no margin of its own. Both are left over from when this sat on a line
	   above the subject: a smaller font on a line of centred items rides high, and the
	   margin lifted it further, so the number never sat with the rest. */
	display: inline;
	font-variant-numeric: tabular-nums;
	color: var(--faxat-color-muted);
}

.faxat-wrap .faxat-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--faxat-color-muted);
}

.faxat-wrap .faxat-thread {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 24px;
}

.faxat-wrap .faxat-message {
	padding: 14px 16px;
	background: var(--faxat-ticket-bg, var(--faxat-table-header-bg));
	border: var(--faxat-border-card-size) solid var(--faxat-color-border);
	border-radius: var(--faxat-radius-cards);
	/* Every word in a thread is body text. A reply is not a different kind of writing from
	   the message it answers, and one colour for all of it means the thread reads as one
	   conversation. */
	color: var(--faxat-color-text);
}
.faxat-wrap .faxat-message-body,
.faxat-wrap .faxat-message-head strong { color: var(--faxat-color-text); }

/* A reply is the ticket's colour at half strength.
   Mixed rather than set separately: one colour to choose, and the pair can never be set to
   two shades that fight. Half against transparent rather than against white, so it thins
   over whatever the page is instead of turning pale grey on a dark background. */
/* Staff take one row colour, the requester the other, and every message runs the full width
   of its column.

   They used to be indented away from each other as well — a second signal so neither had to
   carry the distinction alone. In a column beside a reply box that is a stripe of nothing
   down one side of every message, and the two colours turned out to be enough on their own.
   The reasoning that removed it from a phone applies at any width. */
.faxat-wrap .faxat-message-staff { background: var(--faxat-table-row-odd); }
.faxat-wrap .faxat-message-user  { background: var(--faxat-table-row-even); }
/* The opening message is the ticket itself rather than a turn in the conversation, so it
   keeps its own colour. Nothing to undo here any more — no message is indented. */

.faxat-wrap .faxat-message-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
	font-size: 14px;
}

.faxat-wrap .faxat-message-date {
	font-size: 12px;
	color: var(--faxat-color-muted);
}

.faxat-wrap .faxat-message-body {
	font-size: 15px;
	line-height: 1.6;
	word-wrap: break-word;
}

.faxat-wrap .faxat-message-body a {
	word-break: break-all;
}

/* System events sit in the same stream as replies, deliberately quieter. */
.faxat-wrap .faxat-event {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 6px 4px;
	font-size: 13px;
	color: var(--faxat-color-muted);
}

.faxat-wrap .faxat-reply-form {
	/* No rule of its own. It drew one when it sat beneath the thread and needed separating
	   from it; in a column beside the thread there is nothing above it to separate from,
	   and the line just read as a stray mark across the top of the box. */
	padding-top: 0;
}

/* ------------------------------------------------------------------- Contact form */

/* The public form borrows the ticket form's fields and buttons rather than defining its
   own, so a site that has tuned Faxat's appearance gets a contact form that matches without
   touching a second set of settings. Only what is genuinely new is here. */
.faxat-wrap .faxat-contact-intro {
	margin: 0 0 var(--faxat-gap);
	color: var(--faxat-color-text);
}

/* Google's widget carries its own fixed dimensions and cannot be restyled, so it is given
   room rather than fought with. */
/* No rule for the widget: there is nothing on the form to style. The check is invisible and
   runs when the form is sent. Google shows a small badge in the corner of the page instead,
   which their terms require unless the page says in words that reCAPTCHA is in use — so it
   is deliberately left alone rather than hidden. */

/* The sender's address under their name in the queue: present when there is no account
   behind a ticket, and the only way to answer them. */
.faxat-wrap .faxat-guest-email { color: var(--faxat-color-muted); }

/* A field that failed, and why. The message sits with the field rather than only at the top
   of the form, and is tied to it by aria-describedby so a screen reader reads the two
   together. The border is not the only signal — colour alone is no use to anyone who cannot
   distinguish it. */
/* The same red the error notice above uses, rather than a second one. Two reds drifting
   apart is how a plugin ends up looking slightly wrong without anyone being able to say
   why. It is deliberately not a setting: it says something is broken, and a site owner
   choosing that colour freely could choose one that says nothing at all. */
.faxat-wrap .faxat-field-error .faxat-input { border-color: #b3413a; }
.faxat-wrap .faxat-field-message {
	display: block;
	margin-top: 4px;
	font-size: .9em;
	color: #b3413a;
}
/* Follows the muted colour, so it recedes exactly as much as the rest of the quiet text on
   whatever palette the site uses. */
.faxat-wrap .faxat-optional {
	color: var(--faxat-color-muted);
	font-weight: inherit;
}


/* --------------------------------------------------- Appearance: the non-colour settings */

/* Each of these has a fallback, so an empty setting leaves the value the stylesheet already
   had rather than nothing at all. The custom property is only printed when it has a value —
   see the appearance block — and these are what it falls back to. */

.faxat-wrap .faxat-btn-primary {
	font-size: var(--faxat-btn-primary-font-size, inherit);
	line-height: var(--faxat-btn-primary-line-height, normal);
	border-radius: var(--faxat-btn-primary-radius, 6px);
	border-width: var(--faxat-btn-primary-border-px, 0);
	border-style: solid;
	/* Its own colour first, as on the Normal button. The shared border is the fallback
	   rather than the answer. */
	border-color: var(--faxat-btn-primary-border, var(--faxat-color-border));
}

.faxat-wrap .faxat-btn-secondary,
.faxat-wrap .faxat-btn:not(.faxat-btn-primary) {
	font-size: var(--faxat-btn-secondary-font-size, inherit);
	line-height: var(--faxat-btn-secondary-line-height, normal);
	border-radius: var(--faxat-btn-secondary-radius, 6px);
	border-width: var(--faxat-btn-secondary-border-px, 1px);
	border-style: solid;
	/* Its own colour first. This said the shared border outright, and being the later rule
	   it won — so the Normal button's Border setting was overwritten by a hardcoded value
	   every time, however carefully the rule above it was written. */
	border-color: var(--faxat-btn-secondary-border, var(--faxat-color-border));
}

.faxat-wrap .faxat-input {
	border-radius: var(--faxat-form-field-radius, 6px);
	border-width: var(--faxat-form-field-border-px, 1px);
	border-style: solid;
	border-color: var(--faxat-color-border);
}

.faxat-wrap .faxat-table {
	font-size: var(--faxat-table-font-size, inherit);
	line-height: var(--faxat-table-line-height, normal);
}

/* Alternating rows, and the same two colours separating a ticket's replies — one pair of
   settings for both, because they are the same idea: consecutive things that need telling
   apart. */
.faxat-alt-rows .faxat-table tbody tr:nth-child(odd),
.faxat-alt-rows .faxat-reply:nth-child(odd) { background: var(--faxat-table-row-odd); }
.faxat-alt-rows .faxat-table tbody tr:nth-child(even),
.faxat-alt-rows .faxat-reply:nth-child(even) { background: var(--faxat-table-row-even); }

/* Hide borders: the lines between rows and columns, not the frame around the table. */
.faxat-hide-table-borders .faxat-table th,
.faxat-hide-table-borders .faxat-table td { border-color: transparent; }

/* Icon-only and label-only buttons, per button kind — the two can be set separately, so the
   class names carry which one they apply to.

   A hidden label stays in the markup rather than being removed: a control with no
   accessible name is a control nobody using a screen reader can identify. */
.faxat-btn-style-icon-primary .faxat-btn-primary .faxat-btn-label,
.faxat-btn-style-icon-secondary .faxat-btn:not(.faxat-btn-primary) .faxat-btn-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.faxat-btn-style-label-primary .faxat-btn-primary .faxat-btn-icon,
.faxat-btn-style-label-secondary .faxat-btn:not(.faxat-btn-primary) .faxat-btn-icon {
	display: none;
}


/* The contact form is a component, not a screen. It fills whatever it is placed in — a
   half-width column, a sidebar, a full page — rather than reaching for the width of the
   page the way Faxat's own screens do. Content Width does not apply to it for the same
   reason: a form told to be 1200px wide inside a 300px column is the bug this fixes. */
.faxat-contact { max-width: 100%; }
.faxat-contact .faxat-form { max-width: 100%; }
.faxat-contact .faxat-input { max-width: 100%; width: 100%; box-sizing: border-box; }


/* ---------- Ticket detail: two columns ---------- */

/* What you do on the left, what has been said on the right.
   The markup puts the thread first because a thread is the ticket; the order here moves the
   actions across on a wide screen, and on a narrow one the columns stack in source order so
   the conversation reads top to bottom as a conversation should. */
.faxat-wrap .faxat-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.faxat-wrap .faxat-split-actions { order: -1; }

/* The reply box stays put while the thread scrolls past it, which is the point of putting
   them side by side rather than one after the other. */
/* The reply column holds still from where it starts, and the page scrolls as a page does —
   the heading above included.

   The alternative was giving the conversation its own scrolling box so nothing else moved.
   That works, and it puts a scrollbar down the middle of the page, which reads as a second
   window inside the first. A heading that scrolls away is the cheaper of the two prices.

   The line it sticks to is measured on load rather than written here: it is wherever the
   column happens to begin, which depends on what the site puts above the ticket. Left at a
   fixed twenty pixels the column travelled up to meet that line before stopping, which is
   the movement this exists to remove. */
.faxat-wrap .faxat-split-actions {
	position: sticky;
	top: var(--faxat-sticky-top, 20px);
}

/* Newest first. A long thread otherwise buries its most recent turn at the bottom, which
   is the one the reader came for. The opening message is written first and so lands last,
   where the beginning of a conversation belongs when you are reading it backwards. */
.faxat-wrap .faxat-split-thread { display: block; }

/* Newest first, at every width.
   The reversal belongs to the messages, not to the column: on the column, anything else put
   in there — a heading, for one — was reversed along with them.

   A phone used to read oldest first, on the reasoning that a stacked conversation should
   read downwards. It does, but arriving at a ticket then put the oldest message on screen
   and the one you came for several screens below it. Scrolling to the newest on load would
   fix that and take the choice away from anyone who wanted to read from the start; running
   newest first leaves both within reach. */
.faxat-wrap .faxat-thread-messages {
	display: flex;
	flex-direction: column-reverse;
	gap: 12px;
}

/* The subject over the conversation, matching the line over the reply box. */
/* The two column headings are one line each and the same height, so what follows them
   starts at the same place.
   They were the same type and the same margin already, but one of them is a row holding a
   badge — a word in a ring, with padding and a border — and the other is plain text. The
   taller of the two pushed its column down by the difference, which is why the reply field
   sat below the first message rather than beside it. */
.faxat-wrap .faxat-thread-subject,
.faxat-wrap .faxat-ticket-topline.faxat-label {
	display: flex;
	align-items: center;
	min-height: 26px;
}

.faxat-wrap .faxat-thread-subject {
	margin: 0 0 12px;
	font-weight: inherit;
	/* The label size, matching the line across from it. Both head a column and neither is
	   a heading over the page. */
	font-size: 12px;
	text-transform: none;
}

/* The whole header on one line, everything in it at the same size and weight.
   It wraps rather than squeezing, because a long subject on a narrow screen has to go
   somewhere and a line of unreadably small text is worse than two lines. */
.faxat-wrap .faxat-ticket-topline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-bottom: 0;
	font-size: var(--faxat-table-text-font-size, inherit);
	line-height: var(--faxat-table-text-line-height, normal);
	color: var(--faxat-color-text);
}
/* The subject earns a little weight and nothing else — it is the one part somebody scans
   for, and it still has to sit on the line rather than above it. */
.faxat-wrap .faxat-ticket-subject { font-weight: inherit; }
.faxat-wrap .faxat-ticket-number { color: var(--faxat-color-muted); }
.faxat-wrap .faxat-ticket-who,
.faxat-wrap .faxat-ticket-age {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--faxat-color-muted);
}
/* The way out at the far end, and it stays there when the line wraps. */
.faxat-wrap .faxat-topline-panel .faxat-back-link { display: none; }
.faxat-wrap .faxat-ticket-topline .faxat-back-link { margin-left: auto; }

/* The status carries the ageing colour it has in the queue. Stage nothing is the muted
   text colour: not yet late is a real answer, and it should read as quiet rather than as
   the first warning. */
.faxat-wrap .faxat-badge-stale-0 { background: transparent; color: var(--faxat-color-muted); border-color: var(--faxat-color-muted); }
/* Each stage washes its badge in its own colour at half strength, with the outline and the
   word at full. The ring alone was a thin line in a pale tint — legible next to its
   neighbours and not at a glance, which is the only way a queue is ever read.

   A quarter rather than a half: at half the wash was close enough to the outline that the
   two read as one solid block, and the word inside lost its contrast against it.

   Mixed with transparent rather than with white, so it thins over whatever the row behind it
   is instead of turning grey on a dark one. */
.faxat-wrap .faxat-badge-stale-1 { background: color-mix(in srgb, var(--faxat-stale-1) 5%, transparent); color: var(--faxat-stale-1); border-color: var(--faxat-stale-1); }
.faxat-wrap .faxat-badge-stale-2 { background: color-mix(in srgb, var(--faxat-stale-2) 5%, transparent); color: var(--faxat-stale-2); border-color: var(--faxat-stale-2); }
.faxat-wrap .faxat-badge-stale-3 { background: color-mix(in srgb, var(--faxat-stale-3) 5%, transparent); color: var(--faxat-stale-3); border-color: var(--faxat-stale-3); }
.faxat-wrap .faxat-badge-stale-4 { background: color-mix(in srgb, var(--faxat-stale-4) 5%, transparent); color: var(--faxat-stale-4); border-color: var(--faxat-stale-4); }
.faxat-wrap .faxat-badge-stale-5 { background: color-mix(in srgb, var(--faxat-stale-5) 5%, transparent); color: var(--faxat-stale-5); border-color: var(--faxat-stale-5); }



/* The conversation's heading, matching the reply box's beside it.
   The column is drawn bottom-upwards so its newest message comes first, which puts anything
   written last at the top — which is exactly where a heading goes. */
.faxat-wrap .faxat-thread-label { margin: 0; }

/* A message is a field-shaped thing sitting beside a field, so it takes the field's corner
   rather than the card's. Two radii side by side read as two different systems. */
.faxat-wrap .faxat-message { border-radius: var(--faxat-form-field-radius, var(--faxat-radius-form-fields)); }

/* The subject and the age are ordinary text. They were muted, which made the two things
   people actually read the quietest things in the row. */
/* The subject and the age read exactly like the number and the requester beside them.
   inherit, not normal: normal means 400, and a theme whose body text is 300 then renders
   these two heavier than the plain cells either side — which is the difference you see
   before you can name it. Inheriting takes whatever the row is using, whatever that is. */
.faxat-wrap .faxat-ticket-link,
.faxat-wrap .faxat-cell-age {
	color: var(--faxat-color-text);
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* A whole row answers to the pointer. The cursor is the only thing that says so, so it has
   to be there — a row that moves under the mouse without one is a surprise. */
.faxat-wrap .faxat-row[data-href] { cursor: pointer; }

/* The number sits on the same baseline as the rest of the line. It was set to take a line
   of its own in the older header and kept the spacing that went with it. */
.faxat-wrap .faxat-ticket-topline > * { line-height: 1.4; }

/* The two columns start at the same height.
   Each carries a heading — Thread on one side, Reply on the other — and they have to sit on
   one line or everything beneath them is offset by the difference. Stated in one place so
   they cannot drift apart. */
/* The two headings sit on one line and leave the same space beneath them.
   The thread's column separates its children with a gap, so that heading gets the gap as
   well as any margin — it was carrying both, which is why the first message started lower
   than the reply box beside it. The gap does the spacing on that side and the margin does
   it on this one, and the two are stated together so they stay the same number. */
.faxat-wrap .faxat-thread-label {
	display: block;
	margin: 0;
	line-height: 1.4;
}
.faxat-wrap .faxat-reply-form .faxat-label {
	display: block;
	margin: 0 0 12px;
	line-height: 1.4;
}

/* The status form carries hidden fields only, so it takes no room. Left as an ordinary
   block it added a line's worth of height above the reply box and pushed that column down
   past the thread beside it. */
.faxat-wrap .faxat-status-form { display: contents; }


/* ---------- Ticket detail: the two headers ---------- */

/* The subject and the way back, for a narrow screen only. On a wide one the facts sit over
   the reply column and the way back sits under the buttons, which is where they belong when
   there is room to put them. */
/* Shown at every width now, not only on a phone: it is the only place the status, the
   number and the way back appear. The name is left alone rather than churned through the
   markup and the stylesheet for the sake of it. */

/* The ticket's facts head their column, matching Thread across the way: same size, weight
   and colour, and the letter case each already has. */
/* The panel's copy of the identity line is for a phone only; the one at the top of the page
   covers a wide screen. */
/* Three classes on both of these, matching the rule that lays the row out.
   .faxat-wrap .faxat-ticket-topline.faxat-label sets display: flex at three, and every
   attempt to hide or show one of these rows was written at two — so none of them did
   anything at all, and both rows showed at every width. */
.faxat-wrap .faxat-ticket-topline.faxat-label.faxat-topline-panel { display: flex; }

/* The layout of both rows, shared. Their display is set separately below, because one of
   them is drawn and the other is not — joining those two into one rule is how hiding the
   header also hid the requester. */
.faxat-wrap .faxat-ticket-topline.faxat-label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 0 0 12px;
	text-transform: none;
	/* inherit, not the label's normal. normal is 400, and a theme whose body text is 300
	   renders these heavier than everything around them — which reads as bold applied to a
	   number, an address and a time for no reason anyone could name.

	   The size is the label's own 12px. It was set to inherit alongside the weight, which
	   was never the point — the weight was the complaint and the size came along with it,
	   putting that line at body size while every other label stayed small. */
	font-weight: inherit;
	font-size: 12px;
}

/* The way out at the far end of the line it belongs to, and it stays there when the line
   wraps. */
.faxat-wrap .faxat-topline-panel .faxat-back-link { display: none; }
.faxat-wrap .faxat-ticket-topline .faxat-back-link { margin-left: auto; }

/* First on the row, and pushing the buttons away from it. A link and two buttons on one
   line: the quiet thing at one end, the two that do something at the other. */
.faxat-wrap .faxat-actions .faxat-back-desktop { margin-right: auto; }




/* ---------- A message's head ---------- */

/* The date at one end, the writer at the other, both in the same quiet type. Who said it is
   worth knowing and not worth announcing, which is what the far end of a line is for. */
.faxat-wrap .faxat-message-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
}
.faxat-wrap .faxat-message-who {
	margin-left: auto;
	font-size: 12px;
	color: var(--faxat-color-muted);
	text-align: right;
}

/* ---------- Notices ---------- */

/* The notice floats above the page instead of taking a place in it.
   Sitting in the flow, it pushed everything below it down the moment it appeared and pulled
   it back up when dismissed — the page moving under the reader's eyes to tell them
   something went well. Fixed to the top, it says the same thing and moves nothing.

   The layer takes no room and no clicks; only the notice inside it does. */
.faxat-wrap .faxat-notice-layer {
	position: fixed;
	/*
	 * Clear of whatever is fixed above it.
	 *
	 * A floating notice cannot see what else is at the top of the screen, and on a site
	 * with a sticky header it lands underneath one — visible in the markup, invisible to
	 * the reader. The admin bar is a known height and handled below; a theme's own bar is
	 * not, which is what the Notice offset setting is for.
	 */
	top: calc(15vh + var(--faxat-notice-offset, 0px));
	left: 50%;
	transform: translateX(-50%);
	z-index: 10000;
	width: min(560px, calc(100% - 32px));
	pointer-events: none;
}
.faxat-wrap .faxat-notice-layer .faxat-notice {
	pointer-events: auto;
	margin: 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
	background: var(--faxat-page-bg, #fff);
}

/* Nothing here for WordPress's own bar any more.
   It used to need its own numbers because the notice sat sixteen pixels from the top, where
   a 32px or 46px bar covered it. A notice starting a seventh of the way down the screen is
   already clear of it — and of most sticky headers — on any viewport taller than about
   three hundred pixels, which is every one there is. The Notice offset setting stays for a
   theme that fixes something taller than that. */

/* Bigger than a full stop. It is the only control on the notice and it was sized like
   punctuation. */
.faxat-wrap .faxat-notice-close {
	width: 32px;
	height: 32px;
	margin: -4px -6px -4px 0;
	border-radius: var(--faxat-form-field-radius, var(--faxat-radius-form-fields));
}
.faxat-wrap .faxat-notice-close .faxat-icon { width: 18px; height: 18px; }
.faxat-wrap .faxat-notice-close:hover { background: var(--faxat-table-row-even); }

/* ------------------------------------------------------------- Narrow screens */

/*
 * Every narrow-screen rule, in one block at the end of the file.
 *
 * There were three of these with ordinary rules in between, which is how a rule written for
 * a phone came to lose to one written afterwards for everything: a media query decides
 * which rules apply, never which one wins among those that do, so a mobile rule buried
 * halfway up the file is beaten by anything of equal weight below it.
 *
 * One block, last, means a rule here always wins against an equal one above — which is what
 * anyone writing in here expects.
 */
/* A button waiting for its second press. It takes the colour that marks something as
   consequential, so the change is visible without the button moving or resizing — a control
   that changes shape under a finger is a control that gets mis-pressed. */
.faxat-wrap .faxat-btn-asking {
	border-color: var(--faxat-color-accent);
	color: var(--faxat-color-accent);
}

/* Files under a message. A list of links rather than thumbnails: a help desk attachment is
   usually a document, and a row of broken image frames where the PDFs are is worse than a
   name you can read. */
.faxat-wrap .faxat-files {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.faxat-wrap .faxat-files a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}
.faxat-wrap .faxat-file-size { color: var(--faxat-color-muted); }

/* The picker itself, so it does not arrive as an unstyled browser control in the middle of
   a form that has been dressed. */
.faxat-wrap .faxat-file {
	display: block;
	width: 100%;
	padding: 8px;
	border: var(--faxat-form-field-border-px, 1px) solid var(--faxat-color-border);
	border-radius: var(--faxat-form-field-radius, var(--faxat-radius-form-fields));
	background: var(--faxat-form-field-bg, transparent);
	font-size: 13px;
}

/* The button that opens the file picker is for a narrow screen only. On a wide one the
   picker sits in the form where it belongs and needs nothing to reveal it. */
.faxat-wrap .faxat-attach-toggle { display: none; }


/* The row's own items, once they are stretching.
   An input with a height it did not choose still centres its text, but a select and a button
   need telling — and a button that stretches would otherwise put its label at the top. */
.faxat-wrap .faxat-filters .faxat-btn { align-items: center; }
.faxat-wrap .faxat-filters select.faxat-input { padding-top: 0; padding-bottom: 0; }

@media (max-width: 780px) {

	.faxat-full-bleed {
		padding-left: var(--faxat-mobile-side-padding);
		padding-right: var(--faxat-mobile-side-padding);
		box-sizing: border-box;
	}

	/* One column, and the actions go back to the bottom where the source puts them. */
	.faxat-wrap .faxat-split { grid-template-columns: 1fr; }
	.faxat-wrap .faxat-split-actions { order: 0; position: static; }

	/* On a phone the way back is on the line above the field, which is fixed to the foot
	   of the screen and always within reach — so the button row gives its own up rather
	   than crowding three things onto one row. The age goes too: that line is what the
	   ticket is and where to leave it, and how long it has been waiting is a detail a
	   phone has no room for. */
	/* The subject stays the size it was here. The rule setting it to the label size is for
	   a wide screen, where it matches the line across from it; on a phone there is no line
	   across from it and it is the only thing above the conversation. */
	/* The subject stays as it was here: plain text at the page's own size, with no height
	   floor. The rule giving the two headings a matching box is for a wide screen, where
	   they stand side by side; on a phone there is nothing beside it to match. */
	.faxat-wrap .faxat-thread-subject {
		display: block;
		min-height: 0;
		font-size: inherit;
	}

	.faxat-wrap .faxat-topline-panel .faxat-back-link { display: inline-flex; }
	.faxat-wrap .faxat-actions .faxat-back-desktop { display: none; }
	.faxat-wrap .faxat-topline-panel .faxat-ticket-age { display: none; }
	/* Named by every class the element carries, so which rule wins is not a question of
	   counting. A media query changes which rules apply, never which one wins among those
	   that do — a hide written here at two classes loses to a show written anywhere at
	   three, which cost three releases to find. */
	.faxat-wrap .faxat-ticket-topline.faxat-label.faxat-topline-panel {
		display: flex;
		/* The size the buttons below it use. This row and that row are the whole panel, and
		   two sizes between them makes one look like a heading over the other. */
		font-size: 13px;
	}



	/* The reply box stays within reach at the foot of the screen. Shorter, because a box
	   that fills a phone leaves nothing of the conversation visible behind it. */
	.faxat-wrap .faxat-split-actions {
		position: sticky;
		/* Pinned to the foot and explicitly not to the head, so nothing measured for a
		   wide screen can reach down here and unpin it. */
		top: auto;
		bottom: 0;
		z-index: 5;
		/* A line along the top, in the shared Border colour. The shadow alone said the panel
		   was in front of the conversation; the line says where it starts, which matters more
		   when the colours behind and inside it are close. */
		border-top: 1px solid var(--faxat-color-border);

		/* A shadow above it and nothing at the sides.
		   It sits over the conversation and has to look as though it does — but a shadow
		   that spreads sideways draws a line down each edge, and a line down each edge
		   shows that the panel stops short of the screen. So: half the size, cast upwards
		   only, and the panel widened below to reach both edges so there is nothing left
		   for a side shadow to reveal. */
		box-shadow: 0 -4px 12px -4px rgba(0, 0, 0, .12);

		/* Out to the edges of the screen, past the padding the wrap holds it in by, and
		   that padding put back inside so the words keep their distance from the glass. */
		margin-left: calc(var(--faxat-mobile-side-padding, 16px) * -1);
		margin-right: calc(var(--faxat-mobile-side-padding, 16px) * -1);
		padding-left: var(--faxat-mobile-side-padding, 16px);
		padding-right: var(--faxat-mobile-side-padding, 16px);
		padding-bottom: 8px;
		/* Opaque, and white when nothing is set. inherit was here, which on a transparent
		   parent means transparent — so the conversation scrolled through the reply box
		   instead of behind it. */
		background: var(--faxat-page-bg, #fff);
		padding-top: 8px;
	}
	.faxat-wrap .faxat-reply-form textarea { min-height: 0; height: 80px; }

	/* The picker and its note are out of the panel until asked for. They cost a third of a
	   panel fixed to the foot of the screen, to say something most replies do not need. */
	.faxat-wrap .faxat-attach-toggle { display: inline-flex; }
	.faxat-wrap .faxat-field-files { display: none; }
	.faxat-wrap .faxat-files-open .faxat-field-files { display: block; }

	/* The buttons shrink to fit the row rather than wrapping.
	   A button whose label breaks across two lines is taller than the one beside it and
	   reads as a mistake; on a narrow screen there is no room for two full-size buttons and
	   something has to give. Smaller text and tighter sides give it, and nowrap makes sure
	   the words stay on one line whatever is left. */
	.faxat-wrap .faxat-actions { flex-wrap: nowrap; gap: 8px; }
	.faxat-wrap .faxat-actions .faxat-btn {
		flex: 0 1 auto;
		min-width: 0;
		white-space: nowrap;
		font-size: 13px;
		padding-left: 10px;
		padding-right: 10px;
	}
	/* The label gives way before the button does — an icon and a shrinking word still say
	   more than a word cut in half. */
	.faxat-wrap .faxat-actions .faxat-btn-label {
		overflow: hidden;
		text-overflow: ellipsis;
	}


	/* A row on a phone: a dot for the state, the number, and what it is about.
	   The requester and the age are still in the page for anything reading it aloud — they
	   have no width problem to solve, and taking the columns out of the markup would take
	   them from those readers too. */
	/* Out of the table, not lifted out of the row.
	   Clipping a cell with position: absolute takes it out of the flow, and a fixed-layout
	   table counts its columns from the first row — so three lifted cells left it laying out
	   two columns and drawing the table at half the width. A cell that is not there is
	   simpler and behaves. */
	.faxat-wrap .faxat-table .faxat-col-requester,
	.faxat-wrap .faxat-table .faxat-col-age { display: none; }

	/* Fixed, so the subject can be cut to fit. Left to itself a table sizes its columns to
	   their contents and a long subject widens the table rather than shortening itself.

	   The subject column is given no width on purpose: in a fixed table the space left over
	   goes to the columns that did not ask for any. Setting it to zero, as this did, tells
	   the table that column needs nothing — and the table then ends halfway across the
	   screen with the subject squeezed out of it. */
	.faxat-wrap .faxat-table { table-layout: fixed; width: 100%; }
	.faxat-wrap .faxat-table .faxat-col-number { width: 78px; }

	/* The dot and the number share one cell. Two columns for two short things wastes a
	   quarter of a narrow screen on the space between them, and neither means much without
	   the other: a state and the reference it belongs to. */
	/* The status keeps its cell so the word inside it is still read aloud, and the cell is
	   given no width and no padding so nothing of it shows. The badge itself is what gets
	   clipped — an element inside a cell can be lifted out of the flow without the table
	   losing a column. */
	.faxat-wrap .faxat-table .faxat-col-status { width: 0; padding-left: 0; padding-right: 0; }
	.faxat-wrap .faxat-table .faxat-col-status .faxat-badge {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.faxat-wrap .faxat-table tbody .faxat-col-number {
		font-size: 11px;
		white-space: nowrap;
	}

	/* The badge as it looks everywhere else — an outline with a wash behind it — only empty
	   and round. Drawn on the number's cell rather than moved there, because a stylesheet
	   cannot move a cell from one column into another.

	   The colour comes from the row's own ageing class, which is already on the <tr>. */
	.faxat-wrap .faxat-table tbody .faxat-col-number::before {
		content: "";
		display: inline-block;
		width: 11px;
		height: 11px;
		margin-right: 7px;
		vertical-align: -1px;
		border-radius: 50%;
		border: 1px solid var(--faxat-color-muted);
		background: color-mix(in srgb, var(--faxat-color-muted) 5%, transparent);
	}

	.faxat-wrap .faxat-table tbody tr.faxat-stale-1 .faxat-col-number::before { border-color: var(--faxat-stale-1); background: color-mix(in srgb, var(--faxat-stale-1) 5%, transparent); }
	.faxat-wrap .faxat-table tbody tr.faxat-stale-2 .faxat-col-number::before { border-color: var(--faxat-stale-2); background: color-mix(in srgb, var(--faxat-stale-2) 5%, transparent); }
	.faxat-wrap .faxat-table tbody tr.faxat-stale-3 .faxat-col-number::before { border-color: var(--faxat-stale-3); background: color-mix(in srgb, var(--faxat-stale-3) 5%, transparent); }
	.faxat-wrap .faxat-table tbody tr.faxat-stale-4 .faxat-col-number::before { border-color: var(--faxat-stale-4); background: color-mix(in srgb, var(--faxat-stale-4) 5%, transparent); }
	.faxat-wrap .faxat-table tbody tr.faxat-stale-5 .faxat-col-number::before { border-color: var(--faxat-stale-5); background: color-mix(in srgb, var(--faxat-stale-5) 5%, transparent); }

	/* Cut with an ellipsis rather than wrapped. A subject that wraps to three lines makes
	   every row a different height, and a list of tickets is read by scanning down it. */
	.faxat-wrap .faxat-table .faxat-col-subject .faxat-ticket-link {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* No heading over the number on a phone.
	   A column of six-figure references needs no label to be recognised, and the word cost
	   a line across the top of a list whose whole job is to be scanned. The subject keeps
	   its heading, because that column holds sentences and a sentence at the top of a list
	   could be mistaken for a row.

	   Emptied rather than removed: the cell stays so the table still lays out three
	   columns, and the word inside it is still read aloud by anything that reads the page
	   rather than looks at it. */
	.faxat-wrap .faxat-table thead .faxat-col-number,
	.faxat-wrap .faxat-table thead .faxat-col-status { font-size: 0; }
	.faxat-wrap .faxat-table thead .faxat-col-number::before { content: none; }
}